{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "ai-agent-orchestrator", "title": "Ai Agent Orchestrator", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/ai-agent-orchestrator/AiAgentOrchestrator.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Activity,\n Bot,\n Check,\n CheckCircle2,\n ChevronDown,\n ChevronRight,\n Clock,\n Code2,\n Compass,\n Copy,\n FastForward,\n FileCode2,\n FileText,\n Globe,\n Layers,\n Pause,\n Play,\n RefreshCw,\n RotateCcw,\n Search,\n ShieldCheck,\n Sparkles,\n Terminal,\n X,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\n\ninterface Props {\n className?: string\n}\n\ntype AgentId = 'planner' | 'researcher' | 'engineer' | 'reviewer'\ntype NodeStatus = 'completed' | 'running' | 'queued'\n\ninterface ThoughtStep {\n id: string\n title: string\n duration: string\n status: 'completed' | 'running' | 'queued'\n detail: string\n}\n\ninterface ToolInvocation {\n name: string\n count: number\n icon: string\n}\n\ninterface AgentNode {\n id: AgentId\n stepNumber: number\n name: string\n role: string\n iconName: string\n model: string\n status: NodeStatus\n duration: string\n task: string\n tokens: string\n speed: string\n progress: number\n tools: ToolInvocation[]\n thoughts: ThoughtStep[]\n artifactFileName: string\n artifactSize: string\n artifactCode: string\n}\n\nconst initialCodeSnippet = `import * as React from 'react'\nimport { useAgentGraph } from '@/hooks/useAgentGraph'\n\nexport interface AgentWorkflowConfig {\n pipelineId: string\n name: string\n autonomousMode: boolean\n maxRetries: number\n timeoutMs: number\n}\n\nexport interface ExecutionArtifact {\n fileName: string\n language: string\n content: string\n checksum: string\n}\n\nexport async function dispatchAgentWorkflow(\n config: AgentWorkflowConfig\n): Promise {\n const orchestrator = new MultiAgentEngine({\n model: 'claude-3-5-sonnet',\n telemetry: true,\n })\n\n // Stream reasoning thoughts and token outputs\n const stream = await orchestrator.executePipeline(config.pipelineId)\n return stream.collectArtifacts()\n}`\n\nconst initialNodes: AgentNode[] = [\n {\n id: 'planner',\n stepNumber: 1,\n name: 'Planner Agent',\n role: 'Task Decomposition & Schema',\n iconName: 'Compass',\n model: 'Claude 3.5',\n status: 'completed',\n duration: '12s',\n task: 'Deconstruct task into 4 sub-goals',\n tokens: '842 tokens',\n speed: '52 tok/s',\n progress: 100,\n tools: [\n { name: 'spec_parse', count: 1, icon: 'Terminal' },\n { name: 'context_index', count: 4, icon: 'FileText' },\n ],\n thoughts: [\n {\n id: 'p1',\n title: 'Analyze project manifest and user constraints',\n duration: '3.2s',\n status: 'completed',\n detail:\n 'Identified dual-framework registry requirement (Vue SFC + React TSX) with Tailwind v4 OKLCH token mapping.',\n },\n {\n id: 'p2',\n title: 'Partition workflow into 4 autonomous agent stages',\n duration: '8.8s',\n status: 'completed',\n detail: 'Created topological execution graph: Planner -> Researcher -> Code Engineer -> Reviewer & QA.',\n },\n ],\n artifactFileName: 'pipeline-manifest.json',\n artifactSize: '1.1 kB',\n artifactCode: `{\\n \"pipeline\": \"autonomous-research-codegen\",\\n \"stages\": 4,\\n \"target\": \"UIPKGE Block Registry\",\\n \"strictMode\": true\\n}`,\n },\n {\n id: 'researcher',\n stepNumber: 2,\n name: 'Research Agent',\n role: 'Documentation & API Contracts',\n iconName: 'Search',\n model: 'GPT-4o',\n status: 'completed',\n duration: '45s',\n task: 'Query documentation and verify API contracts',\n tokens: '1,420 tokens',\n speed: '64 tok/s',\n progress: 100,\n tools: [\n { name: 'web_search', count: 2, icon: 'Globe' },\n { name: 'doc_scrape', count: 6, icon: 'FileText' },\n ],\n thoughts: [\n {\n id: 'r1',\n title: 'Verify Reka UI and Radix UI primitive specifications',\n duration: '18s',\n status: 'completed',\n detail: 'Confirmed Radix Progress and Reka Progress Root/Indicator element bindings for zero-drift parity.',\n },\n {\n id: 'r2',\n title: 'Check Lucide icon availability in Vue and React packages',\n duration: '27s',\n status: 'completed',\n detail:\n 'Validated Compass, Search, Code2, ShieldCheck, FastForward, RotateCcw, RefreshCw icons across registries.',\n },\n ],\n artifactFileName: 'api-contracts.d.ts',\n artifactSize: '1.8 kB',\n artifactCode: `export interface NodeContract {\\n id: string\\n status: 'completed' | 'running' | 'queued'\\n duration: string\\n}`,\n },\n {\n id: 'engineer',\n stepNumber: 3,\n name: 'Code Engineer Agent',\n role: 'Component Synthesis & Tests',\n iconName: 'Code2',\n model: 'Claude 3.5',\n status: 'running',\n duration: '1m 17s',\n task: 'Generate component architecture & unit tests',\n tokens: '2,840 tokens',\n speed: '48 tok/s',\n progress: 68,\n tools: [\n { name: 'web_search', count: 2, icon: 'Globe' },\n { name: 'file_read', count: 8, icon: 'FileText' },\n { name: 'ast_parse', count: 1, icon: 'Terminal' },\n { name: 'typecheck', count: 1, icon: 'ShieldCheck' },\n ],\n thoughts: [\n {\n id: 't1',\n title: 'Parse upstream specifications from Planner & Research Agent',\n duration: '14ms',\n status: 'completed',\n detail:\n 'Loaded 4 sub-goal definitions. Validated schema definitions for Reka UI and Radix UI primitive bindings.',\n },\n {\n id: 't2',\n title: 'Synthesize component state machine & reactive bindings',\n duration: '420ms',\n status: 'completed',\n detail:\n 'Constructed state flow machine for pipeline progression. Hooked up active execution timers and streaming buffers.',\n },\n {\n id: 't3',\n title: 'Construct test matrix with boundary coverage',\n duration: '850ms',\n status: 'completed',\n detail:\n 'Generated unit test cases covering step navigation, retry triggers, state pausing, and copy payload verification.',\n },\n {\n id: 't4',\n title: 'Stream production TypeScript & TSX definitions',\n duration: '1m 17s',\n status: 'running',\n detail:\n 'Writing template layout with responsive CSS grid, glowing node state markers, tool invocation badge metrics, and dark-mode safe styling.',\n },\n ],\n artifactFileName: 'AiAgentOrchestrator.tsx',\n artifactSize: '2.4 kB',\n artifactCode: initialCodeSnippet,\n },\n {\n id: 'reviewer',\n stepNumber: 4,\n name: 'Reviewer & QA Agent',\n role: 'Typecheck & Token Audit',\n iconName: 'ShieldCheck',\n model: 'Claude 3.5',\n status: 'queued',\n duration: '0s',\n task: 'Validate TypeScript types and token standards',\n tokens: '0 tokens',\n speed: '0 tok/s',\n progress: 0,\n tools: [\n { name: 'typecheck', count: 1, icon: 'ShieldCheck' },\n { name: 'token_audit', count: 1, icon: 'Terminal' },\n ],\n thoughts: [\n {\n id: 'q1',\n title: 'Perform static type-safety and interface contract validation',\n duration: '0s',\n status: 'queued',\n detail:\n 'Awaiting Code Engineer stream completion to run full TypeScript compiler validation without any types.',\n },\n {\n id: 'q2',\n title: 'Verify minimum 12px font scale and OKLCH color token conformance',\n duration: '0s',\n status: 'queued',\n detail: 'Scanning AST for forbidden sub-12px micro-classes and hardcoded hex color values.',\n },\n ],\n artifactFileName: 'qa-audit-report.md',\n artifactSize: '0.9 kB',\n artifactCode: `# QA Verification Gate\\n- [ ] TypeScript parity check\\n- [ ] Design token conformance\\n- [ ] Accessibility keyboard focus`,\n },\n]\n\nexport function AiAgentOrchestrator({ className }: Props) {\n const [isPaused, setIsPaused] = React.useState(false)\n const [elapsedSeconds, setElapsedSeconds] = React.useState(134)\n const [selectedAgentId, setSelectedAgentId] = React.useState('engineer')\n const [activeStepIndex, setActiveStepIndex] = React.useState(2)\n const [copied, setCopied] = React.useState(false)\n const [nodes, setNodes] = React.useState(initialNodes)\n const [expandedThoughts, setExpandedThoughts] = React.useState>({\n t1: false,\n t2: false,\n t3: false,\n t4: true,\n })\n\n React.useEffect(() => {\n const timer = setInterval(() => {\n if (!isPaused && activeStepIndex < 4) {\n setElapsedSeconds((prev) => prev + 1)\n }\n }, 1000)\n return () => clearInterval(timer)\n }, [isPaused, activeStepIndex])\n\n const selectedAgent = React.useMemo(() => {\n return nodes.find((n) => n.id === selectedAgentId) ?? nodes[2]\n }, [nodes, selectedAgentId])\n\n const formattedTime = React.useMemo(() => {\n const mins = Math.floor(elapsedSeconds / 60)\n const secs = elapsedSeconds % 60\n return `${mins.toString().padStart(2, '0')}m:${secs.toString().padStart(2, '0')}s`\n }, [elapsedSeconds])\n\n const overallProgress = React.useMemo(() => {\n const completedCount = nodes.filter((n) => n.status === 'completed').length\n const running = nodes.find((n) => n.status === 'running')\n const runningBonus = running ? running.progress / 100 : 0\n return Math.round(((completedCount + runningBonus) / nodes.length) * 100)\n }, [nodes])\n\n const togglePause = () => {\n setIsPaused((prev) => !prev)\n }\n\n const selectAgent = (id: AgentId) => {\n setSelectedAgentId(id)\n }\n\n const toggleThought = (id: string) => {\n setExpandedThoughts((prev) => ({ ...prev, [id]: !prev[id] }))\n }\n\n const toggleAllThoughts = () => {\n const anyClosed = selectedAgent.thoughts.some((t) => !expandedThoughts[t.id])\n const next: Record = { ...expandedThoughts }\n selectedAgent.thoughts.forEach((t) => {\n next[t.id] = anyClosed\n })\n setExpandedThoughts(next)\n }\n\n const stepForward = () => {\n if (activeStepIndex < nodes.length - 1) {\n setNodes((prev) => {\n const next = [...prev]\n next[activeStepIndex] = { ...next[activeStepIndex], status: 'completed', progress: 100 }\n const nextIdx = activeStepIndex + 1\n next[nextIdx] = { ...next[nextIdx], status: 'running', progress: 45 }\n return next\n })\n const nextIdx = activeStepIndex + 1\n setActiveStepIndex(nextIdx)\n setSelectedAgentId(nodes[nextIdx].id)\n } else if (activeStepIndex === nodes.length - 1) {\n setNodes((prev) => {\n const next = [...prev]\n next[activeStepIndex] = { ...next[activeStepIndex], status: 'completed', progress: 100 }\n return next\n })\n setActiveStepIndex(4)\n }\n }\n\n const retryStep = () => {\n if (activeStepIndex < nodes.length) {\n setNodes((prev) => {\n const next = [...prev]\n next[activeStepIndex] = { ...next[activeStepIndex], status: 'running', progress: 10 }\n return next\n })\n setSelectedAgentId(nodes[activeStepIndex].id)\n }\n }\n\n const rerunPipeline = () => {\n setElapsedSeconds(0)\n setIsPaused(false)\n setActiveStepIndex(0)\n setNodes((prev) =>\n prev.map((node, idx) => ({\n ...node,\n status: idx === 0 ? 'running' : 'queued',\n progress: idx === 0 ? 25 : 0,\n })),\n )\n setSelectedAgentId('planner')\n }\n\n const cancelWorkflow = () => {\n setIsPaused(true)\n }\n\n const copyArtifact = async () => {\n try {\n await navigator.clipboard.writeText(selectedAgent.artifactCode)\n setCopied(true)\n setTimeout(() => {\n setCopied(false)\n }, 2000)\n } catch {\n // Clipboard fallback\n }\n }\n\n const renderAgentIcon = (id: AgentId) => {\n switch (id) {\n case 'planner':\n return \n case 'researcher':\n return \n case 'engineer':\n return \n case 'reviewer':\n return \n }\n }\n\n const renderToolIcon = (icon: string) => {\n switch (icon) {\n case 'Globe':\n return \n case 'FileText':\n return \n case 'Terminal':\n return \n default:\n return \n }\n }\n\n return (\n
\n {/* Top Header Bar */}\n \n \n
\n
\n \n
\n
\n
\n

\n Autonomous Research & Code Generation Squad\n

\n
\n
\n Pipeline ID: pipe-892f4c\n •\n 4 Agents Orchestrated\n •\n Target: UIPKGE Registry Block\n
\n
\n
\n\n
\n {/* Status Badge */}\n {!isPaused && activeStepIndex < 4 ? (\n \n \n \n \n \n Running • Step {Math.min(activeStepIndex + 1, 4)} of 4\n \n ) : isPaused ? (\n \n \n Paused • Step {Math.min(activeStepIndex + 1, 4)} of 4\n \n ) : (\n \n \n Completed • 4 of 4 Steps\n \n )}\n\n {/* Timer */}\n
\n \n {formattedTime}\n
\n\n {/* Controls */}\n \n\n \n \n Cancel\n \n
\n \n \n\n {/* Agent Flow Pipeline Nodes (Horizontal Connected Flow) */}\n \n \n
\n
\n Agent Execution Graph\n \n Real-time multi-agent execution pipeline. Select any node to inspect telemetry.\n \n
\n
\n Pipeline Progress\n
\n \n
\n {overallProgress}%\n
\n
\n \n\n \n
\n {/* Node 1: Planner Agent */}\n selectAgent('planner')}\n >\n
\n
\n
\n \n \n
\n
\n

Planner Agent

\n

Stage 01

\n
\n
\n\n {nodes[0].status === 'completed' ? (\n \n \n 12s\n \n ) : nodes[0].status === 'running' ? (\n \n Running\n \n ) : (\n \n Queued\n \n )}\n
\n\n
\n

\n Deconstruct task into 4 sub-goals\n

\n
\n
\n\n
\n Claude 3.5\n 100% done\n
\n \n\n {/* Node 2: Research Agent */}\n selectAgent('researcher')}\n >\n
\n
\n
\n \n \n
\n
\n

Research Agent

\n

Stage 02

\n
\n
\n\n {nodes[1].status === 'completed' ? (\n \n \n 45s\n \n ) : nodes[1].status === 'running' ? (\n \n Running\n \n ) : (\n \n Queued\n \n )}\n
\n\n
\n

\n Query documentation and verify API contracts\n

\n
\n
\n\n
\n GPT-4o\n 100% done\n
\n \n\n {/* Node 3: Code Engineer Agent */}\n selectAgent('engineer')}\n >\n
\n
\n
\n \n \n
\n
\n

Code Engineer

\n

Stage 03

\n
\n
\n\n {nodes[2].status === 'completed' ? (\n \n \n 1m 17s\n \n ) : nodes[2].status === 'running' ? (\n \n \n \n \n \n Streaming\n \n ) : (\n \n Queued\n \n )}\n
\n\n
\n

\n Generate component architecture & unit tests\n

\n
\n \n\n
\n Claude 3.5\n {nodes[2].progress}% active\n
\n \n\n {/* Node 4: Reviewer & QA Agent */}\n selectAgent('reviewer')}\n >\n
\n
\n
\n \n \n
\n
\n

Reviewer & QA

\n

Stage 04

\n
\n
\n\n {nodes[3].status === 'completed' ? (\n \n \n Passed\n \n ) : nodes[3].status === 'running' ? (\n \n Running\n \n ) : (\n \n Queued\n \n )}\n
\n\n
\n

\n Validate TypeScript types and token standards\n

\n
\n \n\n
\n Claude 3.5\n Pending\n
\n \n \n \n \n\n {/* Active Execution Detail Panel (2-Column Bento) */}\n
\n {/* Left Column: Agent Overview, Thought Stream & Tool Invocations */}\n
\n {/* Active Agent Header & Progress */}\n \n \n
\n
\n
\n {renderAgentIcon(selectedAgent.id)}\n
\n
\n
\n {selectedAgent.name}\n \n {selectedAgent.model}\n \n
\n {selectedAgent.task}\n
\n
\n\n
\n {selectedAgent.status === 'completed' ? (\n \n Completed in {selectedAgent.duration}\n \n ) : selectedAgent.status === 'running' ? (\n \n \n Streaming • {selectedAgent.duration}\n \n ) : (\n \n Queued\n \n )}\n
\n
\n \n\n \n
\n
\n Task Execution State\n {selectedAgent.progress}%\n
\n \n
\n\n
\n
\n

Duration

\n

{selectedAgent.duration}

\n
\n
\n

Tokens Output

\n

{selectedAgent.tokens}

\n
\n
\n

Throughput

\n

{selectedAgent.speed}

\n
\n
\n

Agent Role

\n

{selectedAgent.role}

\n
\n
\n \n \n\n {/* Agent Thought Stream Card */}\n \n \n
\n \n Agent Thought Stream & Reasoning\n
\n \n Toggle Details\n \n \n\n \n {selectedAgent.thoughts.map((thought) => (\n \n toggleThought(thought.id)}\n >\n
\n \n {thought.status === 'completed' ? (\n \n ) : thought.status === 'running' ? (\n \n ) : (\n
\n )}\n
\n

{thought.title}

\n
\n\n
\n \n {thought.duration}\n \n {expandedThoughts[thought.id] ? (\n \n ) : (\n \n )}\n
\n \n\n {expandedThoughts[thought.id] && (\n
\n {thought.detail}\n
\n )}\n
\n ))}\n \n \n\n {/* Tool Invocations Badge Row & Logs */}\n \n \n
\n \n Active Tool Invocations\n
\n \n\n \n {/* Badge Row */}\n
\n {selectedAgent.tools.map((tool) => (\n \n {renderToolIcon(tool.icon)}\n {tool.name}\n \n {tool.count}\n \n \n ))}\n
\n\n {/* Execution Log Terminal Row */}\n
\n
\n
\n [02:14:02]\n GET https://uipkge.dev/r/button.json → 200 OK (38ms)\n
\n
\n [02:14:05]\n READ packages/registry-react/components/card/card.tsx (12ms)\n
\n
\n [02:14:09]\n AST parse: 4 exports identified, 0 cycle violations\n
\n
\n [02:14:14]\n Typecheck: 0 errors across 6 test suites\n
\n
\n
\n \n \n
\n\n {/* Right Column: Live Artifact Output & Pipeline Actions */}\n
\n {/* Live Artifact Output Card */}\n \n \n
\n \n \n {selectedAgent.artifactFileName}\n \n
\n
\n \n {selectedAgent.artifactSize}\n \n \n
\n \n\n \n
\n {/* Window top bar */}\n
\n
\n
\n
\n
\n
\n Live Generated Output\n
\n\n {/* Code area with syntax styling */}\n
\n 
\n                    {selectedAgent.artifactCode}\n
\n {selectedAgent.status === 'running' && (\n \n )}\n
\n
\n \n \n\n {/* Pipeline Action Controls */}\n \n \n
\n \n Pipeline Orchestrator Controls\n
\n \n\n \n
\n = 4}\n onClick={stepForward}\n >\n \n Step Forward\n \n\n \n\n \n\n \n
\n\n

\n Actions dispatch commands across connected autonomous agent nodes.\n

\n \n \n
\n
\n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/AiAgentOrchestrator.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/progress.json" ], "description": "Multi-agent workflow visualizer and execution graph. Displays real-time agent pipeline topology, active reasoning streams, tool invocation metrics, live code artifact generation, and pipeline control actions.", "categories": [ "ai", "app" ] }