@mariozechner/pi-coding-agent 0.29.0 → 0.30.0

package/dist/modes/interactive/interactive-mode.js

@@ -5,7 +5,7 @@
 import * as fs from "node:fs";
 import * as os from "node:os";
 import * as path from "node:path";
-import { CombinedAutocompleteProvider, Container, getCapabilities, Input, Loader, Markdown, ProcessTerminal, Spacer, Text, TruncatedText, TUI, visibleWidth, } from "@mariozechner/pi-tui";
+import { CombinedAutocompleteProvider, Container, Input, Loader, Markdown, ProcessTerminal, Spacer, Text, TruncatedText, TUI, visibleWidth, } from "@mariozechner/pi-tui";
 import { exec, spawnSync } from "child_process";
 import { APP_NAME, getAuthPath, getDebugLogPath } from "../../config.js";
 import { isBashExecutionMessage } from "../../core/messages.js";
@@ -25,15 +25,12 @@ import { HookInputComponent } from "./components/hook-input.js";
 import { HookSelectorComponent } from "./components/hook-selector.js";
 import { ModelSelectorComponent } from "./components/model-selector.js";
 import { OAuthSelectorComponent } from "./components/oauth-selector.js";
-import { QueueModeSelectorComponent } from "./components/queue-mode-selector.js";
 import { SessionSelectorComponent } from "./components/session-selector.js";
-import { ShowImagesSelectorComponent } from "./components/show-images-selector.js";
-import { ThemeSelectorComponent } from "./components/theme-selector.js";
-import { ThinkingSelectorComponent } from "./components/thinking-selector.js";
+import { SettingsSelectorComponent } from "./components/settings-selector.js";
 import { ToolExecutionComponent } from "./components/tool-execution.js";
 import { UserMessageComponent } from "./components/user-message.js";
 import { UserMessageSelectorComponent } from "./components/user-message-selector.js";
-import { getEditorTheme, getMarkdownTheme, onThemeChange, setTheme, theme } from "./theme/theme.js";
+import { getAvailableThemes, getEditorTheme, getMarkdownTheme, onThemeChange, setTheme, theme } from "./theme/theme.js";
 export class InteractiveMode {
     setToolUIContext;
     session;
@@ -107,7 +104,7 @@ export class InteractiveMode {
         this.footer.setAutoCompactEnabled(session.autoCompactionEnabled);
         // Define slash commands for autocomplete
         const slashCommands = [
-            { name: "thinking", description: "Select reasoning level (opens selector UI)" },
+            { name: "settings", description: "Open settings menu" },
             { name: "model", description: "Select model (opens selector UI)" },
             { name: "export", description: "Export session to HTML file" },
             { name: "copy", description: "Copy last agent message to clipboard" },
@@ -117,17 +114,10 @@ export class InteractiveMode {
             { name: "branch", description: "Create a new branch from a previous message" },
             { name: "login", description: "Login with OAuth provider" },
             { name: "logout", description: "Logout from OAuth provider" },
-            { name: "queue", description: "Select message queue mode (opens selector UI)" },
-            { name: "theme", description: "Select color theme (opens selector UI)" },
             { name: "new", description: "Start a new session" },
             { name: "compact", description: "Manually compact the session context" },
-            { name: "autocompact", description: "Toggle automatic context compaction" },
             { name: "resume", description: "Resume a different session" },
         ];
-        // Add image toggle command only if terminal supports images
-        if (getCapabilities().images) {
-            slashCommands.push({ name: "show-images", description: "Toggle inline image display" });
-        }
         // Load hide thinking block setting
         this.hideThinkingBlock = this.settingsManager.getHideThinkingBlock();
         // Convert file commands to SlashCommand format
@@ -165,9 +155,12 @@ export class InteractiveMode {
             theme.fg("dim", "shift+tab") +
             theme.fg("muted", " to cycle thinking") +
             "\n" +
-            theme.fg("dim", "ctrl+p") +
+            theme.fg("dim", "ctrl+p/shift+ctrl+p") +
             theme.fg("muted", " to cycle models") +
             "\n" +
+            theme.fg("dim", "ctrl+l") +
+            theme.fg("muted", " to select model") +
+            "\n" +
             theme.fg("dim", "ctrl+o") +
             theme.fg("muted", " to expand tools") +
             "\n" +
@@ -492,7 +485,9 @@ export class InteractiveMode {
         this.editor.onCtrlD = () => this.handleCtrlD();
         this.editor.onCtrlZ = () => this.handleCtrlZ();
         this.editor.onShiftTab = () => this.cycleThinkingLevel();
-        this.editor.onCtrlP = () => this.cycleModel();
+        this.editor.onCtrlP = () => this.cycleModel("forward");
+        this.editor.onShiftCtrlP = () => this.cycleModel("backward");
+        this.editor.onCtrlL = () => this.showModelSelector();
         this.editor.onCtrlO = () => this.toggleToolOutputExpansion();
         this.editor.onCtrlT = () => this.toggleThinkingBlockVisibility();
         this.editor.onCtrlG = () => this.openExternalEditor();
@@ -510,8 +505,8 @@ export class InteractiveMode {
             if (!text)
                 return;
             // Handle slash commands
-            if (text === "/thinking") {
-                this.showThinkingSelector();
+            if (text === "/settings") {
+                this.showSettingsSelector();
                 this.editor.setText("");
                 return;
             }
@@ -560,16 +555,6 @@ export class InteractiveMode {
                 this.editor.setText("");
                 return;
             }
-            if (text === "/queue") {
-                this.showQueueModeSelector();
-                this.editor.setText("");
-                return;
-            }
-            if (text === "/theme") {
-                this.showThemeSelector();
-                this.editor.setText("");
-                return;
-            }
             if (text === "/new") {
                 this.editor.setText("");
                 await this.handleClearCommand();
@@ -587,16 +572,6 @@ export class InteractiveMode {
                 }
                 return;
             }
-            if (text === "/autocompact") {
-                this.handleAutocompactCommand();
-                this.editor.setText("");
-                return;
-            }
-            if (text === "/show-images") {
-                this.showShowImagesSelector();
-                this.editor.setText("");
-                return;
-            }
             if (text === "/debug") {
                 this.handleDebugCommand();
                 this.editor.setText("");
@@ -1052,9 +1027,9 @@ export class InteractiveMode {
             this.showStatus(`Thinking level: ${newLevel}`);
         }
     }
-    async cycleModel() {
+    async cycleModel(direction) {
         try {
-            const result = await this.session.cycleModel();
+            const result = await this.session.cycleModel(direction);
             if (result === null) {
                 const msg = this.session.scopedModels.length > 0 ? "Only one model in scope" : "Only one model available";
                 this.showStatus(msg);
@@ -1202,59 +1177,74 @@ export class InteractiveMode {
         this.ui.setFocus(focus);
         this.ui.requestRender();
     }
-    showThinkingSelector() {
+    showSettingsSelector() {
         this.showSelector((done) => {
-            const selector = new ThinkingSelectorComponent(this.session.thinkingLevel, this.session.getAvailableThinkingLevels(), (level) => {
-                this.session.setThinkingLevel(level);
-                this.footer.updateState(this.session.state);
-                this.updateEditorBorderColor();
-                done();
-                this.showStatus(`Thinking level: ${level}`);
-            }, () => {
-                done();
-                this.ui.requestRender();
-            });
-            return { component: selector, focus: selector.getSelectList() };
-        });
-    }
-    showQueueModeSelector() {
-        this.showSelector((done) => {
-            const selector = new QueueModeSelectorComponent(this.session.queueMode, (mode) => {
-                this.session.setQueueMode(mode);
-                done();
-                this.showStatus(`Queue mode: ${mode}`);
-            }, () => {
-                done();
-                this.ui.requestRender();
-            });
-            return { component: selector, focus: selector.getSelectList() };
-        });
-    }
-    showThemeSelector() {
-        const currentTheme = this.settingsManager.getTheme() || "dark";
-        this.showSelector((done) => {
-            const selector = new ThemeSelectorComponent(currentTheme, (themeName) => {
-                const result = setTheme(themeName, true);
-                this.settingsManager.setTheme(themeName);
-                this.ui.invalidate();
-                done();
-                if (result.success) {
-                    this.showStatus(`Theme: ${themeName}`);
-                }
-                else {
-                    this.showError(`Failed to load theme "${themeName}": ${result.error}\nFell back to dark theme.`);
-                }
-            }, () => {
-                done();
-                this.ui.requestRender();
-            }, (themeName) => {
-                const result = setTheme(themeName, true);
-                if (result.success) {
+            const selector = new SettingsSelectorComponent({
+                autoCompact: this.session.autoCompactionEnabled,
+                showImages: this.settingsManager.getShowImages(),
+                queueMode: this.session.queueMode,
+                thinkingLevel: this.session.thinkingLevel,
+                availableThinkingLevels: this.session.getAvailableThinkingLevels(),
+                currentTheme: this.settingsManager.getTheme() || "dark",
+                availableThemes: getAvailableThemes(),
+                hideThinkingBlock: this.hideThinkingBlock,
+                collapseChangelog: this.settingsManager.getCollapseChangelog(),
+            }, {
+                onAutoCompactChange: (enabled) => {
+                    this.session.setAutoCompactionEnabled(enabled);
+                    this.footer.setAutoCompactEnabled(enabled);
+                },
+                onShowImagesChange: (enabled) => {
+                    this.settingsManager.setShowImages(enabled);
+                    for (const child of this.chatContainer.children) {
+                        if (child instanceof ToolExecutionComponent) {
+                            child.setShowImages(enabled);
+                        }
+                    }
+                },
+                onQueueModeChange: (mode) => {
+                    this.session.setQueueMode(mode);
+                },
+                onThinkingLevelChange: (level) => {
+                    this.session.setThinkingLevel(level);
+                    this.footer.updateState(this.session.state);
+                    this.updateEditorBorderColor();
+                },
+                onThemeChange: (themeName) => {
+                    const result = setTheme(themeName, true);
+                    this.settingsManager.setTheme(themeName);
                     this.ui.invalidate();
+                    if (!result.success) {
+                        this.showError(`Failed to load theme "${themeName}": ${result.error}\nFell back to dark theme.`);
+                    }
+                },
+                onThemePreview: (themeName) => {
+                    const result = setTheme(themeName, true);
+                    if (result.success) {
+                        this.ui.invalidate();
+                        this.ui.requestRender();
+                    }
+                },
+                onHideThinkingBlockChange: (hidden) => {
+                    this.hideThinkingBlock = hidden;
+                    this.settingsManager.setHideThinkingBlock(hidden);
+                    for (const child of this.chatContainer.children) {
+                        if (child instanceof AssistantMessageComponent) {
+                            child.setHideThinkingBlock(hidden);
+                        }
+                    }
+                    this.chatContainer.clear();
+                    this.rebuildChatFromMessages();
+                },
+                onCollapseChangelogChange: (collapsed) => {
+                    this.settingsManager.setCollapseChangelog(collapsed);
+                },
+                onCancel: () => {
+                    done();
                     this.ui.requestRender();
-                }
+                },
             });
-            return { component: selector, focus: selector.getSelectList() };
+            return { component: selector, focus: selector.getSettingsList() };
         });
     }
     showModelSelector() {
@@ -1308,7 +1298,7 @@ export class InteractiveMode {
     }
     showSessionSelector() {
         this.showSelector((done) => {
-            const sessions = SessionManager.list(this.sessionManager.getCwd());
+            const sessions = SessionManager.list(this.sessionManager.getCwd(), this.sessionManager.getSessionDir());
             const selector = new SessionSelectorComponent(sessions, async (sessionPath) => {
                 done();
                 await this.handleResumeSession(sessionPath);
@@ -1640,37 +1630,6 @@ export class InteractiveMode {
         }
         await this.executeCompaction(customInstructions, false);
     }
-    handleAutocompactCommand() {
-        const newState = !this.session.autoCompactionEnabled;
-        this.session.setAutoCompactionEnabled(newState);
-        this.footer.setAutoCompactEnabled(newState);
-        this.showStatus(`Auto-compaction: ${newState ? "on" : "off"}`);
-    }
-    showShowImagesSelector() {
-        // Only available if terminal supports images
-        const caps = getCapabilities();
-        if (!caps.images) {
-            this.showWarning("Your terminal does not support inline images");
-            return;
-        }
-        this.showSelector((done) => {
-            const selector = new ShowImagesSelectorComponent(this.settingsManager.getShowImages(), (newValue) => {
-                this.settingsManager.setShowImages(newValue);
-                // Update all existing tool execution components with new setting
-                for (const child of this.chatContainer.children) {
-                    if (child instanceof ToolExecutionComponent) {
-                        child.setShowImages(newValue);
-                    }
-                }
-                done();
-                this.showStatus(`Inline images: ${newValue ? "on" : "off"}`);
-            }, () => {
-                done();
-                this.ui.requestRender();
-            });
-            return { component: selector, focus: selector.getSelectList() };
-        });
-    }
     async executeCompaction(customInstructions, isAuto = false) {
         // Stop loading animation
         if (this.loadingAnimation) {