[Design] Rebuild the workflow run card with assistant-ui Elements
lavaman131 opened ·
## Problem
The Planner chat is moving to [assistant-ui Elements](https://www.assistant-ui.com/elements) in #306 (ThinkingIndicator, StreamingText, ReasoningPanel, ToolCall, ToolGroup). The workflow run card (`apps/web/src/chat/run-card.tsx`, added in #221) still uses its own pulse, ring and wrench icons. Once #306 lands, the chat and the run card will look like two different products. Every running run and running stage also gets its own animated pulse, which brings back the "too many spinners" problem #306 fixes in the chat.
## Proposal
Rebuild the run card from assistant-ui's **standalone** `elements-*` registry items, which need no `@assistant-ui/react` runtime. Install them the same way as #306: run `npx shadcn@latest add https://r.assistant-ui.com/elements-<name>.json` into the unmodified generated directory, theme them through Chopin's shadcn variable aliases, and wrap them in thin Chopin adapters.
| Run card part | assistant-ui element | Mapping | |---|---|---| | List of runs | [Background runs](https://www.assistant-ui.com/elements/background-inbox), [Subagent list](https://www.assistant-ui.com/elements/subagent-list) | One row per run, keeping the current `orderRuns` grouping (waiting on you, running, paused, ended) and pause/resume actions. | | One run's stages | [Agent plan](https://www.assistant-ui.com/elements/agent-plan) or [Job progress](https://www.assistant-ui.com/elements/job-progress) | Stages as a checklist with a completed/total count. `Wire.RunStage` status maps to the element states. | | Running stage label | [Thinking indicator](https://www.assistant-ui.com/elements/thinking-indicator) | Replaces `RunPulse`. One animated indicator per run, none under reduced motion. | | `ctx.tool` steps | [Tool call](https://www.assistant-ui.com/elements/tool-call), [Tool group](https://www.assistant-ui.com/elements/tool-group) (the same components #306 installs) | Replaces the wrench icon. | | Stage waiting on input | [Approval card](https://www.assistant-ui.com/elements/approval-card) (optional) | A "Waiting on you" card whose action opens Decisions. Answers stay sidecar records. |
Out of scope: [Flow graph](https://www.assistant-ui.com/elements/flow-graph) and [Trace waterfall](https://www.assistant-ui.com/elements/trace-waterfall). They fit a future full-page run view better than the chat pane.
## Acceptance criteria
- [ ] Runs keep their current grouping, ordering, `defaultOpen` and `visibleRuns` behaviour. - [ ] Stage statuses (`running`, `completed`, `failed`, `blocked`, `awaiting_input`, `paused`, `skipped`) map to clear states with accessible labels. - [ ] At most one animated indicator per run. Nothing animates under reduced motion. - [ ] `ctx.tool` steps reuse the ToolCall adapter from #306. - [ ] Pause and resume keep their accessible names and their persistence-before-publication behaviour. - [ ] No `@assistant-ui/react` runtime dependency. - [ ] `bun test`, `bun run types` and `bun run ci` pass. Playwright run-card tests are updated. - [ ] The design specimen is approved per #162 before the production migration.
## Related
- #306: Planner chat streaming and assistant-ui Elements adoption. This builds on it as the next layer of the stack. - #308: assistant-ui mentions. - #221: the original run card. - #162: design approval.
Assistant-workflow: inline Assistant-duration: unmeasured Assistant-verification: code inspection passed: read run-card.tsx, the assistant-ui Elements catalog and r.assistant-ui.com/registry.json (elements-* items depend only on lucide-react, tw-shimmer and collapsible)
lavaman131added label enhancementlast month on GitHub
lavaman131renamed Rebuild the workflow run card with AI Elements (Queue, Task, Tool) to Rebuild the workflow run card with assistant-ui Elementslast month on GitHub
lavaman131referenced this in [Design] Replace the composer @ mention picker with assistant-ui mentions #308last month on GitHub
- LA
Closing to avoid overlapping the in-flight design work: Maggie owns the chat, composer, decisions and research UI (#296, #278, #294, #285, #302, the [Design] issues #160-#164) and Krzysztof owns the research offers (#304). Any UI library choice belongs in that track.
Assistant-workflow: inline
lavaman131renamed Rebuild the workflow run card with assistant-ui Elements to [Design] Rebuild the workflow run card with assistant-ui Elementslast month on GitHub