fix(studio): hide AI chat panel before login and center auth loading spinner

[Copilot]

On Studio's /login (and any unauthenticated state) the AI chat toggle was visible, and the pre-auth loading spinner rendered flush to the left edge instead of centered.

Root causes

• <AiChatPanel /> was rendered unconditionally in __root.tsx, outside any session gate.
• SidebarProvider wraps children in a row-flex (flex h-svh w-full). The loading container used flex min-h-screen items-center justify-center with no width, so as a flex item it shrank to content width — justify-center centered the spinner only within that shrink-wrapped box.

Changes (apps/studio/src/routes/__root.tsx)

• Gate the chat panel on auth: introduce AuthedAiChatPanel that consumes useSession() inside the existing SessionProvider and returns null when user is absent. Replaces the direct <AiChatPanel /> render.
• Fix spinner centering: add w-full flex-1 to the RequireAuth loading container so it fills SidebarProvider's flex row, making justify-center effective horizontally.

function AuthedAiChatPanel() {
  const { user } = useSession();
  if (!user) return null;
  return <AiChatPanel />;
}

// loading container
<div className="flex min-h-screen w-full flex-1 items-center justify-center bg-background">
  <div className="h-8 w-8 animate-spin rounded-full border-4 border-muted border-t-primary" />
</div>

The RootComponent-level "Connecting to ObjectStack…" spinner renders outside SidebarProvider and was already correctly centered — left untouched.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
objectstack-demo	Ready	Preview, Comment	Apr 20, 2026 0:55am
spec	Ready	Preview, Comment	Apr 20, 2026 0:55am