> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.
# ChainOfThought
A read-only log of what Wally did while answering — searches, tool calls, its own reasoning — so the user can see how it got there without the steps crowding the answer. Each `ChainOfThoughtStep` is one line: a type icon, a label and an optional right-aligned metric, joined to the next step by a thin connector. A step with children becomes a collapsible trigger, and children can be another `ChainOfThought`, so runs nest as deep as the agent did. The app owns the mapping from step type to icon (see **Type Icons**); the DS only draws the row.
[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/ChainOfThought) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/ai-chainofthought--overview)
```tsx
import { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';
import { Brain, Database, FileText, Search } from '@wallarm-org/design-system/icons';
export const Basic = () => (
} label='Thought for 5s' />
} label='Searched for blocked requests' />
} label='Queried attack events' />
} label='Read the policy for api.example.com' />
);
```
## Usage
```tsx
import { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';
import { Brain, Database, FileText, Search } from '@wallarm-org/design-system/icons';
```
## Examples
### Nested
Steps with children toggle open; a nested chain can hold its own collapsible steps.
```tsx
import { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';
import { Bot, Brain, FilePlus, ListChecks, Search, Wrench } from '@wallarm-org/design-system/icons';
export const Nested = () => (
} label='Thought for 5s' />
}
label='Ran the triage subagent'
defaultOpen
data-testid='cot-subagent'
>
} label='Searched for ABC' />
} label='Called get_attacks' data-testid='cot-tool'>
Returned 42 attacks over the last 24 hours.
} label='Made a plan' />
}
label='Created a rule draft'
data-testid='cot-collapsed'
>
Draft rule blocks SQL injection on /api/v1/login.
);
```
### Simple rows
`icon={null}` gives the Figma "Simple" row: no icon cell, no connector, 16px apart.
```tsx
import { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';
export const SimpleRows = () => (
);
```
### Simple result
`metric` adds a right-aligned mono value — the Figma "Simple-result" row.
```tsx
import { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';
export const SimpleResult = () => (
);
```
### Working
`status='running'` shimmers the label while the step is in progress.
```tsx
import { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';
import { Globe, Search } from '@wallarm-org/design-system/icons';
export const Working = () => (
} label='Searched for ABC' />
} label='Searching the web...' status='running' />
);
```
### Streaming
A step that mounts as `running` fades in and settles 4px; the previous step's connector grows
toward it; on `done` the shimmer fades into the plain label. Steps that mount `done` (history)
appear instantly. All of it is off under `prefers-reduced-motion`.
```tsx
import { useState } from 'react';
import { Button } from '@wallarm-org/design-system/Button';
import { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';
export const Streaming = () => {
const [count, setCount] = useState(1);
const finished = count > STREAMING_STEPS.length;
const handleClick = () => {
setCount(count + 1);
};
return (
);
};
```
### Error step
`status='error'` tints the label and the type icon danger, for a step that failed. Word the
label as a failure too (color alone is not enough); put the detail in the step's children.
Not in Figma yet; pending design review.
```tsx
import { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';
import { Plug, Search } from '@wallarm-org/design-system/icons';
export const ErrorStep = () => (
} label='Searched for ABC' />
}
label='get_attacks failed'
status='error'
defaultOpen
data-testid='cot-error'
>
Request failed: 503 Service Unavailable.
} label='get_rules failed' status='error' />
);
```
### Worked summary
The whole run folded under one "Worked for …" step with the Activity icon.
```tsx
import { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';
import { Activity, BadgeCheck, Brain, Radar, Terminal } from '@wallarm-org/design-system/icons';
export const WorkedSummary = () => (
}
label='Worked for 3m 45s'
defaultOpen
data-testid='cot-summary'
>
} label='Thought for 5s' />
} label='Ran wallarm-cli status' />
} label='Scanned 12 hosts' />
} label='Created a mitigation rule' />
);
```
### Rich text content
Nested content can be prose: paragraphs, bullets and inline code.
```tsx
import { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';
import { InlineCodeSnippet } from '@wallarm-org/design-system/CodeSnippet';
import { Brain } from '@wallarm-org/design-system/icons';
export const RichTextContent = () => (
} label='Thought for 12s' defaultOpen>
The user wants to know why requests to{' '}
{' '}
were blocked.