erosolar-cli 1.7.415 → 1.7.416

package/dist/ui/display.js

@@ -0,0 +1,1328 @@
+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';
+/**
+ * Output lock to prevent race conditions during spinner/stream output.
+ * Ensures that spinner frames don't interleave with streamed content.
+ * Uses a simple lock mechanism suitable for Node.js single-threaded event loop.
+ */
+class OutputLock {
+    static instance = null;
+    locked = false;
+    pendingCallbacks = [];
+    static getInstance() {
+        if (!OutputLock.instance) {
+            OutputLock.instance = new OutputLock();
+        }
+        return OutputLock.instance;
+    }
+    /**
+     * Synchronously check if output is locked (spinner is active).
+     * Used to prevent stream writes during spinner animation.
+     */
+    isLocked() {
+        return this.locked;
+    }
+    /**
+     * Lock output during spinner animation.
+     */
+    lock() {
+        this.locked = true;
+    }
+    /**
+     * Unlock output and process any pending callbacks.
+     */
+    unlock() {
+        this.locked = false;
+        // Process any pending writes
+        while (this.pendingCallbacks.length > 0) {
+            const callback = this.pendingCallbacks.shift();
+            if (callback) {
+                callback();
+            }
+        }
+    }
+    /**
+     * Execute a callback safely, queueing if output is locked.
+     */
+    safeWrite(callback) {
+        if (this.locked) {
+            this.pendingCallbacks.push(callback);
+            return;
+        }
+        callback();
+    }
+}
+/**
+ * Tracks line output to stdout for banner rewriting and cursor positioning.
+ * Instances are cached per stream to keep banner calculations consistent.
+ */
+class StdoutLineTracker {
+    static instances = new WeakMap();
+    static getInstance(stream = process.stdout) {
+        const existing = StdoutLineTracker.instances.get(stream);
+        if (existing) {
+            return existing;
+        }
+        const tracker = new StdoutLineTracker(stream);
+        StdoutLineTracker.instances.set(stream, tracker);
+        return tracker;
+    }
+    linesWritten = 0;
+    suspended = false;
+    stream;
+    originalWrite;
+    constructor(stream) {
+        this.stream = stream;
+        this.originalWrite = stream.write.bind(stream);
+        this.patchStream();
+    }
+    get totalLines() {
+        return this.linesWritten;
+    }
+    /**
+     * Temporarily suspends line tracking while executing a function.
+     * Useful for rewriting content without incrementing line count.
+     */
+    withSuspended(fn) {
+        const wasSuspended = this.suspended;
+        this.suspended = true;
+        try {
+            return fn();
+        }
+        finally {
+            this.suspended = wasSuspended;
+        }
+    }
+    reset() {
+        this.linesWritten = 0;
+    }
+    patchStream() {
+        const tracker = this;
+        this.stream.write = function patched(chunk, encoding, callback) {
+            const actualEncoding = typeof encoding === 'function' ? undefined : encoding;
+            tracker.recordChunk(chunk, actualEncoding);
+            return tracker.originalWrite.call(this, chunk, encoding, callback);
+        };
+    }
+    recordChunk(chunk, encoding) {
+        if (this.suspended) {
+            return;
+        }
+        const text = this.chunkToString(chunk, encoding);
+        if (!text) {
+            return;
+        }
+        this.countNewlines(text);
+    }
+    countNewlines(text) {
+        for (const char of text) {
+            if (char === '\n') {
+                this.linesWritten += 1;
+            }
+        }
+    }
+    chunkToString(chunk, encoding) {
+        if (typeof chunk === 'string') {
+            return chunk;
+        }
+        if (chunk instanceof Uint8Array) {
+            const enc = encoding ?? 'utf8';
+            return Buffer.from(chunk).toString(enc);
+        }
+        return null;
+    }
+}
+// Display configuration constants
+const DISPLAY_CONSTANTS = {
+    MIN_BANNER_WIDTH: 32,
+    MAX_BANNER_WIDTH: 120,
+    BANNER_PADDING: 4,
+    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,
+};
+// Claude Code style spinner frames: ✻ as primary thinking indicator
+// Alternates between ✻ and ◐ for visual interest
+const SPINNER_FRAMES = ['✻', '◐', '✻', '◓', '✻', '◑', '✻', '◒'];
+/**
+ * Display class manages all terminal UI output for the application.
+ *
+ * Architecture:
+ * - Per-stream line tracking via StdoutLineTracker for consistent banner updates
+ * - Output interceptor pattern for live update integration
+ * - Banner state management for in-place updates
+ * - Configurable width constraints via DISPLAY_CONSTANTS
+ *
+ * Claude Code Style Formatting:
+ * - ⏺ prefix for tool calls, actions, and thinking/reasoning
+ * - ⎿ prefix for results, details, and nested information
+ * - ─ horizontal separators for dividing sections (edit diffs, etc.)
+ * - > prefix for user prompts (handled in theme.ts formatUserPrompt)
+ * - Compact epsilon spinner: ∴, ε, ✻
+ *
+ * Key responsibilities:
+ * - Welcome banners and session information display
+ * - Message formatting (assistant, system, errors, warnings)
+ * - Spinner/thinking indicators
+ * - Action and sub-action formatting with tree-style prefixes
+ * - Text wrapping and layout management
+ *
+ * Error handling:
+ * - Graceful degradation for non-TTY environments
+ * - Input validation on public methods
+ * - Safe cursor manipulation with fallback
+ */
+export class Display {
+    stdoutTracker;
+    outputStream;
+    errorStream;
+    activeSpinner = null;
+    outputInterceptors = new Set();
+    outputLock = OutputLock.getInstance();
+    spinnerFrames = [...SPINNER_FRAMES];
+    thinkingStartTime = null;
+    thinkingElapsedTimer = null;
+    thinkingBaseMessage = 'Thinking...';
+    pendingCarriageReturn = false;
+    // Streaming status line (Claude Code style - fixed at bottom using scroll region)
+    streamingStatusVisible = false;
+    scrollRegionActive = false;
+    savedCursorRow = 0;
+    constructor(stream = process.stdout, errorStream) {
+        this.outputStream = stream;
+        this.errorStream = errorStream ?? stream;
+        this.stdoutTracker = StdoutLineTracker.getInstance(stream);
+    }
+    registerOutputInterceptor(interceptor) {
+        if (!interceptor) {
+            return () => { };
+        }
+        this.outputInterceptors.add(interceptor);
+        return () => {
+            this.outputInterceptors.delete(interceptor);
+        };
+    }
+    /**
+     * Execute output with proper write lock coordination.
+     * All display output goes through this method to prevent race conditions.
+     *
+     * Behavior:
+     * - If write lock is already held, execute directly (we're in a protected context)
+     * - Otherwise acquire lock during output to prevent interleaving
+     * - Notifies interceptors before/after output for cursor positioning
+     */
+    withOutput(fn) {
+        // If lock is already held, execute directly - we're in a protected context
+        // This prevents queuing issues where content gets delayed
+        if (writeLock.isLocked()) {
+            this.notifyBeforeOutput();
+            try {
+                fn();
+            }
+            finally {
+                this.notifyAfterOutput();
+            }
+            return;
+        }
+        // Acquire lock during output to prevent interleaved writes
+        writeLock.withLock(() => {
+            this.notifyBeforeOutput();
+            try {
+                fn();
+            }
+            finally {
+                this.notifyAfterOutput();
+            }
+        }, 'display.withOutput');
+    }
+    notifyBeforeOutput() {
+        for (const interceptor of this.outputInterceptors) {
+            interceptor.beforeWrite?.();
+        }
+    }
+    notifyAfterOutput(content) {
+        const interceptors = Array.from(this.outputInterceptors);
+        for (let index = interceptors.length - 1; index >= 0; index -= 1) {
+            interceptors[index]?.afterWrite?.(content);
+        }
+    }
+    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.
+        try {
+            target.write(value);
+        }
+        catch {
+            // Ignore write failures to keep UI resilient
+        }
+    }
+    writeLine(value = '', target = this.outputStream) {
+        this.write(`${value}\n`, target);
+    }
+    /**
+     * Write raw content directly to output stream.
+     * For streaming output chunks - writes directly without locks during streaming mode.
+     *
+     * During streaming mode, content is written directly to stdout without any
+     * lock coordination. This ensures streaming content flows smoothly without
+     * being delayed by other UI components.
+     */
+    writeRaw(content) {
+        if (typeof content !== 'string' || !content) {
+            return;
+        }
+        const normalized = this.normalizeStreamingContent(content);
+        if (!normalized) {
+            return;
+        }
+        // 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;
+        }
+        // Outside streaming mode, use locks to coordinate with other UI
+        writeLock.withLock(() => {
+            this.notifyBeforeOutput();
+            try {
+                this.write(normalized);
+            }
+            finally {
+                this.notifyAfterOutput(normalized);
+            }
+        }, 'display.writeRaw');
+    }
+    /**
+     * Normalize streaming chunks so progress-style carriage returns render cleanly.
+     * - Preserve CR-based rewrites instead of converting to newlines
+     * - Clear lines when rewriting to avoid leftover characters
+     * - Carry trailing CR across chunks so the next write can clear before drawing
+     */
+    normalizeStreamingContent(content) {
+        // Normalize CRLF first
+        let text = content.replace(/\r\n/g, '\n');
+        let result = '';
+        // If the previous chunk ended with a bare CR, clear the line before new text
+        if (this.pendingCarriageReturn) {
+            if (text.length === 0) {
+                return '';
+            }
+            if (text[0] !== '\n') {
+                result += '\r\x1b[K';
+            }
+            this.pendingCarriageReturn = false;
+        }
+        let trailingCarriageReturn = false;
+        for (let i = 0; i < text.length; i++) {
+            const char = text[i];
+            if (char === '\r') {
+                const next = text[i + 1];
+                if (next === '\n') {
+                    // CRLF already normalized above; skip CR
+                    continue;
+                }
+                const isLastChar = i === text.length - 1;
+                if (isLastChar) {
+                    // Trailing CR: keep it so cursor is at column 0, but delay clearing
+                    result += '\r';
+                    trailingCarriageReturn = true;
+                }
+                else {
+                    // In-place update: move to start and clear the line before new text
+                    result += '\r\x1b[K';
+                }
+                continue;
+            }
+            result += char;
+        }
+        this.pendingCarriageReturn = trailingCarriageReturn;
+        return result;
+    }
+    /**
+     * Stream chunk helper - writes directly to stdout during streaming.
+     * This is the primary method for streaming AI responses.
+     */
+    stream(chunk) {
+        this.writeRaw(chunk);
+    }
+    /**
+     * Backward-compatible alias for stream().
+     */
+    writeStreamChunk(chunk) {
+        this.stream(chunk);
+    }
+    /**
+     * Get the output stream for direct access.
+     * Prefer writeRaw/writeStreamChunk for interceptor support.
+     */
+    getOutputStream() {
+        return this.outputStream;
+    }
+    /**
+     * Current number of lines written to stdout (tracked for positioning).
+     */
+    getTotalWrittenLines() {
+        return this.stdoutTracker.totalLines;
+    }
+    /**
+     * Number of lines at the top of the terminal that belong to the pinned banner.
+     * For integrated scroll-region layouts, banners are not pinned, so this is 0.
+     */
+    getPinnedHeaderLines() {
+        return 0;
+    }
+    getColumnWidth() {
+        if (typeof this.outputStream.columns === 'number' &&
+            Number.isFinite(this.outputStream.columns) &&
+            this.outputStream.columns > 0) {
+            return this.outputStream.columns;
+        }
+        return getTerminalColumns();
+    }
+    // Banner is now streamed by the shell - no storage needed
+    showThinking(message = 'Thinking…') {
+        // If we already have a spinner, just update its text instead of creating a new one
+        if (this.activeSpinner) {
+            this.thinkingBaseMessage = message;
+            this.activeSpinner.update({ text: message });
+            return;
+        }
+        // Lock output to prevent stream writes from interleaving with spinner frames
+        this.outputLock.lock();
+        // Track when thinking started for elapsed time display
+        this.thinkingStartTime = Date.now();
+        this.thinkingBaseMessage = message;
+        // Use Claude Code style spinner with ✻ as primary thinking indicator
+        this.activeSpinner = createSpinner(message, {
+            stream: this.outputStream,
+            spinner: {
+                interval: DISPLAY_CONSTANTS.SPINNER_INTERVAL,
+                frames: this.spinnerFrames,
+            },
+        }).start();
+        // Update spinner with elapsed time every second (Claude Code style)
+        this.thinkingElapsedTimer = setInterval(() => {
+            if (this.activeSpinner && this.thinkingStartTime) {
+                const elapsed = Math.floor((Date.now() - this.thinkingStartTime) / 1000);
+                if (elapsed > 0) {
+                    const elapsedText = this.formatElapsedTime(elapsed);
+                    this.activeSpinner.update({ text: `${this.thinkingBaseMessage} ${theme.ui.muted(`(${elapsedText})`)}` });
+                }
+            }
+        }, 1000);
+    }
+    /**
+     * Format elapsed seconds as human-readable time (e.g., "5s", "1m 23s")
+     */
+    formatElapsedTime(seconds) {
+        if (seconds < 60) {
+            return `${seconds}s`;
+        }
+        const mins = Math.floor(seconds / 60);
+        const secs = seconds % 60;
+        return secs > 0 ? `${mins}m ${secs}s` : `${mins}m`;
+    }
+    updateThinking(message) {
+        this.thinkingBaseMessage = message;
+        if (this.activeSpinner) {
+            // If we have elapsed time, include it in the update
+            if (this.thinkingStartTime) {
+                const elapsed = Math.floor((Date.now() - this.thinkingStartTime) / 1000);
+                if (elapsed > 0) {
+                    const elapsedText = this.formatElapsedTime(elapsed);
+                    this.activeSpinner.update({ text: `${message} ${theme.ui.muted(`(${elapsedText})`)}` });
+                    return;
+                }
+            }
+            this.activeSpinner.update({ text: message });
+        }
+        else {
+            this.showThinking(message);
+        }
+    }
+    stopThinking(addNewLine = true) {
+        this.clearSpinnerIfActive(addNewLine);
+    }
+    /**
+     * Get current thinking elapsed time in milliseconds, or null if not thinking.
+     */
+    getThinkingElapsedMs() {
+        if (!this.thinkingStartTime) {
+            return null;
+        }
+        return Date.now() - this.thinkingStartTime;
+    }
+    isSpinnerActive() {
+        return this.activeSpinner !== null;
+    }
+    /**
+     * Check if output is currently locked (e.g., spinner is active).
+     * Used by external callers to coordinate output timing.
+     */
+    isOutputLocked() {
+        return this.outputLock.isLocked();
+    }
+    /**
+     * Execute a write callback safely, ensuring it doesn't interleave with spinner output.
+     * If spinner is active, the write will be queued until spinner stops.
+     */
+    safeWrite(callback) {
+        this.outputLock.safeWrite(callback);
+    }
+    /**
+     * Get terminal rows, with fallback
+     */
+    getTerminalRows() {
+        const stream = this.outputStream;
+        return stream.rows ?? 24;
+    }
+    /**
+     * Set up scroll region to reserve bottom line for status.
+     * This allows content to scroll while status stays fixed.
+     */
+    setupScrollRegion() {
+        if (this.scrollRegionActive || !this.isTTY()) {
+            return;
+        }
+        const rows = this.getTerminalRows();
+        // Reserve bottom 2 lines (separator + status)
+        // Set scroll region from row 1 to row (rows - 2)
+        this.outputStream.write(`\x1b[1;${rows - 2}r`);
+        // Move cursor to end of scroll region
+        this.outputStream.write(`\x1b[${rows - 2};1H`);
+        this.scrollRegionActive = true;
+        this.savedCursorRow = rows - 2;
+    }
+    /**
+     * Tear down scroll region and restore normal terminal.
+     */
+    teardownScrollRegion() {
+        if (!this.scrollRegionActive) {
+            return;
+        }
+        const rows = this.getTerminalRows();
+        // Reset scroll region to full screen
+        this.outputStream.write('\x1b[r');
+        // Clear the status lines at bottom
+        this.outputStream.write(`\x1b[${rows - 1};1H\x1b[2K`);
+        this.outputStream.write(`\x1b[${rows};1H\x1b[2K`);
+        // Move cursor back to where content was
+        this.outputStream.write(`\x1b[${this.savedCursorRow};1H`);
+        this.scrollRegionActive = false;
+        this.streamingStatusVisible = false;
+    }
+    /**
+     * Check if we're in a TTY (can use escape codes)
+     */
+    isTTY() {
+        const stream = this.outputStream;
+        return stream.isTTY === true;
+    }
+    /**
+     * Update the streaming status line (Claude Code style).
+     * When scroll region is active, updates the fixed status area at bottom.
+     * Call with null to clear the status line.
+     * Uses shared writeLock to prevent race conditions with other output.
+     */
+    updateStreamingStatus(status) {
+        // Use shared writeLock to coordinate with terminalInput and streaming output
+        writeLock.withLock(() => {
+            this.updateStreamingStatusInternal(status);
+        }, 'display.updateStreamingStatus');
+    }
+    /**
+     * Internal implementation of updateStreamingStatus (called with lock held)
+     * NOTE: During streaming, we do NOT write status lines to stdout to prevent
+     * race conditions with stream chunks. The status is tracked internally and
+     * the terminalInput's status message display handles showing it in the
+     * reserved input area, separate from the main content stream.
+     */
+    updateStreamingStatusInternal(status) {
+        if (!status) {
+            this.streamingStatusVisible = false;
+            return;
+        }
+        // Just track the status - don't write to stdout during streaming
+        this.streamingStatusVisible = true;
+    }
+    /**
+     * Check if streaming status is currently visible.
+     */
+    isStreamingStatusVisible() {
+        return this.streamingStatusVisible;
+    }
+    /**
+     * Check if scroll region is active.
+     */
+    isScrollRegionActive() {
+        return this.scrollRegionActive;
+    }
+    /**
+     * Clear streaming status and reset state.
+     */
+    clearStreamingStatus() {
+        this.streamingStatusVisible = false;
+    }
+    /**
+     * Display parallel agent status (Claude Code style).
+     * Shows a tree of running agents with their progress.
+     */
+    parallelAgentStatus(content) {
+        if (!content)
+            return;
+        // During streaming, write directly to output
+        this.withOutput(() => {
+            // Clear current line and write agent status
+            this.writeRaw('\r\x1b[K');
+            this.writeLine(content);
+        });
+    }
+    clearSpinnerIfActive(addNewLine = true) {
+        if (!this.activeSpinner) {
+            return;
+        }
+        // Clear the elapsed time update timer
+        if (this.thinkingElapsedTimer) {
+            clearInterval(this.thinkingElapsedTimer);
+            this.thinkingElapsedTimer = null;
+        }
+        this.thinkingStartTime = null;
+        const spinner = this.activeSpinner;
+        this.activeSpinner = null;
+        // Use stop() instead of clear() so nanospinner removes its SIGINT/SIGTERM listeners.
+        // clear() leaves the listeners attached, which triggers MaxListenersExceededWarning over time.
+        spinner.stop();
+        // Unlock output to process any pending writes
+        this.outputLock.unlock();
+        if (addNewLine) {
+            this.withOutput(() => {
+                this.writeLine();
+            });
+        }
+    }
+    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(); // Ensure clean start for the box
+            this.writeLine(body);
+            this.writeLine();
+        });
+    }
+    showNarrative(content) {
+        if (!content.trim()) {
+            return;
+        }
+        this.showAssistantMessage(content, { isFinal: false });
+    }
+    showAction(text, status = 'info') {
+        if (!text.trim()) {
+            return;
+        }
+        this.clearSpinnerIfActive();
+        // Claude Code style: always use ⏺ prefix for actions
+        const icon = this.formatActionIcon(status);
+        this.withOutput(() => {
+            this.writeLine(this.wrapWithPrefix(text, `${icon} `));
+        });
+    }
+    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(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.stream(`${theme.info('ℹ')} ${message}\n`);
+    }
+    /**
+     * Show a success message with simple styling
+     */
+    showSuccess(message) {
+        this.clearSpinnerIfActive();
+        this.stream(`${theme.success('✓')} ${message}\n`);
+    }
+    /**
+     * Show a stylish progress indicator for long operations
+     */
+    showProgressBadge(label, current, total) {
+        const percentage = Math.round((current / total) * 100);
+        const barWidth = 20;
+        const filled = Math.round((current / total) * barWidth);
+        const empty = barWidth - filled;
+        const progressBar = `${'█'.repeat(filled)}${'░'.repeat(empty)}`;
+        const badge = `[${label}] ${progressBar} ${percentage}%`;
+        this.withOutput(() => {
+            this.write(`\r${theme.info(badge)}`);
+            if (current >= total) {
+                this.writeLine();
+            }
+        });
+    }
+    showStatusLine(status, elapsedMs, _context) {
+        this.clearSpinnerIfActive();
+        const normalized = status?.trim();
+        if (!normalized) {
+            return;
+        }
+        const elapsed = this.formatElapsed(elapsedMs);
+        const parts = [
+            { text: `${theme.success('✓')} ${normalized}`, tone: 'success' },
+            elapsed ? { text: `(${elapsed})`, tone: 'muted' } : null,
+        ].filter(Boolean);
+        const line = renderStatusLine(parts, this.getColumnWidth() - 2);
+        this.withOutput(() => {
+            this.writeLine(line);
+        });
+    }
+    showAvailableTools(_tools) {
+        // Hidden by default to match Claude Code style
+        // Tools are available but not listed verbosely on startup
+        // Parameter prefixed with underscore to indicate intentionally unused
+    }
+    /**
+     * Show a compact launch panel of slash commands with wrapped descriptions.
+     */
+    showCommandPalette(commands, options) {
+        if (!commands || commands.length === 0) {
+            return;
+        }
+        const panel = this.buildCommandPalette(commands, options);
+        if (!panel.trim()) {
+            return;
+        }
+        this.withOutput(() => {
+            this.writeLine();
+            this.writeLine(panel);
+            this.writeLine();
+        });
+    }
+    /**
+     * Show ready message with keyboard shortcuts hint (compact)
+     * Note: Commands are now shown in the banner, so this is a no-op
+     */
+    showReadyWithHints() {
+        // Commands hint is now included in the banner
+    }
+    /**
+     * Show available providers and their status on launch (compact inline)
+     */
+    showProvidersStatus(providers) {
+        const available = providers.filter(p => p.available);
+        if (available.length === 0) {
+            return;
+        }
+        // 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
+     */
+    showStreamingHeader(_options) {
+        // No-op - banner is streamed as content by the shell
+    }
+    /**
+     * Show model commands help
+     */
+    showModelCommands() {
+        this.withOutput(() => {
+            this.writeLine(theme.ui.muted(`${icons.info} Model commands:`));
+            this.writeLine(theme.ui.muted('  /model <name>     - Switch to a specific model'));
+            this.writeLine(theme.ui.muted('  /model            - Show current model'));
+            this.writeLine(theme.ui.muted('  /providers        - List all available providers'));
+            this.writeLine(theme.ui.muted('  /discover         - Discover models from provider APIs'));
+            this.writeLine();
+        });
+    }
+    formatErrorDetails(error) {
+        if (!error) {
+            return null;
+        }
+        if (error instanceof Error) {
+            if (error.stack) {
+                return highlightError(error.stack);
+            }
+            return highlightError(error.message);
+        }
+        if (typeof error === 'string') {
+            return highlightError(error);
+        }
+        try {
+            return highlightError(JSON.stringify(error, null, 2));
+        }
+        catch {
+            return null;
+        }
+    }
+    showPlanningStep(step, index, total) {
+        // Validate inputs
+        if (!step?.trim()) {
+            return;
+        }
+        if (index < 1 || total < 1 || index > total) {
+            return;
+        }
+        const width = Math.max(DISPLAY_CONSTANTS.MIN_THOUGHT_WIDTH, Math.min(this.getColumnWidth(), DISPLAY_CONSTANTS.MAX_MESSAGE_WIDTH));
+        const heading = renderSectionHeading(`Plan ${index}/${total}`, {
+            subtitle: step,
+            icon: icons.arrow,
+            tone: 'info',
+            width,
+        });
+        this.withOutput(() => {
+            this.writeLine(heading);
+        });
+    }
+    clear() {
+        this.withOutput(() => {
+            try {
+                cursorTo(this.outputStream, 0, 0);
+                clearScreenDown(this.outputStream);
+            }
+            catch {
+                this.write('\x1Bc');
+            }
+        });
+        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)) {
+            return model;
+        }
+        if (/sonnet-4[-.]?5/i.test(model)) {
+            return 'Sonnet 4.5';
+        }
+        if (/opus-4[-.]?1/i.test(model)) {
+            return 'Opus 4.1';
+        }
+        if (/haiku-4[-.]?5/i.test(model)) {
+            return 'Haiku 4.5';
+        }
+        if (/gpt-5\.1/i.test(model)) {
+            return 'GPT-5.1';
+        }
+        if (/gpt-5-?pro/i.test(model)) {
+            return 'GPT-5 Pro';
+        }
+        if (/gpt-5-?mini/i.test(model)) {
+            return 'GPT-5 Mini';
+        }
+        if (/gpt-5-?nano/i.test(model)) {
+            return 'GPT-5 Nano';
+        }
+        return model;
+    }
+    compactPath(path, maxLen) {
+        if (!path) {
+            return '';
+        }
+        if (this.visibleLength(path) <= maxLen) {
+            return path;
+        }
+        const parts = path.split('/').filter(Boolean);
+        if (parts.length <= 2) {
+            return `${path.slice(0, Math.max(0, maxLen - 3))}...`;
+        }
+        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;
+        }
+        const totalSeconds = Math.max(0, Math.round(elapsedMs / 1000));
+        const minutes = Math.floor(totalSeconds / 60);
+        const seconds = totalSeconds % 60;
+        if (minutes > 0) {
+            return `${minutes}m ${seconds.toString().padStart(2, '0')}s`;
+        }
+        return `${seconds}s`;
+    }
+    buildCommandPalette(commands, options) {
+        if (!commands.length) {
+            return '';
+        }
+        const width = Math.max(DISPLAY_CONSTANTS.MIN_MESSAGE_WIDTH, Math.min(this.getColumnWidth() - 2, DISPLAY_CONSTANTS.MAX_MESSAGE_WIDTH));
+        const indent = '  ';
+        const grouped = this.groupPaletteCommands(commands);
+        const commandWidth = this.computeCommandColumnWidth(commands, width, indent.length);
+        const descWidth = Math.max(DISPLAY_CONSTANTS.MIN_WRAP_WIDTH, width - indent.length - commandWidth - 1);
+        const title = options?.title ?? 'Slash commands';
+        const intro = options?.intro ?? 'Describe a task or pick a command below:';
+        const lines = [];
+        lines.push(theme.gradient.primary(title));
+        const introLines = this.wrapLine(intro, width);
+        for (const line of introLines) {
+            lines.push(theme.ui.muted(line));
+        }
+        lines.push('');
+        grouped.forEach(({ category, items }, index) => {
+            const label = this.formatPaletteCategory(category);
+            if (label) {
+                lines.push(theme.bold(label));
+            }
+            for (const item of items) {
+                const wrappedDesc = this.wrapLine(item.description, descWidth);
+                const paddedCommand = item.command.padEnd(commandWidth);
+                const commandLabel = theme.primary(paddedCommand);
+                const firstLine = wrappedDesc[0] ?? '';
+                lines.push(`${indent}${commandLabel} ${this.colorizePaletteText(firstLine, item.tone)}`);
+                for (const extra of wrappedDesc.slice(1)) {
+                    lines.push(`${indent}${' '.repeat(commandWidth)} ${this.colorizePaletteText(extra, item.tone)}`);
+                }
+            }
+            if (index < grouped.length - 1) {
+                lines.push('');
+            }
+        });
+        return lines.join('\n').trimEnd();
+    }
+    groupPaletteCommands(commands) {
+        const FALLBACK = 'other';
+        const groups = new Map();
+        for (const item of commands) {
+            const key = (item.category ?? FALLBACK).toLowerCase();
+            const bucket = groups.get(key) ?? [];
+            bucket.push(item);
+            groups.set(key, bucket);
+        }
+        const order = ['configuration', 'workspace', 'diagnostics', 'other'];
+        const orderedKeys = [
+            ...order.filter((key) => groups.has(key)),
+            ...Array.from(groups.keys()).filter((key) => !order.includes(key)),
+        ];
+        return orderedKeys.map((category) => ({ category, items: groups.get(category) ?? [] }));
+    }
+    computeCommandColumnWidth(commands, totalWidth, indentWidth) {
+        const longest = commands.reduce((max, item) => Math.max(max, this.visibleLength(item.command)), 0);
+        const maxAllowed = Math.max(12, Math.min(longest + 2, Math.floor(totalWidth * 0.35)));
+        const budget = Math.max(10, totalWidth - indentWidth - DISPLAY_CONSTANTS.MIN_WRAP_WIDTH);
+        return Math.min(maxAllowed, budget);
+    }
+    formatPaletteCategory(category) {
+        if (!category) {
+            return 'Other';
+        }
+        switch (category.toLowerCase()) {
+            case 'configuration':
+                return 'Configuration';
+            case 'workspace':
+                return 'Workspace';
+            case 'diagnostics':
+                return 'Diagnostics';
+            case 'other':
+                return 'Other';
+            default:
+                return category[0]?.toUpperCase() + category.slice(1);
+        }
+    }
+    colorizePaletteText(text, tone) {
+        switch (tone) {
+            case 'warn':
+                return theme.warning(text);
+            case 'success':
+                return theme.success(text);
+            case 'info':
+                return theme.info(text);
+            case 'muted':
+            default:
+                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" for completed, "✻ Thinking…" for active
+        if (durationMs !== undefined) {
+            const elapsed = this.formatElapsedTime(Math.floor(durationMs / 1000));
+            lines.push(`${theme.info('∴')} Thought for ${elapsed}`);
+        }
+        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.
+     */
+    wrapLine(text, width) {
+        // Handle edge cases
+        if (width <= 0) {
+            return [text];
+        }
+        if (!text) {
+            return [''];
+        }
+        if (text.length <= width) {
+            return [text];
+        }
+        const words = text.split(/\s+/).filter(Boolean);
+        // If no words, chunk the entire text
+        if (!words.length) {
+            return this.chunkWord(text, width);
+        }
+        const lines = [];
+        let current = '';
+        for (const word of words) {
+            const appendResult = this.tryAppendWord(current, word, width);
+            if (appendResult.shouldFlush) {
+                lines.push(current);
+            }
+            if (appendResult.chunks.length > 0) {
+                // Word was too long and was chunked
+                lines.push(...appendResult.chunks.slice(0, -1));
+                current = appendResult.chunks[appendResult.chunks.length - 1] ?? '';
+            }
+            else {
+                current = appendResult.newCurrent;
+            }
+        }
+        if (current) {
+            lines.push(current);
+        }
+        return lines.length ? lines : [''];
+    }
+    /**
+     * Attempts to append a word to the current line.
+     * Returns instructions on how to handle the word.
+     */
+    tryAppendWord(current, word, width) {
+        if (!word) {
+            return { shouldFlush: false, newCurrent: current, chunks: [] };
+        }
+        // Empty current line - start new line with word
+        if (!current) {
+            if (word.length <= width) {
+                return { shouldFlush: false, newCurrent: word, chunks: [] };
+            }
+            // Word too long, need to chunk it
+            return { shouldFlush: false, newCurrent: '', chunks: this.chunkWord(word, width) };
+        }
+        // Word fits on current line with space
+        if (current.length + 1 + word.length <= width) {
+            return { shouldFlush: false, newCurrent: `${current} ${word}`, chunks: [] };
+        }
+        // Word doesn't fit - flush current and start new line
+        if (word.length <= width) {
+            return { shouldFlush: true, newCurrent: word, chunks: [] };
+        }
+        // Word doesn't fit and is too long - flush current and chunk word
+        return { shouldFlush: true, newCurrent: '', chunks: this.chunkWord(word, width) };
+    }
+    /**
+     * Splits a long word into chunks that fit within the specified width.
+     * Used when a single word is too long to fit on one line.
+     */
+    chunkWord(word, width) {
+        if (width <= 0 || !word) {
+            return word ? [word] : [''];
+        }
+        const chunks = [];
+        for (let i = 0; i < word.length; i += width) {
+            chunks.push(word.slice(i, i + width));
+        }
+        return chunks.length > 0 ? chunks : [''];
+    }
+    /**
+     * Returns the visible length of a string, excluding ANSI escape codes.
+     */
+    visibleLength(value) {
+        if (!value) {
+            return 0;
+        }
+        return this.stripAnsi(value).length;
+    }
+    /**
+     * Removes ANSI escape codes from a string to get the visible text.
+     * Uses the standard ANSI escape sequence pattern.
+     */
+    stripAnsi(value) {
+        if (!value) {
+            return '';
+        }
+        return value.replace(/\u001B\[[0-?]*[ -/]*[@-~]/g, '');
+    }
+}
+export const display = new Display();
+//# sourceMappingURL=display.js.map