@tiphareth/dsh-hardssh 0.1.2 → 0.2.2

package/src/client/workspace-badges.ts

@@ -1,96 +1,99 @@
-/**
- * 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()
-    }
-  }
-}
+/**
+ * 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: ALWAYS keep the row tooltip = the REMOTE
+   *  directory (server), never the local anchor path the shell would show;
+   *  mount the badge once (idempotent via the guard). Re-runs on every scan,
+   *  so a shell re-render that resets <title> gets corrected. */
+  const decorate = (row: HTMLElement): void => {
+    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 desiredTitle = `${target.remoteRoot}（${target.alias}）`
+    if (row.title !== desiredTitle) row.title = desiredTitle
+    if (row.querySelector('[data-ssh-badge]') !== null) return
+    const isConnected = connected?.has(target.alias) ?? false
+    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,
+  // including <title> attribute changes (the shell may reset row tooltips).
+  const observer = new MutationObserver(() => { scan() })
+  observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['title'] })
+  scan()
+
+  return () => {
+    observer.disconnect()
+    // Remove injected badges.
+    for (const badge of document.querySelectorAll<HTMLElement>('[data-ssh-badge]')) {
+      badge.remove()
+    }
+  }
+}

package/src/client/workspace-panel-entry.tsx

@@ -0,0 +1,91 @@
+/**
+ * The SSH workspace manager's LEFT-sidebar global entry and its CENTER panel.
+ *
+ * Both are standard plugin extension points, not DOM injection:
+ * - `sidebar.panellist` declares the row between "New session" and the
+ *   workspace browser. Its `id` IS the main-panel key the row selects, and the
+ *   shell owns the button, the label, and the active highlight.
+ * - `main` hosts the panel body under that same key.
+ *
+ * The id is deliberately our own rather than a shipped one: a fresh id is
+ * added beside the shipped rows, while reusing one would replace that row.
+ */
+import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
+// Type-only: pulls the SlotMap augmentation for `sidebar.panellist` / `main`
+// and their owner-prop shapes.
+import type {} from '@deepseek-ai/dsh-client-ui-layout/client'
+import type {} from '@deepseek-ai/dsh-client-ui-sidebar/client'
+import type {} from '@deepseek-ai/dsh-client-ui-slots'
+import type { WorkspaceManager } from './state.ts'
+import type { SshApi } from './ssh/api.ts'
+import { tt } from './text.ts'
+import { WorkspaceManagerPanel } from './workspace-panel.tsx'
+
+/** The main-panel key AND the sidebar row id: one identity addresses both. */
+export const WORKSPACE_PANEL_ID = 'dsh-hardssh-workspaces'
+
+/** Order among the global panel rows; the shipped rows sit around 0. */
+const WORKSPACE_PANEL_ORDER = 100
+
+/** Icon presentation the sidebar supplies to a global panel row. */
+interface PanelIconProps {
+  size: number
+  active: boolean
+}
+
+/** The cloud/terminal glyph the workspace row shows in both the wide and rail sidebar. */
+function WorkspacePanelIcon({ size }: PanelIconProps) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={size}
+      height={size}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.3"
+      strokeLinecap="round"
+      strokeLinejoin="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>
+  )
+}
+
+/** Dependencies the panel body needs at render time. */
+export interface WorkspacePanelDeps {
+  manager: WorkspaceManager
+  /** Absent when the plugin is mounted without the SSH operations half. */
+  sshApi?: SshApi
+}
+
+/**
+ * Register the left-sidebar row and the center panel body.
+ * @param ctx - client root context carrying the slot registry.
+ * @param deps - the workspace manager and the host API the panel uses.
+ */
+export function registerWorkspacePanel(ctx: ClientContext, deps: WorkspacePanelDeps): void {
+  const inject = (): Record<string, unknown> => ({ manager: deps.manager, sshApi: deps.sshApi })
+
+  // The global row: the shell renders the button and the active highlight from
+  // the list metadata, and selecting it calls layout.selectPanel(id).
+  ctx.slots.inject('sidebar.panellist', () => ctx.slots.register(
+    {
+      name: 'sidebar.panellist',
+      id: WORKSPACE_PANEL_ID,
+      order: WORKSPACE_PANEL_ORDER,
+      // A thunk is re-read on every projection, so a language change needs no
+      // re-registration.
+      label: () => tt('panel.workspaces'),
+    },
+    WorkspacePanelIcon,
+  ))
+
+  // The center panel body, under the same key the row selects.
+  ctx.slots.inject('main', () => ctx.slots.register(
+    { name: 'main', key: WORKSPACE_PANEL_ID, inject },
+    WorkspaceManagerPanel,
+  ))
+}

package/src/client/workspace-panel.tsx

@@ -0,0 +1,227 @@
+/**
+ * The SSH workspace manager as a CENTER panel (left sidebar global entry →
+ * `main` slot). Content is unchanged from the old session-header dropdown:
+ * server rows with their SSH-bound workspaces underneath, server edit/delete
+ * (delete is refused while the server still backs a workspace), and a
+ * "new server" action at the bottom.
+ *
+ * This is a plain panel body: no portal, no anchoring, no click-outside
+ * dismissal. The left sidebar owns the entry row and the center column owns
+ * the frame; closing the panel is the shell's business (select the
+ * Conversation row back), not ours.
+ */
+import { useEffect, useState, type ReactElement } from 'react'
+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 host-form dialog invocation state. */
+type HostDialogState = { mode: 'create' } | { mode: 'edit'; host: SshHostSummary }
+
+/** Panel props: the workspace snapshot owner and the host API. */
+export interface WorkspaceManagerPanelProps {
+  manager: WorkspaceManager
+  /** Full SSH host API (list/create/update/delete) for server management. */
+  sshApi?: SshApi
+}
+
+/** The workspace manager panel body. */
+export function WorkspaceManagerPanel({ manager, sshApi }: WorkspaceManagerPanelProps): ReactElement {
+  const [workspaces, setWorkspaces] = useState<SshWorkspaceRecord[]>(() => manager.getSnapshot().workspaces)
+  const [hosts, setHosts] = useState<SshHostSummary[] | null>(null)
+  const [connectedAliases, setConnectedAliases] = useState<ReadonlySet<string> | null>(null)
+  /** Why connection state is unavailable — surfaced, never silently degraded. */
+  const [connectionError, setConnectionError] = useState<string | 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 loadHosts = (): void => {
+    if (sshApi === undefined) {
+      setHosts([])
+      return
+    }
+    void sshApi.listHosts().then(
+      (list) => { setHosts(list) },
+      (cause: unknown) => {
+        setError(cause instanceof Error ? cause.message : String(cause))
+        setHosts([])
+      },
+    )
+  }
+
+  useEffect(() => {
+    // Panel activation refreshes the workspace ledger and host list. Connection
+    // status is a read-only view of the existing pool: connectedAliases() never
+    // dials a server, so opening this panel cannot create SSH connections.
+    setWorkspaces(manager.getSnapshot().workspaces)
+    void manager.refresh()
+    const unsubscribe = manager.subscribe(() => { setWorkspaces(manager.getSnapshot().workspaces) })
+    loadHosts()
+
+    let disposed = false
+    const refreshConnections = async (): Promise<void> => {
+      if (sshApi === undefined) {
+        if (!disposed) setConnectedAliases(new Set())
+        return
+      }
+      try {
+        const aliases = await sshApi.connectedAliases()
+        if (disposed) return
+        setConnectedAliases(new Set(aliases))
+        setConnectionError(null)
+      } catch (cause: unknown) {
+        if (disposed) return
+        // Previously an empty `catch` that only blanked the badges: a broken
+        // connection-state route looked like "no server is connected".
+        setConnectedAliases(null)
+        setConnectionError(cause instanceof Error ? cause.message : String(cause))
+      }
+    }
+    void refreshConnections()
+    const timer = window.setInterval(() => { void refreshConnections() }, 3000)
+    return () => {
+      disposed = true
+      window.clearInterval(timer)
+      unsubscribe()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [manager, sshApi])
+
+  const remove = (id: string): void => {
+    setDeleting(id)
+    void manager.remove(id)
+      .catch((cause: unknown) => setError(cause instanceof Error ? cause.message : String(cause)))
+      .finally(() => setDeleting(null))
+  }
+
+  const deleteHost = (alias: string): void => {
+    if (sshApi === undefined) return
+    setDeletingAlias(alias)
+    void sshApi.deleteHost(alias)
+      .then(() => { loadHosts() })
+      .catch((cause: unknown) => setError(cause instanceof Error ? cause.message : String(cause)))
+      .finally(() => setDeletingAlias(null))
+  }
+
+  const savedHost = (): void => {
+    setHostDialog(null)
+    loadHosts()
+    void manager.refresh()
+  }
+
+  return (
+    <div className={css.managerPanel}>
+      <div className={css.managerPanelHeader}>
+        <h2 className={css.managerPanelTitle}>{tt('manager.title')}</h2>
+      </div>
+
+      {error !== null && <div className={css.dialogFail}>{error}</div>}
+
+      {connectionError !== null && (
+        <div className={css.dialogFail} data-test="connection-state-error">
+          {tt('manager.connectionError', connectionError)}
+        </div>
+      )}
+
+      {hosts === null && <div className={css.dialogInfo}>{tt('panel.loading')}</div>}
+
+      {workspaces.length === 0 && hosts !== null && hosts.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.filter(workspace => workspace.alias === host.alias)
+        const inUse = hostWorkspaces.length > 0
+        const connectionState = connectedAliases === null
+          ? 'unknown'
+          : connectedAliases.has(host.alias) ? 'connected' : 'disconnected'
+        const connectionLabel = connectionState === 'connected'
+          ? tt('manager.connected')
+          : connectionState === 'disconnected' ? tt('manager.disconnected') : tt('manager.connectionUnknown')
+        return (
+          <div key={host.alias} className={css.managerPanelGroup}>
+            <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.connectionBadge} data-state={connectionState} title={connectionLabel}>
+                <span className={css.connectionDot} aria-hidden="true" />
+                {connectionLabel}
+              </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: 220 }}>
+                  {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 === null) remove(workspace.id) }}
+                >
+                  {deleting === workspace.id ? '…' : tt('manager.delete')}
+                </button>
+              </div>
+            ))}
+          </div>
+        )
+      })}
+
+      {/* Bottom: create a new server. */}
+      {sshApi !== undefined && (
+        <div className={css.managerPanelFooter}>
+          <button type="button" className={css.menuItem} onClick={() => { setHostDialog({ mode: 'create' }) }}>
+            <span className={css.menuItemIcon}>＋</span>
+            <span>{tt('manager.newHost')}</span>
+          </button>
+        </div>
+      )}
+
+      {hostDialog !== null && sshApi !== undefined && (
+        <HostFormDialog
+          api={sshApi}
+          editing={hostDialog.mode === 'edit' ? hostDialog.host : null}
+          onClose={() => { setHostDialog(null) }}
+          onSaved={savedHost}
+        />
+      )}
+    </div>
+  )
+}

package/src/client/workspace.module.css

@@ -68,7 +68,7 @@
   border-radius: 6px;
   background: var(--dsw-alias-bg-base-2, rgba(0, 0, 0, 0.04));
   border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.1));
-  color: #000000;
+  color: var(--dsw-alias-label-primary, #0f1115);
   font-size: 12px;
 }
 
@@ -163,7 +163,7 @@
   border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.2));
   height: 32px;
   min-width: 111px;
-  color: #000000;
+  color: var(--dsw-alias-label-primary, #0f1115);
   font-family: var(--dsw-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI',
     Roboto, system-ui, 'PingFang SC', 'Microsoft YaHei', sans-serif);
   cursor: pointer;
@@ -255,6 +255,40 @@
   margin-bottom: 5px;
 }
 
+.connectionBadge {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 1px 7px;
+  color: var(--dsw-alias-label-secondary, #61666b);
+  font-size: 11px;
+  line-height: 18px;
+  white-space: nowrap;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
+  border-radius: 999px;
+}
+
+.connectionDot {
+  width: 7px;
+  height: 7px;
+  background: var(--dsw-alias-label-tertiary, #81858c);
+  border-radius: 50%;
+}
+
+.connectionBadge[data-state='connected'] {
+  color: var(--dsw-alias-state-success-primary, #18a058);
+  border-color: color-mix(in srgb, var(--dsw-alias-state-success-primary, #18a058) 48%, transparent);
+}
+
+.connectionBadge[data-state='connected'] .connectionDot {
+  background: var(--dsw-alias-state-success-primary, #18a058);
+}
+
+.connectionBadge[data-state='disconnected'] {
+  color: var(--dsw-alias-label-tertiary, #81858c);
+}
+
 /* Icon-only round buttons on server rows (edit/delete) */
 .menuItemIconButton {
   flex: none;
@@ -281,3 +315,43 @@
   opacity: 0.4;
   cursor: default;
 }
+
+/* The workspace manager as a CENTER panel (left sidebar global entry → main
+   slot). The center column owns the frame; this only fills it and scrolls. */
+.managerPanel {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 16px 20px 24px;
+  color: var(--dsw-alias-label-primary, #0f1115);
+  font-family: var(--dsw-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, system-ui, 'PingFang SC', 'Microsoft YaHei', sans-serif);
+  font-size: 13px;
+  line-height: 20px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--dsw-alias-label-caption, rgba(128, 128, 128, 0.5)) transparent;
+}
+.managerPanelHeader {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+.managerPanelTitle {
+  flex: 1;
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+.managerPanelGroup {
+  margin-bottom: 14px;
+}
+.managerPanelFooter {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.1));
+}
+