dashboard: Reasoning accordion — auto-open during stream, collapse to chip #986

Merged

reviewer merged 2 commits from dev/962 into main

2026-05-08 14:56:45 +00:00

dev commented

2026-05-08 14:51:40 +00:00

Collaborator

Adds <Reasoning> accordion (apps/web/src/components/agent/reasoning.tsx) rendered above assistant event rows when detail.thinking blocks are present.

Auto-opens with Brain + ping-ring trigger while the task is streaming; auto-collapses to "Thought for Ns · N paragraphs" chip on settle
Click always re-expands; content never unmounts for postmortem auditing
prefers-reduced-motion suppresses ping ring + chevron transition
Keyed off (ts, type) per event — ready for interleaved thinking support
EventLog gains streaming prop; task-detail passes status === "running"

Test plan

Run a task that uses extended thinking (Opus model); observe the Brain chip auto-opens in the event log while the assistant event streams
After task completes, chip collapses to "Thought for Ns · N paragraphs"; click re-expands
Toggle OS reduced-motion: ping ring and chevron animation should be absent
Open an old completed task with thinking blocks: chip should render collapsed with correct elapsed time

Closes #962

Adds `<Reasoning>` accordion (`apps/web/src/components/agent/reasoning.tsx`) rendered above assistant event rows when `detail.thinking` blocks are present. - Auto-opens with Brain + ping-ring trigger while the task is streaming; auto-collapses to "Thought for Ns · N paragraphs" chip on settle - Click always re-expands; content never unmounts for postmortem auditing - `prefers-reduced-motion` suppresses ping ring + chevron transition - Keyed off `(ts, type)` per event — ready for interleaved thinking support - `EventLog` gains `streaming` prop; `task-detail` passes `status === "running"` ## Test plan - Run a task that uses extended thinking (Opus model); observe the Brain chip auto-opens in the event log while the `assistant` event streams - After task completes, chip collapses to "Thought for Ns · N paragraphs"; click re-expands - Toggle OS reduced-motion: ping ring and chevron animation should be absent - Open an old completed task with thinking blocks: chip should render collapsed with correct elapsed time Closes #962

dev self-assigned this

2026-05-08 14:51:40 +00:00

dev added 2 commits

2026-05-08 14:51:40 +00:00

feat(dashboard): Reasoning accordion — auto-open during stream, collapse to chip be84397cb8

Adds <Reasoning> component (apps/web/src/components/agent/reasoning.tsx)
rendered inline above assistant event rows when detail.thinking blocks are
present. Auto-opens with a Brain + ping-ring trigger while the task is
streaming; collapses to "Thought for Ns · N paragraphs" chip once the task
settles. Click re-expands; content is never unmounted for postmortem
auditing. prefers-reduced-motion suppresses the ping ring and chevron
transition. Instances are keyed off (ts, type) per event, ready for
interleaved-thinking-2025-05-14 support.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix(dashboard): pass required props to EventRow in CollapsedGroup

qa / dockerfile (pull_request) Successful in 17s

Details

qa / i18n-string-check (pull_request) Successful in 17s

Details

qa / db-schema (pull_request) Successful in 19s

Details

qa / sql-layer-check (pull_request) Successful in 23s

Details

qa / qa-1 (pull_request) Successful in 2m3s

Details

qa / qa (pull_request) Successful in 0s

Details

199d5db386

EventRow gained isLast/nextEventTs/taskStreaming props for the Reasoning
accordion; the CollapsedGroupBase expansion path was not updated.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dev requested review from reviewer

2026-05-08 14:54:42 +00:00

reviewer approved these changes

2026-05-08 14:56:33 +00:00

reviewer left a comment

All ACs met, CI green.

Nit (non-blocking): reasoning.tsx button has aria-expanded but no aria-controls pointing to the body region, and the body div has no id. Screen readers can't programmatically associate the trigger with its panel. Wire id={reasoning-body-${_id}} onto the body div and aria-controls on the button if a11y matters here.

All ACs met, CI green. Nit (non-blocking): `reasoning.tsx` button has `aria-expanded` but no `aria-controls` pointing to the body region, and the body div has no `id`. Screen readers can't programmatically associate the trigger with its panel. Wire `id={`reasoning-body-${_id}`}` onto the body div and `aria-controls` on the button if a11y matters here.

reviewer merged commit ccd6fabecd into main

2026-05-08 14:56:45 +00:00