first commit

web/app/keys/[id]/page.tsx

@@ -0,0 +1,346 @@
+"use client";
+
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useParams, useRouter } from "next/navigation";
+import Link from "next/link";
+import { api, Server } from "@/lib/api";
+import { Badge, Button, Card, CardHeader, CardTitle } from "@/components/ui";
+import { Table, Thead, Tbody, Tr, Th, Td } from "@/components/ui";
+
+function AssignModal({
+  keyId,
+  assignedServerIds,
+  onClose,
+}: {
+  keyId: string;
+  assignedServerIds: string[];
+  onClose: () => void;
+}) {
+  const queryClient = useQueryClient();
+  const [selectedServer, setSelectedServer] = useState("");
+
+  const { data: servers } = useQuery({
+    queryKey: ["servers"],
+    queryFn: api.listServers,
+  });
+
+  const { mutate: assign, isPending, error } = useMutation({
+    mutationFn: () => api.assignKey(keyId, selectedServer),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["keys", keyId] });
+      queryClient.invalidateQueries({ queryKey: ["servers"] });
+      onClose();
+    },
+  });
+
+  const availableServers = servers?.filter(
+    (s: Server) => !assignedServerIds.includes(s.server_id)
+  );
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm">
+      <div className="w-full max-w-md rounded-xl border border-border bg-surface p-6">
+        <h2 className="mb-4 text-lg font-semibold text-text-primary">Assign Key to Server</h2>
+
+        {error && (
+          <div className="mb-4 rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-sm text-danger">
+            {(error as Error).message}
+          </div>
+        )}
+
+        <div className="mb-4">
+          <label className="mb-1.5 block text-sm font-medium text-text-secondary">
+            Select Server
+          </label>
+          {!availableServers || availableServers.length === 0 ? (
+            <p className="text-sm text-text-secondary">
+              All servers already have this key assigned.
+            </p>
+          ) : (
+            <select
+              value={selectedServer}
+              onChange={(e) => setSelectedServer(e.target.value)}
+              className="w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent"
+            >
+              <option value="">Choose a server...</option>
+              {availableServers.map((s: Server) => (
+                <option key={s.server_id} value={s.server_id}>
+                  {s.hostname} ({s.ip_address})
+                </option>
+              ))}
+            </select>
+          )}
+        </div>
+
+        <div className="flex justify-end gap-3">
+          <Button variant="ghost" onClick={onClose}>Cancel</Button>
+          <Button
+            variant="primary"
+            loading={isPending}
+            disabled={!selectedServer}
+            onClick={() => assign()}
+          >
+            Assign Key
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function KeyDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const keyId = params.id as string;
+  const [showAssign, setShowAssign] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [copiedKey, setCopiedKey] = useState(false);
+
+  const { data: key, isLoading, error } = useQuery({
+    queryKey: ["keys", keyId],
+    queryFn: () => api.getKey(keyId),
+  });
+
+  const { mutate: revokeKey } = useMutation({
+    mutationFn: (serverId: string) => api.revokeKey(keyId, serverId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["keys", keyId] });
+      queryClient.invalidateQueries({ queryKey: ["servers"] });
+    },
+  });
+
+  const { mutate: deleteKey, isPending: isDeleting } = useMutation({
+    mutationFn: () => api.deleteKey(keyId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["keys"] });
+      router.push("/keys");
+    },
+  });
+
+  const handleCopyKey = async () => {
+    if (!key?.public_key) return;
+    await navigator.clipboard.writeText(key.public_key);
+    setCopiedKey(true);
+    setTimeout(() => setCopiedKey(false), 2000);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-border border-t-accent" />
+      </div>
+    );
+  }
+
+  if (error || !key) {
+    return (
+      <div className="p-8">
+        <div className="rounded-lg border border-danger/30 bg-danger/10 p-4 text-danger">
+          Key not found or failed to load.
+        </div>
+      </div>
+    );
+  }
+
+  const activeAssignments = key.assignments?.filter((a) => !a.revoked_at) ?? [];
+  const assignedServerIds = activeAssignments.map((a) => a.server_id);
+
+  return (
+    <div className="p-8">
+      {showAssign && (
+        <AssignModal
+          keyId={keyId}
+          assignedServerIds={assignedServerIds}
+          onClose={() => setShowAssign(false)}
+        />
+      )}
+
+      <div className="mb-6 flex items-start justify-between">
+        <div>
+          <Link href="/keys" className="text-text-secondary hover:text-text-primary text-sm">
+            ← SSH Keys
+          </Link>
+          <div className="mt-2 flex items-center gap-3">
+            <h1 className="text-2xl font-bold text-text-primary">{key.label}</h1>
+            <Badge variant={key.source === "generated" ? "accent" : "neutral"}>
+              {key.source}
+            </Badge>
+          </div>
+          <p className="mt-1 font-mono text-xs text-text-secondary">{key.fingerprint}</p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="secondary" onClick={() => setShowAssign(true)}>
+            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+            </svg>
+            Assign to Server
+          </Button>
+          {!confirmDelete ? (
+            <Button variant="danger" onClick={() => setConfirmDelete(true)}>
+              Delete Key
+            </Button>
+          ) : (
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-danger">Delete permanently?</span>
+              <Button variant="danger" loading={isDeleting} onClick={() => deleteKey()}>
+                Confirm
+              </Button>
+              <Button variant="ghost" onClick={() => setConfirmDelete(false)}>
+                Cancel
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+        <div className="space-y-6 lg:col-span-1">
+          <Card>
+            <CardHeader>
+              <CardTitle>Details</CardTitle>
+            </CardHeader>
+            <dl className="space-y-3 text-sm">
+              <div>
+                <dt className="text-text-secondary">Key ID</dt>
+                <dd className="mt-0.5 font-mono text-xs text-text-primary break-all">{key.key_id}</dd>
+              </div>
+              <div className="border-t border-border pt-3">
+                <dt className="text-text-secondary">Source</dt>
+                <dd className="mt-0.5 text-text-primary capitalize">{key.source}</dd>
+              </div>
+              {key.generated_by_server_id && (
+                <div className="border-t border-border pt-3">
+                  <dt className="text-text-secondary">Generated By</dt>
+                  <dd className="mt-0.5">
+                    <Link
+                      href={`/servers/${key.generated_by_server_id}`}
+                      className="font-mono text-xs text-accent hover:underline"
+                    >
+                      {key.generated_by_server_id}
+                    </Link>
+                  </dd>
+                </div>
+              )}
+              <div className="border-t border-border pt-3">
+                <dt className="text-text-secondary">Active Assignments</dt>
+                <dd className="mt-0.5 text-text-primary">{activeAssignments.length}</dd>
+              </div>
+              <div className="border-t border-border pt-3">
+                <dt className="text-text-secondary">Created</dt>
+                <dd className="mt-0.5 text-text-primary">
+                  {new Date(key.created_at).toLocaleString()}
+                </dd>
+              </div>
+            </dl>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Public Key</CardTitle>
+              <button
+                onClick={handleCopyKey}
+                className="rounded-md border border-border bg-surface-2 px-2.5 py-1 text-xs font-medium text-text-secondary transition-colors hover:border-accent/50 hover:text-text-primary"
+              >
+                {copiedKey ? <span className="text-success">Copied!</span> : "Copy"}
+              </button>
+            </CardHeader>
+            <div className="rounded-lg border border-border bg-[#0a0c14] p-3">
+              <pre className="overflow-x-auto whitespace-pre-wrap break-all font-mono text-xs text-text-secondary leading-relaxed">
+                {key.public_key}
+              </pre>
+            </div>
+          </Card>
+        </div>
+
+        <div className="lg:col-span-2">
+          <Card padding={false}>
+            <div className="flex items-center justify-between border-b border-border px-6 py-4">
+              <h2 className="text-lg font-semibold text-text-primary">
+                Server Assignments
+                <span className="ml-2 rounded-full bg-surface-2 px-2 py-0.5 text-xs text-text-secondary">
+                  {activeAssignments.length} active
+                </span>
+              </h2>
+            </div>
+
+            {!key.assignments || key.assignments.length === 0 ? (
+              <div className="py-16 text-center">
+                <p className="text-text-secondary text-sm">Not assigned to any servers.</p>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  className="mt-3"
+                  onClick={() => setShowAssign(true)}
+                >
+                  Assign to a server
+                </Button>
+              </div>
+            ) : (
+              <Table>
+                <Thead>
+                  <Tr>
+                    <Th>Server</Th>
+                    <Th>IP Address</Th>
+                    <Th>Status</Th>
+                    <Th>Assigned</Th>
+                    <Th>Revoked</Th>
+                    <Th />
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {key.assignments.map((assignment) => (
+                    <Tr key={`${assignment.key_id}-${assignment.server_id}`}>
+                      <Td>
+                        <Link
+                          href={`/servers/${assignment.server_id}`}
+                          className="font-medium text-text-primary hover:text-accent"
+                        >
+                          {assignment.server?.hostname ?? assignment.server_id}
+                        </Link>
+                      </Td>
+                      <Td>
+                        <span className="font-mono text-xs text-text-secondary">
+                          {assignment.server?.ip_address ?? "—"}
+                        </span>
+                      </Td>
+                      <Td>
+                        <Badge variant={assignment.revoked_at ? "danger" : "success"}>
+                          {assignment.revoked_at ? "revoked" : "active"}
+                        </Badge>
+                      </Td>
+                      <Td>
+                        <span className="text-text-secondary text-xs">
+                          {new Date(assignment.assigned_at).toLocaleDateString()}
+                        </span>
+                      </Td>
+                      <Td>
+                        <span className="text-text-secondary text-xs">
+                          {assignment.revoked_at
+                            ? new Date(assignment.revoked_at).toLocaleDateString()
+                            : "—"}
+                        </span>
+                      </Td>
+                      <Td>
+                        {!assignment.revoked_at && (
+                          <Button
+                            variant="danger"
+                            size="sm"
+                            onClick={() => revokeKey(assignment.server_id)}
+                          >
+                            Revoke
+                          </Button>
+                        )}
+                      </Td>
+                    </Tr>
+                  ))}
+                </Tbody>
+              </Table>
+            )}
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}

web/app/keys/page.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import Link from "next/link";
+import { api, Key } from "@/lib/api";
+import { Badge, Button, Card, CardHeader, CardTitle } from "@/components/ui";
+import { Table, Thead, Tbody, Tr, Th, Td } from "@/components/ui";
+
+function UploadKeyModal({ onClose }: { onClose: () => void }) {
+  const queryClient = useQueryClient();
+  const [label, setLabel] = useState("");
+  const [publicKey, setPublicKey] = useState("");
+
+  const { mutate: upload, isPending, error } = useMutation({
+    mutationFn: () => api.uploadKey(label.trim(), publicKey.trim()),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["keys"] });
+      onClose();
+    },
+  });
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm">
+      <div className="w-full max-w-lg rounded-xl border border-border bg-surface p-6">
+        <h2 className="mb-4 text-lg font-semibold text-text-primary">Upload SSH Key</h2>
+
+        {error && (
+          <div className="mb-4 rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-sm text-danger">
+            {(error as Error).message}
+          </div>
+        )}
+
+        <div className="space-y-4">
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-text-secondary">
+              Label
+            </label>
+            <input
+              type="text"
+              value={label}
+              onChange={(e) => setLabel(e.target.value)}
+              placeholder="e.g. dom-macbook"
+              className="w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder-text-secondary/50 focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent"
+            />
+          </div>
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-text-secondary">
+              Public Key
+            </label>
+            <textarea
+              value={publicKey}
+              onChange={(e) => setPublicKey(e.target.value)}
+              placeholder="ssh-ed25519 AAAA..."
+              rows={4}
+              className="w-full rounded-lg border border-border bg-surface-2 px-3 py-2 font-mono text-xs text-text-primary placeholder-text-secondary/50 focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent resize-none"
+            />
+          </div>
+        </div>
+
+        <div className="mt-6 flex justify-end gap-3">
+          <Button variant="ghost" onClick={onClose}>Cancel</Button>
+          <Button
+            variant="primary"
+            loading={isPending}
+            disabled={!label.trim() || !publicKey.trim()}
+            onClick={() => upload()}
+          >
+            Upload Key
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function KeysPage() {
+  const [showUpload, setShowUpload] = useState(false);
+
+  const { data: keys, isLoading, error } = useQuery({
+    queryKey: ["keys"],
+    queryFn: api.listKeys,
+  });
+
+  return (
+    <div className="p-8">
+      {showUpload && <UploadKeyModal onClose={() => setShowUpload(false)} />}
+
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-text-primary">SSH Keys</h1>
+          <p className="mt-1 text-sm text-text-secondary">
+            {keys?.length ?? 0} key{keys?.length !== 1 ? "s" : ""} managed
+          </p>
+        </div>
+        <Button variant="primary" onClick={() => setShowUpload(true)}>
+          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
+          </svg>
+          Upload Key
+        </Button>
+      </div>
+
+      <Card padding={false}>
+        {isLoading ? (
+          <div className="flex items-center justify-center py-20">
+            <div className="h-8 w-8 animate-spin rounded-full border-2 border-border border-t-accent" />
+          </div>
+        ) : error ? (
+          <div className="py-20 text-center text-danger">
+            Failed to load keys. Is the backend running?
+          </div>
+        ) : keys && keys.length > 0 ? (
+          <Table>
+            <Thead>
+              <Tr>
+                <Th>Label</Th>
+                <Th>Fingerprint</Th>
+                <Th>Source</Th>
+                <Th>Assignments</Th>
+                <Th>Created</Th>
+                <Th />
+              </Tr>
+            </Thead>
+            <Tbody>
+              {keys.map((key: Key) => (
+                <Tr key={key.key_id}>
+                  <Td>
+                    <span className="font-medium text-text-primary">{key.label}</span>
+                  </Td>
+                  <Td>
+                    <span className="font-mono text-xs text-text-secondary">
+                      {key.fingerprint}
+                    </span>
+                  </Td>
+                  <Td>
+                    <Badge variant={key.source === "generated" ? "accent" : "neutral"}>
+                      {key.source}
+                    </Badge>
+                  </Td>
+                  <Td>
+                    <span className="text-text-secondary">
+                      {key.assigned_count ?? 0} server{(key.assigned_count ?? 0) !== 1 ? "s" : ""}
+                    </span>
+                  </Td>
+                  <Td>
+                    <span className="text-text-secondary text-xs">
+                      {new Date(key.created_at).toLocaleDateString()}
+                    </span>
+                  </Td>
+                  <Td>
+                    <Link href={`/keys/${key.key_id}`}>
+                      <Button variant="ghost" size="sm">View →</Button>
+                    </Link>
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        ) : (
+          <div className="py-20 text-center">
+            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-surface-2">
+              <svg className="h-6 w-6 text-text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" />
+              </svg>
+            </div>
+            <p className="text-text-secondary">No SSH keys yet.</p>
+            <Button
+              variant="primary"
+              size="sm"
+              className="mt-4"
+              onClick={() => setShowUpload(true)}
+            >
+              Upload your first key
+            </Button>
+          </div>
+        )}
+      </Card>
+    </div>
+  );
+}