@lijian-ui/dsh-term 0.2.0 → 0.3.0

package/src/client/term/TerminalPanel.tsx

@@ -8,21 +8,32 @@
  * the web shell's frame, beside the file-manager panels (preview/explorer)
  * when present. The panel itself only owns its inner content (header + stage).
  *
- * A-version scope: pure user terminal. No agent integration, no SSH targets
- * yet — those are the B-version.
+ * Features: shell selector with availability detection, terminal reuse
+ * (close detaches — PTY keeps running; reopen re-attaches), 16-color ANSI
+ * palette, safe cwd fallback, selection → add to conversation.
  * @module dsh-term/client/term/TerminalPanel
  */
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react'
 import type { JSX } from 'react'
 import { Terminal } from 'xterm'
 import { FitAddon } from '@xterm/addon-fit'
 import type { ClientContext, SessionId } from '@deepseek-ai/dsh-client-runtime/client'
-import type { TermEvent, TermSessionInfo } from '../../core/types.ts'
+import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots'
+import type { ShellInfo, ShellType, TermEvent, TermSessionInfo } from '../../core/types.ts'
 import type { TermApi } from './api.ts'
+import { appendToConversationDraft } from './chat-helper.ts'
 import { XTERM_CSS } from './xterm-styles.ts'
 import css from './term.module.css'
 
+/** Injected props for the panel. */
+interface PanelProps {
+  ctx: ClientContext
+  api: TermApi
+  onClose: () => void
+  t: TranslateNS<'dsh-term'>
+}
+
 /** One open tab: the wire info plus its live xterm handles. */
 interface Tab {
   readonly sessionId: string
@@ -32,6 +43,56 @@ interface Tab {
   readonly wrap: HTMLDivElement
 }
 
+/** Floating "Add to chat" button state. */
+interface FloatBtn {
+  readonly top: number
+  readonly left: number
+  readonly content: string
+}
+
+/** All shell kinds in display order (used when detection fails). */
+const FALLBACK_SHELLS: readonly ShellType[] = ['zsh', 'bash', 'gitbash', 'powershell', 'cmd']
+
+/** 16-color ANSI palette for dark backgrounds (One Dark inspired). */
+const DARK_PALETTE: Record<string, string> = {
+  black: '#282c34',
+  red: '#e06c75',
+  green: '#98c379',
+  yellow: '#e5c07b',
+  blue: '#61afef',
+  magenta: '#c678dd',
+  cyan: '#56b6c2',
+  white: '#abb2bf',
+  brightBlack: '#5c6370',
+  brightRed: '#ef6e7e',
+  brightGreen: '#a3d978',
+  brightYellow: '#f0c674',
+  brightBlue: '#7ab8f5',
+  brightMagenta: '#d68adf',
+  brightCyan: '#6fd0dc',
+  brightWhite: '#d7dae0',
+}
+
+/** 16-color ANSI palette for light backgrounds (Nord inspired). */
+const LIGHT_PALETTE: Record<string, string> = {
+  black: '#3b4252',
+  red: '#bf616a',
+  green: '#a3be8c',
+  yellow: '#ebcb8b',
+  blue: '#81a1c1',
+  magenta: '#b48ead',
+  cyan: '#8fbcbb',
+  white: '#4c566a',
+  brightBlack: '#4c566a',
+  brightRed: '#bf616a',
+  brightGreen: '#a3be8c',
+  brightYellow: '#ebcb8b',
+  brightBlue: '#81a1c1',
+  brightMagenta: '#b48ead',
+  brightCyan: '#8fbcbb',
+  brightWhite: '#2e3440',
+}
+
 /** Inject the xterm core styles once (idempotent). */
 const XTERM_STYLE_ID = 'dsh-term-xterm-style'
 function adoptXtermStyles(): void {
@@ -51,6 +112,7 @@ function themeOf(): Record<string, string> {
       foreground: '#ced3da',
       cursor: '#ced3da',
       selectionBackground: 'rgba(255,255,255,0.2)',
+      ...DARK_PALETTE,
     }
   }
   return {
@@ -58,22 +120,7 @@ function themeOf(): Record<string, string> {
     foreground: '#1f2329',
     cursor: '#1f2329',
     selectionBackground: 'rgba(22,93,255,0.25)',
-    black: '#1f2329',
-    red: '#d4393b',
-    green: '#167c2e',
-    yellow: '#b58900',
-    blue: '#0a4d8c',
-    magenta: '#a020a0',
-    cyan: '#0379a6',
-    white: '#5a5f66',
-    brightBlack: '#6a6f76',
-    brightRed: '#e5585a',
-    brightGreen: '#1a9c3a',
-    brightYellow: '#d6a200',
-    brightBlue: '#1a6fcf',
-    brightMagenta: '#c040c0',
-    brightCyan: '#1aa0d6',
-    brightWhite: '#2f353b',
+    ...LIGHT_PALETTE,
   }
 }
 
@@ -85,19 +132,55 @@ function currentCwd(ctx: ClientContext): string {
   return typeof cwd === 'string' && cwd !== '' ? cwd : ''
 }
 
-/** The docked panel: header (title / tabs / new / collapse) + xterm stage. */
+/** The docked panel: header (title / shell / tabs / new / reopen / collapse) + xterm stage. */
 export function TerminalPanel({
-  ctx, api, onClose,
-}: { ctx: ClientContext; api: TermApi; onClose: () => void }): JSX.Element {
+  ctx, api, onClose, t,
+}: PanelProps): JSX.Element {
+  // This panel is rendered via createRoot (not a slot outlet), so it must
+  // explicitly subscribe to locale revision to re-render on language switch.
+  useSyncExternalStore(
+    (cb: () => void) => ctx.locale.subscribe(cb),
+    () => ctx.locale.getSnapshot().revision,
+  )
+
   const [tabs, setTabs] = useState<readonly Tab[]>([])
   const [active, setActive] = useState<string | null>(null)
+  const [shells, setShells] = useState<readonly ShellInfo[] | null>(null)
+  const [selectedShell, setSelectedShell] = useState<ShellType>('bash')
+  const [detachedSessions, setDetachedSessions] = useState<readonly TermSessionInfo[]>([])
+  const [showReopen, setShowReopen] = useState(false)
+  const [reopenLeft, setReopenLeft] = useState(6)
+  const [floatBtn, setFloatBtn] = useState<FloatBtn | null>(null)
   const stageRef = useRef<HTMLDivElement | null>(null)
+  const panelRef = useRef<HTMLDivElement | null>(null)
   const tabsRef = useRef(tabs)
   tabsRef.current = tabs
+  const floatBtnRef = useRef<HTMLButtonElement | null>(null)
 
   // xterm needs its core stylesheet; inject once when the panel mounts.
   useEffect(() => { adoptXtermStyles() }, [])
 
+  // Detect available shells on mount; default to the first available.
+  useEffect(() => {
+    let cancelled = false
+    void api.shells().then((result) => {
+      if (cancelled) return
+      const list = result.shells
+      setShells(list)
+      if (list.length > 0) {
+        const isWin = navigator.userAgent.includes('Windows')
+        const preferred: ShellType = isWin ? 'powershell' : 'zsh'
+        const initial = list.some((s) => s.id === preferred)
+          ? preferred
+          : list[0].id
+        setSelectedShell(initial)
+      }
+    }).catch(() => {
+      if (!cancelled) setShells(FALLBACK_SHELLS.map((id) => ({ id, labelKey: `ui.shell.${id}` })))
+    })
+    return () => { cancelled = true }
+  }, [api])
+
   // Keep every open tab's xterm theme in lockstep with the shell dark marker
   // (the shell toggles body[data-ds-dark-theme] — CSS only can't reach xterm).
   useEffect(() => {
@@ -115,20 +198,32 @@ export function TerminalPanel({
   useEffect(() => {
     const off = api.subscribe((event: TermEvent) => {
       if (event.kind === 'output') {
-        const tab = tabsRef.current.find((t) => t.sessionId === event.id)
+        const tab = tabsRef.current.find((tb) => tb.sessionId === event.id)
         tab?.term.write(event.data)
         return
       }
       if (event.kind === 'exit') {
-        const tab = tabsRef.current.find((t) => t.sessionId === event.id)
-        if (tab !== undefined) tab.term.write(`\r\n[dsh-term] 进程已退出（code ${event.exitCode}）\r\n`)
+        const tab = tabsRef.current.find((tb) => tb.sessionId === event.id)
+        if (tab !== undefined) tab.term.write(`\r\n${event.message ?? `\r\n[dsh-term] Process exited (code ${event.exitCode})`}\r\n`)
+        setDetachedSessions((prev) => prev.filter((s) => s.id !== event.id))
+        return
+      }
+      if (event.kind === 'detached') {
+        // The host marked a session as detached; update our list.
+        // The closeTab caller already updates local state; this is a no-op
+        // for the tab that initiated the detach, but catches external detaches.
+        return
+      }
+      if (event.kind === 'reattached') {
+        setDetachedSessions((prev) => prev.filter((s) => s.id !== event.session.id))
+        return
       }
     })
     return off
   }, [api])
 
   /** Create a tab: xterm instance + host spawn, then attach output routing. */
-  const openTab = useCallback(async (): Promise<void> => {
+  const openTab = useCallback(async (shell?: ShellType): Promise<void> => {
     if (stageRef.current === null) return
     const wrap = document.createElement('div')
     wrap.className = css.termWrap
@@ -150,19 +245,20 @@ export function TerminalPanel({
     }
     // Route typed input straight to the host.
     term.onData((data) => {
-      const tab = tabsRef.current.find((t) => t.term === term)
+      const tab = tabsRef.current.find((tb) => tb.term === term)
       if (tab !== undefined) void api.write(tab.sessionId, data)
     })
 
     let session: TermSessionInfo
     try {
       session = await api.spawn({
+        shell: shell ?? selectedShell,
         cwd: currentCwd(ctx) || undefined,
         cols: term.cols,
         rows: term.rows,
       })
     } catch (error) {
-      term.write(`\r\n[dsh-term] 启动失败: ${String(error)}\r\n`)
+      term.write(`\r\n${t('msg.spawnFailed', { 0: String(error) })}\r\n`)
       return
     }
     const tab: Tab = { sessionId: session.id, title: session.title, term, fit, wrap }
@@ -171,13 +267,48 @@ export function TerminalPanel({
     // Sync the first real size back to the PTY (fit() before open may be off).
     void api.resize(session.id, term.cols, term.rows)
     term.focus()
-  }, [api, ctx])
+  }, [api, ctx, selectedShell, t])
+
+  /** Reattach to a detached session: create a fresh xterm and wire it up. */
+  const reopenTab = useCallback(async (sessionId: string): Promise<void> => {
+    if (stageRef.current === null) return
+    let session: TermSessionInfo
+    try {
+      session = await api.reattach(sessionId)
+    } catch {
+      return
+    }
+    const wrap = document.createElement('div')
+    wrap.className = css.termWrap
+    stageRef.current.appendChild(wrap)
+    const term = new Terminal({
+      fontSize: 13,
+      fontFamily: 'ui-monospace, "SF Mono", Menlo, Consolas, monospace',
+      cursorBlink: true,
+      theme: themeOf(),
+      scrollback: 5000,
+    })
+    const fit = new FitAddon()
+    term.loadAddon(fit)
+    term.open(wrap)
+    try { fit.fit() } catch { /* deferred */ }
+    term.onData((data) => {
+      const tab = tabsRef.current.find((tb) => tb.term === term)
+      if (tab !== undefined) void api.write(tab.sessionId, data)
+    })
+    const tab: Tab = { sessionId: session.id, title: session.title, term, fit, wrap }
+    setTabs((prev) => [...prev, tab])
+    setActive(session.id)
+    void api.resize(session.id, term.cols, term.rows)
+    setShowReopen(false)
+    term.focus()
+  }, [api])
 
-  // First tab on mount.
+  // First tab on mount (wait until shells are detected so we use the right one).
   useEffect(() => {
-    if (tabs.length === 0) void openTab()
+    if (tabs.length === 0 && shells !== null) void openTab()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [shells])
 
   // Refit the active tab whenever the stage gets a size (window resize, tab
   // switch, or the docked column being shown after a collapse). A hidden
@@ -186,7 +317,7 @@ export function TerminalPanel({
     const stage = stageRef.current
     if (stage === null) return
     const refit = (): void => {
-      const tab = tabsRef.current.find((t) => t.sessionId === active)
+      const tab = tabsRef.current.find((tb) => tb.sessionId === active)
       if (tab === undefined) return
       try {
         tab.fit.fit()
@@ -206,7 +337,7 @@ export function TerminalPanel({
       tab.wrap.classList.toggle(css.termWrapActive, tab.sessionId === active)
     }
     if (active !== null) {
-      const tab = tabsRef.current.find((t) => t.sessionId === active)
+      const tab = tabsRef.current.find((tb) => tb.sessionId === active)
       if (tab !== undefined) {
         try {
           tab.fit.fit()
@@ -219,16 +350,30 @@ export function TerminalPanel({
     }
   }, [active, api, tabs])
 
+  /** Close a tab: detach the PTY (keep it alive) and dispose the xterm locally. */
   const closeTab = (sessionId: string): void => {
-    const tab = tabsRef.current.find((t) => t.sessionId === sessionId)
+    const tab = tabsRef.current.find((tb) => tb.sessionId === sessionId)
     if (tab !== undefined) {
-      void api.close(sessionId)
+      void api.detach(sessionId)
       tab.term.dispose()
       tab.wrap.remove()
     }
-    const next = tabsRef.current.filter((t) => t.sessionId !== sessionId)
+    const next = tabsRef.current.filter((tb) => tb.sessionId !== sessionId)
     setTabs(next)
     if (active === sessionId) setActive(next[0]?.sessionId ?? null)
+    // Track the detached session for the reopen dropdown.
+    setDetachedSessions((prev) => {
+      if (prev.some((s) => s.id === sessionId)) return prev
+      const tab2 = tabsRef.current.find((tb) => tb.sessionId === sessionId)
+      if (tab2 === undefined) return prev
+      return [...prev, { id: sessionId, title: tab2.title, cwd: '', cols: 80, rows: 24, alive: true, exitCode: null, shell: 'bash', detached: true }]
+    })
+  }
+
+  /** Kill a detached session permanently (remove from background list). */
+  const killDetached = (sessionId: string): void => {
+    void api.close(sessionId)
+    setDetachedSessions((prev) => prev.filter((s) => s.id !== sessionId))
   }
 
   // Panel teardown: kill every host session and dispose the xterm instances.
@@ -244,10 +389,93 @@ export function TerminalPanel({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  // Selection → floating "Add to chat" button. xterm renders to canvas so
+  // there is no DOM selection; we read term.getSelection() on mouseup inside
+  // the terminal body and position the button at the pointer.
+  useEffect(() => {
+    const stage = stageRef.current
+    const panel = panelRef.current
+    if (stage === null || panel === null) return
+
+    const onMouseUp = (e: MouseEvent): void => {
+      if (floatBtnRef.current !== null && floatBtnRef.current.contains(e.target as Node)) return
+      requestAnimationFrame(() => {
+        const tab = tabsRef.current.find((tb) => tb.sessionId === active)
+        const sel = tab?.term.getSelection() ?? ''
+        if (!sel.trim()) {
+          setFloatBtn(null)
+          return
+        }
+        const panelRect = panel.getBoundingClientRect()
+        const top = Math.max(e.clientY - panelRect.top, 44)
+        const left = Math.min(
+          Math.max(e.clientX - panelRect.left, 70),
+          panelRect.width - 70,
+        )
+        setFloatBtn({ top, left, content: sel })
+      })
+    }
+
+    const onDocMouseDown = (e: MouseEvent): void => {
+      if (floatBtnRef.current !== null && floatBtnRef.current.contains(e.target as Node)) return
+      setFloatBtn(null)
+    }
+
+    stage.addEventListener('mouseup', onMouseUp)
+    document.addEventListener('mousedown', onDocMouseDown)
+    return () => {
+      stage.removeEventListener('mouseup', onMouseUp)
+      document.removeEventListener('mousedown', onDocMouseDown)
+    }
+  }, [active])
+
+  // Hide the float button when the selection is cleared by xterm.
+  useEffect(() => {
+    const tab = tabs.find((tb) => tb.sessionId === active)
+    if (tab === undefined) return
+    const d = tab.term.onSelectionChange(() => {
+      if (!tab.term.hasSelection()) setFloatBtn(null)
+    })
+    return () => d.dispose()
+  }, [active, tabs])
+
+  // Close the reopen dropdown on outside click.
+  useEffect(() => {
+    if (!showReopen) return
+    const onDown = (e: MouseEvent): void => {
+      const target = e.target as HTMLElement
+      if (target.closest(`[data-reopen-dropdown]`) !== null) return
+      if (target.closest(`[data-reopen-btn]`) !== null) return
+      setShowReopen(false)
+    }
+    document.addEventListener('mousedown', onDown)
+    return () => document.removeEventListener('mousedown', onDown)
+  }, [showReopen])
+
+  const shellOptions = shells ?? FALLBACK_SHELLS.map((id) => ({ id, labelKey: `ui.shell.${id}` }))
+
   return (
-    <div className={css.col} data-dsh-term="">
+    <div className={css.col} data-dsh-term="" ref={panelRef}>
       <div className={css.toolbar}>
-        <span className={css.title}>终端</span>
+        <span className={css.title}>{t('ui.panel.title')}</span>
+        <span className={css.tabDivider} />
+        <select
+          className={css.shellSelect}
+          value={selectedShell}
+          onChange={(e) => {
+            const next = e.target.value as ShellType
+            if (next === selectedShell) return
+            setSelectedShell(next)
+            if (active !== null) closeTab(active)
+            void openTab(next)
+          }}
+          title={t('ui.panel.shellTitle')}
+          disabled={shells === null}
+        >
+          {shellOptions.map((s) => (
+            <option key={s.id} value={s.id}>{t(s.labelKey as 'ui.shell.bash')}</option>
+          ))}
+        </select>
         <span className={css.tabDivider} />
         {tabs.map((tab) => (
           <button
@@ -260,7 +488,7 @@ export function TerminalPanel({
             <span>{tab.title}</span>
             <span
               role="button"
-              aria-label={`关闭 ${tab.title}`}
+              aria-label={t('ui.tab.closeAria', { 0: tab.title })}
               className={css.tabClose}
               onClick={(event) => {
                 event.stopPropagation()
@@ -271,13 +499,68 @@ export function TerminalPanel({
             </span>
           </button>
         ))}
-        <button type="button" className={css.addTab} title="新建终端" onClick={() => void openTab()}>+</button>
+        <button type="button" className={css.addTab} title={t('ui.panel.addTabTitle')} onClick={() => void openTab()}>+</button>
+        {detachedSessions.length > 0 && (
+          <button
+            type="button"
+            data-reopen-btn=""
+            className={css.reopenBtn}
+            title={t('ui.panel.reopenTitle')}
+            onClick={(e) => {
+              setReopenLeft(e.currentTarget.offsetLeft)
+              setShowReopen((v) => !v)
+            }}
+          >
+            ↻{detachedSessions.length}
+          </button>
+        )}
+        {showReopen && detachedSessions.length > 0 && (
+          <div data-reopen-dropdown="" className={css.reopenDropdown} style={{ left: reopenLeft }}>
+            <div className={css.reopenHeader}>{t('ui.panel.backgroundSessions')}</div>
+            {detachedSessions.map((s) => (
+              <div key={s.id} className={css.reopenItem}>
+                <button
+                  type="button"
+                  className={css.reopenItemBtn}
+                  onClick={() => void reopenTab(s.id)}
+                >
+                  <span>{s.title}</span>
+                </button>
+                <button
+                  type="button"
+                  className={css.reopenItemKill}
+                  title="×"
+                  onClick={() => killDetached(s.id)}
+                >
+                  ×
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
         <span className={css.spacer} />
-        <button type="button" className={css.collapse} title="收起" onClick={onClose}>—</button>
+        <button type="button" className={css.collapse} title={t('ui.panel.collapseTitle')} onClick={onClose}>—</button>
       </div>
       <div className={css.stage} ref={stageRef}>
-        {tabs.length === 0 && <div className={css.emptyHint}>点击 + 新建终端</div>}
+        {tabs.length === 0 && <div className={css.emptyHint}>{t('ui.panel.emptyHint')}</div>}
       </div>
+      {floatBtn !== null && (
+        <button
+          ref={floatBtnRef}
+          className={css.addToChatBtn}
+          style={{ top: floatBtn.top, left: floatBtn.left }}
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={() => {
+            appendToConversationDraft(ctx, floatBtn.content.replace(/\s+$/, ''))
+            setFloatBtn(null)
+            const tab = tabsRef.current.find((tb) => tb.sessionId === active)
+            tab?.term.clearSelection()
+          }}
+          title={t('ui.panel.addToChat')}
+        >
+          {t('ui.panel.addToChat')}
+        </button>
+      )}
     </div>
   )
 }

package/src/client/term/api.ts

@@ -5,7 +5,7 @@
  * @module dsh-term/client/term/api
  */
 
-import type { TermEvent, TermSessionInfo, TermSpawnRequest } from '../../core/types.ts'
+import type { ShellInfo, TermEvent, TermSessionInfo, TermSpawnRequest } from '../../core/types.ts'
 
 /** Envelope mirror of the host route layer. */
 type Envelope<T> = { ok: true; value: T } | { ok: false; error: { code: string; message: string } }
@@ -38,11 +38,26 @@ export class TermApi {
     return call<{ ok: boolean }>('/dsh-term/resize', { id, cols, rows })
   }
 
-  /** Close one session. */
+  /** Close one session (kill the PTY). */
   close(id: string): Promise<{ ok: boolean }> {
     return call<{ ok: boolean }>('/dsh-term/close', { id })
   }
 
+  /** Detach a session (keep the PTY alive, mark as detached). */
+  detach(id: string): Promise<{ ok: boolean }> {
+    return call<{ ok: boolean }>('/dsh-term/detach', { id })
+  }
+
+  /** Reattach to a detached session; returns the wire info. */
+  reattach(id: string): Promise<TermSessionInfo> {
+    return call<TermSessionInfo>('/dsh-term/reattach', { id })
+  }
+
+  /** List available shells on the host. */
+  shells(): Promise<{ shells: readonly ShellInfo[] }> {
+    return call<{ shells: readonly ShellInfo[] }>('/dsh-term/shells')
+  }
+
   /** Current session listing (used on reconnect). */
   list(): Promise<{ sessions: readonly TermSessionInfo[] }> {
     return call<{ sessions: readonly TermSessionInfo[] }>('/dsh-term/list')

package/src/client/term/chat-helper.ts

@@ -0,0 +1,28 @@
+/**
+ * Conversation integration helper: append terminal selection text to the
+ * active session's composer draft. Mirrors file-manager's appendToDraft
+ * pattern — resolves the session-scoped input facade and calls setDraft.
+ * @module dsh-term/client/term/chat-helper
+ */
+
+import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
+import type { SessionId } from '@deepseek-ai/dsh-client-runtime/client'
+
+/**
+ * Append `text` to the current session's composer draft.
+ * Returns false when there is no active session or the conversation service
+ * is unavailable.
+ */
+export function appendToConversationDraft(ctx: ClientContext, text: string): boolean {
+  const snapshot = ctx.sessions.list.getSnapshot()
+  const sessionId = snapshot.current as SessionId | undefined
+  if (sessionId === undefined) return false
+  const actx = ctx.sessions.scope(sessionId)
+  if (actx === undefined) return false
+  const conversation = (ctx as unknown as { conversation?: { input: { for(c: unknown): { state: { getSnapshot(): { draft: string } }; setDraft(s: string): void } } } }).conversation
+  if (conversation === undefined) return false
+  const input = conversation.input.for(actx as unknown as ClientContext)
+  const draft = input.state.getSnapshot().draft
+  input.setDraft(draft.trim() === '' ? text : `${draft}\n${text}`)
+  return true
+}