@auto-ai/agent 2.1.172 → 2.1.174

package/dist/ws-test/ws-test.js

@@ -50,28 +50,27 @@
       const btnSkillMdCancel = $('btnSkillMdCancel')
       const btnSkillMdSave = $('btnSkillMdSave')
       let skillMdEditingName = ''
-      const agentEnvModal = $('agentEnvModal')
-      const agentEnvModalCard = $('agentEnvModalCard')
-      const agentEnvModalBackdrop = $('agentEnvModalBackdrop')
-      const agentEnvSessionTabStrip = $('agentEnvSessionTabStrip')
+      const agentSettingsView = $('agentSettingsView')
       const agentEnvSessionTabList = $('agentEnvSessionTabList')
-      const agentEnvPanelEnv = $('agentEnvPanelEnv')
+      const agentEnvPanelUnified = $('agentEnvPanelUnified')
       const agentEnvPanelAgentMd = $('agentEnvPanelAgentMd')
-      const agentEnvPanelSettings = $('agentEnvPanelSettings')
       const agentEnvAgentMdEditor = $('agentEnvAgentMdEditor')
-      const agentEnvAgentTypeInput = $('agentEnvAgentTypeInput')
-      const agentEnvWhenToUseInput = $('agentEnvWhenToUseInput')
-      const agentEnvTeamEmpty = $('agentEnvTeamEmpty')
-      const agentEnvTeamChips = $('agentEnvTeamChips')
-      const agentEnvTeamPick = $('agentEnvTeamPick')
-      const btnAgentEnvAddTeamMember = $('btnAgentEnvAddTeamMember')
-      const agentEnvToolsInput = $('agentEnvToolsInput')
-      const agentEnvModelInput = $('agentEnvModelInput')
-      const agentEnvEffortInput = $('agentEnvEffortInput')
-      const agentEnvBackgroundInput = $('agentEnvBackgroundInput')
-      const agentEnvIsolationInput = $('agentEnvIsolationInput')
+      const llmProvidersSettingsBlock = $('llmProvidersSettingsBlock')
+      const llmFormId = $('llmFormId')
+      const llmFormName = $('llmFormName')
+      const llmFormProvider = $('llmFormProvider')
+      const llmFormBaseUrl = $('llmFormBaseUrl')
+      const llmFormApiKey = $('llmFormApiKey')
+      const llmFormAuthToken = $('llmFormAuthToken')
+      const llmFormModelId = $('llmFormModelId')
+      const llmFormModelLabel = $('llmFormModelLabel')
+      const llmProvidersEmptyHint = $('llmProvidersEmptyHint')
+      const llmProvidersList = $('llmProvidersList')
+      const btnLlmProvidersAdd = $('btnLlmProvidersAdd')
+      const LLM_MASKED_CREDENTIAL = '***'
+      /** 设置页 LLM 服务商草稿，保存时写入 agent.json.llmProviders */
+      let llmProvidersDraft = []
       const agentEnvList = $('agentEnvList')
-      const btnAgentEnvModalClose = $('btnAgentEnvModalClose')
       const btnAgentEnvCancel = $('btnAgentEnvCancel')
       const btnAgentEnvSave = $('btnAgentEnvSave')
       const toolFilesModal = $('toolFilesModal')
@@ -318,14 +317,14 @@
         isolation: '',
         whentouse: '',
         env: {},
+        llmProviders: [],
       }
       // session 级 overrides：只影响当前 sessionId 子进程；不写 agent.json
-      let sessionOverrideState = { model: '', env: {} }
+      let sessionOverrideState = { providerId: '', model: '', env: {} }
       // 未分配 sessionId 时暂存，收到 {type:'session', sessionId} 后补写
       let pendingSessionOverrides = null
-      const AGENT_ENV_GROUP_ORDER = ['llm', 'git', 'geelib', 'tutui', 'system']
+      const AGENT_ENV_GROUP_ORDER = ['git', 'geelib', 'tutui', 'system']
       const AGENT_ENV_GROUP_LABELS = {
-        llm: 'llm设置',
         git: 'git设置',
         geelib: 'geelib设置',
         tutui: 'tutui设置',
@@ -333,7 +332,7 @@
       }
       let agentEnvSchema = []
       let agentEnvFieldValues = {}
-      let agentEnvActiveTab = 'env'
+      let agentEnvActiveTab = 'settings'
       let agentEnvAgentMdLoadOk = false
       let pickerKind = 'tools'
       let pickerSelected = new Set()
@@ -343,6 +342,7 @@
       let remoteMcpServers = []
       const WS_PERMISSION_MODE_KEY = 'WS_PERMISSION_MODE'
       const LLM_MODEL_KEY = 'LLM_MODEL'
+      const LLM_PROVIDER_ID_KEY = 'LLM_PROVIDER_ID'
       const WS_ALLOW_TOOL_ASK_KEY = 'WS_ALLOW_TOOL_ASK'
       const TUITUI_CHANNEL_SESSION_KEY = 'TUITUI_CHANNEL_SESSION'
       const TUITUI_CHANNEL_SESSION_ALLOWED = new Set(['0', '1'])
@@ -364,10 +364,13 @@
 
       /** 项目根 .env 中的默认值（agent.json 未配置时用于新 session 展示） */
       let projectEnvDefaults = {
-        LLM_MODEL: '',
         WS_PERMISSION_MODE: '',
         WS_ALLOW_TOOL_ASK: '',
       }
+
+      /** LLM providers merged 默认 provider/model（由刷新函数计算） */
+      let llmDefaultProviderId = ''
+      let llmDefaultModelId = ''
       /** 固定表单字段在项目 .env 的默认值（用于环境变量面板回显） */
       let projectEnvFormDefaults = {}
 
@@ -456,7 +459,7 @@
       /**
        * 业务逻辑：
        * 1) 环境变量固定表单必须由后端 schema 驱动，避免前后端字段漂移；
-       * 2) 仅接收 5 个固定分组字段，其他分组直接忽略；
+       * 2) 仅接收 git/geelib/tutui/system 分组字段，其他分组直接忽略；
        * 3) 字段顺序保持后端下发顺序，确保展示和保存稳定可预期。
        */
       function normalizeAgentEnvSchema(rawSchema) {
@@ -482,22 +485,49 @@
         return out
       }
 
+      /** 读取设置页 whentouse 输入框（由 renderAgentEnvList 动态挂载在「系统设置」分组） */
+      function queryAgentEnvWhenToUseInput() {
+        return $('agentEnvWhenToUseInput')
+      }
+
+      /**
+       * 在「系统设置」分组渲染 agent.json.whentouse 输入框。
+       */
+      function appendAgentEnvWhentouseRow(section, whentouseValue) {
+        const row = document.createElement('div')
+        row.className = 'agent-env-fixed-row agent-env-fixed-row--whentouse'
+        const label = document.createElement('label')
+        label.className = 'agent-env-fixed-label'
+        label.setAttribute('for', 'agentEnvWhenToUseInput')
+        label.textContent = '使用时机（whentouse）'
+        const textarea = document.createElement('textarea')
+        textarea.id = 'agentEnvWhenToUseInput'
+        textarea.className = 'agent-md-editor settings-textarea--whentouse agent-env-kv-input'
+        textarea.rows = 3
+        textarea.spellcheck = false
+        textarea.placeholder = '输入该 agent 的使用时机描述'
+        textarea.setAttribute('aria-label', 'agent.json whentouse')
+        textarea.value = typeof whentouseValue === 'string' ? whentouseValue : ''
+        row.appendChild(label)
+        row.appendChild(textarea)
+        section.appendChild(row)
+      }
+
       /**
        * 业务逻辑：
        * 1) 固定表单只允许 schema 内字段，所有输入值写入内存 map；
        * 2) 保存前由 collectAndValidateAgentEnvDraft 统一做 trim 与空值过滤；
-       * 3) 渲染时按分组插入标题，保证 UI 与需求分区一致。
+       * 3) 渲染时按分组插入标题；「系统设置」仅含 whentouse，不含全局 .env 变量。
        */
       function renderAgentEnvList() {
         if (!agentEnvList) return
+        const priorWhenInput = queryAgentEnvWhenToUseInput()
+        const priorWhentouse = priorWhenInput
+          ? String(priorWhenInput.value || '')
+          : typeof agentConfigState.whentouse === 'string'
+            ? agentConfigState.whentouse
+            : ''
         agentEnvList.innerHTML = ''
-        if (!agentEnvSchema.length) {
-          const empty = document.createElement('div')
-          empty.className = 'tool-files-empty'
-          empty.textContent = '未加载到环境变量表单配置'
-          agentEnvList.appendChild(empty)
-          return
-        }
         const schemaByGroup = {}
         for (let i = 0; i < AGENT_ENV_GROUP_ORDER.length; i++) {
           schemaByGroup[AGENT_ENV_GROUP_ORDER[i]] = []
@@ -507,9 +537,22 @@
           schemaByGroup[field.group].push(field)
         }
         const frag = document.createDocumentFragment()
+        let renderedAny = false
         for (let i = 0; i < AGENT_ENV_GROUP_ORDER.length; i++) {
           const group = AGENT_ENV_GROUP_ORDER[i]
           const fields = schemaByGroup[group]
+          if (group === 'system') {
+            const section = document.createElement('section')
+            section.className = 'agent-env-fixed-section'
+            const title = document.createElement('h3')
+            title.className = 'agent-env-fixed-section-title'
+            title.textContent = AGENT_ENV_GROUP_LABELS.system
+            section.appendChild(title)
+            appendAgentEnvWhentouseRow(section, priorWhentouse)
+            frag.appendChild(section)
+            renderedAny = true
+            continue
+          }
           if (!fields || !fields.length) continue
           const section = document.createElement('section')
           section.className = 'agent-env-fixed-section'
@@ -555,36 +598,6 @@
                 agentEnvFieldValues[field.key] = select.value
               })
               input = select
-            } else if (field.key === 'LLM_PROVIDER') {
-              /**
-               * 业务逻辑：模型类型是受控枚举，使用下拉框约束可选值，
-               * 避免手输导致 provider 非法。
-               */
-              const select = document.createElement('select')
-              select.id = inputId
-              select.className = 'agent-env-kv-input'
-              const providerOptions = [
-                { value: '', label: '请选择' },
-                { value: 'anthropic', label: 'anthropic' },
-                { value: 'openai', label: 'openai' },
-              ]
-              for (let k = 0; k < providerOptions.length; k++) {
-                const option = document.createElement('option')
-                option.value = providerOptions[k].value
-                option.textContent = providerOptions[k].label
-                select.appendChild(option)
-              }
-              const currentValue =
-                typeof agentEnvFieldValues[field.key] === 'string'
-                  ? agentEnvFieldValues[field.key]
-                  : ''
-              select.value = currentValue === 'anthropic' || currentValue === 'openai'
-                ? currentValue
-                : ''
-              select.addEventListener('change', function () {
-                agentEnvFieldValues[field.key] = select.value
-              })
-              input = select
             } else {
               const textInput = document.createElement('input')
               textInput.id = inputId
@@ -605,18 +618,29 @@
             section.appendChild(row)
           }
           frag.appendChild(section)
+          renderedAny = true
+        }
+        if (!renderedAny) {
+          const empty = document.createElement('div')
+          empty.className = 'tool-files-empty'
+          empty.textContent = '未加载到环境变量表单配置'
+          agentEnvList.appendChild(empty)
+          return
         }
         agentEnvList.appendChild(frag)
       }
 
-      /** 新 session 默认模型：agent.json.env → agent.json.model → 项目 .env */
-      function readDefaultLlmModel() {
-        const fromAgentEnv = readAgentEnvString(LLM_MODEL_KEY)
-        if (fromAgentEnv) return fromAgentEnv
-        const fromAgentModel =
-          typeof agentConfigState.model === 'string' ? agentConfigState.model.trim() : ''
-        if (fromAgentModel) return fromAgentModel
-        return projectEnvDefaults.LLM_MODEL || ''
+      /**
+       * 新 session 的默认 provider + model：
+       * 由后端 /api/llm-providers 返回的 merged.defaultProviderId 与 provider.defaultModel 推导。
+       *
+       * 业务语义：若默认值尚未准备好，直接抛错暴露配置/加载时序问题，
+       * 不做静默兜底（避免错误模型运行）。
+       */
+      function readDefaultLlmProviderAndModel() {
+        const providerId = String(llmDefaultProviderId || '').trim()
+        const model = String(llmDefaultModelId || '').trim()
+        return { providerId, model }
       }
 
       /**
@@ -678,8 +702,10 @@
        * 3) 将结果投影为 sessionOverrideState，保证 UI 与后端 PATCH 入参一致。
        */
       function buildDefaultSessionOverrideState() {
+        const { providerId, model } = readDefaultLlmProviderAndModel()
         return {
-          model: readDefaultLlmModel(),
+          providerId,
+          model,
           env: {
             [WS_PERMISSION_MODE_KEY]: readDefaultWsPermissionMode(),
             [WS_ALLOW_TOOL_ASK_KEY]: readDefaultWsAllowToolAsk(),
@@ -2503,11 +2529,21 @@
         treeCache: new Map(),
       }
 
+      /** Agent 设置主视图是否激活（与聊天区、文件管理互斥） */
+      const agentSettingsState = {
+        viewActive: false,
+      }
+
       /** 当前是否在文件管理视图 */
       function isRepoManageViewActive() {
         return repoManageState.viewActive
       }
 
+      /** 当前是否在 Agent 设置主视图 */
+      function isAgentSettingsViewActive() {
+        return agentSettingsState.viewActive
+      }
+
       /** 判断是否为可在页面内展示的文本类文件 */
       function isRepoTextFile(fileName) {
         const base = String(fileName || '').split('/').pop() || ''
@@ -2648,6 +2684,9 @@
 
       /** 显示/隐藏文件浏览主区域、聊天区；顶栏在文件视图下展示「文件」而非会话标题 */
       function setRepoManageVisible(visible) {
+        if (visible) {
+          closeAgentSettingsView()
+        }
         repoManageState.viewActive = visible
         if (repoManageView) repoManageView.hidden = !visible
         if (chatWorkspace) chatWorkspace.hidden = visible
@@ -2670,6 +2709,41 @@
         if (btnManageRepo) btnManageRepo.classList.remove('is-active')
       }
 
+      /**
+       * 切换 Agent 设置主视图与聊天区可见性。
+       * 业务逻辑：设置页与文件管理、聊天区互斥，顶栏展示「设置」与当前 agent 名。
+       */
+      function setAgentSettingsVisible(visible) {
+        if (visible) {
+          repoManageState.viewActive = false
+          if (repoManageView) repoManageView.hidden = true
+          if (btnManageRepo) btnManageRepo.classList.remove('is-active')
+        }
+        agentSettingsState.viewActive = visible
+        if (agentSettingsView) agentSettingsView.hidden = !visible
+        if (chatWorkspace) chatWorkspace.hidden = visible
+        if (chatComposer) chatComposer.hidden = visible
+        if (mainHeaderEl) mainHeaderEl.hidden = false
+        if (visible) {
+          if (mainTitleEl) mainTitleEl.textContent = '设置'
+          if (mainSubEl) {
+            mainSubEl.textContent = currentAgentParam()
+            mainSubEl.hidden = false
+          }
+          if (btnEditAgentEnv) btnEditAgentEnv.classList.add('is-active')
+        } else {
+          if (btnEditAgentEnv) btnEditAgentEnv.classList.remove('is-active')
+          updateMainHeader()
+        }
+      }
+
+      /** 关闭设置主视图，回到聊天 */
+      function closeAgentSettingsView() {
+        if (!agentSettingsState.viewActive) return
+        setAgentSettingsVisible(false)
+        if (agentEnvSessionTabList) agentEnvSessionTabList.innerHTML = ''
+      }
+
       /** 设置 entries/history 面板加载或错误态 */
       function setRepoPanelState(el, message, isError) {
         if (!el) return
@@ -4469,6 +4543,14 @@
           }
           return
         }
+        if (isAgentSettingsViewActive()) {
+          mainTitleEl.textContent = '设置'
+          if (mainSubEl) {
+            mainSubEl.textContent = currentAgentParam()
+            mainSubEl.hidden = false
+          }
+          return
+        }
         if (typeof titleText === 'string' && titleText.trim()) {
           mainTitleEl.textContent = titleText.trim()
           return
@@ -4600,181 +4682,6 @@
         return u.toString()
       }
 
-      function buildAgentTeamMembersPostUrl(leaderId) {
-        return new URL(
-          '/api/agents/' + encodeURIComponent(String(leaderId || '').trim()) + '/team-members',
-          httpOriginForApi() + '/',
-        ).toString()
-      }
-
-      function buildAgentTeamMemberDeleteUrl(leaderId, agentType) {
-        return new URL(
-          '/api/agents/' +
-            encodeURIComponent(String(leaderId || '').trim()) +
-            '/team-members/' +
-            encodeURIComponent(String(agentType || '').trim()),
-          httpOriginForApi() + '/',
-        ).toString()
-      }
-
-      function buildAgentsListUrlForOffice() {
-        return new URL('/api/agents', httpOriginForApi() + '/').toString()
-      }
-
-      /** 设置弹窗：可绑定队员仅来自 agent-runtime（GET /api/agents） */
-      async function fetchTeamMemberCatalogForSettings(leaderId) {
-        const leader = String(leaderId || '').trim()
-        const r = await fetch(buildAgentsListUrlForOffice())
-        const body = await r.json().catch(function () {
-          return {}
-        })
-        if (!r.ok) {
-          throw new Error(body.message || body.error || r.statusText)
-        }
-        const agents = Array.isArray(body.agents) ? body.agents : []
-        const out = []
-        for (let i = 0; i < agents.length; i++) {
-          const row = agents[i]
-          const id = String(row.id || '').trim()
-          if (!id || id === leader) continue
-          out.push({
-            agentType: id,
-            whenToUse: typeof row.whentouse === 'string' ? row.whentouse : '',
-          })
-        }
-        out.sort(function (a, b) {
-          return a.agentType.localeCompare(b.agentType)
-        })
-        return out
-      }
-
-      /** 设置弹窗：渲染已绑定队员与添加下拉 */
-      async function renderAgentEnvTeamMembers() {
-        if (!agentEnvTeamChips) return
-        const leaderId = currentAgentParam()
-        const members = Array.isArray(agentConfigState.agentTeamMembers)
-          ? agentConfigState.agentTeamMembers
-          : []
-        if (agentEnvTeamEmpty) {
-          agentEnvTeamEmpty.hidden = members.length > 0
-        }
-        agentEnvTeamChips.innerHTML = ''
-        const boundSet = new Set()
-        for (let i = 0; i < members.length; i++) {
-          const m = members[i]
-          const agentType = String(m.agentType || '').trim()
-          if (!agentType) continue
-          boundSet.add(agentType)
-          const chip = document.createElement('span')
-          chip.className = 'agent-env-team-chip'
-          chip.title =
-            typeof m.whentouse === 'string' && m.whentouse.trim()
-              ? m.whentouse.trim()
-              : agentType
-          const label = document.createElement('span')
-          label.textContent = agentType
-          const rm = document.createElement('button')
-          rm.type = 'button'
-          rm.setAttribute('aria-label', '移除 ' + agentType)
-          rm.textContent = '×'
-          rm.addEventListener('click', function () {
-            void removeAgentEnvTeamMember(agentType)
-          })
-          chip.appendChild(label)
-          chip.appendChild(rm)
-          agentEnvTeamChips.appendChild(chip)
-        }
-        if (agentEnvTeamPick) {
-          agentEnvTeamPick.innerHTML = '<option value="">选择要添加的 Agent…</option>'
-          let catalog = []
-          try {
-            catalog = await fetchTeamMemberCatalogForSettings(leaderId)
-          } catch {
-            catalog = []
-          }
-          for (let j = 0; j < catalog.length; j++) {
-            const t = catalog[j]
-            const id = String(t.agentType || '').trim()
-            if (!id || id === leaderId || boundSet.has(id)) continue
-            const opt = document.createElement('option')
-            opt.value = id
-            const when =
-              typeof t.whenToUse === 'string' && t.whenToUse.trim() ? t.whenToUse.trim() : ''
-            opt.textContent = when ? id + ' — ' + when.slice(0, 36) : id
-            agentEnvTeamPick.appendChild(opt)
-          }
-        }
-      }
-
-      function applyAgentTeamMembersFromApi(agentRow) {
-        if (!agentRow || typeof agentRow !== 'object') return
-        if (Array.isArray(agentRow.agentTeamMembers)) {
-          agentConfigState.agentTeamMembers = agentRow.agentTeamMembers.map(function (m) {
-            return {
-              agentType: String(m.agentType || ''),
-              whentouse: typeof m.whentouse === 'string' ? m.whentouse : '',
-            }
-          })
-        }
-        if (Array.isArray(agentRow.agentTeams)) {
-          agentConfigState.agentTeams = agentRow.agentTeams.map(String)
-        } else if (Array.isArray(agentRow.agentTeamMembers)) {
-          agentConfigState.agentTeams = agentRow.agentTeamMembers
-            .map(function (m) {
-              return String(m.agentType || '')
-            })
-            .filter(Boolean)
-        }
-        renderBindChips()
-      }
-
-      async function addAgentEnvTeamMember() {
-        const leaderId = currentAgentParam()
-        if (!agentEnvTeamPick) return
-        const agentType = agentEnvTeamPick.value.trim()
-        if (!agentType) {
-          window.alert('请先选择要添加的队员')
-          return
-        }
-        const r = await fetch(buildAgentTeamMembersPostUrl(leaderId), {
-          method: 'POST',
-          headers: { 'content-type': 'application/json; charset=utf-8' },
-          body: JSON.stringify({ agentType: agentType }),
-        })
-        const body = await r.json().catch(function () {
-          return {}
-        })
-        if (!r.ok) {
-          window.alert('添加队员失败：' + (body.message || body.error || r.statusText))
-          return
-        }
-        applyAgentTeamMembersFromApi(body.agent)
-        agentEnvTeamPick.value = ''
-        await renderAgentEnvTeamMembers()
-        void persistAgentConfigAndRestartSession({ silent: true })
-        setStatus('已添加队员 ' + agentType, serverReady ? 'ready' : '')
-      }
-
-      async function removeAgentEnvTeamMember(agentType) {
-        const leaderId = currentAgentParam()
-        if (!window.confirm('确定移除队员「' + agentType + '」？')) {
-          return
-        }
-        const r = await fetch(buildAgentTeamMemberDeleteUrl(leaderId, agentType), {
-          method: 'DELETE',
-        })
-        const body = await r.json().catch(function () {
-          return {}
-        })
-        if (!r.ok) {
-          window.alert('移除队员失败：' + (body.message || body.error || r.statusText))
-          return
-        }
-        applyAgentTeamMembersFromApi(body.agent)
-        await renderAgentEnvTeamMembers()
-        void persistAgentConfigAndRestartSession({ silent: true })
-        setStatus('已移除队员 ' + agentType, serverReady ? 'ready' : '')
-      }
       async function loadSessions(options) {
         sessionListMetaEl.textContent = '加载中…'
         let data
@@ -4825,6 +4732,7 @@
 
       function switchToSession(id) {
         closeRepoManageView()
+        closeAgentSettingsView()
         const nextSid = typeof id === 'string' ? id : ''
         sessionIdInput.value = nextSid
         currentSessionContextPercent = null
@@ -5644,12 +5552,16 @@
 
       function buildModelsApiUrl() {
         const id = currentAgentParam()
-        const u = new URL('/api/models', httpOriginForApi() + '/')
+        const u = new URL('/api/llm-providers', httpOriginForApi() + '/')
         u.searchParams.set('agent', id)
         return u.toString()
       }
 
-      /** GET /api/models 返回的动态列表（仅展示接口数据 + 浏览器最近使用） */
+      /**
+       * 会话模型候选：来自 /api/llm-providers.merged 的本地配置（不走云端探测）。
+       *
+       * 注意：同一个 model.id 在不同 provider 下可能重复，因此候选需要 providerId 一起参与。
+       */
       let apiModelRows = []
       let lastModelsFetchTs = 0
 
@@ -5668,102 +5580,79 @@
           if (!r.ok) {
             throw new Error(b.message || b.error || r.statusText)
           }
-          const rows = Array.isArray(b.models) ? b.models : []
-          apiModelRows = rows
-            .filter(function (x) {
-              return x && typeof x.id === 'string' && x.id.trim()
-            })
-            .map(function (x) {
-              return {
-                id: String(x.id).trim(),
-                label:
-                  typeof x.label === 'string' && x.label.trim()
-                    ? String(x.label).trim()
-                    : undefined,
-              }
-            })
-          logLine('models-api', { source: b.source, count: apiModelRows.length })
-        } catch (e) {
-          apiModelRows = []
-          logLine('models-api', 'load failed: ' + e)
-        }
-      }
+          const providers = Array.isArray(b.providers) ? b.providers : []
 
-      function labelForModelId(modelId) {
-        for (let i = 0; i < apiModelRows.length; i++) {
-          if (apiModelRows[i].id === modelId) return apiModelRows[i].label
-        }
-        return undefined
-      }
-
-      const RECENT_MODELS_KEY = 'ws-test-composer-recent-models'
-
-      function readRecentModels() {
-        try {
-          const raw = localStorage.getItem(RECENT_MODELS_KEY)
-          const arr = raw ? JSON.parse(raw) : []
-          return Array.isArray(arr)
-            ? arr.filter(function (x) {
-                return typeof x === 'string' && x.trim()
-              }).slice(0, 12)
-            : []
-        } catch {
-          return []
-        }
-      }
-
-      function pushRecentModel(m) {
-        if (!m || !String(m).trim()) return
-        const v = String(m).trim()
-        let arr = readRecentModels().filter(function (x) {
-          return x !== v
-        })
-        arr.unshift(v)
-        arr = arr.slice(0, 12)
-        try {
-          localStorage.setItem(RECENT_MODELS_KEY, JSON.stringify(arr))
-        } catch {
-          /* ignore */
-        }
-      }
+          apiModelRows = []
+          for (let i = 0; i < providers.length; i++) {
+            const p = providers[i]
+            const providerId = typeof p.id === 'string' ? p.id.trim() : ''
+            const providerName = typeof p.name === 'string' ? p.name.trim() : ''
+            const models = Array.isArray(p.models) ? p.models : []
+            for (let j = 0; j < models.length; j++) {
+              const m = models[j]
+              const modelId = typeof m.id === 'string' ? m.id.trim() : ''
+              if (!modelId) continue
+              const label =
+                typeof m.label === 'string' && m.label.trim() ? m.label.trim() : undefined
+              const display = providerName
+                ? providerName + ' · ' + (label ? label : modelId)
+                : (label ? label : modelId)
+              apiModelRows.push({
+                providerId,
+                providerName,
+                id: modelId,
+                label,
+                display,
+              })
+            }
+          }
 
-      function mergeModelCandidates() {
-        if (!apiModelRows.length) {
-          return []
-        }
-        const seen = new Set()
-        const out = []
-        function add(x) {
-          if (!x || !String(x).trim()) return
-          const s = String(x).trim()
-          if (seen.has(s)) return
-          seen.add(s)
-          out.push(s)
-        }
-        const recent = readRecentModels()
-        for (let i = 0; i < recent.length; i++) {
-          add(recent[i])
-        }
-        for (let a = 0; a < apiModelRows.length; a++) {
-          add(apiModelRows[a].id)
+          // 计算 merged 默认 provider/model（给新 session 使用）
+          const defaultProviderIdRaw =
+            typeof b.defaultProviderId === 'string' ? b.defaultProviderId.trim() : ''
+          const resolvedDefaultProviderId =
+            defaultProviderIdRaw ||
+            (apiModelRows.length ? apiModelRows[0].providerId : '')
+          llmDefaultProviderId = resolvedDefaultProviderId
+          const defaultProvider = providers.find(p => String(p.id) === resolvedDefaultProviderId) || providers[0]
+          const defaultModelRaw =
+            defaultProvider && typeof defaultProvider.defaultModel === 'string'
+              ? defaultProvider.defaultModel.trim()
+              : ''
+          const defaultModelId =
+            defaultModelRaw ||
+            (defaultProvider && Array.isArray(defaultProvider.models) && defaultProvider.models[0]
+              ? String(defaultProvider.models[0].id).trim()
+              : '')
+          llmDefaultModelId = defaultModelId
+
+          logLine('llm-providers-api', { count: apiModelRows.length, defaultProviderId: llmDefaultProviderId, defaultModelId: llmDefaultModelId })
+        } catch (e) {
+          apiModelRows = []
+          llmDefaultProviderId = ''
+          llmDefaultModelId = ''
+          logLine('llm-providers-api', 'load failed: ' + e)
         }
-        return out
       }
 
       function filterModelCandidates(query) {
-        const all = mergeModelCandidates()
         const q = String(query || '')
           .trim()
           .toLowerCase()
+        const all = Array.isArray(apiModelRows) ? apiModelRows : []
         if (!q) return all.slice(0, 50)
         const hit = []
         for (let i = 0; i < all.length; i++) {
-          const id = all[i]
-          const lab = labelForModelId(id)
-          const idHit = id.toLowerCase().indexOf(q) >= 0
-          const labHit = lab && lab.toLowerCase().indexOf(q) >= 0
-          if (idHit || labHit) hit.push(id)
-          if (hit.length >= 50) break
+          const x = all[i]
+          const idHit = x.id.toLowerCase().indexOf(q) >= 0
+          const labelHit = x.label && x.label.toLowerCase().indexOf(q) >= 0
+          const providerHit =
+            x.providerName && x.providerName.toLowerCase().indexOf(q) >= 0
+          const providerIdHit = x.providerId && x.providerId.toLowerCase().indexOf(q) >= 0
+          if (idHit || labelHit || providerHit || providerIdHit) {
+            hit.push(x)
+            if (hit.length >= 50) break
+          }
         }
         return hit
       }
@@ -5796,17 +5685,23 @@
           return
         }
         for (let i = 0; i < items.length; i++) {
-          const id = items[i]
-          const lab = labelForModelId(id)
+          const entry = items[i]
+          const id = entry && typeof entry.id === 'string' ? entry.id : ''
           const li = document.createElement('li')
           li.setAttribute('role', 'option')
           li.setAttribute('data-model', id)
-          li.textContent = lab ? lab + ' · ' + id : id
+          if (entry && typeof entry.providerId === 'string') {
+            li.setAttribute('data-provider-id', entry.providerId)
+          }
+          li.textContent = entry && entry.display ? entry.display : id
           if (i === composerModelHighlight) li.classList.add('is-active')
           li.addEventListener('mousedown', function (ev) {
             ev.preventDefault()
             composerModelSuppressBlurCommit = true
             if (composerModelInput) composerModelInput.value = id
+            if (entry && typeof entry.providerId === 'string') {
+              sessionOverrideState.providerId = entry.providerId
+            }
             syncComposerModelTitle()
             hideComposerModelDropdown()
             void commitComposerModelFromInput()
@@ -5854,8 +5749,10 @@
         let idx = composerModelHighlight
         if (idx < 0 || idx >= opts.length) idx = 0
         const id = opts[idx].getAttribute('data-model')
+        const pid = opts[idx].getAttribute('data-provider-id') || ''
         if (id) {
           composerModelInput.value = id
+          if (pid) sessionOverrideState.providerId = pid
           syncComposerModelTitle()
           hideComposerModelDropdown()
           void commitComposerModelFromInput()
@@ -5865,25 +5762,83 @@
       async function commitComposerModelFromInput() {
         if (!composerModelInput) return
         const v = composerModelInput.value.trim()
-        if (v === (sessionOverrideState.model || '')) return
-        sessionOverrideState.model = v
-        if (v) pushRecentModel(v)
+        const defaults = buildDefaultSessionOverrideState()
+
+        // 留空语义：清除 session 级 overrides，让 worker 依据项目/agent 默认配置自动选择 provider/model。
+        if (!v) {
+          const shouldUpdate =
+            (sessionOverrideState.model || '') !== '' ||
+            (sessionOverrideState.providerId || '') !== ''
+          if (!shouldUpdate) return
+          sessionOverrideState.model = ''
+          sessionOverrideState.providerId = ''
+          await persistSessionOverridesAndRestart({ silent: true })
+          return
+        }
+
+        const modelId = v
+
+        const matches = Array.isArray(apiModelRows)
+          ? apiModelRows.filter(function (x) {
+              return x && x.id === modelId
+            })
+          : []
+
+        let providerId = sessionOverrideState.providerId || ''
+        if (matches.length === 1) {
+          providerId = matches[0].providerId
+        } else if (matches.length > 1) {
+          // 相同 model.id 可能出现在多个 provider 下：
+          // 若当前 provider 已匹配其中之一则沿用，否则阻止保存要求用户明确选择。
+          const found = providerId
+            ? matches.some(function (x) {
+                return x.providerId === providerId
+              })
+            : false
+          if (!found) {
+            window.alert('该模型 ID 在多个服务商中重复，请从下拉列表选择完整项（服务商 · 模型）。')
+            return
+          }
+        } else {
+          // 没匹配到 model.id：不允许用不受控的 provider/model 组合运行。
+          window.alert('模型 ID 未配置：' + modelId)
+          return
+        }
+
+        const shouldUpdate =
+          modelId !== (sessionOverrideState.model || '') || providerId !== (sessionOverrideState.providerId || '')
+        if (!shouldUpdate) return
+
+        sessionOverrideState.model = modelId
+        sessionOverrideState.providerId = providerId
         await persistSessionOverridesAndRestart({ silent: true })
       }
 
       function syncComposerModelTitle() {
         if (!composerModelInput) return
         const v = composerModelInput.value.trim()
-        composerModelInput.title = v
-          ? 'session 级模型覆盖（完整 ID，悬停可复制核对）：' + v
-          : '留空=跟随 agent.json 默认；模型 ID 须与网关控制台一致（区分大小写）'
+        if (!v) {
+          composerModelInput.title = '留空=跟随默认服务商与模型'
+          return
+        }
+        const entry = Array.isArray(apiModelRows)
+          ? apiModelRows.find(function (x) {
+              return x && x.id === v && (!sessionOverrideState.providerId || x.providerId === sessionOverrideState.providerId)
+            })
+          : null
+        composerModelInput.title = entry
+          ? 'session 级模型覆盖（服务商 · 模型）：' + entry.display
+          : 'session 级模型覆盖（模型 ID，需与配置一致）：' + v
       }
 
       function syncModelStateToEnv() {
         const env = getSessionOverrideEnv()
-        const model = typeof sessionOverrideState.model === 'string'
-          ? sessionOverrideState.model.trim()
-          : ''
+        const model = typeof sessionOverrideState.model === 'string' ? sessionOverrideState.model.trim() : ''
+        const providerId =
+          typeof sessionOverrideState.providerId === 'string'
+            ? sessionOverrideState.providerId.trim()
+            : ''
+        env[LLM_PROVIDER_ID_KEY] = providerId
         env[LLM_MODEL_KEY] = model
       }
 
@@ -6044,6 +5999,7 @@
       function resetSessionOverrideStateToDefault() {
         const defaults = buildDefaultSessionOverrideState()
         sessionOverrideState = {
+          providerId: defaults.providerId,
           model: defaults.model,
           env: Object.assign({}, defaults.env),
         }
@@ -6075,6 +6031,10 @@
               )
             : {}
           sessionOverrideState = {
+            providerId:
+              typeof ovEnv[LLM_PROVIDER_ID_KEY] === 'string'
+                ? String(ovEnv[LLM_PROVIDER_ID_KEY]).trim()
+                : defaults.providerId,
             model:
               typeof ovEnv[LLM_MODEL_KEY] === 'string'
                 ? String(ovEnv[LLM_MODEL_KEY]).trim()
@@ -6102,6 +6062,10 @@
         const env = getSessionOverrideEnv()
         const patchEnv = {}
         const defaults = buildDefaultSessionOverrideState()
+        patchEnv[LLM_PROVIDER_ID_KEY] =
+          typeof sessionOverrideState.providerId === 'string'
+            ? sessionOverrideState.providerId.trim()
+            : defaults.providerId
         patchEnv[LLM_MODEL_KEY] =
           typeof sessionOverrideState.model === 'string'
             ? sessionOverrideState.model.trim()
@@ -6317,6 +6281,7 @@
               isolation: '',
               whentouse: '',
               env: {},
+              llmProviders: [],
             }
             renderBindChips()
             syncModelInputFromState()
@@ -6353,6 +6318,9 @@
                   : '',
               whentouse: typeof c.whentouse === 'string' ? c.whentouse : '',
               env: c.env && typeof c.env === 'object' ? Object.fromEntries(Object.entries(c.env).map(function (kv) { return [String(kv[0]), String(kv[1])] })) : {},
+              llmProviders: Array.isArray(c.llmProviders)
+                ? cloneLlmProvidersDraft(c.llmProviders)
+                : [],
             }
           } else {
             agentConfigState = {
@@ -6368,6 +6336,7 @@
               isolation: '',
               whentouse: '',
               env: {},
+              llmProviders: [],
             }
           }
           if (body.agent && Array.isArray(body.agent.agentTeamMembers)) {
@@ -7623,6 +7592,7 @@
             ev.preventDefault()
             ev.stopPropagation()
             closeRepoManageView()
+            closeAgentSettingsView()
             const items = sidebarNavEl.querySelectorAll('.sidebar-nav-row')
             for (let i = 0; i < items.length; i++) {
               items[i].classList.toggle('is-active', items[i] === btn)
@@ -7644,6 +7614,7 @@
             ev.preventDefault()
             ev.stopPropagation()
             closeRepoManageView()
+            closeAgentSettingsView()
             const items = sidebarNavEl.querySelectorAll('.sidebar-nav-row')
             for (let i = 0; i < items.length; i++) {
               items[i].classList.toggle('is-active', items[i] === btn)
@@ -7872,6 +7843,7 @@
           ev.preventDefault()
           ev.stopPropagation()
           closeRepoManageView()
+          closeAgentSettingsView()
           if (sidebarNavEl) {
             const items = sidebarNavEl.querySelectorAll('.sidebar-nav-row')
             for (let i = 0; i < items.length; i++) {
@@ -7960,40 +7932,40 @@
         }
       }
 
-      function closeAgentEnvModal() {
-        if (!agentEnvModal) return
-        agentEnvModal.classList.remove('is-open')
-        agentEnvModal.setAttribute('aria-hidden', 'true')
-        document.body.style.overflow = ''
-        if (agentEnvModalCard) {
-          agentEnvModalCard.removeAttribute('aria-label')
-          agentEnvModalCard.setAttribute('aria-labelledby', 'agentEnvModalTitle')
-        }
-        if (agentEnvSessionTabStrip) agentEnvSessionTabStrip.setAttribute('hidden', '')
-        if (agentEnvSessionTabList) agentEnvSessionTabList.innerHTML = ''
-      }
-
       function syncAgentEnvTabPanels() {
-        if (!agentEnvPanelEnv || !agentEnvPanelAgentMd || !agentEnvPanelSettings) return
-        agentEnvPanelEnv.hidden = agentEnvActiveTab !== 'env'
+        if (!agentEnvPanelUnified || !agentEnvPanelAgentMd) return
+        agentEnvPanelUnified.hidden = agentEnvActiveTab !== 'settings'
         agentEnvPanelAgentMd.hidden = agentEnvActiveTab !== 'agentMd'
-        agentEnvPanelSettings.hidden = agentEnvActiveTab !== 'settings'
-      }
-      function renderAgentEnvHeaderTabs() {
-        renderHeaderTabsIn(
-          agentEnvSessionTabList,
-          [
-            { id: 'env', label: '环境变量' },
-            { id: 'agentMd', label: '编辑 agent.md' },
-            { id: 'settings', label: '设置' },
-          ],
-          agentEnvActiveTab,
-          function (id) {
-            agentEnvActiveTab = id
-            renderAgentEnvHeaderTabs()
+      }
+
+      /** 渲染左侧配置导航（样式对齐文件管理目录树） */
+      function renderAgentSettingsNav() {
+        if (!agentEnvSessionTabList) return
+        agentEnvSessionTabList.innerHTML = ''
+        const tabs = [
+          { id: 'settings', label: '设置' },
+          { id: 'agentMd', label: '编辑 agent.md' },
+        ]
+        for (let i = 0; i < tabs.length; i++) {
+          const tab = tabs[i]
+          const btn = document.createElement('button')
+          btn.type = 'button'
+          btn.className =
+            'agent-settings-nav-item' + (tab.id === agentEnvActiveTab ? ' is-selected' : '')
+          btn.setAttribute('role', 'tab')
+          btn.setAttribute('aria-selected', tab.id === agentEnvActiveTab ? 'true' : 'false')
+          btn.textContent = tab.label
+          btn.addEventListener('click', function () {
+            if (agentEnvActiveTab === tab.id) return
+            agentEnvActiveTab = tab.id
+            renderAgentSettingsNav()
             syncAgentEnvTabPanels()
-          },
-        )
+            if (tab.id === 'agentMd') {
+              void loadAgentEnvAgentMdFromApi()
+            }
+          })
+          agentEnvSessionTabList.appendChild(btn)
+        }
       }
 
       function loadAgentEnvAgentMdFromApi() {
@@ -8044,27 +8016,21 @@
           })
       }
 
-      function openAgentEnvModal(initialTab) {
-        if (!agentEnvModal) return
-        if (initialTab === 'env' || initialTab === 'agentMd' || initialTab === 'settings') {
+      function openAgentSettingsView(initialTab) {
+        if (!agentSettingsView) return
+        closeRepoManageView()
+        if (initialTab === 'agentMd' || initialTab === 'settings') {
           agentEnvActiveTab = initialTab
         } else {
-          agentEnvActiveTab = 'env'
+          agentEnvActiveTab = 'settings'
         }
         const envObj =
           agentConfigState.env && typeof agentConfigState.env === 'object'
             ? agentConfigState.env
             : {}
         agentEnvFieldValues = buildAgentEnvFieldValues(envObj)
-        if (agentEnvModalCard) {
-          agentEnvModalCard.setAttribute('aria-label', '环境变量、编辑 agent.md 与设置')
-          agentEnvModalCard.removeAttribute('aria-labelledby')
-        }
-        if (agentEnvSessionTabStrip) {
-          agentEnvSessionTabStrip.setAttribute('aria-label', '环境变量、编辑 agent.md、设置')
-          agentEnvSessionTabStrip.removeAttribute('hidden')
-        }
-        /** 每次打开设置弹窗都拉最新 schema，避免后端新增字段后页面仍用旧缓存。 */
+        setAgentSettingsVisible(true)
+        /** 每次进入设置页都拉最新 schema，避免后端新增字段后页面仍用旧缓存。 */
         void loadProjectEnvDefaults().then(function () {
           const latestEnvObj =
             agentConfigState.env && typeof agentConfigState.env === 'object'
@@ -8073,104 +8039,188 @@
           agentEnvFieldValues = buildAgentEnvFieldValues(latestEnvObj)
           renderAgentEnvList()
         })
-        renderAgentEnvHeaderTabs()
+        renderAgentSettingsNav()
         syncAgentEnvTabPanels()
-        agentEnvModal.classList.add('is-open')
-        agentEnvModal.setAttribute('aria-hidden', 'false')
-        document.body.style.overflow = 'hidden'
+        initLlmProvidersSettingsUi()
         renderAgentEnvList()
-        if (agentEnvWhenToUseInput) {
-          agentEnvWhenToUseInput.value = typeof agentConfigState.whentouse === 'string'
+        const whenInput = queryAgentEnvWhenToUseInput()
+        if (whenInput) {
+          whenInput.value = typeof agentConfigState.whentouse === 'string'
             ? agentConfigState.whentouse
             : ''
         }
-        if (agentEnvAgentTypeInput) {
-          agentEnvAgentTypeInput.value = currentAgentParam()
-        }
-        if (agentEnvToolsInput) {
-          agentEnvToolsInput.value = Array.isArray(agentConfigState.tools)
-            ? agentConfigState.tools.join('\n')
-            : ''
-        }
-        if (agentEnvModelInput) {
-          agentEnvModelInput.value = typeof agentConfigState.model === 'string'
-            ? agentConfigState.model
-            : ''
-        }
-        syncAgentEffortSelectValue(agentConfigState.effort)
-        if (agentEnvBackgroundInput) {
-          agentEnvBackgroundInput.value = agentConfigState.background === true ? 'true' : 'false'
-        }
-        if (agentEnvIsolationInput) {
-          const nextIsolation =
-            agentConfigState.isolation === 'worktree' || agentConfigState.isolation === 'remote'
-              ? agentConfigState.isolation
-              : ''
-          agentEnvIsolationInput.value = nextIsolation
-        }
-        void renderAgentEnvTeamMembers()
         void loadAgentEnvAgentMdFromApi()
       }
 
       /**
-       * 将 effort 下拉框值转换为后端可接受的类型。
-       * 业务逻辑：
-       * 1) 空值表示不设置 effort，统一写回 null；
-       * 2) low/medium/high/max 直接透传；
-       * 3) 兼容历史整数值（旧版本允许手输整数），继续转成 number 写回；
-       * 4) 其他值视为非法，阻止保存并提示。
+       * 深拷贝 agent.json.llmProviders 到设置页草稿。
        */
-      function parseAgentEffortFromInput(raw) {
-        const v = String(raw || '').trim()
-        if (!v) {
-          return { ok: true, value: null }
+      function cloneLlmProvidersDraft(raw) {
+        const list = Array.isArray(raw) ? raw : []
+        return list.map(function (p) {
+          const models = Array.isArray(p.models) ? p.models : []
+          return {
+            id: typeof p.id === 'string' ? p.id.trim() : '',
+            name: typeof p.name === 'string' ? p.name.trim() : '',
+            baseUrl: typeof p.baseUrl === 'string' ? p.baseUrl.trim() : '',
+            apiKey: typeof p.apiKey === 'string' ? p.apiKey : '',
+            authToken: typeof p.authToken === 'string' ? p.authToken : '',
+            provider: p.provider === 'anthropic' ? 'anthropic' : 'openai',
+            models: models.map(function (m) {
+              return {
+                id: typeof m.id === 'string' ? m.id.trim() : '',
+                label: typeof m.label === 'string' ? m.label.trim() : '',
+              }
+            }),
+            defaultModel: typeof p.defaultModel === 'string' ? p.defaultModel.trim() : '',
+          }
+        })
+      }
+
+      function clearLlmProviderForm() {
+        if (llmFormId) llmFormId.value = ''
+        if (llmFormName) llmFormName.value = ''
+        if (llmFormProvider) llmFormProvider.value = 'openai'
+        if (llmFormBaseUrl) llmFormBaseUrl.value = ''
+        if (llmFormApiKey) llmFormApiKey.value = ''
+        if (llmFormAuthToken) llmFormAuthToken.value = ''
+        if (llmFormModelId) llmFormModelId.value = ''
+        if (llmFormModelLabel) llmFormModelLabel.value = ''
+      }
+
+      /**
+       * 从添加表单读取一条服务商配置；校验失败返回错误文案。
+       */
+      function readLlmProviderFromForm() {
+        const id = llmFormId ? String(llmFormId.value || '').trim() : ''
+        const name = llmFormName ? String(llmFormName.value || '').trim() : ''
+        const provider =
+          llmFormProvider && llmFormProvider.value === 'anthropic' ? 'anthropic' : 'openai'
+        const baseUrl = llmFormBaseUrl ? String(llmFormBaseUrl.value || '').trim() : ''
+        const apiKey = llmFormApiKey ? String(llmFormApiKey.value || '').trim() : ''
+        const authToken = llmFormAuthToken ? String(llmFormAuthToken.value || '').trim() : ''
+        const modelId = llmFormModelId ? String(llmFormModelId.value || '').trim() : ''
+        const modelLabel = llmFormModelLabel ? String(llmFormModelLabel.value || '').trim() : ''
+        if (!id) return { ok: false, message: '请填写服务商 ID' }
+        if (!/^[A-Za-z0-9_-]+$/.test(id)) {
+          return { ok: false, message: '服务商 id 仅允许字母数字下划线中划线' }
+        }
+        if (llmProvidersDraft.some(function (p) {
+          return p.id === id
+        })) {
+          return { ok: false, message: '服务商 id 已存在: ' + id }
+        }
+        if (!name) return { ok: false, message: '请填写展示名称' }
+        if (!baseUrl) return { ok: false, message: '请填写 Base URL' }
+        if (!apiKey && !authToken) {
+          return { ok: false, message: 'API Key 与 Auth Token 至少填写一项' }
+        }
+        if (!modelId) return { ok: false, message: '请填写模型 ID' }
+        return {
+          ok: true,
+          entry: {
+            id: id,
+            name: name,
+            baseUrl: baseUrl,
+            apiKey: apiKey,
+            authToken: authToken,
+            provider: provider,
+            models: [{ id: modelId, label: modelLabel }],
+            defaultModel: modelId,
+          },
         }
-        const lower = v.toLowerCase()
-        if (lower === 'low' || lower === 'medium' || lower === 'high' || lower === 'max') {
-          return { ok: true, value: lower }
+      }
+
+      function renderLlmProvidersList() {
+        if (!llmProvidersList) return
+        llmProvidersList.innerHTML = ''
+        if (llmProvidersEmptyHint) {
+          llmProvidersEmptyHint.hidden = llmProvidersDraft.length > 0
         }
-        if (/^-?\d+$/.test(v)) {
-          return { ok: true, value: Number(v) }
+        for (let i = 0; i < llmProvidersDraft.length; i++) {
+          const p = llmProvidersDraft[i]
+          const li = document.createElement('li')
+          li.className = 'llm-provider-list-item'
+
+          const nameWrap = document.createElement('span')
+          nameWrap.className = 'llm-provider-list-name'
+          nameWrap.textContent = p.name || p.id
+          if (i === 0) {
+            const badge = document.createElement('span')
+            badge.className = 'llm-provider-list-default'
+            badge.textContent = '默认'
+            nameWrap.appendChild(badge)
+          }
+
+          const removeBtn = document.createElement('button')
+          removeBtn.type = 'button'
+          removeBtn.className = 'llm-provider-list-remove'
+          removeBtn.textContent = '删除'
+          removeBtn.addEventListener('click', function () {
+            llmProvidersDraft.splice(i, 1)
+            renderLlmProvidersList()
+          })
+
+          li.appendChild(nameWrap)
+          li.appendChild(removeBtn)
+          llmProvidersList.appendChild(li)
         }
-        return { ok: false, message: 'effort 仅支持 low/medium/high/max 或整数' }
+      }
+
+      function initLlmProvidersSettingsUi() {
+        llmProvidersDraft = cloneLlmProvidersDraft(agentConfigState.llmProviders)
+        clearLlmProviderForm()
+        renderLlmProvidersList()
       }
 
       /**
-       * 同步 effort 下拉框可选项并回填当前值。
-       * 业务逻辑：
-       * 1) 常规场景只展示固定档位（low/medium/high/max）；
-       * 2) 若 agent.json 中已有历史整数值，为避免用户打开弹窗后被意外清空，
-       *    动态追加一个“当前值”选项用于承载该值；
-       * 3) 每次打开弹窗先清理旧的动态选项，防止重复追加。
+       * 保存前校验 llmProviders 草稿；首项为默认厂商，允许空数组。
        */
-      function syncAgentEffortSelectValue(rawEffort) {
-        if (!agentEnvEffortInput) return
-        const dynamicOptions = agentEnvEffortInput.querySelectorAll('option[data-dynamic-effort="true"]')
-        dynamicOptions.forEach(function (opt) {
-          if (opt && opt.parentNode) {
-            opt.parentNode.removeChild(opt)
+      function validateLlmProvidersDraftForSave(providers) {
+        const list = Array.isArray(providers) ? providers : []
+        if (!list.length) return ''
+        const seenIds = new Set()
+        for (let i = 0; i < list.length; i++) {
+          const p = list[i]
+          const id = String(p.id || '').trim()
+          if (!id) return '第 ' + (i + 1) + ' 个服务商缺少 id'
+          if (!/^[A-Za-z0-9_-]+$/.test(id)) {
+            return '服务商 id "' + id + '" 仅允许字母数字下划线中划线'
+          }
+          if (seenIds.has(id)) return '服务商 id 重复: ' + id
+          seenIds.add(id)
+          if (!String(p.name || '').trim()) return '服务商 "' + id + '" 缺少展示名称'
+          if (!String(p.baseUrl || '').trim()) return '服务商 "' + id + '" 缺少 baseUrl'
+          if (p.provider !== 'anthropic' && p.provider !== 'openai') {
+            return '服务商 "' + id + '" 协议类型非法'
+          }
+          const apiKeyOk =
+            p.apiKey === LLM_MASKED_CREDENTIAL || String(p.apiKey || '').trim().length > 0
+          const authTokenOk =
+            p.authToken === LLM_MASKED_CREDENTIAL ||
+            String(p.authToken || '').trim().length > 0
+          if (!apiKeyOk && !authTokenOk) {
+            return '服务商 "' + id + '" 需配置 API Key 或 Auth Token 至少一项'
+          }
+          if (!Array.isArray(p.models) || p.models.length === 0) {
+            return '服务商 "' + id + '" 至少配置 1 个模型'
+          }
+          for (let j = 0; j < p.models.length; j++) {
+            if (!String(p.models[j].id || '').trim()) {
+              return '服务商 "' + id + '" 第 ' + (j + 1) + ' 个模型缺少 id'
+            }
           }
-        })
-        if (rawEffort === null || rawEffort === undefined || String(rawEffort).trim() === '') {
-          agentEnvEffortInput.value = 'low'
-          return
-        }
-        const raw = String(rawEffort).trim()
-        const lower = raw.toLowerCase()
-        if (lower === 'low' || lower === 'medium' || lower === 'high' || lower === 'max') {
-          agentEnvEffortInput.value = lower
-          return
-        }
-        if (/^-?\d+$/.test(raw)) {
-          const opt = document.createElement('option')
-          opt.value = raw
-          opt.textContent = '当前值：' + raw + '（历史整数）'
-          opt.setAttribute('data-dynamic-effort', 'true')
-          agentEnvEffortInput.appendChild(opt)
-          agentEnvEffortInput.value = raw
-          return
+          const defaultModel = String(p.defaultModel || '').trim() || p.models[0].id
+          if (
+            !p.models.some(function (m) {
+              return m.id === defaultModel
+            })
+          ) {
+            return '服务商 "' + id + '" 默认模型不在模型列表中'
+          }
+          p.defaultModel = defaultModel
         }
-        agentEnvEffortInput.value = 'low'
+        return ''
       }
 
       function openAgentMdModal() {
@@ -8244,30 +8294,11 @@
           btnAgentEnvSave.disabled = true
         }
         try {
-          const whentouseValue = agentEnvWhenToUseInput
-            ? String(agentEnvWhenToUseInput.value || '')
-            : ''
-          const nextModel = agentEnvModelInput
-            ? String(agentEnvModelInput.value || '').trim()
-            : ''
-          const effortParsed = parseAgentEffortFromInput(
-            agentEnvEffortInput ? agentEnvEffortInput.value : '',
-          )
-          if (!effortParsed.ok) {
-            window.alert(effortParsed.message)
-            return
-          }
-          const nextBackground =
-            agentEnvBackgroundInput && agentEnvBackgroundInput.value === 'true'
-          const nextIsolationRaw = agentEnvIsolationInput
-            ? String(agentEnvIsolationInput.value || '').trim()
-            : ''
-          if (
-            nextIsolationRaw !== '' &&
-            nextIsolationRaw !== 'worktree' &&
-            nextIsolationRaw !== 'remote'
-          ) {
-            window.alert('isolation 仅支持 worktree/remote 或留空')
+          const whenInput = queryAgentEnvWhenToUseInput()
+          const whentouseValue = whenInput ? String(whenInput.value || '') : ''
+          const llmErr = validateLlmProvidersDraftForSave(llmProvidersDraft)
+          if (llmErr) {
+            window.alert('LLM：' + llmErr)
             return
           }
           const patchBody = {
@@ -8277,12 +8308,17 @@
               mcpServers: agentConfigState.mcpServers.slice(),
               skills: agentConfigState.skills.slice(),
               agentTeams: agentConfigState.agentTeams.slice(),
-              model: nextModel,
-              effort: effortParsed.value,
-              background: nextBackground,
-              isolation: nextIsolationRaw,
+              model: typeof agentConfigState.model === 'string' ? agentConfigState.model : '',
+              effort: agentConfigState.effort,
+              background: agentConfigState.background === true,
+              isolation:
+                agentConfigState.isolation === 'worktree' ||
+                agentConfigState.isolation === 'remote'
+                  ? agentConfigState.isolation
+                  : '',
               whentouse: whentouseValue,
               env: checked.env,
+              llmProviders: cloneLlmProvidersDraft(llmProvidersDraft),
             },
           }
           const includeAgentMd =
@@ -8299,14 +8335,14 @@
             return {}
           })
           if (!r.ok) {
-            window.alert('保存失败：' + (body.message || body.error || r.statusText))
+            window.alert(
+              'Agent 配置保存失败：' + (body.message || body.error || r.statusText),
+            )
             return
           }
+          void refreshModelCatalogFromApi(true)
           agentConfigState.env = Object.assign({}, checked.env)
-          agentConfigState.model = nextModel
-          agentConfigState.effort = effortParsed.value
-          agentConfigState.background = nextBackground
-          agentConfigState.isolation = nextIsolationRaw
+          agentConfigState.llmProviders = cloneLlmProvidersDraft(llmProvidersDraft)
           agentConfigState.whentouse = whentouseValue
           syncPermissionModeSelectFromState()
           if (includeAgentMd) {
@@ -8318,15 +8354,15 @@
                 window.alert('已保存到磁盘，但同步提示词到当前连接失败: ' + e)
               }
             }
-            restartCurrentSessionSubprocessWithReason('save-agent-env-prompt')
+            restartCurrentSessionSubprocessWithReason('save-agent-settings-prompt')
           } else {
-            restartCurrentSessionSubprocessWithReason('save-agent-env')
+            restartCurrentSessionSubprocessWithReason('save-agent-settings')
           }
-          closeAgentEnvModal()
+          closeAgentSettingsView()
           setStatus('已保存', serverReady ? 'ready' : '')
           window.alert('已保存到磁盘，并已重连 / 尝试同步当前 session。')
         } catch (e) {
-          window.alert('保存失败: ' + e)
+          window.alert(String(e && e.message ? e.message : e))
         } finally {
           if (btnAgentEnvSave) {
             btnAgentEnvSave.disabled = false
@@ -8372,7 +8408,7 @@
       }
       if (btnEditAgentEnv) {
         btnEditAgentEnv.addEventListener('click', function () {
-          openAgentEnvModal('env')
+          openAgentSettingsView('settings')
         })
       }
       if (btnSkillPackageManager) {
@@ -8621,23 +8657,24 @@
           openToolFilesModal()
         })
       }
-      if (btnAgentEnvModalClose) {
-        btnAgentEnvModalClose.addEventListener('click', closeAgentEnvModal)
-      }
       if (btnAgentEnvCancel) {
-        btnAgentEnvCancel.addEventListener('click', closeAgentEnvModal)
-      }
-      if (agentEnvModalBackdrop) {
-        agentEnvModalBackdrop.addEventListener('click', closeAgentEnvModal)
+        btnAgentEnvCancel.addEventListener('click', closeAgentSettingsView)
       }
       if (btnAgentEnvSave) {
         btnAgentEnvSave.addEventListener('click', function () {
           void saveAgentEnvAndReconnect()
         })
       }
-      if (btnAgentEnvAddTeamMember) {
-        btnAgentEnvAddTeamMember.addEventListener('click', function () {
-          void addAgentEnvTeamMember()
+      if (btnLlmProvidersAdd) {
+        btnLlmProvidersAdd.addEventListener('click', function () {
+          const parsed = readLlmProviderFromForm()
+          if (!parsed.ok) {
+            window.alert(parsed.message)
+            return
+          }
+          llmProvidersDraft.push(parsed.entry)
+          clearLlmProviderForm()
+          renderLlmProvidersList()
         })
       }
       if (btnAgentMdModalClose) {
@@ -8705,10 +8742,6 @@
           closeSkillMdModal()
           return
         }
-        if (agentEnvModal && agentEnvModal.classList.contains('is-open')) {
-          closeAgentEnvModal()
-          return
-        }
         if (scheduleRunsModal && scheduleRunsModal.classList.contains('is-open')) {
           closeScheduleRunsModal()
           return
@@ -8758,6 +8791,9 @@
         void bootstrapSessionSelection()
         void refreshModelCatalogFromApi(true)
         void loadAgentConfig()
+        if (isAgentSettingsViewActive()) {
+          openAgentSettingsView(agentEnvActiveTab)
+        }
       }
       if (agentIdInput) {
         agentIdInput.addEventListener('change', onAgentChanged)