# Ticket 4.11 — Thinking Visualisation

**Phase**: 4 — Frontend UI
**Priority**: Medium
**Depends on**: 4.1

## Description

Visual indicator when the agent is "thinking" (extended thinking / reasoning). Shows an animated indicator and optionally the thinking text in a collapsible block.

## Acceptance Criteria

### AC1: Thinking indicator on start

```gherkin
Given the agent starts processing
When a { type: "thinking_start" } message arrives
Then an animated thinking indicator appears (e.g., pulsing dots, brain icon)
And it is visually distinct from regular text streaming
```

### AC2: Thinking text display

```gherkin
Given thinking is active
When { type: "thinking_delta", text: "..." } messages arrive
Then the thinking text is displayed in a collapsible, muted block
And the text streams in real-time
And the block is collapsed by default (showing "Thinking..." with expand toggle)
```

### AC3: Thinking stop

```gherkin
Given thinking is active
When { type: "thinking_stop" } arrives
Then the animated indicator stops
And the thinking block shows its final state
And the assistant's regular response begins below it
```

### AC4: Expand/collapse thinking

```gherkin
Given a thinking block exists
When the user clicks "Show thinking"
Then the full thinking text is revealed
When the user clicks "Hide thinking"
Then it collapses back to the summary line
```

## Testable Components

| Component | Test Type | What to Assert |
|-----------|-----------|----------------|
| Thinking block HTML | Unit | Generates correct collapsible block structure |
| Thinking indicator | E2E | Animated indicator appears on thinking_start |
| Thinking text streaming | E2E | thinking_delta text streams into collapsible block |
| Thinking stop | E2E | Indicator stops animating, block finalized on thinking_stop |
| Expand/collapse | E2E | Click toggles thinking text visibility |

## Reference

- Claude-relay thinking: `../claude-relay/lib/public/modules/tools.js` (thinking blocks)
- Claude-relay animated dots: `../claude-relay/lib/public/modules/icons.js`
