@tiphareth/dsh-hardssh 0.1.2-alpha

package/src/client/ssh/panel/HostFormDialog.tsx

@@ -0,0 +1,228 @@
+/**
+ * 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 '../../../ssh/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() }}>
+        <div className={css.modalHeader}>
+          <h3 className={css.modalTitle}>
+            <span className={css.whaleMark} aria-hidden="true" />
+            {editing != null ? tt('form.title.edit', { alias: editing.alias }) : tt('form.title.create')}
+          </h3>
+        </div>
+        <div className={css.modalBody}>
+        <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}>{form.keyPath.trim() === '' ? tt('form.agentHint') : 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>
+        <div className={css.modalFooter}>
+          <button type="button" className={css.modalGhost} disabled={saving} onClick={onClose}>{tt('form.cancel')}</button>
+          <button type="button" className={css.modalPrimary} disabled={saving} onClick={() => { void save() }}>{tt('form.save')}</button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/client/ssh/panel/HostsTab.tsx

@@ -0,0 +1,236 @@
+/**
+ * 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 '../../../ssh/protocol.ts'
+import { errorMessage, tt } from './helpers.ts'
+import { HostFormDialog } from './HostFormDialog.tsx'
+import { HostFingerprintDialog } from './HostFingerprintDialog.tsx'
+import { SessionSecretDialog } from './SessionSecretDialog.tsx'
+import { SshApiError } from '../api.ts'
+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 }
+
+/** A pending host-key confirmation. */
+interface HostKeyConfirmState {
+  alias: string
+  fingerprintSha256: string
+  mismatch: boolean
+}
+
+/** A pending session-secret prompt (VSCode Remote-SSH style). */
+interface SessionSecretState {
+  alias: string
+  secret: 'password' | 'passphrase'
+  user?: string
+}
+
+/** 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 [hostKeyConfirm, setHostKeyConfirm] = useState<HostKeyConfirmState | null>(null)
+  const [secretConfirm, setSecretConfirm] = useState<SessionSecretState | 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)
+      if (result.code === 'NEEDS_PASSWORD' && (result.secret === 'password' || result.secret === 'passphrase')) {
+        // VSCode Remote-SSH style: prompt once per session, then retry.
+        setSecretConfirm({
+          alias,
+          secret: result.secret,
+          user: hosts?.find(host => host.alias === alias)?.user,
+        })
+        setTestingAlias(null)
+        return
+      }
+      setTestResults(prev => ({ ...prev, [alias]: result }))
+    } catch (cause) {
+      if (cause instanceof SshApiError && (cause.code === 'HOST_KEY_UNKNOWN' || cause.code === 'HOST_KEY_MISMATCH')) {
+        setHostKeyConfirm({
+          alias,
+          fingerprintSha256: cause.hostKeyFingerprint ?? '',
+          mismatch: cause.code === 'HOST_KEY_MISMATCH',
+        })
+        setTestingAlias(null)
+        return
+      }
+      setTestResults(prev => ({ ...prev, [alias]: { ok: false, error: errorMessage(cause) } }))
+    } finally {
+      setTestingAlias(null)
+    }
+  }
+
+  /** After the fingerprint is confirmed (or reset), retry the test. */
+  const retryAfterFingerprint = async (alias: string): Promise<void> => {
+    setHostKeyConfirm(null)
+    await runTest(alias)
+  }
+
+  /** After the session secret is provided, retry the test. */
+  const retryAfterSecret = async (alias: string): Promise<void> => {
+    setSecretConfirm(null)
+    await runTest(alias)
+  }
+
+  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() }}
+        />
+      )}
+      {hostKeyConfirm !== null && (
+        <HostFingerprintDialog
+          api={api}
+          alias={hostKeyConfirm.alias}
+          fingerprintSha256={hostKeyConfirm.fingerprintSha256}
+          mismatch={hostKeyConfirm.mismatch}
+          onClose={() => { setHostKeyConfirm(null) }}
+          onTrusted={() => { void retryAfterFingerprint(hostKeyConfirm.alias) }}
+        />
+      )}
+      {secretConfirm !== null && (
+        <SessionSecretDialog
+          api={api}
+          alias={secretConfirm.alias}
+          user={secretConfirm.user}
+          secret={secretConfirm.secret}
+          onClose={() => { setSecretConfirm(null) }}
+          onProvided={() => { void retryAfterSecret(secretConfirm.alias) }}
+        />
+      )}
+    </div>
+  )
+}

package/src/client/ssh/panel/SessionSecretDialog.tsx

@@ -0,0 +1,80 @@
+/**
+ * Session secret dialog (VSCode Remote-SSH style): shown when a connection
+ * needs a password/passphrase that the user hasn't entered this session
+ * (secretStorage='none' → secrets are never persisted). The credential is
+ * sent once to the host via /api/dsh-ssh/session-secret, held in the engine's
+ * in-memory session table for the connection-pool lifetime, and dropped on
+ * process exit. Nothing is written to disk.
+ */
+import { useState } from 'react'
+import type { SshApi } from '../api.ts'
+import { tt } from './helpers.ts'
+import css from './panel.module.css'
+
+/** The dialog's props. */
+export interface SessionSecretDialogProps {
+  api: SshApi
+  alias: string
+  /** SSH login name — rendered as user@alias. */
+  user?: string
+  /** Which secret the connection needs. */
+  secret: 'password' | 'passphrase'
+  onClose: () => void
+  /** Called after the secret was provided (retry the operation). */
+  onProvided: () => void
+}
+
+/** Prompt for a session-only credential. */
+export function SessionSecretDialog({ api, alias, user, secret, onClose, onProvided }: SessionSecretDialogProps) {
+  const [value, setValue] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const account = user !== undefined && user !== '' ? `${user}@${alias}` : alias
+
+  const submit = async (): Promise<void> => {
+    if (value === '') {
+      setError(tt('sessionSecret.required'))
+      return
+    }
+    setBusy(true)
+    setError(null)
+    try {
+      if (secret === 'password') await api.setSessionSecret(alias, { password: value })
+      else await api.setSessionSecret(alias, { passphrase: value })
+      onProvided()
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause))
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className={css.modalBackdrop} onClick={onClose}>
+      <div className={css.modal} role="dialog" aria-modal="true" onClick={event => { event.stopPropagation() }}>
+        <div className={css.modalHeader}>
+          <h3 className={css.modalTitle}>
+            {secret === 'password' ? tt('sessionSecret.title', { account }) : tt('sessionSecret.titlePassphrase', { account })}
+          </h3>
+        </div>
+        <div className={css.modalBody}>
+          <input
+            className={css.input}
+            type="password"
+            value={value}
+            autoFocus
+            placeholder={secret === 'password' ? tt('sessionSecret.placeholder') : tt('sessionSecret.placeholderPassphrase')}
+            onChange={event => { setValue(event.target.value) }}
+            onKeyDown={event => { if (event.key === 'Enter') void submit() }}
+          />
+          {error !== null && <p className={css.formError}>{error}</p>}
+        </div>
+        <div className={css.modalFooter}>
+          <button type="button" className={css.modalGhost} disabled={busy} onClick={onClose}>{tt('sessionSecret.cancel')}</button>
+          <button type="button" className={css.modalPrimary} disabled={busy} onClick={() => { void submit() }}>
+            {tt('sessionSecret.connect')}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/client/ssh/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>
+  )
+}