{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "ai-agent-orchestrator",
  "title": "Ai Agent Orchestrator",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/ai-agent-orchestrator/AiAgentOrchestrator.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\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-vue-next'\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  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<Props>()\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 isPaused = ref(false)\nconst elapsedSeconds = ref(134)\nconst selectedAgentId = ref<AgentId>('engineer')\nconst activeStepIndex = ref(2)\nconst copied = ref(false)\nconst expandedThoughts = ref<Record<string, boolean>>({\n  t1: false,\n  t2: false,\n  t3: false,\n  t4: true,\n})\n\nconst codeSnippet = `import { defineComponent, ref, computed } from 'vue'\n\nexport interface AgentWorkflowConfig {\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<ExecutionArtifact[]> {\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 nodes = ref<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 & SFC 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.vue',\n    artifactSize: '2.4 kB',\n    artifactCode: codeSnippet,\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\nconst selectedAgent = computed(() => {\n  return nodes.value.find((n) => n.id === selectedAgentId.value) ?? nodes.value[2]\n})\n\nconst formattedTime = computed(() => {\n  const mins = Math.floor(elapsedSeconds.value / 60)\n  const secs = elapsedSeconds.value % 60\n  return `${mins.toString().padStart(2, '0')}m:${secs.toString().padStart(2, '0')}s`\n})\n\nconst overallProgress = computed(() => {\n  const completedCount = nodes.value.filter((n) => n.status === 'completed').length\n  const running = nodes.value.find((n) => n.status === 'running')\n  const runningBonus = running ? running.progress / 100 : 0\n  return Math.round(((completedCount + runningBonus) / nodes.value.length) * 100)\n})\n\nlet timer: ReturnType<typeof setInterval> | null = null\n\nonMounted(() => {\n  timer = setInterval(() => {\n    if (!isPaused.value && activeStepIndex.value < 4) {\n      elapsedSeconds.value++\n    }\n  }, 1000)\n})\n\nonBeforeUnmount(() => {\n  if (timer) clearInterval(timer)\n})\n\nfunction togglePause() {\n  isPaused.value = !isPaused.value\n}\n\nfunction selectAgent(id: AgentId) {\n  selectedAgentId.value = id\n}\n\nfunction toggleThought(id: string) {\n  expandedThoughts.value[id] = !expandedThoughts.value[id]\n}\n\nfunction toggleAllThoughts() {\n  const anyClosed = selectedAgent.value.thoughts.some((t) => !expandedThoughts.value[t.id])\n  selectedAgent.value.thoughts.forEach((t) => {\n    expandedThoughts.value[t.id] = anyClosed\n  })\n}\n\nfunction stepForward() {\n  if (activeStepIndex.value < nodes.value.length - 1) {\n    nodes.value[activeStepIndex.value].status = 'completed'\n    nodes.value[activeStepIndex.value].progress = 100\n    activeStepIndex.value++\n    nodes.value[activeStepIndex.value].status = 'running'\n    nodes.value[activeStepIndex.value].progress = 45\n    selectedAgentId.value = nodes.value[activeStepIndex.value].id\n  } else if (activeStepIndex.value === nodes.value.length - 1) {\n    nodes.value[activeStepIndex.value].status = 'completed'\n    nodes.value[activeStepIndex.value].progress = 100\n    activeStepIndex.value = 4\n  }\n}\n\nfunction retryStep() {\n  if (activeStepIndex.value < nodes.value.length) {\n    nodes.value[activeStepIndex.value].status = 'running'\n    nodes.value[activeStepIndex.value].progress = 10\n    selectedAgentId.value = nodes.value[activeStepIndex.value].id\n  }\n}\n\nfunction rerunPipeline() {\n  elapsedSeconds.value = 0\n  isPaused.value = false\n  activeStepIndex.value = 0\n  nodes.value.forEach((node, idx) => {\n    if (idx === 0) {\n      node.status = 'running'\n      node.progress = 25\n    } else {\n      node.status = 'queued'\n      node.progress = 0\n    }\n  })\n  selectedAgentId.value = 'planner'\n}\n\nfunction cancelWorkflow() {\n  isPaused.value = true\n}\n\nasync function copyArtifact() {\n  try {\n    await navigator.clipboard.writeText(selectedAgent.value.artifactCode)\n    copied.value = true\n    setTimeout(() => {\n      copied.value = false\n    }, 2000)\n  } catch {\n    // Clipboard fallback\n  }\n}\n</script>\n\n<template>\n  <div data-slot=\"ai-agent-orchestrator\" :class=\"cn('w-full space-y-6', props.class)\">\n    <!-- Top Header Bar -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardContent class=\"flex flex-col gap-4 p-5 sm:flex-row sm:items-center sm:justify-between\">\n        <div class=\"flex items-start gap-3.5 sm:items-center\">\n          <div\n            class=\"bg-primary/10 text-primary border-primary/20 flex size-11 shrink-0 items-center justify-center rounded-xl border\"\n          >\n            <Bot class=\"size-5\" />\n          </div>\n          <div class=\"space-y-1\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <h2 class=\"text-foreground text-lg font-semibold tracking-tight sm:text-xl\">\n                Autonomous Research & Code Generation Squad\n              </h2>\n            </div>\n            <div class=\"text-muted-foreground flex flex-wrap items-center gap-2 text-xs\">\n              <span class=\"font-mono\">Pipeline ID: pipe-892f4c</span>\n              <span>•</span>\n              <span>4 Agents Orchestrated</span>\n              <span>•</span>\n              <span>Target: UIPKGE Registry Block</span>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"flex flex-wrap items-center gap-2.5\">\n          <!-- Status Badge -->\n          <Badge\n            v-if=\"!isPaused && activeStepIndex < 4\"\n            variant=\"outline\"\n            class=\"border-primary/40 bg-primary/10 text-primary shadow-xs\"\n          >\n            <span class=\"relative mr-1.5 flex size-2\">\n              <span class=\"bg-primary absolute inline-flex h-full w-full rounded-full opacity-75\" />\n              <span class=\"bg-primary relative inline-flex size-2 rounded-full\" />\n            </span>\n            Running • Step {{ Math.min(activeStepIndex + 1, 4) }} of 4\n          </Badge>\n          <Badge v-else-if=\"isPaused\" variant=\"warning\" class=\"shadow-xs\">\n            <Pause class=\"mr-1 size-3\" />\n            Paused • Step {{ Math.min(activeStepIndex + 1, 4) }} of 4\n          </Badge>\n          <Badge v-else variant=\"success\" class=\"shadow-xs\">\n            <CheckCircle2 class=\"mr-1 size-3\" />\n            Completed • 4 of 4 Steps\n          </Badge>\n\n          <!-- Timer -->\n          <div\n            class=\"border-border bg-muted/40 text-foreground flex items-center gap-1.5 rounded-md border px-2.5 py-1 font-mono text-xs font-medium\"\n          >\n            <Clock class=\"text-muted-foreground size-3.5\" />\n            <span>{{ formattedTime }}</span>\n          </div>\n\n          <!-- Controls -->\n          <Button variant=\"outline\" size=\"sm\" class=\"h-8 gap-1.5 text-xs\" @click=\"togglePause\">\n            <component :is=\"isPaused ? Play : Pause\" class=\"size-3.5\" />\n            <span>{{ isPaused ? 'Resume Workflow' : 'Pause Workflow' }}</span>\n          </Button>\n\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            class=\"text-muted-foreground hover:text-foreground h-8 gap-1 text-xs\"\n            @click=\"cancelWorkflow\"\n          >\n            <X class=\"size-3.5\" />\n            <span>Cancel</span>\n          </Button>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Agent Flow Pipeline Nodes (Horizontal Connected Flow) -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"pb-3\">\n        <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <CardTitle class=\"text-base font-semibold\">Agent Execution Graph</CardTitle>\n            <CardDescription class=\"text-xs\">\n              Real-time multi-agent execution pipeline. Select any node to inspect telemetry.\n            </CardDescription>\n          </div>\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <span class=\"text-muted-foreground text-xs font-medium\">Pipeline Progress</span>\n            <div class=\"bg-muted h-2 w-28 overflow-hidden rounded-full\">\n              <div\n                class=\"bg-primary h-full transition-[width] duration-500 ease-out\"\n                :style=\"{ width: `${overallProgress}%` }\"\n              />\n            </div>\n            <span class=\"font-mono text-xs font-semibold\">{{ overallProgress }}%</span>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"p-6 pt-2\">\n        <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n          <!-- Node 1: Planner Agent -->\n          <button\n            type=\"button\"\n            class=\"group focus-visible:ring-ring relative flex w-full cursor-pointer flex-col justify-between rounded-xl border p-4 text-left transition-[border-color,box-shadow] duration-200 focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none\"\n            :class=\"[\n              selectedAgentId === 'planner'\n                ? 'border-primary ring-primary/30 shadow-xs ring-2'\n                : 'border-border hover:border-muted-foreground/40',\n              nodes[0].status === 'completed'\n                ? 'bg-card'\n                : nodes[0].status === 'running'\n                  ? 'bg-primary/[0.03] border-primary/60'\n                  : 'bg-muted/20 opacity-75',\n            ]\"\n            :aria-pressed=\"selectedAgentId === 'planner'\"\n            @click=\"selectAgent('planner')\"\n          >\n            <div class=\"space-y-3\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"flex flex-wrap items-center gap-2.5\">\n                  <div\n                    class=\"flex size-9 items-center justify-center rounded-lg border text-xs\"\n                    :class=\"\n                      nodes[0].status === 'completed'\n                        ? 'border-success/30 bg-success/10 text-success'\n                        : nodes[0].status === 'running'\n                          ? 'border-primary/30 bg-primary/10 text-primary'\n                          : 'border-border bg-muted text-muted-foreground'\n                    \"\n                  >\n                    <Compass class=\"size-4\" />\n                  </div>\n                  <div>\n                    <p class=\"text-foreground text-xs leading-none font-semibold\">Planner Agent</p>\n                    <p class=\"text-muted-foreground mt-0.5 text-xs\">Stage 01</p>\n                  </div>\n                </div>\n\n                <Badge v-if=\"nodes[0].status === 'completed'\" variant=\"success\" class=\"gap-1 text-xs\">\n                  <Check class=\"size-3\" />\n                  12s\n                </Badge>\n                <Badge\n                  v-else-if=\"nodes[0].status === 'running'\"\n                  variant=\"outline\"\n                  class=\"border-primary/40 bg-primary/10 text-primary text-xs\"\n                >\n                  Running\n                </Badge>\n                <Badge v-else variant=\"outline\" class=\"text-muted-foreground text-xs\"> Queued </Badge>\n              </div>\n\n              <div class=\"space-y-1\">\n                <p class=\"text-muted-foreground line-clamp-2 text-xs leading-relaxed\">\n                  Deconstruct task into 4 sub-goals\n                </p>\n              </div>\n            </div>\n\n            <div class=\"border-border/60 mt-3 flex items-center justify-between border-t pt-2.5 text-xs\">\n              <span class=\"text-muted-foreground font-mono\">Claude 3.5</span>\n              <span class=\"text-foreground font-medium\">100% done</span>\n            </div>\n          </button>\n\n          <!-- Node 2: Research Agent -->\n          <button\n            type=\"button\"\n            class=\"group focus-visible:ring-ring relative flex w-full cursor-pointer flex-col justify-between rounded-xl border p-4 text-left transition-[border-color,box-shadow] duration-200 focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none\"\n            :class=\"[\n              selectedAgentId === 'researcher'\n                ? 'border-primary ring-primary/30 shadow-xs ring-2'\n                : 'border-border hover:border-muted-foreground/40',\n              nodes[1].status === 'completed'\n                ? 'bg-card'\n                : nodes[1].status === 'running'\n                  ? 'bg-primary/[0.03] border-primary/60'\n                  : 'bg-muted/20 opacity-75',\n            ]\"\n            :aria-pressed=\"selectedAgentId === 'researcher'\"\n            @click=\"selectAgent('researcher')\"\n          >\n            <div class=\"space-y-3\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"flex flex-wrap items-center gap-2.5\">\n                  <div\n                    class=\"flex size-9 items-center justify-center rounded-lg border text-xs\"\n                    :class=\"\n                      nodes[1].status === 'completed'\n                        ? 'border-success/30 bg-success/10 text-success'\n                        : nodes[1].status === 'running'\n                          ? 'border-primary/30 bg-primary/10 text-primary'\n                          : 'border-border bg-muted text-muted-foreground'\n                    \"\n                  >\n                    <Search class=\"size-4\" />\n                  </div>\n                  <div>\n                    <p class=\"text-foreground text-xs leading-none font-semibold\">Research Agent</p>\n                    <p class=\"text-muted-foreground mt-0.5 text-xs\">Stage 02</p>\n                  </div>\n                </div>\n\n                <Badge v-if=\"nodes[1].status === 'completed'\" variant=\"success\" class=\"gap-1 text-xs\">\n                  <Check class=\"size-3\" />\n                  45s\n                </Badge>\n                <Badge\n                  v-else-if=\"nodes[1].status === 'running'\"\n                  variant=\"outline\"\n                  class=\"border-primary/40 bg-primary/10 text-primary text-xs\"\n                >\n                  Running\n                </Badge>\n                <Badge v-else variant=\"outline\" class=\"text-muted-foreground text-xs\"> Queued </Badge>\n              </div>\n\n              <div class=\"space-y-1\">\n                <p class=\"text-muted-foreground line-clamp-2 text-xs leading-relaxed\">\n                  Query documentation and verify API contracts\n                </p>\n              </div>\n            </div>\n\n            <div class=\"border-border/60 mt-3 flex items-center justify-between border-t pt-2.5 text-xs\">\n              <span class=\"text-muted-foreground font-mono\">GPT-4o</span>\n              <span class=\"text-foreground font-medium\">100% done</span>\n            </div>\n          </button>\n\n          <!-- Node 3: Code Engineer Agent (Active Node) -->\n          <button\n            type=\"button\"\n            class=\"group focus-visible:ring-ring relative flex w-full cursor-pointer flex-col justify-between rounded-xl border p-4 text-left transition-[border-color,box-shadow] duration-200 focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none\"\n            :class=\"[\n              selectedAgentId === 'engineer'\n                ? 'border-primary ring-primary/40 shadow-xs ring-2'\n                : 'border-border hover:border-muted-foreground/40',\n              nodes[2].status === 'completed'\n                ? 'bg-card'\n                : nodes[2].status === 'running'\n                  ? 'border-primary/60 bg-primary/[0.04]'\n                  : 'bg-muted/20 opacity-75',\n            ]\"\n            :aria-pressed=\"selectedAgentId === 'engineer'\"\n            @click=\"selectAgent('engineer')\"\n          >\n            <div class=\"space-y-3\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"flex flex-wrap items-center gap-2.5\">\n                  <div\n                    class=\"flex size-9 items-center justify-center rounded-lg border text-xs\"\n                    :class=\"\n                      nodes[2].status === 'completed'\n                        ? 'border-success/30 bg-success/10 text-success'\n                        : nodes[2].status === 'running'\n                          ? 'border-primary/40 bg-primary/15 text-primary'\n                          : 'border-border bg-muted text-muted-foreground'\n                    \"\n                  >\n                    <Code2 class=\"size-4\" />\n                  </div>\n                  <div>\n                    <p class=\"text-foreground text-xs leading-none font-semibold\">Code Engineer</p>\n                    <p class=\"text-muted-foreground mt-0.5 text-xs\">Stage 03</p>\n                  </div>\n                </div>\n\n                <Badge v-if=\"nodes[2].status === 'completed'\" variant=\"success\" class=\"gap-1 text-xs\">\n                  <Check class=\"size-3\" />\n                  1m 17s\n                </Badge>\n                <Badge\n                  v-else-if=\"nodes[2].status === 'running'\"\n                  variant=\"outline\"\n                  class=\"border-primary/50 bg-primary/15 text-primary text-xs font-medium\"\n                >\n                  <span class=\"relative mr-1 flex size-1.5\">\n                    <span class=\"bg-primary absolute inline-flex h-full w-full rounded-full opacity-75\" />\n                    <span class=\"bg-primary relative inline-flex size-1.5 rounded-full\" />\n                  </span>\n                  Streaming\n                </Badge>\n                <Badge v-else variant=\"outline\" class=\"text-muted-foreground text-xs\"> Queued </Badge>\n              </div>\n\n              <div class=\"space-y-1\">\n                <p class=\"text-muted-foreground line-clamp-2 text-xs leading-relaxed\">\n                  Generate component architecture & unit tests\n                </p>\n              </div>\n            </div>\n\n            <div class=\"border-border/60 mt-3 flex items-center justify-between border-t pt-2.5 text-xs\">\n              <span class=\"text-muted-foreground font-mono\">Claude 3.5</span>\n              <span class=\"text-primary font-medium\">{{ nodes[2].progress }}% active</span>\n            </div>\n          </button>\n\n          <!-- Node 4: Reviewer & QA Agent -->\n          <button\n            type=\"button\"\n            class=\"group focus-visible:ring-ring relative flex w-full cursor-pointer flex-col justify-between rounded-xl border p-4 text-left transition-[border-color,box-shadow] duration-200 focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none\"\n            :class=\"[\n              selectedAgentId === 'reviewer'\n                ? 'border-primary ring-primary/30 shadow-xs ring-2'\n                : 'border-border/80 hover:border-muted-foreground/40',\n              nodes[3].status === 'completed'\n                ? 'bg-card'\n                : nodes[3].status === 'running'\n                  ? 'bg-primary/[0.03] border-primary/60'\n                  : 'bg-muted/15 border-dashed',\n            ]\"\n            :aria-pressed=\"selectedAgentId === 'reviewer'\"\n            @click=\"selectAgent('reviewer')\"\n          >\n            <div class=\"space-y-3\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"flex flex-wrap items-center gap-2.5\">\n                  <div\n                    class=\"flex size-9 items-center justify-center rounded-lg border text-xs\"\n                    :class=\"\n                      nodes[3].status === 'completed'\n                        ? 'border-success/30 bg-success/10 text-success'\n                        : nodes[3].status === 'running'\n                          ? 'border-primary/30 bg-primary/10 text-primary'\n                          : 'border-border bg-muted/60 text-muted-foreground'\n                    \"\n                  >\n                    <ShieldCheck class=\"size-4\" />\n                  </div>\n                  <div>\n                    <p class=\"text-foreground text-xs leading-none font-semibold\">Reviewer & QA</p>\n                    <p class=\"text-muted-foreground mt-0.5 text-xs\">Stage 04</p>\n                  </div>\n                </div>\n\n                <Badge v-if=\"nodes[3].status === 'completed'\" variant=\"success\" class=\"gap-1 text-xs\">\n                  <Check class=\"size-3\" />\n                  Passed\n                </Badge>\n                <Badge\n                  v-else-if=\"nodes[3].status === 'running'\"\n                  variant=\"outline\"\n                  class=\"border-primary/40 bg-primary/10 text-primary text-xs\"\n                >\n                  Running\n                </Badge>\n                <Badge v-else variant=\"outline\" class=\"text-muted-foreground border-border/80 text-xs\"> Queued </Badge>\n              </div>\n\n              <div class=\"space-y-1\">\n                <p class=\"text-muted-foreground line-clamp-2 text-xs leading-relaxed\">\n                  Validate TypeScript types and token standards\n                </p>\n              </div>\n            </div>\n\n            <div class=\"border-border/60 mt-3 flex items-center justify-between border-t pt-2.5 text-xs\">\n              <span class=\"text-muted-foreground font-mono\">Claude 3.5</span>\n              <span class=\"text-muted-foreground font-medium\">Pending</span>\n            </div>\n          </button>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Active Execution Detail Panel (2-Column Bento) -->\n    <div class=\"grid grid-cols-1 gap-6 lg:grid-cols-12\">\n      <!-- Left Column: Agent Overview, Thought Stream & Tool Invocations -->\n      <div class=\"space-y-6 lg:col-span-7\">\n        <!-- Active Agent Header & Progress -->\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardHeader class=\"pb-4\">\n            <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <div\n                  class=\"bg-primary/10 text-primary border-primary/20 flex size-10 items-center justify-center rounded-lg border\"\n                >\n                  <component\n                    :is=\"\n                      selectedAgent.id === 'planner'\n                        ? Compass\n                        : selectedAgent.id === 'researcher'\n                          ? Search\n                          : selectedAgent.id === 'engineer'\n                            ? Code2\n                            : ShieldCheck\n                    \"\n                    class=\"size-5\"\n                  />\n                </div>\n                <div>\n                  <div class=\"flex flex-wrap items-center gap-2\">\n                    <CardTitle class=\"text-base font-semibold\">{{ selectedAgent.name }}</CardTitle>\n                    <Badge variant=\"outline\" class=\"font-mono text-xs\">\n                      {{ selectedAgent.model }}\n                    </Badge>\n                  </div>\n                  <CardDescription class=\"text-xs\">\n                    {{ selectedAgent.task }}\n                  </CardDescription>\n                </div>\n              </div>\n\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <Badge v-if=\"selectedAgent.status === 'completed'\" variant=\"success\" class=\"text-xs\">\n                  Completed in {{ selectedAgent.duration }}\n                </Badge>\n                <Badge\n                  v-else-if=\"selectedAgent.status === 'running'\"\n                  variant=\"outline\"\n                  class=\"border-primary/40 bg-primary/10 text-primary text-xs\"\n                >\n                  <Activity class=\"mr-1 size-3 animate-pulse\" />\n                  Streaming • {{ selectedAgent.duration }}\n                </Badge>\n                <Badge v-else variant=\"outline\" class=\"text-muted-foreground text-xs\"> Queued </Badge>\n              </div>\n            </div>\n          </CardHeader>\n\n          <CardContent class=\"space-y-4 pt-0\">\n            <div class=\"space-y-1.5\">\n              <div class=\"text-muted-foreground flex justify-between text-xs font-medium\">\n                <span>Task Execution State</span>\n                <span class=\"font-mono\">{{ selectedAgent.progress }}%</span>\n              </div>\n              <Progress :model-value=\"selectedAgent.progress\" class=\"h-2\" />\n            </div>\n\n            <div class=\"bg-muted/30 border-border grid grid-cols-2 gap-3 rounded-lg border p-3 sm:grid-cols-4\">\n              <div>\n                <p class=\"text-muted-foreground text-xs\">Duration</p>\n                <p class=\"text-foreground font-mono text-xs font-semibold\">{{ selectedAgent.duration }}</p>\n              </div>\n              <div>\n                <p class=\"text-muted-foreground text-xs\">Tokens Output</p>\n                <p class=\"text-foreground font-mono text-xs font-semibold\">{{ selectedAgent.tokens }}</p>\n              </div>\n              <div>\n                <p class=\"text-muted-foreground text-xs\">Throughput</p>\n                <p class=\"text-foreground font-mono text-xs font-semibold\">{{ selectedAgent.speed }}</p>\n              </div>\n              <div>\n                <p class=\"text-muted-foreground text-xs\">Agent Role</p>\n                <p class=\"text-foreground truncate text-xs font-semibold\">{{ selectedAgent.role }}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- Agent Thought Stream Card (Expandable reasoning steps) -->\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardHeader class=\"flex flex-row items-center justify-between pb-3\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <Sparkles class=\"text-primary size-4\" />\n              <CardTitle class=\"text-sm font-semibold\">Agent Thought Stream & Reasoning</CardTitle>\n            </div>\n            <Button\n              variant=\"ghost\"\n              size=\"xs\"\n              class=\"text-muted-foreground hover:text-foreground h-7 text-xs\"\n              @click=\"toggleAllThoughts\"\n            >\n              Toggle Details\n            </Button>\n          </CardHeader>\n\n          <CardContent class=\"space-y-3 pt-0\">\n            <div\n              v-for=\"thought in selectedAgent.thoughts\"\n              :key=\"thought.id\"\n              class=\"border-border bg-muted/20 hover:bg-muted/30 rounded-lg border transition-colors\"\n            >\n              <button\n                type=\"button\"\n                class=\"focus-visible:ring-ring flex w-full cursor-pointer items-center justify-between rounded-lg p-3 text-left focus-visible:ring-2 focus-visible:outline-none\"\n                :aria-expanded=\"expandedThoughts[thought.id]\"\n                @click=\"toggleThought(thought.id)\"\n              >\n                <div class=\"flex flex-wrap items-center gap-2.5\">\n                  <div\n                    class=\"flex size-5 shrink-0 items-center justify-center rounded-full\"\n                    :class=\"\n                      thought.status === 'completed'\n                        ? 'text-success'\n                        : thought.status === 'running'\n                          ? 'text-primary animate-spin'\n                          : 'text-muted-foreground'\n                    \"\n                  >\n                    <CheckCircle2 v-if=\"thought.status === 'completed'\" class=\"size-4\" />\n                    <Activity v-else-if=\"thought.status === 'running'\" class=\"size-4\" />\n                    <div v-else class=\"border-muted-foreground size-3 rounded-full border border-dashed\" />\n                  </div>\n                  <p class=\"text-foreground text-xs font-medium\">{{ thought.title }}</p>\n                </div>\n\n                <div class=\"flex flex-wrap items-center gap-2\">\n                  <Badge variant=\"outline\" class=\"font-mono text-xs\">\n                    {{ thought.duration }}\n                  </Badge>\n                  <component\n                    :is=\"expandedThoughts[thought.id] ? ChevronDown : ChevronRight\"\n                    class=\"text-muted-foreground size-3.5\"\n                  />\n                </div>\n              </button>\n\n              <div\n                v-if=\"expandedThoughts[thought.id]\"\n                class=\"border-border/60 bg-muted/40 text-muted-foreground border-t px-3 py-2.5 text-xs leading-relaxed\"\n              >\n                {{ thought.detail }}\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- Tool Invocations Badge Row & Logs -->\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <Terminal class=\"text-primary size-4\" />\n              <CardTitle class=\"text-sm font-semibold\">Active Tool Invocations</CardTitle>\n            </div>\n          </CardHeader>\n\n          <CardContent class=\"space-y-3 pt-0\">\n            <!-- Badge Row -->\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <Badge\n                v-for=\"tool in selectedAgent.tools\"\n                :key=\"tool.name\"\n                variant=\"outline\"\n                class=\"border-border bg-muted/40 hover:bg-muted text-foreground gap-1.5 px-2.5 py-1 text-xs font-medium\"\n              >\n                <component\n                  :is=\"\n                    tool.icon === 'Globe'\n                      ? Globe\n                      : tool.icon === 'FileText'\n                        ? FileText\n                        : tool.icon === 'Terminal'\n                          ? Terminal\n                          : ShieldCheck\n                  \"\n                  class=\"text-muted-foreground size-3.5\"\n                />\n                <span class=\"font-mono\">{{ tool.name }}</span>\n                <span class=\"bg-primary/10 text-primary py-0.2 rounded-full px-1.5 text-xs font-bold\">\n                  {{ tool.count }}\n                </span>\n              </Badge>\n            </div>\n\n            <!-- Execution Log Terminal Row -->\n            <div class=\"border-border bg-muted/50 overflow-x-auto rounded-lg border p-3 font-mono text-xs\">\n              <div class=\"text-muted-foreground space-y-1\">\n                <div class=\"flex flex-wrap items-center gap-2\">\n                  <span class=\"text-success font-semibold\">[02:14:02]</span>\n                  <span>GET https://uipkge.dev/r/button.json -> 200 OK (38ms)</span>\n                </div>\n                <div class=\"flex flex-wrap items-center gap-2\">\n                  <span class=\"text-success font-semibold\">[02:14:05]</span>\n                  <span>READ packages/registry-vue/components/card/Card.vue (12ms)</span>\n                </div>\n                <div class=\"flex flex-wrap items-center gap-2\">\n                  <span class=\"text-primary font-semibold\">[02:14:09]</span>\n                  <span>AST parse: 4 exports identified, 0 cycle violations</span>\n                </div>\n                <div class=\"flex flex-wrap items-center gap-2\">\n                  <span class=\"text-success font-semibold\">[02:14:14]</span>\n                  <span>Typecheck: 0 errors across 6 test suites</span>\n                </div>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      <!-- Right Column: Live Artifact Output & Pipeline Actions -->\n      <div class=\"space-y-6 lg:col-span-5\">\n        <!-- Live Artifact Output Card -->\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardHeader class=\"flex flex-row items-center justify-between pb-3\">\n            <div class=\"flex flex-wrap items-center gap-2 overflow-hidden\">\n              <FileCode2 class=\"text-primary size-4 shrink-0\" />\n              <CardTitle class=\"truncate font-mono text-xs font-medium\">\n                {{ selectedAgent.artifactFileName }}\n              </CardTitle>\n            </div>\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <Badge variant=\"secondary\" class=\"font-mono text-xs\">\n                {{ selectedAgent.artifactSize }}\n              </Badge>\n              <Button variant=\"outline\" size=\"xs\" class=\"h-7 gap-1 text-xs\" @click=\"copyArtifact\">\n                <component :is=\"copied ? Check : Copy\" class=\"size-3\" />\n                <span>{{ copied ? 'Copied!' : 'Copy' }}</span>\n              </Button>\n            </div>\n          </CardHeader>\n\n          <CardContent class=\"pt-0\">\n            <div class=\"border-border bg-muted/40 relative overflow-hidden rounded-lg border font-mono text-xs\">\n              <!-- Window top bar -->\n              <div class=\"border-border/60 bg-muted/60 flex items-center justify-between border-b px-3 py-1.5\">\n                <div class=\"flex items-center gap-1.5\">\n                  <div class=\"bg-destructive/60 size-2.5 rounded-full\" />\n                  <div class=\"bg-warning/60 size-2.5 rounded-full\" />\n                  <div class=\"bg-success/60 size-2.5 rounded-full\" />\n                </div>\n                <span class=\"text-muted-foreground text-xs\">Live Generated Output</span>\n              </div>\n\n              <!-- Code area with syntax styling -->\n              <div class=\"max-h-[380px] overflow-auto p-3 text-xs leading-relaxed\">\n                <pre\n                  class=\"text-foreground font-mono whitespace-pre-wrap\"\n                ><code>{{ selectedAgent.artifactCode }}</code></pre>\n                <span\n                  v-if=\"selectedAgent.status === 'running'\"\n                  class=\"bg-primary ml-0.5 inline-block h-3.5 w-1.5 animate-pulse align-middle\"\n                />\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- Pipeline Action Controls -->\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <Layers class=\"text-primary size-4\" />\n              <CardTitle class=\"text-sm font-semibold\">Pipeline Orchestrator Controls</CardTitle>\n            </div>\n          </CardHeader>\n\n          <CardContent class=\"space-y-3 pt-0\">\n            <div class=\"grid grid-cols-1 gap-2 sm:grid-cols-2\">\n              <Button\n                variant=\"default\"\n                size=\"sm\"\n                class=\"gap-1.5 text-xs font-medium\"\n                :disabled=\"activeStepIndex >= 4\"\n                @click=\"stepForward\"\n              >\n                <FastForward class=\"size-3.5\" />\n                <span>Step Forward</span>\n              </Button>\n\n              <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs font-medium\" @click=\"retryStep\">\n                <RotateCcw class=\"size-3.5\" />\n                <span>Retry Step</span>\n              </Button>\n\n              <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs font-medium\" @click=\"rerunPipeline\">\n                <RefreshCw class=\"size-3.5\" />\n                <span>Re-run Pipeline</span>\n              </Button>\n\n              <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs font-medium\" @click=\"togglePause\">\n                <component :is=\"isPaused ? Play : Pause\" class=\"size-3.5\" />\n                <span>{{ isPaused ? 'Resume' : 'Pause' }}</span>\n              </Button>\n            </div>\n\n            <p class=\"text-muted-foreground pt-1 text-center text-xs\">\n              Actions dispatch commands across connected autonomous agent nodes.\n            </p>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/AiAgentOrchestrator.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/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"
  ]
}