Repository navigation
Restyle the UI to follow the CloudCLI host theme (from ango-dev fork) - #8
Merged
Merged
Conversation
Colours read the host's CSS variables (background, card, border, input, foreground, muted-foreground, primary, accent, ring, destructive) with light/dark fallbacks for hosts that lack them. Fonts switch to the host's Geist / Geist Mono / Source Serif 4, corners derive from --radius, danger uses --destructive, and success/warning are tuned for 4.5:1 contrast in both modes. The refresh button gains hover and focus-visible states. Appearance only: no behaviour, server or manifest changes.
- Replace the large serif page title with a header bar like the host's built-in Browser tab: icon, title, plan badge, subtitle and a ghost refresh icon button that spins during a full load. - Update colour fallbacks to the host's exact token values, including the darker, neutral dark-mode border. - Hover styles apply only on devices with a real pointer, as in the host. - Lay out by container width so the panel fits phones and a narrowed workspace: stats drop to two columns, the model and project tables stack, and padding tightens. - The header stays fixed while the body scrolls, and the body keeps its scroll position across re-renders. The plan badge moves to the header; the "updated" age stays on the plan limits card. The tab keeps its "Claude Usage" name. (cherry picked from ango-dev/cloudcli-plugin-claude-usage@53b4809)
The day's tokens and cost were only in a title tooltip, which touch screens never show. Hovering a bar with a mouse, tapping or dragging a finger along the bars, or using the arrow keys once the chart has focus now marks that day's column and puts its date, tokens and cost in the line under the chart, in place of the date range. Leaving the chart, tapping elsewhere or Escape goes back to the range. Also drops a stale duplicate of the State interface.
There was a problem hiding this comment.
🟡 Changes recommended
An unresolved moderate accessibility issue remains, where periodic re-renders replace the chart's DOM and drop keyboard focus, interrupting arrow-key navigation until the user re-focuses the chart.
1 open issue
What changed in this PR
This PR restyles the Claude Usage plugin's UI (src/index.ts only) to inherit the CloudCLI host theme instead of hard-coded colours. Colours now read host CSS variables (--background, --card, --primary, --destructive, …) with light/dark fallbacks, fonts switch to the host's Geist / Geist Mono, and corners derive from --radius. It also reworks the layout into a fixed header + scrollable body, adds container-query responsiveness, and introduces an interactive chart readout (pointer hover, touch drag, and keyboard navigation) to replace the touch-invisible title tooltip. Server, data, and API logic are untouched, and the 5‑minute poll / 1‑minute re-render cadence from #7 is preserved.
Changes:
- Theme refactored to resolve host HSL CSS variables via a
FALLBACKSmap +radius()helper, with tuned success/warning colours for 4.5:1 contrast. - Header/body split in
mount()(sticky header with icon, title, plan badge, spinning refresh button; scrollable reused body), plus a<style>block of classes and container queries. - New chart interaction:
activeDaystate,chartReadout(), and pointer/touch/keyboard handlers with matching cleanup for the addedwindowlisteners.
| File | Description |
|---|---|
| src/index.ts | Rewrites the plugin UI to follow the host theme (CSS variables, fonts, radius), splits layout into a fixed header and scrollable body, adds responsive container-query styles, and implements an interactive daily-usage chart with pointer, touch, and keyboard navigation plus listener cleanup. |
Review effort: Balanced
Comment on lines
+339
to
342
| body.innerHTML = ` | ||
| ${renderLive(c, state.live, state.liveError)} | ||
| ${renderHistory(c, state.history, state.historyError)} | ||
| ${renderHistory(c, state.history, state.historyError, state.activeDay)} | ||
| `; |
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
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.
Brings in the UI restyle from the ango-dev fork. The four commits are cherry-picked with ango-dev kept as the author. Only
src/index.tschanges; the server, data and API logic are untouched.What changes
--background,--card,--border,--primary,--destructive, …), with light and dark fallbacks. Fonts switch to the host's Geist / Geist Mono / Source Serif 4, and corners follow--radius. Success and warning colours are tuned for 4.5:1 contrast in both modes.titletooltip, which touch screens never show.Differences from the fork
Testing
npm run build: no type errorsnpm test: 33/33 pass🤖 Generated with Claude Code