feat: add scoped API keys for programmatic site access

Introduce ApiKey model, CRUD endpoints, and admin UI so agents can
authenticate with permission-scoped keys. Normalize pubkeys to hex on login,
dedupe legacy npub/hex user rows, and ignore .cursor in git.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/app/admin/api-keys/page.tsx

@@ -0,0 +1,305 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { api } from "@/lib/api";
+import { useAuth } from "@/hooks/useAuth";
+import { formatDate } from "@/lib/utils";
+import { Copy, Check, KeyRound, Plus, Trash2, ShieldAlert } from "lucide-react";
+
+interface PermissionDef {
+  key: string;
+  label: string;
+  group: string;
+}
+
+interface ApiKey {
+  id: string;
+  name: string;
+  prefix: string;
+  permissions: string[];
+  createdByPubkey: string;
+  lastUsedAt: string | null;
+  revokedAt: string | null;
+  createdAt: string;
+}
+
+export default function ApiKeysPage() {
+  const { can } = useAuth();
+  const allowed = can("api_keys.manage");
+
+  const [permissions, setPermissions] = useState<PermissionDef[]>([]);
+  const [keys, setKeys] = useState<ApiKey[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  const [name, setName] = useState("");
+  const [selected, setSelected] = useState<Record<string, boolean>>({});
+  const [creating, setCreating] = useState(false);
+  const [revealedKey, setRevealedKey] = useState<{ name: string; key: string } | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  const load = async () => {
+    setLoading(true);
+    try {
+      const [registry, list] = await Promise.all([
+        api.getPermissionRegistry(),
+        api.getApiKeys(),
+      ]);
+      setPermissions(registry.permissions);
+      setKeys(list);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (allowed) load();
+    else setLoading(false);
+  }, [allowed]);
+
+  const groups = useMemo(() => {
+    const order: string[] = [];
+    const byGroup: Record<string, PermissionDef[]> = {};
+    for (const perm of permissions) {
+      if (!byGroup[perm.group]) {
+        byGroup[perm.group] = [];
+        order.push(perm.group);
+      }
+      byGroup[perm.group].push(perm);
+    }
+    return order.map((group) => ({ group, perms: byGroup[group] }));
+  }, [permissions]);
+
+  const selectedKeys = useMemo(
+    () => Object.entries(selected).filter(([, v]) => v).map(([k]) => k),
+    [selected]
+  );
+
+  const toggle = (key: string) => {
+    setSelected((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  const handleCreate = async () => {
+    if (!name.trim() || selectedKeys.length === 0) return;
+    setCreating(true);
+    setError("");
+    try {
+      const created = await api.createApiKey({ name: name.trim(), permissions: selectedKeys });
+      setRevealedKey({ name: created.name, key: created.key });
+      setCopied(false);
+      setName("");
+      setSelected({});
+      await load();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const handleRevoke = async (id: string) => {
+    setError("");
+    try {
+      await api.revokeApiKey(id);
+      await load();
+    } catch (err: any) {
+      setError(err.message);
+    }
+  };
+
+  const handleCopy = async () => {
+    if (!revealedKey) return;
+    try {
+      await navigator.clipboard.writeText(revealedKey.key);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // ignore
+    }
+  };
+
+  if (!allowed) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <div className="text-on-surface/50">
+          You do not have permission to manage API keys.
+        </div>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <div className="text-on-surface/50">Loading API keys...</div>
+      </div>
+    );
+  }
+
+  const labelFor = (key: string) => permissions.find((p) => p.key === key)?.label ?? key;
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-on-surface">API Keys</h1>
+        <p className="text-on-surface/60 text-sm mt-1">
+          Create scoped API keys for programmatic access. A key is shown in full
+          only once, right after you create it, so copy it immediately.
+        </p>
+      </div>
+
+      {error && <p className="text-error text-sm">{error}</p>}
+
+      {revealedKey && (
+        <div className="bg-primary-container/10 border border-primary/30 rounded-xl p-6 space-y-3">
+          <div className="flex items-center gap-2 text-primary font-semibold">
+            <ShieldAlert size={18} />
+            Copy your new key now — it won&apos;t be shown again
+          </div>
+          <p className="text-on-surface/70 text-sm">
+            Key for <span className="font-semibold">{revealedKey.name}</span>:
+          </p>
+          <div className="flex items-center gap-2">
+            <code className="flex-1 bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 font-mono text-sm break-all">
+              {revealedKey.key}
+            </code>
+            <button
+              onClick={handleCopy}
+              className="flex items-center gap-2 px-4 py-3 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary font-semibold text-sm hover:opacity-90 transition-opacity whitespace-nowrap"
+            >
+              {copied ? <Check size={16} /> : <Copy size={16} />}
+              {copied ? "Copied" : "Copy"}
+            </button>
+          </div>
+          <button
+            onClick={() => setRevealedKey(null)}
+            className="text-on-surface/50 text-sm hover:text-on-surface transition-colors"
+          >
+            I&apos;ve saved it, dismiss
+          </button>
+        </div>
+      )}
+
+      {/* Create form */}
+      <div className="bg-surface-container-low rounded-xl p-6 space-y-5">
+        <h2 className="text-sm font-semibold text-on-surface/70">Create API Key</h2>
+
+        <div>
+          <label className="block text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-2">
+            Name
+          </label>
+          <input
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="e.g. Blog publishing bot"
+            maxLength={100}
+            className="w-full bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-1 focus:ring-primary/40"
+          />
+        </div>
+
+        <div>
+          <p className="text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-3">
+            Permissions
+          </p>
+          <div className="space-y-4">
+            {groups.map(({ group, perms }) => (
+              <div key={group}>
+                <p className="text-xs font-bold uppercase tracking-wide text-on-surface/40 mb-2">
+                  {group}
+                </p>
+                <div className="grid sm:grid-cols-2 gap-2">
+                  {perms.map((perm) => (
+                    <label
+                      key={perm.key}
+                      className="flex items-start gap-2 cursor-pointer text-sm text-on-surface"
+                    >
+                      <input
+                        type="checkbox"
+                        checked={!!selected[perm.key]}
+                        onChange={() => toggle(perm.key)}
+                        className="mt-0.5 h-4 w-4 accent-primary cursor-pointer"
+                      />
+                      <span>
+                        {perm.label}
+                        <span className="block text-on-surface/40 text-xs font-mono">
+                          {perm.key}
+                        </span>
+                      </span>
+                    </label>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <button
+          onClick={handleCreate}
+          disabled={!name.trim() || selectedKeys.length === 0 || creating}
+          className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary font-semibold text-sm hover:opacity-90 transition-opacity disabled:opacity-50"
+        >
+          <Plus size={16} />
+          {creating ? "Creating..." : "Create API Key"}
+        </button>
+      </div>
+
+      {/* Existing keys */}
+      <div className="space-y-3">
+        <h2 className="text-sm font-semibold text-on-surface/70">Existing Keys</h2>
+        {keys.length === 0 ? (
+          <div className="bg-surface-container-low rounded-xl p-8 text-center">
+            <KeyRound size={32} className="text-on-surface-variant/30 mx-auto mb-3" />
+            <p className="text-on-surface-variant/60 text-sm">No API keys yet.</p>
+          </div>
+        ) : (
+          keys.map((key) => (
+            <div
+              key={key.id}
+              className={`bg-surface-container-low rounded-xl p-6 ${key.revokedAt ? "opacity-60" : ""}`}
+            >
+              <div className="flex items-start justify-between gap-4">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <h3 className="font-semibold text-on-surface">{key.name}</h3>
+                    {key.revokedAt && (
+                      <span className="text-xs font-bold text-error bg-error/10 px-2 py-0.5 rounded-full">
+                        Revoked
+                      </span>
+                    )}
+                  </div>
+                  <p className="font-mono text-sm text-on-surface/60 mt-1">{key.prefix}…</p>
+                  <p className="text-on-surface/40 text-xs mt-1">
+                    Created {formatDate(key.createdAt)}
+                    {key.lastUsedAt ? ` · Last used ${formatDate(key.lastUsedAt)}` : " · Never used"}
+                  </p>
+                  <div className="flex flex-wrap gap-1.5 mt-3">
+                    {key.permissions.map((p) => (
+                      <span
+                        key={p}
+                        className="text-xs font-semibold text-primary bg-primary/10 px-2 py-0.5 rounded-full"
+                        title={p}
+                      >
+                        {labelFor(p)}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+                {!key.revokedAt && (
+                  <button
+                    onClick={() => handleRevoke(key.id)}
+                    className="text-on-surface-variant/50 hover:text-error transition-colors p-2 rounded-lg hover:bg-error/10 shrink-0"
+                    title="Revoke key"
+                  >
+                    <Trash2 size={16} />
+                  </button>
+                )}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

frontend/app/admin/roles/page.tsx

@@ -45,7 +45,7 @@ export default function RolesPage() {
   const [original, setOriginal] = useState<Matrix>({});
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
-  const [savingRole, setSavingRole] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
   const [notice, setNotice] = useState("");
 
   const load = async () => {
@@ -101,19 +101,26 @@ export default function RolesPage() {
     }));
   };
 
-  const saveRole = async (role: string) => {
-    setSavingRole(role);
+  const saveAll = async () => {
+    if (dirtyRoles.length === 0) return;
+    setSaving(true);
     setError("");
     setNotice("");
     try {
-      const keys = permissions.filter((p) => matrix[role]?.[p.key]).map((p) => p.key);
-      await api.updateRolePermissions(role, keys);
-      setOriginal((prev) => ({ ...prev, [role]: { ...matrix[role] } }));
-      setNotice(`${ROLE_LABELS[role] ?? role} permissions saved.`);
+      for (const role of dirtyRoles) {
+        const keys = permissions.filter((p) => matrix[role]?.[p.key]).map((p) => p.key);
+        await api.updateRolePermissions(role, keys);
+      }
+      setOriginal(() => {
+        const next: Matrix = {};
+        for (const role of roles) next[role] = { ...matrix[role] };
+        return next;
+      });
+      setNotice("Permissions saved.");
     } catch (err: any) {
       setError(err.message);
     } finally {
-      setSavingRole(null);
+      setSaving(false);
     }
   };
 
@@ -207,23 +214,20 @@ export default function RolesPage() {
         </table>
       </div>
 
-      <div className="flex flex-wrap gap-3">
-        {roles.map((role) => {
-          const dirty = dirtyRoles.includes(role);
-          return (
-            <button
-              key={role}
-              onClick={() => saveRole(role)}
-              disabled={!dirty || savingRole === role}
-              className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary font-semibold text-sm hover:opacity-90 transition-opacity disabled:opacity-50"
-            >
-              <Save size={16} />
-              {savingRole === role
-                ? "Saving..."
-                : `Save ${ROLE_LABELS[role] ?? role}${dirty ? " *" : ""}`}
-            </button>
-          );
-        })}
+      <div className="flex flex-wrap items-center gap-3">
+        <button
+          onClick={saveAll}
+          disabled={dirtyRoles.length === 0 || saving}
+          className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary font-semibold text-sm hover:opacity-90 transition-opacity disabled:opacity-50"
+        >
+          <Save size={16} />
+          {saving ? "Saving..." : "Save changes"}
+        </button>
+        {dirtyRoles.length > 0 && !saving && (
+          <span className="text-on-surface/50 text-sm">
+            Unsaved changes to {dirtyRoles.map((r) => ROLE_LABELS[r] ?? r).join(", ")}
+          </span>
+        )}
       </div>
     </div>
   );

frontend/app/admin/users/page.tsx

@@ -7,7 +7,7 @@ import { useAuth } from "@/hooks/useAuth";
 import { useNostrProfile } from "@/hooks/useNostrProfile";
 import { NostrAvatar } from "@/components/nostr/NostrAvatar";
 import { formatDate } from "@/lib/utils";
-import { Lock } from "lucide-react";
+import { Lock, Plus } from "lucide-react";
 
 const ROLE_RANK: Record<string, number> = {
   superadmin: 4,
@@ -208,6 +208,9 @@ export default function UsersPage() {
   const [usernameDrafts, setUsernameDrafts] = useState<Record<string, string>>({});
   const [savingPubkey, setSavingPubkey] = useState<string | null>(null);
   const [copiedPubkey, setCopiedPubkey] = useState<string | null>(null);
+  const [newUserPubkey, setNewUserPubkey] = useState("");
+  const [addingUser, setAddingUser] = useState(false);
+  const [addUserSuccess, setAddUserSuccess] = useState("");
 
   const loadUsers = async () => {
     try {
@@ -286,6 +289,24 @@ export default function UsersPage() {
     setUsernameDrafts((prev) => ({ ...prev, [pubkey]: value }));
   };
 
+  const handleAddUser = async () => {
+    const value = newUserPubkey.trim();
+    if (!value) return;
+    setAddingUser(true);
+    setError("");
+    setAddUserSuccess("");
+    try {
+      await api.createUser(value);
+      setNewUserPubkey("");
+      setAddUserSuccess("User added.");
+      await loadUsers();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setAddingUser(false);
+    }
+  };
+
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
@@ -300,6 +321,36 @@ export default function UsersPage() {
 
       {error && <p className="text-error text-sm">{error}</p>}
 
+      <div className="bg-surface-container-low rounded-xl p-6">
+        <h2 className="text-sm font-semibold text-on-surface/70 mb-3">Add User</h2>
+        <p className="text-on-surface-variant text-xs mb-3">
+          Pre-register a user by their npub or hex pubkey so you can assign a role before they log in.
+        </p>
+        <div className="flex flex-col sm:flex-row gap-3">
+          <input
+            placeholder="npub1... or hex pubkey"
+            value={newUserPubkey}
+            onChange={(e) => setNewUserPubkey(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") handleAddUser();
+            }}
+            disabled={addingUser}
+            className="bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 w-full font-mono text-sm focus:outline-none focus:ring-1 focus:ring-primary/40 flex-1 disabled:opacity-50"
+          />
+          <button
+            onClick={handleAddUser}
+            disabled={!newUserPubkey.trim() || addingUser}
+            className="flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary font-semibold text-sm hover:opacity-90 transition-opacity disabled:opacity-50 whitespace-nowrap"
+          >
+            <Plus size={16} />
+            {addingUser ? "Adding…" : "Add User"}
+          </button>
+        </div>
+        {addUserSuccess && (
+          <p className="text-green-400 text-sm mt-3">{addUserSuccess}</p>
+        )}
+      </div>
+
       <div className="space-y-3">
         {users.length === 0 ? (
           <p className="text-on-surface/50 text-sm">No users found.</p>

frontend/app/dashboard/page.tsx

@@ -5,7 +5,7 @@ import Image from "next/image";
 import { Send, FileText, Clock, CheckCircle, XCircle, Plus, User, Loader2, AtSign, Radio, Trash2, Download, Eye, Pencil } from "lucide-react";
 import { useAuth } from "@/hooks/useAuth";
 import { api } from "@/lib/api";
-import { shortenPubkey } from "@/lib/nostr";
+import { shortenPubkey, fetchEventFromRelays, fetchLongformFromRelays } from "@/lib/nostr";
 import { formatDate } from "@/lib/utils";
 import { Button } from "@/components/ui/Button";
 
@@ -61,9 +61,7 @@ export default function DashboardPage() {
   const [submissions, setSubmissions] = useState<Submission[]>([]);
   const [loadingSubs, setLoadingSubs] = useState(true);
   const [showForm, setShowForm] = useState(false);
-  const [title, setTitle] = useState("");
-  const [eventId, setEventId] = useState("");
-  const [naddr, setNaddr] = useState("");
+  const [noteInput, setNoteInput] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const [formError, setFormError] = useState("");
   const [formSuccess, setFormSuccess] = useState("");
@@ -125,31 +123,56 @@ export default function DashboardPage() {
     loadRelays();
   }, [loadSubmissions, loadRelays]);
 
+  const extractTitle = (event: any): string => {
+    const titleTag = event?.tags?.find((t: string[]) => t[0] === "title");
+    return titleTag?.[1]?.trim() || "Untitled";
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setFormError("");
     setFormSuccess("");
 
-    if (!title.trim()) {
-      setFormError("Title is required");
-      return;
-    }
-    if (!eventId.trim() && !naddr.trim()) {
-      setFormError("Either an Event ID or naddr is required");
+    const input = noteInput.trim();
+    if (!input) {
+      setFormError("A Note ID or naddr is required");
       return;
     }
 
     setSubmitting(true);
     try {
-      await api.createSubmission({
-        title: title.trim(),
-        eventId: eventId.trim() || undefined,
-        naddr: naddr.trim() || undefined,
-      });
-      setFormSuccess("Submission sent for review!");
-      setTitle("");
-      setEventId("");
-      setNaddr("");
+      let payload: { title: string; eventId?: string; naddr?: string };
+
+      if (input.startsWith("naddr1")) {
+        const event = await fetchLongformFromRelays(input);
+        if (!event) {
+          throw new Error("Could not find that article on the relays");
+        }
+        payload = { title: extractTitle(event), naddr: input };
+      } else {
+        let hexId = input;
+        if (input.startsWith("note1")) {
+          try {
+            const { nip19 } = await import("nostr-tools");
+            const decoded = nip19.decode(input);
+            if (decoded.type !== "note") throw new Error();
+            hexId = decoded.data as string;
+          } catch {
+            throw new Error("Invalid note id");
+          }
+        } else if (!/^[0-9a-f]{64}$/i.test(input)) {
+          throw new Error("Enter a valid note id, naddr, or hex event id");
+        }
+        const event = await fetchEventFromRelays(hexId);
+        if (!event) {
+          throw new Error("Could not find that note on the relays");
+        }
+        payload = { title: extractTitle(event), eventId: hexId };
+      }
+
+      await api.createSubmission(payload);
+      setFormSuccess(`Submission "${payload.title}" sent for review!`);
+      setNoteInput("");
       setShowForm(false);
       await loadSubmissions();
     } catch (err: any) {
@@ -381,46 +404,20 @@ export default function DashboardPage() {
                 className="bg-surface-container-low rounded-xl p-6 mb-8 space-y-4"
               >
                 <p className="text-on-surface-variant text-sm mb-2">
-                  Submit a Nostr longform post for moderator review. Provide the
-                  event ID or naddr of the article you&apos;d like published on the
-                  blog.
+                  Submit a Nostr longform post for moderator review. Paste the
+                  note ID or naddr of the article you&apos;d like published on the
+                  blog. The title is pulled automatically from the note.
                 </p>
 
                 <div>
                   <label className="block text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-2">
-                    Title
+                    Note ID or naddr
                   </label>
                   <input
                     type="text"
-                    value={title}
-                    onChange={(e) => setTitle(e.target.value)}
-                    placeholder="My Bitcoin Article"
-                    className="w-full bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 placeholder:text-on-surface-variant/40 focus:outline-none focus:ring-1 focus:ring-primary/40"
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-2">
-                    Nostr Event ID
-                  </label>
-                  <input
-                    type="text"
-                    value={eventId}
-                    onChange={(e) => setEventId(e.target.value)}
-                    placeholder="note1... or hex event id"
-                    className="w-full bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 font-mono text-sm placeholder:text-on-surface-variant/40 focus:outline-none focus:ring-1 focus:ring-primary/40"
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-2">
-                    Or naddr
-                  </label>
-                  <input
-                    type="text"
-                    value={naddr}
-                    onChange={(e) => setNaddr(e.target.value)}
-                    placeholder="naddr1..."
+                    value={noteInput}
+                    onChange={(e) => setNoteInput(e.target.value)}
+                    placeholder="naddr1... or note1... or hex event id"
                     className="w-full bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 font-mono text-sm placeholder:text-on-surface-variant/40 focus:outline-none focus:ring-1 focus:ring-primary/40"
                   />
                 </div>
@@ -438,7 +435,7 @@ export default function DashboardPage() {
                   >
                     <span className="flex items-center gap-2">
                       <Send size={16} />
-                      {submitting ? "Submitting..." : "Submit for Review"}
+                      {submitting ? "Fetching & submitting..." : "Submit for Review"}
                     </span>
                   </Button>
                   <Button

frontend/components/admin/AdminSidebar.tsx

@@ -22,6 +22,7 @@ import {
   MessageSquare,
   Building2,
   KeyRound,
+  Key,
 } from "lucide-react";
 
 // Each item is shown when the user holds any of its permissions. Items with no
@@ -44,6 +45,7 @@ const navItems: {
   { href: "/admin/categories", label: "Categories", icon: Tag, permissions: ["categories.manage"] },
   { href: "/admin/users", label: "Users", icon: Users, permissions: ["users.assign_role", "nip05.assign"] },
   { href: "/admin/roles", label: "Roles", icon: KeyRound, permissions: ["roles.edit_permissions"] },
+  { href: "/admin/api-keys", label: "API Keys", icon: Key, permissions: ["api_keys.manage"] },
   { href: "/admin/relays", label: "Relays", icon: Radio, permissions: ["relays.manage"] },
   { href: "/admin/settings", label: "Settings", icon: Settings, permissions: ["settings.edit"] },
   { href: "/admin/nostr", label: "Nostr Tools", icon: Wrench, permissions: ["nostr_tools.use"] },
@@ -58,8 +60,8 @@ export function AdminSidebar() {
     : "";
 
   return (
-    <aside className="w-64 bg-surface-container-lowest min-h-screen p-6 flex flex-col shrink-0">
-      <div className="mb-8">
+    <aside className="w-64 bg-surface-container-lowest h-screen sticky top-0 p-6 flex flex-col shrink-0">
+      <div className="mb-8 shrink-0">
         <Link href="/" className="text-primary-container font-bold text-xl">
           BBE Admin
         </Link>
@@ -73,7 +75,7 @@ export function AdminSidebar() {
         </div>
       ) : (
         <>
-          <div className="mb-6">
+          <div className="mb-6 shrink-0">
             <p className="text-on-surface/70 text-sm font-mono truncate">{shortPubkey}</p>
             <span
               className={cn(
@@ -87,7 +89,7 @@ export function AdminSidebar() {
             </span>
           </div>
 
-          <nav className="flex-1 space-y-1">
+          <nav className="flex-1 overflow-y-auto min-h-0 space-y-1">
             {navItems
               .filter(
                 (item) =>
@@ -114,7 +116,7 @@ export function AdminSidebar() {
               })}
           </nav>
 
-          <div className="mt-auto space-y-2 pt-6">
+          <div className="shrink-0 space-y-2 pt-6">
             <button
               onClick={logout}
               className="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-on-surface/70 hover:text-on-surface hover:bg-surface-container w-full"

frontend/lib/api.ts

@@ -110,6 +110,8 @@ export const api = {
 
   // Users
   getUsers: () => request<any[]>("/users"),
+  createUser: (pubkey: string) =>
+    request<any>("/users", { method: "POST", body: JSON.stringify({ pubkey }) }),
   setUserRole: (pubkey: string, role: string | null) =>
     request<any>(`/users/${encodeURIComponent(pubkey)}/role`, {
       method: "PUT",
@@ -134,6 +136,13 @@ export const api = {
       { method: "PUT", body: JSON.stringify({ permissions }) }
     ),
 
+  // API keys
+  getApiKeys: () => request<any[]>("/api-keys"),
+  createApiKey: (data: { name: string; permissions: string[] }) =>
+    request<any>("/api-keys", { method: "POST", body: JSON.stringify(data) }),
+  revokeApiKey: (id: string) =>
+    request<any>(`/api-keys/${encodeURIComponent(id)}`, { method: "DELETE" }),
+
   // Categories
   getCategories: () => request<any[]>("/categories"),
   createCategory: (data: { name: string; slug: string }) =>