dsh-zen-remote 1.0.0

package/src/client/MobileNavOverlay.tsx

@@ -0,0 +1,279 @@
+import { useEffect, useLayoutEffect, useState } from 'react'
+import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import { IconPanelLeftOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import { NS } from './locales.ts'
+
+/** 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)'
+
+/**
+ * The tablet range, where the sidebar is still a drawer. Below 768px the
+ * phone app shell (MobileHome) replaced the drawer entirely — the sidebar is
+ * display:none there, so every drawer affordance below (backdrop, floating
+ * opener, Escape, close-on-navigate) would operate an invisible panel.
+ */
+const TABLET_QUERY = '(min-width: 768px) and (max-width: 1023px)'
+
+/**
+ * Live matchMedia hook.
+ * @param query - the media query to follow.
+ * @returns whether it currently matches.
+ */
+function useMedia(query: string): boolean {
+  const [matches, setMatches] = useState(() => window.matchMedia(query).matches)
+  useEffect(() => {
+    const list = window.matchMedia(query)
+    const onChange = (event: MediaQueryListEvent) => setMatches(event.matches)
+    setMatches(list.matches)
+    list.addEventListener('change', onChange)
+    return () => list.removeEventListener('change', onChange)
+  }, [query])
+  return matches
+}
+
+/** 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 = useMedia(MOBILE_QUERY)
+  const tablet = useMedia(TABLET_QUERY)
+  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')
+      frame.removeAttribute('data-mobile-preview-full')
+    }
+  }, [mobile])
+
+  // The floating button is a fallback for surfaces without a session header:
+  // phase "active" means the header (and its toggle) is rendered already.
+  // Tablet only — on a phone the home screen owns navigation.
+  useEffect(() => {
+    if (!tablet) {
+      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()
+  }, [tablet])
+
+  // Escape closes the drawer — but yields to an open modal dialog (e.g. the
+  // settings panel), which owns its own Escape handling.
+  useEffect(() => {
+    if (!tablet || !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)
+  }, [tablet, 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. Capture phase — the drawer closes before the
+  // shell or a plugin processes the click, so takeover panels never render
+  // under the open drawer.
+  //
+  // 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 chevrons, the logo: pure UI toggles, not navigation.
+  // - Anything while a modal dialog is open: the dialog owns the screen.
+  useEffect(() => {
+    if (!tablet || !open) return
+    const onDrawerClick = (event: MouseEvent) => {
+      if (document.querySelector('[aria-modal="true"]') !== null) return
+      const target = event.target as HTMLElement | null
+      if (target === null) return
+      const drawer = document.querySelector<HTMLElement>('[data-mobile-nav="frame"] > :first-child')
+      if (drawer === null || !drawer.contains(target)) return
+      // A session row's own action buttons — the "Session actions" kebab
+      // (delete / rename), revealed on hover / long-press — open an edit
+      // menu. Tapping one must NOT count as tapping the row, or the drawer
+      // would close and take the just-opened menu with it.
+      if (target.closest('[class*="sessionRow"] button') !== null) return
+      const navigates = target.closest(
+        'button[data-dsh-taskboard-entry], button[data-dsh-ssh-entry], [class*="newSession"], [class*="sessionRow"], [class*="searchResultRow"], [class*="searchResultWorkspace"]',
+      )
+      if (navigates !== null) toggleSidebar()
+    }
+    document.addEventListener('click', onDrawerClick, true)
+    return () => document.removeEventListener('click', onDrawerClick, true)
+  }, [tablet, open, toggleSidebar])
+
+  // Fullscreen toggle for the aionui preview sheet. The button is appended
+  // INTO the preview column (position: absolute against it), so it rides
+  // the sheet's own motion — open animation, geometry transition — locked
+  // by construction instead of matching transition curves, and it hides
+  // with the sheet automatically. The suite's React re-renders the column
+  // content, so a MutationObserver re-appends the button whenever it is
+  // wiped. (The sheet is z-index 56, above the overlay layer's z-20
+  // stacking context, so a button inside the sheet is never covered.)
+  // Clicking toggles the frame's `data-mobile-preview-full` marker; the
+  // two SVG icons swap via CSS.
+  useEffect(() => {
+    if (!mobile) return
+    let button: HTMLButtonElement | null = null
+    let observer: MutationObserver | null = null
+    const onClick = (): void => {
+      findFrame()?.toggleAttribute('data-mobile-preview-full')
+    }
+    const ensure = (): void => {
+      const col = document.querySelector('[data-aionui-preview-col]')
+      if (col === null) return
+      if (button === null) {
+        button = document.createElement('button')
+        button.type = 'button'
+        button.dataset.mobileNav = 'preview-full-toggle'
+        button.setAttribute('aria-label', t('previewFullscreen'))
+        button.title = t('previewFullscreen')
+        button.innerHTML = [
+          '<svg class="dsh-mobile-nav-full-in" viewBox="0 0 16 16" fill="none" aria-hidden="true">',
+          '<path d="M6 2H2v4M10 2h4v4M6 14H2v-4M10 14h4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>',
+          '</svg>',
+          '<svg class="dsh-mobile-nav-full-out" viewBox="0 0 16 16" fill="none" aria-hidden="true">',
+          '<path d="M6 2v4H2M10 2v4h4M6 14v-4H2M10 14v-4h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>',
+          '</svg>',
+        ].join('')
+        button.addEventListener('click', onClick)
+      }
+      if (button.parentElement !== col) col.appendChild(button)
+    }
+    ensure()
+    observer = new MutationObserver(ensure)
+    observer.observe(document.body, { childList: true, subtree: true })
+    return () => {
+      observer.disconnect()
+      button?.remove()
+    }
+  }, [mobile, t])
+
+  // Move the git branch chip (conversation.input.dock) INTO the composer
+  // card on mobile: it reads as a stray capsule floating between the dock
+  // rows and the input card. Reparenting into the card lets CSS pin it to
+  // the card's top-left (the card is position: relative) and give the card
+  // a chip row via padding-top. The dock's React re-render restores the
+  // chip to the dock, so a MutationObserver re-appends idempotently (same
+  // pattern as the preview fullscreen toggle above). When the viewport
+  // widens, cleanup moves the chip back to the dock — the desktop layout
+  // is untouched.
+  useEffect(() => {
+    if (!mobile) return
+    let observer: MutationObserver | null = null
+    const ensure = (): void => {
+      const chip = document.querySelector(
+        '[data-slot="conversation.input.dock"] [data-gitgraph-chip-anchor]',
+      )
+      if (chip === null) return
+      const card = document.querySelector('textarea')?.closest('[class$="_card"]')
+      if (card == null) return
+      if (chip.parentElement !== card) card.insertBefore(chip, card.firstChild)
+    }
+    ensure()
+    observer = new MutationObserver(ensure)
+    observer.observe(document.body, { childList: true, subtree: true })
+    return () => {
+      observer?.disconnect()
+      const chip = document.querySelector(
+        '[data-slot="conversation.input.dock"] [data-gitgraph-chip-anchor]',
+      )
+      const dock = document.querySelector('[data-slot="conversation.input.dock"]')
+      if (chip !== null && dock !== null && chip.parentElement !== dock) dock.appendChild(chip)
+    }
+  }, [mobile])
+
+  // Settings dialog: move the toolbar (Open configuration file + close)
+  // INTO the nav row so it shares ONE line with the category tabs — the
+  // official layout gives the toolbar its own row under the tabs, which on
+  // a phone leaves a full-width dead gap and pushes the options area down
+  // (user feedback 2026-08-16). The toolbar is React-owned, so a
+  // MutationObserver re-appends idempotently (same pattern as the chip
+  // above). Desktop untouched: this effect only runs while the frame
+  // marker is active. The toolbar is anchored by its class suffix — the
+  // export dialog (header + description + body) has no nav row, so
+  // querying the nav first makes the move a no-op there.
+  useEffect(() => {
+    if (!mobile) return
+    let observer: MutationObserver | null = null
+    const ensure = (): void => {
+      const dialog = document.querySelector('[aria-modal="true"]')
+      if (dialog === null) return
+      const nav = dialog.querySelector(':scope > [class$="_nav"]')
+      const header = dialog.querySelector('[class$="_header"]')
+      if (nav === null || header === null) return
+      if (header.parentElement !== nav) nav.appendChild(header)
+    }
+    ensure()
+    observer = new MutationObserver(ensure)
+    observer.observe(document.body, { childList: true, subtree: true })
+    return () => observer?.disconnect()
+  }, [mobile])
+
+  if (!tablet) return null
+  return (
+    <>
+      {open && (
+        <div
+          data-mobile-nav="backdrop"
+          role="button"
+          aria-label={t('backdrop')}
+          onClick={() => toggleSidebar()}
+        />
+      )}
+      {fabVisible && !open && (
+        <button
+          type="button"
+          data-mobile-nav="fab"
+          aria-label={t('open')}
+          title={t('open')}
+          onClick={() => toggleSidebar()}
+        >
+          <IconPanelLeftOutline16 size={18} />
+        </button>
+      )}
+    </>
+  )
+}

package/src/client/MobileNavToggle.tsx

@@ -0,0 +1,52 @@
+import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import { IconFolderOpenOutline16, IconPanelLeftOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import { NS } from './locales.ts'
+
+/** 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()}
+      >
+        <IconPanelLeftOutline16 size={16} />
+      </button>
+      <button
+        type="button"
+        data-mobile-nav="files"
+        aria-label={t('files')}
+        title={t('files')}
+        onClick={toggleExplorer}
+      >
+        <IconFolderOpenOutline16 size={16} />
+      </button>
+    </>
+  )
+}

package/src/client/MobileSessionHeader.tsx

@@ -0,0 +1,242 @@
+import { useEffect, useState } from 'react'
+import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import { IconChevronLeftOutline14, IconPanelLeftOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import { NS } from './locales.ts'
+import { GO_HOME_EVENT, SESSION_INFO_EVENT } from './nav-store.ts'
+
+/**
+ * ic_ds_info_outline_16 — @deepseek-ai/dsh-client-ui-primitives has no
+ * info-circle icon (grepped lib/types/icons/index.d.ts, 2026-08-17: 71
+ * icons, nearest is IconQuestionOutline14, wrong glyph AND wrong size).
+ * Hand-built to the same 16x16 box the rest of the header icon family
+ * uses, so the ⓘ button in MobileHeaderUtilities below reads as one
+ * family with the workbench button's mirrored IconPanelLeftOutline16
+ * (real-device round 2 feedback: "same size (16), same stroke weight").
+ */
+function IconInfoOutline16({ size = 16 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <circle cx="8" cy="8" r="6.7" stroke="currentColor" strokeWidth="1.3" />
+      <circle cx="8" cy="4.7" r="0.95" fill="currentColor" />
+      <rect x="7.25" y="6.9" width="1.5" height="4.7" rx="0.75" fill="currentColor" />
+    </svg>
+  )
+}
+
+/** Full props for the session header's back button + view-switch row. */
+export type MobileHeaderActionsProps =
+  & PropsRuntime<'conversation.session.header.actions'>
+  & PropsLocale<typeof NS>
+
+/** One tab read off the official (now visually hidden) Chat/Trajectory tablist. */
+export interface ViewTabInfo {
+  label: string
+  active: boolean
+  el: HTMLButtonElement
+}
+
+/**
+ * Reads the official session-header tablist by role/aria only (no hashed
+ * classes) — the plan's one sanctioned official-DOM read: ChatStore's view
+ * selection has no public setter (design doc Appendix C), so switching
+ * views means clicking the official tab button ourselves.
+ *
+ * Exported: effects/gestures.ts (S6) reuses this exact read for the
+ * content-area swipe gesture instead of re-querying the tablist a second
+ * way — it runs outside React (a document-level touch listener), so it
+ * needs the plain function, not the {@link useViewTabs} hook below.
+ */
+export function readViewTabs(): ViewTabInfo[] {
+  const list = document.querySelector('header [role="tablist"]')
+  if (list === null) return []
+  return [...list.querySelectorAll<HTMLButtonElement>('[role="tab"]')].map((el) => ({
+    label: el.textContent ?? '',
+    active: el.getAttribute('aria-selected') === 'true',
+    el,
+  }))
+}
+
+/**
+ * Live view-tab mirror. The tablist mounts/unmounts with the session header
+ * and its `aria-selected` flips on every view switch (ours or the suite's
+ * own), so a MutationObserver — not a one-time read — keeps the mirror
+ * current. Scoped to `document.body` like the existing aionui-compat
+ * effects (styles/aionui-compat.ts): the tablist itself may not exist yet
+ * at mount time.
+ *
+ * Exported: MobileSessionInfo.tsx (S4) reuses this exact hook for the info
+ * sheet's Chat/Trajectory segmented control instead of re-reading the
+ * tablist a second way.
+ */
+export function useViewTabs(): ViewTabInfo[] {
+  const [tabs, setTabs] = useState<ViewTabInfo[]>(() => [])
+  useEffect(() => {
+    const sync = (): void => setTabs(readViewTabs())
+    sync()
+    const observer = new MutationObserver(sync)
+    observer.observe(document.body, {
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['aria-selected'],
+      childList: true,
+    })
+    return () => observer.disconnect()
+  }, [])
+  return tabs
+}
+
+/**
+ * Session header, left lane: the back button (returns the phone page stack
+ * to the session list) plus the "current view + dots" row that mirrors the
+ * hidden official tablist. Both render unconditionally; CSS
+ * (styles/header.css.ts) keeps them hidden at >= 768px so the tablet drawer
+ * and the desktop layout stay exactly as they were.
+ */
+export function MobileHeaderActions({ t }: MobileHeaderActionsProps) {
+  const tabs = useViewTabs()
+  const active = tabs.find((tab) => tab.active) ?? tabs[0]
+  return (
+    <>
+      <button
+        type="button"
+        data-mobile-nav="header-back"
+        aria-label={t('backToList')}
+        title={t('backToList')}
+        onClick={() => window.dispatchEvent(new CustomEvent(GO_HOME_EVENT))}
+      >
+        <IconChevronLeftOutline14 size={20} />
+      </button>
+      {tabs.length > 1 && active !== undefined && (
+        <button
+          type="button"
+          data-mobile-nav="header-viewrow"
+          aria-label={t('switchView')}
+          onClick={() => tabs.find((tab) => !tab.active)?.el.click()}
+        >
+          <span data-mobile-nav="header-viewrow-label">{active.label}</span>
+          <span data-mobile-nav="header-viewrow-dots" aria-hidden="true">
+            {tabs.map((tab, index) => (
+              <i key={index} data-active={tab.active ? '' : undefined} />
+            ))}
+          </span>
+        </button>
+      )}
+    </>
+  )
+}
+
+/** Full props for the session header's right-edge utility buttons. */
+export type MobileHeaderUtilitiesProps =
+  & PropsRuntime<'conversation.session.header.utilities'>
+  & PropsLocale<typeof NS>
+
+/**
+ * Session header, right lane: the session-info entry (S4 owns the actual
+ * sheet — this fires a hook event for it to pick up) and the workbench
+ * entry, which triggers dsh-better-sidebar's own toggle. There is no public
+ * API for "open the panel" (BetterSidebarService.openTab only auto-expands
+ * for a content open, not a bare type-only open), so this clicks the
+ * plugin's real toggle button through a stable, non-hashed anchor: its root
+ * mount marker `[data-dsh-better-sidebar]` plus the `_toggleButton` class
+ * suffix (verified live: 2026-08-17). Safe no-op when the plugin, or any
+ * other workbench-style plugin sharing that convention, is not installed.
+ */
+export function MobileHeaderUtilities({ t }: MobileHeaderUtilitiesProps) {
+  // Better-sidebar phone close button (S3.1 follow-up, 2026-08-17): the
+  // panel's own top-right toggle cluster is hidden below 768px
+  // (styles/compat.css.ts) because it duplicates the workbench button
+  // below — but that cluster is also the panel's ONLY close control, so
+  // hiding it blindly leaves an open panel with no way out. This button is
+  // appended straight to document.body, mirroring the existing
+  // preview-full-toggle pattern in MobileNavOverlay.tsx (raw DOM, not a
+  // React portal — react-dom is not among this plugin's platform-module
+  // imports, see AGENTS.md "client import purity"): never inside the
+  // panel's own subtree (the third party's React re-renders would wipe
+  // it) and never under any transformed/backdrop-filter ancestor (the S4
+  // info-card WebKit lesson in AGENTS.md — position:fixed would re-anchor
+  // to that ancestor instead of the viewport). It clicks the SAME hidden
+  // official toggle the workbench button below uses. Visibility is pure
+  // CSS (styles/compat.css.ts: `body:has([data-dsh-better-sidebar]
+  // [class$="_panel"])` — the panel's class ends in "_panel" only while
+  // open, "_panelHidden" is appended once closed), so this effect only
+  // has to guarantee the node exists — no MutationObserver needed to
+  // track open/closed state. Icon paths copied verbatim from
+  // IconCloseOutline16 (primitives) for the same reason IconInfoOutline16
+  // above is hand-built: this button lives outside the React tree, so it
+  // cannot render a primitives component directly.
+  useEffect(() => {
+    const button = document.createElement('button')
+    button.type = 'button'
+    button.dataset.mobileNav = 'better-sidebar-close'
+    button.setAttribute('aria-label', t('workbenchClose'))
+    button.title = t('workbenchClose')
+    // Bottom-center labeled pill (real-device follow-up, 2026-08-17): the
+    // icon markup is a static trusted string (safe as innerHTML), but the
+    // locale label is untrusted-shaped text — built as a real text node via
+    // textContent, not string-concatenated into the same innerHTML, so a
+    // translation can never be parsed as markup.
+    button.innerHTML = '<svg viewBox="0 0 16 16" fill="none" aria-hidden="true">'
+      + '<path d="M14.1168 13.197L13.197 14.1167L1.8833 2.80303L2.80309 1.88324L14.1168 13.197Z" fill="currentColor"/>'
+      + '<path d="M13.197 1.88326L14.1168 2.80305L2.80309 14.1168L1.8833 13.197L13.197 1.88326Z" fill="currentColor"/>'
+      + '</svg>'
+    const label = document.createElement('span')
+    label.textContent = t('workbenchClose')
+    button.appendChild(label)
+    const onClick = (): void => {
+      document.querySelector<HTMLButtonElement>('[data-dsh-better-sidebar] button[class$="_toggleButton"]')?.click()
+    }
+    button.addEventListener('click', onClick)
+    document.body.appendChild(button)
+    return () => {
+      button.removeEventListener('click', onClick)
+      button.remove()
+    }
+  }, [t])
+
+  // Presence gate (2026-08-17 user question): without dsh-better-sidebar
+  // installed the workbench button was a dead control — rendered, clickable,
+  // did nothing. Same live-probe pattern as the home chips: observe until the
+  // plugin's root marker exists, hide the button while it doesn't. The close
+  // pill never had this problem (its CSS :has() gate needs the panel node).
+  const [workbenchPresent, setWorkbenchPresent] = useState(
+    () => document.querySelector('[data-dsh-better-sidebar]') !== null,
+  )
+  useEffect(() => {
+    const check = () =>
+      setWorkbenchPresent(document.querySelector('[data-dsh-better-sidebar]') !== null)
+    const observer = new MutationObserver(check)
+    observer.observe(document.body, { childList: true, subtree: true })
+    check()
+    return () => observer.disconnect()
+  }, [])
+
+  return (
+    <>
+      <button
+        type="button"
+        data-mobile-nav="header-info"
+        aria-label={t('sessionInfo')}
+        title={t('sessionInfo')}
+        onClick={() => window.dispatchEvent(new CustomEvent(SESSION_INFO_EVENT))}
+      >
+        <IconInfoOutline16 size={20} />
+      </button>
+      {workbenchPresent && <button
+        type="button"
+        data-mobile-nav="header-workbench"
+        aria-label={t('workbench')}
+        title={t('workbench')}
+        onClick={() => {
+          document.querySelector<HTMLButtonElement>('[data-dsh-better-sidebar] button[class$="_toggleButton"]')?.click()
+        }}
+      >
+        {/* No IconPanelRightOutline16 in primitives (grepped lib/types/
+            icons/index.d.ts, 2026-08-17) — mirrored via CSS (styles/
+            header.css.ts) instead of hand-drawing a new glyph. The panel
+            icon's "left column" reads as "right column" flipped, which is
+            exactly the workbench's own right-side-panel semantics. */}
+        <IconPanelLeftOutline16 size={20} />
+      </button>}
+    </>
+  )
+}