@semalt-ai/code 1.19.0 → 1.20.0

package/lib/ui/status-bar.js

@@ -1,8 +1,15 @@
 'use strict';
 
-const { RST, DIM, FG_RED, FG_DARK, SPINNER_DEFS } = require('./ansi');
-const { UI_THEME } = require('./theme');
+const { RST, DIM, SPINNER_DEFS } = require('./ansi');
+const { UI_THEME, FG_RED, FG_DARK, colorEnabled } = require('./theme');
 const { stripAnsi, termWidth } = require('./utils');
+const { AnimDriver, TICKS_PER_SECOND } = require('./anim');
+
+// States that animate the status-bar spinner (and, in the live region below,
+// the per-tool running glyph + elapsed meter). While in one of these the
+// single driver repaints at the base (100 ms) cadence; otherwise it only
+// repaints for the clock (1 Hz), and when idle-paused it stops entirely.
+const ANIM_STATES = new Set(['thinking', 'streaming', 'tool', 'waiting_download']);
 
 // Compact token count for the estimated split (Variant B): the base/working
 // estimates are shown abbreviated (e.g. 12k, 5.6k, 200k) to keep the row short
@@ -48,37 +55,54 @@ class FullStatusBar {
     this._streamTokens = 0;
     this._tokensSinceUpdate = 0;
     this._animIdx = 0;
-    this._animTimer = null;
     this._paused = false;
-    // Clock tick drives the `HH:MM:SS` part of the right-hand side. Every
-    // tick just notifies the orchestrator to re-push the live region — the
-    // compound erase+redraw goes through the writer's queue so a tick
-    // falling mid-bubble can't produce a torn frame. The tick is what fights
-    // user scrollback while idle, so pause()/resume() START/STOP this timer
-    // (see _startClock/_stopClock) rather than gating _notify with a flag.
-    this._clockTimer = null;
-    this._startClock();
-  }
-
-  // Idempotent clock control. pause() stops the once-per-second redraw so the
-  // terminal viewport can scroll freely while idle; resume() restarts it.
-  // Guarded so repeated pause()/resume() cycles never stack a second timer.
-  _startClock() {
-    if (this._clockTimer) return;
-    this._clockTimer = setInterval(() => this._notify(), 1000);
+    this._destroyed = false;
+    // Single animation driver (Phase 3). Replaces the two independent
+    // setIntervals (1 Hz clock + 100 ms spinner) with one timer. Both the
+    // clock field and the spinner glyph are now *subscribers*: each tick the
+    // driver advances one frame counter, runs both subscribers, and performs
+    // exactly one coordinated repaint (through _notify → the orchestrator →
+    // writer.setLive, which also re-renders the live-region activity rows, so
+    // the per-tool running glyph + elapsed meter ride the same repaint). The
+    // driver runs while there's something to animate OR while the clock should
+    // tick; when idle-paused with nothing animating it STOPS — preserving the
+    // 5404bd0 idle-scroll fix (no periodic redraw → the viewport scrolls).
+    this._driver = new AnimDriver();
+    this._driver.onRepaint(() => this._notify());
+    // Clock subscriber: request a repaint once per second, and only while not
+    // idle-paused (the clock tick is what fought user scrollback).
+    this._driver.subscribe((frame) => !this._paused && (frame % TICKS_PER_SECOND === 0));
+    // Spinner subscriber: while in an animating state, advance the glyph frame
+    // every tick and request the repaint (the fine 100 ms cadence).
+    this._driver.subscribe((frame) => {
+      if (!ANIM_STATES.has(this._state)) return false;
+      this._animIdx = frame;
+      return true;
+    });
+    this._syncDriver();
   }
 
-  _stopClock() {
-    if (this._clockTimer) { clearInterval(this._clockTimer); this._clockTimer = null; }
+  // Start/stop the single driver to match the current need: run while there is
+  // something to animate (ANIM_STATES) OR while the clock should tick (not
+  // idle-paused); stop when neither holds. Idempotent (start()/stop() guard
+  // against stacking), so repeated pause/resume cycles never leak a timer.
+  _syncDriver() {
+    if (this._destroyed) return;
+    const animating = ANIM_STATES.has(this._state);
+    if (!this._paused || animating) this._driver.start();
+    else this._driver.stop();
   }
 
-  // pause() genuinely halts the periodic redraw (clears the clock timer) so a
-  // forced redraw no longer snaps the viewport to the bottom while the user
-  // scrolls up. Event-driven redraws (update/updateMetrics/setCost/spinner)
-  // are unaffected — they call _notify directly. resume() restarts the clock
+  // pause() halts the periodic 1 Hz clock repaint so a forced redraw no longer
+  // snaps the viewport to the bottom while the user scrolls up. If a tool is
+  // mid-flight (an ANIM_STATE) the driver keeps running for the spinner — but
+  // the clock subscriber goes quiet, so there's no 1 Hz scroll-fighting tick.
+  // When nothing is animating, _syncDriver stops the driver outright (idle =
+  // no periodic repaint). Event-driven redraws (update/updateMetrics/setCost)
+  // are unaffected — they call _notify directly. resume() restarts the driver
   // and forces one repaint so the viewport returns to the input prompt.
-  pause()  { this._paused = true;  this._stopClock(); }
-  resume() { this._paused = false; this._startClock(); this._notify(); }
+  pause()  { this._paused = true;  this._syncDriver(); }
+  resume() { this._paused = false; this._syncDriver(); this._notify(); }
 
   setModel(name) {
     this._model = name || '';
@@ -97,9 +121,10 @@ class FullStatusBar {
     this._state = state || 'idle';
     if (label !== undefined) this._label = label;
     // A state change means work is happening — keep the not-paused ⇒
-    // clock-running invariant (idempotent, so no stacked timer).
+    // driver-running invariant. (update('idle') unconditionally restarts the
+    // driver; the startup re-sync in chat.js re-pauses it if the field is
+    // already idle — see status-bar-resync.test.js.)
     this._paused = false;
-    this._startClock();
 
     if (state === 'streaming') {
       if (!this._streamStart) { this._streamStart = Date.now(); this._streamTokens = 0; }
@@ -107,12 +132,13 @@ class FullStatusBar {
       this._streamStart = null; this._streamTokens = 0; this._speed = 0;
     }
 
-    const animStates = ['thinking', 'streaming', 'tool', 'waiting_download'];
-    if (animStates.includes(state) && !this._animTimer) {
-      this._animTimer = setInterval(() => { this._animIdx++; this._notify(); }, 100);
-    } else if (!animStates.includes(state) && this._animTimer) {
-      clearInterval(this._animTimer); this._animTimer = null; this._animIdx = 0;
-    }
+    // Leaving an animating state resets the spinner frame so the next run
+    // starts at frame 0 rather than wherever the counter happened to be.
+    if (!ANIM_STATES.has(this._state)) this._animIdx = 0;
+    // One driver, started/stopped as a unit (no per-state timer). The spinner
+    // subscriber animates while in an ANIM_STATE; the clock subscriber ticks
+    // at 1 Hz while not paused.
+    this._syncDriver();
     this._notify();
   }
 
@@ -173,9 +199,9 @@ class FullStatusBar {
   // to build the live region. ALWAYS returns a string — the status row is a
   // permanent fixture of the live region, never omitted. Missing data
   // renders as a short placeholder ("—") so the row width is stable.
-  // Pausing (idle scroll) stops the periodic *tick* (the clock timer is
-  // cleared) but the row itself is still produced whenever the composer asks
-  // for it — an event-driven _notify still repaints normally.
+  // Pausing (idle scroll) stops the periodic *tick* (the driver is stopped)
+  // but the row itself is still produced whenever the composer asks for it —
+  // an event-driven _notify still repaints normally.
   renderLine() {
     const layout = this._layout;
     const cols = layout.cols;
@@ -214,22 +240,31 @@ class FullStatusBar {
     // tokens, keeping the model name readable to the last. Never chop a
     // field mid-character.
     const tokenField = this._buildTokenField();
+    // Per-field colour (Phase 2.5): the right chrome is no longer wholesale-DIM
+    // — the persistent footer was the single most washed-out region. The model
+    // (the field that matters most) renders in accent; tokens/time/cost/speed
+    // are subtle (one step up from dim). Only the separators stay DIM. Under
+    // NO_COLOR/non-TTY every field colour resolves to ''.
+    const on = colorEnabled();
+    const cSubtle = on ? UI_THEME.subtle : '';
+    const cModel  = on ? UI_THEME.accent : '';
     const fields = [
-      { visible: timePart,           ansi: timePart,           priority: 2 },
-      { visible: this._model || '—', ansi: this._model || '—', priority: 4 },
-      { visible: tokenField.visible, ansi: tokenField.ansi,    priority: 3 },
+      { visible: timePart,           ansi: timePart,           color: cSubtle, priority: 2 },
+      { visible: this._model || '—', ansi: this._model || '—', color: cModel,  priority: 4 },
+      { visible: tokenField.visible, ansi: tokenField.ansi,    color: cSubtle, priority: 3 },
     ];
     if (this._cost) {
       const c = `${this._cost}`;
-      fields.push({ visible: c, ansi: c, priority: 2 });
+      fields.push({ visible: c, ansi: c, color: cSubtle, priority: 2 });
     }
     if (state === 'streaming' && this._speed > 0) {
       const s = `${this._speed} t/s`;
-      fields.push({ visible: s, ansi: s, priority: 1 });
+      fields.push({ visible: s, ansi: s, color: cSubtle, priority: 1 });
     }
 
     const sep = ' · ';
-    const sepAnsi = ` ${RST}${DIM}·${RST}${DIM} `;
+    // Separators stay DIM; fields carry their own colour (no outer DIM wrap).
+    const sepAnsi = on ? ` ${DIM}·${RST} ` : ' · ';
     const leftWidth = termWidth(stripAnsi(left));
     // Keep at least one space between left and right chrome when left is
     // non-empty; when idle (left == '') the right can sit at column 0.
@@ -263,7 +298,8 @@ class FullStatusBar {
     }
 
     const rightWidth = widthOf(keep);
-    const rightAnsi = `${DIM}${keep.map((f) => f.ansi).join(sepAnsi)}${RST}`;
+    const R = on ? RST : '';
+    const rightAnsi = keep.map((f) => `${f.color || ''}${f.ansi}${R}`).join(sepAnsi);
     const padding = Math.max(gap > 0 ? gap : 0, maxCols - leftWidth - rightWidth);
     return left + ' '.repeat(padding) + rightAnsi;
   }
@@ -293,11 +329,16 @@ class FullStatusBar {
     const pct = limit > 0 ? Math.round((used / limit) * 100) : 0;
     const limitStr = limit.toLocaleString();
     const visible = `${estPrefix}${usedStr} / ${limitStr} tok (${pct}%)`;
+    // The pct override resets and restores the field's base colour (subtle),
+    // not the old outer DIM. Gated on colour: under NO_COLOR/non-TTY the field
+    // is plain text so no ANSI leaks into a piped status read.
     let pctAnsi = `${pct}%`;
-    if (pct >= 90) {
-      pctAnsi = `${RST}${UI_THEME.error}${pct}%${RST}${DIM}`;
-    } else if (pct >= 70) {
-      pctAnsi = `${RST}${UI_THEME.warning}${pct}%${RST}${DIM}`;
+    if (colorEnabled()) {
+      if (pct >= 90) {
+        pctAnsi = `${RST}${UI_THEME.error}${pct}%${RST}${UI_THEME.subtle}`;
+      } else if (pct >= 70) {
+        pctAnsi = `${RST}${UI_THEME.warning}${pct}%${RST}${UI_THEME.subtle}`;
+      }
     }
     const ansi = `${estPrefix}${usedStr} / ${limitStr} tok (${pctAnsi})`;
     return { visible, ansi };
@@ -308,7 +349,8 @@ class FullStatusBar {
   // affecting surrounding rows.
   renderSeparator() {
     const cols = this._layout.cols;
-    return `${FG_DARK}${'─'.repeat(Math.max(0, cols - 1))}${RST}`;
+    const rule = '─'.repeat(Math.max(0, cols - 1));
+    return colorEnabled() ? `${FG_DARK}${rule}${RST}` : rule;
   }
 
   // Back-compat: older call sites (command.js, create-ui.js) call
@@ -319,17 +361,17 @@ class FullStatusBar {
   _renderBar()    { this._notify(); }
 
   _notify() {
-    // Every redraw — periodic tick AND event-driven (update/updateMetrics/
-    // setCost/spinner) — flows through here. Pausing is done by stopping the
-    // clock timer (see pause/_stopClock), NOT by gating here: a guard would
-    // also suppress the event-driven repaints that must keep working while
-    // idle scroll is paused.
+    // Every redraw — the driver's coordinated tick AND event-driven
+    // (update/updateMetrics/setCost) — flows through here. Pausing is done by
+    // stopping the driver (see pause/_syncDriver), NOT by gating here: a guard
+    // would also suppress the event-driven repaints that must keep working
+    // while idle scroll is paused.
     this._onChange();
   }
 
   destroy() {
-    if (this._animTimer) { clearInterval(this._animTimer); this._animTimer = null; }
-    this._stopClock();
+    this._destroyed = true;
+    this._driver.stop();
   }
 }
 

package/lib/ui/stream.js

@@ -8,6 +8,24 @@ const writer = require('./writer');
 
 const THINK_OPEN = '<think>', THINK_CLOSE = '</think>';
 
+// Per-line syntax highlight for a code-block body line. Module-level (uses no
+// instance state) so the TUI styler (lib/ui/md-stream.js) can compose the SAME
+// highlighter the non-TUI StreamRenderer uses — one implementation, no drift.
+// Resets to `${RST}${FG_CODE_BG}` after each span so the caller's code-block
+// background survives to the end of the line (where an EL fills it to the edge).
+function colorizeCode(line) {
+  const C_KW = '\x1b[38;5;176m', C_STR = '\x1b[38;5;114m', C_CMT = '\x1b[38;5;242m', C_NUM = '\x1b[38;5;215m', C_RST = `${RST}${FG_CODE_BG}`;
+  let result = '', i = 0;
+  while (i < line.length) {
+    if (line[i] === '#' || (line[i] === '/' && line[i+1] === '/')) { result += `${C_CMT}${line.slice(i)}${C_RST}`; break; }
+    if (line[i] === '"' || line[i] === "'") { const quote = line[i]; let j = i+1; while (j < line.length && line[j] !== quote) { if (line[j] === '\\') j++; j++; } j = Math.min(j+1, line.length); result += `${C_STR}${line.slice(i,j)}${C_RST}`; i = j; continue; }
+    if (/[a-zA-Z_]/.test(line[i])) { let j = i; while (j < line.length && /\w/.test(line[j])) j++; const word = line.slice(i,j); result += KEYWORDS.has(word) ? `${C_KW}${word}${C_RST}` : word; i = j; continue; }
+    if (/\d/.test(line[i])) { let j = i; while (j < line.length && /[\d.]/.test(line[j])) j++; result += `${C_NUM}${line.slice(i,j)}${C_RST}`; i = j; continue; }
+    result += line[i++];
+  }
+  return result;
+}
+
 class StreamRenderer {
   constructor(options) {
     const opts = options || {};
@@ -137,18 +155,7 @@ class StreamRenderer {
     writer.scrollback(`  ${FG_TAG}◆ ${name}${RST} ${FG_DARK}${preview}${RST}`);
   }
 
-  _colorizeCode(line) {
-    const C_KW = '\x1b[38;5;176m', C_STR = '\x1b[38;5;114m', C_CMT = '\x1b[38;5;242m', C_NUM = '\x1b[38;5;215m', C_RST = `${RST}${FG_CODE_BG}`;
-    let result = '', i = 0;
-    while (i < line.length) {
-      if (line[i] === '#' || (line[i] === '/' && line[i+1] === '/')) { result += `${C_CMT}${line.slice(i)}${C_RST}`; break; }
-      if (line[i] === '"' || line[i] === "'") { const quote = line[i]; let j = i+1; while (j < line.length && line[j] !== quote) { if (line[j] === '\\') j++; j++; } j = Math.min(j+1, line.length); result += `${C_STR}${line.slice(i,j)}${C_RST}`; i = j; continue; }
-      if (/[a-zA-Z_]/.test(line[i])) { let j = i; while (j < line.length && /\w/.test(line[j])) j++; const word = line.slice(i,j); result += KEYWORDS.has(word) ? `${C_KW}${word}${C_RST}` : word; i = j; continue; }
-      if (/\d/.test(line[i])) { let j = i; while (j < line.length && /[\d.]/.test(line[j])) j++; result += `${C_NUM}${line.slice(i,j)}${C_RST}`; i = j; continue; }
-      result += line[i++];
-    }
-    return result;
-  }
+  _colorizeCode(line) { return colorizeCode(line); }
 }
 
-module.exports = { StreamRenderer };
+module.exports = { StreamRenderer, colorizeCode };

package/lib/ui/theme.js

@@ -1,40 +1,113 @@
 'use strict';
 
-const { bg256, fg256, bgRGB, fgRGB } = require('./ansi');
+// THE single palette table (Output Refactor — Phase 2.5).
+//
+// Every colour the chrome surfaces use is defined here: tool-status lines,
+// the status bar, diff bodies, the web-activity summary, debug/meta blocks,
+// and the legacy message-role palette (`THEME` / `FG_*`) that the rest of the
+// app still imports. `ansi.js` holds only the ANSI *primitives* (the SGR
+// builders + spinners) and re-exports this palette for back-compat.
+//
+// Consolidation note: this module deliberately does NOT `require('./ansi')`.
+// It defines its own private SGR builders below. That keeps the dependency
+// one-directional (ansi.js → theme.js) so the two files never form a require
+// cycle, regardless of which one an entrypoint loads first.
+
+// Private SGR builders — not exported (ansi.js owns the public ones).
+const fg = (n) => `\x1b[38;5;${n}m`;
+const bg = (n) => `\x1b[48;5;${n}m`;
+const fgRGB = (r, g, b) => `\x1b[38;2;${r};${g};${b}m`;
+const bgRGB = (r, g, b) => `\x1b[48;2;${r};${g};${b}m`;
+
+// ── NO_COLOR + non-TTY gate ─────────────────────────────────────────────────
+// The single place colour is switched off. `colorEnabled()` is dynamic (read
+// per call) so the same process can answer differently for a piped child or a
+// test that sets NO_COLOR. Per the NO_COLOR spec, ANY non-empty value disables
+// colour; an empty string does not. `colorize()` is the resolver-side helper —
+// it returns the code when colour is on, '' otherwise.
+function colorEnabled() {
+  return process.stdout.isTTY === true && !process.env.NO_COLOR;
+}
+function colorize(code) {
+  return colorEnabled() ? code : '';
+}
+
+// ── Legacy message-role palette (relocated verbatim from ansi.js) ───────────
+// Values are unchanged — these drive message roles, menus, prompts and syntax
+// chrome, which are out of scope for the Phase 2.5 saturation pass. They live
+// here only so colour has a single home; ansi.js re-exports them.
+const THEME = {
+  user:  '\x1b[36m',
+  agent: '\x1b[32m',
+  sys:   '\x1b[33m',
+  error: '\x1b[31;1m',
+  warn:  '\x1b[33;1m',
+  tool:  '\x1b[35m',
+  dim:   '\x1b[2m',
+  reset: '\x1b[0m',
+};
+
+const FG_GRAY   = fg(245);
+const FG_DARK   = fg(240);
+const FG_BLUE   = fg(75);
+const FG_CYAN   = fg(116);
+const FG_GREEN  = fg(114);
+const FG_YELLOW = fg(222);
+const FG_RED    = fg(203);
+const FG_TEAL   = fg(73);
+
+const FG_CODE_BG     = bg(236);
+const BG_SELECTED    = bg(237);
+const FG_CODE_BORDER = fg(240);
+const FG_CODE_LANG   = fg(75);
+const FG_TAG         = fg(176);
+const FG_FILEPATH    = fg(222);
 
-// Shared chrome palette. Used by tool-status lines, debug blocks, meta
-// messages, and any other non-content surface. Diff bodies have their own
-// background palette below. Keep palette choices out of renderers — if a
-// colour is added to a status line, it should come from here.
+// ── Saturated chrome palette (Phase 2.5) ────────────────────────────────────
+// Dark-terminal assumption: full saturation, differentiate categories. Tunable
+// here — every colour the tool line / status bar / web summary read resolves
+// through `resolveLineColors`, so a category that reads wrong is a one-line edit.
 const UI_THEME = {
-  success: fg256(114),  // bright mint
-  warning: fg256(179),  // amber
-  error:   fg256(174),  // salmon
-  info:    fg256(75),   // light blue
-  muted:   fg256(240),  // dim gray — frames, metadata
-  subtle:  fg256(244),  // slightly less dim — secondary text
-  accent:  fg256(141),  // soft purple — tool names, IDs
+  success: fg(40),   // vivid green — ok glyph, replay-success indicator
+  warning: fg(214),  // amber
+  error:   fg(203),  // alarming red (not pink)
+  info:    fg(75),   // light blue
+  muted:   fg(240),  // dim gray — frames, separators
+  subtle:  fg(244),  // secondary text — durations, meta, tokens
+  accent:  fg(141),  // purple — model name, IDs
   default: '\x1b[39m',  // terminal default fg
-  // Per-category accent variations for tool-line chrome. Chosen from the
-  // pastel/light bands (100–180 range) so concurrent pending lines read
-  // as a coordinated palette rather than a rainbow. Keys mirror the
-  // values produced by TOOL_CATEGORIES so a lookup is categories[cat].
+  // Per-category accent. Keyed by the category STRING produced by
+  // `categoryForTag` (shell/file/net/…), so a lookup is `categories[cat]`.
+  // Saturated + differentiated; `git`/`mcp` are first-class (no longer folded
+  // into the `tool` fallback); `tool` is demoted to gray so real categories pop.
   categories: {
-    net:    fg256(110),  // dusty blue    — http, download, upload
-    web:    fg256(80),   // aqua          — collapsed web-activity summary (W.3)
-    file:   fg256(151),  // soft sage     — file ops
-    cmd:    fg256(180),  // warm tan      — shell / exec
-    user:   fg256(217),  // pale rose     — ask_user
-    memory: fg256(183),  // light lavender — memory
-    env:    fg256(186),  // pale gold     — env vars
-    system: fg256(109),  // steel blue    — system_info
-    debug:  fg256(244),  // muted gray    — debug blocks
-    tool:   fg256(141),  // accent purple — fallback
+    shell:  fg(214),  // orange
+    file:   fg(77),   // green
+    net:    fg(39),   // bright blue
+    web:    fg(44),   // cyan
+    git:    fg(170),  // magenta-pink
+    mcp:    fg(141),  // purple
+    user:   fg(211),  // pink
+    memory: fg(183),  // lavender
+    env:    fg(186),  // pale gold
+    system: fg(109),  // steel blue
+    debug:  fg(244),  // gray
+    tool:   fg(245),  // gray — fallback, demoted so categories differentiate
   },
 };
 
-// Indicator glyphs for status lines. Separated from colour so the renderer
-// can swap either independently (e.g. an ASCII-only fallback later).
+// Status → glyph colour. Saturated; the running indicator is never gray (it's
+// the most time-sensitive element — Phase 3 animates it, but even static it
+// must read as live).
+const STATUS_COLORS = {
+  ok:      fg(40),   // vivid green ✓
+  error:   fg(203),  // red ✗ (alarming, not pink)
+  running: fg(39),   // cyan ● — fallback when a category has no vivid tint
+  warning: fg(214),  // amber ⚠
+};
+
+// Indicator glyphs for status lines. Separated from colour so the renderer can
+// swap either independently (e.g. an ASCII-only fallback later).
 const UI_ICONS = {
   pending: '●',
   success: '✓',
@@ -45,19 +118,19 @@ const UI_ICONS = {
 };
 
 // Diff rendering palette. Each change-type carries both a 256-color and a
-// truecolor background so the renderer can pick based on COLORTERM at start.
-// Only this file names colors — keep magic numbers out of diff.js.
+// truecolor background so the renderer picks based on COLORTERM at start.
+// Foregrounds saturated (Phase 2.5); gutters lifted one step so structure shows.
 const DIFF_THEME = {
   added: {
-    bg256:  bg256(22),            // deep forest green
+    bg256:  bg(22),               // deep forest green
     bgTC:   bgRGB(14, 40, 23),
-    signFg: fg256(114),           // bright mint
+    signFg: fg(40),               // vivid green
     sign:   '+',
   },
   removed: {
-    bg256:  bg256(52),            // deep burgundy
+    bg256:  bg(52),               // deep burgundy
     bgTC:   bgRGB(50, 18, 20),
-    signFg: fg256(174),           // bright salmon
+    signFg: fg(203),              // red
     sign:   '-',
   },
   context: {
@@ -67,20 +140,16 @@ const DIFF_THEME = {
     sign:   ' ',
   },
   gutter:     { bg256: '', bgTC: '' },
-  lineNumber: fg256(240),         // dim gray
+  lineNumber: fg(244),            // lifted from 240 — visible gutter
   code:       '\x1b[39m',         // terminal default fg
   header:     '\x1b[1;38;5;75m',  // bold light blue
-  frame:      fg256(238),         // very dim gray
+  frame:      fg(242),            // lifted from 238 — visible structure
 };
 
-// Maps an agent-loop tool tag onto the short category shown before the
-// operation in a tool line ("file", "net", "shell"). Renderers should
-// fall back to the tag itself if the tag isn't listed here.
-//
-// Keys include BOTH the XML tag names (read_file, write_file, shell) and
-// the internal action names emitted by the native-function mapper (read,
-// write, exec). Normalization happens at lookup time so neither side needs
-// to know about the other's naming.
+// Maps a tool tag onto the short category shown before the operation in a tool
+// line. Keys include BOTH XML tag names (read_file, shell) and native action
+// names (read, exec) — normalized at lookup. `git_*` tags map to `git`; MCP
+// tools (`mcp__server__tool`) resolve via a prefix rule in `categoryForTag`.
 const TOOL_CATEGORIES = {
   exec: 'shell', shell: 'shell', run: 'shell', run_command: 'shell', bash: 'shell',
   read: 'file', write: 'file', append: 'file',
@@ -94,7 +163,83 @@ const TOOL_CATEGORIES = {
   store_memory: 'memory', recall_memory: 'memory', list_memories: 'memory',
   get_env: 'env', set_env: 'env',
   system_info: 'system',
+  git_status: 'git', git_diff: 'git', git_log: 'git', git_add: 'git',
+  git_commit: 'git', git_branch: 'git', git_checkout: 'git', git_worktree: 'git',
   debug: 'debug',
 };
 
-module.exports = { DIFF_THEME, UI_THEME, UI_ICONS, TOOL_CATEGORIES };
+// The XML extractor and native mapper hand *action* names (read, exec) that
+// differ from *tag* names (read_file, shell). Normalize so category lookups
+// resolve regardless of which rail produced the call tuple.
+const ACTION_TO_TAG = {
+  read:   'read_file',
+  write:  'write_file',
+  append: 'append_file',
+  exec:   'shell',
+};
+
+function _normalizeTag(tag) {
+  return ACTION_TO_TAG[tag] || tag || 'tool';
+}
+
+// Single source of truth for tag → category. Both `tool-operation.js` (the
+// descriptor) and `format.js` (the rendered label) consume this so the
+// descriptor's category and the line's category can never diverge.
+function categoryForTag(tag) {
+  const t = _normalizeTag(tag);
+  if (TOOL_CATEGORIES[t]) return TOOL_CATEGORIES[t];
+  if (t.startsWith('git_')) return 'git';
+  if (t.startsWith('mcp__') || t.startsWith('mcp_')) return 'mcp';
+  return 'tool';
+}
+
+// Normalize an incoming status to the resolver vocabulary. Accepts both the
+// runtime forms ('pending'/'success'/'failure') and the descriptor forms
+// ('pending'/'running'/'ok'/'error').
+function _normStatus(s) {
+  if (s === 'pending' || s === 'running') return s;
+  if (s === 'error' || s === 'failure') return 'error';
+  return 'ok';
+}
+
+// THE colour resolver. Maps a descriptor's {category, status} to the colours
+// for its glyph, category label, operation text, duration and meta. This is the
+// single seam every chrome line goes through — `formatToolLine`,
+// `formatWebSummaryLine`, etc. consume it instead of re-deriving colour inline,
+// which is what makes the palette a one-table change. Honours NO_COLOR/non-TTY
+// via `colorize` — when colour is off, every field resolves to ''.
+function resolveLineColors(category, status) {
+  const cat = category || 'tool';
+  const catColor = colorize(UI_THEME.categories[cat] || UI_THEME.categories.tool);
+  const st = _normStatus(status);
+
+  let glyph;
+  if (st === 'error') glyph = colorize(STATUS_COLORS.error);
+  else if (st === 'ok') glyph = colorize(STATUS_COLORS.ok);
+  else {
+    // pending / running — category-tinted for vivid categories, cyan otherwise.
+    // NEVER gray: the `tool`/`debug` fallbacks would tint gray, so use cyan.
+    glyph = (cat !== 'tool' && cat !== 'debug')
+      ? catColor
+      : colorize(STATUS_COLORS.running);
+  }
+
+  const tail = colorize(st === 'error' ? UI_THEME.error : UI_THEME.subtle);
+  return {
+    glyph,            // status-keyed
+    label: catColor,  // category-keyed (the 5-char label)
+    op: catColor,     // category-keyed (the operation text — painted too)
+    dur: tail,        // subtle, or error red on failure
+    meta: tail,       // subtle, or error red on failure
+  };
+}
+
+module.exports = {
+  // chrome palette + resolver
+  DIFF_THEME, UI_THEME, UI_ICONS, STATUS_COLORS, TOOL_CATEGORIES,
+  categoryForTag, resolveLineColors, colorEnabled, colorize,
+  // legacy palette (re-exported by ansi.js for back-compat)
+  THEME,
+  FG_GRAY, FG_DARK, FG_BLUE, FG_CYAN, FG_GREEN, FG_YELLOW, FG_RED, FG_TEAL,
+  FG_CODE_BG, BG_SELECTED, FG_CODE_BORDER, FG_CODE_LANG, FG_TAG, FG_FILEPATH,
+};