From f8ae821240f33d615a9e91cdfeb6c026b7970782 Mon Sep 17 00:00:00 2001 From: Claude Sonnet 5 Date: Sat, 4 Jul 2026 08:50:46 +0000 Subject: feat(web,api): add Budget/Roles dashboard -- final phase of the harness redesign (Phase 9b) Two new tabs, matching Phase 9a's conventions: Budget (per-provider spend meters, escalation funnel, spend-over-time) and Roles (version history, draft activation, readable escalation-ladder view) -- the human-facing surface for the token-husbanding value proposition and the Phase 5/8 versioned role-config system. New backend (minimal, additive, matching existing endpoint conventions -- unauthenticated like /api/budget and /api/roles/*): - internal/storage/dashboard.go: QueryEscalationFunnel (executions grouped by escalation_rung + agent, count + cost) and QuerySpendTimeseries (cost per provider bucketed hourly/daily, mirroring QueryDashboardStats' existing bucketing expressions). Documented honestly: rung 0 is not exclusively "resolved locally" -- escalation_rung defaults to 0 uniformly, so non-role-typed executions (which never climb a ladder) land there too, alongside role-typed tasks genuinely resolved at tier 0. A role-only variant would need a join against tasks.config_json with no queryable role column on executions -- intentionally out of scope. - internal/api/dashboard.go: GET /api/escalation-funnel, GET /api/spend-timeseries (both ?window=5h|24h|7d|, default 24h). - internal/storage.ListRoleNames + GET /api/roles: the "which roles exist" gap -- there was no way to discover role names before this, only to list versions for a role you already knew the name of. Chart-form decisions (dataviz skill, invoked before writing chart code): horizontal stacked bar for the escalation funnel (rung order already encodes the funnel shape positionally; color only needed for per-provider segments within each rung); multi-line for spend-over-time; a fixed-order categorical palette from the skill's validated palette.md slots for provider identity (re-validated against this app's dark surface, passing); a separate status (good/warning/critical) palette for budget meters, deliberately distinct from both --state-* and the provider palette. Caught and fixed a real bug during visual QA: converging near-zero end-labels on the spend chart were overlapping (an anti-pattern the skill explicitly flags) -- fixed with a 14px minimum-gap check before direct-labeling an endpoint, leaning on the legend/tooltip otherwise. Verified with a real running server, real seeded data (65 executions across rungs 0-2 with a realistic provider mix, 2 roles with active/draft/retired role_configs versions written directly via internal/storage), and a real headless-browser session (reusing Phase 9a's Chromium/proxy scaffinding): confirmed correct rung totals/percentages, provider legends, a 3-line spend chart, live window-selector re-render, correct active-version highlighting on the role panel, and a real Activate click on a draft version -- verified via both DOM re-render and a direct backend GET that it truly persisted. go build/vet/test -race -count=1 all pass, full suite. node --test web/test/*.mjs: 291/291 passing (16 new). Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01V1moSNCJRcP6kykA4tyUSs --- web/style.css | 299 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 299 insertions(+) (limited to 'web/style.css') diff --git a/web/style.css b/web/style.css index b11faf6..a5fefb7 100644 --- a/web/style.css +++ b/web/style.css @@ -16,6 +16,14 @@ --text: #e2e8f0; --text-muted: #94a3b8; --accent: #38bdf8; + + /* Approximate solid chart surface (this app has no opaque surface token — + --surface/--bg are translucent over the rotating background image). + Used as the SVG chart background, unlabeled figure, and marker rings + (see marks-and-anatomy.md's "surface ring" spec) for the Phase 9b + budget/escalation charts; the dataviz palette validator was run against + this exact hex. */ + --chart-surface: #0f172a; } /* Reset */ @@ -2408,3 +2416,294 @@ dialog label select:focus { border-radius: 0; } } + +/* ── Budget & Escalation dashboard (Phase 9b) ────────────────────────────── + Provider identity uses a fixed categorical palette (PROVIDER_COLORS in + app.js), deliberately distinct from --state-* — see app.js's doc comment + for why and how it was validated. ── */ + +.provider-legend { + display: flex; + flex-wrap: wrap; + gap: 0.4rem 1rem; + margin-top: 0.6rem; + font-size: 0.75rem; + color: var(--text-muted); +} + +.provider-legend-item { + display: flex; + align-items: center; + gap: 0.35rem; +} + +.provider-legend-swatch { + display: inline-block; + width: 10px; + height: 10px; + border-radius: 2px; + flex-shrink: 0; +} + +/* Budget meters */ +.budget-meters { + display: flex; + flex-direction: column; + gap: 0.85rem; +} + +.budget-meter-row { + display: flex; + flex-direction: column; + gap: 0.3rem; +} + +.budget-meter-label { + display: flex; + justify-content: space-between; + font-size: 0.82rem; +} + +.budget-meter-label > span:first-child { + font-weight: 600; + text-transform: capitalize; +} + +.budget-meter-value { + color: var(--text-muted); + font-size: 0.78rem; +} + +.budget-meter-track { + height: 10px; + border-radius: 999px; + background: var(--border); + overflow: hidden; +} + +.budget-meter-fill { + height: 100%; + border-radius: 999px; + transition: width 0.2s; +} + +/* Window selector shared by the funnel + spend-over-time charts */ +.dashboard-window-row { + margin: 0.5rem 0 1.5rem; + font-size: 0.85rem; + color: var(--text-muted); +} + +.dashboard-window-select { + margin-left: 0.35rem; +} + +.funnel-note { + margin-bottom: 0.75rem; + max-width: 60ch; +} + +/* Escalation funnel */ +.funnel-chart { + display: flex; + flex-direction: column; + gap: 0.6rem; +} + +.funnel-row { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.funnel-row-label { + width: 60px; + flex-shrink: 0; + font-size: 0.8rem; + font-weight: 600; + color: var(--text-muted); +} + +.funnel-track-outer { + flex: 1; + min-width: 0; +} + +.funnel-track { + display: flex; + height: 22px; + border-radius: 4px; + overflow: hidden; + min-width: 4px; +} + +.funnel-seg { + height: 100%; +} + +/* The 2px surface-color gap between stacked segments (see + marks-and-anatomy.md's "surface gap" spec) — border rather than margin so + it doesn't shrink the flex-grow proportions. */ +.funnel-seg + .funnel-seg { + border-left: 2px solid var(--chart-surface); +} + +.funnel-count { + width: 90px; + flex-shrink: 0; + text-align: right; + font-size: 0.78rem; + color: var(--text-muted); + white-space: nowrap; +} + +/* Spend-over-time line chart */ +.spend-chart-wrap { + margin-top: 0.5rem; +} + +.spend-chart-svg { + background: var(--chart-surface); + border-radius: 8px; + display: block; +} + +.spend-chart-axis { + stroke: var(--border); + stroke-width: 1; +} + +.spend-chart-tick { + fill: var(--text-muted); + font-size: 9px; +} + +.spend-chart-label { + fill: var(--text-muted); + font-size: 9px; +} + +.spend-chart-dot { + stroke: var(--chart-surface); + stroke-width: 2; +} + +/* Role/config management panel */ +.role-card { + background: var(--surface); + border: 1px solid var(--border); + border-radius: 8px; + padding: 1rem 1.25rem; + margin-bottom: 1rem; +} + +.role-card-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.75rem; + margin-bottom: 0.5rem; +} + +.role-card-header h3 { + font-size: 1rem; + font-weight: 700; + text-transform: capitalize; +} + +.role-active-badge { + font-size: 0.72rem; + font-weight: 600; + padding: 0.2em 0.6em; + border-radius: 999px; + background: var(--state-completed); + color: #0f172a; + white-space: nowrap; +} + +.role-active-badge--none { + background: var(--border); + color: var(--text-muted); +} + +.role-ladder-section { + margin-bottom: 0.85rem; +} + +.escalation-ladder-list { + list-style: none; + display: flex; + flex-direction: column; + gap: 0.35rem; + margin-top: 0.35rem; +} + +.escalation-ladder-item { + display: flex; + flex-wrap: wrap; + align-items: baseline; + gap: 0.5rem; + font-size: 0.82rem; + padding: 0.35rem 0.6rem; + background: rgba(148, 163, 184, 0.08); + border-radius: 6px; +} + +.escalation-ladder-tier { + font-weight: 700; + min-width: 3.5rem; +} + +.escalation-ladder-candidates { + font-family: ui-monospace, monospace; + font-size: 0.78rem; +} + +.escalation-ladder-meta { + color: var(--text-muted); + font-size: 0.75rem; + margin-left: auto; +} + +.role-version-list { + display: flex; + flex-direction: column; + gap: 0.4rem; +} + +.role-version-row { + display: flex; + align-items: center; + gap: 0.6rem; + font-size: 0.82rem; + padding: 0.4rem 0.1rem; + border-top: 1px solid var(--border); +} + +.role-version-num { + font-weight: 700; + min-width: 2.5rem; +} + +.role-version-status { + font-size: 0.68rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.03em; + padding: 0.15em 0.5em; + border-radius: 999px; + color: #0f172a; +} + +.role-version-status--active { background: var(--state-completed); } +.role-version-status--draft { background: var(--state-queued); } +.role-version-status--retired { background: var(--border); color: var(--text-muted); } + +.role-version-meta { + color: var(--text-muted); + font-size: 0.75rem; +} + +.role-version-row .btn-primary.btn-sm { + margin-left: auto; +} -- cgit v1.2.3