dsh-deeppilot 0.9.14 → 0.9.15

package/lib/client.js

@@ -27,6 +27,7 @@ window.__ModuleLoader__.load({
 			enumerable: true
 		}) : target, mod));
 		let react = require("react");
+		let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 		// src/client/snapshot-store.ts
 		function createSnapshotStore(initial) {
 			let snapshot = initial;
@@ -492,11 +493,39 @@ window.__ModuleLoader__.load({
 		*/
 		const TABLES = {
 			zh: {
+				"local.options": "局域网连接选项",
+				"remote.options": "远程连接选项",
+				"local.errorDetails": "局域网连接异常，请检查连接选项（{message}）。",
+				"remote.errorDetails": "远程连接异常，请检查授权与连接选项（{message}）。",
+				"pair.add": "添加手机",
+				"pair.close": "收起",
+				"devices.count": "{count} 台",
+				"devices.moreAria": "设备“{name}”的更多操作",
+				"tools.title": "工具与信息",
+				"diag.reportFailed": "读取连接状态失败",
+				"diagnostics.historyCount": "{count} 条历史失败记录",
+				"diagnostics.kind.upgrade": "连接请求被拒绝",
+				"diagnostics.kind.pair": "配对请求被拒绝",
+				"diagnostics.kind.auth": "设备认证失败",
+				"diagnostics.kind.opened": "连接已建立",
+				"diagnostics.kind.closed": "连接异常断开",
+				"diagnostics.kind.error": "连接发生错误",
+				"diagnostics.kind.identity": "设备身份异常",
+				"diagnostics.kind.storage": "设备信息保存失败",
+				"diagnostics.kind.unknown": "连接异常",
+				"push.outcome.sent": "已发送",
+				"push.outcome.failed": "发送失败",
+				"push.outcome.invalid": "设备推送凭据无效",
+				"push.environment.development": "开发环境",
+				"push.environment.production": "正式环境",
+				"push.environment.other": "其他环境（{environment}）",
+				"push.outcome.other": "推送状态（{outcome}）",
+				"push.resultDetail": "推送结果（{message}）",
 				"nav": "DeepPilot",
 				"meta.title": "DeepPilot",
-				"meta.intro": "把 iPhone 与这台电脑上的 DeepSeek Harness（DSH）连接起来（协议 v2）。",
+				"meta.intro": "在手机上使用这台电脑的 DSH。",
 				"meta.refresh": "刷新",
-				"master.title": "DeepPilot 连接",
+				"master.title": "允许手机连接",
 				"master.loading": "正在读取配置…",
 				"master.on": "已开启：接受手机连接。",
 				"master.off": "已关闭：不接受手机连接。",
@@ -509,11 +538,11 @@ window.__ModuleLoader__.load({
 				"connection.optionsSummary": "连接选项",
 				"pair.description": "选择连接方式并生成一次性配对信息。",
 				"devices.description": "管理已经配对的 iPhone。",
-				"troubleshooting.summary": "测试与故障排查",
+				"troubleshooting.summary": "诊断工具",
 				"troubleshooting.title": "诊断工具",
 				"troubleshooting.description": "仅在排查连接或推送问题时使用。",
 				"troubleshooting.debugTitle": "调试日志",
-				"troubleshooting.debugDescription": "打开后在 DSH host 的终端输出里打印握手、推送等诊断信息；不会打印配对令牌、APNs token 或消息内容。改动立即生效，无需重启。",
+				"troubleshooting.debugDescription": "开启后，新的手机连接会在 DSH 终端输出诊断日志；已连接手机需重连后生效。日志不包含配对码、推送凭据或消息内容。",
 				"diagnostics.title": "连接诊断",
 				"diagnostics.description": "最近的连接失败事件；可一键复制后发给维护者排查。",
 				"diagnostics.recent": "最近失败",
@@ -557,7 +586,7 @@ window.__ModuleLoader__.load({
 				"local.portApplied": "局域网端口已保存，监听器正在重新加载。",
 				"local.portInvalid": "请输入 1024–65535 之间的整数。",
 				"local.portFailed": "局域网端口保存失败：",
-				"remote.title": "远程连接（Tailscale Funnel）",
+				"remote.title": "远程连接",
 				"remote.on": "已配置：内嵌 Funnel 会自动启动并同步状态。",
 				"remote.off": "关闭：仅保留局域网连接。",
 				"remote.openAuth": "打开授权页面",
@@ -605,12 +634,12 @@ window.__ModuleLoader__.load({
 				"panel.tokenRotateWarning": "更换会使当前 Token 立即失效、断开所有手机连接；5 秒内再次点击确认。",
 				"panel.tokenRotated": "新 Token 已生效，旧 Token 已失效；请重新配对所有设备。",
 				"panel.tokenRotateFailed": "更换失败：",
-				"pair.qrPanelTitle": "扫码添加当前手机",
+				"pair.qrPanelTitle": "添加手机",
 				"pair.kind.public": "公网",
 				"pair.kind.lan": "内网",
 				"pair.noAddress": "没有可用地址",
 				"pair.noAddressHelp": "没有可用的局域网或远程入口。请确认局域网连接已启动，或启用远程连接。",
-				"pair.disabledHelp": "DeepPilot 连接已关闭。先在上方开启连接，再添加手机。",
+				"pair.disabledHelp": "请先开启“允许手机连接”，再添加手机。",
 				"pair.qrAlt": "DeepPilot 配对二维码",
 				"pair.qrShow": "显示二维码",
 				"pair.qrHide": "隐藏二维码",
@@ -621,7 +650,7 @@ window.__ModuleLoader__.load({
 				"pair.infoLabel": "配对信息（复制一次，粘贴到 App 即可）",
 				"pair.infoCopyDone": "配对信息已复制",
 				"pair.infoCopyFailed": "配对信息复制失败：",
-				"pair.qrHint": "二维码与下面的「配对信息」内容相同：包含{kind}地址、一次性配对码、证书指纹（内网时）与主机标识。在局域网与公网之间切换会立即生成对应的新配对信息，配对码 5 分钟后失效。",
+				"pair.qrHint": "二维码与「配对信息」内容相同：包含{kind}地址、一次性配对码、证书指纹（内网时）与主机标识。在局域网与公网之间切换会立即生成对应的新配对信息，配对码 5 分钟后失效。",
 				"advanced.summary": "高级信息",
 				"advanced.protocolVersion": "协议版本",
 				"advanced.serverVersion": "服务器版本",
@@ -647,9 +676,9 @@ window.__ModuleLoader__.load({
 				"push.pushNotEnabled": "推送未启用",
 				"push.relayStep.health": "服务可达",
 				"push.relayStep.enroll": "自动注册",
-				"push.prefix.ok": "✓ ",
-				"push.prefix.fail": "✗ ",
-				"devices.title": "设备",
+				"push.prefix.ok": "通过：",
+				"push.prefix.fail": "未通过：",
+				"devices.title": "已配对设备",
 				"devices.col.name": "设备",
 				"devices.col.appVersion": "App 版本",
 				"devices.col.push": "离线推送",
@@ -680,13 +709,13 @@ window.__ModuleLoader__.load({
 				"devices.pushNotRegistered": "未注册",
 				"devices.pushEnvProduction": "生产",
 				"devices.pushEnvDevelopment": "开发",
-				"devices.empty": "还没有 v2 设备。请在 iPhone 上扫描一次性配对二维码。",
+				"devices.empty": "还没有配对设备。点击“添加手机”，然后在 DeepPilot 中扫码连接。",
 				"help.remoteTitle": "远程连接帮助",
 				"help.recommended": "推荐设置流程",
-				"help.step1": "先打开\"DeepPilot 连接\"，再打开\"远程连接（Tailscale Funnel）\"。",
+				"help.step1": "先打开“允许手机连接”，再打开“远程连接”。",
 				"help.step2": "状态变为\"等待 Tailscale 授权\"后，点击\"打开授权页面\"。",
 				"help.step3": "使用有权管理此 Tailnet 的账号登录，并按授权页提示启用 Funnel。通常需要 Owner、Admin 或 Network admin 权限。",
-				"help.step4": "返回此页面并点击\"刷新\"。远程连接标题旁出现绿点后，即可扫描下方二维码添加手机。",
+				"help.step4": "返回此页面并点击“刷新”。远程连接显示“已就绪”后，点击“添加手机”并扫码。",
 				"help.funnelHint": "插件已内嵌 Tailscale 网络组件，这台电脑和手机都不需要另外安装 Tailscale App；但首次启用仍需由 Tailnet 管理员授权。",
 				"help.httpsTitle": "授权页未自动完成时：开启 HTTPS",
 				"help.httpsStep1": "打开 Tailscale 管理后台的 Network → DNS。",
@@ -745,11 +774,39 @@ window.__ModuleLoader__.load({
 				"update.badge": "有新版本"
 			},
 			en: {
+				"local.options": "LAN connection options",
+				"remote.options": "Remote connection options",
+				"local.errorDetails": "LAN connection failed. Check the connection options ({message}).",
+				"remote.errorDetails": "Remote connection failed. Check authorization and connection options ({message}).",
+				"pair.add": "Add phone",
+				"pair.close": "Collapse",
+				"devices.count": "{count} devices",
+				"devices.moreAria": "More actions for “{name}”",
+				"tools.title": "Tools and information",
+				"diag.reportFailed": "Failed to read connection status",
+				"diagnostics.historyCount": "{count} past failures",
+				"diagnostics.kind.upgrade": "Connection request rejected",
+				"diagnostics.kind.pair": "Pairing request rejected",
+				"diagnostics.kind.auth": "Device authentication failed",
+				"diagnostics.kind.opened": "Connection opened",
+				"diagnostics.kind.closed": "Connection closed unexpectedly",
+				"diagnostics.kind.error": "Connection error",
+				"diagnostics.kind.identity": "Device identity error",
+				"diagnostics.kind.storage": "Saving device information failed",
+				"diagnostics.kind.unknown": "Connection problem",
+				"push.outcome.sent": "Sent",
+				"push.outcome.failed": "Failed to send",
+				"push.outcome.invalid": "Invalid push credentials",
+				"push.environment.development": "Development",
+				"push.environment.production": "Production",
+				"push.environment.other": "Other environment ({environment})",
+				"push.outcome.other": "Push status ({outcome})",
+				"push.resultDetail": "Push result ({message})",
 				"nav": "DeepPilot",
 				"meta.title": "DeepPilot",
-				"meta.intro": "Connect your iPhone to DeepSeek Harness (DSH) on this computer (protocol v2).",
+				"meta.intro": "Use this computer’s DSH from your phone.",
 				"meta.refresh": "Refresh",
-				"master.title": "DeepPilot connection",
+				"master.title": "Allow phone connections",
 				"master.loading": "Loading settings…",
 				"master.on": "On: accepting phone connections.",
 				"master.off": "Off: not accepting phone connections.",
@@ -762,11 +819,11 @@ window.__ModuleLoader__.load({
 				"connection.optionsSummary": "Connection options",
 				"pair.description": "Choose a connection type and generate one-time pairing information.",
 				"devices.description": "Manage iPhones that are already paired.",
-				"troubleshooting.summary": "Tests and troubleshooting",
+				"troubleshooting.summary": "Diagnostic tools",
 				"troubleshooting.title": "Diagnostic tools",
 				"troubleshooting.description": "Use these only when diagnosing connection or push issues.",
 				"troubleshooting.debugTitle": "Debug logging",
-				"troubleshooting.debugDescription": "When on, prints handshake and push diagnostics to the DSH host’s terminal output; never prints pairing tokens, APNs tokens, or message content. Takes effect immediately, no restart needed.",
+				"troubleshooting.debugDescription": "New phone connections write diagnostic logs to the DSH terminal. Connected phones must reconnect to pick up the change. Logs exclude pairing codes, push credentials, and message content.",
 				"diagnostics.title": "Connection diagnostics",
 				"diagnostics.description": "Recent connection failures; copy them for troubleshooting.",
 				"diagnostics.recent": "Recent failures",
@@ -810,7 +867,7 @@ window.__ModuleLoader__.load({
 				"local.portApplied": "LAN port saved; the listener is reloading.",
 				"local.portInvalid": "Enter an integer from 1024 to 65535.",
 				"local.portFailed": "Failed to save LAN port: ",
-				"remote.title": "Remote connection (Tailscale Funnel)",
+				"remote.title": "Remote connection",
 				"remote.on": "Configured: the embedded Funnel will start and sync state automatically.",
 				"remote.off": "Off: LAN connections only.",
 				"remote.openAuth": "Open authorization page",
@@ -858,12 +915,12 @@ window.__ModuleLoader__.load({
 				"panel.tokenRotateWarning": "Rotation invalidates the current token immediately and drops every paired phone. Click again within 5s to confirm.",
 				"panel.tokenRotated": "New token active, old token invalidated. Please re-pair every device.",
 				"panel.tokenRotateFailed": "Rotation failed: ",
-				"pair.qrPanelTitle": "Scan to pair this phone",
+				"pair.qrPanelTitle": "Add phone",
 				"pair.kind.public": "Public",
 				"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.disabledHelp": "Turn on “Allow phone connections” before adding a phone.",
 				"pair.qrAlt": "DeepPilot pairing QR code",
 				"pair.qrShow": "Show QR code",
 				"pair.qrHide": "Hide QR code",
@@ -874,7 +931,7 @@ window.__ModuleLoader__.load({
 				"pair.infoLabel": "Pairing info (copy once, paste it in the app)",
 				"pair.infoCopyDone": "Pairing info copied",
 				"pair.infoCopyFailed": "Failed to copy pairing info: ",
-				"pair.qrHint": "The QR code and the pairing info below carry the same {kind} address, single-use code, certificate fingerprint (for LAN) and host identity. Switching between LAN and public issues a matching new string immediately; the code expires after 5 minutes.",
+				"pair.qrHint": "The QR code and the pairing info carry the same {kind} address, single-use code, certificate fingerprint (for LAN) and host identity. Switching between LAN and public issues a matching new string immediately; the code expires after 5 minutes.",
 				"advanced.summary": "Advanced info",
 				"advanced.protocolVersion": "Protocol version",
 				"advanced.serverVersion": "Server version",
@@ -900,9 +957,9 @@ window.__ModuleLoader__.load({
 				"push.pushNotEnabled": "Push not enabled",
 				"push.relayStep.health": "Service reachable",
 				"push.relayStep.enroll": "Auto enrollment",
-				"push.prefix.ok": "✓ ",
-				"push.prefix.fail": "✗ ",
-				"devices.title": "Devices",
+				"push.prefix.ok": "Passed: ",
+				"push.prefix.fail": "Failed: ",
+				"devices.title": "Paired devices",
 				"devices.col.name": "Device",
 				"devices.col.appVersion": "App version",
 				"devices.col.push": "Push",
@@ -933,13 +990,13 @@ window.__ModuleLoader__.load({
 				"devices.pushNotRegistered": "Not registered",
 				"devices.pushEnvProduction": "Production",
 				"devices.pushEnvDevelopment": "Development",
-				"devices.empty": "No v2 devices yet. Scan a single-use pairing QR code in DeepPilot on iPhone.",
+				"devices.empty": "No paired devices yet. Click “Add phone”, then scan the QR code in DeepPilot.",
 				"help.remoteTitle": "Remote connection help",
 				"help.recommended": "Recommended setup",
-				"help.step1": "Turn on \"DeepPilot connection\" first, then \"Remote connection (Tailscale Funnel)\".",
+				"help.step1": "Turn on “Allow phone connections”, then “Remote connection”.",
 				"help.step2": "When the status shows \"Awaiting Tailscale authorization\", click \"Open authorization page\".",
 				"help.step3": "Sign in with an account that can manage this Tailnet and follow the on-page prompts to enable Funnel. Owner / Admin / Network admin is usually required.",
-				"help.step4": "Come back to this page and click \"Refresh\". When a green dot appears next to the remote title, scan the QR code below to add your phone.",
+				"help.step4": "Return and click “Refresh”. Once the remote connection is ready, click “Add phone” and scan the QR code.",
 				"help.funnelHint": "The plugin bundles the Tailscale networking stack, so neither this computer nor the phone needs the Tailscale app — but a Tailnet administrator must approve first-time use.",
 				"help.httpsTitle": "If authorization does not complete: enable HTTPS",
 				"help.httpsStep1": "Open the Tailscale admin console → Network → DNS.",
@@ -1061,170 +1118,149 @@ window.__ModuleLoader__.load({
 			});
 		}
 		// src/client/styles.ts
-		const EASE = "cubic-bezier(0.22,1,0.36,1)";
-		const CSS = [
-			".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-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-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: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: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: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-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{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 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}",
-			".pbb-switchText{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}",
-			".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,.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-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:.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: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);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-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-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: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 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 (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");
+		const CSS = String.raw`
+.pbb-section{--pbb-ink:var(--dsw-alias-label-primary,#0f1115);--pbb-secondary:var(--dsw-alias-label-secondary,#61666b);--pbb-line:var(--dsw-alias-settings-card-stroke,var(--dsw-alias-border-l3,#e4e5e7));--pbb-fill:var(--dsw-alias-settings-card-fill,var(--dsw-alias-bg-layer-2,#fff));--pbb-soft:var(--dsw-alias-bg-module-platform,#f5f6f8);container:pbb/inline-size;max-width:760px;color:var(--pbb-ink);font-size:14px;line-height:20px;display:flex;flex-direction:column;gap:20px}
+.pbb-section *{box-sizing:border-box}
+.pbb-section :is(.pbb-action,.pbb-refresh,.pbb-iconButton,.pbb-cardHead,.pbb-menuAction,.pbb-targetButton),.pbb-section input{font-family:inherit}
+.pbb-icon{display:block;flex:none;color:inherit}
+.pbb-pageHeader{display:flex;align-items:flex-start;gap:12px;min-height:56px}
+.pbb-pageHeader>div{min-width:0;flex:1;padding-top:2px}
+.pbb-title{margin:0;font-size:20px;line-height:27px;font-weight:600;letter-spacing:-.3px}
+.pbb-intro{color:var(--pbb-secondary);font-size:14px;line-height:20px;margin:5px 0 0}
+.pbb-refresh{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:28px;padding:0 7px;flex:none;border:0;border-radius:6px;background:transparent;color:var(--pbb-secondary);font-size:12px;cursor:pointer}
+.pbb-card{border:1px solid var(--pbb-line);border-radius:18px;background:var(--pbb-fill)}
+.pbb-cardTitle{margin:0;font-size:14px;line-height:20px;font-weight:600;color:var(--pbb-ink)}
+.pbb-cardBody{display:flex;flex-direction:column;gap:12px;padding:4px 16px 16px}
+.pbb-connections>.pbb-cardBody{padding:0;gap:0}
+.pbb-row{display:flex;align-items:center;gap:8px;min-width:0}
+.pbb-masterRow{display:flex;align-items:center;gap:12px;min-height:66px;padding:11px 16px}
+.pbb-controlText{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}
+.pbb-masterRow>.pbb-controlText{gap:4px}
+.pbb-controlTitle{font-size:14px;line-height:20px;font-weight:400;color:var(--pbb-ink)}
+.pbb-masterRow .pbb-controlTitle{font-weight:600}
+.pbb-controlDescription,.pbb-diag,.pbb-label,.pbb-value{font-size:12px;line-height:18px;color:var(--pbb-secondary)}
+.pbb-serviceSummary,.pbb-channelState{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12px;line-height:18px;color:var(--pbb-secondary)}
+.pbb-serviceSummary{gap:5px}
+.pbb-serviceState{display:inline-flex}
+.pbb-metaDivider{height:10px;border-left:1px solid var(--pbb-line);margin:0 2px}
+.pbb-channel{position:relative}
+.pbb-channel::before{content:"";position:absolute;top:0;left:16px;right:16px;border-top:1px solid var(--pbb-line)}
+.pbb-channel+.pbb-channel::before{left:46px}
+.pbb-channelRow{gap:12px;min-height:60px;padding:8px 16px}
+.pbb-channelRow>.pbb-icon{color:var(--pbb-secondary)}
+.pbb-channelBody{display:flex;flex-direction:column;gap:12px;padding:2px 16px 14px 46px}
+.pbb-channel>.pbb-diag,.pbb-channel>.pbb-rowAction{margin:0;padding:0 16px 8px 46px}
+.pbb-fold[hidden]{display:none}
+.pbb-action:disabled,.pbb-refresh:disabled,.pbb-menuAction:disabled,.pbb-targetButton:disabled{opacity:.5;cursor:default}
+.pbb-action{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:none;height:28px;max-width:100%;padding:0 9px;border:1px solid var(--pbb-line);border-radius:6px;background:transparent;color:var(--pbb-secondary);font:inherit;font-size:14px;line-height:20px;text-decoration:none;cursor:pointer;white-space:nowrap}
+.pbb-addAction{display:flex;margin-left:auto}
+.pbb-buttonPrimary{background:var(--dsw-alias-button-primary-fill,var(--pbb-ink));border-color:transparent;color:var(--dsw-alias-label-primary-foreground,#fff)}
+.pbb-actionDangerGhost{color:var(--dsw-alias-state-error-primary,#bc2222);border-color:color-mix(in srgb,var(--dsw-alias-state-error-primary,#bc2222) 35%,transparent)}
+.pbb-iconButton{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--pbb-secondary);cursor:pointer}
+.pbb-chev{display:inline-flex;flex:none;color:var(--pbb-secondary)}
+.pbb-chevIcon{width:14px;height:14px;display:block}
+[aria-expanded="true"]>.pbb-chev,.pbb-helpDisclosure[open]>summary>.pbb-chev,.pbb-disclosure[open]>summary>.pbb-chev{transform:rotate(90deg)}
+.pbb-diag{margin:0;overflow-wrap:anywhere}
+.pbb-diagBad,.pbb-bad{color:var(--dsw-alias-state-error-primary,#bc2222)}
+.pbb-ok{color:color-mix(in srgb,var(--dsw-alias-state-success-primary,#287a45) 65%,var(--pbb-ink))}
+.pbb-label{flex:1;min-width:0;font-weight:500;color:var(--pbb-ink)}
+.pbb-value{text-align:right;overflow-wrap:anywhere}
+.pbb-token{max-width:100%;font:12px/18px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--pbb-secondary);overflow-wrap:anywhere}
+.pbb-empty{margin:0;padding:16px;font-size:14px;line-height:20px;color:var(--pbb-secondary)}
+.pbb-limitRow{display:flex;align-items:center;gap:12px}
+.pbb-limitControl{display:flex;align-items:center;gap:8px;flex:none}
+.pbb-numberInput,.pbb-deviceNameInput{min-width:0;height:28px;border:1px solid var(--pbb-line);border-radius:6px;background:var(--dsw-alias-bg-layer-3,var(--pbb-fill));color:var(--pbb-ink);font:inherit;font-size:14px;line-height:20px;padding:3px 8px;caret-color:var(--pbb-ink)}
+.pbb-numberInput{width:72px}
+.pbb-numberInput:disabled,.pbb-deviceNameInput:disabled{opacity:.5}
+.pbb-endpoint{user-select:all}
+.pbb-devicesSection{display:flex;flex-direction:column;gap:8px}
+.pbb-devicesHeader{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 2px}
+.pbb-deviceCount{font-size:12px;line-height:18px;color:var(--pbb-secondary);white-space:nowrap}
+.pbb-devicesCard{overflow:visible}
+.pbb-deviceList{display:flex;flex-direction:column}
+.pbb-deviceRow{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:0;min-height:56px;padding:6px 14px 6px 16px}
+.pbb-deviceRow+.pbb-deviceRow::before{content:"";position:absolute;top:0;left:46px;right:16px;border-top:1px solid var(--pbb-line)}
+.pbb-deviceRow:has(details[open]){z-index:2}
+.pbb-deviceMain{display:flex;align-items:center;gap:12px;min-width:0}
+.pbb-deviceMain>.pbb-icon{color:var(--pbb-secondary)}
+.pbb-deviceText{display:flex;flex-direction:column;gap:2px;min-width:0}
+.pbb-deviceName{font-size:14px;line-height:20px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.pbb-deviceMeta{display:flex;flex-wrap:wrap;gap:0 6px;color:var(--pbb-secondary);font-size:12px;line-height:18px}
+.pbb-deviceMeta>*+*::before{content:"\00B7";margin-right:6px}
+.pbb-deviceActions{grid-row:1;grid-column:2;display:flex;align-items:center}
+.pbb-deviceRenameForm,.pbb-deviceConfirm{grid-column:1/-1;display:flex;gap:8px;padding:8px 0;min-width:0}
+.pbb-deviceRenameForm{flex-wrap:wrap}
+.pbb-deviceNameInput{flex:1}
+.pbb-deviceRenameActions{display:flex;align-items:center;gap:5px;flex:none}
+.pbb-deviceConfirm{flex-direction:column}
+.pbb-deviceMessage{padding:10px 16px}
+.pbb-deviceMenu{position:relative}
+.pbb-deviceMenu>summary{list-style:none}
+.pbb-deviceMenu>summary::-webkit-details-marker{display:none}
+.pbb-deviceMenuBody{position:absolute;z-index:3;top:34px;right:0;width:250px;max-width:calc(100cqw - 32px);padding:5px;border:1px solid var(--pbb-line);border-radius:10px;background:var(--dsw-alias-bg-layer-3,var(--pbb-fill));box-shadow:0 8px 24px color-mix(in srgb,var(--pbb-ink) 12%,transparent)}
+.pbb-deviceMenuInfo{display:flex;flex-direction:column;gap:3px;padding:7px 8px 10px;border-bottom:1px solid var(--pbb-line)}
+.pbb-menuAction{display:block;width:100%;min-height:32px;padding:5px 8px;border:0;border-radius:5px;background:transparent;color:var(--pbb-ink);text-align:left;font:inherit;font-size:14px;cursor:pointer}
+.pbb-menuDanger{color:var(--dsw-alias-state-error-primary,#bc2222)}
+.pbb-actionBusy{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--pbb-secondary)}
+.pbb-actionBusy::before{content:"";width:10px;height:10px;border:1.5px solid var(--pbb-line);border-top-color:currentColor;border-radius:50%;animation:pbb-spin .7s linear infinite}
+@keyframes pbb-spin{to{transform:rotate(360deg)}}
+.pbb-rowAction{display:flex;flex-wrap:wrap;gap:8px}
+.pbb-pairingPanel{border:1px solid var(--pbb-line);border-radius:16px;padding:16px;background:var(--pbb-fill)}
+.pbb-pairingHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
+.pbb-pairingBody{display:flex;flex-direction:column;gap:10px}
+.pbb-targetList{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
+.pbb-targetButton{max-width:100%;padding:5px 9px;border:1px solid transparent;border-radius:7px;background:var(--pbb-soft);color:var(--pbb-secondary);font:inherit;font-size:12px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
+.pbb-targetSelected{color:var(--pbb-ink);border-color:var(--pbb-line);background:var(--pbb-fill)}
+.pbb-qrPanel{display:grid;grid-template-columns:224px minmax(0,1fr);gap:20px;align-items:start}
+.pbb-qrImage{display:block;width:224px;height:224px;max-width:100%;padding:8px;border-radius:12px;background:#fff}
+.pbb-countdown{margin-top:10px;display:flex;flex-direction:column;gap:6px}
+.pbb-countdownBar{height:4px;border-radius:99px;background:var(--pbb-soft);overflow:hidden}
+.pbb-countdownBar i{display:block;width:100%;height:100%;transform-origin:left center;background:var(--dsw-alias-state-business-primary,#4176e6);border-radius:99px}
+.pbb-countdownText{font-size:12px;line-height:18px;color:var(--pbb-secondary);font-variant-numeric:tabular-nums}
+.pbb-pairInfo,.pbb-pairCodeBlock{display:flex;flex-direction:column;gap:8px;min-width:0}
+.pbb-pairCodeLabel,.pbb-qrHint{font-size:12px;line-height:18px;color:var(--pbb-secondary);margin:0}
+.pbb-pairCodeRow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
+.pbb-pairCode{font:12px/18px ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere;user-select:all}
+.pbb-tools{border-radius:16px;overflow:hidden}
+.pbb-toolSection+.pbb-toolSection{border-top:1px solid var(--pbb-line)}
+.pbb-cardHead{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 16px;border:0;background:transparent;color:var(--pbb-secondary);font:inherit;text-align:left;cursor:pointer}
+.pbb-cardHead>.pbb-cardTitle{flex:1;font-weight:400}
+.pbb-toolMeta{max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:18px;color:var(--pbb-secondary)}
+.pbb-toolMeta.pbb-ok{color:color-mix(in srgb,var(--dsw-alias-state-success-primary,#287a45) 65%,var(--pbb-ink))}
+.pbb-toolMeta.pbb-bad{color:var(--dsw-alias-state-error-primary,#bc2222)}
+.pbb-testGrid{display:flex;flex-direction:column;gap:0}
+.pbb-testItem{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--pbb-line)}
+.pbb-testTitle{font-size:14px;line-height:20px;font-weight:500;color:var(--pbb-ink)}
+.pbb-testDescription{font-size:12px;line-height:18px;color:var(--pbb-secondary)}
+.pbb-helpBody,.pbb-disclosureBody{display:flex;flex-direction:column;gap:14px}
+.pbb-helpSection{display:flex;flex-direction:column;gap:6px}
+.pbb-helpHeading{font-size:14px;line-height:20px;font-weight:500;color:var(--pbb-ink)}
+.pbb-helpList{margin:0;padding-left:20px;font-size:14px;line-height:22px;color:var(--pbb-secondary)}
+.pbb-helpList li+li{margin-top:4px}
+.pbb-helpText{margin:0;font-size:14px;line-height:22px;color:var(--pbb-secondary)}
+.pbb-helpCode{display:block;margin:0;padding:10px;border:1px solid var(--pbb-line);border-radius:8px;background:var(--pbb-soft);color:var(--pbb-ink);font:12px/18px ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
+.pbb-helpLink{color:var(--pbb-ink);text-decoration:underline;text-underline-offset:3px}
+.pbb-helpDisclosure>summary{display:flex;align-items:center;gap:6px;min-height:28px;list-style:none;cursor:pointer;color:var(--pbb-secondary);font-size:12px}
+.pbb-helpDisclosure>summary::-webkit-details-marker{display:none}
+.pbb-helpDisclosure[open]>.pbb-helpBody{padding-top:10px}
+.pbb-runtimeList{display:flex;flex-direction:column}
+.pbb-runtimeRow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--pbb-line)}
+.pbb-runtimeRow>.pbb-row{flex:1;min-width:0}
+.pbb-updateRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;color:var(--pbb-ink);font-size:14px;text-decoration:none}
+.pbb-resultRow{display:flex;align-items:flex-start;gap:6px}
+.pbb-resultIcon{display:inline-flex;flex:none;margin-top:3px;color:var(--dsw-alias-state-success-primary,#287a45)}
+.pbb-resultIconBad{color:var(--dsw-alias-state-error-primary,#bc2222)}
+.pbb-disclosure>summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;cursor:pointer;font-size:14px}
+.pbb-disclosure>summary::-webkit-details-marker{display:none}
+.pbb-disclosureBody{padding:2px 16px 16px}
+.pbb-disclosureTitle{flex:1}
+.pbb-section :is(.pbb-action,.pbb-refresh,.pbb-iconButton,.pbb-cardHead,.pbb-menuAction,.pbb-targetButton,input,summary,a):focus-visible{outline:2px solid var(--dsw-focus-ring-color,#5276b4);outline-offset:2px}
+@media (hover:hover) and (pointer:fine){.pbb-refresh:hover:not(:disabled),.pbb-iconButton:hover,.pbb-action:hover:not(:disabled),.pbb-cardHead:hover,.pbb-menuAction:hover:not(:disabled){background:var(--pbb-soft)}.pbb-buttonPrimary:hover:not(:disabled){background:var(--dsw-alias-button-primary-hover,#30343b)}.pbb-action:active:not(:disabled),.pbb-refresh:active:not(:disabled),.pbb-iconButton:active{transform:scale(.97)}}
+@media (prefers-reduced-motion:reduce){.pbb-action,.pbb-refresh,.pbb-iconButton{transition:none;transform:none!important}.pbb-actionBusy::before{animation:none}}
+@container pbb (max-width:480px){.pbb-qrPanel{grid-template-columns:1fr}.pbb-limitRow{align-items:flex-start;flex-direction:column}.pbb-limitControl{align-self:flex-end}.pbb-deviceMeta{column-gap:4px}.pbb-toolMeta{max-width:42%}.pbb-channelRow{gap:8px}.pbb-testItem{flex-wrap:wrap}.pbb-testItem>.pbb-controlText{flex-basis:65%}}
+@container pbb (max-width:340px){.pbb-devicesHeader{flex-wrap:wrap}.pbb-deviceRow{column-gap:6px;padding-right:10px}.pbb-channelBody{padding-left:16px}.pbb-toolMeta{max-width:38%}}
+@media (pointer:coarse){.pbb-action,.pbb-iconButton,.pbb-refresh,.pbb-targetButton,.pbb-menuAction,.pbb-helpDisclosure>summary{min-width:44px;min-height:44px}.pbb-numberInput,.pbb-deviceNameInput{height:44px;font-size:16px}.pbb-deviceMenuBody{top:48px}}
+`;
 		/**
 		* Client bundle id, identical to the `window.__ModuleLoader__.load({ id })`
 		* identity emitted by tsdown.config.ts. DSH's module system owns style
@@ -1252,6 +1288,102 @@ window.__ModuleLoader__.load({
 			tag.textContent = CSS;
 			document.head.appendChild(tag);
 		}
+		// src/client/settings-icons.ts
+		/** 设置页的小图标共用线宽与 currentColor，随宿主主题变色，不额外引入图标包。 */
+		function settingsIcon(name, size = 18) {
+			const path = (d) => (0, react.createElement)("path", { d });
+			const circle = (cx, cy, r) => (0, react.createElement)("circle", {
+				cx,
+				cy,
+				r
+			});
+			return (0, react.createElement)("svg", {
+				className: "pbb-icon",
+				viewBox: "0 0 24 24",
+				width: size,
+				height: size,
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 1.6,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": true
+			}, ...{
+				phone: () => [(0, react.createElement)("rect", {
+					x: 6.5,
+					y: 2.5,
+					width: 11,
+					height: 19,
+					rx: 2.2
+				}), path("M10 5h4M11 18.5h2")],
+				wifi: () => [path("M2 8.8a16 16 0 0 1 20 0M5 12.1a11 11 0 0 1 14 0M8.3 15.5a6 6 0 0 1 7.4 0"), circle(12, 19, .7)],
+				globe: () => [circle(12, 12, 9), path("M3 12h18M12 3a17 17 0 0 1 0 18 17 17 0 0 1 0-18")],
+				refresh: () => [path("M20 7v5h-5M4 17v-5h5M6.1 7a7 7 0 0 1 11.5-1L20 9M4 15l2.4 3A7 7 0 0 0 18 17")],
+				plus: () => [path("M12 5v14M5 12h14")],
+				more: () => [
+					circle(5, 12, 1.2),
+					circle(12, 12, 1.2),
+					circle(19, 12, 1.2)
+				],
+				activity: () => [path("M3 12h4l3-7 4 14 3-7h4")],
+				info: () => [circle(12, 12, 9), path("M12 11v6M12 7h.01")],
+				ready: () => [circle(12, 12, 9), path("m8 12 3 3 5-6")],
+				attention: () => [circle(12, 12, 9), path("M12 7v6M12 17h.01")]
+			}[name]());
+		}
+		// src/client/device-actions.ts
+		/**
+		* 原生 disclosure（折叠控件）负责 Enter/Space 与焦点顺序；操作仍是普通按钮，
+		* 不冒充需要方向键导航的 ARIA menu。详情只在展开时进入无障碍读取顺序。
+		*/
+		function DeviceActions(props) {
+			const ref = (0, react.useRef)(null);
+			const close = (restoreFocus = false) => {
+				const details = ref.current;
+				if (details === null) return;
+				details.open = false;
+				if (restoreFocus) details.querySelector("summary")?.focus();
+			};
+			(0, react.useEffect)(() => {
+				const outside = (event) => {
+					if (event.target instanceof Node && !ref.current?.contains(event.target)) close();
+				};
+				document.addEventListener("pointerdown", outside);
+				return () => document.removeEventListener("pointerdown", outside);
+			}, []);
+			const act = (action) => {
+				close();
+				action();
+			};
+			return (0, react.createElement)("details", {
+				ref,
+				className: "pbb-deviceMenu",
+				onKeyDown: (event) => {
+					if (event.key !== "Escape" || !ref.current?.open) return;
+					event.preventDefault();
+					event.stopPropagation();
+					close(true);
+				}
+			}, (0, react.createElement)("summary", {
+				className: "pbb-iconButton",
+				"aria-label": props.t("devices.moreAria", { name: props.name })
+			}, settingsIcon("more", 16)), (0, react.createElement)("div", {
+				className: "pbb-deviceMenuBody",
+				"aria-label": props.t("devices.col.actions")
+			}, (0, react.createElement)("div", { className: "pbb-deviceMenuInfo" }, props.customName ? (0, react.createElement)("span", { className: "pbb-diag" }, props.t("devices.customBadge")) : null, (0, react.createElement)("span", { className: "pbb-diag" }, props.t("devices.col.fingerprint")), (0, react.createElement)("code", { className: "pbb-token" }, props.fingerprint || "—")), (0, react.createElement)("button", {
+				type: "button",
+				className: "pbb-menuAction",
+				disabled: !props.canRename,
+				"aria-label": props.t("devices.renameAria", { name: props.name }),
+				onClick: () => act(props.onRename)
+			}, props.t("devices.rename")), (0, react.createElement)("button", {
+				type: "button",
+				className: "pbb-menuAction pbb-menuDanger",
+				disabled: !props.canRevoke,
+				"aria-label": props.t("devices.revokeAria", { name: props.name }),
+				onClick: () => act(props.onRevoke)
+			}, props.t("devices.revoke"))));
+		}
 		// node_modules/qrcode/lib/can-promise.js
 		var require_can_promise = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 			module.exports = function() {
@@ -3911,15 +4043,6 @@ window.__ModuleLoader__.load({
 			};
 		}
 		// src/client/settings-view-models.ts
-		/**
-		* 设置页的 view model：把原先住在渲染函数里的三块逻辑变成可单测的纯模块。
-		*
-		* 迁移前 `settings-page.ts` 是一个 1059 行的组件，funnel phase → {dot, label}、
-		端口/连接数草稿的编辑与合法性、serviceStatus 派生全在渲染函数里，没有任何
-		直接测试。这里按 pairing-panel.ts 的形状把它们拆成 state / action / reduce /
-		view 四件套——shape 与该先例一致，但**不继承它唯一的泄漏**：view model 只返回
-		语义值，i18n key 的映射留在页面（措辞归页面，测试不跟着措辞漂）。
-		*/
 		const REMOTE_PHASE_META = {
 			disabled: {
 				dot: "",
@@ -4055,24 +4178,9 @@ window.__ModuleLoader__.load({
 			return (device.customName ?? device.deviceName).trim();
 		}
 		// src/client/settings-page.ts
-		/** phase 语义标签 → i18n key。措辞归页面，view model 只认语义。 */
-		const REMOTE_LABEL_KEY = {
-			disabled: "phase.disabled",
-			starting: "phase.starting",
-			login_required: "phase.login_required",
-			online: "phase.online",
-			error: "phase.error",
-			unavailable: "phase.unavailable",
-			stopped: "phase.stopped"
-		};
-		const LOCAL_LABEL_KEY = {
-			disabled: "local.phaseDisabled",
-			starting: "local.phaseStarting",
-			online: "local.phaseOnline",
-			error: "local.phaseError",
-			stopped: "local.phaseStopped"
-		};
-		/** 状态条用的短状态：列标签已经写明是哪条通道，值只说状态，免得在窄格里被截断。 */
+		/** 中文结论由调用处提供，原始上游信息统一放入括号，保留排查依据。 */
+		const errorDetails = (error) => "（" + (error instanceof Error ? error.message : String(error)) + "）";
+		/** 通道标题旁的短状态；完整端点和参数放入对应的连接选项。 */
 		const CHANNEL_STATE_KEY = {
 			disabled: "channel.state.disabled",
 			starting: "channel.state.starting",
@@ -4089,21 +4197,6 @@ window.__ModuleLoader__.load({
 			attention: "status.attention",
 			ready: "status.ready"
 		};
-		/** Inline trash icon for the compact destructive row action. Kept as a tiny
-		*  element (no icon dependency) so the client bundle stays dependency-free
-		*  apart from React. */
-		const TrashIcon = () => (0, react.createElement)("svg", {
-			className: "pbb-actionIcon",
-			viewBox: "0 0 16 16",
-			width: 13,
-			height: 13,
-			fill: "none",
-			stroke: "currentColor",
-			strokeWidth: 1.5,
-			strokeLinecap: "round",
-			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", {
@@ -4118,8 +4211,7 @@ window.__ModuleLoader__.load({
 			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. */
+		/** 诊断结果使用线性 SVG，与页面其余图标保持一致。 */
 		const CheckIcon = () => (0, react.createElement)("svg", {
 			viewBox: "0 0 16 16",
 			width: 12,
@@ -4186,6 +4278,13 @@ window.__ModuleLoader__.load({
 			const [remoteLimitDraft, dispatchRemoteLimitDraft] = (0, react.useReducer)((state, action) => numericDraftReduce(state, action, REMOTE_LIMIT_RANGE), initialNumericDraft(REMOTE_LIMIT_RANGE));
 			const [localPortDraft, dispatchLocalPortDraft] = (0, react.useReducer)((state, action) => numericDraftReduce(state, action, LOCAL_PORT_RANGE), initialNumericDraft(LOCAL_PORT_RANGE));
 			const [selectedPairingHost, setSelectedPairingHost] = (0, react.useState)(null);
+			const [pairingOpen, setPairingOpen] = (0, react.useState)(false);
+			const pageId = (0, react.useId)();
+			const localOptionsId = pageId + "-local";
+			const remoteOptionsId = pageId + "-remote";
+			const troubleshootingId = pageId + "-troubleshooting";
+			const systemId = pageId + "-system";
+			const pairingId = pageId + "-pairing";
 			const [pairingPanel, dispatchPairingPanel] = (0, react.useReducer)(pairingPanelReduce, initialPairingPanelState);
 			const qrRequestId = (0, react.useRef)(0);
 			const [troubleshootingOpen, setTroubleshootingOpen] = (0, react.useState)(false);
@@ -4196,7 +4295,6 @@ window.__ModuleLoader__.load({
 			const [pushTestResult, setPushTestResult] = (0, react.useState)(null);
 			const [pushTestError, setPushTestError] = (0, react.useState)("");
 			const [deviceBusy, setDeviceBusy] = (0, react.useState)(null);
-			const [deviceBusyAction, setDeviceBusyAction] = (0, react.useState)(null);
 			const [deviceMessage, setDeviceMessage] = (0, react.useState)("");
 			const [editingDeviceId, setEditingDeviceId] = (0, react.useState)(null);
 			const [deviceNameDraft, setDeviceNameDraft] = (0, react.useState)("");
@@ -4230,7 +4328,7 @@ window.__ModuleLoader__.load({
 					setPushTestResult(result);
 					setPushTestBusy(false);
 				}, (error) => {
-					setPushTestError(error instanceof Error ? error.message : String(error));
+					setPushTestError(translateWith(props.t, "push.pushFailed") + errorDetails(error));
 					setPushTestBusy(false);
 				});
 			};
@@ -4247,7 +4345,7 @@ window.__ModuleLoader__.load({
 					setRelayTestResult(result);
 					setRelayTestBusy(false);
 				}, (error) => {
-					setRelayTestError(error instanceof Error ? error.message : String(error));
+					setRelayTestError(translateWith(props.t, "push.relayBad") + errorDetails(error));
 					setRelayTestBusy(false);
 				});
 			};
@@ -4283,7 +4381,7 @@ window.__ModuleLoader__.load({
 				const reportState = props.useDeepPilotReport((s) => s);
 				hooks.report = reportState.report;
 				if (reportState.status === "error" && reportState.message) {
-					diag.push(reportState.message);
+					diag.push(translateWith(props.t, "diag.reportFailed") + errorDetails(reportState.message));
 					failed = true;
 				}
 				const enabledState = props.useDeepPilotEnabled((s) => s);
@@ -4324,7 +4422,7 @@ window.__ModuleLoader__.load({
 			try {
 				readHooks();
 			} catch (error) {
-				diag.push(translateWith(props.t, "diag.renderError") + (error instanceof Error ? error.message : String(error)));
+				diag.push(translateWith(props.t, "diag.renderError") + errorDetails(error));
 				failed = true;
 			}
 			const report = hooks.report;
@@ -4371,7 +4469,7 @@ window.__ModuleLoader__.load({
 				}, (error) => {
 					dispatchLocalPortDraft({
 						type: "failed",
-						message: translateWith(props.t, "local.portFailed") + (error instanceof Error ? error.message : String(error))
+						message: translateWith(props.t, "local.portFailed") + errorDetails(error)
 					});
 				});
 			};
@@ -4392,7 +4490,7 @@ window.__ModuleLoader__.load({
 				}, (error) => {
 					dispatchRemoteLimitDraft({
 						type: "failed",
-						message: translateWith(props.t, "remote.limitFailed") + (error instanceof Error ? error.message : String(error))
+						message: translateWith(props.t, "remote.limitFailed") + errorDetails(error)
 					});
 				});
 			};
@@ -4442,7 +4540,7 @@ window.__ModuleLoader__.load({
 					dispatchPairingPanel({
 						type: "failed",
 						requestId,
-						message: translateWith(props.t, "pair.qrFailed") + (error instanceof Error ? error.message : String(error))
+						message: translateWith(props.t, "pair.qrFailed") + errorDetails(error)
 					});
 				});
 			};
@@ -4465,7 +4563,7 @@ window.__ModuleLoader__.load({
 				}, (error) => {
 					dispatchPairingPanel({
 						type: "notice",
-						message: translateWith(props.t, "pair.infoCopyFailed") + (error instanceof Error ? error.message : String(error))
+						message: translateWith(props.t, "pair.infoCopyFailed") + errorDetails(error)
 					});
 				});
 			};
@@ -4486,15 +4584,13 @@ window.__ModuleLoader__.load({
 			const revokeDevice = (deviceId, _name) => {
 				if (!can("revokeDevice")) return;
 				setDeviceBusy(deviceId);
-				setDeviceBusyAction("revoke");
 				setDeviceMessage("");
 				props.revokeDevice(deviceId).then(() => {
 					setDeviceMessage(translateWith(props.t, "devices.revoked"));
 				}, (error) => {
-					setDeviceMessage(translateWith(props.t, "devices.revokeFailed") + (error instanceof Error ? error.message : String(error)));
+					setDeviceMessage(translateWith(props.t, "devices.revokeFailed") + errorDetails(error));
 				}).finally(() => {
 					setDeviceBusy(null);
-					setDeviceBusyAction(null);
 				});
 			};
 			const deviceLabel$1 = (device) => deviceLabel(device) || translateWith(props.t, "devices.unnamed");
@@ -4517,17 +4613,15 @@ window.__ModuleLoader__.load({
 					return;
 				}
 				setDeviceBusy(deviceId);
-				setDeviceBusyAction("rename");
 				setDeviceMessage("");
 				props.setDeviceName(deviceId, normalized === "" ? null : normalized).then(() => {
 					setDeviceMessage(normalized === "" ? translateWith(props.t, "devices.nameCleared") : translateWith(props.t, "devices.renamed"));
 					setEditingDeviceId(null);
 					setDeviceNameDraft("");
 				}, (error) => {
-					setDeviceMessage(translateWith(props.t, "devices.renameFailed") + (error instanceof Error ? error.message : String(error)));
+					setDeviceMessage(translateWith(props.t, "devices.renameFailed") + errorDetails(error));
 				}).finally(() => {
 					setDeviceBusy(null);
-					setDeviceBusyAction(null);
 				});
 			};
 			const visibleDevices$1 = visibleDevices(report);
@@ -4543,10 +4637,10 @@ window.__ModuleLoader__.load({
 					"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", {
+				}, (0, react.createElement)("div", { className: "pbb-deviceMain" }, settingsIcon("phone"), (0, react.createElement)("div", { className: "pbb-deviceText" }, (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", {
+				}, label), (0, react.createElement)("div", { className: "pbb-deviceMeta" }, (0, react.createElement)("span", null, d.appVersion), (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();
@@ -4584,25 +4678,22 @@ window.__ModuleLoader__.load({
 					title: translateWith(props.t, "devices.nameCancel"),
 					"aria-label": translateWith(props.t, "devices.nameCancel"),
 					onClick: cancelDeviceRename
-				}, 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"),
-					"aria-label": translateWith(props.t, "devices.renameAria", { name: label }),
-					onClick: () => beginDeviceRename(d)
-				}, translateWith(props.t, "devices.rename")) : null, (0, react.createElement)("button", {
-					type: "button",
-					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: () => {
+				}, 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 || editing ? null : (0, react.createElement)("div", { className: "pbb-deviceActions" }, busy ? (0, react.createElement)("span", {
+					className: "pbb-actionBusy",
+					role: "status"
+				}, translateWith(props.t, "devices.deleting")) : (0, react.createElement)(DeviceActions, {
+					name: label,
+					fingerprint,
+					customName: d.customName,
+					canRename: editingDeviceId === null && can("setDeviceName"),
+					canRevoke: can("revokeDevice"),
+					t: props.t,
+					onRename: () => beginDeviceRename(d),
+					onRevoke: () => {
 						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", {
+				})), 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", {
@@ -4620,27 +4711,32 @@ window.__ModuleLoader__.load({
 				}, 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];
 			const remoteMeta = report === null ? null : REMOTE_PHASE_META[report.remote.phase];
 			const service = serviceStatus({
 				enabled,
-				switchReady,
+				switchReady: switchReady && report !== null,
 				localDot: localMeta?.dot,
 				remoteDot: remoteMeta?.dot
 			});
 			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", {
 					time: new Date(failure.ts).toLocaleString(),
-					kind: failure.kind,
-					reason: failure.reason
+					kind: translateWith(props.t, {
+						"upgrade-rejected": "diagnostics.kind.upgrade",
+						"pair-rejected": "diagnostics.kind.pair",
+						"auth-failed": "diagnostics.kind.auth",
+						"connection-opened": "diagnostics.kind.opened",
+						"connection-closed": "diagnostics.kind.closed",
+						"connection-error": "diagnostics.kind.error",
+						identity: "diagnostics.kind.identity",
+						storage: "diagnostics.kind.storage"
+					}[failure.kind] ?? "diagnostics.kind.unknown"),
+					reason: "（" + failure.kind + " / " + failure.reason + "）"
 				});
 				const extras = [];
 				if (failure.attemptId !== void 0) extras.push(translateWith(props.t, "diagnostics.attempt", { id: failure.attemptId }));
@@ -4677,12 +4773,12 @@ window.__ModuleLoader__.load({
 					});
 				}, (error) => {
 					setDiagnosticsCopy({
-						message: translateWith(props.t, "diagnostics.copyFailed") + (error instanceof Error ? error.message : String(error)),
+						message: translateWith(props.t, "diagnostics.copyFailed") + errorDetails(error),
 						failed: true
 					});
 				});
 			};
-			const diagnosticsSection = report === null ? null : (0, react.createElement)("div", { className: "pbb-helpSection" }, (0, react.createElement)("div", { className: "pbb-row" }, (0, react.createElement)("div", { className: "pbb-switchText" }, (0, react.createElement)("span", { className: "pbb-testTitle" }, translateWith(props.t, "diagnostics.title")), (0, react.createElement)("span", { className: "pbb-testDescription" }, translateWith(props.t, "diagnostics.description"))), (0, react.createElement)("button", {
+			const diagnosticsSection = report === null ? null : (0, react.createElement)("div", { className: "pbb-helpSection" }, (0, react.createElement)("div", { className: "pbb-row" }, (0, react.createElement)("div", { className: "pbb-controlText" }, (0, react.createElement)("span", { className: "pbb-testTitle" }, translateWith(props.t, "diagnostics.title")), (0, react.createElement)("span", { className: "pbb-testDescription" }, translateWith(props.t, "diagnostics.description"))), (0, react.createElement)("button", {
 				type: "button",
 				className: "pbb-action",
 				onClick: copyDiagnostics,
@@ -4694,14 +4790,10 @@ window.__ModuleLoader__.load({
 				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));
+			const fold = (open, body) => (0, react.createElement)("div", {
+				className: "pbb-fold",
+				hidden: !open
+			}, body);
 			/** 配对倒计时：仅在 QR 面板打开且 grant 在场时每秒刷新一次。 */
 			(0, react.useEffect)(() => {
 				if (!panel.open || pairingPanel.grant === null) return;
@@ -4711,44 +4803,19 @@ window.__ModuleLoader__.load({
 			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)("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", {
+			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.historyCount", { count: recentFailures.length }) : "";
+			const pairingSection = (0, react.createElement)("div", {
+				id: pairingId,
+				hidden: !pairingOpen
+			}, !pairingOpen || report === null ? null : (0, react.createElement)("div", { className: "pbb-pairingPanel" }, (0, react.createElement)("div", { className: "pbb-pairingHeader" }, (0, react.createElement)("h3", { className: "pbb-cardTitle" }, translateWith(props.t, "pair.qrPanelTitle")), !panel.open && pairingTarget !== null ? (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", {
+				className: "pbb-action",
+				disabled: panel.busy || !report.pairingReady,
+				onClick: () => showPairingQR(pairingTarget)
+			}, translateWith(props.t, "pair.qrShow")) : null), (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" : ""),
@@ -4778,35 +4845,49 @@ window.__ModuleLoader__.load({
 				className: "pbb-action pbb-buttonPrimary",
 				onClick: copyPairingInfo,
 				"data-testid": "pairingInfoCopy"
-			}, translateWith(props.t, "panel.tokenAction.copy")))), (0, react.createElement)("p", { className: "pbb-qrHint" }, translateWith(props.t, "pair.qrHint", { kind: panel.target?.kind === "public" ? translateWith(props.t, "pair.kind.public") : translateWith(props.t, "pair.kind.lan") })))) : null)), (0, react.createElement)("div", { className: "pbb-card" }, (0, react.createElement)("div", { className: "pbb-cardHeader" }, (0, react.createElement)("div", null, (0, react.createElement)("h3", { className: "pbb-cardTitle" }, translateWith(props.t, "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", {
+			}, 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)));
+			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",
-				role: "switch",
-				"aria-checked": enabled,
-				"aria-label": switchTitle,
+				className: "pbb-refresh",
+				disabled: !can("refresh"),
+				onClick: () => props.refresh?.()
+			}, settingsIcon("refresh", 14), translateWith(props.t, "meta.refresh"))), (0, react.createElement)("section", {
+				className: "pbb-card pbb-connections",
+				"aria-label": translateWith(props.t, "connection.title")
+			}, (0, react.createElement)("div", { className: "pbb-cardBody" }, (0, react.createElement)("div", { className: "pbb-masterRow" }, (0, react.createElement)("div", { className: "pbb-controlText" }, (0, react.createElement)("span", { className: "pbb-controlTitle" }, switchTitle), (0, react.createElement)("div", { className: "pbb-serviceSummary" }, (0, react.createElement)("span", { className: "pbb-serviceState" + (service.kind === "ready" ? " pbb-ok" : service.kind === "attention" ? " pbb-bad" : "") }, settingsIcon(service.kind === "ready" ? "ready" : service.kind === "attention" ? "attention" : "info", 13)), (0, react.createElement)("span", null, serviceStatusText), (0, react.createElement)("span", {
+				className: "pbb-metaDivider",
+				"aria-hidden": true
+			}), (0, react.createElement)("span", null, translateWith(props.t, "panel.activeConnections") + " " + (report === null ? "—" : String(report.activeConnections))))), (0, react.createElement)(_deepseek_ai_dsh_client_ui_primitives.Switch, {
+				checked: enabled,
+				label: switchTitle,
 				disabled: !switchReady,
-				className: "pbb-switch" + (enabled ? " pbb-switchOn" : ""),
-				onClick: () => {
-					if (can("setEnabled")) props.setDeepPilotEnabled(!enabled);
+				onChange: (next) => {
+					if (can("setEnabled")) props.setDeepPilotEnabled(next);
 				}
-			})), (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"),
+			})), (0, react.createElement)("div", { className: "pbb-channel" }, (0, react.createElement)("div", { className: "pbb-row pbb-channelRow" }, settingsIcon("wifi"), (0, react.createElement)("div", { className: "pbb-controlText" }, (0, react.createElement)("span", { className: "pbb-controlTitle" }, translateWith(props.t, "local.title")), (0, react.createElement)("div", { className: "pbb-channelState" }, (0, react.createElement)("span", { className: localMeta?.label === "online" ? "pbb-ok" : localMeta?.label === "error" ? "pbb-bad" : void 0 }, localStateText))), (0, react.createElement)(_deepseek_ai_dsh_client_ui_primitives.Switch, {
+				checked: localEnabled,
+				label: translateWith(props.t, "local.title"),
 				disabled: !localSwitchReady,
-				className: "pbb-switch" + (localEnabled ? " pbb-switchOn" : ""),
-				onClick: () => {
-					if (can("setLocalEnabled")) props.setDeepPilotLocalEnabled(!localEnabled);
+				onChange: (next) => {
+					if (can("setLocalEnabled")) props.setDeepPilotLocalEnabled(next);
 				}
-			})), 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", {
+			}), (0, react.createElement)("button", {
 				type: "button",
-				className: "pbb-expand",
+				className: "pbb-iconButton pbb-expand",
+				"aria-label": translateWith(props.t, "local.options"),
 				"aria-expanded": localOptionsOpen,
+				"aria-controls": localOptionsId,
 				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",
+			}, (0, react.createElement)("span", { className: "pbb-chev" }, ChevronIcon()))), report !== null && report.local.message && report.local.phase === "error" ? (0, react.createElement)("p", {
+				className: "pbb-diag pbb-diagBad",
+				role: "alert"
+			}, translateWith(props.t, "local.errorDetails", { message: 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, fold(localOptionsOpen, (0, react.createElement)("div", {
+				className: "pbb-channelBody",
+				id: localOptionsId
+			}, report !== null && report.local.phase === "online" ? (0, react.createElement)("p", { className: "pbb-diag pbb-endpoint" }, report.local.endpoints.join(" · ")) : null, (0, react.createElement)("div", { className: "pbb-limitRow" }, (0, react.createElement)("div", { className: "pbb-controlText" }, (0, react.createElement)("label", {
+				className: "pbb-controlTitle",
 				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", {
+			}, translateWith(props.t, "local.portTitle")), (0, react.createElement)("span", { className: "pbb-controlDescription" }, translateWith(props.t, "local.portDescription")), !localPortView.valid ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, translateWith(props.t, "local.portInvalid")) : localPortDraft.message ? (0, react.createElement)("p", { className: "pbb-diag" + (localPortDraft.failed ? " pbb-diagBad" : "") }, localPortDraft.message) : null), (0, react.createElement)("div", { className: "pbb-limitControl" }, (0, react.createElement)("input", {
 				id: "deeppilot-local-port",
 				className: "pbb-numberInput",
 				type: "number",
@@ -4832,30 +4913,38 @@ window.__ModuleLoader__.load({
 				className: "pbb-action",
 				disabled: !localPortReady || !localPortView.valid || localPortView.unchanged,
 				onClick: applyLocalPort
-			}, 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"),
+			}, 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-controlText" }, (0, react.createElement)("span", { className: "pbb-controlTitle" }, 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 pbb-channelRow" }, settingsIcon("globe"), (0, react.createElement)("div", { className: "pbb-controlText" }, (0, react.createElement)("span", { className: "pbb-controlTitle" }, translateWith(props.t, "remote.title")), (0, react.createElement)("div", { className: "pbb-channelState" }, (0, react.createElement)("span", { className: remoteMeta?.label === "online" ? "pbb-ok" : remoteMeta?.label === "error" || remoteMeta?.label === "unavailable" ? "pbb-bad" : void 0 }, remoteStateText), (0, react.createElement)("span", {
+				className: "pbb-metaDivider",
+				"aria-hidden": true
+			}), (0, react.createElement)("span", null, "Tailscale Funnel"))), (0, react.createElement)(_deepseek_ai_dsh_client_ui_primitives.Switch, {
+				checked: remoteEnabled,
+				label: translateWith(props.t, "remote.title"),
 				disabled: !remoteSwitchReady,
-				className: "pbb-switch" + (remoteEnabled ? " pbb-switchOn" : ""),
-				onClick: () => {
-					if (can("setRemoteEnabled")) props.setDeepPilotRemoteEnabled(!remoteEnabled);
+				onChange: (next) => {
+					if (can("setRemoteEnabled")) props.setDeepPilotRemoteEnabled(next);
 				}
-			})), 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", {
+			}), (0, react.createElement)("button", {
+				type: "button",
+				className: "pbb-iconButton pbb-expand",
+				"aria-label": translateWith(props.t, "remote.options"),
+				"aria-expanded": remoteOptionsOpen,
+				"aria-controls": remoteOptionsId,
+				onClick: () => setRemoteOptionsOpen(!remoteOptionsOpen)
+			}, (0, react.createElement)("span", { className: "pbb-chev" }, ChevronIcon()))), 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",
+			}, 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",
+				role: "alert"
+			}, translateWith(props.t, "remote.errorDetails", { message: report.remote.message })) : null, fold(remoteOptionsOpen, (0, react.createElement)("div", {
+				className: "pbb-channelBody",
+				id: remoteOptionsId
+			}, report !== null && report.remote.phase === "online" ? (0, react.createElement)("p", { className: "pbb-diag pbb-endpoint" }, report.remote.publicURL) : null, (0, react.createElement)("div", { className: "pbb-limitRow" }, (0, react.createElement)("div", { className: "pbb-controlText" }, (0, react.createElement)("label", {
+				className: "pbb-controlTitle",
 				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", {
+			}, translateWith(props.t, "remote.limitTitle")), (0, react.createElement)("span", { className: "pbb-controlDescription" }, translateWith(props.t, "remote.limitDescription")), !remoteLimitView.valid ? (0, react.createElement)("p", { className: "pbb-diag pbb-diagBad" }, translateWith(props.t, "remote.limitInvalid")) : remoteLimitDraft.message ? (0, react.createElement)("p", { className: "pbb-diag" + (remoteLimitDraft.failed ? " pbb-diagBad" : "") }, remoteLimitDraft.message) : null), (0, react.createElement)("div", { className: "pbb-limitControl" }, (0, react.createElement)("input", {
 				id: "deeppilot-funnel-source-limit",
 				className: "pbb-numberInput",
 				type: "number",
@@ -4881,56 +4970,83 @@ window.__ModuleLoader__.load({
 				className: "pbb-action",
 				disabled: !remoteConnectionLimitReady || !remoteLimitView.valid || remoteLimitView.unchanged,
 				onClick: applyRemoteLimit
-			}, 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", {
+			}, translateWith(props.t, "remote.limitApply")))), (0, react.createElement)("details", { className: "pbb-helpDisclosure" }, (0, react.createElement)("summary", null, (0, react.createElement)("span", { className: "pbb-chev" }, ChevronIcon()), translateWith(props.t, "help.remoteTitle")), (0, react.createElement)("div", { className: "pbb-helpBody" }, (0, react.createElement)("div", { className: "pbb-helpSection" }, (0, react.createElement)("div", { className: "pbb-helpHeading" }, translateWith(props.t, "help.recommended")), (0, react.createElement)("ol", { className: "pbb-helpList" }, (0, react.createElement)("li", null, translateWith(props.t, "help.step1")), (0, react.createElement)("li", null, translateWith(props.t, "help.step2")), (0, react.createElement)("li", null, translateWith(props.t, "help.step3")), (0, react.createElement)("li", null, translateWith(props.t, "help.step4"))), (0, react.createElement)("p", { className: "pbb-helpText" }, translateWith(props.t, "help.funnelHint"))), (0, react.createElement)("div", { className: "pbb-helpSection" }, (0, react.createElement)("div", { className: "pbb-helpHeading" }, translateWith(props.t, "help.httpsTitle")), (0, react.createElement)("ol", { className: "pbb-helpList" }, (0, react.createElement)("li", null, translateWith(props.t, "help.httpsStep1")), (0, react.createElement)("li", null, translateWith(props.t, "help.httpsStep2")), (0, react.createElement)("li", null, translateWith(props.t, "help.httpsStep3"))), (0, react.createElement)("p", { className: "pbb-helpText" }, translateWith(props.t, "help.httpsHint"))), (0, react.createElement)("div", { className: "pbb-helpSection" }, (0, react.createElement)("div", { className: "pbb-helpHeading" }, translateWith(props.t, "help.allowTitle")), (0, react.createElement)("p", { className: "pbb-helpText" }, translateWith(props.t, "help.allowBody")), (0, react.createElement)("code", { className: "pbb-helpCode" }, "\"nodeAttrs\": [\n  {\n    \"target\": [\"autogroup:member\"],\n    \"attr\": [\"funnel\"],\n  },\n],"), (0, react.createElement)("p", { className: "pbb-helpText" }, translateWith(props.t, "help.allowHint"))), (0, react.createElement)("div", { className: "pbb-helpSection" }, (0, react.createElement)("div", { className: "pbb-helpHeading" }, translateWith(props.t, "help.faqTitle")), (0, react.createElement)("ul", { className: "pbb-helpList" }, (0, react.createElement)("li", null, translateWith(props.t, "help.faq1")), (0, react.createElement)("li", null, translateWith(props.t, "help.faq2")), (0, react.createElement)("li", null, translateWith(props.t, "help.faq3")), (0, react.createElement)("li", null, translateWith(props.t, "help.faq4")))), (0, react.createElement)("div", { className: "pbb-helpSection" }, (0, react.createElement)("div", { className: "pbb-helpHeading" }, translateWith(props.t, "help.securityTitle")), (0, react.createElement)("ul", { className: "pbb-helpList" }, (0, react.createElement)("li", null, translateWith(props.t, "help.security1")), (0, react.createElement)("li", null, translateWith(props.t, "help.security2")), (0, react.createElement)("li", null, translateWith(props.t, "help.security3")), (0, react.createElement)("li", null, translateWith(props.t, "help.security4")), (0, react.createElement)("li", null, translateWith(props.t, "help.security5"))), (0, react.createElement)("p", { className: "pbb-helpText" }, translateWith(props.t, "help.docsPrefix"), (0, react.createElement)("a", {
 				className: "pbb-helpLink",
 				href: "https://tailscale.com/docs/features/tailscale-funnel",
 				target: "_blank",
 				rel: "noreferrer"
-			}, 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" : ""),
+			}, translateWith(props.t, "help.funnelDocs"))))))))))), (0, react.createElement)("section", {
+				className: "pbb-devicesSection",
+				"aria-label": translateWith(props.t, "devices.title")
+			}, (0, react.createElement)("div", { className: "pbb-devicesHeader" }, (0, react.createElement)("h3", { className: "pbb-cardTitle" }, translateWith(props.t, "devices.title")), (0, react.createElement)("span", { className: "pbb-deviceCount" }, translateWith(props.t, "devices.count", { count: visibleDevices$1.length })), (0, react.createElement)("div", { className: "pbb-addAction" }, (0, react.createElement)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+				variant: "outline",
+				size: "sm",
+				icon: settingsIcon("plus", 16),
+				disabled: panel.busy || report === null || !report.pairingReady || !can("beginPairing"),
+				"aria-expanded": pairingOpen,
+				"aria-controls": pairingId,
+				onClick: () => {
+					if (pairingOpen) {
+						hidePairingQR();
+						setPairingOpen(false);
+						return;
+					}
+					setPairingOpen(true);
+					if (pairingTarget !== null && report?.pairingReady) showPairingQR(pairingTarget);
+				}
+			}, translateWith(props.t, pairingOpen ? "pair.close" : "pair.add")))), pairingSection, (0, react.createElement)("div", { className: "pbb-card pbb-devicesCard" }, deviceMessage ? (0, react.createElement)("p", {
+				className: "pbb-diag pbb-deviceMessage" + (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", {
+			}, deviceMessage) : null, deviceRows)), (0, react.createElement)("section", {
+				className: "pbb-card pbb-tools",
+				"aria-label": translateWith(props.t, "tools.title")
+			}, (0, react.createElement)("div", { className: "pbb-toolSection" }, (0, react.createElement)("button", {
 				type: "button",
 				className: "pbb-cardHead",
 				"aria-expanded": troubleshootingOpen,
+				"aria-controls": troubleshootingId,
 				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", {
+			}, settingsIcon("activity", 17), (0, react.createElement)("span", { className: "pbb-cardTitle" }, translateWith(props.t, "troubleshooting.summary")), (0, react.createElement)("span", { className: "pbb-toolMeta" + (troubleGood ? " pbb-ok" : troubleBad && relayTestResult !== null ? " pbb-bad" : "") }, troubleConclusion), (0, react.createElement)("span", { className: "pbb-chev" }, ChevronIcon())), fold(troubleshootingOpen, (0, react.createElement)("div", {
+				className: "pbb-cardBody",
+				id: troubleshootingId
+			}, (0, react.createElement)("div", { className: "pbb-testGrid" }, (0, react.createElement)("div", { className: "pbb-testItem" }, (0, react.createElement)("div", { className: "pbb-controlText" }, (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,
 				onClick: runRelayTest
-			}, relayTestBusy ? translateWith(props.t, "push.relayTesting") : translateWith(props.t, "push.testRelay"))), (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.testPush")), (0, react.createElement)("span", { className: "pbb-testDescription" }, translateWith(props.t, "push.pushDefault"))), (0, react.createElement)("button", {
+			}, relayTestBusy ? translateWith(props.t, "push.relayTesting") : translateWith(props.t, "push.testRelay"))), (0, react.createElement)("div", { className: "pbb-testItem" }, (0, react.createElement)("div", { className: "pbb-controlText" }, (0, react.createElement)("span", { className: "pbb-testTitle" }, translateWith(props.t, "push.testPush")), (0, react.createElement)("span", { className: "pbb-testDescription" }, translateWith(props.t, "push.pushDefault"))), (0, react.createElement)("button", {
 				type: "button",
 				className: "pbb-action",
 				disabled: pushTestBusy,
 				onClick: sendPushTest
-			}, pushTestBusy ? translateWith(props.t, "push.pushSending") : translateWith(props.t, "push.testPush"))), (0, react.createElement)("div", { className: "pbb-testItem" }, (0, react.createElement)("div", { className: "pbb-switchText" }, (0, react.createElement)("span", { className: "pbb-testTitle" }, translateWith(props.t, "troubleshooting.debugTitle")), (0, react.createElement)("span", { className: "pbb-testDescription" }, translateWith(props.t, "troubleshooting.debugDescription"))), (0, react.createElement)("button", {
-				type: "button",
-				role: "switch",
-				"aria-checked": debugEnabled,
-				"aria-label": translateWith(props.t, "troubleshooting.debugTitle"),
+			}, pushTestBusy ? translateWith(props.t, "push.pushSending") : translateWith(props.t, "push.testPush"))), (0, react.createElement)("div", { className: "pbb-testItem" }, (0, react.createElement)("div", { className: "pbb-controlText" }, (0, react.createElement)("span", { className: "pbb-testTitle" }, translateWith(props.t, "troubleshooting.debugTitle")), (0, react.createElement)("span", { className: "pbb-testDescription" }, translateWith(props.t, "troubleshooting.debugDescription"))), (0, react.createElement)(_deepseek_ai_dsh_client_ui_primitives.Switch, {
+				checked: debugEnabled,
+				label: translateWith(props.t, "troubleshooting.debugTitle"),
 				disabled: !debugSwitchReady,
-				className: "pbb-switch" + (debugEnabled ? " pbb-switchOn" : ""),
-				onClick: () => {
-					if (can("setDebug")) props.setDeepPilotDebug(!debugEnabled);
+				onChange: (next) => {
+					if (can("setDebug")) props.setDeepPilotDebug(next);
 				}
 			}))), 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", {
+			}, 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", {
+			}, 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" }, translateWith(props.t, "push.resultDetail", { message: pushTestResult.message })) : null, pushTestResult.results.map((r, index) => resultRow(r.outcome === "sent", r.name + "（" + translateWith(props.t, r.environment === "production" ? "push.environment.production" : r.environment === "development" ? "push.environment.development" : "push.environment.other", { environment: r.environment }) + "） · " + translateWith(props.t, r.outcome === "sent" ? "push.outcome.sent" : r.outcome === "invalid-token" ? "push.outcome.invalid" : r.outcome === "failed" ? "push.outcome.failed" : "push.outcome.other", { outcome: r.outcome }) + (r.reason ? "（" + r.reason + "）" : "") + (r.tokenFingerprint ? " token:" + r.tokenFingerprint + "…" : ""), String(index)))), diagnosticsSection))), report === null ? null : (0, react.createElement)("div", { className: "pbb-toolSection" }, (0, react.createElement)("button", {
 				type: "button",
 				className: "pbb-cardHead",
 				"aria-expanded": systemOpen,
+				"aria-controls": systemId,
 				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", {
+			}, settingsIcon("info", 17), (0, react.createElement)("span", { className: "pbb-cardTitle" }, translateWith(props.t, "system.summary")), (0, react.createElement)("span", { className: "pbb-toolMeta" + (report.updateAvailable === true ? " pbb-ok" : "") }, "v" + report.pluginVersion + (report.updateAvailable === true ? " · " + translateWith(props.t, "update.badge") : "")), (0, react.createElement)("span", { className: "pbb-chev" }, ChevronIcon())), fold(systemOpen, (0, react.createElement)("div", {
+				className: "pbb-cardBody",
+				id: systemId
+			}, (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"))), (0, react.createElement)("div", { className: "pbb-runtimeRow" }, (0, react.createElement)("span", { className: "pbb-label" }, translateWith(props.t, "panel.identity")), (0, react.createElement)("span", { className: "pbb-value" }, translateWith(props.t, report.pairingReady ? "panel.identityReady" : "panel.identityNotReady"))), 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"
-			}, (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", {
+			}, (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, (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);