@ponydev/dsh-phone 0.3.0 → 0.3.2

package/AGENTS.md

@@ -36,13 +36,19 @@ docs/DESIGN.md                架构与布局；docs/mockups 原型；docs/scree
 ## 3. 提交前必须通过
 
 ```bash
-npm run check        # 语法 + i18n 键一致性
+npm run check        # 语法 + i18n + 隐私/截图门禁
 npm run smoke        # 解析/白名单/targets/尺寸（无 adb 自动 SKIP）
 npm pack --dry-run   # 发布内容检查
 ```
 
 CI 重复执行以上检查；失败不合并。
 
+## 3.1 隐私与截图门禁（不可绕过）
+
+1. `docs/screenshots/`、`docs/mockups/` 下的图**只能**由 `scripts/render-test.mjs` + **假 fixtures** 生成，禁止提交真机 / 真实账户截图；
+2. docs 截图必须在 `docs/screenshots/MANIFEST.md` 登记来源（`- \`路径\` ← \`scripts/xxx.mjs\``），由 `scripts/check-shots.mjs` 强制；
+3. 提交前 `npm run check` 已包含 `scripts/check-privacy.mjs` + `scripts/check-shots.mjs` 隐私门禁；命中即失败，不要为通过而放宽规则。
+
 ## 4. 安全不变量（不可破坏）
 
 1. **serial 白名单**：`shot` / `input` / `stream` / `screen-info` 前，serial 必须出现在最新 `adb devices -l` 里；

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.3.2 — 2026-10-26
+
+### 变更
+- 隐私清理：文档、mockup、冒烟测试与离线 harness 里的真实设备序列号 / Tailscale CGNAT IP / 私有主机名统一替换为示例值
+- 新增 `scripts/check-privacy.mjs` 与 `scripts/check-shots.mjs` 门禁，接入 `npm run check`、CI 与 release workflow
+- npm `files` 的 `docs` 收紧为 `docs/*.md`，不再把 docs 截图 / mockup 图片打包进发布物
+- 截图：删除真实截图 `01-devices` / `02-preview` 与 mockups 图片，只保留由 `scripts/render-test.mjs` + 假 fixtures 重生成的 `03-overview`，并在 `docs/screenshots/MANIFEST.md` 登记来源
+
+## 0.3.1 — 2026-10-25
+
+### 修复
+- 云手机在平台侧切换分辨率后画面比例不跟随：预览每 3s 用 `screen-info?fresh` 检测 `wm size`，变化时自动重连流并按新尺寸重启 screenrecord
+- 顶部新增当前流分辨率显示（如 `540×960 · 58fps · 20ms`）
+
 ## 0.3.0 — 2026-10-24
 
 ### 新增
@@ -52,8 +66,8 @@
 - 常用连接目标：连接成功自动记录（`$DSH_HOME/phone/targets.json`，最近 12 条），未连接目标也显示在列表，点击直接 `adb connect`
 - `⋯ → adb 诊断`：adb 路径/版本、每台设备状态，可复制
 - 列表改为平铺，不再按「云手机」分组；只保留连接方式标签（USB / Wi-Fi / Tailscale / emulator）
-- Tailscale 判定：`unicom-openclaw-*`、`*.ts.net`、`100.64.0.0/10`
-- 真机验证：Pixel 7a 上 tap / swipe / 返回 / 主页 均已实测（点开「网络和互联网」「关于本机」，列表滚动）
+- Tailscale 判定：`*.ts.net`、`100.64.0.0/10`
+- 真机验证：Android 真机上 tap / swipe / 返回 / 主页 均已实测（点开「网络和互联网」「关于本机」，列表滚动）
 - H.264 实时预览：Host `POST /phone/stream` 直接 pipe `screenrecord --output-format=h264`；客户端 Annex-B → avcC → WebCodecs VideoDecoder → canvas，约 20–30fps
 - 不支持 WebCodecs 的浏览器自动回退截图轮询；`screen-info` 提供设备真实分辨率做坐标换算
 - 操作栏改为底部悬浮胶囊（HarmonyOS 风格三键 + 截图），不占画面高度；顶部设备下拉/清晰度/旋转/更多；断开连接收进设备菜单并二次确认

package/CONTRIBUTING.md

@@ -24,7 +24,7 @@ launchctl kickstart -k gui/$(id -u)/local.deepseek-harness.web
 离线 UI 验证（不依赖宿主，也不需要会话）：
 
 ```bash
-# 先准备一张真实截图
+# 先准备一张画面占位图（本地调试可用真机截图；提交进 docs 的截图必须用合成占位图）
 adb -s <serial> exec-out screencap -p > /tmp/dsh-phone-shot.png
 npm run test-ui          # 输出 /tmp/dsh-phone-render.png
 open /tmp/dsh-phone-render.html
@@ -38,7 +38,7 @@ open '/tmp/dsh-phone-render.html#stream'
 ## 提交前检查
 
 ```bash
-npm run check        # 语法 + i18n 键一致性
+npm run check        # 语法 + i18n + 隐私/截图门禁
 npm run smoke        # 解析/白名单/targets/尺寸（无 adb 自动 SKIP）
 npm pack --dry-run   # 发布内容检查
 ```
@@ -49,5 +49,6 @@ npm pack --dry-run   # 发布内容检查
 - serial 必须先过 `adb devices` 列表校验；不要假设云手机型号/分辨率（用 `wm size`）。
 - 不新增运行时依赖；不引入构建工具。
 - 颜色只用 `--dsw-*` token，文案走 zh/en 字典；不做元数据栏、不做文字输入。
-- 真实设备截图不要提交到仓库；docs 截图用合成素材生成。
+- **截图只能由 `scripts/render-test.mjs` + 假 fixtures 生成**；不要把真机 / 真实账户截图提交到仓库。
+- docs 截图必须在 `docs/screenshots/MANIFEST.md` 登记来源；提交前 `npm run check` 含隐私门禁（`check-privacy` + `check-shots`），命中即失败。
 - Conventional Commits：`feat:` / `fix:` / `docs:` / `ci:` / `chore:` / `refactor:`；不写 AI 署名。

package/README.md

@@ -5,10 +5,6 @@
 
 DSH Web 插件：在右侧栏预览已连接的 Android 设备，点画面就是点手机。
 
-| 设备列表 | 预览画面 |
-|---|---|
-| ![设备列表](docs/screenshots/01-devices.png) | ![预览画面](docs/screenshots/02-preview.png) |
-
 ![完整界面](docs/screenshots/03-overview.png)
 
 ## 功能
@@ -21,7 +17,7 @@ DSH Web 插件：在右侧栏预览已连接的 Android 设备，点画面就是
 - **连接**：`adb connect <ip>:<port>`（无线调试、Tailscale 云手机）；连接过的目标自动记到 `$DSH_HOME/phone/targets.json`，未连接时也显示在列表里，点一下就直接连。
 - **诊断**：`⋯ → adb 诊断` 看 adb 路径/版本、每台设备状态，一键复制。
 - **更多**：电源、旋转、重新连接、adb 诊断、浮窗打开、复制 serial、断开。
-- 连接方式由 serial 判断：`usb:` 属性 → USB；`unicom-openclaw-*` 或 `100.64.0.0/10` → Tailscale；其余带端口 → Wi-Fi。
+- 连接方式由 serial 判断：`usb:` 属性 → USB；`*.ts.net` 或 `100.64.0.0/10` → Tailscale；其余带端口 → Wi-Fi。
 - 系统平台由 `getprop` 判断（`ro.build.version.harmony*` / `hw_sc.build.platform.version` → HarmonyOS，其余 Android）；iOS 图标等接入 WDA transport 后生效。
 - 没有分辨率/网速元数据栏，没有文字输入框。
 
@@ -29,7 +25,7 @@ DSH Web 插件：在右侧栏预览已连接的 Android 设备，点画面就是
 
 ```sh
 # 本地开发（link 到当前 clone）
-dsh plugin --profile web add link:/Users/pony/deepseek/plugins/dsh-phone
+dsh plugin --profile web add link:~/deepseek/plugins/dsh-phone
 
 # 从 npm（发布后）
 dsh plugin --profile web add @ponydev/dsh-phone
@@ -46,7 +42,7 @@ dsh plugin --profile web add @ponydev/dsh-phone
     - id: phone
       name: "@ponydev/dsh-phone"
       config:
-        adbPath: adb   # 或 /Users/pony/Library/Android/sdk/platform-tools/adb
+        adbPath: adb   # 或 ~/Library/Android/sdk/platform-tools/adb
         pollMs: 700
         streamTimeLimit: 180   # screenrecord 单次上限，到点自动续
         streamBitRate: 6000000 # 客户端清晰度会覆盖这两项
@@ -128,14 +124,14 @@ DSH 右侧栏第一次打开是**视口宽度的 45%**（1440 屏 ≈ 648px）
 ## 开发
 
 ```sh
-npm run check        # node --check 四个 lib 文件
+npm run check        # 语法 + i18n + 隐私/截图门禁
 npm run smoke        # 解析/白名单/真机 adb 冒烟
 node scripts/render-test.mjs [screenshot.png]
                      # 离线渲染列表 + 预览，输出 /tmp/dsh-phone-render.html/.png
 ```
 
-`scripts/render-test.mjs` 默认用 `/tmp/dsh-phone-shot.png` 作为画面占位；可以先用
-`adb -s <serial> exec-out screencap -p > /tmp/dsh-phone-shot.png` 生成。
+`scripts/render-test.mjs` 默认用 `/tmp/dsh-phone-shot.png` 作为画面占位。本地调试可以用真机截图，
+但**提交进 docs 的截图必须用合成占位图**（真机截图只放 /tmp，不进仓库）。
 
 ## 结构
 

package/docs/DESIGN.md

@@ -4,9 +4,7 @@
 > 参考 Codex Mobile Dev 的右侧设备面板：**顶上只有一行「设备下拉 + 几个图标」，下面整块留给设备画面**。
 > 本文是布局、命名与技术方案，**尚未开始写代码**。
 
-![设备列表](mockups/list.png)
-
-![设备画面](mockups/device.png)
+原型（离线 HTML，假数据，可用浏览器直接打开）：[`docs/mockups/mockup.html`](mockups/mockup.html)
 
 ---
 
@@ -65,12 +63,12 @@
 [ 选择设备 ▾ ]                              [刷新] [＋]
 ──────────────────────────────────────────────────────
 已连接
-  ▢ Pixel 7a      [USB]     34201JEHN07681          ›
-  ▢ Pixel 7a      [Wi-Fi]   100.107.25.26:5555      ›
-  ▢ 小米 13       [thor]    100.90.248.53:5555      ›
+  ▢ Pixel 7a      [USB]     SERIAL0123456789AB      ›
+  ▢ Pixel 7a      [Wi-Fi]   100.64.0.11:5555        ›
+  ▢ 小米 13       [thor]    100.64.0.12:5555        ›
 云手机
-  ☁ 云手机 pony             unicom-openclaw-pony:5555  ›
-  ☁ 云手机 test             unicom-openclaw-test:5555  ›
+  ☁ 云手机 A                node-a.example-tailnet.ts.net:5555  ›
+  ☁ 云手机 B                node-b.example-tailnet.ts.net:5555  ›
 ──────────────────────────────────────────────────────
 ● 5 台在线
 ```

package/lib/adb.js

@@ -88,7 +88,7 @@ function isCgnatSerial(serial) {
 export function classifyDevice(serial, props = {}) {
   if (props.usb) return 'usb'
   if (/^emulator-\d+$/.test(serial)) return 'emulator'
-  if (/^unicom-openclaw-|\.ts\.net/.test(serial)) return 'tailscale'
+  if (/\.ts\.net/.test(serial)) return 'tailscale'
   if (isCgnatSerial(serial)) return 'tailscale'
   if (serial.includes(':')) return 'wifi'
   return 'usb'
@@ -309,11 +309,11 @@ export class Adb {
   }
 
   /** 设备物理分辨率（wm size），客户端用它把画面坐标换算成输入坐标；缓存 60s。 */
-  async screenInfo(serial) {
+  async screenInfo(serial, options = {}) {
     await this.assertReady(serial)
     const cached = this._screens.get(serial)
     const now = Date.now()
-    if (cached && now - cached.at < 60_000) return cached.info
+    if (!options.fresh && cached && now - cached.at < 60_000) return cached.info
     const { stdout } = await this._run(['-s', serial, 'shell', 'wm', 'size'], { timeout: 5000 })
     const info = parseWmSize(stdout.toString('utf8'))
     if (!info) throw fail('bad-screen-info', '无法读取设备分辨率')
@@ -323,7 +323,7 @@ export class Adb {
 
   async connect(address) {
     if (typeof address !== 'string' || !ADDRESS_RE.test(address.trim())) {
-      throw fail('bad-address', '地址格式应为 host:port，例如 100.90.248.53:5555')
+      throw fail('bad-address', '地址格式应为 host:port，例如 192.0.2.53:5555')
     }
     const { stdout } = await this._run(['connect', address.trim()], { timeout: 8000 })
     this._devices.at = 0

package/lib/client.js

@@ -392,7 +392,7 @@ window.__ModuleLoader__.load({
         connect: (address) => unwrap('connect', { address }),
         disconnect: (serial) => unwrap('disconnect', { serial }),
         input: (serial, event) => unwrap('input', { serial, event }),
-        screenInfo: (serial) => unwrap('screen-info', { serial }),
+        screenInfo: (serial, options) => unwrap('screen-info', { serial, fresh: Boolean(options && options.fresh) }),
         ping: (serial) => unwrap('ping', { serial }),
         targets: () => unwrap('targets'),
         removeTarget: (address) => unwrap('targets/remove', { address }),
@@ -437,7 +437,7 @@ window.__ModuleLoader__.load({
     }
 
     function kindForAddress(address) {
-      if (/^unicom-openclaw-|\.ts\.net/.test(address)) return 'tailscale'
+      if (/\.ts\.net/.test(address)) return 'tailscale'
       if (/^100\.(6[4-9]|[7-9]\d|1[01]\d|12[0-7])\./.test(address)) return 'tailscale'
       if (address.includes(':')) return 'wifi'
       return 'usb'
@@ -663,7 +663,8 @@ window.__ModuleLoader__.load({
         let pps = null
         let frames = 0
         let waitingKey = true
-        let reportedSize = false
+        let lastWidth = 0
+        let lastHeight = 0
 
         const resetDecoder = () => {
           if (decoder) {
@@ -694,9 +695,10 @@ window.__ModuleLoader__.load({
                 frames += 1
                 waitingKey = false
                 if (onFrame) onFrame()
-                if (!reportedSize) {
-                  reportedSize = true
-                  if (onSize) onSize(frame.displayWidth, frame.displayHeight)
+                if (frame.displayWidth !== lastWidth || frame.displayHeight !== lastHeight) {
+                  lastWidth = frame.displayWidth
+                  lastHeight = frame.displayHeight
+                  if (onSize) onSize(lastWidth, lastHeight)
                 }
               } finally {
                 frame.close()
@@ -811,6 +813,7 @@ window.__ModuleLoader__.load({
       const [attempt, setAttempt] = useState(0)
       const [toast, setToast] = useState(null)
       const [fps, setFps] = useState(0)
+      const [streamSize, setStreamSize] = useState(null)
       const [rtt, setRtt] = useState(null)
       const frameCounter = useRef({ count: 0, at: typeof performance !== 'undefined' ? performance.now() : Date.now() })
       const streamStatus = useStream(
@@ -821,7 +824,10 @@ window.__ModuleLoader__.load({
         attempt,
         quality,
         (w, h) => {
-          if (w > 0 && h > 0) setRatio(w / h)
+          if (w > 0 && h > 0) {
+            setRatio(w / h)
+            setStreamSize({ width: w, height: h })
+          }
         },
         () => {
           frameCounter.current.count += 1
@@ -831,17 +837,27 @@ window.__ModuleLoader__.load({
       useEffect(() => {
         if (!serial) return undefined
         let alive = true
-        api
-          .screenInfo(serial)
-          .then((info) => {
-            if (alive && info && info.width && info.height && info.width > 0 && info.height > 0) {
-              setDeviceSize({ width: info.width, height: info.height })
-              setRatio(info.width / info.height)
-            }
-          })
-          .catch(() => {})
+        let last = null
+        const apply = (info) => {
+          if (!info || !info.width || !info.height || info.width < 2 || info.height < 2) return
+          const changed = last && (last.width !== info.width || last.height !== info.height)
+          last = { width: info.width, height: info.height }
+          setDeviceSize(last)
+          setRatio(info.width / info.height)
+          // 设备分辨率变了（云手机平台切换）：重连流，让 Host 按新尺寸重启 screenrecord
+          if (changed) setAttempt((value) => value + 1)
+        }
+        const check = async () => {
+          try {
+            const info = await api.screenInfo(serial, { fresh: true })
+            if (alive) apply(info)
+          } catch {}
+        }
+        check()
+        const timer = setInterval(check, 3000)
         return () => {
           alive = false
+          clearInterval(timer)
         }
       }, [serial])
 
@@ -1038,6 +1054,7 @@ window.__ModuleLoader__.load({
         ratio,
         immersive,
         deviceSize,
+        streamSize,
         frameUrl,
         error: errorNow,
         loading: loadingNow,
@@ -1389,7 +1406,7 @@ window.__ModuleLoader__.load({
                 h('input', {
                   className: 'dph-input',
                   value: address,
-                  placeholder: '100.90.248.53:5555',
+                  placeholder: '192.0.2.53:5555',
                   onChange: (event) => setAddress(event.target.value),
                   autoFocus: true,
                   spellCheck: false,
@@ -1657,7 +1674,16 @@ window.__ModuleLoader__.load({
                 qualityLabel(quality, t),
               )
             : null,
-          selected ? h('span', { className: 'dph-perf', title: t('quality') }, preview.fps + 'fps · ' + (preview.rtt == null ? '—' : preview.rtt + 'ms')) : null,
+          selected
+            ? h(
+                'span',
+                { className: 'dph-perf', title: t('quality') },
+                (preview.streamSize ? preview.streamSize.width + '×' + preview.streamSize.height + ' · ' : '') +
+                  preview.fps +
+                  'fps · ' +
+                  (preview.rtt == null ? '—' : preview.rtt + 'ms'),
+              )
+            : null,
           h('div', { className: 'dph-grow' }),
           rightButtons,
         ),

package/lib/index.js

@@ -95,7 +95,7 @@ export function apply(ctx, rawConfig) {
       case 'ping':
         return ok(await adb.ping(String(payload.serial || '')))
       case 'screen-info':
-        return ok(await adb.screenInfo(String(payload.serial || '')))
+        return ok(await adb.screenInfo(String(payload.serial || ''), { fresh: payload.fresh === true }))
       case 'disconnect':
         return ok(await adb.disconnect(String(payload.serial || '')))
       case 'input':
@@ -151,7 +151,7 @@ export function apply(ctx, rawConfig) {
               if (preset) {
                 openOptions = { bitRate: preset.bitRate }
                 try {
-                  const info = await adb.screenInfo(serial)
+                  const info = await adb.screenInfo(serial, { fresh: true })
                   const dims = streamSizeFor(info, preset.shortSide)
                   if (dims) openOptions.size = dims.width + 'x' + dims.height
                 } catch {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponydev/dsh-phone",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "DSH Web 插件：右侧栏预览并点按控制已连接的 Android 设备（adb）",
   "keywords": [
     "dsh",
@@ -25,7 +25,7 @@
   "type": "module",
   "files": [
     "lib",
-    "docs",
+    "docs/*.md",
     "cordis.patch.yml",
     "README.md",
     "CHANGELOG.md",
@@ -43,7 +43,7 @@
     "node": ">=22.5"
   },
   "scripts": {
-    "check": "node --check lib/adb.js && node --check lib/targets.js && node --check lib/stream.js && node --check lib/transport.js && node --check lib/index.js && node --check lib/client.js && node scripts/check-i18n.mjs",
+    "check": "node --check lib/adb.js && node --check lib/targets.js && node --check lib/stream.js && node --check lib/transport.js && node --check lib/index.js && node --check lib/client.js && node scripts/check-i18n.mjs && node scripts/check-privacy.mjs && node scripts/check-shots.mjs",
     "smoke": "node scripts/smoke.mjs",
     "check-i18n": "node scripts/check-i18n.mjs",
     "release-notes": "node scripts/release-notes.mjs",

package/docs/mockups/mockup.html

@@ -1,384 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-<head>
-<meta charset="utf-8" />
-<title>dsh-phone · 布局草案 v2</title>
-<style>
-  :root {
-    --bg: #ffffff;
-    --bg-side: #f7f7f8;
-    --bg-soft: #f4f4f5;
-    --border: #e9e9ec;
-    --border-strong: #dededf;
-    --text: #17171a;
-    --text-2: #6f6f76;
-    --text-3: #9a9aa1;
-    --accent: #3b6cff;
-    --accent-soft: #eef2ff;
-    --green: #22c55e;
-    --radius: 14px;
-    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
-  }
-  * { box-sizing: border-box; }
-  html, body { margin: 0; height: 100%; }
-  body { font-family: var(--font); color: var(--text); background: #ececee; -webkit-font-smoothing: antialiased; }
-  .frame { width: 1440px; height: 900px; display: flex; background: var(--bg); margin: 0 auto; overflow: hidden; }
-  svg { display: block; }
-
-  /* ---------------- left sidebar ---------------- */
-  .sidebar { width: 268px; flex: 0 0 268px; background: var(--bg-side); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 14px 10px 10px; }
-  .brand { display: flex; align-items: center; gap: 8px; padding: 2px 8px 12px; }
-  .brand .logo { width: 24px; height: 24px; border-radius: 7px; background: #17171a; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
-  .brand .name { font-size: 13.5px; font-weight: 600; letter-spacing: .2px; }
-  .newchat { margin: 0 2px 10px; height: 34px; border-radius: 10px; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; gap: 8px; padding: 0 11px; font-size: 13px; }
-  .newchat kbd { margin-left: auto; font: 11px var(--font); color: var(--text-3); }
-  .search { margin: 0 2px 12px; height: 30px; border-radius: 9px; background: #efeff1; display: flex; align-items: center; gap: 7px; padding: 0 9px; color: var(--text-3); font-size: 12.5px; }
-  .sec { font-size: 11px; color: var(--text-3); padding: 4px 10px 6px; letter-spacing: .3px; }
-  .sess { height: 34px; border-radius: 9px; display: flex; align-items: center; gap: 8px; padding: 0 9px; font-size: 13px; color: #3c3c42; margin-bottom: 1px; }
-  .sess .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); flex: none; }
-  .sess.active { background: #fff; box-shadow: 0 0 0 1px var(--border); font-weight: 500; color: var(--text); }
-  .sess.active .dot { background: var(--accent); }
-  .sess .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
-  .foot-row { height: 38px; border-radius: 10px; display: flex; align-items: center; gap: 9px; padding: 0 9px; font-size: 12.5px; color: var(--text-2); }
-  .foot-row .badge { margin-left: auto; font-size: 12px; color: var(--text); font-weight: 600; }
-  .foot-row .pill { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
-
-  /* ---------------- center ---------------- */
-  .main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #fff; }
-  .conv-head { height: 52px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 20px; }
-  .conv-title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .conv-sub { font-size: 12px; color: var(--text-3); }
-  .head-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
-  .iconbtn { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); background: transparent; border: 0; position: relative; }
-  .iconbtn.active { background: var(--accent-soft); color: var(--accent); }
-  .iconbtn .badge { position: absolute; top: 3px; right: 3px; min-width: 13px; height: 13px; border-radius: 7px; background: var(--accent); color: #fff; font-size: 9px; font-weight: 600; display: grid; place-items: center; padding: 0 3px; }
-  .hair { width: 1px; height: 18px; background: var(--border); margin: 0 3px; }
-  .transcript { flex: 1 1 auto; overflow: hidden; padding: 8px 0 0; display: flex; flex-direction: column; gap: 18px; }
-  .turn { padding: 0 26px; }
-  .turn.user { display: flex; justify-content: flex-end; }
-  .bubble { max-width: 78%; background: #f4f4f6; border-radius: 16px 16px 4px 16px; padding: 10px 14px; font-size: 13.5px; line-height: 1.62; color: #242428; }
-  .assistant { font-size: 13.5px; line-height: 1.72; color: #26262b; max-width: 92%; }
-  .assistant p { margin: 0 0 10px; }
-  .assistant .muted { color: var(--text-2); }
-  .inline-code { font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; background: #f2f2f4; border-radius: 5px; padding: 1px 5px; color: #3b3b42; }
-  .composer-wrap { flex: none; padding: 8px 26px 18px; }
-  .composer { border: 1px solid var(--border-strong); border-radius: var(--radius); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.03); padding: 12px 14px 10px; }
-  .composer .ph { font-size: 13.5px; color: var(--text-3); }
-  .composer .bar { display: flex; align-items: center; gap: 6px; margin-top: 18px; }
-  .chip { height: 26px; border-radius: 8px; border: 1px solid var(--border); background: #fff; display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 12px; color: var(--text-2); }
-  .send { margin-left: auto; width: 30px; height: 30px; border-radius: 9px; background: #17171a; color: #fff; display: grid; place-items: center; }
-
-  /* ---------------- right bar ---------------- */
-  .rightbar { width: 540px; flex: 0 0 540px; border-left: 1px solid var(--border); display: flex; flex-direction: column; background: #fff; }
-  .tabstrip { height: 44px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 8px; border-bottom: 1px solid var(--border); }
-  .tab { height: 28px; border-radius: 8px; display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 12.5px; color: var(--text-2); }
-  .tab .x { color: var(--text-3); margin-left: 2px; }
-  .tab.active { background: var(--bg-soft); color: var(--text); font-weight: 500; }
-  .strip-spacer { flex: 1 1 auto; }
-  .strip-right { display: flex; align-items: center; gap: 2px; }
-
-  /* panel toolbar — 参考 Codex Mobile Dev：设备下拉 + 一排图标，没有别的 */
-  .panelbar { height: 42px; flex: none; display: flex; align-items: center; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--border); }
-  .device-select { height: 28px; border-radius: 8px; display: flex; align-items: center; gap: 7px; padding: 0 8px; font-size: 12.5px; color: var(--text); background: var(--bg-soft); max-width: 240px; }
-  .device-select .nm { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .device-select .chev { color: var(--text-3); }
-  .panelbar .grow { flex: 1 1 auto; }
-  .panelbar .iconbtn { width: 28px; height: 28px; color: var(--text-2); }
-  .panelbar .iconbtn:hover { background: var(--bg-soft); }
-
-  .pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
-
-  /* device list — 只有型号 / serial / 状态，没有分辨率网速 */
-  .devlist { padding: 8px 10px 14px; overflow: hidden; }
-  .group { padding: 14px 10px 6px; font-size: 11px; letter-spacing: .4px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
-  .group::after { content: ""; flex: 1; height: 1px; background: var(--border); }
-  .dev { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; }
-  .dev:hover { background: var(--bg-soft); }
-  .dev.sel { background: var(--accent-soft); }
-  .dev .ph-icon { width: 32px; height: 32px; border-radius: 9px; background: #f1f1f3; display: grid; place-items: center; color: #4b4b52; flex: none; position: relative; }
-  .dev .ph-icon .on { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--green); border: 2px solid #fff; }
-  .dev .meta { min-width: 0; flex: 1; }
-  .dev .model { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 7px; }
-  .dev .model .tag { font-size: 10px; font-weight: 500; color: var(--text-2); background: #fff; border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; }
-  .dev .serial { font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .dev .open { font-size: 12px; color: var(--text-3); }
-  .dev:hover .open { color: var(--accent); }
-  .list-foot { margin-top: auto; padding: 12px 18px 16px; display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--text-3); }
-  .dot-live { width: 6px; height: 6px; border-radius: 50%; background: var(--green); display: inline-block; }
-
-  /* mirror canvas — 灰底 + 设备机身，画面之外什么都不放 */
-  .stage { flex: 1 1 auto; min-height: 0; background: #f2f2f4; display: flex; align-items: center; justify-content: center; position: relative; padding: 18px; }
-  .bezels { position: relative; }
-  .phone { position: relative; width: 252px; height: 548px; border-radius: 42px; background: #0b0b0d; padding: 9px; box-shadow: inset 0 0 0 1.5px #2c2c31, inset 0 0 0 4px #050506, 0 24px 48px rgba(0,0,0,.24); }
-  .phone::after { content: ""; position: absolute; right: -3px; top: 132px; width: 3px; height: 54px; border-radius: 2px; background: #232327; }
-  .phone::before { content: ""; position: absolute; left: -3px; top: 118px; width: 3px; height: 84px; border-radius: 2px; background: #232327; }
-  .screen { position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: linear-gradient(165deg, #dbe8ff 0%, #e9dcff 42%, #ffe4d2 100%); }
-  .status { position: absolute; top: 0; left: 0; right: 0; height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; font-size: 10px; font-weight: 600; color: #1d1d22; z-index: 3; }
-  .punch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: #0b0b0d; z-index: 4; }
-  .apps { position: absolute; top: 70px; left: 20px; right: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 10px; }
-  .app { display: flex; flex-direction: column; align-items: center; gap: 6px; }
-  .app .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 700; }
-  .app .nm { font-size: 8px; color: #26262b; }
-  .dock { position: absolute; left: 16px; right: 16px; bottom: 16px; height: 62px; border-radius: 24px; background: rgba(255,255,255,.55); display: flex; align-items: center; justify-content: space-around; }
-  .dock .ic { width: 40px; height: 40px; border-radius: 12px; }
-
-  .hidden { display: none !important; }
-</style>
-</head>
-<body>
-<div class="frame">
-  <!-- LEFT -->
-  <aside class="sidebar">
-    <div class="brand"><div class="logo">D</div><div class="name">DeepSeek Harness</div></div>
-    <div class="newchat">
-      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
-      新会话 <kbd>⌘N</kbd>
-    </div>
-    <div class="search">
-      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
-      搜索会话
-    </div>
-    <div class="sec">今天</div>
-    <div class="sess active"><span class="dot"></span><span class="t">手机插件：右侧 adb 预览</span></div>
-    <div class="sess"><span class="dot"></span><span class="t">dsh 有手机插件嘛？adb 的？</span></div>
-    <div class="sess"><span class="dot"></span><span class="t">云手机 pony 的 adb 转发</span></div>
-    <div class="sec" style="margin-top:8px">昨天</div>
-    <div class="sess"><span class="dot"></span><span class="t">DeBox 日志导出脚本</span></div>
-    <div class="sess"><span class="dot"></span><span class="t">RRWL release 流程梳理</span></div>
-    <div class="side-foot">
-      <div class="foot-row">
-        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="4" width="18" height="6" rx="2"/><rect x="3" y="14" width="18" height="6" rx="2"/></svg>
-        模型用量 <span class="badge">¥117.03</span><span class="pill"></span>
-      </div>
-      <div class="foot-row">
-        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .34 1.87l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.7 1.7 0 0 0-1.87-.34 1.7 1.7 0 0 0-1 1.55V21a2 2 0 1 1-4 0v-.09a1.7 1.7 0 0 0-1.11-1.55 1.7 1.7 0 0 0-1.87.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.7 1.7 0 0 0 .34-1.87 1.7 1.7 0 0 0-1.55-1H3a2 2 0 1 1 0-4h.09A1.7 1.7 0 0 0 4.64 9a1.7 1.7 0 0 0-.34-1.87l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 9 4.64h.09A1.7 1.7 0 0 0 10.64 3V3a2 2 0 1 1 4 0v.09a1.7 1.7 0 0 0 1 1.55 1.7 1.7 0 0 0 1.87-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.36 9v.09a1.7 1.7 0 0 0 1.55 1H21a2 2 0 1 1 0 4h-.09a1.7 1.7 0 0 0-1.51 1Z"/></svg>
-        设置
-      </div>
-    </div>
-  </aside>
-
-  <!-- CENTER -->
-  <main class="main">
-    <header class="conv-head">
-      <div class="conv-title">手机插件：右侧 adb 预览</div>
-      <div class="conv-sub">· 3 个会话</div>
-      <div class="head-right">
-        <button class="iconbtn active" title="手机">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><rect x="6.5" y="2.5" width="11" height="19" rx="2.6"/><path d="M10.5 18.6h3"/></svg>
-          <span class="badge">5</span>
-        </button>
-        <button class="iconbtn" title="更多">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/></svg>
-        </button>
-        <div class="hair"></div>
-        <button class="iconbtn" title="收起右侧栏">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2.5"/><path d="M15 4v16M9 10l-2 2 2 2"/></svg>
-        </button>
-      </div>
-    </header>
-
-    <div class="transcript">
-      <div class="turn user">
-        <div class="bubble">手机插件就叫 dsh-phone，右侧只预览画面，别加分辨率网速，也不要输入框。</div>
-      </div>
-      <div class="turn">
-        <div class="assistant">
-          <p>明白，按 Codex Mobile Dev 那个右侧面板的样子收敛：顶上只有一行「设备下拉 + 几个图标按钮」，下面整块留给设备画面。</p>
-          <p class="muted">本机现在有 5 台在线：Pixel 7a（USB）、100.107.25.26、100.90.248.53、云手机 pony / test。</p>
-        </div>
-      </div>
-    </div>
-
-    <div class="composer-wrap">
-      <div class="composer">
-        <div class="ph">继续输入…</div>
-        <div class="bar">
-          <div class="chip">
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v18M3 12h18"/></svg>
-            附件
-          </div>
-          <div class="chip">DeepSeek V4.1</div>
-          <div class="send">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M6 11l6-6 6 6"/></svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </main>
-
-  <!-- RIGHT -->
-  <section class="rightbar">
-    <div class="tabstrip">
-      <div class="tab active">
-        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><rect x="6.5" y="2.5" width="11" height="19" rx="2.6"/><path d="M10.5 18.6h3"/></svg>
-        手机
-        <span class="x">
-          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="m6 6 12 12M18 6 6 18"/></svg>
-        </span>
-      </div>
-      <button class="iconbtn" style="width:26px;height:26px" title="新建 tab">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
-      </button>
-      <button class="iconbtn" style="width:26px;height:26px" title="分屏">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><rect x="3" y="4" width="18" height="16" rx="2.5"/><path d="M12 4v16"/></svg>
-      </button>
-      <div class="strip-spacer"></div>
-      <div class="strip-right">
-        <button class="iconbtn" style="width:26px;height:26px" title="全屏">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
-        </button>
-        <button class="iconbtn" style="width:26px;height:26px" title="收起">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
-        </button>
-      </div>
-    </div>
-
-    <div class="pane">
-      <!-- toolbar: 设备下拉 + 图标，参考 Codex 一行搞定 -->
-      <div class="panelbar" id="bar-list">
-        <div class="device-select">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><rect x="6.5" y="2.5" width="11" height="19" rx="2.6"/><path d="M10.5 18.6h3"/></svg>
-          <span class="nm">选择设备</span>
-          <svg class="chev" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
-        </div>
-        <div class="grow"></div>
-        <button class="iconbtn" title="刷新设备">
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
-        </button>
-        <button class="iconbtn" title="连接设备">
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
-        </button>
-      </div>
-
-      <div class="panelbar hidden" id="bar-device">
-        <div class="device-select">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><rect x="6.5" y="2.5" width="11" height="19" rx="2.6"/><path d="M10.5 18.6h3"/></svg>
-          <span class="nm">Pixel 7a</span>
-          <svg class="chev" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
-        </div>
-        <div class="grow"></div>
-        <button class="iconbtn" title="返回">
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
-        </button>
-        <button class="iconbtn" title="主页">
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><circle cx="12" cy="12" r="7.5"/></svg>
-        </button>
-        <button class="iconbtn" title="多任务">
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><rect x="5.5" y="5.5" width="13" height="13" rx="2"/></svg>
-        </button>
-        <button class="iconbtn" title="截图">
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="6" width="18" height="14" rx="2.5"/><circle cx="12" cy="13" r="3.4"/><path d="M8 6l1.4-2h5.2L16 6"/></svg>
-        </button>
-        <button class="iconbtn" title="更多">
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/></svg>
-        </button>
-      </div>
-
-      <!-- LIST -->
-      <div id="view-list" style="display:flex;flex-direction:column;height:100%;min-height:0">
-        <div class="devlist">
-          <div class="group">已连接</div>
-          <div class="dev sel">
-            <div class="ph-icon">
-              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><rect x="6.5" y="2.5" width="11" height="19" rx="2.6"/><path d="M10.5 18.6h3"/></svg>
-              <span class="on"></span>
-            </div>
-            <div class="meta">
-              <div class="model">Pixel 7a <span class="tag">USB</span></div>
-              <div class="serial">34201JEHN07681</div>
-            </div>
-            <div class="open">›</div>
-          </div>
-          <div class="dev">
-            <div class="ph-icon">
-              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><rect x="6.5" y="2.5" width="11" height="19" rx="2.6"/><path d="M10.5 18.6h3"/></svg>
-              <span class="on"></span>
-            </div>
-            <div class="meta">
-              <div class="model">Pixel 7a <span class="tag">Wi-Fi</span></div>
-              <div class="serial">100.107.25.26:5555</div>
-            </div>
-            <div class="open">›</div>
-          </div>
-          <div class="dev">
-            <div class="ph-icon">
-              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><rect x="6.5" y="2.5" width="11" height="19" rx="2.6"/><path d="M10.5 18.6h3"/></svg>
-              <span class="on"></span>
-            </div>
-            <div class="meta">
-              <div class="model">小米 13 <span class="tag">thor</span></div>
-              <div class="serial">100.90.248.53:5555</div>
-            </div>
-            <div class="open">›</div>
-          </div>
-          <div class="group">云手机</div>
-          <div class="dev">
-            <div class="ph-icon">
-              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M7 18a4 4 0 0 1 .6-7.95A5.5 5.5 0 0 1 18.2 11 3.5 3.5 0 0 1 17.5 18Z"/></svg>
-              <span class="on"></span>
-            </div>
-            <div class="meta">
-              <div class="model">云手机 pony</div>
-              <div class="serial">unicom-openclaw-pony:5555</div>
-            </div>
-            <div class="open">›</div>
-          </div>
-          <div class="dev">
-            <div class="ph-icon">
-              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M7 18a4 4 0 0 1 .6-7.95A5.5 5.5 0 0 1 18.2 11 3.5 3.5 0 0 1 17.5 18Z"/></svg>
-              <span class="on"></span>
-            </div>
-            <div class="meta">
-              <div class="model">云手机 test</div>
-              <div class="serial">unicom-openclaw-test:5555</div>
-            </div>
-            <div class="open">›</div>
-          </div>
-        </div>
-        <div class="list-foot"><span class="dot-live"></span>5 台在线</div>
-      </div>
-
-      <!-- DEVICE -->
-      <div id="view-device" class="hidden" style="display:flex;flex-direction:column;height:100%;min-height:0">
-        <div class="stage">
-          <div class="bezels">
-            <div class="phone">
-              <div class="screen">
-                <div class="status"><span>9:41</span><span>5G ▮▮▮ 86%</span></div>
-                <div class="punch"></div>
-                <div class="apps">
-                  <div class="app"><div class="ic" style="background:#34a853">拨</div><div class="nm">电话</div></div>
-                  <div class="app"><div class="ic" style="background:#4285f4">消</div><div class="nm">信息</div></div>
-                  <div class="app"><div class="ic" style="background:#ea4335">邮</div><div class="nm">Gmail</div></div>
-                  <div class="app"><div class="ic" style="background:#1a73e8">地</div><div class="nm">地图</div></div>
-                  <div class="app"><div class="ic" style="background:#0f9d58">相</div><div class="nm">相册</div></div>
-                  <div class="app"><div class="ic" style="background:#fbbc04">设</div><div class="nm">设置</div></div>
-                  <div class="app"><div class="ic" style="background:#673ab7">De</div><div class="nm">DeBox</div></div>
-                  <div class="app"><div class="ic" style="background:#00bcd4">dsh</div><div class="nm">dsh</div></div>
-                </div>
-                <div class="dock">
-                  <div class="ic" style="background:#34a853"></div>
-                  <div class="ic" style="background:#4285f4"></div>
-                  <div class="ic" style="background:#ea4335"></div>
-                  <div class="ic" style="background:#fbbc04"></div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</div>
-
-<script>
-  if (location.hash === '#device') {
-    document.getElementById('view-list').classList.add('hidden');
-    document.getElementById('view-device').classList.remove('hidden');
-    document.getElementById('bar-list').classList.add('hidden');
-    document.getElementById('bar-device').classList.remove('hidden');
-  }
-</script>
-</body>
-</html>