@nimoxie/dsh-model-organizer 0.3.6 → 0.5.11

package/lib/client.js

@@ -64,6 +64,136 @@ window.__ModuleLoader__.load({
       "providers.expand": "展开顺序面板",
       "providers.collapse": "收起顺序面板",
       "providers.saved": "已保存 ✓",
+      "providers.onlyOne": "当前只有 0–1 个可排序的供应商，没有顺序需要调整；添上第二个之后这里就能拖动排序。",
+      "nav": "模型管理页",
+      "page.title": "模型管理页",
+      "page.subtitle": "总览已配置的供应商与它们提供的模型。",
+      "page.providers": "已配置的供应商",
+      "page.catalog": "官方目录",
+      "page.custom": "自定义供应商",
+      "page.baseUrl": "API 地址",
+      "page.api": "API 格式",
+      "page.apiKey": "API 密钥",
+      "page.keyUnset": "未配置",
+      "page.models": "模型列表",
+      "page.empty": "还没有配置任何供应商。在官方「模型」页添加后，这里会列出来。",
+      "page.loading": "正在读取配置…",
+      "page.readonly": "当前设置不可写（只读环境）。",
+      "page.vision": "视觉",
+      "page.reasoning": "推理等级",
+      "page.keySet": "已配置",
+      "page.keyPlaceholder": "粘贴密钥后点「保存密钥」",
+      "page.keySave": "保存密钥",
+      "page.keyClear": "清除",
+      "page.keyUnavailable": "当前环境不提供凭据服务，密钥请在官方「模型」页设置。",
+      "page.addModel": "添加模型",
+      "page.saving": "保存中…",
+      "page.saved": "已保存 ✓",
+      "page.show": "显示",
+      "page.hide": "隐藏",
+      "page.modelId": "模型 ID",
+      "page.modelContext": "上下文",
+      "page.modelMax": "最大输出",
+      "page.modelsEmptyEdit": "还没有模型，点下面的「添加模型」。",
+      "page.modelIdRequired": "模型 ID 不能为空。",
+      "page.modelIdDuplicate": "模型 ID 不能重复。",
+      "page.capacityInvalid": "容量要写正数，可以用 K / M 后缀（如 256K、1M）。",
+      "page.fetchModels": "获取可用模型",
+      "page.fetching": "获取中…",
+      "page.fetchNone": "这个路由的模型都已经在列表里了。",
+      "page.fetchTitle": "选择要添加的模型",
+      "page.fetchDescription": "以下是模型提供商的可用模型，勾选要添加的模型。",
+      "page.fetchSearch": "搜索模型",
+      "page.fetchNoMatches": "没有匹配的模型。",
+      "page.fetchEmpty": "该提供商没有列出任何模型。",
+      "page.selectAll": "全选",
+      "page.deselectAll": "取消全选",
+      "page.cancel": "取消",
+      "page.adopt": "添加所选",
+      "page.switchOn": "已启用（点击停用）",
+      "page.switchOff": "已停用（点击启用）",
+      "page.switchHint": "开关只影响本插件的模型选择菜单：停用的供应商/模型不会再出现在聊天框的模型菜单里；DSH 配置原样保留。",
+      "page.addProvider": "添加模型提供商",
+      "page.newTitle": "添加模型提供商",
+      "page.newDescription": "新建一条供应商路由。路由 ID 是配置里的键，创建后可继续在右栏调整并补充模型。",
+      "page.route": "路由 ID",
+      "page.routeHint": "字母、数字、点、下划线、连字符；创建后不建议改名。",
+      "page.routeRequired": "路由 ID 不能为空。",
+      "page.routeInvalid": "路由 ID 只能包含字母、数字、点、下划线和连字符。",
+      "page.routeTaken": "该路由已存在，请换一个 ID。",
+      "page.displayNameOptional": "显示名称（可选）",
+      "page.baseUrlOptional": "API 地址（可稍后填写）",
+      "page.keyOptional": "API 密钥（可留空，稍后在右栏填写）",
+      "page.modelsField": "模型 ID（至少一个）",
+      "page.modelsFieldPlaceholder": "例如 glm-4.6, qwen-max（多个用逗号或空格分隔）",
+      "page.modelsFieldHint": "这个路由不在 DSH 的目录里，配置里必须先列出模型，否则它会解析不出模型。填好 API 地址与密钥后可点「从网关获取」自动填。",
+      "page.modelsRequired": "至少要填一个模型 ID：这个路由不在 DSH 的目录里，没有模型它无法解析。",
+      "page.fetchFromGateway": "从网关获取",
+      "page.baseUrlRequired": "「从网关获取」需要先填 API 地址。",
+      "page.deleteProvider": "删除供应商",
+      "page.deleteProviderHint": "删除这条自建路由：它的配置和本页派生的密钥引用会一起移除，无法撤销。官方路由不能在这里删除。",
+      "page.deleteProviderBody": "删除后无法撤销：这条供应商的配置会被移除，本页为它派生的密钥引用也会一并清理（别处配置的密钥不会被删）。",
+      "page.deleteFailed": "删除失败。",
+      "page.test": "测试",
+      "page.testing": "测试中…",
+      "page.testOkShort": "✓ 可用",
+      "page.testMissingShort": "⚠ 不在列表",
+      "page.testFailShort": "✗ 失败",
+      "page.testHint": "让宿主向该供应商询问模型列表，并检查这个模型 ID 是否在其中。自建路由会真的访问网关（用已保存的密钥），目录已描述的路由直接读目录。",
+      "page.testOk": "网关可达，且它返回的模型列表里有这个 ID。",
+      "page.testMissing": "网关可达，但它返回的模型列表里没有这个 ID（可能拼错，或网关没暴露该模型）。",
+      "page.testFailed": "测试失败。",
+      "page.testNoCatalog": "这条路由没有目录、也没有填 API 地址，无法询问网关：先在「API 地址」里填上它的地址再测。",
+      "page.deleteModel": "删除模型",
+      "page.testNeedsId": "先填模型 ID 再测试。",
+      "page.deleteModelHint": "从配置里删掉这个模型（每条路由至少要留一个）",
+      "page.modelDeleted": "模型已删除",
+      "page.openOfficial": "官方模型页",
+      "page.openOfficialHint": "把「模型」这一行交还官方页（菜单不会变，仍然只有「模型」一行；随时可从官方页浮窗的「模型管理页」切回来）",
+      "page.switchFailed": "没找到设置导航，请在左侧直接点「模型」页。",
+      "panel.openOrganizer": "模型管理页",
+      "panel.openOrganizerHint": "接替「模型」这一行：点菜单里的「模型」打开的就是本页（菜单看起来不变）",
+      "page.create": "创建",
+      "page.working": "处理中…",
+      "page.createFailed": "创建失败。",
+      "page.fetchUnavailable": "当前环境不提供模型发现服务，请在官方「模型」页获取。",
+      "page.note": "左栏拖一下就能改顺序；API 地址、协议、供应商与模型改动都是即时保存，密钥只写入凭据库、页面读不回明文。官方路由是只读的，看到「官方」标记就说明要回官方模型页改。",
+      "page.officialGroup": "官方（内置）",
+      "page.officialBadge": "官方",
+      "page.officialHint": "由 DSH 本体提供、设置在自己的页面里；点击这一行会切回官方模型页。",
+      "page.officialRowTitle": "官方路由 · 请到官方模型页编辑（点击前往）",
+      "page.dotOn": "已启用：会出现在本插件的模型菜单里",
+      "page.dotOff": "已停用：不会出现在本插件的模型菜单里",
+      "page.dotHint": "只影响本插件的模型菜单，DSH 配置原样保留",
+      "page.modelOpenHint": "点击编辑模型详情，按住拖动排序",
+      "page.modelDialogTitle": "模型详情",
+      "page.modelDialogNew": "添加模型",
+      "page.modelDialogHint": "保存后立即写回 DSH 配置。",
+      "page.modelDisplayName": "显示名（可选，留空就用 ID）",
+      "page.modelInput": "输入模态",
+      "page.modelText": "文本",
+      "page.modelImage": "图片",
+      "page.modelInputHint": "至少选一个；不勾「图片」的模型在菜单里不会被当成视觉模型。",
+      "page.modelCapacityHint": "支持 128K / 128000 两种写法；留空表示不写进配置。",
+      "page.reasoningMode": "推理等级",
+      "page.reasoningInherit": "继承目录",
+      "page.reasoningNone": "不支持推理",
+      "page.reasoningCustom": "自定义等级",
+      "page.reasoningHint": "只有「自定义等级」会写进配置：左边是菜单里显示的等级名，右边是选中时发给模型的参数值（可留空）。",
+      "page.reasoningLevel": "等级名",
+      "page.reasoningValue": "发送值",
+      "page.reasoningAdd": "添加等级",
+      "page.reasoningRemove": "删除等级",
+      "page.reasoningRequired": "自定义等级至少要有一个等级名。",
+      "page.reasoningDuplicate": "等级名不能重复。",
+      "page.modelEnable": "启用",
+      "page.modelDelete": "删除此模型",
+      "page.modelDeleteHint": "删除后立即写回配置，无法撤销。",
+      "page.saveModel": "保存模型",
+      "page.cancelModel": "取消",
+      "protocol.completions": "Chat Completions (/chat/completions)",
+      "protocol.responses": "Responses (/responses)",
+      "protocol.messages": "Anthropic Messages (/v1/messages)",
     };
     const en = {
       "composer.title": "Select model",
@@ -94,15 +224,147 @@ window.__ModuleLoader__.load({
       "providers.expand": "Expand the order panel",
       "providers.collapse": "Collapse the order panel",
       "providers.saved": "Saved ✓",
+      "providers.onlyOne": "Nothing to order yet — with 0–1 sortable providers the list is empty; a second one turns this into a drag surface.",
+      "nav": "Model manager",
+      "page.title": "Model manager",
+      "page.subtitle": "An overview of the configured providers and the models they serve.",
+      "page.providers": "Configured providers",
+      "page.catalog": "Catalog providers",
+      "page.custom": "Custom providers",
+      "page.baseUrl": "Base URL",
+      "page.api": "API format",
+      "page.apiKey": "API key",
+      "page.keyUnset": "Not configured",
+      "page.models": "Models",
+      "page.empty": "No providers are configured yet. Add one on the official Models page and it shows up here.",
+      "page.loading": "Reading configuration…",
+      "page.readonly": "This settings document is read-only here.",
+      "page.vision": "vision",
+      "page.reasoning": "reasoning",
+      "page.keySet": "Configured",
+      "page.keyPlaceholder": "Paste the key, then Save key",
+      "page.keySave": "Save key",
+      "page.keyClear": "Clear",
+      "page.keyUnavailable": "No credential service in this build; set the key on the official Models page.",
+      "page.addModel": "Add model",
+      "page.saving": "Saving…",
+      "page.saved": "Saved ✓",
+      "page.show": "Show",
+      "page.hide": "Hide",
+      "page.modelId": "Model ID",
+      "page.modelContext": "Context",
+      "page.modelMax": "Max output",
+      "page.modelsEmptyEdit": "No models yet — use Add model below.",
+      "page.modelIdRequired": "A model ID cannot be empty.",
+      "page.modelIdDuplicate": "Model IDs must be unique.",
+      "page.capacityInvalid": "Capacities must be positive numbers, optionally with a K or M suffix.",
+      "page.fetchModels": "Fetch models",
+      "page.fetching": "Fetching…",
+      "page.fetchNone": "Every listed model is already in this route.",
+      "page.fetchTitle": "Choose models to add",
+      "page.fetchDescription": "These are the models this provider lists. Pick the ones to add.",
+      "page.fetchSearch": "Search models",
+      "page.fetchNoMatches": "No matching models.",
+      "page.fetchEmpty": "This provider listed no models.",
+      "page.selectAll": "Select all",
+      "page.deselectAll": "Deselect all",
+      "page.cancel": "Cancel",
+      "page.adopt": "Add selected",
+      "page.switchOn": "Enabled (click to disable)",
+      "page.switchOff": "Disabled (click to enable)",
+      "page.switchHint": "These switches only affect this plugin's pickers: a disabled route or model stops appearing in the composer's model menu. The DSH config is left untouched.",
+      "page.addProvider": "Add model provider",
+      "page.newTitle": "Add model provider",
+      "page.newDescription": "Create a new provider route. The route ID is the config key; you can adjust it and add models on the right afterwards.",
+      "page.route": "Route ID",
+      "page.routeHint": "Letters, digits, dot, underscore, hyphen; renaming later is not recommended.",
+      "page.routeRequired": "The route ID cannot be empty.",
+      "page.routeInvalid": "A route ID may only contain letters, digits, dot, underscore and hyphen.",
+      "page.routeTaken": "That route already exists — pick another ID.",
+      "page.displayNameOptional": "Display name (optional)",
+      "page.baseUrlOptional": "Base URL (can be filled in later)",
+      "page.keyOptional": "API key (leave empty, fill it on the right later)",
+      "page.modelsField": "Model IDs (at least one)",
+      "page.modelsFieldPlaceholder": "e.g. glm-4.6, qwen-max (comma or space separated)",
+      "page.modelsFieldHint": "DSH's catalog does not describe this route, so the config must list its models — otherwise the route resolves no models. Fill the API address and key, then use Fetch from gateway.",
+      "page.modelsRequired": "List at least one model ID: the catalog does not describe this route, so it cannot resolve without models.",
+      "page.fetchFromGateway": "Fetch from gateway",
+      "page.baseUrlRequired": "Fetch from gateway needs the API address first.",
+      "page.deleteProvider": "Delete provider",
+      "page.deleteProviderHint": "Delete this hand-declared route: its profile and the credential reference this page derived go with it, and it cannot be undone. Built-in routes cannot be deleted here.",
+      "page.deleteProviderBody": "This cannot be undone: the provider's profile is removed and the credential reference this page derived is cleaned up (a key configured elsewhere is left alone).",
+      "page.deleteFailed": "Deleting failed.",
+      "page.test": "Test",
+      "page.testing": "Testing…",
+      "page.testOkShort": "✓ reachable",
+      "page.testMissingShort": "⚠ not listed",
+      "page.testFailShort": "✗ failed",
+      "page.testHint": "Asks the host which models this provider serves and checks whether this model ID is among them. A hand-declared route really calls the gateway (with the stored key); a catalog route answers from the catalog.",
+      "page.testOk": "The gateway answered and lists this ID.",
+      "page.testMissing": "The gateway answered, but its model list does not contain this ID (typo, or the gateway does not expose it).",
+      "page.testFailed": "The test failed.",
+      "page.testNoCatalog": "This route has no catalog and no API address, so the gateway cannot be asked: fill in the API address first.",
+      "page.deleteModel": "Delete model",
+      "page.testNeedsId": "Give the model an ID before testing it.",
+      "page.deleteModelHint": "Remove this model from the configuration (every route keeps at least one)",
+      "page.modelDeleted": "Model deleted",
+      "page.openOfficial": "Official Models page",
+      "page.openOfficialHint": "Hand the Models row back to the shipped page (the menu does not change; switch back any time from the panel)",
+      "page.switchFailed": "The settings nav was not found — pick the Models page on the left.",
+      "panel.openOrganizer": "Model manager",
+      "panel.openOrganizerHint": "Take the Models row over: the menu entry opens this page instead (the menu itself does not change)",
+      "page.create": "Create",
+      "page.working": "Working…",
+      "page.createFailed": "Creating the route failed.",
+      "page.fetchUnavailable": "No model-discovery service in this build; use the official Models page.",
+      "page.note": "Drag the left rail to reorder; the API address, protocol, provider and model edits all save immediately; the key goes to the credential store and is never read back. Built-in routes are read-only — an \"official\" tag means the shipped Models page owns them.",
+      "page.officialGroup": "Official (built-in)",
+      "page.officialBadge": "Official",
+      "page.officialHint": "Provided by DSH itself and configured on its own page; clicking this row switches back to the shipped Models page.",
+      "page.officialRowTitle": "Built-in route — edit it on the shipped Models page (click to go there)",
+      "page.dotOn": "Enabled: it appears in this plugin's model menu",
+      "page.dotOff": "Disabled: it stays out of this plugin's model menu",
+      "page.dotHint": "Only affects this plugin's model menu; the DSH config is untouched",
+      "page.modelOpenHint": "Click to edit this model, press and drag to reorder",
+      "page.modelDialogTitle": "Model details",
+      "page.modelDialogNew": "Add model",
+      "page.modelDialogHint": "Saving writes straight back to the DSH config.",
+      "page.modelDisplayName": "Display name (optional — the ID is used when empty)",
+      "page.modelInput": "Input modalities",
+      "page.modelText": "Text",
+      "page.modelImage": "Image",
+      "page.modelInputHint": "Pick at least one; a model without \"Image\" is not treated as a vision model.",
+      "page.modelCapacityHint": "Both 128K and 128000 work; an empty box writes nothing.",
+      "page.reasoningMode": "Reasoning levels",
+      "page.reasoningInherit": "Inherit from catalog",
+      "page.reasoningNone": "No reasoning",
+      "page.reasoningCustom": "Custom levels",
+      "page.reasoningHint": "Only \"Custom levels\" is written to the config: the left box is the level name shown in the menu, the right one is the value sent to the model (may be empty).",
+      "page.reasoningLevel": "Level",
+      "page.reasoningValue": "Sent value",
+      "page.reasoningAdd": "Add level",
+      "page.reasoningRemove": "Remove level",
+      "page.reasoningRequired": "A custom level list needs at least one level name.",
+      "page.reasoningDuplicate": "Level names must be unique.",
+      "page.modelEnable": "Enabled",
+      "page.modelDelete": "Delete this model",
+      "page.modelDeleteHint": "Deleting writes back immediately and cannot be undone.",
+      "page.saveModel": "Save model",
+      "page.cancelModel": "Cancel",
+      "protocol.completions": "Chat Completions (/chat/completions)",
+      "protocol.responses": "Responses (/responses)",
+      "protocol.messages": "Anthropic Messages (/v1/messages)",
     };
 
     /* --------------------------- official CSS classes -------------------------- */
     /* The shipped client-ui-model-selection bundle injects its CSS-module sheet and
        STILL loads (this plugin only shadows its seat), so reusing its class names
        reproduces the shipped look exactly. The hash is resolved from the live
-       stylesheet so a dsh upgrade cannot silently drop the styling. */
+       stylesheet so a dsh upgrade cannot silently drop the styling. A class the
+       shipped sheet stops defining must be probed for at runtime (see
+       `hasGroupSection`); `groupTitle` left the sheet in DSH 0.2.1-rc.2. */
     const CLASS_SUFFIXES = ["root", "trigger", "triggerLabel", "triggerEffort", "triggerIcon", "chevron", "chevronOpen",
-      "menu", "status", "empty", "error", "warning", "retry", "groups", "group", "groupTitle",
+      "menu", "status", "empty", "error", "warning", "retry", "groups", "group",
       "option", "selected", "optionCopy", "modelName", "check", "cell", "cellLabel", "cellValue", "cellChevron",
       "searchRow", "search", "searchWithQuery", "searchClear"];
 
@@ -115,7 +377,7 @@ window.__ModuleLoader__.load({
        code changes, so a browser can keep running an old build until a hard reload.
        Kept OFF the UI (it is not user-facing): read it as
        `window.__dshModelOrganizerBuild` when a stale build is suspected. */
-    const BUILD = "b33";
+    const BUILD = "b65";
 
     let officialClasses = null;
     let officialClassesSheets = -1;
@@ -174,6 +436,14 @@ window.__ModuleLoader__.load({
       for (let i = 0; i < selectors.length; i++) {
         if (selectors[i].indexOf(searchMarker) !== -1) { out.hasSearchRow = true; break; }
       }
+      /* 0.2.1-rc.2 dropped the per-group SECTION class while keeping `groups`
+         (plural), so probe with a boundary: a bare `_group` match would also hit
+         `_groups` and claim a class the sheet never defines. */
+      const groupMarker = new RegExp("\\." + prefix + "_group(?![A-Za-z0-9_-])");
+      out.hasGroupSection = false;
+      for (let i = 0; i < selectors.length; i++) {
+        if (groupMarker.test(selectors[i])) { out.hasGroupSection = true; break; }
+      }
       officialClasses = out;
       return out;
     }
@@ -200,6 +470,18 @@ window.__ModuleLoader__.load({
           ".dsh-mo-head:focus-visible{outline:none;background:var(--dsw-alias-interactive-bg-hover);}",
           ".dsh-mo-list .dsh-mo-head.dsh-mo-head:focus-visible,.dsh-mo-list .dsh-mo-model.dsh-mo-model:focus-visible,.dsh-mo-list .dsh-mo-row.dsh-mo-row:focus-visible{background:transparent;}",
           ".dsh-mo-panelhead.dsh-mo-panelhead:focus-visible{background:var(--dsw-alias-interactive-bg-hover);}",
+          /* Ghost icon actions (row delete / model test): the shipped kit's icons inherit
+             currentColor, so the state lives entirely in these three rules. */
+          ".dsh-mo-act{color:var(--dsw-alias-label-secondary);transition:background .12s ease,color .12s ease;}",
+          ".dsh-mo-act:hover{background:var(--dsw-alias-interactive-bg-hover);}",
+          ".dsh-mo-act:disabled{opacity:.45;cursor:not-allowed;background:transparent;}",
+          ".dsh-mo-act-danger{color:var(--dsw-alias-state-error, #f85149);}",
+          ".dsh-mo-act-ok{color:var(--dsw-alias-state-success, #3fb950);}",
+          ".dsh-mo-act-miss{color:var(--dsw-alias-state-warn-label, #d29922);}",
+          /* IconLoadingOutlineRegular is a still glyph; the spin lives here. */
+          "@keyframes dsh-mo-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}",
+          ".dsh-mo-act-busy svg{animation:dsh-mo-spin .9s linear infinite;}",
+
           ".dsh-mo-chev{transition:transform .12s ease;}",
           ".dsh-mo-head[aria-expanded='true'] .dsh-mo-chev{transform:rotate(90deg);}",
           ".dsh-mo-row{border-width:1px;border-style:solid;border-color:transparent;}",
@@ -218,6 +500,13 @@ window.__ModuleLoader__.load({
              hover tint. Doubled selectors outrank the shipped `cell` :hover rule. */
           ".dsh-mo-panelhead.dsh-mo-panelhead{cursor:grab;}",
           ".dsh-mo-panelhead.dsh-mo-panelhead:hover{background:transparent;}",
+          /* Page rows the shipped sheet has no class for (the editable model rows):
+             same hover tint as the panel's rows, no cursor change — the grip does that. */
+          ".dsh-mo-pagerow{display:flex;flex-direction:column;gap:5px;min-width:0;padding:6px 8px;border-radius:8px;background:var(--dsw-alias-interactive-bg, rgba(127,127,127,.06));transition:background .12s ease;}",
+          ".dsh-mo-pagerow:hover{background:var(--dsw-alias-interactive-bg-hover);}",
+          ".dsh-mo-grip{cursor:grab;}",
+          ".dsh-mo-grip:active{cursor:grabbing;}",
+          ".dsh-mo-nohover.dsh-mo-nohover .dsh-mo-pagerow:hover{background:var(--dsw-alias-interactive-bg, rgba(127,127,127,.06));}",
           ".dsh-mo-list{display:flex;flex-direction:column;gap:2px;margin-top:2px;}",
           ".dsh-mo-head{touch-action:none;user-select:none;-webkit-user-select:none;}",
           /* Borrowed from the sidebar rows: without -webkit-user-drag the browser treats
@@ -266,6 +555,15 @@ window.__ModuleLoader__.load({
       return h(P[name], props ? Object.assign({}, props) : {});
     }
 
+    /* The shipped kit (94 icons) is reached through the primitives module, same as the
+       official pages do. Outside the app (headless harness, or a build without it) keep a
+       neutral glyph in the same box so nothing collapses. */
+    function kitIcon(name, glyph, size) {
+      const rendered = icon(name, { size: size });
+      if (rendered !== null) return rendered;
+      return h("span", { "aria-hidden": "true", style: { fontSize: size - 3, lineHeight: 1 } }, glyph);
+    }
+
     /* --------------------------------- styles --------------------------------- */
     const S = {
       chip: {
@@ -301,8 +599,10 @@ window.__ModuleLoader__.load({
       },
       fallbackCopy: { display: "flex", flexDirection: "column", flex: 1, minWidth: 0 },
       fallbackCheck: { flex: "0 0 18px", display: "grid", placeItems: "center" },
-      /* the shipped groupTitle is a plain heading; the clickable variant only adds
-         layout + affordance so the visuals keep coming from the shipped sheet. */
+      /* The shipped sheet dropped the per-group heading and section classes in
+         0.2.1-rc.2, so the header rides the shipped `cell` row plus our own
+         dsh-mo-head, and the section falls back to fallbackGroup — which is a
+         STYLE object, never a class name. */
       groupChevron: { color: "var(--dsw-alias-label-tertiary)", flex: "none", transition: "transform .12s" },
       measureStyle: { visibility: "hidden", left: 0, top: 0 },
       groupCount: { fontSize: 10, color: "var(--dsw-alias-label-tertiary)", flex: "none" },
@@ -327,6 +627,8 @@ window.__ModuleLoader__.load({
       /* The shipped `cell` sets min-width:100%; the head must stay inside the panel. */
       panelHeadCell: { display: "flex", alignItems: "center", gap: 6, flex: "1 1 auto", minWidth: 0 },
       floatBody: { display: "flex", flexDirection: "column", gap: 2, overflowY: "auto", maxHeight: "52vh", padding: "2px 4px 4px" },
+      /* The cross-link rides in the head row, next to the title; it isolates the pointer
+         events so it neither drags the panel nor collapses it. */
 
       boxHead: { display: "flex", alignItems: "center", gap: 8, marginBottom: 6, flexWrap: "wrap" },
       boxTitle: { fontSize: 12, fontWeight: 600, color: "var(--dsw-alias-label-primary)" },
@@ -358,7 +660,238 @@ window.__ModuleLoader__.load({
       /* Right-aligned "N models" count on a provider row (fallback styling only). */
       rowMeta: { flex: "none", fontSize: 10, color: "var(--dsw-alias-label-tertiary)" },
       dirty: { fontSize: 11, color: "var(--dsw-alias-state-warn-label, #d29922)" },
-      ok: { fontSize: 11, color: "var(--dsw-alias-state-success, #3fb950)" }
+      ok: { fontSize: 11, color: "var(--dsw-alias-state-success, #3fb950)" },
+
+      /* The organizer page (a `settings.section` entry): a two-column master/detail
+         reading the same mirror the footer panel does. Read-only by design — the
+         shipped page stays the editor, this one is the overview. */
+      pageRoot: { display: "flex", flexDirection: "column", gap: 12, width: "100%", minWidth: 0, color: "var(--dsw-alias-label-primary)" },
+      pageHead: { display: "flex", flexDirection: "column", gap: 3 },
+      pageTitleRow: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 },
+      /* Both cross-links are pills next to a title, so they must not look like the
+         full-size action buttons in the body. */
+      linkPill: {
+        boxSizing: "border-box", flex: "none", padding: "1px 7px", borderRadius: 999, fontSize: 11,
+        lineHeight: "16px", cursor: "pointer", color: "var(--dsw-alias-label-secondary)",
+        background: "var(--dsw-alias-interactive-bg, rgba(127,127,127,.10))",
+        borderWidth: 1, borderStyle: "solid", borderColor: "var(--dsw-alias-border-l1)"
+      },
+      switchLabel: {
+        display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11,
+        color: "var(--dsw-alias-label-secondary)", cursor: "pointer", userSelect: "none"
+      },
+      linkPillOn: {
+        color: "var(--dsw-alias-label-primary)",
+        background: "var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,.20))",
+        borderColor: "var(--dsw-alias-state-accent, #4f8cff)"
+      },
+      pageTitle: { margin: 0, fontSize: 16, fontWeight: 600, color: "var(--dsw-alias-label-primary)" },
+      pageSubtitle: { margin: 0, fontSize: 12, lineHeight: "18px", color: "var(--dsw-alias-label-tertiary)" },
+      pageGrid: { display: "grid", gridTemplateColumns: "minmax(170px, 210px) minmax(0, 1fr)", gap: 14, alignItems: "start" },
+      pageList: { display: "flex", flexDirection: "column", gap: 2, minWidth: 0 },
+      pageGroup: { fontSize: 11, fontWeight: 600, padding: "2px 8px 4px", color: "var(--dsw-alias-label-tertiary)" },
+      /* The current provider is marked with an accent bar, never with an inline
+         background: an inline background would beat the shipped :hover rule and the
+         row would stop reacting to the pointer — the panel's rows had the same trap. */
+      pageRowCurrent: { boxShadow: "inset 2px 0 0 0 var(--dsw-alias-state-accent, #4f8cff)" },
+      pageDot: { flex: "0 0 6px", width: 6, height: 6, borderRadius: "50%", background: "var(--dsw-alias-state-success, #3fb950)" },
+      pageDotMuted: { background: "var(--dsw-alias-label-tertiary)" },
+      pageRowName: { flex: "1 1 auto", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+      pageRowCount: { flex: "none", fontSize: 10, color: "var(--dsw-alias-label-tertiary)" },
+      pageDetail: {
+        display: "flex", flexDirection: "column", gap: 10, minWidth: 0, padding: 14,
+        border: "1px solid var(--dsw-alias-border-l1)", borderRadius: 12,
+        background: "var(--dsw-alias-bg-module-secondary, transparent)"
+      },
+      pageDetailHead: { display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" },
+      pageDetailTitle: { margin: 0, fontSize: 15, fontWeight: 600 },
+      pageDetailRoute: { fontSize: 11, color: "var(--dsw-alias-label-tertiary)" },
+      pageFacts: { display: "flex", flexDirection: "column", gap: 6 },
+      pageFact: { display: "grid", gridTemplateColumns: "84px minmax(0, 1fr)", gap: 10, alignItems: "baseline", fontSize: 12 },
+      pageFactLabel: { color: "var(--dsw-alias-label-tertiary)" },
+      pageFactValue: { color: "var(--dsw-alias-label-secondary)", wordBreak: "break-all" },
+      pageSectionHead: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 8 },
+      pageSectionLabel: { fontSize: 12, fontWeight: 600 },
+      pageHint: { fontSize: 10, color: "var(--dsw-alias-label-tertiary)" },
+      pageEmpty: { margin: 0, fontSize: 12, lineHeight: "18px", color: "var(--dsw-alias-label-tertiary)" },
+      pageModels: { display: "flex", flexDirection: "column", gap: 4 },
+      pageModelRow: {
+        display: "flex", alignItems: "center", gap: 8, minWidth: 0, padding: "5px 8px", borderRadius: 8,
+        fontSize: 12, background: "var(--dsw-alias-interactive-bg, rgba(127,127,127,.06))"
+      },
+      pageModelId: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" },
+      pageModelName: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--dsw-alias-label-tertiary)" },
+      pageSpacer: { flex: "1 1 auto", minWidth: 0 },
+      pageChip: { flex: "none", padding: "1px 6px", borderRadius: 6, fontSize: 10, border: "1px solid var(--dsw-alias-border-l1)", color: "var(--dsw-alias-label-tertiary)" },
+      pageLoading: { margin: 0, fontSize: 12, color: "var(--dsw-alias-label-tertiary)" },
+      pageFooterHint: { margin: 0, fontSize: 10, lineHeight: "16px", color: "var(--dsw-alias-label-tertiary)" },
+      /* The fetch picker: portaled to document.body like the footer panel, because a
+         fixed card inside the settings subtree is trapped in its stacking context. */
+      pickBackdrop: {
+        position: "fixed", inset: 0, zIndex: 10000, display: "flex", alignItems: "center",
+        justifyContent: "center", padding: 16, background: "rgba(0,0,0,.45)"
+      },
+      pickCard: {
+        display: "flex", flexDirection: "column", gap: 10, width: "min(520px, 92vw)", maxHeight: "min(80vh, 640px)",
+        padding: 16, borderRadius: 14, color: "var(--dsw-alias-label-primary)",
+        /* Frost parity with the footer panel (S.floatPanel): the theme's menu token is
+           an opaque color-mix, and with today's translucent theme value the token alone
+           leaves the card see-through. Mix it back toward transparent and blur what sits
+           behind it, exactly like the panel does. */
+        background: "color-mix(in srgb, var(--dsw-specific-menu, #26262a) 50%, transparent)",
+        backdropFilter: "var(--dsw-menu-backdrop-filter, blur(28px) saturate(1.6))",
+        WebkitBackdropFilter: "var(--dsw-menu-backdrop-filter, blur(28px) saturate(1.6))",
+        borderWidth: 1, borderStyle: "solid", borderColor: "var(--dsw-alias-border-l1)",
+        boxShadow: "var(--dsw-elevation-prominent, 0 10px 30px rgba(0,0,0,.34))"
+      },
+      pickHead: { display: "flex", alignItems: "center", gap: 8 },
+      pickTitle: { margin: 0, fontSize: 15, fontWeight: 600, flex: "1 1 auto" },
+      pickDesc: { margin: 0, fontSize: 12, lineHeight: "18px", color: "var(--dsw-alias-label-tertiary)" },
+      pickTools: { display: "flex", alignItems: "center", gap: 8 },
+      pickList: { display: "flex", flexDirection: "column", gap: 2, overflowY: "auto", minHeight: 0, paddingRight: 2 },
+      pickRow: { display: "flex", alignItems: "center", gap: 8, padding: "3px 6px", borderRadius: 7, cursor: "pointer", fontSize: 12 },
+      pickId: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" },
+      pickFoot: { display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 8 },
+      /* Editable surface: one grid row per field so the label column stays aligned,
+         and controls that inherit the theme instead of the browser defaults. */
+      /* Label above control, full-width control: inside the settings column (~700px)
+         a fixed label column squeezed every input and the rows ended up unreadable. */
+      pageField: { display: "flex", flexDirection: "column", gap: 4, minWidth: 0, fontSize: 12 },
+      pageFieldLabel: { color: "var(--dsw-alias-label-tertiary)", fontSize: 12 },
+      pageInput: {
+        boxSizing: "border-box", minWidth: 0, padding: "4px 8px", borderRadius: 7, fontSize: 12,
+        color: "var(--dsw-alias-label-primary)",
+        background: "var(--dsw-alias-bg-module, rgba(127,127,127,.08))",
+        borderWidth: 1, borderStyle: "solid", borderColor: "var(--dsw-alias-border-l1)",
+        outline: "none"
+      },
+      pageInputWide: {
+        boxSizing: "border-box", width: "100%", minWidth: 0, padding: "4px 8px", borderRadius: 7, fontSize: 12,
+        color: "var(--dsw-alias-label-primary)",
+        background: "var(--dsw-alias-bg-module, rgba(127,127,127,.08))",
+        borderWidth: 1, borderStyle: "solid", borderColor: "var(--dsw-alias-border-l1)",
+        outline: "none"
+      },
+      pageInputMono: { flex: "1 1 auto", minWidth: 0, fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" },
+      pageModelTop: { display: "flex", alignItems: "center", gap: 6, minWidth: 0 },
+      pageModelFields: { display: "grid", gridTemplateColumns: "92px 92px auto", gap: 6, alignItems: "center", paddingLeft: 18 },
+      /* A native <select> popup is painted by the platform: in this theme its list came
+         out white-on-white. Three radio-style segments are painted by us, so the choice
+         is legible whatever the platform does. */
+      /* Drawn by us: a native checkbox in this theme is what the row already uses for
+         "vision", but a switch reads as an on/off state at a glance. */
+      switchTrack: {
+        boxSizing: "border-box", flex: "none", width: 30, height: 17, padding: 2, borderRadius: 9,
+        display: "inline-flex", alignItems: "center", justifyContent: "flex-start", cursor: "pointer",
+        background: "var(--dsw-alias-interactive-bg, rgba(127,127,127,.25))",
+        borderWidth: 1, borderStyle: "solid", borderColor: "var(--dsw-alias-border-l1)",
+        transition: "background .12s ease, border-color .12s ease"
+      },
+      switchTrackOn: {
+        background: "var(--dsw-alias-state-accent, #4f8cff)",
+        borderColor: "var(--dsw-alias-state-accent, #4f8cff)",
+        justifyContent: "flex-end"
+      },
+      switchKnob: { width: 11, height: 11, borderRadius: "50%", background: "#fff", boxShadow: "0 1px 2px rgba(0,0,0,.35)" },
+      pageDim: { opacity: 0.5 },
+      /* Same affordance as the shipped Models page: a dashed full-width box under the
+         last row of the list. */
+      pageAddButton: {
+        boxSizing: "border-box", width: "100%", marginTop: 4, padding: "8px 10px", borderRadius: 10,
+        display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
+        fontSize: 12, cursor: "pointer", color: "var(--dsw-alias-label-tertiary)",
+        background: "transparent",
+        borderWidth: 1, borderStyle: "dashed", borderColor: "var(--dsw-alias-border-l1)"
+      },
+      pageError: { margin: 0, fontSize: 11, lineHeight: "16px", color: "var(--dsw-alias-state-error, #f85149)" },
+      pageSegments: { display: "flex", gap: 6, minWidth: 0, flexWrap: "wrap" },
+      pageSegment: {
+        boxSizing: "border-box", flex: "1 1 auto", minWidth: 0, padding: "5px 8px", borderRadius: 7, fontSize: 12,
+        cursor: "pointer", textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
+        color: "var(--dsw-alias-label-secondary)",
+        background: "var(--dsw-alias-interactive-bg, rgba(127,127,127,.10))",
+        borderWidth: 1, borderStyle: "solid", borderColor: "var(--dsw-alias-border-l1)"
+      },
+      pageSegmentActive: {
+        color: "var(--dsw-alias-label-primary)",
+        background: "var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,.20))",
+        borderColor: "var(--dsw-alias-state-accent, #4f8cff)"
+      },
+      pageSelect: {
+        boxSizing: "border-box", padding: "4px 8px", borderRadius: 7, fontSize: 12,
+        color: "var(--dsw-alias-label-primary)",
+        background: "var(--dsw-alias-bg-module, rgba(127,127,127,.08))",
+        borderWidth: 1, borderStyle: "solid", borderColor: "var(--dsw-alias-border-l1)"
+      },
+      pageButton: {
+        boxSizing: "border-box", flex: "none", padding: "4px 10px", borderRadius: 7, fontSize: 12, cursor: "pointer",
+        color: "var(--dsw-alias-label-secondary)",
+        background: "var(--dsw-alias-interactive-bg, rgba(127,127,127,.10))",
+        borderWidth: 1, borderStyle: "solid", borderColor: "var(--dsw-alias-border-l1)"
+      },
+      pageButtonPrimary: {
+        flex: "none", padding: "4px 10px", borderRadius: 7, fontSize: 12, cursor: "pointer",
+        color: "var(--dsw-alias-label-primary)",
+        background: "var(--dsw-alias-state-accent, #4f8cff)",
+        borderWidth: 1, borderStyle: "solid", borderColor: "transparent"
+      },
+      /* Row-level actions and the one destructive action on this page. */
+      pageModelActions: { flex: "none", display: "flex", alignItems: "center", gap: 4 },
+      /* Row actions are the shipped ghost icon buttons: no border, one height, colour comes
+         from the icon's own state (see .dsh-mo-act-* in the injected sheet). */
+      pageIconAction: {
+        boxSizing: "border-box", flex: "none", width: 26, height: 22, borderRadius: 7,
+        display: "inline-flex", alignItems: "center", justifyContent: "center", padding: 0,
+        borderWidth: 1, borderStyle: "solid", borderColor: "var(--dsw-alias-border-l1)",
+        background: "transparent", cursor: "pointer"
+      },
+      pageIconActionHead: {
+        boxSizing: "border-box", flex: "none", width: 22, height: 17, borderRadius: 6,
+        display: "inline-flex", alignItems: "center", justifyContent: "center", padding: 0,
+        borderWidth: 1, borderStyle: "solid", borderColor: "var(--dsw-alias-border-l1)",
+        background: "transparent", cursor: "pointer"
+      },
+
+      pageButtonCompact: {
+        boxSizing: "border-box", flex: "none", padding: "1px 7px", borderRadius: 6, fontSize: 10, cursor: "pointer",
+        borderWidth: 1, borderStyle: "solid", borderColor: "var(--dsw-alias-border-l1)",
+        background: "transparent", color: "var(--dsw-alias-label-secondary)"
+      },
+      pageButtonOk: {
+        boxSizing: "border-box", flex: "none", padding: "1px 7px", borderRadius: 6, fontSize: 10, cursor: "pointer",
+        borderWidth: 1, borderStyle: "solid", borderColor: "var(--dsw-alias-state-success, #3fb950)",
+        background: "transparent", color: "var(--dsw-alias-state-success, #3fb950)"
+      },
+      pageButtonWarn: {
+        boxSizing: "border-box", flex: "none", padding: "1px 7px", borderRadius: 6, fontSize: 10, cursor: "pointer",
+        borderWidth: 1, borderStyle: "solid", borderColor: "var(--dsw-alias-state-warn-label, #d29922)",
+        background: "transparent", color: "var(--dsw-alias-state-warn-label, #d29922)"
+      },
+      pageButtonDanger: {
+        boxSizing: "border-box", flex: "none", padding: "4px 10px", borderRadius: 7, fontSize: 12, cursor: "pointer",
+        borderWidth: 1, borderStyle: "solid", borderColor: "var(--dsw-alias-state-error, #f85149)",
+        background: "transparent", color: "var(--dsw-alias-state-error, #f85149)"
+      },
+      pageIconButton: {
+        boxSizing: "border-box", flex: "none", width: 22, height: 22, lineHeight: "18px", padding: 0, borderRadius: 6, fontSize: 11,
+        cursor: "pointer", color: "var(--dsw-alias-label-tertiary)", background: "transparent",
+        borderWidth: 1, borderStyle: "solid", borderColor: "transparent"
+      },
+      pageKeyRow: { display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap" },
+      pageActions: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" },
+      pageHandle: { flex: "none", color: "var(--dsw-alias-label-tertiary)", fontSize: 12, userSelect: "none" },
+      pageCheckLabel: { flex: "none", display: "inline-flex", alignItems: "center", gap: 4, fontSize: 11, color: "var(--dsw-alias-label-tertiary)", cursor: "pointer" },
+      /* Built-in rail rows: readable, obviously not ours to edit, and never draggable
+         (they sit outside the drag list for exactly that reason). */
+      pageOfficialRow: { opacity: 0.66, cursor: "pointer" },
+      pageDotOfficial: { flex: "0 0 6px", width: 6, height: 6, borderRadius: "50%", background: "var(--dsw-alias-label-tertiary)" },
+      pageBadge: { flex: "none", padding: "0 5px", borderRadius: 5, fontSize: 10, borderWidth: 1, borderStyle: "solid", borderColor: "var(--dsw-alias-border-l1)", color: "var(--dsw-alias-label-tertiary)" },
+      /* The model details dialog: a label column plus the control, like the shipped
+         editor's folds, and a level list that lines up under the control column. */
+      pageDialogBody: { display: "flex", flexDirection: "column", gap: 8, overflowY: "auto", minHeight: 0 },
+      pageDialogRow: { display: "grid", gridTemplateColumns: "116px minmax(0, 1fr)", gap: 8, alignItems: "center", fontSize: 12 },
+      pageLevels: { display: "flex", flexDirection: "column", gap: 6, paddingLeft: 124 },
+      pageLevelRow: { display: "flex", alignItems: "center", gap: 6 },
     };
 
     /* --------------------------- drag reorder helper -------------------------- */
@@ -546,6 +1079,23 @@ window.__ModuleLoader__.load({
     }
 
     /* ---------------- A. composer model selector, grouped by provider ---------- */
+    /* A drawn switch. The config has no enabled/disabled field, so this is the
+       plugin's own visibility list, and the page says so in the tooltip. */
+    function Switch(props) {
+      const on = props.on === true;
+      return h("button", {
+        type: "button",
+        role: "switch",
+        "aria-checked": on ? "true" : "false",
+        "data-mo": props.marker,
+        "data-mo-id": props.id,
+        disabled: props.disabled === true,
+        title: props.title,
+        onClick: function (event) { event.stopPropagation(); props.onToggle(on !== true); },
+        style: on ? Object.assign({}, S.switchTrack, S.switchTrackOn) : S.switchTrack
+      }, h("span", { style: S.switchKnob }));
+    }
+
     function ProviderGroupedModelSelect(props) {
       const locked = props.locked;
       const available = props.available;
@@ -605,10 +1155,15 @@ window.__ModuleLoader__.load({
       /* Providers follow the plugin's own display preference (see below). Computed
          per render — not memoised — so a reorder made in Settings shows up here the
          next time the menu opens, without a page reload. */
+      const visibleGroups = visibleGroupsFor(groups, current, {
+        providers: readHidden(HIDDEN_PROVIDERS_KEY),
+        models: readHidden(HIDDEN_MODELS_KEY)
+      });
+
       const groupsOrdered = (function () {
         const ids = [];
         const byId = {};
-        for (let i = 0; i < groups.length; i++) { ids.push(groups[i].id); byId[groups[i].id] = groups[i]; }
+        for (let i = 0; i < visibleGroups.length; i++) { ids.push(visibleGroups[i].id); byId[visibleGroups[i].id] = visibleGroups[i]; }
         const ordered = applyProviderOrder(ids, readProviderOrder(), true);
         const out = [];
         for (let i = 0; i < ordered.length; i++) if (byId[ordered[i]] !== undefined) out.push(byId[ordered[i]]);
@@ -941,7 +1496,8 @@ window.__ModuleLoader__.load({
           key: group.id,
           role: "group",
           "aria-labelledby": headingId,
-          className: C !== null ? C.group : S.fallbackGroup
+          className: C !== null && C.hasGroupSection === true ? C.group : undefined,
+          style: C !== null && C.hasGroupSection === true ? undefined : S.fallbackGroup
         }, [head].concat(items));
       });
 
@@ -1302,6 +1858,66 @@ window.__ModuleLoader__.load({
       try { window.localStorage.setItem(ORDER_STORAGE_KEY, JSON.stringify(ids)); } catch (e) {}
     }
 
+    /* The page's switches. DSH's pi-ai schema has no enabled/disabled field, so a
+       switch cannot be written into the config without lying about it; these sets are
+       the plugin's own "keep it out of my pickers" list, stored next to the order. */
+    const HIDDEN_PROVIDERS_KEY = "dsh-model-organizer.hiddenProviders";
+    const HIDDEN_MODELS_KEY = "dsh-model-organizer.hiddenModels";
+
+    function readHidden(key) {
+      try {
+        const raw = window.localStorage.getItem(key);
+        if (raw === null) return {};
+        const parsed = JSON.parse(raw);
+        if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) return {};
+        const out = {};
+        for (const name in parsed) if (parsed[name] === true) out[name] = true;
+        return out;
+      } catch (e) { return {}; }
+    }
+
+    function writeHidden(key, map) {
+      try {
+        const out = {};
+        for (const name in map) if (map[name] === true) out[name] = true;
+        window.localStorage.setItem(key, JSON.stringify(out));
+      } catch (e) {}
+    }
+
+    function hiddenModelKey(provider, id) { return providerKey(provider) + "/" + String(id); }
+
+    /* Which routes/models the pickers show, given the settings page's switches. Pure on
+       purpose: the composer menu is host-side, and this is the only honest way to pin
+       "the switch actually removes the row from the picker".
+       A hidden entry never disappears from underneath the ACTIVE selection, and a list
+       that would come out empty falls back to the full one (an empty menu is worse than
+       an unfiltered one). */
+    function visibleGroupsFor(groups, current, hidden) {
+      const hiddenProviders = (hidden && hidden.providers) || {};
+      const hiddenModels = (hidden && hidden.models) || {};
+      const currentProvider = current !== null && current !== undefined && typeof current.provider === "string" ? providerKey(current.provider) : null;
+      const currentModel = current !== null && current !== undefined ? (current.id !== undefined ? current.id : current.model) : undefined;
+      const out = [];
+      for (let i = 0; i < groups.length; i++) {
+        const group = groups[i];
+        const owner = providerKey(group.id);
+        const holdsCurrent = currentProvider !== null && owner === currentProvider;
+        if (hiddenProviders[owner] === true && !holdsCurrent) continue;
+        const models = [];
+        for (let k = 0; k < group.models.length; k++) {
+          const model = group.models[k];
+          if (hiddenModels[hiddenModelKey(group.id, model.id)] === true && !(holdsCurrent && model.id === currentModel)) continue;
+          models.push(model);
+        }
+        if (models.length === 0) continue;
+        const copy = {};
+        for (const name in group) copy[name] = group[name];
+        copy.models = models;
+        out.push(copy);
+      }
+      return out.length === 0 ? groups : out;
+    }
+
     const PANEL_POS_KEY = "dsh-model-organizer.panelPos";
 
 
@@ -1330,6 +1946,15 @@ window.__ModuleLoader__.load({
       return cut === -1 ? text : text.slice(cut + 1);
     }
 
+    /* The shipped page pins its two built-in DeepSeek routes first; the rail keeps that
+       order so both pages read the same way. */
+    function officialRank(id) {
+      const text = String(id);
+      if (text === "deepseek-account") return 0;
+      if (text === "deepseek-official") return 1;
+      return 2;
+    }
+
     /* Stored order first, then everything else in document order — or the other way
        round when `unknownFirst` is set. The composer menu wants unknownFirst: an id no
        stored preference mentions is a provider this plugin does not manage (the shipped
@@ -1349,6 +1974,208 @@ window.__ModuleLoader__.load({
       return unknownFirst === true ? rest.concat(known) : known.concat(rest);
     }
 
+    function cellText(node) { return (node.textContent || "").trim(); }
+
+    /* The SHIPPED row's own label, from the RAW entries view (our shadow hides it from
+       entriesOfSlot). Used only as a second anchor when deciding whether the settings
+       panel is open: our own cell must never be the sole witness. */
+    function shippedSectionLabel(slots, id, own) {
+      try {
+        const rows = slots.entries("settings.section");
+        for (let i = 0; i < rows.length; i++) {
+          const options = rows[i] && rows[i].options;
+          if (options === undefined || options === null || options.id !== id) continue;
+          if (typeof options.label !== "function") continue;
+          const text = options.label();
+          if (typeof text !== "string") continue;
+          const trimmed = text.trim();
+          if (trimmed !== "" && trimmed !== own) return trimmed;
+        }
+      } catch (e) {}
+      return null;
+    }
+
+    /* The SHIPPED entry's priority for a cell. Winning it means being the first live entry
+       in priority order — ascending — so `shipped - 1` wins it and `shipped + 1` hands it
+       back. Hard-coding -1 would silently lose the default the day the shipped entry is not
+       registered at 0 (which is exactly why the default has to be relative). */
+    function shippedSectionPriority(slots, id, own) {
+      let best = null;
+      try {
+        const rows = slots.entries("settings.section");
+        for (let i = 0; i < rows.length; i++) {
+          const options = rows[i] && rows[i].options;
+          if (options === undefined || options === null || options.id !== id) continue;
+          if (typeof options.label !== "function") continue;
+          const text = options.label();
+          if (typeof text === "string" && text.trim() === own) continue;   /* ours */
+          const value = typeof options.priority === "number" ? options.priority : 0;
+          if (best === null || value < best) best = value;
+        }
+      } catch (e) { return 0; }
+      return best === null ? 0 : best;
+    }
+
+    /* The settings nav: the only sibling-button group holding BOTH labels. Shared by the
+       cross-links and by the takeover, which hides our own spare row. */
+
+    function navGroups() {
+      const groups = new Map();
+      try {
+        if (typeof document === "undefined") return groups;
+        const cells = document.querySelectorAll("button");
+        for (let i = 0; i < cells.length; i++) {
+          const parent = cells[i].parentElement;
+          if (parent === undefined || parent === null) continue;
+          const list = groups.get(parent);
+          if (list === undefined) groups.set(parent, [cells[i]]);
+          else list.push(cells[i]);
+        }
+      } catch (e) {}
+      return groups;
+    }
+
+    /* Cells WE hid, with the value to put back. A list, not a single node: both rows of the
+       shadowed id carry the same React key, so React may reuse a node we hid for the
+       SHIPPED row — the repair is to notice the label changed and restore that node. */
+    let hiddenNavCells = [];
+    /* The watcher runs for the entry's whole lifetime: our spare cell stays hidden in BOTH
+       states, so there is no "stop watching" state any more. */
+
+    function showOwnNavCell() {
+      for (let i = 0; i < hiddenNavCells.length; i++) {
+        const entry = hiddenNavCells[i];
+        try { entry.node.style.display = entry.display === "none" ? "" : entry.display; } catch (e) {}
+      }
+      hiddenNavCells = [];
+    }
+
+    /* One invariant while the shadow is in place: the ONLY hidden nav cell is the one
+       carrying our label. Repairs both directions — a node React reused for the shipped
+       row is put back, and a rebuilt cell of ours is hidden again. */
+    /* The settings nav: the list holding our own label — or, when React reused that node
+       for the shipped row (both rows carry the same key), the list still holding a node we
+       hid. Without that second clue the reused node would stay hidden forever, which is
+       exactly the "the shipped row disappeared" bug seen in the wild. */
+    function navGroupFor(label) {
+      let byLabel = null;
+      let byHidden = null;
+      navGroups().forEach(function (nodes) {
+        if (nodes.length < 4) return;
+        for (let i = 0; i < nodes.length; i++) {
+          if (byLabel === null && cellText(nodes[i]) === label) byLabel = nodes;
+          if (byHidden === null) {
+            for (let k = 0; k < hiddenNavCells.length; k++) {
+              if (hiddenNavCells[k].node === nodes[i]) { byHidden = nodes; break; }
+            }
+          }
+        }
+      });
+      return byLabel === null ? byHidden : byLabel;
+    }
+
+    function hideOwnNavCell(label) {
+      const group = navGroupFor(label);
+      if (group === null) return false;
+      const mine = [];
+      for (let i = 0; i < group.length; i++) if (cellText(group[i]) === label) mine.push(group[i]);
+      for (let i = hiddenNavCells.length - 1; i >= 0; i--) {
+        const entry = hiddenNavCells[i];
+        let stillOurs = false;
+        for (let k = 0; k < mine.length; k++) if (mine[k] === entry.node) stillOurs = true;
+        if (stillOurs) continue;
+        try { entry.node.style.display = entry.display === "none" ? "" : entry.display; } catch (e) {}
+        hiddenNavCells.splice(i, 1);
+      }
+      for (let i = 0; i < mine.length; i++) {
+        if (mine[i].style.display === "none") continue;
+        hiddenNavCells.push({ node: mine[i], display: mine[i].style.display });
+        mine[i].style.display = "none";
+      }
+      return true;
+    }
+
+    let navObserver = null;
+
+    /* The invariant, checked against the DOM rather than against what we did earlier:
+       every cell carrying our label is hidden, and no other cell is. A node React reused
+       for the shipped row breaks it, and so does a freshly rendered spare cell. */
+    function ownNavCellHidden(label) {
+      const group = navGroupFor(label);
+      if (group === null) return false;
+      let mine = 0;
+      for (let i = 0; i < group.length; i++) {
+        if (cellText(group[i]) === label) {
+          if (group[i].style.display !== "none") return false;
+          mine++;
+        } else if (group[i].style.display === "none") {
+          return false;
+        }
+      }
+      return mine > 0;
+    }
+
+    /* The nav does not exist while the settings panel is closed, and React may rebuild the
+       cells (both rows share the id, hence the same key), so one-shot hiding is not
+       enough: re-apply on every relevant DOM change until the switch goes off. */
+    function ensureOwnNavCellHidden(label) {
+      if (ownNavCellHidden(label)) return true;
+      return hideOwnNavCell(label);
+    }
+
+    /* Is the settings panel open? The nav only exists while it is, and it is recognised by
+       containing a known section label — ours OR the shipped one, never ours alone (a
+       re-render can drop our cell for a frame while React rebuilds it). */
+    function settingsPanelOpen(slots, own) {
+      const shipped = shippedSectionLabel(slots, "models", own);
+      let open = false;
+      navGroups().forEach(function (nodes) {
+        if (open || nodes.length < 4) return;
+        for (let i = 0; i < nodes.length; i++) {
+          const text = cellText(nodes[i]);
+          if (text === own || (shipped !== null && text === shipped)) { open = true; return; }
+        }
+      });
+      return open;
+    }
+
+    let navWasOpen = false;
+
+    /* Two jobs on every relevant DOM change:
+       1. keep our spare cell hidden (the invariant);
+       2. notice the panel CLOSING, and hand the row back to this plugin then — the
+          hand-back is a decision for one visit, so re-opening settings shows this page
+          again without any persistence. */
+    function onNavChanged(label, slots, onClosed) {
+      const open = settingsPanelOpen(slots, label);
+      if (open) ensureOwnNavCellHidden(label);
+      else if (navWasOpen === true && typeof onClosed === "function") onClosed();
+      navWasOpen = open;
+    }
+
+    function watchOwnNavCell(label, slots, onClosed) {
+      if (navObserver !== null) return;
+      try {
+        if (typeof MutationObserver !== "function" || typeof document === "undefined" || document.body === null) return;
+        navObserver = new MutationObserver(function () { onNavChanged(label, slots, onClosed); });
+        navObserver.observe(document.body, { childList: true, subtree: true });
+      } catch (e) { navObserver = null; }
+    }
+
+    function unwatchOwnNavCell() {
+      if (navObserver === null) return;
+      try { navObserver.disconnect(); } catch (e) {}
+      navObserver = null;
+    }
+
+    /* The ledger bump that follows a registration re-renders the nav, hence a frame. */
+    function nextFrame(fn) {
+      try {
+        if (typeof requestAnimationFrame === "function") { requestAnimationFrame(fn); return; }
+      } catch (e) {}
+      try { setTimeout(fn, 0); } catch (e) {}
+    }
+
     /* A seat entry that throws is silently abdicated, so "my panel is missing" and
        "my panel threw" look identical from the page. This boundary turns the throw
        into one visible line, so the failure can be reported instead of guessed. */
@@ -1519,9 +2346,9 @@ window.__ModuleLoader__.load({
 
       const ids = order === null ? baseIds : order;
 
-      /* The shipped provider cards are left exactly as React renders them. Ordering used
-         to be mirrored onto them with inline `order`; that is gone — this plugin adds a
-         floating panel to the Models page and nothing else. */
+      /* Committing an order here writes the plugin's own preference list. The shipped
+         cards are mirrored separately (mirrorCards above) by writing an inline `order`
+         onto them, which is what makes this panel's order visible on that page too. */
       function commit(next) {
         if (next.join("|") === baseIds.join("|")) { setOrder(null); return; }
         writeProviderOrder(next);
@@ -1531,7 +2358,11 @@ window.__ModuleLoader__.load({
         setTimeout(function () { setNote(null); }, 2200);
       }
 
-      if (baseIds.length < 2) return null;
+      /* The header is the collapse control AND the way back to this plugin's page, so it
+         must render even when there is nothing to sort. Returning null for 0–1 configured
+         providers used to take that way back with it, and the shipped page then had no
+         entry point to the organizer page at all. */
+      const sortable = baseIds.length >= 2;
 
       const notes = [];
       if (note === "ok") notes.push(h("span", { key: "ok", style: S.ok }, t("providers.saved")));
@@ -1540,7 +2371,25 @@ window.__ModuleLoader__.load({
       /* Same shipped-cell header as every other row in this page: the title, the
          hint, then any status note on the right edge. */
       const headChildren = [
-        h("span", { key: "l", className: C !== null ? C.cellLabel : undefined, style: C === null ? S.boxTitle : undefined }, t("providers.title"))
+        h("span", { key: "l", className: C !== null ? C.cellLabel : undefined, style: C === null ? S.boxTitle : undefined }, t("providers.title")),
+        /* Sits right of the title, inside the head row. The head is both the collapse
+           control and the drag surface, so every pointer event stops here. */
+        h("button", {
+          key: "link",
+          "data-mo": "panel-open-organizer",
+          type: "button",
+          title: t("panel.openOrganizerHint"),
+          onPointerDown: function (event) { event.stopPropagation(); },
+          onPointerUp: function (event) { event.stopPropagation(); },
+          /* One button, one meaning: going to this plugin's page IS taking the shipped
+             row over — no separate switch, no second state to explain. */
+          onClick: function (event) {
+            event.stopPropagation();
+            const shared = props.bridge;
+            if (shared !== undefined && shared !== null && typeof shared.setTakeover === "function") shared.setTakeover(true);
+          },
+          style: S.linkPill
+        }, t("panel.openOrganizer")),
       ];
       /* Status notes sit immediately after the title; the hint keeps the right edge. */
       for (let i = 0; i < notes.length; i++) headChildren.push(notes[i]);
@@ -1705,13 +2554,1721 @@ window.__ModuleLoader__.load({
         ReactDOM.createPortal(
           h("div", { ref: panelRef, style: panelStyle, "data-mo": "panel" },
             head,
-            panelOpen ? h("div", { style: S.floatBody }, list) : null
+            panelOpen && sortable ? h("div", { style: S.floatBody }, list) : null,
+            panelOpen && !sortable ? h("div", { style: S.boxHint }, t("providers.onlyOne")) : null
           ),
           document.body
         )
       );
     }
 
+    /* --------------------------- C: the organizer page --------------------------- */
+    /* A real settings page (`settings.section`, kind list) placed right after the
+       shipped Models page. It is the plugin's own surface: providers and their
+       models are edited here, dragged into the saved order, and their API key is
+       written through the credentials service. The shipped page is NOT shadowed —
+       both entries stay reachable from the nav, so this stays additive. The key
+       itself never comes back: the credentials service only moves values inward. */
+
+    /* Capacity spelling for the model rows: 1000000 → "1M", 262144 → "256K". */
+    function formatCapacity(value) {
+      if (typeof value !== "number" || !isFinite(value) || value <= 0) return "";
+      if (value >= 1000000) return Math.round(value / 100000) / 10 + "M";
+      if (value >= 1000) return Math.round(value / 1000) + "K";
+      return String(value);
+    }
+
+    /* The shipped editor accepts "256K"/"1M" (K = 1000, M = 1000000) — the same
+       vocabulary its own capacity fields document. Anything else is an error. */
+    function parseCapacity(text) {
+      if (text === undefined || text === null) return undefined;
+      const bare = String(text).trim();
+      if (bare === "") return undefined;
+      const match = /^([0-9]+(?:\.[0-9]+)?)\s*([KkMm])?$/.exec(bare);
+      if (match === null) return NaN;
+      const scale = match[2] === undefined ? 1 : (match[2].toLowerCase() === "k" ? 1000 : 1000000);
+      const value = Math.round(Number(match[1]) * scale);
+      return Number.isSafeInteger(value) && value > 0 ? value : NaN;
+    }
+
+    /* One profile field the page may read but never guesses. */
+    function profileString(profile, key) {
+      const value = profile === null || profile === undefined ? undefined : profile[key];
+      return typeof value === "string" ? value : "";
+    }
+
+    /* The shipped editor spells one label per protocol; an unknown value keeps its
+       raw wire spelling instead of inventing a name for it. */
+    const API_LABEL_KEYS = {
+      "openai-completions": "protocol.completions",
+      "openai-responses": "protocol.responses",
+      "anthropic-messages": "protocol.messages"
+    };
+
+    /* The protocol ids the adapter accepts, in its own preference order. */
+    const PROTOCOL_IDS = ["openai-completions", "openai-responses", "anthropic-messages"];
+
+    function apiLabel(api, t) {
+      if (typeof api !== "string" || api.length === 0) return "";
+      const key = API_LABEL_KEYS[api];
+      return key === undefined ? api : t(key);
+    }
+
+    /* The segment shows the adapter name only; the endpoint stays visible in the hint
+       under the row, so three segments fit the settings column. */
+    function apiShort(api, t) {
+      const label = apiLabel(api, t);
+      const at = label.indexOf(" (");
+      return at === -1 ? label : label.slice(0, at);
+    }
+
+    /* A route the page may write a key for: the shipped derivation, so a key this
+       page stores is the key the shipped page would read back. */
+    function deriveKeyRef(provider) {
+      return String(provider).toUpperCase().replace(/[^A-Z0-9]+/g, "_") + "_API_KEY";
+    }
+
+    /* The dot is a reading aid, never a claim: a profile that names a credential or a
+       base URL is configured enough to be worth trying. */
+    function profileConfigured(profile) {
+      return !!(profile && (profile.apiKeyEnv || profile.baseURL));
+    }
+
+    /* Draft rows keep what the user typed (text), and only the write parses. The
+       reasoning mode is three-valued because the schema is: absent inherits the catalog,
+       `false` declares a non-reasoning model, an object declares the levels. */
+    /* Split a model-id list typed by a human ("glm-4.6, qwen-max" or one per line) into
+       ids, dropping empties and duplicates. Used by the create dialog, because a declared
+       route with no models cannot resolve at all (the host refuses it). */
+    function parseModelIds(text) {
+      const out = [];
+      const seen = {};
+      const parts = String(text === undefined || text === null ? "" : text).split(/[\s,，;；]+/);
+      for (let i = 0; i < parts.length; i++) {
+        const id = parts[i].trim();
+        if (id === "" || seen[id] === true) continue;
+        seen[id] = true;
+        out.push(id);
+      }
+      return out;
+    }
+
+    /* A blank row for the "add model" dialog: the same shape modelDraftRows projects. */
+    function emptyModelRow() {
+      return { id: "", original: "", name: "", context: "", maxTokens: "", vision: false, reasoning: { mode: "inherit", levels: [] } };
+    }
+
+    function modelDraftRows(models) {
+      return (models || []).map(function (model) {
+        const efforts = model.reasoningEfforts;
+        let reasoning = { mode: "inherit", levels: [] };
+        if (efforts === false) reasoning = { mode: "none", levels: [] };
+        else if (efforts !== null && efforts !== undefined && typeof efforts === "object") {
+          const levels = [];
+          for (const level in efforts) {
+            const value = efforts[level];
+            levels.push({ level: level, value: value === null || value === undefined ? "" : String(value) });
+          }
+          reasoning = { mode: "custom", levels: levels };
+        }
+        return {
+          id: typeof model.id === "string" ? model.id : "",
+          /* The id as it is stored now: renaming a model is the one edit that has to
+             chase a key held elsewhere (the plugin's own hidden list). */
+          original: typeof model.id === "string" ? model.id : "",
+          name: typeof model.name === "string" ? model.name : "",
+          context: model.contextWindow === undefined ? "" : formatCapacity(model.contextWindow),
+          maxTokens: model.maxTokens === undefined ? "" : formatCapacity(model.maxTokens),
+          vision: Array.isArray(model.input) && model.input.indexOf("image") !== -1,
+          reasoning: reasoning
+        };
+      });
+    }
+
+    /* Draft rows back to wire models, or an error message when a row is not writable
+       (an empty or repeated id, a bad capacity, a broken level list). */
+    function modelsFromDraft(rows, t) {
+      const seen = {};
+      const out = [];
+      for (let i = 0; i < rows.length; i++) {
+        const row = rows[i];
+        const id = String(row.id || "").trim();
+        if (id === "") return { error: t("page.modelIdRequired") };
+        if (seen[id] === true) return { error: t("page.modelIdDuplicate") };
+        seen[id] = true;
+        const contextWindow = parseCapacity(row.context);
+        const maxTokens = parseCapacity(row.maxTokens);
+        if (Number.isNaN(contextWindow) || Number.isNaN(maxTokens)) return { error: t("page.capacityInvalid") };
+        /* The id is the display name a model falls back to; `name` is written only when
+           the user typed one, so an empty box keeps the document as it was. */
+        const entry = { id: id, input: row.vision === true ? ["text", "image"] : ["text"] };
+        const name = String(row.name || "").trim();
+        if (name !== "") entry.name = name;
+        if (contextWindow !== undefined) entry.contextWindow = contextWindow;
+        if (maxTokens !== undefined) entry.maxTokens = maxTokens;
+        const reasoning = row.reasoning || { mode: "inherit", levels: [] };
+        if (reasoning.mode === "none") entry.reasoningEfforts = false;
+        else if (reasoning.mode === "custom") {
+          const levels = reasoning.levels || [];
+          const write = {};
+          let named = 0;
+          for (let k = 0; k < levels.length; k++) {
+            const level = String(levels[k].level || "").trim();
+            if (level === "") continue;
+            if (write[level] !== undefined) return { error: t("page.reasoningDuplicate") };
+            const value = String(levels[k].value || "").trim();
+            write[level] = value === "" ? null : value;
+            named++;
+          }
+          if (named === 0) return { error: t("page.reasoningRequired") };
+          entry.reasoningEfforts = write;
+        }
+        out.push(entry);
+      }
+      return { models: out };
+    }
+
+    /* ---------------------------- modal focus shell ---------------------------- */
+    /* Every dialog on this page is portalled to <body>, so its nodes sit AFTER the
+       whole settings page in the document's tab order. Two things went wrong with the
+       first attempt (a card-level keydown handler that only intervened at the edges):
+       the host shell could still pull focus out, and any step that did not start or end
+       exactly on a tracked element let the browser continue through the page behind the
+       backdrop. This shell therefore OWNS Tab while it is open: it listens in the capture
+       phase on the document, always takes the event over and moves focus itself, and a
+       focusin guard drags focus back if anything (host shell, programmatic blur) moves it
+       outside. Escape closes here too, so the page behind never sees it. */
+    const FOCUSABLE_SELECTOR = [
+      "a[href]",
+      "button:not([disabled])",
+      "input:not([disabled]):not([type='hidden'])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      "[tabindex]:not([tabindex='-1'])"
+    ].join(",");
+
+    function focusableIn(root) {
+      const out = [];
+      if (root === null || root === undefined || typeof root.querySelectorAll !== "function") return out;
+      let nodes = null;
+      try { nodes = root.querySelectorAll(FOCUSABLE_SELECTOR); } catch (e) { return out; }
+      if (nodes === null) return out;
+      for (let i = 0; i < nodes.length; i++) {
+        const node = nodes[i];
+        /* A hidden control cannot take focus: without this check the ring stops on an
+           element the browser skips, and the next Tab starts from a stale position. */
+        try {
+          if (typeof node.getClientRects === "function" && node.getClientRects().length === 0) continue;
+        } catch (e) {}
+        out.push(node);
+      }
+      return out;
+    }
+
+    /* One manual Tab step inside the dialog, wrapping at both ends. Always returns true:
+       the caller must preventDefault, because the browser's own walk is exactly what
+       escapes to the settings page. */
+    function trapTab(event, card) {
+      const list = focusableIn(card);
+      if (list.length === 0) return true;
+      let index = -1;
+      try { index = list.indexOf(document.activeElement); } catch (e) {}
+      const target = index === -1
+        ? (event.shiftKey === true ? list[list.length - 1] : list[0])
+        : list[(index + (event.shiftKey === true ? -1 : 1) + list.length) % list.length];
+      try { if (target !== undefined && typeof target.focus === "function") target.focus(); } catch (e) {}
+      return true;
+    }
+
+    function DialogShell(props) {
+      const cardRef = useRef(null);
+      const restoreRef = useRef(null);
+      const closeRef = useRef(props.onClose);
+      closeRef.current = props.onClose;
+
+      useEffect(function () {
+        let previous = null;
+        try { previous = document.activeElement; } catch (e) {}
+        restoreRef.current = previous === undefined || previous === null || previous === document.body ? null : previous;
+        const card = cardRef.current;
+        if (card === null || card === undefined) return undefined;
+        const firstControl = function () {
+          let target = null;
+          try { target = typeof card.querySelector === "function" ? card.querySelector("[data-mo-focus]") : null; } catch (e) {}
+          if (target === null || target === undefined) target = focusableIn(card)[0];
+          return target === undefined ? null : target;
+        };
+        const focusFirst = function () {
+          const target = firstControl();
+          try { if (target !== null && typeof target.focus === "function") target.focus(); } catch (e) {}
+          return target;
+        };
+        focusFirst();
+        /* A portal that was just inserted can lose the synchronous focus() to the host
+           shell's own focus pass; re-assert on the next frame when focus did not stick. */
+        let retry = null;
+        try {
+          if (typeof requestAnimationFrame === "function") {
+            retry = requestAnimationFrame(function () {
+              retry = null;
+              let inside = false;
+              try { inside = typeof card.contains === "function" && card.contains(document.activeElement); } catch (e) { inside = false; }
+              if (!inside) focusFirst();
+            });
+          }
+        } catch (e) { retry = null; }
+
+        const onKeyDown = function (event) {
+          if (event.key === "Escape") {
+            event.preventDefault();
+            if (event.stopPropagation) event.stopPropagation();
+            if (typeof closeRef.current === "function") closeRef.current();
+            return;
+          }
+          if (event.key !== "Tab") return;
+          if (event.preventDefault) event.preventDefault();
+          if (event.stopPropagation) event.stopPropagation();
+          trapTab(event, card);
+        };
+        /* The host shell reacts to focus changes; anything that lands outside the card
+           (a stray click, a programmatic blur, another plugin's focus call) is pulled
+           back to the dialog's first control. */
+        const onFocusIn = function (event) {
+          let inside = false;
+          try { inside = typeof card.contains === "function" && card.contains(event.target); } catch (e) { inside = false; }
+          if (inside) return;
+          const list = focusableIn(card);
+          const back = list.length > 0 ? list[0] : card;
+          try { if (back !== undefined && typeof back.focus === "function") back.focus(); } catch (e) {}
+        };
+
+        let wired = false;
+        try {
+          document.addEventListener("keydown", onKeyDown, true);
+          document.addEventListener("focusin", onFocusIn, true);
+          wired = true;
+        } catch (e) { wired = false; }
+
+        return function () {
+          if (retry !== null) { try { if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(retry); } catch (e) {} retry = null; }
+          if (wired) {
+            try { document.removeEventListener("keydown", onKeyDown, true); } catch (e) {}
+            try { document.removeEventListener("focusin", onFocusIn, true); } catch (e) {}
+          }
+          const restore = restoreRef.current;
+          restoreRef.current = null;
+          try {
+            if (restore !== null && restore !== undefined && restore.isConnected !== false && typeof restore.focus === "function") restore.focus();
+          } catch (e) {}
+        };
+      }, []);
+
+      /* Fallback path: environments where the document listeners above never attached
+         (the headless test harness) still get the same manual step from the card. */
+      function onKeyDown(event) {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          if (event.stopPropagation) event.stopPropagation();
+          if (typeof props.onClose === "function") props.onClose();
+          return;
+        }
+        if (event.key !== "Tab") return;
+        if (event.preventDefault) event.preventDefault();
+        if (event.stopPropagation) event.stopPropagation();
+        trapTab(event, event.currentTarget);
+      }
+
+      return h("div", {
+        ref: cardRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": props.label,
+        "data-mo": props.marker,
+        tabIndex: -1,
+        onKeyDown: onKeyDown,
+        style: S.pickCard
+      }, props.children);
+    }
+
+    function ModelsPage(props) {
+      const C = resolveOfficialClasses();
+      ensureOwnStyles(C);
+      const store = props.store;
+      const namespace = props.namespace;
+      const mutate = props.mutate;
+      const bridge = props.bridge || {};
+      const t = props.t;
+
+      /* The third argument keeps this component renderable outside a live DOM (the
+         plugin's smoke harness uses it); the browser never reads it. */
+      const snap = useSyncExternalStore(
+        function (fn) { return store.subscribe(fn); },
+        function () { return store.getSnapshot(); },
+        function () { return store.getSnapshot(); }
+      );
+      const view = snap ? snap.view : undefined;
+      const writable = !!(view && view.writable);
+      const nsView = namespaceView(view, namespace);
+      const revision = nsView ? nsView.revision : undefined;
+      const providers = orderLayer(nsView) || {};
+      const providerIds = applyProviderOrder(Object.keys(providers), readProviderOrder());
+      const sourceKey = providerIds.join("|");
+
+      const pickState = useState(null);
+      const picked = pickState[0];
+      const setPicked = pickState[1];
+      const orderState = useState(null);
+      const order = orderState[0];
+      const setOrder = orderState[1];
+      const fieldState = useState(null);
+      const field = fieldState[0];
+      const setField = fieldState[1];
+      const keyState = useState("");
+      const keyDraft = keyState[0];
+      const setKeyDraft = keyState[1];
+      const keyShownState = useState(false);
+      const keyShown = keyShownState[0];
+      const setKeyShown = keyShownState[1];
+      const keyFactsState = useState(null);
+      const keyFacts = keyFactsState[0];
+      const setKeyFacts = keyFactsState[1];
+      /* Deleting a route is destructive (its profile plus the credential this page
+         derived), so it goes through a confirm dialog; deleting a model is one click and
+         re-addable. Connection tests are per model id and never persisted. */
+      const deleteState = useState(null);
+      const deleteTarget = deleteState[0];
+      const setDeleteTarget = deleteState[1];
+      const testState = useState({});
+      const modelTests = testState[0];
+      const setModelTests = testState[1];
+
+      /* The model details dialog: null, or one working copy of a model row plus where it
+         came from. There is no page-level draft any more — Save writes straight through. */
+      const modelState = useState(null);
+      const modelDialog = modelState[0];
+      const setModel = modelState[1];
+      const busyState = useState("");
+      const busy = busyState[0];
+      const setBusy = busyState[1];
+      /* The fetch picker's own state — the provider selection above already owns
+         `pickState`, so this one keeps a distinct name. */
+      const fetchPickState = useState(null);
+      const picker = fetchPickState[0];
+      const setPicker = fetchPickState[1];
+      /* The provider directory (every route any adapter declares, built-ins included).
+         The settings document alone only carries the llm-pi-ai routes, which is exactly
+         how the built-in DeepSeek rows used to go missing from this page. */
+      const directoryState = useState(null);
+      const directory = directoryState[0];
+      const setDirectory = directoryState[1];
+      /* The switch lives in the mount layer: flipping it re-registers this section under
+         a different id, so the component must not hold that state itself. */
+      const takeover = props.takeover === true;
+      const setTakeover = props.setTakeover;
+
+      const addState = useState(null);
+      const addDialog = addState[0];
+      const setAdd = addState[1];
+      const hiddenState = useState(function () {
+        return { providers: readHidden(HIDDEN_PROVIDERS_KEY), models: readHidden(HIDDEN_MODELS_KEY) };
+      });
+      const hidden = hiddenState[0];
+      const setHidden = hiddenState[1];
+
+      function toggleHidden(kind, key) {
+        const next = Object.assign({}, kind === "provider" ? hidden.providers : hidden.models);
+        if (next[key] === true) delete next[key]; else next[key] = true;
+        writeHidden(kind === "provider" ? HIDDEN_PROVIDERS_KEY : HIDDEN_MODELS_KEY, next);
+        setHidden(kind === "provider" ? { providers: next, models: hidden.models } : { providers: hidden.providers, models: next });
+      }
+      const notePair = useNote();
+      const note = notePair[0];
+      const setNote = notePair[1];
+
+      /* A provider removed in the shipped page must not leave this page pointing at a
+         route the configuration no longer holds; the same reset drops every draft. */
+      useEffect(function () {
+        setPicked(null); setOrder(null); setField(null); setModel(null); setKeyDraft(""); setKeyFacts(null);
+      }, [sourceKey]);
+
+      const ids = order === null ? providerIds : order;
+      const current = picked !== null && providers[picked] !== undefined ? picked : (ids.length > 0 ? ids[0] : null);
+      const profile = current === null ? null : providers[current] || {};
+      const storedModels = profile === null ? [] : profile.models || [];
+      /* A pure projection of the stored models: with no inline editor left, nothing else
+         keeps a half-typed copy of a row. */
+      const draftRows = modelDraftRows(storedModels);
+      const currentKeyRef = current === null ? "" : (profileString(profile, "apiKeyEnv") || deriveKeyRef(current));
+
+      /* Built-in (namespace-level) routes: read-only here. Their settings live at the
+         namespace root and their editors are the shipped ones, so the rail lists them to
+         tell the truth about what exists, and a click hands the Models row back to the
+         shipped page instead of pretending this page could edit them. */
+      const officialRows = [];
+      if (directory !== null) {
+        for (let i = 0; i < directory.length; i++) {
+          const entry = directory[i];
+          if (entry === null || typeof entry !== "object") continue;
+          if (typeof entry.provider !== "string") continue;
+          if (Array.isArray(entry.settingsPath) && entry.settingsPath.length > 0) continue;
+          if (providers[entry.provider] !== undefined) continue;
+          officialRows.push(entry);
+        }
+        officialRows.sort(function (a, b) { return officialRank(a.provider) - officialRank(b.provider); });
+      }
+
+      /* One credential read per selection: the service only answers whether a value
+         exists and whether it may be written, never the value. */
+      useEffect(function () {
+        const credentials = bridge.credentials;
+        if (credentials === undefined || credentials === null || current === null) { setKeyFacts(null); return; }
+        let live = true;
+        try {
+          Promise.resolve(credentials.describe([currentKeyRef])).then(function (response) {
+            if (!live) return;
+            const described = response && response.ok ? response.value[currentKeyRef] : undefined;
+            setKeyFacts(described && typeof described === "object" ? described : { configured: false });
+          }, function () { if (live) setKeyFacts(null); });
+        } catch (e) { setKeyFacts(null); }
+        return function () { live = false; };
+      }, [current, currentKeyRef, bridge.credentials]);
+
+      /* Which rows the shipped catalog owns. The directory answers it; a build without
+         that namespace simply keeps one ungrouped list. */
+      useEffect(function () {
+        const llm = bridge.llm;
+        if (llm === undefined || llm === null) return undefined;
+        let live = true;
+        try {
+          Promise.resolve(llm.listConfigurableProviders()).then(function (response) {
+            if (!live) return;
+            const rows = response && response.ok && Array.isArray(response.value) ? response.value : [];
+            setDirectory(rows);
+          }, function () {});
+        } catch (e) {}
+        return function () { live = false; };
+      }, [bridge.llm]);
+
+      if (view === undefined || view === null) {
+        return h("section", { "data-mo": "page", "data-mo-build": BUILD, style: S.pageRoot },
+          h("p", { style: S.pageLoading }, t("page.loading")));
+      }
+
+      /* Nothing configured is no longer a dead end: the rail still renders (built-in
+         rows and the add button), and the detail pane carries the explanation. */
+
+      /* ------------------------------- writes ------------------------------- */
+      function writeProvider(patch, done) {
+        if (!writable) { setNote(t("page.readonly")); return; }
+        const ops = [];
+        for (const key in patch) {
+          const value = patch[key];
+          ops.push(value === undefined || value === ""
+            ? { op: "unset", path: ["providers", current, key] }
+            : { op: "set", path: ["providers", current, key], value: value });
+        }
+        let pending;
+        try { pending = mutate(ops, revision); } catch (e) { setNote(String((e && e.message) || e)); return; }
+        setBusy("field");
+        Promise.resolve(pending).then(function (result) {
+          setBusy("");
+          if (result && result.ok) { setNote("ok"); if (done !== undefined) done(); }
+          else setNote((result && result.error && result.error.message) || "save failed");
+        }, function (error) { setBusy(""); setNote(String((error && error.message) || error)); });
+      }
+
+      function saveField(key) {
+        const next = field === null ? null : field[key];
+        const before = profileString(profile, key);
+        if (next === null || next === undefined || next === before) { setField(null); return; }
+        writeProvider({ [key]: next }, function () { setField(null); });
+      }
+
+      function stopRowEvent(event) {
+        if (event === null || event === undefined) return;
+        if (typeof event.stopPropagation === "function") event.stopPropagation();
+      }
+
+      function testMark(row) {
+        return modelTests[current + "/" + String(row.id)];
+      }
+
+      function testStateOf(row) {
+        const mark = testMark(row);
+        return mark === undefined ? "idle" : mark.state;
+      }
+
+      /* One icon per verdict, all from the shipped kit and all the same size, so the button
+         never changes shape when the answer arrives. */
+      const TEST_ICONS = {
+        idle: "IconLinkOutlineRegular",
+        busy: "IconLoadingOutlineRegular",
+        ok: "IconCheckOutlineRegular",
+        miss: "IconWarningTriangleOutlineRegular",
+        fail: "IconCloseOutlineRegular"
+      };
+
+      /* A one-click connection check. The host exposes no "send a request" seam, so this
+         asks the adapter the question it can answer: what models does this route serve?
+         For a hand-declared gateway that is a real round-trip with the stored credential
+         (GET {baseURL}/models); for a catalog route the adapter answers from its registry.
+         The row's id is then checked against that answer. */
+      /* A local gateway answers in tens of milliseconds, and React coalesces the busy paint
+         with the verdict one — the spin then never reaches the screen. The busy state is
+         therefore held for at least this long. */
+      const TEST_SPIN_MS = 450;
+
+      function testModel(row) {
+        const llm = bridge.llm;
+        const id = String(row.id || "").trim();
+        if (id === "") { setNote(t("page.testNeedsId")); return; }
+        if (llm === undefined || llm === null) { setNote(t("page.fetchUnavailable")); return; }
+        const key = current + "/" + id;
+        const mark = function (state, message) {
+          const next = Object.assign({}, modelTests);
+          next[key] = { state: state, message: message };
+          setModelTests(next);
+        };
+        const startedAt = Date.now();
+        const settle = function (state, message) {
+          const wait = Math.max(0, TEST_SPIN_MS - (Date.now() - startedAt));
+          if (wait === 0) { mark(state, message); return; }
+          setTimeout(function () { mark(state, message); }, wait);
+        };
+        mark("busy", t("page.testing"));
+        /* The draft must carry the endpoint: for a route the catalog does not describe,
+           discovery hits {baseURL}/models and refuses to run without one ("pi-ai ships no
+           catalog for provider X"), which is exactly the route an operator wants to test. */
+        const request = { provider: current };
+        const liveBase = field !== null && field.baseURL !== undefined ? field.baseURL : profileString(profile, "baseURL");
+        const liveApi = field !== null && field.api !== undefined ? field.api : profileString(profile, "api");
+        if (liveBase !== "") request.baseURL = liveBase;
+        if (liveApi !== "") request.api = liveApi;
+        Promise.resolve(llm.discoverModels(namespace, request)).then(function (response) {
+          if (!response || !response.ok) {
+            const reason = (response && response.error && response.error.message) || "";
+            settle("fail", /ships no catalog/i.test(reason) ? t("page.testNoCatalog") : (reason || t("page.testFailed")));
+            return;
+          }
+          const found = Array.isArray(response.value) ? response.value : [];
+          const hit = found.some(function (entry) {
+            return entry !== null && entry !== undefined && String(entry.id) === id;
+          });
+          settle(hit ? "ok" : "miss", hit ? t("page.testOk") : t("page.testMissing"));
+        }, function (error) {
+          settle("fail", String((error && error.message) || error));
+        });
+      }
+
+      /* The animation must begin on the click itself. A class added by the React state
+         update only animates once that commit is painted, which can be a frame later (and
+         the whole request may finish inside that frame). Touching the DOM here starts the
+         spin in the same task; React's own className keeps it for the rest of the run. */
+      function startSpinNow(event) {
+        try {
+          const node = event && event.currentTarget;
+          if (node === null || node === undefined) return;
+          if (node.classList && typeof node.classList.add === "function") node.classList.add("dsh-mo-act-busy");
+          const svg = typeof node.querySelector === "function" ? node.querySelector("svg") : null;
+          if (svg !== null && svg !== undefined && svg.style) svg.style.animation = "dsh-mo-spin .9s linear infinite";
+        } catch (e) {}
+      }
+
+      function deleteModelRow(row) {
+        if (!writable) { setNote(t("page.readonly")); return; }
+        const target = row.original !== undefined ? row.original : row.id;
+        writeModels(draftRows.filter(function (item) { return String(item.original) !== String(target); }), function (error) {
+          if (error !== undefined) return;
+          setNote(t("page.modelDeleted"));
+        });
+      }
+
+      /* Drop a hand-declared route: the credential this page derived first (a key the user
+         configured elsewhere is not ours to remove, and a failed cleanup must not block the
+         delete), then the profile itself. Official routes never reach here. */
+      function confirmDeleteProvider() {
+        const route = deleteTarget;
+        if (route === null || route === undefined) return;
+        if (!writable) { setDeleteTarget(null); setNote(t("page.readonly")); return; }
+        setBusy("delete");
+        const after = function () {
+          const nextOrder = readProviderOrder().filter(function (id) { return providerKey(id) !== providerKey(route); });
+          writeProviderOrder(nextOrder);
+          const nextHidden = Object.assign({}, hidden.providers);
+          delete nextHidden[providerKey(route)];
+          writeHidden(HIDDEN_PROVIDERS_KEY, nextHidden);
+          setHidden({ providers: nextHidden, models: hidden.models });
+          setPicked(null);
+          setField(null);
+          setDeleteTarget(null);
+          setBusy("");
+          setNote("ok");
+        };
+        const drop = function () {
+          Promise.resolve(mutate([{ op: "unset", path: ["providers", route] }], revision)).then(function (result) {
+            if (!result || !result.ok) {
+              setBusy("");
+              setDeleteTarget(null);
+              setNote((result && result.error && result.error.message) || t("page.deleteFailed"));
+              return;
+            }
+            after();
+          }, function (error) {
+            setBusy("");
+            setDeleteTarget(null);
+            setNote(String((error && error.message) || error));
+          });
+        };
+        const credentials = bridge.credentials;
+        /* Clear the reference the profile actually names; a profile that named its own
+           (e.g. an env-style key) must not leave the derived one as the target. */
+        const named = route === current ? profileString(profile, "apiKeyEnv") : "";
+        const ref = named !== "" ? named : deriveKeyRef(route);
+        if (credentials === undefined || credentials === null || typeof credentials.unset !== "function") { drop(); return; }
+        Promise.resolve(credentials.unset(ref)).then(drop, drop);
+      }
+
+      /* Every model change goes through here — the dialog's save, a drag reorder, the
+         fetch picker and a delete all rewrite the same array, so there is exactly one
+         writer and one revision source per pass (no draft to reconcile). */
+      function writeModels(nextRows, done) {
+        if (!writable) { setNote(t("page.readonly")); return; }
+        const built = modelsFromDraft(nextRows, t);
+        if (built.error !== undefined) { setNote(built.error); if (done !== undefined) done(built.error); return; }
+        /* Emptying the list would leave the route unresolvable, which the host reports as a
+           resolution error on the next reload — refuse here, with the reason. */
+        if (built.models.length === 0) {
+          setNote(t("page.modelsRequired"));
+          if (done !== undefined) done(t("page.modelsRequired"));
+          return;
+        }
+        let pending;
+        try {
+          pending = mutate([{ op: "set", path: ["providers", current, "models"], value: built.models }], revision);
+        } catch (e) { setNote(String((e && e.message) || e)); if (done !== undefined) done(String((e && e.message) || e)); return; }
+        setBusy("models");
+        Promise.resolve(pending).then(function (result) {
+          setBusy("");
+          if (result && result.ok) { setNote("ok"); if (done !== undefined) done(undefined); }
+          else {
+            const message = (result && result.error && result.error.message) || "save failed";
+            setNote(message);
+            if (done !== undefined) done(message);
+          }
+        }, function (error) {
+          setBusy("");
+          const message = String((error && error.message) || error);
+          setNote(message);
+          if (done !== undefined) done(message);
+        });
+      }
+
+      /* The shipped discovery, reached exactly like the official page does. Candidates
+         go into a picker (the official interaction): nothing is written until
+         「添加所选」, which is what keeps a wide listing from being a cleanup chore —
+         and what it writes then goes straight into the config (no draft to save). */
+      function fetchModels() {
+        const llm = bridge.llm;
+        if (llm === undefined || llm === null) { setNote(t("page.fetchUnavailable")); return; }
+        const request = { provider: current };
+        const baseURL = profileString(profile, "baseURL");
+        const api = profileString(profile, "api");
+        if (baseURL !== "") request.baseURL = baseURL;
+        if (api !== "") request.api = api;
+        setBusy("fetch");
+        Promise.resolve(llm.discoverModels(namespace, request)).then(function (response) {
+          setBusy("");
+          if (!response || !response.ok) {
+            setNote((response && response.error && response.error.message) || "fetch failed");
+            return;
+          }
+          const found = Array.isArray(response.value) ? response.value : [];
+          const known = {};
+          for (let i = 0; i < draftRows.length; i++) known[String(draftRows[i].id).trim()] = true;
+          const candidates = [];
+          const picked = {};
+          for (let i = 0; i < found.length; i++) {
+            const model = found[i];
+            if (model === null || typeof model !== "object") continue;
+            const id = typeof model.id === "string" ? model.id.trim() : "";
+            if (id === "" || known[id] === true) continue;
+            known[id] = true;
+            candidates.push({
+              id: id,
+              context: model.contextWindow === undefined ? "" : formatCapacity(model.contextWindow),
+              maxTokens: model.maxTokens === undefined ? "" : formatCapacity(model.maxTokens),
+              vision: Array.isArray(model.inputModalities) && model.inputModalities.indexOf("image") !== -1
+            });
+            picked[id] = true;
+          }
+          if (candidates.length === 0) { setNote(t("page.fetchNone")); return; }
+          setPicker({ rows: candidates, picked: picked, query: "" });
+        }, function (error) { setBusy(""); setNote(String((error && error.message) || error)); });
+      }
+
+      /* Discovery for a route that does not exist yet: the draft dialog carries the
+         endpoint, protocol and one-shot credential, which is exactly what the discovery
+         seam accepts (it never reads stored settings). Filling the ids here is what makes
+         the create button able to satisfy "a declared route must list its models". */
+      function fetchAddModels() {
+        const llm = bridge.llm;
+        if (llm === undefined || llm === null) { setAdd(Object.assign({}, addDialog, { error: t("page.fetchUnavailable") })); return; }
+        const route = addDialog.route.trim();
+        const baseURL = addDialog.baseURL.trim();
+        if (baseURL === "") { setAdd(Object.assign({}, addDialog, { error: t("page.baseUrlRequired") })); return; }
+        const request = { baseURL: baseURL, api: addDialog.api };
+        if (route !== "") request.provider = route;
+        const secret = addDialog.key.trim();
+        if (secret !== "") request.apiKey = secret;
+        setBusy("addfetch");
+        Promise.resolve(llm.discoverModels(namespace, request)).then(function (response) {
+          setBusy("");
+          if (!response || !response.ok) {
+            setAdd(Object.assign({}, addDialog, { error: (response && response.error && response.error.message) || "fetch failed" }));
+            return;
+          }
+          const found = Array.isArray(response.value) ? response.value : [];
+          const ids = parseModelIds(found.map(function (row) { return row !== null && row !== undefined && typeof row.id === "string" ? row.id : ""; }).join(","));
+          if (ids.length === 0) { setAdd(Object.assign({}, addDialog, { error: t("page.fetchEmpty") })); return; }
+          setAdd(Object.assign({}, addDialog, { models: ids.join(", "), error: "" }));
+        }, function (error) {
+          setBusy("");
+          setAdd(Object.assign({}, addDialog, { error: String((error && error.message) || error) }));
+        });
+      }
+
+      /* A brand-new route: the profile and the key reference go in ONE mutate (one
+         revision, so a concurrent edit cannot land between them), the secret goes to the
+         credentials service, and the page then selects what it just created. */
+      function createProvider() {
+        const route = addDialog.route.trim();
+        if (route === "") { setAdd(Object.assign({}, addDialog, { error: t("page.routeRequired") })); return; }
+        if (!/^[A-Za-z0-9._-]+$/.test(route)) { setAdd(Object.assign({}, addDialog, { error: t("page.routeInvalid") })); return; }
+        if (providers[route] !== undefined) { setAdd(Object.assign({}, addDialog, { error: t("page.routeTaken") })); return; }
+        const displayName = addDialog.displayName.trim();
+        const baseURL = addDialog.baseURL.trim();
+        /* A hand-declared route has no catalog entry, so the host refuses a profile whose
+           models list is empty ("resolves no models"). The dialog therefore requires the
+           ids up front instead of creating a route that cannot resolve. */
+        const modelIds = parseModelIds(addDialog.models);
+        if (modelIds.length === 0) { setAdd(Object.assign({}, addDialog, { error: t("page.modelsRequired") })); return; }
+        const profile = { api: addDialog.api, models: modelIds.map(function (id) { return { id: id }; }) };
+        if (displayName !== "") profile.displayName = displayName;
+        if (baseURL !== "") profile.baseURL = baseURL;
+        const secret = addDialog.key.trim();
+        const ref = deriveKeyRef(route);
+        const ops = [{ op: "set", path: ["providers", route], value: profile }];
+        if (secret !== "") ops.push({ op: "set", path: ["providers", route, "apiKeyEnv"], value: ref });
+        setBusy("create");
+        const failed = function (error) {
+          setBusy("");
+          setAdd(Object.assign({}, addDialog, { error: String((error && error.message) || error || t("page.createFailed")) }));
+        };
+        Promise.resolve(mutate(ops, revision)).then(function (result) {
+          if (!result || !result.ok) { failed((result && result.error && result.error.message) || t("page.createFailed")); return; }
+          const done = function () { setBusy(""); setAdd(null); setPicked(route); setField(null); };
+          if (secret === "" || bridge.credentials === null || bridge.credentials === undefined) { done(); return; }
+          Promise.resolve(bridge.credentials.set(ref, secret)).then(done, function (error) {
+            setBusy("");
+            setAdd(Object.assign({}, addDialog, { error: String((error && error.message) || error) }));
+          });
+        }, failed);
+      }
+
+      function saveKey() {
+        const credentials = bridge.credentials;
+        const secret = keyDraft.trim();
+        if (secret === "") { setNote(t("page.keyPlaceholder")); return; }
+        if (credentials === undefined || credentials === null) { setNote(t("page.keyUnavailable")); return; }
+        setBusy("key");
+        Promise.resolve(credentials.set(currentKeyRef, secret)).then(function (response) {
+          if (!response || !response.ok) {
+            setBusy("");
+            setNote((response && response.error && response.error.message) || "save failed");
+            return;
+          }
+          setKeyDraft("");
+          /* A route that names no credential would never resolve the value we just
+             stored, so the first save also points the profile at that reference. */
+          const named = profileString(profile, "apiKeyEnv");
+          if (named === "" ) writeProvider({ apiKeyEnv: currentKeyRef }, function () { setBusy(""); setKeyFacts({ configured: true }); });
+          else { setBusy(""); setNote("ok"); setKeyFacts({ configured: true }); }
+        }, function (error) { setBusy(""); setNote(String((error && error.message) || error)); });
+      }
+
+      function clearKey() {
+        const credentials = bridge.credentials;
+        if (credentials === undefined || credentials === null) { setNote(t("page.keyUnavailable")); return; }
+        setBusy("key");
+        Promise.resolve(credentials.unset(currentKeyRef)).then(function (response) {
+          setBusy("");
+          if (response && response.ok) { setNote("ok"); setKeyFacts({ configured: false }); }
+          else setNote((response && response.error && response.error.message) || "save failed");
+        }, function (error) { setBusy(""); setNote(String((error && error.message) || error)); });
+      }
+
+      /* ------------------------------ rail rows ----------------------------- */
+      function sectionOf(id) {
+        if (directory === null) return "all";
+        for (let i = 0; i < directory.length; i++) {
+          const entry = directory[i];
+          if (entry !== null && entry !== undefined && entry.provider === id) return entry.declared === true ? "custom" : "catalog";
+        }
+        return "custom";
+      }
+      /* Built-in routes: listed, read-only, one click away from the page that owns them.
+         They are deliberately NOT part of the drag list — their order is the shipped one,
+         and a drag would store a preference this plugin could never apply to them. */
+      const goOfficial = function () {
+        if (typeof setTakeover === "function") setTakeover(false);
+      };
+      const officialBlock = officialRows.length === 0 ? null : [
+        h("div", { key: "official-group", style: S.pageGroup, title: t("page.officialHint") }, t("page.officialGroup")),
+        officialRows.map(function (entry) {
+          return h("div", {
+            key: "official-" + entry.provider,
+            "data-mo": "page-provider",
+            "data-mo-official": "true",
+            "data-mo-id": entry.provider,
+            role: "button",
+            tabIndex: 0,
+            title: t("page.officialRowTitle"),
+            onClick: goOfficial,
+            onKeyDown: function (event) {
+              if (event.key !== "Enter" && event.key !== " ") return;
+              event.preventDefault();
+              goOfficial();
+            },
+            className: C !== null ? cx(C.cell, "dsh-mo-head") : "dsh-mo-head",
+            style: C !== null ? S.pageOfficialRow : Object.assign({}, S.row, S.pageOfficialRow)
+          },
+            h("span", { style: S.pageDotOfficial }),
+            h("span", { style: S.pageRowName }, entry.displayName || entry.provider),
+            h("span", { style: S.pageBadge }, t("page.officialBadge")),
+            h("span", { style: S.pageRowCount }, "↗"));
+        })
+      ];
+
+      const rail = h("aside", { style: S.pageList, "aria-label": t("page.providers") },
+        officialBlock,
+        h(DragList, {
+          ids: ids,
+          disabled: false,
+          onCommit: function (next) {
+            setOrder(null);
+            writeProviderOrder(next);
+          },
+          render: function (id, index, dragProps) {
+            const entry = providers[id] || {};
+            const count = (entry.models || []).length;
+            const active = id === current;
+            const off = hidden.providers[providerKey(id)] === true;
+            const section = sectionOf(id);
+            const opensSection = index === 0 || sectionOf(ids[index - 1]) !== section;
+            const header = opensSection
+              ? h("div", { key: "group", style: S.pageGroup }, t(section === "catalog" ? "page.catalog" : (section === "custom" ? "page.custom" : "page.providers")))
+              : null;
+            const row = h("div", {
+              key: id,
+              "data-mo": "page-provider",
+              "data-mo-id": id,
+              role: "button",
+              tabIndex: 0,
+              "aria-current": active ? "true" : undefined,
+              title: entry.displayName || id,
+              draggable: dragProps.draggable,
+              onDragStart: dragProps.onDragStart,
+              onDragOver: dragProps.onDragOver,
+              onDragEnd: dragProps.onDragEnd,
+              onDrop: dragProps.onDrop,
+              onClick: function () { setPicked(id); setField(null); },
+              onKeyDown: function (event) {
+                if (event.key !== "Enter" && event.key !== " ") return;
+                event.preventDefault();
+                setPicked(id); setField(null);
+              },
+              className: C !== null ? cx(C.cell, "dsh-mo-head") : "dsh-mo-head",
+              /* Shipped classes resolved → NO inline background/cursor at all, so the
+                 sheet's :hover tint and .dsh-mo-list .dsh-mo-head grab cursor apply
+                 (exactly what the footer panel does). Only the current row marks
+                 itself, and only with a box-shadow. */
+              style: dragProps.dragging
+                ? (C !== null ? S.rowDraggingOnly : Object.assign({}, S.row, S.rowDragging))
+                : (function () {
+                    const off = hidden.providers[providerKey(id)] === true;
+                    const mark = active ? S.pageRowCurrent : undefined;
+                    if (C !== null) return off ? Object.assign({}, mark === undefined ? {} : mark, S.pageDim) : mark;
+                    return Object.assign({}, S.row, mark === undefined ? {} : mark, off ? S.pageDim : {});
+                  })()
+            },
+              /* The dot is this plugin's own enable state now (it used to mean
+                 "configured enough to try"); the tooltip keeps that fact available. */
+              h("span", {
+                "data-mo": "page-provider-dot",
+                "data-mo-on": off ? "false" : "true",
+                title: (off ? t("page.dotOff") : t("page.dotOn")) + " — " + t("page.dotHint")
+                  + (profileConfigured(entry) ? "" : " · " + t("page.keyUnset")),
+                style: off ? Object.assign({}, S.pageDot, S.pageDotMuted) : S.pageDot
+              }),
+              h("span", { style: S.pageRowName }, entry.displayName || id),
+              h("span", { style: S.pageRowCount }, count + " " + t("composer.count"))
+            );
+            return h(React.Fragment, { key: id }, header, row);
+          }
+        }),
+        h("button", {
+          "data-mo": "page-provider-add",
+          type: "button",
+          disabled: !writable,
+          title: t("page.addProvider"),
+          onClick: function () {
+            setAdd({ route: "", displayName: "", baseURL: "", api: apiChoices[0], key: "", models: "", error: "" });
+          },
+          style: S.pageAddButton
+        }, "+ " + t("page.addProvider"))
+      );
+
+      /* ------------------------------ model rows ---------------------------- */
+      /* One line per model, exactly like the provider rows above: the dot is this
+         plugin's enable state, the row itself is the drag surface, and a click opens the
+         details dialog. Nothing is edited inline any more — a row used to carry two rows
+         of inputs and needed the footer's Save button to land. */
+      function modelMeta(row) {
+        const chips = [];
+        if (row.context !== "") chips.push(row.context);
+        if (row.maxTokens !== "") chips.push("↑" + row.maxTokens);
+        if (row.vision === true) chips.push(t("page.modelImage"));
+        if (row.reasoning !== undefined && row.reasoning.mode === "none") chips.push(t("page.reasoningNone"));
+        else if (row.reasoning !== undefined && row.reasoning.mode === "custom") chips.push(t("page.reasoning"));
+        return chips.join(" · ");
+      }
+
+      const modelList = h(DragList, {
+        ids: draftRows.map(function (row, index) { return "row-" + String(index); }),
+        disabled: false,
+        onCommit: function (next) {
+          const positions = next.map(function (key) { return Number(String(key).slice(4)); });
+          writeModels(positions.map(function (at) { return draftRows[at]; }));
+        },
+        render: function (key, index, dragProps) {
+          const at = Number(String(key).slice(4));
+          const row = draftRows[at];
+          if (row === undefined) return null;
+          const enabled = hidden.models[hiddenModelKey(current, row.id)] !== true;
+          const meta = modelMeta(row);
+          return h("div", {
+            key: key,
+            "data-mo": "page-model",
+            "data-mo-id": row.id,
+            role: "button",
+            tabIndex: 0,
+            title: t("page.modelOpenHint"),
+            draggable: dragProps.draggable,
+            onDragStart: dragProps.onDragStart,
+            onDragOver: dragProps.onDragOver,
+            onDragEnd: dragProps.onDragEnd,
+            onDrop: dragProps.onDrop,
+            onClick: function () { setModel({ mode: "edit", at: at, row: row, error: "" }); },
+            onKeyDown: function (event) {
+              if (event.key !== "Enter" && event.key !== " ") return;
+              event.preventDefault();
+              setModel({ mode: "edit", at: at, row: row, error: "" });
+            },
+            className: C !== null ? cx(C.cell, "dsh-mo-head") : "dsh-mo-head",
+            style: dragProps.dragging
+              ? (C !== null ? S.rowDraggingOnly : Object.assign({}, S.row, S.rowDragging))
+              : (enabled
+                  ? (C !== null ? undefined : S.row)
+                  : Object.assign({}, C !== null ? {} : S.row, S.pageDim))
+          },
+            h("span", {
+              "data-mo": "page-model-dot",
+              "data-mo-on": enabled ? "true" : "false",
+              title: (enabled ? t("page.dotOn") : t("page.dotOff")) + " — " + t("page.dotHint"),
+              style: enabled ? S.pageDot : Object.assign({}, S.pageDot, S.pageDotMuted)
+            }),
+            h("span", { style: S.pageRowName }, row.name !== "" ? row.name : row.id),
+            h("span", { style: S.pageRowCount }, meta),
+            h("span", { style: S.pageModelActions },
+              h("button", {
+                "data-mo": "page-model-test",
+                type: "button",
+                "data-mo-id": row.id,
+                "data-mo-state": testStateOf(row),
+                className: cx(
+                  "dsh-mo-act",
+                  testStateOf(row) === "busy" ? "dsh-mo-act-busy" : "",
+                  testStateOf(row) === "ok" ? "dsh-mo-act-ok" : testStateOf(row) === "miss" ? "dsh-mo-act-miss" : testStateOf(row) === "fail" ? "dsh-mo-act-danger" : ""
+                ),
+                "aria-label": t("page.test"),
+                title: testMark(row) === undefined ? t("page.testHint") : testMark(row).message,
+                disabled: busy === "models",
+                onMouseDown: stopRowEvent,
+                onClick: function (event) { stopRowEvent(event); startSpinNow(event); testModel(row); },
+                style: S.pageIconAction
+              }, kitIcon(TEST_ICONS[testStateOf(row)], "▶", 14)),
+              h("button", {
+                "data-mo": "page-model-delete",
+                type: "button",
+                "data-mo-id": row.id,
+                "aria-label": t("page.deleteModel"),
+                title: t("page.deleteModelHint"),
+                disabled: !writable || busy === "models",
+                onMouseDown: stopRowEvent,
+                className: "dsh-mo-act dsh-mo-act-danger",
+                onClick: function (event) { stopRowEvent(event); deleteModelRow(row); },
+                style: S.pageIconAction
+              }, kitIcon("IconTrashOutlineRegular", "🗑", 14)))
+          );
+        }
+      });
+
+      /* ------------------------------- detail ------------------------------- */
+      const apiValue = field !== null && field.api !== undefined ? field.api : profileString(profile, "api");
+      const apiChoices = PROTOCOL_IDS.indexOf(apiValue) === -1 && apiValue !== "" ? PROTOCOL_IDS.concat([apiValue]) : PROTOCOL_IDS;
+      const baseValue = field !== null && field.baseURL !== undefined ? field.baseURL : profileString(profile, "baseURL");
+      const keyConfigured = keyFacts !== null && keyFacts.configured === true;
+      /* No page-level model draft: every change writes through immediately. */
+
+      const detail = current === null
+        ? h("p", { key: "empty", style: S.pageEmpty }, t("page.empty"))
+        : h("section", { style: S.pageDetail, "data-mo": "page-detail" },
+        h("div", { style: S.pageDetailHead },
+          h("h3", { style: S.pageDetailTitle }, profile.displayName || current),
+          h("span", { style: S.pageDetailRoute }, current),
+          h("span", { style: S.pageSpacer }),
+          h("button", {
+            "data-mo": "page-provider-delete",
+            type: "button",
+            disabled: !writable,
+            "aria-label": t("page.deleteProvider"),
+            title: t("page.deleteProviderHint"),
+            className: "dsh-mo-act dsh-mo-act-danger",
+            onClick: function () { setDeleteTarget(current); },
+            style: S.pageIconActionHead
+          }, kitIcon("IconTrashOutlineRegular", "🗑", 13)),
+          h(Switch, {
+            marker: "page-provider-switch",
+            id: current,
+            on: hidden.providers[providerKey(current)] !== true,
+            title: (hidden.providers[providerKey(current)] !== true ? t("page.switchOn") : t("page.switchOff")) + " — " + t("page.switchHint"),
+            onToggle: function () { toggleHidden("provider", providerKey(current)); }
+          })),
+        h("label", { style: S.pageField },
+          h("span", { style: S.pageFieldLabel }, t("page.baseUrl")),
+          h("input", {
+            "data-mo": "page-base-url",
+            value: baseValue,
+            placeholder: "https://api.example.com/v1",
+            spellCheck: false,
+            disabled: !writable,
+            onChange: function (event) {
+              setField(Object.assign({}, field === null ? {} : field, { baseURL: event.target.value }));
+            },
+            onBlur: function () { saveField("baseURL"); },
+            onKeyDown: function (event) { if (event.key === "Enter") saveField("baseURL"); },
+            style: S.pageInputWide
+          })),
+        h("div", { style: S.pageField },
+          h("span", { style: S.pageFieldLabel }, t("page.api")),
+          h("div", {
+            "data-mo": "page-api",
+            role: "radiogroup",
+            "aria-label": t("page.api"),
+            style: S.pageSegments
+          }, apiChoices.map(function (choice) {
+            const active = choice === apiValue;
+            return h("button", {
+              key: choice,
+              "data-mo": "page-api-option",
+              "data-mo-id": choice,
+              type: "button",
+              role: "radio",
+              "aria-checked": active ? "true" : "false",
+              disabled: !writable,
+              title: apiLabel(choice, t),
+              onClick: function () {
+                setField(Object.assign({}, field === null ? {} : field, { api: choice }));
+                writeProvider({ api: choice }, function () { setField(null); });
+              },
+              style: active ? Object.assign({}, S.pageSegment, S.pageSegmentActive) : S.pageSegment
+            }, apiShort(choice, t));
+          })),
+          h("span", { style: S.pageHint }, apiLabel(apiValue, t))),
+        h("div", { style: S.pageField },
+          h("span", { style: S.pageFieldLabel }, t("page.apiKey")),
+          h("input", {
+            "data-mo": "page-api-key",
+            type: keyShown ? "text" : "password",
+            value: keyDraft,
+            placeholder: keyConfigured ? t("page.keySet") : t("page.keyPlaceholder"),
+            disabled: !writable || bridge.credentials === null || bridge.credentials === undefined,
+            onChange: function (event) { setKeyDraft(event.target.value); },
+            onKeyDown: function (event) { if (event.key === "Enter") saveKey(); },
+            style: S.pageInputWide
+          }),
+          h("div", { style: S.pageKeyRow },
+            h("button", {
+              "data-mo": "page-key-toggle",
+              type: "button",
+              onClick: function () { setKeyShown(!keyShown); },
+              style: S.pageButton
+            }, keyShown ? t("page.hide") : t("page.show")),
+            h("button", {
+              "data-mo": "page-key-save",
+              type: "button",
+              disabled: busy === "key",
+              onClick: saveKey,
+              style: S.pageButtonPrimary
+            }, busy === "key" ? t("page.saving") : t("page.keySave")),
+            keyConfigured ? h("button", {
+              "data-mo": "page-key-clear",
+              type: "button",
+              disabled: busy === "key",
+              onClick: clearKey,
+              style: S.pageButton
+            }, t("page.keyClear")) : null),
+          h("span", { style: S.pageHint },
+            bridge.credentials === null || bridge.credentials === undefined
+              ? t("page.keyUnavailable")
+              : (keyConfigured ? t("page.keySet") : t("page.keyUnset")) + " · " + currentKeyRef)),
+        h("div", { style: S.pageSectionHead },
+          h("span", { style: S.pageSectionLabel }, t("page.models")),
+          h("span", { style: S.pageSpacer }),
+          h("span", { style: S.pageHint }, busy === "models" ? t("page.saving") : ""),
+          h("button", {
+            "data-mo": "page-models-fetch",
+            type: "button",
+            disabled: !writable || busy === "fetch" || bridge.llm === null || bridge.llm === undefined,
+            title: bridge.llm === null || bridge.llm === undefined ? t("page.fetchUnavailable") : t("page.fetchModels"),
+            onClick: fetchModels,
+            style: S.pageButton
+          }, busy === "fetch" ? t("page.fetching") : t("page.fetchModels"))),
+        draftRows.length === 0 ? h("p", { style: S.pageEmpty }, t("page.modelsEmptyEdit")) : modelList,
+        h("div", { style: S.pageActions },
+          h("button", {
+            "data-mo": "page-model-add",
+            type: "button",
+            disabled: !writable,
+            onClick: function () { setModel({ mode: "new", at: -1, row: emptyModelRow(), error: "" }); },
+            style: S.pageButton
+          }, "+ " + t("page.addModel"))),
+        h("div", { style: S.pageActions },
+          h("span", { style: S.pageSpacer }),
+          note !== null && note !== "ok" ? h("span", { style: S.dirty }, note) : null,
+          note === "ok" ? h("span", { style: S.ok }, t("page.saved")) : null)
+      );
+
+      /* ------------------------- the fetch picker ------------------------- */
+      let pickerNode = null;
+      if (picker !== null) {
+        const query = String(picker.query || "").trim().toLowerCase();
+        const visible = query === "" ? picker.rows : picker.rows.filter(function (row) {
+          return row.id.toLowerCase().indexOf(query) !== -1;
+        });
+        const allPicked = visible.length > 0 && visible.every(function (row) { return picker.picked[row.id] === true; });
+        pickerNode = ReactDOM.createPortal(
+          h("div", {
+            "data-mo": "fetch-dialog",
+            style: S.pickBackdrop,
+            onMouseDown: function (event) { if (event.target === event.currentTarget) setPicker(null); }
+          },
+            h(DialogShell, { label: t("page.fetchTitle"), onClose: function () { setPicker(null); } },
+              h("div", { style: S.pickHead },
+                h("h3", { style: S.pickTitle }, t("page.fetchTitle")),
+                h("button", {
+                  "data-mo": "fetch-close",
+                  type: "button",
+                  title: t("page.cancel"),
+                  onClick: function () { setPicker(null); },
+                  style: S.pageIconButton
+                }, "✕")),
+              h("p", { style: S.pickDesc }, t("page.fetchDescription")),
+              h("div", { style: S.pickTools },
+                h("input", {
+                  "data-mo": "fetch-search",
+                  "data-mo-focus": "true",
+                  value: picker.query,
+                  placeholder: t("page.fetchSearch"),
+                  spellCheck: false,
+                  onChange: function (event) { setPicker({ rows: picker.rows, picked: picker.picked, query: event.target.value }); },
+                  style: S.pageInputWide
+                }),
+                h("button", {
+                  "data-mo": "fetch-all",
+                  type: "button",
+                  onClick: function () {
+                    const next = Object.assign({}, picker.picked);
+                    for (let i = 0; i < visible.length; i++) next[visible[i].id] = allPicked ? undefined : true;
+                    setPicker({ rows: picker.rows, picked: next, query: picker.query });
+                  },
+                  style: S.pageButton
+                }, allPicked ? t("page.deselectAll") : t("page.selectAll"))),
+              visible.length === 0
+                ? h("p", { style: S.pageEmpty }, picker.rows.length === 0 ? t("page.fetchEmpty") : t("page.fetchNoMatches"))
+                : h("div", { style: S.pickList }, visible.map(function (row) {
+                    const chips = [];
+                    if (row.context !== "") chips.push(h("span", { key: "c", style: S.pageChip }, row.context));
+                    if (row.vision === true) chips.push(h("span", { key: "v", style: S.pageChip }, t("page.vision")));
+                    return h("label", { key: row.id, style: S.pickRow, "data-mo": "fetch-item", "data-mo-id": row.id },
+                      h("input", {
+                        type: "checkbox",
+                        checked: picker.picked[row.id] === true,
+                        onChange: function (event) {
+                          const next = Object.assign({}, picker.picked);
+                          next[row.id] = event.target.checked ? true : undefined;
+                          setPicker({ rows: picker.rows, picked: next, query: picker.query });
+                        }
+                      }),
+                      h("span", { style: S.pickId }, row.id),
+                      h("span", { style: S.pageSpacer }),
+                      chips);
+                  })),
+              h("div", { style: S.pickFoot },
+                h("button", {
+                  "data-mo": "fetch-cancel",
+                  type: "button",
+                  onClick: function () { setPicker(null); },
+                  style: S.pageButton
+                }, t("page.cancel")),
+                h("button", {
+                  "data-mo": "fetch-adopt",
+                  type: "button",
+                  onClick: function () {
+                    const chosen = picker.rows.filter(function (row) { return picker.picked[row.id] === true; });
+                    setPicker(null);
+                    if (chosen.length === 0) return;
+                    /* Adopting is a write, not a draft: the picked rows join the config
+                       immediately, which is also what keeps the list honest. */
+                    writeModels(draftRows.concat(chosen));
+                  },
+                  style: S.pageButtonPrimary
+                }, t("page.adopt"))))),
+          document.body);
+      }
+
+      /* ------------------------ the add-provider dialog ------------------------ */
+      let addNode = null;
+      if (addDialog !== null) {
+        const addApi = addDialog.api;
+        addNode = ReactDOM.createPortal(
+          h("div", {
+            "data-mo": "add-dialog",
+            style: S.pickBackdrop,
+            onMouseDown: function (event) { if (event.target === event.currentTarget) setAdd(null); }
+          },
+            h(DialogShell, { label: t("page.newTitle"), onClose: function () { setAdd(null); } },
+              h("div", { style: S.pickHead },
+                h("h3", { style: S.pickTitle }, t("page.newTitle")),
+                h("button", {
+                  "data-mo": "add-close",
+                  type: "button",
+                  title: t("page.cancel"),
+                  onClick: function () { setAdd(null); },
+                  style: S.pageIconButton
+                }, "✕")),
+              h("p", { style: S.pickDesc }, t("page.newDescription")),
+              h("label", { style: S.pageField },
+                h("span", { style: S.pageFieldLabel }, t("page.route")),
+                h("input", {
+                  "data-mo": "add-route",
+                  "data-mo-focus": "true",
+                  value: addDialog.route,
+                  placeholder: "my-gateway",
+                  spellCheck: false,
+                  onChange: function (event) { setAdd(Object.assign({}, addDialog, { route: event.target.value, error: "" })); },
+                  style: Object.assign({}, S.pageInputWide, S.pageInputMono)
+                }),
+                h("span", { style: S.pageHint }, t("page.routeHint"))),
+              h("label", { style: S.pageField },
+                h("span", { style: S.pageFieldLabel }, t("page.displayNameOptional")),
+                h("input", {
+                  "data-mo": "add-display-name",
+                  value: addDialog.displayName,
+                  spellCheck: false,
+                  onChange: function (event) { setAdd(Object.assign({}, addDialog, { displayName: event.target.value, error: "" })); },
+                  style: S.pageInputWide
+                })),
+              h("label", { style: S.pageField },
+                h("span", { style: S.pageFieldLabel }, t("page.baseUrlOptional")),
+                h("input", {
+                  "data-mo": "add-base-url",
+                  value: addDialog.baseURL,
+                  placeholder: "https://api.example.com/v1",
+                  spellCheck: false,
+                  onChange: function (event) { setAdd(Object.assign({}, addDialog, { baseURL: event.target.value, error: "" })); },
+                  style: S.pageInputWide
+                })),
+              h("div", { style: S.pageField },
+                h("span", { style: S.pageFieldLabel }, t("page.api")),
+                h("div", { "data-mo": "add-api", role: "radiogroup", "aria-label": t("page.api"), style: S.pageSegments },
+                  apiChoices.map(function (choice) {
+                    const active = choice === addApi;
+                    return h("button", {
+                      key: choice,
+                      "data-mo": "add-api-option",
+                      "data-mo-id": choice,
+                      type: "button",
+                      role: "radio",
+                      "aria-checked": active ? "true" : "false",
+                      title: apiLabel(choice, t),
+                      onClick: function () { setAdd(Object.assign({}, addDialog, { api: choice, error: "" })); },
+                      style: active ? Object.assign({}, S.pageSegment, S.pageSegmentActive) : S.pageSegment
+                    }, apiShort(choice, t));
+                  })),
+                h("span", { style: S.pageHint }, apiLabel(addApi, t))),
+              h("label", { style: S.pageField },
+                h("span", { style: S.pageFieldLabel }, t("page.keyOptional")),
+                h("input", {
+                  "data-mo": "add-key",
+                  type: "password",
+                  value: addDialog.key,
+                  onChange: function (event) { setAdd(Object.assign({}, addDialog, { key: event.target.value, error: "" })); },
+                  onKeyDown: function (event) { if (event.key === "Enter") createProvider(); },
+                  style: S.pageInputWide
+                })),
+              h("label", { style: S.pageField },
+                h("span", { style: S.pageFieldLabel }, t("page.modelsField")),
+                h("input", {
+                  "data-mo": "add-models",
+                  value: addDialog.models,
+                  placeholder: t("page.modelsFieldPlaceholder"),
+                  spellCheck: false,
+                  onChange: function (event) { setAdd(Object.assign({}, addDialog, { models: event.target.value, error: "" })); },
+                  onKeyDown: function (event) { if (event.key === "Enter") createProvider(); },
+                  style: S.pageInputWide
+                }),
+                h("div", { style: S.pageKeyRow },
+                  h("button", {
+                    "data-mo": "add-fetch",
+                    type: "button",
+                    disabled: busy === "addfetch",
+                    title: t("page.modelsFieldHint"),
+                    onClick: fetchAddModels,
+                    style: S.pageButton
+                  }, busy === "addfetch" ? t("page.fetching") : t("page.fetchFromGateway")),
+                  h("span", { style: S.pageHint }, t("page.modelsFieldHint")))),
+              addDialog.error === "" ? null : h("p", { "data-mo": "add-error", style: S.pageError }, addDialog.error),
+              h("div", { style: S.pickFoot },
+                h("button", {
+                  "data-mo": "add-cancel",
+                  type: "button",
+                  onClick: function () { setAdd(null); },
+                  style: S.pageButton
+                }, t("page.cancel")),
+                h("button", {
+                  "data-mo": "add-submit",
+                  type: "button",
+                  disabled: busy === "create",
+                  onClick: createProvider,
+                  style: S.pageButtonPrimary
+                }, busy === "create" ? t("page.working") : t("page.create"))))),
+          document.body);
+      }
+
+      /* ------------------------- the model details dialog ------------------------ */
+      /* Everything about ONE model lives here, so the list row can stay a single line.
+         The enable switch rides the plugin's own hidden list (DSH has no enabled field),
+         and the reasoning editor is the three-valued shape the schema actually has. */
+      function closeModel() { setModel(null); }
+      function patchModel(patch) {
+        if (modelDialog === null) return;
+        setModel(Object.assign({}, modelDialog, { row: Object.assign({}, modelDialog.row, patch), error: "" }));
+      }
+      function patchReasoning(patch) {
+        if (modelDialog === null) return;
+        patchModel({ reasoning: Object.assign({}, modelDialog.row.reasoning, patch) });
+      }
+      function patchLevel(at, patch) {
+        if (modelDialog === null) return;
+        const levels = modelDialog.row.reasoning.levels.map(function (item, position) {
+          return position === at ? Object.assign({}, item, patch) : item;
+        });
+        patchReasoning({ levels: levels });
+      }
+      function toggleModelEnabled() {
+        if (modelDialog === null) return;
+        toggleHidden("model", hiddenModelKey(current, modelDialog.row.original));
+      }
+      /* The enable list is keyed by route/model id, so a rename has to carry the key
+         over; otherwise the new id would silently come back enabled. */
+      function moveHiddenOnRename(row) {
+        const before = hiddenModelKey(current, row.original);
+        const after = hiddenModelKey(current, row.id);
+        if (before === after) return;
+        if (hidden.models[before] !== true) return;
+        const next = Object.assign({}, hidden.models);
+        delete next[before];
+        next[after] = true;
+        writeHidden(HIDDEN_MODELS_KEY, next);
+        setHidden({ providers: hidden.providers, models: next });
+      }
+      function saveModelDialog() {
+        if (modelDialog === null || busy === "models") return;
+        const row = modelDialog.row;
+        const at = modelDialog.at;
+        const next = modelDialog.mode === "new"
+          ? draftRows.concat([row])
+          : draftRows.map(function (item, position) { return position === at ? row : item; });
+        writeModels(next, function (error) {
+          if (error !== undefined) { setModel(Object.assign({}, modelDialog, { error: error })); return; }
+          moveHiddenOnRename(row);
+          setModel(null);
+          setNote("ok");
+        });
+      }
+      function deleteModelDialog() {
+        if (modelDialog === null || busy === "models") return;
+        const at = modelDialog.at;
+        const id = modelDialog.row.original;
+        writeModels(draftRows.filter(function (item, position) { return position !== at; }), function (error) {
+          if (error !== undefined) { setModel(Object.assign({}, modelDialog, { error: error })); return; }
+          const key = hiddenModelKey(current, id);
+          if (hidden.models[key] === true) toggleHidden("model", key);
+          setModel(null);
+          setNote("ok");
+        });
+      }
+
+      let modelNode = null;
+      if (modelDialog !== null) {
+        const row = modelDialog.row;
+        const enabled = hidden.models[hiddenModelKey(current, row.original)] !== true;
+        const reasoning = row.reasoning || { mode: "inherit", levels: [] };
+        const modeButton = function (name, label, mode) {
+          const active = reasoning.mode === mode;
+          return h("button", {
+            key: name,
+            "data-mo": "model-dialog-reasoning-option",
+            "data-mo-id": mode,
+            type: "button",
+            role: "radio",
+            "aria-checked": active ? "true" : "false",
+            onClick: function () { patchReasoning({ mode: mode }); },
+            style: active ? Object.assign({}, S.pageSegment, S.pageSegmentActive) : S.pageSegment
+          }, label);
+        };
+        modelNode = ReactDOM.createPortal(
+          h("div", {
+            "data-mo": "model-dialog",
+            style: S.pickBackdrop,
+            onMouseDown: function (event) { if (event.target === event.currentTarget) closeModel(); }
+          },
+            h(DialogShell, { label: t("page.modelDialogTitle"), marker: "model-dialog-card", onClose: closeModel },
+              h("div", { style: S.pickHead },
+                h("h3", { style: S.pickTitle }, modelDialog.mode === "new" ? t("page.modelDialogNew") : t("page.modelDialogTitle")),
+                h("button", {
+                  "data-mo": "model-dialog-close",
+                  type: "button",
+                  title: t("page.cancelModel"),
+                  onClick: closeModel,
+                  style: S.pageIconButton
+                }, "✕")),
+              h("p", { style: S.pickDesc }, t("page.modelDialogHint")),
+              h("div", { style: S.pageDialogBody },
+                h("label", { style: S.pageDialogRow },
+                  h("span", { style: S.pageFieldLabel }, t("page.modelId")),
+                  h("input", {
+                    "data-mo": "model-dialog-id",
+                    "data-mo-focus": "true",
+                    value: row.id,
+                    placeholder: t("page.modelId"),
+                    spellCheck: false,
+                    onChange: function (event) { patchModel({ id: event.target.value }); },
+                    style: Object.assign({}, S.pageInputWide, S.pageInputMono)
+                  })),
+                h("label", { style: S.pageDialogRow },
+                  h("span", { style: S.pageFieldLabel }, t("page.modelDisplayName")),
+                  h("input", {
+                    "data-mo": "model-dialog-name",
+                    value: row.name,
+                    spellCheck: false,
+                    onChange: function (event) { patchModel({ name: event.target.value }); },
+                    style: S.pageInputWide
+                  })),
+                h("label", { style: S.pageDialogRow },
+                  h("span", { style: S.pageFieldLabel }, t("page.modelContext")),
+                  h("input", {
+                    "data-mo": "model-dialog-context",
+                    value: row.context,
+                    placeholder: "256K",
+                    title: t("page.modelCapacityHint"),
+                    spellCheck: false,
+                    onChange: function (event) { patchModel({ context: event.target.value }); },
+                    style: S.pageInputWide
+                  })),
+                h("label", { style: S.pageDialogRow },
+                  h("span", { style: S.pageFieldLabel }, t("page.modelMax")),
+                  h("input", {
+                    "data-mo": "model-dialog-max",
+                    value: row.maxTokens,
+                    placeholder: "32K",
+                    title: t("page.modelCapacityHint"),
+                    spellCheck: false,
+                    onChange: function (event) { patchModel({ maxTokens: event.target.value }); },
+                    style: S.pageInputWide
+                  })),
+                h("div", { style: S.pageDialogRow },
+                  h("span", { style: S.pageFieldLabel }, t("page.modelInput")),
+                  h("span", { style: S.pageKeyRow },
+                    h("label", { style: S.pageCheckLabel, title: t("page.modelText") },
+                      h("input", { "data-mo": "model-dialog-text", type: "checkbox", checked: true, disabled: true, readOnly: true }),
+                      h("span", null, t("page.modelText"))),
+                    h("label", { style: S.pageCheckLabel, title: t("page.modelInputHint") },
+                      h("input", {
+                        "data-mo": "model-dialog-image",
+                        type: "checkbox",
+                        checked: row.vision === true,
+                        onChange: function (event) { patchModel({ vision: event.target.checked }); }
+                      }),
+                      h("span", null, t("page.modelImage"))))),
+                h("div", { style: S.pageDialogRow },
+                  h("span", { style: S.pageFieldLabel }, t("page.reasoningMode")),
+                  h("div", { style: S.pageSegments, role: "radiogroup", "aria-label": t("page.reasoningMode"), title: t("page.reasoningHint") },
+                    modeButton("inherit", t("page.reasoningInherit"), "inherit"),
+                    modeButton("none", t("page.reasoningNone"), "none"),
+                    modeButton("custom", t("page.reasoningCustom"), "custom"))),
+                reasoning.mode === "custom" ? h("div", { key: "levels", style: S.pageLevels },
+                  reasoning.levels.map(function (level, at) {
+                    return h("div", { key: "level-" + String(at), style: S.pageLevelRow },
+                      h("input", {
+                        "data-mo": "model-dialog-level",
+                        value: level.level,
+                        placeholder: t("page.reasoningLevel"),
+                        spellCheck: false,
+                        onChange: function (event) { patchLevel(at, { level: event.target.value }); },
+                        style: S.pageInput
+                      }),
+                      h("input", {
+                        "data-mo": "model-dialog-level-value",
+                        value: level.value,
+                        placeholder: t("page.reasoningValue"),
+                        spellCheck: false,
+                        onChange: function (event) { patchLevel(at, { value: event.target.value }); },
+                        style: S.pageInput
+                      }),
+                      h("button", {
+                        "data-mo": "model-dialog-level-remove",
+                        type: "button",
+                        title: t("page.reasoningRemove"),
+                        onClick: function () {
+                          patchReasoning({ levels: reasoning.levels.filter(function (item, position) { return position !== at; }) });
+                        },
+                        style: S.pageIconButton
+                      }, "✕"));
+                  }),
+                  h("button", {
+                    "data-mo": "model-dialog-level-add",
+                    type: "button",
+                    onClick: function () { patchReasoning({ levels: reasoning.levels.concat([{ level: "", value: "" }]) }); },
+                    style: S.pageButton
+                  }, "+ " + t("page.reasoningAdd"))) : null,
+                h("div", { style: S.pageDialogRow },
+                  h("span", { style: S.pageFieldLabel }, t("page.modelEnable")),
+                  h("span", { style: S.pageKeyRow },
+                    h(Switch, {
+                      marker: "model-dialog-switch",
+                      id: row.id,
+                      on: enabled,
+                      title: (enabled ? t("page.dotOn") : t("page.dotOff")) + " — " + t("page.dotHint"),
+                      onToggle: toggleModelEnabled
+                    }),
+                    h("span", { style: S.pageHint }, t("page.dotHint"))))),
+              modelDialog.error !== "" ? h("p", { "data-mo": "model-dialog-error", style: S.pageError }, modelDialog.error) : null,
+              h("div", { style: S.pickFoot },
+                modelDialog.mode === "edit" ? h("button", {
+                  "data-mo": "model-dialog-delete",
+                  type: "button",
+                  title: t("page.modelDeleteHint"),
+                  disabled: busy === "models",
+                  onClick: deleteModelDialog,
+                  style: S.pageButton
+                }, t("page.modelDelete")) : null,
+                h("span", { style: S.pageSpacer }),
+                h("button", {
+                  "data-mo": "model-dialog-cancel",
+                  type: "button",
+                  onClick: closeModel,
+                  style: S.pageButton
+                }, t("page.cancelModel")),
+                h("button", {
+                  "data-mo": "model-dialog-save",
+                  type: "button",
+                  disabled: busy === "models",
+                  onClick: saveModelDialog,
+                  style: S.pageButtonPrimary
+                }, busy === "models" ? t("page.saving") : t("page.saveModel"))))),
+          document.body);
+      }
+
+      /* ----------------------- the delete-provider confirm ----------------------- */
+      let deleteNode = null;
+      if (deleteTarget !== null) {
+        deleteNode = ReactDOM.createPortal(
+          h("div", {
+            "data-mo": "provider-delete-dialog",
+            style: S.pickBackdrop,
+            onMouseDown: function (event) { if (event.target === event.currentTarget) setDeleteTarget(null); }
+          },
+            h(DialogShell, { label: t("page.deleteProvider"), onClose: function () { setDeleteTarget(null); } },
+              h("div", { style: S.pickHead },
+                h("h3", { style: S.pickTitle }, t("page.deleteProvider") + " · " + deleteTarget),
+                h("button", {
+                  "data-mo": "provider-delete-close",
+                  type: "button",
+                  title: t("page.cancel"),
+                  onClick: function () { setDeleteTarget(null); },
+                  style: S.pageIconButton
+                }, "✕")),
+              h("p", { style: S.pickDesc }, t("page.deleteProviderBody")),
+              h("div", { style: S.pickFoot },
+                h("button", {
+                  "data-mo": "provider-delete-cancel",
+                  type: "button",
+                  onClick: function () { setDeleteTarget(null); },
+                  style: S.pageButton
+                }, t("page.cancel")),
+                h("button", {
+                  "data-mo": "provider-delete-confirm",
+                  type: "button",
+                  disabled: busy === "delete",
+                  onClick: confirmDeleteProvider,
+                  style: S.pageButtonDanger
+                }, busy === "delete" ? t("page.working") : t("page.deleteProvider"))))),
+          document.body);
+      }
+
+      return h("section", { "data-mo": "page", "data-mo-build": BUILD, style: S.pageRoot },
+        h("header", { style: S.pageHead },
+          h("div", { style: S.pageTitleRow },
+            h("h2", { style: S.pageTitle }, t("page.title")),
+            h("button", {
+              "data-mo": "page-open-official",
+              type: "button",
+              title: t("page.openOfficialHint"),
+              /* Going to the shipped page IS giving the row back: no separate switch, and
+                 no second state to explain. */
+              onClick: function () {
+                /* Nothing to navigate: the cell is won or lost by registration priority, so
+                   the menu row never moves. */
+                if (typeof setTakeover === "function") setTakeover(false);
+              },
+              style: S.linkPill
+            }, t("page.openOfficial"))),
+          h("p", { style: S.pageSubtitle }, t("page.subtitle"))),
+        h("div", { style: S.pageGrid }, rail, detail),
+        h("p", { style: S.pageFooterHint }, t("page.note")),
+        pickerNode,
+        addNode,
+        modelNode,
+        deleteNode
+      );
+    }
+
+    function ModelsPageGuarded(props) {
+      return h(PanelBoundary, null, h(ModelsPage, props));
+    }
+
     /* -------------------------------- helpers --------------------------------- */
 
     function namespaceView(view, namespace) {
@@ -1834,8 +4391,9 @@ window.__ModuleLoader__.load({
         mirror.ensure();
         const mutate = function (ops, revision) { return scope.remote.settings.mutate(PI_AI_NS, ops, revision); };
 
+        bridge.slots = scope.slots;
         const face = function () {
-          return { store: mirror, namespace: PI_AI_NS, mutate: mutate, t: t };
+          return { store: mirror, namespace: PI_AI_NS, mutate: mutate, t: t, slots: scope.slots, bridge: bridge };
         };
 
         /* NOTE: `settings.models.provider-card` is deliberately NOT taken. The owner
@@ -1857,15 +4415,118 @@ window.__ModuleLoader__.load({
         });
       }
 
+      /* The organizer page registers from the SAME mirror the footer panel uses, and
+         only once: the two `configForms`/`settingsScope` callbacks race, and a second
+         entry would put a duplicate row in the nav (list seats key on id). The entry
+         uses its OWN id — never "models" — so the shipped section keeps rendering. */
+      /* Two more namespaces, requested separately: a build without them keeps the page
+         mounted and reports the key as unavailable instead of losing the whole seat. */
+      const bridge = { credentials: null, llm: null };
+      ctx.inject(["slots", "remote.credentials"], function (scope) { bridge.credentials = scope.remote.credentials; });
+      ctx.inject(["slots", "remote.llm"], function (scope) { bridge.llm = scope.remote.llm; });
+
+      let modelsPageMounted = false;
+
+      function mountModelsPage(scope, mirror) {
+        if (modelsPageMounted) return;
+        modelsPageMounted = true;
+        mirror.ensure();
+        try {
+          if (document.body !== null && document.querySelector('[data-mo="page-mounted"]') === null) {
+            const mark = document.createElement("div");
+            mark.setAttribute("data-mo", "page-mounted");
+            mark.hidden = true;
+            document.body.appendChild(mark);
+          }
+        } catch (e) {}
+        const mutate = function (ops, revision) { return scope.remote.settings.mutate(PI_AI_NS, ops, revision); };
+        bridge.slots = scope.slots;
+        let sectionDispose = null;
+
+        /* ONE registration for the whole lifetime, always under the shipped id:
+           - the nav reads the RAW entry list (no dedup), so it always holds our cell next
+             to the shipped one. Our cell is kept hidden, so the settings menu always looks
+             like the original single row — and that visible row carries the SHIPPED label,
+             because it is the shipped cell;
+           - WHO wins that cell is decided by priority: entries stay sorted ascending by
+             priority and `entriesOfSlot` takes the first per id. So -1 wins it for this
+             page ("taken over") and a huge number lets the shipped page win ("handed
+             back") — with no unregistration, no id change and no navigation at all.
+           That is what makes the two states indistinguishable in the menu. */
+        function registerSection(on) {
+          try {
+            if (sectionDispose !== null) { sectionDispose(); sectionDispose = null; }
+          } catch (e) {}
+          const face = function () {
+            return {
+              store: mirror, namespace: PI_AI_NS, mutate: mutate, bridge: bridge, t: t,
+              takeover: on === true, setTakeover: switchTo
+            };
+          };
+          sectionDispose = guard(scope, "settings.section", function () {
+            return scope.slots.register({
+              name: "settings.section",
+              id: "models",
+              order: 10,
+              /* One below the shipped entry wins the cell for this page; one above hands
+                 it back. Relative, so the default survives whatever priority the shipped
+                 entry was given. */
+              priority: shippedSectionPriority(scope.slots, "models", t("nav")) + (on === true ? -1 : 1),
+              label: function () { return t("nav"); },
+              locale: NS,
+              inject: face
+            }, ModelsPageGuarded);
+          });
+        }
+
+        /* Our cell stays hidden whichever page wins: the menu must never show two rows for
+           one section, and the visible row (the shipped cell) is what opens the cell —
+           whoever ends up winning it. */
+        function paintOwnNavCell() {
+          const slots = scope.slots;
+          const onClosed = function () {
+            /* Settings was closed: the next time it opens, the row is this page again. */
+            if (bridge.takeover !== true) switchTo(true);
+          };
+          onNavChanged(t("nav"), slots, onClosed);
+          nextFrame(function () { onNavChanged(t("nav"), slots, onClosed); });
+          watchOwnNavCell(t("nav"), slots, onClosed);
+        }
+
+        function switchTo(on) {
+          const next = on === true;
+          bridge.takeover = next;
+          registerSection(next);
+          paintOwnNavCell();
+        }
+
+        bridge.setTakeover = switchTo;
+        bridge.takeover = true;
+        scope.slots.inject("settings.section", function () {
+          registerSection(bridge.takeover);
+          paintOwnNavCell();
+          return function () {
+            if (sectionDispose !== null) { sectionDispose(); sectionDispose = null; }
+            unwatchOwnNavCell();
+            showOwnNavCell();
+          };
+        });
+      }
+
       ctx.inject(["slots", "configForms", "remote", "remote.settings"], function (scope) {
-        mountOrderPanel(scope, scope.configForms.describe());
+        const mirror = scope.configForms.describe();
+        mountOrderPanel(scope, mirror);
+        mountModelsPage(scope, mirror);
       });
       ctx.inject(["slots", "settingsScope", "remote", "remote.settings"], function (scope) {
-        mountOrderPanel(scope, scope.settingsScope.describe());
+        const mirror = scope.settingsScope.describe();
+        mountOrderPanel(scope, mirror);
+        mountModelsPage(scope, mirror);
       });
     }
 
-    module.exports = { name: "model-organizer", apply: apply, inject: inject };
+    /* `__test` is a test seam only: the loader reads name/apply/inject and ignores it. */
+    module.exports = { name: "model-organizer", apply: apply, inject: inject, __test: { visibleGroupsFor: visibleGroupsFor, focusableIn: focusableIn } };
     return module.exports;
   }
 });