gitroots 0.0.0-stage → 0.5.0

package/src/ui/ansi.js

@@ -0,0 +1,138 @@
+// Colors, widths and padding. Palette comes straight from the design tokens:
+//   g  #60DD65  success and the one next action
+//   m  #A5B8B1  muted
+//   s  #C9D6D0  secondary
+//   w  #F5BF57  needs you
+//   r  #FF7474  real block or failure
+//   i  #73C5FF  in progress / info
+//   fg #F1F7F3
+// Colors drop when output is piped or NO_COLOR is set.
+
+const env = process.env;
+
+function detectColor(stream = process.stdout) {
+  if (env.NO_COLOR !== undefined && env.NO_COLOR !== '') return false;
+  if (env.FORCE_COLOR !== undefined) return env.FORCE_COLOR !== '0';
+  if (env.TERM === 'dumb') return false;
+  return Boolean(stream.isTTY);
+}
+
+function detectTruecolor() {
+  const ct = (env.COLORTERM || '').toLowerCase();
+  if (ct === 'truecolor' || ct === '24bit') return true;
+  const tp = env.TERM_PROGRAM || '';
+  if (['iTerm.app', 'WezTerm', 'ghostty', 'vscode', 'Hyper'].includes(tp)) return true;
+  if (env.WT_SESSION) return true;
+  const term = env.TERM || '';
+  return /kitty|ghostty|direct|truecolor/.test(term);
+}
+
+export const state = {
+  color: detectColor(),
+  truecolor: detectTruecolor(),
+};
+
+export function setColor(on) { state.color = on; }
+
+const PALETTE = {
+  g: [0x60, 0xdd, 0x65, 77],
+  m: [0xa5, 0xb8, 0xb1, 109],
+  s: [0xc9, 0xd6, 0xd0, 152],
+  w: [0xf5, 0xbf, 0x57, 221],
+  r: [0xff, 0x74, 0x74, 210],
+  i: [0x73, 0xc5, 0xff, 117],
+  fg: [0xf1, 0xf7, 0xf3, 255],
+  ink: [0x07, 0x14, 0x11, 233],
+};
+
+const BG = {
+  bar: [0x0f, 0x26, 0x20, 234],
+  attach: [0x12, 0x44, 0x35, 23],
+  sel: [0x12, 0x44, 0x35, 23],
+  key: [0x1a, 0x33, 0x2c, 236],
+  red: [0x3a, 0x1c, 0x1c, 52],
+  green: [0x60, 0xdd, 0x65, 77],
+};
+
+function fgCode([r, g, b, n]) { return state.truecolor ? `\x1b[38;2;${r};${g};${b}m` : `\x1b[38;5;${n}m`; }
+function bgCode([r, g, b, n]) { return state.truecolor ? `\x1b[48;2;${r};${g};${b}m` : `\x1b[48;5;${n}m`; }
+
+function paint(code, reset) {
+  return (s) => (state.color ? `${code()}${s}${reset}` : String(s));
+}
+
+export const c = {
+  g: paint(() => fgCode(PALETTE.g), '\x1b[39m'),
+  m: paint(() => fgCode(PALETTE.m), '\x1b[39m'),
+  s: paint(() => fgCode(PALETTE.s), '\x1b[39m'),
+  w: paint(() => fgCode(PALETTE.w), '\x1b[39m'),
+  r: paint(() => fgCode(PALETTE.r), '\x1b[39m'),
+  i: paint(() => fgCode(PALETTE.i), '\x1b[39m'),
+  fg: paint(() => fgCode(PALETTE.fg), '\x1b[39m'),
+  ink: paint(() => fgCode(PALETTE.ink), '\x1b[39m'),
+  b: paint(() => '\x1b[1m', '\x1b[22m'),
+  dim: paint(() => '\x1b[2m', '\x1b[22m'),
+  inv: paint(() => '\x1b[7m', '\x1b[27m'),
+  // Backgrounds nest: an inner reset falls back to this background, not the terminal's.
+  bg: (name) => (s) => {
+    if (!state.color) return String(s);
+    const code = bgCode(BG[name]);
+    return `${code}${String(s).split('\x1b[49m').join(code).split('\x1b[0m').join(`\x1b[0m${code}`)}\x1b[49m`;
+  },
+};
+
+// Header labels: muted caps, like the design's small letter-spaced headings.
+export const h = (s) => c.m(String(s).toUpperCase());
+
+const ANSI_RE = /\x1b\[[0-9;?]*[ -/]*[@-~]|\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)|\x1b_[^\x1b]*\x1b\\/g;
+
+export function strip(s) { return String(s).replace(ANSI_RE, ''); }
+
+// Visible width. All glyphs the CLI prints (box drawing, ●◐○✓✕, braille spinners) are single-width.
+export function width(s) {
+  let n = 0;
+  for (const ch of strip(s)) {
+    const cp = ch.codePointAt(0);
+    if (cp === 0x200d || (cp >= 0xfe00 && cp <= 0xfe0f) || (cp >= 0x300 && cp <= 0x36f)) continue;
+    n += isWide(cp) ? 2 : 1;
+  }
+  return n;
+}
+
+function isWide(cp) {
+  return (cp >= 0x1100 && cp <= 0x115f) || (cp >= 0x2e80 && cp <= 0xa4cf) || (cp >= 0xac00 && cp <= 0xd7a3) ||
+    (cp >= 0xf900 && cp <= 0xfaff) || (cp >= 0xfe30 && cp <= 0xfe4f) || (cp >= 0xff00 && cp <= 0xff60) ||
+    (cp >= 0xffe0 && cp <= 0xffe6) || (cp >= 0x1f300 && cp <= 0x1faff) || (cp >= 0x20000 && cp <= 0x3fffd);
+}
+
+export function pad(s, n) {
+  const w = width(s);
+  return w >= n ? s : s + ' '.repeat(n - w);
+}
+
+export function padStart(s, n) {
+  const w = width(s);
+  return w >= n ? s : ' '.repeat(n - w) + s;
+}
+
+// Cut a (possibly colored) string to n visible columns.
+export function truncate(s, n) {
+  if (width(s) <= n) return s;
+  let out = '';
+  let w = 0;
+  let i = 0;
+  const str = String(s);
+  while (i < str.length) {
+    ANSI_RE.lastIndex = i;
+    const m = ANSI_RE.exec(str);
+    if (m && m.index === i) { out += m[0]; i += m[0].length; continue; }
+    const ch = String.fromCodePoint(str.codePointAt(i));
+    const cw = width(ch);
+    if (w + cw > n - 1) { out += '…'; break; }
+    out += ch; w += cw; i += ch.length;
+  }
+  return state.color ? `${out}\x1b[0m` : out;
+}
+
+// Fit to exactly n columns: truncate or pad.
+export function fit(s, n) { return pad(truncate(s, n), n); }

package/src/ui/components.js

@@ -0,0 +1,85 @@
+import { c, h, pad, width, strip, state as colorState } from './ansi.js';
+import { line } from './term.js';
+
+export const brand = () => c.g(c.b('gitroots'));
+export const dot = () => c.m('·');
+export const sep = (...parts) => parts.filter((p) => p !== undefined && p !== null && p !== '').join(` ${dot()} `);
+
+// Every screen ends with the next command.
+export function next(cmd, alt) {
+  const tail = alt ? `     ${c.m('or')}  ${c.s(alt)}` : '';
+  return `${c.g(`→ ${cmd}`)}${tail}`;
+}
+
+// State words always pair a symbol with a word.
+export const mark = {
+  running: (w = 'running') => c.g(`● ${w}`),
+  waiting: (w = 'waiting') => c.w(`◐ ${w}`),
+  queued: (w = 'queued') => c.m(`○ ${w}`),
+  done: (w = 'done') => c.g(`✓ ${w}`),
+  blocked: (w = 'blocked') => c.r(`✕ ${w}`),
+  idle: (w = 'idle') => c.s(`○ ${w}`),
+  suspended: (w = 'suspended') => c.m(`⏸ ${w}`),
+  offline: (w = 'offline') => c.m(`○ ${w}`),
+};
+
+export function sessionState(s) {
+  switch (s.state) {
+    case 'running': return mark.running();
+    case 'waiting': return mark.waiting('waiting input');
+    case 'idle': return mark.idle();
+    case 'suspended': return mark.suspended();
+    case 'paused': return c.w('⏸ paused');
+    case 'stopped': return c.m('■ stopped');
+    default: return c.m(s.state);
+  }
+}
+
+export function decision(d) {
+  if (d === 'allowed') return c.g('✓ allowed');
+  if (d === 'recorded') return c.g('✓ recorded');
+  if (d === 'blocked') return c.r('✕ blocked');
+  if (d === 'held') return c.w('◐ held');
+  return c.m(d);
+}
+
+/**
+ * Columns: [{ key, label, w, fmt?(row) }]. Last column has no padding.
+ */
+export function table(cols, rows, { indent = '  ' } = {}) {
+  const head = cols.map((col, i) => (i === cols.length - 1 ? col.label : pad(col.label, col.w))).join('');
+  line(indent + h(head));
+  for (const row of rows) {
+    const cells = cols.map((col, i) => {
+      const v = col.fmt ? col.fmt(row) : String(row[col.key] ?? '');
+      return i === cols.length - 1 ? v : pad(v, col.w);
+    });
+    line(indent + cells.join('').replace(/\s+$/, ''));
+  }
+}
+
+// Bordered box (blocked pushes etc). tone: 'r' | 'w' | 'g'
+export function box(lines, tone = 'r') {
+  const col = c[tone];
+  const inner = Math.max(...lines.map((l) => width(l))) + 2;
+  line(col(`╭${'─'.repeat(inner)}╮`));
+  for (const l of lines) line(`${col('│')} ${pad(l, inner - 2)} ${col('│')}`);
+  line(col(`╰${'─'.repeat(inner)}╯`));
+}
+
+export function heading(text) { line(h(text)); }
+
+export function json(data) {
+  process.stdout.write(`${JSON.stringify(data, null, 2)}\n`);
+}
+
+export function csv(rows, keys) {
+  const esc = (v) => {
+    const s = v === undefined || v === null ? '' : String(v);
+    return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+  };
+  process.stdout.write(`${keys.join(',')}\n`);
+  for (const r of rows) process.stdout.write(`${keys.map((k) => esc(r[k])).join(',')}\n`);
+}
+
+export { c, h, pad, width, strip, colorState };

package/src/ui/term.js

@@ -0,0 +1,296 @@
+// Terminal plumbing: motion, spinners, step runners, prompts, raw keys, full-screen apps, inline images.
+import { asset } from '../runtime.js';
+import { c, state as colorState, pad, width } from './ansi.js';
+
+const env = process.env;
+export const out = process.stdout;
+
+export const FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+// Motion is functional and stops with NO_COLOR, piped output or reduced motion.
+export function motion() {
+  if (!out.isTTY) return false;
+  if (!colorState.color) return false;
+  if (env.GITROOTS_REDUCED_MOTION || env.REDUCED_MOTION || env.CI) return false;
+  return true;
+}
+
+export function interactive() { return Boolean(process.stdin.isTTY && out.isTTY); }
+
+export const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+export function write(s) { out.write(s); }
+export function line(s = '') { out.write(`${s}\n`); }
+
+const CLEAR_LINE = '\r\x1b[2K';
+const HIDE = '\x1b[?25l';
+const SHOW = '\x1b[?25h';
+
+let cursorHidden = false;
+function hideCursor() { if (out.isTTY && !cursorHidden) { out.write(HIDE); cursorHidden = true; } }
+function showCursor() { if (cursorHidden) { out.write(SHOW); cursorHidden = false; } }
+process.on('exit', () => { if (cursorHidden) out.write(SHOW); });
+
+// A single line that animates in place, then settles.
+export function spinner(render) {
+  if (!motion()) return { update() {}, stop(final) { if (final !== undefined) line(final); } };
+  let i = 0;
+  let current = render;
+  hideCursor();
+  const draw = () => out.write(CLEAR_LINE + current(FRAMES[i++ % FRAMES.length]));
+  draw();
+  const timer = setInterval(draw, 80);
+  return {
+    update(r) { current = r; draw(); },
+    stop(final) {
+      clearInterval(timer);
+      out.write(CLEAR_LINE);
+      if (final !== undefined) out.write(`${final}\n`);
+      showCursor();
+    },
+  };
+}
+
+// Progress bar like the design: ██████░░░░
+export function bar(p, w = 34) {
+  const n = Math.max(0, Math.min(w, Math.round(p * w)));
+  return c.g('█'.repeat(n)) + c.m('░'.repeat(w - n));
+}
+
+/**
+ * Run steps the way every long gitroots command shows them:
+ *   ✓ Name                done detail     time
+ *   ⠼ Name                what it is doing…
+ *   ○ Name                (queued)
+ * Each step: { name, live, run?: async (ctx) => ({ ok?, detail?, status?: 'ok'|'warn'|'fail' }), ms?, bar?, time? }
+ */
+export async function runSteps(steps, opts = {}) {
+  const nameW = opts.nameWidth ?? 20;
+  const indent = opts.indent ?? '  ';
+  const results = [];
+  const anim = motion();
+  let queued = 0;
+  if (anim && opts.showQueued) {
+    for (const s of steps) line(`${indent}${c.m(`○ ${pad(s.name, nameW)}`)}`);
+    queued = steps.length;
+    out.write(`\x1b[${queued}A`);
+  }
+  for (const step of steps) {
+    if (opts.cancelled && opts.cancelled()) {
+      if (anim && queued) out.write('\x1b[J');
+      results.cancelled = true;
+      break;
+    }
+    const started = Date.now();
+    let progress = 0;
+    const sp = spinner((f) => {
+      if (step.bar) {
+        const p = progress;
+        return `${indent}${c.i(f)} ${c.b(pad(step.name, nameW))}${bar(p)}  ${c.s(step.barLabel ? step.barLabel(p) : `${Math.round(p * 100)}%`)}`;
+      }
+      return `${indent}${c.i(f)} ${c.b(pad(step.name, nameW))}${c.s(step.live || '')}`;
+    });
+    let res = {};
+    let error;
+    try {
+      const work = step.run ? step.run({ progress: (p) => { progress = p; } }) : null;
+      const ms = anim ? (step.ms ?? 0) : 0;
+      if (step.bar && anim && !step.run) {
+        const t0 = Date.now();
+        while (Date.now() - t0 < ms) { progress = (Date.now() - t0) / ms; await sleep(60); }
+        progress = 1;
+      }
+      res = (await work) || {};
+      const left = ms - (Date.now() - started);
+      if (left > 0) await sleep(left);
+    } catch (e) {
+      error = e;
+      res = { status: 'fail', detail: e.message };
+    }
+    const status = res.status || 'ok';
+    const detail = res.detail ?? step.ok ?? '';
+    const mark = status === 'ok' ? c.g('✓') : status === 'warn' ? c.w('◐') : c.r('✕');
+    const detailColored = status === 'ok' ? c.m(detail) : status === 'warn' ? c.w(detail) : c.r(detail);
+    const time = step.time && status === 'ok' ? `  ${c.m(step.time)}` : '';
+    const label = status === 'ok' ? pad(step.name, nameW) : c.b(pad(step.name, nameW));
+    sp.stop(`${indent}${mark} ${label}${opts.detailWidth ? pad(detailColored, opts.detailWidth) : detailColored}${time}`);
+    if (queued) queued--;
+    results.push({ ...step, ...res, status });
+    if (error && !opts.continueOnError) throw error;
+    if (status === 'fail' && opts.stopOnFail) {
+      if (anim && queued) out.write('\x1b[J');
+      break;
+    }
+  }
+  return results;
+}
+
+// ---- keyboard ---------------------------------------------------------------
+
+export function parseKeys(buf) {
+  const s = buf.toString('utf8');
+  const keys = [];
+  let i = 0;
+  while (i < s.length) {
+    const rest = s.slice(i);
+    const seqs = [
+      ['\x1b[A', 'up'], ['\x1b[B', 'down'], ['\x1b[C', 'right'], ['\x1b[D', 'left'],
+      ['\x1bOA', 'up'], ['\x1bOB', 'down'], ['\x1bOC', 'right'], ['\x1bOD', 'left'],
+      ['\x1b[Z', 'shift-tab'], ['\x1b[5~', 'pageup'], ['\x1b[6~', 'pagedown'],
+    ];
+    const hit = seqs.find(([q]) => rest.startsWith(q));
+    if (hit) { keys.push({ name: hit[1] }); i += hit[0].length; continue; }
+    const ch = String.fromCodePoint(s.codePointAt(i));
+    i += ch.length;
+    const code = ch.codePointAt(0);
+    if (ch === '\r' || ch === '\n') keys.push({ name: 'enter' });
+    else if (ch === '\x1b') keys.push({ name: 'escape' });
+    else if (ch === '\t') keys.push({ name: 'tab' });
+    else if (ch === '\x7f' || ch === '\b') keys.push({ name: 'backspace' });
+    else if (code < 27) keys.push({ name: `ctrl-${String.fromCharCode(code + 96)}`, ctrl: true });
+    else keys.push({ name: ch, ch });
+  }
+  return keys;
+}
+
+// Raw key session. handler returns true to stop.
+export function keySession(handler) {
+  const stdin = process.stdin;
+  return new Promise((resolve) => {
+    const wasRaw = stdin.isRaw;
+    stdin.setRawMode(true);
+    stdin.resume();
+    const onData = async (buf) => {
+      for (const k of parseKeys(buf)) {
+        const r = await handler(k);
+        if (r !== undefined && r !== false) { cleanup(); resolve(r); return; }
+      }
+    };
+    const cleanup = () => {
+      stdin.off('data', onData);
+      stdin.setRawMode(Boolean(wasRaw));
+      stdin.pause();
+    };
+    stdin.on('data', onData);
+  });
+}
+
+// ? Question (Y/n) y
+export async function confirm(question, { def = true, assumeYes = false } = {}) {
+  const hint = def ? '(Y/n)' : '(y/N)';
+  const prefix = `${c.i(c.b('?'))} ${question} ${c.m(hint)} `;
+  if (assumeYes) { line(`${prefix}y`); return true; }
+  if (!interactive()) throw new Error(`${question.replace(/\x1b\[[0-9;]*m/g, '')} needs an answer · rerun with --yes`);
+  write(prefix);
+  const ans = await keySession((k) => {
+    if (k.name === 'enter') return def ? 'y' : 'n';
+    if (k.ch && /[yY]/.test(k.ch)) return 'y';
+    if (k.ch && /[nN]/.test(k.ch)) return 'n';
+    if (k.name === 'ctrl-c' || k.name === 'escape') return 'n';
+    return false;
+  });
+  line(ans);
+  return ans === 'y';
+}
+
+// ? Question: answer   (hidden: typed characters are not shown)
+export async function ask(question, { hidden = false, def = '' } = {}) {
+  if (!interactive()) throw new Error(`${question} needs an answer · pass it as a flag`);
+  write(`${c.i(c.b('?'))} ${question}${def ? ` ${c.m(`(${def})`)}` : ''} `);
+  let text = '';
+  const res = await keySession((k) => {
+    if (k.name === 'enter') return { ok: true };
+    if (k.name === 'ctrl-c' || k.name === 'escape') return { ok: false };
+    if (k.name === 'backspace') { if (text) { text = text.slice(0, -1); if (!hidden) write('\b \b'); } return false; }
+    if (k.ch) { text += k.ch; if (!hidden) write(k.ch); }
+    return false;
+  });
+  line(hidden && text ? c.m('••••••••') : '');
+  if (!res.ok) throw new Error('cancelled');
+  return text || def;
+}
+
+// Arrow-key list picker that redraws a block in place.
+export async function select({ render, count, initial = 0, keys = {} }) {
+  let idx = initial;
+  let drawn = 0;
+  const draw = () => {
+    if (drawn) write(`\x1b[${drawn}A\x1b[J`);
+    const text = render(idx);
+    write(text.endsWith('\n') ? text : `${text}\n`);
+    drawn = text.replace(/\n$/, '').split('\n').length;
+  };
+  hideCursor();
+  draw();
+  const result = await keySession((k) => {
+    if (k.name === 'up' || k.ch === 'k') { idx = (idx - 1 + count) % count; draw(); return false; }
+    if (k.name === 'down' || k.ch === 'j') { idx = (idx + 1) % count; draw(); return false; }
+    if (k.name === 'enter') return { action: 'enter', index: idx };
+    if (k.name === 'escape' || k.name === 'ctrl-c' || k.ch === 'q') return { action: 'cancel', index: idx };
+    if (k.ch && keys[k.ch]) return { action: keys[k.ch], index: idx };
+    if (k.ch && /^[1-9]$/.test(k.ch) && Number(k.ch) <= count) { idx = Number(k.ch) - 1; draw(); return false; }
+    return false;
+  });
+  showCursor();
+  return result;
+}
+
+// ---- full screen ------------------------------------------------------------
+
+export function enterFullscreen() {
+  out.write('\x1b[?1049h\x1b[?25l\x1b[H\x1b[2J');
+  cursorHidden = true;
+}
+export function leaveFullscreen() {
+  out.write('\x1b[?25h\x1b[?1049l');
+  cursorHidden = false;
+}
+export function size() { return { cols: out.columns || 148, rows: out.rows || 38 }; }
+
+// Paint a whole frame without flicker: home, each row cleared to end.
+export function paintFrame(rows) {
+  out.write(`\x1b[H${rows.map((r) => `${r}\x1b[0m\x1b[K`).join('\r\n')}\x1b[J`);
+}
+
+// ---- inline logo image ------------------------------------------------------
+
+export function imageProtocol() {
+  if (!out.isTTY || env.GITROOTS_NO_IMAGES) return null;
+  if (env.TMUX || (env.TERM || '').startsWith('screen')) return null;
+  const tp = env.TERM_PROGRAM || '';
+  if (env.KITTY_WINDOW_ID || (env.TERM || '') === 'xterm-kitty' || tp === 'ghostty' || env.GHOSTTY_RESOURCES_DIR) return 'kitty';
+  if (tp === 'iTerm.app' || tp === 'WezTerm' || env.WEZTERM_EXECUTABLE) return 'iterm';
+  return null;
+}
+
+// Draws the logo at the cursor, cols×rows cells, without moving the cursor (caller positions text).
+export function logoImage(cols, rows) {
+  const proto = imageProtocol();
+  if (!proto) return null;
+  let data;
+  try { data = asset('logo.png').toString('base64'); } catch { return null; }
+  if (proto === 'iterm') {
+    return `\x1b]1337;File=inline=1;width=${cols};height=${rows};preserveAspectRatio=1;size=${Buffer.byteLength(data, 'base64')}:${data}\x07`;
+  }
+  const chunks = data.match(/.{1,4096}/g);
+  return chunks.map((chunk, i) => {
+    const more = i < chunks.length - 1 ? 1 : 0;
+    const head = i === 0 ? `a=T,f=100,q=2,C=1,c=${cols},r=${rows},m=${more}` : `m=${more}`;
+    return `\x1b_G${head};${chunk}\x1b\\`;
+  }).join('');
+}
+
+// Copy to clipboard where a tool exists. Returns true only when it worked.
+export async function copyToClipboard(text) {
+  const { spawnSync } = await import('node:child_process');
+  const tries = process.platform === 'darwin' ? [['pbcopy', []]]
+    : process.platform === 'win32' ? [['clip', []]]
+      : [['wl-copy', []], ['xclip', ['-selection', 'clipboard']], ['xsel', ['--clipboard', '--input']]];
+  for (const [cmd, args] of tries) {
+    const r = spawnSync(cmd, args, { input: text });
+    if (r.status === 0) return true;
+  }
+  return false;
+}
+
+export { width };