feat(web): add <TurnMeter> composable to unify token/cost display

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

charles/agent-hooks#1162

claude-desktop commented

2026-05-14 22:05:19 +00:00

Collaborator

Acceptance criteria

Component

<TurnMeter size="sm|md|lg" inputTokens={} outputTokens={} cacheReadTokens={} cacheCreationTokens={} costUsd={} durationMs={} /> in components/turn-meter.tsx
sm: inline text only — replaces <TokenMeter> in task-list rows
md: inline text + small cost indicator — replaces transcript turn meter
lg: full bar meters — <RunHeaderMeters> wraps <TurnMeter size="lg">
costUsd={null} renders ? unknown indicator (parity with current <CostMeter>)

Adoption

<TokenMeter> becomes thin wrapper around <TurnMeter size="sm"> until all call sites migrated, then removed
Task list rows use <TurnMeter size="sm">
Transcript turn footer uses <TurnMeter size="md">
<RunHeaderMeters> delegates bar rendering to <TurnMeter size="lg">

Quality

No regression in <RunHeaderMeters> — context window bar + compaction ticks remain (those are context-specific, not turn-level, so they stay in <RunHeaderMeters> above the meter)
just qa passes

Out of scope

Per-tool token attribution chart (stays in <TokenAttributionChart>, referenced via tooltip in <RunHeaderMeters>)
Budget tier configuration
Adding new cost fields

References

agent-output-unification audit 2026-05-15
Inconsistency: "Token/Cost Rendering" (MEDIUM)

As a dashboard operator, I want token and cost data rendered consistently whether I'm looking at a task list row, a task detail header, or a transcript turn, so that I can compare usage at a glance without needing to context-switch between different widget formats. ### Acceptance criteria #### Component - [ ] `<TurnMeter size="sm|md|lg" inputTokens={} outputTokens={} cacheReadTokens={} cacheCreationTokens={} costUsd={} durationMs={} />` in `components/turn-meter.tsx` - [ ] `sm`: inline text only — replaces `<TokenMeter>` in task-list rows - [ ] `md`: inline text + small cost indicator — replaces transcript turn meter - [ ] `lg`: full bar meters — `<RunHeaderMeters>` wraps `<TurnMeter size="lg">` - [ ] `costUsd={null}` renders `?` unknown indicator (parity with current `<CostMeter>`) #### Adoption - [ ] `<TokenMeter>` becomes thin wrapper around `<TurnMeter size="sm">` until all call sites migrated, then removed - [ ] Task list rows use `<TurnMeter size="sm">` - [ ] Transcript turn footer uses `<TurnMeter size="md">` - [ ] `<RunHeaderMeters>` delegates bar rendering to `<TurnMeter size="lg">` #### Quality - [ ] No regression in `<RunHeaderMeters>` — context window bar + compaction ticks remain (those are context-specific, not turn-level, so they stay in `<RunHeaderMeters>` above the meter) - [ ] `just qa` passes ### Out of scope - Per-tool token attribution chart (stays in `<TokenAttributionChart>`, referenced via tooltip in `<RunHeaderMeters>`) - Budget tier configuration - Adding new cost fields ### References - agent-output-unification audit 2026-05-15 - Inconsistency: "Token/Cost Rendering" (MEDIUM)

claude-desktop added this to the agent-output-unification milestone

claude-desktop added the

labels

code-lead was assigned by architect

2026-05-14 22:12:05 +00:00

code-lead referenced this issue from a commit

2026-05-14 22:23:38 +00:00

feat(web): add <TurnMeter> composable to unify token/cost display (#1162)

code-lead referenced this issue from a pull request that will close it,

2026-05-14 22:23:59 +00:00

feat(web): add <TurnMeter> composable to unify token/cost display #1182

charles closed this issue