ToolChips

An agent run summarised as compact rows: tool calls with inline chips (thinking, writing, running, reading), followed by file-diff chips that preview their changes on hover.

When to use

• Summarise what an agent did during a coding or automation run under a collapsible "N tool calls" header.
• Let people expand any row to see its output, or hover a file chip to see the diff.
• Not for a full code listing or diff — use CodeBlock. Not for a step trace while the agent is still thinking — use ThinkingState. Not for task status — use TaskRows.

Usage

import ToolChips from "@/components/iris/tool-chips/tool-chips";

h(ToolChips, {
  labels: { header: "3 tool calls, 1 message", more: "+1 more" },
  steps: [
    {
      icon: "write",
      label: "Write 48 lines",
      chip: "rotateKey.ts",
      mono: true,
      detailMono: true,
      detail: [{ text: '+ await keys.revoke(key.id, { after: "24h" })', tone: "add" }],
    },
    {
      icon: "run",
      label: "Run tests",
      chip: "npm test",
      mono: true,
      detailMono: true,
      detail: [{ text: "34 checks passed" }],
    },
  ],
  diffs: [{ file: "rotateKey.ts", add: 2, del: 1 }],
  diffLines: {
    "rotateKey.ts": [
      { text: 'after: "1h"', tone: "del" },
      { text: 'after: "24h"', tone: "add" },
    ],
  },
});

Props

Prop	Type	Default	Description
steps	{ icon: "think" | "write" | "run" | "read"; label: string; chip: string; mono: boolean; detailMono: boolean; detail: { text: string; tone?: "add" }[] }[]	4 calls by a notdocs agent	Tool-call rows, revealed every 700ms. chip is the inline token after the label, and detail lines show when a row is expanded.
diffs	{ file: string; add: number; del: number }[]	3 demo files	File chips under the rows, with +/− counts.
diffLines	Record<string, { text: string; tone: "add" | "del" | "ctx" }[]>	demo diffs	Hover-preview lines per file, keyed by file.
labels	Partial<{ header: string; more: string }>	4 tool calls, 2 messages / +2 more	Collapsible header and the trailing "more" text after the chips.
className	string	—	Extra classes on the outer block (max 320px wide).
onOpenChange	(open: boolean) => void	—	Called when the header expands or collapses the run.
onToggleRow	(label: string, open: boolean) => void	—	Called when a row is expanded or collapsed.
variant	string	—	Accepted for gallery parity. It has no effect.

Notes

• The header and rows are buttons with aria-expanded. Each row's chevron appears on hover.
• The diff preview is portaled to document.body with fixed positioning, so it isn't clipped by scrolling or transformed parents.
• The header and "more" counts are plain strings. Keep them in sync with steps and diffs yourself.
• Reads --ink, --ink-2, --ink-3, --line, --inset, --surface, --hover, --green and --red, plus shadow-btn and the overlay shadow.