dsh-single-terminal 0.1.0

package/lib/types/host/types.d.ts

@@ -0,0 +1,109 @@
+/**
+ * dsh-single-terminal —— 共享类型：插件配置、WS 帧协议、宿主服务最小视图。
+ */
+export interface CustomShellConfig {
+    id: string;
+    name: string;
+    command: string;
+    args: string[];
+}
+export interface TerminalPluginConfig {
+    defaultShell: string;
+    defaultCwd: string;
+    scrollbackLimit: number;
+    fontSize: number;
+    fontFamily: string;
+    customShells: CustomShellConfig[];
+}
+export interface ShellInfo {
+    id: string;
+    name: string;
+    available: boolean;
+}
+export interface SessionInfo {
+    id: string;
+    shellId: string;
+    label: string;
+    cwd: string;
+    alive: boolean;
+    pid: number;
+    exitCode: number | null;
+    signal: number | null;
+}
+/** client → host */
+export type ClientFrame = {
+    type: 'ping';
+} | {
+    type: 'list';
+} | {
+    type: 'open';
+    shellId: string;
+    cols: number;
+    rows: number;
+    cwd?: string;
+} | {
+    type: 'input';
+    id: string;
+    data: string;
+} | {
+    type: 'resize';
+    id: string;
+    cols: number;
+    rows: number;
+} | {
+    type: 'attach';
+    id: string;
+} | {
+    type: 'close';
+    id: string;
+};
+/** host → client */
+export type HostFrame = {
+    type: 'pong';
+} | {
+    type: 'hello';
+    platform: string;
+    defaultShell: string;
+    fontSize: number;
+    fontFamily: string;
+} | {
+    type: 'shells';
+    defaultShell: string;
+    shells: ShellInfo[];
+    sessions: SessionInfo[];
+} | {
+    type: 'opened';
+    session: SessionInfo;
+} | {
+    type: 'data';
+    id: string;
+    data: string;
+} | {
+    type: 'replay';
+    id: string;
+    data: string;
+} | {
+    type: 'exit';
+    id: string;
+    exitCode: number | null;
+    signal: number | null;
+    closed?: boolean;
+} | {
+    type: 'error';
+    message: string;
+    id?: string;
+};
+import type { IncomingMessage } from 'node:http';
+import type { Duplex } from 'node:stream';
+/** 宿主 connection 服务最小视图（@deepseek-ai/dsh-client-connection）。 */
+export interface ConnectionService {
+    requestRejection(request: IncomingMessage): number | undefined;
+}
+/** 宿主 webServer 服务最小视图（@deepseek-ai/dsh-host-webserver）。 */
+export interface WebServerService {
+    registerUpgrade(route: {
+        path: string;
+        handler: (req: IncomingMessage, socket: Duplex, head: Buffer) => void | Promise<void>;
+    }): () => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/types/host/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/host/types.ts"],"names":[],"mappings":"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"}

package/lib/types/host/types.js

@@ -0,0 +1,4 @@
+/**
+ * dsh-single-terminal —— 共享类型：插件配置、WS 帧协议、宿主服务最小视图。
+ */
+export {};

package/package.json

@@ -0,0 +1,102 @@
+{
+  "name": "dsh-single-terminal",
+  "version": "0.1.0",
+  "author": "jsoncode",
+  "license": "MIT",
+  "description": "Interactive terminal drawer plugin (dual-face): bottom drawer with real PTY terminals (xterm.js), multi-tab, Windows shell picker (PowerShell default / pwsh / CMD / Git Bash / WSL + custom), docked (occupies page height) or overlay mode, keep-alive sessions with reconnect replay. Bilingual UI (zh/en)",
+  "type": "module",
+  "packageManager": "pnpm@10.33.0",
+  "keywords": [
+    "dsh-plugin",
+    "dsh-single-terminal",
+    "terminal",
+    "xterm",
+    "pty"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "check": "tsc -b --pretty false",
+    "build": "node -e \"require('fs').rmSync('lib',{recursive:true,force:true})\" && tsc -b && tsdown",
+    "watch": "tsdown --watch",
+    "verify": "node scripts/verify-client.mjs",
+    "release": "npm run check && npm run build && npm run verify && npm version patch -m \"release: v%s\" && git push --follow-tags",
+    "publish:npm": "npm run check && npm run build && npm run verify && npm publish --access public"
+  },
+  "main": "lib/index.js",
+  "types": "lib/types/host/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/types/host/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./client": {
+      "types": "./lib/types/client/index.d.ts",
+      "default": "./lib/client.js"
+    },
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib/**/*.js",
+    "lib/**/*.js.map",
+    "lib/**/*.d.ts",
+    "lib/**/*.d.ts.map",
+    "src",
+    "cordis.patch.yml",
+    "assets/logo.svg",
+    "README.md",
+    "README.zh.md"
+  ],
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-ui-slots",
+        "@deepseek-ai/dsh-api-remotes",
+        "@deepseek-ai/dsh-cordis-client-runner"
+      ],
+      "platform": "web"
+    }
+  },
+  "dependencies": {
+    "node-pty": "1.2.0-beta.15",
+    "ws": "^8.21.0"
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "^4.0.1",
+    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.0-rc.6",
+    "@deepseek-ai/schemastery": "^3.18.1",
+    "@types/node": "^26.2.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "18.3.0",
+    "@types/ws": "^8.5.10",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/addon-webgl": "^0.18.0",
+    "@xterm/xterm": "^5.5.0",
+    "react-dom": "18.3.1",
+    "tsdown": "^0.22.14",
+    "tsx": "^4.19.0",
+    "typescript": "^5.9.0"
+  },
+  "peerDependencies": {
+    "@deepseek-ai/cordis": "^4.0.1",
+    "@deepseek-ai/schemastery": "^3.18.1",
+    "@deepseek-ai/dsh-api-remotes": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-cordis-client-runner": "^0.1.0-rc.6",
+    "react": "^18.2.0"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild",
+      "node-pty"
+    ]
+  }
+}

package/src/client/controller.ts

@@ -0,0 +1,293 @@
+/**
+ * dsh-single-terminal —— 客户端控制器（模块级单例）：
+ * WebSocket 生命周期、帧路由、sink 注册（xterm 实例）、UI 状态 store。
+ *
+ * 会话输出在 sink 注册前先积压到 pending（React 挂载/重连时序下不丢字节）；
+ * 抽屉关闭不卸载组件（display:none），xterm 缓冲与会话保持。
+ */
+
+import { useSyncExternalStore } from 'react'
+import type { HostFrame, ShellInfo, SessionInfo } from './protocol.ts'
+import { loadJson, saveJson } from './storage.ts'
+import { TerminalSocket, type ConnectionState } from './ws.ts'
+
+export interface TabState {
+  id: string
+  shellId: string
+  label: string
+  cwd: string
+  alive: boolean
+  exitCode: number | null
+}
+
+export type DrawerMode = 'docked' | 'overlay'
+
+export interface TerminalSink {
+  write(data: string): void
+}
+
+interface DrawerState {
+  open: boolean
+  mode: DrawerMode
+  height: number
+  conn: ConnectionState
+  tabs: TabState[]
+  activeId: string | null
+  shells: ShellInfo[]
+  defaultShell: string
+  fontSize: number
+  fontFamily: string
+  notice: string | null
+}
+
+class DrawerStore {
+  private state: DrawerState = {
+    open: false,
+    mode: loadJson<DrawerMode>('mode', 'overlay'),
+    height: loadJson<number>('height', 360),
+    conn: 'connecting',
+    tabs: [],
+    activeId: null,
+    shells: [],
+    defaultShell: 'powershell',
+    fontSize: 13,
+    fontFamily: 'Consolas, "Cascadia Mono", "Courier New", monospace',
+    notice: null,
+  }
+
+  private readonly listeners = new Set<() => void>()
+
+  subscribe = (listener: () => void): (() => void) => {
+    this.listeners.add(listener)
+    return () => { this.listeners.delete(listener) }
+  }
+
+  getSnapshot = (): DrawerState => this.state
+
+  private set(patch: Partial<DrawerState>): void {
+    this.state = { ...this.state, ...patch }
+    for (const listener of this.listeners) listener()
+  }
+
+  setOpen(open: boolean): void {
+    this.set({ open })
+  }
+
+  setMode(mode: DrawerMode): void {
+    saveJson('mode', mode)
+    this.set({ mode })
+  }
+
+  setHeight(height: number): void {
+    saveJson('height', height)
+    this.set({ height })
+  }
+
+  setConn(conn: ConnectionState): void {
+    this.set({ conn })
+  }
+
+  setNotice(notice: string | null): void {
+    this.set({ notice })
+  }
+
+  applyHello(frame: { defaultShell: string; fontSize: number; fontFamily: string }): void {
+    this.set({ defaultShell: frame.defaultShell, fontSize: frame.fontSize, fontFamily: frame.fontFamily })
+  }
+
+  applyInventory(shells: ShellInfo[], sessions: SessionInfo[]): { adopted: SessionInfo[] } {
+    const known = new Set(this.state.tabs.map((tab) => tab.id))
+    const adopted = sessions.filter((session) => !known.has(session.id))
+    if (adopted.length > 0) {
+      const tabs = [...this.state.tabs, ...adopted.map(toTab)]
+      const activeId = this.state.activeId ?? tabs[tabs.length - 1]?.id ?? null
+      this.set({ shells, tabs, activeId })
+    } else {
+      this.set({ shells })
+    }
+    return { adopted }
+  }
+
+  addSession(session: SessionInfo): void {
+    if (this.state.tabs.some((tab) => tab.id === session.id)) return
+    this.set({ tabs: [...this.state.tabs, toTab(session)], activeId: session.id })
+  }
+
+  setActive(id: string): void {
+    this.set({ activeId: id })
+  }
+
+  markDead(id: string, exitCode: number | null): void {
+    this.set({
+      tabs: this.state.tabs.map((tab) => (tab.id === id ? { ...tab, alive: false, exitCode } : tab)),
+    })
+  }
+
+  removeTab(id: string): void {
+    const tabs = this.state.tabs.filter((tab) => tab.id !== id)
+    const activeId = this.state.activeId === id ? tabs[tabs.length - 1]?.id ?? null : this.state.activeId
+    this.set({ tabs, activeId })
+  }
+}
+
+function toTab(session: SessionInfo): TabState {
+  return { id: session.id, shellId: session.shellId, label: session.label, cwd: session.cwd, alive: session.alive, exitCode: session.exitCode }
+}
+
+class TerminalController {
+  readonly store = new DrawerStore()
+
+  private socket: TerminalSocket | null = null
+  private readonly sinks = new Map<string, TerminalSink>()
+  private readonly pending = new Map<string, string>()
+  private noticeTimer: ReturnType<typeof setTimeout> | null = null
+
+  toggle(): void {
+    this.setOpen(!this.store.getSnapshot().open)
+  }
+
+  setOpen(open: boolean): void {
+    this.store.setOpen(open)
+    if (open) {
+      this.ensureStarted()
+      this.maybeAutoOpen()
+    } else {
+      this.autoOpening = false
+    }
+  }
+
+  ensureStarted(): void {
+    if (this.socket !== null) return
+    this.socket = new TerminalSocket({
+      onFrame: (frame) => { this.onFrame(frame) },
+      onState: (state) => {
+        this.store.setConn(state)
+        // 每次连上（含重连）都拉取会话清单：adopt 存活会话 + attach 回放，
+        // 完成页面刷新后的标签恢复。
+        if (state === 'connected') this.socket?.send({ type: 'list' })
+      },
+    })
+    this.socket.connect()
+  }
+
+  // 打开抽屉且没有任何终端时自动新建默认 shell；清单未就绪时由 shells 帧兜底。
+  private autoOpening = false
+
+  private maybeAutoOpen(): void {
+    const state = this.store.getSnapshot()
+    if (!state.open || state.conn !== 'connected' || state.shells.length === 0) return
+    if (state.tabs.length > 0 || this.autoOpening) return
+    this.autoOpening = true
+    this.newTerminal(state.defaultShell)
+  }
+
+  newTerminal(shellId: string): void {
+    this.ensureStarted()
+    this.socket?.send({ type: 'open', shellId, cols: 80, rows: 24 })
+  }
+
+  closeTab(id: string): void {
+    this.sinks.delete(id)
+    this.pending.delete(id)
+    this.store.removeTab(id)
+    this.socket?.send({ type: 'close', id })
+  }
+
+  setActive(id: string): void {
+    this.store.setActive(id)
+  }
+
+  setMode(mode: DrawerMode): void {
+    this.store.setMode(mode)
+  }
+
+  setHeight(height: number): void {
+    this.store.setHeight(height)
+  }
+
+  showNotice(message: string): void {
+    this.store.setNotice(message)
+    if (this.noticeTimer !== null) clearTimeout(this.noticeTimer)
+    this.noticeTimer = setTimeout(() => {
+      this.noticeTimer = null
+      this.store.setNotice(null)
+    }, 6000)
+  }
+
+  sendInput(id: string, data: string): void {
+    this.socket?.send({ type: 'input', id, data })
+  }
+
+  sendResize(id: string, cols: number, rows: number): void {
+    this.socket?.send({ type: 'resize', id, cols, rows })
+  }
+
+  registerSink(id: string, sink: TerminalSink): () => void {
+    this.sinks.set(id, sink)
+    const buffered = this.pending.get(id)
+    if (buffered !== undefined) {
+      this.pending.delete(id)
+      sink.write(buffered)
+    }
+    return () => {
+      if (this.sinks.get(id) === sink) this.sinks.delete(id)
+    }
+  }
+
+  dispose(): void {
+    this.socket?.dispose()
+    this.socket = null
+  }
+
+  private writeData(id: string, data: string): void {
+    const sink = this.sinks.get(id)
+    if (sink !== undefined) {
+      sink.write(data)
+      return
+    }
+    this.pending.set(id, (this.pending.get(id) ?? '') + data)
+  }
+
+  private onFrame(frame: HostFrame): void {
+    switch (frame.type) {
+      case 'hello':
+        this.store.applyHello(frame)
+        break
+      case 'shells': {
+        const { adopted } = this.store.applyInventory(frame.shells, frame.sessions)
+        for (const session of adopted) {
+          this.socket?.send({ type: 'attach', id: session.id })
+        }
+        this.maybeAutoOpen()
+        break
+      }
+      case 'opened':
+        this.autoOpening = false
+        this.store.addSession(frame.session)
+        break
+      case 'data':
+      case 'replay':
+        this.writeData(frame.id, frame.data)
+        break
+      case 'exit':
+        if (frame.closed === true) {
+          this.sinks.delete(frame.id)
+          this.pending.delete(frame.id)
+          this.store.removeTab(frame.id)
+        } else {
+          this.store.markDead(frame.id, frame.exitCode)
+        }
+        break
+      case 'error':
+        this.autoOpening = false
+        this.showNotice(frame.message)
+        break
+    }
+  }
+}
+
+export const terminal = new TerminalController()
+
+export function useDrawerState(): DrawerState {
+  return useSyncExternalStore(terminal.store.subscribe, terminal.store.getSnapshot)
+}

package/src/client/drawer.tsx

@@ -0,0 +1,182 @@
+/**
+ * dsh-single-terminal —— 底部抽屉（shell.overlay 插槽）。
+ *
+ * - 两种模式：docked（占高度：对 AppFrame 根元素设 inline padding-bottom，把
+ *   主内容顶起；找不到 [data-shell-overlay] 锚点时静默降级为浮层）/ overlay（浮层）；
+ * - 顶部拖拽条调高度（pointer capture + 帧节流），localStorage 持久化 mode/height；
+ * - 组件常挂载（关闭时 display:none），保证 xterm 缓冲与会话不因抽屉开合丢失。
+ */
+
+import { useEffect, useRef, useState, type CSSProperties, type PointerEvent as ReactPointerEvent } from 'react'
+import { terminal, useDrawerState } from './controller.ts'
+import { t } from './i18n.ts'
+import { TerminalView } from './term.tsx'
+
+const HEIGHT_MIN = 140
+
+function findFrameElement(): HTMLElement | null {
+  const overlay = document.querySelector('[data-shell-overlay]')
+  const frame = overlay?.parentElement
+  return frame instanceof HTMLElement ? frame : null
+}
+
+export function TerminalDrawer() {
+  const state = useDrawerState()
+  const [menuOpen, setMenuOpen] = useState(false)
+  const menuRef = useRef<HTMLDivElement | null>(null)
+
+  // 首次挂载即建立 WS 连接（空闲连接开销极小；页面刷新后由 list 帧恢复标签）。
+  useEffect(() => { terminal.ensureStarted() }, [])
+
+  // 占高度模式：把 AppFrame 根元素顶起（border-box + padding-bottom）。
+  useEffect(() => {
+    if (!state.open || state.mode !== 'docked') return
+    const frame = findFrameElement()
+    if (frame === null) return
+    frame.style.boxSizing = 'border-box'
+    frame.style.paddingBottom = `${state.height}px`
+    return () => {
+      frame.style.paddingBottom = ''
+      frame.style.boxSizing = ''
+    }
+  }, [state.open, state.mode, state.height])
+
+  // 菜单外点关闭。
+  useEffect(() => {
+    if (!menuOpen) return
+    const onPointerDown = (event: PointerEvent) => {
+      if (menuRef.current !== null && !menuRef.current.contains(event.target as Node)) {
+        setMenuOpen(false)
+      }
+    }
+    document.addEventListener('pointerdown', onPointerDown)
+    return () => { document.removeEventListener('pointerdown', onPointerDown) }
+  }, [menuOpen])
+
+  const availableShells = state.shells.filter((shell) => shell.available)
+
+  const startDrag = (event: ReactPointerEvent<HTMLDivElement>): void => {
+    event.preventDefault()
+    const handle = event.currentTarget
+    const startY = event.clientY
+    const startHeight = state.height
+    try {
+      handle.setPointerCapture(event.pointerId)
+    } catch { /* 指针已失效（如合成事件）：仅失去拖出把手的跟随能力 */ }
+    let lastAt = 0
+    const onMove = (move: PointerEvent) => {
+      if (move.timeStamp - lastAt < 16) return
+      lastAt = move.timeStamp
+      const next = Math.min(window.innerHeight - 100, Math.max(HEIGHT_MIN, startHeight + (startY - move.clientY)))
+      terminal.setHeight(next)
+    }
+    const onUp = () => {
+      handle.removeEventListener('pointermove', onMove)
+    }
+    handle.addEventListener('pointermove', onMove)
+    handle.addEventListener('pointerup', onUp, { once: true })
+    handle.addEventListener('pointercancel', onUp, { once: true })
+  }
+
+  return (
+    <div
+      className="dst-drawer"
+      style={{ display: state.open ? 'flex' : 'none', '--dst-height': `${state.height}px` } as CSSProperties}
+    >
+      <div className="dst-drag" onPointerDown={startDrag} title={t('terminal.mode.toggle')} />
+      <div className="dst-head">
+        <div className="dst-tabs">
+          {state.tabs.map((tab) => (
+            <button
+              key={tab.id}
+              className={`dst-tab${tab.id === state.activeId ? ' active' : ''}`}
+              onClick={() => { terminal.setActive(tab.id) }}
+              title={tab.cwd}
+            >
+              <span className={`dst-dot${tab.alive ? '' : ' dead'}`} />
+              <span>{tab.label}</span>
+              {!tab.alive && <span>{t('terminal.exited')}</span>}
+              <span
+                className="dst-tabclose"
+                role="button"
+                title={t('terminal.closeTab')}
+                onClick={(event) => {
+                  event.stopPropagation()
+                  terminal.closeTab(tab.id)
+                }}
+              >
+                ✕
+              </span>
+            </button>
+          ))}
+        </div>
+        <span className={`dst-conn ${state.conn}`} title={t(`terminal.status.${state.conn}`)} />
+        <div className="dst-actions">
+          <button
+            className="dst-modebtn"
+            onClick={() => { terminal.setMode(state.mode === 'docked' ? 'overlay' : 'docked') }}
+            title={t('terminal.mode.toggle')}
+          >
+            {state.mode === 'docked' ? `⬓ ${t('terminal.mode.dock')}` : `◫ ${t('terminal.mode.overlay')}`}
+          </button>
+          <div style={{ position: 'relative' }} ref={menuRef}>
+            <button
+              className="dst-iconbtn"
+              onClick={() => { terminal.newTerminal(state.defaultShell) }}
+              title={`${t('terminal.new')}（${availableShells.find((shell) => shell.id === state.defaultShell)?.name ?? state.defaultShell}）`}
+            >
+              ＋
+            </button>
+            <button
+              className="dst-iconbtn"
+              style={{ width: 18 }}
+              onClick={() => { setMenuOpen((open) => !open) }}
+              title={t('terminal.new')}
+            >
+              ▸
+            </button>
+            {menuOpen && (
+              <div className="dst-menu">
+                {availableShells.length === 0 && (
+                  <div className="dst-menuitem" style={{ cursor: 'default', opacity: 0.6 }}>—</div>
+                )}
+                {availableShells.map((shell) => (
+                  <button
+                    key={shell.id}
+                    className="dst-menuitem"
+                    onClick={() => {
+                      setMenuOpen(false)
+                      terminal.newTerminal(shell.id)
+                    }}
+                  >
+                    {shell.name}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+          <button
+            className="dst-iconbtn"
+            onClick={() => { terminal.setOpen(false) }}
+            title={t('terminal.closeDrawer')}
+          >
+            ▾
+          </button>
+        </div>
+      </div>
+      <div className="dst-body">
+        {state.tabs.map((tab) => (
+          <TerminalView
+            key={tab.id}
+            tab={tab}
+            active={tab.id === state.activeId}
+            fontSize={state.fontSize}
+            fontFamily={state.fontFamily}
+          />
+        ))}
+        {state.tabs.length === 0 && <div className="dst-empty">{t('terminal.empty')}</div>}
+        {state.notice !== null && <div className="dst-notice">{state.notice}</div>}
+      </div>
+    </div>
+  )
+}