ThinkingState

An expandable agent trace — steps, reasoning, a web search or tool calls — that runs once, settles into a one-line summary and stays expandable.

When to use

• Show what the agent is doing before its answer arrives, then collapse it to "Thought for 4 seconds" or "Ran 3 tools".
• Pick a variant: Steps (a checklist with spinner then checks), Reasoning (short prose), Search (a query plus the sources read) or Coding (Read, Edit and Run calls with +/− counts).
• Not for the final answer — use StreamingText. Not for a compact list of tool calls with diffs — use ToolChips. Not for a bare busy indicator — use LoadingState.

Usage

import ThinkingState from "@/components/iris/thinking-state/thinking-state";

h(ThinkingState, { variant: "Steps", onSettled: () => showAnswer() });

h(ThinkingState, {
  variant: "Search",
  active: "Searching the docs",
  done: "Searched the docs",
  rows: [
    { primary: "Restore points and backups", secondary: "docs.capydb.example", href: "/docs/backups" },
    { primary: "Preview databases", secondary: "docs.capydb.example", href: "/docs/previews" },
  ],
});

Props

Prop	Type	Default	Description
variant	"Steps" | "Reasoning" | "Search" | "Coding"	"Steps"	Trace style and built-in content.
rows	{ primary: string; secondary?: string; mono?: boolean; add?: number; del?: number; href?: string }[]	per-variant demo rows (a CapyDB agent preparing a migration)	Overrides the trace lines. secondary is muted text after primary, and mono sets it in code font. add/del show +/− counts (Coding). href makes Search rows open in a new tab.
active	string	per variant (Thinking, Searching the docs, Running tools)	Header label while working.
done	string	per variant (Thought for 4 seconds, Searched the docs, Ran 3 tools)	Header label once settled.
icon	ReactNode	sparkle	Header glyph.
onSettled	() => void	—	Called once when the trace finishes, so you can sequence the answer after it.

Notes

• For Search, pass your own rows: the built-in results are placeholders on .example domains with # links. The search query line ("point-in-time restore window") and the "+7 more" note are hard-coded and cannot be changed by props. Search rows underline their title on hover and focus.
• The timeline is fixed: it expands at about 0.8s, reveals rows, settles at about 3.2s and auto-collapses at about 5.8s. Clicking the header toggles it at any time, and the header has aria-expanded.
• In Coding, rows are toggle buttons (aria-pressed).
• Reads --ink, --ink-2, --ink-3, --line, --hover, --inset, --green, --red, --accent and --orange.