npm - @vimoxshah/tokenflow - Versions diffs - 1.1.0 - Mend

@vimoxshah/tokenflow 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (101) hide show

package/CONTRIBUTING.md +84 -0
package/LICENSE +21 -0
package/README.md +250 -0
package/Refresh & Open Dashboard.command +22 -0
package/SECURITY.md +42 -0
package/bin/tokenflow.js +1342 -0
package/docs/architecture.md +193 -0
package/docs/cli.md +390 -0
package/docs/configuration.md +281 -0
package/docs/creating-provider.md +262 -0
package/docs/data-model.md +213 -0
package/docs/getting-started.md +266 -0
package/docs/live-mode.md +199 -0
package/docs/media/architecture-hero.svg +86 -0
package/docs/media/cost-editorial-dark.png +0 -0
package/docs/media/health-terminal-light.png +0 -0
package/docs/media/menubar-dark.png +0 -0
package/docs/media/menubar-light.png +0 -0
package/docs/media/models-terminal-dark.png +0 -0
package/docs/media/overview-aurora-dark.png +0 -0
package/docs/media/time-aurora-light.png +0 -0
package/docs/providers.md +309 -0
package/docs/skill.md +64 -0
package/docs/troubleshooting.md +207 -0
package/examples/config.example.yaml +92 -0
package/examples/demo-data/README.md +38 -0
package/examples/demo-data/sample-usage.csv +11 -0
package/package.json +74 -0
package/scripts/build-dmg.sh +33 -0
package/scripts/build-menubar-app.sh +67 -0
package/scripts/lint.js +111 -0
package/scripts/validate-install.js +140 -0
package/skills/tokenflow/SKILL.md +392 -0
package/skills/tokenflow/examples/config.yaml +92 -0
package/skills/tokenflow/examples/generic-mapping.json +26 -0
package/skills/tokenflow/examples/session-transcript.md +191 -0
package/skills/tokenflow/providers/adapter-template.js +135 -0
package/skills/tokenflow/providers/detection-matrix.md +142 -0
package/skills/tokenflow/schemas/config.schema.json +107 -0
package/skills/tokenflow/schemas/normalized-record.json +63 -0
package/src/analytics/aggregate.js +247 -0
package/src/analytics/anomalies.js +222 -0
package/src/analytics/capacity.js +278 -0
package/src/analytics/comparison.js +96 -0
package/src/analytics/dimensions.js +230 -0
package/src/analytics/efficiency.js +138 -0
package/src/analytics/forecast.js +202 -0
package/src/analytics/index.js +327 -0
package/src/analytics/insights.js +283 -0
package/src/analytics/milestones.js +91 -0
package/src/analytics/peak.js +106 -0
package/src/analytics/productivity.js +166 -0
package/src/analytics/token-usage.js +267 -0
package/src/commands/diagnostics.js +88 -0
package/src/commands/digest.js +155 -0
package/src/commands/models-compare.js +96 -0
package/src/core/budget.js +142 -0
package/src/core/bundle.js +191 -0
package/src/core/config.js +202 -0
package/src/core/delivery.js +109 -0
package/src/core/geo.js +99 -0
package/src/core/ingest.js +457 -0
package/src/core/interface-map.js +55 -0
package/src/core/jsonl.js +124 -0
package/src/core/live-status.js +417 -0
package/src/core/model-map.js +157 -0
package/src/core/notify.js +83 -0
package/src/core/pricing.js +288 -0
package/src/core/prompt-analytics.js +127 -0
package/src/core/registry.js +107 -0
package/src/core/restore.js +261 -0
package/src/core/schedule.js +120 -0
package/src/core/schema.js +316 -0
package/src/core/sqlite.js +96 -0
package/src/core/store.js +493 -0
package/src/core/sync.js +151 -0
package/src/core/units.js +147 -0
package/src/core/validate.js +123 -0
package/src/core/watch.js +287 -0
package/src/core/yaml.js +209 -0
package/src/export/bundler.js +107 -0
package/src/export/csv.js +100 -0
package/src/export/html-snapshot.js +101 -0
package/src/export/menubar.js +158 -0
package/src/index.js +18 -0
package/src/providers/anthropic/index.js +294 -0
package/src/providers/cline/index.js +120 -0
package/src/providers/cursor/index.js +143 -0
package/src/providers/generic/index.js +268 -0
package/src/providers/git/index.js +188 -0
package/src/providers/headroom/index.js +114 -0
package/src/providers/hermes/index.js +299 -0
package/src/providers/mock/index.js +117 -0
package/src/providers/openai/index.js +370 -0
package/src/providers/opencode/index.js +245 -0
package/src/sdk.js +46 -0
package/src/server/server.js +264 -0
package/src/ui/app.js +2473 -0
package/src/ui/charts.js +925 -0
package/src/ui/index.html +42 -0
package/src/ui/styles.css +644 -0

package/src/ui/index.html ADDED Viewed

@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="dark light">
+<title>Tokenflow</title>
+<link rel="stylesheet" href="/src/ui/styles.css">
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='7' fill='%233987e5'/><path d='M7 22V13M13 22V8M19 22V16M25 22V11' stroke='white' stroke-width='2.6' stroke-linecap='round'/></svg>">
+</head>
+<body>
+<header class="top">
+  <div class="top-inner">
+    <div class="brand">
+      <h1><span class="dot" id="health-dot" title="Data health"></span> Tokenflow</h1>
+      <span class="sub" id="coverage">loading…</span>
+    </div>
+    <div class="spacer"></div>
+    <div id="header-actions" style="display:flex;gap:8px;align-items:center;flex-wrap:wrap"></div>
+  </div>
+</header>
+<div class="wrap">
+  <div id="banners"></div>
+  <div id="filters" class="filters"></div>
+  <div id="crumbs" class="crumbs"></div>
+  <nav class="tabs" id="tabs" role="tablist"></nav>
+  <main id="view" style="padding-top:14px"></main>
+  <footer class="muted" style="padding:32px 0 0;font-size:11.5px;line-height:1.7" id="footer"></footer>
+</div>
+<dialog id="modal">
+  <div class="d-head"><h2 id="modal-title">…</h2><div class="spacer" style="flex:1"></div>
+    <button class="btn ghost sm" id="modal-close">Close</button></div>
+  <div class="d-body" id="modal-body"></div>
+  <div class="d-foot" id="modal-foot"></div>
+</dialog>
+<noscript><div class="banner">This dashboard needs JavaScript. All computation is local — nothing is sent anywhere.</div></noscript>
+<script type="module" src="/src/ui/app.js"></script>
+</body>
+</html>

package/src/ui/styles.css ADDED Viewed

@@ -0,0 +1,644 @@
+/* =========================================================================
+   Tokenflow — design system
+   Two independent axes on <html>:
+     data-mode = dark | light     ink, surfaces polarity, series steps
+     data-skin = aurora | terminal | editorial
+   The categorical series slots belong to the MODE, not the skin: they were run
+   through the dataviz validator (lightness band, chroma floor, adjacent CVD
+   separation, normal-vision floor, contrast) against each skin's actual chart
+   surface, and all three dark surfaces and all three light surfaces pass with
+   the same eight steps. A skin therefore restyles the room, never the data —
+   which is the point: switching theme must not change what a colour means.
+   Three light-mode slots (aqua, yellow, magenta) sit under 3:1 on a light
+   surface. That is the documented relief case, and the relief ships: every
+   chart in this app has a table twin and direct labels.
+   ========================================================================= */
+:root {
+  /* --- mode-independent ------------------------------------------------- */
+  --sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
+  --display: var(--sans);   /* headings */
+  --figure: var(--sans);    /* big numerals */
+  --radius: 12px;
+  --radius-sm: 8px;
+  /* Density: a skin is allowed to change the amount of air, not the data. */
+  --pad-card: 14px 16px;
+  --gap-grid: 14px;
+  --fig-scale: 1;
+  --sec-space: 26px;
+  --glow: none;
+  --hero-glow: none;
+  --tracking-h: -0.015em;
+  /* status (reserved — never used for a series, never themed) ------------- */
+  --good:     #0ca30c;
+  --warning:  #fab219;
+  --serious:  #ec835a;
+  --critical: #d03b3b;
+}
+/* ======================================================== mode: series ==== */
+:root, :root[data-mode='dark'] {
+  color-scheme: dark;
+  --series-1: #3987e5; /* blue    */
+  --series-2: #d95926; /* orange  */
+  --series-3: #199e70; /* aqua    */
+  --series-4: #c98500; /* yellow  */
+  --series-5: #d55181; /* magenta */
+  --series-6: #008300; /* green   */
+  --series-7: #9085e9; /* violet  */
+  --series-8: #e66767; /* red     */
+  --seq-1: #184f95;
+  --seq-2: #1c5cab;
+  --seq-3: #256abf;
+  --seq-4: #2a78d6;
+  --seq-5: #3987e5;
+  --seq-6: #5598e7;
+  --seq-7: #86b6ef;
+}
+:root[data-mode='light'] {
+  color-scheme: light;
+  --series-1: #2a78d6;
+  --series-2: #eb6834;
+  --series-3: #1baf7a;
+  --series-4: #eda100;
+  --series-5: #e87ba4;
+  --series-6: #008300;
+  --series-7: #4a3aa7;
+  --series-8: #e34948;
+  --seq-1: #cde2fb;
+  --seq-2: #9ec5f4;
+  --seq-3: #6da7ec;
+  --seq-4: #3987e5;
+  --seq-5: #2a78d6;
+  --seq-6: #1c5cab;
+  --seq-7: #104281;
+}
+/* ============================================== skin: aurora (default) ==== */
+/* Deep indigo-slate, layered cards, one luminous accent, a restrained glow
+   behind the header. The default because it reads as a product rather than a
+   tool, without tinting the data. */
+:root, :root[data-skin='aurora'] {
+  --plane:          #0a0d14;
+  --surface-1:      #111624;
+  --surface-2:      #171d2e;
+  --surface-3:      #1f2637;
+  --text-primary:   #f3f6fc;
+  --text-secondary: #a7b2c9;
+  --text-muted:     #78829a;
+  --grid:           #1e2436;
+  --axis:           #2b3348;
+  --border:         rgba(154, 172, 255, 0.11);
+  --border-strong:  rgba(154, 172, 255, 0.20);
+  --accent:         #8f9dff;
+  --accent-solid:   #4a5ae0;
+  --accent-ink:     #ffffff;
+  --radius: 14px;
+  --radius-sm: 9px;
+  --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 14px 40px rgba(4, 8, 20, .45);
+  --glow:
+    radial-gradient(1100px 460px at 8% -10%, rgba(94, 114, 255, .17), transparent 62%),
+    radial-gradient(820px 420px at 92% -14%, rgba(25, 158, 112, .11), transparent 60%);
+  --hero-glow: radial-gradient(460px 220px at 8% 0%, rgba(94, 114, 255, .22), transparent 72%);
+}
+:root[data-skin='aurora'][data-mode='light'] {
+  --plane:          #f5f7fc;
+  --surface-1:      #ffffff;
+  --surface-2:      #f1f4fa;
+  --surface-3:      #e6eaf4;
+  --text-primary:   #0d1220;
+  --text-secondary: #4b5468;
+  --text-muted:     #767f92;
+  --grid:           #e4e8f1;
+  --axis:           #c7cddb;
+  --border:         rgba(13, 18, 32, 0.09);
+  --border-strong:  rgba(13, 18, 32, 0.17);
+  --accent:         #3d4dd6;
+  --accent-solid:   #3d4dd6;
+  --accent-ink:     #ffffff;
+  --shadow: 0 1px 2px rgba(16, 24, 48, .06), 0 12px 32px rgba(16, 24, 48, .08);
+  --glow: radial-gradient(1100px 460px at 8% -10%, rgba(94, 114, 255, .10), transparent 62%);
+  --hero-glow: radial-gradient(420px 180px at 12% 0%, rgba(94, 114, 255, .09), transparent 70%);
+}
+/* ======================================================= skin: terminal ==== */
+/* Near-black, hairlines, mono numerals, one electric accent. An instrument. */
+:root[data-skin='terminal'] {
+  --plane:          #06070a;
+  --surface-1:      #0c0e13;
+  --surface-2:      #11141a;
+  --surface-3:      #171b22;
+  --text-primary:   #eef2f6;
+  --text-secondary: #9aa4ad;
+  --text-muted:     #6b737c;
+  --grid:           #171b22;
+  --axis:           #262c34;
+  --border:         rgba(255, 255, 255, 0.09);
+  --border-strong:  rgba(255, 255, 255, 0.16);
+  --accent:         #24d67e;
+  --accent-solid:   #24d67e;
+  --accent-ink:     #04140b;
+  --radius: 5px;
+  --radius-sm: 4px;
+  --shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 10px 26px rgba(0, 0, 0, .55);
+  --glow: none;
+  --hero-glow: none;
+  --display: var(--mono);
+  --figure: var(--mono);
+  --tracking-h: 0.01em;
+  --pad-card: 11px 13px;
+  --gap-grid: 9px;
+  --fig-scale: 0.94;
+  --sec-space: 20px;
+}
+:root[data-skin='terminal'][data-mode='light'] {
+  --plane:          #f7f8f9;
+  --surface-1:      #ffffff;
+  --surface-2:      #f2f4f5;
+  --surface-3:      #e8eaec;
+  --text-primary:   #0a0c0f;
+  --text-secondary: #494f57;
+  --text-muted:     #6f767e;
+  --grid:           #e8eaec;
+  --axis:           #c9cdd2;
+  --border:         rgba(10, 12, 15, 0.10);
+  --border-strong:  rgba(10, 12, 15, 0.18);
+  --accent:         #0b6b3d;
+  --accent-solid:   #0b6b3d;
+  --accent-ink:     #ffffff;
+  --shadow: 0 0 0 1px rgba(10, 12, 15, .05), 0 8px 20px rgba(10, 12, 15, .07);
+}
+/* ====================================================== skin: editorial ==== */
+/* Warm charcoal, wide margins, serif display, numerals treated as type. */
+:root[data-skin='editorial'] {
+  --plane:          #16130c;
+  --surface-1:      #201c13;
+  --surface-2:      #282318;
+  --surface-3:      #322b1f;
+  --text-primary:   #f8f4ec;
+  --text-secondary: #c4bcab;
+  --text-muted:     #948c7c;
+  --grid:           #262218;
+  --axis:           #3a3529;
+  --border:         rgba(255, 240, 214, 0.10);
+  --border-strong:  rgba(255, 240, 214, 0.18);
+  --accent:         #e0a852;
+  --accent-solid:   #e0a852;
+  --accent-ink:     #1a1409;
+  --radius: 8px;
+  --radius-sm: 6px;
+  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 34px rgba(20, 14, 4, .38);
+  --glow: radial-gradient(900px 420px at 88% -12%, rgba(224, 168, 82, .11), transparent 60%);
+  --hero-glow: none;
+  --display: var(--serif);
+  --figure: var(--serif);
+  --tracking-h: -0.005em;
+  --pad-card: 20px 22px;
+  --gap-grid: 18px;
+  --fig-scale: 1.12;
+  --sec-space: 38px;
+}
+:root[data-skin='editorial'][data-mode='light'] {
+  --plane:          #f9f6ef;
+  --surface-1:      #fffdf8;
+  --surface-2:      #f4f0e6;
+  --surface-3:      #eae5d8;
+  --text-primary:   #1a1712;
+  --text-secondary: #544e42;
+  --text-muted:     #7d766a;
+  --grid:           #e8e2d4;
+  --axis:           #cbc4b2;
+  --border:         rgba(26, 23, 18, 0.10);
+  --border-strong:  rgba(26, 23, 18, 0.18);
+  --accent:         #8a5514;
+  --accent-solid:   #8a5514;
+  --accent-ink:     #ffffff;
+  --shadow: 0 1px 2px rgba(60, 45, 20, .06), 0 12px 30px rgba(60, 45, 20, .08);
+  --glow: radial-gradient(900px 420px at 88% -12%, rgba(224, 168, 82, .13), transparent 60%);
+}
+* { box-sizing: border-box; }
+html, body {
+  margin: 0;
+  padding: 0;
+  background: var(--plane);
+  background-image: var(--glow);
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  color: var(--text-primary);
+  font-family: var(--sans);
+  font-size: 14px;
+  line-height: 1.45;
+  -webkit-font-smoothing: antialiased;
+}
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+/* ---------------------------------------------------------------- layout -- */
+.wrap { max-width: 1680px; margin: 0 auto; padding: 0 20px 72px; }
+header.top {
+  position: sticky; top: 0; z-index: 40;
+  background: color-mix(in srgb, var(--plane) 88%, transparent);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--border);
+}
+.top-inner {
+  max-width: 1680px; margin: 0 auto; padding: 14px 20px 12px;
+  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
+}
+.brand { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.brand h1 {
+  margin: 0; font-size: 17px; font-weight: 620; letter-spacing: var(--tracking-h);
+  font-family: var(--display);
+  display: flex; align-items: center; gap: 9px;
+}
+.brand .sub { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
+.spacer { flex: 1 1 auto; }
+.dot {
+  width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
+}
+.dot.stale { background: var(--warning); }
+.dot.busy { background: var(--accent); animation: pulse 1.1s ease-in-out infinite; }
+@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
+/* ---------------------------------------------------------------- inputs -- */
+.btn {
+  appearance: none; border: 1px solid var(--border-strong); background: var(--surface-2);
+  color: var(--text-primary); font: inherit; font-size: 13px; padding: 7px 12px;
+  border-radius: var(--radius-sm); cursor: pointer; display: inline-flex;
+  align-items: center; gap: 7px; transition: background .14s, border-color .14s, transform .08s;
+  white-space: nowrap;
+}
+.btn:hover { background: var(--surface-3); border-color: var(--text-muted); }
+.btn:active { transform: translateY(1px); }
+.btn[disabled] { opacity: .5; cursor: default; }
+.btn.primary { background: var(--accent-solid); border-color: transparent; color: var(--accent-ink); }
+.btn.primary:hover { filter: brightness(1.08); }
+.btn.ghost { background: transparent; border-color: var(--border); }
+.btn.sm { padding: 4px 9px; font-size: 12px; }
+select, input[type=date], input[type=text], input[type=number], input[type=time] {
+  appearance: none; background: var(--surface-2); color: var(--text-primary);
+  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
+  padding: 6px 9px; font: inherit; font-size: 13px; min-width: 0;
+}
+input::placeholder { color: var(--text-muted); }
+label.fld { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-muted); }
+/* filter bar: ONE row above everything it scopes */
+.filters {
+  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
+  padding: 12px 0 14px;
+}
+.filters .grp { display: flex; gap: 8px; align-items: flex-end; }
+.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
+.chip {
+  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-secondary);
+  border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; white-space: nowrap;
+}
+.chip:hover { background: var(--surface-3); color: var(--text-primary); }
+.chip[aria-pressed=true] { background: var(--accent-solid); border-color: transparent; color: var(--accent-ink); }
+.chip .x { opacity: .7; margin-left: 4px; }
+/* multiselect ------------------------------------------------------------- */
+.ms { position: relative; }
+.ms-btn { min-width: 132px; justify-content: space-between; }
+.ms-pop {
+  position: absolute; z-index: 60; top: calc(100% + 5px); left: 0; width: 268px;
+  background: var(--surface-1); border: 1px solid var(--border-strong);
+  border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px; display: none;
+}
+.ms.open .ms-pop { display: block; }
+.ms-pop input { width: 100%; margin-bottom: 7px; }
+.ms-list { max-height: 258px; overflow: auto; }
+.ms-row {
+  display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: var(--radius-sm);
+  cursor: pointer; font-size: 13px;
+}
+.ms-row:hover { background: var(--surface-2); }
+.ms-row .tick { width: 14px; font-weight: 700; color: var(--accent); }
+.ms-row .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ms-row .ct { color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
+.ms-foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 7px; border-top: 1px solid var(--border); margin-top: 6px; }
+/* ----------------------------------------------------------------- cards -- */
+.grid { display: grid; gap: var(--gap-grid); }
+.cards {
+  display: grid; gap: calc(var(--gap-grid) - 4px);
+  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
+}
+.card {
+  background: var(--surface-1); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: var(--pad-card); min-width: 0;
+  transition: border-color .16s ease;
+}
+.card:hover { border-color: var(--border-strong); }
+/* The hero KPI is the one place a gradient is allowed: a wash behind a single
+   number, never behind a mark whose colour has to stay comparable. */
+.card.hero-card { background-image: var(--hero-glow); }
+.card.pad0 { padding: 0; }
+.card h3 {
+  margin: 0 0 2px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
+  font-family: var(--display);
+  letter-spacing: .01em; display: flex; align-items: center; gap: 8px;
+}
+.card .hint { color: var(--text-muted); font-size: 11.5px; margin: 0 0 10px; }
+.card-head { display: flex; align-items: flex-start; gap: 10px; padding: var(--pad-card); padding-bottom: 0; }
+.card-head .spacer { flex: 1; }
+.card-body { padding: 10px 16px 14px; }
+.kpi { display: flex; flex-direction: column; gap: 3px; }
+.kpi .k-label { font-size: 11.5px; color: var(--text-muted); }
+.kpi .k-value {
+  font-size: calc(25px * var(--fig-scale)); font-weight: 640;
+  letter-spacing: var(--tracking-h); line-height: 1.12;
+  font-family: var(--figure); font-variant-numeric: tabular-nums;
+}
+.kpi .k-value.hero { font-size: calc(42px * var(--fig-scale)); }
+/* A long identifier is not a hero figure: keep it readable and let it wrap. */
+.kpi .k-value.str { font-size: 17px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
+.card.wide { grid-column: span 2; }
+.kpi .k-sub { font-size: 11.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
+.kpi .k-spark { height: 26px; margin-top: 4px; }
+.kpi.clickable { cursor: pointer; }
+.kpi.clickable:hover .k-value { color: var(--accent); }
+.delta { font-size: 11.5px; font-variant-numeric: tabular-nums; display: inline-flex; gap: 3px; align-items: center; }
+.delta.up { color: var(--good); }
+.delta.down { color: var(--critical); }
+.delta.flat { color: var(--text-muted); }
+/* -------------------------------------------------------------- sections -- */
+.sec-title {
+  display: flex; align-items: center; gap: 10px; margin: var(--sec-space) 0 10px;
+  font-size: 13px; font-weight: 640; letter-spacing: .04em; text-transform: uppercase;
+  color: var(--text-muted); font-family: var(--display);
+}
+.sec-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
+nav.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-top: 4px; overflow-x: auto; }
+nav.tabs button {
+  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
+  color: var(--text-muted); font: inherit; font-size: 13.5px; padding: 9px 12px;
+  cursor: pointer; white-space: nowrap;
+}
+nav.tabs button:hover { color: var(--text-primary); }
+nav.tabs button[aria-selected=true] { color: var(--text-primary); border-bottom-color: var(--accent); }
+/* ---------------------------------------------------------------- charts -- */
+.chart { width: 100%; display: block; overflow: visible; }
+.chart text { font-family: var(--sans); }
+.tick text { fill: var(--text-muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
+.grid-line { stroke: var(--grid); stroke-width: 1; }
+.axis-line { stroke: var(--axis); stroke-width: 1; }
+.series-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+.series-area { stroke: none; }
+.ma-line { fill: none; stroke-width: 2; stroke-dasharray: none; }
+.mark-hover { opacity: .85; }
+.crosshair { stroke: var(--text-muted); stroke-width: 1; pointer-events: none; }
+.peak-mark { fill: none; stroke-width: 2; }
+.brush-rect { fill: var(--accent); opacity: .15; }
+.brush-handle { fill: var(--accent); opacity: .5; cursor: ew-resize; }
+.hit { fill: transparent; }
+.legend { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding-top: 8px; }
+.legend .item {
+  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
+  color: var(--text-secondary); cursor: pointer; user-select: none;
+}
+.legend .item[aria-pressed=false] { opacity: .38; }
+.legend .sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }
+.legend .sw.line { height: 3px; border-radius: 2px; width: 14px; }
+.tip {
+  position: fixed; z-index: 200; pointer-events: none; min-width: 150px; max-width: 320px;
+  background: var(--surface-1); border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 9px 11px;
+  font-size: 12px; opacity: 0; transition: opacity .1s; color: var(--text-primary);
+}
+.tip.on { opacity: 1; }
+.tip .t-head { color: var(--text-secondary); font-size: 11px; margin-bottom: 6px; }
+.tip .t-row { display: flex; align-items: baseline; gap: 8px; padding: 1.5px 0; }
+.tip .t-key { width: 12px; height: 2.5px; border-radius: 2px; flex: none; align-self: center; }
+.tip .t-val { font-weight: 640; font-variant-numeric: tabular-nums; }
+.tip .t-name { color: var(--text-secondary); margin-left: auto; }
+.tip .t-note { color: var(--text-muted); font-size: 11px; margin-top: 6px; }
+/* ---------------------------------------------------------------- tables -- */
+.tbl-wrap { overflow: auto; max-height: 520px; }
+/* Let a primary data table grow with the page instead of nesting a scrollbar. */
+.tbl-wrap.tall { max-height: none; }
+table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
+table.tbl th, table.tbl td { padding: 6px 9px; text-align: right; white-space: nowrap; }
+table.tbl th:first-child, table.tbl td:first-child { text-align: left; }
+table.tbl thead th {
+  position: sticky; top: 0; background: var(--surface-2); color: var(--text-secondary);
+  font-weight: 600; border-bottom: 1px solid var(--border); z-index: 1; cursor: pointer;
+  font-size: 11.5px;
+}
+table.tbl thead th.no-sort { cursor: default; }
+table.tbl tbody tr:hover { background: var(--surface-2); }
+table.tbl td { border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
+table.tbl td.t { font-variant-numeric: normal; }
+table.tbl .na { color: var(--text-muted); }
+table.tbl .mini {
+  display: inline-block; height: 6px; border-radius: 3px; background: var(--series-1);
+  vertical-align: middle; min-width: 2px;
+}
+.link-cell { cursor: pointer; color: var(--series-1); }
+.link-cell:hover { text-decoration: underline; }
+/* ------------------------------------------------------------- calendar -- */
+.cal { display: flex; gap: 3px; align-items: flex-start; overflow-x: auto; padding-bottom: 4px; }
+.cal-col { display: grid; grid-template-rows: repeat(7, 12px); gap: 3px; }
+.cal-cell { width: 12px; height: 12px; border-radius: 2.5px; background: var(--surface-3); cursor: pointer; }
+.cal-cell.l0 { background: var(--surface-3); }
+.cal-cell.l1 { background: var(--seq-1); }
+.cal-cell.l2 { background: var(--seq-3); }
+.cal-cell.l3 { background: var(--seq-5); }
+.cal-cell.l4 { background: var(--seq-6); }
+.cal-cell.l5 { background: var(--seq-7); }
+.cal-cell.sel { outline: 2px solid var(--text-primary); outline-offset: 1px; }
+.cal-cell.out { opacity: .25; }
+.cal-months { display: flex; gap: 3px; font-size: 10.5px; color: var(--text-muted); padding-left: 26px; }
+.cal-dows { display: grid; grid-template-rows: repeat(7, 12px); gap: 3px; font-size: 10px; color: var(--text-muted); width: 24px; }
+.cal-legend { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); }
+/* ------------------------------------------------------------- insights -- */
+.insights { display: grid; gap: 8px; }
+.ins {
+  display: flex; gap: 11px; align-items: flex-start; padding: 10px 12px;
+  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
+  font-size: 13px;
+}
+.ins .i-ico { font-size: 15px; line-height: 1.3; flex: none; }
+.ins.quality { border-left: 2px solid var(--warning); }
+.ins.correlation { border-left: 2px solid var(--series-7); }
+/* --------------------------------------------------------------- badges -- */
+.badge {
+  display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px;
+  padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border-strong);
+  color: var(--text-secondary); background: var(--surface-2); white-space: nowrap;
+  letter-spacing: .02em;
+}
+.badge.est { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
+.badge.meas { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
+.badge.na { color: var(--text-muted); }
+.badge.demo { color: #fff; background: var(--critical); border-color: transparent; font-weight: 640; }
+.badge.overlay { color: var(--series-7); border-color: color-mix(in srgb, var(--series-7) 45%, transparent); }
+.banner {
+  display: flex; gap: 10px; align-items: center; padding: 9px 14px; border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--critical) 16%, var(--surface-1)); border: 1px solid var(--critical);
+  font-size: 13px; margin: 12px 0;
+}
+.banner.info { background: var(--surface-2); border-color: var(--border-strong); }
+.banner.warn { background: color-mix(in srgb, var(--warning) 12%, var(--surface-1)); border-color: color-mix(in srgb, var(--warning) 60%, transparent); }
+.empty {
+  display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center;
+  padding: 34px 16px; color: var(--text-muted); font-size: 13px; text-align: center;
+}
+.empty strong { color: var(--text-secondary); font-weight: 600; }
+/* ----------------------------------------------------------------- misc --- */
+.crumbs { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
+.crumbs .cr { cursor: pointer; color: var(--text-secondary); }
+.crumbs .cr:hover { color: var(--text-primary); text-decoration: underline; }
+.crumbs .sep { opacity: .5; }
+.bar-row { display: grid; grid-template-columns: 128px 1fr 76px; gap: 10px; align-items: center; font-size: 12.5px; padding: 3px 0; }
+.bar-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
+.bar-row .track { display: block; height: 9px; background: var(--surface-3); border-radius: 5px; overflow: hidden; }
+.bar-row .fill { display: block; height: 100%; border-radius: 5px; }
+.bar-row .nm, .bar-row .vl { display: block; }
+.bar-row .vl { text-align: right; font-variant-numeric: tabular-nums; }
+.bar-row.clickable { cursor: pointer; }
+.bar-row.clickable:hover .nm { color: var(--text-primary); }
+.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 12.5px; }
+.kv dt { color: var(--text-muted); }
+.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
+dialog {
+  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-1);
+  color: var(--text-primary); padding: 0; max-width: 720px; width: calc(100vw - 40px);
+  box-shadow: var(--shadow);
+}
+dialog::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
+dialog .d-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
+dialog .d-body { padding: 14px 16px; max-height: 66vh; overflow: auto; }
+dialog .d-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--border); }
+dialog h2 { margin: 0; font-size: 15px; }
+.progress { height: 3px; background: var(--surface-3); border-radius: 2px; overflow: hidden; }
+.progress > i { display: block; height: 100%; background: var(--series-1); transition: width .2s; }
+.refreshing .card { opacity: .55; transition: opacity .15s; }
+.mono { font-family: var(--mono); font-size: 11.5px; }
+.muted { color: var(--text-muted); }
+.right { text-align: right; }
+.nowrap { white-space: nowrap; }
+.sr {
+  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+@media (max-width: 860px) {
+  .kpi .k-value { font-size: 21px; }
+  .kpi .k-value.hero { font-size: 34px; }
+  .bar-row { grid-template-columns: 96px 1fr 62px; }
+}
+@media print {
+  header.top { position: static; }
+  .btn, nav.tabs, .filters { display: none !important; }
+  .card { break-inside: avoid; }
+}
+/* ------------------------------------------------------------ theme picker -- */
+.theme-pop {
+  position: absolute; z-index: 70; top: calc(100% + 6px); right: 0; width: 268px;
+  background: var(--surface-1); border: 1px solid var(--border-strong);
+  border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px; display: none;
+}
+.theme.open .theme-pop { display: block; }
+.theme { position: relative; }
+.theme-row {
+  display: flex; align-items: center; gap: 10px; padding: 7px 8px; width: 100%;
+  border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer;
+  background: none; color: var(--text-primary); font: inherit; font-size: 13px; text-align: left;
+}
+.theme-row:hover { background: var(--surface-2); }
+.theme-row[aria-pressed=true] { border-color: var(--accent); background: var(--surface-2); }
+.theme-row .nm { flex: 1; display: flex; flex-direction: column; gap: 1px; }
+.theme-row .nm small { color: var(--text-muted); font-size: 11px; }
+.swatches { display: flex; gap: 3px; flex: none; }
+.swatches i { width: 11px; height: 18px; border-radius: 3px; display: block; }
+.seg {
+  display: flex; gap: 2px; padding: 3px; margin-top: 6px;
+  background: var(--surface-2); border-radius: var(--radius-sm);
+}
+.seg button {
+  flex: 1; appearance: none; border: 0; background: none; color: var(--text-secondary);
+  font: inherit; font-size: 12px; padding: 5px 8px; border-radius: calc(var(--radius-sm) - 2px);
+  cursor: pointer;
+}
+.seg button[aria-pressed=true] { background: var(--accent-solid); color: var(--accent-ink); }
+.theme-note { color: var(--text-muted); font-size: 11px; padding: 7px 8px 2px; border-top: 1px solid var(--border); margin-top: 6px; }
+/* ------------------------------------------------------------- freshness --- */
+.freshness {
+  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+  padding: 10px 14px; margin: 12px 0 2px;
+  border: 1px solid var(--border-strong); border-radius: var(--radius);
+  background: var(--surface-1); font-size: 12.5px; color: var(--text-secondary);
+}
+.freshness.warn { border-color: color-mix(in srgb, var(--warning) 45%, var(--border-strong)); }
+.freshness .age { color: var(--text-primary); font-weight: 620; font-variant-numeric: tabular-nums; }
+.freshness .spacer { flex: 1; }
+.freshness code {
+  font-family: var(--mono); font-size: 11.5px; background: var(--surface-2);
+  border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; color: var(--text-primary);
+}
+/* ---------------------------------------------------------------- live --- */
+.live-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  letter-spacing: .02em;
+  padding: 3px 10px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--good) 45%, transparent);
+  color: var(--good);
+  background: color-mix(in srgb, var(--good) 8%, var(--surface-1));
+}
+.badge.ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
+.badge.warn { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
+.badge.stale { color: var(--text-muted); }
+.sev-high { color: #fff; background: var(--critical); border-color: transparent; font-weight: 640; }
+.sev-warn { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
+.sev-info { color: var(--text-muted); }