@ponydev/dsh-phone 0.3.2 → 0.4.1

package/AGENTS.md

@@ -6,13 +6,15 @@
 
 DSH Web 插件：**右侧栏预览并点按控制已连接的 Android 设备**（adb），H.264 实时流 + 无 WebCodecs 时回退截图轮询。
 
-**能力边界**：只认 adb（Android）。hdc（鸿蒙）与 iOS 走 `lib/transport.js` 的 `PhoneTransport` 接口后续接入；UI 容器固定用 DSH 原生 `sidebar-right`，不自造悬浮层。
+**能力边界**：Android 走 adb；iOS 只做**模拟器**（simctl 生命周期 + idb 实时/输入，物理 iPhone 不支持）；HarmonyOS 模拟器走 DevEco `Emulator` CLI、真机走 hdc。UI 容器固定用 DSH 原生 `sidebar-right`，不自造悬浮层。
 
 ## 1. 目录与职责
 
 ```
 lib/index.js      Host 入口（/phone/* RPC、connection.admit 围栏、targets、stream 路由、错误映射）
 lib/adb.js        adb 定位 / devices 解析 / getprop 平台 / wm size / 截图 / 输入 / 串行化
+lib/ios.js        iOS 模拟器：simctl 列表/创建/boot/删除/截图 + idb H.264 流/输入
+lib/hos.js        HarmonyOS：Emulator CLI（生命周期/创建/截图/点击）+ hdc（真机/截图/uitest）
 lib/stream.js     screenrecord H.264 子进程（续接、背压、断开 kill）、清晰度预设、按比例算 size
 lib/targets.js    常用连接目标（$DSH_HOME/phone/targets.json，0600，只存地址/时间）
 lib/transport.js  PhoneTransport 接口 + AdbTransport（hdc / iOS 的挂载点）
@@ -22,6 +24,7 @@ scripts/smoke.mjs            离线冒烟（解析/白名单/targets/尺寸计
 scripts/check-i18n.mjs       zh/en 字典键一致 + 代码用键存在
 scripts/release-notes.mjs    从 CHANGELOG 抽取当前版本条目
 scripts/render-test.mjs      离线渲染 harness（列表/预览/浮窗/诊断/流五种状态）
+scripts/hos-smoke.mjs        鸿蒙 transport 只读冒烟（Emulator CLI + hdc）
 docs/DESIGN.md                架构与布局；docs/mockups 原型；docs/screenshots 截图
 ```
 

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 0.4.1 — 2026-10-26
+
+### 修复
+- 鸿蒙模拟器名称规则与 CLI 对齐：只允许字母、数字、空格、下划线 `_`、加号 `+`（之前允许连字符/中文，`-create` 会直接失败）；创建表单占位符改为 `dsh_phone_hos`
+- 鸿蒙模拟器 `start` 改为 detached 启动 + 截图 warm-up：`Emulator -start` 是常驻进程，之前前台等待导致 90s 超时；现在启动后等显示服务就绪再返回
+
+### 验证（0.4.1 发布前实测）
+- iOS 模拟器：create → boot → 截图 → H.264 流（idb，100 帧/3s）→ tap / Home 通过；像素→point（density=3）用真实弹窗按钮验证
+- HarmonyOS 模拟器：create → start（45s 含 warm-up）→ 截图 → tap / swipe → stop → delete 全链路通过
+- HarmonyOS 真机（Mate 60 Pro）：截图 / keyEvent / tap / text 通过
+
+## 0.4.0 — 2026-10-26
+
+### 新增
+- **iOS 模拟器**：`xcrun simctl` 列表 / 创建 / boot / 关机 / 删除 / 截图；面板可自动进入并轮询预览
+- **HarmonyOS 模拟器**：DevEco `Emulator` CLI 列表 / 创建 / 启动 / 停止 / 删除 / 截图 / 点击 / 滑动 / 旋转 / 电源
+- **HarmonyOS 真机**：`hdc` 设备列表 / 截图 / 点击 / 滑动 / 按键 / 文字输入
+- 「添加设备」菜单：Android 连接 / 创建 iOS 模拟器 / 创建鸿蒙模拟器
+- 设备操作菜单：iOS 模拟器关机 / 删除，鸿蒙模拟器停止 / 删除
+- 平台图标与标签：iOS 模拟器、HarmonyOS 模拟器 / 真机
+
+### 变更
+- Host `/phone/*` 按设备 transport 分发（adb / simctl / emulator / hdc）；`health` 返回 iOS 与 HarmonyOS 能力
+- 鸿蒙暂不支持实时流，自动回退截图轮询（iOS 实时流与输入需要 idb，未装时只读预览）
+- 新增 `lib/ios.js`、`lib/hos.js` 与 `scripts/hos-smoke.mjs`
+
 ## 0.3.2 — 2026-10-26
 
 ### 变更

package/README.md

@@ -110,22 +110,45 @@ DSH 右侧栏第一次打开是**视口宽度的 45%**（1440 屏 ≈ 648px）
 - 顶部：设备下拉、旋转、更多（电源、重连、诊断、浮窗、复制 serial、设备列表）。
 - 「断开连接」放在设备下拉菜单里，需要点两次确认（防止误触）。
 
+## 平台支持
+
+| 平台 | 后端 | 画面 | 操作 | 创建 |
+|---|---|---|---|---|
+| Android 真机 / 云手机 | adb（USB / TCP / Tailscale） | H.264 20–30fps | tap / swipe / 按键 | — |
+| iOS 模拟器 | `xcrun simctl` + idb（可选） | 截图轮询 1–2fps；装 idb 后 H.264 | 装 idb 后 tap / swipe / 按键 | ✅ 选择机型 + 运行时 |
+| HarmonyOS 模拟器 | DevEco `Emulator` CLI | 截图轮询 1–2fps | tap / swipe / 旋转 / 电源 / 按键 / 文字 | ✅ 选择系统镜像 |
+| HarmonyOS 真机 | hdc | 截图轮询 1–2fps | tap / swipe / 按键 / 文字 | — |
+
+- iOS 依赖 macOS + Xcode；实时画面/输入需要 `idb`（`brew install facebook/fb/idb-companion` + `pip install fb-idb`），未装时只读预览。
+  - 如果 Homebrew 报 "Xcode alone is not sufficient on Tahoe"（需要 Command Line Tools），可改用官方 release 手工安装：
+    `gh release download v1.7.7 --repo facebook/idb --pattern 'idb-companion.macos-arm64.tar.gz'`，解压到 `~/.local/lib/idb-companion`，
+    再把 `idb_companion` / `idb-repl` 软链到 `~/.local/bin`；客户端 `python3 -m venv ~/.local/venvs/fb-idb && ~/.local/venvs/fb-idb/bin/pip install fb-idb`。
+- HarmonyOS 依赖 DevEco Studio（`Emulator` CLI）与 `hdc`；hdc 没有 screenrecord，只能截图轮询。
+- 物理 iPhone / iPad 不支持（Apple 未公开投屏/注入 API，Claude Code Desktop 也只支持模拟器）。
+
+## 验证状态
+
+- **iOS 模拟器**（iPhone Air / iOS 26.5）：create / boot / 截图 / idb H.264 流 / tap / Home 实测通过；像素→point 坐标换算用真实弹窗验证。
+- **HarmonyOS 模拟器**（HarmonyOS 7.0.0）：create / start / 截图 / tap / swipe / rotate / stop / delete 全链路实测通过。
+- **HarmonyOS 真机**（Mate 60 Pro，hdc）：截图 / keyEvent / tap / text 实测通过。
+- **Android**：真机与云手机的 tap / swipe / back / home / 截图 / H.264 流实测通过。
+
 ## 已知限制
 
-- 画面默认走 H.264 流（约 20–30fps）；没有 WebCodecs 的浏览器会回退到 1–2fps 轮询截图。
-- 流是 `screenrecord`，没有声音；单次 180s 上限由 Host 自动续接（断开 <1s）。
+- Android 画面默认走 H.264 流（约 20–30fps）；没有 WebCodecs 的浏览器会回退到 1–2fps 轮询截图。
+- Android 流是 `screenrecord`，没有声音；单次 180s 上限由 Host 自动续接（断开 <1s）。
 - 单个右侧栏 tab，设备在 tab 内切换；不支持同一 pane 多设备并排（后续可开 `multiple`）。
-- 没有文字输入（`adb shell input text` 只支持 ASCII，中文要 ADBKeyboard）。
+- Android 文字输入（`adb shell input text` 只支持 ASCII，中文要 ADBKeyboard）；鸿蒙用 `uitest uiInput text`。
 - 「已保存」目标是地址级记录，没有备注名；显示名直接是 `ip:port` / 主机名。
-- 只支持 Android/adb；hdc（鸿蒙）和 iOS 走 `PhoneTransport` 接口后加。
 - 右侧栏是 per-session 的，没有会话的页面不显示手机图标。
-- 需要设备上已授权 USB 调试；`unauthorized` 会提示去手机上点允许。
+- Android 需要设备上已授权 USB 调试；`unauthorized` 会提示去手机上点允许。
 
 ## 开发
 
 ```sh
 npm run check        # 语法 + i18n + 隐私/截图门禁
 npm run smoke        # 解析/白名单/真机 adb 冒烟
+npm run smoke:hos    # 鸿蒙 Emulator CLI / hdc 只读冒烟（需要 DevEco）
 node scripts/render-test.mjs [screenshot.png]
                      # 离线渲染列表 + 预览，输出 /tmp/dsh-phone-render.html/.png
 ```
@@ -136,9 +159,11 @@ node scripts/render-test.mjs [screenshot.png]
 ## 结构
 
 ```
-lib/index.js      Host：/phone 路由、认证围栏、错误映射
-lib/adb.js        adb 定位 / devices 解析 / 截图 / 输入 / 串行化
-lib/transport.js  PhoneTransport 接口 + AdbTransport（hdc / iOS 后加）
+lib/index.js      Host：/phone 路由、认证围栏、按 transport 分发
+lib/adb.js        Android：adb 定位 / devices 解析 / 截图 / 输入 / 串行化
+lib/ios.js        iOS 模拟器：simctl 生命周期/创建/截图 + idb 实时流/输入
+lib/hos.js        HarmonyOS：DevEco Emulator CLI + hdc（真机）
+lib/transport.js  PhoneTransport 接口 + AdbTransport
 lib/client.js     ModuleLoader bundle：tab 类型、列表、预览、i18n、样式
 cordis.patch.yml  bundle 补丁
 scripts/          smoke + 离线渲染

package/cordis.patch.yml

@@ -3,6 +3,10 @@
       name: "@ponydev/dsh-phone"
       config:
         adbPath: adb
+        xcrun: xcrun
+        idb: idb
+        hdcPath: hdc
+        emulatorPath: ''
         pollMs: 700
         streamTimeLimit: 180
         streamBitRate: 6000000

package/docs/DESIGN.md

@@ -244,3 +244,23 @@ Host 侧定义 `PhoneTransport { id, list, connect, shot, input }`：
 2. 设备多时：默认「一个 tab 内切换」（本文）还是「每台设备一个 tab」？
 
 （图标位置 = 会话头部工具区、名字 = `dsh-phone`、无元数据列、无输入框，已按你的意思定下。）
+
+
+## 多平台 transport（0.4.0）
+
+```
+/phone/*  ── resolveDevice(serial) ──┬── adb       Android 真机 / 云手机（H.264 screenrecord）
+                                     ├── simctl    iOS 模拟器（截图；idb 提供 H.264 + HID）
+                                     ├── emulator  HarmonyOS 模拟器（DevEco Emulator CLI）
+                                     └── hdc       HarmonyOS 真机（snapshot_display + uitest）
+```
+
+- **iOS**：只支持模拟器。生命周期/创建走公开 `xcrun simctl`；实时画面与点击/输入走 `idb`
+  （Meta FBSimulatorControl，Claude Code Desktop 内部也是 CoreSimulator/SimulatorKit 私有栈）。
+  idb 的 `video-stream --format h264` 输出 Annex-B，直接复用客户端的 WebCodecs 管线；
+  `idb describe` 的 `screen_dimensions.density` 用于像素 → point 坐标换算。
+- **HarmonyOS 模拟器**：`Emulator -list/-create/-start/-stop/-delete/-screenshot/-click/-slide/-rotation/-power`；
+  按键与文字借道 hdc `uitest uiInput`（模拟器没有对应 CLI）。
+- **HarmonyOS 真机**：`hdc list targets` + `snapshot_display` + `uitest uiInput`；没有 screenrecord，只能截图轮询。
+- **物理 iPhone / iPad 不支持**：Apple 没有公开投屏/HID 注入 API（Claude 同样只做模拟器；
+  Codex 用 Xcode 27 CoreDevice 私有 HEVC + UniversalHID，不在本项目范围）。

package/lib/client.js

@@ -52,6 +52,24 @@ window.__ModuleLoader__.load({
       diagnostics: 'adb 诊断',
       quality: '显示清晰度',
       immersiveOn: '沉浸模式',
+      addDevice: '添加设备',
+      connectAndroid: '连接 Android 设备',
+      createIos: '创建 iOS 模拟器',
+      createHos: '创建鸿蒙模拟器',
+      hosImage: '系统镜像',
+      hosStarting: '正在启动鸿蒙模拟器…',
+      stopHos: '关闭鸿蒙模拟器',
+      deleteHos: '删除鸿蒙模拟器',
+      iosName: '名称',
+      iosDeviceType: '机型',
+      iosRuntime: '系统版本',
+      create: '创建',
+      booting: '正在启动模拟器…',
+      simulator: '模拟器',
+      shutdownSimulator: '关闭模拟器',
+      deleteSimulator: '删除模拟器',
+      confirmDeleteSimulator: '确认删除？',
+      idbHint: 'iOS 输入/实时画面需要 idb',
       immersiveOff: '显示操作栏',
       qualityLow: '流畅',
       qualityMedium: '标准',
@@ -102,6 +120,24 @@ window.__ModuleLoader__.load({
       diagnostics: 'adb diagnostics',
       quality: 'Stream quality',
       immersiveOn: 'Immersive mode',
+      addDevice: 'Add device',
+      connectAndroid: 'Connect Android device',
+      createIos: 'Create iOS simulator',
+      createHos: 'Create HarmonyOS emulator',
+      hosImage: 'System image',
+      hosStarting: 'Starting HarmonyOS emulator…',
+      stopHos: 'Shut down HarmonyOS emulator',
+      deleteHos: 'Delete HarmonyOS emulator',
+      iosName: 'Name',
+      iosDeviceType: 'Device type',
+      iosRuntime: 'Runtime',
+      create: 'Create',
+      booting: 'Booting simulator…',
+      simulator: 'Simulator',
+      shutdownSimulator: 'Shut down simulator',
+      deleteSimulator: 'Delete simulator',
+      confirmDeleteSimulator: 'Confirm delete?',
+      idbHint: 'iOS input/streaming requires idb',
       immersiveOff: 'Show controls',
       qualityLow: 'Low',
       qualityMedium: 'Medium',
@@ -187,6 +223,8 @@ window.__ModuleLoader__.load({
 .dph-field{display:flex;gap:8px}
 .dph-input{flex:1;height:32px;border:1px solid var(--dsw-alias-border-l2,#dededf);border-radius:8px;padding:0 10px;font:11.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--dsw-alias-label-primary,#17171a);background:var(--dsw-alias-bg-layer-1,#fff);outline:none}
 .dph-input:focus{border-color:var(--dsw-alias-brand-primary,#3b6cff)}
+.dph-select-input{appearance:none;-webkit-appearance:none;padding-right:24px}
+.dph-label{display:block;font-size:11px;color:var(--dsw-alias-label-tertiary,#9a9aa1);margin:10px 0 4px}
 .dph-primary{height:32px;padding:0 14px;border:0;border-radius:8px;background:var(--dsw-alias-label-primary,#17171a);color:var(--dsw-alias-bg-layer-1,#fff);font-size:12px;cursor:pointer}
 .dph-primary:disabled{opacity:.5;cursor:default}
 .dph-err{color:var(--dsw-alias-state-error-primary,#dc2626);font-size:11.5px;margin-top:8px;word-break:break-word}
@@ -395,6 +433,17 @@ window.__ModuleLoader__.load({
         screenInfo: (serial, options) => unwrap('screen-info', { serial, fresh: Boolean(options && options.fresh) }),
         ping: (serial) => unwrap('ping', { serial }),
         targets: () => unwrap('targets'),
+        iosTypes: () => unwrap('ios/types'),
+        iosRuntimes: () => unwrap('ios/runtimes'),
+        iosCreate: (payload) => unwrap('ios/create', payload),
+        iosBoot: (serial) => unwrap('ios/boot', { serial }),
+        iosShutdown: (serial) => unwrap('ios/shutdown', { serial }),
+        iosDelete: (serial) => unwrap('ios/delete', { serial }),
+        hosImages: (deviceType) => unwrap('hos/images', { deviceType }),
+        hosCreate: (payload) => unwrap('hos/create', payload),
+        hosStart: (serial) => unwrap('hos/start', { serial }),
+        hosStop: (serial) => unwrap('hos/stop', { serial }),
+        hosDelete: (serial) => unwrap('hos/delete', { serial }),
         removeTarget: (address) => unwrap('targets/remove', { address }),
         shot: async (serial) => {
           const res = await unwrap('shot', { serial })
@@ -462,6 +511,7 @@ window.__ModuleLoader__.load({
       if (kind === 'tailscale') return 'Tailscale'
       if (kind === 'wifi') return 'Wi-Fi'
       if (kind === 'emulator') return 'emulator'
+      if (kind === 'simulator') return 'Simulator'
       return 'USB'
     }
 
@@ -1104,8 +1154,56 @@ window.__ModuleLoader__.load({
         }
       })
       const [disconnectArmed, setDisconnectArmed] = useState(false)
+      const [addMenuOpen, setAddMenuOpen] = useState(false)
+      const [iosCreateOpen, setIosCreateOpen] = useState(false)
+      const [iosTypes, setIosTypes] = useState([])
+      const [iosRuntimes, setIosRuntimes] = useState([])
+      const [iosForm, setIosForm] = useState({ name: '', deviceType: '', runtime: '' })
+      const [iosBusy, setIosBusy] = useState(false)
+      const [simDeleteArmed, setSimDeleteArmed] = useState(false)
+      const [hosCreateOpen, setHosCreateOpen] = useState(false)
+      const [hosImages, setHosImages] = useState([])
+      const [hosForm, setHosForm] = useState({ name: '', osVersion: '' })
+      const [hosBusy, setHosBusy] = useState(false)
       const autoSelected = useRef(false)
       const { devices, error, reload } = useDeviceList(visible, nonce)
+      useEffect(() => {
+        if (!hosCreateOpen) return undefined
+        let alive = true
+        api
+          .hosImages('phone')
+          .catch(() => ({ images: [] }))
+          .then((value) => {
+            if (!alive) return
+            const images = (Array.isArray(value.images) ? value.images : []).filter((item) => item.downloaded)
+            setHosImages(images)
+            setHosForm((prev) => ({ name: prev.name, osVersion: prev.osVersion || (images[0] && images[0].osVersion) || '' }))
+          })
+        return () => {
+          alive = false
+        }
+      }, [hosCreateOpen])
+
+      useEffect(() => {
+        if (!iosCreateOpen) return undefined
+        let alive = true
+        Promise.all([api.iosTypes().catch(() => ({ types: [] })), api.iosRuntimes().catch(() => ({ runtimes: [] }))]).then(([t, r]) => {
+          if (!alive) return
+          const types = Array.isArray(t.types) ? t.types : []
+          const runtimes = Array.isArray(r.runtimes) ? r.runtimes : []
+          setIosTypes(types)
+          setIosRuntimes(runtimes)
+          setIosForm((prev) => ({
+            name: prev.name,
+            deviceType: prev.deviceType || (types[0] && types[0].identifier) || '',
+            runtime: prev.runtime || (runtimes[0] && runtimes[0].identifier) || '',
+          }))
+        })
+        return () => {
+          alive = false
+        }
+      }, [iosCreateOpen])
+
       const quality = selected && QUALITY_ORDER.includes(qualityMap[selected]) ? qualityMap[selected] : 'medium'
       const setQualityForSelected = (next) => {
         if (!selected) return
@@ -1161,6 +1259,8 @@ window.__ModuleLoader__.load({
       const device = rows ? rows.find((item) => item.serial === selected) || null : null
       const tabId = tab && tab.id ? tab.id : null
       const adbMissing = health && health.adb === null
+      const iosReady = Boolean(health && health.ios && health.ios.available)
+      const hosReady = Boolean(health && health.harmony && health.harmony.emulator && health.harmony.emulator.available)
 
       const connectTo = async (address) => {
         setConnecting(true)
@@ -1218,6 +1318,30 @@ window.__ModuleLoader__.load({
           })
           return
         }
+        if (picked && picked.transport === 'emulator' && picked.state !== 'device') {
+          preview.setToast(t('hosStarting'))
+          api
+            .hosStart(picked.serial)
+            .then(() => {
+              rememberDevice(picked.serial)
+              setNonce((value) => value + 1)
+              setSelected(picked.serial)
+            })
+            .catch((err) => preview.setToast(err && err.message ? err.message : 'start failed'))
+          return
+        }
+        if (picked && picked.kind === 'simulator' && picked.state !== 'device') {
+          preview.setToast(t('booting'))
+          api
+            .iosBoot(picked.serial)
+            .then(() => {
+              rememberDevice(picked.serial)
+              setNonce((value) => value + 1)
+              setSelected(picked.serial)
+            })
+            .catch((err) => preview.setToast(err && err.message ? err.message : 'boot failed'))
+          return
+        }
         rememberDevice(picked.serial)
         setSelected(picked.serial)
       }
@@ -1303,6 +1427,44 @@ window.__ModuleLoader__.load({
           },
         },
         { id: 'copy', icon: 'copy', label: t('copySerial'), run: copySerial },
+        ...(device && device.kind === 'simulator'
+          ? [
+              {
+                id: 'shutdown-sim',
+                icon: 'power',
+                label: t('shutdownSimulator'),
+                run: () => {
+                  api
+                    .iosShutdown(device.serial)
+                    .catch(() => {})
+                    .then(() => {
+                      setSelected(null)
+                      setNonce((value) => value + 1)
+                    })
+                },
+              },
+              {
+                id: 'delete-sim',
+                icon: 'unlink',
+                label: simDeleteArmed ? t('confirmDeleteSimulator') : t('deleteSimulator'),
+                run: () => {
+                  if (!simDeleteArmed) {
+                    setSimDeleteArmed(true)
+                    setTimeout(() => setSimDeleteArmed(false), 3000)
+                    return
+                  }
+                  setSimDeleteArmed(false)
+                  api
+                    .iosDelete(device.serial)
+                    .catch((err) => preview.setToast(err && err.message ? err.message : 'delete failed'))
+                    .then(() => {
+                      setSelected(null)
+                      setNonce((value) => value + 1)
+                    })
+                },
+              },
+            ]
+          : []),
         {
           id: 'list',
           icon: 'back',
@@ -1347,7 +1509,7 @@ window.__ModuleLoader__.load({
                     className: 'dph-link',
                     onClick: () => {
                       setMenuOpen(false)
-                      setConnectOpen(true)
+                      setAddMenuOpen(true)
                     },
                   },
                   '+ ' + t('add'),
@@ -1588,7 +1750,7 @@ window.__ModuleLoader__.load({
                   { className: 'dph-empty' },
                   h('div', { className: 'dph-empty-icon' }, h(Icon, { name: 'phone', size: 30 })),
                   h('div', { className: 'dph-empty-title' }, t('empty')),
-                  h('button', { type: 'button', className: 'dph-primary', onClick: () => setConnectOpen(true) }, '+ ' + t('add')),
+                  h('button', { type: 'button', className: 'dph-primary', onClick: () => setAddMenuOpen(true) }, '+ ' + t('addDevice')),
                 )
               : h(DeviceRows, { t, devices: rows, selected, onSelect })
 
@@ -1613,7 +1775,7 @@ window.__ModuleLoader__.load({
             ),
             h(
               'button',
-              { key: 'add', type: 'button', className: 'dph-ibtn', title: t('add'), onClick: () => setConnectOpen(true) },
+              { key: 'add', type: 'button', className: 'dph-ibtn', title: t('addDevice'), onClick: () => setAddMenuOpen(true) },
               h(Icon, { name: 'plus' }),
             ),
           ]
@@ -1646,6 +1808,199 @@ window.__ModuleLoader__.load({
           )
         : null
 
+      const hosCreateSheet = hosCreateOpen
+        ? h(
+            'div',
+            null,
+            h('div', {
+              className: 'dph-backdrop',
+              onClick: () => {
+                if (!hosBusy) setHosCreateOpen(false)
+              },
+            }),
+            h(
+              'form',
+              {
+                className: 'dph-connect',
+                style: { maxWidth: 380 },
+                onSubmit: async (event) => {
+                  event.preventDefault()
+                  if (hosBusy) return
+                  setHosBusy(true)
+                  try {
+                    const created = await api.hosCreate({ name: hosForm.name, osVersion: hosForm.osVersion, deviceType: 'phone' })
+                    setHosCreateOpen(false)
+                    setNonce((value) => value + 1)
+                    if (created && created.serial) {
+                      rememberDevice(created.serial)
+                      setSelected(created.serial)
+                    }
+                  } catch (error) {
+                    preview.setToast(error && error.message ? error.message : 'create failed')
+                  } finally {
+                    setHosBusy(false)
+                  }
+                },
+              },
+              h('div', { className: 'ttl' }, t('createHos')),
+              h('div', { className: 'sub' }, 'DevEco Emulator CLI'),
+              h('label', { className: 'dph-label' }, t('iosName')),
+              h('input', {
+                className: 'dph-input',
+                value: hosForm.name,
+                placeholder: 'dsh_phone_hos',
+                onChange: (event) => setHosForm((prev) => ({ ...prev, name: event.target.value })),
+                spellCheck: false,
+              }),
+              h('label', { className: 'dph-label' }, t('hosImage')),
+              h(
+                'select',
+                {
+                  className: 'dph-input dph-select-input',
+                  value: hosForm.osVersion,
+                  onChange: (event) => setHosForm((prev) => ({ ...prev, osVersion: event.target.value })),
+                },
+                hosImages.map((item) => h('option', { key: item.osVersion, value: item.osVersion }, item.osVersion)),
+              ),
+              h(
+                'div',
+                { className: 'dph-field', style: { marginTop: 12 } },
+                h('button', { type: 'submit', className: 'dph-primary', disabled: hosBusy || !hosForm.name.trim() || !hosForm.osVersion }, hosBusy ? t('loading') : t('create')),
+                h('button', { type: 'button', className: 'dph-ghost', onClick: () => setHosCreateOpen(false) }, t('cancel')),
+              ),
+            ),
+          )
+        : null
+
+      const addMenu = addMenuOpen
+        ? h(
+            'div',
+            null,
+            h('div', { className: 'dph-backdrop', onClick: () => setAddMenuOpen(false) }),
+            h(
+              'div',
+              { className: 'dph-menu', style: { top: 48, left: 8, width: 270 } },
+              h(
+                'button',
+                {
+                  type: 'button',
+                  className: 'dph-row',
+                  onClick: () => {
+                    setAddMenuOpen(false)
+                    setConnectOpen(true)
+                  },
+                },
+                h('span', { className: 'dph-av', style: { width: 26, height: 26, borderRadius: 7 } }, h(Icon, { name: 'android', size: 16 })),
+                h('span', { className: 'dph-meta' }, h('span', { className: 'dph-model', style: { fontWeight: 400 } }, t('connectAndroid'))),
+              ),
+              iosReady
+                ? h(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'dph-row',
+                      onClick: () => {
+                        setAddMenuOpen(false)
+                        setIosCreateOpen(true)
+                      },
+                    },
+                    h('span', { className: 'dph-av', style: { width: 26, height: 26, borderRadius: 7 } }, h(Icon, { name: 'apple', size: 16 })),
+                    h('span', { className: 'dph-meta' }, h('span', { className: 'dph-model', style: { fontWeight: 400 } }, t('createIos'))),
+                  )
+                : null,
+              hosReady
+                ? h(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'dph-row',
+                      onClick: () => {
+                        setAddMenuOpen(false)
+                        setHosCreateOpen(true)
+                      },
+                    },
+                    h('span', { className: 'dph-av', style: { width: 26, height: 26, borderRadius: 7 } }, h(Icon, { name: 'harmony', size: 16 })),
+                    h('span', { className: 'dph-meta' }, h('span', { className: 'dph-model', style: { fontWeight: 400 } }, t('createHos'))),
+                  )
+                : null,
+            ),
+          )
+        : null
+
+      const iosCreateSheet = iosCreateOpen
+        ? h(
+            'div',
+            null,
+            h('div', {
+              className: 'dph-backdrop',
+              onClick: () => {
+                if (!iosBusy) setIosCreateOpen(false)
+              },
+            }),
+            h(
+              'form',
+              {
+                className: 'dph-connect',
+                style: { maxWidth: 380 },
+                onSubmit: async (event) => {
+                  event.preventDefault()
+                  if (iosBusy) return
+                  setIosBusy(true)
+                  try {
+                    const created = await api.iosCreate(iosForm)
+                    setIosCreateOpen(false)
+                    setNonce((value) => value + 1)
+                    if (created && created.serial) {
+                      rememberDevice(created.serial)
+                      setSelected(created.serial)
+                    }
+                  } catch (error) {
+                    preview.setToast(error && error.message ? error.message : 'create failed')
+                  } finally {
+                    setIosBusy(false)
+                  }
+                },
+              },
+              h('div', { className: 'ttl' }, t('createIos')),
+              h('div', { className: 'sub' }, 'xcrun simctl create'),
+              h('label', { className: 'dph-label' }, t('iosName')),
+              h('input', {
+                className: 'dph-input',
+                value: iosForm.name,
+                placeholder: 'dsh-phone',
+                onChange: (event) => setIosForm((prev) => ({ ...prev, name: event.target.value })),
+                spellCheck: false,
+              }),
+              h('label', { className: 'dph-label' }, t('iosDeviceType')),
+              h(
+                'select',
+                {
+                  className: 'dph-input dph-select-input',
+                  value: iosForm.deviceType,
+                  onChange: (event) => setIosForm((prev) => ({ ...prev, deviceType: event.target.value })),
+                },
+                iosTypes.map((item) => h('option', { key: item.identifier, value: item.identifier }, item.name)),
+              ),
+              h('label', { className: 'dph-label' }, t('iosRuntime')),
+              h(
+                'select',
+                {
+                  className: 'dph-input dph-select-input',
+                  value: iosForm.runtime,
+                  onChange: (event) => setIosForm((prev) => ({ ...prev, runtime: event.target.value })),
+                },
+                iosRuntimes.map((item) => h('option', { key: item.identifier, value: item.identifier }, item.name)),
+              ),
+              h(
+                'div',
+                { className: 'dph-field', style: { marginTop: 12 } },
+                h('button', { type: 'submit', className: 'dph-primary', disabled: iosBusy || !iosForm.name.trim() || !iosForm.deviceType || !iosForm.runtime }, iosBusy ? t('loading') : t('create')),
+                h('button', { type: 'button', className: 'dph-ghost', onClick: () => setIosCreateOpen(false) }, t('cancel')),
+              ),
+            ),
+          )
+        : null
+
       return h(
         'div',
         { className: 'dph-root' },
@@ -1694,6 +2049,9 @@ window.__ModuleLoader__.load({
         moreMenu,
         connectSheet,
         diagSheet,
+        addMenu,
+        iosCreateSheet,
+        hosCreateSheet,
       )
     }