feat(studio): gate access to admin role only

Studio is the developer console — schema design, runtime inspection,
and metadata editing. Non-admins are now shown a friendly access-denied
page instead of being dropped into the developer UI.

- SessionUser now exposes optional `role` (derived server-side by
  customSession() from admin_full_access permission-set or active-org
  owner/admin membership).
- RequireAuth renders <StudioAccessDenied /> when user.role !== 'admin',
  with CTAs to go to Console or sign out & switch account.
- AuthedAiChatPanel is also admin-gated for defense in depth.

Note: this is client-side gating. HTTP-level admin middleware on the
/_studio/* bundle is a follow-up (Option B).

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: os-zhuang

apps/studio/src/components/StudioAccessDenied.tsx

@@ -0,0 +1,71 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * StudioAccessDenied — friendly stop page shown when the signed-in user
+ * is not a Studio admin. Studio is the developer / admin surface of
+ * ObjectStack; ordinary end users belong in `/_console/`. This page
+ * tells them why they're being blocked and offers a one-click path to
+ * either switch accounts (logout → re-login) or jump back to Console.
+ */
+
+import { ShieldAlert, LogOut, ArrowRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import type { SessionUser } from '@/hooks/useSession';
+
+export interface StudioAccessDeniedProps {
+  user: SessionUser;
+  onSwitchAccount: () => void;
+}
+
+export function StudioAccessDenied({ user, onSwitchAccount }: StudioAccessDeniedProps) {
+  return (
+    <div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
+      <div className="w-full max-w-md space-y-6 text-center">
+        <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-destructive/10">
+          <ShieldAlert className="h-7 w-7 text-destructive" />
+        </div>
+
+        <div className="space-y-2">
+          <h1 className="text-2xl font-semibold tracking-tight">Studio is for admins only</h1>
+          <p className="text-sm text-muted-foreground">
+            Studio is the developer console for ObjectStack — schema design, runtime
+            inspection, and metadata editing. Your account doesn't have admin access on
+            this server.
+          </p>
+        </div>
+
+        <div className="rounded-md border bg-muted/30 px-4 py-3 text-left text-xs">
+          <div className="text-muted-foreground">Signed in as</div>
+          <div className="mt-0.5 font-medium">
+            {user.name ?? user.email ?? user.id}
+            {user.email && user.name ? (
+              <span className="ml-2 text-muted-foreground">({user.email})</span>
+            ) : null}
+          </div>
+          <div className="mt-2 text-muted-foreground">
+            Role: <code className="rounded bg-muted px-1 py-0.5">{user.role ?? 'user'}</code>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <Button asChild className="w-full gap-2">
+            <a href="/_console/">
+              Go to Console
+              <ArrowRight className="h-4 w-4" />
+            </a>
+          </Button>
+          <Button variant="outline" onClick={onSwitchAccount} className="w-full gap-2">
+            <LogOut className="h-4 w-4" />
+            Sign out & switch account
+          </Button>
+        </div>
+
+        <p className="text-xs text-muted-foreground">
+          Need access? Ask a platform admin to grant you the{' '}
+          <code className="rounded bg-muted px-1 py-0.5">admin_full_access</code>{' '}
+          permission set, or make you an owner/admin of your organization.
+        </p>
+      </div>
+    </div>
+  );
+}

apps/studio/src/hooks/useSession.ts

@@ -33,6 +33,14 @@ export interface SessionUser {
   name?: string;
   image?: string | null;
   emailVerified?: boolean;
+  /**
+   * Derived role from better-auth `customSession` (see
+   * `packages/plugins/plugin-auth/src/auth-manager.ts`). Set to `'admin'`
+   * when the user is a platform admin or an admin/owner of the active
+   * organization. Studio uses this to gate access — only admins are
+   * permitted past the shell.
+   */
+  role?: string;
 }
 
 export interface SessionData {

apps/studio/src/routes/__root.tsx

@@ -9,6 +9,7 @@ import { Toaster } from '@/components/ui/toaster';
 import { AiChatPanel } from '@/components/AiChatPanel';
 import { ProductionGuardProvider } from '@/components/production-guard';
 import { TopBar } from '@/components/top-bar';
+import { StudioAccessDenied } from '@/components/StudioAccessDenied';
 import { PluginRegistryProvider } from '../plugins';
 import { builtInPlugins } from '../plugins/built-in';
 import { useObjectStackClient } from '../hooks/useObjectStackClient';
@@ -17,12 +18,13 @@ import { gotoAccountLogin } from '@/lib/auth-redirect';
 
 /**
  * Single-tenant Studio shell. Login is delegated to apps/account; if the
- * session call comes back empty we bounce there. There is no per-project
- * routing, no organization switch, no public-route exemption — Studio is
- * purely a metadata browser + runtime debugger on top of one backend.
+ * session call comes back empty we bounce there. Studio is the
+ * developer/admin surface of ObjectStack and requires `user.role ===
+ * 'admin'` — non-admins get a friendly stop page instead of being
+ * silently bounced into a login loop.
  */
 function RequireAuth({ children }: { children: React.ReactNode }) {
-  const { user, loading } = useSession();
+  const { user, loading, logout } = useSession();
 
   useEffect(() => {
     if (loading) return;
@@ -41,6 +43,19 @@ function RequireAuth({ children }: { children: React.ReactNode }) {
 
   if (!user) return null;
 
+  // Admin gate — Studio is not for ordinary end users.
+  if (user.role !== 'admin') {
+    return (
+      <StudioAccessDenied
+        user={user}
+        onSwitchAccount={async () => {
+          await logout();
+          gotoAccountLogin(window.location.pathname + window.location.search);
+        }}
+      />
+    );
+  }
+
   return (
     <SidebarProvider>
       <div className="flex min-h-screen w-full flex-col">
@@ -55,7 +70,7 @@ function RequireAuth({ children }: { children: React.ReactNode }) {
 
 function AuthedAiChatPanel() {
   const { user } = useSession();
-  if (!user) return null;
+  if (!user || user.role !== 'admin') return null;
   return <AiChatPanel />;
 }