dsh-zen-remote 1.1.0 → 1.1.2

package/src/client/effects/keyboard-avoid.ts

@@ -0,0 +1,351 @@
+import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
+
+/** Phone breakpoint — same query every phone-only effect in this plugin uses. */
+const PHONE_QUERY = '(max-width: 767px)'
+
+/** Root CSS variable composer.css.ts turns into a composer lift. */
+const LIFT_VAR = '--mnav-kb-lift'
+
+/** Root attribute gating the transform rule. Present only while lifting:
+ * a transform — even translateY(0) — makes the bar the containing block for
+ * any fixed-position descendant, so the rule must not exist at rest. */
+const LIFT_ATTR = 'data-mnav-kb'
+
+/** Ignore sub-pixel / rounding noise so the composer never jitters. */
+const MIN_LIFT_PX = 2
+
+/** Above this visualViewport scale the geometry is pinch-zoom, not keyboard. */
+const MAX_SCALE = 1.01
+
+/** Extra clearance whenever the keyboard is up AND the browser reacted to it.
+ * Third-party IMEs routinely under-report their height — the toolbar strip
+ * above the keys is left out of what they hand the system, so the viewport
+ * shrinks by less than the keyboard actually covers and the composer lands
+ * slightly under it (搜狗 ~30px is a documented case; one reporter saw the
+ * same with 微信输入法 after the viewport DID shrink). Deliberately small:
+ * it only has to clear a toolbar strip, not a keyboard.
+ *
+ * ANDROID ONLY ({@link safetyPad}). The under-reporting is an Android IME
+ * behaviour; iOS has one system keyboard whose height WebKit reports exactly,
+ * so padding there would be a visible gap bought for nothing. */
+const SAFETY_PAD_PX = 15
+
+/** The safety pad this platform gets: the clearance above, or nothing off
+ * Android. UA sniffing is the right tool here — the target is a platform
+ * defect, not a feature that could be detected. */
+export function safetyPad(userAgent: string): number {
+  return /Android/iu.test(userAgent) ? SAFETY_PAD_PX : 0
+}
+
+/** A viewport that lost at least this much against its no-keyboard baseline
+ * has a keyboard up. Comfortably above the ~56px a collapsing URL bar moves,
+ * comfortably below any real keyboard. */
+const KEYBOARD_MIN_SHRINK_PX = 100
+
+/** The official composer slot wrapper (same marker keyboard-guard reads). */
+const COMPOSER = '[data-slot="conversation.composer.bar"]'
+
+/** Dumb-keyboard probe: after a touch-granted focus, the viewport gets this
+ * long to move before the keyboard is declared invisible to the browser. */
+const PROBE_TOTAL_MS = 1200
+const PROBE_INTERVAL_MS = 120
+
+/** Per-browser cache of the probe's verdict. Once a keyboard has proven
+ * invisible, later focuses lift IMMEDIATELY instead of sitting through the
+ * probe again — the probe still runs in the background on every focus, and
+ * any viewport movement it sees revokes the cache (IME switched, engine
+ * fixed), returning the browser to the pure geometric path. */
+const DUMB_KEY = 'dsh-mobile-nav.kb-dumb'
+/** Any viewport movement beyond this during the probe means the browser can
+ * see the keyboard (or is panning) — the geometric path owns the job then. */
+const PROBE_EPSILON_PX = 8
+
+/**
+ * Fallback lift for a keyboard the browser cannot see (issue #1 确诊根因:
+ * 微信输入法在该设备上不向系统 insets 上报键盘高度, Chrome 键盘高度恒 0).
+ * There is no signal to measure, so this is an estimate: the reporter's
+ * measured WeType is ~315 CSS px on a 858px viewport (~37%); 42% capped at
+ * 400px covers taller IME toolbars without stranding the composer mid-screen.
+ * ponytail: single heuristic constant; per-IME calibration only if reports
+ * show it misses.
+ */
+export function estimatedLift(innerHeight: number): number {
+  return Math.min(Math.round(innerHeight * 0.42), 400)
+}
+
+/** One visualViewport reading, in CSS pixels. */
+export interface ViewportReading {
+  /** Layout viewport height (window.innerHeight). */
+  innerHeight: number
+  /** visualViewport.height. */
+  vvHeight: number
+  /** visualViewport.offsetTop. */
+  offsetTop: number
+  /** visualViewport.scale. */
+  scale: number
+}
+
+/**
+ * How far the composer must rise so its bottom edge sits on the visual
+ * viewport's bottom edge (issue #1, 方案 2 of
+ * docs/research-ime-keyboard-occlusion.md).
+ *
+ * The composer is sticky at the LAYOUT viewport's bottom; the keyboard
+ * shrinks only the VISUAL viewport (Chrome 108+ resizes-visual). When the
+ * browser also pans the visual viewport down to reveal the focused field —
+ * iOS, and Android when its auto-scroll works — the occluded band is zero
+ * and this stays a no-op. When it shrinks without panning (the reported
+ * class of bug), the difference is exactly the hidden band.
+ *
+ * Pinch-zoom shrinks vvHeight too; the scale guard keeps zooming from
+ * flinging the composer around.
+ */
+export function keyboardLift(reading: ViewportReading): number {
+  if (reading.scale > MAX_SCALE) return 0
+  const occluded = reading.innerHeight - reading.vvHeight - reading.offsetTop
+  return occluded >= MIN_LIFT_PX ? Math.round(occluded) : 0
+}
+
+/**
+ * The lift the composer actually gets, from the three sources in priority
+ * order.
+ * @param geometric - {@link keyboardLift} of the current reading.
+ * @param estimate - the dumb-keyboard estimate, 0 when not in that mode.
+ * @param keyboardShrunk - the viewport lost {@link KEYBOARD_MIN_SHRINK_PX}
+ *   or more against its no-keyboard baseline, i.e. the browser reacted.
+ * @param pad - this platform's safety clearance, from {@link safetyPad}.
+ * @returns pixels to translate the composer up by.
+ */
+export function composerLift(
+  geometric: number,
+  estimate: number,
+  keyboardShrunk: boolean,
+  pad: number,
+): number {
+  // Measured occlusion, plus clearance for the strip the IME did not declare.
+  if (geometric > 0) return geometric + pad
+  // The estimate is a generous fraction already; padding it would strand the
+  // composer mid-screen.
+  if (estimate > 0) return estimate
+  // Nothing occluded on paper, but a keyboard IS up and the browser handled
+  // it: the only thing that can still cover the composer is an under-reported
+  // toolbar, so clear exactly that.
+  return keyboardShrunk ? pad : 0
+}
+
+/**
+ * S10 — keep the composer above the software keyboard (< 768px).
+ *
+ * The shell deliberately relies on the browser's own focus-reveal behaviour
+ * (home.css.ts: plain overflow:hidden so iOS pans the visual viewport, no
+ * visualViewport JS). Issue #1 (小米 + 微信输入法) showed one environment
+ * where that chain can break while the viewport still shrinks. This effect
+ * is the increment that covers it: mirror the occluded band into a root CSS
+ * variable, and let the stylesheet translate the composer up by it. In every
+ * environment where the browser already handles the keyboard the band
+ * computes to zero and nothing changes.
+ *
+ * `scroll` is listened to as well as `resize`: panning the visual viewport
+ * changes offsetTop without a resize (CSSOM View §13.2), and both sides of
+ * the subtraction must stay fresh.
+ *
+ * Second layer (2026-08-21, after on-device confirmation): the reporter's
+ * 小米 + 微信输入法 keyboard is INVISIBLE to Chrome — vv.height stayed 859/858
+ * with the keyboard open, so no event ever fires and the geometry above is
+ * honestly zero. For that class only, a touch-granted composer focus starts a
+ * short probe; if the viewport has not moved at all by the end, the composer
+ * gets an ESTIMATED lift until blur. Guards against false positives:
+ * - probe only after a recent touch pointerdown (a hardware-keyboard focus
+ *   never lifts anything);
+ * - any viewport movement ≥ {@link PROBE_EPSILON_PX} cancels the probe — a
+ *   browser that shows any reaction owns the reveal itself (iOS pans,
+ *   working Android resizes);
+ * - a non-zero geometric lift always wins over the estimate.
+ *
+ * Third layer: an IME that under-reports its height (toolbar strip left out
+ * of what it declares) makes the browser shrink the viewport by less than the
+ * keyboard covers — every number the page can read is self-consistent, so no
+ * occlusion is computable. Whenever a keyboard is up and the browser DID
+ * react, the composer therefore also gets {@link safetyPad} of clearance —
+ * Android only, where the under-reporting happens.
+ * See {@link composerLift} for how the three sources compose.
+ */
+export function installKeyboardAvoid(ctx: ClientContext): void {
+  ctx.effect(() => {
+    const vv = window.visualViewport
+    if (vv === null || vv === undefined) return () => {}
+    const viewport = vv
+    const narrow = window.matchMedia(PHONE_QUERY)
+    const root = document.documentElement
+    let frame = 0
+    let applied = 0
+    let attached = false
+    /** Estimated lift while a browser-invisible keyboard is up; 0 otherwise. */
+    let estimate = 0
+    let probeTimer = 0
+    let lastTouch = 0
+    /** Viewport height with no keyboard up, the shrink is measured against
+     * it. Re-read on every sync that finds the composer unfocused, so a
+     * rotation or a URL-bar change rebases it without extra listeners. */
+    let baseline = 0
+    const pad = safetyPad(navigator.userAgent)
+
+    const composerTextarea = (node: unknown): boolean =>
+      node instanceof HTMLElement && node.tagName === 'TEXTAREA' && node.closest(COMPOSER) !== null
+
+    const sync = (): void => {
+      const focused = composerTextarea(document.activeElement)
+      if (!focused) baseline = viewport.height
+      const geometric = keyboardLift({
+        innerHeight: window.innerHeight,
+        vvHeight: viewport.height,
+        offsetTop: viewport.offsetTop,
+        scale: viewport.scale,
+      })
+      const shrunk = focused && baseline - viewport.height >= KEYBOARD_MIN_SHRINK_PX
+      const lift = composerLift(geometric, estimate, shrunk, pad)
+      if (lift === applied) return
+      applied = lift
+      if (lift === 0) {
+        root.style.removeProperty(LIFT_VAR)
+        root.removeAttribute(LIFT_ATTR)
+      } else {
+        root.style.setProperty(LIFT_VAR, `${lift}px`)
+        root.setAttribute(LIFT_ATTR, '')
+      }
+    }
+    const schedule = (): void => {
+      if (frame !== 0) return
+      frame = requestAnimationFrame(() => {
+        frame = 0
+        sync()
+      })
+    }
+
+    const stopProbe = (): void => {
+      if (probeTimer !== 0) window.clearTimeout(probeTimer)
+      probeTimer = 0
+    }
+    /** End the estimated lift AND close the keyboard (blur), keeping the two
+     * in one coherent state. Only ever called while an estimate is active, so
+     * healthy environments never feel it. */
+    const retract = (): void => {
+      stopProbe()
+      if (estimate !== 0) {
+        estimate = 0
+        sync()
+      }
+      const el = document.activeElement
+      if (composerTextarea(el) && el instanceof HTMLElement) el.blur()
+    }
+    /** True when a touch outside the composer means "the reader moved on". */
+    const outside = (target: EventTarget | null): boolean =>
+      estimate !== 0 && target instanceof Element && target.closest(COMPOSER) === null
+    const onPointerDown = (event: PointerEvent): void => {
+      if (event.pointerType === 'touch') lastTouch = Date.now()
+      // An invisible keyboard also closes invisibly (system back / the IME's
+      // own collapse chevron keep the textarea focused), so blur alone cannot
+      // end the estimate. A tap OR a scroll outside the composer is the
+      // reader moving on — retract and dismiss the keyboard together, the
+      // same gesture mainstream chat apps use.
+      // ponytail: collapse-then-just-read keeps the lift until the next
+      // touch; a real close signal does not exist in this class.
+      if (outside(event.target)) retract()
+    }
+    const onTouchMove = (event: TouchEvent): void => {
+      if (outside(event.target)) retract()
+    }
+    const onFocusIn = (event: FocusEvent): void => {
+      if (!composerTextarea(event.target)) return
+      // Focus not born from a touch (hardware keyboard, programmatic) raises
+      // no on-screen keyboard — never estimate for it.
+      if (Date.now() - lastTouch > 1000) return
+      stopProbe()
+      // A browser already convicted by an earlier probe lifts right away —
+      // the probe below still runs and revokes the verdict if the viewport
+      // turns out to react after all.
+      if (localStorage.getItem(DUMB_KEY) === '1') {
+        estimate = estimatedLift(window.innerHeight)
+        sync()
+      }
+      const h0 = viewport.height
+      const t0 = viewport.offsetTop
+      const i0 = window.innerHeight
+      const deadline = Date.now() + PROBE_TOTAL_MS
+      const moved = (): boolean =>
+        Math.abs(viewport.height - h0) >= PROBE_EPSILON_PX
+        || Math.abs(viewport.offsetTop - t0) >= PROBE_EPSILON_PX
+        || Math.abs(window.innerHeight - i0) >= PROBE_EPSILON_PX
+      const step = (): void => {
+        probeTimer = 0
+        if (moved()) {
+          // The browser can see this keyboard: the geometric path owns the
+          // reveal. Drop any stale verdict and estimated lift.
+          localStorage.removeItem(DUMB_KEY)
+          if (estimate !== 0) {
+            estimate = 0
+            sync()
+          }
+          return
+        }
+        if (Date.now() < deadline) {
+          probeTimer = window.setTimeout(step, PROBE_INTERVAL_MS)
+          return
+        }
+        // Keyboard is up (touch focus on a phone) yet the viewport never
+        // reacted: the browser cannot see it. Estimate until blur, and
+        // remember the verdict so the next focus skips the wait.
+        if (!composerTextarea(document.activeElement)) return
+        localStorage.setItem(DUMB_KEY, '1')
+        estimate = estimatedLift(window.innerHeight)
+        sync()
+      }
+      probeTimer = window.setTimeout(step, PROBE_INTERVAL_MS)
+    }
+    const onFocusOut = (event: FocusEvent): void => {
+      if (!composerTextarea(event.target)) return
+      stopProbe()
+      if (estimate === 0) return
+      estimate = 0
+      sync()
+    }
+
+    const attach = (): void => {
+      if (attached) return
+      attached = true
+      viewport.addEventListener('resize', schedule)
+      viewport.addEventListener('scroll', schedule)
+      document.addEventListener('pointerdown', onPointerDown, { capture: true, passive: true })
+      document.addEventListener('touchmove', onTouchMove, { capture: true, passive: true })
+      document.addEventListener('focusin', onFocusIn, true)
+      document.addEventListener('focusout', onFocusOut, true)
+      sync()
+    }
+    const detach = (): void => {
+      if (!attached) return
+      attached = false
+      viewport.removeEventListener('resize', schedule)
+      viewport.removeEventListener('scroll', schedule)
+      document.removeEventListener('pointerdown', onPointerDown, true)
+      document.removeEventListener('touchmove', onTouchMove, true)
+      document.removeEventListener('focusin', onFocusIn, true)
+      document.removeEventListener('focusout', onFocusOut, true)
+      stopProbe()
+      if (frame !== 0) cancelAnimationFrame(frame)
+      frame = 0
+      applied = 0
+      estimate = 0
+      baseline = 0
+      root.style.removeProperty(LIFT_VAR)
+      root.removeAttribute(LIFT_ATTR)
+    }
+
+    if (narrow.matches) attach()
+    const onChange = (event: MediaQueryListEvent): void => (event.matches ? attach() : detach())
+    narrow.addEventListener('change', onChange)
+    return () => {
+      narrow.removeEventListener('change', onChange)
+      detach()
+    }
+  }, 'dsh-mobile-nav: composer keyboard avoid')
+}

package/src/client/effects/turn-fold.ts

@@ -4,6 +4,41 @@ import { NS } from '../locales.ts'
 /** Phone breakpoint — same query every phone-only effect in this plugin uses. */
 const PHONE_QUERY = '(max-width: 767px)'
 
+/** Desktop fold (issue #2) is switched on either way:
+ * - plugin row `config.turnFoldDesktop: true` — the host republishes it at
+ *   {@link CLIENT_CONFIG_ROUTE} because the client bundle ships statically
+ *   and never sees the row config;
+ * - per-browser override, same convention as the debug flag: a URL param
+ *   writes localStorage (`?mobile-nav-turn-fold=1` opts this browser in,
+ *   `=0` opts back out). */
+const DESKTOP_KEY = 'dsh-mobile-nav.turn-fold-desktop'
+const DESKTOP_PARAM = 'mobile-nav-turn-fold'
+/** Root attribute the stylesheet keys the width-independent rules on. */
+const DESKTOP_ATTR = 'data-mnav-desktop-fold'
+/** Mirror of src/index.ts CLIENT_CONFIG_ROUTE (client tsconfig cannot reach it). */
+const CLIENT_CONFIG_ROUTE = '/_dsh/mobile-nav/client-config'
+
+/** Read (and, when the URL param is present, persist) the per-browser opt-in. */
+function desktopOptIn(): boolean {
+  const param = new URLSearchParams(location.search).get(DESKTOP_PARAM)
+  if (param === '1') localStorage.setItem(DESKTOP_KEY, '1')
+  else if (param === '0') localStorage.removeItem(DESKTOP_KEY)
+  return localStorage.getItem(DESKTOP_KEY) === '1'
+}
+
+/** True when the plugin row asks for desktop fold; false on any failure. */
+async function desktopConfigured(): Promise<boolean> {
+  try {
+    const res = await fetch(CLIENT_CONFIG_ROUTE, { cache: 'no-store' })
+    if (!res.ok) return false
+    const body: unknown = await res.json()
+    return typeof body === 'object' && body !== null
+      && (body as { turnFoldDesktop?: unknown }).turnFoldDesktop === true
+  } catch {
+    return false
+  }
+}
+
 /** ChatView's flow column (dsh-client-ui-conversation lib/client.js:5512).
  * Trajectory and every other view render their own tree and never carry this
  * marker, so scoping here is what keeps this effect Chat-only. */
@@ -116,7 +151,9 @@ function groupsOf(flow: Element): readonly Group[] {
 }
 
 /**
- * S8 — collapse a turn's process into one summary row (< 768px only).
+ * S8 — collapse a turn's process into one summary row (< 768px by default;
+ * every width when the plugin row sets `config.turnFoldDesktop` or a browser
+ * opts itself in via `?mobile-nav-turn-fold=1`).
  *
  * Route taken: DOM marking, not the `conversation.chat.node` keyed slot.
  * That slot dispatches on node kind and a second registration at a key
@@ -258,12 +295,32 @@ export function installTurnFold(ctx: ClientContext): void {
       clear()
     }
 
-    if (narrow.matches) attach()
     const onChange = (event: MediaQueryListEvent): void => (event.matches ? attach() : detach())
+    let disposed = false
+    let desktop = false
+    /** Attach at every width and drop the breakpoint listener — the
+     * stylesheet's html[DESKTOP_ATTR] rules take over from the phone media
+     * query. Idempotent: the config answer and the local opt-in may both
+     * ask for it. */
+    const enableDesktop = (): void => {
+      if (desktop || disposed) return
+      desktop = true
+      document.documentElement.setAttribute(DESKTOP_ATTR, '')
+      narrow.removeEventListener('change', onChange)
+      attach()
+    }
+
+    if (narrow.matches) attach()
     narrow.addEventListener('change', onChange)
+    if (desktopOptIn()) enableDesktop()
+    // The row config arrives async; a late enable just attaches then. Not
+    // awaited before phone attach — folding must not wait on a round-trip.
+    else void desktopConfigured().then((on) => (on ? enableDesktop() : undefined))
     // A language switch changes the chip copy of every already-rendered turn.
     const stopLocale = ctx.locale.subscribe(schedule)
     return () => {
+      disposed = true
+      document.documentElement.removeAttribute(DESKTOP_ATTR)
       narrow.removeEventListener('change', onChange)
       stopLocale()
       detach()

package/src/client/index.tsx

@@ -18,6 +18,7 @@ import { installTurnFold } from './effects/turn-fold.ts'
 import { installModalBack } from './effects/modal-back.ts'
 import { installWelcomeNoticeOptOut } from './effects/welcome-notice.ts'
 import { installKeyboardGuard } from './effects/keyboard-guard.ts'
+import { installKeyboardAvoid } from './effects/keyboard-avoid.ts'
 import { NS, en, zh } from './locales.ts'
 import type { MobileNavKey } from './locales.ts'
 
@@ -92,6 +93,11 @@ export function apply(ctx: ClientContext): void {
   // user tapped the composer (or typed) themselves.
   installKeyboardGuard(ctx)
 
+  // S10: when the keyboard shrinks the visual viewport but the browser fails
+  // to reveal the focused composer (issue #1 的「视口缩了页面没跟上」类环境),
+  // translate the composer up by the occluded band. Inert everywhere else.
+  installKeyboardAvoid(ctx)
+
   // Page-stack store (apply world) — created before any registration so
   // every slot below (the phone home screen, the session header's back
   // button) shares the exact same handle/instance.

package/src/client/styles/composer.css.ts

@@ -513,6 +513,21 @@ export const COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- *
   [data-slot="conversation.composer.bar"] > [class$="_root"] {
     padding-bottom: clamp(8px, var(--mnav-sab), 16px) !important;
   }
+
+  /* S10 keyboard avoid: effects/keyboard-avoid.ts mirrors the band of the
+     layout viewport hidden behind the software keyboard into --mnav-kb-lift
+     and stamps the html attribute while (and only while) it is non-zero —
+     a resting transform, even translateY(0), would silently become the
+     containing block for any fixed-position descendant of the bar. In every
+     environment where the browser's own focus-reveal works the attribute is
+     simply never set.
+     The target is the slot's _root CHILD, not the slot wrapper: the wrapper
+     is display:contents — it generates no box, so a transform on it is a
+     silent no-op (found live on-device via CDP, 2026-08-21; the variable and
+     attribute were set and nothing moved). */
+  html[data-mnav-kb] [data-slot="conversation.composer.bar"] > [class$="_root"] {
+    transform: translateY(calc(-1 * var(--mnav-kb-lift, 0px)));
+  }
 }
 
 /* The attachment button and its preview row only exist for the phone shell.

package/src/client/styles/turn-fold.css.ts

@@ -1,26 +1,22 @@
 // turn-fold — the folded turn process and its summary row (S8, 2026-08-17).
-// Everything that can hide content lives inside (max-width: 767px); the two
-// markers this file reads (data-mnav-fold on a process element,
+// Everything that can hide content lives inside (max-width: 767px) OR behind
+// html[data-mnav-desktop-fold] (the per-browser desktop opt-in, issue #2);
+// the two markers this file reads (data-mnav-fold on a process element,
 // data-mobile-nav="turn-fold" on the injected summary row) are only ever
-// written by effects/turn-fold.ts, which detaches and wipes them at >= 768px
-// — so tablet and desktop are a no-op twice over, by attribute and by media
-// query. Appended last in styles/index.ts; it shares no selector with any
-// other file, the position just keeps the "phone files come after the shared
+// written by effects/turn-fold.ts, which detaches and wipes them when it is
+// not active — so a non-opted-in tablet/desktop is a no-op twice over, by
+// attribute and by scope. The rule block is authored once and emitted twice
+// (phone media query / desktop attribute scope) so the two can never drift.
+// Appended last in styles/index.ts; it shares no selector with any other
+// file, the position just keeps the "phone files come after the shared
 // <=1023px block" ordering intact.
 
-export const TURN_FOLD_CSS = `/* ---------- turn process fold (< 768px) ---------- */
-
-/* The summary row never paints outside the phone breakpoint, even if a
-   media-query change raced the effect's own cleanup. */
-[data-mobile-nav="turn-fold"] {
-  display: none;
-}
-
-@media (max-width: 767px) {
+/** The fold + chip rules, with every selector prefixed by `scope`. */
+const rules = (scope: string): string => `
   /* Folded process: tool-call / context / command rows and the Think
      disclosures inside an assistant step. !important because the official
      flow item and ReasoningRow both set their own display. */
-  [data-mnav-fold]:not([data-mnav-fold-open]) {
+  ${scope} [data-mnav-fold]:not([data-mnav-fold-open]) {
     display: none !important;
   }
 
@@ -30,7 +26,7 @@ export const TURN_FOLD_CSS = `/* ---------- turn process fold (< 768px) --------
      column with gap: 16px (ChatView.module.css) — align-self keeps the chip
      from stretching, and the negative block margin trims that generous gap
      back to something a 26px row can live in. */
-  [data-chat-flow] > [data-mobile-nav="turn-fold"] {
+  ${scope} [data-chat-flow] > [data-mobile-nav="turn-fold"] {
     display: inline-flex;
     align-self: flex-start;
     align-items: center;
@@ -49,14 +45,14 @@ export const TURN_FOLD_CSS = `/* ---------- turn process fold (< 768px) --------
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
   }
-  [data-chat-flow] > [data-mobile-nav="turn-fold"]:active {
+  ${scope} [data-chat-flow] > [data-mobile-nav="turn-fold"]:active {
     background: var(--dsw-alias-interactive-bg-pressed, rgba(0, 0, 0, .1));
   }
 
   /* Leading dot: idle turns get a quiet mark, a running turn gets the same
      business-primary colour the session header's own status dot uses
      (styles/header.css.ts) plus a breathing pulse. */
-  [data-chat-flow] > [data-mobile-nav="turn-fold"]::before {
+  ${scope} [data-chat-flow] > [data-mobile-nav="turn-fold"]::before {
     content: '';
     flex: none;
     width: 6px;
@@ -65,7 +61,7 @@ export const TURN_FOLD_CSS = `/* ---------- turn process fold (< 768px) --------
     background: currentColor;
     opacity: .45;
   }
-  [data-chat-flow] > [data-mobile-nav="turn-fold"][data-running]::before {
+  ${scope} [data-chat-flow] > [data-mobile-nav="turn-fold"][data-running]::before {
     background: var(--dsw-alias-state-business-primary, #4f6ef7);
     opacity: 1;
     animation: dsh-mobile-nav-breathe 1.4s var(--ds-ease-in-out, ease-in-out) infinite;
@@ -73,7 +69,7 @@ export const TURN_FOLD_CSS = `/* ---------- turn process fold (< 768px) --------
 
   /* Chevron drawn from two borders — no icon injection, no mask image, and
      it rotates to point up once the turn is open. */
-  [data-chat-flow] > [data-mobile-nav="turn-fold"]::after {
+  ${scope} [data-chat-flow] > [data-mobile-nav="turn-fold"]::after {
     content: '';
     flex: none;
     width: 5px;
@@ -84,21 +80,36 @@ export const TURN_FOLD_CSS = `/* ---------- turn process fold (< 768px) --------
     transform: rotate(45deg);
     transition: transform .16s var(--ds-ease-out, ease-in-out);
   }
-  [data-chat-flow] > [data-mobile-nav="turn-fold"][data-open]::after {
+  ${scope} [data-chat-flow] > [data-mobile-nav="turn-fold"][data-open]::after {
     margin-top: 3px;
     transform: rotate(-135deg);
   }
 
   @media (prefers-reduced-motion: reduce) {
-    [data-chat-flow] > [data-mobile-nav="turn-fold"][data-running]::before {
+    ${scope} [data-chat-flow] > [data-mobile-nav="turn-fold"][data-running]::before {
       animation: none;
     }
-    [data-chat-flow] > [data-mobile-nav="turn-fold"]::after {
+    ${scope} [data-chat-flow] > [data-mobile-nav="turn-fold"]::after {
       transition: none;
     }
   }
+`
+
+export const TURN_FOLD_CSS = `/* ---------- turn process fold (< 768px, or desktop opt-in) ---------- */
+
+/* The summary row never paints outside its active scope, even if a
+   media-query change raced the effect's own cleanup. */
+[data-mobile-nav="turn-fold"] {
+  display: none;
 }
 
+@media (max-width: 767px) {${rules('')}}
+
+/* Desktop opt-in: the exact same block, keyed on the root attribute
+   effects/turn-fold.ts sets for a browser opted in via
+   ?mobile-nav-turn-fold=1 — active at every width. */
+${rules('html[data-mnav-desktop-fold]')}
+
 @keyframes dsh-mobile-nav-breathe {
   0%, 100% { opacity: 1; transform: scale(1); }
   50% { opacity: .4; transform: scale(.72); }

package/src/index.ts

@@ -26,6 +26,11 @@ import type {} from '@deepseek-ai/dsh-session'
 /** Exact route the phone composer POSTs one file body to. */
 export const UPLOAD_ROUTE = '/_dsh/mobile-nav/upload'
 
+/** Exact route the browser GETs the plugin row's client-facing knobs from.
+ * The client bundle ships statically and never sees the row config, so the
+ * host republishes the client-relevant subset here (issue #2). */
+export const CLIENT_CONFIG_ROUTE = '/_dsh/mobile-nav/client-config'
+
 /** Workspace-relative directory uploads land in (also the `@` prefix the composer inserts). */
 export const UPLOAD_DIR = '.dsh-uploads'
 
@@ -38,10 +43,14 @@ const MAX_NAME_BYTES = 180
 /** Distinct leaf names tried before a collision is given up on. */
 const MAX_COLLISION_TRIES = 100
 
-/** Host half config; the only knob is the body cap. */
+/** Host half config. */
 export interface MobileNavConfig {
   /** Max upload body in bytes; larger bodies get 413. Default {@link DEFAULT_MAX_UPLOAD_BYTES}. */
   maxUploadBytes?: number
+  /** Fold each turn's process at every viewport width, not just below the
+   * phone breakpoint. Default false (phone-only). A browser can still opt
+   * itself in via `?mobile-nav-turn-fold=1` when this is off. */
+  turnFoldDesktop?: boolean
 }
 
 /**
@@ -340,4 +349,20 @@ export function apply(ctx: Context, config: MobileNavConfig = {}): void {
       handler: (req, res) => handleUpload(webCtx, maxBytes, req, res),
     }), 'dsh-mobile-nav: upload route')
   })
+  // Needs only the webServer: the client-config route must exist even in a
+  // composition without live sessions.
+  ctx.inject(['webServer'], (webCtx) => {
+    webCtx.effect(() => webCtx.webServer.register({
+      kind: 'exact',
+      path: CLIENT_CONFIG_ROUTE,
+      handler: (req, res) => {
+        if (req.method !== 'GET') {
+          res.setHeader('Allow', 'GET')
+          responseJson(res, 405, { ok: false, error: { code: 'method-not-allowed', message: 'Use GET' } })
+          return
+        }
+        responseJson(res, 200, { turnFoldDesktop: config.turnFoldDesktop === true })
+      },
+    }), 'dsh-mobile-nav: client config route')
+  })
 }