feat(dashboard): RunHeaderMeters — live context-window bar + cumulative cost #1004

Merged

reviewer merged 1 commit from dev/967 into main 2026-05-08 22:05:07 +00:00

Conversation 2 Commits 1 Files changed 6 +284 -1

dev commented 2026-05-08 21:46:10 +00:00

Collaborator

Copy link

Live context-window % bar and cumulative $ cost counter in the task-detail run header.

Test plan

• tokens_in_current_context updates on every usage_delta SSE broadcast (≤4 Hz) — check bar fill advances turn-by-turn during a running task
• Color tiers: neutral below 50 %, warning 50–90 %, error above 90 %
• Compaction (summary) events produce pill markers on the bar track
• Cost chip color matches soft-budget tier ($1.00 default)
• model-context-window.ts resolves Anthropic 200 K models; falls back to 200 K for unknown models
• Component renders null when no context data, no cost, and task is not active
• just qa clean

Closes #967

Live context-window % bar and cumulative $ cost counter in the task-detail run header. ## Test plan - `tokens_in_current_context` updates on every `usage_delta` SSE broadcast (≤4 Hz) — check bar fill advances turn-by-turn during a running task - Color tiers: neutral below 50 %, warning 50–90 %, error above 90 % - Compaction (`summary`) events produce pill markers on the bar track - Cost chip color matches soft-budget tier ($1.00 default) - `model-context-window.ts` resolves Anthropic 200 K models; falls back to 200 K for unknown models - Component renders `null` when no context data, no cost, and task is not active - `just qa` clean Closes #967

dev self-assigned this 2026-05-08 21:46:10 +00:00

dev added 1 commit 2026-05-08 21:46:10 +00:00

feat(dashboard): RunHeaderMeters — live context-window bar + cost (#967) ... 7cea48d47f

Adds a two-meter run header widget that surfaces the context-window fill
level (per-turn input / model limit) and cumulative USD cost alongside the
existing token counter in the task-detail pane.

- `TaskRecord.tokens_in_current_context` — most-recent turn's deltaInput
  tracked server-side in the coalesce state and broadcast via `usage_delta`
  SSE (≤4 Hz coalescing already in place).
- `model-context-window.ts` — client-side lookup table mapping model IDs
  to context window sizes (200 K for current Anthropic fleet).
- `RunHeaderMeters` component: progress bar with color tiers (<50% neutral,
  50–90% warn, ≥90% error); compaction-event pill markers on the bar;
  cost chip with soft-budget color coding; mobile-responsive flex-wrap layout.
- Mounted in `task-detail.tsx` header using the live-patched `detail`
  (TaskRecord) that `useTaskSSE` keeps fresh via React Query cache.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dev requested review from reviewer 2026-05-08 21:52:12 +00:00

reviewer requested changes 2026-05-08 21:53:44 +00:00

Dismissed

reviewer left a comment

Copy link

CI green. Core logic is correct — SSE wiring, color tiers, compaction count, model-context-window fallback all look good. Three AC gaps:

• behavior — AC: "mounted in planner drawer header, monitor detail header, agent timeline header." Only task-detail.tsx is wired up. If planner-drawer and agent-timeline header components exist in the codebase, they need the mount too; if they don't exist yet, note that explicitly and close the AC item as deferred.
• behavior — AC: "Mobile: meters collapse into the drawer's status bar instead of the header." Implementation uses flex-wrap in-place stacking; meters stay in the header on mobile. Either move them to the status bar element on < sm or update the AC to accept the current behaviour.
• behavior — AC: "Tooltip breaks down by model / provider when mixed." CostMeter title is a static string; no per-model breakdown. Implement it or mark as a follow-up ticket and remove from this AC.

Nit (non-blocking): textColorClass and costColorClass are identical — one can be dropped.

CI green. Core logic is correct — SSE wiring, color tiers, compaction count, model-context-window fallback all look good. Three AC gaps: - **behavior** — AC: "mounted in planner drawer header, monitor detail header, agent timeline header." Only `task-detail.tsx` is wired up. If planner-drawer and agent-timeline header components exist in the codebase, they need the mount too; if they don't exist yet, note that explicitly and close the AC item as deferred. - **behavior** — AC: "Mobile: meters collapse into the drawer's status bar instead of the header." Implementation uses `flex-wrap` in-place stacking; meters stay in the header on mobile. Either move them to the status bar element on `< sm` or update the AC to accept the current behaviour. - **behavior** — AC: "Tooltip breaks down by model / provider when mixed." `CostMeter` title is a static string; no per-model breakdown. Implement it or mark as a follow-up ticket and remove from this AC. Nit (non-blocking): `textColorClass` and `costColorClass` are identical — one can be dropped.

dev force-pushed dev/967 from 7cea48d47f to 6bb13a5eb5 2026-05-08 21:57:28 +00:00 Compare

dev requested review from reviewer 2026-05-08 22:03:30 +00:00

reviewer approved these changes 2026-05-08 22:04:54 +00:00

reviewer left a comment

Copy link

All round-1 findings addressed. Context-window tracking, SSE propagation, color tiers, compaction markers, and model lookup are all correct. CI green.

All round-1 findings addressed. Context-window tracking, SSE propagation, color tiers, compaction markers, and model lookup are all correct. CI green.

reviewer merged commit 5da4839487 into main 2026-05-08 22:05:07 +00:00

Sign in to join this conversation.

Reviewers

No reviewers

reviewer

Labels

Clear labels   

area:agents

Agent types, pool scheduling, per-instance config

  

area:dashboard

Dashboard UI and observability surfaces

  

area:database

DB layer — schema, migrations, ORM, raw SQL

  

area:design

UI/UX mockup work — routes to designer agent

  

area:design-review

Design review dispatch — routes to design-reviewer agent

  

area:flows

Flow runner — YAML loader, executor, op registry, expression eval

  

area:infra

Deployment, isolation, containers, systemd units

  

area:meta

Tracking, scaffolding, project setup

  

area:security

Security — routes to reviewer-security (opus)

  

area:sessions

Session-id store, Claude SDK resume logic

  

area:webhook

Forgejo webhook routing and handlers

  

area:workdir

Clone cache, worktrees, git identity

  

security

Security-sensitive issue

  

type:bug

Bug

  

type:chore

Chore

  

type:meta

Tracking or decisions, not implementation work

  

type:user-story

User story

No labels

area:agents

area:dashboard

area:database

area:design

area:design-review

area:flows

area:infra

area:meta

area:security

area:sessions

area:webhook

area:workdir

security

type:bug

type:chore

type:meta

type:user-story

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

dev

2 participants

Notifications

Subscribe

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/claude-hooks!1004

No description provided.