dsh-coding-sidebar 1.0.0

package/src/client/Sidebar.tsx

@@ -0,0 +1,1370 @@
+/**
+ * The sidebar shell: a panel mounted inside the unified panel host — a
+ * fixed, viewport-sized containing block ([data-dsh-panel-host]) appended
+ * to document.body — instead of an individual fixed-position element, so a
+ * desktop shell's intermediate wrapper transforms can never hijack the
+ * panel's fixed containing block (the core AppFrame owns the left sidebar /
+ * center / details columns and has no right-side hole for plugins). The
+ * panel hosts the workbench; a persistent toggle button at the top-right
+ * corner opens/closes it, and its width drags from the left edge. The whole
+ * layout lives in the per-session store, so switching conversations swaps
+ * the sidebar.
+ *
+ * The shell binds the workbench actions to the store and dispatches tab
+ * content to the views. New tabs come from the + menu (explorer / git /
+ * terminal; editors open from the explorer). Tabs can also be dragged out
+ * of the panel onto the conversation area as free windows.
+ *
+ * Narrow (mobile, <768px) viewports turn the panel into a full-width
+ * drawer: the layout push is disabled (the drawer floats over the app
+ * shell) and the width drag strip is not offered — a full-screen sheet has
+ * nothing to drag.
+ */
+import { createElement, memo, useCallback, useEffect, useMemo, useRef, useState, type DragEvent as ReactDragEvent, type ReactNode } from 'react'
+import { useSyncExternalStore } from 'react'
+import clsx from 'clsx'
+import { Tooltip } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { Context, SidebarSessionList } from '../context-types.ts'
+import { appendToDraft } from './conversation-draft.ts'
+import {
+  PANEL_MIN, activateTab, agentUuidOf, closeFloatByTab, closeTab, dockFloat, firstLeaf, floatTab,
+  isAgentTabId, leafWithTab,
+  moveFloat, moveTab, moveTabToEdge, openDiffTab, raiseFloat, reconcileAgentTerminals,
+  resizeFloat, resizeSplitIn, setTabPin, setWidth, toggleExpanded, togglePanel,
+  type DropZone, type SidebarState, type SidebarStore, type SidebarTab,
+} from './state.ts'
+import { collectPinnedTabs, createPinnedVirtualTab, getPinnedHomeScope, injectPinnedIntoTree, isPinnedVirtualId, isPinnedVirtualTab, parsePinnedVirtualId, type PinnedTabEntry } from './pinned.ts'
+import { IconPinOutline16 } from './icons.tsx'
+import { IconPanelRightOutline16 } from './icons.tsx'
+import { Workbench, type WorkbenchActions } from './split-pane.tsx'
+import { isNarrowWidth, useViewportSize } from './breakpoints.ts'
+import { layoutPushSize } from './layout-push.ts'
+import { parseDesktopEnv } from './desktop-env.ts'
+import { getWcoSnapshot, subscribeWco } from './wco.ts'
+import { getShellPreset } from './shell-presets.ts'
+import { computeTitleBarStrip } from './titlebar-strip.ts'
+import type { NewTabOption } from './TabBar.tsx'
+import { TAB_DRAG_TYPE, parseDrag, type TabDragPayload } from './TabBar.tsx'
+import { FreeWindow } from './FreeWindow.tsx'
+import { relativeTo } from './paths.ts'
+import { OrphanedTab } from './OrphanedTab.tsx'
+import { RenderBoundary } from './RenderBoundary.tsx'
+import { tabContentCompare, type TabContentMemoKey } from './tab-content-memo.ts'
+import { detectNewDirectSubagent } from './subagent-detect.ts'
+import { detectNewJob } from './subagent-jobs.ts'
+import { t } from './locales.ts'
+import { api, type SessionScope } from './api.ts'
+import css from './sidebar.module.css'
+
+/** How many consecutive reconnect failures stop the agent-terminals push loop
+ * (mirror of the terminal view's own cap; the loop restarts on session switch). */
+const FAILURE_LIMIT = 3
+
+/**
+ * Subagent auto-open debounce (ms). The host delivers a new child's origin
+ * and its title in SEPARATE frames: a Side Chat thread's first visible
+ * frame still shows a fallback title (no 'Side: ' prefix), so an immediate
+ * 0→N decision mistakes it for a genuine subagent and pops the task page.
+ * The trigger therefore re-evaluates against the live snapshot once the
+ * title frame has had time to land.
+ */
+const AUTO_OPEN_DEBOUNCE_MS = 500
+
+/**
+ * OS file drags over the sidebar belong to the sidebar, not to the chat:
+ * DSH's composer (InputBar) listens for file drags on the DOCUMENT and
+ * answers with a full-screen "drop image here" mask plus image intake on
+ * drop. Both panel-host render sites swallow the whole event quartet —
+ * enter/over/leave/drop — so the region is a black hole to that document
+ * listener. All four must be stopped: InputBar keeps an enter/leave depth
+ * counter, and a leave that escapes without its matching enter unbalances
+ * the count (this was the full-screen mask flickering over the sidebar).
+ * The conversation column keeps DSH's native overlay and intake untouched;
+ * gated on the 'Files' type so in-app drags (tab reorder, split zones)
+ * propagate exactly as before.
+ */
+const swallowOsFileDrag = (event: ReactDragEvent): void => {
+  if (!(event.dataTransfer?.types.includes('Files') ?? false)) return
+  event.preventDefault()
+  event.stopPropagation()
+}
+
+/** The four drag events a file drag must never carry past the panel host. */
+const osFileDragShield = {
+  onDragEnter: swallowOsFileDrag,
+  onDragOver: swallowOsFileDrag,
+  onDragLeave: swallowOsFileDrag,
+  onDrop: swallowOsFileDrag,
+}
+
+/**
+ * Append one user-space stylesheet (preset or custom CSS) as a tagged
+ * `<style>` element. The tag attribute carries the source identity so the
+ * running configuration is inspectable in DevTools; the returned tag is
+ * removed by the caller's effect cleanup.
+ */
+function injectUserCss(attr: string, id: string, cssText: string): HTMLStyleElement {
+  const tag = document.createElement('style')
+  tag.setAttribute(attr, id)
+  tag.textContent = cssText
+  document.head.appendChild(tag)
+  return tag
+}
+
+/** Props of one tab's content cell = the memo key (tab-content-memo.ts) plus
+ *  the runtime objects/callbacks the cell renders with. The memo comparator
+ *  is the pure `tabContentCompare`; anything in the key decides a re-render
+ *  must propagate, anything outside it must be a stable object (ctx/store)
+ *  or covered by a compared field (paneId covers onOpenDiff's captured
+ *  pane; sessionId/cwd cover onReferenceFile). */
+interface TabContentProps extends TabContentMemoKey {
+  onToggleDir: (path: string) => void
+  onReferenceFile: (path: string) => void
+  ctx: Context
+  store: SidebarStore
+  /** Fired before a topology node jumps to its child session (see Sidebar). */
+  onSubagentJump: (childSessionId: string) => void
+  /** Open a diff tab from the git panel (placement handled by the store). */
+  onOpenDiff: (tab: SidebarTab) => void
+}
+
+/** Render the content of one tab (dispatched by type). */
+const TabContent = memo(function TabContent(props: TabContentProps) {
+  const { tab, effectiveTabId, sessionId, cwd, expanded, revealed, onToggleDir, onReferenceFile, ctx, store, visible, onSubagentJump, onOpenDiff } = props
+  const scope = { sessionId, cwd }
+  const descriptor = ctx.get('betterSidebar')?.getTab(tab.type)
+  if (descriptor === undefined) {
+    return <OrphanedTab ctx={ctx} store={store} scope={scope} tab={tab} visible={visible} />
+  }
+  // For pinned virtual tabs, the tab descriptor's component (e.g. TerminalView)
+  // must receive the ORIGINAL tab id so it connects to the home session's PTY.
+  // The virtual tab's own id is a unique display key (prefixed); effectiveTabId
+  // restores the real id at the component boundary.
+  const componentTab = effectiveTabId !== undefined ? { ...tab, id: effectiveTabId } : tab
+  return createElement(
+    RenderBoundary,
+    { className: css.tabBoundaryError },
+    createElement(descriptor.component, {
+      ctx, store, scope, tab: componentTab, visible, expanded, revealed,
+      onToggleDir, onReferenceFile, onOpenDiff, onSubagentJump,
+    }),
+  )
+}, tabContentCompare)
+
+/** The + menu options for the current state, driven by the tab registry.
+ * Hidden tabs (editor/diff) never show; `available` returning false shows
+ * a disabled row (e.g. terminal at capacity) instead of hiding the option.
+ * Tabs the user disabled in the side card settings are filtered out
+ * entirely — re-enabling them is the settings page's job. */
+function buildNewTabOptions(state: SidebarState, ctx: Context, scope: SessionScope): NewTabOption[] {
+  const service = ctx.get('betterSidebar')
+  if (service === undefined) return []
+  return service.getTabs()
+    .filter(d => !d.hidden && service.isTabEnabled(d.id))
+    .sort((a, b) => (a.order ?? 100) - (b.order ?? 100))
+    .map(d => ({
+      id: d.id,
+      label: typeof d.title === 'function' ? d.title() : d.title,
+      disabled: !(d.available?.(ctx, scope, state) ?? true),
+      icon: typeof d.icon === 'function' ? d.icon(16) : d.icon,
+    }))
+}
+
+export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
+  const { ctx, store } = props
+
+  // Copy freshness: re-render the whole tree when the DSH locale switches.
+  // The module-level t() reads the active locale at call time, so a root
+  // re-render alone re-localizes every panel (no memo barriers below).
+  const localeRevision = useSyncExternalStore(
+    useMemo(() => (callback: () => void) => ctx.locale.subscribe(callback), [ctx]),
+    useCallback(() => ctx.locale.getSnapshot().active, [ctx]),
+  )
+  void localeRevision
+
+  // better-locale override freshness: when @huanlin/dsh-plugin-better-locale
+  // is installed and the user picks an override language (e.g. ja), the
+  // store's `active` changes but the DSH locale's `active` does NOT —
+  // better-locale keeps the dsh active value (zh/en) unchanged and only
+  // patches `LocaleRuntime.prototype.lookup`. The localeRevision uSES
+  // above reads `getSnapshot().active`, so it sees no change and skips
+  // re-render. This second uSES reads the better-locale store's `active`
+  // directly, so an override switch fires a full re-render and t() picks
+  // up the new override text. Optional: ctx.get returns undefined when
+  // better-locale is absent (or when ctx is a minimal test mock without
+  // a `get` method), in which case this is a no-op uSES.
+  type BetterLocaleStore = {
+    readonly active: string | undefined
+    subscribe(listener: () => void): () => void
+  }
+  const betterLocaleStore = typeof ctx.get === 'function'
+    ? (ctx as unknown as {
+        get(name: 'betterLocale'): BetterLocaleStore | undefined
+      }).get('betterLocale')
+    : undefined
+  const betterLocaleActive = useSyncExternalStore(
+    useMemo(() => {
+      const store = betterLocaleStore
+      if (store === undefined) return (_cb: () => void) => () => {}
+      return (callback: () => void) => store.subscribe(callback)
+    }, [betterLocaleStore]),
+    useMemo(() => {
+      const store = betterLocaleStore
+      if (store === undefined) return () => undefined
+      return () => store.active
+    }, [betterLocaleStore]),
+  )
+  void betterLocaleActive
+
+  // Tab-registry revision: TabContent memo cells must pick up a descriptor
+  // a plugin registers/disposes after mount (the + menu / icons already read
+  // the registry at render). Rare events (plugin (un)mount), so one full
+  // re-render per change is fine — this is what keeps the memoized cells
+  // from going stale, mirroring the localeRevision mechanism above.
+  const [tabsVersion, setTabsVersion] = useState(0)
+  useEffect(() => {
+    const service = ctx.get('betterSidebar')
+    if (service === undefined) return
+    return service.subscribe(() => setTabsVersion(version => version + 1))
+  }, [ctx])
+
+  // Narrow (mobile) viewports turn the panel into a full-width drawer: the
+  // layout push is disabled (the drawer floats over the app shell) and the
+  // width drag strip is not offered.
+  const viewport = useViewportSize()
+  const narrow = isNarrowWidth(viewport.width)
+
+  // On-screen keyboard / visual-viewport inset (mobile, split-screen, …):
+  // when the visual viewport shrinks below the layout viewport, the
+  // bottom-anchored drawer would hide under the keyboard. Track the inset
+  // and offset the drawer by it. The obscured bottom strip is
+  // innerHeight − (vv.height + vv.offsetTop): offsetTop is nonzero while
+  // the visual viewport is scrolled/zoomed under browser chrome, so
+  // omitting it would over-lift the drawer (CR #232 P2). offsetTop changes
+  // through the viewport's scroll event too, so both events are listened.
+  // Guarded: browsers without visualViewport (older WebViews, jsdom) stay
+  // at 0. rAF-throttled, same pattern as useNarrowViewport.
+  const [keyboardInset, setKeyboardInset] = useState(0)
+  useEffect(() => {
+    const vv = window.visualViewport
+    if (vv === null || vv === undefined) return
+    let frame: number | null = null
+    const measure = (): void => {
+      frame = null
+      const inset = Math.max(0, window.innerHeight - (vv.height + vv.offsetTop))
+      setKeyboardInset(inset > 1 ? Math.round(inset) : 0)
+    }
+    const onResize = (): void => { if (frame === null) frame = requestAnimationFrame(measure) }
+    vv.addEventListener('resize', onResize)
+    vv.addEventListener('scroll', onResize)
+    measure()
+    return () => {
+      vv.removeEventListener('resize', onResize)
+      vv.removeEventListener('scroll', onResize)
+      if (frame !== null) cancelAnimationFrame(frame)
+    }
+  }, [])
+  // Current conversation (the sessions list feed).
+  const sessionList = useSyncExternalStore(
+    useMemo(() => (callback: () => void) => ctx.sessions.list.subscribe(callback), [ctx]),
+    useCallback(() => ctx.sessions.list.getSnapshot(), [ctx]),
+  )
+  const current = sessionList.current
+
+  // Per-session sidebar state.
+  const snapshot = useSyncExternalStore(
+    useCallback((callback: () => void) => store.subscribe(callback), [store]),
+    useCallback(() => store.getSnapshot(), [store]),
+  )
+  useEffect(() => { store.setSession(current) }, [current, store])
+
+  const state = snapshot.state
+  const sessionId = snapshot.sessionId
+  const summaryCwd = sessionId === undefined ? undefined : sessionList.byId[sessionId]?.cwd
+
+  // The collapsed toggle cluster reclaims the top-right corner, so the DSH
+  // session header's right-aligned utilities (the "Session log" download
+  // capsule) must yield. layout.css keys off this body attribute to push the
+  // header's right padding out past the cluster. Only the CLOSED panel needs
+  // it — an open panel already squeezes `#root` left, moving the header clear.
+  const collapsed = state === undefined || !state.panelOpen
+  useEffect(() => {
+    if (collapsed) document.body.setAttribute('data-dsh-sidebar-collapsed', '')
+    else document.body.removeAttribute('data-dsh-sidebar-collapsed')
+    return () => { document.body.removeAttribute('data-dsh-sidebar-collapsed') }
+  }, [collapsed])
+
+  // Title-bar / shell compatibility (the "位置兼容模式" scheme):
+  //   auto    — CONSERVATIVE: only the standard Window Controls Overlay
+  //             geometry contributes (the real caption-overlay height,
+  //             reactive to maximize/restore). No URL stamp, no preset, no
+  //             guess — plain browsers see zero modification.
+  //   preset  — an opt-in built-in shell preset (shell-presets.ts) adds its
+  //             per-shell strip as the no-WCO fallback.
+  //   custom  — the user's own CSS (injected below) + the legacy manual
+  //             strip px.
+  // The resolved strip drives the SAME body attribute + CSS variable as the
+  // legacy boolean did, so the CSS contract is unchanged (layout.css /
+  // sidebar.module.css); only the value source changed. The cleanup removes
+  // both on unmount/boundary swap so a crashed sidebar never leaves them
+  // behind.
+  const desktopEnv = parseDesktopEnv()
+  const wco = useSyncExternalStore(
+    useMemo(() => subscribeWco, []),
+    getWcoSnapshot,
+  )
+  const scheme = snapshot.prefs.titleBarScheme
+  const preset = scheme === 'preset' ? getShellPreset(snapshot.prefs.titleBarPresetId) : undefined
+  const titleBarStrip = computeTitleBarStrip(
+    desktopEnv, wco, scheme, preset, snapshot.prefs.titleBarStripPx,
+  )
+  const titleBarCompat = titleBarStrip > 0
+  useEffect(() => {
+    const root = document.documentElement
+    if (titleBarCompat) {
+      document.body.setAttribute('data-dsh-title-bar-compat', '')
+      root.style.setProperty('--dsh-title-bar-strip', `${titleBarStrip}px`)
+    } else {
+      document.body.removeAttribute('data-dsh-title-bar-compat')
+      root.style.removeProperty('--dsh-title-bar-strip')
+    }
+    return () => {
+      document.body.removeAttribute('data-dsh-title-bar-compat')
+      root.style.removeProperty('--dsh-title-bar-strip')
+    }
+  }, [titleBarCompat, titleBarStrip])
+
+  // User-space CSS injection (the escape hatch): preset CSS (scheme
+  // `preset`) and free-form custom CSS (scheme `custom`) are appended AFTER
+  // the plugin's own styles — later in the cascade wins ties, and
+  // `!important` can override the JS-written inline strip variable. Each
+  // source gets its own tagged <style> so the running configuration stays
+  // inspectable; tags are removed on change/unmount so a stale stylesheet
+  // never outlives its fiber (HMR-safe).
+  const presetCss = scheme === 'preset' ? preset?.css ?? '' : ''
+  const customCss = scheme === 'custom' ? snapshot.prefs.customCss : ''
+  useEffect(() => {
+    const tags: HTMLStyleElement[] = []
+    if (presetCss !== '') tags.push(injectUserCss('data-dsh-preset-css', preset?.id ?? '', presetCss))
+    if (customCss !== '') tags.push(injectUserCss('data-dsh-custom-css', 'custom', customCss))
+    return () => { for (const tag of tags) tag.remove() }
+  }, [presetCss, customCss, preset?.id])
+
+  // While the session's header is still hydrating (or the session is blank),
+  // the list summary may carry no cwd; ask the host once (it falls back to
+  // the process cwd) so the explorer root and terminal cwd are real from
+  // first paint instead of showing "no session".
+  const [fetchedCwd, setFetchedCwd] = useState<string | undefined>(undefined)
+  useEffect(() => {
+    setFetchedCwd(undefined)
+    if (sessionId === undefined || summaryCwd !== undefined) return
+    let cancelled = false
+    api.sessionCwd({ sessionId })
+      .then(result => { if (!cancelled) setFetchedCwd(result.cwd) })
+      .catch(() => { /* the explorer/git rows surface their own errors */ })
+    return () => { cancelled = true }
+  }, [sessionId, summaryCwd])
+  const cwd = summaryCwd ?? fetchedCwd
+
+  /**
+   * Agent terminals push: subscribe to the host's live list of agent-owned
+   * terminals for this session (created by the model through the
+   * `terminal_create` tool). The host pushes a JSON array on every
+   * create / close / exit; the sidebar reconciles the list into tabs
+   * (id `agent:<uuid>`, title from the agent). A disconnected socket
+   * retries with a short backoff so a refresh or transient drop reattaches
+   * the same shell without losing the agent's work — capped like the
+   * terminal view's own reconnect loop, so a refused endpoint never spins
+   * forever (the next session switch restarts the loop).
+   * While the terminal tab type is disabled in settings, pushes are
+   * ignored (no auto-added tabs); re-enabling makes the next push converge.
+   */
+  useEffect(() => {
+    if (sessionId === undefined) return
+    let socket: WebSocket | null = null
+    let retry: number | undefined
+    let closed = false
+    let failures = 0
+    const connect = (): void => {
+      if (closed) return
+      const url = new URL('/sidebar/ws/agent-terminals', location.origin)
+      url.protocol = url.protocol === 'https:' ? 'wss:' : 'ws:'
+      url.search = new URLSearchParams({ sessionId }).toString()
+      socket = new WebSocket(url.toString())
+      socket.onmessage = (event) => {
+        if (typeof event.data !== 'string') return
+        try {
+          const list = JSON.parse(event.data) as Array<{ uuid: string; title: string; command: string; exited: boolean }>
+          if (!Array.isArray(list)) return
+          store.reduce(s => ctx.get('betterSidebar')?.isTabEnabled('terminal') === false
+            ? s
+            : reconcileAgentTerminals(s, list))
+        } catch {
+          // Malformed push: ignore (the next push will reconcile).
+        }
+      }
+      socket.onclose = () => {
+        if (closed) return
+        failures += 1
+        if (failures >= FAILURE_LIMIT) {
+          console.error('[dsh-coding-sidebar] agent-terminals connection failed; stopping reconnect loop', sessionId)
+          return
+        }
+        retry = window.setTimeout(connect, 2000)
+      }
+      socket.onerror = () => { socket?.close() }
+    }
+    connect()
+    return () => {
+      closed = true
+      window.clearTimeout(retry)
+      socket?.close()
+    }
+  }, [sessionId, store])
+
+  /**
+   * Agent opens push: subscribe to the host's `sidebar_open` requests for
+   * this session (the model actively opens a file / folder / HTTP(S) page).
+   * The host pushes one JSON request per open; the sidebar routes it to the
+   * matching built-in tab: a file opens in the editor (per-path dedupe), a
+   * folder opens a file window whose tree is rooted at the folder
+   * (`meta.dir`), and a URL opens in the browser tab. A disconnected socket
+   * retries with a short backoff (mirror of the agent-terminals loop): the
+   * host queue keeps undelivered requests and replays them on the first
+   * attach, so a refresh or a session switch lands the opens the model
+   * queued while no view was connected.
+   * While the side-card setting is off, pushes are ignored as a defensive
+   * gate — the host already unregisters the tool and drains the queue.
+   */
+  useEffect(() => {
+    if (sessionId === undefined) return
+    let socket: WebSocket | null = null
+    let retry: number | undefined
+    let closed = false
+    let failures = 0
+    const connect = (): void => {
+      if (closed) return
+      const url = new URL('/sidebar/ws/agent-opens', location.origin)
+      url.protocol = url.protocol === 'https:' ? 'wss:' : 'ws:'
+      url.search = new URLSearchParams({ sessionId }).toString()
+      socket = new WebSocket(url.toString())
+      socket.onmessage = (event) => {
+        if (typeof event.data !== 'string') return
+        try {
+          const request = JSON.parse(event.data) as { kind?: unknown; target?: unknown; title?: unknown }
+          if (request === null || typeof request !== 'object') return
+          if (request.kind !== 'file' && request.kind !== 'folder' && request.kind !== 'url') return
+          if (typeof request.target !== 'string' || request.target === '') return
+          if (store.getPrefs().agentOpenTools !== true) return
+          const scope = { sessionId }
+          const title = typeof request.title === 'string' && request.title !== '' ? request.title : undefined
+          if (request.kind === 'url') {
+            ctx.get('betterSidebar')?.openTab({ type: 'browser', url: request.target, title }, scope)
+          } else if (request.kind === 'folder') {
+            ctx.get('betterSidebar')?.openTab({
+              type: 'editor',
+              title,
+              path: request.target,
+              id: `editor:${request.target}`,
+              meta: { dir: true },
+            }, scope)
+          } else {
+            ctx.get('betterSidebar')?.openFile(scope, request.target, title)
+          }
+        } catch {
+          // Malformed push: ignore (the next push carries its own request).
+        }
+      }
+      socket.onclose = () => {
+        if (closed) return
+        failures += 1
+        if (failures >= FAILURE_LIMIT) {
+          console.error('[dsh-coding-sidebar] agent-opens connection failed; stopping reconnect loop', sessionId)
+          return
+        }
+        retry = window.setTimeout(connect, 2000)
+      }
+      socket.onerror = () => { socket?.close() }
+    }
+    connect()
+    return () => {
+      closed = true
+      window.clearTimeout(retry)
+      socket?.close()
+    }
+  }, [sessionId, store])
+
+  /**
+   * Subagent auto-activation: the moment the current conversation spawns its
+   * FIRST direct subagent (a 0 → N transition on the list feed), the "auto
+   * open" pref is on, and the Subagent tab type is enabled in settings,
+   * open the panel (if collapsed) and focus the Subagent page
+   * (single-instance: an existing tab is focused, never duplicated).
+   * Switching to a session that already has subagents never triggers — its
+   * baseline starts at the current count — so a deliberate layout is never
+   * fought.
+   *
+   * The decision is DEBOUNCED (AUTO_OPEN_DEBOUNCE_MS): a Side Chat thread
+   * is also a subagent-origin child, and its 'Side: ' title lands one frame
+   * after its origin — an immediate check would misread that first frame as
+   * a new subagent and pop this page on every thread creation. The timer
+   * re-evaluates the ORIGINAL baseline against the live snapshot; by then
+   * the title filter (isSideThreadSummary) sees the settled label.
+   */
+  const listBaselineRef = useRef<SidebarSessionList | undefined>(undefined)
+  const autoOpenPendingRef = useRef<{ baseline: SidebarSessionList; timer: number } | null>(null)
+  useEffect(() => {
+    const prev = listBaselineRef.current
+    listBaselineRef.current = sessionList
+    if (sessionId === undefined || prev === undefined) return
+    if (autoOpenPendingRef.current !== null) return
+    if (!detectNewDirectSubagent(prev, sessionList, sessionId)) return
+    const baseline = prev
+    const timer = window.setTimeout(() => {
+      autoOpenPendingRef.current = null
+      if (!detectNewDirectSubagent(baseline, ctx.sessions.list.getSnapshot(), sessionId)) return
+      if (!store.getPrefs().autoOpenSubagent) return
+      if (ctx.get('betterSidebar')?.isTabEnabled('subagent') === false) return
+      store.reduce(s => s.panelOpen ? s : togglePanel(s))
+      // Pin the landing to the first pane: the auto-opened Subagent page
+      // must appear in the panel that just expanded, not wherever the user
+      // last touched.
+      store.reduce(s => ({ ...s, activePane: firstLeaf(s.splits).id }))
+      ctx.get('betterSidebar')?.openTab({ type: 'subagent', title: t('subagent') })
+    }, AUTO_OPEN_DEBOUNCE_MS)
+    autoOpenPendingRef.current = { baseline, timer }
+  }, [sessionList, sessionId, store, ctx])
+
+  // A session switch (or unmount) voids any armed auto-open recheck.
+  useEffect(() => () => {
+    const pending = autoOpenPendingRef.current
+    if (pending !== null) window.clearTimeout(pending.timer)
+    autoOpenPendingRef.current = null
+  }, [sessionId])
+
+  /**
+   * Job auto-activation: the moment a NEW background job appears for the
+   * current conversation (a job id the previous snapshot lacked), the
+   * auto-open pref is on, and the Jobs tab type is enabled, open the panel
+   * (if collapsed) and focus the Jobs page. Unlike the subagent trigger
+   * (0 → N only), ANY new job id triggers: the agent may start several
+   * jobs in one session, and each should surface. A fresh page load never
+   * triggers — its baseline starts at the current snapshot.
+   */
+  const jobBaselineRef = useRef<SidebarSessionList | undefined>(undefined)
+  useEffect(() => {
+    const prev = jobBaselineRef.current
+    jobBaselineRef.current = sessionList
+    if (sessionId === undefined || prev === undefined) return
+    if (!detectNewJob(prev, sessionList, sessionId)) return
+    if (!store.getPrefs().autoOpenJobs) return
+    if (ctx.get('betterSidebar')?.isTabEnabled('subagent') === false) return
+    store.reduce(s => s.panelOpen ? s : togglePanel(s))
+    store.reduce(s => ({ ...s, activePane: firstLeaf(s.splits).id }))
+    ctx.get('betterSidebar')?.openTab({ type: 'subagent', title: t('subagent') })
+  }, [sessionList, sessionId, store, ctx])
+
+  /**
+   * Topology jump-back: clicking a subagent node on the Subagent page calls
+   * the official `openSubagent`, which switches the sidebar to that child
+   * session's OWN layout (a fresh child session defaults to the explorer).
+   * The README contract says the Subagent page must stay open with the jumped
+   * node highlighted — so once the current session becomes the recorded jump
+   * target, re-open the Subagent page on top of the child's layout (expanding
+   * the panel first if it is collapsed). Only this explicit node click arms
+   * the flag, so switching to a subagent session by any other means keeps
+   * that session's own layout untouched.
+   */
+  const subagentJumpRef = useRef<string | undefined>(undefined)
+  useEffect(() => {
+    const pending = subagentJumpRef.current
+    if (pending === undefined || sessionId !== pending) return
+    subagentJumpRef.current = undefined
+    store.reduce(s => s.panelOpen ? s : togglePanel(s))
+    store.reduce(s => ({ ...s, activePane: firstLeaf(s.splits).id }))
+    ctx.get('betterSidebar')?.openTab({ type: 'subagent', title: t('subagent') })
+  }, [sessionId, store, ctx])
+
+  /**
+   /**
+    * Inline pinned terminals (v0.17.0+): pinned tabs from OTHER sessions
+    * inject as VIRTUAL tabs into the first leaf of the right panel's split
+    * tree. The virtual tabs have unique ids (prefixed with the home session)
+    * and carry the home scope in meta. Clicking a virtual tab sets
+    * `activePinnedTabId` — the augmented tree overrides the leaf's `active`
+    * so the pinned tab's content renders in-place (TerminalView connects to
+    * the home session's PTY via WS, no session jump).
+    *
+    * Closing/unpinning a virtual tab targets the HOME session via reduceFor
+    * (which doesn't notify — targeted opens must not re-render the active
+    * session). The `pinnedRevision` state bump forces the pinnedEntries
+    * useMemo to recompute after such an action.
+    */
+  const [activePinnedTabId, setActivePinnedTabId] = useState<string | null>(null)
+  const [pinnedRevision, setPinnedRevision] = useState(0)
+
+  /**
+   * Cross-session pinned-tab collection. Recomputed on every store notify,
+   * session-list change, and pinned action (the revision bump covers
+   * reduceFor updates that don't notify). Only tabs from OTHER sessions —
+   * the viewer's own pinned tabs are already on its tab strip.
+   */
+  const pinnedEntries: readonly PinnedTabEntry[] = useMemo(() => {
+    if (sessionId === undefined) return []
+    return collectPinnedTabs(store.getSessionStates(), { sessionId, cwd })
+  }, [store, sessionId, cwd, snapshot, pinnedRevision])
+
+  /** Virtual SidebarTab objects for the pinned entries (stable references
+   *  via useMemo so TabContent's memo comparator holds). */
+  const pinnedVirtualTabs = useMemo(
+    () => pinnedEntries.map(createPinnedVirtualTab),
+    [pinnedEntries],
+  )
+
+  /** The right panel's split tree with pinned virtual tabs injected into the
+   *  first leaf. When `activePinnedTabId` is set, that leaf's `active` is
+   *  overridden so the pinned tab's content is visible. */
+  const augmentedTree = useMemo(
+    () => state === undefined ? undefined : injectPinnedIntoTree(state.splits, pinnedVirtualTabs, activePinnedTabId),
+    [state, pinnedVirtualTabs, activePinnedTabId],
+  )
+
+  // The app shell's center column (the conversation area): its DOM node is
+  // the drop-zone anchor for free-window drag-out (overConversation tests
+  // the pointer against it) and the landing center for floatTab. Located
+  // once (plus watchers) and cached in a ref — both consumers measure the
+  // rect live at event time, so no cached geometry is kept.
+  const centerColRef = useRef<HTMLElement | null>(null)
+  const draggingRef = useRef(false)
+  useEffect(() => {
+    let disposed = false
+    // Locate the AppFrame's center column. DSH 0.1.x wraps slot hosts in
+    // [data-slot] containers: the conversation slot wrapper
+    // ([data-slot="conversation"]) sits directly inside the center column,
+    // so its parent IS that column — no hashed-class or positional
+    // dependency (layout.css uses the same anchor). The shell swaps the
+    // boot page for the AppFrame only AFTER boot settles, so the first
+    // query may miss it. Never give up: watch #root's subtree (the swap and
+    // HMR re-renders mutate it) and re-run this locator — querying once and
+    // bailing would strand the drag-out zone at the fallback rect forever.
+    const locate = (): void => {
+      if (disposed) return
+      const col = document.querySelector('#root [data-slot="conversation"]')
+        ?.parentElement as HTMLElement | undefined
+      if (col === undefined || !col.isConnected) {
+        // The column is gone or was detached (HMR re-render swapped the
+        // node in place): drop the ref so the consumers' fallback kicks in
+        // and the next watcher tick re-locates the new node (issue #248).
+        centerColRef.current = null
+        return
+      }
+      centerColRef.current = col
+    }
+    locate()
+    // rAF-debounce the mutation watchers: #root's subtree changes at chat
+    // cadence (streaming turns), and locate() itself must stay cheap.
+    let locateFrame: number | null = null
+    const scheduleLocate = (): void => {
+      if (locateFrame !== null) return
+      // Mid-drag every frame writes --dsh-sidebar-* on <html>'s style
+      // attribute, which is the mutation this watcher observes — relocating
+      // per drag frame is pointless (the center column node cannot change
+      // while the pointer is captured) and adds a querySelector to every
+      // frame's budget (#315). The 1.5s retry below still covers any node
+      // swap that somehow lands mid-drag.
+      if (draggingRef.current) return
+      locateFrame = requestAnimationFrame(() => {
+        locateFrame = null
+        locate()
+      })
+    }
+    const watcher = new MutationObserver(scheduleLocate)
+    const root = document.getElementById('root')
+    if (root !== null) watcher.observe(root, { childList: true, subtree: true })
+    // The layout push writes --dsh-sidebar-* on <html>. A HMR re-activation
+    // clears those variables on teardown and re-writes them on setup — and
+    // that is also the moment the shell may have re-created the center
+    // column under a REUSED #root child (React swaps nodes in place, so
+    // #root's childList never changes and the watcher above never fires).
+    // Watching <html>'s style attribute catches that re-sync.
+    const htmlStyleWatcher = new MutationObserver(scheduleLocate)
+    htmlStyleWatcher.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] })
+    // Last-resort safety net (issue #248): no watcher is guaranteed to fire
+    // for every HMR teardown/setup interleaving (e.g. the style attribute
+    // may end up byte-identical, and the col may be swapped before the
+    // subtree watcher attaches). A slow unconditional re-locate keeps the
+    // cached node honest within a couple of seconds no matter what
+    // sequence the shell used. locate() is cheap when nothing changed
+    // (one querySelector + an identity compare; no forced layout).
+    const retry = window.setInterval(locate, 1500)
+    return () => {
+      disposed = true
+      if (locateFrame !== null) cancelAnimationFrame(locateFrame)
+      window.clearInterval(retry)
+      watcher.disconnect()
+      htmlStyleWatcher.disconnect()
+      centerColRef.current = null
+    }
+  }, [])
+
+  /**
+   * Free windows — drag-out detection. The tab strips already drive HTML5
+   * DnD (payload application/x-dsh-tab) with drops owned by the panes
+   * (split/merge); this shell watches the DOCUMENT (capture) for the same
+   * drag hovering OUTSIDE the panel host: while the pointer is over the
+   * conversation column it arms the drop (preventDefault) and shows a hint
+   * overlay there, and the drop floats the tab at the release point. Targets
+   * inside the host are ignored here, so pane drops keep their behavior
+   * untouched. Only OUR tab drags count (the body flag is the tab strip's;
+   * OS file drags and any DSH drags pass through). Narrow viewports skip
+   * the gesture — the merged drawer covers the conversation, leaving
+   * nothing to drop onto (the tab context menu entry still floats tabs).
+   */
+  const [floatHint, setFloatHint] = useState<{ left: number; top: number; width: number; height: number } | null>(null)
+  const floatHintRef = useRef(false)
+  useEffect(() => {
+    if (narrow || sessionId === undefined) return
+    const inPanelHost = (target: EventTarget | null): boolean =>
+      target instanceof Element && target.closest('[data-dsh-panel-host]') !== null
+    /** The conversation column's rect when the pointer is over it (and not
+     *  over our own surfaces); null otherwise. */
+    const overConversation = (event: DragEvent): DOMRect | null => {
+      if (inPanelHost(event.target)) return null
+      const col = centerColRef.current
+      if (col === null || !col.isConnected) return null
+      const rect = col.getBoundingClientRect()
+      if (rect.width === 0 || rect.height === 0) return null
+      const { clientX: x, clientY: y } = event
+      if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) return null
+      return rect
+    }
+    const onDragOver = (event: DragEvent): void => {
+      if (!document.body.hasAttribute('data-dsh-tab-dragging')) return
+      const rect = overConversation(event)
+      if (rect !== null) {
+        // preventDefault on dragover is what makes the browser deliver the
+        // drop (and drop the "no" cursor) over the conversation area.
+        event.preventDefault()
+        setFloatHint((prev) => {
+          const next = { left: rect.left, top: rect.top, width: rect.width, height: rect.height }
+          if (prev !== null && prev.left === next.left && prev.top === next.top
+            && prev.width === next.width && prev.height === next.height) return prev
+          return next
+        })
+        floatHintRef.current = true
+      } else if (floatHintRef.current) {
+        floatHintRef.current = false
+        setFloatHint(null)
+      }
+    }
+    const onDrop = (event: DragEvent): void => {
+      if (!floatHintRef.current) return
+      floatHintRef.current = false
+      setFloatHint(null)
+      const rect = overConversation(event)
+      if (rect === null) return
+      event.preventDefault()
+      event.stopPropagation()
+      const payload = parseDrag(event.dataTransfer?.getData(TAB_DRAG_TYPE) ?? '')
+      if (payload === null) return
+      store.reduce(s => floatTab(s, payload.tabId, event.clientX, event.clientY))
+    }
+    const clear = (): void => {
+      if (!floatHintRef.current) return
+      floatHintRef.current = false
+      setFloatHint(null)
+    }
+    document.addEventListener('dragover', onDragOver, true)
+    document.addEventListener('drop', onDrop, true)
+    window.addEventListener('dragend', clear, true)
+    window.addEventListener('blur', clear)
+    return () => {
+      document.removeEventListener('dragover', onDragOver, true)
+      document.removeEventListener('drop', onDrop, true)
+      window.removeEventListener('dragend', clear, true)
+      window.removeEventListener('blur', clear)
+    }
+  }, [narrow, sessionId, store])
+
+  // Panel drag: the panel's width (left edge strip). Drags write the size
+  // DIRECTLY to the DOM (panel style + the layout CSS variable) instead of
+  // round-tripping the store on every pointer move — a store reduce
+  // re-renders the workbench (terminals, editors…) per move, which is the
+  // visible drag lag. The store is committed once on pointer up (clamping
+  // + persistence).
+  const panelRef = useRef<HTMLDivElement | null>(null)
+  const widthDrag = useRef({ startX: 0, startWidth: 0 })
+  const [draggingWidth, setDraggingWidth] = useState(false)
+  const anyDragging = draggingWidth
+
+  // Mirror the dragging flag into a ref so non-React callbacks (the center
+  // column locator's rAF debounce) can read it without re-subscribing.
+  useEffect(() => {
+    draggingRef.current = anyDragging
+  }, [anyDragging])
+
+  // Clamp mirror of setWidth for mid-drag values (the store re-clamps on
+  // commit; this keeps the panel from overshooting mid-drag).
+  const clampWidth = (width: number): number =>
+    Math.min(Math.max(PANEL_MIN, Math.round(width)), Math.max(PANEL_MIN, window.innerWidth))
+
+  /** Single writer for the layout-push variable: the app shell gives up
+   *  the panel's width while open (0 while collapsed) through layout.css's
+   *  margin. Every size change — drag frames and committed state — flows
+   *  through here so the push never forks between paths. */
+  const writeGeometry = (width: number): void => {
+    document.documentElement.style.setProperty('--dsh-sidebar-width', `${width}px`)
+  }
+
+  /** Last size a drag actually applied to the DOM (updated by applyDrag).
+   *  When a pointer stream dies without any position info (issue #247: an
+   *  ultra-fast flick whose release events carried no usable coordinates),
+   *  the abort path adopts this instead of rolling back to the pre-drag
+   *  value — the DOM's current size is the only truthful record left. */
+  const lastDragSize = useRef<number | null>(null)
+
+  /** Apply a drag size to the DOM without touching React state or the
+   *  store. The layout push rides the shared writer (writeGeometry). */
+  const applyDrag = (width: number): void => {
+    lastDragSize.current = width
+    panelRef.current?.style.setProperty('width', `${width}px`)
+    writeGeometry(width)
+  }
+
+  // Drags write at most once per frame: pointer events fire several times
+  // faster than the display refresh, and each write reflows the app shell
+  // (the layout push) plus the panel — batching to one write per frame is
+  // what keeps the drag smooth. The store is still committed once on release.
+  const dragFrame = useRef<number | null>(null)
+  const pendingDrag = useRef<number | null>(null)
+  const scheduleDrag = (width: number): void => {
+    pendingDrag.current = width
+    if (dragFrame.current !== null) return
+    dragFrame.current = requestAnimationFrame(() => {
+      dragFrame.current = null
+      const pending = pendingDrag.current
+      if (pending !== null) {
+        pendingDrag.current = null
+        applyDrag(pending)
+      }
+    })
+  }
+
+  /** Flush any pending drag write and stop scheduling (the store commit on
+   *  pointer up applies the final clamped values). */
+  const stopDragScheduling = (): void => {
+    if (dragFrame.current !== null) {
+      cancelAnimationFrame(dragFrame.current)
+      dragFrame.current = null
+    }
+    pendingDrag.current = null
+  }
+
+  /**
+   * Finalize a drag on pointer up: flush the LAST drag frame to the DOM
+   * synchronously, then commit the SAME clamped value to the store. A fast
+   * release cancels the rAF before it ran — without the flush the DOM would
+   * sit at the pre-drag size until React re-renders with the committed
+   * value, and a value that never made it into a move handler would never
+   * be applied at all.
+   */
+  const commitDrag = (width: number, reduce: (state: SidebarState) => SidebarState): void => {
+    stopDragScheduling()
+    applyDrag(width)
+    draggingRef.current = false
+    store.reduce(reduce)
+  }
+
+  /** Set once a drag's pointerup handler commits — premature capture loss
+   *  (pointercancel / lostpointercapture without pointerup) must then be told
+   *  apart from a normal release. */
+  const dragCommitted = useRef(false)
+  /**
+   * Abort a drag whose pointer stream was interrupted (pointercancel, or
+   * capture lost before pointerup): no pointerup will arrive, so without
+   * this the dragging state would stick true and the DOM would sit at an
+   * uncommitted size until the next re-render.
+   *
+   * A FAST release is the common trigger: browsers merge pointermove bursts,
+   * and an ultra-fast flick can cancel the stream before ANY move lands.
+   * The commit order is therefore: the LAST KNOWN dragged size (the rAF
+   * pending value) first, then the interrupting event's own pointer
+   * position (only pointercancel is trusted to carry coordinates —
+   * lostpointercapture's coordinates are not guaranteed, so the handlers
+   * pass the event only from pointercancel), and finally the size the drag
+   * last APPLIED to the DOM (lastDragSize). A drag that produced none of
+   * those (pure down+up at the same spot) commits the store's own size —
+   * a no-op, never an explicit rollback (issue #247: v0.13.1 never reverted
+   * an interrupted fast flick; the abort path added in the unified-host
+   * refactor did, and that regression is what this ordering removes).
+   *
+   * Every commit path marks the drag committed, so the interrupt
+   * double-fire (pointercancel → lostpointercapture) cannot commit once
+   * and then roll the same drag back.
+   */
+  const abortDrag = (reset: () => void, event?: { clientX: number; clientY: number }): void => {
+    if (dragCommitted.current) return
+    const pending = pendingDrag.current
+    let width: number | undefined
+    if (pending !== null) {
+      width = pending
+    } else if (event !== undefined) {
+      // No move ever landed: the cancel position is all we have — commit it
+      // (clamped) instead of rolling back the flick.
+      width = clampWidth(widthDrag.current.startWidth + (widthDrag.current.startX - event.clientX))
+    }
+    if (width !== undefined) {
+      dragCommitted.current = true
+      pendingDrag.current = null
+      if (dragFrame.current !== null) {
+        cancelAnimationFrame(dragFrame.current)
+        dragFrame.current = null
+      }
+      applyDrag(width)
+      draggingRef.current = false
+      store.reduce(s => setWidth(s, width))
+    } else {
+      // No pending write and no usable event coordinates: keep the size the
+      // drag last applied instead of rolling back to the pre-drag value
+      // (the flick's moves may have been consumed by the rAF just before
+      // the stream died — the DOM already shows the dragged size). Clamp to
+      // the current geometry like the layout-push effect (closed/narrow
+      // panels are written 0 by the push).
+      dragCommitted.current = true
+      stopDragScheduling()
+      const adoptedWidth = layoutPushSize({
+        narrow,
+        panelOpen: state?.panelOpen === true,
+        width: lastDragSize.current ?? state?.width ?? 0,
+        viewportWidth: viewport.width,
+      })
+      applyDrag(adoptedWidth)
+      draggingRef.current = false
+      store.reduce(s => setWidth(s, adoptedWidth))
+    }
+    reset()
+  }
+
+  // Layout push: the app shell gives up the panel's width while it is open
+  // (0 while collapsed), so the conversation and input bar are squeezed
+  // instead of covered. The margin is 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(() => {
+    writeGeometry(layoutPushSize({
+      narrow,
+      panelOpen: snapshot.state?.panelOpen === true,
+      width: snapshot.state?.width ?? 0,
+      viewportWidth: viewport.width,
+    }))
+  }, [narrow, snapshot.state?.panelOpen, snapshot.state?.width, viewport.width])
+  // Unmount must release the push (issue #31): when the boundary swaps the
+  // whole sidebar after a render crash (or the plugin fiber is disposed /
+  // HMR), the CSS variables would otherwise stay on <html> and layout.css
+  // keeps squeezing #root with a stale margin — "the sidebar cannot be
+  // hidden" until a full reload. This lives in an UNMOUNT-ONLY effect, NOT
+  // in the push effect's cleanup: React can yield between a passive
+  // effect's cleanup and setup phases, and removing the variables on a
+  // dependency change used to paint the push-less layout for a frame (the
+  // center column went full width) while the re-add restarted the margin
+  // transition — the shell flashed push-less after every width drag
+  // (issue #258). Keeping the variable continuously valid while mounted
+  // makes the push invisible to mid-flush style recalcs.
+  useEffect(() => {
+    return () => {
+      document.documentElement.style.removeProperty('--dsh-sidebar-width')
+    }
+  }, [])
+  useEffect(() => {
+    if (anyDragging) document.body.setAttribute('data-dsh-sidebar-dragging', '')
+    else document.body.removeAttribute('data-dsh-sidebar-dragging')
+  }, [anyDragging])
+
+
+  const actions: WorkbenchActions = useMemo(() => ({
+    closeTab: (paneId, tabId) => {
+      // A closed terminal releases its pty immediately — including when its
+      // socket is mid-reconnect, where the unmount close frame never reaches
+      // the host and the process would hold the quota until the grace ends.
+      // Agent terminals (tabId `agent:<uuid>`) close through a different
+      // host route: the WS close frame is the primary path (sent by
+      // TerminalView on unmount), and the agent-pty.close HTTP route is the
+      // fallback when the WS is down.
+      const current = store.getSnapshot().state
+      const leaf = current === undefined ? undefined : leafWithTab(current.splits, tabId)
+      const tab = leaf?.tabs.find(candidate => candidate.id === tabId)
+      // Route through the service: the tab-bar close is the canonical close
+      // path (finds the pane itself, fires descriptor.onClose); the session
+      // scope (with its cwd) rides to the callback.
+      ctx.get('betterSidebar')?.closeTab(tabId, sessionId === undefined ? undefined : { sessionId, cwd })
+      if (tab?.type === 'terminal') {
+        if (isAgentTabId(tabId)) {
+          const uuid = agentUuidOf(tabId)
+          void api.agentPtyClose(uuid).catch(() => { /* the host may already have released it */ })
+        } else if (sessionId !== undefined) {
+          void api.ptyClose({ sessionId, cwd }, tabId).catch(() => { /* the host may already have released it */ })
+        }
+      }
+    },
+    activateTab: (paneId, tabId) => {
+      // Route through the service: same reducer (finds the pane, sets the
+      // active pane) and fires descriptor.onActivate; the session scope
+      // (with its cwd) rides to the callback.
+      ctx.get('betterSidebar')?.activateTab(tabId, sessionId === undefined ? undefined : { sessionId, cwd })
+    },
+    focusPane: (paneId) => { store.reduce(s => ({ ...s, activePane: paneId })) },
+    moveTabToEdge: (payload: TabDragPayload, toPane: string, zone: DropZone) => {
+      store.reduce(s => moveTabToEdge(s, payload.paneId, payload.tabId, toPane, zone))
+    },
+    moveTabBefore: (payload: TabDragPayload, toPane: string, beforeTabId: string) => {
+      store.reduce((s) => {
+        let index = -1
+        const source = leafWithTab(s.splits, beforeTabId)
+        if (source !== undefined && source.id === toPane) {
+          index = source.tabs.findIndex(tab => tab.id === beforeTabId)
+        }
+        return moveTab(s, payload.paneId, payload.tabId, toPane, index)
+      })
+    },
+    resizeSplit: (splitId, index, deltaFrac) => {
+      store.reduce(s => resizeSplitIn(s, splitId, index, deltaFrac))
+    },
+    // The tab context menu's "move to free window": no drop point exists, so
+    // the window is born over the conversation column's center (the user's
+    // focus area; clamped into the viewport by the reducer) — the same
+    // landing the drag-out gesture produces.
+    floatTab: (tabId) => {
+      const col = centerColRef.current
+      const rect = col !== null && col.isConnected ? col.getBoundingClientRect() : null
+      const x = rect !== null ? (rect.left + rect.right) / 2 : window.innerWidth / 2
+      const y = rect !== null ? (rect.top + rect.bottom) / 2 : window.innerHeight / 2
+      store.reduce(s => floatTab(s, tabId, x, y))
+    },
+    // Pin/unpin a terminal tab (v0.17.0+): the home cwd is snapshotted at
+    // pin time so a workspace-scoped pin only resurfaces in sessions whose
+    // cwd matches. Unpin passes null — the tab stays open in its home
+    // session, just unmarked.
+    pinTab: (tabId, scope) => {
+      store.reduce(s => setTabPin(s, tabId, scope === null ? null : { scope, homeCwd: cwd }))
+    },
+  }), [store, sessionId, cwd])
+
+  /**
+   * Wrap the base actions to intercept pinned VIRTUAL tab ids (injected from
+   * other sessions). Regular tab ids pass through unchanged. Virtual ids are
+   * detected by the `pinned:` prefix and routed to the HOME session via
+   * reduceFor (which doesn't notify — the revision bump is the local signal).
+   */
+  const wrappedActions = useMemo<WorkbenchActions>(() => {
+    if (pinnedVirtualTabs.length === 0) return actions
+    const closePinnedInHome = (virtualId: string): void => {
+      const { homeSessionId, tabId: originalId } = parsePinnedVirtualId(virtualId)
+      // The home cwd lives in the virtual tab's meta (snapshotted at pin
+      // time) — pass it to ptyClose so the host resolves the PTY in the
+      // correct workspace container (same scope the WS open used).
+      const vtab = pinnedVirtualTabs.find(t => t.id === virtualId)
+      const homeCwd = vtab !== undefined ? getPinnedHomeScope(vtab)?.cwd : undefined
+      store.reduceFor(homeSessionId, s => {
+        const leaf = leafWithTab(s.splits, originalId)
+        if (leaf !== undefined) return closeTab(s, leaf.id, originalId)
+        if (s.floats.some(f => f.tab.id === originalId)) return closeFloatByTab(s, originalId)
+        return s
+      })
+      if (isAgentTabId(originalId)) {
+        void api.agentPtyClose(agentUuidOf(originalId)).catch(() => { /* already released */ })
+      } else {
+        void api.ptyClose({ sessionId: homeSessionId, ...(homeCwd !== undefined ? { cwd: homeCwd } : {}) }, originalId).catch(() => { /* already released */ })
+      }
+      if (activePinnedTabId === virtualId) setActivePinnedTabId(null)
+      setPinnedRevision(v => v + 1)
+    }
+    return {
+      ...actions,
+      activateTab: (paneId, tabId) => {
+        if (isPinnedVirtualId(tabId)) {
+          setActivePinnedTabId(tabId)
+        } else {
+          setActivePinnedTabId(null)
+          actions.activateTab(paneId, tabId)
+        }
+      },
+      closeTab: (paneId, tabId) => {
+        if (isPinnedVirtualId(tabId)) {
+          closePinnedInHome(tabId)
+        } else {
+          actions.closeTab(paneId, tabId)
+        }
+      },
+      moveTabBefore: (payload, toPane, beforeTabId) => {
+        if (isPinnedVirtualId(payload.tabId)) return
+        if (isPinnedVirtualId(beforeTabId)) {
+          actions.moveTabToEdge(payload, toPane, 'center')
+        } else {
+          actions.moveTabBefore(payload, toPane, beforeTabId)
+        }
+      },
+      moveTabToEdge: (payload, toPane, zone) => {
+        if (isPinnedVirtualId(payload.tabId)) return
+        actions.moveTabToEdge(payload, toPane, zone)
+      },
+      floatTab: (tabId) => {
+        if (isPinnedVirtualId(tabId)) return
+        actions.floatTab(tabId)
+      },
+      pinTab: (tabId, scope) => {
+        if (isPinnedVirtualId(tabId)) {
+          if (scope !== null) return
+          const { homeSessionId, tabId: originalId } = parsePinnedVirtualId(tabId)
+          store.reduceFor(homeSessionId, s => setTabPin(s, originalId, null))
+          if (activePinnedTabId === tabId) setActivePinnedTabId(null)
+          setPinnedRevision(v => v + 1)
+        } else {
+          actions.pinTab?.(tabId, scope)
+        }
+      },
+    }
+  }, [actions, pinnedVirtualTabs, activePinnedTabId, store])
+
+  /**
+   * The explorer's @-reference button: append `@<relative path>` to the
+   * session's composer draft (space-separated). The conversation service is
+   * resolved lazily through `ctx.get` (the inject-free read — the app's own
+   * plugins read 'conversation' the same way); a missing service or scope
+   * degrades to a logged no-op, never a crash. Defined above the no-session
+   * early return — a hook must never sit behind a conditional return
+   * (React counts hooks per render).
+   */
+  const referenceInChat = useCallback((path: string): void => {
+    if (sessionId === undefined) return
+    appendToDraft(ctx, sessionId, `@${relativeTo(cwd ?? '', path)}`)
+  }, [ctx, sessionId, cwd])
+
+  if (state === undefined || sessionId === undefined) {
+    // Keep the unavailable controls focusable: touch users have no hover, so
+    // focus is the only way the existing Tooltip can explain what is missing.
+    return (
+      <div data-dsh-panel-host {...osFileDragShield}>
+        <div className={css.toggleCluster} data-dsh-toggle-cluster>
+          <Tooltip label={t('noSession')} side="bottom" delayMs={500}>
+            <button type="button" className={css.toggleButton} aria-disabled="true" aria-label={t('noSession')}>
+              <IconPanelRightOutline16 />
+            </button>
+          </Tooltip>
+        </div>
+      </div>
+    )
+  }
+
+  const onNewTab = (optionId: string): void => {
+    const service = ctx.get('betterSidebar')
+    const descriptor = service?.getTab(optionId)
+    if (service === undefined || descriptor === undefined) return
+    const title = typeof descriptor.title === 'function' ? descriptor.title() : descriptor.title
+    // The session scope rides along: lifecycle callbacks receive it (and
+    // the open stays in the current session, as before).
+    service.openTab({ type: optionId, title }, { sessionId, cwd })
+  }
+
+  /**
+   * The explorer's @-reference button: append `@<relative path>` to the
+   * session's composer draft (space-separated). Resolves the session-scope
+   * 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.get('betterSidebar')?.getTab(tab.type)
+    if (descriptor === undefined) return null
+    return typeof descriptor.icon === 'function' ? descriptor.icon(14) : descriptor.icon
+  }
+
+  /**
+   * The tab badge from the tab-type registry: a count (99+ capped) or a
+   * short text pill. A throwing badge is swallowed (no pill) — the tab
+   * strip must never break because a plugin's badge computation failed.
+   */
+  const tabBadgeOf = (tab: SidebarTab): ReactNode => {
+    const descriptor = ctx.get('betterSidebar')?.getTab(tab.type)
+    if (descriptor?.badge === undefined) return null
+    let value: string | number | null | undefined
+    try {
+      value = descriptor.badge(ctx, { sessionId, cwd }, state)
+    } catch (error) {
+      console.error('[dsh-coding-sidebar] tab badge error:', error)
+      return null
+    }
+    if (value === null || value === undefined || value === '') return null
+    const text = typeof value === 'number' ? (value > 99 ? '99+' : String(value)) : String(value)
+    return <span className={css.tabBadge}>{text}</span>
+  }
+
+  /**
+   * 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
+   * open/closed state it gates live views (the Subagent topology pauses its
+   * polling while the page is not actually visible). The pane id travels
+   * with the tab so diff tabs can split below their source pane.
+   */
+  // `placement` decides the visibility contract handed to the tab component:
+  // pane tabs are visible while the panel is open and they are active, but
+  // a free window is its own surface — its tab stays visible no matter what
+  // the panel does (the AGENTS §7.5 contract; plugin components honor
+  // `visible` to pause work, so tying floats to panelOpen would blank them
+  // the moment the sidebar collapses).
+  const renderTab = (tab: SidebarTab, active: boolean, paneId: string, placement: 'top' | 'float' = 'top') => {
+    // Pinned virtual tabs: pass the home session's scope (sessionId + cwd) so
+    // TerminalView's WS URL resolves to the home PTY, and effectiveTabId so
+    // the descriptor component receives the ORIGINAL tab id (the virtual id
+    // is only a display key). Regular tabs: effectiveTabId is undefined (no
+    // override), scope is the current session's.
+    const home = getPinnedHomeScope(tab)
+    return (
+      <TabContent
+        tab={tab}
+        effectiveTabId={home?.tabId}
+        paneId={paneId}
+        sessionId={home?.sessionId ?? sessionId}
+        cwd={home?.cwd ?? cwd}
+        expanded={state.expanded}
+        revealed={state.revealed ?? []}
+        onToggleDir={(path) => { store.reduce(s => toggleExpanded(s, path)) }}
+        onReferenceFile={referenceInChat}
+        ctx={ctx}
+        store={store}
+        visible={placement === 'float' ? true : state.panelOpen && active}
+        onSubagentJump={(childSessionId) => { subagentJumpRef.current = childSessionId }}
+        onOpenDiff={(diffTab) => { store.reduce(s => openDiffTab(s, paneId, diffTab)) }}
+        localeRevision={localeRevision}
+        tabsVersion={tabsVersion}
+      />
+    )
+  }
+
+  return (
+    <div data-dsh-panel-host {...osFileDragShield}>
+      {/*
+        The persistent toggle button at the top-right corner (side glyph).
+        Always pinned to the viewport corner — inside the panel's top-right
+        while it is open, sitting flush in the tab strip whose right end it
+        really squeezes (the strip reserves its width via CSS), so the tabs
+        genuinely yield space to it.
+      */}
+      <div className={css.toggleCluster} data-dsh-toggle-cluster>
+        <Tooltip label={state.panelOpen ? t('collapse') : t('expand')} side="bottom" delayMs={500}>
+          <button
+            type="button"
+            className={css.toggleButton}
+            aria-label={state.panelOpen ? t('collapse') : t('expand')}
+            onClick={() => { store.reduce(togglePanel) }}
+          >
+            <IconPanelRightOutline16 />
+          </button>
+        </Tooltip>
+      </div>
+      {/*
+        The panel stays mounted while collapsed (hidden off-screen) so the
+        slide in/out can animate; visibility hides it after the slide
+        settles. On NARROW viewports it is a full-width drawer; 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)}
+        data-dsh-panel
+        style={{
+          width: narrow ? '100vw' : Math.min(state.width, window.innerWidth),
+          // Narrow drawer: keep the bottom-anchored sheet above the on-screen
+          // keyboard (visualViewport inset); desktop panels are full-height
+          // and unaffected.
+          bottom: narrow && keyboardInset > 0 ? `${keyboardInset}px` : undefined,
+        }}
+       
+        data-dragging={anyDragging || undefined}
+      >
+          {!narrow && (
+            <div
+              className={clsx(css.panelResize, draggingWidth && css.panelResizeActive)}
+             
+              onPointerDown={(event) => {
+                event.preventDefault()
+                event.currentTarget.setPointerCapture(event.pointerId)
+                dragCommitted.current = false
+                widthDrag.current = { startX: event.clientX, startWidth: state.width }
+                setDraggingWidth(true)
+              }}
+              onPointerMove={(event) => {
+                if (!event.currentTarget.hasPointerCapture(event.pointerId)) return
+                const { startX, startWidth } = widthDrag.current
+                scheduleDrag(clampWidth(startWidth + (startX - event.clientX)))
+              }}
+              onPointerUp={(event) => {
+                if (!event.currentTarget.hasPointerCapture(event.pointerId)) return
+                if (dragCommitted.current) return
+                dragCommitted.current = true
+                event.currentTarget.releasePointerCapture(event.pointerId)
+                const { startX, startWidth } = widthDrag.current
+                // The up position is the pointer's FINAL position — a fast
+                // flick's tail is coalesced into the up event, so the last
+                // pointermove (the rAF pending value) can be stale. Commit
+                // from the up position (v0.13.1 semantics; issue #247).
+                const width = clampWidth(startWidth + (startX - event.clientX))
+                commitDrag(width, s => setWidth(s, width))
+                setDraggingWidth(false)
+              }}
+              onPointerCancel={(event) => { abortDrag(() => setDraggingWidth(false), event) }}
+              onLostPointerCapture={() => { abortDrag(() => setDraggingWidth(false)) }}
+            />
+          )}
+        <div className={css.panelBody}>
+          <Workbench
+            state={state}
+            tree={augmentedTree}
+            newTabOptions={buildNewTabOptions(state, ctx, { sessionId, cwd })}
+            actions={wrappedActions}
+            onNewTab={onNewTab}
+            renderTab={renderTab}
+            getTabIcon={tabIconOf}
+            getTabBadge={tabBadgeOf}
+          />
+        </div>
+      </div>
+      {/*
+        Free windows: tabs dragged out onto the conversation area (or floated
+        from the tab context menu). They live in the panel host like the
+        panels (viewport coordinates, immune to desktop-shell transforms) but
+        are independent of panel state — a window stays up while panels
+        collapse. The floats array's order is the stacking order; the content
+        reuses the regular tab renderer, so every tab type floats unchanged.
+      */}
+      {state.floats.map(float => (
+        <FreeWindow
+          key={float.id}
+          float={float}
+          renderTab={(tab, active, paneId) => renderTab(tab, active, paneId, 'float')}
+          getTabIcon={tabIconOf}
+          onRaise={() => { store.reduce(s => raiseFloat(s, float.id)) }}
+          onMove={(x, y) => { store.reduce(s => moveFloat(s, float.id, x, y)) }}
+          onResize={(w, h) => { store.reduce(s => resizeFloat(s, float.id, w, h)) }}
+          onDock={(paneId) => { store.reduce(s => dockFloat(s, float.id, paneId ?? undefined)) }}
+          onClose={() => { ctx.get('betterSidebar')?.closeTab(float.tab.id, sessionId === undefined ? undefined : { sessionId, cwd }) }}
+        />
+      ))}
+      {/*
+        The drag-out hint: while a tab drag hovers the conversation column,
+        a dashed overlay marks the drop zone there (pointer-transparent — it
+        must not disturb the drag it describes).
+      */}
+      {floatHint !== null && (
+        <div
+          className={css.floatDropHint}
+          style={{ left: floatHint.left, top: floatHint.top, width: floatHint.width, height: floatHint.height }}
+        >
+          <span className={css.floatDropHintLabel}>{t('floatDropHint')}</span>
+        </div>
+      )}
+    </div>
+  )
+}