shortcutxl 0.2.0

package/dist/modes/interactive/components/user-message-selector.js

@@ -0,0 +1,115 @@
+import { Container, getEditorKeybindings, Spacer, Text, truncateToWidth } from '../../../tui/index.js';
+import { theme } from '../../../core/theme.js';
+import { DynamicBorder } from './dynamic-border.js';
+/**
+ * Custom user message list component with selection
+ */
+class UserMessageList {
+    messages = [];
+    selectedIndex = 0;
+    onSelect;
+    onCancel;
+    maxVisible = 10; // Max messages visible
+    constructor(messages) {
+        // Store messages in chronological order (oldest to newest)
+        this.messages = messages;
+        // Start with the last (most recent) message selected
+        this.selectedIndex = Math.max(0, messages.length - 1);
+    }
+    invalidate() {
+        // No cached state to invalidate currently
+    }
+    render(width) {
+        const lines = [];
+        if (this.messages.length === 0) {
+            lines.push(theme.fg('muted', '  No user messages found'));
+            return lines;
+        }
+        // Calculate visible range with scrolling
+        const startIndex = Math.max(0, Math.min(this.selectedIndex - Math.floor(this.maxVisible / 2), this.messages.length - this.maxVisible));
+        const endIndex = Math.min(startIndex + this.maxVisible, this.messages.length);
+        // Render visible messages (2 lines per message + blank line)
+        for (let i = startIndex; i < endIndex; i++) {
+            const message = this.messages[i];
+            const isSelected = i === this.selectedIndex;
+            // Normalize message to single line
+            const normalizedMessage = message.text.replace(/\n/g, ' ').trim();
+            // First line: cursor + message
+            const cursor = isSelected ? theme.fg('accent', '› ') : '  ';
+            const maxMsgWidth = width - 2; // Account for cursor (2 chars)
+            const truncatedMsg = truncateToWidth(normalizedMessage, maxMsgWidth);
+            const messageLine = cursor + (isSelected ? theme.bold(truncatedMsg) : truncatedMsg);
+            lines.push(messageLine);
+            // Second line: metadata (position in history)
+            const position = i + 1;
+            const metadata = `  Message ${position} of ${this.messages.length}`;
+            const metadataLine = theme.fg('muted', metadata);
+            lines.push(metadataLine);
+            lines.push(''); // Blank line between messages
+        }
+        // Add scroll indicator if needed
+        if (startIndex > 0 || endIndex < this.messages.length) {
+            const scrollInfo = theme.fg('muted', `  (${this.selectedIndex + 1}/${this.messages.length})`);
+            lines.push(scrollInfo);
+        }
+        return lines;
+    }
+    handleInput(keyData) {
+        const kb = getEditorKeybindings();
+        // Up arrow - go to previous (older) message, wrap to bottom when at top
+        if (kb.matches(keyData, 'selectUp')) {
+            this.selectedIndex =
+                this.selectedIndex === 0 ? this.messages.length - 1 : this.selectedIndex - 1;
+        }
+        // Down arrow - go to next (newer) message, wrap to top when at bottom
+        else if (kb.matches(keyData, 'selectDown')) {
+            this.selectedIndex =
+                this.selectedIndex === this.messages.length - 1 ? 0 : this.selectedIndex + 1;
+        }
+        // Enter - select message and branch
+        else if (kb.matches(keyData, 'selectConfirm')) {
+            const selected = this.messages[this.selectedIndex];
+            if (selected && this.onSelect) {
+                this.onSelect(selected.id);
+            }
+        }
+        // Escape - cancel
+        else if (kb.matches(keyData, 'selectCancel')) {
+            if (this.onCancel) {
+                this.onCancel();
+            }
+        }
+    }
+}
+/**
+ * Component that renders a user message selector for branching
+ */
+export class UserMessageSelectorComponent extends Container {
+    messageList;
+    constructor(messages, onSelect, onCancel) {
+        super();
+        // Add header
+        this.addChild(new Spacer(1));
+        this.addChild(new Text(theme.bold('Branch from Message'), 1, 0));
+        this.addChild(new Text(theme.fg('muted', 'Select a message to create a new branch from that point'), 1, 0));
+        this.addChild(new Spacer(1));
+        this.addChild(new DynamicBorder());
+        this.addChild(new Spacer(1));
+        // Create message list
+        this.messageList = new UserMessageList(messages);
+        this.messageList.onSelect = onSelect;
+        this.messageList.onCancel = onCancel;
+        this.addChild(this.messageList);
+        // Add bottom border
+        this.addChild(new Spacer(1));
+        this.addChild(new DynamicBorder());
+        // Auto-cancel if no messages
+        if (messages.length === 0) {
+            setTimeout(() => onCancel(), 100);
+        }
+    }
+    getMessageList() {
+        return this.messageList;
+    }
+}
+//# sourceMappingURL=user-message-selector.js.map

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

@@ -0,0 +1,48 @@
+import { Box, Container, Markdown, Spacer, Text } from '../../../tui/index.js';
+import { theme } from '../../../core/theme.js';
+import { formatAttachmentLabels } from '../file-attachments.js';
+import { getMarkdownTheme } from '../theme/theme.js';
+import { CONTENT_PAD_X, CONTENT_PAD_Y } from './layout.js';
+/**
+ * Component that renders a user message with an optional right-aligned annotation
+ * and file attachment labels.
+ */
+export class UserMessageComponent extends Container {
+    _annotation;
+    _attachments;
+    box;
+    constructor(text, markdownTheme = getMarkdownTheme()) {
+        super();
+        this.addChild(new Spacer(1));
+        this.box = new Box(CONTENT_PAD_X, CONTENT_PAD_Y, (t) => theme.bg('userMessageBg', t));
+        this.box.addChild(new Markdown(text, 0, 0, markdownTheme, {
+            color: (text) => theme.fg('userMessageText', text)
+        }));
+        this.addChild(this.box);
+    }
+    /** Set a dim annotation shown above the message (e.g. workbook names). */
+    setAnnotation(text) {
+        if (!this._annotation) {
+            this._annotation = new Text(theme.fg('dim', text), 0, 0);
+            // Insert between Spacer and Box
+            this.children.splice(1, 0, this._annotation);
+        }
+        else {
+            this._annotation.setText(theme.fg('dim', text));
+        }
+    }
+    /** Set file attachment labels shown below the message with ⎿ glyph. */
+    setAttachments(filePaths) {
+        if (filePaths.length === 0)
+            return;
+        const labels = formatAttachmentLabels(filePaths);
+        if (!this._attachments) {
+            this._attachments = new Text(labels, 0, 0);
+            this.box.addChild(this._attachments);
+        }
+        else {
+            this._attachments.setText(labels);
+        }
+    }
+}
+//# sourceMappingURL=user-message.js.map

package/dist/modes/interactive/components/visual-truncate.js

@@ -0,0 +1,33 @@
+/**
+ * Shared utility for truncating text to visual lines (accounting for line wrapping).
+ * Used by both tool-execution.ts and bash-execution.ts for consistent behavior.
+ */
+import { Text } from '../../../tui/index.js';
+/**
+ * Truncate text to a maximum number of visual lines (from the end).
+ * This accounts for line wrapping based on terminal width.
+ *
+ * @param text - The text content (may contain newlines)
+ * @param maxVisualLines - Maximum number of visual lines to show
+ * @param width - Terminal/render width
+ * @param paddingX - Horizontal padding for Text component (default 0).
+ *                   Use 0 when result will be placed in a Box (Box adds its own padding).
+ *                   Use 1 when result will be placed in a plain Container.
+ * @returns The truncated visual lines and count of skipped lines
+ */
+export function truncateToVisualLines(text, maxVisualLines, width, paddingX = 0) {
+    if (!text) {
+        return { visualLines: [], skippedCount: 0 };
+    }
+    // Create a temporary Text component to render and get visual lines
+    const tempText = new Text(text, paddingX, 0);
+    const allVisualLines = tempText.render(width);
+    if (allVisualLines.length <= maxVisualLines) {
+        return { visualLines: allVisualLines, skippedCount: 0 };
+    }
+    // Take the last N visual lines
+    const truncatedLines = allVisualLines.slice(-maxVisualLines);
+    const skippedCount = allVisualLines.length - maxVisualLines;
+    return { visualLines: truncatedLines, skippedCount };
+}
+//# sourceMappingURL=visual-truncate.js.map

package/dist/modes/interactive/file-attachments.js

@@ -0,0 +1,135 @@
+/**
+ * File attachment utilities and state manager for the interactive mode.
+ * Handles serialization/deserialization of attached file paths in messages,
+ * display formatting, input helpers, and stdin file-drop interception.
+ */
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import { Text } from '../../tui/index.js';
+import { theme } from '../../core/theme.js';
+/** Header sent to the LLM when files are attached. Used for both serialization and parsing. */
+const ATTACHMENT_HEADER = 'the user attached the following files:';
+/** Strip surrounding single or double quotes from a string. */
+export function stripQuotes(s) {
+    if ((s.startsWith("'") && s.endsWith("'")) ||
+        (s.startsWith('"') && s.endsWith('"'))) {
+        return s.slice(1, -1);
+    }
+    return s;
+}
+/** Check if a path points to a non-empty file. */
+function isAttachableFile(filePath) {
+    try {
+        const stats = fs.statSync(filePath);
+        return stats.isFile() && stats.size > 0;
+    }
+    catch {
+        return false;
+    }
+}
+/** Append attached file paths to the user's message text for the LLM. */
+export function appendAttachedFiles(text, files) {
+    if (files.length === 0)
+        return text;
+    const attachment = `${ATTACHMENT_HEADER}\n${files.join('\n')}`;
+    return text ? `${text}\n${attachment}` : attachment;
+}
+/** Parse attached file paths from a message that was serialized with appendAttachedFiles. */
+export function parseAttachedFiles(textContent) {
+    const headerWithNewline = `${ATTACHMENT_HEADER}\n`;
+    const headerIdx = textContent.indexOf(headerWithNewline);
+    if (headerIdx === -1) {
+        return { displayText: textContent, attachedFiles: [] };
+    }
+    const attachedFiles = [];
+    const afterHeader = textContent.substring(headerIdx + headerWithNewline.length);
+    for (const line of afterHeader.split('\n')) {
+        const trimmed = line.trim();
+        if (trimmed.length > 0) {
+            attachedFiles.push(trimmed);
+        }
+        else {
+            break;
+        }
+    }
+    const displayText = textContent.substring(0, headerIdx).trim();
+    return { displayText, attachedFiles };
+}
+/** Format file paths for chat history display with ⎿ glyph and underlined basenames. */
+export function formatAttachmentLabels(filePaths) {
+    return filePaths
+        .map((fp) => `  ⎿  ${theme.underline(path.basename(fp))}`)
+        .join('\n');
+}
+/**
+ * Manages file attachment state, display, and stdin interception.
+ * InteractiveMode creates one instance and wires its `displayComponent` into the editor container.
+ */
+export class AttachmentManager {
+    files = [];
+    /** Text component showing attachment previews above the editor. */
+    displayComponent;
+    onChanged;
+    constructor(onChanged) {
+        this.displayComponent = new Text('', 1, 0);
+        this.onChanged = onChanged;
+    }
+    /** Validate and add a file. Returns true if added. */
+    add(filePath) {
+        if (this.files.includes(filePath))
+            return true;
+        if (!isAttachableFile(filePath))
+            return false;
+        this.files.push(filePath);
+        this.updateDisplay();
+        this.onChanged();
+        return true;
+    }
+    /** Take all files and clear. Returns the file paths that were attached. */
+    take() {
+        const taken = this.files;
+        this.files = [];
+        this.updateDisplay();
+        return taken;
+    }
+    /** Whether any files are currently attached. */
+    get hasFiles() {
+        return this.files.length > 0;
+    }
+    /**
+     * Intercept file drops on macOS.
+     * macOS terminals send dropped files as raw quoted paths on stdin without
+     * bracketed paste markers. We monkey-patch the terminal's stdin handler
+     * to detect and redirect them to the attachment system.
+     */
+    interceptStdinFileDrops(terminal) {
+        const originalHandler = terminal.stdinDataHandler;
+        if (!originalHandler)
+            return;
+        terminal.stdinDataHandler = (data) => {
+            const trimmed = data.trim();
+            if (trimmed.length >= 2) {
+                const candidate = stripQuotes(trimmed);
+                if (candidate.startsWith('/') && !/[\x00-\x1f]/.test(candidate)) {
+                    if (this.add(candidate)) {
+                        return; // Swallow — don't pass to terminal
+                    }
+                }
+            }
+            originalHandler(data);
+        };
+        process.stdin.removeListener('data', originalHandler);
+        process.stdin.on('data', terminal.stdinDataHandler);
+    }
+    updateDisplay() {
+        if (this.files.length === 0) {
+            this.displayComponent.setText('');
+            return;
+        }
+        const lines = this.files
+            .map((fp) => theme.underline(path.basename(fp)))
+            .join('\n');
+        this.displayComponent.setText(lines);
+    }
+}
+//# sourceMappingURL=file-attachments.js.map