@dsh-plus/llm-pi 0.1.11 → 0.1.13

package/lib/client.js

@@ -4,8 +4,368 @@ window.__ModuleLoader__.load({
 		var module = { exports: {} };
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-		let react = require("react");
 		let react_jsx_runtime = require("react/jsx-runtime");
+		let react = require("react");
+		//#region ../shared/src/client/icons.tsx
+		/** 官方 IconChevronDownOutline14 的同构实现（path 数据逐字一致）。 */
+		function ChevronDownIcon(props) {
+			const size = props.size ?? 14;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				width: size,
+				height: size,
+				className: props.className,
+				viewBox: "0 0 14 14",
+				fill: "none",
+				xmlns: "http://www.w3.org/2000/svg",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "M11.8486 5.5L11.4238 5.92383L8.69727 8.65137C8.44157 8.90706 8.21562 9.13382 8.01172 9.29785C7.79912 9.46883 7.55595 9.61756 7.25 9.66602C7.08435 9.69222 6.91565 9.69222 6.75 9.66602C6.44405 9.61756 6.20088 9.46883 5.98828 9.29785C5.78438 9.13382 5.55843 8.90706 5.30273 8.65137L2.57617 5.92383L2.15137 5.5L3 4.65137L3.42383 5.07617L6.15137 7.80273C6.42595 8.07732 6.59876 8.24849 6.74023 8.3623C6.87291 8.46904 6.92272 8.47813 6.9375 8.48047C6.97895 8.48703 7.02105 8.48703 7.0625 8.48047C7.07728 8.47813 7.12709 8.46904 7.25977 8.3623C7.40124 8.24849 7.57405 8.07732 7.84863 7.80273L10.5762 5.07617L11 4.65137L11.8486 5.5Z",
+					fill: "currentColor"
+				})
+			});
+		}
+		//#endregion
+		//#region ../shared/src/client/card.tsx
+		const IDLE_STATUS = {
+			kind: "idle",
+			text: ""
+		};
+		function CardChrome(props) {
+			const p = props.prefix;
+			const badge = props.statusBadge;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+				className: `${p}-card${props.open ? ` ${p}-cardOpen` : ""}`,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: `${p}-header`,
+					"aria-expanded": props.open,
+					"aria-label": props.title,
+					onClick: () => props.onToggle(!props.open),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: `${p}-headText`,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: `${p}-name`,
+								children: props.title
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: `${p}-description`,
+								children: props.description
+							})]
+						}),
+						badge !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: `${p}-statusBadge ${badge.on ? `${p}-statusOn` : `${p}-statusOff`}`,
+							children: badge.text
+						}) : null,
+						props.dirty ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: `${p}-pending`,
+							children: props.dirtyLabel
+						}) : null,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDownIcon, { className: `${p}-chevron${props.open ? ` ${p}-chevronOpen` : ""}` })
+					]
+				}), props.open ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: `${p}-body`,
+					children: [
+						props.readOnlyNotice !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: `${p}-readOnly`,
+							role: "status",
+							children: props.readOnlyNotice
+						}) : null,
+						props.children,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: `${p}-footer`,
+							children: [props.status !== void 0 && props.status.kind !== "idle" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: `${p}-status${props.status.kind === "error" ? ` ${p}-statusError` : ""}`,
+								role: "status",
+								children: props.status.text
+							}) : null, props.actions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: `${p}-btn ${action.variant === "primary" ? `${p}-btnPrimary` : `${p}-btnGhost`}`,
+								disabled: action.disabled === true,
+								onClick: action.onClick,
+								children: action.label
+							}, action.key))]
+						})
+					]
+				}) : null]
+			});
+		}
+		//#endregion
+		//#region ../shared/src/client/fields.tsx
+		function TextField$1(props) {
+			const p = props.prefix ?? "dshp";
+			const invalid = props.invalid === true;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `${p}-field`,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: `${p}-head`,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+							className: `${p}-label`,
+							htmlFor: props.id,
+							children: props.label
+						}), props.badge !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: `${p}-badge ${props.badge.set ? `${p}-badgeSet` : `${p}-badgeUnset`}`,
+							children: props.badge.text
+						}) : null]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						id: props.id,
+						className: `${p}-input${invalid ? ` ${p}-inputInvalid` : ""}`,
+						type: props.password === true ? "password" : "text",
+						inputMode: props.numeric === true ? "numeric" : void 0,
+						autoComplete: props.password === true ? "off" : void 0,
+						"aria-invalid": invalid || void 0,
+						value: props.value,
+						disabled: props.disabled === true,
+						onChange: (event) => props.onEdit(event.target.value)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: invalid ? `${p}-invalid` : `${p}-hint`,
+						children: invalid ? props.invalidLabel ?? "" : props.hint ?? ""
+					})
+				]
+			});
+		}
+		/**
+		* 勾选行：自绘圆角扁平开关（switch），对齐官方 WebUI 无原生 checkbox 的
+		* 设计语言（官方选择类控件全走胶囊/菜单，见 cardCss 的 -switch 规则）。
+		* 语义保持 checkbox（无障碍树与表单语义不变），视觉自绘。
+		*/
+		function CheckRow(props) {
+			const p = props.prefix ?? "dshp";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `${p}-checkRow`,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					id: props.id,
+					type: "checkbox",
+					role: "switch",
+					"aria-checked": props.checked,
+					checked: props.checked,
+					disabled: props.disabled === true,
+					onChange: (event) => props.onEdit(event.target.checked)
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+					htmlFor: props.id,
+					children: props.label
+				})]
+			});
+		}
+		//#endregion
+		//#region ../shared/src/client/i18n.ts
+		/** 卡片通用文案（save/discard/unsaved/loading 等四插件共有键）。 */
+		const commonZh = {
+			save: "保存",
+			saving: "保存中…",
+			discard: "放弃",
+			unsaved: "未保存",
+			loading: "加载中…",
+			unavailable: "配置服务不可用。",
+			readOnly: "当前部署无 settings provider，配置为只读；请编辑 settings.yaml。",
+			invalidNumber: "请输入正整数。",
+			collapse: "收起",
+			expand: "展开",
+			enabledOn: "已启用",
+			enabledOff: "未启用",
+			saveFailed: "保存失败，请检查填写内容。",
+			confirm: "确认",
+			cancel: "取消"
+		};
+		const commonEn = {
+			save: "Save",
+			saving: "Saving…",
+			discard: "Discard",
+			unsaved: "Unsaved",
+			loading: "Loading…",
+			unavailable: "Settings service unavailable.",
+			readOnly: "No settings provider in this deployment; config is read-only. Edit settings.yaml.",
+			invalidNumber: "Enter a positive integer.",
+			collapse: "Collapse",
+			expand: "Expand",
+			enabledOn: "On",
+			enabledOff: "Off",
+			saveFailed: "Save failed; check the fields.",
+			confirm: "Confirm",
+			cancel: "Cancel"
+		};
+		/** own 覆盖同键合并（返回新对象，入参不可变）。 */
+		function mergeDict(base, own) {
+			return {
+				...base,
+				...own
+			};
+		}
+		//#endregion
+		//#region ../shared/src/client/scope.ts
+		/**
+		* api 直连实现的命名空间 scope（官方配置页 tab 同款模式）。
+		* 读：describe 取命名空间视图（脱敏 value/revision + 顶层 writable）；
+		* 刷新：remote `settings/document-updated`（按命名空间过滤）与
+		* `connection/reset`；generation 防旧读覆盖新发布。任何页面 origin
+		* （loopback 或 tailnet 信任域名）下行为一致。
+		* effect 归属调用方 fiber（label 需含插件名以便诊断）。
+		*/
+		function createApiScope(api, ns, c, label) {
+			let state = {
+				status: "loading",
+				value: void 0,
+				revision: void 0,
+				writable: false
+			};
+			const listeners = /* @__PURE__ */ new Set();
+			let generation = 0;
+			const publish = (next) => {
+				state = next;
+				for (const listener of [...listeners]) listener();
+			};
+			const load = async () => {
+				const gen = ++generation;
+				let response;
+				try {
+					response = await api.describe({});
+				} catch {
+					return;
+				}
+				if (gen !== generation || !response.result.ok) return;
+				const writable = response.result.value?.writable ?? false;
+				const view = response.result.value?.namespaces.find((candidate) => candidate.ns === ns);
+				if (view === void 0) {
+					publish({
+						status: "unavailable",
+						value: void 0,
+						revision: void 0,
+						writable
+					});
+					return;
+				}
+				publish({
+					status: "ready",
+					value: view.value,
+					revision: view.revision,
+					writable
+				});
+			};
+			const refresh = (namespace) => {
+				if (namespace !== void 0 && namespace !== ns) return;
+				load();
+			};
+			const disposers = [c.get("remote").$on("settings/document-updated", refresh), c.on("connection/reset", () => {
+				load();
+			})];
+			c.effect(() => () => {
+				for (const dispose of disposers) dispose();
+			}, label);
+			load();
+			return {
+				getSnapshot: () => state,
+				subscribe: (listener) => {
+					listeners.add(listener);
+					return () => {
+						listeners.delete(listener);
+					};
+				},
+				load
+			};
+		}
+		//#endregion
+		//#region ../shared/src/client/styles.ts
+		/**
+		* 配置卡片样式工厂（各插件 client 的公共收编版）。
+		* 视觉规则与迁移前逐字一致（类名前缀换为各插件自身，DOM 类名不变），
+		* 另补移动端与可达性增强（767px 断点 + pointer:coarse，对齐 ui-mobile-fit 约定）：
+		* - 窄屏 input/textarea 16px（防 iOS 聚焦缩放）、可点目标 ≥44px；
+		* - footer 按钮等宽换行、状态文字独占一行；
+		* - 展开态 body 底部 sticky 保存栏（长表单滚动中始终可达）。
+		* 沿用官方 data-plugin / data-plugin-css 约定（HMR 据此卸载），不覆盖上游选择器。
+		* @module @dsh-plus/shared/client/styles
+		*/
+		/** 生成全套卡片 CSS；prefix 为插件类名前缀（如 'dne'），extra 为插件特有规则。 */
+		function cardCss(prefix, extra = "") {
+			return `
+.${prefix}-card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;list-style:none;transition:border-color .16s,background .16s}
+.${prefix}-card:hover{border-color:var(--dsw-alias-label-dimmed)}
+.${prefix}-cardOpen{background:var(--dsw-alias-bg-layer-2);border-color:var(--dsw-alias-label-dimmed)}
+.${prefix}-header{appearance:none;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:12px;align-items:center;gap:12px;padding:14px 16px;display:flex}
+.${prefix}-header:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}
+.${prefix}-headText{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}
+.${prefix}-name{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}
+.${prefix}-description{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:1.5}
+.${prefix}-chevron{color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s;display:inline-flex}
+.${prefix}-chevronOpen{transform:rotate(180deg)}
+.${prefix}-pending{white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);border-radius:999px;flex:none;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
+.${prefix}-statusBadge{white-space:nowrap;border-radius:999px;flex:none;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
+.${prefix}-statusOn{background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary)}
+.${prefix}-statusOff{color:var(--dsw-alias-label-tertiary)}
+.${prefix}-body{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding-bottom:8px}
+.${prefix}-field{flex-direction:column;gap:6px;padding:12px 0;display:flex}
+.${prefix}-field+.${prefix}-field{border-top:1px solid var(--dsw-alias-border-l2)}
+.${prefix}-head{align-items:center;gap:8px;display:flex}
+.${prefix}-label{min-width:0;color:var(--dsw-alias-label-primary);flex:1;font-size:13px;font-weight:500;line-height:1.5}
+.${prefix}-badge{white-space:nowrap;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
+.${prefix}-badgeSet{background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary)}
+.${prefix}-badgeUnset{color:var(--dsw-alias-label-tertiary)}
+.${prefix}-input{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);height:34px;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px;transition:border-color .18s,background .18s}
+.${prefix}-input:hover:not(:disabled):not(:focus-visible){border-color:var(--dsw-alias-label-dimmed)}
+.${prefix}-input:focus-visible{border-color:var(--dsw-alias-brand-primary);outline:none}
+.${prefix}-input:disabled{color:var(--dsw-alias-label-tertiary);cursor:default}
+.${prefix}-inputInvalid{border-color:var(--dsw-alias-label-error)}
+.${prefix}-select{appearance:none;background:var(--dsw-alias-bg-module-platform);border:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--dsw-alias-label-secondary) 50%),linear-gradient(135deg,var(--dsw-alias-label-secondary) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;color:var(--dsw-alias-label-primary);font:inherit;font-size:13px;height:34px;box-sizing:border-box;border-radius:8px;padding:0 30px 0 12px;transition:background-color .18s}
+.${prefix}-select:hover:not(:disabled){background-color:var(--dsw-alias-interactive-bg-hover)}
+.${prefix}-hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}
+.${prefix}-invalid{color:var(--dsw-alias-label-error);margin:0;font-size:12px;line-height:1.5}
+.${prefix}-checkRow{align-items:center;gap:10px;display:flex;padding:6px 0}
+.${prefix}-checkRow label{color:var(--dsw-alias-label-primary);font-size:13px;line-height:1.5;cursor:pointer;flex:1;min-width:0}
+/* 自绘圆角扁平开关（官方 UI 无可见原生 checkbox，选择类全走胶囊/菜单） */
+.${prefix}-checkRow input{appearance:none;-webkit-appearance:none;position:relative;box-sizing:border-box;background:var(--dsw-alias-bg-module-platform);border:none;border-radius:999px;width:34px;height:20px;flex:none;cursor:pointer;transition:background .18s;margin:0}
+.${prefix}-checkRow input::after{content:"";position:absolute;top:2px;left:2px;background:var(--dsw-alias-label-primary);border-radius:999px;width:16px;height:16px;transition:left .18s cubic-bezier(.4,0,.2,1)}
+.${prefix}-checkRow input:checked{background:var(--dsw-alias-brand-primary)}
+.${prefix}-checkRow input:checked::after{left:16px;background:var(--dsw-alias-bg-base)}
+.${prefix}-checkRow input:disabled{opacity:.4;cursor:default}
+.${prefix}-checkRow input:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
+.${prefix}-groupLabel{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:600;padding:12px 0 2px;margin:0}
+.${prefix}-readOnly{color:var(--dsw-alias-label-tertiary);margin:12px 0 0;font-size:12px;line-height:1.5}
+.${prefix}-warn{color:var(--dsw-alias-label-error);margin:12px 0 0;font-size:12px;line-height:1.5}
+.${prefix}-footer{border-top:1px solid var(--dsw-alias-border-l2);justify-content:flex-end;align-items:center;gap:8px;padding:12px 0 4px;display:flex;flex-wrap:wrap}
+.${prefix}-status{min-width:0;color:var(--dsw-alias-label-secondary);flex:1;margin:0;font-size:12px;line-height:1.5}
+.${prefix}-statusError{color:var(--dsw-alias-label-error)}
+.${prefix}-btn{appearance:none;font:inherit;cursor:pointer;border:1px solid #0000;border-radius:8px;padding:5px 14px;font-size:13px;line-height:1.5}
+.${prefix}-btnGhost{border-color:var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary);background:0 0}
+.${prefix}-btnGhost:hover:not(:disabled){color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-label-dimmed)}
+.${prefix}-btnPrimary{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3)}
+.${prefix}-btn:disabled{opacity:.4;cursor:default}
+.${prefix}-btn:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
+@media (max-width:767px){
+.${prefix}-body{margin:0 10px}
+.${prefix}-header{padding:12px 12px}
+.${prefix}-input,.${prefix}-select{font-size:16px;height:40px}
+.${prefix}-checkRow{min-height:44px;padding:8px 0}
+.${prefix}-footer{position:sticky;bottom:0;background:var(--dsw-alias-bg-layer-2);margin:0 -10px;padding:10px 10px 6px;border-top:1px solid var(--dsw-alias-border-l2);border-bottom-left-radius:12px;border-bottom-right-radius:12px}
+.${prefix}-status{flex-basis:100%;flex:none}
+.${prefix}-btn{min-height:44px;flex:1;min-width:96px}
+.${prefix}-statusBadge{display:none}
+}
+@media (pointer:coarse){
+.${prefix}-btn{min-height:44px}
+.${prefix}-checkRow{min-height:44px}
+.${prefix}-input,.${prefix}-select{height:40px}
+}
+${extra}
+`;
+		}
+		/**
+		* 幂等注入样式标签（官方 data-plugin-css 约定）；返回新标签，
+		* 已存在或环境无 document 时返回 null（调用方 effect 卸载用）。
+		*/
+		function injectCardStyle(pluginId, css) {
+			if (typeof document === "undefined") return null;
+			const tagId = `${pluginId}/card.css`;
+			if (document.querySelector(`style[data-plugin-css=${JSON.stringify(tagId)}]`) !== null) return null;
+			const tag = document.createElement("style");
+			tag.dataset.plugin = pluginId;
+			tag.dataset.pluginCss = tagId;
+			tag.textContent = css;
+			document.head.appendChild(tag);
+			return tag;
+		}
+		//#endregion
 		//#region src/ns.ts
 		/**
 		* settings 命名空间字面量（纯常量，零依赖，浏览器半可安全引入）。
@@ -318,8 +678,9 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client/fields.tsx
 		/**
-		* 配置卡片基础控件：文本/数字输入、勾选行、下拉、键值对编辑、JSON 文本框。
-		* 视觉对齐官方卡片字段（label + hint + 控件纵列），样式类前缀 lpc-。
+		* llm-pi 特有卡片控件：可折叠小节、键值对编辑、JSON 文本框、带 datalist 的
+		* 文本字段。通用控件（TextField/CheckRow）走 @dsh-plus/shared/client；
+		* 本文件的 SelectField 是 llm-pi 的窄变体（readonly string[] 选项 + 未设置项）。
 		* @module llm-pi/client/fields
 		*/
 		function CollapseSection(props) {
@@ -332,10 +693,7 @@ window.__ModuleLoader__.load({
 					id: props.id,
 					"aria-expanded": open,
 					onClick: () => setOpen(!open),
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: `lpc-chevron${open ? " lpc-chevronOpen" : ""}`,
-						children: "▾"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDownIcon, { className: `lpc-chevron${open ? " lpc-chevronOpen" : ""}` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "lpc-collapseTitle",
 						children: props.title
 					})]
@@ -376,21 +734,6 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
-		function CheckRow(props) {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "lpc-checkRow",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-					id: props.id,
-					type: "checkbox",
-					checked: props.checked,
-					disabled: props.disabled === true,
-					onChange: (event) => props.onEdit(event.target.checked)
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-					htmlFor: props.id,
-					children: props.label
-				})]
-			});
-		}
 		function SelectField(props) {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: `lpc-field${props.wide === true ? " lpc-wide" : ""}`,
@@ -418,17 +761,8 @@ window.__ModuleLoader__.load({
 			});
 		}
 		function KeyValueEditor(props) {
-			const update = (index, patch) => {
-				props.onEdit(props.pairs.map((pair, i) => i === index ? {
-					...pair,
-					...patch
-				} : pair));
-			};
-			const remove = (index) => {
-				props.onEdit(props.pairs.filter((_, i) => i !== index));
-			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "lpc-field lpc-wide",
+				className: "lpc-field",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "lpc-head",
@@ -442,29 +776,45 @@ window.__ModuleLoader__.load({
 						className: "lpc-kvRow",
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-								id: index === 0 ? props.id : void 0,
-								className: "lpc-input",
-								value: pair.key,
 								placeholder: props.keyPlaceholder,
+								className: "lpc-input lpc-kvKey",
+								type: "text",
+								value: pair.key,
 								disabled: props.disabled === true,
-								onChange: (event) => update(index, { key: event.target.value })
+								onChange: (event) => {
+									const next = [...props.pairs];
+									next[index] = {
+										...pair,
+										key: event.target.value
+									};
+									props.onEdit(next);
+								}
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-								className: "lpc-input",
-								value: pair.value,
 								placeholder: props.valuePlaceholder,
+								className: "lpc-input lpc-kvValue",
+								type: "text",
+								value: pair.value,
 								disabled: props.disabled === true,
-								onChange: (event) => update(index, { value: event.target.value })
+								onChange: (event) => {
+									const next = [...props.pairs];
+									next[index] = {
+										...pair,
+										value: event.target.value
+									};
+									props.onEdit(next);
+								}
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
 								className: "lpc-btn lpc-btnGhost lpc-btnSmall",
 								disabled: props.disabled === true,
-								onClick: () => remove(index),
-								children: props.removeLabel
+								"aria-label": props.removeLabel,
+								onClick: () => props.onEdit(props.pairs.filter((_, i) => i !== index)),
+								children: "✕"
 							})
 						]
-					}, index)),
+					}, `${props.id}-${index}`)),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "lpc-kvAdd",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -940,6 +1290,7 @@ window.__ModuleLoader__.load({
 									className: "lpc-label",
 									children: t("input")
 								}), MODALITIES.map((modality) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckRow, {
+									prefix: "lpc",
 									id: `${id}-input-${modality}`,
 									label: modality,
 									checked: model.input[modality],
@@ -1021,6 +1372,12 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client/views/provider-fields.tsx
+		/**
+		* Provider route 的标量字段组：基础字段网格（继承/显示名/端点/凭据/默认容量/
+		* 超时/默认模态/预算）与协议/档位/缓存/传输下拉组。compat、headers、
+		* retryPolicy 与模型目录在 views/providers.tsx 的 route 小节内另行渲染。
+		* @module llm-pi/client/views/provider-fields
+		*/
 		function ProviderScalarFields(props) {
 			const { draft, t } = props;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1111,6 +1468,7 @@ window.__ModuleLoader__.load({
 							className: "lpc-label",
 							children: t("defaultInput")
 						}), MODALITIES.map((modality) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckRow, {
+							prefix: "lpc",
 							id: `${props.id}-input-${modality}`,
 							label: modality,
 							checked: draft.input[modality],
@@ -1281,10 +1639,7 @@ window.__ModuleLoader__.load({
 						"aria-expanded": open,
 						onClick: () => setOpen(!open),
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: `lpc-chevron${open ? " lpc-chevronOpen" : ""}`,
-								children: "▾"
-							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDownIcon, { className: `lpc-chevron${open ? " lpc-chevronOpen" : ""}` }),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "lpc-routeKey",
 								children: route
@@ -1368,14 +1723,9 @@ window.__ModuleLoader__.load({
 		* 顶部：enabled / catalogUrl / catalogRefreshHours / 只读状态行（kitSource、
 		* modelsDevStatus，来自模型目录端点）+ 保存（settings.replace 全量）与
 		* 错误/成功提示；下方为 providers 路由列表（新增/删除/字段编辑/compat/模型
-		* 目录，见 views/）。配置读写走官方 settingsScope 传输（scope.ts）。
-		* 交互对齐官方卡片与 notify-email：折叠/展开、staged draft、未保存标记。
+		* 目录，见 views/）。外壳与基础控件走 @dsh-plus/shared/client 套件。
 		* @module llm-pi/client/card
 		*/
-		const IDLE_STATUS = {
-			kind: "idle",
-			text: ""
-		};
 		function modelsDevText(status, t) {
 			if (status === null) return t("modelsDevEmpty");
 			if (status.error !== null) return `${t("modelsDevError")}${status.error}`;
@@ -1501,167 +1851,141 @@ window.__ModuleLoader__.load({
 				}).finally(() => setRefreshing(false));
 			};
 			const disabled = !snapshot.writable;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: `lpc-card${open ? " lpc-cardOpen" : ""}`,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-					type: "button",
-					className: "lpc-header",
-					"aria-expanded": open,
-					"aria-label": `${t(open ? "collapse" : "expand")}: ${t("title")}`,
-					onClick: () => setOpen(!open),
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: "lpc-headText",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "lpc-name",
-								children: t("title")
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "lpc-description",
-								children: t("description")
-							})]
-						}),
-						dirty ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "lpc-pending",
-							children: t("unsaved")
-						}) : null,
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: `lpc-chevron${open ? " lpc-chevronOpen" : ""}`,
-							children: "▾"
-						})
-					]
-				}), open ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "lpc-body",
-					children: [
-						disabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "lpc-readOnly",
-							role: "status",
-							children: t("readOnly")
-						}) : null,
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckRow, {
-							id: "lpc-enabled",
-							label: t("enabled"),
-							checked: draft.enabled,
-							disabled,
-							onEdit: (value) => {
-								setDraft({
-									...draft,
-									enabled: value
-								});
-								setStatus(IDLE_STATUS);
-							}
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
-							id: "lpc-catalogUrl",
-							label: t("catalogUrl"),
-							hint: t("catalogUrlHint"),
-							value: draft.catalogUrl,
-							disabled,
-							onEdit: (value) => {
-								setDraft({
-									...draft,
-									catalogUrl: value
-								});
-								setStatus(IDLE_STATUS);
-							}
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
-							id: "lpc-catalogRefresh",
-							label: t("catalogRefreshHours"),
-							hint: t("catalogRefreshHoursHint"),
-							value: draft.catalogRefreshHours,
-							numeric: true,
-							disabled,
-							invalid: !numTextOk(draft.catalogRefreshHours),
-							invalidLabel: t("invalidNumber"),
-							onEdit: (value) => {
-								setDraft({
-									...draft,
-									catalogRefreshHours: value
-								});
-								setStatus(IDLE_STATUS);
-							}
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
-							id: "lpc-catalogProxy",
-							label: t("catalogProxy"),
-							hint: t("catalogProxyHint"),
-							value: draft.catalogProxy,
-							disabled,
-							onEdit: (value) => {
-								setDraft({
-									...draft,
-									catalogProxy: value
-								});
-								setStatus(IDLE_STATUS);
-							}
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-							className: "lpc-statusRow",
-							children: [
-								t("kitSource"),
-								"：",
-								kitSource ?? ""
-							]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "lpc-statusRow",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-								t("modelsDevStatus"),
-								"：",
-								modelsDevText(modelsDevStatus, t)
-							] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "lpc-btn lpc-btnGhost lpc-btnSmall lpc-refreshBtn",
-								disabled: disabled || refreshing,
-								onClick: onRefreshCatalog,
-								children: t(refreshing ? "refreshingCatalog" : "refreshCatalog")
-							})]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProvidersSection, {
-							providers: draft.providers,
-							epoch,
-							disabled,
-							t,
-							onAddRoute,
-							onRemoveRoute,
-							onPatchProvider: setProvider
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "lpc-footer",
-							children: [
-								status.kind !== "idle" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-									className: `lpc-status${status.kind === "error" ? " lpc-statusError" : ""}`,
-									role: "status",
-									children: status.text
-								}) : null,
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: "lpc-btn lpc-btnGhost",
-									disabled: !dirty || saving,
-									onClick: onDiscard,
-									children: t("discard")
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: "lpc-btn lpc-btnPrimary",
-									disabled: !dirty || invalid || saving || disabled,
-									onClick: onSave,
-									children: t(saving ? "saving" : "save")
-								})
-							]
-						})
-					]
-				}) : null]
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CardChrome, {
+				prefix: "lpc",
+				title: t("title"),
+				description: t("description"),
+				open,
+				onToggle: setOpen,
+				statusBadge: {
+					text: t(draft.enabled ? "enabledOn" : "enabledOff"),
+					on: draft.enabled
+				},
+				dirty,
+				dirtyLabel: t("unsaved"),
+				readOnlyNotice: disabled ? t("readOnly") : void 0,
+				status,
+				actions: [
+					{
+						key: "refresh",
+						label: t(refreshing ? "refreshingCatalog" : "refreshCatalog"),
+						disabled: disabled || refreshing,
+						onClick: onRefreshCatalog
+					},
+					{
+						key: "discard",
+						label: t("discard"),
+						disabled: !dirty || saving,
+						onClick: onDiscard
+					},
+					{
+						key: "save",
+						label: t(saving ? "saving" : "save"),
+						variant: "primary",
+						disabled: !dirty || invalid || saving || disabled,
+						onClick: onSave
+					}
+				],
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckRow, {
+						prefix: "lpc",
+						id: "lpc-enabled",
+						label: t("enabled"),
+						checked: draft.enabled,
+						disabled,
+						onEdit: (value) => {
+							setDraft({
+								...draft,
+								enabled: value
+							});
+							setStatus(IDLE_STATUS);
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField$1, {
+						prefix: "lpc",
+						id: "lpc-catalogUrl",
+						label: t("catalogUrl"),
+						hint: t("catalogUrlHint"),
+						value: draft.catalogUrl,
+						disabled,
+						onEdit: (value) => {
+							setDraft({
+								...draft,
+								catalogUrl: value
+							});
+							setStatus(IDLE_STATUS);
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField$1, {
+						prefix: "lpc",
+						id: "lpc-catalogRefresh",
+						label: t("catalogRefreshHours"),
+						hint: t("catalogRefreshHoursHint"),
+						value: draft.catalogRefreshHours,
+						numeric: true,
+						disabled,
+						invalid: !numTextOk(draft.catalogRefreshHours),
+						invalidLabel: t("invalidNumber"),
+						onEdit: (value) => {
+							setDraft({
+								...draft,
+								catalogRefreshHours: value
+							});
+							setStatus(IDLE_STATUS);
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField$1, {
+						prefix: "lpc",
+						id: "lpc-catalogProxy",
+						label: t("catalogProxy"),
+						hint: t("catalogProxyHint"),
+						value: draft.catalogProxy,
+						disabled,
+						onEdit: (value) => {
+							setDraft({
+								...draft,
+								catalogProxy: value
+							});
+							setStatus(IDLE_STATUS);
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+						className: "lpc-statusRow",
+						children: [
+							t("kitSource"),
+							"：",
+							kitSource ?? ""
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "lpc-statusRow",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+							t("modelsDevStatus"),
+							"：",
+							modelsDevText(modelsDevStatus, t)
+						] })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProvidersSection, {
+						providers: draft.providers,
+						epoch,
+						disabled,
+						t,
+						onAddRoute,
+						onRemoveRoute,
+						onPatchProvider: setProvider
+					})
+				]
 			});
 		}
 		//#endregion
 		//#region src/client/i18n.ts
 		/**
 		* 配置卡片文案（zh/en）。经 ctx.locale.register 注册、bind 取用，与官方卡片同机制。
+		* 公共键（save/discard/unsaved 等）来自 shared 的 common 字典，本文件只维护业务键。
 		* @module llm-pi/client/i18n
 		*/
 		const NS = "dsh-plus-llm-pi";
-		const zh = {
+		const ownZh = {
 			title: "LLM 路由（llm-pi）",
 			description: "自定义 LLM 路由：协议、compat、模型目录与 models.dev 目录兜底。",
 			enabled: "启用插件",
@@ -1738,19 +2062,10 @@ window.__ModuleLoader__.load({
 			catalogProvider: "候选 provider",
 			catalogLoading: "目录加载中…",
 			catalogFailed: "目录加载失败。",
-			save: "保存",
-			saving: "保存中…",
-			discard: "放弃",
-			unsaved: "未保存",
 			saveOk: "已保存。",
-			saveFailed: "保存失败：",
-			loading: "加载中…",
-			readOnly: "当前部署无 settings provider，配置为只读；请编辑 settings.yaml。",
-			expand: "展开",
-			collapse: "收起",
-			invalidNumber: "请输入有效数字"
+			saveFailed: "保存失败："
 		};
-		const en = {
+		const ownEn = {
 			title: "LLM routes (llm-pi)",
 			description: "Custom LLM routes: protocol, compat, model catalog and models.dev fallback.",
 			enabled: "Enable plugin",
@@ -1827,67 +2142,29 @@ window.__ModuleLoader__.load({
 			catalogProvider: "Candidate provider",
 			catalogLoading: "Loading catalog…",
 			catalogFailed: "Failed to load catalog.",
-			save: "Save",
-			saving: "Saving…",
-			discard: "Discard",
-			unsaved: "Unsaved",
 			saveOk: "Saved.",
-			saveFailed: "Save failed: ",
-			loading: "Loading…",
-			readOnly: "No settings provider in this deployment; edit settings.yaml instead.",
-			expand: "Expand",
-			collapse: "Collapse",
-			invalidNumber: "Enter a valid number"
+			saveFailed: "Save failed: "
 		};
+		const zh = mergeDict(commonZh, ownZh);
+		const en = mergeDict(commonEn, ownEn);
 		//#endregion
 		//#region src/client/styles.ts
 		/**
-		* 配置卡片样式：沿用官方 data-plugin / data-plugin-css 约定（HMR 据此卸载），
-		* 视觉对齐官方卡片（--dsw-alias-* 变量），不覆盖上游任何选择器。
+		* 配置卡片样式：基础规则走 @dsh-plus/shared/client 的 cardCss('lpc')，
+		* 本文件补插件特有规则（route/model 折叠块、键值对行、网格、JSON 文本框）
+		* 及窄屏响应式：views 的双列网格在窄屏转单列、route 头部按钮换行、
+		* 键值对行纵向堆叠、文本框 16px 防 iOS 缩放。
+		* 沿用官方 data-plugin / data-plugin-css 约定（HMR 据此卸载）。
 		* @module llm-pi/client/styles
 		*/
 		const PLUGIN_ID = "@dsh-plus/llm-pi";
-		const STYLE_TAG_ID = `${PLUGIN_ID}/card.css`;
-		const cardCss = `
-.lpc-card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;list-style:none;transition:border-color .16s,background .16s}
-.lpc-card:hover{border-color:var(--dsw-alias-label-dimmed)}
-.lpc-cardOpen{background:var(--dsw-alias-bg-layer-2);border-color:var(--dsw-alias-label-dimmed)}
-.lpc-header{appearance:none;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:12px;align-items:center;gap:12px;padding:14px 16px;display:flex}
-.lpc-header:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}
-.lpc-headText{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}
-.lpc-name{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}
-.lpc-description{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:1.5}
-.lpc-chevron{color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s;font-size:12px}
-.lpc-chevronOpen{transform:rotate(180deg)}
-.lpc-pending{white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);border-radius:999px;flex:none;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
-.lpc-body{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding-bottom:8px}
-.lpc-field{flex-direction:column;gap:6px;padding:12px 0;display:flex;min-width:0}
-.lpc-field+.lpc-field{border-top:1px solid var(--dsw-alias-border-l2)}
-.lpc-head{align-items:center;gap:8px;display:flex}
-.lpc-label{min-width:0;color:var(--dsw-alias-label-primary);flex:1;font-size:13px;font-weight:500;line-height:1.5}
-.lpc-input{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);height:34px;width:100%;box-sizing:border-box;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px}
-.lpc-input:focus-visible{border-color:var(--dsw-alias-brand-primary);outline:none}
-.lpc-input:disabled{color:var(--dsw-alias-label-tertiary);cursor:default}
-.lpc-inputInvalid{border-color:var(--dsw-alias-label-error)}
-.lpc-select{appearance:none}
+		const cardCssAll = cardCss("lpc", `
+.lpc-input{width:100%;box-sizing:border-box}
+.lpc-select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--dsw-alias-label-secondary) 50%),linear-gradient(135deg,var(--dsw-alias-label-secondary) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
 .lpc-textarea{height:auto;min-height:72px;padding:8px 12px;line-height:1.5;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;resize:vertical}
-.lpc-hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}
-.lpc-invalid{color:var(--dsw-alias-label-error);margin:0;font-size:12px;line-height:1.5}
-.lpc-checkRow{align-items:center;gap:8px;display:flex;padding:3px 0}
-.lpc-checkRow input{accent-color:var(--dsw-alias-brand-primary)}
-.lpc-checkRow label{color:var(--dsw-alias-label-primary);font-size:13px;line-height:1.5;cursor:pointer}
-.lpc-groupLabel{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:600;padding:14px 0 2px;margin:0}
-.lpc-readOnly{color:var(--dsw-alias-label-tertiary);margin:12px 0 0;font-size:12px;line-height:1.5}
+.lpc-checkRow{padding:3px 0}
 .lpc-statusRow{color:var(--dsw-alias-label-tertiary);margin:6px 0 0;font-size:12px;line-height:1.6;word-break:break-all}
-.lpc-footer{border-top:1px solid var(--dsw-alias-border-l2);justify-content:flex-end;align-items:center;gap:8px;padding:12px 0 4px;display:flex;flex-wrap:wrap}
-.lpc-status{min-width:0;color:var(--dsw-alias-label-secondary);flex:1;margin:0;font-size:12px;line-height:1.5}
-.lpc-statusError{color:var(--dsw-alias-label-error)}
-.lpc-btn{appearance:none;font:inherit;cursor:pointer;border:1px solid #0000;border-radius:8px;padding:5px 14px;font-size:13px;line-height:1.5;flex:none}
-.lpc-btnGhost{border-color:var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary);background:0 0}
-.lpc-btnGhost:hover:not(:disabled){color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-label-dimmed)}
-.lpc-btnPrimary{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3)}
-.lpc-btn:disabled{opacity:.4;cursor:default}
-.lpc-btn:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
+.lpc-btn{flex:none}
 .lpc-btnSmall{padding:2px 10px;font-size:12px}
 .lpc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
 .lpc-gridNested{margin-top:2px}
@@ -1916,17 +2193,23 @@ window.__ModuleLoader__.load({
 .lpc-collapseTitle{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:600}
 .lpc-collapseBody{border-top:1px dashed var(--dsw-alias-border-l2);padding-bottom:6px}
 .lpc-refreshBtn{margin-left:8px;vertical-align:middle}
-`;
+@media (max-width:767px){
+.lpc-grid{grid-template-columns:1fr}
+.lpc-routeHead{flex-wrap:wrap}
+.lpc-routeKey{white-space:normal;word-break:break-all}
+.lpc-routeBody{margin:0 8px}
+.lpc-modelRow{padding:0 8px}
+.lpc-modelHead{flex-wrap:wrap}
+.lpc-kvRow{flex-direction:column;align-items:stretch}
+.lpc-kvRow .lpc-btn{align-self:flex-end}
+.lpc-textarea{font-size:16px}
+.lpc-statusRow{display:flex;flex-direction:column;gap:4px}
+.lpc-catalogBar .lpc-input{flex:1;min-width:140px}
+}
+`);
 		/** 幂等注入样式标签；返回标签（已存在或环境无 document 时为 null）。 */
 		function injectStyle() {
-			if (typeof document === "undefined") return null;
-			if (document.querySelector(`style[data-plugin-css=${JSON.stringify(STYLE_TAG_ID)}]`) !== null) return null;
-			const tag = document.createElement("style");
-			tag.dataset.plugin = PLUGIN_ID;
-			tag.dataset.pluginCss = STYLE_TAG_ID;
-			tag.textContent = cardCss;
-			document.head.appendChild(tag);
-			return tag;
+			return injectCardStyle(PLUGIN_ID, cardCssAll);
 		}
 		//#endregion
 		//#region src/client/client.ts
@@ -1938,75 +2221,6 @@ window.__ModuleLoader__.load({
 			"connection",
 			"remote"
 		];
-		/**
-		* api 直连实现的命名空间 scope（官方配置页 tab 同款模式）。
-		* 读：describe 取命名空间视图（脱敏 value/revision + 顶层 writable）；
-		* 刷新：remote `settings/document-updated`（按命名空间过滤）与
-		* `connection/reset`；generation 防旧读覆盖新发布。任何页面 origin
-		* （loopback 或 tailnet 信任域名）下行为一致。
-		*/
-		function createApiScope(api, ns, c) {
-			let state = {
-				status: "loading",
-				value: void 0,
-				revision: void 0,
-				writable: false
-			};
-			const listeners = /* @__PURE__ */ new Set();
-			let generation = 0;
-			const publish = (next) => {
-				state = next;
-				for (const listener of [...listeners]) listener();
-			};
-			const load = async () => {
-				const gen = ++generation;
-				let response;
-				try {
-					response = await api.describe({});
-				} catch {
-					return;
-				}
-				if (gen !== generation || !response.result.ok) return;
-				const writable = response.result.value?.writable ?? false;
-				const view = response.result.value?.namespaces.find((candidate) => candidate.ns === ns);
-				if (view === void 0) {
-					publish({
-						status: "unavailable",
-						value: void 0,
-						revision: void 0,
-						writable
-					});
-					return;
-				}
-				publish({
-					status: "ready",
-					value: view.value,
-					revision: view.revision,
-					writable
-				});
-			};
-			const refresh = (namespace) => {
-				if (namespace !== void 0 && namespace !== ns) return;
-				load();
-			};
-			const disposers = [c.get("remote").$on("settings/document-updated", refresh), c.on("connection/reset", () => {
-				load();
-			})];
-			c.effect(() => () => {
-				for (const dispose of disposers) dispose();
-			}, "llm-pi: settings scope");
-			load();
-			return {
-				getSnapshot: () => state,
-				subscribe: (listener) => {
-					listeners.add(listener);
-					return () => {
-						listeners.delete(listener);
-					};
-				},
-				load
-			};
-		}
 		function apply(ctx) {
 			const c = ctx;
 			const tag = injectStyle();
@@ -2018,7 +2232,7 @@ window.__ModuleLoader__.load({
 				en
 			}), "llm-pi: locale");
 			const api = c.get("connection").api.settings;
-			const scope = createApiScope(api, SETTINGS_NS, c);
+			const scope = createApiScope(api, SETTINGS_NS, c, "llm-pi: settings scope");
 			c.slots.inject("settings.plugin.item", () => c.slots.register({
 				name: "settings.plugin.item",
 				key: SETTINGS_NS,