@linxin666/dsh-remote-web-ui 0.2.3 → 0.2.5

package/lib/client.js

@@ -1298,6 +1298,19 @@ window.__ModuleLoader__.load({
 			const response = await fetch("/api/pair/stop", { method: "POST" });
 			if (!response.ok) throw new Error(`remote-web-ui: stop failed with ${String(response.status)}`);
 		}
+		/**
+		* Revoke one paired device from the loopback panel.
+		* @param deviceId - the session id of the row to drop.
+		*/
+		async function revokePair(deviceId) {
+			const response = await fetch("/api/pair/revoke", {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify({ deviceId })
+			});
+			if (response.status === 404) return;
+			if (!response.ok) throw new Error(`remote-web-ui: revoke failed with ${String(response.status)}`);
+		}
 		/** Presence heartbeat from a paired phone (unpaired heartbeats 401 harmlessly). */
 		async function sendHeartbeat() {
 			await fetch("/api/pair/heartbeat", { method: "POST" });
@@ -1312,11 +1325,22 @@ window.__ModuleLoader__.load({
 				...workspace !== null && workspace !== "" ? { workspace } : {}
 			};
 		}
+		/** Convert an issued `/m/` link into the desktop pairing form. */
+		function desktopPairUrl(mobileUrl) {
+			const url = new URL(mobileUrl);
+			url.pathname = "/";
+			return url.href;
+		}
 		/** Human-readable expiry clock, e.g. "10:35". */
 		function formatClock(epochMs) {
 			const date = new Date(epochMs);
 			return `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
 		}
+		/** Calendar + clock for last-seen timestamps, e.g. "2026-08-19 10:35". */
+		function formatLastSeen(epochMs) {
+			const date = new Date(epochMs);
+			return `${String(date.getFullYear())}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")} ${formatClock(epochMs)}`;
+		}
 		/**
 		* Copy text to the clipboard with a fallback for insecure contexts
 		* (plain-HTTP LAN origins lack navigator.clipboard).
@@ -1343,8 +1367,18 @@ window.__ModuleLoader__.load({
 			}
 		}
 		//#endregion
+		//#region src/client/device-name.ts
+		/** Derive a short, non-sensitive device label from a browser User-Agent. */
+		function deviceNameFromUserAgent(userAgent) {
+			if (userAgent === void 0 || userAgent.trim() === "") return void 0;
+			const os = /Windows NT/i.test(userAgent) ? "Windows" : /Android/i.test(userAgent) ? "Android" : /iPhone|iPad|iPod/i.test(userAgent) ? "iOS" : /Macintosh|Mac OS X/i.test(userAgent) ? "macOS" : /Linux/i.test(userAgent) ? "Linux" : void 0;
+			const browser = /Edg(?:A|iOS)?\//i.test(userAgent) ? "Edge" : /(?:OPR|Opera)\//i.test(userAgent) ? "Opera" : /(?:Chrome|CriOS)\//i.test(userAgent) ? "Chrome" : /(?:Firefox|FxiOS)\//i.test(userAgent) ? "Firefox" : /Safari\//i.test(userAgent) && /Version\//i.test(userAgent) ? "Safari" : void 0;
+			if (os !== void 0 && browser !== void 0) return `${os} · ${browser}`;
+			return os ?? browser;
+		}
+		//#endregion
 		//#region \0dsh-css:packages/dsh-remote-web-ui/src/client/remote.module.css.mjs
-		const css$1 = ".fThDlq_overlay{z-index:1000;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.fThDlq_mask{background:var(--dsw-alias-bg-mask-1);backdrop-filter:var(--dsw-mask-blur);position:absolute;inset:0}.fThDlq_trigger{width:36px;height:36px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex:none;justify-content:center;align-items:center;padding:0;transition:background-color .12s,color .12s,box-shadow .12s;display:inline-flex;position:relative}.fThDlq_trigger[data-update-available]:after{box-sizing:border-box;border:2px solid var(--dsw-alias-bg-layer-1);background:var(--dsw-alias-brand-primary);content:\"\";pointer-events:none;border-radius:50%;width:8px;height:8px;position:absolute;top:4px;right:4px}.fThDlq_trigger[data-wide=wide]{border-radius:8px;flex:auto;justify-content:flex-start;gap:8px;width:auto;min-width:0;padding:0 10px}.fThDlq_trigger:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}.fThDlq_trigger:active:not(:disabled){background:var(--dsw-alias-interactive-bg-active)}.fThDlq_trigger:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-bg-layer-2), 0 0 0 4px var(--dsw-alias-brand-primary);outline:none}.fThDlq_trigger:disabled{opacity:.5;cursor:default}.fThDlq_panel{z-index:1;box-sizing:border-box;background:var(--dsw-alias-bg-layer-2);width:560px;max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);box-shadow:var(--dsw-shadow-lv3);color:var(--dsw-alias-label-primary);border-radius:24px;flex-direction:column;gap:14px;padding:24px;font-size:14px;line-height:22px;display:flex;position:relative;overflow:auto}.fThDlq_header{align-items:flex-start;gap:12px;display:flex}.fThDlq_heading{flex:1;min-width:0}.fThDlq_title{margin:0;font-size:18px;font-weight:600;line-height:26px}.fThDlq_subtitle{color:var(--dsw-alias-label-secondary);margin:4px 0 0;font-size:13px}.fThDlq_close{width:28px;height:28px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex:none;justify-content:center;align-items:center;padding:0;transition:background-color .12s,color .12s,box-shadow .12s;display:inline-flex}.fThDlq_close:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}.fThDlq_close:active:not(:disabled){background:var(--dsw-alias-interactive-bg-active)}.fThDlq_close:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-bg-layer-2), 0 0 0 4px var(--dsw-alias-brand-primary);outline:none}.fThDlq_close:disabled{opacity:.5;cursor:default}.fThDlq_card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:16px;flex-direction:column;align-items:center;gap:12px;padding:16px;display:flex}.fThDlq_cardHeader{justify-content:space-between;align-items:center;gap:12px;width:100%;display:flex}.fThDlq_cardTitle{font-weight:500}.fThDlq_badge{white-space:nowrap;border-radius:999px;flex:none;align-items:center;gap:6px;min-width:0;padding:2px 10px;font-size:12px;line-height:18px;display:inline-flex}.fThDlq_badge:before{content:\"\";background:currentColor;border-radius:50%;width:8px;height:8px}.fThDlq_badge-waiting{color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-interactive-bg-hover)}.fThDlq_badge-connected{color:var(--dsw-alias-state-success-primary);background:var(--dsw-alias-interactive-bg-hover)}.fThDlq_badge-disconnected{color:var(--dsw-alias-state-warn-primary);background:var(--dsw-alias-interactive-bg-hover)}.fThDlq_badge-stopped{color:var(--dsw-alias-state-error-primary);background:var(--dsw-alias-interactive-bg-hover)}.fThDlq_badgePublic{color:var(--dsw-alias-brand-primary);background:var(--dsw-alias-interactive-bg-hover)}.fThDlq_badges{flex:none;align-items:center;gap:6px;display:inline-flex}.fThDlq_qrWrap{background:var(--dsw-alias-bg-base);border-radius:12px;justify-content:center;align-items:center;padding:12px;display:flex}.fThDlq_qr{display:block}.fThDlq_expired{color:var(--dsw-alias-state-error-primary);margin:0;font-size:13px}.fThDlq_expiry{color:var(--dsw-alias-label-secondary);margin:0;font-size:12px}.fThDlq_hint{color:var(--dsw-alias-label-secondary);margin:0;font-size:13px}.fThDlq_link{text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-caption);font-family:var(--dsw-font-mono,ui-monospace, monospace);margin:0;font-size:12px;overflow:hidden}.fThDlq_stoppedHint{color:var(--dsw-alias-state-error-primary);margin:0;font-size:13px}.fThDlq_tunnelNote{color:var(--dsw-alias-label-secondary);margin:0;font-size:13px}.fThDlq_tunnelFailed{color:var(--dsw-alias-state-error-primary);margin:0;font-size:13px}.fThDlq_actions{gap:8px;display:flex}.fThDlq_action{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-button-elevated-fill);height:34px;color:var(--dsw-alias-label-primary);cursor:pointer;white-space:nowrap;border-radius:10px;justify-content:center;align-items:center;gap:6px;padding:0 14px;font-size:13px;transition:background-color .12s,border-color .12s,box-shadow .12s;display:inline-flex}.fThDlq_action:hover:not(:disabled){background:var(--dsw-alias-button-floating-hover)}.fThDlq_action:active:not(:disabled){background:var(--dsw-alias-interactive-bg-active)}.fThDlq_action:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-bg-layer-2), 0 0 0 4px var(--dsw-alias-brand-primary);outline:none}.fThDlq_action:disabled{opacity:.5;cursor:default}.fThDlq_banner{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:16px;padding:16px}.fThDlq_bannerTitle{color:var(--dsw-alias-state-warn-primary);margin:0;font-weight:500}.fThDlq_bannerHint{color:var(--dsw-alias-label-secondary);margin:6px 0 0;font-size:13px}.fThDlq_notice{z-index:2000;box-sizing:border-box;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);max-width:min(420px,100vw - 32px);box-shadow:var(--dsw-shadow-lv3);border-radius:12px;padding:12px 16px;position:fixed;top:16px;left:50%;transform:translate(-50%)}.fThDlq_noticeTitle{color:var(--dsw-alias-state-error-primary);margin:0;font-weight:500}.fThDlq_noticeDetail{color:var(--dsw-alias-label-secondary);margin:4px 0 0;font-size:13px}.fThDlq_addresses{border:none;margin:12px 0 0;padding:0}.fThDlq_addresses legend{color:var(--dsw-alias-label-secondary);padding:0;font-size:13px}.fThDlq_address{color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;cursor:pointer;border-radius:6px;align-items:center;gap:8px;margin-top:6px;padding:4px 6px;font-size:13px;transition:background-color .12s;display:flex}.fThDlq_address:hover{background:var(--dsw-alias-interactive-bg-hover)}.fThDlq_address input:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-bg-layer-2), 0 0 0 4px var(--dsw-alias-brand-primary);border-radius:50%;outline:none}.fThDlq_addressValue{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--dsw-alias-label-secondary);flex:1;font-size:12px;overflow:hidden}.fThDlq_addressHint{color:var(--dsw-alias-label-tertiary);margin:6px 0 0;font-size:12px}@media (prefers-reduced-motion:reduce){.fThDlq_trigger,.fThDlq_close,.fThDlq_action,.fThDlq_address{transition:none}}.fThDlq_entryRow{flex:none;align-items:center;gap:6px;min-width:0;display:flex}.fThDlq_entryRow[data-rail=rail]{flex-direction:column-reverse;gap:4px}.fThDlq_updateStatus{margin:0;font-weight:600}.fThDlq_updateDetail{color:var(--dsw-alias-label-secondary);margin:6px 0 0;font-size:13px}.fThDlq_updateError{color:var(--dsw-alias-text-danger,var(--dsw-alias-label-primary));margin:0;font-weight:600}.fThDlq_updateOutput{background:var(--dsw-alias-bg-layer-1);max-height:180px;color:var(--dsw-alias-label-secondary);white-space:pre-wrap;word-break:break-all;border-radius:10px;margin:10px 0 0;padding:10px 12px;font-size:12px;line-height:18px;overflow:auto}.fThDlq_updateList{flex-direction:column;gap:6px;margin:12px 0 0;padding:0;list-style:none;display:flex}.fThDlq_updateListItem{justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;display:flex}.fThDlq_updateListName{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--dsw-alias-label-primary);overflow:hidden}.fThDlq_updateListVersions{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;flex:none}.fThDlq_updateActions{justify-content:flex-end;margin-top:16px;display:flex}.fThDlq_updateRetry{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary);cursor:pointer;border:none;border-radius:10px;align-items:center;gap:6px;padding:8px 14px;font-size:13px;transition:background-color .12s,color .12s;display:inline-flex}.fThDlq_updateRetry:hover{background:var(--dsw-alias-interactive-bg-active)}@media (prefers-reduced-motion:reduce){.fThDlq_updateRetry{transition:none}}";
+		const css$1 = ".fThDlq_overlay{z-index:1000;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.fThDlq_mask{background:var(--dsw-alias-bg-mask-1);backdrop-filter:var(--dsw-mask-blur);position:absolute;inset:0}.fThDlq_trigger{width:36px;height:36px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex:none;justify-content:center;align-items:center;padding:0;transition:background-color .12s,color .12s,box-shadow .12s;display:inline-flex;position:relative}.fThDlq_trigger[data-update-available]:after{box-sizing:border-box;border:2px solid var(--dsw-alias-bg-layer-1);background:var(--dsw-alias-brand-primary);content:\"\";pointer-events:none;border-radius:50%;width:8px;height:8px;position:absolute;top:4px;right:4px}.fThDlq_trigger[data-wide=wide]{border-radius:8px;flex:auto;justify-content:flex-start;gap:8px;width:auto;min-width:0;padding:0 10px}.fThDlq_trigger:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}.fThDlq_trigger:active:not(:disabled){background:var(--dsw-alias-interactive-bg-active)}.fThDlq_trigger:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-bg-layer-2), 0 0 0 4px var(--dsw-alias-brand-primary);outline:none}.fThDlq_trigger:disabled{opacity:.5;cursor:default}.fThDlq_panel{z-index:1;box-sizing:border-box;background:var(--dsw-alias-bg-layer-2);width:560px;max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);box-shadow:var(--dsw-shadow-lv3);color:var(--dsw-alias-label-primary);border-radius:24px;flex-direction:column;gap:14px;padding:24px;font-size:14px;line-height:22px;display:flex;position:relative;overflow:auto}.fThDlq_header{align-items:flex-start;gap:12px;display:flex}.fThDlq_heading{flex:1;min-width:0}.fThDlq_title{margin:0;font-size:18px;font-weight:600;line-height:26px}.fThDlq_subtitle{color:var(--dsw-alias-label-secondary);margin:4px 0 0;font-size:13px}.fThDlq_close{width:28px;height:28px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex:none;justify-content:center;align-items:center;padding:0;transition:background-color .12s,color .12s,box-shadow .12s;display:inline-flex}.fThDlq_close:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}.fThDlq_close:active:not(:disabled){background:var(--dsw-alias-interactive-bg-active)}.fThDlq_close:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-bg-layer-2), 0 0 0 4px var(--dsw-alias-brand-primary);outline:none}.fThDlq_close:disabled{opacity:.5;cursor:default}.fThDlq_card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:16px;flex-direction:column;align-items:center;gap:12px;padding:16px;display:flex}.fThDlq_cardHeader{justify-content:space-between;align-items:center;gap:12px;width:100%;display:flex}.fThDlq_cardTitle{font-weight:500}.fThDlq_badge{white-space:nowrap;border-radius:999px;flex:none;align-items:center;gap:6px;min-width:0;padding:2px 10px;font-size:12px;line-height:18px;display:inline-flex}.fThDlq_badge:before{content:\"\";background:currentColor;border-radius:50%;width:8px;height:8px}.fThDlq_badge-waiting{color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-interactive-bg-hover)}.fThDlq_badge-connected{color:var(--dsw-alias-state-success-primary);background:var(--dsw-alias-interactive-bg-hover)}.fThDlq_badge-disconnected{color:var(--dsw-alias-state-warn-primary);background:var(--dsw-alias-interactive-bg-hover)}.fThDlq_badge-stopped{color:var(--dsw-alias-state-error-primary);background:var(--dsw-alias-interactive-bg-hover)}.fThDlq_badgePublic{color:var(--dsw-alias-brand-primary);background:var(--dsw-alias-interactive-bg-hover)}.fThDlq_badges{flex:none;align-items:center;gap:6px;display:inline-flex}.fThDlq_qrWrap{background:var(--dsw-alias-bg-base);border-radius:12px;justify-content:center;align-items:center;padding:12px;display:flex}.fThDlq_qr{display:block}.fThDlq_expired{color:var(--dsw-alias-state-error-primary);margin:0;font-size:13px}.fThDlq_expiry{color:var(--dsw-alias-label-secondary);margin:0;font-size:12px}.fThDlq_hint{color:var(--dsw-alias-label-secondary);margin:0;font-size:13px}.fThDlq_link{text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-caption);font-family:var(--dsw-font-mono,ui-monospace, monospace);margin:0;font-size:12px;display:block;overflow:hidden}.fThDlq_pairLinks{flex-direction:column;gap:8px;display:flex}.fThDlq_pairLinkRow{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:10px;align-items:center;gap:10px;min-width:0;padding:10px 12px;display:flex}.fThDlq_pairLinkText{flex:1;min-width:0}.fThDlq_pairLinkLabel{color:var(--dsw-alias-label-secondary);margin-bottom:3px;font-size:12px;display:block}.fThDlq_copyLink{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-button-elevated-fill);min-height:30px;color:var(--dsw-alias-label-primary);cursor:pointer;border-radius:8px;flex:none;align-items:center;gap:5px;padding:0 10px;display:inline-flex}.fThDlq_oneTimeHint{color:var(--dsw-alias-label-caption);margin:0;font-size:12px}.fThDlq_stoppedHint{color:var(--dsw-alias-state-error-primary);margin:0;font-size:13px}.fThDlq_tunnelNote{color:var(--dsw-alias-label-secondary);margin:0;font-size:13px}.fThDlq_tunnelFailed{color:var(--dsw-alias-state-error-primary);margin:0;font-size:13px}.fThDlq_actions{gap:8px;display:flex}.fThDlq_action{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-button-elevated-fill);height:34px;color:var(--dsw-alias-label-primary);cursor:pointer;white-space:nowrap;border-radius:10px;justify-content:center;align-items:center;gap:6px;padding:0 14px;font-size:13px;transition:background-color .12s,border-color .12s,box-shadow .12s;display:inline-flex}.fThDlq_action:hover:not(:disabled){background:var(--dsw-alias-button-floating-hover)}.fThDlq_action:active:not(:disabled){background:var(--dsw-alias-interactive-bg-active)}.fThDlq_action:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-bg-layer-2), 0 0 0 4px var(--dsw-alias-brand-primary);outline:none}.fThDlq_action:disabled{opacity:.5;cursor:default}.fThDlq_banner{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:16px;padding:16px}.fThDlq_bannerTitle{color:var(--dsw-alias-state-warn-primary);margin:0;font-weight:500}.fThDlq_bannerHint{color:var(--dsw-alias-label-secondary);margin:6px 0 0;font-size:13px}.fThDlq_fencePage{z-index:2000;box-sizing:border-box;background:var(--dsw-alias-bg-base);text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:40px 24px;display:flex;position:fixed;inset:0;overflow:auto}.fThDlq_fenceCard{box-sizing:border-box;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);width:min(520px,100%);box-shadow:var(--dsw-shadow-lv3);text-align:center;border-radius:20px;margin-inline:auto;padding:36px 40px}.fThDlq_fenceMark{background:var(--dsw-alias-state-error-secondary);width:44px;height:44px;color:var(--dsw-alias-state-error-primary);border-radius:50%;place-items:center;margin-inline:auto;font-size:24px;line-height:1;display:grid}.fThDlq_fenceEyebrow{color:var(--dsw-alias-state-error-primary);margin:22px 0 8px;font-size:13px;font-weight:600}.fThDlq_fenceTitle{color:var(--dsw-alias-label-primary);margin:0;font-size:24px;line-height:1.35}.fThDlq_fenceDetail{color:var(--dsw-alias-label-secondary);margin:12px 0 0;font-size:14px;line-height:1.65}.fThDlq_fenceSteps{background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);text-align:left;border-radius:12px;margin:24px auto 0;padding:20px 20px 20px 42px;font-size:14px;line-height:1.65}.fThDlq_fenceSteps li+li{margin-top:8px}.fThDlq_fenceRetry{border:1px solid var(--dsw-alias-brand-primary);background:var(--dsw-alias-brand-primary);color:#fff;width:100%;font:inherit;cursor:pointer;border-radius:10px;margin-top:24px;padding:11px 16px;font-weight:500}.fThDlq_fenceRetry:hover{filter:brightness(.96)}.fThDlq_fenceRetry:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:3px}.fThDlq_fenceFootnote{color:var(--dsw-alias-label-tertiary);margin:14px 0 0;font-size:12px;line-height:1.55}.fThDlq_addresses{border:none;margin:12px 0 0;padding:0}.fThDlq_addresses legend{color:var(--dsw-alias-label-secondary);padding:0;font-size:13px}.fThDlq_address{color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;cursor:pointer;border-radius:6px;align-items:center;gap:8px;margin-top:6px;padding:4px 6px;font-size:13px;transition:background-color .12s;display:flex}.fThDlq_address:hover{background:var(--dsw-alias-interactive-bg-hover)}.fThDlq_address input:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-bg-layer-2), 0 0 0 4px var(--dsw-alias-brand-primary);border-radius:50%;outline:none}.fThDlq_addressValue{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--dsw-alias-label-secondary);flex:1;font-size:12px;overflow:hidden}.fThDlq_addressHint{color:var(--dsw-alias-label-tertiary);margin:6px 0 0;font-size:12px}.fThDlq_devices{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:16px;flex-direction:column;gap:8px;padding:12px 16px 14px;display:flex}.fThDlq_devicesTitle{margin:0;font-size:13px;font-weight:500;line-height:20px}.fThDlq_devicesEmpty{color:var(--dsw-alias-label-secondary);margin:0;font-size:13px}.fThDlq_deviceList{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.fThDlq_deviceRow{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.fThDlq_deviceMeta{flex-direction:column;gap:2px;min-width:0;display:flex}.fThDlq_deviceName{text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500;overflow:hidden}.fThDlq_devicePresence{font-size:12px;line-height:18px}.fThDlq_deviceOnline{color:var(--dsw-alias-state-success-primary)}.fThDlq_deviceOffline{color:var(--dsw-alias-label-secondary)}.fThDlq_deviceSeen{color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;font-size:12px}.fThDlq_deviceRevoke{color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;border-radius:8px;flex:none;padding:6px 10px;font-size:12px;transition:background-color .12s,color .12s}.fThDlq_deviceRevoke:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}.fThDlq_deviceRevoke:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-bg-layer-2), 0 0 0 4px var(--dsw-alias-brand-primary);outline:none}@media (prefers-reduced-motion:reduce){.fThDlq_trigger,.fThDlq_close,.fThDlq_action,.fThDlq_address,.fThDlq_deviceRevoke{transition:none}}.fThDlq_entryRow{flex:none;align-items:center;gap:6px;min-width:0;display:flex}.fThDlq_entryRow[data-rail=rail]{flex-direction:column-reverse;gap:4px}.fThDlq_updateStatus{margin:0;font-weight:600}.fThDlq_updateDetail{color:var(--dsw-alias-label-secondary);margin:6px 0 0;font-size:13px}.fThDlq_updateError{color:var(--dsw-alias-text-danger,var(--dsw-alias-label-primary));margin:0;font-weight:600}.fThDlq_updateOutput{background:var(--dsw-alias-bg-layer-1);max-height:180px;color:var(--dsw-alias-label-secondary);white-space:pre-wrap;word-break:break-all;border-radius:10px;margin:10px 0 0;padding:10px 12px;font-size:12px;line-height:18px;overflow:auto}.fThDlq_updateList{flex-direction:column;gap:6px;margin:12px 0 0;padding:0;list-style:none;display:flex}.fThDlq_updateListItem{justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;display:flex}.fThDlq_updateListName{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--dsw-alias-label-primary);overflow:hidden}.fThDlq_updateListVersions{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;flex:none}.fThDlq_updateActions{justify-content:flex-end;margin-top:16px;display:flex}.fThDlq_updateRetry{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary);cursor:pointer;border:none;border-radius:10px;align-items:center;gap:6px;padding:8px 14px;font-size:13px;transition:background-color .12s,color .12s;display:inline-flex}.fThDlq_updateRetry:hover{background:var(--dsw-alias-interactive-bg-active)}@media (prefers-reduced-motion:reduce){.fThDlq_updateRetry{transition:none}}";
 		const tagId$1 = "@linxin666/dsh-remote-web-ui/remote.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$1) + "]") === null) {
 			const tag = document.createElement("style");
@@ -1374,18 +1408,42 @@ window.__ModuleLoader__.load({
 			"cardHeader": "fThDlq_cardHeader",
 			"cardTitle": "fThDlq_cardTitle",
 			"close": "fThDlq_close",
+			"copyLink": "fThDlq_copyLink",
+			"deviceList": "fThDlq_deviceList",
+			"deviceMeta": "fThDlq_deviceMeta",
+			"deviceName": "fThDlq_deviceName",
+			"deviceOffline": "fThDlq_deviceOffline",
+			"deviceOnline": "fThDlq_deviceOnline",
+			"devicePresence": "fThDlq_devicePresence",
+			"deviceRevoke": "fThDlq_deviceRevoke",
+			"deviceRow": "fThDlq_deviceRow",
+			"deviceSeen": "fThDlq_deviceSeen",
+			"devices": "fThDlq_devices",
+			"devicesEmpty": "fThDlq_devicesEmpty",
+			"devicesTitle": "fThDlq_devicesTitle",
 			"entryRow": "fThDlq_entryRow",
 			"expired": "fThDlq_expired",
 			"expiry": "fThDlq_expiry",
+			"fenceCard": "fThDlq_fenceCard",
+			"fenceDetail": "fThDlq_fenceDetail",
+			"fenceEyebrow": "fThDlq_fenceEyebrow",
+			"fenceFootnote": "fThDlq_fenceFootnote",
+			"fenceMark": "fThDlq_fenceMark",
+			"fencePage": "fThDlq_fencePage",
+			"fenceRetry": "fThDlq_fenceRetry",
+			"fenceSteps": "fThDlq_fenceSteps",
+			"fenceTitle": "fThDlq_fenceTitle",
 			"header": "fThDlq_header",
 			"heading": "fThDlq_heading",
 			"hint": "fThDlq_hint",
 			"link": "fThDlq_link",
 			"mask": "fThDlq_mask",
-			"notice": "fThDlq_notice",
-			"noticeDetail": "fThDlq_noticeDetail",
-			"noticeTitle": "fThDlq_noticeTitle",
+			"oneTimeHint": "fThDlq_oneTimeHint",
 			"overlay": "fThDlq_overlay",
+			"pairLinkLabel": "fThDlq_pairLinkLabel",
+			"pairLinkRow": "fThDlq_pairLinkRow",
+			"pairLinkText": "fThDlq_pairLinkText",
+			"pairLinks": "fThDlq_pairLinks",
 			"panel": "fThDlq_panel",
 			"qr": "fThDlq_qr",
 			"qrWrap": "fThDlq_qrWrap",
@@ -1444,7 +1502,7 @@ window.__ModuleLoader__.load({
 		* @param props - copy, state, and actions.
 		* @returns the panel element tree.
 		*/
-		function RemotePanel({ t, state, copied, onClose, onStop, onRefresh, onCopy, onPickAddress, onPickPublic }) {
+		function RemotePanel({ t, state, copied, onClose, onStop, onRefresh, onCopy, onPickAddress, onPickPublic, onRevoke }) {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: remote_module_css_default.panel,
 				role: "dialog",
@@ -1499,6 +1557,17 @@ window.__ModuleLoader__.load({
 						children: t("status.unreachableHint")
 					})]
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					state.posture !== void 0 && state.posture.hosts.some((host) => host.exposed) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: remote_module_css_default.banner,
+						role: "alert",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: remote_module_css_default.bannerTitle,
+							children: t("posture.exposed")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: remote_module_css_default.bannerHint,
+							children: t("posture.exposedHint", { hosts: state.posture.hosts.filter((host) => host.exposed).map((host) => host.host).join(", ") })
+						})]
+					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: remote_module_css_default.card,
 						children: [
@@ -1542,10 +1611,49 @@ window.__ModuleLoader__.load({
 						className: remote_module_css_default.hint,
 						children: state.public ? t("pair.publicHint") : t("pair.hint")
 					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: remote_module_css_default.pairLinks,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: remote_module_css_default.pairLinkRow,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: remote_module_css_default.pairLinkText,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: remote_module_css_default.pairLinkLabel,
+									children: t("pair.phoneLabel")
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+									className: remote_module_css_default.link,
+									title: state.url,
+									children: state.url
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								className: remote_module_css_default.copyLink,
+								onClick: () => onCopy("phone", state.url),
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconCopyOutline16, { size: 14 }), copied === "phone" ? t("action.copied") : t("action.copyPhone")]
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: remote_module_css_default.pairLinkRow,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: remote_module_css_default.pairLinkText,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: remote_module_css_default.pairLinkLabel,
+									children: t("pair.desktopLabel")
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+									className: remote_module_css_default.link,
+									title: desktopPairUrl(state.url),
+									children: desktopPairUrl(state.url)
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								className: remote_module_css_default.copyLink,
+								onClick: () => onCopy("desktop", desktopPairUrl(state.url)),
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconCopyOutline16, { size: 14 }), copied === "desktop" ? t("action.copied") : t("action.copyDesktop")]
+							})]
+						})]
+					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: remote_module_css_default.link,
-						title: state.url,
-						children: state.url
+						className: remote_module_css_default.oneTimeHint,
+						children: t("pair.oneTimeHint")
 					}),
 					state.phase === "stopped" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 						className: remote_module_css_default.stoppedHint,
@@ -1602,26 +1710,59 @@ window.__ModuleLoader__.load({
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: remote_module_css_default.actions,
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-								type: "button",
-								className: remote_module_css_default.action,
-								onClick: onStop,
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconStopFill16, { size: 14 }), t("action.stop")]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-								type: "button",
-								className: remote_module_css_default.action,
-								onClick: onRefresh,
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconRefreshOutline16, { size: 14 }), t("action.refresh")]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-								type: "button",
-								className: remote_module_css_default.action,
-								onClick: onCopy,
-								children: [copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconCopyOutline16, { size: 14 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconLinkOutline16, { size: 14 }), copied ? t("action.copied") : t("action.copy")]
-							})
-						]
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							className: remote_module_css_default.action,
+							onClick: onStop,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconStopFill16, { size: 14 }), t("action.stop")]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							className: remote_module_css_default.action,
+							onClick: onRefresh,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconRefreshOutline16, { size: 14 }), t("action.refresh")]
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+						className: remote_module_css_default.devices,
+						"data-testid": "remote-devices",
+						"aria-label": t("devices.title"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+							className: remote_module_css_default.devicesTitle,
+							children: t("devices.title")
+						}), state.devices.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: remote_module_css_default.devicesEmpty,
+							children: t("devices.empty")
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+							className: remote_module_css_default.deviceList,
+							children: state.devices.map((device) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+								className: remote_module_css_default.deviceRow,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: remote_module_css_default.deviceMeta,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: remote_module_css_default.deviceName,
+											children: deviceNameFromUserAgent(device.userAgent) ?? t("devices.unknown")
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: clsx(remote_module_css_default.devicePresence, device.online ? remote_module_css_default.deviceOnline : remote_module_css_default.deviceOffline),
+											children: device.online ? t("devices.online") : t("devices.offline")
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: remote_module_css_default.deviceSeen,
+											children: t("devices.lastSeen", { time: formatLastSeen(device.lastSeenAt) })
+										})
+									]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: remote_module_css_default.deviceRevoke,
+									"aria-label": t("devices.revoke.label"),
+									onClick: () => {
+										onRevoke(device.id);
+									},
+									children: t("devices.revoke")
+								})]
+							}, device.id))
+						})]
 					})
 				] })]
 			});
@@ -2071,7 +2212,9 @@ window.__ModuleLoader__.load({
 				phase: frame.phase,
 				deviceCount: frame.deviceCount,
 				onlineCount: frame.onlineCount,
-				...frame.tunnel !== void 0 ? { tunnel: frame.tunnel } : {}
+				devices: frame.devices ?? [],
+				...frame.tunnel !== void 0 ? { tunnel: frame.tunnel } : {},
+				...frame.posture !== void 0 ? { posture: frame.posture } : {}
 			};
 		}
 		/**
@@ -2086,7 +2229,7 @@ window.__ModuleLoader__.load({
 			(0, react.useEffect)(() => {
 				stateRef.current = state;
 			}, [state]);
-			const [copied, setCopied] = (0, react.useState)(false);
+			const [copied, setCopied] = (0, react.useState)(void 0);
 			const eventSource = (0, react.useRef)(void 0);
 			const openSeq = (0, react.useRef)(0);
 			const workspaceId = useWorkspaces((s) => s.recentWorkspaceId);
@@ -2115,6 +2258,7 @@ window.__ModuleLoader__.load({
 					phase: "waiting",
 					deviceCount: 0,
 					onlineCount: 0,
+					devices: [],
 					public: publicBaseUrl !== void 0 && result.url.startsWith(publicBaseUrl),
 					...publicBaseUrl !== void 0 ? { publicBaseUrl } : {},
 					address: address ?? result.lanAddresses[0] ?? "",
@@ -2174,7 +2318,15 @@ window.__ModuleLoader__.load({
 				stopPair().catch(() => {});
 				setState((previous) => previous.kind === "ready" ? {
 					...previous,
-					phase: "stopped"
+					phase: "stopped",
+					devices: []
+				} : previous);
+			}, []);
+			const handleRevoke = (0, react.useCallback)((deviceId) => {
+				revokePair(deviceId).catch(() => {});
+				setState((previous) => previous.kind === "ready" ? {
+					...previous,
+					devices: previous.devices.filter((device) => device.id !== deviceId)
 				} : previous);
 			}, []);
 			const handleRefresh = (0, react.useCallback)(() => {
@@ -2188,16 +2340,15 @@ window.__ModuleLoader__.load({
 			const handlePickPublic = (0, react.useCallback)(() => {
 				mint().then(setState);
 			}, [mint]);
-			const handleCopy = (0, react.useCallback)(() => {
-				if (state.kind !== "ready") return;
-				copyText(state.url).then((ok) => {
+			const handleCopy = (0, react.useCallback)((target, url) => {
+				copyText(url).then((ok) => {
 					if (!ok) return;
-					setCopied(true);
+					setCopied(target);
 					window.setTimeout(() => {
-						setCopied(false);
+						setCopied(void 0);
 					}, 1500);
 				});
-			}, [state]);
+			}, []);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: remote_module_css_default.entryRow,
 				"data-rail": wide ? void 0 : "rail",
@@ -2225,7 +2376,8 @@ window.__ModuleLoader__.load({
 					onRefresh: handleRefresh,
 					onCopy: handleCopy,
 					onPickAddress: handlePickAddress,
-					onPickPublic: handlePickPublic
+					onPickPublic: handlePickPublic,
+					onRevoke: handleRevoke
 				})]
 			}), document.body)] });
 		}
@@ -2917,7 +3069,8 @@ window.__ModuleLoader__.load({
 				const valid = plan.filter((item) => item.run !== void 0);
 				if (plan.length === 0 || this.saving || valid.length !== plan.length) return;
 				const plannedWrites = valid.map((item) => item.op);
-				const fields = new Set(plan.map((item) => item.field));
+				const pending = /* @__PURE__ */ new Map();
+				for (const item of plan) pending.set(item.field, this.staged.get(item.field));
 				this.saving = true;
 				this.failed = false;
 				this.failedReason = void 0;
@@ -2930,9 +3083,9 @@ window.__ModuleLoader__.load({
 						for (const field of result.fields) if (field.landed) landed.add(field.field);
 					} else this.failedReason = result.message;
 				} else for (const item of valid) if (await item.run()) landed.add(item.field);
-				for (const field of fields) if (landed.has(field)) this.staged.delete(field);
+				for (const [field, before] of pending) if (landed.has(field) && this.staged.get(field) === before) this.staged.delete(field);
 				this.saving = false;
-				this.failed = landed.size !== fields.size;
+				this.failed = landed.size !== pending.size;
 				this.publish();
 			}
 			/** The scope's batch surface when it supports one; undefined conservatively otherwise. */
@@ -3045,6 +3198,7 @@ window.__ModuleLoader__.load({
 					numberField("tokenTtlMs"),
 					numberField("offlineAfterMs"),
 					numberField("maxDevices"),
+					numberField("idleExpireMs"),
 					textField("cookieName"),
 					booleanField("requirePairingForLan"),
 					textField("publicBaseUrl"),
@@ -3060,6 +3214,7 @@ window.__ModuleLoader__.load({
 					tokenTtlMs: this.form.field("tokenTtlMs"),
 					offlineAfterMs: this.form.field("offlineAfterMs"),
 					maxDevices: this.form.field("maxDevices"),
+					idleExpireMs: this.form.field("idleExpireMs"),
 					cookieName: this.form.field("cookieName"),
 					requirePairingForLan: this.form.field("requirePairingForLan"),
 					publicBaseUrl: this.form.field("publicBaseUrl"),
@@ -3167,6 +3322,20 @@ window.__ModuleLoader__.load({
 							props.resetField("maxDevices");
 						}
 					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ValueField, {
+						id: "settings-remote-idle-expire",
+						label: t("settings.idleExpireMs"),
+						hint: t("settings.idleExpireMsHint"),
+						numeric: true,
+						...fieldProps,
+						...state.idleExpireMs,
+						onEdit: (text) => {
+							props.edit("idleExpireMs", text);
+						},
+						onReset: () => {
+							props.resetField("idleExpireMs");
+						}
+					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ValueField, {
 						id: "settings-remote-cookie",
 						label: t("settings.cookieName"),
@@ -3247,46 +3416,69 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client/locales.ts
-		/** `remote` namespace dictionaries: the mobile remote-control surface copy. */
+		/** `remote` namespace dictionaries: the remote-access surface copy. */
 		/** Simplified Chinese dictionary (the key-set source of truth). */
 		const zh = {
-			"entry.label": "移动端远程控制",
-			"title": "移动端远程控制",
-			"subtitle": "扫码或在手机上打开链接，即可远程控制当前工作区",
-			"card.title": "手机扫码连接",
+			"entry.label": "远程访问",
+			"title": "远程访问",
+			"subtitle": "通过手机或另一台电脑配对，远程访问当前工作区",
+			"card.title": "设备配对",
 			"public.badge": "公网",
-			"status.waiting": "等待手机连接",
+			"status.waiting": "等待设备连接",
 			"status.connected": "已连接 {n} 台设备",
 			"status.disconnected": "已配对设备离线",
-			"status.stopped": "已停止移动端访问",
+			"status.stopped": "已停止远程访问",
 			"status.lanRequired": "此功能需要以 --host 0.0.0.0 启动 dsh web，或配置公网地址才能使用",
 			"status.lanRequiredHint": "当前服务仅绑定在 127.0.0.1 且未配置公网地址，手机无法访问。请用 dsh web --host 0.0.0.0 重新启动，或在设置中填写内网穿透的公网地址。",
 			"status.loopbackRequired": "配对面板仅限本机使用",
 			"status.loopbackRequiredHint": "请通过 http://127.0.0.1 打开此页面后重试；手机请使用配对链接访问。",
 			"status.unreachable": "无法连接配对服务",
 			"status.unreachableHint": "请刷新页面后重试。",
-			"pair.hint": "无法扫码？可以在手机上打开链接",
-			"pair.publicHint": "公网链接：手机无需与电脑在同一网络",
+			"pair.hint": "无法扫码？可直接打开下方配对链接",
+			"pair.publicHint": "公网链接：设备无需与本机处于同一网络",
 			"address.label": "选择二维码指向的网络",
 			"address.public": "公网地址",
 			"address.lan": "局域网",
-			"address.hint": "公网地址适合手机不在同一网络时使用；局域网地址仅在手机与电脑同一网络时可用。",
+			"address.hint": "远程设备不在同一网络时请使用公网地址；局域网地址仅限同一网络内使用。",
 			"pair.expires": "二维码有效至 {time}",
 			"pair.expired": "二维码已过期，请刷新",
+			"pair.phoneLabel": "手机配对链接",
+			"pair.desktopLabel": "电脑配对链接",
+			"pair.oneTimeHint": "两条链接共用同一枚一次性令牌；任意设备配对成功后，另一条链接立即失效。",
 			"pair.failed.title": "配对失败",
 			"pair.failed.detail": "链接无效或已使用，请回到电脑端刷新二维码后重新扫码。",
+			"fence.unpaired.title": "此设备未配对，无法访问工作区数据",
+			"fence.unpaired.eyebrow": "需要设备配对",
+			"fence.unpaired.hint": "为保护工作区、会话与插件数据，远程电脑必须先通过主电脑授权。",
+			"fence.unpaired.stepDesktop": "在主电脑打开 http://127.0.0.1:3080，进入“远程访问”。",
+			"fence.unpaired.stepLink": "在“设备配对”中复制电脑配对链接。",
+			"fence.unpaired.stepOpen": "在当前浏览器打开该链接，完成授权后即可进入。",
+			"fence.unpaired.retry": "重新检测",
+			"fence.unpaired.footnote": "请勿使用他人提供的配对链接；管理员可随时取消此设备的授权。",
+			"posture.exposed": "/api 通道对未配对设备敞开",
+			"posture.exposedHint": "以下来源的请求未经配对即可访问完整桌面 API：{hosts}。请移除对应来源的 --trusted-host（配对机制已覆盖远程访问），或改为仅绑定 127.0.0.1 并使用隧道。",
 			"action.stop": "停止",
 			"action.refresh": "刷新二维码",
 			"action.copy": "复制链接",
+			"action.copyPhone": "复制手机链接",
+			"action.copyDesktop": "复制电脑链接",
 			"action.copied": "已复制",
-			"stopped.hint": "已停止移动端访问。点击\"刷新二维码\"重新开启。",
+			"devices.title": "已授权设备",
+			"devices.empty": "还没有已配对的设备。扫码或打开链接后会出现在这里。",
+			"devices.unknown": "未知设备",
+			"devices.online": "在线",
+			"devices.offline": "离线",
+			"devices.lastSeen": "最近活动 {time}",
+			"devices.revoke": "取消配对",
+			"devices.revoke.label": "取消配对此设备",
+			"stopped.hint": "已停止远程访问。点击\"刷新二维码\"重新开启。",
 			"tunnel.starting": "公网隧道启动中，二维码将自动变为公网链接…",
 			"tunnel.failed": "公网隧道启动失败：{error}",
 			"tunnel.unknownError": "未知错误",
-			"close.label": "关闭移动端远程控制面板",
-			"settings.title": "移动端远程控制",
+			"close.label": "关闭远程访问面板",
+			"settings.title": "远程访问设置",
 			"settings.description": "配对安全与设备限额。",
-			"settings.enabled": "启用移动端远程控制",
+			"settings.enabled": "启用远程访问",
 			"settings.enabledHint": "关闭后移除侧边栏入口并停用配对路由与局域网栅栏。",
 			"settings.tokenTtlMs": "配对令牌有效期（毫秒）",
 			"settings.tokenTtlMsHint": "新生成的二维码链接在此时间后失效。",
@@ -3294,10 +3486,12 @@ window.__ModuleLoader__.load({
 			"settings.offlineAfterMsHint": "配对设备超过该时长未上报心跳即视为离线。",
 			"settings.maxDevices": "已配对设备上限",
 			"settings.maxDevicesHint": "超过上限时淘汰最旧的设备会话。",
+			"settings.idleExpireMs": "空闲过期（毫秒）",
+			"settings.idleExpireMsHint": "超过该时长没有任何心跳或请求的已配对设备会被删除，必须重新扫码。默认 7 天。",
 			"settings.cookieName": "设备 Cookie 名",
 			"settings.cookieNameHint": "携带已配对设备标识的 Cookie 名称。",
 			"settings.requirePairingForLan": "局域网访问要求配对",
-			"settings.requirePairingForLanHint": "开启：所有非本机回环的 /api 请求必须携带有效配对 Cookie；关闭：局域网栅栏放开，配对仅用于令牌与状态管理。",
+			"settings.requirePairingForLanHint": "开启：非本机回环的桌面 Web GUI 改走门控的 /remote，必须携带有效配对 Cookie；关闭：桌面继续走普通路径（仅在该来源已被 SDK 信任时有意义），配对只管理令牌与状态。",
 			"settings.publicBaseUrl": "公网地址（可选）",
 			"settings.publicBaseUrlHint": "内网穿透的公网地址，如 Cloudflare Tunnel：https://xxx.trycloudflare.com。填写后二维码将生成公网链接，手机不在同一网络也能配对；留空则仅局域网可用。",
 			"settings.autoTunnel": "自动公网隧道",
@@ -3335,7 +3529,7 @@ window.__ModuleLoader__.load({
 			"update.doneDetail": "所有组件已更新到最新版本。",
 			"update.restartHint": "请重启 dsh web 使新版本生效：在终端按 Ctrl+C 停止后重新运行 dsh web。",
 			"update.linkMode": "当前为本地开发模式",
-			"update.linkModeDetail": "dsh-web-ui 通过本地链接安装（开发模式），无法自动更新。npm 上最新版本：{version}。请在仓库中执行 git pull 更新。",
+			"update.linkModeDetail": "dsh-web-ui 或其组件通过本地链接安装（开发模式），无法自动更新。npm 上最新版本：{version}。请同步本地仓库，或移除与全家桶重复的独立链接。",
 			"update.missing": "未找到 dsh-web-ui 安装",
 			"update.missingDetail": "无法定位已安装的 dsh-web-ui 聚合包。请先运行 dsh plugin --profile <profile> add @linxin666/dsh-web-ui-all。",
 			"update.offline": "无法连接更新源",
@@ -3349,7 +3543,7 @@ window.__ModuleLoader__.load({
 			"update.error.pnpmMissing": "未找到 pnpm，已尝试 pnpm / corepack / npx 仍不可用。请安装 pnpm 后重启应用（Windows: npm install -g pnpm 或 corepack enable；macOS: brew install pnpm 或 corepack enable）。",
 			"update.error.timeout": "更新超时，已终止安装进程，请重试。",
 			"update.error.notFound": "未找到 dsh-web-ui 聚合包安装，无法更新。",
-			"update.error.link": "当前为本地开发模式（链接安装），无法自动更新。",
+			"update.error.link": "dsh-web-ui 或其组件使用本地链接，无法自动更新；请同步本地仓库，或移除与全家桶重复的独立链接。",
 			"update.error.pnpmFailed": "更新执行失败（pnpm 退出码 {code}），详见下方输出。",
 			"update.error.stale": "更新命令已执行，但安装版本未变化。常见原因：pnpm 11 的 minimumReleaseAge 门禁会静默跳过发布不足 24 小时的新版本。请在 profile 目录（~/.dsh/profiles/<profile>）的 pnpm-workspace.yaml 中配置 minimumReleaseAgeExclude（例如 \"@linxin666/*\"）或 minimumReleaseAge: 0 后重新点击更新。",
 			"update.error.verifyFailed": "更新命令已执行，但无法核对安装后的版本（可能是 registry 探测失败或安装路径变化）。请查看下方输出，或稍后重试。",
@@ -3357,43 +3551,66 @@ window.__ModuleLoader__.load({
 		};
 		/** English dictionary, checked complete against the zh key set. */
 		const en = {
-			"entry.label": "Mobile remote control",
-			"title": "Mobile remote control",
-			"subtitle": "Scan the QR code or open the link on your phone to control this workspace remotely",
-			"card.title": "Scan to connect",
+			"entry.label": "Remote access",
+			"title": "Remote access",
+			"subtitle": "Pair a phone or another computer to access this workspace remotely",
+			"card.title": "Pair a device",
 			"public.badge": "Public",
-			"status.waiting": "Waiting for a phone",
+			"status.waiting": "Waiting for a device",
 			"status.connected": "{n} device(s) connected",
 			"status.disconnected": "Paired devices offline",
-			"status.stopped": "Mobile access stopped",
+			"status.stopped": "Remote access stopped",
 			"status.lanRequired": "This feature needs dsh web started with --host 0.0.0.0, or a configured public address",
 			"status.lanRequiredHint": "The server is bound to 127.0.0.1 and no public address is configured, so a phone cannot reach it. Restart with dsh web --host 0.0.0.0, or set the tunneled public address in settings.",
 			"status.loopbackRequired": "The pairing panel works on this machine only",
 			"status.loopbackRequiredHint": "Open this page at http://127.0.0.1 to mint a QR code; phones use the paired link.",
 			"status.unreachable": "Cannot reach the pairing service",
 			"status.unreachableHint": "Refresh the page and try again.",
-			"pair.hint": "Cannot scan? Open the link on your phone",
-			"pair.publicHint": "Public link: the phone does not need to be on the same network",
+			"pair.hint": "Cannot scan? Open one of the pairing links below",
+			"pair.publicHint": "Public links work when the device is not on the same network",
 			"address.label": "Network the QR code points to",
 			"address.public": "Public",
 			"address.lan": "LAN",
-			"address.hint": "Use the public address when the phone is not on the same network; LAN addresses only work on the same network.",
+			"address.hint": "Use the public address when the remote device is on another network; LAN addresses only work on the same network.",
 			"pair.expires": "QR code valid until {time}",
 			"pair.expired": "QR code expired — refresh it",
+			"pair.phoneLabel": "Phone pairing link",
+			"pair.desktopLabel": "Computer pairing link",
+			"pair.oneTimeHint": "Both links share one single-use token. Pairing either device invalidates the other link immediately.",
 			"pair.failed.title": "Pairing failed",
 			"pair.failed.detail": "The link is invalid or was already used. Refresh the QR code on your computer and scan again.",
+			"fence.unpaired.title": "This device is not paired and cannot reach workspace data",
+			"fence.unpaired.eyebrow": "Device pairing required",
+			"fence.unpaired.hint": "To protect workspace, session, and plugin data, a remote computer must first be authorized by the primary computer.",
+			"fence.unpaired.stepDesktop": "On the primary computer, open http://127.0.0.1:3080 and go to Remote access.",
+			"fence.unpaired.stepLink": "Copy the computer pairing link under Pair a device.",
+			"fence.unpaired.stepOpen": "Open that link in this browser. After authorization, the workspace will become available.",
+			"fence.unpaired.retry": "Check again",
+			"fence.unpaired.footnote": "Do not use pairing links from people you do not trust. An administrator can revoke this device at any time.",
+			"posture.exposed": "The /api channel is open to unpaired devices",
+			"posture.exposedHint": "Requests from {hosts} reach the full desktop API without pairing. Remove --trusted-host for them (pairing already covers remote access), or bind loopback only and use the tunnel.",
 			"action.stop": "Stop",
 			"action.refresh": "Refresh QR",
 			"action.copy": "Copy link",
+			"action.copyPhone": "Copy phone link",
+			"action.copyDesktop": "Copy computer link",
 			"action.copied": "Copied",
-			"stopped.hint": "Mobile access is stopped. Click \"Refresh QR\" to re-enable it.",
+			"devices.title": "Authorized devices",
+			"devices.empty": "No paired devices yet. Scan the QR or open the link to add one.",
+			"devices.unknown": "Unknown device",
+			"devices.online": "Online",
+			"devices.offline": "Offline",
+			"devices.lastSeen": "Last active {time}",
+			"devices.revoke": "Unpair",
+			"devices.revoke.label": "Unpair this device",
+			"stopped.hint": "Remote access is stopped. Click \"Refresh QR\" to re-enable it.",
 			"tunnel.starting": "The public tunnel is starting; the QR code will switch to a public link shortly…",
 			"tunnel.failed": "The public tunnel failed to start: {error}",
 			"tunnel.unknownError": "unknown error",
-			"close.label": "Close mobile remote control panel",
-			"settings.title": "Mobile remote control",
+			"close.label": "Close remote access panel",
+			"settings.title": "Remote access settings",
 			"settings.description": "Pairing security and device limits.",
-			"settings.enabled": "Enable mobile remote control",
+			"settings.enabled": "Enable remote access",
 			"settings.enabledHint": "When off, the sidebar entry is removed and pairing routes plus the LAN fence stop.",
 			"settings.tokenTtlMs": "Pairing token lifetime (ms)",
 			"settings.tokenTtlMsHint": "How long a minted QR link stays valid before it dies.",
@@ -3401,10 +3618,12 @@ window.__ModuleLoader__.load({
 			"settings.offlineAfterMsHint": "A paired device flips to offline when it has not been seen for this long.",
 			"settings.maxDevices": "Paired device cap",
 			"settings.maxDevicesHint": "Hard cap on paired device sessions; the oldest is evicted when full.",
+			"settings.idleExpireMs": "Idle expiry (ms)",
+			"settings.idleExpireMsHint": "A paired device with no heartbeat or request for this long is deleted and must scan again. Default is 7 days.",
 			"settings.cookieName": "Device cookie name",
 			"settings.cookieNameHint": "Cookie that carries the paired device id.",
 			"settings.requirePairingForLan": "Require pairing for LAN access",
-			"settings.requirePairingForLanHint": "On: every non-loopback /api request must carry a live paired-device cookie. Off: the LAN fence is open and pairing only manages tokens/status.",
+			"settings.requirePairingForLanHint": "On: a desktop Web GUI at a non-loopback origin rides the gated /remote channel and must carry a live paired-device cookie. Off: the desktop stays on its original paths (only useful when that origin is already trusted) and pairing only manages tokens/status.",
 			"settings.publicBaseUrl": "Public address (optional)",
 			"settings.publicBaseUrlHint": "The public URL of a tunnel in front of this server, e.g. a Cloudflare Tunnel: https://xxx.trycloudflare.com. When set, the QR link is built from it so a phone anywhere can pair; leave blank for LAN-only usage.",
 			"settings.autoTunnel": "Auto public tunnel",
@@ -3442,7 +3661,7 @@ window.__ModuleLoader__.load({
 			"update.doneDetail": "All components are up to date.",
 			"update.restartHint": "Restart dsh web for the new version to take effect: stop it with Ctrl+C in the terminal, then run dsh web again.",
 			"update.linkMode": "Local development mode",
-			"update.linkModeDetail": "dsh-web-ui is installed via a local link (development mode) and cannot be updated remotely. Latest npm release: {version}. Run git pull in the repository to update.",
+			"update.linkModeDetail": "dsh-web-ui or one of its components is installed via a local link and cannot be updated remotely. Latest npm release: {version}. Sync the local checkout, or remove a standalone link duplicated by the aggregate.",
 			"update.missing": "dsh-web-ui not found",
 			"update.missingDetail": "Could not locate the installed dsh-web-ui aggregate package. Install it with: dsh plugin --profile <profile> add @linxin666/dsh-web-ui-all",
 			"update.offline": "Cannot reach the update source",
@@ -3456,7 +3675,7 @@ window.__ModuleLoader__.load({
 			"update.error.pnpmMissing": "pnpm was not found (tried pnpm / corepack / npx). Install pnpm and restart the app (Windows: npm install -g pnpm or corepack enable; macOS: brew install pnpm or corepack enable).",
 			"update.error.timeout": "The update timed out and the install process was killed; try again.",
 			"update.error.notFound": "The dsh-web-ui aggregate package is not installed; nothing to update.",
-			"update.error.link": "Local development mode (link install) — automatic update is unavailable.",
+			"update.error.link": "dsh-web-ui or one of its components uses a local link. Sync the checkout, or remove a standalone link duplicated by the aggregate.",
 			"update.error.pnpmFailed": "The update failed (pnpm exited with code {code}); see the output below.",
 			"update.error.stale": "The update command ran but the installed versions did not change. Likely cause: the pnpm 11 minimumReleaseAge gate silently skips releases published less than 24 hours ago. Add minimumReleaseAgeExclude (e.g. \"@linxin666/*\") or set minimumReleaseAge: 0 in pnpm-workspace.yaml under the profile directory (~/.dsh/profiles/<profile>), then run the update again.",
 			"update.error.verifyFailed": "The update command ran but the installed versions could not be verified afterwards (registry probe failed or the install path changed). Inspect the output below, or retry later.",
@@ -3551,6 +3770,278 @@ window.__ModuleLoader__.load({
 			page.replaceState(`${url.pathname}${url.search}${url.hash}`);
 		}
 		//#endregion
+		//#region src/client/remote-channel.ts
+		/**
+		* The remote desktop channel — browser half. On a non-loopback origin (LAN
+		* address or public tunnel) fenced host routes refuse the request, and
+		* pairing is the real access control — so same-origin traffic the desktop
+		* issues is rewritten onto this plugin's gated `/remote` prefix (host half
+		* in src/remote-api.ts). The host then re-issues the call to 127.0.0.1 so
+		* plugin loopback fences pass.
+		*
+		* The rewrite is deliberately narrow:
+		* - loopback origins are untouched (the desktop at 127.0.0.1 keeps original paths);
+		* - the pairing routes (`/api/pair/*`) stay where they are — accept must
+		*   work BEFORE a device is paired;
+		* - the update endpoints (`/api/update/*`) stay loopback-only;
+		* - desktop-launcher create/shutdown (`/api/dsh-desktop-launcher/*`) stay
+		*   loopback-only (host-local files and process exit);
+		* - the family settings bridge (`/api/dsh-web-ui-settings/*`) stays
+		*   loopback-only (same plane as SDK settings.*);
+		* - `/api/*` (SDK methods and `/api/<plugin>/...` plugin namespaces),
+		*   `/sidebar/*`, `/git/*`, and `/pet/*` ride the channel;
+		* - fetch, EventSource, WebSocket, and img/script/iframe `src` are patched;
+		*   everything else calls the original unchanged.
+		*
+		* Pure helpers are exported for unit tests; `installRemoteChannel` patches
+		* the given window and returns their restore.
+		*/
+		/** The gated mirror prefix (must match src/remote-methods.ts). */
+		const REMOTE_PREFIX = "/remote";
+		const API_PREFIX = "/api/";
+		const PAIR_PREFIX = "/api/pair/";
+		const UPDATE_PREFIX = "/api/update/";
+		const DESKTOP_LAUNCHER_PREFIX = "/api/dsh-desktop-launcher";
+		const SETTINGS_BRIDGE_PREFIX = "/api/dsh-web-ui-settings";
+		const SIDEBAR_PREFIX = "/sidebar/";
+		const GIT_PREFIX = "/git/";
+		const PET_PREFIX = "/pet/";
+		const WS_PATHS = /* @__PURE__ */ new Set([
+			"/api/events.mux",
+			"/api/events.host",
+			"/sidebar/ws/terminal",
+			"/sidebar/ws/agent-terminals",
+			"/api/dsh-ssh/terminal"
+		]);
+		/**
+		* Browser-safe loopback classification for the page origin (the SDK client
+		* exports its own; this copy keeps the module dependency-free).
+		* @param hostname - a location hostname (IPv6 without brackets).
+		* @returns true for localhost, IPv6 loopback, or any 127/8 literal.
+		*/
+		function isLoopbackHostname(hostname) {
+			if (hostname === "localhost" || hostname === "::1") return true;
+			const parts = hostname.split(".");
+			return parts.length === 4 && parts[0] === "127" && parts.every((part) => /^\d{1,3}$/.test(part) && Number(part) <= 255);
+		}
+		/**
+		* Whether one same-origin path must ride the gated channel (fetch, EventSource,
+		* img/script/iframe src).
+		* @param pathname - the request URL pathname.
+		*/
+		function shouldRewriteFetchPath(pathname) {
+			if (pathname.startsWith(PAIR_PREFIX)) return false;
+			if (pathname.startsWith(UPDATE_PREFIX)) return false;
+			if (pathname === DESKTOP_LAUNCHER_PREFIX || pathname.startsWith(`${DESKTOP_LAUNCHER_PREFIX}/`)) return false;
+			if (pathname === SETTINGS_BRIDGE_PREFIX || pathname.startsWith(`${SETTINGS_BRIDGE_PREFIX}/`)) return false;
+			if (pathname.startsWith(API_PREFIX)) return true;
+			if (pathname.startsWith(SIDEBAR_PREFIX) || pathname === "/sidebar") return true;
+			if (pathname.startsWith(GIT_PREFIX) || pathname === "/git") return true;
+			if (pathname.startsWith(PET_PREFIX) || pathname === "/pet") return true;
+			return false;
+		}
+		/**
+		* Whether one WebSocket path must ride the gated channel.
+		* @param pathname - the WebSocket URL pathname.
+		*/
+		function shouldRewriteWsPath(pathname) {
+			return WS_PATHS.has(pathname);
+		}
+		/** The gated twin of one fenced path (`/remote` + original pathname). */
+		function rewritePath(pathname) {
+			return `${REMOTE_PREFIX}${pathname}`;
+		}
+		/**
+		* Rewrite one raw URL string when it is same-origin and fenced. Relative
+		* inputs stay relative so resource loaders do not unexpectedly absolutize.
+		*/
+		function rewriteRawUrl(raw, baseHref, origin) {
+			let url;
+			try {
+				url = new URL(raw, baseHref);
+			} catch {
+				return raw;
+			}
+			if (url.origin !== origin) return raw;
+			if (!shouldRewriteFetchPath(url.pathname)) return raw;
+			url.pathname = rewritePath(url.pathname);
+			if (raw.startsWith("/") && !raw.startsWith("//")) return `${url.pathname}${url.search}${url.hash}`;
+			return url.href;
+		}
+		/** Read an unpaired code from either the SDK envelope or a plugin JSON body. */
+		function unpairedCodeOf(value) {
+			if (typeof value !== "object" || value === null) return void 0;
+			const record = value;
+			const nested = record.result;
+			if (typeof nested === "object" && nested !== null) {
+				const error = nested.error;
+				if (typeof error === "object" && error !== null && typeof error.code === "string") return error.code;
+			}
+			const error = record.error;
+			if (typeof error === "object" && error !== null && typeof error.code === "string") return error.code;
+		}
+		/**
+		* Whether a gated 403 is the unpaired-device fence (not a loopback-only
+		* method denial, which uses the same status with code `forbidden`).
+		*/
+		async function isUnpairedDenied(response) {
+			if (response.status !== 403) return false;
+			try {
+				return unpairedCodeOf(await response.json()) === "unpaired";
+			} catch {
+				return false;
+			}
+		}
+		/**
+		* Wrap a prototype `src` setter so fenced same-origin URLs ride `/remote`.
+		* No-ops when the constructor is missing or `src` is not configurable.
+		*/
+		function patchSrcAccessor(ctor, rewrite) {
+			if (ctor === void 0) return () => {};
+			const descriptor = Object.getOwnPropertyDescriptor(ctor.prototype, "src");
+			if (descriptor === void 0 || descriptor.configurable === false) return () => {};
+			if (descriptor.set === void 0) return () => {};
+			const originalSet = descriptor.set;
+			const originalGet = descriptor.get;
+			Object.defineProperty(ctor.prototype, "src", {
+				configurable: true,
+				enumerable: descriptor.enumerable ?? true,
+				get: originalGet,
+				set(value) {
+					originalSet.call(this, rewrite(String(value)));
+				}
+			});
+			return () => {
+				Object.defineProperty(ctor.prototype, "src", descriptor);
+			};
+		}
+		/**
+		* Patch `fetch`, `EventSource`, `WebSocket`, and resource `src` accessors on
+		* one window to route fenced traffic through the gated channel.
+		* @param window - the browser window (or a test double).
+		* @param options - the unpaired callback.
+		* @returns a function restoring the originals.
+		*/
+		function installRemoteChannel(window, options = {}) {
+			const originalFetch = window.fetch;
+			const OriginalWebSocket = window.WebSocket;
+			const OriginalEventSource = window.EventSource;
+			const sameOrigin = (url) => url.origin === window.location.origin;
+			const rewrite = (raw) => rewriteRawUrl(raw, window.location.href, window.location.origin);
+			const patchedFetch = (input, init) => {
+				const url = new URL(typeof input === "string" || input instanceof URL ? input.toString() : input.url, window.location.href);
+				if (sameOrigin(url) && shouldRewriteFetchPath(url.pathname)) {
+					const rewritten = new URL(url);
+					rewritten.pathname = rewritePath(url.pathname);
+					const next = typeof input === "string" || input instanceof URL ? rewritten.toString() : new Request(rewritten, input);
+					return Promise.resolve(originalFetch.call(window, next, init)).then(async (response) => {
+						if (await isUnpairedDenied(response.clone())) options.onUnpaired?.();
+						else options.onPaired?.();
+						return response;
+					});
+				}
+				return originalFetch.call(window, input, init);
+			};
+			class PatchedWebSocket extends OriginalWebSocket {
+				constructor(url, protocols) {
+					const parsed = new URL(url.toString(), window.location.href);
+					const wsOrigin = parsed.protocol === "wss:" ? `https://${parsed.host}` : parsed.protocol === "ws:" ? `http://${parsed.host}` : "";
+					if (wsOrigin !== "" && wsOrigin === window.location.origin && shouldRewriteWsPath(parsed.pathname)) {
+						const rewritten = new URL(parsed);
+						rewritten.pathname = rewritePath(parsed.pathname);
+						super(rewritten, protocols);
+						return;
+					}
+					super(url, protocols);
+				}
+			}
+			const restoreSrc = [
+				patchSrcAccessor(window.HTMLImageElement, rewrite),
+				patchSrcAccessor(window.HTMLScriptElement, rewrite),
+				patchSrcAccessor(window.HTMLIFrameElement, rewrite)
+			];
+			window.fetch = patchedFetch;
+			window.WebSocket = PatchedWebSocket;
+			if (OriginalEventSource !== void 0) {
+				class PatchedEventSource extends OriginalEventSource {
+					constructor(url, eventSourceInitDict) {
+						const parsed = new URL(url.toString(), window.location.href);
+						if (sameOrigin(parsed) && shouldRewriteFetchPath(parsed.pathname)) {
+							const rewritten = new URL(parsed);
+							rewritten.pathname = rewritePath(parsed.pathname);
+							super(rewritten, eventSourceInitDict);
+							return;
+						}
+						super(url, eventSourceInitDict);
+					}
+				}
+				window.EventSource = PatchedEventSource;
+			}
+			return () => {
+				window.fetch = originalFetch;
+				window.WebSocket = OriginalWebSocket;
+				if (OriginalEventSource !== void 0) window.EventSource = OriginalEventSource;
+				for (const restore of restoreSrc) restore();
+			};
+		}
+		//#endregion
+		//#region src/client/FenceNotice.tsx
+		/**
+		* Render the unpaired blocking page.
+		* @param props - localized copy.
+		* @returns the notice element.
+		*/
+		function FenceNotice({ t, onRetry }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: remote_module_css_default.fencePage,
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": "remote-fence-title",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("main", {
+					className: remote_module_css_default.fenceCard,
+					"data-dsh-plugin": "remote-web-ui",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: remote_module_css_default.fenceMark,
+							"aria-hidden": "true",
+							children: "×"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: remote_module_css_default.fenceEyebrow,
+							children: t("fence.unpaired.eyebrow")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+							id: "remote-fence-title",
+							className: remote_module_css_default.fenceTitle,
+							children: t("fence.unpaired.title")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: remote_module_css_default.fenceDetail,
+							children: t("fence.unpaired.hint")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ol", {
+							className: remote_module_css_default.fenceSteps,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: t("fence.unpaired.stepDesktop") }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: t("fence.unpaired.stepLink") }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: t("fence.unpaired.stepOpen") })
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							className: remote_module_css_default.fenceRetry,
+							type: "button",
+							onClick: onRetry,
+							children: t("fence.unpaired.retry")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: remote_module_css_default.fenceFootnote,
+							children: t("fence.unpaired.footnote")
+						})
+					]
+				})
+			});
+		}
+		//#endregion
 		//#region src/client/index.ts
 		/**
 		* Mobile remote control — browser half. Registers the `remote` dictionaries,
@@ -3662,6 +4153,51 @@ window.__ModuleLoader__.load({
 			};
 			settingsScope.subscribe(syncRuntime);
 			syncRuntime();
+			let disposeChannel;
+			let fenceNotice;
+			const showFenceNotice = () => {
+				if (fenceNotice !== void 0) return;
+				const node = document.createElement("div");
+				document.body.appendChild(node);
+				const root = (0, react_dom_client.createRoot)(node);
+				root.render((0, react.createElement)(FenceNotice, {
+					t,
+					onRetry: () => {
+						window.location.reload();
+					}
+				}));
+				fenceNotice = {
+					unmount: () => {
+						root.unmount();
+						node.remove();
+					},
+					node
+				};
+			};
+			const hideFenceNotice = () => {
+				fenceNotice?.unmount();
+				fenceNotice = void 0;
+			};
+			const channelActive = () => {
+				if (isLoopbackHostname(window.location.hostname)) return false;
+				const snapshot = settingsScope.getSnapshot();
+				const value = snapshot.status === "ready" ? snapshot.value : void 0;
+				return (value?.enabled ?? true) && (value?.requirePairingForLan ?? true);
+			};
+			const syncChannel = () => {
+				if (channelActive() && disposeChannel === void 0) disposeChannel = ctx.effect(() => {
+					return installRemoteChannel(window, {
+						onUnpaired: showFenceNotice,
+						onPaired: hideFenceNotice
+					});
+				}, "remote-web-ui: remote desktop channel");
+				else if (!channelActive() && disposeChannel !== void 0) {
+					disposeChannel();
+					disposeChannel = void 0;
+				}
+			};
+			settingsScope.subscribe(syncChannel);
+			syncChannel();
 			ctx.effect(() => {
 				const timer = window.setTimeout(() => {
 					if (sessionStorage.getItem("dsh-remote-pair-failed") === null) return;