dsh-zen-remote 1.0.0

package/src/client/debug.ts

@@ -0,0 +1,253 @@
+import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
+/**
+ * Debug badge — ?mobile-nav-debug=1
+ * Renders a live state overlay (URL, viewport, media queries, shell chrome,
+ * aionui columns, genui cards, captured errors) so a phone-side repro can be
+ * diagnosed without guessing. No-op unless the query param is present.
+ */
+export function installDebugBadge(ctx: ClientContext): void {
+  /**
+   * Fake safe-area inset — ?mobile-nav-inset=54 or ?mobile-nav-inset=54,34
+   * env(safe-area-inset-*) is hard 0 on every desktop browser (CDP included),
+   * so notch bugs are invisible until a real phone loads the page — the S2.1
+   * hotfix exists because of exactly that. Overriding --mnav-sat / --mnav-sab
+   * (see styles/base.css.ts) on the root element reproduces a notch anywhere.
+   * No param = the variables keep their env() values = zero behaviour change.
+   *
+   * One value fakes the TOP inset only (the historic behaviour — every S1-S3
+   * verification recipe passes `=54`, and they must keep meaning what they
+   * did). A second, comma-separated value fakes the BOTTOM inset too:
+   * `=54,34` is the iPhone notch + home-indicator pair. The bottom half was
+   * added in S4.1 because the home-bar padding it guards (composer clearance
+   * over the indicator) is otherwise untestable off-device for exactly the
+   * same reason the top half exists.
+   */
+  ctx.effect(() => {
+    const raw = new URLSearchParams(location.search).get('mobile-nav-inset')
+    if (raw === null) return () => {}
+    const [topRaw, bottomRaw] = raw.split(',')
+    const top = Number(topRaw)
+    if (!Number.isFinite(top)) return () => {}
+    const root = document.documentElement
+    root.style.setProperty('--mnav-sat', `${top}px`)
+    const bottom = bottomRaw === undefined ? Number.NaN : Number(bottomRaw)
+    if (Number.isFinite(bottom)) root.style.setProperty('--mnav-sab', `${bottom}px`)
+    return () => {
+      root.style.removeProperty('--mnav-sat')
+      root.style.removeProperty('--mnav-sab')
+    }
+  }, 'dsh-mobile-nav: fake safe-area inset')
+
+  const DEBUG_KEY = 'dsh-mobile-nav.debug'
+
+  /**
+   * No-URL toggle — 5 quick taps on the home screen's top bar.
+   * A standalone PWA has no address bar, and the paired-device cookie lives
+   * in the PWA's own jar (Safari hits the pairing wall instead), so the
+   * ?mobile-nav-debug=1 param is unreachable exactly where the badge is
+   * needed most.
+   *
+   * The target is deliberately NOT [data-mobile-nav="ws-switch"] any more:
+   * that button opens the workspace sheet on the FIRST tap, so taps 2..5
+   * land on the sheet backdrop, `closest()` misses, and the counter never
+   * reaches five — the original binding only ever fired by luck, and it left
+   * a user stuck inside debug mode with no way back out. The logo img has no
+   * click handler at all; the home-top container minus the switch button is
+   * the fallback for when the icon 404s and the img is not rendered.
+   */
+  ctx.effect(() => {
+    let taps = 0
+    let firstTap = 0
+    const onTap = (event: Event) => {
+      if (!(event.target instanceof Element)) return
+      const inTopBar = event.target.closest('[data-mobile-nav="home-logo"]') !== null
+        || (event.target.closest('[data-mobile-nav="home-top"]') !== null
+          && event.target.closest('[data-mobile-nav="ws-switch"]') === null)
+      if (!inTopBar) return
+      const now = Date.now()
+      if (now - firstTap > 2500) { taps = 0; firstTap = now }
+      taps += 1
+      if (taps >= 5) {
+        if (localStorage.getItem(DEBUG_KEY) === '1') localStorage.removeItem(DEBUG_KEY)
+        else localStorage.setItem(DEBUG_KEY, '1')
+        location.reload()
+      }
+    }
+    document.addEventListener('click', onTap, true)
+    return () => document.removeEventListener('click', onTap, true)
+  }, 'dsh-mobile-nav: debug badge tap toggle')
+
+  ctx.effect(() => {
+    const enabled = new URLSearchParams(location.search).has('mobile-nav-debug')
+      || localStorage.getItem('dsh-mobile-nav.debug') === '1'
+    if (!enabled) return () => {}
+    const errors: string[] = []
+    const onError = (event: ErrorEvent) => errors.push(`ERR ${event.message.slice(0, 120)}`)
+    const onRejection = (event: PromiseRejectionEvent) => errors.push(`REJ ${String(event.reason).slice(0, 120)}`)
+    window.addEventListener('error', onError)
+    window.addEventListener('unhandledrejection', onRejection)
+
+    /* Probe element: reads the REAL env(safe-area-inset-*) as computed padding
+       — the --mnav-* vars can be faked by the inset param, this cannot. */
+    const probe = document.createElement('div')
+    probe.style.cssText =
+      'position:fixed;visibility:hidden;pointer-events:none;' +
+      'padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)'
+    document.body.appendChild(probe)
+
+    const badge = document.createElement('div')
+    badge.style.cssText = [
+      /* Sits BELOW the notch on purpose: at the old flat top:40px the badge
+         painted into the status-bar strip and covered the session header,
+         which read on a screenshot as "the header ran under the notch in
+         debug mode" — a measurement artefact that cost a whole round of
+         diagnosis. env() here, not --mnav-sat: the badge must stay put even
+         when the inset param is faking that variable. */
+      'position:fixed', 'top:calc(env(safe-area-inset-top, 0px) + 8px)', 'right:6px', 'z-index:2147483000',
+      'background:rgba(0,0,0,.82)', 'color:#fff', 'font:11px/1.5 ui-monospace,monospace',
+      'padding:8px 10px', 'border-radius:8px', 'max-width:94vw', 'max-height:70vh',
+      /* pointer-events must be auto for the escape hatch below — with `none`
+         the badge could only be dismissed by editing localStorage, which is
+         not reachable from a standalone PWA. touch-action/user-select keep
+         the double tap from being read as zoom or text selection. */
+      'overflow:auto', 'white-space:pre-wrap', 'pointer-events:auto',
+      'touch-action:manipulation', '-webkit-user-select:none', 'user-select:none',
+    ].join(';')
+    /* Escape hatch: two taps on the badge within 600ms turn debug off. The
+       enable gesture lives on the home screen, which a user deep inside a
+       session cannot reach without first getting out of the way of the badge
+       — so the off switch belongs on the badge itself. */
+    /* The full read-out is tall enough to cover the session list, and with
+       pointer-events:auto (required for the escape hatch) it swallowed every
+       tap under it — the user could not open a session with debug on. The
+       badge therefore starts COLLAPSED (a one-line pill showing vh, the
+       number that matters for the viewport-shrink bug) and only expands on
+       demand. Single tap toggles collapsed/expanded (deferred 620ms so it
+       can be distinguished from the exit gesture); double tap still exits. */
+    let lastTap = 0
+    let collapsed = true
+    let singleTapTimer: ReturnType<typeof setTimeout> | undefined
+    const onBadgeTap = (event: Event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      const now = Date.now()
+      if (now - lastTap < 600) {
+        if (singleTapTimer !== undefined) clearTimeout(singleTapTimer)
+        localStorage.removeItem(DEBUG_KEY)
+        const url = new URL(location.href)
+        url.searchParams.delete('mobile-nav-debug')
+        location.replace(url.toString())
+        return
+      }
+      lastTap = now
+      singleTapTimer = setTimeout(() => {
+        collapsed = !collapsed
+        paint()
+      }, 620)
+    }
+    badge.addEventListener('click', onBadgeTap)
+
+    const read = (): string => {
+      const q = (sel: string) => !!document.querySelector(sel)
+      const vis = (sel: string) => {
+        const el = document.querySelector<HTMLElement>(sel)
+        return el === null ? 'absent' : getComputedStyle(el).visibility
+      }
+      const frame = document.querySelector<HTMLElement>('[data-mobile-nav="frame"]')
+      if (collapsed) return `DBG vh ${innerHeight}/${screen.height} ▸ 单击展开 双击关闭`
+      return [
+        '▾ 单击收起 · 双击关闭 debug',
+        `URL ${location.pathname}${location.search}`,
+        `W ${innerWidth} x ${innerHeight} dpr ${devicePixelRatio}`,
+        `mq≤1023 ${matchMedia('(max-width: 1023px)').matches}  mq≥1024 ${matchMedia('(min-width: 1024px)').matches}`,
+        `css ${q('style[data-plugin-css*="mobile"]')}  frame ${!!frame}`,
+        `previewCol ${vis('[data-aionui-preview-col]')}  explorerCol ${vis('[data-aionui-explorer-col]')}`,
+        `previewOpen ${frame?.hasAttribute('data-aionui-preview-open') ?? '?'}  explorerOpen ${frame?.hasAttribute('data-aionui-explorer-open') ?? '?'}  previewFull ${frame?.hasAttribute('data-mobile-preview-full') ?? '?'}`,
+        `header ${vis('[data-phase] header')} h${Math.round(document.querySelector('[data-phase] header')?.getBoundingClientRect().height ?? 0)}  composer ${q('textarea')}`,
+        `sat ${getComputedStyle(document.documentElement).getPropertyValue('--mnav-sat').trim() || '?'}  sab ${getComputedStyle(document.documentElement).getPropertyValue('--mnav-sab').trim() || '?'}`,
+        (() => {
+          /* Bottom-gap forensics: real env values + who ends where. */
+          const ps = getComputedStyle(probe)
+          const bottomOf = (sel: string): string => {
+            const el = document.querySelector(sel)
+            return el === null ? '—' : String(Math.round(el.getBoundingClientRect().bottom))
+          }
+          /* Composer ledger: bottom/gap-to-viewport for every layer between
+             the textarea and the screen edge, so a "white band under the
+             composer" screenshot says WHICH layer owns it instead of only
+             where the textarea ends. Anchors per AGENTS.md: InputBar root is
+             the padding carrier, _card is the rounded visual box, _composerSeat
+             is the sticky seat, _scrollBody is the real scroll container. */
+          const pair = (sel: string): string => {
+            const el = document.querySelector(sel)
+            if (el === null) return '—'
+            const b = el.getBoundingClientRect().bottom
+            return `${Math.round(b)}/${Math.round(innerHeight - b)}`
+          }
+          const barRoot = document.querySelector('[data-slot="conversation.composer.bar"] > [class$="_root"]')
+          /* Top-edge forensics: rect.top of the surfaces that consume
+             --mnav-sat. These separate the two competing readings of the
+             device numbers — a viewport SUNK below the status bar (origin at
+             screen y=59, so a working sat padding puts the header at 118 and
+             the top gap is doubled) versus a viewport anchored at screen y=0
+             that is merely 59px short at the bottom (header at 59, top
+             correct, the missing 59 showing as a band under the composer).
+             innerHeight alone cannot tell them apart; the viewport ORIGIN can,
+             hence screenY / visualViewport offsets / the edge markers. */
+          const topOf = (sel: string): string => {
+            const el = document.querySelector(sel)
+            return el === null ? '—' : String(Math.round(el.getBoundingClientRect().top))
+          }
+          const framePadTop = frame === null ? '—' : getComputedStyle(frame).paddingTop
+          const vv = window.visualViewport
+          return [
+            `env sat ${ps.paddingTop} sab ${ps.paddingBottom}`,
+            `screen ${screen.width}x${screen.height} avail ${screen.availWidth}x${screen.availHeight}`,
+            `vh ${innerHeight} vv ${Math.round(vv?.height ?? -1)} outH ${outerHeight}`,
+            `scrXY ${screenX},${screenY} vvOff ${Math.round(vv?.offsetTop ?? -1)} vvPage ${Math.round(vv?.pageTop ?? -1)} vvScale ${vv?.scale ?? '?'}`,
+            /* The ENFORCED state, not a re-derivation: installSunkInset()
+               stamps data-mnav-sunk, and its absence means the override is
+               not running at all (the inset param owns the variables). sabOvr
+               is the receipt — the inline value it wrote, or (env) when the
+               normal compensation is in force. */
+            `sunk? ${document.documentElement.dataset.mnavSunk ?? 'n/a'} standalone ${matchMedia('(display-mode: standalone)').matches} sabOvr ${document.documentElement.style.getPropertyValue('--mnav-sab') || '(env)'}`,
+            `frameTop ${topOf('[data-mobile-nav="frame"]')} padTop ${framePadTop} headerTop ${topOf('[data-phase] header')} homeTopY ${topOf('[data-mobile-nav="home-top"]')}`,
+            `botFrame ${bottomOf('[data-mobile-nav="frame"]')} composer ${bottomOf('[data-phase] textarea')}`,
+            `taB ${pair('[data-phase] textarea')} cardB ${pair('[data-slot="conversation.composer.bar"] [class$="_card"]')}`,
+            `barB ${pair('[data-slot="conversation.composer.bar"] > [class$="_root"]')} seatB ${pair('[class$="_composerSeat"]')} scrollB ${pair('[class$="_scrollBody"]')}`,
+            `sabPad ${barRoot === null ? '—' : getComputedStyle(barRoot).paddingBottom}`,
+            `botList ${bottomOf('[data-mobile-nav="home-list"]')} fab ${bottomOf('[data-mobile-nav="home-fab"]')}`,
+            `cssLen ${document.querySelector('style[data-plugin-css*="mobile"]')?.textContent?.length ?? 0}`,
+          ].join('\n')
+        })(),
+        `genui cards ${document.querySelectorAll('[data-genui]').length}  panel ${q('[data-genui-panel]')}`,
+        `phase ${document.querySelector('[data-phase]')?.getAttribute('data-phase') ?? '?'}`,
+        `errs ${errors.slice(-5).join(' | ') || 'none'}`,
+      ].join('\n')
+    }
+    /* Feedback-loop guards: painting the badge mutates the body subtree the
+       observer watches — without these two checks the observer retriggers
+       itself forever and freezes the page (the badge was rarely actually
+       enabled before, which is how this survived). */
+    const paint = (): void => {
+      const next = read()
+      if (next !== badge.textContent) badge.textContent = next
+    }
+    paint()
+    const observer = new MutationObserver((mutations) => {
+      if (mutations.every((m) => m.target === badge || badge.contains(m.target) || m.target === probe)) return
+      paint()
+    })
+    observer.observe(document.body, { childList: true, subtree: true, attributes: true })
+    const timer = setInterval(paint, 1500)
+    document.body.appendChild(badge)
+    return () => {
+      window.removeEventListener('error', onError)
+      window.removeEventListener('unhandledrejection', onRejection)
+      observer.disconnect()
+      clearInterval(timer)
+      probe.remove()
+      badge.remove()
+    }
+  }, 'dsh-mobile-nav: debug badge')
+}

package/src/client/effects/aionui-compat.ts

@@ -0,0 +1,183 @@
+import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
+
+/** dsh-web-ui 兼容：explorer / preview 列的显隐标记与升起动画（同域同机制，合并一处）。 */
+export function installAionuiCompat(ctx: ClientContext): void {
+  // dsh-web-ui compatibility: the aionui explorer column would render as a
+  // sheet over the whole mobile UI whenever its (persisted) expanded state
+  // is active — including right after a reload, with no way out (the
+  // suite's floating expand button only exists while collapsed). Instead
+  // of fighting the suite's store timing, the mobile stylesheet keeps the
+  // explorer column hidden by default and the header's Files action (plus
+  // the drawer footer entry) opens it via the `data-aionui-explorer-open`
+  // marker on the frame. This effect just clears that marker when the
+  // sheet's own collapse chevron is tapped, so closing is symmetric with
+  // opening.
+  ctx.effect(() => {
+    // Arm on the CURRENT width and re-arm on every width change: the guard
+    // used to run once at apply time, so a wide→narrow transition (desktop
+    // resize, tablet split view) left the markers dead and the explorer /
+    // preview sheets could neither open nor close properly.
+    const narrow = window.matchMedia('(max-width: 1023px)')
+    let cleanup: (() => void) | undefined
+    const install = (): void => {
+      cleanup?.()
+      if (!narrow.matches) {
+        cleanup = undefined
+        return
+      }
+      const onChevronClick = (event: MouseEvent) => {
+        const target = event.target as HTMLElement | null
+        if (target === null || !target.closest('.aionui-collapse-chevron')) return
+        document.querySelector('[data-mobile-nav="frame"]')?.removeAttribute('data-aionui-explorer-open')
+      }
+      document.addEventListener('click', onChevronClick, true)
+      cleanup = () => document.removeEventListener('click', onChevronClick, true)
+    }
+    install()
+    narrow.addEventListener('change', install)
+    return () => {
+      narrow.removeEventListener('change', install)
+      cleanup?.()
+    }
+  }, 'dsh-mobile-nav: aionui explorer close marker')
+
+  // dsh-web-ui compatibility: the aionui preview column persists its open
+  // tabs in localStorage and restores them on load, which would pop the
+  // preview sheet over the fresh UI after a reload. Gate it like the
+  // explorer: the stylesheet keeps the column hidden unless the frame
+  // carries `data-aionui-preview-open`; this effect sets that marker when
+  // the user actually taps a file row in the explorer sheet, and clears it
+  // whenever the suite hides the column again (collapse chevron / tab
+  // close), so a restored-but-unwanted sheet never appears.
+  ctx.effect(() => {
+    // Arm on the CURRENT width and re-arm on every width change (see the
+    // explorer marker effect for why).
+    const narrow = window.matchMedia('(max-width: 1023px)')
+    let cleanup: (() => void) | undefined
+    const install = (): void => {
+      cleanup?.()
+      if (!narrow.matches) {
+        cleanup = undefined
+        return
+      }
+      const frame = (): HTMLElement | null => document.querySelector('[data-mobile-nav="frame"]')
+      // Closing the preview sheet also drops the fullscreen marker, so the
+      // next preview starts in the sheet layout again.
+      const closePreview = (): void => {
+        frame()?.removeAttribute('data-aionui-preview-open')
+        frame()?.removeAttribute('data-mobile-preview-full')
+      }
+      const onTap = (event: MouseEvent) => {
+        const target = event.target as HTMLElement | null
+        if (target === null) return
+        const row = target.closest('[data-aionui-explorer-col] [class*="_treeRow"]')
+        if (row === null) return
+        // Only FILE rows open the preview sheet. Directory rows toggle
+        // expansion and must not pop the (possibly stale, restored-from-
+        // localStorage) preview tab over the tree. Substring matching:
+        // the suite's hashed classes carry a hash prefix, so the exact-token
+        // `class~=` form never matches and the trailing `$=` form misses
+        // selected rows (`_treeRowSelected`) and open arrows
+        // (`_treeArrowOpen`) — regressions of issue #8. The arrow gate must
+        // additionally exclude the leaf marker: FILE rows render a
+        // `_treeArrowEmpty` span whose class still contains the `_treeArrow`
+        // substring, so a bare substring match would treat every row as a
+        // directory and no preview would ever open.
+        if (row.querySelector('[class*="_treeArrow"]:not([class*="_treeArrowEmpty"])') !== null) return
+        frame()?.setAttribute('data-aionui-preview-open', '')
+      }
+      // The preview sheet's own collapse button (the two inward arrows in the
+      // tab bar) closes the AionUI store, but on mobile the suite's layout sync
+      // can be skipped while its shell-track mirror is not ready yet — in that
+      // case the inline visibility never flips to hidden and the visibility
+      // watcher below would never clear our marker. Clear it directly on the
+      // button click so the sheet always closes regardless of the suite's sync.
+      const onCollapse = (event: MouseEvent) => {
+        const target = event.target as HTMLElement | null
+        if (target === null) return
+        if (target.closest('[data-aionui-preview-col] [class$="_panelCollapse"]') !== null) {
+          closePreview()
+        }
+      }
+      const sync = (): void => {
+        const pv = document.querySelector<HTMLElement>('[data-aionui-preview-col]')
+        if (pv === null) return
+        // Read the suite's inline visibility, not the computed value: while the
+        // `data-aionui-preview-open` marker is present our stylesheet forces the
+        // sheet visible with !important, so getComputedStyle() would never report
+        // hidden and the marker would never be cleared.
+        if (pv.style.visibility === 'hidden') closePreview()
+      }
+      document.addEventListener('click', onTap, true)
+      document.addEventListener('click', onCollapse, true)
+      const observer = new MutationObserver(sync)
+      observer.observe(document.body, { attributes: true, subtree: true, attributeFilter: ['style'] })
+      sync()
+      cleanup = () => {
+        document.removeEventListener('click', onTap, true)
+        document.removeEventListener('click', onCollapse, true)
+        observer.disconnect()
+      }
+    }
+    install()
+    narrow.addEventListener('change', install)
+    return () => {
+      narrow.removeEventListener('change', install)
+      cleanup?.()
+    }
+  }, 'dsh-mobile-nav: preview sheet open marker')
+
+  // The dsh-web-ui explorer / preview columns toggle via `visibility`
+  // (their inline style), which never restarts a CSS animation — so the
+  // sheets would only animate on first mount. Replay the rise animation
+  // with the Web Animations API each time a column turns visible, then
+  // leave the resting state to the stylesheet.
+  ctx.effect(() => {
+    // Arm on the CURRENT width and re-arm on every width change (see the
+    // explorer marker effect for why).
+    const narrow = window.matchMedia('(max-width: 1023px)')
+    let cleanup: (() => void) | undefined
+    const install = (): void => {
+      cleanup?.()
+      if (!narrow.matches) {
+        cleanup = undefined
+        return
+      }
+      const cols = ['[data-aionui-explorer-col]', '[data-aionui-preview-col]']
+      const seen = new Map<string, boolean>()
+      const play = (el: Element): void => {
+        el.animate(
+          [
+            { opacity: 0, transform: 'translateY(28px)' },
+            { opacity: 1, transform: 'none' },
+          ],
+          { duration: 280, easing: 'cubic-bezier(.16, 1, .3, 1)', fill: 'backwards' },
+        )
+      }
+      const check = (): void => {
+        for (const sel of cols) {
+          const el = document.querySelector(sel)
+          if (el === null) continue
+          const visible = getComputedStyle(el).visibility === 'visible'
+          const prev = seen.get(sel) ?? false
+          if (visible && !prev) play(el)
+          seen.set(sel, visible)
+        }
+      }
+      const observer = new MutationObserver(check)
+      // Visibility flips come through inline style mutations (suite) or the
+      // explorer-open marker on the frame; class changes are watched too.
+      observer.observe(document.body, { attributes: true, subtree: true, attributeFilter: ['style', 'class', 'data-aionui-explorer-open'] })
+      check()
+      cleanup = () => {
+        observer.disconnect()
+      }
+    }
+    install()
+    narrow.addEventListener('change', install)
+    return () => {
+      narrow.removeEventListener('change', install)
+      cleanup?.()
+    }
+  }, 'dsh-mobile-nav: sheet rise animation replay')
+}