@edge-sky/dsh-oauth-adapter 0.1.2-dev.2 → 0.1.3-beta.3

package/lib/client.js

@@ -98,6 +98,7 @@ window.__ModuleLoader__.load({
 				},
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [t("modelId"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						className: "dsh-oauth-input",
 						required: true,
 						maxLength: 256,
 						value: id,
@@ -105,12 +106,14 @@ window.__ModuleLoader__.load({
 						onChange: (event) => setId(event.target.value)
 					})] }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [t("modelName"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						className: "dsh-oauth-input",
 						maxLength: 256,
 						value: name,
 						onChange: (event) => setName(event.target.value),
 						placeholder: id
 					})] }),
 					choices.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [t("modelProtocol"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+						className: "dsh-oauth-select",
 						value: api,
 						onChange: (event) => setApi(event.target.value),
 						children: choices.map((choice) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
@@ -123,11 +126,13 @@ window.__ModuleLoader__.load({
 						children: t("manualModelHint")
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						className: "dsh-oauth-button",
 						type: "submit",
 						disabled: busy || !validManual(provider, model),
 						children: t("saveModel")
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						className: "dsh-oauth-button",
 						type: "button",
 						disabled: busy,
 						onClick: close,
@@ -137,6 +142,7 @@ window.__ModuleLoader__.load({
 			});
 		}
 		function ProviderModels({ page, controller, busy, error, t }) {
+			const [expanded, setExpanded] = (0, react.useState)(false);
 			const [editing, setEditing] = (0, react.useState)();
 			const [submitted, setSubmitted] = (0, react.useState)(false);
 			const [confirmMigration, setConfirmMigration] = (0, react.useState)(false);
@@ -155,144 +161,184 @@ window.__ModuleLoader__.load({
 			const disabled = busy || !page.connected || !page.writable;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
 				className: "dsh-oauth-model-provider",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: PROVIDERS.find((p) => p.id === page.provider)?.modelGroupLabel }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [
-						page.connected ? t("modelConnected") : t("disconnected"),
-						" · ",
-						page.source === "account" ? t("accountCatalog") : t("builtinCatalog")
-					] }),
-					page.syncedAt && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [
-						t("lastModelSync"),
-						": ",
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
-							dateTime: page.syncedAt,
-							children: new Date(page.syncedAt).toLocaleString()
-						})
-					] }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [
-						t("matchedModels"),
-						": ",
-						page.counts.matched,
-						" · ",
-						t("pendingModels"),
-						": ",
-						page.counts.pending,
-						" · ",
-						t("manualModels"),
-						": ",
-						page.counts.manual
-					] }),
-					(error || page.error) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						role: "alert",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t(errorLabel) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", { children: t("technicalDetails") }), error?.message ?? page.error] })]
-					}),
-					page.migration ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						disabled,
-						onClick: () => setConfirmMigration(!confirmMigration),
-						children: t("reviewMigration")
-					}), confirmMigration && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("migrationDescription") }),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [
-							page.migration.fields.join(", "),
-							" · ",
-							page.migration.models,
-							" ",
-							t("modelsTitle")
-						] }),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							disabled,
-							onClick: () => controller.migrateModels(page.provider),
-							children: t("confirmMigration")
-						})
-					] })] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						disabled: disabled || !page.managed,
-						onClick: () => controller.syncModels(page.provider),
-						children: busy ? t("modelWorking") : t("syncModels")
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "dsh-oauth-model-header",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+						className: "dsh-oauth-name",
+						children: PROVIDERS.find((p) => p.id === page.provider)?.modelGroupLabel
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						disabled: disabled || !page.managed,
-						onClick: () => setEditing(null),
-						children: t("addModel")
-					})] }),
-					editing !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelForm, {
-						provider: page.provider,
-						...editing === null ? {} : { initial: editing },
-						busy,
-						t,
-						save: (model) => {
-							setSubmitted(true);
-							controller.saveModel(page.provider, model);
-						},
-						close: () => setEditing(void 0)
-					}, editing?.id ?? "new"),
-					[
-						"matched",
-						"pending",
-						"manual"
-					].map((source) => {
-						const rows = page.rows.filter((row) => (row.source === "catalog" ? "matched" : row.source) === source);
-						if (!rows.length) return null;
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-							"aria-label": t(source === "pending" ? "pendingModels" : source === "manual" ? "manualModels" : "matchedModels"),
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", { children: t(source === "pending" ? "pendingModels" : source === "manual" ? "manualModels" : "matchedModels") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-								className: "dsh-oauth-model-list",
-								children: rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: row.name }),
-										" ",
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: row.id }),
-										" ",
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t(row.source === "pending" ? "pendingModels" : row.source === "manual" ? "manualModels" : "matchedModels") })
-									] }),
-									row.source === "pending" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										disabled: disabled || !page.managed,
-										onClick: () => setEditing({
-											id: row.id,
-											name: row.name
-										}),
-										children: t("configureModel")
+						className: "dsh-oauth-button",
+						type: "button",
+						"aria-expanded": expanded,
+						"aria-controls": `dsh-oauth-models-${page.provider}`,
+						onClick: () => setExpanded(!expanded),
+						children: t(expanded ? "collapseModels" : "editModel")
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "dsh-oauth-model-details",
+					id: `dsh-oauth-models-${page.provider}`,
+					hidden: !expanded,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+							className: "dsh-oauth-muted",
+							children: [
+								page.connected ? t("modelConnected") : t("disconnected"),
+								" · ",
+								page.source === "account" ? t("accountCatalog") : t("builtinCatalog")
+							]
+						}),
+						page.syncedAt && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+							className: "dsh-oauth-muted",
+							children: [
+								t("lastModelSync"),
+								": ",
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
+									dateTime: page.syncedAt,
+									children: new Date(page.syncedAt).toLocaleString()
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+							className: "dsh-oauth-muted",
+							children: [
+								t("matchedModels"),
+								": ",
+								page.counts.matched,
+								" · ",
+								t("manualModels"),
+								": ",
+								page.counts.manual
+							]
+						}),
+						(error || page.error) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-oauth-error",
+							role: "alert",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t(errorLabel) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", { children: t("technicalDetails") }), error?.message ?? page.error] })]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dsh-oauth-model-actions",
+							children: page.migration ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								className: "dsh-oauth-button",
+								disabled,
+								onClick: () => setConfirmMigration(!confirmMigration),
+								children: t("reviewMigration")
+							}), confirmMigration && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("migrationDescription") }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [
+									page.migration.fields.join(", "),
+									" · ",
+									page.migration.models,
+									" ",
+									t("modelsTitle")
+								] }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									className: "dsh-oauth-button",
+									disabled,
+									onClick: () => controller.migrateModels(page.provider),
+									children: t("confirmMigration")
+								})
+							] })] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								className: "dsh-oauth-button",
+								disabled: disabled || !page.managed,
+								onClick: () => controller.syncModels(page.provider),
+								children: busy ? t("modelWorking") : t("syncModels")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								className: "dsh-oauth-button",
+								disabled: disabled || !page.managed,
+								onClick: () => setEditing(null),
+								children: t("addModel")
+							})] })
+						}),
+						editing === null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelForm, {
+							provider: page.provider,
+							busy,
+							t,
+							save: (model) => {
+								setSubmitted(true);
+								controller.saveModel(page.provider, model);
+							},
+							close: () => setEditing(void 0)
+						}, "new"),
+						["manual", "matched"].map((source) => {
+							const label = t(source === "manual" ? "manualModels" : "matchedModels");
+							const rows = page.rows.filter((row) => source === "manual" ? row.source === "manual" : row.source === "catalog" || row.source === "matched");
+							const offset = source === "manual" ? page.manualOffset : page.offset;
+							const total = page.counts[source];
+							const move = (next) => controller.readModels(page.provider, source === "matched" ? next : page.offset, source === "manual" ? next : page.manualOffset);
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+								className: "dsh-oauth-model-group",
+								"aria-label": label,
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", { children: label }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+										className: "dsh-oauth-model-list",
+										children: rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: source === "manual" && editing?.id === row.id ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelForm, {
+											provider: page.provider,
+											initial: editing,
+											busy,
+											t,
+											save: (model) => {
+												setSubmitted(true);
+												controller.saveModel(page.provider, model);
+											},
+											close: () => setEditing(void 0)
+										}, row.id) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "dsh-oauth-model-identity",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: row.name }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: row.id })]
+										}), source === "manual" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "dsh-oauth-model-actions",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+												className: "dsh-oauth-button",
+												disabled,
+												onClick: () => setEditing({
+													id: row.id,
+													name: row.name,
+													...MODEL_PROTOCOLS[page.provider].length > 1 ? { api: row.api } : {}
+												}),
+												children: t("editModel")
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+												className: "dsh-oauth-button",
+												"data-variant": "danger",
+												disabled,
+												onClick: () => controller.deleteModel(page.provider, row.id),
+												children: t("deleteModel")
+											})]
+										})] }) }, row.id))
 									}),
-									row.source === "manual" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										disabled,
-										onClick: () => setEditing({
-											id: row.id,
-											name: row.name,
-											...MODEL_PROTOCOLS[page.provider].length > 1 ? { api: row.api } : {}
-										}),
-										children: t("editModel")
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										disabled,
-										onClick: () => controller.deleteModel(page.provider, row.id),
-										children: t("deleteModel")
-									})] })
-								] }, row.id))
-							})]
-						}, source);
-					}),
-					page.total === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("noModels") }),
-					page.total > 10 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("nav", {
-						"aria-label": t("modelsPagination"),
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								disabled: page.offset === 0 || busy,
-								onClick: () => controller.readModels(page.provider, Math.max(0, page.offset - 10)),
-								children: t("previousModels")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-								page.offset + 1,
-								"–",
-								Math.min(page.offset + 10, page.total),
-								" / ",
-								page.total
-							] }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								disabled: page.offset + 10 >= page.total || busy,
-								onClick: () => controller.readModels(page.provider, page.offset + 10),
-								children: t("nextModels")
-							})
-						]
-					})
-				]
+									total === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "dsh-oauth-muted",
+										children: t("noModels")
+									}),
+									total > 10 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("nav", {
+										className: "dsh-oauth-pagination",
+										"aria-label": `${label} · ${t("modelsPagination")}`,
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+												className: "dsh-oauth-button",
+												disabled: offset === 0 || busy,
+												onClick: () => move(Math.max(0, offset - 10)),
+												children: t("previousModels")
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+												offset + 1,
+												"–",
+												Math.min(offset + 10, total),
+												" / ",
+												total
+											] }),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+												className: "dsh-oauth-button",
+												disabled: offset + 10 >= total || busy,
+												onClick: () => move(offset + 10),
+												children: t("nextModels")
+											})
+										]
+									})
+								]
+							}, source);
+						})
+					]
+				})]
 			});
 		}
 		function OAuthModelsSection(props) {
@@ -311,8 +357,14 @@ window.__ModuleLoader__.load({
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 				className: "dsh-oauth-section",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", { children: t("modelsTitle") }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("modelsIntro") }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+						className: "dsh-oauth-title",
+						children: t("modelsTitle")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dsh-oauth-intro",
+						children: t("modelsIntro")
+					}),
 					snapshot.connection !== "open" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 						role: "status",
 						children: t("hostDisconnected")
@@ -320,7 +372,7 @@ window.__ModuleLoader__.load({
 					PROVIDERS.map((provider) => {
 						const page = snapshot.modelPages?.[provider.id];
 						if (!page) return null;
-						if (!page.connected && !page.managed && page.counts.manual === 0) return null;
+						if (!page.connected || !snapshot.accounts.some((account) => account.provider === provider.id && account.configured)) return null;
 						const error = snapshot.modelErrors?.[provider.id];
 						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProviderModels, {
 							page,
@@ -588,7 +640,7 @@ window.__ModuleLoader__.load({
 			modelRouteConflict: "This provider is owned by an existing configuration. Review the details before migration.",
 			loginSyncFailed: "Sign-in succeeded, but model synchronization failed. Open Models to retry.",
 			modelsTitle: "OAuth models",
-			modelsIntro: "Synchronize account-visible models or add a model manually. Manual models survive synchronization.",
+			modelsIntro: "Models are automatically matched against the pi-ai catalog built into DSH. If a model you need is not matched, try adding it manually.",
 			modelId: "Model ID",
 			modelName: "Display name",
 			modelProtocol: "Request protocol",
@@ -598,7 +650,7 @@ window.__ModuleLoader__.load({
 			accountCatalog: "Account-synchronized list",
 			builtinCatalog: "Built-in list · account access unverified",
 			lastModelSync: "Last successful synchronization",
-			matchedModels: "Matched",
+			matchedModels: "Automatic matches",
 			pendingModels: "Needs configuration",
 			manualModels: "Manual",
 			modelConflict: "Models changed elsewhere. The list was refreshed; review it and retry.",
@@ -611,8 +663,9 @@ window.__ModuleLoader__.load({
 			addModel: "Add model",
 			configureModel: "Configure",
 			editModel: "Edit",
+			collapseModels: "Collapse",
 			deleteModel: "Delete manual entry",
-			noModels: "No selectable models. Configure an unmatched model or add one manually.",
+			noModels: "No models in this group.",
 			modelsPagination: "OAuth model pages",
 			previousModels: "Previous",
 			nextModels: "Next",
@@ -654,7 +707,7 @@ window.__ModuleLoader__.load({
 			modelRouteConflict: "该供应商由现有配置管理，请查看详情后再迁移。",
 			loginSyncFailed: "登录成功，但模型同步失败。请前往模型页面重试。",
 			modelsTitle: "OAuth 模型",
-			modelsIntro: "同步账号可见模型，或手动添加模型。同步时会保留手动模型。",
+			modelsIntro: "模型由 DSH 内置 pi-ai 自动匹配。若未匹配到你需要的模型，请尝试手动添加。",
 			modelId: "模型 ID",
 			modelName: "显示名称",
 			modelProtocol: "调用协议",
@@ -664,9 +717,9 @@ window.__ModuleLoader__.load({
 			accountCatalog: "已同步账号列表",
 			builtinCatalog: "内置列表 · 尚未验证账号权限",
 			lastModelSync: "最近成功同步",
-			matchedModels: "已匹配",
+			matchedModels: "自动匹配",
 			pendingModels: "待配置",
-			manualModels: "手动模型",
+			manualModels: "手动配置",
 			modelConflict: "模型已被其他操作修改。列表已刷新，请确认后重试。",
 			modelOperationFailed: "模型操作失败，请查看详情后重试。",
 			reviewMigration: "预览迁移",
@@ -677,8 +730,9 @@ window.__ModuleLoader__.load({
 			addModel: "手动添加",
 			configureModel: "补充配置",
 			editModel: "编辑",
+			collapseModels: "收起",
 			deleteModel: "删除手动项",
-			noModels: "暂无可选模型，请补充待配置项或手动添加。",
+			noModels: "此分组暂无模型。",
 			modelsPagination: "OAuth 模型分页",
 			previousModels: "上一页",
 			nextModels: "下一页",
@@ -811,9 +865,9 @@ window.__ModuleLoader__.load({
 			}
 			loadModels() {
 				this.modelsVisible = true;
-				for (const provider of this.snapshot.accounts) this.readModels(provider.provider);
+				for (const provider of this.snapshot.accounts) if (provider.configured) this.readModels(provider.provider);
 			}
-			readModels(provider, offset = 0) {
+			readModels(provider, offset = 0, manualOffset = 0) {
 				if (this.snapshot.connection !== "open") return;
 				const requestId = crypto.randomUUID();
 				this.latestModelReads.set(provider, requestId);
@@ -825,7 +879,8 @@ window.__ModuleLoader__.load({
 					type: "models-list",
 					requestId,
 					provider,
-					offset
+					offset,
+					manualOffset
 				});
 			}
 			syncModels(provider) {
@@ -977,12 +1032,12 @@ window.__ModuleLoader__.load({
 			receive(message) {
 				switch (message.type) {
 					case "models-changed":
-						if (this.modelsVisible) this.readModels(message.provider, this.snapshot.modelPages?.[message.provider]?.offset ?? 0);
+						if (this.modelsVisible) this.readModels(message.provider, this.snapshot.modelPages?.[message.provider]?.offset ?? 0, this.snapshot.modelPages?.[message.provider]?.manualOffset ?? 0);
 						return;
 					case "models-page": {
 						const request = this.modelRequests.get(message.requestId);
 						this.modelRequests.delete(message.requestId);
-						if (!request) return;
+						if (!request || !this.snapshot.accounts.some((account) => account.provider === request.provider && account.configured)) return;
 						if (!request.write && this.latestModelReads.get(request.provider) !== message.requestId) return;
 						const current = this.snapshot.modelPages?.[request.provider];
 						if (current && message.page.revision < current.revision) {
@@ -1011,7 +1066,7 @@ window.__ModuleLoader__.load({
 					case "models-error": {
 						const request = this.modelRequests.get(message.requestId);
 						this.modelRequests.delete(message.requestId);
-						if (!request) return;
+						if (!request || !this.snapshot.accounts.some((account) => account.provider === request.provider && account.configured)) return;
 						if (!request.write && this.latestModelReads.get(request.provider) !== message.requestId) return;
 						this.update({
 							...this.snapshot,
@@ -1033,14 +1088,30 @@ window.__ModuleLoader__.load({
 					case "snapshot":
 						const accounts = [...message.accounts];
 						const reconciled = reconcileAttemptView(this.snapshot.attempt, accounts);
+						const modelPages = { ...this.snapshot.modelPages };
+						const modelBusy = { ...this.snapshot.modelBusy };
+						const modelErrors = { ...this.snapshot.modelErrors };
+						for (const account of accounts) {
+							if (account.configured) continue;
+							delete modelPages[account.provider];
+							delete modelBusy[account.provider];
+							delete modelErrors[account.provider];
+							this.latestModelReads.delete(account.provider);
+							for (const [id, request] of this.modelRequests) if (request.provider === account.provider) this.modelRequests.delete(id);
+						}
 						const nextSnapshot = {
 							...this.snapshot,
-							accounts
+							accounts,
+							modelPages,
+							modelBusy,
+							modelErrors
 						};
 						if (reconciled === void 0) delete nextSnapshot.attempt;
 						else nextSnapshot.attempt = reconciled;
 						this.update(nextSnapshot);
-						if (this.modelsVisible) for (const account of accounts) this.readModels(account.provider, this.snapshot.modelPages?.[account.provider]?.offset ?? 0);
+						if (this.modelsVisible) {
+							for (const account of accounts) if (account.configured) this.readModels(account.provider, this.snapshot.modelPages?.[account.provider]?.offset ?? 0, this.snapshot.modelPages?.[account.provider]?.manualOffset ?? 0);
+						}
 						return;
 					case "started":
 						const { error: _error, errorDetail: _errorDetail, ...current } = this.snapshot;
@@ -1152,14 +1223,23 @@ window.__ModuleLoader__.load({
 .dsh-oauth-flow{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid var(--dsw-alias-border-l3);font-size:13px;line-height:20px}.dsh-oauth-link{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--dsw-alias-border-l2);border-radius:9px;background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary);text-decoration:none}.dsh-oauth-link:hover{background:var(--dsw-alias-interactive-bg-hover-solid)}.dsh-oauth-link-label{font-weight:500}.dsh-oauth-link-host{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-tertiary);font-size:12px}.dsh-oauth-link-icon{color:var(--dsw-alias-brand-text)}.dsh-oauth-code{display:flex;align-items:center;gap:8px}.dsh-oauth-code code{padding:5px 8px;border-radius:6px;background:var(--dsw-alias-bg-module-platform);font-size:14px;letter-spacing:.08em}
 .dsh-oauth-prompt{display:flex;flex-direction:column;gap:7px}.dsh-oauth-input,.dsh-oauth-select{box-sizing:border-box;width:100%;height:34px;padding:0 10px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-primary)}
 
-.dsh-oauth-model-provider { border: 1px solid var(--border-color, currentColor); border-radius: 8px; padding: 16px; margin-block: 16px; }
-.dsh-oauth-model-provider button { margin: 4px; }
-.dsh-oauth-model-list { padding: 0; list-style: none; }
-.dsh-oauth-model-list li { padding-block: 8px; border-bottom: 1px solid var(--border-color, currentColor); overflow-wrap: anywhere; }
-.dsh-oauth-model-list code { margin-inline: 8px; }
-.dsh-oauth-model-form { display: grid; gap: 12px; margin-block: 12px; }
-.dsh-oauth-model-form label { display: grid; gap: 4px; }
-.dsh-oauth-model-provider nav { display: flex; align-items: center; gap: 8px; }
+.dsh-oauth-model-provider{display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px;border:1px solid var(--dsw-alias-border-l2);border-radius:12px}
+.dsh-oauth-model-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.dsh-oauth-model-header h3{min-width:0;overflow-wrap:anywhere}.dsh-oauth-model-header button{flex-shrink:0}
+.dsh-oauth-model-details{display:flex;flex-direction:column;gap:10px}.dsh-oauth-model-details[hidden]{display:none}
+.dsh-oauth-model-provider h3,.dsh-oauth-model-provider h4{margin:0;line-height:22px;font-weight:500}
+.dsh-oauth-model-provider h4{font-size:13px;color:var(--dsw-alias-label-secondary)}
+.dsh-oauth-model-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
+.dsh-oauth-model-group{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--dsw-alias-border-l2)}
+.dsh-oauth-model-list{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none}
+.dsh-oauth-model-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 0;min-width:0}
+.dsh-oauth-model-list li>.dsh-oauth-model-form{box-sizing:border-box;width:100%;min-width:0}
+.dsh-oauth-model-list li+li{border-top:1px solid var(--dsw-alias-border-l2)}
+.dsh-oauth-model-identity{display:flex;flex-direction:column;gap:3px;min-width:0;overflow-wrap:anywhere}
+.dsh-oauth-model-identity strong{font-size:13px;line-height:20px;font-weight:500}
+.dsh-oauth-model-identity code{font:12px/18px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--dsw-alias-label-tertiary);overflow-wrap:anywhere}
+.dsh-oauth-model-form{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--dsw-alias-border-l2);border-radius:10px}
+.dsh-oauth-model-form label{display:flex;flex-direction:column;gap:5px;font-size:13px;line-height:20px}
+.dsh-oauth-pagination{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--dsw-alias-label-tertiary)}
 `;
 		//#endregion
 		//#region src/client/index.ts

package/lib/index.d.ts

@@ -5,13 +5,16 @@
  */
 import { type ModelContext } from './model-service.js';
 import type { IncomingMessage } from 'node:http';
+import type { Volatile } from '@deepseek-ai/cordis';
 import type { AuthorizationService } from '@deepseek-ai/dsh-authorization';
 import type { CredentialProvider } from '@deepseek-ai/dsh-credentials';
 import type { WebServer } from '@deepseek-ai/dsh-host-webserver';
-import { type SettingsProvider } from '@deepseek-ai/dsh-settings';
+import type SettingsForms from '@deepseek-ai/dsh-settings';
 import z from '@deepseek-ai/schemastery';
+import { type ModelStore } from './model-catalog.js';
 /** Plugin configuration. */
 export interface Config {
+    modelStore: Volatile<ModelStore>;
     /** Emit secret-free transport lifecycle diagnostics. */
     debug?: boolean;
     modelSyncTimeoutMs?: number;
@@ -28,7 +31,7 @@ export declare const inject: string[];
 type OAuthContext = ModelContext & {
     authorization: AuthorizationService;
     credentials: CredentialProvider;
-    settings: SettingsProvider;
+    settings: SettingsForms;
     webServer: WebServer;
 };
 /** Whether a socket address belongs to the local host. */

package/lib/index.js

@@ -10,8 +10,10 @@ import { inspect } from 'node:util';
 import z from '@deepseek-ai/schemastery';
 import WebSocket, { WebSocketServer } from 'ws';
 import { MAX_FRAME_BYTES, OAUTH_SOCKET_PATH, OAUTH_SOCKET_PROTOCOL, PROVIDERS, parseClientCommand, } from './protocol.js';
+import { validateModelStore } from './model-catalog.js';
 /** Runtime-validated plugin configuration. */
 export const Config = z.object({
+    modelStore: z.object({ version: z.const(1).default(1), providers: z.dict(z.any()).default({}) }).default({ version: 1, providers: {} }).volatile(),
     debug: z.boolean().default(false),
     modelSyncTimeoutMs: z.number().min(1).max(2147483647).step(1).default(30000),
     modelSyncMaxResponseBytes: z.number().min(1024).step(1).default(4194304),
@@ -274,7 +276,7 @@ class OAuthConnection {
             }
             if (!this.closed)
                 this.send({ type: 'models-page', requestId: command.requestId,
-                    page: await this.models.page(command.provider, command.type === 'models-list' ? command.offset : 0) });
+                    page: await this.models.page(command.provider, command.type === 'models-list' ? command.offset : 0, command.type === 'models-list' ? command.manualOffset : 0) });
         }
         catch (error) {
             if (!this.closed)
@@ -464,6 +466,13 @@ class OAuthConnection {
 }
 /** Mount the loopback-only OAuth WebSocket over official rc services. */
 export function apply(ctx, config) {
+    validateModelStore(config.modelStore.get());
+    ctx.on('internal/config', function (_raw, next) {
+        const raw = next();
+        if (this === ctx.fiber)
+            validateModelStore(Config(raw).modelStore.get());
+        return raw;
+    });
     const debug = config.debug === true
         ? (message) => { ctx.logger.debug('dsh-oauth-adapter: %s', message); }
         : () => { };
@@ -474,7 +483,7 @@ export function apply(ctx, config) {
         maxPages: config.modelSyncMaxPages ?? 100,
         codexClientVersion: config.codexClientVersion ?? '0.149.0',
     }, provider => { for (const connection of connections)
-        connection.modelChanged(provider); });
+        connection.modelChanged(provider); }, config.modelStore);
     const server = new WebSocketServer({
         noServer: true,
         maxPayload: MAX_FRAME_BYTES,