dashboard: generic <ToolCard> — header/pill/duration/caret, errors+approvals open, successes collapsed #960

New issue

Closed

opened 2026-05-08 12:14:17 +00:00 by claude-desktop · 3 comments

claude-desktop commented

2026-05-08 12:14:17 +00:00

Collaborator

User story

As a frontend engineer, I want a single <ToolCard> primitive every tool widget composes into, so error/approval cards stay open by default while plain successes auto-collapse to a one-liner — matching the Vercel AI Elements Tool ergonomics.

Acceptance criteria

<ToolCard> in apps/web/src/components/agent/tool-card.tsx. Composition:
- <ToolCardHeader> — tool icon (lucide; chosen by ToolKind), tool name, target chip (file path / URL / command head), <StatusPill> driven by the SSE state enum, live duration counter, caret toggle.
- <ToolCardBody> — collapsible. Slots: inputView and outputView.
Default-collapsed when state === "output-available" and no error.
Default-open when state is output-error, approval-requested, or output-denied.
Streaming spinner inside the pill while state is input-streaming or input-available.
Honour prefers-reduced-motion — no caret rotation animation when set.
Tokyo Night palette: rounded-card, border border-border, shadow-none, hover state shadow-subtle. Status pill is rounded-pill.
No raw <button> for the caret — use existing <Button> primitive with tone="ghost".
Vitest + react-testing-library snapshot per state, plus a click-to-toggle interaction test.

Out of scope

Per-tool input/output renderers (one issue per ToolKind widget).
The streaming markdown text outside tool cards (Streamdown ticket).

Dependencies

Depends on previous ticket (state enum on wire).

References

AI Elements <Tool>: https://elements.ai-sdk.dev/components/tool — start by copying its JSX, repaint to Tokyo Night, replace icons with lucide.
Foundation primitives in apps/web/CLAUDE.md.

## User story As a frontend engineer, I want a single `<ToolCard>` primitive every tool widget composes into, so error/approval cards stay open by default while plain successes auto-collapse to a one-liner — matching the Vercel AI Elements `Tool` ergonomics. ## Acceptance criteria - [ ] `<ToolCard>` in `apps/web/src/components/agent/tool-card.tsx`. Composition: - `<ToolCardHeader>` — tool icon (lucide; chosen by `ToolKind`), tool name, target chip (file path / URL / command head), `<StatusPill>` driven by the SSE `state` enum, live duration counter, caret toggle. - `<ToolCardBody>` — collapsible. Slots: `inputView` and `outputView`. - [ ] Default-collapsed when `state === "output-available"` and no error. - [ ] Default-open when `state` is `output-error`, `approval-requested`, or `output-denied`. - [ ] Streaming spinner inside the pill while `state` is `input-streaming` or `input-available`. - [ ] Honour `prefers-reduced-motion` — no caret rotation animation when set. - [ ] Tokyo Night palette: `rounded-card`, `border border-border`, `shadow-none`, hover state `shadow-subtle`. Status pill is `rounded-pill`. - [ ] No raw `<button>` for the caret — use existing `<Button>` primitive with `tone="ghost"`. - [ ] Vitest + react-testing-library snapshot per state, plus a click-to-toggle interaction test. ## Out of scope - Per-tool input/output renderers (one issue per `ToolKind` widget). - The streaming markdown text outside tool cards (Streamdown ticket). ## Dependencies - Depends on previous ticket (state enum on wire). ## References - AI Elements `<Tool>`: https://elements.ai-sdk.dev/components/tool — start by copying its JSX, repaint to Tokyo Night, replace icons with lucide. - Foundation primitives in `apps/web/CLAUDE.md`.

Rows
Columns

dashboard: generic &lt;ToolCard&gt; — header/pill/duration/caret, errors+approvals open, successes collapsed #960