mixdog 0.7.6 → 0.7.7

package/setup/setup.html

@@ -2607,8 +2607,8 @@ const AG_API_PROVIDERS = [
   {id:'nvidia',name:'NVIDIA',env:'NVIDIA_API_KEY',url:'https://build.nvidia.com'},
 ];
 const AG_OAUTH_PROVIDERS = [
-  {id:'openai-oauth',name:'Codex',desc:'~/.codex/auth.json'},
-  {id:'anthropic-oauth',name:'Claude Code',desc:'~/.claude/.credentials.json'},
+  {id:'openai-oauth',name:'Codex',desc:'~/.codex/auth.json',login:true},
+  {id:'anthropic-oauth',name:'Claude Code',desc:'~/.claude/.credentials.json',login:true},
   {id:'grok-oauth',name:'Grok',desc:'~/.grok/auth.json — or browser OAuth (consent: "Grok Build")',login:true},
 ];
 const AG_LOCAL_PROVIDERS = [
@@ -2673,8 +2673,9 @@ function agRenderAll() {
   for (const p of AG_OAUTH_PROVIDERS) {
     const detected = agOAuthDetected(p.id);
     const tag = detected ? '<span class="r-tag ok">Set</span>' : '<span class="r-tag no">Not Set</span>';
-    // Login / Re-login button removed per request — OAuth state is shown via the Set / Not Set tag only.
-    const btn = '';
+    const btn = p.login
+      ? `<button class="save" style="width:auto;height:28px;padding:0 12px;font-size:11px;flex-shrink:0;margin-left:8px" type="button" onclick="oauthProviderLogin('${escapeAttr(p.id)}', this)">${detected ? 'Re-login' : 'Sign in'}</button>`
+      : '';
     oauthSec.innerHTML += `<div class="r"><span class="r-name">${p.name}</span><span style="flex:1;font-size:12px;color:var(--text-4)">${p.desc}</span>${tag}${btn}</div>`;
   }
   const localSec = document.getElementById('ag-local-sec');
@@ -2733,18 +2734,31 @@ function agOAuthDetected(providerId, auth = agAuth) {
   return false;
 }
 
-// Grok CLI OAuth login. An existing `grok` CLI login (~/.grok/auth.json) shows
-// as "Set" automatically; this button signs in from the browser when no CLI
-// login exists. The request blocks until consent completes, then we re-fetch
-// auth so the row flips to "Set".
-async function grokOAuthLogin(btn) {
+const OAUTH_LOGIN_ROUTES = {
+  'openai-oauth': '/agent/openai-oauth/login',
+  'anthropic-oauth': '/agent/anthropic-oauth/login',
+  'grok-oauth': '/agent/grok-oauth/login',
+};
+const OAUTH_LOGIN_LABELS = {
+  'openai-oauth': 'Codex',
+  'anthropic-oauth': 'Claude',
+  'grok-oauth': 'Grok',
+};
+
+// Browser OAuth login for providers with login:true. CLI cred files (~/.codex,
+// ~/.claude, ~/.grok) show as "Set" automatically; Sign in runs when none exist.
+// Blocks until consent completes, then re-fetches auth so the row flips to Set.
+async function oauthProviderLogin(providerId, btn) {
+  const route = OAUTH_LOGIN_ROUTES[providerId];
+  if (!route) return;
+  const label = OAUTH_LOGIN_LABELS[providerId] || providerId;
   if (btn) { btn.disabled = true; btn.textContent = 'Waiting for browser…'; }
   try {
-    const r = await fetch('/agent/grok-oauth/login', { method: 'POST' }).then(r => r.json());
+    const r = await fetch(route, { method: 'POST' }).then(r => r.json());
     if (r && r.ok) { await loadAgentData(); }
-    else { alert('Grok login failed: ' + ((r && r.error) || 'unknown error')); if (btn) btn.disabled = false; }
+    else { alert(label + ' login failed: ' + ((r && r.error) || 'unknown error')); if (btn) btn.disabled = false; }
   } catch (e) {
-    alert('Grok login failed: ' + (e?.message || e));
+    alert(label + ' login failed: ' + (e?.message || e));
     if (btn) btn.disabled = false;
   }
 }

package/setup/tui.mjs

@@ -0,0 +1,606 @@
+/**
+ * Zero-dependency clack-style terminal UI helpers for the mixdog setup wizard.
+ * Node built-ins only; assumes an interactive TTY (wizard guarantees this).
+ */
+import { emitKeypressEvents } from 'node:readline';
+import { fileURLToPath } from 'node:url';
+
+const stdin = process.stdin;
+const stdout = process.stdout;
+
+const ansi = {
+  reset: '\x1b[0m',
+  hideCursor: '\x1b[?25l',
+  showCursor: '\x1b[?25h',
+  cyan: '\x1b[36m',
+  green: '\x1b[32m',
+  red: '\x1b[31m',
+  dim: '\x1b[2m',
+  inverse: '\x1b[7m',
+};
+
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+const STRIP_ANSI_RE = /\x1b\[[0-9;]*m/g;
+const GRAPHEME_SEGMENTER = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
+
+function assertInteractiveTTY() {
+  if (!stdin.isTTY) {
+    throw new Error('setup/tui.mjs: stdin must be a TTY');
+  }
+}
+
+function rail(active = true) {
+  return active ? `${ansi.dim}│${ansi.reset}` : `${ansi.dim}◇${ansi.reset}`;
+}
+
+function prefixGlyph(done) {
+  return done
+    ? `${ansi.green}✔${ansi.reset}`
+    : `${ansi.cyan}◆${ansi.reset}`;
+}
+
+function codePointsOf(segment) {
+  const cps = [];
+  for (const ch of segment) {
+    cps.push(ch.codePointAt(0));
+  }
+  return cps;
+}
+
+function isCombiningOrZeroWidth(cp) {
+  if (cp >= 0x0300 && cp <= 0x036f) return true;
+  if (cp >= 0x0483 && cp <= 0x0489) return true;
+  if (cp >= 0x0591 && cp <= 0x05bd) return true;
+  if (cp >= 0x064b && cp <= 0x065f) return true;
+  if (cp === 0x0670) return true;
+  if (cp >= 0x06d6 && cp <= 0x06dc) return true;
+  if (cp >= 0x1ab0 && cp <= 0x1aff) return true;
+  if (cp >= 0x1dc0 && cp <= 0x1dff) return true;
+  if (cp >= 0x20d0 && cp <= 0x20ff) return true;
+  if (cp >= 0xfe20 && cp <= 0xfe2f) return true;
+  if (cp === 0x200b || cp === 0x200d) return true;
+  if (cp >= 0xfe00 && cp <= 0xfe0f) return true;
+  return false;
+}
+
+function isWideBaseChar(cp) {
+  if (cp >= 0x1100 && cp <= 0x115f) return true;
+  if (cp >= 0x2e80 && cp <= 0x303e) return true;
+  if (cp >= 0x3041 && cp <= 0x33ff) return true;
+  if (cp >= 0x3400 && cp <= 0x4dbf) return true;
+  if (cp >= 0x4e00 && cp <= 0x9fff) return true;
+  if (cp >= 0xa000 && cp <= 0xa4cf) return true;
+  if (cp >= 0xac00 && cp <= 0xd7a3) return true;
+  if (cp >= 0xf900 && cp <= 0xfaff) return true;
+  if (cp >= 0xfe30 && cp <= 0xfe4f) return true;
+  if (cp >= 0xff00 && cp <= 0xff60) return true;
+  if (cp >= 0xffe0 && cp <= 0xffe6) return true;
+  if (cp >= 0x1f300) return true;
+  if (cp >= 0x20000 && cp <= 0x3fffd) return true;
+  return false;
+}
+
+function graphemeClusterWidth(segment) {
+  const cps = codePointsOf(segment);
+  if (cps.length === 0) return 0;
+  if (cps.every(isCombiningOrZeroWidth)) return 0;
+
+  const hasFe0f = cps.some((cp) => cp >= 0xfe00 && cp <= 0xfe0f);
+  const hasZwj = cps.includes(0x200d);
+  const hasRegional = cps.some((cp) => cp >= 0x1f1e6 && cp <= 0x1f1ff);
+  const hasModifier = cps.some((cp) => cp >= 0x1f3fb && cp <= 0x1f3ff);
+  const hasWideBase = cps.some((cp) => isWideBaseChar(cp));
+
+  if (hasFe0f || hasZwj || hasRegional || hasModifier || hasWideBase) return 2;
+  return 1;
+}
+
+function cellWidth(str) {
+  const plain = str.replace(STRIP_ANSI_RE, '');
+  let width = 0;
+  for (const { segment } of GRAPHEME_SEGMENTER.segment(plain)) {
+    width += graphemeClusterWidth(segment);
+  }
+  return width;
+}
+
+function lineCount(text) {
+  if (!text) return 0;
+  const cols = stdout.columns || 80;
+  const logical = text.split('\n');
+  let total = 0;
+  for (const line of logical) {
+    const visible = cellWidth(line);
+    total += Math.max(1, Math.ceil(visible / cols));
+  }
+  return total;
+}
+
+function writeBlock(text) {
+  stdout.write(text.endsWith('\n') ? text : `${text}\n`);
+}
+
+function redrawUp(lines) {
+  if (lines > 0) {
+    stdout.write(`\x1b[${lines}A\x1b[0J`);
+  }
+}
+
+function finishPrompt(lines, finalLine) {
+  redrawUp(lines);
+  stdout.write(`${ansi.green}✔${ansi.reset} ${finalLine}\n`);
+}
+
+/**
+ * @param {(ctx: {
+ *   rerender: (draw: () => string) => void,
+ *   onKey: (fn: (str: string, key: import('node:readline').Key) => boolean | void) => void,
+ * }) => Promise<unknown>} run
+ */
+async function withRawPrompt(run) {
+  assertInteractiveTTY();
+  const wasRaw = stdin.isRaw;
+  const wasPaused = stdin.isPaused();
+  let paintedLines = 0;
+  let keyHandler = null;
+  let settled = false;
+  let activePromptReject = null;
+
+  const promptReject = (rejectFn) => {
+    activePromptReject = rejectFn;
+  };
+
+  const rerender = (draw) => {
+    redrawUp(paintedLines);
+    const block = draw();
+    writeBlock(block);
+    paintedLines = lineCount(block);
+  };
+
+  const onKey = (fn) => {
+    keyHandler = fn;
+  };
+
+  const cleanup = () => {
+    if (settled) return;
+    settled = true;
+    stdin.removeListener('keypress', onKeypress);
+    try {
+      stdin.setRawMode(!!wasRaw);
+    } catch {
+      stdin.setRawMode(false);
+    }
+    if (wasPaused) {
+      stdin.pause();
+    }
+    stdout.write(ansi.showCursor);
+  };
+
+  const onKeypress = (str, key) => {
+    if (!key) return;
+    if (key.ctrl && key.name === 'c') {
+      cleanup();
+      redrawUp(paintedLines);
+      stdout.write('\n');
+      process.exit(130);
+    }
+    if (keyHandler) {
+      try {
+        keyHandler(str, key || {});
+      } catch (err) {
+        cleanup();
+        if (activePromptReject) {
+          const rej = activePromptReject;
+          activePromptReject = null;
+          rej(err);
+        }
+      }
+    }
+  };
+
+  try {
+    emitKeypressEvents(stdin);
+    stdin.setRawMode(true);
+    stdin.resume();
+    stdout.write(ansi.hideCursor);
+    stdin.on('keypress', onKeypress);
+    return await run({ rerender, onKey, promptReject });
+  } finally {
+    cleanup();
+  }
+}
+
+/**
+ * @param {string} message
+ * @param {{ value: string, label: string, hint?: string }[]} options
+ * @param {{ initial?: string }} [opts]
+ */
+export async function select(message, options, { initial } = {}) {
+  if (!options?.length) {
+    throw new Error('select: options must be a non-empty array');
+  }
+  let index = 0;
+  if (initial !== undefined) {
+    const i = options.findIndex((o) => o.value === initial);
+    if (i >= 0) index = i;
+  }
+
+  return withRawPrompt(async ({ rerender, onKey, promptReject }) => {
+    const draw = () => {
+      const rows = [
+        `${prefixGlyph(false)} ${message}`,
+        rail(),
+      ];
+      for (let i = 0; i < options.length; i += 1) {
+        const opt = options[i];
+        const active = i === index;
+        const cursor = active ? `${ansi.cyan}❯ ${ansi.reset}` : '  ';
+        const label = active
+          ? `${ansi.cyan}${ansi.inverse} ${opt.label} ${ansi.reset}`
+          : opt.label;
+        const hint = opt.hint ? ` ${ansi.dim}${opt.hint}${ansi.reset}` : '';
+        rows.push(`${rail()} ${cursor}${label}${hint}`);
+      }
+      return rows.join('\n');
+    };
+
+    rerender(draw);
+
+    return new Promise((resolve, reject) => {
+      promptReject(reject);
+      onKey((_str, key) => {
+        const name = key.name;
+        if (name === 'up' || name === 'k') {
+          index = (index - 1 + options.length) % options.length;
+          rerender(draw);
+          return;
+        }
+        if (name === 'down' || name === 'j') {
+          index = (index + 1) % options.length;
+          rerender(draw);
+          return;
+        }
+        if (name === 'return') {
+          const chosen = options[index];
+          finishPrompt(
+            lineCount(draw()),
+            `${message} ${ansi.dim}·${ansi.reset} ${ansi.cyan}${chosen.label}${ansi.reset}`,
+          );
+          resolve(chosen.value);
+        }
+      });
+    });
+  });
+}
+
+/**
+ * @param {string} message
+ * @param {{ value: string, label: string, hint?: string }[]} options
+ * @param {{ initial?: string[], min?: number }} [opts]
+ */
+export async function multiselect(message, options, { initial = [], min = 0 } = {}) {
+  if (!options?.length) {
+    throw new Error('multiselect: options must be a non-empty array');
+  }
+  const selected = new Set(
+    Array.isArray(initial) ? initial.filter((v) => options.some((o) => o.value === v)) : [],
+  );
+  let index = 0;
+  let error = '';
+
+  return withRawPrompt(async ({ rerender, onKey, promptReject }) => {
+    const draw = () => {
+      const rows = [
+        `${prefixGlyph(false)} ${message}`,
+        rail(),
+      ];
+      for (let i = 0; i < options.length; i += 1) {
+        const opt = options[i];
+        const active = i === index;
+        const checked = selected.has(opt.value);
+        const box = checked ? '◉' : '◯';
+        const cursor = active ? `${ansi.cyan}❯ ${ansi.reset}` : '  ';
+        const label = active
+          ? `${ansi.cyan}${ansi.inverse} ${opt.label} ${ansi.reset}`
+          : opt.label;
+        const hint = opt.hint ? ` ${ansi.dim}${opt.hint}${ansi.reset}` : '';
+        rows.push(`${rail()} ${cursor}${box} ${label}${hint}`);
+      }
+      if (error) {
+        rows.push(`${rail()} ${ansi.red}${error}${ansi.reset}`);
+      }
+      return rows.join('\n');
+    };
+
+    rerender(draw);
+
+    return new Promise((resolve, reject) => {
+      promptReject(reject);
+      onKey((_str, key) => {
+        const name = key.name;
+        if (name === 'up' || name === 'k') {
+          index = (index - 1 + options.length) % options.length;
+          error = '';
+          rerender(draw);
+          return;
+        }
+        if (name === 'down' || name === 'j') {
+          index = (index + 1) % options.length;
+          error = '';
+          rerender(draw);
+          return;
+        }
+        if (name === 'space') {
+          const val = options[index].value;
+          if (selected.has(val)) selected.delete(val);
+          else selected.add(val);
+          error = '';
+          rerender(draw);
+          return;
+        }
+        if (name === 'return') {
+          if (selected.size < min) {
+            error = `Select at least ${min} option${min === 1 ? '' : 's'} (${selected.size}/${min})`;
+            rerender(draw);
+            return;
+          }
+          const values = options
+            .filter((o) => selected.has(o.value))
+            .map((o) => o.value);
+          const labels = options
+            .filter((o) => selected.has(o.value))
+            .map((o) => o.label)
+            .join(', ');
+          finishPrompt(
+            lineCount(draw()),
+            `${message} ${ansi.dim}·${ansi.reset} ${ansi.cyan}${labels || '(none)'}${ansi.reset}`,
+          );
+          resolve(values);
+        }
+      });
+    });
+  });
+}
+
+/**
+ * @param {string} message
+ * @param {{ initial?: boolean }} [opts]
+ */
+export async function confirm(message, { initial = false } = {}) {
+  let value = !!initial;
+
+  return withRawPrompt(async ({ rerender, onKey, promptReject }) => {
+    const draw = () => {
+      const yes = value
+        ? `${ansi.cyan}${ansi.inverse} Yes ${ansi.reset}`
+        : `${ansi.dim}Yes${ansi.reset}`;
+      const no = !value
+        ? `${ansi.cyan}${ansi.inverse} No ${ansi.reset}`
+        : `${ansi.dim}No${ansi.reset}`;
+      return [
+        `${prefixGlyph(false)} ${message}`,
+        rail(),
+        `${rail()} ${yes} / ${no}`,
+        `${rail()} ${ansi.dim}←/→ or y/n, Enter${ansi.reset}`,
+      ].join('\n');
+    };
+
+    rerender(draw);
+
+    return new Promise((resolve, reject) => {
+      promptReject(reject);
+      onKey((str, key) => {
+        const name = key.name;
+        if (name === 'left' || name === 'y') {
+          value = true;
+          rerender(draw);
+          return;
+        }
+        if (name === 'right' || name === 'n') {
+          value = false;
+          rerender(draw);
+          return;
+        }
+        if (name === 'return') {
+          const label = value ? 'Yes' : 'No';
+          finishPrompt(
+            lineCount(draw()),
+            `${message} ${ansi.dim}·${ansi.reset} ${ansi.cyan}${label}${ansi.reset}`,
+          );
+          resolve(value);
+        }
+        if (str === 'y' || str === 'Y') {
+          value = true;
+          rerender(draw);
+        }
+        if (str === 'n' || str === 'N') {
+          value = false;
+          rerender(draw);
+        }
+      });
+    });
+  });
+}
+
+/**
+ * @param {string} message
+ * @param {{ initial?: string, placeholder?: string }} [opts]
+ */
+export async function text(message, { initial = '', placeholder = '' } = {}) {
+  let value = String(initial ?? '');
+
+  return withRawPrompt(async ({ rerender, onKey, promptReject }) => {
+    const draw = () => {
+      const shown = value.length > 0
+        ? value
+        : (placeholder ? `${ansi.dim}${placeholder}${ansi.reset}` : '');
+      return [
+        `${prefixGlyph(false)} ${message}`,
+        rail(),
+        `${rail()} ${shown}${ansi.dim}▌${ansi.reset}`,
+      ].join('\n');
+    };
+
+    rerender(draw);
+
+    return new Promise((resolve, reject) => {
+      promptReject(reject);
+      onKey((str, key) => {
+        const name = key.name;
+        if (name === 'return') {
+          const out = value.length > 0 ? value : String(initial ?? '');
+          finishPrompt(
+            lineCount(draw()),
+            `${message} ${ansi.dim}·${ansi.reset} ${ansi.cyan}${out || '(empty)'}${ansi.reset}`,
+          );
+          resolve(out);
+          return;
+        }
+        if (name === 'backspace') {
+          value = value.slice(0, -1);
+          rerender(draw);
+          return;
+        }
+        if (str && !key.ctrl && !key.meta && str >= ' ') {
+          value += str;
+          rerender(draw);
+        }
+      });
+    });
+  });
+}
+
+/**
+ * @param {string} message
+ */
+export async function password(message) {
+  let value = '';
+
+  return withRawPrompt(async ({ rerender, onKey, promptReject }) => {
+    const draw = () => {
+      const masked = value.length > 0 ? '•'.repeat(value.length) : '';
+      return [
+        `${prefixGlyph(false)} ${message}`,
+        rail(),
+        `${rail()} ${masked}${ansi.dim}▌${ansi.reset}`,
+      ].join('\n');
+    };
+
+    rerender(draw);
+
+    return new Promise((resolve, reject) => {
+      promptReject(reject);
+      onKey((str, key) => {
+        const name = key.name;
+        if (name === 'return') {
+          finishPrompt(
+            lineCount(draw()),
+            `${message} ${ansi.dim}·${ansi.reset} ${ansi.cyan}${'•'.repeat(value.length)}${ansi.reset}`,
+          );
+          resolve(value);
+          return;
+        }
+        if (name === 'backspace') {
+          value = value.slice(0, -1);
+          rerender(draw);
+          return;
+        }
+        if (str && !key.ctrl && !key.meta && str >= ' ') {
+          value += str;
+          rerender(draw);
+        }
+      });
+    });
+  });
+}
+
+/**
+ * @param {string} message
+ * @param {{ total?: number, width?: number }} [opts]
+ */
+export function createProgressBar(message, { total = 100, width = 24 } = {}) {
+  const safeTotal = total > 0 ? total : 100;
+  let lastDone = 0;
+  let closed = false;
+
+  const render = (done, tot) => {
+    const clamped = Math.max(0, Math.min(tot, done));
+    const pct = Math.min(100, Math.floor((clamped / tot) * 100));
+    const filled = Math.min(width, Math.round((clamped / tot) * width));
+    const bar = `${'█'.repeat(filled)}${'░'.repeat(width - filled)}`;
+    stdout.write(`\r${message} [${bar}] ${pct}%`);
+    lastDone = clamped;
+  };
+
+  return {
+    update(done, totalOverride) {
+      if (closed) return;
+      const tot = totalOverride !== undefined && totalOverride > 0 ? totalOverride : safeTotal;
+      render(done, tot);
+    },
+    done(finalMsg) {
+      if (closed) return;
+      closed = true;
+      const tail = finalMsg ? ` ${finalMsg}` : '';
+      stdout.write('\r\x1b[2K');
+      stdout.write(`${ansi.green}✔${ansi.reset} ${message}${tail}\n`);
+    },
+  };
+}
+
+/**
+ * @param {string} message
+ */
+export function createSpinner(message) {
+  let frame = 0;
+  let current = message;
+  let timer = null;
+  let stopped = false;
+
+  const tick = () => {
+    const glyph = SPINNER_FRAMES[frame % SPINNER_FRAMES.length];
+    frame += 1;
+    stdout.write(`\r${ansi.cyan}${glyph}${ansi.reset} ${current}`);
+  };
+
+  timer = setInterval(tick, 80);
+  tick();
+
+  return {
+    update(msg) {
+      if (stopped) return;
+      current = String(msg ?? '');
+      tick();
+    },
+    stop(finalMsg, ok = true) {
+      if (stopped) return;
+      stopped = true;
+      if (timer) clearInterval(timer);
+      stdout.write('\r\x1b[2K');
+      const mark = ok ? `${ansi.green}✔${ansi.reset}` : `${ansi.red}✖${ansi.reset}`;
+      const tail = finalMsg ? ` ${finalMsg}` : '';
+      stdout.write(`${mark} ${current}${tail}\n`);
+    },
+  };
+}
+
+if (process.argv[1] === fileURLToPath(import.meta.url) && process.env.TUI_SMOKE) {
+  const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+  (async () => {
+    const bar = createProgressBar('TUI smoke progress', { total: 100, width: 20 });
+    for (let i = 0; i <= 100; i += 10) {
+      bar.update(i);
+      await sleep(40);
+    }
+    bar.done('complete');
+    const spin = createSpinner('TUI smoke spinner');
+    await sleep(400);
+    spin.update('TUI smoke spinner (tick)');
+    await sleep(400);
+    spin.stop('stopped', true);
+  })().catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+}