shadok-ai 0.16.13 → 0.16.15

package/README.md

@@ -294,7 +294,7 @@ Enter to skip; you can add it later from the web UI).
   card back. Desktop only: the agents column is hidden on phones.
 - **Guided tour** — on a browser's first visit, a welcome card explains what
   shadok-ai is, then a spotlight walks the real controls: the agents list, an
-  agent's ⋯ menu, scheduled prompts, the toolbar, the quota dials. Skip and
+  agent's ⋯ menu, scheduled prompts, the toolbar, the quota bars. Skip and
   Escape end it at any point; ⋯ → *Guided tour* replays it. A step whose target
   isn't on screen is **dropped rather than faked** — an empty cockpit has no
   agent menu, so it gets a shorter tour instead of a spotlight on nothing. The

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadok-ai",
-  "version": "0.16.13",
+  "version": "0.16.15",
   "main": "dist/session.js",
   "scripts": {
     "test": "node --import tsx --test --test-timeout=120000 test/*.ts context/*/test/*.test.mjs",

package/public/gauge-dial.js

@@ -1,79 +1,70 @@
-// The 240° quota dial: its CENTRE is the ideal pace and its RIGHT END is
-// exhaustion — see docs/superpowers/specs/2026-07-30-quota-dial-design.md.
+// The quota meters (5h / 7d): index.html renders a FLAT BAR whose length is the
+// quota consumed, with a marker at the ideal pace (the share of the window's
+// time already elapsed) — see docs/superpowers/specs/2026-10-30-quota-bar-design.md
+// (it replaced the 240° dial of 2026-07-30-quota-dial-design.md).
 //
-// Loaded as-is by the browser (ESM) and imported by the node/tsx tests, like
-// public/live-text.js, public/notify.js and public/profile-card.js. This module
-// knows nothing about the DOM: it takes numbers and returns numbers, colour
-// strings and SVG path data.
-
-/** Half-sweep, in degrees. 0° is straight up and means "exactly on pace". */
-export const SWEEP_DEG = 120;
-
-/** The viewBox the SVG markup in index.html is drawn against. */
-export const DIAL = { cx: 28, cy: 25, r: 17, w: 56, h: 44 };
+// This module is the PURE core (no DOM): it turns the usage numbers into the
+// pace POSITION (−1 nothing / 0 on pace / +1 exhausted) and the COLOUR that
+// encodes ahead-of / behind-the-clock, plus the multi-line tooltip. The bar's
+// length and the marker's position are the raw percentages and need no maths —
+// so all that lives here is the colour scale and the words. Loaded as-is by the
+// browser (ESM) and imported by the node/tsx tests, like public/live-text.js,
+// public/notify.js and public/profile-card.js.
 
 /**
- * The ideal pace is clamped before it becomes the dial's midpoint, because both
- * ends of a window degenerate otherwise: just after a reset the pace is ~0 and
- * the left half collapses to a point (the first token spent would slam the
- * needle to the centre); at the very end of a window it is ~100 and the right
+ * The ideal pace is clamped before it becomes the position's midpoint, because
+ * both ends of a window degenerate otherwise: just after a reset the pace is ~0
+ * and the "under pace" half collapses to a point (the first token spent would
+ * read as on pace); at the very end of a window it is ~100 and the "over pace"
  * half collapses (any overage would read as "exhausted"). Away from the bands
- * the clamp costs a sub-degree of accuracy, where accuracy matters — but
- * *inside* the bands (pace < 2 or > 98) the error is not sub-degree at all: it
- * can reach 60° (see `dialTitle`'s unclamped `side`, and the two tests that
- * cover it), because the needle is reading a clamped pace it does not have.
- * The trade is still the right one there: the pace is too young or too old to
- * mean much, and the alternative is a needle pinned uselessly at an extreme.
+ * the clamp costs a sub-percent of accuracy — but *inside* the bands (pace < 2
+ * or > 98) the error is larger (see `dialTitle`'s unclamped `side`, and the two
+ * tests that cover it), because the colour is reading a clamped pace it does not
+ * have. The trade is still the right one there: the pace is too young or too old
+ * to mean much.
  *
  * `PACE_MIN` also has to stay ≤ the pace guardrail's own `PACE_EPSILON`
- * (`src/pace.ts`, currently both 2) for a property the dial depends on: the
- * guard blocks a prompt at `used > pace + PACE_EPSILON`, and the dial goes
- * right-of-centre at `used > clamp(pace, PACE_MIN, PACE_MAX)`. With
- * `PACE_MIN <= PACE_EPSILON` the dial crosses centre at or before the guard
- * blocks, so the gauge always warns before a send is refused, never after. Do
- * not couple the two constants across files for this — just keep it in mind
- * when either one changes, since nothing enforces it in code.
+ * (`src/pace.ts`, currently both 2) for a property the meter depends on: the
+ * guard blocks a prompt at `used > pace + PACE_EPSILON`, and the fill turns red
+ * (crosses the on-pace point) at `used > clamp(pace, PACE_MIN, PACE_MAX)`. With
+ * `PACE_MIN <= PACE_EPSILON` the fill reddens at or before the guard blocks, so
+ * the gauge always warns before a send is refused, never after. Do not couple
+ * the two constants across files for this — just keep it in mind when either one
+ * changes, since nothing enforces it in code.
  */
 const PACE_MIN = 2;
 const PACE_MAX = 98;
 
 const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
-/** Two decimals is plenty for a 56 px viewBox, and keeps the path data short. */
-const round2 = (v) => Math.round(v * 100) / 100;
 
 /**
- * Position on the dial: -1 nothing consumed, 0 exactly on the ideal pace, +1
- * quota exhausted.
+ * The pace position that drives the fill COLOUR: -1 nothing consumed, 0 exactly
+ * on the ideal pace, +1 quota exhausted. (The fill's LENGTH and the marker's
+ * position are the raw `usedPercentage` / `idealPacePct` — not this.)
  *
  * The two halves have DIFFERENT scales, deliberately: the pace advances with
  * the clock, so at 25 % into a window the left half maps used 0→25 % and the
- * right half maps used 25→100 %. That is what lets one axis answer both "am I
- * on pace" (the centre) and "is it gone" (the right end).
+ * right half maps used 25→100 %. That is what lets the single number answer both
+ * "am I on pace" (0) and "is it gone" (+1).
  *
  * `pace` is `idealPacePct` from /usage, NOT `ratioPct`: the latter carries
  * PACE_EPSILON in its denominator to keep the guardrail from tripping on the
  * first message after a reset, and baking that fudge in here would offset the
- * needle from the very tick it is supposed to line up with.
+ * colour from the very pace the marker sits on.
  */
 export function dialPos(used, pace) {
   const u = clamp(used, 0, 100);
   // No reset time → no pace → we still know the consumption honestly, so fall
-  // back to a plain linear 0→100 dial. The caller hides the pace tick.
+  // back to a plain linear 0→100 scale. The caller hides the pace marker.
   if (pace == null) return u / 50 - 1;
   const p = clamp(pace, PACE_MIN, PACE_MAX);
   return clamp(u <= p ? u / p - 1 : (u - p) / (100 - p), -1, 1);
 }
 
-/** Needle angle in degrees, from straight up, clockwise positive. */
-export function dialAngle(used, pace) {
-  return dialPos(used, pace) * SWEEP_DEG;
-}
-
 /**
- * Colour for a dial position. Amber at the centre, green towards "under pace",
- * red towards "exhausted" — the same oklab mix the divergent bar used, but keyed
- * on the dial position so the needle's tint and the arc under it can never
- * disagree.
+ * Colour for a pace position. The accent at the on-pace point, green towards
+ * "under pace", red towards "exhausted" — an oklab mix keyed on the position so
+ * the fill's tint always agrees with where it sits relative to the pace marker.
  */
 export function dialColor(pos) {
   const t = Math.round(clamp(pos, -1, 1) * 100);
@@ -82,56 +73,9 @@ export function dialColor(pos) {
     : `color-mix(in oklab, var(--amber), var(--err) ${t}%)`;
 }
 
-/** A point on the dial's rim, in viewBox units. `deg` is measured like dialAngle. */
-export function dialPoint(deg) {
-  const a = (deg * Math.PI) / 180;
-  return {
-    x: round2(DIAL.cx + DIAL.r * Math.sin(a)),
-    y: round2(DIAL.cy - DIAL.r * Math.cos(a)),
-  };
-}
-
-/**
- * Angular gap trimmed from each internal end of a segment, so the arc reads as
- * 24 evenly spaced graduation marks — a deliberate instrument scale, not a
- * smooth band. Trimmed only between segments: the sweep still spans the full
- * ±SWEEP_DEG, so the outer marks line up with the needle at its extremes.
- */
-const GAP_DEG = 0.8;
-
-/**
- * The gradient arc, as `n` solid segments.
- *
- * An SVG gradient cannot follow a path, and a plain horizontal one is
- * degenerate here: below ±90° the arc curls back inward, so sin(-120°) equals
- * sin(-60°) and the outer 30° of each side would be painted with the colour of
- * a completely different reading. Solid segments give a true along-the-sweep
- * gradient, and the gap between them is the point: 24 flat-coloured marks read
- * as an instrument scale, not as one smooth band pretending to be a gradient
- * it structurally cannot render. They are built once and never repainted, so
- * the extra nodes are free.
- */
-export function arcSegments(n = 24) {
-  const step = (2 * SWEEP_DEG) / n;
-  const out = [];
-  for (let i = 0; i < n; i++) {
-    const a = -SWEEP_DEG + i * step + (i === 0 ? 0 : GAP_DEG / 2);
-    const b = -SWEEP_DEG + (i + 1) * step - (i === n - 1 ? 0 : GAP_DEG / 2);
-    const p1 = dialPoint(a);
-    const p2 = dialPoint(b);
-    out.push({
-      // large-arc-flag 0: every segment is well under 180°. sweep-flag 1:
-      // clockwise on screen, i.e. towards increasing consumption.
-      d: `M ${p1.x} ${p1.y} A ${DIAL.r} ${DIAL.r} 0 0 1 ${p2.x} ${p2.y}`,
-      color: dialColor(-1 + (2 * i + 1) / n),
-    });
-  }
-  return out;
-}
-
 /**
- * The multi-line tooltip, reused verbatim as the SVG's aria-label. The third
- * line is what makes the piecewise scale self-explanatory: it states whether
+ * The multi-line tooltip, reused verbatim as the gauge's aria-label. The third
+ * line is what makes the reading self-explanatory: it states whether
  * consumption is ahead of, behind, or on the ideal pace.
  *
  * `resetText` comes from the caller's fmtReset and is "" when resetsAt is null —
@@ -148,10 +92,10 @@ export function dialTitle(label, w, resetText) {
       .filter(Boolean)
       .join("\n");
   }
-  // Unclamped on purpose: dialPos clamps the pace to keep the NEEDLE readable at
-  // the edges of a window, but the sentence must state what is actually happening.
-  // Inside the clamp bands the two can disagree — a true sentence beside a clamped
-  // needle beats a false one.
+  // Unclamped on purpose: dialPos clamps the pace to keep the FILL COLOUR readable
+  // at the edges of a window, but the sentence must state what is actually
+  // happening. Inside the clamp bands the two can disagree — a true sentence
+  // beside a clamped tint beats a false one.
   const off = w.usedPercentage - w.idealPacePct;
   const side =
     off < -0.5

package/public/index.html

@@ -350,8 +350,13 @@
     display: block; margin-top: 3px; opacity: 0.8;
     white-space: normal; line-height: 1.45;
   }
+  /* Top banners sit ABOVE the header, not over it: they are flow items at the
+     very top of the fixed flex chassis (inserted as body's first child), so they
+     push the header and everything below down instead of overlapping it. A
+     `position:fixed; top:0` strip used to float over the header and hide the
+     brand/gauges underneath. */
   #updateBanner {
-    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
+    flex: 0 0 auto; width: 100%; z-index: 1000;
     background: var(--amber); color: var(--on-accent);
     font-family: var(--sans); font-size: 12px; text-align: center;
     padding: 6px 12px;
@@ -359,7 +364,7 @@
   /* The re-login reminder (sign-in within 48h / expired). Same top strip as the
      update banner; its own id so the two never share styling by accident. */
   #expiryBanner {
-    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
+    flex: 0 0 auto; width: 100%; z-index: 1000;
     background: var(--amber); color: var(--on-accent);
     font-family: var(--sans); font-size: 12px;
     padding: 6px 12px;
@@ -396,48 +401,58 @@
   @keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
   @media (prefers-reduced-motion: reduce) { .led.busy { animation: none; } body.picker-open #tabbar { animation: none; } }
   header .spacer { flex: 1; }
-  /* Quota dials (5h / 7d subscription usage).
-     A 240° speedometer whose CENTRE is the ideal pace and whose RIGHT END is
-     exhaustion — see docs/superpowers/specs/2026-07-30-quota-dial-design.md.
-     Position AND colour carry the reading, never colour alone. */
-  .quota { min-width: 56px; }
-  .dial { display: block; width: 56px; height: 44px; }
-  /* opacity on the GROUP, not each path: 24 overlapping-alpha strokes would
-     composite twice at every join and brighten the seams instead of hiding
-     them. One group opacity leaves the marks flat and evenly graduated. */
-  .dial .arc { opacity: 0.6; }
-  .dial .arc path { fill: none; stroke-width: 4; }
-  /* No data: the scale stays, as a ghost, so the widget does not vanish. */
-  .dial.nodata .arc { opacity: 0.18; }
-  /* The "on pace" reference, just outside the arc. The needle's tip meets it
-     exactly when the consumption is on pace — they read as one line. */
-  .dial .tick { stroke: var(--text); stroke-width: 1.5; opacity: 0.75; }
-  .dial .needle {
-    stroke: var(--text);
-    stroke-width: 2;
-    stroke-linecap: round;
-    /* Rotated through the CSS transform PROPERTY, not the SVG attribute: only
-       the property transitions reliably. transform-box/-origin put the pivot on
-       the hub in viewBox units. */
-    transform-box: view-box;
-    transform-origin: 28px 25px;
-    transition: transform 0.4s ease;
-  }
-  .dial .pct {
-    font-family: var(--mono);
-    font-size: 12px;
-    font-weight: 600;
-    fill: var(--text);
-    transition: fill 0.4s ease;
-  }
-  .dial .unit {
-    font-family: var(--mono);
-    font-size: 8px;
-    fill: var(--text-dim);
-    letter-spacing: 0.08em;
+  /* Quota meters (5h / 7d subscription usage).
+     A flat bar per window: its LENGTH is the quota consumed, and a white marker
+     sits at the ideal pace (the share of the window's time already elapsed).
+     Fill short of the marker = ahead of the clock (green); past it = burning
+     faster (red). Position AND colour carry the reading, never colour alone —
+     see docs/superpowers/specs/2026-10-30-quota-bar-design.md. */
+  .quotas { display: flex; flex-direction: column; gap: 5px; }
+  .quota {
+    display: grid; grid-template-columns: 18px 96px 32px;
+    align-items: center; column-gap: 9px; min-width: 0;
+  }
+  .quota .q-lbl {
+    font-family: var(--mono); font-size: 11px; font-weight: 600;
+    color: var(--text-dim); letter-spacing: 0.04em;
+  }
+  .quota .q-pct {
+    font-family: var(--mono); font-size: 12px; font-weight: 600;
+    text-align: right; color: var(--text);
+    font-variant-numeric: tabular-nums; transition: color 0.4s ease;
+  }
+  /* The track is theme-aware (a faint wash of the text ink) so it reads on both
+     the dark and the light palette; the fill colour is set per reading from JS. */
+  .q-track {
+    position: relative; height: 7px; border-radius: 999px;
+    background: color-mix(in oklab, var(--text) 12%, transparent);
+  }
+  .quota.nodata .q-track { background: color-mix(in oklab, var(--text) 7%, transparent); }
+  .q-fill {
+    position: absolute; left: 0; top: 0; height: 100%; width: 0;
+    border-radius: 999px;
+    /* A soft top sheen over the per-reading colour (`--c`), for a bit of depth. */
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%),
+                var(--c, var(--text-dim));
+    transition: width 0.4s ease, background-color 0.4s ease;
+  }
+  /* The ideal-pace marker: a line that stands proud of the bar with a small cap,
+     so it reads on any fill colour. `var(--text)` (near-white on dark, dark on
+     light) + a page-coloured outline keep it legible in both themes. Hidden when
+     there is no reset time, i.e. no pace to mark. */
+  .q-mark {
+    position: absolute; top: -4px; height: 15px; width: 2px; left: 0;
+    border-radius: 1px; background: var(--text); transform: translateX(-1px);
+    filter: drop-shadow(0 0 1px var(--page));
+    transition: left 0.4s ease;
+  }
+  .q-mark::before {
+    content: ""; position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
+    border-left: 3px solid transparent; border-right: 3px solid transparent;
+    border-top: 3px solid var(--text);
   }
   @media (prefers-reduced-motion: reduce) {
-    .dial .needle, .dial .pct { transition: none; }
+    .q-fill, .q-pct, .q-mark { transition: none; }
   }
   button {
     font-family: var(--sans);
@@ -1731,8 +1746,12 @@
        phone it moves into the ⋯ menu (#starMenuItem) instead. */
     #starBtn { display: none; }
     #moreMenu #starMenuItem { display: block; }
-    .quota { min-width: 46px; }
-    .dial { width: 46px; height: 36px; }
+    /* Narrower bar + smaller label column so the two stacked meters fit the
+       nowrap header beside the brand and the ⋯ menu. */
+    .quotas { gap: 4px; }
+    .quota { grid-template-columns: 16px 62px 28px; column-gap: 6px; }
+    .quota .q-lbl { font-size: 10px; }
+    .quota .q-pct { font-size: 11px; }
     /* A bit more room for a thumb, a bit less margin wasted on a narrow screen. */
     .transcript { padding: 14px 14px 6px; }
     #composer { padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
@@ -2423,23 +2442,17 @@
 <header>
   <span class="brand"><span class="brand-logo" aria-hidden="true"><svg viewBox="0 0 32 32"><g fill="currentColor" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"><g class="sk-leg sk-leg-l"><line x1="13" y1="23" x2="12.6" y2="30.6"/><line x1="11" y1="30.7" x2="14.1" y2="30.7"/></g><g class="sk-leg sk-leg-r"><line x1="18.6" y1="23" x2="19" y2="30.6"/><line x1="17.6" y1="30.7" x2="20.7" y2="30.7"/></g><g class="sk-bob"><line class="sk-arm" x1="21.6" y1="17.2" x2="26" y2="20.4"/><g class="sk-ant sk-ant-l" stroke-width="0.9"><line x1="13.8" y1="5.4" x2="11.8" y2="2.8"/><circle cx="11.8" cy="2.8" r="1" stroke="none"/></g><g class="sk-ant sk-ant-r" stroke-width="0.9"><line x1="18.2" y1="5.4" x2="20.2" y2="2.8"/><circle cx="20.2" cy="2.8" r="1" stroke="none"/></g><circle cx="16" cy="16.2" r="8.4" stroke="none"/><path d="M14.4 18.2 L17.6 18.2 L16 21.6 Z" stroke="none"/><g class="sk-eyes" stroke="none"><circle cx="13.1" cy="7.8" r="2.6" fill="#fff"/><circle cx="18.9" cy="7.8" r="2.6" fill="#fff"/><g class="sk-pupils"><circle cx="13.4" cy="8.1" r="1.3"/><circle cx="19.2" cy="8.1" r="1.3"/></g></g></g></g></svg></span><span class="brand-name" id="brandName" title="Rename this cockpit">shadok-ai</span><span class="brand-edit" id="brandEdit" title="Rename this cockpit" aria-hidden="true">✎</span> <span class="ver" id="verView" title="Running version"></span><span class="ver-chan" id="verChan" aria-hidden="true"></span></span>
   <span class="spacer"></span>
-  <div class="gauge quota" id="quota5h" data-window="5h" title="5h rolling limit">
-    <svg class="dial" viewBox="0 0 56 44" role="img" aria-label="5h rolling limit">
-      <g class="arc"></g>
-      <line class="tick" x1="28" y1="5" x2="28" y2="2" visibility="hidden"></line>
-      <line class="needle" x1="28" y1="13" x2="28" y2="5" visibility="hidden"></line>
-      <text class="pct" x="28" y="28" text-anchor="middle">—</text>
-      <text class="unit" x="28" y="41" text-anchor="middle">5h</text>
-    </svg>
-  </div>
-  <div class="gauge quota" id="quota7d" data-window="7d" title="7d rolling limit">
-    <svg class="dial" viewBox="0 0 56 44" role="img" aria-label="7d rolling limit">
-      <g class="arc"></g>
-      <line class="tick" x1="28" y1="5" x2="28" y2="2" visibility="hidden"></line>
-      <line class="needle" x1="28" y1="13" x2="28" y2="5" visibility="hidden"></line>
-      <text class="pct" x="28" y="28" text-anchor="middle">—</text>
-      <text class="unit" x="28" y="41" text-anchor="middle">7d</text>
-    </svg>
+  <div class="quotas">
+    <div class="quota" id="quota5h" data-window="5h" role="img" aria-label="5h rolling limit" title="5h rolling limit">
+      <span class="q-lbl">5h</span>
+      <div class="q-track"><div class="q-fill"></div><div class="q-mark" hidden></div></div>
+      <span class="q-pct">—</span>
+    </div>
+    <div class="quota" id="quota7d" data-window="7d" role="img" aria-label="7d rolling limit" title="7d rolling limit">
+      <span class="q-lbl">7d</span>
+      <div class="q-track"><div class="q-fill"></div><div class="q-mark" hidden></div></div>
+      <span class="q-pct">—</span>
+    </div>
   </div>
   <!-- The global actions, in ONE container. `display: contents` on desktop: they
        stay direct items of the bar and the layout does not move a pixel. On a
@@ -3221,7 +3234,7 @@
     applyReadonlyPreset, isManagedProfile, profileSaveBody, secretUsers } from "/profile-card.js?v=__ASSET_V__";
   import { notifyState, BLINK_MS } from "/notify.js?v=__ASSET_V__";
   import { echoAuthor, isOwnPrompt } from "/echo-author.js?v=__ASSET_V__";
-  import { dialPos, dialColor, arcSegments, dialTitle, SWEEP_DEG } from "/gauge-dial.js?v=__ASSET_V__";
+  import { dialPos, dialColor, dialTitle } from "/gauge-dial.js?v=__ASSET_V__";
   import { TOUR_STEPS, bubblePlacement, unionRect, visibleSteps } from "/tour-steps.js?v=__ASSET_V__";
   import { pickChannelSource, dirKey, serverSwapped } from "/channel-store.js?v=__ASSET_V__";
   import { MODEL_CHOICES, composeModel } from "/model-choice.js?v=__ASSET_V__";
@@ -3287,9 +3300,7 @@
   window.BLINK_MS = BLINK_MS;
   window.dialPos = dialPos;
   window.dialColor = dialColor;
-  window.arcSegments = arcSegments;
   window.dialTitle = dialTitle;
-  window.SWEEP_DEG = SWEEP_DEG;
   // Les bouchons du script classique sont maintenant remplacés par les vraies
   // fonctions : tout ce qui a pu être peint entre-temps est incomplet.
   window.dispatchEvent(new Event("shadok-bridge-ready"));
@@ -3336,7 +3347,6 @@
     notifyState: () => ({ color: null, badge: "", blink: false }),
     dialPos: () => 0,
     dialColor: () => "",
-    arcSegments: () => [],
     dialTitle: () => "",
     bubblePlacement: () => null,
     unionRect: () => null,
@@ -4562,8 +4572,10 @@
     swapped = true;
     restoring = true; // freezes pushChannels AND persistGroups (both bail on it)
     const bar = document.createElement("div");
+    // A flow strip at the very top (first child) so it sits ABOVE the header
+    // rather than floating over it — same placement as the update/expiry banners.
     bar.style.cssText =
-      "position:fixed;top:0;left:0;right:0;z-index:99999;background:#b23b3b;color:#fff;" +
+      "flex:0 0 auto;width:100%;z-index:99999;background:#b23b3b;color:#fff;" +
       "padding:10px 14px;font:14px system-ui;text-align:center";
     bar.textContent = "This cockpit was replaced by another instance on this port — reload to reconnect. ";
     const btn = document.createElement("button");
@@ -4571,7 +4583,7 @@
     btn.style.cssText = "margin-left:8px;padding:3px 10px;cursor:pointer";
     btn.addEventListener("click", () => location.reload());
     bar.appendChild(btn);
-    document.body.appendChild(bar);
+    document.body.insertBefore(bar, document.body.firstChild);
   }
   function pushChannels(list) {
     if (restoring || swapped) return; // never overwrite the server list with a partial one, nor a foreign instance's
@@ -7674,7 +7686,8 @@
       btn.textContent = "Re-login now";
       btn.addEventListener("click", () => openAuthCard(true));
       el.append(span, btn);
-      document.body.appendChild(el);
+      // First child → above the header in the flex chassis, not floating over it.
+      document.body.insertBefore(el, document.body.firstChild);
     }
     // Expired is an escalation, not just a reminder — turn the strip red.
     el.style.background = w.expired ? "var(--err)" : "";
@@ -7867,7 +7880,8 @@
     if (!el) {
       el = document.createElement("div");
       el.id = "updateBanner";
-      document.body.appendChild(el);
+      // First child → above the header in the flex chassis, not floating over it.
+      document.body.insertBefore(el, document.body.firstChild);
     }
     el.textContent = "Updating to v" + version + "… the page will reload automatically.";
   }
@@ -11196,55 +11210,42 @@
   /** Last verdict from /usage — read by the composer before sending. */
   let paceBlocked = false, paceReason = null;
 
-  /** Paints the static gradient arc of every dial. Runs once: the scale never
-   *  changes, only the needle on top of it does. */
-  function buildDialArcs() {
-    if (!window.arcSegments) return;
-    const NS = "http://www.w3.org/2000/svg";
-    for (const g of document.querySelectorAll(".quota .dial .arc")) {
-      g.replaceChildren(
-        ...window.arcSegments().map(({ d, color }) => {
-          const p = document.createElementNS(NS, "path");
-          p.setAttribute("d", d);
-          // Via the style PROPERTY: color-mix() is not reliably parsed as an
-          // SVG presentation attribute.
-          p.style.stroke = color;
-          return p;
-        }),
-      );
-    }
-  }
-
   function paintGauge(el, w) {
-    const svg = el.querySelector(".dial");
-    const needle = svg.querySelector(".needle");
-    const tick = svg.querySelector(".tick");
-    const pct = svg.querySelector(".pct");
+    const fill = el.querySelector(".q-fill");
+    const mark = el.querySelector(".q-mark");
+    const pct = el.querySelector(".q-pct");
     const label = el.dataset.window;
     const title = window.dialTitle
       ? window.dialTitle(label, w, w ? fmtReset(w.resetsAt) : "")
       : label + " rolling limit";
     el.title = title;
-    svg.setAttribute("aria-label", title);
-    svg.classList.toggle("nodata", !w);
-    // Guard on the ESM bridge (invariant 10): this function can be reached
-    // before the module has run. Degrade to the number rather than paint a
-    // needle at a wrong angle.
-    if (!w || !window.dialPos) {
-      needle.setAttribute("visibility", "hidden");
-      tick.setAttribute("visibility", "hidden");
-      pct.textContent = w ? Math.round(w.usedPercentage) + "%" : "—";
-      pct.style.fill = "var(--text-dim)";
+    el.setAttribute("aria-label", title);
+    el.classList.toggle("nodata", !w);
+    if (!w) {
+      fill.style.width = "0%";
+      mark.hidden = true;
+      pct.textContent = "—";
+      pct.style.color = "var(--text-dim)";
       return;
     }
-    const pos = window.dialPos(w.usedPercentage, w.idealPacePct);
-    needle.setAttribute("visibility", "visible");
-    needle.style.transform = "rotate(" + (pos * window.SWEEP_DEG).toFixed(1) + "deg)";
-    // Without a reset time there is no ideal pace, so there is nothing for the
-    // tick to mark — drawing it would assert a reference we do not have.
-    tick.setAttribute("visibility", w.idealPacePct == null ? "hidden" : "visible");
+    // Bar LENGTH is the consumption, straight from the number (no maths).
+    const used = Math.max(0, Math.min(100, w.usedPercentage));
+    fill.style.width = used + "%";
+    // The fill COLOUR encodes ahead-of / behind-the-clock. That needs the
+    // piecewise pace position; without the ESM bridge (invariant 10) this paint
+    // can run before the module lands — fall back to a neutral bar (still the
+    // right length) rather than a wrong tint.
+    const color = window.dialPos
+      ? window.dialColor(window.dialPos(w.usedPercentage, w.idealPacePct))
+      : "var(--text-dim)";
+    fill.style.setProperty("--c", color);
     pct.textContent = Math.round(w.usedPercentage) + "%";
-    pct.style.fill = window.dialColor(pos);
+    pct.style.color = color;
+    // The marker is the ideal pace (the window's elapsed-time share). No reset
+    // time → no pace → hide it rather than assert a reference we do not have.
+    const hasPace = w.idealPacePct != null;
+    mark.hidden = !hasPace;
+    if (hasPace) mark.style.left = Math.max(0, Math.min(100, w.idealPacePct)) + "%";
   }
 
   async function refreshUsage() {
@@ -11263,10 +11264,11 @@
       paceReason = null;
     }
   }
-  // The ESM bridge (window.dialPos & co) runs AFTER this classic script — see
-  // invariant 10 in CLAUDE.md. Painting now would leave blank dials in silence.
+  // A deferred module script runs after parsing but BEFORE DOMContentLoaded, so
+  // window.dialPos & co (the ESM bridge, invariant 10) are ready by here and the
+  // first paint gets the right colour; paintGauge still degrades to a neutral bar
+  // if that ever fails to hold.
   document.addEventListener("DOMContentLoaded", () => {
-    buildDialArcs();
     refreshUsage();
     refreshAuthRows();  // paints the re-login reminder banner if the token is due
     maybeStartTour();   // the tour runs first; it calls checkAuth() when it ends

package/public/tour-steps.js

@@ -118,10 +118,10 @@ export const TOUR_STEPS = [
     id: "quota",
     title: "Watch your quota",
     body:
-      "Your 5h and 7d subscription usage. The needle's centre is the pace that would " +
-      "spend the window exactly on time, so leaning right means you're burning faster. " +
-      "To the left, the cockpit's name is yours to change, and the version beside it opens " +
-      "updates and the permission mode.",
+      "Your 5h and 7d subscription usage. Each bar fills with what you've spent, and the " +
+      "white marker is the pace that would spend the window exactly on time — a fill past " +
+      "the marker means you're burning faster. To the left, the cockpit's name is yours to " +
+      "change, and the version beside it opens updates and the permission mode.",
     target: ["#quota5h", "#quota7d"],
   },
 ];