feat: self-serve developer access for paid tiers, split BYOK into its own permission (v0.72.0)

Splits what was one isDeveloper flag (gating webhooks, API keys, AND
BYOK together) into two independent permissions:

- isDeveloper (webhooks + self-serve API keys): admin-toggled as
  before, but now ALSO self-serve -- PATCH /api/v1/users/me/developer-access
  lets any paid-tier (tier !== "free") user turn it on themselves, no
  added fee. Free tier still needs an admin grant. Turning it off is
  always self-serve regardless of tier, since revoking your own
  access needs no gatekeeping. canSelfServeDeveloperAccess() in
  lib/permissions.ts is the single check for "is this tier eligible."

- isByokEnabled (BYOK AI provider keys): new column, admin-only, no
  self-serve path at all -- routing real AI provider spend through
  Epicure on the user's own key warrants a manual admin check-in that
  webhooks/API access don't need. requireByok() replaces
  requireDeveloper() on the three ai-keys routes.

Migration adds is_byok_enabled and grandfathers in anyone who already
has a BYOK key configured (the earlier grandfather migration only
covered the combined isDeveloper flag, which BYOK no longer reads).

Settings UI: webhooks/API-keys pages show a self-serve "Enable"
toggle for paid-tier non-developers instead of the locked notice
(still shown to free-tier users), plus a "Disable developer access"
link once enabled. Settings -> AI's BYOK section now checks
isByokEnabled instead of isDeveloper -- unaffected by the self-serve
change, still fully admin-gated.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

apps/web/components/admin/user-editor.tsx

@@ -18,12 +18,14 @@ interface UserEditorProps {
   currentRole: "user" | "moderator" | "admin";
   currentTier: "free" | "pro" | "family";
   currentIsDeveloper: boolean;
+  currentIsByokEnabled: boolean;
 }
 
-export function UserEditor({ userId, currentRole, currentTier, currentIsDeveloper }: UserEditorProps) {
+export function UserEditor({ userId, currentRole, currentTier, currentIsDeveloper, currentIsByokEnabled }: UserEditorProps) {
   const [role, setRole] = useState<"user" | "moderator" | "admin">(currentRole);
   const [tier, setTier] = useState<"free" | "pro" | "family">(currentTier);
   const [isDeveloper, setIsDeveloper] = useState(currentIsDeveloper);
+  const [isByokEnabled, setIsByokEnabled] = useState(currentIsByokEnabled);
   const [saving, setSaving] = useState(false);
 
   async function handleSave() {
@@ -32,7 +34,7 @@ export function UserEditor({ userId, currentRole, currentTier, currentIsDevelope
       const res = await fetch(`/api/v1/admin/users/${userId}`, {
         method: "PATCH",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ role, tier, isDeveloper }),
+        body: JSON.stringify({ role, tier, isDeveloper, isByokEnabled }),
       });
       if (!res.ok) {
         const data = await res.json().catch(() => ({}));
@@ -79,10 +81,17 @@ export function UserEditor({ userId, currentRole, currentTier, currentIsDevelope
       <div className="flex items-center justify-between gap-3 rounded-lg border p-3 max-w-md">
         <div>
           <Label htmlFor="developer-switch">Developer access</Label>
-          <p className="text-xs text-muted-foreground">Enables webhooks, self-serve API keys, and BYOK AI provider keys.</p>
+          <p className="text-xs text-muted-foreground">Enables webhooks and self-serve API keys. Users on a paid tier can also self-enable this.</p>
         </div>
         <Switch id="developer-switch" checked={isDeveloper} onCheckedChange={setIsDeveloper} />
       </div>
+      <div className="flex items-center justify-between gap-3 rounded-lg border p-3 max-w-md">
+        <div>
+          <Label htmlFor="byok-switch">BYOK access</Label>
+          <p className="text-xs text-muted-foreground">Enables bring-your-own AI provider keys. Admin-only, no self-serve.</p>
+        </div>
+        <Switch id="byok-switch" checked={isByokEnabled} onCheckedChange={setIsByokEnabled} />
+      </div>
       <div>
         <Button onClick={handleSave} disabled={saving}>
           {saving ? "Saving…" : "Save Changes"}

apps/web/components/settings/developer-access-toggle.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+import { Code2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+/** Shown instead of the locked notice on the webhooks/API-keys settings
+ * pages when the user is on a paid tier — self-serve, no admin needed, no
+ * added fee. Reloads the page on success since the manager component
+ * needs its initial data fetched server-side. */
+export function DeveloperAccessToggle({ message }: { message: string }) {
+  const router = useRouter();
+  const [enabling, setEnabling] = useState(false);
+
+  async function enable() {
+    setEnabling(true);
+    try {
+      const res = await fetch("/api/v1/users/me/developer-access", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ enabled: true }),
+      });
+      if (!res.ok) throw new Error();
+      router.refresh();
+    } catch {
+      toast.error("Couldn't enable developer access");
+      setEnabling(false);
+    }
+  }
+
+  return (
+    <div className="flex items-center justify-between gap-3 rounded-lg border bg-muted/30 p-4">
+      <div className="flex items-start gap-3 text-sm text-muted-foreground">
+        <Code2 className="h-4 w-4 shrink-0 mt-0.5" />
+        <p>{message}</p>
+      </div>
+      <Button type="button" size="sm" disabled={enabling} onClick={() => { void enable(); }}>
+        {enabling ? "Enabling…" : "Enable"}
+      </Button>
+    </div>
+  );
+}

apps/web/components/settings/disable-developer-access-button.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+
+/** Turning developer access off is always self-serve regardless of tier
+ * or who granted it — only turning it back on (for a free-tier user)
+ * requires an admin. */
+export function DisableDeveloperAccessButton() {
+  const router = useRouter();
+  const [disabling, setDisabling] = useState(false);
+
+  async function disable() {
+    setDisabling(true);
+    try {
+      const res = await fetch("/api/v1/users/me/developer-access", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ enabled: false }),
+      });
+      if (!res.ok) throw new Error();
+      router.refresh();
+    } catch {
+      toast.error("Couldn't disable developer access");
+      setDisabling(false);
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      disabled={disabling}
+      onClick={() => { void disable(); }}
+      className="text-xs text-muted-foreground hover:text-destructive underline underline-offset-2"
+    >
+      {disabling ? "Disabling…" : "Disable developer access"}
+    </button>
+  );
+}

apps/web/components/settings/settings-sidebar.tsx

@@ -19,11 +19,11 @@ const NAV_ITEMS = [
 
 const DEVELOPER_ONLY_KEYS = new Set(["apiKeys", "webhooks"]);
 
-export function SettingsSidebar({ isDeveloper }: { isDeveloper: boolean }) {
+export function SettingsSidebar({ showDeveloperNav }: { showDeveloperNav: boolean }) {
   const pathname = usePathname();
   const t = useTranslations("settings");
 
-  const visibleItems = NAV_ITEMS.filter((item) => isDeveloper || !DEVELOPER_ONLY_KEYS.has(item.key));
+  const visibleItems = NAV_ITEMS.filter((item) => showDeveloperNav || !DEVELOPER_ONLY_KEYS.has(item.key));
 
   return (
     <nav className="w-full md:w-48 md:shrink-0 md:sticky md:top-6">