@guowenzhang/dsh-pocket 0.0.0-stage → 2.12.2

package/client/mobile/MobileIcon.tsx

@@ -0,0 +1,31 @@
+import { MOBILE_ICON_FALLBACK, isRenderableIcon } from './icon-compat.mjs'
+
+/** Props for the version-tolerant icon slot. */
+export interface MobileIconProps {
+  /** Icon component resolved from the host primitives namespace (null when absent). */
+  icon: unknown
+  /** Which fallback glyph to draw when the running DSH has no such export. */
+  name: 'panelLeft' | 'download' | 'folderOpen'
+  /** Square edge in px, forwarded to the host icon. */
+  size: number
+}
+
+/**
+ * Renders the resolved host icon, or a text glyph when this DSH build no longer
+ * exports that name. It must never hand `undefined` to createElement: that is
+ * exactly what crashed the whole slot entry (React #130) and left the mobile
+ * drawer dead on DSH 0.1.7-rc.2+ (see icon-compat.mjs for the version matrix).
+ */
+export function MobileIcon({ icon, name, size }: MobileIconProps) {
+  if (!isRenderableIcon(icon)) {
+    return (
+      <span data-mobile-nav="icon-fallback" aria-hidden="true" style={{ fontSize: size, lineHeight: 1 }}>
+        {MOBILE_ICON_FALLBACK[name]}
+      </span>
+    )
+  }
+  // The component type differs per DSH version, so it is only known at runtime;
+  // `never` as the return type keeps JSX typing happy without an `any` cast.
+  const Icon = icon as (props: { size?: number }) => never
+  return <Icon size={size} />
+}

package/client/mobile/MobileNavOverlay.tsx

@@ -0,0 +1,299 @@
+import { useEffect, useLayoutEffect, useState } from 'react'
+import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import * as primitives from '@deepseek-ai/dsh-client-ui-primitives'
+import { NS } from './locales.ts'
+import { MobileIcon } from './MobileIcon.tsx'
+import { resolveMobileIcons } from './icon-compat.mjs'
+import {
+  findDrawer,
+  hasNativeDrawer,
+  TOGGLE_SELECTOR,
+  isOverlayTap,
+  navTargetFor,
+} from './nav-targets.mjs'
+
+/** 宿主图标在加载时解析一次：不同 DSH 版本的导出名不同（见 icon-compat.mjs）。 */
+const icons = resolveMobileIcons(primitives)
+
+/** Full props for the shell overlay entry. */
+export interface MobileNavOverlayProps extends PropsRuntime<'shell.overlay'>, PropsLocale<typeof NS> {
+  /** Bound ctx.layout.toggleSidebar(). */
+  toggleSidebar: () => void
+}
+
+/** Same breakpoint as the shell's SIDEBAR_AUTO_COLLAPSE (viewport < 1024). */
+const MOBILE_QUERY = '(max-width: 1023px)'
+
+/** Live matchMedia hook for the narrow breakpoint. */
+function useMobile(): boolean {
+  const [mobile, setMobile] = useState(() => window.matchMedia(MOBILE_QUERY).matches)
+  useEffect(() => {
+    const query = window.matchMedia(MOBILE_QUERY)
+    const onChange = (event: MediaQueryListEvent) => setMobile(event.matches)
+    query.addEventListener('change', onChange)
+    return () => query.removeEventListener('change', onChange)
+  }, [])
+  return mobile
+}
+
+/** The AppFrame element: direct parent of the shell overlay layer. */
+function findFrame(): HTMLElement | null {
+  return document.querySelector('[data-shell-overlay]')?.parentElement ?? null
+}
+
+/**
+ * Mobile shell overlay: owns the `data-mobile-nav` marker on the AppFrame
+ * element (the CSS restructure keys off it), mirrors the frame's collapsed
+ * state into React state, and renders the dimmed backdrop plus a floating
+ * directory button for the hero/blank phases that have no session header.
+ */
+export function MobileNavOverlay({ toggleSidebar, t }: MobileNavOverlayProps) {
+  const mobile = useMobile()
+  const [open, setOpen] = useState(false)
+  const [fabVisible, setFabVisible] = useState(false)
+
+  // Frame ownership + open-state mirror. On wide screens this effect is inert:
+  // the marker is never set, so the layout is untouched.
+  useLayoutEffect(() => {
+    if (!mobile) {
+      setOpen(false)
+      return
+    }
+    const frame = findFrame()
+    if (frame === null) return
+    frame.setAttribute('data-mobile-nav', 'frame')
+    const sync = () => setOpen(!frame.hasAttribute('data-sidebar-collapsed'))
+    sync()
+    const observer = new MutationObserver(sync)
+    observer.observe(frame, { attributes: true, attributeFilter: ['data-sidebar-collapsed'] })
+    return () => {
+      observer.disconnect()
+      frame.removeAttribute('data-mobile-nav')
+    }
+  }, [mobile])
+
+  // The floating button is a fallback for surfaces without a session header:
+  // phase "active" means the header (and its toggle) is rendered already.
+  useEffect(() => {
+    if (!mobile) {
+      setFabVisible(false)
+      return
+    }
+    const sync = () => setFabVisible(document.querySelector('[data-phase="active"]') === null)
+    sync()
+    const observer = new MutationObserver(sync)
+    // childList: the conversation root can be replaced wholesale on session
+    // switches, so attribute-only observation would miss the new phase.
+    observer.observe(document.documentElement, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ['data-phase'],
+    })
+    return () => observer.disconnect()
+  }, [mobile])
+
+  // Escape closes the drawer — but yields to an open modal dialog (e.g. the
+  // settings panel), which owns its own Escape handling.
+  useEffect(() => {
+    if (!mobile || !open) return
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && document.querySelector('[aria-modal="true"]') === null) toggleSidebar()
+    }
+    // Capture phase: run before the settings panel's own document-bubble Escape
+    // handler, so the modal is still present when we yield to it.
+    document.addEventListener('keydown', onKeyDown, true)
+    return () => document.removeEventListener('keydown', onKeyDown, true)
+  }, [mobile, open, toggleSidebar])
+
+  // Navigation inside the drawer closes it: tapping a session row or a
+  // plugin takeover entry (task board / ssh) must hand the screen to the
+  // content it just opened. Mouse clicks keep the direct close path. Touch
+  // session rows close only after aria-selected changes, so live session
+  // updates cannot strand a delayed click on a detached DOM target.
+  //
+  // Deliberately NOT closed by this rule:
+  // - Settings / Session log: their dialogs render INSIDE the drawer DOM
+  //   (portaled into the sidebar); closing the drawer would slide the dialog
+  //   off-screen with it.
+  // - Workspace folder rows (YDXeBa_projectRow), the logo: pure UI toggles,
+  //   not navigation — see NAV_TARGETS in nav-targets.mjs.
+  // - Anything while a modal dialog is open: the dialog owns the screen.
+  useEffect(() => {
+    if (!mobile || !open) return
+    let lastTouchNavAt = 0
+    let lastTouchX = 0
+    let lastTouchY = 0
+    let suppressTouchClickUntil = 0
+    let pendingTouchRow: Element | null = null
+    let selectedRowAtArm: Element | null = null
+    let navClickArrived = false
+    let navObserver: MutationObserver | null = null
+    let navTimer: number | null = null
+
+    const drawerRoot = (): HTMLElement | null => findDrawer() as HTMLElement | null
+
+    const disarmNav = (): void => {
+      navObserver?.disconnect()
+      navObserver = null
+      if (navTimer !== null) window.clearTimeout(navTimer)
+      navTimer = null
+      pendingTouchRow = null
+      selectedRowAtArm = null
+      navClickArrived = false
+    }
+
+    const armNav = (row: Element): void => {
+      disarmNav()
+      pendingTouchRow = row
+      const drawer = drawerRoot()
+      selectedRowAtArm = drawer?.querySelector('[role="treeitem"][aria-selected="true"]') ?? null
+      if (drawer === null) return
+      navObserver = new MutationObserver(() => {
+        const frame = document.querySelector('[data-mobile-nav="frame"]')
+        if (frame === null || frame.hasAttribute('data-sidebar-collapsed')) {
+          disarmNav()
+          return
+        }
+        const selectedRow = drawerRoot()?.querySelector('[role="treeitem"][aria-selected="true"]') ?? null
+        if (navClickArrived && selectedRow !== null && selectedRow !== selectedRowAtArm) {
+          disarmNav()
+          toggleSidebar()
+        }
+      })
+      navObserver.observe(drawer, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['aria-selected'],
+      })
+      navTimer = window.setTimeout(disarmNav, 2000)
+    }
+
+    const navigationTarget = (target: EventTarget | null): Element | null => {
+      if (document.querySelector('[aria-modal="true"]') !== null) return null
+      const frame = document.querySelector('[data-mobile-nav="frame"]')
+      if (frame === null || frame.hasAttribute('data-sidebar-collapsed')) return null
+      if (!(target instanceof Element)) return null
+      const drawer = drawerRoot()
+      if (drawer === null || !drawer.contains(target)) return null
+      return navTargetFor(target)
+    }
+
+    const isPendingTouchClick = (event: MouseEvent): boolean => {
+      const capabilities = (event as MouseEvent & {
+        sourceCapabilities?: { firesTouchEvents?: boolean }
+      }).sourceCapabilities
+      if (capabilities?.firesTouchEvents === true) return true
+      return Math.hypot(event.clientX - lastTouchX, event.clientY - lastTouchY) <= 24
+    }
+
+    const onDrawerClick = (event: MouseEvent): void => {
+      // A touch row tap owns the close through the selection observer. Let the
+      // browser click reach React without a capture-phase close racing it.
+      if (performance.now() < suppressTouchClickUntil) return
+      if (
+        pendingTouchRow !== null
+        && performance.now() - lastTouchNavAt < 500
+        && isPendingTouchClick(event)
+      ) {
+        const target = navigationTarget(event.target)
+        const row = target?.closest('[role="treeitem"]')
+        if (row !== null && row !== undefined) {
+          pendingTouchRow = row
+          navClickArrived = true
+          return
+        }
+      }
+      if (navigationTarget(event.target) !== null) toggleSidebar()
+    }
+
+    const onDrawerPointerUp = (event: PointerEvent): void => {
+      if (event.pointerType !== 'touch' && event.pointerType !== 'pen') return
+      const target = navigationTarget(event.target)
+      if (target === null) return
+
+      const row = target.closest('[role="treeitem"]')
+      if (row !== null) {
+        if (row.getAttribute('aria-selected') === 'true') {
+          // Already-selected rows will not navigate; closing now is safe.
+          suppressTouchClickUntil = performance.now() + 500
+          toggleSidebar()
+        } else {
+          // Let React navigate first, then close on the selection mutation.
+          lastTouchNavAt = performance.now()
+          lastTouchX = event.clientX
+          lastTouchY = event.clientY
+          armNav(row)
+        }
+        return
+      }
+
+      // Non-row targets keep their existing click path; only host
+      // session/search rows participate in the selected-state hand-off.
+    }
+
+    document.addEventListener('click', onDrawerClick, true)
+    document.addEventListener('pointerup', onDrawerPointerUp, true)
+    return () => {
+      disarmNav()
+      document.removeEventListener('click', onDrawerClick, true)
+      document.removeEventListener('pointerup', onDrawerPointerUp, true)
+    }
+  }, [mobile, open, toggleSidebar])
+
+  // Tap-outside closes the drawer (issue #38). The backdrop is now
+  // pointer-events: none (pure dimming layer that never steals clicks), so
+  // "tap the dimmed area to close" moves here: any click outside the drawer
+  // (and outside the header toggle) closes it, keeping the standard
+  // interaction while letting drawer contents receive clicks normally.
+  // Capture phase: the close happens before the content processes the tap
+  // (same first-tap-closes behaviour as before).
+  useEffect(() => {
+    if (!mobile || !open) return
+    const onOutsideClick = (event: MouseEvent) => {
+      if (document.querySelector('[aria-modal="true"]') !== null) return
+      const target = event.target as HTMLElement | null
+      if (target === null) return
+      // 宿主自带抽屉（DSH 0.2.2 起）时，点遮罩关闭是它自己 drawerMask 的
+      // onClick；这里再 toggle 一次会把刚关上的抽屉又推开，手机上看就是
+      // 「点了没反应」。自带抽屉一律交给宿主。
+      if (hasNativeDrawer(document.querySelector('[data-mobile-nav="frame"]'))) return
+      if (target.closest(TOGGLE_SELECTOR) !== null) return
+      // Portaled overlays (issue #72): the workspace section's "视图选项" /
+      // "添加工作区" and the session row kebab all open menus that live on
+      // document.body — outside the drawer DOM. Without this exemption the
+      // first tap on a menu item is eaten: the drawer slides away, the menu
+      // unmounts with the sidebar, and the item's onClick never runs, so
+      // every workspace control reads as "点了没反应" on a phone.
+      if (isOverlayTap(target)) return
+      const frame = document.querySelector('[data-mobile-nav="frame"]')
+      if (frame === null || frame.hasAttribute('data-sidebar-collapsed')) return
+      const drawer = findDrawer()
+      if (drawer !== null && drawer.contains(target)) return
+      toggleSidebar()
+    }
+    document.addEventListener('click', onOutsideClick, true)
+    return () => document.removeEventListener('click', onOutsideClick, true)
+  }, [mobile, open, toggleSidebar])
+
+  if (!mobile) return null
+  return (
+    <>
+      {open && (
+        <div data-mobile-nav="backdrop" />
+      )}
+      {fabVisible && !open && (
+        <button
+          type="button"
+          data-mobile-nav="fab"
+          aria-label={t('open')}
+          title={t('open')}
+          onClick={() => toggleSidebar()}
+        >
+          <MobileIcon icon={icons.panelLeft} name="panelLeft" size={18} />
+        </button>
+      )}
+    </>
+  )
+}

package/client/mobile/MobileNavToggle.tsx

@@ -0,0 +1,57 @@
+import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import * as primitives from '@deepseek-ai/dsh-client-ui-primitives'
+import { NS } from './locales.ts'
+import { MobileIcon } from './MobileIcon.tsx'
+import { resolveMobileIcons } from './icon-compat.mjs'
+
+/** 宿主图标在加载时解析一次：不同 DSH 版本的导出名不同（见 icon-compat.mjs）。 */
+const icons = resolveMobileIcons(primitives)
+
+/** Full props for the session-header directory toggle. */
+export interface MobileNavToggleProps extends PropsRuntime<'conversation.session.header.actions'>, PropsLocale<typeof NS> {
+  /** Bound ctx.layout.toggleSidebar(). */
+  toggleSidebar: () => void
+}
+
+/**
+ * Mobile-only icon buttons next to the session title:
+ * - toggle: opens the directory drawer on narrow screens.
+ * - files: toggles the dsh-web-ui explorer sheet directly — one tap opens,
+ *   a second tap closes it, no drawer round-trip. (The drawer footer keeps
+ *   a Files entry for the hero/blank phases where this header does not
+ *   exist.)
+ * Hidden entirely on wide screens (CSS media query).
+ */
+export function MobileNavToggle({ toggleSidebar, t }: MobileNavToggleProps) {
+  const toggleExplorer = (): void => {
+    const frame = document.querySelector('[data-mobile-nav="frame"]')
+    if (frame === null) return
+    if (frame.hasAttribute('data-aionui-explorer-open')) {
+      frame.removeAttribute('data-aionui-explorer-open')
+    } else {
+      frame.setAttribute('data-aionui-explorer-open', '')
+    }
+  }
+  return (
+    <>
+      <button
+        type="button"
+        data-mobile-nav="toggle"
+        aria-label={t('open')}
+        title={t('open')}
+        onClick={() => toggleSidebar()}
+      >
+        <MobileIcon icon={icons.panelLeft} name="panelLeft" size={16} />
+      </button>
+      <button
+        type="button"
+        data-mobile-nav="files"
+        aria-label={t('files')}
+        title={t('files')}
+        onClick={toggleExplorer}
+      >
+        <MobileIcon icon={icons.folderOpen} name="folderOpen" size={16} />
+      </button>
+    </>
+  )
+}

package/client/mobile/fileGuard.ts

@@ -0,0 +1,200 @@
+// 移动端文件链接增强（issue #17，2026-10 修订）：新版 DSH 点聊天里的文件链接会
+// 在右侧栏打开文件预览（sidebarRight.openResource('dsh-resource://file/...')，手机
+// 也能看），不再调用桌面端 workspaces.openPath(open <path>)。因此这里**不再拦截
+// 点击**（旧守卫会吞掉现在有效的预览点击），只保留两件事：
+//   1) 在「文案就是文件路径」的链接旁注入一个「复制」按钮，点它经主机 RPC 读文件
+//      正文再写剪贴板（按钮自带内联样式，不依赖 Pocket 旧 mobile.css 是否生效）；
+//   2) 隐藏「添加工作区」入口（手机上配工作区无意义）。
+// 移植自 dsh-web-mobile（MIT）。
+//
+// 识别方式：不依赖 dsh-web 的 hash 类名（每次构建都变），只认「文本像文件路径的
+// <button>/<a>」——文件链接按钮的文案就是路径（如 lib/proxy.mjs / /Users/.../x.ts）。
+
+/** 「添加工作区」入口的文案（随语言变化），两种都覆盖。 */
+const WS_LABELS = ['添加工作区', '添加工作区…', 'Add workspace', 'Add workspace…']
+/** 复制按钮文案。 */
+const COPY_LABEL = '复制'
+
+/** 主机 fileRead 回调返回结构（与 client/api.js 的 FileReadResult 对齐）。 */
+interface ReadFileResponse {
+  ok: boolean;
+  value?: { content: string; path: string; size: number };
+  error?: { message: string };
+}
+
+/** 文本是否像文件路径：只认「整段文案就是一条路径」，避免状态行/命令行等长文本误命中。 */
+function looksLikeFilePath(text: string | null): boolean {
+  const t = (text ?? '').trim()
+  if (t.length < 3 || t.length > 320) return false
+  // 真实文件链接的文案就是纯路径：带空格或中文的（过程状态行、命令输出等）一律不算。
+  if (/\s/.test(t) || /[\u3400-\u9fff]/.test(t)) return false
+  if (/^(\/|~\/|\.\.?\/|[A-Za-z]:\\)/.test(t)) return true
+  if (/\/[\w.\-]+\.\w{1,12}$/.test(t)) return true
+  if (/[\w.\-]+\/[\w.\-]+\.\w{1,12}/.test(t)) return true
+  return false
+}
+
+/** 写剪贴板：优先 navigator.clipboard，非安全上下文（局域网 http）回退 execCommand。 */
+async function copyText(text: string): Promise<boolean> {
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text)
+      return true
+    }
+  } catch { /* 回退 */ }
+  try {
+    const ta = document.createElement('textarea')
+    ta.value = text
+    ta.style.position = 'fixed'
+    ta.style.top = '-9999px'
+    ta.style.opacity = '0'
+    document.body.appendChild(ta)
+    ta.focus()
+    ta.select()
+    const okCopy = document.execCommand('copy')
+    ta.remove()
+    return okCopy
+  } catch {
+    return false
+  }
+}
+
+export function startFileGuard(
+  readFile: (path: string) => Promise<ReadFileResponse>,
+): () => void {
+  // 轻量 toast：自包含，不依赖 dsh-pocket 面板的 React 状态。
+  let toastEl: HTMLElement | null = null
+  let toastTimer: number | null = null
+  const showToast = (text: string): void => {
+    if (toastEl === null) {
+      toastEl = document.createElement('div')
+      toastEl.setAttribute('data-mobile-nav', 'file-guard-toast')
+      Object.assign(toastEl.style, {
+        position: 'fixed',
+        left: '50%',
+        bottom: '64px',
+        transform: 'translateX(-50%)',
+        maxWidth: '84vw',
+        zIndex: '9999',
+        padding: '10px 14px',
+        borderRadius: '10px',
+        background: 'rgba(20,22,28,.92)',
+        color: '#fff',
+        fontSize: '13px',
+        lineHeight: '1.4',
+        textAlign: 'center',
+        fontFamily: 'inherit',
+        boxShadow: '0 4px 16px rgba(0,0,0,.28)',
+        pointerEvents: 'none',
+        opacity: '0',
+        transition: 'opacity .18s ease',
+      } as CSSStyleDeclaration)
+      document.body.appendChild(toastEl)
+    }
+    toastEl.textContent = text
+    requestAnimationFrame(() => {
+      if (toastEl !== null) toastEl.style.opacity = '1'
+    })
+    if (toastTimer !== null) window.clearTimeout(toastTimer)
+    toastTimer = window.setTimeout(() => {
+      if (toastEl !== null) toastEl.style.opacity = '0'
+    }, 2600)
+  }
+
+  // 在文件链接旁注入「复制」按钮：点它经主机 RPC 读文件正文再写剪贴板。
+  // 用 data-mobile-nav-copy 标记已处理的链接，避免重复注入；React 重渲染会
+  // 产生新元素（无标记），MutationObserver 重新补上按钮。
+  const injectCopyButtons = (): void => {
+    const links = document.querySelectorAll('button, a')
+    links.forEach((el) => {
+      if (el.getAttribute('data-mobile-nav-copy') === '1') return
+      const txt = (el.textContent ?? '').trim()
+      if (!looksLikeFilePath(txt)) return
+      el.setAttribute('data-mobile-nav-copy', '1')
+      const btn = document.createElement('button')
+      btn.type = 'button'
+      btn.setAttribute('data-mobile-nav', 'copy-file')
+      btn.textContent = COPY_LABEL
+      // 自带内联样式：不依赖 Pocket 旧 mobile.css 是否生效（那个整表可能被别的
+      // 手机布局插件停用），否则深色主题下会退化成浏览器默认的灰色大按钮。
+      btn.style.height = '22px'
+      btn.style.padding = '0 8px'
+      btn.style.marginLeft = '6px'
+      btn.style.border = '1px solid var(--dsw-alias-border-l1, rgba(255, 255, 255, .14))'
+      btn.style.borderRadius = '6px'
+      btn.style.background = 'var(--dsw-alias-bg-layer-1, #2b2b2e)'
+      btn.style.color = 'var(--dsw-alias-label-primary, inherit)'
+      btn.style.fontFamily = 'inherit'
+      btn.style.fontSize = '11px'
+      btn.style.lineHeight = '1'
+      btn.style.cursor = 'pointer'
+      btn.style.verticalAlign = 'baseline'
+      btn.addEventListener('click', async (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        const filePath = (el.textContent ?? '').trim()
+        btn.disabled = true
+        btn.textContent = '…'
+        try {
+          const res = await readFile(filePath)
+          if (!res?.ok) {
+            showToast(res?.error?.message ?? '复制失败')
+            return
+          }
+          const content = res.value?.content ?? ''
+          const copied = await copyText(content)
+          if (copied) {
+            const kb = Math.max(1, Math.round((res.value?.size ?? content.length) / 1024))
+            showToast(`已复制文件内容（${kb} KB）`)
+          } else {
+            showToast('复制失败，请手动选择')
+          }
+        } catch (err) {
+          showToast(err instanceof Error ? err.message : '复制失败')
+        } finally {
+          btn.disabled = false
+          btn.textContent = COPY_LABEL
+        }
+      })
+      el.parentElement?.insertBefore(btn, el.nextSibling)
+    })
+  }
+  injectCopyButtons()
+  const copyObserver = new MutationObserver(() => injectCopyButtons())
+  copyObserver.observe(document.body, { childList: true, subtree: true })
+
+  // 隐藏「添加工作区」入口：图标按钮由 mobile.css.ts 按 aria-label 隐藏；
+  // 下拉菜单里的文本项 CSS 选不到，这里按文案兜底（只在新增节点时检查，省开销）。
+  const hideWsEntries = (): (() => void) => {
+    const checkOne = (node: Node): void => {
+      if (node.nodeType !== 1) return
+      const el = node as HTMLElement
+      const txt = (el.getAttribute('aria-label') ?? el.textContent ?? '').trim()
+      if (WS_LABELS.includes(txt)) {
+        el.style.display = 'none'
+        el.setAttribute('data-mobile-nav-hide', 'add-workspace')
+      }
+    }
+    const sel = '[role="menuitem"],[role="option"],li,button,a'
+    document.querySelectorAll(sel).forEach(checkOne)
+    const observer = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        m.addedNodes.forEach((n) => {
+          if (n.nodeType !== 1) return
+          checkOne(n)
+          ;(n as HTMLElement).querySelectorAll?.(sel).forEach(checkOne)
+        })
+      }
+    })
+    observer.observe(document.body, { childList: true, subtree: true })
+    return () => observer.disconnect()
+  }
+  const disconnectWs = hideWsEntries()
+
+  return () => {
+    copyObserver.disconnect()
+    disconnectWs()
+    if (toastTimer !== null) window.clearTimeout(toastTimer)
+    toastEl?.remove()
+  }
+}

package/client/mobile/icon-compat.mjs

@@ -0,0 +1,90 @@
+// DSH primitives 图标导出的跨版本兼容层。
+//
+// 背景（2026-09 实测，dsh 0.1.7-rc.2 + dsh-pocket 2.10.6）：
+// 移动端组件原来直接具名导入
+//   IconPanelLeftOutline16 / IconDownloadOutline16 / IconFolderOpenOutline16，
+// 而 @deepseek-ai/dsh-client-ui-primitives 在 0.1.7-rc 之后把图标导出改成了
+//   Icon<Name>OutlineRegular / Icon<Name>OutlineMedium（`16` 尺寸后缀被移除）。
+// 于是这些导入在运行期变成 undefined —— 组件一渲染就抛 React #130
+// （"Element type is invalid ... got: undefined"），slot 条目整条崩掉：
+// 移动样式表照样注入，但 `data-mobile-nav="frame"` 标记永远挂不上，抽屉彻底失效。
+// 手机上的表现：56px 侧栏图标条一直占位、正文被挤成一列（用户可见症状）。
+//
+// 这里做三件事：
+//   1. 不再按具体名字静态导入 —— 新版名字在旧版不存在、旧版名字在新版不存在；
+//      对真正的 ESM 来说，具名导入不存在的导出是**链接期**错误，比 undefined 更难查；
+//   2. 用候选名列表在运行时解析，先后覆盖新旧两代命名；
+//   3. 全都解析不到时返回 null（绝不返回 undefined），调用方用文字字形兜底 ——
+//      在任何一代 DSH 上都不会再把整条 slot 打崩。
+//
+// 纯数据 + 纯函数、无 DOM 依赖，便于 `node --test` 直接引（test/icon-compat.test.js）。
+
+/** 每个图标按「新名优先、旧名兜底」的候选顺序。 */
+export const MOBILE_ICON_CANDIDATES = {
+  panelLeft: [
+    'IconPanelLeftOutlineRegular',
+    'IconPanelLeftOutlineMedium',
+    'IconPanelLeftOutline16',
+    'IconPanelLeftOutline',
+  ],
+  download: [
+    'IconDownloadOutlineRegular',
+    'IconDownloadOutlineMedium',
+    'IconDownloadOutline16',
+    'IconDownloadOutline',
+  ],
+  folderOpen: [
+    'IconFolderOpenOutlineRegular',
+    'IconFolderOpenOutlineMedium',
+    'IconFolderOpenOutline16',
+    'IconFolderOpenOutline',
+    'IconFolderOpen',
+  ],
+}
+
+/** 解析不到图标时用的文字字形（保证按钮仍然可见、可点、可读）。 */
+export const MOBILE_ICON_FALLBACK = {
+  panelLeft: '☰',
+  download: '⤓',
+  folderOpen: '▤',
+}
+
+/**
+ * 注册表里的某个导出能不能当 React 组件渲染。
+ * 组件可能是函数，也可能是对象（memo / forwardRef / class 组件），所以两者都收；
+ * 数字、字符串、null、undefined 一律不算 —— 它们正是打崩 slot 的元凶。
+ * @param value - 待判定的导出值。
+ * @returns 可渲染时为 true。
+ */
+export function isRenderableIcon(value) {
+  if (typeof value === 'function') return true
+  return typeof value === 'object' && value !== null
+}
+
+/**
+ * 按候选顺序取第一个可渲染的导出。
+ * @param registry - 宿主 primitives 命名空间（可能为 null/不是对象）。
+ * @param names - 候选导出名，按优先级排列。
+ * @returns 命中的组件；一个都没有时返回 null（**绝不返回 undefined**）。
+ */
+export function pickIcon(registry, names) {
+  if (registry === null || typeof registry !== 'object') return null
+  for (const name of names) {
+    const candidate = registry[name]
+    if (isRenderableIcon(candidate)) return candidate
+  }
+  return null
+}
+
+/**
+ * 把宿主 primitives 命名空间解析成移动端要用的三个图标。
+ * @param registry - 宿主 primitives 命名空间。
+ * @returns `{ panelLeft, download, folderOpen }`，缺的为 null（不是 undefined）。
+ */
+export function resolveMobileIcons(registry) {
+  const resolved = {}
+  for (const [key, names] of Object.entries(MOBILE_ICON_CANDIDATES)) {
+    resolved[key] = pickIcon(registry, names)
+  }
+  return resolved
+}