{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "claude-tool-call",
  "title": "Claude Tool Call",
  "description": "The ⏺ / ⎿ tool line as a real, keyboard-operable <details> disclosure.",
  "files": [
    {
      "path": "registry/brainless/claude/claude-tool-call.tsx",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * ClaudeToolCall — Claude Code's collapsed tool/result line.\n *\n * In the terminal this is faked with box-drawing glyphs and a \"ctrl+o to\n * expand\" hint. Here it's a real <details> disclosure: keyboard-operable,\n * announced to screen readers, and it keeps the exact ⏺ / ⎿ visual grammar.\n */\ntype Status = \"success\" | \"error\" | \"pending\";\n\nconst STATUS_COLOR: Record<Status, string> = {\n  success: \"#4ea96f\",\n  error: \"#f7768e\",\n  pending: \"#e0af68\",\n};\n\nexport function ClaudeToolCall({\n  tool,\n  arg,\n  result,\n  status = \"success\",\n  defaultOpen = false,\n  className,\n  children,\n}: {\n  tool: string;\n  arg?: string;\n  result: string;\n  status?: Status;\n  defaultOpen?: boolean;\n  className?: string;\n  children?: React.ReactNode;\n}) {\n  const expandable = Boolean(children);\n\n  return (\n    <details\n      open={defaultOpen}\n      className={cn(\n        \"group font-mono text-[13px] leading-[1.55] [&_summary::-webkit-details-marker]:hidden\",\n        className,\n      )}\n    >\n      <summary\n        className={cn(\n          \"list-none\",\n          expandable ? \"cursor-pointer\" : \"cursor-default\",\n          \"rounded-none outline-none focus-visible:ring-1 focus-visible:ring-[#7dcfff]/60\",\n        )}\n      >\n        <span className=\"flex min-w-0 items-baseline gap-2\">\n          <span aria-hidden className=\"shrink-0\" style={{ color: STATUS_COLOR[status] }}>\n            ⏺\n          </span>\n          <span className=\"min-w-0 break-words\">\n            <span className=\"text-[#c0caf5]\">{tool}</span>\n            {arg !== undefined ? (\n              <>\n                <span className=\"text-[#565f89]\">(</span>\n                <span className=\"text-[#7dcfff]\">{arg}</span>\n                <span className=\"text-[#565f89]\">)</span>\n              </>\n            ) : null}\n          </span>\n        </span>\n        <span className=\"flex min-w-0 items-baseline gap-2 text-[#8b8fa3]\">\n          {/* invisible status glyph spacer: aligns ⎿ under the tool name */}\n          <span aria-hidden className=\"invisible shrink-0\">\n            ⏺\n          </span>\n          <span className=\"flex min-w-0 items-baseline gap-2\">\n            <span aria-hidden className=\"shrink-0 text-[#565f89]\">\n              ⎿\n            </span>\n            <span className=\"min-w-0 break-words\">\n              {result}\n              {expandable ? (\n                <span className=\"ml-2 text-[#565f89] group-open:hidden\">\n                  (ctrl+o to expand)\n                </span>\n              ) : null}\n            </span>\n          </span>\n        </span>\n      </summary>\n\n      {expandable ? (\n        <div className=\"mt-1 whitespace-pre-wrap pl-[32px] text-[#8b8fa3]\">\n          {children}\n        </div>\n      ) : null}\n    </details>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/brainless/claude/claude-tool-call.tsx"
    }
  ],
  "type": "registry:ui"
}