mixdog 0.7.18 → 0.8.0

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

@@ -0,0 +1,194 @@
+/**
+ * markdown/format-token.mjs — token → ANSI string renderer.
+ *
+ * Ported from Claude Code (refs/claude-code/src/utils/markdown.ts: formatToken
+ * + helpers), adapted for this CLI:
+ *   - chalk is forced to truecolor (level 3) so colors render regardless of the
+ *     ambient TTY detection (we control the surface).
+ *   - The `permission`/code accent and blockquote bar come from our theme.mjs.
+ *   - `code` (fenced) is emitted as plain text + EOL (no syntax highlighter
+ *     dependency); `codespan` (inline) gets the accent color, like CC.
+ *   - `table` is NOT handled here — the React component (MarkdownTable.jsx)
+ *     renders tables with proper ink Box layout, mirroring CC's hybrid split.
+ *   - Hyperlinks/issue-ref linkify are dropped (no OSC-8 dependency); link text
+ *     is shown plainly with its URL.
+ */
+import { Chalk } from 'chalk';
+import stripAnsi from 'strip-ansi';
+import { theme } from '../theme.mjs';
+import { BLOCKQUOTE_BAR } from '../figures.mjs';
+
+// Force truecolor so chalk emits 24-bit SGR even when the ambient level is 0.
+// ink's <Text> passes these escapes through verbatim.
+const chalk = new Chalk({ level: 3 });
+
+// Use \n unconditionally (CC note: os.EOL's \r breaks segment mapping).
+const EOL = '\n';
+
+/** Parse an `rgb(r,g,b)` theme string into a chalk colorizer. */
+function rgbColor(str) {
+  const m = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/.exec(String(str || ''));
+  if (!m) return (s) => s;
+  return chalk.rgb(Number(m[1]), Number(m[2]), Number(m[3]));
+}
+
+const accent = rgbColor(theme.code); // inline code / codespan accent (CC permission)
+const dim = rgbColor(theme.subtle);
+
+// marked 14 HTML-encodes token.text / codespan.text (`"` → `&quot;`, `&` →
+// `&amp;`, `<`→`&lt;`, `>`→`&gt;`, `'`→`&#39;`), but we render to a terminal,
+// not HTML — so the entities must be decoded back to literals or they leak as
+// `&quot;` on screen. Decode the named set marked emits plus numeric refs;
+// `&amp;` is unwound LAST so `&amp;lt;` → `&lt;` → `<` can't double-decode.
+function decodeEntities(s) {
+  if (typeof s !== 'string' || s.indexOf('&') === -1) return s;
+  return s
+    .replace(/&quot;/g, '"')
+    .replace(/&#0*39;/g, "'")
+    .replace(/&apos;/g, "'")
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&#(\d+);/g, (_, n) => String.fromCodePoint(Number(n)))
+    .replace(/&#[xX]([0-9a-fA-F]+);/g, (_, h) => String.fromCodePoint(parseInt(h, 16)))
+    .replace(/&amp;/g, '&');
+}
+
+/**
+ * Render a single marked token to an ANSI string.
+ * Mirrors CC's formatToken switch verbatim (minus table / hyperlink deps).
+ */
+export function formatToken(token, listDepth = 0, orderedListNumber = null, parent = null) {
+  switch (token.type) {
+    case 'blockquote': {
+      const inner = (token.tokens ?? []).map((t) => formatToken(t)).join('');
+      const bar = dim(BLOCKQUOTE_BAR);
+      return inner
+        .split(EOL)
+        .map((line) => (stripAnsi(line).trim() ? `${bar} ${chalk.italic(line)}` : line))
+        .join(EOL);
+    }
+    case 'code':
+      // No syntax highlighter — emit the code text as-is.
+      return token.text + EOL;
+    case 'codespan':
+      // inline code
+      return accent(decodeEntities(token.text));
+    case 'em':
+      return chalk.italic((token.tokens ?? []).map((t) => formatToken(t, 0, null, parent)).join(''));
+    case 'strong':
+      return chalk.bold((token.tokens ?? []).map((t) => formatToken(t, 0, null, parent)).join(''));
+    case 'heading':
+      switch (token.depth) {
+        case 1:
+          return (
+            chalk.bold.italic.underline(
+              (token.tokens ?? []).map((t) => formatToken(t)).join(''),
+            ) + EOL + EOL
+          );
+        default: // h2+
+          return chalk.bold((token.tokens ?? []).map((t) => formatToken(t)).join('')) + EOL + EOL;
+      }
+    case 'hr':
+      return '---';
+    case 'image':
+      return token.href;
+    case 'link': {
+      if (token.href.startsWith('mailto:')) {
+        return token.href.replace(/^mailto:/, '');
+      }
+      const linkText = (token.tokens ?? []).map((t) => formatToken(t, 0, null, token)).join('');
+      const plain = stripAnsi(linkText);
+      if (plain && plain !== token.href) {
+        return `${linkText} (${token.href})`;
+      }
+      return token.href;
+    }
+    case 'list':
+      return token.items
+        .map((item, index) =>
+          formatToken(item, listDepth, token.ordered ? token.start + index : null, token),
+        )
+        .join('');
+    case 'list_item':
+      return (token.tokens ?? [])
+        .map((t) => `${'  '.repeat(listDepth)}${formatToken(t, listDepth + 1, orderedListNumber, token)}`)
+        .join('');
+    case 'paragraph':
+      return (token.tokens ?? []).map((t) => formatToken(t)).join('') + EOL;
+    case 'space':
+      return EOL;
+    case 'br':
+      return EOL;
+    case 'text':
+      if (parent?.type === 'link') return decodeEntities(token.text);
+      if (parent?.type === 'list_item') {
+        const marker = orderedListNumber === null ? '-' : `${getListNumber(listDepth, orderedListNumber)}.`;
+        const body = token.tokens
+          ? token.tokens.map((t) => formatToken(t, listDepth, orderedListNumber, token)).join('')
+          : decodeEntities(token.text);
+        return `${marker} ${body}${EOL}`;
+      }
+      return decodeEntities(token.text);
+    case 'escape':
+      return decodeEntities(token.text);
+    case 'def':
+    case 'del':
+    case 'html':
+      return '';
+    default:
+      return '';
+  }
+}
+
+/* --- ordered-list numbering (CC: numberToLetter / numberToRoman) ---------- */
+
+function numberToLetter(n) {
+  let result = '';
+  while (n > 0) {
+    n--;
+    result = String.fromCharCode(97 + (n % 26)) + result;
+    n = Math.floor(n / 26);
+  }
+  return result;
+}
+
+const ROMAN_VALUES = [
+  [1000, 'm'], [900, 'cm'], [500, 'd'], [400, 'cd'], [100, 'c'], [90, 'xc'],
+  [50, 'l'], [40, 'xl'], [10, 'x'], [9, 'ix'], [5, 'v'], [4, 'iv'], [1, 'i'],
+];
+
+function numberToRoman(n) {
+  let result = '';
+  for (const [value, numeral] of ROMAN_VALUES) {
+    while (n >= value) { result += numeral; n -= value; }
+  }
+  return result;
+}
+
+function getListNumber(listDepth, orderedListNumber) {
+  switch (listDepth) {
+    case 0:
+    case 1: return String(orderedListNumber);
+    case 2: return numberToLetter(orderedListNumber);
+    case 3: return numberToRoman(orderedListNumber);
+    default: return String(orderedListNumber);
+  }
+}
+
+/**
+ * Pad `content` to `targetWidth` per alignment. `displayWidth` is the visible
+ * width of `content` (ANSI codes excluded). Ported verbatim from CC padAligned.
+ */
+export function padAligned(content, displayWidth, targetWidth, align) {
+  const padding = Math.max(0, targetWidth - displayWidth);
+  if (align === 'center') {
+    const leftPad = Math.floor(padding / 2);
+    return ' '.repeat(leftPad) + content + ' '.repeat(padding - leftPad);
+  }
+  if (align === 'right') {
+    return ' '.repeat(padding) + content;
+  }
+  return content + ' '.repeat(padding);
+}
+
+export { chalk };

package/src/tui/paste-attachments.mjs

@@ -0,0 +1,198 @@
+import { execFile } from 'node:child_process';
+import { randomBytes } from 'node:crypto';
+import { existsSync, readFileSync, statSync, unlinkSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { basename, extname, isAbsolute, resolve } from 'node:path';
+import {
+  API_IMAGE_MAX_BASE64_SIZE,
+  IMAGE_TARGET_RAW_SIZE,
+  imageMetadataText,
+  resizeImageBuffer,
+} from '../runtime/agent/orchestrator/tools/builtin/read-image-resize.mjs';
+
+const IMAGE_MIME = {
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.webp': 'image/webp',
+};
+
+const IMAGE_PATH_RE = /\.(?:png|jpe?g|gif|webp)$/i;
+const MAX_IMAGE_BYTES_WITHOUT_RESIZE = IMAGE_TARGET_RAW_SIZE;
+
+function cleanPathText(value) {
+  let text = String(value || '').trim();
+  if ((text.startsWith('"') && text.endsWith('"')) || (text.startsWith("'") && text.endsWith("'"))) {
+    text = text.slice(1, -1);
+  }
+  if (text.startsWith('file://')) {
+    try { text = decodeURIComponent(new URL(text).pathname); } catch {}
+    if (process.platform === 'win32') text = text.replace(/^\/+([A-Za-z]:)/, '$1').replace(/\//g, '\\');
+  }
+  if (process.platform !== 'win32') {
+    text = text.replace(/\\(.)/g, '$1');
+  }
+  return text;
+}
+
+function mimeForPath(path) {
+  return IMAGE_MIME[extname(String(path || '')).toLowerCase()] || null;
+}
+
+function execFileBuffer(cmd, args, options = {}) {
+  return new Promise((resolve) => {
+    execFile(cmd, args, {
+      windowsHide: true,
+      encoding: 'buffer',
+      maxBuffer: 16 * 1024 * 1024,
+      timeout: 5000,
+      ...options,
+    }, (error, stdout, stderr) => {
+      resolve({ ok: !error, code: error?.code ?? 0, stdout, stderr, error });
+    });
+  });
+}
+
+function tempPngPath() {
+  return resolve(tmpdir(), `mixdog-clipboard-${process.pid}-${Date.now()}-${randomBytes(4).toString('hex')}.png`);
+}
+
+export function formatImageRef(id) {
+  return `[Image #${id}]`;
+}
+
+export function parsePasteReferences(input) {
+  const re = /\[(?:Image|Pasted text|\.\.\.Truncated text) #(\d+)(?: \+\d+ lines)?\]/g;
+  return [...String(input || '').matchAll(re)]
+    .map((m) => ({ id: Number(m[1]) || 0, match: m[0], index: m.index || 0 }))
+    .filter((m) => m.id > 0);
+}
+
+export function imageReferenceIds(input) {
+  const re = /\[Image #(\d+)\]/g;
+  return new Set([...String(input || '').matchAll(re)].map((m) => Number(m[1]) || 0).filter(Boolean));
+}
+
+export function promptContentText(content) {
+  if (typeof content === 'string') return content;
+  if (!Array.isArray(content)) return String(content ?? '');
+  return content.map((part) => {
+    if (typeof part === 'string') return part;
+    if (part?.type === 'text') return part.text || '';
+    if (part?.type === 'image') return `[image: ${part.mimeType || part.mediaType || part.source?.media_type || 'image'}]`;
+    return part?.text || '';
+  }).filter(Boolean).join('\n');
+}
+
+export function buildPromptContentWithImages(text, pastedImages = {}) {
+  const value = String(text ?? '');
+  const refs = imageReferenceIds(value);
+  const imageParts = Object.values(pastedImages || {})
+    .filter((img) => img && img.type === 'image' && refs.has(Number(img.id)))
+    .flatMap((img) => {
+      const parts = [];
+      if (img.metadataText) parts.push({ type: 'text', text: img.metadataText });
+      parts.push({ type: 'image', data: img.content, mimeType: img.mediaType || 'image/png' });
+      return parts;
+    });
+  if (imageParts.length === 0) return value;
+  const parts = [];
+  if (value.trim()) parts.push({ type: 'text', text: value });
+  parts.push(...imageParts);
+  return parts;
+}
+
+export function isImagePathText(value) {
+  return IMAGE_PATH_RE.test(cleanPathText(value));
+}
+
+export function splitPastedImagePathCandidates(text) {
+  const out = [];
+  const lines = String(text || '').replace(/\r\n?/g, '\n').split('\n');
+  for (let li = 0; li < lines.length; li += 1) {
+    const line = lines[li];
+    const chunks = line.split(/ (?=\/|~\/|\.\.?\/|[A-Za-z]:\\|file:\/\/)/g);
+    for (let ci = 0; ci < chunks.length; ci += 1) {
+      const raw = chunks[ci];
+      if (!raw) continue;
+      out.push({ text: raw, imagePath: isImagePathText(raw) });
+    }
+    if (li < lines.length - 1) out.push({ text: '\n', imagePath: false });
+  }
+  return out;
+}
+
+async function imageAttachmentFromBuffer(buffer, mimeType, { filename = 'Pasted image', sourcePath = '' } = {}) {
+  if (!Buffer.isBuffer(buffer) || buffer.length === 0) throw new Error('image is empty');
+  const ext = (mimeType || 'image/png').split('/')[1] || 'png';
+  const resized = await resizeImageBuffer(buffer, ext);
+  if (resized) {
+    return {
+      type: 'image',
+      content: resized.data,
+      mediaType: resized.mimeType,
+      filename,
+      sourcePath,
+      metadataText: imageMetadataText(resized.dimensions, sourcePath || filename),
+    };
+  }
+  if (buffer.length > MAX_IMAGE_BYTES_WITHOUT_RESIZE) {
+    throw new Error(`image is ${(buffer.length / 1024 / 1024).toFixed(1)}MB; install optional sharp support or resize it first`);
+  }
+  const data = buffer.toString('base64');
+  if (data.length > API_IMAGE_MAX_BASE64_SIZE) {
+    throw new Error('image exceeds inline API size limit; resize it first');
+  }
+  return { type: 'image', content: data, mediaType: mimeType || 'image/png', filename, sourcePath };
+}
+
+export async function readImageAttachmentFromPath(rawPath, cwd = process.cwd()) {
+  const cleaned = cleanPathText(rawPath);
+  const mimeType = mimeForPath(cleaned);
+  if (!mimeType) return null;
+  const fullPath = isAbsolute(cleaned) ? cleaned : resolve(cwd || process.cwd(), cleaned);
+  if (!existsSync(fullPath)) return null;
+  const st = statSync(fullPath);
+  if (!st.isFile()) return null;
+  const buffer = readFileSync(fullPath);
+  return imageAttachmentFromBuffer(buffer, mimeType, {
+    filename: basename(fullPath),
+    sourcePath: fullPath,
+  });
+}
+
+async function readClipboardImageToTempFile() {
+  const out = tempPngPath();
+  if (process.platform === 'win32') {
+    const ps = '$p=$env:MIXDOG_CLIPBOARD_IMAGE_PATH; Add-Type -AssemblyName System.Drawing; $img=Get-Clipboard -Format Image; if ($null -eq $img) { exit 2 }; $img.Save($p, [System.Drawing.Imaging.ImageFormat]::Png)';
+    const r = await execFileBuffer('powershell.exe', ['-NoLogo', '-NoProfile', '-NonInteractive', '-Command', ps], {
+      env: { ...process.env, MIXDOG_CLIPBOARD_IMAGE_PATH: out },
+    });
+    return r.ok && existsSync(out) ? out : null;
+  }
+  if (process.platform === 'darwin') {
+    const script = `set png_data to (the clipboard as «class PNGf»)\nset fp to open for access POSIX file "${out.replace(/"/g, '\\"')}" with write permission\nwrite png_data to fp\nclose access fp`;
+    const r = await execFileBuffer('osascript', ['-e', script]);
+    return r.ok && existsSync(out) ? out : null;
+  }
+  return null;
+}
+
+export async function readClipboardImageAttachment() {
+  if (process.platform === 'linux') {
+    const wl = await execFileBuffer('wl-paste', ['--type', 'image/png'], { timeout: 3000 });
+    if (wl.ok && wl.stdout?.length) return imageAttachmentFromBuffer(wl.stdout, 'image/png');
+    const xc = await execFileBuffer('xclip', ['-selection', 'clipboard', '-t', 'image/png', '-o'], { timeout: 3000 });
+    if (xc.ok && xc.stdout?.length) return imageAttachmentFromBuffer(xc.stdout, 'image/png');
+    return null;
+  }
+  const file = await readClipboardImageToTempFile();
+  if (!file) return null;
+  try {
+    const buffer = readFileSync(file);
+    return await imageAttachmentFromBuffer(buffer, 'image/png');
+  } finally {
+    try { unlinkSync(file); } catch {}
+  }
+}

package/src/tui/runtime/shared/process-shutdown.mjs

@@ -0,0 +1 @@
+export * from '../../../runtime/shared/process-shutdown.mjs';

package/src/tui/spinner-verbs.mjs

@@ -0,0 +1,45 @@
+/**
+ * src/tui/spinner-verbs.mjs — playful "thinking" verbs for the spinner.
+ *
+ * Ported verbatim from Claude Code (refs/claude-code/src/constants/spinnerVerbs.ts
+ * SPINNER_VERBS). Shown as `<Verb>… (Ns · ↑ N tokens)` while a turn runs.
+ */
+export const SPINNER_VERBS = [
+  'Accomplishing', 'Actioning', 'Actualizing', 'Architecting', 'Baking', 'Beaming',
+  "Beboppin'", 'Befuddling', 'Billowing', 'Blanching', 'Bloviating', 'Boogieing',
+  'Boondoggling', 'Booping', 'Bootstrapping', 'Brewing', 'Bunning', 'Burrowing',
+  'Calculating', 'Canoodling', 'Caramelizing', 'Cascading', 'Catapulting',
+  'Cerebrating', 'Channeling', 'Channelling', 'Choreographing', 'Churning',
+  'Clauding', 'Coalescing', 'Cogitating', 'Combobulating', 'Composing', 'Computing',
+  'Concocting', 'Considering', 'Contemplating', 'Cooking', 'Crafting', 'Creating',
+  'Crunching', 'Crystallizing', 'Cultivating', 'Deciphering', 'Deliberating',
+  'Determining', 'Dilly-dallying', 'Discombobulating', 'Doing', 'Doodling',
+  'Drizzling', 'Ebbing', 'Effecting', 'Elucidating', 'Embellishing', 'Enchanting',
+  'Envisioning', 'Evaporating', 'Fermenting', 'Fiddle-faddling', 'Finagling',
+  'Flambéing', 'Flibbertigibbeting', 'Flowing', 'Flummoxing', 'Fluttering',
+  'Forging', 'Forming', 'Frolicking', 'Frosting', 'Gallivanting', 'Galloping',
+  'Garnishing', 'Generating', 'Gesticulating', 'Germinating', 'Gitifying',
+  'Grooving', 'Gusting', 'Harmonizing', 'Hashing', 'Hatching', 'Herding', 'Honking',
+  'Hullaballooing', 'Hyperspacing', 'Ideating', 'Imagining', 'Improvising',
+  'Incubating', 'Inferring', 'Infusing', 'Ionizing', 'Jitterbugging', 'Julienning',
+  'Kneading', 'Leavening', 'Levitating', 'Lollygagging', 'Manifesting', 'Marinating',
+  'Meandering', 'Metamorphosing', 'Misting', 'Moonwalking', 'Moseying', 'Mulling',
+  'Mustering', 'Musing', 'Nebulizing', 'Nesting', 'Newspapering', 'Noodling',
+  'Nucleating', 'Orbiting', 'Orchestrating', 'Osmosing', 'Perambulating',
+  'Percolating', 'Perusing', 'Philosophising', 'Photosynthesizing', 'Pollinating',
+  'Pondering', 'Pontificating', 'Pouncing', 'Precipitating', 'Prestidigitating',
+  'Processing', 'Proofing', 'Propagating', 'Puttering', 'Puzzling', 'Quantumizing',
+  'Razzle-dazzling', 'Razzmatazzing', 'Recombobulating', 'Reticulating', 'Roosting',
+  'Ruminating', 'Sautéing', 'Scampering', 'Schlepping', 'Scurrying', 'Seasoning',
+  'Shenaniganing', 'Shimmying', 'Simmering', 'Skedaddling', 'Sketching', 'Slithering',
+  'Smooshing', 'Sock-hopping', 'Spelunking', 'Spinning', 'Sprouting', 'Stewing',
+  'Sublimating', 'Swirling', 'Swooping', 'Symbioting', 'Synthesizing', 'Tempering',
+  'Thinking', 'Thundering', 'Tinkering', 'Tomfoolering', 'Topsy-turvying',
+  'Transfiguring', 'Transmuting', 'Twisting', 'Undulating', 'Unfurling',
+  'Unravelling', 'Vibing', 'Waddling', 'Wandering', 'Warping', 'Whatchamacalliting',
+  'Whirlpooling', 'Whirring', 'Whisking', 'Wibbling', 'Working', 'Wrangling',
+  'Zesting', 'Zigzagging',
+];
+
+/** Spinner glyph frames. */
+export const SPINNER_FRAMES = ['◇', '◆', '◈', '◆', '◇'];

package/src/tui/theme.mjs

@@ -0,0 +1,67 @@
+/**
+ * src/tui/theme.mjs — Claude Code dark palette for the React/ink TUI.
+ *
+ * Claude Code-inspired dark palette tuned for Windows Terminal.
+ * ink accepts `rgb(r,g,b)` strings directly on the `color`/`backgroundColor`
+ * props, so these are plain strings (no escape wrapping needed — ink emits the
+ * SGR and honors NO_COLOR/non-TTY itself).
+ *
+ * Dark-fixed for now (terminal background detection can pick light later).
+ */
+export const theme = {
+  background: 'rgb(13,13,13)', // opaque TUI surface; masks clipped scrollback behind fixed rows
+  claude: 'rgb(215,119,87)', // orange title/header accent
+  claudeShimmer: 'rgb(235,159,127)',
+  mixdogOrange: 'rgb(215,119,87)',
+  mixdogAmber: 'rgb(235,159,127)',
+  mixdogIvory: 'rgb(232,226,215)',
+  spinnerGlyph: 'rgb(215,119,87)',
+  spinnerText: 'rgb(215,119,87)',
+  spinnerShimmer: 'rgb(255,214,186)',
+  thinkingAccent: 'rgb(168,168,168)',
+  thinkingText: 'rgb(198,198,198)', // live reasoning body text
+  thinkingBase: 'rgb(168,168,168)',  // quiet base; thinking rows should not compete with answers
+  thinkingGlow: 'rgb(220,220,220)', // subtle highlight for the thinking shimmer
+  statusText: 'rgb(198,198,198)',
+  statusSubtle: 'rgb(168,168,168)',
+  timerText: 'rgb(168,168,168)', // live elapsed timer — metadata weight, no bright accent
+  text: 'rgb(198,198,198)', // Claude Code-like primary text
+  inverseText: 'rgb(0,0,0)', // text on an inverted (light) background
+  inactive: 'rgb(136,136,136)', // secondary text
+  subtle: 'rgb(140,140,140)', // helper text / quiet rules
+  promptBorder: 'rgb(158,158,158)', // input border / prompt
+  success: 'rgb(28,150,78)', // muted Claude-like green accent
+  error: 'rgb(210,60,76)', // muted Claude-like red accent
+  warning: 'rgb(204,157,44)', // muted amber
+  suggestion: 'rgb(47,127,255)', // dense Claude-like path/link blue
+  panelTitle: 'rgb(215,119,87)', // panel/picker titles stay orange
+  permission: 'rgb(239,68,88)', // permission red
+  code: 'rgb(47,127,255)', // inline code/link accent
+  codeBlock: 'rgb(136,190,142)', // code block body
+  userMessageBackground: 'rgb(108,108,108)', // Claude Code prompt band
+  userMessageBackgroundHover: 'rgb(120,120,120)', // hover variant
+  fastMode: 'rgb(255,120,20)',
+};
+
+/* --- Glyphs (refs/claude-code/src/constants/figures.ts) ------------------- */
+import {
+  BLACK_CIRCLE,
+  POINTER,
+  EFFORT_LOW,
+  EFFORT_MEDIUM,
+  EFFORT_HIGH,
+  EFFORT_MAX,
+  RESULT_GUTTER_GLYPH,
+} from './figures.mjs';
+
+/** Turn marker — CC BLACK_CIRCLE (`⏺` on macOS; `●` elsewhere). */
+export const TURN_MARKER = BLACK_CIRCLE;
+/** Result-tree gutter — CC MessageResponse style `⎿`, ASCII only when requested. */
+export const RESULT_GUTTER = `  ${RESULT_GUTTER_GLYPH}  `;
+/** Continuation indent aligning under the result content. */
+export const RESULT_INDENT = '     ';
+/** Prompt prefix glyph before the input — CC figures.pointer `❯`. */
+export const PROMPT_GLYPH = POINTER;
+
+/** Effort-level glyphs (figures.ts EFFORT_*). */
+export const EFFORT_GLYPH = { low: EFFORT_LOW, medium: EFFORT_MEDIUM, high: EFFORT_HIGH, max: EFFORT_MAX };

package/src/tui/time-format.mjs

@@ -0,0 +1,53 @@
+/**
+ * TUI duration formatting, matching Claude Code's formatDuration shape.
+ *
+ * Examples:
+ *   42s
+ *   9m 23s
+ *   1h 2m 3s
+ *   1d 3h 20m
+ */
+export function formatDuration(ms, options = {}) {
+  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`;
+  }
+
+  let days = Math.floor(value / 86_400_000);
+  let hours = Math.floor((value % 86_400_000) / 3_600_000);
+  let minutes = Math.floor((value % 3_600_000) / 60_000);
+  const seconds = Math.floor((value % 60_000) / 1000);
+
+  if (options.mostSignificantOnly) {
+    if (days > 0) return `${days}d`;
+    if (hours > 0) return `${hours}h`;
+    if (minutes > 0) return `${minutes}m`;
+    return `${seconds}s`;
+  }
+
+  const hide = options.hideTrailingZeros;
+  if (days > 0) {
+    if (hide && hours === 0 && minutes === 0) return `${days}d`;
+    if (hide && minutes === 0) return `${days}d ${hours}h`;
+    return `${days}d ${hours}h ${minutes}m`;
+  }
+  if (hours > 0) {
+    if (hide && minutes === 0 && seconds === 0) return `${hours}h`;
+    if (hide && seconds === 0) return `${hours}h ${minutes}m`;
+    return `${hours}h ${minutes}m ${seconds}s`;
+  }
+  if (minutes > 0) {
+    if (hide && seconds === 0) return `${minutes}m`;
+    return `${minutes}m ${seconds}s`;
+  }
+  return `${seconds}s`;
+}
+
+export function formatElapsed(ms) {
+  const n = Math.max(0, Number(ms || 0));
+  if (!Number.isFinite(n) || n <= 0) return '';
+  if (n < 1000) return '';
+  return formatDuration(n);
+}

package/src/ui/ansi.mjs

@@ -0,0 +1,115 @@
+/**
+ * src/ui/ansi.mjs — tiny ANSI color/style helpers (zero deps).
+ *
+ * Philosophy: minimal. We write raw SGR escape sequences directly rather
+ * than pull in chalk/kleur. Every helper is a `(text) => string` that wraps the
+ * text in an escape pair and resets afterwards.
+ *
+ * Color is suppressed (helpers return the text unchanged) when EITHER:
+ *   - the NO_COLOR env var is set (any value) — https://no-color.org, or
+ *   - stdout is not a TTY (piped/redirected/CI) — `process.stdout.isTTY` falsy.
+ *
+ * The decision is computed once at import time but can be recomputed via
+ * `refreshColorSupport()` (used by tests / when output is rebound).
+ */
+import { stdout, env } from 'node:process';
+
+let COLOR_ENABLED = computeColorEnabled();
+
+function computeColorEnabled() {
+  if (env.NO_COLOR !== undefined && env.NO_COLOR !== '') return false;
+  // FORCE_COLOR overrides the TTY check (common in CI snapshots).
+  if (env.FORCE_COLOR !== undefined && env.FORCE_COLOR !== '0' && env.FORCE_COLOR !== '') {
+    return true;
+  }
+  return Boolean(stdout && stdout.isTTY);
+}
+
+/** Recompute color support (e.g. after env changes in tests). */
+export function refreshColorSupport() {
+  COLOR_ENABLED = computeColorEnabled();
+  return COLOR_ENABLED;
+}
+
+/** Whether styling is currently active. */
+export function colorEnabled() {
+  return COLOR_ENABLED;
+}
+
+const ESC = '\x1b[';
+const RESET = `${ESC}0m`;
+
+/** Build a `(text) => string` wrapper for the given SGR open code(s). */
+function sgr(open) {
+  const openSeq = `${ESC}${open}m`;
+  return (text) => {
+    if (!COLOR_ENABLED) return String(text ?? '');
+    const s = String(text ?? '');
+    // Re-open after any nested reset so composed styles survive concatenation.
+    return openSeq + s.replace(/\x1b\[0m/g, RESET + openSeq) + RESET;
+  };
+}
+
+// --- Styles -----------------------------------------------------------------
+export const bold = sgr('1');
+export const dim = sgr('38;2;136;136;136');
+export const italic = sgr('3');
+export const underline = sgr('4');
+export const inverse = sgr('7');
+export const strike = sgr('9');
+
+// --- Foreground colors ------------------------------------------------------
+export const black = sgr('30');
+export const red = sgr('38;2;220;70;88');
+export const green = sgr('38;2;0;170;75');
+export const yellow = sgr('38;2;255;193;7');
+export const blue = sgr('38;2;77;159;255');
+export const magenta = sgr('38;2;177;133;219');
+export const cyan = sgr('38;2;136;136;136');
+export const white = sgr('38;2;198;198;198');
+export const gray = sgr('38;2;198;198;198');
+export const grey = gray;
+
+// Bright variants (used sparingly for headings / accents).
+export const brightRed = sgr('38;2;220;70;88');
+export const brightGreen = sgr('38;2;0;185;88');
+export const brightYellow = sgr('38;2;255;210;80');
+export const brightBlue = sgr('38;2;93;173;255');
+export const brightMagenta = sgr('38;2;190;150;230');
+export const brightCyan = sgr('38;2;168;168;168');
+export const brightWhite = sgr('38;2;220;220;220');
+
+// --- Background colors ------------------------------------------------------
+export const bgGray = sgr('100');
+export const bgBlack = sgr('40');
+export const bgBlue = sgr('44');
+
+// --- Truecolor (24-bit) -----------------------------------------------------
+// Claude Code defines its palette as explicit rgb() values (refs/claude-code
+// src/utils/theme.ts darkTheme). 16-color SGR can't reproduce them, so we emit
+// 24-bit SGR. Honors NO_COLOR / TTY exactly like the named helpers above.
+
+/** Foreground truecolor wrapper: `rgb(215,119,87)('x')`. */
+export function rgb(r, g, b) {
+  return sgr(`38;2;${r};${g};${b}`);
+}
+
+/** Background truecolor wrapper: `rgbBg(55,55,55)('x')`. */
+export function rgbBg(r, g, b) {
+  return sgr(`48;2;${r};${g};${b}`);
+}
+
+/** Strip every SGR escape from a string (for width math / non-TTY fallbacks). */
+export function stripAnsi(text) {
+  return String(text ?? '').replace(/\x1b\[[0-9;]*m/g, '');
+}
+
+/** Visible width of a string ignoring ANSI escapes (approx, 1 col/char). */
+export function visibleWidth(text) {
+  return stripAnsi(text).length;
+}
+
+/** Compose multiple style fns left-to-right: compose(bold, red)('x'). */
+export function compose(...fns) {
+  return (text) => fns.reduceRight((acc, fn) => fn(acc), String(text ?? ''));
+}