@yesdgq/claude-buddy 1.1.3000 → 1.1.3011

package/assets/config.js

@@ -1,9 +1,349 @@
 const { createApp } = Vue;
 
-createApp({
+const ENV_NODE_TYPES = ['String', 'Boolean', 'Number', 'Array', 'Dictionary'];
+const CONFIG_FILE_ITEMS = Object.freeze({
+  Claude: [{ key: 'claude-settings', path: '~/.claude/settings.json' }],
+  Codex: [{ key: 'codex-config', path: '~/.codex/config.toml' }],
+  WorkBuddy: [{ key: 'workbuddy-models', path: '~/.workbuddy/models.json' }]
+});
+const CONFIG_FILE_REFRESH_STORAGE_KEY = 'ccby-config-file-refresh';
+
+function getConfigFileItems(cliName) {
+  return CONFIG_FILE_ITEMS[cliName] || [];
+}
+
+let envNodeSequence = 0;
+
+function createEnvNodeId() {
+  envNodeSequence += 1;
+  return `env-node-${Date.now()}-${envNodeSequence}`;
+}
+
+function inferEnvNodeType(value) {
+  if (Array.isArray(value)) return 'Array';
+  if (value !== null && typeof value === 'object') return 'Dictionary';
+  if (typeof value === 'boolean') return 'Boolean';
+  if (typeof value === 'number') return 'Number';
+  return 'String';
+}
+
+function createEnvNode(type = 'String', key = '') {
+  const normalizedType = ENV_NODE_TYPES.includes(type) ? type : 'String';
+  return {
+    id: createEnvNodeId(),
+    key,
+    type: normalizedType,
+    valueKind: null,
+    value: normalizedType === 'Boolean' ? false : (normalizedType === 'Number' ? 0 : ''),
+    children: [],
+    // Expansion is presentation state only; serialization omits it.
+    expanded: false
+  };
+}
+
+function normalizeEnvNode(node, fallbackKey = '') {
+  const source = node && typeof node === 'object' && !Array.isArray(node)
+    ? node
+    : { value: node };
+  const rawValue = Object.prototype.hasOwnProperty.call(source, 'value') ? source.value : '';
+  const inferredType = inferEnvNodeType(rawValue);
+  const normalizedType = ENV_NODE_TYPES.includes(source.type) ? source.type : inferredType;
+  const normalized = createEnvNode(normalizedType, typeof source.key === 'string' ? source.key : fallbackKey);
+  normalized.valueKind = source.valueKind || (
+    rawValue === null ? 'null' : (typeof rawValue === 'number' ? 'number' : null)
+  );
+  // Loaded nodes start collapsed unless an explicit in-memory expanded state is provided.
+  normalized.expanded = source.expanded === true;
+
+  if (normalizedType === 'String') {
+    normalized.value = rawValue === undefined || rawValue === null ? '' : String(rawValue);
+    return normalized;
+  }
+
+  if (normalizedType === 'Boolean') {
+    normalized.value = rawValue === true || rawValue === 'true' || rawValue === 'YES' || rawValue === 'yes';
+    return normalized;
+  }
+
+  if (normalizedType === 'Number') {
+    const numericValue = Number(rawValue);
+    normalized.value = rawValue === '' || rawValue === null || rawValue === undefined
+      ? 0
+      : (Number.isFinite(numericValue) ? numericValue : 0);
+    return normalized;
+  }
+
+  let childSources = Array.isArray(source.children) ? source.children : null;
+  if (!childSources && normalizedType === 'Array' && Array.isArray(rawValue)) {
+    childSources = rawValue.map(value => ({ value }));
+  }
+  if (!childSources && normalizedType === 'Dictionary' && rawValue && typeof rawValue === 'object' && !Array.isArray(rawValue)) {
+    childSources = Object.entries(rawValue).map(([key, value]) => ({ key, value }));
+  }
+  normalized.value = '';
+  normalized.children = (childSources || []).map((child, index) =>
+    normalizeEnvNode(child, normalizedType === 'Array' ? `Item ${index}` : '')
+  );
+  return normalized;
+}
+
+function serializeEnvNode(node) {
+  const normalizedType = ENV_NODE_TYPES.includes(node && node.type) ? node.type : 'String';
+
+  if (normalizedType === 'String') {
+    if (node && node.valueKind === 'null' && (node.value === undefined || node.value === null || node.value === '')) {
+      return null;
+    }
+    if (node && node.valueKind === 'number') {
+      const numericValue = Number(node.value);
+      if (node.value !== undefined && node.value !== null && node.value !== '' && Number.isFinite(numericValue)) {
+        return numericValue;
+      }
+    }
+    return node && node.value !== undefined && node.value !== null
+      ? String(node.value)
+      : '';
+  }
+  if (normalizedType === 'Boolean') {
+    return node && (node.value === true || node.value === 'true' || node.value === 'YES' || node.value === 'yes');
+  }
+  if (normalizedType === 'Number') {
+    const numericValue = Number(node && node.value);
+    return Number.isFinite(numericValue) ? numericValue : 0;
+  }
+  if (normalizedType === 'Array') {
+    return Array.isArray(node && node.children)
+      ? node.children.map(child => serializeEnvNode(child))
+      : [];
+  }
+
+  return Array.isArray(node && node.children)
+    ? node.children.reduce((result, child) => {
+      const key = child && typeof child.key === 'string' ? child.key.trim() : '';
+      if (key) {
+        result[key] = serializeEnvNode(child);
+      }
+      return result;
+    }, {})
+    : {};
+}
+
+function normalizeEnvNodes(env) {
+  if (Array.isArray(env)) {
+    // Compatibility with the previous cfg.json node-array format.
+    return env.map(node => normalizeEnvNode(node));
+  }
+  if (env && typeof env === 'object') {
+    return Object.entries(env).map(([key, value]) => normalizeEnvNode({ key, value }));
+  }
+  return [];
+}
+
+function serializeEnvVariables(nodes) {
+  if (!Array.isArray(nodes)) {
+    return {};
+  }
+
+  return nodes.reduce((result, node) => {
+    const key = node && typeof node.key === 'string' ? node.key.trim() : '';
+    if (key) {
+      result[key] = serializeEnvNode(node);
+    }
+    return result;
+  }, {});
+}
+
+const EnvNodeEditor = {
+  name: 'EnvNodeEditor',
+  props: {
+    node: { type: Object, required: true },
+    index: { type: Number, required: true },
+    depth: { type: Number, required: true },
+    labels: { type: Object, required: true },
+    canDelete: { type: Boolean, default: true },
+    parentType: { type: String, default: 'Dictionary' },
+    confirmDelete: { type: Function, default: null }
+  },
+  data() {
+    return {
+      typeOptions: ENV_NODE_TYPES
+    };
+  },
+  emits: ['delete-node'],
+  computed: {
+    isContainer() {
+      return this.node.type === 'Array' || this.node.type === 'Dictionary';
+    },
+    isArrayItem() {
+      return this.parentType === 'Array';
+    },
+    itemLabel() {
+      return `${this.labels.arrayItem || 'Item'} ${this.index}`;
+    },
+    childParentType() {
+      return this.node.type;
+    },
+    isExpanded() {
+      return this.node.expanded !== false;
+    },
+    disclosureLabel() {
+      return this.isExpanded
+        ? (this.labels.collapse || 'Collapse')
+        : (this.labels.expand || 'Expand');
+    }
+  },
+  methods: {
+    toggleExpanded() {
+      this.node.expanded = !this.isExpanded;
+    },
+    changeType(event) {
+      const nextType = event.target.value;
+      this.node.type = nextType;
+      this.node.valueKind = null;
+      if (nextType === 'Boolean') {
+        this.node.value = false;
+        this.node.children = [];
+      } else if (nextType === 'Number') {
+        this.node.value = 0;
+        this.node.children = [];
+      } else if (nextType === 'String') {
+        this.node.value = '';
+        this.node.children = [];
+      } else {
+        this.node.value = '';
+        this.node.children = [];
+      }
+      // A newly selected container starts open so its add-child action is immediately visible.
+      if (nextType === 'Array' || nextType === 'Dictionary') {
+        this.node.expanded = true;
+      }
+    },
+    addChild() {
+      const childKey = this.node.type === 'Array' ? `Item ${this.node.children.length}` : '';
+      this.node.expanded = true;
+      this.node.children.push(createEnvNode('String', childKey));
+    },
+    requestDelete() {
+      const removeNode = () => this.$emit('delete-node', []);
+      if (this.confirmDelete) {
+        this.confirmDelete(this.node, removeNode);
+        return;
+      }
+      removeNode();
+    },
+    handleChildDelete(childIndex, childPath) {
+      const normalizedPath = Array.isArray(childPath) ? childPath : [];
+      this.$emit('delete-node', [childIndex, ...normalizedPath]);
+    },
+  },
+  template: `
+    <div class="env-node" :class="{ 'env-node-container': isContainer }">
+      <div class="env-item env-node-row" :style="{ '--env-depth': depth }">
+        <button
+          v-if="isContainer"
+          type="button"
+          class="env-node-action env-node-disclosure"
+          :class="{ 'is-expanded': isExpanded }"
+          :title="disclosureLabel"
+          :aria-label="disclosureLabel"
+          :aria-expanded="isExpanded"
+          @click.stop="toggleExpanded"
+        >
+          <i aria-hidden="true" :class="isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'"></i>
+        </button>
+        <span v-else class="env-node-disclosure-spacer" aria-hidden="true"></span>
+        <span v-if="isArrayItem" class="env-array-key">{{ itemLabel }}</span>
+        <input
+          v-else
+          v-model="node.key"
+          class="env-key-input"
+          type="text"
+          :placeholder="labels.variableNamePlaceholder"
+        >
+        <select
+          :value="node.type"
+          class="env-type-select"
+          :aria-label="labels.valueType"
+          @change="changeType"
+        >
+          <option v-for="type in typeOptions" :key="type" :value="type">{{ type }}</option>
+        </select>
+        <input
+          v-if="node.type === 'String'"
+          :class="{ 'env-value-input': true, 'env-input-with-key': !isArrayItem }"
+          v-model="node.value"
+          type="text"
+          :placeholder="labels.variableValuePlaceholder"
+        >
+        <input
+          v-else-if="node.type === 'Number'"
+          :class="{ 'env-value-input': true, 'env-input-with-key': !isArrayItem }"
+          v-model.number="node.value"
+          type="number"
+          step="any"
+          :placeholder="labels.variableValuePlaceholder"
+        >
+        <select
+          v-else-if="node.type === 'Boolean'"
+          v-model="node.value"
+          :class="{ 'env-value-input': true, 'env-input-with-key': !isArrayItem, 'env-boolean-select': true }"
+          :aria-label="labels.variableValuePlaceholder"
+        >
+          <option :value="true">YES</option>
+          <option :value="false">NO</option>
+        </select>
+        <span v-else class="env-container-summary">
+          {{ node.children.length }} {{ node.children.length === 1 ? labels.item : labels.items }}
+        </span>
+        <button
+          v-if="isContainer"
+          type="button"
+          class="env-node-action env-node-add"
+          :title="labels.addChildItem"
+          @click="addChild"
+        >
+          <i class="fa fa-plus"></i>
+        </button>
+        <span v-else class="env-node-add-spacer" aria-hidden="true"></span>
+        <button
+          v-if="canDelete"
+          type="button"
+          class="env-node-action env-node-delete"
+          :title="labels.deleteThisEnvVar"
+          @click="requestDelete"
+        >
+          <i class="fa fa-times"></i>
+        </button>
+      </div>
+      <div
+        v-if="isContainer && isExpanded && node.children.length"
+        class="env-node-children"
+        :style="{ '--env-guide-depth': depth }"
+      >
+        <env-node-editor
+          v-for="(child, childIndex) in node.children"
+          :key="child.id"
+          :node="child"
+          :index="childIndex"
+          :depth="depth + 1"
+          :labels="labels"
+          :parent-type="childParentType"
+          :confirm-delete="confirmDelete"
+          @delete-node="handleChildDelete(childIndex, $event)"
+        ></env-node-editor>
+      </div>
+    </div>
+  `
+};
+
+const app = createApp({
   data() {
     return {
       config: { AUTH: [], activeIndex: 0 },
+      pendingDeletedItems: {
+        modelKeys: [],
+        envKeys: []
+      },
       loading: true,
       saving: false,
       error: null,
@@ -71,6 +411,8 @@ createApp({
       translations: {
         en: {
           helpTitle: 'User Guide',
+          configFileLabel: 'Config file',
+          openConfigFile: 'Open file editor',
           helpDescription: 'Claude Buddy helps you quickly configure API keys, models, and environment variables for Claude Code and other CLI tools through a visual interface.',
           feature1Title: 'API Key Management',
           feature1Desc: 'Store and switch between multiple API keys easily',
@@ -101,7 +443,7 @@ createApp({
           modelManagement: 'Model Management',
           defaultModelTitle: 'Default Model',
           defaultModelPlaceholder: 'Enter default GPT model',
-          workbuddyModelSectionTitle: 'Model',
+          workbuddyModelSectionTitle: 'Model Management',
           workbuddyModelName: 'Model Name',
           workbuddyModelPlaceholder: 'Enter model parameter value, e.g. gpt-4o',
           collapse: 'Collapse',
@@ -109,11 +451,20 @@ createApp({
           modelNamePlaceholder: 'Model name',
           modelValuePlaceholder: 'Model value',
           deleteThisModel: 'Delete this model',
+          confirmDeleteModel: 'Delete model "{name}"? This action cannot be undone.',
+          modelDeleted: 'Model deleted',
           addModel: 'Add Model',
           envVariables: 'Environment Variables',
           variableNamePlaceholder: 'Variable name',
           variableValuePlaceholder: 'Variable value',
+          valueType: 'Value type',
+          addChildItem: 'Add child item',
+          arrayItem: 'Item',
+          item: 'item',
+          items: 'items',
           deleteThisEnvVar: 'Delete this environment variable',
+          confirmDeleteEnvVariable: 'Delete environment variable "{name}"? This action cannot be undone.',
+          envVariableDeleted: 'Environment variable deleted',
           addEnvVariable: 'Add Environment Variable',
           addNewConfig: 'Add New Configuration',
           saveConfig: 'Save Configuration',
@@ -145,6 +496,8 @@ createApp({
         },
         zh: {
           helpTitle: '使用说明',
+          configFileLabel: '配置文件',
+          openConfigFile: '打开文件编辑器',
           helpDescription: 'Claude Buddy 是一款简单易用的 CLI 工具，通过可视化界面帮助您快速配置 Claude Code 等 CLI 工具的 API 密钥、模型和环境变量。',
           feature1Title: 'API 密钥管理',
           feature1Desc: '轻松存储和切换多组 API 密钥',
@@ -175,7 +528,7 @@ createApp({
           modelManagement: '模型管理',
           defaultModelTitle: '默认模型',
           defaultModelPlaceholder: '输入默认gpt模型',
-          workbuddyModelSectionTitle: '模型',
+          workbuddyModelSectionTitle: '模型管理',
           workbuddyModelName: '模型名称',
           workbuddyModelPlaceholder: '输入模型参数值，例如gpt-4o',
           collapse: '收起',
@@ -183,11 +536,20 @@ createApp({
           modelNamePlaceholder: '模型名称',
           modelValuePlaceholder: '模型值',
           deleteThisModel: '删除此模型',
+          confirmDeleteModel: '确定要删除模型“{name}”吗？此操作无法撤销。',
+          modelDeleted: '模型已删除',
           addModel: '添加模型',
           envVariables: '环境变量',
           variableNamePlaceholder: '变量名',
           variableValuePlaceholder: '变量值',
+          valueType: '值类型',
+          addChildItem: '添加下级项目',
+          arrayItem: 'Item',
+          item: '项',
+          items: '项',
           deleteThisEnvVar: '删除此环境变量',
+          confirmDeleteEnvVariable: '确定要删除环境变量“{name}”吗？此操作无法撤销。',
+          envVariableDeleted: '环境变量已删除',
           addEnvVariable: '添加环境变量',
           addNewConfig: '添加新配置',
           saveConfig: '保存配置',
@@ -224,6 +586,9 @@ createApp({
     t() {
       return this.translations[this.currentLang];
     },
+    currentConfigFileItems() {
+      return getConfigFileItems(this.currentCli);
+    },
     funLoadingMessage() {
       const messages = {
         en: [
@@ -369,6 +734,17 @@ createApp({
       }
     },
 
+    openConfigFile(fileItem) {
+      const editorLink = document.createElement('a');
+      editorLink.href = `/editor.html?fileKey=${encodeURIComponent(fileItem.key)}`;
+      editorLink.target = '_blank';
+      editorLink.rel = 'noopener noreferrer';
+      document.body.appendChild(editorLink);
+      editorLink.click();
+      editorLink.remove();
+      this.resetTimer();
+    },
+
     // 动态调整输入框宽度
     adjustInputWidth(event, index) {
       const input = event.target;
@@ -492,6 +868,7 @@ createApp({
           if (!auth.ENV) {
             auth.ENV = [];
           }
+          auth.ENV = normalizeEnvNodes(auth.ENV);
           if (!auth.MODELS) {
             auth.MODELS = [];
           }
@@ -519,6 +896,7 @@ createApp({
 
         // 最后更新 config
         this.config = config;
+        this.pendingDeletedItems = { modelKeys: [], envKeys: [] };
 
         this.showToast(this.t.configLoadSuccess);
         // 重置服务器倒计时
@@ -542,15 +920,15 @@ createApp({
       try {
         this.normalizeCodexDefaults();
         // 创建配置副本,过滤掉空配置项
-        const configToSave = {
-          ...this.config,
-          AUTH: this.config.AUTH.filter(auth => !this.isEmptyConfig(auth))
-        };
+        const saveAuthList = this.config.AUTH.filter(auth => !this.isEmptyConfig(auth));
+        const configToSave = this.prepareConfigForSave(
+          saveAuthList
+        );
 
         // WorkBuddy 过滤空卡片后修正索引，确保同步到 models.json 的仍是当前卡片。
         if (this.currentCli === 'WorkBuddy') {
           const activeAuth = this.config.AUTH[this.config.activeIndex];
-          const nextActiveIndex = activeAuth ? configToSave.AUTH.indexOf(activeAuth) : -1;
+          const nextActiveIndex = activeAuth ? saveAuthList.indexOf(activeAuth) : -1;
           configToSave.activeIndex = nextActiveIndex >= 0 ? nextActiveIndex : 0;
         }
 
@@ -560,11 +938,14 @@ createApp({
           return;
         }
 
+        const deletedItems = this.getPendingDeletedItems();
         const response = await axios.post('/api/config', {
           config: configToSave,
-          cliType: this.currentCli.toLowerCase()
+          cliType: this.currentCli.toLowerCase(),
+          deletedItems
         });
-        this.applyWorkBuddySaveResponse(response, configToSave.AUTH);
+        this.applyWorkBuddySaveResponse(response, this.currentCli === 'WorkBuddy' ? saveAuthList : configToSave.AUTH);
+        this.clearPendingDeletedItems(deletedItems);
         this.showToast(this.t.configSaveSuccess);
         // 彩带庆祝
         this.showConfetti();
@@ -610,6 +991,65 @@ createApp({
       });
     },
 
+    prepareConfigForSave(authList) {
+      const sourceAuth = Array.isArray(authList) ? authList : this.config.AUTH;
+      return {
+        ...this.config,
+        AUTH: sourceAuth.map(auth => ({
+          ...auth,
+          ENV: serializeEnvVariables(auth.ENV)
+        }))
+      };
+    },
+
+    getPendingDeletedItems() {
+      return {
+        modelKeys: Array.from(new Set(
+          (this.pendingDeletedItems?.modelKeys || [])
+            .filter(key => typeof key === 'string' && key.trim())
+            .map(key => key.trim())
+        )),
+        envKeys: Array.from(new Set(
+          (this.pendingDeletedItems?.envKeys || [])
+            .filter(key => typeof key === 'string' && key.trim())
+            .map(key => key.trim())
+        ))
+      };
+    },
+
+    recordDeletedItem(type, key) {
+      const normalizedKey = typeof key === 'string' ? key.trim() : '';
+      if (!normalizedKey || !['modelKeys', 'envKeys'].includes(type)) {
+        return false;
+      }
+      if (!Array.isArray(this.pendingDeletedItems[type])) {
+        this.pendingDeletedItems[type] = [];
+      }
+      if (this.pendingDeletedItems[type].includes(normalizedKey)) {
+        return false;
+      }
+      this.pendingDeletedItems[type].push(normalizedKey);
+      return true;
+    },
+
+    removePendingDeletedItem(type, key) {
+      if (!Array.isArray(this.pendingDeletedItems?.[type])) {
+        return;
+      }
+      const normalizedKey = typeof key === 'string' ? key.trim() : '';
+      this.pendingDeletedItems[type] = this.pendingDeletedItems[type].filter(item => item !== normalizedKey);
+    },
+
+    clearPendingDeletedItems(deletedItems = {}) {
+      ['modelKeys', 'envKeys'].forEach(type => {
+        const sentKeys = new Set(Array.isArray(deletedItems[type]) ? deletedItems[type] : []);
+        if (sentKeys.size > 0) {
+          this.pendingDeletedItems[type] = (this.pendingDeletedItems[type] || [])
+            .filter(key => !sentKeys.has(key));
+        }
+      });
+    },
+
     addAuth() {
       const auth = {
         name: '',
@@ -695,16 +1135,20 @@ createApp({
         try {
           this.normalizeCodexDefaults();
           const filteredAuth = this.config.AUTH.filter(auth => !this.isEmptyConfig(auth));
-          const configToSave = {
-            ...this.config,
-            AUTH: filteredAuth.length > 0 ? filteredAuth : this.config.AUTH
-          };
+          const configToSave = this.prepareConfigForSave(
+            filteredAuth.length > 0 ? filteredAuth : this.config.AUTH
+          );
 
           const response = await axios.post('/api/config', {
             config: configToSave,
             cliType: this.currentCli.toLowerCase()
           });
-          this.applyWorkBuddySaveResponse(response, configToSave.AUTH);
+          this.applyWorkBuddySaveResponse(
+            response,
+            this.currentCli === 'WorkBuddy'
+              ? (filteredAuth.length > 0 ? filteredAuth : this.config.AUTH)
+              : configToSave.AUTH
+          );
           this.showToast(this.t.configDeleted);
           // 重置服务器倒计时
           this.resetTimer();
@@ -733,16 +1177,15 @@ createApp({
       // 立即保存配置
       try {
         this.normalizeCodexDefaults();
-        const configToSave = {
-          ...this.config,
-          AUTH: this.config.AUTH.filter(auth => !this.isEmptyConfig(auth))
-        };
+        const configToSave = this.prepareConfigForSave(
+          this.config.AUTH.filter(auth => !this.isEmptyConfig(auth))
+        );
 
         const response = await axios.post('/api/config', {
           config: configToSave,
           cliType: this.currentCli.toLowerCase()
         });
-        this.applyWorkBuddySaveResponse(response, configToSave.AUTH);
+        this.applyWorkBuddySaveResponse(response, this.currentCli === 'WorkBuddy' ? this.config.AUTH.filter(auth => !this.isEmptyConfig(auth)) : configToSave.AUTH);
         this.showToast(this.t.configActivated);
         // 彩带庆祝
         this.showConfetti();
@@ -773,14 +1216,76 @@ createApp({
     },
 
     addEnv(authIndex) {
-      this.config.AUTH[authIndex].ENV.push({
-        key: '',
-        value: ''
+      this.config.AUTH[authIndex].ENV.push(createEnvNode());
+    },
+
+    confirmDeleteEnvNode(node, onConfirm) {
+      const nodeName = node && typeof node.key === 'string' && node.key.trim()
+        ? node.key.trim()
+        : (this.t.arrayItem || 'Item');
+      const message = this.t.confirmDeleteEnvVariable.replace('{name}', nodeName);
+      this.showConfirmDialog(message, onConfirm);
+    },
+
+    async persistInlineConfigChange(deletedItems = {}) {
+      const configToSave = this.prepareConfigForSave(this.config.AUTH);
+      const response = await axios.post('/api/config', {
+        config: configToSave,
+        cliType: this.currentCli.toLowerCase(),
+        deletedItems
       });
+      this.applyWorkBuddySaveResponse(response, configToSave.AUTH);
+      this.resetTimer();
+      return response;
     },
 
-    deleteEnv(authIndex, envIndex) {
-      this.config.AUTH[authIndex].ENV.splice(envIndex, 1);
+    async deleteEnv(authIndex, envIndex, childPath = []) {
+      const auth = this.config.AUTH[authIndex];
+      const rootNode = auth && Array.isArray(auth.ENV) ? auth.ENV[envIndex] : null;
+      const path = Array.isArray(childPath) ? childPath : [];
+      if (!rootNode) {
+        return;
+      }
+
+      let targetList = auth.ENV;
+      let targetIndex = envIndex;
+      if (path.length > 0) {
+        let parentNode = rootNode;
+        for (let pathIndex = 0; pathIndex < path.length - 1; pathIndex += 1) {
+          if (!parentNode || !Array.isArray(parentNode.children)) {
+            return;
+          }
+          parentNode = parentNode.children[path[pathIndex]];
+        }
+        if (!parentNode || !Array.isArray(parentNode.children)) {
+          return;
+        }
+        targetList = parentNode.children;
+        targetIndex = path[path.length - 1];
+      }
+
+      const deletedNode = targetList[targetIndex];
+      if (!deletedNode) {
+        return;
+      }
+      const rootKey = path.length === 0 && typeof rootNode.key === 'string'
+        ? rootNode.key.trim()
+        : '';
+      targetList.splice(targetIndex, 1);
+      const recordedDeletion = this.recordDeletedItem('envKeys', rootKey);
+
+      try {
+        const deletedItems = this.getPendingDeletedItems();
+        await this.persistInlineConfigChange(deletedItems);
+        this.clearPendingDeletedItems(deletedItems);
+        this.showToast(this.t.envVariableDeleted);
+      } catch (err) {
+        targetList.splice(targetIndex, 0, deletedNode);
+        if (recordedDeletion) {
+          this.removePendingDeletedItem('envKeys', rootKey);
+        }
+        this.showToast(this.t.deleteFailed + ': ' + (err.response?.data?.error || err.message), 'error');
+      }
     },
 
     addModel(authIndex) {
@@ -790,14 +1295,43 @@ createApp({
       });
     },
 
-    deleteModel(authIndex, modelIndex) {
-      this.config.AUTH[authIndex].MODELS.splice(modelIndex, 1);
+    async deleteModel(authIndex, modelIndex) {
+      const auth = this.config.AUTH[authIndex];
+      const model = auth && Array.isArray(auth.MODELS) ? auth.MODELS[modelIndex] : null;
+      if (!model) {
+        return;
+      }
+      const modelKey = typeof model.key === 'string' ? model.key.trim() : '';
+      const modelName = modelKey || `#${modelIndex + 1}`;
+      const message = this.t.confirmDeleteModel.replace('{name}', modelName);
+
+      this.showConfirmDialog(message, async () => {
+        auth.MODELS.splice(modelIndex, 1);
+        const recordedDeletion = this.recordDeletedItem('modelKeys', modelKey);
+        try {
+          const deletedItems = this.getPendingDeletedItems();
+          await this.persistInlineConfigChange(deletedItems);
+          this.clearPendingDeletedItems(deletedItems);
+          this.showToast(this.t.modelDeleted);
+        } catch (err) {
+          auth.MODELS.splice(modelIndex, 0, model);
+          if (recordedDeletion) {
+            this.removePendingDeletedItem('modelKeys', modelKey);
+          }
+          this.showToast(this.t.deleteFailed + ': ' + (err.response?.data?.error || err.message), 'error');
+        }
+      });
     },
 
     // 判断是否为空配置
     isEmptyConfig(auth) {
       const hasDefaultModel = (this.currentCli === 'Codex' || this.currentCli === 'WorkBuddy') && auth.DEFAULT_MODEL && auth.DEFAULT_MODEL.trim();
-      return !auth.name && !auth.BASE_URL && !auth.TOKEN && !hasDefaultModel && (!auth.ENV || auth.ENV.length === 0) && (!auth.MODELS || auth.MODELS.length === 0);
+      const hasEnv = Array.isArray(auth.ENV) && auth.ENV.some(env => this.hasEnvRootKey(env));
+      return !auth.name && !auth.BASE_URL && !auth.TOKEN && !hasDefaultModel && !hasEnv && (!auth.MODELS || auth.MODELS.length === 0);
+    },
+
+    hasEnvRootKey(node) {
+      return Boolean(node && typeof node.key === 'string' && node.key.trim());
     },
 
     createAuthKey() {
@@ -1033,16 +1567,15 @@ createApp({
       // 保存配置
       try {
         this.normalizeCodexDefaults();
-        const configToSave = {
-          ...this.config,
-          AUTH: this.config.AUTH.filter(auth => !this.isEmptyConfig(auth))
-        };
+        const configToSave = this.prepareConfigForSave(
+          this.config.AUTH.filter(auth => !this.isEmptyConfig(auth))
+        );
 
         const response = await axios.post('/api/config', {
           config: configToSave,
           cliType: this.currentCli.toLowerCase()
         });
-        this.applyWorkBuddySaveResponse(response, configToSave.AUTH);
+        this.applyWorkBuddySaveResponse(response, this.currentCli === 'WorkBuddy' ? this.config.AUTH.filter(auth => !this.isEmptyConfig(auth)) : configToSave.AUTH);
         // 重置服务器倒计时
         this.resetTimer();
       } catch (err) {
@@ -1058,6 +1591,11 @@ createApp({
     }
   },
   mounted() {
+    window.addEventListener('storage', event => {
+      if (event.key === CONFIG_FILE_REFRESH_STORAGE_KEY && event.newValue) {
+        window.location.reload();
+      }
+    });
     // 从 localStorage 读取语言设置
     const savedLang = localStorage.getItem('ccby-lang');
     if (savedLang && (savedLang === 'en' || savedLang === 'zh')) {
@@ -1082,4 +1620,7 @@ createApp({
       });
     });
   }
-}).mount('#app');
+});
+
+app.component('env-node-editor', EnvNodeEditor);
+app.mount('#app');