@tiphareth/dsh-hardssh 0.1.2

package/src/client/ssh/panel/xterm.css.ts

@@ -0,0 +1,2 @@
+/** xterm.css text embedded at build-authoring time (the ?raw suffix is not resolvable by the tsdown/rolldown pipeline). Generated file — see the package docs. */
+export const XTERM_CSS: string = "/**\n * Copyright (c) 2014 The xterm.js authors. All rights reserved.\n * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)\n * https://github.com/chjj/term.js\n * @license MIT\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n *\n * Originally forked from (with the author's permission):\n *   Fabrice Bellard's javascript vt100 for jslinux:\n *   http://bellard.org/jslinux/\n *   Copyright (c) 2011 Fabrice Bellard\n *   The original design remains. The terminal itself\n *   has been extended to include xterm CSI codes, among\n *   other features.\n */\n\n/**\n *  Default styles for xterm.js\n */\n\n.xterm {\n    cursor: text;\n    position: relative;\n    user-select: none;\n    -ms-user-select: none;\n    -webkit-user-select: none;\n}\n\n.xterm.focus,\n.xterm:focus {\n    outline: none;\n}\n\n.xterm .xterm-helpers {\n    position: absolute;\n    top: 0;\n    /**\n     * The z-index of the helpers must be higher than the canvases in order for\n     * IMEs to appear on top.\n     */\n    z-index: 5;\n}\n\n.xterm .xterm-helper-textarea {\n    padding: 0;\n    border: 0;\n    margin: 0;\n    /* Move textarea out of the screen to the far left, so that the cursor is not visible */\n    position: absolute;\n    opacity: 0;\n    left: -9999em;\n    top: 0;\n    width: 0;\n    height: 0;\n    z-index: -5;\n    /** Prevent wrapping so the IME appears against the textarea at the correct position */\n    white-space: nowrap;\n    overflow: hidden;\n    resize: none;\n}\n\n.xterm .composition-view {\n    /* TODO: Composition position got messed up somewhere */\n    background: #000;\n    color: #FFF;\n    display: none;\n    position: absolute;\n    white-space: nowrap;\n    z-index: 1;\n}\n\n.xterm .composition-view.active {\n    display: block;\n}\n\n.xterm .xterm-viewport {\n    /* On OS X this is required in order for the scroll bar to appear fully opaque */\n    background-color: #000;\n    overflow-y: scroll;\n    cursor: default;\n    position: absolute;\n    right: 0;\n    left: 0;\n    top: 0;\n    bottom: 0;\n}\n\n.xterm .xterm-screen {\n    position: relative;\n}\n\n.xterm .xterm-screen canvas {\n    position: absolute;\n    left: 0;\n    top: 0;\n}\n\n.xterm-char-measure-element {\n    display: inline-block;\n    visibility: hidden;\n    position: absolute;\n    top: 0;\n    left: -9999em;\n    line-height: normal;\n}\n\n.xterm.enable-mouse-events {\n    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */\n    cursor: default;\n}\n\n.xterm.xterm-cursor-pointer,\n.xterm .xterm-cursor-pointer {\n    cursor: pointer;\n}\n\n.xterm.column-select.focus {\n    /* Column selection mode */\n    cursor: crosshair;\n}\n\n.xterm .xterm-accessibility:not(.debug),\n.xterm .xterm-message {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    z-index: 10;\n    color: transparent;\n    pointer-events: none;\n}\n\n.xterm .xterm-accessibility-tree:not(.debug) *::selection {\n  color: transparent;\n}\n\n.xterm .xterm-accessibility-tree {\n  font-family: monospace;\n  user-select: text;\n  white-space: pre;\n}\n\n.xterm .xterm-accessibility-tree > div {\n  transform-origin: left;\n  width: fit-content;\n}\n\n.xterm .live-region {\n    position: absolute;\n    left: -9999px;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n}\n\n.xterm-dim {\n    /* Dim should not apply to background, so the opacity of the foreground color is applied\n     * explicitly in the generated class and reset to 1 here */\n    opacity: 1 !important;\n}\n\n.xterm-underline-1 { text-decoration: underline; }\n.xterm-underline-2 { text-decoration: double underline; }\n.xterm-underline-3 { text-decoration: wavy underline; }\n.xterm-underline-4 { text-decoration: dotted underline; }\n.xterm-underline-5 { text-decoration: dashed underline; }\n\n.xterm-overline {\n    text-decoration: overline;\n}\n\n.xterm-overline.xterm-underline-1 { text-decoration: overline underline; }\n.xterm-overline.xterm-underline-2 { text-decoration: overline double underline; }\n.xterm-overline.xterm-underline-3 { text-decoration: overline wavy underline; }\n.xterm-overline.xterm-underline-4 { text-decoration: overline dotted underline; }\n.xterm-overline.xterm-underline-5 { text-decoration: overline dashed underline; }\n\n.xterm-strikethrough {\n    text-decoration: line-through;\n}\n\n.xterm-screen .xterm-decoration-container .xterm-decoration {\n\tz-index: 6;\n\tposition: absolute;\n}\n\n.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {\n\tz-index: 7;\n}\n\n.xterm-decoration-overview-ruler {\n    z-index: 8;\n    position: absolute;\n    top: 0;\n    right: 0;\n    pointer-events: none;\n}\n\n.xterm-decoration-top {\n    z-index: 2;\n    position: relative;\n}\n\n\n\n/* Derived from vs/base/browser/ui/scrollbar/media/scrollbar.css */\n\n/* xterm.js customization: Override xterm's cursor style */\n.xterm .xterm-scrollable-element > .scrollbar {\n    cursor: default;\n}\n\n/* Arrows */\n.xterm .xterm-scrollable-element > .scrollbar > .scra {\n\tcursor: pointer;\n\tfont-size: 11px !important;\n}\n\n.xterm .xterm-scrollable-element > .visible {\n\topacity: 1;\n\n\t/* Background rule added for IE9 - to allow clicks on dom node */\n\tbackground:rgba(0,0,0,0);\n\n\ttransition: opacity 100ms linear;\n\t/* In front of peek view */\n\tz-index: 11;\n}\n.xterm .xterm-scrollable-element > .invisible {\n\topacity: 0;\n\tpointer-events: none;\n}\n.xterm .xterm-scrollable-element > .invisible.fade {\n\ttransition: opacity 800ms linear;\n}\n\n/* Scrollable Content Inset Shadow */\n.xterm .xterm-scrollable-element > .shadow {\n\tposition: absolute;\n\tdisplay: none;\n}\n.xterm .xterm-scrollable-element > .shadow.top {\n\tdisplay: block;\n\ttop: 0;\n\tleft: 3px;\n\theight: 3px;\n\twidth: 100%;\n\tbox-shadow: var(--vscode-scrollbar-shadow, #000) 0 6px 6px -6px inset;\n}\n.xterm .xterm-scrollable-element > .shadow.left {\n\tdisplay: block;\n\ttop: 3px;\n\tleft: 0;\n\theight: 100%;\n\twidth: 3px;\n\tbox-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;\n}\n.xterm .xterm-scrollable-element > .shadow.top-left-corner {\n\tdisplay: block;\n\ttop: 0;\n\tleft: 0;\n\theight: 3px;\n\twidth: 3px;\n}\n.xterm .xterm-scrollable-element > .shadow.top.left {\n\tbox-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;\n}\n"

package/src/client/ssh/sidebar-entry.ts

@@ -0,0 +1,123 @@
+/**
+ * Sidebar entry injection.
+ *
+ * dsh's sidebar shell exposes no slot an external plugin can register into,
+ * so — following the task-board precedent of DOM-level extension — the entry
+ * row is injected between the shell's New Session button and the workspace
+ * browser. The injection self-heals: a MutationObserver watches the sidebar
+ * root and re-inserts the row whenever a React re-render displaces it
+ * (re-insertion happens in the same frame, before paint, so no flicker).
+ *
+ * The row is plain DOM (no React tree) so it can never disturb the shell's
+ * reconciliation; the panel view it toggles is a separate React root mounted
+ * in the center column (see mount.tsx).
+ */
+import type { PanelController } from './panel/controller.ts'
+import { tt } from './panel/helpers.ts'
+import css from './panel/panel.module.css'
+
+/** Stable data attribute identifying the injected entry row. */
+export const ENTRY_SELECTOR = '[data-dsh-ssh-entry]'
+
+/** The sidebar column is the grid item AppFrame renders with this pane marker. */
+const SIDEBAR_COLUMN_SELECTOR = '[data-pane="sidebar"]'
+
+/** Inline icon (matches the shell's 16px nav-icon look): a terminal prompt glyph. */
+const ICON = '<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="2.5" width="12" height="11" rx="1.5"/><path d="M4.5 5.5l2.5 2.5-2.5 2.5"/><path d="M8.5 10.5h3"/></svg>'
+
+/** Find the sidebar shell root element, or undefined while not yet mounted. */
+function sidebarRoot(): HTMLElement | undefined {
+  const column = document.querySelector<HTMLElement>(SIDEBAR_COLUMN_SELECTOR)
+  const root = column?.firstElementChild as HTMLElement | undefined
+  return root ?? undefined
+}
+
+/** The New Session button: the shell's only direct-child button of the root. */
+function newSessionButton(root: HTMLElement): HTMLButtonElement | undefined {
+  for (const child of root.children) {
+    if (child.tagName === 'BUTTON') return child as HTMLButtonElement
+  }
+  return undefined
+}
+
+/** Build the entry row (a detached button; insert once the shell is up). */
+function createEntry(controller: PanelController): HTMLButtonElement {
+  const entry = document.createElement('button')
+  entry.type = 'button'
+  entry.dataset.dshSshEntry = ''
+  entry.className = css.entry
+  entry.setAttribute('aria-label', tt('entry.label'))
+  entry.setAttribute('title', tt('entry.tooltip'))
+  entry.innerHTML = '<span class="' + css.entryIcon + '">' + ICON + '</span><span class="' + css.entryLabel + '">' + tt('entry.label') + '</span>'
+  entry.addEventListener('click', () => { controller.toggle() })
+  return entry
+}
+
+/** Re-insert the entry after the New Session button (before the browser region). */
+function placeEntry(root: HTMLElement, entry: HTMLButtonElement): boolean {
+  const button = newSessionButton(root)
+  if (button === undefined) return false
+  if (entry.parentElement !== root) {
+    // Insert after the button: React never manages this node, and the shell
+    // keeps its own child order intact around it.
+    root.insertBefore(entry, button.nextElementSibling)
+  }
+  return true
+}
+
+/**
+ * Mount the sidebar entry, waiting for the shell to render and self-healing
+ * on later React re-renders.
+ * @param controller - the panel controller the entry toggles.
+ * @returns disposer removing the entry and its observers.
+ */
+export function mountSidebarEntry(controller: PanelController): () => void {
+  const entry = createEntry(controller)
+  let root: HTMLElement | undefined
+  let placed = false
+
+  const tryPlace = (): void => {
+    if (placed) return
+    if (root !== undefined && !root.isConnected) {
+      // The shell re-created the sidebar pane; re-query from scratch.
+      rootObserver.disconnect()
+      root = undefined
+    }
+    root ??= sidebarRoot()
+    if (root === undefined) return
+    placed = placeEntry(root, entry)
+    if (placed) rootObserver.observe(root, { childList: true, subtree: true })
+  }
+
+  // The shell renders after boot settlement; watch for its arrival.
+  const waitObserver = new MutationObserver(() => { tryPlace() })
+  waitObserver.observe(document.body, { childList: true, subtree: true })
+
+  // Self-heal: if a React re-render displaces the row, re-insert it in the
+  // same frame (microtask before paint -> no visible flicker).
+  const rootObserver = new MutationObserver(() => {
+    if (root === undefined || !root.isConnected) {
+      placed = false
+      tryPlace()
+      return
+    }
+    if (!root.contains(entry)) {
+      placed = placeEntry(root, entry)
+    }
+  })
+
+  // Reflect the panel's open state on the row (active highlight).
+  const unsubscribe = controller.subscribe(() => {
+    entry.dataset.active = controller.getSnapshot().panelOpen ? 'true' : undefined
+  })
+  entry.dataset.active = controller.getSnapshot().panelOpen ? 'true' : undefined
+
+  tryPlace()
+
+  return () => {
+    waitObserver.disconnect()
+    rootObserver.disconnect()
+    unsubscribe()
+    entry.remove()
+  }
+}

package/src/client/state.ts

@@ -0,0 +1,99 @@
+/**
+ * Client-side SSH workspace state: the list of SSH-bound workspaces plus a
+ * light poll (3s) keeping it fresh. The snapshot is replaced only on
+ * successful fetches, so React's useSyncExternalStore sees stable references
+ * between polls. There is NO global local/remote mode anymore — a session's
+ * execution world is decided host-side by its cwd (an anchor path of an SSH
+ * workspace routes remote); this client state only drives the management UI
+ * (list / create / delete) and the sidebar title annotations.
+ */
+import type { SshWorkspaceRecord } from '../protocol.ts'
+import type { WorkspaceApi } from './api.ts'
+
+const POLL_MS = 3_000
+
+/** True when two ledgers are identical (same order, same display fields). */
+function sameLedger(a: SshWorkspaceRecord[], b: SshWorkspaceRecord[]): boolean {
+  if (a.length !== b.length) return false
+  for (let index = 0; index < a.length; index += 1) {
+    const left = a[index]
+    const right = b[index]
+    if (
+      left.id !== right.id
+      || left.title !== right.title
+      || left.alias !== right.alias
+      || left.remoteRoot !== right.remoteRoot
+      || left.anchorPath !== right.anchorPath
+    ) {
+      return false
+    }
+  }
+  return true
+}
+
+export interface WorkspaceManagerState {
+  /** SSH-bound workspaces, in creation order. */
+  workspaces: SshWorkspaceRecord[]
+  /** Whether the last load failed (keeps the previous list). */
+  error: string | null
+}
+
+export class WorkspaceManager {
+  private state: WorkspaceManagerState = { workspaces: [], error: null }
+  private readonly listeners = new Set<() => void>()
+  private timer: number | undefined
+
+  constructor(private readonly api: WorkspaceApi) {}
+
+  getSnapshot(): WorkspaceManagerState {
+    return this.state
+  }
+
+  subscribe(listener: () => void): () => void {
+    this.listeners.add(listener)
+    return () => {
+      this.listeners.delete(listener)
+    }
+  }
+
+  private emit(): void {
+    for (const listener of [...this.listeners]) listener()
+  }
+
+  async refresh(): Promise<void> {
+    try {
+      const workspaces = await this.api.listWorkspaces()
+      const next: WorkspaceManagerState = { workspaces, error: null }
+      // Emit only on real change: identical polls keep the same snapshot
+      // reference, so subscribers (badges, the manager menu) don't re-run
+      // on every 3s tick.
+      if (!sameLedger(this.state.workspaces, next.workspaces) || this.state.error !== null) {
+        this.state = next
+        this.emit()
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+      if (this.state.error !== message) {
+        this.state = { ...this.state, error: message }
+        this.emit()
+      }
+    }
+  }
+
+  start(): void {
+    void this.refresh()
+    this.timer = window.setInterval(() => void this.refresh(), POLL_MS)
+  }
+
+  stop(): void {
+    if (this.timer !== undefined) {
+      window.clearInterval(this.timer)
+      this.timer = undefined
+    }
+  }
+
+  async remove(id: string): Promise<void> {
+    await this.api.deleteWorkspace(id)
+    await this.refresh()
+  }
+}

package/src/client/text.ts

@@ -0,0 +1,22 @@
+/**
+ * Tiny localization helper: resolves the active dictionary (zh when the
+ * document language starts with zh, else en). The dictionary is swapped by
+ * the plugin's apply() on <html lang> changes.
+ */
+import { en, zh, type WorkspaceKey } from './locales.ts'
+
+let current: typeof zh = document.documentElement.lang?.startsWith('zh') ? zh : en
+
+/** Switch the active dictionary (called by the client entry on lang change). */
+export function setLanguage(zhMode: boolean): void {
+  current = zhMode ? zh : en
+}
+
+/** Resolve one copy key (supports %s / %d substitution). */
+export function tt(key: WorkspaceKey, ...args: Array<string | number>): string {
+  let text = current[key] ?? zh[key] ?? key
+  for (const arg of args) {
+    text = text.replace(/%[sd]/, String(arg))
+  }
+  return text
+}

package/src/client/workspace-badges.ts

@@ -0,0 +1,96 @@
+/**
+ * Sidebar workspace-row augmentation: labels every host workspace row whose
+ * title matches an SSH-bound workspace with a compact remote badge
+ * (`alias @ remoteRoot`), so a glance tells a local workspace from a remote
+ * one. Pure DOM-level extension (the sidebar shell exposes no slot for row
+ * decoration), following the dsh-ssh sidebar-entry precedent: a
+ * MutationObserver self-heals when React re-renders displace the injected
+ * badge.
+ *
+ * The row title alone matches: SSH-bound workspace titles are unique enough
+ * in practice (the ledger title is what the row shows). A title match against
+ * `~/.dsh/ssh-workspaces/<id>` anchors also works when the host picks that
+ * default title.
+ *
+ * @module dsh-hardssh/client/workspace-badges
+ */
+
+const PROJECT_ROW_SELECTOR = '[class*="projectRow"]'
+const TITLE_SELECTOR = '[class*="title"]'
+
+/** Render a small remote badge element. The cloud icon marks "remote";
+ *  connected servers render in DeepSeek blue, disconnected stay gray. The
+ *  tooltip shows the REMOTE directory plus the server, e.g.
+ *  `/data/app (prod-01)`. */
+export function makeBadge(alias: string, remoteRoot: string, connected: boolean): HTMLElement {
+  const badge = document.createElement('span')
+  badge.dataset.sshBadge = connected ? 'connected' : 'disconnected'
+  badge.title = `${remoteRoot}（${alias}）`
+  badge.setAttribute(
+    'style',
+    connected
+      ? 'display:inline-flex;align-items:center;gap:3px;margin-left:6px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:16px;color:#1476E6;border:1px solid #1476E6;border-radius:999px;padding:0 6px;background:#D4E0F7;flex:none'
+      : 'display:inline-flex;align-items:center;gap:3px;margin-left:6px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:16px;color:var(--dsw-alias-label-tertiary,rgba(128,128,128,.75));border:1px solid var(--dsw-alias-line-secondary,rgba(128,128,128,.28));border-radius:999px;padding:0 6px;background:var(--dsw-alias-interactive-bg-hover,rgba(128,128,128,.10));flex:none',
+  )
+  const icon = document.createElement('span')
+  icon.setAttribute('style', 'display:inline-flex;flex:none;line-height:1')
+  icon.innerHTML = '<svg viewBox="0 0 1024 1024" width="11" height="11" fill="currentColor" aria-hidden="true"><path d="M743.936 758.499556h-273.066667c-17.066667 0-34.133333-17.066667-34.133333-34.133334s17.066667-34.133333 34.133333-34.133333h273.066667c28.444444 0 153.6-5.688889 153.6-130.844445 0-142.222222-153.6-164.977778-159.288889-164.977777-17.066667 0-28.444444-11.377778-28.444444-22.755556-22.755556-85.333333-108.088889-142.222222-193.422223-130.844444-136.533333 0-176.355556 79.644444-199.111111 164.977777-5.688889 5.688889-22.755556 17.066667-39.822222 17.066667 0 0-153.6 5.688889-153.6 142.222222 0 119.466667 130.844444 125.155556 153.6 125.155556 17.066667 0 34.133333 17.066667 34.133333 34.133333s-17.066667 34.133333-34.133333 34.133334c-113.777778 0-227.555556-62.577778-227.555555-193.422223 0-142.222222 119.466667-204.8 199.111111-210.488889 22.755556-68.266667 79.644444-193.422222 261.688889-193.422222 113.777778-11.377778 216.177778 56.888889 256 164.977778 79.644444 17.066667 199.111111 79.644444 199.111111 233.244444 5.688889 136.533333-108.088889 199.111111-221.866667 199.111112z"/><path d="M573.269333 866.588444c-11.377778 0-17.066667-5.688889-22.755555-11.377777l-108.088889-108.088889c-5.688889-5.688889-11.377778-17.066667-11.377778-22.755556s5.688889-17.066667 11.377778-22.755555l108.088889-108.088889c11.377778-11.377778 34.133333-11.377778 51.2 0 11.377778 11.377778 11.377778 34.133333 0 51.2l-79.644445 79.644444 79.644445 79.644445c11.377778 11.377778 11.377778 34.133333 0 51.2-5.688889 5.688889-17.066667 11.377778-28.444445 11.377777z"/></svg>'
+  const label = document.createElement('span')
+  label.textContent = alias
+  label.setAttribute('style', 'font-weight:400')
+  badge.append(icon, label)
+  return badge
+}
+
+/**
+ * Mount the row-decoration pass. Queries the sidebar for project rows and
+ * appends a remote badge when the row's title belongs to an SSH workspace.
+ * Badges of aliases in `connected` render blue, others gray. Self-heals via
+ * MutationObserver on the sidebar container (rows re-render on
+ * session/workspace changes).
+ * @param workspaces - the SSH workspace records (id/title/alias/remoteRoot).
+ * @param connected - aliases with a live pooled connection (badge coloring).
+ * @returns disposer.
+ */
+export function mountWorkspaceBadges(
+  workspaces: Array<{ id: string; title: string; alias: string; remoteRoot: string }>,
+  connected?: ReadonlySet<string>,
+): () => void {
+  const byTitle = new Map<string, { alias: string; remoteRoot: string }>()
+  for (const workspace of workspaces) byTitle.set(workspace.title, workspace)
+
+  /** Decorate one project row (idempotent: skip rows already tagged). */
+  const decorate = (row: HTMLElement): void => {
+    if (row.querySelector('[data-ssh-badge]') !== null) return
+    const titleEl = row.querySelector<HTMLElement>(TITLE_SELECTOR)
+    if (titleEl === null || titleEl === undefined) return
+    const title = titleEl.textContent?.trim() ?? ''
+    const target = byTitle.get(title)
+    if (target === undefined) return
+    const isConnected = connected?.has(target.alias) ?? false
+    // Hovering the row shows the REMOTE directory (not the local anchor path
+    // the shell would otherwise display).
+    row.title = `${target.remoteRoot}（${target.alias}）`
+    titleEl.appendChild(makeBadge(target.alias, target.remoteRoot, isConnected))
+  }
+
+  /** Scan the sidebar column for project rows and decorate each. */
+  const scan = (): void => {
+    for (const row of document.querySelectorAll<HTMLElement>(PROJECT_ROW_SELECTOR)) {
+      decorate(row)
+    }
+  }
+
+  // Watch the whole document for the sidebar column arriving / re-rendering.
+  const observer = new MutationObserver(() => { scan() })
+  observer.observe(document.body, { childList: true, subtree: true })
+  scan()
+
+  return () => {
+    observer.disconnect()
+    // Remove injected badges.
+    for (const badge of document.querySelectorAll<HTMLElement>('[data-ssh-badge]')) {
+      badge.remove()
+    }
+  }
+}

package/src/client/workspace-gate.ts

@@ -0,0 +1,225 @@
+/**
+ * Sidebar workspace-row click gate: when the operator clicks an SSH-bound
+ * workspace row in the session sidebar, ensure the server connection can
+ * actually be established BEFORE the shell proceeds with the native open —
+ * otherwise the shell surfaces raw SSH errors (host key untrusted, session
+ * password missing) and the workspace appears "dead" with no prompt.
+ *
+ * The gate runs the engine's /test probe (a real, lightweight connect):
+ * - HOST_KEY_UNKNOWN / HOST_KEY_MISMATCH → the host fingerprint confirm
+ *   dialog (HostFingerprintDialog; TOFU first encounter / key rotation);
+ * - NEEDS_PASSWORD / NEEDS_PASSPHRASE → the VSCode-style session password
+ *   dialog (SessionSecretDialog; never persisted, session-only);
+ * - ok → mark the alias as gated (5-minute TTL — trust is durable and the
+ *   session password survives in the engine table) and re-dispatch the click.
+ *
+ * Pure DOM-level extension following the workspace-badges precedent: the
+ * sidebar shell exposes no row slot, so a MutationObserver self-heals when
+ * React re-renders displace the injected listener. A capture-phase listener
+ * on the row blocks the shell's click while a dialog is needed, then lets
+ * clicks through once the alias has passed the gate.
+ *
+ * @module dsh-hardssh/client/workspace-gate
+ */
+import { createElement, type ReactElement } from 'react'
+import { createRoot } from 'react-dom/client'
+import type { SshApi } from './ssh/api.ts'
+import { SshApiError } from './ssh/api.ts'
+import { HostFingerprintDialog } from './ssh/panel/HostFingerprintDialog.tsx'
+import { SessionSecretDialog } from './ssh/panel/SessionSecretDialog.tsx'
+import { tt } from './text.ts'
+
+const PROJECT_ROW_SELECTOR = '[class*="projectRow"]'
+const TITLE_SELECTOR = '[class*="title"]'
+/** A passed gate stays valid this long (trust is durable; the session
+ *  password table lives in the host process for the session). */
+const GATE_TTL_MS = 5 * 60 * 1000
+/** Cap on interactive retry rounds (wrong password loops etc.). */
+const MAX_ATTEMPTS = 3
+
+/** alias → last successful gate timestamp (browser-session scope). */
+const gatePassedAt = new Map<string, number>()
+/** alias → in-flight gate promise (no duplicate dialogs on multi-click). */
+const pending = new Map<string, Promise<boolean>>()
+/** alias → SSH login name (fetched once for the user@alias prompt). */
+let hostsCache: Map<string, string> | null = null
+
+async function hostsUser(api: SshApi, alias: string): Promise<string | undefined> {
+  if (hostsCache === null) {
+    try {
+      const list = await api.listHosts()
+      hostsCache = new Map(list.map(host => [host.alias, host.user]))
+    } catch {
+      hostsCache = new Map()
+    }
+  }
+  return hostsCache.get(alias)
+}
+
+function gateActive(alias: string, now: number): boolean {
+  const at = gatePassedAt.get(alias)
+  return at !== undefined && now - at < GATE_TTL_MS
+}
+
+/** Mount a dialog component into a fresh portal root; returns its closer.
+ *  The dialog's onClose prop is forced to the closer so cancel works. */
+function mountModal(node: ReactElement): () => void {
+  const host = document.createElement('div')
+  host.dataset.sshGateDialog = ''
+  document.body.appendChild(host)
+  const root = createRoot(host)
+  const close = (): void => {
+    root.unmount()
+    host.remove()
+  }
+  root.render(createElement(node.type, { ...node.props, onClose: close }))
+  return close
+}
+
+/** Transient inline error under the clicked row (removed after 8 s).
+ *  A null row means the caller owns error surfacing — stay silent. */
+function showBanner(row: HTMLElement | null, alias: string, message: string): void {
+  if (row === null) return
+  const banner = document.createElement('div')
+  banner.dataset.sshGateError = ''
+  banner.textContent = `${tt('gate.failed', alias)}: ${message}`
+  banner.setAttribute(
+    'style',
+    'margin:2px 4px;padding:6px 8px;font-size:12px;color:#b00020;background:rgba(176,0,32,.08);border-radius:4px;white-space:normal;line-height:1.5',
+  )
+  row.insertAdjacentElement('afterend', banner)
+  setTimeout(() => { banner.remove() }, 8000)
+}
+
+/** Interactive prompts, resolving true when the user finished the action. */
+function promptFingerprint(api: SshApi, alias: string, fingerprintSha256: string, mismatch: boolean): Promise<boolean> {
+  return new Promise((resolve) => {
+    const close = mountModal(createElement(HostFingerprintDialog, {
+      api,
+      alias,
+      fingerprintSha256,
+      mismatch,
+      onClose: () => { resolve(false) },
+      onTrusted: () => { close(); resolve(true) },
+    }))
+  })
+}
+
+function promptSecret(api: SshApi, alias: string, secret: 'password' | 'passphrase'): Promise<boolean> {
+  return new Promise((resolve) => {
+    let closed = false
+    const finish = (ok: boolean): void => {
+      if (closed) return
+      closed = true
+      resolve(ok)
+    }
+    void hostsUser(api, alias).then((user) => {
+      const close = mountModal(createElement(SessionSecretDialog, {
+        api,
+        alias,
+        user,
+        secret,
+        onClose: () => { finish(false) },
+        onProvided: () => { close(); finish(true) },
+      }))
+    })
+  })
+}
+
+/**
+ * Probe + prompt until connected. Resolves true when the alias may proceed
+ * (the gate passed); false when the user cancelled or the failure is not
+ * interactive (banner left behind).
+ */
+function ensureConnected(api: SshApi, alias: string, row: HTMLElement | null): Promise<boolean> {
+  const now = Date.now()
+  if (gateActive(alias, now)) return Promise.resolve(true)
+  const inFlight = pending.get(alias)
+  if (inFlight !== undefined) return inFlight
+
+  const attempt = (async (): Promise<boolean> => {
+    for (let i = 0; i < MAX_ATTEMPTS; i++) {
+      try {
+        const result = await api.testHost(alias)
+        if (result.ok) {
+          gatePassedAt.set(alias, Date.now())
+          return true
+        }
+        if (result.code === 'NEEDS_PASSWORD' && (result.secret === 'password' || result.secret === 'passphrase')) {
+          if (await promptSecret(api, alias, result.secret)) continue
+          return false
+        }
+        showBanner(row, alias, result.error ?? 'connection failed')
+        return false
+      } catch (cause) {
+        if (cause instanceof SshApiError && (cause.code === 'HOST_KEY_UNKNOWN' || cause.code === 'HOST_KEY_MISMATCH')) {
+          const fingerprint = cause.hostKeyFingerprint ?? ''
+          if (fingerprint !== '' && await promptFingerprint(api, alias, fingerprint, cause.code === 'HOST_KEY_MISMATCH')) continue
+          if (fingerprint === '') showBanner(row, alias, cause.message)
+          return false
+        }
+        showBanner(row, alias, cause instanceof Error ? cause.message : String(cause))
+        return false
+      }
+    }
+    showBanner(row, alias, tt('gate.retryLimit'))
+    return false
+  })()
+
+  pending.set(alias, attempt)
+  void attempt.finally(() => { pending.delete(alias) })
+  return attempt
+}
+
+/** Silent prompt-only connection gate (no row / banner) for flows that
+ *  surface their own errors (e.g. the directory browser). */
+export function connectHost(api: SshApi, alias: string): Promise<boolean> {
+  return ensureConnected(api, alias, null)
+}
+
+/**
+ * Mount the click gate over every sidebar workspace row whose title belongs
+ * to an SSH-bound workspace. Self-heals via MutationObserver. Returns a
+ * disposer that removes listeners and injected state.
+ */
+export function mountWorkspaceGates(
+  workspaces: Array<{ id: string; title: string; alias: string }>,
+  api: SshApi,
+): () => void {
+  const byTitle = new Map<string, string>()
+  for (const workspace of workspaces) byTitle.set(workspace.title, workspace.alias)
+
+  const attach = (row: HTMLElement): void => {
+    if (row.dataset.sshGate !== undefined) return
+    const titleEl = row.querySelector<HTMLElement>(TITLE_SELECTOR)
+    if (titleEl === null || titleEl === undefined) return
+    const alias = byTitle.get(titleEl.textContent?.trim() ?? '')
+    if (alias === undefined) return
+    row.dataset.sshGate = '1'
+    row.addEventListener('click', (event: MouseEvent) => {
+      if (gateActive(alias, Date.now())) return // passed: let the native click through
+      event.preventDefault()
+      event.stopPropagation()
+      void ensureConnected(api, alias, row).then((ok) => {
+        if (ok) row.click() // re-dispatch; the guard now lets it through
+      })
+    }, true)
+  }
+
+  const scan = (): void => {
+    for (const row of document.querySelectorAll<HTMLElement>(PROJECT_ROW_SELECTOR)) {
+      attach(row)
+    }
+  }
+
+  const observer = new MutationObserver(() => { scan() })
+  observer.observe(document.body, { childList: true, subtree: true })
+  scan()
+
+  return () => {
+    observer.disconnect()
+    for (const row of document.querySelectorAll<HTMLElement>('[data-ssh-gate]')) {
+      delete row.dataset.sshGate
+    }
+  }
+}