SSH keys in account settings; wrappers for agents, terminal and git

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

web/src/components/settings/Account.tsx

@@ -3,6 +3,7 @@ import { post } from "../../api";
 import { useT } from "../../i18n";
 import { useStore } from "../../store";
 import { GitAccount } from "./GitAccount";
+import { SshKeys } from "./SshKeys";
 import { ApiTokens } from "./ApiTokens";
 import { CliInstall } from "./CliInstall";
 import { Memory } from "./Memory";
@@ -54,6 +55,7 @@ export function Account() {
     <Memory />
     <Snippets />
     <GitAccount />
+    <SshKeys />
     <CliInstall />
     <ClaudeCode />
     <Telegram />

web/src/components/settings/SshKeys.tsx

@@ -0,0 +1,98 @@
+import { useEffect, useState } from "react";
+import { del, get, post } from "../../api";
+import { useT } from "../../i18n";
+import { confirmDialog, toast } from "../../dialogs";
+import { Icon } from "../Icon";
+
+interface Key {
+  id: string;
+  name: string;
+  public: string;
+  fingerprint: string;
+}
+
+/** SSH keys of the user: used by agents, the terminal and the git panel to reach other servers. */
+export function SshKeys() {
+  const t = useT();
+  const [keys, setKeys] = useState<Key[]>();
+  const [name, setName] = useState("");
+  const [priv, setPriv] = useState("");
+  const [importing, setImporting] = useState(false);
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    get<Key[]>("/account/ssh")
+      .then(setKeys)
+      .catch((e) => toast(e.message));
+  }, []);
+  if (!keys) return null;
+
+  const add = async () => {
+    setBusy(true);
+    try {
+      setKeys(await post<Key[]>("/account/ssh", { name, private: importing ? priv : undefined }));
+      setName("");
+      setPriv("");
+      toast(t("ssh.added"), "success");
+    } catch (e: any) {
+      toast(e.message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const copy = (text: string) => navigator.clipboard?.writeText(text).then(() => toast(t("ssh.copied"), "success"), () => toast(t("ssh.copyFailed")));
+
+  return (
+    <div className="panel">
+      <h3>
+        <Icon name="lock" /> {t("ssh.title")}
+      </h3>
+      <div className="hint" style={{ marginBottom: 10 }}>
+        {t("ssh.hint")}
+      </div>
+      {keys.length === 0 && <div className="hint">{t("ssh.none")}</div>}
+      {keys.map((k) => (
+        <div key={k.id} className="ssh-key">
+          <div className="row">
+            <b>{k.name}</b>
+            <span className="hint mono">{k.fingerprint}</span>
+            <span className="spacer" />
+            <button className="small" onClick={() => copy(k.public)}>
+              <Icon name="copy" /> {t("ssh.copyPublic")}
+            </button>
+            <button
+              className="small"
+              title={t("common.delete")}
+              aria-label={t("common.delete")}
+              onClick={async () => {
+                if (await confirmDialog({ message: t("ssh.deleteConfirm", { name: k.name }), danger: true })) {
+                  del<Key[]>(`/account/ssh/${k.id}`).then(setKeys).catch((e) => toast(e.message));
+                }
+              }}
+            >
+              <Icon name="trash" />
+            </button>
+          </div>
+          <input readOnly value={k.public} onFocus={(e) => e.currentTarget.select()} aria-label={t("ssh.public")} className="mono" />
+        </div>
+      ))}
+      <div className="row" style={{ marginTop: 10, flexWrap: "wrap" }}>
+        <input value={name} onChange={(e) => setName(e.target.value)} placeholder={t("ssh.name")} maxLength={60} aria-label={t("ssh.name")} style={{ flex: "1 1 160px" }} />
+        <button className="primary" disabled={busy || !name.trim() || (importing && !priv.trim())} onClick={add}>
+          {importing ? t("ssh.import") : t("ssh.generate")}
+        </button>
+        <label className="row" style={{ gap: 6 }}>
+          <input type="checkbox" checked={importing} onChange={(e) => setImporting(e.target.checked)} />
+          {t("ssh.importExisting")}
+        </label>
+      </div>
+      {importing && (
+        <>
+          <textarea rows={5} className="mono" value={priv} onChange={(e) => setPriv(e.target.value)} placeholder="-----BEGIN OPENSSH PRIVATE KEY-----" aria-label={t("ssh.private")} style={{ width: "100%", marginTop: 8 }} spellCheck={false} autoComplete="off" />
+          <div className="hint">{t("ssh.importHint")}</div>
+        </>
+      )}
+    </div>
+  );
+}

web/src/i18n/de.ts

@@ -1146,4 +1146,19 @@ export const de: Messages = {
   "stats.table.session": "teuerste Chats",
   "command.clear": "Bisheriges Gespräch vergessen (der Chat bleibt sichtbar)",
   "chat.cleared": "Kontext geleert – das Modell sieht die Nachrichten darüber nicht mehr",
+  "ssh.title": "SSH-Schlüssel",
+  "ssh.hint": "Schlüssel, mit denen Agenten, Terminal und Git-Panel andere Server erreichen (ssh, scp, rsync, Git über ssh). Sie werden automatisch genutzt; Hosts werden beim ersten Kontakt akzeptiert. Den öffentlichen Schlüssel trägst du in die authorized_keys des Servers ein.",
+  "ssh.none": "Noch keine Schlüssel.",
+  "ssh.name": "Name (z. B. Laptop, Build-Server)",
+  "ssh.generate": "Neuen Schlüssel erzeugen",
+  "ssh.import": "Schlüssel importieren",
+  "ssh.importExisting": "Vorhandenen Schlüssel importieren",
+  "ssh.importHint": "Nur private Schlüssel ohne Passphrase. Der Schlüssel wird für dein Konto auf dem Server gespeichert.",
+  "ssh.private": "Privater Schlüssel",
+  "ssh.public": "Öffentlicher Schlüssel",
+  "ssh.copyPublic": "Öffentlichen Schlüssel kopieren",
+  "ssh.copied": "Öffentlicher Schlüssel kopiert",
+  "ssh.copyFailed": "Kopieren nicht möglich – Text von Hand markieren",
+  "ssh.added": "Schlüssel hinzugefügt",
+  "ssh.deleteConfirm": "Schlüssel \"{name}\" löschen? Server, die ihm vertrauen, akzeptieren dich von hier aus nicht mehr.",
 };

web/src/i18n/en.ts

@@ -1145,6 +1145,21 @@ export const en = {
   "stats.table.session": "top chats",
   "command.clear": "Forget the conversation so far (the chat stays visible)",
   "chat.cleared": "Context cleared – the model no longer sees the messages above",
+  "ssh.title": "SSH keys",
+  "ssh.hint": "Keys that agents, the terminal and the git panel use to reach other servers (ssh, scp, rsync, git over ssh). They are used automatically; hosts are trusted on first contact. Add the public key to the server's authorized_keys.",
+  "ssh.none": "No keys yet.",
+  "ssh.name": "Name (e.g. laptop, build server)",
+  "ssh.generate": "Generate new key",
+  "ssh.import": "Import key",
+  "ssh.importExisting": "Import an existing key",
+  "ssh.importHint": "Private keys without a passphrase only. The key is stored on the server for your account.",
+  "ssh.private": "Private key",
+  "ssh.public": "Public key",
+  "ssh.copyPublic": "Copy public key",
+  "ssh.copied": "Public key copied",
+  "ssh.copyFailed": "Could not copy – select the text manually",
+  "ssh.added": "Key added",
+  "ssh.deleteConfirm": "Delete the key \"{name}\"? Servers that trust it will no longer accept you from here.",
 };
 
 export type Messages = Record<keyof typeof en, string>;

web/src/styles.css

@@ -5022,3 +5022,7 @@ td.fold-indent {
 .share-link input { flex: 1 1 200px; min-width: 0; }
 
 .offline-bar { background: color-mix(in srgb, var(--warn, #d79921) 25%, var(--bg0, transparent)); color: var(--fg, inherit); padding: 6px 12px; font-size: 0.85rem; text-align: center; }
+
+.ssh-key { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
+.ssh-key .row { align-items: center; flex-wrap: wrap; }
+.ssh-key input.mono { width: 100%; font-size: 12px; }

web/src/whatsnew.ts

@@ -3,6 +3,10 @@
  * under "unreleased"; scripts/release.sh renames the key to the release version.
  */
 export const WHATS_NEW: Record<string, { en: string[]; de: string[] }> = {
+  unreleased: {
+    en: ["SSH keys in Settings → Account: agents, terminal and git use them to reach other servers"],
+    de: ["SSH-Schlüssel unter Einstellungen → Account: Agenten, Terminal und Git nutzen sie für den Zugriff auf andere Server"],
+  },
   "202611-00032": {
     en: ["Agents now use your stored git credentials instead of searching for them (also Claude Code)"],
     de: ["Agenten nutzen deine hinterlegten Git-Zugangsdaten, statt danach zu suchen (auch Claude Code)"],