@compilr-dev/cli 0.4.0 → 0.5.1

package/dist/ui/diff.d.ts

@@ -28,10 +28,16 @@ export declare function generateEditDiff(filePath: string, oldText: string, newT
  * Format a diff header showing what changed
  */
 export declare function formatDiffHeader(filePath: string, additions: number, removals: number): string;
+/**
+ * Compute the full modified file content after applying an edit.
+ * For edit: reads file, applies text replacement, returns full modified content.
+ * Returns null if the file can't be read or the old text isn't found.
+ */
+export declare function computeModifiedContent(filePath: string, oldText: string, newText: string, replaceAll?: boolean): string | null;
 /**
  * Generate a simple diff for write_file operations (new content only)
  */
-export declare function generateWriteDiff(filePath: string, content: string, _isNew: boolean): DiffResult;
+export declare function generateWriteDiff(_filePath: string, content: string, _isNew: boolean): DiffResult;
 /**
  * Format header for write_file operations
  */

package/dist/ui/diff.js

@@ -36,65 +36,77 @@ export function generateEditDiff(filePath, oldText, newText, replaceAll = false)
         // 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
-        }
+    // Find all occurrences of oldText in the file (supports multi-line)
+    const occurrences = [];
+    let searchFrom = 0;
+    let idx = fileContent.indexOf(oldText, searchFrom);
+    while (idx !== -1) {
+        occurrences.push(idx);
+        if (!replaceAll)
+            break;
+        searchFrom = idx + oldText.length;
+        idx = fileContent.indexOf(oldText, searchFrom);
     }
-    if (affectedLines.length === 0) {
-        // Old text not found
+    if (occurrences.length === 0) {
         return null;
     }
+    const lines = fileContent.split('\n');
+    // Convert character offset to line number
+    const charOffsetToLine = (offset) => {
+        let chars = 0;
+        for (let i = 0; i < lines.length; i++) {
+            if (offset <= chars + lines[i].length)
+                return i;
+            chars += lines[i].length + 1; // +1 for \n
+        }
+        return lines.length - 1;
+    };
+    const oldLines = oldText.split('\n');
+    const newLines = newText.split('\n');
     // 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
+    for (let occIdx = 0; occIdx < occurrences.length; occIdx++) {
+        const startLine = charOffsetToLine(occurrences[occIdx]);
+        const endLine = startLine + oldLines.length - 1;
+        const contextStart = Math.max(0, startLine - CONTEXT_LINES);
+        const contextEnd = Math.min(lines.length - 1, endLine + CONTEXT_LINES);
+        // Add separator if there's a gap
         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++) {
+        // Context lines before
+        for (let i = contextStart; i < startLine; i++) {
             if (!shownContextLines.has(i)) {
-                const lineNumStr = String(i + 1).padStart(6);
-                diffLines.push(formatContextLine(lineNumStr, lines[i]));
+                diffLines.push(formatContextLine(String(i + 1).padStart(6), 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++) {
+        // Removed lines (old text)
+        for (let i = 0; i < oldLines.length; i++) {
+            const lineNum = startLine + i;
+            diffLines.push(formatRemovedLine(String(lineNum + 1).padStart(6), lines[lineNum]));
+            shownContextLines.add(lineNum);
+            lastShownLine = lineNum;
+        }
+        removals += oldLines.length;
+        // Added lines (new text)
+        for (let i = 0; i < newLines.length; i++) {
+            diffLines.push(formatAddedLine(String(startLine + 1).padStart(6), newLines[i]));
+        }
+        additions += newLines.length;
+        // Context lines after
+        const nextStartLine = occIdx < occurrences.length - 1
+            ? charOffsetToLine(occurrences[occIdx + 1])
+            : Infinity;
+        for (let i = endLine + 1; i <= contextEnd && i < nextStartLine; i++) {
             if (!shownContextLines.has(i)) {
-                const ctxLineNumStr = String(i + 1).padStart(6);
-                diffLines.push(formatContextLine(ctxLineNumStr, lines[i]));
+                diffLines.push(formatContextLine(String(i + 1).padStart(6), lines[i]));
                 shownContextLines.add(i);
                 lastShownLine = i;
             }
@@ -147,24 +159,49 @@ function formatAddedLine(lineNum, content) {
     return `${s.muted(lineNum)} ${chalk.bgGreen.black('+')} ${chalk.bgGreen.black(content)}`;
 }
 // =============================================================================
+// Modified Content Generation (for VS Code diff view)
+// =============================================================================
+/**
+ * Compute the full modified file content after applying an edit.
+ * For edit: reads file, applies text replacement, returns full modified content.
+ * Returns null if the file can't be read or the old text isn't found.
+ */
+export function computeModifiedContent(filePath, oldText, newText, replaceAll) {
+    let fileContent;
+    try {
+        fileContent = fs.readFileSync(filePath, 'utf-8');
+    }
+    catch {
+        return null;
+    }
+    // Check that oldText exists in the file
+    if (!fileContent.includes(oldText)) {
+        return null;
+    }
+    if (replaceAll) {
+        // Replace all occurrences
+        let result = fileContent;
+        while (result.includes(oldText)) {
+            result = result.replace(oldText, newText);
+        }
+        return result;
+    }
+    // Replace first occurrence only
+    return fileContent.replace(oldText, newText);
+}
+// =============================================================================
 // 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) {
+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++) {
+    for (let i = 0; i < lines.length; 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,

package/dist/ui/ephemeral.d.ts

@@ -2,7 +2,7 @@
  * Ephemeral Zone
  *
  * @deprecated This module is superseded by the new Footer architecture.
- * Use todo-zone.ts, input-prompt-v2.ts, and footer.ts instead.
+ * Use todo-zone.ts, input-prompt.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.

package/dist/ui/ephemeral.js

@@ -2,7 +2,7 @@
  * Ephemeral Zone
  *
  * @deprecated This module is superseded by the new Footer architecture.
- * Use todo-zone.ts, input-prompt-v2.ts, and footer.ts instead.
+ * Use todo-zone.ts, input-prompt.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.
@@ -11,6 +11,7 @@
 import chalk from 'chalk';
 import { getStyles } from '../themes/index.js';
 import * as terminal from './terminal.js';
+import { formatTokens } from './base/index.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.
@@ -59,15 +60,6 @@ function formatDuration(ms) {
     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
  */
@@ -129,6 +121,8 @@ export class EphemeralZone {
         this.state.spinner = {
             text: this.thinkingWord,
             tokens: 0,
+            inputTokens: 0,
+            outputTokens: 0,
             startTime: Date.now(),
         };
         // Start animation

package/dist/ui/features/index.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Overlay Features
+ *
+ * Composable features for building overlays.
+ * Each feature handles a specific aspect of overlay behavior.
+ *
+ * Available features:
+ * - ListFeature: List selection and navigation
+ * - TabFeature: Tab/filter navigation
+ * - InputFeature: Text input with cursor movement
+ * - PaginationFeature: Paginated list navigation with scroll tracking
+ * - SearchFeature: Search/filter text input with type-to-search
+ *
+ * Usage:
+ * ```typescript
+ * import { ListFeature, TabFeature, InputFeature, PaginationFeature, SearchFeature } from './features/index.js';
+ *
+ * const listFeature = new ListFeature(() => items);
+ * const tabFeature = new TabFeature(TABS);
+ * const inputFeature = new InputFeature({ placeholder: 'Enter text...' });
+ * const pagination = new PaginationFeature({ pageSize: 12 });
+ * const search = new SearchFeature({ onSearch: (q) => filter(q) });
+ * ```
+ */
+export { ListFeature, createSimpleListRenderer, createLabelDescriptionRenderer, } from './list-feature.js';
+export type { ListFeatureConfig } from './list-feature.js';
+export { TabFeature, createTabsFromLabels, createFilterTabs, } from './tab-feature.js';
+export type { TabFeatureConfig } from './tab-feature.js';
+export { InputFeature } from './input-feature.js';
+export type { InputFeatureOptions, InputKeyResult } from './input-feature.js';
+export { PaginationFeature } from './pagination-feature.js';
+export type { PaginationState, PaginationConfig, PaginationKeyResult, } from './pagination-feature.js';
+export { SearchFeature } from './search-feature.js';
+export type { SearchState, SearchConfig, SearchKeyResult, SearchBoxOptions, } from './search-feature.js';

package/dist/ui/features/index.js

@@ -0,0 +1,34 @@
+/**
+ * Overlay Features
+ *
+ * Composable features for building overlays.
+ * Each feature handles a specific aspect of overlay behavior.
+ *
+ * Available features:
+ * - ListFeature: List selection and navigation
+ * - TabFeature: Tab/filter navigation
+ * - InputFeature: Text input with cursor movement
+ * - PaginationFeature: Paginated list navigation with scroll tracking
+ * - SearchFeature: Search/filter text input with type-to-search
+ *
+ * Usage:
+ * ```typescript
+ * import { ListFeature, TabFeature, InputFeature, PaginationFeature, SearchFeature } from './features/index.js';
+ *
+ * const listFeature = new ListFeature(() => items);
+ * const tabFeature = new TabFeature(TABS);
+ * const inputFeature = new InputFeature({ placeholder: 'Enter text...' });
+ * const pagination = new PaginationFeature({ pageSize: 12 });
+ * const search = new SearchFeature({ onSearch: (q) => filter(q) });
+ * ```
+ */
+// List selection and navigation
+export { ListFeature, createSimpleListRenderer, createLabelDescriptionRenderer, } from './list-feature.js';
+// Tab/filter navigation
+export { TabFeature, createTabsFromLabels, createFilterTabs, } from './tab-feature.js';
+// Text input with cursor movement
+export { InputFeature } from './input-feature.js';
+// Paginated list navigation
+export { PaginationFeature } from './pagination-feature.js';
+// Search/filter text input
+export { SearchFeature } from './search-feature.js';

package/dist/ui/features/input-feature.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Input Feature
+ *
+ * Composable text input handling for overlays.
+ * Provides cursor movement, text editing, and rendering.
+ *
+ * Usage:
+ * ```typescript
+ * class MyScreen extends BaseScreen {
+ *   private input = new InputFeature({ placeholder: 'Enter text...' });
+ *
+ *   render(): string[] {
+ *     return [
+ *       ' ' + this.input.render(styles),
+ *     ];
+ *   }
+ *
+ *   handleKey(data: Buffer): ScreenResult {
+ *     const result = this.input.handleKey(data);
+ *     if (result.handled) {
+ *       return stay();
+ *     }
+ *     // Handle other keys (Enter, Escape, etc.)
+ *   }
+ * }
+ * ```
+ */
+export interface InputFeatureOptions {
+    /** Initial value */
+    initialValue?: string;
+    /** Placeholder text when empty */
+    placeholder?: string;
+    /** Maximum length (0 = unlimited) */
+    maxLength?: number;
+}
+export interface InputKeyResult {
+    /** Whether the key was handled */
+    handled: boolean;
+    /** Whether to re-render */
+    render: boolean;
+}
+export declare class InputFeature {
+    /** Current text value */
+    private _value;
+    /** Cursor position (0 = before first char, value.length = after last char) */
+    private _cursor;
+    /** Placeholder text */
+    private readonly placeholder;
+    /** Maximum length */
+    private readonly maxLength;
+    constructor(options?: InputFeatureOptions);
+    /** Get current value */
+    get value(): string;
+    /** Set value (resets cursor to end) */
+    set value(v: string);
+    /** Get cursor position */
+    get cursor(): number;
+    /** Check if empty */
+    get isEmpty(): boolean;
+    /** Get trimmed value */
+    get trimmedValue(): string;
+    /**
+     * Handle a key press.
+     * Returns whether the key was handled and whether to re-render.
+     */
+    handleKey(data: Buffer): InputKeyResult;
+    /**
+     * Render the input field with cursor.
+     * Returns a string like: "> text with cursor_"
+     *
+     * @param styles - Theme styles for coloring
+     * @param prefix - Prefix before the input (default: "> ")
+     */
+    render(styles: ReturnType<typeof import('../../themes/index.js').getStyles>, prefix?: string): string;
+    /**
+     * Render input field without cursor (for non-focused state).
+     */
+    renderWithoutCursor(styles: ReturnType<typeof import('../../themes/index.js').getStyles>, prefix?: string): string;
+    /** Clear the input */
+    clear(): void;
+    /** Find word boundary to the left of cursor */
+    private findWordBoundaryLeft;
+    /** Find word boundary to the right of cursor */
+    private findWordBoundaryRight;
+}

package/dist/ui/features/input-feature.js

@@ -0,0 +1,238 @@
+/**
+ * Input Feature
+ *
+ * Composable text input handling for overlays.
+ * Provides cursor movement, text editing, and rendering.
+ *
+ * Usage:
+ * ```typescript
+ * class MyScreen extends BaseScreen {
+ *   private input = new InputFeature({ placeholder: 'Enter text...' });
+ *
+ *   render(): string[] {
+ *     return [
+ *       ' ' + this.input.render(styles),
+ *     ];
+ *   }
+ *
+ *   handleKey(data: Buffer): ScreenResult {
+ *     const result = this.input.handleKey(data);
+ *     if (result.handled) {
+ *       return stay();
+ *     }
+ *     // Handle other keys (Enter, Escape, etc.)
+ *   }
+ * }
+ * ```
+ */
+import { isLeftArrow, isRightArrow, isBackspace, isDelete, isHome, isEnd, isCtrlA, isCtrlE, isWordLeft, isWordRight, extractPrintable, } from '../base/key-utils.js';
+// =============================================================================
+// InputFeature Class
+// =============================================================================
+export class InputFeature {
+    /** Current text value */
+    _value;
+    /** Cursor position (0 = before first char, value.length = after last char) */
+    _cursor;
+    /** Placeholder text */
+    placeholder;
+    /** Maximum length */
+    maxLength;
+    constructor(options = {}) {
+        this._value = options.initialValue ?? '';
+        this._cursor = this._value.length;
+        this.placeholder = options.placeholder ?? '';
+        this.maxLength = options.maxLength ?? 0;
+    }
+    // ===========================================================================
+    // Getters/Setters
+    // ===========================================================================
+    /** Get current value */
+    get value() {
+        return this._value;
+    }
+    /** Set value (resets cursor to end) */
+    set value(v) {
+        this._value = v;
+        this._cursor = v.length;
+    }
+    /** Get cursor position */
+    get cursor() {
+        return this._cursor;
+    }
+    /** Check if empty */
+    get isEmpty() {
+        return this._value.length === 0;
+    }
+    /** Get trimmed value */
+    get trimmedValue() {
+        return this._value.trim();
+    }
+    // ===========================================================================
+    // Key Handling
+    // ===========================================================================
+    /**
+     * Handle a key press.
+     * Returns whether the key was handled and whether to re-render.
+     */
+    handleKey(data) {
+        // Left arrow - move cursor left
+        if (isLeftArrow(data)) {
+            if (this._cursor > 0) {
+                this._cursor--;
+                return { handled: true, render: true };
+            }
+            return { handled: true, render: false };
+        }
+        // Right arrow - move cursor right
+        if (isRightArrow(data)) {
+            if (this._cursor < this._value.length) {
+                this._cursor++;
+                return { handled: true, render: true };
+            }
+            return { handled: true, render: false };
+        }
+        // Home or Ctrl+A - move to start
+        if (isHome(data) || isCtrlA(data)) {
+            if (this._cursor > 0) {
+                this._cursor = 0;
+                return { handled: true, render: true };
+            }
+            return { handled: true, render: false };
+        }
+        // End or Ctrl+E - move to end
+        if (isEnd(data) || isCtrlE(data)) {
+            if (this._cursor < this._value.length) {
+                this._cursor = this._value.length;
+                return { handled: true, render: true };
+            }
+            return { handled: true, render: false };
+        }
+        // Word left (Ctrl+Left, Alt+b)
+        if (isWordLeft(data)) {
+            const newPos = this.findWordBoundaryLeft();
+            if (newPos !== this._cursor) {
+                this._cursor = newPos;
+                return { handled: true, render: true };
+            }
+            return { handled: true, render: false };
+        }
+        // Word right (Ctrl+Right, Alt+f)
+        if (isWordRight(data)) {
+            const newPos = this.findWordBoundaryRight();
+            if (newPos !== this._cursor) {
+                this._cursor = newPos;
+                return { handled: true, render: true };
+            }
+            return { handled: true, render: false };
+        }
+        // Backspace - delete before cursor
+        if (isBackspace(data)) {
+            if (this._cursor > 0) {
+                this._value =
+                    this._value.slice(0, this._cursor - 1) + this._value.slice(this._cursor);
+                this._cursor--;
+                return { handled: true, render: true };
+            }
+            return { handled: true, render: false };
+        }
+        // Delete - delete at cursor
+        if (isDelete(data)) {
+            if (this._cursor < this._value.length) {
+                this._value =
+                    this._value.slice(0, this._cursor) + this._value.slice(this._cursor + 1);
+                return { handled: true, render: true };
+            }
+            return { handled: true, render: false };
+        }
+        // Printable characters - insert at cursor
+        const printable = extractPrintable(data);
+        if (printable.length > 0) {
+            // Check max length
+            if (this.maxLength > 0 && this._value.length + printable.length > this.maxLength) {
+                const allowed = this.maxLength - this._value.length;
+                if (allowed <= 0) {
+                    return { handled: true, render: false };
+                }
+                const truncated = printable.slice(0, allowed);
+                this._value =
+                    this._value.slice(0, this._cursor) + truncated + this._value.slice(this._cursor);
+                this._cursor += truncated.length;
+                return { handled: true, render: true };
+            }
+            this._value =
+                this._value.slice(0, this._cursor) + printable + this._value.slice(this._cursor);
+            this._cursor += printable.length;
+            return { handled: true, render: true };
+        }
+        // Not handled
+        return { handled: false, render: false };
+    }
+    // ===========================================================================
+    // Rendering
+    // ===========================================================================
+    /**
+     * Render the input field with cursor.
+     * Returns a string like: "> text with cursor_"
+     *
+     * @param styles - Theme styles for coloring
+     * @param prefix - Prefix before the input (default: "> ")
+     */
+    render(styles, prefix = '> ') {
+        if (this._value.length === 0 && this.placeholder) {
+            // Show placeholder with cursor at start
+            return styles.primary(prefix) + styles.primary('▋') + styles.muted(this.placeholder);
+        }
+        // Split text at cursor position
+        const before = this._value.slice(0, this._cursor);
+        const after = this._value.slice(this._cursor);
+        return styles.primary(prefix) + before + styles.primary('▋') + after;
+    }
+    /**
+     * Render input field without cursor (for non-focused state).
+     */
+    renderWithoutCursor(styles, prefix = '> ') {
+        if (this._value.length === 0 && this.placeholder) {
+            return styles.muted(prefix + this.placeholder);
+        }
+        return prefix + this._value;
+    }
+    // ===========================================================================
+    // Helpers
+    // ===========================================================================
+    /** Clear the input */
+    clear() {
+        this._value = '';
+        this._cursor = 0;
+    }
+    /** Find word boundary to the left of cursor */
+    findWordBoundaryLeft() {
+        if (this._cursor === 0)
+            return 0;
+        let pos = this._cursor - 1;
+        // Skip whitespace
+        while (pos > 0 && /\s/.test(this._value[pos])) {
+            pos--;
+        }
+        // Skip word characters
+        while (pos > 0 && !/\s/.test(this._value[pos - 1])) {
+            pos--;
+        }
+        return pos;
+    }
+    /** Find word boundary to the right of cursor */
+    findWordBoundaryRight() {
+        if (this._cursor >= this._value.length)
+            return this._value.length;
+        let pos = this._cursor;
+        // Skip current word
+        while (pos < this._value.length && !/\s/.test(this._value[pos])) {
+            pos++;
+        }
+        // Skip whitespace
+        while (pos < this._value.length && /\s/.test(this._value[pos])) {
+            pos++;
+        }
+        return pos;
+    }
+}