@axplusb/kepler 1.0.10 → 2.0.0

package/src/ui/tool-card.mjs

@@ -0,0 +1,314 @@
+/**
+ * Tool cards — Mission Control (PRD-055 §6).
+ *
+ * One-line summary per tool: icon + label + args + outcome.
+ *
+ *   🔭 search_code "JWT validation"             → 4 matches in 2 files
+ *   🔭 read_file auth.py L42-L88                → 47 lines
+ *   🛠️ edit_file auth.py                        → +12 −4
+ *   ⚙️  shell "npm test"                         → passed in 1.2s
+ *
+ * Two render points:
+ *
+ *   formatCardHead(tool, args)            — at tool invocation (no outcome)
+ *   formatCard({ tool, args, result, … })  — once the result arrives
+ *
+ * Cards are recorded in a small ring buffer (`recordCard`, `lastCard`,
+ * `getCard`) so the expand handler in repl.mjs can re-render details on `d`
+ * / `/last` / `/expand <n>` without holding state in the REPL itself.
+ *
+ * No I/O — callers (repl, demo, headless adapter) are responsible for
+ * `process.stderr.write(...)`. This keeps the module pure and testable.
+ */
+
+import { paint, width as visibleWidth } from './palette.mjs';
+import { icon, toolFamily } from './icons.mjs';
+import { term } from './term.mjs';
+import {
+  toolDisplayLabel,
+  toolDisplaySummary,
+  formatShellCommand,
+} from '../terminal/tool-display.mjs';
+
+// ── Family → label colorizer ─────────────────────────────────────────────
+
+function paintLabel(tool, label) {
+  switch (toolFamily(tool)) {
+    case 'subAgent': return paint.brand.data(label);
+    case 'search':   return paint.text.primary(label);
+    case 'write':    return paint.brand.primary(label);
+    case 'shell':    return paint.state.warn(label);
+    case 'network':  return paint.brand.accent(label);
+    default:         return paint.text.primary(label);
+  }
+}
+
+// ── Args summary ─────────────────────────────────────────────────────────
+
+function formatArgs(tool, args, cwd) {
+  const summary = toolDisplaySummary(tool, args || {}, { cwd });
+  if (!summary) return '';
+  if (tool === 'shell') {
+    return formatShellCommand(summary, paintShellAdapter);
+  }
+  return paint.text.muted(summary);
+}
+
+// Adapter so formatShellCommand (from legacy tool-display.mjs) keeps working
+// against the new palette. It expects an object with .red/.blue/.yellow/.white.
+const paintShellAdapter = {
+  red:    (s) => paint.state.danger(s),
+  blue:   (s) => paint.brand.data(s),
+  yellow: (s) => paint.state.warn(s),
+  white:  (s) => paint.text.primary(s),
+};
+
+// ── Result → outcome summary ─────────────────────────────────────────────
+
+/**
+ * Summarize a tool result into a compact outcome label.
+ *
+ * @returns {{ text: string, tone: 'success'|'warn'|'danger'|'dim' }}
+ */
+export function summarizeResult(tool, data) {
+  if (!data) return { text: '', tone: 'dim' };
+
+  if (data._blocked) {
+    return { text: firstOutputLine(data) || 'blocked', tone: 'danger' };
+  }
+  if (data.success === false) {
+    const msg = String(data.error || firstOutputLine(data) || 'failed').slice(0, 140);
+    return { text: msg, tone: 'danger' };
+  }
+
+  switch (tool) {
+    case 'read_file': {
+      const lines = data._total_lines || lineCount(data.output || data.output_preview);
+      return { text: `${lines} line${lines === 1 ? '' : 's'}`, tone: 'success' };
+    }
+    case 'read_files':
+      return { text: 'files read', tone: 'success' };
+
+    case 'search_code':
+    case 'search_files':
+    case 'grep': {
+      const matches = countMatches(data);
+      const files = countMatchFiles(data);
+      if (matches === 0) return { text: 'no matches', tone: 'warn' };
+      const filesPart = files > 0 ? ` in ${files} file${files === 1 ? '' : 's'}` : '';
+      return { text: `${matches} match${matches === 1 ? '' : 'es'}${filesPart}`, tone: 'success' };
+    }
+
+    case 'list_files': {
+      const n = lineCount(data.output);
+      return { text: n > 0 ? `${n} item${n === 1 ? '' : 's'}` : 'empty', tone: 'success' };
+    }
+
+    case 'edit_file':
+    case 'write_file':
+    case 'write_project': {
+      const delta = diffDelta(data);
+      if (delta) return { text: delta, tone: 'success' };
+      return { text: 'updated', tone: 'success' };
+    }
+
+    case 'delete_file':
+      return { text: 'deleted', tone: 'warn' };
+
+    case 'shell':
+    case 'run_tests':
+    case 'validate_build':
+    case 'lint_check':
+    case 'validate_file':
+    case 'validate_structure': {
+      const exit = data.exit_code ?? data.exitCode;
+      if (exit != null && exit !== 0) {
+        return { text: `exit ${exit}`, tone: 'danger' };
+      }
+      const head = firstOutputLine(data).slice(0, 100);
+      return { text: head || 'ok', tone: 'success' };
+    }
+
+    case 'plan':
+    case 'explore':
+    case 'verify':
+    case 'debug':
+    case 'refactor':
+    case 'analyze_code': {
+      const head = firstOutputLine(data).slice(0, 100);
+      return { text: head || 'done', tone: 'success' };
+    }
+
+    default: {
+      const head = firstOutputLine(data).slice(0, 100);
+      return { text: head || 'done', tone: 'success' };
+    }
+  }
+}
+
+function firstOutputLine(data) {
+  const o = data?.output_preview || data?.output || data?.message || '';
+  return String(o).split('\n').map(l => l.trim()).find(Boolean) || '';
+}
+
+function lineCount(s) {
+  if (!s) return 0;
+  return String(s).split('\n').filter(Boolean).length;
+}
+
+function countMatches(data) {
+  if (typeof data?.match_count === 'number') return data.match_count;
+  return lineCount(data?.output);
+}
+
+function countMatchFiles(data) {
+  if (typeof data?.file_count === 'number') return data.file_count;
+  const out = String(data?.output || '');
+  if (!out) return 0;
+  const files = new Set();
+  for (const line of out.split('\n')) {
+    const m = line.match(/^([^:]+):/);
+    if (m) files.add(m[1]);
+  }
+  return files.size;
+}
+
+function diffDelta(data) {
+  const add = data?.lines_added ?? data?.additions;
+  const rem = data?.lines_removed ?? data?.deletions;
+  if (add == null && rem == null) return '';
+  const a = add ?? 0;
+  const r = rem ?? 0;
+  return `+${a} −${r}`;
+}
+
+function tone(text, t) {
+  switch (t) {
+    case 'success': return paint.state.success(text);
+    case 'warn':    return paint.state.warn(text);
+    case 'danger':  return paint.state.danger(text);
+    case 'dim':
+    default:        return paint.text.dim(text);
+  }
+}
+
+// ── Card head (printed at invocation) ────────────────────────────────────
+
+/**
+ * Render the leading half of a card — icon + colored label + args.
+ * Width-aware: truncates args from the left when the line would overflow.
+ */
+export function formatCardHead(tool, args, opts = {}) {
+  const cwd = opts.cwd || safeCwd();
+  const cols = opts.columns || term().columns || 120;
+  const indent = opts.indent || '  ';
+
+  const iconText  = icon(tool);
+  const label     = toolDisplayLabel(tool);
+  const argsText  = formatArgs(tool, args, cwd);
+
+  const leadVisible = visibleWidth(`${indent}${iconText} ${label}`);
+  const budget = Math.max(20, cols - leadVisible - 4);
+  const argsTruncated = truncateMiddle(argsText, budget);
+
+  const head = `${indent}${iconText} ${paintLabel(tool, label)}`;
+  return argsTruncated ? `${head} ${argsTruncated}` : head;
+}
+
+/**
+ * Render a full card with outcome.
+ *
+ *   🔭 search_code "JWT"              → 4 matches in 2 files · 120ms
+ *
+ * `result` is the tool_result data from the SSE stream (same shape as
+ * `renderToolResult` consumed). `durationMs` overrides what's on the result.
+ */
+export function formatCard({ tool, args, result, durationMs, indent, columns, cwd } = {}) {
+  const cols = columns || term().columns || 120;
+  const head = formatCardHead(tool, args, { indent, columns: cols, cwd });
+
+  const summary = summarizeResult(tool, result);
+  const duration = formatDuration(durationMs ?? result?.duration_ms ?? (result?.duration_s != null ? result.duration_s * 1000 : null));
+
+  if (!summary.text && !duration) return head;
+
+  const arrow = paint.text.dim('→');
+  const body  = summary.text ? tone(summary.text, summary.tone) : '';
+  const tail  = duration ? paint.text.dim(` · ${duration}`) : '';
+
+  const candidate = `${head}  ${arrow} ${body}${tail}`;
+  if (visibleWidth(candidate) <= cols) return candidate;
+
+  // Doesn't fit on one line → push outcome to a separate gutter line.
+  const gutterIndent = (indent || '  ') + paint.text.dim('⎿  ');
+  return `${head}\n${gutterIndent}${arrow} ${body}${tail}`;
+}
+
+function truncateMiddle(text, max) {
+  if (!text) return '';
+  if (visibleWidth(text) <= max) return text;
+  // Truncate the plain text and re-trust palette helpers to skip codes.
+  const plain = text.replace(/\x1b\[[0-9;]*m/g, '');
+  if (plain.length <= max) return text;
+  const keep = Math.max(8, max - 3);
+  const head = plain.slice(0, Math.floor(keep / 2));
+  const tail = plain.slice(plain.length - Math.ceil(keep / 2));
+  return paint.text.muted(`${head}…${tail}`);
+}
+
+function formatDuration(ms) {
+  if (ms == null || !Number.isFinite(ms)) return '';
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+function safeCwd() {
+  try { return process.cwd(); } catch { return ''; }
+}
+
+// ── Ring buffer of recent cards (for expand / /last) ─────────────────────
+
+const MAX_CARDS = 50;
+const _cards = [];
+
+/**
+ * Record a card by its call_id (or generated id). Returns the stored entry.
+ * The entry is updated in place when the matching result arrives.
+ */
+export function recordCard({ id, tool, args, head, result, durationMs, startedAt }) {
+  const entry = { id, tool, args, head, result: result || null, durationMs: durationMs ?? null, startedAt: startedAt ?? null };
+  // Replace if same id already exists (e.g. tool_call followed by tool_result)
+  const existing = _cards.findIndex(c => c.id != null && c.id === id);
+  if (existing >= 0) {
+    _cards[existing] = { ..._cards[existing], ...entry };
+    return _cards[existing];
+  }
+  _cards.push(entry);
+  if (_cards.length > MAX_CARDS) _cards.shift();
+  return entry;
+}
+
+/** Most recently recorded card (the one `d` / `/last` should expand). */
+export function lastCard() {
+  return _cards[_cards.length - 1] || null;
+}
+
+/** Look up a card by id, or 1-based index from the tail (-1 == lastCard). */
+export function getCard(idOrIndex) {
+  if (idOrIndex == null) return lastCard();
+  if (typeof idOrIndex === 'number') {
+    if (idOrIndex < 0) return _cards[_cards.length + idOrIndex] || null;
+    return _cards[idOrIndex] || null;
+  }
+  return _cards.find(c => c.id === idOrIndex) || null;
+}
+
+/** All recorded cards in order. */
+export function allCards() {
+  return _cards.slice();
+}
+
+/** Drop all recorded cards (used by tests and `/clear`). */
+export function clearCards() {
+  _cards.length = 0;
+}

package/src/ui/tool-details.mjs

@@ -0,0 +1,277 @@
+/**
+ * Tool detail formatters — Mission Control (PRD-055 §6.3).
+ *
+ * One function per high-value tool, all sharing the same signature so the
+ * expand handler can dispatch by `tool`:
+ *
+ *   detailFor(card) → string         // multi-line, ANSI-styled, no trailing \n
+ *
+ * Falls back to a generic dump when there's no dedicated formatter.
+ *
+ * Pure: no I/O. The REPL writes the returned string to stderr.
+ */
+
+import { paint } from './palette.mjs';
+import { icon, toolFamily } from './icons.mjs';
+import { toolDisplayLabel } from '../terminal/tool-display.mjs';
+
+const MAX_DETAIL_LINES = 60;
+const MAX_LINE_WIDTH = 220;
+
+// ── Dispatch ─────────────────────────────────────────────────────────────
+
+export function detailFor(card) {
+  if (!card) return paint.text.dim('  (no card to expand)');
+  const { tool } = card;
+
+  const header = renderHeader(card);
+  const body = renderBody(card);
+  return body ? `${header}\n${body}` : header;
+}
+
+function renderBody(card) {
+  const { tool } = card;
+  switch (tool) {
+    case 'read_file':       return detailReadFile(card);
+    case 'read_files':      return detailReadFiles(card);
+    case 'search_code':
+    case 'search_files':
+    case 'grep':            return detailSearch(card);
+    case 'list_files':      return detailListFiles(card);
+    case 'edit_file':       return detailEditFile(card);
+    case 'write_file':      return detailWriteFile(card);
+    case 'write_project':   return detailWriteProject(card);
+    case 'delete_file':     return detailDeleteFile(card);
+    case 'shell':           return detailShell(card);
+    case 'run_tests':
+    case 'validate_build':
+    case 'lint_check':
+    case 'validate_file':
+    case 'validate_structure': return detailValidator(card);
+    case 'plan':            return detailPlan(card);
+    case 'explore':
+    case 'verify':
+    case 'debug':
+    case 'refactor':
+    case 'analyze_code':    return detailGenericOutput(card);
+    default:                return detailGenericOutput(card);
+  }
+}
+
+// ── Header / framing ─────────────────────────────────────────────────────
+
+function renderHeader(card) {
+  const { tool, args, durationMs, result } = card;
+  const label = toolDisplayLabel(tool);
+  const fam = toolFamily(tool);
+  const accent = fam === 'write' ? paint.brand.primary
+              : fam === 'shell' ? paint.state.warn
+              : fam === 'subAgent' ? paint.brand.data
+              : paint.text.primary;
+
+  const lines = [
+    `  ${paint.text.dim('━━')} ${icon(tool)} ${accent(label)} ${paint.text.dim('━━')}`,
+  ];
+
+  const args1 = oneLineArgs(tool, args);
+  if (args1) lines.push(`    ${paint.text.dim('args  ')} ${args1}`);
+  if (durationMs != null) {
+    lines.push(`    ${paint.text.dim('time  ')} ${paint.text.muted(formatDuration(durationMs))}`);
+  }
+  if (result?.success === false) {
+    lines.push(`    ${paint.state.danger('error ')} ${result?.error || 'failed'}`);
+  }
+  return lines.join('\n');
+}
+
+function oneLineArgs(tool, args) {
+  if (!args) return '';
+  try {
+    const compact = JSON.stringify(args);
+    if (compact.length <= 140) return paint.text.muted(compact);
+    return paint.text.muted(compact.slice(0, 137) + '…');
+  } catch {
+    return paint.text.muted(String(args));
+  }
+}
+
+// ── Read ────────────────────────────────────────────────────────────────
+
+function detailReadFile(card) {
+  const output = String(card.result?.output ?? card.result?.output_preview ?? '');
+  if (!output) return paint.text.dim('    (empty file)');
+  const startLine = Number(card.args?.start_line) || 1;
+  return numbered(output, startLine);
+}
+
+function detailReadFiles(card) {
+  const output = String(card.result?.output ?? '');
+  return clip(output);
+}
+
+// ── Search / list ───────────────────────────────────────────────────────
+
+function detailSearch(card) {
+  const output = String(card.result?.output ?? '');
+  if (!output.trim()) return paint.text.dim('    (no matches)');
+
+  const grouped = groupSearchByFile(output);
+  if (!grouped) return clip(output);
+
+  const out = [];
+  let totalLines = 0;
+  for (const [file, hits] of grouped) {
+    if (totalLines > MAX_DETAIL_LINES) {
+      out.push(paint.text.dim(`    … ${grouped.size - out.length / 2} more file(s)`));
+      break;
+    }
+    out.push(`    ${paint.brand.data(file)}`);
+    for (const hit of hits.slice(0, 8)) {
+      out.push(`      ${paint.text.dim(hit.line + ':')} ${paint.text.primary(hit.text)}`);
+      totalLines++;
+    }
+    if (hits.length > 8) {
+      out.push(paint.text.dim(`      … ${hits.length - 8} more match(es)`));
+    }
+    totalLines += 1;
+  }
+  return out.join('\n');
+}
+
+function groupSearchByFile(output) {
+  const groups = new Map();
+  let any = false;
+  for (const line of output.split('\n')) {
+    const m = line.match(/^([^:]+):(\d+):(.*)$/);
+    if (!m) continue;
+    any = true;
+    const [, file, ln, text] = m;
+    if (!groups.has(file)) groups.set(file, []);
+    groups.get(file).push({ line: ln, text: text.trim().slice(0, MAX_LINE_WIDTH) });
+  }
+  return any ? groups : null;
+}
+
+function detailListFiles(card) {
+  const output = String(card.result?.output ?? '');
+  if (!output.trim()) return paint.text.dim('    (empty)');
+  const lines = output.split('\n').filter(Boolean).slice(0, MAX_DETAIL_LINES);
+  return lines.map(l => `    ${paint.text.primary(l)}`).join('\n');
+}
+
+// ── Write / edit ────────────────────────────────────────────────────────
+
+function detailEditFile(card) {
+  const diff = card.result?.diff || card.result?.patch || card.result?.output;
+  if (diff) return renderDiff(String(diff));
+
+  const before = card.args?.search;
+  const after = card.args?.replace;
+  if (before != null && after != null) {
+    return [
+      `    ${paint.state.danger('- ' + String(before).split('\n')[0].slice(0, 160))}`,
+      `    ${paint.state.success('+ ' + String(after).split('\n')[0].slice(0, 160))}`,
+    ].join('\n');
+  }
+  return paint.text.dim('    (edit applied, no diff returned)');
+}
+
+function detailWriteFile(card) {
+  const content = card.args?.content;
+  if (!content) return paint.text.dim('    (no content)');
+  return numbered(String(content), 1);
+}
+
+function detailWriteProject(card) {
+  const files = card.args?.files || [];
+  if (!files.length) return paint.text.dim('    (no files)');
+  return files.slice(0, 30).map(f => {
+    const p = f.path || f.file_path || '';
+    const lines = typeof f.content === 'string' ? f.content.split('\n').length : '?';
+    return `    ${paint.brand.primary(p)} ${paint.text.dim(`(${lines} lines)`)}`;
+  }).join('\n');
+}
+
+function detailDeleteFile(card) {
+  const p = card.args?.file_path || card.args?.path || '';
+  return `    ${paint.state.danger('✗')} ${paint.text.primary(p)}`;
+}
+
+// ── Shell / validators ──────────────────────────────────────────────────
+
+function detailShell(card) {
+  const stdout = String(card.result?.stdout ?? card.result?.output ?? '');
+  const stderr = String(card.result?.stderr ?? '');
+  const out = [];
+  if (stdout) {
+    out.push(paint.text.dim('    stdout'));
+    out.push(clip(stdout));
+  }
+  if (stderr) {
+    if (out.length) out.push('');
+    out.push(paint.state.warn('    stderr'));
+    out.push(clip(stderr, paint.state.danger));
+  }
+  return out.length ? out.join('\n') : paint.text.dim('    (no output)');
+}
+
+function detailValidator(card) {
+  return detailShell(card);
+}
+
+// ── Sub-agent output ────────────────────────────────────────────────────
+
+function detailPlan(card) {
+  const text = String(card.result?.output ?? card.result?.plan ?? '');
+  if (!text.trim()) return paint.text.dim('    (no plan)');
+  // Number list items, highlight headers.
+  return text.split('\n').slice(0, MAX_DETAIL_LINES).map(line => {
+    if (/^\s*\d+\./.test(line)) return `    ${paint.brand.accent(line.trim())}`;
+    if (/^#+\s/.test(line))     return `    ${paint.bold(paint.brand.primary(line.trim()))}`;
+    return `    ${paint.text.primary(line)}`;
+  }).join('\n');
+}
+
+function detailGenericOutput(card) {
+  const out = String(card.result?.output ?? card.result?.output_preview ?? '');
+  return clip(out);
+}
+
+// ── Helpers ─────────────────────────────────────────────────────────────
+
+function numbered(text, start) {
+  const lines = String(text).split('\n');
+  const total = lines.length;
+  const width = String(start + total - 1).length;
+  return lines.slice(0, MAX_DETAIL_LINES).map((line, i) => {
+    const n = String(start + i).padStart(width);
+    return `    ${paint.text.dim(n)} ${paint.text.primary(line.slice(0, MAX_LINE_WIDTH))}`;
+  }).join('\n') + (total > MAX_DETAIL_LINES
+    ? `\n    ${paint.text.dim(`… ${total - MAX_DETAIL_LINES} more line(s)`)}`
+    : '');
+}
+
+function clip(text, painter = paint.text.primary) {
+  if (!text) return paint.text.dim('    (empty)');
+  const lines = String(text).split('\n');
+  const head = lines.slice(0, MAX_DETAIL_LINES).map(l => `    ${painter(l.slice(0, MAX_LINE_WIDTH))}`);
+  if (lines.length > MAX_DETAIL_LINES) {
+    head.push(`    ${paint.text.dim(`… ${lines.length - MAX_DETAIL_LINES} more line(s)`)}`);
+  }
+  return head.join('\n');
+}
+
+function renderDiff(text) {
+  return text.split('\n').slice(0, MAX_DETAIL_LINES).map(line => {
+    if (line.startsWith('+++') || line.startsWith('---')) return `    ${paint.bold(paint.text.muted(line))}`;
+    if (line.startsWith('@@'))                            return `    ${paint.brand.data(line)}`;
+    if (line.startsWith('+'))                             return `    ${paint.state.success(line)}`;
+    if (line.startsWith('-'))                             return `    ${paint.state.danger(line)}`;
+    return `    ${paint.text.dim(line)}`;
+  }).join('\n');
+}
+
+function formatDuration(ms) {
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}