dsh-deeppilot 0.9.11 → 0.9.13

package/lib/client.js

@@ -46,6 +46,30 @@ window.__ModuleLoader__.load({
 			};
 		}
 		//#endregion
+		//#region src/tailscale-version.ts
+		/**
+		* 内嵌 helper 上报的 tailscale.com 模块版本。
+		*
+		* 版本的唯一来源是 helper 启动事件（`helper/main.go` 读 Go 构建信息里的
+		* `tailscale.com` 依赖版本），不是 go.mod、也不是插件常量：用户可能通过
+		* `remote.helperPath` 换成自己编译的 helper，界面必须显示实际在跑的那一个。
+		*
+		* 两条边界都要守卫：
+		* - 宿主侧 `parseHelperEvent` 把 helper 的 stdout 当成不可信输入，格式不对
+		*   就丢弃，避免把任意文本渲染进设置页；
+		* - 设置页侧 `reportSchema` 同样校验 Host RPC 返回值，旧 Host 不带该字段
+		*   时保持 undefined（页面显示「未获取」），不当作错误。
+		*
+		* 接受 Go 模块版本形态：`v1.104.2`、`v1.104.2-pre.1`、
+		* `v0.0.0-20260101000000-abcdef123456`。长度上限防止异常输入撑爆界面。
+		*/
+		const TAILSCALE_VERSION_PATTERN = /^v?\d+\.\d+\.\d+(?:[-+][0-9A-Za-z.-]{1,64})?$/;
+		const MAX_TAILSCALE_VERSION_LENGTH = 80;
+		/** 判断外部输入是否是合法的 Tailscale 模块版本字符串。 */
+		function isTailscaleVersion(value) {
+			return typeof value === "string" && value.length <= MAX_TAILSCALE_VERSION_LENGTH && TAILSCALE_VERSION_PATTERN.test(value);
+		}
+		//#endregion
 		//#region src/device-auth.ts
 		const DEVICE_SCOPES = [
 			"sessions.read",
@@ -144,15 +168,18 @@ window.__ModuleLoader__.load({
 			const publicURL = s.publicURL;
 			const authURL = s.authURL;
 			const message = s.message;
+			const tailscaleVersion = s.tailscaleVersion;
 			if (publicURL !== void 0 && typeof publicURL !== "string") reject("remote.publicURL");
 			if (authURL !== void 0 && typeof authURL !== "string") reject("remote.authURL");
 			if (message !== void 0 && typeof message !== "string") reject("remote.message");
+			if (tailscaleVersion !== void 0 && !isTailscaleVersion(tailscaleVersion)) reject("remote.tailscaleVersion");
 			return {
 				provider,
 				phase,
 				...typeof publicURL === "string" ? { publicURL } : {},
 				...typeof authURL === "string" ? { authURL } : {},
 				...typeof message === "string" ? { message } : {},
+				...typeof tailscaleVersion === "string" ? { tailscaleVersion } : {},
 				updatedAt: int(s, "updatedAt", "remote.updatedAt")
 			};
 		}
@@ -555,6 +582,13 @@ window.__ModuleLoader__.load({
 				"phase.unavailable": "远程 helper 不可用",
 				"phase.stopped": "已停止",
 				"phase.unknown": "状态未知",
+				"channel.state.disabled": "未启用",
+				"channel.state.starting": "正在启动",
+				"channel.state.login_required": "待授权",
+				"channel.state.online": "已就绪",
+				"channel.state.error": "失败",
+				"channel.state.unavailable": "不可用",
+				"channel.state.stopped": "已停止",
 				"panel.activeConnections": "当前连接",
 				"panel.identity": "设备身份认证",
 				"panel.identityReady": "v2 已就绪",
@@ -582,6 +616,7 @@ window.__ModuleLoader__.load({
 				"pair.kind.lan": "内网",
 				"pair.noAddress": "没有可用地址",
 				"pair.noAddressHelp": "没有可用的局域网或远程入口。请确认局域网连接已启动，或启用远程连接。",
+				"pair.disabledHelp": "DeepPilot 连接已关闭。先在上方开启连接，再添加手机。",
 				"pair.qrAlt": "DeepPilot 配对二维码",
 				"pair.qrShow": "显示二维码",
 				"pair.qrHide": "隐藏二维码",
@@ -596,6 +631,8 @@ window.__ModuleLoader__.load({
 				"advanced.summary": "高级信息",
 				"advanced.protocolVersion": "协议版本",
 				"advanced.serverVersion": "服务器版本",
+				"advanced.tailscaleVersion": "Tailscale 版本",
+				"advanced.tailscaleVersionUnknown": "未获取",
 				"advanced.tokenPath": "Token 路径",
 				"advanced.identityPath": "设备注册表路径",
 				"advanced.bufferMax": "重放缓冲上限",
@@ -798,6 +835,13 @@ window.__ModuleLoader__.load({
 				"phase.unavailable": "Remote helper unavailable",
 				"phase.stopped": "Stopped",
 				"phase.unknown": "Status unknown",
+				"channel.state.disabled": "Off",
+				"channel.state.starting": "Starting",
+				"channel.state.login_required": "Needs sign-in",
+				"channel.state.online": "Ready",
+				"channel.state.error": "Failed",
+				"channel.state.unavailable": "Unavailable",
+				"channel.state.stopped": "Stopped",
 				"panel.activeConnections": "Active connections",
 				"panel.identity": "Device authentication",
 				"panel.identityReady": "v2 ready",
@@ -825,6 +869,7 @@ window.__ModuleLoader__.load({
 				"pair.kind.lan": "LAN",
 				"pair.noAddress": "No address available",
 				"pair.noAddressHelp": "No LAN or remote endpoint is available. Make sure LAN is running or enable remote access.",
+				"pair.disabledHelp": "DeepPilot is turned off. Turn the connection on above before adding a phone.",
 				"pair.qrAlt": "DeepPilot pairing QR code",
 				"pair.qrShow": "Show QR code",
 				"pair.qrHide": "Hide QR code",
@@ -839,6 +884,8 @@ window.__ModuleLoader__.load({
 				"advanced.summary": "Advanced info",
 				"advanced.protocolVersion": "Protocol version",
 				"advanced.serverVersion": "Server version",
+				"advanced.tailscaleVersion": "Tailscale version",
+				"advanced.tailscaleVersionUnknown": "Not reported",
 				"advanced.tokenPath": "Token path",
 				"advanced.identityPath": "Device registry path",
 				"advanced.bufferMax": "Replay buffer cap",
@@ -1021,155 +1068,169 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client/styles.ts
+		const EASE = "cubic-bezier(0.22,1,0.36,1)";
 		const CSS = [
-			".pbb-section{max-width:760px;color:var(--dsw-alias-label-primary);display:flex;flex-direction:column;gap:10px}",
+			".pbb-section{container:pbb/inline-size;max-width:760px;color:var(--dsw-alias-label-primary);font-size:14px;line-height:1.5;display:flex;flex-direction:column;gap:16px}",
+			".pbb-section>*{animation:pbb-cardIn 160ms " + EASE + " backwards}",
+			".pbb-section>*:nth-child(2){animation-delay:24ms}",
+			".pbb-section>*:nth-child(3){animation-delay:48ms}",
+			".pbb-section>*:nth-child(4){animation-delay:72ms}",
+			".pbb-section>*:nth-child(5){animation-delay:96ms}",
+			".pbb-section>*:nth-child(6){animation-delay:120ms}",
+			".pbb-section>*:nth-child(7){animation-delay:144ms}",
+			".pbb-section>*:nth-child(n+8){animation-delay:144ms}",
+			"@keyframes pbb-cardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}",
 			".pbb-pageHeader{display:flex;align-items:flex-start;gap:16px;padding:2px 2px 4px}",
 			".pbb-title{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em}",
-			".pbb-intro{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:1.5;margin:4px 0 0;max-width:560px}",
-			".pbb-refresh{font:inherit;font-size:12px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:none;border:none;padding:3px 0;margin-left:auto;white-space:nowrap}",
-			".pbb-refresh:hover:not(:disabled){color:var(--dsw-alias-label-primary)}",
+			".pbb-intro{color:var(--dsw-alias-label-secondary);font-size:14px;line-height:1.5;margin:4px 0 0;max-width:600px}",
+			".pbb-refresh{font:inherit;font-size:12px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:none;border:none;padding:3px 0;margin-left:auto;white-space:nowrap;transition:transform 160ms " + EASE + ",color 160ms " + EASE + "}",
+			".pbb-refresh:active{transform:scale(0.97)}",
 			".pbb-refresh:disabled{cursor:default;opacity:.5}",
-			".pbb-card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;overflow:hidden}",
+			".pbb-statusStrip{display:grid;grid-template-columns:repeat(4,1fr);background:var(--dsw-alias-settings-card-fill,var(--dsw-alias-bg-layer-2));border:.5px solid var(--dsw-alias-settings-card-stroke,var(--dsw-alias-border-l4));border-radius:var(--dsw-radius-xl,20px);overflow:hidden}",
+			".pbb-statusCell{padding:14px 16px;min-width:0}",
+			".pbb-statusCell+.pbb-statusCell{border-left:1px solid var(--dsw-alias-border-l2)}",
+			".pbb-statusLabel{font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary)}",
+			".pbb-statusValue{margin-top:2px;font-size:16px;font-weight:600;line-height:22px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}",
+			".pbb-statusValue .pbb-dot{margin-right:6px}",
+			".pbb-statusSub{font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}",
+			".pbb-card{border:.5px solid var(--dsw-alias-settings-card-stroke,var(--dsw-alias-border-l4));background:var(--dsw-alias-settings-card-fill,var(--dsw-alias-bg-layer-2));border-radius:var(--dsw-radius-xl,20px);overflow:hidden}",
 			".pbb-cardHeader{display:flex;align-items:flex-start;gap:16px;padding:15px 18px 13px}",
 			".pbb-cardHeader>div:first-child{min-width:0;flex:1}",
-			".pbb-cardTitle{margin:0;font-size:13px;font-weight:600;color:var(--dsw-alias-label-primary)}",
-			".pbb-cardDescription{margin:3px 0 0;color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:1.45}",
-			".pbb-cardBody,.pbb-pairingBody{display:flex;flex-direction:column;gap:10px;padding:0 18px 15px}",
+			".pbb-cardTitle{margin:0;font-size:14px;font-weight:600;color:var(--dsw-alias-label-primary)}",
+			".pbb-cardDescription{margin:3px 0 0;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:1.5}",
+			".pbb-cardHead{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:0 18px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color 160ms " + EASE + "}",
+			".pbb-cardHead:active{background:var(--dsw-alias-bg-module-platform)}",
+			".pbb-cardSummary{flex:1;min-width:0;text-align:right;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}",
+			".pbb-chev{flex:none;display:inline-flex;align-items:center;color:var(--dsw-alias-label-tertiary);transition:transform 160ms " + EASE + "}",
+			".pbb-chevIcon{display:block}",
+			".pbb-cardHead[aria-expanded=\"true\"] .pbb-chev,.pbb-expand[aria-expanded=\"true\"] .pbb-chev{transform:rotate(90deg)}",
+			".pbb-cardBody{display:flex;flex-direction:column;gap:12px;padding:4px 18px 16px}",
+			".pbb-pairingBody{display:flex;flex-direction:column;gap:10px;padding:0 18px 15px}",
 			".pbb-sectionIntro{padding-bottom:2px}",
+			".pbb-fold{display:grid;grid-template-rows:1fr;transition:grid-template-rows 240ms " + EASE + ",opacity 200ms " + EASE + ";opacity:1}",
+			".pbb-foldClosed{grid-template-rows:0fr;opacity:0}",
+			".pbb-fold>div{overflow:hidden;min-height:0}",
 			".pbb-row{display:flex;align-items:center;gap:8px}",
 			".pbb-label{flex:1;font-size:12px;font-weight:500;color:var(--dsw-alias-label-primary);min-width:0}",
 			".pbb-value{font-size:12px;color:var(--dsw-alias-label-secondary);word-break:break-all;text-align:right}",
-			".pbb-badge,.pbb-countBadge{background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);border-radius:999px;padding:2px 8px;font-size:11px;font-weight:500;white-space:nowrap}",
+			".pbb-badge,.pbb-countBadge{background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);border-radius:999px;padding:2px 8px;font-size:12px;font-weight:500;white-space:nowrap}",
+			".pbb-badgeOk{background:color-mix(in srgb,var(--dsw-alias-state-success-primary,#22a06b) 12%,transparent);color:var(--dsw-alias-state-success-primary,#22a06b)}",
+			".pbb-badgeWarn{background:color-mix(in srgb,var(--dsw-alias-state-warn-primary,#f59e0b) 14%,transparent);color:var(--dsw-alias-state-warn-primary,#f59e0b)}",
 			".pbb-countBadge{min-width:24px;text-align:center}",
-			".pbb-statusBadge{display:inline-flex;align-items:center;gap:6px;flex:none;padding:3px 8px;border-radius:999px;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);font-size:11px;font-weight:500;white-space:nowrap}",
+			".pbb-statusBadge{display:inline-flex;align-items:center;gap:6px;flex:none;padding:3px 8px;border-radius:999px;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:500;white-space:nowrap}",
 			".pbb-ok{color:var(--dsw-alias-state-success-primary,var(--dsw-alias-label-secondary));font-weight:500}",
-			".pbb-bad{color:var(--dsw-alias-label-error);font-weight:500}",
-			".pbb-diag{font-size:11px;color:var(--dsw-alias-label-tertiary);margin:0;line-height:1.5;overflow-wrap:anywhere}",
-			".pbb-diagBad{color:var(--dsw-alias-label-error)}",
-			".pbb-empty{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:1.55;margin:0;padding:12px;border:1px dashed var(--dsw-alias-border-l2);border-radius:8px}",
-			".pbb-tokenRow{flex-wrap:wrap}",
-			".pbb-token{max-width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--dsw-alias-label-secondary);word-break:break-all}",
-			".pbb-tokenActions{display:flex;align-items:center;gap:8px}",
-			".pbb-action{font:inherit;font-size:12px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:none;border:1px solid var(--dsw-alias-border-l2);border-radius:7px;padding:5px 9px;line-height:1.2;white-space:nowrap}",
-			".pbb-action:hover:not(:disabled){color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-module-platform)}",
+			".pbb-bad{color:var(--dsw-alias-state-error-primary);font-weight:500}",
+			".pbb-diag{font-size:12px;color:var(--dsw-alias-label-tertiary);margin:0;line-height:1.5;overflow-wrap:anywhere}",
+			".pbb-diagBad{color:var(--dsw-alias-state-error-primary)}",
+			".pbb-empty{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:1.55;margin:0;padding:12px;border:1px dashed var(--dsw-alias-border-l3);border-radius:8px}",
+			".pbb-token{max-width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--dsw-alias-label-secondary);word-break:break-all}",
+			".pbb-action{font:inherit;font-size:12px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:none;border:1px solid var(--dsw-alias-border-l3);border-radius:7px;padding:5px 9px;line-height:1.2;white-space:nowrap;transition:transform 160ms " + EASE + ",color 160ms " + EASE + ",background-color 160ms " + EASE + ",border-color 160ms " + EASE + "}",
+			".pbb-action:active{transform:scale(0.97)}",
 			".pbb-action:disabled{cursor:default;opacity:.5}",
-			".pbb-buttonPrimary{color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-state-success-primary,#3b82f6);background:color-mix(in srgb,var(--dsw-alias-state-success-primary,#3b82f6) 12%,transparent)}",
-			".pbb-buttonPrimary:hover:not(:disabled){color:var(--dsw-alias-label-primary);background:color-mix(in srgb,var(--dsw-alias-state-success-primary,#3b82f6) 18%,transparent)}",
-			".pbb-actionSelected{color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-state-success-primary,#22a06b);background:var(--dsw-alias-bg-module-platform)}",
-			".pbb-actionDangerGhost{color:#dc2626;border-color:rgba(220,38,38,.38);background:transparent;line-height:1.35;padding:4px 9px;transition:color .15s ease,background-color .15s ease,border-color .15s ease,transform .1s ease}",
-			".pbb-actionDangerGhost:hover:not(:disabled){color:#b91c1c;background:rgba(220,38,38,.09);border-color:rgba(185,28,28,.5)}",
-			".pbb-actionDangerGhost:active:not(:disabled){transform:translateY(1px)}",
-			".pbb-actionDangerGhost:focus-visible{outline:2px solid rgba(220,38,38,.32);outline-offset:1px}",
+			".pbb-buttonPrimary{font-size:13px;padding:6px 12px;color:var(--dsw-alias-label-primary-foreground);border-color:transparent;background:var(--dsw-alias-button-primary-fill,var(--dsw-alias-brand-primary))}",
+			".pbb-actionDangerGhost{color:var(--dsw-alias-state-error-primary);border-color:color-mix(in srgb,var(--dsw-alias-state-error-primary) 38%,transparent);background:transparent;line-height:1.35;padding:4px 9px}",
+			".pbb-actionDangerGhost:active{transform:scale(0.97)}",
 			".pbb-actionDangerGhost:disabled{cursor:default;opacity:.62}",
 			".pbb-actionIcon{flex:none;display:inline-block;vertical-align:-2px;margin-right:5px;pointer-events:none}",
 			".pbb-actionBusy{display:inline-flex;align-items:center;gap:6px}",
-			".pbb-actionBusy::before{content:\"\";width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(220,38,38,.35);border-top-color:currentColor;animation:pbb-spin .7s linear infinite}",
+			".pbb-actionBusy::before{content:\"\";width:9px;height:9px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--dsw-alias-state-error-primary) 35%,transparent);border-top-color:currentColor;animation:pbb-spin .7s linear infinite}",
 			"@keyframes pbb-spin{to{transform:rotate(360deg)}}",
-			".pbb-masterRow{display:flex;align-items:center;gap:14px;padding:0 18px 14px}",
+			".pbb-masterRow{display:flex;align-items:center;gap:14px}",
 			".pbb-switchText{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}",
-			".pbb-switchTitle{font-size:13px;font-weight:500;color:var(--dsw-alias-label-primary)}",
-			".pbb-switchDesc{font-size:11px;color:var(--dsw-alias-label-tertiary);line-height:1.4}",
-			".pbb-switch{appearance:none;-webkit-appearance:none;width:34px;height:20px;border-radius:999px;background:var(--dsw-alias-bg-module-platform);border:1px solid var(--dsw-alias-border-l2);position:relative;cursor:pointer;padding:0;flex:none;transition:background .15s ease,border-color .15s ease}",
-			".pbb-switch::after{content:\"\";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--dsw-alias-label-secondary);transition:transform .15s ease,background .15s ease}",
-			".pbb-switchOn{background:var(--dsw-alias-state-success-primary,#22a06b);border-color:transparent}",
-			".pbb-switchOn::after{transform:translateX(14px);background:#fff}",
+			".pbb-switchTitle{font-size:14px;font-weight:500;color:var(--dsw-alias-label-primary)}",
+			".pbb-switchDesc{font-size:12px;color:var(--dsw-alias-label-tertiary);line-height:1.45}",
+			".pbb-switch{appearance:none;-webkit-appearance:none;width:40px;height:24px;border-radius:999px;background:color-mix(in srgb,var(--dsw-alias-label-primary) 20%,transparent);border:1px solid transparent;position:relative;cursor:pointer;padding:0;flex:none;transition:background-color 160ms " + EASE + ",border-color 160ms " + EASE + ",transform 160ms " + EASE + "}",
+			".pbb-switch::after{content:\"\";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.24);transition:transform 160ms " + EASE + ",background-color 160ms " + EASE + "}",
+			".pbb-switchOn{background:var(--dsw-alias-brand-primary)}",
+			".pbb-switchOn::after{transform:translateX(16px);background:var(--dsw-alias-label-primary-foreground)}",
+			".pbb-switch:active{transform:scale(0.97)}",
 			".pbb-switch:disabled{opacity:.5;cursor:default}",
-			".pbb-switch:focus-visible,.pbb-action:focus-visible,.pbb-targetButton:focus-visible{outline:2px solid color-mix(in srgb,var(--dsw-alias-state-success-primary,#3b82f6) 55%,transparent);outline-offset:2px}",
-			".pbb-connectionGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 18px 14px}",
-			".pbb-connectionTile{min-width:0;border:1px solid var(--dsw-alias-border-l2);border-radius:9px;background:var(--dsw-alias-bg-module-platform);padding:11px 12px;display:flex;flex-direction:column;gap:5px}",
-			".pbb-connectionTileHeader{display:flex;align-items:center;gap:10px}",
-			".pbb-dotRow{display:flex;align-items:center;gap:7px;flex:1;min-width:0}",
-			".pbb-dot{width:7px;height:7px;border-radius:50%;background:var(--dsw-alias-label-tertiary);flex:none}",
+			".pbb-switch:focus-visible,.pbb-action:focus-visible,.pbb-targetButton:focus-visible,.pbb-cardHead:focus-visible,.pbb-expand:focus-visible,.pbb-refresh:focus-visible,.pbb-numberInput:focus-visible,.pbb-deviceNameInput:focus-visible,.pbb-disclosure>summary:focus-visible{outline:2px solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:2px}",
+			".pbb-dot{display:inline-block;vertical-align:1px;width:8px;height:8px;border-radius:50%;background:var(--dsw-alias-label-tertiary);flex:none}",
 			".pbb-dotOk{background:var(--dsw-alias-state-success-primary,#22a06b)}",
-			".pbb-dotWarn{background:var(--dsw-alias-state-warning-primary,#e2b203)}",
-			".pbb-dotBad{background:var(--dsw-alias-label-error)}",
-			".pbb-connectionState{font-size:11px;color:var(--dsw-alias-label-secondary);font-weight:500}",
-			".pbb-connectionDescription{font-size:11px;color:var(--dsw-alias-label-tertiary);line-height:1.45;margin:0}",
-			".pbb-rowAction{display:flex;gap:8px;margin-top:4px}",
-			".pbb-statGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 18px 14px}",
-			".pbb-stat{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 10px;border-radius:8px;background:var(--dsw-alias-bg-module-platform)}",
-			".pbb-statLabel{font-size:11px;color:var(--dsw-alias-label-tertiary);flex:1}",
-			".pbb-statValue{font-size:12px;color:var(--dsw-alias-label-primary);font-weight:600}",
-			".pbb-inlineDetails,.pbb-help{border-top:1px solid var(--dsw-alias-border-l2)}",
-			".pbb-inlineDetails>summary,.pbb-help>summary{cursor:pointer;color:var(--dsw-alias-label-primary);font-size:12px;font-weight:500;user-select:none;list-style:none;display:flex;align-items:center;padding:12px 18px}",
-			".pbb-inlineDetails>summary::-webkit-details-marker,.pbb-help>summary::-webkit-details-marker{display:none}",
-			".pbb-inlineDetails>summary::after,.pbb-help>summary::after{content:\"›\";margin-left:auto;color:var(--dsw-alias-label-tertiary);font-size:16px;line-height:1;transform:rotate(90deg);transition:transform .15s ease}",
-			".pbb-inlineDetails[open]>summary::after,.pbb-help[open]>summary::after{transform:rotate(-90deg)}",
-			".pbb-inlineDetails[open]>summary,.pbb-help[open]>summary{color:var(--dsw-alias-label-secondary)}",
-			".pbb-helpBody{display:flex;flex-direction:column;gap:14px;padding:2px 18px 15px}",
-			".pbb-helpSection{display:flex;flex-direction:column;gap:6px}",
-			".pbb-helpHeading{font-size:12px;font-weight:600;color:var(--dsw-alias-label-primary)}",
-			".pbb-helpList{margin:0;padding-left:20px;color:var(--dsw-alias-label-secondary);font-size:11px;line-height:1.6}",
-			".pbb-helpList li+li{margin-top:4px}",
-			".pbb-helpText{margin:0;color:var(--dsw-alias-label-secondary);font-size:11px;line-height:1.6}",
-			".pbb-helpCode{display:block;margin:2px 0 0;padding:10px;overflow:auto;white-space:pre-wrap;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-primary);font:11px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}",
-			".pbb-helpLink{color:var(--dsw-alias-label-secondary);text-decoration:underline;text-underline-offset:2px}",
+			".pbb-dotWarn{background:var(--dsw-alias-state-warn-primary,#f59e0b)}",
+			".pbb-dotBad{background:var(--dsw-alias-state-error-primary)}",
+			".pbb-switchTitle .pbb-dot{margin-right:6px;vertical-align:1px}",
+			".pbb-channel{border-top:1px solid var(--dsw-alias-border-l2);padding-top:12px;display:flex;flex-direction:column;gap:10px}",
+			".pbb-expand{border:0;background:none;color:var(--dsw-alias-label-secondary);font:inherit;font-size:12px;cursor:pointer;padding:0;display:flex;align-items:center;gap:6px;align-self:flex-start;transition:color 160ms " + EASE + ",transform 160ms " + EASE + "}",
+			".pbb-expand:active{transform:scale(0.97)}",
+			".pbb-channelBody{display:flex;flex-direction:column;gap:12px;padding:2px 0 0 14px}",
 			".pbb-limitRow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--dsw-alias-border-l2)}",
 			".pbb-limitRow:first-child{border-top:0;padding-top:2px}",
 			".pbb-limitControl{display:flex;align-items:center;gap:8px;flex:none}",
-			".pbb-numberInput{width:72px;box-sizing:border-box;border:1px solid var(--dsw-alias-border-l2);border-radius:7px;background:var(--dsw-alias-bg-layer-3);color:var(--dsw-alias-label-primary);font:inherit;font-size:12px;padding:5px 8px}",
-			".pbb-numberInput:focus{outline:2px solid var(--dsw-alias-state-success-primary,#22a06b);outline-offset:1px}",
+			".pbb-numberInput{width:72px;box-sizing:border-box;border:.5px solid var(--dsw-alias-border-l4);border-radius:7px;background:var(--dsw-alias-bg-layer-3);color:var(--dsw-alias-label-primary);font:inherit;font-size:13px;padding:6px 8px}",
+			".pbb-numberInput:focus{outline:2px solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:1px}",
 			".pbb-numberInput:disabled{opacity:.5}",
-			".pbb-targetList{display:flex;flex-wrap:wrap;gap:6px}",
-			".pbb-targetButton{font:inherit;font-size:11px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:none;border:1px solid var(--dsw-alias-border-l2);border-radius:7px;padding:6px 9px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
-			".pbb-targetButton:hover:not(:disabled){color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-module-platform)}",
+			".pbb-targetList{display:inline-flex;flex-wrap:wrap;gap:2px;background:var(--dsw-alias-bg-module-platform);border-radius:999px;padding:2px;align-self:flex-start}",
+			".pbb-targetButton{font:inherit;font-size:12px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:none;border:0;border-radius:999px;padding:6px 9px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:transform 160ms " + EASE + ",color 160ms " + EASE + ",background-color 160ms " + EASE + ",box-shadow 160ms " + EASE + "}",
+			".pbb-targetButton:active{transform:scale(0.97)}",
 			".pbb-targetButton:disabled{cursor:default;opacity:.5}",
-			".pbb-targetSelected{color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-state-success-primary,#22a06b);background:color-mix(in srgb,var(--dsw-alias-state-success-primary,#22a06b) 10%,transparent)}",
-			".pbb-qrPanel{display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 0 4px;border-top:1px solid var(--dsw-alias-border-l2)}",
-			".pbb-qrImage{width:224px;height:224px;max-width:100%;background:#fff;border-radius:10px;padding:8px;box-sizing:border-box}",
-			".pbb-pairCodeBlock{width:min(100%,460px);display:flex;flex-direction:column;gap:6px}",
-			".pbb-pairCodeLabel{font-size:11px;color:var(--dsw-alias-label-tertiary);text-align:center}",
-			".pbb-pairCodeRow{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}",
-			".pbb-pairCode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.4;letter-spacing:.03em;color:var(--dsw-alias-label-primary);word-break:break-all;text-align:center;user-select:all}",
-			".pbb-qrHint{max-width:460px;text-align:center;font-size:11px;line-height:1.5;color:var(--dsw-alias-label-tertiary);margin:0}",
-			".pbb-tableWrap{width:100%;overflow-x:auto}",
-			".pbb-table{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed}",
-			".pbb-table th{color:var(--dsw-alias-label-tertiary);text-align:left;font-weight:500;padding:7px 8px;border-bottom:1px solid var(--dsw-alias-border-l2)}",
-			".pbb-table td{padding:9px 8px;border-bottom:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-primary);vertical-align:middle}",
-			".pbb-table tbody tr:last-child td{border-bottom:0}",
-			".pbb-table th:first-child{width:48%}",
-			".pbb-table th:nth-child(2){width:32%}",
-			".pbb-tableActionHead,.pbb-tableActionCell{text-align:right;width:142px!important}",
-			".pbb-tableActionCell{white-space:nowrap}",
-			".pbb-tableActionCell>.pbb-action+.pbb-action{margin-left:5px}",
+			".pbb-targetSelected{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-3);box-shadow:0 1px 3px color-mix(in srgb,var(--dsw-alias-label-primary) 14%,transparent);font-weight:500}",
+			".pbb-qrPanel{display:grid;grid-template-columns:224px 1fr;gap:20px;align-items:start;padding:14px 0 4px;border-top:1px solid var(--dsw-alias-border-l2)}",
+			".pbb-qrImage{width:224px;height:224px;max-width:100%;background:#fff;border-radius:12px;padding:8px;box-sizing:border-box}",
+			".pbb-countdown{margin-top:10px;display:flex;flex-direction:column;gap:6px}",
+			".pbb-countdownBar{height:4px;border-radius:999px;background:var(--dsw-alias-bg-module-platform);overflow:hidden}",
+			".pbb-countdownBar i{display:block;width:100%;height:100%;transform-origin:left center;background:var(--dsw-alias-state-business-primary,var(--dsw-alias-state-success-primary,#22a06b));border-radius:999px;transition:transform 1s linear}",
+			".pbb-countdownText{font-size:12px;color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums}",
+			".pbb-pairInfo{display:flex;flex-direction:column;gap:10px;min-width:0}",
+			".pbb-pairCodeBlock{width:100%;display:flex;flex-direction:column;gap:6px}",
+			".pbb-pairCodeLabel{font-size:12px;color:var(--dsw-alias-label-tertiary)}",
+			".pbb-pairCodeRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}",
+			".pbb-pairCode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.4;letter-spacing:.03em;color:var(--dsw-alias-label-primary);word-break:break-all;user-select:all}",
+			".pbb-qrHint{font-size:12px;line-height:1.5;color:var(--dsw-alias-label-tertiary);margin:0}",
+			".pbb-rowAction{display:flex;gap:8px;margin-top:4px}",
+			".pbb-resultRow{display:flex;align-items:flex-start;gap:6px}",
+			".pbb-resultIcon{flex:none;display:inline-flex;margin-top:2px;color:var(--dsw-alias-state-success-primary)}",
+			".pbb-resultIconBad{color:var(--dsw-alias-state-error-primary)}",
+			".pbb-deviceList{display:flex;flex-direction:column}",
+			".pbb-deviceRow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:8px;padding:10px 0;border-top:1px solid var(--dsw-alias-border-l2)}",
+			".pbb-deviceRow:first-child{border-top:0;padding-top:2px}",
+			".pbb-deviceRow:last-child{padding-bottom:0}",
+			".pbb-deviceRow>.pbb-deviceRenameForm,.pbb-deviceRow>.pbb-deviceConfirm{grid-column:1/-1}",
+			".pbb-deviceMain{min-width:0;display:flex;flex-direction:column;gap:2px}",
 			".pbb-deviceNameRow{display:flex;align-items:center;gap:6px;min-width:0}",
-			".pbb-deviceName{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
-			".pbb-deviceMeta{display:flex;gap:4px;align-items:center;margin-top:3px;color:var(--dsw-alias-label-tertiary);font-size:10px;min-width:0}",
-			".pbb-deviceMeta code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
-			".pbb-deviceRenameForm{display:flex;flex-direction:column;gap:5px;min-width:0}",
-			".pbb-deviceRenameControls{display:flex;align-items:center;gap:7px;min-width:0}",
-			".pbb-deviceRenameControls>.pbb-deviceNameInput{flex:1;width:auto;min-width:0}",
-			".pbb-deviceNameInput{width:100%;box-sizing:border-box;border:1px solid var(--dsw-alias-border-l2);border-radius:7px;background:var(--dsw-alias-bg-layer-3);color:var(--dsw-alias-label-primary);font:inherit;font-size:12px;padding:6px 8px}",
-			".pbb-deviceNameInput:focus{outline:2px solid var(--dsw-alias-state-success-primary,#22a06b);outline-offset:1px}",
+			".pbb-deviceName{display:block;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
+			".pbb-deviceMeta{display:flex;flex-wrap:wrap;column-gap:6px;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px;min-width:0}",
+			".pbb-deviceMeta>*+*::before{content:\"\\00B7\";margin-right:6px}",
+			".pbb-deviceMeta code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
+			".pbb-deviceActions{grid-row:1;grid-column:2;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}",
+			".pbb-deviceConfirm{display:flex;flex-direction:column;gap:8px}",
+			".pbb-deviceRenameForm{display:flex;gap:8px;flex-wrap:wrap;min-width:0}",
+			".pbb-deviceNameInput{flex:1;min-width:0;box-sizing:border-box;border:.5px solid var(--dsw-alias-border-l4);border-radius:7px;background:var(--dsw-alias-bg-layer-3);color:var(--dsw-alias-label-primary);font:inherit;font-size:13px;padding:6px 8px}",
+			".pbb-deviceNameInput:focus{outline:2px solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:1px}",
 			".pbb-deviceNameInput:disabled{opacity:.5}",
 			".pbb-deviceRenameActions{display:flex;align-items:center;gap:5px;flex:none}",
-			".pbb-deviceIconAction{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:8px;box-shadow:none}",
-			".pbb-deviceRenameActions .pbb-buttonPrimary{color:#fff;border-color:transparent;background:var(--dsw-alias-state-success-primary,#3b82f6)}",
-			".pbb-deviceRenameActions .pbb-buttonPrimary:hover:not(:disabled){color:#fff;background:color-mix(in srgb,var(--dsw-alias-state-success-primary,#3b82f6) 86%,#000)}",
-			".pbb-deviceRenameActions .pbb-deviceIconAction:not(.pbb-buttonPrimary){background:var(--dsw-alias-bg-module-platform);border-color:transparent;color:var(--dsw-alias-label-secondary)}",
-			".pbb-deviceRenameActions .pbb-deviceIconAction:not(.pbb-buttonPrimary):hover:not(:disabled){background:var(--dsw-alias-bg-layer-2,var(--dsw-alias-bg-module-platform));color:var(--dsw-alias-label-primary)}",
-			".pbb-controlIcon{display:block;pointer-events:none}",
-			".pbb-inlineSpinner{width:12px;height:12px;box-sizing:border-box;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:pbb-spin .7s linear infinite}",
-			".pbb-lastSeen{color:var(--dsw-alias-label-secondary);font-size:11px;overflow-wrap:anywhere}",
-			".pbb-disclosure{padding:0}",
-			".pbb-disclosure>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:13px 18px;cursor:pointer;color:var(--dsw-alias-label-primary)}",
-			".pbb-disclosure>summary::-webkit-details-marker{display:none}",
-			".pbb-disclosure>summary::after{content:\"›\";color:var(--dsw-alias-label-tertiary);font-size:17px;line-height:1;transform:rotate(90deg);transition:transform .15s ease}",
-			".pbb-disclosure[open]>summary::after{transform:rotate(-90deg)}",
-			".pbb-disclosureTitle{font-size:12px;font-weight:500;flex:1}",
-			".pbb-disclosureMeta{font-size:11px;color:var(--dsw-alias-label-tertiary);max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
-			".pbb-disclosureBody{display:flex;flex-direction:column;gap:12px;padding:2px 18px 16px}",
+			".pbb-helpBody{display:flex;flex-direction:column;gap:14px}",
+			".pbb-helpSection{display:flex;flex-direction:column;gap:6px}",
+			".pbb-helpHeading{font-size:13px;font-weight:600;color:var(--dsw-alias-label-primary)}",
+			".pbb-helpList{margin:0;padding-left:20px;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:1.6}",
+			".pbb-helpList li+li{margin-top:4px}",
+			".pbb-helpText{margin:0;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:1.6}",
+			".pbb-helpCode{display:block;margin:2px 0 0;padding:10px;overflow:auto;white-space:pre-wrap;border:1px solid var(--dsw-alias-border-l3);border-radius:8px;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-primary);font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}",
+			".pbb-helpLink{color:var(--dsw-alias-label-secondary);text-decoration:underline;text-underline-offset:2px}",
 			".pbb-testGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}",
-			".pbb-testItem{display:flex;align-items:center;gap:12px;padding:11px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-module-platform)}",
-			".pbb-testTitle{font-size:12px;font-weight:500;color:var(--dsw-alias-label-primary)}",
-			".pbb-testDescription{font-size:10px;color:var(--dsw-alias-label-tertiary);line-height:1.45}",
-			".pbb-runtimeList{display:flex;flex-direction:column;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;overflow:hidden}",
+			".pbb-testItem:last-child:nth-child(odd){grid-column:1/-1}",
+			".pbb-testItem{display:flex;align-items:center;gap:12px;padding:11px;border:1px solid var(--dsw-alias-border-l3);border-radius:8px;background:var(--dsw-alias-bg-module-platform)}",
+			".pbb-testTitle{font-size:13px;font-weight:500;color:var(--dsw-alias-label-primary)}",
+			".pbb-testDescription{font-size:12px;color:var(--dsw-alias-label-tertiary);line-height:1.5}",
+			".pbb-runtimeList{display:flex;flex-direction:column;border:1px solid var(--dsw-alias-border-l3);border-radius:8px;overflow:hidden}",
 			".pbb-runtimeList>.pbb-runtimeRow,.pbb-runtimeRow{display:flex;align-items:center;gap:10px;padding:9px 10px;border-top:1px solid var(--dsw-alias-border-l2)}",
 			".pbb-runtimeList>.pbb-runtimeRow:first-child{border-top:0}",
 			".pbb-runtimeList>.pbb-runtimeRow>.pbb-row{flex:1;min-width:0}",
-			".pbb-updateRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border:1px solid color-mix(in srgb,var(--dsw-alias-state-success-primary,#22a06b) 35%,var(--dsw-alias-border-l2));border-radius:8px;color:var(--dsw-alias-label-primary);font-size:12px}",
+			".pbb-updateRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--dsw-alias-state-business-primary,#4176e6) 35%,var(--dsw-alias-border-l3));border-radius:8px;color:var(--dsw-alias-label-primary);font-size:13px;text-decoration:none;cursor:pointer;transition:background-color 160ms " + EASE + "}",
+			".pbb-disclosure{padding:0}",
+			".pbb-disclosure>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:13px 18px;cursor:pointer;color:var(--dsw-alias-label-primary)}",
+			".pbb-disclosure>summary::-webkit-details-marker{display:none}",
+			".pbb-disclosure[open]>summary .pbb-chev{transform:rotate(90deg)}",
+			".pbb-disclosureTitle{font-size:13px;font-weight:500;flex:1}",
+			".pbb-disclosureMeta{font-size:12px;color:var(--dsw-alias-label-tertiary);max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
+			".pbb-disclosureBody{display:flex;flex-direction:column;gap:12px;padding:2px 18px 16px}",
 			".pbb-diagnostics>summary{color:var(--dsw-alias-label-secondary)}",
-			"@media (max-width:620px){.pbb-connectionGrid,.pbb-testGrid{grid-template-columns:1fr}.pbb-cardHeader{align-items:flex-start}.pbb-masterRow{align-items:flex-start}.pbb-lastSeen{display:none}.pbb-table th:nth-child(2){width:1px}.pbb-table th:first-child{width:auto}.pbb-tableActionHead,.pbb-tableActionCell{width:132px!important}.pbb-limitRow{align-items:flex-start;flex-direction:column}.pbb-limitControl{align-self:flex-end}}"
+			"@media (hover:hover) and (pointer:fine){.pbb-refresh:hover:not(:disabled){color:var(--dsw-alias-label-primary)}.pbb-cardHead:hover{background:var(--dsw-alias-bg-module-platform)}.pbb-action:hover:not(:disabled){color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-module-platform)}.pbb-buttonPrimary:hover:not(:disabled){background:var(--dsw-alias-button-primary-hover,var(--dsw-alias-interactive-bg-hover-solid))}.pbb-actionDangerGhost:hover:not(:disabled){color:var(--dsw-alias-state-error-primary);background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 9%,transparent);border-color:color-mix(in srgb,var(--dsw-alias-state-error-primary) 55%,transparent)}.pbb-expand:hover{color:var(--dsw-alias-label-primary)}.pbb-updateRow:hover{background:color-mix(in srgb,var(--dsw-alias-state-business-primary,#4176e6) 8%,transparent)}}",
+			"@media (prefers-reduced-motion:reduce){.pbb-section *{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}}",
+			"@container pbb (max-width:640px){.pbb-statusStrip{grid-template-columns:repeat(2,1fr)}.pbb-statusCell:nth-child(3){border-left:0}.pbb-statusCell:nth-child(n+3){border-top:1px solid var(--dsw-alias-border-l2)}.pbb-cardSummary{display:none}}",
+			"@container pbb (max-width:480px){.pbb-testGrid{grid-template-columns:1fr}.pbb-testItem:last-child:nth-child(odd){grid-column:auto}.pbb-qrPanel{grid-template-columns:1fr}.pbb-limitRow{align-items:flex-start;flex-direction:column}.pbb-limitControl{align-self:flex-end}.pbb-deviceRow{grid-template-columns:minmax(0,1fr)}.pbb-deviceActions{grid-row:auto;grid-column:auto;justify-content:flex-start}}",
+			"@media (pointer:coarse){.pbb-action{min-height:32px;padding:7px 10px;font-size:13px}.pbb-buttonPrimary{font-size:14px}.pbb-cardHead{min-height:56px}.pbb-expand{padding:5px 0}.pbb-refresh{padding:5px 0}}"
 		].join("\n");
 		/**
 		* Client bundle id, identical to the `window.__ModuleLoader__.load({ id })`
@@ -4032,26 +4093,6 @@ window.__ModuleLoader__.load({
 		function deviceLabel(device) {
 			return (device.customName ?? device.deviceName).trim();
 		}
-		/** 渲染一块连接磁贴。纯数据函数：九参进，元素树出。 */
-		function renderConnectionTile(key, title, description, checked, ready, dot, statusLabel, onToggle, extra = null) {
-			return (0, react.createElement)("div", {
-				className: "pbb-connectionTile",
-				key
-			}, (0, react.createElement)("div", { className: "pbb-connectionTileHeader" }, (0, react.createElement)("span", { className: "pbb-switchTitle pbb-dotRow" }, (0, react.createElement)("span", {
-				className: "pbb-dot" + dot,
-				role: "img",
-				"aria-label": statusLabel,
-				title: statusLabel
-			}), title), (0, react.createElement)("button", {
-				type: "button",
-				role: "switch",
-				"aria-checked": checked,
-				"aria-label": title,
-				disabled: !ready,
-				className: "pbb-switch" + (checked ? " pbb-switchOn" : ""),
-				onClick: onToggle
-			})), (0, react.createElement)("span", { className: "pbb-connectionState" }, statusLabel), (0, react.createElement)("p", { className: "pbb-connectionDescription" }, description), extra);
-		}
 		//#endregion
 		//#region src/client/settings-page.ts
 		/** phase 语义标签 → i18n key。措辞归页面，view model 只认语义。 */
@@ -4071,6 +4112,16 @@ window.__ModuleLoader__.load({
 			error: "local.phaseError",
 			stopped: "local.phaseStopped"
 		};
+		/** 状态条用的短状态：列标签已经写明是哪条通道，值只说状态，免得在窄格里被截断。 */
+		const CHANNEL_STATE_KEY = {
+			disabled: "channel.state.disabled",
+			starting: "channel.state.starting",
+			login_required: "channel.state.login_required",
+			online: "channel.state.online",
+			error: "channel.state.error",
+			unavailable: "channel.state.unavailable",
+			stopped: "channel.state.stopped"
+		};
 		/** 服务状态 → i18n key。 */
 		const SERVICE_STATUS_KEY = {
 			loading: "status.loading",
@@ -4093,29 +4144,59 @@ window.__ModuleLoader__.load({
 			strokeLinejoin: "round",
 			"aria-hidden": true
 		}, (0, react.createElement)("path", { d: "M2.5 4.5h11" }), (0, react.createElement)("path", { d: "M6.5 2.5h3" }), (0, react.createElement)("path", { d: "M4 4.5l.6 8.2a1 1 0 0 0 1 .9h4.8a1 1 0 0 0 1-.9l.6-8.2" }), (0, react.createElement)("path", { d: "M6.6 7v4.2" }), (0, react.createElement)("path", { d: "M9.4 7v4.2" }));
+		/** Chevron icon (linear, currentColor). CSS rotates it 90° while its owner is
+		*  expanded, so collapsed always means "points right, more content behind". */
+		const ChevronIcon = () => (0, react.createElement)("svg", {
+			className: "pbb-chevIcon",
+			viewBox: "0 0 16 16",
+			width: 12,
+			height: 12,
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 1.5,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": true
+		}, (0, react.createElement)("path", { d: "M6 3.5 10.5 8 6 12.5" }));
+		/** Check/cross marks for the relay and push result lines. They used to be the
+		*  dingbats '✓'/'✗', which the repo's visual rules reject as character icons. */
 		const CheckIcon = () => (0, react.createElement)("svg", {
-			className: "pbb-controlIcon",
 			viewBox: "0 0 16 16",
-			width: 14,
-			height: 14,
+			width: 12,
+			height: 12,
 			fill: "none",
 			stroke: "currentColor",
-			strokeWidth: 1.8,
+			strokeWidth: 1.6,
 			strokeLinecap: "round",
 			strokeLinejoin: "round",
 			"aria-hidden": true
-		}, (0, react.createElement)("path", { d: "m3 8.3 3.1 3.1L13 4.8" }));
-		const CloseIcon = () => (0, react.createElement)("svg", {
-			className: "pbb-controlIcon",
+		}, (0, react.createElement)("path", { d: "M3.5 8.5 6.5 11.5 12.5 4.5" }));
+		const CrossIcon = () => (0, react.createElement)("svg", {
 			viewBox: "0 0 16 16",
-			width: 14,
-			height: 14,
+			width: 12,
+			height: 12,
 			fill: "none",
 			stroke: "currentColor",
 			strokeWidth: 1.6,
 			strokeLinecap: "round",
+			strokeLinejoin: "round",
 			"aria-hidden": true
-		}, (0, react.createElement)("path", { d: "m4.5 4.5 7 7m0-7-7 7" }));
+		}, (0, react.createElement)("path", { d: "M4.5 4.5 11.5 11.5" }), (0, react.createElement)("path", { d: "M11.5 4.5 4.5 11.5" }));
+		/** One result line: SVG mark + text; the mark carries the pass/fail state. */
+		const resultRow = (ok, text, key) => (0, react.createElement)("p", {
+			className: "pbb-diag pbb-resultRow",
+			key
+		}, (0, react.createElement)("span", { className: "pbb-resultIcon" + (ok ? "" : " pbb-resultIconBad") }, ok ? CheckIcon() : CrossIcon()), (0, react.createElement)("span", null, text));
+		/** 最近在线只细化到分钟：秒和年份对判断设备是否还连着没有意义。 */
+		function formatLastSeen(ts) {
+			if (ts === void 0 || !Number.isFinite(ts) || ts <= 0) return "—";
+			return new Date(ts).toLocaleString(void 0, {
+				month: "numeric",
+				day: "numeric",
+				hour: "2-digit",
+				minute: "2-digit"
+			});
+		}
 		async function writeClipboard(t, value) {
 			try {
 				await navigator.clipboard.writeText(value);
@@ -4164,6 +4245,11 @@ window.__ModuleLoader__.load({
 				message: "",
 				failed: false
 			});
+			const [localOptionsOpen, setLocalOptionsOpen] = (0, react.useState)(false);
+			const [remoteOptionsOpen, setRemoteOptionsOpen] = (0, react.useState)(false);
+			const [systemOpen, setSystemOpen] = (0, react.useState)(false);
+			const [armedRevokeDeviceId, setArmedRevokeDeviceId] = (0, react.useState)(null);
+			const [nowMs, setNowMs] = (0, react.useState)(() => Date.now());
 			(0, react.useEffect)(() => {
 				if (!can("refresh")) return;
 				const refresh = props.refresh;
@@ -4423,37 +4509,22 @@ window.__ModuleLoader__.load({
 					});
 				});
 			};
-			const primaryRows = [];
 			const advancedRows = [];
-			if (report !== null) {
-				primaryRows.push((0, react.createElement)("div", {
-					className: "pbb-stat",
-					key: "conn"
-				}, (0, react.createElement)("span", { className: "pbb-statLabel" }, translateWith(props.t, "panel.activeConnections")), (0, react.createElement)("span", { className: "pbb-statValue" }, String(report.activeConnections))), (0, react.createElement)("div", {
-					className: "pbb-stat",
-					key: "identity"
-				}, (0, react.createElement)("span", { className: "pbb-statLabel" }, translateWith(props.t, "panel.identity")), (0, react.createElement)("code", { className: "pbb-token " + (report.pairingReady ? "pbb-ok" : "pbb-bad") }, report.pairingReady ? translateWith(props.t, "panel.identityReady") : translateWith(props.t, "panel.identityNotReady"))));
-				if (report.local.phase === "online" && report.local.tlsFingerprint) advancedRows.push((0, react.createElement)("div", {
-					className: "pbb-runtimeRow",
-					key: "tls"
-				}, (0, react.createElement)("div", { className: "pbb-row" }, (0, react.createElement)("span", { className: "pbb-label" }, translateWith(props.t, "local.tlsFingerprint")), (0, react.createElement)("code", { className: "pbb-token" }, report.local.tlsFingerprint))));
-				advancedRows.push((0, react.createElement)("div", {
-					className: "pbb-runtimeRow",
-					key: "proto"
-				}, (0, react.createElement)("div", { className: "pbb-row" }, (0, react.createElement)("span", { className: "pbb-label" }, translateWith(props.t, "advanced.protocolVersion")), (0, react.createElement)("span", { className: "pbb-value" }, "v" + String(report.protocolVersion)))), (0, react.createElement)("div", {
-					className: "pbb-runtimeRow",
-					key: "server"
-				}, (0, react.createElement)("div", { className: "pbb-row" }, (0, react.createElement)("span", { className: "pbb-label" }, translateWith(props.t, "advanced.serverVersion")), (0, react.createElement)("span", { className: "pbb-value" }, report.serverVersion))), (0, react.createElement)("div", {
-					className: "pbb-runtimeRow",
-					key: "path"
-				}, (0, react.createElement)("div", { className: "pbb-row" }, (0, react.createElement)("span", { className: "pbb-label" }, translateWith(props.t, "advanced.identityPath")), (0, react.createElement)("span", { className: "pbb-value" }, report.identityPath))), (0, react.createElement)("div", {
-					className: "pbb-runtimeRow",
-					key: "buffer"
-				}, (0, react.createElement)("div", { className: "pbb-row" }, (0, react.createElement)("span", { className: "pbb-label" }, translateWith(props.t, "advanced.bufferMax")), (0, react.createElement)("span", { className: "pbb-value" }, String(report.historyBufferMax) + translateWith(props.t, "advanced.frames")))));
-			}
-			const revokeDevice = (deviceId, name) => {
+			if (report !== null) advancedRows.push((0, react.createElement)("div", {
+				className: "pbb-runtimeRow",
+				key: "proto"
+			}, (0, react.createElement)("div", { className: "pbb-row" }, (0, react.createElement)("span", { className: "pbb-label" }, translateWith(props.t, "advanced.protocolVersion")), (0, react.createElement)("span", { className: "pbb-value" }, "v" + String(report.protocolVersion)))), (0, react.createElement)("div", {
+				className: "pbb-runtimeRow",
+				key: "server"
+			}, (0, react.createElement)("div", { className: "pbb-row" }, (0, react.createElement)("span", { className: "pbb-label" }, translateWith(props.t, "advanced.serverVersion")), (0, react.createElement)("span", { className: "pbb-value" }, report.serverVersion))), (0, react.createElement)("div", {
+				className: "pbb-runtimeRow",
+				key: "path"
+			}, (0, react.createElement)("div", { className: "pbb-row" }, (0, react.createElement)("span", { className: "pbb-label" }, translateWith(props.t, "advanced.identityPath")), (0, react.createElement)("span", { className: "pbb-value" }, report.identityPath))), (0, react.createElement)("div", {
+				className: "pbb-runtimeRow",
+				key: "buffer"
+			}, (0, react.createElement)("div", { className: "pbb-row" }, (0, react.createElement)("span", { className: "pbb-label" }, translateWith(props.t, "advanced.bufferMax")), (0, react.createElement)("span", { className: "pbb-value" }, String(report.historyBufferMax) + translateWith(props.t, "advanced.frames")))));
+			const revokeDevice = (deviceId, _name) => {
 				if (!can("revokeDevice")) return;
-				if (typeof window !== "undefined" && !window.confirm(translateWith(props.t, "devices.revokeConfirm", { name }))) return;
 				setDeviceBusy(deviceId);
 				setDeviceBusyAction("revoke");
 				setDeviceMessage("");
@@ -4468,6 +4539,7 @@ window.__ModuleLoader__.load({
 			};
 			const deviceLabel$1 = (device) => deviceLabel(device) || translateWith(props.t, "devices.unnamed");
 			const beginDeviceRename = (device) => {
+				setArmedRevokeDeviceId(null);
 				setEditingDeviceId(device.deviceId);
 				setDeviceNameDraft(device.customName ?? device.deviceName);
 				setDeviceMessage("");
@@ -4499,20 +4571,28 @@ window.__ModuleLoader__.load({
 				});
 			};
 			const visibleDevices$1 = visibleDevices(report);
-			const deviceTable = visibleDevices$1.length > 0 ? (0, react.createElement)("div", { className: "pbb-tableWrap" }, (0, react.createElement)("table", { className: "pbb-table" }, (0, react.createElement)("thead", null, (0, react.createElement)("tr", null, (0, react.createElement)("th", null, translateWith(props.t, "devices.col.name")), (0, react.createElement)("th", null, translateWith(props.t, "devices.col.lastSeen")), (0, react.createElement)("th", { className: "pbb-tableActionHead" }, translateWith(props.t, "devices.col.actions")))), (0, react.createElement)("tbody", null, visibleDevices$1.map((d) => {
+			const deviceRows = visibleDevices$1.length > 0 ? (0, react.createElement)("div", { className: "pbb-deviceList" }, visibleDevices$1.map((d) => {
 				const editing = editingDeviceId === d.deviceId;
 				const busy = deviceBusy === d.deviceId;
 				const label = deviceLabel$1(d);
-				return (0, react.createElement)("tr", {
+				const fingerprint = d.fingerprint ?? "";
+				const armed = armedRevokeDeviceId === d.deviceId;
+				return (0, react.createElement)("div", {
+					className: "pbb-deviceRow",
 					key: d.deviceId,
-					"aria-busy": busy
-				}, (0, react.createElement)("td", null, editing ? (0, react.createElement)("form", {
+					"data-armed": armed || void 0,
+					"aria-busy": busy,
+					"aria-label": translateWith(props.t, "devices.col.name") + ": " + label
+				}, (0, react.createElement)("div", { className: "pbb-deviceMain" }, (0, react.createElement)("div", { className: "pbb-deviceNameRow" }, (0, react.createElement)("span", {
+					className: "pbb-deviceName",
+					title: label
+				}, label), d.customName ? (0, react.createElement)("span", { className: "pbb-badge" }, translateWith(props.t, "devices.customBadge")) : null), (0, react.createElement)("div", { className: "pbb-deviceMeta" }, (0, react.createElement)("span", null, d.appVersion), (0, react.createElement)("code", { title: fingerprint }, fingerprint.slice(0, 12)), (0, react.createElement)("span", null, translateWith(props.t, "devices.col.lastSeen") + ": " + formatLastSeen(d.lastSeenTs)))), editing ? (0, react.createElement)("form", {
 					className: "pbb-deviceRenameForm",
 					onSubmit: (event) => {
 						event.preventDefault();
 						saveDeviceName(d.deviceId);
 					}
-				}, (0, react.createElement)("div", { className: "pbb-deviceRenameControls" }, (0, react.createElement)("input", {
+				}, (0, react.createElement)("input", {
 					className: "pbb-deviceNameInput",
 					type: "text",
 					value: deviceNameDraft,
@@ -4533,21 +4613,21 @@ window.__ModuleLoader__.load({
 					}
 				}), (0, react.createElement)("div", { className: "pbb-deviceRenameActions" }, (0, react.createElement)("button", {
 					type: "submit",
-					className: "pbb-action pbb-deviceIconAction pbb-buttonPrimary",
+					className: "pbb-action pbb-buttonPrimary",
 					disabled: busy || deviceNameDraft.length > 64,
 					title: busy ? translateWith(props.t, "devices.nameSaving") : translateWith(props.t, "devices.nameSave"),
 					"aria-label": busy ? translateWith(props.t, "devices.nameSaving") : translateWith(props.t, "devices.nameSave")
-				}, busy ? (0, react.createElement)("span", {
-					className: "pbb-inlineSpinner",
-					"aria-hidden": true
-				}) : CheckIcon()), (0, react.createElement)("button", {
+				}, busy ? translateWith(props.t, "devices.nameSaving") : translateWith(props.t, "devices.nameSave")), (0, react.createElement)("button", {
 					type: "button",
-					className: "pbb-action pbb-deviceIconAction",
+					className: "pbb-action",
 					disabled: busy,
 					title: translateWith(props.t, "devices.nameCancel"),
 					"aria-label": translateWith(props.t, "devices.nameCancel"),
 					onClick: cancelDeviceRename
-				}, CloseIcon()))), deviceNameDraft.length > 64 ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, translateWith(props.t, "devices.nameInvalid")) : null) : (0, react.createElement)("div", null, (0, react.createElement)("div", { className: "pbb-deviceNameRow" }, (0, react.createElement)("span", { className: "pbb-deviceName" }, label), d.customName ? (0, react.createElement)("span", { className: "pbb-badge" }, translateWith(props.t, "devices.customBadge")) : null), (0, react.createElement)("span", { className: "pbb-deviceMeta" }, d.appVersion, " · ", (0, react.createElement)("code", null, (d.fingerprint ?? "").slice(0, 12))))), (0, react.createElement)("td", { className: "pbb-lastSeen" }, new Date(d.lastSeenTs ?? 0).toLocaleString()), (0, react.createElement)("td", { className: "pbb-tableActionCell" }, !editing ? (0, react.createElement)("button", {
+				}, translateWith(props.t, "devices.nameCancel"))), deviceNameDraft.length > 64 ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, translateWith(props.t, "devices.nameInvalid")) : null) : null, armed ? null : (0, react.createElement)("div", {
+					className: "pbb-deviceActions",
+					"aria-label": translateWith(props.t, "devices.col.actions")
+				}, !editing ? (0, react.createElement)("button", {
 					type: "button",
 					className: "pbb-action",
 					disabled: busy || editingDeviceId !== null || !can("setDeviceName"),
@@ -4558,9 +4638,27 @@ window.__ModuleLoader__.load({
 					className: "pbb-action pbb-actionDangerGhost",
 					disabled: busy,
 					"aria-label": busy && deviceBusyAction === "revoke" ? translateWith(props.t, "devices.deleting", { name: label }) : translateWith(props.t, "devices.revokeAria", { name: label }),
-					onClick: () => revokeDevice(d.deviceId, label)
-				}, busy && deviceBusyAction === "revoke" ? null : TrashIcon(), busy && deviceBusyAction === "revoke" ? (0, react.createElement)("span", { className: "pbb-actionBusy" }, translateWith(props.t, "devices.deleting")) : translateWith(props.t, "devices.revoke"))));
-			})))) : (0, react.createElement)("p", { className: "pbb-empty" }, translateWith(props.t, "devices.empty"));
+					onClick: () => {
+						cancelDeviceRename();
+						setArmedRevokeDeviceId(d.deviceId);
+					}
+				}, busy && deviceBusyAction === "revoke" ? null : TrashIcon(), busy && deviceBusyAction === "revoke" ? (0, react.createElement)("span", { className: "pbb-actionBusy" }, translateWith(props.t, "devices.deleting")) : translateWith(props.t, "devices.revoke"))), armed && !busy ? (0, react.createElement)("div", { className: "pbb-deviceConfirm" }, (0, react.createElement)("p", {
+					className: "pbb-diag pbb-diagBad",
+					role: "alert"
+				}, translateWith(props.t, "devices.revokeConfirm", { name: label })), (0, react.createElement)("div", { className: "pbb-rowAction" }, (0, react.createElement)("button", {
+					type: "button",
+					className: "pbb-action pbb-actionDangerGhost",
+					"aria-label": translateWith(props.t, "devices.revokeAria", { name: label }),
+					onClick: () => {
+						setArmedRevokeDeviceId(null);
+						revokeDevice(d.deviceId, label);
+					}
+				}, translateWith(props.t, "devices.revoke")), (0, react.createElement)("button", {
+					type: "button",
+					className: "pbb-action",
+					onClick: () => setArmedRevokeDeviceId(null)
+				}, translateWith(props.t, "devices.nameCancel")))) : null);
+			})) : (0, react.createElement)("p", { className: "pbb-empty" }, translateWith(props.t, "devices.empty"));
 			const switchTitle = translateWith(props.t, "master.title");
 			const switchDesc = switchReady ? enabled ? translateWith(props.t, "master.on") : translateWith(props.t, "master.off") : translateWith(props.t, "master.loading");
 			const localMeta = report === null ? null : LOCAL_PHASE_META[report.local.phase];
@@ -4573,6 +4671,10 @@ window.__ModuleLoader__.load({
 			});
 			const serviceStatusText = translateWith(props.t, SERVICE_STATUS_KEY[service.kind]);
 			const serviceDot = service.dot;
+			const localPhaseText = localMeta === null ? translateWith(props.t, "phase.unknown") : translateWith(props.t, LOCAL_LABEL_KEY[localMeta.label]);
+			const remotePhaseText = remoteMeta === null ? translateWith(props.t, "phase.unknown") : translateWith(props.t, REMOTE_LABEL_KEY[remoteMeta.label]);
+			const localStateText = localMeta === null ? translateWith(props.t, "phase.unknown") : translateWith(props.t, CHANNEL_STATE_KEY[localMeta.label]);
+			const remoteStateText = remoteMeta === null ? translateWith(props.t, "phase.unknown") : translateWith(props.t, CHANNEL_STATE_KEY[remoteMeta.label]);
 			/** 一条失败事件的单行文本：时间 · 类型 · 分因，附带可选排查字段。 */
 			const diagnosticLine = (failure) => {
 				const base = translateWith(props.t, "diagnostics.item", {
@@ -4625,17 +4727,98 @@ window.__ModuleLoader__.load({
 				className: "pbb-action",
 				onClick: copyDiagnostics,
 				"data-testid": "diagnosticsCopy"
-			}, translateWith(props.t, "diagnostics.copy"))), diagnosticsCopy.message ? (0, react.createElement)("p", { className: "pbb-diag" + (diagnosticsCopy.failed ? " pbb-diagBad" : "") }, diagnosticsCopy.message) : null, report.diagnostics === void 0 ? (0, react.createElement)("p", { className: "pbb-diag" }, translateWith(props.t, "diagnostics.staleHost")) : report.diagnostics.recentFailures.length === 0 ? (0, react.createElement)("p", { className: "pbb-diag" }, translateWith(props.t, "diagnostics.empty")) : (0, react.createElement)("div", null, (0, react.createElement)("span", { className: "pbb-label" }, translateWith(props.t, "diagnostics.recent")), report.diagnostics.recentFailures.slice(-5).reverse().map((failure, index) => (0, react.createElement)("p", {
+			}, translateWith(props.t, "diagnostics.copy"))), diagnosticsCopy.message ? (0, react.createElement)("p", {
+				className: "pbb-diag" + (diagnosticsCopy.failed ? " pbb-diagBad" : ""),
+				role: "status"
+			}, diagnosticsCopy.message) : null, report.diagnostics === void 0 ? (0, react.createElement)("p", { className: "pbb-diag" }, translateWith(props.t, "diagnostics.staleHost")) : report.diagnostics.recentFailures.length === 0 ? (0, react.createElement)("p", { className: "pbb-diag" }, translateWith(props.t, "diagnostics.empty")) : (0, react.createElement)("div", null, (0, react.createElement)("span", { className: "pbb-label" }, translateWith(props.t, "diagnostics.recent")), report.diagnostics.recentFailures.slice(-5).reverse().map((failure, index) => (0, react.createElement)("p", {
 				className: "pbb-diag",
 				key: String(index)
 			}, diagnosticLine(failure)))));
+			/** 状态总览的一格：标签 / 点位 + 值 / 次行；整格 title 兜住被裁掉的全文。
+			*  dot 为 null 表示这一格是计数而非状态，不画点位（灰点会被读成「未启用」）。 */
+			const statusCell = (label, dot, value, sub) => (0, react.createElement)("div", {
+				className: "pbb-statusCell",
+				title: label + " · " + value + (sub === "" ? "" : " · " + sub)
+			}, (0, react.createElement)("div", { className: "pbb-statusLabel" }, label), (0, react.createElement)("div", { className: "pbb-statusValue" }, dot === null ? null : (0, react.createElement)("span", { className: "pbb-dot" + dot }), value), (0, react.createElement)("div", { className: "pbb-statusSub" }, sub));
+			/** 折叠区：grid-rows 0fr→1fr 平滑开合（mockup 的做法），不用 <details> 的瞬时跳变。 */
+			const fold = (open, body) => (0, react.createElement)("div", { className: "pbb-fold" + (open ? "" : " pbb-foldClosed") }, (0, react.createElement)("div", null, body));
+			/** 配对倒计时：仅在 QR 面板打开且 grant 在场时每秒刷新一次。 */
+			(0, react.useEffect)(() => {
+				if (!panel.open || pairingPanel.grant === null) return;
+				const timer = globalThis.setInterval(() => setNowMs(Date.now()), 1e3);
+				return () => globalThis.clearInterval(timer);
+			}, [panel.open, pairingPanel.grant]);
+			const grantRemainingMs = pairingPanel.grant === null ? 0 : Math.max(0, pairingPanel.grant.expiresAt - nowMs);
+			const grantRemainingText = String(Math.floor(grantRemainingMs / 6e4)) + ":" + String(Math.floor(grantRemainingMs / 1e3) % 60).padStart(2, "0");
+			const grantRemainingPct = Math.min(100, grantRemainingMs / 3e5 * 100);
+			const localDesc = localSwitchReady ? localEnabled ? translateWith(props.t, "local.on", { port: localPort }) : translateWith(props.t, "local.off") : translateWith(props.t, "master.loading");
+			const remoteDesc = remoteSwitchReady ? remoteEnabled ? translateWith(props.t, "remote.on") : translateWith(props.t, "remote.off") : translateWith(props.t, "master.loading");
+			/** 端点 → 状态条副行只暴露 host[:port]，去掉协议前缀让一行能放下。 */
+			const endpointHost = (value) => {
+				if (value === void 0 || value === "") return void 0;
+				try {
+					return new URL(value).host;
+				} catch {
+					return value;
+				}
+			};
+			const localStatusSub = !localSwitchReady ? translateWith(props.t, "master.loading") : report !== null && report.local.phase === "online" ? endpointHost(report.local.endpoints[0]) ?? localDesc : report !== null && report.local.phase === "error" ? report.local.message !== void 0 && report.local.message !== "" ? report.local.message : localDesc : report !== null && (report.local.phase === "disabled" || report.local.phase === "stopped") ? translateWith(props.t, "local.off") : localDesc;
+			const remoteStatusSub = !remoteSwitchReady ? translateWith(props.t, "master.loading") : report !== null && report.remote.phase === "online" ? endpointHost(report.remote.publicURL) ?? remoteDesc : report !== null && report.remote.phase === "error" ? report.remote.message !== void 0 && report.remote.message !== "" ? report.remote.message : remoteDesc : report !== null && report.remote.phase === "disabled" ? translateWith(props.t, "remote.off") : remoteDesc;
+			const isOffPhase = (phase) => phase === "disabled" || phase === "stopped";
+			const localSettled = report === null || (localEnabled ? report.local.phase === "online" : isOffPhase(report.local.phase));
+			const remoteSettled = report === null || (remoteEnabled ? report.remote.phase === "online" : isOffPhase(report.remote.phase));
+			const localChannelDesc = localSettled ? localDesc : localPhaseText + " · " + localDesc;
+			const remoteChannelDesc = remoteSettled ? remoteDesc : remotePhaseText + " · " + remoteDesc;
+			const recentFailures = report?.diagnostics?.recentFailures ?? [];
+			const troubleGood = relayTestResult !== null ? relayTestResult.overall === "ok" : pushTestResult !== null ? pushTestResult.overall === "sent" : false;
+			const troubleBad = relayTestResult !== null ? relayTestResult.overall !== "ok" : pushTestResult !== null ? pushTestResult.overall !== "sent" : recentFailures.length > 0;
+			const troubleConclusion = relayTestResult !== null ? relayTestResult.overall === "ok" ? translateWith(props.t, "push.relayOk") : translateWith(props.t, "push.relayBad") : pushTestResult !== null ? pushTestResult.overall === "sent" ? translateWith(props.t, "push.pushSent") : translateWith(props.t, "push.pushFailed") : recentFailures.length > 0 ? translateWith(props.t, "diagnostics.recent") + " " + String(recentFailures.length) : translateWith(props.t, "troubleshooting.title");
 			return (0, react.createElement)("div", { className: "pbb-section" }, (0, react.createElement)("header", { className: "pbb-pageHeader" }, (0, react.createElement)("div", null, (0, react.createElement)("h2", { className: "pbb-title" }, "DeepPilot"), (0, react.createElement)("p", { className: "pbb-intro" }, translateWith(props.t, "meta.intro"))), (0, react.createElement)("button", {
 				type: "button",
 				className: "pbb-refresh",
 				onClick: () => {
 					if (can("refresh")) props.refresh();
 				}
-			}, translateWith(props.t, "meta.refresh"))), (0, react.createElement)("div", { className: "pbb-card pbb-primaryCard" }, (0, react.createElement)("div", { className: "pbb-cardHeader" }, (0, react.createElement)("div", null, (0, react.createElement)("h3", { className: "pbb-cardTitle" }, translateWith(props.t, "connection.title")), (0, react.createElement)("p", { className: "pbb-cardDescription" }, translateWith(props.t, "connection.description"))), (0, react.createElement)("span", { className: "pbb-statusBadge" }, (0, react.createElement)("span", { className: "pbb-dot" + serviceDot }), serviceStatusText)), (0, react.createElement)("div", { className: "pbb-masterRow" }, (0, react.createElement)("div", { className: "pbb-switchText" }, (0, react.createElement)("span", { className: "pbb-switchTitle" }, switchTitle), (0, react.createElement)("span", { className: "pbb-switchDesc" }, switchDesc)), (0, react.createElement)("button", {
+			}, translateWith(props.t, "meta.refresh"))), (0, react.createElement)("section", { className: "pbb-statusStrip" }, statusCell(translateWith(props.t, "master.title"), serviceDot, serviceStatusText, switchDesc), statusCell(translateWith(props.t, "local.title"), localMeta?.dot ?? "", localStateText, localStatusSub), statusCell(translateWith(props.t, "remote.title"), remoteMeta?.dot ?? "", remoteStateText, remoteStatusSub), statusCell(translateWith(props.t, "panel.activeConnections"), null, report === null ? translateWith(props.t, "status.loading") : String(report.activeConnections), translateWith(props.t, "panel.identity") + " · " + (report !== null && report.pairingReady ? translateWith(props.t, "panel.identityReady") : translateWith(props.t, "panel.identityNotReady")))), report === null ? null : (0, react.createElement)("div", { className: "pbb-card" }, (0, react.createElement)("div", { className: "pbb-cardHeader" }, (0, react.createElement)("div", null, (0, react.createElement)("h3", { className: "pbb-cardTitle" }, translateWith(props.t, "pair.qrPanelTitle")), (0, react.createElement)("p", { className: "pbb-cardDescription" }, translateWith(props.t, "pair.description"))), pairingTarget === null ? (0, react.createElement)("span", { className: "pbb-statusBadge" + (enabled ? " pbb-bad" : "") }, enabled ? translateWith(props.t, "pair.noAddress") : translateWith(props.t, "status.off")) : (0, react.createElement)("button", {
+				type: "button",
+				className: "pbb-action pbb-buttonPrimary",
+				disabled: panel.busy || report !== null && !report.pairingReady,
+				onClick: () => {
+					if (pairingTarget === null) return;
+					if (panel.open) hidePairingQR();
+					else showPairingQR(pairingTarget);
+				}
+			}, translateWith(props.t, panel.action))), (0, react.createElement)("div", { className: "pbb-pairingBody" }, pairingTarget === null ? (0, react.createElement)("p", { className: "pbb-diag" }, enabled ? translateWith(props.t, "pair.noAddressHelp") : translateWith(props.t, "pair.disabledHelp")) : null, pairingTargets.length < 2 ? null : (0, react.createElement)("div", { className: "pbb-targetList" }, pairingTargets.map((target) => (0, react.createElement)("button", {
+				type: "button",
+				key: target.host,
+				className: "pbb-targetButton" + (target.host === pairingTarget?.host ? " pbb-targetSelected" : ""),
+				disabled: panel.busy,
+				onClick: () => {
+					setSelectedPairingHost(target.host);
+					if (panel.open) showPairingQR(target);
+					else hidePairingQR();
+				}
+			}, (target.kind === "public" ? translateWith(props.t, "pair.kind.public") : translateWith(props.t, "pair.kind.lan")) + " · " + target.host))), panel.message ? (0, react.createElement)("p", {
+				className: "pbb-diag pbb-diagBad",
+				role: "alert"
+			}, panel.message) : null, panel.notice ? (0, react.createElement)("p", {
+				className: "pbb-diag",
+				role: "status"
+			}, panel.notice) : null, panel.failed && pairingTarget !== null ? (0, react.createElement)("div", { className: "pbb-rowAction" }, (0, react.createElement)("button", {
+				type: "button",
+				className: "pbb-action",
+				disabled: panel.busy || report !== null && !report.pairingReady,
+				onClick: () => showPairingQR(pairingTarget)
+			}, translateWith(props.t, "pair.qrRetry"))) : null, panel.open && !panel.failed ? (0, react.createElement)("div", { className: "pbb-qrPanel" }, (0, react.createElement)("div", null, panel.qrDataURL === null ? (0, react.createElement)("p", { className: "pbb-diag" }, translateWith(props.t, "pair.qrGenerating")) : (0, react.createElement)("img", {
+				className: "pbb-qrImage",
+				src: panel.qrDataURL,
+				alt: translateWith(props.t, "pair.qrAlt")
+			}), pairingPanel.grant === null ? null : (0, react.createElement)("div", { className: "pbb-countdown" }, (0, react.createElement)("div", { className: "pbb-countdownBar" }, (0, react.createElement)("i", { style: { transform: "scaleX(" + String(grantRemainingPct / 100) + ")" } })), (0, react.createElement)("span", { className: "pbb-countdownText" }, grantRemainingText))), (0, react.createElement)("div", { className: "pbb-pairInfo" }, panel.link === null ? null : (0, react.createElement)("div", { className: "pbb-pairCodeBlock" }, (0, react.createElement)("span", { className: "pbb-pairCodeLabel" }, translateWith(props.t, "pair.infoLabel")), (0, react.createElement)("div", { className: "pbb-pairCodeRow" }, (0, react.createElement)("code", { className: "pbb-pairCode" }, panel.link), (0, react.createElement)("button", {
+				type: "button",
+				className: "pbb-action pbb-buttonPrimary",
+				onClick: copyPairingInfo,
+				"data-testid": "pairingInfoCopy"
+			}, translateWith(props.t, "panel.tokenAction.copy")))), (0, react.createElement)("p", { className: "pbb-qrHint" }, translateWith(props.t, "pair.qrHint", { kind: panel.target?.kind === "public" ? translateWith(props.t, "pair.kind.public") : translateWith(props.t, "pair.kind.lan") })))) : null)), (0, react.createElement)("div", { className: "pbb-card" }, (0, react.createElement)("div", { className: "pbb-cardHeader" }, (0, react.createElement)("div", null, (0, react.createElement)("h3", { className: "pbb-cardTitle" }, translateWith(props.t, "connection.title")), (0, react.createElement)("p", { className: "pbb-cardDescription" }, translateWith(props.t, "connection.description")))), (0, react.createElement)("div", { className: "pbb-cardBody" }, (0, react.createElement)("div", { className: "pbb-masterRow" }, (0, react.createElement)("div", { className: "pbb-switchText" }, (0, react.createElement)("span", { className: "pbb-switchTitle" }, switchTitle), (0, react.createElement)("span", { className: "pbb-switchDesc" }, switchDesc)), (0, react.createElement)("button", {
 				type: "button",
 				role: "switch",
 				"aria-checked": enabled,
@@ -4645,16 +4828,22 @@ window.__ModuleLoader__.load({
 				onClick: () => {
 					if (can("setEnabled")) props.setDeepPilotEnabled(!enabled);
 				}
-			})), (0, react.createElement)("div", { className: "pbb-connectionGrid" }, renderConnectionTile("local", translateWith(props.t, "local.title"), localSwitchReady ? localEnabled ? translateWith(props.t, "local.on", { port: localPort }) : translateWith(props.t, "local.off") : translateWith(props.t, "master.loading"), localEnabled, localSwitchReady, localMeta?.dot ?? "", localMeta === null ? translateWith(props.t, "phase.unknown") : translateWith(props.t, LOCAL_LABEL_KEY[localMeta.label]), () => {
-				if (can("setLocalEnabled")) props.setDeepPilotLocalEnabled(!localEnabled);
-			}, (0, react.createElement)(react.Fragment, null, report !== null && report.local.message && report.local.phase === "error" ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, report.local.message) : null, report !== null && report.local.tlsIdentityRegenerated === true ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, translateWith(props.t, "local.tlsRegenerated")) : null)), renderConnectionTile("remote", translateWith(props.t, "remote.title"), remoteSwitchReady ? remoteEnabled ? translateWith(props.t, "remote.on") : translateWith(props.t, "remote.off") : translateWith(props.t, "master.loading"), remoteEnabled, remoteSwitchReady, remoteMeta?.dot ?? "", remoteMeta === null ? translateWith(props.t, "phase.unknown") : translateWith(props.t, REMOTE_LABEL_KEY[remoteMeta.label]), () => {
-				if (can("setRemoteEnabled")) props.setDeepPilotRemoteEnabled(!remoteEnabled);
-			}, (0, react.createElement)(react.Fragment, null, report !== null && report.remote.phase === "login_required" && typeof report.remote.authURL === "string" && report.remote.authURL.startsWith("https://") ? (0, react.createElement)("div", { className: "pbb-rowAction" }, (0, react.createElement)("a", {
-				className: "pbb-action pbb-buttonPrimary",
-				href: report.remote.authURL,
-				target: "_blank",
-				rel: "noreferrer"
-			}, translateWith(props.t, "remote.openAuth"))) : null, report !== null && report.remote.message && (report.remote.phase === "error" || report.remote.phase === "unavailable") ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, report.remote.message) : null))), report === null ? null : (0, react.createElement)("div", { className: "pbb-statGrid" }, primaryRows), (0, react.createElement)("details", { className: "pbb-inlineDetails" }, (0, react.createElement)("summary", null, translateWith(props.t, "connection.optionsSummary")), (0, react.createElement)("div", { className: "pbb-helpBody" }, (0, react.createElement)("div", { className: "pbb-limitRow pbb-limitNested" }, (0, react.createElement)("div", { className: "pbb-switchText" }, (0, react.createElement)("label", {
+			})), (0, react.createElement)("div", { className: "pbb-channel" }, (0, react.createElement)("div", { className: "pbb-row" }, (0, react.createElement)("div", { className: "pbb-switchText" }, (0, react.createElement)("span", { className: "pbb-switchTitle" }, (0, react.createElement)("span", { className: "pbb-dot" + (localMeta?.dot ?? "") }), " ", translateWith(props.t, "local.title")), (0, react.createElement)("span", { className: "pbb-switchDesc" }, localChannelDesc)), (0, react.createElement)("button", {
+				type: "button",
+				role: "switch",
+				"aria-checked": localEnabled,
+				"aria-label": translateWith(props.t, "local.title"),
+				disabled: !localSwitchReady,
+				className: "pbb-switch" + (localEnabled ? " pbb-switchOn" : ""),
+				onClick: () => {
+					if (can("setLocalEnabled")) props.setDeepPilotLocalEnabled(!localEnabled);
+				}
+			})), report !== null && report.local.message && report.local.phase === "error" ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, report.local.message) : null, report !== null && report.local.tlsIdentityRegenerated === true ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, translateWith(props.t, "local.tlsRegenerated")) : null, (0, react.createElement)("button", {
+				type: "button",
+				className: "pbb-expand",
+				"aria-expanded": localOptionsOpen,
+				onClick: () => setLocalOptionsOpen(!localOptionsOpen)
+			}, translateWith(props.t, "connection.optionsSummary"), " ", (0, react.createElement)("span", { className: "pbb-chev" }, ChevronIcon())), fold(localOptionsOpen, (0, react.createElement)("div", { className: "pbb-channelBody" }, (0, react.createElement)("div", { className: "pbb-limitRow" }, (0, react.createElement)("div", { className: "pbb-switchText" }, (0, react.createElement)("label", {
 				className: "pbb-switchTitle",
 				htmlFor: "deeppilot-local-port"
 			}, translateWith(props.t, "local.portTitle")), (0, react.createElement)("span", { className: "pbb-switchDesc" }, translateWith(props.t, "local.portDescription")), !localPortView.valid ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, translateWith(props.t, "local.portInvalid")) : localPortDraft.message ? (0, react.createElement)("p", { className: "pbb-diag" + (localPortDraft.failed ? " pbb-diagBad" : "") }, localPortDraft.message) : null), (0, react.createElement)("div", { className: "pbb-limitControl" }, (0, react.createElement)("input", {
@@ -4683,7 +4872,27 @@ window.__ModuleLoader__.load({
 				className: "pbb-action",
 				disabled: !localPortReady || !localPortView.valid || localPortView.unchanged,
 				onClick: applyLocalPort
-			}, translateWith(props.t, "remote.limitApply")))), (0, react.createElement)("div", { className: "pbb-limitRow pbb-limitNested" }, (0, react.createElement)("div", { className: "pbb-switchText" }, (0, react.createElement)("label", {
+			}, translateWith(props.t, "remote.limitApply")))), report !== null && report.local.phase === "online" && report.local.tlsFingerprint ? (0, react.createElement)("div", { className: "pbb-limitRow" }, (0, react.createElement)("div", { className: "pbb-switchText" }, (0, react.createElement)("span", { className: "pbb-switchTitle" }, translateWith(props.t, "local.tlsFingerprint")), (0, react.createElement)("code", { className: "pbb-token" }, report.local.tlsFingerprint))) : null))), (0, react.createElement)("div", { className: "pbb-channel" }, (0, react.createElement)("div", { className: "pbb-row" }, (0, react.createElement)("div", { className: "pbb-switchText" }, (0, react.createElement)("span", { className: "pbb-switchTitle" }, (0, react.createElement)("span", { className: "pbb-dot" + (remoteMeta?.dot ?? "") }), " ", translateWith(props.t, "remote.title")), (0, react.createElement)("span", { className: "pbb-switchDesc" }, remoteChannelDesc)), (0, react.createElement)("button", {
+				type: "button",
+				role: "switch",
+				"aria-checked": remoteEnabled,
+				"aria-label": translateWith(props.t, "remote.title"),
+				disabled: !remoteSwitchReady,
+				className: "pbb-switch" + (remoteEnabled ? " pbb-switchOn" : ""),
+				onClick: () => {
+					if (can("setRemoteEnabled")) props.setDeepPilotRemoteEnabled(!remoteEnabled);
+				}
+			})), report !== null && report.remote.phase === "login_required" && typeof report.remote.authURL === "string" && report.remote.authURL.startsWith("https://") ? (0, react.createElement)("div", { className: "pbb-rowAction" }, (0, react.createElement)("a", {
+				className: "pbb-action pbb-buttonPrimary",
+				href: report.remote.authURL,
+				target: "_blank",
+				rel: "noreferrer"
+			}, translateWith(props.t, "remote.openAuth"))) : null, report !== null && report.remote.message && (report.remote.phase === "error" || report.remote.phase === "unavailable") ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, report.remote.message) : null, (0, react.createElement)("button", {
+				type: "button",
+				className: "pbb-expand",
+				"aria-expanded": remoteOptionsOpen,
+				onClick: () => setRemoteOptionsOpen(!remoteOptionsOpen)
+			}, translateWith(props.t, "connection.optionsSummary"), " ", (0, react.createElement)("span", { className: "pbb-chev" }, ChevronIcon())), fold(remoteOptionsOpen, (0, react.createElement)("div", { className: "pbb-channelBody" }, (0, react.createElement)("div", { className: "pbb-limitRow" }, (0, react.createElement)("div", { className: "pbb-switchText" }, (0, react.createElement)("label", {
 				className: "pbb-switchTitle",
 				htmlFor: "deeppilot-funnel-source-limit"
 			}, translateWith(props.t, "remote.limitTitle")), (0, react.createElement)("span", { className: "pbb-switchDesc" }, translateWith(props.t, "remote.limitDescription")), !remoteLimitView.valid ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, translateWith(props.t, "remote.limitInvalid")) : remoteLimitDraft.message ? (0, react.createElement)("p", { className: "pbb-diag" + (remoteLimitDraft.failed ? " pbb-diagBad" : "") }, remoteLimitDraft.message) : null), (0, react.createElement)("div", { className: "pbb-limitControl" }, (0, react.createElement)("input", {
@@ -4712,48 +4921,20 @@ window.__ModuleLoader__.load({
 				className: "pbb-action",
 				disabled: !remoteConnectionLimitReady || !remoteLimitView.valid || remoteLimitView.unchanged,
 				onClick: applyRemoteLimit
-			}, translateWith(props.t, "remote.limitApply")))))), (0, react.createElement)("details", { className: "pbb-help" }, (0, react.createElement)("summary", null, translateWith(props.t, "help.remoteTitle")), (0, react.createElement)("div", { className: "pbb-helpBody" }, (0, react.createElement)("div", { className: "pbb-helpSection" }, (0, react.createElement)("div", { className: "pbb-helpHeading" }, translateWith(props.t, "help.recommended")), (0, react.createElement)("ol", { className: "pbb-helpList" }, (0, react.createElement)("li", null, translateWith(props.t, "help.step1")), (0, react.createElement)("li", null, translateWith(props.t, "help.step2")), (0, react.createElement)("li", null, translateWith(props.t, "help.step3")), (0, react.createElement)("li", null, translateWith(props.t, "help.step4"))), (0, react.createElement)("p", { className: "pbb-helpText" }, translateWith(props.t, "help.funnelHint"))), (0, react.createElement)("div", { className: "pbb-helpSection" }, (0, react.createElement)("div", { className: "pbb-helpHeading" }, translateWith(props.t, "help.httpsTitle")), (0, react.createElement)("ol", { className: "pbb-helpList" }, (0, react.createElement)("li", null, translateWith(props.t, "help.httpsStep1")), (0, react.createElement)("li", null, translateWith(props.t, "help.httpsStep2")), (0, react.createElement)("li", null, translateWith(props.t, "help.httpsStep3"))), (0, react.createElement)("p", { className: "pbb-helpText" }, translateWith(props.t, "help.httpsHint"))), (0, react.createElement)("div", { className: "pbb-helpSection" }, (0, react.createElement)("div", { className: "pbb-helpHeading" }, translateWith(props.t, "help.allowTitle")), (0, react.createElement)("p", { className: "pbb-helpText" }, translateWith(props.t, "help.allowBody")), (0, react.createElement)("code", { className: "pbb-helpCode" }, "\"nodeAttrs\": [\n  {\n    \"target\": [\"autogroup:member\"],\n    \"attr\": [\"funnel\"],\n  },\n],"), (0, react.createElement)("p", { className: "pbb-helpText" }, translateWith(props.t, "help.allowHint"))), (0, react.createElement)("div", { className: "pbb-helpSection" }, (0, react.createElement)("div", { className: "pbb-helpHeading" }, translateWith(props.t, "help.faqTitle")), (0, react.createElement)("ul", { className: "pbb-helpList" }, (0, react.createElement)("li", null, translateWith(props.t, "help.faq1")), (0, react.createElement)("li", null, translateWith(props.t, "help.faq2")), (0, react.createElement)("li", null, translateWith(props.t, "help.faq3")), (0, react.createElement)("li", null, translateWith(props.t, "help.faq4")))), (0, react.createElement)("div", { className: "pbb-helpSection" }, (0, react.createElement)("div", { className: "pbb-helpHeading" }, translateWith(props.t, "help.securityTitle")), (0, react.createElement)("ul", { className: "pbb-helpList" }, (0, react.createElement)("li", null, translateWith(props.t, "help.security1")), (0, react.createElement)("li", null, translateWith(props.t, "help.security2")), (0, react.createElement)("li", null, translateWith(props.t, "help.security3")), (0, react.createElement)("li", null, translateWith(props.t, "help.security4")), (0, react.createElement)("li", null, translateWith(props.t, "help.security5"))), (0, react.createElement)("p", { className: "pbb-helpText" }, translateWith(props.t, "help.docsPrefix"), (0, react.createElement)("a", {
+			}, translateWith(props.t, "remote.limitApply")))), (0, react.createElement)("div", { className: "pbb-helpBody" }, (0, react.createElement)("div", { className: "pbb-helpSection" }, (0, react.createElement)("div", { className: "pbb-helpHeading" }, translateWith(props.t, "help.remoteTitle")), (0, react.createElement)("div", { className: "pbb-helpHeading" }, translateWith(props.t, "help.recommended")), (0, react.createElement)("ol", { className: "pbb-helpList" }, (0, react.createElement)("li", null, translateWith(props.t, "help.step1")), (0, react.createElement)("li", null, translateWith(props.t, "help.step2")), (0, react.createElement)("li", null, translateWith(props.t, "help.step3")), (0, react.createElement)("li", null, translateWith(props.t, "help.step4"))), (0, react.createElement)("p", { className: "pbb-helpText" }, translateWith(props.t, "help.funnelHint"))), (0, react.createElement)("div", { className: "pbb-helpSection" }, (0, react.createElement)("div", { className: "pbb-helpHeading" }, translateWith(props.t, "help.httpsTitle")), (0, react.createElement)("ol", { className: "pbb-helpList" }, (0, react.createElement)("li", null, translateWith(props.t, "help.httpsStep1")), (0, react.createElement)("li", null, translateWith(props.t, "help.httpsStep2")), (0, react.createElement)("li", null, translateWith(props.t, "help.httpsStep3"))), (0, react.createElement)("p", { className: "pbb-helpText" }, translateWith(props.t, "help.httpsHint"))), (0, react.createElement)("div", { className: "pbb-helpSection" }, (0, react.createElement)("div", { className: "pbb-helpHeading" }, translateWith(props.t, "help.allowTitle")), (0, react.createElement)("p", { className: "pbb-helpText" }, translateWith(props.t, "help.allowBody")), (0, react.createElement)("code", { className: "pbb-helpCode" }, "\"nodeAttrs\": [\n  {\n    \"target\": [\"autogroup:member\"],\n    \"attr\": [\"funnel\"],\n  },\n],"), (0, react.createElement)("p", { className: "pbb-helpText" }, translateWith(props.t, "help.allowHint"))), (0, react.createElement)("div", { className: "pbb-helpSection" }, (0, react.createElement)("div", { className: "pbb-helpHeading" }, translateWith(props.t, "help.faqTitle")), (0, react.createElement)("ul", { className: "pbb-helpList" }, (0, react.createElement)("li", null, translateWith(props.t, "help.faq1")), (0, react.createElement)("li", null, translateWith(props.t, "help.faq2")), (0, react.createElement)("li", null, translateWith(props.t, "help.faq3")), (0, react.createElement)("li", null, translateWith(props.t, "help.faq4")))), (0, react.createElement)("div", { className: "pbb-helpSection" }, (0, react.createElement)("div", { className: "pbb-helpHeading" }, translateWith(props.t, "help.securityTitle")), (0, react.createElement)("ul", { className: "pbb-helpList" }, (0, react.createElement)("li", null, translateWith(props.t, "help.security1")), (0, react.createElement)("li", null, translateWith(props.t, "help.security2")), (0, react.createElement)("li", null, translateWith(props.t, "help.security3")), (0, react.createElement)("li", null, translateWith(props.t, "help.security4")), (0, react.createElement)("li", null, translateWith(props.t, "help.security5"))), (0, react.createElement)("p", { className: "pbb-helpText" }, translateWith(props.t, "help.docsPrefix"), (0, react.createElement)("a", {
 				className: "pbb-helpLink",
 				href: "https://tailscale.com/docs/features/tailscale-funnel",
 				target: "_blank",
 				rel: "noreferrer"
-			}, translateWith(props.t, "help.funnelDocs"))))))), report === null ? null : (0, react.createElement)("div", { className: "pbb-card" }, (0, react.createElement)("div", { className: "pbb-cardHeader" }, (0, react.createElement)("div", null, (0, react.createElement)("h3", { className: "pbb-cardTitle" }, translateWith(props.t, "pair.qrPanelTitle")), (0, react.createElement)("p", { className: "pbb-cardDescription" }, translateWith(props.t, "pair.description"))), pairingTarget === null ? (0, react.createElement)("span", { className: "pbb-statusBadge pbb-bad" }, translateWith(props.t, "pair.noAddress")) : (0, react.createElement)("button", {
+			}, translateWith(props.t, "help.funnelDocs")))))))))), (0, react.createElement)("div", { className: "pbb-card" }, (0, react.createElement)("div", { className: "pbb-cardHeader" }, (0, react.createElement)("div", null, (0, react.createElement)("h3", { className: "pbb-cardTitle" }, translateWith(props.t, "devices.title")), (0, react.createElement)("p", { className: "pbb-cardDescription" }, translateWith(props.t, "devices.description"))), (0, react.createElement)("span", { className: "pbb-countBadge" }, String(visibleDevices$1.length))), (0, react.createElement)("div", { className: "pbb-cardBody" }, deviceMessage ? (0, react.createElement)("p", {
+				className: "pbb-diag" + (deviceMessage.startsWith(translateWith(props.t, "devices.renameFailed")) || deviceMessage.startsWith(translateWith(props.t, "devices.revokeFailed")) ? " pbb-diagBad" : ""),
+				role: "status"
+			}, deviceMessage) : null, deviceRows)), (0, react.createElement)("div", { className: "pbb-card" }, (0, react.createElement)("button", {
 				type: "button",
-				className: "pbb-action pbb-buttonPrimary",
-				disabled: panel.busy || !report.pairingReady,
-				onClick: () => {
-					if (panel.open) hidePairingQR();
-					else showPairingQR(pairingTarget);
-				}
-			}, translateWith(props.t, panel.action))), (0, react.createElement)("div", { className: "pbb-pairingBody" }, pairingTarget === null ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, translateWith(props.t, "pair.noAddressHelp")) : null, pairingTargets.length < 2 ? null : (0, react.createElement)("div", { className: "pbb-targetList" }, pairingTargets.map((target) => (0, react.createElement)("button", {
-				type: "button",
-				key: target.host,
-				className: "pbb-targetButton" + (target.host === pairingTarget?.host ? " pbb-targetSelected" : ""),
-				disabled: panel.busy,
-				onClick: () => {
-					setSelectedPairingHost(target.host);
-					if (panel.open) showPairingQR(target);
-					else hidePairingQR();
-				}
-			}, (target.kind === "public" ? translateWith(props.t, "pair.kind.public") : translateWith(props.t, "pair.kind.lan")) + " · " + target.host))), panel.message ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, panel.message) : null, panel.notice ? (0, react.createElement)("p", { className: "pbb-diag" }, panel.notice) : null, panel.failed && pairingTarget !== null ? (0, react.createElement)("div", { className: "pbb-rowAction" }, (0, react.createElement)("button", {
-				type: "button",
-				className: "pbb-action",
-				disabled: panel.busy || !report.pairingReady,
-				onClick: () => showPairingQR(pairingTarget)
-			}, translateWith(props.t, "pair.qrRetry"))) : null, panel.open ? (0, react.createElement)("div", { className: "pbb-qrPanel" }, panel.qrDataURL === null ? (0, react.createElement)("p", { className: "pbb-diag" }, translateWith(props.t, "pair.qrGenerating")) : (0, react.createElement)("img", {
-				className: "pbb-qrImage",
-				src: panel.qrDataURL,
-				alt: translateWith(props.t, "pair.qrAlt")
-			}), panel.link === null ? null : (0, react.createElement)("div", { className: "pbb-pairCodeBlock" }, (0, react.createElement)("span", { className: "pbb-pairCodeLabel" }, translateWith(props.t, "pair.infoLabel")), (0, react.createElement)("div", { className: "pbb-pairCodeRow" }, (0, react.createElement)("code", { className: "pbb-pairCode" }, panel.link), (0, react.createElement)("button", {
-				type: "button",
-				className: "pbb-action pbb-buttonPrimary",
-				onClick: copyPairingInfo,
-				"data-testid": "pairingInfoCopy"
-			}, translateWith(props.t, "panel.tokenAction.copy")))), (0, react.createElement)("p", { className: "pbb-qrHint" }, translateWith(props.t, "pair.qrHint", { kind: panel.target?.kind === "public" ? translateWith(props.t, "pair.kind.public") : translateWith(props.t, "pair.kind.lan") }))) : null)), (0, react.createElement)("div", { className: "pbb-card" }, (0, react.createElement)("div", { className: "pbb-cardHeader" }, (0, react.createElement)("div", null, (0, react.createElement)("h3", { className: "pbb-cardTitle" }, translateWith(props.t, "devices.title")), (0, react.createElement)("p", { className: "pbb-cardDescription" }, translateWith(props.t, "devices.description"))), (0, react.createElement)("span", { className: "pbb-countBadge" }, String(visibleDevices$1.length))), (0, react.createElement)("div", { className: "pbb-cardBody" }, deviceMessage ? (0, react.createElement)("p", { className: "pbb-diag" + (deviceMessage.startsWith(translateWith(props.t, "devices.renameFailed")) || deviceMessage.startsWith(translateWith(props.t, "devices.revokeFailed")) ? " pbb-diagBad" : "") }, deviceMessage) : null, deviceTable)), (0, react.createElement)("details", {
-				className: "pbb-card pbb-disclosure",
-				open: troubleshootingOpen,
-				onToggle: (event) => setTroubleshootingOpen(event.currentTarget.open)
-			}, (0, react.createElement)("summary", null, (0, react.createElement)("span", { className: "pbb-disclosureTitle" }, translateWith(props.t, "troubleshooting.summary")), (0, react.createElement)("span", { className: "pbb-disclosureMeta" }, relayTestResult !== null ? relayTestResult.overall === "ok" ? translateWith(props.t, "push.relayOk") : translateWith(props.t, "push.relayBad") : pushTestResult !== null ? pushTestResult.overall === "sent" ? translateWith(props.t, "push.pushSent") : translateWith(props.t, "push.pushFailed") : translateWith(props.t, "troubleshooting.title"))), (0, react.createElement)("div", { className: "pbb-disclosureBody" }, (0, react.createElement)("div", { className: "pbb-sectionIntro" }, (0, react.createElement)("h3", { className: "pbb-cardTitle" }, translateWith(props.t, "troubleshooting.title")), (0, react.createElement)("p", { className: "pbb-cardDescription" }, translateWith(props.t, "troubleshooting.description"))), (0, react.createElement)("div", { className: "pbb-testGrid" }, (0, react.createElement)("div", { className: "pbb-testItem" }, (0, react.createElement)("div", { className: "pbb-switchText" }, (0, react.createElement)("span", { className: "pbb-testTitle" }, translateWith(props.t, "push.relayTitle")), (0, react.createElement)("span", { className: "pbb-testDescription" }, translateWith(props.t, "push.relayDefault"))), (0, react.createElement)("button", {
+				className: "pbb-cardHead",
+				"aria-expanded": troubleshootingOpen,
+				onClick: () => setTroubleshootingOpen(!troubleshootingOpen)
+			}, (0, react.createElement)("span", { className: "pbb-chev" }, ChevronIcon()), (0, react.createElement)("span", { className: "pbb-cardTitle" }, translateWith(props.t, "troubleshooting.summary")), (0, react.createElement)("span", { className: "pbb-cardSummary" }, translateWith(props.t, "troubleshooting.description")), (0, react.createElement)("span", { className: "pbb-badge" + (troubleGood ? " pbb-badgeOk" : troubleBad ? " pbb-badgeWarn" : "") }, troubleConclusion)), fold(troubleshootingOpen, (0, react.createElement)("div", { className: "pbb-cardBody" }, (0, react.createElement)("div", { className: "pbb-testGrid" }, (0, react.createElement)("div", { className: "pbb-testItem" }, (0, react.createElement)("div", { className: "pbb-switchText" }, (0, react.createElement)("span", { className: "pbb-testTitle" }, translateWith(props.t, "push.relayTitle")), (0, react.createElement)("span", { className: "pbb-testDescription" }, translateWith(props.t, "push.relayDefault"))), (0, react.createElement)("button", {
 				type: "button",
 				className: "pbb-action",
 				disabled: relayTestBusy,
@@ -4773,21 +4954,26 @@ window.__ModuleLoader__.load({
 				onClick: () => {
 					if (can("setDebug")) props.setDeepPilotDebug(!debugEnabled);
 				}
-			}))), relayTestError ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, relayTestError) : null, relayTestResult === null ? (0, react.createElement)("p", { className: "pbb-diag" }, translateWith(props.t, "push.relayDefault")) : (0, react.createElement)("div", { className: "pbb-helpBody" }, (0, react.createElement)("div", { className: "pbb-row" }, (0, react.createElement)("span", { className: "pbb-label" }, relayTestResult.url || translateWith(props.t, "push.relayUrlEmpty")), (0, react.createElement)("code", { className: "pbb-token " + (relayTestResult.overall === "ok" ? "pbb-ok" : "pbb-bad") }, relayTestResult.overall === "ok" ? translateWith(props.t, "push.relayOk") : translateWith(props.t, "push.relayBad"))), relayTestResult.steps.map((step, index) => (0, react.createElement)("p", {
-				className: "pbb-diag",
-				key: String(index)
-			}, (step.ok ? "✓ " : "✗ ") + (step.id === "health" ? translateWith(props.t, "push.relayStep.health") : translateWith(props.t, "push.relayStep.enroll")) + (step.latencyMs !== void 0 ? ` (${String(step.latencyMs)}ms)` : "") + " — " + step.message))), pushTestError ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, pushTestError) : null, pushTestResult === null ? (0, react.createElement)("p", { className: "pbb-diag" }, translateWith(props.t, "push.pushDefault")) : (0, react.createElement)("div", { className: "pbb-helpBody" }, (0, react.createElement)("div", { className: "pbb-row" }, (0, react.createElement)("code", { className: "pbb-token " + (pushTestResult.overall === "sent" ? "pbb-ok" : pushTestResult.overall === "failed" ? "pbb-bad" : "") }, pushTestResult.overall === "sent" ? translateWith(props.t, "push.pushSent") : pushTestResult.overall === "failed" ? translateWith(props.t, "push.pushFailed") : pushTestResult.overall === "no-targets" ? translateWith(props.t, "push.pushNoTargets") : translateWith(props.t, "push.pushNotEnabled"))), pushTestResult.message ? (0, react.createElement)("p", { className: "pbb-diag" }, pushTestResult.message) : null, pushTestResult.results.map((r, index) => (0, react.createElement)("p", {
-				className: "pbb-diag",
-				key: String(index)
-			}, (r.outcome === "sent" ? "✓ " : "✗ ") + r.name + " [" + r.environment + "] — " + r.outcome + (r.reason ? "（" + r.reason + "）" : "") + (r.tokenFingerprint ? "　token:" + r.tokenFingerprint + "…" : "")))), diagnosticsSection)), report === null ? null : (0, react.createElement)("details", { className: "pbb-card pbb-disclosure" }, (0, react.createElement)("summary", null, (0, react.createElement)("span", { className: "pbb-disclosureTitle" }, translateWith(props.t, "system.summary")), (0, react.createElement)("span", { className: "pbb-disclosureMeta" }, "v" + report.pluginVersion)), (0, react.createElement)("div", { className: "pbb-disclosureBody" }, (0, react.createElement)("div", { className: "pbb-sectionIntro" }, (0, react.createElement)("h3", { className: "pbb-cardTitle" }, translateWith(props.t, "system.title")), (0, react.createElement)("p", { className: "pbb-cardDescription" }, translateWith(props.t, "system.description"))), (0, react.createElement)("div", { className: "pbb-runtimeList" }, (0, react.createElement)("div", { className: "pbb-runtimeRow" }, (0, react.createElement)("span", { className: "pbb-label" }, "DeepPilot"), (0, react.createElement)("span", { className: "pbb-value" }, "v" + report.pluginVersion)), advancedRows, report.updateAvailable === true ? (0, react.createElement)("div", { className: "pbb-updateRow" }, (0, react.createElement)("span", null, translateWith(props.t, "update.badge")), (0, react.createElement)("a", {
-				className: "pbb-action pbb-buttonPrimary",
+			}))), relayTestError ? (0, react.createElement)("p", {
+				className: "pbb-diag pbb-diagBad",
+				role: "alert"
+			}, relayTestError) : null, relayTestResult === null ? null : (0, react.createElement)("div", { className: "pbb-helpBody" }, (0, react.createElement)("div", { className: "pbb-row" }, (0, react.createElement)("span", { className: "pbb-label" }, relayTestResult.url || translateWith(props.t, "push.relayUrlEmpty")), (0, react.createElement)("code", { className: "pbb-token " + (relayTestResult.overall === "ok" ? "pbb-ok" : "pbb-bad") }, relayTestResult.overall === "ok" ? translateWith(props.t, "push.relayOk") : translateWith(props.t, "push.relayBad"))), relayTestResult.steps.map((step, index) => resultRow(step.ok, (step.id === "health" ? translateWith(props.t, "push.relayStep.health") : translateWith(props.t, "push.relayStep.enroll")) + (step.latencyMs !== void 0 ? ` (${String(step.latencyMs)}ms)` : "") + " — " + step.message, String(index)))), pushTestError ? (0, react.createElement)("p", {
+				className: "pbb-diag pbb-diagBad",
+				role: "alert"
+			}, pushTestError) : null, pushTestResult === null ? null : (0, react.createElement)("div", { className: "pbb-helpBody" }, (0, react.createElement)("div", { className: "pbb-row" }, (0, react.createElement)("code", { className: "pbb-token " + (pushTestResult.overall === "sent" ? "pbb-ok" : pushTestResult.overall === "failed" ? "pbb-bad" : "") }, pushTestResult.overall === "sent" ? translateWith(props.t, "push.pushSent") : pushTestResult.overall === "failed" ? translateWith(props.t, "push.pushFailed") : pushTestResult.overall === "no-targets" ? translateWith(props.t, "push.pushNoTargets") : translateWith(props.t, "push.pushNotEnabled"))), pushTestResult.message ? (0, react.createElement)("p", { className: "pbb-diag" }, pushTestResult.message) : null, pushTestResult.results.map((r, index) => resultRow(r.outcome === "sent", r.name + " [" + r.environment + "] — " + r.outcome + (r.reason ? "（" + r.reason + "）" : "") + (r.tokenFingerprint ? " token:" + r.tokenFingerprint + "…" : ""), String(index)))), diagnosticsSection))), report === null ? null : (0, react.createElement)("div", { className: "pbb-card" }, (0, react.createElement)("button", {
+				type: "button",
+				className: "pbb-cardHead",
+				"aria-expanded": systemOpen,
+				onClick: () => setSystemOpen(!systemOpen)
+			}, (0, react.createElement)("span", { className: "pbb-chev" }, ChevronIcon()), (0, react.createElement)("span", { className: "pbb-cardTitle" }, translateWith(props.t, "system.summary")), (0, react.createElement)("span", { className: "pbb-cardSummary" }, translateWith(props.t, "system.description")), (0, react.createElement)("span", { className: "pbb-badge" + (report.updateAvailable === true ? " pbb-badgeOk" : "") }, "v" + report.pluginVersion + (report.updateAvailable === true ? " · " + translateWith(props.t, "update.badge") : ""))), fold(systemOpen, (0, react.createElement)("div", { className: "pbb-cardBody" }, (0, react.createElement)("div", { className: "pbb-sectionIntro" }, (0, react.createElement)("h3", { className: "pbb-cardTitle" }, translateWith(props.t, "system.title"))), (0, react.createElement)("div", { className: "pbb-runtimeList" }, (0, react.createElement)("div", { className: "pbb-runtimeRow" }, (0, react.createElement)("span", { className: "pbb-label" }, "DeepPilot"), (0, react.createElement)("span", { className: "pbb-value" }, "v" + report.pluginVersion)), (0, react.createElement)("div", { className: "pbb-runtimeRow" }, (0, react.createElement)("span", { className: "pbb-label" }, translateWith(props.t, "advanced.tailscaleVersion")), (0, react.createElement)("span", { className: "pbb-value" }, report.remote.tailscaleVersion ?? translateWith(props.t, "advanced.tailscaleVersionUnknown"))), advancedRows, report.updateAvailable === true ? (0, react.createElement)("a", {
+				className: "pbb-updateRow",
 				href: typeof report.releaseUrl === "string" && /^https:\/\//.test(report.releaseUrl) ? report.releaseUrl : "https://github.com/Mars-Sea/dsh-deeppilot/releases",
 				target: "_blank",
 				rel: "noreferrer"
-			}, translateWith(props.t, "update.badge"))) : null))), diag.length > 0 ? (0, react.createElement)("details", {
+			}, (0, react.createElement)("span", null, translateWith(props.t, "update.badge")), (0, react.createElement)("span", { className: "pbb-chev" }, ChevronIcon())) : null)))), diag.length > 0 ? (0, react.createElement)("details", {
 				className: "pbb-card pbb-disclosure pbb-diagnostics",
 				open: failed
-			}, (0, react.createElement)("summary", null, translateWith(props.t, "diag.summary")), (0, react.createElement)("div", { className: "pbb-disclosureBody" }, (0, react.createElement)("p", { className: "pbb-diag" + (failed ? " pbb-diagBad" : "") }, translateWith(props.t, "diag.prefix") + diag.join(" | ")))) : null);
+			}, (0, react.createElement)("summary", null, (0, react.createElement)("span", { className: "pbb-chev" }, ChevronIcon()), (0, react.createElement)("span", { className: "pbb-disclosureTitle" }, translateWith(props.t, "diag.summary"))), (0, react.createElement)("div", { className: "pbb-disclosureBody" }, (0, react.createElement)("p", { className: "pbb-diag" + (failed ? " pbb-diagBad" : "") }, translateWith(props.t, "diag.prefix") + diag.join(" | ")))) : null);
 		}
 		//#endregion
 		//#region src/client/config-form.ts