aegiscode 5.2.33 → 6.1.0

package/src/overlays.js

@@ -0,0 +1,286 @@
+'use strict';
+
+/**
+ * Overlay renderers — the "/" command palette, the alt+p model picker, the
+ * /effort picker and the /resume session list. Ported from
+ * `aegiscodex-dev/src/commands.js` (which mirrors live captures of Claude Code
+ * 2.1.228: a gray `─` rule, a lavender `❯` cursor, a blue selected row, a
+ * `⎿  Usage: /x hint` hook under the focused command and a `·`-separated footer).
+ *
+ * Every renderer here is PURE. It receives the data it draws — a command list, a
+ * model list, an item list, a selection index, a width and a height — and
+ * returns an array of span lines (`{ t, s, w }`, see screen.js). It imports no
+ * registry, no session state and no key handling; the session loop owns those.
+ * The palette's command list is the array the concurrent workstream owns:
+ * `{ name, aliases?, help|desc, args?, category?, hint?, tool?|local?|unavailable? }`.
+ *
+ * Filtering reuses `./fuzzy.js` (fuzzyRankWithAliases + fuzzyMatchPositions).
+ * The require is guarded: if that module is absent the palette falls back to a
+ * substring filter so this file still loads and `node --check` still passes.
+ */
+
+const { span, padLine } = require('./screen.js');
+const { C, BOLD, BOLD_OFF, GLYPH } = require('./theme.js');
+
+// ── fuzzy.js (guarded require — a concurrent workstream owns it) ─────────────
+let fuzzy = null;
+try {
+  // eslint-disable-next-line global-require
+  fuzzy = require('./fuzzy.js');
+} catch {
+  fuzzy = null;
+}
+
+/** Rank palette commands by query (aliases count, like the reference). */
+function rankCommands(query, commands) {
+  if (fuzzy && typeof fuzzy.fuzzyRankWithAliases === 'function') {
+    return fuzzy.fuzzyRankWithAliases(query, commands, (c) => c.name, (c) => c.aliases || []);
+  }
+  // Fallback: plain case-insensitive substring across name + aliases.
+  const q = String(query || '').toLowerCase();
+  if (!q) return commands;
+  return commands.filter((c) =>
+    `${c.name} ${(c.aliases || []).join(' ')}`.toLowerCase().includes(q)
+  );
+}
+
+/** The short description a registry entry carries (help or desc). */
+const descOf = (c) => c.help != null ? c.help : (c.desc != null ? c.desc : '');
+/** The usage hint shown on the selected row's `⎿` hook (hint, else args). */
+const hintOf = (c) => (c.hint != null ? c.hint : (c.args != null ? c.args : ''));
+
+/** Pad (and, if needed, truncate) every line to `width` cells so an overlay can
+ *  never paint wider than the terminal. */
+function fit(lines, width) {
+  return lines.map((l) => padLine(l, width));
+}
+
+/** A full-width blank row. */
+const blank = (width) => [span('', ' '.repeat(Math.max(0, width)))];
+
+// Phase 10b (2.1.228 port): split a command name into spans that bold the
+// characters which matched the query; the selected row reads blue.
+function boldMatched(query, name, colour) {
+  const pos = fuzzy && typeof fuzzy.fuzzyMatchPositions === 'function'
+    ? fuzzy.fuzzyMatchPositions(query, name)
+    : [];
+  if (!pos || !pos.length) return [span(colour, name)];
+  const segs = [];
+  let last = 0;
+  for (const p of pos) {
+    if (p > last) segs.push(span(colour, name.slice(last, p)));
+    segs.push(span(colour + BOLD, name[p]));
+    last = p + 1;
+  }
+  if (last < name.length) segs.push(span(colour, name.slice(last)));
+  return segs;
+}
+
+// ── Palette overlay (/) ──────────────────────────────────────────────────────
+
+/**
+ * @param {Array|{commands:Array, query?:string, sel?:number}} commands
+ *        the registry command list (or a state object carrying it as `.commands`)
+ * @param {{query?:string, sel?:number}} [state]
+ * @param {number} [width]
+ * @param {number} [height]
+ */
+function renderPalette(commands, state = {}, width = 80, height = 24) {
+  // Accept either `renderPalette(list, {query, sel}, w, h)` or the reference's
+  // `renderPalette({commands, query, sel}, w, h)`.
+  if (!Array.isArray(commands) && commands && typeof commands === 'object') {
+    state = commands;
+    commands = Array.isArray(commands.commands) ? commands.commands : [];
+  }
+  const list = rankCommands(state.query || '', commands || []);
+  const sel = Number.isInteger(state.sel) ? state.sel : 0;
+  const total = list.length;
+  const per = Math.max(1, Math.min(12, height - 8));
+  const start = Math.max(0, Math.min(sel - Math.floor(per / 2), Math.max(0, total - per)));
+  const visible = list.slice(start, start + per);
+
+  const lines = [];
+  lines.push(blank(width));
+  lines.push([span(C.gray, '  ' + '─'.repeat(Math.max(10, width - 4)))]);
+  for (let i = 0; i < visible.length; i++) {
+    const c = visible[i];
+    const idx = start + i;
+    const active = idx === sel;
+    const left = active ? span(C.lavender, GLYPH.cursor) : span('', ' ');
+    const row = active ? C.blue : C.white;
+    const name = [span(row, '/'), ...boldMatched(state.query || '', c.name, row)];
+    const pad = ' '.repeat(Math.max(1, 22 - [...c.name].length));
+    lines.push([
+      span('', ' '),
+      left,
+      span('', ' '),
+      ...name,
+      span(c.unavailable ? C.dim : C.gray, pad + descOf(c)),
+    ]);
+    if (active && hintOf(c)) {
+      lines.push([span('', ' '), span(C.gray, `${GLYPH.hook}  Usage: /${c.name} ${hintOf(c)}`)]);
+    }
+  }
+  while (lines.length < 4 + per * 2) lines.push(blank(width));
+  lines.push([span(C.gray, '  ' + '─'.repeat(Math.max(10, width - 4)))]);
+  lines.push([
+    span(
+      C.gray,
+      `  type to filter ${GLYPH.bullet} enter to run ${GLYPH.bullet} esc to close`
+    ),
+  ]);
+  return fit(lines, width);
+}
+
+// ── Model picker overlay (alt+p) ─────────────────────────────────────────────
+
+/**
+ * @param {Array} models entries ({id, label?, name?, note?, model?})
+ * @param {number} sel selected index
+ * @param {number} width
+ * @param {number} height
+ * @param {string|null} current the currently-pinned model id
+ */
+function renderModelPicker(models, sel = 0, width = 80, height = 24, current = null) {
+  const lines = [];
+  lines.push(blank(width));
+  lines.push([span('', ' '), span(C.white + BOLD, 'Select model'), span(BOLD_OFF, '')]);
+  lines.push([span('', ' '), span(C.gray, 'Switch between models. Your pick becomes the default for new sessions.')]);
+  lines.push([span('', ' '), span(C.gray, 'Manage the list with /model add|remove — /model <id> switches directly.')]);
+  lines.push(blank(width));
+  for (let i = 0; i < models.length; i++) {
+    const m = models[i] || {};
+    const label = m.label || m.name || m.id || '';
+    const active = i === sel;
+    const cur = current != null && m.id === current;
+    const left = active ? span(C.lavender, GLYPH.cursor) : span('', ' ');
+    const num = span(C.gray, `${i + 1}.`);
+    const nameSpan = active ? span(C.lavender, label) : span(C.white, label);
+    const mark = cur ? span(C.green, ' ' + GLYPH.check) : span('', '');
+    const pad = ' '.repeat(Math.max(1, 22 - [...label].length));
+    lines.push([
+      span('', ' '),
+      left,
+      span('', ' '),
+      num,
+      span('', ' '),
+      nameSpan,
+      mark,
+      span(C.gray, pad + (m.note || m.model || '')),
+    ]);
+  }
+  lines.push(blank(width));
+  lines.push([span('', ' '), span(C.gray, `arrow keys to navigate ${GLYPH.bullet} enter to select ${GLYPH.bullet} esc to cancel`)]);
+  return fit(lines, width);
+}
+
+// ── Effort picker overlay (/effort) ──────────────────────────────────────────
+
+const EFFORT_LEVELS = [
+  { label: 'Low', note: 'Fastest, most efficient' },
+  { label: 'Medium', note: 'Balanced' },
+  { label: 'High', note: 'Highest quality, slowest' },
+];
+
+/**
+ * @param {number} sel selected index
+ * @param {number} width
+ * @param {string|null} current the currently-selected effort level
+ * @param {Array} [levels] override the level table
+ */
+function renderEffortPicker(sel = 0, width = 80, current = null, levels = EFFORT_LEVELS) {
+  const lines = [];
+  lines.push(blank(width));
+  lines.push([span('', ' '), span(C.white + BOLD, 'Select effort'), span(BOLD_OFF, '')]);
+  lines.push([span('', ' '), span(C.gray, 'Controls how much reasoning the model puts into each turn.')]);
+  lines.push(blank(width));
+  for (let i = 0; i < levels.length; i++) {
+    const lv = levels[i];
+    const active = i === sel;
+    const cur = current != null && String(current).toLowerCase() === String(lv.label).toLowerCase();
+    const left = active ? span(C.lavender, GLYPH.cursor) : span('', ' ');
+    const nameSpan = active ? span(C.lavender, lv.label) : span(C.white, lv.label);
+    const mark = cur ? span(C.green, ' ' + GLYPH.check) : span('', '');
+    const pad = ' '.repeat(Math.max(1, 12 - [...lv.label].length));
+    lines.push([span('', ' '), left, span('', ' '), nameSpan, mark, span(C.gray, pad + lv.note)]);
+  }
+  lines.push(blank(width));
+  lines.push([span('', ' '), span(C.gray, `arrow keys to navigate ${GLYPH.bullet} enter to select ${GLYPH.bullet} esc to cancel`)]);
+  return fit(lines, width);
+}
+
+// ── Resume-list overlay (/resume) ────────────────────────────────────────────
+
+/**
+ * @param {Array} items entries ({own?, summary?, cwd?, time?})
+ * @param {number} sel selected index
+ * @param {number} width
+ * @param {number} height
+ */
+function renderResumeList(items, sel = 0, width = 80, height = 24) {
+  const list = Array.isArray(items) ? items : [];
+  const lines = [];
+  lines.push(blank(width));
+  lines.push([span('', ' '), span(C.gray, '─'.repeat(Math.max(10, width - 4)))]);
+  lines.push([
+    span('', ' '),
+    span(C.white + BOLD, 'Resume session'),
+    span(C.gray, ` (${sel + 1} of ${Math.max(1, list.length)})`),
+    span(BOLD_OFF, ''),
+  ]);
+  // search box
+  const boxW = Math.max(10, width - 4);
+  lines.push([span('', ' '), span(C.gray, '╭' + '─'.repeat(Math.max(0, boxW - 2)) + '╮')]);
+  lines.push([
+    span('', ' '),
+    span(C.gray, '│'),
+    span(C.white, '⌕ Search…'),
+    span('', ' '.repeat(Math.max(0, boxW - 9))),
+    span(C.gray, '│'),
+  ]);
+  lines.push([span('', ' '), span(C.gray, '╰' + '─'.repeat(Math.max(0, boxW - 2)) + '╯')]);
+  lines.push(blank(width));
+  const per = Math.max(2, Math.min(6, height - 16));
+  const start = Math.max(0, Math.min(sel - Math.floor(per / 2), Math.max(0, list.length - per)));
+  const visible = list.slice(start, start + per);
+  for (let i = 0; i < visible.length; i++) {
+    const it = visible[i] || {};
+    const idx = start + i;
+    const active = idx === sel;
+    const left = active ? span(C.lavender, GLYPH.cursor) : span('', ' ');
+    const tag = it.own ? span(C.green, GLYPH.star + ' ') : span(C.gray, GLYPH.bullet + ' ');
+    const title = active
+      ? span(C.white + BOLD, it.summary || '(untitled)')
+      : span(C.white, it.summary || '(untitled)');
+    lines.push([span('', ' '), left, span('', ' '), tag, title]);
+    lines.push([span('', '     '), span(C.gray, `${it.cwd || '~'} ${GLYPH.bullet} ${ago(it.time)}`)]);
+  }
+  while (lines.length < 6 + per * 2) lines.push(blank(width));
+  lines.push([span('', ' '), span(C.gray, '─'.repeat(Math.max(10, width - 4)))]);
+  lines.push([
+    span('', ' '),
+    span(
+      C.gray,
+      `Ctrl+A all projects ${GLYPH.bullet} Space to preview ${GLYPH.bullet} Type to search ${GLYPH.bullet} Esc to cancel`
+    ),
+  ]);
+  return fit(lines, width);
+}
+
+function ago(ts) {
+  if (!ts) return '';
+  const ms = Date.now() - new Date(String(ts)).getTime();
+  if (!(ms >= 0) || Number.isNaN(ms)) return '';
+  if (ms < 60_000) return `${Math.max(1, Math.round(ms / 1000))}s ago`;
+  if (ms < 3_600_000) return `${Math.round(ms / 60_000)}m ago`;
+  if (ms < 86_400_000) return `${Math.round(ms / 3_600_000)}h ago`;
+  return `${Math.round(ms / 86_400_000)}d ago`;
+}
+
+module.exports = {
+  boldMatched,
+  renderPalette,
+  renderModelPicker,
+  renderEffortPicker,
+  renderResumeList,
+};

package/src/render.js

@@ -0,0 +1,396 @@
+'use strict';
+
+/**
+ * The CLI's renderers — the start-up banner, transcript turns, the per-turn
+ * accounting line, the status bar, the live working line and the transcript's
+ * markdown body. The presentation layer is a fidelity port of
+ * `aegiscodex-dev`: gold `━`/`─` rules, the two-tone welcome mark (gold mascot,
+ * blue/lavender/dim whale), the coral-bold welcome title, the `❯` prompt, the
+ * `⎿` hook rows, the `●` answer/stream cursor and the `✻` done glyph.
+ *
+ * Every function returns lines (strings carrying SGR escapes) rather than
+ * writing to stdout, so the whole surface is assertable from a plain Node test
+ * with no TTY and no child process — the same split the desktop uses for its
+ * pure renderer modules. The markdown body is delegated to `./markdown.js`
+ * (returning span lines); the require is guarded so this file always loads even
+ * if that module is absent, falling back to the built-in `mdLines`.
+ */
+
+const {
+  RGB,
+  BG,
+  RESET,
+  BOLD,
+  DIM,
+  ITALIC,
+  UNDER,
+  RESET_FG,
+  RESET_BG,
+  GLYPH,
+  VERBS,
+  DONE_VERBS,
+  themeOf,
+} = require('./theme.js');
+const { WELCOME_TITLE, WELCOME_BACK, TAGLINE, welcomeArtParts } = require('./art.js');
+const { w, pad, padStart, wrapBlock, clip, span } = require('./screen.js');
+const { fmtTokens, fmtEur, fmtElapsed } = require('./format.js');
+
+// Guarded: a concurrent workstream owns ./markdown.js.
+let markdown = null;
+try {
+  // eslint-disable-next-line global-require
+  markdown = require('./markdown.js');
+} catch {
+  markdown = null;
+}
+
+/** Error mark — the reference's failed-check glyph (theme.js has no GLYPH.err). */
+const ERR = '✗';
+/** Warning mark — the reference's ⚠ (theme.js has no GLYPH.warn). */
+const WARN = '⚠';
+
+const fg = (t, c) => `${c}`;
+const bg = (c) => BG(...c);
+
+/** Flatten a span line back to an ANSI string (what the transcript emits). */
+const spansToString = (line) => line.map((sp) => (sp.s || '') + sp.t).join('') + RESET;
+
+/** Centre plain `text` inside `width`, painted with `style` (never overflows). */
+function centerStyled(text, width, style) {
+  const tt = clip(text, width);
+  const p = Math.max(0, Math.floor((width - w(tt)) / 2));
+  return ' '.repeat(p) + style + tt + RESET;
+}
+
+/** The right (moon + whale) half of the mark: ▓ blue, ▒ lavender, ░ dim,
+ *  eye white, stars gold. */
+function tintWhale(str, t) {
+  const map = { '▓': t.blue, '▒': t.lavender, '░': t.dim, '█': t.white, '✦': t.gold, '·': t.dim };
+  const spans = [];
+  let cur = null;
+  let style = '';
+  for (const ch of str) {
+    const s = map[ch] != null ? map[ch] : '';
+    if (cur !== null && s === style) {
+      cur += ch;
+    } else {
+      if (cur !== null) spans.push(span(style, cur));
+      cur = ch;
+      style = s;
+    }
+  }
+  if (cur !== null) spans.push(span(style, cur));
+  return spans;
+}
+
+/** One centred welcome-art row: gold mascot on the left, tinted whale right. */
+function artRow(ctx, row, parts, leftPad) {
+  const t = themeOf(ctx);
+  const left = row[0] || '';
+  const right = row[1] || '';
+  const spans = [span('', ' '.repeat(leftPad))];
+  if (left && right) {
+    spans.push(span(t.gold, left));
+    spans.push(span('', ' '.repeat(parts.gutter)));
+    spans.push(...tintWhale(right, t));
+  } else if (left) {
+    spans.push(span(t.gold, left));
+    if (w(left) < parts.width) spans.push(span('', ' '.repeat(parts.width - w(left))));
+  } else if (right) {
+    spans.push(...tintWhale(right, t));
+    if (w(right) < parts.width) spans.push(span('', ' '.repeat(parts.width - w(right))));
+  } else {
+    spans.push(span('', ' '.repeat(parts.width)));
+  }
+  return spansToString(spans);
+}
+
+/**
+ * The start-up banner, matching aegiscodex-dev's welcome legs: a gold `━`+`─`
+ * rule across the full terminal, the centred welcome mark (mascot half gold,
+ * moon/whale half blue/lavender/dim), the coral-bold welcome title and a
+ * version line, then the compact identity block.
+ */
+function renderBanner(ctx, info = {}) {
+  const t = themeOf(ctx);
+  const width = Math.max(20, Number(info.width) || 80);
+  const lines = [];
+
+  // Full-width gold header rule.
+  lines.push(`${t.gold}━${'─'.repeat(Math.max(0, width - 2))}━${RESET}`);
+  lines.push('');
+
+  const parts = welcomeArtParts(width);
+  if (width >= parts.width + 2) {
+    const leftPad = Math.max(0, Math.floor((width - parts.width) / 2));
+    for (const row of parts.rows) lines.push(artRow(ctx, row, parts, leftPad));
+  } else {
+    // Too narrow for the mark: a compact gold wordmark keeps every row in width.
+    lines.push(centerStyled('AEGIS  CODE', width, t.gold + BOLD));
+  }
+  lines.push('');
+
+  const title = info.firstRun === false ? WELCOME_BACK : WELCOME_TITLE;
+  lines.push(centerStyled(title, width, t.coral + BOLD));
+  const verLine = [info.version ? `v${info.version}` : null, TAGLINE].filter(Boolean).join(` ${GLYPH.bullet} `);
+  lines.push(centerStyled(verLine, width, t.gray));
+  lines.push('');
+
+  lines.push(...renderIdentityBox(ctx, info, width));
+  return lines;
+}
+
+/** The identity panel: what you are talking to, and as what. Routed through
+ *  renderHeading so it shares the CLI's ruled-section look (no rounded frame). */
+function renderIdentityBox(ctx, info = {}, width = 80) {
+  const t = themeOf(ctx);
+  const lines = [renderHeading(ctx, 'aegiscode', width)];
+
+  const rows = [
+    ['version', info.version ? `v${info.version}` : null],
+    ['model', info.model || 'server default'],
+    ['base', info.base || ''],
+    ['key', info.key || 'not set'],
+    ['render', info.stream === false ? 'buffered' : 'streaming'],
+  ].filter(([, v]) => v);
+
+  for (const [k, v] of rows) {
+    const value = clip(String(v), Math.max(0, width - 12));
+    lines.push(`  ${t.gray}${k.padEnd(8)}${RESET}${t.white}${value}${RESET}`);
+  }
+  const hint = clip(` type /help for commands ${GLYPH.bullet} /quit to exit`, width);
+  lines.push('');
+  lines.push(`${t.dim}${hint}${RESET}`);
+  return lines;
+}
+
+/** Markdown-lite body (fallback when ./markdown.js is unavailable): fenced
+ *  code, bullets, headings, inline code/bold. */
+function mdLines(text, width, ctx) {
+  const t = themeOf(ctx);
+  const out = [];
+  let inFence = false;
+  const bodyW = Math.max(20, width - 4);
+
+  for (const raw of String(text == null ? '' : text).split('\n')) {
+    const fence = /^\s*```/.test(raw);
+    if (fence) {
+      inFence = !inFence;
+      continue;
+    }
+    if (inFence) {
+      for (const l of wrapBlock(raw, bodyW)) out.push(`${t.gray}  ${l}${RESET}`);
+      continue;
+    }
+    if (raw.trim() === '') {
+      out.push('');
+      continue;
+    }
+    const bullet = /^(\s*)[-*]\s+(.*)$/.exec(raw);
+    if (bullet) {
+      const indent = ' '.repeat(Math.min(6, bullet[1].length));
+      for (const l of wrapBlock(inline(bullet[2], ctx), bodyW - 2)) {
+        out.push(`${indent}${t.gray}${GLYPH.bullet}${RESET} ${l}`);
+      }
+      continue;
+    }
+    const heading = /^(#{1,6})\s+(.*)$/.exec(raw);
+    if (heading) {
+      out.push(`${t.gold}${BOLD}${inline(heading[2], ctx)}${RESET}`);
+      continue;
+    }
+    for (const l of wrapBlock(inline(raw, ctx), bodyW, '')) out.push(l);
+  }
+  return out;
+}
+
+/** Inline span treatment: `code` in green, **bold** in bold. */
+function inline(text, ctx) {
+  const t = themeOf(ctx);
+  return String(text == null ? '' : text)
+    .replace(/`([^`]+)`/g, (_, code) => `${t.green}${code}${RESET}`)
+    .replace(/\*\*([^*]+)\*\*/g, (_, bold) => `${BOLD}${bold}${RESET}`);
+}
+
+/** Assistant body: ./markdown.js span lines flattened to ANSI strings, else the
+ *  plain mdLines fallback. */
+function assistantLines(ctx, text, width) {
+  if (markdown && typeof markdown.renderMarkdown === 'function') {
+    return markdown.renderMarkdown(String(text == null ? '' : text), width, ctx).map(spansToString);
+  }
+  return mdLines(text, width, ctx);
+}
+
+/**
+ * One transcript turn: a `❯`-prefixed user line, an assistant answer whose
+ * first line carries the `●` marker (and a `●` cursor while streaming), a tool
+ * line with its `⎿  $ …` hook row, and each turn's accounting line beneath.
+ */
+function renderTurn(ctx, turn, width = 80) {
+  const t = themeOf(ctx);
+  const role = turn.role || 'assistant';
+  const text = String(turn.text == null ? '' : turn.text);
+  const lines = [];
+
+  if (role === 'user') {
+    const body = wrapBlock(text, Math.max(8, width - 2));
+    body.forEach((l, i) => {
+      if (i === 0) lines.push(`${t.gray}${GLYPH.cursor}${RESET} ${t.white}${l}${RESET}`);
+      else lines.push(`  ${t.white}${l}${RESET}`);
+    });
+  } else if (role === 'assistant' || role === 'system') {
+    const body = assistantLines(ctx, text, Math.max(8, width - 2));
+    if (!body.length) body.push('');
+    body[0] = `${t.white}${GLYPH.block}${RESET} ` + body[0];
+    if (turn.streaming) body[body.length - 1] += `${t.white}${GLYPH.block}${RESET}`;
+    lines.push(...body);
+  } else if (role === 'tool') {
+    lines.push(`${t.white}${GLYPH.block}${RESET} ${t.gray}${turn.label || 'tool'}${RESET}`);
+    const args =
+      turn.args == null
+        ? ''
+        : typeof turn.args === 'string'
+          ? turn.args
+          : JSON.stringify(turn.args);
+    if (args) lines.push(`  ${t.gray}${GLYPH.hook}  $ ${clip(args, Math.max(0, width - 6))}${RESET}`);
+  } else if (role === 'error') {
+    lines.push(`${t.red}${ERR} ${text}${RESET}`);
+  } else {
+    for (const l of wrapBlock(text, Math.max(8, width - 2))) lines.push(`${t.white}${l}${RESET}`);
+  }
+
+  if (turn.meta) {
+    const m = renderMeta(ctx, turn.meta, width);
+    if (m) lines.push(m);
+  }
+  return lines;
+}
+
+/**
+ * The per-turn accounting line — tokens beside what they cost, in the `⎿` hook
+ * row style, e.g. `⎿  1,562 tok · 1,250/312 · €0.0007 · 4.2s`.
+ */
+function renderMeta(ctx, meta = {}, width = 80) {
+  const t = themeOf(ctx);
+  const bits = [];
+  if (meta.model) bits.push(`${t.blue}${meta.model}${RESET}`);
+  if (meta.tokens != null) bits.push(`${t.white}${fmtTokens(meta.tokens)} tok${RESET}`);
+  if (meta.usage) {
+    const { input, output } = meta.usage;
+    if (Number.isFinite(input) || Number.isFinite(output)) {
+      bits.push(`${t.gray}${fmtTokens(input || 0)}/${fmtTokens(output || 0)}${RESET}`);
+    }
+  }
+  if (meta.eur != null) bits.push(`${meta.eur > 0 ? t.coral : t.green}${fmtEur(meta.eur)}${RESET}`);
+  if (meta.ms != null) bits.push(`${t.gray}${fmtElapsed(meta.ms)}${RESET}`);
+  if (meta.calls > 1) bits.push(`${t.gray}${meta.calls} calls${RESET}`);
+  if (!bits.length) return '';
+  const sep = `${t.dim} ${GLYPH.bullet} ${RESET}`;
+  return `${t.dim}${GLYPH.hook}  ${RESET}${bits.join(sep)}`;
+}
+
+/**
+ * The bottom bar: segments packed left, the hint right-aligned, always exactly
+ * `width` cells (clipped, never wrapped, so a narrow terminal degrades instead
+ * of corrupting the transcript). No background — the CLI stays pipeable.
+ */
+function renderStatus(ctx, state = {}, width = 80) {
+  const t = themeOf(ctx);
+  const left = ['aegis'];
+  if (state.model) left.push(state.model);
+  if (state.tokens != null) left.push(`${fmtTokens(state.tokens)} tok`);
+  if (state.spend != null) left.push(fmtEur(state.spend));
+  if (state.mode) left.push(state.mode);
+
+  const right = state.hint || 'ctrl+c quit';
+  const body = ` ${left.join(` ${GLYPH.bullet} `)} `;
+  const gap = width - w(body) - w(right) - 1;
+  const content = gap > 0 ? body + ' '.repeat(gap) + right + ' ' : clip(body, width);
+  return `${t.gray}${pad(content, width)}${RESET}`;
+}
+
+/**
+ * The working line (drawn in the live region, then replaced by the turn):
+ * the `✻`-family spinner cycling with a VERBS entry. With `state.done`, the
+ * completion line `✻ <DoneVerb> for Ns` in gray (Churned after a chat turn,
+ * Worked after a turn that used tools).
+ */
+function renderWorking(ctx, state = {}) {
+  const t = themeOf(ctx);
+  if (state.done) {
+    const verb = state.verb || DONE_VERBS[state.tools ? 1 : 0] || DONE_VERBS[0];
+    const secs =
+      state.secs != null ? state.secs : Math.max(1, Math.round((state.elapsedMs || 0) / 1000));
+    return `${t.gray}${GLYPH.bloom} ${verb} for ${secs}s${RESET}`;
+  }
+  const frame = GLYPH.spin[Math.abs(Math.floor(state.tick || 0)) % GLYPH.spin.length];
+  const verb = state.verb || VERBS[0];
+  const tail = [];
+  if (state.elapsedMs != null) tail.push(fmtElapsed(state.elapsedMs));
+  if (state.streamed != null) tail.push(`↓${fmtTokens(state.streamed)} tokens`);
+  const tailStr = tail.length ? ` ${t.gray}(${tail.join(` ${GLYPH.bullet} `)})${RESET}` : '';
+  return (
+    `${t.coral}${frame}${RESET} ${t.white}${verb}${RESET}${t.white}…${RESET}${tailStr}` +
+    `${t.dim}  esc to interrupt${RESET}`
+  );
+}
+
+/** A ruled section header used by command output (`/help`, `/cost`). */
+function renderHeading(ctx, text, width = 80) {
+  const t = themeOf(ctx);
+  const label = ` ${text} `;
+  const fill = Math.max(0, width - w(label));
+  const left = Math.floor(fill / 2);
+  return (
+    `${t.gray}${'─'.repeat(left)}${RESET}${t.gold}${BOLD}${label}${RESET}` +
+    `${t.gray}${'─'.repeat(Math.max(0, fill - left))}${RESET}`
+  );
+}
+
+/** Render a tool result body: heading + indented lines, no role gutter. */
+function renderToolResult(ctx, name, text, width = 80) {
+  const t = themeOf(ctx);
+  const lines = [renderHeading(ctx, name, width)];
+  for (const l of wrapBlock(String(text == null ? '' : text), Math.max(8, width - 2))) {
+    lines.push(l ? `  ${t.white}${l}${RESET}` : '');
+  }
+  return lines;
+}
+
+/** A transient notice. Kinds map gray / coral / red / green with the matching
+ *  glyph: info `·`, warn `⚠`, error `✗`, ok `✔`. */
+const NOTICE = {
+  info: ['gray', GLYPH.bullet],
+  warn: ['coral', WARN],
+  error: ['red', ERR],
+  ok: ['green', GLYPH.check],
+};
+
+function renderNotice(ctx, kind, text) {
+  const t = themeOf(ctx);
+  const [token, mark] = NOTICE[kind] || NOTICE.info;
+  return `${t[token]}${mark} ${text}${RESET}`;
+}
+
+module.exports = {
+  renderBanner,
+  renderIdentityBox,
+  renderTurn,
+  renderMeta,
+  renderStatus,
+  renderWorking,
+  renderHeading,
+  renderToolResult,
+  renderNotice,
+  mdLines,
+  inline,
+  // Style helpers kept for legacy consumers.
+  fg,
+  bg,
+  UNDER,
+  ITALIC,
+  RESET_FG,
+  RESET_BG,
+  pad,
+  padStart,
+};