Claude Tool Call

1import * as React from "react";
2import { cn } from "@/lib/utils";
3 
4/**
5 * ClaudeToolCall — Claude Code's collapsed tool/result line.
6 *
7 * In the terminal this is faked with box-drawing glyphs and a "ctrl+o to
8 * expand" hint. Here it's a real <details> disclosure: keyboard-operable,
9 * announced to screen readers, and it keeps the exact ⏺ / ⎿ visual grammar.
10 */
11type Status = "success" | "error" | "pending";
12 
13const STATUS_COLOR: Record<Status, string> = {
14  success: "#4ea96f",
15  error: "#f7768e",
16  pending: "#e0af68",
17};
18 
19export function ClaudeToolCall({
20  tool,
21  arg,
22  result,
23  status = "success",
24  defaultOpen = false,
25  className,
26  children,
27}: {
28  tool: string;
29  arg?: string;
30  result: string;
31  status?: Status;
32  defaultOpen?: boolean;
33  className?: string;
34  children?: React.ReactNode;
35}) {
36  const expandable = Boolean(children);
37 
38  return (
39    <details
40      open={defaultOpen}
41      className={cn(
42        "group font-mono text-[13px] leading-[1.55] [&_summary::-webkit-details-marker]:hidden",
43        className,
44      )}
45    >
46      <summary
47        className={cn(
48          "list-none",
49          expandable ? "cursor-pointer" : "cursor-default",
50          "rounded-none outline-none focus-visible:ring-1 focus-visible:ring-[#7dcfff]/60",
51        )}
52      >
53        <span className="flex min-w-0 items-baseline gap-2">
54          <span aria-hidden className="shrink-0" style={{ color: STATUS_COLOR[status] }}>
55            ⏺
56          </span>
57          <span className="min-w-0 break-words">
58            <span className="text-[#c0caf5]">{tool}</span>
59            {arg !== undefined ? (
60              <>
61                <span className="text-[#565f89]">(</span>
62                <span className="text-[#7dcfff]">{arg}</span>
63                <span className="text-[#565f89]">)</span>
64              </>
65            ) : null}
66          </span>
67        </span>
68        <span className="flex min-w-0 items-baseline gap-2 text-[#8b8fa3]">
69          {/* invisible status glyph spacer: aligns ⎿ under the tool name */}
70          <span aria-hidden className="invisible shrink-0">
71            ⏺
72          </span>
73          <span className="flex min-w-0 items-baseline gap-2">
74            <span aria-hidden className="shrink-0 text-[#565f89]">
75              ⎿
76            </span>
77            <span className="min-w-0 break-words">
78              {result}
79              {expandable ? (
80                <span className="ml-2 text-[#565f89] group-open:hidden">
81// … truncated