feat: 移动端侧边栏体验 — 窄视口（<1024px）双工作台合并为单面板抽屉（可拖分隔条、高度与底部面板互通）、不提供底部面板按钮、文件/外链打开自动展开、新会话默认收起

2026-08-12 18:20:34 +08:00
parent bab659f8bd
commit b391ebffed
12 changed files with 638 additions and 72 deletions
@@ -16,8 +16,16 @@
 * content to the views. New tabs come from the + menu (explorer / git /
 * terminal; editors open from the explorer). Tabs live in one tree only —
 * they never cross panels; only the panel sizes drag against each other.
+ *
+ * Narrow (mobile, <1024px) viewports collapse the two panels into one: the
+ * right panel becomes a full-width drawer holding BOTH workbenches stacked
+ * (MobileWorkbench, see split-pane.tsx), the bottom panel and its toggle
+ * button disappear, and the layout push is disabled (the drawer floats).
+ * Crossing the breakpoint never rewrites per-session state — bottomOpen /
+ * bottomHeight / both trees survive untouched, so desktop restores exactly
+ * what the user left.
 */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 import { useSyncExternalStore } from 'react'
 import clsx from 'clsx'
 import { IconCloseFill14, Tooltip } from '@deepseek-ai/dsh-client-ui-primitives'
@@ -29,7 +37,8 @@ import {
  type DropZone, type SidebarState, type SidebarStore, type SidebarTab, type SplitNode,
 } from './state.ts'
 import { IconPanelBottomOutline16, IconPanelRightOutline16 } from './icons.tsx'
-import { Workbench, type WorkbenchActions } from './split-pane.tsx'
+import { MobileWorkbench, Workbench, type WorkbenchActions } from './split-pane.tsx'
+import { useNarrowViewport } from './breakpoints.ts'
 import type { NewTabOption } from './TabBar.tsx'
 import type { TabDragPayload } from './TabBar.tsx'
 import { relativeTo } from './paths.ts'
@@ -94,6 +103,15 @@ function buildNewTabOptions(state: SidebarState, ctx: Context, scope: SessionSco
 export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
  const { ctx, store } = props

+  // Narrow (mobile) viewports collapse the two panels into one: the right
+  // panel becomes a full-width drawer holding BOTH workbenches, the bottom
+  // panel (and its toggle button) disappears, and the layout push is
+  // disabled (the drawer floats over the app shell). Crossing the
+  // breakpoint never rewrites the per-session state — bottomOpen /
+  // bottomHeight / both trees survive untouched, so desktop restores
+  // exactly what the user left.
+  const narrow = useNarrowViewport()
+
  // Current conversation (the sessions list feed).
  const sessionList = useSyncExternalStore(
    useMemo(() => (callback: () => void) => ctx.sessions.list.subscribe(callback), [ctx]),
@@ -268,6 +286,10 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
   */
  const bottomWasOpenRef = useRef<boolean | undefined>(undefined)
  useEffect(() => {
+    // The bottom panel does not exist on narrow viewports (the two
+    // workbenches merge into one panel), so the first-expansion auto
+    // terminal is a desktop-only behavior.
+    if (narrow) return
    if (state === undefined) return
    const wasOpen = bottomWasOpenRef.current
    bottomWasOpenRef.current = state.bottomOpen
@@ -279,7 +301,7 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
    // atomically so later expansions never repeat the auto-open.
    store.reduce(s => ({ ...s, activePane: firstLeaf(s.bottomSplits).id, bottomOpenedOnce: true }))
    ctx.betterSidebar?.openTab({ type: 'terminal' })
-  }, [state, store, ctx])
+  }, [state, store, ctx, narrow])

  // Panel drags: the right panel's width (left edge strip), the bottom
  // panel's height (top edge strip), and the shared corner (both at once).
@@ -356,16 +378,18 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
  // are squeezed instead of covered. The margins are capped at the viewport
  // so a stale persisted size (e.g. fullscreen on a bigger window) can never
  // crush the app shell to zero. Dragging disables the layout transition.
+  // On NARROW viewports the drawer FLOATS over the app shell — no push, the
+  // conversation keeps the full width behind the drawer.
  useEffect(() => {
-    const width = snapshot.state?.panelOpen === true
+    const width = !narrow && snapshot.state?.panelOpen === true
      ? Math.min(snapshot.state.width, window.innerWidth)
      : 0
-    const height = snapshot.state?.bottomOpen === true
+    const height = !narrow && snapshot.state?.bottomOpen === true
      ? Math.min(snapshot.state.bottomHeight, window.innerHeight)
      : 0
    document.documentElement.style.setProperty('--dsh-sidebar-width', `${width}px`)
    document.documentElement.style.setProperty('--dsh-sidebar-height', `${height}px`)
-  }, [snapshot.state?.panelOpen, snapshot.state?.width, snapshot.state?.bottomOpen, snapshot.state?.bottomHeight])
+  }, [narrow, snapshot.state?.panelOpen, snapshot.state?.width, snapshot.state?.bottomOpen, snapshot.state?.bottomHeight])
  useEffect(() => {
    if (anyDragging) document.body.setAttribute('data-dsh-sidebar-dragging', '')
    else document.body.removeAttribute('data-dsh-sidebar-dragging')
@@ -450,11 +474,13 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
  if (state === undefined || sessionId === undefined) {
    return (
      <div className={css.toggleCluster}>
-        <Tooltip label={t('noSession')} side="bottom" delayMs={500}>
-          <button type="button" className={css.toggleButton} disabled aria-label={t('noSession')}>
-            <IconPanelBottomOutline16 />
-          </button>
-        </Tooltip>
+        {!narrow && (
+          <Tooltip label={t('noSession')} side="bottom" delayMs={500}>
+            <button type="button" className={css.toggleButton} disabled aria-label={t('noSession')}>
+              <IconPanelBottomOutline16 />
+            </button>
+          </Tooltip>
+        )}
        <Tooltip label={t('noSession')} side="bottom" delayMs={500}>
          <button type="button" className={css.toggleButton} disabled aria-label={t('noSession')}>
            <IconPanelRightOutline16 />
@@ -478,6 +504,13 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
   * ctx and the conversation input service at click time; a missing service
   * or scope degrades to a logged no-op, never a crash.
   */
+  /** The tab icon from the tab-type registry (shared by every workbench). */
+  const tabIconOf = (tab: SidebarTab): ReactNode => {
+    const descriptor = ctx.betterSidebar?.getTab(tab.type)
+    if (descriptor === undefined) return null
+    return typeof descriptor.icon === 'function' ? descriptor.icon(14) : descriptor.icon
+  }
+
  /**
   * Render one tab's content. `active` (from the workbench) tells whether
   * this tab is the active one in its pane; combined with the panel's
@@ -495,7 +528,10 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
      onReferenceFile={referenceInChat}
      ctx={ctx}
      store={store}
-      visible={bottom ? state.bottomOpen && active : state.panelOpen && active}
+      // On narrow viewports BOTH trees live in the one drawer, so the bottom
+      // tree's visibility is the drawer's (panelOpen), not the bottom
+      // panel's — the bottom panel itself does not exist there.
+      visible={narrow ? state.panelOpen && active : bottom ? state.bottomOpen && active : state.panelOpen && active}
      onSubagentJump={(childSessionId) => { subagentJumpRef.current = childSessionId }}
      onOpenDiff={(diffTab) => { store.reduce(s => openDiffTab(s, paneId, diffTab)) }}
    />
@@ -512,16 +548,22 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
        so the tabs genuinely yield space to it.
      */}
      <div className={css.toggleCluster}>
-        <Tooltip label={state.bottomOpen ? t('collapseBottomPanel') : t('expandBottomPanel')} side="bottom" delayMs={500}>
-          <button
-            type="button"
-            className={css.toggleButton}
-            aria-label={state.bottomOpen ? t('collapseBottomPanel') : t('expandBottomPanel')}
-            onClick={() => { store.reduce(toggleBottomPanel) }}
-          >
-            <IconPanelBottomOutline16 />
-          </button>
-        </Tooltip>
+        {/*
+          Narrow viewports merge the two workbenches into the one drawer —
+          there is no bottom panel, so its toggle button is not offered.
+        */}
+        {!narrow && (
+          <Tooltip label={state.bottomOpen ? t('collapseBottomPanel') : t('expandBottomPanel')} side="bottom" delayMs={500}>
+            <button
+              type="button"
+              className={css.toggleButton}
+              aria-label={state.bottomOpen ? t('collapseBottomPanel') : t('expandBottomPanel')}
+              onClick={() => { store.reduce(toggleBottomPanel) }}
+            >
+              <IconPanelBottomOutline16 />
+            </button>
+          </Tooltip>
+        )}
        <Tooltip label={state.panelOpen ? t('collapse') : t('expand')} side="bottom" delayMs={500}>
          <button
            type="button"
@@ -538,50 +580,65 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
        the slide in/out can animate; visibility hides it after the slide
        settles. Its bottom edge follows the bottom panel's height (0 while
        the bottom panel is closed) — the VSCode-style "sidebar above panel".
+        On NARROW viewports it is a full-width drawer holding both
+        workbenches (see MobileWorkbench); the width drag strip is not
+        offered there — a full-screen sheet has nothing to drag.
      */}
      <div
        ref={panelRef}
        className={clsx(css.panel, !state.panelOpen && css.panelHidden)}
-        style={{ width: Math.min(state.width, window.innerWidth) }}
+        style={{ width: narrow ? '100vw' : Math.min(state.width, window.innerWidth) }}
        data-dragging={anyDragging || undefined}
      >
-          <div
-            className={clsx(css.panelResize, draggingWidth && css.panelResizeActive)}
-            onPointerDown={(event) => {
-              event.preventDefault()
-              event.currentTarget.setPointerCapture(event.pointerId)
-              widthDrag.current = { startX: event.clientX, startWidth: state.width }
-              setDraggingWidth(true)
-            }}
-            onPointerMove={(event) => {
-              if (!event.currentTarget.hasPointerCapture(event.pointerId)) return
-              const { startX, startWidth } = widthDrag.current
-              const width = clampWidth(startWidth + (startX - event.clientX))
-              const height = state.bottomOpen ? Math.min(state.bottomHeight, window.innerHeight) : 0
-              scheduleDrag(width, height)
-            }}
-            onPointerUp={(event) => {
-              if (!event.currentTarget.hasPointerCapture(event.pointerId)) return
-              event.currentTarget.releasePointerCapture(event.pointerId)
-              const { startX, startWidth } = widthDrag.current
-              stopDragScheduling()
-              store.reduce(s => setWidth(s, startWidth + (startX - event.clientX)))
-              setDraggingWidth(false)
-            }}
-          />
+          {!narrow && (
+            <div
+              className={clsx(css.panelResize, draggingWidth && css.panelResizeActive)}
+              onPointerDown={(event) => {
+                event.preventDefault()
+                event.currentTarget.setPointerCapture(event.pointerId)
+                widthDrag.current = { startX: event.clientX, startWidth: state.width }
+                setDraggingWidth(true)
+              }}
+              onPointerMove={(event) => {
+                if (!event.currentTarget.hasPointerCapture(event.pointerId)) return
+                const { startX, startWidth } = widthDrag.current
+                const width = clampWidth(startWidth + (startX - event.clientX))
+                const height = state.bottomOpen ? Math.min(state.bottomHeight, window.innerHeight) : 0
+                scheduleDrag(width, height)
+              }}
+              onPointerUp={(event) => {
+                if (!event.currentTarget.hasPointerCapture(event.pointerId)) return
+                event.currentTarget.releasePointerCapture(event.pointerId)
+                const { startX, startWidth } = widthDrag.current
+                stopDragScheduling()
+                store.reduce(s => setWidth(s, startWidth + (startX - event.clientX)))
+                setDraggingWidth(false)
+              }}
+            />
+          )}
        <div className={css.panelBody}>
-          <Workbench
-            state={state}
-            newTabOptions={buildNewTabOptions(state, ctx, { sessionId, cwd })}
-            actions={actions}
-            onNewTab={onNewTab}
-            renderTab={renderTab}
-            getTabIcon={(tab) => {
-              const descriptor = ctx.betterSidebar?.getTab(tab.type)
-              if (descriptor === undefined) return null
-              return typeof descriptor.icon === 'function' ? descriptor.icon(14) : descriptor.icon
-            }}
-          />
+          {narrow
+            ? (
+              <MobileWorkbench
+                state={state}
+                newTabOptions={buildNewTabOptions(state, ctx, { sessionId, cwd })}
+                actions={actions}
+                onNewTab={onNewTab}
+                renderTab={(tab, active, paneId) => renderTab(tab, active, paneId, true)}
+                getTabIcon={tabIconOf}
+                onBottomHeightCommit={(height) => { store.reduce(s => setBottomHeight(s, height)) }}
+              />
+            )
+            : (
+              <Workbench
+                state={state}
+                newTabOptions={buildNewTabOptions(state, ctx, { sessionId, cwd })}
+                actions={actions}
+                onNewTab={onNewTab}
+                renderTab={renderTab}
+                getTabIcon={tabIconOf}
+              />
+            )}
        </div>
      </div>
      {/*
@@ -590,8 +647,10 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
        shell's own left sidebar and ends at the right panel's left edge —
        neither sidebar gives up any position (the right panel keeps its
        full height). Its resize strip is the top edge; hidden by sliding
-        down like the right panel.
+        down like the right panel. On NARROW viewports it does not exist —
+        the bottom workbench lives inside the drawer (MobileWorkbench).
      */}
+      {!narrow && (
      <div
        ref={bottomRef}
        className={clsx(css.bottomPanel, !state.bottomOpen && css.bottomPanelHidden)}
@@ -655,21 +714,19 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
            actions={actions}
            onNewTab={onNewTab}
            renderTab={(tab, active, paneId) => renderTab(tab, active, paneId, true)}
-            getTabIcon={(tab) => {
-              const descriptor = ctx.betterSidebar?.getTab(tab.type)
-              if (descriptor === undefined) return null
-              return typeof descriptor.icon === 'function' ? descriptor.icon(14) : descriptor.icon
-            }}
+            getTabIcon={tabIconOf}
          />
        </div>
      </div>
+      )}
      {/*
        The shared corner (only while BOTH panels are open): the intersection
        of the right panel's left edge and the bottom panel's top edge.
        Horizontal drags resize the right panel's width, vertical drags the
        bottom panel's height — the two panels drag against each other.
+        (Never on narrow viewports: the bottom panel does not exist there.)
      */}
-      {state.panelOpen && state.bottomOpen && (
+      {!narrow && state.panelOpen && state.bottomOpen && (
        <div
          ref={cornerRef}
          className={css.cornerHandle}
@@ -0,0 +1,50 @@
+/**
+ * Narrow-viewport ("mobile") breakpoint for the sidebar. Width-based, shared
+ * by the layout logic (JS) and the style gates (CSS). The CSS side pairs
+ * with this file via `@media (max-width: 1023px)` rules (sidebar.module.css)
+ * — 1023px ≡ widths below NARROW_MAX_WIDTH, documented at both ends.
+ *
+ * The value matches the DSH app shell's own narrow breakpoint
+ * (SIDEBAR_AUTO_COLLAPSE = 1024, ui-layout/columns.ts), so the sidebar's
+ * mobile layout switches at exactly the width where the host app collapses
+ * its own sidebar to the rail.
+ */
+import { useEffect, useState } from 'react'
+
+/** Viewport widths strictly below this are "mobile" (paired CSS: max-width: 1023px). */
+export const NARROW_MAX_WIDTH = 1024
+
+/** Whether a viewport width is narrow (mobile). */
+export function isNarrowWidth(width: number): boolean {
+  return width < NARROW_MAX_WIDTH
+}
+
+/**
+ * Live narrow-viewport flag for components. Reads `window.innerWidth` and
+ * re-measures on resize (rAF-throttled, the repo's existing drag pattern).
+ * Deliberately avoids `matchMedia` (jsdom does not implement it) — the
+ * resize listener is equally exact for a breakpoint that never changes
+ * while the page is open.
+ */
+export function useNarrowViewport(): boolean {
+  const [narrow, setNarrow] = useState(
+    () => typeof window !== 'undefined' && isNarrowWidth(window.innerWidth),
+  )
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    let frame: number | null = null
+    const measure = (): void => {
+      frame = null
+      setNarrow(isNarrowWidth(window.innerWidth))
+    }
+    const onResize = (): void => {
+      if (frame === null) frame = requestAnimationFrame(measure)
+    }
+    window.addEventListener('resize', onResize)
+    return () => {
+      window.removeEventListener('resize', onResize)
+      if (frame !== null) cancelAnimationFrame(frame)
+    }
+  }, [])
+  return narrow
+}
@@ -22,9 +22,10 @@
 import type { ReactNode } from 'react'
 import type { Context } from '../context-types.ts'
 import {
-  activateTab, allLeaves, closeTab as closeTabReducer, openTabInActivePane, patchTab,
+  activateTab, allLeaves, closeTab as closeTabReducer, openTabInActivePane, patchTab, togglePanel,
  type SidebarState, type SidebarStore, type SidebarTab,
 } from './state.ts'
+import { isNarrowWidth } from './breakpoints.ts'
 import type { SessionScope } from './api.ts'

 /** One declarative boolean setting of a tab/viewer, rendered as a nested
@@ -335,13 +336,29 @@ export function createBetterSidebarService(store: SidebarStore): BetterSidebarSe
      // A URL seed pre-fills the tab's path (the browser tab navigates to it
      // on mount). An explicit seed.title also wins over a createTab-minted
      // default title (e.g. the sidebar-browser's hostname title).
+      let landed: SidebarState
      if (seed.url !== undefined) {
-        return patchTab(next, tab.id, {
+        landed = patchTab(next, tab.id, {
          path: seed.url,
          ...(seed.title !== undefined ? { title: seed.title } : {}),
        })
+      } else {
+        landed = next
      }
-      return next
+      // Narrow-viewport drawer: a CONTENT open (file / browser) must be
+      // visible — expand the collapsed drawer so the open lands in sight.
+      // Type-only opens (+ menu, agent-terminal auto-tabs) never expand; on
+      // wide viewports nothing here changes (the panel behavior is the
+      // caller's business).
+      if (
+        typeof window !== 'undefined'
+        && isNarrowWidth(window.innerWidth)
+        && (seed.path !== undefined || seed.url !== undefined)
+        && !landed.panelOpen
+      ) {
+        return togglePanel(landed)
+      }
+      return landed
    })
  }

@@ -264,6 +264,38 @@
  display: flex;
 }

+/* The narrow-viewport workbench (MobileWorkbench): BOTH workbench trees
+   stacked in the one drawer — the right panel's tree flexes after the
+   fixed-height bottom tree, with a draggable divider (the .dividerCol
+   hit-strip + hairline) between them. */
+.mobileWorkbench {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.mobilePane {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* The bottom tree of the merged layout: fixed height (state.bottomHeight),
+   flex: none so the top tree takes the remainder. */
+.mobilePaneBottom {
+  flex: none;
+}
+
+/* The divider of the merged layout sits between the two panes; .dividerCol
+   already supplies the 7px hit strip, row-resize cursor and hairline. */
+.mobileWorkbench > .dividerCol {
+  flex: none;
+  margin: 0;
+}
+
 .split {
  flex: 1;
  min-width: 0;
@@ -1864,3 +1896,28 @@
    animation: none;
  }
 }
+
+/* ── Narrow (mobile) viewport ──────────────────────────────────────────── */
+
+/* Pairs with NARROW_MAX_WIDTH = 1024 in src/client/breakpoints.ts: widths
+   strictly below 1024px (i.e. max-width: 1023px) switch the sidebar to the
+   mobile layout — one drawer holding both workbenches, one toggle button.
+   The structural switches (which panels render, the merged MobileWorkbench)
+   are JS-driven via useNarrowViewport; this block only adapts the pure
+   style details. */
+@media (max-width: 1023px) {
+  /* The toggle cluster holds a single button on narrow viewports (the
+     bottom panel button is not rendered), so the open panel's tab strip
+     reserves 40px instead of the desktop 72px — the tabs and + menu still
+     yield space to the one remaining control. */
+  .panel:not(.panelHidden) .tabBar {
+    padding-right: 40px;
+  }
+
+  /* Narrower tabs: a phone-width drawer fits more open tabs before the
+     strip scrolls. */
+  .tab {
+    min-width: 48px;
+    max-width: 128px;
+  }
+}
@@ -12,7 +12,7 @@
 import { Fragment, useEffect, useRef, useState } from 'react'
 import type { ReactNode } from 'react'
 import clsx from 'clsx'
-import type { SidebarState, SidebarTab, SplitNode } from './state.ts'
+import { BOTTOM_MIN, type SidebarState, type SidebarTab, type SplitNode } from './state.ts'
 import type { DropZone } from './state.ts'
 import { TabBar, type NewTabOption, parseDrag, type TabDragPayload } from './TabBar.tsx'
 import css from './sidebar.module.css'
@@ -290,3 +290,114 @@ export function Workbench(props: {
    </div>
  )
 }
+
+/**
+ * The narrow-viewport workbench: BOTH workbench trees stacked in one panel —
+ * the right panel's tree on top, the bottom panel's tree below, with a
+ * draggable divider between them (the desktop "two panels" collapse into one
+ * on mobile; see the breakpoint module). The bottom tree's height is the
+ * shared `state.bottomHeight` — the same field the desktop bottom panel uses
+ * — so a height set on mobile carries over to the desktop bottom panel and
+ * vice versa. Tabs stay in their own trees; the cross-tree drag logic
+ * (state.moveTabToEdge / moveTab) already handles moving a tab between the
+ * two panes.
+ *
+ * The divider writes the height DIRECTLY to the DOM while dragging (the top
+ * tree flexes after the fixed-height bottom tree), committing to the store
+ * once on release — the same pattern as the desktop panel drags, so
+ * terminals/editors never re-render on every pointer move.
+ */
+export function MobileWorkbench(props: {
+  state: SidebarState
+  actions: WorkbenchActions
+  newTabOptions: NewTabOption[]
+  onNewTab: (optionId: string) => void
+  renderTab: (tab: SidebarTab, active: boolean, paneId: string) => ReactNode
+  getTabIcon?: (tab: SidebarTab) => ReactNode
+  /** Commit a new bottom-tree height (store-backed, clamped by setBottomHeight). */
+  onBottomHeightCommit: (height: number) => void
+}) {
+  const {
+    state, actions, newTabOptions, onNewTab, renderTab, getTabIcon, onBottomHeightCommit,
+  } = props
+  const bottomRef = useRef<HTMLDivElement | null>(null)
+  const dividerRef = useRef<HTMLDivElement | null>(null)
+  const dragRef = useRef({ startY: 0, startHeight: 0 })
+  const [dragging, setDragging] = useState(false)
+  // One DOM write per frame (like the desktop panel drags): pointer events
+  // outrun the display refresh, and each write reflows the pane content.
+  const dragFrame = useRef<number | null>(null)
+  const pending = useRef<number | null>(null)
+  const scheduleHeight = (height: number): void => {
+    pending.current = height
+    if (dragFrame.current !== null) return
+    dragFrame.current = requestAnimationFrame(() => {
+      dragFrame.current = null
+      const next = pending.current
+      if (next !== null) bottomRef.current?.style.setProperty('height', `${next}px`)
+    })
+  }
+
+  return (
+    <div className={css.mobileWorkbench}>
+      <div className={css.mobilePane}>
+        <Workbench
+          state={state}
+          newTabOptions={newTabOptions}
+          actions={actions}
+          onNewTab={onNewTab}
+          renderTab={renderTab}
+          getTabIcon={getTabIcon}
+        />
+      </div>
+      <div
+        ref={dividerRef}
+        className={clsx(css.divider, css.dividerCol, dragging && css.dividerActive)}
+        onPointerDown={(event) => {
+          event.preventDefault()
+          event.currentTarget.setPointerCapture(event.pointerId)
+          dragRef.current = { startY: event.clientY, startHeight: state.bottomHeight }
+          setDragging(true)
+        }}
+        onPointerMove={(event) => {
+          if (!event.currentTarget.hasPointerCapture(event.pointerId)) return
+          const { startY, startHeight } = dragRef.current
+          const box = dividerRef.current?.parentElement?.getBoundingClientRect()
+          const bodyHeight = box === undefined || box.height === 0 ? window.innerHeight : box.height
+          const next = Math.min(
+            Math.max(BOTTOM_MIN, startHeight + (event.clientY - startY)),
+            Math.max(BOTTOM_MIN, bodyHeight - BOTTOM_MIN),
+          )
+          scheduleHeight(next)
+        }}
+        onPointerUp={(event) => {
+          if (!event.currentTarget.hasPointerCapture(event.pointerId)) return
+          event.currentTarget.releasePointerCapture(event.pointerId)
+          if (dragFrame.current !== null) {
+            cancelAnimationFrame(dragFrame.current)
+            dragFrame.current = null
+          }
+          const final = pending.current
+          pending.current = null
+          setDragging(false)
+          if (final !== null) onBottomHeightCommit(final)
+        }}
+      />
+      <div
+        ref={bottomRef}
+        className={clsx(css.mobilePane, css.mobilePaneBottom)}
+        style={{ height: state.bottomHeight }}
+      >
+        <Workbench
+          state={state}
+          tree={state.bottomSplits}
+          newTabOptions={newTabOptions}
+          actions={actions}
+          onNewTab={onNewTab}
+          renderTab={renderTab}
+          getTabIcon={getTabIcon}
+        />
+      </div>
+    </div>
+  )
+}
@@ -10,6 +10,7 @@
 * operations are pure functions over the node, unit-tested in tests/state.spec.ts.
 */
 import { SIDEBAR_PREFS_DEFAULTS, type SidebarPrefs } from '../prefs-shared.ts'
+import { isNarrowWidth } from './breakpoints.ts'

 /**
 * Tab type identifier. Builtins register their ids (explorer / git / editor
@@ -721,12 +722,18 @@ function loadState(sessionId: string, prefs: SidebarPrefs): SidebarState {
  // chosen percent of the window (clamped to the panel floor and the
  // viewport so a huge percent can never crush the app shell), the panel
  // starts open only when the preference says so, and the default explorer
-  // tab is skipped when the user disabled the explorer tab type.
+  // tab is skipped when the user disabled the explorer tab type. On a
+  // NARROW viewport a brand-new session starts collapsed instead — the
+  // panel is a full-screen drawer there, and auto-opening it on first
+  // paint would cover the conversation before the user asked. Only the
+  // first seeding is affected: once the user expands the drawer,
+  // `panelOpen: true` persists like any other state.
  const viewport = typeof window !== 'undefined' ? window.innerWidth : undefined
  const width = viewport === undefined
    ? PANEL_DEFAULT
    : defaultWidthFor(viewport, prefs.defaultWidthPercent)
-  return makeDefaultState(width, prefs.openByDefault, prefs.tabsEnabled['explorer'] !== false)
+  const openByDefault = prefs.openByDefault && (viewport === undefined || !isNarrowWidth(viewport))
+  return makeDefaultState(width, openByDefault, prefs.tabsEnabled['explorer'] !== false)
 }

 /**