@tiphareth/dsh-hardssh 0.1.2-alpha

package/src/client/index.ts

@@ -0,0 +1,210 @@
+/**
+ * Browser-half entry for the dsh-hardssh plugin — runs inside the dsh
+ * web GUI. Registers a session-header utility (SSH workspace manager, left
+ * of the session log) that lists SSH-bound workspaces, creates new ones
+ * (host + remote directory picker) and deletes them. The execution-world
+ * routing itself is HOST-side: a session whose cwd is the anchor path of an
+ * SSH workspace routes its fs/subprocess calls remote; every other session
+ * stays local. There is no global local⇄remote toggle anymore.
+ * Failure policy: every DOM wiring problem is logged, never thrown — the
+ * web shell fails the whole boot when a plugin apply throws.
+ */
+import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
+// Type-only: pulls the conversation SlotMap augmentation (the utilities slot).
+import type {} from '@deepseek-ai/dsh-client-ui-conversation/client'
+import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
+// Type-only: pulls the SlotMap augmentation for the two directory-flow holes.
+import type {} from '@deepseek-ai/dsh-client-ui-workspace/client'
+import type {} from '@deepseek-ai/dsh-client-ui-slots'
+import type {} from '@deepseek-ai/dsh-client-locale/client'
+import { SshHostsApi, WorkspaceApi } from './api.ts'
+import { SshApi } from './ssh/api.ts'
+import { NS, dictionaries, type WorkspaceKey } from './locales.ts'
+import { WorkspaceManager } from './state.ts'
+import { setLanguage } from './text.ts'
+import { WorkspaceManagerButton } from './manager-button.tsx'
+import { migrateLegacySessionMemory } from './migrate.ts'
+import { DirectoryFlow } from './directory-flow.tsx'
+import { mountWorkspaceBadges } from './workspace-badges.ts'
+import { connectHost, mountWorkspaceGates } from './workspace-gate.ts'
+import { mountSshOperations } from './ssh/apply.ts'
+
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+  interface LocaleNamespaceMap {
+    /** dsh-hardssh surface copy. */
+    'dsh-hardssh': WorkspaceKey
+  }
+}
+
+// Type-only re-exports of the SSH operations surfaces (merge phase 2).
+export type { PanelControllerSnapshot } from './ssh/panel/controller.ts'
+export type { SshPanelProps } from './ssh/panel/SshPanel.tsx'
+export type { HostsTabProps } from './ssh/panel/HostsTab.tsx'
+export type { HostFormDialogProps } from './ssh/panel/HostFormDialog.tsx'
+export type { TerminalTabProps } from './ssh/panel/TerminalTab.tsx'
+export type { TransferTabProps } from './ssh/panel/TransferTab.tsx'
+export type { TunnelsTabProps } from './ssh/panel/TunnelsTab.tsx'
+export type { ClusterTabProps } from './ssh/panel/ClusterTab.tsx'
+export type { SshKey } from './ssh/locales.ts'
+
+/** Required services: slots for the header buttons + directory-flow holes,
+ *  locale for the copy, workspaces for the native local-directory chooser. */
+export const inject = ['slots', 'locale', 'workspaces']
+
+/** Apply the browser half. */
+export function apply(ctx: ClientContext): void {
+  // SSH operations surfaces (sidebar entry + operations panel), merged from
+  // the legacy dsh-ssh client. Mounted first; its failures degrade the SSH
+  // panel only, never the GUI.
+  mountSshOperations(ctx)
+
+  ctx.effect(() => ctx.locale.register(NS, dictionaries), 'dsh-hardssh: dictionaries')
+
+  const api = new WorkspaceApi()
+  const hostsApi = new SshHostsApi()
+  const sshApi = new SshApi()
+  const manager = new WorkspaceManager(api)
+
+  const disposers: Array<() => void> = []
+  try {
+    ctx.slots.inject('conversation.session.header.utilities', () => {
+      return ctx.slots.register(
+        { name: 'conversation.session.header.utilities', id: 'ssh-workspace-manager', order: -10, inject: () => ({ manager, sshApi }) },
+        WorkspaceManagerButton,
+      )
+    })
+
+    // Replace the native-only directory-flow occupant (both holes) with the
+    // SSH/local chooser. `pickDirectory` restores the original native local
+    // picking for the "Local workspace" branch; the SSH branch drives our own
+    // creation dialog and hands the anchor dir to the owner.
+    //
+    // Mirror the native picker's registration shape exactly: nested
+    // `inject(hero) -> inject(sidebar) -> generator`, so the declarations are
+    // re-checked each activation and our occupant lands once ui-workspace is
+    // live. A negative priority beats the native occupant (priority 0) under
+    // the single-slot "lowest wins" rule.
+    const flowInject = (): Record<string, unknown> => ({
+      pickDirectory: () => ctx.workspaces.pickDirectory(),
+      createSshWorkspace: (input: { title: string; alias: string; remoteRoot: string }) => api.createWorkspace(input),
+      listHosts: () => api.listHosts(),
+      createHost: (input: {
+        alias: string
+        host: string
+        port?: number
+        user: string
+        auth: { kind: 'password'; password: string } | { kind: 'key'; keyPath: string; passphrase?: string }
+      }) => hostsApi.create(input),
+      listRemoteDir: (alias: string, path?: string) => api.listRemoteDir(alias, path),
+      ensureConnected: (alias: string) => connectHost(sshApi, alias),
+    })
+    ctx.slots.inject('conversation.hero.workspace.directoryFlow', () => ctx.slots.inject('sidebar.workspaces.directoryFlow', function* () {
+      yield (ctx.slots.register as unknown as (options: {
+        name: 'conversation.hero.workspace.directoryFlow'
+        priority?: number
+        inject: () => Record<string, unknown>
+      }, component: unknown) => () => void)(
+        { name: 'conversation.hero.workspace.directoryFlow', priority: -1, inject: flowInject },
+        DirectoryFlow,
+      )
+      yield (ctx.slots.register as unknown as (options: {
+        name: 'sidebar.workspaces.directoryFlow'
+        priority?: number
+        inject: () => Record<string, unknown>
+      }, component: unknown) => () => void)(
+        { name: 'sidebar.workspaces.directoryFlow', priority: -1, inject: flowInject },
+        DirectoryFlow,
+      )
+    }))
+
+    manager.start()
+
+    // Decorate the sidebar workspace rows: append a remote badge to every
+    // host workspace whose title belongs to an SSH-bound workspace. The
+    // badge set is driven by the manager (the single owner of the workspace
+    // list): every successful poll / mutation emits, and the snapshot is the
+    // only data source. Best-effort: a DOM miss only logs.
+    let badgesDispose: (() => void) | undefined
+    // Live connection state (aliases with a pooled transport) → blue badge.
+    let connectedAliases = new Set<string>()
+    const refreshBadges = (): void => {
+      try {
+        const workspaces = manager.getSnapshot().workspaces
+        badgesDispose?.()
+        badgesDispose = mountWorkspaceBadges(workspaces.map((workspace) => ({
+          id: workspace.id,
+          title: workspace.title,
+          alias: workspace.alias,
+          remoteRoot: workspace.remoteRoot,
+        })), connectedAliases)
+      } catch (error) {
+        console.warn('[dsh-hardssh] badge refresh failed:', error)
+      }
+    }
+    disposers.push(() => { badgesDispose?.() })
+    // Same-source sync: no independent fetch or timer — the manager emits on
+    // its 3s poll and on create/remove/rename; the first pass lands when the
+    // manager's initial refresh resolves (start() runs before this subscribe
+    // is registered, and its first emit happens after the synchronous body).
+    disposers.push(manager.subscribe(() => { refreshBadges() }))
+
+    // Connection-state poll: keep badge colors current (same cadence as the
+    // manager's workspace poll). Failure keeps everything gray (safe).
+    const refreshConnections = async (): Promise<void> => {
+      try {
+        connectedAliases = new Set(await sshApi.connectedAliases())
+      } catch (error) {
+        console.warn('[dsh-hardssh] connection-state poll failed:', error)
+        connectedAliases = new Set()
+      }
+      refreshBadges()
+    }
+    const connTimer = window.setInterval(() => { void refreshConnections() }, 3000)
+    disposers.push(() => { window.clearInterval(connTimer) })
+    void refreshConnections()
+
+    // Click gate: probing a workspace row must first establish the SSH
+    // connection (host-key TOFU confirm + session password dialogs), so the
+    // shell never opens a workspace that silently fails underneath.
+    let gateDispose: (() => void) | undefined
+    const refreshGates = (): void => {
+      try {
+        const workspaces = manager.getSnapshot().workspaces
+        gateDispose?.()
+        gateDispose = mountWorkspaceGates(workspaces.map((workspace) => ({
+          id: workspace.id,
+          title: workspace.title,
+          alias: workspace.alias,
+        })), sshApi)
+      } catch (error) {
+        console.warn('[dsh-hardssh] gate refresh failed:', error)
+      }
+    }
+    disposers.push(() => { gateDispose?.() })
+    disposers.push(manager.subscribe(() => { refreshGates() }))
+  } catch (error) {
+    console.warn('[dsh-hardssh] mount failed:', error)
+  }
+
+  // One-time migration: the old build tracked a per-session GLOBAL local⇄remote
+  // mode in localStorage (`ssh-session-state:<id>`). Convert every remembered
+  // remote target into a real SSH-bound workspace record, then forget the
+  // legacy state. Runs async and best-effort; a failure only logs.
+  void migrateLegacySessionMemory(api).catch((error: unknown) => {
+    console.warn('[dsh-hardssh] legacy migration skipped:', error)
+  })
+
+  // Language mirroring (the shell owns <html lang>; the dictionary follows).
+  const syncLanguage = (): void => {
+    setLanguage(document.documentElement.lang?.startsWith('zh') ?? false)
+  }
+  const langObserver = new MutationObserver(syncLanguage)
+  langObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['lang'] })
+  syncLanguage()
+
+  ctx.effect(() => () => {
+    manager.stop()
+    langObserver.disconnect()
+    for (const dispose of disposers.splice(0)) dispose()
+  }, 'dsh-hardssh: wiring')
+}

package/src/client/locales.ts

@@ -0,0 +1,105 @@
+/**
+ * Locale dictionaries for the dsh-hardssh surface (zh/en).
+ * The key union derives from the zh dictionary (mirrors the dsh-ssh locale
+ * pattern), so the LocaleNamespaceMap augmentation types the `t` seat and
+ * the register call against exactly the shipped keys.
+ */
+
+/** Locale namespace this plugin owns. */
+export const NS = 'dsh-hardssh'
+
+/** The zh dictionary (the key union source). */
+export const zh = {
+  'manager.label': 'SSH 工作区',
+  'manager.tooltip': '管理 SSH 工作区：绑定服务器目录，绑定后的会话在远程操作，其余会话在本机',
+  'manager.title': 'SSH 工作区管理',
+    'manager.empty': '还没有 SSH 工作区',
+  'manager.delete': '删除',
+  'manager.editServer': '编辑服务器',
+  'manager.deleteServer': '删除服务器',
+  'manager.newHost': '新建服务器',
+  'manager.hostInUse': '该服务器仍有 %d 个工作区，请先删除工作区',
+        'create.host': '服务器',
+  'create.hostEmpty': '未配置 SSH 主机，请先在设置页配置',
+  'create.dir': '远程目录',
+  'create.dirPlaceholder': '点击「浏览」选择远程目录，或输入绝对路径（如 /data/home/user/project）',
+  'create.browse': '浏览…',
+  'create.up': '上级',
+  'create.current': '当前：',
+  'create.titleLabel': '工作区名称',
+  'create.titlePlaceholder': '如 zebrafish、atac-pipeline',
+  'create.submit': '创建',
+  'create.cancel': '取消',
+  'create.connecting': '正在连接…',
+  'create.needHost': '请先选择服务器',
+  'create.needDir': '请选择或输入远程目录',
+  'create.needTitle': '请填写工作区名称',
+  'create.needConnect': '多次交互后仍未连接成功，请检查服务器或在 SSH 面板中重试',
+      'host.add': '添加服务器…',
+  'host.save': '保存服务器',
+  'host.needFields': '别名、主机、用户名为必填项',
+  'host.needPassword': '密码为必填项（当前仅支持密码认证）',
+  'dialog.alias': '别名',
+  'dialog.host': '主机',
+  'dialog.port': '端口',
+  'dialog.user': '用户名',
+  'dialog.password': '密码',
+  'dialog.passwordHint': '可留空——首次连接或浏览目录时再输入',
+      'flow.local': '本地工作区…',
+  'flow.ssh': 'SSH 工作区…',
+  'flow.useThisDir': '使用此目录',
+  'panel.loading': '加载中…',
+  'gate.failed': '连接 SSH 服务器 %s 失败',
+  'gate.retryLimit': '多次交互后仍未连上，请稍后重试或在 SSH 面板检查服务器',
+              }
+
+/** The key union (used by the LocaleNamespaceMap augmentation). */
+export type WorkspaceKey = keyof typeof zh
+
+/** The en dictionary (same key set). */
+export const en: Record<WorkspaceKey, string> = {
+  'manager.label': 'SSH workspaces',
+  'manager.tooltip': 'Manage SSH workspaces: bind a server directory — sessions in a bound workspace operate remotely, all others stay local',
+  'manager.title': 'SSH Workspaces',
+    'manager.empty': 'No SSH workspaces yet',
+      'manager.delete': 'Delete',
+  'manager.editServer': 'Edit server',
+  'manager.deleteServer': 'Delete server',
+  'manager.newHost': 'New server',
+  'manager.hostInUse': 'This server still backs %d workspace(s) — delete them first',
+        'create.host': 'Server',
+  'create.hostEmpty': 'No SSH host configured — add one in Settings first',
+  'create.dir': 'Remote directory',
+  'create.dirPlaceholder': 'Click Browse to pick a remote directory, or type an absolute path (e.g. /data/home/user/project)',
+  'create.browse': 'Browse…',
+  'create.up': 'Up',
+  'create.current': 'Current: ',
+  'create.titleLabel': 'Workspace name',
+  'create.titlePlaceholder': 'e.g. zebrafish, atac-pipeline',
+  'create.submit': 'Create',
+  'create.cancel': 'Cancel',
+  'create.connecting': 'Connecting…',
+  'create.needHost': 'Pick a server first',
+  'create.needDir': 'Pick or type a remote directory',
+  'create.needTitle': 'Give the workspace a name',
+  'create.needConnect': 'Still not connected after several attempts — check the server or retry in the SSH panel',
+      'host.add': 'Add server…',
+  'host.save': 'Save server',
+  'host.needFields': 'Alias, host and user are required',
+  'host.needPassword': 'Password is required (password auth only for now)',
+  'dialog.alias': 'Alias',
+  'dialog.host': 'Host',
+  'dialog.port': 'Port',
+  'dialog.user': 'User',
+  'dialog.password': 'Password',
+  'dialog.passwordHint': 'Optional — enter when first connecting or browsing',
+      'flow.local': 'Local workspace…',
+  'flow.ssh': 'SSH workspace…',
+  'flow.useThisDir': 'Use this directory',
+  'panel.loading': 'Loading…',
+  'gate.failed': 'Failed to connect SSH server %s',
+  'gate.retryLimit': 'Still not connected after several attempts — retry later or check the server in the SSH panel',
+              }
+
+/** The dictionary pair registered into the locale service. */
+export const dictionaries = { zh, en } as const

package/src/client/manager-button.tsx

@@ -0,0 +1,269 @@
+/**
+ * The SSH workspace manager: a session-header button opening a dropdown that
+ * lists SSH-bound workspaces grouped by server (two-level: server → its
+ * workspaces) and lets the operator:
+ * - delete a workspace (existing),
+ * - edit / delete a SERVER (gear / minus on each server row; deleting a
+ *   server is allowed only when it backs no workspace — the API also enforces
+ *   this with a 409 HOST_IN_USE),
+ * - create a new server (bottom action), reusing the host form dialog.
+ * Rendering is a portal dropdown with its own React root (the shell exposes
+ * no modal slot for external plugins).
+ */
+import { createRoot } from 'react-dom/client'
+import { useEffect, useRef, useState, type ReactElement } from 'react'
+import { createPortal } from 'react-dom'
+import type { WorkspaceManager } from './state.ts'
+import type { SshWorkspaceRecord } from '../protocol.ts'
+import { tt } from './text.ts'
+import css from './workspace.module.css'
+import { CloudIcon, ComputerIcon } from './icons.tsx'
+import type { SshHostSummary } from '../ssh/protocol.ts'
+import { HostFormDialog } from './ssh/panel/HostFormDialog.tsx'
+import type { SshApi } from './ssh/api.ts'
+
+/** The session-header button. Slot-injected props: manager + sshApi. */
+export function WorkspaceManagerButton(props: {
+  manager: WorkspaceManager
+  /** Full SSH host API (list/create/update/delete) for server management. */
+  sshApi?: SshApi
+  sessionId?: unknown
+  useSession?: unknown
+  useSessions?: unknown
+  useWorkspaces?: unknown
+  useProjection?: unknown
+  useInput?: unknown
+  inputActions?: unknown
+  renderSlot?: unknown
+  renderSlotChain?: unknown
+  t?: unknown
+}): ReactElement {
+  return (
+    <button
+      type="button"
+      className={css.managerButton}
+      data-ssh-workspace-manager=""
+      title={tt('manager.tooltip')}
+      onClick={(event) => openManager(props.manager, props.sshApi, event.currentTarget)}
+    >
+      <svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+        <rect x="2" y="3" width="12" height="10" rx="2" />
+        <path d="M6 6.5l2.2 1.6L6 9.7" />
+        <path d="M9.5 9.5h2" />
+      </svg>
+      <span>{tt('manager.label')}</span>
+    </button>
+  )
+}
+
+/** Open the manager dropdown, anchored under the trigger button. */
+export function openManager(manager: WorkspaceManager, sshApi?: SshApi, trigger?: HTMLElement): void {
+  const element = document.createElement('div')
+  element.dataset.sshWorkspaceManagerOverlay = ''
+  document.body.appendChild(element)
+  const root = createRoot(element)
+  const close = (): void => {
+    root.unmount()
+    element.remove()
+  }
+  let anchor: { bottom: number; left: number } | undefined
+  if (trigger !== undefined) {
+    const rect = trigger.getBoundingClientRect()
+    anchor = { bottom: rect.bottom, left: rect.left }
+  }
+  root.render(<ManagerOverlay manager={manager} sshApi={sshApi} onClose={close} anchor={anchor} />)
+}
+
+/** Group workspaces by server alias for the two-level listing. */
+function groupByServer(workspaces: SshWorkspaceRecord[]): Array<{ alias: string; workspaces: SshWorkspaceRecord[] }> {
+  const map = new Map<string, SshWorkspaceRecord[]>()
+  for (const workspace of workspaces) {
+    const list = map.get(workspace.alias)
+    if (list === undefined) map.set(workspace.alias, [workspace])
+    else list.push(workspace)
+  }
+  return [...map.entries()].map(([alias, workspaces]) => ({ alias, workspaces }))
+}
+
+/** The host-form dialog invocation state. */
+type HostDialogState = { mode: 'create' } | { mode: 'edit'; host: SshHostSummary }
+
+/** The manager dropdown: server + workspace rows, with server CRUD. */
+export function ManagerOverlay(props: {
+  manager: WorkspaceManager
+  sshApi?: SshApi
+  onClose: () => void
+  anchor?: { bottom: number; left: number }
+}): ReactElement {
+  const [workspaces, setWorkspaces] = useState<SshWorkspaceRecord[] | null>(null)
+  const [hosts, setHosts] = useState<SshHostSummary[] | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [deleting, setDeleting] = useState<string | null>(null)
+  const [deletingAlias, setDeletingAlias] = useState<string | null>(null)
+  const [hostDialog, setHostDialog] = useState<HostDialogState | null>(null)
+  const menuRef = useRef<HTMLDivElement | null>(null)
+
+  // Close when a click lands OUTSIDE the dropdown.
+  useEffect(() => {
+    const onMouseDown = (event: MouseEvent): void => {
+      if (menuRef.current !== null && menuRef.current.contains(event.target as Node)) return
+      props.onClose()
+    }
+    document.addEventListener('mousedown', onMouseDown)
+    return () => document.removeEventListener('mousedown', onMouseDown)
+  }, [props])
+
+  const load = (): void => {
+    setWorkspaces(props.manager.getSnapshot().workspaces)
+  }
+
+  const loadHosts = (): void => {
+    if (props.sshApi === undefined) return
+    void props.sshApi.listHosts().then(
+      (list) => { setHosts(list) },
+      (cause: unknown) => {
+        setError(cause instanceof Error ? cause.message : String(cause))
+        setHosts([])
+      },
+    )
+  }
+
+  useEffect(() => {
+    load()
+    void props.manager.refresh()
+    const unsubscribe = props.manager.subscribe(() => { load() })
+    loadHosts()
+    return () => { unsubscribe() }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const remove = (id: string): void => {
+    setDeleting(id)
+    void props.manager.remove(id)
+      .catch((e: unknown) => setError(e instanceof Error ? e.message : String(e)))
+      .finally(() => setDeleting(null))
+  }
+
+  const deleteHost = (alias: string): void => {
+    if (props.sshApi === undefined) return
+    setDeletingAlias(alias)
+    void props.sshApi.deleteHost(alias)
+      .then(() => { loadHosts() })
+      .catch((e: unknown) => setError(e instanceof Error ? e.message : String(e)))
+      .finally(() => setDeletingAlias(null))
+  }
+
+  const savedHost = (): void => {
+    setHostDialog(null)
+    loadHosts()
+    void props.manager.refresh()
+  }
+
+  const anchorTop = props.anchor !== undefined ? props.anchor.bottom + 4 : 56
+  const anchorLeft = props.anchor !== undefined ? props.anchor.left : Math.max(8, window.innerWidth - 380)
+  const top = Math.max(8, Math.min(anchorTop, window.innerHeight - 340))
+  const left = Math.max(8, Math.min(anchorLeft, window.innerWidth - 380))
+
+
+  return createPortal(
+    <div
+      ref={menuRef}
+      className={css.menuDropdown}
+      data-ssh-workspace-manager-menu=""
+      style={{ top, left, width: 380 }}
+      onClick={(event) => event.stopPropagation()}
+    >
+      <p className={css.managerMenuHeader}>
+        {tt('manager.title')}
+        <button type="button" className={css.managerMenuClose} onClick={props.onClose} aria-label={tt('create.cancel')}>&times;</button>
+      </p>
+
+      {error !== null && <div className={css.dialogFail}>{error}</div>}
+
+      {workspaces === null && hosts === null && <div className={css.dialogInfo}>{tt('panel.loading')}</div>}
+
+      {workspaces !== null && workspaces.length === 0 && (
+        <div className={css.dialogHint}>{tt('manager.empty')}</div>
+      )}
+
+      {/* Server rows (edit + delete) with their workspaces underneath */}
+      {hosts !== null && hosts.map((host) => {
+        const hostWorkspaces = workspaces === null ? [] : workspaces.filter(w => w.alias === host.alias)
+        const inUse = hostWorkspaces.length > 0
+        return (
+          <div key={host.alias} style={{ marginBottom: 10 }}>
+            <div className={css.managerGroupHeader} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 8px' }}>
+              <ComputerIcon size={13} />
+              <span style={{ fontWeight: 500, fontSize: 13, flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {host.alias}
+              </span>
+              <span className={css.hostMeta} style={{ fontSize: 11 }}>{host.user}@{host.host}:{host.port}</span>
+              {/* Gear: edit server */}
+              <button
+                type="button"
+                className={css.menuItemIconButton}
+                title={tt('manager.editServer')}
+                aria-label={tt('manager.editServer')}
+                onClick={() => { setHostDialog({ mode: 'edit', host }) }}
+              >
+                ⚙
+              </button>
+              {/* Minus: delete server (disabled while it backs workspaces) */}
+              <button
+                type="button"
+                className={css.menuItemIconButton}
+                title={inUse ? tt('manager.hostInUse', hostWorkspaces.length) : tt('manager.deleteServer')}
+                aria-label={tt('manager.deleteServer')}
+                disabled={inUse || deletingAlias === host.alias}
+                onClick={() => { if (!inUse) deleteHost(host.alias) }}
+              >
+                −
+              </button>
+            </div>
+            {hostWorkspaces.map((workspace) => (
+              <div key={workspace.id} className={css.hostRow} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '3px 8px' }}>
+                <CloudIcon size={12} />
+                <span className={css.hostAlias} style={{ fontSize: 12.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1, minWidth: 0 }}>
+                  {workspace.title}
+                </span>
+                <span className={css.hostMeta} style={{ fontSize: 11, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 150 }}>
+                  {workspace.remoteRoot}
+                </span>
+                <button
+                  type="button"
+                  className={`${css.button} ${css.danger}`}
+                  style={{ flex: 'none', padding: '2px 8px', fontSize: 12 }}
+                  disabled={deleting === workspace.id}
+                  onClick={() => { if (!deleting) remove(workspace.id) }}
+                >
+                  {deleting === workspace.id ? '…' : tt('manager.delete')}
+                </button>
+              </div>
+            ))}
+          </div>
+        )
+      })}
+
+      {/* Bottom: create a new server */}
+      {props.sshApi !== undefined && (
+        <div style={{ marginTop: 4, borderTop: `1px solid var(--dsw-alias-border-l2, rgba(0,0,0,0.1))`, paddingTop: 6 }}>
+          <button type="button" className={css.menuItem} onClick={() => { setHostDialog({ mode: 'create' }) }}>
+            <span className={css.menuItemIcon}>＋</span>
+            <span>{tt('manager.newHost')}</span>
+          </button>
+        </div>
+      )}
+
+      {hostDialog !== null && props.sshApi !== undefined && (
+        <HostFormDialog
+          api={props.sshApi}
+          editing={hostDialog.mode === 'edit' ? hostDialog.host : null}
+          onClose={() => { setHostDialog(null) }}
+          onSaved={savedHost}
+        />
+      )}
+    </div>,
+    document.body,
+  )
+}
+