@ai-agent-forge/agent-forge 0.86.7 → 0.88.0

package/dist/modes/interactive/components/settings-selector.js

@@ -1,11 +1,13 @@
 import { getSupportedThinkingLevels } from "@agent-forge/ai";
 import { Container, getCapabilities, SettingsList, Spacer, Text, } from "@agent-forge/tui";
 import { formatHttpIdleTimeoutMs, HTTP_IDLE_TIMEOUT_CHOICES } from "../../../core/http-dispatcher.js";
+import { t } from "../../../core/i18n/index.js";
 import { getSettingsListTheme, parseAutoThemeSetting, theme } from "../theme/theme.js";
 import { DynamicBorder } from "./dynamic-border.js";
 import { keyDisplayText } from "./keybinding-hints.js";
 import { SelectSubmenu, SteppedSubmenu } from "./settings-submenu.js";
 const MODEL_PICKER_LAYOUT = { minPrimaryColumnWidth: 12, maxPrimaryColumnWidth: 46 };
+// i18n: 以函数查询而非模块级常量，保证语言切换后取到当前词典
 const THINKING_DESCRIPTIONS = {
     off: "No reasoning",
     minimal: "Very brief reasoning (~1k tokens)",
@@ -15,6 +17,9 @@ const THINKING_DESCRIPTIONS = {
     xhigh: "Extra-high reasoning (~32k tokens)",
     max: "Maximum reasoning",
 };
+function thinkingDescription(level) {
+    return t(THINKING_DESCRIPTIONS[level]);
+}
 /**
  * A submenu component for selecting from a list of options.
  */
@@ -27,8 +32,8 @@ class WarningSettingsSubmenu extends Container {
         const items = [
             {
                 id: "anthropic-extra-usage",
-                label: "Anthropic extra usage",
-                description: "Warn when Anthropic subscription auth may use paid extra usage",
+                label: t("Anthropic extra usage"),
+                description: t("Warn when Anthropic subscription auth may use paid extra usage"),
                 currentValue: (this.state.anthropicExtraUsage ?? true) ? "true" : "false",
                 values: ["true", "false"],
             },
@@ -57,8 +62,8 @@ function modelDisplayLabel(model) {
 function modelThinkingOverridesSummary(overrides) {
     const count = Object.keys(overrides).length;
     if (count === 0)
-        return "none";
-    return `${count} configured`;
+        return t("none");
+    return t("{count} configured", { count });
 }
 function modelItemLabel(model) {
     return `${model.id} ${theme.fg("muted", `[${model.provider}]`)}`;
@@ -71,8 +76,8 @@ function singleModeThemeItems(availableThemes) {
     return [
         {
             value: AUTOMATIC_THEME_VALUE,
-            label: "Automatic",
-            description: "Use separate themes for light and dark terminal appearance",
+            label: t("Automatic"),
+            description: t("Use separate themes for light and dark terminal appearance"),
         },
         ...themeItems(availableThemes),
     ];
@@ -134,7 +139,7 @@ class ThemeSubmenu extends Container {
     }
     showSingleMenu() {
         this.mode = "single";
-        const menu = new SelectSubmenu("Theme", "Select a theme, or choose Automatic to follow terminal appearance.", singleModeThemeItems(this.availableThemes), this.singleTheme, (value) => {
+        const menu = new SelectSubmenu(t("Theme"), t("Select a theme, or choose Automatic to follow terminal appearance."), singleModeThemeItems(this.availableThemes), this.singleTheme, (value) => {
             if (value === AUTOMATIC_THEME_VALUE) {
                 this.mode = "automatic";
                 this.callbacks.onThemePreview?.(this.getThemeSetting());
@@ -151,18 +156,18 @@ class ThemeSubmenu extends Container {
     showAutomaticMenu() {
         this.mode = "automatic";
         const content = new Container();
-        content.addChild(new Text(theme.bold(theme.fg("accent", "Automatic Theme")), 0, 0));
+        content.addChild(new Text(theme.bold(theme.fg("accent", t("Automatic Theme"))), 0, 0));
         content.addChild(new Spacer(1));
-        content.addChild(new Text(theme.fg("muted", "Choose themes for terminal light and dark appearance."), 0, 0));
-        content.addChild(new Text(theme.fg("muted", "Light/dark detection requires terminal support."), 0, 0));
+        content.addChild(new Text(theme.fg("muted", t("Choose themes for terminal light and dark appearance.")), 0, 0));
+        content.addChild(new Text(theme.fg("muted", t("Light/dark detection requires terminal support.")), 0, 0));
         content.addChild(new Spacer(1));
         const items = [
             {
                 id: "light-theme",
-                label: "Light theme",
-                description: "Theme to use in automatic mode when the terminal is light",
+                label: t("Light theme"),
+                description: t("Theme to use in automatic mode when the terminal is light"),
                 currentValue: this.lightTheme,
-                submenu: (currentValue, done) => this.createThemeSelect("Light Theme", "Select the theme to use for light terminal appearance", currentValue, done, (value) => {
+                submenu: (currentValue, done) => this.createThemeSelect(t("Light Theme"), t("Select the theme to use for light terminal appearance"), currentValue, done, (value) => {
                     this.lightTheme = value;
                     this.callbacks.onThemePreview?.(this.getThemeSetting());
                     done(value);
@@ -170,10 +175,10 @@ class ThemeSubmenu extends Container {
             },
             {
                 id: "dark-theme",
-                label: "Dark theme",
-                description: "Theme to use in automatic mode when the terminal is dark",
+                label: t("Dark theme"),
+                description: t("Theme to use in automatic mode when the terminal is dark"),
                 currentValue: this.darkTheme,
-                submenu: (currentValue, done) => this.createThemeSelect("Dark Theme", "Select the theme to use for dark terminal appearance", currentValue, done, (value) => {
+                submenu: (currentValue, done) => this.createThemeSelect(t("Dark Theme"), t("Select the theme to use for dark terminal appearance"), currentValue, done, (value) => {
                     this.darkTheme = value;
                     this.callbacks.onThemePreview?.(this.getThemeSetting());
                     done(value);
@@ -181,17 +186,17 @@ class ThemeSubmenu extends Container {
             },
             {
                 id: "apply",
-                label: "Apply",
-                description: "Save and go back",
-                currentValue: "save and go back",
-                values: ["save and go back"],
+                label: t("Apply"),
+                description: t("Save and go back"),
+                currentValue: t("save and go back"),
+                values: [t("save and go back")],
             },
             {
                 id: "single-mode",
-                label: "Change mode",
-                description: "Switch to one theme for light and dark",
-                currentValue: "switch to single theme",
-                values: ["switch to single theme"],
+                label: t("Change mode"),
+                description: t("Switch to one theme for light and dark"),
+                currentValue: t("switch to single theme"),
+                values: [t("switch to single theme")],
             },
         ];
         const settingsList = new SettingsList(items, Math.min(items.length, 10), getSettingsListTheme(), (id) => {
@@ -249,95 +254,95 @@ export class SettingsSelectorComponent extends Container {
         const currentDefaultModelKey = defaultModelByValue.has(config.defaultModel) ? config.defaultModel : undefined;
         const currentModelKey = config.currentModel ? modelSettingKey(config.currentModel) : undefined;
         const items = [
-            {
-                id: "autocompact",
-                label: "Auto-compact",
-                description: "Automatically compact context when it gets too large",
-                currentValue: config.autoCompact ? "true" : "false",
-                values: ["true", "false"],
-            },
             {
                 id: "steering-mode",
-                label: "Steering mode",
-                description: "Enter while streaming queues steering messages. 'one-at-a-time': deliver one, wait for response. 'all': deliver all at once.",
+                label: t("Steering mode"),
+                description: t("Enter while streaming queues steering messages. 'one-at-a-time': deliver one, wait for response. 'all': deliver all at once."),
                 currentValue: config.steeringMode,
                 values: ["one-at-a-time", "all"],
             },
             {
                 id: "follow-up-mode",
-                label: "Follow-up mode",
-                description: `${followUpKey} queues follow-up messages until agent stops. 'one-at-a-time': deliver one, wait for response. 'all': deliver all at once.`,
+                label: t("Follow-up mode"),
+                description: t("{key} queues follow-up messages until agent stops. 'one-at-a-time': deliver one, wait for response. 'all': deliver all at once.", { key: followUpKey }),
                 currentValue: config.followUpMode,
                 values: ["one-at-a-time", "all"],
             },
             {
                 id: "transport",
-                label: "Transport",
-                description: "Preferred transport for providers that support multiple transports",
+                label: t("Transport"),
+                description: t("Preferred transport for providers that support multiple transports"),
                 currentValue: config.transport,
                 values: ["sse", "websocket", "websocket-cached", "auto"],
             },
             {
                 id: "http-idle-timeout",
-                label: "HTTP idle timeout",
-                description: "Maximum idle gap while waiting for HTTP headers or body chunks. Disable for local models that pause longer than five minutes.",
+                label: t("HTTP idle timeout"),
+                description: t("Maximum idle gap while waiting for HTTP headers or body chunks. Disable for local models that pause longer than five minutes."),
                 currentValue: formatHttpIdleTimeoutMs(config.httpIdleTimeoutMs),
                 values: HTTP_IDLE_TIMEOUT_CHOICES.map((choice) => choice.label),
             },
             {
                 id: "hide-thinking",
-                label: "Hide thinking",
-                description: "Hide thinking blocks in assistant responses",
+                label: t("Hide thinking"),
+                description: t("Hide thinking blocks in assistant responses"),
                 currentValue: config.hideThinkingBlock ? "true" : "false",
                 values: ["true", "false"],
             },
             {
                 id: "mermaid-rendering",
-                label: "Mermaid diagrams",
-                description: "Render Mermaid code blocks as Unicode diagrams",
+                label: t("Mermaid diagrams"),
+                description: t("Render Mermaid code blocks as Unicode diagrams"),
                 currentValue: config.mermaidRenderingMode,
                 values: ["off", "final", "streaming"],
             },
             {
                 id: "cache-miss-notices",
-                label: "Cache miss notices",
-                description: "Show transcript notices for cache costs and provider recovery diagnostics",
+                label: t("Cache miss notices"),
+                description: t("Show transcript notices for cache costs and provider recovery diagnostics"),
                 currentValue: config.showCacheMissNotices ? "true" : "false",
                 values: ["true", "false"],
             },
             {
                 id: "collapse-changelog",
-                label: "Collapse changelog",
-                description: "Show condensed changelog after updates",
+                label: t("Collapse changelog"),
+                description: t("Show condensed changelog after updates"),
                 currentValue: config.collapseChangelog ? "true" : "false",
                 values: ["true", "false"],
             },
             {
                 id: "quiet-startup",
-                label: "Quiet startup",
-                description: "Disable verbose printing at startup",
+                label: t("Quiet startup"),
+                description: t("Disable verbose printing at startup"),
                 currentValue: config.quietStartup ? "true" : "false",
                 values: ["true", "false"],
             },
             {
                 id: "double-escape-action",
-                label: "Double-escape action",
-                description: "Action when pressing Escape twice with empty editor",
+                label: t("Double-escape action"),
+                description: t("Action when pressing Escape twice with empty editor"),
                 currentValue: config.doubleEscapeAction,
-                values: ["tree", "fork", "none"],
+                values: ["tree", "none"],
+            },
+            {
+                id: "language",
+                label: t("Interface language"),
+                description: t("Language for UI text; takes effect immediately"),
+                currentValue: config.uiLanguage,
+                values: ["zh-CN", "en"],
             },
             {
                 id: "tree-filter-mode",
-                label: "Tree filter mode",
-                description: "Default filter when opening /tree",
+                label: t("Tree filter mode"),
+                description: t("Default filter when opening /tree"),
                 currentValue: config.treeFilterMode,
                 values: ["default", "no-tools", "user-only", "labeled-only", "all"],
             },
             {
                 id: "warnings",
-                label: "Warnings",
-                description: "Enable or disable individual warnings",
-                currentValue: "configure",
+                label: t("Warnings"),
+                description: t("Enable or disable individual warnings"),
+                currentValue: t("configure"),
                 submenu: (_currentValue, done) => new WarningSettingsSubmenu(currentWarnings, (warnings) => {
                     currentWarnings = warnings;
                     callbacks.onWarningsChange(warnings);
@@ -345,15 +350,17 @@ export class SettingsSelectorComponent extends Container {
             },
             {
                 id: "model-thinking",
-                label: "Default thinking level per model",
-                description: `Override the default thinking level for specific models. ${cycleThinkingKey} cycles in-session.`,
+                label: t("Default thinking level per model"),
+                description: t("Override the default thinking level for specific models. {key} cycles in-session.", {
+                    key: cycleThinkingKey,
+                }),
                 currentValue: modelThinkingOverridesSummary(currentModelThinkingLevels),
                 submenu: (_currentValue, done) => {
                     const steps = [
                         {
                             key: "model",
-                            title: "Per-Model Thinking Level",
-                            description: "Select a model to configure",
+                            title: t("Per-Model Thinking Level"),
+                            description: t("Select a model to configure"),
                             options: () => {
                                 const sorted = [...config.availableDefaultModels].sort((a, b) => {
                                     const aKey = modelSettingKey(a);
@@ -380,8 +387,8 @@ export class SettingsSelectorComponent extends Container {
                                 if (items.length === 0) {
                                     items.push({
                                         value: "__none__",
-                                        label: "No models available",
-                                        description: "Log in to a provider or configure an API key first",
+                                        label: t("No models available"),
+                                        description: t("Log in to a provider or configure an API key first"),
                                     });
                                 }
                                 return items;
@@ -394,9 +401,9 @@ export class SettingsSelectorComponent extends Container {
                             key: "level",
                             title: (ctx) => {
                                 const m = defaultModelByValue.get(ctx.model);
-                                return `Thinking Level for ${m ? modelDisplayLabel(m) : ctx.model}`;
+                                return t("Thinking Level for {model}", { model: m ? modelDisplayLabel(m) : ctx.model });
                             },
-                            description: "Select default thinking level for this model",
+                            description: t("Select default thinking level for this model"),
                             options: (ctx) => {
                                 const model = defaultModelByValue.get(ctx.model);
                                 if (!model)
@@ -405,13 +412,13 @@ export class SettingsSelectorComponent extends Container {
                                 const items = levels.map((level) => ({
                                     value: level,
                                     label: level,
-                                    description: THINKING_DESCRIPTIONS[level],
+                                    description: thinkingDescription(level),
                                 }));
                                 if (currentModelThinkingLevels[ctx.model] !== undefined) {
                                     items.push({
                                         value: CLEAR_OVERRIDE_VALUE,
-                                        label: "(clear override)",
-                                        description: `Revert to global default (${config.thinkingLevel})`,
+                                        label: t("(clear override)"),
+                                        description: t("Revert to global default ({level})", { level: config.thinkingLevel }),
                                     });
                                 }
                                 return items;
@@ -440,70 +447,70 @@ export class SettingsSelectorComponent extends Container {
             },
             {
                 id: "tui-mode",
-                label: "TUI mode",
-                description: "Interface layout; fullscreen mode is experimental",
+                label: t("TUI mode"),
+                description: t("Interface layout; fullscreen mode is experimental"),
                 currentValue: config.tuiMode,
                 values: ["regular", "fullscreen"],
             },
             {
                 id: "fullscreen-exit-output",
-                label: "Fullscreen exit output",
-                description: "Print the transcript or only a session resume hint when exiting fullscreen mode",
+                label: t("Fullscreen exit output"),
+                description: t("Print the transcript or only a session resume hint when exiting fullscreen mode"),
                 currentValue: config.fullscreenExitOutput,
                 values: ["transcript", "resume-hint"],
             },
             {
                 id: "fullscreen-scrollbar",
-                label: "Fullscreen scrollbar",
-                description: "Scrollbar behavior in fullscreen mode; has no effect in regular mode",
+                label: t("Fullscreen scrollbar"),
+                description: t("Scrollbar behavior in fullscreen mode; has no effect in regular mode"),
                 currentValue: config.fullscreenScrollbar,
                 values: ["auto", "always", "hidden"],
             },
             {
                 id: "fullscreen-copy-on-select",
-                label: "Fullscreen copy on select",
-                description: "Automatically copy selected text in fullscreen mode; disable to copy selections with Ctrl+X",
+                label: t("Fullscreen copy on select"),
+                description: t("Automatically copy selected text in fullscreen mode; disable to copy selections with Ctrl+X"),
                 currentValue: config.fullscreenCopyOnSelect ? "true" : "false",
                 values: ["true", "false"],
             },
             {
                 id: "fullscreen-wheel-scroll-lines",
-                label: "Fullscreen wheel scroll lines",
-                description: "Lines scrolled per wheel event in fullscreen mode; auto accelerates with scroll speed",
+                label: t("Fullscreen wheel scroll lines"),
+                description: t("Lines scrolled per wheel event in fullscreen mode; auto accelerates with scroll speed"),
                 currentValue: String(config.fullscreenWheelScrollLines),
                 values: ["auto", "1", "2", "3", "5", "10"],
             },
             {
                 id: "theme",
-                label: "Theme",
-                description: "Color theme for the interface",
+                label: t("Theme"),
+                description: t("Color theme for the interface"),
                 currentValue: config.currentTheme,
                 submenu: (currentValue, done) => new ThemeSubmenu(currentValue, config.terminalTheme, config.availableThemes, callbacks, done),
             },
         ];
         // Only show image toggle if terminal supports it
         if (supportsImages) {
-            // Insert after autocompact
-            items.splice(1, 0, {
+            // Insert at the top of the list
+            items.splice(0, 0, {
                 id: "show-images",
-                label: "Show images",
-                description: "Render images inline in terminal",
+                label: t("Show images"),
+                description: t("Render images inline in terminal"),
                 currentValue: config.showImages ? "true" : "false",
                 values: ["true", "false"],
             });
-            items.splice(2, 0, {
+            items.splice(1, 0, {
                 id: "image-width-cells",
-                label: "Image width",
-                description: "Preferred inline image width in terminal cells",
+                label: t("Image width"),
+                description: t("Preferred inline image width in terminal cells"),
                 currentValue: String(config.imageWidthCells),
                 values: ["60", "80", "120"],
             });
         }
         // Image auto-resize toggle (always available, affects both attached and read images)
-        items.splice(supportsImages ? 3 : 1, 0, {
+        items.splice(supportsImages ? 2 : 0, 0, {
             id: "auto-resize-images",
-            label: "Auto-resize images",
-            description: "Resize large images to 2000x2000 max for better model compatibility",
+            label: t("Auto-resize images"),
+            description: t("Resize large images to 2000x2000 max for better model compatibility"),
             currentValue: config.autoResizeImages ? "true" : "false",
             values: ["true", "false"],
         });
@@ -511,26 +518,17 @@ export class SettingsSelectorComponent extends Container {
         const autoResizeIndex = items.findIndex((item) => item.id === "auto-resize-images");
         items.splice(autoResizeIndex + 1, 0, {
             id: "block-images",
-            label: "Block images",
-            description: "Prevent images from being sent to LLM providers",
+            label: t("Block images"),
+            description: t("Prevent images from being sent to LLM providers"),
             currentValue: config.blockImages ? "true" : "false",
             values: ["true", "false"],
         });
-        // Skill commands toggle (insert after block-images)
+        // Hardware cursor toggle (insert after block-images)
         const blockImagesIndex = items.findIndex((item) => item.id === "block-images");
         items.splice(blockImagesIndex + 1, 0, {
-            id: "skill-commands",
-            label: "Skill commands",
-            description: "Register skills as /skill:name commands",
-            currentValue: config.enableSkillCommands ? "true" : "false",
-            values: ["true", "false"],
-        });
-        // Hardware cursor toggle (insert after skill-commands)
-        const skillCommandsIndex = items.findIndex((item) => item.id === "skill-commands");
-        items.splice(skillCommandsIndex + 1, 0, {
             id: "show-hardware-cursor",
-            label: "Show hardware cursor",
-            description: "Show the terminal cursor while still positioning it for IME support",
+            label: t("Show hardware cursor"),
+            description: t("Show the terminal cursor while still positioning it for IME support"),
             currentValue: config.showHardwareCursor ? "true" : "false",
             values: ["true", "false"],
         });
@@ -538,8 +536,8 @@ export class SettingsSelectorComponent extends Container {
         const hardwareCursorIndex = items.findIndex((item) => item.id === "show-hardware-cursor");
         items.splice(hardwareCursorIndex + 1, 0, {
             id: "editor-padding",
-            label: "Editor padding",
-            description: "Horizontal padding for input editor (0-3)",
+            label: t("Editor padding"),
+            description: t("Horizontal padding for input editor (0-3)"),
             currentValue: String(config.editorPaddingX),
             values: ["0", "1", "2", "3"],
         });
@@ -547,8 +545,8 @@ export class SettingsSelectorComponent extends Container {
         const editorPaddingIndex = items.findIndex((item) => item.id === "editor-padding");
         items.splice(editorPaddingIndex + 1, 0, {
             id: "output-padding",
-            label: "Output padding",
-            description: "Horizontal padding for user messages, assistant messages, and thinking",
+            label: t("Output padding"),
+            description: t("Horizontal padding for user messages, assistant messages, and thinking"),
             currentValue: String(config.outputPad),
             values: ["0", "1"],
         });
@@ -556,8 +554,8 @@ export class SettingsSelectorComponent extends Container {
         const outputPaddingIndex = items.findIndex((item) => item.id === "output-padding");
         items.splice(outputPaddingIndex + 1, 0, {
             id: "autocomplete-max-visible",
-            label: "Autocomplete max items",
-            description: "Max visible items in autocomplete dropdown (3-20)",
+            label: t("Autocomplete max items"),
+            description: t("Max visible items in autocomplete dropdown (3-20)"),
             currentValue: String(config.autocompleteMaxVisible),
             values: ["3", "5", "7", "10", "15", "20"],
         });
@@ -565,8 +563,8 @@ export class SettingsSelectorComponent extends Container {
         const autocompleteIndex = items.findIndex((item) => item.id === "autocomplete-max-visible");
         items.splice(autocompleteIndex + 1, 0, {
             id: "clear-on-shrink",
-            label: "Clear on shrink",
-            description: "Clear empty rows when content shrinks (may cause flicker)",
+            label: t("Clear on shrink"),
+            description: t("Clear empty rows when content shrinks (may cause flicker)"),
             currentValue: config.clearOnShrink ? "true" : "false",
             values: ["true", "false"],
         });
@@ -574,8 +572,8 @@ export class SettingsSelectorComponent extends Container {
         const clearOnShrinkIndex = items.findIndex((item) => item.id === "clear-on-shrink");
         items.splice(clearOnShrinkIndex + 1, 0, {
             id: "terminal-progress",
-            label: "Terminal progress",
-            description: "Show OSC 9;4 progress indicators in the terminal tab bar",
+            label: t("Terminal progress"),
+            description: t("Show OSC 9;4 progress indicators in the terminal tab bar"),
             currentValue: config.showTerminalProgress ? "true" : "false",
             values: ["true", "false"],
         });
@@ -583,9 +581,6 @@ export class SettingsSelectorComponent extends Container {
         this.addChild(new DynamicBorder());
         this.settingsList = new SettingsList(items, 10, getSettingsListTheme(), (id, newValue) => {
             switch (id) {
-                case "autocompact":
-                    callbacks.onAutoCompactChange(newValue === "true");
-                    break;
                 case "show-images":
                     callbacks.onShowImagesChange(newValue === "true");
                     break;
@@ -598,9 +593,6 @@ export class SettingsSelectorComponent extends Container {
                 case "block-images":
                     callbacks.onBlockImagesChange(newValue === "true");
                     break;
-                case "skill-commands":
-                    callbacks.onEnableSkillCommandsChange(newValue === "true");
-                    break;
                 case "steering-mode":
                     callbacks.onSteeringModeChange(newValue);
                     break;
@@ -636,6 +628,9 @@ export class SettingsSelectorComponent extends Container {
                 case "double-escape-action":
                     callbacks.onDoubleEscapeActionChange(newValue);
                     break;
+                case "language":
+                    callbacks.onUiLanguageChange(newValue);
+                    break;
                 case "tree-filter-mode":
                     callbacks.onTreeFilterModeChange(newValue);
                     break;