erosolar-cli 1.7.356 → 1.7.358

package/dist/ui/display.js

@@ -1,5 +1,5 @@
 import { createSpinner } from 'nanospinner';
-import { clearScreenDown, cursorTo, moveCursor } from 'node:readline';
+import { clearScreenDown, cursorTo } from 'node:readline';
 import { theme, icons } from './theme.js';
 import { formatRichContent, renderMessagePanel, renderMessageBody } from './richText.js';
 import { getTerminalColumns } from './layout.js';
@@ -7,7 +7,7 @@ import { highlightError } from './textHighlighter.js';
 import { renderSectionHeading } from './designSystem.js';
 import { isPlainOutputMode } from './outputMode.js';
 import { writeLock } from './writeLock.js';
-import { renderSessionFrame, renderStatusLine } from './unified/layout.js';
+import { renderStatusLine } from './unified/layout.js';
 import { isStreamingMode } from './globalWriteLock.js';
 /**
  * Output lock to prevent race conditions during spinner/stream output.
@@ -159,11 +159,6 @@ const DISPLAY_CONSTANTS = {
 };
 // Enhanced spinner frames with smooth animation
 const SPINNER_FRAMES = ['◐', '◓', '◑', '◒', '⣾', '⣽', '⣻', '⢿', '⡿', '⣟', '⣯', '⣷'];
-const clampWidthToAvailable = (available, min, max) => {
-    const bounded = Math.max(1, Math.floor(available));
-    const preferred = Math.max(min, Math.min(bounded, max));
-    return Math.min(preferred, bounded);
-};
 /**
  * Display class manages all terminal UI output for the application.
  *
@@ -259,10 +254,10 @@ export class Display {
             interceptor.beforeWrite?.();
         }
     }
-    notifyAfterOutput() {
+    notifyAfterOutput(content) {
         const interceptors = Array.from(this.outputInterceptors);
         for (let index = interceptors.length - 1; index >= 0; index -= 1) {
-            interceptors[index]?.afterWrite?.();
+            interceptors[index]?.afterWrite?.(content);
         }
     }
     write(value, target = this.outputStream) {
@@ -291,29 +286,36 @@ export class Display {
         if (typeof content !== 'string' || !content) {
             return;
         }
-        // During streaming mode, write directly without locks for smooth output
-        // StdoutLineTracker patches outputStream.write, so lines are tracked automatically
+        // Normalize carriage returns to avoid overwriting streamed content on the same line.
+        // Some providers emit '\r' when streaming; convert to '\n' so we append instead of rewriting.
+        const normalized = content.includes('\r')
+            ? content.replace(/\r\n/g, '\n').replace(/\r/g, '\n')
+            : content;
+        // During streaming, use withLock to prevent interleaving with escape codes.
+        // This ensures the before/write/after sequence is atomic.
         if (isStreamingMode()) {
-            this.notifyBeforeOutput();
-            try {
-                this.outputStream.write(content);
-            }
-            catch {
-                // Ignore write failures to keep UI resilient
-            }
-            finally {
-                this.notifyAfterOutput();
-            }
+            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(content);
+                this.write(normalized);
             }
             finally {
-                this.notifyAfterOutput();
+                this.notifyAfterOutput(normalized);
             }
         }, 'display.writeRaw');
     }
@@ -358,125 +360,7 @@ export class Display {
         }
         return getTerminalColumns();
     }
-    bannerState = null;
-    bannerContext = null;
-    /**
-     * Stores banner information. When silent=true, only stores state without writing.
-     * The banner can then be rendered later via renderBannerToContent().
-     *
-     * @param silent If true, only store state without writing to stdout (default: true)
-     */
-    showWelcome(profileLabel, profileName, model, provider, workingDir, version, silent = true) {
-        // Validate required inputs
-        if (!model?.trim() || !provider?.trim() || !workingDir?.trim()) {
-            return;
-        }
-        const width = this.getBannerWidth();
-        const banner = this.buildClaudeStyleBanner(profileLabel ?? '', profileName ?? '', model, provider, workingDir, width, version);
-        if (!banner) {
-            return;
-        }
-        const height = this.measureBannerHeight(banner);
-        this.bannerState = {
-            startLine: 0, // Will be set when actually rendered
-            height,
-            width,
-            workingDir,
-            version: version?.trim() || undefined,
-            model,
-            provider,
-            profileLabel: profileLabel ?? '',
-            profileName: profileName ?? '',
-        };
-        this.bannerContext = {
-            workingDir,
-            model,
-            provider,
-            profileLabel: profileLabel ?? '',
-            profileName: profileName ?? '',
-            version: version?.trim() || undefined,
-        };
-        // Only write to stdout if not silent
-        if (!silent) {
-            const startLine = this.stdoutTracker.totalLines;
-            this.withOutput(() => {
-                this.writeLine(banner);
-            });
-            this.bannerState.startLine = startLine;
-        }
-    }
-    /**
-     * Get the current version string (if set during showWelcome).
-     */
-    getVersion() {
-        return this.bannerContext?.version;
-    }
-    /**
-     * Get the current banner content as a string.
-     * Used by TerminalInput to re-render the banner inside the scroll region.
-     * Returns null if no banner has been displayed yet.
-     */
-    getBannerContent() {
-        const state = this.bannerState;
-        if (!state) {
-            return null;
-        }
-        const width = this.getBannerWidth();
-        return this.buildClaudeStyleBanner(state.profileLabel, state.profileName, state.model, state.provider, state.workingDir, width, state.version);
-    }
-    /**
-     * Render banner directly to stdout (for unified UI re-rendering).
-     * This writes the banner without updating tracking state.
-     * Returns the number of lines written.
-     */
-    renderBannerToContent() {
-        const banner = this.getBannerContent();
-        if (!banner) {
-            return 0;
-        }
-        this.withOutput(() => {
-            this.writeLine(banner);
-        });
-        return this.measureBannerHeight(banner);
-    }
-    /**
-     * Updates the session information banner with new model/provider by appending
-     * a new banner entry in the scroll region (no pinned header rewriting).
-    */
-    updateSessionInfo(model, provider) {
-        const state = this.bannerState;
-        if (!state) {
-            return;
-        }
-        const width = this.getBannerWidth();
-        const banner = this.buildClaudeStyleBanner(state.profileLabel, state.profileName, model, provider, state.workingDir, width, state.version);
-        const height = this.measureBannerHeight(banner);
-        // If height changed or rewrite failed, do full re-render
-        if (height !== state.height || !this.tryRewriteBanner(state, banner)) {
-            this.renderAndStoreBanner(state, model, provider);
-            this.bannerContext = {
-                workingDir: state.workingDir,
-                model: state.model,
-                provider: state.provider,
-                profileLabel: state.profileLabel,
-                profileName: state.profileName,
-                version: state.version,
-            };
-            return;
-        }
-        state.model = model;
-        state.provider = provider;
-        state.width = width;
-        state.height = height;
-        this.bannerContext = {
-            workingDir: state.workingDir,
-            model,
-            provider,
-            profileLabel: state.profileLabel,
-            profileName: state.profileName,
-            version: state.version,
-        };
-    }
+    // 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) {
@@ -756,7 +640,7 @@ export class Display {
         if (!normalized) {
             return [];
         }
-        const width = clampWidthToAvailable(this.getColumnWidth(), DISPLAY_CONSTANTS.MIN_ACTION_WIDTH, DISPLAY_CONSTANTS.MAX_ACTION_WIDTH);
+        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);
@@ -846,8 +730,7 @@ export class Display {
             { text: `${theme.success('✓')} ${normalized}`, tone: 'success' },
             elapsed ? { text: `(${elapsed})`, tone: 'muted' } : null,
         ].filter(Boolean);
-        const width = clampWidthToAvailable(this.getColumnWidth() - 2, 8, DISPLAY_CONSTANTS.MAX_MESSAGE_WIDTH);
-        const line = renderStatusLine(parts, width);
+        const line = renderStatusLine(parts, this.getColumnWidth() - 2);
         this.withOutput(() => {
             this.writeLine(line);
         });
@@ -857,6 +740,23 @@ export class Display {
         // 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
@@ -875,58 +775,17 @@ export class Display {
         // Claude Code style: don't show providers on startup, keep it minimal
     }
     /**
-     * Show unified status bar - Now a no-op.
-     * Status is shown in the inline input area's mode controls line.
+     * Show unified status bar - Claude Code style (minimal)
+     * Note: No-op - status is shown in mode controls line
      */
     showUnifiedStatusBar(_providers) {
-        // No-op: Status is shown in the inline input area's mode controls line
+        // No-op - banner is streamed as content, status shown in control bar
     }
     /**
-     * Show streaming header in a unified frame with model/provider/workspace context.
-     * Keeps the streaming section visually connected to the launch banner.
+     * Show streaming header - no-op, banner is streamed as content
      */
-    showStreamingHeader(options) {
-        const banner = this.bannerState;
-        const model = banner ? this.formatModelLabel(banner.model) : null;
-        const provider = banner?.provider ?? '';
-        const workspace = banner?.workingDir ?? '';
-        if (!model && !provider && !workspace) {
-            return;
-        }
-        const width = clampWidthToAvailable(this.getColumnWidth() - 4, DISPLAY_CONSTANTS.MIN_MESSAGE_WIDTH, DISPLAY_CONSTANTS.MAX_MESSAGE_WIDTH);
-        const spaceAbove = options?.spaceAbove ?? true;
-        const spaceBelow = options?.spaceBelow ?? true;
-        // Plain output keeps the header lightweight
-        if (isPlainOutputMode()) {
-            const label = model ? `Streaming ${model}` : 'Streaming response';
-            this.withOutput(() => {
-                if (spaceAbove) {
-                    this.writeLine();
-                }
-                this.writeLine(`--- ${label} ---`);
-                if (spaceBelow) {
-                    this.writeLine();
-                }
-            });
-            return;
-        }
-        const sessionFrame = renderSessionFrame({
-            profileLabel: banner?.profileLabel ?? '',
-            profileName: banner?.profileName ?? '',
-            model: model ?? '',
-            provider,
-            workspace,
-            width,
-        });
-        this.withOutput(() => {
-            if (spaceAbove) {
-                this.writeLine();
-            }
-            this.writeLine(sessionFrame);
-            if (spaceBelow) {
-                this.writeLine();
-            }
-        });
+    showStreamingHeader(_options) {
+        // No-op - banner is streamed as content by the shell
     }
     /**
      * Show model commands help
@@ -969,7 +828,7 @@ export class Display {
         if (index < 1 || total < 1 || index > total) {
             return;
         }
-        const width = clampWidthToAvailable(this.getColumnWidth(), DISPLAY_CONSTANTS.MIN_THOUGHT_WIDTH, DISPLAY_CONSTANTS.MAX_MESSAGE_WIDTH);
+        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,
@@ -991,78 +850,14 @@ export class Display {
             }
         });
         this.stdoutTracker.reset();
-        if (this.bannerState) {
-            this.renderAndStoreBanner(this.bannerState, this.bannerState.model, this.bannerState.provider);
-        }
+        // Banner is streamed content - no re-render on clear
     }
     newLine() {
         this.withOutput(() => {
             this.writeLine();
         });
     }
-    getBannerWidth() {
-        const availableColumns = this.getColumnWidth();
-        const available = availableColumns - DISPLAY_CONSTANTS.BANNER_PADDING;
-        return clampWidthToAvailable(available, DISPLAY_CONSTANTS.MIN_BANNER_WIDTH, DISPLAY_CONSTANTS.MAX_BANNER_WIDTH);
-    }
-    measureBannerHeight(banner) {
-        if (!banner) {
-            return 0;
-        }
-        return banner.split('\n').length;
-    }
-    /**
-     * Attempts to rewrite the banner in place using terminal cursor manipulation.
-     * Returns true if successful, false if rewrite is not possible.
-     */
-    tryRewriteBanner(state, banner) {
-        if (!this.outputStream.isTTY) {
-            return false;
-        }
-        if (!banner || state.height <= 0) {
-            return false;
-        }
-        const linesWritten = this.stdoutTracker.totalLines;
-        const linesAfterBanner = linesWritten - (state.startLine + state.height);
-        if (linesAfterBanner < 0) {
-            return false;
-        }
-        const totalOffset = linesAfterBanner + state.height;
-        const maxRows = this.outputStream.rows;
-        if (typeof maxRows === 'number' && maxRows > 0 && totalOffset > maxRows) {
-            return false;
-        }
-        try {
-            this.withOutput(() => {
-                moveCursor(this.outputStream, 0, -totalOffset);
-                cursorTo(this.outputStream, 0);
-                this.stdoutTracker.withSuspended(() => {
-                    this.outputStream.write(`${banner}\n`);
-                });
-                if (linesAfterBanner > 0) {
-                    moveCursor(this.outputStream, 0, linesAfterBanner);
-                }
-                cursorTo(this.outputStream, 0);
-            });
-            return true;
-        }
-        catch {
-            return false;
-        }
-    }
-    renderAndStoreBanner(state, model, provider) {
-        const width = this.getBannerWidth();
-        const banner = this.buildClaudeStyleBanner(state.profileLabel, state.profileName, model, provider, state.workingDir, width, state.version);
-        const startLine = this.stdoutTracker.totalLines;
-        this.withOutput(() => {
-            this.writeLine(banner);
-        });
-        state.startLine = startLine;
-        state.height = this.measureBannerHeight(banner);
-        state.width = width;
-        state.model = model;
-        state.provider = provider;
-    }
+    // Legacy banner methods removed - banner is streamed as content by the shell
     formatModelLabel(model) {
         if (/gpt-5\.1-?codex/i.test(model)) {
             return model;
@@ -1129,8 +924,7 @@ export class Display {
     }
     resolveMessageWidth() {
         const columns = this.getColumnWidth();
-        const available = columns - DISPLAY_CONSTANTS.MESSAGE_PADDING;
-        return clampWidthToAvailable(available, DISPLAY_CONSTANTS.MIN_MESSAGE_WIDTH, DISPLAY_CONSTANTS.MAX_MESSAGE_WIDTH);
+        return Math.max(DISPLAY_CONSTANTS.MIN_MESSAGE_WIDTH, Math.min(columns - DISPLAY_CONSTANTS.MESSAGE_PADDING, DISPLAY_CONSTANTS.MAX_MESSAGE_WIDTH));
     }
     formatTelemetryLine(metadata) {
         if (!metadata) {
@@ -1161,16 +955,96 @@ export class Display {
         }
         return `${seconds}s`;
     }
-    buildClaudeStyleBanner(_profileLabel, _profileName, model, provider, workingDir, _width, version) {
-        return renderSessionFrame({
-            profileLabel: _profileLabel,
-            profileName: _profileName,
-            model: this.formatModelLabel(model),
-            provider,
-            workspace: workingDir,
-            version,
-            width: _width,
+    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.
@@ -1180,9 +1054,9 @@ export class Display {
         if (!text) {
             return prefix.trimEnd();
         }
-        const width = clampWidthToAvailable(this.getColumnWidth(), DISPLAY_CONSTANTS.MIN_ACTION_WIDTH, DISPLAY_CONSTANTS.MAX_ACTION_WIDTH);
+        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(1, Math.min(width - prefixWidth, Math.max(DISPLAY_CONSTANTS.MIN_CONTENT_WIDTH, width - prefixWidth)));
+        const available = Math.max(DISPLAY_CONSTANTS.MIN_CONTENT_WIDTH, width - prefixWidth);
         const indent = typeof options?.continuationPrefix === 'string'
             ? options.continuationPrefix
             : ' '.repeat(Math.max(0, prefixWidth));
@@ -1234,14 +1108,14 @@ export class Display {
             border: theme.ui.border,
             label: theme.info,
         };
-        const width = clampWidthToAvailable(this.getColumnWidth() - 4, DISPLAY_CONSTANTS.MIN_THOUGHT_WIDTH, DISPLAY_CONSTANTS.MAX_THOUGHT_WIDTH);
+        const width = Math.min(this.getColumnWidth() - 4, 70);
         const lines = [];
         // Simple header
         lines.push(`${theme.ui.muted('⏺')} ${thinkingStyle.label('Thinking')}`);
         // Parse and format the thinking content with simple indentation
         const contentLines = content.split('\n').filter(line => line.trim());
         for (const line of contentLines) {
-            const wrapped = this.wrapLine(line.trim(), Math.max(1, width - 4));
+            const wrapped = this.wrapLine(line.trim(), width - 4);
             for (const wrappedLine of wrapped) {
                 lines.push(`  ${thinkingStyle.text(wrappedLine)}`);
             }