dsh-deeppilot 0.6.2 → 0.7.1

package/lib/client.js

@@ -165,10 +165,16 @@ window.__ModuleLoader__.load({
 			if (!Array.isArray(endpoints) || endpoints.some((entry) => typeof entry !== "string")) reject("local.endpoints");
 			const message = s.message;
 			if (message !== void 0 && typeof message !== "string") reject("local.message");
+			const tlsFingerprint = s.tlsFingerprint;
+			if (tlsFingerprint !== void 0 && typeof tlsFingerprint !== "string") reject("local.tlsFingerprint");
+			const tlsIdentityRegenerated = s.tlsIdentityRegenerated;
+			if (tlsIdentityRegenerated !== void 0 && typeof tlsIdentityRegenerated !== "boolean") reject("local.tlsIdentityRegenerated");
 			return {
 				phase,
 				port: int(s, "port", "local.port"),
 				endpoints,
+				...typeof tlsFingerprint === "string" ? { tlsFingerprint } : {},
+				...tlsIdentityRegenerated === true ? { tlsIdentityRegenerated: true } : {},
 				...typeof message === "string" ? { message } : {},
 				updatedAt: int(s, "updatedAt", "local.updatedAt")
 			};
@@ -280,6 +286,35 @@ window.__ModuleLoader__.load({
 			if (!Array.isArray(value) || value.some((scope) => typeof scope !== "string" || !DEVICE_SCOPES.includes(scope))) reject("scopes");
 			return normalizeDeviceScopes(value);
 		} };
+		const booleanSchema = { parse(value) {
+			if (typeof value !== "boolean") reject("boolean");
+			return value;
+		} };
+		/**
+		* One strict boundary codec carrying both generation shapes of the supported
+		* `0.1.x` host family.
+		*
+		* Through `0.1.6-alpha.1` a descriptor published the schema value itself and
+		* every consumer parsed through `codec.schema.parse(value)`. `0.1.6-alpha.2`
+		* switched to a lazily materialized process-realm factory: `TypertRegistry`
+		* now rejects a strict codec without `create()`, and the Gateway parses
+		* through `codec.create().parse(value)`.
+		*
+		* Publishing both keys — `create()` returning the same hand-written,
+		* dependency-free codec — keeps one package valid across the entire declared
+		* peer range instead of forking the wire contract per host generation. The
+		* cast is required because each generation's `TypertCodec` declares only its
+		* own key, so a fresh object literal carrying both fails excess-property
+		* checking against either one.
+		*/
+		function strictCodec(typeSymbol, schema) {
+			return {
+				mode: "strict",
+				typeSymbol,
+				schema,
+				create: () => schema
+			};
+		}
 		const REPORT_REMOTE_CONTRIBUTION = {
 			package: REPORT_REMOTE_PACKAGE,
 			descriptors: [
@@ -290,11 +325,7 @@ window.__ModuleLoader__.load({
 					method: "report",
 					invocation: { kind: "direct" },
 					parameters: [],
-					result: {
-						mode: "strict",
-						typeSymbol: `${REPORT_REMOTE_PACKAGE}#DeepPilotReport`,
-						schema: reportSchema
-					}
+					result: strictCodec(`${REPORT_REMOTE_PACKAGE}#DeepPilotReport`, reportSchema)
 				},
 				{
 					id: `${REPORT_REMOTE_PACKAGE}#${BEGIN_PAIRING_ENDPOINT}`,
@@ -303,11 +334,7 @@ window.__ModuleLoader__.load({
 					method: "beginPairing",
 					invocation: { kind: "direct" },
 					parameters: [],
-					result: {
-						mode: "strict",
-						typeSymbol: `${REPORT_REMOTE_PACKAGE}#PairingGrantSnapshot`,
-						schema: pairingGrantSchema
-					}
+					result: strictCodec(`${REPORT_REMOTE_PACKAGE}#PairingGrantSnapshot`, pairingGrantSchema)
 				},
 				{
 					id: `${REPORT_REMOTE_PACKAGE}#${REVOKE_DEVICE_ENDPOINT}`,
@@ -319,20 +346,9 @@ window.__ModuleLoader__.load({
 						name: "deviceId",
 						wire: "deviceId",
 						source: "json",
-						codec: {
-							mode: "strict",
-							typeSymbol: `${REPORT_REMOTE_PACKAGE}#DeviceId`,
-							schema: deviceIdSchema
-						}
+						codec: strictCodec(`${REPORT_REMOTE_PACKAGE}#DeviceId`, deviceIdSchema)
 					}],
-					result: {
-						mode: "strict",
-						typeSymbol: `${REPORT_REMOTE_PACKAGE}#Boolean`,
-						schema: { parse(value) {
-							if (typeof value !== "boolean") reject("boolean");
-							return value;
-						} }
-					}
+					result: strictCodec(`${REPORT_REMOTE_PACKAGE}#Boolean`, booleanSchema)
 				},
 				{
 					id: `${REPORT_REMOTE_PACKAGE}#${SET_DEVICE_SCOPES_ENDPOINT}`,
@@ -344,26 +360,14 @@ window.__ModuleLoader__.load({
 						name: "deviceId",
 						wire: "deviceId",
 						source: "json",
-						codec: {
-							mode: "strict",
-							typeSymbol: `${REPORT_REMOTE_PACKAGE}#DeviceId`,
-							schema: deviceIdSchema
-						}
+						codec: strictCodec(`${REPORT_REMOTE_PACKAGE}#DeviceId`, deviceIdSchema)
 					}, {
 						name: "scopes",
 						wire: "scopes",
 						source: "json",
-						codec: {
-							mode: "strict",
-							typeSymbol: `${REPORT_REMOTE_PACKAGE}#DeviceScopes`,
-							schema: scopesSchema
-						}
+						codec: strictCodec(`${REPORT_REMOTE_PACKAGE}#DeviceScopes`, scopesSchema)
 					}],
-					result: {
-						mode: "strict",
-						typeSymbol: `${REPORT_REMOTE_PACKAGE}#DeviceScopes`,
-						schema: scopesSchema
-					}
+					result: strictCodec(`${REPORT_REMOTE_PACKAGE}#DeviceScopes`, scopesSchema)
 				},
 				{
 					id: `${REPORT_REMOTE_PACKAGE}#deeppilot/testRelay`,
@@ -372,11 +376,7 @@ window.__ModuleLoader__.load({
 					method: "testRelay",
 					invocation: { kind: "direct" },
 					parameters: [],
-					result: {
-						mode: "strict",
-						typeSymbol: `${REPORT_REMOTE_PACKAGE}#RelayTestResult`,
-						schema: relayTestSchema
-					}
+					result: strictCodec(`${REPORT_REMOTE_PACKAGE}#RelayTestResult`, relayTestSchema)
 				},
 				{
 					id: `${REPORT_REMOTE_PACKAGE}#deeppilot/testPush`,
@@ -385,11 +385,7 @@ window.__ModuleLoader__.load({
 					method: "testPush",
 					invocation: { kind: "direct" },
 					parameters: [],
-					result: {
-						mode: "strict",
-						typeSymbol: `${REPORT_REMOTE_PACKAGE}#PushTestResult`,
-						schema: pushTestSchema
-					}
+					result: strictCodec(`${REPORT_REMOTE_PACKAGE}#PushTestResult`, pushTestSchema)
 				}
 			]
 		};
@@ -436,15 +432,17 @@ window.__ModuleLoader__.load({
 				"master.on": "已开启：接受手机连接。",
 				"master.off": "已关闭：不接受手机连接。",
 				"local.title": "局域网连接",
-				"local.on": "已开启：手机可通过独立端口 {port} 连接。",
+				"local.on": "已开启：手机可通过独立端口 {port} 以 TLS 加密连接。",
 				"local.off": "已关闭：不接受局域网连接。",
+				"local.tlsFingerprint": "证书指纹",
+				"local.tlsRegenerated": "局域网 TLS 身份已重新生成：此前通过内网配对的设备需要重新扫码配对。",
 				"local.phaseDisabled": "局域网连接未启用",
 				"local.phaseStarting": "局域网连接正在启动",
 				"local.phaseOnline": "局域网连接已就绪",
 				"local.phaseError": "局域网连接失败",
 				"local.phaseStopped": "局域网连接已停止",
 				"local.portTitle": "局域网端口",
-				"local.portDescription": "默认 3098，范围 1024–65535。该端口只提供 DeepPilot 的三个连接端点，不会开放完整 DSH。",
+				"local.portDescription": "默认 3098，范围 1024–65535。该端口只以 TLS 提供 DeepPilot 的三个连接端点，不会开放完整 DSH。",
 				"local.portApplied": "局域网端口已保存，监听器正在重新加载。",
 				"local.portInvalid": "请输入 1024–65535 之间的整数。",
 				"local.portFailed": "局域网端口保存失败：",
@@ -498,14 +496,13 @@ window.__ModuleLoader__.load({
 				"pair.qrShow": "显示二维码",
 				"pair.qrHide": "隐藏二维码",
 				"pair.qrGenerating": "生成中…",
-				"pair.qrAutoHidden": "配对二维码已自动隐藏",
+				"pair.qrExpired": "配对码已过期，请重新显示二维码",
 				"pair.qrFailed": "二维码生成失败：",
-				"pair.codeLabel": "配对码（模拟器可手动输入）",
-				"pair.codeCopyDone": "配对码已复制",
-				"pair.codeCopyFailed": "配对码复制失败：",
-				"pair.publicCopyDone": "连接地址已复制",
-				"pair.publicCopyFailed": "复制失败：",
-				"pair.qrHint": "二维码包含{kind}地址和一次性配对码；配对码 5 分钟后失效，二维码将在 60 秒后自动隐藏。",
+				"pair.qrRetry": "重试",
+				"pair.infoLabel": "配对信息（复制一次，粘贴到 App 即可）",
+				"pair.infoCopyDone": "配对信息已复制",
+				"pair.infoCopyFailed": "配对信息复制失败：",
+				"pair.qrHint": "二维码与下面的「配对信息」内容相同：包含{kind}地址、一次性配对码、证书指纹（内网时）与主机标识。在局域网与公网之间切换会立即生成对应的新配对信息，配对码 5 分钟后失效。",
 				"advanced.summary": "高级信息",
 				"advanced.protocolVersion": "协议版本",
 				"advanced.serverVersion": "服务器版本",
@@ -618,15 +615,17 @@ window.__ModuleLoader__.load({
 				"master.on": "On: accepting phone connections.",
 				"master.off": "Off: not accepting phone connections.",
 				"local.title": "LAN connection",
-				"local.on": "On: phones can connect through the independent port {port}.",
+				"local.on": "On: phones connect over TLS through the independent port {port}.",
 				"local.off": "Off: LAN connections are not accepted.",
+				"local.tlsFingerprint": "Certificate fingerprint",
+				"local.tlsRegenerated": "The LAN TLS identity was regenerated: devices previously paired over LAN must scan a new pairing QR.",
 				"local.phaseDisabled": "LAN connection disabled",
 				"local.phaseStarting": "LAN connection starting",
 				"local.phaseOnline": "LAN connection ready",
 				"local.phaseError": "LAN connection failed",
 				"local.phaseStopped": "LAN connection stopped",
 				"local.portTitle": "LAN port",
-				"local.portDescription": "Default 3098; range 1024–65535. This port exposes only the three DeepPilot endpoints, never the full DSH server.",
+				"local.portDescription": "Default 3098; range 1024–65535. This port serves only the three DeepPilot endpoints over TLS, never the full DSH server.",
 				"local.portApplied": "LAN port saved; the listener is reloading.",
 				"local.portInvalid": "Enter an integer from 1024 to 65535.",
 				"local.portFailed": "Failed to save LAN port: ",
@@ -680,14 +679,13 @@ window.__ModuleLoader__.load({
 				"pair.qrShow": "Show QR code",
 				"pair.qrHide": "Hide QR code",
 				"pair.qrGenerating": "Generating…",
-				"pair.qrAutoHidden": "Pairing QR auto-hidden",
+				"pair.qrExpired": "Pairing code expired — show the QR code again",
 				"pair.qrFailed": "QR generation failed: ",
-				"pair.codeLabel": "Pairing code (enter manually in Simulator)",
-				"pair.codeCopyDone": "Pairing code copied",
-				"pair.codeCopyFailed": "Failed to copy pairing code: ",
-				"pair.publicCopyDone": "Connection address copied",
-				"pair.publicCopyFailed": "Copy failed: ",
-				"pair.qrHint": "The QR contains a {kind} address and a single-use pairing code. The code expires after 5 minutes; the QR auto-hides after 60 seconds.",
+				"pair.qrRetry": "Retry",
+				"pair.infoLabel": "Pairing info (copy once, paste it in the app)",
+				"pair.infoCopyDone": "Pairing info copied",
+				"pair.infoCopyFailed": "Failed to copy pairing info: ",
+				"pair.qrHint": "The QR code and the pairing info below carry the same {kind} address, single-use code, certificate fingerprint (for LAN) and host identity. Switching between LAN and public issues a matching new string immediately; the code expires after 5 minutes.",
 				"advanced.summary": "Advanced info",
 				"advanced.protocolVersion": "Protocol version",
 				"advanced.serverVersion": "Server version",
@@ -938,11 +936,29 @@ window.__ModuleLoader__.load({
 			".pbb-versionFooter a{color:var(--dsw-alias-state-success-primary,#22a06b);text-decoration:none}",
 			".pbb-versionFooter a:hover{text-decoration:underline;text-underline-offset:2px}"
 		].join("\n");
+		/**
+		* Client bundle id, identical to the `window.__ModuleLoader__.load({ id })`
+		* identity emitted by tsdown.config.ts. DSH's module system owns style
+		* teardown by package id, so this tag must carry the same value.
+		*/
+		const PLUGIN_ID = "dsh-deeppilot";
+		/**
+		* Claim this plugin's page stylesheet against DSH's style ownership.
+		*
+		* `ClientModuleSystem` tags untagged `<style>` elements only during factory
+		* materialization; this sheet is injected from `apply()`, which runs after
+		* that point, so it would never be attributed to us. Stamping `data-plugin`
+		* ourselves lets the module system's `removeOwnedStyles(id)` delete the sheet
+		* when the plugin is unloaded at runtime — the Plugin Manager and the client
+		* entry reconciler both support live removal from 0.1.6-alpha.2 on, and an
+		* orphaned sheet would otherwise keep styling a page we no longer own.
+		*/
 		function injectCss() {
 			if (typeof document === "undefined") return;
 			const id = "dsh-deeppilot/page.css";
 			if (document.querySelector("style[data-plugin-css=\"" + id + "\"]") !== null) return;
 			const tag = document.createElement("style");
+			tag.setAttribute("data-plugin", PLUGIN_ID);
 			tag.setAttribute("data-plugin-css", id);
 			tag.textContent = CSS;
 			document.head.appendChild(tag);
@@ -3351,18 +3367,25 @@ window.__ModuleLoader__.load({
 				return SvgRenderer.render(data, opts);
 			});
 		})))(), 1);
-		const PAIRING_QR_TYPE = "deeppilot-pairing";
+		/** `sha256:` + base64url(SHA-256(SubjectPublicKeyInfo DER)) of the LAN certificate. */
+		const LAN_TLS_FINGERPRINT_PATTERN = /^sha256:[A-Za-z0-9_-]{43}$/;
+		function isLanTlsFingerprint(value) {
+			return typeof value === "string" && LAN_TLS_FINGERPRINT_PATTERN.test(value);
+		}
 		/**
 		* Return every explicit DeepPilot transport target. LAN comes first because
 		* it is private and lower latency; an online Funnel remains available as a
-		* separate choice instead of silently replacing the local address.
+		* separate choice instead of silently replacing the local address. A LAN
+		* listener without a certificate pin is never offered: the app could not
+		* trust it.
 		*/
 		function selectPairingTargets(local, remote) {
 			const targets = [];
-			if (local.phase === "online") {
+			if (local.phase === "online" && isLanTlsFingerprint(local.tlsFingerprint)) {
 				for (const host of local.endpoints) if (validTargetHost(host)) targets.push({
 					host,
-					kind: "lan"
+					kind: "lan",
+					tlsFingerprint: local.tlsFingerprint
 				});
 			}
 			if (remote.phase === "online" && remote.publicURL && validTargetHost(remote.publicURL)) targets.push({
@@ -3372,40 +3395,115 @@ window.__ModuleLoader__.load({
 			const seen = /* @__PURE__ */ new Set();
 			return targets.filter(({ host }) => !seen.has(host) && seen.add(host));
 		}
+		/** Only encrypted transports are ever offered to the app. */
+		const TARGET_PROTOCOLS = ["https:", "wss:"];
 		function validTargetHost(value) {
 			try {
 				const parsed = new URL(value);
-				return [
-					"http:",
-					"https:",
-					"ws:",
-					"wss:"
-				].includes(parsed.protocol) && parsed.hostname !== "" && parsed.username === "" && parsed.password === "";
+				return TARGET_PROTOCOLS.includes(parsed.protocol) && parsed.hostname !== "" && parsed.username === "" && parsed.password === "";
 			} catch {
 				return false;
 			}
 		}
-		/** Encode a short-lived, single-use pairing grant without URL credentials. */
-		function encodePairingQRPayload(host, grant) {
-			const normalizedHost = host.trim();
-			const parsed = new URL(normalizedHost);
-			if (![
-				"http:",
-				"https:",
-				"ws:",
-				"wss:"
-			].includes(parsed.protocol) || parsed.hostname === "" || parsed.username !== "" || parsed.password !== "") throw new TypeError("pairing QR requires a valid HTTP(S)/WS(S) host");
+		/**
+		* One copyable string carrying everything the app needs to pair: host, the
+		* single-use code, the LAN certificate pin and the host audience.
+		*
+		* Users copy this once instead of moving three separate values, and the app
+		* accepts it from the paste field, a deep link and (from this version on) the
+		* QR code. Field names are short because the whole string ends up in a QR code
+		* and in a text field: `h` host, `c` code, `f` fingerprint, `a` audience,
+		* `e` expiry in milliseconds.
+		*/
+		function encodePairingLink(host, grant, tlsFingerprint) {
+			assertPairingInput(host, grant, tlsFingerprint);
+			const params = new URLSearchParams();
+			params.set("h", host.trim());
+			params.set("c", grant.code.trim());
+			if (tlsFingerprint !== void 0) params.set("f", tlsFingerprint);
+			params.set("a", grant.audience);
+			params.set("e", String(grant.expiresAt));
+			return `${PAIRING_LINK_PREFIX}?${params.toString()}`;
+		}
+		/** `deeppilot://pair` — the deep-link route the iOS app parses. */
+		const PAIRING_LINK_PREFIX = "deeppilot://pair";
+		function assertPairingInput(host, grant, tlsFingerprint) {
+			if (!validTargetHost(host.trim())) throw new TypeError("pairing QR requires a valid HTTPS/WSS host");
 			if (grant.code.trim().length < 32 || !Number.isInteger(grant.expiresAt) || grant.expiresAt <= Date.now()) throw new TypeError("pairing grant is invalid or expired");
 			if (!grant.audience.startsWith("deeppilot:")) throw new TypeError("pairing audience is invalid");
-			const payload = {
-				v: 2,
-				type: PAIRING_QR_TYPE,
-				host: normalizedHost,
-				code: grant.code.trim(),
-				expiresAt: grant.expiresAt,
-				audience: grant.audience
+			if (tlsFingerprint !== void 0 && !isLanTlsFingerprint(tlsFingerprint)) throw new TypeError("pairing TLS fingerprint is invalid");
+		}
+		//#endregion
+		//#region src/client/pairing-panel.ts
+		const initialPairingPanelState = {
+			target: null,
+			busy: false,
+			grant: null,
+			link: null,
+			qrDataURL: null,
+			message: "",
+			notice: "",
+			requestId: 0
+		};
+		function pairingPanelReduce(state, action) {
+			switch (action.type) {
+				case "show": return {
+					target: action.target,
+					busy: true,
+					grant: null,
+					link: null,
+					qrDataURL: null,
+					message: "",
+					notice: "",
+					requestId: action.requestId
+				};
+				case "issued":
+					if (action.requestId !== state.requestId) return state;
+					return {
+						...state,
+						busy: false,
+						grant: action.grant,
+						link: action.link,
+						qrDataURL: action.qrDataURL
+					};
+				case "failed":
+					if (action.requestId !== state.requestId) return state;
+					return {
+						...state,
+						busy: false,
+						grant: null,
+						link: null,
+						qrDataURL: null,
+						message: action.message
+					};
+				case "notice": return {
+					...state,
+					notice: action.message
+				};
+				case "dismissNotice": return state.notice === "" ? state : {
+					...state,
+					notice: ""
+				};
+				case "close": return {
+					...initialPairingPanelState,
+					requestId: state.requestId + 1,
+					message: action.message ?? ""
+				};
+			}
+		}
+		function pairingPanelView(state) {
+			const open = state.target !== null;
+			return {
+				open,
+				busy: state.busy,
+				failed: open && !state.busy && state.grant === null,
+				action: state.busy ? "pair.qrGenerating" : state.target === null ? "pair.qrShow" : "pair.qrHide",
+				target: state.target,
+				link: state.link,
+				qrDataURL: state.qrDataURL,
+				message: state.message,
+				notice: state.notice
 			};
-			return JSON.stringify(payload);
 		}
 		function normalizeFunnelConnectionLimit(value) {
 			return typeof value === "number" && Number.isInteger(value) && value >= 1 && value <= 16 ? value : 8;
@@ -3508,16 +3606,13 @@ window.__ModuleLoader__.load({
 		};
 		/** Slot component: hooks come from the slot renderer, named use<Key>. */
 		function DeepPilotSettingsPage(props) {
-			const [addressMessage, setAddressMessage] = (0, react.useState)("");
 			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)("");
 			const [selectedPairingHost, setSelectedPairingHost] = (0, react.useState)(null);
-			const [qrDataURL, setQRDataURL] = (0, react.useState)(null);
-			const [pairingGrant, setPairingGrant] = (0, react.useState)(null);
-			const [qrBusy, setQRBusy] = (0, react.useState)(false);
-			const [qrMessage, setQRMessage] = (0, react.useState)("");
+			const [pairingPanel, dispatchPairingPanel] = (0, react.useReducer)(pairingPanelReduce, initialPairingPanelState);
+			const qrRequestId = (0, react.useRef)(0);
 			const [relayTestBusy, setRelayTestBusy] = (0, react.useState)(false);
 			const [relayTestResult, setRelayTestResult] = (0, react.useState)(null);
 			const [relayTestError, setRelayTestError] = (0, react.useState)("");
@@ -3564,11 +3659,6 @@ window.__ModuleLoader__.load({
 					setRelayTestBusy(false);
 				});
 			};
-			(0, react.useEffect)(() => {
-				if (!addressMessage) return;
-				const timer = globalThis.setTimeout(() => setAddressMessage(""), 2500);
-				return () => globalThis.clearTimeout(timer);
-			}, [addressMessage]);
 			(0, react.useEffect)(() => {
 				if (!remoteLimitMessage) return;
 				const timer = globalThis.setTimeout(() => setRemoteLimitMessage(""), 4e3);
@@ -3580,19 +3670,21 @@ window.__ModuleLoader__.load({
 				return () => globalThis.clearTimeout(timer);
 			}, [localPortMessage]);
 			(0, react.useEffect)(() => {
-				if (qrDataURL === null) return;
+				if (pairingPanel.grant === null) return;
+				const remaining = Math.max(0, pairingPanel.grant.expiresAt - Date.now());
 				const timer = globalThis.setTimeout(() => {
-					setQRDataURL(null);
-					setPairingGrant(null);
-					setQRMessage(translateWith(props.t, "pair.qrAutoHidden"));
-				}, 1728e5);
+					dispatchPairingPanel({
+						type: "close",
+						message: translateWith(props.t, "pair.qrExpired")
+					});
+				}, remaining);
 				return () => globalThis.clearTimeout(timer);
-			}, [qrDataURL]);
+			}, [pairingPanel.grant]);
 			(0, react.useEffect)(() => {
-				if (!qrMessage) return;
-				const timer = globalThis.setTimeout(() => setQRMessage(""), 2500);
+				if (!pairingPanel.notice) return;
+				const timer = globalThis.setTimeout(() => dispatchPairingPanel({ type: "dismissNotice" }), 2500);
 				return () => globalThis.clearTimeout(timer);
-			}, [qrMessage]);
+			}, [pairingPanel.notice]);
 			const diag = [];
 			let report = null;
 			let enabled = true;
@@ -3694,50 +3786,75 @@ window.__ModuleLoader__.load({
 			};
 			const pairingTargets = report === null ? [] : selectPairingTargets(report.local, report.remote);
 			const pairingTarget = pairingTargets.find(({ host }) => host === selectedPairingHost) ?? pairingTargets[0] ?? null;
-			(0, react.useEffect)(() => {
-				setQRDataURL(null);
-				setPairingGrant(null);
-			}, [pairingTarget?.host]);
-			const copyRemoteURL = (url) => {
-				setAddressMessage("");
-				writeClipboard(props.t, url).then(() => {
-					setAddressMessage(translateWith(props.t, "pair.publicCopyDone"));
-				}, (error) => {
-					setAddressMessage(translateWith(props.t, "pair.publicCopyFailed") + (error instanceof Error ? error.message : String(error)));
+			const panel = pairingPanelView(pairingPanel);
+			/**
+			* Issue a grant and render the panel for one explicit target.
+			*
+			* The target is a parameter rather than component state on purpose: a click
+			* handler must not depend on whether React has already re-rendered with the
+			* newly selected host. A grant is bound to the host it was issued for, so
+			* switching between LAN and public always mints a fresh one.
+			*/
+			const showPairingQR = (target) => {
+				if (typeof props.beginPairing !== "function") return;
+				const requestId = qrRequestId.current + 1;
+				qrRequestId.current = requestId;
+				dispatchPairingPanel({
+					type: "show",
+					target,
+					requestId
 				});
-			};
-			const showPairingQR = () => {
-				if (typeof props.beginPairing !== "function" || pairingTarget === null) return;
-				setQRBusy(true);
-				setQRMessage("");
-				setQRDataURL(null);
-				setPairingGrant(null);
-				props.beginPairing().then(async (grant) => ({
-					grant,
-					svg: await import_browser.toString(encodePairingQRPayload(pairingTarget.host, grant), {
-						type: "svg",
-						errorCorrectionLevel: "M",
-						margin: 2,
-						width: 512
-					})
-				})).then(({ grant, svg }) => {
-					setPairingGrant(grant);
-					setQRDataURL("data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg));
+				props.beginPairing().then(async (grant) => {
+					const link = encodePairingLink(target.host, grant, target.tlsFingerprint);
+					return {
+						grant,
+						link,
+						svg: await import_browser.toString(link, {
+							type: "svg",
+							errorCorrectionLevel: "M",
+							margin: 2,
+							width: 512
+						})
+					};
+				}).then(({ grant, link, svg }) => {
+					if (qrRequestId.current !== requestId) return;
+					dispatchPairingPanel({
+						type: "issued",
+						requestId,
+						grant,
+						link,
+						qrDataURL: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg)
+					});
 				}, (error) => {
-					setQRMessage(translateWith(props.t, "pair.qrFailed") + (error instanceof Error ? error.message : String(error)));
-				}).finally(() => setQRBusy(false));
+					if (qrRequestId.current !== requestId) return;
+					dispatchPairingPanel({
+						type: "failed",
+						requestId,
+						message: translateWith(props.t, "pair.qrFailed") + (error instanceof Error ? error.message : String(error))
+					});
+				});
 			};
 			const hidePairingQR = () => {
-				setQRDataURL(null);
-				setPairingGrant(null);
+				qrRequestId.current += 1;
+				dispatchPairingPanel({ type: "close" });
 			};
-			const copyPairingCode = () => {
-				if (pairingGrant === null) return;
-				setQRMessage("");
-				writeClipboard(props.t, pairingGrant.code).then(() => {
-					setQRMessage(translateWith(props.t, "pair.codeCopyDone"));
+			const copyPairingInfo = () => {
+				const link = pairingPanel.link;
+				if (link === null) return;
+				dispatchPairingPanel({
+					type: "notice",
+					message: ""
+				});
+				writeClipboard(props.t, link).then(() => {
+					dispatchPairingPanel({
+						type: "notice",
+						message: translateWith(props.t, "pair.infoCopyDone")
+					});
 				}, (error) => {
-					setQRMessage(translateWith(props.t, "pair.codeCopyFailed") + (error instanceof Error ? error.message : String(error)));
+					dispatchPairingPanel({
+						type: "notice",
+						message: translateWith(props.t, "pair.infoCopyFailed") + (error instanceof Error ? error.message : String(error))
+					});
 				});
 			};
 			const primaryRows = [];
@@ -3805,7 +3922,7 @@ window.__ModuleLoader__.load({
 				role: "img",
 				"aria-label": report !== null ? translateWith(props.t, LOCAL_PHASE_META[report.local.phase].labelKey) : translateWith(props.t, "phase.unknown"),
 				title: report !== null ? translateWith(props.t, LOCAL_PHASE_META[report.local.phase].labelKey) : void 0
-			}), translateWith(props.t, "local.title")), (0, react.createElement)("span", { className: "pbb-switchDesc" }, localSwitchReady ? localEnabled ? translateWith(props.t, "local.on", { port: localPort }) : translateWith(props.t, "local.off") : translateWith(props.t, "master.loading")), report !== null && report.local.message && report.local.phase === "error" ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, report.local.message) : null), (0, react.createElement)("button", {
+			}), translateWith(props.t, "local.title")), (0, react.createElement)("span", { className: "pbb-switchDesc" }, localSwitchReady ? localEnabled ? translateWith(props.t, "local.on", { port: localPort }) : translateWith(props.t, "local.off") : translateWith(props.t, "master.loading")), 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, report !== null && report.local.phase === "online" && report.local.tlsFingerprint ? (0, react.createElement)("p", { className: "pbb-diag" }, translateWith(props.t, "local.tlsFingerprint"), " ", (0, react.createElement)("code", { className: "pbb-token" }, report.local.tlsFingerprint)) : null), (0, react.createElement)("button", {
 				type: "button",
 				role: "switch",
 				"aria-checked": localEnabled,
@@ -3895,32 +4012,36 @@ window.__ModuleLoader__.load({
 			}, translateWith(props.t, "help.funnelDocs"))))))), report === null ? null : (0, react.createElement)("div", { className: "pbb-card" }, (0, react.createElement)("div", { className: "pbb-field" }, (0, react.createElement)("div", { className: "pbb-row" }, (0, react.createElement)("span", { className: "pbb-label" }, translateWith(props.t, "pair.qrPanelTitle")), pairingTarget === null ? (0, react.createElement)("span", { className: "pbb-value pbb-bad" }, translateWith(props.t, "pair.noAddress")) : (0, react.createElement)("span", { className: "pbb-tokenActions" }, (0, react.createElement)("span", { className: "pbb-badge" }, pairingTarget.kind === "public" ? translateWith(props.t, "pair.kind.public") : translateWith(props.t, "pair.kind.lan")), (0, react.createElement)("button", {
 				type: "button",
 				className: "pbb-action",
-				disabled: qrBusy || !report.pairingReady,
+				disabled: panel.busy || !report.pairingReady,
 				onClick: () => {
-					if (qrDataURL === null) showPairingQR();
-					else hidePairingQR();
+					if (panel.open) hidePairingQR();
+					else showPairingQR(pairingTarget);
 				}
-			}, qrBusy ? translateWith(props.t, "pair.qrGenerating") : qrDataURL === null ? translateWith(props.t, "pair.qrShow") : translateWith(props.t, "pair.qrHide")))), pairingTarget === null ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, translateWith(props.t, "pair.noAddressHelp")) : null, pairingTargets.length < 2 ? null : (0, react.createElement)("div", { className: "pbb-targetList" }, pairingTargets.map((target) => (0, react.createElement)("button", {
+			}, translateWith(props.t, panel.action)))), pairingTarget === null ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, translateWith(props.t, "pair.noAddressHelp")) : null, pairingTargets.length < 2 ? null : (0, react.createElement)("div", { className: "pbb-targetList" }, pairingTargets.map((target) => (0, react.createElement)("button", {
 				type: "button",
 				key: target.host,
 				className: "pbb-action" + (target.host === pairingTarget?.host ? " pbb-actionSelected" : ""),
+				disabled: panel.busy,
 				onClick: () => {
 					setSelectedPairingHost(target.host);
-					hidePairingQR();
+					if (panel.open) showPairingQR(target);
+					else hidePairingQR();
 				}
-			}, (target.kind === "public" ? translateWith(props.t, "pair.kind.public") : translateWith(props.t, "pair.kind.lan")) + " · " + target.host))), qrMessage ? (0, react.createElement)("p", { className: "pbb-diag" }, qrMessage) : null, pairingTarget === null || qrDataURL === null || pairingGrant === null ? null : (0, react.createElement)("div", { className: "pbb-qrPanel" }, (0, react.createElement)("img", {
-				className: "pbb-qrImage",
-				src: qrDataURL,
-				alt: translateWith(props.t, "pair.qrAlt")
-			}), (0, react.createElement)("div", { className: "pbb-pairCodeBlock" }, (0, react.createElement)("span", { className: "pbb-pairCodeLabel" }, translateWith(props.t, "pair.codeLabel")), (0, react.createElement)("div", { className: "pbb-pairCodeRow" }, (0, react.createElement)("code", { className: "pbb-pairCode" }, pairingGrant.code), (0, react.createElement)("button", {
+			}, (target.kind === "public" ? translateWith(props.t, "pair.kind.public") : translateWith(props.t, "pair.kind.lan")) + " · " + target.host))), panel.message ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, panel.message) : null, panel.notice ? (0, react.createElement)("p", { className: "pbb-diag" }, panel.notice) : null, panel.failed && pairingTarget !== null ? (0, react.createElement)("div", { className: "pbb-rowAction" }, (0, react.createElement)("button", {
 				type: "button",
 				className: "pbb-action",
-				onClick: copyPairingCode
-			}, translateWith(props.t, "panel.tokenAction.copy")))), (0, react.createElement)("div", { className: "pbb-row" }, (0, react.createElement)("code", { className: "pbb-token" }, pairingTarget.host), (0, react.createElement)("button", {
+				disabled: panel.busy || !report.pairingReady,
+				onClick: () => showPairingQR(pairingTarget)
+			}, translateWith(props.t, "pair.qrRetry"))) : null, panel.open ? (0, react.createElement)("div", { className: "pbb-qrPanel" }, panel.qrDataURL === null ? (0, react.createElement)("p", { className: "pbb-diag" }, translateWith(props.t, "pair.qrGenerating")) : (0, react.createElement)("img", {
+				className: "pbb-qrImage",
+				src: panel.qrDataURL,
+				alt: translateWith(props.t, "pair.qrAlt")
+			}), panel.link === null ? null : (0, react.createElement)("div", { className: "pbb-pairCodeBlock" }, (0, react.createElement)("span", { className: "pbb-pairCodeLabel" }, translateWith(props.t, "pair.infoLabel")), (0, react.createElement)("div", { className: "pbb-pairCodeRow" }, (0, react.createElement)("code", { className: "pbb-pairCode" }, panel.link), (0, react.createElement)("button", {
 				type: "button",
 				className: "pbb-action",
-				onClick: () => copyRemoteURL(pairingTarget.host)
-			}, translateWith(props.t, "panel.tokenAction.copy"))), addressMessage ? (0, react.createElement)("p", { className: "pbb-diag" }, addressMessage) : null, (0, react.createElement)("p", { className: "pbb-qrHint" }, translateWith(props.t, "pair.qrHint", { kind: pairingTarget.kind === "public" ? translateWith(props.t, "pair.kind.public") : translateWith(props.t, "pair.kind.lan") }))))), (0, react.createElement)("div", { className: "pbb-card" }, (0, react.createElement)("div", { className: "pbb-field" }, primaryRows, advancedRows.length > 0 ? (0, react.createElement)("details", { className: "pbb-help" }, (0, react.createElement)("summary", null, translateWith(props.t, "advanced.summary")), (0, react.createElement)("div", { className: "pbb-helpBody" }, advancedRows)) : null)), (0, react.createElement)("div", { className: "pbb-card" }, (0, react.createElement)("div", { className: "pbb-field" }, (0, react.createElement)("div", { className: "pbb-row" }, (0, react.createElement)("span", { className: "pbb-label" }, translateWith(props.t, "push.relayTitle")), (0, react.createElement)("span", { className: "pbb-tokenActions" }, (0, react.createElement)("button", {
+				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-field" }, primaryRows, advancedRows.length > 0 ? (0, react.createElement)("details", { className: "pbb-help" }, (0, react.createElement)("summary", null, translateWith(props.t, "advanced.summary")), (0, react.createElement)("div", { className: "pbb-helpBody" }, advancedRows)) : null)), (0, react.createElement)("div", { className: "pbb-card" }, (0, react.createElement)("div", { className: "pbb-field" }, (0, react.createElement)("div", { className: "pbb-row" }, (0, react.createElement)("span", { className: "pbb-label" }, translateWith(props.t, "push.relayTitle")), (0, react.createElement)("span", { className: "pbb-tokenActions" }, (0, react.createElement)("button", {
 				type: "button",
 				className: "pbb-action",
 				disabled: relayTestBusy,