[Design] Redesign Planner tool activity #162

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.