inspector: render tool calls and results with AI Elements

[Mark-Life]

Problem:

Every transcript event in the session history rendered as the same generic disclosure row, so a tool call, its result, and an attachment were indistinguishable until expanded. A result row was labelled tool-result and nothing more: the transcript records only tool_use_id on the result block, never the tool's name, so e.toolName ?? e.kind had nothing to fall back on. Nothing surfaced whether a call failed, or whether it ever returned at all.

Expanding a call showed one of its arguments — displayBody unwrapped code or command and dropped the rest.

Solution:

Vendor AI Elements' Tool into @workspace/ui/components/ai-elements/, beside the code-block already installed there, and use it for tool-call and tool-result. Upstream is built on the AI SDK's streaming message-parts model, which we have none of, so this copy takes code + language for the shared highlighter instead of an unknown payload, and replaces ToolUIPart["state"] with a ToolState a finished transcript can justify: completed, error, or unanswered for a call whose result the transcript never recorded. ToolHeader gains icon, lead and children slots so the row keeps its turn number, sidechain badge, summary and token estimate.

Calls and results are paired by toolUseId, so a result names the tool it came from and a call shows the outcome its result recorded. Unwrapping a payload arg now puts the remaining arguments in their own pane rather than hiding them, and the collapsed summary is the command itself instead of the JSON envelope.

One row per event either way. Pairing a call with its result into a single card would reorder the transcript and merge two token figures, which a forensics view cannot afford. Search, the type filter, expand-all, the position-keyed collapse state, the dumb-zone divider and the subagent cards are untouched. assistant-thinking stays a plain row — the AI Elements reasoning block pulls in streamdown, mermaid and math to render content our transcripts do not store.

---

Security Impact:

The tool rows render TimelineEvent.body and preview, which redactSession has already rewritten server-side. No new field is read, so the reveal toggle remains the only path to raw bytes; a test pins that.

---

Testing:

bun test (full workspace), bun run typecheck, bunx ultracite check, bun run --filter=inspector build:

 218 pass
 0 fail
 629 expect() calls
Ran 218 tests across 31 files.

apps/inspector/test/tool-event.test.ts drives the new shaping through the real parser and the shared Claude fixture: name-borrowing across the pair, all three outcomes, payload unwrapping, and that nothing rendered from a redacted session contains the fixture's sk-ant- key while the raw session still does.

Two caveats on what was not run. bun test needs CLAUDE_CONFIG_DIR unset in this container or two unrelated AgentRegistry tests fail. peektrace#build:binary fails on a missing msgpackr-extract native module — verified identical on a stashed clean tree, so it predates this branch.

The component is not rendered under test: @workspace/ui resolves React 19.2.8 while inspector resolves 19.2.7, so hooks throw outside Vite, which dedupes via @vitejs/plugin-react. The shaping logic lives in lib/tool-event.ts for that reason; typecheck and the Vite build cover the JSX. No screenshot — no browser can launch in this container.

🤖 Generated with Claude Code