Add SSH source support with dialstdio and UI components

- Implement SSH dial via stdio for remote connections - Add sources API and storage layer for managing connection sources - Add SourcePanel and SshFields web components for SSH configuration - Update app structure to support source-based connections - Update handlers and server for new sources endpoint Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-08-13 10:19:47 +02:00
parent 05db8bfeb9
commit 9b354636bb
19 changed files with 1857 additions and 174 deletions
@@ -1,10 +1,12 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { api } from './api'
 import type {
-  Connection, Health, ItemSelection, JobSnapshot, Options, PackageInfo, Plan, SourceResponse, TargetInventory,
+  Connection, Health, ItemSelection, JobSnapshot, Options, PackageInfo, Plan, Source, SourceResponse,
+  SourceStatus, TargetInventory,
 } from './types'
 import { Notice } from './ui'
 import { Containers } from './Containers'
+import { SourcePanel } from './SourcePanel'
 import { Sidebar } from './Sidebar'
 import { Jobs } from './Jobs'
 import { Packages } from './Packages'
@@ -22,6 +24,9 @@ export default function App() {
  // Volume sizes come from a separate, slower endpoint so the container list
  // can render immediately; they are merged into the rows when they arrive.
  const [sizes, setSizes] = useState<Record<string, number>>({})
+  const [sources, setSources] = useState<Source[]>([])
+  const [selectedSource, setSelectedSource] = useState<string>('local')
+  const [sourceStatus, setSourceStatus] = useState<SourceStatus | null>(null)
  const [connections, setConnections] = useState<Connection[]>([])
  const [activeConn, setActiveConn] = useState<string>('')
  const [targetInv, setTargetInv] = useState<TargetInventory | null>(null)
@@ -57,6 +62,40 @@ export default function App() {
    }
  }, [])

+  const loadHealth = useCallback(async () => {
+    try {
+      const h = await api.health()
+      setHealth(h)
+      if (h.source) setSourceStatus(h.source)
+    } catch { /* the panel shows the source error on its own */ }
+  }, [])
+
+  const loadSources = useCallback(async () => {
+    try {
+      const r = await api.sources()
+      setSources(r.sources)
+      setSelectedSource(r.selected)
+      if (r.current) setSourceStatus(r.current)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e))
+    }
+  }, [])
+
+  // selectSource lets its error escape so the panel can turn an untrusted host
+  // key into a fingerprint prompt, the same way the target does.
+  const selectSource = useCallback(async (id: string) => {
+    const st = await api.selectSource(id)
+    setSelectedSource(id)
+    setSourceStatus(st)
+    // The selections describe containers on the host that was selected before,
+    // so they are dropped rather than carried over to a different inventory.
+    setSel({})
+    setSizes({})
+    setError('')
+    await loadSource()
+    await loadHealth()
+  }, [loadSource, loadHealth])
+
  const loadConnections = useCallback(async () => {
    try {
      const list = await api.connections()
@@ -80,12 +119,13 @@ export default function App() {
  }, [])

  useEffect(() => {
-    api.health().then(setHealth).catch(() => undefined)
+    loadHealth()
+    loadSources()
    loadSource()
    loadConnections()
    loadJobs()
    loadPackages()
-  }, [loadSource, loadConnections, loadJobs, loadPackages])
+  }, [loadHealth, loadSources, loadSource, loadConnections, loadJobs, loadPackages])

  // A slow poll keeps the job list current without holding a stream open for
  // every job; the detail view subscribes to its own live stream.
@@ -138,7 +178,9 @@ export default function App() {
        <div className="topbar-right">
          {health && (
            <span className="hostinfo">
-              source <b>{source?.inventory.host || health.dockerHost}</b>
+              source <b>{source?.inventory.host || sourceStatus?.name || health.dockerHost}</b>
+              {sourceStatus?.kind === 'ssh' && <> · over ssh</>}
+              {sourceStatus?.kind === 'docker' && <> · {sourceStatus.endpoint}</>}
              {health.dockerVersion && <> · docker {health.dockerVersion}</>}
            </span>
          )}
@@ -160,8 +202,10 @@ export default function App() {
      {health && !health.ok && (
        <div style={{ padding: '10px 16px' }}>
          <Notice kind="err">
-            Cannot reach the source Docker daemon at <span className="mono">{health.dockerHost}</span>
+            Cannot reach the source <b>{health.source?.name ?? 'docker daemon'}</b>
+            {health.dockerHost && <> at <span className="mono">{health.dockerHost}</span></>}
            {health.dockerError && <> — {health.dockerError}</>}
+            <div className="small">Pick another source in the panel on the right.</div>
          </Notice>
        </div>
      )}
@@ -192,6 +236,14 @@ export default function App() {

        {view === 'containers' && (
          <aside className="sidebar">
+            <SourcePanel
+              sources={sources}
+              selected={selectedSource}
+              status={sourceStatus}
+              selectSource={selectSource}
+              reload={loadSources}
+              onError={setError}
+            />
            <Sidebar
              source={source}
              plan={plan}
@@ -4,6 +4,7 @@ import type {
  Connection, HostKeyInfo, JobSnapshot, Options, Plan, PreviewResponse, SourceResponse, TargetInventory,
 } from './types'
 import { Check, Field, humanBytes, Modal, Notice } from './ui'
+import { HostKeyDialog, SshFields } from './SshFields'

 export function Sidebar({
  source, plan, includedCount, options, setOptions,
@@ -302,37 +303,7 @@ export function Sidebar({
      )}

      {hostKey && (
-        <Modal
-          title="SSH host key"
-          onClose={() => setHostKey(null)}
-          footer={
-            <>
-              <button className="btn" onClick={() => setHostKey(null)}>cancel</button>
-              <button className="btn primary" onClick={trustHostKey}>
-                {hostKey.changed ? 'replace the stored key and trust' : 'trust this host'}
-              </button>
-            </>
-          }
-        >
-          <div className="stack">
-            {hostKey.changed && (
-              <Notice kind="err">
-                The key presented by this host is <b>different</b> from the one recorded earlier. This happens after a
-                reinstall — but it is also what a machine-in-the-middle looks like. Only continue if you know why it
-                changed.
-              </Notice>
-            )}
-            {hostKey.trusted && !hostKey.changed && <Notice kind="ok">This host key is already trusted.</Notice>}
-            <div className="small muted">
-              Compare this with the output of <span className="mono">ssh-keyscan -t {hostKey.keyType} {hostKey.host}</span>{' '}
-              run on the target itself, or with <span className="mono">ssh-keygen -lf /etc/ssh/ssh_host_*_key.pub</span>.
-            </div>
-            <div className="fingerprint">
-              {hostKey.keyType}<br />
-              {hostKey.fingerprint}
-            </div>
-          </div>
-        </Modal>
+        <HostKeyDialog info={hostKey} onClose={() => setHostKey(null)} onTrust={trustHostKey} />
      )}

      {preview && <PreviewModal data={preview} onClose={() => setPreview(null)} />}
@@ -382,79 +353,8 @@ function ConnectionDialog({
      }
    >
      <div className="stack" style={{ gap: 12 }}>
-        <div className="row" style={{ gap: 12 }}>
-          <Field label="label"><input type="text" value={c.name ?? ''} onChange={(e) => set('name', e.target.value)} /></Field>
-          <Field label="host"><input type="text" value={c.host ?? ''} onChange={(e) => set('host', e.target.value)} /></Field>
-          <div style={{ width: 90 }}>
-            <Field label="port">
-              <input type="number" value={c.port ?? 22} onChange={(e) => set('port', Number(e.target.value))} />
-            </Field>
-          </div>
-        </div>
-
-        <div className="row" style={{ gap: 12 }}>
-          <Field label="user"><input type="text" value={c.user ?? ''} onChange={(e) => set('user', e.target.value)} /></Field>
-          <Field label="authentication">
-            <select value={c.auth ?? 'password'} onChange={(e) => set('auth', e.target.value as Connection['auth'])}>
-              <option value="password">password</option>
-              <option value="key">private key</option>
-              <option value="agent">ssh agent</option>
-            </select>
-          </Field>
-        </div>
-
-        {c.auth === 'password' && (
-          <Field label="password">
-            <input type="password" value={c.password ?? ''} onChange={(e) => set('password', e.target.value)} />
-          </Field>
-        )}
-
-        {c.auth === 'key' && (
-          <>
-            <Field label="private key path on this machine (leave empty to paste the key below)">
-              <input type="text" placeholder="/root/.ssh/id_ed25519" value={c.privateKeyPath ?? ''} onChange={(e) => set('privateKeyPath', e.target.value)} />
-            </Field>
-            <Field label="or paste the private key">
-              <textarea rows={5} value={c.privateKey ?? ''} onChange={(e) => set('privateKey', e.target.value)} placeholder="-----BEGIN OPENSSH PRIVATE KEY-----" />
-            </Field>
-            <Field label="passphrase (if the key is encrypted)">
-              <input type="password" value={c.passphrase ?? ''} onChange={(e) => set('passphrase', e.target.value)} />
-            </Field>
-          </>
-        )}
-
-        {c.auth === 'agent' && (
-          <div className="small muted">
-            Uses the agent at <span className="mono">$SSH_AUTH_SOCK</span> of the process running dockmv.
-          </div>
-        )}
-
-        <Check
-          checked={c.sudo ?? false}
-          onChange={(v) => set('sudo', v)}
-          label="run docker through sudo -n on the target"
-          title="Needed when the login user is not in the docker group. sudo must not ask for a password."
-        />
-
-        <Field label="docker command on the target (optional)">
-          <input type="text" placeholder="docker" value={c.dockerCmd ?? ''} onChange={(e) => set('dockerCmd', e.target.value)} />
-        </Field>
-
-        <Check
-          checked={c.saveSecrets ?? false}
-          onChange={(v) => set('saveSecrets', v)}
-          label="remember the password / key on disk"
-        />
-        {c.saveSecrets ? (
-          <Notice kind="warn">
-            Credentials are stored in plain text in the connections file, readable only by this user. Leave this off to
-            keep them in memory for this session only.
-          </Notice>
-        ) : (
-          <div className="small faint">
-            Credentials stay in memory and are lost when dockmv restarts.
-          </div>
-        )}
+        <Field label="label"><input type="text" value={c.name ?? ''} onChange={(e) => set('name', e.target.value)} /></Field>
+        <SshFields value={c} set={set} where="target" />
      </div>
    </Modal>
  )
@@ -0,0 +1,283 @@
+import { useState } from 'react'
+import { api, ApiError } from './api'
+import type { Connection, HostKeyInfo, Source, SourceKind, SourceStatus } from './types'
+import { Field, Modal, Notice } from './ui'
+import { HostKeyDialog, SshFields } from './SshFields'
+
+/**
+ * SourcePanel picks the host containers are read from: the daemon dockmv runs
+ * next to, another daemon by address, or a remote host over SSH.
+ */
+export function SourcePanel({
+  sources, selected, status, selectSource, reload, onError,
+}: {
+  sources: Source[]
+  selected: string
+  status: SourceStatus | null
+  /** Switches the whole UI to another source; rejects so the caller can react. */
+  selectSource: (id: string) => Promise<void>
+  reload: () => Promise<void>
+  onError: (msg: string) => void
+}) {
+  const [editing, setEditing] = useState<Partial<Source> | null>(null)
+  const [hostKey, setHostKey] = useState<HostKeyInfo | null>(null)
+  const [busy, setBusy] = useState('')
+  const [trustFor, setTrustFor] = useState('')
+
+  const current = sources.find((s) => s.id === selected)
+  const isLocal = !current || current.kind === 'local'
+  const isSSH = current?.kind === 'ssh'
+
+  async function withBusy(what: string, id: string, fn: () => Promise<void>) {
+    setBusy(what)
+    try {
+      await fn()
+    } catch (e) {
+      // An untrusted host key is a decision for the operator, not an error.
+      if (e instanceof ApiError && e.needsTrust) {
+        setTrustFor(id)
+        await showHostKey(id)
+      } else {
+        onError(e instanceof Error ? e.message : String(e))
+      }
+    } finally {
+      setBusy('')
+    }
+  }
+
+  async function showHostKey(id: string) {
+    try {
+      setHostKey(await api.probeSource(id))
+    } catch (e) {
+      onError(e instanceof Error ? e.message : String(e))
+    }
+  }
+
+  async function trustHostKey() {
+    const id = trustFor || selected
+    if (!hostKey) return
+    await withBusy('trust', id, async () => {
+      await api.trustSource(id, hostKey.fingerprint)
+      setHostKey(null)
+      await selectSource(id)
+    })
+  }
+
+  return (
+    <div className="section">
+      <h3>source host</h3>
+      <div className="stack">
+        <div className="row">
+          <select
+            value={selected}
+            disabled={!!busy}
+            onChange={(e) => {
+              const id = e.target.value
+              void withBusy('select', id, () => selectSource(id))
+            }}
+          >
+            {sources.map((s) => (
+              <option key={s.id} value={s.id}>{sourceLabel(s)}</option>
+            ))}
+          </select>
+          <button
+            className="btn tiny"
+            onClick={() => setEditing({ kind: 'ssh', ssh: { port: 22, auth: 'password', saveSecrets: false, sudo: false } as Connection })}
+          >
+            new
+          </button>
+        </div>
+
+        <div className="row wrap" style={{ gap: 6 }}>
+          <button
+            className="btn tiny"
+            disabled={!!busy}
+            onClick={() => void withBusy('select', selected, () => selectSource(selected))}
+          >
+            {busy === 'select' ? 'connecting…' : 'reconnect'}
+          </button>
+          {!isLocal && <button className="btn tiny" onClick={() => setEditing(current)}>edit</button>}
+          {isSSH && <button className="btn tiny" onClick={() => { setTrustFor(selected); void showHostKey(selected) }}>host key</button>}
+          {!isLocal && (
+            <button
+              className="btn tiny danger"
+              onClick={() => {
+                if (!current || !confirm(`Delete source "${current.name}"?`)) return
+                void withBusy('del', current.id, async () => {
+                  await api.deleteSource(current.id)
+                  await reload()
+                  // Deleting the source in use drops back to the local daemon.
+                  if (selected === current.id) await selectSource('local')
+                })
+              }}
+            >
+              delete
+            </button>
+          )}
+        </div>
+
+        {status?.error && <Notice kind="err">{status.error}</Notice>}
+
+        {status && !status.error && (
+          <dl className="kv">
+            <dt>reached by</dt><dd className="mono">{status.endpoint}</dd>
+            {status.dockerVersion && <><dt>docker</dt><dd>{status.dockerVersion}</dd></>}
+          </dl>
+        )}
+
+        {isSSH && (
+          <div className="small faint">
+            Data is streamed through dockmv: source → this host → target. A local source moves it in one hop.
+          </div>
+        )}
+      </div>
+
+      {editing && (
+        <SourceDialog
+          initial={editing}
+          onClose={() => setEditing(null)}
+          onSaved={async (s) => {
+            setEditing(null)
+            // The list is refreshed first: selecting an id the dropdown does not
+            // know about yet would leave it blank.
+            await reload()
+            await withBusy('select', s.id, () => selectSource(s.id))
+          }}
+          onError={onError}
+        />
+      )}
+
+      {hostKey && (
+        <HostKeyDialog info={hostKey} onClose={() => setHostKey(null)} onTrust={trustHostKey} />
+      )}
+    </div>
+  )
+}
+
+function sourceLabel(s: Source): string {
+  switch (s.kind) {
+    case 'local':
+      return `${s.name} (local docker)`
+    case 'docker':
+      return `${s.name} (${s.dockerHost})`
+    default:
+      return `${s.name} (ssh ${s.ssh?.user}@${s.ssh?.host})`
+  }
+}
+
+function SourceDialog({
+  initial, onClose, onSaved, onError,
+}: {
+  initial: Partial<Source>
+  onClose: () => void
+  onSaved: (s: Source) => void | Promise<void>
+  onError: (m: string) => void
+}) {
+  const [s, setS] = useState<Partial<Source>>(initial)
+  const [saving, setSaving] = useState(false)
+  const kind: SourceKind = s.kind ?? 'ssh'
+  const ssh = (s.ssh ?? {}) as Partial<Connection>
+
+  function setSSH<K extends keyof Connection>(k: K, v: Connection[K]) {
+    setS((prev) => ({ ...prev, ssh: { ...(prev.ssh as Connection), [k]: v } as Connection }))
+  }
+
+  const valid = kind === 'ssh' ? !!ssh.host && !!ssh.user : !!s.dockerHost
+
+  return (
+    <Modal
+      title={initial.id ? `Edit ${initial.name}` : 'New source host'}
+      onClose={onClose}
+      footer={
+        <>
+          <button className="btn" onClick={onClose}>cancel</button>
+          <button
+            className="btn primary"
+            disabled={saving || !valid}
+            onClick={async () => {
+              setSaving(true)
+              try {
+                // The body is built field by field: the API rejects unknown ones.
+                await onSaved(await api.saveSource(payload(s, kind)))
+              } catch (e) {
+                onError(e instanceof Error ? e.message : String(e))
+              } finally {
+                setSaving(false)
+              }
+            }}
+          >
+            {saving ? 'saving…' : 'save'}
+          </button>
+        </>
+      }
+    >
+      <div className="stack" style={{ gap: 12 }}>
+        <div className="row" style={{ gap: 12 }}>
+          <Field label="label">
+            <input type="text" value={s.name ?? ''} onChange={(e) => setS((p) => ({ ...p, name: e.target.value }))} />
+          </Field>
+          <Field label="reached by">
+            <select value={kind} onChange={(e) => setS((p) => ({ ...p, kind: e.target.value as SourceKind }))}>
+              <option value="ssh">ssh — remote host, driven through its docker CLI</option>
+              <option value="docker">docker address — a daemon this host can reach</option>
+            </select>
+          </Field>
+        </div>
+
+        {kind === 'docker' ? (
+          <>
+            <Field label="docker address">
+              <input
+                type="text"
+                placeholder="tcp://10.0.0.5:2375"
+                value={s.dockerHost ?? ''}
+                onChange={(e) => setS((p) => ({ ...p, dockerHost: e.target.value }))}
+              />
+            </Field>
+            <div className="small muted">
+              Any address the docker CLI accepts: <span className="mono">tcp://host:2375</span>, or another socket with{' '}
+              <span className="mono">unix:///path/docker.sock</span>. A TLS-protected daemon uses the certificates from{' '}
+              <span className="mono">DOCKER_CERT_PATH</span> in dockmv's own environment.
+            </div>
+            <Notice kind="warn">
+              A plain <span className="mono">tcp://</span> daemon is unauthenticated: anyone who can reach that port is
+              root on that host. Prefer an ssh source unless the port is already protected.
+            </Notice>
+          </>
+        ) : (
+          <>
+            <SshFields value={ssh} set={setSSH} where="source host" />
+            <div className="small muted">
+              Needs <span className="mono">sshd</span> and a docker CLI of 18.09 or newer on that host — the API is
+              tunnelled through <span className="mono">docker system dial-stdio</span>. Nothing is installed.
+            </div>
+          </>
+        )}
+      </div>
+    </Modal>
+  )
+}
+
+/** payload keeps the request to the fields the server knows about. */
+function payload(s: Partial<Source>, kind: SourceKind): Partial<Source> {
+  const out: Partial<Source> = { id: s.id, name: s.name, kind }
+  if (kind === 'docker') {
+    out.dockerHost = s.dockerHost
+    return out
+  }
+  const c = (s.ssh ?? {}) as Partial<Connection>
+  out.ssh = {
+    host: c.host ?? '',
+    port: c.port ?? 22,
+    user: c.user ?? '',
+    auth: c.auth ?? 'password',
+    password: c.password,
+    privateKey: c.privateKey,
+    privateKeyPath: c.privateKeyPath,
+    passphrase: c.passphrase,
+    sudo: c.sudo ?? false,
+    dockerCmd: c.dockerCmd,
+    saveSecrets: c.saveSecrets ?? false,
+  } as Connection
+  return out
+}
@@ -0,0 +1,138 @@
+import type { Connection, HostKeyInfo } from './types'
+import { Check, Field, Modal, Notice } from './ui'
+
+/**
+ * SshFields is the credential form shared by target connections and SSH
+ * sources: both are the same sshx.Config on the server, so they are edited the
+ * same way. `where` only changes the wording.
+ */
+export function SshFields({
+  value, set, where,
+}: {
+  value: Partial<Connection>
+  set: <K extends keyof Connection>(k: K, v: Connection[K]) => void
+  where: 'target' | 'source host'
+}) {
+  return (
+    <>
+      <div className="row" style={{ gap: 12 }}>
+        <Field label="host"><input type="text" value={value.host ?? ''} onChange={(e) => set('host', e.target.value)} /></Field>
+        <div style={{ width: 90 }}>
+          <Field label="port">
+            <input type="number" value={value.port ?? 22} onChange={(e) => set('port', Number(e.target.value))} />
+          </Field>
+        </div>
+      </div>
+
+      <div className="row" style={{ gap: 12 }}>
+        <Field label="user"><input type="text" value={value.user ?? ''} onChange={(e) => set('user', e.target.value)} /></Field>
+        <Field label="authentication">
+          <select value={value.auth ?? 'password'} onChange={(e) => set('auth', e.target.value as Connection['auth'])}>
+            <option value="password">password</option>
+            <option value="key">private key</option>
+            <option value="agent">ssh agent</option>
+          </select>
+        </Field>
+      </div>
+
+      {value.auth === 'password' && (
+        <Field label="password">
+          <input type="password" value={value.password ?? ''} onChange={(e) => set('password', e.target.value)} />
+        </Field>
+      )}
+
+      {value.auth === 'key' && (
+        <>
+          <Field label="private key path on this machine (leave empty to paste the key below)">
+            <input type="text" placeholder="/root/.ssh/id_ed25519" value={value.privateKeyPath ?? ''} onChange={(e) => set('privateKeyPath', e.target.value)} />
+          </Field>
+          <Field label="or paste the private key">
+            <textarea rows={5} value={value.privateKey ?? ''} onChange={(e) => set('privateKey', e.target.value)} placeholder="-----BEGIN OPENSSH PRIVATE KEY-----" />
+          </Field>
+          <Field label="passphrase (if the key is encrypted)">
+            <input type="password" value={value.passphrase ?? ''} onChange={(e) => set('passphrase', e.target.value)} />
+          </Field>
+        </>
+      )}
+
+      {value.auth === 'agent' && (
+        <div className="small muted">
+          Uses the agent at <span className="mono">$SSH_AUTH_SOCK</span> of the process running dockmv.
+        </div>
+      )}
+
+      <Check
+        checked={value.sudo ?? false}
+        onChange={(v) => set('sudo', v)}
+        label={`run docker through sudo -n on the ${where}`}
+        title="Needed when the login user is not in the docker group. sudo must not ask for a password."
+      />
+
+      <Field label={`docker command on the ${where} (optional)`}>
+        <input type="text" placeholder="docker" value={value.dockerCmd ?? ''} onChange={(e) => set('dockerCmd', e.target.value)} />
+      </Field>
+
+      <Check
+        checked={value.saveSecrets ?? false}
+        onChange={(v) => set('saveSecrets', v)}
+        label="remember the password / key on disk"
+      />
+      {value.saveSecrets ? (
+        <Notice kind="warn">
+          Credentials are stored in plain text in dockmv's data directory, readable only by this user. Leave this off to
+          keep them in memory for this session only.
+        </Notice>
+      ) : (
+        <div className="small faint">
+          Credentials stay in memory and are lost when dockmv restarts.
+        </div>
+      )}
+    </>
+  )
+}
+
+/**
+ * HostKeyDialog puts an unknown or changed SSH fingerprint in front of the
+ * operator. It is used for both source and target hosts.
+ */
+export function HostKeyDialog({
+  info, onClose, onTrust,
+}: {
+  info: HostKeyInfo
+  onClose: () => void
+  onTrust: () => void
+}) {
+  return (
+    <Modal
+      title="SSH host key"
+      onClose={onClose}
+      footer={
+        <>
+          <button className="btn" onClick={onClose}>cancel</button>
+          <button className="btn primary" onClick={onTrust}>
+            {info.changed ? 'replace the stored key and trust' : 'trust this host'}
+          </button>
+        </>
+      }
+    >
+      <div className="stack">
+        {info.changed && (
+          <Notice kind="err">
+            The key presented by this host is <b>different</b> from the one recorded earlier. This happens after a
+            reinstall — but it is also what a machine-in-the-middle looks like. Only continue if you know why it
+            changed.
+          </Notice>
+        )}
+        {info.trusted && !info.changed && <Notice kind="ok">This host key is already trusted.</Notice>}
+        <div className="small muted">
+          Compare this with the output of <span className="mono">ssh-keyscan -t {info.keyType} {info.host}</span>{' '}
+          run on the host itself, or with <span className="mono">ssh-keygen -lf /etc/ssh/ssh_host_*_key.pub</span>.
+        </div>
+        <div className="fingerprint">
+          {info.keyType}<br />
+          {info.fingerprint}
+        </div>
+      </div>
+    </Modal>
+  )
+}
@@ -1,6 +1,6 @@
 import type {
  Connection, Health, HostKeyInfo, JobSnapshot, PackageInfo, Plan,
-  Preflight, PreviewResponse, SourceResponse, TargetInventory,
+  Preflight, PreviewResponse, Source, SourceResponse, SourcesResponse, SourceStatus, TargetInventory,
 } from './types'

 // The token, when the server requires one, arrives as a query parameter the
@@ -65,6 +65,14 @@ export const api = {
  source: () => request<SourceResponse>('/api/source'),
  volumeSizes: () => request<{ volumes: Record<string, number> }>('/api/source/sizes'),

+  sources: () => request<SourcesResponse>('/api/sources'),
+  saveSource: (s: Partial<Source>) => post<Source>('/api/sources', s),
+  deleteSource: (id: string) => request<void>(`/api/sources/${id}`, { method: 'DELETE' }),
+  selectSource: (id: string) => post<SourceStatus>(`/api/sources/${id}/select`),
+  probeSource: (id: string) => post<HostKeyInfo>(`/api/sources/${id}/probe`),
+  trustSource: (id: string, fingerprint: string) =>
+    post<{ trusted: boolean }>(`/api/sources/${id}/trust`, { fingerprint }),
+
  connections: () => request<Connection[]>('/api/connections'),
  saveConnection: (c: Partial<Connection>) => post<Connection>('/api/connections', c),
  deleteConnection: (id: string) => request<void>(`/api/connections/${id}`, { method: 'DELETE' }),
@@ -120,6 +120,35 @@ export interface SourceResponse {
  options: Options
 }

+/** How a source daemon is reached. 'local' is the built-in, unremovable one. */
+export type SourceKind = 'local' | 'docker' | 'ssh'
+
+export interface Source {
+  id: string
+  name: string
+  kind: SourceKind
+  /** Daemon address for the 'docker' kind, e.g. tcp://10.0.0.5:2375. */
+  dockerHost?: string
+  /** Remote host for the 'ssh' kind; the same shape as a target connection. */
+  ssh?: Connection
+}
+
+export interface SourceStatus {
+  id: string
+  name: string
+  kind: SourceKind
+  endpoint: string
+  dockerVersion?: string
+  connected: boolean
+  error?: string
+}
+
+export interface SourcesResponse {
+  sources: Source[]
+  selected: string
+  current: SourceStatus | null
+}
+
 export type AuthMethod = 'password' | 'key' | 'agent'

 export interface Connection {
@@ -253,6 +282,7 @@ export interface Health {
  dockerHost: string
  dockerVersion?: string
  dockerError?: string
+  source?: SourceStatus
  packageDir: string
  dataDir: string
  knownHosts: string