erosolar-cli 1.7.194 → 1.7.196

package/dist/ui/display.js

@@ -2,9 +2,9 @@ import { createSpinner } from 'nanospinner';
 import { clearScreenDown, cursorTo, moveCursor } from 'node:readline';
 import { theme, icons } from './theme.js';
 import { formatRichContent, renderMessagePanel, renderMessageBody } from './richText.js';
-import { getTerminalColumns, wrapPreformatted } from './layout.js';
+import { getTerminalColumns } from './layout.js';
 import { highlightError } from './textHighlighter.js';
-import { renderCallout, renderSectionHeading } from './designSystem.js';
+import { renderSectionHeading } from './designSystem.js';
 import { isPlainOutputMode } from './outputMode.js';
 /**
  * Output lock to prevent race conditions during spinner/stream output.
@@ -156,7 +156,6 @@ const DISPLAY_CONSTANTS = {
 };
 // Enhanced spinner frames with smooth animation
 const SPINNER_FRAMES = ['◐', '◓', '◑', '◒', '⣾', '⣽', '⣻', '⢿', '⡿', '⣟', '⣯', '⣷'];
-const INDEPENDENT_SECURITY_MANDATE = 'Independent security research CLI for third-party, ethics-reviewed assessments and vulnerability discovery.';
 /**
  * Display class manages all terminal UI output for the application.
  *
@@ -614,64 +613,33 @@ export class Display {
     }
     showError(message, error) {
         this.clearSpinnerIfActive();
-        const callout = renderCallout(message, {
-            tone: 'danger',
-            icon: icons.error,
-            title: 'Error',
-            width: this.getBannerWidth(),
-        });
         const details = this.formatErrorDetails(error);
         this.withOutput(() => {
-            this.writeLine(`\n${callout}`, this.errorStream);
+            this.writeLine(`${theme.error('✗')} ${message}`, this.errorStream);
             if (details) {
-                this.writeLine(details, this.errorStream);
+                this.writeLine(`  ${details}`, this.errorStream);
             }
-            this.writeLine('', this.errorStream);
         });
     }
     showWarning(message) {
         this.clearSpinnerIfActive();
-        const callout = renderCallout(message, {
-            tone: 'warning',
-            icon: icons.warning,
-            title: 'Warning',
-            width: this.getBannerWidth(),
-        });
         this.withOutput(() => {
-            this.writeLine(`${callout}`, this.errorStream);
+            this.writeLine(`${theme.warning('!')} ${message}`, this.errorStream);
         });
     }
     showInfo(message) {
         this.clearSpinnerIfActive();
-        const callout = renderCallout(message, {
-            tone: 'info',
-            icon: icons.info,
-            title: 'Info',
-            width: this.getBannerWidth(),
-        });
         this.withOutput(() => {
-            this.writeLine(callout);
+            this.writeLine(`${theme.info('ℹ')} ${message}`);
         });
     }
     /**
-     * Show a success message with enhanced styling
+     * Show a success message with simple styling
      */
     showSuccess(message) {
         this.clearSpinnerIfActive();
-        const box = { tl: '╭', tr: '╮', bl: '╰', br: '╯', h: '─', v: '│' };
-        const width = Math.min(this.getColumnWidth() - 4, 60);
-        const innerWidth = width - 2;
-        const icon = '✓';
-        const title = ` ${icon} Success `;
-        const headerPad = Math.floor((innerWidth - title.length) / 2);
         this.withOutput(() => {
-            this.writeLine(theme.success(`${box.tl}${box.h.repeat(headerPad)}${title}${box.h.repeat(innerWidth - headerPad - title.length)}${box.tr}`));
-            const msgLines = this.wrapLine(message, innerWidth - 2);
-            for (const line of msgLines) {
-                const padding = Math.max(0, innerWidth - line.length - 1);
-                this.writeLine(`${theme.success(box.v)} ${line}${' '.repeat(padding)}${theme.success(box.v)}`);
-            }
-            this.writeLine(theme.success(`${box.bl}${box.h.repeat(innerWidth)}${box.br}`));
+            this.writeLine(`${theme.success('✓')} ${message}`);
         });
     }
     /**
@@ -691,36 +659,18 @@ export class Display {
             }
         });
     }
-    showStatusLine(status, elapsedMs, context) {
+    showStatusLine(status, elapsedMs, _context) {
         this.clearSpinnerIfActive();
         const normalized = status?.trim();
         if (!normalized) {
             return;
         }
-        const parts = [];
-        // Show session elapsed time first (Claude Code style: "Session 5m 23s")
-        if (context?.sessionElapsedMs && context.sessionElapsedMs > 0) {
-            const sessionElapsed = this.formatElapsedTime(Math.floor(context.sessionElapsedMs / 1000));
-            parts.push(theme.ui.muted(`Session ${sessionElapsed}`));
-        }
-        const contextSummary = this.formatContextSummary(context);
-        if (contextSummary) {
-            parts.push(contextSummary);
-        }
         const elapsed = this.formatElapsed(elapsedMs);
         const statusText = elapsed
-            ? `${theme.success(normalized)} ${theme.ui.muted(`(${elapsed})`)}`
-            : theme.success(normalized);
-        parts.push(statusText);
-        const bulletSep = theme.ui.muted(` ${icons.bullet} `);
+            ? `${theme.success('✓')} ${normalized} ${theme.ui.muted(`(${elapsed})`)}`
+            : `${theme.success('✓')} ${normalized}`;
         this.withOutput(() => {
-            // Claude Code style: show status line then separator
-            this.writeLine(parts.join(bulletSep));
-            this.writeLine();
-            // Add separator line above prompt (Claude Code style)
-            const cols = getTerminalColumns();
-            const separatorLine = theme.ui.border('─'.repeat(Math.min(cols - 2, 72)));
-            this.writeLine(separatorLine);
+            this.writeLine(statusText);
         });
     }
     showAvailableTools(_tools) {
@@ -732,12 +682,8 @@ export class Display {
      * Show ready message with keyboard shortcuts hint (compact)
      */
     showReadyWithHints() {
-        const cols = this.getColumnWidth();
-        const width = Math.max(32, Math.min(cols - 6, DISPLAY_CONSTANTS.MAX_BANNER_WIDTH - 4));
         this.withOutput(() => {
-            const readyLine = `${theme.success('Ready')} ${theme.ui.muted('• /help • /model')}`;
-            this.writeLine(this.renderCompactRow(readyLine, width, true));
-            this.writeLine();
+            this.writeLine(`${theme.success('>')} ${theme.ui.muted('/help for commands')}`);
         });
     }
     /**
@@ -748,75 +694,21 @@ export class Display {
         if (available.length === 0) {
             return;
         }
-        const width = Math.max(32, Math.min(this.getColumnWidth() - 6, DISPLAY_CONSTANTS.MAX_BANNER_WIDTH - 4));
-        this.withOutput(() => {
-            const providerList = available
-                .map(p => `${theme.success('●')} ${p.provider} ${theme.ui.muted(`(${this.truncateModel(p.latestModel)})`)}`)
-                .join(theme.ui.muted(' │ '));
-            const line = `${theme.ui.muted('models')} ${providerList}`;
-            this.writeLine(this.renderCompactRow(line, width));
-            this.writeLine();
-        });
+        // Claude Code style: don't show providers on startup, keep it minimal
     }
     /**
-     * Truncate model name for compact display
+     * Show unified status bar - Claude Code style (minimal)
      */
-    truncateModel(model) {
-        if (model.length <= 20)
-            return model;
-        // Extract the meaningful part of model names
-        const parts = model.split('-');
-        if (parts.length > 2) {
-            return `${parts[0]}-${parts[1]}...`;
-        }
-        return `${model.slice(0, 17)}...`;
-    }
-    /**
-     * Show unified status bar - Claude Code style
-     *
-     * Format:
-     * ▌ models ● anthropic (claude-opus...) │ ● openai (gpt-5.1-codex)
-     * ▌ Ready • /help • /model
-     *
-     * Called both at startup and after streaming ends to provide consistent UI.
-     */
-    showUnifiedStatusBar(providers) {
-        const cols = this.getColumnWidth();
-        const width = Math.max(32, Math.min(cols - 6, DISPLAY_CONSTANTS.MAX_BANNER_WIDTH - 4));
+    showUnifiedStatusBar(_providers) {
         this.withOutput(() => {
-            // Show providers line if available
-            if (providers && providers.length > 0) {
-                const available = providers.filter(p => p.available);
-                if (available.length > 0) {
-                    const providerList = available
-                        .map(p => `${theme.success('●')} ${p.provider} ${theme.ui.muted(`(${this.truncateModel(p.latestModel)})`)}`)
-                        .join(theme.ui.muted(' │ '));
-                    const providerLine = `${theme.ui.muted('models')} ${providerList}`;
-                    this.writeLine(this.renderCompactRow(providerLine, width));
-                    this.writeLine();
-                }
-            }
-            const readyLine = `${theme.success('Ready')} ${theme.ui.muted('• /help • /model')}`;
-            this.writeLine(this.renderCompactRow(readyLine, width, true));
-            this.writeLine();
+            this.writeLine(`${theme.success('>')} ${theme.ui.muted('/help for commands')}`);
         });
     }
     /**
-     * Show streaming header - Claude Code style
-     *
-     * Displays a unified streaming status bar before AI response starts.
-     * This provides visual consistency with the startup Ready bar.
-     *
-     * Format:
-     * ▌ ● Responding...
+     * Show streaming header - Claude Code style (minimal)
      */
     showStreamingHeader() {
-        const cols = this.getColumnWidth();
-        const width = Math.max(32, Math.min(cols - 6, DISPLAY_CONSTANTS.MAX_BANNER_WIDTH - 4));
-        this.withOutput(() => {
-            const indicator = `${theme.info('●')} ${theme.ui.muted('Responding...')}`;
-            this.writeLine(this.renderCompactRow(indicator, width, true));
-        });
+        // Claude Code style: no header, just start streaming
     }
     /**
      * Show model commands help
@@ -1020,84 +912,6 @@ export class Display {
         const columns = this.getColumnWidth();
         return Math.max(DISPLAY_CONSTANTS.MIN_MESSAGE_WIDTH, Math.min(columns - DISPLAY_CONSTANTS.MESSAGE_PADDING, DISPLAY_CONSTANTS.MAX_MESSAGE_WIDTH));
     }
-    /**
-     * Legacy method for appending thought blocks with tree-like formatting.
-     * Kept for backwards compatibility but not actively used.
-     * @deprecated Use buildClaudeStyleThought instead
-     */
-    // @ts-expect-error - Legacy method kept for backwards compatibility
-    _appendThoughtBlock(block, format, output) {
-        const rawLines = block.split('\n');
-        const indices = rawLines
-            .map((line, index) => (line.trim().length ? index : -1))
-            .filter((index) => index >= 0);
-        if (!indices.length) {
-            return;
-        }
-        const lastIndex = indices[indices.length - 1];
-        let usedFirst = false;
-        for (let index = 0; index < rawLines.length; index += 1) {
-            const rawLine = rawLines[index] ?? '';
-            if (!rawLine.trim()) {
-                continue;
-            }
-            const segments = this.wrapThoughtLine(rawLine, format.available);
-            if (!segments.length) {
-                continue;
-            }
-            const isLastLine = index === lastIndex;
-            segments.forEach((segment, segmentIndex) => {
-                const prefix = this.resolveThoughtPrefix({
-                    usedFirst,
-                    segmentIndex,
-                    isLastLine,
-                    format,
-                });
-                output.push(`${prefix}${segment}`);
-            });
-            usedFirst = true;
-        }
-    }
-    resolveThoughtPrefix(options) {
-        if (!options.usedFirst) {
-            return options.segmentIndex === 0 ? options.format.bullet : options.format.spacer;
-        }
-        if (options.segmentIndex === 0) {
-            return options.isLastLine ? options.format.last : options.format.branch;
-        }
-        return options.format.spacer;
-    }
-    /**
-     * Legacy method for generating thought formatting configuration.
-     * Kept for backwards compatibility but not actively used.
-     * @deprecated Use buildClaudeStyleThought instead
-     */
-    // @ts-expect-error - Legacy method kept for backwards compatibility
-    _getThoughtFormat() {
-        const totalWidth = Math.max(DISPLAY_CONSTANTS.MIN_THOUGHT_WIDTH, Math.min(this.getColumnWidth(), DISPLAY_CONSTANTS.MAX_THOUGHT_WIDTH));
-        const prefixWidth = Math.max(3, this.visibleLength(`${icons.bullet} `));
-        const available = Math.max(DISPLAY_CONSTANTS.MIN_WRAP_WIDTH, totalWidth - prefixWidth);
-        return {
-            totalWidth,
-            prefixWidth,
-            available,
-            bullet: theme.secondary(this.padPrefix(`${icons.bullet} `, prefixWidth)),
-            branch: theme.ui.muted(this.padPrefix('│ ', prefixWidth)),
-            last: theme.ui.muted(this.padPrefix('└ ', prefixWidth)),
-            spacer: ' '.repeat(prefixWidth),
-        };
-    }
-    wrapThoughtLine(line, width) {
-        const preserveIndentation = /^\s/.test(line);
-        const normalized = preserveIndentation ? line.replace(/\s+$/, '') : line.trim();
-        if (!normalized) {
-            return [];
-        }
-        if (preserveIndentation) {
-            return wrapPreformatted(normalized, width);
-        }
-        return this.wrapLine(normalized, width);
-    }
     formatTelemetryLine(metadata) {
         if (!metadata) {
             return '';
@@ -1115,22 +929,6 @@ export class Display {
         const separator = theme.ui.muted(' • ');
         return `  ${parts.join(separator)}`;
     }
-    formatContextSummary(context) {
-        if (!context) {
-            return null;
-        }
-        const hasPercentage = typeof context.percentage === 'number' && Number.isFinite(context.percentage);
-        const hasTokens = typeof context.tokens === 'number' && Number.isFinite(context.tokens);
-        if (!hasPercentage && !hasTokens) {
-            return null;
-        }
-        if (hasPercentage) {
-            const normalizedPercent = Math.max(0, Math.min(100, Math.round(context.percentage)));
-            const tokenDetails = hasTokens ? ` (${context.tokens} tokens)` : '';
-            return `${theme.info('Context')} ${theme.ui.muted(`${normalizedPercent}% used${tokenDetails}`)}`;
-        }
-        return theme.ui.muted(`${context.tokens} tokens`);
-    }
     formatElapsed(elapsedMs) {
         if (typeof elapsedMs !== 'number' || !Number.isFinite(elapsedMs) || elapsedMs < 0) {
             return null;
@@ -1143,70 +941,17 @@ export class Display {
         }
         return `${seconds}s`;
     }
-    buildClaudeStyleBanner(profileLabel, profileName, model, provider, workingDir, width, version) {
-        const effectiveWidth = Math.min(Math.max(width, 52), DISPLAY_CONSTANTS.MAX_BANNER_WIDTH);
-        const contentWidth = Math.max(32, effectiveWidth - 6);
-        const normalizedProfile = profileName?.trim();
-        const agentLabel = profileLabel?.trim() || normalizedProfile || 'Active agent';
-        const headerSegments = [
-            `${theme.gradient.cool('Erosolar CLI')}${version ? theme.ui.muted(` v${version}`) : ''}`,
-            `${theme.success('●')} ${this.formatModelLabel(model)}`,
-            `${theme.ui.muted('via')} ${provider}`,
-            `${theme.ui.muted('agent')} ${agentLabel}`,
-        ];
-        const detailSegments = [
-            `${theme.ui.muted('workspace')} ${this.abbreviatePath(workingDir, contentWidth - 12)}`,
-            `${theme.ui.muted('mandate')} ${this.buildMandateSnippet(contentWidth)}`,
-        ];
-        const rows = [
-            ...this.buildSegmentRows(headerSegments, contentWidth),
-            ...this.buildSegmentRows(detailSegments, contentWidth),
-        ];
-        if (!rows.length) {
-            return '';
-        }
-        const renderedRows = rows.map((row, index) => this.renderCompactRow(row, contentWidth, index === 0));
-        const availableColumns = Math.max(0, this.getColumnWidth() - 2);
-        const dividerWidth = Math.max(0, Math.min(effectiveWidth, availableColumns));
-        const divider = !dividerWidth || isPlainOutputMode()
-            ? ''
-            : theme.ui.border('─'.repeat(Math.max(24, dividerWidth)));
-        return divider ? `${renderedRows.join('\n')}\n${divider}` : renderedRows.join('\n');
-    }
-    buildSegmentRows(segments, width) {
-        const separator = theme.ui.muted(' │ ');
-        const rows = [];
-        let current = '';
-        for (const segment of segments) {
-            if (!segment?.trim()) {
-                continue;
-            }
-            const candidate = current ? `${current}${separator}${segment}` : segment;
-            if (this.visibleLength(candidate) > width && current) {
-                rows.push(current);
-                current = segment;
-            }
-            else {
-                current = candidate;
-            }
-        }
-        if (current) {
-            rows.push(current);
-        }
-        return rows;
-    }
-    renderCompactRow(line, width, highlight = false) {
-        const padded = this.padLine(line, width);
-        if (isPlainOutputMode()) {
-            return padded;
-        }
-        const prefix = highlight ? theme.accent('▌') : theme.ui.border('▌');
-        const body = theme.ui.background(theme.ui.text(` ${padded} `));
-        return `${prefix}${body}`;
-    }
-    buildMandateSnippet(width) {
-        const maxLen = Math.max(28, width - 20);
-        return this.truncateVisible(INDEPENDENT_SECURITY_MANDATE, maxLen);
+    buildClaudeStyleBanner(_profileLabel, _profileName, model, provider, workingDir, _width, version) {
+        // Claude Code style: simple, compact, no boxes
+        const lines = [];
+        // Version line
+        const versionStr = version ? `v${version}` : '';
+        lines.push(`${theme.gradient.cool('Erosolar')} ${theme.ui.muted(versionStr)}`);
+        // Model info on one line
+        lines.push(`${theme.ui.muted('>')} ${this.formatModelLabel(model)} ${theme.ui.muted(`(${provider})`)}`);
+        // Working directory
+        lines.push(`${theme.ui.muted('>')} ${this.abbreviatePath(workingDir, 60)}`);
+        return lines.join('\n');
     }
     abbreviatePath(path, maxLen) {
         if (path.length <= maxLen)
@@ -1216,14 +961,6 @@ export class Display {
             return path;
         return `${parts[0]}/.../${parts[parts.length - 1]}`;
     }
-    padLine(text, width) {
-        const visible = this.visibleLength(text);
-        if (visible >= width) {
-            return this.truncateVisible(text, width);
-        }
-        const padding = Math.max(0, width - visible);
-        return `${text}${' '.repeat(padding)}`;
-    }
     /**
      * Wraps text with a prefix on the first line and optional continuation prefix.
      * Handles multi-line text and word wrapping intelligently.
@@ -1279,7 +1016,7 @@ export class Display {
         return colorize(`${icons.action}`);
     }
     buildClaudeStyleThought(content) {
-        // Rich thinking block display with box frame
+        // Claude Code style: simple prefix, no boxes
         const thinkingStyle = theme.thinking || {
             icon: theme.info,
             text: theme.ui.muted,
@@ -1287,24 +1024,17 @@ export class Display {
             label: theme.info,
         };
         const width = Math.min(this.getColumnWidth() - 4, 70);
-        const innerWidth = width - 2;
         const lines = [];
-        // Header with thinking icon
-        const header = ' 💭 Thinking ';
-        const headerPad = Math.floor((innerWidth - header.length) / 2);
-        lines.push(thinkingStyle.border(`╭${'─'.repeat(headerPad)}${thinkingStyle.label(header)}${'─'.repeat(innerWidth - headerPad - header.length)}╮`));
-        // Parse and format the thinking content
+        // 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) {
-            // Wrap each line to fit
-            const wrapped = this.wrapLine(line.trim(), innerWidth - 2);
+            const wrapped = this.wrapLine(line.trim(), width - 4);
             for (const wrappedLine of wrapped) {
-                const padding = Math.max(0, innerWidth - wrappedLine.length - 1);
-                lines.push(`${thinkingStyle.border('│')} ${thinkingStyle.text(wrappedLine)}${' '.repeat(padding)}${thinkingStyle.border('│')}`);
+                lines.push(`  ${thinkingStyle.text(wrappedLine)}`);
             }
         }
-        // Bottom border
-        lines.push(thinkingStyle.border(`╰${'─'.repeat(innerWidth)}╯`));
         return lines.join('\n');
     }
     /**
@@ -1319,8 +1049,6 @@ export class Display {
             this.writeLine();
         });
     }
-    // @ts-ignore - Legacy method kept for compatibility
-    // Keep legacy method to avoid breaking changes
     buildSubActionPrefixes(status, isLast) {
         if (isLast) {
             const colorize = this.resolveStatusColor(status);
@@ -1418,33 +1146,6 @@ export class Display {
         }
         return chunks.length > 0 ? chunks : [''];
     }
-    /**
-     * Pads a prefix string to the specified width with spaces.
-     */
-    padPrefix(value, width) {
-        if (!value || value.length >= width || width <= 0) {
-            return value;
-        }
-        return value.padEnd(width, ' ');
-    }
-    /**
-     * Truncates a string to fit within the specified width,
-     * accounting for ANSI color codes and adding ellipsis.
-     */
-    truncateVisible(value, width) {
-        if (width <= 0) {
-            return '';
-        }
-        if (!value) {
-            return '';
-        }
-        const plain = this.stripAnsi(value);
-        if (plain.length <= width) {
-            return value;
-        }
-        const slice = plain.slice(0, Math.max(1, width - 1));
-        return `${slice}…`;
-    }
     /**
      * Returns the visible length of a string, excluding ANSI escape codes.
      */