{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "agent-handoff-banner",
  "title": "AgentHandoffBanner",
  "description": "The point where the agent hands control back: outcome, summary, next actions.",
  "registryDependencies": [
    "https://creance.pages.dev/r/avatar.json",
    "https://creance.pages.dev/r/button.json",
    "https://creance.pages.dev/r/creance-base.json"
  ],
  "files": [
    {
      "path": "agent-handoff-banner/AgentHandoffBanner.css",
      "content": ".cr-handoff {\n  display: flex;\n  gap: var(--cr-space-4);\n  padding: var(--cr-space-5);\n  border-radius: var(--cr-radius-xl);\n  color: var(--cr-color-text-default);\n  font-family: var(--cr-font-family-sans);\n  font-size: var(--cr-font-size-md);\n}\n\n/* Only failure gets a colour; the outcome is also in the title. */\n.cr-handoff[data-outcome='failed'] { box-shadow: var(--cr-shadow-card), inset 3px 0 0 var(--cr-color-danger-text); }\n\n.cr-handoff__body {\n  display: grid;\n  flex: 1;\n  gap: var(--cr-space-2);\n  min-width: 0;\n}\n\n.cr-handoff__title {\n  margin: 0;\n  font-family: var(--cr-font-family-display);\n  font-size: var(--cr-font-size-2xl);\n  font-weight: var(--cr-font-weight-bold);\n  letter-spacing: var(--cr-font-tracking-title);\n  line-height: 1.2;\n}\n\n.cr-handoff__title:focus-visible {\n  outline: var(--cr-focus-width) solid var(--cr-color-focus);\n  outline-offset: var(--cr-focus-offset);\n}\n\n.cr-handoff__summary {\n  margin: 0;\n  color: var(--cr-color-text-default);\n  line-height: var(--cr-font-line-height-normal);\n}\n\n.cr-handoff__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--cr-space-2);\n  margin-top: var(--cr-space-2);\n}\n",
      "type": "registry:file",
      "target": "@components/creance/agent-handoff-banner/AgentHandoffBanner.css"
    },
    {
      "path": "agent-handoff-banner/AgentHandoffBanner.tsx",
      "content": "'use client';\n\nimport { useEffect, useId, useRef } from 'react';\nimport { Avatar } from '@/components/creance/avatar/Avatar';\nimport { Button } from '@/components/creance/button/Button';\nimport { cx } from '@/lib/creance/cx';\nimport { LiveRegion } from '@/lib/creance/LiveRegion';\nimport './AgentHandoffBanner.css';\n\nexport interface HandoffAction {\n  id: string;\n  label: string;\n  primary?: boolean;\n}\n\nexport interface AgentHandoffBannerProps {\n  agentName: string;\n  /** What the agent did and what state it left things in. */\n  summary: string;\n  actions?: HandoffAction[];\n  onAction?: (id: string) => void;\n  /** \"completed\" finished the goal; \"stopped\" ended early (for example after a denial). */\n  outcome?: 'completed' | 'stopped' | 'failed';\n  /** Move focus to the banner heading when it appears, so keyboard users land on the next actions. Default true. */\n  focusOnMount?: boolean;\n  headingLevel?: 2 | 3;\n  className?: string;\n}\n\nconst headline = {\n  completed: 'finished and handed back to you',\n  stopped: 'stopped and handed back to you',\n  failed: 'failed and handed back to you',\n};\n\nexport function AgentHandoffBanner({\n  agentName,\n  summary,\n  actions = [],\n  onAction,\n  outcome = 'completed',\n  focusOnMount = true,\n  headingLevel = 2,\n  className,\n}: AgentHandoffBannerProps) {\n  const headingId = useId();\n  const headingRef = useRef<HTMLHeadingElement>(null);\n  const Heading = `h${headingLevel}` as const;\n\n  useEffect(() => {\n    if (focusOnMount) headingRef.current?.focus();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <section className={cx('cr-handoff cr-surface', className)} aria-labelledby={headingId} data-outcome={outcome}>\n      <Avatar name={agentName} decorative />\n      <div className=\"cr-handoff__body\">\n        <Heading id={headingId} ref={headingRef} tabIndex={-1} className=\"cr-handoff__title\">\n          {agentName} {headline[outcome]}\n        </Heading>\n        <p className=\"cr-handoff__summary\">{summary}</p>\n        {actions.length > 0 && (\n          <div className=\"cr-handoff__actions\">\n            {actions.map((a) => (\n              <Button key={a.id} variant={a.primary ? 'primary' : 'secondary'} onClick={() => onAction?.(a.id)}>\n                {a.label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <LiveRegion message={`${agentName} ${headline[outcome]}. ${summary}`} />\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/creance/agent-handoff-banner/AgentHandoffBanner.tsx"
    }
  ],
  "categories": [
    "organism",
    "agent"
  ],
  "type": "registry:ui"
}