@invect/user-auth 0.0.1 → 0.0.3

package/dist/frontend/index.cjs

@@ -4,7 +4,7 @@ let react = require("react");
 let _tanstack_react_query = require("@tanstack/react-query");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
-let _invect_frontend = require("@invect/frontend");
+let _invect_ui = require("@invect/ui");
 let react_router = require("react-router");
 //#region src/frontend/providers/AuthProvider.tsx
 /**
@@ -232,14 +232,14 @@ function SignInForm({ onSuccess, className }) {
 					})]
 				}),
 				displayError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600 dark:border-red-900/50 dark:bg-red-950/20 dark:text-red-400",
+					className: "rounded-md border border-imp-destructive/30 bg-imp-destructive/10 px-3 py-2 text-sm text-imp-destructive",
 					children: displayError
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "submit",
 					disabled: isSigningIn,
-					className: "inline-flex h-9 w-full items-center justify-center gap-2 whitespace-nowrap rounded-md bg-imp-foreground px-4 py-2 text-sm font-medium text-imp-background shadow transition-colors hover:bg-imp-foreground/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-imp-ring disabled:pointer-events-none disabled:opacity-50",
-					children: isSigningIn ? "Signing in…" : "Login"
+					className: "inline-flex h-9 w-full items-center justify-center gap-2 whitespace-nowrap rounded-md bg-imp-primary px-4 py-2 text-sm font-medium text-imp-primary-foreground shadow transition-colors hover:bg-imp-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-imp-ring disabled:pointer-events-none disabled:opacity-50",
+					children: isSigningIn ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "w-4 h-4 animate-spin" }), "Signing in…"] }) : "Sign in"
 				})
 			]
 		})
@@ -256,16 +256,16 @@ function SignInForm({ onSuccess, className }) {
 */
 function SignInPage({ onSuccess, onNavigateToSignUp, title = "Welcome back", subtitle = "Sign in to your account to continue" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "flex min-h-screen items-center justify-center bg-imp-background p-4 text-imp-foreground",
+		className: "flex items-center justify-center min-h-screen p-4 bg-imp-background text-imp-foreground",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex w-full max-w-sm flex-col gap-6",
+			className: "flex flex-col w-full max-w-sm gap-6",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex flex-col items-center gap-2 text-center",
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "flex items-center justify-center",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImpLogo, { className: "h-10 w-auto" })
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImpLogo, { className: "w-auto h-24" })
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
 							className: "text-xl font-bold",
@@ -279,24 +279,20 @@ function SignInPage({ onSuccess, onNavigateToSignUp, title = "Welcome back", sub
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SignInForm, { onSuccess }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "relative text-center text-sm",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "absolute inset-0 top-1/2 border-t border-imp-border" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "relative bg-imp-background px-2 text-imp-muted-foreground",
+					className: "relative text-sm text-center",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "absolute inset-0 border-t top-1/2 border-imp-border" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "relative px-2 bg-imp-background text-imp-muted-foreground",
 						children: "Admin-managed accounts"
 					})]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-					className: "px-6 text-center text-xs text-imp-muted-foreground",
-					children: [
-						"New accounts are created by your administrator.",
-						onNavigateToSignUp ? " Or " : " Contact your admin if you need access.",
-						onNavigateToSignUp && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							onClick: onNavigateToSignUp,
-							className: "font-medium underline underline-offset-4 hover:text-imp-foreground",
-							children: "Sign up"
-						})
-					]
+					className: "px-6 text-xs text-center text-imp-muted-foreground",
+					children: [onNavigateToSignUp ? " Or " : " Contact your admin if you need access.", onNavigateToSignUp && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: onNavigateToSignUp,
+						className: "font-medium underline underline-offset-4 hover:text-imp-foreground",
+						children: "Sign up"
+					})]
 				})
 			]
 		})
@@ -401,6 +397,359 @@ function AuthGate({ children, fallback = null, loading = null }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
 }
 //#endregion
+//#region src/frontend/components/ApiKeysDialog.tsx
+/**
+* ApiKeysDialog — Admin dialog for managing API keys.
+*
+* Displays a list of API keys with the ability to:
+* - Create new API keys (name, optional expiry)
+* - Copy newly created keys
+* - Delete existing keys
+*
+* Only functional when the auth plugin has API keys enabled.
+*/
+function formatDate$1(iso) {
+	try {
+		return new Intl.DateTimeFormat(void 0, {
+			dateStyle: "medium",
+			timeStyle: "short"
+		}).format(new Date(iso));
+	} catch {
+		return iso;
+	}
+}
+function isExpired(expiresAt) {
+	if (!expiresAt) return false;
+	return new Date(expiresAt) < /* @__PURE__ */ new Date();
+}
+function ApiKeysDialog({ open, onOpenChange, apiBaseUrl }) {
+	const [apiKeys, setApiKeys] = (0, react.useState)([]);
+	const [isLoading, setIsLoading] = (0, react.useState)(false);
+	const [error, setError] = (0, react.useState)(null);
+	const [hasFetched, setHasFetched] = (0, react.useState)(false);
+	const [showCreateForm, setShowCreateForm] = (0, react.useState)(false);
+	const [newlyCreatedKey, setNewlyCreatedKey] = (0, react.useState)(null);
+	const [copiedKeyId, setCopiedKeyId] = (0, react.useState)(null);
+	const [pendingDeleteId, setPendingDeleteId] = (0, react.useState)(null);
+	const authApiBase = `${apiBaseUrl}/plugins/auth`;
+	const fetchApiKeys = (0, react.useCallback)(async () => {
+		setIsLoading(true);
+		setError(null);
+		try {
+			const res = await fetch(`${authApiBase}/api-keys`, { credentials: "include" });
+			if (!res.ok) {
+				const data = await res.json().catch(() => ({ error: "Failed to fetch API keys" }));
+				throw new Error(data.error || data.message || `HTTP ${res.status}`);
+			}
+			setApiKeys((await res.json()).apiKeys ?? []);
+			setHasFetched(true);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Failed to fetch API keys");
+		} finally {
+			setIsLoading(false);
+		}
+	}, [authApiBase]);
+	const deleteApiKey = (0, react.useCallback)(async (keyId) => {
+		try {
+			const res = await fetch(`${authApiBase}/api-keys/${keyId}`, {
+				method: "DELETE",
+				credentials: "include"
+			});
+			if (!res.ok) {
+				const data = await res.json().catch(() => ({}));
+				throw new Error(data.error || `HTTP ${res.status}`);
+			}
+			setApiKeys((prev) => prev.filter((k) => k.id !== keyId));
+			setPendingDeleteId(null);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Failed to delete API key");
+			setPendingDeleteId(null);
+		}
+	}, [authApiBase]);
+	const copyToClipboard = (0, react.useCallback)(async (text, id) => {
+		try {
+			await navigator.clipboard.writeText(text);
+			setCopiedKeyId(id);
+			setTimeout(() => setCopiedKeyId(null), 2e3);
+		} catch {
+			const textArea = document.createElement("textarea");
+			textArea.value = text;
+			textArea.style.position = "fixed";
+			textArea.style.opacity = "0";
+			document.body.appendChild(textArea);
+			textArea.select();
+			document.execCommand("copy");
+			document.body.removeChild(textArea);
+			setCopiedKeyId(id);
+			setTimeout(() => setCopiedKeyId(null), 2e3);
+		}
+	}, []);
+	if (open && !hasFetched && !isLoading) fetchApiKeys();
+	const handleOpenChange = (nextOpen) => {
+		if (!nextOpen) {
+			setShowCreateForm(false);
+			setNewlyCreatedKey(null);
+			setError(null);
+			setPendingDeleteId(null);
+			setHasFetched(false);
+		}
+		onOpenChange(nextOpen);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_ui.Dialog, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_invect_ui.DialogContent, {
+			className: "max-w-lg border-imp-border bg-imp-background text-imp-foreground sm:max-w-lg",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_ui.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_invect_ui.DialogTitle, {
+					className: "flex items-center gap-2 text-sm font-semibold",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Key, { className: "h-4 w-4" }), "API Keys"]
+				}) }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "space-y-3",
+					children: [
+						newlyCreatedKey && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "rounded-md border border-green-500/30 bg-green-50 p-3 dark:bg-green-950/20",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "mb-1.5 text-xs font-medium text-green-700 dark:text-green-400",
+								children: "API key created! Copy it now — it won't be shown again."
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+									className: "flex-1 rounded bg-green-100 px-2 py-1 text-xs font-mono text-green-800 dark:bg-green-900/30 dark:text-green-300 break-all",
+									children: newlyCreatedKey
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									onClick: () => copyToClipboard(newlyCreatedKey, "new-key"),
+									className: "shrink-0 rounded-md border border-green-300 p-1.5 text-green-700 hover:bg-green-100 dark:border-green-700 dark:text-green-400 dark:hover:bg-green-900/40",
+									children: copiedKeyId === "new-key" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { className: "h-3.5 w-3.5" })
+								})]
+							})]
+						}),
+						error && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "rounded-md bg-red-50 p-2 text-xs text-red-600 dark:bg-red-950/20 dark:text-red-400",
+							children: [error, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								onClick: () => setError(null),
+								className: "ml-2 underline hover:no-underline",
+								children: "Dismiss"
+							})]
+						}),
+						!showCreateForm && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							onClick: () => setShowCreateForm(true),
+							className: "flex items-center gap-1.5 rounded-lg border border-imp-border px-3 py-1.5 text-xs font-medium text-imp-muted-foreground transition-colors hover:border-imp-primary/50 hover:text-imp-foreground",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "h-3.5 w-3.5" }), " Create API Key"]
+						}),
+						showCreateForm && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CreateApiKeyForm, {
+							apiBaseUrl: authApiBase,
+							onCreated: (key, fullKey) => {
+								setApiKeys((prev) => [key, ...prev]);
+								setNewlyCreatedKey(fullKey);
+								setShowCreateForm(false);
+							},
+							onCancel: () => setShowCreateForm(false)
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "max-h-[300px] space-y-1.5 overflow-y-auto",
+							children: [
+								isLoading && !hasFetched && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex items-center justify-center py-8 text-xs text-imp-muted-foreground",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Loading…"]
+								}),
+								hasFetched && apiKeys.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "py-8 text-center text-xs text-imp-muted-foreground",
+									children: "No API keys yet. Create one to get started."
+								}),
+								apiKeys.map((key) => {
+									const expired = isExpired(key.expiresAt);
+									return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: `flex items-center justify-between rounded-lg border px-3 py-2.5 ${expired ? "border-red-300/50 bg-red-50/50 dark:border-red-800/30 dark:bg-red-950/10" : "border-imp-border bg-imp-muted/10"}`,
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "min-w-0 flex-1",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "flex items-center gap-2",
+												children: [
+													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														className: "text-sm font-medium text-imp-foreground truncate",
+														children: key.name || "Unnamed key"
+													}),
+													expired && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														className: "shrink-0 rounded-full bg-red-100 px-1.5 py-0.5 text-[10px] font-medium text-red-700 dark:bg-red-900/30 dark:text-red-400",
+														children: "Expired"
+													}),
+													key.enabled === false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														className: "shrink-0 rounded-full bg-yellow-100 px-1.5 py-0.5 text-[10px] font-medium text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
+														children: "Disabled"
+													})
+												]
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "mt-0.5 flex items-center gap-2 text-[11px] text-imp-muted-foreground",
+												children: [
+													key.start && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+														className: "font-mono",
+														children: [
+															key.prefix ? `${key.prefix}_` : "",
+															key.start,
+															"…"
+														]
+													}),
+													key.createdAt && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: ["Created ", formatDate$1(key.createdAt)] }),
+													key.expiresAt && !expired && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: ["Expires ", formatDate$1(key.expiresAt)] })
+												]
+											})]
+										}), pendingDeleteId === key.id ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "flex items-center gap-1.5 shrink-0 ml-2",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+												type: "button",
+												onClick: () => deleteApiKey(key.id),
+												className: "rounded-md bg-red-600 px-2 py-1 text-[11px] font-medium text-white hover:bg-red-700",
+												children: "Confirm"
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+												type: "button",
+												onClick: () => setPendingDeleteId(null),
+												className: "rounded-md border border-imp-border px-2 py-1 text-[11px] hover:bg-imp-muted",
+												children: "Cancel"
+											})]
+										}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											onClick: () => setPendingDeleteId(key.id),
+											className: "shrink-0 ml-2 rounded-md p-1.5 text-imp-muted-foreground transition-colors hover:bg-imp-destructive/10 hover:text-imp-destructive",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, { className: "h-3.5 w-3.5" })
+										})]
+									}, key.id);
+								})
+							]
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_ui.DialogFooter, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => handleOpenChange(false),
+					className: "rounded-md border border-imp-border px-3 py-1.5 text-sm hover:bg-imp-muted",
+					children: "Close"
+				}) })
+			]
+		})
+	});
+}
+function CreateApiKeyForm({ apiBaseUrl, onCreated, onCancel }) {
+	const [name, setName] = (0, react.useState)("");
+	const [expiresIn, setExpiresIn] = (0, react.useState)("");
+	const [isSubmitting, setIsSubmitting] = (0, react.useState)(false);
+	const [error, setError] = (0, react.useState)(null);
+	const EXPIRY_OPTIONS = [
+		{
+			value: "",
+			label: "No expiry"
+		},
+		{
+			value: "86400",
+			label: "1 day"
+		},
+		{
+			value: "604800",
+			label: "7 days"
+		},
+		{
+			value: "2592000",
+			label: "30 days"
+		},
+		{
+			value: "7776000",
+			label: "90 days"
+		},
+		{
+			value: "31536000",
+			label: "1 year"
+		}
+	];
+	const handleSubmit = async (e) => {
+		e.preventDefault();
+		setError(null);
+		setIsSubmitting(true);
+		try {
+			const body = {};
+			if (name.trim()) body.name = name.trim();
+			if (expiresIn) body.expiresIn = parseInt(expiresIn, 10);
+			const res = await fetch(`${apiBaseUrl}/api-keys`, {
+				method: "POST",
+				credentials: "include",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify(body)
+			});
+			const data = await res.json();
+			if (!res.ok) throw new Error(data.error || data.message || `HTTP ${res.status}`);
+			const fullKey = data.key ?? data.apiKey?.key ?? "";
+			onCreated({
+				id: data.id ?? data.apiKey?.id ?? "",
+				name: data.name ?? data.apiKey?.name ?? (name.trim() || null),
+				start: data.start ?? data.apiKey?.start ?? null,
+				prefix: data.prefix ?? data.apiKey?.prefix ?? null,
+				enabled: data.enabled ?? data.apiKey?.enabled ?? true,
+				expiresAt: data.expiresAt ?? data.apiKey?.expiresAt ?? null,
+				createdAt: data.createdAt ?? data.apiKey?.createdAt ?? (/* @__PURE__ */ new Date()).toISOString()
+			}, fullKey);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Failed to create API key");
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+		onSubmit: handleSubmit,
+		className: "space-y-3 rounded-lg border border-imp-border bg-imp-muted/10 p-3",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-xs font-medium text-imp-foreground",
+				children: "Create API Key"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "grid grid-cols-2 gap-3",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+					className: "mb-1 block text-xs font-medium text-imp-foreground",
+					children: "Name"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "text",
+					value: name,
+					onChange: (e) => setName(e.target.value),
+					placeholder: "e.g. Production API",
+					className: "w-full rounded-md border border-imp-border bg-imp-background px-3 py-1.5 text-sm placeholder:text-imp-muted-foreground focus:border-imp-primary/50 focus:outline-none"
+				})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+					className: "mb-1 block text-xs font-medium text-imp-foreground",
+					children: "Expiry"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+					value: expiresIn,
+					onChange: (e) => setExpiresIn(e.target.value),
+					className: "w-full rounded-md border border-imp-border bg-imp-background px-3 py-1.5 text-sm focus:border-imp-primary/50 focus:outline-none",
+					children: EXPIRY_OPTIONS.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+						value: option.value,
+						children: option.label
+					}, option.value))
+				})] })]
+			}),
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "rounded-md bg-red-50 p-2 text-xs text-red-600 dark:bg-red-950/20 dark:text-red-400",
+				children: error
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex justify-end gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: onCancel,
+					className: "rounded-md border border-imp-border px-3 py-1.5 text-xs hover:bg-imp-muted",
+					children: "Cancel"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "submit",
+					disabled: isSubmitting,
+					className: "rounded-md bg-imp-primary px-3 py-1.5 text-xs font-semibold text-imp-primary-foreground hover:bg-imp-primary/90 disabled:opacity-50",
+					children: isSubmitting ? "Creating…" : "Create"
+				})]
+			})
+		]
+	});
+}
+//#endregion
 //#region src/frontend/components/UserManagement.tsx
 /**
 * UserManagement — Admin panel for managing users.
@@ -473,7 +822,7 @@ function SortHeader({ label, field, sortField, sortDir, onSort, align = "left" }
 function RoleDropdown({ value, userId, disabled, onChange }) {
 	const current = require_roles.isAuthAssignableRole(value) ? value : require_roles.AUTH_DEFAULT_ROLE;
 	const currentLabel = ASSIGNABLE_ROLE_OPTIONS.find((o) => o.value === current)?.label ?? current;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_invect_frontend.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_frontend.DropdownMenuTrigger, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_invect_ui.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_ui.DropdownMenuTrigger, {
 		asChild: true,
 		disabled,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
@@ -481,16 +830,16 @@ function RoleDropdown({ value, userId, disabled, onChange }) {
 			className: `inline-flex w-28 items-center justify-between gap-1.5 rounded-full border px-2.5 py-0.5 text-sm font-medium transition-colors hover:bg-imp-muted disabled:cursor-not-allowed disabled:opacity-50 ${ROLE_BADGE_CLASSES}`,
 			children: [currentLabel, !disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "w-3 h-3 shrink-0" })]
 		})
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_invect_frontend.DropdownMenuContent, {
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_invect_ui.DropdownMenuContent, {
 		align: "start",
 		className: "w-56",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_frontend.DropdownMenuLabel, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_ui.DropdownMenuLabel, {
 				className: "text-xs",
 				children: "Set role"
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_frontend.DropdownMenuSeparator, {}),
-			ASSIGNABLE_ROLE_OPTIONS.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_frontend.DropdownMenuItem, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_ui.DropdownMenuSeparator, {}),
+			ASSIGNABLE_ROLE_OPTIONS.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_ui.DropdownMenuItem, {
 				onSelect: () => onChange(userId, option.value),
 				className: `items-start gap-0 px-2 py-2 ${current === option.value ? "bg-accent text-accent-foreground" : ""}`,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -519,6 +868,9 @@ function UserManagement({ apiBaseUrl, className }) {
 	const [currentPage, setCurrentPage] = (0, react.useState)(1);
 	const [sortField, setSortField] = (0, react.useState)("name");
 	const [sortDir, setSortDir] = (0, react.useState)("asc");
+	const [apiKeysEnabled, setApiKeysEnabled] = (0, react.useState)(false);
+	const [showApiKeysDialog, setShowApiKeysDialog] = (0, react.useState)(false);
+	const [hasCheckedApiKeys, setHasCheckedApiKeys] = (0, react.useState)(false);
 	const PAGE_SIZE = 10;
 	const handleSort = (0, react.useCallback)((field) => {
 		setSortField((prev) => {
@@ -562,6 +914,14 @@ function UserManagement({ apiBaseUrl, className }) {
 	const totalPages = Math.max(1, Math.ceil(filteredUsers.length / PAGE_SIZE));
 	const paginatedUsers = filteredUsers.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE);
 	const authApiBase = `${apiBaseUrl}/plugins/auth`;
+	const checkApiKeys = (0, react.useCallback)(async () => {
+		try {
+			const res = await fetch(`${authApiBase}/info`, { credentials: "include" });
+			if (res.ok) setApiKeysEnabled(!!(await res.json()).apiKeysEnabled);
+		} catch {} finally {
+			setHasCheckedApiKeys(true);
+		}
+	}, [authApiBase]);
 	const fetchUsers = (0, react.useCallback)(async () => {
 		setIsLoading(true);
 		setError(null);
@@ -618,29 +978,39 @@ function UserManagement({ apiBaseUrl, className }) {
 	}, [authApiBase]);
 	if (!isAuthenticated || user?.role !== "admin") return null;
 	if (!hasFetched && !isLoading) fetchUsers();
+	if (!hasCheckedApiKeys) checkApiKeys();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: `space-y-4 ${className ?? ""}`,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "relative flex-1 max-w-sm",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, { className: "absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 pointer-events-none text-imp-muted-foreground" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-						type: "text",
-						value: searchQuery,
-						onChange: (e) => {
-							setSearchQuery(e.target.value);
-							setCurrentPage(1);
-						},
-						placeholder: "Search users…",
-						className: "w-full py-2 pr-3 text-sm border rounded-lg outline-none border-imp-border bg-transparent pl-9 placeholder:text-imp-muted-foreground focus:border-imp-primary/50"
-					})]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-					type: "button",
-					onClick: () => setShowCreateDialog(true),
-					className: "flex items-center gap-1.5 rounded-lg border border-imp-border px-3 py-2 text-sm font-medium text-imp-muted-foreground transition-colors hover:border-imp-primary/50 hover:text-imp-foreground",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.UserPlus, { className: "w-4 h-4" }), " Create User"]
-				})]
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "relative flex-1 max-w-sm",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, { className: "absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 pointer-events-none text-imp-muted-foreground" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							type: "text",
+							value: searchQuery,
+							onChange: (e) => {
+								setSearchQuery(e.target.value);
+								setCurrentPage(1);
+							},
+							placeholder: "Search users…",
+							className: "w-full py-2 pr-3 text-sm border rounded-lg outline-none border-imp-border bg-transparent pl-9 placeholder:text-imp-muted-foreground focus:border-imp-primary/50"
+						})]
+					}),
+					apiKeysEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						onClick: () => setShowApiKeysDialog(true),
+						className: "flex items-center gap-1.5 rounded-lg border border-imp-border px-3 py-2 text-sm font-medium text-imp-muted-foreground transition-colors hover:border-imp-primary/50 hover:text-imp-foreground",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Key, { className: "w-4 h-4" }), " API Keys"]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						onClick: () => setShowCreateDialog(true),
+						className: "flex items-center gap-1.5 rounded-lg border border-imp-border px-3 py-2 text-sm font-medium text-imp-muted-foreground transition-colors hover:border-imp-primary/50 hover:text-imp-foreground",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.UserPlus, { className: "w-4 h-4" }), " Create User"]
+					})
+				]
 			}),
 			error && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "p-3 text-sm text-red-600 rounded-md bg-red-50 dark:bg-red-950/20 dark:text-red-400",
@@ -742,7 +1112,7 @@ function UserManagement({ apiBaseUrl, className }) {
 										}) : u.id !== user?.id ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 											type: "button",
 											onClick: () => setPendingDeleteUser(u),
-											className: "rounded-md p-1.5 text-imp-muted-foreground opacity-0 transition-opacity hover:bg-red-50 hover:text-red-600 group-hover:opacity-100 dark:hover:bg-red-950/20 dark:hover:text-red-400",
+											className: "rounded-md p-1.5 text-imp-muted-foreground opacity-0 transition-opacity hover:bg-imp-destructive/10 hover:text-imp-destructive group-hover:opacity-100",
 											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, { className: "w-4 h-4" })
 										}) : null
 									})
@@ -790,12 +1160,17 @@ function UserManagement({ apiBaseUrl, className }) {
 					]
 				})]
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_frontend.Dialog, {
+			apiKeysEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ApiKeysDialog, {
+				open: showApiKeysDialog,
+				onOpenChange: setShowApiKeysDialog,
+				apiBaseUrl
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_ui.Dialog, {
 				open: showCreateDialog,
 				onOpenChange: (open) => !open && setShowCreateDialog(false),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_invect_frontend.DialogContent, {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_invect_ui.DialogContent, {
 					className: "max-w-md border-imp-border bg-imp-background text-imp-foreground sm:max-w-md",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_frontend.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_frontend.DialogTitle, {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_ui.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_ui.DialogTitle, {
 						className: "text-sm font-semibold",
 						children: "Create New User"
 					}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CreateUserForm, {
@@ -808,13 +1183,13 @@ function UserManagement({ apiBaseUrl, className }) {
 					})]
 				})
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_frontend.Dialog, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_ui.Dialog, {
 				open: pendingDeleteUser !== null,
 				onOpenChange: (open) => !open && setPendingDeleteUser(null),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_invect_frontend.DialogContent, {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_invect_ui.DialogContent, {
 					className: "max-w-sm border-imp-border bg-imp-background text-imp-foreground sm:max-w-sm",
 					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_frontend.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_frontend.DialogTitle, {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_ui.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_ui.DialogTitle, {
 							className: "text-sm font-semibold",
 							children: "Delete user"
 						}) }),
@@ -830,7 +1205,7 @@ function UserManagement({ apiBaseUrl, className }) {
 								"? This action cannot be undone."
 							]
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_invect_frontend.DialogFooter, {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_invect_ui.DialogFooter, {
 							className: "gap-2",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
@@ -1032,7 +1407,7 @@ function LoadingSpinner() {
 * plugin route contribution at '/users'.
 */
 function UserManagementPage() {
-	const api = (0, _invect_frontend.useApiClient)();
+	const api = (0, _invect_ui.useApiClient)();
 	const { user, isAuthenticated } = useAuth();
 	const apiBaseUrl = api.getBaseURL();
 	if (!isAuthenticated) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -1042,7 +1417,7 @@ function UserManagementPage() {
 			children: "Please sign in to access this page."
 		})
 	});
-	if (user?.role !== "admin") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_frontend.PageLayout, {
+	if (user?.role !== "admin") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_ui.PageLayout, {
 		title: "User Management",
 		subtitle: "Manage users for your Invect instance.",
 		icon: lucide_react.Users,
@@ -1051,7 +1426,7 @@ function UserManagementPage() {
 			children: "Only administrators can manage users. Contact an admin for access."
 		})
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_frontend.PageLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_ui.PageLayout, {
 		title: "User Management",
 		subtitle: "Create, manage, and remove users for your Invect instance.",
 		icon: lucide_react.Users,
@@ -1083,7 +1458,7 @@ function ProfilePage({ basePath }) {
 	});
 	const displayName = user.name ?? user.email ?? user.id;
 	const initials = displayName[0]?.toUpperCase() ?? "?";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_frontend.PageLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_invect_ui.PageLayout, {
 		title: "Profile",
 		subtitle: "View your account details and manage your current session.",
 		icon: lucide_react.User,
@@ -1226,7 +1601,7 @@ function SidebarUserMenu({ collapsed = false, basePath = "" }) {
 * AuthenticatedInvect already wraps the tree with it. This plugin
 * only adds the user management UI.
 */
-const authFrontendPlugin = {
+const authFrontend = {
 	id: "user-auth",
 	name: "User Authentication",
 	sidebar: [{
@@ -1246,6 +1621,7 @@ const authFrontendPlugin = {
 	}]
 };
 //#endregion
+exports.ApiKeysDialog = ApiKeysDialog;
 exports.AuthGate = AuthGate;
 exports.AuthProvider = AuthProvider;
 exports.AuthenticatedInvect = AuthenticatedInvect;
@@ -1256,7 +1632,7 @@ exports.SignInPage = SignInPage;
 exports.UserButton = UserButton;
 exports.UserManagement = UserManagement;
 exports.UserManagementPage = UserManagementPage;
-exports.authFrontendPlugin = authFrontendPlugin;
+exports.authFrontend = authFrontend;
 exports.useAuth = useAuth;
 
 //# sourceMappingURL=index.cjs.map