erosolar-cli 1.0.2 → 1.0.5

package/dist/ui/display.js

@@ -1,9 +1,13 @@
 import { createSpinner } from 'nanospinner';
 import { cursorTo, moveCursor } from 'node:readline';
 import { theme, icons } from './theme.js';
-import { formatRichContent, renderMessageBody } from './richText.js';
+import { formatRichContent, renderMessagePanel } from './richText.js';
 import { getTerminalColumns, wrapPreformatted } from './layout.js';
-import { renderCallout, renderSectionHeading, renderStatusBar } from './designSystem.js';
+import { renderCallout, renderSectionHeading } from './designSystem.js';
+/**
+ * Tracks line output to stdout for banner rewriting and cursor positioning.
+ * Singleton pattern ensures consistent tracking across the application.
+ */
 class StdoutLineTracker {
     static instance = null;
     static getInstance() {
@@ -24,13 +28,18 @@ class StdoutLineTracker {
     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 = false;
+            this.suspended = wasSuspended;
         }
     }
     reset() {
@@ -39,86 +48,192 @@ class StdoutLineTracker {
     patchStream() {
         const tracker = this;
         this.stream.write = function patched(chunk, encoding, callback) {
-            tracker.recordChunk(chunk, encoding);
-            return tracker.originalWrite(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.toString(chunk, encoding);
+        const text = this.chunkToString(chunk, encoding);
         if (!text) {
             return;
         }
-        for (let index = 0; index < text.length; index += 1) {
-            if (text[index] === '\n') {
+        this.countNewlines(text);
+    }
+    countNewlines(text) {
+        for (const char of text) {
+            if (char === '\n') {
                 this.linesWritten += 1;
             }
         }
     }
-    toString(chunk, encoding) {
+    chunkToString(chunk, encoding) {
         if (typeof chunk === 'string') {
             return chunk;
         }
         if (chunk instanceof Uint8Array) {
-            const enc = typeof encoding === 'string' ? encoding : 'utf8';
+            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,
+};
+const SPINNER_FRAMES = ['∴', 'ε', '∴', '✻', 'ε', '✻'];
+/**
+ * Display class manages all terminal UI output for the application.
+ *
+ * Architecture:
+ * - Singleton pattern via StdoutLineTracker for consistent line tracking
+ * - Output interceptor pattern for live update integration
+ * - Banner state management for in-place updates
+ * - Configurable width constraints via DISPLAY_CONSTANTS
+ *
+ * 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 = StdoutLineTracker.getInstance();
     activeSpinner = null;
+    outputInterceptors = new Set();
+    registerOutputInterceptor(interceptor) {
+        if (!interceptor) {
+            return () => { };
+        }
+        this.outputInterceptors.add(interceptor);
+        return () => {
+            this.outputInterceptors.delete(interceptor);
+        };
+    }
+    withOutput(fn) {
+        this.notifyBeforeOutput();
+        try {
+            return fn();
+        }
+        finally {
+            this.notifyAfterOutput();
+        }
+    }
+    notifyBeforeOutput() {
+        for (const interceptor of this.outputInterceptors) {
+            interceptor.beforeWrite?.();
+        }
+    }
+    notifyAfterOutput() {
+        const interceptors = Array.from(this.outputInterceptors);
+        for (let index = interceptors.length - 1; index >= 0; index -= 1) {
+            interceptors[index]?.afterWrite?.();
+        }
+    }
     bannerState = null;
-    showWelcome(profileLabel, profileName, model, provider, workingDir, version, thoughtLevel) {
+    /**
+     * Displays the welcome banner with session information.
+     * Stores banner state for potential in-place updates.
+     */
+    showWelcome(profileLabel, profileName, model, provider, workingDir, version) {
+        // Validate required inputs
+        if (!model?.trim() || !provider?.trim() || !workingDir?.trim()) {
+            return;
+        }
         const width = this.getBannerWidth();
-        const lines = this.buildSessionLines(profileLabel, profileName, model, provider, workingDir, width, thoughtLevel);
-        const bannerOptions = version ? { badge: version } : undefined;
-        const banner = this.buildBanner('Erosolar CLI', width, lines, bannerOptions);
+        const banner = this.buildClaudeStyleBanner(profileLabel ?? '', model, provider, workingDir, width);
+        if (!banner) {
+            return;
+        }
         const startLine = this.stdoutTracker.totalLines;
-        console.log(banner);
-        this.bannerState = {
+        this.withOutput(() => {
+            console.log(banner);
+        });
+        const nextState = {
             startLine,
             height: this.measureBannerHeight(banner),
             width,
             workingDir,
-            version,
             model,
             provider,
-            profileLabel,
-            profileName,
-            thoughtLevel,
+            profileLabel: profileLabel ?? '',
+            profileName: profileName ?? '',
         };
+        if (version?.trim()) {
+            nextState.version = version.trim();
+        }
+        this.bannerState = nextState;
     }
-    updateSessionInfo(model, provider, thoughtLevel) {
+    /**
+     * Updates the session information banner with new model/provider.
+     * Attempts in-place update if possible, otherwise re-renders.
+     */
+    updateSessionInfo(model, provider) {
         const state = this.bannerState;
         if (!state) {
             return;
         }
-        const nextThoughtLevel = typeof thoughtLevel === 'undefined' ? state.thoughtLevel : thoughtLevel;
-        const lines = this.buildSessionLines(state.profileLabel, state.profileName, model, provider, state.workingDir, state.width, nextThoughtLevel);
-        const bannerOptions = state.version ? { badge: state.version } : undefined;
-        const banner = this.buildBanner('Erosolar CLI', state.width, lines, bannerOptions);
+        // Validate inputs
+        if (!model?.trim() || !provider?.trim()) {
+            return;
+        }
+        const lines = this.buildSessionLines(state.profileLabel, state.profileName, model, provider, state.workingDir, state.width);
+        const banner = this.buildBanner('Erosolar CLI', state.width, lines, this.buildBannerOptions(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, nextThoughtLevel);
+            this.renderAndStoreBanner(state, model, provider);
             return;
         }
+        // Update succeeded, update state
         state.model = model;
         state.provider = provider;
-        state.thoughtLevel = nextThoughtLevel;
     }
     showThinking(message = 'Thinking...') {
         if (this.activeSpinner) {
             this.activeSpinner.stop();
         }
-        this.activeSpinner = createSpinner(message).start();
+        // Use Claude Code style spinner with epsilon: ∴, ε, and ✻
+        this.activeSpinner = createSpinner(message, {
+            spinner: {
+                interval: DISPLAY_CONSTANTS.SPINNER_INTERVAL,
+                frames: [...SPINNER_FRAMES],
+            },
+        }).start();
+    }
+    updateThinking(message) {
+        if (this.activeSpinner) {
+            this.activeSpinner.update({ text: message });
+        }
+        else {
+            this.showThinking(message);
+        }
     }
     stopThinking() {
         if (this.activeSpinner) {
-            this.activeSpinner.success();
+            this.activeSpinner.clear();
             this.activeSpinner = null;
         }
     }
@@ -127,19 +242,23 @@ export class Display {
             return;
         }
         const isThought = metadata?.isFinal === false;
-        const body = isThought ? this.buildThoughtStatus(content) : this.buildChatBox(content, metadata);
+        const body = isThought ? this.buildClaudeStyleThought(content) : this.buildChatBox(content, metadata);
         if (!body.trim()) {
             return;
         }
-        console.log(body);
-        console.log();
+        this.withOutput(() => {
+            console.log(body);
+            console.log();
+        });
     }
     showAction(text, status = 'info') {
         if (!text.trim()) {
             return;
         }
         const icon = this.formatActionIcon(status);
-        console.log(this.wrapWithPrefix(text, `${icon} `));
+        this.withOutput(() => {
+            console.log(this.wrapWithPrefix(text, `${icon} `));
+        });
     }
     showSubAction(text, status = 'info') {
         if (!text.trim()) {
@@ -153,8 +272,10 @@ export class Display {
         if (!rendered.length) {
             return;
         }
-        console.log(rendered.join('\n'));
-        console.log();
+        this.withOutput(() => {
+            console.log(rendered.join('\n'));
+            console.log();
+        });
     }
     buildWrappedSubActionLines(text, status) {
         const lines = text.split('\n').map((line) => line.trimEnd());
@@ -166,7 +287,7 @@ export class Display {
         }
         const rendered = [];
         for (let index = 0; index < lines.length; index += 1) {
-            const segment = lines[index];
+            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 }));
@@ -178,9 +299,9 @@ export class Display {
         if (!normalized) {
             return [];
         }
-        const width = Math.max(40, Math.min(getTerminalColumns(), 90));
+        const width = Math.max(DISPLAY_CONSTANTS.MIN_ACTION_WIDTH, Math.min(getTerminalColumns(), DISPLAY_CONSTANTS.MAX_ACTION_WIDTH));
         const samplePrefix = this.buildSubActionPrefixes(status, true).prefix;
-        const contentWidth = Math.max(16, width - this.visibleLength(samplePrefix));
+        const contentWidth = Math.max(DISPLAY_CONSTANTS.MIN_CONTENT_WIDTH, width - this.visibleLength(samplePrefix));
         const blocks = formatRichContent(normalized, contentWidth);
         if (!blocks.length) {
             return [];
@@ -203,8 +324,10 @@ export class Display {
         }
     }
     showSystemMessage(content) {
-        console.log(content.trim());
-        console.log();
+        this.withOutput(() => {
+            console.log(content.trim());
+            console.log();
+        });
     }
     showError(message) {
         const callout = renderCallout(message, {
@@ -213,7 +336,9 @@ export class Display {
             title: 'Error',
             width: this.getBannerWidth(),
         });
-        console.error(`\n${callout}\n`);
+        this.withOutput(() => {
+            console.error(`\n${callout}\n`);
+        });
     }
     showWarning(message) {
         const callout = renderCallout(message, {
@@ -222,7 +347,9 @@ export class Display {
             title: 'Warning',
             width: this.getBannerWidth(),
         });
-        console.warn(`${callout}`);
+        this.withOutput(() => {
+            console.warn(`${callout}`);
+        });
     }
     showInfo(message) {
         const callout = renderCallout(message, {
@@ -231,80 +358,65 @@ export class Display {
             title: 'Info',
             width: this.getBannerWidth(),
         });
-        console.log(callout);
+        this.withOutput(() => {
+            console.log(callout);
+        });
+    }
+    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
     }
     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(getTerminalColumns(), DISPLAY_CONSTANTS.MAX_MESSAGE_WIDTH));
         const heading = renderSectionHeading(`Plan ${index}/${total}`, {
             subtitle: step,
             icon: icons.arrow,
             tone: 'info',
-            width: Math.max(48, Math.min(getTerminalColumns(), 110)),
+            width,
+        });
+        this.withOutput(() => {
+            console.log(heading);
         });
-        console.log(heading);
     }
     clear() {
-        console.clear();
+        this.withOutput(() => {
+            console.clear();
+        });
         this.stdoutTracker.reset();
         if (this.bannerState) {
-            this.renderAndStoreBanner(this.bannerState, this.bannerState.model, this.bannerState.provider, this.bannerState.thoughtLevel);
+            this.renderAndStoreBanner(this.bannerState, this.bannerState.model, this.bannerState.provider);
         }
     }
     newLine() {
-        console.log();
+        this.withOutput(() => {
+            console.log();
+        });
     }
     getBannerWidth() {
         const availableColumns = getTerminalColumns();
-        const effectiveWidth = Math.max(32, availableColumns - 4);
-        return Math.min(Math.max(effectiveWidth, 32), 120);
+        const effectiveWidth = Math.max(DISPLAY_CONSTANTS.MIN_BANNER_WIDTH, availableColumns - DISPLAY_CONSTANTS.BANNER_PADDING);
+        return Math.min(Math.max(effectiveWidth, DISPLAY_CONSTANTS.MIN_BANNER_WIDTH), DISPLAY_CONSTANTS.MAX_BANNER_WIDTH);
     }
-    buildSessionLines(profileLabel, profileName, model, provider, workingDir, width, thoughtLevel) {
-        const accent = `${theme.accent('◆')} ${theme.bold('Interactive Session Ready')}`;
+    buildSessionLines(profileLabel, profileName, model, provider, workingDir, width) {
         const normalizedLabel = profileLabel ? profileLabel.trim() : '';
         const normalizedProfile = profileName ? profileName.trim() : '';
         const agentLabel = normalizedLabel || normalizedProfile || 'Active agent';
-        const modelSegments = [this.formatModelLabel(model), provider];
-        if (thoughtLevel) {
-            modelSegments.push(`${thoughtLevel} thought level`);
-        }
-        const modelSummary = modelSegments.join(' • ');
+        const modelSummary = [this.formatModelLabel(model), provider].join(' • ');
         const lines = [
-            accent,
-            '',
-            ...this.formatInfoBlock('Agent', agentLabel, width),
-        ];
-        if (normalizedProfile) {
-            lines.push(...this.formatInfoBlock('Profile', normalizedProfile, width));
-        }
-        lines.push(...this.formatInfoBlock('Model', modelSummary, width), ...this.formatInfoBlock('Workspace', workingDir, width));
-        const statusSegments = [
-            { label: 'Agent', value: agentLabel, tone: 'accent', icon: icons.assistant },
+            ...this.formatInfoBlock('Agent', agentLabel, width, this.getInfoFieldStyle('agent')),
         ];
         if (normalizedProfile) {
-            statusSegments.push({
-                label: 'Profile',
-                value: normalizedProfile,
-                tone: 'neutral',
-                icon: icons.info,
-            });
-        }
-        statusSegments.push({
-            label: 'Model',
-            value: this.describeModelForStatus(model, thoughtLevel),
-            tone: 'info',
-            icon: icons.info,
-        }, {
-            label: 'Tool Budget',
-            value: 'Unlimited',
-            tone: 'success',
-            icon: icons.tool,
-        });
-        const statusBar = renderStatusBar(statusSegments, { width });
-        if (statusBar.trim().length) {
-            lines.push('');
-            for (const row of statusBar.split('\n')) {
-                lines.push(this.padLine(row, width));
-            }
+            lines.push(...this.formatInfoBlock('Profile', normalizedProfile, width, this.getInfoFieldStyle('profile')));
         }
+        lines.push(...this.formatInfoBlock('Model', modelSummary, width, this.getInfoFieldStyle('model')), ...this.formatInfoBlock('Workspace', workingDir, width, this.getInfoFieldStyle('workspace')));
         return lines;
     }
     measureBannerHeight(banner) {
@@ -314,53 +426,69 @@ export class Display {
         const lines = banner.split('\n').length;
         return lines;
     }
+    /**
+     * Attempts to rewrite the banner in place using terminal cursor manipulation.
+     * Returns true if successful, false if rewrite is not possible.
+     */
     tryRewriteBanner(state, banner) {
+        // Validate TTY availability
         if (!process.stdout.isTTY) {
             return false;
         }
+        // Validate banner state
+        if (!banner || state.height <= 0) {
+            return false;
+        }
         const linesWritten = this.stdoutTracker.totalLines;
         const linesAfterBanner = linesWritten - (state.startLine + state.height);
+        // Cannot rewrite if banner position is invalid
         if (linesAfterBanner < 0) {
             return false;
         }
         const totalOffset = linesAfterBanner + state.height;
         const maxRows = process.stdout.rows;
-        if (typeof maxRows === 'number' && totalOffset > maxRows) {
+        // Cannot rewrite if offset exceeds terminal height
+        if (typeof maxRows === 'number' && maxRows > 0 && totalOffset > maxRows) {
             return false;
         }
         try {
-            moveCursor(process.stdout, 0, -totalOffset);
-            cursorTo(process.stdout, 0);
+            this.withOutput(() => {
+                // Move cursor up to banner start
+                moveCursor(process.stdout, 0, -totalOffset);
+                cursorTo(process.stdout, 0);
+                // Write new banner without tracking
+                this.stdoutTracker.withSuspended(() => {
+                    process.stdout.write(`${banner}\n`);
+                });
+                // Restore cursor position
+                if (linesAfterBanner > 0) {
+                    moveCursor(process.stdout, 0, linesAfterBanner);
+                }
+                cursorTo(process.stdout, 0);
+            });
+            return true;
         }
-        catch {
+        catch (error) {
+            // Cursor manipulation failed (e.g., terminal doesn't support it)
+            if (error instanceof Error) {
+                // Could log error in debug mode if needed
+            }
             return false;
         }
-        this.stdoutTracker.withSuspended(() => {
-            process.stdout.write(`${banner}\n`);
-        });
-        if (linesAfterBanner > 0) {
-            moveCursor(process.stdout, 0, linesAfterBanner);
-            cursorTo(process.stdout, 0);
-        }
-        else {
-            cursorTo(process.stdout, 0);
-        }
-        return true;
     }
-    renderAndStoreBanner(state, model, provider, thoughtLevel) {
+    renderAndStoreBanner(state, model, provider) {
         const width = this.getBannerWidth();
-        const effectiveThought = typeof thoughtLevel === 'undefined' ? state.thoughtLevel : thoughtLevel;
-        const lines = this.buildSessionLines(state.profileLabel, state.profileName, model, provider, state.workingDir, width, effectiveThought);
-        const bannerOptions = state.version ? { badge: state.version } : undefined;
-        const banner = this.buildBanner('Erosolar CLI', width, lines, bannerOptions);
+        const lines = this.buildSessionLines(state.profileLabel, state.profileName, model, provider, state.workingDir, width);
+        const banner = this.buildBanner('Erosolar CLI', width, lines, this.buildBannerOptions(state.version));
         const startLine = this.stdoutTracker.totalLines;
-        console.log(banner);
+        this.withOutput(() => {
+            console.log(banner);
+        });
         state.startLine = startLine;
         state.height = this.measureBannerHeight(banner);
         state.width = width;
         state.model = model;
         state.provider = provider;
-        state.thoughtLevel = effectiveThought;
     }
     formatModelLabel(model) {
         if (/gpt-5\.1-?codex/i.test(model)) {
@@ -389,55 +517,36 @@ export class Display {
         }
         return model;
     }
-    describeModelForStatus(model, thoughtLevel) {
-        const base = this.formatModelLabel(model);
-        return thoughtLevel ? `${base} (${thoughtLevel})` : base;
-    }
     buildChatBox(content, metadata) {
         const normalized = content.trim();
         if (!normalized) {
             return '';
         }
         const width = this.resolveMessageWidth();
-        const header = this.formatAssistantHeader(width);
-        const body = renderMessageBody(normalized, width);
+        const panel = renderMessagePanel(normalized, {
+            width,
+            title: 'Assistant',
+            icon: icons.assistant,
+            accentColor: theme.assistant ?? theme.primary,
+            borderColor: theme.ui.border,
+        });
         const telemetry = this.formatTelemetryLine(metadata);
-        const lines = [header, body];
-        if (telemetry) {
-            lines.push(telemetry);
+        if (!telemetry) {
+            return panel;
         }
-        return lines.join('\n');
+        return `${panel}\n${telemetry}`;
     }
     resolveMessageWidth() {
         const columns = getTerminalColumns();
-        return Math.max(42, Math.min(columns - 4, 110));
-    }
-    formatAssistantHeader(width) {
-        const label = `${icons.assistant} Assistant`;
-        const visible = this.visibleLength(label);
-        const dividerWidth = Math.max(0, width - visible - 1);
-        const divider = dividerWidth > 0 ? ` ${theme.ui.muted('─'.repeat(dividerWidth))}` : '';
-        return theme.assistant(label) + divider;
-    }
-    buildThoughtStatus(content) {
-        const blocks = content
-            .split(/\n{2,}/)
-            .map((block) => block.trimEnd())
-            .filter((block) => block.trim().length > 0);
-        if (!blocks.length) {
-            return '';
-        }
-        const format = this.getThoughtFormat();
-        const lines = [];
-        blocks.forEach((block, index) => {
-            this.appendThoughtBlock(block, format, lines);
-            if (index < blocks.length - 1) {
-                lines.push('');
-            }
-        });
-        return lines.join('\n');
-    }
-    appendThoughtBlock(block, format, output) {
+        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))
@@ -448,7 +557,7 @@ export class Display {
         const lastIndex = indices[indices.length - 1];
         let usedFirst = false;
         for (let index = 0; index < rawLines.length; index += 1) {
-            const rawLine = rawLines[index];
+            const rawLine = rawLines[index] ?? '';
             if (!rawLine.trim()) {
                 continue;
             }
@@ -478,10 +587,16 @@ export class Display {
         }
         return options.format.spacer;
     }
-    getThoughtFormat() {
-        const totalWidth = Math.max(48, Math.min(getTerminalColumns(), 96));
+    /**
+     * 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(getTerminalColumns(), DISPLAY_CONSTANTS.MAX_THOUGHT_WIDTH));
         const prefixWidth = Math.max(3, this.visibleLength(`${icons.bullet} `));
-        const available = Math.max(12, totalWidth - prefixWidth);
+        const available = Math.max(DISPLAY_CONSTANTS.MIN_WRAP_WIDTH, totalWidth - prefixWidth);
         return {
             totalWidth,
             prefixWidth,
@@ -510,11 +625,9 @@ export class Display {
         const parts = [];
         const elapsed = this.formatElapsed(metadata.elapsedMs);
         if (elapsed) {
-            parts.push(`${theme.ui.muted('elapsed')} ${elapsed}`);
-        }
-        const context = this.formatContextRemaining(metadata.usage, metadata.contextWindowTokens);
-        if (context) {
-            parts.push(theme.primary(context));
+            const elapsedLabel = theme.metrics?.elapsedLabel ?? theme.accent;
+            const elapsedValue = theme.metrics?.elapsedValue ?? theme.secondary;
+            parts.push(`${elapsedLabel('elapsed')} ${elapsedValue(elapsed)}`);
         }
         if (!parts.length) {
             return '';
@@ -534,32 +647,63 @@ export class Display {
         }
         return `${seconds}s`;
     }
-    formatContextRemaining(usage, windowTokens) {
-        const totalUsed = this.totalTokens(usage);
-        if (!windowTokens || windowTokens <= 0 || totalUsed === null) {
-            return null;
-        }
-        const remaining = Math.max(0, windowTokens - totalUsed);
-        const percent = Math.max(0, Math.min(100, Math.round((remaining / windowTokens) * 100)));
-        const remainingLabel = this.formatTokenQuantity(remaining);
-        const usedLabel = this.formatTokenQuantity(totalUsed);
-        const windowLabel = this.formatTokenQuantity(windowTokens);
-        return `Context ${remainingLabel} left (${usedLabel} used of ${windowLabel}, ${percent}% remaining)`;
-    }
-    formatTokenQuantity(value) {
-        return value.toLocaleString('en-US');
+    buildClaudeStyleBanner(profileLabel, model, _provider, workingDir, width) {
+        const gradient = theme.gradient.cool;
+        const dim = theme.ui.muted;
+        // Build centered content
+        const lines = [];
+        // Top border
+        lines.push(gradient(`╭${'─'.repeat(width)}╮`));
+        // Empty line
+        lines.push(gradient('│') + ' '.repeat(width) + gradient('│'));
+        // Welcome message - centered
+        const userName = process.env['USER'] || 'User';
+        const welcome = `Welcome back ${userName}!`;
+        lines.push(this.centerLine(welcome, width, gradient));
+        // Empty line
+        lines.push(gradient('│') + ' '.repeat(width) + gradient('│'));
+        // Empty line
+        lines.push(gradient('│') + ' '.repeat(width) + gradient('│'));
+        // Epsilon logo - centered (Claude Code style)
+        const logo = [
+            '∴  ε  ∴',
+            '✻ ε ε ε ✻',
+            '∴  ε  ∴',
+        ];
+        for (const logoLine of logo) {
+            lines.push(this.centerLine(logoLine, width, gradient));
+        }
+        // Empty line
+        lines.push(gradient('│') + ' '.repeat(width) + gradient('│'));
+        // Empty line
+        lines.push(gradient('│') + ' '.repeat(width) + gradient('│'));
+        // Model name - centered
+        lines.push(this.centerLine(model, width, gradient));
+        // Profile label - centered
+        lines.push(this.centerLine(profileLabel, width, gradient, dim));
+        // Workspace - centered
+        const shortPath = this.abbreviatePath(workingDir, width - 8);
+        lines.push(this.centerLine(shortPath, width, gradient, dim));
+        // Empty line
+        lines.push(gradient('│') + ' '.repeat(width) + gradient('│'));
+        // Bottom border
+        lines.push(gradient(`╰${'─'.repeat(width)}╯`));
+        return lines.join('\n');
     }
-    totalTokens(usage) {
-        if (!usage) {
-            return null;
-        }
-        if (typeof usage.totalTokens === 'number' && Number.isFinite(usage.totalTokens)) {
-            return usage.totalTokens;
-        }
-        const input = typeof usage.inputTokens === 'number' ? usage.inputTokens : 0;
-        const output = typeof usage.outputTokens === 'number' ? usage.outputTokens : 0;
-        const sum = input + output;
-        return sum > 0 ? sum : null;
+    centerLine(text, width, borderColor, textColor) {
+        const visibleLen = this.visibleLength(text);
+        const padding = Math.max(0, Math.floor((width - visibleLen) / 2));
+        const rightPad = width - visibleLen - padding;
+        const colored = textColor ? textColor(text) : text;
+        return borderColor('│') + ' '.repeat(padding) + colored + ' '.repeat(rightPad) + borderColor('│');
+    }
+    abbreviatePath(path, maxLen) {
+        if (path.length <= maxLen)
+            return path;
+        const parts = path.split('/');
+        if (parts.length <= 2)
+            return path;
+        return parts[0] + '/.../' + parts[parts.length - 1];
     }
     buildBanner(title, width, lines, options) {
         const badge = options?.badge ? ` ${options.badge}` : '';
@@ -571,6 +715,12 @@ export class Display {
         const bottom = gradient(`╰${'─'.repeat(width)}╯`);
         return `${top}\n${body}\n${bottom}`;
     }
+    buildBannerOptions(version) {
+        if (!version?.trim()) {
+            return undefined;
+        }
+        return { badge: `${version.trim()} • support@ero.solar` };
+    }
     buildBannerLine(text, width) {
         const padded = this.padLine(text, width);
         const tinted = theme.ui.background(theme.ui.text(padded));
@@ -578,23 +728,72 @@ export class Display {
         return `${edge}${tinted}${edge}`;
     }
     padLine(text, width) {
-        const normalized = text.length > width ? text.slice(0, width) : text;
-        const padding = width - normalized.length;
-        return `${normalized}${' '.repeat(Math.max(0, padding))}`;
-    }
-    formatInfoBlock(label, value, 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)}`;
+    }
+    /**
+     * Formats an info block with label and value, wrapping if needed.
+     * First line gets the label prefix, subsequent lines are indented.
+     */
+    formatInfoBlock(label, value, width, options) {
+        // Validate inputs
+        if (!label?.trim() || !value?.trim()) {
+            return [];
+        }
+        if (width <= 0) {
+            return [value];
+        }
         const prefix = `${label.toUpperCase()}: `;
-        const available = Math.max(10, width - prefix.length);
+        const prefixLength = prefix.length;
+        const available = Math.max(DISPLAY_CONSTANTS.MIN_CONTENT_WIDTH, width - prefixLength);
         const wrapped = this.wrapLine(value, available);
         return wrapped.map((line, index) => {
-            const indent = index === 0 ? prefix : ' '.repeat(prefix.length);
-            return this.padLine(`${indent}${line}`, width);
+            const indent = index === 0 ? prefix : ' '.repeat(prefixLength);
+            const raw = `${indent}${line}`;
+            const padded = this.padLine(raw, width);
+            if (!options) {
+                return padded;
+            }
+            const labelColor = index === 0 ? options.labelColor : undefined;
+            return this.applyInfoLineStyles(padded, prefixLength, line.length, labelColor, options.valueColor);
         });
     }
+    applyInfoLineStyles(line, prefixLength, valueLength, labelColor, valueColor) {
+        const prefix = line.slice(0, prefixLength);
+        const remainder = line.slice(prefixLength);
+        const tintedPrefix = labelColor ? labelColor(prefix) : prefix;
+        const safeValueLength = Math.max(0, Math.min(valueLength, remainder.length));
+        if (!valueColor || safeValueLength <= 0) {
+            return `${tintedPrefix}${remainder}`;
+        }
+        const valueSegment = remainder.slice(0, safeValueLength);
+        const trailing = remainder.slice(safeValueLength);
+        const tintedValue = valueColor(valueSegment);
+        return `${tintedPrefix}${tintedValue}${trailing}`;
+    }
+    getInfoFieldStyle(field) {
+        const labelColor = theme.fields?.label ?? ((text) => text);
+        const valueColor = theme.fields?.[field] ?? ((text) => text);
+        return {
+            labelColor,
+            valueColor,
+        };
+    }
+    /**
+     * 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) {
-        const width = Math.max(40, Math.min(getTerminalColumns(), 90));
+        if (!text) {
+            return prefix.trimEnd();
+        }
+        const width = Math.max(DISPLAY_CONSTANTS.MIN_ACTION_WIDTH, Math.min(getTerminalColumns(), DISPLAY_CONSTANTS.MAX_ACTION_WIDTH));
         const prefixWidth = this.visibleLength(prefix);
-        const available = Math.max(10, 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));
@@ -638,11 +837,19 @@ export class Display {
         const colorize = this.resolveStatusColor(status);
         return colorize(`${icons.action}`);
     }
+    buildClaudeStyleThought(content) {
+        // Claude Code style: compact ⏺ prefix for thoughts
+        const prefix = theme.ui.muted('⏺') + ' ';
+        return this.wrapWithPrefix(content, prefix);
+    }
+    // @ts-ignore - Legacy method kept for compatibility
+    // Keep legacy method to avoid breaking changes
     buildSubActionPrefixes(status, isLast) {
         if (isLast) {
             const colorize = this.resolveStatusColor(status);
+            // Claude Code style: use ⎿ for sub-action prefix
             return {
-                prefix: `  ${colorize('└')} `,
+                prefix: `  ${colorize(icons.subaction)} `,
                 continuation: '    ',
             };
         }
@@ -652,7 +859,12 @@ export class Display {
             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];
         }
@@ -662,70 +874,119 @@ export class Display {
         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 = '';
-        const words = text.split(/\s+/).filter(Boolean);
-        const appendWord = (word) => {
-            if (!word.length) {
-                return;
-            }
-            if (!current.length) {
-                if (word.length <= width) {
-                    current = word;
-                    return;
-                }
-                const chunks = this.chunkWord(word, width);
-                lines.push(...chunks.slice(0, -1));
-                current = chunks[chunks.length - 1];
-                return;
-            }
-            if (current.length + 1 + word.length <= width) {
-                current += ` ${word}`;
-                return;
+        for (const word of words) {
+            const appendResult = this.tryAppendWord(current, word, width);
+            if (appendResult.shouldFlush) {
+                lines.push(current);
             }
-            lines.push(current);
-            if (word.length <= width) {
-                current = word;
+            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 {
-                const chunks = this.chunkWord(word, width);
-                lines.push(...chunks.slice(0, -1));
-                current = chunks[chunks.length - 1];
+                current = appendResult.newCurrent;
             }
-        };
-        if (!words.length) {
-            const chunks = this.chunkWord(text, width);
-            return chunks;
-        }
-        for (const word of words) {
-            appendWord(word);
         }
         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) {
-            return [word];
+        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;
+        return chunks.length > 0 ? chunks : [''];
     }
+    /**
+     * Pads a prefix string to the specified width with spaces.
+     */
     padPrefix(value, width) {
-        if (value.length >= 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.
+     */
     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