@celljs/ta-web 4.6.1 → 4.7.0

package/src/browser/components/folder-picker.tsx

@@ -1,75 +1,230 @@
-import type { TaDirEntry } from '@celljs/ta-protocol';
-import { ChevronDown, ChevronRight, CornerLeftUp, Folder, X } from 'lucide-react';
+import { type TaDirEntry, TaLocation, type TaRemoteEvent, type TaRemoteHost, type TaRemoteServer } from '@celljs/ta-protocol';
+import { ChevronDown, ChevronRight, CornerLeftUp, Folder, Monitor, Plus, Server, X } from 'lucide-react';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import { useT } from '../i18n/use-t';
+import { type Translate, useT } from '../i18n/use-t';
 import { MessageUtil } from '../util/message';
 import { Icon, IconButton } from './icon';
 
+/** The hosts of ssh, for a picker that offers them: TaWorkbench has it all (TaRemoteServer and its events). */
+export interface FolderPickerRemote {
+    readonly remote: Pick<TaRemoteServer, 'listHosts' | 'resolveLocation'>;
+    readonly state: { server?: { cwd: string } };
+    onRemoteEvent(listener: (event: TaRemoteEvent) => void): () => void;
+}
+
+export namespace RemoteHostsUtil {
+    /** Why what the user typed is no host, in their words. */
+    export function problem(read: Exclude<TaLocation.HostInput, { host: string }>, input: string, t: Translate): string {
+        return read.error === 'options' ? t('ta.remote.options', { options: read.options.join(' ') }) : t('ta.remote.invalid', { host: input.trim() });
+    }
+}
+
 export namespace FolderPickerUtil {
-    /** The directory above `path`; undefined at a root (`/`, `C:\\`). */
+    /** The directory above; undefined at a root (`/`, `C:\`, the root of a host). */
     export function parent(path: string): string | undefined {
-        const trimmed = path.replace(/[\\/]+$/, '');
-        const at = Math.max(trimmed.lastIndexOf('/'), trimmed.lastIndexOf('\\'));
-        if (at < 0) {
-            return undefined;
-        }
-        const head = trimmed.slice(0, at);
-        return head === '' || /^[A-Za-z]:$/.test(head) ? head + trimmed[at] : head;
+        return TaLocation.parent(path);
     }
 
     export function child(path: string, name: string): string {
-        const separator = path.includes('/') || !path.includes('\\') ? '/' : '\\';
-        return path.endsWith(separator) ? path + name : path + separator + name;
+        return TaLocation.child(path, name);
     }
 
     /** The folders to offer: no files, no hidden ones (a path typed in still opens those). */
     export function folders(entries: TaDirEntry[]): TaDirEntry[] {
         return entries.filter(entry => entry.kind === 'directory' && !entry.name.startsWith('.'));
     }
+
+    /** Where the tab of this computer starts: `initial` when it is a path of it, else the server's, else the root. */
+    export function localStart(initial: string, serverCwd: string | undefined): string {
+        if (!TaLocation.isRemote(initial)) {
+            return initial;
+        }
+        return serverCwd && !TaLocation.isRemote(serverCwd) ? serverCwd : '/';
+    }
+
+    /** What the user typed, as a location of the machine shown: a path there, or a whole location. */
+    export function typed(input: string, host: string | undefined): string {
+        const text = input.trim();
+        return host && !TaLocation.isRemote(text) ? TaLocation.ssh(host, text.startsWith('/') ? text : `/${text}`) : text;
+    }
+}
+
+/** What the host of the picker is doing while it connects, from the events of TaRemoteServer. */
+function useConnecting(bench: FolderPickerRemote | undefined, host: string | undefined): string | undefined {
+    const t = useT();
+    const [step, setStep] = React.useState<string>();
+    React.useEffect(() => {
+        setStep(undefined);
+        return bench?.onRemoteEvent((event: TaRemoteEvent) => {
+            if (event.type === 'progress' && event.host === host) {
+                setStep(t(`ta.remote.step.${event.step}`, { host, detail: event.detail ?? '' }));
+            } else if (event.type === 'connection' && event.host === host) {
+                setStep(undefined);
+            }
+        });
+    }, [bench, host, t]);
+    return step;
+}
+
+interface MachinesProps {
+    host: string | undefined;
+    hosts: TaRemoteHost[];
+    onPick(host: string | undefined): void;
+}
+
+/** This computer and the hosts of ssh, as tabs; `+` names another host. */
+function Machines({ host, hosts, onPick }: MachinesProps) {
+    const t = useT();
+    const [adding, setAdding] = React.useState(false);
+    const [name, setName] = React.useState('');
+    const shown = host && !hosts.some(known => known.host === host) ? [{ host, source: 'recent' as const, connected: false }, ...hosts] : hosts;
+    const [problem, setProblem] = React.useState<string>();
+    const add = () => {
+        const read = TaLocation.readHost(name);
+        if ('error' in read) {
+            setProblem(RemoteHostsUtil.problem(read, name, t));
+            return;
+        }
+        setAdding(false);
+        setName('');
+        setProblem(undefined);
+        onPick(read.host);
+    };
+    return (
+        <>
+            <div className="ta-chips ta-folder-machines" role="tablist" aria-label={t('ta.remote.local')}>
+                <button type="button" role="tab" aria-selected={!host} className="ta-chip-filter" onClick={() => onPick(undefined)}>
+                    <Icon icon={Monitor} size={13} />
+                    {t('ta.remote.local')}
+                </button>
+                {shown.map(known => (
+                    <button
+                        key={known.host}
+                        type="button"
+                        role="tab"
+                        aria-selected={known.host === host}
+                        className="ta-chip-filter"
+                        title={known.connected ? `${known.host} · ${t('ta.remote.connected')}` : known.host}
+                        onClick={() => onPick(known.host)}
+                    >
+                        <Icon icon={Server} size={13} />
+                        {known.host}
+                        {known.connected && <span className="ta-remote-dot" />}
+                    </button>
+                ))}
+                {adding ? (
+                    <form
+                        className="ta-folder-add"
+                        onSubmit={event => {
+                            event.preventDefault();
+                            add();
+                        }}
+                    >
+                        <input
+                            autoFocus
+                            spellCheck={false}
+                            value={name}
+                            placeholder={t('ta.remote.addHint')}
+                            aria-label={t('ta.remote.add')}
+                            aria-invalid={problem ? true : undefined}
+                            onChange={event => {
+                                setName(event.target.value);
+                                setProblem(undefined);
+                            }}
+                            onBlur={() => !name.trim() && setAdding(false)}
+                            onKeyDown={event => {
+                                if (event.key === 'Escape') {
+                                    event.stopPropagation();
+                                    setAdding(false);
+                                }
+                            }}
+                        />
+                    </form>
+                ) : (
+                    <IconButton icon={Plus} label={t('ta.remote.add')} onClick={() => setAdding(true)} />
+                )}
+            </div>
+            {problem && <div className="ta-folder-failed">{problem}</div>}
+        </>
+    );
 }
 
 export interface FolderPickerProps {
     /** The entries of a directory of the server. */
     list(directory: string): Promise<TaDirEntry[]>;
-    /** Where it opens. */
+    /** Where it opens: a path, or an `ssh://` location. */
     initial: string;
     onPick(path: string): Promise<void>;
     onClose(): void;
+    /** Offers the hosts of ssh too. */
+    remote?: FolderPickerRemote;
 }
 
-/** Picks a directory of the server, folder by folder or by a path typed in, to open a conversation there. */
-export function FolderPicker({ list, initial, onPick, onClose }: FolderPickerProps): React.ReactElement {
+/**
+ * Picks a directory, of the machine of the server or of a host it reaches with ssh, folder by folder or by
+ * a path typed in, to open a conversation there.
+ */
+export function FolderPicker({ list, initial, onPick, onClose, remote: bench }: FolderPickerProps): React.ReactElement {
     const t = useT();
     const [path, setPath] = React.useState(initial);
-    const [input, setInput] = React.useState(initial);
+    const [input, setInput] = React.useState(TaLocation.path(initial));
     const [folders, setFolders] = React.useState<TaDirEntry[]>();
     const [failed, setFailed] = React.useState<string>();
     const [busy, setBusy] = React.useState(false);
+    const [hosts, setHosts] = React.useState<TaRemoteHost[]>([]);
+    /** The machine being shown, even before its first directory came. */
+    const [host, setHost] = React.useState(TaLocation.host(initial));
     /** A directory is being read: picking now would take the one before. */
     const [loading, setLoading] = React.useState(true);
+    const connecting = useConnecting(bench, loading ? host : undefined);
     const latest = React.useRef(0);
+    /** The machine whose folders are listed: a failure on another one leaves none listed. */
+    const listed = React.useRef<string | undefined>(undefined);
+    /** Where `This computer` goes: the directory of this machine shown last. */
+    const local = React.useRef(FolderPickerUtil.localStart(initial, bench?.state.server?.cwd));
     const go = React.useCallback(
         (next: string) => {
             const request = ++latest.current;
             setFailed(undefined);
             setLoading(true);
-            list(next)
+            setHost(TaLocation.host(next));
+            setInput(TaLocation.path(next));
+            // A host's home directory is known once connected.
+            const resolved = bench && TaLocation.parse(next)?.path === '' ? bench.remote.resolveLocation(next) : Promise.resolve(next);
+            resolved
+                .then(async location => ({ location, entries: await list(location) }))
                 .then(
-                    entries => {
+                    ({ location, entries }) => {
                         if (request === latest.current) {
-                            setPath(next);
-                            setInput(next);
+                            setPath(location);
+                            setInput(TaLocation.path(location));
                             setFolders(FolderPickerUtil.folders(entries));
+                            listed.current = TaLocation.host(location);
+                            if (!TaLocation.isRemote(location)) {
+                                local.current = location;
+                            }
                         }
                     },
-                    () => request === latest.current && setFailed(next),
+                    error => {
+                        if (request !== latest.current) {
+                            return;
+                        }
+                        const host = TaLocation.host(next);
+                        if (host !== listed.current) {
+                            setFolders(undefined);
+                        }
+                        setFailed(host && error instanceof Error ? error.message : t('ta.folder.failed', { path: next }));
+                    },
                 )
                 .finally(() => request === latest.current && setLoading(false));
         },
-        [list],
+        [bench, list, t],
     );
     React.useEffect(() => go(initial), [go, initial]);
+    React.useEffect(() => {
+        bench?.remote.listHosts().then(setHosts, () => undefined);
+    }, [bench]);
     const up = FolderPickerUtil.parent(path);
     const pick = () => {
         setBusy(true);
@@ -89,12 +244,13 @@ export function FolderPicker({ list, initial, onPick, onClose }: FolderPickerPro
                     <span className="ta-modal-title">{t('ta.folder.title')}</span>
                     <IconButton icon={X} label={t('ta.close')} onClick={onClose} />
                 </div>
+                {bench && <Machines host={host} hosts={hosts} onPick={next => go(next ? TaLocation.ssh(next) : local.current)} />}
                 <form
                     className="ta-folder-bar"
                     onSubmit={event => {
                         event.preventDefault();
                         if (input.trim()) {
-                            go(input.trim());
+                            go(FolderPickerUtil.typed(input, host));
                         }
                     }}
                 >
@@ -111,28 +267,41 @@ export function FolderPicker({ list, initial, onPick, onClose }: FolderPickerPro
                     </label>
                 </form>
                 <ul className="ta-folder-list">
-                    {folders === undefined && !failed && (
+                    {(folders === undefined || (loading && connecting)) && !failed && (
                         <li className="ta-folder-note">
                             <span className="ta-spinner" />
+                            {connecting && <span className="ta-folder-step">{connecting}</span>}
                         </li>
                     )}
-                    {folders?.map(folder => (
-                        <li key={folder.name}>
-                            <button type="button" className="ta-folder-item" onClick={() => go(FolderPickerUtil.child(path, folder.name))}>
-                                <Icon icon={Folder} size={16} />
-                                <span className="ta-folder-name">{folder.name}</span>
-                                <Icon icon={ChevronRight} size={14} className="ta-folder-chevron" />
-                            </button>
+                    {!(loading && connecting) &&
+                        folders?.map(folder => (
+                            <li key={folder.name}>
+                                <button type="button" className="ta-folder-item" onClick={() => go(FolderPickerUtil.child(path, folder.name))}>
+                                    <Icon icon={Folder} size={16} />
+                                    <span className="ta-folder-name">{folder.name}</span>
+                                    <Icon icon={ChevronRight} size={14} className="ta-folder-chevron" />
+                                </button>
+                            </li>
+                        ))}
+                    {folders?.length === 0 && !connecting && <li className="ta-folder-note">{t('ta.folder.empty')}</li>}
+                    {folders === undefined && failed && host && (
+                        <li className="ta-folder-unreachable">
+                            <strong>{t('ta.remote.failed', { host })}</strong>
+                            <span>{failed}</span>
                         </li>
-                    ))}
-                    {folders?.length === 0 && <li className="ta-folder-note">{t('ta.folder.empty')}</li>}
+                    )}
                 </ul>
-                {failed && <div className="ta-folder-failed">{t('ta.folder.failed', { path: failed })}</div>}
+                {failed && !(folders === undefined && host) && <div className="ta-folder-failed">{failed}</div>}
                 <div className="ta-dialog-actions">
                     <button type="button" className="ta-button" onClick={onClose}>
                         {t('ta.cancel')}
                     </button>
-                    <button type="button" className="ta-button ta-primary" disabled={busy || loading || folders === undefined} onClick={pick}>
+                    <button
+                        type="button"
+                        className="ta-button ta-primary"
+                        disabled={busy || loading || folders === undefined || TaLocation.host(path) !== host}
+                        onClick={pick}
+                    >
                         {t('ta.folder.open')}
                     </button>
                 </div>
@@ -142,29 +311,42 @@ export function FolderPicker({ list, initial, onPick, onClose }: FolderPickerPro
     );
 }
 
+/** The name of a directory, with the host of one of another machine. */
+export function DirectoryName({ cwd }: { cwd: string }): React.ReactElement {
+    const host = TaLocation.host(cwd);
+    return (
+        <>
+            <Icon icon={host ? Server : Folder} size={14} />
+            <span className="ta-ellipsis">{MessageUtil.basename(cwd) || cwd}</span>
+            {host && <span className="ta-host-tag">{host}</span>}
+        </>
+    );
+}
+
 export interface DirectoryButtonProps {
     /** The directory now. */
     cwd: string;
     /** The entries of a directory of the server, the same function from one render to the next. */
     list(directory: string): Promise<TaDirEntry[]>;
     onPick(cwd: string): void | Promise<void>;
+    remote?: FolderPickerRemote;
 }
 
 /** The directory a new conversation will work in, beside the + of its message box: a click picks another. */
-export function DirectoryButton({ cwd, list, onPick }: DirectoryButtonProps): React.ReactElement {
+export function DirectoryButton({ cwd, list, onPick, remote }: DirectoryButtonProps): React.ReactElement {
     const t = useT();
     const [picking, setPicking] = React.useState(false);
     return (
         <>
             <button type="button" className="ta-cwd-chip" title={t('ta.chat.cwdTitle', { path: cwd })} onClick={() => setPicking(true)}>
-                <Icon icon={Folder} size={14} />
-                <span className="ta-ellipsis">{MessageUtil.basename(cwd) || cwd}</span>
+                <DirectoryName cwd={cwd} />
                 <Icon icon={ChevronDown} size={13} />
             </button>
             {picking && (
                 <FolderPicker
                     list={list}
                     initial={cwd}
+                    remote={remote}
                     onClose={() => setPicking(false)}
                     onPick={async path => {
                         await onPick(path);

package/src/browser/components/remote-hosts.tsx

@@ -0,0 +1,149 @@
+import { type TaForwardedPort, TaLocation, type TaRemoteHost } from '@celljs/ta-protocol';
+import { Plug, Plus, Server, Trash2, Unplug, X } from 'lucide-react';
+import * as React from 'react';
+import { useNotices, useWorkbench } from '../hooks';
+import { useT } from '../i18n/use-t';
+import { RemoteHostsUtil } from './folder-picker';
+import { Icon, IconButton } from './icon';
+import { Row } from './settings-controls';
+
+/** The hosts and forwarded ports of TaRemoteServer, read again when a host connects or disconnects. */
+function useRemote() {
+    const [workbench, bench] = useWorkbench();
+    const [hosts, setHosts] = React.useState<TaRemoteHost[]>([]);
+    const [ports, setPorts] = React.useState<TaForwardedPort[]>([]);
+    const read = React.useCallback(async () => {
+        const [listed, forwarded] = await Promise.all([bench.remote.listHosts(), bench.remote.listForwardedPorts()]);
+        setHosts(listed);
+        setPorts(forwarded);
+    }, [bench]);
+    React.useEffect(() => {
+        if (workbench.status !== 'online') {
+            return;
+        }
+        read().catch(() => undefined);
+        return bench.onRemoteEvent(event => event.type === 'connection' && void read().catch(() => undefined));
+    }, [workbench.status, bench, read]);
+    return { bench, hosts, ports, read };
+}
+
+/**
+ * The machines conversations can work on (`ssh://` directories): those of ~/.ssh/config and those added,
+ * whether Ta is connected to each, and the ports forwarded from them. Connecting checks a host the way a
+ * conversation would: ssh signs in, Ta installs what it needs there.
+ */
+export function RemoteHosts() {
+    const t = useT();
+    const [, notices] = useNotices();
+    const { bench, hosts, ports, read } = useRemote();
+    const [text, setText] = React.useState('');
+    const [busy, setBusy] = React.useState<string>();
+    const run = async (host: string, action: () => Promise<unknown>) => {
+        setBusy(host);
+        try {
+            await action();
+        } catch (error) {
+            notices.error(error);
+        } finally {
+            setBusy(undefined);
+            await read().catch(() => undefined);
+        }
+    };
+    const add = () => {
+        const read = TaLocation.readHost(text);
+        if ('error' in read) {
+            notices.notify(RemoteHostsUtil.problem(read, text, t), { level: 'warning' });
+            return;
+        }
+        setText('');
+        void run(read.host, () => bench.remote.addHost(read.host));
+    };
+    return (
+        <>
+            <Row label={t('ta.remote.add')} description={t('ta.remote.description')} stacked>
+                <form
+                    className="ta-trusted-add"
+                    onSubmit={event => {
+                        event.preventDefault();
+                        add();
+                    }}
+                >
+                    <input
+                        className="ta-input"
+                        value={text}
+                        placeholder={t('ta.remote.addHint')}
+                        aria-label={t('ta.remote.add')}
+                        spellCheck={false}
+                        onChange={event => setText(event.target.value)}
+                    />
+                    <button type="submit" className="ta-button" disabled={!text.trim()}>
+                        <Icon icon={Plus} size={14} /> {t('ta.remote.add')}
+                    </button>
+                </form>
+            </Row>
+            {hosts.length === 0 && <Row label={t('ta.remote.none')} />}
+            {hosts.map(host => (
+                <Row
+                    key={host.host}
+                    label={host.host}
+                    description={
+                        <span className="ta-remote-state">
+                            <span className={`ta-remote-light${host.connected ? ' ta-on' : ''}`} />
+                            {[
+                                t(host.connected ? 'ta.remote.connected' : 'ta.remote.disconnected'),
+                                t(host.source === 'config' ? 'ta.remote.fromConfig' : 'ta.remote.added'),
+                            ].join(' · ')}
+                        </span>
+                    }
+                >
+                    {host.connected ? (
+                        <button
+                            type="button"
+                            className="ta-button"
+                            disabled={busy === host.host}
+                            onClick={() => run(host.host, () => bench.remote.disconnect(host.host))}
+                        >
+                            <Icon icon={Unplug} size={14} /> {t('ta.remote.disconnect')}
+                        </button>
+                    ) : (
+                        <button
+                            type="button"
+                            className="ta-button"
+                            disabled={busy === host.host}
+                            onClick={() =>
+                                run(host.host, async () => {
+                                    await bench.remote.resolveLocation(TaLocation.ssh(host.host));
+                                    notices.notify(t('ta.remote.connectedTo', { host: host.host }), { level: 'success' });
+                                })
+                            }
+                        >
+                            {busy === host.host ? <span className="ta-spinner" /> : <Icon icon={Plug} size={14} />} {t('ta.remote.connect')}
+                        </button>
+                    )}
+                    {host.source === 'recent' && (
+                        <IconButton
+                            icon={Trash2}
+                            label={t('ta.remote.remove', { host: host.host })}
+                            disabled={busy === host.host}
+                            onClick={() => run(host.host, () => bench.remote.removeHost(host.host))}
+                        />
+                    )}
+                </Row>
+            ))}
+            {ports.map(port => (
+                <Row
+                    key={`${port.host}:${port.remotePort}`}
+                    label={t('ta.remote.port', { host: port.host, port: port.remotePort })}
+                    description={`localhost:${port.localPort}`}
+                >
+                    <Icon icon={Server} size={14} className="ta-muted" />
+                    <IconButton
+                        icon={X}
+                        label={t('ta.remote.closePort')}
+                        onClick={() => run(port.host, () => bench.remote.closeForwardedPort(port.host, port.remotePort))}
+                    />
+                </Row>
+            ))}
+        </>
+    );
+}

package/src/browser/components/remote-prompts.tsx

@@ -0,0 +1,111 @@
+import type { TaRemoteEvent, TaRemotePrompt } from '@celljs/ta-protocol';
+import { KeyRound, Server, ShieldQuestion } from 'lucide-react';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { useNotices, useWorkbench } from '../hooks';
+import { useT } from '../i18n/use-t';
+import { Icon } from './icon';
+
+/** Asks what ssh asks: a password or a passphrase (not shown), whether to trust a new host, or a line of text. */
+function PromptDialog({ prompt, onAnswer }: { prompt: TaRemotePrompt; onAnswer(value: string | null): void }) {
+    const t = useT();
+    const [value, setValue] = React.useState('');
+    const confirm = prompt.kind === 'confirm';
+    return createPortal(
+        <div className="ta-modal-scrim">
+            <button type="button" className="ta-overlay-close" aria-label={t('ta.cancel')} tabIndex={-1} onClick={() => onAnswer(null)} />
+            <form
+                className="ta-modal ta-confirm ta-remote-prompt"
+                role="alertdialog"
+                aria-modal="true"
+                aria-label={t('ta.remote.prompt.title', { host: prompt.host })}
+                onKeyDown={event => event.key === 'Escape' && onAnswer(null)}
+                onSubmit={event => {
+                    event.preventDefault();
+                    onAnswer(confirm ? 'yes' : value);
+                }}
+            >
+                <div className="ta-confirm-title">
+                    <Icon icon={confirm ? ShieldQuestion : prompt.kind === 'secret' ? KeyRound : Server} size={16} />
+                    {t('ta.remote.prompt.title', { host: prompt.host })}
+                </div>
+                <pre className="ta-remote-message">{prompt.message}</pre>
+                {!confirm && (
+                    <label className="ta-field">
+                        <input
+                            autoFocus
+                            type={prompt.kind === 'secret' ? 'password' : 'text'}
+                            autoComplete="off"
+                            spellCheck={false}
+                            value={value}
+                            aria-label={prompt.message}
+                            onChange={event => setValue(event.target.value)}
+                        />
+                    </label>
+                )}
+                <div className="ta-dialog-actions">
+                    <button type="button" className="ta-button" onClick={() => onAnswer(confirm ? 'no' : null)}>
+                        {t('ta.cancel')}
+                    </button>
+                    <button type="submit" className="ta-button ta-primary" autoFocus={confirm}>
+                        {t(confirm ? 'ta.remote.prompt.trust' : 'ta.remote.prompt.continue')}
+                    </button>
+                </div>
+            </form>
+        </div>,
+        document.body,
+    );
+}
+
+/**
+ * What ssh asks while ta serve connects to a host, one question at a time, in every page that is open (the
+ * first answer counts); a line at the bottom while a host connects, which may take a while the first
+ * time (it installs Node.js there); and a notice when a connection is lost.
+ */
+export function RemotePrompts() {
+    const t = useT();
+    const [, bench] = useWorkbench();
+    const [, notices] = useNotices();
+    const [prompts, setPrompts] = React.useState<TaRemotePrompt[]>([]);
+    const [steps, setSteps] = React.useState<Record<string, string>>({});
+    const connected = React.useRef(new Set<string>());
+    React.useEffect(
+        () =>
+            bench.onRemoteEvent((event: TaRemoteEvent) => {
+                if (event.type === 'prompt') {
+                    setPrompts(shown => (shown.some(prompt => prompt.promptId === event.prompt.promptId) ? shown : [...shown, event.prompt]));
+                } else if (event.type === 'prompt_closed') {
+                    setPrompts(shown => shown.filter(prompt => prompt.promptId !== event.promptId));
+                } else if (event.type === 'progress') {
+                    setSteps(shown => ({ ...shown, [event.host]: t(`ta.remote.step.${event.step}`, { host: event.host, detail: event.detail ?? '' }) }));
+                } else {
+                    setSteps(({ [event.host]: _gone, ...rest }) => rest);
+                    // Lost, not closed on purpose; a connection that failed is the caller's to tell.
+                    if (!event.connected && event.error && connected.current.has(event.host)) {
+                        notices.notify(t('ta.remote.lost', { host: event.host }), { level: 'warning', detail: event.error });
+                    }
+                    connected.current[event.connected ? 'add' : 'delete'](event.host);
+                }
+            }),
+        [bench, notices, t],
+    );
+    const [prompt] = prompts;
+    const answer = (value: string | null) => {
+        setPrompts(shown => shown.slice(1));
+        void bench.remote.answer(prompt.promptId, value).catch(() => undefined);
+    };
+    const lines = Object.values(steps);
+    return (
+        <>
+            {prompt && <PromptDialog key={prompt.promptId} prompt={prompt} onAnswer={answer} />}
+            {lines.length > 0 &&
+                createPortal(
+                    <div className="ta-remote-status" role="status">
+                        <span className="ta-spinner" />
+                        {lines.join(' · ')}
+                    </div>,
+                    document.body,
+                )}
+        </>
+    );
+}

package/src/browser/components/settings-view.tsx

@@ -19,6 +19,7 @@ import {
     Puzzle,
     RefreshCw,
     Search,
+    Server,
     Smartphone,
     Sparkles,
     Sun,
@@ -37,6 +38,7 @@ import { AgentControl, ScopeBar, useAgentSettings } from './agent-settings-view'
 import { AuthDialog } from './auth-view';
 import { Icon, IconButton } from './icon';
 import { RelayDialog } from './relay-view';
+import { RemoteHosts } from './remote-hosts';
 import { type Choice, Keys, Row, type RowEntry, row, Segmented, Switch } from './settings-controls';
 import { TrustedDomains } from './trusted-domains';
 import { WorkingDirectoryPicker } from './working-directory';
@@ -336,6 +338,12 @@ function useParts(scope: TaSettingsScope, onScope: (scope: TaSettingsScope) => v
                 ),
             ],
         },
+        {
+            id: 'remote',
+            title: t('ta.remote.title'),
+            icon: Server,
+            rows: [row('remote', [t('ta.remote.title'), t('ta.remote.description'), 'ssh'], <RemoteHosts />)],
+        },
         {
             id: 'shortcuts',
             title: t('ta.settings.shortcuts'),