mixdog 0.9.2 → 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' });
 
@@ -122,32 +122,79 @@ export function lineEnd(text, offset) {
   return end === -1 ? value.length : end;
 }
 
-export function caretPosition(text, offset, width) {
+// Return the [start,end) run of same-class characters (word-like vs
+// non-word-like) surrounding `offset`, used by double-click word selection.
+// Mirrors typical desktop double-click behavior: clicking inside a run of
+// letters/digits selects that whole run; clicking on a run of punctuation or
+// whitespace selects that run instead (still deterministic, never empty).
+export function wordRangeAt(text, offset) {
+  const value = String(text || '');
+  const units = graphemeUnits(value);
+  if (units.length === 0) return { start: 0, end: 0 };
+  const off = clampOffset(value, offset);
+  let idx = units.findIndex((u) => off >= u.start && off < u.end);
+  if (idx === -1) {
+    idx = units.length - 1;
+    for (let i = 0; i < units.length; i += 1) {
+      if (units[i].start >= off) { idx = i > 0 ? i - 1 : 0; break; }
+    }
+  }
+  const targetIsWord = wordLike(units[idx].segment);
+  let start = idx;
+  while (start > 0 && wordLike(units[start - 1].segment) === targetIsWord) start -= 1;
+  let end = idx;
+  while (end < units.length - 1 && wordLike(units[end + 1].segment) === targetIsWord) end += 1;
+  return { start: units[start].start, end: units[end].end };
+}
+
+// `hasTrailingContent` (default derived from the full text) decides whether a
+// caret that lands FLUSH on the last column (col === w) rolls to the next row.
+// It must reflect whether ANY rendered cell follows this offset in the FULL
+// text — not just the sliced prefix — otherwise a caret at a mid-text soft-wrap
+// boundary reports {row N, col w} while ink already rendered the next glyph on
+// row N+1, dropping the caret outside the box. PromptInput also appends a
+// trailing space cell when the cursor sits at end-of-input, so "end of text"
+// still has a following cell there; callers pass hasTrailingContent=true for
+// that case.
+export function caretPosition(text, offset, width, hasTrailingContent = undefined) {
   const value = String(text || '');
   const before = value.slice(0, offset);
   const w = safeWidth(width);
+  const followsInFullText = hasTrailingContent === undefined
+    ? offset < value.length
+    : hasTrailingContent === true;
   let row = 0;
   let col = 0;
-
-  for (const { segment } of graphemeSegmenter.segment(before)) {
+  const segments = [...graphemeSegmenter.segment(before)];
+  for (let i = 0; i < segments.length; i += 1) {
+    const { segment } = segments[i];
     if (segment === '\n') {
       row += 1;
       col = 0;
       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
+    // that would overflow the row is pushed WHOLE to the next row (col never
+    // exceeds w for wide chars — no half-column left behind), and a glyph that
+    // lands flush on the last column starts a new row ONLY when more rendered
+    // content follows. Whether content follows is decided from the FULL text
+    // (followsInFullText), not the sliced prefix, so a caret at a mid-text wrap
+    // boundary rolls to row N+1 exactly as ink renders it. The old
+    // `col >= w → row += floor(col/w)` over-counted a row for width-2 glyphs at
+    // odd widths (col could reach w+1), landing the cursor one row too low.
     if (col > 0 && col + segmentWidth > w) {
       row += 1;
       col = 0;
     }
-
     col += segmentWidth;
-    if (col >= w) {
-      row += Math.floor(col / w);
-      col %= w;
+    const moreFollows = i < segments.length - 1 || followsInFullText;
+    if (col === w && moreFollows) {
+      row += 1;
+      col = 0;
     }
   }
 
@@ -185,13 +232,16 @@ function boundaryPositions(text, width) {
   for (const unit of graphemeUnits(value)) offsets.push(unit.end);
 
   const seen = new Set();
-  return offsets
+  const positions = offsets
     .filter((offset) => {
       if (seen.has(offset)) return false;
       seen.add(offset);
       return true;
     })
+    // Decide the flush-boundary advance from the FULL text so a soft-wrap
+    // offset reports {row N+1, col 0} (matching ink) instead of {row N, col w}.
     .map((offset) => ({ offset, ...caretPosition(value, offset, width) }));
+  return positions;
 }
 
 export function verticalOffset(text, offset, width, direction, preferredColumn = null) {

package/src/tui/keyboard-protocol.mjs

@@ -1,7 +1,7 @@
 /**
  * src/tui/keyboard-protocol.mjs — terminal extended-keys capability gate.
  *
- * We do NOT query the terminal. Instead, mirroring Claude Code, we enable the
+ * We do NOT query the terminal. Instead, we enable the
  * kitty keyboard protocol AND xterm modifyOtherKeys SYNCHRONOUSLY at the moment
  * raw mode turns on (see App.jsx's mount effect), gated by the allowlist below.
  * Writing both enables unconditionally is safe — a terminal honors whichever it
@@ -22,7 +22,7 @@ export const POP_KITTY = '\x1b[<u';
 export const DISABLE_MODIFY_OTHER_KEYS = '\x1b[>4;0m';
 
 // Allowlist of terminals known to honor kitty and/or xterm modifyOtherKeys.
-// Mirrors Claude Code's supportsExtendedKeys allowlist. VS Code's xterm.js
+// VS Code's xterm.js
 // integrated terminal mishandles these sequences, so it is excluded first.
 // Honors the MIXDOG_TUI_EXTENDED_KEYS opt-out (=0) / override (=1).
 export function supportsExtendedKeys() {

package/src/tui/lib/voice-recorder.mjs

@@ -80,28 +80,42 @@ export function isVoiceEnabled() {
 }
 
 // Coalesce ensure*'s onProgress ({ phase, downloaded, total } | { phase:'extra', ... })
-// into a throttled (2s) human-readable pushNotice call so a multi-hundred-MB
-// model download doesn't spam the notice toast on every chunk.
-function makeThrottledProgressNotice(pushNotice, intervalMs = 2000) {
+// into a sticky, in-place input-hint-line progress bar (setProgressHint) so a
+// multi-hundred-MB model download doesn't spam the notice toast on every
+// chunk. Falls back to the old throttled (2s) toast-spam behavior when the
+// caller (e.g. the channels pipeline) doesn't have a progress-hint slot to
+// render into — only pushNotice is guaranteed to exist everywhere.
+const PROGRESS_BAR_CELLS = 6;
+function renderProgressBarText(phase, downloaded, total) {
+  const label = phaseLabel(phase);
+  if (total > 0) {
+    const ratio = Math.max(0, Math.min(1, downloaded / total));
+    const filled = Math.round(ratio * PROGRESS_BAR_CELLS);
+    const bar = '▓'.repeat(filled) + '░'.repeat(PROGRESS_BAR_CELLS - filled);
+    return `⬇ Voice ${label} ${bar} ${Math.round(ratio * 100)}%`;
+  }
+  return `⬇ Voice ${label} …`;
+}
+function phaseLabel(phase) {
+  if (phase === 'model') return 'model';
+  if (phase === 'ffmpeg') return 'ffmpeg';
+  if (phase === 'extra') return 'extra data';
+  return 'whisper runtime';
+}
+function makeThrottledProgressNotice({ pushNotice, setProgressHint } = {}, intervalMs = 500) {
   let lastEmitAt = 0;
-  const phaseLabel = (phase) => {
-    if (phase === 'model') return 'model';
-    if (phase === 'ffmpeg') return 'ffmpeg';
-    if (phase === 'extra') return 'extra data';
-    return 'whisper runtime';
-  };
   return (progress = {}) => {
-    if (typeof pushNotice !== 'function') return;
     const now = Date.now();
     if (now - lastEmitAt < intervalMs) return;
     lastEmitAt = now;
     const total = Number(progress.total) || 0;
     const downloaded = Number(progress.downloaded) || 0;
-    const label = phaseLabel(progress.phase);
-    const text = total > 0
-      ? `Voice: downloading ${label}… ${Math.min(100, Math.round((downloaded / total) * 100))}%`
-      : `Voice: downloading ${label}…`;
-    pushNotice(text, 'info');
+    const text = renderProgressBarText(progress.phase, downloaded, total);
+    if (typeof setProgressHint === 'function') {
+      setProgressHint(text, 'info');
+      return;
+    }
+    if (typeof pushNotice === 'function') pushNotice(text, 'info');
   };
 }
 
@@ -112,12 +126,12 @@ function makeThrottledProgressNotice(pushNotice, intervalMs = 2000) {
  * runtime descriptor (resolveVoiceRuntime shape) once `installed` is true;
  * throws on any ensure* failure (manifest fetch, sha256 mismatch, etc.).
  */
-export async function ensureVoiceRuntimeReady({ dataDir = resolvePluginData(), pushNotice } = {}) {
+export async function ensureVoiceRuntimeReady({ dataDir = resolvePluginData(), pushNotice, setProgressHint } = {}) {
   const fetcher = await loadVoiceRuntimeFetcher();
   let runtime = fetcher.resolveVoiceRuntime(dataDir);
   if (runtime.installed) return runtime;
 
-  const onProgress = makeThrottledProgressNotice(pushNotice);
+  const onProgress = makeThrottledProgressNotice({ pushNotice, setProgressHint });
   if (!runtime.binary || !runtime.serverCmd) {
     await fetcher.ensureWhisperRuntime(dataDir, onProgress);
   }
@@ -147,7 +161,7 @@ export async function ensureVoiceRuntimeReady({ dataDir = resolvePluginData(), p
  * Returns the NEW enabled state (true/false) on success, or null when the
  * toggle could not run (install already in flight) or failed.
  */
-export async function toggleVoice({ pushNotice } = {}) {
+export async function toggleVoice({ pushNotice, setProgressHint } = {}) {
   const dataDir = resolvePluginData();
   if (isVoiceEnabled()) {
     // Med-5: updateSection is a synchronous file write (readAllForRmW +
@@ -172,11 +186,13 @@ export async function toggleVoice({ pushNotice } = {}) {
   }
   _voiceInstallBusy = true;
   try {
-    await ensureVoiceRuntimeReady({ dataDir, pushNotice });
+    await ensureVoiceRuntimeReady({ dataDir, pushNotice, setProgressHint });
     updateSection('voice', (current) => ({ ...current, enabled: true }));
+    setProgressHint?.('');
     pushNotice?.('Voice ON — Ctrl+Space to record', 'info');
     return true;
   } catch (err) {
+    setProgressHint?.('');
     pushNotice?.(`Voice setup failed: ${err?.message || err}`, 'error');
     return null;
   } finally {

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

@@ -108,8 +108,8 @@ function decodeEntities(s) {
 
 // ── Fenced code block rendering ─────────────────────────────────────────────
 // Gutter-indented, syntax-highlighted body with NO background band and no ```
-// fences (codex/claude-code convention). Diff/patch languages (and bodies that
-// look like unified diffs) keep the diff highlighter; other languages use
+// fences. Diff/patch languages (and bodies that look like unified diffs) keep
+// the diff highlighter; other languages use
 // cli-highlight (highlight.js) themed from our syntax* palette; unknown
 // languages fall back to flat `mdCodeBlock` body color.
 const DIFF_LANGS = new Set(['diff', 'patch', 'udiff', 'git-diff', 'gitdiff']);
@@ -567,7 +567,7 @@ function collectHighlightedBodyLines(text, hljsLang, bandWidth) {
 const CODE_GUTTER = '  ';
 
 /**
- * Render a fenced `code` token (codex/claude-code convention): an optional
+ * Render a fenced `code` token: an optional
  * subtle language label row, then the wrapped, syntax/diff/flat-highlighted
  * body. Every row is left-indented by a 2-col gutter. NO background band, no
  * full-width padding, and no visible ``` fence lines.
@@ -653,7 +653,7 @@ export function formatToken(token, listBaseIndent = 0, orderedListNumber = null,
   const ex = extraColorizers();
   switch (token.type) {
     case 'blockquote': {
-      // Block structure carries no color (claude-code policy): a dim bar plus
+      // Block structure carries no color: a dim bar plus
       // body-colored italic text. Color is reserved for inline codespan/link.
       const bar = chalk.dim(BLOCKQUOTE_BAR);
       const quotePrefix = `${BLOCKQUOTE_BAR} `;
@@ -673,12 +673,11 @@ export function formatToken(token, listBaseIndent = 0, orderedListNumber = null,
       return renderCodeBlock(token, width);
     case 'codespan':
       // inline code — accent color only (no background tint; a bg box behind
-      // inline spans reads as awkward against body text, matches claude-code's
-      // codespan = color-only treatment).
+      // inline spans reads as awkward against body text).
       return accent(decodeEntities(token.text));
     case 'em':
-      // Italic only — no color tint (matches codex/claude-code; a colored em
-      // clashes per-theme and reads loud against body prose).
+      // Italic only — no color tint (a colored em clashes per-theme and
+      // reads loud against body prose).
       return chalk.italic((token.tokens ?? []).map((t) => formatToken(t, 0, null, parent)).join(''));
     case 'strong':
       // Bold only — no color tint (stays body-colored, just heavier weight).
@@ -723,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(
@@ -734,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/paste-attachments.mjs

@@ -67,6 +67,44 @@ export function imageReferenceIds(input) {
   return new Set([...String(input || '').matchAll(re)].map((m) => Number(m[1]) || 0).filter(Boolean));
 }
 
+// --- Large pasted-text folding ------------------------------------------
+// A big paste is replaced in the prompt by a compact token so the editor does
+// not choke on thousands of raw characters; the original text is stored in an
+// App-level map (mirroring pastedImages) and expanded back on submit.
+const PASTE_TOKEN_MIN_LINES = 3;
+const PASTE_TOKEN_MIN_CHARS = 200;
+
+export function shouldFoldPastedText(text) {
+  const value = String(text ?? '');
+  if (!value) return false;
+  const lineCount = value.split('\n').length;
+  return lineCount >= PASTE_TOKEN_MIN_LINES || value.length > PASTE_TOKEN_MIN_CHARS;
+}
+
+export function formatPastedTextRef(id, text) {
+  const lines = String(text ?? '').split('\n').length;
+  return `[Pasted text #${id} +${lines} lines]`;
+}
+
+export function pastedTextReferenceIds(input) {
+  const re = /\[Pasted text #(\d+) \+\d+ lines\]/g;
+  return new Set([...String(input || '').matchAll(re)].map((m) => Number(m[1]) || 0).filter(Boolean));
+}
+
+// Expand every intact pasted-text token in `value` back to its original text.
+// Broken / partially-deleted tokens simply do not match and are left as-is.
+export function expandPastedTextTokens(value, pastedTexts = {}) {
+  let out = String(value ?? '');
+  if (!pastedTexts || typeof pastedTexts !== 'object') return out;
+  const re = /\[Pasted text #(\d+) \+\d+ lines\]/g;
+  out = out.replace(re, (match, idRaw) => {
+    const entry = pastedTexts[Number(idRaw)] || pastedTexts[idRaw];
+    if (entry && typeof entry.text === 'string') return entry.text;
+    return match;
+  });
+  return out;
+}
+
 export function buildPromptContentWithImages(text, pastedImages = {}) {
   const value = String(text ?? '');
   const refs = imageReferenceIds(value);

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/tui/themes/base.mjs

@@ -35,8 +35,8 @@ export const basePalette = {
   // Picker/list focus row. This is intentionally stronger than text selection.
   selectionText: 'rgb(230,238,255)', // readable on selectionBackground
   selectionBackground: 'rgb(38,79,120)', // classic dark-mode selection blue
-  // Mouse/drag text-selection overlay. Claude Code keeps this role separate:
-  // it replaces the cell background while text remains copy-highlight readable.
+  // Mouse/drag text-selection overlay: a separate role from selectionBackground
+  // so it replaces the cell background while text remains copy-highlight readable.
   selectionHighlightText: 'rgb(255,255,255)',
   selectionHighlightBackground: 'rgb(38,79,120)',
   inactive: 'rgb(132,139,152)', // light_grey

package/src/tui/themes/kanagawa.mjs

@@ -13,10 +13,10 @@ import { basePalette } from './base.mjs';
 export const kanagawaPalette = {
   ...basePalette,
   background: 'transparent', // sumiInk3 #1F1F28
-  claude: 'rgb(210,126,153)', // sakuraPink accent (opencode)
+  claude: 'rgb(210,126,153)', // sakuraPink accent
   logo: 'rgb(232,156,182)', // welcome banner — brighter than accent
   claudeShimmer: 'rgb(156,171,202)', // springViolet2 #9CABCA (lighter accent)
-  mixdogOrange: 'rgb(210,126,153)', // sakuraPink accent (opencode)
+  mixdogOrange: 'rgb(210,126,153)', // sakuraPink accent
   mixdogAmber: 'rgb(156,171,202)', // lighter accent
   mixdogIvory: 'rgb(220,215,186)', // fujiWhite #DCD7BA
   spinnerGlyph: 'rgb(228,104,118)', // most-emphasized: waveRed
@@ -57,7 +57,7 @@ export const kanagawaPalette = {
   mdLink: 'rgb(126,156,216)', // crystalBlue
   mdLinkText: 'rgb(118,148,106)', // waveAqua #76946A
   mdStrong: 'rgb(215,166,87)', // roninYellow #D7A657
-  mdEmph: 'rgb(195,141,157)', // carpYellow opencode #C38D9D
+  mdEmph: 'rgb(195,141,157)', // carpYellow #C38D9D
   mdDiffAdded: 'rgb(152,187,108)', // springGreen
   mdDiffRemoved: 'rgb(255,93,98)', // peachRed
   mdDiffHunk: 'rgb(45,79,103)', // waveBlue #2D4F67
@@ -71,7 +71,7 @@ export const kanagawaPalette = {
   syntaxVariable: 'rgb(220,215,186)', // fujiWhite
   syntaxString: 'rgb(152,187,108)', // springGreen
   syntaxNumber: 'rgb(215,166,87)', // roninYellow #D7A657
-  syntaxType: 'rgb(195,141,157)', // carpYellow opencode #C38D9D
+  syntaxType: 'rgb(195,141,157)', // carpYellow #C38D9D
   syntaxOperator: 'rgb(210,126,153)', // sakuraPink
   syntaxPunctuation: 'rgb(220,215,186)', // fg
   userMessageBackground: 'rgb(42,42,55)', // sumiInk4 #2A2A37

package/src/tui/themes/teal.mjs

@@ -1,16 +1,15 @@
 /**
- * src/tui/themes/teal.mjs — Teal (pi style).
+ * src/tui/themes/teal.mjs — Teal.
  *
- * Faithful port of pi's `dark.json` (refs/pi .../theme/dark.json). Values are
- * taken verbatim: accent teal #8abeb7, body text #d4d4d4, page bg #18181e,
+ * Values: accent teal #8abeb7, body text #d4d4d4, page bg #18181e,
  * green #b5bd68, red #cc6666, warning pure yellow #ffff00, blue #81a2be,
- * mdHeading #f0c674, gray #808080. Syntax uses pi's VS Code Dark+ palette
+ * mdHeading #f0c674, gray #808080. Syntax uses a VS Code Dark+-style palette
  * (keyword #569CD6, string #CE9178, function #DCDCAA, etc.). Spreads
  * `basePalette` first so the full key set is always present.
  */
 import { basePalette } from './base.mjs';
 
-/** Teal — pi-style teal accent with soft body text. */
+/** Teal — teal accent with soft body text. */
 export const tealPalette = {
   ...basePalette,
   background: 'transparent', // export.pageBg #18181e

package/src/tui/themes/utils.mjs

@@ -1,7 +1,7 @@
 /**
  * src/tui/themes/utils.mjs — palette post-processing helpers.
  *
- * Reference pattern (Claude Code / opencode / pi):
+ * Design goals:
  * - keep body text neutral and highly readable;
  * - keep strong live-state colors for spinners/status;
  * - use accent colors sparingly for headings, links and syntax, preferably