Chain of thought
An ordered disclosure of supplied summaries and tool activity.
- Checking the filing calendar and identifying entities with a UK obligation.
- Looked up filing calendarFY26 Q3
- list_entities · Responsejson
{ "count": 2, "jurisdiction": "UK" } - get_obligations · Responsejson
{"error":"timeout"}Connection timed out. Your application can offer retry.
Usage
import { ChainOfThought } from '@commenda/pathfinder/chain-of-thought';
<ChainOfThought
isStreaming={isReasoningStreaming}
duration={elapsedSeconds}
steps={[
{ id: 'summary', type: 'reasoning', content: summary },
{
id: toolCallId,
type: 'tool',
tool: { name: 'list_entities', status: 'running' },
},
]}
/>;Live activity
- Checking the filing calendar and identifying entities with a UK obligation.
- Looking up filing calendarFY26 Q3
- list_entities · Responsejson
{ "count": 2, "jurisdiction": "UK" } - get_obligations · Responsejson
{"error":"timeout"}Connection timed out. Your application can offer retry.
Use Start/Finish activity to exercise streaming updates. New run resets disclosure intent.
API reference
| Prop | Type | Behavior |
|---|---|---|
stepsRequired | readonly ChainOfThoughtStep[] | Required ordered list with stable unique IDs |
isStreaming | boolean | Live label and elapsed summary |
duration | number | Live label and elapsed summary |
label | string | Live label and elapsed summary |
disclosureConfig | ActivityDisclosureConfigView fields | Outer disclosure; each tool has independent configuration |
className | string | Layout override |
disclosureConfigObject fields
| Field | Type | Requirement |
|---|---|---|
open | boolean | Optional |
defaultOpen | boolean | Optional |
onOpenChange | ((open: boolean) => void) | Optional |
Step model
type ChainOfThoughtStep =
| { id: string; type: 'reasoning'; content: ReactNode }
| { id: string; type: 'tool'; tool: ToolCallProps };Update a step in place using the same ID. Several tool steps may be running concurrently; the host determines when the overall reasoning part ends. An empty list creates an empty disclosure without fabricated progress.
Design rules
- CHAIN-01: IDs must be unique and stable across streaming updates and reordering. Use toolCallId for tool steps.
- CHAIN-02: Figma 600:29113 / 600:32905: 12px between prose groups, 4px between consecutive tool rows; preserve source order and do not invent steps.
- CHAIN-03: History starts closed, live starts open and closes after the next part plus 1s. Manual expansion stays respected; each nested tool retains its own disclosure.
disclosureConfig.onOpenChange reports user toggle requests. A controlled open value delegates timing and persistence to the host. Automatic collapse also preserves a panel containing keyboard focus.
Accessibility and integration
Disclosure buttons support Enter and Space, preserve focus, and expose aria-expanded. Payload copy buttons are outside the disclosure trigger. Pointer disclosure uses the existing 200ms height transition; keyboard and reduced-motion interaction are immediate. Long text wraps while code scrolls inside its own region. Use one meaningful ThinkingIndicator status per active response rather than announcing every streamed token or tool payload.
The application owns requests, cancellation, approval, retries, durations, and history persistence. No AI SDK provider is required. See AI content integration for migration mappings; consumer migration is outside this phase.