updates

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

@@ -89,6 +89,97 @@ function AssignModal({
   );
 }
 
+function PrivateKeyCard({ keyId }: { keyId: string }) {
+  const [revealed, setRevealed] = useState(false);
+  const [privateKey, setPrivateKey] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  async function reveal() {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await api.getPrivateKey(keyId);
+      setPrivateKey(res.private_key);
+      setRevealed(true);
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function download() {
+    if (!privateKey) return;
+    const blob = new Blob([privateKey], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${keyId}.pem`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  async function copy() {
+    if (!privateKey) return;
+    await navigator.clipboard.writeText(privateKey);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Private Key</CardTitle>
+        {revealed && (
+          <div className="flex gap-2">
+            <button
+              onClick={copy}
+              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"
+            >
+              {copied ? <span className="text-success">Copied!</span> : "Copy"}
+            </button>
+            <button
+              onClick={download}
+              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"
+            >
+              Download .pem
+            </button>
+          </div>
+        )}
+      </CardHeader>
+
+      {error && (
+        <div className="mb-3 rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-xs text-danger">
+          {error}
+        </div>
+      )}
+
+      {!revealed ? (
+        <div className="flex flex-col items-center gap-3 py-4">
+          <p className="text-center text-xs text-text-tertiary">
+            Stored encrypted (AES-256-GCM). Click to decrypt and display.
+          </p>
+          <Button variant="secondary" size="sm" loading={loading} onClick={reveal}>
+            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.964-7.178z" />
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            </svg>
+            Reveal Private Key
+          </Button>
+        </div>
+      ) : (
+        <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">
+            {privateKey}
+          </pre>
+        </div>
+      )}
+    </Card>
+  );
+}
+
 export default function KeyDetailPage() {
   const params = useParams();
   const router = useRouter();
@@ -252,6 +343,8 @@ export default function KeyDetailPage() {
               </pre>
             </div>
           </Card>
+
+          {key.has_private_key && <PrivateKeyCard keyId={keyId} />}
         </div>
 
         <div className="lg:col-span-2">

web/app/keys/page.tsx

@@ -11,9 +11,10 @@ function UploadKeyModal({ onClose }: { onClose: () => void }) {
   const queryClient = useQueryClient();
   const [label, setLabel] = useState("");
   const [publicKey, setPublicKey] = useState("");
+  const [privateKey, setPrivateKey] = useState("");
 
   const { mutate: upload, isPending, error } = useMutation({
-    mutationFn: () => api.uploadKey(label.trim(), publicKey.trim()),
+    mutationFn: () => api.uploadKey(label.trim(), publicKey.trim(), privateKey.trim() || undefined),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["keys"] });
       onClose();
@@ -52,7 +53,20 @@ function UploadKeyModal({ onClose }: { onClose: () => void }) {
               value={publicKey}
               onChange={(e) => setPublicKey(e.target.value)}
               placeholder="ssh-ed25519 AAAA..."
-              rows={4}
+              rows={3}
+              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>
+            <label className="mb-1.5 block text-sm font-medium text-text-secondary">
+              Private Key{" "}
+              <span className="text-text-tertiary font-normal">(optional — stored AES-256-GCM encrypted)</span>
+            </label>
+            <textarea
+              value={privateKey}
+              onChange={(e) => setPrivateKey(e.target.value)}
+              placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"
+              rows={3}
               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>