shortcutxl 0.2.0

package/dist/modes/interactive/components/settings-selector.js

@@ -0,0 +1,123 @@
+import { Container, getCapabilities, SelectList, SettingsList, Spacer, Text } from '../../../tui/index.js';
+import { theme } from '../../../core/theme.js';
+import { getSelectListTheme, getSettingsListTheme } from '../theme/theme.js';
+import { DynamicBorder } from './dynamic-border.js';
+/**
+ * A submenu component for selecting from a list of options.
+ */
+class SelectSubmenu extends Container {
+    selectList;
+    constructor(title, description, options, currentValue, onSelect, onCancel, onSelectionChange) {
+        super();
+        // Title
+        this.addChild(new Text(theme.bold(theme.fg('accent', title)), 0, 0));
+        // Description
+        if (description) {
+            this.addChild(new Spacer(1));
+            this.addChild(new Text(theme.fg('muted', description), 0, 0));
+        }
+        // Spacer
+        this.addChild(new Spacer(1));
+        // Select list
+        this.selectList = new SelectList(options, Math.min(options.length, 10), getSelectListTheme());
+        // Pre-select current value
+        const currentIndex = options.findIndex((o) => o.value === currentValue);
+        if (currentIndex !== -1) {
+            this.selectList.setSelectedIndex(currentIndex);
+        }
+        this.selectList.onSelect = (item) => {
+            onSelect(item.value);
+        };
+        this.selectList.onCancel = onCancel;
+        if (onSelectionChange) {
+            this.selectList.onSelectionChange = (item) => {
+                onSelectionChange(item.value);
+            };
+        }
+        this.addChild(this.selectList);
+        // Hint
+        this.addChild(new Spacer(1));
+        this.addChild(new Text(theme.fg('dim', '  Enter to select · Esc to go back'), 0, 0));
+    }
+    handleInput(data) {
+        this.selectList.handleInput(data);
+    }
+}
+/**
+ * Main settings selector component.
+ */
+export class SettingsSelectorComponent extends Container {
+    settingsList;
+    constructor(config, callbacks) {
+        super();
+        const supportsImages = getCapabilities().images;
+        const items = [
+            {
+                id: 'collapse-changelog',
+                label: 'Collapse changelog',
+                description: 'Show condensed changelog after updates',
+                currentValue: config.collapseChangelog ? 'true' : 'false',
+                values: ['true', 'false']
+            },
+            {
+                id: 'quiet-startup',
+                label: 'Quiet startup',
+                description: 'Disable verbose printing at startup',
+                currentValue: config.quietStartup ? 'true' : 'false',
+                values: ['true', 'false']
+            },
+            {
+                id: 'theme',
+                label: 'Theme',
+                description: 'Color theme for the interface',
+                currentValue: config.currentTheme,
+                submenu: (currentValue, done) => new SelectSubmenu('Theme', 'Select color theme', config.availableThemes.map((t) => ({
+                    value: t,
+                    label: t
+                })), currentValue, (value) => {
+                    callbacks.onThemeChange(value);
+                    done(value);
+                }, () => {
+                    // Restore original theme on cancel
+                    callbacks.onThemePreview?.(currentValue);
+                    done();
+                }, (value) => {
+                    // Preview theme on selection change
+                    callbacks.onThemePreview?.(value);
+                })
+            }
+        ];
+        // Only show image toggle if terminal supports it
+        if (supportsImages) {
+            // Insert after steering-mode
+            items.splice(1, 0, {
+                id: 'show-images',
+                label: 'Show images',
+                description: 'Render images inline in terminal',
+                currentValue: config.showImages ? 'true' : 'false',
+                values: ['true', 'false']
+            });
+        }
+        // Add borders
+        this.addChild(new DynamicBorder());
+        this.settingsList = new SettingsList(items, 10, getSettingsListTheme(), (id, newValue) => {
+            switch (id) {
+                case 'show-images':
+                    callbacks.onShowImagesChange(newValue === 'true');
+                    break;
+                case 'collapse-changelog':
+                    callbacks.onCollapseChangelogChange(newValue === 'true');
+                    break;
+                case 'quiet-startup':
+                    callbacks.onQuietStartupChange(newValue === 'true');
+                    break;
+            }
+        }, callbacks.onCancel, { enableSearch: true });
+        this.addChild(this.settingsList);
+        this.addChild(new DynamicBorder());
+    }
+    getSettingsList() {
+        return this.settingsList;
+    }
+}
+//# sourceMappingURL=settings-selector.js.map

package/dist/modes/interactive/components/show-images-selector.js

@@ -0,0 +1,35 @@
+import { Container, SelectList } from '../../../tui/index.js';
+import { getSelectListTheme } from '../theme/theme.js';
+import { DynamicBorder } from './dynamic-border.js';
+/**
+ * Component that renders a show images selector with borders
+ */
+export class ShowImagesSelectorComponent extends Container {
+    selectList;
+    constructor(currentValue, onSelect, onCancel) {
+        super();
+        const items = [
+            { value: 'yes', label: 'Yes', description: 'Show images inline in terminal' },
+            { value: 'no', label: 'No', description: 'Show text placeholder instead' }
+        ];
+        // Add top border
+        this.addChild(new DynamicBorder());
+        // Create selector
+        this.selectList = new SelectList(items, 5, getSelectListTheme());
+        // Preselect current value
+        this.selectList.setSelectedIndex(currentValue ? 0 : 1);
+        this.selectList.onSelect = (item) => {
+            onSelect(item.value === 'yes');
+        };
+        this.selectList.onCancel = () => {
+            onCancel();
+        };
+        this.addChild(this.selectList);
+        // Add bottom border
+        this.addChild(new DynamicBorder());
+    }
+    getSelectList() {
+        return this.selectList;
+    }
+}
+//# sourceMappingURL=show-images-selector.js.map

package/dist/modes/interactive/components/skill-invocation-message.js

@@ -0,0 +1,48 @@
+import { Box, Markdown, 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 skill invocation message with collapsed/expanded state.
+ * Uses same background color as custom messages for visual consistency.
+ * Only renders the skill block itself - user message is rendered separately.
+ */
+export class SkillInvocationMessageComponent extends Box {
+    expanded = false;
+    skillBlock;
+    markdownTheme;
+    constructor(skillBlock, markdownTheme = getMarkdownTheme()) {
+        super(1, 1, (t) => theme.bg('customMessageBg', t));
+        this.skillBlock = skillBlock;
+        this.markdownTheme = markdownTheme;
+        this.updateDisplay();
+    }
+    setExpanded(expanded) {
+        this.expanded = expanded;
+        this.updateDisplay();
+    }
+    invalidate() {
+        super.invalidate();
+        this.updateDisplay();
+    }
+    updateDisplay() {
+        this.clear();
+        if (this.expanded) {
+            // Expanded: label + skill name header + full content
+            const label = theme.fg('customMessageLabel', `\x1b[1m[skill]\x1b[22m`);
+            this.addChild(new Text(label, 0, 0));
+            const header = `**${this.skillBlock.name}**\n\n`;
+            this.addChild(new Markdown(header + this.skillBlock.content, 0, 0, this.markdownTheme, {
+                color: (text) => theme.fg('customMessageText', text)
+            }));
+        }
+        else {
+            // Collapsed: single line - [skill] name (hint to expand)
+            const line = theme.fg('customMessageLabel', `\x1b[1m[skill]\x1b[22m `) +
+                theme.fg('customMessageText', this.skillBlock.name) +
+                theme.fg('dim', ` (${editorKey('expandTools')} to expand)`);
+            this.addChild(new Text(line, 0, 0));
+        }
+    }
+}
+//# sourceMappingURL=skill-invocation-message.js.map

package/dist/modes/interactive/components/theme-selector.js

@@ -0,0 +1,47 @@
+import { Container, SelectList } from '../../../tui/index.js';
+import { getAvailableThemes } from '../../../core/theme.js';
+import { getSelectListTheme } from '../theme/theme.js';
+import { DynamicBorder } from './dynamic-border.js';
+/**
+ * Component that renders a theme selector
+ */
+export class ThemeSelectorComponent extends Container {
+    selectList;
+    onPreview;
+    constructor(currentTheme, onSelect, onCancel, onPreview) {
+        super();
+        this.onPreview = onPreview;
+        // Get available themes and create select items
+        const themes = getAvailableThemes();
+        const themeItems = themes.map((name) => ({
+            value: name,
+            label: name,
+            description: name === currentTheme ? '(current)' : undefined
+        }));
+        // Add top border
+        this.addChild(new DynamicBorder());
+        // Create selector
+        this.selectList = new SelectList(themeItems, 10, getSelectListTheme());
+        // Preselect current theme
+        const currentIndex = themes.indexOf(currentTheme);
+        if (currentIndex !== -1) {
+            this.selectList.setSelectedIndex(currentIndex);
+        }
+        this.selectList.onSelect = (item) => {
+            onSelect(item.value);
+        };
+        this.selectList.onCancel = () => {
+            onCancel();
+        };
+        this.selectList.onSelectionChange = (item) => {
+            this.onPreview(item.value);
+        };
+        this.addChild(this.selectList);
+        // Add bottom border
+        this.addChild(new DynamicBorder());
+    }
+    getSelectList() {
+        return this.selectList;
+    }
+}
+//# sourceMappingURL=theme-selector.js.map

package/dist/modes/interactive/components/thinking-selector.js

@@ -0,0 +1,47 @@
+import { Container, SelectList } from '../../../tui/index.js';
+import { getSelectListTheme } from '../theme/theme.js';
+import { DynamicBorder } from './dynamic-border.js';
+const LEVEL_DESCRIPTIONS = {
+    off: 'No reasoning',
+    minimal: 'Very brief reasoning (~1k tokens)',
+    low: 'Light reasoning (~2k tokens)',
+    medium: 'Moderate reasoning (~8k tokens)',
+    high: 'Deep reasoning (~16k tokens)',
+    xhigh: 'Maximum reasoning (~32k tokens)'
+};
+/**
+ * Component that renders a thinking level selector with borders
+ */
+export class ThinkingSelectorComponent extends Container {
+    selectList;
+    constructor(currentLevel, availableLevels, onSelect, onCancel) {
+        super();
+        const thinkingLevels = availableLevels.map((level) => ({
+            value: level,
+            label: level,
+            description: LEVEL_DESCRIPTIONS[level]
+        }));
+        // Add top border
+        this.addChild(new DynamicBorder());
+        // Create selector
+        this.selectList = new SelectList(thinkingLevels, thinkingLevels.length, getSelectListTheme());
+        // Preselect current level
+        const currentIndex = thinkingLevels.findIndex((item) => item.value === currentLevel);
+        if (currentIndex !== -1) {
+            this.selectList.setSelectedIndex(currentIndex);
+        }
+        this.selectList.onSelect = (item) => {
+            onSelect(item.value);
+        };
+        this.selectList.onCancel = () => {
+            onCancel();
+        };
+        this.addChild(this.selectList);
+        // Add bottom border
+        this.addChild(new DynamicBorder());
+    }
+    getSelectList() {
+        return this.selectList;
+    }
+}
+//# sourceMappingURL=thinking-selector.js.map