mixdog 0.9.3 → 0.9.4

package/src/tui/figures.mjs

@@ -13,6 +13,11 @@ export const BULLET_OPERATOR = '\u00b7'; // · - inline separator
 export const UP_ARROW = '\u2191'; // ↑ - history/scroll up
 export const DOWN_ARROW = '\u2193'; // ↓ - history/scroll down
 
+// Agent surface markers — dispatch (call out) vs response (result back).
+// Basic Arrows block renders reliably in Cascadia/Consolas (same block as ↑↓).
+export const RIGHT_ARROW = '\u2192'; // → - agent call/dispatch marker
+export const LEFT_ARROW = '\u2190'; // ← - agent response marker
+
 // Tool-result tree gutter. \u2514 (└, BOX DRAWINGS LIGHT UP AND RIGHT) renders
 // in virtually every monospace font; the previous \u23bf (bracket extension)
 // had no glyph in common terminal fonts (Cascadia/Consolas) and fell back to a

package/src/tui/index.jsx

@@ -141,6 +141,101 @@ function resolveTuiStderrLogPath() {
     || join(process.env.MIXDOG_RUNTIME_ROOT || join(tmpdir(), 'mixdog'), 'mixdog-tui.stderr.log');
 }
 
+/** `rgb(r,g,b)` → truecolor SGR prefix ('' when unparsable). */
+function ansiFg(rgb) {
+  const m = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/.exec(String(rgb || ''));
+  return m ? `\x1b[38;2;${m[1]};${m[2]};${m[3]}m` : '';
+}
+
+/**
+ * Paint a static boot splash into the (already-entered) alternate screen so
+ * the seconds between alt-screen entry and the first ink frame are not a blank
+ * void. The logo is drawn at the SAME rows/columns as App.jsx's welcome banner
+ * (marginTop 3 + 5 logo rows + blank + subtitle), so ink's first real frame
+ * overprints it in place with no visible jump. The bottom panel silhouette
+ * carries an animated "Loading projects…" spinner so the boot reads as an
+ * explicit loading state instead of an empty box that later fills with the
+ * list. Returns { stop } — call it right before ink mounts.
+ */
+function paintBootSplash() {
+  try {
+    const cols = Math.max(1, Number(process.stdout.columns) || 80);
+    const rows = Math.max(1, Number(process.stdout.rows) || 24);
+    const center = (s) => `${' '.repeat(Math.max(0, Math.floor((cols - s.length) / 2)))}${s}`;
+    const logo = [
+      '███╗   ███╗██╗██╗  ██╗██████╗  ██████╗  ██████╗ ',
+      '████╗ ████║██║╚██╗██╔╝██╔══██╗██╔═══██╗██╔════╝ ',
+      '██╔████╔██║██║ ╚███╔╝ ██║  ██║██║   ██║██║  ███╗',
+      '██║╚██╔╝██║██║ ██╔██╗ ██║  ██║██║   ██║██║   ██║',
+      '██║ ╚═╝ ██║██║██╔╝ ██╗██████╔╝╚██████╔╝╚██████╔╝',
+    ];
+    const textFg = ansiFg(theme.text);
+    const logoFg = ansiFg(theme.logo ?? theme.claude) || textFg;
+    const subtleFg = ansiFg(theme.inactive);
+    const bold = '\x1b[1m';
+    const reset = '\x1b[0m';
+    let out = '\x1b[4;1H'; // row 4 == App banner's marginTop={3}
+    for (let i = 0; i < logo.length; i++) {
+      const fg = i < 2 ? textFg : logoFg;
+      out += `${bold}${fg}${center(logo[i])}${reset}\r\n`;
+    }
+    out += '\r\n';
+    out += `${subtleFg}${center(`mixdog coding agent · ${process.cwd()}`)}${reset}`;
+    // Bottom placeholder: the first REAL screen is the project picker — a tall
+    // floating panel sitting directly above the 3-row statusline — not the
+    // 3-row prompt box. Painting a short prompt silhouette here made the panel
+    // look like it "unfolded" from 3 rows to full height on the first ink
+    // frame. Mirror App.jsx's startup math instead:
+    //   floatingPanelRows = min(17, rows - 15), bottom row = rows - 3.
+    const floating = Math.min(17, rows - 15);
+    let spinnerRow = 0;
+    let spinnerFg = '';
+    if (floating >= 3) {
+      const borderFg = ansiFg(theme.promptBorder) || subtleFg;
+      // Leave the last COLUMN untouched: writing the bottom-right cell makes
+      // Windows Terminal/conhost scroll the alt screen one row (same reason
+      // App.jsx reserves rightSafetyColumns), which made the whole splash jump
+      // when the box was painted at full width on the final row.
+      const boxW = Math.max(4, cols - 1);
+      const innerW = boxW - 2;
+      const topRow = rows - 3 - floating + 1;
+      out += `\x1b[${topRow};1H${borderFg}╭${'─'.repeat(innerW)}╮`;
+      for (let i = 1; i < floating - 1; i++) {
+        out += `\x1b[${topRow + i};1H│${' '.repeat(innerW)}│`;
+      }
+      out += `\x1b[${rows - 3};1H╰${'─'.repeat(innerW)}╯${reset}`;
+      // "Loading projects…" line inside the panel silhouette. Picker.jsx
+      // renders border, then (paddingX=1, no paddingY) title/help row as its
+      // very first interior row — not vertically centered. Match that rhythm
+      // (topRow + 1) instead of centering, so ink's first frame doesn't jump
+      // the text down/up when it overprints this splash.
+      spinnerRow = topRow + 1;
+      spinnerFg = subtleFg;
+      out += `\x1b[${spinnerRow};3H${subtleFg}  Loading projects…${reset}`;
+    }
+    // Park the cursor at home so ink's first frame paints top-down over the
+    // splash instead of starting at the bottom row and scrolling the screen.
+    out += '\x1b[H';
+    process.stdout.write(out);
+    // Animate only the single spinner glyph cell — never reflow anything else,
+    // so stopping mid-frame can't leave torn output for ink to overwrite.
+    if (spinnerRow > 0) {
+      const frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+      let tick = 0;
+      const timer = setInterval(() => {
+        try {
+          process.stdout.write(`\x1b[${spinnerRow};3H${spinnerFg}${frames[tick % frames.length]}${reset}\x1b[H`);
+          tick += 1;
+        } catch { /* ignore */ }
+      }, 80);
+      timer.unref?.();
+      return { stop: () => clearInterval(timer) };
+    }
+    return { stop: () => {} };
+  } catch { /* cosmetic only — never block boot */ }
+  return { stop: () => {} };
+}
+
 /** Drain stdin so queued key/mouse bytes do not leak into the shell after exit. */
 function drainStdin(stdin = process.stdin) {
   if (!stdin.isTTY) return;
@@ -277,17 +372,27 @@ export async function runTui({ provider, model, toolMode, remote, forceOnboardin
   try { await loadThemeSettingFromConfig(); } catch { /* default theme stays */ }
   emitTerminalBackground(theme.background);
 
+  // Static splash + loading spinner while createEngineSession() warms up
+  // (config, providers, sessions). Without this the user stares at an empty
+  // alt screen for the whole boot, then the UI "pops in" — the splash makes
+  // the first ink frame an in-place repaint instead.
+  const splash = paintBootSplash() || { stop: () => {} };
+
   let store;
   try {
     store = await createEngineSession({ provider, model, toolMode, remote });
     bootProfile('store:ready', { ms: (performance.now() - startedAt).toFixed(1) });
   } catch (error) {
+    splash.stop();
     restoreTerminal();
     try { process.off('exit', restoreTerminal); } catch { /* ignore */ }
     restoreStderr();
     process.stderr.write(`mixdog: ${error?.message || error}\n`);
     return 1;
   }
+  // Stop the spinner BEFORE ink mounts so no stray splash write can land
+  // between (or after) ink's first frames.
+  splash.stop();
 
   // Keep mouse handling app-owned by default: native terminal selections are
   // cleared by the fullscreen redraws that happen while a turn streams. Users

package/src/tui/input-editing.mjs

@@ -1,4 +1,4 @@
-import stringWidth from 'string-width';
+import { displayWidth } from './display-width.mjs';
 
 const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
 
@@ -174,7 +174,7 @@ export function caretPosition(text, offset, width, hasTrailingContent = undefine
       continue;
     }
 
-    const segmentWidth = stringWidth(segment);
+    const segmentWidth = displayWidth(segment);
     if (segmentWidth === 0) continue;
 
     // Mirror ink's wrap-ansi wrapWord (wrap="hard", wordWrap:false): a glyph

package/src/tui/markdown/format-token.mjs

@@ -722,6 +722,9 @@ export function formatToken(token, listBaseIndent = 0, orderedListNumber = null,
       return `${OSC8_OPEN(href)}${ex.link(href)}${OSC8_CLOSE}`;
     }
     case 'list':
+      // Honor loose lists (blank line between items in the source markdown):
+      // items are joined with one extra EOL so multi-line items keep the
+      // author's breathing room. Tight lists render adjacent as before.
       return token.items
         .map((item, index) =>
           formatToken(
@@ -733,7 +736,7 @@ export function formatToken(token, listBaseIndent = 0, orderedListNumber = null,
             depth,
           ),
         )
-        .join('');
+        .join(token.loose && depth === 0 ? EOL : '');
     case 'list_item':
       return formatListItem(token, listBaseIndent, orderedListNumber, parent, depth, width);
     case 'paragraph':

package/src/tui/statusline-ansi-bridge.mjs

@@ -42,11 +42,16 @@ export function isResetStatsState(stats) {
 /**
  * True when the footer should snap local / invalidate cached async output.
  * Keep in sync with `shouldSnapLocalStatusline` in StatusLine.jsx.
+ * `agentRevision` is intentionally NOT checked here: agent worker/job churn
+ * must only kick off the async full-render refresh (the render effect already
+ * depends on `agentRevision`), never snap the footer back to the usage-less
+ * `localBootStatusLine` before/after the first full render — that was the
+ * source of the boot-entry flicker. `agentRevision` still participates in
+ * `statuslineFooterCacheKey` below so the async cache key churns correctly.
  */
 export function statuslineFooterIdentityChanged(args, lastArgs) {
   if (!args) return false;
   if (!lastArgs) return true;
-  if (args.agentRevision !== lastArgs.agentRevision) return true;
   if (args.sessionId !== lastArgs.sessionId) return true;
   if (args.provider !== lastArgs.provider || args.model !== lastArgs.model) return true;
   if (args.effort !== lastArgs.effort || args.fast !== lastArgs.fast) return true;
@@ -60,8 +65,11 @@ export function statuslineFooterIdentityChanged(args, lastArgs) {
 
 /**
  * Cache key for the last async full statusline (identity-changing props only).
- * Must stay aligned with `shouldSnapLocalStatusline` in StatusLine.jsx.
- * Stats reset is not keyed here; `statuslineFooterIdentityChanged` clears cache instead.
+ * Includes `agentRevision` as a churn key (so a stale async result is not kept
+ * forever), but `agentRevision` is deliberately excluded from
+ * `statuslineFooterIdentityChanged` above — it must not itself force a local
+ * snap-back. Stats reset is not keyed here; `statuslineFooterIdentityChanged`
+ * clears cache instead.
  */
 export function statuslineFooterCacheKey({
   agentRevision = '',

package/src/tui/theme.mjs

@@ -168,10 +168,16 @@ import {
   BLACK_CIRCLE,
   RESULT_GUTTER_GLYPH,
   RESULT_GUTTER_CONT_GLYPH,
+  RIGHT_ARROW,
+  LEFT_ARROW,
 } from './figures.mjs';
 
 /** Turn marker — BLACK_CIRCLE (`⏺` on macOS; `●` elsewhere). */
 export const TURN_MARKER = BLACK_CIRCLE;
+/** Agent call marker — `←` (request going out to a sub-agent). */
+export const AGENT_CALL_MARKER = LEFT_ARROW;
+/** Agent response marker — `→` (result coming back in to the transcript). */
+export const AGENT_RESPONSE_MARKER = RIGHT_ARROW;
 /** Result-tree gutter — `└` (U+2514) padded to a 2-col hanging indent. */
 export const RESULT_GUTTER = `  ${RESULT_GUTTER_GLYPH}  `;
 /**

package/src/ui/statusline-agents.mjs

@@ -0,0 +1,213 @@
+/**
+ * src/ui/statusline-agents.mjs — agent worker/job normalization for the L2 line.
+ *
+ * Extracted verbatim from statusline.mjs: normalize/merge REPL agent workers &
+ * bridge jobs into a statusline payload, classify running vs hidden-maintenance
+ * workers, and enumerate active hidden agents from live session runtimes. No
+ * behavior change.
+ */
+import { forEachSessionRuntime } from '../runtime/agent/orchestrator/session/manager.mjs';
+import { listHiddenAgentNames } from '../runtime/agent/orchestrator/internal-agents.mjs';
+import { num, GRN, R, B } from './statusline-format.mjs';
+
+const DEFAULT_HIDDEN_STATUSLINE_AGENTS = Object.freeze(['explorer', 'cycle1-agent', 'cycle2-agent', 'cycle3-agent', 'scheduler-task', 'webhook-handler']);
+let _hiddenStatuslineAgents = null;
+
+export function summarizeWorkerTags(workers, limit = 3) {
+  const cleanLabels = [...new Set((Array.isArray(workers) ? workers : [])
+    .map((worker) => String(worker?.tag || '').trim())
+    .filter(Boolean))];
+  if (cleanLabels.length <= limit) return cleanLabels.join(', ');
+  return `${cleanLabels.slice(0, limit).join(', ')}, +${cleanLabels.length - limit}`;
+}
+
+function normalizeAgentWorkerForStatusline(worker = {}) {
+  const tag = String(worker.tag || worker.agent || worker.name || '').trim();
+  if (!tag) return null;
+  const statusText = String(worker.stage || worker.status || '').toLowerCase();
+  const status = isTerminalBridgeStatus(statusText) ? 'idle' : 'running';
+  return {
+    tag,
+    status,
+    startedAtMs: timeMs(worker.startedAt || worker.startTime || worker.createdAt),
+    agent: worker.agent || null,
+    stage: worker.stage || worker.status || null,
+    sessionId: worker.sessionId || null,
+    provider: worker.provider || null,
+    model: worker.model || null,
+  };
+}
+
+function normalizeAgentJobForStatusline(job = {}) {
+  const statusText = String(job.status || job.stage || '').toLowerCase();
+  if (!statusText) return null;
+  const taskId = String(job.task_id || job.taskId || '').trim();
+  const tag = String(job.tag || job.agent || job.type || taskId || '').trim();
+  if (!tag && !taskId) return null;
+  const startedAtMs = timeMs(job.startedAt);
+  const finishedAtMs = timeMs(job.finishedAt);
+  if (isTerminalBridgeStatus(statusText) && finishedAtMs > 0) {
+    return {
+      tag,
+      taskId,
+      status: 'finished',
+      finalStatus: statusText,
+      startedAtMs,
+      finishedAtMs,
+      agent: job.agent || null,
+      stage: job.stage || job.workerStatus || job.status || null,
+      sessionId: job.sessionId || null,
+      provider: job.provider || null,
+      model: job.model || null,
+    };
+  }
+  if (!/running/.test(statusText)) return null;
+  return {
+    tag,
+    taskId,
+    status: 'running',
+    startedAtMs,
+    agent: job.agent || null,
+    stage: job.stage || job.workerStatus || job.status || null,
+    sessionId: job.sessionId || null,
+    provider: job.provider || null,
+    model: job.model || null,
+  };
+}
+
+export function agentStatuslinePayload(agentWorkers = [], agentJobs = []) {
+  const byTag = new Map();
+  const finishedJobs = [];
+  for (const worker of Array.isArray(agentWorkers) ? agentWorkers : []) {
+    const row = normalizeAgentWorkerForStatusline(worker);
+    if (row) byTag.set(row.tag, row);
+  }
+  for (const job of Array.isArray(agentJobs) ? agentJobs : []) {
+    const row = normalizeAgentJobForStatusline(job);
+    if (!row) continue;
+    if (row.status === 'finished') {
+      finishedJobs.push(row);
+      continue;
+    }
+    const prev = byTag.get(row.tag);
+    byTag.set(row.tag, { ...(prev || {}), ...row, status: 'running' });
+  }
+  const workers = [...byTag.values()];
+  return {
+    workers,
+    finishedJobs: finishedJobs.sort((a, b) => (b.finishedAtMs || 0) - (a.finishedAtMs || 0)),
+    sessions: {
+      roles: workers.filter((w) => w.status !== 'idle').map((w) => w.tag),
+      workers,
+    },
+  };
+}
+
+export function classifyAgentWorkers(workers = []) {
+  const maintenance = [];
+  const runningWorkers = [];
+  const seenMaintenance = new Set();
+  const seenRunning = new Set();
+  for (const w of Array.isArray(workers) ? workers : []) {
+    const tag = String(w?.tag || '').trim();
+    if (!tag) continue;
+    const maint = hiddenWorkerLabel(w);
+    if (maint) {
+      if (w.status !== 'idle' && !seenMaintenance.has(maint)) {
+        seenMaintenance.add(maint);
+        maintenance.push(`${GRN}↻${R} ${B}${maint}${R}`);
+      }
+      continue;
+    }
+    if (w.status !== 'idle' && !seenRunning.has(tag)) {
+      seenRunning.add(tag);
+      runningWorkers.push(w);
+    }
+  }
+  return { maintenance, runningWorkers };
+}
+
+function hiddenWorkerLabel(worker = {}) {
+  const agent = String(worker?.agent || '').trim();
+  const tag = String(worker?.tag || '').trim();
+  return maintenanceLabel(agent) || (!agent ? maintenanceLabel(tag) : '');
+}
+
+function hiddenStatuslineAgents() {
+  if (_hiddenStatuslineAgents) return _hiddenStatuslineAgents;
+  const agents = new Set(DEFAULT_HIDDEN_STATUSLINE_AGENTS);
+  try {
+    for (const agent of listHiddenAgentNames()) {
+      const clean = String(agent || '').trim();
+      if (clean) agents.add(clean);
+    }
+  } catch {}
+  _hiddenStatuslineAgents = agents;
+  return agents;
+}
+
+function isActiveHiddenStatus(statusText) {
+  return /^(connecting|requesting|streaming|tool_running|running)$/i.test(String(statusText || '').trim());
+}
+
+export function activeHiddenAgentWorkers({ sessionId = '', clientHostPid = 0 } = {}) {
+  const agents = hiddenStatuslineAgents();
+  const ownerPid = positiveInt(clientHostPid);
+  const ownerSessionId = String(sessionId || '').trim();
+  const rows = [];
+  try {
+    for (const [runtimeSessionId, entry] of forEachSessionRuntime() || []) {
+      if (!entry || entry.closed === true) continue;
+      const session = entry.session || null;
+      if (!session || session.closed === true) continue;
+      const agent = String(session?.agent || '').trim();
+      if (!agent || !agents.has(agent)) continue;
+      const id = session?.id || runtimeSessionId || null;
+      if (ownerSessionId && id === ownerSessionId) continue;
+      const sessionOwnerId = String(session?.ownerSessionId || '').trim();
+      if (sessionOwnerId && ownerSessionId && sessionOwnerId !== ownerSessionId) continue;
+      const pid = positiveInt(session?.clientHostPid);
+      if (ownerPid && pid && pid !== ownerPid) continue;
+      const stage = String(entry.stage || session?.stage || session?.status || '').trim().toLowerCase();
+      const status = String(session?.status || stage || '').trim().toLowerCase();
+      if (!isActiveHiddenStatus(stage || status)) continue;
+      rows.push({
+        tag: String(session?.agentTag || `${agent}:${id || rows.length}`).trim(),
+        agent,
+        status: 'running',
+        stage: stage || status || 'running',
+        sessionId: id,
+        provider: session?.provider || null,
+        model: session?.model || null,
+      });
+    }
+  } catch {}
+  return rows;
+}
+
+function isTerminalBridgeStatus(statusText) {
+  return /idle|done|complete|success|closed|error|fail|cancel|killed|timeout/.test(String(statusText || '').toLowerCase());
+}
+
+function timeMs(value) {
+  if (typeof value === 'number' && Number.isFinite(value) && value > 0) return value;
+  const n = Date.parse(String(value || ''));
+  return Number.isFinite(n) ? n : 0;
+}
+
+function maintenanceLabel(tag) {
+  switch (tag) {
+    case 'cycle1-agent': return 'cycle1';
+    case 'cycle2-agent': return 'cycle2';
+    case 'cycle3-agent': return 'cycle3';
+    case 'scheduler-task': return 'scheduler';
+    case 'webhook-handler': return 'webhook';
+    case 'explorer': return 'explorer';
+    default: return '';
+  }
+}
+
+function positiveInt(value) {
+  const n = Number(value);
+  return Number.isInteger(n) && n > 0 ? n : 0;
+}

package/src/ui/statusline-format.mjs

@@ -0,0 +1,146 @@
+/**
+ * src/ui/statusline-format.mjs — pure formatting primitives for the footer.
+ *
+ * Extracted verbatim from statusline.mjs: ANSI SGR constants, the context%
+ * bar/segment formatters, small numeric helpers, and the TUI-independent
+ * formatElapsed() replica. No behavior change — statusline.mjs re-imports these.
+ */
+import { colorEnabled, rgb } from './ansi.mjs';
+import { displayModelName, shortenModelName } from './model-display.mjs';
+import { getModelMetadataSync } from '../runtime/agent/orchestrator/providers/model-catalog.mjs';
+
+// Token window used to compute a fallback context% from our own session usage.
+// The live gateway (when up) overrides this with the real route's window. This
+// is only the last resort for unknown local models.
+export const FALLBACK_CONTEXT_WINDOW = 200000;
+export const statusText = rgb(198, 198, 198);
+export const statusSubtle = rgb(136, 136, 136);
+export const statusAccent = rgb(215, 119, 87);
+
+function sgr(code) {
+  return colorEnabled() ? `\x1b[${code}m` : '';
+}
+
+export const R = sgr('0');
+export const B = sgr('1');
+export const D = sgr('38;2;136;136;136');
+export const GRN = sgr('38;2;0;170;75');
+export const YLW = sgr('38;2;255;193;7');
+export const RED = sgr('38;2;220;70;88');
+export const CYN = sgr('38;2;136;136;136');
+export const GREY = sgr('38;2;136;136;136');
+
+export function terminalColumns() {
+  const cols = Number(process.stdout?.columns);
+  return Number.isFinite(cols) && cols > 0 ? Math.floor(cols) : 120;
+}
+
+export function modelContextWindow(provider, model, explicitContextWindow = 0) {
+  const explicit = num(explicitContextWindow);
+  if (explicit > 0) return explicit;
+  const metaWindow = num(getModelMetadataSync(model, provider)?.contextWindow);
+  if (metaWindow > 0) return metaWindow;
+  return FALLBACK_CONTEXT_WINDOW;
+}
+
+export function formatModelSegment({ provider, model, effort, fast, cols }) {
+  const raw = String(model || '').trim();
+  const meta = getModelMetadataSync(raw, provider) || {};
+  const displayHint = String(meta.displayName || meta.display || meta.name || '').trim();
+  const modelName = shortenModelName(displayModelName(raw, provider, displayHint), cols);
+  const bits = [`${B}${modelName}${R}`];
+  if (effort) bits.push(`${B}${String(effort).toUpperCase()}${R}`);
+  if (fast === true) bits.push(`${B}FAST${R}`);
+  return bits.join(` ${D}·${R} `);
+}
+
+/** Display label for context % (clamped to 100); raw pct still drives bar/color thresholds. */
+export function contextPctDisplayLabel(ctxPct) {
+  const pct = Number(ctxPct);
+  if (!Number.isFinite(pct) || pct <= 0) return '0';
+  if (pct > 0 && pct < 1) return String(Math.round(pct * 10) / 10);
+  return String(Math.floor(Math.min(100, pct)));
+}
+
+export function formatContextSegment(ctxPct, cols) {
+  const raw = Number(ctxPct);
+  const pct = Number.isFinite(raw) ? Math.max(0, raw) : 0;
+  const barPct = clampPct(pct);
+  const fill = pct >= 90 ? RED : pct >= 70 ? YLW : GRN;
+  const label = contextPctDisplayLabel(pct);
+  // Keep a full-width bar wherever there is room for one. Below 80 cols the bar
+  // is dropped (label-only) so the footer never overflows a narrow terminal;
+  // at 80+ it stays a fixed 14 cells instead of shrinking to 8, which read as
+  // too small/cramped on mid-width terminals.
+  const cells = cols >= 80 ? 14 : 0;
+  if (!cells) return `${fill}${label}%${R}`;
+  const bar = makeBar(barPct, cells);
+  const filled = bar.replace(/░/g, '');
+  const empty = bar.replace(/▓/g, '');
+  return `${fill}${filled}${R}${D}${empty}${R} ${label}%`;
+}
+
+export function makeBar(pct, cells) {
+  let filled = Math.floor((Number(pct) || 0) * cells / 100);
+  if (filled < 0) filled = 0;
+  if (filled > cells) filled = cells;
+  if (pct >= 1 && filled === 0) filled = 1;
+  return '▓'.repeat(filled) + '░'.repeat(cells - filled);
+}
+
+export function colourPct(p) {
+  if (p >= 90) return `${RED}${p}%${R}`;
+  if (p >= 70) return `${YLW}${p}%${R}`;
+  return `${GRN}${p}%${R}`;
+}
+
+export function epochMsToHHMM(ms) {
+  const d = new Date(Number(ms));
+  if (!Number.isFinite(d.getTime())) return '';
+  return d.toLocaleTimeString('sv-SE', { hour: '2-digit', minute: '2-digit', hour12: false });
+}
+
+export function num(v) {
+  const n = Number(v);
+  return Number.isFinite(n) ? n : 0;
+}
+
+export function clampPct(v) {
+  const n = Number(v);
+  if (!Number.isFinite(n)) return 0;
+  return Math.max(0, Math.min(100, n));
+}
+
+/** Human-friendly token count: 1234 -> 1.2k. */
+export function fmt(n) {
+  const v = Number(n) || 0;
+  if (v < 1000) return String(Math.round(v));
+  if (v < 1_000_000) {
+    const k = Math.round(v / 1000);
+    return k >= 1000 ? '1M' : `${k}k`;
+  }
+  return (v / 1_000_000).toFixed(1) + 'M';
+}
+
+// Byte-identical replica of src/tui/time-format.mjs formatDuration() with
+// DEFAULT options (no mostSignificantOnly / hideTrailingZeros), wrapped to drop
+// sub-1s like formatElapsed there. Output shape: '' (<1s), `Xs`, `Xm Ys`,
+// `Xh Ym Zs`, `Xd Yh Zm`. statusline.mjs is a standalone UI module that should
+// not depend on the React/ink TUI tree, so the algorithm is replicated rather
+// than imported. Used for ALL L2 elapsed (Agents/Explore/Search/Shell).
+export function formatElapsed(ms) {
+  if (!Number.isFinite(Number(ms))) return '';
+  const value = Math.max(0, Number(ms) || 0);
+  if (value < 60_000) {
+    if (value < 1_000) return '';
+    return `${Math.floor(value / 1000)}s`;
+  }
+  const days = Math.floor(value / 86_400_000);
+  const hours = Math.floor((value % 86_400_000) / 3_600_000);
+  const minutes = Math.floor((value % 3_600_000) / 60_000);
+  const seconds = Math.floor((value % 60_000) / 1000);
+  if (days > 0) return `${days}d ${hours}h ${minutes}m`;
+  if (hours > 0) return `${hours}h ${minutes}m ${seconds}s`;
+  if (minutes > 0) return `${minutes}m ${seconds}s`;
+  return `${seconds}s`;
+}