Tool Call

Tool calls with a status bullet and result, plus the collapsed "Ran 3 shell commands" line.

import { ClaudeCodeTerminal } from "../components/claude-code-terminal";
import {
  ClaudeCodeToolCall,
  ClaudeCodeToolSummary,
} from "../components/claude-code-tool-call";

const CHANGELOG_EXCERPT = `## v1.9.0
- GEO scan view with per-engine citations
- Schedule posts from the API`;

export default function ClaudeCodeToolCallExample() {
  return (
    <ClaudeCodeTerminal title="claude — tools">
      <ClaudeCodeToolCall
        arg="git log --oneline v1.8.0..HEAD"
        result="14 commits"
        tool="Bash"
      />
      <ClaudeCodeToolCall
        arg="CHANGELOG.md"
        result="Read 212 lines"
        tool="Read"
      >
        {CHANGELOG_EXCERPT}
      </ClaudeCodeToolCall>
      <ClaudeCodeToolCall
        result="$ notra posts create --type changelog --from-prs v1.8.0..HEAD"
        status="pending"
        tool="Drafting the changelog in notra"
      />
      <ClaudeCodeToolCall
        arg="publish_post"
        result="Error: post is still in review"
        status="error"
        tool="notra"
      />
      <ClaudeCodeToolSummary count={3} defaultOpen>
        <ClaudeCodeToolCall
          arg="git status --short"
          result="2 files changed"
          tool="Bash"
        />
        <ClaudeCodeToolCall
          arg="bun run check-types"
          result="0 errors"
          tool="Bash"
        />
        <ClaudeCodeToolCall
          arg="gh pr view --json number"
          result='{"number": 1317}'
          tool="Bash"
        />
      </ClaudeCodeToolSummary>
    </ClaudeCodeTerminal>
  );
}

$ bunx --bun shadcn@latest add @notra/claude-code-tool-call

ClaudeCodeToolCall prints ● Tool(arg) with the tool name in bold and the result on a dim ⎿ line under it. Without arg the line is plain text, which fits the running descriptions Claude Code shows, like Checking branch commits and PR status over $ git log …. The bullet is green for success, red for error and a pulsing gray for pending.

The root is a shadcn Collapsible. With children, the result line becomes the trigger and gets a (click to expand) hint. The children show underneath with their whitespace kept.

Prop	Default	Description
`tool`		Tool name, like `Bash`, `Read` or `notra - list_events (MCP)`.
`arg`		Shown in parentheses: a command, a path or `key: "value"` pairs.
`result`		The `⎿` line.
`status`	`success`	`success`, `pending` or `error`.
`children`		Extra output shown when expanded.

ClaudeCodeToolSummary is the dim line Claude Code folds finished shell calls into, like Ran 3 shell commands. It pluralizes noun from count. Pass the calls as children and clicking the line shows them. verb defaults to Ran and noun to shell command.

Used in

Claude Code

A Claude Code terminal session with the compact header, tool calls, a running turn and the prompt.