@semalt-ai/code 1.8.0 → 1.8.3

package/lib/ui/diff.js

@@ -1,7 +1,8 @@
 'use strict';
 
-const { FG_DARK, FG_RED, FG_GREEN, FG_GRAY, FG_YELLOW, FG_TEAL, RST, THEME } = require('./ansi');
-const { getCols, stripAnsi } = require('./utils');
+const { FG_DARK, FG_RED, FG_GREEN, FG_GRAY, FG_YELLOW, FG_TEAL, RST, THEME, EL, hasTruecolor } = require('./ansi');
+const { getCols, stripAnsi, termWidth } = require('./utils');
+const { DIFF_THEME, UI_THEME } = require('./theme');
 
 function diffLines(oldLines, newLines) {
   const m = oldLines.length, n = newLines.length;
@@ -37,29 +38,47 @@ function diffLinesHashed(oldLines, newLines) {
   return result;
 }
 
-function renderDiff(oldText, newText, filePath) {
+// Truncate `text` to at most `w` terminal columns. When truncation happens,
+// the last visible column is replaced with '…'. Width is measured in display
+// columns (termWidth), so emoji / CJK consume 2 per char.
+function _truncateByWidth(text, w) {
+  if (w <= 0) return '';
+  if (termWidth(text) <= w) return text;
+  let out = '', used = 0;
+  for (const ch of text) {
+    const chw = termWidth(ch);
+    if (used + chw > w - 1) break;
+    out += ch;
+    used += chw;
+  }
+  return out + '…';
+}
+
+function renderDiff(oldText, newText, filePath, opts) {
   if (oldText.includes('\x00') || newText.includes('\x00')) return '[binary file — diff skipped]';
   const isTTY = process.stdout.isTTY === true;
-  const cols  = getCols();
-
-  // ── Layout constants ───────────────────────────────────────────────────────
-  const INDENT     = '   ';          // left offset from main stream
-  const boxWidth   = Math.max(40, cols - INDENT.length);
-  const innerWidth = boxWidth - 2;   // between ╭ and ╮
-
-  const a  = (code) => isTTY ? code : '';
-  const R  = a(RST);
-
-  // Palette
-  const BORDER   = a(FG_DARK);
-  const DEL_BG   = a('\x1b[48;5;52m');    // dark red background
-  const ADD_BG   = a('\x1b[48;5;22m');    // dark green background
-  const DEL_FG   = a('\x1b[38;5;203m');   // bright red text  (= FG_RED)
-  const ADD_FG   = a('\x1b[38;5;114m');   // bright green text (= FG_GREEN)
-  const NUM_CLR  = a('\x1b[38;5;240m');   // muted line-number gutter
-  const CTX_CLR  = a('\x1b[38;5;245m');   // dim context text
-  const HUNK_CLR = a('\x1b[38;5;73m');    // teal hunk separator
-  const PATH_CLR = a('\x1b[38;5;222m');   // yellow filepath in header
+  // `inset` reserves N columns for an outer wrapper (e.g. the permission
+  // bubble indents continuation lines by 5 spaces). Subtract it from the
+  // effective width so our truncated content still fits on one physical row.
+  const inset = (opts && Number.isInteger(opts.inset) && opts.inset >= 0) ? opts.inset : 0;
+  const cols  = Math.max(20, getCols() - inset);
+
+  // Resolve the palette once per render. Truecolor is used when the terminal
+  // advertises it via COLORTERM; otherwise fall back to 256-color.
+  const useTC = hasTruecolor();
+  const a   = (code) => isTTY ? code : '';
+  const R   = a(RST);
+  const EL_ = a(EL);
+  const pickBg = (t) => useTC && t.bgTC ? t.bgTC : t.bg256;
+  const P = {
+    added:   { bg: a(pickBg(DIFF_THEME.added)),   signFg: a(DIFF_THEME.added.signFg),   sign: DIFF_THEME.added.sign   },
+    removed: { bg: a(pickBg(DIFF_THEME.removed)), signFg: a(DIFF_THEME.removed.signFg), sign: DIFF_THEME.removed.sign },
+    context: { bg: '',                             signFg: '',                            sign: DIFF_THEME.context.sign },
+    ln:      a(DIFF_THEME.lineNumber),
+    code:    a(DIFF_THEME.code),
+    hdr:     a(DIFF_THEME.header),
+    frame:   a(DIFF_THEME.frame),
+  };
 
   const oldLines  = oldText === '' ? [] : oldText.split('\n');
   const newLines  = newText.split('\n');
@@ -69,58 +88,58 @@ function renderDiff(oldText, newText, filePath) {
   if (!isNewFile) {
     diff = (oldLines.length > 200 || newLines.length > 200)
       ? diffLinesHashed(oldLines, newLines) : diffLines(oldLines, newLines);
-    if (!diff.some((d) => d.type !== 'same')) return `${INDENT}  No changes detected`;
+    if (!diff.some((d) => d.type !== 'same')) return '   No changes detected';
   }
 
-  // Gutter width: enough digits for the largest line number
-  const maxLn = Math.max(oldLines.length, newLines.length, 1);
-  const LN_W  = Math.max(2, String(maxLn).length);
-
-  // gutter template: ' NNNN │S ' — LN_W + 5 chars
-  const GUTTER_W = LN_W + 5;
-  const CONT_W   = Math.max(1, innerWidth - GUTTER_W);
-
-  // ── Builders ───────────────────────────────────────────────────────────────
-
-  // One content line inside the box.
-  //   lnStr  – line-number string (right-aligned to LN_W, or '' for unknown)
-  //   symbol – '-', '+', or ' '
-  //   text   – raw source text
-  //   bg     – background ANSI string (or '' for context)
-  //   fg     – foreground ANSI string
-  function makeLine(lnStr, symbol, text, bg, fg) {
-    const num    = lnStr ? lnStr.padStart(LN_W) : ' '.repeat(LN_W);
-    const disp   = text.replace(/\t/g, '  ');
-    const clp    = disp.length > CONT_W ? disp.slice(0, CONT_W - 1) + '…' : disp;
-    const padded = clp.padEnd(CONT_W);
-    // gutter:  ' NUM │S '
-    const gt = ` ${NUM_CLR}${num}${R}${bg}${BORDER} │${R}${bg}${fg}${symbol} ${padded}${R}`;
-    return `${INDENT}${BORDER}│${R}${bg}${gt}${R}${BORDER}│${R}`;
+  // ── Layout ─────────────────────────────────────────────────────────────────
+  // [GUTTER(3) default bg] [LN_W line#] [' '] [sign] [' '] [code] [EL] [RST]
+  // The gutter stays in the terminal's default bg so the dark bg on the
+  // change lines has a visible left edge — no box frame needed.
+  const GUTTER   = '   ';
+  const maxLn    = Math.max(oldLines.length, newLines.length, 1);
+  const LN_W     = Math.max(2, String(maxLn).length);
+  const PREFIX_W = GUTTER.length + LN_W + 3;  // gutter + ln + ' ' + sign + ' '
+  const CODE_W   = Math.max(1, cols - PREFIX_W);
+
+  // Render a single diff line. For added/removed, the dark bg begins right
+  // after the gutter and extends to the physical right edge via EL. Context
+  // lines set no bg so EL is skipped too (no-op but cleaner output).
+  function makeLine(lnStr, kind, text) {
+    const t    = P[kind];
+    const num  = (lnStr || '').padStart(LN_W);
+    const disp = (text || '').replace(/\t/g, '  ');
+    const code = _truncateByWidth(disp, CODE_W);
+
+    let s = GUTTER;
+    s += t.bg;
+    s += P.ln + num;
+    s += ' ';
+    if (t.signFg) s += t.signFg;
+    s += t.sign;
+    s += P.code;
+    s += ' ';
+    s += code;
+    if (t.bg) s += EL_;
+    s += R;
+    return s;
   }
 
-  // Hunk separator: ···· @@ -x,y +a,b @@ ····
   function hunkSep(label) {
-    const body  = ` ${label} `;
-    const total = innerWidth - 2;  // 2 for leading/trailing ·
-    const half  = Math.max(0, Math.floor((total - body.length) / 2));
-    const right = Math.max(0, total - body.length - half);
-    return `${INDENT}${BORDER}│${R}${HUNK_CLR} ${'·'.repeat(half)}${body}${'·'.repeat(right)} ${R}${BORDER}│${R}`;
+    return `${GUTTER}${P.frame}${label}${R}`;
   }
 
   const out = [];
+  // Minimal file header — bold blue path, no box. The surrounding UI owns
+  // any tool-label framing; this line is the only header the diff emits.
+  out.push(`${GUTTER}${P.hdr}${filePath}${R}`);
 
-  // ── Header ─────────────────────────────────────────────────────────────────
-  const pathPart  = ` ${filePath} `;
-  const fillRight = Math.max(1, innerWidth - 1 - pathPart.length);  // 1 for leading ─
-  out.push(`${INDENT}${BORDER}╭─${PATH_CLR}${pathPart}${R}${BORDER}${'─'.repeat(fillRight)}╮${R}`);
-
-  // ── Body ───────────────────────────────────────────────────────────────────
   if (isNewFile) {
-    out.push(hunkSep('new file'));
+    // Meta-label "(new file)" rendered in the shared subtle palette so it
+    // recedes relative to the hunk marker itself.
+    const subtle = a(UI_THEME.subtle);
+    out.push(`${GUTTER}${P.frame}@@ -0,0 +1,${newLines.length} @@ ${R}${subtle}(new file)${R}`);
     let ln = 1;
-    for (const line of newLines) {
-      out.push(makeLine(String(ln++), '+', line, ADD_BG, ADD_FG));
-    }
+    for (const line of newLines) out.push(makeLine(String(ln++), 'added', line));
   } else {
     let oldLn = 1, newLn = 1;
     const annotated = diff.map((d) => {
@@ -153,26 +172,19 @@ function renderDiff(oldText, newText, filePath) {
       out.push(hunkSep(`@@ -${oldStart},${oldCnt} +${newStart},${newCnt} @@`));
 
       for (const e of hunk) {
-        if (e.type === 'del') {
-          out.push(makeLine(String(e.oldLine), '-', e.text, DEL_BG, DEL_FG));
-        } else if (e.type === 'add') {
-          out.push(makeLine(String(e.newLine), '+', e.text, ADD_BG, ADD_FG));
-        } else {
-          out.push(makeLine(String(e.newLine), ' ', e.text, '', CTX_CLR));
-        }
+        if (e.type === 'del')      out.push(makeLine(String(e.oldLine), 'removed', e.text));
+        else if (e.type === 'add') out.push(makeLine(String(e.newLine), 'added',   e.text));
+        else                       out.push(makeLine(String(e.newLine), 'context', e.text));
       }
     }
   }
 
-  // ── Footer ─────────────────────────────────────────────────────────────────
-  out.push(`${INDENT}${BORDER}╰${'─'.repeat(innerWidth)}╯${R}`);
-
   const MAX = 120;
   if (out.length > MAX) {
     const extra  = out.length - MAX;
     const result = out.slice(0, MAX);
     result.push(isTTY
-      ? `${INDENT}${FG_DARK}  … ${extra} more lines${RST}`
+      ? `${GUTTER}${P.frame}… ${extra} more lines${R}`
       : `… ${extra} more lines`);
     return result.join('\n');
   }

package/lib/ui/input-field.js

@@ -4,10 +4,11 @@ const EventEmitter = require('events');
 const readline = require('readline');
 
 const { RST, DIM, FG_CYAN, FG_GREEN, FG_YELLOW } = require('./ansi');
+const writer = require('./writer');
 
 const SLASH_CMDS = [
   '/help','/file','/new','/model','/models','/shell','/compact',
-  '/clear','/approve','/config','/history','/login','/whoami','/logout','/chats',
+  '/clear','/approve','/debug','/config','/history','/login','/whoami','/logout','/chats',
 ];
 
 // ─── Key sequence parser ──────────────────────────────────────────────────────
@@ -107,10 +108,15 @@ function parseKeySequence(buf) {
 // ─── InputField ───────────────────────────────────────────────────────────────
 
 class InputField extends EventEmitter {
-  constructor(layout, chatHistory) {
+  constructor(layout, chatHistory, onChange) {
     super();
     this._layout = layout;
     this._chatHistory = chatHistory;
+    this._onChange = typeof onChange === 'function' ? onChange : () => {};
+    // Cached render output — re-computed on every _render()/_renderHints()
+    // call. Consumed by the UI orchestrator to build the live region.
+    this._inputLines = [`${DIM}›${RST}`];
+    this._hintsText = '';
     this._chars = [];
     this._cursor = 0;
     this._disabled = false;
@@ -156,9 +162,16 @@ class InputField extends EventEmitter {
     if (process.stdin.isTTY) {
       process.stdin.setRawMode(true);
       process.stdin.resume();
-      process.stdout.write('\x1b[?2004h');  // bracketed paste
-      process.stdout.write('\x1b[>4;2m');   // xterm modifyOtherKeys level 2
-      process.stdout.write('\x1b[>1u');     // kitty keyboard protocol
+      // Terminal-mode toggles go through the writer queue so they can't
+      // land inside another task's compound write. Each is a tiny escape
+      // that only toggles state — no display content.
+      writer.enqueue(() => {
+        try {
+          process.stdout.write('\x1b[?2004h');  // bracketed paste
+          process.stdout.write('\x1b[>4;2m');   // xterm modifyOtherKeys level 2
+          process.stdout.write('\x1b[>1u');     // kitty keyboard protocol
+        } catch {}
+      });
       process.stdin.on('data', this._onData);
       this._idleTimer = setTimeout(() => this._goIdle(), 0);
     }
@@ -188,14 +201,16 @@ class InputField extends EventEmitter {
   hideCursor() {
     if (!this._cursorHidden) {
       this._cursorHidden = true;
-      process.stdout.write('\x1b[?25l');
+      // Serialize through writer so this can't interleave mid-frame with a
+      // bubble/scrollback write.
+      writer.enqueue(() => { try { process.stdout.write('\x1b[?25l'); } catch {} });
     }
   }
 
   showCursor() {
     if (this._cursorHidden) {
       this._cursorHidden = false;
-      process.stdout.write('\x1b[?25h');
+      writer.enqueue(() => { try { process.stdout.write('\x1b[?25h'); } catch {} });
     }
   }
 
@@ -836,7 +851,9 @@ class InputField extends EventEmitter {
     if (this._selectCapture) { this._processBuf(buf, false); return; }
     if (this._navCapture) { this._processBuf(buf, false); return; }
     if (this._disabled) {
-      if (buf[0] === 0x03 || buf[0] === 0x04) {
+      if (buf[0] === 0x03) {
+        this.emit('abort');
+      } else if (buf[0] === 0x04) {
         this.emit('interrupt');
       } else if (buf[0] === 0x0f) {
         this.emit('expand');
@@ -995,18 +1012,16 @@ class InputField extends EventEmitter {
   }
 
   // ── Hints row ────────────────────────────────────────────────────────────────
+  //
+  // Build the hints-line string and publish the updated live region. No
+  // direct stdout writes here — the shared writer owns the terminal.
 
   _renderHints() {
-    const layout = this._layout;
-    if (!layout || !layout.hintsRow) return;
-    const row = layout.hintsRow;
-    const cols = layout.cols;
-
     let text;
     if (this._searchMode) {
       text = `${FG_YELLOW}ctrl+r${RST}${DIM} next match  ${RST}${FG_YELLOW}esc${RST}${DIM} cancel search${RST}`;
     } else if (this._disabled) {
-      text = `${FG_YELLOW}esc${RST}${DIM} interrupt${RST}`;
+      text = `${FG_YELLOW}esc${RST}${DIM}/${RST}${FG_YELLOW}ctrl+c${RST}${DIM} interrupt${RST}`;
     } else if (this._navCapture) {
       if (this._navSearchMode) {
         text = `${FG_YELLOW}search:${RST} ${FG_CYAN}'${this._navSearchQuery}'${RST}  ${DIM}↑↓ navigate  enter select  esc clear${RST}`;
@@ -1017,42 +1032,41 @@ class InputField extends EventEmitter {
       text = `${DIM}↑↓ history  ${RST}${FG_CYAN}ctrl+r${RST}${DIM} search  ${RST}${FG_CYAN}ctrl+c${RST}${DIM} cancel${RST}`;
     }
 
-    // Use DECSC/DECRC so the cursor is restored after drawing (keeps streaming
-    // tokens anchored at historyRows when the blink timer calls this).
-    process.stdout.write(`\x1b7\x1b[${row};1H\x1b[2K${text}`);
-    const visLen = text.replace(/\x1b\[[^m]*m/g, '').length;
-    if (visLen < cols) process.stdout.write(' '.repeat(cols - visLen));
-    process.stdout.write('\x1b8');
+    this._hintsText = text;
+    this._notify();
   }
 
+  // Expose the last-computed hints line for the orchestrator.
+  renderHintsLine() { return this._hintsText || ''; }
+
   // ── Render ───────────────────────────────────────────────────────────────────
+  //
+  // Compute the rendered input rows and cache them in this._inputLines for
+  // the UI orchestrator. Then _notify() — the orchestrator pulls the lines
+  // and repaints the live region.
+  //
+  // The "caret" is a printable inverted/underlined character embedded in
+  // the text; the OS cursor stays hidden for the whole TUI session so it
+  // never flickers during in-place redraws.
 
   _render() {
-    const layout = this._layout;
-    const cols = layout.cols;
-
     if (this._disabled) {
       if (this._inputHeight !== 1) {
         this._inputHeight = 1;
-        layout.setInputHeight(1);
+        this._layout.setInputHeight(1);
       }
-      const baseRow = layout.inputRow;
-      // DECSC/DECRC keeps the cursor in the history scroll region so streaming
-      // tokens written after this blink-timer redraw land at the right row.
-      process.stdout.write(`\x1b7\x1b[${baseRow};1H\x1b[2K${DIM}›${RST}`);
-      process.stdout.write(' '.repeat(Math.max(0, cols - 1)));
-      process.stdout.write('\x1b8');
+      this._inputLines = [`${DIM}›${RST}`];
+      this._notify();
       return;
     }
 
     if (this._navCapture) {
       if (this._inputHeight !== 1) {
         this._inputHeight = 1;
-        layout.setInputHeight(1);
+        this._layout.setInputHeight(1);
       }
-      const baseRow = layout.inputRow;
-      process.stdout.write(`\x1b[${baseRow};1H\x1b[2K${DIM}›${RST}`);
-      process.stdout.write(' '.repeat(Math.max(0, cols - 1)));
+      this._inputLines = [`${DIM}›${RST}`];
+      this._notify();
       return;
     }
 
@@ -1060,20 +1074,17 @@ class InputField extends EventEmitter {
     if (this._searchMode) {
       if (this._inputHeight !== 1) {
         this._inputHeight = 1;
-        layout.setInputHeight(1);
+        this._layout.setInputHeight(1);
       }
-      const baseRow = layout.inputRow;
       const noMatch = this._searchQuery && this._searchMatchIdx === -1;
       const queryColor = noMatch ? '\x1b[38;5;203m' : FG_CYAN;
       const prefix = `${DIM}(search)${RST} ${queryColor}'${this._searchQuery}'${RST}${DIM}:${RST} `;
       const matched = this._chars.join('');
 
-      // Type label
       const typeLabel = this._searchMatchType
         ? `${DIM}[${this._searchMatchType}]${RST} `
         : '';
 
-      // Highlight the matching part (case-insensitive)
       let displayMatch;
       const matchedLow = matched.toLowerCase();
       const qLow = this._searchQuery.toLowerCase();
@@ -1087,10 +1098,8 @@ class InputField extends EventEmitter {
         displayMatch = matched;
       }
 
-      const line = prefix + typeLabel + displayMatch;
-      process.stdout.write(`\x1b[${baseRow};1H\x1b[2K${line}`);
-      const visLen = line.replace(/\x1b\[[^m]*m/g, '').length;
-      if (visLen < cols) process.stdout.write(' '.repeat(cols - visLen));
+      this._inputLines = [prefix + typeLabel + displayMatch];
+      this._notify();
       return;
     }
 
@@ -1101,13 +1110,7 @@ class InputField extends EventEmitter {
     const needed = Math.min(5, newlineCount + 1);
     if (needed !== this._inputHeight) {
       this._inputHeight = needed;
-      layout.setInputHeight(needed);
-    }
-
-    const baseRow = layout.inputRow;
-
-    for (let r = baseRow; r < baseRow + this._inputHeight; r++) {
-      process.stdout.write(`\x1b[${r};1H\x1b[2K`);
+      this._layout.setInputHeight(needed);
     }
 
     const PREFIX     = '\x1b[36m › \x1b[0m';
@@ -1129,9 +1132,9 @@ class InputField extends EventEmitter {
       pos += lines[li].length + 1;
     }
 
+    const out = [];
     const renderCount = Math.min(lines.length, this._inputHeight);
     for (let li = 0; li < renderCount; li++) {
-      const r         = baseRow + li;
       const lineChars = lines[li];
 
       let lineStr;
@@ -1149,11 +1152,19 @@ class InputField extends EventEmitter {
 
       const leadIn  = li === 0 ? PREFIX : ' '.repeat(PREFIX_LEN);
       const hintStr = (li === 0 && this._hint) ? `${DIM}${this._hint}${RST}` : '';
-      const visLen  = PREFIX_LEN + lineChars.length + (li === 0 ? this._hint.length : 0);
-      const pad     = visLen < cols ? ' '.repeat(cols - visLen) : '';
-
-      process.stdout.write(`\x1b[${r};1H` + leadIn + lineStr + hintStr + pad);
+      out.push(leadIn + lineStr + hintStr);
     }
+
+    if (out.length === 0) out.push(PREFIX);
+    this._inputLines = out;
+    this._notify();
+  }
+
+  // Expose the last-computed input lines for the orchestrator.
+  renderInputLines() { return this._inputLines.slice(); }
+
+  _notify() {
+    try { this._onChange(); } catch {}
   }
 
   // ── Destroy ──────────────────────────────────────────────────────────────────
@@ -1164,10 +1175,17 @@ class InputField extends EventEmitter {
     if (this._idleTimer)  { clearTimeout(this._idleTimer);   this._idleTimer = null; }
     if (process.stdin.isTTY) {
       process.stdin.removeListener('data', this._onData);
-      this._cursorHidden = true; this.showCursor();   // restore cursor visibility
-      process.stdout.write('\x1b[<u');     // pop kitty keyboard protocol
-      process.stdout.write('\x1b[>4;0m'); // reset modifyOtherKeys
-      process.stdout.write('\x1b[?2004l'); // disable bracketed paste
+      // Terminal-mode pops must run in queue order so they don't race with
+      // a pending live-region redraw on shutdown.
+      writer.enqueue(() => {
+        try {
+          process.stdout.write('\x1b[?25h');   // show cursor
+          process.stdout.write('\x1b[<u');     // pop kitty keyboard protocol
+          process.stdout.write('\x1b[>4;0m');  // reset modifyOtherKeys
+          process.stdout.write('\x1b[?2004l'); // disable bracketed paste
+        } catch {}
+      });
+      this._cursorHidden = false;
       process.stdin.setRawMode(false);    // restore cooked mode so mouse works again
     }
   }

package/lib/ui/status-bar.js

@@ -1,15 +1,23 @@
 'use strict';
 
-const { RST, DIM, FG_RED, SPINNER_DEFS } = require('./ansi');
+const { RST, DIM, FG_RED, FG_DARK, SPINNER_DEFS } = require('./ansi');
 const { stripAnsi } = require('./utils');
 
+// Status bar is a *content producer* only. It builds a single line string
+// and hands it to the UI orchestrator via the onChange callback; the
+// orchestrator composes the full live region (status + input + hints) and
+// pushes it through the shared writer in one serialized burst. No direct
+// stdout writes happen here, so the status-bar timer can't interleave
+// mid-bubble.
 class FullStatusBar {
-  constructor(layout) {
+  constructor(layout, onChange) {
     this._layout = layout;
+    this._onChange = typeof onChange === 'function' ? onChange : () => {};
     this._state = 'idle';
     this._label = 'Ready';
     this._model = '';
     this._totalTokens = 0;
+    this._tokenLimit = null;
     this._speed = 0;
     this._streamStart = null;
     this._streamTokens = 0;
@@ -17,23 +25,24 @@ class FullStatusBar {
     this._animIdx = 0;
     this._animTimer = null;
     this._paused = false;
-    this._clockTimer = setInterval(() => this._renderBar(), 1000);
+    // 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.
+    this._clockTimer = setInterval(() => this._notify(), 1000);
   }
 
   pause()  { this._paused = true; }
-  resume() { this._paused = false; this._renderBar(); }
+  resume() { this._paused = false; this._notify(); }
 
   setModel(name) {
     this._model = name || '';
-    this._renderBar();
+    this._notify();
   }
 
   update(state, label) {
     this._state = state || 'idle';
     if (label !== undefined) this._label = label;
-
-    // An explicit update must always be visible — unpause so _renderBar() runs.
-    // The pause flag only suppresses timer-driven clock/spinner redraws.
     this._paused = false;
 
     if (state === 'streaming') {
@@ -42,14 +51,13 @@ class FullStatusBar {
       this._streamStart = null; this._streamTokens = 0; this._speed = 0;
     }
 
-    const animStates = ['thinking', 'streaming', 'tool'];
+    const animStates = ['thinking', 'streaming', 'tool', 'waiting_download'];
     if (animStates.includes(state) && !this._animTimer) {
-      this._animTimer = setInterval(() => { this._animIdx++; this._renderBar(); }, 100);
+      this._animTimer = setInterval(() => { this._animIdx++; this._notify(); }, 100);
     } else if (!animStates.includes(state) && this._animTimer) {
       clearInterval(this._animTimer); this._animTimer = null; this._animIdx = 0;
     }
-    if (state === 'idle') this.drawSeparator();
-    this._renderBar();
+    this._notify();
   }
 
   onToken() {
@@ -61,13 +69,14 @@ class FullStatusBar {
         const elapsed = (Date.now() - this._streamStart) / 1000;
         this._speed = elapsed > 0 ? Math.round(this._streamTokens / elapsed) : 0;
       }
-      this._renderBar();
+      this._notify();
     }
   }
 
   updateMetrics(data) {
     if (data && data.totalTokens !== undefined) this._totalTokens = data.totalTokens;
-    this._renderBar();
+    if (data && 'tokenLimit' in data) this._tokenLimit = data.tokenLimit;
+    this._notify();
   }
 
   liveUpdate(fields) {
@@ -75,14 +84,16 @@ class FullStatusBar {
       const n = parseInt(String(fields.tokens), 10);
       if (!isNaN(n)) this._totalTokens = n;
     }
-    this._renderBar();
+    this._notify();
   }
 
-  _renderBar() {
-    if (this._paused) return;
+  // Render the status bar as a single line string. Used by the UI composer
+  // to build the live region. Returns null when paused so the composer can
+  // omit the row entirely.
+  renderLine() {
+    if (this._paused) return null;
     const layout = this._layout;
     const cols = layout.cols;
-    const row = layout.statusRow;
     let left = '';
     const state = this._state;
 
@@ -102,7 +113,15 @@ class FullStatusBar {
     const timePart = `${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}:${String(now.getSeconds()).padStart(2,'0')}`;
     const rightParts = [timePart];
     if (this._model) rightParts.push(this._model);
-    if (this._totalTokens > 0) rightParts.push(`${this._totalTokens.toLocaleString()} tok`);
+    const liveTokens = this._totalTokens + this._streamTokens;
+    rightParts.push(`${liveTokens.toLocaleString()} tok`);
+    if (this._tokenLimit) {
+      if (this._tokenLimit.limit === null) {
+        rightParts.push('limit unknown');
+      } else {
+        rightParts.push(`${this._tokenLimit.used.toLocaleString()}/${this._tokenLimit.limit.toLocaleString()} (${this._tokenLimit.pct}%)`);
+      }
+    }
     if (state === 'streaming' && this._speed > 0) rightParts.push(`${this._speed} t/s`);
 
     const rightVisible = rightParts.join(' · ');
@@ -110,15 +129,27 @@ class FullStatusBar {
     const leftLen = stripAnsi(left).length;
     const rightLen = rightVisible.length;
     const padding = Math.max(1, cols - leftLen - rightLen);
-    const line = left + ' '.repeat(padding) + rightAnsi;
+    return left + ' '.repeat(padding) + rightAnsi;
+  }
 
-    process.stdout.write(`\x1b7\x1b[${row};1H\x1b[2K${line}\x1b8`);
+  // Thin horizontal rule rendered above the status line. Kept as its own
+  // line in the live region so the composer can turn it on/off without
+  // affecting surrounding rows.
+  renderSeparator() {
+    const cols = this._layout.cols;
+    return `${FG_DARK}${'─'.repeat(Math.max(0, cols - 1))}${RST}`;
   }
 
-  drawSeparator() {
-    const layout = this._layout;
-    const { FG_DARK } = require('./ansi');
-    process.stdout.write(`\x1b7\x1b[${layout.separatorRow};1H\x1b[2K${FG_DARK}${'─'.repeat(layout.cols)}${RST}\x1b8`);
+  // Back-compat: older call sites (command.js, create-ui.js) call
+  // drawSeparator/_renderBar after every state change. These now just
+  // trigger a live-region refresh — the orchestrator composes the full
+  // region and serializes the write.
+  drawSeparator() { this._notify(); }
+  _renderBar()    { this._notify(); }
+
+  _notify() {
+    if (this._paused) { this._onChange(); return; }
+    this._onChange();
   }
 
   destroy() {