@compilr-dev/cli 0.4.0

package/dist/ui/conversation.d.ts

@@ -0,0 +1,82 @@
+/**
+ * Conversation Renderer
+ *
+ * Handles the scrolling zone - prints conversation messages.
+ * Uses console.log() which naturally scrolls content up.
+ */
+import type { ToolMessage } from './types.js';
+/**
+ * Render markdown text for terminal display
+ */
+export declare function renderMarkdown(text: string): string;
+/**
+ * Render inline markdown for streaming output
+ * Handles bold, italic, inline code, and fenced code blocks with syntax highlighting
+ * Used during streaming when we can't wait for full markdown parsing
+ */
+export declare function renderInlineMarkdown(text: string): string;
+/**
+ * Format tool result for display - handles strings, objects, arrays
+ * When verbose mode is enabled, shows more detailed output
+ */
+export declare function formatToolResult(result: unknown): string;
+/**
+ * Print user message to conversation
+ * Format: primary "❯ " + message content
+ */
+export declare function printUserMessage(content: string): void;
+/**
+ * Print assistant message to conversation
+ * Renders markdown (code blocks, bold, etc.)
+ */
+export declare function printAssistantMessage(content: string): void;
+/**
+ * Print assistant response (event-based rendering)
+ * Used when text is accumulated between tool calls.
+ * Format: "● " prefix + rendered markdown with syntax highlighting
+ */
+export declare function printAssistantResponse(content: string): void;
+/**
+ * Print tool execution log
+ * Format: warning "● toolName" + muted "(args)" + newline + muted "  ⎿  " + result
+ * When verbose mode is enabled, shows full args
+ */
+export declare function printToolLog(tool: ToolMessage): void;
+/**
+ * Print tool execution inline (without creating ToolMessage)
+ * When verbose mode is enabled, shows full args instead of truncated
+ */
+export declare function printToolExecution(name: string, args?: string, result?: string): void;
+/**
+ * Print error message
+ * Format: error "✖ " + message
+ */
+export declare function printError(message: string): void;
+/**
+ * Print info message
+ * Format: muted text
+ */
+export declare function printInfo(message: string): void;
+/**
+ * Print success message
+ * Format: success "✔ " + message
+ */
+export declare function printSuccess(message: string): void;
+/**
+ * Print warning message
+ * Format: warning "⚠ " + message
+ */
+export declare function printWarning(message: string): void;
+/**
+ * Print just the ASCII logo (for startup before full welcome)
+ */
+export declare function printLogo(version: string): void;
+/**
+ * Print welcome banner with ASCII logo and contextual guidance
+ */
+export declare function printWelcome(model: string, version: string): void;
+/**
+ * Format a pending message for display in ephemeral zone
+ * (called by EphemeralZone, not printed directly)
+ */
+export declare function formatPendingMessage(content: string): string;

package/dist/ui/conversation.js

@@ -0,0 +1,508 @@
+/**
+ * Conversation Renderer
+ *
+ * Handles the scrolling zone - prints conversation messages.
+ * Uses console.log() which naturally scrolls content up.
+ */
+import chalk, { Chalk } from 'chalk';
+import { marked } from 'marked';
+import { markedTerminal } from 'marked-terminal';
+import { highlight } from 'cli-highlight';
+import { getStyles } from '../themes/index.js';
+import * as terminal from './terminal.js';
+import { isVerboseEnabled } from '../settings/index.js';
+import { detectProjectStatus, getWorkflowStage } from '../utils/project-status.js';
+// Create chalk instance with colors forced on for our direct usage
+// Note: FORCE_COLOR=3 is set in index.ts for global chalk-based libraries
+const chalkWithColors = new Chalk({ level: 3 });
+// Configure marked for terminal output
+// Type assertion is needed because markedTerminal returns a type incompatible with marked's extension type
+// but it works correctly at runtime. This is a known issue with the marked-terminal types.
+marked.use(markedTerminal({
+    reflowText: true,
+    width: process.stdout.columns || 80,
+    // Enable styling options
+    showSectionPrefix: false,
+    tab: 2,
+    // Use our chalk instance with colors forced on
+    // marked-terminal uses these for inline formatting
+    strong: chalkWithColors.bold,
+    em: chalkWithColors.italic,
+    codespan: chalkWithColors.cyan,
+}));
+// =============================================================================
+// Markdown Rendering
+// =============================================================================
+/**
+ * Render markdown text for terminal display
+ */
+export function renderMarkdown(text) {
+    try {
+        // Preprocess: normalize list markers and indentation
+        const lines = text.split('\n');
+        const processedLines = lines.map((line) => {
+            // Normalize bullet lists: "*   " or "-   " -> "- "
+            // This prevents the asterisk from being confused with italic
+            if (/^\*\s{2,}/.test(line)) {
+                return line.replace(/^\*\s{2,}/, '- ');
+            }
+            // Remove leading 4 spaces that would make it a code block
+            // But preserve intentional code blocks (``` fenced)
+            if (line.startsWith('    ') && !line.startsWith('    ```')) {
+                return line.slice(4);
+            }
+            return line;
+        });
+        const processed = processedLines.join('\n');
+        // marked.parse returns string synchronously with these options
+        let rendered = marked.parse(processed, { async: false });
+        // Post-process: marked-terminal doesn't always render bold/italic inside list items
+        // Convert remaining **bold** and *italic* to ANSI codes
+        // Use chalkWithColors to ensure ANSI codes are always generated
+        const s = getStyles();
+        // Handle **`code`** (bold code) - common pattern
+        rendered = rendered.replace(/\*\*`([^`]+)`\*\*/g, (_match, code) => chalkWithColors.bold(s.primary(code)));
+        // Handle `code` inside **bold** - e.g., **some `code` here**
+        rendered = rendered.replace(/\*\*([^*]*)`([^`]+)`([^*]*)\*\*/g, (_match, before, code, after) => chalkWithColors.bold(`${before}${s.primary(code)}${after}`));
+        // Handle **bold** (not already processed)
+        rendered = rendered.replace(/\*\*([^*]+)\*\*/g, (_match, boldText) => chalkWithColors.bold(boldText));
+        // Handle *italic* - must not be at start of line (bullet) and not part of **
+        // Match *text* but not *  (bullet with spaces) and not **
+        rendered = rendered.replace(/(?<![*\n])\*([^*\s][^*]*[^*\s])\*(?!\*)/g, (_match, italicText) => chalkWithColors.italic(italicText));
+        // Also handle single-word italic: *word*
+        rendered = rendered.replace(/(?<![*\n])\*(\S+)\*(?!\*)/g, (_match, word) => chalkWithColors.italic(word));
+        // Handle `code` (inline code) - use theme primary color
+        rendered = rendered.replace(/`([^`]+)`/g, (_match, code) => s.primary(code));
+        // Handle numbered lists that weren't processed (e.g., "1.  text")
+        rendered = rendered.replace(/^(\d+)\.\s{2,}/gm, (_match, num) => chalkWithColors.bold(`${num}. `));
+        // Remove trailing newlines that marked adds
+        return rendered.replace(/\n+$/, '');
+    }
+    catch {
+        return text; // Fallback to raw text
+    }
+}
+/**
+ * Render inline markdown for streaming output
+ * Handles bold, italic, inline code, and fenced code blocks with syntax highlighting
+ * Used during streaming when we can't wait for full markdown parsing
+ */
+export function renderInlineMarkdown(text) {
+    const s = getStyles();
+    // Handle fenced code blocks with syntax highlighting
+    // Match ```language\ncode\n``` pattern
+    let result = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_match, lang, code) => {
+        try {
+            // Apply syntax highlighting
+            const highlighted = highlight(code.trimEnd(), {
+                language: lang || undefined,
+                ignoreIllegals: true,
+            });
+            return '\n' + highlighted + '\n';
+        }
+        catch {
+            // Fallback to muted code display
+            return '\n' + s.muted(code.trimEnd()) + '\n';
+        }
+    });
+    // Handle **`code`** (bold code) - common pattern
+    result = result.replace(/\*\*`([^`]+)`\*\*/g, (_match, code) => chalkWithColors.bold(s.primary(code)));
+    // Handle `code` inside **bold** - e.g., **some `code` here**
+    result = result.replace(/\*\*([^*]*)`([^`]+)`([^*]*)\*\*/g, (_match, before, code, after) => chalkWithColors.bold(`${before}${s.primary(code)}${after}`));
+    // Handle **bold**
+    result = result.replace(/\*\*([^*]+)\*\*/g, (_match, boldText) => chalkWithColors.bold(boldText));
+    // Handle *italic* - careful not to match bullet points (*   ) or **
+    result = result.replace(/(?<![*\s])\*([^*\s][^*]*[^*\s])\*(?!\*)/g, (_match, italicText) => chalkWithColors.italic(italicText));
+    // Single-word italic
+    result = result.replace(/(?<![*\s])\*(\S+)\*(?!\*)/g, (_match, word) => chalkWithColors.italic(word));
+    // Handle `code` - use theme primary color
+    result = result.replace(/`([^`]+)`/g, (_match, code) => s.primary(code));
+    return result;
+}
+// =============================================================================
+// Tool Result Formatting
+// =============================================================================
+/**
+ * Format tool result for display - handles strings, objects, arrays
+ * When verbose mode is enabled, shows more detailed output
+ */
+export function formatToolResult(result) {
+    const s = getStyles();
+    const verbose = isVerboseEnabled();
+    if (result === null || result === undefined) {
+        return '';
+    }
+    // String result - count lines or truncate
+    if (typeof result === 'string') {
+        const allLines = result.split('\n');
+        const nonEmptyLines = allLines.filter((l) => l.trim()).length;
+        if (verbose) {
+            // Verbose mode: show first few lines as preview, then count
+            const previewLines = 5;
+            if (allLines.length > previewLines) {
+                const preview = allLines.slice(0, previewLines).join('\n');
+                return s.muted(`${preview}\n  ... (${String(nonEmptyLines)} lines total)`);
+            }
+            // Short enough to show fully
+            return s.muted(result);
+        }
+        else {
+            // Normal mode: just show line count or truncated single line
+            if (nonEmptyLines > 3) {
+                return s.muted(`${String(nonEmptyLines)} lines`);
+            }
+            const truncated = result.slice(0, 80).replace(/\n/g, ' ');
+            return s.muted(truncated + (result.length > 80 ? '...' : ''));
+        }
+    }
+    // Array result - show count and type hint
+    if (Array.isArray(result)) {
+        const len = result.length;
+        if (len === 0)
+            return s.muted('empty array');
+        // Try to describe contents
+        const first = result[0];
+        if (typeof first === 'string') {
+            return s.muted(`${String(len)} items`);
+        }
+        else if (typeof first === 'object' && first !== null) {
+            // Check for common patterns like todos, files, branches
+            if ('content' in first && 'status' in first) {
+                return s.muted(`${String(len)} todo items`);
+            }
+            if ('name' in first || 'path' in first) {
+                return s.muted(`${String(len)} items`);
+            }
+        }
+        return s.muted(`${String(len)} items`);
+    }
+    // Object result - try to extract meaningful summary
+    if (typeof result === 'object') {
+        const obj = result;
+        // Git status pattern
+        if ('branch' in obj && 'clean' in obj) {
+            const branch = obj.branch;
+            const clean = obj.clean;
+            return s.muted(`${branch}${clean ? ' (clean)' : ' (changes)'}`);
+        }
+        // Git diff pattern
+        if ('files' in obj && Array.isArray(obj.files)) {
+            const files = obj.files;
+            if (files.length === 0)
+                return s.muted('no changes');
+            if (verbose) {
+                // Show file names in verbose mode
+                const fileNames = files.map((f) => {
+                    if (typeof f === 'string')
+                        return f;
+                    if (typeof f === 'object' && f !== null && 'path' in f)
+                        return f.path;
+                    if (typeof f === 'object' && f !== null && 'file' in f)
+                        return f.file;
+                    return String(f);
+                });
+                const preview = fileNames.slice(0, 10).join('\n  ');
+                if (fileNames.length > 10) {
+                    return s.muted(`${preview}\n  ... (${String(fileNames.length)} files total)`);
+                }
+                return s.muted(preview);
+            }
+            return s.muted(`${String(files.length)} file(s) changed`);
+        }
+        // Git branch pattern
+        if ('current' in obj && 'branches' in obj) {
+            const branches = obj.branches;
+            return s.muted(`${String(branches?.length ?? 0)} branches`);
+        }
+        // File read pattern
+        if ('content' in obj) {
+            const content = String(obj.content);
+            const allLines = content.split('\n');
+            const lineCount = allLines.length;
+            if (verbose) {
+                // Show preview in verbose mode
+                const previewLines = 5;
+                if (allLines.length > previewLines) {
+                    const preview = allLines.slice(0, previewLines).join('\n');
+                    return s.muted(`${preview}\n  ... (${String(lineCount)} lines total)`);
+                }
+                return s.muted(content);
+            }
+            return s.muted(`${String(lineCount)} lines`);
+        }
+        // Bash/command pattern
+        if ('stdout' in obj || 'output' in obj) {
+            const outValue = (obj.stdout ?? obj.output) ?? '';
+            const out = typeof outValue === 'string' ? outValue : JSON.stringify(outValue);
+            const allLines = out.split('\n');
+            const nonEmptyLines = allLines.filter((l) => l.trim()).length;
+            if (verbose && nonEmptyLines > 0) {
+                const previewLines = 5;
+                if (allLines.length > previewLines) {
+                    const preview = allLines.slice(0, previewLines).join('\n');
+                    return s.muted(`${preview}\n  ... (${String(nonEmptyLines)} lines total)`);
+                }
+                return s.muted(out);
+            }
+            if (nonEmptyLines > 0)
+                return s.muted(`${String(nonEmptyLines)} lines`);
+            return s.muted('done');
+        }
+        // Success message pattern
+        if ('success' in obj && typeof obj.message === 'string') {
+            return s.muted(obj.message.slice(0, 60));
+        }
+        // Fallback - show key count or full object in verbose mode
+        const keys = Object.keys(obj);
+        if (verbose) {
+            // Verbose mode: show full object (limited depth)
+            try {
+                const json = JSON.stringify(obj, null, 2);
+                const lines = json.split('\n');
+                if (lines.length > 15) {
+                    return s.muted(lines.slice(0, 15).join('\n') + '\n  ... (truncated)');
+                }
+                return s.muted(json);
+            }
+            catch {
+                return s.muted(`${String(keys.length)} fields`);
+            }
+        }
+        if (keys.length <= 3) {
+            return s.muted(keys.join(', '));
+        }
+        return s.muted(`${String(keys.length)} fields`);
+    }
+    // Primitive - convert to string safely
+    const resultStr = typeof result === 'string' ? result :
+        typeof result === 'number' ? String(result) :
+            typeof result === 'boolean' ? String(result) :
+                JSON.stringify(result);
+    return s.muted(resultStr.slice(0, 60));
+}
+// =============================================================================
+// Message Printing
+// =============================================================================
+/**
+ * Print user message to conversation
+ * Format: primary "❯ " + message content
+ */
+export function printUserMessage(content) {
+    const s = getStyles();
+    console.log(s.primary('❯ ') + content);
+    console.log(''); // Blank line after
+}
+/**
+ * Print assistant message to conversation
+ * Renders markdown (code blocks, bold, etc.)
+ */
+export function printAssistantMessage(content) {
+    if (!content.trim())
+        return;
+    const s = getStyles();
+    console.log(s.success('Agent: '));
+    console.log(renderMarkdown(content));
+    console.log(''); // Blank line after
+}
+/**
+ * Print assistant response (event-based rendering)
+ * Used when text is accumulated between tool calls.
+ * Format: "● " prefix + rendered markdown with syntax highlighting
+ */
+export function printAssistantResponse(content) {
+    if (!content.trim())
+        return;
+    const s = getStyles();
+    // Use bullet prefix (consistent with tool output style)
+    // Apply renderInlineMarkdown which handles code blocks with syntax highlighting
+    const rendered = renderInlineMarkdown(content);
+    console.log(s.primary('● ') + rendered);
+}
+/**
+ * Print tool execution log
+ * Format: warning "● toolName" + muted "(args)" + newline + muted "  ⎿  " + result
+ * When verbose mode is enabled, shows full args
+ */
+export function printToolLog(tool) {
+    const s = getStyles();
+    const verbose = isVerboseEnabled();
+    // In verbose mode, show full args; otherwise truncate
+    let displayArgs = tool.args;
+    if (tool.args && !verbose && tool.args.length > 60) {
+        displayArgs = tool.args.slice(0, 57) + '...';
+    }
+    const toolHeader = displayArgs
+        ? s.warning(`● ${tool.name}`) + s.secondary(`(${displayArgs})`)
+        : s.warning(`● ${tool.name}`);
+    console.log(toolHeader);
+    if (tool.result) {
+        console.log(s.muted('  ⎿  ') + tool.result);
+    }
+    console.log(''); // Blank line after
+}
+/**
+ * Print tool execution inline (without creating ToolMessage)
+ * When verbose mode is enabled, shows full args instead of truncated
+ */
+export function printToolExecution(name, args, result) {
+    const s = getStyles();
+    const verbose = isVerboseEnabled();
+    // In verbose mode, show full args; otherwise truncate
+    let displayArgs = args;
+    if (args && !verbose && args.length > 60) {
+        displayArgs = args.slice(0, 57) + '...';
+    }
+    const toolHeader = displayArgs
+        ? s.warning(`● ${name}`) + s.secondary(`(${displayArgs})`)
+        : s.warning(`● ${name}`);
+    console.log(toolHeader);
+    if (result) {
+        console.log(s.muted('  ⎿  ') + result);
+    }
+    console.log(''); // Blank line after
+}
+/**
+ * Print error message
+ * Format: error "✖ " + message
+ */
+export function printError(message) {
+    const s = getStyles();
+    console.log(s.error('✖ ') + message);
+    console.log('');
+}
+/**
+ * Print info message
+ * Format: muted text
+ */
+export function printInfo(message) {
+    const s = getStyles();
+    console.log(s.muted(message));
+}
+/**
+ * Print success message
+ * Format: success "✔ " + message
+ */
+export function printSuccess(message) {
+    const s = getStyles();
+    console.log(s.success('✔ ') + message);
+}
+/**
+ * Print warning message
+ * Format: warning "⚠ " + message
+ */
+export function printWarning(message) {
+    const s = getStyles();
+    console.log(s.warning('⚠ ') + message);
+}
+// =============================================================================
+// Welcome Banner
+// =============================================================================
+/**
+ * Print just the ASCII logo (for startup before full welcome)
+ */
+export function printLogo(version) {
+    const s = getStyles();
+    terminal.clearScreen();
+    console.log('');
+    console.log(s.primary("   ___  ___  _ __ ___  _ __ (_) |_ __"));
+    console.log(s.primary("  / __|/ _ \\| '_ ` _ \\| '_ \\| | | '__|"));
+    console.log(s.primary(" | (__| (_) | | | | | | |_) | | | |"));
+    console.log(s.primary("  \\___|\\___/|_| |_| |_| .__/|_|_|_|"));
+    console.log(s.primary('                      | |') + s.secondary(' .dev'));
+    console.log(s.primary('                      |_|') + s.muted(` v${version}`));
+    console.log('');
+    console.log(chalk.bold('@compilr-dev/cli') + s.muted(' - AI-powered coding assistant'));
+    console.log('');
+}
+/**
+ * Print welcome banner with ASCII logo and contextual guidance
+ */
+export function printWelcome(model, version) {
+    const s = getStyles();
+    console.log('');
+    console.log(s.primary("   ___  ___  _ __ ___  _ __ (_) |_ __"));
+    console.log(s.primary("  / __|/ _ \\| '_ ` _ \\| '_ \\| | | '__|"));
+    console.log(s.primary(" | (__| (_) | | | | | | |_) | | | |"));
+    console.log(s.primary("  \\___|\\___/|_| |_| |_| .__/|_|_|_|"));
+    console.log(s.primary('                      | |') + s.secondary(' .dev'));
+    console.log(s.primary('                      |_|') + s.muted(` v${version}`));
+    console.log('');
+    console.log(chalk.bold('@compilr-dev/cli') + s.muted(' - AI-powered coding assistant'));
+    console.log('');
+    console.log(s.muted(`Model: ${model}`));
+    console.log('');
+    // Detect project status and show contextual guidance
+    const status = detectProjectStatus();
+    const stage = getWorkflowStage(status);
+    printWorkflowGuidance(status, stage);
+    console.log(s.muted('Type /help for commands, /exit to quit'));
+    console.log('');
+}
+/**
+ * Print workflow guidance based on project status
+ */
+function printWorkflowGuidance(status, stage) {
+    const s = getStyles();
+    switch (stage) {
+        case 'new':
+            // Brand new directory, nothing exists
+            console.log(s.muted('Get started:'));
+            console.log(s.muted('  /init      ') + s.secondary('Create project structure'));
+            console.log(s.muted('  /sketch    ') + s.secondary('Quick 6-question outline'));
+            console.log(s.muted('  /tutorial  ') + s.secondary('Learn the workflow'));
+            console.log('');
+            break;
+        case 'initialized':
+            // Existing project, but no compilr setup
+            if (status.isExistingProject && !status.hasMemory) {
+                console.log(s.muted(`Detected ${status.projectType || 'existing'} project. Define requirements:`));
+                console.log(s.muted('  /design    ') + s.secondary('Agent-driven requirements'));
+                console.log(s.muted('  /sketch    ') + s.secondary('Quick project outline'));
+                console.log(s.muted('  /tutorial  ') + s.secondary('Learn the workflow'));
+                console.log('');
+            }
+            break;
+        case 'designing':
+            // Has PRD or initialized, but no backlog yet
+            console.log(s.muted('Project initialized. Create your backlog:'));
+            console.log(s.muted('  /design    ') + s.secondary('Refine requirements'));
+            console.log(s.muted('  /backlog   ') + s.secondary('View/manage tasks'));
+            console.log('');
+            break;
+        case 'building':
+            // Has backlog with pending items
+            if (status.backlogStats) {
+                const { pending, inProgress } = status.backlogStats;
+                const taskInfo = inProgress > 0
+                    ? `${String(inProgress)} in progress, ${String(pending)} pending`
+                    : `${String(pending)} tasks pending`;
+                console.log(s.muted(`Backlog: ${taskInfo}`));
+                console.log(s.muted('  /backlog            ') + s.secondary('View tasks'));
+                console.log(s.muted('  "build next item"   ') + s.secondary('Start working'));
+                console.log('');
+            }
+            break;
+        case 'maintaining':
+            // Most items completed
+            if (status.backlogStats) {
+                const { total, completed } = status.backlogStats;
+                console.log(s.muted(`Backlog: ${String(completed)}/${String(total)} completed`));
+                console.log(s.muted('  /backlog   ') + s.secondary('View tasks'));
+                console.log(s.muted('  /refine    ') + s.secondary('Add new requirements'));
+                console.log('');
+            }
+            break;
+    }
+}
+// =============================================================================
+// Pending Message Display
+// =============================================================================
+/**
+ * Format a pending message for display in ephemeral zone
+ * (called by EphemeralZone, not printed directly)
+ */
+export function formatPendingMessage(content) {
+    const s = getStyles();
+    const truncated = content.length > 60 ? content.slice(0, 57) + '...' : content;
+    return s.muted('⏳ ') + s.muted(truncated);
+}

package/dist/ui/diff.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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.
+ */
+export interface DiffResult {
+    /** Formatted lines to display */
+    lines: string[];
+    /** Number of additions */
+    additions: number;
+    /** Number of removals */
+    removals: number;
+}
+/**
+ * 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 declare function generateEditDiff(filePath: string, oldText: string, newText: string, replaceAll?: boolean): DiffResult | null;
+/**
+ * Format a diff header showing what changed
+ */
+export declare function formatDiffHeader(filePath: string, additions: number, removals: number): string;
+/**
+ * Generate a simple diff for write_file operations (new content only)
+ */
+export declare function generateWriteDiff(filePath: string, content: string, _isNew: boolean): DiffResult;
+/**
+ * Format header for write_file operations
+ */
+export declare function formatWriteHeader(filePath: string, lineCount: number, isNew: boolean): string;