Skip to content

[Design] Redesign Planner tool activity #162

Description

@MaggieAppleton

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions