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/app/(app)/settings/layout.tsx

@@ -3,14 +3,16 @@ import { auth } from "@/lib/auth/server";
 import { db, users, eq } from "@epicure/db";
 import { SettingsSidebar } from "@/components/settings/settings-sidebar";
 import { getMessages } from "@/lib/i18n/server";
+import { canSelfServeDeveloperAccess } from "@/lib/permissions";
 
 export default async function SettingsLayout({ children }: { children: React.ReactNode }) {
   const session = await auth.api.getSession({ headers: await headers() });
   const m = getMessages((session?.user as { locale?: string })?.locale);
 
   const dbUser = session
-    ? (await db.select({ isDeveloper: users.isDeveloper }).from(users).where(eq(users.id, session.user.id)).limit(1))[0]
+    ? (await db.select({ isDeveloper: users.isDeveloper, tier: users.tier }).from(users).where(eq(users.id, session.user.id)).limit(1))[0]
     : undefined;
+  const showDeveloperNav = !!dbUser && (dbUser.isDeveloper || canSelfServeDeveloperAccess(dbUser));
 
   return (
     <div className="max-w-5xl mx-auto">
@@ -19,7 +21,7 @@ export default async function SettingsLayout({ children }: { children: React.Rea
         <p className="text-muted-foreground mt-1">{m.settings.subtitle}</p>
       </div>
       <div className="flex flex-col md:flex-row gap-4 md:gap-8 md:items-start">
-        <SettingsSidebar isDeveloper={dbUser?.isDeveloper ?? false} />
+        <SettingsSidebar showDeveloperNav={showDeveloperNav} />
         <main className="flex-1 min-w-0 space-y-6">{children}</main>
       </div>
     </div>