@anweat/dsh-browser 0.1.15-alpha.2 → 0.1.15

package/lib/client.js

@@ -4,19 +4,16 @@ window.__ModuleLoader__.load({
 		var module = { exports: {} };
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 		let react = require("react");
 		let react_jsx_runtime = require("react/jsx-runtime");
 		//#region src/client/form.ts
-		const textField = (field) => ({
-			field,
-			format: (value) => typeof value === "string" ? value : "",
-			parse(text) {
-				return text.trim() === "" ? { kind: "clear" } : {
-					kind: "set",
-					value: text.trim()
-				};
-			}
-		});
+		/** A free-text field that clears when emptied, so blanking the control resets it. */
+		const textField = (field) => (0, _deepseek_ai_dsh_client_ui_primitives.settingsTextField)(field);
+		/**
+		* A boolean field. The card renders a checkbox, so the conversion is explicit
+		* rather than relying on the shared model's text round-trip.
+		*/
 		const booleanField = (field) => ({
 			field,
 			format: (value) => value === true ? "true" : "false",
@@ -25,6 +22,10 @@ window.__ModuleLoader__.load({
 				value: text === "true"
 			} : void 0
 		});
+		/**
+		* An enumerated field. Accepts only a value on the list, so an unknown string
+		* blocks the save instead of writing something the Host would reject.
+		*/
 		const enumField = (field, values) => ({
 			field,
 			format: (value) => typeof value === "string" ? value : values[0] ?? "",
@@ -33,34 +34,22 @@ window.__ModuleLoader__.load({
 				value: text
 			} : void 0
 		});
-		const integerField = (field, min, max) => ({
-			field,
-			format: (value) => typeof value === "number" && Number.isInteger(value) ? String(value) : "",
-			parse(text) {
-				if (text.trim() === "") return { kind: "clear" };
-				const value = Number(text);
-				return Number.isInteger(value) && value >= min && value <= max ? {
-					kind: "set",
-					value
-				} : void 0;
-			}
-		});
-		const stringArrayField = (field) => ({
-			field,
-			format: (value) => Array.isArray(value) ? JSON.stringify(value, null, 2) : "",
-			parse(text) {
-				if (text.trim() === "") return { kind: "clear" };
-				try {
-					const value = JSON.parse(text);
-					return Array.isArray(value) && value.every((entry) => typeof entry === "string") ? {
+		/** A whole-number field bounded to a range; an empty draft clears it. */
+		const rangedNumberField = (field, min, max) => {
+			return {
+				field,
+				format: (0, _deepseek_ai_dsh_client_ui_primitives.settingsNumberField)(field).format,
+				parse(text) {
+					if (text.trim() === "") return { kind: "clear" };
+					const value = Number(text);
+					return Number.isInteger(value) && value >= min && value <= max ? {
 						kind: "set",
 						value
 					} : void 0;
-				} catch {
-					return;
 				}
-			}
-		});
+			};
+		};
+		/** JSON object field: parses to a record, and an empty draft clears the field. */
 		const jsonField = (field, validate) => ({
 			field,
 			format: (value) => value && typeof value === "object" && !Array.isArray(value) ? JSON.stringify(value, null, 2) : "",
@@ -120,21 +109,22 @@ window.__ModuleLoader__.load({
 				"auto-draft"
 			].includes(String(value.persistenceMode))) return false;
 			if (value.activationMode !== void 0 && !["manual", "auto-tested"].includes(String(value.activationMode))) return false;
+			const numeric = [
+				"minSuccessfulRuns",
+				"minDistinctSessions",
+				"successWindowDays",
+				"minSuccessRate",
+				"maxCandidates",
+				"candidateTtlDays",
+				"maxSuggestionsPerDay",
+				"maxDrafts",
+				"maxActiveAssets",
+				"retrievalTopK",
+				"catalogTokenBudget",
+				"maxModelDraftWritesPerSession"
+			];
 			return Object.entries(value).every(([key, entry]) => {
-				if (![
-					"minSuccessfulRuns",
-					"minDistinctSessions",
-					"successWindowDays",
-					"minSuccessRate",
-					"maxCandidates",
-					"candidateTtlDays",
-					"maxSuggestionsPerDay",
-					"maxDrafts",
-					"maxActiveAssets",
-					"retrievalTopK",
-					"catalogTokenBudget",
-					"maxModelDraftWritesPerSession"
-				].includes(key)) return true;
+				if (!numeric.includes(key)) return true;
 				return typeof entry === "number" && Number.isFinite(entry) && entry >= 0;
 			});
 		}
@@ -145,6 +135,11 @@ window.__ModuleLoader__.load({
 				return entry === void 0 || typeof entry === "number" && Number.isInteger(entry) && entry >= min && entry <= max;
 			});
 		}
+		/**
+		* The single-input section fields the card edits, in display order. Every entry
+		* must also be `.volatile()` in the Host Config schema: `volatileForm` drops
+		* unmarked fields, and the Host would refuse a write to one.
+		*/
 		const FIELD_SPECS = [
 			booleanField("enabled"),
 			enumField("automationMode", [
@@ -155,210 +150,52 @@ window.__ModuleLoader__.load({
 			]),
 			enumField("browserRuntime", ["playwright", "patchright"]),
 			textField("channel"),
-			integerField("cdpPort", 1, 65535),
-			stringArrayField("args"),
+			rangedNumberField("cdpPort", 1, 65535),
 			booleanField("headless"),
 			booleanField("opencliEnabled"),
-			jsonField("usagePolicy", validUsagePolicy),
-			jsonField("automationAssets", validAssetPolicy),
 			booleanField("autoInstall"),
 			textField("storageStatePath"),
-			jsonField("authProfiles"),
 			textField("defaultAuthProfile"),
-			jsonField("rulePacks"),
 			textField("executablePath"),
 			textField("snapshotDir"),
 			booleanField("verbose")
 		];
-		const SPEC_BY_FIELD = new Map(FIELD_SPECS.map((spec) => [spec.field, spec]));
-		function stable(value) {
-			if (Array.isArray(value)) return `[${value.map(stable).join(",")}]`;
-			if (value && typeof value === "object") return `{${Object.entries(value).sort(([a], [b]) => a.localeCompare(b)).map(([key, entry]) => `${JSON.stringify(key)}:${stable(entry)}`).join(",")}}`;
-			return JSON.stringify(value);
-		}
-		function same(left, right) {
-			return stable(left) === stable(right);
-		}
-		function createLocalStore(initial) {
-			let snapshot = initial;
-			const listeners = /* @__PURE__ */ new Set();
-			return {
-				getSnapshot: () => snapshot,
-				subscribe(listener) {
-					listeners.add(listener);
-					return () => {
-						listeners.delete(listener);
-					};
-				},
-				set(next) {
-					snapshot = next;
-					for (const listener of listeners) listener();
-				},
-				update(updater) {
-					const draft = structuredClone(snapshot);
-					updater(draft);
-					snapshot = draft;
-					for (const listener of listeners) listener();
-				}
-			};
-		}
+		/** The JSON-shaped section fields the card renders as code editors. */
+		const JSON_FIELD_SPECS = [jsonField("usagePolicy", validUsagePolicy), jsonField("automationAssets", validAssetPolicy)];
+		/** Section fields rendered as JSON code editors rather than single inputs. */
+		const JSON_FIELDS = new Set(JSON_FIELD_SPECS.map((spec) => spec.field));
+		/** Every field the card renders, in display order. */
+		const ALL_FIELD_SPECS = [...FIELD_SPECS, ...JSON_FIELD_SPECS];
 		var BrowserSettingsController = class {
-			scope;
-			staged = /* @__PURE__ */ new Map();
+			form;
 			store;
-			unsubscribe;
-			saving = false;
-			failed = false;
 			constructor(scope) {
-				this.scope = scope;
-				this.store = createLocalStore(this.project());
-				this.unsubscribe = scope.subscribe(() => {
-					this.publish();
-				});
+				this.form = new _deepseek_ai_dsh_client_ui_primitives.SettingsFormModel(scope, [...ALL_FIELD_SPECS]);
+				this.store = this.form.bind(() => this.project());
 			}
 			inject() {
 				return {
 					hooks: { browserSettings: this.store },
-					edit: (field, text) => {
-						this.edit(field, text);
-					},
-					resetField: (field) => {
-						this.resetField(field);
-					},
-					save: () => {
-						this.save();
-					},
-					discard: () => {
-						this.discard();
-					}
+					...this.form.actions()
 				};
 			}
 			snapshot() {
 				return this.store.getSnapshot();
 			}
-			edit(field, text) {
-				this.staged.set(field, {
-					text,
-					clear: false
-				});
-				this.failed = false;
-				this.publish();
-			}
-			resetField(field) {
-				const spec = this.spec(field);
-				this.staged.set(field, {
-					text: spec.format(this.baseValue(field)),
-					clear: true
-				});
-				this.failed = false;
-				this.publish();
-			}
-			discard() {
-				this.staged.clear();
-				this.failed = false;
-				this.publish();
-			}
-			async save() {
-				const plan = this.plan();
-				if (this.saving || plan.some((item) => item.write === void 0) || plan.length === 0) return;
-				this.saving = true;
-				this.failed = false;
-				this.publish();
-				let landed = true;
-				try {
-					for (const item of plan) {
-						if (!item.write) {
-							landed = false;
-							break;
-						}
-						if (item.write.kind === "clear") {
-							await this.scope.unset(item.field);
-							landed = !this.stored(item.field) && landed;
-						} else {
-							await this.scope.set(item.field, item.write.value);
-							landed = same(this.userLayer()?.[item.field], item.write.value) && landed;
-						}
-					}
-				} catch {
-					landed = false;
-				}
-				if (landed) this.staged.clear();
-				this.saving = false;
-				this.failed = !landed;
-				this.publish();
-			}
 			dispose() {
-				this.unsubscribe();
+				this.form.dispose();
 			}
 			project() {
 				const fields = {};
-				for (const spec of FIELD_SPECS) fields[spec.field] = this.field(spec.field);
-				const plan = this.plan();
-				return {
-					available: this.scope.getSnapshot().status === "ready",
-					writable: this.scope.getSnapshot().writable,
-					dirty: plan.length > 0,
-					invalid: plan.some((item) => item.write === void 0),
-					saving: this.saving,
-					failed: this.failed,
-					fields
-				};
-			}
-			field(field) {
-				const spec = this.spec(field);
-				const draft = this.staged.get(field);
-				if (!draft) return {
-					text: spec.format(this.sectionValue(field)),
-					overridden: this.stored(field),
-					invalid: false
-				};
-				const write = draft.clear ? { kind: "clear" } : spec.parse(draft.text);
+				for (const spec of FIELD_SPECS) fields[spec.field] = this.form.field(spec.field);
+				const jsonFields = {};
+				for (const spec of JSON_FIELD_SPECS) jsonFields[spec.field] = this.form.field(spec.field);
 				return {
-					text: draft.text,
-					overridden: write?.kind === "set",
-					invalid: write === void 0
+					...this.form.shell(),
+					fields,
+					jsonFields
 				};
 			}
-			plan() {
-				const writes = [];
-				for (const [field, draft] of this.staged) {
-					const spec = this.spec(field);
-					if (draft.clear) {
-						if (this.stored(field)) writes.push({
-							field,
-							write: { kind: "clear" }
-						});
-						continue;
-					}
-					if (draft.text === spec.format(this.sectionValue(field))) continue;
-					writes.push({
-						field,
-						write: spec.parse(draft.text)
-					});
-				}
-				return writes;
-			}
-			spec(field) {
-				const spec = SPEC_BY_FIELD.get(field);
-				if (!spec) throw new Error(`unknown browser settings field: ${field}`);
-				return spec;
-			}
-			sectionValue(field) {
-				return this.scope.getSnapshot().value?.[field];
-			}
-			baseValue(field) {
-				return this.scope.getSnapshot().base?.[field];
-			}
-			userLayer() {
-				return this.scope.getSnapshot().user;
-			}
-			stored(field) {
-				const user = this.userLayer();
-				return user !== void 0 && Object.hasOwn(user, field);
-			}
-			publish() {
-				this.store.set(this.project());
-			}
 		};
 		//#endregion
 		//#region src/client/styles.ts
@@ -430,268 +267,126 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client/SettingsCard.tsx
-		function FieldShell(props) {
-			const id = `dsh-browser-${props.field}`;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: `${styles.field} ${props.state.invalid ? styles.invalid : ""}`,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: styles.fieldHead,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-							className: styles.label,
-							htmlFor: id,
-							children: props.label
-						}), props.state.overridden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							className: styles.reset,
-							disabled: props.disabled,
-							onClick: () => props.onReset(props.field),
-							children: props.resetLabel
-						}) : null]
-					}),
-					props.children,
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: styles.hint,
-						children: props.hint
-					})
+		/**
+		* The browser settings card, as the Plugins page renders it.
+		*
+		* The page owns the card frame — its title button, disclosure, and artwork come
+		* from the slot registration — so this component renders only what goes inside:
+		* the one-liner for `view: 'summary'`, and the form body for `view: 'page'`.
+		* Drawing our own frame here produced a doubled card and an inner header button
+		* that swallowed the platform's clicks.
+		*
+		* The form chrome is the shared `SettingsForm`/`SettingsValueField` pair from
+		* `@deepseek-ai/dsh-client-ui-primitives`, the same components every official
+		* settings page uses, so the card matches them without restating their markup.
+		* @module dsh-browser/client/SettingsCard
+		*/
+		/** The copy the shared form frame renders, from this page's dictionary. */
+		function formLabels(t) {
+			return {
+				unavailable: t("unavailable"),
+				readOnly: t("readOnly"),
+				saveFailed: t("saveFailed"),
+				save: t("save"),
+				saving: t("saving")
+			};
+		}
+		const SECTION_LAYOUT = [
+			{
+				title: "freedom",
+				hint: "freedomHint",
+				fields: [
+					"enabled",
+					"automationMode",
+					"opencliEnabled"
 				]
-			});
+			},
+			{
+				title: "runtime",
+				hint: "runtimeHint",
+				fields: [
+					"browserRuntime",
+					"channel",
+					"headless",
+					"autoInstall",
+					"executablePath",
+					"cdpPort"
+				]
+			},
+			{
+				title: "advanced",
+				hint: "advancedHint",
+				fields: [
+					"storageStatePath",
+					"defaultAuthProfile",
+					"snapshotDir",
+					"verbose"
+				]
+			}
+		];
+		/** The section field a spec names, when it is one of the single-input fields. */
+		function sectionField(field) {
+			return FIELD_SPECS.some((spec) => spec.field === field) ? field : void 0;
 		}
 		function SettingsCard(props) {
 			const { t } = props;
 			const state = props.useBrowserSettings((snapshot) => snapshot);
-			const [open, setOpen] = (0, react.useState)(false);
-			if (!state.available) return null;
-			const disabled = !state.writable || state.saving;
-			const text = (field, label, hint) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldShell, {
-				field,
-				state: state.fields[field],
-				label: t(label),
-				hint: state.fields[field].invalid ? t("invalid") : t(hint),
-				disabled,
-				resetLabel: t("reset"),
-				onReset: props.resetField,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-					id: `dsh-browser-${field}`,
-					className: styles.input,
-					value: state.fields[field].text,
-					disabled,
-					"aria-invalid": state.fields[field].invalid || void 0,
-					onChange: (event) => props.edit(field, event.currentTarget.value)
-				})
-			});
-			const select = (field, label, hint, options) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldShell, {
-				field,
-				state: state.fields[field],
-				label: t(label),
-				hint: state.fields[field].invalid ? t("invalid") : t(hint),
-				disabled,
-				resetLabel: t("reset"),
-				onReset: props.resetField,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
-					id: `dsh-browser-${field}`,
-					className: styles.input,
-					value: state.fields[field].text,
+			if (props.view === "summary") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: t("description") });
+			const disabled = !state.writable;
+			const numeric = /* @__PURE__ */ new Set(["cdpPort"]);
+			const field = (spec) => {
+				const known = sectionField(spec.field);
+				const fieldState = known ? state.fields[known] : state.jsonFields[spec.field];
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.SettingsValueField, {
+					id: `plugin-config-dsh-browser-${spec.field}`,
+					label: t(spec.field),
+					hint: t(`${spec.field}Hint`),
+					overriddenLabel: t("overridden"),
+					resetLabel: t("reset"),
+					invalidLabel: t(JSON_FIELDS.has(spec.field) ? "invalidJson" : "invalidNumber"),
+					numeric: numeric.has(spec.field),
 					disabled,
-					onChange: (event) => props.edit(field, event.currentTarget.value),
-					children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-						value: option,
-						children: option
-					}, option))
-				})
-			});
-			const json = (field, label, hint, rows = 7) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldShell, {
-				field,
-				state: state.fields[field],
-				label: t(label),
-				hint: state.fields[field].invalid ? t("invalidJson") : t(hint),
-				disabled,
-				resetLabel: t("reset"),
-				onReset: props.resetField,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
-					id: `dsh-browser-${field}`,
-					className: `${styles.input} ${styles.textarea} ${styles.code}`,
-					rows,
-					value: state.fields[field].text,
-					disabled,
-					spellCheck: false,
-					"aria-invalid": state.fields[field].invalid || void 0,
-					onChange: (event) => props.edit(field, event.currentTarget.value)
-				})
-			});
-			const toggle = (field, label, hint) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: styles.toggle,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-					className: styles.toggleLabel,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-						className: styles.check,
-						type: "checkbox",
-						checked: state.fields[field].text === "true",
-						disabled,
-						onChange: (event) => props.edit(field, String(event.currentTarget.checked))
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: styles.label,
-						children: t(label)
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: styles.hint,
-						children: t(hint)
-					})] })]
-				}), state.fields[field].overridden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					className: styles.reset,
-					disabled,
-					onClick: () => props.resetField(field),
-					children: t("reset")
-				}) : null]
-			});
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: `${styles.card} ${open ? styles.open : ""}`,
-				"data-dsh-browser-settings": true,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-					type: "button",
-					className: styles.header,
-					"aria-expanded": open,
-					"aria-label": `${t(open ? "collapse" : "expand")}: ${t("title")}`,
-					onClick: () => setOpen(!open),
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: styles.head,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: styles.titleRow,
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: styles.name,
-								children: t("title")
-							}), state.dirty ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: styles.badge,
-								children: t("unsaved")
-							}) : null]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: styles.description,
-							children: t("description")
+					...fieldState,
+					onEdit: (text) => props.edit(spec.field, text),
+					onReset: () => props.resetField(spec.field)
+				}, spec.field);
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_deepseek_ai_dsh_client_ui_primitives.SettingsForm, {
+				labels: formLabels(t),
+				state,
+				onSave: props.save,
+				onDiscard: props.discard,
+				children: [
+					SECTION_LAYOUT.map((section) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+						className: styles.section,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: styles.sectionHead,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t(section.title) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t(section.hint) })]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: styles.grid,
+							children: section.fields.map((name) => field(FIELD_SPECS.find((spec) => spec.field === name)))
 						})]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-						className: `${styles.chevron} ${open ? styles.chevronOpen : ""}`,
-						viewBox: "0 0 14 14",
-						width: "14",
-						height: "14",
-						"aria-hidden": "true",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-							d: "M3.5 5.5 7 9l3.5-3.5",
-							fill: "none",
-							stroke: "currentColor",
-							strokeWidth: "1.5"
-						})
-					})]
-				}), open ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: styles.body,
-					children: [
-						!state.writable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: styles.notice,
-							role: "status",
-							children: t("readOnly")
-						}) : null,
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-							className: styles.section,
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					}, section.title)),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+						className: styles.section,
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: styles.sectionHead,
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("freedom") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("freedomHint") })]
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("usage") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("usageHint") })]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: styles.grid,
-								children: [
-									toggle("enabled", "enabled", "enabledHint"),
-									select("automationMode", "automationMode", "automationModeHint", [
-										"read-only",
-										"standard",
-										"autonomous",
-										"unrestricted"
-									]),
-									toggle("opencliEnabled", "opencliEnabled", "opencliEnabledHint")
-								]
-							})]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-							className: styles.section,
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: styles.sectionHead,
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("runtime") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("runtimeHint") })]
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: styles.grid,
-								children: [
-									select("browserRuntime", "browserRuntime", "browserRuntimeHint", ["playwright", "patchright"]),
-									text("channel", "channel", "channelHint"),
-									toggle("headless", "headless", "headlessHint"),
-									toggle("autoInstall", "autoInstall", "autoInstallHint"),
-									text("executablePath", "executablePath", "executablePathHint"),
-									text("cdpPort", "cdpPort", "cdpPortHint"),
-									json("args", "args", "argsHint", 5)
-								]
-							})]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-							className: styles.section,
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: styles.sectionHead,
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("usage") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("usageHint") })]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: styles.grid,
-									children: [json("usagePolicy", "usagePolicy", "usagePolicyHint", 10), json("automationAssets", "automationAssets", "automationAssetsHint", 14)]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-									className: styles.notice,
-									role: "note",
-									children: t("restart")
-								})
-							]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutomationAssetsPanel, { ...props }),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
-							className: styles.advanced,
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", { children: t("advanced") }),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-									className: styles.hint,
-									children: t("advancedHint")
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: styles.grid,
-									children: [
-										text("storageStatePath", "storageStatePath", "storageStatePathHint"),
-										text("defaultAuthProfile", "defaultAuthProfile", "defaultAuthProfileHint"),
-										json("authProfiles", "authProfiles", "authProfilesHint"),
-										json("rulePacks", "rulePacks", "rulePacksHint"),
-										text("snapshotDir", "snapshotDir", "snapshotDirHint"),
-										toggle("verbose", "verbose", "verboseHint")
-									]
-								})
-							]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: styles.footer,
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: state.failed ? styles.failed : styles.status,
-								role: "status",
-								"aria-live": "polite",
-								children: t(state.failed ? "saveFailed" : state.invalid ? "invalidSave" : state.dirty ? "pending" : "saved")
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: styles.actions,
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: styles.secondary,
-									disabled: !state.dirty || state.saving,
-									onClick: props.discard,
-									children: t("discard")
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: styles.primary,
-									disabled: !state.dirty || state.invalid || state.saving || !state.writable,
-									onClick: props.save,
-									children: t(state.saving ? "saving" : "save")
-								})]
-							})]
-						})
-					]
-				}) : null]
+								children: JSON_FIELD_SPECS.map((spec) => field(spec))
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: styles.notice,
+								role: "note",
+								children: t("restart")
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutomationAssetsPanel, { ...props })
+				]
 			});
 		}
 		function AutomationAssetsPanel(props) {
@@ -1022,6 +717,9 @@ window.__ModuleLoader__.load({
 			verbose: "详细日志",
 			verboseHint: "输出启动和诊断信息。",
 			reset: "恢复部署值",
+			overridden: "已覆盖",
+			invalidNumber: "请填写数字，留空表示使用默认值。",
+			unavailable: "该插件当前未加载，暂时无法配置。",
 			invalid: "值无效，请检查格式或范围。",
 			invalidJson: "JSON 或数值范围无效。",
 			restart: "保存后完整重启 profile，运行时和工具目录才会重新注册。",
@@ -1111,6 +809,9 @@ window.__ModuleLoader__.load({
 			verbose: "Verbose logs",
 			verboseHint: "Emit startup and diagnostic details.",
 			reset: "Restore deployed",
+			overridden: "Overridden",
+			invalidNumber: "Enter a number, or leave blank to use the default.",
+			unavailable: "This plugin is not loaded, so it cannot be configured right now.",
 			invalid: "Invalid value. Check format and bounds.",
 			invalidJson: "Invalid JSON or numeric bounds.",
 			restart: "Fully restart the profile after saving so runtime and tool catalogs are re-registered.",
@@ -1151,6 +852,8 @@ window.__ModuleLoader__.load({
 				}
 			};
 		}
+		/** This plugin's private RPC channel, matching the Host half. */
+		const CHANNEL = "/dsh-browser-assets";
 		var AutomationAssetsController = class {
 			rpc;
 			store = localStore({
@@ -1254,7 +957,7 @@ window.__ModuleLoader__.load({
 				}
 			}
 			async call(endpoint, payload) {
-				const result = await this.rpc.call("/api", `dsh-browser-assets/${endpoint}`, payload);
+				const result = await this.rpc.call(CHANNEL, endpoint, payload);
 				if (!result.ok) throw new Error(result.error.message);
 				return result.value;
 			}
@@ -1278,7 +981,7 @@ window.__ModuleLoader__.load({
 			"slots",
 			"locale",
 			"connection",
-			"settingsScope"
+			"configForms"
 		];
 		const NS = "dsh-browser.card";
 		function apply(ctx) {
@@ -1287,13 +990,13 @@ window.__ModuleLoader__.load({
 				zh,
 				en
 			}), "dsh-browser: settings dictionaries");
-			const controller = new BrowserSettingsController(ctx.settingsScope.bind({ namespace: SETTINGS_NAMESPACE }));
+			const controller = new BrowserSettingsController(ctx.configForms.get(SETTINGS_NAMESPACE));
 			const assets = new AutomationAssetsController(ctx.connection.rpc);
 			ctx.effect(() => () => controller.dispose(), "dsh-browser: settings controller");
 			ctx.effect(() => () => assets.dispose(), "dsh-browser: automation assets controller");
-			ctx.slots.inject("settings.plugin.item", () => ctx.slots.register({
-				name: "settings.plugin.item",
-				key: SETTINGS_NAMESPACE,
+			ctx.effect(() => ctx.configForms.whileServed([SETTINGS_NAMESPACE], () => ctx.slots.inject("plugins.bundle.config", () => ctx.slots.register({
+				name: "plugins.bundle.config",
+				key: "@anweat/dsh-browser",
 				locale: NS,
 				inject: () => {
 					const settingsProps = controller.inject();
@@ -1307,7 +1010,7 @@ window.__ModuleLoader__.load({
 						}
 					};
 				}
-			}, SettingsCard));
+			}, SettingsCard))), "dsh-browser: settings page");
 		}
 		//#endregion
 		exports.NS = NS;