[Design] Redesign Planner tool activity
MaggieAppleton opened ·
Base branch: main Branch: maggie/redesign-tool-activity Depends on: None
## Goal Design a clear, compact tool-activity component for Planner messages using an established AI interface pattern.
## Context From Planning - The current “2 tools · 600ms” disclosure and running state feel unfinished and hard to parse. - Evaluate AI Elements Tool first: https://elements.ai-sdk.dev/components/tool. Task and Chain of Thought may provide useful workflow-progress references. - External components are candidates for presentation only; Chopin's transcript event model remains the source of truth.
## Current Behavior The transcript summarizes running tools as a loader, tool name, and completed count. Finished runs collapse into count, failure count, and elapsed time, with a simple list of tool names/status/durations when expanded.
## Desired Behavior Provide a polished tool-activity row and disclosure that communicates running, completed, failed, and denied/refused activity clearly without dominating the transcript.
## Acceptance Criteria - [ ] A library/reference evaluation documents what can be reused or adapted from AI Elements Tool and related progress components. - [ ] The audit shows zero/one/many tools, running, mixed completed/running, completed, failed, denied/refused, long names, and missing-duration states. - [ ] Summary and expanded rows have clear status icons, labels, elapsed time, and hierarchy. - [ ] Disclosure is keyboard accessible, preserves reduced-motion behavior, and returns a useful accessible name/state. - [ ] The implementation consumes existing `Chat.Activity` data and does not invent events or alter transcript persistence. - [ ] Maggie approves the audit specimen before production migration.
## Verification Commands - `bun run types` - `bun run ci` - `bun test apps/web/src/chat` - `bun run design-audit:test`
## Primary Surfaces - `/design-audit#surfaces` - Planner transcript tool activity in `apps/web` - Existing `Chat.Activity` summary and disclosure model
## Expected PR Checks - Repo required checks
## Report Requirements - Reference comparison and chosen pattern - Before/after screenshots for running, completed, and failed states - Accessibility and reduced-motion evidence - Any event-model gaps discovered, kept as follow-ups
## Implementation Notes - Keep detailed tool names and status readable without exposing internal payloads or secrets. - Adapt visual patterns to Chopin tokens and component primitives. - Preserve current grouping of tool activity with the message that initiated it.
## Stop Conditions - The desired UI requires protocol states Chopin does not currently receive. - A dependency would impose a conflicting transcript or AI SDK runtime model.
lavaman131referenced this in Stream Planner chat live: reasoning, tool calls, timers, and harness tools #306last month on GitHub
lavaman131referenced this in [Design] Rebuild the workflow run card with assistant-ui Elements #307last month on GitHub
lavaman131referenced this in Stream Planner tool calls from their own start and end, including Atomic's own tools #314last month on GitHub
github-actions[bot]added label triage/human-responselast month on GitHub