mixdog 0.7.17 → 0.8.0

package/src/tui/figures.mjs

@@ -0,0 +1,50 @@
+/**
+ * figures.mjs — TUI glyph constants.
+ *
+ * Claude Code uses Unicode markers heavily. Keep those markers intact so UI
+ * styling does not change under environment-dependent ASCII conversion.
+ */
+
+export const BLACK_CIRCLE = process.platform === 'darwin' ? '⏺' : '●';
+export const BULLET_OPERATOR = '·';
+export const TEARDROP_ASTERISK = '✻';
+export const UP_ARROW = '↑';
+export const DOWN_ARROW = '↓';
+export const LIGHTNING_BOLT = '↯';
+export const EFFORT_LOW = '○';
+export const EFFORT_MEDIUM = '◐';
+export const EFFORT_HIGH = '●';
+export const EFFORT_MAX = '◉';
+
+// Media/trigger status indicators
+export const PLAY_ICON = '▶';
+export const PAUSE_ICON = '⏸';
+
+// Tool-result tree gutter.
+export const RESULT_GUTTER_GLYPH = '⎿';
+
+// MCP subscription indicators
+export const REFRESH_ARROW = '↻';
+export const CHANNEL_ARROW = '←';
+export const INJECTED_ARROW = '→';
+export const FORK_GLYPH = '⑂';
+
+// Review status indicators
+export const DIAMOND_OPEN = '◇';
+export const DIAMOND_FILLED = '◆';
+export const REFERENCE_MARK = '※';
+
+// Issue flag indicator
+export const FLAG_ICON = '⚑';
+
+// Blockquote indicator
+export const BLOCKQUOTE_BAR = '▎';
+export const HEAVY_HORIZONTAL = '━';
+
+// The "therefore" sign — Claude Code's collapsed-thinking prefix (∴ Thinking).
+export const THEREFORE = '∴';
+// Turn-complete marker — kept distinct from live-thinking's therefore sign.
+export const TURN_DONE_MARKER = '◈';
+
+// Prompt pointer (CC uses figures.pointer ❯ for the input glyph).
+export const POINTER = '❯';

package/src/tui/hooks/useEngine.mjs

@@ -0,0 +1,16 @@
+/**
+ * src/tui/hooks/useEngine.mjs — subscribe React to the engine store.
+ *
+ * The store (engine.mjs) lives outside React and emits immutable snapshots;
+ * useSyncExternalStore re-renders the tree whenever a snapshot changes. This
+ * keeps the agentLoop fully decoupled from React's lifecycle.
+ */
+import { useSyncExternalStore } from 'react';
+
+/**
+ * @param {object} store engine session from createEngineSession()
+ * @returns the current engine state snapshot
+ */
+export function useEngine(store) {
+  return useSyncExternalStore(store.subscribe, store.getState, store.getState);
+}

package/src/tui/index.jsx

@@ -0,0 +1,254 @@
+/**
+ * src/tui/index.jsx — entry that mounts the React/ink TUI.
+ *
+ * Creates the engine session (runs OUR agentLoop outside React) and ink-renders
+ * <App store={...}/>. Resolves when the app exits (/exit or /quit).
+ */
+import React from 'react';
+import { render } from 'ink';
+import { createWriteStream, mkdirSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { dirname, join } from 'node:path';
+import { performance } from 'node:perf_hooks';
+import { App } from './App.jsx';
+import { createEngineSession } from './engine.mjs';
+import { installProcessSignalCleanup } from '../runtime/shared/process-shutdown.mjs';
+
+const TERMINAL_MODE_RESET = '\x1b[?1006l\x1b[?1005l\x1b[?1015l\x1b[?1003l\x1b[?1002l\x1b[?1000l\x1b[?2004l\x1b[?25h';
+const TERMINAL_MODE_RESET_HIDDEN_CURSOR = TERMINAL_MODE_RESET.replace('\x1b[?25h', '\x1b[?25l');
+const MOUSE_TRACKING_ON = '\x1b[?1000h\x1b[?1002h\x1b[?1006h';
+const BOOT_PROFILE_ENABLED = /^(1|true|yes|on)$/i.test(String(process.env.MIXDOG_BOOT_PROFILE || ''));
+const BOOT_PROFILE_START = globalThis.__mixdogBootProfileStart || (globalThis.__mixdogBootProfileStart = performance.now());
+const EXIT_WAIT_TIMEOUT_MS = positiveIntEnv('MIXDOG_TUI_EXIT_WAIT_MS', 2500);
+const EXIT_HARD_DELAY_MS = positiveIntEnv('MIXDOG_TUI_HARD_EXIT_DELAY_MS', 500);
+const EXIT_HARD_ENABLED = !/^(0|false|no|off)$/i.test(String(process.env.MIXDOG_TUI_HARD_EXIT || '1'));
+const EXIT_DEBUG_ENABLED = /^(1|true|yes|on)$/i.test(String(process.env.MIXDOG_TUI_EXIT_DEBUG || ''));
+
+function positiveIntEnv(name, fallback) {
+  const value = Number(process.env[name]);
+  return Number.isFinite(value) && value > 0 ? Math.floor(value) : fallback;
+}
+
+function bootProfile(event, fields = {}) {
+  if (!BOOT_PROFILE_ENABLED) return;
+  const elapsedMs = performance.now() - BOOT_PROFILE_START;
+  const parts = [`[mixdog-boot] +${elapsedMs.toFixed(1)}ms`, `tui:${event}`];
+  for (const [key, value] of Object.entries(fields || {})) {
+    if (value === undefined || value === null || value === '') continue;
+    parts.push(`${key}=${String(value).replace(/\s+/g, '_')}`);
+  }
+  try { process.stderr.write(`${parts.join(' ')}\n`); } catch {}
+}
+
+function tuiExitDebug(event, fields = {}) {
+  if (!EXIT_DEBUG_ENABLED) return;
+  const parts = [`[mixdog-tui-exit] ${event}`];
+  for (const [key, value] of Object.entries(fields || {})) {
+    if (value === undefined || value === null || value === '') continue;
+    parts.push(`${key}=${String(value).replace(/\s+/g, '_')}`);
+  }
+  try { process.stderr.write(`${parts.join(' ')}\n`); } catch { /* ignore */ }
+}
+
+function describeActiveHandle(handle) {
+  if (!handle) return 'unknown';
+  const parts = [handle.constructor?.name || typeof handle];
+  if (typeof handle.pid === 'number') parts.push(`pid=${handle.pid}`);
+  if (typeof handle.fd === 'number') parts.push(`fd=${handle.fd}`);
+  if (handle.remoteAddress || handle.remotePort) parts.push(`remote=${handle.remoteAddress || '?'}:${handle.remotePort || '?'}`);
+  if (handle.localAddress || handle.localPort) parts.push(`local=${handle.localAddress || '?'}:${handle.localPort || '?'}`);
+  if (handle.killed === true) parts.push('killed=true');
+  return parts.join(':');
+}
+
+function dumpActiveHandles(label) {
+  if (!EXIT_DEBUG_ENABLED) return;
+  try {
+    const handles = typeof process._getActiveHandles === 'function' ? process._getActiveHandles() : [];
+    const requests = typeof process._getActiveRequests === 'function' ? process._getActiveRequests() : [];
+    tuiExitDebug(label, {
+      handles: handles.length,
+      requests: requests.length,
+      detail: handles.map(describeActiveHandle).join(','),
+    });
+  } catch (error) {
+    tuiExitDebug(`${label}:failed`, { error: error?.message || String(error) });
+  }
+}
+
+function waitWithTimeout(promise, ms) {
+  let timer = null;
+  return Promise.race([
+    Promise.resolve(promise).then(() => true),
+    new Promise((resolve) => {
+      timer = setTimeout(() => resolve(false), ms);
+    }),
+  ]).finally(() => {
+    if (timer) clearTimeout(timer);
+  });
+}
+
+function scheduleHardExit(code = 0) {
+  if (!EXIT_HARD_ENABLED) return;
+  const timer = setTimeout(() => {
+    dumpActiveHandles('hard-exit');
+    try { process.stdout.write(TERMINAL_MODE_RESET); } catch { /* ignore */ }
+    process.exit(code);
+  }, EXIT_HARD_DELAY_MS);
+  timer.unref?.();
+}
+
+function resolveTuiStderrLogPath() {
+  return process.env.MIXDOG_TUI_STDERR_LOG
+    || join(process.env.MIXDOG_RUNTIME_ROOT || join(tmpdir(), 'mixdog'), 'mixdog-tui.stderr.log');
+}
+
+function installTuiStderrGuard() {
+  if (process.env.MIXDOG_TUI_ALLOW_STDERR === '1') return () => {};
+  const originalWrite = process.stderr.write.bind(process.stderr);
+  const logPath = resolveTuiStderrLogPath();
+  try { mkdirSync(dirname(logPath), { recursive: true }); } catch { /* ignore */ }
+  let logStream = null;
+  try {
+    logStream = createWriteStream(logPath, { flags: 'a' });
+    logStream.on('error', () => {});
+  } catch {
+    logStream = null;
+  }
+
+  process.stderr.write = ((chunk, encoding, callback) => {
+    const done = typeof encoding === 'function' ? encoding : callback;
+    const enc = typeof encoding === 'string' ? encoding : undefined;
+    try {
+      if (logStream) {
+        logStream.write(Buffer.isBuffer(chunk) ? chunk : String(chunk ?? ''), enc, () => {
+          if (typeof done === 'function') {
+            try { done(); } catch { /* ignore */ }
+          }
+        });
+        return true;
+      }
+    } catch {
+      // Last-resort fallback: if the log file is unavailable, drop diagnostics
+      // while the fullscreen TUI owns the terminal.
+    }
+    if (typeof done === 'function') {
+      try { done(); } catch { /* ignore */ }
+    }
+    return true;
+  });
+
+  return () => {
+    process.stderr.write = originalWrite;
+    try { logStream?.end(); } catch { /* ignore */ }
+  };
+}
+
+export async function runTui({ provider, model, toolMode } = {}) {
+  const startedAt = performance.now();
+  bootProfile('run:start', { provider, model, toolMode });
+  // The React/ink TUI needs a raw-mode-capable TTY (interactive input). In a
+  // pipe/redirect/CI, ink's input hooks throw — bail with a clear hint instead.
+  if (!process.stdin.isTTY) {
+    process.stderr.write(
+      'mixdog: the TUI needs an interactive terminal (TTY).\n' +
+        'Run it directly in a terminal, or use --plain for the readline REPL.\n',
+    );
+    return 1;
+  }
+
+  const restoreStderr = installTuiStderrGuard();
+  let store;
+  try {
+    store = await createEngineSession({ provider, model, toolMode });
+    bootProfile('store:ready', { ms: (performance.now() - startedAt).toFixed(1) });
+  } catch (error) {
+    restoreStderr();
+    process.stderr.write(`mixdog: ${error?.message || error}\n`);
+    return 1;
+  }
+
+  // Enter the alternate screen buffer for a true fullscreen UI: the input bar
+  // pins to the physical bottom (App uses height={rows}) and, on exit, the
+  // shell's original screen is restored untouched. \x1b[?1049h enters alt
+  // screen; then clear it and home the cursor so we start from a clean top.
+  process.stdout.write(`${TERMINAL_MODE_RESET_HIDDEN_CURSOR}\x1b[?1049h${TERMINAL_MODE_RESET_HIDDEN_CURSOR}\x1b[2J\x1b[H`);
+
+  // Use a blinking BAR cursor (DECSCUSR 5) — a thin caret behind the text, not a
+  // fat block. PromptInput parks this hardware cursor at the insertion point via
+  // useCursor; the terminal also anchors IME composition to it.
+  process.stdout.write('\x1b[5 q'); // blinking bar
+
+  // Keep mouse handling app-owned by default: native terminal selections are
+  // cleared by the fullscreen redraws that happen while a turn streams. Users
+  // who prefer their terminal's native mouse behavior can opt out with
+  // MIXDOG_TUI_MOUSE=0.
+  const mouseTracking = !/^(0|false|no|off)$/i.test(String(process.env.MIXDOG_TUI_MOUSE || '1'));
+  if (mouseTracking) {
+    process.stdout.write(MOUSE_TRACKING_ON);
+  }
+  const restorePrimedInput = () => {}; // stdin raw mode is owned by Ink's useInput effects
+
+  let restored = false;
+  const restoreTerminal = () => {
+    if (restored) return;
+    restored = true;
+    restorePrimedInput();
+    try { process.stdout.write(`${TERMINAL_MODE_RESET}\x1b[0 q\x1b[?1049l${TERMINAL_MODE_RESET}`); } catch { /* ignore */ }
+  };
+  process.on('exit', restoreTerminal);
+  let storeDisposed = false;
+  const disposeStoreOnce = async (reason = 'cli-react-exit') => {
+    if (storeDisposed) return;
+    storeDisposed = true;
+    await waitWithTimeout(store.dispose?.(reason), EXIT_WAIT_TIMEOUT_MS);
+  };
+  const signalCleanup = installProcessSignalCleanup({
+    name: 'mixdog-tui',
+    signals: ['SIGINT', 'SIGTERM', 'SIGHUP'],
+    timeoutMs: EXIT_WAIT_TIMEOUT_MS + 1000,
+    beforeCleanup: restoreTerminal,
+    cleanup: disposeStoreOnce,
+    afterCleanup: (reason) => {
+      restoreTerminal();
+      dumpActiveHandles(`after-${reason}`);
+      restoreStderr();
+    },
+  });
+
+  // exitOnCtrlC:false — App handles Ctrl+C as an interrupt/line-clear so Ink
+  // does not exit abruptly. Explicit exits go through /exit or /quit so teardown
+  // still restores the cursor, mouse mode, and alternate screen cleanly.
+  try {
+    const instance = render(<App store={store} />, { exitOnCtrlC: false, maxFps: 120 });
+    bootProfile('render:mounted', { ms: (performance.now() - startedAt).toFixed(1) });
+    const { waitUntilExit } = instance;
+    // [mixdog fork] Hand the ink renderer's drag-selection setter to the store so
+    // App's mouse handler can push selection rectangles (absolute terminal cells)
+    // that ink paints as an inverse highlight. render() returns synchronously
+    // after the first mount, while the mouse handler only fires on user drag, so
+    // wiring it here (post-render) is in time.
+    if (mouseTracking && typeof instance.setSelection === 'function') {
+      store.setRenderSelection = instance.setSelection;
+    }
+    if (mouseTracking && typeof instance.getSelectionText === 'function') {
+      store.getRenderSelectionText = instance.getSelectionText;
+    }
+    if (mouseTracking && typeof instance.getWordRectAt === 'function') {
+      store.getWordRectAt = instance.getWordRectAt;
+    }
+    await waitUntilExit();
+  } finally {
+    signalCleanup.uninstall();
+    try {
+      await disposeStoreOnce('cli-react-exit');
+    } catch (error) {
+      tuiExitDebug('store:dispose:failed', { error: error?.message || String(error) });
+    }
+    restoreTerminal();
+    dumpActiveHandles('after-restore');
+    restoreStderr();
+  }
+  scheduleHardExit(0);
+  return 0;
+}

package/src/tui/input-editing.mjs

@@ -0,0 +1,242 @@
+import stringWidth from 'string-width';
+
+const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
+
+function graphemeUnits(text) {
+  return Array.from(graphemeSegmenter.segment(String(text || '')), ({ index, segment }) => ({
+    start: index,
+    end: index + segment.length,
+    segment,
+  }));
+}
+
+function wordLike(segment) {
+  return /[\p{L}\p{N}\p{M}\p{Pc}]/u.test(segment);
+}
+
+function safeWidth(width) {
+  return Math.max(1, Math.floor(Number(width) || 80));
+}
+
+function clampOffset(text, offset) {
+  const value = String(text || '');
+  const n = Number(offset);
+  if (!Number.isFinite(n)) return 0;
+  return Math.max(0, Math.min(value.length, Math.floor(n)));
+}
+
+export function selectionRange(draft) {
+  const value = String(draft?.value || '');
+  if (!Number.isFinite(draft?.selectionAnchor)) return null;
+  const anchor = clampOffset(value, draft.selectionAnchor);
+  const cursor = clampOffset(value, draft.cursor);
+  if (anchor === cursor) return null;
+  return {
+    start: Math.min(anchor, cursor),
+    end: Math.max(anchor, cursor),
+  };
+}
+
+export function clearSelection(draft) {
+  return draft?.selectionAnchor == null ? draft : { ...draft, selectionAnchor: null };
+}
+
+export function moveCursor(draft, cursor, { extend = false } = {}) {
+  const value = String(draft?.value || '');
+  const nextCursor = clampOffset(value, cursor);
+  if (extend) {
+    const anchor = Number.isFinite(draft?.selectionAnchor)
+      ? clampOffset(value, draft.selectionAnchor)
+      : clampOffset(value, draft?.cursor);
+    return { ...draft, value, cursor: nextCursor, selectionAnchor: anchor };
+  }
+  return { ...draft, value, cursor: nextCursor, selectionAnchor: null };
+}
+
+export function replaceSelection(draft, input = '') {
+  const value = String(draft?.value || '');
+  const insert = String(input ?? '');
+  const range = selectionRange(draft);
+  const start = range?.start ?? clampOffset(value, draft?.cursor);
+  const end = range?.end ?? start;
+  return {
+    ...draft,
+    value: value.slice(0, start) + insert + value.slice(end),
+    cursor: start + insert.length,
+    selectionAnchor: null,
+  };
+}
+
+export function deleteSelectedText(draft) {
+  return selectionRange(draft) ? replaceSelection(draft, '') : clearSelection(draft);
+}
+
+export function previousOffset(text, offset) {
+  if (offset <= 0) return 0;
+  let previous = 0;
+  for (const { index, segment } of graphemeSegmenter.segment(String(text || ''))) {
+    const end = index + segment.length;
+    if (end >= offset) return index;
+    previous = end;
+  }
+  return previous;
+}
+
+export function nextOffset(text, offset) {
+  const value = String(text || '');
+  if (offset >= value.length) return value.length;
+  for (const { index, segment } of graphemeSegmenter.segment(value)) {
+    const end = index + segment.length;
+    if (index >= offset) return end;
+    if (end > offset) return end;
+  }
+  return value.length;
+}
+
+export function previousWordOffset(text, offset) {
+  const units = graphemeUnits(text);
+  let index = 0;
+  while (index < units.length && units[index].end <= offset) index += 1;
+  while (index > 0 && !wordLike(units[index - 1].segment)) index -= 1;
+  while (index > 0 && wordLike(units[index - 1].segment)) index -= 1;
+  return index <= 0 ? 0 : units[index].start;
+}
+
+export function nextWordOffset(text, offset) {
+  const value = String(text || '');
+  const units = graphemeUnits(value);
+  let index = 0;
+  while (index < units.length && units[index].end <= offset) index += 1;
+  while (index < units.length && !wordLike(units[index].segment)) index += 1;
+  while (index < units.length && wordLike(units[index].segment)) index += 1;
+  return index <= 0 ? 0 : (units[index - 1]?.end ?? value.length);
+}
+
+export function lineStart(text, offset) {
+  return String(text || '').lastIndexOf('\n', Math.max(0, offset - 1)) + 1;
+}
+
+export function lineEnd(text, offset) {
+  const value = String(text || '');
+  const end = value.indexOf('\n', offset);
+  return end === -1 ? value.length : end;
+}
+
+export function caretPosition(text, offset, width) {
+  const value = String(text || '');
+  const before = value.slice(0, offset);
+  const w = safeWidth(width);
+  let row = 0;
+  let col = 0;
+
+  for (const { segment } of graphemeSegmenter.segment(before)) {
+    if (segment === '\n') {
+      row += 1;
+      col = 0;
+      continue;
+    }
+
+    const segmentWidth = stringWidth(segment);
+    if (segmentWidth === 0) continue;
+
+    if (col > 0 && col + segmentWidth > w) {
+      row += 1;
+      col = 0;
+    }
+
+    col += segmentWidth;
+    if (col >= w) {
+      row += Math.floor(col / w);
+      col %= w;
+    }
+  }
+
+  return { row, col };
+}
+
+function boundaryPositions(text, width) {
+  const value = String(text || '');
+  const offsets = [0];
+  for (const unit of graphemeUnits(value)) offsets.push(unit.end);
+
+  const seen = new Set();
+  return offsets
+    .filter((offset) => {
+      if (seen.has(offset)) return false;
+      seen.add(offset);
+      return true;
+    })
+    .map((offset) => ({ offset, ...caretPosition(value, offset, width) }));
+}
+
+export function verticalOffset(text, offset, width, direction, preferredColumn = null) {
+  const w = safeWidth(width);
+  const current = caretPosition(text, offset, w);
+  const targetColumn = Number.isFinite(preferredColumn) ? preferredColumn : current.col;
+  const targetRow = current.row + direction;
+  if (targetRow < 0) return { cursor: offset, preferredColumn: targetColumn };
+
+  const candidates = boundaryPositions(text, w).filter((position) => position.row === targetRow);
+  if (candidates.length === 0) return { cursor: offset, preferredColumn: targetColumn };
+
+  let best = candidates[0];
+  for (const candidate of candidates) {
+    const bestDistance = Math.abs(best.col - targetColumn);
+    const candidateDistance = Math.abs(candidate.col - targetColumn);
+    if (
+      candidateDistance < bestDistance ||
+      (candidateDistance === bestDistance && candidate.col <= targetColumn && candidate.col > best.col)
+    ) {
+      best = candidate;
+    }
+  }
+
+  return { cursor: best.offset, preferredColumn: targetColumn };
+}
+
+export function deleteBackwardWord(draft) {
+  if (selectionRange(draft)) return replaceSelection(draft, '');
+  if (draft.cursor <= 0) return draft;
+  const start = previousWordOffset(draft.value, draft.cursor);
+  return {
+    value: draft.value.slice(0, start) + draft.value.slice(draft.cursor),
+    cursor: start,
+    selectionAnchor: null,
+  };
+}
+
+export function deleteForwardWord(draft) {
+  if (selectionRange(draft)) return replaceSelection(draft, '');
+  if (draft.cursor >= draft.value.length) return draft;
+  const end = nextWordOffset(draft.value, draft.cursor);
+  return {
+    value: draft.value.slice(0, draft.cursor) + draft.value.slice(end),
+    cursor: draft.cursor,
+    selectionAnchor: null,
+  };
+}
+
+export function deleteToLineStart(draft) {
+  if (selectionRange(draft)) return replaceSelection(draft, '');
+  const start = lineStart(draft.value, draft.cursor);
+  if (start === draft.cursor) return draft;
+  return {
+    value: draft.value.slice(0, start) + draft.value.slice(draft.cursor),
+    cursor: start,
+    selectionAnchor: null,
+  };
+}
+
+export function deleteToLineEnd(draft) {
+  if (selectionRange(draft)) return replaceSelection(draft, '');
+  const end = lineEnd(draft.value, draft.cursor);
+  const deleteEnd = end > draft.cursor
+    ? end
+    : (draft.value[draft.cursor] === '\n' ? draft.cursor + 1 : draft.cursor);
+  if (deleteEnd === draft.cursor) return draft;
+  return {
+    value: draft.value.slice(0, draft.cursor) + draft.value.slice(deleteEnd),
+    cursor: draft.cursor,
+    selectionAnchor: null,
+  };
+}