viewer: Lit chart spike + CSS tokens + charts.css extraction (#913)

* docs: TODO entry for embed-friendly charts with swappable data backend

Sketch a path to web-component-wrapped charts/sections that consume the
existing crates/dashboard/ JSON descriptors via a pluggable data
adapter, enabling both an in-browser WASM backend and a Datastar/SSE
backend without forking the frontend.

* viewer: <rezolus-chart> Lit web component spike

Vendor lit@3.2.1 (16 KB self-contained ESM bundle) into
src/viewer/assets/lib/lit/ and add a minimal <rezolus-chart> custom
element that consumes the Plot descriptor shape produced by
crates/dashboard/ with inline series data ([[timestamps_ms], [values]]).

Scope is deliberately narrow — validates that a Lit component can wrap
the existing echarts global, render inside a Shadow DOM root, and react
to property updates. Future adapters (HTTP, WASM, SSE) will feed the
same .plot property without changing the component contract.

Demo at /lib/embed/demo.html mounts the component twice (synthetic
single-series and an empty-data placeholder) against the existing
lib/charts/echarts.min.js global. No build step introduced; everything
loads as raw modules from /lib like the rest of the viewer assets.

Not browser-verified in this sandbox (rezolus binary not built).

* viewer: promote chart palette to CSS custom properties

Move the three palettes that were hardcoded in colormap.js into the
:root token block in style.css:

  --chart-blue … --chart-purple   (10 series accent colors)
  --chart-1   … --chart-10        (default cycling palette,
                                   d3 schemeCategory10)
  --cgroup-1  … --cgroup-16       (hash-indexed cgroup palette,
                                   d3 schemeCategory20 minus the
                                   muted brown + gray pairs)

colormap.js reads these via getComputedStyle at access time (already
the pattern for theme-sensitive tokens) with the previous hex values
retained as fallbacks. The COLORS Proxy now maps every key to a CSS
variable; no more split between theme-sensitive and series-constant
branches.

Two side-effects worth noting:
  * style.css:993 referenced var(--chart-cyan) but the token was never
    declared — the linear-gradient fell back to nothing. Now resolved
    by the new --chart-cyan declaration.
  * Embedders (incl. the upcoming <rezolus-chart>) can override any
    palette slot via host-page CSS without touching JS.

No light-theme overrides for these tokens — series colors stay
theme-invariant, matching previous behavior. JS-side colormap ramps
(viridis, inferno, RdYlGn, diverging blue/green) deliberately remain
as JS constants since they're perceptual ramps, not theme decisions.

* viewer: extract chart-specific styles into charts.css

Move 8 chart-related sections (1136 lines) out of style.css into a new
lib/charts.css, loaded immediately after style.css from both
src/viewer/assets/index.html and site/viewer/index.html so the cascade
is preserved:

  - Chart Groups
  - Chart Cards
  - Single Chart View
  - Cgroups Section
  - CPU Topology Diagram
  - Compare mode (3 sub-sections: side-by-side/diff, header badge, landing)

style.css keeps design tokens, light-theme overrides, app chrome (nav,
sidebar, modals, toasts), Selection Section, Query Explorer, System
Info Section, and the responsive @media blocks. A few intentionally
borderline rules remain in style.css where extracting them would
fragment a coherent block: chart-wrapper-unavailable styling lives
inside Selection Section, compare-badge :has() rules live inside the
TopNav block, mobile @media overrides for chart classes stay inside
the responsive section. Worth a follow-up if we ever want a fully
self-contained charts.css.

Site-viewer (WASM/static) gets the same wiring. New symlinks under
site/viewer/lib/ for charts.css, lit/, and embed/ mirror the in-place
files from src/viewer/assets/lib/.

No selector renames, no rule changes — pure relocation. Visual output
should be byte-identical (not browser-verified in this sandbox).

* viewer: wire embed demo to a real plot from the rezolus self-report

Replace the synthetic single-series demo with the Rezolus → Resource
Usage → CPU % plot — the first plot of the rezolus self-report section
defined in crates/dashboard/src/dashboard/rezolus.rs.

Behavior:
  - On load, fetches /data/rezolus.json from same origin (works when
    the page is served by a viewer process).
  - If the response has series data, renders it. Status banner
    confirms the data-point count.
  - If the descriptor is there but data is empty (no recording
    loaded), synthesizes a series on top of the real descriptor.
  - If the fetch fails entirely (page opened standalone, no viewer),
    falls back to a hand-authored descriptor matching what rezolus.rs
    would emit, plus synthetic data, so the demo still renders.

rezolus-chart.js: multiply timestamps by 1000 before passing to
echarts. PromQL emits seconds-since-epoch; echarts time axis expects
ms. line.js already does the same conversion (line 72) — moving it
into the component means the .plot property contract is now the
verbatim Plot JSON shape that crates/dashboard/ produces.

* viewer: fix orphan separator + unreachable systeminfo on mobile

Two narrow-viewport bugs:

1. The mobile @media block hides .query-explorer-link but leaves the
   .sidebar-separator that precedes it in the DOM, producing a
   visible horizontal divider that separates nothing. Extend the same
   rule with :has(+ .query-explorer-link) so the orphan separator is
   hidden alongside its link.

2. #sidebar uses `height: calc(100vh - var(--header-height))`. On iOS
   Safari (and other mobile browsers with retracting chrome) 100vh
   includes the area beneath the address bar, so the sidebar's bottom
   edge sits below the visible viewport and the last items (System
   Info, Metadata) become unreachable. Add a 100dvh declaration as
   a second value, so browsers that support dvh use the visible
   viewport while older ones fall back to vh. Also pad the bottom by
   env(safe-area-inset-bottom) for iOS home-indicator clearance.

:has() and dvh are already used in the codebase (charts.css and
elsewhere), so no support-matrix change.

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: thinkingfish

docs/TODOs.md

@@ -37,3 +37,9 @@ The system-wide `scheduler_offcpu` is a histogram; the per-cgroup `cgroup_schedu
 Surface boot-time and runtime configuration that affects performance posture: CPU isolation (`isolcpus`, `nohz_full`, cgroup `cpuset`), block device tuning (IO scheduler, completion affinity, NVMe queue mode), and IRQ affinity.
 
 **Why it matters.** A host can be misconfigured against its intended QoS posture in ways that are silent until traffic hits a corner case. Pulling configuration into the metrics stream lets dashboards flag drift (e.g., "completion just landed on a CPU listed in `isolcpus`") and lets fleets compare intent against reality at scale.
+
+## Embed-friendly charts with swappable data backend
+
+Wrap chart/section rendering as web components (e.g. `<rezolus-chart>`, `<rezolus-section>`) that take a `Plot`/`View` descriptor (already produced by `crates/dashboard/`) plus a pluggable data adapter. Two adapters: a WASM adapter that resolves `promql_query` locally against an in-browser TSDB (small, portable, GitHub Pages friendly), and a Datastar/SSE adapter that subscribes to a server-resolved stream (large, live data). Same descriptor and same component API on both sides.
+
+**Why it matters.** It makes Rezolus charts droppable into other dashboards or docs pages without iframing, and gives a clean split between the static file-mode viewer and a future streaming server viewer without forking the frontend.

site/viewer/index.html

@@ -17,6 +17,7 @@
     <script src="lib/charts/echarts.min.js"></script>
     <script type="module" src="lib/script.js"></script>
     <link rel="stylesheet" href="lib/style.css" />
+    <link rel="stylesheet" href="lib/charts.css" />
 </head>
 
 <body>

site/viewer/lib/charts.css

@@ -0,0 +1 @@
+../../../src/viewer/assets/lib/charts.css

site/viewer/lib/embed

@@ -0,0 +1 @@
+../../../src/viewer/assets/lib/embed

site/viewer/lib/lit

@@ -0,0 +1 @@
+../../../src/viewer/assets/lib/lit

src/viewer/assets/index.html

@@ -26,6 +26,7 @@
 
     <!-- Styles -->
     <link rel="stylesheet" href="lib/style.css" />
+    <link rel="stylesheet" href="lib/charts.css" />
 </head>
 
 <body>