dsh-mobile 0.1.4 → 0.2.0

package/lib/client.js

@@ -87,6 +87,9 @@ window.__ModuleLoader__.load({
   [data-dsh-mobile-center] pre { max-width:100%; overflow-x:auto; }
   [data-dsh-mobile-center] :is(img,video,canvas,svg) { max-width:100%; }
   [data-dsh-mobile-message-scroll] { box-sizing:border-box !important; width:100% !important; padding:8px 10px 20px !important; }
+  [data-dsh-mobile-history-loader] { position:relative !important; min-height:1px !important; }
+  [data-dsh-mobile-history-loader] button:not(:disabled) { position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important; padding:0 !important; clip-path:inset(50%) !important; opacity:0 !important; overflow:hidden !important; pointer-events:none !important; }
+  [data-dsh-mobile-history-loader] button:disabled { min-height:28px !important; padding:4px 12px !important; }
   [data-dsh-mobile-message-column] { box-sizing:border-box !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; gap:10px !important; }
   [data-dsh-mobile-message-column] > * { width:100% !important; max-width:100% !important; }
   [data-dsh-mobile-message-column] [data-disclosure-row] { box-sizing:border-box !important; display:grid !important; grid-template-columns:16px minmax(0,1fr) !important; grid-auto-rows:auto !important; align-items:center !important; column-gap:6px !important; width:100% !important; height:auto !important; min-height:40px !important; padding:4px 0 !important; }
@@ -159,6 +162,11 @@ window.__ModuleLoader__.load({
 		function firstByClassSuffix(root, suffix) {
 			return Array.from(root.querySelectorAll("[class]")).find((element) => classToken(element, suffix));
 		}
+		const AUTO_HISTORY_THRESHOLD_PX = 64;
+		/** Whether a user-driven scroll moved upward into the automatic history-loading zone. */
+		function shouldAutoLoadEarlier(previousTop, currentTop) {
+			return currentTop <= AUTO_HISTORY_THRESHOLD_PX && currentTop < previousTop - .5;
+		}
 		/** Add mobile semantics without replacing feature trees. */
 		function installNativeMobileSurface() {
 			document.documentElement.classList.add("dsh-native-mobile-active");
@@ -213,6 +221,28 @@ window.__ModuleLoader__.load({
 			let transitionRestartFrame = 0;
 			let transitionTimer = 0;
 			let transitionTarget;
+			let historyScroller;
+			let historyPreviousTop = 0;
+			const historyLoadButton = () => {
+				return (historyScroller === void 0 ? void 0 : firstByClassSuffix(historyScroller, "_older"))?.querySelector("button") ?? void 0;
+			};
+			const onHistoryScroll = () => {
+				if (historyScroller === void 0) return;
+				const currentTop = Math.max(0, historyScroller.scrollTop);
+				const shouldLoad = shouldAutoLoadEarlier(historyPreviousTop, currentTop);
+				historyPreviousTop = currentTop;
+				if (!shouldLoad) return;
+				const button = historyLoadButton();
+				if (button === void 0 || button.disabled || button.getAttribute("aria-disabled") === "true") return;
+				button.click();
+			};
+			const bindHistoryScroller = (next) => {
+				if (historyScroller === next) return;
+				historyScroller?.removeEventListener("scroll", onHistoryScroll);
+				historyScroller = next;
+				historyPreviousTop = next?.scrollTop ?? 0;
+				historyScroller?.addEventListener("scroll", onHistoryScroll, { passive: true });
+			};
 			const animateNavigation = (event) => {
 				if (!(event.target instanceof Element)) return;
 				const trigger = event.target.closest("button,a,[role=\"tab\"],[aria-selected]");
@@ -254,13 +284,28 @@ window.__ModuleLoader__.load({
 				const center = frame === void 0 ? dedicatedCenter : firstByClassSuffix(frame, "_centerCol");
 				const details = frame === void 0 ? void 0 : firstByClassSuffix(frame, "_detailsCol");
 				const handle = frame === void 0 ? void 0 : firstByClassSuffix(frame, "_handle");
-				if (center === void 0) return;
+				if (center === void 0) {
+					bindHistoryScroller(void 0);
+					return;
+				}
 				if (center !== void 0) {
 					center.dataset.dshMobileCenter = "true";
 					center.querySelector("header")?.setAttribute("data-dsh-mobile-header", "true");
 					viewArea = firstByClassSuffix(center, "_viewArea");
 					if (viewArea !== void 0) viewArea.dataset.dshMobileView = "true";
 					const conversation = center.querySelector("[data-conversation-scroll]");
+					bindHistoryScroller(conversation ?? void 0);
+					const historyLoader = conversation === null ? void 0 : firstByClassSuffix(conversation, "_older");
+					if (historyLoader !== void 0) {
+						historyLoader.dataset.dshMobileHistoryLoader = "true";
+						historyLoader.setAttribute("aria-live", "polite");
+						const button = historyLoader.querySelector("button");
+						if (button !== null) {
+							button.tabIndex = -1;
+							if (button.disabled) button.removeAttribute("aria-hidden");
+							else button.setAttribute("aria-hidden", "true");
+						}
+					}
 					const messageColumn = conversation === null ? void 0 : firstByClassSuffix(conversation, "_column");
 					const messageScroll = messageColumn?.parentElement;
 					if (messageColumn !== void 0 && messageScroll !== null && messageScroll !== void 0 && classToken(messageScroll, "_scroll")) {
@@ -337,7 +382,11 @@ window.__ModuleLoader__.load({
 				childList: true,
 				subtree: true,
 				attributes: true,
-				attributeFilter: ["class", "style"]
+				attributeFilter: [
+					"class",
+					"style",
+					"disabled"
+				]
 			});
 			backdrop.addEventListener("click", () => {
 				if (sidebar?.dataset.open === "true") toggle?.click();
@@ -353,6 +402,7 @@ window.__ModuleLoader__.load({
 				if (transitionRestartFrame !== 0) cancelAnimationFrame(transitionRestartFrame);
 				if (transitionTimer !== 0) clearTimeout(transitionTimer);
 				transitionTarget?.removeAttribute("data-dsh-mobile-view-transition");
+				historyScroller?.removeEventListener("scroll", onHistoryScroll);
 				document.removeEventListener("pointerdown", onPointerDown, true);
 				document.removeEventListener("keydown", onKeyDown, true);
 				document.removeEventListener("click", animateNavigation);
@@ -406,6 +456,19 @@ window.__ModuleLoader__.load({
 			if (!response.ok) throw new Error(typeof body.error === "string" ? body.error : `HTTP ${String(response.status)}`);
 			return body;
 		}
+		function officialFunnelSetupUrl(value) {
+			if (typeof value !== "string" || value.length > 2048) return "";
+			let url;
+			try {
+				url = new URL(value);
+			} catch {
+				return "";
+			}
+			const normalized = url.toString().replace(/\/$/u, "");
+			if (normalized === "https://tailscale.com/s/no-funnel" || normalized === "https://tailscale.com/s/https") return normalized;
+			if (url.protocol !== "https:" || url.hostname !== "login.tailscale.com" || url.port !== "" || url.username !== "" || url.password !== "") return "";
+			return url.toString();
+		}
 		function installControl() {
 			const root = element("div", "dsh-mobile-control");
 			const panel = element("section", "dsh-mobile-control__panel");
@@ -418,6 +481,17 @@ window.__ModuleLoader__.load({
 			close.type = "button";
 			close.textContent = "×";
 			close.setAttribute("aria-label", "收起移动访问");
+			const switcher = element("div", "dsh-mobile-control__switcher");
+			const lanTab = element("button", "dsh-mobile-control__tab is-active");
+			lanTab.type = "button";
+			lanTab.textContent = "局域网";
+			const remoteTab = element("button", "dsh-mobile-control__tab");
+			remoteTab.type = "button";
+			remoteTab.textContent = "远程";
+			lanTab.setAttribute("aria-pressed", "true");
+			remoteTab.setAttribute("aria-pressed", "false");
+			switcher.append(lanTab, remoteTab);
+			const lanView = element("div", "dsh-mobile-control__view");
 			const access = element("div", "dsh-mobile-control__access");
 			access.hidden = true;
 			const accessLabel = element("span", "dsh-mobile-control__access-label");
@@ -451,13 +525,269 @@ window.__ModuleLoader__.load({
 			manageRow.append(manageDevices, resetAll);
 			const devicePanel = element("div", "dsh-mobile-control__devices");
 			devicePanel.hidden = true;
+			const remoteView = element("div", "dsh-mobile-control__view is-remote");
+			remoteView.hidden = true;
+			const remoteIntro = element("p", "dsh-mobile-control__intro");
+			remoteIntro.textContent = "选择更适合你的远程通道。切换或关闭远程访问不会影响局域网。";
+			const providerSection = element("section", "dsh-mobile-control__provider-section");
+			const providerHeading = element("h3", "dsh-mobile-control__section-title");
+			providerHeading.textContent = "选择连接方式";
+			const providerInfo = element("div", "dsh-mobile-control__provider-info");
+			const providerInfoButton = element("button", "dsh-mobile-control__provider-info-button");
+			providerInfoButton.type = "button";
+			providerInfoButton.setAttribute("aria-label", "查看远程连接安全与网络说明");
+			providerInfoButton.setAttribute("aria-expanded", "false");
+			providerInfoButton.setAttribute("aria-controls", "dsh-mobile-provider-info");
+			providerInfoButton.setAttribute("aria-describedby", "dsh-mobile-provider-info");
+			const providerInfoGlyph = element("span", "dsh-mobile-control__provider-info-glyph");
+			providerInfoGlyph.textContent = "i";
+			providerInfoGlyph.setAttribute("aria-hidden", "true");
+			const providerInfoPopover = element("div", "dsh-mobile-control__provider-info-popover");
+			providerInfoPopover.id = "dsh-mobile-provider-info";
+			providerInfoPopover.setAttribute("role", "tooltip");
+			providerInfoPopover.hidden = true;
+			const providerInfoTitle = element("strong");
+			providerInfoTitle.textContent = "你始终可以放心";
+			const providerInfoText = element("span");
+			providerInfoText.textContent = "只有已配对设备能进入 DSH。cpolar 按需安装并可彻底清理；Tailscale 在中国大陆网络下可能连接缓慢、中断或无法使用，国内网络建议优先尝试 cpolar。";
+			providerInfoButton.append(providerInfoGlyph);
+			providerInfoPopover.append(providerInfoTitle, providerInfoText);
+			providerInfo.append(providerInfoButton, providerInfoPopover);
+			const providerChoices = element("div", "dsh-mobile-control__provider-choices");
+			providerChoices.setAttribute("role", "radiogroup");
+			providerChoices.setAttribute("aria-label", "远程连接方式");
+			const tailscaleChoice = element("button", "dsh-mobile-control__provider");
+			tailscaleChoice.type = "button";
+			tailscaleChoice.setAttribute("role", "radio");
+			tailscaleChoice.setAttribute("aria-checked", "true");
+			const tailscaleChoiceTop = element("span", "dsh-mobile-control__provider-top");
+			const tailscaleChoiceName = element("strong");
+			tailscaleChoiceName.textContent = "Tailscale Funnel";
+			const tailscaleChoiceBadge = element("span", "dsh-mobile-control__provider-badge");
+			tailscaleChoiceBadge.textContent = "内置";
+			const tailscaleChoiceDescription = element("span", "dsh-mobile-control__provider-description");
+			tailscaleChoiceDescription.textContent = "覆盖更广；中国大陆网络可能不稳定，首次需登录并允许 Funnel。";
+			tailscaleChoiceTop.append(tailscaleChoiceName, tailscaleChoiceBadge);
+			tailscaleChoice.append(tailscaleChoiceTop, tailscaleChoiceDescription);
+			const cpolarChoice = element("button", "dsh-mobile-control__provider");
+			cpolarChoice.type = "button";
+			cpolarChoice.setAttribute("role", "radio");
+			cpolarChoice.setAttribute("aria-checked", "false");
+			const cpolarChoiceTop = element("span", "dsh-mobile-control__provider-top");
+			const cpolarChoiceName = element("strong");
+			cpolarChoiceName.textContent = "cpolar";
+			const cpolarChoiceBadge = element("span", "dsh-mobile-control__provider-badge is-cpolar");
+			cpolarChoiceBadge.textContent = "国内网络优先";
+			const cpolarChoiceDescription = element("span", "dsh-mobile-control__provider-description");
+			cpolarChoiceDescription.textContent = "按需安装官方组件，适合国内网络环境。";
+			cpolarChoiceTop.append(cpolarChoiceName, cpolarChoiceBadge);
+			cpolarChoice.append(cpolarChoiceTop, cpolarChoiceDescription);
+			providerChoices.append(tailscaleChoice, cpolarChoice);
+			providerSection.append(providerHeading, providerInfo, providerChoices);
+			const cpolarSetup = element("section", "dsh-mobile-control__cpolar-setup");
+			cpolarSetup.hidden = true;
+			const cpolarSetupTitle = element("h3", "dsh-mobile-control__section-title");
+			cpolarSetupTitle.textContent = "准备 cpolar";
+			const cpolarComponentStatus = element("p", "dsh-mobile-control__component-status");
+			cpolarComponentStatus.textContent = "正在检查组件…";
+			const cpolarInstall = element("button", "dsh-mobile-control__primary");
+			cpolarInstall.type = "button";
+			cpolarInstall.textContent = "安装官方组件";
+			const cpolarAccount = element("div", "dsh-mobile-control__cpolar-account");
+			cpolarAccount.hidden = true;
+			const cpolarAccountText = element("p", "dsh-mobile-control__component-note");
+			cpolarAccountText.textContent = "登录 cpolar 官网后复制 Authtoken。令牌只保存在本机插件私有目录，不会显示在页面或日志中。";
+			const cpolarAccountLinks = element("div", "dsh-mobile-control__link-row");
+			const cpolarSignup = element("a", "dsh-mobile-control__text-link");
+			cpolarSignup.href = "https://dashboard.cpolar.com/signup";
+			cpolarSignup.target = "_blank";
+			cpolarSignup.rel = "noopener noreferrer";
+			cpolarSignup.textContent = "注册 cpolar";
+			const cpolarDashboard = element("a", "dsh-mobile-control__text-link");
+			cpolarDashboard.href = "https://dashboard.cpolar.com/auth";
+			cpolarDashboard.target = "_blank";
+			cpolarDashboard.rel = "noopener noreferrer";
+			cpolarDashboard.textContent = "打开控制台获取令牌";
+			cpolarAccountLinks.append(cpolarSignup, cpolarDashboard);
+			const cpolarTokenLabel = element("label", "dsh-mobile-control__token-label");
+			cpolarTokenLabel.textContent = "Authtoken";
+			const cpolarToken = element("input", "dsh-mobile-control__token");
+			cpolarToken.type = "password";
+			cpolarToken.autocomplete = "off";
+			cpolarToken.spellcheck = false;
+			cpolarToken.placeholder = "粘贴 cpolar Authtoken";
+			cpolarTokenLabel.append(cpolarToken);
+			const cpolarConfigure = element("button", "dsh-mobile-control__primary dsh-mobile-control__cpolar-connect");
+			cpolarConfigure.type = "button";
+			cpolarConfigure.textContent = "保存并连接";
+			cpolarAccount.append(cpolarAccountText, cpolarAccountLinks, cpolarTokenLabel, cpolarConfigure);
+			const cpolarDetails = element("details", "dsh-mobile-control__details");
+			const cpolarDetailsSummary = element("summary");
+			cpolarDetailsSummary.textContent = "组件来源与清理说明";
+			const cpolarDetailsBody = element("div", "dsh-mobile-control__details-body");
+			const cpolarDetailsText = element("p");
+			cpolarDetailsText.textContent = "仅在你点击安装后从 cpolar 官网下载并校验固定版本。不会写入系统服务、开机启动、注册表或 PATH。";
+			const cpolarStorage = element("code", "dsh-mobile-control__storage");
+			cpolarStorage.textContent = "插件私有目录";
+			const cpolarOfficial = element("a", "dsh-mobile-control__text-link");
+			cpolarOfficial.href = "https://www.cpolar.com/download";
+			cpolarOfficial.target = "_blank";
+			cpolarOfficial.rel = "noopener noreferrer";
+			cpolarOfficial.textContent = "官方下载安装页";
+			const cpolarTerms = element("a", "dsh-mobile-control__text-link");
+			cpolarTerms.href = "https://www.cpolar.com/tos";
+			cpolarTerms.target = "_blank";
+			cpolarTerms.rel = "noopener noreferrer";
+			cpolarTerms.textContent = "服务条款";
+			const cpolarPurge = element("button", "dsh-mobile-control__danger");
+			cpolarPurge.type = "button";
+			cpolarPurge.textContent = "彻底移除 cpolar 组件与配置";
+			cpolarDetailsBody.append(cpolarDetailsText, cpolarStorage, cpolarOfficial, cpolarTerms, cpolarPurge);
+			cpolarDetails.append(cpolarDetailsSummary, cpolarDetailsBody);
+			cpolarSetup.append(cpolarSetupTitle, cpolarComponentStatus, cpolarInstall, cpolarAccount, cpolarDetails);
+			const tailscaleInfo = element("details", "dsh-mobile-control__details");
+			const tailscaleInfoSummary = element("summary");
+			tailscaleInfoSummary.textContent = "Tailscale 使用说明";
+			const tailscaleInfoBody = element("div", "dsh-mobile-control__details-body");
+			const tailscaleInfoText = element("p");
+			tailscaleInfoText.textContent = "运行组件已随插件提供。首次连接会打开 Tailscale 官方登录和 Funnel 授权页；插件不会接触你的账号密码。";
+			tailscaleInfoBody.append(tailscaleInfoText);
+			tailscaleInfo.append(tailscaleInfoSummary, tailscaleInfoBody);
+			const remoteAccess = element("div", "dsh-mobile-control__access");
+			remoteAccess.hidden = true;
+			const remoteAccessLabel = element("span", "dsh-mobile-control__access-label");
+			remoteAccessLabel.textContent = "远程地址";
+			const remoteAccessLink = element("a", "dsh-mobile-control__access-link");
+			remoteAccessLink.target = "_blank";
+			remoteAccessLink.rel = "noreferrer";
+			remoteAccess.append(remoteAccessLabel, remoteAccessLink);
+			const remoteQr = element("div", "dsh-mobile-control__qr");
+			remoteQr.hidden = true;
+			const remoteStatus = element("p", "dsh-mobile-control__status");
+			remoteStatus.textContent = "正在读取远程状态…";
+			remoteStatus.setAttribute("aria-live", "polite");
+			const remoteGuide = element("section", "dsh-mobile-control__guide");
+			remoteGuide.hidden = true;
+			remoteGuide.setAttribute("aria-label", "Tailscale Funnel 启用步骤");
+			const remoteGuideTitle = element("h3", "dsh-mobile-control__guide-title");
+			remoteGuideTitle.textContent = "远程访问设置 · 第 2 步";
+			const remoteGuideSummary = element("p", "dsh-mobile-control__guide-summary");
+			remoteGuideSummary.textContent = "Tailscale 登录已完成。还需为这台电脑允许 Funnel，官方页面会同时启用 HTTPS。";
+			const remoteGuideSteps = element("ol", "dsh-mobile-control__guide-steps");
+			for (const text of [
+				"打开当前节点的 Tailscale 官方授权页。",
+				"确认启用 Funnel；无需再次登录 DSH。",
+				"返回 DSH，插件会自动检查并建立连接。"
+			]) {
+				const item = element("li");
+				item.textContent = text;
+				remoteGuideSteps.append(item);
+			}
+			const remoteGuideNote = element("p", "dsh-mobile-control__guide-note");
+			remoteGuideNote.textContent = "需要使用 Owner、Admin 或 Network admin 账号。";
+			const remoteGuideActions = element("div", "dsh-mobile-control__guide-actions");
+			const remoteSetup = element("button", "dsh-mobile-control__primary");
+			remoteSetup.type = "button";
+			remoteSetup.textContent = "继续完成 Funnel 授权";
+			const remoteSetupRetry = element("button", "dsh-mobile-control__secondary");
+			remoteSetupRetry.type = "button";
+			remoteSetupRetry.textContent = "已完成，立即重试";
+			remoteGuideActions.append(remoteSetup, remoteSetupRetry);
+			remoteGuide.append(remoteGuideTitle, remoteGuideSummary, remoteGuideSteps, remoteGuideNote, remoteGuideActions);
+			const remoteActions = element("div", "dsh-mobile-control__actions");
+			const remoteToggle = element("button", "dsh-mobile-control__primary");
+			remoteToggle.type = "button";
+			remoteToggle.textContent = "启用远程访问";
+			const remoteLogin = element("button", "dsh-mobile-control__primary");
+			remoteLogin.type = "button";
+			remoteLogin.textContent = "继续登录";
+			remoteLogin.hidden = true;
+			const remoteReconnect = element("button", "dsh-mobile-control__secondary");
+			remoteReconnect.type = "button";
+			remoteReconnect.textContent = "重新连接";
+			remoteReconnect.hidden = true;
+			const remotePair = element("button", "dsh-mobile-control__secondary");
+			remotePair.type = "button";
+			remotePair.textContent = "生成远程配对二维码";
+			remotePair.disabled = true;
+			remoteActions.append(remoteToggle, remoteLogin, remoteReconnect, remotePair);
+			const remoteManageRow = element("div", "dsh-mobile-control__manage-row");
+			const remoteDevices = element("button", "dsh-mobile-control__manage");
+			remoteDevices.type = "button";
+			remoteDevices.textContent = "管理远程设备";
+			remoteDevices.disabled = true;
+			const remoteReset = element("button", "dsh-mobile-control__manage");
+			remoteReset.type = "button";
+			remoteReset.textContent = "退出并清除远程登录";
+			remoteManageRow.append(remoteDevices, remoteReset);
+			const remoteDevicePanel = element("div", "dsh-mobile-control__devices");
+			remoteDevicePanel.hidden = true;
 			header.append(title, close);
 			actions.append(toggle, pair, linkPair);
-			panel.append(header, access, qrBox, status, extensionStatus, actions, manageRow, devicePanel);
+			lanView.append(access, qrBox, status, extensionStatus, actions, manageRow, devicePanel);
+			remoteView.append(remoteIntro, providerSection, cpolarSetup, tailscaleInfo, remoteAccess, remoteQr, remoteStatus, remoteGuide, remoteActions, remoteManageRow, remoteDevicePanel);
+			panel.append(header, switcher, lanView, remoteView);
 			root.append(panel);
 			document.body.append(root);
 			let running = false;
 			let origin = "";
+			let remoteRunning = false;
+			let remoteReady = false;
+			let remoteProvider = "tailscale";
+			let remoteLoginUrl = "";
+			let remoteSetupUrl = "";
+			let remoteSetupPending = false;
+			let remoteSetupOpenedAt = 0;
+			let remoteReconnectBusy = false;
+			let remoteProviderBusy = false;
+			let cpolarInstalled = false;
+			let cpolarConfigured = false;
+			let providerInfoPinned = false;
+			let providerInfoHovered = false;
+			const syncProviderInfo = () => {
+				const open = providerInfoPinned || providerInfoHovered || providerInfo.contains(document.activeElement);
+				providerInfoPopover.hidden = !open;
+				providerInfoButton.setAttribute("aria-expanded", String(open));
+			};
+			providerInfo.addEventListener("pointerenter", () => {
+				providerInfoHovered = true;
+				syncProviderInfo();
+			});
+			providerInfo.addEventListener("pointerleave", () => {
+				providerInfoHovered = false;
+				syncProviderInfo();
+			});
+			providerInfo.addEventListener("focusin", syncProviderInfo);
+			providerInfo.addEventListener("focusout", () => {
+				window.setTimeout(syncProviderInfo, 0);
+			});
+			providerInfoButton.addEventListener("click", () => {
+				providerInfoPinned = !providerInfoPinned;
+				syncProviderInfo();
+			});
+			providerInfoButton.addEventListener("keydown", (event) => {
+				if (event.key !== "Escape") return;
+				providerInfoPinned = false;
+				providerInfoHovered = false;
+				providerInfoPopover.hidden = true;
+				providerInfoButton.setAttribute("aria-expanded", "false");
+			});
+			const selectView = (remote) => {
+				lanView.hidden = remote;
+				remoteView.hidden = !remote;
+				lanTab.classList.toggle("is-active", !remote);
+				remoteTab.classList.toggle("is-active", remote);
+				lanTab.setAttribute("aria-pressed", String(!remote));
+				remoteTab.setAttribute("aria-pressed", String(remote));
+				title.textContent = remote ? "远程访问" : "局域网访问";
+			};
+			lanTab.addEventListener("click", () => {
+				selectView(false);
+			});
+			remoteTab.addEventListener("click", () => {
+				selectView(true);
+				loadRemote();
+			});
 			const setOpen = (open) => {
 				panel.hidden = !open;
 				for (const trigger of document.querySelectorAll(".dsh-mobile-control__trigger")) trigger.setAttribute("aria-expanded", String(open));
@@ -470,7 +800,7 @@ window.__ModuleLoader__.load({
 				accessLink.textContent = origin;
 				accessLink.title = origin;
 				status.classList.toggle("is-running", running);
-				status.textContent = running ? "移动访问已开启。" : "已关闭。DSH 仍只在本机可用。";
+				status.textContent = running ? "局域网访问已开启。" : "局域网访问已关闭。";
 				const extensionData = data.extensions;
 				if (extensionData !== null && typeof extensionData === "object") {
 					const loaded = typeof extensionData.loaded === "number" ? extensionData.loaded : 0;
@@ -479,16 +809,16 @@ window.__ModuleLoader__.load({
 					extensionStatus.textContent = failed === 0 ? `扩展：${String(loaded)} 个已加载` : `扩展：${String(loaded)} 个已加载，${String(failed)} 个加载失败`;
 				} else extensionStatus.hidden = true;
 				if (!running) qrBox.hidden = true;
-				toggle.textContent = running ? "关闭移动访问" : "开启移动访问";
+				toggle.textContent = running ? "关闭局域网访问" : "开启局域网访问";
 				pair.disabled = !running;
 				linkPair.disabled = !running;
 				manageDevices.disabled = !running;
 				resetAll.disabled = !running;
 			};
-			const showQr = (svg) => {
-				qrBox.replaceChildren();
+			const showQr = (svg, target = qrBox) => {
+				target.replaceChildren();
 				if (svg === "") {
-					qrBox.hidden = true;
+					target.hidden = true;
 					return;
 				}
 				const image = element("img");
@@ -496,11 +826,11 @@ window.__ModuleLoader__.load({
 				image.width = 176;
 				image.height = 176;
 				image.src = `data:image/svg+xml;base64,${btoa(svg)}`;
-				qrBox.hidden = false;
-				qrBox.append(image);
+				target.hidden = false;
+				target.append(image);
 			};
 			const openPairing = (target) => {
-				requestJson("/api/mobile-access/pairing/open", {
+				requestJson("/api/mobile-access/lan/pairing/open", {
 					method: "POST",
 					body: "{}"
 				}).then(async (data) => {
@@ -526,7 +856,7 @@ window.__ModuleLoader__.load({
 			};
 			toggle.addEventListener("click", () => {
 				toggle.disabled = true;
-				requestJson("/api/mobile-access/control", {
+				requestJson("/api/mobile-access/lan/control", {
 					method: "POST",
 					body: JSON.stringify({ running: !running })
 				}).then(render, (error) => {
@@ -556,7 +886,7 @@ window.__ModuleLoader__.load({
 					revoke.textContent = "撤销";
 					const id = typeof device.id === "string" ? device.id : "";
 					revoke.addEventListener("click", () => {
-						requestJson("/api/mobile-access/devices/revoke", {
+						requestJson("/api/mobile-access/lan/devices/revoke", {
 							method: "POST",
 							body: JSON.stringify({ deviceId: id })
 						}).then(loadDevices, (error) => {
@@ -568,7 +898,7 @@ window.__ModuleLoader__.load({
 				}
 			};
 			const loadDevices = () => {
-				requestJson("/api/mobile-access/devices").then(renderDevices, (error) => {
+				requestJson("/api/mobile-access/lan/devices").then(renderDevices, (error) => {
 					status.textContent = String(error);
 				});
 			};
@@ -579,13 +909,315 @@ window.__ModuleLoader__.load({
 			});
 			resetAll.addEventListener("click", () => {
 				if (!window.confirm("确定要移除所有配对设备吗？此操作会立即终止已连接设备。")) return;
-				requestJson("/api/mobile-access/devices/reset", {
+				requestJson("/api/mobile-access/lan/devices/reset", {
 					method: "POST",
 					body: JSON.stringify({ confirm: true })
 				}).then(loadDevices, (error) => {
 					status.textContent = String(error);
 				});
 			});
+			const renderRemote = (data) => {
+				remoteRunning = data.running === true;
+				remoteProvider = data.provider === "cpolar" ? "cpolar" : "tailscale";
+				const cpolar = remoteProvider === "cpolar";
+				tailscaleChoice.classList.toggle("is-selected", !cpolar);
+				cpolarChoice.classList.toggle("is-selected", cpolar);
+				tailscaleChoice.setAttribute("aria-checked", String(!cpolar));
+				cpolarChoice.setAttribute("aria-checked", String(cpolar));
+				tailscaleChoice.disabled = remoteProviderBusy;
+				cpolarChoice.disabled = remoteProviderBusy;
+				cpolarSetup.hidden = !cpolar;
+				tailscaleInfo.hidden = cpolar;
+				remoteReset.textContent = cpolar ? "关闭并清除远程设备" : "退出并清除远程登录";
+				const providers = data.providers !== null && typeof data.providers === "object" ? data.providers : {};
+				const cpolarProvider = providers.cpolar !== null && typeof providers.cpolar === "object" ? providers.cpolar : {};
+				const component = cpolarProvider.component !== null && typeof cpolarProvider.component === "object" ? cpolarProvider.component : {};
+				cpolarInstalled = component.installed === true;
+				cpolarConfigured = component.configured === true;
+				cpolarChoiceBadge.textContent = cpolarConfigured ? "已就绪" : cpolarInstalled ? "已安装" : "国内网络优先";
+				const cpolarSupported = component.supported !== false;
+				const componentVersion = typeof component.version === "string" ? component.version : "";
+				const componentDownloadBytes = typeof component.downloadBytes === "number" ? component.downloadBytes : 0;
+				const componentStorage = typeof component.storagePath === "string" ? component.storagePath : "DSH Mobile 插件私有目录";
+				cpolarStorage.textContent = componentStorage;
+				cpolarStorage.title = componentStorage;
+				cpolarInstall.hidden = cpolarInstalled || !cpolarSupported;
+				cpolarInstall.textContent = componentDownloadBytes > 0 ? `安装官方组件 · ${(componentDownloadBytes / 1024 / 1024).toFixed(1)} MB` : "安装官方组件";
+				cpolarInstall.disabled = remoteProviderBusy;
+				cpolarAccount.hidden = !cpolarInstalled || cpolarConfigured;
+				cpolarConfigure.disabled = remoteProviderBusy;
+				cpolarPurge.hidden = !cpolarInstalled && !cpolarConfigured;
+				cpolarComponentStatus.textContent = !cpolarSupported ? "当前仅支持 Windows x64。你仍可选择内置的 Tailscale Funnel。" : !cpolarInstalled ? "尚未安装。只有点击下方按钮后，才会从 cpolar 官网下载固定版本。" : !cpolarConfigured ? `官方组件 ${componentVersion} 已校验，下一步只需保存账号令牌。` : `官方组件 ${componentVersion} 与本机账号配置已就绪。`;
+				const state = typeof data.state === "string" ? data.state : "error";
+				const errorCode = typeof data.errorCode === "string" ? data.errorCode : "";
+				const remoteOrigin = typeof data.origin === "string" ? data.origin : "";
+				remoteLoginUrl = typeof data.loginUrl === "string" ? data.loginUrl : "";
+				const candidateSetupUrl = cpolar ? "" : officialFunnelSetupUrl(data.setupUrl);
+				remoteSetupUrl = candidateSetupUrl !== "" ? candidateSetupUrl : {
+					funnel_permission_required: "https://tailscale.com/s/no-funnel",
+					funnel_https_required: "https://tailscale.com/s/https",
+					funnel_start_failed: "https://tailscale.com/s/no-funnel"
+				}[errorCode] ?? "";
+				const needsFunnelSetup = state === "error" && remoteSetupUrl !== "";
+				remoteReady = remoteRunning && state === "ready" && remoteOrigin !== "";
+				remoteAccess.hidden = !remoteReady;
+				remoteAccessLink.href = remoteOrigin;
+				remoteAccessLink.textContent = remoteOrigin;
+				remoteAccessLink.title = remoteOrigin;
+				remoteStatus.classList.toggle("is-running", remoteReady);
+				const labels = {
+					off: "远程访问未启用。局域网访问不受影响。",
+					unavailable: cpolar ? "cpolar 尚未安装或未完成本机账号配置。" : "当前电脑缺少 Funnel 运行组件，请重新安装完整插件包。",
+					starting: cpolar ? "正在连接 cpolar 国内节点…" : "正在启动 Tailscale 安全通道…",
+					"needs-login": "需要在浏览器完成一次 Tailscale 登录。插件不会读取你的密码。",
+					connecting: cpolar ? "公网地址已分配，正在启动 DSH 认证网关…" : "登录完成，正在建立公开 HTTPS 地址…",
+					ready: "远程访问已就绪。只有已配对设备可以进入 DSH。",
+					error: "远程连接未建立。可重新连接，局域网访问仍可正常使用。"
+				};
+				remoteStatus.textContent = remoteSetupPending && needsFunnelSetup ? "Tailscale 官方页面已打开。完成启用后返回 DSH，这里会自动重新连接。" : state === "error" ? {
+					funnel_permission_required: "登录已完成。请继续授权 Funnel，完成后会自动建立远程连接。",
+					funnel_https_required: "登录已完成。请继续授权 Funnel，官方页面会同时启用 HTTPS。",
+					funnel_start_failed: "登录已完成。请继续完成 Tailscale Funnel 的首次授权。",
+					tailscale_dns_missing: "Tailscale 暂未提供远程地址。请重新连接并确认已完成登录。",
+					gateway_start_failed: "远程网关启动失败。请重新连接，局域网访问不受影响。",
+					control_channel_failed: "远程组件连接中断。请重新连接。",
+					cpolar_component_missing: "cpolar 官方组件尚未安装。请先完成上方准备步骤。",
+					cpolar_component_invalid: "cpolar 组件校验失败。请彻底移除后重新安装。",
+					cpolar_config_missing: "cpolar 尚未保存账号令牌。请先完成上方准备步骤。",
+					cpolar_config_invalid: "cpolar 本机配置无效。请重新保存账号令牌。",
+					cpolar_port_unavailable: "无法分配本机远程网关端口，请重试。",
+					cpolar_launch_failed: "cpolar 客户端未能启动。",
+					cpolar_start_timeout: "连接 cpolar 国内节点超时，请重新连接。",
+					cpolar_stopped: "cpolar 连接已停止。",
+					cpolar_exited: "cpolar 连接意外退出，请重新连接。",
+					cpolar_invalid_output: "cpolar 返回了无法识别的状态。",
+					cpolar_invalid_origin: "cpolar 返回的公网地址未通过校验。"
+				}[errorCode] ?? labels.error : labels[state] ?? labels.error;
+				remoteGuide.hidden = !needsFunnelSetup;
+				remoteSetup.disabled = remoteSetupUrl === "" || remoteReconnectBusy;
+				remoteSetupRetry.disabled = remoteReconnectBusy;
+				remoteToggle.textContent = remoteRunning ? "关闭远程访问" : "启用远程访问";
+				remoteToggle.disabled = remoteProviderBusy || cpolar && (!cpolarInstalled || !cpolarConfigured);
+				remoteLogin.hidden = cpolar || state !== "needs-login" || remoteLoginUrl === "";
+				remoteReconnect.hidden = needsFunnelSetup || state !== "error" && state !== "unavailable" || cpolar && (!cpolarInstalled || !cpolarConfigured);
+				remoteActions.hidden = cpolar && (!cpolarInstalled || !cpolarConfigured);
+				remotePair.disabled = !remoteReady;
+				remoteDevices.disabled = !remoteReady;
+				if (!remoteReady) remoteQr.hidden = true;
+				if (!needsFunnelSetup) remoteSetupPending = false;
+			};
+			const loadRemote = () => {
+				requestJson("/api/mobile-access/remote/control").then(renderRemote, (error) => {
+					remoteStatus.textContent = String(error);
+				});
+			};
+			const chooseRemoteProvider = (provider) => {
+				if (remoteProviderBusy || provider === remoteProvider) return;
+				if (remoteRunning && !window.confirm("切换连接方式会先关闭当前远程通道。局域网和配对设备不会受影响，是否继续？")) return;
+				remoteProviderBusy = true;
+				tailscaleChoice.disabled = true;
+				cpolarChoice.disabled = true;
+				remoteStatus.textContent = provider === "cpolar" ? "正在切换到 cpolar…" : "正在切换到 Tailscale Funnel…";
+				requestJson("/api/mobile-access/remote/provider", {
+					method: "POST",
+					body: JSON.stringify({ provider })
+				}).then(renderRemote, (error) => {
+					remoteStatus.textContent = String(error);
+				}).finally(() => {
+					remoteProviderBusy = false;
+					loadRemote();
+				});
+			};
+			tailscaleChoice.addEventListener("click", () => {
+				chooseRemoteProvider("tailscale");
+			});
+			cpolarChoice.addEventListener("click", () => {
+				chooseRemoteProvider("cpolar");
+			});
+			cpolarInstall.addEventListener("click", () => {
+				if (remoteProviderBusy) return;
+				if (!window.confirm("将从 cpolar 官方网站下载并校验固定版本（约 7.3 MB），仅解压到 DSH Mobile 私有目录。不会安装系统服务、写入 PATH/注册表或设置开机启动。是否继续？")) return;
+				remoteProviderBusy = true;
+				cpolarInstall.disabled = true;
+				cpolarInstall.textContent = "正在下载并校验…";
+				remoteStatus.textContent = "正在安装 cpolar 官方组件。完成前请保持 DSH 运行。";
+				requestJson("/api/mobile-access/remote/cpolar/component/install", {
+					method: "POST",
+					body: JSON.stringify({ confirm: true })
+				}).then(renderRemote, (error) => {
+					remoteStatus.textContent = `组件安装失败：${String(error)}`;
+				}).finally(() => {
+					remoteProviderBusy = false;
+					loadRemote();
+				});
+			});
+			cpolarConfigure.addEventListener("click", () => {
+				if (remoteProviderBusy) return;
+				const authtoken = cpolarToken.value.trim();
+				if (authtoken.length < 20 || /\s/u.test(authtoken)) {
+					remoteStatus.textContent = "请粘贴 cpolar 控制台提供的完整 Authtoken。";
+					cpolarToken.focus();
+					return;
+				}
+				remoteProviderBusy = true;
+				cpolarConfigure.disabled = true;
+				cpolarConfigure.setAttribute("aria-busy", "true");
+				cpolarConfigure.textContent = "正在保存…";
+				requestJson("/api/mobile-access/remote/cpolar/configure", {
+					method: "POST",
+					body: JSON.stringify({ authtoken })
+				}).then(() => {
+					cpolarToken.value = "";
+					remoteStatus.textContent = "账号配置已保存，正在建立 cpolar 远程通道…";
+					return requestJson("/api/mobile-access/remote/control", {
+						method: "POST",
+						body: JSON.stringify({ running: true })
+					});
+				}).then(renderRemote, (error) => {
+					remoteStatus.textContent = `配置失败：${String(error)}`;
+				}).finally(() => {
+					remoteProviderBusy = false;
+					cpolarConfigure.setAttribute("aria-busy", "false");
+					cpolarConfigure.textContent = "保存并连接";
+					loadRemote();
+				});
+			});
+			cpolarPurge.addEventListener("click", () => {
+				if (remoteProviderBusy) return;
+				if (!window.confirm("彻底移除 DSH Mobile 私有目录中的 cpolar 组件、令牌配置和运行日志？不会影响局域网、DSH 数据或系统中的其他程序。")) return;
+				remoteProviderBusy = true;
+				cpolarPurge.disabled = true;
+				remoteStatus.textContent = "正在关闭通道并清理 DSH Mobile 管理的 cpolar 文件…";
+				requestJson("/api/mobile-access/remote/cpolar/component/purge", {
+					method: "POST",
+					body: JSON.stringify({ confirm: true })
+				}).then(renderRemote, (error) => {
+					remoteStatus.textContent = `清理失败：${String(error)}`;
+				}).finally(() => {
+					remoteProviderBusy = false;
+					cpolarPurge.disabled = false;
+					loadRemote();
+				});
+			});
+			remoteToggle.addEventListener("click", () => {
+				remoteToggle.disabled = true;
+				requestJson("/api/mobile-access/remote/control", {
+					method: "POST",
+					body: JSON.stringify({ running: !remoteRunning })
+				}).then(renderRemote, (error) => {
+					remoteStatus.textContent = String(error);
+				}).finally(loadRemote);
+			});
+			remoteLogin.addEventListener("click", () => {
+				if (remoteLoginUrl !== "") window.open(remoteLoginUrl, "_blank", "noopener,noreferrer");
+			});
+			const reconnectRemote = () => {
+				if (remoteReconnectBusy) return;
+				remoteReconnectBusy = true;
+				remoteReconnect.disabled = true;
+				remoteSetup.disabled = true;
+				remoteSetupRetry.disabled = true;
+				remoteStatus.textContent = remoteProvider === "cpolar" ? "正在重新连接 cpolar 国内节点…" : "正在确认 Tailscale 设置并重新连接…";
+				requestJson("/api/mobile-access/remote/reconnect", {
+					method: "POST",
+					body: "{}"
+				}).then(renderRemote, (error) => {
+					remoteStatus.textContent = String(error);
+				}).finally(() => {
+					remoteReconnectBusy = false;
+					remoteReconnect.disabled = false;
+					remoteSetup.disabled = remoteSetupUrl === "";
+					remoteSetupRetry.disabled = false;
+				});
+			};
+			remoteReconnect.addEventListener("click", reconnectRemote);
+			remoteSetupRetry.addEventListener("click", () => {
+				remoteSetupPending = false;
+				reconnectRemote();
+			});
+			remoteSetup.addEventListener("click", () => {
+				if (remoteSetupUrl === "") return;
+				remoteSetupPending = true;
+				remoteSetupOpenedAt = Date.now();
+				remoteStatus.textContent = "Tailscale 官方页面已打开。完成启用后返回 DSH，这里会自动重新连接。";
+				window.open(remoteSetupUrl, "_blank", "noopener,noreferrer");
+			});
+			const retryAfterSetup = () => {
+				if (!remoteSetupPending || document.visibilityState === "hidden" || Date.now() - remoteSetupOpenedAt < 800) return;
+				remoteSetupPending = false;
+				reconnectRemote();
+			};
+			window.addEventListener("focus", retryAfterSetup);
+			document.addEventListener("visibilitychange", retryAfterSetup);
+			remotePair.addEventListener("click", () => {
+				remotePair.disabled = true;
+				requestJson("/api/mobile-access/remote/pairing/open", {
+					method: "POST",
+					body: "{}"
+				}).then(async (data) => {
+					const pairUrl = typeof data.pairUrl === "string" ? data.pairUrl : "";
+					showQr(typeof data.qrSvg === "string" ? data.qrSvg : "", remoteQr);
+					if (pairUrl !== "") try {
+						await navigator.clipboard.writeText(pairUrl);
+					} catch {}
+					remoteStatus.textContent = "远程配对二维码已生成。请在 App 的“远程访问”中扫描。";
+				}, (error) => {
+					remoteStatus.textContent = String(error);
+				}).finally(() => {
+					remotePair.disabled = !remoteReady;
+				});
+			});
+			const renderRemoteDevices = (data) => {
+				const devices = Array.isArray(data.devices) ? data.devices : [];
+				remoteDevicePanel.replaceChildren();
+				if (devices.length === 0) {
+					const empty = element("p", "dsh-mobile-control__device-empty");
+					empty.textContent = "暂无远程配对设备。";
+					remoteDevicePanel.append(empty);
+					return;
+				}
+				for (const device of devices) {
+					const row = element("div", "dsh-mobile-control__device");
+					const label = element("span", "dsh-mobile-control__device-label");
+					label.textContent = typeof device.label === "string" ? device.label : "设备";
+					const meta = element("span", "dsh-mobile-control__device-meta");
+					meta.textContent = `到期 ${formatTime(device.expiresAt)}`;
+					const revoke = element("button", "dsh-mobile-control__device-revoke");
+					revoke.type = "button";
+					revoke.textContent = "撤销";
+					const id = typeof device.id === "string" ? device.id : "";
+					revoke.addEventListener("click", () => {
+						requestJson("/api/mobile-access/remote/devices/revoke", {
+							method: "POST",
+							body: JSON.stringify({ deviceId: id })
+						}).then(loadRemoteDevices, (error) => {
+							remoteStatus.textContent = String(error);
+						});
+					});
+					row.append(label, meta, revoke);
+					remoteDevicePanel.append(row);
+				}
+			};
+			const loadRemoteDevices = () => {
+				requestJson("/api/mobile-access/remote/devices").then(renderRemoteDevices, (error) => {
+					remoteStatus.textContent = String(error);
+				});
+			};
+			remoteDevices.addEventListener("click", () => {
+				const show = remoteDevicePanel.hidden;
+				remoteDevicePanel.hidden = !show;
+				if (show) loadRemoteDevices();
+			});
+			remoteReset.addEventListener("click", () => {
+				const prompt = remoteProvider === "cpolar" ? "关闭 cpolar 远程通道并移除所有远程配对设备？不会修改你的 cpolar 账号或其他隧道。" : "退出电脑上的 Tailscale 登录并移除所有远程配对设备？局域网配置不会改变。";
+				if (!window.confirm(prompt)) return;
+				requestJson("/api/mobile-access/remote/reset", {
+					method: "POST",
+					body: JSON.stringify({ confirm: true })
+				}).then(renderRemote, (error) => {
+					remoteStatus.textContent = String(error);
+				});
+			});
 			pair.addEventListener("click", () => {
 				pair.disabled = true;
 				openPairing("key");
@@ -599,14 +1231,26 @@ window.__ModuleLoader__.load({
 			});
 			const dismiss = (event) => {
 				if (panel.hidden || !(event.target instanceof Node)) return;
+				if (!providerInfo.contains(event.target)) {
+					providerInfoPinned = false;
+					providerInfoHovered = false;
+					syncProviderInfo();
+				}
 				if (!panel.contains(event.target) && !document.querySelector(".dsh-mobile-control__trigger")?.contains(event.target)) setOpen(false);
 			};
 			document.addEventListener("pointerdown", dismiss);
-			requestJson("/api/mobile-access/control").then(render, (error) => {
+			requestJson("/api/mobile-access/lan/control").then(render, (error) => {
 				status.textContent = String(error);
 			});
+			loadRemote();
+			const remotePoll = window.setInterval(() => {
+				if (!panel.hidden && !remoteView.hidden) loadRemote();
+			}, 1500);
 			return {
 				remove: () => {
+					window.clearInterval(remotePoll);
+					window.removeEventListener("focus", retryAfterSetup);
+					document.removeEventListener("visibilitychange", retryAfterSetup);
 					document.removeEventListener("pointerdown", dismiss);
 					root.remove();
 				},
@@ -1005,14 +1649,20 @@ window.__ModuleLoader__.load({
 		}
 		const CONTROL_STYLES = `
 .dsh-mobile-control{position:fixed;z-index:1000;left:16px;bottom:112px;font:14px/1.45 system-ui;color:var(--dsw-alias-label-primary,#16181d)}
-.dsh-mobile-control__panel{box-sizing:border-box;width:min(328px,calc(100vw - 32px));padding:16px;border:1px solid var(--dsw-alias-border-subtle,#e1e5eb);border-radius:18px;background:var(--dsw-alias-bg-layer-2,#fff);box-shadow:0 18px 50px rgb(15 23 42 / 18%)}
+.dsh-mobile-control__panel{box-sizing:border-box;width:min(380px,calc(100vw - 32px));max-height:calc(100vh - 140px);overflow-y:auto;padding:16px;border:1px solid var(--dsw-alias-border-subtle,#e1e5eb);border-radius:18px;background:var(--dsw-alias-bg-layer-2,#fff);box-shadow:0 18px 50px rgb(15 23 42 / 18%)}
 .dsh-mobile-control__header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.dsh-mobile-control__panel h2{margin:0;font-size:17px;line-height:24px}.dsh-mobile-control__close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:10px;background:transparent;color:inherit;font-size:24px;line-height:1;cursor:pointer}.dsh-mobile-control__close:hover{background:var(--dsw-alias-interactive-bg-hover,#f1f3f6)}
+.dsh-mobile-control__switcher{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 14px;padding:4px;border-radius:12px;background:var(--dsw-alias-bg-layer-1,#f3f5f8)}.dsh-mobile-control__tab{min-height:36px;border:0;border-radius:9px;background:transparent;color:var(--dsw-alias-label-secondary,#606873);font:600 13px/1 system-ui;cursor:pointer}.dsh-mobile-control__tab.is-active{background:var(--dsw-alias-bg-layer-2,#fff);color:var(--dsw-alias-label-primary,#16181d);box-shadow:0 1px 3px rgb(15 23 42 / 10%)}.dsh-mobile-control__view[hidden]{display:none}.dsh-mobile-control__intro{margin:0 0 12px;color:var(--dsw-alias-label-secondary,#606873);font-size:12px;line-height:1.55}.dsh-mobile-control__view.is-remote .dsh-mobile-control__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.dsh-mobile-control__view.is-remote .dsh-mobile-control__actions button[hidden]{display:none}
+.dsh-mobile-control__provider-section{position:relative;margin:0 0 12px}.dsh-mobile-control__section-title{margin:0 0 8px;color:var(--dsw-alias-label-primary,#16181d);font:650 13px/1.4 system-ui}.dsh-mobile-control__provider-section>.dsh-mobile-control__section-title{padding-right:42px}.dsh-mobile-control__provider-choices{display:grid;gap:8px}.dsh-mobile-control__provider{display:flex;flex-direction:column;gap:5px;min-height:68px;padding:11px 12px;border:1px solid var(--dsw-alias-border-subtle,#dbe1e8);border-radius:13px;background:#fff;color:inherit;text-align:left;cursor:pointer;transition:border-color 160ms ease,background-color 160ms ease,box-shadow 160ms ease}.dsh-mobile-control__provider:hover{border-color:#9fb9e8;background:#f8fbff}.dsh-mobile-control__provider.is-selected{border-color:#2563eb;background:#f5f8ff;box-shadow:0 0 0 1px #2563eb inset}.dsh-mobile-control__provider:disabled{cursor:wait;opacity:.62}.dsh-mobile-control__provider-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.dsh-mobile-control__provider-top strong{font-size:13px}.dsh-mobile-control__provider-badge{flex:none;padding:3px 7px;border-radius:999px;background:#e8f0ff;color:#1d4ed8;font:650 10px/1.2 system-ui}.dsh-mobile-control__provider-badge.is-cpolar{background:#eaf8f2;color:#087454}.dsh-mobile-control__provider-description{color:var(--dsw-alias-label-secondary,#606873);font-size:11px;line-height:1.45}.dsh-mobile-control__provider-info{position:absolute;z-index:5;top:-13px;right:-8px}.dsh-mobile-control__provider-info-button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:#475569;cursor:pointer;touch-action:manipulation}.dsh-mobile-control__provider-info-button:hover{background:#f1f5f9;color:#1d4ed8}.dsh-mobile-control__provider-info-glyph{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:18px;height:18px;border:1.5px solid currentColor;border-radius:50%;font:700 12px/1 system-ui}.dsh-mobile-control__provider-info-popover{position:absolute;z-index:6;top:38px;right:4px;box-sizing:border-box;width:min(292px,calc(100vw - 72px));padding:10px 12px;border:1px solid var(--dsw-alias-border-subtle,#dbe1e8);border-radius:12px;background:var(--dsw-alias-bg-layer-2,#fff);box-shadow:0 10px 28px rgb(15 23 42 / 16%)}.dsh-mobile-control__provider-info-popover[hidden]{display:none}.dsh-mobile-control__provider-info-popover strong,.dsh-mobile-control__provider-info-popover span{display:block}.dsh-mobile-control__provider-info-popover strong{margin-bottom:3px;font-size:12px}.dsh-mobile-control__provider-info-popover span{color:var(--dsw-alias-label-secondary,#606873);font-size:11px;line-height:1.55}
+.dsh-mobile-control__cpolar-setup{margin:0 0 12px;padding:12px;border:1px solid var(--dsw-alias-border-subtle,#dbe1e8);border-radius:13px;background:#fff}.dsh-mobile-control__cpolar-setup[hidden],.dsh-mobile-control__cpolar-account[hidden],.dsh-mobile-control__details[hidden],.dsh-mobile-control__view.is-remote .dsh-mobile-control__actions[hidden],.dsh-mobile-control__danger[hidden]{display:none}.dsh-mobile-control__component-status,.dsh-mobile-control__component-note{margin:0 0 10px;color:var(--dsw-alias-label-secondary,#606873);font-size:11px;line-height:1.55}.dsh-mobile-control__cpolar-setup>.dsh-mobile-control__primary{width:100%;min-height:44px;padding:9px 12px;border-radius:10px;font:600 12px/1.3 system-ui;cursor:pointer}.dsh-mobile-control__cpolar-account{margin-top:10px}.dsh-mobile-control__link-row{display:flex;flex-wrap:wrap;gap:6px 12px;margin:0 0 10px}.dsh-mobile-control__text-link{color:#2563eb;font-size:11px;text-decoration:none}.dsh-mobile-control__text-link:hover{text-decoration:underline}.dsh-mobile-control__token-label{display:flex;flex-direction:column;gap:5px;margin:0 0 8px;color:var(--dsw-alias-label-secondary,#606873);font-size:11px}.dsh-mobile-control__token{box-sizing:border-box;width:100%;min-height:44px;padding:9px 10px;border:1px solid var(--dsw-alias-border-normal,#cfd5dd);border-radius:10px;background:#fff;color:inherit;font:16px/1.4 system-ui}.dsh-mobile-control__cpolar-connect{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;min-height:44px;padding:10px 14px;border-radius:12px;font:650 13px/1.2 system-ui;cursor:pointer;transition:background-color 160ms ease,border-color 160ms ease,opacity 160ms ease}.dsh-mobile-control__cpolar-connect:hover:not(:disabled){border-color:#1d4ed8;background:#1d4ed8}.dsh-mobile-control__cpolar-connect:active:not(:disabled){border-color:#1e40af;background:#1e40af}.dsh-mobile-control__cpolar-connect:disabled{cursor:wait;opacity:.55}.dsh-mobile-control__details{margin:10px 0 0;border-top:1px solid var(--dsw-alias-border-subtle,#e1e5eb);padding-top:9px}.dsh-mobile-control__details>summary{min-height:30px;color:var(--dsw-alias-label-secondary,#606873);font-size:11px;line-height:30px;cursor:pointer}.dsh-mobile-control__details-body{display:flex;flex-wrap:wrap;align-items:center;gap:7px 12px;padding:4px 0}.dsh-mobile-control__details-body p{flex:1 0 100%;margin:0;color:var(--dsw-alias-label-secondary,#606873);font-size:11px;line-height:1.5}.dsh-mobile-control__storage{display:block;flex:1 0 100%;max-width:100%;overflow:hidden;padding:7px 8px;border-radius:8px;background:#f3f5f8;color:#475569;font:10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;text-overflow:ellipsis;white-space:nowrap}.dsh-mobile-control__danger{flex:1 0 100%;min-height:38px;margin-top:3px;padding:7px 10px;border:1px solid #dc2626;border-radius:9px;background:transparent;color:#b91c1c;font:12px/1.3 system-ui;cursor:pointer}
 .dsh-mobile-control__access{display:flex;align-items:baseline;gap:6px;min-width:0;margin:0 0 12px}.dsh-mobile-control__access[hidden]{display:none}.dsh-mobile-control__access-label{flex:none;color:var(--dsw-alias-label-secondary,#606873);white-space:nowrap}.dsh-mobile-control__access-label::after{content:"："}.dsh-mobile-control__access-link{min-width:0;overflow:hidden;color:#2563eb;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.dsh-mobile-control__access-link:hover{text-decoration:underline}.dsh-mobile-control__qr{display:flex;justify-content:center;margin:0 0 12px}.dsh-mobile-control__qr[hidden]{display:none}.dsh-mobile-control__qr img{border-radius:12px;background:#fff;padding:8px}
 .dsh-mobile-control__status{margin:0 0 14px;overflow-wrap:anywhere;color:var(--dsw-alias-label-secondary,#606873)}.dsh-mobile-control__status::before{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:#98a1ad;content:""}.dsh-mobile-control__status.is-running::before{background:#16a36a}.dsh-mobile-control__status.is-key{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;word-break:break-all}
+.dsh-mobile-control__guide{margin:0 0 14px;padding:12px;border:1px solid #bfdbfe;border-radius:12px;background:#eff6ff}.dsh-mobile-control__guide[hidden]{display:none}.dsh-mobile-control__guide-title{margin:0;color:#172554;font:650 13px/1.45 system-ui}.dsh-mobile-control__guide-summary,.dsh-mobile-control__guide-note{margin:4px 0 0;color:#475569;font-size:12px;line-height:1.5}.dsh-mobile-control__guide-steps{margin:8px 0 0;padding-left:20px;color:#1e293b;font-size:12px;line-height:1.6}.dsh-mobile-control__guide-note{color:#64748b}.dsh-mobile-control__guide-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.dsh-mobile-control__guide-actions button{min-width:0;min-height:44px;padding:8px;border-radius:10px;font:12px/1.25 system-ui;cursor:pointer}.dsh-mobile-control__guide-actions button:disabled{cursor:not-allowed;opacity:.45}
 .dsh-mobile-control__extensions{margin:0 0 12px;color:var(--dsw-alias-label-secondary,#606873);font-size:12px}
 .dsh-mobile-control__actions{display:flex;flex-wrap:nowrap;gap:6px}.dsh-mobile-control__actions button{flex:1 1 0;min-width:0;min-height:40px;padding:8px 4px;border-radius:10px;font:12px/1.2 system-ui;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dsh-mobile-control__secondary{border:1px solid var(--dsw-alias-border-normal,#cfd5dd);background:transparent;color:inherit}.dsh-mobile-control__primary{border:1px solid #2563eb;background:#2563eb;color:#fff}.dsh-mobile-control__actions button:disabled{cursor:not-allowed;opacity:.45}
+.dsh-mobile-control button:focus-visible,.dsh-mobile-control a:focus-visible,.dsh-mobile-control input:focus-visible,.dsh-mobile-control summary:focus-visible{outline:3px solid rgb(37 99 235 / 28%);outline-offset:2px}
 .dsh-mobile-control__trigger{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:calc(100% + 8px);height:34px;margin:4px -4px;padding:6px 2px 6px 10px;border:0;border-radius:12px;background:transparent;color:var(--dsw-alias-label-primary,#16181d);font:14px/22px system-ui;cursor:pointer}.dsh-mobile-control__trigger:hover{background:var(--dsw-alias-interactive-bg-hover,#f1f3f6)}.dsh-mobile-control__trigger.is-rail{width:36px;height:36px;margin:8px 0 10px;padding:0;justify-content:center;border-radius:50%}.dsh-mobile-control__trigger-icon{position:relative;box-sizing:border-box;flex:none;width:14px;height:19px;border:1.7px solid currentColor;border-radius:3px}.dsh-mobile-control__trigger-icon::after{position:absolute;right:4px;bottom:2px;width:4px;height:1.5px;border-radius:2px;background:currentColor;content:""}.dsh-mobile-control__trigger-label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 .dsh-mobile-control__manage-row{display:flex;justify-content:space-between;gap:8px;margin-top:10px}.dsh-mobile-control__manage{flex:1 1 0;min-width:0;min-height:34px;padding:6px 8px;border:1px solid var(--dsw-alias-border-normal,#cfd5dd);border-radius:10px;background:transparent;color:inherit;font:12px/1.3 system-ui;cursor:pointer}.dsh-mobile-control__devices{margin-top:10px;border:1px solid var(--dsw-alias-border-subtle,#e1e5eb);border-radius:10px;padding:8px;max-height:220px;overflow-y:auto}.dsh-mobile-control__device-empty{color:var(--dsw-alias-label-secondary,#606873);font-size:12px;margin:0}.dsh-mobile-control__device{display:flex;align-items:center;gap:8px;padding:6px 2px}.dsh-mobile-control__device + .dsh-mobile-control__device{border-top:1px solid var(--dsw-alias-border-subtle,#e1e5eb)}.dsh-mobile-control__device-label{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.dsh-mobile-control__device-meta{flex:none;color:var(--dsw-alias-label-secondary,#606873);font-size:11px;white-space:nowrap}.dsh-mobile-control__device-revoke{flex:none;min-height:28px;padding:4px 8px;border:1px solid #dc2626;border-radius:8px;background:transparent;color:#dc2626;font:12px/1.2 system-ui;cursor:pointer}
+@media (prefers-reduced-motion:reduce){.dsh-mobile-control__provider,.dsh-mobile-control__cpolar-connect{transition:none}}
 `;
 		/** Mount the desktop control or mobile feature enhancements. */
 		function apply(ctx) {