@mariozechner/pi-coding-agent 0.59.0 → 0.61.0

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

@@ -6,14 +6,15 @@ 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, fuzzyFilter, Loader, Markdown, matchesKey, ProcessTerminal, Spacer, Text, TruncatedText, TUI, visibleWidth, } from "@mariozechner/pi-tui";
+import { CombinedAutocompleteProvider, Container, fuzzyFilter, Loader, Markdown, matchesKey, ProcessTerminal, Spacer, setKeybindings, Text, TruncatedText, TUI, visibleWidth, } from "@mariozechner/pi-tui";
 import { spawn, spawnSync } from "child_process";
-import { APP_NAME, getAuthPath, getDebugLogPath, getShareViewerUrl, getUpdateInstruction, VERSION, } from "../../config.js";
+import { APP_NAME, getAgentDir, getAuthPath, getDebugLogPath, getShareViewerUrl, getUpdateInstruction, VERSION, } from "../../config.js";
 import { parseSkillBlock } from "../../core/agent-session.js";
 import { FooterDataProvider } from "../../core/footer-data-provider.js";
 import { KeybindingsManager } from "../../core/keybindings.js";
 import { createCompactionSummaryMessage } from "../../core/messages.js";
 import { findExactModelReferenceMatch, resolveModelScope } from "../../core/model-resolver.js";
+import { DefaultPackageManager } from "../../core/package-manager.js";
 import { SessionManager } from "../../core/session-manager.js";
 import { BUILTIN_SLASH_COMMANDS } from "../../core/slash-commands.js";
 import { getChangelogPath, getNewEntries, parseChangelog } from "../../utils/changelog.js";
@@ -34,7 +35,7 @@ import { ExtensionEditorComponent } from "./components/extension-editor.js";
 import { ExtensionInputComponent } from "./components/extension-input.js";
 import { ExtensionSelectorComponent } from "./components/extension-selector.js";
 import { FooterComponent } from "./components/footer.js";
-import { appKey, appKeyHint, editorKey, keyHint, rawKeyHint } from "./components/keybinding-hints.js";
+import { keyHint, keyText, rawKeyHint } from "./components/keybinding-hints.js";
 import { LoginDialogComponent } from "./components/login-dialog.js";
 import { ModelSelectorComponent } from "./components/model-selector.js";
 import { OAuthSelectorComponent } from "./components/oauth-selector.js";
@@ -64,6 +65,7 @@ export class InteractiveMode {
     editorContainer;
     footer;
     footerDataProvider;
+    // Stored so the same manager can be injected into custom editors, selectors, and extension UI.
     keybindings;
     version;
     isInitialized = false;
@@ -147,6 +149,7 @@ export class InteractiveMode {
         this.widgetContainerAbove = new Container();
         this.widgetContainerBelow = new Container();
         this.keybindings = KeybindingsManager.create();
+        setKeybindings(this.keybindings);
         const editorPaddingX = this.settingsManager.getEditorPaddingX();
         const autocompleteMaxVisible = this.settingsManager.getAutocompleteMaxVisible();
         this.defaultEditor = new CustomEditor(this.ui, getEditorTheme(), this.keybindings, {
@@ -241,27 +244,26 @@ export class InteractiveMode {
         if (this.options.verbose || !this.settingsManager.getQuietStartup()) {
             const logo = theme.bold(theme.fg("accent", APP_NAME)) + theme.fg("dim", ` v${this.version}`);
             // Build startup instructions using keybinding hint helpers
-            const kb = this.keybindings;
-            const hint = (action, desc) => appKeyHint(kb, action, desc);
+            const hint = (keybinding, description) => keyHint(keybinding, description);
             const instructions = [
-                hint("interrupt", "to interrupt"),
-                hint("clear", "to clear"),
-                rawKeyHint(`${appKey(kb, "clear")} twice`, "to exit"),
-                hint("exit", "to exit (empty)"),
-                hint("suspend", "to suspend"),
-                keyHint("deleteToLineEnd", "to delete to end"),
-                hint("cycleThinkingLevel", "to cycle thinking level"),
-                rawKeyHint(`${appKey(kb, "cycleModelForward")}/${appKey(kb, "cycleModelBackward")}`, "to cycle models"),
-                hint("selectModel", "to select model"),
-                hint("expandTools", "to expand tools"),
-                hint("toggleThinking", "to expand thinking"),
-                hint("externalEditor", "for external editor"),
+                hint("app.interrupt", "to interrupt"),
+                hint("app.clear", "to clear"),
+                rawKeyHint(`${keyText("app.clear")} twice`, "to exit"),
+                hint("app.exit", "to exit (empty)"),
+                hint("app.suspend", "to suspend"),
+                keyHint("tui.editor.deleteToLineEnd", "to delete to end"),
+                hint("app.thinking.cycle", "to cycle thinking level"),
+                rawKeyHint(`${keyText("app.model.cycleForward")}/${keyText("app.model.cycleBackward")}`, "to cycle models"),
+                hint("app.model.select", "to select model"),
+                hint("app.tools.expand", "to expand tools"),
+                hint("app.thinking.toggle", "to expand thinking"),
+                hint("app.editor.external", "for external editor"),
                 rawKeyHint("/", "for commands"),
                 rawKeyHint("!", "to run bash"),
                 rawKeyHint("!!", "to run bash (no context)"),
-                hint("followUp", "to queue follow-up"),
-                hint("dequeue", "to edit all queued messages"),
-                hint("pasteImage", "to paste image"),
+                hint("app.message.followUp", "to queue follow-up"),
+                hint("app.message.dequeue", "to edit all queued messages"),
+                hint("app.clipboard.pasteImage", "to paste image"),
                 rawKeyHint("drop files", "to attach"),
             ].join("\n");
             this.builtInHeader = new Text(`${logo}\n${instructions}`, 1, 0);
@@ -360,6 +362,12 @@ export class InteractiveMode {
                 this.showNewVersionNotification(newVersion);
             }
         });
+        // Start package update check asynchronously
+        this.checkForPackageUpdates().then((updates) => {
+            if (updates.length > 0) {
+                this.showPackageUpdateNotification(updates);
+            }
+        });
         // Check tmux keyboard setup asynchronously
         this.checkTmuxKeyboardSetup().then((warning) => {
             if (warning) {
@@ -434,6 +442,23 @@ export class InteractiveMode {
             return undefined;
         }
     }
+    async checkForPackageUpdates() {
+        if (process.env.PI_OFFLINE) {
+            return [];
+        }
+        try {
+            const packageManager = new DefaultPackageManager({
+                cwd: process.cwd(),
+                agentDir: getAgentDir(),
+                settingsManager: this.settingsManager,
+            });
+            const updates = await packageManager.checkForAvailableUpdates();
+            return updates.map((update) => update.displayName);
+        }
+        catch {
+            return [];
+        }
+    }
     async checkTmuxKeyboardSetup() {
         if (!process.env.TMUX)
             return undefined;
@@ -464,6 +489,9 @@ export class InteractiveMode {
             runTmuxShow("extended-keys"),
             runTmuxShow("extended-keys-format"),
         ]);
+        // If we couldn't query tmux (timeout, sandbox, etc.), don't warn
+        if (extendedKeys === undefined)
+            return undefined;
         if (extendedKeys !== "on" && extendedKeys !== "always") {
             return "tmux extended-keys is off. Modified Enter keys may not work. Add `set -g extended-keys on` to ~/.tmux.conf and restart tmux.";
         }
@@ -1022,7 +1050,7 @@ export class InteractiveMode {
         this.defaultEditor.onExtensionShortcut = undefined;
         this.updateTerminalTitle();
         if (this.loadingAnimation) {
-            this.loadingAnimation.setMessage(`${this.defaultWorkingMessage} (${appKey(this.keybindings, "interrupt")} to interrupt)`);
+            this.loadingAnimation.setMessage(`${this.defaultWorkingMessage} (${keyText("app.interrupt")} to interrupt)`);
         }
     }
     // Maximum total widget lines to prevent viewport overflow
@@ -1145,7 +1173,7 @@ export class InteractiveMode {
                         this.loadingAnimation.setMessage(message);
                     }
                     else {
-                        this.loadingAnimation.setMessage(`${this.defaultWorkingMessage} (${appKey(this.keybindings, "interrupt")} to interrupt)`);
+                        this.loadingAnimation.setMessage(`${this.defaultWorkingMessage} (${keyText("app.interrupt")} to interrupt)`);
                     }
                 }
                 else {
@@ -1503,24 +1531,24 @@ export class InteractiveMode {
             }
         };
         // Register app action handlers
-        this.defaultEditor.onAction("clear", () => this.handleCtrlC());
+        this.defaultEditor.onAction("app.clear", () => this.handleCtrlC());
         this.defaultEditor.onCtrlD = () => this.handleCtrlD();
-        this.defaultEditor.onAction("suspend", () => this.handleCtrlZ());
-        this.defaultEditor.onAction("cycleThinkingLevel", () => this.cycleThinkingLevel());
-        this.defaultEditor.onAction("cycleModelForward", () => this.cycleModel("forward"));
-        this.defaultEditor.onAction("cycleModelBackward", () => this.cycleModel("backward"));
+        this.defaultEditor.onAction("app.suspend", () => this.handleCtrlZ());
+        this.defaultEditor.onAction("app.thinking.cycle", () => this.cycleThinkingLevel());
+        this.defaultEditor.onAction("app.model.cycleForward", () => this.cycleModel("forward"));
+        this.defaultEditor.onAction("app.model.cycleBackward", () => this.cycleModel("backward"));
         // Global debug handler on TUI (works regardless of focus)
         this.ui.onDebug = () => this.handleDebugCommand();
-        this.defaultEditor.onAction("selectModel", () => this.showModelSelector());
-        this.defaultEditor.onAction("expandTools", () => this.toggleToolOutputExpansion());
-        this.defaultEditor.onAction("toggleThinking", () => this.toggleThinkingBlockVisibility());
-        this.defaultEditor.onAction("externalEditor", () => this.openExternalEditor());
-        this.defaultEditor.onAction("followUp", () => this.handleFollowUp());
-        this.defaultEditor.onAction("dequeue", () => this.handleDequeue());
-        this.defaultEditor.onAction("newSession", () => this.handleClearCommand());
-        this.defaultEditor.onAction("tree", () => this.showTreeSelector());
-        this.defaultEditor.onAction("fork", () => this.showUserMessageSelector());
-        this.defaultEditor.onAction("resume", () => this.showSessionSelector());
+        this.defaultEditor.onAction("app.model.select", () => this.showModelSelector());
+        this.defaultEditor.onAction("app.tools.expand", () => this.toggleToolOutputExpansion());
+        this.defaultEditor.onAction("app.thinking.toggle", () => this.toggleThinkingBlockVisibility());
+        this.defaultEditor.onAction("app.editor.external", () => this.openExternalEditor());
+        this.defaultEditor.onAction("app.message.followUp", () => this.handleFollowUp());
+        this.defaultEditor.onAction("app.message.dequeue", () => this.handleDequeue());
+        this.defaultEditor.onAction("app.session.new", () => this.handleClearCommand());
+        this.defaultEditor.onAction("app.session.tree", () => this.showTreeSelector());
+        this.defaultEditor.onAction("app.session.fork", () => this.showUserMessageSelector());
+        this.defaultEditor.onAction("app.session.resume", () => this.showSessionSelector());
         this.defaultEditor.onChange = (text) => {
             const wasBashMode = this.isBashMode;
             this.isBashMode = text.trimStart().startsWith("!");
@@ -1580,13 +1608,18 @@ export class InteractiveMode {
                 this.editor.setText("");
                 return;
             }
+            if (text.startsWith("/import")) {
+                await this.handleImportCommand(text);
+                this.editor.setText("");
+                return;
+            }
             if (text === "/share") {
                 await this.handleShareCommand();
                 this.editor.setText("");
                 return;
             }
             if (text === "/copy") {
-                this.handleCopyCommand();
+                await this.handleCopyCommand();
                 this.editor.setText("");
                 return;
             }
@@ -1834,15 +1867,17 @@ export class InteractiveMode {
                 this.ui.requestRender();
                 break;
             case "tool_execution_start": {
-                if (!this.pendingTools.has(event.toolCallId)) {
-                    const component = new ToolExecutionComponent(event.toolName, event.args, {
+                let component = this.pendingTools.get(event.toolCallId);
+                if (!component) {
+                    component = new ToolExecutionComponent(event.toolName, event.args, {
                         showImages: this.settingsManager.getShowImages(),
                     }, this.getRegisteredToolDefinition(event.toolName), this.ui);
                     component.setExpanded(this.toolOutputExpanded);
                     this.chatContainer.addChild(component);
                     this.pendingTools.set(event.toolCallId, component);
-                    this.ui.requestRender();
                 }
+                component.markExecutionStarted();
+                this.ui.requestRender();
                 break;
             }
             case "tool_execution_update": {
@@ -1887,7 +1922,7 @@ export class InteractiveMode {
                 // Show compacting indicator with reason
                 this.statusContainer.clear();
                 const reasonText = event.reason === "overflow" ? "Context overflow detected, " : "";
-                this.autoCompactionLoader = new Loader(this.ui, (spinner) => theme.fg("accent", spinner), (text) => theme.fg("muted", text), `${reasonText}Auto-compacting... (${appKey(this.keybindings, "interrupt")} to cancel)`);
+                this.autoCompactionLoader = new Loader(this.ui, (spinner) => theme.fg("accent", spinner), (text) => theme.fg("muted", text), `${reasonText}Auto-compacting... (${keyText("app.interrupt")} to cancel)`);
                 this.statusContainer.addChild(this.autoCompactionLoader);
                 this.ui.requestRender();
                 break;
@@ -1939,7 +1974,7 @@ export class InteractiveMode {
                 // Show retry indicator
                 this.statusContainer.clear();
                 const delaySeconds = Math.round(event.delayMs / 1000);
-                this.retryLoader = new Loader(this.ui, (spinner) => theme.fg("warning", spinner), (text) => theme.fg("muted", text), `Retrying (${event.attempt}/${event.maxAttempts}) in ${delaySeconds}s... (${appKey(this.keybindings, "interrupt")} to cancel)`);
+                this.retryLoader = new Loader(this.ui, (spinner) => theme.fg("warning", spinner), (text) => theme.fg("muted", text), `Retrying (${event.attempt}/${event.maxAttempts}) in ${delaySeconds}s... (${keyText("app.interrupt")} to cancel)`);
                 this.statusContainer.addChild(this.retryLoader);
                 this.ui.requestRender();
                 break;
@@ -2397,6 +2432,16 @@ export class InteractiveMode {
         this.chatContainer.addChild(new DynamicBorder((text) => theme.fg("warning", text)));
         this.ui.requestRender();
     }
+    showPackageUpdateNotification(packages) {
+        const action = theme.fg("accent", `${APP_NAME} update`);
+        const updateInstruction = theme.fg("muted", "Package updates are available. Run ") + action;
+        const packageLines = packages.map((pkg) => `- ${pkg}`).join("\n");
+        this.chatContainer.addChild(new Spacer(1));
+        this.chatContainer.addChild(new DynamicBorder((text) => theme.fg("warning", text)));
+        this.chatContainer.addChild(new Text(`${theme.bold(theme.fg("warning", "Package Updates Available"))}\n${updateInstruction}\n${theme.fg("muted", "Packages:")}\n${packageLines}`, 1, 0));
+        this.chatContainer.addChild(new DynamicBorder((text) => theme.fg("warning", text)));
+        this.ui.requestRender();
+    }
     /**
      * Get all queued messages (read-only).
      * Combines session queue and compaction queue.
@@ -2444,7 +2489,7 @@ export class InteractiveMode {
                 const text = theme.fg("dim", `Follow-up: ${message}`);
                 this.pendingMessagesContainer.addChild(new TruncatedText(text, 1, 0));
             }
-            const dequeueHint = this.getAppKeyDisplay("dequeue");
+            const dequeueHint = this.getAppKeyDisplay("app.message.dequeue");
             const hintText = theme.fg("dim", `↳ ${dequeueHint} to edit all queued messages`);
             this.pendingMessagesContainer.addChild(new TruncatedText(hintText, 1, 0));
         }
@@ -2966,7 +3011,7 @@ export class InteractiveMode {
                         this.session.abortBranchSummary();
                     };
                     this.chatContainer.addChild(new Spacer(1));
-                    summaryLoader = new Loader(this.ui, (spinner) => theme.fg("accent", spinner), (text) => theme.fg("muted", text), `Summarizing branch... (${appKey(this.keybindings, "interrupt")} to cancel)`);
+                    summaryLoader = new Loader(this.ui, (spinner) => theme.fg("accent", spinner), (text) => theme.fg("muted", text), `Summarizing branch... (${keyText("app.interrupt")} to cancel)`);
                     this.statusContainer.addChild(summaryLoader);
                     this.ui.requestRender();
                 }
@@ -3186,7 +3231,7 @@ export class InteractiveMode {
             return;
         }
         this.resetExtensionUI();
-        const loader = new BorderedLoader(this.ui, theme, "Reloading extensions, skills, prompts, themes...", {
+        const loader = new BorderedLoader(this.ui, theme, "Reloading keybindings, extensions, skills, prompts, themes...", {
             cancellable: false,
         });
         const previousEditor = this.editor;
@@ -3203,6 +3248,7 @@ export class InteractiveMode {
         };
         try {
             await this.session.reload();
+            this.keybindings.reload();
             setRegisteredThemes(this.session.resourceLoader.getThemes().themes);
             this.hideThinkingBlock = this.settingsManager.getHideThinkingBlock();
             const themeName = this.settingsManager.getTheme();
@@ -3236,7 +3282,7 @@ export class InteractiveMode {
             if (modelsJsonError) {
                 this.showError(`models.json error: ${modelsJsonError}`);
             }
-            this.showStatus("Reloaded extensions, skills, prompts, themes");
+            this.showStatus("Reloaded keybindings, extensions, skills, prompts, themes");
         }
         catch (error) {
             dismissLoader(previousEditor);
@@ -3247,13 +3293,58 @@ export class InteractiveMode {
         const parts = text.split(/\s+/);
         const outputPath = parts.length > 1 ? parts[1] : undefined;
         try {
-            const filePath = await this.session.exportToHtml(outputPath);
-            this.showStatus(`Session exported to: ${filePath}`);
+            if (outputPath?.endsWith(".jsonl")) {
+                const filePath = this.session.exportToJsonl(outputPath);
+                this.showStatus(`Session exported to: ${filePath}`);
+            }
+            else {
+                const filePath = await this.session.exportToHtml(outputPath);
+                this.showStatus(`Session exported to: ${filePath}`);
+            }
         }
         catch (error) {
             this.showError(`Failed to export session: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
     }
+    async handleImportCommand(text) {
+        const parts = text.split(/\s+/);
+        if (parts.length < 2 || !parts[1]) {
+            this.showError("Usage: /import <path.jsonl>");
+            return;
+        }
+        const inputPath = parts[1];
+        const confirmed = await this.showExtensionConfirm("Import session", `Replace current session with ${inputPath}?`);
+        if (!confirmed) {
+            this.showStatus("Import cancelled");
+            return;
+        }
+        try {
+            // Stop loading animation
+            if (this.loadingAnimation) {
+                this.loadingAnimation.stop();
+                this.loadingAnimation = undefined;
+            }
+            this.statusContainer.clear();
+            // Clear UI state
+            this.pendingMessagesContainer.clear();
+            this.compactionQueuedMessages = [];
+            this.streamingComponent = undefined;
+            this.streamingMessage = undefined;
+            this.pendingTools.clear();
+            const success = await this.session.importFromJsonl(inputPath);
+            if (!success) {
+                this.showWarning("Import cancelled");
+                return;
+            }
+            // Clear and re-render the chat
+            this.chatContainer.clear();
+            this.renderInitialMessages();
+            this.showStatus(`Session imported from: ${inputPath}`);
+        }
+        catch (error) {
+            this.showError(`Failed to import session: ${error instanceof Error ? error.message : "Unknown error"}`);
+        }
+    }
     async handleShareCommand() {
         // Check if gh is available and logged in
         try {
@@ -3341,14 +3432,14 @@ export class InteractiveMode {
             }
         }
     }
-    handleCopyCommand() {
+    async handleCopyCommand() {
         const text = this.session.getLastAssistantText();
         if (!text) {
             this.showError("No agent messages to copy yet.");
             return;
         }
         try {
-            copyToClipboard(text);
+            await copyToClipboard(text);
             this.showStatus("Copied last agent message to clipboard");
         }
         catch (error) {
@@ -3441,53 +3532,59 @@ export class InteractiveMode {
      * Get capitalized display string for an app keybinding action.
      */
     getAppKeyDisplay(action) {
-        return this.capitalizeKey(appKey(this.keybindings, action));
+        return this.capitalizeKey(keyText(action));
     }
     /**
      * Get capitalized display string for an editor keybinding action.
      */
     getEditorKeyDisplay(action) {
-        return this.capitalizeKey(editorKey(action));
+        return this.capitalizeKey(keyText(action));
     }
     handleHotkeysCommand() {
         // Navigation keybindings
-        const cursorWordLeft = this.getEditorKeyDisplay("cursorWordLeft");
-        const cursorWordRight = this.getEditorKeyDisplay("cursorWordRight");
-        const cursorLineStart = this.getEditorKeyDisplay("cursorLineStart");
-        const cursorLineEnd = this.getEditorKeyDisplay("cursorLineEnd");
-        const jumpForward = this.getEditorKeyDisplay("jumpForward");
-        const jumpBackward = this.getEditorKeyDisplay("jumpBackward");
-        const pageUp = this.getEditorKeyDisplay("pageUp");
-        const pageDown = this.getEditorKeyDisplay("pageDown");
+        const cursorUp = this.getEditorKeyDisplay("tui.editor.cursorUp");
+        const cursorDown = this.getEditorKeyDisplay("tui.editor.cursorDown");
+        const cursorLeft = this.getEditorKeyDisplay("tui.editor.cursorLeft");
+        const cursorRight = this.getEditorKeyDisplay("tui.editor.cursorRight");
+        const cursorWordLeft = this.getEditorKeyDisplay("tui.editor.cursorWordLeft");
+        const cursorWordRight = this.getEditorKeyDisplay("tui.editor.cursorWordRight");
+        const cursorLineStart = this.getEditorKeyDisplay("tui.editor.cursorLineStart");
+        const cursorLineEnd = this.getEditorKeyDisplay("tui.editor.cursorLineEnd");
+        const jumpForward = this.getEditorKeyDisplay("tui.editor.jumpForward");
+        const jumpBackward = this.getEditorKeyDisplay("tui.editor.jumpBackward");
+        const pageUp = this.getEditorKeyDisplay("tui.editor.pageUp");
+        const pageDown = this.getEditorKeyDisplay("tui.editor.pageDown");
         // Editing keybindings
-        const submit = this.getEditorKeyDisplay("submit");
-        const newLine = this.getEditorKeyDisplay("newLine");
-        const deleteWordBackward = this.getEditorKeyDisplay("deleteWordBackward");
-        const deleteWordForward = this.getEditorKeyDisplay("deleteWordForward");
-        const deleteToLineStart = this.getEditorKeyDisplay("deleteToLineStart");
-        const deleteToLineEnd = this.getEditorKeyDisplay("deleteToLineEnd");
-        const yank = this.getEditorKeyDisplay("yank");
-        const yankPop = this.getEditorKeyDisplay("yankPop");
-        const undo = this.getEditorKeyDisplay("undo");
-        const tab = this.getEditorKeyDisplay("tab");
+        const submit = this.getEditorKeyDisplay("tui.input.submit");
+        const newLine = this.getEditorKeyDisplay("tui.input.newLine");
+        const deleteWordBackward = this.getEditorKeyDisplay("tui.editor.deleteWordBackward");
+        const deleteWordForward = this.getEditorKeyDisplay("tui.editor.deleteWordForward");
+        const deleteToLineStart = this.getEditorKeyDisplay("tui.editor.deleteToLineStart");
+        const deleteToLineEnd = this.getEditorKeyDisplay("tui.editor.deleteToLineEnd");
+        const yank = this.getEditorKeyDisplay("tui.editor.yank");
+        const yankPop = this.getEditorKeyDisplay("tui.editor.yankPop");
+        const undo = this.getEditorKeyDisplay("tui.editor.undo");
+        const tab = this.getEditorKeyDisplay("tui.input.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 selectModel = this.getAppKeyDisplay("selectModel");
-        const expandTools = this.getAppKeyDisplay("expandTools");
-        const toggleThinking = this.getAppKeyDisplay("toggleThinking");
-        const externalEditor = this.getAppKeyDisplay("externalEditor");
-        const followUp = this.getAppKeyDisplay("followUp");
-        const dequeue = this.getAppKeyDisplay("dequeue");
+        const interrupt = this.getAppKeyDisplay("app.interrupt");
+        const clear = this.getAppKeyDisplay("app.clear");
+        const exit = this.getAppKeyDisplay("app.exit");
+        const suspend = this.getAppKeyDisplay("app.suspend");
+        const cycleThinkingLevel = this.getAppKeyDisplay("app.thinking.cycle");
+        const cycleModelForward = this.getAppKeyDisplay("app.model.cycleForward");
+        const selectModel = this.getAppKeyDisplay("app.model.select");
+        const expandTools = this.getAppKeyDisplay("app.tools.expand");
+        const toggleThinking = this.getAppKeyDisplay("app.thinking.toggle");
+        const externalEditor = this.getAppKeyDisplay("app.editor.external");
+        const cycleModelBackward = this.getAppKeyDisplay("app.model.cycleBackward");
+        const followUp = this.getAppKeyDisplay("app.message.followUp");
+        const dequeue = this.getAppKeyDisplay("app.message.dequeue");
+        const pasteImage = this.getAppKeyDisplay("app.clipboard.pasteImage");
         let hotkeys = `
 **Navigation**
 | Key | Action |
 |-----|--------|
-| \`Arrow keys\` | Move cursor / browse history (Up when empty) |
+| \`${cursorUp}\` / \`${cursorDown}\` / \`${cursorLeft}\` / \`${cursorRight}\` | Move cursor / browse history (Up when empty) |
 | \`${cursorWordLeft}\` / \`${cursorWordRight}\` | Move by word |
 | \`${cursorLineStart}\` | Start of line |
 | \`${cursorLineEnd}\` | End of line |
@@ -3517,14 +3614,14 @@ export class InteractiveMode {
 | \`${exit}\` | Exit (when editor is empty) |
 | \`${suspend}\` | Suspend to background |
 | \`${cycleThinkingLevel}\` | Cycle thinking level |
-| \`${cycleModelForward}\` | Cycle models |
+| \`${cycleModelForward}\` / \`${cycleModelBackward}\` | Cycle models |
 | \`${selectModel}\` | Open model selector |
 | \`${expandTools}\` | Toggle tool output expansion |
 | \`${toggleThinking}\` | Toggle thinking block visibility |
 | \`${externalEditor}\` | Edit message in external editor |
 | \`${followUp}\` | Queue follow-up message |
 | \`${dequeue}\` | Restore queued messages |
-| \`Ctrl+V\` | Paste image from clipboard |
+| \`${pasteImage}\` | Paste image from clipboard |
 | \`/\` | Slash commands |
 | \`!\` | Run bash command |
 | \`!!\` | Run bash command (excluded from context) |
@@ -3707,7 +3804,7 @@ export class InteractiveMode {
         };
         // Show compacting status
         this.chatContainer.addChild(new Spacer(1));
-        const cancelHint = `(${appKey(this.keybindings, "interrupt")} to cancel)`;
+        const cancelHint = `(${keyText("app.interrupt")} to cancel)`;
         const label = isAuto ? `Auto-compacting context... ${cancelHint}` : `Compacting context... ${cancelHint}`;
         const compactingLoader = new Loader(this.ui, (spinner) => theme.fg("accent", spinner), (text) => theme.fg("muted", text), label);
         this.statusContainer.addChild(compactingLoader);