@mariozechner/pi-coding-agent 0.32.3 → 0.34.0

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

@@ -2,12 +2,15 @@
  * Interactive mode for the coding agent.
  * Handles TUI rendering and user interaction, delegating business logic to AgentSession.
  */
+import * as crypto from "node:crypto";
 import * as fs from "node:fs";
 import * as os from "node:os";
 import * as path from "node:path";
-import { CombinedAutocompleteProvider, Container, Input, Loader, Markdown, ProcessTerminal, Spacer, Text, TruncatedText, TUI, visibleWidth, } from "@mariozechner/pi-tui";
+import Clipboard from "@crosscopy/clipboard";
+import { CombinedAutocompleteProvider, Container, getEditorKeybindings, Input, Loader, Markdown, matchesKey, ProcessTerminal, Spacer, Text, TruncatedText, TUI, visibleWidth, } from "@mariozechner/pi-tui";
 import { exec, spawn, spawnSync } from "child_process";
 import { APP_NAME, getAuthPath, getDebugLogPath } from "../../config.js";
+import { KeybindingsManager } from "../../core/keybindings.js";
 import { createCompactionSummaryMessage } from "../../core/messages.js";
 import { SessionManager } from "../../core/session-manager.js";
 import { loadSkills } from "../../core/skills.js";
@@ -49,6 +52,7 @@ export class InteractiveMode {
     editor;
     editorContainer;
     footer;
+    keybindings;
     version;
     isInitialized = false;
     onInputCallback;
@@ -86,6 +90,9 @@ export class InteractiveMode {
     hookSelector = undefined;
     hookInput = undefined;
     hookEditor = undefined;
+    // Hook widgets (components rendered above the editor)
+    hookWidgets = new Map();
+    widgetContainer;
     // Custom tools for custom rendering
     customTools;
     // Convenience accessors
@@ -108,7 +115,9 @@ export class InteractiveMode {
         this.chatContainer = new Container();
         this.pendingMessagesContainer = new Container();
         this.statusContainer = new Container();
-        this.editor = new CustomEditor(getEditorTheme());
+        this.widgetContainer = new Container();
+        this.keybindings = KeybindingsManager.create();
+        this.editor = new CustomEditor(getEditorTheme(), this.keybindings);
         this.editorContainer = new Container();
         this.editorContainer.addChild(this.editor);
         this.footer = new FooterComponent(session);
@@ -150,42 +159,61 @@ export class InteractiveMode {
     async init() {
         if (this.isInitialized)
             return;
-        // Add header
+        // Add header with keybindings from config
         const logo = theme.bold(theme.fg("accent", APP_NAME)) + theme.fg("dim", ` v${this.version}`);
-        const instructions = theme.fg("dim", "esc") +
+        // Format keybinding for startup display (lowercase, compact)
+        const formatStartupKey = (keys) => {
+            const keyArray = Array.isArray(keys) ? keys : [keys];
+            return keyArray.join("/");
+        };
+        const kb = this.keybindings;
+        const interrupt = formatStartupKey(kb.getKeys("interrupt"));
+        const clear = formatStartupKey(kb.getKeys("clear"));
+        const exit = formatStartupKey(kb.getKeys("exit"));
+        const suspend = formatStartupKey(kb.getKeys("suspend"));
+        const deleteToLineEnd = formatStartupKey(getEditorKeybindings().getKeys("deleteToLineEnd"));
+        const cycleThinkingLevel = formatStartupKey(kb.getKeys("cycleThinkingLevel"));
+        const cycleModelForward = formatStartupKey(kb.getKeys("cycleModelForward"));
+        const cycleModelBackward = formatStartupKey(kb.getKeys("cycleModelBackward"));
+        const selectModel = formatStartupKey(kb.getKeys("selectModel"));
+        const expandTools = formatStartupKey(kb.getKeys("expandTools"));
+        const toggleThinking = formatStartupKey(kb.getKeys("toggleThinking"));
+        const externalEditor = formatStartupKey(kb.getKeys("externalEditor"));
+        const followUp = formatStartupKey(kb.getKeys("followUp"));
+        const instructions = theme.fg("dim", interrupt) +
             theme.fg("muted", " to interrupt") +
             "\n" +
-            theme.fg("dim", "ctrl+c") +
+            theme.fg("dim", clear) +
             theme.fg("muted", " to clear") +
             "\n" +
-            theme.fg("dim", "ctrl+c twice") +
+            theme.fg("dim", `${clear} twice`) +
             theme.fg("muted", " to exit") +
             "\n" +
-            theme.fg("dim", "ctrl+d") +
+            theme.fg("dim", exit) +
             theme.fg("muted", " to exit (empty)") +
             "\n" +
-            theme.fg("dim", "ctrl+z") +
+            theme.fg("dim", suspend) +
             theme.fg("muted", " to suspend") +
             "\n" +
-            theme.fg("dim", "ctrl+k") +
+            theme.fg("dim", deleteToLineEnd) +
             theme.fg("muted", " to delete line") +
             "\n" +
-            theme.fg("dim", "shift+tab") +
+            theme.fg("dim", cycleThinkingLevel) +
             theme.fg("muted", " to cycle thinking") +
             "\n" +
-            theme.fg("dim", "ctrl+p/shift+ctrl+p") +
+            theme.fg("dim", `${cycleModelForward}/${cycleModelBackward}`) +
             theme.fg("muted", " to cycle models") +
             "\n" +
-            theme.fg("dim", "ctrl+l") +
+            theme.fg("dim", selectModel) +
             theme.fg("muted", " to select model") +
             "\n" +
-            theme.fg("dim", "ctrl+o") +
+            theme.fg("dim", expandTools) +
             theme.fg("muted", " to expand tools") +
             "\n" +
-            theme.fg("dim", "ctrl+t") +
+            theme.fg("dim", toggleThinking) +
             theme.fg("muted", " to toggle thinking") +
             "\n" +
-            theme.fg("dim", "ctrl+g") +
+            theme.fg("dim", externalEditor) +
             theme.fg("muted", " for external editor") +
             "\n" +
             theme.fg("dim", "/") +
@@ -194,9 +222,12 @@ export class InteractiveMode {
             theme.fg("dim", "!") +
             theme.fg("muted", " to run bash") +
             "\n" +
-            theme.fg("dim", "alt+enter") +
+            theme.fg("dim", followUp) +
             theme.fg("muted", " to queue follow-up") +
             "\n" +
+            theme.fg("dim", "ctrl+v") +
+            theme.fg("muted", " to paste image") +
+            "\n" +
             theme.fg("dim", "drop files") +
             theme.fg("muted", " to attach");
         const header = new Text(`${logo}\n${instructions}`, 1, 0);
@@ -224,6 +255,7 @@ export class InteractiveMode {
         this.ui.addChild(this.chatContainer);
         this.ui.addChild(this.pendingMessagesContainer);
         this.ui.addChild(this.statusContainer);
+        this.ui.addChild(this.widgetContainer);
         this.ui.addChild(new Spacer(1));
         this.ui.addChild(this.editorContainer);
         this.ui.addChild(this.footer);
@@ -292,20 +324,7 @@ export class InteractiveMode {
             this.chatContainer.addChild(new Spacer(1));
         }
         // Create and set hook & tool UI context
-        const uiContext = {
-            select: (title, options) => this.showHookSelector(title, options),
-            confirm: (title, message) => this.showHookConfirm(title, message),
-            input: (title, placeholder) => this.showHookInput(title, placeholder),
-            notify: (message, type) => this.showHookNotify(message, type),
-            setStatus: (key, text) => this.setHookStatus(key, text),
-            custom: (factory) => this.showHookCustom(factory),
-            setEditorText: (text) => this.editor.setText(text),
-            getEditorText: () => this.editor.getText(),
-            editor: (title, prefill) => this.showHookEditor(title, prefill),
-            get theme() {
-                return theme;
-            },
-        };
+        const uiContext = this.createHookUIContext();
         this.setToolUIContext(uiContext, true);
         // Notify custom tools of session start
         await this.emitCustomToolSessionEvent({
@@ -336,6 +355,9 @@ export class InteractiveMode {
             appendEntryHandler: (customType, data) => {
                 this.sessionManager.appendCustomEntry(customType, data);
             },
+            getActiveToolsHandler: () => this.session.getActiveToolNames(),
+            getAllToolsHandler: () => this.session.getAllToolNames(),
+            setActiveToolsHandler: (toolNames) => this.session.setActiveToolsByName(toolNames),
             newSessionHandler: async (options) => {
                 // Stop any loading animation
                 if (this.loadingAnimation) {
@@ -400,8 +422,10 @@ export class InteractiveMode {
         });
         // Subscribe to hook errors
         hookRunner.onError((error) => {
-            this.showHookError(error.hookPath, error.error);
+            this.showHookError(error.hookPath, error.error, error.stack);
         });
+        // Set up hook-registered shortcuts
+        this.setupHookShortcuts(hookRunner);
         // Show loaded hooks
         const hookPaths = hookRunner.getHookPaths();
         if (hookPaths.length > 0) {
@@ -446,6 +470,40 @@ export class InteractiveMode {
         this.chatContainer.addChild(errorText);
         this.ui.requestRender();
     }
+    /**
+     * Set up keyboard shortcuts registered by hooks.
+     */
+    setupHookShortcuts(hookRunner) {
+        const shortcuts = hookRunner.getShortcuts();
+        if (shortcuts.size === 0)
+            return;
+        // Create a context for shortcut handlers
+        const createContext = () => ({
+            ui: this.createHookUIContext(),
+            hasUI: true,
+            cwd: process.cwd(),
+            sessionManager: this.sessionManager,
+            modelRegistry: this.session.modelRegistry,
+            model: this.session.model,
+            isIdle: () => !this.session.isStreaming,
+            abort: () => this.session.abort(),
+            hasPendingMessages: () => this.session.pendingMessageCount > 0,
+        });
+        // Set up the hook shortcut handler on the editor
+        this.editor.onHookShortcut = (data) => {
+            for (const [shortcutStr, shortcut] of shortcuts) {
+                // Cast to KeyId - hook shortcuts use the same format
+                if (matchesKey(data, shortcutStr)) {
+                    // Run handler async, don't block input
+                    Promise.resolve(shortcut.handler(createContext())).catch((err) => {
+                        this.showError(`Shortcut handler error: ${err instanceof Error ? err.message : String(err)}`);
+                    });
+                    return true;
+                }
+            }
+            return false;
+        };
+    }
     /**
      * Set hook status text in the footer.
      */
@@ -453,6 +511,73 @@ export class InteractiveMode {
         this.footer.setHookStatus(key, text);
         this.ui.requestRender();
     }
+    /**
+     * Set a hook widget (string array or custom component).
+     */
+    setHookWidget(key, content) {
+        // Dispose and remove existing widget
+        const existing = this.hookWidgets.get(key);
+        if (existing?.dispose)
+            existing.dispose();
+        if (content === undefined) {
+            this.hookWidgets.delete(key);
+        }
+        else if (Array.isArray(content)) {
+            // Wrap string array in a Container with Text components
+            const container = new Container();
+            for (const line of content.slice(0, InteractiveMode.MAX_WIDGET_LINES)) {
+                container.addChild(new Text(line, 1, 0));
+            }
+            if (content.length > InteractiveMode.MAX_WIDGET_LINES) {
+                container.addChild(new Text(theme.fg("muted", "... (widget truncated)"), 1, 0));
+            }
+            this.hookWidgets.set(key, container);
+        }
+        else {
+            // Factory function - create component
+            const component = content(this.ui, theme);
+            this.hookWidgets.set(key, component);
+        }
+        this.renderWidgets();
+    }
+    // Maximum total widget lines to prevent viewport overflow
+    static MAX_WIDGET_LINES = 10;
+    /**
+     * Render all hook widgets to the widget container.
+     */
+    renderWidgets() {
+        if (!this.widgetContainer)
+            return;
+        this.widgetContainer.clear();
+        if (this.hookWidgets.size === 0) {
+            this.ui.requestRender();
+            return;
+        }
+        for (const [_key, component] of this.hookWidgets) {
+            this.widgetContainer.addChild(component);
+        }
+        this.ui.requestRender();
+    }
+    /**
+     * Create the HookUIContext for hooks and tools.
+     */
+    createHookUIContext() {
+        return {
+            select: (title, options) => this.showHookSelector(title, options),
+            confirm: (title, message) => this.showHookConfirm(title, message),
+            input: (title, placeholder) => this.showHookInput(title, placeholder),
+            notify: (message, type) => this.showHookNotify(message, type),
+            setStatus: (key, text) => this.setHookStatus(key, text),
+            setWidget: (key, content) => this.setHookWidget(key, content),
+            custom: (factory) => this.showHookCustom(factory),
+            setEditorText: (text) => this.editor.setText(text),
+            getEditorText: () => this.editor.getText(),
+            editor: (title, prefill) => this.showHookEditor(title, prefill),
+            get theme() {
+                return theme;
+            },
+        };
+    }
     /**
      * Show a selector for hooks.
      */
@@ -586,9 +711,21 @@ export class InteractiveMode {
     /**
      * Show a hook error in the UI.
      */
-    showHookError(hookPath, error) {
-        const errorText = new Text(theme.fg("error", `Hook "${hookPath}" error: ${error}`), 1, 0);
+    showHookError(hookPath, error, stack) {
+        const errorMsg = `Hook "${hookPath}" error: ${error}`;
+        const errorText = new Text(theme.fg("error", errorMsg), 1, 0);
         this.chatContainer.addChild(errorText);
+        if (stack) {
+            // Show stack trace in dim color, indented
+            const stackLines = stack
+                .split("\n")
+                .slice(1) // Skip first line (duplicates error message)
+                .map((line) => theme.fg("dim", `  ${line.trim()}`))
+                .join("\n");
+            if (stackLines) {
+                this.chatContainer.addChild(new Text(stackLines, 1, 0));
+            }
+        }
         this.ui.requestRender();
     }
     /**
@@ -636,19 +773,20 @@ export class InteractiveMode {
                 }
             }
         };
-        this.editor.onCtrlC = () => this.handleCtrlC();
+        // Register app action handlers
+        this.editor.onAction("clear", () => this.handleCtrlC());
         this.editor.onCtrlD = () => this.handleCtrlD();
-        this.editor.onCtrlZ = () => this.handleCtrlZ();
-        this.editor.onShiftTab = () => this.cycleThinkingLevel();
-        this.editor.onCtrlP = () => this.cycleModel("forward");
-        this.editor.onShiftCtrlP = () => this.cycleModel("backward");
+        this.editor.onAction("suspend", () => this.handleCtrlZ());
+        this.editor.onAction("cycleThinkingLevel", () => this.cycleThinkingLevel());
+        this.editor.onAction("cycleModelForward", () => this.cycleModel("forward"));
+        this.editor.onAction("cycleModelBackward", () => this.cycleModel("backward"));
         // Global debug handler on TUI (works regardless of focus)
         this.ui.onDebug = () => this.handleDebugCommand();
-        this.editor.onCtrlL = () => this.showModelSelector();
-        this.editor.onCtrlO = () => this.toggleToolOutputExpansion();
-        this.editor.onCtrlT = () => this.toggleThinkingBlockVisibility();
-        this.editor.onCtrlG = () => this.openExternalEditor();
-        this.editor.onAltEnter = () => this.handleAltEnter();
+        this.editor.onAction("selectModel", () => this.showModelSelector());
+        this.editor.onAction("expandTools", () => this.toggleToolOutputExpansion());
+        this.editor.onAction("toggleThinking", () => this.toggleThinkingBlockVisibility());
+        this.editor.onAction("externalEditor", () => this.openExternalEditor());
+        this.editor.onAction("followUp", () => this.handleFollowUp());
         this.editor.onChange = (text) => {
             const wasBashMode = this.isBashMode;
             this.isBashMode = text.trimStart().startsWith("!");
@@ -656,6 +794,32 @@ export class InteractiveMode {
                 this.updateEditorBorderColor();
             }
         };
+        // Handle clipboard image paste (triggered on Ctrl+V)
+        this.editor.onPasteImage = () => {
+            this.handleClipboardImagePaste();
+        };
+    }
+    async handleClipboardImagePaste() {
+        try {
+            if (!Clipboard.hasImage()) {
+                return;
+            }
+            const imageData = await Clipboard.getImageBinary();
+            if (!imageData || imageData.length === 0) {
+                return;
+            }
+            // Write to temp file
+            const tmpDir = os.tmpdir();
+            const fileName = `pi-clipboard-${crypto.randomUUID()}.png`;
+            const filePath = path.join(tmpDir, fileName);
+            fs.writeFileSync(filePath, Buffer.from(imageData));
+            // Insert file path directly
+            this.editor.insertTextAtCursor(filePath);
+            this.ui.requestRender();
+        }
+        catch {
+            // Silently ignore clipboard errors (may not have permission, etc.)
+        }
     }
     setupEditorSubmitHandler() {
         this.editor.onSubmit = async (text) => {
@@ -755,6 +919,11 @@ export class InteractiveMode {
                 this.editor.setText("");
                 return;
             }
+            if (text === "/quit" || text === "/exit") {
+                this.editor.setText("");
+                await this.shutdown();
+                return;
+            }
             // Handle bash command (! for normal, !! for excluded from context)
             if (text.startsWith("!")) {
                 const isExcluded = text.startsWith("!!");
@@ -1228,7 +1397,7 @@ export class InteractiveMode {
         // Send SIGTSTP to process group (pid=0 means all processes in group)
         process.kill(0, "SIGTSTP");
     }
-    async handleAltEnter() {
+    async handleFollowUp() {
         const text = this.editor.getText().trim();
         if (!text)
             return;
@@ -1315,7 +1484,7 @@ export class InteractiveMode {
             this.showWarning("No editor configured. Set $VISUAL or $EDITOR environment variable.");
             return;
         }
-        const currentText = this.editor.getText();
+        const currentText = this.editor.getExpandedText();
         const tmpFile = path.join(os.tmpdir(), `pi-editor-${Date.now()}.pi.md`);
         try {
             // Write current content to temp file
@@ -1920,41 +2089,108 @@ export class InteractiveMode {
         this.chatContainer.addChild(new DynamicBorder());
         this.ui.requestRender();
     }
+    /**
+     * Format keybindings for display (e.g., "ctrl+c" -> "Ctrl+C").
+     */
+    formatKeyDisplay(keys) {
+        const keyArray = Array.isArray(keys) ? keys : [keys];
+        return keyArray
+            .map((key) => key
+            .split("+")
+            .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+            .join("+"))
+            .join("/");
+    }
+    /**
+     * Get display string for an app keybinding action.
+     */
+    getAppKeyDisplay(action) {
+        const display = this.keybindings.getDisplayString(action);
+        return this.formatKeyDisplay(display);
+    }
+    /**
+     * Get display string for an editor keybinding action.
+     */
+    getEditorKeyDisplay(action) {
+        const keys = getEditorKeybindings().getKeys(action);
+        return this.formatKeyDisplay(keys);
+    }
     handleHotkeysCommand() {
-        const hotkeys = `
+        // Navigation keybindings
+        const cursorWordLeft = this.getEditorKeyDisplay("cursorWordLeft");
+        const cursorWordRight = this.getEditorKeyDisplay("cursorWordRight");
+        const cursorLineStart = this.getEditorKeyDisplay("cursorLineStart");
+        const cursorLineEnd = this.getEditorKeyDisplay("cursorLineEnd");
+        // Editing keybindings
+        const submit = this.getEditorKeyDisplay("submit");
+        const newLine = this.getEditorKeyDisplay("newLine");
+        const deleteWordBackward = this.getEditorKeyDisplay("deleteWordBackward");
+        const deleteToLineStart = this.getEditorKeyDisplay("deleteToLineStart");
+        const deleteToLineEnd = this.getEditorKeyDisplay("deleteToLineEnd");
+        const tab = this.getEditorKeyDisplay("tab");
+        // App keybindings
+        const interrupt = this.getAppKeyDisplay("interrupt");
+        const clear = this.getAppKeyDisplay("clear");
+        const exit = this.getAppKeyDisplay("exit");
+        const suspend = this.getAppKeyDisplay("suspend");
+        const cycleThinkingLevel = this.getAppKeyDisplay("cycleThinkingLevel");
+        const cycleModelForward = this.getAppKeyDisplay("cycleModelForward");
+        const expandTools = this.getAppKeyDisplay("expandTools");
+        const toggleThinking = this.getAppKeyDisplay("toggleThinking");
+        const externalEditor = this.getAppKeyDisplay("externalEditor");
+        const followUp = this.getAppKeyDisplay("followUp");
+        let hotkeys = `
 **Navigation**
 | Key | Action |
 |-----|--------|
 | \`Arrow keys\` | Move cursor / browse history (Up when empty) |
-| \`Option+Left/Right\` | Move by word |
-| \`Ctrl+A\` / \`Home\` / \`Cmd+Left\` | Start of line |
-| \`Ctrl+E\` / \`End\` / \`Cmd+Right\` | End of line |
+| \`${cursorWordLeft}\` / \`${cursorWordRight}\` | Move by word |
+| \`${cursorLineStart}\` | Start of line |
+| \`${cursorLineEnd}\` | End of line |
 
 **Editing**
 | Key | Action |
 |-----|--------|
-| \`Enter\` | Send message |
-| \`Shift+Enter\` / \`Alt+Enter\` | New line |
-| \`Ctrl+W\` / \`Option+Backspace\` | Delete word backwards |
-| \`Ctrl+U\` | Delete to start of line |
-| \`Ctrl+K\` | Delete to end of line |
+| \`${submit}\` | Send message |
+| \`${newLine}\` | New line |
+| \`${deleteWordBackward}\` | Delete word backwards |
+| \`${deleteToLineStart}\` | Delete to start of line |
+| \`${deleteToLineEnd}\` | Delete to end of line |
 
 **Other**
 | Key | Action |
 |-----|--------|
-| \`Tab\` | Path completion / accept autocomplete |
-| \`Escape\` | Cancel autocomplete / abort streaming |
-| \`Ctrl+C\` | Clear editor (first) / exit (second) |
-| \`Ctrl+D\` | Exit (when editor is empty) |
-| \`Ctrl+Z\` | Suspend to background |
-| \`Shift+Tab\` | Cycle thinking level |
-| \`Ctrl+P\` | Cycle models |
-| \`Ctrl+O\` | Toggle tool output expansion |
-| \`Ctrl+T\` | Toggle thinking block visibility |
-| \`Ctrl+G\` | Edit message in external editor |
+| \`${tab}\` | Path completion / accept autocomplete |
+| \`${interrupt}\` | Cancel autocomplete / abort streaming |
+| \`${clear}\` | Clear editor (first) / exit (second) |
+| \`${exit}\` | Exit (when editor is empty) |
+| \`${suspend}\` | Suspend to background |
+| \`${cycleThinkingLevel}\` | Cycle thinking level |
+| \`${cycleModelForward}\` | Cycle models |
+| \`${expandTools}\` | Toggle tool output expansion |
+| \`${toggleThinking}\` | Toggle thinking block visibility |
+| \`${externalEditor}\` | Edit message in external editor |
+| \`${followUp}\` | Queue follow-up message |
+| \`Ctrl+V\` | Paste image from clipboard |
 | \`/\` | Slash commands |
 | \`!\` | Run bash command |
 `;
+        // Add hook-registered shortcuts
+        const hookRunner = this.session.hookRunner;
+        if (hookRunner) {
+            const shortcuts = hookRunner.getShortcuts();
+            if (shortcuts.size > 0) {
+                hotkeys += `
+**Hooks**
+| Key | Action |
+|-----|--------|
+`;
+                for (const [key, shortcut] of shortcuts) {
+                    const description = shortcut.description ?? shortcut.hookPath;
+                    hotkeys += `| \`${key}\` | ${description} |\n`;
+                }
+            }
+        }
         this.chatContainer.addChild(new Spacer(1));
         this.chatContainer.addChild(new DynamicBorder());
         this.chatContainer.addChild(new Text(theme.bold(theme.fg("accent", "Keyboard Shortcuts")), 1, 0));