@compilr-dev/cli 0.4.0

package/dist/ui/diff.js

@@ -0,0 +1,182 @@
+/**
+ * Diff Formatting Utility
+ *
+ * Generates colorized diff output for file edits, similar to Claude Code's display.
+ * Shows removed lines with red background and added lines with green background.
+ */
+import * as fs from 'fs';
+import chalk from 'chalk';
+import { getStyles } from '../themes/index.js';
+// =============================================================================
+// Configuration
+// =============================================================================
+/** Number of context lines to show before and after changes */
+const CONTEXT_LINES = 3;
+// =============================================================================
+// Diff Generation
+// =============================================================================
+/**
+ * Generate a formatted diff for an edit operation.
+ * Supports both single replacement and replaceAll.
+ * Shows full lines being modified with proper addition/removal counts.
+ *
+ * @param filePath - Path to the file being edited
+ * @param oldText - Text being replaced
+ * @param newText - Replacement text
+ * @param replaceAll - Whether all occurrences are being replaced
+ * @returns Formatted diff result, or null if file can't be read
+ */
+export function generateEditDiff(filePath, oldText, newText, replaceAll = false) {
+    // Try to read the current file content
+    let fileContent;
+    try {
+        fileContent = fs.readFileSync(filePath, 'utf-8');
+    }
+    catch {
+        // File doesn't exist yet or can't be read
+        return null;
+    }
+    // Split file into lines
+    const lines = fileContent.split('\n');
+    // Find all line numbers that contain the old text
+    const affectedLines = [];
+    for (let i = 0; i < lines.length; i++) {
+        if (lines[i].includes(oldText)) {
+            affectedLines.push(i);
+            if (!replaceAll)
+                break; // Only find first occurrence
+        }
+    }
+    if (affectedLines.length === 0) {
+        // Old text not found
+        return null;
+    }
+    // Build the diff output
+    const diffLines = [];
+    let additions = 0;
+    let removals = 0;
+    // Track which context lines have been shown
+    const shownContextLines = new Set();
+    let lastShownLine = -999;
+    for (let idx = 0; idx < affectedLines.length; idx++) {
+        const lineNum = affectedLines[idx];
+        // Calculate context range for this change
+        const contextStart = Math.max(0, lineNum - CONTEXT_LINES);
+        const contextEnd = Math.min(lines.length - 1, lineNum + CONTEXT_LINES);
+        // Add separator if there's a gap from the last shown line
+        const s = getStyles();
+        if (lastShownLine >= 0 && contextStart > lastShownLine + 1) {
+            diffLines.push(s.muted('       ...'));
+        }
+        // Show context lines before the change
+        for (let i = contextStart; i < lineNum; i++) {
+            if (!shownContextLines.has(i)) {
+                const lineNumStr = String(i + 1).padStart(6);
+                diffLines.push(formatContextLine(lineNumStr, lines[i]));
+                shownContextLines.add(i);
+                lastShownLine = i;
+            }
+        }
+        // Show the changed line (removal + addition)
+        const lineNumStr = String(lineNum + 1).padStart(6);
+        const originalLine = lines[lineNum];
+        const modifiedLine = replaceAll
+            ? originalLine.split(oldText).join(newText) // Replace all in line
+            : originalLine.replace(oldText, newText); // Replace first in line
+        diffLines.push(formatRemovedLine(lineNumStr, originalLine));
+        diffLines.push(formatAddedLine(lineNumStr, modifiedLine));
+        removals++;
+        additions++;
+        shownContextLines.add(lineNum);
+        lastShownLine = lineNum;
+        // Show context lines after the change (but only if not overlapping with next change)
+        const nextChangeLineNum = idx < affectedLines.length - 1 ? affectedLines[idx + 1] : Infinity;
+        for (let i = lineNum + 1; i <= contextEnd && i < nextChangeLineNum; i++) {
+            if (!shownContextLines.has(i)) {
+                const ctxLineNumStr = String(i + 1).padStart(6);
+                diffLines.push(formatContextLine(ctxLineNumStr, lines[i]));
+                shownContextLines.add(i);
+                lastShownLine = i;
+            }
+        }
+    }
+    return {
+        lines: diffLines,
+        additions,
+        removals,
+    };
+}
+/**
+ * Format a diff header showing what changed
+ */
+export function formatDiffHeader(filePath, additions, removals) {
+    const s = getStyles();
+    const fileName = filePath.split('/').pop() || filePath;
+    const stats = [];
+    if (additions > 0) {
+        stats.push(s.success(`${String(additions)} addition${additions !== 1 ? 's' : ''}`));
+    }
+    if (removals > 0) {
+        stats.push(s.error(`${String(removals)} removal${removals !== 1 ? 's' : ''}`));
+    }
+    const statsStr = stats.length > 0 ? ` with ${stats.join(' and ')}` : '';
+    return `  ${s.muted('⎿')}  Updated ${s.primary(fileName)}${statsStr}`;
+}
+// =============================================================================
+// Line Formatting
+// =============================================================================
+/**
+ * Format a context line (unchanged)
+ */
+function formatContextLine(lineNum, content) {
+    const s = getStyles();
+    return `${s.muted(lineNum)}    ${content}`;
+}
+/**
+ * Format a removed line (red background)
+ */
+function formatRemovedLine(lineNum, content) {
+    const s = getStyles();
+    return `${s.muted(lineNum)} ${chalk.bgRed.white('-')} ${chalk.bgRed.white(content)}`;
+}
+/**
+ * Format an added line (green background)
+ */
+function formatAddedLine(lineNum, content) {
+    const s = getStyles();
+    return `${s.muted(lineNum)} ${chalk.bgGreen.black('+')} ${chalk.bgGreen.black(content)}`;
+}
+// =============================================================================
+// Write File Diff (for new files or complete overwrites)
+// =============================================================================
+/**
+ * Generate a simple diff for write_file operations (new content only)
+ */
+export function generateWriteDiff(filePath, content, _isNew) {
+    const lines = content.split('\n');
+    const diffLines = [];
+    // Show first few lines as preview
+    const previewLines = Math.min(lines.length, 10);
+    for (let i = 0; i < previewLines; i++) {
+        const lineNum = String(i + 1).padStart(6);
+        diffLines.push(formatAddedLine(lineNum, lines[i]));
+    }
+    if (lines.length > previewLines) {
+        const s = getStyles();
+        diffLines.push(s.muted(`       ... ${String(lines.length - previewLines)} more lines`));
+    }
+    return {
+        lines: diffLines,
+        additions: lines.length,
+        removals: 0,
+    };
+}
+/**
+ * Format header for write_file operations
+ */
+export function formatWriteHeader(filePath, lineCount, isNew) {
+    const s = getStyles();
+    const fileName = filePath.split('/').pop() || filePath;
+    const action = isNew ? 'Created' : 'Wrote';
+    return `  ${s.muted('⎿')}  ${action} ${s.primary(fileName)} (${String(lineCount)} lines)`;
+}

package/dist/ui/ephemeral.d.ts

@@ -0,0 +1,111 @@
+/**
+ * Ephemeral Zone
+ *
+ * @deprecated This module is superseded by the new Footer architecture.
+ * Use todo-zone.ts, input-prompt-v2.ts, and footer.ts instead.
+ * This file is kept for reference and may be removed in a future cleanup.
+ *
+ * Manages the ephemeral area that is cleared and redrawn while agent works.
+ * Contains: status line (spinner/tool), todo list, pending messages.
+ */
+import type { SpinnerState, TodoItem } from './types.js';
+export interface EphemeralState {
+    spinner: SpinnerState | null;
+    todos: TodoItem[];
+    pendingMessages: string[];
+}
+export declare class EphemeralZone {
+    private renderedLines;
+    private animationInterval;
+    private animationPosition;
+    private animationDirection;
+    private thinkingWord;
+    private state;
+    private abortController;
+    /**
+     * Start the ephemeral zone with spinner animation
+     * Returns AbortController that can be used to interrupt the agent
+     */
+    start(): AbortController;
+    /**
+     * Stop the animation and clear the zone
+     */
+    stop(wasAborted?: boolean): void;
+    /**
+     * Pause the animation (for permission prompts, etc.)
+     */
+    pause(): void;
+    /**
+     * Resume the animation after pause
+     */
+    resume(): void;
+    /**
+     * Update the ephemeral state
+     */
+    update(state: Partial<EphemeralState>): void;
+    /**
+     * Update token count
+     */
+    addTokens(count: number): void;
+    /**
+     * Set current tool being executed
+     */
+    setTool(toolName: string | null): void;
+    /**
+     * Update todos
+     */
+    setTodos(todos: TodoItem[]): void;
+    /**
+     * Add a pending message
+     */
+    addPendingMessage(message: string): void;
+    /**
+     * Get and clear pending messages
+     */
+    getPendingMessages(): string[];
+    /**
+     * Clear all rendered lines
+     */
+    clear(): void;
+    /**
+     * Clear for external output (tool results, etc.)
+     * After calling this, use forceRender() to redraw
+     */
+    clearForOutput(): void;
+    /**
+     * Force an immediate render
+     */
+    forceRender(): void;
+    /**
+     * Get number of rendered lines
+     */
+    getRenderedLines(): number;
+    /**
+     * Check if zone is active (animation running)
+     */
+    isActive(): boolean;
+    /**
+     * Get the abort controller
+     */
+    getAbortController(): AbortController | null;
+    /**
+     * Get the currently active todo
+     */
+    private getActiveTodo;
+    /**
+     * Get the text to display (active todo or thinking word)
+     */
+    private getDisplayText;
+    /**
+     * Render the ephemeral zone
+     */
+    private render;
+}
+/**
+ * Get the singleton ephemeral zone instance
+ */
+export declare function getEphemeralZone(): EphemeralZone;
+/**
+ * Get the current ephemeral instance (may be null if not active)
+ */
+export declare function getCurrentEphemeral(): EphemeralZone | null;

package/dist/ui/ephemeral.js

@@ -0,0 +1,413 @@
+/**
+ * Ephemeral Zone
+ *
+ * @deprecated This module is superseded by the new Footer architecture.
+ * Use todo-zone.ts, input-prompt-v2.ts, and footer.ts instead.
+ * This file is kept for reference and may be removed in a future cleanup.
+ *
+ * Manages the ephemeral area that is cleared and redrawn while agent works.
+ * Contains: status line (spinner/tool), todo list, pending messages.
+ */
+import chalk from 'chalk';
+import { getStyles } from '../themes/index.js';
+import * as terminal from './terminal.js';
+import { formatPendingMessage } from './conversation.js';
+// Note: This file is deprecated but kept for reference.
+// All pc.* calls below have been converted to use getStyles() for theme support.
+// =============================================================================
+// Thinking Words (for random selection)
+// =============================================================================
+const THINKING_WORDS = [
+    'Thinking',
+    'Pondering',
+    'Contemplating',
+    'Ruminating',
+    'Cogitating',
+    'Deliberating',
+    'Musing',
+    'Reflecting',
+    'Considering',
+    'Analyzing',
+    'Processing',
+    'Computing',
+    'Synthesizing',
+    'Extrapolating',
+    'Hypothesizing',
+    'Discombobulating',
+    'Nebulizing',
+    'Percolating',
+    'Marinating',
+    'Simmering',
+    'Brewing',
+    'Fermenting',
+    'Distilling',
+    'Crystallizing',
+    'Transmuting',
+];
+// =============================================================================
+// Formatting Helpers
+// =============================================================================
+/**
+ * Format duration in human-readable format (e.g., "1m 23s", "45s")
+ */
+function formatDuration(ms) {
+    const seconds = Math.floor(ms / 1000);
+    if (seconds < 60) {
+        return `${String(seconds)}s`;
+    }
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return `${String(minutes)}m ${String(remainingSeconds)}s`;
+}
+/**
+ * Format token count (e.g., "1.2k", "500")
+ */
+function formatTokens(tokens) {
+    if (tokens >= 1000) {
+        return `${(tokens / 1000).toFixed(1)}k`;
+    }
+    return tokens.toString();
+}
+/**
+ * Render todo list with visual styling
+ */
+function renderTodoList(todos) {
+    if (todos.length === 0) {
+        return '';
+    }
+    const s = getStyles();
+    const lines = [];
+    for (const todo of todos) {
+        let checkbox;
+        let text;
+        switch (todo.status) {
+            case 'completed':
+                checkbox = s.muted('☒');
+                text = chalk.strikethrough(s.muted(todo.content));
+                break;
+            case 'in_progress':
+                checkbox = s.primary('☐');
+                text = chalk.bold(todo.content);
+                break;
+            case 'pending':
+            default:
+                checkbox = s.muted('☐');
+                text = s.muted(todo.content);
+                break;
+        }
+        lines.push(`${checkbox} ${text}`);
+    }
+    return lines.join('\n');
+}
+export class EphemeralZone {
+    renderedLines = 0;
+    animationInterval = null;
+    animationPosition = 0;
+    animationDirection = 1; // 1 = right, -1 = left
+    thinkingWord = '';
+    // Current state
+    state = {
+        spinner: null,
+        todos: [],
+        pendingMessages: [],
+    };
+    // Abort controller for interrupting agent
+    abortController = null;
+    /**
+     * Start the ephemeral zone with spinner animation
+     * Returns AbortController that can be used to interrupt the agent
+     */
+    start() {
+        this.abortController = new AbortController();
+        this.animationPosition = 0;
+        this.animationDirection = 1;
+        this.renderedLines = 0;
+        // Pick a random thinking word
+        this.thinkingWord =
+            THINKING_WORDS[Math.floor(Math.random() * THINKING_WORDS.length)] + '...';
+        // Initialize spinner state
+        this.state.spinner = {
+            text: this.thinkingWord,
+            tokens: 0,
+            startTime: Date.now(),
+        };
+        // Start animation
+        this.render();
+        this.animationInterval = setInterval(() => {
+            // Move position
+            this.animationPosition += this.animationDirection;
+            // Get current display text
+            const displayText = this.getDisplayText();
+            // Bounce at edges
+            if (this.animationPosition >= displayText.length - 1) {
+                this.animationDirection = -1;
+            }
+            else if (this.animationPosition <= 0) {
+                this.animationDirection = 1;
+            }
+            this.render();
+        }, 150); // Smooth scanning speed
+        return this.abortController;
+    }
+    /**
+     * Stop the animation and clear the zone
+     */
+    stop(wasAborted = false) {
+        if (this.animationInterval) {
+            clearInterval(this.animationInterval);
+            this.animationInterval = null;
+        }
+        this.abortController = null;
+        // Clear all rendered lines
+        this.clear();
+        if (wasAborted) {
+            const s = getStyles();
+            console.log(s.warning('Interrupted by user.\n'));
+        }
+        // Reset state
+        this.state = {
+            spinner: null,
+            todos: [],
+            pendingMessages: [],
+        };
+    }
+    /**
+     * Pause the animation (for permission prompts, etc.)
+     */
+    pause() {
+        if (this.animationInterval) {
+            clearInterval(this.animationInterval);
+            this.animationInterval = null;
+        }
+        this.clear();
+    }
+    /**
+     * Resume the animation after pause
+     */
+    resume() {
+        if (!this.animationInterval && this.abortController) {
+            this.render();
+            this.animationInterval = setInterval(() => {
+                this.animationPosition += this.animationDirection;
+                const displayText = this.getDisplayText();
+                if (this.animationPosition >= displayText.length - 1) {
+                    this.animationDirection = -1;
+                }
+                else if (this.animationPosition <= 0) {
+                    this.animationDirection = 1;
+                }
+                this.render();
+            }, 150);
+        }
+    }
+    /**
+     * Update the ephemeral state
+     */
+    update(state) {
+        if (state.spinner !== undefined) {
+            this.state.spinner = state.spinner;
+        }
+        if (state.todos !== undefined) {
+            this.state.todos = state.todos;
+        }
+        if (state.pendingMessages !== undefined) {
+            this.state.pendingMessages = state.pendingMessages;
+        }
+        // Force render if animation is running
+        if (this.animationInterval) {
+            this.render();
+        }
+    }
+    /**
+     * Update token count
+     */
+    addTokens(count) {
+        if (this.state.spinner) {
+            this.state.spinner.tokens += count;
+        }
+    }
+    /**
+     * Set current tool being executed
+     */
+    setTool(toolName) {
+        if (this.state.spinner) {
+            this.state.spinner.tool = toolName ?? undefined;
+            // Re-render immediately to show tool
+            if (this.animationInterval) {
+                this.render();
+            }
+        }
+    }
+    /**
+     * Update todos
+     */
+    setTodos(todos) {
+        this.state.todos = todos;
+        if (this.animationInterval) {
+            this.render();
+        }
+    }
+    /**
+     * Add a pending message
+     */
+    addPendingMessage(message) {
+        this.state.pendingMessages.push(message);
+        if (this.animationInterval) {
+            this.render();
+        }
+    }
+    /**
+     * Get and clear pending messages
+     */
+    getPendingMessages() {
+        const messages = [...this.state.pendingMessages];
+        this.state.pendingMessages = [];
+        return messages;
+    }
+    /**
+     * Clear all rendered lines
+     */
+    clear() {
+        if (this.renderedLines > 0) {
+            terminal.moveCursorToLineStart();
+            if (this.renderedLines > 1) {
+                terminal.moveCursorUp(this.renderedLines - 1);
+            }
+            terminal.clearToEndOfScreen();
+        }
+        else {
+            terminal.clearLine();
+        }
+        this.renderedLines = 0;
+    }
+    /**
+     * Clear for external output (tool results, etc.)
+     * After calling this, use forceRender() to redraw
+     */
+    clearForOutput() {
+        this.clear();
+    }
+    /**
+     * Force an immediate render
+     */
+    forceRender() {
+        if (this.abortController) {
+            this.render();
+        }
+    }
+    /**
+     * Get number of rendered lines
+     */
+    getRenderedLines() {
+        return this.renderedLines;
+    }
+    /**
+     * Check if zone is active (animation running)
+     */
+    isActive() {
+        return this.abortController !== null;
+    }
+    /**
+     * Get the abort controller
+     */
+    getAbortController() {
+        return this.abortController;
+    }
+    // =============================================================================
+    // Private Methods
+    // =============================================================================
+    /**
+     * Get the currently active todo
+     */
+    getActiveTodo() {
+        return this.state.todos.find((t) => t.status === 'in_progress');
+    }
+    /**
+     * Get the text to display (active todo or thinking word)
+     */
+    getDisplayText() {
+        const activeTodo = this.getActiveTodo();
+        return activeTodo
+            ? (activeTodo.activeForm || activeTodo.content) + '...'
+            : this.thinkingWord;
+    }
+    /**
+     * Render the ephemeral zone
+     */
+    render() {
+        if (!this.state.spinner)
+            return;
+        const s = getStyles();
+        const elapsed = formatDuration(Date.now() - this.state.spinner.startTime);
+        const tokenStr = formatTokens(this.state.spinner.tokens);
+        // Clear previous render
+        this.clear();
+        // Build stats string
+        const stats = s.muted(` (Esc to interrupt · ${elapsed} · ↓ ${tokenStr} tokens)`);
+        // If a tool is running, show that instead of the thinking word
+        if (this.state.spinner.tool) {
+            const toolDisplay = s.warning(`● ${this.state.spinner.tool}`);
+            terminal.write(`${toolDisplay}${stats}`);
+        }
+        else {
+            // Show animated thinking text with knight rider effect
+            const displayText = this.getDisplayText();
+            const activeTodo = this.getActiveTodo();
+            let result = '';
+            for (let i = 0; i < displayText.length; i++) {
+                const distance = Math.abs(i - (this.animationPosition % displayText.length));
+                const char = displayText[i];
+                if (distance === 0) {
+                    result += chalk.bold.white(char);
+                }
+                else if (distance === 1) {
+                    result += s.primary(char);
+                }
+                else if (distance === 2) {
+                    result += s.info(char);
+                }
+                else {
+                    result += s.muted(char);
+                }
+            }
+            // If we have an active todo, show the indicator
+            if (activeTodo) {
+                result = s.primary('✱ ') + result;
+            }
+            terminal.write(`${result}${stats}`);
+        }
+        // Count lines rendered
+        this.renderedLines = 1;
+        // Render todo list if we have todos
+        if (this.state.todos.length > 0) {
+            terminal.write('\n' + renderTodoList(this.state.todos));
+            this.renderedLines += this.state.todos.length;
+        }
+        // Render pending messages if any
+        if (this.state.pendingMessages.length > 0) {
+            for (const msg of this.state.pendingMessages) {
+                terminal.write('\n' + formatPendingMessage(msg));
+                this.renderedLines++;
+            }
+        }
+    }
+}
+// =============================================================================
+// Singleton Instance
+// =============================================================================
+let ephemeralInstance = null;
+/**
+ * Get the singleton ephemeral zone instance
+ */
+export function getEphemeralZone() {
+    if (!ephemeralInstance) {
+        ephemeralInstance = new EphemeralZone();
+    }
+    return ephemeralInstance;
+}
+/**
+ * Get the current ephemeral instance (may be null if not active)
+ */
+export function getCurrentEphemeral() {
+    return ephemeralInstance;
+}