pi-editor-footer 0.12.1 → 0.12.2

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [0.12.2](https://github.com/Rianico/pi-editor-footer/compare/v0.12.1...v0.12.2) (2026-09-13)
+
+### Bug Fixes
+
+* **context:** tier-color the context window section by usage ([#30](https://github.com/Rianico/pi-editor-footer/issues/30)) ([8152d90](https://github.com/Rianico/pi-editor-footer/commit/8152d90b3c1b4013154eff95cc885e79e7564f6f))
+
+## [Unreleased]
+
 ## [0.12.1](https://github.com/Rianico/pi-editor-footer/compare/v0.12.0...v0.12.1) (2026-09-07)
 
 ### Bug Fixes

package/dist/ansi-color.js

@@ -0,0 +1,142 @@
+const BASIC16 = [
+    [0, 0, 0],
+    [128, 0, 0],
+    [0, 128, 0],
+    [128, 128, 0],
+    [0, 0, 128],
+    [128, 0, 128],
+    [0, 128, 128],
+    [192, 192, 192],
+    [128, 128, 128],
+    [255, 0, 0],
+    [0, 255, 0],
+    [255, 255, 0],
+    [0, 0, 255],
+    [255, 0, 255],
+    [0, 255, 255],
+    [255, 255, 255],
+];
+/** 6x6x6 colour-cube channel values (indices 0-5). */
+const CUBE_VALUES = [0, 95, 135, 175, 215, 255];
+/** Grayscale ramp values (indices 232-255: 24 grays from 8 to 238). */
+const GRAY_VALUES = Array.from({ length: 24 }, (_, i) => 8 + i * 10);
+/** Anything but the truecolor marker means the 256-colour ramp. */
+export function normalizeColorMode(mode) {
+    return mode === "truecolor" ? "truecolor" : "256color";
+}
+export function indexToRgb(n) {
+    if (n >= 0 && n < 16) {
+        const [r, g, b] = BASIC16[n] ?? [0, 0, 0];
+        return { r, g, b };
+    }
+    if (n >= 16 && n <= 231) {
+        const v = n - 16;
+        return {
+            r: CUBE_VALUES[Math.floor(v / 36)] ?? 0,
+            g: CUBE_VALUES[Math.floor(v / 6) % 6] ?? 0,
+            b: CUBE_VALUES[v % 6] ?? 0,
+        };
+    }
+    if (n >= 232 && n <= 255) {
+        const gray = 8 + (n - 232) * 10;
+        return { r: gray, g: gray, b: gray };
+    }
+    return null;
+}
+function findClosestCubeIndex(value) {
+    let minDist = Infinity;
+    let minIdx = 0;
+    for (let i = 0; i < CUBE_VALUES.length; i++) {
+        const dist = Math.abs(value - (CUBE_VALUES[i] ?? 0));
+        if (dist < minDist) {
+            minDist = dist;
+            minIdx = i;
+        }
+    }
+    return minIdx;
+}
+function findClosestGrayIndex(gray) {
+    let minDist = Infinity;
+    let minIdx = 0;
+    for (let i = 0; i < GRAY_VALUES.length; i++) {
+        const dist = Math.abs(gray - (GRAY_VALUES[i] ?? 0));
+        if (dist < minDist) {
+            minDist = dist;
+            minIdx = i;
+        }
+    }
+    return minIdx;
+}
+function colorDistance(r1, g1, b1, r2, g2, b2) {
+    const dr = r1 - r2;
+    const dg = g1 - g2;
+    const db = b1 - b2;
+    // Weighted Euclidean distance (the eye is more sensitive to green).
+    return dr * dr * 0.299 + dg * dg * 0.587 + db * db * 0.114;
+}
+/** Quantise RGB to the closest xterm-256 index (same rule as the theme loader). */
+export function rgbTo256(r, g, b) {
+    const rIdx = findClosestCubeIndex(r);
+    const gIdx = findClosestCubeIndex(g);
+    const bIdx = findClosestCubeIndex(b);
+    const cubeR = CUBE_VALUES[rIdx] ?? 0;
+    const cubeG = CUBE_VALUES[gIdx] ?? 0;
+    const cubeB = CUBE_VALUES[bIdx] ?? 0;
+    const cubeIndex = 16 + 36 * rIdx + 6 * gIdx + bIdx;
+    const cubeDist = colorDistance(r, g, b, cubeR, cubeG, cubeB);
+    const gray = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
+    const grayIdx = findClosestGrayIndex(gray);
+    const grayValue = GRAY_VALUES[grayIdx] ?? 0;
+    const grayIndex = 232 + grayIdx;
+    const grayDist = colorDistance(r, g, b, grayValue, grayValue, grayValue);
+    const spread = Math.max(r, g, b) - Math.min(r, g, b);
+    // Only consider grayscale when the colour is nearly neutral AND closer.
+    if (spread < 10 && grayDist < cubeDist)
+        return grayIndex;
+    return cubeIndex;
+}
+/** Parse `#RRGGBB`. Throws on malformed input — callers pass literals, not user data. */
+export function hexToRgb(hex) {
+    const cleaned = hex.startsWith("#") ? hex.slice(1) : hex;
+    if (cleaned.length !== 6)
+        throw new Error(`Invalid hex color: ${hex}`);
+    const { r, g, b } = {
+        r: parseInt(cleaned.slice(0, 2), 16),
+        g: parseInt(cleaned.slice(2, 4), 16),
+        b: parseInt(cleaned.slice(4, 6), 16),
+    };
+    if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
+        throw new Error(`Invalid hex color: ${hex}`);
+    }
+    return { r, g, b };
+}
+/** Parse a theme token's ANSI escape back into RGB (truecolor or 256 index). */
+export function parseFgAnsiToRgb(theme, color) {
+    const ansi = theme.getFgAnsi(color);
+    const trueColor = ansi.match(/38;2;(\d+);(\d+);(\d+)/);
+    if (trueColor) {
+        return {
+            r: Number(trueColor[1]),
+            g: Number(trueColor[2]),
+            b: Number(trueColor[3]),
+        };
+    }
+    const palette = ansi.match(/38;5;(\d+)/);
+    if (palette)
+        return indexToRgb(Number(palette[1]));
+    return null;
+}
+/** SGR foreground sequence for an RGB value at the terminal's colour fidelity. */
+export function rgbToFgAnsi({ r, g, b }, mode) {
+    return normalizeColorMode(mode) === "truecolor"
+        ? `\x1b[38;2;${r};${g};${b}m`
+        : `\x1b[38;5;${rgbTo256(r, g, b)}m`;
+}
+/**
+ * Colour `s` with an exact hex, bypassing the theme's named-token lookup.
+ * Returned painter resets only the foreground (`\x1b[39m`), matching `theme.fg`.
+ */
+export function hexFg(hex, mode) {
+    const ansi = rgbToFgAnsi(hexToRgb(hex), mode);
+    return (s) => `${ansi}${s}\x1b[39m`;
+}

package/dist/chrome-composition.js

@@ -21,14 +21,19 @@ import { resolveGlyphs, resolveIconMode } from "./icons.js";
 import { formatTopContextFromSnapshot } from "./chrome-state.js";
 import { formatRunActivityTopRight } from "./run-activity.js";
 import { formatTelemetryTokens, formatTurnDuration, formatTurnTelemetry } from "./telemetry.js";
+import { hexFg } from "./ansi-color.js";
 /**
- * Read the live pi theme into a typed { fg } surface. The cast is a SAFETY seam — a pi theme
- * missing `fg` degrades to identity rather than throwing, keeping the chrome resilient.
+ * Read the live pi theme into a typed { fg, fgHex } surface. The cast is a SAFETY
+ * seam — a pi theme missing `fg` degrades to identity rather than throwing, keeping
+ * the chrome resilient. `fgHex` needs no theme call at all: the named-token lookup
+ * rejects raw hex, so hex is rendered straight to SGR at the theme's colour mode.
  */
 export function adaptTheme(rawTheme) {
-    const t = rawTheme; // SAFETY: pi theme seam — fg is optional, guarded below
+    const t = rawTheme;
+    const mode = typeof t.getColorMode === "function" ? t.getColorMode() : undefined;
     return {
         fg: (style, s) => (typeof t.fg === "function" ? t.fg(style, s) : s),
+        fgHex: (hex, s) => hexFg(hex, mode)(s),
     };
 }
 /** Optional thinking-border glow (pi theme extension). Falls back to identity. */

package/dist/chrome-state.js

@@ -15,20 +15,30 @@
  * inside this module, not part of its external seam.
  */
 import { getUsageTotals } from "./state.js";
-import { cacheHitColor, contextUsageColor } from "./color-policy.js";
+import { cacheHitColor, CONTEXT_TIER_HEX, CONTEXT_TIER_THEME_COLOR, contextUsageTier, } from "./color-policy.js";
 import { fmtTokens } from "./format.js";
 // ---------------------------------------------------------------------------
 // Context bar formatting — moved from footer.ts to centralize chrome rendering.
 // Re-exported from footer.ts for backward compatibility.
 // ---------------------------------------------------------------------------
-function renderBar(theme, pct, barWidth, ascii) {
+/**
+ * Painter for one context tier: exact hex when the live theme can emit raw hex,
+ * else the nearest semantic token (tests/mocks, themes without colour mode).
+ */
+function contextPainter(theme, tier) {
+    const hex = CONTEXT_TIER_HEX[tier];
+    const fgHex = theme.fgHex;
+    if (fgHex)
+        return (s) => fgHex.call(theme, hex, s);
+    return (s) => theme.fg(CONTEXT_TIER_THEME_COLOR[tier], s);
+}
+function renderBar(theme, paint, pct, barWidth, ascii) {
     const filled = Math.max(0, Math.min(barWidth, Math.round((pct / 100) * barWidth)));
     const empty = barWidth - filled;
-    const color = contextUsageColor(pct);
     const filledCell = ascii ? "#" : "█";
     const emptyCell = ascii ? "-" : "░";
     return (theme.fg("dim", "[") +
-        theme.fg(color, filledCell.repeat(filled)) +
+        paint(filledCell.repeat(filled)) +
         theme.fg("dim", emptyCell.repeat(empty)) +
         theme.fg("dim", "]"));
 }
@@ -37,13 +47,13 @@ export function formatContextBar(contextUsage, theme, glyphs, isAscii, barWidth
     if (contextWindow <= 0)
         return "";
     const contextPct = contextUsage?.percent ?? 0;
-    const contextColor = contextUsageColor(contextPct);
-    const pctText = theme.fg(contextColor, `${contextPct.toFixed(1)}%`);
+    const paint = contextPainter(theme, contextUsageTier(contextPct, contextWindow));
+    const pctText = paint(`${contextPct.toFixed(1)}%`);
     const contextTokens = contextUsage?.tokens ?? 0;
-    const ctxText = `${theme.fg(contextColor, fmtTokens(contextTokens))}${theme.fg("dim", "/")}${theme.fg(contextColor, fmtTokens(contextWindow))}`;
+    const ctxText = `${paint(fmtTokens(contextTokens))}${theme.fg("dim", "/")}${paint(fmtTokens(contextWindow))}`;
     const baseCore = `${pctText} ${theme.fg("dim", "·")} ${ctxText}`;
     const base = showIconBar
-        ? `${theme.fg(contextColor, glyphs.context)} ${renderBar(theme, contextPct, barWidth, isAscii)} ${baseCore}`
+        ? `${paint(glyphs.context)} ${renderBar(theme, paint, contextPct, barWidth, isAscii)} ${baseCore}`
         : baseCore;
     const rate = cacheHitRate !== undefined && Number.isFinite(cacheHitRate) ? cacheHitRate : 0;
     const cacheText = `${glyphs.cacheHit} ${rate.toFixed(1)}%`;

package/dist/color-policy.js

@@ -5,24 +5,37 @@ export function stressColor(value, warn = 70, danger = 90) {
         return "warning";
     return "accent";
 }
-export function contextUsageColor(pct) {
-    // 12.5 / 25 / 50 quotas — four urgency tiers, increasingly aggressive as context fills.
-    // 0 – 12.5%  dim      — plenty of headroom, visually quiet.
-    // 12.5 – 25% accent   — first nudge, noticeable but calm.
-    // 25 – 50%   warning  — half consumed, needs attention.
-    // 50 – 100%  error     — critical, about to run out.
-    // Uses theme semantic tokens (dim/accent/warning/error) so the progression
-    // respects the active theme and remains legible on light/dark/custom palettes.
-    // A fixed hex palette (e.g. grey→sky→amber→red) would be more vivid but
-    // would ignore the user's theme and can clash with light backgrounds —
-    // semantic tokens keep the "aggressive" ordering while staying theme-coherent.
-    if (pct >= 50)
-        return "error";
-    if (pct >= 25)
-        return "warning";
-    if (pct >= 12.5)
-        return "accent";
-    return "dim";
+/**
+ * Fixed tier palette (nord green / nord yellow / dark red). Hex, not theme tokens:
+ * the tiers are an alarm scale the user picked explicitly, so they must read the
+ * same on every theme. `CONTEXT_TIER_THEME_COLOR` is only the fallback for themes
+ * that cannot emit raw hex.
+ */
+export const CONTEXT_TIER_HEX = {
+    ok: "#A3BE8C",
+    warn: "#EBCB8B",
+    critical: "#9A3939",
+};
+/** Semantic token approximating each tier — used when raw hex is unavailable. */
+export const CONTEXT_TIER_THEME_COLOR = {
+    ok: "success",
+    warn: "warning",
+    critical: "error",
+};
+/**
+ * Tier from the share of the context window consumed.
+ *
+ * Budgets scale with the window: a 1M window only earns 12.5 / 25 % of slack
+ * before the same alarm, while smaller windows (compacted far sooner) keep the
+ * looser 25 / 50 % steps.
+ */
+export function contextUsageTier(pct, contextWindow) {
+    const [warnAt, criticalAt] = contextWindow >= 1_000_000 ? [12.5, 25] : [25, 50];
+    if (pct >= criticalAt)
+        return "critical";
+    if (pct >= warnAt)
+        return "warn";
+    return "ok";
 }
 export function cacheHitColor(value) {
     if (value < 30)

package/dist/model-info.js

@@ -5,7 +5,8 @@
  * model-info-widget/index.ts, MIT-style personal extension) so that the
  * TrackingEditor — which owns the editor slot for this extension — can keep
  * rendering the model label and thinking-level border glow that the original
- * widget provided. Self-contained: no imports beyond pi-tui's width utils.
+ * widget provided. Self-contained apart from pi-tui width utils, the shared
+ * ANSI quantiser (ansi-color.ts) and stripAnsi (format.ts).
  *
  * The port is intentional: pi allows exactly ONE custom editor (last
  * `setEditorComponent` writer wins). pi-skill-desc must own the slot to track
@@ -13,6 +14,8 @@
  * its visual behavior lives here instead. See docs/adr/0001.
  */
 import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { parseFgAnsiToRgb, rgbToFgAnsi } from "./ansi-color.js";
+import { stripAnsi } from "./format.js";
 const LEVEL_INDEX = {
     off: 0,
     minimal: 1,
@@ -36,117 +39,10 @@ const GLOW_FACTOR = 0.55;
 /** Space padding around the label inside the border (each side). */
 const LABEL_PAD = 1;
 // ---------------------------------------------------------------------------
-// Color helpers: theme ANSI → RGB → boosted glow ANSI
 // ---------------------------------------------------------------------------
-function stripAnsi(s) {
-    return s.replace(/\x1b\[[0-9;]*m/g, "");
-}
-const BASIC16 = [
-    [0, 0, 0],
-    [128, 0, 0],
-    [0, 128, 0],
-    [128, 128, 0],
-    [0, 0, 128],
-    [128, 0, 128],
-    [0, 128, 128],
-    [192, 192, 192],
-    [128, 128, 128],
-    [255, 0, 0],
-    [0, 255, 0],
-    [255, 255, 0],
-    [0, 0, 255],
-    [255, 0, 255],
-    [0, 255, 255],
-    [255, 255, 255],
-];
-const CUBE_VALUES = [0, 95, 135, 175, 215, 255];
-const GRAY_VALUES = Array.from({ length: 24 }, (_, i) => 8 + i * 10);
-function indexToRgb(n) {
-    if (n >= 0 && n < 16) {
-        const [r, g, b] = BASIC16[n] ?? [0, 0, 0];
-        return { r, g, b };
-    }
-    if (n >= 16 && n <= 231) {
-        const v = n - 16;
-        return {
-            r: CUBE_VALUES[Math.floor(v / 36)] ?? 0,
-            g: CUBE_VALUES[Math.floor(v / 6) % 6] ?? 0,
-            b: CUBE_VALUES[v % 6] ?? 0,
-        };
-    }
-    if (n >= 232 && n <= 255) {
-        const gray = 8 + (n - 232) * 10;
-        return { r: gray, g: gray, b: gray };
-    }
-    return null;
-}
-/** Parse a Theme.getFgAnsi() escape back into RGB. */
-function parseFgAnsiToRgb(theme, color) {
-    const ansi = theme.getFgAnsi(color);
-    const trueColor = ansi.match(/38;2;(\d+);(\d+);(\d+)/);
-    if (trueColor)
-        return {
-            r: Number(trueColor[1]),
-            g: Number(trueColor[2]),
-            b: Number(trueColor[3]),
-        };
-    const palette = ansi.match(/38;5;(\d+)/);
-    if (palette)
-        return indexToRgb(Number(palette[1]));
-    return null;
-}
-function findClosestCubeIndex(value) {
-    let minDist = Infinity;
-    let minIdx = 0;
-    for (let i = 0; i < CUBE_VALUES.length; i++) {
-        const dist = Math.abs(value - (CUBE_VALUES[i] ?? 0));
-        if (dist < minDist) {
-            minDist = dist;
-            minIdx = i;
-        }
-    }
-    return minIdx;
-}
-function findClosestGrayIndex(gray) {
-    let minDist = Infinity;
-    let minIdx = 0;
-    for (let i = 0; i < GRAY_VALUES.length; i++) {
-        const dist = Math.abs(gray - (GRAY_VALUES[i] ?? 0));
-        if (dist < minDist) {
-            minDist = dist;
-            minIdx = i;
-        }
-    }
-    return minIdx;
-}
-function colorDistance(r1, g1, b1, r2, g2, b2) {
-    const dr = r1 - r2;
-    const dg = g1 - g2;
-    const db = b1 - b2;
-    return dr * dr * 0.299 + dg * dg * 0.587 + db * db * 0.114;
-}
-/** Quantize an RGB value to the closest xterm-256 index (same as the theme loader). */
-function rgbTo256(r, g, b) {
-    const rIdx = findClosestCubeIndex(r);
-    const gIdx = findClosestCubeIndex(g);
-    const bIdx = findClosestCubeIndex(b);
-    const cubeR = CUBE_VALUES[rIdx] ?? 0;
-    const cubeG = CUBE_VALUES[gIdx] ?? 0;
-    const cubeB = CUBE_VALUES[bIdx] ?? 0;
-    const cubeIndex = 16 + 36 * rIdx + 6 * gIdx + bIdx;
-    const cubeDist = colorDistance(r, g, b, cubeR, cubeG, cubeB);
-    const gray = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
-    const grayIdx = findClosestGrayIndex(gray);
-    const grayValue = GRAY_VALUES[grayIdx] ?? 0;
-    const grayIndex = 232 + grayIdx;
-    const grayDist = colorDistance(r, g, b, grayValue, grayValue, grayValue);
-    const maxC = Math.max(r, g, b);
-    const minC = Math.min(r, g, b);
-    const spread = maxC - minC;
-    if (spread < 10 && grayDist < cubeDist)
-        return grayIndex;
-    return cubeIndex;
-}
+// Color helpers: theme token ANSI → RGB → boosted glow ANSI
+// (RGB/256 quantisation lives in ansi-color.ts, shared with the chrome tiers)
+// ---------------------------------------------------------------------------
 /**
  * Build a border color function for a thinking level: takes the theme's
  * per-level color and brightens it toward white proportionally to the level,
@@ -162,9 +58,7 @@ function buildGlow(theme, level) {
     const r = Math.round(base.r + (255 - base.r) * t);
     const g = Math.round(base.g + (255 - base.g) * t);
     const b = Math.round(base.b + (255 - base.b) * t);
-    const ansi = theme.getColorMode() === "truecolor"
-        ? `\x1b[38;2;${r};${g};${b}m`
-        : `\x1b[38;5;${rgbTo256(r, g, b)}m`;
+    const ansi = rgbToFgAnsi({ r, g, b }, theme.getColorMode());
     return (s) => `${ansi}${s}\x1b[39m`;
 }
 // ---------------------------------------------------------------------------

package/dist/utils.js

@@ -1,13 +1,13 @@
 // Barrel — preserves the old import surface while the codebase migrates to
 // focused modules. New code should import from the owning module directly:
 //   path-format → formatCwd, basenamePath, truncateBranch, truncatePath
-//   color-policy → stressColor, cacheHitColor, providerColor, effortColor
+//   color-policy → stressColor, cacheHitColor, contextUsageTier, providerColor, effortColor
 //   format → fmtTokens, formatDuration, formatModelLabel, formatProviderLabel, formatThinkingLabel, sanitizeStatus, stripAnsi
 //   layout → alignRight, fitSegmentsByPriority, isEditorBorderLine, findBottomBorderIndex, padRight, center, headerColumnWidths + width constants
 //   tip-policy → PI_BUILTIN_SLASH_COMMAND_NAMES, collectPiCommandNames, pickSlashCommandTips
 export { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
 export { formatCwd, basenamePath, truncateBranch, truncatePath } from "./path-format.js";
 export { fmtTokens, formatDuration, formatModelLabel, formatProviderLabel, formatThinkingLabel, sanitizeStatus, stripAnsi, } from "./format.js";
-export { stressColor, cacheHitColor, contextUsageColor, providerColor, effortColor, } from "./color-policy.js";
+export { stressColor, cacheHitColor, CONTEXT_TIER_HEX, CONTEXT_TIER_THEME_COLOR, contextUsageTier, providerColor, effortColor, } from "./color-policy.js";
 export { alignRight, fitSegmentsByPriority, isEditorBorderLine, findBottomBorderIndex, padRight, center, headerColumnWidths, MIN_LEFT_WIDTH, MIN_TIPS_WIDTH, MAX_TIPS_WIDTH, } from "./layout.js";
 export { PI_BUILTIN_SLASH_COMMAND_NAMES, collectPiCommandNames, pickSlashCommandTips, } from "./tip-policy.js";

package/package.json

@@ -33,7 +33,7 @@
     "@earendil-works/pi-coding-agent": "*",
     "@earendil-works/pi-tui": "*"
   },
-  "version": "0.12.1",
+  "version": "0.12.2",
   "files": [
     "dist",
     "src",

package/src/ansi-color.ts

@@ -0,0 +1,186 @@
+/**
+ * AnsiColor — hex → SGR foreground emission + the shared RGB/256 quantizer.
+ *
+ * Problem it solves: the pi theme resolves *named* tokens only
+ * (`theme.fg("success", s)`) and throws `Unknown theme color: …` for anything
+ * else, so a caller that needs an exact hex (context-pressure tiers) cannot
+ * reach the theme's own `fgAnsi`. Reimplementing the conversion per call site
+ * duplicated ~100 lines of color math that the thinking-border glow in
+ * model-info.ts had already written.
+ *
+ * Depth: one interface (`hexFg`) hides hex parsing, 256-cube quantization and
+ * terminal color-mode branching. Two adapters (chrome context tiers, model-info
+ * glow) justify the seam.
+ */
+/** Terminal color fidelity reported by the pi theme. */
+export type ColorMode = "truecolor" | "256color";
+
+export interface Rgb {
+  r: number;
+  g: number;
+  b: number;
+}
+
+/** Structural subset of the pi theme needed to read a token's ANSI sequence. */
+export interface FgAnsiSource {
+  getFgAnsi(color: string): string;
+}
+
+const BASIC16: ReadonlyArray<readonly [number, number, number]> = [
+  [0, 0, 0],
+  [128, 0, 0],
+  [0, 128, 0],
+  [128, 128, 0],
+  [0, 0, 128],
+  [128, 0, 128],
+  [0, 128, 128],
+  [192, 192, 192],
+  [128, 128, 128],
+  [255, 0, 0],
+  [0, 255, 0],
+  [255, 255, 0],
+  [0, 0, 255],
+  [255, 0, 255],
+  [0, 255, 255],
+  [255, 255, 255],
+];
+
+/** 6x6x6 color-cube channel values (indices 0-5). */
+const CUBE_VALUES = [0, 95, 135, 175, 215, 255];
+
+/** Grayscale ramp values (indices 232-255: 24 grays from 8 to 238). */
+const GRAY_VALUES = Array.from({ length: 24 }, (_, i) => 8 + i * 10);
+
+/** Anything but the truecolor marker means the 256-color ramp. */
+export function normalizeColorMode(mode: string | undefined): ColorMode {
+  return mode === "truecolor" ? "truecolor" : "256color";
+}
+
+export function indexToRgb(n: number): Rgb | null {
+  if (n >= 0 && n < 16) {
+    const [r, g, b] = BASIC16[n] ?? [0, 0, 0];
+    return { r, g, b };
+  }
+  if (n >= 16 && n <= 231) {
+    const v = n - 16;
+    return {
+      r: CUBE_VALUES[Math.floor(v / 36)] ?? 0,
+      g: CUBE_VALUES[Math.floor(v / 6) % 6] ?? 0,
+      b: CUBE_VALUES[v % 6] ?? 0,
+    };
+  }
+  if (n >= 232 && n <= 255) {
+    const gray = 8 + (n - 232) * 10;
+    return { r: gray, g: gray, b: gray };
+  }
+  return null;
+}
+
+function findClosestCubeIndex(value: number): number {
+  let minDist = Infinity;
+  let minIdx = 0;
+  for (let i = 0; i < CUBE_VALUES.length; i++) {
+    const dist = Math.abs(value - (CUBE_VALUES[i] ?? 0));
+    if (dist < minDist) {
+      minDist = dist;
+      minIdx = i;
+    }
+  }
+  return minIdx;
+}
+
+function findClosestGrayIndex(gray: number): number {
+  let minDist = Infinity;
+  let minIdx = 0;
+  for (let i = 0; i < GRAY_VALUES.length; i++) {
+    const dist = Math.abs(gray - (GRAY_VALUES[i] ?? 0));
+    if (dist < minDist) {
+      minDist = dist;
+      minIdx = i;
+    }
+  }
+  return minIdx;
+}
+
+function colorDistance(
+  r1: number,
+  g1: number,
+  b1: number,
+  r2: number,
+  g2: number,
+  b2: number,
+): number {
+  const dr = r1 - r2;
+  const dg = g1 - g2;
+  const db = b1 - b2;
+  // Weighted Euclidean distance (the eye is more sensitive to green).
+  return dr * dr * 0.299 + dg * dg * 0.587 + db * db * 0.114;
+}
+
+/** Quantize RGB to the closest xterm-256 index (same rule as the theme loader). */
+export function rgbTo256(r: number, g: number, b: number): number {
+  const rIdx = findClosestCubeIndex(r);
+  const gIdx = findClosestCubeIndex(g);
+  const bIdx = findClosestCubeIndex(b);
+  const cubeR = CUBE_VALUES[rIdx] ?? 0;
+  const cubeG = CUBE_VALUES[gIdx] ?? 0;
+  const cubeB = CUBE_VALUES[bIdx] ?? 0;
+  const cubeIndex = 16 + 36 * rIdx + 6 * gIdx + bIdx;
+  const cubeDist = colorDistance(r, g, b, cubeR, cubeG, cubeB);
+  const gray = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
+  const grayIdx = findClosestGrayIndex(gray);
+  const grayValue = GRAY_VALUES[grayIdx] ?? 0;
+  const grayIndex = 232 + grayIdx;
+  const grayDist = colorDistance(r, g, b, grayValue, grayValue, grayValue);
+  const spread = Math.max(r, g, b) - Math.min(r, g, b);
+  // Only consider grayscale when the color is nearly neutral AND closer.
+  if (spread < 10 && grayDist < cubeDist) return grayIndex;
+  return cubeIndex;
+}
+
+/** Parse `#RRGGBB`. Throws on malformed input — callers pass literals, not user data. */
+export function hexToRgb(hex: string): Rgb {
+  const cleaned = hex.startsWith("#") ? hex.slice(1) : hex;
+  if (cleaned.length !== 6) throw new Error(`Invalid hex color: ${hex}`);
+  const { r, g, b } = {
+    r: parseInt(cleaned.slice(0, 2), 16),
+    g: parseInt(cleaned.slice(2, 4), 16),
+    b: parseInt(cleaned.slice(4, 6), 16),
+  };
+  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
+    throw new Error(`Invalid hex color: ${hex}`);
+  }
+  return { r, g, b };
+}
+
+/** Parse a theme token's ANSI escape back into RGB (truecolor or 256 index). */
+export function parseFgAnsiToRgb(theme: FgAnsiSource, color: string): Rgb | null {
+  const ansi = theme.getFgAnsi(color);
+  const trueColor = ansi.match(/38;2;(\d+);(\d+);(\d+)/);
+  if (trueColor) {
+    return {
+      r: Number(trueColor[1]),
+      g: Number(trueColor[2]),
+      b: Number(trueColor[3]),
+    };
+  }
+  const palette = ansi.match(/38;5;(\d+)/);
+  if (palette) return indexToRgb(Number(palette[1]));
+  return null;
+}
+
+/** SGR foreground sequence for an RGB value at the terminal's color fidelity. */
+export function rgbToFgAnsi({ r, g, b }: Rgb, mode: string | undefined): string {
+  return normalizeColorMode(mode) === "truecolor"
+    ? `\x1b[38;2;${r};${g};${b}m`
+    : `\x1b[38;5;${rgbTo256(r, g, b)}m`;
+}
+
+/**
+ * Color `s` with an exact hex, bypassing the theme's named-token lookup.
+ * Returned painter resets only the foreground (`\x1b[39m`), matching `theme.fg`.
+ */
+export function hexFg(hex: string, mode: string | undefined): (s: string) => string {
+  const ansi = rgbToFgAnsi(hexToRgb(hex), mode);
+  return (s: string) => `${ansi}${s}\x1b[39m`;
+}

package/src/chrome-composition.ts

@@ -8,7 +8,7 @@
  * thus required touching 3-4 modules with no locality.
  *
  * Depth: one small interface (glyphs + isAscii + fg/dim/glow + format* helpers) hides
- * icon-mode resolution, the SAFETY theme cast, colour application, and the chrome format
+ * icon-mode resolution, the SAFETY theme cast, color application, and the chrome format
  * entry points (context bar, telemetry, tokens, run activity, stall). Callers learn one
  * shape; LiveBorder's islands become thin lookups.
  *
@@ -26,20 +26,30 @@ import type { RunActivitySnapshot } from "./run-activity.js";
 import { formatRunActivityTopRight } from "./run-activity.js";
 import type { TelemetryConfig, TurnTelemetry } from "./telemetry.js";
 import { formatTelemetryTokens, formatTurnDuration, formatTurnTelemetry } from "./telemetry.js";
+import { hexFg } from "./ansi-color.js";
 
 /** Typed fg surface — the only theme capability the chrome needs. */
 export interface ChromeThemeLike {
   fg(style: string, s: string): string;
+  fgHex(hex: string, s: string): string;
 }
 
 /**
- * Read the live pi theme into a typed { fg } surface. The cast is a SAFETY seam — a pi theme
- * missing `fg` degrades to identity rather than throwing, keeping the chrome resilient.
+ * Read the live pi theme into a typed { fg, fgHex } surface. The cast is a SAFETY
+ * seam — a pi theme missing `fg` degrades to identity rather than throwing, keeping
+ * the chrome resilient. `fgHex` needs no theme call at all: the named-token lookup
+ * rejects raw hex, so hex is rendered straight to SGR at the theme's color mode.
  */
 export function adaptTheme(rawTheme: unknown): ChromeThemeLike {
-  const t = rawTheme as { fg?: (style: string, s: string) => string }; // SAFETY: pi theme seam — fg is optional, guarded below
+  const t = rawTheme as {
+    fg?: (style: string, s: string) => string;
+    // SAFETY: pi theme seam — getColorMode is optional, defaulted below
+    getColorMode?: () => string;
+  };
+  const mode = typeof t.getColorMode === "function" ? t.getColorMode() : undefined;
   return {
     fg: (style, s) => (typeof t.fg === "function" ? t.fg(style, s) : s),
+    fgHex: (hex, s) => hexFg(hex, mode)(s),
   };
 }
 
@@ -80,7 +90,7 @@ export class ChromeComposition {
     this.glow = opts.glow ?? resolveGlow(rawTheme);
   }
 
-  /** Colour a string with a theme style (derived once, cast cached). */
+  /** Color a string with a theme style (derived once, cast cached). */
   fg(style: string, s: string): string {
     return this.theme.fg(style, s);
   }

package/src/chrome-state.ts

@@ -21,7 +21,13 @@ import type { FooterState, UsageTotals } from "./state.js";
 import { getUsageTotals } from "./state.js";
 import type { IconGlyphs } from "./icons.js";
 import type { Theme } from "./layout.js";
-import { cacheHitColor, contextUsageColor } from "./color-policy.js";
+import {
+  cacheHitColor,
+  CONTEXT_TIER_HEX,
+  CONTEXT_TIER_THEME_COLOR,
+  contextUsageTier,
+  type ContextTier,
+} from "./color-policy.js";
 import { fmtTokens } from "./format.js";
 
 export interface ContextUsage {
@@ -44,15 +50,31 @@ export interface ChromeSnapshot {
 // Re-exported from footer.ts for backward compatibility.
 // ---------------------------------------------------------------------------
 
-function renderBar(theme: Theme, pct: number, barWidth: number, ascii: boolean): string {
+/**
+ * Painter for one context tier: exact hex when the live theme can emit raw hex,
+ * else the nearest semantic token (tests/mocks, themes without color mode).
+ */
+function contextPainter(theme: Theme, tier: ContextTier): (s: string) => string {
+  const hex = CONTEXT_TIER_HEX[tier];
+  const fgHex = theme.fgHex;
+  if (fgHex) return (s) => fgHex.call(theme, hex, s);
+  return (s) => theme.fg(CONTEXT_TIER_THEME_COLOR[tier], s);
+}
+
+function renderBar(
+  theme: Theme,
+  paint: (s: string) => string,
+  pct: number,
+  barWidth: number,
+  ascii: boolean,
+): string {
   const filled = Math.max(0, Math.min(barWidth, Math.round((pct / 100) * barWidth)));
   const empty = barWidth - filled;
-  const color = contextUsageColor(pct);
   const filledCell = ascii ? "#" : "█";
   const emptyCell = ascii ? "-" : "░";
   return (
     theme.fg("dim", "[") +
-    theme.fg(color, filledCell.repeat(filled)) +
+    paint(filledCell.repeat(filled)) +
     theme.fg("dim", emptyCell.repeat(empty)) +
     theme.fg("dim", "]")
   );
@@ -70,13 +92,13 @@ export function formatContextBar(
   const contextWindow = contextUsage?.contextWindow ?? 0;
   if (contextWindow <= 0) return "";
   const contextPct = contextUsage?.percent ?? 0;
-  const contextColor = contextUsageColor(contextPct);
-  const pctText = theme.fg(contextColor, `${contextPct.toFixed(1)}%`);
+  const paint = contextPainter(theme, contextUsageTier(contextPct, contextWindow));
+  const pctText = paint(`${contextPct.toFixed(1)}%`);
   const contextTokens = contextUsage?.tokens ?? 0;
-  const ctxText = `${theme.fg(contextColor, fmtTokens(contextTokens))}${theme.fg("dim", "/")}${theme.fg(contextColor, fmtTokens(contextWindow))}`;
+  const ctxText = `${paint(fmtTokens(contextTokens))}${theme.fg("dim", "/")}${paint(fmtTokens(contextWindow))}`;
   const baseCore = `${pctText} ${theme.fg("dim", "·")} ${ctxText}`;
   const base = showIconBar
-    ? `${theme.fg(contextColor, glyphs.context)} ${renderBar(theme, contextPct, barWidth, isAscii)} ${baseCore}`
+    ? `${paint(glyphs.context)} ${renderBar(theme, paint, contextPct, barWidth, isAscii)} ${baseCore}`
     : baseCore;
   const rate = cacheHitRate !== undefined && Number.isFinite(cacheHitRate) ? cacheHitRate : 0;
   const cacheText = `${glyphs.cacheHit} ${rate.toFixed(1)}%`;

package/src/color-policy.ts

@@ -7,21 +7,40 @@ export function stressColor(value: number, warn = 70, danger = 90): ThemeColor {
   return "accent";
 }
 
-export function contextUsageColor(pct: number): ThemeColor {
-  // 12.5 / 25 / 50 quotas — four urgency tiers, increasingly aggressive as context fills.
-  // 0 – 12.5%  dim      — plenty of headroom, visually quiet.
-  // 12.5 – 25% accent   — first nudge, noticeable but calm.
-  // 25 – 50%   warning  — half consumed, needs attention.
-  // 50 – 100%  error     — critical, about to run out.
-  // Uses theme semantic tokens (dim/accent/warning/error) so the progression
-  // respects the active theme and remains legible on light/dark/custom palettes.
-  // A fixed hex palette (e.g. grey→sky→amber→red) would be more vivid but
-  // would ignore the user's theme and can clash with light backgrounds —
-  // semantic tokens keep the "aggressive" ordering while staying theme-coherent.
-  if (pct >= 50) return "error";
-  if (pct >= 25) return "warning";
-  if (pct >= 12.5) return "accent";
-  return "dim";
+/** Context-pressure tier: green → amber → red as the window fills. */
+export type ContextTier = "ok" | "warn" | "critical";
+
+/**
+ * Fixed tier palette (nord green / nord yellow / dark red). Hex, not theme tokens:
+ * the tiers are an alarm scale the user picked explicitly, so they must read the
+ * same on every theme. `CONTEXT_TIER_THEME_COLOR` is only the fallback for themes
+ * that cannot emit raw hex.
+ */
+export const CONTEXT_TIER_HEX: Record<ContextTier, string> = {
+  ok: "#A3BE8C",
+  warn: "#EBCB8B",
+  critical: "#9A3939",
+};
+
+/** Semantic token approximating each tier — used when raw hex is unavailable. */
+export const CONTEXT_TIER_THEME_COLOR: Record<ContextTier, ThemeColor> = {
+  ok: "success",
+  warn: "warning",
+  critical: "error",
+};
+
+/**
+ * Tier from the share of the context window consumed.
+ *
+ * Budgets scale with the window: a 1M window only earns 12.5 / 25 % of slack
+ * before the same alarm, while smaller windows (compacted far sooner) keep the
+ * looser 25 / 50 % steps.
+ */
+export function contextUsageTier(pct: number, contextWindow: number): ContextTier {
+  const [warnAt, criticalAt] = contextWindow >= 1_000_000 ? [12.5, 25] : [25, 50];
+  if (pct >= criticalAt) return "critical";
+  if (pct >= warnAt) return "warn";
+  return "ok";
 }
 
 export function cacheHitColor(value: number): ThemeColor {

package/src/layout.ts

@@ -6,6 +6,12 @@ export { stripAnsi } from "./format.js";
 
 export interface Theme {
   fg(style: string, s: string): string;
+  /**
+   * Optional raw-hex foreground. The pi theme resolves named tokens only and
+   * throws on unknown names, so exact-hex callers (context tiers) need this
+   * escape hatch; adapters that cannot provide it fall back to semantic tokens.
+   */
+  fgHex?(hex: string, s: string): string;
 }
 
 export type PrioritizedSegment = {

package/src/model-info.ts

@@ -5,7 +5,8 @@
  * model-info-widget/index.ts, MIT-style personal extension) so that the
  * TrackingEditor — which owns the editor slot for this extension — can keep
  * rendering the model label and thinking-level border glow that the original
- * widget provided. Self-contained: no imports beyond pi-tui's width utils.
+ * widget provided. Self-contained apart from pi-tui width utils, the shared
+ * ANSI quantizer (ansi-color.ts) and stripAnsi (format.ts).
  *
  * The port is intentional: pi allows exactly ONE custom editor (last
  * `setEditorComponent` writer wins). pi-skill-desc must own the slot to track
@@ -13,6 +14,8 @@
  * its visual behavior lives here instead. See docs/adr/0001.
  */
 import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { parseFgAnsiToRgb, rgbToFgAnsi } from "./ansi-color.js";
+import { stripAnsi } from "./format.js";
 
 /** Structural subset of pi's Theme used by the glow/label rendering. */
 export interface ThemeLike {
@@ -62,133 +65,10 @@ const GLOW_FACTOR = 0.55;
 const LABEL_PAD = 1;
 
 // ---------------------------------------------------------------------------
-// Color helpers: theme ANSI → RGB → boosted glow ANSI
 // ---------------------------------------------------------------------------
-
-function stripAnsi(s: string): string {
-  return s.replace(/\x1b\[[0-9;]*m/g, "");
-}
-
-const BASIC16: Array<[number, number, number]> = [
-  [0, 0, 0],
-  [128, 0, 0],
-  [0, 128, 0],
-  [128, 128, 0],
-  [0, 0, 128],
-  [128, 0, 128],
-  [0, 128, 128],
-  [192, 192, 192],
-  [128, 128, 128],
-  [255, 0, 0],
-  [0, 255, 0],
-  [255, 255, 0],
-  [0, 0, 255],
-  [255, 0, 255],
-  [0, 255, 255],
-  [255, 255, 255],
-];
-const CUBE_VALUES = [0, 95, 135, 175, 215, 255];
-const GRAY_VALUES = Array.from({ length: 24 }, (_, i) => 8 + i * 10);
-
-function indexToRgb(n: number): { r: number; g: number; b: number } | null {
-  if (n >= 0 && n < 16) {
-    const [r, g, b] = BASIC16[n] ?? [0, 0, 0];
-    return { r, g, b };
-  }
-  if (n >= 16 && n <= 231) {
-    const v = n - 16;
-    return {
-      r: CUBE_VALUES[Math.floor(v / 36)] ?? 0,
-      g: CUBE_VALUES[Math.floor(v / 6) % 6] ?? 0,
-      b: CUBE_VALUES[v % 6] ?? 0,
-    };
-  }
-  if (n >= 232 && n <= 255) {
-    const gray = 8 + (n - 232) * 10;
-    return { r: gray, g: gray, b: gray };
-  }
-  return null;
-}
-
-/** Parse a Theme.getFgAnsi() escape back into RGB. */
-function parseFgAnsiToRgb(
-  theme: ThemeLike,
-  color: string,
-): { r: number; g: number; b: number } | null {
-  const ansi = theme.getFgAnsi(color);
-  const trueColor = ansi.match(/38;2;(\d+);(\d+);(\d+)/);
-  if (trueColor)
-    return {
-      r: Number(trueColor[1]),
-      g: Number(trueColor[2]),
-      b: Number(trueColor[3]),
-    };
-  const palette = ansi.match(/38;5;(\d+)/);
-  if (palette) return indexToRgb(Number(palette[1]));
-  return null;
-}
-
-function findClosestCubeIndex(value: number): number {
-  let minDist = Infinity;
-  let minIdx = 0;
-  for (let i = 0; i < CUBE_VALUES.length; i++) {
-    const dist = Math.abs(value - (CUBE_VALUES[i] ?? 0));
-    if (dist < minDist) {
-      minDist = dist;
-      minIdx = i;
-    }
-  }
-  return minIdx;
-}
-
-function findClosestGrayIndex(gray: number): number {
-  let minDist = Infinity;
-  let minIdx = 0;
-  for (let i = 0; i < GRAY_VALUES.length; i++) {
-    const dist = Math.abs(gray - (GRAY_VALUES[i] ?? 0));
-    if (dist < minDist) {
-      minDist = dist;
-      minIdx = i;
-    }
-  }
-  return minIdx;
-}
-
-function colorDistance(
-  r1: number,
-  g1: number,
-  b1: number,
-  r2: number,
-  g2: number,
-  b2: number,
-): number {
-  const dr = r1 - r2;
-  const dg = g1 - g2;
-  const db = b1 - b2;
-  return dr * dr * 0.299 + dg * dg * 0.587 + db * db * 0.114;
-}
-
-/** Quantize an RGB value to the closest xterm-256 index (same as the theme loader). */
-function rgbTo256(r: number, g: number, b: number): number {
-  const rIdx = findClosestCubeIndex(r);
-  const gIdx = findClosestCubeIndex(g);
-  const bIdx = findClosestCubeIndex(b);
-  const cubeR = CUBE_VALUES[rIdx] ?? 0;
-  const cubeG = CUBE_VALUES[gIdx] ?? 0;
-  const cubeB = CUBE_VALUES[bIdx] ?? 0;
-  const cubeIndex = 16 + 36 * rIdx + 6 * gIdx + bIdx;
-  const cubeDist = colorDistance(r, g, b, cubeR, cubeG, cubeB);
-  const gray = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
-  const grayIdx = findClosestGrayIndex(gray);
-  const grayValue = GRAY_VALUES[grayIdx] ?? 0;
-  const grayIndex = 232 + grayIdx;
-  const grayDist = colorDistance(r, g, b, grayValue, grayValue, grayValue);
-  const maxC = Math.max(r, g, b);
-  const minC = Math.min(r, g, b);
-  const spread = maxC - minC;
-  if (spread < 10 && grayDist < cubeDist) return grayIndex;
-  return cubeIndex;
-}
+// Color helpers: theme token ANSI → RGB → boosted glow ANSI
+// (RGB/256 quantization lives in ansi-color.ts, shared with the chrome tiers)
+// ---------------------------------------------------------------------------
 
 /**
  * Build a border color function for a thinking level: takes the theme's
@@ -205,10 +85,7 @@ function buildGlow(theme: ThemeLike, level: string): (s: string) => string {
   const r = Math.round(base.r + (255 - base.r) * t);
   const g = Math.round(base.g + (255 - base.g) * t);
   const b = Math.round(base.b + (255 - base.b) * t);
-  const ansi =
-    theme.getColorMode() === "truecolor"
-      ? `\x1b[38;2;${r};${g};${b}m`
-      : `\x1b[38;5;${rgbTo256(r, g, b)}m`;
+  const ansi = rgbToFgAnsi({ r, g, b }, theme.getColorMode());
   return (s: string) => `${ansi}${s}\x1b[39m`;
 }
 

package/src/utils.ts

@@ -1,14 +1,14 @@
 // Barrel — preserves the old import surface while the codebase migrates to
 // focused modules. New code should import from the owning module directly:
 //   path-format → formatCwd, basenamePath, truncateBranch, truncatePath
-//   color-policy → stressColor, cacheHitColor, providerColor, effortColor
+//   color-policy → stressColor, cacheHitColor, contextUsageTier, providerColor, effortColor
 //   format → fmtTokens, formatDuration, formatModelLabel, formatProviderLabel, formatThinkingLabel, sanitizeStatus, stripAnsi
 //   layout → alignRight, fitSegmentsByPriority, isEditorBorderLine, findBottomBorderIndex, padRight, center, headerColumnWidths + width constants
 //   tip-policy → PI_BUILTIN_SLASH_COMMAND_NAMES, collectPiCommandNames, pickSlashCommandTips
 
 export { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
 
-export type { ThemeColor, ThinkingLevel } from "./color-policy.js";
+export type { ThemeColor, ThinkingLevel, ContextTier } from "./color-policy.js";
 export type { Theme, PrioritizedSegment } from "./layout.js";
 
 export { formatCwd, basenamePath, truncateBranch, truncatePath } from "./path-format.js";
@@ -24,7 +24,9 @@ export {
 export {
   stressColor,
   cacheHitColor,
-  contextUsageColor,
+  CONTEXT_TIER_HEX,
+  CONTEXT_TIER_THEME_COLOR,
+  contextUsageTier,
   providerColor,
   effortColor,
 } from "./color-policy.js";