dsh-better-sidebar 0.10.0

package/src/client/TabBar.tsx

@@ -0,0 +1,188 @@
+/**
+ * The tab strip of one pane: tabs capped at TAB_MAX_WIDTH (ellipsized),
+ * overflow scrolls horizontally, a close button per tab, a four-way split
+ * button cluster, and the + menu that opens new tabs (explorer / git /
+ * terminal). Tabs are draggable; dropping onto another tab inserts before it,
+ * dropping on the strip background appends to this pane.
+ */
+import { useEffect, useState, type ReactNode } from 'react'
+import clsx from 'clsx'
+import {
+  IconCloseFill14, IconPlusOutline16, Menu,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import type { SidebarTab } from './state.ts'
+import { t } from './locales.ts'
+import css from './sidebar.module.css'
+
+/** One + menu option. */
+export interface NewTabOption {
+  id: string
+  label: string
+  disabled?: boolean
+  /** Leading icon (Menu row). */
+  icon?: ReactNode
+}
+
+/** Drag payload for tab moves (HTML5 DnD dataTransfer). */
+export const TAB_DRAG_TYPE = 'application/x-dsh-tab'
+
+export interface TabDragPayload {
+  tabId: string
+  paneId: string
+}
+
+export function serializeDrag(payload: TabDragPayload): string {
+  return JSON.stringify(payload)
+}
+
+export function parseDrag(raw: string): TabDragPayload | null {
+  try {
+    const parsed = JSON.parse(raw) as TabDragPayload
+    if (typeof parsed.tabId === 'string' && typeof parsed.paneId === 'string') return parsed
+    return null
+  } catch {
+    return null
+  }
+}
+
+/** Global tab-drag flag: PDF iframes become non-interactive synchronously. */
+function setTabDragging(active: boolean): void {
+  if (active) document.body.setAttribute('data-dsh-tab-dragging', '')
+  else document.body.removeAttribute('data-dsh-tab-dragging')
+}
+
+export function TabBar(props: {
+  paneId: string
+  tabs: SidebarTab[]
+  active: string | null
+  onActivate: (tabId: string) => void
+  onClose: (tabId: string) => void
+  onNewTab: (optionId: string) => void
+  newTabOptions: NewTabOption[]
+  /** Drop of a tab from any pane: (payload, insertBeforeTabId | null). */
+  onDropTab: (payload: TabDragPayload, before: string | null) => void
+  /** Icon resolver for tab labels (reads from the tab descriptor registry). */
+  getTabIcon?: (tab: SidebarTab) => ReactNode
+}) {
+  const {
+    paneId, tabs, active, onActivate, onClose, onNewTab, newTabOptions, onDropTab, getTabIcon,
+  } = props
+  const [menuOpen, setMenuOpen] = useState(false)
+  const [dragOver, setDragOver] = useState(false)
+
+  useEffect(() => {
+    const clear = (): void => { setTabDragging(false); setDragOver(false) }
+    window.addEventListener('dragend', clear, true)
+    window.addEventListener('drop', clear, true)
+    window.addEventListener('blur', clear)
+    return () => {
+      window.removeEventListener('dragend', clear, true)
+      window.removeEventListener('drop', clear, true)
+      window.removeEventListener('blur', clear)
+    }
+  }, [])
+
+  return (
+    <div
+      className={clsx(css.tabBar, dragOver && css.tabBarDrop)}
+      onDragOver={(event) => {
+        // The strip owns drops on itself (merge into this pane); stopping
+        // propagation keeps the pane root from also running its edge-zone
+        // handler on the same drop.
+        event.preventDefault()
+        event.stopPropagation()
+        setDragOver(true)
+      }}
+      onDragLeave={() => { setDragOver(false) }}
+      onDrop={(event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        setDragOver(false)
+        setTabDragging(false)
+        const raw = event.dataTransfer.getData(TAB_DRAG_TYPE)
+        const payload = parseDrag(raw)
+        if (payload !== null) onDropTab(payload, null)
+      }}
+    >
+      <div className={css.tabList}>
+        {tabs.map(tab => (
+          <div
+            key={tab.id}
+            className={clsx(css.tab, active === tab.id && css.tabActive)}
+            title={tab.title}
+            draggable
+            onDragStart={(event) => {
+              setTabDragging(true)
+              event.dataTransfer.setData(TAB_DRAG_TYPE, serializeDrag({ tabId: tab.id, paneId }))
+              event.dataTransfer.effectAllowed = 'move'
+            }}
+            onDragEnd={() => { setTabDragging(false); setDragOver(false) }}
+            onDragOver={(event) => { event.preventDefault(); event.stopPropagation() }}
+            onDrop={(event) => {
+              event.preventDefault()
+              event.stopPropagation()
+              setTabDragging(false)
+              const raw = event.dataTransfer.getData(TAB_DRAG_TYPE)
+              const payload = parseDrag(raw)
+              if (payload !== null) onDropTab(payload, tab.id)
+            }}
+            onClick={() => { onActivate(tab.id) }}
+            onAuxClick={(event) => {
+              // Middle-click closes the tab (and suppresses autoscroll).
+              if (event.button === 1) {
+                event.preventDefault()
+                onClose(tab.id)
+              }
+            }}
+          >
+            {getTabIcon?.(tab) ?? null}
+            <span className={css.tabTitle}>{tab.title}</span>
+            <button
+              type="button"
+              className={css.tabClose}
+              aria-label={t('close')}
+              onClick={(event) => {
+                event.stopPropagation()
+                onClose(tab.id)
+              }}
+            >
+              <IconCloseFill14 />
+            </button>
+          </div>
+        ))}
+        {/*
+          The + sits immediately after the rightmost tab (sticky at the
+          right edge of the scrollport when the tabs overflow, so it stays
+          reachable no matter how many tabs are open).
+        */}
+        <Menu
+          open={menuOpen}
+          onClose={() => { setMenuOpen(false) }}
+          items={newTabOptions.map(option => ({
+            id: option.id,
+            label: option.label,
+            ...(option.disabled === true ? { disabled: true } : {}),
+            ...(option.icon !== undefined ? { icon: option.icon } : {}),
+          }))}
+          onSelect={(id) => {
+            onNewTab(id)
+            setMenuOpen(false)
+          }}
+          portal
+          align="end"
+          anchor={(
+            <button
+              type="button"
+              className={css.tabBarPlus}
+              aria-label={t('newTab')}
+              title={t('newTab')}
+              onClick={() => { setMenuOpen(v => !v) }}
+            >
+              <IconPlusOutline16 />
+            </button>
+          )}
+        />
+      </div>
+    </div>
+  )
+}

package/src/client/TerminalView.tsx

@@ -0,0 +1,233 @@
+/**
+ * The interactive terminal: xterm.js over a WebSocket to the host pty.
+ * The host replays the session's transcript on connect, then streams live
+ * output; input frames are raw text, resize frames are JSON with
+ * type:"resize". Transient disconnects (page refresh, host restart) reconnect
+ * automatically; a server-side refusal (close code 1011 with a reason, e.g.
+ * a failed pty spawn) stops the loop and shows the reason with a manual
+ * retry, and repeated unreasoned failures surface the close code after three
+ * attempts, so the banner never spins forever.
+ *
+ * Two attach modes share one upgrade endpoint:
+ * - `tabId` starting with `agent:` is an agent-owned terminal (created by
+ *   the `terminal_create` tool). The uuid is the suffix after `agent:`; the
+ *   view connects with `?uuid=...`. A close frame kills the pty (the agent's
+ *   terminal closes when the user closes the tab); a bare socket drop
+ *   leaves the pty alive (the agent owns the lifetime).
+ * - Any other `tabId` is a UI-tab terminal (the user created it from the +
+ *   menu). The view connects with `?tab=...&sessionId=...&cwd=...`. A close
+ *   frame schedules a 0-ms close; a bare socket drop gets the host's
+ *   reconnect grace.
+ */
+import { useEffect, useRef, useState } from 'react'
+import { Terminal, type ITheme } from 'xterm'
+import { FitAddon } from '@xterm/addon-fit'
+import 'xterm/css/xterm.css'
+import { t } from './locales.ts'
+import type { SessionScope } from './api.ts'
+import { agentUuidOf, isAgentTabId, type SidebarStore } from './state.ts'
+import { isDarkScheme, subscribeColorScheme, tokenValue } from './theme.ts'
+import css from './sidebar.module.css'
+
+/** How many consecutive unreasoned failures before showing the error banner. */
+const FAILURE_LIMIT = 3
+
+/**
+ * Curated ANSI palettes for the terminal. The surface colors (background,
+ * foreground, cursor, selection) ride the theme tokens so the terminal
+ * blends with the panel in both schemes; the 16 ANSI colors are the same
+ * designed palettes the app's code surfaces use (one-dark family for dark,
+ * one-light family for light), read live so a scheme flip re-themes in
+ * place.
+ */
+const ANSI_DARK: Record<string, string> = {
+  black: '#282c34', red: '#e06c75', green: '#98c379', yellow: '#e5c07b',
+  blue: '#61afef', magenta: '#c678dd', cyan: '#56b6c2', white: '#abb2bf',
+  brightBlack: '#5c6370', brightRed: '#e06c75', brightGreen: '#98c379',
+  brightYellow: '#e5c07b', brightBlue: '#61afef', brightMagenta: '#c678dd',
+  brightCyan: '#56b6c2', brightWhite: '#ffffff',
+}
+
+const ANSI_LIGHT: Record<string, string> = {
+  black: '#383a42', red: '#e45649', green: '#50a14f', yellow: '#c18401',
+  blue: '#0184bc', magenta: '#a626a4', cyan: '#0997b3', white: '#a0a1a7',
+  brightBlack: '#4f525e', brightRed: '#e45649', brightGreen: '#50a14f',
+  brightYellow: '#c18401', brightBlue: '#0184bc', brightMagenta: '#a626a4',
+  brightCyan: '#0997b3', brightWhite: '#fafafa',
+}
+
+/** The xterm theme for the current scheme (surface from tokens, ANSI curated). */
+function xtermTheme(): ITheme {
+  const dark = isDarkScheme()
+  const background = tokenValue('--dsw-alias-bg-base') || (dark ? '#111114' : '#ffffff')
+  const foreground = tokenValue('--dsw-alias-label-primary') || (dark ? '#e6e6e6' : '#1a1a1a')
+  return {
+    background,
+    foreground,
+    cursor: foreground,
+    cursorAccent: background,
+    selectionBackground: dark ? 'rgba(255,255,255,0.22)' : 'rgba(0,0,0,0.12)',
+    ...(dark ? ANSI_DARK : ANSI_LIGHT),
+  }
+}
+
+export function TerminalView(props: { scope: SessionScope; tabId: string; store: SidebarStore }) {
+  const { scope, tabId, store } = props
+  const hostRef = useRef<HTMLDivElement>(null)
+  const [connected, setConnected] = useState(false)
+  const [fatal, setFatal] = useState<string | null>(null)
+  const [lastUrl, setLastUrl] = useState<string | null>(null)
+  const connectRef = useRef<(() => void) | null>(null)
+
+  useEffect(() => {
+    const host = hostRef.current
+    if (host === null) return
+    const term = new Terminal({
+      cursorBlink: true,
+      fontSize: 13,
+      fontFamily: tokenValue('--ds-font-family-code') || '"SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+      allowTransparency: true,
+      convertEol: false,
+      scrollback: 4000,
+      theme: xtermTheme(),
+    })
+    const fit = new FitAddon()
+    term.loadAddon(fit)
+    term.open(host)
+    fit.fit()
+    // Re-theme in place when the app's scheme flips (tokens + palette).
+    const applyTheme = (): void => {
+      term.options.theme = xtermTheme()
+      term.refresh(0, term.rows - 1)
+    }
+    const schemeSub = subscribeColorScheme(applyTheme)
+
+    let socket: WebSocket | null = null
+    let closed = false
+    let retry: number | undefined
+    let failures = 0
+
+    const wsUrl = (): string => {
+      const url = new URL('/sidebar/ws/terminal', location.origin)
+      url.protocol = url.protocol === 'https:' ? 'wss:' : 'ws:'
+      // Agent terminals attach by uuid (the host looks them up in the agent
+      // pty registry); UI-tab terminals attach by sessionId+tab (the host
+      // uses the UI-tab pty manager). Same upgrade endpoint, different query.
+      if (isAgentTabId(tabId)) {
+        url.search = new URLSearchParams({ uuid: agentUuidOf(tabId) }).toString()
+      } else {
+        const params = new URLSearchParams({ sessionId: scope.sessionId, tab: tabId })
+        if (scope.cwd !== undefined && scope.cwd !== '') params.set('cwd', scope.cwd)
+        url.search = params.toString()
+      }
+      // Same construction the app's own downlink WebSockets use (new URL
+      // over location.origin + protocol swap): whatever the environment
+      // does to the app's websockets applies identically here.
+      return url.toString()
+    }
+
+    const sendResize = (): void => {
+      if (socket !== null && socket.readyState === WebSocket.OPEN) {
+        socket.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }))
+      }
+    }
+
+    const connect = (): void => {
+      if (closed) return
+      const url = wsUrl()
+      setLastUrl(url)
+      socket = new WebSocket(url)
+      socket.onopen = () => {
+        failures = 0
+        setConnected(true)
+        setFatal(null)
+        sendResize()
+      }
+      socket.onmessage = (event) => {
+        if (typeof event.data === 'string') term.write(event.data)
+      }
+      socket.onclose = (event) => {
+        setConnected(false)
+        // A server-side refusal carries a close code + reason; retrying it
+        // forever would only spin the banner, so surface it with a retry.
+        if (event.code === 1011 && event.reason !== '') {
+          setFatal(event.reason)
+          return
+        }
+        // Unreasoned drops (upgrade rejected, host down, mid-handshake
+        // refusal) normally recover on the next attempt; after a few
+        // consecutive failures stop spinning and show the close code.
+        failures += 1
+        if (failures >= FAILURE_LIMIT) {
+          const detail = event.reason !== '' ? ` (${event.code}: ${event.reason})` : ` (${event.code})`
+          console.error('[dsh-better-sidebar] terminal connection failed:', event.code, event.reason, url)
+          setFatal(`${t('terminalConnectFailed')}${detail}`)
+          return
+        }
+        if (!closed) retry = window.setTimeout(connect, 2000)
+      }
+      socket.onerror = () => {
+        socket?.close()
+      }
+    }
+    connectRef.current = connect
+
+    const inputSub = term.onData((data) => {
+      if (socket !== null && socket.readyState === WebSocket.OPEN) socket.send(data)
+    })
+    const observer = new ResizeObserver(() => {
+      try {
+        fit.fit()
+        sendResize()
+      } catch {
+        // The terminal may be mid-dispose; ignore.
+      }
+    })
+    observer.observe(host)
+
+    connect()
+    return () => {
+      closed = true
+      window.clearTimeout(retry)
+      observer.disconnect()
+      schemeSub()
+      inputSub.dispose()
+      // The close frame tells the host the owning tab is GONE (immediate
+      // pty release). A bare unmount — conversation switch, re-render,
+      // page unload — leaves the tab open, so the socket drop alone hands
+      // the process to the host's reconnect grace: switching back or
+      // refreshing reattaches the SAME shell instead of respawning one.
+      // (The host respawns on its own when the authoritative cwd changed.)
+      // Agent terminals follow the same rule: a close frame kills the pty
+      // (the user closed the sidebar tab); a bare socket drop leaves it
+      // alive (the agent owns the lifetime).
+      if (!store.tabOpen(scope.sessionId, tabId)
+        && socket !== null && socket.readyState === WebSocket.OPEN) {
+        socket.send(JSON.stringify({ type: 'close' }))
+      }
+      socket?.close()
+      term.dispose()
+      connectRef.current = null
+    }
+  }, [scope.sessionId, scope.cwd, tabId, store])
+
+  return (
+    <div className={css.terminalWrap}>
+      {fatal !== null && (
+        <div className={css.terminalBanner}>
+          {t('terminalError')}: {fatal}
+          {lastUrl !== null && <div className={css.terminalBannerUrl}>{lastUrl}</div>}
+          <button
+            type="button"
+            className={css.terminalRetry}
+            onClick={() => { setFatal(null); connectRef.current?.() }}
+          >
+            {t('terminalRetry')}
+          </button>
+        </div>
+      )}
+      {fatal === null && !connected && <div className={css.terminalBanner}>{t('disconnected')}</div>}
+      <div ref={hostRef} className={css.terminal} />
+    </div>
+  )
+}