Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[Design] Redesign Planner tool activity

Open
#162 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
35/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
typescript

Research direction

Start with the Planner transcript tool activity in apps/web, the existing Chat.Activity summary and disclosure model, and /design-audit#surfaces. Compare AI Elements Tool and related progress components, then produce the required audit specimens and reference comparison before considering migration. Done includes approval, accessibility and reduced-motion evidence, screenshots for required states, and passing bun run types, bun run ci, bun test apps/web/src/chat, and bun run design-audit:test.

Written by the indexing model from the issue text.

Description

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.
Dominant language
TypeScript
Stars
351
Forks
20
Avg merge
14h 7m
Merged PRs (30d)
34

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from githubnext/chopin

All issues in githubnext/chopin

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.