Merge pull request #91 from SakuraByteCore/feat/config-template-confirm-toggle

feat(ui): add toggle for config template diff confirmation

Author: ymkiux

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

@@ -135,6 +135,55 @@ test('applyConfigTemplate keeps the successful apply result when only the refres
     }]);
 });
 
+test('applyConfigTemplate applies immediately when diff confirm is disabled', async () => {
+    let previewCalls = 0;
+    let applyCalls = 0;
+    const methods = createCodexConfigMethods({
+        api: async (action) => {
+            if (action === 'preview-config-template-diff') {
+                previewCalls += 1;
+                return {
+                    diff: {
+                        lines: [{ type: 'add', value: 'model = "qwen-plus"' }],
+                        stats: { added: 1, removed: 0, unchanged: 0 },
+                        hasChanges: true
+                    }
+                };
+            }
+            if (action === 'apply-config-template') {
+                applyCalls += 1;
+                return { success: true };
+            }
+            return { success: true };
+        },
+        getProviderConfigModeMeta() {
+            return null;
+        }
+    });
+    const context = {
+        ...methods,
+        showConfigTemplateModal: true,
+        configTemplateApplying: false,
+        configTemplateContent: 'draft-template',
+        configTemplateDiffConfirmEnabled: false,
+        shownMessages: [],
+        showMessage(message, type) {
+            this.shownMessages.push({ message, type });
+        },
+        async loadAll() {}
+    };
+
+    await methods.applyConfigTemplate.call(context);
+
+    assert.strictEqual(previewCalls, 0);
+    assert.strictEqual(applyCalls, 1);
+    assert.strictEqual(context.showConfigTemplateModal, false);
+    assert.deepStrictEqual(context.shownMessages, [{
+        message: '模板已应用',
+        type: 'success'
+    }]);
+});
+
 test('runHealthCheck treats backend error payloads as failures', async () => {
     const methods = createCodexConfigMethods({
         api: async () => ({ error: 'health failed' }),

tests/unit/config-tabs-ui.test.mjs

@@ -60,6 +60,8 @@ test('config template keeps expected config tabs in top and side navigation', ()
     assert.match(html, /settingsTab === 'backup'/);
     assert.match(html, /settingsTab === 'trash'/);
     assert.match(html, /settingsTab === 'device'/);
+    assert.match(html, /setConfigTemplateDiffConfirmEnabled/);
+    assert.match(html, /configTemplateDiffConfirmEnabled/);
     assert.match(html, /sessionTrashCount/);
     assert.match(html, /v-if="taskOrchestrationTabEnabled" class="top-tab"[\s\S]*id="tab-orchestration"/);
     assert.match(html, /v-if="taskOrchestrationTabEnabled" class="side-section" role="navigation" aria-label="任务编排"/);

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

@@ -369,7 +369,8 @@ test('captured bundled app skeleton only exposes expected data key drift versus
         'configTemplateDiffStats',
         'configTemplateDiffHasChangesValue',
         'configTemplateDiffFingerprint',
-        '_configTemplateDiffPreviewRequestToken'
+        '_configTemplateDiffPreviewRequestToken',
+        'configTemplateDiffConfirmEnabled'
     );
     if (parityAgainstHead) {
         const allowedExtraKeySet = new Set(allowedExtraCurrentKeys);
@@ -447,7 +448,9 @@ test('captured bundled app skeleton only exposes expected data key drift versus
         'onConfigTemplateContentInput',
         'buildConfigTemplateDiffFingerprint',
         'prepareConfigTemplateDiff',
-        'hasConfigTemplateDiffChanges'
+        'hasConfigTemplateDiffChanges',
+        'normalizeConfigTemplateDiffConfirmEnabled',
+        'setConfigTemplateDiffConfirmEnabled'
     );
     const allowedMissingCurrentMethodKeys = [
         'closeInstallModal',

web-ui/app.js

@@ -6,6 +6,7 @@ import {
 } from './modules/app.constants.mjs';
 import { createAppComputed } from './modules/app.computed.index.mjs';
 import { createAppMethods } from './modules/app.methods.index.mjs';
+import { loadConfigTemplateDiffConfirmEnabledFromStorage } from './modules/config-template-confirm-pref.mjs';
 
 document.addEventListener('DOMContentLoaded', () => {
     if (typeof Vue === 'undefined') {
@@ -86,10 +87,12 @@ document.addEventListener('DOMContentLoaded', () => {
                 configTemplateDiffHasChangesValue: false,
                 configTemplateDiffFingerprint: '',
                 _configTemplateDiffPreviewRequestToken: null,
+                configTemplateDiffConfirmEnabled: true,
                 codexApplying: false,
                 _pendingCodexApplyOptions: null,
                 agentsContent: '',
                 agentsPath: '',
+                agentsPath: '',
                 agentsExists: false,
                 agentsLineEnding: '\n',
                 agentsLoading: false,
@@ -413,6 +416,7 @@ document.addEventListener('DOMContentLoaded', () => {
             this.restoreSessionPinnedMap();
             this.shareCommandPrefix = this.normalizeShareCommandPrefix(localStorage.getItem('codexmateShareCommandPrefix'));
             this.sessionTrashEnabled = this.normalizeSessionTrashEnabled(localStorage.getItem('codexmateSessionTrashEnabled'));
+            this.configTemplateDiffConfirmEnabled = loadConfigTemplateDiffConfirmEnabledFromStorage(localStorage);
             window.addEventListener('resize', this.onWindowResize);
             window.addEventListener('keydown', this.handleGlobalKeydown);
             window.addEventListener('beforeunload', this.handleBeforeUnload);

web-ui/modules/app.methods.codex-config.mjs

@@ -1,4 +1,5 @@
 import { runLatestOnlyQueue } from '../logic.mjs';
+import { normalizeConfigTemplateDiffConfirmEnabled } from './config-template-confirm-pref.mjs';
 
 function hasResponseError(response) {
     if (!response || typeof response !== 'object') {
@@ -736,6 +737,40 @@ export function createCodexConfigMethods(options = {}) {
                 return;
             }
 
+            // Default to two-step confirmation when the setting is unset.
+            // (The normalize helper lives in session-actions; keep a safe fallback here.)
+            const shouldUseTwoStepConfirm = normalizeConfigTemplateDiffConfirmEnabled(this.configTemplateDiffConfirmEnabled);
+
+            const performApply = async () => {
+                this.configTemplateApplying = true;
+                try {
+                    const res = await api('apply-config-template', {
+                        template: this.configTemplateContent
+                    });
+                    if (res.error) {
+                        this.showMessage(res.error, 'error');
+                        return;
+                    }
+                    this.showMessage('模板已应用', 'success');
+                    this.closeConfigTemplateModal({ force: true });
+                    try {
+                        await this.loadAll();
+                    } catch (_) {
+                        this.showMessage('模板已应用，但界面刷新失败，请手动刷新', 'error');
+                    }
+                } catch (e) {
+                    this.showMessage('应用模板失败', 'error');
+                } finally {
+                    this.configTemplateApplying = false;
+                }
+            };
+
+            // One-step mode: apply immediately unless user explicitly entered the diff preview state.
+            if (!shouldUseTwoStepConfirm && !this.configTemplateDiffVisible) {
+                await performApply();
+                return;
+            }
+
             if (!this.configTemplateDiffVisible) {
                 await this.prepareConfigTemplateDiff();
                 return;
@@ -757,27 +792,7 @@ export function createCodexConfigMethods(options = {}) {
                 return;
             }
 
-            this.configTemplateApplying = true;
-            try {
-                const res = await api('apply-config-template', {
-                    template: this.configTemplateContent
-                });
-                if (res.error) {
-                    this.showMessage(res.error, 'error');
-                    return;
-                }
-                this.showMessage('模板已应用', 'success');
-                this.closeConfigTemplateModal({ force: true });
-                try {
-                    await this.loadAll();
-                } catch (_) {
-                    this.showMessage('模板已应用，但界面刷新失败，请手动刷新', 'error');
-                }
-            } catch (e) {
-                this.showMessage('应用模板失败', 'error');
-            } finally {
-                this.configTemplateApplying = false;
-            }
+            await performApply();
         }
     };
 }

web-ui/modules/app.methods.session-actions.mjs

@@ -1,3 +1,8 @@
+import {
+    normalizeConfigTemplateDiffConfirmEnabled,
+    persistConfigTemplateDiffConfirmEnabledToStorage
+} from './config-template-confirm-pref.mjs';
+
 export function createSessionActionMethods(options = {}) {
     const {
         api,
@@ -170,6 +175,10 @@ export function createSessionActionMethods(options = {}) {
             return true;
         },
 
+        normalizeConfigTemplateDiffConfirmEnabled(value) {
+            return normalizeConfigTemplateDiffConfirmEnabled(value);
+        },
+
         setSessionTrashEnabled(value) {
             const enabled = this.normalizeSessionTrashEnabled(value);
             this.sessionTrashEnabled = enabled;
@@ -178,6 +187,12 @@ export function createSessionActionMethods(options = {}) {
             } catch (_) {}
         },
 
+        setConfigTemplateDiffConfirmEnabled(value) {
+            const enabled = this.normalizeConfigTemplateDiffConfirmEnabled(value);
+            this.configTemplateDiffConfirmEnabled = enabled;
+            persistConfigTemplateDiffConfirmEnabledToStorage(enabled);
+        },
+
         getShareCommandPrefixInvocation() {
             const prefix = this.normalizeShareCommandPrefix(this.shareCommandPrefix);
             return prefix === 'codexmate' ? 'codexmate' : 'npm start';

web-ui/modules/config-template-confirm-pref.mjs

@@ -0,0 +1,33 @@
+export const CONFIG_TEMPLATE_DIFF_CONFIRM_STORAGE_KEY = 'codexmateConfigTemplateDiffConfirmEnabled';
+
+export function normalizeConfigTemplateDiffConfirmEnabled(value) {
+    if (value === false) return false;
+    const normalized = typeof value === 'string' ? value.trim().toLowerCase() : '';
+    if (normalized === '0' || normalized === 'false' || normalized === 'off' || normalized === 'no') {
+        return false;
+    }
+    return true;
+}
+
+export function loadConfigTemplateDiffConfirmEnabledFromStorage(storage = null) {
+    const target = storage || (typeof localStorage !== 'undefined' ? localStorage : null);
+    if (!target || typeof target.getItem !== 'function') {
+        return true;
+    }
+    try {
+        return normalizeConfigTemplateDiffConfirmEnabled(target.getItem(CONFIG_TEMPLATE_DIFF_CONFIRM_STORAGE_KEY));
+    } catch (_) {
+        return true;
+    }
+}
+
+export function persistConfigTemplateDiffConfirmEnabledToStorage(enabled, storage = null) {
+    const target = storage || (typeof localStorage !== 'undefined' ? localStorage : null);
+    if (!target || typeof target.setItem !== 'function') {
+        return;
+    }
+    try {
+        target.setItem(CONFIG_TEMPLATE_DIFF_CONFIRM_STORAGE_KEY, enabled ? 'true' : 'false');
+    } catch (_) {}
+}
+

web-ui/partials/index/modal-config-template-agents.html

@@ -42,7 +42,12 @@
                         @input="onConfigTemplateContentInput"
                         placeholder="在这里编辑 config.toml 模板内容"></textarea>
                     <div class="template-editor-warning">
-                        工具不会自动改动 `config.toml`。保存需两步：先点“确认”预览差异，再点“应用”写入。
+                        <template v-if="configTemplateDiffConfirmEnabled">
+                            两步确认：先预览差异，再应用写入。
+                        </template>
+                        <template v-else>
+                            一步应用：点击“应用”直接写入。
+                        </template>
                         <div v-if="configTemplateDiffVisible && (configTemplateDiffLoading || configTemplateApplying)" class="agents-diff-hint">正在生成差异或应用中，操作暂不可用。</div>
                         <div v-else-if="configTemplateDiffVisible && configTemplateDiffError" class="agents-diff-hint">差异预览失败，请返回编辑后重试。</div>
                         <div v-else-if="configTemplateDiffVisible && !configTemplateDiffHasChanges" class="agents-diff-hint">未检测到改动，可返回编辑继续修改或取消退出。</div>
@@ -60,7 +65,10 @@
                         返回编辑
                     </button>
                     <button class="btn btn-confirm" @click="applyConfigTemplate" :disabled="configTemplateApplying || configTemplateDiffLoading || (configTemplateDiffVisible && !configTemplateDiffHasChanges)">
-                        {{ configTemplateApplying ? (configTemplateDiffVisible ? '应用中...' : '确认中...') : (configTemplateDiffVisible ? '应用' : '确认') }}
+                        {{ configTemplateApplying
+                            ? (configTemplateDiffVisible || !configTemplateDiffConfirmEnabled ? '应用中...' : '确认中...')
+                            : (configTemplateDiffVisible || !configTemplateDiffConfirmEnabled ? '应用' : '确认')
+                        }}
                     </button>
                 </div>
             </div>

web-ui/partials/index/panel-settings.html

@@ -177,6 +177,21 @@
                         id="settings-panel-device"
                         role="tabpanel"
                         aria-labelledby="settings-tab-device">
+                        <div class="selector-section">
+                            <div class="selector-header">
+                                <span class="selector-title">配置模板二次确认</span>
+                            </div>
+                            <label class="health-remote-toggle">
+                                <input
+                                    type="checkbox"
+                                    :checked="configTemplateDiffConfirmEnabled"
+                                    @change="setConfigTemplateDiffConfirmEnabled($event.target.checked)">
+                                <span>应用模板前先预览差异（两步：确认 → 应用）</span>
+                            </label>
+                            <div class="config-template-hint">
+                                开启后：先展示差异预览，再确认写入。
+                            </div>
+                        </div>
                         <div class="selector-section">
                             <div class="selector-header">
                                 <span class="selector-title">配置重置</span>