@linxin666/dsh-ssh 0.4.2 → 0.4.4

package/src/client/panel/controller.ts

@@ -1,23 +1,77 @@
 /**
- * SSH panel controller: the single owner of the panel's open/closed state.
+ * SSH panel controller: the single owner of the panel's view state.
  *
  * Framework-free (structural runtime faces, task-board core/controller.ts
- * style) so the DOM mounts and the React panel share one tiny subscription
+ * style) so the sidebar row and the React panel share one tiny subscription
  * surface. The state lives only for the browser session (no persistence).
+ *
+ * The active tab, the hosts-tab connect request and the live terminal session
+ * id live here rather than inside the panel components: the layout mounts a
+ * keyed page only while its panel is selected, so component-local state would
+ * reset the tab on every panel switch and lose the id a reattach needs.
  */
 
+/** The panel's tab identifiers. */
+export type SshTab = 'hosts' | 'terminal' | 'transfer' | 'tunnels' | 'cluster'
+
+/** A "connect" action from the hosts tab, handed to the terminal tab. */
+export interface ConnectRequest {
+  alias: string
+  /** Monotonic id so a repeated connect for the same alias still re-applies. */
+  nonce: number
+}
+
+/** Stable id shared by the sidebar panel row and the main-slot page. */
+export const SSH_PANEL_ID = 'ssh'
+
 /** Immutable controller snapshot for UI subscriptions. */
 export interface PanelControllerSnapshot {
+  /** Whether the center column shows this panel. */
   panelOpen: boolean
+  /** The tab the panel is showing. */
+  activeTab: SshTab
+  /** Pending hosts-tab connect request, or null. */
+  connectRequest: ConnectRequest | null
+  /** Host-side terminal session the terminal tab should reattach to, if any. */
+  terminalSessionId: string | undefined
 }
 
-/** The panel state owner the sidebar entry toggles and the view renders from. */
+/**
+ * The layout's panel-navigation face: selecting the panel is the layout's
+ * business, and this is the one call that asks for it (null returns the column
+ * to the conversation). Optional, so a shell-less composition keeps the pure
+ * state transitions testable.
+ */
+export interface PanelNavigationFace {
+  /** Select this panel, or null to hand the column back to the conversation. */
+  select(panelId: string | null): void
+}
+
+/** Controller dependencies. */
+export interface PanelControllerDeps {
+  /** Layout panel selection; absent keeps the controller state-only. */
+  panel?: PanelNavigationFace
+}
+
+/** The panel state owner the sidebar row and the view both read. */
 export class PanelController {
   private panelOpen = false
+  private activeTab: SshTab = 'hosts'
+  private connectRequest: ConnectRequest | null = null
+  private terminalSessionId: string | undefined
   private listeners = new Set<() => void>()
+  /** Cached so getSnapshot is referentially stable between changes. */
+  private snapshot: PanelControllerSnapshot = {
+    panelOpen: false,
+    activeTab: 'hosts',
+    connectRequest: null,
+    terminalSessionId: undefined,
+  }
+
+  constructor(private readonly deps: PanelControllerDeps = {}) {}
 
   getSnapshot(): PanelControllerSnapshot {
-    return { panelOpen: this.panelOpen }
+    return this.snapshot
   }
 
   subscribe(fn: () => void): () => void {
@@ -25,16 +79,25 @@ export class PanelController {
     return () => { this.listeners.delete(fn) }
   }
 
+  /**
+   * Show the panel. The layout owns which panel the column renders, so the
+   * state flip and the selection travel together; the selection is requested
+   * after the snapshot flips, so a subscriber never observes "open" while the
+   * shell still shows the conversation.
+   */
   open(): void {
     if (this.panelOpen) return
     this.panelOpen = true
-    this.notify()
+    this.commit()
+    this.selectPanel(SSH_PANEL_ID)
   }
 
+  /** Return the column to the conversation, asking the layout explicitly. */
   close(): void {
     if (!this.panelOpen) return
     this.panelOpen = false
-    this.notify()
+    this.commit()
+    this.selectPanel(null)
   }
 
   toggle(): void {
@@ -42,7 +105,63 @@ export class PanelController {
     else this.open()
   }
 
-  private notify(): void {
+  /**
+   * Reflect a selection made outside this controller (the user clicked another
+   * sidebar row, or the layout dropped the panel id).
+   * @param panelId - the layout's current panel id, or null for the conversation.
+   */
+  syncPanelSelection(panelId: string | null): void {
+    const open = panelId === SSH_PANEL_ID
+    if (open === this.panelOpen) return
+    this.panelOpen = open
+    this.commit()
+  }
+
+  /** Switch tabs, keeping every other piece of view state. */
+  setActiveTab(tab: SshTab): void {
+    if (this.activeTab === tab) return
+    this.activeTab = tab
+    this.commit()
+  }
+
+  /** Hand the terminal tab a host to connect to (hosts-tab "connect" action). */
+  requestConnect(alias: string): void {
+    this.connectRequest = { alias, nonce: Date.now() }
+    this.activeTab = 'terminal'
+    this.commit()
+  }
+
+  /** Record the host-side session so a later page mount can reattach. */
+  setTerminalSession(sessionId: string): void {
+    if (this.terminalSessionId === sessionId) return
+    this.terminalSessionId = sessionId
+    this.commit()
+  }
+
+  /** Forget the session (it exited, or the user disconnected). */
+  clearTerminalSession(): void {
+    if (this.terminalSessionId === undefined) return
+    this.terminalSessionId = undefined
+    this.commit()
+  }
+
+  private commit(): void {
+    this.snapshot = {
+      panelOpen: this.panelOpen,
+      activeTab: this.activeTab,
+      connectRequest: this.connectRequest,
+      terminalSessionId: this.terminalSessionId,
+    }
     for (const fn of [...this.listeners]) fn()
   }
+
+  /** Ask the layout to select a panel; a shell without the face is a no-op. */
+  private selectPanel(panelId: string | null): void {
+    try {
+      this.deps.panel?.select(panelId)
+    } catch {
+      // The layout service throws by contract before its root entry mounts;
+      // the state flip above already stands and the next selection retries.
+    }
+  }
 }

package/src/client/panel/panel.module.css

@@ -1,139 +1,19 @@
 /**
  * dsh-ssh panel styles. Scoped by the plugin's own data attributes so nothing
  * leaks into the rest of the GUI; colors ride the dsh --dsw-* tokens so the
- * panel follows the active theme (light/dark and skins). The center-column
- * hide rules are attribute-scoped and must stay in this stylesheet (it is
- * imported by mount.tsx, so the styles load with the plugin).
+ * panel follows the active theme (light/dark and skins).
+ *
+ * The panel is a native main-slot page: the shell renders it only while this
+ * panel is selected, so this file carries no visibility rule and no rule over
+ * the conversation column, and the sidebar row is the shell's own panel row,
+ * so there is no injected entry row to style either.
  */
 
-/* --- center-column takeover (global rules, attribute-scoped) ----------------- */
-
-[data-pane='conversation'],
-[class*='centerCol'] {
-  position: relative;
-}
-
-/* The panel container rides inside the conversation grid item as an extra
-   trailing child; hidden unless the panel is active. */
-[data-dsh-ssh-view] {
-  position: absolute;
-  inset: 0;
-  display: none;
-  /* Above the conversation composer (z-index 7 in the 0.1.0-rc.6 shell) so the
-     panel and its modals paint over the input card, mirroring the task board
-     (issue #87). */
-  z-index: 60;
-  /* Opaque backdrop: the conversation subtree stays mounted under the panel.
-     Even if the hide rule below were defeated by a stronger host inline
-     style, this background keeps sticky code-block banners (host z-index 6)
-     from showing through the active panel (issue #100). */
-  background: var(--dsw-alias-bg-base);
-}
-
-/* The center column is single-occupant; the :not() guards keep the two
-   sibling panels (task board / ssh) from fighting over visibility if both
-   activation attributes ever coexist. */
-html[data-dsh-ssh-active]:not([data-dsh-taskboard-active]) [data-dsh-ssh-view] {
-  display: block;
-}
-
-/* While the panel is active, the conversation content underneath is hidden
-   (it stays mounted and stateful). The rule targets both the pane attribute
-   and the center-column class so the chat subtree (including the code-block
-   copy banner, issue #100) stays hidden whichever host container carries it. */
-html[data-dsh-ssh-active]:not([data-dsh-taskboard-active]) [data-pane='conversation'] > :not([data-dsh-ssh-view]),
-html[data-dsh-ssh-active]:not([data-dsh-taskboard-active]) [class*='centerCol'] > :not([data-dsh-ssh-view]) {
-  display: none !important;
-}
-
-/* --- sidebar entry row ------------------------------------------------------- */
-
-/* Same geometry as the shell's own panel rows (SidebarRoot .panelRow): 2px
-   inset with a 12px radius, 8px content padding, 36px row, 14/22 type, and the
-   primary ink — so an injected row and an official row line up column for
-   column instead of each carrying its own box. */
-.entry {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-height: 36px;
-  padding: 7px 8px;
-  margin: 0 2px;
-  background: transparent;
-  border: none;
-  border-radius: 12px;
-  color: var(--dsw-alias-label-primary);
-  cursor: pointer;
-  font: inherit;
-  font-size: 14px;
-  line-height: 22px;
-  text-align: left;
-  white-space: nowrap;
-}
-
-.entry:hover {
-  background: var(--dsw-alias-interactive-bg-hover);
-  color: var(--dsw-alias-label-primary);
-}
-
-.entry[data-active] {
-  background: var(--dsw-alias-interactive-bg-active);
-  color: var(--dsw-alias-label-primary);
-  font-weight: 600;
-}
-
-/* Icon box matches the shell's panel glyph exactly (16px), so the glyph column
-   and the label column land on the official rows' x positions. */
-.entryIcon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  flex: none;
-}
-
-.entryIcon svg {
-  display: block;
-  width: 16px;
-  height: 16px;
-}
-
-.entryLabel {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Collapsed rail: icon-only, centered, matching the shell's 56px rail. The
-   shell asks its own panel rows for an 18px glyph on the rail, so the icon box
-   and the svg step up together with the 12px rail radius. */
-:global([data-dsh-frame][data-sidebar-collapsed]) .entry,
-:global([data-sidebar-collapsed]) .entry {
-  justify-content: center;
-  padding: 0;
-  width: 36px;
-  min-height: 36px;
-  margin: 0 auto 12px;
-  border-radius: 12px;
-}
-
-:global([data-dsh-frame][data-sidebar-collapsed]) .entryIcon,
-:global([data-sidebar-collapsed]) .entryIcon,
-:global([data-dsh-frame][data-sidebar-collapsed]) .entryIcon svg,
-:global([data-sidebar-collapsed]) .entryIcon svg {
-  width: 18px;
-  height: 18px;
-}
-
-:global([data-dsh-frame][data-sidebar-collapsed]) .entryLabel,
-:global([data-sidebar-collapsed]) .entryLabel {
-  display: none;
-}
-
 /* --- panel frame -------------------------------------------------------------- */
 
 .view {
+  height: 100%;
+  min-height: 0;
   overflow: hidden;
 }
 

package/src/engine/terminal-sessions.ts

@@ -0,0 +1,280 @@
+/**
+ * Host-side terminal sessions for the web terminal.
+ *
+ * The PTY shell is owned here, not by the browser view: a view can detach
+ * (panel switch, page unmount, a dropped socket) and reattach by session id
+ * without tearing the remote shell down, which is what makes the terminal
+ * survival property the old DOM takeover used to provide. A session with no
+ * attached socket is reaped after an idle window, and an exited one is kept
+ * for a short grace window so a reattaching view still sees the final screen.
+ */
+import { randomBytes } from 'node:crypto'
+import { WebSocket } from 'ws'
+import type { KeyboardInteractiveHandler } from './connection-pool.ts'
+import type { ShellSession } from './pty.ts'
+import type { TerminalServerFrame } from '../protocol.ts'
+
+/** Pause the shell when an attached socket's send buffer exceeds this… */
+const BACKPRESSURE_HIGH_WATER = 1024 * 1024
+
+/** …and resume once every attached socket drains below this. */
+const BACKPRESSURE_LOW_WATER = 512 * 1024
+
+/** Scrollback retained for a reattaching view (bytes of UTF-8 output). */
+const DEFAULT_MAX_BUFFER_BYTES = 256 * 1024
+
+/** A detached session is reaped after this long. */
+const DEFAULT_IDLE_MS = 10 * 60 * 1000
+
+/** An exited session is kept this long for a reattaching view. */
+const DEFAULT_EXIT_GRACE_MS = 60 * 1000
+
+/** One live terminal session and the sockets currently watching it. */
+interface HostedTerminal {
+  id: string
+  alias: string
+  shell?: ShellSession
+  sockets: Set<WebSocket>
+  /** Bounded scrollback replayed to an attaching socket. */
+  buffer: string[]
+  bufferBytes: number
+  exited: boolean
+  exit?: { code: number | null; error?: string }
+  /** Pending keyboard-interactive challenge, whoever attached when it arrived. */
+  pendingAuthFinish?: (responses: string[]) => void
+  reapTimer?: ReturnType<typeof setTimeout>
+}
+
+/** What the registry needs from the engine (swappable in tests). */
+export interface TerminalSessionDeps {
+  /** Open one PTY shell for the alias (engine.openShell). */
+  openShell(alias: string, size: { cols: number; rows: number }, onKeyboardInteractive?: KeyboardInteractiveHandler): Promise<ShellSession>
+  /** @returns the current time (defaults to Date.now). */
+  now?: () => number
+  /** Bounded scrollback per session. */
+  maxBufferBytes?: number
+  /** Idle window before a detached session is reaped. */
+  idleMs?: number
+  /** Grace window an exited session is kept for reattaching views. */
+  exitGraceMs?: number
+}
+
+/**
+ * The host's terminal session table: open one session per connect, attach any
+ * number of sockets, and keep the shell alive across detach.
+ */
+export class TerminalSessionRegistry {
+  private readonly sessions = new Map<string, HostedTerminal>()
+  private readonly deps: TerminalSessionDeps
+  private readonly maxBufferBytes: number
+  private readonly idleMs: number
+  private readonly exitGraceMs: number
+
+  constructor(deps: TerminalSessionDeps) {
+    this.deps = deps
+    this.maxBufferBytes = deps.maxBufferBytes ?? DEFAULT_MAX_BUFFER_BYTES
+    this.idleMs = deps.idleMs ?? DEFAULT_IDLE_MS
+    this.exitGraceMs = deps.exitGraceMs ?? DEFAULT_EXIT_GRACE_MS
+  }
+
+  /** Open a new session for the alias and attach the requesting socket to it. */
+  async open(ws: WebSocket, alias: string, size: { cols: number; rows: number }): Promise<void> {
+    const session: HostedTerminal = {
+      id: randomBytes(9).toString('hex'),
+      alias,
+      sockets: new Set(),
+      buffer: [],
+      bufferBytes: 0,
+      exited: false,
+    }
+    this.sessions.set(session.id, session)
+    this.bind(ws, session)
+    try {
+      const shell = await this.deps.openShell(alias, size, this.keyboardInteractive(session))
+      if (!this.sessions.has(session.id)) {
+        // The session was ended (or the host torn down) while it connected.
+        shell.close()
+        return
+      }
+      session.shell = shell
+      shell.onData = data => { this.pushOutput(session, data.toString('utf8')) }
+      shell.onExit = (code, error) => { this.finish(session, code, error) }
+      this.send(session, { type: 'ready', alias, sessionId: session.id })
+    } catch (error) {
+      this.sessions.delete(session.id)
+      this.send(session, { type: 'exit', code: null, error: error instanceof Error ? error.message : String(error) })
+    }
+  }
+
+  /**
+   * Attach a socket to an existing session, replaying its scrollback first.
+   * @returns false when the session is unknown (expired or already reaped).
+   */
+  attach(ws: WebSocket, sessionId: string, size: { cols: number; rows: number }): boolean {
+    const session = this.sessions.get(sessionId)
+    if (session === undefined) return false
+    this.bind(ws, session)
+    this.clearReap(session)
+    for (const chunk of session.buffer) this.sendTo(session, ws, { type: 'output', data: chunk })
+    this.sendTo(session, ws, { type: 'ready', alias: session.alias, sessionId: session.id })
+    if (session.exited) {
+      this.sendTo(session, ws, { type: 'exit', code: session.exit?.code ?? null, error: session.exit?.error })
+      // Re-arm the grace window: this socket now holds the exited session open.
+      this.scheduleReap(session, this.exitGraceMs)
+    } else {
+      session.shell?.resize(Math.max(2, size.cols), Math.max(1, size.rows))
+      session.shell?.resume()
+    }
+    return true
+  }
+
+  /** End every session (host teardown, plugin dispose). */
+  dispose(): void {
+    for (const session of [...this.sessions.values()]) this.end(session, false)
+    this.sessions.clear()
+  }
+
+  /** Number of live sessions (introspection for tests and diagnostics). */
+  size(): number {
+    return this.sessions.size
+  }
+
+  /** Wire one socket's frames and lifecycle onto a session. */
+  private bind(ws: WebSocket, session: HostedTerminal): void {
+    session.sockets.add(ws)
+    ws.on('message', (data) => {
+      let frame: { type?: string; data?: string; cols?: number; rows?: number; responses?: string[] }
+      try {
+        frame = JSON.parse(String(data)) as typeof frame
+      } catch {
+        return
+      }
+      if (frame.type === 'input') {
+        session.shell?.send(frame.data ?? '')
+      } else if (frame.type === 'resize') {
+        session.shell?.resize(Math.max(2, frame.cols ?? 80), Math.max(1, frame.rows ?? 24))
+      } else if (frame.type === 'auth_response') {
+        const finish = session.pendingAuthFinish
+        session.pendingAuthFinish = undefined
+        try { finish?.(frame.responses ?? []) } catch { /* the connect already failed */ }
+      } else if (frame.type === 'close') {
+        this.end(session, true)
+      } else if (frame.type === 'detach') {
+        this.detach(ws)
+      }
+    })
+    ws.on('close', () => { this.detach(ws) })
+    ws.on('error', () => { this.detach(ws) })
+  }
+
+  /** Remove a socket from its session, keeping the shell alive. */
+  private detach(ws: WebSocket): void {
+    for (const session of this.sessions.values()) {
+      if (!session.sockets.delete(ws)) continue
+      if (session.sockets.size === 0) {
+        // Nobody is watching: give the view a window to come back before the
+        // remote shell is torn down (or, for an exited one, before its final
+        // screen is dropped).
+        this.scheduleReap(session, session.exited ? this.exitGraceMs : this.idleMs)
+      }
+      return
+    }
+  }
+
+  /** End the session a socket is attached to (explicit close from the view). */
+  private end(session: HostedTerminal, notify: boolean): void {
+    this.clearReap(session)
+    if (this.sessions.delete(session.id) && notify) {
+      if (session.pendingAuthFinish !== undefined) {
+        const finish = session.pendingAuthFinish
+        session.pendingAuthFinish = undefined
+        try { finish([]) } catch { /* the connect already failed */ }
+      }
+    }
+    try { session.shell?.close() } catch { /* channel gone */ }
+  }
+
+  /** Mark a session exited and keep it briefly so a reattaching view sees it. */
+  private finish(session: HostedTerminal, code: number | null, error?: string): void {
+    if (session.exited) return
+    session.exited = true
+    session.exit = { code, error }
+    this.send(session, { type: 'exit', code, error })
+    // The view has its exit frame; close the sockets so neither the browser
+    // nor the host holds a dead transport open. The session record itself
+    // survives the grace window, so a reattach still replays the final screen.
+    for (const ws of [...session.sockets]) {
+      session.sockets.delete(ws)
+      try { ws.close(1000) } catch { /* already closed */ }
+    }
+    this.scheduleReap(session, this.exitGraceMs)
+  }
+
+  /** Append output to the replay buffer, trimmed to the byte cap. */
+  private pushOutput(session: HostedTerminal, data: string): void {
+    session.buffer.push(data)
+    session.bufferBytes += Buffer.byteLength(data)
+    while (session.bufferBytes > this.maxBufferBytes && session.buffer.length > 1) {
+      const dropped = session.buffer.shift()
+      session.bufferBytes -= Buffer.byteLength(dropped ?? '')
+    }
+    this.send(session, { type: 'output', data })
+  }
+
+  /** Broadcast one frame to every attached socket, honoring backpressure. */
+  private send(session: HostedTerminal, frame: TerminalServerFrame): void {
+    for (const ws of session.sockets) this.sendTo(session, ws, frame)
+    this.applyBackpressure(session)
+  }
+
+  private sendTo(session: HostedTerminal, ws: WebSocket, frame: TerminalServerFrame): void {
+    if (ws.readyState !== WebSocket.OPEN) return
+    try { ws.send(JSON.stringify(frame)) } catch { /* socket raced away */ }
+  }
+
+  /** Pause while any attached socket is backed up; resume once all drained. */
+  private applyBackpressure(session: HostedTerminal): void {
+    const shell = session.shell
+    if (shell === undefined) return
+    let high = false
+    let low = true
+    for (const ws of session.sockets) {
+      if (ws.bufferedAmount > BACKPRESSURE_HIGH_WATER) high = true
+      if (ws.bufferedAmount > BACKPRESSURE_LOW_WATER) low = false
+    }
+    if (high) shell.pause()
+    else if (low) shell.resume()
+  }
+
+  /** Answer a keyboard-interactive challenge through whoever is attached. */
+  private keyboardInteractive(session: HostedTerminal): KeyboardInteractiveHandler {
+    return (name, instructions, _lang, prompts, finish) => {
+      session.pendingAuthFinish = finish
+      this.send(session, {
+        type: 'auth_prompt',
+        name,
+        instructions,
+        prompts: prompts.map(p => ({ prompt: p.prompt, echo: p.echo })),
+      })
+    }
+  }
+
+  private scheduleReap(session: HostedTerminal, delayMs: number): void {
+    this.clearReap(session)
+    const timer = setTimeout(() => {
+      session.reapTimer = undefined
+      if (session.sockets.size > 0) return
+      this.end(session, false)
+    }, delayMs)
+    // Never hold the host process open for an idle terminal.
+    ;(timer as { unref?: () => void }).unref?.()
+    session.reapTimer = timer
+  }
+
+  private clearReap(session: HostedTerminal): void {
+    if (session.reapTimer !== undefined) {
+      clearTimeout(session.reapTimer)
+      session.reapTimer = undefined
+    }
+  }
+}

package/src/index.ts

@@ -151,7 +151,7 @@ function applyImpl(ctx: Context, config?: ResolvedConfig): void {
   }
 
   // The /api/dsh-ssh route family + terminal upgrade.
-  const { routes, upgrade } = makeRoutes({ store, engine })
+  const { routes, upgrade, terminalSessions } = makeRoutes({ store, engine })
   let disposeRoutes: (() => void) | undefined
 
   // Agent tools + their prompt sections.
@@ -200,6 +200,9 @@ function applyImpl(ctx: Context, config?: ResolvedConfig): void {
         return () => {
           for (const dispose of disposers) dispose()
           upgradeDisposer()
+          // Dropping the routes also ends the terminal sessions they served:
+          // a live shell must not outlive the surface that can reach it.
+          terminalSessions.dispose()
         }
       },
       'dsh-ssh: routes',