feat(frontend): supabase + zustand for speed (#11333)

### Changes 🏗️

This change uses [Zustand](https://github.com/pmndrs/zustand) (a
lightweight state management library) to centralize authentication state
across the app. Previously, each component mounting `useSupabase()`
would create its own local state, causing duplicate API calls and
inconsistent user data. Now, user state is cached globally with Zustand
- when multiple components need auth data, they share the same cached
state instead of each fetching separately. This reduces server load and
improves app responsiveness.

**File structure:**
```
src/lib/supabase/hooks/
├── useSupabase.ts           # React hook interface (modified)
├── useSupabaseStore.ts      # Zustand state management (new)
└── helpers.ts               # Pure business logic (new)
```

**What was extracted to helpers:**
- `ensureSupabaseClient()` - Singleton client initialization
- `fetchUser()` - User fetching with error handling  
- `validateSession()` - Session validation logic
- `refreshSession()` - Session refresh logic
- `handleStorageEvent()` - Cross-tab logout handling

### Checklist 📋

#### For code changes:

- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Verified no TypeScript errors in modified files
  - [x] Tested login flow works correctly
  - [x] Tested logout flow works correctly
  - [x] Verified session validation on tab focus/visibility
  - [x] Tested cross-tab logout synchronization
  - [x] Confirmed WebSocket disconnection on logout

Author: 0ubbe

autogpt_platform/frontend/src/lib/supabase/hooks/helpers.ts

@@ -0,0 +1,174 @@
+import type BackendAPI from "@/lib/autogpt-server-api/client";
+import { environment } from "@/services/environment";
+import { createBrowserClient } from "@supabase/ssr";
+import type { SupabaseClient, User } from "@supabase/supabase-js";
+import type { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import {
+  getCurrentUser,
+  refreshSession as refreshSessionAction,
+  validateSession as validateSessionAction,
+} from "../actions";
+import {
+  clearWebSocketDisconnectIntent,
+  getRedirectPath,
+  isLogoutEvent,
+  setWebSocketDisconnectIntent,
+} from "../helpers";
+
+let supabaseSingleton: SupabaseClient | null = null;
+
+export function ensureSupabaseClient(): SupabaseClient | null {
+  if (supabaseSingleton) return supabaseSingleton;
+
+  const supabaseUrl = environment.getSupabaseUrl();
+  const supabaseKey = environment.getSupabaseAnonKey();
+
+  if (!supabaseUrl || !supabaseKey) return null;
+
+  try {
+    supabaseSingleton = createBrowserClient(supabaseUrl, supabaseKey, {
+      isSingleton: true,
+      auth: {
+        persistSession: false,
+      },
+    });
+  } catch (error) {
+    console.error("Error creating Supabase client", error);
+    supabaseSingleton = null;
+  }
+
+  return supabaseSingleton;
+}
+
+interface FetchUserResult {
+  user: User | null;
+  hasLoadedUser: boolean;
+  isUserLoading: boolean;
+}
+
+export async function fetchUser(): Promise<FetchUserResult> {
+  try {
+    const { user, error } = await getCurrentUser();
+
+    if (error || !user) {
+      return {
+        user: null,
+        hasLoadedUser: true,
+        isUserLoading: false,
+      };
+    }
+
+    clearWebSocketDisconnectIntent();
+    return {
+      user,
+      hasLoadedUser: true,
+      isUserLoading: false,
+    };
+  } catch (error) {
+    console.error("Get user error:", error);
+    return {
+      user: null,
+      hasLoadedUser: true,
+      isUserLoading: false,
+    };
+  }
+}
+
+interface ValidateSessionParams {
+  pathname: string;
+  currentUser: User | null;
+}
+
+interface ValidateSessionResult {
+  isValid: boolean;
+  user?: User | null;
+  redirectPath?: string | null;
+  shouldUpdateUser: boolean;
+}
+
+export async function validateSession(
+  params: ValidateSessionParams,
+): Promise<ValidateSessionResult> {
+  try {
+    const result = await validateSessionAction(params.pathname);
+
+    if (!result.isValid) {
+      return {
+        isValid: false,
+        redirectPath: result.redirectPath,
+        shouldUpdateUser: true,
+      };
+    }
+
+    if (result.user) {
+      const shouldUpdateUser = params.currentUser?.id !== result.user.id;
+      clearWebSocketDisconnectIntent();
+      return {
+        isValid: true,
+        user: result.user,
+        shouldUpdateUser,
+      };
+    }
+
+    return {
+      isValid: true,
+      shouldUpdateUser: false,
+    };
+  } catch (error) {
+    console.error("Session validation error:", error);
+    const redirectPath = getRedirectPath(params.pathname);
+    return {
+      isValid: false,
+      redirectPath,
+      shouldUpdateUser: true,
+    };
+  }
+}
+
+interface RefreshSessionResult {
+  user?: User | null;
+  error?: string;
+}
+
+export async function refreshSession(): Promise<RefreshSessionResult> {
+  const result = await refreshSessionAction();
+
+  if (result.user) {
+    clearWebSocketDisconnectIntent();
+  }
+
+  return result;
+}
+
+interface StorageEventHandlerParams {
+  event: StorageEvent;
+  api: BackendAPI | null;
+  router: AppRouterInstance | null;
+  pathname: string;
+}
+
+interface StorageEventHandlerResult {
+  shouldLogout: boolean;
+  redirectPath?: string | null;
+}
+
+export function handleStorageEvent(
+  params: StorageEventHandlerParams,
+): StorageEventHandlerResult {
+  if (!isLogoutEvent(params.event)) {
+    return { shouldLogout: false };
+  }
+
+  setWebSocketDisconnectIntent();
+
+  if (params.api) {
+    params.api.disconnectWebSocket();
+  }
+
+  const redirectPath = getRedirectPath(params.pathname);
+
+  return {
+    shouldLogout: true,
+    redirectPath,
+  };
+}