From 7348ba916d822373d3ab5cadf596293695919ada Mon Sep 17 00:00:00 2001
From: James Bhattarai <jamesbhattarai14@gmail.com>
Date: Tue, 3 Mar 2026 18:02:21 +0545
Subject: [PATCH 1/4] Chore(Feat): Refractor CA Code + CA host Sign via web

---
 src/lib/api.ts                          |  19 +
 src/pages/org/CAsPage.tsx               | 776 ++++++------------------
 src/pages/org/ca/CADetailCard.tsx       | 236 +++++++
 src/pages/org/ca/CADialogs.tsx          | 468 ++++++++++++++
 src/pages/org/ca/CASection.tsx          | 161 +++++
 src/pages/org/ca/CopyButton.tsx         |  40 ++
 src/pages/org/ca/IssueHostCertPanel.tsx | 344 +++++++++++
 src/pages/org/ca/utils.ts               |  32 +
 8 files changed, 1481 insertions(+), 595 deletions(-)
 create mode 100644 src/pages/org/ca/CADetailCard.tsx
 create mode 100644 src/pages/org/ca/CADialogs.tsx
 create mode 100644 src/pages/org/ca/CASection.tsx
 create mode 100644 src/pages/org/ca/CopyButton.tsx
 create mode 100644 src/pages/org/ca/IssueHostCertPanel.tsx
 create mode 100644 src/pages/org/ca/utils.ts

diff --git a/src/lib/api.ts b/src/lib/api.ts
index 08a2c8d..18c6083 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -1098,6 +1098,25 @@ export const api = {
         body: JSON.stringify({ key_id, principals, cert_type, expiry_hours }),
       }, true, requestConfig),
 
+    // Issue a host certificate by submitting a raw server host public key
+    // (admin-only; does not require a pre-registered SSHKey record)
+    signHostCert: (
+      hostPublicKey: string,
+      principals: string[],
+      validityHours: number,
+      caId: string,
+      requestConfig?: RequestConfig,
+    ) =>
+      request<SSHSignResponse>('/ssh/sign/host', {
+        method: 'POST',
+        body: JSON.stringify({
+          host_public_key: hostPublicKey,
+          principals,
+          validity_hours: validityHours,
+          ca_id: caId,
+        }),
+      }, true, requestConfig),
+
     // Get the merged department certificate policy for the current user (used in sign dialog)
     getMyDeptCertPolicy: (requestConfig?: RequestConfig) =>
       request<{ policy: DeptCertPolicy }>('/ssh/dept-cert-policy', {}, true, requestConfig),
diff --git a/src/pages/org/CAsPage.tsx b/src/pages/org/CAsPage.tsx
index ddfe44f..fbbfc89 100644
--- a/src/pages/org/CAsPage.tsx
+++ b/src/pages/org/CAsPage.tsx
@@ -1,298 +1,23 @@
+// ─── THIS FILE IS THE LEAN ORCHESTRATOR ──────────────────────────────────────
+// Heavy sub-components live in ./ca/  — edit them there for isolated changes.
+// ─────────────────────────────────────────────────────────────────────────────
 import { useState, useEffect } from "react";
-import {
-  Shield,
-  ShieldAlert,
-  Copy,
-  CheckCircle,
-  Loader2,
-  Terminal,
-  Plus,
-  User,
-  Server,
-  Settings,
-  AlertCircle,
-  ServerCog,
-  RefreshCw,
-  ShieldOff,
-} from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
+import { Loader2, Server, Shield, User } from "lucide-react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Badge } from "@/components/ui/badge";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { useToast } from "@/hooks/use-toast";
 import { useParams } from "react-router-dom";
 import { useCurrentOrganizationId } from "@/hooks/useCurrentOrganization";
 import { api, OrgCA, ApiError } from "@/lib/api";
-
-function CopyButton({ text }: { text: string }) {
-  const [copied, setCopied] = useState(false);
-  const { toast } = useToast();
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      toast({ title: "Copied to clipboard" });
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      toast({ variant: "destructive", title: "Copy failed" });
-    }
-  };
-  return (
-    <Button variant="ghost" size="icon" className="h-8 w-8 flex-shrink-0" onClick={handleCopy}>
-      {copied ? <CheckCircle className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
-    </Button>
-  );
-}
-
-function formatDate(d: string | null) {
-  if (!d) return "—";
-  return new Date(d).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
-}
-
-// ─── CA Detail Card ───────────────────────────────────────────────────────────
-
-interface CADetailCardProps {
-  ca: OrgCA;
-  onEdit: (ca: OrgCA) => void;
-  onRotate: (ca: OrgCA) => void;
-  onDelete: (ca: OrgCA) => void;
-}
-
-function CADetailCard({ ca, onEdit, onRotate, onDelete }: CADetailCardProps) {
-  const isUser = ca.ca_type === "user";
-  const isSystem = !!ca.is_system;
-  const sshConfig = isUser
-    ? `# /etc/ssh/sshd_config:\nTrustedUserCAKeys /etc/ssh/trusted_user_ca_keys\n\n# Add public key:\necho '${ca.public_key.trim()}' \\\n  >> /etc/ssh/trusted_user_ca_keys`
-    : `# /etc/ssh/sshd_config:\nHostCertificate /etc/ssh/ssh_host_ed25519_key-cert.pub\n\n# Add to known_hosts (clients):\n@cert-authority * ${ca.public_key.trim()}`;
-
-  return (
-    <div className="space-y-4">
-      <Card>
-        <CardHeader>
-          <div className="flex items-start justify-between">
-            <div>
-              <CardTitle className="text-base flex items-center gap-2">
-                {isSystem ? <ServerCog className="w-4 h-4" /> : isUser ? <User className="w-4 h-4" /> : <Server className="w-4 h-4" />}
-                {ca.name}
-                {isSystem ? (
-                  <Badge variant="secondary" className="text-xs flex items-center gap-1">
-                    <ServerCog className="w-3 h-3" />
-                    System
-                  </Badge>
-                ) : ca.is_active ? (
-                  <Badge className="bg-green-500/10 text-green-600 border-0 text-xs">Active</Badge>
-                ) : (
-                  <Badge variant="secondary" className="text-xs">Inactive</Badge>
-                )}
-              </CardTitle>
-              {ca.description && (
-                <CardDescription className="mt-1">{ca.description}</CardDescription>
-              )}
-            </div>
-            <Badge variant="outline" className="text-xs font-mono">{ca.key_type}</Badge>
-          </div>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          {/* Stats — hidden for system CAs (we have no cert records for them) */}
-          {!isSystem && (
-            <div className="grid grid-cols-4 gap-3 text-center">
-              <div className="p-2 bg-muted rounded-lg">
-                <p className="text-lg font-semibold">{ca.active_certs}</p>
-                <p className="text-xs text-muted-foreground">Active certs</p>
-              </div>
-              <div className="p-2 bg-muted rounded-lg">
-                <p className="text-lg font-semibold">{ca.total_certs}</p>
-                <p className="text-xs text-muted-foreground">Total issued</p>
-              </div>
-              <div className="p-2 bg-muted rounded-lg">
-                <p className="text-lg font-semibold">{ca.default_cert_validity_hours}h</p>
-                <p className="text-xs text-muted-foreground">Default validity</p>
-              </div>
-              <div className="p-2 bg-muted rounded-lg">
-                <p className="text-lg font-semibold">{ca.next_serial_number ?? '—'}</p>
-                <p className="text-xs text-muted-foreground">Next serial</p>
-              </div>
-            </div>
-          )}
-
-          {/* Fingerprint */}
-          <div>
-            <p className="text-xs text-muted-foreground mb-1">Fingerprint</p>
-            <code className="text-xs font-mono bg-muted px-2 py-1 rounded break-all">{ca.fingerprint}</code>
-          </div>
-
-          {/* Public key */}
-          <div>
-            <div className="flex items-center justify-between mb-1">
-              <p className="text-xs text-muted-foreground">Public key</p>
-              <CopyButton text={ca.public_key} />
-            </div>
-            <Textarea readOnly value={ca.public_key} className="font-mono text-xs min-h-[60px]" />
-          </div>
-
-          {/* Setup instructions */}
-          <div className="rounded-lg bg-muted p-3">
-            <p className="text-xs font-semibold flex items-center gap-1 mb-1">
-              <Terminal className="w-3 h-3" />
-              {isUser ? "Add to SSH servers (sshd_config)" : "Host certificate setup"}
-            </p>
-            <pre className="text-xs font-mono whitespace-pre-wrap break-all">{sshConfig}</pre>
-          </div>
-
-          {ca.created_at && (
-            <p className="text-xs text-muted-foreground">Created {formatDate(ca.created_at)}</p>
-          )}
-          {ca.rotated_at && (
-            <p className="text-xs text-muted-foreground">
-              Key rotated {formatDate(ca.rotated_at)}
-              {ca.rotation_reason && <> — {ca.rotation_reason}</>}
-            </p>
-          )}
-
-          {!isSystem && (
-            <div className="pt-2 border-t space-y-2">
-              <Button variant="outline" size="sm" onClick={() => onEdit(ca)} className="w-full">
-                <Settings className="w-3 h-3 mr-2" />
-                Edit Configuration
-              </Button>
-              <div className="grid grid-cols-2 gap-2">
-                <Button variant="outline" size="sm" onClick={() => onRotate(ca)} className="w-full">
-                  <RefreshCw className="w-3 h-3 mr-2" />
-                  Rotate Key
-                </Button>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => onDelete(ca)}
-                  className="w-full text-destructive hover:text-destructive border-destructive/30 hover:border-destructive/60"
-                >
-                  <ShieldOff className="w-3 h-3 mr-2" />
-                  Delete CA
-                </Button>
-              </div>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
-
-// ─── CA Section (one per type) ────────────────────────────────────────────────
-
-interface CASectionProps {
-  caType: "user" | "host";
-  ca: OrgCA | null;
-  onCreateClick: (caType: "user" | "host") => void;
-  onEdit: (ca: OrgCA) => void;
-  onRotate: (ca: OrgCA) => void;
-  onDelete: (ca: OrgCA) => void;
-}
-
-function CASection({ caType, ca, onCreateClick, onEdit, onRotate, onDelete }: CASectionProps) {
-  const isUser = caType === "user";
-  const title = isUser ? "User Signing Key" : "Host Signing Key";
-  const subtitle = isUser
-    ? "Signs SSH user certificates so users can authenticate to servers."
-    : "Signs SSH host certificates so clients can verify server identity.";
-  const Icon = isUser ? User : Server;
-  const isSystem = !!ca?.is_system;
-
-  return (
-    <div className="space-y-3">
-      <div className="flex items-center gap-2">
-        <Icon className="w-4 h-4 text-muted-foreground" />
-        <h2 className="text-sm font-semibold">{title}</h2>
-        {ca ? (
-          isSystem ? (
-            <Badge variant="secondary" className="text-xs flex items-center gap-1">
-              <ServerCog className="w-3 h-3" />
-              System (read-only)
-            </Badge>
-          ) : (
-            <Badge className="bg-green-500/10 text-green-600 border-0 text-xs">Configured</Badge>
-          )
-        ) : (
-          <Badge variant="secondary" className="text-xs flex items-center gap-1">
-            <AlertCircle className="w-3 h-3" />
-            Not configured
-          </Badge>
-        )}
-      </div>
-
-      {ca ? (
-        <>
-          <CADetailCard ca={ca} onEdit={onEdit} onRotate={onRotate} onDelete={onDelete} />
-          {/* When only a system CA is present, offer to generate a managed replacement */}
-          {isSystem && (
-            <div className="flex items-start gap-3 rounded-lg border border-amber-200 bg-amber-50 dark:border-amber-900 dark:bg-amber-950/30 p-3 text-xs text-amber-800 dark:text-amber-300">
-              <AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
-              <div className="flex-1">
-                <p className="font-semibold mb-1">Using server-configured CA</p>
-                <p>
-                  Certificates are being signed by a CA key loaded from the server configuration,
-                  not managed through this UI. Generate a managed key below to take full control
-                  of certificate issuance from Gatehouse.
-                </p>
-              </div>
-              <Button onClick={() => onCreateClick(caType)} size="sm" variant="outline" className="flex-shrink-0">
-                <Plus className="w-3 h-3 mr-1" />
-                Generate managed key
-              </Button>
-            </div>
-          )}
-        </>
-      ) : (
-        <Card className="border-dashed">
-          <CardContent className="flex flex-col items-center py-10 text-muted-foreground">
-            <ShieldAlert className="w-10 h-10 mb-3 opacity-30" />
-            <p className="text-sm font-medium mb-1">No {title} configured</p>
-            <p className="text-xs text-center mb-4 max-w-sm">{subtitle}</p>
-            <Button onClick={() => onCreateClick(caType)} size="sm" variant="outline">
-              <Plus className="w-4 h-4 mr-2" />
-              Generate {title}
-            </Button>
-          </CardContent>
-        </Card>
-      )}
-    </div>
-  );
-}
-
-// ─── Main Page ────────────────────────────────────────────────────────────────
+import { CASection } from "./ca/CASection";
+import {
+  CreateCADialog,
+  CreateCAForm,
+  EditCADialog,
+  EditCAForm,
+  RotateCADialog,
+  DeleteCADialog,
+} from "./ca/CADialogs";
 
 export default function CAsPage() {
   const params = useParams<{ orgId?: string }>();
@@ -303,44 +28,48 @@ export default function CAsPage() {
   const [cas, setCAs] = useState<OrgCA[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
-  // Create CA dialog
+  // ── Create dialog ──────────────────────────────────────────────────────────
   const [isCreateOpen, setIsCreateOpen] = useState(false);
   const [createCaType, setCreateCaType] = useState<"user" | "host">("user");
-  const [createForm, setCreateForm] = useState({
+  const [createForm, setCreateForm] = useState<CreateCAForm>({
     name: "",
     description: "",
-    key_type: "ed25519" as "ed25519" | "rsa" | "ecdsa",
+    key_type: "ed25519",
     default_cert_validity_hours: 8,
     max_cert_validity_hours: 720,
   });
   const [isCreating, setIsCreating] = useState(false);
   const [createError, setCreateError] = useState<string | null>(null);
 
-  // Edit CA dialog
+  // ── Edit dialog ────────────────────────────────────────────────────────────
   const [editingCA, setEditingCA] = useState<OrgCA | null>(null);
-  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
-  const [editFormData, setEditFormData] = useState({
+  const [isEditOpen, setIsEditOpen] = useState(false);
+  const [editForm, setEditForm] = useState<EditCAForm>({
     default_cert_validity_hours: 1,
     max_cert_validity_hours: 24,
   });
   const [isEditSaving, setIsEditSaving] = useState(false);
   const [editError, setEditError] = useState<string | null>(null);
 
-  // Rotate CA dialog
+  // ── Rotate dialog ──────────────────────────────────────────────────────────
   const [rotatingCA, setRotatingCA] = useState<OrgCA | null>(null);
-  const [isRotateDialogOpen, setIsRotateDialogOpen] = useState(false);
+  const [isRotateOpen, setIsRotateOpen] = useState(false);
   const [rotateKeyType, setRotateKeyType] = useState<"ed25519" | "rsa" | "ecdsa">("ed25519");
   const [rotateReason, setRotateReason] = useState("");
   const [isRotating, setIsRotating] = useState(false);
   const [rotateError, setRotateError] = useState<string | null>(null);
 
-  // Delete CA dialog
+  // ── Delete dialog ──────────────────────────────────────────────────────────
   const [deletingCA, setDeletingCA] = useState<OrgCA | null>(null);
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
 
+  // ── Load CAs ───────────────────────────────────────────────────────────────
   useEffect(() => {
-    if (!orgId) { setIsLoading(false); return; }
+    if (!orgId) {
+      setIsLoading(false);
+      return;
+    }
     (async () => {
       setIsLoading(true);
       try {
@@ -348,7 +77,11 @@ export default function CAsPage() {
         setCAs(data.cas);
       } catch (err) {
         if (err instanceof ApiError && err.code === 403) {
-          toast({ variant: "destructive", title: "Access denied", description: "Admin or owner role required." });
+          toast({
+            variant: "destructive",
+            title: "Access denied",
+            description: "Admin or owner role required.",
+          });
         } else {
           toast({ variant: "destructive", title: "Failed to load CAs" });
         }
@@ -361,6 +94,7 @@ export default function CAsPage() {
   const userCA = cas.find((c) => c.ca_type === "user") ?? null;
   const hostCA = cas.find((c) => c.ca_type === "host") ?? null;
 
+  // ── Handlers: Create ───────────────────────────────────────────────────────
   const handleOpenCreate = (caType: "user" | "host") => {
     setCreateCaType(caType);
     setCreateForm({
@@ -376,12 +110,17 @@ export default function CAsPage() {
 
   const handleCreateCA = async () => {
     if (!orgId) return;
-    if (!createForm.name.trim()) { setCreateError("Name is required"); return; }
+    if (!createForm.name.trim()) {
+      setCreateError("Name is required");
+      return;
+    }
     if (createForm.default_cert_validity_hours <= 0 || createForm.max_cert_validity_hours <= 0) {
-      setCreateError("Validity hours must be greater than 0"); return;
+      setCreateError("Validity hours must be greater than 0");
+      return;
     }
     if (createForm.default_cert_validity_hours > createForm.max_cert_validity_hours) {
-      setCreateError("Default validity must be ≤ maximum validity"); return;
+      setCreateError("Default validity must be ≤ maximum validity");
+      return;
     }
     setIsCreating(true);
     setCreateError(null);
@@ -401,39 +140,40 @@ export default function CAsPage() {
         description: result.ca.name,
       });
     } catch (err) {
-      if (err instanceof ApiError) {
-        setCreateError(err.message);
-      } else {
-        setCreateError("Failed to create CA — please try again");
-      }
+      setCreateError(
+        err instanceof ApiError ? err.message : "Failed to create CA — please try again",
+      );
     } finally {
       setIsCreating(false);
     }
   };
 
+  // ── Handlers: Edit ─────────────────────────────────────────────────────────
   const handleEditCA = (ca: OrgCA) => {
     setEditingCA(ca);
-    setEditFormData({
+    setEditForm({
       default_cert_validity_hours: ca.default_cert_validity_hours,
       max_cert_validity_hours: ca.max_cert_validity_hours,
     });
     setEditError(null);
-    setIsEditDialogOpen(true);
+    setIsEditOpen(true);
   };
 
   const handleSaveCA = async () => {
     if (!orgId || !editingCA) return;
-    if (editFormData.default_cert_validity_hours <= 0 || editFormData.max_cert_validity_hours <= 0) {
-      setEditError("Validity hours must be greater than 0"); return;
+    if (editForm.default_cert_validity_hours <= 0 || editForm.max_cert_validity_hours <= 0) {
+      setEditError("Validity hours must be greater than 0");
+      return;
     }
-    if (editFormData.default_cert_validity_hours > editFormData.max_cert_validity_hours) {
-      setEditError("Default validity must be less than or equal to maximum validity"); return;
+    if (editForm.default_cert_validity_hours > editForm.max_cert_validity_hours) {
+      setEditError("Default validity must be less than or equal to maximum validity");
+      return;
     }
     setIsEditSaving(true);
     try {
-      const updated = await api.organizations.updateCA(orgId, editingCA.id, editFormData);
+      const updated = await api.organizations.updateCA(orgId, editingCA.id, editForm);
       setCAs(cas.map((ca) => (ca.id === editingCA.id ? updated.ca : ca)));
-      setIsEditDialogOpen(false);
+      setIsEditOpen(false);
       setEditingCA(null);
       toast({ title: "CA configuration updated" });
     } catch (err) {
@@ -443,13 +183,13 @@ export default function CAsPage() {
     }
   };
 
-  // ── Rotate handlers ──
+  // ── Handlers: Rotate ───────────────────────────────────────────────────────
   const handleRotateCA = (ca: OrgCA) => {
     setRotatingCA(ca);
     setRotateKeyType((ca.key_type as "ed25519" | "rsa" | "ecdsa") || "ed25519");
     setRotateReason("");
     setRotateError(null);
-    setIsRotateDialogOpen(true);
+    setIsRotateOpen(true);
   };
 
   const handleConfirmRotate = async () => {
@@ -462,7 +202,7 @@ export default function CAsPage() {
         reason: rotateReason.trim() || undefined,
       });
       setCAs(cas.map((ca) => (ca.id === rotatingCA.id ? result.ca : ca)));
-      setIsRotateDialogOpen(false);
+      setIsRotateOpen(false);
       setRotatingCA(null);
       toast({
         title: "CA key rotated successfully",
@@ -475,10 +215,10 @@ export default function CAsPage() {
     }
   };
 
-  // ── Delete handlers ──
+  // ── Handlers: Delete ───────────────────────────────────────────────────────
   const handleDeleteCA = (ca: OrgCA) => {
     setDeletingCA(ca);
-    setIsDeleteDialogOpen(true);
+    setIsDeleteOpen(true);
   };
 
   const handleConfirmDelete = async () => {
@@ -487,22 +227,44 @@ export default function CAsPage() {
     try {
       await api.organizations.deleteCA(orgId, deletingCA.id);
       setCAs(cas.filter((ca) => ca.id !== deletingCA.id));
-      setIsDeleteDialogOpen(false);
+      setIsDeleteOpen(false);
       setDeletingCA(null);
-      toast({ title: "CA deleted", description: "Existing certificates remain valid until they expire." });
+      toast({
+        title: "CA deleted",
+        description: "Existing certificates remain valid until they expire.",
+      });
     } catch (err) {
-      toast({ variant: "destructive", title: "Failed to delete CA", description: err instanceof ApiError ? err.message : "" });
+      toast({
+        variant: "destructive",
+        title: "Failed to delete CA",
+        description: err instanceof ApiError ? err.message : "",
+      });
     } finally {
       setIsDeleting(false);
     }
-  };  return (
+  };
+
+  // Shared section event props
+  const sectionProps = {
+    onCreateClick: handleOpenCreate,
+    onEdit: handleEditCA,
+    onRotate: handleRotateCA,
+    onDelete: handleDeleteCA,
+  };
+
+  return (
     <div className="page-container">
+      {/* Page header */}
       <div className="page-header">
-        <div>
-          <h1 className="page-title">Certificate Authorities</h1>
-          <p className="page-description">
-            Manage your organization's SSH certificate authorities and access controls
-          </p>
+        <div className="flex items-start gap-3">
+          <Shield className="w-6 h-6 text-muted-foreground mt-0.5 flex-shrink-0" />
+          <div>
+            <h1 className="page-title">Certificate Authorities</h1>
+            <p className="page-description">
+              Manage your organization's SSH CAs — sign user and host certificates to eliminate
+              static <code>authorized_keys</code> files.
+            </p>
+          </div>
         </div>
       </div>
 
@@ -511,275 +273,99 @@ export default function CAsPage() {
           <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
         </div>
       ) : (
-        <div className="space-y-8">
-          <CASection caType="user" ca={userCA} onCreateClick={handleOpenCreate} onEdit={handleEditCA} onRotate={handleRotateCA} onDelete={handleDeleteCA} />
-          <div className="border-t" />
-          <CASection caType="host" ca={hostCA} onCreateClick={handleOpenCreate} onEdit={handleEditCA} onRotate={handleRotateCA} onDelete={handleDeleteCA} />
-        </div>
+        <Tabs defaultValue="user" className="space-y-4">
+          <TabsList className="h-auto gap-1">
+            <TabsTrigger value="user" className="flex items-center gap-2 px-4 py-2">
+              <User className="w-4 h-4" />
+              <span>User CA</span>
+              {userCA ? (
+                userCA.is_system ? (
+                  <Badge variant="secondary" className="text-xs ml-1">System</Badge>
+                ) : (
+                  <Badge className="bg-green-500/10 text-green-700 border-0 text-xs ml-1">
+                    Active
+                  </Badge>
+                )
+              ) : (
+                <Badge variant="outline" className="text-xs ml-1 text-muted-foreground">
+                  Not set
+                </Badge>
+              )}
+            </TabsTrigger>
+
+            <TabsTrigger value="host" className="flex items-center gap-2 px-4 py-2">
+              <Server className="w-4 h-4" />
+              <span>Host CA</span>
+              {hostCA ? (
+                hostCA.is_system ? (
+                  <Badge variant="secondary" className="text-xs ml-1">System</Badge>
+                ) : (
+                  <Badge className="bg-green-500/10 text-green-700 border-0 text-xs ml-1">
+                    Active
+                  </Badge>
+                )
+              ) : (
+                <Badge variant="outline" className="text-xs ml-1 text-muted-foreground">
+                  Not set
+                </Badge>
+              )}
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="user" className="mt-0">
+            <CASection caType="user" ca={userCA} {...sectionProps} />
+          </TabsContent>
+
+          <TabsContent value="host" className="mt-0">
+            <CASection caType="host" ca={hostCA} {...sectionProps} />
+          </TabsContent>
+        </Tabs>
       )}
 
-      {/* ── Edit CA Dialog ── */}
-      <Dialog open={isEditDialogOpen} onOpenChange={(open) => { setIsEditDialogOpen(open); if (!open) setEditError(null); }}>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle>Edit CA Configuration</DialogTitle>
-            <DialogDescription>
-              Update certificate validity settings for <strong>{editingCA?.name}</strong>
-            </DialogDescription>
-          </DialogHeader>
-          <div className="space-y-4 py-4">
-            {editError && (
-              <div className="p-3 rounded-lg bg-destructive/10 text-destructive text-sm flex items-start gap-2">
-                <AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
-                {editError}
-              </div>
-            )}
-            <div className="space-y-2">
-              <Label htmlFor="default-validity">Default Certificate Validity (hours)</Label>
-              <Input
-                id="default-validity"
-                type="number"
-                min="1"
-                value={editFormData.default_cert_validity_hours}
-                onChange={(e) => setEditFormData({ ...editFormData, default_cert_validity_hours: parseInt(e.target.value) || 1 })}
-                disabled={isEditSaving}
-              />
-              <p className="text-xs text-muted-foreground">Default validity period when issuing new certificates</p>
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="max-validity">Maximum Certificate Validity (hours)</Label>
-              <Input
-                id="max-validity"
-                type="number"
-                min="1"
-                value={editFormData.max_cert_validity_hours}
-                onChange={(e) => setEditFormData({ ...editFormData, max_cert_validity_hours: parseInt(e.target.value) || 1 })}
-                disabled={isEditSaving}
-              />
-              <p className="text-xs text-muted-foreground">Maximum allowed validity period for any certificate from this CA</p>
-            </div>
-          </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setIsEditDialogOpen(false)} disabled={isEditSaving}>Cancel</Button>
-            <Button onClick={handleSaveCA} disabled={isEditSaving}>
-              {isEditSaving && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
-              Save Changes
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      {/* ── Dialogs ─────────────────────────────────────────────────────────── */}
+      <CreateCADialog
+        open={isCreateOpen}
+        onOpenChange={(o) => { setIsCreateOpen(o); if (!o) setCreateError(null); }}
+        caType={createCaType}
+        form={createForm}
+        onFormChange={setCreateForm}
+        error={createError}
+        isLoading={isCreating}
+        onSubmit={handleCreateCA}
+      />
 
-      {/* ── Create CA Dialog ── */}
-      <Dialog open={isCreateOpen} onOpenChange={(open) => { setIsCreateOpen(open); if (!open) setCreateError(null); }}>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              {createCaType === "user" ? <User className="w-5 h-5" /> : <Server className="w-5 h-5" />}
-              Generate {createCaType === "user" ? "User" : "Host"} Signing Key
-            </DialogTitle>
-            <DialogDescription>
-              {createCaType === "user"
-                ? "Creates a key pair for signing SSH user certificates. The private key is stored securely and never exposed."
-                : "Creates a key pair for signing SSH host certificates, allowing clients to verify server identity."}
-            </DialogDescription>
-          </DialogHeader>
+      <EditCADialog
+        open={isEditOpen}
+        onOpenChange={(o) => { setIsEditOpen(o); if (!o) setEditError(null); }}
+        ca={editingCA}
+        form={editForm}
+        onFormChange={setEditForm}
+        error={editError}
+        isLoading={isEditSaving}
+        onSubmit={handleSaveCA}
+      />
 
-          <div className="space-y-4 py-4">
-            {createError && (
-              <div className="p-3 rounded-lg bg-destructive/10 text-destructive text-sm flex items-start gap-2">
-                <AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
-                <span>{createError}</span>
-              </div>
-            )}
+      <RotateCADialog
+        open={isRotateOpen}
+        onOpenChange={(o) => { setIsRotateOpen(o); if (!o) setRotateError(null); }}
+        ca={rotatingCA}
+        keyType={rotateKeyType}
+        onKeyTypeChange={setRotateKeyType}
+        reason={rotateReason}
+        onReasonChange={setRotateReason}
+        error={rotateError}
+        isLoading={isRotating}
+        onSubmit={handleConfirmRotate}
+      />
 
-            <div className="space-y-2">
-              <Label htmlFor="ca-name">Name <span className="text-destructive">*</span></Label>
-              <Input
-                id="ca-name"
-                placeholder={createCaType === "user" ? "User CA" : "Host CA"}
-                value={createForm.name}
-                onChange={(e) => setCreateForm({ ...createForm, name: e.target.value })}
-                disabled={isCreating}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="ca-description">Description</Label>
-              <Input
-                id="ca-description"
-                placeholder="Optional description"
-                value={createForm.description}
-                onChange={(e) => setCreateForm({ ...createForm, description: e.target.value })}
-                disabled={isCreating}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="ca-key-type">Key Algorithm</Label>
-              <Select
-                value={createForm.key_type}
-                onValueChange={(v) => setCreateForm({ ...createForm, key_type: v as "ed25519" | "rsa" | "ecdsa" })}
-                disabled={isCreating}
-              >
-                <SelectTrigger id="ca-key-type"><SelectValue /></SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="ed25519">Ed25519 (recommended)</SelectItem>
-                  <SelectItem value="ecdsa">ECDSA (P-521)</SelectItem>
-                  <SelectItem value="rsa">RSA-4096</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="grid grid-cols-2 gap-3">
-              <div className="space-y-2">
-                <Label htmlFor="ca-default-validity">Default validity (hours)</Label>
-                <Input
-                  id="ca-default-validity"
-                  type="number"
-                  min="1"
-                  value={createForm.default_cert_validity_hours}
-                  onChange={(e) => setCreateForm({ ...createForm, default_cert_validity_hours: parseInt(e.target.value) || 1 })}
-                  disabled={isCreating}
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="ca-max-validity">Max validity (hours)</Label>
-                <Input
-                  id="ca-max-validity"
-                  type="number"
-                  min="1"
-                  value={createForm.max_cert_validity_hours}
-                  onChange={(e) => setCreateForm({ ...createForm, max_cert_validity_hours: parseInt(e.target.value) || 1 })}
-                  disabled={isCreating}
-                />
-              </div>
-            </div>
-          </div>
-
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setIsCreateOpen(false)} disabled={isCreating}>Cancel</Button>
-            <Button onClick={handleCreateCA} disabled={isCreating}>
-              {isCreating ? (
-                <><Loader2 className="w-4 h-4 mr-2 animate-spin" />Generating key…</>
-              ) : (
-                <><Shield className="w-4 h-4 mr-2" />Generate Key</>
-              )}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {/* ── Rotate CA Dialog ── */}
-      <Dialog open={isRotateDialogOpen} onOpenChange={(open) => { setIsRotateDialogOpen(open); if (!open) setRotateError(null); }}>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              <RefreshCw className="w-5 h-5" />
-              Rotate CA Key
-            </DialogTitle>
-            <DialogDescription>
-              Generate a new key pair for <strong>{rotatingCA?.name}</strong>.
-              Previously-issued certificates remain valid until they expire, but all new
-              certificates will be signed with the new key. You must update
-              {rotatingCA?.ca_type === "user"
-                ? " TrustedUserCAKeys on your SSH servers"
-                : " @cert-authority in client known_hosts files"} after rotation.
-            </DialogDescription>
-          </DialogHeader>
-
-          <div className="space-y-4 py-4">
-            {rotateError && (
-              <div className="p-3 rounded-lg bg-destructive/10 text-destructive text-sm flex items-start gap-2">
-                <AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
-                <span>{rotateError}</span>
-              </div>
-            )}
-
-            {rotatingCA && (
-              <div className="rounded-lg bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-900 p-3 text-xs text-amber-800 dark:text-amber-300">
-                <p className="font-semibold mb-1">⚠ Important</p>
-                <p>
-                  Current fingerprint: <code className="font-mono">{rotatingCA.fingerprint}</code>
-                </p>
-                <p className="mt-1">
-                  After rotation, you <strong>must</strong> replace this fingerprint on every server /
-                  client that trusts this CA. Until updated, new certificates won't be accepted.
-                </p>
-              </div>
-            )}
-
-            <div className="space-y-2">
-              <Label htmlFor="rotate-key-type">New Key Algorithm</Label>
-              <Select
-                value={rotateKeyType}
-                onValueChange={(v) => setRotateKeyType(v as "ed25519" | "rsa" | "ecdsa")}
-                disabled={isRotating}
-              >
-                <SelectTrigger id="rotate-key-type"><SelectValue /></SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="ed25519">Ed25519 (recommended)</SelectItem>
-                  <SelectItem value="ecdsa">ECDSA (P-521)</SelectItem>
-                  <SelectItem value="rsa">RSA-4096</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="rotate-reason">Reason (optional)</Label>
-              <Input
-                id="rotate-reason"
-                placeholder="e.g. Suspected key compromise, Scheduled rotation"
-                value={rotateReason}
-                onChange={(e) => setRotateReason(e.target.value)}
-                disabled={isRotating}
-              />
-            </div>
-          </div>
-
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setIsRotateDialogOpen(false)} disabled={isRotating}>
-              Cancel
-            </Button>
-            <Button onClick={handleConfirmRotate} disabled={isRotating} variant="destructive">
-              {isRotating ? (
-                <><Loader2 className="w-4 h-4 mr-2 animate-spin" />Rotating…</>
-              ) : (
-                <><RefreshCw className="w-4 h-4 mr-2" />Rotate Key</>
-              )}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {/* ── Delete CA Confirmation ── */}
-      <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Delete Certificate Authority?</AlertDialogTitle>
-            <AlertDialogDescription>
-              This will permanently deactivate <strong>{deletingCA?.name}</strong>.
-              No new certificates can be signed with this CA after deletion.
-              Existing certificates remain valid until they expire.
-              {deletingCA?.active_certs ? (
-                <span className="block mt-2 font-semibold text-amber-600 dark:text-amber-400">
-                  ⚠ This CA has {deletingCA.active_certs} active certificate{deletingCA.active_certs !== 1 ? "s" : ""}.
-                </span>
-              ) : null}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleConfirmDelete}
-              disabled={isDeleting}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-            >
-              {isDeleting && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
-              Delete CA
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <DeleteCADialog
+        open={isDeleteOpen}
+        onOpenChange={setIsDeleteOpen}
+        ca={deletingCA}
+        isLoading={isDeleting}
+        onConfirm={handleConfirmDelete}
+      />
     </div>
   );
 }
+
diff --git a/src/pages/org/ca/CADetailCard.tsx b/src/pages/org/ca/CADetailCard.tsx
new file mode 100644
index 0000000..9ee3b06
--- /dev/null
+++ b/src/pages/org/ca/CADetailCard.tsx
@@ -0,0 +1,236 @@
+import {
+  MoreHorizontal,
+  RefreshCw,
+  Server,
+  ServerCog,
+  Settings,
+  ShieldOff,
+  Terminal,
+  User,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Textarea } from "@/components/ui/textarea";
+import { OrgCA } from "@/lib/api";
+import { formatDate } from "./utils";
+import { CopyButton } from "./CopyButton";
+
+interface CADetailCardProps {
+  ca: OrgCA;
+  onEdit: (ca: OrgCA) => void;
+  onRotate: (ca: OrgCA) => void;
+  onDelete: (ca: OrgCA) => void;
+}
+
+export function CADetailCard({ ca, onEdit, onRotate, onDelete }: CADetailCardProps) {
+  const isUser = ca.ca_type === "user";
+  const isSystem = !!ca.is_system;
+
+  // ── User CA: server trusts this public key so it accepts user certs ──────
+  const userCaServerSnippet = `# On each SSH server — trust Gatehouse-issued user certificates:
+echo '${ca.public_key.trim()}' >> /etc/ssh/trusted_user_ca_keys
+
+# /etc/ssh/sshd_config  (add once, then reload sshd):
+TrustedUserCAKeys /etc/ssh/trusted_user_ca_keys
+AuthorizedPrincipalsFile /etc/ssh/auth_principals/%u
+# Create /etc/ssh/auth_principals/<unix-user> containing one principal per line.`;
+
+  // ── Host CA: clients trust this public key so they can verify server certs ─
+  const hostCaClientSnippet = `# On SSH clients — trust host certificates signed by this CA:
+# Add to ~/.ssh/known_hosts  (or /etc/ssh/ssh_known_hosts for system-wide):
+@cert-authority * ${ca.public_key.trim()}
+
+# ─── Server side (separate step) ────────────────────────────────────────────
+# 1. Collect the server's HOST public key:
+#    cat /etc/ssh/ssh_host_ed25519_key.pub
+# 2. Submit it to Gatehouse → "Issue Host Certificate" to get a signed cert.
+# 3. Install the cert on the server:
+#    /etc/ssh/sshd_config:
+#    HostKey         /etc/ssh/ssh_host_ed25519_key
+#    HostCertificate /etc/ssh/ssh_host_ed25519_key-cert.pub
+# 4. Verify the cert (NOT this CA key):
+#    ssh-keygen -L -f /etc/ssh/ssh_host_ed25519_key-cert.pub
+#    ↳ Type must be: ssh-ed25519-cert-v01@openssh.com host certificate`;
+
+  const sshConfig = isUser ? userCaServerSnippet : hostCaClientSnippet;
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <CardTitle className="text-base flex items-center gap-2 flex-wrap">
+              {isSystem ? (
+                <ServerCog className="w-4 h-4 flex-shrink-0" />
+              ) : isUser ? (
+                <User className="w-4 h-4 flex-shrink-0" />
+              ) : (
+                <Server className="w-4 h-4 flex-shrink-0" />
+              )}
+              <span className="truncate">{ca.name}</span>
+              {isSystem ? (
+                <Badge variant="secondary" className="text-xs flex items-center gap-1">
+                  <ServerCog className="w-3 h-3" />
+                  System
+                </Badge>
+              ) : ca.is_active ? (
+                <Badge className="bg-green-500/10 text-green-600 border-0 text-xs">Active</Badge>
+              ) : (
+                <Badge variant="secondary" className="text-xs">Inactive</Badge>
+              )}
+            </CardTitle>
+            {ca.description && (
+              <CardDescription className="mt-1">{ca.description}</CardDescription>
+            )}
+          </div>
+
+          {/* Right side: key-type badge + actions menu */}
+          <div className="flex items-center gap-1 flex-shrink-0">
+            <Badge variant="outline" className="text-xs font-mono">{ca.key_type}</Badge>
+
+            {/* ⋯ actions — only for non-system CAs */}
+            {!isSystem && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" size="icon" className="h-7 w-7">
+                    <MoreHorizontal className="w-4 h-4" />
+                    <span className="sr-only">CA actions</span>
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-44">
+                  <DropdownMenuItem onClick={() => onEdit(ca)}>
+                    <Settings className="w-3.5 h-3.5 mr-2" />
+                    Edit configuration
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => onRotate(ca)}>
+                    <RefreshCw className="w-3.5 h-3.5 mr-2" />
+                    Rotate key
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    onClick={() => onDelete(ca)}
+                    className="text-destructive focus:text-destructive"
+                  >
+                    <ShieldOff className="w-3.5 h-3.5 mr-2" />
+                    Delete CA
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        {/* Stats row — hidden for system CAs */}
+        {!isSystem && (
+          <div className="grid grid-cols-4 gap-3 text-center">
+            <div className="p-2 bg-muted rounded-lg">
+              <p className="text-lg font-semibold">{ca.active_certs}</p>
+              <p className="text-xs text-muted-foreground">Active certs</p>
+            </div>
+            <div className="p-2 bg-muted rounded-lg">
+              <p className="text-lg font-semibold">{ca.total_certs}</p>
+              <p className="text-xs text-muted-foreground">Total issued</p>
+            </div>
+            <div className="p-2 bg-muted rounded-lg">
+              <p className="text-lg font-semibold">{ca.default_cert_validity_hours}h</p>
+              <p className="text-xs text-muted-foreground">Default validity</p>
+            </div>
+            <div className="p-2 bg-muted rounded-lg">
+              <p className="text-lg font-semibold">{ca.next_serial_number ?? "—"}</p>
+              <p className="text-xs text-muted-foreground">Next serial</p>
+            </div>
+          </div>
+        )}
+
+        {/* Fingerprint — with copy button */}
+        <div>
+          <p className="text-xs text-muted-foreground mb-1">Fingerprint</p>
+          <div className="flex items-center gap-1">
+            <code className="text-xs font-mono bg-muted px-2 py-1 rounded break-all flex-1">
+              {ca.fingerprint}
+            </code>
+            <CopyButton text={ca.fingerprint} />
+          </div>
+        </div>
+
+        {/* Public key */}
+        <div>
+          <div className="flex items-center justify-between mb-1">
+            <div>
+              <p className="text-xs font-medium">
+                {isUser ? "User CA public key" : "Host CA public key"}
+              </p>
+              <p className="text-xs text-muted-foreground">
+                {isUser
+                  ? "Distribute to SSH servers → TrustedUserCAKeys"
+                  : "Distribute to SSH clients → known_hosts @cert-authority (NOT HostCertificate)"}
+              </p>
+            </div>
+            <CopyButton text={ca.public_key} />
+          </div>
+          <Textarea readOnly value={ca.public_key} className="font-mono text-xs min-h-[60px]" />
+        </div>
+
+        {/* Setup instructions — collapsible */}
+        <Accordion type="single" collapsible className="border rounded-lg px-1">
+          <AccordionItem value="setup" className="border-none">
+            <AccordionTrigger className="py-2 text-xs font-semibold hover:no-underline">
+              <span className="flex items-center gap-1.5">
+                <Terminal className="w-3.5 h-3.5" />
+                {isUser
+                  ? "Server setup — trust Gatehouse user certificates"
+                  : "Client setup — trust Gatehouse host certificates"}
+              </span>
+            </AccordionTrigger>
+            <AccordionContent className="pb-3">
+              {!isUser && (
+                <div className="mb-2 rounded border border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950/40 px-2 py-1.5 text-xs text-amber-800 dark:text-amber-300">
+                  <strong>Two separate steps:</strong> (1) Put this CA public key in client{" "}
+                  <code className="font-mono">known_hosts</code>. (2) Issue a host certificate
+                  for each server via Gatehouse and install it as{" "}
+                  <code className="font-mono">HostCertificate</code>.
+                </div>
+              )}
+              <pre className="text-xs font-mono whitespace-pre-wrap break-all bg-muted rounded p-3">
+                {sshConfig}
+              </pre>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+
+        {/* Metadata */}
+        <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
+          {ca.created_at && <span>Created {formatDate(ca.created_at)}</span>}
+          {ca.rotated_at && (
+            <span>
+              Key rotated {formatDate(ca.rotated_at)}
+              {ca.rotation_reason && <> — {ca.rotation_reason}</>}
+            </span>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/pages/org/ca/CADialogs.tsx b/src/pages/org/ca/CADialogs.tsx
new file mode 100644
index 0000000..d713b01
--- /dev/null
+++ b/src/pages/org/ca/CADialogs.tsx
@@ -0,0 +1,468 @@
+import { Loader2, AlertCircle, Shield, User, Server, RefreshCw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { OrgCA } from "@/lib/api";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Create CA Dialog
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface CreateCAForm {
+  name: string;
+  description: string;
+  key_type: "ed25519" | "rsa" | "ecdsa";
+  default_cert_validity_hours: number;
+  max_cert_validity_hours: number;
+}
+
+interface CreateCADialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  caType: "user" | "host";
+  form: CreateCAForm;
+  onFormChange: (form: CreateCAForm) => void;
+  error: string | null;
+  isLoading: boolean;
+  onSubmit: () => void;
+}
+
+export function CreateCADialog({
+  open,
+  onOpenChange,
+  caType,
+  form,
+  onFormChange,
+  error,
+  isLoading,
+  onSubmit,
+}: CreateCADialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={(o) => { onOpenChange(o); }}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            {caType === "user" ? <User className="w-5 h-5" /> : <Server className="w-5 h-5" />}
+            Generate {caType === "user" ? "User" : "Host"} Signing Key
+          </DialogTitle>
+          <DialogDescription>
+            {caType === "user"
+              ? "Creates a key pair for signing SSH user certificates. The private key is stored securely and never exposed."
+              : "Creates a key pair for signing SSH host certificates, allowing clients to verify server identity."}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {error && (
+            <div className="p-3 rounded-lg bg-destructive/10 text-destructive text-sm flex items-start gap-2">
+              <AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
+              <span>{error}</span>
+            </div>
+          )}
+
+          <div className="space-y-2">
+            <Label htmlFor="ca-name">
+              Name <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="ca-name"
+              placeholder={caType === "user" ? "User CA" : "Host CA"}
+              value={form.name}
+              onChange={(e) => onFormChange({ ...form, name: e.target.value })}
+              disabled={isLoading}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="ca-description">Description</Label>
+            <Input
+              id="ca-description"
+              placeholder="Optional description"
+              value={form.description}
+              onChange={(e) => onFormChange({ ...form, description: e.target.value })}
+              disabled={isLoading}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="ca-key-type">Key Algorithm</Label>
+            <Select
+              value={form.key_type}
+              onValueChange={(v) =>
+                onFormChange({ ...form, key_type: v as "ed25519" | "rsa" | "ecdsa" })
+              }
+              disabled={isLoading}
+            >
+              <SelectTrigger id="ca-key-type">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="ed25519">Ed25519 (recommended)</SelectItem>
+                <SelectItem value="ecdsa">ECDSA (P-521)</SelectItem>
+                <SelectItem value="rsa">RSA-4096</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-2">
+              <Label htmlFor="ca-default-validity">Default validity (hours)</Label>
+              <Input
+                id="ca-default-validity"
+                type="number"
+                min="1"
+                value={form.default_cert_validity_hours}
+                onChange={(e) =>
+                  onFormChange({
+                    ...form,
+                    default_cert_validity_hours: parseInt(e.target.value) || 1,
+                  })
+                }
+                disabled={isLoading}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="ca-max-validity">Max validity (hours)</Label>
+              <Input
+                id="ca-max-validity"
+                type="number"
+                min="1"
+                value={form.max_cert_validity_hours}
+                onChange={(e) =>
+                  onFormChange({
+                    ...form,
+                    max_cert_validity_hours: parseInt(e.target.value) || 1,
+                  })
+                }
+                disabled={isLoading}
+              />
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button onClick={onSubmit} disabled={isLoading}>
+            {isLoading ? (
+              <>
+                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                Generating key…
+              </>
+            ) : (
+              <>
+                <Shield className="w-4 h-4 mr-2" />
+                Generate Key
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Edit CA Dialog
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface EditCAForm {
+  default_cert_validity_hours: number;
+  max_cert_validity_hours: number;
+}
+
+interface EditCADialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  ca: OrgCA | null;
+  form: EditCAForm;
+  onFormChange: (form: EditCAForm) => void;
+  error: string | null;
+  isLoading: boolean;
+  onSubmit: () => void;
+}
+
+export function EditCADialog({
+  open,
+  onOpenChange,
+  ca,
+  form,
+  onFormChange,
+  error,
+  isLoading,
+  onSubmit,
+}: EditCADialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Edit CA Configuration</DialogTitle>
+          <DialogDescription>
+            Update certificate validity settings for <strong>{ca?.name}</strong>
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {error && (
+            <div className="p-3 rounded-lg bg-destructive/10 text-destructive text-sm flex items-start gap-2">
+              <AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
+              {error}
+            </div>
+          )}
+
+          <div className="space-y-2">
+            <Label htmlFor="default-validity">Default Certificate Validity (hours)</Label>
+            <Input
+              id="default-validity"
+              type="number"
+              min="1"
+              value={form.default_cert_validity_hours}
+              onChange={(e) =>
+                onFormChange({
+                  ...form,
+                  default_cert_validity_hours: parseInt(e.target.value) || 1,
+                })
+              }
+              disabled={isLoading}
+            />
+            <p className="text-xs text-muted-foreground">
+              Default validity period when issuing new certificates
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="max-validity">Maximum Certificate Validity (hours)</Label>
+            <Input
+              id="max-validity"
+              type="number"
+              min="1"
+              value={form.max_cert_validity_hours}
+              onChange={(e) =>
+                onFormChange({
+                  ...form,
+                  max_cert_validity_hours: parseInt(e.target.value) || 1,
+                })
+              }
+              disabled={isLoading}
+            />
+            <p className="text-xs text-muted-foreground">
+              Maximum allowed validity period for any certificate from this CA
+            </p>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button onClick={onSubmit} disabled={isLoading}>
+            {isLoading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+            Save Changes
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Rotate CA Dialog
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface RotateCADialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  ca: OrgCA | null;
+  keyType: "ed25519" | "rsa" | "ecdsa";
+  onKeyTypeChange: (kt: "ed25519" | "rsa" | "ecdsa") => void;
+  reason: string;
+  onReasonChange: (r: string) => void;
+  error: string | null;
+  isLoading: boolean;
+  onSubmit: () => void;
+}
+
+export function RotateCADialog({
+  open,
+  onOpenChange,
+  ca,
+  keyType,
+  onKeyTypeChange,
+  reason,
+  onReasonChange,
+  error,
+  isLoading,
+  onSubmit,
+}: RotateCADialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <RefreshCw className="w-5 h-5" />
+            Rotate CA Key
+          </DialogTitle>
+          <DialogDescription>
+            Generate a new key pair for <strong>{ca?.name}</strong>. Previously-issued
+            certificates remain valid until they expire, but all new certificates will be signed
+            with the new key. You must update{" "}
+            {ca?.ca_type === "user"
+              ? "TrustedUserCAKeys on your SSH servers"
+              : "@cert-authority in client known_hosts files"}{" "}
+            after rotation.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {error && (
+            <div className="p-3 rounded-lg bg-destructive/10 text-destructive text-sm flex items-start gap-2">
+              <AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
+              <span>{error}</span>
+            </div>
+          )}
+
+          {ca && (
+            <div className="rounded-lg bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-900 p-3 text-xs text-amber-800 dark:text-amber-300">
+              <p className="font-semibold mb-1">⚠ Important</p>
+              <p>
+                Current fingerprint:{" "}
+                <code className="font-mono">{ca.fingerprint}</code>
+              </p>
+              <p className="mt-1">
+                After rotation, you <strong>must</strong> replace this fingerprint on every
+                server / client that trusts this CA. Until updated, new certificates won't be
+                accepted.
+              </p>
+            </div>
+          )}
+
+          <div className="space-y-2">
+            <Label htmlFor="rotate-key-type">New Key Algorithm</Label>
+            <Select
+              value={keyType}
+              onValueChange={(v) => onKeyTypeChange(v as "ed25519" | "rsa" | "ecdsa")}
+              disabled={isLoading}
+            >
+              <SelectTrigger id="rotate-key-type">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="ed25519">Ed25519 (recommended)</SelectItem>
+                <SelectItem value="ecdsa">ECDSA (P-521)</SelectItem>
+                <SelectItem value="rsa">RSA-4096</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="rotate-reason">Reason (optional)</Label>
+            <Input
+              id="rotate-reason"
+              placeholder="e.g. Suspected key compromise, Scheduled rotation"
+              value={reason}
+              onChange={(e) => onReasonChange(e.target.value)}
+              disabled={isLoading}
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button onClick={onSubmit} disabled={isLoading} variant="destructive">
+            {isLoading ? (
+              <>
+                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                Rotating…
+              </>
+            ) : (
+              <>
+                <RefreshCw className="w-4 h-4 mr-2" />
+                Rotate Key
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Delete CA Dialog
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface DeleteCADialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  ca: OrgCA | null;
+  isLoading: boolean;
+  onConfirm: () => void;
+}
+
+export function DeleteCADialog({
+  open,
+  onOpenChange,
+  ca,
+  isLoading,
+  onConfirm,
+}: DeleteCADialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete Certificate Authority?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will permanently deactivate <strong>{ca?.name}</strong>. No new certificates
+            can be signed with this CA after deletion. Existing certificates remain valid until
+            they expire.
+            {ca?.active_certs ? (
+              <span className="block mt-2 font-semibold text-amber-600 dark:text-amber-400">
+                ⚠ This CA has {ca.active_certs} active certificate
+                {ca.active_certs !== 1 ? "s" : ""}.
+              </span>
+            ) : null}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isLoading}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={onConfirm}
+            disabled={isLoading}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            {isLoading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+            Delete CA
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/src/pages/org/ca/CASection.tsx b/src/pages/org/ca/CASection.tsx
new file mode 100644
index 0000000..426fd53
--- /dev/null
+++ b/src/pages/org/ca/CASection.tsx
@@ -0,0 +1,161 @@
+import { AlertCircle, Plus, Server, ServerCog, ShieldAlert, User } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { OrgCA } from "@/lib/api";
+import { CADetailCard } from "./CADetailCard";
+import { IssueHostCertPanel } from "./IssueHostCertPanel";
+
+interface CASectionProps {
+  caType: "user" | "host";
+  ca: OrgCA | null;
+  onCreateClick: (caType: "user" | "host") => void;
+  onEdit: (ca: OrgCA) => void;
+  onRotate: (ca: OrgCA) => void;
+  onDelete: (ca: OrgCA) => void;
+}
+
+const SECTION_META = {
+  user: {
+    title: "User CA",
+    subtitle:
+      "Signs SSH user certificates. Servers trust users who present a valid cert by adding this CA's public key to TrustedUserCAKeys.",
+    emptyDescription:
+      "No User CA configured. Generate a key pair to start issuing SSH user certificates.",
+  },
+  host: {
+    title: "Host CA",
+    subtitle:
+      "Signs SSH host certificates. Clients trust servers whose cert is signed by this CA. The CA public key goes in the client's known_hosts — not HostCertificate (that is issued per-server separately).",
+    emptyDescription:
+      "No Host CA configured. Generate a key pair to start issuing SSH host certificates.",
+  },
+} as const;
+
+// ── Tiny numbered step label used in the Host CA flow ────────────────────────
+function StepLabel({ n, label }: { n: number; label: string }) {
+  return (
+    <div className="flex items-center gap-2">
+      <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary text-[10px] font-bold flex-shrink-0">
+        {n}
+      </span>
+      <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+        {label}
+      </span>
+    </div>
+  );
+}
+
+export function CASection({
+  caType,
+  ca,
+  onCreateClick,
+  onEdit,
+  onRotate,
+  onDelete,
+}: CASectionProps) {
+  const isUser = caType === "user";
+  const { title, subtitle, emptyDescription } = SECTION_META[caType];
+  const Icon = isUser ? User : Server;
+  const isSystem = !!ca?.is_system;
+
+  return (
+    <div className="space-y-4">
+      {/* Section header */}
+      <div className="flex items-center justify-between gap-2 flex-wrap">
+        <div className="flex items-center gap-2">
+          <Icon className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+          <div>
+            <h2 className="text-sm font-semibold leading-tight">{title}</h2>
+            {/* Only show the verbose subtitle when there's no CA yet */}
+            {!ca && (
+              <p className="text-xs text-muted-foreground max-w-prose">{subtitle}</p>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {ca ? (
+            isSystem ? (
+              <Badge variant="secondary" className="text-xs flex items-center gap-1">
+                <ServerCog className="w-3 h-3" />
+                System (read-only)
+              </Badge>
+            ) : (
+              <Badge className="bg-green-500/10 text-green-600 border-0 text-xs">Configured</Badge>
+            )
+          ) : (
+            <Badge variant="secondary" className="text-xs flex items-center gap-1">
+              <AlertCircle className="w-3 h-3" />
+              Not configured
+            </Badge>
+          )}
+        </div>
+      </div>
+
+      {/* Content */}
+      {ca ? (
+        <div className="space-y-6">
+          {isUser ? (
+            /* ── User CA: single card, no numbered steps needed ─────────── */
+            <CADetailCard ca={ca} onEdit={onEdit} onRotate={onRotate} onDelete={onDelete} />
+          ) : (
+            /* ── Host CA: two explicit numbered steps ────────────────────── */
+            <>
+              {/* Step 1 — CA key → clients' known_hosts */}
+              <div className="space-y-2">
+                <StepLabel n={1} label="Distribute CA key to clients" />
+                <CADetailCard ca={ca} onEdit={onEdit} onRotate={onRotate} onDelete={onDelete} />
+              </div>
+
+              {/* Step 2 — sign each server's host public key */}
+              {!isSystem && (
+                <div className="space-y-2">
+                  <StepLabel n={2} label="Sign each server's host key" />
+                  <IssueHostCertPanel ca={ca} />
+                </div>
+              )}
+            </>
+          )}
+
+          {/* System CA upgrade prompt */}
+          {isSystem && (
+            <div className="flex items-start gap-3 rounded-lg border border-amber-200 bg-amber-50 dark:border-amber-900 dark:bg-amber-950/30 p-3 text-xs text-amber-800 dark:text-amber-300">
+              <AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
+              <div className="flex-1">
+                <p className="font-semibold mb-1">Using server-configured CA</p>
+                <p>
+                  Certificates are being signed by a CA key loaded from the server
+                  configuration, not managed through this UI. Generate a managed key below to
+                  take full control of certificate issuance from Gatehouse.
+                </p>
+              </div>
+              <Button
+                onClick={() => onCreateClick(caType)}
+                size="sm"
+                variant="outline"
+                className="flex-shrink-0"
+              >
+                <Plus className="w-3 h-3 mr-1" />
+                Generate managed key
+              </Button>
+            </div>
+          )}
+        </div>
+      ) : (
+        /* Empty state */
+        <Card className="border-dashed">
+          <CardContent className="flex flex-col items-center py-10 text-muted-foreground">
+            <ShieldAlert className="w-10 h-10 mb-3 opacity-30" />
+            <p className="text-sm font-medium mb-1">No {title} configured</p>
+            <p className="text-xs text-center mb-4 max-w-sm">{emptyDescription}</p>
+            <Button onClick={() => onCreateClick(caType)} size="sm" variant="outline">
+              <Plus className="w-4 h-4 mr-2" />
+              Generate {title}
+            </Button>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/org/ca/CopyButton.tsx b/src/pages/org/ca/CopyButton.tsx
new file mode 100644
index 0000000..a0680fe
--- /dev/null
+++ b/src/pages/org/ca/CopyButton.tsx
@@ -0,0 +1,40 @@
+import { useState } from "react";
+import { Copy, CheckCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useToast } from "@/hooks/use-toast";
+
+interface CopyButtonProps {
+  text: string;
+}
+
+export function CopyButton({ text }: CopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+  const { toast } = useToast();
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      toast({ title: "Copied to clipboard" });
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      toast({ variant: "destructive", title: "Copy failed" });
+    }
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className="h-8 w-8 flex-shrink-0"
+      onClick={handleCopy}
+      title="Copy to clipboard"
+    >
+      {copied ? (
+        <CheckCircle className="w-4 h-4 text-green-500" />
+      ) : (
+        <Copy className="w-4 h-4" />
+      )}
+    </Button>
+  );
+}
diff --git a/src/pages/org/ca/IssueHostCertPanel.tsx b/src/pages/org/ca/IssueHostCertPanel.tsx
new file mode 100644
index 0000000..ad2f2b6
--- /dev/null
+++ b/src/pages/org/ca/IssueHostCertPanel.tsx
@@ -0,0 +1,344 @@
+import { useState } from "react";
+import {
+  AlertCircle,
+  CheckCircle,
+  ChevronDown,
+  ChevronRight,
+  FileKey,
+  HelpCircle,
+  Loader2,
+  Terminal,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/hooks/use-toast";
+import { api, ApiError, OrgCA } from "@/lib/api";
+import { classifySshKeyMaterial } from "./utils";
+import { CopyButton } from "./CopyButton";
+
+interface IssueHostCertPanelProps {
+  ca: OrgCA;
+}
+
+// Preset validity options: [label, hours]
+const VALIDITY_PRESETS: [string, number][] = [
+  ["1d", 24],
+  ["7d", 168],
+  ["30d", 720],
+  ["1y", 8760],
+];
+
+export function IssueHostCertPanel({ ca }: IssueHostCertPanelProps) {
+  const { toast } = useToast();
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [showHowItWorks, setShowHowItWorks] = useState(false);
+  const [hostPubKey, setHostPubKey] = useState("");
+  const [principals, setPrincipals] = useState("");
+  const [validityHours, setValidityHours] = useState("720");
+  const [isIssuing, setIsIssuing] = useState(false);
+  const [issueError, setIssueError] = useState<string | null>(null);
+  const [hostCert, setHostCert] = useState<string | null>(null);
+  const [keyWarning, setKeyWarning] = useState<string | null>(null);
+
+  const handlePubKeyChange = (value: string) => {
+    setHostPubKey(value);
+    setIssueError(null);
+    setKeyWarning(null);
+    if (!value.trim()) return;
+    const kind = classifySshKeyMaterial(value.trim());
+    if (kind === "certificate") {
+      setKeyWarning(
+        "⚠ This looks like a certificate (ssh-…-cert-v01@openssh.com), not a public key. " +
+          "Paste the server's host PUBLIC key (from /etc/ssh/ssh_host_ed25519_key.pub), not an existing certificate.",
+      );
+    } else if (kind === "private_key") {
+      setKeyWarning("⚠ This looks like a PRIVATE key. Never paste private keys here. Use the .pub file.");
+    } else if (kind === "unknown") {
+      setKeyWarning("⚠ Unrecognised key format. Expected: ssh-ed25519 AAAA… or ecdsa-sha2-nistp256 AAAA…");
+    }
+  };
+
+  const handleIssue = async () => {
+    setIssueError(null);
+    setHostCert(null);
+    const kind = classifySshKeyMaterial(hostPubKey.trim());
+    if (kind === "certificate") {
+      setIssueError(
+        "You pasted a certificate, not a host public key. " +
+          "Get the server's host public key: cat /etc/ssh/ssh_host_ed25519_key.pub",
+      );
+      return;
+    }
+    if (kind === "private_key") {
+      setIssueError("Private keys must never be pasted here. Use the .pub file.");
+      return;
+    }
+    const principalList = principals
+      .split(/[\s,]+/)
+      .map((p) => p.trim())
+      .filter(Boolean);
+    if (principalList.length === 0) {
+      setIssueError("At least one principal (hostname/FQDN) is required.");
+      return;
+    }
+    const hours = parseInt(validityHours, 10);
+    if (!hours || hours < 1) {
+      setIssueError("Validity must be a positive number of hours.");
+      return;
+    }
+    setIsIssuing(true);
+    try {
+      const result = await api.ssh.signHostCert(hostPubKey.trim(), principalList, hours, ca.id);
+      setHostCert(result.certificate);
+      toast({ title: "Host certificate issued", description: `Serial #${result.serial}` });
+    } catch (err) {
+      setIssueError(
+        err instanceof ApiError ? err.message : "Failed to issue host certificate",
+      );
+    } finally {
+      setIsIssuing(false);
+    }
+  };
+
+  const serverInstallSnippet = hostCert
+    ? `# 1. Copy the certificate to the server:
+cat > /etc/ssh/ssh_host_ed25519_key-cert.pub << 'CERT'
+${hostCert.trim()}
+CERT
+
+# 2. /etc/ssh/sshd_config  (ensure these two lines exist):
+HostKey         /etc/ssh/ssh_host_ed25519_key
+HostCertificate /etc/ssh/ssh_host_ed25519_key-cert.pub
+
+# 3. Reload sshd:
+systemctl reload sshd
+
+# 4. Verify the cert (must show type = host certificate):
+ssh-keygen -L -f /etc/ssh/ssh_host_ed25519_key-cert.pub`
+    : "";
+
+  return (
+    <Card className="border-dashed border-blue-300 dark:border-blue-700">
+      <CardHeader
+        className="py-3 cursor-pointer select-none"
+        onClick={() => setIsExpanded((v) => !v)}
+      >
+        <CardTitle className="text-sm flex items-center gap-2">
+          <FileKey className="w-4 h-4 text-blue-600 dark:text-blue-400" />
+          Issue Host Certificate
+          <span className="ml-auto">
+            {isExpanded ? (
+              <ChevronDown className="w-4 h-4" />
+            ) : (
+              <ChevronRight className="w-4 h-4" />
+            )}
+          </span>
+        </CardTitle>
+        <CardDescription className="text-xs">
+          Paste a server's host public key to receive a signed certificate to install as{" "}
+          <code>HostCertificate</code> in <code>sshd_config</code>.
+        </CardDescription>
+      </CardHeader>
+
+      {isExpanded && (
+        <CardContent className="space-y-4 pt-0">
+          {/* ── "How it works" — collapsed by default ──────────────── */}
+          <div>
+            <button
+              type="button"
+              onClick={() => setShowHowItWorks((v) => !v)}
+              className="flex items-center gap-1.5 text-xs text-blue-600 dark:text-blue-400 hover:underline focus:outline-none"
+            >
+              <HelpCircle className="w-3.5 h-3.5" />
+              How host certificates work
+              {showHowItWorks ? (
+                <ChevronDown className="w-3 h-3" />
+              ) : (
+                <ChevronRight className="w-3 h-3" />
+              )}
+            </button>
+
+            {showHowItWorks && (
+              <div className="mt-2 rounded-lg border border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-950/30 p-3 text-xs text-blue-800 dark:text-blue-300 space-y-1.5">
+                <p>
+                  <strong>Step 1 (done above):</strong> Distribute the Host CA public key to SSH
+                  clients via <code className="font-mono">@cert-authority</code> in{" "}
+                  <code className="font-mono">known_hosts</code>.
+                </p>
+                <p>
+                  <strong>Step 2 (here):</strong> For each server, collect its host public key,
+                  paste it below, and Gatehouse will sign it. Install the resulting certificate
+                  as <code className="font-mono">HostCertificate</code> in{" "}
+                  <code className="font-mono">sshd_config</code>.
+                </p>
+                <p className="text-amber-700 dark:text-amber-400">
+                  ⚠ Do <strong>not</strong> put the CA public key from Step 1 into{" "}
+                  <code className="font-mono">HostCertificate</code> — that directive requires a
+                  signed certificate, not a CA public key.
+                </p>
+              </div>
+            )}
+          </div>
+
+          {issueError && (
+            <div className="rounded-md bg-destructive/10 text-destructive text-sm p-3 flex items-start gap-2">
+              <AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
+              {issueError}
+            </div>
+          )}
+
+          {!hostCert ? (
+            <>
+              {/* Host public key */}
+              <div className="space-y-1.5">
+                <Label className="text-sm">
+                  Server host public key{" "}
+                  <span className="ml-1 font-normal text-muted-foreground">
+                    (<code>/etc/ssh/ssh_host_ed25519_key.pub</code>)
+                  </span>
+                </Label>
+                <p className="text-xs text-muted-foreground">
+                  Run{" "}
+                  <code className="font-mono bg-muted px-1 rounded">
+                    cat /etc/ssh/ssh_host_ed25519_key.pub
+                  </code>{" "}
+                  on the server and paste the result.
+                </p>
+                <Textarea
+                  placeholder="ssh-ed25519 AAAA... root@server"
+                  value={hostPubKey}
+                  onChange={(e) => handlePubKeyChange(e.target.value)}
+                  className="font-mono text-xs min-h-[80px]"
+                  disabled={isIssuing}
+                />
+                {keyWarning && (
+                  <p className="text-xs text-amber-700 dark:text-amber-400">{keyWarning}</p>
+                )}
+              </div>
+
+              {/* Principals */}
+              <div className="space-y-1.5">
+                <Label className="text-sm">
+                  Principals{" "}
+                  <span className="ml-1 font-normal text-muted-foreground">
+                    (hostnames/FQDNs, space or comma separated)
+                  </span>
+                </Label>
+                <p className="text-xs text-muted-foreground">
+                  Must match what clients type in{" "}
+                  <code className="font-mono">ssh user@&lt;principal&gt;</code>.
+                </p>
+                <Input
+                  placeholder="prod.example.com web01.internal"
+                  value={principals}
+                  onChange={(e) => setPrincipals(e.target.value)}
+                  disabled={isIssuing}
+                />
+              </div>
+
+              {/* Validity */}
+              <div className="space-y-1.5">
+                <Label className="text-sm">Validity (hours)</Label>
+                <div className="flex items-center gap-2 flex-wrap">
+                  <Input
+                    type="number"
+                    min={1}
+                    value={validityHours}
+                    onChange={(e) => setValidityHours(e.target.value)}
+                    className="w-28"
+                    disabled={isIssuing}
+                  />
+                  {/* Quick preset buttons */}
+                  <div className="flex items-center gap-1">
+                    {VALIDITY_PRESETS.map(([label, hours]) => (
+                      <Button
+                        key={label}
+                        type="button"
+                        size="sm"
+                        variant={validityHours === String(hours) ? "default" : "outline"}
+                        className="h-8 px-2 text-xs"
+                        onClick={() => setValidityHours(String(hours))}
+                        disabled={isIssuing}
+                      >
+                        {label}
+                      </Button>
+                    ))}
+                  </div>
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  Host certs are typically longer-lived than user certs.
+                </p>
+              </div>
+
+              <Button
+                onClick={handleIssue}
+                disabled={isIssuing || !hostPubKey.trim() || !principals.trim() || !!keyWarning}
+                size="sm"
+              >
+                {isIssuing && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+                <FileKey className="w-4 h-4 mr-2" />
+                Issue host certificate
+              </Button>
+            </>
+          ) : (
+            /* ── Success view ─────────────────────────────────────── */
+            <div className="space-y-3">
+              <p className="text-sm font-medium text-green-700 dark:text-green-400 flex items-center gap-1.5">
+                <CheckCircle className="w-4 h-4" />
+                Host certificate issued
+              </p>
+
+              {/* Certificate text */}
+              <div className="space-y-1">
+                <div className="flex items-center justify-between">
+                  <Label className="text-xs text-muted-foreground">Certificate</Label>
+                  <CopyButton text={hostCert} />
+                </div>
+                <Textarea
+                  readOnly
+                  value={hostCert}
+                  className="font-mono text-xs min-h-[80px]"
+                />
+              </div>
+
+              {/* Install snippet */}
+              <div className="rounded-lg bg-muted p-3 space-y-2">
+                <div className="flex items-center justify-between">
+                  <p className="text-xs font-semibold flex items-center gap-1">
+                    <Terminal className="w-3 h-3" />
+                    Install on the server
+                  </p>
+                  <CopyButton text={serverInstallSnippet} />
+                </div>
+                <pre className="text-xs font-mono whitespace-pre-wrap break-all">
+                  {serverInstallSnippet}
+                </pre>
+              </div>
+
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => {
+                  setHostCert(null);
+                  setHostPubKey("");
+                  setPrincipals("");
+                }}
+              >
+                Issue another
+              </Button>
+            </div>
+          )}
+        </CardContent>
+      )}
+    </Card>
+  );
+}
diff --git a/src/pages/org/ca/utils.ts b/src/pages/org/ca/utils.ts
new file mode 100644
index 0000000..9724055
--- /dev/null
+++ b/src/pages/org/ca/utils.ts
@@ -0,0 +1,32 @@
+// ─── Shared utilities for the Certificate Authorities page ───────────────────
+
+export function formatDate(d: string | null): string {
+  if (!d) return "—";
+  return new Date(d).toLocaleDateString(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+}
+
+export type SshKeyMaterialKind = "certificate" | "public_key" | "private_key" | "unknown";
+
+/**
+ * Inspect the first token of a raw SSH key/cert string and classify it.
+ * Used to warn the user before they accidentally paste a certificate where
+ * a public key is expected, or vice-versa.
+ */
+export function classifySshKeyMaterial(raw: string): SshKeyMaterialKind {
+  const line = raw.trim().split(/\s+/)[0] ?? "";
+  if (/-cert-v01@openssh\.com$/.test(line)) return "certificate";
+  if (
+    /^(ssh-ed25519|ssh-rsa|ssh-dss|ecdsa-sha2-nistp\d+|sk-ssh-ed25519@openssh\.com)$/.test(line)
+  )
+    return "public_key";
+  if (
+    raw.trim().startsWith("-----BEGIN OPENSSH PRIVATE KEY-----") ||
+    raw.trim().startsWith("-----BEGIN RSA PRIVATE KEY-----")
+  )
+    return "private_key";
+  return "unknown";
+}

From 44afd93c35bd9296e8bf34680bfb4f0bea5aa31a Mon Sep 17 00:00:00 2001
From: James Bhattarai <jamesbhattarai14@gmail.com>
Date: Tue, 3 Mar 2026 23:23:18 +0545
Subject: [PATCH 2/4] Fix: Deletion Deadlocks (Owner, User)

---
 src/lib/api.ts                    |  9 ++-
 src/pages/org/DepartmentsPage.tsx |  3 -
 src/pages/org/OrgOverviewPage.tsx | 43 +++++++-------
 src/pages/org/PrincipalsPage.tsx  |  3 -
 src/pages/user/ProfilePage.tsx    | 93 +++++++++++++++++++++++++++----
 5 files changed, 108 insertions(+), 43 deletions(-)

diff --git a/src/lib/api.ts b/src/lib/api.ts
index 18c6083..05205cc 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -814,9 +814,12 @@ export const api = {
     getById: (orgId: string, requestConfig?: RequestConfig) =>
       request<{ organization: Organization; member_count: number }>(`/organizations/${orgId}`, {}, true, requestConfig),
 
-    // Delete an organization (owner only; must have no other members)
-    deleteOrganization: (orgId: string, requestConfig?: RequestConfig) =>
-      request<{ message: string }>(`/organizations/${orgId}`, { method: 'DELETE' }, true, requestConfig),
+    // Delete an organization (owner only; pass confirm=true when other members exist)
+    deleteOrganization: (orgId: string, confirm?: boolean, requestConfig?: RequestConfig) =>
+      request<{ message: string }>(`/organizations/${orgId}`, {
+        method: 'DELETE',
+        ...(confirm ? { body: JSON.stringify({ confirm: true }) } : {}),
+      }, true, requestConfig),
 
     // Get organization members
     getMembers: (orgId: string, requestConfig?: RequestConfig) =>
diff --git a/src/pages/org/DepartmentsPage.tsx b/src/pages/org/DepartmentsPage.tsx
index 72b5eef..b0cdc94 100644
--- a/src/pages/org/DepartmentsPage.tsx
+++ b/src/pages/org/DepartmentsPage.tsx
@@ -658,9 +658,6 @@ export default function DepartmentsPage() {
                           })
                         )}
                       </div>
-                      <div className="mt-2 text-xs text-muted-foreground">
-                        Created {new Date(dept.created_at).toLocaleDateString()}
-                      </div>
 
                       {/* Members toggle */}
                       <button
diff --git a/src/pages/org/OrgOverviewPage.tsx b/src/pages/org/OrgOverviewPage.tsx
index 19f34fb..e67a9c6 100644
--- a/src/pages/org/OrgOverviewPage.tsx
+++ b/src/pages/org/OrgOverviewPage.tsx
@@ -46,7 +46,8 @@ export default function OrgOverviewPage() {
     if (!selectedOrg) return;
     setIsDeleting(true);
     try {
-      await api.organizations.deleteOrganization(selectedOrg.id);
+      // If there are other members, pass confirm=true to acknowledge forced removal.
+      await api.organizations.deleteOrganization(selectedOrg.id, memberCount > 1);
       toast({ title: "Organization deleted", description: `"${selectedOrg.name}" has been deleted.` });
       setDeleteDialogOpen(false);
       // Refresh org list; context will auto-select next available org
@@ -59,19 +60,11 @@ export default function OrgOverviewPage() {
         navigate("/org-setup");
       }
     } catch (err) {
-      if (err instanceof ApiError && err.type === "ORG_HAS_MEMBERS") {
-        toast({
-          title: "Cannot delete organization",
-          description: "This organization still has other members. Transfer ownership or remove all members first.",
-          variant: "destructive",
-        });
-      } else {
-        toast({
-          title: "Deletion failed",
-          description: err instanceof ApiError ? err.message : "An unexpected error occurred.",
-          variant: "destructive",
-        });
-      }
+      toast({
+        title: "Deletion failed",
+        description: err instanceof ApiError ? err.message : "An unexpected error occurred.",
+        variant: "destructive",
+      });
       setDeleteDialogOpen(false);
     } finally {
       setIsDeleting(false);
@@ -220,17 +213,15 @@ export default function OrgOverviewPage() {
               <div>
                 <p className="text-sm font-medium text-destructive">Delete Organization</p>
                 <p className="text-xs text-muted-foreground mt-0.5">
-                  Permanently deletes this organization.{" "}
                   {memberCount > 1
-                    ? `You must remove all ${memberCount - 1} other member${memberCount > 2 ? "s" : ""} first.`
-                    : "This action cannot be undone."}
+                    ? `Permanently deletes this organization and removes all ${memberCount - 1} other member${memberCount > 2 ? "s" : ""}. This action cannot be undone.`
+                    : "Permanently deletes this organization. This action cannot be undone."}
                 </p>
               </div>
               <Button
                 variant="destructive"
                 size="sm"
                 onClick={() => setDeleteDialogOpen(true)}
-                disabled={memberCount > 1}
               >
                 <Trash2 className="w-4 h-4 mr-2" />
                 Delete
@@ -253,10 +244,18 @@ export default function OrgOverviewPage() {
               data. This action <strong>cannot be undone</strong>.
             </DialogDescription>
           </DialogHeader>
-          <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">
-            <AlertTriangle className="w-4 h-4 inline mr-2" />
-            You are about to delete <strong>{org?.name}</strong>. All settings,
-            policies, OIDC clients, and CA configurations will be lost.
+          <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive space-y-1">
+            <p className="flex items-center gap-1 font-medium">
+              <AlertTriangle className="w-4 h-4 inline mr-1" />
+              You are about to delete <strong>{org?.name}</strong>.
+            </p>
+            <p>All settings, policies, OIDC clients, and CA configurations will be lost.</p>
+            {memberCount > 1 && (
+              <p className="font-medium">
+                This will also remove all {memberCount - 1} other member
+                {memberCount > 2 ? "s" : ""} from the organization.
+              </p>
+            )}
           </div>
           <DialogFooter>
             <Button variant="outline" onClick={() => setDeleteDialogOpen(false)} disabled={isDeleting}>
diff --git a/src/pages/org/PrincipalsPage.tsx b/src/pages/org/PrincipalsPage.tsx
index 6a27801..6a6ca9e 100644
--- a/src/pages/org/PrincipalsPage.tsx
+++ b/src/pages/org/PrincipalsPage.tsx
@@ -271,9 +271,6 @@ export default function PrincipalsPage() {
                         })}
                       </div>
 
-                      <div className="mt-2 text-xs text-muted-foreground">
-                        Created {new Date(principal.created_at).toLocaleDateString()}
-                      </div>
                     </div>
 
                     <DropdownMenu>
diff --git a/src/pages/user/ProfilePage.tsx b/src/pages/user/ProfilePage.tsx
index 60e6db1..266efdc 100644
--- a/src/pages/user/ProfilePage.tsx
+++ b/src/pages/user/ProfilePage.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Mail, Upload, CheckCircle, AlertCircle, Loader2, Bell, AlertTriangle, Trash2, Building2 } from "lucide-react";
+import { Mail, Upload, CheckCircle, AlertCircle, Loader2, Bell, AlertTriangle, Trash2, Building2, TriangleAlert } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -76,6 +76,7 @@ export default function ProfilePage() {
   // Delete account dialog state
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
+  const [confirmEmail, setConfirmEmail] = useState("");
 
   // Sync local name state with user data
   useEffect(() => {
@@ -108,14 +109,23 @@ export default function ProfilePage() {
       await api.users.deleteMe();
       toast({ title: "Account deleted", description: "Your account has been deleted." });
       setDeleteDialogOpen(false);
+      setConfirmEmail("");
       await logout();
       navigate("/login");
     } catch (err) {
       if (err instanceof ApiError && err.type === "USER_IS_SOLE_OWNER") {
-        const orgs: string[] = (err.details?.organizations as string[]) ?? [];
+        const details = err.details as {
+          transfer_ownership?: string[];
+        } | undefined;
+
+        const transferOrgs = details?.transfer_ownership ?? [];
+
         toast({
           title: "Cannot delete account",
-          description: `You are the sole owner of: ${orgs.join(", ")}. Transfer ownership or delete those organizations first.`,
+          description:
+            transferOrgs.length > 0
+              ? `You are the owner of ${transferOrgs.join(", ")} and other members exist. Transfer ownership to another member before deleting your account.`
+              : "You own organizations with other members. Transfer ownership first.",
           variant: "destructive",
         });
       } else {
@@ -325,7 +335,8 @@ export default function ProfilePage() {
                 <p className="text-sm font-medium text-destructive">Delete Account</p>
                 <p className="text-xs text-muted-foreground mt-0.5">
                   Permanently deletes your profile and all associated data. If you own
-                  any organizations you must transfer ownership or delete them first.
+                  organizations with other members, transfer ownership first. Sole-member
+                  organizations are deleted automatically.
                 </p>
               </div>
               <Button
@@ -342,7 +353,13 @@ export default function ProfilePage() {
       </div>
 
       {/* Delete account confirmation dialog */}
-      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+      <Dialog
+        open={deleteDialogOpen}
+        onOpenChange={(open) => {
+          setDeleteDialogOpen(open);
+          if (!open) setConfirmEmail("");
+        }}
+      >
         <DialogContent>
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2 text-destructive">
@@ -354,24 +371,76 @@ export default function ProfilePage() {
               permanently deleted. This action <strong>cannot be undone</strong>.
             </DialogDescription>
           </DialogHeader>
-          <div className="rounded-lg border border-amber-300 bg-amber-50 dark:border-amber-700 dark:bg-amber-950/40 p-3 text-sm text-amber-800 dark:text-amber-300 space-y-1">
+
+          {/* Org ownership warning */}
+          <div className="rounded-lg border border-amber-300 bg-amber-50 dark:border-amber-700 dark:bg-amber-950/40 p-3 text-sm text-amber-800 dark:text-amber-300 space-y-2">
             <p className="flex items-center gap-2 font-medium">
               <Building2 className="w-4 h-4" />
               Organization ownership check
             </p>
             <p>
-              If you are the sole owner of any organization that has other members,
-              you must <strong>transfer ownership</strong> to another member or delete
-              those organizations before proceeding.
+              If you own organizations with other members, you must{" "}
+              <strong>transfer ownership</strong> to another member first.
+            </p>
+            <p>
+              Organizations where you are the <strong>sole member</strong> will
+              be automatically deleted along with your account.
             </p>
           </div>
+
+          {/* What will be deleted */}
+          <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive space-y-1">
+            <p className="font-medium flex items-center gap-2">
+              <TriangleAlert className="w-4 h-4" />
+              The following will be permanently deleted:
+            </p>
+            <ul className="list-disc list-inside space-y-0.5 text-destructive/80 pl-1">
+              <li>Your profile and account data</li>
+              <li>All SSH keys and active certificates</li>
+              <li>All linked accounts (Google, GitHub, etc.)</li>
+              <li>All active sessions</li>
+              <li>All passkeys and MFA methods</li>
+            </ul>
+          </div>
+
+          {/* Email confirmation input */}
+          <div className="space-y-2">
+            <Label htmlFor="confirm-email" className="text-sm">
+              Type your email address{" "}
+              <span className="font-mono font-semibold text-foreground">
+                {user.email}
+              </span>{" "}
+              to confirm:
+            </Label>
+            <Input
+              id="confirm-email"
+              type="email"
+              placeholder={user.email}
+              value={confirmEmail}
+              onChange={(e) => setConfirmEmail(e.target.value)}
+              disabled={isDeleting}
+              autoComplete="off"
+            />
+          </div>
+
           <DialogFooter>
-            <Button variant="outline" onClick={() => setDeleteDialogOpen(false)} disabled={isDeleting}>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setDeleteDialogOpen(false);
+                setConfirmEmail("");
+              }}
+              disabled={isDeleting}
+            >
               Cancel
             </Button>
-            <Button variant="destructive" onClick={handleDeleteAccount} disabled={isDeleting}>
+            <Button
+              variant="destructive"
+              onClick={handleDeleteAccount}
+              disabled={isDeleting || confirmEmail.trim().toLowerCase() !== user.email.toLowerCase()}
+            >
               {isDeleting && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
-              Yes, delete my account
+              Yes, permanently delete my account
             </Button>
           </DialogFooter>
         </DialogContent>

From de869ec1f2b19fa624a448a3ef7e0f2cd21ad4b0 Mon Sep 17 00:00:00 2001
From: James Bhattarai <jamesbhattarai14@gmail.com>
Date: Wed, 4 Mar 2026 18:43:12 +0545
Subject: [PATCH 3/4] Feat(Chore, Fix): Admin Privilege

Added OIDC Web Page Flow
Admin can  add/reset password
Admin can remove users'/members mfa/2fa, unlink account from  oauth provider
Chore: Text changes (Forgot Pass, CA)
---
 src/components/navigation/AppSidebar.tsx     |   6 +-
 src/components/security/TotpRemoveDialog.tsx |  53 +-
 src/lib/api.ts                               |  99 +++-
 src/pages/admin/AdminUsersPage.tsx           | 451 ++++++++++++++-
 src/pages/admin/OAuthProvidersPage.tsx       |   8 +-
 src/pages/auth/ForgotPasswordPage.tsx        |   6 -
 src/pages/org/CAsPage.tsx                    |   3 +-
 src/pages/org/MembersPage.tsx                | 349 +++++++++++-
 src/pages/org/OIDCClientsPage.tsx            | 563 +++++++++++++++----
 src/pages/user/SecurityPage.tsx              | 110 +++-
 10 files changed, 1464 insertions(+), 184 deletions(-)

diff --git a/src/components/navigation/AppSidebar.tsx b/src/components/navigation/AppSidebar.tsx
index 0ba10a0..714830f 100644
--- a/src/components/navigation/AppSidebar.tsx
+++ b/src/components/navigation/AppSidebar.tsx
@@ -13,6 +13,7 @@ import {
   ScrollText,
   Terminal,
   ShieldCheck,
+  Key,
 } from "lucide-react";
 import { GatehouseLogo } from "@/components/branding/GatehouseLogo";
 import { NavLink } from "@/components/NavLink";
@@ -57,8 +58,9 @@ const orgAdminNavItems = [
 
 const adminNavItems = [
   { title: "Certificate Auth.", url: "/org/cas", icon: ShieldCheck },
-  { title: "Org Audit Log", url: "/org/audit", icon: FileText },
-  { title: "System Logs",  url: "/admin/audit", icon: ScrollText },
+  { title: "OIDC Clients",     url: "/org/clients", icon: Key },
+  { title: "Org Audit Log",    url: "/org/audit", icon: FileText },
+  { title: "System Logs",      url: "/admin/audit", icon: ScrollText },
 ];
 
 export function AppSidebar() {
diff --git a/src/components/security/TotpRemoveDialog.tsx b/src/components/security/TotpRemoveDialog.tsx
index 69098d2..14ce0aa 100644
--- a/src/components/security/TotpRemoveDialog.tsx
+++ b/src/components/security/TotpRemoveDialog.tsx
@@ -18,6 +18,7 @@ interface TotpRemoveDialogProps {
   onOpenChange: (open: boolean) => void;
   onSuccess: () => void;
   isRequired?: boolean;
+  hasPassword?: boolean;
 }
 
 export function TotpRemoveDialog({
@@ -25,6 +26,7 @@ export function TotpRemoveDialog({
   onOpenChange,
   onSuccess,
   isRequired = false,
+  hasPassword = true,
 }: TotpRemoveDialogProps) {
   const [isLoading, setIsLoading] = useState(false);
   const [password, setPassword] = useState("");
@@ -45,7 +47,7 @@ export function TotpRemoveDialog({
   };
 
   const handleRemove = async () => {
-    if (!password) {
+    if (hasPassword && !password) {
       setError("Password is required to disable TOTP");
       return;
     }
@@ -54,7 +56,7 @@ export function TotpRemoveDialog({
     setError(null);
 
     try {
-      await api.totp.disable(password);
+      await api.totp.disable(hasPassword ? password : null);
       
       toast({
         title: "Two-factor authentication disabled",
@@ -80,7 +82,7 @@ export function TotpRemoveDialog({
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && password) {
+    if (e.key === "Enter" && (!hasPassword || password)) {
       handleRemove();
     }
   };
@@ -109,25 +111,30 @@ export function TotpRemoveDialog({
         </AlertDialogHeader>
 
         <div className="space-y-4 mt-4">
-          <div className="space-y-2">
-            <Label htmlFor="password-confirm">Enter your password to confirm</Label>
-            <Input
-              id="password-confirm"
-              type="password"
-              placeholder="Your current password"
-              value={password}
-              onChange={(e) => {
-                setPassword(e.target.value);
-                setError(null);
-              }}
-              onKeyDown={handleKeyDown}
-              disabled={isLoading}
-              autoFocus
-            />
-            {error && (
-              <p className="text-sm text-destructive">{error}</p>
-            )}
-          </div>
+          {hasPassword && (
+            <div className="space-y-2">
+              <Label htmlFor="password-confirm">Enter your password to confirm</Label>
+              <Input
+                id="password-confirm"
+                type="password"
+                placeholder="Your current password"
+                value={password}
+                onChange={(e) => {
+                  setPassword(e.target.value);
+                  setError(null);
+                }}
+                onKeyDown={handleKeyDown}
+                disabled={isLoading}
+                autoFocus
+              />
+              {error && (
+                <p className="text-sm text-destructive">{error}</p>
+              )}
+            </div>
+          )}
+          {!hasPassword && error && (
+            <p className="text-sm text-destructive">{error}</p>
+          )}
 
           <div className="flex justify-end gap-2">
             <Button
@@ -140,7 +147,7 @@ export function TotpRemoveDialog({
             <Button
               variant="destructive"
               onClick={handleRemove}
-              disabled={isLoading || !password}
+              disabled={isLoading || (hasPassword && !password)}
             >
               {isLoading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
               Remove TOTP
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 05205cc..b3bb250 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -29,6 +29,10 @@ export interface User {
   org_role?: string;
   org_id?: string;
   activated?: boolean;
+  // Auth method capabilities — present on /users/me response
+  has_password?: boolean;
+  totp_enabled?: boolean;
+  linked_providers?: string[];
 }
 
 export interface Organization {
@@ -141,6 +145,34 @@ export interface WebAuthnLoginCompleteResponse {
   expires_at: string;
 }
 
+// Admin MFA management types
+export interface AdminMfaMethod {
+  /** Unique identifier: auth_method.id for TOTP, credential id for WebAuthn */
+  id: string;
+  /** 'totp' or 'webauthn' */
+  type: 'totp' | 'webauthn';
+  /** Human-readable name */
+  name: string;
+  device_type?: string;
+  transports?: string[];
+  verified: boolean;
+  created_at: string | null;
+  last_used_at: string | null;
+}
+
+export interface AdminLinkedAccount {
+  /** UUID of the AuthenticationMethod row */
+  id: string;
+  /** Provider name: 'google' | 'github' | 'microsoft' | 'oidc' */
+  provider_type: string;
+  /** Email address from the OAuth provider, if available */
+  email: string | null;
+  /** Display name from the OAuth provider, if available */
+  name: string | null;
+  /** ISO timestamp when the account was linked */
+  linked_at: string | null;
+}
+
 // External Auth Types
 export type ExternalProviderId = 'google' | 'github' | 'microsoft';
 
@@ -552,6 +584,10 @@ export const api = {
     unsuspendUser: (userId: string, requestConfig?: RequestConfig) =>
       request<{ user: User }>(`/admin/users/${userId}/unsuspend`, { method: 'POST' }, true, requestConfig),
 
+    // Force-verify a user's email and activate their account (clears stale verification tokens)
+    adminVerifyUserEmail: (userId: string, requestConfig?: RequestConfig) =>
+      request<{ user: User }>(`/admin/users/${userId}/verify-email`, { method: 'POST' }, true, requestConfig),
+
     // Permanently delete a user — revokes certs, cascades DB delete, unrecoverable
     hardDeleteUser: (userId: string, requestConfig?: RequestConfig) =>
       request<{ deleted_user_id: string; deleted_user_email: string; ssh_keys_deleted: number; certs_revoked: number }>(
@@ -561,6 +597,61 @@ export const api = {
         requestConfig,
       ),
 
+    // Get all MFA methods configured for a user (admin view)
+    getUserMfa: (userId: string, requestConfig?: RequestConfig) =>
+      request<{ user: { id: string; email: string; full_name: string | null }; mfa_methods: AdminMfaMethod[] }>(
+        `/admin/users/${userId}/mfa`,
+        {},
+        true,
+        requestConfig,
+      ),
+
+    // Remove an MFA method for a user (admin action — use when user lost access)
+    // method_type: 'totp' | 'webauthn' | 'all'
+    // credentialId: optional WebAuthn credential ID to remove a single passkey
+    removeUserMfa: (userId: string, methodType: 'totp' | 'webauthn' | 'all', credentialId?: string, requestConfig?: RequestConfig) => {
+      const qs = credentialId ? `?credential_id=${encodeURIComponent(credentialId)}` : '';
+      return request<{ removed_methods: string[]; removed_count: number; user: { id: string; email: string } }>(
+        `/admin/users/${userId}/mfa/${methodType}${qs}`,
+        { method: 'DELETE' },
+        true,
+        requestConfig,
+      );
+    },
+
+    // Get linked OAuth/OIDC accounts for a user (admin view)
+    getUserLinkedAccounts: (userId: string, requestConfig?: RequestConfig) =>
+      request<{
+        user: { id: string; email: string; full_name: string | null };
+        linked_accounts: AdminLinkedAccount[];
+        total_auth_methods: number;
+      }>(
+        `/admin/users/${userId}/linked-accounts`,
+        {},
+        true,
+        requestConfig,
+      ),
+
+    // Unlink an OAuth/OIDC provider from a user's account (admin action)
+    // provider: provider name ('google', 'github', 'microsoft', 'oidc') or method UUID
+    adminUnlinkUserProvider: (userId: string, provider: string, requestConfig?: RequestConfig) =>
+      request<{ provider: string; user: { id: string; email: string } }>(
+        `/admin/users/${userId}/linked-accounts/${encodeURIComponent(provider)}`,
+        { method: 'DELETE' },
+        true,
+        requestConfig,
+      ),
+
+    // Set or reset a user's password (admin action — no current password needed)
+    // Creates the password auth method if the user doesn't have one (e.g. OAuth-only users)
+    adminSetUserPassword: (userId: string, password: string, requestConfig?: RequestConfig) =>
+      request<{ user: { id: string; email: string } }>(
+        `/admin/users/${userId}/password`,
+        { method: 'POST', body: JSON.stringify({ password }) },
+        true,
+        requestConfig,
+      ),
+
     // Get the cert policy for a department
     getDeptCertPolicy: (orgId: string, deptId: string, requestConfig?: RequestConfig) =>
       request<{ cert_policy: DeptCertPolicy }>(`/organizations/${orgId}/departments/${deptId}/cert-policy`, {}, true, requestConfig),
@@ -622,10 +713,10 @@ export const api = {
       request<TotpStatusResponse>('/auth/totp/status'),
 
     // Disable TOTP - wrong password should not log user out
-    disable: (password: string) =>
+    disable: (password?: string | null) =>
       request<{ message: string }>('/auth/totp/disable', {
         method: 'DELETE',
-        body: JSON.stringify({ password }),
+        body: JSON.stringify({ password: password || null }),
       }, true, { clearTokenOn401: false }),
 
     // Regenerate backup codes - wrong password should not log user out
@@ -1046,7 +1137,7 @@ export const api = {
         false,
       ),
 
-    // Accept invite (unauthenticated) — password/name only needed for new accounts
+    // Accept invite — sends Bearer token if present (OAuth users skip password)
     accept: (token: string, full_name?: string, password?: string) =>
       request<LoginResponse>(
         `/invites/${token}/accept`,
@@ -1054,7 +1145,7 @@ export const api = {
           method: 'POST',
           body: JSON.stringify({ full_name, password, password_confirm: password }),
         },
-        false,
+        true,
       ),
   },
 
diff --git a/src/pages/admin/AdminUsersPage.tsx b/src/pages/admin/AdminUsersPage.tsx
index 8a80188..c378830 100644
--- a/src/pages/admin/AdminUsersPage.tsx
+++ b/src/pages/admin/AdminUsersPage.tsx
@@ -14,6 +14,12 @@ import {
   UserCheck,
   AlertTriangle,
   Trash2,
+  ShieldOff,
+  Smartphone,
+  KeyRound,
+  Link2,
+  Unlink,
+  Lock,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -50,7 +56,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { useToast } from "@/hooks/use-toast";
-import { api, User as ApiUser, SSHKey, ApiError } from "@/lib/api";
+import { api, User as ApiUser, SSHKey, ApiError, AdminMfaMethod, AdminLinkedAccount } from "@/lib/api";
 import { useAuth } from "@/contexts/AuthContext";
 
 function formatDate(d: string | null) {
@@ -58,6 +64,10 @@ function formatDate(d: string | null) {
   return new Date(d).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
 }
 
+function capitalize(s: string) {
+  return s ? s.charAt(0).toUpperCase() + s.slice(1) : s;
+}
+
 function isSuspended(status: string | undefined) {
   return status === "suspended" || status === "compliance_suspended";
 }
@@ -124,11 +134,33 @@ export default function AdminUsersPage() {
   const [isSuspending, setIsSuspending] = useState(false);
   const [showSuspendConfirm, setShowSuspendConfirm] = useState(false);
 
+  // Force-verify email
+  const [isVerifyingEmail, setIsVerifyingEmail] = useState(false);
+
   // Hard delete
   const [showHardDelete, setShowHardDelete] = useState(false);
   const [hardDeleteConfirmEmail, setHardDeleteConfirmEmail] = useState("");
   const [isHardDeleting, setIsHardDeleting] = useState(false);
 
+  // MFA management
+  const [userMfaMethods, setUserMfaMethods] = useState<AdminMfaMethod[]>([]);
+  const [isMfaLoading, setIsMfaLoading] = useState(false);
+  const [removingMfaId, setRemovingMfaId] = useState<string | null>(null);
+  const [showRemoveAllMfa, setShowRemoveAllMfa] = useState(false);
+  const [isRemovingAllMfa, setIsRemovingAllMfa] = useState(false);
+
+  // Linked accounts management
+  const [userLinkedAccounts, setUserLinkedAccounts] = useState<AdminLinkedAccount[]>([]);
+  const [totalAuthMethods, setTotalAuthMethods] = useState(0);
+  const [unlinkingProvider, setUnlinkingProvider] = useState<string | null>(null);
+
+  // Admin password reset
+  const [showPasswordReset, setShowPasswordReset] = useState(false);
+  const [newPassword, setNewPassword] = useState("");
+  const [newPasswordConfirm, setNewPasswordConfirm] = useState("");
+  const [passwordResetError, setPasswordResetError] = useState<string | null>(null);
+  const [isResettingPassword, setIsResettingPassword] = useState(false);
+
   // ── Fetch users ─────────────────────────────────────────────────────────────
   const fetchUsers = useCallback(async (q: string, pg: number) => {
     setIsLoading(true);
@@ -167,12 +199,24 @@ export default function AdminUsersPage() {
   const openUserDrawer = async (user: ApiUser) => {
     setSelectedUser(user);
     setUserSshKeys([]);
+    setUserMfaMethods([]);
+    setUserLinkedAccounts([]);
+    setTotalAuthMethods(0);
     setIsDrawerLoading(true);
     try {
-      const data = await api.admin.getUser(user.id);
-      setUserSshKeys(data.ssh_keys);
+      const [userData, mfaData, linkedData] = await Promise.allSettled([
+        api.admin.getUser(user.id),
+        api.admin.getUserMfa(user.id),
+        api.admin.getUserLinkedAccounts(user.id),
+      ]);
+      if (userData.status === "fulfilled") setUserSshKeys(userData.value.ssh_keys);
+      if (mfaData.status === "fulfilled") setUserMfaMethods(mfaData.value.mfa_methods);
+      if (linkedData.status === "fulfilled") {
+        setUserLinkedAccounts(linkedData.value.linked_accounts);
+        setTotalAuthMethods(linkedData.value.total_auth_methods);
+      }
     } catch {
-      // Non-fatal — drawer still shows basic user info
+      // Non-fatal
     } finally {
       setIsDrawerLoading(false);
     }
@@ -270,6 +314,23 @@ export default function AdminUsersPage() {
     }
   };
 
+  // ── Force-verify email ───────────────────────────────────────────────────────
+  const handleVerifyEmail = async () => {
+    if (!selectedUser) return;
+    setIsVerifyingEmail(true);
+    try {
+      const data = await api.admin.adminVerifyUserEmail(selectedUser.id);
+      const updated = { ...selectedUser, email_verified: data.user.email_verified, status: data.user.status };
+      setSelectedUser(updated);
+      setUsers((prev) => prev.map((u) => u.id === selectedUser.id ? { ...u, email_verified: data.user.email_verified, status: data.user.status } : u));
+      toast({ title: "Email verified", description: `${selectedUser.email} is now verified and active.` });
+    } catch (err) {
+      toast({ variant: "destructive", title: "Failed to verify email", description: err instanceof ApiError ? err.message : "Something went wrong" });
+    } finally {
+      setIsVerifyingEmail(false);
+    }
+  };
+
   // ── Hard delete user ─────────────────────────────────────────────────────────
   const handleHardDelete = async () => {
     if (!selectedUser) return;
@@ -295,6 +356,108 @@ export default function AdminUsersPage() {
     }
   };
 
+  // ── Remove single MFA method ─────────────────────────────────────────────────
+  const handleRemoveMfaMethod = async (method: AdminMfaMethod) => {
+    if (!selectedUser) return;
+    setRemovingMfaId(method.id);
+    try {
+      const credentialId = method.type === "webauthn" ? method.id : undefined;
+      await api.admin.removeUserMfa(selectedUser.id, method.type as "totp" | "webauthn", credentialId);
+      // Refresh MFA methods list
+      const mfaData = await api.admin.getUserMfa(selectedUser.id);
+      setUserMfaMethods(mfaData.mfa_methods);
+      toast({
+        title: "MFA method removed",
+        description: `${method.name} has been removed for ${selectedUser.email}. They can now re-enroll.`,
+      });
+    } catch (err) {
+      toast({
+        variant: "destructive",
+        title: "Failed to remove MFA method",
+        description: err instanceof ApiError ? err.message : "Something went wrong",
+      });
+    } finally {
+      setRemovingMfaId(null);
+    }
+  };
+
+  // ── Remove ALL MFA methods ───────────────────────────────────────────────────
+  const handleRemoveAllMfa = async () => {
+    if (!selectedUser) return;
+    setIsRemovingAllMfa(true);
+    try {
+      await api.admin.removeUserMfa(selectedUser.id, "all");
+      setUserMfaMethods([]);
+      setShowRemoveAllMfa(false);
+      toast({
+        title: "All MFA methods removed",
+        description: `All MFA methods for ${selectedUser.email} have been cleared. They can now re-enroll.`,
+      });
+    } catch (err) {
+      setShowRemoveAllMfa(false);
+      toast({
+        variant: "destructive",
+        title: "Failed to remove MFA methods",
+        description: err instanceof ApiError ? err.message : "Something went wrong",
+      });
+    } finally {
+      setIsRemovingAllMfa(false);
+    }
+  };
+
+  const handleUnlinkProvider = async (account: AdminLinkedAccount) => {
+    if (!selectedUser) return;
+    setUnlinkingProvider(account.id);
+    try {
+      await api.admin.adminUnlinkUserProvider(selectedUser.id, account.provider_type);
+      setUserLinkedAccounts((prev) => prev.filter((a) => a.id !== account.id));
+      setTotalAuthMethods((prev) => Math.max(0, prev - 1));
+      toast({
+        title: "Provider unlinked",
+        description: `${capitalize(account.provider_type)} has been unlinked from ${selectedUser.email}.`,
+      });
+    } catch (err) {
+      toast({
+        variant: "destructive",
+        title: "Failed to unlink provider",
+        description: err instanceof ApiError ? err.message : "Something went wrong",
+      });
+    } finally {
+      setUnlinkingProvider(null);
+    }
+  };
+
+  // ── Admin password reset ─────────────────────────────────────────────────────
+  const handlePasswordReset = async () => {
+    if (!selectedUser) return;
+    setPasswordResetError(null);
+
+    if (newPassword.length < 8) {
+      setPasswordResetError("Password must be at least 8 characters");
+      return;
+    }
+    if (newPassword !== newPasswordConfirm) {
+      setPasswordResetError("Passwords do not match");
+      return;
+    }
+
+    setIsResettingPassword(true);
+    try {
+      await api.admin.adminSetUserPassword(selectedUser.id, newPassword);
+      setShowPasswordReset(false);
+      setNewPassword("");
+      setNewPasswordConfirm("");
+      toast({
+        title: "Password updated",
+        description: `Password has been set for ${selectedUser.email}. They can now log in with it.`,
+      });
+    } catch (err) {
+      setPasswordResetError(err instanceof ApiError ? err.message : "Failed to set password");
+    } finally {
+      setIsResettingPassword(false);
+    }
+  };
+
   // Filter by role client-side
   const filteredUsers = users.filter((u) => {
     if (roleFilter === "all") return true;
@@ -466,6 +629,28 @@ export default function AdminUsersPage() {
                     <Ban className="w-4 h-4" />
                     Account Access
                   </h3>
+
+                  {/* Unverified / inactive email block */}
+                  {(!selectedUser.email_verified || selectedUser.status === "inactive") && (
+                    <div className="space-y-2 pb-3 border-b">
+                      <p className="text-sm text-muted-foreground">
+                        {selectedUser.status === "inactive"
+                          ? "This account is inactive — the user has not verified their email and cannot log in, set up OAuth, or configure MFA."
+                          : "This user's email address is not verified."}
+                      </p>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={handleVerifyEmail}
+                        disabled={isVerifyingEmail}
+                        className="text-blue-600 border-blue-300 hover:bg-blue-50"
+                      >
+                        {isVerifyingEmail ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <CheckCircle className="w-4 h-4 mr-2" />}
+                        Verify email &amp; activate account
+                      </Button>
+                    </div>
+                  )}
+
                   {isSuspended(selectedUser.status) ? (
                     <div className="space-y-2">
                       <p className="text-sm text-muted-foreground">
@@ -532,6 +717,168 @@ export default function AdminUsersPage() {
                 </div>
               )}
 
+              {/* ── MFA Methods section ────────────────────────────────────────── */}
+              {selectedUser.id !== currentUser?.id && (
+                <div className="mb-6 p-4 border rounded-lg space-y-3">
+                  <div className="flex items-center justify-between">
+                    <h3 className="text-sm font-semibold flex items-center gap-2">
+                      <ShieldOff className="w-4 h-4" />
+                      MFA Methods
+                    </h3>
+                    {userMfaMethods.length > 1 && (
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => setShowRemoveAllMfa(true)}
+                        className="text-red-600 border-red-300 hover:bg-red-50 text-xs"
+                      >
+                        <Trash2 className="w-3 h-3 mr-1" />
+                        Remove all
+                      </Button>
+                    )}
+                  </div>
+
+                  {isMfaLoading ? (
+                    <div className="flex items-center justify-center py-4">
+                      <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : userMfaMethods.length === 0 ? (
+                    <p className="text-sm text-muted-foreground">
+                      No MFA methods configured.
+                    </p>
+                  ) : (
+                    <div className="space-y-2">
+                      {userMfaMethods.map((method) => (
+                        <div
+                          key={method.id}
+                          className="flex items-center justify-between p-3 border rounded-lg text-sm"
+                        >
+                          <div className="flex items-center gap-2 min-w-0">
+                            {method.type === "totp" ? (
+                              <Smartphone className="w-4 h-4 text-blue-500 flex-shrink-0" />
+                            ) : (
+                              <KeyRound className="w-4 h-4 text-purple-500 flex-shrink-0" />
+                            )}
+                            <div className="min-w-0">
+                              <p className="font-medium truncate">{method.name}</p>
+                              {method.last_used_at && (
+                                <p className="text-xs text-muted-foreground">
+                                  Last used: {formatDate(method.last_used_at)}
+                                </p>
+                              )}
+                            </div>
+                          </div>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => handleRemoveMfaMethod(method)}
+                            disabled={removingMfaId === method.id}
+                            className="text-red-600 hover:bg-red-50 flex-shrink-0 ml-2"
+                            title={`Remove ${method.name}`}
+                          >
+                            {removingMfaId === method.id ? (
+                              <Loader2 className="w-4 h-4 animate-spin" />
+                            ) : (
+                              <Trash2 className="w-4 h-4" />
+                            )}
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  <p className="text-xs text-muted-foreground">
+                    Remove an MFA method if the user has lost access (e.g. lost phone or passkey).
+                    The user will be able to re-enroll after removal.
+                  </p>
+                </div>
+              )}
+
+              {/* ── Linked Accounts section ────────────────────────────────── */}
+              {selectedUser.id !== currentUser?.id && (
+                <div className="mb-6 p-4 border rounded-lg space-y-3">
+                  <h3 className="text-sm font-semibold flex items-center gap-2">
+                    <Link2 className="w-4 h-4" />
+                    Linked OAuth Accounts
+                  </h3>
+
+                  {userLinkedAccounts.length === 0 ? (
+                    <p className="text-sm text-muted-foreground">
+                      No OAuth providers linked.
+                    </p>
+                  ) : (
+                    <div className="space-y-2">
+                      {userLinkedAccounts.map((account) => {
+                        const isOnlyMethod = totalAuthMethods <= 1;
+                        return (
+                          <div
+                            key={account.id}
+                            className="flex items-center justify-between p-3 border rounded-lg text-sm"
+                          >
+                            <div className="flex items-center gap-2 min-w-0">
+                              <Link2 className="w-4 h-4 text-blue-500 flex-shrink-0" />
+                              <div className="min-w-0">
+                                <p className="font-medium capitalize">{account.provider_type}</p>
+                                {account.email && (
+                                  <p className="text-xs text-muted-foreground truncate">{account.email}</p>
+                                )}
+                                {account.linked_at && (
+                                  <p className="text-xs text-muted-foreground">
+                                    Linked: {formatDate(account.linked_at)}
+                                  </p>
+                                )}
+                              </div>
+                            </div>
+                            <Button
+                              size="sm"
+                              variant="ghost"
+                              onClick={() => handleUnlinkProvider(account)}
+                              disabled={unlinkingProvider === account.id || isOnlyMethod}
+                              className="text-red-600 hover:bg-red-50 flex-shrink-0 ml-2"
+                              title={
+                                isOnlyMethod
+                                  ? "Cannot unlink — this is the user's only sign-in method"
+                                  : `Unlink ${account.provider_type}`
+                              }
+                            >
+                              {unlinkingProvider === account.id ? (
+                                <Loader2 className="w-4 h-4 animate-spin" />
+                              ) : (
+                                <Unlink className="w-4 h-4" />
+                              )}
+                            </Button>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                  <p className="text-xs text-muted-foreground">
+                    Unlink an OAuth provider to prevent sign-in via that provider.
+                    Cannot unlink if it is the user's only sign-in method.
+                  </p>
+                </div>
+              )}
+
+              {/* ── Admin Password Reset section ──────────────────────────── */}
+              {selectedUser.id !== currentUser?.id && (
+                <div className="mb-6 p-4 border rounded-lg space-y-3">
+                  <h3 className="text-sm font-semibold flex items-center gap-2">
+                    <Lock className="w-4 h-4" />
+                    Password
+                  </h3>
+                  <p className="text-sm text-muted-foreground">
+                    Set a new password for this user. Use this when a user is locked out or needs a password added to their account.
+                  </p>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => { setPasswordResetError(null); setNewPassword(""); setNewPasswordConfirm(""); setShowPasswordReset(true); }}
+                  >
+                    <Lock className="w-3 h-3 mr-1" />
+                    Set password
+                  </Button>
+                </div>
+              )}
+
               {/* SSH Keys section */}
               <div className="space-y-3">
                 <div className="flex items-center justify-between">
@@ -680,6 +1027,37 @@ export default function AdminUsersPage() {
         </DialogContent>
       </Dialog>
 
+      {/* ── Remove All MFA confirmation ───────────────────────────────────────── */}
+      <Dialog open={showRemoveAllMfa} onOpenChange={setShowRemoveAllMfa}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 text-amber-600">
+              <ShieldOff className="w-5 h-5" />
+              Remove all MFA methods?
+            </DialogTitle>
+            <DialogDescription>
+              All MFA methods for{" "}
+              <strong>{selectedUser?.full_name || selectedUser?.email}</strong> will
+              be removed. They will be able to re-enroll after this action. Use this
+              when the user has lost access to their authenticator app or passkey.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowRemoveAllMfa(false)} disabled={isRemovingAllMfa}>
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleRemoveAllMfa}
+              disabled={isRemovingAllMfa}
+            >
+              {isRemovingAllMfa && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+              Remove all MFA
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
       {/* ── Hard delete confirmation ──────────────────────────────────────────── */}
       <Dialog
         open={showHardDelete}
@@ -728,6 +1106,71 @@ export default function AdminUsersPage() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+      {/* ── Admin password reset dialog ───────────────────────────────────── */}
+      <Dialog
+        open={showPasswordReset}
+        onOpenChange={(open) => {
+          setShowPasswordReset(open);
+          if (!open) { setNewPassword(""); setNewPasswordConfirm(""); setPasswordResetError(null); }
+        }}
+      >
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <Lock className="w-5 h-5" />
+              Set password for {selectedUser?.email}
+            </DialogTitle>
+            <DialogDescription>
+              The user will be able to log in with this password immediately. This does not affect their existing OAuth logins.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="py-2 space-y-3">
+            {passwordResetError && (
+              <div className="p-3 rounded-md bg-destructive/10 text-destructive text-sm">{passwordResetError}</div>
+            )}
+            <div className="space-y-2">
+              <Label htmlFor="admin-new-password">New password</Label>
+              <Input
+                id="admin-new-password"
+                type="password"
+                placeholder="Min. 8 characters"
+                value={newPassword}
+                onChange={(e) => { setNewPassword(e.target.value); setPasswordResetError(null); }}
+                disabled={isResettingPassword}
+                autoFocus
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="admin-new-password-confirm">Confirm password</Label>
+              <Input
+                id="admin-new-password-confirm"
+                type="password"
+                placeholder="Repeat new password"
+                value={newPasswordConfirm}
+                onChange={(e) => { setNewPasswordConfirm(e.target.value); setPasswordResetError(null); }}
+                disabled={isResettingPassword}
+                onKeyDown={(e) => { if (e.key === "Enter" && newPassword && newPasswordConfirm) handlePasswordReset(); }}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setShowPasswordReset(false)}
+              disabled={isResettingPassword}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handlePasswordReset}
+              disabled={isResettingPassword || !newPassword || !newPasswordConfirm}
+            >
+              {isResettingPassword && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+              Set password
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
diff --git a/src/pages/admin/OAuthProvidersPage.tsx b/src/pages/admin/OAuthProvidersPage.tsx
index 20be9a9..bec814f 100644
--- a/src/pages/admin/OAuthProvidersPage.tsx
+++ b/src/pages/admin/OAuthProvidersPage.tsx
@@ -42,18 +42,20 @@ const PROVIDER_LOGOS: Record<string, string> = {
   microsoft: "https://www.microsoft.com/favicon.ico",
 };
 
+const API_BASE = (import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:5000/api/v1') as string;
+
 const PROVIDER_HELP: Record<string, { docsUrl: string; callbackNote: string }> = {
   google: {
     docsUrl: "https://console.cloud.google.com/apis/credentials",
-    callbackNote: "Authorized redirect URI: http://localhost:5000/api/v1/auth/external/google/callback",
+    callbackNote: `Authorized redirect URI: ${API_BASE}/auth/external/google/callback`,
   },
   github: {
     docsUrl: "https://github.com/settings/applications/new",
-    callbackNote: "Authorization callback URL: http://localhost:5000/api/v1/auth/external/github/callback",
+    callbackNote: `Authorization callback URL: ${API_BASE}/auth/external/github/callback`,
   },
   microsoft: {
     docsUrl: "https://portal.azure.com/#view/Microsoft_AAD_RegisteredApps",
-    callbackNote: "Redirect URI: http://localhost:5000/api/v1/auth/external/microsoft/callback",
+    callbackNote: `Redirect URI: ${API_BASE}/auth/external/microsoft/callback`,
   },
 };
 
diff --git a/src/pages/auth/ForgotPasswordPage.tsx b/src/pages/auth/ForgotPasswordPage.tsx
index 2d8bd89..85f4aef 100644
--- a/src/pages/auth/ForgotPasswordPage.tsx
+++ b/src/pages/auth/ForgotPasswordPage.tsx
@@ -42,12 +42,6 @@ export default function ForgotPasswordPage() {
           you'll receive a password reset link shortly.
         </p>
 
-        <BannerAlert
-          type="info"
-          message="For security reasons, we don't confirm whether an account exists. Check your spam folder if you don't see the email."
-          className="mb-6 text-left"
-        />
-
         <div className="space-y-3">
           <Link to="/login">
             <Button variant="outline" className="w-full">
diff --git a/src/pages/org/CAsPage.tsx b/src/pages/org/CAsPage.tsx
index fbbfc89..baf80df 100644
--- a/src/pages/org/CAsPage.tsx
+++ b/src/pages/org/CAsPage.tsx
@@ -261,8 +261,7 @@ export default function CAsPage() {
           <div>
             <h1 className="page-title">Certificate Authorities</h1>
             <p className="page-description">
-              Manage your organization's SSH CAs — sign user and host certificates to eliminate
-              static <code>authorized_keys</code> files.
+              Manage your organization's SSH CAs with <code>Gatehouse</code>
             </p>
           </div>
         </div>
diff --git a/src/pages/org/MembersPage.tsx b/src/pages/org/MembersPage.tsx
index 957d2f6..726bd37 100644
--- a/src/pages/org/MembersPage.tsx
+++ b/src/pages/org/MembersPage.tsx
@@ -20,6 +20,12 @@ import {
   XCircle,
   Crown,
   Trash2,
+  ShieldOff,
+  Link2,
+  Unlink,
+  Smartphone,
+  KeyRound,
+  Lock,
 } from "lucide-react";
 import { useParams } from "react-router-dom";
 import { Button } from "@/components/ui/button";
@@ -60,7 +66,7 @@ import {
 } from "@/components/ui/sheet";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useToast } from "@/hooks/use-toast";
-import { api, OrganizationMember, ApiError, OrgInvite, SSHKey, User as ApiUser } from "@/lib/api";
+import { api, OrganizationMember, ApiError, OrgInvite, SSHKey, User as ApiUser, AdminMfaMethod, AdminLinkedAccount } from "@/lib/api";
 import { useCurrentOrganizationId } from "@/hooks/useCurrentOrganization";
 import { useAuth } from "@/contexts/AuthContext";
 
@@ -85,6 +91,10 @@ function formatDate(d: string | null | undefined) {
   });
 }
 
+function capitalize(s: string) {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+
 function isSuspended(status: string | undefined) {
   return status === "suspended" || status === "compliance_suspended";
 }
@@ -133,6 +143,24 @@ export default function MembersPage() {
   const [userSshKeys, setUserSshKeys] = useState<SSHKey[]>([]);
   const [isDrawerLoading, setIsDrawerLoading] = useState(false);
 
+  // ── MFA management (drawer) ──────────────────────────────────────────────────
+  const [userMfaMethods, setUserMfaMethods] = useState<AdminMfaMethod[]>([]);
+  const [removingMfaId, setRemovingMfaId] = useState<string | null>(null);
+  const [showRemoveAllMfa, setShowRemoveAllMfa] = useState(false);
+  const [isRemovingAllMfa, setIsRemovingAllMfa] = useState(false);
+
+  // ── Linked OAuth accounts (drawer) ──────────────────────────────────────────
+  const [userLinkedAccounts, setUserLinkedAccounts] = useState<AdminLinkedAccount[]>([]);
+  const [totalAuthMethods, setTotalAuthMethods] = useState(0);
+  const [unlinkingProvider, setUnlinkingProvider] = useState<string | null>(null);
+
+  // ── Admin set / change password (drawer) ────────────────────────────────────
+  const [adminPwNew, setAdminPwNew] = useState("");
+  const [adminPwConfirm, setAdminPwConfirm] = useState("");
+  const [adminPwError, setAdminPwError] = useState<string | null>(null);
+  const [isSettingPw, setIsSettingPw] = useState(false);
+  const [adminPwSuccess, setAdminPwSuccess] = useState(false);
+
   // ── Suspend / Unsuspend ──────────────────────────────────────────────────────
   const [isSuspending, setIsSuspending] = useState(false);
   const [showSuspendConfirm, setShowSuspendConfirm] = useState(false);
@@ -156,13 +184,94 @@ export default function MembersPage() {
   const [removeMember, setRemoveMember] = useState<OrganizationMember | null>(null);
   const [isRemoving, setIsRemoving] = useState(false);
 
+  // ── Remove MFA (drawer) ─────────────────────────────────────────────────────────
+  const handleRemoveMfaMethod = async (method: AdminMfaMethod) => {
+    if (!selectedMember) return;
+    setRemovingMfaId(method.id);
+    try {
+      const methodType = method.type as 'totp' | 'webauthn';
+      const credId = method.type === 'webauthn' ? method.id : undefined;
+      await api.admin.removeUserMfa(selectedMember.user_id, methodType, credId);
+      const refreshed = await api.admin.getUserMfa(selectedMember.user_id);
+      setUserMfaMethods(refreshed.mfa_methods);
+      toast({ title: 'MFA method removed', description: `${method.name} has been removed for ${selectedMember.user?.email}.` });
+    } catch (err) {
+      toast({ variant: 'destructive', title: 'Failed to remove MFA method', description: err instanceof ApiError ? err.message : 'Something went wrong.' });
+    } finally {
+      setRemovingMfaId(null);
+    }
+  };
+
+  const handleRemoveAllMfa = async () => {
+    if (!selectedMember) return;
+    setIsRemovingAllMfa(true);
+    try {
+      await api.admin.removeUserMfa(selectedMember.user_id, 'all');
+      setUserMfaMethods([]);
+      setShowRemoveAllMfa(false);
+      toast({ title: 'All MFA methods removed', description: `All MFA methods for ${selectedMember.user?.email} have been cleared.` });
+    } catch (err) {
+      toast({ variant: 'destructive', title: 'Failed to remove MFA methods', description: err instanceof ApiError ? err.message : 'Something went wrong.' });
+    } finally {
+      setIsRemovingAllMfa(false);
+    }
+  };
+
+  // ── Unlink OAuth provider (drawer) ────────────────────────────────────────────
+  const handleUnlinkProvider = async (account: AdminLinkedAccount) => {
+    if (!selectedMember) return;
+    setUnlinkingProvider(account.id);
+    try {
+      await api.admin.adminUnlinkUserProvider(selectedMember.user_id, account.provider_type);
+      setUserLinkedAccounts((prev) => prev.filter((a) => a.id !== account.id));
+      setTotalAuthMethods((prev) => prev - 1);
+      toast({ title: 'Provider unlinked', description: `${capitalize(account.provider_type)} has been unlinked from ${selectedMember.user?.email}.` });
+    } catch (err) {
+      toast({ variant: 'destructive', title: 'Failed to unlink provider', description: err instanceof ApiError ? err.message : 'Something went wrong.' });
+    } finally {
+      setUnlinkingProvider(null);
+    }
+  };
+
+  // ── Admin set / change password ──────────────────────────────────────────────
+  const handleAdminSetPassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedMember) return;
+    setAdminPwError(null);
+    setAdminPwSuccess(false);
+    if (adminPwNew.length < 8) {
+      setAdminPwError("Password must be at least 8 characters.");
+      return;
+    }
+    if (adminPwNew !== adminPwConfirm) {
+      setAdminPwError("Passwords do not match.");
+      return;
+    }
+    setIsSettingPw(true);
+    try {
+      await api.admin.adminSetUserPassword(selectedMember.user_id, adminPwNew);
+      setAdminPwNew("");
+      setAdminPwConfirm("");
+      setAdminPwSuccess(true);
+      // Refresh detailUser so has_password reflects the new state
+      const refreshed = await api.admin.getUser(selectedMember.user_id);
+      setDetailUser(refreshed.user);
+      toast({ title: detailUser?.has_password ? "Password updated" : "Password set", description: `Password ${detailUser?.has_password ? "changed" : "created"} for ${selectedMember.user?.email}.` });
+    } catch (err) {
+      setAdminPwError(err instanceof ApiError ? err.message : "Failed to update password.");
+    } finally {
+      setIsSettingPw(false);
+    }
+  };
+
+
   // ── Invite ───────────────────────────────────────────────────────────────────
   const [inviteEmail, setInviteEmail] = useState("");
   const [inviteRole, setInviteRole] = useState("member");
   const [isInviting, setIsInviting] = useState(false);
   const [inviteError, setInviteError] = useState<string | null>(null);
 
-  // Invite link dialog (when SMTP not configured)
+  // Invite link dialog
   const [inviteLink, setInviteLink] = useState<string | null>(null);
   const [inviteLinkEmail, setInviteLinkEmail] = useState("");
   const [linkCopied, setLinkCopied] = useState(false);
@@ -226,10 +335,24 @@ export default function MembersPage() {
     setDetailUser(null);
     setUserSshKeys([]);
     setIsDrawerLoading(true);
+    setUserMfaMethods([]);
+    setUserLinkedAccounts([]);
+    setTotalAuthMethods(0);
     try {
-      const data = await api.admin.getUser(member.user_id);
-      setDetailUser(data.user);
-      setUserSshKeys(data.ssh_keys);
+      const [userData, mfaData, linkedData] = await Promise.allSettled([
+        api.admin.getUser(member.user_id),
+        api.admin.getUserMfa(member.user_id),
+        api.admin.getUserLinkedAccounts(member.user_id),
+      ]);
+      if (userData.status === 'fulfilled') {
+        setDetailUser(userData.value.user);
+        setUserSshKeys(userData.value.ssh_keys);
+      }
+      if (mfaData.status === 'fulfilled') setUserMfaMethods(mfaData.value.mfa_methods);
+      if (linkedData.status === 'fulfilled') {
+        setUserLinkedAccounts(linkedData.value.linked_accounts);
+        setTotalAuthMethods(linkedData.value.total_auth_methods);
+      }
     } catch {
       // Non-fatal — drawer still shows member info
     } finally {
@@ -241,6 +364,13 @@ export default function MembersPage() {
     setSelectedMember(null);
     setDetailUser(null);
     setUserSshKeys([]);
+    setUserMfaMethods([]);
+    setUserLinkedAccounts([]);
+    setTotalAuthMethods(0);
+    setAdminPwNew("");
+    setAdminPwConfirm("");
+    setAdminPwError(null);
+    setAdminPwSuccess(false);
   };
 
   // ── Role change (drawer inline select) ──────────────────────────────────────
@@ -948,6 +1078,190 @@ export default function MembersPage() {
                     </div>
                   )}
 
+                  {/* MFA Methods */}
+                  {selectedMember.user?.id !== currentUser?.id && (
+                    <div className="mb-6 p-4 border rounded-lg space-y-3">
+                      <div className="flex items-center justify-between">
+                        <h3 className="text-sm font-semibold flex items-center gap-2">
+                          <ShieldOff className="w-4 h-4" />
+                          MFA / 2FA Methods
+                        </h3>
+                        {userMfaMethods.length > 1 && (
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            onClick={() => setShowRemoveAllMfa(true)}
+                            className="text-red-600 border-red-300 hover:bg-red-50 text-xs"
+                          >
+                            <Trash2 className="w-3 h-3 mr-1" />
+                            Remove all
+                          </Button>
+                        )}
+                      </div>
+                      {isDrawerLoading ? (
+                        <div className="flex items-center justify-center py-4">
+                          <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
+                        </div>
+                      ) : userMfaMethods.length === 0 ? (
+                        <p className="text-sm text-muted-foreground">No MFA methods configured.</p>
+                      ) : (
+                        <div className="space-y-2">
+                          {userMfaMethods.map((method) => (
+                            <div key={method.id} className="flex items-center justify-between p-3 border rounded-lg text-sm">
+                              <div className="flex items-center gap-2 min-w-0">
+                                {method.type === "totp" ? (
+                                  <Smartphone className="w-4 h-4 text-blue-500 flex-shrink-0" />
+                                ) : (
+                                  <KeyRound className="w-4 h-4 text-purple-500 flex-shrink-0" />
+                                )}
+                                <div className="min-w-0">
+                                  <p className="font-medium truncate">{method.name}</p>
+                                  {method.last_used_at && (
+                                    <p className="text-xs text-muted-foreground">
+                                      Last used: {formatDate(method.last_used_at)}
+                                    </p>
+                                  )}
+                                </div>
+                              </div>
+                              <Button
+                                size="sm"
+                                variant="ghost"
+                                onClick={() => handleRemoveMfaMethod(method)}
+                                disabled={removingMfaId === method.id}
+                                className="text-red-600 hover:bg-red-50 flex-shrink-0 ml-2"
+                                title={`Remove ${method.name}`}
+                              >
+                                {removingMfaId === method.id ? (
+                                  <Loader2 className="w-4 h-4 animate-spin" />
+                                ) : (
+                                  <Trash2 className="w-4 h-4" />
+                                )}
+                              </Button>
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                      <p className="text-xs text-muted-foreground">
+                        Remove an MFA method if the user has lost access (e.g. lost phone or passkey). They can re-enroll after removal.
+                      </p>
+                    </div>
+                  )}
+
+                  {/* Linked OAuth Accounts */}
+                  {selectedMember.user?.id !== currentUser?.id && (
+                    <div className="mb-6 p-4 border rounded-lg space-y-3">
+                      <h3 className="text-sm font-semibold flex items-center gap-2">
+                        <Link2 className="w-4 h-4" />
+                        Linked OAuth Accounts
+                      </h3>
+                      {isDrawerLoading ? (
+                        <div className="flex items-center justify-center py-4">
+                          <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
+                        </div>
+                      ) : userLinkedAccounts.length === 0 ? (
+                        <p className="text-sm text-muted-foreground">No OAuth providers linked.</p>
+                      ) : (
+                        <div className="space-y-2">
+                          {userLinkedAccounts.map((account) => {
+                            const isOnlyMethod = totalAuthMethods <= 1;
+                            return (
+                              <div key={account.id} className="flex items-center justify-between p-3 border rounded-lg text-sm">
+                                <div className="flex items-center gap-2 min-w-0">
+                                  <Link2 className="w-4 h-4 text-blue-500 flex-shrink-0" />
+                                  <div className="min-w-0">
+                                    <p className="font-medium capitalize">{account.provider_type}</p>
+                                    {account.email && (
+                                      <p className="text-xs text-muted-foreground truncate">{account.email}</p>
+                                    )}
+                                    {account.linked_at && (
+                                      <p className="text-xs text-muted-foreground">
+                                        Linked: {formatDate(account.linked_at)}
+                                      </p>
+                                    )}
+                                  </div>
+                                </div>
+                                <Button
+                                  size="sm"
+                                  variant="ghost"
+                                  onClick={() => handleUnlinkProvider(account)}
+                                  disabled={unlinkingProvider === account.id || isOnlyMethod}
+                                  className="text-red-600 hover:bg-red-50 flex-shrink-0 ml-2"
+                                  title={isOnlyMethod ? "Cannot unlink — this is the user's only sign-in method" : `Unlink ${account.provider_type}`}
+                                >
+                                  {unlinkingProvider === account.id ? (
+                                    <Loader2 className="w-4 h-4 animate-spin" />
+                                  ) : (
+                                    <Unlink className="w-4 h-4" />
+                                  )}
+                                </Button>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      )}
+                      <p className="text-xs text-muted-foreground">
+                        Unlink a provider to prevent sign-in via that provider. Cannot unlink if it is the user's only sign-in method.
+                      </p>
+                    </div>
+                  )}
+
+                  {/* Password Management */}
+                  {selectedMember.user?.id !== currentUser?.id && (
+                    <div className="mb-2 p-4 border rounded-lg space-y-3">
+                      <h3 className="text-sm font-semibold flex items-center gap-2">
+                        <Lock className="w-4 h-4" />
+                        {detailUser?.has_password ? "Reset Password" : "Set Password"}
+                      </h3>
+                      <p className="text-sm text-muted-foreground">
+                        {detailUser?.has_password
+                          ? "Override this user's current password. They will need to use the new password on next login."
+                          : "This user has no password configured (sign-in via OIDC/OAuth only). Set one to enable email/password login."}
+                      </p>
+                      <form onSubmit={handleAdminSetPassword} className="space-y-2">
+                        <Input
+                          type="password"
+                          placeholder="New password"
+                          value={adminPwNew}
+                          onChange={(e) => { setAdminPwNew(e.target.value); setAdminPwError(null); setAdminPwSuccess(false); }}
+                          disabled={isSettingPw}
+                          autoComplete="new-password"
+                        />
+                        <Input
+                          type="password"
+                          placeholder="Confirm password"
+                          value={adminPwConfirm}
+                          onChange={(e) => { setAdminPwConfirm(e.target.value); setAdminPwError(null); setAdminPwSuccess(false); }}
+                          disabled={isSettingPw}
+                          autoComplete="new-password"
+                        />
+                        {adminPwError && (
+                          <p className="text-sm text-destructive flex items-center gap-1">
+                            <AlertTriangle className="w-3 h-3 flex-shrink-0" />
+                            {adminPwError}
+                          </p>
+                        )}
+                        {adminPwSuccess && (
+                          <p className="text-sm text-green-600 flex items-center gap-1">
+                            <CheckCircle className="w-3 h-3 flex-shrink-0" />
+                            Password updated successfully.
+                          </p>
+                        )}
+                        <Button
+                          type="submit"
+                          size="sm"
+                          variant="outline"
+                          disabled={isSettingPw || !adminPwNew || !adminPwConfirm}
+                        >
+                          {isSettingPw ? (
+                            <><Loader2 className="w-4 h-4 mr-2 animate-spin" />Saving...</>
+                          ) : (
+                            <><Lock className="w-4 h-4 mr-2" />{detailUser?.has_password ? "Reset password" : "Set password"}</>
+                          )}
+                        </Button>
+                      </form>
+                    </div>
+                  )}
+
                   {/* SSH Keys */}
                   <div className="space-y-3">
                     <div className="flex items-center justify-between">
@@ -1053,6 +1367,31 @@ export default function MembersPage() {
         </DialogContent>
       </Dialog>
 
+      {/* ── Remove all MFA confirmation dialog ───────────────────────────── */}
+      <Dialog open={showRemoveAllMfa} onOpenChange={setShowRemoveAllMfa}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 text-red-600">
+              <AlertTriangle className="w-5 h-5" />
+              Remove all MFA methods?
+            </DialogTitle>
+            <DialogDescription>
+              This will remove <strong>all</strong> MFA methods (TOTP and passkeys) for{" "}
+              <strong>{selectedMember?.user?.email}</strong>. They will be able to re-enroll after this action.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowRemoveAllMfa(false)} disabled={isRemovingAllMfa}>
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={handleRemoveAllMfa} disabled={isRemovingAllMfa}>
+              {isRemovingAllMfa && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+              Remove all MFA
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
       {/* ── Suspend confirmation dialog ───────────────────────────────────────── */}
       <Dialog open={showSuspendConfirm} onOpenChange={setShowSuspendConfirm}>
         <DialogContent className="sm:max-w-md">
diff --git a/src/pages/org/OIDCClientsPage.tsx b/src/pages/org/OIDCClientsPage.tsx
index 4b4424c..33439a2 100644
--- a/src/pages/org/OIDCClientsPage.tsx
+++ b/src/pages/org/OIDCClientsPage.tsx
@@ -1,8 +1,18 @@
 import { useState, useEffect, useRef } from "react";
-import { Plus, Key, MoreHorizontal, Copy, Trash2, Loader2, AlertCircle, CheckCircle } from "lucide-react";
+import {
+  Plus, Key, MoreHorizontal, Copy, Trash2, Loader2,
+  AlertCircle, CheckCircle, Network, Terminal, Check,
+  ChevronDown, Globe, RefreshCw, Info,
+} from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -16,53 +26,112 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { api, OIDCClient, OIDCClientWithSecret } from "@/lib/api";
 import { useToast } from "@/hooks/use-toast";
 import { useOrg } from "@/contexts/OrgContext";
 
+// Derive issuer base URL from the API base
+const ISSUER_URL = (import.meta.env.VITE_API_BASE_URL ?? "http://localhost:5000/api/v1")
+  .replace(/\/api\/v1\/?$/, "");
+
+function buildProxyConfig(clientId: string, clientSecret: string, proxyHost: string) {
+  return `provider = "oidc"
+oidc_issuer_url = "${ISSUER_URL}"
+client_id     = "${clientId}"
+client_secret = "${clientSecret}"
+redirect_url  = "http://${proxyHost}/oauth2/callback"
+scope         = "openid profile email"
+cookie_secret = "$(openssl rand -base64 32 | head -c 32)"
+cookie_secure = false
+upstream      = "http://127.0.0.1:8080/"
+set_authorization_header  = true
+set_x_auth_request_header = true`;
+}
+
+function useCopyButton() {
+  const [copied, setCopied] = useState(false);
+  const copy = (text: string) => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+  return { copied, copy };
+}
+
+type DialogMode = "generic" | "proxy" | null;
+
+interface NewSecretState {
+  clientId: string;
+  secret: string;
+  proxyHost?: string;
+  isProxy: boolean;
+}
+
 export default function OIDCClientsPage() {
   const { toast } = useToast();
   const { selectedOrgId: orgId } = useOrg();
+  const { copy: copySecret, copied: secretCopied } = useCopyButton();
+  const { copy: copyConfig, copied: configCopied } = useCopyButton();
+
   const [clients, setClients] = useState<OIDCClient[]>([]);
   const [isLoading, setIsLoading] = useState(true);
-  const [isCreateOpen, setIsCreateOpen] = useState(false);
+  const [dialogMode, setDialogMode] = useState<DialogMode>(null);
   const [isCreating, setIsCreating] = useState(false);
-  const [newSecret, setNewSecret] = useState<{ clientId: string; secret: string } | null>(null);
+  const [newSecret, setNewSecret] = useState<NewSecretState | null>(null);
 
+  // Generic form
   const nameRef = useRef<HTMLInputElement>(null);
   const urisRef = useRef<HTMLTextAreaElement>(null);
 
-  const loadData = (id: string) => {
-    api.organizations.getClients(id)
-      .then((data) => setClients(data.clients))
-      .catch(() => toast({ title: "Error", description: "Failed to load OIDC clients.", variant: "destructive" }))
-      .finally(() => setIsLoading(false));
-  };
+  // Proxy form
+  const proxyNameRef = useRef<HTMLInputElement>(null);
+  const proxyHostRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     if (!orgId) { setIsLoading(false); return; }
     setIsLoading(true);
-    loadData(orgId);
+    api.organizations.getClients(orgId)
+      .then((data) => setClients(data.clients))
+      .catch(() => toast({ title: "Error", description: "Failed to load OIDC clients.", variant: "destructive" }))
+      .finally(() => setIsLoading(false));
   }, [orgId]);
 
   const handleCreate = async () => {
-    if (!orgId || !nameRef.current || !urisRef.current) return;
-    const name = nameRef.current.value.trim();
-    const uris = urisRef.current.value.trim().split(/[\n,]+/).map((u) => u.trim()).filter(Boolean);
-    if (!name || !uris.length) return;
+    if (!orgId) return;
+
+    let name: string;
+    let uris: string[];
+    let proxyHost: string | undefined;
+
+    if (dialogMode === "generic") {
+      name = nameRef.current?.value.trim() ?? "";
+      uris = (urisRef.current?.value ?? "").split(/[\n,]+/).map((u) => u.trim()).filter(Boolean);
+      if (!name || !uris.length) return;
+    } else {
+      name = proxyNameRef.current?.value.trim() ?? "";
+      proxyHost = proxyHostRef.current?.value.trim() ?? "";
+      if (!name || !proxyHost) return;
+      uris = [`http://${proxyHost}/oauth2/callback`];
+    }
 
     setIsCreating(true);
     try {
       const result = await api.organizations.createClient(orgId, name, uris);
       const created = result.client as OIDCClientWithSecret;
       setClients((prev) => [...prev, created]);
-      setNewSecret({ clientId: created.client_id, secret: created.client_secret });
-      setIsCreateOpen(false);
+      setNewSecret({
+        clientId: created.client_id,
+        secret: created.client_secret,
+        proxyHost,
+        isProxy: dialogMode === "proxy",
+      });
+      setDialogMode(null);
     } catch {
       toast({ title: "Error", description: "Failed to create client.", variant: "destructive" });
     } finally {
@@ -75,127 +144,139 @@ export default function OIDCClientsPage() {
     try {
       await api.organizations.deleteClient(orgId, clientId);
       setClients((prev) => prev.filter((c) => c.id !== clientId));
-      toast({ title: "Client deleted", description: "OIDC client deactivated successfully." });
+      toast({ title: "Client deleted" });
     } catch {
       toast({ title: "Error", description: "Failed to delete client.", variant: "destructive" });
     }
   };
 
-  const copyToClipboard = (text: string) => {
-    navigator.clipboard.writeText(text).then(() =>
-      toast({ title: "Copied", description: "Copied to clipboard." })
-    );
-  };
+  const proxyConfig = newSecret?.isProxy && newSecret.proxyHost
+    ? buildProxyConfig(newSecret.clientId, newSecret.secret, newSecret.proxyHost)
+    : null;
 
   return (
     <div className="page-container">
+      {/* Header */}
       <div className="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
           <h1 className="page-title">OIDC Clients</h1>
-          <p className="page-description">
-            Manage applications that authenticate via Gatehouse
-          </p>
+          <p className="page-description">Applications that authenticate via Gatehouse</p>
         </div>
-        <Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
-          <DialogTrigger asChild>
-            <Button>
-              <Plus className="w-4 h-4 mr-2" />
-              Add client
-            </Button>
-          </DialogTrigger>
-          <DialogContent className="sm:max-w-md">
-            <DialogHeader>
-              <DialogTitle>Create OIDC Client</DialogTitle>
-              <DialogDescription>
-                Register a new application to authenticate via Gatehouse
-              </DialogDescription>
-            </DialogHeader>
-            <div className="space-y-4 py-4">
-              <div className="space-y-2">
-                <Label htmlFor="clientName">Client name</Label>
-                <Input id="clientName" placeholder="My Application" ref={nameRef} />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="redirectUris">Redirect URIs</Label>
-                <Textarea
-                  id="redirectUris"
-                  placeholder="https://myapp.example.com/callback"
-                  className="min-h-[80px]"
-                  ref={urisRef}
-                />
-                <p className="text-xs text-muted-foreground">
-                  One URI per line. These are the allowed callback URLs.
-                </p>
-              </div>
-              <div className="flex justify-end gap-2">
-                <Button variant="outline" onClick={() => setIsCreateOpen(false)} disabled={isCreating}>
-                  Cancel
-                </Button>
-                <Button onClick={handleCreate} disabled={isCreating}>
-                  {isCreating ? <><Loader2 className="w-4 h-4 mr-2 animate-spin" />Creating...</> : "Create client"}
-                </Button>
-              </div>
-            </div>
-          </DialogContent>
-        </Dialog>
+        <Button onClick={() => setDialogMode("generic")}>
+          <Plus className="w-4 h-4 mr-2" />
+          Add client
+        </Button>
       </div>
 
-      {/* Show new client secret once */}
+      {/* One-time secret banner */}
       {newSecret && (
-        <Card className="mb-4 border-success/50 bg-success/5">
-          <CardContent className="p-4 flex items-start gap-3">
-            <CheckCircle className="w-5 h-5 text-success mt-0.5 flex-shrink-0" />
-            <div className="flex-1 min-w-0">
-              <p className="font-medium text-foreground">Client created — save your secret now</p>
-              <p className="text-sm text-muted-foreground mb-2">This secret will not be shown again.</p>
-              <div className="flex items-center gap-2">
-                <code className="text-xs bg-muted px-2 py-1 rounded font-mono break-all">{newSecret.secret}</code>
-                <Button variant="ghost" size="icon" className="w-6 h-6 flex-shrink-0" onClick={() => copyToClipboard(newSecret.secret)}>
-                  <Copy className="w-3 h-3" />
-                </Button>
+        <Card className="mb-6 border-green-500/40 bg-green-500/5">
+          <CardContent className="p-4">
+            <div className="flex items-start gap-3">
+              <CheckCircle className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" />
+              <div className="flex-1 min-w-0 space-y-3">
+                <div>
+                  <p className="font-medium">Client created — save your secret now</p>
+                  <p className="text-sm text-muted-foreground">This will not be shown again.</p>
+                </div>
+
+                {/* Secret row */}
+                <div className="space-y-1">
+                  <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Client secret</p>
+                  <div className="flex items-center gap-2">
+                    <code className="flex-1 text-xs bg-muted px-3 py-2 rounded font-mono break-all">
+                      {newSecret.secret}
+                    </code>
+                    <Button variant="outline" size="sm" onClick={() => copySecret(newSecret.secret)}>
+                      {secretCopied ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
+                    </Button>
+                  </div>
+                </div>
+
+                {/* oauth2-proxy config snippet */}
+                {proxyConfig && (
+                  <div className="space-y-1">
+                    <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide flex items-center gap-1.5">
+                      <Terminal className="w-3 h-3" />
+                      oauth2-proxy config
+                    </p>
+                    <div className="relative">
+                      <pre className="text-xs bg-muted px-3 py-2 rounded font-mono overflow-x-auto whitespace-pre">
+                        {proxyConfig}
+                      </pre>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="absolute top-2 right-2"
+                        onClick={() => copyConfig(proxyConfig)}
+                      >
+                        {configCopied ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
+                      </Button>
+                    </div>
+                  </div>
+                )}
               </div>
+              <Button variant="ghost" size="icon" className="w-7 h-7 flex-shrink-0" onClick={() => setNewSecret(null)}>
+                ×
+              </Button>
             </div>
-            <Button variant="ghost" size="icon" className="w-6 h-6" onClick={() => setNewSecret(null)}>×</Button>
           </CardContent>
         </Card>
       )}
 
+      {/* Client list */}
       {isLoading ? (
-        <div className="flex items-center justify-center py-12">
+        <div className="flex items-center justify-center py-16">
           <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
         </div>
       ) : clients.length === 0 ? (
         <Card>
-          <CardContent className="text-center py-12">
-            <AlertCircle className="w-10 h-10 mx-auto mb-3 text-muted-foreground/50" />
-            <p className="text-muted-foreground">No OIDC clients configured yet.</p>
-            <Button className="mt-4" onClick={() => setIsCreateOpen(true)}>
-              <Plus className="w-4 h-4 mr-2" />
-              Add your first client
-            </Button>
+          <CardContent className="py-16 flex flex-col items-center gap-4 text-center">
+            <Network className="w-10 h-10 text-muted-foreground/40" />
+            <div>
+              <p className="font-medium text-muted-foreground">No OIDC clients yet</p>
+              <p className="text-sm text-muted-foreground/70">Register an app to let it authenticate via Gatehouse</p>
+            </div>
+            <div className="flex gap-2 flex-wrap justify-center">
+              <Button variant="outline" onClick={() => setDialogMode("generic")}>
+                <Plus className="w-4 h-4 mr-2" />
+                Generic app
+              </Button>
+              <Button variant="outline" onClick={() => setDialogMode("proxy")}>
+                <Terminal className="w-4 h-4 mr-2" />
+                oauth2-proxy
+              </Button>
+            </div>
           </CardContent>
         </Card>
       ) : (
-        <div className="space-y-4">
+        <div className="space-y-3">
           {clients.map((client) => (
             <Card key={client.id}>
-              <CardContent className="p-5">
-                <div className="flex items-start justify-between">
-                  <div className="flex items-start gap-4">
-                    <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
-                      <Key className="w-6 h-6 text-primary" />
+              <CardContent className="p-4">
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex items-start gap-3 min-w-0">
+                    <div className="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
+                      <Key className="w-4 h-4 text-primary" />
                     </div>
-                    <div>
-                      <h3 className="font-semibold text-foreground">{client.name}</h3>
-                      <div className="flex items-center gap-2 mt-1">
-                        <code className="text-xs bg-muted px-2 py-1 rounded font-mono">
+                    <div className="min-w-0">
+                      <p className="font-semibold truncate">{client.name}</p>
+                      <div className="flex items-center gap-1.5 mt-1">
+                        <code className="text-xs bg-muted px-2 py-0.5 rounded font-mono truncate max-w-[260px]">
                           {client.client_id}
                         </code>
-                        <Button variant="ghost" size="icon" className="w-6 h-6" onClick={() => copyToClipboard(client.client_id)}>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="w-5 h-5 flex-shrink-0"
+                          onClick={() => navigator.clipboard.writeText(client.client_id).then(() =>
+                            toast({ title: "Copied client ID" })
+                          )}
+                        >
                           <Copy className="w-3 h-3" />
                         </Button>
                       </div>
-                      <div className="flex flex-wrap gap-1 mt-3">
+                      <div className="flex flex-wrap gap-1 mt-2">
                         {(client.scopes ?? []).map((scope) => (
                           <Badge key={scope} variant="secondary" className="text-xs">
                             {scope}
@@ -206,7 +287,7 @@ export default function OIDCClientsPage() {
                   </div>
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
-                      <Button variant="ghost" size="icon">
+                      <Button variant="ghost" size="icon" className="flex-shrink-0">
                         <MoreHorizontal className="w-4 h-4" />
                       </Button>
                     </DropdownMenuTrigger>
@@ -217,24 +298,288 @@ export default function OIDCClientsPage() {
                         onClick={() => handleDelete(client.id)}
                       >
                         <Trash2 className="w-4 h-4 mr-2" />
-                        Delete client
+                        Delete
                       </DropdownMenuItem>
                     </DropdownMenuContent>
                   </DropdownMenu>
                 </div>
-                <div className="mt-4 pt-4 border-t flex items-center justify-between text-sm text-muted-foreground">
+                <div className="mt-3 pt-3 border-t flex items-center justify-between text-xs text-muted-foreground">
+                  <span>Created {new Date(client.created_at).toLocaleDateString()}</span>
                   <span>
-                    Created {new Date(client.created_at).toLocaleDateString()}
-                  </span>
-                  <div className="flex items-center gap-1">
                     {(client.redirect_uris ?? []).length} redirect URI{(client.redirect_uris ?? []).length !== 1 ? "s" : ""}
-                  </div>
+                  </span>
                 </div>
               </CardContent>
             </Card>
           ))}
         </div>
       )}
+
+      {/* Create dialog */}
+      <Dialog open={dialogMode !== null} onOpenChange={(open) => { if (!open) setDialogMode(null); }}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>Add OIDC Client</DialogTitle>
+            <DialogDescription>Register an application to authenticate via Gatehouse</DialogDescription>
+          </DialogHeader>
+
+          <Tabs
+            value={dialogMode ?? "generic"}
+            onValueChange={(v) => setDialogMode(v as DialogMode)}
+            className="mt-2"
+          >
+            <TabsList className="w-full">
+              <TabsTrigger value="generic" className="flex-1">Generic app</TabsTrigger>
+              <TabsTrigger value="proxy" className="flex-1 flex items-center gap-1.5">
+                <Terminal className="w-3 h-3" />
+                oauth2-proxy
+              </TabsTrigger>
+            </TabsList>
+
+            {/* Generic tab */}
+            <TabsContent value="generic" className="space-y-4 pt-4">
+              <div className="space-y-2">
+                <Label htmlFor="genericName">Client name</Label>
+                <Input id="genericName" placeholder="My Application" ref={nameRef} />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="redirectUris">Redirect URIs</Label>
+                <Textarea
+                  id="redirectUris"
+                  placeholder={"https://myapp.example.com/callback\nhttps://myapp.example.com/auth/callback"}
+                  className="min-h-[80px] font-mono text-sm"
+                  ref={urisRef}
+                />
+                <p className="text-xs text-muted-foreground">One URI per line</p>
+              </div>
+            </TabsContent>
+
+            {/* oauth2-proxy tab */}
+            <TabsContent value="proxy" className="space-y-4 pt-4">
+              <div className="space-y-2">
+                <Label htmlFor="proxyName">Client name</Label>
+                <Input id="proxyName" placeholder="My Protected App" ref={proxyNameRef} />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="proxyHost">Proxy host</Label>
+                <Input id="proxyHost" placeholder="app.example.com" ref={proxyHostRef} />
+                <p className="text-xs text-muted-foreground">
+                  The hostname where oauth2-proxy runs. Redirect URI will be set to{" "}
+                  <code className="bg-muted px-1 rounded">http://{"<host>"}/oauth2/callback</code> automatically.
+                </p>
+              </div>
+              <div className="rounded-md bg-muted/50 border px-3 py-2 text-xs text-muted-foreground">
+                After creating, you'll get a ready-to-paste config snippet for oauth2-proxy.
+              </div>
+            </TabsContent>
+          </Tabs>
+
+          <div className="flex justify-end gap-2 pt-2">
+            <Button variant="outline" onClick={() => setDialogMode(null)} disabled={isCreating}>
+              Cancel
+            </Button>
+            <Button onClick={handleCreate} disabled={isCreating}>
+              {isCreating ? (
+                <><Loader2 className="w-4 h-4 mr-2 animate-spin" />Creating…</>
+              ) : (
+                "Create client"
+              )}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── Reference ─────────────────────────────────────────── */}
+      <div className="mt-8">
+        <div className="flex items-center gap-2 mb-3 text-sm font-medium text-muted-foreground">
+          <Info className="w-4 h-4" />
+          Integration reference
+        </div>
+
+        <Accordion type="multiple" className="space-y-2">
+
+          {/* Endpoints */}
+          <AccordionItem value="endpoints" className="border rounded-lg px-4">
+            <AccordionTrigger className="text-sm font-medium hover:no-underline py-3">
+              <span className="flex items-center gap-2">
+                <Globe className="w-4 h-4 text-muted-foreground" />
+                OIDC endpoints
+              </span>
+            </AccordionTrigger>
+            <AccordionContent className="pb-4">
+              <div className="space-y-2 text-xs font-mono">
+                {[
+                  ["Discovery",      "GET",  "/.well-known/openid-configuration"],
+                  ["Authorization",  "GET",  "/oidc/authorize"],
+                  ["Token",          "POST", "/oidc/token"],
+                  ["UserInfo",       "GET",  "/oidc/userinfo"],
+                  ["JWKS",           "GET",  "/oidc/jwks"],
+                  ["Revocation",     "POST", "/oidc/revoke"],
+                  ["Introspection",  "POST", "/oidc/introspect"],
+                ].map(([label, method, path]) => (
+                  <div key={path} className="flex items-center gap-3">
+                    <Badge
+                      variant="outline"
+                      className={`w-12 justify-center text-[10px] shrink-0 ${method === "POST" ? "border-orange-500/50 text-orange-500" : "border-blue-500/50 text-blue-500"}`}
+                    >
+                      {method}
+                    </Badge>
+                    <code className="text-muted-foreground">{ISSUER_URL}{path}</code>
+                  </div>
+                ))}
+              </div>
+              <p className="text-xs text-muted-foreground mt-3">
+                Issuer: <code className="bg-muted px-1 rounded">{ISSUER_URL}</code>
+              </p>
+            </AccordionContent>
+          </AccordionItem>
+
+          {/* Scopes & flows */}
+          <AccordionItem value="scopes" className="border rounded-lg px-4">
+            <AccordionTrigger className="text-sm font-medium hover:no-underline py-3">
+              <span className="flex items-center gap-2">
+                <Key className="w-4 h-4 text-muted-foreground" />
+                Scopes &amp; flows
+              </span>
+            </AccordionTrigger>
+            <AccordionContent className="pb-4 space-y-4">
+              <div>
+                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">Available scopes</p>
+                <div className="flex flex-wrap gap-2">
+                  {[
+                    ["openid",   "Required. Issues an ID token."],
+                    ["profile",  "Includes name, given_name, family_name."],
+                    ["email",    "Includes email and email_verified."],
+                  ].map(([scope, desc]) => (
+                    <div key={scope} className="flex items-start gap-2">
+                      <Badge variant="secondary" className="font-mono text-xs shrink-0">{scope}</Badge>
+                      <span className="text-xs text-muted-foreground">{desc}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div>
+                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">Supported flows</p>
+                <div className="space-y-1 text-xs">
+                  <div className="flex items-center gap-2">
+                    <CheckCircle className="w-3.5 h-3.5 text-green-500 shrink-0" />
+                    <span><strong>Authorization Code + PKCE</strong> — recommended for all clients</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <RefreshCw className="w-3.5 h-3.5 text-blue-500 shrink-0" />
+                    <span><strong>Refresh Token</strong> — token rotation supported</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <AlertCircle className="w-3.5 h-3.5 text-yellow-500 shrink-0" />
+                    <span><strong>Authorization Code (no PKCE)</strong> — deprecated, PKCE required for new clients</span>
+                  </div>
+                </div>
+              </div>
+              <div>
+                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">ID token claims</p>
+                <div className="flex flex-wrap gap-1.5">
+                  {["sub", "name", "email", "email_verified", "given_name", "family_name"].map((c) => (
+                    <code key={c} className="text-xs bg-muted px-1.5 py-0.5 rounded">{c}</code>
+                  ))}
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+
+          {/* oauth2-proxy quick-reference */}
+          <AccordionItem value="proxy-ref" className="border rounded-lg px-4">
+            <AccordionTrigger className="text-sm font-medium hover:no-underline py-3">
+              <span className="flex items-center gap-2">
+                <Terminal className="w-4 h-4 text-muted-foreground" />
+                oauth2-proxy setup
+              </span>
+            </AccordionTrigger>
+            <AccordionContent className="pb-4 space-y-4">
+              <p className="text-xs text-muted-foreground">
+                Use the <strong>oauth2-proxy</strong> tab when creating a client to get a pre-filled config. Or build it manually:
+              </p>
+
+              {/* Step 1 */}
+              <div className="space-y-1">
+                <p className="text-xs font-medium">1 — Create a client (use the dialog above)</p>
+                <p className="text-xs text-muted-foreground">
+                  Set the redirect URI to <code className="bg-muted px-1 rounded">http://&lt;your-proxy-host&gt;/oauth2/callback</code>.
+                </p>
+              </div>
+
+              {/* Step 2 */}
+              <div className="space-y-1">
+                <p className="text-xs font-medium">2 — Minimal config</p>
+                <pre className="text-xs bg-muted rounded p-3 font-mono overflow-x-auto whitespace-pre">{`provider          = "oidc"
+oidc_issuer_url   = "${ISSUER_URL}"
+client_id         = "<your-client-id>"
+client_secret     = "<your-client-secret>"
+redirect_url      = "http://<proxy-host>/oauth2/callback"
+scope             = "openid profile email"
+cookie_secret     = "$(openssl rand -base64 32 | head -c 32)"
+upstream          = "http://127.0.0.1:8080/"
+set_authorization_header  = true
+set_x_auth_request_header = true`}</pre>
+              </div>
+
+              {/* Step 3 */}
+              <div className="space-y-1">
+                <p className="text-xs font-medium">3 — Run it</p>
+                <pre className="text-xs bg-muted rounded p-3 font-mono overflow-x-auto">{`oauth2-proxy --config ./oauth2-proxy.cfg`}</pre>
+              </div>
+
+              {/* Useful headers */}
+              <div className="space-y-2">
+                <p className="text-xs font-medium">Headers forwarded to your upstream</p>
+                <div className="space-y-1 text-xs font-mono">
+                  {[
+                    ["X-Auth-Request-User",  "User's subject (sub claim)"],
+                    ["X-Auth-Request-Email", "User's email address"],
+                    ["Authorization",        "Bearer <access_token>  (if set_authorization_header = true)"],
+                  ].map(([header, desc]) => (
+                    <div key={header} className="flex items-start gap-3">
+                      <code className="text-muted-foreground shrink-0">{header}</code>
+                      <span className="text-muted-foreground/70 font-sans">{desc}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Docker Compose snippet */}
+              <div className="space-y-1">
+                <p className="text-xs font-medium">Docker Compose example</p>
+                <pre className="text-xs bg-muted rounded p-3 font-mono overflow-x-auto whitespace-pre">{`services:
+  oauth2-proxy:
+    image: oauth2-proxy/oauth2-proxy:latest
+    ports: ["4180:4180"]
+    environment:
+      OAUTH2_PROXY_PROVIDER: oidc
+      OAUTH2_PROXY_OIDC_ISSUER_URL: "${ISSUER_URL}"
+      OAUTH2_PROXY_CLIENT_ID: \${OIDC_CLIENT_ID}
+      OAUTH2_PROXY_CLIENT_SECRET: \${OIDC_CLIENT_SECRET}
+      OAUTH2_PROXY_COOKIE_SECRET: \${COOKIE_SECRET}
+      OAUTH2_PROXY_UPSTREAM: http://app:8080/
+      OAUTH2_PROXY_REDIRECT_URL: http://localhost:4180/oauth2/callback`}</pre>
+              </div>
+
+              {/* Kubernetes snippet */}
+              <div className="space-y-1">
+                <p className="text-xs font-medium">Kubernetes Ingress annotations</p>
+                <pre className="text-xs bg-muted rounded p-3 font-mono overflow-x-auto whitespace-pre">{`nginx.ingress.kubernetes.io/auth-url: https://\$host/oauth2/auth
+nginx.ingress.kubernetes.io/auth-signin: https://\$host/oauth2/sign_in
+nginx.ingress.kubernetes.io/configuration-snippet: |
+  auth_request_set $user  \$upstream_http_x_auth_request_user;
+  auth_request_set $email \$upstream_http_x_auth_request_email;
+  proxy_set_header X-User  \$user;
+  proxy_set_header X-Email \$email;`}</pre>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+
+        </Accordion>
+      </div>
+      {/* ── /Reference ──────────────────────────────────────────── */}
+
     </div>
   );
 }
diff --git a/src/pages/user/SecurityPage.tsx b/src/pages/user/SecurityPage.tsx
index 7f55314..eb5a7db 100644
--- a/src/pages/user/SecurityPage.tsx
+++ b/src/pages/user/SecurityPage.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Lock, Fingerprint, Smartphone, Shield, Plus, CheckCircle, Loader2, Pencil, Trash2 } from "lucide-react";
+import { Lock, Fingerprint, Smartphone, Shield, Plus, CheckCircle, Loader2, Pencil, Trash2, Link2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -9,7 +9,7 @@ import { AddPasskeyWizard } from "@/components/security/AddPasskeyWizard";
 import { TotpEnrollmentWizard } from "@/components/security/TotpEnrollmentWizard";
 import { TotpRemoveDialog } from "@/components/security/TotpRemoveDialog";
 import { PasswordStrengthMeter, isPasswordValid } from "@/components/auth/PasswordStrengthMeter";
-import { api, ApiError, TotpStatusResponse, PasskeyCredential } from "@/lib/api";
+import { api, ApiError, TotpStatusResponse, PasskeyCredential, User } from "@/lib/api";
 import { useToast } from "@/hooks/use-toast";
 import { ComplianceBanner } from "@/components/auth/ComplianceBanner";
 import { useAuth } from "@/contexts/AuthContext";
@@ -29,6 +29,9 @@ export default function SecurityPage() {
   const [showAddPasskey, setShowAddPasskey] = useState(false);
   const [showTotpEnrollment, setShowTotpEnrollment] = useState(false);
   const [showTotpRemove, setShowTotpRemove] = useState(false);
+
+  // Profile (for has_password / linked_providers)
+  const [profile, setProfile] = useState<User | null>(null);
   
   // Password form state
   const [currentPassword, setCurrentPassword] = useState("");
@@ -53,19 +56,49 @@ export default function SecurityPage() {
   const { toast } = useToast();
   const { mfaCompliance } = useAuth();
 
-  // Policy requirements (could come from org settings in future)
+  // Whether this user has a password (false for pure OAuth signups)
+  const hasPassword = profile?.has_password ?? true; // default true until loaded
+  const linkedProviders = profile?.linked_providers ?? [];
+
+  // Derive policy requirements from actual org compliance data
+  const effectiveModes = mfaCompliance?.orgs?.map(o => o.effective_mode) ?? [];
   const policyRequirements = {
-    totpRequired: true,
-    passkeysRequired: false,
+    totpRequired: effectiveModes.some(m =>
+      m === 'require_totp' || m === 'require_totp_or_webauthn'
+    ),
+    passkeysRequired: effectiveModes.some(m =>
+      m === 'require_webauthn' || m === 'require_totp_or_webauthn'
+    ),
     minPasswordLength: 12,
   };
+  // Build a human-readable policy description from the strictest mode active
+  const activePolicyModes = effectiveModes.filter(m => m && m.startsWith('require_'));
+  const policyDescription = (() => {
+    if (activePolicyModes.includes('require_totp_or_webauthn'))
+      return 'Your organization requires TOTP or a passkey for all members.';
+    if (activePolicyModes.includes('require_totp'))
+      return 'Your organization requires TOTP to be enabled for all members.';
+    if (activePolicyModes.includes('require_webauthn'))
+      return 'Your organization requires a passkey for all members.';
+    return null;
+  })();
 
   // Fetch TOTP status on mount
   useEffect(() => {
+    fetchProfile();
     fetchTotpStatus();
     fetchPasskeys();
   }, []);
 
+  const fetchProfile = async () => {
+    try {
+      const res = await api.users.me();
+      setProfile(res.user);
+    } catch {
+      // Non-fatal — UI falls back to showing password section
+    }
+  };
+
   const fetchTotpStatus = async () => {
     setIsTotpStatusLoading(true);
     try {
@@ -234,20 +267,20 @@ export default function SecurityPage() {
       <ComplianceBanner compliance={mfaCompliance} />
 
       <div className="space-y-6">
-        {/* Policy Status */}
-        <Card className="border-accent/30 bg-accent/5">
-          <CardContent className="p-4">
-            <div className="flex items-start gap-3">
-              <Shield className="w-5 h-5 text-accent mt-0.5" />
-              <div>
-                <p className="text-sm font-medium text-foreground">Organization Policy</p>
-                <p className="text-sm text-muted-foreground">
-                  Your organization requires TOTP to be enabled for all members.
-                </p>
+        {/* Policy Status — only shown when the org actually enforces MFA */}
+        {policyDescription && (
+          <Card className="border-accent/30 bg-accent/5">
+            <CardContent className="p-4">
+              <div className="flex items-start gap-3">
+                <Shield className="w-5 h-5 text-accent mt-0.5" />
+                <div>
+                  <p className="text-sm font-medium text-foreground">Organization Policy</p>
+                  <p className="text-sm text-muted-foreground">{policyDescription}</p>
+                </div>
               </div>
-            </div>
-          </CardContent>
-        </Card>
+            </CardContent>
+          </Card>
+        )}
 
         {/* Password */}
         <Card>
@@ -260,16 +293,40 @@ export default function SecurityPage() {
                 </CardTitle>
                 <CardDescription>Manage your account password</CardDescription>
               </div>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setShowPasswordForm(!showPasswordForm)}
-              >
-                Change password
-              </Button>
+              {hasPassword ? (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setShowPasswordForm(!showPasswordForm)}
+                >
+                  Change password
+                </Button>
+              ) : (
+                <Badge variant="outline" className="text-xs text-muted-foreground">
+                  Not set
+                </Badge>
+              )}
             </div>
           </CardHeader>
-          {showPasswordForm && (
+          {!hasPassword && linkedProviders.length > 0 && (
+            <CardContent className="border-t pt-4">
+              <div className="flex items-start gap-2 text-sm text-muted-foreground">
+                <Link2 className="w-4 h-4 mt-0.5 flex-shrink-0" />
+                <p>
+                  Your account uses{" "}
+                  <span className="font-medium text-foreground">
+                    {linkedProviders
+                      .map((p) =>
+                        ({ google: "Google", github: "GitHub", microsoft: "Microsoft", oidc: "SSO" }[p] ?? p)
+                      )
+                      .join(", ")}
+                  </span>{" "}
+                  for sign-in. No password is set. Contact your admin if you need one added.
+                </p>
+              </div>
+            </CardContent>
+          )}
+          {hasPassword && showPasswordForm && (
             <CardContent className="space-y-4 border-t pt-4">
               {passwordError && (
                 <div className="p-3 rounded-md bg-destructive/10 text-destructive text-sm">
@@ -505,6 +562,7 @@ export default function SecurityPage() {
           setShowTotpRemove(false);
         }}
         isRequired={policyRequirements.totpRequired}
+        hasPassword={hasPassword}
       />
 
       {/* Delete Passkey Confirmation */}

From 27beb7a43fbd81150a9f6151ffa39d7bac91e099 Mon Sep 17 00:00:00 2001
From: James Bhattarai <jamesbhattarai14@gmail.com>
Date: Wed, 4 Mar 2026 19:03:18 +0545
Subject: [PATCH 4/4] Chore: logo

---
 index.html                | 15 ++++++++++++---
 public/favicon.svg        | 16 ++++++++++++++++
 public/gatehouse-logo.svg | 30 ++++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 public/favicon.svg
 create mode 100644 public/gatehouse-logo.svg

diff --git a/index.html b/index.html
index 4793c90..838b15b 100644
--- a/index.html
+++ b/index.html
@@ -6,15 +6,24 @@
     <title>Gatehouse — Identity & Access</title>
     <meta name="description" content="Gatehouse is a self-hosted identity and access platform providing secure authentication, organization-level security policy, and OIDC-based Single Sign-On." />
     <meta name="author" content="Gatehouse" />
+    
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="apple-touch-icon" href="/gatehouse-logo.svg" />
 
+    <!-- Open Graph -->
     <meta property="og:title" content="Gatehouse — Identity & Access" />
     <meta property="og:description" content="Secure authentication and access management for your organization." />
     <meta property="og:type" content="website" />
-    <meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
+    <meta property="og:image" content="/gatehouse-logo.svg" />
 
+    <!-- Twitter Card -->
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@Lovable" />
-    <meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
+    <meta name="twitter:site" content="@Gatehouse" />
+    <meta name="twitter:image" content="/gatehouse-logo.svg" />
+    
+    <!-- Theme color -->
+    <meta name="theme-color" content="#36b9a6" />
   </head>
 
   <body>
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..89531d7
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <!-- Background - Primary color (Teal #36b9a6) -->
+  <rect width="24" height="24" rx="3" fill="#36b9a6"/>
+  
+  <!-- Left pillar -->
+  <path d="M4 4h3v16H4V4z" fill="#ffffff"/>
+  
+  <!-- Right pillar -->
+  <path d="M17 4h3v16h-3V4z" fill="#ffffff"/>
+  
+  <!-- Archway -->
+  <path d="M7 4h10v3H7V4z" fill="#ffffff" opacity="0.7"/>
+  
+  <!-- Keyhole -->
+  <circle cx="12" cy="14" r="2" fill="#ffffff" opacity="0.5"/>
+</svg>
diff --git a/public/gatehouse-logo.svg b/public/gatehouse-logo.svg
new file mode 100644
index 0000000..1b24a07
--- /dev/null
+++ b/public/gatehouse-logo.svg
@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="128" height="128">
+  <!-- Background circle (optional, can be removed) -->
+  <rect width="24" height="24" rx="4" fill="#36b9a6"/>
+  
+  <!-- Abstract gate - two pillars with archway -->
+  <!-- Left pillar -->
+  <path 
+    d="M4 4h3v16H4V4z" 
+    fill="#ffffff"
+  />
+  <!-- Right pillar -->
+  <path 
+    d="M17 4h3v16h-3V4z" 
+    fill="#ffffff"
+  />
+  <!-- Archway/top bar -->
+  <path 
+    d="M7 4h10v3H7V4z" 
+    fill="#ffffff"
+    opacity="0.7"
+  />
+  <!-- Keyhole/entry indicator -->
+  <circle 
+    cx="12" 
+    cy="14" 
+    r="2" 
+    fill="#ffffff"
+    opacity="0.5"
+  />
+</svg>