{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "task-card",
  "title": "Task Card",
  "description": "One delegated task with state, timing, assigned agent, and returned result.",
  "dependencies": [
    "@solar-icons/react@^2.2.0",
    "cn@^0.3.0"
  ],
  "registryDependencies": [
    "button",
    "https://pastaui.com/r/pastaui-styles.json"
  ],
  "files": [
    {
      "path": "src/components/ai/task-card.tsx",
      "content": "import { ArrowRightUpIcon as ArrowUpRightIcon } from '@solar-icons/react/linear/arrow-right-up'\nimport { CheckCircleIcon as CheckCircle2Icon } from '@solar-icons/react/linear/check-circle'\nimport { ClockCircleIcon as Clock3Icon } from '@solar-icons/react/linear/clock-circle'\nimport { LoaderIcon as LoaderCircleIcon } from '@solar-icons/react/linear/loader'\nimport * as React from 'react'\n\nimport { Button } from '@/components/ui/button'\nimport { cn } from 'cn'\n\ninterface TaskCardProps extends React.ComponentProps<'article'> {\n  agent?: string\n  description?: string\n  duration?: string\n  onOpen?: () => void\n  result?: string\n  status: 'complete' | 'queued' | 'running'\n  title: string\n}\n\nfunction TaskIcon({ status }: Pick<TaskCardProps, 'status'>) {\n  if (status === 'complete')\n    return (\n      <CheckCircle2Icon\n        aria-label=\"Complete\"\n        className=\"size-4 transition-[opacity,scale] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] starting:scale-90 starting:opacity-0 motion-reduce:starting:scale-100\"\n      />\n    )\n  if (status === 'running')\n    return (\n      <LoaderCircleIcon\n        aria-label=\"Running\"\n        className=\"size-4 animate-spin motion-reduce:animate-none\"\n      />\n    )\n  return <Clock3Icon aria-label=\"Queued\" className=\"size-4 text-muted-foreground\" />\n}\n\nfunction TaskCard({\n  agent,\n  className,\n  description,\n  duration,\n  onOpen,\n  result,\n  status,\n  title,\n  ...props\n}: TaskCardProps) {\n  return (\n    <article\n      data-slot=\"task-card\"\n      className={cn(\n        'overflow-hidden rounded-[16px] bg-card font-sans text-sm font-[450] tracking-[-0.05px] text-muted-foreground shadow-card',\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"p-4\">\n        <header className=\"flex items-start gap-3\">\n          <span className=\"mt-0.5 flex size-5 items-center justify-center\">\n            <TaskIcon status={status} />\n          </span>\n          <div className=\"min-w-0 flex-1\">\n            <h3 className=\"card-heading\">{title}</h3>\n            {description && (\n              <p className=\"mt-1 text-xs leading-5 text-muted-foreground\">{description}</p>\n            )}\n          </div>\n          <span className=\"text-[10px] text-muted-foreground capitalize\">{status}</span>\n        </header>\n        {result && (\n          <div className=\"mt-4 rounded-[10px] bg-muted/45 p-3 text-xs leading-5 transition-opacity duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] starting:opacity-0\">\n            {result}\n          </div>\n        )}\n      </div>\n      <footer className=\"flex items-center gap-2 bg-muted/30 px-4 py-3\">\n        {agent && <span className=\"text-xs leading-5 text-muted-foreground\">{agent}</span>}\n        {duration && <span className=\"text-xs leading-5 text-muted-foreground\">· {duration}</span>}\n        <Button className=\"ml-auto\" onClick={onOpen} size=\"sm\" type=\"button\" variant=\"ghost\">\n          Open task{' '}\n          <ArrowUpRightIcon\n            data-icon=\"inline-end\"\n            className=\"transition-[translate] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover/button:translate-x-px group-hover/button:-translate-y-px motion-reduce:transition-none\"\n          />\n        </Button>\n      </footer>\n    </article>\n  )\n}\n\nexport { TaskCard }\nexport type { TaskCardProps }\n",
      "type": "registry:component",
      "target": "@components/ai/task-card.tsx"
    }
  ],
  "type": "registry:component"
}