dsh-deeppilot 0.9.1 → 0.9.2

package/lib/client.js

@@ -3667,7 +3667,330 @@ window.__ModuleLoader__.load({
 			return typeof value === "number" && Number.isInteger(value) && value >= 1024 && value <= 65535 ? value : DEFAULT_LOCAL_PORT;
 		}
 		//#endregion
+		//#region src/client/settings-props.ts
+		const MISSING_REPORT_HOOK = () => ({
+			status: "loading",
+			report: null,
+			message: ""
+		});
+		const MISSING_ENABLED_HOOK = () => ({
+			status: "unavailable",
+			enabled: true
+		});
+		const MISSING_LOCAL_ENABLED_HOOK = () => ({
+			status: "unavailable",
+			enabled: true
+		});
+		const MISSING_LOCAL_PORT_HOOK = () => ({
+			status: "unavailable",
+			value: DEFAULT_LOCAL_PORT
+		});
+		const MISSING_REMOTE_ENABLED_HOOK = () => ({
+			status: "unavailable",
+			enabled: false
+		});
+		const MISSING_REMOTE_LIMIT_HOOK = () => ({
+			status: "unavailable",
+			value: 8
+		});
+		const MISSING_DEBUG_HOOK = () => ({
+			status: "unavailable",
+			enabled: false
+		});
+		/** 诊断行的 key，集中在此便于对账（tests/settings-props.test.ts 逐条断言）。 */
+		const DIAG_KEY = {
+			reportHook: "diag.missingReportHook",
+			enabledHook: "diag.missingEnabledHook",
+			localEnabledHook: "diag.missingLocalEnabledHook",
+			localPortHook: "diag.missingLocalPortHook",
+			remoteEnabledHook: "diag.missingRemoteEnabledHook",
+			remoteLimitHook: "diag.missingRemoteLimitHook",
+			debugHook: "diag.missingDebugHook",
+			refresh: "diag.missingRefresh",
+			reveal: "diag.missingReveal",
+			rotate: "diag.missingRotate",
+			rename: "diag.missingRename",
+			testRelay: "diag.missingTestRelay",
+			testPush: "diag.missingTestPush",
+			setEnabled: "diag.missingSetEnabled",
+			setLocal: "diag.missingSetLocal",
+			setLocalPort: "diag.missingSetLocalPort",
+			setRemote: "diag.missingSetRemote",
+			setRemoteLimit: "diag.missingSetRemoteLimit",
+			setDebug: "diag.missingSetDebug",
+			settingsUnavailable: "diag.settingsUnavailable"
+		};
+		const CAPABILITY_BY_PROP = [
+			["refresh", "refresh"],
+			["beginPairing", "beginPairing"],
+			["revokeDevice", "revokeDevice"],
+			["setDeviceName", "setDeviceName"],
+			["testRelay", "testRelay"],
+			["testPush", "testPush"],
+			["setEnabled", "setDeepPilotEnabled"],
+			["setLocalEnabled", "setDeepPilotLocalEnabled"],
+			["setLocalPort", "setDeepPilotLocalPort"],
+			["setRemoteEnabled", "setDeepPilotRemoteEnabled"],
+			["setRemoteLimit", "setDeepPilotRemoteConnectionLimit"],
+			["setDebug", "setDeepPilotDebug"]
+		];
+		const isFn = (value) => typeof value === "function";
+		/**
+		* 把宿主注入的原始对象归一化成页面可消费的面。
+		*
+		* 逐项复刻迁移前页面内的行为：hook 缺失换 fallback 并记诊断；函数缺失则该
+		* 能力不进 `can` 并记诊断；诊断顺序与原先的 `diag[]` 完全一致（宿主过期时
+		* 用户看到的技术诊断因此一字不差）。
+		*/
+		function normalizeSettingsPageProps(raw) {
+			const source = raw ?? {};
+			const t = typeof source.t === "function" ? source.t : ((key) => key);
+			const diagnostics = [];
+			const can = /* @__PURE__ */ new Set();
+			const useReport = isFn(source.useDeepPilotReport) ? source.useDeepPilotReport : MISSING_REPORT_HOOK;
+			const useEnabled = isFn(source.useDeepPilotEnabled) ? source.useDeepPilotEnabled : MISSING_ENABLED_HOOK;
+			const useLocalEnabled = isFn(source.useDeepPilotLocalEnabled) ? source.useDeepPilotLocalEnabled : MISSING_LOCAL_ENABLED_HOOK;
+			const useLocalPort = isFn(source.useDeepPilotLocalPort) ? source.useDeepPilotLocalPort : MISSING_LOCAL_PORT_HOOK;
+			const useRemoteEnabled = isFn(source.useDeepPilotRemoteEnabled) ? source.useDeepPilotRemoteEnabled : MISSING_REMOTE_ENABLED_HOOK;
+			const useRemoteLimit = isFn(source.useDeepPilotRemoteConnectionLimit) ? source.useDeepPilotRemoteConnectionLimit : MISSING_REMOTE_LIMIT_HOOK;
+			const useDebug = isFn(source.useDeepPilotDebug) ? source.useDeepPilotDebug : MISSING_DEBUG_HOOK;
+			if (!isFn(source.useDeepPilotReport)) diagnostics.push(t(DIAG_KEY.reportHook));
+			if (!isFn(source.useDeepPilotEnabled)) diagnostics.push(t(DIAG_KEY.enabledHook));
+			if (!isFn(source.refresh)) diagnostics.push(t(DIAG_KEY.refresh));
+			if (!isFn(source.beginPairing)) diagnostics.push(t(DIAG_KEY.reveal));
+			if (!isFn(source.revokeDevice)) diagnostics.push(t(DIAG_KEY.rotate));
+			if (!isFn(source.setDeviceName)) diagnostics.push(t(DIAG_KEY.rename));
+			if (!isFn(source.testRelay)) diagnostics.push(t(DIAG_KEY.testRelay));
+			if (!isFn(source.testPush)) diagnostics.push(t(DIAG_KEY.testPush));
+			if (!isFn(source.setDeepPilotEnabled)) diagnostics.push(t(DIAG_KEY.setEnabled));
+			if (!isFn(source.useDeepPilotLocalEnabled)) diagnostics.push(t(DIAG_KEY.localEnabledHook));
+			if (!isFn(source.useDeepPilotLocalPort)) diagnostics.push(t(DIAG_KEY.localPortHook));
+			if (!isFn(source.setDeepPilotLocalEnabled)) diagnostics.push(t(DIAG_KEY.setLocal));
+			if (!isFn(source.setDeepPilotLocalPort)) diagnostics.push(t(DIAG_KEY.setLocalPort));
+			if (!isFn(source.useDeepPilotRemoteEnabled)) diagnostics.push(t(DIAG_KEY.remoteEnabledHook));
+			if (!isFn(source.setDeepPilotRemoteEnabled)) diagnostics.push(t(DIAG_KEY.setRemote));
+			if (!isFn(source.useDeepPilotRemoteConnectionLimit)) diagnostics.push(t(DIAG_KEY.remoteLimitHook));
+			if (!isFn(source.setDeepPilotRemoteConnectionLimit)) diagnostics.push(t(DIAG_KEY.setRemoteLimit));
+			if (!isFn(source.useDeepPilotDebug)) diagnostics.push(t(DIAG_KEY.debugHook));
+			if (!isFn(source.setDeepPilotDebug)) diagnostics.push(t(DIAG_KEY.setDebug));
+			for (const [capability, prop] of CAPABILITY_BY_PROP) if (isFn(source[prop])) can.add(capability);
+			return {
+				props: {
+					useDeepPilotReport: useReport,
+					useDeepPilotEnabled: useEnabled,
+					useDeepPilotLocalEnabled: useLocalEnabled,
+					useDeepPilotLocalPort: useLocalPort,
+					useDeepPilotRemoteEnabled: useRemoteEnabled,
+					useDeepPilotRemoteConnectionLimit: useRemoteLimit,
+					useDeepPilotDebug: useDebug,
+					t,
+					refresh: isFn(source.refresh) ? source.refresh : void 0,
+					beginPairing: isFn(source.beginPairing) ? source.beginPairing : void 0,
+					revokeDevice: isFn(source.revokeDevice) ? source.revokeDevice : void 0,
+					setDeviceName: isFn(source.setDeviceName) ? source.setDeviceName : void 0,
+					testRelay: isFn(source.testRelay) ? source.testRelay : void 0,
+					testPush: isFn(source.testPush) ? source.testPush : void 0,
+					setDeepPilotEnabled: isFn(source.setDeepPilotEnabled) ? source.setDeepPilotEnabled : void 0,
+					setDeepPilotLocalEnabled: isFn(source.setDeepPilotLocalEnabled) ? source.setDeepPilotLocalEnabled : void 0,
+					setDeepPilotLocalPort: isFn(source.setDeepPilotLocalPort) ? source.setDeepPilotLocalPort : void 0,
+					setDeepPilotRemoteEnabled: isFn(source.setDeepPilotRemoteEnabled) ? source.setDeepPilotRemoteEnabled : void 0,
+					setDeepPilotRemoteConnectionLimit: isFn(source.setDeepPilotRemoteConnectionLimit) ? source.setDeepPilotRemoteConnectionLimit : void 0,
+					setDeepPilotDebug: isFn(source.setDeepPilotDebug) ? source.setDeepPilotDebug : void 0
+				},
+				can,
+				diagnostics,
+				reportHookMissing: !isFn(source.useDeepPilotReport)
+			};
+		}
+		//#endregion
+		//#region src/client/settings-view-models.ts
+		/**
+		* 设置页的 view model：把原先住在渲染函数里的三块逻辑变成可单测的纯模块。
+		*
+		* 迁移前 `settings-page.ts` 是一个 1059 行的组件，funnel phase → {dot, label}、
+		端口/连接数草稿的编辑与合法性、serviceStatus 派生全在渲染函数里，没有任何
+		直接测试。这里按 pairing-panel.ts 的形状把它们拆成 state / action / reduce /
+		view 四件套——shape 与该先例一致，但**不继承它唯一的泄漏**：view model 只返回
+		语义值，i18n key 的映射留在页面（措辞归页面，测试不跟着措辞漂）。
+		*/
+		const REMOTE_PHASE_META = {
+			disabled: {
+				dot: "",
+				label: "disabled"
+			},
+			starting: {
+				dot: " pbb-dotWarn",
+				label: "starting"
+			},
+			login_required: {
+				dot: " pbb-dotWarn",
+				label: "login_required"
+			},
+			online: {
+				dot: " pbb-dotOk",
+				label: "online"
+			},
+			error: {
+				dot: " pbb-dotBad",
+				label: "error"
+			},
+			unavailable: {
+				dot: " pbb-dotBad",
+				label: "unavailable"
+			},
+			stopped: {
+				dot: "",
+				label: "stopped"
+			}
+		};
+		const LOCAL_PHASE_META = {
+			disabled: {
+				dot: "",
+				label: "disabled"
+			},
+			starting: {
+				dot: " pbb-dotWarn",
+				label: "starting"
+			},
+			online: {
+				dot: " pbb-dotOk",
+				label: "online"
+			},
+			error: {
+				dot: " pbb-dotBad",
+				label: "error"
+			},
+			stopped: {
+				dot: "",
+				label: "stopped"
+			}
+		};
+		/** 从点位反推「需要注意 / 已在线」——原先页面用字符串 includes 猜类名。 */
+		function dotState(dot) {
+			return {
+				attention: dot?.includes("pbb-dotBad") === true,
+				online: dot?.includes("pbb-dotOk") === true
+			};
+		}
+		function serviceStatus(input) {
+			const local = dotState(input.localDot);
+			const remote = dotState(input.remoteDot);
+			const attention = local.attention || remote.attention;
+			const online = local.online || remote.online;
+			return {
+				kind: !input.switchReady ? "loading" : !input.enabled ? "off" : attention ? "attention" : online ? "ready" : "loading",
+				dot: !input.enabled ? "" : attention ? " pbb-dotBad" : online ? " pbb-dotOk" : " pbb-dotWarn"
+			};
+		}
+		const LOCAL_PORT_RANGE = {
+			min: MIN_LOCAL_PORT,
+			max: MAX_LOCAL_PORT,
+			fallback: DEFAULT_LOCAL_PORT
+		};
+		const REMOTE_LIMIT_RANGE = {
+			min: 1,
+			max: 16,
+			fallback: 8
+		};
+		function initialNumericDraft(range) {
+			return {
+				draft: String(range.fallback),
+				message: "",
+				failed: false
+			};
+		}
+		function numericDraftReduce(state, action, range) {
+			switch (action.type) {
+				case "edit": return {
+					...state,
+					draft: action.draft
+				};
+				case "sync": return {
+					...state,
+					draft: String(action.value),
+					message: "",
+					failed: false
+				};
+				case "applied": return {
+					...state,
+					message: "",
+					failed: false
+				};
+				case "succeeded": return {
+					...state,
+					message: action.message,
+					failed: false
+				};
+				case "failed": return {
+					...state,
+					message: action.message,
+					failed: true
+				};
+			}
+		}
+		function numericDraftView(state, current, range) {
+			const value = Number(state.draft);
+			const valid = Number.isInteger(value) && value >= range.min && value <= range.max;
+			return {
+				value,
+				valid,
+				unchanged: valid && value === current
+			};
+		}
+		/** 已撤销的设备不展示。 */
+		function visibleDevices(report) {
+			return (report?.devices ?? []).filter((device) => device.revokedAt === void 0);
+		}
+		/** 设备展示名：自定义名优先，都没有则空串（兜底文案归页面）。 */
+		function deviceLabel(device) {
+			return (device.customName ?? device.deviceName).trim();
+		}
+		/** 渲染一块连接磁贴。纯数据函数：九参进，元素树出。 */
+		function renderConnectionTile(key, title, description, checked, ready, dot, statusLabel, onToggle, extra = null) {
+			return (0, react.createElement)("div", {
+				className: "pbb-connectionTile",
+				key
+			}, (0, react.createElement)("div", { className: "pbb-connectionTileHeader" }, (0, react.createElement)("span", { className: "pbb-switchTitle pbb-dotRow" }, (0, react.createElement)("span", {
+				className: "pbb-dot" + dot,
+				role: "img",
+				"aria-label": statusLabel,
+				title: statusLabel
+			}), title), (0, react.createElement)("button", {
+				type: "button",
+				role: "switch",
+				"aria-checked": checked,
+				"aria-label": title,
+				disabled: !ready,
+				className: "pbb-switch" + (checked ? " pbb-switchOn" : ""),
+				onClick: onToggle
+			})), (0, react.createElement)("span", { className: "pbb-connectionState" }, statusLabel), (0, react.createElement)("p", { className: "pbb-connectionDescription" }, description), extra);
+		}
+		//#endregion
 		//#region src/client/settings-page.ts
+		/** phase 语义标签 → i18n key。措辞归页面，view model 只认语义。 */
+		const REMOTE_LABEL_KEY = {
+			disabled: "phase.disabled",
+			starting: "phase.starting",
+			login_required: "phase.login_required",
+			online: "phase.online",
+			error: "phase.error",
+			unavailable: "phase.unavailable",
+			stopped: "phase.stopped"
+		};
+		const LOCAL_LABEL_KEY = {
+			disabled: "local.phaseDisabled",
+			starting: "local.phaseStarting",
+			online: "local.phaseOnline",
+			error: "local.phaseError",
+			stopped: "local.phaseStopped"
+		};
+		/** 服务状态 → i18n key。 */
+		const SERVICE_STATUS_KEY = {
+			loading: "status.loading",
+			off: "status.off",
+			attention: "status.attention",
+			ready: "status.ready"
+		};
 		/** Inline trash icon for the compact destructive row action. Kept as a tiny
 		*  element (no icon dependency) so the client bundle stays dependency-free
 		*  apart from React. */
@@ -3721,68 +4044,19 @@ window.__ModuleLoader__.load({
 			textarea.remove();
 			if (!copied) throw new Error(t("clipboard.rejected"));
 		}
-		/** Visual state of the embedded Funnel: a colored dot plus its spoken label.
-		*  The label is a function because the surrounding constant lives at module
-		*  scope where the locale-bound t() is not in scope; the page resolves the
-		*  label at render time via t(props.t, ...). */
-		const REMOTE_PHASE_META = {
-			disabled: {
-				dot: "",
-				labelKey: "phase.disabled"
-			},
-			starting: {
-				dot: " pbb-dotWarn",
-				labelKey: "phase.starting"
-			},
-			login_required: {
-				dot: " pbb-dotWarn",
-				labelKey: "phase.login_required"
-			},
-			online: {
-				dot: " pbb-dotOk",
-				labelKey: "phase.online"
-			},
-			error: {
-				dot: " pbb-dotBad",
-				labelKey: "phase.error"
-			},
-			unavailable: {
-				dot: " pbb-dotBad",
-				labelKey: "phase.unavailable"
-			},
-			stopped: {
-				dot: "",
-				labelKey: "phase.stopped"
-			}
-		};
-		const LOCAL_PHASE_META = {
-			disabled: {
-				dot: "",
-				labelKey: "local.phaseDisabled"
-			},
-			starting: {
-				dot: " pbb-dotWarn",
-				labelKey: "local.phaseStarting"
-			},
-			online: {
-				dot: " pbb-dotOk",
-				labelKey: "local.phaseOnline"
-			},
-			error: {
-				dot: " pbb-dotBad",
-				labelKey: "local.phaseError"
-			},
-			stopped: {
-				dot: "",
-				labelKey: "local.phaseStopped"
-			}
-		};
-		/** Slot component: hooks come from the slot renderer, named use<Key>. */
-		function DeepPilotSettingsPage(props) {
-			const [remoteLimitDraft, setRemoteLimitDraft] = (0, react.useState)(String(8));
-			const [remoteLimitMessage, setRemoteLimitMessage] = (0, react.useState)("");
-			const [localPortDraft, setLocalPortDraft] = (0, react.useState)(String(DEFAULT_LOCAL_PORT));
-			const [localPortMessage, setLocalPortMessage] = (0, react.useState)("");
+		/**
+		* Slot component: hooks come from the slot renderer, named use<Key>.
+		*
+		* 组件的接口是 `SettingsPageProps`（见 settings-props.ts）：宿主注入面与页面
+		* 共享同一份类型。这里只做一次归一化，之后全程消费类型化对象——页面里不再
+		* 出现任何 typeof 守卫，也不再自己拼诊断行。
+		*/
+		function DeepPilotSettingsPage(rawProps) {
+			const surface = normalizeSettingsPageProps(rawProps);
+			const props = surface.props;
+			const can = (capability) => surface.can.has(capability);
+			const [remoteLimitDraft, dispatchRemoteLimitDraft] = (0, react.useReducer)((state, action) => numericDraftReduce(state, action, REMOTE_LIMIT_RANGE), initialNumericDraft(REMOTE_LIMIT_RANGE));
+			const [localPortDraft, dispatchLocalPortDraft] = (0, react.useReducer)((state, action) => numericDraftReduce(state, action, LOCAL_PORT_RANGE), initialNumericDraft(LOCAL_PORT_RANGE));
 			const [selectedPairingHost, setSelectedPairingHost] = (0, react.useState)(null);
 			const [pairingPanel, dispatchPairingPanel] = (0, react.useReducer)(pairingPanelReduce, initialPairingPanelState);
 			const qrRequestId = (0, react.useRef)(0);
@@ -3799,14 +4073,15 @@ window.__ModuleLoader__.load({
 			const [editingDeviceId, setEditingDeviceId] = (0, react.useState)(null);
 			const [deviceNameDraft, setDeviceNameDraft] = (0, react.useState)("");
 			(0, react.useEffect)(() => {
-				if (typeof props.refresh !== "function") return;
-				props.refresh();
-				const timer = globalThis.setInterval(() => props.refresh(), 3e3);
+				if (!can("refresh")) return;
+				const refresh = props.refresh;
+				refresh();
+				const timer = globalThis.setInterval(() => refresh(), 3e3);
 				return () => globalThis.clearInterval(timer);
 			}, [props.refresh]);
 			const sendPushTest = () => {
 				if (pushTestBusy) return;
-				if (typeof props.testPush !== "function") {
+				if (!can("testPush")) {
 					setPushTestError(translateWith(props.t, "push.staleHost"));
 					return;
 				}
@@ -3823,7 +4098,7 @@ window.__ModuleLoader__.load({
 			};
 			const runRelayTest = () => {
 				if (relayTestBusy) return;
-				if (typeof props.testRelay !== "function") {
+				if (!can("testRelay")) {
 					setRelayTestError(translateWith(props.t, "push.staleHostRelay"));
 					return;
 				}
@@ -3839,15 +4114,15 @@ window.__ModuleLoader__.load({
 				});
 			};
 			(0, react.useEffect)(() => {
-				if (!remoteLimitMessage) return;
-				const timer = globalThis.setTimeout(() => setRemoteLimitMessage(""), 4e3);
+				if (remoteLimitDraft.message === "") return;
+				const timer = globalThis.setTimeout(() => dispatchRemoteLimitDraft({ type: "applied" }), 4e3);
 				return () => globalThis.clearTimeout(timer);
-			}, [remoteLimitMessage]);
+			}, [remoteLimitDraft.message]);
 			(0, react.useEffect)(() => {
-				if (!localPortMessage) return;
-				const timer = globalThis.setTimeout(() => setLocalPortMessage(""), 4e3);
+				if (localPortDraft.message === "") return;
+				const timer = globalThis.setTimeout(() => dispatchLocalPortDraft({ type: "applied" }), 4e3);
 				return () => globalThis.clearTimeout(timer);
-			}, [localPortMessage]);
+			}, [localPortDraft.message]);
 			(0, react.useEffect)(() => {
 				if (pairingPanel.grant === null) return;
 				const remaining = Math.max(0, pairingPanel.grant.expiresAt - Date.now());
@@ -3864,112 +4139,123 @@ window.__ModuleLoader__.load({
 				const timer = globalThis.setTimeout(() => dispatchPairingPanel({ type: "dismissNotice" }), 2500);
 				return () => globalThis.clearTimeout(timer);
 			}, [pairingPanel.notice]);
-			const diag = [];
-			let report = null;
-			let enabled = true;
-			let switchReady = false;
-			let localEnabled = true;
-			let localSwitchReady = false;
-			let localPort = DEFAULT_LOCAL_PORT;
-			let localPortReady = false;
-			let remoteEnabled = false;
-			let remoteSwitchReady = false;
-			let remoteConnectionLimit = 8;
-			let remoteConnectionLimitReady = false;
-			let debugEnabled = false;
-			let debugSwitchReady = false;
-			let failed = false;
-			try {
-				if (typeof props.useDeepPilotReport !== "function") {
-					diag.push(translateWith(props.t, "diag.missingReportHook"));
+			const diag = surface.diagnostics;
+			let failed = surface.reportHookMissing;
+			const readHooks = () => {
+				const reportState = props.useDeepPilotReport((s) => s);
+				hooks.report = reportState.report;
+				if (reportState.status === "error" && reportState.message) {
+					diag.push(reportState.message);
 					failed = true;
-				} else {
-					const state = props.useDeepPilotReport((s) => s);
-					report = state.report;
-					if (state.status === "error" && state.message) {
-						diag.push(state.message);
-						failed = true;
-					}
 				}
-				if (typeof props.useDeepPilotEnabled === "function") {
-					const state = props.useDeepPilotEnabled((s) => s);
-					enabled = state.enabled;
-					switchReady = state.status === "ready";
-					if (state.status === "unavailable") diag.push(translateWith(props.t, "diag.settingsUnavailable"));
-				} else diag.push(translateWith(props.t, "diag.missingEnabledHook"));
-				if (typeof props.refresh !== "function") diag.push(translateWith(props.t, "diag.missingRefresh"));
-				if (typeof props.beginPairing !== "function") diag.push(translateWith(props.t, "diag.missingReveal"));
-				if (typeof props.revokeDevice !== "function") diag.push(translateWith(props.t, "diag.missingRotate"));
-				if (typeof props.setDeviceName !== "function") diag.push(translateWith(props.t, "diag.missingRename"));
-				if (typeof props.testRelay !== "function") diag.push(translateWith(props.t, "diag.missingTestRelay"));
-				if (typeof props.testPush !== "function") diag.push(translateWith(props.t, "diag.missingTestPush"));
-				if (typeof props.setDeepPilotEnabled !== "function") diag.push(translateWith(props.t, "diag.missingSetEnabled"));
-				if (typeof props.useDeepPilotLocalEnabled === "function") {
-					const state = props.useDeepPilotLocalEnabled((s) => s);
-					localEnabled = state.enabled;
-					localSwitchReady = state.status === "ready";
-				} else diag.push(translateWith(props.t, "diag.missingLocalEnabledHook"));
-				if (typeof props.useDeepPilotLocalPort === "function") {
-					const state = props.useDeepPilotLocalPort((s) => s);
-					localPort = state.value;
-					localPortReady = state.status === "ready";
-				} else diag.push(translateWith(props.t, "diag.missingLocalPortHook"));
-				if (typeof props.setDeepPilotLocalEnabled !== "function") diag.push(translateWith(props.t, "diag.missingSetLocal"));
-				if (typeof props.setDeepPilotLocalPort !== "function") diag.push(translateWith(props.t, "diag.missingSetLocalPort"));
-				if (typeof props.useDeepPilotRemoteEnabled === "function") {
-					const state = props.useDeepPilotRemoteEnabled((s) => s);
-					remoteEnabled = state.enabled;
-					remoteSwitchReady = state.status === "ready";
-				} else diag.push(translateWith(props.t, "diag.missingRemoteEnabledHook"));
-				if (typeof props.setDeepPilotRemoteEnabled !== "function") diag.push(translateWith(props.t, "diag.missingSetRemote"));
-				if (typeof props.useDeepPilotRemoteConnectionLimit === "function") {
-					const state = props.useDeepPilotRemoteConnectionLimit((s) => s);
-					remoteConnectionLimit = state.value;
-					remoteConnectionLimitReady = state.status === "ready";
-				} else diag.push(translateWith(props.t, "diag.missingRemoteLimitHook"));
-				if (typeof props.setDeepPilotRemoteConnectionLimit !== "function") diag.push(translateWith(props.t, "diag.missingSetRemoteLimit"));
-				if (typeof props.useDeepPilotDebug === "function") {
-					const state = props.useDeepPilotDebug((s) => s);
-					debugEnabled = state.enabled;
-					debugSwitchReady = state.status === "ready";
-				} else diag.push(translateWith(props.t, "diag.missingDebugHook"));
-				if (typeof props.setDeepPilotDebug !== "function") diag.push(translateWith(props.t, "diag.missingSetDebug"));
+				const enabledState = props.useDeepPilotEnabled((s) => s);
+				hooks.enabled = enabledState.enabled;
+				hooks.switchReady = enabledState.status === "ready";
+				if (enabledState.status === "unavailable") diag.push(translateWith(props.t, "diag.settingsUnavailable"));
+				const localEnabledState = props.useDeepPilotLocalEnabled((s) => s);
+				hooks.localEnabled = localEnabledState.enabled;
+				hooks.localSwitchReady = localEnabledState.status === "ready";
+				const localPortState = props.useDeepPilotLocalPort((s) => s);
+				hooks.localPort = localPortState.value;
+				hooks.localPortReady = localPortState.status === "ready";
+				const remoteEnabledState = props.useDeepPilotRemoteEnabled((s) => s);
+				hooks.remoteEnabled = remoteEnabledState.enabled;
+				hooks.remoteSwitchReady = remoteEnabledState.status === "ready";
+				const remoteLimitState = props.useDeepPilotRemoteConnectionLimit((s) => s);
+				hooks.remoteConnectionLimit = remoteLimitState.value;
+				hooks.remoteConnectionLimitReady = remoteLimitState.status === "ready";
+				const debugState = props.useDeepPilotDebug((s) => s);
+				hooks.debugEnabled = debugState.enabled;
+				hooks.debugSwitchReady = debugState.status === "ready";
+			};
+			const hooks = {
+				report: null,
+				enabled: true,
+				switchReady: false,
+				localEnabled: true,
+				localSwitchReady: false,
+				localPort: DEFAULT_LOCAL_PORT,
+				localPortReady: false,
+				remoteEnabled: false,
+				remoteSwitchReady: false,
+				remoteConnectionLimit: 8,
+				remoteConnectionLimitReady: false,
+				debugEnabled: false,
+				debugSwitchReady: false
+			};
+			try {
+				readHooks();
 			} catch (error) {
 				diag.push(translateWith(props.t, "diag.renderError") + (error instanceof Error ? error.message : String(error)));
 				failed = true;
 			}
+			const report = hooks.report;
+			const enabled = hooks.enabled;
+			const switchReady = hooks.switchReady;
+			const localEnabled = hooks.localEnabled;
+			const localSwitchReady = hooks.localSwitchReady;
+			const localPort = hooks.localPort;
+			const localPortReady = hooks.localPortReady;
+			const remoteEnabled = hooks.remoteEnabled;
+			const remoteSwitchReady = hooks.remoteSwitchReady;
+			const remoteConnectionLimit = hooks.remoteConnectionLimit;
+			const remoteConnectionLimitReady = hooks.remoteConnectionLimitReady;
+			const debugEnabled = hooks.debugEnabled;
+			const debugSwitchReady = hooks.debugSwitchReady;
 			(0, react.useEffect)(() => {
-				setRemoteLimitDraft(String(remoteConnectionLimit));
+				dispatchRemoteLimitDraft({
+					type: "sync",
+					value: remoteConnectionLimit
+				});
 			}, [remoteConnectionLimit]);
 			(0, react.useEffect)(() => {
-				setLocalPortDraft(String(localPort));
+				dispatchLocalPortDraft({
+					type: "sync",
+					value: localPort
+				});
 			}, [localPort]);
-			const parsedLocalPort = Number(localPortDraft);
-			const localPortValid = Number.isInteger(parsedLocalPort) && parsedLocalPort >= 1024 && parsedLocalPort <= 65535;
+			const localPortView = numericDraftView(localPortDraft, localPort, LOCAL_PORT_RANGE);
+			const remoteLimitView = numericDraftView(remoteLimitDraft, remoteConnectionLimit, REMOTE_LIMIT_RANGE);
 			const applyLocalPort = () => {
-				if (!localPortValid || typeof props.setDeepPilotLocalPort !== "function") {
-					setLocalPortMessage(translateWith(props.t, "local.portInvalid"));
+				if (!localPortView.valid || !can("setLocalPort")) {
+					dispatchLocalPortDraft({
+						type: "failed",
+						message: translateWith(props.t, "local.portInvalid")
+					});
 					return;
 				}
-				setLocalPortMessage("");
-				props.setDeepPilotLocalPort(parsedLocalPort).then(() => {
-					setLocalPortMessage(translateWith(props.t, "local.portApplied"));
+				dispatchLocalPortDraft({ type: "applied" });
+				Promise.resolve(props.setDeepPilotLocalPort(localPortView.value)).then(() => {
+					dispatchLocalPortDraft({
+						type: "succeeded",
+						message: translateWith(props.t, "local.portApplied")
+					});
 				}, (error) => {
-					setLocalPortMessage(translateWith(props.t, "local.portFailed") + (error instanceof Error ? error.message : String(error)));
+					dispatchLocalPortDraft({
+						type: "failed",
+						message: translateWith(props.t, "local.portFailed") + (error instanceof Error ? error.message : String(error))
+					});
 				});
 			};
-			const parsedRemoteLimit = Number(remoteLimitDraft);
-			const remoteLimitValid = Number.isInteger(parsedRemoteLimit) && parsedRemoteLimit >= 1 && parsedRemoteLimit <= 16;
 			const applyRemoteLimit = () => {
-				if (!remoteLimitValid || typeof props.setDeepPilotRemoteConnectionLimit !== "function") {
-					setRemoteLimitMessage(translateWith(props.t, "remote.limitInvalid"));
+				if (!remoteLimitView.valid || !can("setRemoteLimit")) {
+					dispatchRemoteLimitDraft({
+						type: "failed",
+						message: translateWith(props.t, "remote.limitInvalid")
+					});
 					return;
 				}
-				setRemoteLimitMessage("");
-				props.setDeepPilotRemoteConnectionLimit(parsedRemoteLimit).then(() => {
-					setRemoteLimitMessage(translateWith(props.t, "remote.limitApplied"));
+				dispatchRemoteLimitDraft({ type: "applied" });
+				Promise.resolve(props.setDeepPilotRemoteConnectionLimit(remoteLimitView.value)).then(() => {
+					dispatchRemoteLimitDraft({
+						type: "succeeded",
+						message: translateWith(props.t, "remote.limitApplied")
+					});
 				}, (error) => {
-					setRemoteLimitMessage(translateWith(props.t, "remote.limitFailed") + (error instanceof Error ? error.message : String(error)));
+					dispatchRemoteLimitDraft({
+						type: "failed",
+						message: translateWith(props.t, "remote.limitFailed") + (error instanceof Error ? error.message : String(error))
+					});
 				});
 			};
 			const pairingTargets = report === null ? [] : selectPairingTargets(report.local, report.remote);
@@ -3984,7 +4270,7 @@ window.__ModuleLoader__.load({
 			* switching between LAN and public always mints a fresh one.
 			*/
 			const showPairingQR = (target) => {
-				if (typeof props.beginPairing !== "function") return;
+				if (!can("beginPairing")) return;
 				const requestId = qrRequestId.current + 1;
 				qrRequestId.current = requestId;
 				dispatchPairingPanel({
@@ -4074,7 +4360,7 @@ window.__ModuleLoader__.load({
 				}, (0, react.createElement)("div", { className: "pbb-row" }, (0, react.createElement)("span", { className: "pbb-label" }, translateWith(props.t, "advanced.bufferMax")), (0, react.createElement)("span", { className: "pbb-value" }, String(report.historyBufferMax) + translateWith(props.t, "advanced.frames")))));
 			}
 			const revokeDevice = (deviceId, name) => {
-				if (typeof props.revokeDevice !== "function") return;
+				if (!can("revokeDevice")) return;
 				if (typeof window !== "undefined" && !window.confirm(translateWith(props.t, "devices.revokeConfirm", { name }))) return;
 				setDeviceBusy(deviceId);
 				setDeviceBusyAction("revoke");
@@ -4088,7 +4374,7 @@ window.__ModuleLoader__.load({
 					setDeviceBusyAction(null);
 				});
 			};
-			const deviceLabel = (device) => (device.customName ?? device.deviceName).trim() || translateWith(props.t, "devices.unnamed");
+			const deviceLabel$1 = (device) => deviceLabel(device) || translateWith(props.t, "devices.unnamed");
 			const beginDeviceRename = (device) => {
 				setEditingDeviceId(device.deviceId);
 				setDeviceNameDraft(device.customName ?? device.deviceName);
@@ -4100,7 +4386,7 @@ window.__ModuleLoader__.load({
 				setDeviceMessage("");
 			};
 			const saveDeviceName = (deviceId) => {
-				if (typeof props.setDeviceName !== "function") return;
+				if (!can("setDeviceName")) return;
 				const normalized = deviceNameDraft.trim();
 				if (normalized.length > 64) {
 					setDeviceMessage(translateWith(props.t, "devices.nameInvalid"));
@@ -4120,11 +4406,11 @@ window.__ModuleLoader__.load({
 					setDeviceBusyAction(null);
 				});
 			};
-			const visibleDevices = report?.devices.filter((device) => device.revokedAt === void 0) ?? [];
-			const deviceTable = visibleDevices.length > 0 ? (0, react.createElement)("div", { className: "pbb-tableWrap" }, (0, react.createElement)("table", { className: "pbb-table" }, (0, react.createElement)("thead", null, (0, react.createElement)("tr", null, (0, react.createElement)("th", null, translateWith(props.t, "devices.col.name")), (0, react.createElement)("th", null, translateWith(props.t, "devices.col.lastSeen")), (0, react.createElement)("th", { className: "pbb-tableActionHead" }, translateWith(props.t, "devices.col.actions")))), (0, react.createElement)("tbody", null, visibleDevices.map((d) => {
+			const visibleDevices$1 = visibleDevices(report);
+			const deviceTable = visibleDevices$1.length > 0 ? (0, react.createElement)("div", { className: "pbb-tableWrap" }, (0, react.createElement)("table", { className: "pbb-table" }, (0, react.createElement)("thead", null, (0, react.createElement)("tr", null, (0, react.createElement)("th", null, translateWith(props.t, "devices.col.name")), (0, react.createElement)("th", null, translateWith(props.t, "devices.col.lastSeen")), (0, react.createElement)("th", { className: "pbb-tableActionHead" }, translateWith(props.t, "devices.col.actions")))), (0, react.createElement)("tbody", null, visibleDevices$1.map((d) => {
 				const editing = editingDeviceId === d.deviceId;
 				const busy = deviceBusy === d.deviceId;
-				const label = deviceLabel(d);
+				const label = deviceLabel$1(d);
 				return (0, react.createElement)("tr", {
 					key: d.deviceId,
 					"aria-busy": busy
@@ -4169,10 +4455,10 @@ window.__ModuleLoader__.load({
 					title: translateWith(props.t, "devices.nameCancel"),
 					"aria-label": translateWith(props.t, "devices.nameCancel"),
 					onClick: cancelDeviceRename
-				}, CloseIcon()))), deviceNameDraft.length > 64 ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, translateWith(props.t, "devices.nameInvalid")) : null) : (0, react.createElement)("div", null, (0, react.createElement)("div", { className: "pbb-deviceNameRow" }, (0, react.createElement)("span", { className: "pbb-deviceName" }, label), d.customName ? (0, react.createElement)("span", { className: "pbb-badge" }, translateWith(props.t, "devices.customBadge")) : null), (0, react.createElement)("span", { className: "pbb-deviceMeta" }, d.appVersion, " · ", (0, react.createElement)("code", null, d.fingerprint.slice(0, 12))))), (0, react.createElement)("td", { className: "pbb-lastSeen" }, new Date(d.lastSeenTs).toLocaleString()), (0, react.createElement)("td", { className: "pbb-tableActionCell" }, !editing ? (0, react.createElement)("button", {
+				}, CloseIcon()))), deviceNameDraft.length > 64 ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, translateWith(props.t, "devices.nameInvalid")) : null) : (0, react.createElement)("div", null, (0, react.createElement)("div", { className: "pbb-deviceNameRow" }, (0, react.createElement)("span", { className: "pbb-deviceName" }, label), d.customName ? (0, react.createElement)("span", { className: "pbb-badge" }, translateWith(props.t, "devices.customBadge")) : null), (0, react.createElement)("span", { className: "pbb-deviceMeta" }, d.appVersion, " · ", (0, react.createElement)("code", null, (d.fingerprint ?? "").slice(0, 12))))), (0, react.createElement)("td", { className: "pbb-lastSeen" }, new Date(d.lastSeenTs ?? 0).toLocaleString()), (0, react.createElement)("td", { className: "pbb-tableActionCell" }, !editing ? (0, react.createElement)("button", {
 					type: "button",
 					className: "pbb-action",
-					disabled: busy || editingDeviceId !== null || typeof props.setDeviceName !== "function",
+					disabled: busy || editingDeviceId !== null || !can("setDeviceName"),
 					"aria-label": translateWith(props.t, "devices.renameAria", { name: label }),
 					onClick: () => beginDeviceRename(d)
 				}, translateWith(props.t, "devices.rename")) : null, (0, react.createElement)("button", {
@@ -4187,34 +4473,21 @@ window.__ModuleLoader__.load({
 			const switchDesc = switchReady ? enabled ? translateWith(props.t, "master.on") : translateWith(props.t, "master.off") : translateWith(props.t, "master.loading");
 			const localMeta = report === null ? null : LOCAL_PHASE_META[report.local.phase];
 			const remoteMeta = report === null ? null : REMOTE_PHASE_META[report.remote.phase];
-			const connectionNeedsAttention = localMeta?.dot.includes("pbb-dotBad") === true || remoteMeta?.dot.includes("pbb-dotBad") === true;
-			const connectionOnline = localMeta?.dot.includes("pbb-dotOk") === true || remoteMeta?.dot.includes("pbb-dotOk") === true;
-			const serviceStatus = !switchReady ? translateWith(props.t, "status.loading") : !enabled ? translateWith(props.t, "status.off") : connectionNeedsAttention ? translateWith(props.t, "status.attention") : connectionOnline ? translateWith(props.t, "status.ready") : translateWith(props.t, "status.loading");
-			const serviceDot = !enabled ? "" : connectionNeedsAttention ? " pbb-dotBad" : connectionOnline ? " pbb-dotOk" : " pbb-dotWarn";
-			const renderConnectionTile = (key, title, description, checked, ready, dot, statusLabel, onToggle, extra = null) => (0, react.createElement)("div", {
-				className: "pbb-connectionTile",
-				key
-			}, (0, react.createElement)("div", { className: "pbb-connectionTileHeader" }, (0, react.createElement)("span", { className: "pbb-switchTitle pbb-dotRow" }, (0, react.createElement)("span", {
-				className: "pbb-dot" + dot,
-				role: "img",
-				"aria-label": statusLabel,
-				title: statusLabel
-			}), title), (0, react.createElement)("button", {
-				type: "button",
-				role: "switch",
-				"aria-checked": checked,
-				"aria-label": title,
-				disabled: !ready,
-				className: "pbb-switch" + (checked ? " pbb-switchOn" : ""),
-				onClick: onToggle
-			})), (0, react.createElement)("span", { className: "pbb-connectionState" }, statusLabel), (0, react.createElement)("p", { className: "pbb-connectionDescription" }, description), extra);
+			const service = serviceStatus({
+				enabled,
+				switchReady,
+				localDot: localMeta?.dot,
+				remoteDot: remoteMeta?.dot
+			});
+			const serviceStatusText = translateWith(props.t, SERVICE_STATUS_KEY[service.kind]);
+			const serviceDot = service.dot;
 			return (0, react.createElement)("div", { className: "pbb-section" }, (0, react.createElement)("header", { className: "pbb-pageHeader" }, (0, react.createElement)("div", null, (0, react.createElement)("h2", { className: "pbb-title" }, "DeepPilot"), (0, react.createElement)("p", { className: "pbb-intro" }, translateWith(props.t, "meta.intro"))), (0, react.createElement)("button", {
 				type: "button",
 				className: "pbb-refresh",
 				onClick: () => {
-					if (typeof props.refresh === "function") props.refresh();
+					if (can("refresh")) props.refresh();
 				}
-			}, translateWith(props.t, "meta.refresh"))), (0, react.createElement)("div", { className: "pbb-card pbb-primaryCard" }, (0, react.createElement)("div", { className: "pbb-cardHeader" }, (0, react.createElement)("div", null, (0, react.createElement)("h3", { className: "pbb-cardTitle" }, translateWith(props.t, "connection.title")), (0, react.createElement)("p", { className: "pbb-cardDescription" }, translateWith(props.t, "connection.description"))), (0, react.createElement)("span", { className: "pbb-statusBadge" }, (0, react.createElement)("span", { className: "pbb-dot" + serviceDot }), serviceStatus)), (0, react.createElement)("div", { className: "pbb-masterRow" }, (0, react.createElement)("div", { className: "pbb-switchText" }, (0, react.createElement)("span", { className: "pbb-switchTitle" }, switchTitle), (0, react.createElement)("span", { className: "pbb-switchDesc" }, switchDesc)), (0, react.createElement)("button", {
+			}, translateWith(props.t, "meta.refresh"))), (0, react.createElement)("div", { className: "pbb-card pbb-primaryCard" }, (0, react.createElement)("div", { className: "pbb-cardHeader" }, (0, react.createElement)("div", null, (0, react.createElement)("h3", { className: "pbb-cardTitle" }, translateWith(props.t, "connection.title")), (0, react.createElement)("p", { className: "pbb-cardDescription" }, translateWith(props.t, "connection.description"))), (0, react.createElement)("span", { className: "pbb-statusBadge" }, (0, react.createElement)("span", { className: "pbb-dot" + serviceDot }), serviceStatusText)), (0, react.createElement)("div", { className: "pbb-masterRow" }, (0, react.createElement)("div", { className: "pbb-switchText" }, (0, react.createElement)("span", { className: "pbb-switchTitle" }, switchTitle), (0, react.createElement)("span", { className: "pbb-switchDesc" }, switchDesc)), (0, react.createElement)("button", {
 				type: "button",
 				role: "switch",
 				"aria-checked": enabled,
@@ -4222,12 +4495,12 @@ window.__ModuleLoader__.load({
 				disabled: !switchReady,
 				className: "pbb-switch" + (enabled ? " pbb-switchOn" : ""),
 				onClick: () => {
-					if (typeof props.setDeepPilotEnabled === "function") props.setDeepPilotEnabled(!enabled);
+					if (can("setEnabled")) props.setDeepPilotEnabled(!enabled);
 				}
-			})), (0, react.createElement)("div", { className: "pbb-connectionGrid" }, renderConnectionTile("local", translateWith(props.t, "local.title"), localSwitchReady ? localEnabled ? translateWith(props.t, "local.on", { port: localPort }) : translateWith(props.t, "local.off") : translateWith(props.t, "master.loading"), localEnabled, localSwitchReady, localMeta?.dot ?? "", localMeta === null ? translateWith(props.t, "phase.unknown") : translateWith(props.t, localMeta.labelKey), () => {
-				if (typeof props.setDeepPilotLocalEnabled === "function") props.setDeepPilotLocalEnabled(!localEnabled);
-			}, (0, react.createElement)(react.Fragment, null, report !== null && report.local.message && report.local.phase === "error" ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, report.local.message) : null, report !== null && report.local.tlsIdentityRegenerated === true ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, translateWith(props.t, "local.tlsRegenerated")) : null)), renderConnectionTile("remote", translateWith(props.t, "remote.title"), remoteSwitchReady ? remoteEnabled ? translateWith(props.t, "remote.on") : translateWith(props.t, "remote.off") : translateWith(props.t, "master.loading"), remoteEnabled, remoteSwitchReady, remoteMeta?.dot ?? "", remoteMeta === null ? translateWith(props.t, "phase.unknown") : translateWith(props.t, remoteMeta.labelKey), () => {
-				if (typeof props.setDeepPilotRemoteEnabled === "function") props.setDeepPilotRemoteEnabled(!remoteEnabled);
+			})), (0, react.createElement)("div", { className: "pbb-connectionGrid" }, renderConnectionTile("local", translateWith(props.t, "local.title"), localSwitchReady ? localEnabled ? translateWith(props.t, "local.on", { port: localPort }) : translateWith(props.t, "local.off") : translateWith(props.t, "master.loading"), localEnabled, localSwitchReady, localMeta?.dot ?? "", localMeta === null ? translateWith(props.t, "phase.unknown") : translateWith(props.t, LOCAL_LABEL_KEY[localMeta.label]), () => {
+				if (can("setLocalEnabled")) props.setDeepPilotLocalEnabled(!localEnabled);
+			}, (0, react.createElement)(react.Fragment, null, report !== null && report.local.message && report.local.phase === "error" ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, report.local.message) : null, report !== null && report.local.tlsIdentityRegenerated === true ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, translateWith(props.t, "local.tlsRegenerated")) : null)), renderConnectionTile("remote", translateWith(props.t, "remote.title"), remoteSwitchReady ? remoteEnabled ? translateWith(props.t, "remote.on") : translateWith(props.t, "remote.off") : translateWith(props.t, "master.loading"), remoteEnabled, remoteSwitchReady, remoteMeta?.dot ?? "", remoteMeta === null ? translateWith(props.t, "phase.unknown") : translateWith(props.t, REMOTE_LABEL_KEY[remoteMeta.label]), () => {
+				if (can("setRemoteEnabled")) props.setDeepPilotRemoteEnabled(!remoteEnabled);
 			}, (0, react.createElement)(react.Fragment, null, report !== null && report.remote.phase === "login_required" && typeof report.remote.authURL === "string" && report.remote.authURL.startsWith("https://") ? (0, react.createElement)("div", { className: "pbb-rowAction" }, (0, react.createElement)("a", {
 				className: "pbb-action pbb-buttonPrimary",
 				href: report.remote.authURL,
@@ -4236,18 +4509,21 @@ window.__ModuleLoader__.load({
 			}, translateWith(props.t, "remote.openAuth"))) : null, report !== null && report.remote.message && (report.remote.phase === "error" || report.remote.phase === "unavailable") ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, report.remote.message) : null))), report === null ? null : (0, react.createElement)("div", { className: "pbb-statGrid" }, primaryRows), (0, react.createElement)("details", { className: "pbb-inlineDetails" }, (0, react.createElement)("summary", null, translateWith(props.t, "connection.optionsSummary")), (0, react.createElement)("div", { className: "pbb-helpBody" }, (0, react.createElement)("div", { className: "pbb-limitRow pbb-limitNested" }, (0, react.createElement)("div", { className: "pbb-switchText" }, (0, react.createElement)("label", {
 				className: "pbb-switchTitle",
 				htmlFor: "deeppilot-local-port"
-			}, translateWith(props.t, "local.portTitle")), (0, react.createElement)("span", { className: "pbb-switchDesc" }, translateWith(props.t, "local.portDescription")), !localPortValid ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, translateWith(props.t, "local.portInvalid")) : localPortMessage ? (0, react.createElement)("p", { className: "pbb-diag" + (localPortMessage.startsWith(translateWith(props.t, "local.portFailed")) ? " pbb-diagBad" : "") }, localPortMessage) : null), (0, react.createElement)("div", { className: "pbb-limitControl" }, (0, react.createElement)("input", {
+			}, translateWith(props.t, "local.portTitle")), (0, react.createElement)("span", { className: "pbb-switchDesc" }, translateWith(props.t, "local.portDescription")), !localPortView.valid ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, translateWith(props.t, "local.portInvalid")) : localPortDraft.message ? (0, react.createElement)("p", { className: "pbb-diag" + (localPortDraft.failed ? " pbb-diagBad" : "") }, localPortDraft.message) : null), (0, react.createElement)("div", { className: "pbb-limitControl" }, (0, react.createElement)("input", {
 				id: "deeppilot-local-port",
 				className: "pbb-numberInput",
 				type: "number",
-				min: MIN_LOCAL_PORT,
-				max: MAX_LOCAL_PORT,
+				min: LOCAL_PORT_RANGE.min,
+				max: LOCAL_PORT_RANGE.max,
 				step: 1,
 				inputMode: "numeric",
-				value: localPortDraft,
+				value: localPortDraft.draft,
 				disabled: !localPortReady,
 				"aria-label": translateWith(props.t, "local.portTitle"),
-				onChange: (event) => setLocalPortDraft(event.currentTarget.value),
+				onChange: (event) => dispatchLocalPortDraft({
+					type: "edit",
+					draft: event.currentTarget.value
+				}),
 				onKeyDown: (event) => {
 					if (event.key === "Enter") {
 						event.preventDefault();
@@ -4257,23 +4533,26 @@ window.__ModuleLoader__.load({
 			}), (0, react.createElement)("button", {
 				type: "button",
 				className: "pbb-action",
-				disabled: !localPortReady || !localPortValid || parsedLocalPort === localPort,
+				disabled: !localPortReady || !localPortView.valid || localPortView.unchanged,
 				onClick: applyLocalPort
 			}, translateWith(props.t, "remote.limitApply")))), (0, react.createElement)("div", { className: "pbb-limitRow pbb-limitNested" }, (0, react.createElement)("div", { className: "pbb-switchText" }, (0, react.createElement)("label", {
 				className: "pbb-switchTitle",
 				htmlFor: "deeppilot-funnel-source-limit"
-			}, translateWith(props.t, "remote.limitTitle")), (0, react.createElement)("span", { className: "pbb-switchDesc" }, translateWith(props.t, "remote.limitDescription")), !remoteLimitValid ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, translateWith(props.t, "remote.limitInvalid")) : remoteLimitMessage ? (0, react.createElement)("p", { className: "pbb-diag" + (remoteLimitMessage.startsWith(translateWith(props.t, "remote.limitFailed")) ? " pbb-diagBad" : "") }, remoteLimitMessage) : null), (0, react.createElement)("div", { className: "pbb-limitControl" }, (0, react.createElement)("input", {
+			}, translateWith(props.t, "remote.limitTitle")), (0, react.createElement)("span", { className: "pbb-switchDesc" }, translateWith(props.t, "remote.limitDescription")), !remoteLimitView.valid ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, translateWith(props.t, "remote.limitInvalid")) : remoteLimitDraft.message ? (0, react.createElement)("p", { className: "pbb-diag" + (remoteLimitDraft.failed ? " pbb-diagBad" : "") }, remoteLimitDraft.message) : null), (0, react.createElement)("div", { className: "pbb-limitControl" }, (0, react.createElement)("input", {
 				id: "deeppilot-funnel-source-limit",
 				className: "pbb-numberInput",
 				type: "number",
 				min: 1,
-				max: 16,
+				max: REMOTE_LIMIT_RANGE.max,
 				step: 1,
 				inputMode: "numeric",
-				value: remoteLimitDraft,
+				value: remoteLimitDraft.draft,
 				disabled: !remoteConnectionLimitReady,
 				"aria-label": translateWith(props.t, "remote.limitTitle"),
-				onChange: (event) => setRemoteLimitDraft(event.currentTarget.value),
+				onChange: (event) => dispatchRemoteLimitDraft({
+					type: "edit",
+					draft: event.currentTarget.value
+				}),
 				onKeyDown: (event) => {
 					if (event.key === "Enter") {
 						event.preventDefault();
@@ -4283,7 +4562,7 @@ window.__ModuleLoader__.load({
 			}), (0, react.createElement)("button", {
 				type: "button",
 				className: "pbb-action",
-				disabled: !remoteConnectionLimitReady || !remoteLimitValid || parsedRemoteLimit === remoteConnectionLimit,
+				disabled: !remoteConnectionLimitReady || !remoteLimitView.valid || remoteLimitView.unchanged,
 				onClick: applyRemoteLimit
 			}, translateWith(props.t, "remote.limitApply")))))), (0, react.createElement)("details", { className: "pbb-help" }, (0, react.createElement)("summary", null, translateWith(props.t, "help.remoteTitle")), (0, react.createElement)("div", { className: "pbb-helpBody" }, (0, react.createElement)("div", { className: "pbb-helpSection" }, (0, react.createElement)("div", { className: "pbb-helpHeading" }, translateWith(props.t, "help.recommended")), (0, react.createElement)("ol", { className: "pbb-helpList" }, (0, react.createElement)("li", null, translateWith(props.t, "help.step1")), (0, react.createElement)("li", null, translateWith(props.t, "help.step2")), (0, react.createElement)("li", null, translateWith(props.t, "help.step3")), (0, react.createElement)("li", null, translateWith(props.t, "help.step4"))), (0, react.createElement)("p", { className: "pbb-helpText" }, translateWith(props.t, "help.funnelHint"))), (0, react.createElement)("div", { className: "pbb-helpSection" }, (0, react.createElement)("div", { className: "pbb-helpHeading" }, translateWith(props.t, "help.httpsTitle")), (0, react.createElement)("ol", { className: "pbb-helpList" }, (0, react.createElement)("li", null, translateWith(props.t, "help.httpsStep1")), (0, react.createElement)("li", null, translateWith(props.t, "help.httpsStep2")), (0, react.createElement)("li", null, translateWith(props.t, "help.httpsStep3"))), (0, react.createElement)("p", { className: "pbb-helpText" }, translateWith(props.t, "help.httpsHint"))), (0, react.createElement)("div", { className: "pbb-helpSection" }, (0, react.createElement)("div", { className: "pbb-helpHeading" }, translateWith(props.t, "help.allowTitle")), (0, react.createElement)("p", { className: "pbb-helpText" }, translateWith(props.t, "help.allowBody")), (0, react.createElement)("code", { className: "pbb-helpCode" }, "\"nodeAttrs\": [\n  {\n    \"target\": [\"autogroup:member\"],\n    \"attr\": [\"funnel\"],\n  },\n],"), (0, react.createElement)("p", { className: "pbb-helpText" }, translateWith(props.t, "help.allowHint"))), (0, react.createElement)("div", { className: "pbb-helpSection" }, (0, react.createElement)("div", { className: "pbb-helpHeading" }, translateWith(props.t, "help.faqTitle")), (0, react.createElement)("ul", { className: "pbb-helpList" }, (0, react.createElement)("li", null, translateWith(props.t, "help.faq1")), (0, react.createElement)("li", null, translateWith(props.t, "help.faq2")), (0, react.createElement)("li", null, translateWith(props.t, "help.faq3")), (0, react.createElement)("li", null, translateWith(props.t, "help.faq4")))), (0, react.createElement)("div", { className: "pbb-helpSection" }, (0, react.createElement)("div", { className: "pbb-helpHeading" }, translateWith(props.t, "help.securityTitle")), (0, react.createElement)("ul", { className: "pbb-helpList" }, (0, react.createElement)("li", null, translateWith(props.t, "help.security1")), (0, react.createElement)("li", null, translateWith(props.t, "help.security2")), (0, react.createElement)("li", null, translateWith(props.t, "help.security3")), (0, react.createElement)("li", null, translateWith(props.t, "help.security4")), (0, react.createElement)("li", null, translateWith(props.t, "help.security5"))), (0, react.createElement)("p", { className: "pbb-helpText" }, translateWith(props.t, "help.docsPrefix"), (0, react.createElement)("a", {
 				className: "pbb-helpLink",
@@ -4322,7 +4601,7 @@ window.__ModuleLoader__.load({
 				className: "pbb-action pbb-buttonPrimary",
 				onClick: copyPairingInfo,
 				"data-testid": "pairingInfoCopy"
-			}, translateWith(props.t, "panel.tokenAction.copy")))), (0, react.createElement)("p", { className: "pbb-qrHint" }, translateWith(props.t, "pair.qrHint", { kind: panel.target?.kind === "public" ? translateWith(props.t, "pair.kind.public") : translateWith(props.t, "pair.kind.lan") }))) : null)), (0, react.createElement)("div", { className: "pbb-card" }, (0, react.createElement)("div", { className: "pbb-cardHeader" }, (0, react.createElement)("div", null, (0, react.createElement)("h3", { className: "pbb-cardTitle" }, translateWith(props.t, "devices.title")), (0, react.createElement)("p", { className: "pbb-cardDescription" }, translateWith(props.t, "devices.description"))), (0, react.createElement)("span", { className: "pbb-countBadge" }, String(visibleDevices.length))), (0, react.createElement)("div", { className: "pbb-cardBody" }, deviceMessage ? (0, react.createElement)("p", { className: "pbb-diag" + (deviceMessage.startsWith(translateWith(props.t, "devices.renameFailed")) || deviceMessage.startsWith(translateWith(props.t, "devices.revokeFailed")) ? " pbb-diagBad" : "") }, deviceMessage) : null, deviceTable)), (0, react.createElement)("details", {
+			}, translateWith(props.t, "panel.tokenAction.copy")))), (0, react.createElement)("p", { className: "pbb-qrHint" }, translateWith(props.t, "pair.qrHint", { kind: panel.target?.kind === "public" ? translateWith(props.t, "pair.kind.public") : translateWith(props.t, "pair.kind.lan") }))) : null)), (0, react.createElement)("div", { className: "pbb-card" }, (0, react.createElement)("div", { className: "pbb-cardHeader" }, (0, react.createElement)("div", null, (0, react.createElement)("h3", { className: "pbb-cardTitle" }, translateWith(props.t, "devices.title")), (0, react.createElement)("p", { className: "pbb-cardDescription" }, translateWith(props.t, "devices.description"))), (0, react.createElement)("span", { className: "pbb-countBadge" }, String(visibleDevices$1.length))), (0, react.createElement)("div", { className: "pbb-cardBody" }, deviceMessage ? (0, react.createElement)("p", { className: "pbb-diag" + (deviceMessage.startsWith(translateWith(props.t, "devices.renameFailed")) || deviceMessage.startsWith(translateWith(props.t, "devices.revokeFailed")) ? " pbb-diagBad" : "") }, deviceMessage) : null, deviceTable)), (0, react.createElement)("details", {
 				className: "pbb-card pbb-disclosure",
 				open: troubleshootingOpen,
 				onToggle: (event) => setTroubleshootingOpen(event.currentTarget.open)
@@ -4344,7 +4623,7 @@ window.__ModuleLoader__.load({
 				disabled: !debugSwitchReady,
 				className: "pbb-switch" + (debugEnabled ? " pbb-switchOn" : ""),
 				onClick: () => {
-					if (typeof props.setDeepPilotDebug === "function") props.setDeepPilotDebug(!debugEnabled);
+					if (can("setDebug")) props.setDeepPilotDebug(!debugEnabled);
 				}
 			}))), relayTestError ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, relayTestError) : null, relayTestResult === null ? (0, react.createElement)("p", { className: "pbb-diag" }, translateWith(props.t, "push.relayDefault")) : (0, react.createElement)("div", { className: "pbb-helpBody" }, (0, react.createElement)("div", { className: "pbb-row" }, (0, react.createElement)("span", { className: "pbb-label" }, relayTestResult.url || translateWith(props.t, "push.relayUrlEmpty")), (0, react.createElement)("code", { className: "pbb-token " + (relayTestResult.overall === "ok" ? "pbb-ok" : "pbb-bad") }, relayTestResult.overall === "ok" ? translateWith(props.t, "push.relayOk") : translateWith(props.t, "push.relayBad"))), relayTestResult.steps.map((step, index) => (0, react.createElement)("p", {
 				className: "pbb-diag",