erosolar-cli 1.7.410 → 1.7.411

package/dist/ui/display.js

@@ -1,9 +1,11 @@
 import { createSpinner } from 'nanospinner';
 import { clearScreenDown, cursorTo } from 'node:readline';
 import { theme, icons } from './theme.js';
+import { formatRichContent, renderMessagePanel, renderMessageBody } from './richText.js';
 import { getTerminalColumns } from './layout.js';
 import { highlightError } from './textHighlighter.js';
 import { renderSectionHeading } from './designSystem.js';
+import { isPlainOutputMode } from './outputMode.js';
 import { writeLock } from './writeLock.js';
 import { renderStatusLine } from './unified/layout.js';
 import { isStreamingMode } from './globalWriteLock.js';
@@ -147,8 +149,11 @@ const DISPLAY_CONSTANTS = {
     MIN_MESSAGE_WIDTH: 42,
     MAX_MESSAGE_WIDTH: 110,
     MESSAGE_PADDING: 4,
+    MIN_ACTION_WIDTH: 40,
+    MAX_ACTION_WIDTH: 90,
     MIN_THOUGHT_WIDTH: 48,
     MAX_THOUGHT_WIDTH: 96,
+    MIN_CONTENT_WIDTH: 10,
     MIN_WRAP_WIDTH: 12,
     SPINNER_INTERVAL: 80,
 };
@@ -161,7 +166,7 @@ const SPINNER_FRAMES = ['✻', '◐', '✻', '◓', '✻', '◑', '✻', '◒'];
  * Architecture:
  * - Per-stream line tracking via StdoutLineTracker for consistent banner updates
  * - Output interceptor pattern for live update integration
- * - Banner state management for streamed updates
+ * - Banner state management for in-place updates
  * - Configurable width constraints via DISPLAY_CONSTANTS
  *
  * Claude Code Style Formatting:
@@ -195,8 +200,6 @@ export class Display {
     thinkingElapsedTimer = null;
     thinkingBaseMessage = 'Thinking...';
     pendingCarriageReturn = false;
-    captureStack = [];
-    mutedOutput = false;
     // Streaming status line (Claude Code style - fixed at bottom using scroll region)
     streamingStatusVisible = false;
     scrollRegionActive = false;
@@ -259,68 +262,10 @@ export class Display {
             interceptors[index]?.afterWrite?.(content);
         }
     }
-    /**
-     * Capture all display output emitted during the provided function while optionally
-     * silencing writes to the terminal. Supports nesting by appending captured output
-     * to the parent buffer when present.
-     */
-    async captureOutput(fn, options = {}) {
-        const scope = {
-            buffer: [],
-            includeStreaming: options.includeStreaming ?? true,
-            suppressTypes: new Set(options.suppressTypes ?? []),
-        };
-        this.captureStack.push(scope);
-        let output = '';
-        const previousMute = this.mutedOutput;
-        if (options.silenceOutput) {
-            this.mutedOutput = true;
-        }
-        try {
-            const result = await fn();
-            output = scope.buffer.join('');
-            return { output, result };
-        }
-        catch (error) {
-            output = scope.buffer.join('');
-            if (error && typeof error === 'object') {
-                error.capturedOutput = output;
-            }
-            throw error;
-        }
-        finally {
-            this.captureStack.pop();
-            this.mutedOutput = previousMute;
-            if (output && this.captureStack.length > 0) {
-                this.captureStack[this.captureStack.length - 1].buffer.push(output);
-            }
-        }
-    }
-    appendToCapture(content, type) {
-        if (!content || this.captureStack.length === 0) {
-            return;
-        }
-        for (const scope of this.captureStack) {
-            if (type === 'stream' && !scope.includeStreaming) {
-                continue;
-            }
-            scope.buffer.push(content);
-        }
-    }
-    shouldSuppressOutput(type) {
-        if (this.mutedOutput) {
-            return true;
-        }
-        return this.captureStack.some((scope) => scope.suppressTypes.has(type));
-    }
     write(value, target = this.outputStream) {
         // Write directly - this method is called from within locked contexts
         // like withOutput(), so we don't need additional locking here.
         // The globalWriteLock wrapper will handle coordination if needed.
-        this.appendToCapture(value, 'normal');
-        if (this.shouldSuppressOutput('normal')) {
-            return;
-        }
         try {
             target.write(value);
         }
@@ -347,24 +292,33 @@ export class Display {
         if (!normalized) {
             return;
         }
-        this.appendToCapture(normalized, 'stream');
-        if (this.shouldSuppressOutput('stream')) {
+        // During streaming, use withLock to prevent interleaving with escape codes.
+        // This ensures the before/write/after sequence is atomic.
+        if (isStreamingMode()) {
+            writeLock.withLock(() => {
+                this.notifyBeforeOutput();
+                try {
+                    this.outputStream.write(normalized);
+                }
+                catch {
+                    // Ignore write failures to keep UI resilient
+                }
+                finally {
+                    this.notifyAfterOutput(normalized);
+                }
+            }, 'display.writeRaw.streaming');
             return;
         }
-        const writeStreamChunk = () => {
+        // Outside streaming mode, use locks to coordinate with other UI
+        writeLock.withLock(() => {
             this.notifyBeforeOutput();
             try {
-                this.outputStream.write(normalized);
-            }
-            catch {
-                // Ignore write failures to keep UI resilient
+                this.write(normalized);
             }
             finally {
                 this.notifyAfterOutput(normalized);
             }
-        };
-        // Use locks in both streaming and non-streaming modes to keep output atomic
-        writeLock.withLock(writeStreamChunk, isStreamingMode() ? 'display.writeRaw.streaming' : 'display.writeRaw');
+        }, 'display.writeRaw');
     }
     /**
      * Normalize streaming chunks so progress-style carriage returns render cleanly.
@@ -455,9 +409,6 @@ export class Display {
     }
     // Banner is now streamed by the shell - no storage needed
     showThinking(message = 'Thinking…') {
-        if (this.shouldSuppressOutput('normal')) {
-            return;
-        }
         // If we already have a spinner, just update its text instead of creating a new one
         if (this.activeSpinner) {
             this.thinkingBaseMessage = message;
@@ -558,9 +509,6 @@ export class Display {
      * This allows content to scroll while status stays fixed.
      */
     setupScrollRegion() {
-        if (this.shouldSuppressOutput('normal')) {
-            return;
-        }
         if (this.scrollRegionActive || !this.isTTY()) {
             return;
         }
@@ -577,9 +525,6 @@ export class Display {
      * Tear down scroll region and restore normal terminal.
      */
     teardownScrollRegion() {
-        if (this.shouldSuppressOutput('normal')) {
-            return;
-        }
         if (!this.scrollRegionActive) {
             return;
         }
@@ -683,43 +628,134 @@ export class Display {
             });
         }
     }
-    showSystemMessage(content) {
+    showAssistantMessage(content, metadata) {
+        if (!content.trim()) {
+            return;
+        }
         this.clearSpinnerIfActive();
+        const isThought = metadata?.isFinal === false;
+        const body = isThought ? this.buildClaudeStyleThought(content) : this.buildChatBox(content, metadata);
+        if (!body.trim()) {
+            return;
+        }
         this.withOutput(() => {
-            this.writeLine(content.trim());
+            this.writeLine(); // Ensure clean start for the box
+            this.writeLine(body);
             this.writeLine();
         });
     }
-    showError(message, error) {
+    showNarrative(content) {
+        if (!content.trim()) {
+            return;
+        }
+        this.showAssistantMessage(content, { isFinal: false });
+    }
+    showAction(text, status = 'info') {
+        if (!text.trim()) {
+            return;
+        }
         this.clearSpinnerIfActive();
-        const details = this.formatErrorDetails(error);
+        // Claude Code style: always use ⏺ prefix for actions
+        const icon = this.formatActionIcon(status);
         this.withOutput(() => {
-            this.writeLine(`${theme.error('✗')} ${message}`, this.errorStream);
-            if (details) {
-                this.writeLine(`  ${details}`, this.errorStream);
-            }
+            this.writeLine(this.wrapWithPrefix(text, `${icon} `));
         });
     }
-    showWarning(message) {
+    showSubAction(text, status = 'info') {
+        if (!text.trim()) {
+            return;
+        }
         this.clearSpinnerIfActive();
+        const prefersRich = text.includes('```');
+        let rendered = prefersRich ? this.buildRichSubActionLines(text, status) : this.buildWrappedSubActionLines(text, status);
+        if (!rendered.length && prefersRich) {
+            rendered = this.buildWrappedSubActionLines(text, status);
+        }
+        if (!rendered.length) {
+            return;
+        }
         this.withOutput(() => {
-            this.writeLine(`${theme.warning('!')} ${message}`, this.errorStream);
+            this.writeLine(rendered.join('\n'));
+            this.writeLine();
         });
     }
+    buildWrappedSubActionLines(text, status) {
+        const lines = text.split('\n').map((line) => line.trimEnd());
+        while (lines.length && !lines[lines.length - 1]?.trim()) {
+            lines.pop();
+        }
+        if (!lines.length) {
+            return [];
+        }
+        const rendered = [];
+        for (let index = 0; index < lines.length; index += 1) {
+            const segment = lines[index] ?? '';
+            const isLast = index === lines.length - 1;
+            const { prefix, continuation } = this.buildSubActionPrefixes(status, isLast);
+            rendered.push(this.wrapWithPrefix(segment, prefix, { continuationPrefix: continuation }));
+        }
+        return rendered;
+    }
+    buildRichSubActionLines(text, status) {
+        const normalized = text.trim();
+        if (!normalized) {
+            return [];
+        }
+        const width = Math.max(DISPLAY_CONSTANTS.MIN_ACTION_WIDTH, Math.min(this.getColumnWidth(), DISPLAY_CONSTANTS.MAX_ACTION_WIDTH));
+        const samplePrefix = this.buildSubActionPrefixes(status, true).prefix;
+        const contentWidth = Math.max(DISPLAY_CONSTANTS.MIN_CONTENT_WIDTH, width - this.visibleLength(samplePrefix));
+        const blocks = formatRichContent(normalized, contentWidth);
+        if (!blocks.length) {
+            return [];
+        }
+        return blocks.map((line, index) => {
+            const isLast = index === blocks.length - 1;
+            const { prefix } = this.buildSubActionPrefixes(status, isLast);
+            if (!line.trim()) {
+                return prefix.trimEnd();
+            }
+            return `${prefix}${line}`;
+        });
+    }
+    showMessage(content, role = 'assistant') {
+        if (role === 'system') {
+            this.showSystemMessage(content);
+        }
+        else {
+            this.showAssistantMessage(content);
+        }
+    }
+    showSystemMessage(content) {
+        this.clearSpinnerIfActive();
+        const normalized = content.trim();
+        if (!normalized) {
+            return;
+        }
+        this.stream(`${normalized}\n\n`);
+    }
+    showError(message, error) {
+        this.clearSpinnerIfActive();
+        const details = this.formatErrorDetails(error);
+        const parts = [`${theme.error('✗')} ${message}`];
+        if (details) {
+            parts.push(`  ${details}`);
+        }
+        this.stream(`${parts.join('\n')}\n`);
+    }
+    showWarning(message) {
+        this.clearSpinnerIfActive();
+        this.stream(`${theme.warning('!')} ${message}\n`);
+    }
     showInfo(message) {
         this.clearSpinnerIfActive();
-        this.withOutput(() => {
-            this.writeLine(`${theme.info('ℹ')} ${message}`);
-        });
+        this.stream(`${theme.info('ℹ')} ${message}\n`);
     }
     /**
      * Show a success message with simple styling
      */
     showSuccess(message) {
         this.clearSpinnerIfActive();
-        this.withOutput(() => {
-            this.writeLine(`${theme.success('✓')} ${message}`);
-        });
+        this.stream(`${theme.success('✓')} ${message}\n`);
     }
     /**
      * Show a stylish progress indicator for long operations
@@ -793,6 +829,13 @@ export class Display {
         }
         // Claude Code style: don't show providers on startup, keep it minimal
     }
+    /**
+     * Show unified status bar - Claude Code style (minimal)
+     * Note: No-op - status is shown in mode controls line
+     */
+    showUnifiedStatusBar(_providers) {
+        // No-op - banner is streamed as content, status shown in control bar
+    }
     /**
      * Show streaming header - no-op, banner is streamed as content
      */
@@ -864,6 +907,11 @@ export class Display {
         this.stdoutTracker.reset();
         // Banner is streamed content - no re-render on clear
     }
+    newLine() {
+        this.withOutput(() => {
+            this.writeLine();
+        });
+    }
     // Legacy banner methods removed - banner is streamed as content by the shell
     formatModelLabel(model) {
         if (/gpt-5\.1-?codex/i.test(model)) {
@@ -905,6 +953,51 @@ export class Display {
         }
         return `${parts[0]}/.../${parts[parts.length - 1]}`;
     }
+    buildChatBox(content, metadata) {
+        const normalized = content.trim();
+        if (!normalized) {
+            return '';
+        }
+        if (isPlainOutputMode()) {
+            const body = renderMessageBody(normalized, this.resolveMessageWidth());
+            const telemetry = this.formatTelemetryLine(metadata);
+            return telemetry ? `${body}\n${telemetry}` : body;
+        }
+        const width = this.resolveMessageWidth();
+        const panel = renderMessagePanel(normalized, {
+            width,
+            title: 'Assistant',
+            icon: icons.assistant,
+            accentColor: theme.assistant ?? theme.primary,
+            borderColor: theme.ui.border,
+        });
+        const telemetry = this.formatTelemetryLine(metadata);
+        if (!telemetry) {
+            return panel;
+        }
+        return `${panel}\n${telemetry}`;
+    }
+    resolveMessageWidth() {
+        const columns = this.getColumnWidth();
+        return Math.max(DISPLAY_CONSTANTS.MIN_MESSAGE_WIDTH, Math.min(columns - DISPLAY_CONSTANTS.MESSAGE_PADDING, DISPLAY_CONSTANTS.MAX_MESSAGE_WIDTH));
+    }
+    formatTelemetryLine(metadata) {
+        if (!metadata) {
+            return '';
+        }
+        const parts = [];
+        const elapsed = this.formatElapsed(metadata.elapsedMs);
+        if (elapsed) {
+            const elapsedLabel = theme.metrics?.elapsedLabel ?? theme.accent;
+            const elapsedValue = theme.metrics?.elapsedValue ?? theme.secondary;
+            parts.push(`${elapsedLabel('elapsed')} ${elapsedValue(elapsed)}`);
+        }
+        if (!parts.length) {
+            return '';
+        }
+        const separator = theme.ui.muted(' • ');
+        return `  ${parts.join(separator)}`;
+    }
     formatElapsed(elapsedMs) {
         if (typeof elapsedMs !== 'number' || !Number.isFinite(elapsedMs) || elapsedMs < 0) {
             return null;
@@ -1008,6 +1101,128 @@ export class Display {
                 return theme.ui.muted(text);
         }
     }
+    /**
+     * Wraps text with a prefix on the first line and optional continuation prefix.
+     * Handles multi-line text and word wrapping intelligently.
+     */
+    wrapWithPrefix(text, prefix, options) {
+        if (!text) {
+            return prefix.trimEnd();
+        }
+        const width = Math.max(DISPLAY_CONSTANTS.MIN_ACTION_WIDTH, Math.min(this.getColumnWidth(), DISPLAY_CONSTANTS.MAX_ACTION_WIDTH));
+        const prefixWidth = this.visibleLength(prefix);
+        const available = Math.max(DISPLAY_CONSTANTS.MIN_CONTENT_WIDTH, width - prefixWidth);
+        const indent = typeof options?.continuationPrefix === 'string'
+            ? options.continuationPrefix
+            : ' '.repeat(Math.max(0, prefixWidth));
+        const segments = text.split('\n');
+        const lines = [];
+        let usedPrefix = false;
+        for (const segment of segments) {
+            if (!segment.trim()) {
+                if (usedPrefix) {
+                    lines.push(indent);
+                }
+                else {
+                    lines.push(prefix.trimEnd());
+                    usedPrefix = true;
+                }
+                continue;
+            }
+            const wrapped = this.wrapLine(segment.trim(), available);
+            for (const line of wrapped) {
+                lines.push(!usedPrefix ? `${prefix}${line}` : `${indent}${line}`);
+                usedPrefix = true;
+            }
+        }
+        return lines.join('\n');
+    }
+    resolveStatusColor(status) {
+        switch (status) {
+            case 'success':
+                return theme.success;
+            case 'error':
+                return theme.error;
+            case 'warning':
+                return theme.warning;
+            case 'pending':
+                return theme.info;
+            default:
+                return theme.secondary;
+        }
+    }
+    formatActionIcon(status) {
+        const colorize = this.resolveStatusColor(status);
+        return colorize(`${icons.action}`);
+    }
+    buildClaudeStyleThought(content, durationMs) {
+        // Claude Code style: ∴ Thought for Xs or ✻ Thinking…
+        const thinkingStyle = theme.thinking || {
+            icon: theme.info,
+            text: theme.ui.muted,
+            border: theme.ui.border,
+            label: theme.info,
+        };
+        const width = Math.min(this.getColumnWidth() - 4, 70);
+        const lines = [];
+        // Header: "∴ Thought for Xs (ctrl+o to show thinking)" for completed, "✻ Thinking…" for active
+        if (durationMs !== undefined) {
+            const elapsed = this.formatElapsedTime(Math.floor(durationMs / 1000));
+            const expandHint = theme.ui.muted('(ctrl+o to show thinking)');
+            lines.push(`${theme.info('∴')} Thought for ${elapsed} ${expandHint}`);
+        }
+        else {
+            lines.push(`${theme.info('✻')} ${thinkingStyle.label('Thinking…')}`);
+        }
+        // Parse and format the thinking content with simple indentation
+        const contentLines = content.split('\n');
+        const hasContent = contentLines.some(line => line.trim().length > 0);
+        if (hasContent) {
+            lines.push(''); // Visual gap between header and content
+        }
+        for (const line of contentLines) {
+            const trimmed = line.replace(/\s+$/, '');
+            if (!trimmed.trim()) {
+                lines.push(''); // Preserve intentional blank lines inside the block
+                continue;
+            }
+            const wrapped = this.wrapLine(trimmed, width - 4);
+            for (const wrappedLine of wrapped) {
+                lines.push(`  ${thinkingStyle.text(wrappedLine)}`);
+            }
+        }
+        return lines.join('\n');
+    }
+    /**
+     * Show a thinking block with rich formatting (public method for external use)
+     * @param content The thinking content to display
+     * @param durationMs Optional duration in milliseconds to show "Thought for Xs"
+     */
+    showThinkingBlock(content, durationMs) {
+        this.clearSpinnerIfActive();
+        const block = this.buildClaudeStyleThought(content, durationMs);
+        this.withOutput(() => {
+            this.writeLine();
+            this.writeLine(block);
+            this.writeLine();
+            this.writeLine(); // Extra newline for better visual separation
+        });
+    }
+    buildSubActionPrefixes(status, isLast) {
+        if (isLast) {
+            const colorize = this.resolveStatusColor(status);
+            // Claude Code style: use ⎿ for sub-action result/detail prefix
+            return {
+                prefix: `  ${colorize(icons.subaction)} `,
+                continuation: '    ',
+            };
+        }
+        const branch = theme.ui.muted('│');
+        return {
+            prefix: `  ${branch} `,
+            continuation: `  ${branch} `,
+        };
+    }
     /**
      * Wraps a single line of text to fit within the specified width.
      * Intelligently handles word breaking and preserves spaces.