@compilr-dev/cli 0.4.0 → 0.5.1

package/dist/ui/conversation.js

@@ -2,81 +2,165 @@
  * Conversation Renderer
  *
  * Handles the scrolling zone - prints conversation messages.
- * Uses console.log() which naturally scrolls content up.
+ * When TerminalRenderer is connected (scroll region mode), uses appendToScrollZone().
+ * Otherwise falls back to console.log() for legacy mode.
  */
-import chalk, { Chalk } from 'chalk';
+import { Chalk } from 'chalk';
 import { marked } from 'marked';
 import { markedTerminal } from 'marked-terminal';
 import { highlight } from 'cli-highlight';
 import { getStyles } from '../themes/index.js';
+import { getThemeColors } from '../themes/index.js';
 import * as terminal from './terminal.js';
-import { isVerboseEnabled } from '../settings/index.js';
+import { isVerboseEnabled, getMascotSetting } from '../settings/index.js';
 import { detectProjectStatus, getWorkflowStage } from '../utils/project-status.js';
+import { renderMascotWithLogo } from './mascot/index.js';
+import { formatTokens, truncate } from './base/index.js';
+// =============================================================================
+// Renderer Integration
+// =============================================================================
+/** Module-level renderer reference for scroll region mode */
+let rendererInstance = null;
+/**
+ * Set the TerminalRenderer instance for scroll region output
+ * When set, output goes through renderer.appendToScrollZone()
+ * When null, falls back to console.log (legacy mode)
+ */
+export function setRenderer(renderer) {
+    rendererInstance = renderer;
+}
+/**
+ * Get the current renderer instance
+ */
+export function getRenderer() {
+    return rendererInstance;
+}
+/**
+ * Output lines to the scroll zone
+ * Uses renderer if connected (scroll region mode), otherwise console.log
+ */
+function outputLines(lines) {
+    if (rendererInstance) {
+        rendererInstance.appendToScrollZone(lines);
+    }
+    else {
+        for (const line of lines) {
+            console.log(line);
+        }
+    }
+}
+/**
+ * Output a single line to the scroll zone
+ */
+function outputLine(line) {
+    outputLines([line]);
+}
 // 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,
-}));
+// =============================================================================
+// Theme-Aware Markdown Options (using markedTerminal)
+// =============================================================================
+/**
+ * Get markedTerminal options configured with current theme colors.
+ */
+function getThemedMarkedOptions() {
+    const colors = getThemeColors();
+    const chalk = new Chalk({ level: 3 });
+    // Create chalk instances with theme colors
+    const primaryColor = chalk.hex(colors.primary);
+    const secondaryColor = chalk.hex(colors.secondary || colors.primary);
+    const fgColor = chalk.hex(colors.foreground);
+    const mutedColor = chalk.hex(colors.muted);
+    const borderColor = chalk.hex(colors.border);
+    return {
+        reflowText: true,
+        width: Math.min(100, terminal.getTerminalWidth() - 4),
+        unescape: true,
+        tab: 2,
+        showSectionPrefix: false,
+        // Theme-aware styling
+        heading: primaryColor.bold,
+        firstHeading: primaryColor.bold,
+        strong: fgColor.bold,
+        em: fgColor.italic,
+        link: secondaryColor,
+        href: secondaryColor.underline,
+        blockquote: mutedColor.italic,
+        del: mutedColor.strikethrough,
+        hr: borderColor,
+        codespan: primaryColor,
+        code: secondaryColor,
+        html: mutedColor,
+        table: fgColor,
+        listitem: fgColor,
+        paragraph: fgColor,
+        tableOptions: {
+            style: { head: ['bold'], border: [] },
+            chars: {
+                'top': '─', 'top-mid': '─', 'top-left': '─', 'top-right': '─',
+                'bottom': '─', 'bottom-mid': '─', 'bottom-left': '─', 'bottom-right': '─',
+                'left': ' ', 'left-mid': ' ', 'mid': '─', 'mid-mid': '─',
+                'right': ' ', 'right-mid': ' ', 'middle': ' ',
+            },
+        },
+    };
+}
+/**
+ * Preprocess markdown before parsing.
+ */
+function preprocessMarkdown(content) {
+    const lines = content.split('\n');
+    return lines.map((line) => {
+        // Normalize bullet lists: "* " -> "- "
+        if (/^\s*\* /.test(line)) {
+            return line.replace(/^(\s*)\* /, '$1- ');
+        }
+        return line;
+    }).join('\n');
+}
+/**
+ * Post-process to catch formatting that markedTerminal missed.
+ * Handles: **bold**, `code`, and **`bold code`** patterns.
+ */
+function postProcessFormatting(text) {
+    const chalk = new Chalk({ level: 3 });
+    const colors = getThemeColors();
+    const primary = chalk.hex(colors.primary);
+    const secondary = chalk.hex(colors.secondary || colors.primary);
+    let result = text;
+    // Handle **`code`** (bold code) - common pattern in tool docs
+    result = result.replace(/\*\*`([^`]+)`\*\*/g, (_match, code) => chalk.bold(primary(code)));
+    // Handle remaining `code` spans
+    result = result.replace(/`([^`]+)`/g, (_match, code) => primary(code));
+    // Handle remaining **bold**
+    result = result.replace(/\*\*([^*]+)\*\*/g, (_match, content) => chalk.bold(content));
+    // Handle $agent references - bold + secondary color
+    // Match $word at word boundaries (not inside other text)
+    result = result.replace(/(?<![$\w])\$([a-zA-Z_][a-zA-Z0-9_]*)\b/g, (_match, agentId) => chalk.bold(secondary(`$${agentId}`)));
+    return result;
+}
 // =============================================================================
 // Markdown Rendering
 // =============================================================================
 /**
- * Render markdown text for terminal display
+ * Render markdown text for terminal display with theme colors.
+ * Uses markedTerminal with theme-aware options.
  */
 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+$/, '');
+        // Preprocess markdown
+        const preprocessed = preprocessMarkdown(text);
+        // Configure marked with theme-aware options
+        const options = getThemedMarkedOptions();
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
+        marked.use(markedTerminal(options));
+        // Parse
+        const rendered = marked.parse(preprocessed, { async: false });
+        // Post-process for any remaining formatting that markedTerminal missed
+        const postProcessed = postProcessFormatting(rendered);
+        // Remove excessive trailing newlines
+        return postProcessed.replace(/\n{3,}/g, '\n\n').replace(/\n+$/, '');
     }
     catch {
         return text; // Fallback to raw text
@@ -117,6 +201,8 @@ export function renderInlineMarkdown(text) {
     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));
+    // Handle $agent references - bold + secondary color
+    result = result.replace(/(?<![$\w])\$([a-zA-Z_][a-zA-Z0-9_]*)\b/g, (_match, agentId) => chalkWithColors.bold(s.secondary(`$${agentId}`)));
     return result;
 }
 // =============================================================================
@@ -132,6 +218,20 @@ export function formatToolResult(result) {
     if (result === null || result === undefined) {
         return '';
     }
+    // DEBUG: Log type to understand what's coming in (uncomment if needed)
+    // console.error(`[DEBUG formatToolResult] type=${typeof result}, isArray=${Array.isArray(result)}, preview=${String(result).slice(0, 100)}`);
+    // Handle JSON strings - parse and format as object
+    if (typeof result === 'string' && (result.startsWith('{') || result.startsWith('['))) {
+        try {
+            const parsed = JSON.parse(result);
+            if (typeof parsed === 'object' && parsed !== null) {
+                return formatToolResult(parsed); // Recursively format the parsed object
+            }
+        }
+        catch {
+            // Not valid JSON, continue with string handling
+        }
+    }
     // String result - count lines or truncate
     if (typeof result === 'string') {
         const allLines = result.split('\n');
@@ -151,8 +251,8 @@ export function formatToolResult(result) {
             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 ? '...' : ''));
+            const singleLine = result.replace(/\n/g, ' ');
+            return s.muted(truncate(singleLine, 80));
         }
     }
     // Array result - show count and type hint
@@ -214,6 +314,40 @@ export function formatToolResult(result) {
             const branches = obj.branches;
             return s.muted(`${String(branches?.length ?? 0)} branches`);
         }
+        // Backlog/workitem pattern - { items: [...], total: N, filtered: N }
+        if ('items' in obj && Array.isArray(obj.items) && 'total' in obj) {
+            const items = obj.items;
+            const total = obj.total;
+            const filtered = 'filtered' in obj ? obj.filtered : items.length;
+            if (items.length === 0) {
+                return s.muted('no items');
+            }
+            if (verbose) {
+                // Verbose mode: show item summaries
+                const lines = [];
+                const maxItems = Math.min(items.length, 10);
+                for (let i = 0; i < maxItems; i++) {
+                    const item = items[i];
+                    const id = item.id || '?';
+                    const title = (item.title || 'Untitled').slice(0, 50);
+                    const status = item.status || '?';
+                    const priority = item.priority ? `[${item.priority}]` : '';
+                    lines.push(`  ${id}: ${title} (${status}) ${priority}`);
+                }
+                if (items.length > maxItems) {
+                    lines.push(`  ... and ${String(items.length - maxItems)} more`);
+                }
+                const summary = filtered < total
+                    ? `${String(filtered)} of ${String(total)} items:`
+                    : `${String(total)} items:`;
+                return s.muted(summary + '\n' + lines.join('\n'));
+            }
+            // Non-verbose: show count summary
+            const summary = filtered < total
+                ? `${String(filtered)} of ${String(total)} items`
+                : `${String(total)} items`;
+            return s.muted(summary);
+        }
         // File read pattern
         if ('content' in obj) {
             const content = String(obj.content);
@@ -281,28 +415,122 @@ export function formatToolResult(result) {
     return s.muted(resultStr.slice(0, 60));
 }
 // =============================================================================
-// Message Printing
+// Message Formatting (return string[] for TerminalRenderer)
+// =============================================================================
+/**
+ * Format user message for display
+ * Returns: [primary "❯ " + message content, ""]
+ */
+export function formatUserMessage(content) {
+    const s = getStyles();
+    return [s.primary('❯ ') + content, ''];
+}
+/**
+ * Format assistant message for display
+ * Renders markdown (code blocks, bold, etc.)
+ */
+export function formatAssistantMessage(content) {
+    if (!content.trim())
+        return [];
+    const s = getStyles();
+    const lines = [];
+    lines.push(s.success('Agent: '));
+    lines.push(renderMarkdown(content));
+    lines.push('');
+    return lines;
+}
+/**
+ * Format assistant response (event-based rendering)
+ * Used when text is accumulated between tool calls.
+ */
+export function formatAssistantResponse(content) {
+    if (!content.trim())
+        return [];
+    const s = getStyles();
+    const rendered = renderInlineMarkdown(content);
+    return [s.primary('● ') + rendered];
+}
+/**
+ * Format tool execution for display
+ */
+export function formatToolExecution(name, args, result) {
+    const s = getStyles();
+    const verbose = isVerboseEnabled();
+    const lines = [];
+    let displayArgs = args;
+    if (args && !verbose && args.length > 60) {
+        displayArgs = truncate(args, 60);
+    }
+    const toolHeader = displayArgs
+        ? s.warning(`● ${name}`) + s.secondary(`(${displayArgs})`)
+        : s.warning(`● ${name}`);
+    lines.push(toolHeader);
+    if (result) {
+        lines.push(s.muted('  ⎿  ') + result);
+    }
+    lines.push('');
+    return lines;
+}
+/**
+ * Format sub-agent completion summary
+ */
+export function formatSubagentResponse(stats) {
+    const s = getStyles();
+    const lines = [];
+    const typeLabel = stats.type.charAt(0).toUpperCase() + stats.type.slice(1);
+    lines.push(s.primary(`● ${typeLabel}(${stats.description})`));
+    const duration = formatDuration(stats.durationMs);
+    const tokens = formatTokens(stats.tokenCount);
+    const toolUses = stats.toolCount === 1 ? '1 tool use' : `${String(stats.toolCount)} tool uses`;
+    const statsLine = `${toolUses} · ${tokens} tokens · ${duration}`;
+    lines.push(s.muted(`  ⎿  Done (${statsLine})`));
+    lines.push('');
+    return lines;
+}
+/**
+ * Format error message
+ */
+export function formatError(message) {
+    const s = getStyles();
+    return [s.error('✖ ') + message, ''];
+}
+/**
+ * Format info message
+ */
+export function formatInfo(message) {
+    const s = getStyles();
+    return [s.muted(message)];
+}
+/**
+ * Format success message
+ */
+export function formatSuccess(message) {
+    const s = getStyles();
+    return [s.success('✔ ') + message, ''];
+}
+/**
+ * Format warning message
+ */
+export function formatWarning(message) {
+    const s = getStyles();
+    return [s.warning('⚠ ') + message, ''];
+}
+// =============================================================================
+// Message Printing (wrappers for backward compatibility)
 // =============================================================================
 /**
  * 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
+    outputLines(formatUserMessage(content));
 }
 /**
  * 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
+    outputLines(formatAssistantMessage(content));
 }
 /**
  * Print assistant response (event-based rendering)
@@ -310,13 +538,7 @@ export function printAssistantMessage(content) {
  * 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);
+    outputLines(formatAssistantResponse(content));
 }
 /**
  * Print tool execution log
@@ -324,75 +546,63 @@ export function printAssistantResponse(content) {
  * 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
+    outputLines(formatToolExecution(tool.name, tool.args, tool.result));
 }
 /**
  * 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);
+    outputLines(formatToolExecution(name, args, result));
+}
+/**
+ * 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`;
     }
-    console.log(''); // Blank line after
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = Math.floor(seconds % 60);
+    return `${String(minutes)}m ${String(remainingSeconds)}s`;
+}
+/**
+ * Print sub-agent completion summary
+ * Format matches the footer's subagent zone when done:
+ *   ● Explore(Find CLI entry points)
+ *     ⎿  Done (6 tool uses · 38.8k tokens · 19s)
+ */
+export function printSubagentResponse(stats) {
+    outputLines(formatSubagentResponse(stats));
 }
 /**
  * Print error message
  * Format: error "✖ " + message
  */
 export function printError(message) {
-    const s = getStyles();
-    console.log(s.error('✖ ') + message);
-    console.log('');
+    outputLines(formatError(message));
 }
 /**
  * Print info message
  * Format: muted text
  */
 export function printInfo(message) {
-    const s = getStyles();
-    console.log(s.muted(message));
+    outputLines(formatInfo(message));
 }
 /**
  * Print success message
  * Format: success "✔ " + message
  */
 export function printSuccess(message) {
-    const s = getStyles();
-    console.log(s.success('✔ ') + message);
+    outputLines(formatSuccess(message));
 }
 /**
  * Print warning message
  * Format: warning "⚠ " + message
  */
 export function printWarning(message) {
-    const s = getStyles();
-    console.log(s.warning('⚠ ') + message);
+    outputLines(formatWarning(message));
 }
 // =============================================================================
 // Welcome Banner
@@ -400,43 +610,34 @@ export function printWarning(message) {
 /**
  * Print just the ASCII logo (for startup before full welcome)
  */
-export function printLogo(version) {
-    const s = getStyles();
+export function printLogo(version, projectName) {
     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('');
+    outputLine('');
+    // Get mascot setting and render mascot + logo
+    const mascotSetting = getMascotSetting();
+    const lines = renderMascotWithLogo(mascotSetting, version, projectName);
+    outputLines(lines);
+    outputLine('');
 }
 /**
  * Print welcome banner with ASCII logo and contextual guidance
  */
-export function printWelcome(model, version) {
+export function printWelcome(model, version, projectName) {
     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('');
+    outputLine('');
+    // Get mascot setting and render mascot + logo
+    const mascotSetting = getMascotSetting();
+    const lines = renderMascotWithLogo(mascotSetting, version, projectName);
+    outputLines(lines);
+    outputLine('');
+    outputLine(s.muted(`Model: ${model}`));
+    outputLine('');
     // 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('');
+    outputLine(s.muted('Type /help for commands, /exit to quit'));
+    outputLine('');
 }
 /**
  * Print workflow guidance based on project status
@@ -446,28 +647,34 @@ function printWorkflowGuidance(status, stage) {
     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('');
+            outputLines([
+                s.muted('Get started:'),
+                s.muted('  /new      ') + s.secondary('Create project structure'),
+                s.muted('  /sketch    ') + s.secondary('Quick 6-question outline'),
+                s.muted('  /tutorial  ') + s.secondary('Learn the workflow'),
+                '',
+            ]);
             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('');
+                outputLines([
+                    s.muted(`Detected ${status.projectType || 'existing'} project. Define requirements:`),
+                    s.muted('  /design    ') + s.secondary('Agent-driven requirements'),
+                    s.muted('  /sketch    ') + s.secondary('Quick project outline'),
+                    s.muted('  /tutorial  ') + s.secondary('Learn the workflow'),
+                    '',
+                ]);
             }
             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('');
+            outputLines([
+                s.muted('Project initialized. Create your backlog:'),
+                s.muted('  /design    ') + s.secondary('Refine requirements'),
+                s.muted('  /backlog   ') + s.secondary('View/manage tasks'),
+                '',
+            ]);
             break;
         case 'building':
             // Has backlog with pending items
@@ -476,20 +683,24 @@ function printWorkflowGuidance(status, stage) {
                 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('');
+                outputLines([
+                    s.muted(`Backlog: ${taskInfo}`),
+                    s.muted('  /backlog            ') + s.secondary('View tasks'),
+                    s.muted('  "build next item"   ') + s.secondary('Start working'),
+                    '',
+                ]);
             }
             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('');
+                outputLines([
+                    s.muted(`Backlog: ${String(completed)}/${String(total)} completed`),
+                    s.muted('  /backlog   ') + s.secondary('View tasks'),
+                    s.muted('  /refine    ') + s.secondary('Add new requirements'),
+                    '',
+                ]);
             }
             break;
     }
@@ -503,6 +714,6 @@ function printWorkflowGuidance(status, stage) {
  */
 export function formatPendingMessage(content) {
     const s = getStyles();
-    const truncated = content.length > 60 ? content.slice(0, 57) + '...' : content;
+    const truncated = truncate(content, 60);
     return s.muted('⏳ ') + s.muted(truncated);
 }