@bahulam/code 2.6.0

package/src/ui/formatter.mjs

@@ -0,0 +1,409 @@
+/**
+ * Formatter — Clean terminal output for Tarang events.
+ *
+ * Style reference: Claude Code screenshot
+ *   ◐ Cyan spinner + cyan text for working/thinking
+ *   ✓ Green checkmark + green path for file changes
+ *   ✗ Red for errors
+ *   White for content and summaries
+ */
+
+import { toolDisplayLabel, toolDisplaySummary } from '../terminal/tool-display.mjs';
+import { formatMessageWindow } from '../core/rate-limit-display.mjs';
+import { formatAgentErrorGuidance } from '../core/error-guidance.mjs';
+
+const RESET = '\x1b[0m';
+const BOLD = '\x1b[1m';
+const DIM = '\x1b[2m';
+const RED = '\x1b[31m';
+const GREEN = '\x1b[32m';
+const YELLOW = '\x1b[33m';
+const CYAN = '\x1b[36m';
+
+// Spinner frames
+const SPINNER = ['◐', '◓', '◑', '◒'];
+
+export class EventFormatter {
+    constructor({ verbose = false } = {}) {
+        this.verbose = verbose;
+        this.toolCount = 0;
+        this.toolCalls = [];
+        this.changes = [];
+        this.phases = new Map();
+        this.sessionInfo = null;
+        this.tokenCount = { input: 0, output: 0 };
+        this._spinnerFrame = 0;
+        this._hasContent = false;
+        this._lastContent = '';
+        this._completed = false;
+        this._seenCallIds = new Set();
+        this._lastThinking = '';
+        this._lastBlock = null;
+    }
+
+    render(event) {
+        const { type, data } = event;
+        switch (type) {
+            case 'session_info':
+                this.sessionInfo = data;
+                if (this.verbose) {
+                    process.stderr.write(`${DIM}  [session] ${data.session_id || ''}${RESET}\n`);
+                }
+                return true;
+            case 'status':
+                this._status(data);
+                return true;
+            case 'thinking':
+                this._thinking(data);
+                return true;
+            case 'content':
+            case 'content_partial':
+                this._content(data);
+                return true;
+            case 'tool_call':
+            case 'tool_request':
+                this._toolCall(data);
+                return true;
+            case 'tool_done':
+                this._toolDone(data);
+                return true;
+            case 'complete':
+                if (data?.rate_limit) {
+                    this.sessionInfo = { ...(this.sessionInfo || {}), rate_limit: data.rate_limit };
+                }
+                this._complete(data);
+                return true;
+            case 'error':
+                this._error(data);
+                return true;
+            case 'plan':
+                this._plan(data);
+                return true;
+            case 'phase_start':
+                this._phaseStart(data);
+                return true;
+            case 'phase_update':
+                this._phaseUpdate(data);
+                return true;
+            case 'phase_summary':
+                this._phaseSummary(data);
+                return true;
+            case 'change':
+                this._change(data);
+                return true;
+            case 'worker_update':
+            case 'worker_start':
+            case 'worker_done':
+                this._workerEvent(type, data);
+                return true;
+            case 'delegation':
+                this._delegation(data);
+                return true;
+            case 'cancelled':
+                this._boundary('status', { compactSame: true });
+                process.stderr.write(`${YELLOW}  Cancelled${data?.reason ? ': ' + data.reason : ''}${RESET}\n`);
+                this._lastBlock = 'status';
+                return true;
+            case 'paused':
+                this._boundary('status', { compactSame: true });
+                process.stderr.write(`${CYAN}  Paused${RESET}\n`);
+                this._lastBlock = 'status';
+                return true;
+            case 'resumed':
+                this._boundary('status', { compactSame: true });
+                process.stderr.write(`${GREEN}  Resumed${RESET}\n`);
+                this._lastBlock = 'status';
+                return true;
+            case 'pause_instruction':
+                this._pauseInstruction(data);
+                return true;
+            default:
+                if (this.verbose) {
+                    process.stderr.write(`${DIM}  [${type}] ${JSON.stringify(data).slice(0, 100)}${RESET}\n`);
+                }
+                return false;
+        }
+    }
+
+    _spinner() {
+        const frame = SPINNER[this._spinnerFrame % SPINNER.length];
+        this._spinnerFrame++;
+        return `${CYAN}${frame}${RESET}`;
+    }
+
+    _boundary(nextBlock, { compactSame = false } = {}) {
+        if (!this._lastBlock) return;
+        if (compactSame && this._lastBlock === nextBlock) return;
+
+        const mode = String(process.env.KEPLER_BLOCK_SEPARATOR || 'space').toLowerCase();
+        if (mode === 'off' || mode === 'none') return;
+        if (mode === 'dotted' || mode === 'dots') {
+            const cols = Math.max(24, process.stderr.columns || process.stdout.columns || 80);
+            process.stderr.write(`  ${DIM}${'·'.repeat(Math.min(44, cols - 4))}${RESET}\n`);
+            return;
+        }
+
+        process.stderr.write('\n');
+    }
+
+    _status(data) {
+        const msg = data?.message || '';
+        // Skip noisy per-turn statuses. Backend emits "Creating agent..." and
+        // "Task type: ..." on every SSE turn (v3_sse.py:566), not just the first —
+        // repeating them clutters the transcript.
+        if (!msg || msg === 'Agent started') return;
+        if (msg.startsWith('Creating agent') || msg.startsWith('Task type:')) return;
+        this._boundary('status', { compactSame: true });
+        process.stderr.write(`  ${this._spinner()} ${CYAN}${msg}${RESET}\n`);
+        this._lastBlock = 'status';
+    }
+
+    _thinking(data) {
+        if (!this.verbose) return;
+
+        const text = data?.message || data?.text || '';
+        if (!text || text === this._lastThinking) return;
+        this._lastThinking = text;
+
+        // Skip generic "Processing (iteration N)..." — too noisy
+        if (text.startsWith('Processing')) return;
+
+        this._boundary('thinking');
+        const clipped = text.length > 200 ? `${text.slice(0, 198)} …` : text;
+        process.stderr.write(`  ${this._spinner()} ${CYAN}Thinking · ${clipped}${RESET}\n`);
+        this._lastBlock = 'thinking';
+    }
+
+    _content(data) {
+        const text = data?.text || '';
+        if (!text) return;
+
+        // Deduplicate exact same content (CONTENT event may repeat)
+        if (text === this._lastContent) return;
+        this._lastContent = text;
+
+        this._boundary('content');
+        this._hasContent = true;
+
+        // Render content with 2-space indent
+        const lines = text.split('\n');
+        for (const line of lines) {
+            process.stdout.write(`  ${line}\n`);
+        }
+        this._lastBlock = 'content';
+    }
+
+    _toolCall(data) {
+        const callId = data?.call_id;
+        const tool = data?.tool || 'unknown';
+        const args = data?.args || {};
+
+        // Deduplicate: agent event + bridge event both fire
+        if (callId) {
+            if (this._seenCallIds.has(callId)) return;
+            this._seenCallIds.add(callId);
+        } else {
+            // Agent event (no call_id) — skip if bridge event follows
+            // Use tool+args as dedup key
+            const key = `${tool}:${JSON.stringify(args)}`;
+            if (this._seenCallIds.has(key)) return;
+            this._seenCallIds.add(key);
+        }
+
+        this.toolCount++;
+        this._boundary('tool', { compactSame: true });
+
+        const label = toolDisplayLabel(tool);
+        const summary = toolDisplaySummary(tool, args);
+        if (tool === 'shell' && summary) {
+            process.stderr.write(`  ${this._spinner()} [${this.toolCount}] ${CYAN}${label}${RESET}\n`);
+            for (const line of wrapShellSummary(summary, 100)) {
+                process.stderr.write(`  ${DIM}  ${line}${RESET}\n`);
+            }
+            this.toolCalls.push({ name: tool, callId, startTime: Date.now() });
+            this._lastBlock = 'tool';
+            return;
+        }
+        const detail = summary ? `${DIM}${summary}${RESET}` : '';
+        process.stderr.write(`  ${this._spinner()} [${this.toolCount}] ${CYAN}${label}${RESET}${detail ? `  ${detail}` : ''}\n`);
+
+        this.toolCalls.push({ name: tool, callId, startTime: Date.now() });
+        this._lastBlock = 'tool';
+    }
+
+    _toolDone(data) {
+        const tool = data?.tool || '';
+        const success = data?.success !== false;
+        const durationMs = data?.duration_ms;
+
+        if (this.verbose) {
+            const dur = durationMs ? ` (${durationMs}ms)` : '';
+            process.stderr.write(`  ${GREEN}✓${RESET} ${tool} done${dur}\n`);
+        }
+
+        // Show file modifications as green checkmarks
+        if (tool === 'write_file' || tool === 'edit_file' || tool === 'write_project') {
+            const path = data?.result?.file_path || data?.args?.file_path || '';
+            if (path) {
+                const action = tool === 'edit_file' ? 'Modified' : tool === 'write_project' ? 'Created' : 'Written';
+                process.stderr.write(`  ${GREEN}✓ ${action} ${path}${RESET}\n`);
+                this.changes.push({ path, action });
+            }
+        }
+
+        // Show validation results
+        if (tool === 'validate_build' || tool === 'lint_check' || tool === 'validate_file') {
+            if (success) {
+                const label = tool === 'validate_build' ? 'Build passed' :
+                              tool === 'lint_check' ? 'Lint check passed' :
+                              'File validated';
+                process.stderr.write(`  ${GREEN}✓ ${label}${RESET}\n`);
+            } else {
+                const msg = data?.result?.error || data?.result?.stderr || 'Failed';
+                process.stderr.write(`  ${RED}✗ ${tool.replace('_', ' ')} failed: ${msg.slice(0, 100)}${RESET}\n`);
+            }
+        }
+
+        // Show shell command results (if verbose or if failed)
+        if (tool === 'shell' && !success) {
+            const stderr = data?.result?.stderr || '';
+            if (stderr) {
+                process.stderr.write(`  ${RED}✗ Command failed: ${stderr.slice(0, 100)}${RESET}\n`);
+            }
+        }
+    }
+
+    _plan(data) {
+        const milestones = data?.milestones || [];
+        if (milestones.length === 0) return;
+        this._boundary('plan');
+        process.stderr.write(`  ${BOLD}Plan${RESET}\n`);
+        for (const m of milestones) {
+            const icon = m.status === 'completed' ? `${GREEN}✓${RESET}` :
+                         m.status === 'started' ? `${CYAN}◐${RESET}` :
+                         `${DIM}○${RESET}`;
+            process.stderr.write(`  ${icon} ${m.name}\n`);
+        }
+        this._lastBlock = 'plan';
+    }
+
+    _phaseStart(data) {
+        const phase = data?.phase || data?.stage_name || '';
+        if (phase && phase !== 'undefined') {
+            process.stderr.write(`\n  ${this._spinner()} ${CYAN}${BOLD}${phase}${RESET}\n`);
+        }
+    }
+
+    _phaseUpdate(data) {
+        const phase = data?.phase || data?.stage_name || '';
+        const status = data?.status || '';
+        if (phase && phase !== 'undefined') {
+            this.phases.set(phase, status);
+            process.stderr.write(`\n  ${this._spinner()} ${CYAN}${BOLD}${phase}${RESET}\n`);
+        }
+    }
+
+    _phaseSummary(data) {
+        if (data?.summary) {
+            process.stderr.write(`  ${GREEN}✓${RESET} ${data.summary.slice(0, 200)}\n`);
+        }
+    }
+
+    _workerEvent(type, data) {
+        const worker = data?.worker || data?.name || '';
+        const status = data?.status || '';
+        if (type === 'worker_start') {
+            process.stderr.write(`  ${this._spinner()} ${CYAN}${worker} starting${RESET}\n`);
+        } else if (type === 'worker_done') {
+            process.stderr.write(`  ${GREEN}✓${RESET} ${worker} done\n`);
+        } else {
+            process.stderr.write(`  ${this._spinner()} ${CYAN}${worker}: ${status}${RESET}\n`);
+        }
+    }
+
+    _delegation(data) {
+        const from = data?.from || '';
+        const to = data?.to || '';
+        const instruction = data?.instruction || '';
+        process.stderr.write(`  ${CYAN}${from} → ${to}${RESET}${instruction ? ': ' + instruction : ''}\n`);
+    }
+
+    _pauseInstruction(data) {
+        const instruction = data?.instruction || '';
+        if (instruction) {
+            process.stderr.write(`  ${YELLOW}Pause instruction: ${instruction}${RESET}\n`);
+        }
+    }
+
+    _change(data) {
+        const icon = data?.type === 'create' ? `${GREEN}+${RESET}` : `${GREEN}~${RESET}`;
+        process.stderr.write(`  ${icon} ${GREEN}${data?.path || ''}${RESET}\n`);
+        this.changes.push(data);
+    }
+
+    _error(data) {
+        const guidance = formatAgentErrorGuidance(data || {});
+        process.stderr.write(`\n  ${RED}✗ ${guidance.title}${RESET}\n`);
+        for (const line of guidance.lines) {
+            process.stderr.write(`  ${DIM}${line}${RESET}\n`);
+        }
+        if (guidance.meta.length) {
+            process.stderr.write(`  ${DIM}${guidance.meta.join(' · ')}${RESET}\n`);
+        }
+    }
+
+    _complete(data) {
+        // Only show once
+        if (this._completed) return;
+        this._completed = true;
+
+        const summary = data?.summary || '';
+        const duration = data?.duration_s ? `${Number(data.duration_s).toFixed(1)}s` : '';
+        const tools = this.toolCount || data?.tool_calls || 0;
+        const changeCount = data?.changes || this.changes.length || 0;
+
+        // Summary line
+        const parts = [];
+        if (duration) parts.push(duration);
+        if (tools > 0) parts.push(`${tools} tool calls`);
+        if (changeCount > 0) parts.push(`${changeCount} changes`);
+
+        const stats = parts.length > 0 ? ` (${parts.join(', ')})` : '';
+        if (summary) {
+            process.stderr.write(`\n  ${GREEN}✓ ${summary}${stats}${RESET}\n`);
+        } else {
+            process.stderr.write(`\n  ${GREEN}✓ Done${stats}${RESET}\n`);
+        }
+
+        const rateLimitLine = formatMessageWindow(data?.rate_limit || this.sessionInfo?.rate_limit);
+        if (rateLimitLine) {
+            process.stderr.write(`  ${DIM}Messages: ${rateLimitLine}${RESET}\n`);
+        }
+
+        // Token usage if available
+        const usage = data?.usage;
+        if (usage && (usage.input_tokens || usage.total_tokens)) {
+            const inp = usage.input_tokens || 0;
+            const out = usage.output_tokens || 0;
+            process.stderr.write(`  ${DIM}Tokens: ${inp.toLocaleString()} in / ${out.toLocaleString()} out${RESET}\n`);
+        }
+    }
+}
+
+function wrapShellSummary(command, width = 100) {
+    const max = Math.max(32, Number(width) || 100);
+    const text = String(command || '');
+    const lines = [];
+    let line = '';
+    for (const token of text.match(/\S+\s*/g) || [text]) {
+        const next = line + token;
+        if (line && next.trimEnd().length > max) {
+            lines.push(line.trimEnd());
+            line = token;
+            continue;
+        }
+        line = next;
+    }
+    if (line.trimEnd()) lines.push(line.trimEnd());
+    return lines.length ? lines : ['(empty command)'];
+}

package/src/ui/icons.mjs

@@ -0,0 +1,164 @@
+/**
+ * Brand icon registry — Mission Control (PRD-055 §4.2).
+ *
+ * Every CLI surface that prints a tool, phase, or status uses these icons.
+ * Each icon has a Unicode form and an ASCII fallback used when the terminal
+ * advertises no Unicode support (older Windows shells, locked-down CI).
+ *
+ *   import { icons, icon } from './icons.mjs';
+ *   process.stdout.write(`${icons.subAgent} explore  ${icons.pass} pass`);
+ *
+ * Or by token (for data-driven tool display):
+ *
+ *   icon('shell')        // ⚙️
+ *   icon('edit_file')    // 🛠️
+ */
+
+import { term } from './term.mjs';
+
+// ── Canonical icons ──────────────────────────────────────────────────────
+
+// Note: cannot Object.freeze() this — it is the target of a Proxy whose
+// `get` returns a rendered string instead of the raw record, which violates
+// the Proxy invariant for frozen targets.
+const ICONS = ({
+  // Brand
+  brand:     { utf: '✦',  ascii: '*'  },
+  orbit:     { utf: '◯',  ascii: 'O'  },
+
+  // Tool families
+  subAgent:  { utf: '🛰️', ascii: '~>' }, // explore, plan, verify, debug, refactor
+  search:    { utf: '🔭', ascii: '?'  }, // search_code, grep, read_file, list_files
+  write:     { utf: '🛠️', ascii: '+'  }, // write_file, edit_file, write_project
+  shell:     { utf: '⚙️', ascii: '$'  }, // shell, run_tests, validators
+  network:   { utf: '🌐', ascii: '@'  }, // WebFetch, MCP network calls
+
+  // State
+  pass:      { utf: '✅', ascii: 'OK' },
+  warn:      { utf: '⚠️', ascii: '!'  },
+  fail:      { utf: '❌', ascii: 'X'  },
+  pending:   { utf: '◔',  ascii: '.'  },
+
+  // Workflow
+  approve:   { utf: '✔',  ascii: 'Y'  },
+  reject:    { utf: '✘',  ascii: 'N'  },
+  pause:     { utf: '⏸',  ascii: '||' },
+  resume:    { utf: '▶',  ascii: '>'  },
+});
+
+// Internal table that the lookup functions consult directly. This stays
+// frozen because we never expose it through a Proxy.
+const ICON_RECORDS = Object.freeze({ ...ICONS });
+
+// ── Tool → icon mapping ──────────────────────────────────────────────────
+// One source of truth so tool display, status bar, and mission report
+// agree. Unknown tools fall through to a generic "tool" icon.
+
+const TOOL_ICON = Object.freeze({
+  // Sub-agents
+  explore:           'subAgent',
+  plan:              'subAgent',
+  verify:            'subAgent',
+  debug:             'subAgent',
+  refactor:          'subAgent',
+
+  // Read / search
+  read_file:         'search',
+  read_files:        'search',
+  search_code:       'search',
+  search_files:      'search',
+  grep:              'search',
+  list_files:        'search',
+  analyze_code:      'search',
+  get_file_info:     'search',
+  git_diff:          'search',
+  git_status:        'search',
+  get_project_overview: 'search',
+
+  // Write / edit
+  write_file:        'write',
+  write_project:     'write',
+  edit_file:         'write',
+  delete_file:       'write',
+
+  // Shell / validate
+  shell:             'shell',
+  run_tests:         'shell',
+  validate_build:    'shell',
+  validate_file:     'shell',
+  validate_structure:'shell',
+  lint_check:        'shell',
+
+  // Network
+  WebFetch:          'network',
+  fetch_url:         'network',
+});
+
+// ── Helpers ──────────────────────────────────────────────────────────────
+
+function render(spec) {
+  if (!spec) return '';
+  return term().unicode ? spec.utf : spec.ascii;
+}
+
+/**
+ * Resolve an icon by name (e.g. `icons.subAgent`). Always safe — returns
+ * the ASCII fallback when the terminal cannot render Unicode.
+ *
+ * Implemented as a Proxy over a plain object (intentionally not frozen, see
+ * the comment above ICONS) so callers can write `icons.pass` directly.
+ */
+export const icons = new Proxy({}, {
+  get(_target, prop) {
+    if (typeof prop !== 'string') return undefined;
+    return render(ICON_RECORDS[prop]);
+  },
+  has(_target, prop) {
+    return typeof prop === 'string' && prop in ICON_RECORDS;
+  },
+  ownKeys() {
+    return Object.keys(ICON_RECORDS);
+  },
+  getOwnPropertyDescriptor(_target, prop) {
+    if (typeof prop !== 'string' || !(prop in ICON_RECORDS)) return undefined;
+    return { configurable: true, enumerable: true, value: render(ICON_RECORDS[prop]) };
+  },
+});
+
+/**
+ * Resolve the icon for a tool name. Falls back to a generic tool icon
+ * (`◇`) when the tool is unknown to the registry — this is intentional so
+ * unmapped MCP tools and user-defined tools still render with the same
+ * visual rhythm.
+ */
+export function icon(toolName) {
+  if (!toolName) return '';
+  const key = TOOL_ICON[toolName];
+  if (key) return render(ICON_RECORDS[key]);
+
+  // MCP tools often arrive as "mcp__server__tool" — strip the prefix and
+  // try again before falling back to the generic glyph.
+  if (toolName.startsWith('mcp')) {
+    const cleaned = toolName.replace(/^mcp[_-]+/, '').split(/[_-]+/)[0];
+    const fallback = TOOL_ICON[cleaned];
+    if (fallback) return render(ICON_RECORDS[fallback]);
+  }
+
+  return term().unicode ? '◇' : '*';
+}
+
+/**
+ * Tool family (one of: subAgent, search, write, shell, network, other).
+ * Used by tier classification and color choice in the tool card renderer.
+ */
+export function toolFamily(toolName) {
+  return TOOL_ICON[toolName] || 'other';
+}
+
+/**
+ * Lower-level lookup for callers that want to know whether a name is in
+ * the registry (e.g. risk classification fall-throughs).
+ */
+export function hasIcon(name) {
+  return name in ICON_RECORDS;
+}