erosolar-cli 1.7.355 → 1.7.356

package/dist/ui/display.js

@@ -1,5 +1,5 @@
 import { createSpinner } from 'nanospinner';
-import { clearScreenDown, cursorTo } from 'node:readline';
+import { clearScreenDown, cursorTo, moveCursor } 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 { renderStatusLine } from './unified/layout.js';
+import { renderSessionFrame, renderStatusLine } from './unified/layout.js';
 import { isStreamingMode } from './globalWriteLock.js';
 /**
  * Output lock to prevent race conditions during spinner/stream output.
@@ -159,6 +159,11 @@ 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.
  *
@@ -254,10 +259,10 @@ export class Display {
             interceptor.beforeWrite?.();
         }
     }
-    notifyAfterOutput(content) {
+    notifyAfterOutput() {
         const interceptors = Array.from(this.outputInterceptors);
         for (let index = interceptors.length - 1; index >= 0; index -= 1) {
-            interceptors[index]?.afterWrite?.(content);
+            interceptors[index]?.afterWrite?.();
         }
     }
     write(value, target = this.outputStream) {
@@ -286,36 +291,29 @@ export class Display {
         if (typeof content !== 'string' || !content) {
             return;
         }
-        // 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.
+        // During streaming mode, write directly without locks for smooth output
+        // StdoutLineTracker patches outputStream.write, so lines are tracked automatically
         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');
+            this.notifyBeforeOutput();
+            try {
+                this.outputStream.write(content);
+            }
+            catch {
+                // Ignore write failures to keep UI resilient
+            }
+            finally {
+                this.notifyAfterOutput();
+            }
             return;
         }
         // Outside streaming mode, use locks to coordinate with other UI
         writeLock.withLock(() => {
             this.notifyBeforeOutput();
             try {
-                this.write(normalized);
+                this.write(content);
             }
             finally {
-                this.notifyAfterOutput(normalized);
+                this.notifyAfterOutput();
             }
         }, 'display.writeRaw');
     }
@@ -360,7 +358,125 @@ export class Display {
         }
         return getTerminalColumns();
     }
-    // Banner is now streamed by the shell - no storage needed
+    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,
+        };
+    }
     showThinking(message = 'Thinking...') {
         // If we already have a spinner, just update its text instead of creating a new one
         if (this.activeSpinner) {
@@ -640,7 +756,7 @@ export class Display {
         if (!normalized) {
             return [];
         }
-        const width = Math.max(DISPLAY_CONSTANTS.MIN_ACTION_WIDTH, Math.min(this.getColumnWidth(), DISPLAY_CONSTANTS.MAX_ACTION_WIDTH));
+        const width = clampWidthToAvailable(this.getColumnWidth(), DISPLAY_CONSTANTS.MIN_ACTION_WIDTH, 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);
@@ -730,7 +846,8 @@ export class Display {
             { text: `${theme.success('✓')} ${normalized}`, tone: 'success' },
             elapsed ? { text: `(${elapsed})`, tone: 'muted' } : null,
         ].filter(Boolean);
-        const line = renderStatusLine(parts, this.getColumnWidth() - 2);
+        const width = clampWidthToAvailable(this.getColumnWidth() - 2, 8, DISPLAY_CONSTANTS.MAX_MESSAGE_WIDTH);
+        const line = renderStatusLine(parts, width);
         this.withOutput(() => {
             this.writeLine(line);
         });
@@ -740,23 +857,6 @@ 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
@@ -775,17 +875,58 @@ 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
+     * Show unified status bar - Now a no-op.
+     * Status is shown in the inline input area's mode controls line.
      */
     showUnifiedStatusBar(_providers) {
-        // No-op - banner is streamed as content, status shown in control bar
+        // No-op: Status is shown in the inline input area's mode controls line
     }
     /**
-     * Show streaming header - no-op, banner is streamed as content
+     * Show streaming header in a unified frame with model/provider/workspace context.
+     * Keeps the streaming section visually connected to the launch banner.
      */
-    showStreamingHeader(_options) {
-        // No-op - banner is streamed as content by the shell
+    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();
+            }
+        });
     }
     /**
      * Show model commands help
@@ -828,7 +969,7 @@ export class Display {
         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 width = clampWidthToAvailable(this.getColumnWidth(), DISPLAY_CONSTANTS.MIN_THOUGHT_WIDTH, DISPLAY_CONSTANTS.MAX_MESSAGE_WIDTH);
         const heading = renderSectionHeading(`Plan ${index}/${total}`, {
             subtitle: step,
             icon: icons.arrow,
@@ -850,14 +991,78 @@ export class Display {
             }
         });
         this.stdoutTracker.reset();
-        // Banner is streamed content - no re-render on clear
+        if (this.bannerState) {
+            this.renderAndStoreBanner(this.bannerState, this.bannerState.model, this.bannerState.provider);
+        }
     }
     newLine() {
         this.withOutput(() => {
             this.writeLine();
         });
     }
-    // Legacy banner methods removed - banner is streamed as content by the shell
+    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;
+    }
     formatModelLabel(model) {
         if (/gpt-5\.1-?codex/i.test(model)) {
             return model;
@@ -924,7 +1129,8 @@ export class Display {
     }
     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));
+        const available = columns - DISPLAY_CONSTANTS.MESSAGE_PADDING;
+        return clampWidthToAvailable(available, DISPLAY_CONSTANTS.MIN_MESSAGE_WIDTH, DISPLAY_CONSTANTS.MAX_MESSAGE_WIDTH);
     }
     formatTelemetryLine(metadata) {
         if (!metadata) {
@@ -955,96 +1161,16 @@ export class Display {
         }
         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('');
-            }
+    buildClaudeStyleBanner(_profileLabel, _profileName, model, provider, workingDir, _width, version) {
+        return renderSessionFrame({
+            profileLabel: _profileLabel,
+            profileName: _profileName,
+            model: this.formatModelLabel(model),
+            provider,
+            workspace: workingDir,
+            version,
+            width: _width,
         });
-        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.
@@ -1054,9 +1180,9 @@ export class Display {
         if (!text) {
             return prefix.trimEnd();
         }
-        const width = Math.max(DISPLAY_CONSTANTS.MIN_ACTION_WIDTH, Math.min(this.getColumnWidth(), DISPLAY_CONSTANTS.MAX_ACTION_WIDTH));
+        const width = clampWidthToAvailable(this.getColumnWidth(), DISPLAY_CONSTANTS.MIN_ACTION_WIDTH, DISPLAY_CONSTANTS.MAX_ACTION_WIDTH);
         const prefixWidth = this.visibleLength(prefix);
-        const available = Math.max(DISPLAY_CONSTANTS.MIN_CONTENT_WIDTH, width - prefixWidth);
+        const available = Math.max(1, Math.min(width - prefixWidth, Math.max(DISPLAY_CONSTANTS.MIN_CONTENT_WIDTH, width - prefixWidth)));
         const indent = typeof options?.continuationPrefix === 'string'
             ? options.continuationPrefix
             : ' '.repeat(Math.max(0, prefixWidth));
@@ -1108,14 +1234,14 @@ export class Display {
             border: theme.ui.border,
             label: theme.info,
         };
-        const width = Math.min(this.getColumnWidth() - 4, 70);
+        const width = clampWidthToAvailable(this.getColumnWidth() - 4, DISPLAY_CONSTANTS.MIN_THOUGHT_WIDTH, DISPLAY_CONSTANTS.MAX_THOUGHT_WIDTH);
         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(), width - 4);
+            const wrapped = this.wrapLine(line.trim(), Math.max(1, width - 4));
             for (const wrappedLine of wrapped) {
                 lines.push(`  ${thinkingStyle.text(wrappedLine)}`);
             }