@linxin666/dsh-ssh 0.1.1

package/src/client/panel/HostFormDialog.tsx

@@ -0,0 +1,221 @@
+/**
+ * Host form dialog: create/edit one stored host entry. A fixed backdrop with
+ * a centered card; Escape and backdrop clicks close it. Secrets (key path,
+ * passphrase, password) are never pre-filled when editing (the API only
+ * exposes the secret-free summary).
+ */
+import { useEffect, useState } from 'react'
+import type { SshApi } from '../api.ts'
+import type { HostPayload, SshAuthKind, SshHostSummary } from '../../protocol.ts'
+import { errorMessage, tt } from './helpers.ts'
+import css from './panel.module.css'
+
+/** Host form dialog props. */
+export interface HostFormDialogProps {
+  api: SshApi
+  /** The host being edited; null/undefined means create. */
+  editing?: SshHostSummary | null
+  onClose: () => void
+  onSaved: (host: SshHostSummary) => void
+}
+
+/** The staged form values (all strings; parsed on save). */
+interface FormState {
+  alias: string
+  host: string
+  port: string
+  user: string
+  authKind: SshAuthKind
+  keyPath: string
+  passphrase: string
+  password: string
+  proxyJump: string
+  description: string
+  environment: string
+  tags: string
+  location: string
+}
+
+/** Split a comma-separated input into a trimmed, non-empty string list. */
+function splitList(text: string): string[] {
+  return text.split(',').map(part => part.trim()).filter(part => part !== '')
+}
+
+/** Initial form state: the summary's public fields plus empty secrets. */
+function blankOf(editing: SshHostSummary | null | undefined): FormState {
+  return {
+    alias: editing?.alias ?? '',
+    host: editing?.host ?? '',
+    port: String(editing?.port ?? 22),
+    user: editing?.user ?? '',
+    authKind: editing?.auth ?? 'key',
+    keyPath: '',
+    passphrase: '',
+    password: '',
+    proxyJump: (editing?.proxyJump ?? []).join(', '),
+    description: editing?.description ?? '',
+    environment: editing?.environment ?? '',
+    tags: (editing?.tags ?? []).join(', '),
+    location: editing?.location ?? '',
+  }
+}
+
+/** The create/edit host modal. */
+export function HostFormDialog({ api, editing, onClose, onSaved }: HostFormDialogProps) {
+  const [form, setForm] = useState<FormState>(() => blankOf(editing))
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  // Escape closes the dialog.
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', onKey)
+    return () => { document.removeEventListener('keydown', onKey) }
+  }, [onClose])
+
+  const set = <K extends keyof FormState>(key: K, value: FormState[K]): void => {
+    setForm(prev => ({ ...prev, [key]: value }))
+  }
+
+  const save = async (): Promise<void> => {
+    const alias = form.alias.trim()
+    const host = form.host.trim()
+    const user = form.user.trim()
+    if (alias === '' || host === '' || user === '') {
+      setError(tt('form.required'))
+      return
+    }
+    const port = Number(form.port)
+    if (!Number.isInteger(port) || port < 1 || port > 65535) {
+      setError(tt('form.portInvalid'))
+      return
+    }
+    // Secrets are never echoed back by the API: when editing and the secret
+    // fields are left empty, the auth block is omitted so the stored
+    // authentication is preserved.
+    const secretEmpty = form.authKind === 'password'
+      ? form.password === ''
+      : form.keyPath.trim() === ''
+    const auth: HostPayload['auth'] = editing != null && secretEmpty
+      ? undefined
+      : form.authKind === 'password'
+        ? { kind: 'password', password: form.password }
+        : { kind: 'key', keyPath: form.keyPath.trim(), passphrase: form.passphrase === '' ? undefined : form.passphrase }
+    const payload: HostPayload = {
+      host,
+      port,
+      user,
+      auth,
+      proxyJump: splitList(form.proxyJump),
+      description: form.description.trim() === '' ? undefined : form.description.trim(),
+      environment: form.environment.trim() === '' ? undefined : form.environment.trim(),
+      tags: splitList(form.tags),
+      location: form.location.trim() === '' ? undefined : form.location.trim(),
+    }
+    setSaving(true)
+    setError(null)
+    try {
+      const saved = editing != null
+        ? await api.updateHost(editing.alias, payload)
+        : await api.createHost({ ...payload, alias })
+      onSaved(saved)
+    } catch (cause) {
+      setError(errorMessage(cause))
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className={css.modalBackdrop} onClick={onClose}>
+      <div className={css.modal} role="dialog" aria-modal="true" onClick={event => { event.stopPropagation() }}>
+        <h3 className={css.modalTitle}>{editing != null ? tt('form.title.edit', { alias: editing.alias }) : tt('form.title.create')}</h3>
+        <div className={css.formRow}>
+          <label className={css.field}>
+            <span className={css.fieldLabel}>{tt('form.alias')}</span>
+            <input className={css.input} value={form.alias} disabled={editing != null} onChange={event => { set('alias', event.target.value) }} />
+            <span className={css.hint}>{tt('form.aliasHint')}</span>
+          </label>
+          <label className={css.field}>
+            <span className={css.fieldLabel}>{tt('form.host')}</span>
+            <input className={css.input} value={form.host} onChange={event => { set('host', event.target.value) }} />
+          </label>
+        </div>
+        <div className={css.formRow}>
+          <label className={css.field}>
+            <span className={css.fieldLabel}>{tt('form.port')}</span>
+            <input className={css.input} type="number" min={1} max={65535} value={form.port} onChange={event => { set('port', event.target.value) }} />
+          </label>
+          <label className={css.field}>
+            <span className={css.fieldLabel}>{tt('form.user')}</span>
+            <input className={css.input} value={form.user} onChange={event => { set('user', event.target.value) }} />
+          </label>
+        </div>
+        <div className={css.field}>
+          <span className={css.fieldLabel}>{tt('form.auth')}</span>
+          <div className={css.radioRow}>
+            <label className={css.radioLabel}>
+              <input type="radio" name="dsh-ssh-auth" checked={form.authKind === 'key'} onChange={() => { set('authKind', 'key') }} />
+              {tt('form.auth.key')}
+            </label>
+            <label className={css.radioLabel}>
+              <input type="radio" name="dsh-ssh-auth" checked={form.authKind === 'password'} onChange={() => { set('authKind', 'password') }} />
+              {tt('form.auth.password')}
+            </label>
+          </div>
+          {editing != null && <span className={css.hint}>{tt('form.authKeepHint')}</span>}
+        </div>
+        {form.authKind === 'key' ? (
+          <div className={css.formRow}>
+            <label className={css.field}>
+              <span className={css.fieldLabel}>{tt('form.keyPath')}</span>
+              <input className={css.input} value={form.keyPath} onChange={event => { set('keyPath', event.target.value) }} />
+              <span className={css.hint}>{tt('form.keyPathHint')}</span>
+            </label>
+            <label className={css.field}>
+              <span className={css.fieldLabel}>{tt('form.passphrase')}</span>
+              <input className={css.input} type="password" value={form.passphrase} onChange={event => { set('passphrase', event.target.value) }} />
+            </label>
+          </div>
+        ) : (
+          <label className={css.field}>
+            <span className={css.fieldLabel}>{tt('form.password')}</span>
+            <input className={css.input} type="password" value={form.password} onChange={event => { set('password', event.target.value) }} />
+            <span className={css.hint}>{tt('form.passwordHint')}</span>
+          </label>
+        )}
+        <label className={css.field}>
+          <span className={css.fieldLabel}>{tt('form.proxyJump')}</span>
+          <input className={css.input} value={form.proxyJump} onChange={event => { set('proxyJump', event.target.value) }} />
+          <span className={css.hint}>{tt('form.proxyJumpHint')}</span>
+        </label>
+        <div className={css.formRow}>
+          <label className={css.field}>
+            <span className={css.fieldLabel}>{tt('form.environment')}</span>
+            <input className={css.input} value={form.environment} onChange={event => { set('environment', event.target.value) }} />
+            <span className={css.hint}>{tt('form.environmentHint')}</span>
+          </label>
+          <label className={css.field}>
+            <span className={css.fieldLabel}>{tt('form.location')}</span>
+            <input className={css.input} value={form.location} onChange={event => { set('location', event.target.value) }} />
+          </label>
+        </div>
+        <label className={css.field}>
+          <span className={css.fieldLabel}>{tt('form.description')}</span>
+          <input className={css.input} value={form.description} onChange={event => { set('description', event.target.value) }} />
+        </label>
+        <label className={css.field}>
+          <span className={css.fieldLabel}>{tt('form.tags')}</span>
+          <input className={css.input} value={form.tags} onChange={event => { set('tags', event.target.value) }} />
+          <span className={css.hint}>{tt('form.tagsHint')}</span>
+        </label>
+        {error !== null && <p className={css.formError}>{tt('common.error', { error })}</p>}
+        <div className={css.modalFooter}>
+          <button type="button" className={css.ghostButton} disabled={saving} onClick={onClose}>{tt('form.cancel')}</button>
+          <button type="button" className={css.primaryButton} disabled={saving} onClick={() => { void save() }}>{tt('form.save')}</button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/client/panel/HostsTab.tsx

@@ -0,0 +1,166 @@
+/**
+ * Hosts tab: the host table with search (debounced through listHosts),
+ * add/edit/delete/test actions, ~/.ssh/config import, and a connect action
+ * that hands the alias to the terminal tab via onConnect.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { SshApi } from '../api.ts'
+import type { SshHostSummary, TestResult } from '../../protocol.ts'
+import { errorMessage, tt } from './helpers.ts'
+import { HostFormDialog } from './HostFormDialog.tsx'
+import css from './panel.module.css'
+
+/** Hosts tab props. */
+export interface HostsTabProps {
+  api: SshApi
+  /** Connect the given alias in the terminal tab. */
+  onConnect: (alias: string) => void
+}
+
+/** The host-form dialog invocation. */
+type DialogState = { mode: 'create' } | { mode: 'edit'; host: SshHostSummary }
+
+/** The hosts table plus its toolbar and dialogs. */
+export function HostsTab({ api, onConnect }: HostsTabProps) {
+  const [hosts, setHosts] = useState<SshHostSummary[] | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [search, setSearch] = useState('')
+  const [testingAlias, setTestingAlias] = useState<string | null>(null)
+  const [testResults, setTestResults] = useState<Record<string, TestResult>>({})
+  const [importing, setImporting] = useState(false)
+  const [notice, setNotice] = useState<string | null>(null)
+  const [dialog, setDialog] = useState<DialogState | null>(null)
+  const seqRef = useRef(0)
+
+  const load = useCallback(async (query?: string): Promise<void> => {
+    const seq = ++seqRef.current
+    try {
+      const list = await api.listHosts(query)
+      if (seq !== seqRef.current) return
+      setHosts(list)
+      setError(null)
+    } catch (cause) {
+      if (seq !== seqRef.current) return
+      setError(errorMessage(cause))
+    }
+  }, [api])
+
+  useEffect(() => { void load() }, [load])
+
+  // Debounced search: every keystroke re-filters through the API.
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const query = search.trim()
+      void load(query === '' ? undefined : query)
+    }, 300)
+    return () => { clearTimeout(timer) }
+  }, [search, load])
+
+  const runTest = async (alias: string): Promise<void> => {
+    setTestingAlias(alias)
+    try {
+      const result = await api.testHost(alias)
+      setTestResults(prev => ({ ...prev, [alias]: result }))
+    } catch (cause) {
+      setTestResults(prev => ({ ...prev, [alias]: { ok: false, error: errorMessage(cause) } }))
+    } finally {
+      setTestingAlias(null)
+    }
+  }
+
+  const deleteHost = async (alias: string): Promise<void> => {
+    if (!window.confirm(tt('hosts.deleteConfirm', { alias }))) return
+    try {
+      await api.deleteHost(alias)
+      void load()
+    } catch (cause) {
+      setError(errorMessage(cause))
+    }
+  }
+
+  const importConfig = async (): Promise<void> => {
+    setImporting(true)
+    try {
+      const result = await api.importSshConfig()
+      setNotice(tt('hosts.imported', { parsed: result.parsed, added: result.added, skipped: result.skipped }))
+      void load()
+    } catch (cause) {
+      setError(errorMessage(cause))
+    } finally {
+      setImporting(false)
+    }
+  }
+
+  return (
+    <div className={css.fillBody}>
+      <div className={css.toolbar}>
+        <input className={css.search} type="search" placeholder={tt('hosts.search')} value={search} onChange={event => { setSearch(event.target.value) }} />
+        <div className={css.toolbarSpacer} />
+        <button type="button" className={css.primaryButton} onClick={() => { setDialog({ mode: 'create' }) }}>{tt('hosts.add')}</button>
+        <button type="button" className={css.ghostButton} disabled={importing} onClick={() => { void importConfig() }}>{importing ? tt('common.loading') : tt('hosts.import')}</button>
+      </div>
+      {notice !== null && <div className={css.banner} data-kind="ok">{notice}</div>}
+      {error !== null && <div className={css.banner} data-kind="error">{tt('common.error', { error })}</div>}
+      {hosts === null && error === null && <div className={css.loading}>{tt('common.loading')}</div>}
+      {hosts !== null && hosts.length === 0 && <div className={css.empty}>{tt('hosts.empty')}</div>}
+      {hosts !== null && hosts.length > 0 && (
+        <div className={css.tableWrap}>
+          <table className={css.table}>
+            <thead>
+              <tr>
+                <th>{tt('hosts.col.alias')}</th>
+                <th>{tt('hosts.col.host')}</th>
+                <th>{tt('hosts.col.user')}</th>
+                <th>{tt('hosts.col.auth')}</th>
+                <th>{tt('hosts.col.environment')}</th>
+                <th>{tt('hosts.col.tags')}</th>
+                <th>{tt('hosts.col.description')}</th>
+                <th>{tt('hosts.col.actions')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {hosts.map(host => {
+                const test = testResults[host.alias]
+                return (
+                  <tr key={host.alias}>
+                    <td className={css.mono}>{host.alias}</td>
+                    <td className={css.mono}>{host.host}:{host.port}</td>
+                    <td>{host.user}</td>
+                    <td><span className={css.badge} data-kind={host.auth}>{host.auth === 'key' ? tt('form.auth.key') : tt('form.auth.password')}</span></td>
+                    <td className={css.cellMuted}>{host.environment ?? ''}</td>
+                    <td className={css.cellMuted}>{host.tags.join(', ')}</td>
+                    <td className={css.cellMuted}>{host.description ?? ''}</td>
+                    <td>
+                      <div className={css.actions}>
+                        <button type="button" className={css.linkButton} disabled={testingAlias === host.alias} onClick={() => { void runTest(host.alias) }}>
+                          {testingAlias === host.alias ? tt('hosts.testing') : tt('hosts.test')}
+                        </button>
+                        {testingAlias === host.alias && <span className={css.spinner} aria-hidden="true" />}
+                        {test !== undefined && (
+                          <span className={css.inlineTest} data-status={test.ok ? 'ok' : 'fail'}>
+                            {test.ok ? tt('hosts.testOk', { latency: test.latencyMs ?? 0 }) : tt('hosts.testFail', { error: test.error ?? '' })}
+                          </span>
+                        )}
+                        <button type="button" className={css.linkButton} onClick={() => { setDialog({ mode: 'edit', host }) }}>{tt('hosts.edit')}</button>
+                        <button type="button" className={css.linkButton} data-danger onClick={() => { void deleteHost(host.alias) }}>{tt('hosts.delete')}</button>
+                        <button type="button" className={css.ghostButton} onClick={() => { onConnect(host.alias) }}>{tt('hosts.connected')}</button>
+                      </div>
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+      {dialog !== null && (
+        <HostFormDialog
+          api={api}
+          editing={dialog.mode === 'edit' ? dialog.host : null}
+          onClose={() => { setDialog(null) }}
+          onSaved={() => { setDialog(null); void load() }}
+        />
+      )}
+    </div>
+  )
+}

package/src/client/panel/SshPanel.tsx

@@ -0,0 +1,77 @@
+/**
+ * The SSH operations panel shell: a header with a close control, a five-tab
+ * bar, and the active tab's content. Tab state lives here (browser session
+ * state); inactive tabs unmount, so each tab fetches its own data on
+ * activation. The hosts tab's connect action switches here to the terminal
+ * tab with the chosen alias preselected.
+ */
+import { useState } from 'react'
+import type { SshApi } from '../api.ts'
+import type { PanelController } from './controller.ts'
+import { tt } from './helpers.ts'
+import { ClusterTab } from './ClusterTab.tsx'
+import { HostsTab } from './HostsTab.tsx'
+import { TerminalTab } from './TerminalTab.tsx'
+import { TransferTab } from './TransferTab.tsx'
+import { TunnelsTab } from './TunnelsTab.tsx'
+import css from './panel.module.css'
+
+/** The panel's tab identifiers. */
+export type SshTab = 'hosts' | 'terminal' | 'transfer' | 'tunnels' | 'cluster'
+
+/** Panel shell props. */
+export interface SshPanelProps {
+  /** The panel state owner (open/close/toggle). */
+  controller: PanelController
+  /** The SSH API client every tab operates through. */
+  api: SshApi
+}
+
+/** The tab bar definition (labels resolved at render time). */
+const TABS: ReadonlyArray<{ id: SshTab; label: () => string }> = [
+  { id: 'hosts', label: () => tt('tab.hosts') },
+  { id: 'terminal', label: () => tt('tab.terminal') },
+  { id: 'transfer', label: () => tt('tab.transfer') },
+  { id: 'tunnels', label: () => tt('tab.tunnels') },
+  { id: 'cluster', label: () => tt('tab.cluster') },
+]
+
+/** A pending "connect this host" request handed to the terminal tab. */
+interface ConnectRequest {
+  alias: string
+  nonce: number
+}
+
+/** The tabbed SSH panel. */
+export function SshPanel({ controller, api }: SshPanelProps) {
+  const [activeTab, setActiveTab] = useState<SshTab>('hosts')
+  const [connectRequest, setConnectRequest] = useState<ConnectRequest | null>(null)
+
+  const handleConnect = (alias: string): void => {
+    setActiveTab('terminal')
+    setConnectRequest(prev => ({ alias, nonce: (prev?.nonce ?? 0) + 1 }))
+  }
+
+  return (
+    <div className={css.panel}>
+      <div className={css.panelHeader}>
+        <h2 className={css.panelTitle}>{tt('panel.title')}</h2>
+        <button type="button" className={css.iconButton} title={tt('common.close')} aria-label={tt('common.close')} onClick={() => { controller.close() }}>x</button>
+      </div>
+      <div className={css.tabBar} role="tablist">
+        {TABS.map(tab => (
+          <button key={tab.id} type="button" role="tab" aria-selected={activeTab === tab.id} data-active={activeTab === tab.id ? '' : undefined} className={css.tab} onClick={() => { setActiveTab(tab.id) }}>
+            {tab.label()}
+          </button>
+        ))}
+      </div>
+      <div className={css.panelContent}>
+        {activeTab === 'hosts' && <HostsTab api={api} onConnect={handleConnect} />}
+        {activeTab === 'terminal' && <TerminalTab api={api} presetAlias={connectRequest?.alias} requestId={connectRequest?.nonce} />}
+        {activeTab === 'transfer' && <TransferTab api={api} />}
+        {activeTab === 'tunnels' && <TunnelsTab api={api} />}
+        {activeTab === 'cluster' && <ClusterTab api={api} />}
+      </div>
+    </div>
+  )
+}

package/src/client/panel/TerminalTab.tsx

@@ -0,0 +1,176 @@
+/**
+ * Terminal tab: an xterm.js PTY view over the host's WebSocket terminal route.
+ * A host <select> plus connect/disconnect controls; the terminal container is
+ * sized by FitAddon (default 80x24 before first fit). On remote exit the last
+ * output stays visible and input is disabled. xterm's stylesheet is injected
+ * once per page load (module-level guard).
+ */
+import { useEffect, useRef, useState } from 'react'
+import { Terminal } from '@xterm/xterm'
+import { FitAddon } from '@xterm/addon-fit'
+import type { SshApi, TerminalConnection } from '../api.ts'
+import type { SshHostSummary } from '../../protocol.ts'
+import { XTERM_CSS } from './xterm.css.ts'
+import { errorMessage, tt } from './helpers.ts'
+import css from './panel.module.css'
+
+/** Terminal tab props. */
+export interface TerminalTabProps {
+  api: SshApi
+  /** Alias preselected by a "connect" action from the hosts tab. */
+  presetAlias?: string
+  /** Monotonic id of the connect request (re-applies presetAlias). */
+  requestId?: number
+}
+
+/** The terminal session lifecycle state shown in the status banner. */
+type TerminalStatus =
+  | { kind: 'idle' }
+  | { kind: 'connecting' }
+  | { kind: 'connected'; alias: string }
+  | { kind: 'exited'; alias: string; detail?: string }
+  | { kind: 'error'; detail: string }
+
+/** Injected-once guard for the xterm stylesheet (one tag per page load). */
+let xtermCssInjected = false
+
+function ensureXtermCss(): void {
+  if (xtermCssInjected || typeof document === 'undefined') return
+  xtermCssInjected = true
+  if (document.querySelector('style[data-dsh-ssh-xterm]') !== null) return
+  const style = document.createElement('style')
+  style.dataset.dshSshXterm = ''
+  style.textContent = XTERM_CSS
+  document.head.appendChild(style)
+}
+
+/** The xterm terminal view. */
+export function TerminalTab({ api, presetAlias, requestId }: TerminalTabProps) {
+  const [hosts, setHosts] = useState<SshHostSummary[]>([])
+  const [alias, setAlias] = useState(presetAlias ?? '')
+  const [status, setStatus] = useState<TerminalStatus>({ kind: 'idle' })
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const termRef = useRef<Terminal | null>(null)
+  const fitRef = useRef<FitAddon | null>(null)
+  const connRef = useRef<TerminalConnection | null>(null)
+
+  useEffect(() => { ensureXtermCss() }, [])
+
+  // Fetch the host list on tab activation.
+  useEffect(() => {
+    let disposed = false
+    void (async () => {
+      try {
+        const list = await api.listHosts()
+        if (!disposed) setHosts(list)
+      } catch (cause) {
+        if (!disposed) setStatus({ kind: 'error', detail: errorMessage(cause) })
+      }
+    })()
+    return () => { disposed = true }
+  }, [api])
+
+  // A hosts-tab connect action preselects its alias here.
+  useEffect(() => {
+    if (presetAlias !== undefined) setAlias(presetAlias)
+  }, [presetAlias, requestId])
+
+  const teardown = (): void => {
+    const connection = connRef.current
+    connRef.current = null
+    if (connection !== null) {
+      connection.onReady = undefined
+      connection.onOutput = undefined
+      connection.onExit = undefined
+      connection.close()
+    }
+    termRef.current?.dispose()
+    termRef.current = null
+    fitRef.current = null
+  }
+
+  // Unmount cleanup (never touches state on an unmounting component).
+  useEffect(() => () => { teardown() }, [])
+
+  // Keep the terminal fitted to its container while connected.
+  useEffect(() => {
+    const onResize = (): void => {
+      const term = termRef.current
+      const fit = fitRef.current
+      if (term === null || fit === null) return
+      fit.fit()
+      connRef.current?.resize(term.cols, term.rows)
+    }
+    window.addEventListener('resize', onResize)
+    return () => { window.removeEventListener('resize', onResize) }
+  }, [])
+
+  const connect = (): void => {
+    const target = alias
+    const container = containerRef.current
+    if (target === '' || container === null) return
+    if (status.kind === 'connecting' || status.kind === 'connected') return
+    teardown()
+    setStatus({ kind: 'connecting' })
+    const term = new Terminal({
+      convertEol: false,
+      cursorBlink: true,
+      fontSize: 13,
+      fontFamily: 'Menlo, Consolas, "Liberation Mono", monospace',
+      theme: { background: '#0b0e14', foreground: '#d8dee9', cursor: '#a3b8d0' },
+    })
+    const fit = new FitAddon()
+    term.loadAddon(fit)
+    term.open(container)
+    fit.fit()
+    const connection = api.openTerminal(target, term.cols, term.rows)
+    termRef.current = term
+    fitRef.current = fit
+    connRef.current = connection
+    let settled = false
+    const dataSub = term.onData(data => { connection.send(data) })
+    connection.onReady = () => { setStatus({ kind: 'connected', alias: target }) }
+    connection.onOutput = data => { term.write(data) }
+    connection.onExit = (code, error) => {
+      if (settled) return
+      settled = true
+      dataSub.dispose()
+      term.options.disableStdin = true
+      connRef.current = null
+      // Keep the last output visible; input is now disabled.
+      setStatus({ kind: 'exited', alias: target, detail: error })
+    }
+  }
+
+  const disconnect = (): void => {
+    teardown()
+    setStatus({ kind: 'idle' })
+  }
+
+  const active = status.kind === 'connecting' || status.kind === 'connected'
+
+  return (
+    <div className={css.termBody}>
+      <div className={css.controls}>
+        <select className={css.input} value={alias} onChange={event => { setAlias(event.target.value) }}>
+          <option value="">{tt('terminal.selectHost')}</option>
+          {hosts.map(host => <option key={host.alias} value={host.alias}>{host.alias} ({host.host})</option>)}
+        </select>
+        <button type="button" className={css.primaryButton} disabled={alias === '' || active} onClick={connect}>{tt('terminal.connect')}</button>
+        <button type="button" className={css.ghostButton} disabled={!active} onClick={disconnect}>{tt('terminal.disconnect')}</button>
+      </div>
+      {status.kind === 'connecting' && <div className={css.banner} data-kind="info">{tt('terminal.connecting')}</div>}
+      {status.kind === 'connected' && <div className={css.banner} data-kind="ok">{tt('terminal.ready', { alias: status.alias })}</div>}
+      {status.kind === 'exited' && (
+        <div className={css.banner} data-kind="info">{tt('terminal.exited', { alias: status.alias })}{status.detail !== undefined ? ' (' + status.detail + ')' : ''}</div>
+      )}
+      {status.kind === 'error' && <div className={css.banner} data-kind="error">{tt('terminal.error', { error: status.detail })}</div>}
+      <div className={css.termWrap}>
+        <div ref={containerRef} className={css.termContainer} />
+        {status.kind === 'idle' && (
+          <div className={css.termPlaceholder}>{hosts.length === 0 ? tt('hosts.empty') : tt('terminal.placeholder')}</div>
+        )}
+      </div>
+    </div>
+  )
+}