shortcutxl 0.2.0

package/dist/modes/interactive/components/assistant-message.js

@@ -0,0 +1,94 @@
+import { ABORT_UI_LABEL } from '../../../core/abort.js';
+import { ERROR_MAX_CHARS_UI } from '../../../core/tools/truncate.js';
+import { Container, Markdown, Spacer, Text } from '../../../tui/index.js';
+import { theme } from '../../../core/theme.js';
+import { getMarkdownTheme } from '../theme/theme.js';
+import { PREFIX_WIDTH, assistantPrefix, prefixLines } from './layout.js';
+/**
+ * Component that renders a complete assistant message
+ */
+export class AssistantMessageComponent extends Container {
+    contentContainer;
+    hideThinkingBlock;
+    markdownTheme;
+    lastMessage;
+    constructor(message, hideThinkingBlock = false, markdownTheme = getMarkdownTheme()) {
+        super();
+        this.hideThinkingBlock = hideThinkingBlock;
+        this.markdownTheme = markdownTheme;
+        // Container for text/thinking content
+        this.contentContainer = new Container();
+        this.addChild(this.contentContainer);
+        if (message) {
+            this.updateContent(message);
+        }
+    }
+    invalidate() {
+        super.invalidate();
+        if (this.lastMessage) {
+            this.updateContent(this.lastMessage);
+        }
+    }
+    render(width) {
+        return prefixLines(super.render(width - PREFIX_WIDTH), assistantPrefix());
+    }
+    setHideThinkingBlock(hide) {
+        this.hideThinkingBlock = hide;
+    }
+    updateContent(message) {
+        this.lastMessage = message;
+        // Clear content container
+        this.contentContainer.clear();
+        const hasVisibleContent = message.content.some((c) => (c.type === 'text' && c.text.trim()) || (c.type === 'thinking' && c.thinking.trim()));
+        if (hasVisibleContent) {
+            this.contentContainer.addChild(new Spacer(1));
+        }
+        // Render content in order
+        for (let i = 0; i < message.content.length; i++) {
+            const content = message.content[i];
+            if (content.type === 'text' && content.text.trim()) {
+                this.contentContainer.addChild(new Markdown(content.text.trim(), 0, 0, this.markdownTheme));
+            }
+            else if (content.type === 'thinking' && content.thinking.trim()) {
+                // Add spacing only when another visible assistant content block follows.
+                // This avoids a superfluous blank line before separately-rendered tool execution blocks.
+                const hasVisibleContentAfter = message.content
+                    .slice(i + 1)
+                    .some((c) => (c.type === 'text' && c.text.trim()) || (c.type === 'thinking' && c.thinking.trim()));
+                if (this.hideThinkingBlock) {
+                    this.contentContainer.addChild(new Text(theme.italic(theme.fg('thinkingText', 'Thinking...')), 0, 0));
+                    if (hasVisibleContentAfter) {
+                        this.contentContainer.addChild(new Spacer(1));
+                    }
+                }
+                else {
+                    this.contentContainer.addChild(new Markdown(content.thinking.trim(), 0, 0, this.markdownTheme, {
+                        color: (text) => theme.fg('thinkingText', text),
+                        italic: true
+                    }));
+                    if (hasVisibleContentAfter) {
+                        this.contentContainer.addChild(new Spacer(1));
+                    }
+                }
+            }
+        }
+        // Check if aborted - show after partial content
+        // But only if there are no tool calls (tool execution components will show the error)
+        const hasToolCalls = message.content.some((c) => c.type === 'toolCall');
+        if (!hasToolCalls) {
+            if (message.stopReason === 'aborted') {
+                const abortMessage = message.errorMessage && message.errorMessage !== 'Request was aborted'
+                    ? message.errorMessage
+                    : ABORT_UI_LABEL;
+                this.contentContainer.addChild(new Text(`${theme.fg('muted', '⎿')}  ${theme.fg('success', abortMessage)}`, 0, 0));
+            }
+            else if (message.stopReason === 'error') {
+                const raw = message.errorMessage || 'Unknown error';
+                const errorMsg = raw.length > ERROR_MAX_CHARS_UI ? `${raw.slice(0, ERROR_MAX_CHARS_UI)}...` : raw;
+                this.contentContainer.addChild(new Spacer(1));
+                this.contentContainer.addChild(new Text(theme.fg('error', `Error: ${errorMsg}`), 0, 0));
+            }
+        }
+    }
+}
+//# sourceMappingURL=assistant-message.js.map

package/dist/modes/interactive/components/bash-execution.js

@@ -0,0 +1,171 @@
+/**
+ * Component for displaying bash command execution with streaming output.
+ */
+import { ABORT_UI_LABEL_INLINE } from '../../../core/abort.js';
+import { Container, Loader, Spacer, Text } from '../../../tui/index.js';
+import stripAnsi from 'strip-ansi';
+import { theme } from '../../../core/theme.js';
+import { truncateHead } from '../../../core/tools/truncate.js';
+import { DynamicBorder } from './dynamic-border.js';
+import { editorKey } from './keybinding-hints.js';
+import { truncateToVisualLines } from './visual-truncate.js';
+// Preview line limit when not expanded (matches tool execution behavior)
+const PREVIEW_LINES = 2;
+export class BashExecutionComponent extends Container {
+    command;
+    outputLines = [];
+    status = 'running';
+    exitCode = undefined;
+    loader;
+    truncationResult;
+    fullOutputPath;
+    expanded = false;
+    contentContainer;
+    ui;
+    constructor(command, ui, excludeFromContext = false) {
+        super();
+        this.command = command;
+        this.ui = ui;
+        // Use dim border for excluded-from-context commands (!! prefix)
+        const colorKey = excludeFromContext ? 'dim' : 'bashMode';
+        const borderColor = (str) => theme.fg(colorKey, str);
+        // Add spacer
+        this.addChild(new Spacer(1));
+        // Top border
+        this.addChild(new DynamicBorder(borderColor));
+        // Content container (holds dynamic content between borders)
+        this.contentContainer = new Container();
+        this.addChild(this.contentContainer);
+        // Command header (first line only)
+        const firstLine = command.split('\n')[0];
+        const displayCmd = command.includes('\n') ? `${firstLine} …` : firstLine;
+        const header = new Text(theme.fg(colorKey, theme.bold(`$ ${displayCmd}`)), 1, 0);
+        this.contentContainer.addChild(header);
+        // Loader
+        this.loader = new Loader(ui, (spinner) => theme.fg(colorKey, spinner), (text) => theme.fg('muted', text), `Running... (${editorKey('selectCancel')} to cancel)` // Plain text for loader
+        );
+        this.contentContainer.addChild(this.loader);
+        // Bottom border
+        this.addChild(new DynamicBorder(borderColor));
+    }
+    /**
+     * Set whether the output is expanded (shows full output) or collapsed (preview only).
+     */
+    setExpanded(expanded) {
+        this.expanded = expanded;
+        this.updateDisplay();
+    }
+    invalidate() {
+        super.invalidate();
+        this.updateDisplay();
+    }
+    appendOutput(chunk) {
+        // Strip ANSI codes and normalize line endings
+        // Note: binary data is already sanitized in tui-renderer.ts executeBashCommand
+        const clean = stripAnsi(chunk).replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+        // Append to output lines
+        const newLines = clean.split('\n');
+        if (this.outputLines.length > 0 && newLines.length > 0) {
+            // Append first chunk to last line (incomplete line continuation)
+            this.outputLines[this.outputLines.length - 1] += newLines[0];
+            this.outputLines.push(...newLines.slice(1));
+        }
+        else {
+            this.outputLines.push(...newLines);
+        }
+        this.updateDisplay();
+    }
+    setComplete(exitCode, cancelled, truncationResult, fullOutputPath) {
+        this.exitCode = exitCode;
+        this.status = cancelled
+            ? 'cancelled'
+            : exitCode !== 0 && exitCode !== undefined && exitCode !== null
+                ? 'error'
+                : 'complete';
+        this.truncationResult = truncationResult;
+        this.fullOutputPath = fullOutputPath;
+        // Stop loader
+        this.loader.stop();
+        this.updateDisplay();
+    }
+    updateDisplay() {
+        // Apply truncation for LLM context limits (same limits as bash tool)
+        const fullOutput = this.outputLines.join('\n');
+        const contextTruncation = truncateHead(fullOutput);
+        // Get the lines to potentially display (after context truncation)
+        const availableLines = contextTruncation.content ? contextTruncation.content.split('\n') : [];
+        // Apply preview truncation based on expanded state
+        const previewLogicalLines = availableLines.slice(-PREVIEW_LINES);
+        // Rebuild content container
+        this.contentContainer.clear();
+        // Command header (first line only)
+        const firstLine = this.command.split('\n')[0];
+        const displayCmd = this.command.includes('\n') ? `${firstLine} …` : firstLine;
+        const header = new Text(theme.fg('bashMode', theme.bold(`$ ${displayCmd}`)), 1, 0);
+        this.contentContainer.addChild(header);
+        // Loader or status
+        if (this.status === 'running') {
+            // While running, show output preview and loader
+            if (availableLines.length > 0) {
+                const styledOutput = previewLogicalLines.map((line) => theme.fg('muted', line)).join('\n');
+                const { visualLines } = truncateToVisualLines(`\n${styledOutput}`, PREVIEW_LINES, this.ui.terminal.columns, 1 // padding
+                );
+                this.contentContainer.addChild({ render: () => visualLines, invalidate: () => { } });
+            }
+            this.contentContainer.addChild(this.loader);
+        }
+        else if (this.expanded) {
+            // Expanded: show all output lines
+            if (availableLines.length > 0) {
+                const displayText = availableLines.map((line) => theme.fg('muted', line)).join('\n');
+                this.contentContainer.addChild(new Text(`\n${displayText}`, 1, 0));
+            }
+            const statusParts = [];
+            if (this.status === 'cancelled') {
+                statusParts.push(theme.fg('warning', ABORT_UI_LABEL_INLINE));
+            }
+            else if (this.status === 'error') {
+                statusParts.push(theme.fg('error', `(exit ${this.exitCode})`));
+            }
+            const wasTruncated = this.truncationResult?.truncated || contextTruncation.truncated;
+            if (wasTruncated && this.fullOutputPath) {
+                statusParts.push(theme.fg('warning', `Output truncated. Full output: ${this.fullOutputPath}`));
+            }
+            if (statusParts.length > 0) {
+                this.contentContainer.addChild(new Text(`\n${statusParts.join('\n')}`, 1, 0));
+            }
+        }
+        else {
+            // Collapsed and complete: show header + last line of output
+            if (availableLines.length > 0) {
+                // Show only the last non-empty line
+                const lastLine = [...availableLines].reverse().find((l) => l.trim() !== '') ??
+                    availableLines[availableLines.length - 1];
+                this.contentContainer.addChild(new Text(theme.fg('muted', lastLine), 1, 0));
+            }
+            const statusParts = [];
+            if (this.status === 'cancelled') {
+                statusParts.push(theme.fg('warning', ABORT_UI_LABEL_INLINE));
+            }
+            else if (this.status === 'error') {
+                statusParts.push(theme.fg('error', `(exit ${this.exitCode})`));
+            }
+            if (statusParts.length > 0) {
+                this.contentContainer.addChild(new Text(`\n${statusParts.join('\n')}`, 1, 0));
+            }
+        }
+    }
+    /**
+     * Get the raw output for creating BashExecutionMessage.
+     */
+    getOutput() {
+        return this.outputLines.join('\n');
+    }
+    /**
+     * Get the command that was executed.
+     */
+    getCommand() {
+        return this.command;
+    }
+}
+//# sourceMappingURL=bash-execution.js.map

package/dist/modes/interactive/components/bordered-loader.js

@@ -0,0 +1,51 @@
+import { CancellableLoader, Container, Loader, Spacer, Text } from '../../../tui/index.js';
+import { DynamicBorder } from './dynamic-border.js';
+import { keyHint } from './keybinding-hints.js';
+/** Loader wrapped with borders for extension UI */
+export class BorderedLoader extends Container {
+    loader;
+    cancellable;
+    signalController;
+    constructor(tui, theme, message, options) {
+        super();
+        this.cancellable = options?.cancellable ?? true;
+        const borderColor = (s) => theme.fg('border', s);
+        this.addChild(new DynamicBorder(borderColor));
+        if (this.cancellable) {
+            this.loader = new CancellableLoader(tui, (s) => theme.fg('accent', s), (s) => theme.fg('muted', s), message);
+        }
+        else {
+            this.signalController = new AbortController();
+            this.loader = new Loader(tui, (s) => theme.fg('accent', s), (s) => theme.fg('muted', s), message);
+        }
+        this.addChild(this.loader);
+        if (this.cancellable) {
+            this.addChild(new Spacer(1));
+            this.addChild(new Text(keyHint('selectCancel', 'cancel'), 1, 0));
+        }
+        this.addChild(new Spacer(1));
+        this.addChild(new DynamicBorder(borderColor));
+    }
+    get signal() {
+        if (this.cancellable) {
+            return this.loader.signal;
+        }
+        return this.signalController?.signal ?? new AbortController().signal;
+    }
+    set onAbort(fn) {
+        if (this.cancellable) {
+            this.loader.onAbort = fn;
+        }
+    }
+    handleInput(data) {
+        if (this.cancellable) {
+            this.loader.handleInput(data);
+        }
+    }
+    dispose() {
+        if ('dispose' in this.loader && typeof this.loader.dispose === 'function') {
+            this.loader.dispose();
+        }
+    }
+}
+//# sourceMappingURL=bordered-loader.js.map

package/dist/modes/interactive/components/branch-summary-message.js

@@ -0,0 +1,45 @@
+import { Box, Markdown, Spacer, Text } from '../../../tui/index.js';
+import { theme } from '../../../core/theme.js';
+import { getMarkdownTheme } from '../theme/theme.js';
+import { editorKey } from './keybinding-hints.js';
+/**
+ * Component that renders a branch summary message with collapsed/expanded state.
+ * Uses same background color as custom messages for visual consistency.
+ */
+export class BranchSummaryMessageComponent extends Box {
+    expanded = false;
+    message;
+    markdownTheme;
+    constructor(message, markdownTheme = getMarkdownTheme()) {
+        super(1, 1, (t) => theme.bg('customMessageBg', t));
+        this.message = message;
+        this.markdownTheme = markdownTheme;
+        this.updateDisplay();
+    }
+    setExpanded(expanded) {
+        this.expanded = expanded;
+        this.updateDisplay();
+    }
+    invalidate() {
+        super.invalidate();
+        this.updateDisplay();
+    }
+    updateDisplay() {
+        this.clear();
+        const label = theme.fg('customMessageLabel', `\x1b[1m[branch]\x1b[22m`);
+        this.addChild(new Text(label, 0, 0));
+        this.addChild(new Spacer(1));
+        if (this.expanded) {
+            const header = '**Branch Summary**\n\n';
+            this.addChild(new Markdown(header + this.message.summary, 0, 0, this.markdownTheme, {
+                color: (text) => theme.fg('customMessageText', text)
+            }));
+        }
+        else {
+            this.addChild(new Text(theme.fg('customMessageText', 'Branch summary (') +
+                theme.fg('dim', editorKey('expandTools')) +
+                theme.fg('customMessageText', ' to expand)'), 0, 0));
+        }
+    }
+}
+//# sourceMappingURL=branch-summary-message.js.map

package/dist/modes/interactive/components/compaction-summary-message.js

@@ -0,0 +1,46 @@
+import { Box, Markdown, Spacer, Text } from '../../../tui/index.js';
+import { theme } from '../../../core/theme.js';
+import { getMarkdownTheme } from '../theme/theme.js';
+import { editorKey } from './keybinding-hints.js';
+/**
+ * Component that renders a compaction message with collapsed/expanded state.
+ * Uses same background color as custom messages for visual consistency.
+ */
+export class CompactionSummaryMessageComponent extends Box {
+    expanded = false;
+    message;
+    markdownTheme;
+    constructor(message, markdownTheme = getMarkdownTheme()) {
+        super(1, 1, (t) => theme.bg('customMessageBg', t));
+        this.message = message;
+        this.markdownTheme = markdownTheme;
+        this.updateDisplay();
+    }
+    setExpanded(expanded) {
+        this.expanded = expanded;
+        this.updateDisplay();
+    }
+    invalidate() {
+        super.invalidate();
+        this.updateDisplay();
+    }
+    updateDisplay() {
+        this.clear();
+        const tokenStr = this.message.tokensBefore.toLocaleString();
+        const label = theme.fg('customMessageLabel', `\x1b[1m[compaction]\x1b[22m`);
+        this.addChild(new Text(label, 0, 0));
+        this.addChild(new Spacer(1));
+        if (this.expanded) {
+            const header = `**Compacted from ${tokenStr} tokens**\n\n`;
+            this.addChild(new Markdown(header + this.message.summary, 0, 0, this.markdownTheme, {
+                color: (text) => theme.fg('customMessageText', text)
+            }));
+        }
+        else {
+            this.addChild(new Text(theme.fg('customMessageText', `Compacted from ${tokenStr} tokens (`) +
+                theme.fg('dim', editorKey('expandTools')) +
+                theme.fg('customMessageText', ' to expand)'), 0, 0));
+        }
+    }
+}
+//# sourceMappingURL=compaction-summary-message.js.map