@mariozechner/pi-coding-agent 0.32.3 → 0.33.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, 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;
@@ -88,6 +92,9 @@ export class InteractiveMode {
     hookEditor = undefined;
     // Custom tools for custom rendering
     customTools;
+    // Clipboard image tracking: imageId -> temp file path
+    clipboardImages = new Map();
+    clipboardImageCounter = 0;
     // Convenience accessors
     get agent() {
         return this.session.agent;
@@ -108,7 +115,8 @@ export class InteractiveMode {
         this.chatContainer = new Container();
         this.pendingMessagesContainer = new Container();
         this.statusContainer = new Container();
-        this.editor = new CustomEditor(getEditorTheme());
+        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 +158,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 +221,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);
@@ -636,19 +666,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 +687,47 @@ 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 imageId = ++this.clipboardImageCounter;
+            const tmpDir = os.tmpdir();
+            const fileName = `pi-clipboard-${crypto.randomUUID()}.png`;
+            const filePath = path.join(tmpDir, fileName);
+            fs.writeFileSync(filePath, Buffer.from(imageData));
+            // Store mapping and insert marker
+            this.clipboardImages.set(imageId, filePath);
+            this.editor.insertTextAtCursor(`[image #${imageId}]`);
+            this.ui.requestRender();
+        }
+        catch {
+            // Silently ignore clipboard errors (may not have permission, etc.)
+        }
+    }
+    /**
+     * Replace [image #N] markers with actual file paths and clear the image map.
+     */
+    replaceImageMarkers(text) {
+        let result = text;
+        for (const [imageId, filePath] of this.clipboardImages) {
+            const marker = `[image #${imageId}]`;
+            result = result.replace(marker, filePath);
+        }
+        this.clipboardImages.clear();
+        this.clipboardImageCounter = 0;
+        return result;
     }
     setupEditorSubmitHandler() {
         this.editor.onSubmit = async (text) => {
@@ -755,6 +827,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("!!");
@@ -777,6 +854,8 @@ export class InteractiveMode {
                 return;
             }
             // If streaming, use prompt() with steer behavior
+            // Replace image markers with actual file paths
+            text = this.replaceImageMarkers(text);
             // This handles hook commands (execute immediately), slash command expansion, and queueing
             if (this.session.isStreaming) {
                 this.editor.addToHistory(text);
@@ -1228,7 +1307,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;
@@ -1920,38 +1999,89 @@ 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() {
+        // 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");
         const 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 |
 `;