{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tool-call-header",
  "title": "ToolCallHeader",
  "description": "Names a tool call and shows its state and attempt.",
  "registryDependencies": [
    "https://creance.pages.dev/r/badge.json",
    "https://creance.pages.dev/r/code.json",
    "https://creance.pages.dev/r/creance-base.json",
    "https://creance.pages.dev/r/status-badge.json"
  ],
  "files": [
    {
      "path": "tool-call-header/ToolCallHeader.css",
      "content": ".cr-tool-header {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--cr-space-2);\n}\n\n.cr-tool-header__name {\n  margin: 0;\n  margin-inline-end: auto;\n  font-size: var(--cr-font-size-md);\n  font-weight: var(--cr-font-weight-semibold);\n}\n\n.cr-tool-header__attempt {\n  color: var(--cr-color-text-muted);\n  font-size: var(--cr-font-size-xs);\n}\n",
      "type": "registry:file",
      "target": "@components/creance/tool-call-header/ToolCallHeader.css"
    },
    {
      "path": "tool-call-header/ToolCallHeader.tsx",
      "content": "import { createElement } from 'react';\nimport type { Status } from '@/components/creance/badge/Badge';\nimport { Code } from '@/components/creance/code/Code';\nimport { StatusBadge } from '@/components/creance/status-badge/StatusBadge';\nimport { cx } from '@/lib/creance/cx';\nimport './ToolCallHeader.css';\n\nexport type ToolCallStatus = 'pending' | 'running' | 'success' | 'error';\n\nconst toBadge: Record<ToolCallStatus, { status: Status; label: string }> = {\n  pending: { status: 'waiting', label: 'Pending' },\n  running: { status: 'running', label: 'Running' },\n  success: { status: 'done', label: 'Succeeded' },\n  error: { status: 'failed', label: 'Failed' },\n};\n\nexport interface ToolCallHeaderProps {\n  tool: string;\n  status: ToolCallStatus;\n  startedAt?: number | undefined;\n  endedAt?: number | undefined;\n  /** Shown when greater than 1. */\n  attempt?: number;\n  /** Heading level of the tool name, to fit the page outline. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n  className?: string;\n}\n\nexport function ToolCallHeader({\n  tool,\n  status,\n  startedAt,\n  endedAt,\n  attempt = 1,\n  headingLevel = 3,\n  className,\n}: ToolCallHeaderProps) {\n  const badge = toBadge[status];\n  return (\n    <div className={cx('cr-tool-header', className)}>\n      {createElement(\n        `h${headingLevel}`,\n        { className: 'cr-tool-header__name' },\n        <span className=\"cr-visually-hidden\">Tool call:</span>,\n        ' ',\n        <Code>{tool}</Code>,\n      )}\n      {attempt > 1 && <span className=\"cr-tool-header__attempt\">Attempt {attempt}</span>}\n      <StatusBadge\n        status={badge.status}\n        label={badge.label}\n        startedAt={status === 'pending' ? undefined : startedAt}\n        endedAt={endedAt}\n      />\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/creance/tool-call-header/ToolCallHeader.tsx"
    }
  ],
  "categories": [
    "molecule",
    "agent"
  ],
  "type": "registry:ui"
}