dsh-zen-remote 1.0.0 → 1.0.2

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

@@ -0,0 +1,121 @@
+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)'
+
+/** The official composer slot wrapper (same marker composer.css.ts styles). */
+const COMPOSER = '[data-slot="conversation.composer.bar"]'
+
+/** A tap/keystroke older than this no longer explains a focus. */
+const INTENT_WINDOW_MS = 1000
+
+/**
+ * S9 — keep the phone keyboard down until the user asks for it.
+ *
+ * dsh-client-ui-conversation focuses the composer textarea on every
+ * sessionId change (lib/client.js:3423 — el.focus({preventScroll:true}) in a
+ * [locked, sessionId] effect). Sensible on desktop; on a phone it pops the
+ * software keyboard over half the screen every time a session opens.
+ *
+ * Rule: focus on the composer textarea survives only when the user asked for
+ * it — a tap on the textarea itself or typing on a hardware keyboard.
+ * Anything else (session-open autofocus, push-deep-link opens, the refocus
+ * side effects of the other composer buttons — slash-command toggle, attach,
+ * send) is blurred.
+ *
+ * Two triggers, because one is not enough:
+ * - focusin catches the autofocus the moment it happens;
+ * - a body MutationObserver re-runs the check after transcript swaps
+ *   (opening a session re-renders the flow but may reuse the same textarea,
+ *   and a focus that landed before this plugin loaded never fired focusin
+ *   for us at all).
+ * Once focus is user-granted it stays granted until the textarea blurs, so
+ * the observer never yanks a keyboard the user opened (e.g. while the agent
+ * streams and the user pauses typing).
+ */
+export function installKeyboardGuard(ctx: ClientContext): void {
+  ctx.effect(() => {
+    const narrow = window.matchMedia(PHONE_QUERY)
+    let lastIntent = 0
+    let granted = false
+    let observer: MutationObserver | null = null
+    let frame = 0
+
+    const composerTextarea = (node: unknown): HTMLElement | null =>
+      node instanceof HTMLElement && node.tagName === 'TEXTAREA' && node.closest(COMPOSER) !== null
+        ? node
+        : null
+
+    const onPointerDown = (event: PointerEvent): void => {
+      // Only the textarea itself grants the keyboard. A tap on any other
+      // composer control (slash-command toggle, attach, model menu, send)
+      // must not: several of them refocus the input as a side effect, which
+      // popped the keyboard on every command-button tap.
+      if (composerTextarea(event.target) !== null) {
+        lastIntent = Date.now()
+        granted = true
+      }
+    }
+    const onKeyDown = (): void => {
+      lastIntent = Date.now()
+      if (composerTextarea(document.activeElement) !== null) granted = true
+    }
+    const sweep = (): void => {
+      const el = composerTextarea(document.activeElement)
+      if (el === null) return
+      if (granted || Date.now() - lastIntent < INTENT_WINDOW_MS) {
+        granted = true
+        return
+      }
+      el.blur()
+    }
+    const onFocusIn = (event: FocusEvent): void => {
+      if (composerTextarea(event.target) === null) return
+      sweep()
+    }
+    const onFocusOut = (event: FocusEvent): void => {
+      if (composerTextarea(event.target) === null) return
+      granted = false
+    }
+    const schedule = (): void => {
+      if (observer === null || frame !== 0) return
+      // setTimeout, not requestAnimationFrame: rAF pauses in hidden/
+      // backgrounded pages, where the autofocus still happens — the sweep
+      // must run there too or the keyboard pops when the page is foregrounded.
+      frame = window.setTimeout(() => {
+        frame = 0
+        sweep()
+      }, 100)
+    }
+
+    const attach = (): void => {
+      if (observer !== null) return
+      document.addEventListener('pointerdown', onPointerDown, { capture: true, passive: true })
+      document.addEventListener('keydown', onKeyDown, { capture: true, passive: true })
+      document.addEventListener('focusin', onFocusIn, true)
+      document.addEventListener('focusout', onFocusOut, true)
+      observer = new MutationObserver(schedule)
+      observer.observe(document.body, { childList: true, subtree: true })
+      sweep()
+    }
+    const detach = (): void => {
+      document.removeEventListener('pointerdown', onPointerDown, true)
+      document.removeEventListener('keydown', onKeyDown, true)
+      document.removeEventListener('focusin', onFocusIn, true)
+      document.removeEventListener('focusout', onFocusOut, true)
+      observer?.disconnect()
+      observer = null
+      if (frame !== 0) window.clearTimeout(frame)
+      frame = 0
+      granted = false
+    }
+
+    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 guard')
+}

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

@@ -160,11 +160,13 @@ export function installTurnFold(ctx: ClientContext): void {
       const running = flow.querySelector(':scope > [role="status"]') !== null
       const groups = groupsOf(flow)
       const live = new Set<string>()
+      const liveItems = new Set<Element>()
 
       groups.forEach((group, index) => {
         if (group.items.length === 0) return
         const open = expanded.has(group.key)
         for (const item of group.items) {
+          liveItems.add(item)
           item.setAttribute(FOLD, '')
           if (open) item.setAttribute(OPEN, '')
           else item.removeAttribute(OPEN)
@@ -189,6 +191,18 @@ export function installTurnFold(ctx: ClientContext): void {
         const key = chip.dataset['foldGroup']
         if (key === undefined || !live.has(key)) chip.remove()
       }
+
+      // Unmark elements that stopped being process items. Without this, an
+      // assistant-step row folded whole while it streamed ONLY reasoning kept
+      // its row-level fold after prose started arriving in the same DOM node
+      // (React updates the row in place), hiding the streaming reply until a
+      // completion re-render rebuilt the row — the "reply only appears when
+      // the turn finishes" phone bug (2026-08-18).
+      for (const stale of flow.querySelectorAll(`[${FOLD}]`)) {
+        if (liveItems.has(stale)) continue
+        stale.removeAttribute(FOLD)
+        stale.removeAttribute(OPEN)
+      }
     }
 
     const schedule = (): void => {

package/src/client/effects/welcome-notice.ts

@@ -0,0 +1,66 @@
+import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
+
+/** Per-browser opt-out flag; localStorage because remote (non-loopback)
+    connections never persist the acknowledgement host-side. */
+const OPTOUT_KEY = 'dsh-zen-remote:welcome-notice-optout'
+
+/** Localized aria-labels of the DSH first-run notice dialog
+    (@deepseek-ai/dsh-client-ui-settings-models WELCOME_NOTICE_COPY). */
+const NOTICE_LABELS = ['内测声明', 'Internal Testing Notice']
+
+/**
+ * "内测声明" first-run notice, opt-out half (ALL widths — same user-directed
+ * exception as the _previewBadge rule in styles/base.css.ts).
+ *
+ * Why not CSS: the notice dialog keeps document #root inert while MOUNTED and
+ * only restores it on unmount (its acknowledge button). display:none hid the
+ * dialog without unmounting it, which left the whole app permanently
+ * unclickable on remote connections (2026-08-18 incident) — remote browsers
+ * re-mount the notice on every page load because their acknowledgement is
+ * memory-only (`connection.isLoopback ? "host" : "memory"` upstream).
+ *
+ * So the dialog now shows normally, plus one injected "不再弹出" button. The
+ * user chooses: acknowledging via that button records the opt-out in this
+ * browser's localStorage, and later mounts are auto-acknowledged by clicking
+ * the dialog's own continue button — the component unmounts through its
+ * normal path and #root's inert is properly restored.
+ */
+export function installWelcomeNoticeOptOut(ctx: ClientContext): void {
+  ctx.effect(() => {
+    const handle = (dialog: HTMLElement): void => {
+      // The notice's action row holds exactly one button ("继续"/"Continue").
+      const continueBtn = dialog.querySelector('button')
+      if (continueBtn === null) return
+      if (localStorage.getItem(OPTOUT_KEY) !== null) {
+        continueBtn.click()
+        return
+      }
+      const row = continueBtn.parentElement
+      if (row === null || row.querySelector('.zen-welcome-optout') !== null) return
+      const optOut = document.createElement('button')
+      optOut.type = 'button'
+      optOut.className = 'zen-welcome-optout'
+      optOut.textContent =
+        dialog.getAttribute('aria-label') === '内测声明' ? '不再弹出' : "Don't show again"
+      optOut.addEventListener('click', () => {
+        localStorage.setItem(OPTOUT_KEY, '1')
+        continueBtn.click()
+      })
+      row.insertBefore(optOut, continueBtn)
+    }
+    const scan = (): void => {
+      for (const label of NOTICE_LABELS) {
+        const dialog = document.querySelector<HTMLElement>(
+          `[role="dialog"][aria-label="${label}"]`,
+        )
+        if (dialog !== null) handle(dialog)
+      }
+    }
+    // The dialog portals straight under <body>, so childList on body is
+    // enough; scan() once first in case it mounted before this plugin loaded.
+    scan()
+    const observer = new MutationObserver(scan)
+    observer.observe(document.body, { childList: true })
+    return () => observer.disconnect()
+  }, 'dsh-mobile-nav: welcome-notice opt-out')
+}

package/src/client/index.tsx

@@ -15,6 +15,8 @@ import { installAionuiCompat } from './effects/aionui-compat.ts'
 import { installHeaderStatusDot } from './effects/header-status.ts'
 import { installGestures } from './effects/gestures.ts'
 import { installTurnFold } from './effects/turn-fold.ts'
+import { installWelcomeNoticeOptOut } from './effects/welcome-notice.ts'
+import { installKeyboardGuard } from './effects/keyboard-guard.ts'
 import { NS, en, zh } from './locales.ts'
 import type { MobileNavKey } from './locales.ts'
 
@@ -78,6 +80,16 @@ export function apply(ctx: ClientContext): void {
   // not carry this.
   installTurnFold(ctx)
 
+  // "内测声明" first-run notice: keep it visible (CSS-hiding it leaked the
+  // dialog's #root inert lock — see effects/welcome-notice.ts) and offer a
+  // per-browser "不再弹出" opt-out instead.
+  installWelcomeNoticeOptOut(ctx)
+
+  // S9: opening a session must not pop the phone keyboard — the official
+  // composer autofocuses on every sessionId change; keep focus only when the
+  // user tapped the composer (or typed) themselves.
+  installKeyboardGuard(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/base.css.ts

@@ -145,23 +145,38 @@ export const BASE_CSS = `
   }
 }
 
-/* ---------- beta-notice suppression (ALL widths — deliberate exception) ----
-   User-directed (2026-08-17): hide DSH's beta/preview notices everywhere,
-   including desktop. This is the ONE place this plugin intentionally breaks
-   its own ">=1024px strict no-op" rule — do not "fix" it back.
-   Selector notes:
+/* ---------- beta-notice handling (ALL widths — deliberate exception) ----
+   User-directed (2026-08-17): tone down DSH's beta/preview notices
+   everywhere, including desktop. This is the ONE place this plugin
+   intentionally breaks its own ">=1024px strict no-op" rule.
    - The hero "预览版" badge only carries a hashed class; per repo convention
      the stable part is the suffix (_previewBadge), matched with [class$=].
-   - The first-run "内测声明" modal is hidden via its ARIA label. The label is
-     LOCALIZED — zh is covered; if the UI runs in another language the dialog
-     shows (harmless, dismiss by hand). Hiding targets the presentation
-     wrapper via :has() so the modal's backdrop cannot linger invisibly and
-     block taps; the app never requires acknowledging this dialog to work. */
+   - The first-run "内测声明" modal must NOT be hidden with CSS: while it is
+     mounted it holds document #root inert, so display:none leaves the whole
+     app unclickable (2026-08-18 incident). effects/welcome-notice.ts instead
+     injects a "不再弹出" opt-out button; this styles it. */
 [class$="_previewBadge"] {
   display: none !important;
 }
-[role="presentation"]:has(> [role="dialog"][aria-label="内测声明"]),
-[role="dialog"][aria-label="内测声明"] {
-  display: none !important;
+/* Mirrors the official primitives Button (md capsule, outline variant):
+   36px height, 18px radius, --dsw-alias-border-l2 hairline. */
+.zen-welcome-optout {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  padding: 0 14px;
+  margin-right: 8px;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, .15));
+  border-radius: 18px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary, inherit);
+  font-size: 14px;
+  line-height: 22px;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.zen-welcome-optout:hover {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, .06));
 }
 `

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

@@ -88,10 +88,14 @@ export const CHIPS_CSS = `/* ---------- chips row + settings entry (S5) --------
   }
 
   /* Plugin-entry chips row: one horizontally-scrolling line of 34px pills
-     between the workspace title and the session list (prototype spec). A
-     thin scrollbar is the overflow affordance (AGENTS.md: an early
-     no-scrollbar version silently cut off the last tab with no way to
-     discover more content). */
+     between the workspace title and the session list (prototype spec).
+     Scrollbar hidden on BOTH engines (2026-08-18 user decision): iOS
+     overlay scrollbars never showed anyway, but desktop browsers painted a
+     permanent 2px strip under the pills. This revisits the AGENTS.md
+     "silently cut off the last tab" lesson deliberately — with 4+ chips the
+     row now always overflows mid-chip (a partially visible pill is the
+     scroll affordance), unlike the early incident where the chips fit
+     flush and the hidden overflow was undiscoverable. */
   [data-mobile-nav="chip-row"] {
     flex: 0 0 auto;
     display: flex;
@@ -101,14 +105,10 @@ export const CHIPS_CSS = `/* ---------- chips row + settings entry (S5) --------
     overflow-x: auto;
     overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
-    scrollbar-width: thin;
+    scrollbar-width: none;
   }
   [data-mobile-nav="chip-row"]::-webkit-scrollbar {
-    height: 2px;
-  }
-  [data-mobile-nav="chip-row"]::-webkit-scrollbar-thumb {
-    background: var(--dsw-alias-border-l2, rgba(0, 0, 0, .16));
-    border-radius: 2px;
+    display: none;
   }
   [data-mobile-nav="chip"],
   [data-mobile-nav="chip-more"] {

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

@@ -678,4 +678,55 @@ export const COMPAT_CSS = `  /* ---------- dsh-web-ui family compatibility -----
       background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, .06));
     }
   }
+
+  /* ---------- dsh-agent-teams: phone floater reposition (2026-08-18) ----------
+     THIRD-PARTY COMPAT RULE — @nanmicoder/dsh-agent-teams (the AgentTeams
+     activity floater: a collapsed badge + expandable panel, body-portaled
+     under its own mount marker div[data-agent-teams-host]). Its own CSS
+     fixes both at top:56px (<=640px) viewport coordinates and never reads
+     env(safe-area-inset-*), so on a notched iPhone the badge lands INSIDE
+     the safe-area + this plugin's 76px session header band — overlapping
+     the info and workbench buttons (real-device report, 2026-08-18).
+     Move both below the header instead: safe-area + 76px header chrome
+     (48px title row + 28px view-switch row, header.css.ts) + 8px gap.
+     Anchored on the plugin's own mount marker + class-suffix selectors per
+     this repo's hashed-class convention — when dsh-agent-teams is not
+     installed the marker never exists and this whole section is inert
+     (same presence-gating as the dsh-better-sidebar rules above).
+     !important because their positions come from html-level CSS vars
+     (--agent-teams-panel-top et al.) whose style tag order vs ours is not
+     guaranteed. z-index: their 2147483000 would float the badge over every
+     one of this plugin's own overlays (drawer 40, info sheet 55-57, close
+     pill 70); 30 keeps it above content but below all of them. */
+  @media (max-width: 767px) {
+    [data-agent-teams-host] [class$="_badge"],
+    [data-agent-teams-host] [class$="_panel"] {
+      top: calc(var(--mnav-sat) + 84px) !important;
+      right: 10px !important;
+      z-index: 30 !important;
+    }
+    [data-agent-teams-host] [class$="_panel"] {
+      left: 10px !important;
+      width: auto !important;
+      /* Their min-height:min(560px, calc(100dvh - 56 - 56)) resolves against
+         the OLD top var — on short phones it exceeds the space left below
+         the moved-down top edge and would force overflow; content-sized with
+         a hard cap replaces it. 76px bottom clearance keeps the collapsed
+         composer's top edge visible under the panel. */
+      min-height: 0 !important;
+      max-height: calc(100dvh - var(--mnav-sat) - 84px - var(--mnav-sab) - 76px) !important;
+    }
+    /* The floater belongs to the SESSION page: on the home list it hovered
+       over the session rows (user feedback, 2026-08-18). The phone page
+       stack is this plugin's own overlay — the official conversation (and
+       with it the floater's "current session") stays mounted underneath, so
+       agent-teams keeps rendering it; hide it whenever the home level is the
+       visible one (data-view flips to "session" inside a session, and the
+       badge/panel come right back). :has() is already a documented
+       requirement of this plugin (Chromium 105+, docs/interface.md). */
+    body:has([data-mobile-nav="home"][data-view="home"]) [data-agent-teams-host] [class$="_badge"],
+    body:has([data-mobile-nav="home"][data-view="home"]) [data-agent-teams-host] [class$="_panel"] {
+      display: none !important;
+    }
+  }
 `

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

@@ -0,0 +1,103 @@
+// content — chat markdown readability on phones (2026-08-18). Shares no
+// selector with any other file; appended last in styles/index.ts.
+
+export const CONTENT_CSS = `/* ---------- chat markdown content (< 768px) ---------- */
+
+@media (max-width: 767px) {
+  /* Inline code: upstream renders it display:inline-flex — an atomic inline
+     box that can never wrap across lines, so one long code span walks off
+     the right edge of the screen. Plain inline keeps the background pill
+     per line fragment and lets long tokens break anywhere. Deliberately
+     unscoped (any :not(pre) > code, not just the _markdown_ module):
+     inline code also renders outside that container (user bubbles,
+     reasoning rows), and on a phone there is no width at which an
+     unwrappable inline box is right. !important beats the upstream
+     display:inline-flex on specificity ties. */
+  :not(pre) > code {
+    display: inline !important;
+    overflow-wrap: anywhere;
+    /* iOS WebKit: overflow-wrap alone still failed to break long tokens in
+       inline code on a real iPhone (screenshot-verified 2026-08-18, li >
+       code path case) while desktop Chromium broke them fine. break-all is
+       the everywhere-supported hammer; acceptable for code pills. */
+    word-break: break-all;
+  }
+  /* Belt-and-suspenders for engines that compute soft-wrap opportunities
+     from the block container rather than the inline itself (historical
+     WebKit behavior): inherit anywhere through the whole transcript so the
+     block side agrees. Prose is untouched until something would overflow;
+     the table is already pinned wide by min-width: max-content below. */
+  [data-chat-flow],
+  [class*="_markdown_"] {
+    overflow-wrap: anywhere;
+  }
+
+  /* Markdown tables: the official _tableScroll_ wrapper is already a
+     horizontal scroll viewport around a width:max-content table, but its
+     cells are capped at min(30vw, 320px) — barely 120px on a phone, which
+     crushes every column into a vertical word-stack. Let columns size to
+     their content instead and read the overflow by scrolling the wrapper.
+     480px (not a vw cap — 85vw was ~320px on a 375px phone and still
+     wrapped mid-length cells) keeps typical cells on one line; only truly
+     prose-heavy cells wrap, instead of dragging the table kilometers
+     wide. */
+  [class*="_tableScroll_"] th,
+  [class*="_tableScroll_"] td {
+    max-width: 480px !important;
+  }
+
+  /* iOS WebKit fallback: upstream's own table { width: max-content } is what
+     keeps the table at its natural width inside the scroll wrapper, but
+     WebKit's max-content support on table boxes is incomplete — on a real
+     iPhone the table fell back to shrink-to-fit and every column got
+     crushed to its min-width (the "ra/nk" vertical-word-stack screenshot,
+     2026-08-18). Redeclare the natural-width intent with both width and
+     min-width so whichever keyword the engine honors wins; the wrapper
+     already scrolls the overflow. */
+  [class*="_tableScroll_"] table {
+    width: max-content !important;
+    min-width: max-content !important;
+    max-width: none !important;
+  }
+
+  /* Turn-tail metadata (2026-08-18): the timing stats ("18:06 · 用时 29秒 ·
+     首 token 0.9秒 · 163 tok/s") are desktop-hover-revealed (official
+     [data-time-hover-root] gate holds them at opacity 0 until :hover /
+     :focus-within) — a phone never hovers, so they were simply invisible;
+     and even ignoring that, the row is nowrap + overflow:hidden (plus this
+     plugin's own legacy ellipsis clamp in layout.css.ts), which clipped the
+     text. On phones: always visible, own full-width line under the action
+     icons, wrapping freely, one type size down. !important + the extra
+     [class$="_actions"] hop out-specifies both upstream and layout.css.ts. */
+  /* Pin the tail row's width chain before allowing wrap: with wrap enabled
+     the row's intrinsic (shrink-to-fit) width collapses to its widest
+     single icon, taking the whole tail down to ~16px. */
+  [data-chat-flow-kind="turn-tail"] [class$="_root"],
+  [data-chat-flow-kind="turn-tail"] [class$="_actions"] {
+    width: 100%;
+  }
+  [data-chat-flow-kind="turn-tail"] [class$="_actions"] {
+    flex-wrap: wrap;
+    row-gap: 2px;
+  }
+  /* Wide companion to the rule below: mirrors the upstream hover-gate
+     selector shape directly, with no assumptions about the tail's DOM
+     structure, so the stats can't stay invisible even if the phone's tail
+     renders differently than desktop. */
+  [data-time-hover-root] [class$="_timeEnd"],
+  [data-time-hover-root] [class$="_timeStart"] {
+    opacity: 1 !important;
+    transition: none !important;
+  }
+  [data-chat-flow-kind="turn-tail"] [class$="_actions"] [class$="_timeEnd"] {
+    opacity: 1 !important;
+    flex-basis: 100% !important;
+    white-space: normal !important;
+    overflow: visible !important;
+    text-overflow: clip !important;
+    padding-left: 0 !important;
+    font-size: 12px;
+    line-height: 18px;
+  }
+}
+`

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

@@ -157,21 +157,55 @@ export const HEADER_CSS = `/* ---------- session header five-piece reflow (< 768
     min-width: 0;
     overflow: hidden;
   }
-  /* Only the current session's own name is the "title" — the parent chain
-     (subagent breadcrumbs) is the "多余项" the design calls out to hide,
-     while the current segment (and its running dot, see below) stays. */
-  [data-phase] header [class$="_crumbSeg"]:not(:last-child) {
+  /* Subagent sessions keep ONE ancestor crumb (2026-08-18): the PC header
+     lets you tap the parent session's title to switch back — that affordance
+     was lost on phone when the whole parent chain was hidden as "多余项".
+     Show only the immediate parent (for agent-teams member sessions that IS
+     the captain/main session; deeper ancestors stay hidden — a 3-level chain
+     cannot fit the ~206px center column at 390px). The parent crumb is the
+     official breadcrumb <button> (dsh-client-ui-conversation renders
+     open(parentId) as its onClick), so tapping needs no JS from this plugin,
+     and main sessions (chain length 1) have no :nth-last-child(2) seg at
+     all — the centered single title is pixel-identical to before. */
+  [data-phase] header [class$="_crumbSeg"]:not(:nth-last-child(-n+2)) {
     display: none !important;
   }
+  [data-phase] header [class$="_crumbSeg"]:nth-last-child(2) {
+    display: inline-flex;
+    align-items: center;
+    flex: none;
+    min-width: 0;
+    max-width: 38%;
+  }
+  /* Ancestors BEFORE the parent seg are hidden, which would leave the
+     parent seg's own leading "/" dangling at the start of the title. */
+  [data-phase] header [class$="_crumbSeg"]:nth-last-child(2) [class$="_crumbSep"] {
+    display: none !important;
+  }
+  /* Parent crumb: small tertiary text so the 19px current title stays the
+     visual anchor; min-height keeps a finger-sized target inside the 48px
+     row. Specificity (0,4,1) outranks the shared 19px _crumb rule below. */
+  [data-phase] header [class$="_crumbSeg"]:nth-last-child(2) [class$="_crumb"] {
+    font-size: 13px;
+    font-weight: 400;
+    color: var(--dsw-alias-label-tertiary, rgba(0, 0, 0, .45));
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+    padding: 0 2px 0 6px;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+  }
   [data-phase] header [class$="_crumbSeg"]:last-child {
     display: flex;
     align-items: center;
     min-width: 0;
     max-width: 100%;
   }
-  [data-phase] header [class$="_crumbSeg"]:last-child [class$="_crumbSep"] {
-    display: none !important;
-  }
+  /* The last seg's own "/" is the divider between parent and current title —
+     it only exists when there IS an ancestor (index > 0), so it can simply
+     stay visible now that the parent seg shows. (It used to be hidden here:
+     with the parent hidden it dangled before the title.) */
   /* BOTH selectors are required: [class$=] matches the whole class
      ATTRIBUTE's suffix, and the current-session title button's attribute is
      "wSkVaW_crumb wSkVaW_crumbCurrent" — it ends in _crumbCurrent, so the _crumb

package/src/client/styles/index.ts

@@ -8,6 +8,7 @@ import { COMPOSER_CSS } from './composer.css.ts'
 import { INFO_CSS } from './info.css.ts'
 import { TURN_FOLD_CSS } from './turn-fold.css.ts'
 import { CHIPS_CSS } from './chips.css.ts'
+import { CONTENT_CSS } from './content.css.ts'
 
 /**
  * All mobile styles, concatenated in the exact order of the original
@@ -19,7 +20,8 @@ import { CHIPS_CSS } from './chips.css.ts'
  * win that tie too), the turn-process fold (turn-fold, S8, which shares no
  * selector with any of them), and finally the chips row / settings entry /
  * portal fix (chips, S5) — all appended in this order so their <768px rules
- * win ties against the shared <=1023px block. Injected as ONE
- * <style data-plugin> tag — do not reorder.
+ * win ties against the shared <=1023px block, then the chat markdown
+ * readability overrides (content, which shares no selector with any of
+ * them). Injected as ONE <style data-plugin> tag — do not reorder.
  */
-export const MOBILE_CSS = [BASE_CSS, LAYOUT_CSS, COMPAT_CSS, MISC_CSS, HOME_CSS, HEADER_CSS, COMPOSER_CSS, INFO_CSS, TURN_FOLD_CSS, CHIPS_CSS].join('\n')
+export const MOBILE_CSS = [BASE_CSS, LAYOUT_CSS, COMPAT_CSS, MISC_CSS, HOME_CSS, HEADER_CSS, COMPOSER_CSS, INFO_CSS, TURN_FOLD_CSS, CHIPS_CSS, CONTENT_CSS].join('\n')