ToolCalls

Proposed

An agent run as compact rows: each tool call with its argument in a chip, then diff chips for the files it changed. Hover a chip for the diff; every row expands to what the tool actually did.

@varick/ui/components/tool-callsAdded 2 Sept 2026

Usage

import { ToolCalls } from "@varick/ui/components/tool-calls";

export function Example() {
  return <ToolCalls steps={run.steps} diffs={run.diffs} diffLines={run.diffLines} />;
}

API reference

Every component also accepts className and the native props of its root element.

Prop	Type	Default	Description
steps	ToolStep[]	demo run	icon, label, chip, and the detail lines shown when expanded.
diffs	ToolDiff[]	demo run	file, add, del. Rendered as chips once every step has landed.
diffLines	Record<file, ToolDiffLine[]>	demo run	The hover preview per file, with add, del and ctx tones.
header	string	'4 tool calls, 2 messages'	The collapsed summary line.
onToggleRow	(label, open) => void	undefined	Fires when a row expands or collapses.

Accessibility

Rows and the header are buttons with aria-expanded. Diff chips carry aria-label with the file name and aria-expanded while the preview shows.
The preview opens on focus as well as hover, and closes on blur.

Styles

Proposed CSS in Varick tokens. Nothing in the app renders this yet.

.tool-row { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 3px; border-radius: 4px; }
.tool-row:hover { background: var(--fill); }
.tool-chip { height: 22px; padding: 0 6px; border: 1px solid var(--hairline-soft); background: var(--fill); border-radius: 4px; font-size: 11.5px; color: var(--fg-mid); }
.diff-chip { height: 28px; padding: 0 8px; border: 1px solid var(--hairline); border-radius: 4px; background: #FFFFFF; font-family: 'Menlo', monospace; font-size: 11.5px; }
.diff-preview { position: fixed; width: 288px; border: 1px solid var(--hairline); border-radius: 8px; background: #FFFFFF; box-shadow: 0 8px 24px rgba(0,0,0,0.10); }
.diff-add { color: var(--success); background: var(--success-soft); }
.diff-del { color: var(--danger); background: var(--danger-soft); }