@compilr-dev/cli 0.4.0 → 0.5.0

package/dist/ui/subagent-renderer.js

@@ -0,0 +1,334 @@
+/**
+ * Subagent Renderer
+ *
+ * Renders subagent status in Claude Code style:
+ * - Single agent: bullet with status and last action
+ * - Multiple agents: tree structure with all agents listed
+ * - Live updates as tools execute
+ *
+ * Visual style:
+ * ● Explore(Find CLI entry points)
+ *   ⎿  Read 67 lines
+ *      Found 100 files
+ *      +3 more tool uses (ctrl+o to expand)
+ *
+ * ● Running 3 Explore agents... (ctrl+o to expand)
+ *    ├─ Find state management · 3 tool uses · 20.7k tokens
+ *    │  ⎿  Bash: List TypeScript files
+ *    └─ Find utility functions · 5 tool uses · 18.9k tokens
+ *       ⎿  Read: src/utils/project-memory.ts
+ */
+import { getStyles } from '../themes/index.js';
+import { debugRender } from '../utils/debug-log.js';
+// =============================================================================
+// Formatting Helpers
+// =============================================================================
+/**
+ * Format duration in human-readable format (e.g., "1m 23s", "45s", "19.2s")
+ */
+function formatDuration(ms) {
+    const seconds = ms / 1000;
+    if (seconds < 60) {
+        return seconds < 10 ? `${seconds.toFixed(1)}s` : `${String(Math.floor(seconds))}s`;
+    }
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = Math.floor(seconds % 60);
+    return `${String(minutes)}m ${String(remainingSeconds)}s`;
+}
+/**
+ * Format token count (e.g., "18.1k", "500")
+ */
+function formatTokens(tokens) {
+    if (tokens >= 1000) {
+        return `${(tokens / 1000).toFixed(1)}k`;
+    }
+    return tokens.toString();
+}
+/**
+ * Capitalize first letter
+ */
+function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+/**
+ * Truncate string to max length with ellipsis
+ */
+function truncate(str, maxLen) {
+    if (str.length <= maxLen)
+        return str;
+    return str.slice(0, maxLen - 1) + '…';
+}
+// =============================================================================
+// Tree Characters (Unicode box drawing)
+// =============================================================================
+const TREE = {
+    branch: '├─', // Non-last item
+    end: '└─', // Last item
+    vertical: '│', // Vertical continuation
+    result: '⎿', // Result/action marker
+    bullet: '●', // Header bullet
+};
+// =============================================================================
+// Subagent Renderer Class
+// =============================================================================
+export class SubagentRenderer {
+    agents = new Map();
+    isExpanded = false;
+    maxDetailLines;
+    showTokens;
+    // Callback for when state changes (trigger re-render)
+    onUpdate = null;
+    constructor(options = {}) {
+        this.maxDetailLines = options.maxDetailLines ?? 1;
+        this.showTokens = options.showTokens ?? true;
+    }
+    // ===========================================================================
+    // Public API
+    // ===========================================================================
+    /**
+     * Called when a subagent starts
+     */
+    onSubagentStart(id, type, description) {
+        this.agents.set(id, {
+            id,
+            type,
+            description: truncate(description, 50),
+            status: 'running',
+            toolCount: 0,
+            tokenCount: 0,
+            lastAction: '',
+            lastActionDetails: [],
+            startTime: Date.now(),
+        });
+        this.triggerUpdate();
+    }
+    /**
+     * Called when a subagent uses a tool
+     */
+    onToolUse(agentId, toolName, summary) {
+        const agent = this.agents.get(agentId);
+        if (!agent)
+            return;
+        agent.toolCount++;
+        agent.lastAction = summary
+            ? `${capitalize(toolName)}: ${truncate(summary, 40)}`
+            : capitalize(toolName);
+        this.triggerUpdate();
+    }
+    /**
+     * Called when a subagent completes
+     */
+    onSubagentEnd(id, success, tokenCount, error) {
+        const agent = this.agents.get(id);
+        if (!agent)
+            return;
+        agent.status = success ? 'done' : 'error';
+        agent.tokenCount = tokenCount;
+        agent.endTime = Date.now();
+        agent.error = error;
+        agent.lastAction = success ? 'Done' : `Error: ${error || 'Unknown'}`;
+        this.triggerUpdate();
+    }
+    /**
+     * Toggle expanded/collapsed view (Ctrl+O)
+     */
+    toggleExpand() {
+        this.isExpanded = !this.isExpanded;
+        this.triggerUpdate();
+    }
+    /**
+     * Check if there are any active subagents
+     */
+    hasActiveSubagents() {
+        return Array.from(this.agents.values()).some(a => a.status === 'running');
+    }
+    /**
+     * Check if there are any subagents to display
+     */
+    hasSubagents() {
+        return this.agents.size > 0;
+    }
+    /**
+     * Get count of agents by status
+     */
+    getCounts() {
+        let running = 0, done = 0, error = 0;
+        for (const agent of this.agents.values()) {
+            if (agent.status === 'running')
+                running++;
+            else if (agent.status === 'done')
+                done++;
+            else
+                error++;
+        }
+        return { running, done, error, total: this.agents.size };
+    }
+    /**
+     * Get the last agent's stats (for persisting to scrolling zone)
+     * Returns null if no agents tracked
+     */
+    getLastAgentStats() {
+        const agents = Array.from(this.agents.values());
+        if (agents.length === 0)
+            return null;
+        // Get the most recently added agent
+        const agent = agents[agents.length - 1];
+        const endTime = agent.endTime ?? Date.now();
+        const durationMs = endTime - agent.startTime;
+        return {
+            type: agent.type,
+            description: agent.description,
+            toolCount: agent.toolCount,
+            tokenCount: agent.tokenCount,
+            durationMs,
+        };
+    }
+    /**
+     * Clear all agents (after rendering final output to scrolling zone)
+     */
+    clear() {
+        this.agents.clear();
+        this.isExpanded = false;
+        this.triggerUpdate();
+    }
+    /**
+     * Set callback for state updates
+     */
+    setUpdateCallback(callback) {
+        this.onUpdate = callback;
+    }
+    /**
+     * Render the subagent zone - returns array of lines
+     * Only renders running agents - completed agents are shown via printSubagentResponse
+     */
+    render() {
+        if (this.agents.size === 0) {
+            debugRender('Subagent:render', 'no agents, returning []');
+            return [];
+        }
+        // Filter to only running agents - completed agents are shown via printSubagentResponse
+        const runningAgents = Array.from(this.agents.values()).filter(a => a.status === 'running');
+        const allStatuses = Array.from(this.agents.values()).map(a => `${a.id}:${a.status}`);
+        debugRender('Subagent:render', `total=${String(this.agents.size)} running=${String(runningAgents.length)} statuses=[${allStatuses.join(',')}]`);
+        if (runningAgents.length === 0) {
+            return [];
+        }
+        const s = getStyles();
+        // Single agent - simpler display
+        if (runningAgents.length === 1) {
+            const lines = this.renderSingleAgent(runningAgents[0], s);
+            debugRender('Subagent:render', `single agent, returning ${String(lines.length)} lines`);
+            return lines;
+        }
+        // Multiple agents - tree display
+        const counts = this.getCounts();
+        const lines = this.renderMultipleAgents(runningAgents, counts, s);
+        debugRender('Subagent:render', `multiple agents, returning ${String(lines.length)} lines`);
+        return lines;
+    }
+    // ===========================================================================
+    // Private Methods
+    // ===========================================================================
+    triggerUpdate() {
+        if (this.onUpdate) {
+            this.onUpdate();
+        }
+    }
+    /**
+     * Render single agent display
+     */
+    renderSingleAgent(agent, s) {
+        const lines = [];
+        const typeLabel = capitalize(agent.type);
+        // Header line: ● Explore(Find CLI entry points)
+        const header = `${TREE.bullet} ${typeLabel}(${agent.description})`;
+        if (agent.status === 'done') {
+            // Completed: show stats
+            const duration = formatDuration((agent.endTime ?? Date.now()) - agent.startTime);
+            const stats = this.showTokens
+                ? `${String(agent.toolCount)} tool uses · ${formatTokens(agent.tokenCount)} tokens · ${duration}`
+                : `${String(agent.toolCount)} tool uses · ${duration}`;
+            lines.push(s.primary(header));
+            lines.push(s.muted(`  ${TREE.result}  Done (${stats})`));
+        }
+        else if (agent.status === 'error') {
+            lines.push(s.error(header));
+            lines.push(s.error(`  ${TREE.result}  ${agent.lastAction}`));
+        }
+        else {
+            // Running: show last action
+            lines.push(s.primary(header));
+            if (agent.lastAction) {
+                lines.push(s.muted(`  ${TREE.result}  ${agent.lastAction}`));
+            }
+            if (agent.toolCount > 1) {
+                lines.push(s.muted(`     +${String(agent.toolCount - 1)} more tool uses (ctrl+o to expand)`));
+            }
+            lines.push(s.muted('     ctrl+b to run in background'));
+        }
+        return lines;
+    }
+    /**
+     * Render multiple agents in tree display
+     */
+    renderMultipleAgents(agents, counts, s) {
+        const lines = [];
+        // Header line
+        let headerText;
+        if (counts.running > 0 && counts.done > 0) {
+            // Mixed states
+            headerText = `${TREE.bullet} ${String(counts.total)} agents (${String(counts.running)} running, ${String(counts.done)} done)`;
+        }
+        else if (counts.running > 0) {
+            // All running
+            const typeLabel = this.getCommonTypeLabel(agents);
+            headerText = `${TREE.bullet} Running ${String(counts.total)} ${typeLabel} agents… (ctrl+o to expand)`;
+        }
+        else {
+            // All done
+            const typeLabel = this.getCommonTypeLabel(agents);
+            headerText = `${TREE.bullet} ${String(counts.total)} ${typeLabel} agents finished (ctrl+o to expand)`;
+        }
+        lines.push(s.primary(headerText));
+        // Render each agent in tree
+        for (let i = 0; i < agents.length; i++) {
+            const agent = agents[i];
+            const isLast = i === agents.length - 1;
+            const branch = isLast ? TREE.end : TREE.branch;
+            const continuation = isLast ? '   ' : `${TREE.vertical}  `;
+            // Agent line: ├─ Find state management · 3 tool uses · 20.7k tokens
+            const toolCountStr = String(agent.toolCount);
+            const stats = this.showTokens
+                ? `${toolCountStr} tool ${agent.toolCount === 1 ? 'use' : 'uses'} · ${formatTokens(agent.tokenCount)} tokens`
+                : `${toolCountStr} tool ${agent.toolCount === 1 ? 'use' : 'uses'}`;
+            const agentLine = `   ${branch} ${agent.description} · ${stats}`;
+            if (agent.status === 'error') {
+                lines.push(s.error(agentLine));
+            }
+            else if (agent.status === 'done') {
+                lines.push(s.muted(agentLine));
+            }
+            else {
+                lines.push(agentLine);
+            }
+            // Last action line:    │  ⎿  Read: src/auth.ts
+            const actionLine = `   ${continuation}${TREE.result}  ${agent.lastAction || (agent.status === 'done' ? 'Done' : 'Starting...')}`;
+            lines.push(s.muted(actionLine));
+        }
+        // Footer hint for running agents
+        if (counts.running > 0) {
+            lines.push(s.muted('     ctrl+b to run in background'));
+        }
+        return lines;
+    }
+    /**
+     * Get common type label if all agents are same type, otherwise "mixed"
+     */
+    getCommonTypeLabel(agents) {
+        if (agents.length === 0)
+            return '';
+        const firstType = agents[0].type;
+        const allSame = agents.every(a => a.type === firstType);
+        return allSame ? capitalize(firstType) : '';
+    }
+}

package/dist/ui/terminal-codes.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Terminal ANSI Escape Codes
+ *
+ * Constants and helper functions for ANSI escape sequences.
+ * Used by TerminalRenderer for cursor movement, scroll regions, clearing, etc.
+ *
+ * Reference: https://en.wikipedia.org/wiki/ANSI_escape_code
+ */
+/** Control Sequence Introducer */
+export declare const CSI = "\u001B[";
+/** Operating System Command (for title, etc.) */
+export declare const OSC = "\u001B]";
+/** String Terminator */
+export declare const ST = "\u0007";
+/** Move cursor up N lines */
+export declare const cursorUp: (n: number) => string;
+/** Move cursor down N lines */
+export declare const cursorDown: (n: number) => string;
+/** Move cursor forward (right) N columns */
+export declare const cursorForward: (n: number) => string;
+/** Move cursor back (left) N columns */
+export declare const cursorBack: (n: number) => string;
+/** Move cursor to specific row and column (1-indexed) */
+export declare const cursorTo: (row: number, col: number) => string;
+/** Move cursor to beginning of line */
+export declare const cursorToLineStart = "\r";
+/** Move cursor to specific column (1-indexed) */
+export declare const cursorToColumn: (col: number) => string;
+/** Save cursor position */
+export declare const saveCursor = "\u001B[s";
+/** Restore cursor position */
+export declare const restoreCursor = "\u001B[u";
+/** Hide cursor */
+export declare const hideCursor = "\u001B[?25l";
+/** Show cursor */
+export declare const showCursor = "\u001B[?25h";
+/**
+ * Set scroll region (DECSTBM - DEC Set Top and Bottom Margins)
+ *
+ * @param top - Top row of scroll region (1-indexed, inclusive)
+ * @param bottom - Bottom row of scroll region (1-indexed, inclusive)
+ *
+ * When set, scrolling only affects rows within this region.
+ * Text printed in the scroll region that would overflow scrolls the region.
+ * Content outside the region is not affected.
+ */
+export declare const setScrollRegion: (top: number, bottom: number) => string;
+/**
+ * Reset scroll region to full screen
+ *
+ * Removes any scroll region restrictions.
+ * Scrolling affects the entire terminal again.
+ */
+export declare const resetScrollRegion = "\u001B[r";
+/** Clear from cursor to end of line */
+export declare const clearToEndOfLine = "\u001B[K";
+/** Clear from cursor to start of line */
+export declare const clearToStartOfLine = "\u001B[1K";
+/** Clear entire line */
+export declare const clearLine = "\u001B[2K";
+/** Clear from cursor to end of screen */
+export declare const clearToEndOfScreen = "\u001B[J";
+/** Clear from cursor to start of screen */
+export declare const clearToStartOfScreen = "\u001B[1J";
+/** Clear entire screen (cursor position unchanged) */
+export declare const clearScreen = "\u001B[2J";
+/** Clear entire screen and move cursor to top-left */
+export declare const clearScreenAndHome = "\u001B[2J\u001B[H";
+/**
+ * Enter alternate screen buffer.
+ * Content shown here doesn't go to main scrollback.
+ * Used for modal UIs like menus, editors.
+ */
+export declare const enterAlternateScreen = "\u001B[?1049h";
+/**
+ * Leave alternate screen buffer.
+ * Returns to main screen (previous content restored).
+ */
+export declare const leaveAlternateScreen = "\u001B[?1049l";
+/** Disable all mouse tracking modes */
+export declare const disableMouseTracking = "\u001B[?1000l\u001B[?1002l\u001B[?1003l";
+/** Set terminal window title */
+export declare const setTitle: (title: string) => string;
+/** Ring terminal bell */
+export declare const bell = "\u0007";
+/**
+ * Position cursor at a specific location and clear to end of screen
+ * Useful for redrawing from a known position
+ */
+export declare const positionAndClear: (row: number, col: number) => string;
+/**
+ * Move to row 1, column 1 (home position)
+ */
+export declare const cursorHome = "\u001B[H";

package/dist/ui/terminal-codes.js

@@ -0,0 +1,124 @@
+/**
+ * Terminal ANSI Escape Codes
+ *
+ * Constants and helper functions for ANSI escape sequences.
+ * Used by TerminalRenderer for cursor movement, scroll regions, clearing, etc.
+ *
+ * Reference: https://en.wikipedia.org/wiki/ANSI_escape_code
+ */
+// =============================================================================
+// Escape Sequence Base
+// =============================================================================
+/** Control Sequence Introducer */
+export const CSI = '\x1b[';
+/** Operating System Command (for title, etc.) */
+export const OSC = '\x1b]';
+/** String Terminator */
+export const ST = '\x07';
+// =============================================================================
+// Cursor Movement
+// =============================================================================
+/** Move cursor up N lines */
+export const cursorUp = (n) => (n > 0 ? `${CSI}${String(n)}A` : '');
+/** Move cursor down N lines */
+export const cursorDown = (n) => (n > 0 ? `${CSI}${String(n)}B` : '');
+/** Move cursor forward (right) N columns */
+export const cursorForward = (n) => (n > 0 ? `${CSI}${String(n)}C` : '');
+/** Move cursor back (left) N columns */
+export const cursorBack = (n) => (n > 0 ? `${CSI}${String(n)}D` : '');
+/** Move cursor to specific row and column (1-indexed) */
+export const cursorTo = (row, col) => `${CSI}${String(row)};${String(col)}H`;
+/** Move cursor to beginning of line */
+export const cursorToLineStart = '\r';
+/** Move cursor to specific column (1-indexed) */
+export const cursorToColumn = (col) => `${CSI}${String(col)}G`;
+/** Save cursor position */
+export const saveCursor = `${CSI}s`;
+/** Restore cursor position */
+export const restoreCursor = `${CSI}u`;
+// =============================================================================
+// Cursor Visibility
+// =============================================================================
+/** Hide cursor */
+export const hideCursor = `${CSI}?25l`;
+/** Show cursor */
+export const showCursor = `${CSI}?25h`;
+// =============================================================================
+// Scroll Regions
+// =============================================================================
+/**
+ * Set scroll region (DECSTBM - DEC Set Top and Bottom Margins)
+ *
+ * @param top - Top row of scroll region (1-indexed, inclusive)
+ * @param bottom - Bottom row of scroll region (1-indexed, inclusive)
+ *
+ * When set, scrolling only affects rows within this region.
+ * Text printed in the scroll region that would overflow scrolls the region.
+ * Content outside the region is not affected.
+ */
+export const setScrollRegion = (top, bottom) => `${CSI}${String(top)};${String(bottom)}r`;
+/**
+ * Reset scroll region to full screen
+ *
+ * Removes any scroll region restrictions.
+ * Scrolling affects the entire terminal again.
+ */
+export const resetScrollRegion = `${CSI}r`;
+// =============================================================================
+// Clearing
+// =============================================================================
+/** Clear from cursor to end of line */
+export const clearToEndOfLine = `${CSI}K`;
+/** Clear from cursor to start of line */
+export const clearToStartOfLine = `${CSI}1K`;
+/** Clear entire line */
+export const clearLine = `${CSI}2K`;
+/** Clear from cursor to end of screen */
+export const clearToEndOfScreen = `${CSI}J`;
+/** Clear from cursor to start of screen */
+export const clearToStartOfScreen = `${CSI}1J`;
+/** Clear entire screen (cursor position unchanged) */
+export const clearScreen = `${CSI}2J`;
+/** Clear entire screen and move cursor to top-left */
+export const clearScreenAndHome = `${CSI}2J${CSI}H`;
+// =============================================================================
+// Alternate Screen Buffer
+// =============================================================================
+/**
+ * Enter alternate screen buffer.
+ * Content shown here doesn't go to main scrollback.
+ * Used for modal UIs like menus, editors.
+ */
+export const enterAlternateScreen = `${CSI}?1049h`;
+/**
+ * Leave alternate screen buffer.
+ * Returns to main screen (previous content restored).
+ */
+export const leaveAlternateScreen = `${CSI}?1049l`;
+// =============================================================================
+// Mouse Tracking (disabled for CLI)
+// =============================================================================
+/** Disable all mouse tracking modes */
+export const disableMouseTracking = `${CSI}?1000l${CSI}?1002l${CSI}?1003l`;
+// =============================================================================
+// Terminal Title
+// =============================================================================
+/** Set terminal window title */
+export const setTitle = (title) => `${OSC}0;${title}${ST}`;
+// =============================================================================
+// Bell
+// =============================================================================
+/** Ring terminal bell */
+export const bell = '\x07';
+// =============================================================================
+// Composite Helpers
+// =============================================================================
+/**
+ * Position cursor at a specific location and clear to end of screen
+ * Useful for redrawing from a known position
+ */
+export const positionAndClear = (row, col) => `${cursorTo(row, col)}${clearToEndOfScreen}`;
+/**
+ * Move to row 1, column 1 (home position)
+ */
+export const cursorHome = `${CSI}H`;