@nimoxie/dsh-model-organizer 0.5.11 → 0.5.19

package/lib/client.js

@@ -100,7 +100,7 @@ window.__ModuleLoader__.load({
       "page.capacityInvalid": "容量要写正数，可以用 K / M 后缀（如 256K、1M）。",
       "page.fetchModels": "获取可用模型",
       "page.fetching": "获取中…",
-      "page.fetchNone": "这个路由的模型都已经在列表里了。",
+      "page.fetchNone": "这个路由的模型已经都在列表里了。",
       "page.fetchTitle": "选择要添加的模型",
       "page.fetchDescription": "以下是模型提供商的可用模型，勾选要添加的模型。",
       "page.fetchSearch": "搜索模型",
@@ -126,26 +126,34 @@ window.__ModuleLoader__.load({
       "page.keyOptional": "API 密钥（可留空，稍后在右栏填写）",
       "page.modelsField": "模型 ID（至少一个）",
       "page.modelsFieldPlaceholder": "例如 glm-4.6, qwen-max（多个用逗号或空格分隔）",
-      "page.modelsFieldHint": "这个路由不在 DSH 的目录里，配置里必须先列出模型，否则它会解析不出模型。填好 API 地址与密钥后可点「从网关获取」自动填。",
+      "page.modelsFieldHint": "这个路由不在 DSH 的目录里，配置里必须先列出模型，否则它会解析不出模型。填好 API 地址与密钥后可以点「获取可用模型」从网关取一份清单勾选，也可以直接按 ID 添加。",
       "page.modelsRequired": "至少要填一个模型 ID：这个路由不在 DSH 的目录里，没有模型它无法解析。",
-      "page.fetchFromGateway": "从网关获取",
-      "page.baseUrlRequired": "「从网关获取」需要先填 API 地址。",
+      "page.fetchAvailable": "获取可用模型",
+      "page.modelAddById": "添加",
+      "page.modelListEmpty": "还没有模型：按 ID 输入后点「添加」，或点「获取可用模型」从网关取一份清单勾选。",
+      "page.addModeLabel": "添加方式",
+      "page.addModeCatalog": "第三方模型提供商",
+      "page.addModeCustom": "自定义模型 API",
+      "page.providerPreset": "提供商",
+      "page.presetPlaceholder": "选择内置目录里的提供商…",
+      "page.presetHint": "地址、协议和模型都由 DSH 内置目录提供，这里只需要密钥；添加后模型列表会显示目录里的模型（只读）。",
+      "page.presetRequired": "先选择一个提供商。",
+      "page.noPresets": "内置目录里的提供商都已经添加过了。",
+      "page.inheritedModels": "这些模型来自 DSH 内置目录（这条路由没有在配置里列出模型），只能看和测试，不能在这里改。",
+      "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.testHint": "测一下这个模型现在能不能用",
+      "page.testOk": "可用",
+      "page.testMissing": "网关可达，但列表里没有这个 ID",
       "page.testFailed": "测试失败。",
-      "page.testNoCatalog": "这条路由没有目录、也没有填 API 地址，无法询问网关：先在「API 地址」里填上它的地址再测。",
+      "page.testNoCatalog": "没有 API 地址，无法测试",
       "page.deleteModel": "删除模型",
-      "page.testNeedsId": "先填模型 ID 再测试。",
+      "page.testNeedsId": "先填模型 ID",
       "page.deleteModelHint": "从配置里删掉这个模型（每条路由至少要留一个）",
       "page.modelDeleted": "模型已删除",
       "page.openOfficial": "官方模型页",
@@ -286,26 +294,34 @@ window.__ModuleLoader__.load({
       "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.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 available models, or add ids by hand.",
       "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.fetchAvailable": "Fetch available models",
+      "page.modelAddById": "Add",
+      "page.modelListEmpty": "No models yet: type an ID and press Add, or use Fetch available models to pick from the gateway.",
+      "page.addModeLabel": "Add mode",
+      "page.addModeCatalog": "Third-party provider",
+      "page.addModeCustom": "Custom model API",
+      "page.providerPreset": "Provider",
+      "page.presetPlaceholder": "Pick a provider from the built-in catalog…",
+      "page.presetHint": "The address, protocol and models come from DSH's built-in catalog — only the key is needed. After adding, its models appear in the list (read-only).",
+      "page.presetRequired": "Pick a provider first.",
+      "page.noPresets": "Every provider in the built-in catalog is already added.",
+      "page.inheritedModels": "These models come from DSH's built-in catalog (this route lists none in the configuration); they can be viewed and tested here, not edited.",
+      "page.baseUrlRequired": "Fetch available models 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.testHint": "Check whether this model works right now",
+      "page.testOk": "Works",
+      "page.testMissing": "Gateway reachable, but this ID is not listed",
       "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.testNoCatalog": "No API address — cannot test",
       "page.deleteModel": "Delete model",
-      "page.testNeedsId": "Give the model an ID before testing it.",
+      "page.testNeedsId": "Enter a model ID first",
       "page.deleteModelHint": "Remove this model from the configuration (every route keeps at least one)",
       "page.modelDeleted": "Model deleted",
       "page.openOfficial": "Official Models page",
@@ -377,7 +393,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 = "b65";
+    const BUILD = "b82";
 
     let officialClasses = null;
     let officialClassesSheets = -1;
@@ -470,8 +486,11 @@ 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. */
+          /* Icon actions (row delete / model test): the kit's icons inherit
+             currentColor, so their colour state lives in these rules. */
+          /* A native select paints its own popup; colour-scheme keeps that popup dark. */
+          ".dsh-mo-select{background:var(--dsw-alias-bg-module, rgba(127,127,127,.08));color:var(--dsw-alias-label-primary);border:1px solid var(--dsw-alias-border-l1);border-radius:7px;padding:4px 8px;font-size:12px;color-scheme:dark;}",
+          ".dsh-mo-select option{background:var(--dsw-alias-bg-module, #1f1f1f);color:var(--dsw-alias-label-primary);}",
           ".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;}",
@@ -529,6 +548,35 @@ window.__ModuleLoader__.load({
           ".dsh-mo-model::before{content:'';position:absolute;left:15px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--dsw-alias-label-tertiary);opacity:.5;}",
           ".dsh-mo-model[aria-checked='true']::before{background:var(--dsw-alias-label-primary);opacity:.9;}"
         ];
+
+        /* Every button on this page, in its dialogs, and in the footer panel shares one
+           pointer state. The resting paint is inline (the S.* objects), so the hover
+           paint has to outrank it: `!important` is confined to hover/disabled, and
+           :where() keeps the scope selector at zero specificity so the variant rules
+           below still win. */
+        const BTN_SURFACES = [
+          '[data-mo="page"] button', '[data-mo="panel"] button',
+          '[data-mo="fetch-dialog"] button', '[data-mo="add-dialog"] button',
+          '[data-mo="model-dialog"] button', '[data-mo="provider-delete-dialog"] button'
+        ];
+        const BTN = ":where(" + BTN_SURFACES.join(",") + ")";
+        const byMarker = function (markers) {
+          return ":where(" + markers.map(function (marker) { return "[data-mo='" + marker + "']"; }).join(",") + ")";
+        };
+        rules.push(BTN + "{transition:background .12s ease,border-color .12s ease,color .12s ease,filter .12s ease,box-shadow .12s ease;}");
+        rules.push(BTN + ":not([role='switch']):not(:disabled):hover{background:var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,.20))!important;}");
+        rules.push(BTN + ":not(:disabled):active{filter:brightness(.96);}");
+        rules.push(BTN + ":disabled{cursor:not-allowed;opacity:.55;}");
+        /* A switch paints its own on/off fill: repainting it on hover would read as a
+           state change, so it gets a ring instead. */
+        rules.push(BTN + ":is([role='switch']):not(:disabled):hover{box-shadow:0 0 0 2px color-mix(in srgb, var(--dsw-alias-state-accent, #4f8cff) 40%, transparent);}");
+        /* Primary actions keep their accent fill, destructive ones tint the danger
+           colour, and the two quiet cross-links accent their frame. */
+        rules.push(byMarker(["page-key-save", "fetch-adopt", "add-submit", "model-dialog-save"]) + ":not(:disabled):hover{background:var(--dsw-alias-state-accent, #4f8cff)!important;filter:brightness(1.12);}");
+        rules.push(byMarker(["page-model-delete", "page-provider-delete", "model-dialog-delete", "provider-delete-confirm"]) + ":not(:disabled):hover{background:color-mix(in srgb, var(--dsw-alias-state-error, #f85149) 18%, transparent)!important;border-color:var(--dsw-alias-state-error, #f85149)!important;}");
+        rules.push(byMarker(["page-open-official", "page-provider-add"]) + ":not(:disabled):hover{color:var(--dsw-alias-label-primary)!important;border-color:var(--dsw-alias-state-accent, #4f8cff)!important;}");
+        rules.push(BTN + "[role='radio'][aria-checked='true']:not(:disabled):hover{filter:brightness(1.12);}");
+        rules.push(BTN + "[data-mo$='-close']:not(:disabled):hover{color:var(--dsw-alias-label-primary)!important;}");
         /* The shipped check alone is easy to miss: bold the selected row's name
            wherever the official sheet is in use. Settings rows carry no
            aria-checked, so the drag lists are untouched. */
@@ -564,6 +612,30 @@ window.__ModuleLoader__.load({
       return h("span", { "aria-hidden": "true", style: { fontSize: size - 3, lineHeight: 1 } }, glyph);
     }
 
+    /* One box for the three icon actions: the provider head's delete and each model
+       row's test / delete. Height is the switch's (17) on purpose — a taller icon
+       button beside the switch is what the page screenshot called out. Width is a
+       nudge above the proportional shrink (the same screenshot then called 20 a hair
+       too narrow); the height stays equal to the switch so the row never looks taller. */
+    const ACTION_BOX = {
+      boxSizing: "border-box", flex: "none", width: 19, height: 17, borderRadius: 6,
+      /* The detail head aligns its TEXT on the baseline; an icon-only box has no real
+         text baseline, so it must opt into center alignment or it floats a pixel or two
+         above the switch (the cropped screenshot that showed them out of line). */
+      alignSelf: "center",
+      display: "inline-flex", alignItems: "center", justifyContent: "center", padding: 0,
+      borderWidth: 1, borderStyle: "solid", borderColor: "var(--dsw-alias-border-l1)",
+      background: "transparent", cursor: "pointer"
+    };
+    /* The destructive sibling: identical geometry, danger frame. */
+    const DELETE_ACTION = Object.assign({}, ACTION_BOX, { borderColor: "var(--dsw-alias-state-error, #f85149)" });
+    /* The diagnostic button is a NORMAL button to the eye: same box as the two above,
+       but it wears the page buttons' tinted fill (S.pageButton) instead of a transparent
+       frame. Its verdict stays in the icon colour (.dsh-mo-act-ok/-miss/-danger). */
+    const TEST_ACTION = Object.assign({}, ACTION_BOX, {
+      background: "var(--dsw-alias-interactive-bg, rgba(127,127,127,.10))"
+    });
+
     /* --------------------------------- styles --------------------------------- */
     const S = {
       chip: {
@@ -676,15 +748,6 @@ window.__ModuleLoader__.load({
         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" },
@@ -706,21 +769,10 @@ window.__ModuleLoader__.load({
       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)" },
@@ -773,8 +825,6 @@ window.__ModuleLoader__.load({
         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. */
@@ -782,6 +832,9 @@ window.__ModuleLoader__.load({
          "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,
+        /* Same reason as ACTION_BOX: the knob gives this flex box a baseline that is
+           NOT its box bottom, so baseline rows would offset it from the icon button. */
+        alignSelf: "center",
         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)",
@@ -817,12 +870,6 @@ window.__ModuleLoader__.load({
         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)",
@@ -837,36 +884,13 @@ window.__ModuleLoader__.load({
       },
       /* 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"
-      },
+      /* The diagnostic action: same box as the trash, but it wears the normal page
+         button's tinted fill; its verdict colour rides the icon (.dsh-mo-act-*), never
+         the frame. */
+      pageIconAction: TEST_ACTION,
+      /* The one trash box; the provider head and the model rows share this object. */
+      pageIconDelete: DELETE_ACTION,
 
-      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)",
@@ -877,9 +901,17 @@ window.__ModuleLoader__.load({
         cursor: "pointer", color: "var(--dsw-alias-label-tertiary)", background: "transparent",
         borderWidth: 1, borderStyle: "solid", borderColor: "transparent"
       },
+      /* One line, never wrapped: the control on the right must stay beside its input. */
+      pageInlineRow: { display: "flex", alignItems: "center", gap: 6, flexWrap: "nowrap", minWidth: 0 },
+      pageInputGrow: {
+        boxSizing: "border-box", flex: "1 1 auto", width: "auto", 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"
+      },
       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). */
@@ -2784,6 +2816,11 @@ window.__ModuleLoader__.load({
       const cardRef = useRef(null);
       const restoreRef = useRef(null);
       const closeRef = useRef(props.onClose);
+      /* Every dialog is movable by its header: these panels cover the page, and you oft
+         need to look at what is underneath while they are open. */
+      const offsetState = useState({ x: 0, y: 0 });
+      const offset = offsetState[0];
+      const setOffset = offsetState[1];
       closeRef.current = props.onClose;
 
       useEffect(function () {
@@ -2878,6 +2915,31 @@ window.__ModuleLoader__.load({
         trapTab(event, event.currentTarget);
       }
 
+      function onCardMouseDown(event) {
+        if (event === null || event === undefined) return;
+        if (event.button !== undefined && event.button !== 0) return;
+        const node = event.target;
+        if (node === null || node === undefined || typeof node.closest !== "function") return;
+        /* Only the header strip drags, and never a control inside it. */
+        if (node.closest("button, a, input, select, textarea, [data-mo-no-drag]") !== null) return;
+        if (node.closest("[data-mo-drag]") === null) return;
+        if (typeof event.preventDefault === "function") event.preventDefault();
+        const from = { x: offset.x, y: offset.y };
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const move = function (moveEvent) {
+          setOffset({ x: from.x + (moveEvent.clientX - startX), y: from.y + (moveEvent.clientY - startY) });
+        };
+        const stop = function () {
+          try { document.removeEventListener("mousemove", move, true); } catch (e) {}
+          try { document.removeEventListener("mouseup", stop, true); } catch (e) {}
+        };
+        try {
+          document.addEventListener("mousemove", move, true);
+          document.addEventListener("mouseup", stop, true);
+        } catch (e) {}
+      }
+
       return h("div", {
         ref: cardRef,
         role: "dialog",
@@ -2886,7 +2948,8 @@ window.__ModuleLoader__.load({
         "data-mo": props.marker,
         tabIndex: -1,
         onKeyDown: onKeyDown,
-        style: S.pickCard
+        onMouseDown: onCardMouseDown,
+        style: Object.assign({}, S.pickCard, { transform: "translate(" + offset.x + "px, " + offset.y + "px)" })
       }, props.children);
     }
 
@@ -3049,6 +3112,52 @@ window.__ModuleLoader__.load({
         return function () { live = false; };
       }, [bridge.llm]);
 
+      /* A route whose profile lists no models may still serve some: an adapter that
+         ships a catalog (every built-in preset) answers discovery without a network call.
+         Those rows are shown read-only — they live in the catalog, not in this document. */
+      const catalogState = useState({});
+      const catalogRows = catalogState[0];
+      const setCatalogRows = catalogState[1];
+
+      useEffect(function () {
+        const llm = bridge.llm;
+        if (llm === undefined || llm === null || current === null) return undefined;
+        /* An explicit models list always wins: never show catalog rows beside it. */
+        if (storedModels.length > 0) return undefined;
+        if (catalogRows[current] !== undefined) return undefined;
+        let live = true;
+        const mark = function (status, models) {
+          if (!live) return;
+          const next = Object.assign({}, catalogRows);
+          next[current] = { status: status, models: models };
+          setCatalogRows(next);
+        };
+        mark("loading", []);
+        try {
+          Promise.resolve(llm.discoverModels(namespace, { provider: current })).then(function (response) {
+            if (!response || !response.ok) { mark("error", []); return; }
+            const found = Array.isArray(response.value) ? response.value : [];
+            const rows = [];
+            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 === "") continue;
+              rows.push({
+                id: 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.inputModalities) && model.inputModalities.indexOf("image") !== -1,
+                reasoning: { mode: "inherit", levels: [] }
+              });
+            }
+            mark("ready", rows);
+          }, function () { mark("error", []); });
+        } catch (e) { mark("error", []); }
+        return function () { live = false; };
+      }, [current, storedModels.length]);
+
       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")));
@@ -3310,6 +3419,36 @@ window.__ModuleLoader__.load({
          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". */
+      /* Draft models use the same "pick, then adopt" flow as the saved list: the picker
+         only fills this dialog's list and nothing is written before Create. */
+      function addModelsToDraft(rows, clearInput) {
+        const next = addDialog.models.slice();
+        const known = {};
+        for (let i = 0; i < next.length; i++) known[String(next[i].id)] = true;
+        for (let i = 0; i < rows.length; i++) {
+          const id = String(rows[i] !== null && rows[i] !== undefined && rows[i].id !== undefined ? rows[i].id : "").trim();
+          if (id === "" || known[id] === true) continue;
+          known[id] = true;
+          next.push(Object.assign({}, rows[i], { id: id }));
+        }
+        const patch = { models: next, error: "" };
+        if (clearInput === true) patch.modelInput = "";
+        setAdd(Object.assign({}, addDialog, patch));
+      }
+
+      function addManualModels() {
+        const ids = parseModelIds(addDialog.modelInput);
+        if (ids.length === 0) return;
+        addModelsToDraft(ids.map(function (id) { return { id: id, context: "", maxTokens: "", vision: false }; }), true);
+      }
+
+      function removeDraftModel(id) {
+        setAdd(Object.assign({}, addDialog, {
+          models: addDialog.models.filter(function (row) { return String(row.id) !== String(id); }),
+          error: ""
+        }));
+      }
+
       function fetchAddModels() {
         const llm = bridge.llm;
         if (llm === undefined || llm === null) { setAdd(Object.assign({}, addDialog, { error: t("page.fetchUnavailable") })); return; }
@@ -3328,19 +3467,82 @@ window.__ModuleLoader__.load({
             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: "" }));
+          const known = {};
+          for (let k = 0; k < addDialog.models.length; k++) known[String(addDialog.models[k].id)] = true;
+          const candidates = [];
+          const picked = {};
+          for (let k = 0; k < found.length; k++) {
+            const model = found[k];
+            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) { setAdd(Object.assign({}, addDialog, { error: t("page.fetchNone") })); return; }
+          setPicker({ rows: candidates, picked: picked, query: "", target: "draft" });
         }, function (error) {
           setBusy("");
           setAdd(Object.assign({}, addDialog, { error: String((error && error.message) || error) }));
         });
       }
 
+      /* Third-party presets: routes the shipped catalog already describes and this
+         document has not configured yet. Creating one writes an EMPTY profile — its
+         address, protocol and models come from the catalog, so no models list is needed. */
+      const addablePresets = [];
+      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" || entry.provider === "") continue;
+          /* `declared` means hand-declared by the user; a catalog provider has false. */
+          if (entry.declared === true) continue;
+          if (!Array.isArray(entry.settingsPath) || entry.settingsPath.length === 0) continue;
+          if (entry.settingsNs !== namespace) continue;
+          if (providers[entry.provider] !== undefined) continue;
+          addablePresets.push(entry);
+        }
+      }
+
+      function createCatalogProvider() {
+        const preset = String(addDialog.preset || "");
+        if (preset === "") { setAdd(Object.assign({}, addDialog, { error: t("page.presetRequired") })); return; }
+        const known = addablePresets.some(function (entry) { return entry.provider === preset; });
+        if (!known) { setAdd(Object.assign({}, addDialog, { error: t("page.routeTaken") })); return; }
+        const displayName = addDialog.displayName.trim();
+        const secret = addDialog.key.trim();
+        const ref = deriveKeyRef(preset);
+        const profile = {};
+        if (displayName !== "") profile.displayName = displayName;
+        if (secret !== "") profile.apiKeyEnv = ref;
+        setBusy("create");
+        const failed = function (error) {
+          setBusy("");
+          setAdd(Object.assign({}, addDialog, { error: String((error && error.message) || error || t("page.createFailed")) }));
+        };
+        Promise.resolve(mutate([{ op: "set", path: ["providers", preset], value: profile }], 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(preset); 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);
+      }
+
       /* 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() {
+        if (addDialog.mode === "catalog") { createCatalogProvider(); return; }
         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; }
@@ -3350,9 +3552,19 @@ window.__ModuleLoader__.load({
         /* 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 (addDialog.models.length === 0) { setAdd(Object.assign({}, addDialog, { error: t("page.modelsRequired") })); return; }
+        const built = modelsFromDraft(addDialog.models.map(function (row) {
+          return {
+            id: row.id,
+            name: row.name === undefined ? "" : row.name,
+            context: row.context === undefined ? "" : row.context,
+            maxTokens: row.maxTokens === undefined ? "" : row.maxTokens,
+            vision: row.vision === true,
+            reasoning: { mode: "inherit", levels: [] }
+          };
+        }), t);
+        if (built.error !== undefined) { setAdd(Object.assign({}, addDialog, { error: built.error })); return; }
+        const profile = { api: addDialog.api, models: built.models };
         if (displayName !== "") profile.displayName = displayName;
         if (baseURL !== "") profile.baseURL = baseURL;
         const secret = addDialog.key.trim();
@@ -3522,7 +3734,7 @@ window.__ModuleLoader__.load({
           disabled: !writable,
           title: t("page.addProvider"),
           onClick: function () {
-            setAdd({ route: "", displayName: "", baseURL: "", api: apiChoices[0], key: "", models: "", error: "" });
+            setAdd({ route: "", displayName: "", baseURL: "", api: apiChoices[0], key: "", models: [], modelInput: "", mode: "custom", preset: "", error: "" });
           },
           style: S.pageAddButton
         }, "+ " + t("page.addProvider"))
@@ -3543,6 +3755,37 @@ window.__ModuleLoader__.load({
         return chips.join(" · ");
       }
 
+      /* Catalog-served rows: visible, testable, but not ours to edit or reorder. */
+      const inheritedFacts = current === null ? undefined : catalogRows[current];
+      const inheritedModels = draftRows.length === 0 && inheritedFacts !== undefined && inheritedFacts.status === "ready" ? inheritedFacts.models : [];
+      const inheritedList = inheritedModels.length === 0 ? null : h(React.Fragment, null,
+        h("p", { "data-mo": "page-inherited-hint", style: S.pageHint }, t("page.inheritedModels")),
+        h("div", { "data-mo": "page-inherited-list", style: { display: "flex", flexDirection: "column", gap: 2 } },
+          inheritedModels.map(function (row) {
+            const enabled = hidden.models[hiddenModelKey(current, row.id)] !== true;
+            const mark = testStateOf(row);
+            return h("div", { key: row.id, "data-mo": "page-model-inherited", "data-mo-id": row.id, style: S.row },
+              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 }, modelMeta(row)),
+              h("span", { style: S.pageModelActions },
+                h("button", {
+                  "data-mo": "page-model-test",
+                  "data-mo-id": row.id,
+                  "data-mo-state": mark,
+                  className: cx("dsh-mo-act", mark === "busy" ? "dsh-mo-act-busy" : "", mark === "ok" ? "dsh-mo-act-ok" : mark === "miss" ? "dsh-mo-act-miss" : mark === "fail" ? "dsh-mo-act-danger" : ""),
+                  "aria-label": t("page.test"),
+                  title: testMark(row) === undefined ? t("page.testHint") : testMark(row).message,
+                  onClick: function (event) { stopRowEvent(event); startSpinNow(event); testModel(row); },
+                  style: S.pageIconAction
+                }, kitIcon(TEST_ICONS[mark], "▶", 14))))
+          })));
+
       const modelList = h(DragList, {
         ids: draftRows.map(function (row, index) { return "row-" + String(index); }),
         disabled: false,
@@ -3606,7 +3849,7 @@ window.__ModuleLoader__.load({
                 onMouseDown: stopRowEvent,
                 onClick: function (event) { stopRowEvent(event); startSpinNow(event); testModel(row); },
                 style: S.pageIconAction
-              }, kitIcon(TEST_ICONS[testStateOf(row)], "▶", 14)),
+              }, kitIcon(TEST_ICONS[testStateOf(row)], "▶", 13)),
               h("button", {
                 "data-mo": "page-model-delete",
                 type: "button",
@@ -3617,8 +3860,8 @@ window.__ModuleLoader__.load({
                 onMouseDown: stopRowEvent,
                 className: "dsh-mo-act dsh-mo-act-danger",
                 onClick: function (event) { stopRowEvent(event); deleteModelRow(row); },
-                style: S.pageIconAction
-              }, kitIcon("IconTrashOutlineRegular", "🗑", 14)))
+                style: S.pageIconDelete
+              }, kitIcon("IconTrashOutlineRegular", "🗑", 13)))
           );
         }
       });
@@ -3645,7 +3888,7 @@ window.__ModuleLoader__.load({
             title: t("page.deleteProviderHint"),
             className: "dsh-mo-act dsh-mo-act-danger",
             onClick: function () { setDeleteTarget(current); },
-            style: S.pageIconActionHead
+            style: S.pageIconDelete
           }, kitIcon("IconTrashOutlineRegular", "🗑", 13)),
           h(Switch, {
             marker: "page-provider-switch",
@@ -3744,7 +3987,9 @@ window.__ModuleLoader__.load({
             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,
+        draftRows.length === 0
+          ? (inheritedList !== null ? inheritedList : h("p", { style: S.pageEmpty }, t("page.modelsEmptyEdit")))
+          : modelList,
         h("div", { style: S.pageActions },
           h("button", {
             "data-mo": "page-model-add",
@@ -3771,10 +4016,9 @@ window.__ModuleLoader__.load({
           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("div", { style: Object.assign({}, S.pickHead, { cursor: "move" }), "data-mo-drag": "true" },
                 h("h3", { style: S.pickTitle }, t("page.fetchTitle")),
                 h("button", {
                   "data-mo": "fetch-close",
@@ -3791,7 +4035,7 @@ window.__ModuleLoader__.load({
                   value: picker.query,
                   placeholder: t("page.fetchSearch"),
                   spellCheck: false,
-                  onChange: function (event) { setPicker({ rows: picker.rows, picked: picker.picked, query: event.target.value }); },
+                  onChange: function (event) { setPicker(Object.assign({}, picker, { query: event.target.value })); },
                   style: S.pageInputWide
                 }),
                 h("button", {
@@ -3800,7 +4044,7 @@ window.__ModuleLoader__.load({
                   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 });
+                    setPicker(Object.assign({}, picker, { picked: next }));
                   },
                   style: S.pageButton
                 }, allPicked ? t("page.deselectAll") : t("page.selectAll"))),
@@ -3817,7 +4061,7 @@ window.__ModuleLoader__.load({
                         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 });
+                          setPicker(Object.assign({}, picker, { picked: next }));
                         }
                       }),
                       h("span", { style: S.pickId }, row.id),
@@ -3838,8 +4082,9 @@ window.__ModuleLoader__.load({
                     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. */
+                    /* Draft picker: fill the create dialog's list, write nothing yet.
+                       Saved picker: adopting IS the write, which keeps that list honest. */
+                    if (picker.target === "draft") { addModelsToDraft(chosen, false); return; }
                     writeModels(draftRows.concat(chosen));
                   },
                   style: S.pageButtonPrimary
@@ -3847,6 +4092,32 @@ window.__ModuleLoader__.load({
           document.body);
       }
 
+      /* ------------------------ the third-party preset dialog ------------------------ */
+      /* The shipped catalog already describes these routes, so the only thing this page
+         can add is the profile stub plus a key; models and address come from the catalog. */
+      function addModeTabs() {
+        const on = addDialog.mode === "catalog" ? "catalog" : "custom";
+        const options = [{ id: "catalog", label: t("page.addModeCatalog") }, { id: "custom", label: t("page.addModeCustom") }];
+        return h("div", { style: S.pageField },
+          h("span", { style: S.pageFieldLabel }, t("page.addModeLabel")),
+          h("div", { "data-mo": "add-mode", role: "radiogroup", "aria-label": t("page.addModeLabel"), style: S.pageSegments },
+            options.map(function (option) {
+              const active = option.id === on;
+              return h("button", {
+                key: option.id,
+                "data-mo": "add-mode-option",
+                "data-mo-id": option.id,
+                type: "button",
+                role: "radio",
+                "aria-checked": active ? "true" : "false",
+                disabled: option.id === "catalog" && addablePresets.length === 0,
+                title: option.id === "catalog" && addablePresets.length === 0 ? t("page.noPresets") : "",
+                onClick: function () { setAdd(Object.assign({}, addDialog, { mode: option.id, error: "" })); },
+                style: active ? Object.assign({}, S.pageSegment, S.pageSegmentActive) : S.pageSegment
+              }, option.label);
+            })));
+      }
+
       /* ------------------------ the add-provider dialog ------------------------ */
       let addNode = null;
       if (addDialog !== null) {
@@ -3854,11 +4125,11 @@ window.__ModuleLoader__.load({
         addNode = ReactDOM.createPortal(
           h("div", {
             "data-mo": "add-dialog",
+            "data-mo-mode": "custom",
             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("div", { style: Object.assign({}, S.pickHead, { cursor: "move" }), "data-mo-drag": "true" },
                 h("h3", { style: S.pickTitle }, t("page.newTitle")),
                 h("button", {
                   "data-mo": "add-close",
@@ -3868,7 +4139,22 @@ window.__ModuleLoader__.load({
                   style: S.pageIconButton
                 }, "✕")),
               h("p", { style: S.pickDesc }, t("page.newDescription")),
-              h("label", { style: S.pageField },
+              addModeTabs(),
+              addDialog.mode === "catalog" ? h(React.Fragment, null,
+                h("label", { style: S.pageField },
+                  h("span", { style: S.pageFieldLabel }, t("page.providerPreset")),
+                  h("select", {
+                    "data-mo": "add-preset",
+                    "data-mo-focus": "true",
+                    className: "dsh-mo-select",
+                    value: String(addDialog.preset || ""),
+                    onChange: function (event) { setAdd(Object.assign({}, addDialog, { preset: event.target.value, error: "" })); },
+                    style: Object.assign({}, S.pageInputGrow, { colorScheme: "dark" })
+                  }, [h("option", { key: "", value: "" }, t("page.presetPlaceholder"))].concat(addablePresets.map(function (entry) {
+                    return h("option", { key: entry.provider, value: entry.provider }, entry.displayName || entry.provider);
+                  })))),
+                h("span", { style: S.pageHint }, t("page.presetHint"))) : null,
+              addDialog.mode === "catalog" ? null : h("label", { style: S.pageField },
                 h("span", { style: S.pageFieldLabel }, t("page.route")),
                 h("input", {
                   "data-mo": "add-route",
@@ -3889,7 +4175,7 @@ window.__ModuleLoader__.load({
                   onChange: function (event) { setAdd(Object.assign({}, addDialog, { displayName: event.target.value, error: "" })); },
                   style: S.pageInputWide
                 })),
-              h("label", { style: S.pageField },
+              addDialog.mode === "catalog" ? null : h("label", { style: S.pageField },
                 h("span", { style: S.pageFieldLabel }, t("page.baseUrlOptional")),
                 h("input", {
                   "data-mo": "add-base-url",
@@ -3899,7 +4185,7 @@ window.__ModuleLoader__.load({
                   onChange: function (event) { setAdd(Object.assign({}, addDialog, { baseURL: event.target.value, error: "" })); },
                   style: S.pageInputWide
                 })),
-              h("div", { style: S.pageField },
+              addDialog.mode === "catalog" ? null : 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) {
@@ -3927,17 +4213,24 @@ window.__ModuleLoader__.load({
                   onKeyDown: function (event) { if (event.key === "Enter") createProvider(); },
                   style: S.pageInputWide
                 })),
-              h("label", { style: S.pageField },
+              addDialog.mode === "catalog" ? null : h("div", { 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.pageInlineRow },
+                  h("input", {
+                    "data-mo": "add-models",
+                    value: addDialog.modelInput,
+                    placeholder: t("page.modelsFieldPlaceholder"),
+                    spellCheck: false,
+                    onChange: function (event) { setAdd(Object.assign({}, addDialog, { modelInput: event.target.value, error: "" })); },
+                    onKeyDown: function (event) { if (event.key === "Enter") { event.preventDefault(); addManualModels(); } },
+                    style: S.pageInputGrow
+                  }),
+                  h("button", {
+                    "data-mo": "add-model-add",
+                    type: "button",
+                    onClick: addManualModels,
+                    style: S.pageButton
+                  }, t("page.modelAddById"))),
                 h("div", { style: S.pageKeyRow },
                   h("button", {
                     "data-mo": "add-fetch",
@@ -3946,8 +4239,27 @@ window.__ModuleLoader__.load({
                     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")))),
+                  }, busy === "addfetch" ? t("page.fetching") : t("page.fetchAvailable")),
+                  h("span", { style: S.pageHint }, t("page.modelsFieldHint"))),
+                addDialog.models.length === 0
+                  ? h("p", { "data-mo": "add-models-empty", style: S.pageHint }, t("page.modelListEmpty"))
+                  : h("div", { "data-mo": "add-models-list", style: S.pickList }, addDialog.models.map(function (row) {
+                      const chips = [];
+                      if (row.context !== undefined && 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("div", { key: row.id, style: S.pickRow, "data-mo": "add-model-item", "data-mo-id": row.id },
+                        h("span", { style: S.pickId }, row.id),
+                        h("span", { style: S.pageSpacer }),
+                        chips,
+                        h("button", {
+                          "data-mo": "add-model-remove",
+                          "data-mo-id": row.id,
+                          type: "button",
+                          title: t("page.deleteModelHint"),
+                          onClick: function () { removeDraftModel(row.id); },
+                          style: S.pageIconAction
+                        }, kitIcon("IconTrashOutlineRegular", "🗑", 13)));
+                    }))),
               addDialog.error === "" ? null : h("p", { "data-mo": "add-error", style: S.pageError }, addDialog.error),
               h("div", { style: S.pickFoot },
                 h("button", {
@@ -3959,7 +4271,7 @@ window.__ModuleLoader__.load({
                 h("button", {
                   "data-mo": "add-submit",
                   type: "button",
-                  disabled: busy === "create",
+                  disabled: busy === "create" || (addDialog.mode === "catalog" && String(addDialog.preset || "") === ""),
                   onClick: createProvider,
                   style: S.pageButtonPrimary
                 }, busy === "create" ? t("page.working") : t("page.create"))))),
@@ -4052,10 +4364,9 @@ window.__ModuleLoader__.load({
           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("div", { style: Object.assign({}, S.pickHead, { cursor: "move" }), "data-mo-drag": "true" },
                 h("h3", { style: S.pickTitle }, modelDialog.mode === "new" ? t("page.modelDialogNew") : t("page.modelDialogTitle")),
                 h("button", {
                   "data-mo": "model-dialog-close",
@@ -4208,10 +4519,9 @@ window.__ModuleLoader__.load({
           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("div", { style: Object.assign({}, S.pickHead, { cursor: "move" }), "data-mo-drag": "true" },
                 h("h3", { style: S.pickTitle }, t("page.deleteProvider") + " · " + deleteTarget),
                 h("button", {
                   "data-mo": "provider-delete-close",