{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-subagent-list",
  "type": "registry:component",
  "title": "Subagent list",
  "description": "Parallel workers with their own progress, models, and completions.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-surfaces.json",
    "https://r.assistant-ui.com/elements-range.json"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/subagent-list.tsx",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/subagent-list.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { CheckIcon, Loader2Icon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { mono, paper } from \"./surfaces\";\nimport { pct } from \"../utils/range\";\n\nexport interface SubagentItem {\n  name: string;\n  model: string;\n}\n\nexport function SubagentList({\n  agents,\n  completedCount,\n  progress,\n  showSummary,\n  summaryAgent,\n  className,\n  ...props\n}: Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"agents\"\n  | \"completedCount\"\n  | \"progress\"\n  | \"showSummary\"\n  | \"summaryAgent\"\n> & {\n  agents: readonly SubagentItem[];\n  completedCount: number;\n  progress: readonly number[];\n  showSummary: boolean;\n  summaryAgent: SubagentItem;\n}) {\n  return (\n    <div\n      data-slot=\"subagent-list\"\n      className={cn(\n        \"flex min-h-[14.5rem] w-full max-w-xs flex-col gap-2\",\n        className,\n      )}\n\n      {...props}\n    >\n      {agents.map((agent, index) => {\n        const done = index < completedCount;\n        const width = progress[index] ?? 0;\n        const percentage = pct(width, 100);\n\n        return (\n          <div\n            key={agent.name}\n            className={cn(\n              paper,\n              \"flex flex-col gap-2 rounded-2xl px-3.5 py-2.5\",\n            )}\n          >\n            <div className=\"flex items-center gap-2\">\n              {done ? (\n                <CheckIcon className=\"fade-in zoom-in-90 animate-in size-3.5 shrink-0 text-emerald-500 duration-200\" />\n              ) : (\n                <Loader2Icon className=\"text-foreground/35 size-3.5 shrink-0 animate-spin motion-reduce:animate-none\" />\n              )}\n              <span className=\"flex-1 truncate text-[13.5px]\">\n                {agent.name}\n              </span>\n              <span className={cn(mono, \"text-foreground/35\")}>\n                {agent.model}\n              </span>\n            </div>\n            <span\n              role=\"progressbar\"\n              aria-label={`${agent.name} progress`}\n              aria-valuemin={0}\n              aria-valuemax={100}\n              aria-valuenow={percentage}\n              className=\"bg-foreground/[0.06] h-[3px] w-full overflow-hidden rounded-full\"\n            >\n              <span\n                className={cn(\n                  \"block h-full rounded-full transition-[width] duration-700\",\n                  done ? \"bg-emerald-500/70\" : \"bg-foreground/60\",\n                )}\n                style={{ width: `${percentage}%` }}\n              />\n            </span>\n          </div>\n        );\n      })}\n      {showSummary && (\n        <div\n          className={cn(\n            paper,\n            \"fade-in slide-in-from-bottom-2 animate-in flex flex-col gap-2 rounded-2xl px-3.5 py-2.5 duration-300\",\n          )}\n        >\n          <div className=\"flex items-center gap-2\">\n            <Loader2Icon className=\"text-foreground/35 size-3.5 shrink-0 animate-spin motion-reduce:animate-none\" />\n            <span className=\"flex-1 truncate text-[13.5px]\">\n              {summaryAgent.name}\n            </span>\n            <span className={cn(mono, \"text-foreground/35\")}>\n              {summaryAgent.model}\n            </span>\n          </div>\n          <span\n            role=\"progressbar\"\n            aria-label={`${summaryAgent.name} progress`}\n            aria-valuemin={0}\n            aria-valuemax={100}\n            className=\"bg-foreground/[0.06] h-[3px] w-full overflow-hidden rounded-full\"\n          >\n            <span className=\"shimmer shimmer-bg block h-full w-full rounded-full motion-reduce:animate-none\" />\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n"
    }
  ]
}