dsh-cliproxyapi-pro 1.6.0 → 1.7.0

package/lib/client.js

@@ -26,6 +26,9 @@ window.__ModuleLoader__.load({
       updateCheck: "api/dsh-cliproxyapi/updates/check",
       updateSave: "api/dsh-cliproxyapi/updates/save",
       updateDownload: "api/dsh-cliproxyapi/updates/download",
+      quotaStatus: "api/dsh-cliproxyapi/quota/status",
+      quotaRefresh: "api/dsh-cliproxyapi/quota/refresh",
+      quotaSave: "api/dsh-cliproxyapi/quota/save",
     };
 
     // Public, versioned dshmarket Update API (UPDATE-API-V1.md in dshmarket).
@@ -41,48 +44,32 @@ window.__ModuleLoader__.load({
 
     const zh = {
       nav: "CLIProxyAPI",
-      title: "CLIProxyAPI 自动发现与模型筛选",
-      subtitle:
-        "自动连接 CLIProxyAPI 服务，勾选你希望在对话框模型选择器中显示的模型，自动同步上下文长度、视觉与推理档位。",
       statusConnected: "已连接并同步",
       statusProbing: "正在探测同步…",
       statusError: "连接异常",
       statusDisabled: "已停用",
       statusIdle: "等待同步",
-      endpointLabel: "当前活动节点",
-      endpointNone: "未连接（将依次尝试配置地址与本地 8317 端口）",
-      modelsCountLabel: "选择器展示模型",
-      refreshedAtLabel: "上次同步时间",
       refreshBtn: "立即探测刷新",
       refreshingBtn: "正在探测…",
-      saveBtn: "保存设置并应用",
+      saveBtn: "保存并应用",
       savingBtn: "正在应用…",
-      saveSelectionBtn: "保存模型勾选",
-      unsavedChanges: "有未保存的勾选更改",
+      unsavedChanges: "有未保存的更改",
       savedToast: "已保存并同步到对话框模型选择器",
-      sectionConnection: "连接与认证配置",
       accountsLabel: "账号",
       addAccountBtn: "+ 添加账号",
-      addingAccountBtn: "正在添加…",
       removeAccountBtn: "删除此账号",
       removeConfirm: "确定删除账号「{name}」吗？它同步到模型选择器中的模型路由也会一并移除（已保存的密钥不会删除）。",
-      noAccounts: "还没有任何账号。点击「添加账号」接入一个 CLIProxyAPI 服务。",
-      accountOffBadge: "未启用",
-      addedToast: "已添加新账号（默认未启用）。填写服务地址与密钥后，打开「启用此账号」并保存。",
+      addedToast: "账号已添加并启用，已按每个家族勾选最新模型。",
       removedToast: "账号已删除，其模型已从模型选择器中移除",
-      disabledHint:
-        "该账号未启用，它的模型不会出现在对话框模型选择器中。可先填写地址与密钥并点击「立即探测刷新」预览模型列表，勾选后再开启「启用此账号」。",
+      disabledHint: "未启用：模型不在模型选择器中，配置已保留。",
       enabledLabel: "启用此账号",
-      enabledHint: "开启后将该账号下勾选的模型同步到 DSH 对话框模型选择器；关闭后保留配置，但移除该账号的模型。",
-      baseUrlLabel: "CLIProxyAPI 服务地址 (Base URL)",
-      baseUrlPlaceholder: "留空则自动继承现有路由或探测 http://127.0.0.1:8317",
-      baseUrlHint: "支持填写根地址（如 http://127.0.0.1:8317 或远程 IP:8317），无需手动拼接 /v1。",
-      apiKeyLabel: "API Key 密钥",
+      enabledHint: "开启后，该账号勾选的模型会出现在对话框模型选择器中；关闭后移除这些模型，配置保留。",
+      baseUrlLabel: "服务地址",
+      baseUrlPlaceholder: "如 http://127.0.0.1:8317，无需加 /v1；留空自动发现",
+      apiKeyLabel: "API Key",
       apiKeySetPlaceholder: "已配置密钥（留空保持不变，输入新值可覆盖）",
       apiKeyUnsetPlaceholder: "输入 CLIProxyAPI 访问密钥（本地免密模式可留空）",
-      apiKeyHint: "密钥通过 DSH 凭证服务安全存储在 .credentials.yaml 中，绝不明文写入配置文件。",
-      apiKeyConfiguredBadge: "密钥已配置",
-      apiKeyUnsetBadge: "未设置密钥",
+      apiKeyHint: "保存在 DSH 凭证服务（{ref}），不会写入配置文件。本地免密的 CPA 可留空。",
       clearKeyBtn: "清除密钥",
       protocolLabel: "接口协议",
       protocolHint: "自动模式下每个模型走所属家族的原生协议，减少 CPA 中转转换；Gemini 等 DSH 不支持原生协议的模型走 OpenAI Chat。",
@@ -95,22 +82,19 @@ window.__ModuleLoader__.load({
       modelProtocolDefault: "跟随全局设置",
       modelProtocolHint: "原生协议：",
       sectionAdvanced: "高级路由与规则过滤",
-      providerIdLabel: "DSH 路由 ID (Provider)",
+      providerIdLabel: "路由 ID",
       providerIdHint: "写入 llm-pi-ai 的提供商路由标识，每个账号必须不同（首个账号默认 cli-proxy，与现有配置无缝衔接）。",
-      apiKeyEnvLabel: "密钥引用名 (Credential Ref)",
+      apiKeyEnvLabel: "密钥引用名",
       apiKeyEnvHint: "密钥在 DSH 凭证服务中的名称，每个账号建议使用不同的引用名。",
-      displayNameLabel: "账号名称 (Display Name)",
+      displayNameLabel: "账号名称",
       displayNameHint: "用于区分账号，并作为 DSH 对话框模型选择器中的分组名称。",
-      includePrefixLabel: "仅包含模型关键词 (可选)",
+      includePrefixLabel: "仅包含关键词",
       includePrefixPlaceholder: "例如: gpt-6, claude-opus, gemini-4 (多个用逗号分隔)",
       includePrefixHint: "附加规则：只允许模型 ID 包含指定关键词的模型。",
-      excludePrefixLabel: "排除模型关键词 (可选)",
+      excludePrefixLabel: "排除关键词",
       excludePrefixPlaceholder: "例如: tts, image, video, zj/ (多个用逗号分隔)",
       excludePrefixHint: "附加规则：排除包含指定关键词的模型 ID。",
-      refreshIntervalLabel: "自动刷新间隔 (秒，所有账号共用)",
-      sectionModels: "模型显示筛选（仅勾选的模型会在回答选择器中显示）",
-      sectionModelsHint:
-        "点击模型行即可勾选或取消。不勾选任何模型（全部清空）时默认不限制；勾选后仅展示选中的模型。",
+      refreshIntervalLabel: "自动刷新间隔",
       searchModelsPlaceholder: "搜索模型 ID 或名称（如 claude-opus, gpt-6, gemini-4, swe）…",
       filterAll: "全部发现",
       filterSelected: "已勾选",
@@ -119,7 +103,7 @@ window.__ModuleLoader__.load({
       selectAllVisibleBtn: "全选当前列表",
       deselectAllVisibleBtn: "取消当前列表",
       selectRecommendedBtn: "恢复推荐精选",
-      selectRecommendedHint: "按该服务的模型目录，每个模型家族勾选最新的一个",
+      selectRecommendedHint: "按该服务的模型目录，每个模型家族勾选最新的一个。",
       badgeVision: "视觉 Image",
       badgeReasoning: "推理",
        badgeSelected: "已启用",
@@ -133,7 +117,7 @@ window.__ModuleLoader__.load({
       imageInputLabel: "支持图片输入",
       reasoningLevelsLabel: "思考等级",
       resetParamsBtn: "恢复自动探测",
-      paramsHint: "留空并保存即恢复 CLIProxyAPI 自动探测值。修改后请点击「保存模型勾选」才会写入模型选择器。",
+      paramsHint: "留空并保存即恢复 CLIProxyAPI 自动探测值。",
       discoveredValue: "探测值",
       updateTitle: "插件更新",
       updatePageHint: "这里只管理插件自身的更新。CLIProxyAPI 的账号、模型和协议设置位于「设置」左侧导航的「CLIProxyAPI」页。",
@@ -255,52 +239,147 @@ window.__ModuleLoader__.load({
       updateMarketFailed: "插件市场安装失败。可在插件市场中查看详情，稍后重试，或使用离线包下载。",
       updateAutoInstallLabel: "自动安装更新",
       updateAutoInstallHint: "自动检查发现新版本后，通过 DSH 插件市场自动安装（需开启自动检查并安装 dshmarket，仅在 DSH 页面打开时进行；同一版本 6 小时内最多尝试一次）。生效可能需要重启 DSH 或刷新页面。",
+      tabsLabel: "账号页面",
+      tabSettings: "设置",
+      tabQuota: "额度",
+      qTitle: "CPA 渠道额度",
+      qSubtitle: "填写管理密钥后，查看 CPA 上每个渠道凭证的剩余额度；对话框模型选择器旁也会显示当前模型的额度。",
+      qAccountsLabel: "选择账号",
+      qNoAccounts: "还没有 CLIProxyAPI 账号，请先在「设置」页添加并连接。",
+      qAccountDisabled: "账号未启用",
+      qKeyLabel: "管理密钥",
+      qKeyHint: "保存在 DSH 凭证服务（{ref}），只由宿主使用，不会返回到页面。远程 CPA 需开启 remote-management.allow-remote。",
+      qKeySetPlaceholder: "已保存管理密钥（留空保持不变，输入新值可覆盖）",
+      qKeyUnsetPlaceholder: "CPA 配置中的 remote-management.secret-key",
+      qKeySave: "保存",
+      qKeySaving: "正在保存…",
+      qKeyClear: "清除密钥",
+      qKeyClearConfirm: "确定清除账号「{name}」的管理密钥吗？清除后不再读取它的额度。",
+      qKeyStatusSet: "已配置",
+      qKeyStatusUnset: "未配置",
+      qDataLabel: "额度数据",
+      qTotalCreds: "{n} 个凭证",
+      qKeySaved: "管理密钥已保存",
+      qKeyCleared: "管理密钥已清除",
+      qRefresh: "刷新额度",
+      qRefreshing: "正在刷新…",
+      qUpdated: "{time}更新",
+      qNeverUpdated: "尚未读取额度",
+      qAgoJustNow: "刚刚",
+      qAgoSeconds: "{n} 秒前",
+      qAgoMinutes: "{n} 分钟前",
+      qAgoHours: "{n} 小时前",
+      qAgoDays: "{n} 天前",
+      qStatHealthy: "充足",
+      qStatLow: "偏低",
+      qStatEmpty: "耗尽",
+      qStatIssue: "停用/异常",
+      qStatUnknown: "无额度数据",
+      qFilterAll: "全部渠道",
+      qSearchPlaceholder: "搜索邮箱、名称或模型…",
+      qNoCredentials: "该 CPA 服务器上没有凭证（auth files）。",
+      qNoMatch: "没有符合筛选条件的凭证。",
+      qShowModels: "服务 {n} 个模型",
+      qHideModels: "收起模型列表",
+      qModelsUnknown: "模型列表不可用",
+      qStatusActive: "可用",
+      qStatusDisabled: "已停用",
+      qStatusUnavailable: "暂不可用",
+      qStatusError: "异常",
+      qQuotaUnsupported: "此渠道没有可查询的额度接口，仅显示账号状态",
+      qQuotaError: "额度查询失败",
+      qQuotaNone: "上游未返回额度窗口",
+      qRecent: "近期请求：成功 {success} · 失败 {failed}",
+      qWin5h: "5 小时",
+      qWin7d: "每周",
+      qWin30d: "每月",
+      qWin1d: "每日",
+      qWinOther: "额度",
+      qResetIn: "{time}后重置",
+      qResetSoon: "即将重置",
+      qDurDH: "{d}天{h}小时",
+      qDurHM: "{h}小时{m}分",
+      qDurM: "{m}分钟",
+      qErrUnauthorized: "管理密钥无效（401）。为避免 CPA 因错误密钥封禁地址，已暂停自动刷新；更新密钥或手动刷新后重试。",
+      qErrForbidden: "CPA 拒绝了管理请求（403）：请确认 CPA 已开启 remote-management.allow-remote，且密钥正确。",
+      qErrNetwork: "无法连接 CPA 管理接口，请检查服务地址与网络。",
+      qErrTimeout: "CPA 管理接口响应超时，请稍后重试。",
+      qErrHttp: "CPA 管理接口返回错误（HTTP {status}）。",
+      qErrInvalid: "CPA 管理接口返回了无法识别的数据。",
+      qErrNoEndpoint: "该账号还没有可用的服务地址，请先在「设置」页连接 CPA。",
+      qErrLoad: "无法读取额度数据：{error}",
+      qStale: "以下为上次成功读取的数据。",
+      qMapTitle: "模型 → 渠道",
+      qMapHint: "该账号同步到模型选择器的每个模型，实际由哪些渠道凭证提供服务。模型选择器旁的额度按此匹配。",
+      qMapNone: "未匹配到凭证",
+      qMapEmpty: "该账号还没有同步到模型选择器的模型。",
+      qMatchModelList: "按模型列表",
+      qMatchPrefix: "按前缀",
+      qMatchFamily: "按家族推断",
+      qBadgeLabel: "{model} 的 CPA 额度",
+      qPeekCreds: "{n} 个凭证可服务此模型",
+      qPeekNoCreds: "CPA 上没有凭证提供这个模型。",
+      qPeekLoading: "正在读取额度…",
+      qPeekFooter: "完整列表见 设置 → CLIProxyAPI → 额度",
+      qPeekBest: "最充足",
+      infoLabel: "说明",
+      tabConnection: "连接",
+      tabModels: "模型",
+      enableShort: "启用",
+      moreActions: "更多操作",
+      testBtn: "测试连接",
+      testingBtn: "正在测试…",
+      testOk: "连接成功：{endpoint} · {n} 个模型",
+      testFail: "连接失败：{error}",
+      discardBtn: "放弃更改",
+      discardConfirm: "当前账号有未保存的更改，确定放弃吗？",
+      saveBarLabel: "保存",
+      modelsEmptyRule: "只有勾选的模型会出现在模型选择器中；一个都不勾选时显示全部模型。",
+      addTitle: "添加账号",
+      addNamePlaceholder: "如：家里的 CPA",
+      cancelBtn: "取消",
+      addAnywayBtn: "仍然添加（不启用）",
+      connectBtn: "连接",
+      connectingBtn: "正在连接…",
+      addedDisabledToast: "账号已添加但未启用。修正连接信息后，在账号标题旁打开「启用」。",
+      clearKeyConfirm: "确定清除该账号的 API Key 吗？",
+      clearedKeyToast: "API Key 已清除",
+      enabledToast: "已启用，模型已同步到模型选择器",
+      disabledToast: "已停用，模型已从模型选择器移除",
+      modelsCountShort: "{n}/{total} 个模型",
+      secondsUnit: "秒 · 所有账号共用",
+      paramsHintShort: "修改后点底部「保存并应用」生效。",
+      qProviderOther: "其他",
     };
 
     const en = {
       nav: "CLIProxyAPI",
-      title: "CLIProxyAPI Auto-Discovery & Model Filter",
-      subtitle:
-        "Connect to CLIProxyAPI and check the exact models you want displayed in the DSH conversation model picker.",
       statusConnected: "Connected & Synced",
       statusProbing: "Probing…",
       statusError: "Connection Error",
       statusDisabled: "Disabled",
       statusIdle: "Idle",
-      endpointLabel: "Active Endpoint",
-      endpointNone: "Not connected (tries configured URL then localhost:8317)",
-      modelsCountLabel: "Models in Picker",
-      refreshedAtLabel: "Last Synced",
       refreshBtn: "Probe & Refresh",
       refreshingBtn: "Probing…",
       saveBtn: "Save & Apply",
       savingBtn: "Applying…",
-      saveSelectionBtn: "Apply Selected Models",
-      unsavedChanges: "Unsaved selection changes",
+      unsavedChanges: "Unsaved changes",
       savedToast: "Saved and synchronized to the DSH model picker",
-      sectionConnection: "Connection & Authentication",
       accountsLabel: "Accounts",
       addAccountBtn: "+ Add Account",
-      addingAccountBtn: "Adding…",
       removeAccountBtn: "Delete Account",
       removeConfirm: "Delete account \"{name}\"? Its model routes are removed from the model picker too (the stored key is kept).",
-      noAccounts: "No accounts yet. Click Add Account to connect a CLIProxyAPI server.",
-      accountOffBadge: "Off",
-      addedToast: "Account added (disabled). Fill in its URL and key, then turn on Enable This Account and save.",
+      addedToast: "Account added and enabled; the newest model of each family is checked.",
       removedToast: "Account deleted and its models removed from the picker",
-      disabledHint:
-        "This account is disabled, so its models are not in the model picker. Fill in URL and key, click Probe & Refresh to preview its models, check the ones you want, then turn on Enable This Account.",
+      disabledHint: "Disabled: its models are not in the model picker; settings are kept.",
       enabledLabel: "Enable This Account",
-      enabledHint: "Sync this account's checked models into the DSH model selector. Turning it off keeps the settings but removes its models.",
-      baseUrlLabel: "CLIProxyAPI Base URL",
-      baseUrlPlaceholder: "Leave blank to inherit existing route or auto-discover 127.0.0.1:8317",
-      baseUrlHint: "Root URL (e.g. http://127.0.0.1:8317); /v1 is handled automatically.",
+      enabledHint: "When on, this account's checked models appear in the composer model picker; turning it off removes them and keeps the settings.",
+      baseUrlLabel: "Base URL",
+      baseUrlPlaceholder: "e.g. http://127.0.0.1:8317, no /v1 needed; blank = auto-discover",
       apiKeyLabel: "API Key",
       apiKeySetPlaceholder: "Key is stored (leave blank to keep, or type a new key)",
       apiKeyUnsetPlaceholder: "Enter CLIProxyAPI Bearer key (optional for local no-auth)",
-      apiKeyHint: "Stored securely via DSH credentials service, never in plain settings.",
-      apiKeyConfiguredBadge: "Configured",
-      apiKeyUnsetBadge: "Not Set",
+      apiKeyHint: "Stored in the DSH credentials service ({ref}), never in settings files. Leave blank for a local CPA without a key.",
       clearKeyBtn: "Clear Key",
       protocolLabel: "Wire Protocol",
       protocolHint: "Auto sends each model over its family's own protocol to avoid CPA translation; models DSH cannot speak natively (such as Gemini) use OpenAI Chat.",
@@ -313,22 +392,19 @@ window.__ModuleLoader__.load({
       modelProtocolDefault: "Follow global setting",
       modelProtocolHint: "Native protocol: ",
       sectionAdvanced: "Advanced Routing & Keyword Rules",
-      providerIdLabel: "Provider Route ID",
+      providerIdLabel: "Route ID",
       providerIdHint: "Provider key under llm-pi-ai; must differ per account (first account: cli-proxy).",
       apiKeyEnvLabel: "Credential Ref",
       apiKeyEnvHint: "Name of the key in the DSH credentials service; use a distinct one per account.",
       displayNameLabel: "Account Name",
       displayNameHint: "Tells accounts apart and titles their group in the DSH model selector.",
-      includePrefixLabel: "Include Filter (optional)",
+      includePrefixLabel: "Include Keywords",
       includePrefixPlaceholder: "e.g. gpt-6, claude-opus, gemini-4 (comma-separated)",
       includePrefixHint: "Additional rule: only sync models matching these substrings.",
-      excludePrefixLabel: "Exclude Filter (optional)",
+      excludePrefixLabel: "Exclude Keywords",
       excludePrefixPlaceholder: "e.g. tts, image, video, zj/ (comma-separated)",
       excludePrefixHint: "Additional rule: hide models matching any of these substrings.",
-      refreshIntervalLabel: "Auto Refresh Interval (s, all accounts)",
-      sectionModels: "Model Picker Filter (Only checked models appear in DSH)",
-      sectionModelsHint:
-        "Click any model row to toggle selection. Only checked models will be shown in the conversation model selector.",
+      refreshIntervalLabel: "Auto Refresh",
       searchModelsPlaceholder: "Search model ID or name (e.g. claude-opus, gpt-6, gemini-4)…",
       filterAll: "All Discovered",
       filterSelected: "Checked",
@@ -337,7 +413,7 @@ window.__ModuleLoader__.load({
       selectAllVisibleBtn: "Check Visible",
       deselectAllVisibleBtn: "Uncheck Visible",
       selectRecommendedBtn: "Reset to Recommended",
-      selectRecommendedHint: "Check the newest model of each family in this server's catalog",
+      selectRecommendedHint: "Check the newest model of each family in this server's catalog.",
       badgeVision: "Image",
       badgeReasoning: "Reasoning",
       badgeSelected: "Active",
@@ -351,7 +427,7 @@ window.__ModuleLoader__.load({
       imageInputLabel: "Image Input",
       reasoningLevelsLabel: "Thinking Levels",
       resetParamsBtn: "Reset to Discovered",
-      paramsHint: "Clear a value and save to restore the value discovered from CLIProxyAPI. Click Apply Selected Models to write changes to the picker.",
+      paramsHint: "Clear a value and save to restore the value discovered from CLIProxyAPI.",
       discoveredValue: "Discovered",
       updateTitle: "Plugin Updates",
       updatePageHint: "This page only manages updates of the plugin itself. CLIProxyAPI accounts, models and protocol settings are on the \"CLIProxyAPI\" page in the Settings dialog's left navigation.",
@@ -473,6 +549,117 @@ window.__ModuleLoader__.load({
       updateMarketFailed: "The plugin market installation failed. See the plugin market for details, retry later, or use the offline package download.",
       updateAutoInstallLabel: "Automatically Install Updates",
       updateAutoInstallHint: "Install versions found by automatic checks through the DSH plugin market (requires Auto Check and dshmarket; runs only while a DSH page is open, at most once per version every 6 hours). A DSH restart or page refresh may be needed for it to take effect.",
+      tabsLabel: "Account pages",
+      tabSettings: "Settings",
+      tabQuota: "Quota",
+      qTitle: "CPA Channel Quota",
+      qSubtitle: "With a management key, see the remaining quota of every channel credential on CPA; the composer also shows the current model's quota next to the model picker.",
+      qAccountsLabel: "Choose account",
+      qNoAccounts: "No CLIProxyAPI account yet. Add and connect one on the Settings tab first.",
+      qAccountDisabled: "Account disabled",
+      qKeyLabel: "Management Key",
+      qKeyHint: "Stored in the DSH credentials service ({ref}), used only by the host and never sent back to the page. A remote CPA needs remote-management.allow-remote.",
+      qKeySetPlaceholder: "Management key stored (leave blank to keep, or type a new one)",
+      qKeyUnsetPlaceholder: "remote-management.secret-key from the CPA config",
+      qKeySave: "Save",
+      qKeySaving: "Saving…",
+      qKeyClear: "Clear Key",
+      qKeyClearConfirm: "Clear the management key of account \"{name}\"? Its quota is no longer read afterwards.",
+      qKeyStatusSet: "Set",
+      qKeyStatusUnset: "Not set",
+      qDataLabel: "Quota data",
+      qTotalCreds: "{n} credentials",
+      qKeySaved: "Management key saved",
+      qKeyCleared: "Management key cleared",
+      qRefresh: "Refresh Quota",
+      qRefreshing: "Refreshing…",
+      qUpdated: "Updated {time}",
+      qNeverUpdated: "Quota not loaded yet",
+      qAgoJustNow: "just now",
+      qAgoSeconds: "{n}s ago",
+      qAgoMinutes: "{n} min ago",
+      qAgoHours: "{n} h ago",
+      qAgoDays: "{n} d ago",
+      qStatHealthy: "Healthy",
+      qStatLow: "Low",
+      qStatEmpty: "Exhausted",
+      qStatIssue: "Off / Error",
+      qStatUnknown: "No quota data",
+      qFilterAll: "All channels",
+      qSearchPlaceholder: "Search email, name or model…",
+      qNoCredentials: "This CPA server has no credentials (auth files).",
+      qNoMatch: "No credential matches the filters.",
+      qShowModels: "Serves {n} models",
+      qHideModels: "Hide models",
+      qModelsUnknown: "Model list unavailable",
+      qStatusActive: "Active",
+      qStatusDisabled: "Disabled",
+      qStatusUnavailable: "Unavailable",
+      qStatusError: "Error",
+      qQuotaUnsupported: "No quota endpoint for this channel; showing account status only",
+      qQuotaError: "Quota query failed",
+      qQuotaNone: "Upstream returned no quota window",
+      qRecent: "Recent requests: {success} ok · {failed} failed",
+      qWin5h: "5 hours",
+      qWin7d: "Weekly",
+      qWin30d: "Monthly",
+      qWin1d: "Daily",
+      qWinOther: "Quota",
+      qResetIn: "resets in {time}",
+      qResetSoon: "resetting now",
+      qDurDH: "{d}d {h}h",
+      qDurHM: "{h}h {m}m",
+      qDurM: "{m}m",
+      qErrUnauthorized: "The management key was rejected (401). Automatic refresh is paused so CPA does not ban this address for bad keys; update the key or refresh manually to retry.",
+      qErrForbidden: "CPA refused the management request (403). Make sure remote-management.allow-remote is on and the key is correct.",
+      qErrNetwork: "Could not reach the CPA management API. Check the server address and network.",
+      qErrTimeout: "The CPA management API timed out. Retry shortly.",
+      qErrHttp: "The CPA management API returned an error (HTTP {status}).",
+      qErrInvalid: "The CPA management API returned data that could not be read.",
+      qErrNoEndpoint: "This account has no usable server address yet. Connect CPA on the Settings tab first.",
+      qErrLoad: "Could not load quota data: {error}",
+      qStale: "Showing the last successful data below.",
+      qMapTitle: "Model → Channel",
+      qMapHint: "Which channel credentials actually serve each model this account puts in the model picker. The composer quota badge uses exactly this mapping.",
+      qMapNone: "No matching credential",
+      qMapEmpty: "This account has no models in the model picker yet.",
+      qMatchModelList: "by model list",
+      qMatchPrefix: "by prefix",
+      qMatchFamily: "inferred from family",
+      qBadgeLabel: "CPA quota of {model}",
+      qPeekCreds: "{n} credential(s) serve this model",
+      qPeekNoCreds: "No CPA credential serves this model.",
+      qPeekLoading: "Loading quota…",
+      qPeekFooter: "Full list in Settings → CLIProxyAPI → Quota",
+      qPeekBest: "Best",
+      infoLabel: "More info",
+      tabConnection: "Connection",
+      tabModels: "Models",
+      enableShort: "Enabled",
+      moreActions: "More actions",
+      testBtn: "Test Connection",
+      testingBtn: "Testing…",
+      testOk: "Connected: {endpoint} · {n} models",
+      testFail: "Connection failed: {error}",
+      discardBtn: "Discard",
+      discardConfirm: "This account has unsaved changes. Discard them?",
+      saveBarLabel: "Save",
+      modelsEmptyRule: "Only checked models appear in the model picker; with none checked, all models are shown.",
+      addTitle: "Add Account",
+      addNamePlaceholder: "e.g. Home CPA",
+      cancelBtn: "Cancel",
+      addAnywayBtn: "Add Anyway (Disabled)",
+      connectBtn: "Connect",
+      connectingBtn: "Connecting…",
+      addedDisabledToast: "Account added but disabled. Fix the connection, then turn on Enabled next to the account title.",
+      clearKeyConfirm: "Clear this account's API key?",
+      clearedKeyToast: "API key cleared",
+      enabledToast: "Enabled; its models are synced to the model picker",
+      disabledToast: "Disabled; its models were removed from the model picker",
+      modelsCountShort: "{n}/{total} models",
+      secondsUnit: "s · all accounts",
+      paramsHintShort: "Click Save & Apply at the bottom to apply changes.",
+      qProviderOther: "Other",
     };
 
     const CSS = `
@@ -1039,76 +1226,707 @@ window.__ModuleLoader__.load({
     flex-wrap: wrap;
   }
 }
-`;
-
-    const REASONING_LEVELS = ["off", "minimal", "low", "medium", "high", "xhigh", "max"];
-    const PROTOCOL_NAME_KEYS = {
-      "openai-completions": "protocolNameCompletions",
-      "openai-responses": "protocolNameResponses",
-      "anthropic-messages": "protocolNameMessages",
-    };
-    const PROTOCOLS = Object.keys(PROTOCOL_NAME_KEYS);
-
-    function cloneOverrides(value) {
-      const out = {};
-      for (const [id, entry] of Object.entries(value ?? {})) {
-        out[id] = {
-          ...entry,
-          ...(Array.isArray(entry.reasoningLevels) ? { reasoningLevels: [...entry.reasoningLevels] } : {}),
-        };
-      }
-      return out;
-    }
-
-    function overridesKey(value) {
-      return JSON.stringify(value ?? {});
-    }
-
-    function formatTokens(n) {
-      if (typeof n !== "number" || !Number.isFinite(n)) return "";
-      if (n >= 1000000) return `${(n / 1000000).toFixed(n % 1000000 === 0 ? 0 : 1)}M`;
-      if (n >= 1000) return `${Math.round(n / 1000)}K`;
-      return String(n);
-    }
-
-    async function postJson(url, body) {
-      const res = await fetch(url, {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify(body ?? {}),
-      });
-      const payload = await res.json();
-      if (!res.ok || payload.ok === false) {
-        throw new Error(payload.error || `HTTP ${res.status}`);
-      }
-      return payload;
-    }
+/* ---- Section tabs: DSH segmented control ---- */
+.dcpa-tabs {
+  align-self: flex-start;
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  gap: 2px;
+  padding: 4px;
+  border-radius: var(--dsw-radius-md, 10px);
+  background: var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-2));
+}
+.dcpa-tab, .dcpa-q-seg-tab {
+  box-sizing: border-box;
+  height: 28px;
+  padding: 0 16px;
+  border: 0;
+  border-radius: var(--dsw-radius-sm, 8px);
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font: inherit;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color 0.12s ease, background 0.12s ease;
+}
+.dcpa-tab:hover, .dcpa-q-seg-tab:hover { color: var(--dsw-alias-label-primary); }
+.dcpa-tab[aria-selected="true"], .dcpa-q-seg-tab[aria-selected="true"] {
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-layer-1);
+  box-shadow: var(--dsw-elevation-soft, 0 1px 2px var(--dsw-alias-border-l1));
+}
+.dcpa-tabpanel[hidden] { display: none; }
+.dcpa-tab:focus-visible, .dcpa-q-seg-tab:focus-visible, .dcpa-q button:focus-visible, .dcpa-q summary:focus-visible,
+.dcpa-q-badge:focus-visible, .dcpa-q-pop button:focus-visible {
+  outline: 2px solid var(--dsw-focus-ring-color, var(--dsw-alias-brand-primary));
+  outline-offset: -2px;
+}
 
-    function stateDotClass(state) {
-      return state === "connected"
-        ? "dcpa-dot dcpa-dot-connected"
-        : state === "probing"
-        ? "dcpa-dot dcpa-dot-probing"
-        : state === "error"
-        ? "dcpa-dot dcpa-dot-error"
-        : "dcpa-dot dcpa-dot-idle";
-    }
+/* ---- Quota page: flat DSH settings rows ---- */
+.dcpa-q {
+  display: flex;
+  flex-direction: column;
+  color: var(--dsw-alias-label-primary);
+  font-size: 14px;
+  line-height: 22px;
+}
+.dcpa-q-head { padding: 4px 0 12px; }
+.dcpa-q-h { margin: 0; font-size: 16px; font-weight: 500; line-height: 24px; }
+.dcpa-q-desc {
+  margin: 4px 0 0;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-secondary);
+}
+.dcpa-q-seg {
+  align-self: flex-start;
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  padding: 4px;
+  margin: 4px 0 8px;
+  border-radius: var(--dsw-radius-md, 10px);
+  background: var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-2));
+}
+.dcpa-q-seg-tab { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; }
+.dcpa-q-seg-note { font-weight: 400; color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary)); }
+.dcpa-q-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 16px 0;
+  border-bottom: 0.5px solid var(--dsw-alias-border-l2);
+}
+.dcpa-q-row-main { min-width: 0; }
+.dcpa-q-title { font-size: 14px; line-height: 20px; }
+.dcpa-q-sub {
+  margin-top: 4px;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-secondary);
+  overflow-wrap: anywhere;
+}
+.dcpa-q-actions { display: flex; align-items: center; gap: 8px; flex: none; }
+.dcpa-q-form {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 0 16px;
+  border-bottom: 0.5px solid var(--dsw-alias-border-l2);
+}
+.dcpa-q-input {
+  flex: 1;
+  min-width: 0;
+  box-sizing: border-box;
+  height: 34px;
+  padding: 0 12px;
+  border: 0.5px solid var(--dsw-alias-border-l4, var(--dsw-alias-border-l2));
+  border-radius: var(--dsw-radius-md, 10px);
+  background: var(--dsw-alias-bg-layer-3, var(--dsw-alias-bg-base));
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+  font-size: 13px;
+  outline: none;
+}
+.dcpa-q-input:focus { border-color: var(--dsw-alias-state-business-primary, var(--dsw-alias-brand-primary)); }
+.dcpa-q-input::placeholder { color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary)); }
+.dcpa-q-btn {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  height: 28px;
+  padding: 0 10px;
+  border: none;
+  border-radius: var(--dsw-radius-sm, 8px);
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+  font-size: 12px;
+  line-height: 18px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.dcpa-q-btn:disabled { cursor: not-allowed; opacity: 0.4; }
+.dcpa-q-btn:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-2)); }
+.dcpa-q-btn[data-variant="primary"] {
+  height: 34px;
+  padding: 0 14px;
+  border-radius: var(--dsw-radius-md, 10px);
+  background: var(--dsw-alias-button-primary-fill, var(--dsw-alias-brand-primary));
+  color: var(--dsw-alias-label-primary-foreground, var(--dsw-alias-bg-base));
+}
+.dcpa-q-btn[data-variant="primary"]:hover:not(:disabled) {
+  background: var(--dsw-alias-button-primary-hover, var(--dsw-alias-brand-primary));
+}
+.dcpa-q-btn[data-variant="outline"] { border: 0.5px solid var(--dsw-alias-border-l3, var(--dsw-alias-border-l2)); }
+.dcpa-q-btn[data-variant="danger"] { color: var(--dsw-alias-state-error-primary); }
+.dcpa-q-btn[data-variant="danger"]:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover-danger, var(--dsw-alias-bg-layer-2));
+}
+.dcpa-q-tag {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  padding: 1px 8px;
+  font-size: 11px;
+  line-height: 17px;
+  font-weight: 500;
+  white-space: nowrap;
+  border: 0.5px solid var(--dsw-alias-border-l4, var(--dsw-alias-border-l2));
+  color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary));
+}
+.dcpa-q-tag[data-tone="success"] {
+  border-color: transparent;
+  background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 10%, transparent);
+  color: var(--dsw-alias-state-success-primary);
+}
+.dcpa-q-tag[data-tone="warning"] {
+  border-color: transparent;
+  background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 12%, transparent);
+  color: var(--dsw-alias-state-warn-primary);
+}
+.dcpa-q-tag[data-tone="danger"] {
+  border-color: transparent;
+  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent);
+  color: var(--dsw-alias-state-error-primary);
+}
+.dcpa-q-tag[data-tone="info"] {
+  border-color: transparent;
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary, var(--dsw-alias-brand-primary)) 10%, transparent);
+  color: var(--dsw-alias-state-business-primary, var(--dsw-alias-brand-primary));
+}
+.dcpa-q-msg { margin: 12px 0 0; font-size: 12px; line-height: 18px; }
+.dcpa-q-msg[data-tone="error"] { color: var(--dsw-alias-state-error-primary); }
+.dcpa-q-msg[data-tone="ok"] { color: var(--dsw-alias-state-success-primary); }
+.dcpa-q-summary { display: flex; flex-direction: column; gap: 8px; padding: 20px 0 4px; }
+.dcpa-q-dist {
+  display: flex;
+  gap: 2px;
+  height: 6px;
+  border-radius: 3px;
+  overflow: hidden;
+  background: var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-2));
+}
+.dcpa-q-dist span { display: block; height: 100%; }
+.dcpa-q-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 16px;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-secondary);
+}
+.dcpa-q-legend span { display: inline-flex; align-items: center; gap: 6px; }
+.dcpa-q-legend b { font-weight: 500; color: var(--dsw-alias-label-primary); font-variant-numeric: tabular-nums; }
+.dcpa-q-swatch { width: 8px; height: 8px; border-radius: 2px; }
+[data-level="ok"] > .dcpa-q-swatch, .dcpa-q-dist [data-level="ok"] { background: var(--dsw-alias-state-success-primary); }
+[data-level="low"] > .dcpa-q-swatch, .dcpa-q-dist [data-level="low"] { background: var(--dsw-alias-state-warn-primary); }
+[data-level="empty"] > .dcpa-q-swatch, .dcpa-q-dist [data-level="empty"] { background: var(--dsw-alias-state-error-primary); }
+[data-level="issue"] > .dcpa-q-swatch, .dcpa-q-dist [data-level="issue"] { background: var(--dsw-alias-state-idle-primary); }
+[data-level="unknown"] > .dcpa-q-swatch, .dcpa-q-dist [data-level="unknown"] { background: var(--dsw-alias-border-l3, var(--dsw-alias-border-l2)); }
+.dcpa-q-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 16px 0 0; }
+.dcpa-q-filter {
+  height: 28px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: var(--dsw-radius-sm, 8px);
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+.dcpa-q-filter:hover { background: var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-2)); }
+.dcpa-q-filter[aria-pressed="true"] {
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-2));
+  font-weight: 500;
+}
+.dcpa-q-filter small { margin-left: 4px; font-size: 11px; color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary)); }
+.dcpa-q-tools .dcpa-q-input { flex: 0 1 220px; height: 28px; margin-left: auto; border-radius: var(--dsw-radius-sm, 8px); }
+.dcpa-q-group-title {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  padding: 20px 0 4px;
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-secondary);
+}
+.dcpa-q-group-title small { font-weight: 400; color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary)); }
+.dcpa-q-cred {
+  display: grid;
+  grid-template-columns: minmax(160px, 1fr) auto;
+  align-items: center;
+  gap: 8px 24px;
+  padding: 14px 0;
+  border-bottom: 0.5px solid var(--dsw-alias-border-l2);
+}
+@media (max-width: 640px) { .dcpa-q-cred { grid-template-columns: 1fr; } }
+.dcpa-q-cred[data-status="disabled"] .dcpa-q-who, .dcpa-q-cred[data-status="unavailable"] .dcpa-q-who { opacity: 0.55; }
+.dcpa-q-who { min-width: 0; }
+.dcpa-q-name {
+  font-size: 14px;
+  line-height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dcpa-q-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 4px;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-secondary);
+}
+.dcpa-q-link {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font: inherit;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-color: var(--dsw-alias-border-l3, var(--dsw-alias-border-l2));
+  text-underline-offset: 3px;
+}
+.dcpa-q-link:hover { color: var(--dsw-alias-label-primary); }
+.dcpa-q-meters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 20px; }
+@media (max-width: 640px) { .dcpa-q-meters { justify-content: flex-start; } }
+.dcpa-q-meter { width: 128px; display: flex; flex-direction: column; gap: 4px; }
+.dcpa-q-meter-top {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 6px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--dsw-alias-label-secondary);
+}
+.dcpa-q-meter-top span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dcpa-q-pct {
+  font-size: 13px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: var(--dsw-alias-label-primary);
+}
+.dcpa-q-meter[data-level="low"] .dcpa-q-pct { color: var(--dsw-alias-state-warn-primary); }
+.dcpa-q-meter[data-level="empty"] .dcpa-q-pct { color: var(--dsw-alias-state-error-primary); }
+.dcpa-q-track {
+  height: 4px;
+  border-radius: 2px;
+  background: var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-2));
+  overflow: hidden;
+}
+.dcpa-q-fill { display: block; height: 100%; border-radius: 2px; background: var(--dsw-alias-state-idle-primary); }
+[data-level="ok"] > .dcpa-q-track > .dcpa-q-fill { background: var(--dsw-alias-state-success-primary); }
+[data-level="mid"] > .dcpa-q-track > .dcpa-q-fill { background: var(--dsw-alias-state-success-primary); opacity: 0.7; }
+[data-level="low"] > .dcpa-q-track > .dcpa-q-fill { background: var(--dsw-alias-state-warn-primary); }
+[data-level="empty"] > .dcpa-q-track > .dcpa-q-fill { background: var(--dsw-alias-state-error-primary); }
+.dcpa-q-reset { font-size: 11px; line-height: 14px; color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary)); }
+.dcpa-q-note {
+  margin: 0;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary));
+  text-align: right;
+}
+.dcpa-q-note[data-tone="error"] { color: var(--dsw-alias-state-error-primary); }
+.dcpa-q-models { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
+.dcpa-q-models code {
+  padding: 1px 8px;
+  border-radius: 999px;
+  font-family: var(--ds-font-family-code, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: 11px;
+  line-height: 17px;
+  background: var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-2));
+  color: var(--dsw-alias-label-secondary);
+}
+.dcpa-q-models code[data-picker="true"] { color: var(--dsw-alias-label-primary); }
+.dcpa-q-map { margin-top: 8px; }
+.dcpa-q-map > summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 0;
+  list-style: none;
+  cursor: pointer;
+  border-bottom: 0.5px solid var(--dsw-alias-border-l2);
+}
+.dcpa-q-map > summary::-webkit-details-marker { display: none; }
+.dcpa-q-map > summary::after {
+  content: "";
+  flex: none;
+  width: 7px;
+  height: 7px;
+  margin-right: 4px;
+  border-right: 1.5px solid var(--dsw-alias-label-secondary);
+  border-bottom: 1.5px solid var(--dsw-alias-label-secondary);
+  transform: rotate(45deg);
+}
+.dcpa-q-map[open] > summary::after { transform: rotate(-135deg); }
+.dcpa-q-map-row {
+  display: grid;
+  grid-template-columns: minmax(150px, 1fr) minmax(0, 1.5fr) 48px;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 0;
+  border-bottom: 0.5px solid var(--dsw-alias-border-l1);
+  font-size: 13px;
+  line-height: 20px;
+}
+.dcpa-q-map-model {
+  font-family: var(--ds-font-family-code, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+.dcpa-q-map-creds { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; color: var(--dsw-alias-label-secondary); font-size: 12px; }
+.dcpa-q-map-pct { text-align: right; }
 
-    const SERVICE_UNAVAILABLE_STATUS = new Set([404, 405, 501]);
-    const UPDATE_ERROR_KEYS = {
-      "network-error": "updateNetworkError",
-      "invalid-metadata": "updateMetadataError",
-      "invalid-response": "updateMetadataError",
-      "service-unavailable": "updateServiceUnavailableError",
-      "forbidden-origin": "updateOriginError",
-      "channel-unavailable": "updateChannelUnavailable",
-      "unavailable-channel": "updateChannelUnavailable",
-      "integrity-error": "updateIntegrityError",
-      "invalid-package": "updateInvalidPackage",
-      "storage-error": "updateStorageError",
-      busy: "updateBusyError",
-      "stale-version": "updateStaleVersion",
-      disposed: "updateDisposedError",
+/* ---- Account page: bar, header, tabs, form rows, save bar ---- */
+.dcpa-acct-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.dcpa-acct-bar .dcpa-q-seg { margin: 0; }
+.dcpa-q-seg-tab .dcpa-dot { width: 6px; height: 6px; }
+.dcpa-account { display: flex; flex-direction: column; }
+.dcpa-acct-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 0 12px;
+}
+.dcpa-status-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.dcpa-acct-tabs { margin: 8px 0 4px; }
+.dcpa-tabbody { display: flex; flex-direction: column; }
+.dcpa-frow {
+  display: grid;
+  grid-template-columns: 168px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px 16px;
+  padding: 12px 0;
+  border-bottom: 0.5px solid var(--dsw-alias-border-l2);
+}
+@media (max-width: 620px) { .dcpa-frow { grid-template-columns: 1fr; } }
+.dcpa-frow-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-primary);
+}
+.dcpa-frow-control { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.dcpa-frow-control > .dcpa-q-input { flex: none; }
+.dcpa-frow-control .dcpa-q-msg { margin: 0; }
+.dcpa-inline { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.dcpa-inline .dcpa-q-input { flex: 1; }
+.dcpa-inline-narrow .dcpa-q-input { flex: 0 0 120px; }
+select.dcpa-q-input { appearance: auto; padding-right: 8px; }
+.dcpa-adv > summary {
+  padding: 14px 0;
+  font-size: 13px;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  border-bottom: 0.5px solid var(--dsw-alias-border-l2);
+}
+.dcpa-adv > summary:hover { color: var(--dsw-alias-label-primary); }
+.dcpa-panel { display: flex; flex-direction: column; padding-top: 16px; }
+.dcpa-form-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 16px; }
+.dcpa-switch:disabled { opacity: 0.5; cursor: default; }
+.dcpa-menu { position: relative; display: inline-flex; }
+.dcpa-menu-btn { width: 28px; padding: 0; font-size: 16px; letter-spacing: 1px; }
+.dcpa-menu-pop {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 20;
+  isolation: isolate;
+  min-width: 160px;
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--dsw-radius-lg, 12px);
+  --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);
+  box-shadow: var(--dsw-elevation-prominent, 0 8px 24px var(--dsw-alias-border-l2));
+}
+.dcpa-menu-pop::before, .dcpa-info-pop::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--dsw-menu-surface-fill, var(--dsw-alias-bg-layer-1));
+  backdrop-filter: var(--dsw-menu-backdrop-filter, none);
+}
+.dcpa-menu-item {
+  height: 32px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: var(--dsw-radius-md, 10px);
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.dcpa-menu-item:hover:not(:disabled), .dcpa-menu-item:focus-visible { background: var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-2)); outline: none; }
+.dcpa-menu-item:disabled { opacity: 0.4; cursor: default; }
+.dcpa-menu-item[data-variant="danger"] { color: var(--dsw-alias-state-error-primary); }
+.dcpa-info { position: relative; display: inline-flex; align-items: center; }
+.dcpa-info-btn {
+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: 1px solid var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary));
+  border-radius: 50%;
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary));
+  font: 600 10px/14px Georgia, "Times New Roman", serif;
+  font-style: italic;
+  text-align: center;
+  cursor: help;
+}
+.dcpa-info-btn:hover, .dcpa-info-btn[aria-expanded="true"] {
+  border-color: var(--dsw-alias-label-secondary);
+  color: var(--dsw-alias-label-primary);
+}
+.dcpa-info-btn:focus-visible { outline: 2px solid var(--dsw-focus-ring-color, var(--dsw-alias-brand-primary)); outline-offset: 1px; }
+.dcpa-info-pop {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: -8px;
+  z-index: 30;
+  isolation: isolate;
+  width: max-content;
+  max-width: 280px;
+  padding: 8px 10px;
+  border-radius: var(--dsw-radius-md, 10px);
+  --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);
+  box-shadow: var(--dsw-elevation-prominent, 0 8px 24px var(--dsw-alias-border-l2));
+  color: var(--dsw-alias-label-primary);
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 400;
+  white-space: normal;
+  text-align: left;
+}
+.dcpa-info-pop[data-align="end"] { left: auto; right: -8px; }
+.dcpa-savebar {
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 16px;
+  padding: 12px 0;
+  border-top: 0.5px solid var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-bg-layer-2);
+}
+.dcpa-savebar-text { font-size: 13px; color: var(--dsw-alias-label-secondary); }
+.dcpa-savebar-text[data-tone="ok"] { color: var(--dsw-alias-state-success-primary); }
+.dcpa-savebar-text[data-tone="error"] { color: var(--dsw-alias-state-error-primary); }
+/* Model tab: same flat rows as the other tabs. */
+.dcpa-models { gap: 10px; padding-top: 12px; }
+.dcpa-models .dcpa-input { height: 34px; border-radius: var(--dsw-radius-md, 10px); background: var(--dsw-alias-bg-layer-3, var(--dsw-alias-bg-base)); border-color: var(--dsw-alias-border-l4, var(--dsw-alias-border-l2)); }
+.dcpa-models .dcpa-btn { border: 0; background: transparent; height: 28px; border-radius: var(--dsw-radius-sm, 8px); }
+.dcpa-models .dcpa-btn:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-2)); }
+.dcpa-models .dcpa-seg { background: var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-2)); border: 0; padding: 3px; }
+.dcpa-models .dcpa-seg-btn[data-active="true"] { background: var(--dsw-alias-bg-layer-1); box-shadow: var(--dsw-elevation-soft, none); }
+.dcpa-models .dcpa-chip { border: 0; background: transparent; }
+.dcpa-models .dcpa-chip[data-active="true"] { background: var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-2)); color: var(--dsw-alias-label-primary); }
+.dcpa-models .dcpa-model-list { max-height: none; overflow: visible; gap: 0; }
+.dcpa-models .dcpa-model-row,
+.dcpa-models .dcpa-model-row[data-checked="true"] {
+  padding: 10px 2px;
+  border: 0;
+  border-bottom: 0.5px solid var(--dsw-alias-border-l2);
+  border-radius: 0;
+  background: transparent;
+}
+.dcpa-models .dcpa-model-row:hover { background: var(--dsw-alias-interactive-bg-hover, transparent); }
+.dcpa-models .dcpa-badge { border: 0; background: var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-2)); border-radius: 999px; padding: 1px 8px; }
+.dcpa-models .dcpa-editor { border-top: 0; padding: 4px 0 6px 25px; }
+/* ---- Composer badge: same metrics as the model selector trigger ---- */
+.dcpa-q-wrap { display: inline-flex; align-items: center; flex: none; }
+.dcpa-q-badge {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 28px;
+  padding: 0 6px;
+  border: none;
+  border-radius: var(--dsw-radius-sm, 8px);
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font: inherit;
+  font-size: 13px;
+  line-height: 20px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.dcpa-q-badge:hover, .dcpa-q-badge[aria-expanded="true"] {
+  background: var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-2));
+}
+.dcpa-q-badge-pct { font-variant-numeric: tabular-nums; }
+.dcpa-q-badge[data-level="low"] .dcpa-q-badge-pct { color: var(--dsw-alias-state-warn-primary); }
+.dcpa-q-badge[data-level="empty"] .dcpa-q-badge-pct { color: var(--dsw-alias-state-error-primary); }
+.dcpa-q-bars { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 11px; }
+.dcpa-q-bars i { display: block; width: 3px; border-radius: 1px; background: var(--dsw-alias-label-tertiary, var(--dsw-alias-border-l2)); opacity: 0.45; }
+.dcpa-q-bars i:nth-child(1) { height: 5px; }
+.dcpa-q-bars i:nth-child(2) { height: 8px; }
+.dcpa-q-bars i:nth-child(3) { height: 11px; }
+.dcpa-q-bars[data-level="ok"] i { background: var(--dsw-alias-state-success-primary); opacity: 1; }
+.dcpa-q-bars[data-level="mid"] i:nth-child(-n+2) { background: var(--dsw-alias-state-success-primary); opacity: 1; }
+.dcpa-q-bars[data-level="low"] i:nth-child(1) { background: var(--dsw-alias-state-warn-primary); opacity: 1; }
+.dcpa-q-bars[data-level="empty"] i { background: var(--dsw-alias-state-error-primary); }
+
+/* ---- Composer peek: the DSH menu surface ---- */
+.dcpa-q-pop {
+  position: fixed;
+  z-index: 1100;
+  isolation: isolate;
+  box-sizing: border-box;
+  width: 340px;
+  max-width: calc(100vw - 32px);
+  max-height: min(440px, calc(100vh - 96px));
+  overflow-y: auto;
+  padding: 4px;
+  border: 0;
+  border-radius: var(--dsw-radius-lg, 12px);
+  --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);
+  box-shadow: var(--dsw-elevation-prominent, 0 8px 24px var(--dsw-alias-border-l2));
+  color: var(--dsw-alias-label-primary);
+  font-size: 13px;
+  line-height: 20px;
+  text-align: left;
+}
+.dcpa-q-pop::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--dsw-menu-surface-fill, var(--dsw-alias-bg-layer-1));
+  backdrop-filter: var(--dsw-menu-backdrop-filter, none);
+  pointer-events: none;
+}
+.dcpa-q-pop-head { padding: 8px 8px 6px; }
+.dcpa-q-pop-model { font-weight: 500; overflow-wrap: anywhere; }
+.dcpa-q-pop-sub { font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-secondary); }
+.dcpa-q-pop-cred {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px;
+  border-radius: var(--dsw-radius-md, 10px);
+}
+.dcpa-q-pop-cred:hover { background: var(--dsw-alias-interactive-bg-hover, transparent); }
+.dcpa-q-pop-who { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
+.dcpa-q-pop-who .dcpa-q-name { font-size: 13px; flex: 0 1 auto; }
+.dcpa-q-pop-cred .dcpa-q-meters { justify-content: flex-start; gap: 8px 16px; }
+.dcpa-q-pop-cred .dcpa-q-meter { width: 146px; }
+.dcpa-q-pop-cred .dcpa-q-note { text-align: left; }
+.dcpa-q-pop-text { margin: 0; padding: 4px 8px 8px; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-secondary); }
+.dcpa-q-pop-text[data-tone="error"] { color: var(--dsw-alias-state-error-primary); }
+.dcpa-q-pop-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 4px;
+  padding: 6px 4px 2px 8px;
+  border-top: 0.5px solid var(--dsw-alias-border-l1);
+  font-size: 12px;
+  color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary));
+}
+`;
+
+    const REASONING_LEVELS = ["off", "minimal", "low", "medium", "high", "xhigh", "max"];
+    const PROTOCOL_NAME_KEYS = {
+      "openai-completions": "protocolNameCompletions",
+      "openai-responses": "protocolNameResponses",
+      "anthropic-messages": "protocolNameMessages",
+    };
+    const PROTOCOLS = Object.keys(PROTOCOL_NAME_KEYS);
+
+    function cloneOverrides(value) {
+      const out = {};
+      for (const [id, entry] of Object.entries(value ?? {})) {
+        out[id] = {
+          ...entry,
+          ...(Array.isArray(entry.reasoningLevels) ? { reasoningLevels: [...entry.reasoningLevels] } : {}),
+        };
+      }
+      return out;
+    }
+
+    function overridesKey(value) {
+      return JSON.stringify(value ?? {});
+    }
+
+    function formatTokens(n) {
+      if (typeof n !== "number" || !Number.isFinite(n)) return "";
+      if (n >= 1000000) return `${(n / 1000000).toFixed(n % 1000000 === 0 ? 0 : 1)}M`;
+      if (n >= 1000) return `${Math.round(n / 1000)}K`;
+      return String(n);
+    }
+
+    async function postJson(url, body) {
+      const res = await fetch(url, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(body ?? {}),
+      });
+      const payload = await res.json();
+      if (!res.ok || payload.ok === false) {
+        throw new Error(payload.error || `HTTP ${res.status}`);
+      }
+      return payload;
+    }
+
+    function stateDotClass(state) {
+      return state === "connected"
+        ? "dcpa-dot dcpa-dot-connected"
+        : state === "probing"
+        ? "dcpa-dot dcpa-dot-probing"
+        : state === "error"
+        ? "dcpa-dot dcpa-dot-error"
+        : "dcpa-dot dcpa-dot-idle";
+    }
+
+    const SERVICE_UNAVAILABLE_STATUS = new Set([404, 405, 501]);
+    const UPDATE_ERROR_KEYS = {
+      "network-error": "updateNetworkError",
+      "invalid-metadata": "updateMetadataError",
+      "invalid-response": "updateMetadataError",
+      "service-unavailable": "updateServiceUnavailableError",
+      "forbidden-origin": "updateOriginError",
+      "channel-unavailable": "updateChannelUnavailable",
+      "unavailable-channel": "updateChannelUnavailable",
+      "integrity-error": "updateIntegrityError",
+      "invalid-package": "updateInvalidPackage",
+      "storage-error": "updateStorageError",
+      busy: "updateBusyError",
+      "stale-version": "updateStaleVersion",
+      disposed: "updateDisposedError",
       "linked-install": "updateLinkedHint",
       "unsupported-host": "updateUnsupportedHint",
       "not-installed": "updateNotInstalledHint",
@@ -1925,19 +2743,113 @@ window.__ModuleLoader__.load({
     }
 
     /**
-     * Account list + switcher (the "CLIProxyAPI" settings section). Each
-     * account is edited in its own {@link AccountPanel}, remounted when the
-     * selection changes.
+     * Small "i" help button: the explanation opens on hover, keyboard focus or
+     * click (touch), closes on Escape / leaving. The text stays in the locale
+     * dictionaries and is announced through aria-describedby.
+     */
+    function InfoTip({ t, text }) {
+      const [open, setOpen] = useState(false);
+      const [alignEnd, setAlignEnd] = useState(false);
+      const ref = useRef(null);
+      const id = useMemo(() => `dcpa-tip-${Math.random().toString(36).slice(2, 9)}`, []);
+      if (!text) return null;
+      // Open towards the roomier side of the surrounding page.
+      const show = () => {
+        const el = ref.current;
+        const box = el?.closest?.(".dcpa-wrap, .dcpa-q-pop")?.getBoundingClientRect?.();
+        const r = el?.getBoundingClientRect?.();
+        if (box && r) setAlignEnd(r.left - box.left > box.width / 2);
+        setOpen(true);
+      };
+      return h(
+        "span",
+        {
+          ref,
+          className: "dcpa-info",
+          onMouseEnter: show,
+          onMouseLeave: () => setOpen(false),
+        },
+        h(
+          "button",
+          {
+            type: "button",
+            className: "dcpa-info-btn",
+            "aria-label": t("infoLabel"),
+            "aria-describedby": open ? id : undefined,
+            "aria-expanded": open,
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              if (open) setOpen(false);
+              else show();
+            },
+            onFocus: show,
+            onBlur: () => setOpen(false),
+            onKeyDown: (e) => {
+              if (e.key === "Escape") setOpen(false);
+            },
+          },
+          "i"
+        ),
+        open ? h("span", { id, role: "tooltip", className: "dcpa-info-pop", "data-align": alignEnd ? "end" : "start" }, text) : null
+      );
+    }
+
+    /** One labelled form row: label (+ help) on the left, control on the right. */
+    function FieldRow({ t, label, help, htmlFor, children, stack = false }) {
+      return h(
+        "div",
+        { className: stack ? "dcpa-frow dcpa-frow-stack" : "dcpa-frow" },
+        h(
+          "div",
+          { className: "dcpa-frow-label" },
+          htmlFor ? h("label", { htmlFor }, label) : h("span", null, label),
+          help ? h(InfoTip, { t, text: help }) : null
+        ),
+        h("div", { className: "dcpa-frow-control" }, children)
+      );
+    }
+
+    function accountStateLabel(t, state) {
+      return state === "connected"
+        ? t("statusConnected")
+        : state === "probing"
+        ? t("statusProbing")
+        : state === "error"
+        ? t("statusError")
+        : state === "disabled"
+        ? t("statusDisabled")
+        : t("statusIdle");
+    }
+
+    /** Lowest remaining percentage among an account's usable credentials (tab hint). */
+    function accountQuotaFloor(quotaData, accountId) {
+      const account = (quotaData?.accounts ?? []).find((a) => a.accountId === accountId);
+      if (!account || account.keyConfigured !== true) return null;
+      const values = (account.credentials ?? [])
+        .filter((c) => c.status === "active")
+        .map((c) => credentialHeadroom(c))
+        .filter((v) => v !== null);
+      return values.length > 0 ? Math.min(...values) : null;
+    }
+
+    /**
+     * The CLIProxyAPI settings section: one account bar for every tab, then the
+     * selected account's header, its 连接 / 模型 / 额度 tabs and one save bar.
+     * Owns the account server data; the add-account form creates an account only
+     * when the user connects it.
      */
     function CpaSettingsPanel({ t }) {
       const [loading, setLoading] = useState(true);
-      const [busy, setBusy] = useState(null); // null | "refresh" | "save" | "add" | "remove"
-      const [error, setError] = useState(null);
-      const [toast, setToast] = useState(null);
+      const [busy, setBusy] = useState(null); // null | "refresh" | "save" | "patch" | "add" | "remove" | "test"
+      const [loadError, setLoadError] = useState(null);
+      const [notice, setNotice] = useState(null); // { tone: "ok" | "error", text }
       const [data, setData] = useState(null);
       const [activeId, setActiveId] = useState(null);
       // Bumped whenever the server's saved config should replace the drafts.
       const [rev, setRev] = useState(0);
+      const [adding, setAdding] = useState(false);
+      const dirtyRef = useRef(false);
 
       const accounts = Array.isArray(data?.accounts) ? data.accounts : [];
       const active = accounts.find((a) => a.id === activeId) ?? accounts[0];
@@ -1951,9 +2863,9 @@ window.__ModuleLoader__.load({
           }
           setData(body);
           setRev((r) => r + 1);
-          setError(null);
+          setLoadError(null);
         } catch (err) {
-          setError(err instanceof Error ? err.message : String(err));
+          setLoadError(err instanceof Error ? err.message : String(err));
         } finally {
           setLoading(false);
         }
@@ -1963,123 +2875,153 @@ window.__ModuleLoader__.load({
         void fetchStatus();
       }, [fetchStatus]);
 
+      // Success messages fade after a few seconds; errors stay until the next action.
+      useEffect(() => {
+        if (notice?.tone !== "ok") return undefined;
+        const id = setTimeout(() => setNotice(null), 4000);
+        return () => clearTimeout(id);
+      }, [notice]);
+
+      const confirmDiscard = useCallback(() => {
+        if (!dirtyRef.current) return true;
+        if (typeof window === "undefined" || typeof window.confirm !== "function") return true;
+        return window.confirm(t("discardConfirm"));
+      }, [t]);
+
       const run = useCallback(async (kind, fn) => {
         setBusy(kind);
-        setError(null);
-        setToast(null);
+        setNotice(null);
         try {
           return await fn();
         } catch (err) {
-          setError(err instanceof Error ? err.message : String(err));
+          setNotice({ tone: "error", text: err instanceof Error ? err.message : String(err) });
           return undefined;
         } finally {
           setBusy(null);
         }
       }, []);
 
-      const onRefresh = useCallback(
-        (accountId) =>
+      const selectAccount = (id) => {
+        if (id === active?.id && !adding) return;
+        if (!confirmDiscard()) return;
+        dirtyRef.current = false;
+        setAdding(false);
+        setNotice(null);
+        setActiveId(id);
+        setRev((r) => r + 1);
+      };
+
+      const actions = {
+        refresh: (accountId) =>
           run("refresh", async () => {
             setData(await postJson(API.refresh, { accountId }));
           }),
-        [run]
-      );
-
-      const onSave = useCallback(
-        (accountId, payload) =>
+        save: (accountId, payload) =>
           run("save", async () => {
             setData(await postJson(API.save, { ...payload, accountId }));
+            dirtyRef.current = false;
             setRev((r) => r + 1);
-            setToast(t("savedToast"));
+            setNotice({ tone: "ok", text: t("savedToast") });
           }),
-        [run, t]
-      );
-
-      const onAdd = useCallback(
-        () =>
-          run("add", async () => {
-            const body = await postJson(API.addAccount, {});
-            setData(body);
-            if (body.createdId) setActiveId(body.createdId);
-            setRev((r) => r + 1);
-            setToast(t("addedToast"));
+        // One field, applied at once (enable switch, clear key); drafts stay.
+        patch: (accountId, patch, okText) =>
+          run("patch", async () => {
+            setData(await postJson(API.save, { ...patch, accountId }));
+            if (okText) setNotice({ tone: "ok", text: okText });
           }),
-        [run, t]
-      );
-
-      const onRemove = useCallback(
-        (account) => {
+        test: (accountId, draft) =>
+          run("test", async () => (await postJson(API.testAccount, { ...(accountId ? { accountId } : {}), ...draft })).test),
+        remove: (account) => {
           const name = account.config?.displayName || account.id;
-          if (typeof window !== "undefined" && !window.confirm(t("removeConfirm").replace("{name}", name))) {
-            return;
-          }
+          if (typeof window !== "undefined" && typeof window.confirm === "function" && !window.confirm(fmt(t, "removeConfirm", { name }))) return;
           void run("remove", async () => {
             const body = await postJson(API.removeAccount, { accountId: account.id });
+            dirtyRef.current = false;
             setData(body);
             setActiveId(body.accounts?.[0]?.id ?? null);
             setRev((r) => r + 1);
-            setToast(t("removedToast"));
+            setNotice({ tone: "ok", text: t("removedToast") });
           });
         },
-        [run, t]
-      );
+        // Reload the drafts from the saved config.
+        discard: () => {
+          dirtyRef.current = false;
+          setNotice(null);
+          setRev((r) => r + 1);
+        },
+        add: (draft, enabled) =>
+          run("add", async () => {
+            const body = await postJson(API.addAccount, { ...draft, enabled });
+            setData(body);
+            if (body.createdId) setActiveId(body.createdId);
+            setAdding(false);
+            setRev((r) => r + 1);
+            setNotice({ tone: "ok", text: enabled ? t("addedToast") : t("addedDisabledToast") });
+          }),
+      };
+
+      const showAdd = adding || (!loading && data !== null && accounts.length === 0);
 
       return h(
         "div",
-        { className: "dcpa-wrap", "data-dsh-plugin": MODULE_ID },
+        { className: "dcpa-wrap dcpa-q", "data-dsh-plugin": MODULE_ID },
         h(
           "div",
-          { className: "dcpa-card" },
-          h(
-            "div",
-            { className: "dcpa-head" },
-            h(
-              "div",
-              null,
-              h("h3", { className: "dcpa-title" }, t("title")),
-              h("p", { className: "dcpa-subtitle" }, t("subtitle"))
-            )
-          ),
-          h(
-            "div",
-            { className: "dcpa-account-bar", role: "tablist", "aria-label": t("accountsLabel") },
-            accounts.map((a) =>
-              h(
-                "button",
-                {
-                  key: a.id,
-                  type: "button",
-                  role: "tab",
-                  className: "dcpa-account-chip",
-                  "aria-selected": active?.id === a.id,
-                  "data-active": active?.id === a.id ? "true" : "false",
-                  "data-enabled": a.config?.enabled === false ? "false" : "true",
-                  title: a.config?.provider,
-                  onClick: () => setActiveId(a.id),
-                },
-                h("span", { className: stateDotClass(a.status?.state) }),
-                a.config?.displayName || a.id,
-                a.config?.enabled === false
-                  ? h("span", { className: "dcpa-badge" }, t("accountOffBadge"))
-                  : null
+          { className: "dcpa-acct-bar" },
+          accounts.length > 0
+            ? h(
+                "div",
+                { className: "dcpa-q-seg", role: "tablist", "aria-label": t("accountsLabel") },
+                accounts.map((a) =>
+                  h(
+                    "button",
+                    {
+                      key: a.id,
+                      type: "button",
+                      role: "tab",
+                      className: "dcpa-q-seg-tab",
+                      "aria-selected": !showAdd && active?.id === a.id,
+                      title: a.config?.provider,
+                      onClick: () => selectAccount(a.id),
+                    },
+                    h("span", { className: stateDotClass(a.config?.enabled === false ? "idle" : a.status?.state) }),
+                    a.config?.displayName || a.id
+                  )
+                )
               )
-            ),
-            h(
-              "button",
-              {
-                type: "button",
-                className: "dcpa-btn dcpa-btn-sm",
-                disabled: busy !== null || loading,
-                onClick: onAdd,
+            : null,
+          h(
+            "button",
+            {
+              type: "button",
+              className: "dcpa-q-btn",
+              "data-variant": "outline",
+              disabled: busy !== null || loading || showAdd,
+              onClick: () => {
+                if (!confirmDiscard()) return;
+                dirtyRef.current = false;
+                setNotice(null);
+                setAdding(true);
               },
-              busy === "add" ? t("addingAccountBtn") : t("addAccountBtn")
-            )
-          ),
-          !loading && accounts.length === 0 ? h("p", { className: "dcpa-hint" }, t("noAccounts")) : null,
-          error ? h("p", { className: "dcpa-error", role: "alert" }, error) : null,
-          toast ? h("p", { className: "dcpa-success", role: "status" }, toast) : null
+            },
+            t("addAccountBtn")
+          )
         ),
-        active
+        loadError ? h("p", { className: "dcpa-q-msg", "data-tone": "error", role: "alert" }, loadError) : null,
+        showAdd
+          ? h(AddAccountForm, {
+              t,
+              busy,
+              notice,
+              canCancel: accounts.length > 0,
+              onCancel: () => {
+                setAdding(false);
+                setNotice(null);
+              },
+              onTest: (draft) => actions.test(undefined, draft),
+              onAdd: actions.add,
+            })
+          : active
           ? h(AccountPanel, {
               key: active.id,
               t,
@@ -2087,18 +3029,105 @@ window.__ModuleLoader__.load({
               global: data?.global ?? {},
               rev,
               busy,
-              onRefresh: () => onRefresh(active.id),
-              onSave: (payload) => onSave(active.id, payload),
-              onRemove: () => onRemove(active),
+              notice,
+              actions,
+              onDirtyChange: (dirty) => {
+                dirtyRef.current = dirty;
+              },
             })
           : null
       );
     }
 
-    function AccountPanel({ t, account, global, rev, busy, onRefresh, onSave: saveAccount, onRemove }) {
+    /** Add an account: name, address, key → test, then create enabled (or disabled on request). */
+    function AddAccountForm({ t, busy, notice, canCancel, onCancel, onTest, onAdd }) {
+      const [displayName, setDisplayName] = useState("");
+      const [baseURL, setBaseURL] = useState("");
+      const [apiKey, setApiKey] = useState("");
+      const [failure, setFailure] = useState(null);
+
+      const draft = () => ({
+        ...(displayName.trim() ? { displayName: displayName.trim() } : {}),
+        baseURL: baseURL.trim(),
+        ...(apiKey.trim() ? { apiKey: apiKey.trim() } : {}),
+      });
+      const connect = async () => {
+        setFailure(null);
+        const result = await onTest({ baseURL: baseURL.trim(), apiKey: apiKey.trim() });
+        if (result === undefined) return;
+        if (result.ok) await onAdd(draft(), true);
+        else setFailure(result.error || t("statusError"));
+      };
+
+      return h(
+        "div",
+        { className: "dcpa-panel" },
+        h("h3", { className: "dcpa-q-h" }, t("addTitle")),
+        h(
+          FieldRow,
+          { t, label: t("displayNameLabel"), help: t("displayNameHint"), htmlFor: "dcpa-add-name" },
+          h("input", {
+            id: "dcpa-add-name",
+            className: "dcpa-q-input",
+            value: displayName,
+            placeholder: t("addNamePlaceholder"),
+            onChange: (e) => setDisplayName(e.target.value),
+          })
+        ),
+        h(
+          FieldRow,
+          { t, label: t("baseUrlLabel"), htmlFor: "dcpa-add-url" },
+          h("input", {
+            id: "dcpa-add-url",
+            className: "dcpa-q-input",
+            value: baseURL,
+            placeholder: t("baseUrlPlaceholder"),
+            onChange: (e) => setBaseURL(e.target.value),
+          })
+        ),
+        h(
+          FieldRow,
+          { t, label: t("apiKeyLabel"), help: t("apiKeyHint"), htmlFor: "dcpa-add-key" },
+          h("input", {
+            id: "dcpa-add-key",
+            className: "dcpa-q-input",
+            type: "password",
+            autoComplete: "new-password",
+            value: apiKey,
+            placeholder: t("apiKeyUnsetPlaceholder"),
+            onChange: (e) => setApiKey(e.target.value),
+          })
+        ),
+        failure ? h("p", { className: "dcpa-q-msg", "data-tone": "error", role: "alert" }, fmt(t, "testFail", { error: failure })) : null,
+        notice?.tone === "error" ? h("p", { className: "dcpa-q-msg", "data-tone": "error", role: "alert" }, notice.text) : null,
+        h(
+          "div",
+          { className: "dcpa-form-actions" },
+          canCancel ? h("button", { type: "button", className: "dcpa-q-btn", disabled: busy !== null, onClick: onCancel }, t("cancelBtn")) : null,
+          failure
+            ? h(
+                "button",
+                { type: "button", className: "dcpa-q-btn", "data-variant": "outline", disabled: busy !== null, onClick: () => void onAdd(draft(), false) },
+                t("addAnywayBtn")
+              )
+            : null,
+          h(
+            "button",
+            { type: "button", className: "dcpa-q-btn", "data-variant": "primary", disabled: busy !== null, onClick: () => void connect() },
+            busy === "test" || busy === "add" ? t("connectingBtn") : t("connectBtn")
+          )
+        )
+      );
+    }
+
+    function AccountPanel({ t, account, global, rev, busy, notice, actions, onDirtyChange }) {
       const syncing = busy === "refresh";
       const saving = busy === "save";
-      const loading = busy === "add" || busy === "remove";
+
+      const [tab, setTab] = useState("connection");
+      const [menuOpen, setMenuOpen] = useState(false);
+      const menuRef = useRef(null);
+      const [testResult, setTestResult] = useState(null);
 
       // Model filter UI state
       const [search, setSearch] = useState("");
@@ -2111,7 +3140,6 @@ window.__ModuleLoader__.load({
       const [editingId, setEditingId] = useState(null);
 
       // Form draft state
-      const [enabled, setEnabled] = useState(true);
       const [baseURL, setBaseURL] = useState("");
       const [apiKeyDraft, setApiKeyDraft] = useState("");
       // "auto" or the protocol every model is fixed to.
@@ -2124,20 +3152,32 @@ window.__ModuleLoader__.load({
       const [refreshIntervalSeconds, setRefreshIntervalSeconds] = useState("300");
       const [probeTimeoutMs, setProbeTimeoutMs] = useState("5000");
 
+      const savedConnection = (c = account.config ?? {}) => ({
+        baseURL: c.baseURL ?? "",
+        protocol: c.protocolMode === "fixed" ? c.protocol ?? "openai-completions" : "auto",
+        provider: c.provider ?? "cli-proxy",
+        displayName: c.displayName ?? "CLI Proxy API",
+        apiKeyEnv: c.effectiveApiKeyEnv ?? c.apiKeyEnv ?? "CLI_PROXY_API_KEY",
+        includePrefix: c.includePrefix ?? "",
+        excludePrefix: c.excludePrefix ?? "",
+        refreshIntervalSeconds: String(global?.refreshIntervalSeconds ?? 300),
+      });
+
       // Load the drafts from the saved config on mount and after every save.
       useEffect(() => {
         const c = account.config ?? {};
-        setEnabled(c.enabled !== false);
-        setBaseURL(c.baseURL ?? "");
-        setProtocol(c.protocolMode === "fixed" ? c.protocol ?? "openai-completions" : "auto");
-        setProvider(c.provider ?? "cli-proxy");
-        setDisplayName(c.displayName ?? "CLI Proxy API");
-        setApiKeyEnv(c.effectiveApiKeyEnv ?? c.apiKeyEnv ?? "CLI_PROXY_API_KEY");
-        setIncludePrefix(c.includePrefix ?? "");
-        setExcludePrefix(c.excludePrefix ?? "");
-        setRefreshIntervalSeconds(String(global?.refreshIntervalSeconds ?? 300));
+        const saved = savedConnection(c);
+        setBaseURL(saved.baseURL);
+        setProtocol(saved.protocol);
+        setProvider(saved.provider);
+        setDisplayName(saved.displayName);
+        setApiKeyEnv(saved.apiKeyEnv);
+        setIncludePrefix(saved.includePrefix);
+        setExcludePrefix(saved.excludePrefix);
+        setRefreshIntervalSeconds(saved.refreshIntervalSeconds);
         setProbeTimeoutMs(String(global?.probeTimeoutMs ?? 5000));
         setApiKeyDraft("");
+        setTestResult(null);
 
         const sel = Array.isArray(c.selectedModels)
           ? c.selectedModels
@@ -2153,53 +3193,46 @@ window.__ModuleLoader__.load({
         // eslint-disable-next-line react-hooks/exhaustive-deps
       }, [rev]);
 
-      const onRefreshNow = onRefresh;
-
-      const onSave = useCallback(
-        (clearKey = false) =>
-          saveAccount({
-            enabled,
-            baseURL: baseURL.trim(),
-            protocolMode: protocol === "auto" ? "auto" : "fixed",
-            ...(protocol === "auto" ? {} : { protocol }),
-            provider: provider.trim() || account.config?.provider || "cli-proxy",
-            displayName: displayName.trim() || account.config?.displayName || "CLI Proxy API",
-            apiKeyEnv: apiKeyEnv.trim() || account.config?.apiKeyEnv || "CLI_PROXY_API_KEY",
-            includePrefix: includePrefix.trim(),
-            excludePrefix: excludePrefix.trim(),
-            // Before the first catalog is seen, an empty draft is not a choice:
-            // leave the selection unset so the first probe can recommend one.
-            ...(selectedIds.size > 0 || (account.status?.allModels?.length ?? 0) > 0
-              ? { selectedModels: [...selectedIds] }
-              : {}),
-            modelOverrides,
-            refreshIntervalSeconds: Math.max(15, Number(refreshIntervalSeconds) || 300),
-            probeTimeoutMs: Math.max(250, Number(probeTimeoutMs) || 5000),
-            ...(apiKeyDraft.trim() !== "" ? { apiKey: apiKeyDraft.trim() } : {}),
-            ...(clearKey ? { clearApiKey: true } : {}),
-          }),
-        [
-          saveAccount,
-          account,
-          selectedIds,
-          modelOverrides,
-          enabled,
-          baseURL,
-          protocol,
-          provider,
-          displayName,
-          apiKeyEnv,
-          includePrefix,
-          excludePrefix,
-          refreshIntervalSeconds,
-          probeTimeoutMs,
-          apiKeyDraft,
-        ]
-      );
+      useEffect(() => {
+        if (!menuOpen) return undefined;
+        const onDown = (e) => {
+          if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false);
+        };
+        const onKey = (e) => {
+          if (e.key === "Escape") setMenuOpen(false);
+        };
+        document.addEventListener("mousedown", onDown, true);
+        document.addEventListener("keydown", onKey, true);
+        return () => {
+          document.removeEventListener("mousedown", onDown, true);
+          document.removeEventListener("keydown", onKey, true);
+        };
+      }, [menuOpen]);
+
+      const payload = () => ({
+        baseURL: baseURL.trim(),
+        protocolMode: protocol === "auto" ? "auto" : "fixed",
+        ...(protocol === "auto" ? {} : { protocol }),
+        provider: provider.trim() || account.config?.provider || "cli-proxy",
+        displayName: displayName.trim() || account.config?.displayName || "CLI Proxy API",
+        apiKeyEnv: apiKeyEnv.trim() || account.config?.apiKeyEnv || "CLI_PROXY_API_KEY",
+        includePrefix: includePrefix.trim(),
+        excludePrefix: excludePrefix.trim(),
+        // Before the first catalog is seen, an empty draft is not a choice:
+        // leave the selection unset so the first probe can recommend one.
+        ...(selectedIds.size > 0 || (account.status?.allModels?.length ?? 0) > 0
+          ? { selectedModels: [...selectedIds] }
+          : {}),
+        modelOverrides,
+        refreshIntervalSeconds: Math.max(15, Number(refreshIntervalSeconds) || 300),
+        probeTimeoutMs: Math.max(250, Number(probeTimeoutMs) || 5000),
+        ...(apiKeyDraft.trim() !== "" ? { apiKey: apiKeyDraft.trim() } : {}),
+      });
 
       const st = account.status ?? { state: "idle", modelCount: 0, models: [], allModels: [] };
       const cred = account.credential ?? { configured: false, ref: apiKeyEnv };
       const effectiveUrl = account.config?.effectiveBaseURL || "";
+      const enabled = account.config?.enabled !== false;
 
       const allModels = useMemo(() => {
         if (Array.isArray(st.allModels) && st.allModels.length > 0) return st.allModels;
@@ -2234,9 +3267,25 @@ window.__ModuleLoader__.load({
 
       const currentIdsKey = useMemo(() => [...selectedIds].sort().join("\0"), [selectedIds]);
       const currentOverridesKey = useMemo(() => overridesKey(modelOverrides), [modelOverrides]);
-      const selectionDirty =
-        (savedIdsKey !== "" && currentIdsKey !== savedIdsKey) ||
-        currentOverridesKey !== savedOverridesKey;
+      const draftConnection = {
+        baseURL,
+        protocol,
+        provider,
+        displayName,
+        apiKeyEnv,
+        includePrefix,
+        excludePrefix,
+        refreshIntervalSeconds,
+      };
+      const dirty =
+        currentIdsKey !== savedIdsKey ||
+        currentOverridesKey !== savedOverridesKey ||
+        apiKeyDraft.trim() !== "" ||
+        JSON.stringify(draftConnection) !== JSON.stringify(savedConnection());
+
+      useEffect(() => {
+        onDirtyChange?.(dirty);
+      }, [dirty, onDirtyChange]);
 
       const toggleModel = useCallback((id) => {
         setSelectedIds((prev) => {
@@ -2282,18 +3331,10 @@ window.__ModuleLoader__.load({
           };
           const merged = { ...current, ...patch };
           const normalized = {};
-          if (
-            Number.isInteger(merged.contextWindow) &&
-            merged.contextWindow > 0 &&
-            merged.contextWindow !== discovered.contextWindow
-          ) {
+          if (Number.isInteger(merged.contextWindow) && merged.contextWindow > 0 && merged.contextWindow !== discovered.contextWindow) {
             normalized.contextWindow = merged.contextWindow;
           }
-          if (
-            Number.isInteger(merged.maxTokens) &&
-            merged.maxTokens > 0 &&
-            merged.maxTokens !== discovered.maxTokens
-          ) {
+          if (Number.isInteger(merged.maxTokens) && merged.maxTokens > 0 && merged.maxTokens !== discovered.maxTokens) {
             normalized.maxTokens = merged.maxTokens;
           }
           if (merged.image !== discovered.image) normalized.image = merged.image === true;
@@ -2309,9 +3350,7 @@ window.__ModuleLoader__.load({
 
       // The protocol a model would use with the panel's current draft settings.
       const effectiveProtocol = useCallback(
-        (m) =>
-          modelOverrides[m.id]?.protocol ??
-          (protocol === "auto" ? m.nativeProtocol ?? "openai-completions" : protocol),
+        (m) => modelOverrides[m.id]?.protocol ?? (protocol === "auto" ? m.nativeProtocol ?? "openai-completions" : protocol),
         [modelOverrides, protocol]
       );
       const protocolName = (p) => t(PROTOCOL_NAME_KEYS[p] ?? "protocolNameCompletions");
@@ -2324,134 +3363,188 @@ window.__ModuleLoader__.load({
         });
       }, []);
 
-      const dotClass = stateDotClass(st.state);
+      const quotaSnap = useQuota(sharedQuota);
+      const quotaFloor = accountQuotaFloor(quotaSnap.data, account.id);
 
-      const stateLabel =
-        st.state === "connected"
-          ? t("statusConnected")
-          : st.state === "probing"
-          ? t("statusProbing")
-          : st.state === "error"
-          ? t("statusError")
-          : st.state === "disabled"
-          ? t("statusDisabled")
-          : t("statusIdle");
+      const discard = () => {
+        setTestResult(null);
+        actions.discard();
+      };
 
-      return h(
-        React.Fragment,
-        null,
-        // 1. Account Status Card
+      const testConnection = async () => {
+        setTestResult(null);
+        const result = await actions.test(account.id, { baseURL: baseURL.trim(), apiKey: apiKeyDraft.trim() });
+        if (result !== undefined) setTestResult(result);
+      };
+
+      const statusParts = [
+        accountStateLabel(t, enabled ? st.state : "disabled"),
+        st.endpoint || effectiveUrl || null,
+        allModels.length > 0 ? fmt(t, "modelsCountShort", { n: st.modelCount ?? 0, total: st.totalDiscovered ?? allModels.length }) : null,
+      ].filter(Boolean);
+
+      const tabs = [
+        ["connection", t("tabConnection")],
+        ["models", `${t("tabModels")} ${selectedIds.size}`],
+        ["quota", quotaFloor === null ? t("tabQuota") : `${t("tabQuota")} ${pctText(quotaFloor)}`],
+      ];
+
+      const connectionTab = h(
+        "div",
+        { className: "dcpa-tabbody" },
         h(
-          "div",
-          { className: "dcpa-card" },
+          FieldRow,
+          { t, label: t("displayNameLabel"), help: t("displayNameHint"), htmlFor: `dcpa-name-${account.id}` },
+          h("input", {
+            id: `dcpa-name-${account.id}`,
+            className: "dcpa-q-input",
+            value: displayName,
+            onChange: (e) => setDisplayName(e.target.value),
+          })
+        ),
+        h(
+          FieldRow,
+          { t, label: t("baseUrlLabel"), htmlFor: `dcpa-url-${account.id}` },
           h(
             "div",
-            { className: "dcpa-head" },
-            h(
-              "div",
-              null,
-              h("h4", { className: "dcpa-section-title" }, account.config?.displayName || account.id),
-              h(
-                "p",
-                { className: "dcpa-hint" },
-                `${t("providerIdLabel")}: ${account.config?.provider ?? ""}`
-              )
-            ),
+            { className: "dcpa-inline" },
+            h("input", {
+              id: `dcpa-url-${account.id}`,
+              className: "dcpa-q-input",
+              value: baseURL,
+              placeholder: effectiveUrl || t("baseUrlPlaceholder"),
+              onChange: (e) => {
+                setBaseURL(e.target.value);
+                setTestResult(null);
+              },
+            }),
             h(
-              "div",
-              { className: "dcpa-actions" },
-              h(
-                "button",
-                {
-                  type: "button",
-                  className: "dcpa-btn",
-                  disabled: syncing || saving || loading,
-                  onClick: onRefreshNow,
-                },
-                syncing ? t("refreshingBtn") : t("refreshBtn")
-              ),
-              h(
-                "button",
-                {
-                  type: "button",
-                  className: "dcpa-btn dcpa-btn-primary",
-                  disabled: saving || syncing || loading,
-                  onClick: () => onSave(false),
-                },
-                saving ? t("savingBtn") : t("saveBtn")
-              )
+              "button",
+              { type: "button", className: "dcpa-q-btn", "data-variant": "outline", disabled: busy !== null, onClick: () => void testConnection() },
+              busy === "test" ? t("testingBtn") : t("testBtn")
             )
           ),
+          testResult
+            ? h(
+                "p",
+                { className: "dcpa-q-msg", "data-tone": testResult.ok ? "ok" : "error", role: "status" },
+                testResult.ok
+                  ? fmt(t, "testOk", { endpoint: testResult.endpoint, n: testResult.modelCount })
+                  : fmt(t, "testFail", { error: testResult.error })
+              )
+            : null
+        ),
+        h(
+          FieldRow,
+          { t, label: t("apiKeyLabel"), help: fmt(t, "apiKeyHint", { ref: cred.ref || apiKeyEnv }), htmlFor: `dcpa-key-${account.id}` },
           h(
             "div",
-            { className: "dcpa-status-bar" },
-            h(
-              "span",
-              { className: "dcpa-status-pill" },
-              h("span", { className: dotClass }),
-              stateLabel
-            ),
-            h(
-              "span",
-              { className: "dcpa-meta-item" },
-              `${t("endpointLabel")}:`,
-              h(
-                "span",
-                { className: "dcpa-meta-val" },
-                st.endpoint || effectiveUrl || t("endpointNone")
-              )
-            ),
-            h(
-              "span",
-              { className: "dcpa-meta-item" },
-              `${t("modelsCountLabel")}:`,
-              h(
-                "span",
-                { className: "dcpa-meta-val" },
-                `${st.modelCount ?? 0} / ${st.totalDiscovered ?? allModels.length}`
-              )
-            )
+            { className: "dcpa-inline" },
+            h("input", {
+              id: `dcpa-key-${account.id}`,
+              type: "password",
+              className: "dcpa-q-input",
+              autoComplete: "new-password",
+              value: apiKeyDraft,
+              placeholder: cred.configured ? t("apiKeySetPlaceholder") : t("apiKeyUnsetPlaceholder"),
+              onChange: (e) => {
+                setApiKeyDraft(e.target.value);
+                setTestResult(null);
+              },
+            }),
+            cred.configured
+              ? h(
+                  "button",
+                  {
+                    type: "button",
+                    className: "dcpa-q-btn",
+                    "data-variant": "danger",
+                    disabled: busy !== null,
+                    onClick: () => {
+                      if (typeof window !== "undefined" && typeof window.confirm === "function" && !window.confirm(t("clearKeyConfirm"))) return;
+                      void actions.patch(account.id, { clearApiKey: true }, t("clearedKeyToast"));
+                    },
+                  },
+                  t("clearKeyBtn")
+                )
+              : null
+          )
+        ),
+        h(
+          FieldRow,
+          { t, label: t("protocolLabel"), help: t("protocolHint"), htmlFor: `dcpa-proto-${account.id}` },
+          h(
+            "select",
+            {
+              id: `dcpa-proto-${account.id}`,
+              className: "dcpa-q-input",
+              value: protocol,
+              onChange: (e) => setProtocol(e.target.value),
+            },
+            h("option", { value: "auto" }, t("protocolAuto")),
+            PROTOCOLS.map((p) => h("option", { key: p, value: p }, `${t("protocolFixedPrefix")}${protocolName(p)}`))
+          )
+        ),
+        h(
+          "details",
+          { className: "dcpa-adv" },
+          h("summary", null, t("sectionAdvanced")),
+          h(
+            FieldRow,
+            { t, label: t("providerIdLabel"), help: t("providerIdHint"), htmlFor: `dcpa-route-${account.id}` },
+            h("input", { id: `dcpa-route-${account.id}`, className: "dcpa-q-input", value: provider, onChange: (e) => setProvider(e.target.value) })
           ),
-          account.config?.enabled === false ? h("p", { className: "dcpa-hint" }, t("disabledHint")) : null,
-          st.error ? h("p", { className: "dcpa-error", role: "alert" }, st.error) : null
+          h(
+            FieldRow,
+            { t, label: t("apiKeyEnvLabel"), help: t("apiKeyEnvHint"), htmlFor: `dcpa-ref-${account.id}` },
+            h("input", { id: `dcpa-ref-${account.id}`, className: "dcpa-q-input", value: apiKeyEnv, onChange: (e) => setApiKeyEnv(e.target.value) })
+          ),
+          h(
+            FieldRow,
+            { t, label: t("includePrefixLabel"), help: t("includePrefixHint"), htmlFor: `dcpa-inc-${account.id}` },
+            h("input", {
+              id: `dcpa-inc-${account.id}`,
+              className: "dcpa-q-input",
+              value: includePrefix,
+              placeholder: t("includePrefixPlaceholder"),
+              onChange: (e) => setIncludePrefix(e.target.value),
+            })
+          ),
+          h(
+            FieldRow,
+            { t, label: t("excludePrefixLabel"), help: t("excludePrefixHint"), htmlFor: `dcpa-exc-${account.id}` },
+            h("input", {
+              id: `dcpa-exc-${account.id}`,
+              className: "dcpa-q-input",
+              value: excludePrefix,
+              placeholder: t("excludePrefixPlaceholder"),
+              onChange: (e) => setExcludePrefix(e.target.value),
+            })
+          )
         ),
-
-        // 2. Interactive Model Selection Filter Card
         h(
-          "div",
-          { className: "dcpa-card" },
+          FieldRow,
+          { t, label: t("refreshIntervalLabel"), htmlFor: `dcpa-interval-${account.id}` },
           h(
             "div",
-            { className: "dcpa-head" },
-            h(
-              "div",
-              null,
-              h(
-                "h4",
-                { className: "dcpa-section-title" },
-                `${t("sectionModels")} (${selectedIds.size} / ${allModels.length})`
-              ),
-              h("p", { className: "dcpa-hint" }, t("sectionModelsHint"))
-            ),
-            h(
-              "div",
-              { className: "dcpa-actions" },
-              selectionDirty
-                ? h("span", { className: "dcpa-badge dcpa-badge-warn" }, t("unsavedChanges"))
-                : null,
-              h(
-                "button",
-                {
-                  type: "button",
-                  className: "dcpa-btn dcpa-btn-primary dcpa-btn-sm",
-                  disabled: saving || syncing,
-                  onClick: () => onSave(false),
-                },
-                saving ? t("savingBtn") : t("saveSelectionBtn")
-              )
-            )
-          ),
+            { className: "dcpa-inline dcpa-inline-narrow" },
+            h("input", {
+              id: `dcpa-interval-${account.id}`,
+              type: "number",
+              min: "15",
+              className: "dcpa-q-input",
+              value: refreshIntervalSeconds,
+              onChange: (e) => setRefreshIntervalSeconds(e.target.value),
+            }),
+            h("span", { className: "dcpa-q-sub" }, t("secondsUnit"))
+          )
+        )
+      );
 
+      const modelsTab = h(
+        "div",
+        { className: "dcpa-tabbody dcpa-models" },
+        h("p", { className: "dcpa-q-sub" }, t("modelsEmptyRule")),
           // Search + Segmented Filter + Batch Actions
           h(
             "div",
@@ -2517,11 +3610,11 @@ window.__ModuleLoader__.load({
                   type: "button",
                   className: "dcpa-btn dcpa-btn-sm",
                   disabled: recommended.length === 0,
-                  title: t("selectRecommendedHint"),
                   onClick: resetRecommended,
                 },
                 `${t("selectRecommendedBtn")} (${recommended.length})`
-              )
+              ),
+              h(InfoTip, { t, text: t("selectRecommendedHint") })
             )
           ),
 
@@ -2779,7 +3872,7 @@ window.__ModuleLoader__.load({
                               `${t("modelProtocolHint")}${protocolName(m.nativeProtocol ?? "openai-completions")}`
                             )
                           ),
-                          h("p", { className: "dcpa-hint" }, t("paramsHint")),
+                          h("div", { className: "dcpa-q-sub" }, t("paramsHintShort"), h(InfoTip, { t, text: t("paramsHint") })),
                           hasOverride
                             ? h(
                                 "div",
@@ -2800,22 +3893,30 @@ window.__ModuleLoader__.load({
                   );
                 })
               )
-        ),
+      );
 
-        // 3. Connection & Auth Card
+      return h(
+        "div",
+        { className: "dcpa-account" },
         h(
           "div",
-          { className: "dcpa-card" },
-          h("h4", { className: "dcpa-section-title" }, t("sectionConnection")),
+          { className: "dcpa-acct-head" },
           h(
             "div",
-            { className: "dcpa-switch-row" },
+            { className: "dcpa-q-row-main" },
+            h("h3", { className: "dcpa-q-h" }, account.config?.displayName || account.id),
             h(
               "div",
-              null,
-              h("div", { className: "dcpa-label" }, t("enabledLabel")),
-              h("p", { className: "dcpa-hint" }, t("enabledHint"))
-            ),
+              { className: "dcpa-q-sub dcpa-status-line" },
+              h("span", { className: stateDotClass(enabled ? st.state : "idle") }),
+              statusParts.join(" · ")
+            )
+          ),
+          h(
+            "div",
+            { className: "dcpa-q-actions" },
+            h("span", { className: "dcpa-q-sub" }, t("enableShort")),
+            h(InfoTip, { t, text: t("enabledHint") }),
             h(
               "button",
               {
@@ -2824,234 +3925,1189 @@ window.__ModuleLoader__.load({
                 className: "dcpa-switch",
                 "aria-checked": enabled,
                 "aria-label": t("enabledLabel"),
-                onClick: () => setEnabled(!enabled),
+                disabled: busy !== null,
+                onClick: () => void actions.patch(account.id, { enabled: !enabled }, enabled ? t("disabledToast") : t("enabledToast")),
               },
               h("span", { className: "dcpa-switch-thumb" })
-            )
-          ),
-          h(
-            "div",
-            { className: "dcpa-field" },
-            h("label", { className: "dcpa-label" }, t("baseUrlLabel")),
-            h("input", {
-              type: "text",
-              className: "dcpa-input",
-              value: baseURL,
-              placeholder: effectiveUrl || t("baseUrlPlaceholder"),
-              onChange: (e) => setBaseURL(e.target.value),
-            }),
-            h("p", { className: "dcpa-hint" }, t("baseUrlHint"))
-          ),
-          h(
-            "div",
-            { className: "dcpa-field" },
-            h(
-              "div",
-              { className: "dcpa-label-row" },
-              h("label", { className: "dcpa-label" }, `${t("apiKeyLabel")} (${cred.ref || apiKeyEnv})`),
-              h(
-                "span",
-                { className: cred.configured ? "dcpa-badge dcpa-badge-ok" : "dcpa-badge" },
-                cred.configured ? t("apiKeyConfiguredBadge") : t("apiKeyUnsetBadge")
-              )
             ),
-            h("input", {
-              type: "password",
-              className: "dcpa-input",
-              autoComplete: "new-password",
-              value: apiKeyDraft,
-              placeholder: cred.configured ? t("apiKeySetPlaceholder") : t("apiKeyUnsetPlaceholder"),
-              onChange: (e) => setApiKeyDraft(e.target.value),
-            }),
-            h("p", { className: "dcpa-hint" }, t("apiKeyHint"))
-          ),
-          h(
-            "div",
-            { className: "dcpa-grid" },
             h(
-              "div",
-              { className: "dcpa-field" },
-              h("label", { className: "dcpa-label" }, t("protocolLabel")),
+              "span",
+              { className: "dcpa-menu", ref: menuRef },
               h(
-                "select",
+                "button",
                 {
-                  className: "dcpa-select",
-                  value: protocol,
-                  onChange: (e) => setProtocol(e.target.value),
+                  type: "button",
+                  className: "dcpa-q-btn dcpa-menu-btn",
+                  "aria-label": t("moreActions"),
+                  "aria-haspopup": "menu",
+                  "aria-expanded": menuOpen,
+                  onClick: () => setMenuOpen((v) => !v),
                 },
-                h("option", { value: "auto" }, t("protocolAuto")),
-                PROTOCOLS.map((p) =>
-                  h("option", { key: p, value: p }, `${t("protocolFixedPrefix")}${protocolName(p)}`)
-                )
-              ),
-              h("p", { className: "dcpa-hint" }, t("protocolHint"))
-            ),
-            h(
-              "div",
-              { className: "dcpa-field" },
-              h("label", { className: "dcpa-label" }, t("displayNameLabel")),
-              h("input", {
-                type: "text",
-                className: "dcpa-input",
-                value: displayName,
-                onChange: (e) => setDisplayName(e.target.value),
-              }),
-              h("p", { className: "dcpa-hint" }, t("displayNameHint"))
-            )
-          ),
-          h(
-            "details",
-            null,
-            h(
-              "summary",
-              { style: { cursor: "pointer", fontSize: "12px", fontWeight: 500 } },
-              t("sectionAdvanced")
-            ),
-            h(
-              "div",
-              { style: { display: "flex", flexDirection: "column", gap: "10px", marginTop: "10px" } },
-              h(
-                "div",
-                { className: "dcpa-grid" },
-                h(
-                  "div",
-                  { className: "dcpa-field" },
-                  h("label", { className: "dcpa-label" }, t("includePrefixLabel")),
-                  h("input", {
-                    type: "text",
-                    className: "dcpa-input",
-                    value: includePrefix,
-                    placeholder: t("includePrefixPlaceholder"),
-                    onChange: (e) => setIncludePrefix(e.target.value),
-                  }),
-                  h("p", { className: "dcpa-hint" }, t("includePrefixHint"))
-                ),
-                h(
-                  "div",
-                  { className: "dcpa-field" },
-                  h("label", { className: "dcpa-label" }, t("excludePrefixLabel")),
-                  h("input", {
-                    type: "text",
-                    className: "dcpa-input",
-                    value: excludePrefix,
-                    placeholder: t("excludePrefixPlaceholder"),
-                    onChange: (e) => setExcludePrefix(e.target.value),
-                  }),
-                  h("p", { className: "dcpa-hint" }, t("excludePrefixHint"))
-                )
-              ),
-              h(
-                "div",
-                { className: "dcpa-grid" },
-                h(
-                  "div",
-                  { className: "dcpa-field" },
-                  h("label", { className: "dcpa-label" }, t("providerIdLabel")),
-                  h("input", {
-                    type: "text",
-                    className: "dcpa-input",
-                    value: provider,
-                    onChange: (e) => setProvider(e.target.value),
-                  }),
-                  h("p", { className: "dcpa-hint" }, t("providerIdHint"))
-                ),
-                h(
-                  "div",
-                  { className: "dcpa-field" },
-                  h("label", { className: "dcpa-label" }, t("apiKeyEnvLabel")),
-                  h("input", {
-                    type: "text",
-                    className: "dcpa-input",
-                    value: apiKeyEnv,
-                    onChange: (e) => setApiKeyEnv(e.target.value),
-                  }),
-                  h("p", { className: "dcpa-hint" }, t("apiKeyEnvHint"))
-                )
+                "⋯"
               ),
-              h(
-                "div",
-                { className: "dcpa-grid" },
-                h(
-                  "div",
-                  { className: "dcpa-field" },
-                  h("label", { className: "dcpa-label" }, t("refreshIntervalLabel")),
-                  h("input", {
-                    type: "number",
-                    className: "dcpa-input",
-                    value: refreshIntervalSeconds,
-                    onChange: (e) => setRefreshIntervalSeconds(e.target.value),
-                  })
-                )
-              )
+              menuOpen
+                ? h(
+                    "div",
+                    { className: "dcpa-menu-pop", role: "menu" },
+                    h(
+                      "button",
+                      {
+                        type: "button",
+                        role: "menuitem",
+                        className: "dcpa-menu-item",
+                        disabled: busy !== null,
+                        onClick: () => {
+                          setMenuOpen(false);
+                          void actions.refresh(account.id);
+                        },
+                      },
+                      syncing ? t("refreshingBtn") : t("refreshBtn")
+                    ),
+                    h(
+                      "button",
+                      {
+                        type: "button",
+                        role: "menuitem",
+                        className: "dcpa-menu-item",
+                        "data-variant": "danger",
+                        disabled: busy !== null,
+                        onClick: () => {
+                          setMenuOpen(false);
+                          actions.remove(account);
+                        },
+                      },
+                      t("removeAccountBtn")
+                    )
+                  )
+                : null
             )
-          ),
-          h(
-            "div",
-            { className: "dcpa-actions" },
+          )
+        ),
+        !enabled ? h("p", { className: "dcpa-q-msg" }, t("disabledHint")) : null,
+        st.error ? h("p", { className: "dcpa-q-msg", "data-tone": "error", role: "alert" }, st.error) : null,
+        h(
+          "div",
+          { className: "dcpa-q-seg dcpa-acct-tabs", role: "tablist", "aria-label": t("tabsLabel") },
+          tabs.map(([id, label]) =>
             h(
               "button",
               {
+                key: id,
+                id: `dcpa-tab-${account.id}-${id}`,
                 type: "button",
-                className: "dcpa-btn dcpa-btn-primary",
-                disabled: saving || syncing,
-                onClick: () => onSave(false),
+                role: "tab",
+                className: "dcpa-q-seg-tab",
+                "aria-selected": tab === id,
+                "aria-controls": `dcpa-tabpanel-${account.id}-${id}`,
+                onClick: () => setTab(id),
               },
-              saving ? t("savingBtn") : t("saveBtn")
+              label
+            )
+          )
+        ),
+        h(
+          "div",
+          { id: `dcpa-tabpanel-${account.id}-${tab}`, role: "tabpanel", "aria-labelledby": `dcpa-tab-${account.id}-${tab}` },
+          tab === "connection" ? connectionTab : tab === "models" ? modelsTab : h(QuotaPanel, { t, store: sharedQuota, accountId: account.id })
+        ),
+        dirty || notice
+          ? h(
+              "div",
+              { className: "dcpa-savebar", role: "region", "aria-label": t("saveBarLabel") },
+              h(
+                "span",
+                { className: "dcpa-savebar-text", "data-tone": notice && !dirty ? notice.tone : undefined, role: notice ? "status" : undefined },
+                dirty ? (notice?.tone === "error" ? notice.text : t("unsavedChanges")) : notice?.text
+              ),
+              dirty
+                ? h(
+                    "div",
+                    { className: "dcpa-q-actions" },
+                    h(
+                      "button",
+                      {
+                        type: "button",
+                        className: "dcpa-q-btn",
+                        disabled: busy !== null,
+                        onClick: discard,
+                      },
+                      t("discardBtn")
+                    ),
+                    h(
+                      "button",
+                      {
+                        type: "button",
+                        className: "dcpa-q-btn",
+                        "data-variant": "primary",
+                        disabled: busy !== null,
+                        onClick: () => void actions.save(account.id, payload()),
+                      },
+                      saving ? t("savingBtn") : t("saveBtn")
+                    )
+                  )
+                : null
+            )
+          : null
+      );
+    }
+
+    // #region Quota (额度): shared store, model matching, tab page, composer badge
+
+    const QUOTA_POLL_MS = 60 * 1000;
+    // While the host is still collecting a refresh, look again soon.
+    const QUOTA_BUSY_POLL_MS = 4 * 1000;
+    const PROVIDER_NAMES = {
+      claude: "Claude",
+      anthropic: "Claude",
+      codex: "Codex",
+      openai: "OpenAI",
+      devin: "Devin",
+      antigravity: "Antigravity",
+      "gemini-cli": "Gemini CLI",
+      gemini: "Gemini",
+      vertex: "Vertex",
+      aistudio: "AI Studio",
+      kimi: "Kimi",
+      meta: "Meta",
+      xai: "xAI / Grok",
+      qwen: "Qwen",
+      iflow: "iFlow",
+      glm: "GLM",
+      deepseek: "DeepSeek",
+      copilot: "GitHub Copilot",
+    };
+    const WINDOW_KEYS = { "5h": "qWin5h", "7d": "qWin7d", "30d": "qWin30d", "1d": "qWin1d" };
+    const QUOTA_ERROR_KEYS = {
+      unauthorized: "qErrUnauthorized",
+      forbidden: "qErrForbidden",
+      network: "qErrNetwork",
+      timeout: "qErrTimeout",
+      http: "qErrHttp",
+      "invalid-response": "qErrInvalid",
+      "no-endpoint": "qErrNoEndpoint",
+    };
+    const STATUS_KEYS = {
+      active: "qStatusActive",
+      disabled: "qStatusDisabled",
+      unavailable: "qStatusUnavailable",
+      error: "qStatusError",
+    };
+    const MATCH_KEYS = { "model-list": "qMatchModelList", prefix: "qMatchPrefix", family: "qMatchFamily" };
+
+    function fmt(t, key, vars = {}) {
+      let out = String(t(key));
+      for (const [name, value] of Object.entries(vars)) out = out.split(`{${name}}`).join(String(value));
+      return out;
+    }
+
+    function providerName(t, provider) {
+      const key = String(provider ?? "").toLowerCase();
+      return PROVIDER_NAMES[key] ?? (key === "" ? t("qProviderOther") : key);
+    }
+
+    function quotaErrorText(t, account) {
+      const key = QUOTA_ERROR_KEYS[account?.errorCode];
+      if (key === undefined) return null;
+      return fmt(t, key, { status: account.errorStatus ?? "?" });
+    }
+
+    function windowLabel(t, w) {
+      const base = WINDOW_KEYS[w.kind] !== undefined ? t(WINDOW_KEYS[w.kind]) : w.label || t("qWinOther");
+      return w.group ? `${w.group} · ${base}` : base;
+    }
+
+    function durationText(t, ms) {
+      const total = Math.max(1, Math.ceil(ms / 60000));
+      const d = Math.floor(total / 1440);
+      const hrs = Math.floor((total % 1440) / 60);
+      const m = total % 60;
+      if (d > 0) return fmt(t, "qDurDH", { d, h: hrs });
+      if (hrs > 0) return fmt(t, "qDurHM", { h: hrs, m });
+      return fmt(t, "qDurM", { m });
+    }
+
+    function resetText(t, iso, now) {
+      const at = Date.parse(iso ?? "");
+      if (!Number.isFinite(at)) return "";
+      return at <= now ? t("qResetSoon") : fmt(t, "qResetIn", { time: durationText(t, at - now) });
+    }
+
+    function agoText(t, iso, now) {
+      const at = Date.parse(iso ?? "");
+      if (!Number.isFinite(at)) return "";
+      const s = Math.max(0, Math.floor((now - at) / 1000));
+      if (s < 10) return t("qAgoJustNow");
+      if (s < 60) return fmt(t, "qAgoSeconds", { n: s });
+      if (s < 3600) return fmt(t, "qAgoMinutes", { n: Math.floor(s / 60) });
+      if (s < 86400) return fmt(t, "qAgoHours", { n: Math.floor(s / 3600) });
+      return fmt(t, "qAgoDays", { n: Math.floor(s / 86400) });
+    }
+
+    function quotaLevel(pct) {
+      if (typeof pct !== "number" || !Number.isFinite(pct)) return "unknown";
+      if (pct <= 0) return "empty";
+      if (pct < 20) return "low";
+      if (pct < 50) return "mid";
+      return "ok";
+    }
+
+    function pctText(pct) {
+      return typeof pct === "number" && Number.isFinite(pct) ? `${Math.round(pct)}%` : "—";
+    }
+
+    function bareModel(id) {
+      const lower = String(id ?? "").toLowerCase();
+      const slash = lower.indexOf("/");
+      return slash >= 0 ? lower.slice(slash + 1) : lower;
+    }
+
+    /** Whether a quota window applies to `modelId` (untagged windows apply to every model). */
+    function windowAppliesTo(w, modelId) {
+      if (!modelId) return true;
+      const full = String(modelId).toLowerCase();
+      const bare = bareModel(modelId);
+      if (Array.isArray(w.modelIds) && w.modelIds.length > 0) {
+        return w.modelIds.some((m) => {
+          const x = String(m).toLowerCase();
+          return x === full || x === bare || bareModel(x) === bare;
+        });
+      }
+      if (Array.isArray(w.modelPrefixes) && w.modelPrefixes.length > 0) {
+        return w.modelPrefixes.some((p) => bare.startsWith(String(p).toLowerCase()));
+      }
+      return true;
+    }
+
+    function credentialWindows(cred, modelId) {
+      const windows = Array.isArray(cred?.windows) ? cred.windows : [];
+      return modelId ? windows.filter((w) => windowAppliesTo(w, modelId)) : windows;
+    }
+
+    /** The tightest remaining percentage of the windows that apply, or null. */
+    function credentialHeadroom(cred, modelId) {
+      const values = credentialWindows(cred, modelId)
+        .map((w) => w.remainingPercent)
+        .filter((v) => typeof v === "number" && Number.isFinite(v));
+      return values.length > 0 ? Math.min(...values) : null;
+    }
+
+    function quotaAccountForRoute(data, route) {
+      const accounts = Array.isArray(data?.accounts) ? data.accounts : [];
+      return accounts.find((a) => Array.isArray(a.routes) && a.routes.includes(route)) ?? null;
+    }
+
+    function byHeadroomDesc(a, b) {
+      const ua = a.cred.status === "active" ? 0 : 1;
+      const ub = b.cred.status === "active" ? 0 : 1;
+      if (ua !== ub) return ua - ub;
+      const ha = a.headroom ?? -1;
+      const hb = b.headroom ?? -1;
+      return hb - ha;
+    }
+
+    /**
+     * Quota for one picker selection: the account owning the route, then
+     * exactly the credentials the host matched for this model id on that
+     * server (modelIndex), never credentials of another account.
+     */
+    function summarizeModelQuota(data, route, modelId) {
+      const account = quotaAccountForRoute(data, route);
+      if (account === null) return null;
+      const credentials = Array.isArray(account.credentials) ? account.credentials : [];
+      const byId = new Map(credentials.map((c) => [c.id, c]));
+      const ids = Array.isArray(account.modelIndex?.[modelId]) ? account.modelIndex[modelId] : [];
+      const entries = ids
+        .map((id) => byId.get(id))
+        .filter(Boolean)
+        .map((cred) => ({ cred, headroom: credentialHeadroom(cred, modelId), windows: credentialWindows(cred, modelId) }))
+        .sort(byHeadroomDesc);
+      const usable = entries.filter((e) => e.cred.status === "active");
+      const known = usable.map((e) => e.headroom).filter((v) => v !== null);
+      return {
+        account,
+        entries,
+        usableCount: usable.length,
+        best: known.length > 0 ? Math.max(...known) : null,
+      };
+    }
+
+    /** Totals for the overview tiles. */
+    function quotaStats(credentials) {
+      const out = { total: 0, healthy: 0, low: 0, empty: 0, issue: 0, unknown: 0 };
+      for (const cred of credentials) {
+        out.total++;
+        if (cred.status !== "active" || cred.quotaState === "error") {
+          out.issue++;
+          continue;
+        }
+        const level = quotaLevel(credentialHeadroom(cred));
+        if (level === "empty") out.empty++;
+        else if (level === "low") out.low++;
+        else if (level === "ok" || level === "mid") out.healthy++;
+        else out.unknown++;
+      }
+      return out;
+    }
+
+    /**
+     * One page-wide quota client: GET the host snapshot (cached by the host,
+     * which refreshes stale accounts in the background) while anything is
+     * subscribed; POST refresh / key changes. Disposed with the activation.
+     */
+    function createQuotaStore(io = {}) {
+      const fetchImpl = io.fetch ?? ((...args) => fetch(...args));
+      const setT = io.setTimeout ?? ((fn, ms) => setTimeout(fn, ms));
+      const clearT = io.clearTimeout ?? ((id) => clearTimeout(id));
+      const listeners = new Set();
+      let state = { data: null, loading: false, error: null, busy: null, busyAccount: null, loadedAt: 0 };
+      let timer = null;
+      let disposed = false;
+      let seq = 0;
+      const inflight = new Set();
+
+      const emit = (patch) => {
+        if (disposed) return;
+        state = { ...state, ...patch };
+        for (const fn of [...listeners]) fn();
+      };
+
+      const request = async (url, init) => {
+        const controller = new AbortController();
+        inflight.add(controller);
+        try {
+          const res = await fetchImpl(url, { cache: "no-store", ...init, signal: controller.signal });
+          let body = null;
+          try {
+            body = await res.json();
+          } catch {}
+          if (!res.ok || body === null || body.ok === false) {
+            throw new Error(body?.error || `HTTP ${res.status}`);
+          }
+          return body;
+        } finally {
+          inflight.delete(controller);
+        }
+      };
+
+      const schedule = () => {
+        if (timer !== null) clearT(timer);
+        timer = null;
+        if (disposed || listeners.size === 0) return;
+        const delay = state.data?.refreshing ? QUOTA_BUSY_POLL_MS : QUOTA_POLL_MS;
+        timer = setT(() => {
+          timer = null;
+          void load().finally(schedule);
+        }, delay);
+      };
+
+      const load = async () => {
+        const mine = ++seq;
+        emit({ loading: true });
+        try {
+          const body = await request(API.quotaStatus);
+          if (mine === seq) emit({ data: body.quota ?? null, error: null, loading: false, loadedAt: Date.now() });
+        } catch (error) {
+          if (disposed) return;
+          if (mine === seq) emit({ error: error instanceof Error ? error.message : String(error), loading: false });
+        }
+      };
+
+      const mutate = async (kind, url, payload) => {
+        const mine = ++seq;
+        emit({ busy: kind, busyAccount: payload?.accountId ?? null, error: null });
+        try {
+          const body = await request(url, {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify(payload ?? {}),
+          });
+          if (mine === seq) emit({ data: body.quota ?? state.data, loadedAt: Date.now() });
+          emit({ busy: null, busyAccount: null });
+          schedule();
+          return { ok: true };
+        } catch (error) {
+          const message = error instanceof Error ? error.message : String(error);
+          emit({ busy: null, busyAccount: null, ...(mine === seq ? { error: message } : {}) });
+          return { ok: false, error: message };
+        }
+      };
+
+      return {
+        getSnapshot: () => state,
+        subscribe(fn) {
+          listeners.add(fn);
+          if (listeners.size === 1) {
+            if (state.data === null || Date.now() - state.loadedAt > QUOTA_POLL_MS) void load().finally(schedule);
+            else schedule();
+          }
+          return () => {
+            listeners.delete(fn);
+            if (listeners.size === 0 && timer !== null) {
+              clearT(timer);
+              timer = null;
+            }
+          };
+        },
+        load,
+        refresh: (accountId) => mutate("refresh", API.quotaRefresh, accountId ? { accountId } : {}),
+        saveKey: (accountId, managementKey) => mutate("save", API.quotaSave, { accountId, managementKey }),
+        clearKey: (accountId) => mutate("clear", API.quotaSave, { accountId, clear: true }),
+        dispose() {
+          disposed = true;
+          if (timer !== null) clearT(timer);
+          timer = null;
+          for (const c of inflight) c.abort();
+          inflight.clear();
+          listeners.clear();
+        },
+      };
+    }
+
+    let sharedQuota = null;
+
+    /** Subscribe a component to the shared quota store (null when inactive). */
+    function useQuota(store) {
+      const [, setTick] = useState(0);
+      useEffect(() => {
+        if (store === null || store === undefined) return undefined;
+        let alive = true;
+        const off = store.subscribe(() => {
+          if (alive) setTick((n) => n + 1);
+        });
+        return () => {
+          alive = false;
+          off();
+        };
+      }, [store]);
+      return store ? store.getSnapshot() : { data: null, loading: false, error: null, busy: null };
+    }
+
+    /**
+     * Which sessions currently have a composer badge mounted. The composer
+     * renders conversation.input.right only once the session is bound (its
+     * input state exists), but the New Session hero shows the model selector
+     * earlier. The hero badge (conversation.hero.options) therefore renders
+     * only while no composer badge is mounted for the same session, so the
+     * user always sees exactly one badge. Plain in-memory counts; no DOM.
+     */
+    function createBadgePresence() {
+      const counts = new Map();
+      const listeners = new Set();
+      const notify = () => {
+        for (const fn of [...listeners]) fn();
+      };
+      return {
+        add(id) {
+          counts.set(id, (counts.get(id) ?? 0) + 1);
+          notify();
+          let done = false;
+          return () => {
+            if (done) return;
+            done = true;
+            const n = (counts.get(id) ?? 1) - 1;
+            if (n > 0) counts.set(id, n);
+            else counts.delete(id);
+            notify();
+          };
+        },
+        has: (id) => (counts.get(id) ?? 0) > 0,
+        subscribe(fn) {
+          listeners.add(fn);
+          return () => listeners.delete(fn);
+        },
+      };
+    }
+    const composerBadges = createBadgePresence();
+
+    /**
+     * Composer placement announces itself for its session; hero placement
+     * reports whether a composer badge already covers the session.
+     */
+    function useBadgePlacement(placement, sessionId, presence = composerBadges) {
+      const [, setTick] = useState(0);
+      useEffect(() => {
+        if (typeof sessionId !== "string" || sessionId === "") return undefined;
+        if (placement === "hero") {
+          let alive = true;
+          const off = presence.subscribe(() => {
+            if (alive) setTick((n) => n + 1);
+          });
+          setTick((n) => n + 1);
+          return () => {
+            alive = false;
+            off();
+          };
+        }
+        return presence.add(sessionId);
+      }, [placement, sessionId, presence]);
+      return placement === "hero" && typeof sessionId === "string" && presence.has(sessionId);
+    }
+
+    /**
+     * The session's model-directory store, resolved at render time. DSH caches
+     * a slot entry's inject() result per session binding, and right after a
+     * page load, host restart or session switch `directoryFor()` can still
+     * throw (no scope/binding yet). Resolving inside inject would cache that
+     * miss for good, so inject hands over a resolver and this hook retries
+     * (1 s for the first 30 s, then every 5 s) until the directory exists.
+     */
+    function useDirectory(direct, resolve) {
+      const [, setTick] = useState(0);
+      let resolved = direct ?? null;
+      if (resolved === null && typeof resolve === "function") {
+        try {
+          resolved = resolve() ?? null;
+        } catch {
+          resolved = null;
+        }
+      }
+      const missing = resolved === null && typeof resolve === "function";
+      useEffect(() => {
+        if (!missing) return undefined;
+        let alive = true;
+        let id = null;
+        let tries = 0;
+        const tick = () => {
+          id = null;
+          if (!alive) return;
+          tries += 1;
+          setTick((n) => n + 1);
+          id = setTimeout(tick, tries < 30 ? 1000 : 5000);
+        };
+        id = setTimeout(tick, 300);
+        return () => {
+          alive = false;
+          if (id !== null) clearTimeout(id);
+        };
+      }, [missing, resolve]);
+      return resolved;
+    }
+
+    /** Re-render every `ms` so relative times stay current. */
+    function useNow(ms) {
+      const [now, setNow] = useState(() => Date.now());
+      useEffect(() => {
+        const id = setInterval(() => setNow(Date.now()), ms);
+        return () => clearInterval(id);
+      }, [ms]);
+      return now;
+    }
+
+    function QuotaMeter({ t, w, now }) {
+      const pct = typeof w.remainingPercent === "number" ? Math.max(0, Math.min(100, w.remainingPercent)) : null;
+      const level = quotaLevel(pct);
+      const reset = resetText(t, w.resetAt, now);
+      const label = windowLabel(t, w);
+      return h(
+        "div",
+        { className: "dcpa-q-meter", "data-level": level },
+        h(
+          "div",
+          { className: "dcpa-q-meter-top" },
+          h("span", { title: label }, label),
+          h("span", { className: "dcpa-q-pct" }, pctText(pct))
+        ),
+        h(
+          "div",
+          {
+            className: "dcpa-q-track",
+            role: "meter",
+            "aria-label": label,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            ...(pct === null ? {} : { "aria-valuenow": Math.round(pct) }),
+          },
+          h("span", { className: "dcpa-q-fill", style: { width: `${pct ?? 0}%` } })
+        ),
+        reset ? h("span", { className: "dcpa-q-reset" }, reset) : null
+      );
+    }
+
+    function CredentialTags({ t, cred }) {
+      return [
+        cred.plan ? h("span", { key: "plan", className: "dcpa-q-tag", "data-tone": "info" }, cred.plan) : null,
+        cred.prefix ? h("span", { key: "prefix", className: "dcpa-q-tag" }, `${cred.prefix}/`) : null,
+        cred.status && cred.status !== "active"
+          ? h("span", { key: "status", className: "dcpa-q-tag", "data-tone": "danger" }, t(STATUS_KEYS[cred.status] ?? "qStatusError"))
+          : null,
+      ];
+    }
+
+    function CredentialWindows({ t, cred, windows, now }) {
+      if (windows.length > 0) {
+        return h(
+          "div",
+          { className: "dcpa-q-meters" },
+          windows.map((w, i) => h(QuotaMeter, { key: w.id ?? i, t, w, now }))
+        );
+      }
+      const lines = [
+        cred.quotaState === "error"
+          ? h("p", { key: "q", className: "dcpa-q-note", "data-tone": "error" }, t("qQuotaError"))
+          : h("p", { key: "q", className: "dcpa-q-note" }, t(cred.quotaState === "unsupported" ? "qQuotaUnsupported" : "qQuotaNone")),
+        cred.recent ? h("p", { key: "r", className: "dcpa-q-note" }, fmt(t, "qRecent", cred.recent)) : null,
+      ];
+      return h("div", { className: "dcpa-q-meters" }, h("div", null, lines));
+    }
+
+    function CredentialRow({ t, cred, now, pickerIds }) {
+      const [open, setOpen] = useState(false);
+      const models = Array.isArray(cred.models) ? cred.models : null;
+      return h(
+        "div",
+        { className: "dcpa-q-cred", "data-status": cred.status ?? "active" },
+        h(
+          "div",
+          { className: "dcpa-q-who" },
+          h("div", { className: "dcpa-q-name", title: cred.label || cred.id }, cred.label || cred.id),
+          h(
+            "div",
+            { className: "dcpa-q-meta" },
+            CredentialTags({ t, cred }),
+            models === null
+              ? h("span", null, t("qModelsUnknown"))
+              : h(
+                  "button",
+                  { type: "button", className: "dcpa-q-link", "aria-expanded": open, onClick: () => setOpen((v) => !v) },
+                  open ? t("qHideModels") : fmt(t, "qShowModels", { n: models.length })
+                ),
+            cred.statusMessage ? h("span", { title: cred.statusMessage }, cred.statusMessage) : null
+          )
+        ),
+        h(CredentialWindows, { t, cred, windows: credentialWindows(cred), now }),
+        open && models !== null
+          ? h(
+              "div",
+              { className: "dcpa-q-models" },
+              models.map((m) => h("code", { key: m, "data-picker": pickerIds.has(m) ? "true" : "false" }, m))
+            )
+          : null
+      );
+    }
+
+    function ModelChannelMap({ t, account }) {
+      const picker = Array.isArray(account.pickerModels) ? account.pickerModels : [];
+      return h(
+        "details",
+        { className: "dcpa-q-map" },
+        h(
+          "summary",
+          null,
+          h(
+            "div",
+            { className: "dcpa-q-row-main" },
+            h("div", { className: "dcpa-q-title" }, t("qMapTitle"), h(InfoTip, { t, text: t("qMapHint") }))
+          )
+        ),
+        picker.length === 0
+          ? h("p", { className: "dcpa-q-msg" }, t("qMapEmpty"))
+          : picker.map((m) => {
+              const summary = summarizeModelQuota({ accounts: [account] }, m.route, m.id);
+              const entries = summary?.entries ?? [];
+              const matchedBy = account.modelMatch?.[m.id];
+              return h(
+                "div",
+                { key: `${m.route}:${m.id}`, className: "dcpa-q-map-row" },
+                h("span", { className: "dcpa-q-map-model" }, m.id),
+                h(
+                  "span",
+                  { className: "dcpa-q-map-creds" },
+                  entries.length === 0
+                    ? h("span", null, t("qMapNone"))
+                    : entries.map(({ cred }) =>
+                        h(
+                          "span",
+                          { key: cred.id, className: "dcpa-q-tag", "data-tone": cred.status === "active" ? undefined : "danger", title: cred.label || cred.id },
+                          `${providerName(t, cred.provider)} · ${cred.label || cred.id}`
+                        )
+                      ),
+                  matchedBy && MATCH_KEYS[matchedBy] ? h("span", null, t(MATCH_KEYS[matchedBy])) : null
+                ),
+                h("span", { className: "dcpa-q-map-pct dcpa-q-pct" }, pctText(summary?.best))
+              );
+            })
+      );
+    }
+
+    function QuotaSummary({ t, credentials }) {
+      const stats = quotaStats(credentials);
+      const parts = [
+        ["ok", stats.healthy, "qStatHealthy"],
+        ["low", stats.low, "qStatLow"],
+        ["empty", stats.empty, "qStatEmpty"],
+        ["issue", stats.issue, "qStatIssue"],
+        ["unknown", stats.unknown, "qStatUnknown"],
+      ];
+      return h(
+        "div",
+        { className: "dcpa-q-summary" },
+        h(
+          "div",
+          { className: "dcpa-q-dist", role: "img", "aria-label": fmt(t, "qTotalCreds", { n: stats.total }) },
+          parts.filter(([, n]) => n > 0).map(([level, n]) => h("span", { key: level, "data-level": level, style: { flex: `${n} 1 0` } }))
+        ),
+        h(
+          "div",
+          { className: "dcpa-q-legend" },
+          h("span", null, fmt(t, "qTotalCreds", { n: stats.total })),
+          parts.filter(([level, n]) => level !== "unknown" || n > 0).map(([level, n, key]) =>
+            h("span", { key: level, "data-level": level }, h("i", { className: "dcpa-q-swatch" }), t(key), h("b", null, String(n)))
+          )
+        )
+      );
+    }
+
+    /** The "额度" tab: flat DSH settings rows, one account at a time. */
+    function QuotaPanel({ t, store = sharedQuota, accountId }) {
+      const snap = useQuota(store);
+      const now = useNow(30 * 1000);
+      const [activeId, setActiveId] = useState(null);
+      const [keyDraft, setKeyDraft] = useState("");
+      const [notice, setNotice] = useState(null);
+      const [providerFilter, setProviderFilter] = useState("all");
+      const [search, setSearch] = useState("");
+
+      const accounts = Array.isArray(snap.data?.accounts) ? snap.data.accounts : [];
+      const scoped = accountId !== undefined;
+      const account = scoped
+        ? accounts.find((a) => a.accountId === accountId) ?? null
+        : accounts.find((a) => a.accountId === activeId) ?? accounts[0] ?? null;
+      const credentials = Array.isArray(account?.credentials) ? account.credentials : [];
+      const pickerIds = useMemo(() => new Set((account?.pickerModels ?? []).map((m) => m.id)), [account]);
+      const busy = snap.busy !== null;
+
+      const providers = useMemo(() => {
+        const counts = new Map();
+        for (const c of credentials) counts.set(c.provider || "", (counts.get(c.provider || "") ?? 0) + 1);
+        return [...counts.entries()].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]));
+      }, [credentials]);
+
+      const groups = useMemo(() => {
+        const q = search.trim().toLowerCase();
+        const map = new Map();
+        for (const c of credentials) {
+          if (providerFilter !== "all" && (c.provider || "") !== providerFilter) continue;
+          if (
+            q !== "" &&
+            !String(c.label ?? "").toLowerCase().includes(q) &&
+            !String(c.id ?? "").toLowerCase().includes(q) &&
+            !(Array.isArray(c.models) && c.models.some((m) => String(m).toLowerCase().includes(q)))
+          ) continue;
+          const key = c.provider || "";
+          if (!map.has(key)) map.set(key, []);
+          map.get(key).push(c);
+        }
+        // Problems first, then least remaining, so what needs attention is on top.
+        const rank = (c) => (c.status !== "active" ? 1 : 0);
+        return [...map.entries()].map(([key, list]) => [
+          key,
+          [...list].sort((a, b) => rank(a) - rank(b) || (credentialHeadroom(a) ?? 101) - (credentialHeadroom(b) ?? 101)),
+        ]);
+      }, [credentials, providerFilter, search]);
+
+      if (store === null || store === undefined) return null;
+
+      const saveKey = async () => {
+        if (account === null || keyDraft.trim() === "") return;
+        setNotice(null);
+        const result = await store.saveKey(account.accountId, keyDraft.trim());
+        if (result.ok) {
+          setKeyDraft("");
+          setNotice(t("qKeySaved"));
+        }
+      };
+      const clearKey = async () => {
+        if (account === null) return;
+        const name = account.displayName || account.accountId;
+        if (typeof window !== "undefined" && typeof window.confirm === "function" && !window.confirm(fmt(t, "qKeyClearConfirm", { name }))) return;
+        setNotice(null);
+        const result = await store.clearKey(account.accountId);
+        if (result.ok) setNotice(t("qKeyCleared"));
+      };
+
+      const errorText = account ? quotaErrorText(t, account) : null;
+      const refreshing = account?.refreshing === true || (snap.busy === "refresh" && snap.busyAccount === account?.accountId);
+      const shown = groups.reduce((n, [, list]) => n + list.length, 0);
+
+      return h(
+        "div",
+        { className: "dcpa-q", "data-dsh-plugin": MODULE_ID },
+        scoped
+          ? null
+          : h(
+              "div",
+              { className: "dcpa-q-head" },
+              h("h3", { className: "dcpa-q-h" }, t("qTitle")),
+              h("p", { className: "dcpa-q-desc" }, t("qSubtitle"))
             ),
-            cred.configured
-              ? h(
+        scoped && account === null ? h("p", { className: "dcpa-q-msg" }, t("qPeekLoading")) : null,
+        !scoped && accounts.length > 1
+          ? h(
+              "div",
+              { className: "dcpa-q-seg", role: "tablist", "aria-label": t("qAccountsLabel") },
+              accounts.map((a) =>
+                h(
                   "button",
                   {
+                    key: a.accountId,
                     type: "button",
-                    className: "dcpa-btn",
-                    disabled: saving || syncing,
-                    onClick: () => onSave(true),
+                    role: "tab",
+                    className: "dcpa-q-seg-tab",
+                    "aria-selected": account?.accountId === a.accountId,
+                    onClick: () => {
+                      setActiveId(a.accountId);
+                      setKeyDraft("");
+                      setNotice(null);
+                      setProviderFilter("all");
+                      setSearch("");
+                    },
                   },
-                  t("clearKeyBtn")
+                  a.displayName || a.accountId,
+                  a.keyConfigured ? null : h("span", { className: "dcpa-q-seg-note" }, t("qKeyStatusUnset"))
                 )
-              : null,
-            h("span", { style: { flex: 1 } }),
+              )
+            )
+          : null,
+        snap.data !== null && accounts.length === 0 ? h("p", { className: "dcpa-q-msg" }, t("qNoAccounts")) : null,
+        account
+          ? h(
+              "div",
+              { className: "dcpa-q-row" },
+              h(
+                "div",
+                { className: "dcpa-q-row-main" },
+                h(
+                  "div",
+                  { className: "dcpa-q-title" },
+                  h("label", { htmlFor: `dcpa-q-key-${account.accountId}` }, t("qKeyLabel")),
+                  h(InfoTip, { t, text: fmt(t, "qKeyHint", { ref: account.keyRef ?? "" }) })
+                )
+              ),
+              h(
+                "div",
+                { className: "dcpa-q-actions" },
+                h(
+                  "span",
+                  { className: "dcpa-q-tag", "data-tone": account.keyConfigured ? "success" : undefined },
+                  account.keyConfigured ? t("qKeyStatusSet") : t("qKeyStatusUnset")
+                )
+              )
+            )
+          : null,
+        account
+          ? h(
+              "div",
+              { className: "dcpa-q-form" },
+              h("input", {
+                id: `dcpa-q-key-${account.accountId}`,
+                className: "dcpa-q-input",
+                type: "password",
+                autoComplete: "off",
+                spellCheck: false,
+                value: keyDraft,
+                placeholder: account.keyConfigured ? t("qKeySetPlaceholder") : t("qKeyUnsetPlaceholder"),
+                onChange: (e) => setKeyDraft(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") void saveKey();
+                },
+              }),
+              h(
+                "button",
+                { type: "button", className: "dcpa-q-btn", "data-variant": "primary", disabled: busy || keyDraft.trim() === "", onClick: () => void saveKey() },
+                snap.busy === "save" ? t("qKeySaving") : t("qKeySave")
+              ),
+              account.keyConfigured
+                ? h(
+                    "button",
+                    { type: "button", className: "dcpa-q-btn", "data-variant": "danger", disabled: busy, onClick: () => void clearKey() },
+                    t("qKeyClear")
+                  )
+                : null
+            )
+          : null,
+        account && account.keyConfigured
+          ? h(
+              "div",
+              { className: "dcpa-q-row" },
+              h(
+                "div",
+                { className: "dcpa-q-row-main" },
+                h("div", { className: "dcpa-q-title" }, t("qDataLabel")),
+                h(
+                  "div",
+                  { className: "dcpa-q-sub" },
+                  refreshing
+                    ? t("qRefreshing")
+                    : account.fetchedAt
+                    ? fmt(t, "qUpdated", { time: agoText(t, account.fetchedAt, now) })
+                    : t("qNeverUpdated"),
+                  account.enabled === false ? ` · ${t("qAccountDisabled")}` : ""
+                )
+              ),
+              h(
+                "div",
+                { className: "dcpa-q-actions" },
+                h(
+                  "button",
+                  { type: "button", className: "dcpa-q-btn", "data-variant": "outline", disabled: busy || refreshing, onClick: () => void store.refresh(account.accountId) },
+                  t("qRefresh")
+                )
+              )
+            )
+          : null,
+        errorText ? h("p", { className: "dcpa-q-msg", "data-tone": "error", role: "alert" }, errorText, credentials.length > 0 ? ` ${t("qStale")}` : "") : null,
+        snap.error ? h("p", { className: "dcpa-q-msg", "data-tone": "error", role: "alert" }, fmt(t, "qErrLoad", { error: snap.error })) : null,
+        notice ? h("p", { className: "dcpa-q-msg", "data-tone": "ok", role: "status" }, notice) : null,
+        account && account.keyConfigured && credentials.length === 0 && account.state === "ok"
+          ? h("p", { className: "dcpa-q-msg" }, t("qNoCredentials"))
+          : null,
+        account && account.keyConfigured && credentials.length > 0 ? h(QuotaSummary, { t, credentials }) : null,
+        account && account.keyConfigured && (providers.length > 1 || credentials.length > 8)
+          ? h(
+              "div",
+              { className: "dcpa-q-tools" },
+              providers.length > 1
+                ? [["all", credentials.length], ...providers].map(([key, count]) =>
+                    h(
+                      "button",
+                      {
+                        key: key || "_",
+                        type: "button",
+                        className: "dcpa-q-filter",
+                        "aria-pressed": providerFilter === key,
+                        onClick: () => setProviderFilter(key),
+                      },
+                      key === "all" ? t("qFilterAll") : providerName(t, key),
+                      h("small", null, String(count))
+                    )
+                  )
+                : null,
+              credentials.length > 8
+                ? h("input", {
+                    className: "dcpa-q-input",
+                    type: "search",
+                    value: search,
+                    placeholder: t("qSearchPlaceholder"),
+                    "aria-label": t("qSearchPlaceholder"),
+                    onChange: (e) => setSearch(e.target.value),
+                  })
+                : null
+            )
+          : null,
+        account && account.keyConfigured && credentials.length > 0 && shown === 0 ? h("p", { className: "dcpa-q-msg" }, t("qNoMatch")) : null,
+        account && account.keyConfigured
+          ? groups.map(([key, list]) =>
+              h(
+                "section",
+                { key: key || "_", "aria-label": providerName(t, key) },
+                h("div", { className: "dcpa-q-group-title" }, providerName(t, key), h("small", null, String(list.length))),
+                list.map((cred) => h(CredentialRow, { key: cred.id, t, cred, now, pickerIds }))
+              )
+            )
+          : null,
+        account && account.keyConfigured && credentials.length > 0 ? h(ModelChannelMap, { t, account }) : null
+      );
+    }
+
+    /** The CLIProxyAPI settings section: accounts, each with 连接 / 模型 / 额度 tabs. */
+    function CpaSectionPage({ t }) {
+      return h(CpaSettingsPanel, { t });
+    }
+
+    /** Snapshot of the session's model directory (current or pending selection). */
+    function useSelection(directory) {
+      const [, setTick] = useState(0);
+      useEffect(() => {
+        if (!directory || typeof directory.subscribe !== "function") return undefined;
+        let alive = true;
+        const off = directory.subscribe(() => {
+          if (alive) setTick((n) => n + 1);
+        });
+        return () => {
+          alive = false;
+          off?.();
+        };
+      }, [directory]);
+      const snapshot = directory && typeof directory.getSnapshot === "function" ? directory.getSnapshot() : null;
+      const current = snapshot?.pending ?? snapshot?.current ?? null;
+      return current && typeof current.provider === "string" && typeof current.model === "string" ? current : null;
+    }
+
+    /**
+     * Composer badge left of the model picker: signal bars + best remaining
+     * percentage of the credentials that serve the selected model on the
+     * selected model's own CPA account; click opens a peek list. Accounts
+     * without a management key show nothing.
+     */
+    function QuotaBadge({ t, directory: directProp = null, resolveDirectory = null, store = sharedQuota, sessionId = null, placement = "composer", presence = composerBadges }) {
+      const shadowed = useBadgePlacement(placement, sessionId, presence);
+      const directory = useDirectory(directProp, shadowed ? null : resolveDirectory);
+      const selection = useSelection(shadowed ? null : directory);
+      const snap = useQuota(selection ? store : null);
+      const now = useNow(60 * 1000);
+      const [open, setOpen] = useState(false);
+      const [pos, setPos] = useState(null);
+      const wrapRef = useRef(null);
+      const buttonRef = useRef(null);
+
+      const summary = selection ? summarizeModelQuota(snap.data, selection.provider, selection.model) : null;
+      const visible = !shadowed && summary !== null && summary.account.keyConfigured === true;
+
+      useEffect(() => {
+        if (!open) return undefined;
+        const place = () => {
+          const rect = buttonRef.current?.getBoundingClientRect?.();
+          if (!rect || typeof window === "undefined") return;
+          const width = Math.min(340, window.innerWidth - 32);
+          const left = Math.max(16, Math.min(rect.left, window.innerWidth - width - 16));
+          setPos({ left, bottom: Math.max(16, window.innerHeight - rect.top + 6), width });
+        };
+        place();
+        const onDown = (e) => {
+          if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
+        };
+        const onKey = (e) => {
+          if (e.key === "Escape") {
+            setOpen(false);
+            buttonRef.current?.focus?.();
+          }
+        };
+        document.addEventListener("mousedown", onDown, true);
+        document.addEventListener("keydown", onKey, true);
+        window.addEventListener("resize", place);
+        return () => {
+          document.removeEventListener("mousedown", onDown, true);
+          document.removeEventListener("keydown", onKey, true);
+          window.removeEventListener("resize", place);
+        };
+      }, [open]);
+
+      useEffect(() => {
+        if (!visible && open) setOpen(false);
+      }, [visible, open]);
+
+      if (!visible) return null;
+      const { account, entries, best, usableCount } = summary;
+      const loadingFirst = account.fetchedAt === undefined && (account.state === "loading" || account.refreshing === true || account.state === "idle");
+      const level = quotaLevel(best);
+      const label = fmt(t, "qBadgeLabel", { model: selection.model });
+      const errorText = quotaErrorText(t, account);
+      const refreshing = account.refreshing === true || snap.busy === "refresh";
+
+      const peek = open
+        ? h(
+            "div",
+            {
+              className: "dcpa-q-pop",
+              role: "dialog",
+              "aria-label": label,
+              style: pos ? { left: `${pos.left}px`, bottom: `${pos.bottom}px`, width: `${pos.width}px` } : { visibility: "hidden" },
+            },
             h(
-              "button",
-              {
-                type: "button",
-                className: "dcpa-btn dcpa-btn-danger",
-                disabled: saving || syncing || loading,
-                onClick: onRemove,
-              },
-              t("removeAccountBtn")
+              "div",
+              { className: "dcpa-q-pop-head" },
+              h("div", { className: "dcpa-q-pop-model" }, selection.model),
+              h("div", { className: "dcpa-q-pop-sub" }, `${account.displayName || account.accountId} · ${fmt(t, "qPeekCreds", { n: usableCount })}`)
+            ),
+            errorText ? h("p", { className: "dcpa-q-pop-text", "data-tone": "error" }, errorText) : null,
+            loadingFirst ? h("p", { className: "dcpa-q-pop-text" }, t("qPeekLoading")) : null,
+            !loadingFirst && entries.length === 0 ? h("p", { className: "dcpa-q-pop-text" }, t("qPeekNoCreds")) : null,
+            entries.map(({ cred, windows, headroom }, index) =>
+              h(
+                "div",
+                { key: cred.id, className: "dcpa-q-pop-cred" },
+                h(
+                  "div",
+                  { className: "dcpa-q-pop-who" },
+                  h("span", { className: "dcpa-q-tag" }, providerName(t, cred.provider)),
+                  h("span", { className: "dcpa-q-name", title: cred.label || cred.id }, cred.label || cred.id),
+                  index === 0 && cred.status === "active" && headroom !== null && entries.length > 1
+                    ? h("span", { className: "dcpa-q-tag", "data-tone": "success" }, t("qPeekBest"))
+                    : null,
+                  CredentialTags({ t, cred })
+                ),
+                h(CredentialWindows, { t, cred, windows, now })
+              )
+            ),
+            h(
+              "div",
+              { className: "dcpa-q-pop-foot" },
+              h("span", null, account.fetchedAt ? fmt(t, "qUpdated", { time: agoText(t, account.fetchedAt, now) }) : t("qPeekFooter")),
+              h(
+                "button",
+                {
+                  type: "button",
+                  className: "dcpa-q-btn",
+                  disabled: snap.busy !== null || account.refreshing === true,
+                  onClick: () => void store?.refresh(account.accountId),
+                },
+                refreshing ? t("qRefreshing") : t("qRefresh")
+              )
             )
           )
-        )
+        : null;
+
+      return h(
+        "span",
+        { ref: wrapRef, className: "dcpa-q-wrap", "data-placement": placement, "data-dsh-plugin": MODULE_ID },
+        h(
+          "button",
+          {
+            ref: buttonRef,
+            type: "button",
+            className: "dcpa-q-badge",
+            "data-level": level,
+            "aria-label": label,
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            title: label,
+            onClick: () => setOpen((v) => !v),
+          },
+          h("span", { className: "dcpa-q-bars", "data-level": level, "aria-hidden": "true" }, h("i"), h("i"), h("i")),
+          h("span", { className: "dcpa-q-badge-pct" }, loadingFirst ? "…" : pctText(best))
+        ),
+        peek
       );
     }
 
+    // #endregion
+
     const inject = ["slots", "locale"];
 
     function apply(ctx) {
       ctx.effect(() => ctx.locale.register(NS, { zh, en }), "dsh-cliproxyapi: dictionaries");
       const t = ctx.locale.bind(NS);
 
+      // Each activation owns its stylesheet. A hot reload can start the new
+      // activation before the old one is disposed; sharing one element would
+      // let the old disposal remove the new activation's styles.
       if (typeof document !== "undefined") {
-        const styleId = "dsh-cliproxyapi-styles";
-        let styleEl = document.getElementById(styleId);
-        if (!styleEl) {
-          styleEl = document.createElement("style");
-          styleEl.id = styleId;
+        ctx.effect(() => {
+          const styleEl = document.createElement("style");
           styleEl.dataset.plugin = MODULE_ID;
           styleEl.textContent = CSS;
           document.head.appendChild(styleEl);
-        } else {
-          styleEl.textContent = CSS;
-        }
-        ctx.effect(
-          () => () => {
-            styleEl?.remove();
-          },
-          "dsh-cliproxyapi: styles"
-        );
+          return () => styleEl.remove();
+        }, "dsh-cliproxyapi: styles");
       }
 
+      // List and keyed slots reject a second entry with the same id/key at the
+      // same priority. During a hot reload the previous activation may still
+      // hold it, so register one priority lower instead of losing the entry:
+      // the lowest priority renders, and this entry takes over once the old
+      // activation is disposed. The id/key itself stays stable.
+      const registerListEntry = (slots, options, render) => {
+        let priority = options.priority ?? 0;
+        for (let attempt = 0; ; attempt++) {
+          try {
+            return slots.register(priority === 0 ? options : { ...options, priority }, render);
+          } catch (error) {
+            if (attempt >= 4 || !/already has an? (entry|registration)/.test(String(error?.message ?? error))) throw error;
+            priority += 1;
+          }
+        }
+      };
+
       // dshmarket installation client, shared by the card and the opt-in
       // background auto-install runner. No DOM writes; timers and requests
       // are disposed with this activation (HMR/unmount).
@@ -3066,11 +5122,67 @@ window.__ModuleLoader__.load({
         };
       }, "dsh-cliproxyapi: market updates");
 
+      // Quota client shared by the "额度" tab and every composer badge; it
+      // polls only while something is subscribed and aborts on dispose.
+      ctx.effect(() => {
+        const store = createQuotaStore();
+        sharedQuota = store;
+        return () => {
+          store.dispose();
+          if (sharedQuota === store) sharedQuota = null;
+        };
+      }, "dsh-cliproxyapi: quota");
+
+      // Composer: the badge sits in conversation.input.right, which the
+      // composer renders immediately before the model selector. The session's
+      // model directory (ui-model-selection) tells it the selected route/model.
+      // The composer renders that list only once the session is bound, so a
+      // New Session hero (model selector already visible) gets a second entry
+      // in conversation.hero.options; it steps aside while the composer badge
+      // of the same session is mounted (see createBadgePresence).
+      if (typeof ctx.inject === "function") {
+        ctx.inject(["slots", "modelDirectories"], (scope) => {
+          const models = scope.modelDirectories;
+          // Never resolve the directory here: DSH caches this result per
+          // session binding, so an early miss would hide the badge for good.
+          const injectDirectory = (sessionId) => ({
+            resolveDirectory: () => models.directoryFor(sessionId).store,
+            sessionId: typeof sessionId === "string" ? sessionId : null,
+          });
+          const badgeEntry = (name, id, placement) =>
+            scope.slots.inject(name, () =>
+              registerListEntry(
+                scope.slots,
+                {
+                  name,
+                  id,
+                  order: 10000,
+                  label: () => t("tabQuota"),
+                  locale: NS,
+                  inject: injectDirectory,
+                },
+                (props = {}) =>
+                  h(QuotaBadge, {
+                    t,
+                    directory: props.directory ?? null,
+                    resolveDirectory: typeof props.resolveDirectory === "function" ? props.resolveDirectory : null,
+                    sessionId: props.sessionId ?? null,
+                    placement,
+                    store: sharedQuota,
+                  })
+              )
+            );
+          badgeEntry("conversation.input.right", `${NS}:quota`, "composer");
+          badgeEntry("conversation.hero.options", `${NS}:quota-hero`, "hero");
+        });
+      }
+
       // 1. Accounts and models: a page of its own in the Settings dialog's left
       //    navigation (like dshmarket's "Market" section). The slot owner gives
       //    unregistered ids the default nav glyph; no DOM is touched here.
       ctx.slots.inject("settings.section", () =>
-        ctx.slots.register(
+        registerListEntry(
+          ctx.slots,
           {
             name: "settings.section",
             id: SETTINGS_SECTION_ID,
@@ -3078,13 +5190,14 @@ window.__ModuleLoader__.load({
             label: () => t("nav"),
             locale: NS,
           },
-          () => h(CpaSettingsPanel, { t })
+          () => h(CpaSectionPage, { t })
         )
       );
 
       // 2. Plugin updates only, on the bundle page in Sidebar -> Plugins.
       ctx.slots.inject("plugins.bundle.config", () =>
-        ctx.slots.register(
+        registerListEntry(
+          ctx.slots,
           {
             name: "plugins.bundle.config",
             key: MODULE_ID,
@@ -3096,7 +5209,8 @@ window.__ModuleLoader__.load({
 
       // 3. Plugin updates only, as a tab in Settings -> Plugins.
       ctx.slots.inject("settings.plugins.tab", () =>
-        ctx.slots.register(
+        registerListEntry(
+          ctx.slots,
           {
             name: "settings.plugins.tab",
             id: NS,