@mariozechner/pi-coding-agent 0.33.0 → 0.34.0

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

@@ -7,7 +7,7 @@ import * as fs from "node:fs";
 import * as os from "node:os";
 import * as path from "node:path";
 import Clipboard from "@crosscopy/clipboard";
-import { CombinedAutocompleteProvider, Container, getEditorKeybindings, Input, Loader, Markdown, ProcessTerminal, Spacer, Text, TruncatedText, TUI, visibleWidth, } from "@mariozechner/pi-tui";
+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";
@@ -90,11 +90,11 @@ 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;
-    // Clipboard image tracking: imageId -> temp file path
-    clipboardImages = new Map();
-    clipboardImageCounter = 0;
     // Convenience accessors
     get agent() {
         return this.session.agent;
@@ -115,6 +115,7 @@ export class InteractiveMode {
         this.chatContainer = new Container();
         this.pendingMessagesContainer = new Container();
         this.statusContainer = new Container();
+        this.widgetContainer = new Container();
         this.keybindings = KeybindingsManager.create();
         this.editor = new CustomEditor(getEditorTheme(), this.keybindings);
         this.editorContainer = new Container();
@@ -254,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);
@@ -322,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({
@@ -366,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) {
@@ -430,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) {
@@ -476,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.
      */
@@ -483,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.
      */
@@ -616,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();
     }
     /**
@@ -702,33 +809,18 @@ export class InteractiveMode {
                 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}]`);
+            // Insert file path directly
+            this.editor.insertTextAtCursor(filePath);
             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) => {
             text = text.trim();
@@ -854,8 +946,6 @@ 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);
@@ -1394,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
@@ -2049,7 +2139,7 @@ export class InteractiveMode {
         const toggleThinking = this.getAppKeyDisplay("toggleThinking");
         const externalEditor = this.getAppKeyDisplay("externalEditor");
         const followUp = this.getAppKeyDisplay("followUp");
-        const hotkeys = `
+        let hotkeys = `
 **Navigation**
 | Key | Action |
 |-----|--------|
@@ -2085,6 +2175,22 @@ export class InteractiveMode {
 | \`/\` | 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));