{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "ai-agent-orchestrator", "title": "Ai Agent Orchestrator", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/ai-agent-orchestrator/ai-agent-orchestrator.component.ts", "content": "// Edit this file to change the pipeline (`initialNodes`), the copy or the controls.\n// The pipeline is sample data: wire `stepForward`, `retryStep`, `rerunPipeline` and\n// `cancelWorkflow` to your agent runtime.\nimport {\n Component,\n DestroyRef,\n Input,\n afterNextRender,\n computed,\n inject,\n signal,\n ChangeDetectionStrategy,\n} from '@angular/core'\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 LucideAngularModule,\n Pause,\n Play,\n RefreshCw,\n RotateCcw,\n Search,\n ShieldCheck,\n Sparkles,\n Terminal,\n X,\n type LucideIconData,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\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\nconst NODE_BASE =\n '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\n/** Per-node class variations, exactly as the React block writes them for each of its four node buttons. */\nconst NODE_STYLES: Record<\n AgentId,\n { selected: string; idle: string; running: string; queued: string; iconRunning: string; iconQueued: string }\n> = {\n planner: {\n selected: 'border-primary ring-primary/30 shadow-xs ring-2',\n idle: 'border-border hover:border-muted-foreground/40',\n running: 'border-primary/60 bg-primary/[0.03]',\n queued: 'bg-muted/20 opacity-75',\n iconRunning: 'border-primary/30 bg-primary/10 text-primary',\n iconQueued: 'border-border bg-muted text-muted-foreground',\n },\n researcher: {\n selected: 'border-primary ring-primary/30 shadow-xs ring-2',\n idle: 'border-border hover:border-muted-foreground/40',\n running: 'border-primary/60 bg-primary/[0.03]',\n queued: 'bg-muted/20 opacity-75',\n iconRunning: 'border-primary/30 bg-primary/10 text-primary',\n iconQueued: 'border-border bg-muted text-muted-foreground',\n },\n engineer: {\n selected: 'border-primary ring-primary/40 shadow-xs ring-2',\n idle: 'border-border hover:border-muted-foreground/40',\n running: 'border-primary/60 bg-primary/[0.04]',\n queued: 'bg-muted/20 opacity-75',\n iconRunning: 'border-primary/40 bg-primary/15 text-primary',\n iconQueued: 'border-border bg-muted text-muted-foreground',\n },\n reviewer: {\n selected: 'border-primary ring-primary/30 shadow-xs ring-2',\n idle: 'border-border/80 hover:border-muted-foreground/40',\n running: 'border-primary/60 bg-primary/[0.03]',\n queued: 'bg-muted/15 border-dashed',\n iconRunning: 'border-primary/30 bg-primary/10 text-primary',\n iconQueued: 'border-border bg-muted/60 text-muted-foreground',\n },\n}\n\nconst AGENT_ICONS: Record = {\n planner: Compass,\n researcher: Search,\n engineer: Code2,\n reviewer: ShieldCheck,\n}\n\n/**\n * AiAgentOrchestrator -- the React block, 1:1: a multi-agent pipeline dashboard with a run\n * header (status, live timer, pause / cancel), a four-node execution graph, and a detail\n * panel for the selected node (progress, telemetry, thought stream, tool invocations, the\n * generated artifact) plus pipeline controls (step forward, retry, re-run, pause).\n *\n * Icon notes (lucide-angular wraps each in a host, so the Badge's\n * `[&>svg]:size-3` and the Button's `has-[>svg]:px-*` never see it): icons inside badges are\n * written at the size-3 React renders them at, and icon buttons carry the `px-*` React's\n * `has-[>svg]` resolves to. Icons with a margin use `[class]` so the margin lands on the svg only.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-ai-agent-orchestrator, [ui-ai-agent-orchestrator]',\n standalone: true,\n host: {\n '[attr.data-slot]': '\"ai-agent-orchestrator\"',\n '[class]': 'hostClass',\n },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiProgressComponent,\n ],\n template: `\n \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 \n @if (!isPaused() && activeStepIndex() < 4) {\n \n \n \n \n \n Running • Step {{ stepLabel() }} of 4\n \n } @else if (isPaused()) {\n \n \n Paused • Step {{ stepLabel() }} of 4\n \n } @else {\n \n \n Completed • 4 of 4 Steps\n \n }\n\n \n \n \n {{ formattedTime() }}\n
\n\n \n \n\n \n \n Cancel\n \n
\n \n \n\n \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 \n \n
\n
\n
\n
\n \n
\n
\n

Planner Agent

\n

Stage 01

\n
\n
\n\n @if (statusOf('planner') === 'completed') {\n \n \n 12s\n \n } @else if (statusOf('planner') === 'running') {\n \n Running\n \n } @else {\n Queued\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 \n \n
\n
\n
\n
\n \n
\n
\n

Research Agent

\n

Stage 02

\n
\n
\n\n @if (statusOf('researcher') === 'completed') {\n \n \n 45s\n \n } @else if (statusOf('researcher') === 'running') {\n \n Running\n \n } @else {\n Queued\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 \n \n
\n
\n
\n
\n \n
\n
\n

Code Engineer

\n

Stage 03

\n
\n
\n\n @if (statusOf('engineer') === 'completed') {\n \n \n 1m 17s\n \n } @else if (statusOf('engineer') === 'running') {\n \n \n \n \n \n Streaming\n \n } @else {\n Queued\n }\n
\n\n
\n

\n Generate component architecture & unit tests\n

\n
\n
\n\n
\n Claude 3.5\n {{ progressOf('engineer') }}% active\n
\n \n\n \n \n
\n
\n
\n
\n \n
\n
\n

Reviewer & QA

\n

Stage 04

\n
\n
\n\n @if (statusOf('reviewer') === 'completed') {\n \n \n Passed\n \n } @else if (statusOf('reviewer') === 'running') {\n \n Running\n \n } @else {\n Queued\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 \n
\n \n
\n \n
\n
\n
\n
\n \n \n
\n
\n
\n

{{ selectedAgent().name }}

\n {{ selectedAgent().model }}\n
\n

{{ selectedAgent().task }}

\n
\n
\n\n
\n @if (selectedAgent().status === 'completed') {\n Completed in {{ selectedAgent().duration }}\n } @else if (selectedAgent().status === 'running') {\n \n \n Streaming • {{ selectedAgent().duration }}\n \n } @else {\n Queued\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 \n
\n
\n
\n \n

Agent Thought Stream & Reasoning

\n
\n \n Toggle Details\n \n
\n\n
\n @for (thought of selectedAgent().thoughts; track thought.id) {\n
\n \n
\n
\n @if (thought.status === 'completed') {\n \n } @else if (thought.status === 'running') {\n \n } @else {\n
\n }\n
\n

{{ thought.title }}

\n
\n\n
\n {{ thought.duration }}\n \n
\n \n\n @if (isExpanded(thought.id)) {\n \n {{ thought.detail }}\n
\n }\n
\n }\n
\n
\n\n \n
\n
\n
\n \n

Active Tool Invocations

\n
\n
\n\n
\n \n
\n @for (tool of selectedAgent().tools; track tool.name) {\n \n \n \n {{ tool.name }}\n \n {{ tool.count }}\n \n \n }\n
\n\n \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 \n
\n \n
\n
\n
\n \n

\n {{ selectedAgent().artifactFileName }}\n

\n
\n
\n {{ selectedAgent().artifactSize }}\n \n
\n
\n\n
\n
\n \n
\n
\n
\n
\n
\n
\n Live Generated Output\n
\n\n \n
\n {{ selectedAgent().artifactCode }}\n @if (selectedAgent().status === 'running') {\n \n }\n
\n
\n
\n
\n\n \n
\n
\n
\n \n

Pipeline Orchestrator Controls

\n
\n
\n\n
\n
\n = 4\"\n (click)=\"stepForward()\"\n >\n \n Step Forward\n \n\n \n \n Retry Step\n \n\n \n \n Re-run Pipeline\n \n\n \n \n {{ isPaused() ? 'Resume' : 'Pause' }}\n \n
\n\n

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

\n
\n
\n
\n \n `,\n})\nexport class UiAiAgentOrchestratorComponent {\n @Input('class') className?: string\n\n readonly isPaused = signal(false)\n readonly elapsedSeconds = signal(134)\n readonly selectedAgentId = signal('engineer')\n readonly activeStepIndex = signal(2)\n readonly copied = signal(false)\n readonly nodes = signal(initialNodes)\n readonly expandedThoughts = signal>({\n t1: false,\n t2: false,\n t3: false,\n t4: true,\n })\n\n readonly selectedAgent = computed(() => {\n const nodes = this.nodes()\n return nodes.find((n) => n.id === this.selectedAgentId()) ?? nodes[2]!\n })\n\n readonly formattedTime = computed(() => {\n const elapsed = this.elapsedSeconds()\n const mins = Math.floor(elapsed / 60)\n const secs = elapsed % 60\n return `${mins.toString().padStart(2, '0')}m:${secs.toString().padStart(2, '0')}s`\n })\n\n readonly overallProgress = computed(() => {\n const nodes = this.nodes()\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 })\n\n readonly stepLabel = computed(() => Math.min(this.activeStepIndex() + 1, 4))\n readonly agentIcon = computed(() => AGENT_ICONS[this.selectedAgent().id])\n\n protected readonly Activity = Activity\n protected readonly Bot = Bot\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly ChevronDown = ChevronDown\n protected readonly ChevronRight = ChevronRight\n protected readonly Clock = Clock\n protected readonly Code2 = Code2\n protected readonly Compass = Compass\n protected readonly Copy = Copy\n protected readonly FastForward = FastForward\n protected readonly FileCode2 = FileCode2\n protected readonly Layers = Layers\n protected readonly Pause = Pause\n protected readonly Play = Play\n protected readonly RefreshCw = RefreshCw\n protected readonly RotateCcw = RotateCcw\n protected readonly Search = Search\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Sparkles = Sparkles\n protected readonly Terminal = Terminal\n protected readonly X = X\n\n private timer: ReturnType | undefined\n private copyTimer: ReturnType | undefined\n\n constructor() {\n // Browser only, after the first render (React's useEffect).\n afterNextRender(() => {\n this.timer = setInterval(() => {\n if (!this.isPaused() && this.activeStepIndex() < 4) {\n this.elapsedSeconds.update((prev) => prev + 1)\n }\n }, 1000)\n })\n inject(DestroyRef).onDestroy(() => {\n clearInterval(this.timer)\n clearTimeout(this.copyTimer)\n })\n }\n\n get hostClass(): string {\n return cn('block w-full space-y-6', this.className)\n }\n\n protected statusOf(id: AgentId): NodeStatus {\n return this.nodes().find((n) => n.id === id)?.status ?? 'queued'\n }\n\n protected progressOf(id: AgentId): number {\n return this.nodes().find((n) => n.id === id)?.progress ?? 0\n }\n\n protected nodeClass(id: AgentId): string {\n const style = NODE_STYLES[id]\n const status = this.statusOf(id)\n return cn(\n NODE_BASE,\n this.selectedAgentId() === id ? style.selected : style.idle,\n status === 'completed' ? 'bg-card' : status === 'running' ? style.running : style.queued,\n )\n }\n\n protected nodeIconClass(id: AgentId): string {\n const style = NODE_STYLES[id]\n const status = this.statusOf(id)\n return cn(\n 'flex size-9 items-center justify-center rounded-lg border text-xs',\n status === 'completed'\n ? 'border-success/30 bg-success/10 text-success'\n : status === 'running'\n ? style.iconRunning\n : style.iconQueued,\n )\n }\n\n protected thoughtIconClass(status: ThoughtStep['status']): string {\n return cn(\n 'flex size-5 shrink-0 items-center justify-center rounded-full',\n status === 'completed'\n ? 'text-success'\n : status === 'running'\n ? 'text-primary animate-spin'\n : 'text-muted-foreground',\n )\n }\n\n protected toolIcon(icon: string): LucideIconData {\n switch (icon) {\n case 'Globe':\n return Globe\n case 'FileText':\n return FileText\n case 'Terminal':\n return Terminal\n default:\n return ShieldCheck\n }\n }\n\n protected isExpanded(id: string): boolean {\n return this.expandedThoughts()[id] === true\n }\n\n /** React's `aria-expanded={expandedThoughts[id]}`: omitted for a thought that was never toggled. */\n protected expandedAttr(id: string): boolean | null {\n return this.expandedThoughts()[id] ?? null\n }\n\n togglePause(): void {\n this.isPaused.update((prev) => !prev)\n }\n\n selectAgent(id: AgentId): void {\n this.selectedAgentId.set(id)\n }\n\n toggleThought(id: string): void {\n this.expandedThoughts.update((prev) => ({ ...prev, [id]: !prev[id] }))\n }\n\n toggleAllThoughts(): void {\n const expanded = this.expandedThoughts()\n const thoughts = this.selectedAgent().thoughts\n const anyClosed = thoughts.some((t) => !expanded[t.id])\n const next: Record = { ...expanded }\n thoughts.forEach((t) => {\n next[t.id] = anyClosed\n })\n this.expandedThoughts.set(next)\n }\n\n stepForward(): void {\n const active = this.activeStepIndex()\n const nodes = this.nodes()\n if (active < nodes.length - 1) {\n const nextIdx = active + 1\n this.nodes.update((prev) =>\n prev.map((node, idx) =>\n idx === active\n ? { ...node, status: 'completed', progress: 100 }\n : idx === nextIdx\n ? { ...node, status: 'running', progress: 45 }\n : node,\n ),\n )\n this.activeStepIndex.set(nextIdx)\n this.selectedAgentId.set(nodes[nextIdx]!.id)\n } else if (active === nodes.length - 1) {\n this.nodes.update((prev) =>\n prev.map((node, idx) => (idx === active ? { ...node, status: 'completed', progress: 100 } : node)),\n )\n this.activeStepIndex.set(4)\n }\n }\n\n retryStep(): void {\n const active = this.activeStepIndex()\n const nodes = this.nodes()\n if (active < nodes.length) {\n this.nodes.update((prev) =>\n prev.map((node, idx) => (idx === active ? { ...node, status: 'running', progress: 10 } : node)),\n )\n this.selectedAgentId.set(nodes[active]!.id)\n }\n }\n\n rerunPipeline(): void {\n this.elapsedSeconds.set(0)\n this.isPaused.set(false)\n this.activeStepIndex.set(0)\n this.nodes.update((prev) =>\n prev.map((node, idx) => ({\n ...node,\n status: idx === 0 ? 'running' : 'queued',\n progress: idx === 0 ? 25 : 0,\n })),\n )\n this.selectedAgentId.set('planner')\n }\n\n cancelWorkflow(): void {\n this.isPaused.set(true)\n }\n\n async copyArtifact(): Promise {\n try {\n await navigator.clipboard.writeText(this.selectedAgent().artifactCode)\n this.copied.set(true)\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => {\n this.copied.set(false)\n }, 2000)\n } catch {\n // Clipboard fallback\n }\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/ai-agent-orchestrator/ai-agent-orchestrator.component.ts" }, { "path": "packages/registry-angular/blocks/ai-agent-orchestrator/index.ts", "content": "export { UiAiAgentOrchestratorComponent } from './ai-agent-orchestrator.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/ai-agent-orchestrator/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/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" ] }