feat: implement SSH key management

- Add backend API endpoints for SSH key CRUD (POST, GET, DELETE)
- Implement Ed25519 key generation with Fernet-encrypted private keys
- Add frontend SSH keys page with generate, list, and delete functionality
- Include copy-to-clipboard for public keys
- Add responsive CSS styles for key cards
- Register ssh_keys router in main.py
- Add basic auth tests for SSH key endpoints

Quality gates: ruff ✓, mypy ✓, typecheck ✓, lint ✓

apps/web/src/api/ssh_keys.ts

@@ -0,0 +1,26 @@
+import { apiClient } from "./client";
+
+export interface SSHKey {
+  id: string;
+  name: string;
+  public_key: string;
+  created_at: string;
+}
+
+export interface SSHKeyCreate {
+  name: string;
+}
+
+export async function listSSHKeys(): Promise<SSHKey[]> {
+  const response = await apiClient.get<SSHKey[]>("/ssh-keys");
+  return response.data;
+}
+
+export async function createSSHKey(data: SSHKeyCreate): Promise<SSHKey> {
+  const response = await apiClient.post<SSHKey>("/ssh-keys", data);
+  return response.data;
+}
+
+export async function deleteSSHKey(keyId: string): Promise<void> {
+  await apiClient.delete(`/ssh-keys/${keyId}`);
+}

apps/web/src/pages/ssh-keys.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useState } from "react";
+import { createSSHKey, deleteSSHKey, listSSHKeys, type SSHKey } from "../api/ssh_keys";
+
+export const SSHKeysPage = () => {
+  const [keys, setKeys] = useState<SSHKey[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [newKeyName, setNewKeyName] = useState("");
+  const [generating, setGenerating] = useState(false);
+
+  useEffect(() => {
+    loadKeys();
+  }, []);
+
+  async function loadKeys() {
+    try {
+      setLoading(true);
+      const data = await listSSHKeys();
+      setKeys(data);
+      setError(null);
+    } catch {
+      setError("Failed to load SSH keys");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleGenerate(e: React.FormEvent) {
+    e.preventDefault();
+    if (!newKeyName.trim()) return;
+
+    try {
+      setGenerating(true);
+      await createSSHKey({ name: newKeyName.trim() });
+      setNewKeyName("");
+      await loadKeys();
+    } catch {
+      setError("Failed to generate SSH key");
+    } finally {
+      setGenerating(false);
+    }
+  }
+
+  async function handleDelete(keyId: string) {
+    if (!confirm("Are you sure you want to delete this SSH key?")) return;
+
+    try {
+      await deleteSSHKey(keyId);
+      await loadKeys();
+    } catch {
+      setError("Failed to delete SSH key");
+    }
+  }
+
+  function copyToClipboard(text: string) {
+    navigator.clipboard.writeText(text);
+  }
+
+  if (loading) return <div>Loading...</div>;
+
+  return (
+    <section className="stack">
+      <h1>SSH Keys</h1>
+
+      {error && <div className="error">{error}</div>}
+
+      <form onSubmit={handleGenerate} className="stack">
+        <div className="form-group">
+          <label htmlFor="key-name">Key Name</label>
+          <input
+            id="key-name"
+            type="text"
+            value={newKeyName}
+            onChange={(e) => setNewKeyName(e.target.value)}
+            placeholder="e.g., GitHub Work"
+            required
+          />
+        </div>
+        <button type="submit" className="primary-button" disabled={generating}>
+          {generating ? "Generating..." : "Generate SSH Key"}
+        </button>
+      </form>
+
+      <div className="keys-list">
+        {keys.length === 0 ? (
+          <p className="muted">No SSH keys yet. Generate one above.</p>
+        ) : (
+          keys.map((key) => (
+            <div key={key.id} className="key-card">
+              <div className="key-header">
+                <h3>{key.name}</h3>
+                <button
+                  onClick={() => handleDelete(key.id)}
+                  className="danger-button"
+                >
+                  Delete
+                </button>
+              </div>
+              <div className="key-meta">
+                <span className="muted">
+                  Created: {new Date(key.created_at).toLocaleDateString()}
+                </span>
+              </div>
+              <div className="key-public">
+                <code>{key.public_key.substring(0, 50)}...</code>
+                <button
+                  onClick={() => copyToClipboard(key.public_key)}
+                  className="secondary-button"
+                >
+                  Copy Full Key
+                </button>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </section>
+  );
+};

apps/web/src/router.tsx

@@ -6,6 +6,7 @@ import { DashboardPage } from "./pages/dashboard";
 import { LoginRedirectPage, NotFoundPage, PlaceholderPage } from "./pages/placeholder";
 import { ProfilePage } from "./pages/profile";
 import { ProjectsPage } from "./pages/projects";
+import { SSHKeysPage } from "./pages/ssh-keys";
 
 export const AppRouter = () => {
   return (
@@ -22,7 +23,7 @@ export const AppRouter = () => {
         <Route index element={<DashboardPage />} />
         <Route path="projects" element={<ProjectsPage />} />
         <Route path="repositories" element={<PlaceholderPage title="Repositories" />} />
-        <Route path="ssh-keys" element={<PlaceholderPage title="SSH Keys" />} />
+        <Route path="ssh-keys" element={<SSHKeysPage />} />
         <Route path="profile" element={<ProfilePage />} />
         <Route path="settings" element={<PlaceholderPage title="Settings" />} />
       </Route>

apps/web/src/styles.css

@@ -270,6 +270,69 @@ a {
   gap: 0.6rem;
 }
 
+.keys-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.key-card {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 1rem;
+}
+
+.key-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.key-header h3 {
+  margin: 0;
+}
+
+.key-meta {
+  margin-bottom: 0.75rem;
+}
+
+.key-public {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem;
+  background: #f5f3ee;
+  border-radius: 8px;
+}
+
+.key-public code {
+  font-size: 0.85rem;
+  word-break: break-all;
+  flex: 1;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.form-group input {
+  padding: 0.55rem 0.7rem;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  font: inherit;
+}
+
+.error {
+  color: #b91c1c;
+  padding: 0.75rem;
+  background: #fef2f2;
+  border-radius: 10px;
+}
+
 @media (max-width: 860px) {
   .shell-body {
     grid-template-columns: 1fr;