shumengya/sproutclaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(keybindings): migrate to namespaced ids closes #2391

Browse Source
This commit is contained in:
Mario Zechner
2026-03-20 01:50:47 +01:00
parent 74a46fc7ea
commit e3fee7a511
43 changed files with 1077 additions and 883 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/coding-agent/src/modes/interactive/components/bash-execution.ts
View File

@@ -12,7 +12,7 @@ import {
} from "../../../core/tools/truncate.js";
import { theme } from "../theme/theme.js";
import { DynamicBorder } from "./dynamic-border.js";
import { editorKey, keyHint } from "./keybinding-hints.js";
import { keyHint, keyText } from "./keybinding-hints.js";
import { truncateToVisualLines } from "./visual-truncate.js";
// Preview line limit when not expanded (matches tool execution behavior)
@@ -58,7 +58,7 @@ export class BashExecutionComponent extends Container {
ui,
(spinner) => theme.fg(colorKey, spinner),
(text) => theme.fg("muted", text),
`Running... (${editorKey("selectCancel")} to cancel)`, // Plain text for loader
`Running... (${keyText("tui.select.cancel")} to cancel)`, // Plain text for loader
);
this.contentContainer.addChild(this.loader);
@@ -168,10 +168,10 @@ export class BashExecutionComponent extends Container {
// Show how many lines are hidden (collapsed preview)
if (hiddenLineCount > 0) {
if (this.expanded) {
statusParts.push(`(${keyHint("expandTools", "to collapse")})`);
statusParts.push(`(${keyHint("app.tools.expand", "to collapse")})`);
} else {
statusParts.push(
`${theme.fg("muted", `... ${hiddenLineCount} more lines`)} (${keyHint("expandTools", "to expand")})`,
`${theme.fg("muted", `... ${hiddenLineCount} more lines`)} (${keyHint("app.tools.expand", "to expand")})`,
);
}
}

2
packages/coding-agent/src/modes/interactive/components/bordered-loader.ts
View File

@@ -33,7 +33,7 @@ export class BorderedLoader extends Container {
this.addChild(this.loader);
if (this.cancellable) {
this.addChild(new Spacer(1));
this.addChild(new Text(keyHint("selectCancel", "cancel"), 1, 0));
this.addChild(new Text(keyHint("tui.select.cancel", "cancel"), 1, 0));
}
this.addChild(new Spacer(1));
this.addChild(new DynamicBorder(borderColor));

4
packages/coding-agent/src/modes/interactive/components/branch-summary-message.ts
View File

@@ -1,7 +1,7 @@
import { Box, Markdown, type MarkdownTheme, Spacer, Text } from "@mariozechner/pi-tui";
import type { BranchSummaryMessage } from "../../../core/messages.js";
import { getMarkdownTheme, theme } from "../theme/theme.js";
import { editorKey } from "./keybinding-hints.js";
import { keyText } from "./keybinding-hints.js";
/**
* Component that renders a branch summary message with collapsed/expanded state.
@@ -47,7 +47,7 @@ export class BranchSummaryMessageComponent extends Box {
this.addChild(
new Text(
theme.fg("customMessageText", "Branch summary (") +
theme.fg("dim", editorKey("expandTools")) +
theme.fg("dim", keyText("app.tools.expand")) +
theme.fg("customMessageText", " to expand)"),
0,
0,

4
packages/coding-agent/src/modes/interactive/components/compaction-summary-message.ts
View File

@@ -1,7 +1,7 @@
import { Box, Markdown, type MarkdownTheme, Spacer, Text } from "@mariozechner/pi-tui";
import type { CompactionSummaryMessage } from "../../../core/messages.js";
import { getMarkdownTheme, theme } from "../theme/theme.js";
import { editorKey } from "./keybinding-hints.js";
import { keyText } from "./keybinding-hints.js";
/**
* Component that renders a compaction message with collapsed/expanded state.
@@ -48,7 +48,7 @@ export class CompactionSummaryMessageComponent extends Box {
this.addChild(
new Text(
theme.fg("customMessageText", `Compacted from ${tokenStr} tokens (`) +
theme.fg("dim", editorKey("expandTools")) +
theme.fg("dim", keyText("app.tools.expand")) +
theme.fg("customMessageText", " to expand)"),
0,
0,

16
packages/coding-agent/src/modes/interactive/components/config-selector.ts
View File

@@ -7,7 +7,7 @@ import {
type Component,
Container,
type Focusable,
getEditorKeybindings,
getKeybindings,
Input,
matchesKey,
Spacer,
@@ -355,17 +355,17 @@ class ResourceList implements Component, Focusable {
}
handleInput(data: string): void {
const kb = getEditorKeybindings();
const kb = getKeybindings();
if (kb.matches(data, "selectUp")) {
if (kb.matches(data, "tui.select.up")) {
this.selectedIndex = this.findNextItem(this.selectedIndex, -1);
return;
}
if (kb.matches(data, "selectDown")) {
if (kb.matches(data, "tui.select.down")) {
this.selectedIndex = this.findNextItem(this.selectedIndex, 1);
return;
}
if (kb.matches(data, "selectPageUp")) {
if (kb.matches(data, "tui.select.pageUp")) {
// Jump up by maxVisible, then find nearest item
let target = Math.max(0, this.selectedIndex - this.maxVisible);
while (target < this.filteredItems.length && this.filteredItems[target].type !== "item") {
@@ -376,7 +376,7 @@ class ResourceList implements Component, Focusable {
}
return;
}
if (kb.matches(data, "selectPageDown")) {
if (kb.matches(data, "tui.select.pageDown")) {
// Jump down by maxVisible, then find nearest item
let target = Math.min(this.filteredItems.length - 1, this.selectedIndex + this.maxVisible);
while (target >= 0 && this.filteredItems[target].type !== "item") {
@@ -387,7 +387,7 @@ class ResourceList implements Component, Focusable {
}
return;
}
if (kb.matches(data, "selectCancel")) {
if (kb.matches(data, "tui.select.cancel")) {
this.onCancel?.();
return;
}
@@ -395,7 +395,7 @@ class ResourceList implements Component, Focusable {
this.onExit?.();
return;
}
if (data === " " || kb.matches(data, "selectConfirm")) {
if (data === " " || kb.matches(data, "tui.select.confirm")) {
const entry = this.filteredItems[this.selectedIndex];
if (entry?.type === "item") {
const newEnabled = !entry.item.enabled;

18
packages/coding-agent/src/modes/interactive/components/custom-editor.ts
View File

@@ -1,12 +1,12 @@
import { Editor, type EditorOptions, type EditorTheme, type TUI } from "@mariozechner/pi-tui";
import type { AppAction, KeybindingsManager } from "../../../core/keybindings.js";
import type { AppKeybinding, KeybindingsManager } from "../../../core/keybindings.js";
/**
* Custom editor that handles app-level keybindings for coding-agent.
*/
export class CustomEditor extends Editor {
private keybindings: KeybindingsManager;
public actionHandlers: Map<AppAction, () => void> = new Map();
public actionHandlers: Map<AppKeybinding, () => void> = new Map();
// Special handlers that can be dynamically replaced
public onEscape?: () => void;
@@ -23,7 +23,7 @@ export class CustomEditor extends Editor {
/**
* Register a handler for an app action.
*/
onAction(action: AppAction, handler: () => void): void {
onAction(action: AppKeybinding, handler: () => void): void {
this.actionHandlers.set(action, handler);
}
@@ -34,7 +34,7 @@ export class CustomEditor extends Editor {
}
// Check for paste image keybinding
if (this.keybindings.matches(data, "pasteImage")) {
if (this.keybindings.matches(data, "app.clipboard.pasteImage")) {
this.onPasteImage?.();
return;
}
@@ -42,10 +42,10 @@ export class CustomEditor extends Editor {
// Check app keybindings first
// Escape/interrupt - only if autocomplete is NOT active
if (this.keybindings.matches(data, "interrupt")) {
if (this.keybindings.matches(data, "app.interrupt")) {
if (!this.isShowingAutocomplete()) {
// Use dynamic onEscape if set, otherwise registered handler
const handler = this.onEscape ?? this.actionHandlers.get("interrupt");
const handler = this.onEscape ?? this.actionHandlers.get("app.interrupt");
if (handler) {
handler();
return;
@@ -57,9 +57,9 @@ export class CustomEditor extends Editor {
}
// Exit (Ctrl+D) - only when editor is empty
if (this.keybindings.matches(data, "exit")) {
if (this.keybindings.matches(data, "app.exit")) {
if (this.getText().length === 0) {
const handler = this.onCtrlD ?? this.actionHandlers.get("exit");
const handler = this.onCtrlD ?? this.actionHandlers.get("app.exit");
if (handler) handler();
return;
}
@@ -68,7 +68,7 @@ export class CustomEditor extends Editor {
// Check all other app actions
for (const [action, handler] of this.actionHandlers) {
if (action !== "interrupt" && action !== "exit" && this.keybindings.matches(data, action)) {
if (action !== "app.interrupt" && action !== "app.exit" && this.keybindings.matches(data, action)) {
handler();
return;
}

18
packages/coding-agent/src/modes/interactive/components/extension-editor.ts
View File

@@ -12,7 +12,7 @@ import {
Editor,
type EditorOptions,
type Focusable,
getEditorKeybindings,
getKeybindings,
Spacer,
Text,
type TUI,
@@ -20,7 +20,7 @@ import {
import type { KeybindingsManager } from "../../../core/keybindings.js";
import { getEditorTheme, theme } from "../theme/theme.js";
import { DynamicBorder } from "./dynamic-border.js";
import { appKeyHint, keyHint } from "./keybinding-hints.js";
import { keyHint } from "./keybinding-hints.js";
export class ExtensionEditorComponent extends Container implements Focusable {
private editor: Editor;
@@ -78,12 +78,12 @@ export class ExtensionEditorComponent extends Container implements Focusable {
// Add hint
const hasExternalEditor = !!(process.env.VISUAL || process.env.EDITOR);
const hint =
keyHint("selectConfirm", "submit") +
keyHint("tui.select.confirm", "submit") +
" " +
keyHint("newLine", "newline") +
keyHint("tui.input.newLine", "newline") +
" " +
keyHint("selectCancel", "cancel") +
(hasExternalEditor ? ` ${appKeyHint(this.keybindings, "externalEditor", "external editor")}` : "");
keyHint("tui.select.cancel", "cancel") +
(hasExternalEditor ? ` ${keyHint("app.editor.external", "external editor")}` : "");
this.addChild(new Text(hint, 1, 0));
this.addChild(new Spacer(1));
@@ -93,15 +93,15 @@ export class ExtensionEditorComponent extends Container implements Focusable {
}
handleInput(keyData: string): void {
const kb = getEditorKeybindings();
const kb = getKeybindings();
// Escape or Ctrl+C to cancel
if (kb.matches(keyData, "selectCancel")) {
if (kb.matches(keyData, "tui.select.cancel")) {
this.onCancelCallback();
return;
}
// External editor (app keybinding)
if (this.keybindings.matches(keyData, "externalEditor")) {
if (this.keybindings.matches(keyData, "app.editor.external")) {
this.openExternalEditor();
return;
}

12
packages/coding-agent/src/modes/interactive/components/extension-input.ts
View File

@@ -2,7 +2,7 @@
* Simple text input component for extensions.
*/
import { Container, type Focusable, getEditorKeybindings, Input, Spacer, Text, type TUI } from "@mariozechner/pi-tui";
import { Container, type Focusable, getKeybindings, Input, Spacer, Text, type TUI } from "@mariozechner/pi-tui";
import { theme } from "../theme/theme.js";
import { CountdownTimer } from "./countdown-timer.js";
import { DynamicBorder } from "./dynamic-border.js";
@@ -63,16 +63,18 @@ export class ExtensionInputComponent extends Container implements Focusable {
this.input = new Input();
this.addChild(this.input);
this.addChild(new Spacer(1));
this.addChild(new Text(`${keyHint("selectConfirm", "submit")} ${keyHint("selectCancel", "cancel")}`, 1, 0));
this.addChild(
new Text(`${keyHint("tui.select.confirm", "submit")} ${keyHint("tui.select.cancel", "cancel")}`, 1, 0),
);
this.addChild(new Spacer(1));
this.addChild(new DynamicBorder());
}
handleInput(keyData: string): void {
const kb = getEditorKeybindings();
if (kb.matches(keyData, "selectConfirm") || keyData === "\n") {
const kb = getKeybindings();
if (kb.matches(keyData, "tui.select.confirm") || keyData === "\n") {
this.onSubmitCallback(this.input.getValue());
} else if (kb.matches(keyData, "selectCancel")) {
} else if (kb.matches(keyData, "tui.select.cancel")) {
this.onCancelCallback();
} else {
this.input.handleInput(keyData);

16
packages/coding-agent/src/modes/interactive/components/extension-selector.ts
View File

@@ -3,7 +3,7 @@
* Displays a list of string options with keyboard navigation.
*/
import { Container, getEditorKeybindings, Spacer, Text, type TUI } from "@mariozechner/pi-tui";
import { Container, getKeybindings, Spacer, Text, type TUI } from "@mariozechner/pi-tui";
import { theme } from "../theme/theme.js";
import { CountdownTimer } from "./countdown-timer.js";
import { DynamicBorder } from "./dynamic-border.js";
@@ -61,9 +61,9 @@ export class ExtensionSelectorComponent extends Container {
new Text(
rawKeyHint("↑↓", "navigate") +
" " +
keyHint("selectConfirm", "select") +
keyHint("tui.select.confirm", "select") +
" " +
keyHint("selectCancel", "cancel"),
keyHint("tui.select.cancel", "cancel"),
1,
0,
),
@@ -86,17 +86,17 @@ export class ExtensionSelectorComponent extends Container {
}
handleInput(keyData: string): void {
const kb = getEditorKeybindings();
if (kb.matches(keyData, "selectUp") || keyData === "k") {
const kb = getKeybindings();
if (kb.matches(keyData, "tui.select.up") || keyData === "k") {
this.selectedIndex = Math.max(0, this.selectedIndex - 1);
this.updateList();
} else if (kb.matches(keyData, "selectDown") || keyData === "j") {
} else if (kb.matches(keyData, "tui.select.down") || keyData === "j") {
this.selectedIndex = Math.min(this.options.length - 1, this.selectedIndex + 1);
this.updateList();
} else if (kb.matches(keyData, "selectConfirm") || keyData === "\n") {
} else if (kb.matches(keyData, "tui.select.confirm") || keyData === "\n") {
const selected = this.options[this.selectedIndex];
if (selected) this.onSelectCallback(selected);
} else if (kb.matches(keyData, "selectCancel")) {
} else if (kb.matches(keyData, "tui.select.cancel")) {
this.onCancelCallback();
}
}

2
packages/coding-agent/src/modes/interactive/components/index.ts
View File

@@ -14,7 +14,7 @@ export { ExtensionEditorComponent } from "./extension-editor.js";
export { ExtensionInputComponent } from "./extension-input.js";
export { ExtensionSelectorComponent } from "./extension-selector.js";
export { FooterComponent } from "./footer.js";
export { appKey, appKeyHint, editorKey, keyHint, rawKeyHint } from "./keybinding-hints.js";
export { keyHint, keyText, rawKeyHint } from "./keybinding-hints.js";
export { LoginDialogComponent } from "./login-dialog.js";
export { ModelSelectorComponent } from "./model-selector.js";
export { OAuthSelectorComponent } from "./oauth-selector.js";

52
packages/coding-agent/src/modes/interactive/components/keybinding-hints.ts
View File

@@ -2,65 +2,23 @@
* Utilities for formatting keybinding hints in the UI.
*/
import { type EditorAction, getEditorKeybindings, type KeyId } from "@mariozechner/pi-tui";
import type { AppAction, KeybindingsManager } from "../../../core/keybindings.js";
import { getKeybindings, type Keybinding, type KeyId } from "@mariozechner/pi-tui";
import { theme } from "../theme/theme.js";
/**
* Format keys array as display string (e.g., ["ctrl+c", "escape"] -> "ctrl+c/escape").
*/
function formatKeys(keys: KeyId[]): string {
if (keys.length === 0) return "";
if (keys.length === 1) return keys[0]!;
return keys.join("/");
}
/**
* Get display string for an editor action.
*/
export function editorKey(action: EditorAction): string {
return formatKeys(getEditorKeybindings().getKeys(action));
export function keyText(keybinding: Keybinding): string {
return formatKeys(getKeybindings().getKeys(keybinding));
}
/**
* Get display string for an app action.
*/
export function appKey(keybindings: KeybindingsManager, action: AppAction): string {
return formatKeys(keybindings.getKeys(action));
export function keyHint(keybinding: Keybinding, description: string): string {
return theme.fg("dim", keyText(keybinding)) + theme.fg("muted", ` ${description}`);
}
/**
* Format a keybinding hint with consistent styling: dim key, muted description.
* Looks up the key from editor keybindings automatically.
*
* @param action - Editor action name (e.g., "selectConfirm", "expandTools")
* @param description - Description text (e.g., "to expand", "cancel")
* @returns Formatted string with dim key and muted description
*/
export function keyHint(action: EditorAction, description: string): string {
return theme.fg("dim", editorKey(action)) + theme.fg("muted", ` ${description}`);
}
/**
* Format a keybinding hint for app-level actions.
* Requires the KeybindingsManager instance.
*
* @param keybindings - KeybindingsManager instance
* @param action - App action name (e.g., "interrupt", "externalEditor")
* @param description - Description text
* @returns Formatted string with dim key and muted description
*/
export function appKeyHint(keybindings: KeybindingsManager, action: AppAction, description: string): string {
return theme.fg("dim", appKey(keybindings, action)) + theme.fg("muted", ` ${description}`);
}
/**
* Format a raw key string with description (for non-configurable keys like ↑↓).
*
* @param key - Raw key string
* @param description - Description text
* @returns Formatted string with dim key and muted description
*/
export function rawKeyHint(key: string, description: string): string {
return theme.fg("dim", key) + theme.fg("muted", ` ${description}`);
}

16
packages/coding-agent/src/modes/interactive/components/login-dialog.ts
View File

@@ -1,5 +1,5 @@
import { getOAuthProviders } from "@mariozechner/pi-ai/oauth";
import { Container, type Focusable, getEditorKeybindings, Input, Spacer, Text, type TUI } from "@mariozechner/pi-tui";
import { Container, type Focusable, getKeybindings, Input, Spacer, Text, type TUI } from "@mariozechner/pi-tui";
import { exec } from "child_process";
import { theme } from "../theme/theme.js";
import { DynamicBorder } from "./dynamic-border.js";
@@ -109,7 +109,7 @@ export class LoginDialogComponent extends Container implements Focusable {
this.contentContainer.addChild(new Spacer(1));
this.contentContainer.addChild(new Text(theme.fg("dim", prompt), 1, 0));
this.contentContainer.addChild(this.input);
this.contentContainer.addChild(new Text(`(${keyHint("selectCancel", "to cancel")})`, 1, 0));
this.contentContainer.addChild(new Text(`(${keyHint("tui.select.cancel", "to cancel")})`, 1, 0));
this.tui.requestRender();
return new Promise((resolve, reject) => {
@@ -130,7 +130,11 @@ export class LoginDialogComponent extends Container implements Focusable {
}
this.contentContainer.addChild(this.input);
this.contentContainer.addChild(
new Text(`(${keyHint("selectCancel", "to cancel,")} ${keyHint("selectConfirm", "to submit")})`, 1, 0),
new Text(
`(${keyHint("tui.select.cancel", "to cancel,")} ${keyHint("tui.select.confirm", "to submit")})`,
1,
0,
),
);
this.input.setValue("");
@@ -148,7 +152,7 @@ export class LoginDialogComponent extends Container implements Focusable {
showWaiting(message: string): void {
this.contentContainer.addChild(new Spacer(1));
this.contentContainer.addChild(new Text(theme.fg("dim", message), 1, 0));
this.contentContainer.addChild(new Text(`(${keyHint("selectCancel", "to cancel")})`, 1, 0));
this.contentContainer.addChild(new Text(`(${keyHint("tui.select.cancel", "to cancel")})`, 1, 0));
this.tui.requestRender();
}
@@ -161,9 +165,9 @@ export class LoginDialogComponent extends Container implements Focusable {
}
handleInput(data: string): void {
const kb = getEditorKeybindings();
const kb = getKeybindings();
if (kb.matches(data, "selectCancel")) {
if (kb.matches(data, "tui.select.cancel")) {
this.cancel();
return;
}

16
packages/coding-agent/src/modes/interactive/components/model-selector.ts
View File

@@ -3,7 +3,7 @@ import {
Container,
type Focusable,
fuzzyFilter,
getEditorKeybindings,
getKeybindings,
Input,
Spacer,
Text,
@@ -200,7 +200,7 @@ export class ModelSelectorComponent extends Container implements Focusable {
}
private getScopeHintText(): string {
return keyHint("tab", "scope") + theme.fg("muted", " (all/scoped)");
return keyHint("tui.input.tab", "scope") + theme.fg("muted", " (all/scoped)");
}
private setScope(scope: ModelScope): void {
@@ -284,8 +284,8 @@ export class ModelSelectorComponent extends Container implements Focusable {
}
handleInput(keyData: string): void {
const kb = getEditorKeybindings();
if (kb.matches(keyData, "tab")) {
const kb = getKeybindings();
if (kb.matches(keyData, "tui.input.tab")) {
if (this.scopedModelItems.length > 0) {
const nextScope: ModelScope = this.scope === "all" ? "scoped" : "all";
this.setScope(nextScope);
@@ -296,26 +296,26 @@ export class ModelSelectorComponent extends Container implements Focusable {
return;
}
// Up arrow - wrap to bottom when at top
if (kb.matches(keyData, "selectUp")) {
if (kb.matches(keyData, "tui.select.up")) {
if (this.filteredModels.length === 0) return;
this.selectedIndex = this.selectedIndex === 0 ? this.filteredModels.length - 1 : this.selectedIndex - 1;
this.updateList();
}
// Down arrow - wrap to top when at bottom
else if (kb.matches(keyData, "selectDown")) {
else if (kb.matches(keyData, "tui.select.down")) {
if (this.filteredModels.length === 0) return;
this.selectedIndex = this.selectedIndex === this.filteredModels.length - 1 ? 0 : this.selectedIndex + 1;
this.updateList();
}
// Enter
else if (kb.matches(keyData, "selectConfirm")) {
else if (kb.matches(keyData, "tui.select.confirm")) {
const selectedModel = this.filteredModels[this.selectedIndex];
if (selectedModel) {
this.handleSelect(selectedModel.model);
}
}
// Escape or Ctrl+C
else if (kb.matches(keyData, "selectCancel")) {
else if (kb.matches(keyData, "tui.select.cancel")) {
this.onCancelCallback();
}
// Pass everything else to search input

12
packages/coding-agent/src/modes/interactive/components/oauth-selector.ts
View File

@@ -1,6 +1,6 @@
import type { OAuthProviderInterface } from "@mariozechner/pi-ai";
import { getOAuthProviders } from "@mariozechner/pi-ai/oauth";
import { Container, getEditorKeybindings, Spacer, TruncatedText } from "@mariozechner/pi-tui";
import { Container, getKeybindings, Spacer, TruncatedText } from "@mariozechner/pi-tui";
import type { AuthStorage } from "../../../core/auth-storage.js";
import { theme } from "../theme/theme.js";
import { DynamicBorder } from "./dynamic-border.js";
@@ -95,26 +95,26 @@ export class OAuthSelectorComponent extends Container {
}
handleInput(keyData: string): void {
const kb = getEditorKeybindings();
const kb = getKeybindings();
// Up arrow
if (kb.matches(keyData, "selectUp")) {
if (kb.matches(keyData, "tui.select.up")) {
this.selectedIndex = Math.max(0, this.selectedIndex - 1);
this.updateList();
}
// Down arrow
else if (kb.matches(keyData, "selectDown")) {
else if (kb.matches(keyData, "tui.select.down")) {
this.selectedIndex = Math.min(this.allProviders.length - 1, this.selectedIndex + 1);
this.updateList();
}
// Enter
else if (kb.matches(keyData, "selectConfirm")) {
else if (kb.matches(keyData, "tui.select.confirm")) {
const selectedProvider = this.allProviders[this.selectedIndex];
if (selectedProvider) {
this.onSelectCallback(selectedProvider.id);
}
}
// Escape or Ctrl+C
else if (kb.matches(keyData, "selectCancel")) {
else if (kb.matches(keyData, "tui.select.cancel")) {
this.onCancelCallback();
}
}

8
packages/coding-agent/src/modes/interactive/components/scoped-models-selector.ts
View File

@@ -3,7 +3,7 @@ import {
Container,
type Focusable,
fuzzyFilter,
getEditorKeybindings,
getKeybindings,
Input,
Key,
matchesKey,
@@ -224,16 +224,16 @@ export class ScopedModelsSelectorComponent extends Container implements Focusabl
}
handleInput(data: string): void {
const kb = getEditorKeybindings();
const kb = getKeybindings();
// Navigation
if (kb.matches(data, "selectUp")) {
if (kb.matches(data, "tui.select.up")) {
if (this.filteredItems.length === 0) return;
this.selectedIndex = this.selectedIndex === 0 ? this.filteredItems.length - 1 : this.selectedIndex - 1;
this.updateList();
return;
}
if (kb.matches(data, "selectDown")) {
if (kb.matches(data, "tui.select.down")) {
if (this.filteredItems.length === 0) return;
this.selectedIndex = this.selectedIndex === this.filteredItems.length - 1 ? 0 : this.selectedIndex + 1;
this.updateList();

87
packages/coding-agent/src/modes/interactive/components/session-selector.ts
View File

@@ -6,9 +6,8 @@ import {
type Component,
Container,
type Focusable,
getEditorKeybindings,
getKeybindings,
Input,
matchesKey,
Spacer,
Text,
truncateToWidth,
@@ -18,7 +17,7 @@ import { KeybindingsManager } from "../../../core/keybindings.js";
import type { SessionInfo, SessionListProgress } from "../../../core/session-manager.js";
import { theme } from "../theme/theme.js";
import { DynamicBorder } from "./dynamic-border.js";
import { appKey, appKeyHint, keyHint } from "./keybinding-hints.js";
import { keyHint, keyText } from "./keybinding-hints.js";
import { filterAndSortSessions, hasSessionName, type NameFilter, type SortMode } from "./session-selector-search.js";
type SessionScope = "current" | "all";
@@ -52,7 +51,6 @@ class SessionSelectorHeader implements Component {
private scope: SessionScope;
private sortMode: SortMode;
private nameFilter: NameFilter;
private keybindings: KeybindingsManager;
private requestRender: () => void;
private loading = false;
private loadProgress: { loaded: number; total: number } | null = null;
@@ -62,17 +60,10 @@ class SessionSelectorHeader implements Component {
private statusTimeout: ReturnType<typeof setTimeout> | null = null;
private showRenameHint = false;
constructor(
scope: SessionScope,
sortMode: SortMode,
nameFilter: NameFilter,
keybindings: KeybindingsManager,
requestRender: () => void,
) {
constructor(scope: SessionScope, sortMode: SortMode, nameFilter: NameFilter, requestRender: () => void) {
this.scope = scope;
this.sortMode = sortMode;
this.nameFilter = nameFilter;
this.keybindings = keybindings;
this.requestRender = requestRender;
}
@@ -159,7 +150,7 @@ class SessionSelectorHeader implements Component {
let hintLine1: string;
let hintLine2: string;
if (this.confirmingDeletePath !== null) {
const confirmHint = "Delete session? [Enter] confirm · [Esc/Ctrl+C] cancel";
const confirmHint = `Delete session? ${keyHint("tui.select.confirm", "confirm")} · ${keyHint("tui.select.cancel", "cancel")}`;
hintLine1 = theme.fg("error", truncateToWidth(confirmHint, width, "…"));
hintLine2 = "";
} else if (this.statusMessage) {
@@ -169,15 +160,16 @@ class SessionSelectorHeader implements Component {
} else {
const pathState = this.showPath ? "(on)" : "(off)";
const sep = theme.fg("muted", " · ");
const hint1 = keyHint("tab", "scope") + sep + theme.fg("muted", 're:<pattern> regex · "phrase" exact');
const hint1 =
keyHint("tui.input.tab", "scope") + sep + theme.fg("muted", 're:<pattern> regex · "phrase" exact');
const hint2Parts = [
keyHint("toggleSessionSort", "sort"),
appKeyHint(this.keybindings, "toggleSessionNamedFilter", "named"),
keyHint("deleteSession", "delete"),
keyHint("toggleSessionPath", `path ${pathState}`),
keyHint("app.session.toggleSort", "sort"),
keyHint("app.session.toggleNamedFilter", "named"),
keyHint("app.session.delete", "delete"),
keyHint("app.session.togglePath", `path ${pathState}`),
];
if (this.showRenameHint) {
hint2Parts.push(keyHint("renameSession", "rename"));
hint2Parts.push(keyHint("app.session.rename", "rename"));
}
const hint2 = hint2Parts.join(sep);
hintLine1 = truncateToWidth(hint1, width, "…");
@@ -402,7 +394,7 @@ class SessionList implements Component, Focusable {
if (this.filteredSessions.length === 0) {
let emptyMessage: string;
if (this.nameFilter === "named") {
const toggleKey = appKey(this.keybindings, "toggleSessionNamedFilter");
const toggleKey = keyText("app.session.toggleNamedFilter");
if (this.showCwd) {
emptyMessage = ` No named sessions found. Press ${toggleKey} to show all.`;
} else {
@@ -511,18 +503,17 @@ class SessionList implements Component, Focusable {
}
handleInput(keyData: string): void {
const kb = getEditorKeybindings();
const kb = getKeybindings();
// Handle delete confirmation state first - intercept all keys
if (this.confirmingDeletePath !== null) {
if (kb.matches(keyData, "selectConfirm")) {
if (kb.matches(keyData, "tui.select.confirm")) {
const pathToDelete = this.confirmingDeletePath;
this.setConfirmingDeletePath(null);
void this.onDeleteSession?.(pathToDelete);
return;
}
// Allow both Escape and Ctrl+C to cancel (consistent with pi UX)
if (kb.matches(keyData, "selectCancel") || matchesKey(keyData, "ctrl+c")) {
if (kb.matches(keyData, "tui.select.cancel")) {
this.setConfirmingDeletePath(null);
return;
}
@@ -530,38 +521,38 @@ class SessionList implements Component, Focusable {
return;
}
if (kb.matches(keyData, "tab")) {
if (kb.matches(keyData, "tui.input.tab")) {
if (this.onToggleScope) {
this.onToggleScope();
}
return;
}
if (kb.matches(keyData, "toggleSessionSort")) {
if (kb.matches(keyData, "app.session.toggleSort")) {
this.onToggleSort?.();
return;
}
if (this.keybindings.matches(keyData, "toggleSessionNamedFilter")) {
if (this.keybindings.matches(keyData, "app.session.toggleNamedFilter")) {
this.onToggleNameFilter?.();
return;
}
// Ctrl+P: toggle path display
if (kb.matches(keyData, "toggleSessionPath")) {
if (kb.matches(keyData, "app.session.togglePath")) {
this.showPath = !this.showPath;
this.onTogglePath?.(this.showPath);
return;
}
// Ctrl+D: initiate delete confirmation (useful on terminals that don't distinguish Ctrl+Backspace from Backspace)
if (kb.matches(keyData, "deleteSession")) {
if (kb.matches(keyData, "app.session.delete")) {
this.startDeleteConfirmationForSelectedSession();
return;
}
// Ctrl+R: rename selected session
if (matchesKey(keyData, "ctrl+r")) {
// Rename selected session
if (kb.matches(keyData, "app.session.rename")) {
const selected = this.filteredSessions[this.selectedIndex];
if (selected) {
this.onRenameSession?.(selected.session.path);
@@ -571,7 +562,7 @@ class SessionList implements Component, Focusable {
// Ctrl+Backspace: non-invasive convenience alias for delete
// Only triggers deletion when the query is empty; otherwise it is forwarded to the input
if (kb.matches(keyData, "deleteSessionNoninvasive")) {
if (kb.matches(keyData, "app.session.deleteNoninvasive")) {
if (this.searchInput.getValue().length > 0) {
this.searchInput.handleInput(keyData);
this.filterSessions(this.searchInput.getValue());
@@ -583,30 +574,30 @@ class SessionList implements Component, Focusable {
}
// Up arrow
if (kb.matches(keyData, "selectUp")) {
if (kb.matches(keyData, "tui.select.up")) {
this.selectedIndex = Math.max(0, this.selectedIndex - 1);
}
// Down arrow
else if (kb.matches(keyData, "selectDown")) {
else if (kb.matches(keyData, "tui.select.down")) {
this.selectedIndex = Math.min(this.filteredSessions.length - 1, this.selectedIndex + 1);
}
// Page up - jump up by maxVisible items
else if (kb.matches(keyData, "selectPageUp")) {
else if (kb.matches(keyData, "tui.select.pageUp")) {
this.selectedIndex = Math.max(0, this.selectedIndex - this.maxVisible);
}
// Page down - jump down by maxVisible items
else if (kb.matches(keyData, "selectPageDown")) {
else if (kb.matches(keyData, "tui.select.pageDown")) {
this.selectedIndex = Math.min(this.filteredSessions.length - 1, this.selectedIndex + this.maxVisible);
}
// Enter
else if (kb.matches(keyData, "selectConfirm")) {
else if (kb.matches(keyData, "tui.select.confirm")) {
const selected = this.filteredSessions[this.selectedIndex];
if (selected && this.onSelect) {
this.onSelect(selected.session.path);
}
}
// Escape - cancel
else if (kb.matches(keyData, "selectCancel")) {
else if (kb.matches(keyData, "tui.select.cancel")) {
if (this.onCancel) {
this.onCancel();
}
@@ -667,8 +658,8 @@ async function deleteSessionFile(
export class SessionSelectorComponent extends Container implements Focusable {
handleInput(data: string): void {
if (this.mode === "rename") {
const kb = getEditorKeybindings();
if (kb.matches(data, "selectCancel") || matchesKey(data, "ctrl+c")) {
const kb = getKeybindings();
if (kb.matches(data, "tui.select.cancel")) {
this.exitRenameMode();
return;
}
@@ -749,13 +740,7 @@ export class SessionSelectorComponent extends Container implements Focusable {
this.allSessionsLoader = allSessionsLoader;
this.onCancel = onCancel;
this.requestRender = requestRender;
this.header = new SessionSelectorHeader(
this.scope,
this.sortMode,
this.nameFilter,
this.keybindings,
this.requestRender,
);
this.header = new SessionSelectorHeader(this.scope, this.sortMode, this.nameFilter, this.requestRender);
const renameSession = options?.renameSession;
this.renameSession = renameSession;
this.canRename = !!renameSession;
@@ -864,7 +849,13 @@ export class SessionSelectorComponent extends Container implements Focusable {
panel.addChild(new Spacer(1));
panel.addChild(this.renameInput);
panel.addChild(new Spacer(1));
panel.addChild(new Text(theme.fg("muted", "Enter to save · Esc/Ctrl+C to cancel"), 1, 0));
panel.addChild(
new Text(
theme.fg("muted", `${keyText("tui.select.confirm")} to save · ${keyText("tui.select.cancel")} to cancel`),
1,
0,
),
);
this.buildBaseLayout(panel, { showHeader: false });
this.requestRender();

4
packages/coding-agent/src/modes/interactive/components/skill-invocation-message.ts
View File

@@ -1,7 +1,7 @@
import { Box, Markdown, type MarkdownTheme, Text } from "@mariozechner/pi-tui";
import type { ParsedSkillBlock } from "../../../core/agent-session.js";
import { getMarkdownTheme, theme } from "../theme/theme.js";
import { editorKey } from "./keybinding-hints.js";
import { keyText } from "./keybinding-hints.js";
/**
* Component that renders a skill invocation message with collapsed/expanded state.
@@ -48,7 +48,7 @@ export class SkillInvocationMessageComponent extends Box {
const line =
theme.fg("customMessageLabel", `\x1b[1m[skill]\x1b[22m `) +
theme.fg("customMessageText", this.skillBlock.name) +
theme.fg("dim", ` (${editorKey("expandTools")} to expand)`);
theme.fg("dim", ` (${keyText("app.tools.expand")} to expand)`);
this.addChild(new Text(line, 0, 0));
}
}

12
packages/coding-agent/src/modes/interactive/components/tool-execution.ts
View File

@@ -588,7 +588,7 @@ export class ToolExecutionComponent extends Container {
if (cachedSkipped && cachedSkipped > 0) {
const hint =
theme.fg("muted", `... (${cachedSkipped} earlier lines,`) +
` ${keyHint("expandTools", "to expand")})`;
` ${keyHint("app.tools.expand", "to expand")})`;
return ["", truncateToWidth(hint, width, "..."), ...cachedLines];
}
// Add blank line for spacing (matches expanded case)
@@ -695,7 +695,7 @@ export class ToolExecutionComponent extends Container {
.map((line: string) => (lang ? replaceTabs(line) : theme.fg("toolOutput", replaceTabs(line))))
.join("\n");
if (remaining > 0) {
text += `${theme.fg("muted", `\n... (${remaining} more lines,`)} ${keyHint("expandTools", "to expand")})`;
text += `${theme.fg("muted", `\n... (${remaining} more lines,`)} ${keyHint("app.tools.expand", "to expand")})`;
}
const truncation = this.result.details?.truncation;
@@ -772,7 +772,7 @@ export class ToolExecutionComponent extends Container {
if (remaining > 0) {
text +=
theme.fg("muted", `\n... (${remaining} more lines, ${totalLines} total,`) +
` ${keyHint("expandTools", "to expand")})`;
` ${keyHint("app.tools.expand", "to expand")})`;
}
}
@@ -839,7 +839,7 @@ export class ToolExecutionComponent extends Container {
text += `\n\n${displayLines.map((line: string) => theme.fg("toolOutput", line)).join("\n")}`;
if (remaining > 0) {
text += `${theme.fg("muted", `\n... (${remaining} more lines,`)} ${keyHint("expandTools", "to expand")})`;
text += `${theme.fg("muted", `\n... (${remaining} more lines,`)} ${keyHint("app.tools.expand", "to expand")})`;
}
}
@@ -881,7 +881,7 @@ export class ToolExecutionComponent extends Container {
text += `\n\n${displayLines.map((line: string) => theme.fg("toolOutput", line)).join("\n")}`;
if (remaining > 0) {
text += `${theme.fg("muted", `\n... (${remaining} more lines,`)} ${keyHint("expandTools", "to expand")})`;
text += `${theme.fg("muted", `\n... (${remaining} more lines,`)} ${keyHint("app.tools.expand", "to expand")})`;
}
}
@@ -927,7 +927,7 @@ export class ToolExecutionComponent extends Container {
text += `\n\n${displayLines.map((line: string) => theme.fg("toolOutput", line)).join("\n")}`;
if (remaining > 0) {
text += `${theme.fg("muted", `\n... (${remaining} more lines,`)} ${keyHint("expandTools", "to expand")})`;
text += `${theme.fg("muted", `\n... (${remaining} more lines,`)} ${keyHint("app.tools.expand", "to expand")})`;
}
}

33
packages/coding-agent/src/modes/interactive/components/tree-selector.ts
View File

@@ -2,7 +2,7 @@ import {
type Component,
Container,
type Focusable,
getEditorKeybindings,
getKeybindings,
Input,
matchesKey,
Spacer,
@@ -860,12 +860,12 @@ class TreeList implements Component {
}
handleInput(keyData: string): void {
const kb = getEditorKeybindings();
if (kb.matches(keyData, "selectUp")) {
const kb = getKeybindings();
if (kb.matches(keyData, "tui.select.up")) {
this.selectedIndex = this.selectedIndex === 0 ? this.filteredNodes.length - 1 : this.selectedIndex - 1;
} else if (kb.matches(keyData, "selectDown")) {
} else if (kb.matches(keyData, "tui.select.down")) {
this.selectedIndex = this.selectedIndex === this.filteredNodes.length - 1 ? 0 : this.selectedIndex + 1;
} else if (kb.matches(keyData, "treeFoldOrUp")) {
} else if (kb.matches(keyData, "app.tree.foldOrUp")) {
const currentId = this.filteredNodes[this.selectedIndex]?.node.entry.id;
if (currentId && this.isFoldable(currentId) && !this.foldedNodes.has(currentId)) {
this.foldedNodes.add(currentId);
@@ -873,7 +873,7 @@ class TreeList implements Component {
} else {
this.selectedIndex = this.findBranchSegmentStart("up");
}
} else if (kb.matches(keyData, "treeUnfoldOrDown")) {
} else if (kb.matches(keyData, "app.tree.unfoldOrDown")) {
const currentId = this.filteredNodes[this.selectedIndex]?.node.entry.id;
if (currentId && this.foldedNodes.has(currentId)) {
this.foldedNodes.delete(currentId);
@@ -881,18 +881,18 @@ class TreeList implements Component {
} else {
this.selectedIndex = this.findBranchSegmentStart("down");
}
} else if (kb.matches(keyData, "cursorLeft") || kb.matches(keyData, "selectPageUp")) {
} else if (kb.matches(keyData, "tui.editor.cursorLeft") || kb.matches(keyData, "tui.select.pageUp")) {
// Page up
this.selectedIndex = Math.max(0, this.selectedIndex - this.maxVisibleLines);
} else if (kb.matches(keyData, "cursorRight") || kb.matches(keyData, "selectPageDown")) {
} else if (kb.matches(keyData, "tui.editor.cursorRight") || kb.matches(keyData, "tui.select.pageDown")) {
// Page down
this.selectedIndex = Math.min(this.filteredNodes.length - 1, this.selectedIndex + this.maxVisibleLines);
} else if (kb.matches(keyData, "selectConfirm")) {
} else if (kb.matches(keyData, "tui.select.confirm")) {
const selected = this.filteredNodes[this.selectedIndex];
if (selected && this.onSelect) {
this.onSelect(selected.node.entry.id);
}
} else if (kb.matches(keyData, "selectCancel")) {
} else if (kb.matches(keyData, "tui.select.cancel")) {
if (this.searchQuery) {
this.searchQuery = "";
this.foldedNodes.clear();
@@ -939,7 +939,7 @@ class TreeList implements Component {
this.filterMode = modes[(currentIndex + 1) % modes.length];
this.foldedNodes.clear();
this.applyFilter();
} else if (kb.matches(keyData, "deleteCharBackward")) {
} else if (kb.matches(keyData, "tui.editor.deleteCharBackward")) {
if (this.searchQuery.length > 0) {
this.searchQuery = this.searchQuery.slice(0, -1);
this.foldedNodes.clear();
@@ -1066,17 +1066,20 @@ class LabelInput implements Component, Focusable {
lines.push(truncateToWidth(`${indent}${theme.fg("muted", "Label (empty to remove):")}`, width));
lines.push(...this.input.render(availableWidth).map((line) => truncateToWidth(`${indent}${line}`, width)));
lines.push(
truncateToWidth(`${indent}${keyHint("selectConfirm", "save")} ${keyHint("selectCancel", "cancel")}`, width),
truncateToWidth(
`${indent}${keyHint("tui.select.confirm", "save")} ${keyHint("tui.select.cancel", "cancel")}`,
width,
),
);
return lines;
}
handleInput(keyData: string): void {
const kb = getEditorKeybindings();
if (kb.matches(keyData, "selectConfirm")) {
const kb = getKeybindings();
if (kb.matches(keyData, "tui.select.confirm")) {
const value = this.input.getValue().trim();
this.onSubmit?.(this.entryId, value || undefined);
} else if (kb.matches(keyData, "selectCancel")) {
} else if (kb.matches(keyData, "tui.select.cancel")) {
this.onCancel?.();
} else {
this.input.handleInput(keyData);

12
packages/coding-agent/src/modes/interactive/components/user-message-selector.ts
View File

@@ -1,4 +1,4 @@
import { type Component, Container, getEditorKeybindings, Spacer, Text, truncateToWidth } from "@mariozechner/pi-tui";
import { type Component, Container, getKeybindings, Spacer, Text, truncateToWidth } from "@mariozechner/pi-tui";
import { theme } from "../theme/theme.js";
import { DynamicBorder } from "./dynamic-border.js";
@@ -78,24 +78,24 @@ class UserMessageList implements Component {
}
handleInput(keyData: string): void {
const kb = getEditorKeybindings();
const kb = getKeybindings();
// Up arrow - go to previous (older) message, wrap to bottom when at top
if (kb.matches(keyData, "selectUp")) {
if (kb.matches(keyData, "tui.select.up")) {
this.selectedIndex = this.selectedIndex === 0 ? this.messages.length - 1 : this.selectedIndex - 1;
}
// Down arrow - go to next (newer) message, wrap to top when at bottom
else if (kb.matches(keyData, "selectDown")) {
else if (kb.matches(keyData, "tui.select.down")) {
this.selectedIndex = this.selectedIndex === this.messages.length - 1 ? 0 : this.selectedIndex + 1;
}
// Enter - select message and branch
else if (kb.matches(keyData, "selectConfirm")) {
else if (kb.matches(keyData, "tui.select.confirm")) {
const selected = this.messages[this.selectedIndex];
if (selected && this.onSelect) {
this.onSelect(selected.id);
}
}
// Escape - cancel
else if (kb.matches(keyData, "selectCancel")) {
else if (kb.matches(keyData, "tui.select.cancel")) {
if (this.onCancel) {
this.onCancel();
}

168
packages/coding-agent/src/modes/interactive/interactive-mode.ts
View File

@@ -11,9 +11,9 @@ import type { AgentMessage } from "@mariozechner/pi-agent-core";
import type { AssistantMessage, ImageContent, Message, Model, OAuthProviderId } from "@mariozechner/pi-ai";
import type {
AutocompleteItem,
EditorAction,
EditorComponent,
EditorTheme,
Keybinding,
KeyId,
MarkdownTheme,
OverlayHandle,
@@ -30,6 +30,7 @@ import {
matchesKey,
ProcessTerminal,
Spacer,
setKeybindings,
Text,
TruncatedText,
TUI,
@@ -55,7 +56,7 @@ import type {
ExtensionWidgetOptions,
} from "../../core/extensions/index.js";
import { FooterDataProvider, type ReadonlyFooterDataProvider } from "../../core/footer-data-provider.js";
import { type AppAction, KeybindingsManager } from "../../core/keybindings.js";
import { type AppKeybinding, 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";
@@ -81,7 +82,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";
@@ -154,6 +155,7 @@ export class InteractiveMode {
private editorContainer: Container;
private footer: FooterComponent;
private footerDataProvider: FooterDataProvider;
// Stored so the same manager can be injected into custom editors, selectors, and extension UI.
private keybindings: KeybindingsManager;
private version: string;
private isInitialized = false;
@@ -262,6 +264,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, {
@@ -379,28 +382,27 @@ export class InteractiveMode {
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: AppAction, desc: string) => appKeyHint(kb, action, desc);
const hint = (keybinding: AppKeybinding, description: string) => 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);
@@ -1324,9 +1326,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)`);
}
}
@@ -1472,7 +1472,7 @@ export class InteractiveMode {
this.loadingAnimation.setMessage(message);
} else {
this.loadingAnimation.setMessage(
`${this.defaultWorkingMessage} (${appKey(this.keybindings, "interrupt")} to interrupt)`,
`${this.defaultWorkingMessage} (${keyText("app.interrupt")} to interrupt)`,
);
}
} else {
@@ -1894,25 +1894,25 @@ 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: string) => {
const wasBashMode = this.isBashMode;
@@ -2331,7 +2331,7 @@ export class InteractiveMode {
this.ui,
(spinner) => theme.fg("accent", spinner),
(text) => theme.fg("muted", text),
`${reasonText}Auto-compacting... (${appKey(this.keybindings, "interrupt")} to cancel)`,
`${reasonText}Auto-compacting... (${keyText("app.interrupt")} to cancel)`,
);
this.statusContainer.addChild(this.autoCompactionLoader);
this.ui.requestRender();
@@ -2388,7 +2388,7 @@ export class InteractiveMode {
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)`,
`Retrying (${event.attempt}/${event.maxAttempts}) in ${delaySeconds}s... (${keyText("app.interrupt")} to cancel)`,
);
this.statusContainer.addChild(this.retryLoader);
this.ui.requestRender();
@@ -2988,7 +2988,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));
}
@@ -3580,7 +3580,7 @@ export class InteractiveMode {
this.ui,
(spinner) => theme.fg("accent", spinner),
(text) => theme.fg("muted", text),
`Summarizing branch... (${appKey(this.keybindings, "interrupt")} to cancel)`,
`Summarizing branch... (${keyText("app.interrupt")} to cancel)`,
);
this.statusContainer.addChild(summaryLoader);
this.ui.requestRender();
@@ -4178,59 +4178,59 @@ export class InteractiveMode {
/**
* Get capitalized display string for an app keybinding action.
*/
private getAppKeyDisplay(action: AppAction): string {
return this.capitalizeKey(appKey(this.keybindings, action));
private getAppKeyDisplay(action: AppKeybinding): string {
return this.capitalizeKey(keyText(action));
}
/**
* Get capitalized display string for an editor keybinding action.
*/
private getEditorKeyDisplay(action: EditorAction): string {
return this.capitalizeKey(editorKey(action));
private getEditorKeyDisplay(action: Keybinding): string {
return this.capitalizeKey(keyText(action));
}
private handleHotkeysCommand(): void {
// Navigation keybindings
const cursorUp = this.getEditorKeyDisplay("cursorUp");
const cursorDown = this.getEditorKeyDisplay("cursorDown");
const cursorLeft = this.getEditorKeyDisplay("cursorLeft");
const cursorRight = this.getEditorKeyDisplay("cursorRight");
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 cycleModelBackward = this.getAppKeyDisplay("cycleModelBackward");
const followUp = this.getAppKeyDisplay("followUp");
const dequeue = this.getAppKeyDisplay("dequeue");
const pasteImage = this.getAppKeyDisplay("pasteImage");
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**
@@ -4499,7 +4499,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,