dashboard: <Reasoning> accordion — auto-open during stream, auto-collapse to "Thought for Ns" chip #962

New issue

Closed

opened 2026-05-08 12:14:41 +00:00 by claude-desktop · 0 comments

claude-desktop commented

2026-05-08 12:14:41 +00:00

Collaborator

User story

As an operator I want extended-thinking blocks to appear inline above the assistant answer while the agent is reasoning, then collapse to a "Thought for Ns · 4 paragraphs" chip when streaming finishes, so I can audit thinking without it dominating the timeline.

Acceptance criteria

<Reasoning> component in apps/web/src/components/agent/reasoning.tsx. Wraps thinking text rendered via Streamdown.
Open state during state === "streaming". Pulse ring on the disclosure trigger.
Collapse to chip with <lucide.Brain /> + Thought for {seconds}s once SSE thinking_completed (or, for claude-code, the next non-thinking event) lands.
Click to re-expand; prefers-reduced-motion disables pulse + chevron animation.
Persist content (never unmount) — operators audit thinking in postmortems.
Handle interleaved thinking (Anthropic interleaved-thinking-2025-05-14 header): a thinking block can appear between tool calls. Component instances are keyed off event id, not "the thinking before this answer".

Out of scope

Full delta rendering — depends on the cursor delta-stream ticket (#951) for live deltas; uses turn-level thinking text from claude-code as fallback.

Dependencies

None hard. Smoother once #951 lands (live deltas).

References

AI Elements <Reasoning>: https://elements.ai-sdk.dev/components/reasoning
Anthropic interleaved thinking docs: https://platform.claude.com/docs/en/build-with-claude/extended-thinking

## User story As an operator I want extended-thinking blocks to appear inline above the assistant answer while the agent is reasoning, then collapse to a "Thought for Ns · 4 paragraphs" chip when streaming finishes, so I can audit thinking without it dominating the timeline. ## Acceptance criteria - [ ] `<Reasoning>` component in `apps/web/src/components/agent/reasoning.tsx`. Wraps thinking text rendered via Streamdown. - [ ] Open state during `state === "streaming"`. Pulse ring on the disclosure trigger. - [ ] Collapse to chip with `<lucide.Brain />` + `Thought for {seconds}s` once SSE `thinking_completed` (or, for claude-code, the next non-thinking event) lands. - [ ] Click to re-expand; `prefers-reduced-motion` disables pulse + chevron animation. - [ ] Persist content (never unmount) — operators audit thinking in postmortems. - [ ] Handle interleaved thinking (Anthropic `interleaved-thinking-2025-05-14` header): a thinking block can appear between tool calls. Component instances are keyed off event id, not "the thinking before this answer". ## Out of scope - Full delta rendering — depends on the cursor delta-stream ticket (#951) for live deltas; uses turn-level thinking text from claude-code as fallback. ## Dependencies None hard. Smoother once #951 lands (live deltas). ## References - AI Elements `<Reasoning>`: https://elements.ai-sdk.dev/components/reasoning - Anthropic interleaved thinking docs: https://platform.claude.com/docs/en/build-with-claude/extended-thinking

claude-desktop added the

area:dashboard

type:user-story

labels

2026-05-08 12:18:06 +00:00