feat(web-ui): polish provider cards and session UX

tests/unit/agents-modal-guards.test.mjs

@@ -11,6 +11,9 @@ const { createAgentsMethods } = await import(
 const { createCodexConfigMethods } = await import(
     pathToFileURL(path.join(__dirname, '..', '..', 'web-ui', 'modules', 'app.methods.codex-config.mjs'))
 );
+const { createI18nMethods } = await import(
+    pathToFileURL(path.join(__dirname, '..', '..', 'web-ui', 'modules', 'i18n.mjs'))
+);
 
 test('closeConfigTemplateModal ignores user close attempts while template apply is busy', () => {
     const methods = createCodexConfigMethods({
@@ -20,7 +23,9 @@ test('closeConfigTemplateModal ignores user close attempts while template apply
         }
     });
     const context = {
+        ...createI18nMethods(),
         ...methods,
+        lang: 'zh',
         showConfigTemplateModal: true,
         configTemplateApplying: true,
         configTemplateContent: 'draft-template'
@@ -52,7 +57,9 @@ test('applyConfigTemplate force closes the modal after a successful apply', asyn
         }
     });
     const context = {
+        ...createI18nMethods(),
         ...methods,
+        lang: 'zh',
         showConfigTemplateModal: true,
         configTemplateApplying: false,
         configTemplateContent: 'draft-template',
@@ -103,7 +110,9 @@ test('applyConfigTemplate keeps the successful apply result when only the refres
         }
     });
     const context = {
+        ...createI18nMethods(),
         ...methods,
+        lang: 'zh',
         showConfigTemplateModal: true,
         configTemplateApplying: false,
         configTemplateContent: 'draft-template',
@@ -161,7 +170,9 @@ test('applyConfigTemplate applies immediately when diff confirm is disabled', as
         }
     });
     const context = {
+        ...createI18nMethods(),
         ...methods,
+        lang: 'zh',
         showConfigTemplateModal: true,
         configTemplateApplying: false,
         configTemplateContent: 'draft-template',
@@ -192,7 +203,9 @@ test('runHealthCheck treats backend error payloads as failures', async () => {
         }
     });
     const context = {
+        ...createI18nMethods(),
         ...methods,
+        lang: 'zh',
         providersList: ['alpha'],
         speedResults: {},
         speedLoading: {},
@@ -227,7 +240,9 @@ test('runHealthCheck skips Claude speed tests when the primary health check alre
     });
     let claudeSpeedTestCalls = 0;
     const context = {
+        ...createI18nMethods(),
         ...methods,
+        lang: 'zh',
         providersList: ['alpha'],
         speedResults: {},
         speedLoading: {},
@@ -276,7 +291,9 @@ test('runHealthCheck preserves backend remote health result while appending spee
         }
     });
     const context = {
+        ...createI18nMethods(),
         ...methods,
+        lang: 'zh',
         providersList: ['alpha', 'beta'],
         speedResults: {},
         speedLoading: {},
@@ -324,7 +341,9 @@ test('applyCodexConfigDirect keeps the successful apply result when only the ref
         }
     });
     const context = {
+        ...createI18nMethods(),
         ...methods,
+        lang: 'zh',
         codexApplying: false,
         _pendingCodexApplyOptions: null,
         currentProvider: 'alpha',

tests/unit/claude-settings-sync.test.mjs

@@ -1,6 +1,15 @@
 import assert from 'assert';
+import path from 'path';
+import { fileURLToPath, pathToFileURL } from 'url';
 import { readBundledWebUiScript, readProjectFile } from './helpers/web-ui-source.mjs';
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const { createI18nMethods } = await import(
+    pathToFileURL(path.join(__dirname, '..', '..', 'web-ui', 'modules', 'i18n.mjs'))
+);
+
 const appSource = readBundledWebUiScript();
 const claudeConfigModuleSource = readProjectFile('web-ui/modules/app.methods.claude-config.mjs');
 
@@ -224,7 +233,10 @@ test('addClaudeConfig requires a visible model value before saving', () => {
     const addClaudeConfig = instantiateFunction(source, 'addClaudeConfig');
     const messages = [];
     let saveCount = 0;
+    const i18nMethods = createI18nMethods();
     const context = {
+        ...i18nMethods,
+        lang: 'zh',
         newClaudeConfig: {
             name: 'Claude Test',
             apiKey: 'sk-test',
@@ -256,7 +268,10 @@ ${extractMethodAsFunction(appSource, 'claudeConfigFieldError')}`;
 ${extractMethodAsFunction(appSource, 'canSubmitClaudeConfig')}`;
     const claudeConfigFieldError = instantiateFunction(fieldErrorSource, 'claudeConfigFieldError');
     const canSubmitClaudeConfig = instantiateFunction(canSubmitSource, 'canSubmitClaudeConfig');
+    const i18nMethods = createI18nMethods();
     const context = {
+        ...i18nMethods,
+        lang: 'zh',
         newClaudeConfig: {
             name: 'Existing',
             apiKey: '',
@@ -297,7 +312,10 @@ ${extractMethodAsFunction(appSource, 'claudeConfigFieldError')}`;
 ${extractMethodAsFunction(appSource, 'canSubmitClaudeConfig')}`;
     const claudeConfigFieldError = instantiateFunction(fieldErrorSource, 'claudeConfigFieldError');
     const canSubmitClaudeConfig = instantiateFunction(canSubmitSource, 'canSubmitClaudeConfig');
+    const i18nMethods = createI18nMethods();
     const context = {
+        ...i18nMethods,
+        lang: 'zh',
         newClaudeConfig: { name: '', apiKey: '', baseUrl: '', model: '' },
         editingConfig: {
             name: 'Imported Auth Token',
@@ -350,7 +368,10 @@ test('addClaudeConfig trims and persists the entered model', () => {
     let saveCount = 0;
     let closed = false;
     let refreshed = false;
+    const i18nMethods = createI18nMethods();
     const context = {
+        ...i18nMethods,
+        lang: 'zh',
         newClaudeConfig: {
             name: 'Claude Test',
             apiKey: 'sk-test',
@@ -548,7 +569,10 @@ test('saveAndApplyConfig writes the edited Claude model through apply api', asyn
     let saveCount = 0;
     let closed = false;
     let refreshCount = 0;
+    const i18nMethods = createI18nMethods();
     const context = {
+        ...i18nMethods,
+        lang: 'zh',
         editingConfig: {
             name: 'UI Claude Use',
             apiKey: 'sk-test',
@@ -607,7 +631,10 @@ test('saveAndApplyConfig saves external credential config without api key', asyn
     let saveCount = 0;
     let closed = false;
     let refreshCount = 0;
+    const i18nMethods = createI18nMethods();
     const context = {
+        ...i18nMethods,
+        lang: 'zh',
         editingConfig: {
             name: 'Imported Auth Token',
             apiKey: '',
@@ -654,7 +681,10 @@ test('applyClaudeConfig reports informative message for external credential only
 
     const messages = [];
     let refreshCount = 0;
+    const i18nMethods = createI18nMethods();
     const context = {
+        ...i18nMethods,
+        lang: 'zh',
         claudeConfigs: {
             imported: {
                 apiKey: '',
@@ -689,7 +719,10 @@ test('onClaudeModelChange applies external credential config without api key', (
     let updateCount = 0;
     const applyCalls = [];
     const messages = [];
+    const i18nMethods = createI18nMethods();
     const context = {
+        ...i18nMethods,
+        lang: 'zh',
         currentClaudeConfig: 'imported',
         currentClaudeModel: ' claude-opus-4-6 ',
         claudeConfigs: {
@@ -735,7 +768,10 @@ test('onClaudeModelChange still requires api key when no external credential is
     let updateCount = 0;
     const applyCalls = [];
     const messages = [];
+    const i18nMethods = createI18nMethods();
     const context = {
+        ...i18nMethods,
+        lang: 'zh',
         currentClaudeConfig: 'local',
         currentClaudeModel: ' claude-opus-4-6 ',
         claudeConfigs: {

tests/unit/openclaw-persist-regression.test.mjs

@@ -8,6 +8,9 @@ const __dirname = path.dirname(__filename);
 const { createOpenclawPersistMethods, DEFAULT_OPENCLAW_CONFIG_NAME } = await import(
     pathToFileURL(path.join(__dirname, '..', '..', 'web-ui', 'modules', 'app.methods.openclaw-persist.mjs'))
 );
+const { createI18nMethods } = await import(
+    pathToFileURL(path.join(__dirname, '..', '..', 'web-ui', 'modules', 'i18n.mjs'))
+);
 
 function deferred() {
     let resolve;
@@ -21,7 +24,9 @@ function deferred() {
 
 function createContext(methods, overrides = {}) {
     return {
+        ...createI18nMethods(),
         ...methods,
+        lang: 'zh',
         openclawConfigs: {
             saved: {
                 content: 'saved-local'

tests/unit/provider-switch-regression.test.mjs

@@ -1,9 +1,18 @@
 import assert from 'assert';
+import path from 'path';
+import { fileURLToPath, pathToFileURL } from 'url';
 import {
     captureCurrentBundledAppOptions,
     withGlobalOverrides
 } from './helpers/web-ui-app-options.mjs';
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const { createI18nMethods } = await import(
+    pathToFileURL(path.join(__dirname, '..', '..', 'web-ui', 'modules', 'i18n.mjs'))
+);
+
 const currentAppOptions = await captureCurrentBundledAppOptions();
 const currentMethods = currentAppOptions.methods;
 const currentComputed = currentAppOptions.computed;
@@ -13,6 +22,8 @@ function createProviderSwitchContext() {
     const messages = [];
 
     return {
+        ...createI18nMethods(),
+        lang: 'zh',
         currentProvider: 'alpha',
         currentModel: 'alpha-model',
         models: ['alpha-model'],
@@ -58,6 +69,8 @@ function createProviderSwitchContext() {
 function createProviderUpdateContext() {
     const messages = [];
     return {
+        ...createI18nMethods(),
+        lang: 'zh',
         editingProvider: {
             name: 'alpha',
             url: ' https://api.example.com/v1 ',

tests/unit/providers-validation.test.mjs

@@ -1,11 +1,22 @@
 import assert from 'assert';
+import path from 'path';
+import { fileURLToPath, pathToFileURL } from 'url';
 import { createProvidersMethods } from '../../web-ui/modules/app.methods.providers.mjs';
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const { createI18nMethods } = await import(
+    pathToFileURL(path.join(__dirname, '..', '..', 'web-ui', 'modules', 'i18n.mjs'))
+);
+
 function createContext(overrides = {}, apiImpl = async () => ({ success: true })) {
     const messages = [];
     const loadAllCalls = [];
     const methods = createProvidersMethods({ api: apiImpl });
     const context = {
+        ...createI18nMethods(),
+        lang: 'zh',
         providersList: [],
         codexAuthProfiles: [],
         showAddModal: true,

tests/unit/session-trash-state.test.mjs

@@ -1,12 +1,20 @@
 import assert from 'assert';
 import path from 'path';
+import { fileURLToPath, pathToFileURL } from 'url';
 import {
     readBundledWebUiCss,
     readBundledWebUiHtml,
     readBundledWebUiScript,
     readProjectFile
 } from './helpers/web-ui-source.mjs';
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const { createI18nMethods } = await import(
+    pathToFileURL(path.join(__dirname, '..', '..', 'web-ui', 'modules', 'i18n.mjs'))
+);
+
 const appSource = readBundledWebUiScript();
 const cliSource = readProjectFile('cli.js');
 const indexHtmlSource = readBundledWebUiHtml();
@@ -1904,7 +1912,10 @@ test('cloneSession keeps success message when refresh fails after clone succeeds
     });
 
     const messages = [];
+    const i18nMethods = createI18nMethods();
     const context = {
+        ...i18nMethods,
+        lang: 'zh',
         sessionCloning: {},
         sessionsList: [],
         isCloneAvailable: () => true,
@@ -1941,7 +1952,10 @@ test('cloneSession keeps success message when selecting the cloned session fails
     });
 
     const messages = [];
+    const i18nMethods = createI18nMethods();
     const context = {
+        ...i18nMethods,
+        lang: 'zh',
         sessionCloning: {},
         sessionsList: [],
         isCloneAvailable: () => true,

tests/unit/web-ui-behavior-parity.test.mjs

@@ -1,10 +1,19 @@
 import assert from 'assert';
+import path from 'path';
+import { fileURLToPath, pathToFileURL } from 'url';
 import {
     captureBehaviorParityBaselineAppOptions,
     captureCurrentBundledAppOptions,
     withGlobalOverrides
 } from './helpers/web-ui-app-options.mjs';
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const { createI18nMethods } = await import(
+    pathToFileURL(path.join(__dirname, '..', '..', 'web-ui', 'modules', 'i18n.mjs'))
+);
+
 const currentAppOptions = await captureCurrentBundledAppOptions();
 const parityBaseline = await captureBehaviorParityBaselineAppOptions();
 const headAppOptions = parityBaseline.options;
@@ -289,6 +298,8 @@ function createDownloadEnvironment() {
 function createCopyActionContext(methods) {
     const messages = createMessagesRecorder();
     return {
+        ...createI18nMethods(),
+        lang: 'zh',
         ...messages,
         sessionResumeWithYolo: true,
         shareCommandPrefix: 'npm start',

web-ui/app.js

@@ -366,7 +366,21 @@ document.addEventListener('DOMContentLoaded', () => {
                 codexDownloadProgress: 0,
                 codexDownloadTimer: null,
                 settingsTab: 'general',
-                toolConfigPermissions: { codex: false, claude: false },
+                toolConfigPermissions: (function() {
+                    try {
+                        const cached = localStorage.getItem('toolConfigPermissions');
+                        if (cached) {
+                            const parsed = JSON.parse(cached);
+                            if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+                                return {
+                                    codex: parsed.codex === true,
+                                    claude: parsed.claude === true
+                                };
+                            }
+                        }
+                    } catch (_) {}
+                    return { codex: false, claude: false };
+                })(),
                 toolConfigPermissionSaving: { codex: false, claude: false },
                 sessionTrashEnabled: true,
                 sessionTrashItems: [],