dsh-remote-panel 0.2.2 → 0.3.1

package/README.md

@@ -64,6 +64,22 @@ Caddy 的 `pki/authorities/local/root.crt`）。
 - Android：设置 → 安全 → 加密与凭据 → 安装证书 → CA 证书。
 - iOS：下载后到 设置 → 通用 → 关于本机 → 证书信任设置 里打开信任。
 
+## 安全模型：令牌只在门禁之后
+
+手机端有两道门：Caddy 的口令门禁（`dsh_gate` Cookie）+ DSH 自己的会话令牌。两者的取用顺序是：
+
+```
+扫码/点链接 → /pair?k=口令（种门禁 Cookie） → /remote-panel/login（要 Cookie，Caddy 直接发）
+            → /?token=…（换取 DSH 会话）
+```
+
+- 二维码里**只有口令**，没有令牌；
+- 带令牌的跳转页 `login.html` 放在门禁**之后**，没有 Cookie 拿不到（实测 401）；
+- 免鉴权的 `/remote-panel/app/*` 只放静态资源（manifest / 图标 / 根证书 / APK），不含任何凭据；
+- 旧版 APK 的入口 `go.html` 已改成「请更新」提示页，不会再泄露令牌。
+
+APK 里内置了门禁口令（启动即过 `/pair`），所以**换口令后需要重新构建壳**。
+
 ## 手机 App（WebView 壳）
 
 PWA「安装应用」在国行 Android 上装不成：WebAPK 打包依赖 Google Play 服务，且打包服务器要能从公网

package/deploy/templates/Caddyfile.tmpl

@@ -25,7 +25,7 @@
 		handle /pair {
 			header Set-Cookie "dsh_gate=@@ACCESS_KEY@@; Max-Age=31536000; Path=/; HttpOnly; SameSite=Lax"
 			header Content-Type "text/html; charset=utf-8"
-			respond `<!doctype html><meta charset="utf-8"><title>正在连接…</title><script>const t=new URLSearchParams(location.search).get("token");location.replace(t?"/?token="+encodeURIComponent(t):"/")</script>` 200
+			respond `<!doctype html><meta charset="utf-8"><title>正在连接…</title><script>const t=new URLSearchParams(location.search).get("token");location.replace(t?"/?token="+encodeURIComponent(t):"/remote-panel/login")</script>` 200
 		}
 
 		# 诊断用：不经过任何认证
@@ -62,6 +62,12 @@
 		# Caddy 默认没有 cookie 匹配器，用 Header 通配匹配替代
 		@paired header Cookie "*dsh_gate=@@ACCESS_KEY@@*"
 		handle @paired {
+			# 带令牌的跳转页：必须过了门禁才能拿
+			handle /remote-panel/login* {
+				root * @@APP_DIR@@
+				rewrite * /login.html
+				file_server
+			}
 			# 关键：不重写 Host/Origin。DSH 通过 --trusted-host 接受这个 authority，
 			# Cookie 因此天然同源，不需要任何注入或伪造。
 			reverse_proxy 127.0.0.1:@@UPSTREAM_PORT@@

package/lib/client.js

@@ -545,11 +545,14 @@ window.__ModuleLoader__.load({
 			const [probe, setProbe] = useState(null)
 			const [rejects, setRejects] = useState([])
 			const [busy, setBusy] = useState(false)
+			const [shell, setShell] = useState(null)
 
 			const refresh = useCallback(async () => {
 				setBusy(true)
 				try {
-					setProbe((await callApi('/probe')).probe)
+					const [probed, status] = await Promise.all([callApi('/probe'), callApi('/status')])
+					setProbe(probed.probe)
+					setShell(status.shell ?? null)
 					setRejects((await callApi('/rejects')).entries)
 				} catch {
 					/* 状态探测失败时保留上一帧 */
@@ -572,6 +575,8 @@ window.__ModuleLoader__.load({
 				// 内部 CA 的叶子证书只有 12 小时，续签失败时探活照样握手成功（rejectUnauthorized:false），
 				// 所以单独看它：剩余不足 2 小时或 SAN 不匹配都算红灯
 				[certHours === null ? '证书' : `证书 ${certHours}h`, cert === undefined ? undefined : { ok: cert.ok === true }],
+				// 手机外壳依赖 DSH 的 hash 类名：DSH 升级后这里会红，提示需要更新插件
+				['外壳适配', shell === null ? undefined : { ok: shell.ok === true }],
 			]
 
 			return jsxs(Card, {
@@ -591,6 +596,12 @@ window.__ModuleLoader__.load({
 							}),
 						],
 					}),
+					shell !== null && shell.ok !== true
+						? jsx('p', {
+								style: { ...styles.hint, color: '#f2b8b5' },
+								children: `外壳挂点缺失：${(shell.missing ?? []).join(', ') || '未知'} —— DSH 升级后需要更新插件，否则手机样式会错位`,
+							})
+						: null,
 					cert !== undefined && cert.ok !== true
 						? jsx('p', {
 								style: { ...styles.hint, color: '#f2b8b5' },
@@ -1068,19 +1079,25 @@ window.__ModuleLoader__.load({
     inset: 0 auto 0 0;
     height: auto !important;
     z-index: 900;
-    padding-bottom: env(safe-area-inset-bottom, 0px);
+    padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--dsh-safe-bottom, 0px));
     border-radius: 0 16px 16px 0 !important;
     box-shadow: 0 0 28px rgba(0, 0, 0, .32) !important;
   }
   /* 独立窗口里别再有下拉刷新 / 橡皮筋 */
   body { overscroll-behavior: none; }
 
+  /* 顶部安全区：默认取 env()；WebView 里由壳把真实切角高度写进 --dsh-safe-top */
+  :root {
+    --dsh-safe-top: env(safe-area-inset-top, 0px);
+    --dsh-safe-bottom: env(safe-area-inset-bottom, 0px);
+  }
+
   /* 顶栏：52px；刘海屏/独立窗口把状态栏让出来 */
   .wSkVaW_header {
-    min-height: calc(52px + env(safe-area-inset-top, 0px)) !important;
-    padding: calc(11px + env(safe-area-inset-top, 0px)) 60px 0 10px !important;
+    min-height: calc(52px + var(--dsh-safe-top, 0px)) !important;
+    padding: calc(12px + var(--dsh-safe-top, 0px)) 60px 0 10px !important;
   }
-  .wSkVaW_headerSessionless { padding-top: calc(11px + env(safe-area-inset-top, 0px)) !important; }
+  .wSkVaW_headerSessionless { padding-top: calc(12px + var(--dsh-safe-top, 0px)) !important; }
   .wSkVaW_headerCorner { display: none !important; }
   /* 手机的「用文件管理器打开」是桌面动作，收掉 */
   .OMoRSG_split { display: none !important; }
@@ -1153,11 +1170,16 @@ window.__ModuleLoader__.load({
   .pXSMma_previewBadge { display: none !important; }
   /* 原生把「问候语 + 输入条」一起居中；手机按原型拆开：
      问候语留在屏幕中间（原生居中），输入条钉到底部 */
+  /* 会话里的输入条座位：底部要让开手势条（WebView 里 env() 常为 0，由壳注入） */
+  .wSkVaW_composerSeat {
+    padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--dsh-safe-bottom, 0px)) !important;
+  }
+
   .wSkVaW_composerHero .uV2eYG_root {
     position: fixed;
     left: 0;
     right: 0;
-    bottom: max(18px, env(safe-area-inset-bottom, 0px));
+    bottom: max(18px, max(env(safe-area-inset-bottom, 0px), var(--dsh-safe-bottom, 0px)));
     z-index: 55;
   }
 
@@ -1167,8 +1189,9 @@ window.__ModuleLoader__.load({
     left: 0;
     right: 0;
     z-index: 60;
-    top: env(safe-area-inset-top, 0px);
-    height: 52px;
+    /* 与顶栏里那颗汉堡同一个纵向基线：顶栏 padding-top = 12 + safe-top，行高 40 */
+    top: calc(12px + var(--dsh-safe-top, 0px));
+    height: 40px;
     margin: 0;
     padding: 0 64px;
     align-items: center;
@@ -1193,7 +1216,12 @@ window.__ModuleLoader__.load({
   .uV2eYG_row { padding: 6px 10px 10px !important; }
 
   /* 抽屉：工作区列表置顶，面板入口退到列表下面，删掉品牌行与「新会话」行 */
-  .hHd-Xa_root { display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px) !important; }
+  /* 顶部按刘海高度留白，但那块就是页面自己的底色，看起来只是「留白」不是「切角」 */
+  .hHd-Xa_root {
+    display: flex;
+    flex-direction: column;
+    padding-top: calc(12px + var(--dsh-safe-top, 0px)) !important;
+  }
   .hHd-Xa_logoRow, .hHd-Xa_newSession { display: none !important; }
   .hHd-Xa_regionArea { order: 1; }
   /* 手机上的 DSH = 对话 + 改动 + 余额：只留「工作区 Git」，其余面板入口全收 */
@@ -1222,14 +1250,44 @@ window.__ModuleLoader__.load({
   html.dsh-search-open .bhn1Oq_searchInput { height: 38px !important; }
 
   /* 点遮罩关抽屉：原生窄屏没有这层，补一个（抽屉之下、正文之上） */
-  html.dsh-drawer-open .dsh-mobile-scrim {
-    display: block;
+  /* 遮罩常驻，用透明度过渡：display 切换会瞬变，看着很硬 */
+  .dsh-mobile-scrim {
     position: fixed;
     inset: 0;
     z-index: 899;
-    background: rgba(0, 0, 0, .35);
+    display: block;
+    opacity: 0;
+    pointer-events: none;
+    /* 纯黑底上「压暗」看不出层级，这里反过来提亮：抽屉保持纯黑，其余区域变灰 */
+    background: rgba(255, 255, 255, .16);
+    transition: opacity 160ms cubic-bezier(.2, .8, .2, 1);
+  }
+  html.dsh-drawer-open .dsh-mobile-scrim {
+    opacity: 1;
+    pointer-events: auto;
+    /* 只在真正要动画时才提成合成层，别让它一直挂着 */
+    will-change: opacity;
+  }
+
+  /* 微交互：按压/悬停给 120ms 过渡，别让反馈是瞬变 */
+  .dsh-mobile-hamburger, .dsh-mobile-newchat, .dsh-mobile-clear-workspace,
+  .dsh-code-copy, .dsh-mobile-offline {
+    transition: background-color 120ms ease-out, color 120ms ease-out,
+      opacity 120ms ease-out, transform 120ms ease-out;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .dsh-mobile-hamburger:active, .dsh-mobile-newchat:active,
+  .dsh-mobile-clear-workspace:active, .dsh-code-copy:active {
+    transform: scale(.94);
+  }
+  @keyframes dsh-pill-in {
+    from { opacity: 0; transform: translate(-50%, -4px); }
+    to { opacity: 1; transform: translate(-50%, 0); }
+  }
+  .dsh-mobile-offline { animation: dsh-pill-in 160ms cubic-bezier(.2, .8, .2, 1); }
+  @media (prefers-reduced-motion: reduce) {
+    .dsh-mobile-scrim, .dsh-mobile-offline { transition: none; animation: none; }
   }
-  .dsh-mobile-scrim { display: none; }
 
   /* 会话内容：代码块 / 表格 / 图片 / 附件在手机上不撑破页面 */
   .md-code-block { max-width: 100%; }
@@ -1270,7 +1328,7 @@ window.__ModuleLoader__.load({
   .dsh-code-copy[data-done="true"] { opacity: .6; }
   .dsh-code-copy--float {
     position: absolute;
-    top: 6px;
+    top: calc(6px + var(--dsh-safe-top, 0px));
     right: 6px;
     z-index: 2;
     background: var(--dsw-alias-bg-base, rgba(0, 0, 0, .4));
@@ -1295,22 +1353,31 @@ window.__ModuleLoader__.load({
 
 /* 手机外壳：深色配色（浅色主题保持原生配色，只换骨架） */
 @media (max-width: 1023px) {
-  body[data-ds-dark-theme] { background: #000 !important; }
+  /* 纯黑底：连 DSH 自己的深色面（.wSkVaW_root / emptyTabHost / 抽屉）一起刷，
+     否则空白页黑、会话页 #151517，开关抽屉会看到底色跳变。
+     抽屉保持纯黑，靠遮罩提亮来区分层级。 */
+  body[data-ds-dark-theme],
+  body[data-ds-dark-theme] .wSkVaW_root,
+  body[data-ds-dark-theme] [class*="_emptyTabHost"],
   body[data-ds-dark-theme] [class*="_frame"],
-  body[data-ds-dark-theme] [class*="_centerCol"] { background: #000 !important; }
-  body[data-ds-dark-theme] [class*="_sidebarCol"] {
+  body[data-ds-dark-theme] [class*="_centerCol"],
+  body[data-ds-dark-theme] [class*="_scrollBody"],
+  body[data-ds-dark-theme] [class*="_sidebarCol"],
+  body[data-ds-dark-theme] .hHd-Xa_root,
+  body[data-ds-dark-theme] .hHd-Xa_regionArea,
+  body[data-ds-dark-theme] .hHd-Xa_panelList {
     background: #000 !important;
+  }
+  body[data-ds-dark-theme] [class*="_sidebarCol"] {
     border: 0 !important;
-    box-shadow: 0 0 32px rgba(0, 0, 0, .45);
+    box-shadow: none;
   }
-  body[data-ds-dark-theme] .hHd-Xa_root { background: #000 !important; }
   body[data-ds-dark-theme] .wSkVaW_header { border-bottom: 0 !important; background: transparent !important; }
   body[data-ds-dark-theme] .uV2eYG_card {
-    background: #141416 !important;
     box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
   }
   body[data-ds-dark-theme] .pXSMma_workspace { background: rgba(255, 255, 255, .07) !important; }
-  /* 列表底部的滚动渐隐原本渐到 #1b1b1c，在纯黑抽屉上会显出一条灰条 */
+  /* 列表底部的滚动渐隐原本渐到 #1b1b1c，跟统一底色对齐 */
   body[data-ds-dark-theme] .bhn1Oq_fade {
     background-image: linear-gradient(rgba(0, 0, 0, 0), #000) !important;
   }
@@ -1322,7 +1389,7 @@ window.__ModuleLoader__.load({
   /* 断线胶囊：连续两次探活失败才出现，恢复即消失（任何宽度都显示） */
   .dsh-mobile-offline {
     position: fixed;
-    top: calc(env(safe-area-inset-top, 0px) + 6px);
+    top: calc(6px + var(--dsh-safe-top, 0px));
     left: 50%;
     transform: translateX(-50%);
     z-index: 80;
@@ -1388,21 +1455,21 @@ window.__ModuleLoader__.load({
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     overscroll-behavior: contain;
-    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
+    padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--dsh-safe-bottom, 0px)) !important;
   }
 
-  /* 长会话滚动：离屏的 markdown 块不参与布局/绘制。
-     DSH 不虚拟化消息，几百轮之后节点全在文档里；content-visibility 让浏览器跳过离屏块，
-     滚动时只画视口附近的内容。只在窄屏生效，桌面保持原样。 */
+  /* 长会话滚动：只在窄屏做滚动容器层面的优化，桌面保持原样 */
   @media (max-width: 1023px) {
-    [class*="_markdown"] {
-      content-visibility: auto;
-      contain-intrinsic-size: auto 320px;
-    }
+    /* 曾经给 markdown 块加 content-visibility:auto 想省渲染，
+       但 4x CPU 节流实测滚动会卡出 155ms 的长帧（块进入视口时要重新布局），
+       手机上的「卡顿」就是它。这里去掉，只保留滚动容器本身的优化。 */
     [class*="_scrollBody"] {
       overscroll-behavior: contain;
       -webkit-overflow-scrolling: touch;
     }
+    /* 点按不要留系统高亮块（各 ROM 的 WebView 默认会给一层灰/蓝色块） */
+    * { -webkit-tap-highlight-color: transparent; }
+    *:focus:not(:focus-visible) { outline: none; }
   }
 
 `
@@ -1444,11 +1511,22 @@ window.__ModuleLoader__.load({
 				clear.dataset.none = String(isEmpty())
 				row.appendChild(clear)
 			}
-			const observer = new MutationObserver(ensure)
+			// 流式回答时 DOM 每秒要变很多次，ensure 里是一次全量 querySelector，
+			// 必须合并到每帧最多一次，否则主线程全被它占了（手机上就是掉帧）
+			let frame = 0
+			const schedule = () => {
+				if (frame !== 0) return
+				frame = requestAnimationFrame(() => {
+					frame = 0
+					ensure()
+				})
+			}
+			const observer = new MutationObserver(schedule)
 			observer.observe(document.body, { subtree: true, childList: true })
 			ensure()
 			return () => {
 				observer.disconnect()
+				if (frame !== 0) cancelAnimationFrame(frame)
 				document.querySelector('.dsh-mobile-clear-workspace')?.remove()
 			}
 		}
@@ -1465,7 +1543,15 @@ window.__ModuleLoader__.load({
 			const onPop = () => {
 				if (isOpen()) layout?.toggleSidebar?.()
 			}
+			let frame = 0
 			const observer = new MutationObserver(() => {
+				if (frame !== 0) return
+				frame = requestAnimationFrame(() => {
+					frame = 0
+					check()
+				})
+			})
+			const check = () => {
 				if (query && !query.matches) return
 				const open = isOpen()
 				if (open && !pushed) {
@@ -1479,7 +1565,7 @@ window.__ModuleLoader__.load({
 					pushed = false
 					if (history.state !== null && history.state.dshDrawer === true) history.back()
 				}
-			})
+			}
 			observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
 			window.addEventListener('popstate', onPop)
 			return () => {
@@ -1488,6 +1574,155 @@ window.__ModuleLoader__.load({
 			}
 		}
 
+		/**
+		 * 真机性能探针：URL 带 `?dsh-fps=1` 时在左下角显示帧率 / 最慢帧 / 长任务数。
+		 *
+		 * 只是为了在手机上定位「哪一步卡」，平时不加载任何逻辑（默认直接 return）。
+		 */
+		function installFpsMeter() {
+			if (typeof window === 'undefined' || typeof document === 'undefined') return () => {}
+			let enabled = /[?&]dsh-fps=1(&|$)/.test(window.location.search)
+			if (!enabled) {
+				try {
+					enabled = window.sessionStorage.getItem('dsh-fps') === '1'
+				} catch {
+					/* 隐私模式禁 storage，忽略 */
+				}
+			}
+			if (!enabled) return () => {}
+
+			const box = document.createElement('div')
+			box.style.cssText =
+				'position:fixed;left:8px;bottom:8px;z-index:99999;padding:4px 8px;border-radius:8px;' +
+				'background:rgba(0,0,0,.72);color:#7ef29b;font:11px/1.5 ui-monospace,monospace;' +
+				'pointer-events:none;white-space:pre;'
+			document.body.appendChild(box)
+
+			let frames = 0
+			let since = performance.now()
+			let worst = 0
+			let longTasks = 0
+			let fps = 0
+			let observer = null
+			try {
+				observer = new PerformanceObserver((list) => {
+					for (const entry of list.getEntries()) if (entry.duration > 50) longTasks += 1
+				})
+				observer.observe({ entryTypes: ['longtask'] })
+			} catch {
+				/* 老内核没有 longtask，忽略 */
+			}
+
+			const paint = () => {
+				box.textContent = `${fps}fps  worst ${Math.round(worst)}ms  long ${longTasks}`
+				worst = 0
+			}
+			let raf = 0
+			const tick = (now) => {
+				frames += 1
+				worst = Math.max(worst, now - since)
+				const elapsed = now - since
+				if (elapsed >= 500) {
+					fps = Math.round((frames * 1000) / elapsed)
+					frames = 0
+					since = now
+					paint()
+				}
+				raf = requestAnimationFrame(tick)
+			}
+			raf = requestAnimationFrame(tick)
+			window.setInterval(paint, 1000)
+			return () => {
+				cancelAnimationFrame(raf)
+				observer?.disconnect()
+				box.remove()
+			}
+		}
+
+		/**
+		 * 切换工作区后别自动聚焦输入框。
+		 *
+		 * DSH 打开工作区选择器时会先把焦点交给搜索框；关掉后焦点会回到输入条，
+		 * 手机上就是键盘自己弹出来。这里在选择器关闭、或 chip 文案变化后，
+		 * 把焦点从输入条上撤走（只撤输入条里的可编辑区，不动选择器自己的搜索框）。
+		 */
+		function installComposerFocusGuard() {
+			if (typeof document === 'undefined' || typeof MutationObserver === 'undefined') return () => {}
+			let labelObserver = null
+			let observedLabel = null
+			let lastLabel = ''
+
+			const isComposer = (el) =>
+				el !== null &&
+				el !== document.body &&
+				(el.isContentEditable === true || el.tagName === 'TEXTAREA' || el.tagName === 'INPUT') &&
+				(el.closest('.uV2eYG_root') !== null || el.closest('[class*="_composer"]') !== null)
+
+			const release = () => {
+				const el = document.activeElement
+				if (isComposer(el)) el.blur()
+			}
+			// DSH 可能在我们之后又把焦点塞回去，所以分几拍各撤一次
+			const scheduleRelease = () => {
+				for (const delay of [0, 80, 200, 400]) window.setTimeout(release, delay)
+			}
+
+			const watchLabel = () => {
+				const label = document.querySelector('[class*="_workspaceLabel"]')
+				if (label === null || label === observedLabel) return
+				labelObserver?.disconnect()
+				observedLabel = label
+				lastLabel = label.textContent ?? ''
+				labelObserver = new MutationObserver(() => {
+					const now = label.textContent ?? ''
+					if (now === lastLabel) return
+					lastLabel = now
+					scheduleRelease()
+				})
+				labelObserver.observe(label, { childList: true, characterData: true, subtree: true })
+			}
+
+			// 选择器关闭 = 里面那个搜索框失焦。用事件判断，别在每次 DOM 变动时全量 querySelector。
+			const onFocusOut = (event) => {
+				const target = event.target
+				if (target instanceof Element && target.closest('[class*="wsc-"]') !== null) scheduleRelease()
+			}
+			document.addEventListener('focusout', onFocusOut, true)
+			const ensureLabel = window.setInterval(watchLabel, 800)
+			watchLabel()
+			return () => {
+				document.removeEventListener('focusout', onFocusOut, true)
+				window.clearInterval(ensureLabel)
+				labelObserver?.disconnect()
+			}
+		}
+
+		/**
+		 * 外壳挂点自检：DSH 升级后这些 hash 类名可能全变，样式就整体失配。
+		 * 启动后检查一遍 DOM，把结果报给宿主，面板里能直接看到「外壳适配」这盏灯。
+		 */
+		function installShellContractReport() {
+			if (typeof document === 'undefined' || typeof window === 'undefined') return () => {}
+			// 只查「任何页面都该存在」的挂点；抽屉里的 hHd-Xa_ 只在打开时才有，不参与判定
+			const markers = ['wSkVaW_', 'uV2eYG_', 'pXSMma_', 'pI_x6G_']
+			let timer = window.setTimeout(async () => {
+				try {
+					const missing = markers.filter((marker) => document.querySelector(`[class*="${marker}"]`) === null)
+					if (missing.length > 0) {
+						console.warn('[remote-panel] 外壳挂点缺失，手机样式可能失配：', missing.join(', '))
+					}
+					await callApi('/shell', {
+						method: 'POST',
+						headers: { 'content-type': 'application/json' },
+						body: JSON.stringify({ missing }),
+					})
+				} catch {
+					/* 上报失败不影响使用 */
+				}
+			}, 1500)
+			return () => window.clearTimeout(timer)
+		}
+
 		/**
 		 * 本机反馈：任务跑完 / 等你确认时，如果页面在后台，闪一下标题 + 震动。
 		 * 不依赖推送服务（v1 不做推送），也不需要服务端配合。
@@ -1719,8 +1954,23 @@ window.__ModuleLoader__.load({
 				enhanceJobsBadge()
 				enhanceImages()
 			}
-			const observer = new MutationObserver(() => {
+			const RELEVANT = 'pre, img, table, [class*="job"], [class*="Job"], [class*="attach"]'
+			const isRelevant = (records) => {
+				for (const record of records) {
+					const target = record.target
+					if (target instanceof Element && target.closest(RELEVANT) !== null) return true
+					for (const node of record.addedNodes) {
+						if (node.nodeType !== 1) continue
+						if (node.matches?.(RELEVANT) === true || node.querySelector?.(RELEVANT) !== null) return true
+					}
+				}
+				return false
+			}
+			const observer = new MutationObserver((records) => {
 				if (scheduled !== 0) return
+				// 流式回答每帧都往消息里塞文本节点，全量扫描会把帧吃光；只有出现
+				// 代码块/图片/表格/任务卡/附件这类节点时才真的需要补按钮
+				if (!isRelevant(records)) return
 				scheduled = requestAnimationFrame(() => {
 					scheduled = 0
 					enhance()
@@ -1749,6 +1999,40 @@ window.__ModuleLoader__.load({
 		 * 断线重连提示：DSH 前端没有「连接断开」的可见反馈，网络一抖页面只是不动了。
 		 * 每 10s 打一次面板自己的 /status，连续两次失败才显示，恢复后自动消失。
 		 */
+		/**
+		 * 点输入条上的「+」（添加文件或调用指令）时，别让输入框自动聚焦。
+		 * 手机上一聚焦就弹键盘，把刚打开的面板顶走。
+		 *
+		 * 做法：在 pointerdown 阶段记一个短窗口（900ms），窗口内如果输入框收到 focus 就立刻 blur 回去；
+		 * 点别的地方会立刻清掉窗口，不会影响正常输入。
+		 */
+		function installComposerFocusGuard() {
+			if (typeof document === 'undefined') return () => {}
+			let until = 0
+			const isComposerInput = (el) => el instanceof Element && el.closest?.('.uV2eYG_input') !== null
+			const onPointerDown = (event) => {
+				const target = event.target
+				until = target instanceof Element && target.closest('.uV2eYG_add') !== null ? Date.now() + 900 : 0
+			}
+			const onFocusIn = (event) => {
+				if (Date.now() > until) return
+				const el = event.target
+				if (!isComposerInput(el)) return
+				const drop = () => {
+					if (Date.now() <= until && document.activeElement === el) el.blur?.()
+				}
+				drop()
+				// 有的实现会在下一帧再 focus 一次，补一刀
+				requestAnimationFrame(drop)
+			}
+			document.addEventListener('pointerdown', onPointerDown, true)
+			document.addEventListener('focusin', onFocusIn, true)
+			return () => {
+				document.removeEventListener('pointerdown', onPointerDown, true)
+				document.removeEventListener('focusin', onFocusIn, true)
+			}
+		}
+
 		function installConnectivity() {
 			if (typeof window === 'undefined' || typeof fetch !== 'function') return () => {}
 			let failures = 0
@@ -1984,11 +2268,17 @@ window.__ModuleLoader__.load({
 			const cleanupAttention = installAttention()
 			const cleanupContent = installContentEnhancements()
 			const cleanupNet = installConnectivity()
+			const cleanupFocus = installComposerFocusGuard()
+			const cleanupFps = installFpsMeter()
+			const cleanupContract = installShellContractReport()
 			if (typeof ctx.effect === 'function') ctx.effect(() => cleanupClear, 'remote-panel: workspace clear')
 			if (typeof ctx.effect === 'function') ctx.effect(() => cleanupBack, 'remote-panel: back gesture')
 			if (typeof ctx.effect === 'function') ctx.effect(() => cleanupAttention, 'remote-panel: attention')
 			if (typeof ctx.effect === 'function') ctx.effect(() => cleanupContent, 'remote-panel: content enhancements')
 			if (typeof ctx.effect === 'function') ctx.effect(() => cleanupNet, 'remote-panel: connectivity')
+			if (typeof ctx.effect === 'function') ctx.effect(() => cleanupFocus, 'remote-panel: composer focus guard')
+			if (typeof ctx.effect === 'function') ctx.effect(() => cleanupFps, 'remote-panel: fps meter')
+			if (typeof ctx.effect === 'function') ctx.effect(() => cleanupContract, 'remote-panel: shell contract report')
 			if (typeof ctx.effect === 'function') ctx.effect(() => cleanup, 'remote-panel: mobile shell css')
 
 			ctx.slots.inject('shell.overlay', () =>

package/lib/contract.js

@@ -0,0 +1,73 @@
+/**
+ * 外壳契约检查：确认 DSH 前端还在用我们依赖的那套 hash 类名。
+ *
+ * 手机外壳的样式全靠 DSH 构建产物里的私有类名（`wSkVaW_header` 这种），
+ * 它们随每次构建变化。DSH 一升级，样式可能整体失配——所以在宿主侧做一次
+ * 「挂点还在不在」的体检，失配时面板显红，而不是等用户发现界面错位。
+ *
+ * 只读：拉一次 index.html 和它引用的 CSS，做纯字符串匹配。
+ */
+
+import { request } from 'node:http'
+
+/** 外壳依赖的类名前缀（对应 lib/client.js 里的选择器）。 */
+export const SHELL_MARKERS = ['wSkVaW_', 'hHd-Xa_', 'uV2eYG_', 'pXSMma_', 'pI_x6G_']
+
+/**
+ * @param {{ port: number, token: string, host?: string, timeoutMs?: number }} options
+ * @returns {Promise<{ ok: boolean, missing: string[], asset?: string, reason?: string, checkedAt: number }>}
+ */
+export async function checkShellContract({ port, token, host = '127.0.0.1', timeoutMs = 4000 }) {
+	const checkedAt = Date.now()
+	const base = `http://${host}:${port}`
+	// DSH 的令牌是「先 303 种 Cookie，再访问首页」两步走，这里手工跟一次
+	const login = await requestText(`${base}/?token=${encodeURIComponent(token)}`, { timeoutMs })
+	const cookie = login.cookie
+	if (cookie === undefined) return { ok: false, missing: [...SHELL_MARKERS], reason: 'login-failed', checkedAt }
+	const html = await requestText(`${base}/`, { timeoutMs, cookie })
+	if (html.body === undefined) return { ok: false, missing: [...SHELL_MARKERS], reason: 'index-unreachable', checkedAt }
+	// 页面通常引多个 CSS（vendor + 业务），挂点类名在业务那个里，所以全取回来一起看
+	const assets = [...html.body.matchAll(/href="\.?\/?(assets\/[^"']+\.css)"/g)].map((m) => m[1])
+	if (assets.length === 0) return { ok: false, missing: [...SHELL_MARKERS], reason: 'no-css-asset', checkedAt }
+	let css = ''
+	let matched
+	for (const asset of assets) {
+		const body = await requestText(`${base}/${asset}`, { timeoutMs, cookie })
+		if (body.body === undefined) continue
+		css += body.body
+		if (matched === undefined && SHELL_MARKERS.some((marker) => body.body.includes(marker))) matched = asset
+	}
+	if (css === '') return { ok: false, missing: [...SHELL_MARKERS], reason: 'css-unreachable', checkedAt }
+	const missing = SHELL_MARKERS.filter((marker) => !css.includes(marker))
+	return { ok: missing.length === 0, missing, asset: matched ?? assets[0], assets, checkedAt }
+}
+
+/**
+ * 简单 GET：返回 { body, cookie }，超时/失败给 undefined。
+ * 体检不该把状态接口带崩，所以这里不抛异常。
+ */
+function requestText(url, { timeoutMs, cookie } = {}) {
+	return new Promise((resolve) => {
+		const headers = cookie === undefined ? {} : { cookie }
+		const req = request(url, { method: 'GET', headers, timeout: timeoutMs }, (res) => {
+			const jar = (res.headers['set-cookie'] ?? []).map((entry) => entry.split(';')[0]).join('; ')
+			if ((res.statusCode ?? 500) >= 400) {
+				res.resume()
+				resolve({ cookie: jar === '' ? undefined : jar })
+				return
+			}
+			let body = ''
+			res.setEncoding('utf8')
+			res.on('data', (chunk) => {
+				body += chunk
+			})
+			res.on('end', () => resolve({ body, cookie: jar === '' ? undefined : jar }))
+		})
+		req.on('timeout', () => {
+			req.destroy()
+			resolve({})
+		})
+		req.on('error', () => resolve({}))
+		req.end()
+	})
+}

package/lib/index.js

@@ -110,6 +110,7 @@ export function syncAppAssets(dir = join(homedir(), '.dsh', 'remote-panel-app'))
 			/* 缺某个尺寸不算致命 */
 		}
 	}
+	writeLandingPage(dir)
 	const ca = localCaPath()
 	if (ca !== undefined) {
 		try {
@@ -131,21 +132,52 @@ export function syncAppAssets(dir = join(homedir(), '.dsh', 'remote-panel-app'))
  * @param {string|undefined} token 当前进程的 DSH 令牌
  * @param {string|undefined} accessKey 门禁口令
  */
-export function writeGoPage(dir, token, accessKey) {
-	const target =
-		token === undefined || !accessKey
-			? '/'
-			: `/pair?k=${encodeURIComponent(accessKey)}&token=${encodeURIComponent(token)}`
+/**
+ * 写 `/remote-panel/login` 背后的跳转页（由 Caddy 放在门禁之后发送）。
+ *
+ * 之前这个页面放在免鉴权的 `/remote-panel/app/go.html` 里，等于把当前进程的令牌
+ * 暴露给网内任何人——口令门禁被绕过。现在令牌只在通过门禁之后才能拿到：
+ *
+ *   扫码 / 点链接 → /pair?k=口令（种 Cookie） → /remote-panel/login（要 Cookie） → /?token=
+ *
+ * @param {string} dir 资源目录
+ * @param {string|undefined} token 当前进程的 DSH 令牌
+ * @returns {string} 跳转目标
+ */
+export function writeLoginPage(dir, token) {
+	const target = token === undefined ? '/' : `/?token=${encodeURIComponent(token)}`
 	const html =
 		'<!doctype html><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">' +
 		`<title>DSH</title><meta http-equiv="refresh" content="0;url=${target}">` +
 		'<style>html,body{height:100%;margin:0;background:#000;color:#888;font:14px system-ui;display:flex;align-items:center;justify-content:center}</style>' +
 		'<p>正在进入 DSH…</p>' +
-		`<script>location.replace(${JSON.stringify(target)})</script>`
-	writeFileSync(join(dir, 'go.html'), html)
+		// ?fps=1 时把开关记进 sessionStorage，跳转后由客户端插件读取（真机性能排查用）
+		'<script>try{if(/[?&]fps=1/.test(location.search))sessionStorage.setItem("dsh-fps","1")}catch(e){}' +
+		`location.replace(${JSON.stringify(target)})</script>`
+	writeFileSync(join(dir, 'login.html'), html)
 	return target
 }
 
+/**
+ * 旧版手机壳的入口页：不再带任何凭据，只提示升级。
+ *
+ * v0.2.x 的 APK 启动地址是这里；那些版本会把令牌写在本页里（安全缺陷），
+ * 所以直接停用，让页面告诉用户装新版壳。
+ */
+export function writeLandingPage(dir) {
+	const html =
+		'<!doctype html><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">' +
+		'<title>DSH</title>' +
+		'<style>html,body{height:100%;margin:0;background:#000;color:#ddd;font:14px system-ui;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}</style>' +
+		'<div><p style="font-size:16px;font-weight:600;margin:0 0 8px">手机壳需要更新</p>' +
+		'<p style="color:#888;margin:0">旧版入口已停用（安全升级）。<br>请在浏览器打开面板重新下载 DSH 壳。</p></div>'
+	try {
+		writeFileSync(join(dir, 'go.html'), html)
+	} catch {
+		/* 目录不可写就算了 */
+	}
+}
+
 /**
  * 注入 index 的 head 行：主题色 + iOS 独立窗口 + 桌面图标 + 我们自己的 manifest。
  *
@@ -337,7 +369,7 @@ routes.set('GET /pair', async ({ req }) => {
 	const scheme = requestScheme(req) === 'https' || detectTls() ? 'https' : 'http'
 	try {
 		const dir = join(homedir(), '.dsh', 'remote-panel-app')
-		if (existsSync(dir)) writeGoPage(dir, token, state.accessKey)
+		if (existsSync(dir)) writeLoginPage(dir, token)
 	} catch {
 		/* 目录还没建好就算了 */
 	}
@@ -453,6 +485,17 @@ routes.set('GET /probe', async ({ probe: runProbe = probe }) => {
 	return { ok: true, state, probe: await runProbe(state, { tls: detectTls() }) }
 })
 
+/** 客户端上报的外壳挂点自检结果（内存里保留最近一次）。 */
+let lastShellReport = null
+
+routes.set('POST /shell', async ({ req }) => {
+	const body = await readJson(req)
+	const missing = Array.isArray(body?.missing) ? body.missing.filter((item) => typeof item === 'string') : null
+	if (missing === null) throw new BadRequest('missing 必须是字符串数组')
+	lastShellReport = { ok: missing.length === 0, missing, checkedAt: Date.now() }
+	return { ok: true, ...lastShellReport }
+})
+
 routes.set('GET /status', ({ query }) => {
 	const tlsEnabled = detectTls()
 	return {
@@ -465,6 +508,8 @@ routes.set('GET /status', ({ query }) => {
 		scheme: tlsEnabled ? 'https' : 'http',
 		// 轻量证书信息：只读最近一次 /probe 的缓存，不在 status 里做网络探测
 		tls: tlsStatus(tlsEnabled, lastCertSnapshot()),
+		// 手机外壳的挂点自检：客户端启动后上报一次，用来说明「DSH 升级后样式还对不对得上」
+		shell: lastShellReport,
 		echo: query.get('echo') ?? null,
 	}
 })
@@ -523,7 +568,7 @@ export function apply(ctx) {
 				const state = readState()
 				const ports = [Number(state?.port) || 8710, Number(state?.upstream) || 3080]
 				const tokens = await findTokens({ ports })
-				writeGoPage(appDir, tokens.at(-1), state?.accessKey)
+				writeLoginPage(appDir, tokens.at(-1))
 			} catch (error) {
 				console.warn('[remote-panel] write go.html failed', error)
 			}

package/lib/pair.js

@@ -98,13 +98,13 @@ export function pairingUrls({ ip, port, accessKey, token, scheme = 'http' }) {
 	return {
 		gate,
 		token: tokenUrl,
-		// 一张二维码走完两步：先种门禁 Cookie，再由 Caddy 转发到令牌地址
+		// 登录入口：受门禁保护，Caddy 直接发一份带当前令牌的跳转页。
+		// 二维码只带门禁口令，口令换来的 Cookie 才能打开它——令牌不落在二维码/链接里。
+		login: `${base}/remote-panel/login`,
+		// 一张二维码走完两步：先种门禁 Cookie，再由 Caddy 转发到登录入口
 		// 走专用路径：Caddy 会回一个同源页面，由它发起跳转——
 		// 跨站导航不会携带 SameSite=Strict 的 DSH Cookie，非要同源页面自己发起才行
-		combo:
-			accessKey !== undefined && token !== undefined
-				? `${base}/pair?k=${accessKey}&token=${token}`
-				: undefined,
+		combo: accessKey !== undefined ? `${base}/pair?k=${accessKey}` : undefined,
 	}
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-remote-panel",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "description": "DSH 远程访问控制面：部署向导、状态面板与一键配对（EasyTier + Caddy），数据面保持进程外。",
   "type": "module",
   "main": "./lib/index.js",
@@ -33,7 +33,8 @@
     "dsh": ">=0.2.1-rc.3"
   },
   "scripts": {
-    "test": "node --test \"test/*.test.js\""
+    "test": "node --test \"test/*.test.js\"",
+    "e2e": "node test/e2e/shell.mjs"
   },
   "dependencies": {
     "qrcode": "^1.5.4"