feat(dashboard): relocate local-source pills to the tabbar with branded host icons - #121
Merged
Merged
Conversation
…ed host icons
The local-source health pills (previously three text chips, "Claude: ok" /
"Codex: transcripts: ok · ledger: ok" / "OpenCode: ok") lived inside the Usage
panel content, only visible on that one tab, and read as a redundant
claude/codex/opencode text label sitting next to an already-labeled status
word.
* Relocated to the sticky tabbar, right-aligned
- Moved #u-source-health out of panel-usage into <nav class="tabbar">,
right-aligned via margin-left:auto in the flex row — same line as
Overview/Usage/Observability, at the window edge.
- It now persists across tab switches once Usage data has loaded once,
instead of disappearing outside the Usage panel.
* Icon over text label, matching the Observability Live view
- Added sourceHostIcon() to client.mjs, reusing the exact brand marks from
live/client.mjs's hostIcon() (Anthropic asterisk, OpenAI Blossom, OpenCode
square) — a host now reads as the same glyph everywhere in the dashboard.
- Restored the circular badge treatment from the Live view (var(--bg) fill,
1px border, 32px badge / 20px glyph) rather than a bare floating icon —
without a background the marks had nothing to contrast against and were
unreadable at any size tried.
- Went through three size passes against the user's own screenshots before
landing here: 18/11 (icons invisible) -> 24/19 flat, no badge (still too
small/low-contrast) -> 32/20 with the restored badge (confirmed legible).
* Pill redesign
- Solid var(--panel-2) background matching the segmented tab control's own
look, no border — state shown via status-text color/weight (green/amber/
dim) rather than a colored outline, consistent with how the active tab
itself is indicated.
- Dropped the vertical divider between icon and status: icon/status padding
alone (10px+10px) already reads as enough separation without it.
- Dropped the static "local sources" text prefix — three branded icons need
no group label.
- Codex's combined transcripts+ledger detail (two sourceHealth fields
folded into one pill, per the prior PR) moved fully into the status
side's title tooltip; the visible pill just shows the worse status word.
Verified with `pnpm run check` after every pass (typecheck/lint/build/full
test suite green throughout) and against the running local dashboard via
Lightpanda (served-bundle parse gate, live DOM inspection, zero console
errors) before each round of user feedback.
2 of 3 tasks
pacphi
added a commit
that referenced
this pull request
Aug 6, 2026
…122) #121 relocated the local-source health indicator from text chips inside the Usage panel to branded icon pills in the dashboard's persistent tabbar, but shipped with no doc updates — three spots still described the old design (text chips, "above every Usage view", colored-outline styling), which would mislead anyone reading them after the fact rather than looking at the code. * USAGE-SCORECARD-METRICS.md: describes the new tabbar placement, the branded-icon-over-text-label design, and the icon-vs-status tooltip split (icon hover = what it monitors, status hover = full per-field detail). * TROUBLESHOOTING.md: "Inspect the local-source chips at the top of the dashboard Usage area" -> "Inspect the branded host-icon pills in the dashboard's tabbar (top of every view, right-aligned)". * ADR-0023 §7: rewritten for the pill/tabbar design; added a paragraph documenting the icon choice (reused verbatim from the Observability Live view's hostIcon()) and the size/contrast iteration that got there — two smaller, badge-less passes proved illegible against live screenshots before landing on the Live view's own 32px badge/20px glyph scale. Update note extended to cover this revision. One stray "chip" -> "pill" in Consequences. Verified: doc-citations test still passes (no file:line citations moved), markdown lint clean, `pnpm run check` green.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
<nav class="tabbar">, right-aligned to the window edge — same line as Overview/Usage/Observability, visible across tab switches once Usage data has loaded once.live/client.mjs'shostIcon(), reused verbatim: Anthropic asterisk, OpenAI Blossom, OpenCode square) instead of a "Claude"/"Codex"/"OpenCode" text label.var(--bg)fill + 1px border) from the Live view — without it the marks had no contrast to read against. Landed on 32px badge / 20px glyph after two smaller passes proved illegible against real screenshots.var(--panel-2)background matching the segmented tab control (no outline; state shown via status-text color/weight), divider between icon and status dropped (padding alone reads as enough separation), and the static "local sources" text prefix dropped.Iterated through several rounds against live screenshots of the running dashboard before landing here — see the commit body for the full size/contrast progression.
Test plan
pnpm run check(typecheck + lint + markdown lint + build + full test suite) green after every revisionnew Function(JS)gate), DOM structure inspected directly, zero console errors🤖 Generated with Claude Code