feat(web): server-load readout redesign — 7 switchable style candidates#39
Merged
Conversation
…d variants Scaffolding for the server-load readout redesign: a sidebarHostStatsStyle client setting, a Server load style picker in Settings -> Features, a variant registry under components/host-stats/ (classic extracted from Sidebar.tsx + 7 placeholder variants to be filled in by design agents), and useHostStatsWithHistory providing a rolling 2-minute sample window for sparkline/trend styles. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Each variant was written by a different model against the same brief (bigger, colorful, load-ramped via success/warning/destructive tokens): - signature fable-5 dot-on-track precision faders + peak ticks - bars opus-4.8 stacked color-ramped meter bars - sparkline sonnet-5 CPU history sparkline + hero figure - segments gpt-5.6-sol 10-cell LED meters with peak afterglow - rings glm-5.2 dual donut gauges - equalizer kimi-k2.7-code 24-bar CPU history equalizer - badge gemini-3.1-pro tinted status pill with pulsing dot Also fixes the pre-existing DesktopClientSettings round-trip test broken by #34 (fixture was missing fileExplorerShowDotfiles). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Visiting Settings unmounts the sidebar; without this the sparkline/ equalizer history restarted from one sample every time you came back. Cache the rolling window at module scope; explicit disable still clears. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Live captures from an isolated instance under generated load waves, 8 styles x 2 themes, plus the labeled comparison sheet used in the PR. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
github-actions
Bot
added
size:XL
vouch:trusted
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.
What
Redesign candidates for the sidebar server-load readout (the
CPU 12% MEM 3.2/15.6Gline next to Settings). The old one was tiny and colorless; this PR turns the readout into a pluggable style and ships 7 redesigns plus the original, switchable live from Settings → Features → Sidebar → Server load style (per device, default staysclassic).Each candidate was designed by a different model against the same brief (bigger, color required, load-ramped via the app's
success/warning/destructivetokens, ≤ ~150×28px, both themes):signaturebarssparklinesegmentsringsequalizerbadgeComparison
All shots are the live readout on this branch under generated CPU load waves, in both themes:
Full-size app context shots
Light:
Dark:
Plumbing
sidebarHostStatsStyleclient setting (contracts) + style picker row in Features settings.apps/web/src/components/host-stats/— variant registry;classicextracted fromSidebar.tsxunchanged.useHostStatsWithHistory— rolling ~2-minute sample window (24 × 5s) for the history-driven styles, cached at module scope so it survives sidebar remounts (e.g. visiting Settings and coming back).DesktopClientSettingsround-trip test broken by feat(web): show dotfiles in the file explorer and allow changing its root (#33) #34 (fixture was missingfileExplorerShowDotfiles).Picking a winner
Everything ships behind the picker, so this can merge as-is and the favorite can be promoted to default (and the rest culled) in a follow-up once you've lived with them. The screenshots under
docs/host-stats-variants/can be deleted at that point too.🤖 Generated with Claude Code