From 97b7d11c15844980ad9857873e8f44ed2fbd4ea4 Mon Sep 17 00:00:00 2001
From: Oscar Hong <oscar.hong2015@gmail.com>
Date: Sat, 18 Jul 2026 09:44:00 -0700
Subject: [PATCH 1/9] add performance harness and consolidate auth

---
 .env.example                                  |   4 +
 .gitignore                                    |   4 +
 apps/web/__tests__/api/contributions.test.ts  |   3 +
 apps/web/__tests__/api/profile.test.ts        |   5 +
 .../components/PostHogProvider.test.tsx       | 152 ++++++++++++++++
 .../flows/privacy-visibility.test.ts          |  10 +-
 .../flows/profile-and-contributions.test.ts   |  10 +-
 apps/web/__tests__/unit/supabase-auth.test.ts |  82 +++++++++
 .../unit/supabase-middleware.test.ts          |  78 +++++++++
 apps/web/app/(app)/feed/page.tsx              |   4 +-
 apps/web/app/(app)/layout.tsx                 |  49 +++---
 apps/web/app/(app)/leaderboard/page.tsx       |   4 +-
 apps/web/app/(app)/messages/page.tsx          |  15 +-
 apps/web/app/(app)/notifications/page.tsx     |   9 +-
 apps/web/app/(app)/post/[id]/page.tsx         | 101 ++++-------
 apps/web/app/(app)/post/new/page.tsx          |  12 +-
 apps/web/app/(app)/prompts/page.tsx           |   7 +-
 apps/web/app/(app)/recap/page.tsx             |   9 +-
 apps/web/app/(app)/token-rich/page.tsx        |   4 +-
 .../components/providers/PostHogProvider.tsx  |  56 +++++-
 apps/web/e2e/perf/auth.setup.ts               |  88 ++++++++++
 apps/web/e2e/perf/env.ts                      |  20 +++
 apps/web/e2e/perf/pages.perf.spec.ts          | 112 ++++++++++++
 apps/web/e2e/perf/scorecard.ts                | 148 ++++++++++++++++
 apps/web/lib/profile-access.ts                |   4 +-
 apps/web/lib/supabase/auth.ts                 |  61 ++++++-
 apps/web/lib/supabase/middleware.ts           |  36 ++--
 apps/web/package.json                         |   4 +-
 apps/web/playwright.perf.config.ts            |  41 +++++
 docs/perf/BASELINE.md                         |  49 ++++++
 docs/perf/PLAN.md                             | 164 ++++++++++++++++++
 docs/perf/RUM.md                              |  38 ++++
 package.json                                  |   2 +
 33 files changed, 1243 insertions(+), 142 deletions(-)
 create mode 100644 apps/web/__tests__/components/PostHogProvider.test.tsx
 create mode 100644 apps/web/__tests__/unit/supabase-auth.test.ts
 create mode 100644 apps/web/__tests__/unit/supabase-middleware.test.ts
 create mode 100644 apps/web/e2e/perf/auth.setup.ts
 create mode 100644 apps/web/e2e/perf/env.ts
 create mode 100644 apps/web/e2e/perf/pages.perf.spec.ts
 create mode 100644 apps/web/e2e/perf/scorecard.ts
 create mode 100644 apps/web/playwright.perf.config.ts
 create mode 100644 docs/perf/BASELINE.md
 create mode 100644 docs/perf/PLAN.md
 create mode 100644 docs/perf/RUM.md

diff --git a/.env.example b/.env.example
index 923756d4..d6c2a39a 100644
--- a/.env.example
+++ b/.env.example
@@ -30,3 +30,7 @@ NEXT_PUBLIC_POSTHOG_KEY=
 
 # Dev (optional)
 PORTLESS_URL=
+
+# Perf harness test user (see docs/perf/PLAN.md)
+PERF_TEST_EMAIL=
+PERF_TEST_PASSWORD=
diff --git a/.gitignore b/.gitignore
index 984ed5ba..2c74792a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -91,3 +91,7 @@ AGENTS.md
 .waypoint/docs/code-guide.md
 .env
 .env.local
+
+# perf harness output & auth state
+perf-results/
+apps/web/e2e/perf/.auth/
diff --git a/apps/web/__tests__/api/contributions.test.ts b/apps/web/__tests__/api/contributions.test.ts
index 525dcc9f..42f1511f 100644
--- a/apps/web/__tests__/api/contributions.test.ts
+++ b/apps/web/__tests__/api/contributions.test.ts
@@ -40,6 +40,7 @@ describe("GET /api/users/[username]/contributions", () => {
 
     const client: Record<string, any> = {
       auth: {
+        getClaims: vi.fn().mockResolvedValue({ data: null, error: null }),
         getUser: vi.fn().mockResolvedValue({
           data: { user: null },
           error: null,
@@ -113,6 +114,7 @@ describe("GET /api/users/[username]/contributions", () => {
   it("returns 404 for non-existent user", async () => {
     const client: Record<string, any> = {
       auth: {
+        getClaims: vi.fn().mockResolvedValue({ data: null, error: null }),
         getUser: vi.fn().mockResolvedValue({
           data: { user: null },
           error: null,
@@ -151,6 +153,7 @@ describe("GET /api/users/[username]/contributions", () => {
   it("returns empty data when user has no usage", async () => {
     const client: Record<string, any> = {
       auth: {
+        getClaims: vi.fn().mockResolvedValue({ data: null, error: null }),
         getUser: vi.fn().mockResolvedValue({
           data: { user: null },
           error: null,
diff --git a/apps/web/__tests__/api/profile.test.ts b/apps/web/__tests__/api/profile.test.ts
index c4a3f6f5..3c6146d2 100644
--- a/apps/web/__tests__/api/profile.test.ts
+++ b/apps/web/__tests__/api/profile.test.ts
@@ -64,6 +64,10 @@ describe("GET /api/users/[username]", () => {
 
     const client: Record<string, any> = {
       auth: {
+        getClaims: vi.fn().mockResolvedValue({
+          data: { claims: { sub: "viewer-1" } },
+          error: null,
+        }),
         getUser: vi.fn().mockResolvedValue({
           data: { user: { id: "viewer-1" } },
           error: null,
@@ -192,6 +196,7 @@ describe("GET /api/users/[username]", () => {
   it("returns 404 for non-existent username", async () => {
     const client: Record<string, any> = {
       auth: {
+        getClaims: vi.fn().mockResolvedValue({ data: null, error: null }),
         getUser: vi.fn().mockResolvedValue({
           data: { user: null },
           error: null,
diff --git a/apps/web/__tests__/components/PostHogProvider.test.tsx b/apps/web/__tests__/components/PostHogProvider.test.tsx
new file mode 100644
index 00000000..feba0ffd
--- /dev/null
+++ b/apps/web/__tests__/components/PostHogProvider.test.tsx
@@ -0,0 +1,152 @@
+import { act, render, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { useReportWebVitals } from "next/web-vitals";
+import {
+  PostHogClientProvider,
+  WebVitalsReporter,
+} from "@/components/providers/PostHogProvider";
+
+const mocks = vi.hoisted(() => {
+  process.env.NEXT_PUBLIC_POSTHOG_KEY = "ph_test";
+
+  return {
+    capture: vi.fn(),
+    init: vi.fn(),
+    analyticsConsent: false,
+    unsubscribe: vi.fn(),
+    reportWebVitals: undefined as
+      | Parameters<typeof useReportWebVitals>[0]
+      | undefined,
+  };
+});
+
+vi.mock("next/web-vitals", () => ({
+  useReportWebVitals: (reporter: Parameters<typeof useReportWebVitals>[0]) => {
+    mocks.reportWebVitals = reporter;
+  },
+}));
+
+vi.mock("posthog-js", () => ({
+  default: {
+    capture: mocks.capture,
+    identify: vi.fn(),
+    init: mocks.init,
+    reset: vi.fn(),
+  },
+}));
+
+vi.mock("posthog-js/react", () => ({
+  PostHogProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+vi.mock("@/components/providers/useAnalyticsConsent", () => ({
+  useAnalyticsConsent: () => mocks.analyticsConsent,
+}));
+
+vi.mock("@/lib/supabase/client", () => ({
+  createClient: () => ({
+    auth: {
+      onAuthStateChange: () => ({
+        data: { subscription: { unsubscribe: mocks.unsubscribe } },
+      }),
+    },
+  }),
+}));
+
+describe("WebVitalsReporter", () => {
+  beforeEach(() => {
+    mocks.capture.mockClear();
+    mocks.init.mockClear();
+    mocks.analyticsConsent = false;
+    mocks.reportWebVitals = undefined;
+    mocks.unsubscribe.mockClear();
+    window.__straudePostHogInitialized = undefined;
+    window.history.replaceState({}, "", "/feed?sort=recent");
+  });
+
+  it("enables built-in web vitals only after analytics consent", async () => {
+    const { rerender } = render(
+      <PostHogClientProvider>
+        <div>Content</div>
+      </PostHogClientProvider>,
+    );
+
+    expect(mocks.init).not.toHaveBeenCalled();
+
+    mocks.analyticsConsent = true;
+    rerender(
+      <PostHogClientProvider>
+        <div>Content</div>
+      </PostHogClientProvider>,
+    );
+
+    await waitFor(() => expect(mocks.init).toHaveBeenCalledOnce());
+    expect(mocks.init).toHaveBeenCalledWith(
+      "ph_test",
+      expect.objectContaining({
+        capture_performance: { web_vitals: true },
+      }),
+    );
+  });
+
+  it("buffers TTFB until PostHog is ready and ignores built-in metrics", async () => {
+    const { rerender } = render(<WebVitalsReporter ready={false} />);
+
+    act(() => {
+      mocks.reportWebVitals?.({
+        name: "LCP",
+        id: "lcp-1",
+        value: 450,
+        delta: 450,
+        rating: "good",
+        entries: [],
+        navigationType: "navigate",
+      });
+      mocks.reportWebVitals?.({
+        name: "TTFB",
+        id: "ttfb-1",
+        value: 180,
+        delta: 180,
+        rating: "good",
+        entries: [],
+        navigationType: "navigate",
+      });
+    });
+
+    expect(mocks.capture).not.toHaveBeenCalled();
+
+    rerender(<WebVitalsReporter ready />);
+
+    await waitFor(() => {
+      expect(mocks.capture).toHaveBeenCalledOnce();
+    });
+    expect(mocks.capture).toHaveBeenCalledWith("web_vital_ttfb", {
+      metric_name: "TTFB",
+      value_ms: 180,
+      metric_id: "ttfb-1",
+      rating: "good",
+      navigation_type: "navigate",
+      pathname: "/feed",
+      $current_url: "http://localhost:3000/feed?sort=recent",
+    });
+  });
+
+  it("does not report the same TTFB metric twice", async () => {
+    render(<WebVitalsReporter ready />);
+    const metric = {
+      name: "TTFB" as const,
+      id: "ttfb-1",
+      value: 180,
+      delta: 180,
+      rating: "good" as const,
+      entries: [],
+      navigationType: "navigate" as const,
+    };
+
+    act(() => mocks.reportWebVitals?.(metric));
+    await waitFor(() => expect(mocks.capture).toHaveBeenCalledOnce());
+    act(() => mocks.reportWebVitals?.(metric));
+
+    expect(mocks.capture).toHaveBeenCalledOnce();
+  });
+});
diff --git a/apps/web/__tests__/flows/privacy-visibility.test.ts b/apps/web/__tests__/flows/privacy-visibility.test.ts
index aa4d951d..b0bbb89d 100644
--- a/apps/web/__tests__/flows/privacy-visibility.test.ts
+++ b/apps/web/__tests__/flows/privacy-visibility.test.ts
@@ -4,7 +4,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 // Mock Supabase
 // ---------------------------------------------------------------------------
 const mockSupabase = {
-  auth: { getUser: vi.fn() },
+  auth: { getUser: vi.fn(), getClaims: vi.fn() },
   from: vi.fn(),
   rpc: vi.fn(),
 };
@@ -74,6 +74,14 @@ describe("Flow: Privacy and Visibility", () => {
     mockServiceClient.rpc.mockReset();
     mockSupabase.rpc.mockReset();
     mockSupabase.from.mockReset();
+    mockSupabase.auth.getClaims.mockImplementation(async () => {
+      const result = await mockSupabase.auth.getUser();
+      const subject = result?.data?.user?.id;
+      return {
+        data: typeof subject === "string" ? { claims: { sub: subject } } : null,
+        error: result?.error ?? null,
+      };
+    });
     // Default: return array for calculate_streaks_batch (leaderboard), number for calculate_user_streak (profile)
     mockSupabase.rpc.mockImplementation((_fn: string) => {
       if (_fn === "calculate_streaks_batch") return Promise.resolve({ data: [] });
diff --git a/apps/web/__tests__/flows/profile-and-contributions.test.ts b/apps/web/__tests__/flows/profile-and-contributions.test.ts
index 66d1466a..5349669b 100644
--- a/apps/web/__tests__/flows/profile-and-contributions.test.ts
+++ b/apps/web/__tests__/flows/profile-and-contributions.test.ts
@@ -4,7 +4,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 // Mock Supabase
 // ---------------------------------------------------------------------------
 const mockSupabase = {
-  auth: { getUser: vi.fn() },
+  auth: { getUser: vi.fn(), getClaims: vi.fn() },
   from: vi.fn(),
   rpc: vi.fn(),
 };
@@ -56,6 +56,14 @@ describe("Flow: Profile and Contributions", () => {
     vi.clearAllMocks();
     mockServiceClient.from.mockReset();
     mockServiceClient.rpc.mockReset();
+    mockSupabase.auth.getClaims.mockImplementation(async () => {
+      const result = await mockSupabase.auth.getUser();
+      const subject = result?.data?.user?.id;
+      return {
+        data: typeof subject === "string" ? { claims: { sub: subject } } : null,
+        error: result?.error ?? null,
+      };
+    });
   });
 
   it("sets profile via PATCH /api/users/me", async () => {
diff --git a/apps/web/__tests__/unit/supabase-auth.test.ts b/apps/web/__tests__/unit/supabase-auth.test.ts
new file mode 100644
index 00000000..2c5bc6ae
--- /dev/null
+++ b/apps/web/__tests__/unit/supabase-auth.test.ts
@@ -0,0 +1,82 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => {
+  const getClaims = vi.fn();
+  const single = vi.fn();
+  const eq = vi.fn(() => ({ single }));
+  const select = vi.fn(() => ({ eq }));
+  const from = vi.fn(() => ({ select }));
+
+  return { getClaims, single, eq, select, from };
+});
+
+vi.mock("@/lib/supabase/server", () => ({
+  createClient: vi.fn(async () => ({
+    auth: { getClaims: mocks.getClaims },
+  })),
+}));
+
+vi.mock("@/lib/supabase/service", () => ({
+  getServiceClient: vi.fn(() => ({ from: mocks.from })),
+}));
+
+import { getAuthContext, getAuthIdentity } from "@/lib/supabase/auth";
+
+describe("Supabase auth context", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.getClaims.mockResolvedValue({
+      data: {
+        claims: {
+          sub: "user-123",
+          email: "person@example.com",
+        },
+      },
+      error: null,
+    });
+    mocks.single.mockResolvedValue({
+      data: {
+        username: "person",
+        avatar_url: null,
+        display_name: "Person",
+        team_url: null,
+        team_favicon_url: null,
+        onboarding_completed: true,
+        streak_freezes: 2,
+      },
+      error: null,
+    });
+  });
+
+  it("derives a minimal verified identity from JWT claims", async () => {
+    await expect(getAuthIdentity()).resolves.toEqual({
+      id: "user-123",
+      email: "person@example.com",
+    });
+  });
+
+  it("loads the shell profile once for the verified subject", async () => {
+    await expect(getAuthContext()).resolves.toMatchObject({
+      identity: { id: "user-123" },
+      profile: { username: "person", streak_freezes: 2 },
+    });
+
+    expect(mocks.from).toHaveBeenCalledOnce();
+    expect(mocks.from).toHaveBeenCalledWith("users");
+    expect(mocks.eq).toHaveBeenCalledWith("id", "user-123");
+    expect(mocks.single).toHaveBeenCalledOnce();
+  });
+
+  it("does not query a profile when verified claims have no subject", async () => {
+    mocks.getClaims.mockResolvedValueOnce({
+      data: { claims: {} },
+      error: null,
+    });
+
+    await expect(getAuthContext()).resolves.toEqual({
+      identity: null,
+      profile: null,
+    });
+    expect(mocks.from).not.toHaveBeenCalled();
+  });
+});
diff --git a/apps/web/__tests__/unit/supabase-middleware.test.ts b/apps/web/__tests__/unit/supabase-middleware.test.ts
new file mode 100644
index 00000000..c065654f
--- /dev/null
+++ b/apps/web/__tests__/unit/supabase-middleware.test.ts
@@ -0,0 +1,78 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { NextRequest } from "next/server";
+
+type CookieToSet = {
+  name: string;
+  value: string;
+  options?: { httpOnly?: boolean; path?: string };
+};
+
+const mocks = vi.hoisted(() => ({
+  getClaims: vi.fn(),
+}));
+
+vi.mock("@/lib/supabase/env", () => ({
+  getMissingSupabaseBrowserEnv: vi.fn(() => []),
+  formatSupabaseEnvHelp: vi.fn(),
+}));
+
+vi.mock("@supabase/ssr", () => ({
+  createServerClient: vi.fn(
+    (
+      _url: string,
+      _key: string,
+      options: { cookies: { setAll: (cookies: CookieToSet[]) => void } }
+    ) => {
+      options.cookies.setAll([
+        {
+          name: "sb-test-auth-token",
+          value: "refreshed-token",
+          options: { httpOnly: true, path: "/" },
+        },
+      ]);
+      return { auth: { getClaims: mocks.getClaims } };
+    }
+  ),
+}));
+
+import { updateSession } from "@/lib/supabase/middleware";
+
+describe("Supabase middleware auth", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.stubEnv("NEXT_PUBLIC_SUPABASE_URL", "https://test.supabase.co");
+    vi.stubEnv("NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY", "test-key");
+  });
+
+  it("uses verified claims and preserves refreshed cookies on redirects", async () => {
+    mocks.getClaims.mockResolvedValue({
+      data: { claims: { sub: "user-123" } },
+      error: null,
+    });
+
+    const response = await updateSession(
+      new NextRequest("https://straude.com/")
+    );
+
+    expect(response.status).toBe(307);
+    expect(response.headers.get("location")).toBe("https://straude.com/feed");
+    expect(response.cookies.get("sb-test-auth-token")?.value).toBe(
+      "refreshed-token"
+    );
+    expect(response.headers.get("Server-Timing")).toMatch(/^mw-auth;dur=\d+$/);
+    expect(mocks.getClaims).toHaveBeenCalledOnce();
+  });
+
+  it("redirects an unverified protected request to login", async () => {
+    mocks.getClaims.mockResolvedValue({ data: null, error: null });
+
+    const response = await updateSession(
+      new NextRequest("https://straude.com/messages")
+    );
+
+    expect(response.headers.get("location")).toBe("https://straude.com/login");
+    expect(response.cookies.get("sb-test-auth-token")?.value).toBe(
+      "refreshed-token"
+    );
+  });
+});
diff --git a/apps/web/app/(app)/feed/page.tsx b/apps/web/app/(app)/feed/page.tsx
index f3da9dc0..aa2c5e1e 100644
--- a/apps/web/app/(app)/feed/page.tsx
+++ b/apps/web/app/(app)/feed/page.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { createClient } from "@/lib/supabase/server";
-import { getAuthUser } from "@/lib/supabase/auth";
+import { getAuthIdentity } from "@/lib/supabase/auth";
 import { FeedList } from "@/components/app/feed/FeedList";
 import { enrichFeedPosts, getFeedCursor, getPendingPosts } from "@/lib/feed-enrichment";
 import type { FeedPostRow } from "@/types";
@@ -45,7 +45,7 @@ export default async function FeedPage({
   searchParams: Promise<{ tab?: string }>;
 }) {
   const params = await searchParams;
-  const user = await getAuthUser();
+  const user = await getAuthIdentity();
   const supabase = await createClient();
 
   // Unauthenticated visitors can only see the global feed
diff --git a/apps/web/app/(app)/layout.tsx b/apps/web/app/(app)/layout.tsx
index 9c16b852..8004f6ba 100644
--- a/apps/web/app/(app)/layout.tsx
+++ b/apps/web/app/(app)/layout.tsx
@@ -1,8 +1,11 @@
 import { Suspense } from "react";
 import Link from "next/link";
 import { createClient } from "@/lib/supabase/server";
-import { getServiceClient } from "@/lib/supabase/service";
-import { getAuthUser } from "@/lib/supabase/auth";
+import {
+  getAuthContext,
+  getAuthIdentity,
+  type ShellProfile,
+} from "@/lib/supabase/auth";
 import { Sidebar } from "@/components/app/shared/Sidebar";
 import { LazyRightSidebar } from "@/components/app/shared/RightSidebar";
 import { InviteButton } from "@/components/app/profile/InviteButton";
@@ -16,16 +19,6 @@ import { firstRelation } from "@/lib/utils/first-relation";
 import { loadUsageTotals } from "@/lib/data/usage-totals";
 import type { DailyUsage } from "@/types";
 
-type ShellProfile = {
-  username: string | null;
-  avatar_url: string | null;
-  display_name: string | null;
-  team_url: string | null;
-  team_favicon_url: string | null;
-  onboarding_completed: boolean | null;
-  streak_freezes: number | null;
-};
-
 type LatestPostRow = {
   id: string;
   title: string | null;
@@ -35,6 +28,12 @@ type LatestPostRow = {
 
 type SupabaseServerClient = Awaited<ReturnType<typeof createClient>>;
 
+async function measure<T>(operation: () => Promise<T>): Promise<[T, number]> {
+  const start = Date.now();
+  const result = await operation();
+  return [result, Date.now() - start];
+}
+
 function formatLatestPosts(rows: LatestPostRow[]) {
   return rows
     .map((row) => {
@@ -216,9 +215,10 @@ export default async function AppLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const user = await getAuthUser();
+  const perfTiming = process.env.PERF_TIMING === "1";
+  const [identity, authMs] = await measure(getAuthIdentity);
   // If not logged in: allow public pages, redirect others to login
-  if (!user) {
+  if (!identity) {
     // This check runs server-side as a safety net alongside proxy.ts
     // Public pages render with a guest layout below
     return (
@@ -238,19 +238,13 @@ export default async function AppLayout({
     );
   }
 
-  const db = getServiceClient();
-  const { data: profileData } = await db
-    .from("users")
-    .select("username, avatar_url, display_name, team_url, team_favicon_url, onboarding_completed, streak_freezes")
-    .eq("id", user.id)
-    .single();
+  const [{ profile }, profileMs] = await measure(getAuthContext);
 
-  const profile = profileData as ShellProfile | null;
   const onboardingIncomplete = !profile?.onboarding_completed;
 
   const leftPanel = (
     <Suspense fallback={<SidebarFallback profile={profile} />}>
-      <DeferredSidebar userId={user.id} profile={profile} />
+      <DeferredSidebar userId={identity.id} profile={profile} />
     </Suspense>
   );
 
@@ -258,6 +252,15 @@ export default async function AppLayout({
 
   return (
     <AppProviders>
+      {perfTiming && (
+        <script
+          type="application/json"
+          id="__perf-server-timing"
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify({ layoutAuth: authMs, layoutProfile: profileMs }),
+          }}
+        />
+      )}
       <CommandPalette username={profile?.username ?? null}>
         <div className="fixed inset-0 flex flex-col overflow-hidden">
           {onboardingIncomplete && (
@@ -270,7 +273,7 @@ export default async function AppLayout({
           )}
           <Suspense fallback={null}>
             <PhotoNudge
-              userId={user.id}
+              userId={identity.id}
               onboardingIncomplete={onboardingIncomplete}
             />
           </Suspense>
diff --git a/apps/web/app/(app)/leaderboard/page.tsx b/apps/web/app/(app)/leaderboard/page.tsx
index 541539b8..19685811 100644
--- a/apps/web/app/(app)/leaderboard/page.tsx
+++ b/apps/web/app/(app)/leaderboard/page.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { createClient } from "@/lib/supabase/server";
-import { getAuthUser } from "@/lib/supabase/auth";
+import { getAuthIdentity } from "@/lib/supabase/auth";
 import { getServiceClient } from "@/lib/supabase/service";
 import { LeaderboardTable } from "@/components/app/leaderboard/LeaderboardTable";
 import type { LeaderboardEntry } from "@/types";
@@ -49,7 +49,7 @@ export default async function LeaderboardPage({
   searchParams: Promise<{ period?: string; region?: string }>;
 }) {
   const { period = "week", region } = await searchParams;
-  const user = await getAuthUser();
+  const user = await getAuthIdentity();
   const supabase = await createClient();
   const db = getServiceClient();
 
diff --git a/apps/web/app/(app)/messages/page.tsx b/apps/web/app/(app)/messages/page.tsx
index a1d33cbd..0cdbf498 100644
--- a/apps/web/app/(app)/messages/page.tsx
+++ b/apps/web/app/(app)/messages/page.tsx
@@ -1,6 +1,7 @@
 import { redirect } from "next/navigation";
 import type { Metadata } from "next";
 import { createClient } from "@/lib/supabase/server";
+import { getAuthContext } from "@/lib/supabase/auth";
 import { getServiceClient } from "@/lib/supabase/service";
 import { normalizeMessageAttachmentInput } from "@/lib/storage";
 import { MessagesInbox } from "@/components/app/messages/MessagesInbox";
@@ -121,15 +122,13 @@ export default async function MessagesPage({
 }: {
   searchParams: Promise<{ with?: string }>;
 }) {
-  const [{ with: withUsername }, supabase] = await Promise.all([
+  const [{ with: withUsername }, supabase, { identity }] = await Promise.all([
     searchParams,
     createClient(),
+    getAuthContext(),
   ]);
-  const {
-    data: { user },
-  } = await supabase.auth.getUser();
 
-  if (!user) {
+  if (!identity) {
     redirect("/login");
   }
 
@@ -138,13 +137,13 @@ export default async function MessagesPage({
     supabase
       .from("direct_messages")
       .select("id", { count: "exact", head: true })
-      .eq("recipient_id", user.id)
+      .eq("recipient_id", identity.id)
       .is("read_at", null),
   ]);
 
   const explicitUsername = withUsername?.trim() || null;
   const explicitConversationPromise = explicitUsername
-    ? preloadConversation(user.id, explicitUsername)
+    ? preloadConversation(identity.id, explicitUsername)
     : Promise.resolve(null);
   const [threadsResults, explicitConversation] = await Promise.all([
     threadsPromise,
@@ -162,7 +161,7 @@ export default async function MessagesPage({
   const initialConversation = explicitUsername
     ? explicitConversation
     : preloadUsername
-      ? await preloadConversation(user.id, preloadUsername)
+      ? await preloadConversation(identity.id, preloadUsername)
       : null;
 
   return (
diff --git a/apps/web/app/(app)/notifications/page.tsx b/apps/web/app/(app)/notifications/page.tsx
index c928004c..63610afa 100644
--- a/apps/web/app/(app)/notifications/page.tsx
+++ b/apps/web/app/(app)/notifications/page.tsx
@@ -1,17 +1,14 @@
 import { NotificationsList } from "@/components/app/notifications/NotificationsList";
-import { createClient } from "@/lib/supabase/server";
+import { getAuthContext } from "@/lib/supabase/auth";
 import { redirect } from "next/navigation";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = { title: "Notifications" };
 
 export default async function NotificationsPage() {
-  const supabase = await createClient();
-  const {
-    data: { user },
-  } = await supabase.auth.getUser();
+  const { identity } = await getAuthContext();
 
-  if (!user) {
+  if (!identity) {
     redirect("/login");
   }
 
diff --git a/apps/web/app/(app)/post/[id]/page.tsx b/apps/web/app/(app)/post/[id]/page.tsx
index ee086119..f8206369 100644
--- a/apps/web/app/(app)/post/[id]/page.tsx
+++ b/apps/web/app/(app)/post/[id]/page.tsx
@@ -1,5 +1,7 @@
 import { createClient } from "@/lib/supabase/server";
+import { getAuthContext } from "@/lib/supabase/auth";
 import { notFound } from "next/navigation";
+import { cache } from "react";
 import { ActivityCard } from "@/components/app/feed/ActivityCard";
 import { CommentThread } from "@/components/app/post/CommentThread";
 import { PostEditor } from "@/components/app/post/PostEditor";
@@ -10,44 +12,40 @@ import { formatCurrency } from "@/lib/utils/format";
 import type { AggregateCount, FeedPostRow, UserSummary } from "@/types";
 import type { Metadata } from "next";
 
-type MetadataPostRow = {
-  title: string | null;
-  description: string | null;
-  user_id: string;
-  user: Array<{ username: string | null; is_public: boolean }> | null;
-  daily_usage: Array<{
-    cost_usd: number | null;
-    output_tokens: number | null;
-    models: string[] | null;
-  }> | null;
-};
-
 type RecentKudosRow = {
   user: Array<UserSummary> | null;
 };
 
-export async function generateMetadata({
-  params,
-}: {
-  params: Promise<{ id: string }>;
-}): Promise<Metadata> {
-  const { id } = await params;
+const getPost = cache(async (id: string): Promise<FeedPostRow | null> => {
   const supabase = await createClient();
-  const { data: rawPost } = await supabase
+  const { data } = await supabase
     .from("posts")
     .select(
-      "title, description, user_id, user:users!posts_user_id_fkey(username, is_public), daily_usage:daily_usage!posts_daily_usage_id_fkey(cost_usd, output_tokens, models)"
+      `
+      *,
+      user:users!posts_user_id_fkey(id, username, display_name, bio, avatar_url, country, region, link, github_username, is_public),
+      daily_usage:daily_usage!posts_daily_usage_id_fkey(*),
+      kudos_count:kudos(count),
+      comment_count:comments(count)
+    `
     )
     .eq("id", id)
     .single();
-  const post = rawPost as MetadataPostRow | null;
 
-  const {
-    data: { user: authUser },
-  } = await supabase.auth.getUser();
+  return data as FeedPostRow | null;
+});
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}): Promise<Metadata> {
+  const { id } = await params;
+  const [post, { identity }] = await Promise.all([getPost(id), getAuthContext()]);
 
   const userRow = firstRelation(post?.user);
-  const canView = Boolean(post) && (userRow?.is_public || authUser?.id === post?.user_id);
+  const canView =
+    Boolean(post) && (userRow?.is_public || identity?.id === post?.user_id);
 
   if (!canView) {
     return {
@@ -109,30 +107,17 @@ export default async function PostDetailPage({
   searchParams: Promise<{ edit?: string }>;
 }) {
   const [{ id }, query] = await Promise.all([params, searchParams]);
-  const supabase = await createClient();
-  const {
-    data: { user },
-  } = await supabase.auth.getUser();
-
-  const postPromise = supabase
-    .from("posts")
-    .select(
-      `
-      *,
-      user:users!posts_user_id_fkey(id, username, display_name, bio, avatar_url, country, region, link, github_username, is_public),
-      daily_usage:daily_usage!posts_daily_usage_id_fkey(*),
-      kudos_count:kudos(count),
-      comment_count:comments(count)
-    `
-    )
-    .eq("id", id)
-    .single();
+  const [supabase, { identity, profile }, post] = await Promise.all([
+    createClient(),
+    getAuthContext(),
+    getPost(id),
+  ]);
 
-  const kudosCheckPromise = user
+  const kudosCheckPromise = identity
     ? supabase
         .from("kudos")
         .select("id")
-        .eq("user_id", user.id)
+        .eq("user_id", identity.id)
         .eq("post_id", id)
         .maybeSingle()
     : Promise.resolve({ data: null });
@@ -147,41 +132,29 @@ export default async function PostDetailPage({
   const commentsPromise = loadPostComments({
     supabase,
     postId: id,
-    viewerId: user?.id ?? null,
+    viewerId: identity?.id ?? null,
     limit: 100,
   });
 
-  const viewerProfilePromise = user
-    ? supabase
-        .from("users")
-        .select("username, avatar_url")
-        .eq("id", user.id)
-        .maybeSingle()
-    : Promise.resolve({ data: null });
-
   const [
-    { data: post },
     { data: kudosCheck },
     { data: recentKudos },
     { comments },
-    { data: viewerProfile },
   ] = await Promise.all([
-    postPromise,
     kudosCheckPromise,
     recentKudosPromise,
     commentsPromise,
-    viewerProfilePromise,
   ]);
 
   if (!post) notFound();
 
-  if (!post.user?.is_public && user?.id !== post.user_id) {
+  if (!post.user?.is_public && identity?.id !== post.user_id) {
     notFound();
   }
 
   const hasKudosed = !!kudosCheck;
 
-  const postRow = post as FeedPostRow;
+  const postRow = post;
   const normalizedPost = {
     ...postRow,
     kudos_count: ((postRow.kudos_count as AggregateCount[] | undefined)?.[0]?.count ?? 0),
@@ -190,9 +163,9 @@ export default async function PostDetailPage({
     has_kudosed: hasKudosed,
   };
 
-  const isOwner = user?.id === post.user_id;
-  const currentCommentUser = viewerProfile?.username
-    ? { username: viewerProfile.username, avatar_url: viewerProfile.avatar_url }
+  const isOwner = identity?.id === post.user_id;
+  const currentCommentUser = profile?.username
+    ? { username: profile.username, avatar_url: profile.avatar_url }
     : undefined;
 
   return (
@@ -224,7 +197,7 @@ export default async function PostDetailPage({
       <CommentThread
         postId={id}
         initialComments={comments ?? []}
-        userId={user?.id ?? null}
+        userId={identity?.id ?? null}
         currentUser={currentCommentUser}
       />
     </>
diff --git a/apps/web/app/(app)/post/new/page.tsx b/apps/web/app/(app)/post/new/page.tsx
index 91885f80..f74b7cac 100644
--- a/apps/web/app/(app)/post/new/page.tsx
+++ b/apps/web/app/(app)/post/new/page.tsx
@@ -1,4 +1,6 @@
 import { createClient } from "@/lib/supabase/server";
+import { getAuthContext } from "@/lib/supabase/auth";
+import { redirect } from "next/navigation";
 import Link from "next/link";
 import type { Metadata } from "next";
 import { firstRelation } from "@/lib/utils/first-relation";
@@ -16,9 +18,11 @@ export const metadata: Metadata = { title: "Upload Activity" };
 
 export default async function NewPostPage() {
   const supabase = await createClient();
-  const {
-    data: { user },
-  } = await supabase.auth.getUser();
+  const { identity } = await getAuthContext();
+
+  if (!identity) {
+    redirect("/login");
+  }
 
   // Fetch recent unedited posts (no title, no description, no images)
   const { data: posts } = await supabase
@@ -30,7 +34,7 @@ export default async function NewPostPage() {
       daily_usage:daily_usage!posts_daily_usage_id_fkey(date, cost_usd, models)
     `
     )
-    .eq("user_id", user!.id)
+    .eq("user_id", identity.id)
     .is("title", null)
     .is("description", null)
     .or("images.is.null,images.eq.[]")
diff --git a/apps/web/app/(app)/prompts/page.tsx b/apps/web/app/(app)/prompts/page.tsx
index d5daecff..9395471e 100644
--- a/apps/web/app/(app)/prompts/page.tsx
+++ b/apps/web/app/(app)/prompts/page.tsx
@@ -2,6 +2,7 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 import type { Metadata } from "next";
 import { createClient } from "@/lib/supabase/server";
+import { getAuthContext } from "@/lib/supabase/auth";
 import { firstRelation } from "@/lib/utils/first-relation";
 import { timeAgo } from "@/lib/utils/format";
 import type { PromptSubmission } from "@/types";
@@ -14,11 +15,9 @@ export const metadata: Metadata = { title: "Prompts" };
 
 export default async function PromptsPage() {
   const supabase = await createClient();
-  const {
-    data: { user },
-  } = await supabase.auth.getUser();
+  const { identity } = await getAuthContext();
 
-  if (!user) {
+  if (!identity) {
     redirect("/login");
   }
 
diff --git a/apps/web/app/(app)/recap/page.tsx b/apps/web/app/(app)/recap/page.tsx
index ba4e79fa..e574e3aa 100644
--- a/apps/web/app/(app)/recap/page.tsx
+++ b/apps/web/app/(app)/recap/page.tsx
@@ -1,14 +1,11 @@
 import { redirect } from "next/navigation";
-import { createClient } from "@/lib/supabase/server";
+import { getAuthContext } from "@/lib/supabase/auth";
 import { RecapPage } from "@/components/app/recap/RecapPage";
 
 export default async function RecapRoutePage() {
-  const supabase = await createClient();
-  const {
-    data: { user },
-  } = await supabase.auth.getUser();
+  const { identity } = await getAuthContext();
 
-  if (!user) {
+  if (!identity) {
     redirect("/login");
   }
 
diff --git a/apps/web/app/(app)/token-rich/page.tsx b/apps/web/app/(app)/token-rich/page.tsx
index c5496427..646c8a32 100644
--- a/apps/web/app/(app)/token-rich/page.tsx
+++ b/apps/web/app/(app)/token-rich/page.tsx
@@ -3,7 +3,7 @@ import type { TokenRichCompany } from "@/data/token-rich";
 import { PrometheusTable } from "@/components/app/token-rich/PrometheusTable";
 import { SuggestCompanyWidget } from "@/components/app/token-rich/SuggestCompanyWidget";
 import { createClient } from "@/lib/supabase/server";
-import { getAuthUser } from "@/lib/supabase/auth";
+import { getAuthIdentity } from "@/lib/supabase/auth";
 import type { Metadata } from "next";
 
 export const revalidate = 300; // revalidate every 5 minutes
@@ -61,7 +61,7 @@ async function getCompanies(): Promise<TokenRichCompany[]> {
 
 export default async function TokenRichPage() {
   const [user, companies] = await Promise.all([
-    getAuthUser(),
+    getAuthIdentity(),
     getCompanies(),
   ]);
 
diff --git a/apps/web/components/providers/PostHogProvider.tsx b/apps/web/components/providers/PostHogProvider.tsx
index 756752a6..08717ec7 100644
--- a/apps/web/components/providers/PostHogProvider.tsx
+++ b/apps/web/components/providers/PostHogProvider.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { Suspense, useEffect, useRef, useState } from "react";
+import { Suspense, useCallback, useEffect, useRef, useState } from "react";
 import { usePathname, useSearchParams } from "next/navigation";
+import { useReportWebVitals } from "next/web-vitals";
 import posthog from "posthog-js";
 import { PostHogProvider as PHProvider } from "posthog-js/react";
 import type { User } from "@supabase/supabase-js";
@@ -45,6 +46,7 @@ export function PostHogClientProvider({
       ui_host: "https://us.posthog.com",
       defaults: "2025-05-24",
       capture_pageview: false,
+      capture_performance: { web_vitals: true },
       person_profiles: "identified_only",
     });
     initialized.current = true;
@@ -75,6 +77,7 @@ export function PostHogClientProvider({
 
   return (
     <PHProvider client={posthog}>
+      <WebVitalsReporter ready={ready} />
       <Suspense fallback={null}>
         <PageviewTracker ready={ready} />
       </Suspense>
@@ -83,6 +86,57 @@ export function PostHogClientProvider({
   );
 }
 
+type WebVitalsMetric = Parameters<Parameters<typeof useReportWebVitals>[0]>[0];
+
+type TtfbSample = {
+  metric: WebVitalsMetric;
+  currentUrl: string;
+  pathname: string;
+};
+
+/**
+ * PostHog's built-in web-vitals capture omits TTFB. Keep this reporter limited
+ * to TTFB so LCP, CLS, FCP, and INP are not counted twice.
+ */
+export function WebVitalsReporter({ ready }: { ready: boolean }) {
+  const [ttfbSample, setTtfbSample] = useState<TtfbSample | null>(null);
+  const reportedMetricIds = useRef(new Set<string>());
+  const reportWebVitals = useCallback((metric: WebVitalsMetric) => {
+    if (metric.name !== "TTFB") return;
+
+    setTtfbSample({
+      metric,
+      currentUrl: window.location.href,
+      pathname: window.location.pathname,
+    });
+  }, []);
+
+  useReportWebVitals(reportWebVitals);
+
+  useEffect(() => {
+    if (
+      !ready ||
+      !ttfbSample ||
+      reportedMetricIds.current.has(ttfbSample.metric.id)
+    ) {
+      return;
+    }
+
+    reportedMetricIds.current.add(ttfbSample.metric.id);
+    posthog.capture("web_vital_ttfb", {
+      metric_name: "TTFB",
+      value_ms: ttfbSample.metric.value,
+      metric_id: ttfbSample.metric.id,
+      rating: ttfbSample.metric.rating,
+      navigation_type: ttfbSample.metric.navigationType,
+      pathname: ttfbSample.pathname,
+      $current_url: ttfbSample.currentUrl,
+    });
+  }, [ready, ttfbSample]);
+
+  return null;
+}
+
 function PageviewTracker({ ready }: { ready: boolean }) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
diff --git a/apps/web/e2e/perf/auth.setup.ts b/apps/web/e2e/perf/auth.setup.ts
new file mode 100644
index 00000000..4a1dab77
--- /dev/null
+++ b/apps/web/e2e/perf/auth.setup.ts
@@ -0,0 +1,88 @@
+import { test as setup, expect } from "@playwright/test";
+import { createServerClient } from "@supabase/ssr";
+import { mkdirSync, writeFileSync } from "node:fs";
+import path from "node:path";
+import { AUTH_STATE_PATH, TARGETS_PATH, loadWebEnv } from "./env";
+
+// Signs in the perf test user programmatically and saves the session as a
+// Playwright storageState. Uses @supabase/ssr's own server client with an
+// in-memory cookie jar so the cookie format (base64 + chunking) is produced
+// by the library itself, not reimplemented here.
+setup("authenticate perf user and discover targets", async () => {
+  const env = loadWebEnv();
+  const email = env.PERF_TEST_EMAIL;
+  const password = env.PERF_TEST_PASSWORD;
+  expect(email, "PERF_TEST_EMAIL missing from apps/web/.env.local").toBeTruthy();
+  expect(password, "PERF_TEST_PASSWORD missing from apps/web/.env.local").toBeTruthy();
+
+  const jar = new Map<string, string>();
+  const supabase = createServerClient(
+    env.NEXT_PUBLIC_SUPABASE_URL,
+    env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY,
+    {
+      cookies: {
+        getAll: () => [...jar.entries()].map(([name, value]) => ({ name, value })),
+        setAll: (cookies: { name: string; value: string }[]) => {
+          for (const { name, value } of cookies) jar.set(name, value);
+        },
+      },
+    }
+  );
+
+  const { data: signIn, error } = await supabase.auth.signInWithPassword({
+    email,
+    password,
+  });
+  expect(error, `sign-in failed: ${error?.message}`).toBeNull();
+  expect(jar.size, "no auth cookies were written").toBeGreaterThan(0);
+
+  const storageState = {
+    cookies: [...jar.entries()].map(([name, value]) => ({
+      name,
+      value,
+      domain: "localhost",
+      path: "/",
+      expires: Math.floor(Date.now() / 1000) + 3600,
+      httpOnly: false,
+      secure: false,
+      sameSite: "Lax" as const,
+    })),
+    origins: [],
+  };
+
+  // Discover measurement targets with the signed-in client (RLS applies):
+  // a busy public profile and a recent post, so /u/... and /post/... are
+  // measured against realistic data rather than the empty perf account.
+  const [{ data: topUser }, { data: recentPost }] = await Promise.all([
+    supabase
+      .from("leaderboard_weekly")
+      .select("username")
+      .order("total_cost", { ascending: false })
+      .limit(1)
+      .maybeSingle(),
+    supabase
+      .from("posts")
+      .select("id")
+      .order("created_at", { ascending: false })
+      .limit(1)
+      .maybeSingle(),
+  ]);
+
+  expect(topUser?.username, "could not find a leaderboard profile target").toBeTruthy();
+  expect(recentPost?.id, "could not find a post target").toBeTruthy();
+
+  mkdirSync(path.dirname(AUTH_STATE_PATH), { recursive: true });
+  writeFileSync(AUTH_STATE_PATH, JSON.stringify(storageState, null, 2));
+  writeFileSync(
+    TARGETS_PATH,
+    JSON.stringify(
+      {
+        profileUsername: topUser!.username,
+        postId: recentPost!.id,
+        perfUserId: signIn.user?.id,
+      },
+      null,
+      2
+    )
+  );
+});
diff --git a/apps/web/e2e/perf/env.ts b/apps/web/e2e/perf/env.ts
new file mode 100644
index 00000000..83b6723f
--- /dev/null
+++ b/apps/web/e2e/perf/env.ts
@@ -0,0 +1,20 @@
+import { readFileSync } from "node:fs";
+import path from "node:path";
+
+// Playwright does not load Next's .env.local — parse it directly so the
+// harness uses the same Supabase project as the server under test.
+export function loadWebEnv(): Record<string, string> {
+  const file = path.join(__dirname, "..", "..", ".env.local");
+  const env: Record<string, string> = {};
+  for (const line of readFileSync(file, "utf8").split("\n")) {
+    const m = line.match(/^([A-Z_0-9]+)=(.*)$/);
+    if (!m) continue;
+    const value = m[2].trim();
+    env[m[1]] = value.replace(/^(['"])(.*)\1$/, "$2");
+  }
+  return env;
+}
+
+export const AUTH_STATE_PATH = path.join(__dirname, ".auth", "storage-state.json");
+export const TARGETS_PATH = path.join(__dirname, ".auth", "targets.json");
+export const RESULTS_DIR = path.join(__dirname, "..", "..", "perf-results");
diff --git a/apps/web/e2e/perf/pages.perf.spec.ts b/apps/web/e2e/perf/pages.perf.spec.ts
new file mode 100644
index 00000000..03cf2c74
--- /dev/null
+++ b/apps/web/e2e/perf/pages.perf.spec.ts
@@ -0,0 +1,112 @@
+import { test, expect, type Page } from "@playwright/test";
+import { readFileSync } from "node:fs";
+import { TARGETS_PATH } from "./env";
+import {
+  RUNS,
+  median,
+  summarizePage,
+  writeScorecard,
+  type PageResult,
+  type RunMetrics,
+} from "./scorecard";
+
+// Targets from docs/perf/PLAN.md (user-approved definition of done).
+const GATE = process.env.PERF_GATE === "1";
+
+type Targets = { profileUsername: string; postId: string };
+
+function targets(): Targets {
+  return JSON.parse(readFileSync(TARGETS_PATH, "utf8"));
+}
+
+const PAGES: { name: string; path: (t: Targets) => string }[] = [
+  { name: "/feed", path: () => "/feed" },
+  { name: "/leaderboard", path: () => "/leaderboard" },
+  { name: "/u/[username]", path: (t) => `/u/${encodeURIComponent(t.profileUsername)}` },
+  { name: "/post/[id]", path: (t) => `/post/${encodeURIComponent(t.postId)}` },
+  { name: "/notifications", path: () => "/notifications" },
+  { name: "/messages", path: () => "/messages" },
+  { name: "/prompts", path: () => "/prompts" },
+  { name: "/recap", path: () => "/recap" },
+  { name: "/settings", path: () => "/settings" },
+  { name: "/search", path: () => "/search" },
+];
+
+const results: PageResult[] = [];
+let rightSidebarMs: number | null = null;
+
+async function measureRun(page: Page, url: string): Promise<RunMetrics> {
+  await page.goto(url, { waitUntil: "load" });
+  return page.evaluate(async () => {
+    const nav = performance.getEntriesByType(
+      "navigation"
+    )[0] as PerformanceNavigationTiming;
+    const fcp =
+      performance.getEntriesByName("first-contentful-paint")[0]?.startTime ??
+      null;
+    const lcp = await new Promise<number | null>((resolve) => {
+      let last: number | null = null;
+      const po = new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) last = entry.startTime;
+      });
+      po.observe({ type: "largest-contentful-paint", buffered: true });
+      // allow late LCP candidates (client-fetched content) to land
+      setTimeout(() => {
+        po.disconnect();
+        resolve(last);
+      }, 1500);
+    });
+    const layoutEl = document.getElementById("__perf-server-timing");
+    return {
+      ttfb: nav.responseStart,
+      fcp,
+      lcp,
+      serverTiming: (nav.serverTiming ?? []).map((s) => ({
+        name: s.name,
+        dur: s.duration,
+      })),
+      layoutTiming: layoutEl ? JSON.parse(layoutEl.textContent || "{}") : null,
+    };
+  });
+}
+
+for (const target of PAGES) {
+  test(`perf ${target.name}`, async ({ browser, baseURL }) => {
+    const context = await browser.newContext({
+      storageState: "e2e/perf/.auth/storage-state.json",
+    });
+    const url = `${baseURL}${target.path(targets())}`;
+
+    const runs: RunMetrics[] = [];
+    for (let i = 0; i < RUNS; i++) {
+      const page = await context.newPage();
+      runs.push(await measureRun(page, url));
+      await page.close();
+    }
+    await context.close();
+
+    const result = summarizePage(target.name, runs);
+    results.push(result);
+
+    // LCP must exist: a page whose LCP never fires is a bug in the harness,
+    // not a pass. (Recorded above so the scorecard still includes the page.)
+    expect(result.lcp, `${target.name}: no LCP entry recorded`).not.toBeNull();
+  });
+}
+
+test("perf /api/app/right-sidebar (informational)", async ({ browser, baseURL }) => {
+  const context = await browser.newContext({
+    storageState: "e2e/perf/.auth/storage-state.json",
+  });
+  const durations: number[] = [];
+  for (let i = 0; i < RUNS; i++) {
+    const start = Date.now();
+    const res = await context.request.get(`${baseURL}/api/app/right-sidebar`);
+    expect(res.ok()).toBeTruthy();
+    durations.push(Date.now() - start);
+  }
+  await context.close();
+  rightSidebarMs = median(durations.slice(1));
+});
+
+test.afterAll(() => writeScorecard(results, rightSidebarMs, GATE));
diff --git a/apps/web/e2e/perf/scorecard.ts b/apps/web/e2e/perf/scorecard.ts
new file mode 100644
index 00000000..118e47fd
--- /dev/null
+++ b/apps/web/e2e/perf/scorecard.ts
@@ -0,0 +1,148 @@
+import { mkdirSync, writeFileSync } from "node:fs";
+import path from "node:path";
+import { RESULTS_DIR } from "./env";
+
+export const TTFB_TARGET_MS = 300;
+export const LCP_TARGET_MS = 500;
+export const RUNS = 5;
+
+export type RunMetrics = {
+  ttfb: number;
+  fcp: number | null;
+  lcp: number | null;
+  serverTiming: { name: string; dur: number }[];
+  layoutTiming: Record<string, number> | null;
+};
+
+export type PageResult = {
+  path: string;
+  ttfb: number;
+  fcp: number | null;
+  lcp: number | null;
+  serverTiming: Record<string, number>;
+  layoutTiming: Record<string, number>;
+  runs: RunMetrics[];
+  pass: boolean;
+};
+
+export function median(values: number[]): number {
+  if (values.length === 0) throw new Error("Cannot calculate the median of an empty sample");
+  const sorted = [...values].sort((a, b) => a - b);
+  const middle = Math.floor(sorted.length / 2);
+  return sorted.length % 2 === 0
+    ? (sorted[middle - 1] + sorted[middle]) / 2
+    : sorted[middle];
+}
+
+export function medianNullable(values: (number | null)[]): number | null {
+  const present = values.filter((value): value is number => value != null);
+  return present.length === 0 ? null : median(present);
+}
+
+function medianRecord(
+  runs: RunMetrics[],
+  select: (run: RunMetrics) => Record<string, number> | null
+): Record<string, number> {
+  const samples = new Map<string, number[]>();
+  for (const run of runs) {
+    for (const [name, duration] of Object.entries(select(run) ?? {})) {
+      samples.set(name, [...(samples.get(name) ?? []), duration]);
+    }
+  }
+  return Object.fromEntries(
+    [...samples].map(([name, durations]) => [name, median(durations)])
+  );
+}
+
+function medianServerTiming(runs: RunMetrics[]): Record<string, number> {
+  const samples = new Map<string, number[]>();
+  for (const run of runs) {
+    for (const { name, dur } of run.serverTiming) {
+      samples.set(name, [...(samples.get(name) ?? []), dur]);
+    }
+  }
+  return Object.fromEntries(
+    [...samples].map(([name, durations]) => [name, median(durations)])
+  );
+}
+
+export function summarizePage(
+  pagePath: string,
+  runs: RunMetrics[]
+): PageResult {
+  const warm = runs.slice(1);
+  const ttfb = median(warm.map((run) => run.ttfb));
+  const fcp = medianNullable(warm.map((run) => run.fcp));
+  const lcp = medianNullable(warm.map((run) => run.lcp));
+
+  return {
+    path: pagePath,
+    ttfb,
+    fcp,
+    lcp,
+    serverTiming: medianServerTiming(warm),
+    layoutTiming: medianRecord(warm, (run) => run.layoutTiming),
+    runs,
+    pass: ttfb < TTFB_TARGET_MS && lcp != null && lcp < LCP_TARGET_MS,
+  };
+}
+
+export function writeScorecard(
+  results: PageResult[],
+  rightSidebarMs: number | null,
+  gate: boolean
+): void {
+  if (results.length === 0) throw new Error("No page measurements were recorded");
+
+  mkdirSync(RESULTS_DIR, { recursive: true });
+  const date = new Date().toISOString();
+  const scorecard = {
+    date,
+    targets: { ttfbMs: TTFB_TARGET_MS, lcpMs: LCP_TARGET_MS },
+    sample: { runs: RUNS, warmRuns: RUNS - 1, discardedRuns: 1 },
+    gate,
+    rightSidebarMs,
+    pages: results.map(({ runs: _runs, ...result }) => result),
+  };
+  writeFileSync(
+    path.join(RESULTS_DIR, "scorecard.json"),
+    JSON.stringify({ ...scorecard, raw: results }, null, 2)
+  );
+
+  const format = (value: number | null) =>
+    value == null ? "n/a" : `${value.toFixed(0)}ms`;
+  const lines = [
+    `# Perf scorecard - ${date}`,
+    "",
+    `Targets: TTFB < ${TTFB_TARGET_MS}ms, LCP < ${LCP_TARGET_MS}ms (median of ${RUNS - 1} warm runs after discarding run 1, local production build)`,
+    "",
+    "| Page | TTFB | FCP | LCP | Server-Timing | Layout attribution | Pass |",
+    "|---|---:|---:|---:|---|---|:---:|",
+    ...results.map((result) => {
+      const serverTiming = Object.entries(result.serverTiming)
+        .map(([name, duration]) => `${name}:${duration.toFixed(0)}ms`)
+        .join(" ");
+      const layoutTiming = Object.entries(result.layoutTiming)
+        .map(([name, duration]) => `${name}:${duration.toFixed(0)}ms`)
+        .join(" ");
+      return `| ${result.path} | ${format(result.ttfb)} | ${format(result.fcp)} | ${format(result.lcp)} | ${serverTiming || "n/a"} | ${layoutTiming || "n/a"} | ${result.pass ? "PASS" : "FAIL"} |`;
+    }),
+    "",
+    `Right sidebar API: ${format(rightSidebarMs)}`,
+    "",
+    `${results.filter((result) => result.pass).length}/${results.length} pages passing`,
+    "",
+  ];
+  writeFileSync(path.join(RESULTS_DIR, "scorecard.md"), lines.join("\n"));
+  console.log(`\nScorecard written to perf-results/scorecard.md\n`);
+  console.log(lines.join("\n"));
+
+  if (gate) {
+    const failures = results.filter((result) => !result.pass);
+    if (failures.length > 0) {
+      throw new Error(
+        `Performance gate failed: ${failures.map((result) => result.path).join(", ")}`
+      );
+    }
+  }
+}
diff --git a/apps/web/lib/profile-access.ts b/apps/web/lib/profile-access.ts
index 33b192a5..eed8e30b 100644
--- a/apps/web/lib/profile-access.ts
+++ b/apps/web/lib/profile-access.ts
@@ -1,5 +1,5 @@
 import { createClient } from "@/lib/supabase/server";
-import { getAuthUser } from "@/lib/supabase/auth";
+import { getAuthIdentity } from "@/lib/supabase/auth";
 import { getServiceClient } from "@/lib/supabase/service";
 
 type ProfileShape = {
@@ -24,7 +24,7 @@ export async function getProfileAccessContext<TProfile extends ProfileShape>(
   // Use cached auth (shared with middleware/layout) + profile fetch in parallel
   const [authUser, { data: rawProfile, error: profileError }] =
     await Promise.all([
-      getAuthUser(),
+      getAuthIdentity(),
       db
         .from("users")
         .select(selectFields)
diff --git a/apps/web/lib/supabase/auth.ts b/apps/web/lib/supabase/auth.ts
index 06a7c0a4..a87b563c 100644
--- a/apps/web/lib/supabase/auth.ts
+++ b/apps/web/lib/supabase/auth.ts
@@ -1,10 +1,61 @@
 import { cache } from "react";
+import { getServiceClient } from "./service";
 import { createClient } from "./server";
 
-export const getAuthUser = cache(async () => {
+export type AuthIdentity = {
+  id: string;
+  email: string | null;
+};
+
+export type ShellProfile = {
+  username: string | null;
+  avatar_url: string | null;
+  display_name: string | null;
+  team_url: string | null;
+  team_favicon_url: string | null;
+  onboarding_completed: boolean | null;
+  streak_freezes: number | null;
+};
+
+export type AuthContext = {
+  identity: AuthIdentity | null;
+  profile: ShellProfile | null;
+};
+
+export const getAuthIdentity = cache(async (): Promise<AuthIdentity | null> => {
   const supabase = await createClient();
-  const {
-    data: { user },
-  } = await supabase.auth.getUser();
-  return user;
+  const { data, error } = await supabase.auth.getClaims();
+  const subject = data?.claims.sub;
+  const email = data?.claims.email;
+
+  if (error || typeof subject !== "string" || subject.length === 0) {
+    return null;
+  }
+
+  return {
+    id: subject,
+    email: typeof email === "string" ? email : null,
+  };
+});
+
+export const getAuthContext = cache(async (): Promise<AuthContext> => {
+  const identity = await getAuthIdentity();
+
+  if (!identity) {
+    return { identity: null, profile: null };
+  }
+
+  const db = getServiceClient();
+  const { data } = await db
+    .from("users")
+    .select(
+      "username, avatar_url, display_name, team_url, team_favicon_url, onboarding_completed, streak_freezes"
+    )
+    .eq("id", identity.id)
+    .single();
+
+  return {
+    identity,
+    profile: data as ShellProfile | null,
+  };
 });
diff --git a/apps/web/lib/supabase/middleware.ts b/apps/web/lib/supabase/middleware.ts
index ef29be70..735af503 100644
--- a/apps/web/lib/supabase/middleware.ts
+++ b/apps/web/lib/supabase/middleware.ts
@@ -65,15 +65,33 @@ export async function updateSession(request: NextRequest) {
     }
   );
 
-  const {
-    data: { user },
-  } = await supabase.auth.getUser();
+  const authStart = Date.now();
+  const { data } = await supabase.auth.getClaims();
+  const userId =
+    typeof data?.claims.sub === "string" ? data.claims.sub : null;
+  // Surfaced to the perf harness and RUM via the Server-Timing response header
+  supabaseResponse.headers.set(
+    "Server-Timing",
+    `mw-auth;dur=${Date.now() - authStart}`
+  );
 
   // Redirect authenticated users from landing to feed
-  if (user && request.nextUrl.pathname === "/") {
+  const redirectWithSession = (pathname: string) => {
     const url = request.nextUrl.clone();
-    url.pathname = "/feed";
-    return NextResponse.redirect(url);
+    url.pathname = pathname;
+    const redirectResponse = NextResponse.redirect(url);
+    supabaseResponse.cookies.getAll().forEach((cookie) =>
+      redirectResponse.cookies.set(cookie)
+    );
+    const serverTiming = supabaseResponse.headers.get("Server-Timing");
+    if (serverTiming) {
+      redirectResponse.headers.set("Server-Timing", serverTiming);
+    }
+    return redirectResponse;
+  };
+
+  if (userId && request.nextUrl.pathname === "/") {
+    return redirectWithSession("/feed");
   }
 
   // Protect app routes
@@ -82,10 +100,8 @@ export async function updateSession(request: NextRequest) {
     request.nextUrl.pathname.startsWith(p)
   );
 
-  if (!user && isProtected) {
-    const url = request.nextUrl.clone();
-    url.pathname = "/login";
-    return NextResponse.redirect(url);
+  if (!userId && isProtected) {
+    return redirectWithSession("/login");
   }
 
   return supabaseResponse;
diff --git a/apps/web/package.json b/apps/web/package.json
index c65b01bf..e2bd772e 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -13,7 +13,9 @@
     "typecheck": "tsc --noEmit -p tsconfig.check.json",
     "test": "vitest run",
     "test:integration": "vitest run -c vitest.integration.config.ts",
-    "test:e2e": "playwright test"
+    "test:e2e": "playwright test",
+    "perf": "bun run build && playwright test -c playwright.perf.config.ts",
+    "perf:check": "bun run build && PERF_GATE=1 playwright test -c playwright.perf.config.ts"
   },
   "dependencies": {
     "@anthropic-ai/sdk": "^0.39",
diff --git a/apps/web/playwright.perf.config.ts b/apps/web/playwright.perf.config.ts
new file mode 100644
index 00000000..eac1e5af
--- /dev/null
+++ b/apps/web/playwright.perf.config.ts
@@ -0,0 +1,41 @@
+import { defineConfig } from "@playwright/test";
+
+// Performance harness: measures TTFB/FCP/LCP for every authenticated page
+// against a production build talking to the real Supabase project.
+// `bun run perf` = measure + scorecard; `bun run perf:check` = gate on targets.
+const port = 3197;
+export default defineConfig({
+  testDir: "./e2e/perf",
+  fullyParallel: false,
+  workers: 1,
+  retries: 0,
+  reporter: [["list"]],
+  outputDir: "./perf-results/playwright",
+  timeout: 120_000,
+  use: {
+    baseURL: `http://localhost:${port}`,
+    trace: "off",
+  },
+  webServer: {
+    command: `bun run start -p ${port}`,
+    url: `http://localhost:${port}`,
+    reuseExistingServer: false,
+    timeout: 300_000,
+    env: { PERF_TIMING: "1" },
+  },
+  projects: [
+    {
+      name: "setup",
+      testMatch: /auth\.setup\.ts/,
+    },
+    {
+      name: "perf",
+      dependencies: ["setup"],
+      testMatch: /pages\.perf\.spec\.ts/,
+      use: {
+        browserName: "chromium",
+        storageState: "e2e/perf/.auth/storage-state.json",
+      },
+    },
+  ],
+});
diff --git a/docs/perf/BASELINE.md b/docs/perf/BASELINE.md
new file mode 100644
index 00000000..bc4b5a4d
--- /dev/null
+++ b/docs/perf/BASELINE.md
@@ -0,0 +1,49 @@
+# M0 performance baseline
+
+Captured on 2026-07-18 from a local production build before the subsequent
+auth-consolidation edits in the working tree.
+
+## Result
+
+All 10 authenticated gating pages met the TTFB target. Five met both gates.
+The five failures were LCP-only: `/recap` (626ms), `/u/[username]` (518ms),
+`/leaderboard` (510ms), `/feed` (504ms), and `/messages` (500ms). The target is
+strictly less than 500ms, so 500ms is a failure.
+
+| Page | TTFB | FCP | LCP | Server-Timing | Layout attribution | Pass |
+|---|---:|---:|---:|---|---|:---:|
+| `/feed` | 87ms | 148ms | 504ms | mw-auth:25ms | layoutAuth:25ms layoutProfile:29ms | FAIL |
+| `/leaderboard` | 92ms | 152ms | 510ms | mw-auth:30ms | layoutAuth:29ms layoutProfile:30ms | FAIL |
+| `/u/[username]` | 85ms | 144ms | 518ms | mw-auth:26ms | layoutAuth:26ms layoutProfile:30ms | FAIL |
+| `/post/[id]` | 100ms | 162ms | 362ms | mw-auth:25ms | layoutAuth:27ms layoutProfile:38ms | PASS |
+| `/notifications` | 87ms | 148ms | 494ms | mw-auth:29ms | layoutAuth:26ms layoutProfile:27ms | PASS |
+| `/messages` | 92ms | 154ms | 500ms | mw-auth:26ms | layoutAuth:25ms layoutProfile:32ms | FAIL |
+| `/prompts` | 84ms | 144ms | 144ms | mw-auth:25ms | layoutAuth:24ms layoutProfile:28ms | PASS |
+| `/recap` | 88ms | 148ms | 626ms | mw-auth:29ms | layoutAuth:26ms layoutProfile:27ms | FAIL |
+| `/settings` | 82ms | 142ms | 484ms | mw-auth:25ms | layoutAuth:25ms layoutProfile:27ms | PASS |
+| `/search` | 85ms | 142ms | 486ms | mw-auth:26ms | layoutAuth:24ms layoutProfile:28ms | PASS |
+
+Right-sidebar API median: **125ms** (informational).
+
+## Method
+
+- Command: `bun run perf` from the repository root.
+- Runtime: Next.js 16.2.6 production build via `next build` and Playwright's
+  `webServer` running `next start` on localhost.
+- Browser: Playwright 1.58.2 with its pinned Chromium 145.0.7632.6 headless
+  shell on macOS arm64.
+- Backend: the configured production Supabase project, using the dedicated
+  authenticated perf account from `PERF_TEST_EMAIL` and
+  `PERF_TEST_PASSWORD`.
+- Dynamic targets: the setup fixture selected a current leaderboard profile
+  and recent post visible to the perf account.
+- Sampling: five full navigations per page; run one discarded; reported values
+  are the median of the remaining four runs.
+- Gates: TTFB <300ms and LCP <500ms. FCP and right-sidebar response time are
+  recorded but do not gate the page.
+
+The raw JSON and generated Markdown remain in the gitignored
+`apps/web/perf-results/` directory. Middleware auth attribution comes from the
+`Server-Timing` response header. Layout auth/profile attribution comes from a
+perf-only JSON marker in the rendered document because an App Router Server
+Component cannot append response headers after middleware has returned.
diff --git a/docs/perf/PLAN.md b/docs/perf/PLAN.md
new file mode 100644
index 00000000..4567525a
--- /dev/null
+++ b/docs/perf/PLAN.md
@@ -0,0 +1,164 @@
+# Straude Performance Mission: every core page < 500ms
+
+## Milestone status
+
+- [x] M0 harness — acceptance: `bun run perf` scorecard for all 10 pages; `BASELINE.md` ready for the owner commit
+- [ ] M1 PostHog RUM — acceptance: `$web_vitals` in PostHog after deploy
+- [ ] M2 auth consolidation — acceptance: TTFB drop; no direct `auth.getUser()` in (app); tests green
+- [ ] M3 waterfalls/duplicates — acceptance: per-page deltas; no regressions
+- [ ] M4 DB layer — acceptance: EXPLAIN deltas; advisors clean; tests green
+- [ ] M5 server caching — acceptance: right-sidebar timing; leakage test green
+- [ ] M6 rendering/bundle — acceptance: analyzer baseline; FCP/LCP deltas
+- [ ] M7 goal loop — acceptance: two consecutive clean `bun run perf:check` passes
+
+## Latest scorecard
+
+Captured 2026-07-18. Targets: TTFB <300ms and LCP <500ms. Five of 10 pages
+pass both gates; all 10 pass the TTFB gate.
+
+| Page | TTFB | FCP | LCP | Server-Timing | Layout attribution | Pass |
+|---|---:|---:|---:|---|---|:---:|
+| `/feed` | 87ms | 148ms | 504ms | mw-auth:25ms | layoutAuth:25ms layoutProfile:29ms | FAIL |
+| `/leaderboard` | 92ms | 152ms | 510ms | mw-auth:30ms | layoutAuth:29ms layoutProfile:30ms | FAIL |
+| `/u/[username]` | 85ms | 144ms | 518ms | mw-auth:26ms | layoutAuth:26ms layoutProfile:30ms | FAIL |
+| `/post/[id]` | 100ms | 162ms | 362ms | mw-auth:25ms | layoutAuth:27ms layoutProfile:38ms | PASS |
+| `/notifications` | 87ms | 148ms | 494ms | mw-auth:29ms | layoutAuth:26ms layoutProfile:27ms | PASS |
+| `/messages` | 92ms | 154ms | 500ms | mw-auth:26ms | layoutAuth:25ms layoutProfile:32ms | FAIL |
+| `/prompts` | 84ms | 144ms | 144ms | mw-auth:25ms | layoutAuth:24ms layoutProfile:28ms | PASS |
+| `/recap` | 88ms | 148ms | 626ms | mw-auth:29ms | layoutAuth:26ms layoutProfile:27ms | FAIL |
+| `/settings` | 82ms | 142ms | 484ms | mw-auth:25ms | layoutAuth:25ms layoutProfile:27ms | PASS |
+| `/search` | 85ms | 142ms | 486ms | mw-auth:26ms | layoutAuth:24ms layoutProfile:28ms | PASS |
+
+Right-sidebar API: 125ms. Full method and environment notes are in
+[`BASELINE.md`](BASELINE.md).
+
+
+## Context
+
+Every authenticated page currently takes a couple of seconds to load. Vercel Speed Insights costs $10/mo and we won't pay it, so we build our own free measurement stack (Playwright lab harness + PostHog RUM) and then optimize until every authenticated page passes. This plan is the long-horizon goal spec: it will be copied into `docs/perf/PLAN.md` as the cross-session tracker, and the lab scorecard (`bun run perf:check`) is the falsifiable goal check Claude runs each session.
+
+**Why pages are slow (verified in code):**
+1. **Auth validated 2–4× per navigation**, each a network round trip to Supabase: `proxy.ts` → [middleware.ts:68](apps/web/lib/supabase/middleware.ts) `getUser()`, then [app/(app)/layout.tsx:219](apps/web/app/(app)/layout.tsx) `getAuthUser()` (separate scope, not deduped), then 6 pages call `auth.getUser()` directly (recap, messages, post/[id], prompts, notifications).
+2. **Layout blocks all children** on a profile `.single()` fetch ([layout.tsx:242-246](apps/web/app/(app)/layout.tsx)).
+3. **Leaderboards are plain views** (matviews were dropped in migration `20260218224043`) doing full `GROUP BY` aggregations over `daily_usage` on every read — and the right-sidebar API hits `leaderboard_weekly` on **every** authenticated page. No covering index for the aggregation.
+4. **Zero cross-request caching** in the authenticated app: no `unstable_cache`, no `"use cache"`, no tags. Only `React cache()` on `getAuthUser`.
+5. **Waterfalls & duplicates**: `enrichFeedPosts` awaited after `get_feed` (feed + profile); profile page does 13 queries incl. 2–3 redundant full `daily_usage` scans; [lib/radar.ts](apps/web/lib/radar.ts) full-table-scans 5 tables per profile view (5-min per-instance cache only); `calculate_user_streak` RPC loops one query per streak day; messages page double-preloads conversations and signs URLs per message; post/[id] double-fetches auth + post via `generateMetadata`.
+6. **No measurement tooling at all**: no web-vitals, no Server-Timing, no bundle analyzer, no perf tests.
+
+## Definition of done (user-approved)
+
+| Metric | Target | How measured |
+|---|---|---|
+| Server TTFB | < 300 ms | Lab harness: Playwright vs local prod build (`next build` + `next start`, prod Supabase), median of 5 warm runs (discard run 1) |
+| LCP | < 500 ms | Same harness |
+| RUM p75 TTFB / LCP | < 500 ms / < 1 s | PostHog web vitals — tracked as honesty check, **not gating** |
+
+**Gating pages (ALL authenticated):** `/feed`, `/leaderboard`, `/u/[username]`, `/post/[id]`, `/notifications`, `/messages`, `/prompts`, `/recap`, `/settings`, `/search`. The mission is complete when `bun run perf:check` exits 0 (every gating page under target) and the result is reproducible on a second run.
+
+**User-approved infrastructure decisions:**
+- Migrate Supabase project `kanfzeovbmusnhmbnhit` to **asymmetric JWT signing keys** so middleware can verify tokens locally via `getClaims()` (regression-test CLI auth after).
+- Enable **pg_cron** in Supabase to refresh leaderboard snapshots (~every 10 min).
+
+## Milestones
+
+Each milestone is independently committable; record scorecard-before/after in `docs/perf/PLAN.md` per milestone. Order matters: measure first.
+
+### M0 — Lab measurement harness (no app changes)
+- `apps/web/e2e/perf/auth.setup.ts`: authenticated Playwright fixture. Seed/create a perf test user (`PERF_TEST_EMAIL`/`PERF_TEST_PASSWORD` in `.env.local`, added to `.env.example`), sign in via login form or programmatic `signInWithPassword` → storageState.
+- `apps/web/e2e/perf/pages.perf.spec.ts`: for each gating page, collect TTFB (`navigation.responseStart`), FCP (paint entries), LCP (buffered PerformanceObserver); 5 iterations, discard first, report median. Also measure `/api/app/right-sidebar` response time.
+- `apps/web/e2e/perf/scorecard.ts`: writes `perf-results/scorecard.{json,md}` (gitignored) with pass/fail per page; **non-zero exit on any failure**.
+- `apps/web/playwright.perf.config.ts`: `workers: 1`, no retries, `webServer: { command: "bun run start" }` (build separately) — use Playwright's webServer, not shell backgrounding.
+- Scripts: `perf` (build + run harness), `perf:check` (the goal-loop command).
+- **Server-Timing headers**: instrument `proxy.ts` (auth duration) and `app/(app)/layout.tsx` (auth, profile fetch) so the harness attributes TTFB; read via `navigation.serverTiming`.
+- Commit `docs/perf/BASELINE.md` with the first scorecard, and create `docs/perf/PLAN.md` from this plan.
+- **Acceptance:** `bun run perf` produces a scorecard with baseline numbers for all 10 pages.
+
+### M1 — RUM via PostHog (free)
+- Enable web-vitals capture in [PostHogProvider.tsx](apps/web/components/providers/PostHogProvider.tsx) — verify the current posthog-js option name against docs (likely `capture_performance: { web_vitals: true }`); stays behind the existing consent gate. Optionally add `useReportWebVitals` forwarding for App Router soft navigations (keep only one path if double-counting).
+- `docs/perf/RUM.md`: the PostHog query/insight for p75 TTFB/LCP per pathname.
+- **Acceptance:** `$web_vitals` events visible in PostHog after deploy.
+
+### M2 — Auth consolidation (highest-leverage server win)
+- Migrate project to asymmetric JWT signing keys (Supabase dashboard); verify CLI auth (`cli_auth_codes` flows) still works.
+- Middleware: replace `getUser()` with `getClaims()` (local JWKS verification) in [lib/supabase/middleware.ts](apps/web/lib/supabase/middleware.ts). Verify current @supabase/ssr guidance first (supabase-js is 2.108.1).
+- Extend [lib/supabase/auth.ts](apps/web/lib/supabase/auth.ts) into a `cache()`d `getAuthContext()` returning `{ user, profile }` in one fetch; use it in the app layout (replacing the L219 + L242 pair) and in the 6 pages calling `auth.getUser()` directly.
+- post/[id]: wrap post fetch in `React cache()` so `generateMetadata` + page share one fetch/auth.
+- **Acceptance:** scorecard TTFB drop across all pages; `grep -rn "auth.getUser()" "apps/web/app/(app)"` empty outside the helper; golden-path e2e + `migration-safety.test.ts` green.
+
+### M3 — Kill waterfalls & duplicate queries (one commit per page)
+- Layout: dedupe `loadLatestPosts` (DeferredSidebar vs PhotoNudge) via a `cache()`d loader; keep all sidebar queries inside Suspense.
+- Profile [u/[username]/page.tsx](apps/web/app/(app)/u/[username]/page.tsx): fold `getProfileAccessContext`'s sequential follows lookup into the parallel batch; run `enrichFeedPosts` concurrently; redundant `daily_usage` scans collapse in M4.
+- Feed [feed/page.tsx:66](apps/web/app/(app)/feed/page.tsx): parallelize enrichment or fold counts into `get_feed` (must stay SECURITY DEFINER; keep redaction invariants that `migration-safety.test.ts` enforces).
+- Messages: remove second sequential `preloadConversation`; batch signed URLs via `createSignedUrls([...])`.
+- Leaderboard page: merge the two sequential query waves.
+- **Acceptance:** per-page scorecard deltas recorded; no page regresses; redaction tests green.
+
+### M4 — Database layer (migrations via Supabase MCP `apply_migration`, per memory)
+1. Covering index for leaderboard aggregation, e.g. `daily_usage(date, user_id) INCLUDE (cost_usd, output_tokens)` — validate with `EXPLAIN ANALYZE`.
+2. Leaderboard snapshots: replicate the `open_stats_snapshots` JSONB pattern ([lib/open-stats.ts](apps/web/lib/open-stats.ts)); refresh via **pg_cron** every ~10 min; keep views as fallback; drop vestigial `refresh_leaderboards()` + `idx_leaderboard_*`.
+3. Rewrite `calculate_user_streak` set-based (gaps-and-islands, mirroring `calculate_streaks_batch`) — it's called on every sidebar render.
+4. New `get_profile_stats(user_id)` RPC: totals + contributions + radar inputs in one scan; replace [lib/radar.ts](apps/web/lib/radar.ts) full-table `getDistributions()` (fold distributions into the snapshot refresh).
+- **Invariant:** any RPC reading non-public `users` columns (timezone, onboarding_completed, streak_freezes) must be SECURITY DEFINER — INVOKER RPCs silently fail under the column grants.
+- **Acceptance:** EXPLAIN before/after captured; `/leaderboard` + `/u/[username]` scorecard deltas; `migration-safety.test.ts` green; Supabase advisors clean.
+
+### M5 — Server-side caching
+- `unstable_cache` (+ tags, 60–300 s revalidate) around: right-sidebar loader (`app/api/app/right-sidebar`), leaderboard snapshot reads, radar reads. Default to `unstable_cache`; only consider `"use cache"`/`cacheComponents` after verifying Next 16 stability.
+- **Never** shared-cache per-user data (feed, messages, notifications) — request-scoped `cache()` only. Add an integration test asserting no user-scoped data in shared cache keys.
+- **Acceptance:** right-sidebar timing in scorecard; leakage test green.
+
+### M6 — Rendering & client bundle
+- Ensure every gating page has `loading.tsx`/Suspense shell (currently only feed, leaderboard, post/[id], u/[username] have one).
+- Add `@next/bundle-analyzer` behind `ANALYZE=1`; baseline in `docs/perf/bundles.md`; dynamic-import route-specific heavy deps (recharts, kbar, react-markdown, heic libs). `optimizePackageImports` already covers lucide/motion/recharts.
+- Client-fetch pages (`/settings`, `/search`, `/card`) currently fetch in `useEffect` — move to server components or stream data to hit LCP targets.
+- **Acceptance:** first-load JS per route in analyzer report; FCP/LCP scorecard deltas.
+
+### M7 — Goal loop & regression guard
+- `bun run perf:check` is the per-session goal check: run it, paste the scorecard into `docs/perf/PLAN.md`, work the worst failing page next.
+- Optional: `@lhci/cli` in GitHub Actions for public pages (authed scorecard stays local — needs secrets).
+- **Acceptance:** two consecutive `perf:check` passes on a clean checkout → mission complete; update `docs/CHANGELOG.md` + `docs/DECISIONS.md` (JWT keys, pg_cron, snapshot pattern).
+
+## Current state snapshot (as of 2026-07-18, M0 complete)
+
+- **Done:** M0 production-build Playwright harness, authenticated perf fixture,
+  10-page scorecard, right-sidebar measurement, strict goal gate, timing
+  attribution, and durable baseline. `bun run perf` completed 12/12 Playwright
+  tests and recorded 5/10 pages passing both gates.
+- **Baseline:** every page passes TTFB. The next user-visible bottleneck is LCP,
+  led by `/recap` at 626ms. See [`BASELINE.md`](BASELINE.md).
+- **In flight in the shared working tree:** M1 PostHog RUM and M2 auth
+  consolidation edits are being developed separately. The M0 baseline predates
+  the auth-consolidation edits.
+- **Exact next action:** finish M1 by deploying the consent-gated web-vitals
+  capture and verifying production events, then run `bun run perf` again after
+  M2 verification to record the auth-consolidation delta.
+
+## Implementation notes
+
+- The proxy exposes middleware auth duration through the standard
+  `Server-Timing` header and the harness reads it from
+  `PerformanceNavigationTiming.serverTiming`.
+- App Router Server Components cannot mutate the response headers after the
+  proxy returns. Layout auth/profile durations therefore use a perf-only JSON
+  marker in the rendered document. The scorecard keeps this in a separate
+  `Layout attribution` column instead of mislabeling it as `Server-Timing`.
+- Generated scorecards, Playwright artifacts, and auth storage state are
+  gitignored under `apps/web/perf-results/` and `apps/web/e2e/perf/.auth/`.
+
+## Cross-session protocol
+
+On session start: read `docs/perf/PLAN.md`, check milestone status against `git log`, run `bun run perf:check`, resume at the first incomplete milestone or the worst failing page. Commit after every milestone (small commits to `main` per repo convention). Keep `implementation-notes.md` deviations logged in `docs/perf/PLAN.md`.
+
+**Interruption safety (user-directed):**
+- Commit early and often — uncommitted progress is the only kind that gets lost. Any time a sub-step is done and green, commit it. Update the "Current state snapshot" section of `docs/perf/PLAN.md` (what's done, exact next action) before any risky/long operation and at every milestone boundary.
+- **Session/usage limit handling:** if the session hits the usage limit before the performance target is met, read the limit-reset time from the Claude output, then schedule a wake-up message ("keep going") for 1 minute after the reset (scheduled-task/wakeup tooling) so the mission resumes automatically and runs to completion. On wake-up, follow the session-start protocol above.
+
+## API uncertainties — verify with docs (Context7/find-docs) before implementing, never guess
+- posthog-js web-vitals capture option name.
+- `getClaims()` prerequisites + current @supabase/ssr middleware guidance.
+- Next 16 `"use cache"`/`cacheComponents` status (default: `unstable_cache`).
+- Playwright `webServer` + `next start` (Turbopack build) interplay.
+
+## Verification
+- Every milestone: `bun run perf:check` delta + `bun test` + `tsc --noEmit` + golden-path e2e.
+- DB milestones additionally: `migration-safety.test.ts`, Supabase advisors, manual check that feed/profile render identically for a non-owner viewer (redaction).
+- RUM check ~1 week after M2/M4 land: PostHog p75 should corroborate lab wins; if lab passes but RUM p75 is far off, revisit the metric definition with Oscar.
diff --git a/docs/perf/RUM.md b/docs/perf/RUM.md
new file mode 100644
index 00000000..cca7e91f
--- /dev/null
+++ b/docs/perf/RUM.md
@@ -0,0 +1,38 @@
+# PostHog real-user performance monitoring
+
+Straude records real-user performance only after analytics consent:
+
+- PostHog's built-in `$web_vitals` event records LCP, CLS, FCP, and INP.
+- Straude's custom `web_vital_ttfb` event records TTFB only. Keeping the Next.js reporter TTFB-only avoids duplicating PostHog's built-in metrics.
+
+## Insights
+
+Create these PostHog Trends insights with the date range and environment filters appropriate to the release being evaluated.
+
+### LCP p75 by pathname
+
+1. Event: `$web_vitals`
+2. Aggregation: property value, 75th percentile
+3. Property: `$web_vitals_LCP_value`
+4. Breakdown: `$pathname`
+5. Filter: `$web_vitals_LCP_value` is set
+
+The property is milliseconds. Name the insight `Web RUM - LCP p75 by pathname`.
+
+### TTFB p75 by pathname
+
+1. Event: `web_vital_ttfb`
+2. Aggregation: property value, 75th percentile
+3. Property: `value_ms`
+4. Breakdown: `pathname`
+5. Filter: `metric_name` equals `TTFB`
+
+Name the insight `Web RUM - TTFB p75 by pathname`.
+
+The custom event also carries `metric_id`, `rating`, `navigation_type`, and `$current_url`. Use `navigation_type` to separate standard navigations from reloads and history restores when diagnosing a regression.
+
+## Interpretation and limitations
+
+- TTFB is measured for document navigation. Next.js client-side route transitions do not create a new document-navigation TTFB sample, so this is not an App Router soft-navigation latency metric.
+- RUM includes real devices, networks, geographies, browser state, and consented users only. Compare release windows and sample counts before attributing a change to application code.
+- RUM is an honesty check, not a release gate. `bun run perf:check` remains the reproducible performance gate; production p75 trends provide corroborating evidence.
diff --git a/package.json b/package.json
index a617bb0c..e3b1fb5c 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,8 @@
     "dev": "turbo dev",
     "dev:local": "bun run local:env && bun --cwd apps/web dev:plain",
     "build": "turbo build",
+    "perf": "bun run --cwd apps/web perf",
+    "perf:check": "bun run --cwd apps/web perf:check",
     "lint": "turbo lint",
     "typecheck": "turbo typecheck",
     "local:up": "bunx supabase start",

From 63f0a384f0c766e8584fb4af24ef72b5d6267ed3 Mon Sep 17 00:00:00 2001
From: Oscar Hong <oscar.hong2015@gmail.com>
Date: Sat, 18 Jul 2026 09:50:16 -0700
Subject: [PATCH 2/9] record auth performance delta

---
 docs/perf/PLAN.md | 50 ++++++++++++++++++++++++-----------------------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/docs/perf/PLAN.md b/docs/perf/PLAN.md
index 4567525a..edea2fef 100644
--- a/docs/perf/PLAN.md
+++ b/docs/perf/PLAN.md
@@ -4,7 +4,7 @@
 
 - [x] M0 harness — acceptance: `bun run perf` scorecard for all 10 pages; `BASELINE.md` ready for the owner commit
 - [ ] M1 PostHog RUM — acceptance: `$web_vitals` in PostHog after deploy
-- [ ] M2 auth consolidation — acceptance: TTFB drop; no direct `auth.getUser()` in (app); tests green
+- [x] M2 auth consolidation — acceptance: TTFB drop; no direct `auth.getUser()` in (app); tests green
 - [ ] M3 waterfalls/duplicates — acceptance: per-page deltas; no regressions
 - [ ] M4 DB layer — acceptance: EXPLAIN deltas; advisors clean; tests green
 - [ ] M5 server caching — acceptance: right-sidebar timing; leakage test green
@@ -13,24 +13,24 @@
 
 ## Latest scorecard
 
-Captured 2026-07-18. Targets: TTFB <300ms and LCP <500ms. Five of 10 pages
-pass both gates; all 10 pass the TTFB gate.
+Captured 2026-07-18 after M2 auth consolidation. Targets: TTFB <300ms and
+LCP <500ms. Nine of 10 pages pass both gates; all 10 pass the TTFB gate.
 
 | Page | TTFB | FCP | LCP | Server-Timing | Layout attribution | Pass |
 |---|---:|---:|---:|---|---|:---:|
-| `/feed` | 87ms | 148ms | 504ms | mw-auth:25ms | layoutAuth:25ms layoutProfile:29ms | FAIL |
-| `/leaderboard` | 92ms | 152ms | 510ms | mw-auth:30ms | layoutAuth:29ms layoutProfile:30ms | FAIL |
-| `/u/[username]` | 85ms | 144ms | 518ms | mw-auth:26ms | layoutAuth:26ms layoutProfile:30ms | FAIL |
-| `/post/[id]` | 100ms | 162ms | 362ms | mw-auth:25ms | layoutAuth:27ms layoutProfile:38ms | PASS |
-| `/notifications` | 87ms | 148ms | 494ms | mw-auth:29ms | layoutAuth:26ms layoutProfile:27ms | PASS |
-| `/messages` | 92ms | 154ms | 500ms | mw-auth:26ms | layoutAuth:25ms layoutProfile:32ms | FAIL |
-| `/prompts` | 84ms | 144ms | 144ms | mw-auth:25ms | layoutAuth:24ms layoutProfile:28ms | PASS |
-| `/recap` | 88ms | 148ms | 626ms | mw-auth:29ms | layoutAuth:26ms layoutProfile:27ms | FAIL |
-| `/settings` | 82ms | 142ms | 484ms | mw-auth:25ms | layoutAuth:25ms layoutProfile:27ms | PASS |
-| `/search` | 85ms | 142ms | 486ms | mw-auth:26ms | layoutAuth:24ms layoutProfile:28ms | PASS |
+| `/feed` | 37ms | 96ms | 448ms | mw-auth:0ms | layoutAuth:2ms layoutProfile:29ms | PASS |
+| `/leaderboard` | 38ms | 94ms | 452ms | mw-auth:1ms | layoutAuth:2ms layoutProfile:31ms | PASS |
+| `/u/[username]` | 37ms | 96ms | 480ms | mw-auth:1ms | layoutAuth:2ms layoutProfile:30ms | PASS |
+| `/post/[id]` | 36ms | 92ms | 438ms | mw-auth:1ms | layoutAuth:3ms layoutProfile:29ms | PASS |
+| `/notifications` | 34ms | 92ms | 434ms | mw-auth:1ms | layoutAuth:2ms layoutProfile:28ms | PASS |
+| `/messages` | 59ms | 116ms | 470ms | mw-auth:1ms | layoutAuth:1ms layoutProfile:28ms | PASS |
+| `/prompts` | 59ms | 116ms | 116ms | mw-auth:0ms | layoutAuth:2ms layoutProfile:28ms | PASS |
+| `/recap` | 35ms | 92ms | 552ms | mw-auth:0ms | layoutAuth:1ms layoutProfile:29ms | FAIL |
+| `/settings` | 33ms | 88ms | 132ms | mw-auth:0ms | layoutAuth:2ms layoutProfile:27ms | PASS |
+| `/search` | 32ms | 84ms | 428ms | mw-auth:0ms | layoutAuth:2ms layoutProfile:27ms | PASS |
 
-Right-sidebar API: 125ms. Full method and environment notes are in
-[`BASELINE.md`](BASELINE.md).
+Right-sidebar API: 102ms. The original pre-M2 baseline and full method notes
+are in [`BASELINE.md`](BASELINE.md).
 
 
 ## Context
@@ -117,20 +117,22 @@ Each milestone is independently committable; record scorecard-before/after in `d
 - Optional: `@lhci/cli` in GitHub Actions for public pages (authed scorecard stays local — needs secrets).
 - **Acceptance:** two consecutive `perf:check` passes on a clean checkout → mission complete; update `docs/CHANGELOG.md` + `docs/DECISIONS.md` (JWT keys, pg_cron, snapshot pattern).
 
-## Current state snapshot (as of 2026-07-18, M0 complete)
+## Current state snapshot (as of 2026-07-18, M2 complete)
 
 - **Done:** M0 production-build Playwright harness, authenticated perf fixture,
   10-page scorecard, right-sidebar measurement, strict goal gate, timing
   attribution, and durable baseline. `bun run perf` completed 12/12 Playwright
   tests and recorded 5/10 pages passing both gates.
-- **Baseline:** every page passes TTFB. The next user-visible bottleneck is LCP,
-  led by `/recap` at 626ms. See [`BASELINE.md`](BASELINE.md).
-- **In flight in the shared working tree:** M1 PostHog RUM and M2 auth
-  consolidation edits are being developed separately. The M0 baseline predates
-  the auth-consolidation edits.
-- **Exact next action:** finish M1 by deploying the consent-gated web-vitals
-  capture and verifying production events, then run `bun run perf` again after
-  M2 verification to record the auth-consolidation delta.
+- **M2 result:** the ES256-backed `getClaims()` path reduced middleware auth
+  attribution from 25-30ms to 0-1ms and median page TTFB from 82-100ms to
+  32-59ms. Nine of 10 pages now pass both gates.
+- **Remaining gate:** `/recap` LCP is 552ms. Every other page is below both
+  thresholds; the right-sidebar median improved from 125ms to 102ms.
+- **In flight:** M3 page-query deduplication and M6 rendering/bundle work.
+  M1 code and query documentation are complete locally, but production
+  `$web_vitals` visibility still requires a deploy.
+- **Exact next action:** finish M3 and M6, rerun `bun run perf:check`, and work
+  `/recap` first if it remains above the LCP gate.
 
 ## Implementation notes
 

From 0be646fb590fe3bd0b586c111366b85de58e9ab9 Mon Sep 17 00:00:00 2001
From: Oscar Hong <oscar.hong2015@gmail.com>
Date: Sat, 18 Jul 2026 09:57:54 -0700
Subject: [PATCH 3/9] remove authenticated page query waterfalls

---
 apps/web/__tests__/api/messages.test.ts       | 20 +++--
 .../unit/message-attachments.test.ts          | 73 +++++++++++++++++
 .../web/__tests__/unit/profile-access.test.ts | 68 ++++++++++++++++
 apps/web/app/(app)/feed/page.tsx              | 26 +++---
 apps/web/app/(app)/layout.tsx                 | 28 +++----
 apps/web/app/(app)/leaderboard/page.tsx       | 29 ++++---
 apps/web/app/(app)/messages/page.tsx          | 66 ++++-----------
 apps/web/app/(app)/u/[username]/page.tsx      | 52 ++++++------
 apps/web/app/api/feed/route.ts                | 33 +++++---
 apps/web/app/api/messages/route.ts            | 74 ++++-------------
 apps/web/lib/message-attachments.ts           | 80 +++++++++++++++++++
 apps/web/lib/profile-access.ts                | 40 ++++++----
 12 files changed, 382 insertions(+), 207 deletions(-)
 create mode 100644 apps/web/__tests__/unit/message-attachments.test.ts
 create mode 100644 apps/web/__tests__/unit/profile-access.test.ts
 create mode 100644 apps/web/lib/message-attachments.ts

diff --git a/apps/web/__tests__/api/messages.test.ts b/apps/web/__tests__/api/messages.test.ts
index 4e1e170d..94dfb1c3 100644
--- a/apps/web/__tests__/api/messages.test.ts
+++ b/apps/web/__tests__/api/messages.test.ts
@@ -510,8 +510,12 @@ describe("message attachments", () => {
       }),
       storage: {
         from: vi.fn().mockReturnValue({
-          createSignedUrl: vi.fn().mockResolvedValue({
-            data: { signedUrl: "https://example.supabase.co/storage/v1/object/sign/dm-attachments/user-2/file.png?token=abc" },
+          createSignedUrls: vi.fn().mockResolvedValue({
+            data: [{
+              path: "user-2/file.png",
+              signedUrl: "https://example.supabase.co/storage/v1/object/sign/dm-attachments/user-2/file.png?token=abc",
+              error: null,
+            }],
             error: null,
           }),
         }),
@@ -539,8 +543,12 @@ describe("message attachments", () => {
         }),
       },
     };
-    const createSignedUrl = vi.fn().mockResolvedValue({
-      data: { signedUrl: "https://example.supabase.co/storage/v1/object/sign/dm-attachments/user-2/file.png?token=abc" },
+    const createSignedUrls = vi.fn().mockResolvedValue({
+      data: [{
+        path: "user-2/file.png",
+        signedUrl: "https://example.supabase.co/storage/v1/object/sign/dm-attachments/user-2/file.png?token=abc",
+        error: null,
+      }],
       error: null,
     });
     const serviceClient: Record<string, any> = {
@@ -619,7 +627,7 @@ describe("message attachments", () => {
       }),
       storage: {
         from: vi.fn().mockReturnValue({
-          createSignedUrl,
+          createSignedUrls,
         }),
       },
     };
@@ -634,7 +642,7 @@ describe("message attachments", () => {
 
     expect(response.status).toBe(200);
     expect(json.messages[0].attachments).toEqual([]);
-    expect(createSignedUrl).not.toHaveBeenCalled();
+    expect(createSignedUrls).not.toHaveBeenCalled();
   });
 });
 
diff --git a/apps/web/__tests__/unit/message-attachments.test.ts b/apps/web/__tests__/unit/message-attachments.test.ts
new file mode 100644
index 00000000..44e8afee
--- /dev/null
+++ b/apps/web/__tests__/unit/message-attachments.test.ts
@@ -0,0 +1,73 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  from: vi.fn(),
+  createSignedUrls: vi.fn(),
+}));
+
+vi.mock("@/lib/supabase/service", () => ({
+  getServiceClient: vi.fn(() => ({
+    storage: { from: mocks.from },
+  })),
+}));
+
+import {
+  buildSignedMessageAttachmentBatches,
+  buildSignedMessageAttachments,
+} from "@/lib/message-attachments";
+
+const attachment = (bucket: string, path: string) => ({
+  bucket,
+  path,
+  name: path.split("/").at(-1) ?? "file",
+  type: "image/png",
+  size: 123,
+});
+
+describe("message attachment URL signing", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.from.mockReturnValue({ createSignedUrls: mocks.createSignedUrls });
+    mocks.createSignedUrls.mockImplementation(async (paths: string[]) => ({
+      data: paths.map((path) => ({
+        path,
+        signedUrl: `https://storage.test/${path}`,
+        error: null,
+      })),
+      error: null,
+    }));
+  });
+
+  it("batches all paths in the same bucket into one signing request", async () => {
+    const signed = await buildSignedMessageAttachmentBatches([
+      { rawAttachments: [attachment("dm-attachments", "user-1/one.png")] },
+      { rawAttachments: [attachment("dm-attachments", "user-1/two.png")] },
+    ]);
+
+    expect(mocks.from).toHaveBeenCalledOnce();
+    expect(mocks.createSignedUrls).toHaveBeenCalledWith(
+      ["user-1/one.png", "user-1/two.png"],
+      3600,
+    );
+    expect(signed.map((group) => group[0]?.url)).toEqual([
+      "https://storage.test/user-1/one.png",
+      "https://storage.test/user-1/two.png",
+    ]);
+  });
+
+  it("filters paths outside the message sender's storage prefix before signing", async () => {
+    const signed = await buildSignedMessageAttachments(
+      [
+        attachment("dm-attachments", "user-1/mine.png"),
+        attachment("dm-attachments", "user-2/theirs.png"),
+      ],
+      "user-1",
+    );
+
+    expect(mocks.createSignedUrls).toHaveBeenCalledWith(
+      ["user-1/mine.png"],
+      3600,
+    );
+    expect(signed).toHaveLength(1);
+  });
+});
diff --git a/apps/web/__tests__/unit/profile-access.test.ts b/apps/web/__tests__/unit/profile-access.test.ts
new file mode 100644
index 00000000..ae1414c7
--- /dev/null
+++ b/apps/web/__tests__/unit/profile-access.test.ts
@@ -0,0 +1,68 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  getAuthIdentity: vi.fn(),
+  profileSingle: vi.fn(),
+  followMaybeSingle: vi.fn(),
+}));
+
+vi.mock("@/lib/supabase/auth", () => ({
+  getAuthIdentity: mocks.getAuthIdentity,
+}));
+
+vi.mock("@/lib/supabase/server", () => ({
+  createClient: vi.fn(async () => ({
+    from: vi.fn(() => ({
+      select: vi.fn(() => ({
+        eq: vi.fn(() => ({
+          eq: vi.fn(() => ({ maybeSingle: mocks.followMaybeSingle })),
+        })),
+      })),
+    })),
+  })),
+}));
+
+vi.mock("@/lib/supabase/service", () => ({
+  getServiceClient: vi.fn(() => ({
+    from: vi.fn(() => ({
+      select: vi.fn(() => ({
+        eq: vi.fn(() => ({ single: mocks.profileSingle })),
+      })),
+    })),
+  })),
+}));
+
+import { getProfileAccessContext } from "@/lib/profile-access";
+
+describe("profile access loading", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.getAuthIdentity.mockResolvedValue({ id: "viewer-1" });
+    mocks.followMaybeSingle.mockResolvedValue({ data: { id: "follow-1" } });
+  });
+
+  it("starts the username-scoped follow lookup without waiting for the profile", async () => {
+    let resolveProfile: ((value: unknown) => void) | undefined;
+    mocks.profileSingle.mockReturnValue(
+      new Promise((resolve) => {
+        resolveProfile = resolve;
+      }),
+    );
+
+    const accessPromise = getProfileAccessContext<{ id: string; is_public: boolean }>(
+      "alice",
+      "id, is_public",
+    );
+    await vi.waitFor(() => expect(mocks.followMaybeSingle).toHaveBeenCalledOnce());
+
+    resolveProfile?.({
+      data: { id: "profile-1", is_public: false },
+      error: null,
+    });
+
+    await expect(accessPromise).resolves.toMatchObject({
+      canView: true,
+      isFollowing: true,
+    });
+  });
+});
diff --git a/apps/web/app/(app)/feed/page.tsx b/apps/web/app/(app)/feed/page.tsx
index aa2c5e1e..f3826976 100644
--- a/apps/web/app/(app)/feed/page.tsx
+++ b/apps/web/app/(app)/feed/page.tsx
@@ -54,20 +54,24 @@ export default async function FeedPage({
       ? params.tab
       : "global";
 
-  // Feed + pending posts in parallel (independent queries)
-  const [{ data: feedData }, pendingPosts] = await Promise.all([
-    supabase.rpc("get_feed", {
-      p_type: feedType,
-      p_user_id: user?.id ?? null,
-      p_limit: 20,
+  const feedPromise = supabase.rpc("get_feed", {
+    p_type: feedType,
+    p_user_id: user?.id ?? null,
+    p_limit: 20,
+  });
+  // Start enrichment as soon as get_feed resolves instead of waiting for the
+  // independent pending-post query to finish.
+  const postsPromise = feedPromise.then(({ data: feedData }) =>
+    enrichFeedPosts({
+      posts: (feedData ?? []) as FeedPostRow[],
+      userId: user?.id ?? null,
+      userScopedClient: supabase,
     }),
+  );
+  const [posts, pendingPosts] = await Promise.all([
+    postsPromise,
     getPendingPosts(supabase, user?.id ?? null),
   ]);
-  const posts = await enrichFeedPosts({
-    posts: (feedData ?? []) as FeedPostRow[],
-    userId: user?.id ?? null,
-    userScopedClient: supabase,
-  });
   const nextCursor = getFeedCursor(posts, 20);
 
   const faqJsonLd = {
diff --git a/apps/web/app/(app)/layout.tsx b/apps/web/app/(app)/layout.tsx
index 8004f6ba..0b57043e 100644
--- a/apps/web/app/(app)/layout.tsx
+++ b/apps/web/app/(app)/layout.tsx
@@ -1,4 +1,4 @@
-import { Suspense } from "react";
+import { cache, Suspense } from "react";
 import Link from "next/link";
 import { createClient } from "@/lib/supabase/server";
 import {
@@ -26,8 +26,6 @@ type LatestPostRow = {
   daily_usage: Array<Pick<DailyUsage, "date">> | null;
 };
 
-type SupabaseServerClient = Awaited<ReturnType<typeof createClient>>;
-
 async function measure<T>(operation: () => Promise<T>): Promise<[T, number]> {
   const start = Date.now();
   const result = await operation();
@@ -48,7 +46,8 @@ function formatLatestPosts(rows: LatestPostRow[]) {
     .sort((a, b) => b.sortKey.localeCompare(a.sortKey));
 }
 
-async function loadLatestPosts(supabase: SupabaseServerClient, userId: string) {
+const loadLatestPosts = cache(async (userId: string) => {
+  const supabase = await createClient();
   // Order by daily_usage.date so backfills (which insert many posts in the same
   // second) still surface the most recent activity. !inner is required for
   // referencedTable ordering to apply to the parent rows.
@@ -61,7 +60,7 @@ async function loadLatestPosts(supabase: SupabaseServerClient, userId: string) {
     .limit(3);
 
   return formatLatestPosts((data ?? []) as LatestPostRow[]);
-}
+});
 
 function SidebarFallback({ profile }: { profile: ShellProfile | null }) {
   const username = profile?.username ?? null;
@@ -151,7 +150,7 @@ async function DeferredSidebar({
       .from("posts")
       .select("id", { count: "exact", head: true })
       .eq("user_id", userId),
-    loadLatestPosts(supabase, userId),
+    loadLatestPosts(userId),
     loadUsageTotals(supabase, userId),
     supabase.rpc("calculate_user_streak", {
       p_user_id: userId,
@@ -187,15 +186,16 @@ async function PhotoNudge({
 }) {
   if (onboardingIncomplete) return null;
 
-  const supabase = await createClient();
   const [latestPosts, photoAchievementRes] = await Promise.all([
-    loadLatestPosts(supabase, userId),
-    supabase
-      .from("user_achievements")
-      .select("id")
-      .eq("user_id", userId)
-      .eq("achievement_slug", "first-photo")
-      .maybeSingle(),
+    loadLatestPosts(userId),
+    createClient().then((supabase) =>
+      supabase
+        .from("user_achievements")
+        .select("id")
+        .eq("user_id", userId)
+        .eq("achievement_slug", "first-photo")
+        .maybeSingle(),
+    ),
   ]);
 
   if (latestPosts.length === 0 || photoAchievementRes.data) return null;
diff --git a/apps/web/app/(app)/leaderboard/page.tsx b/apps/web/app/(app)/leaderboard/page.tsx
index 19685811..d060ced6 100644
--- a/apps/web/app/(app)/leaderboard/page.tsx
+++ b/apps/web/app/(app)/leaderboard/page.tsx
@@ -2,6 +2,7 @@ import Link from "next/link";
 import { createClient } from "@/lib/supabase/server";
 import { getAuthIdentity } from "@/lib/supabase/auth";
 import { getServiceClient } from "@/lib/supabase/service";
+import { firstRelation } from "@/lib/utils/first-relation";
 import { LeaderboardTable } from "@/components/app/leaderboard/LeaderboardTable";
 import type { LeaderboardEntry } from "@/types";
 import type { Metadata } from "next";
@@ -48,9 +49,11 @@ export default async function LeaderboardPage({
 }: {
   searchParams: Promise<{ period?: string; region?: string }>;
 }) {
-  const { period = "week", region } = await searchParams;
-  const user = await getAuthIdentity();
-  const supabase = await createClient();
+  const [{ period = "week", region }, user, supabase] = await Promise.all([
+    searchParams,
+    getAuthIdentity(),
+    createClient(),
+  ]);
   const db = getServiceClient();
 
   // We'll use the materialized view directly for SSR
@@ -72,13 +75,15 @@ export default async function LeaderboardPage({
   // The leaderboard materialized views don't carry team_url/team_favicon_url, so
   // we side-fetch them (mirrors the level/streak pattern below).
   const userIds = entries.map((entry) => entry.user_id);
-  const [{ data: streakRows }, { data: levelRows }, { data: teamRows }] = userIds.length > 0
+  const [{ data: streakRows }, { data: userRows }] = userIds.length > 0
     ? await Promise.all([
         supabase.rpc("calculate_streaks_batch", { p_user_ids: userIds }),
-        db.from("user_levels").select("user_id, level").in("user_id", userIds),
-        db.from("users").select("id, team_url, team_favicon_url").in("id", userIds),
+        db
+          .from("users")
+          .select("id, team_url, team_favicon_url, user_levels(level)")
+          .in("id", userIds),
       ])
-    : [{ data: [] }, { data: [] }, { data: [] }];
+    : [{ data: [] }, { data: [] }];
 
   const streakMap = new Map<string, number>();
   for (const row of streakRows ?? []) {
@@ -86,12 +91,12 @@ export default async function LeaderboardPage({
   }
 
   const levelMap = new Map<string, number>();
-  for (const row of levelRows ?? []) {
-    levelMap.set(row.user_id, Number(row.level));
-  }
-
   const teamMap = new Map<string, { team_url: string | null; team_favicon_url: string | null }>();
-  for (const row of teamRows ?? []) {
+  for (const row of userRows ?? []) {
+    const level = firstRelation(row.user_levels)?.level;
+    if (level !== undefined && level !== null) {
+      levelMap.set(row.id, Number(level));
+    }
     teamMap.set(row.id, {
       team_url: row.team_url ?? null,
       team_favicon_url: row.team_favicon_url ?? null,
diff --git a/apps/web/app/(app)/messages/page.tsx b/apps/web/app/(app)/messages/page.tsx
index 0cdbf498..8f6c832a 100644
--- a/apps/web/app/(app)/messages/page.tsx
+++ b/apps/web/app/(app)/messages/page.tsx
@@ -3,13 +3,9 @@ import type { Metadata } from "next";
 import { createClient } from "@/lib/supabase/server";
 import { getAuthContext } from "@/lib/supabase/auth";
 import { getServiceClient } from "@/lib/supabase/service";
-import { normalizeMessageAttachmentInput } from "@/lib/storage";
+import { buildSignedMessageAttachmentBatches } from "@/lib/message-attachments";
 import { MessagesInbox } from "@/components/app/messages/MessagesInbox";
-import type {
-  DirectMessageThread,
-  MessageAttachment,
-  MessageAttachmentInput,
-} from "@/types";
+import type { DirectMessageThread } from "@/types";
 
 export const metadata: Metadata = { title: "Messages" };
 
@@ -27,37 +23,6 @@ function buildPairFilter(a: string, b: string) {
   return `and(sender_id.eq.${a},recipient_id.eq.${b}),and(sender_id.eq.${b},recipient_id.eq.${a})`;
 }
 
-async function buildSignedAttachments(
-  rawAttachments: unknown,
-): Promise<MessageAttachment[]> {
-  const db = getServiceClient();
-  const attachments = Array.isArray(rawAttachments)
-    ? rawAttachments
-        .map(normalizeMessageAttachmentInput)
-        .filter((attachment): attachment is MessageAttachmentInput => attachment !== null)
-    : [];
-
-  if (attachments.length === 0) return [];
-
-  const signedAttachments = await Promise.all(
-    attachments.map(async (attachment): Promise<MessageAttachment | null> => {
-      const { data, error } = await db.storage
-        .from(attachment.bucket)
-        .createSignedUrl(attachment.path, 60 * 60);
-
-      if (error || !data?.signedUrl) return null;
-      return {
-        ...attachment,
-        url: data.signedUrl,
-      };
-    }),
-  );
-
-  return signedAttachments.filter(
-    (attachment): attachment is MessageAttachment => attachment !== null,
-  );
-}
-
 async function preloadConversation(viewerId: string, username: string) {
   if (!USERNAME_RE.test(username)) return null;
 
@@ -100,14 +65,19 @@ async function preloadConversation(viewerId: string, username: string) {
   if (selfRes.error || messagesRes.error) return null;
 
   const selfProfile = selfRes.data as ConversationUser;
-  const messages = await Promise.all(
-    [...(messagesRes.data ?? [])].slice(0, 50).reverse().map(async (message) => ({
-      ...message,
-      attachments: await buildSignedAttachments(message.attachments),
-      sender: message.sender_id === viewerId ? selfProfile : counterpart,
-      recipient: message.sender_id === viewerId ? counterpart : selfProfile,
+  const rawMessages = [...(messagesRes.data ?? [])].slice(0, 50).reverse();
+  const signedAttachmentGroups = await buildSignedMessageAttachmentBatches(
+    rawMessages.map((message) => ({
+      rawAttachments: message.attachments,
+      expectedOwnerId: message.sender_id,
     })),
   );
+  const messages = rawMessages.map((message, index) => ({
+    ...message,
+    attachments: signedAttachmentGroups[index] ?? [],
+    sender: message.sender_id === viewerId ? selfProfile : counterpart,
+    recipient: message.sender_id === viewerId ? counterpart : selfProfile,
+  }));
 
   return {
     counterpart: counterpart as ConversationUser,
@@ -156,19 +126,11 @@ export default async function MessagesPage({
     unread_count: unreadRes.count ?? 0,
   };
 
-  const preloadUsername =
-    explicitUsername ?? initialThreads.threads[0]?.counterpart_username ?? null;
-  const initialConversation = explicitUsername
-    ? explicitConversation
-    : preloadUsername
-      ? await preloadConversation(identity.id, preloadUsername)
-      : null;
-
   return (
     <MessagesInbox
       initialUsername={explicitUsername}
       initialThreads={threadsRes.error || unreadRes.error ? undefined : initialThreads}
-      initialConversation={initialConversation}
+      initialConversation={explicitConversation}
     />
   );
 }
diff --git a/apps/web/app/(app)/u/[username]/page.tsx b/apps/web/app/(app)/u/[username]/page.tsx
index f8339b4a..b5e0351c 100644
--- a/apps/web/app/(app)/u/[username]/page.tsx
+++ b/apps/web/app/(app)/u/[username]/page.tsx
@@ -21,7 +21,7 @@ import { GuestSignupCta } from "@/components/app/activation/GuestSignupCta";
 import { formatCurrency, formatTokens } from "@/lib/utils/format";
 import { enrichFeedPosts, getFeedCursor } from "@/lib/feed-enrichment";
 import { firstRelation } from "@/lib/utils/first-relation";
-import type { FeedPostRow, Post } from "@/types";
+import type { FeedPostRow } from "@/types";
 import type { Metadata } from "next";
 
 type PostDateRow = {
@@ -112,6 +112,29 @@ export default async function ProfilePage({
   const currentYear = new Date().getFullYear();
   const yearStart = `${currentYear}-01-01`;
   const yearEnd = `${currentYear}-12-31`;
+  const feedPromise = supabase.rpc("get_feed", {
+    p_type: "user",
+    p_user_id: profile.id,
+    p_limit: 20,
+  });
+  const enrichedPostsPromise = feedPromise.then(({ data: posts }) => {
+    if (!posts || posts.length === 0) return [];
+
+    const feedPosts = (posts as Record<string, unknown>[]).map((row) => ({
+      ...row,
+      user: Array.isArray(row.user) ? row.user[0] : row.user,
+      daily_usage: Array.isArray(row.daily_usage) ? row.daily_usage[0] : row.daily_usage,
+      kudos_count: (row.kudos_count as number) ?? 0,
+      comment_count: (row.comment_count as number) ?? 0,
+    })) as FeedPostRow[];
+
+    return enrichFeedPosts({
+      posts: feedPosts,
+      userId: authUserId,
+      userScopedClient: supabase,
+      publicReadClient: db,
+    });
+  });
 
   const [
     { count: followersCount },
@@ -126,7 +149,7 @@ export default async function ProfilePage({
     { data: contributions },
     { data: postDates },
     radarResponse,
-    postsResponse,
+    normalizedPosts,
   ] = await Promise.all([
     db
       .from("follows")
@@ -178,11 +201,7 @@ export default async function ProfilePage({
       .select("daily_usage:daily_usage!posts_daily_usage_id_fkey(date)")
       .eq("user_id", profile.id),
     computeRadarScores(profile.id).catch(() => null),
-    supabase.rpc("get_feed", {
-      p_type: "user",
-      p_user_id: profile.id,
-      p_limit: 20,
-    }),
+    enrichedPostsPromise,
   ]);
 
   const totalSpend = totalSpendRows?.reduce((s, r) => s + Number(r.cost_usd), 0) ?? 0;
@@ -201,25 +220,6 @@ export default async function ProfilePage({
     has_post: postDateSet.has(c.date),
   }));
 
-  let normalizedPosts: Post[] = [];
-  const posts = postsResponse.data;
-  if (posts && posts.length > 0) {
-    // get_feed returns user/daily_usage as jsonb objects; direct query returns
-    // them as single-element arrays. Flatten to a consistent FeedPostRow shape.
-    const feedPosts = (posts as Record<string, unknown>[]).map((row) => ({
-      ...row,
-      user: Array.isArray(row.user) ? row.user[0] : row.user,
-      daily_usage: Array.isArray(row.daily_usage) ? row.daily_usage[0] : row.daily_usage,
-      kudos_count: (row.kudos_count as number) ?? 0,
-      comment_count: (row.comment_count as number) ?? 0,
-    })) as FeedPostRow[];
-    normalizedPosts = await enrichFeedPosts({
-      posts: feedPosts,
-      userId: authUserId,
-      userScopedClient: supabase,
-      publicReadClient: db,
-    });
-  }
   const nextCursor = getFeedCursor(normalizedPosts, 20);
 
   return (
diff --git a/apps/web/app/api/feed/route.ts b/apps/web/app/api/feed/route.ts
index 7428971f..bd5fc02c 100644
--- a/apps/web/app/api/feed/route.ts
+++ b/apps/web/app/api/feed/route.ts
@@ -97,7 +97,7 @@ export async function GET(request: NextRequest) {
     }
   }
 
-  const { data: rpcPosts, error } = await supabase.rpc("get_feed", {
+  const feedPromise = supabase.rpc("get_feed", {
     p_type: type,
     p_user_id: effectiveUserId,
     p_limit: limit,
@@ -105,20 +105,27 @@ export async function GET(request: NextRequest) {
     p_cursor_created_at: cursorCreatedAt,
   });
 
-  if (error) {
-    return NextResponse.json({ error: error.message }, { status: 500 });
-  }
-
-  const enriched = await enrichFeedPosts({
-    posts: (rpcPosts ?? []) as FeedPostRow[],
-    userId: user?.id ?? null,
-    userScopedClient: supabase,
+  const enrichedPromise = feedPromise.then(({ data: rpcPosts, error }) => {
+    if (error) throw new Error(error.message);
+    return enrichFeedPosts({
+      posts: (rpcPosts ?? []) as FeedPostRow[],
+      userId: user?.id ?? null,
+      userScopedClient: supabase,
+    });
   });
+  const pendingPromise = user && !cursor
+    ? getPendingPosts(supabase, user.id)
+    : Promise.resolve([]);
+
+  let enriched: Awaited<typeof enrichedPromise>;
+  let pending_posts: Awaited<typeof pendingPromise>;
+  try {
+    [enriched, pending_posts] = await Promise.all([enrichedPromise, pendingPromise]);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Unable to load feed";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
   const next_cursor = getFeedCursor(enriched, limit);
 
-  const pending_posts = user && !cursor
-    ? await getPendingPosts(supabase, user.id)
-    : [];
-
   return NextResponse.json({ posts: enriched, next_cursor, pending_posts });
 }
diff --git a/apps/web/app/api/messages/route.ts b/apps/web/app/api/messages/route.ts
index bcd0e7f8..0f4d65ea 100644
--- a/apps/web/app/api/messages/route.ts
+++ b/apps/web/app/api/messages/route.ts
@@ -2,13 +2,17 @@ import { NextResponse, type NextRequest } from "next/server";
 import { after } from "@/lib/utils/after";
 import { createClient } from "@/lib/supabase/server";
 import { getServiceClient } from "@/lib/supabase/service";
+import {
+  buildSignedMessageAttachmentBatches,
+  buildSignedMessageAttachments,
+} from "@/lib/message-attachments";
 import {
   isStoragePathOwnedByUser,
   normalizeMessageAttachmentInput,
 } from "@/lib/storage";
 import { sendDirectMessageEmail } from "@/lib/email/send-direct-message-email";
 import { rateLimit } from "@/lib/rate-limit";
-import type { MessageAttachment, MessageAttachmentInput } from "@/types";
+import type { MessageAttachmentInput } from "@/types";
 
 const USERNAME_RE = /^[a-zA-Z0-9_]{3,20}$/;
 const MAX_MESSAGE_LENGTH = 1000;
@@ -105,52 +109,6 @@ async function fireDirectMessageNotificationEmail(opts: {
   }
 }
 
-async function buildSignedAttachments(
-  rawAttachments: unknown,
-  expectedOwnerId?: string,
-): Promise<MessageAttachment[]> {
-  const db = getServiceClient();
-  const attachments = Array.isArray(rawAttachments)
-    ? rawAttachments
-        .map(normalizeMessageAttachmentInput)
-        .filter((attachment): attachment is MessageAttachmentInput => {
-          if (attachment === null) return false;
-          return expectedOwnerId
-            ? isStoragePathOwnedByUser(attachment.path, expectedOwnerId)
-            : true;
-        })
-    : [];
-
-  if (attachments.length === 0) {
-    return [];
-  }
-
-  const signedAttachments: Array<MessageAttachment | null> = await Promise.all(
-    attachments.map(async (attachment): Promise<MessageAttachment | null> => {
-      const { data, error } = await db.storage
-        .from(attachment.bucket)
-        .createSignedUrl(attachment.path, 60 * 60);
-
-      if (error || !data?.signedUrl) {
-        console.error(
-          "[messages] failed to sign DM attachment:",
-          error?.message ?? "missing signed URL",
-        );
-        return null;
-      }
-
-      return {
-        ...attachment,
-        url: data.signedUrl,
-      };
-    }),
-  );
-
-  return signedAttachments.filter(
-    (attachment): attachment is MessageAttachment => attachment !== null,
-  );
-}
-
 export async function GET(request: NextRequest) {
   const supabase = await createClient();
   const {
@@ -205,17 +163,19 @@ export async function GET(request: NextRequest) {
   }
 
   const selfProfile = selfRes.data as ConversationUser;
-  const messages = await Promise.all(
-    [...(messagesRes.data ?? [])].slice(0, limit).reverse().map(async (message) => ({
-      ...message,
-      attachments: await buildSignedAttachments(
-        message.attachments,
-        message.sender_id,
-      ),
-      sender: message.sender_id === user.id ? selfProfile : counterpart,
-      recipient: message.sender_id === user.id ? counterpart : selfProfile,
+  const rawMessages = [...(messagesRes.data ?? [])].slice(0, limit).reverse();
+  const signedAttachmentGroups = await buildSignedMessageAttachmentBatches(
+    rawMessages.map((message) => ({
+      rawAttachments: message.attachments,
+      expectedOwnerId: message.sender_id,
     })),
   );
+  const messages = rawMessages.map((message, index) => ({
+    ...message,
+    attachments: signedAttachmentGroups[index] ?? [],
+    sender: message.sender_id === user.id ? selfProfile : counterpart,
+    recipient: message.sender_id === user.id ? counterpart : selfProfile,
+  }));
 
   const hasMore = (messagesRes.data?.length ?? 0) > limit;
 
@@ -325,7 +285,7 @@ export async function POST(request: NextRequest) {
   }
 
   const sender = senderRes.data as ConversationUser;
-  const signedAttachments = await buildSignedAttachments(
+  const signedAttachments = await buildSignedMessageAttachments(
     messageRes.data.attachments,
     user.id,
   );
diff --git a/apps/web/lib/message-attachments.ts b/apps/web/lib/message-attachments.ts
new file mode 100644
index 00000000..b7bfe57e
--- /dev/null
+++ b/apps/web/lib/message-attachments.ts
@@ -0,0 +1,80 @@
+import { getServiceClient } from "@/lib/supabase/service";
+import {
+  isStoragePathOwnedByUser,
+  normalizeMessageAttachmentInput,
+} from "@/lib/storage";
+import type { MessageAttachment, MessageAttachmentInput } from "@/types";
+
+const SIGNED_URL_TTL_SECONDS = 60 * 60;
+
+export async function buildSignedMessageAttachments(
+  rawAttachments: unknown,
+  expectedOwnerId?: string,
+): Promise<MessageAttachment[]> {
+  const [signed] = await buildSignedMessageAttachmentBatches([
+    { rawAttachments, expectedOwnerId },
+  ]);
+  return signed ?? [];
+}
+
+export async function buildSignedMessageAttachmentBatches(
+  groups: Array<{ rawAttachments: unknown; expectedOwnerId?: string }>,
+): Promise<MessageAttachment[][]> {
+  const normalizedGroups = groups.map(({ rawAttachments, expectedOwnerId }) =>
+    Array.isArray(rawAttachments)
+      ? rawAttachments
+          .map(normalizeMessageAttachmentInput)
+          .filter((attachment): attachment is MessageAttachmentInput => {
+            if (attachment === null) return false;
+            return expectedOwnerId
+              ? isStoragePathOwnedByUser(attachment.path, expectedOwnerId)
+              : true;
+          })
+      : [],
+  );
+  const attachments = normalizedGroups.flat();
+
+  if (attachments.length === 0) return groups.map(() => []);
+
+  const db = getServiceClient();
+  const byBucket = new Map<string, MessageAttachmentInput[]>();
+  for (const attachment of attachments) {
+    const bucketAttachments = byBucket.get(attachment.bucket) ?? [];
+    bucketAttachments.push(attachment);
+    byBucket.set(attachment.bucket, bucketAttachments);
+  }
+
+  const signedByBucketAndPath = new Map<string, string>();
+  await Promise.all(
+    [...byBucket].map(async ([bucket, bucketAttachments]) => {
+      const { data, error } = await db.storage
+        .from(bucket)
+        .createSignedUrls(
+          bucketAttachments.map((attachment) => attachment.path),
+          SIGNED_URL_TTL_SECONDS,
+        );
+
+      if (error) {
+        console.error("[messages] failed to sign DM attachments:", error.message);
+        return;
+      }
+
+      for (const signed of data) {
+        if (signed.path && signed.signedUrl && !signed.error) {
+          signedByBucketAndPath.set(`${bucket}\0${signed.path}`, signed.signedUrl);
+        } else if (signed.error) {
+          console.error("[messages] failed to sign DM attachment:", signed.error);
+        }
+      }
+    }),
+  );
+
+  return normalizedGroups.map((group) =>
+    group.flatMap((attachment) => {
+      const url = signedByBucketAndPath.get(
+        `${attachment.bucket}\0${attachment.path}`,
+      );
+      return url ? [{ ...attachment, url }] : [];
+    }),
+  );
+}
diff --git a/apps/web/lib/profile-access.ts b/apps/web/lib/profile-access.ts
index eed8e30b..b8d33bde 100644
--- a/apps/web/lib/profile-access.ts
+++ b/apps/web/lib/profile-access.ts
@@ -20,16 +20,36 @@ export async function getProfileAccessContext<TProfile extends ProfileShape>(
   selectFields: string,
 ): Promise<ProfileAccessContext<TProfile> | null> {
   const db = getServiceClient();
+  const authPromise = getAuthIdentity();
+  const userClientPromise = createClient();
 
-  // Use cached auth (shared with middleware/layout) + profile fetch in parallel
-  const [authUser, { data: rawProfile, error: profileError }] =
+  // The follow lookup can filter through the target username, so it does not
+  // need to wait for the profile query to return its id.
+  const followPromise = Promise.all([authPromise, userClientPromise]).then(
+    async ([authUser, supabase]) => {
+      if (!authUser) return null;
+
+      const { data } = await supabase
+        .from("follows")
+        .select("id, following:users!follows_following_id_fkey!inner(username)")
+        .eq("follower_id", authUser.id)
+        .eq("following.username", username)
+        .maybeSingle();
+
+      return data;
+    },
+  );
+
+  // Auth, target profile, and follow status are one parallel request wave.
+  const [authUser, { data: rawProfile, error: profileError }, follow] =
     await Promise.all([
-      getAuthIdentity(),
+      authPromise,
       db
         .from("users")
         .select(selectFields)
         .eq("username", username)
         .single(),
+      followPromise,
     ]);
 
   if (profileError || !rawProfile) {
@@ -48,19 +68,7 @@ export async function getProfileAccessContext<TProfile extends ProfileShape>(
 
   const authUserId = authUser?.id ?? null;
   const isOwn = authUserId === profile.id;
-  let isFollowing = false;
-
-  if (authUserId && !isOwn) {
-    const supabase = await createClient();
-    const { data: follow } = await supabase
-      .from("follows")
-      .select("id")
-      .eq("follower_id", authUserId)
-      .eq("following_id", profile.id)
-      .maybeSingle();
-
-    isFollowing = !!follow;
-  }
+  const isFollowing = !isOwn && Boolean(follow);
 
   return {
     authUserId,

From d7502b6df7b3cb5f33b5f1d6cca71b330cfbb12a Mon Sep 17 00:00:00 2001
From: Oscar Hong <oscar.hong2015@gmail.com>
Date: Sat, 18 Jul 2026 10:09:48 -0700
Subject: [PATCH 4/9] stream authenticated pages and trim bundles

---
 apps/web/__tests__/api/usage-submit.test.ts   |   3 +-
 .../performance/m6-rendering.test.tsx         |  72 ++
 .../__tests__/unit/settings-payload.test.ts   |   2 +-
 apps/web/app/(app)/card/page.tsx              | 204 +----
 apps/web/app/(app)/messages/loading.tsx       |   5 +
 apps/web/app/(app)/notifications/loading.tsx  |   5 +
 apps/web/app/(app)/prompts/loading.tsx        |   5 +
 apps/web/app/(app)/recap/loading.tsx          |   5 +
 apps/web/app/(app)/recap/page.tsx             |  24 +-
 apps/web/app/(app)/search/loading.tsx         |   5 +
 apps/web/app/(app)/search/page.tsx            | 156 +---
 apps/web/app/(app)/settings/loading.tsx       |   5 +
 apps/web/app/(app)/settings/page.tsx          | 795 +-----------------
 apps/web/app/api/usage/submit/route.ts        |  73 +-
 apps/web/app/layout.tsx                       |   4 +-
 apps/web/components/app/card/CardClient.tsx   | 169 ++++
 apps/web/components/app/recap/RecapPage.tsx   |  22 +-
 .../components/app/search/SearchClient.tsx    | 130 +++
 .../app/settings/SettingsClient.tsx           | 732 ++++++++++++++++
 .../components/app/shared/RouteLoading.tsx    |  35 +
 apps/web/components/dev/DevAgentation.tsx     |  13 +
 apps/web/lib/usage/aggregate-device-rows.ts   |  61 ++
 apps/web/next.config.ts                       |   9 +-
 apps/web/package.json                         |   2 +
 bun.lock                                      |  39 +-
 docs/perf/bundles.md                          |  61 ++
 26 files changed, 1484 insertions(+), 1152 deletions(-)
 create mode 100644 apps/web/__tests__/performance/m6-rendering.test.tsx
 create mode 100644 apps/web/app/(app)/messages/loading.tsx
 create mode 100644 apps/web/app/(app)/notifications/loading.tsx
 create mode 100644 apps/web/app/(app)/prompts/loading.tsx
 create mode 100644 apps/web/app/(app)/recap/loading.tsx
 create mode 100644 apps/web/app/(app)/search/loading.tsx
 create mode 100644 apps/web/app/(app)/settings/loading.tsx
 create mode 100644 apps/web/components/app/card/CardClient.tsx
 create mode 100644 apps/web/components/app/search/SearchClient.tsx
 create mode 100644 apps/web/components/app/settings/SettingsClient.tsx
 create mode 100644 apps/web/components/app/shared/RouteLoading.tsx
 create mode 100644 apps/web/components/dev/DevAgentation.tsx
 create mode 100644 apps/web/lib/usage/aggregate-device-rows.ts
 create mode 100644 docs/perf/bundles.md

diff --git a/apps/web/__tests__/api/usage-submit.test.ts b/apps/web/__tests__/api/usage-submit.test.ts
index 43144432..8d5e85d3 100644
--- a/apps/web/__tests__/api/usage-submit.test.ts
+++ b/apps/web/__tests__/api/usage-submit.test.ts
@@ -21,7 +21,8 @@ vi.mock("@supabase/supabase-js", () => ({
   createClient: vi.fn(),
 }));
 
-import { POST, aggregateDeviceRows } from "@/app/api/usage/submit/route";
+import { POST } from "@/app/api/usage/submit/route";
+import { aggregateDeviceRows } from "@/lib/usage/aggregate-device-rows";
 import { captureServerActivationEvent } from "@/lib/analytics/server";
 import { createClient } from "@/lib/supabase/server";
 import { verifyCliToken, verifyCliTokenWithRefresh } from "@/lib/api/cli-auth";
diff --git a/apps/web/__tests__/performance/m6-rendering.test.tsx b/apps/web/__tests__/performance/m6-rendering.test.tsx
new file mode 100644
index 00000000..f0e75a78
--- /dev/null
+++ b/apps/web/__tests__/performance/m6-rendering.test.tsx
@@ -0,0 +1,72 @@
+import { act, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { RecapPage } from "@/components/app/recap/RecapPage";
+import { RouteLoading } from "@/components/app/shared/RouteLoading";
+import SearchClient from "@/components/app/search/SearchClient";
+import type { RecapData } from "@/lib/utils/recap";
+
+const recap: RecapData = {
+  total_cost: 42,
+  output_tokens: 12_000,
+  active_days: 3,
+  total_days: 7,
+  session_count: 8,
+  streak: 4,
+  primary_model: "Claude Sonnet",
+  contribution_data: [],
+  period_label: "My Week in Claude Code",
+  period: "week",
+  username: "alice",
+  is_public: true,
+};
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("M6 server-provided route data", () => {
+  it("renders recap data immediately without a client fetch on mount", async () => {
+    const fetchMock = vi.spyOn(global, "fetch");
+
+    render(<RecapPage initialData={recap} />);
+    await act(async () => {});
+
+    expect(screen.getByText("$42.00")).toBeInTheDocument();
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  it("renders initial search results without a client fetch on mount", async () => {
+    const fetchMock = vi.spyOn(global, "fetch");
+
+    render(
+      <SearchClient
+        initialQuery="ali"
+        initialResults={[
+          {
+            id: "user-1",
+            username: "alice",
+            display_name: "Alice",
+            bio: "Builder",
+            avatar_url: null,
+            is_public: true,
+          },
+        ]}
+      />,
+    );
+    await act(async () => {});
+
+    expect(screen.getByRole("link", { name: /alice/i })).toHaveAttribute(
+      "href",
+      "/u/alice",
+    );
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  it("announces route-level loading state without exposing skeletons", () => {
+    render(<RouteLoading label="settings" />);
+
+    const status = screen.getByRole("status");
+    expect(status).toHaveAttribute("aria-busy", "true");
+    expect(status).toHaveTextContent("Loading settings");
+  });
+});
diff --git a/apps/web/__tests__/unit/settings-payload.test.ts b/apps/web/__tests__/unit/settings-payload.test.ts
index b03e6eef..c2bf5b04 100644
--- a/apps/web/__tests__/unit/settings-payload.test.ts
+++ b/apps/web/__tests__/unit/settings-payload.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { buildProfileUpdatePayload } from "@/app/(app)/settings/page";
+import { buildProfileUpdatePayload } from "@/components/app/settings/SettingsClient";
 
 const baseInput = {
   username: "alice",
diff --git a/apps/web/app/(app)/card/page.tsx b/apps/web/app/(app)/card/page.tsx
index 9e6eca6e..ef116e79 100644
--- a/apps/web/app/(app)/card/page.tsx
+++ b/apps/web/app/(app)/card/page.tsx
@@ -1,193 +1,23 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { Button } from "@/components/ui/Button";
-import { Copy, Check, ExternalLink } from "lucide-react";
-import Link from "next/link";
-
-type ThemeId = "light" | "dark";
-
-const THEMES: { id: ThemeId; label: string }[] = [
-  { id: "light", label: "Light" },
-  { id: "dark", label: "Dark" },
-];
-
-function CopyBlock({ label, code }: { label: string; code: string }) {
-  const [copied, setCopied] = useState(false);
-
-  function handleCopy() {
-    navigator.clipboard.writeText(code);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  }
-
-  return (
-    <div className="flex flex-col gap-2">
-      <div className="text-xs font-semibold text-muted uppercase tracking-wider">
-        {label}
-      </div>
-      <div className="relative">
-        <pre className="overflow-x-auto rounded-[4px] border border-border bg-subtle px-3 py-2.5 text-xs text-foreground leading-relaxed">
-          {code}
-        </pre>
-        <button
-          onClick={handleCopy}
-          className="absolute top-2 right-2 p-1.5 rounded-[4px] border border-border bg-background hover:bg-subtle transition-colors"
-          aria-label={copied ? "Copied" : "Copy to clipboard"}
-        >
-          {copied ? (
-            <Check className="w-3.5 h-3.5 text-green-500" />
-          ) : (
-            <Copy className="w-3.5 h-3.5 text-muted" />
-          )}
-        </button>
-      </div>
-    </div>
-  );
-}
-
-export default function CardPage() {
-  const [username, setUsername] = useState<string | null>(null);
-  const [isPublic, setIsPublic] = useState(true);
-  const [theme, setTheme] = useState<ThemeId>("light");
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    async function load() {
-      const res = await fetch("/api/users/me");
-      if (!res.ok) {
-        setLoading(false);
-        return;
-      }
-
-      const profile = await res.json();
-
-      if (profile?.username) {
-        setUsername(profile.username);
-        setIsPublic(profile.is_public);
-      }
-      setLoading(false);
-    }
-    load();
-  }, []);
-
-  if (loading) {
-    return (
-      <div className="flex-1 flex items-center justify-center py-20">
-        <div className="text-sm text-muted">Loading...</div>
-      </div>
-    );
-  }
-
-  if (!username) {
-    return (
-      <div className="flex-1 flex flex-col items-center justify-center gap-3 py-20">
-        <div className="text-sm text-muted">
-          Set a username in settings to get your card.
-        </div>
-        <Link href="/settings">
-          <Button variant="secondary" size="sm">
-            Go to Settings
-          </Button>
-        </Link>
-      </div>
-    );
+import CardClient from "@/components/app/card/CardClient";
+import { getAuthIdentity } from "@/lib/supabase/auth";
+import { getServiceClient } from "@/lib/supabase/service";
+
+export default async function CardPage() {
+  const identity = await getAuthIdentity();
+  if (!identity) {
+    return <CardClient username={null} isPublic />;
   }
 
-  const baseUrl = "https://straude.com";
-  const cardUrl = `${baseUrl}/api/card/${username}`;
-  const profileUrl = `${baseUrl}/u/${username}`;
-
-  const markdownLight = `[![Straude Stats](${cardUrl})](${profileUrl})`;
-  const markdownDark = `[![Straude Stats](${cardUrl}?theme=dark)](${profileUrl})`;
-  const markdownAuto = `<a href="${profileUrl}">
-  <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="${cardUrl}?theme=dark" />
-    <source media="(prefers-color-scheme: light)" srcset="${cardUrl}?theme=light" />
-    <img alt="Straude Stats" src="${cardUrl}" />
-  </picture>
-</a>`;
+  const { data: profile } = await getServiceClient()
+    .from("users")
+    .select("username, is_public")
+    .eq("id", identity.id)
+    .single();
 
   return (
-    <div className="flex-1 flex flex-col max-w-2xl mx-auto w-full px-4 py-8 gap-8">
-      <div>
-        <h1 className="text-lg font-bold text-foreground">Stats Card</h1>
-        <p className="mt-1 text-sm text-muted">
-          Embed your Straude stats on your GitHub profile README.
-        </p>
-      </div>
-
-      {!isPublic && (
-        <div className="rounded-[4px] border border-border bg-subtle px-4 py-3 text-sm text-muted">
-          Your profile is private. The card will show a &quot;private
-          profile&quot; placeholder until you{" "}
-          <Link href="/settings" className="text-accent hover:underline">
-            make it public
-          </Link>
-          .
-        </div>
-      )}
-
-      {/* Theme toggle */}
-      <div className="flex flex-col gap-3">
-        <div className="text-xs font-semibold text-muted uppercase tracking-wider">
-          Theme
-        </div>
-        <div className="flex gap-2">
-          {THEMES.map((t) => (
-            <button
-              key={t.id}
-              onClick={() => setTheme(t.id)}
-              className={`px-3 py-1.5 text-xs font-semibold rounded-[4px] border transition-colors ${
-                theme === t.id
-                  ? "border-accent text-accent bg-accent/10"
-                  : "border-border text-muted hover:text-foreground"
-              }`}
-            >
-              {t.label}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Preview */}
-      <div className="flex flex-col gap-3">
-        <div className="text-xs font-semibold text-muted uppercase tracking-wider">
-          Preview
-        </div>
-        <div className="rounded-[4px] border border-border bg-subtle p-4 flex items-center justify-center">
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img
-            src={`/api/card/${username}?theme=${theme}`}
-            alt="Straude Stats Card"
-            width={495}
-            height={270}
-            className="rounded-[4px]"
-          />
-        </div>
-        <div className="flex gap-2">
-          <a
-            href={`/api/card/${username}?theme=${theme}`}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Button variant="ghost" size="sm">
-              <ExternalLink className="w-3.5 h-3.5 mr-1.5" />
-              Open image
-            </Button>
-          </a>
-        </div>
-      </div>
-
-      {/* Embed snippets */}
-      <div className="flex flex-col gap-5">
-        <div className="text-xs font-semibold text-muted uppercase tracking-wider">
-          Embed in your README
-        </div>
-        <CopyBlock label="Light theme" code={markdownLight} />
-        <CopyBlock label="Dark theme" code={markdownDark} />
-        <CopyBlock label="Auto-match GitHub theme (recommended)" code={markdownAuto} />
-      </div>
-    </div>
+    <CardClient
+      username={profile?.username ?? null}
+      isPublic={profile?.is_public ?? true}
+    />
   );
 }
diff --git a/apps/web/app/(app)/messages/loading.tsx b/apps/web/app/(app)/messages/loading.tsx
new file mode 100644
index 00000000..463cb987
--- /dev/null
+++ b/apps/web/app/(app)/messages/loading.tsx
@@ -0,0 +1,5 @@
+import { RouteLoading } from "@/components/app/shared/RouteLoading";
+
+export default function Loading() {
+  return <RouteLoading label="messages" rows={4} />;
+}
diff --git a/apps/web/app/(app)/notifications/loading.tsx b/apps/web/app/(app)/notifications/loading.tsx
new file mode 100644
index 00000000..1e599416
--- /dev/null
+++ b/apps/web/app/(app)/notifications/loading.tsx
@@ -0,0 +1,5 @@
+import { RouteLoading } from "@/components/app/shared/RouteLoading";
+
+export default function Loading() {
+  return <RouteLoading label="notifications" rows={4} />;
+}
diff --git a/apps/web/app/(app)/prompts/loading.tsx b/apps/web/app/(app)/prompts/loading.tsx
new file mode 100644
index 00000000..fa4979d4
--- /dev/null
+++ b/apps/web/app/(app)/prompts/loading.tsx
@@ -0,0 +1,5 @@
+import { RouteLoading } from "@/components/app/shared/RouteLoading";
+
+export default function Loading() {
+  return <RouteLoading label="prompts" />;
+}
diff --git a/apps/web/app/(app)/recap/loading.tsx b/apps/web/app/(app)/recap/loading.tsx
new file mode 100644
index 00000000..5e8fba99
--- /dev/null
+++ b/apps/web/app/(app)/recap/loading.tsx
@@ -0,0 +1,5 @@
+import { RouteLoading } from "@/components/app/shared/RouteLoading";
+
+export default function Loading() {
+  return <RouteLoading label="recap" rows={2} />;
+}
diff --git a/apps/web/app/(app)/recap/page.tsx b/apps/web/app/(app)/recap/page.tsx
index e574e3aa..af93b697 100644
--- a/apps/web/app/(app)/recap/page.tsx
+++ b/apps/web/app/(app)/recap/page.tsx
@@ -1,5 +1,7 @@
 import { redirect } from "next/navigation";
 import { getAuthContext } from "@/lib/supabase/auth";
+import { createClient } from "@/lib/supabase/server";
+import { getRecapData } from "@/lib/utils/recap";
 import { RecapPage } from "@/components/app/recap/RecapPage";
 
 export default async function RecapRoutePage() {
@@ -9,5 +11,25 @@ export default async function RecapRoutePage() {
     redirect("/login");
   }
 
-  return <RecapPage />;
+  const supabase = await createClient();
+  const { data: profile } = await supabase
+    .from("users")
+    .select("username, is_public, streak_freezes")
+    .eq("id", identity.id)
+    .single();
+
+  if (!profile?.username) {
+    return <RecapPage initialData={null} initialError="Profile not found" />;
+  }
+
+  const initialData = await getRecapData(
+    supabase,
+    identity.id,
+    profile.username,
+    profile.is_public,
+    "week",
+    profile.streak_freezes ?? 0,
+  );
+
+  return <RecapPage initialData={initialData} />;
 }
diff --git a/apps/web/app/(app)/search/loading.tsx b/apps/web/app/(app)/search/loading.tsx
new file mode 100644
index 00000000..b47e48c8
--- /dev/null
+++ b/apps/web/app/(app)/search/loading.tsx
@@ -0,0 +1,5 @@
+import { RouteLoading } from "@/components/app/shared/RouteLoading";
+
+export default function Loading() {
+  return <RouteLoading label="search" />;
+}
diff --git a/apps/web/app/(app)/search/page.tsx b/apps/web/app/(app)/search/page.tsx
index 5d4f13d4..642690ed 100644
--- a/apps/web/app/(app)/search/page.tsx
+++ b/apps/web/app/(app)/search/page.tsx
@@ -1,132 +1,40 @@
-"use client";
+import SearchClient, {
+  type SearchUser,
+} from "@/components/app/search/SearchClient";
+import { createClient } from "@/lib/supabase/server";
 
-import { useState, useRef, Suspense } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
-import Link from "next/link";
-import { Search } from "lucide-react";
-import type { User } from "@/types";
-import { Avatar } from "@/components/ui/Avatar";
+const PUBLIC_USER_FIELDS =
+  "id, username, display_name, bio, avatar_url, is_public";
 
-function SearchContent() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const [query, setQuery] = useState(searchParams.get("q") ?? "");
-  const [results, setResults] = useState<User[]>([]);
-  const [loading, setLoading] = useState(false);
-  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
-
-  function handleSearch(value: string) {
-    setQuery(value);
-
-    if (value.length < 2) {
-      setResults([]);
-      return;
-    }
-
-    clearTimeout(timerRef.current);
-    timerRef.current = setTimeout(async () => {
-      setLoading(true);
-      const params = new URLSearchParams({ q: value });
-      router.replace(`/search?${params.toString()}`, { scroll: false });
+function sanitizeSearchFilter(value: string): string {
+  return value.replace(/[,()\\@]/g, "");
+}
 
-      const res = await fetch(`/api/search?q=${encodeURIComponent(value)}&limit=20`);
-      const data = await res.json();
-      setResults(data.users ?? []);
-      setLoading(false);
-    }, 300);
+export default async function SearchPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ q?: string | string[] }>;
+}) {
+  const params = await searchParams;
+  const query = typeof params.q === "string" ? params.q : "";
+  let initialResults: SearchUser[] = [];
+
+  if (query.length >= 2) {
+    const supabase = await createClient();
+    const safe = sanitizeSearchFilter(query);
+    const { data } = await supabase
+      .from("users")
+      .select(PUBLIC_USER_FIELDS)
+      .eq("is_public", true)
+      .or(
+        `username.ilike.%${safe}%,display_name.ilike.%${safe}%,github_username.ilike.%${safe}%`,
+      )
+      .limit(20);
+
+    initialResults = data ?? [];
   }
 
   return (
-    <>
-      <header className="sticky top-0 z-10 border-b border-border bg-background px-[var(--app-page-padding-x)] py-3">
-        <div className="flex items-center gap-3 rounded-[4px] border border-border px-4 py-2 focus-within:border-accent focus-within:ring-3 focus-within:ring-accent/15">
-          <Search size={18} className="shrink-0 text-muted" />
-          <input
-            type="search"
-            name="q"
-            value={query}
-            onChange={(e) => handleSearch(e.target.value)}
-            placeholder="Search by username or email"
-            aria-label="Search users"
-            className="flex-1 bg-transparent text-base outline-none placeholder:text-muted"
-          />
-        </div>
-      </header>
-
-      <div>
-        {query.length < 2 && !loading && results.length === 0 && (
-          <p className="px-[var(--app-page-padding-x)] py-8 text-center text-sm text-muted">
-            Search by username or email
-          </p>
-        )}
-        {loading && (
-          <p className="px-[var(--app-page-padding-x)] py-8 text-center text-sm text-muted">Searching&hellip;</p>
-        )}
-        {!loading && query.length >= 2 && results.length === 0 && (
-          <p className="px-[var(--app-page-padding-x)] py-8 text-center text-sm text-muted">
-            No users found for &ldquo;{query}&rdquo;
-          </p>
-        )}
-        {results.map((user) => {
-          const content = (
-            <>
-              <Avatar
-                src={user.avatar_url}
-                alt={user.username ?? user.display_name ?? ""}
-                fallback={user.display_name ?? user.username ?? "?"}
-                size="md"
-              />
-              <div className="flex-1 overflow-hidden">
-                <p className="font-medium">
-                  {user.username
-                    ? user.username
-                    : user.display_name ?? "New user"}
-                </p>
-                {user.username ? (
-                  user.bio && (
-                    <p className="truncate text-sm text-muted">{user.bio}</p>
-                  )
-                ) : (
-                  <p className="text-sm text-muted">
-                    Hasn&apos;t set up their profile yet
-                  </p>
-                )}
-              </div>
-            </>
-          );
-
-          return user.username ? (
-            <Link
-              key={user.id}
-              href={`/u/${user.username}`}
-              className="flex items-center gap-4 border-b border-border px-[var(--app-page-padding-x)] py-4 hover:bg-subtle"
-            >
-              {content}
-            </Link>
-          ) : (
-            <div
-              key={user.id}
-              className="flex items-center gap-4 border-b border-border px-[var(--app-page-padding-x)] py-4"
-            >
-              {content}
-            </div>
-          );
-        })}
-      </div>
-    </>
-  );
-}
-
-export default function SearchPage() {
-  return (
-    <Suspense
-      fallback={
-        <div className="px-[var(--app-page-padding-x)] py-8 text-center text-sm text-muted">
-          Loading&hellip;
-        </div>
-      }
-    >
-      <SearchContent />
-    </Suspense>
+    <SearchClient initialQuery={query} initialResults={initialResults} />
   );
 }
diff --git a/apps/web/app/(app)/settings/loading.tsx b/apps/web/app/(app)/settings/loading.tsx
new file mode 100644
index 00000000..bf4a7aea
--- /dev/null
+++ b/apps/web/app/(app)/settings/loading.tsx
@@ -0,0 +1,5 @@
+import { RouteLoading } from "@/components/app/shared/RouteLoading";
+
+export default function Loading() {
+  return <RouteLoading label="settings" rows={5} />;
+}
diff --git a/apps/web/app/(app)/settings/page.tsx b/apps/web/app/(app)/settings/page.tsx
index 2ca01614..eb097624 100644
--- a/apps/web/app/(app)/settings/page.tsx
+++ b/apps/web/app/(app)/settings/page.tsx
@@ -1,762 +1,41 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { useRouter } from "next/navigation";
-import { createClient } from "@/lib/supabase/client";
-import Link from "next/link";
-import type { User } from "@/types";
-import { Input } from "@/components/ui/Input";
-import { Textarea } from "@/components/ui/Textarea";
-import { Button } from "@/components/ui/Button";
-import { Avatar } from "@/components/ui/Avatar";
-import { LogOut, Copy, Check, Camera, Loader2, X as XIcon } from "lucide-react";
-import { usePostHog } from "posthog-js/react";
-import { compressImage } from "@/lib/utils/compress-image";
-import { CountryPicker } from "@/components/ui/CountryPicker";
-import { TeamBadge } from "@/components/app/shared/TeamBadge";
-
-type ProfileUpdatePayloadInput = {
-  username: string;
-  displayName: string;
-  bio: string;
-  heardAbout: string;
-  link: string;
-  country: string;
-  githubUsername: string;
-  teamUrl: string;
-  isPublic: boolean;
-  emailNotifications: boolean;
-  emailMentionNotifications: boolean;
-  emailDmNotifications: boolean;
-  timezone: string;
-};
-
-export function buildProfileUpdatePayload(input: ProfileUpdatePayloadInput) {
-  return {
-    username: input.username.trim() || undefined,
-    display_name: input.displayName.trim() || null,
-    bio: input.bio.trim() || null,
-    heard_about: input.heardAbout.trim() || null,
-    link: input.link.trim() || null,
-    country: input.country || null,
-    github_username: input.githubUsername.trim() || null,
-    team_url: input.teamUrl.trim() || null,
-    is_public: input.isPublic,
-    email_notifications: input.emailNotifications,
-    email_mention_notifications: input.emailMentionNotifications,
-    email_dm_notifications: input.emailDmNotifications,
-    timezone: input.timezone,
-  };
-}
-
-export default function SettingsPage() {
-  const router = useRouter();
-  const posthog = usePostHog();
-  const [profile, setProfile] = useState<User | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [saved, setSaved] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const [username, setUsername] = useState("");
-  const [displayName, setDisplayName] = useState("");
-  const [bio, setBio] = useState("");
-  const [heardAbout, setHeardAbout] = useState("");
-  const [link, setLink] = useState("");
-  const [country, setCountry] = useState("");
-  const [githubUsername, setGithubUsername] = useState("");
-  const [teamUrl, setTeamUrl] = useState("");
-  const [clearingTeam, setClearingTeam] = useState(false);
-  const [isPublic, setIsPublic] = useState(true);
-  const [emailNotifications, setEmailNotifications] = useState(true);
-  const [emailMentionNotifications, setEmailMentionNotifications] = useState(true);
-  const [emailDmNotifications, setEmailDmNotifications] = useState(true);
-  const [timezone, setTimezone] = useState("");
-  const [crewCount, setCrewCount] = useState(0);
-  const [refCopied, setRefCopied] = useState(false);
-  const [avatarUploading, setAvatarUploading] = useState(false);
-  const avatarInputRef = useRef<HTMLInputElement>(null);
-  const [deleteOpen, setDeleteOpen] = useState(false);
-  const [deleteConfirm, setDeleteConfirm] = useState("");
-  const [deleting, setDeleting] = useState(false);
-  const [deleteError, setDeleteError] = useState<string | null>(null);
-  const deleteInputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    async function load() {
-      const res = await fetch("/api/users/me");
-      if (!res.ok) {
-        setLoading(false);
-        return;
-      }
-
-      const data = await res.json();
-      if (data) {
-        setProfile(data);
-        setUsername(data.username ?? "");
-        setDisplayName(data.display_name ?? "");
-        setBio(data.bio ?? "");
-        setHeardAbout(data.heard_about ?? "");
-        setLink(data.link ?? "");
-        setCountry(data.country ?? "");
-        setGithubUsername(data.github_username ?? "");
-        setTeamUrl(data.team_url ?? "");
-        setIsPublic(data.is_public);
-        setEmailNotifications(data.email_notifications ?? true);
-        setEmailMentionNotifications(data.email_mention_notifications ?? true);
-        setEmailDmNotifications(data.email_dm_notifications ?? true);
-        setTimezone(data.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone);
-        setCrewCount(data.crew_count ?? 0);
-      }
-      setLoading(false);
-    }
-    load();
-  }, []);
-
-  async function handleAvatarUpload(e: React.ChangeEvent<HTMLInputElement>) {
-    const file = e.target.files?.[0];
-    if (!file) return;
-    if (avatarInputRef.current) avatarInputRef.current.value = "";
-
-    setAvatarUploading(true);
-    setError(null);
-
-    try {
-      const compressed = await compressImage(file);
-      const form = new FormData();
-      form.append("file", compressed);
-
-      const uploadRes = await fetch("/api/upload?bucket=avatars", {
-        method: "POST",
-        body: form,
-      });
-
-      if (!uploadRes.ok) {
-        const data = await uploadRes.json().catch(() => ({}));
-        throw new Error(data.error ?? "Upload failed");
-      }
-
-      const { url } = await uploadRes.json();
-
-      const patchRes = await fetch("/api/users/me", {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ avatar_url: url }),
-      });
-
-      if (!patchRes.ok) {
-        const data = await patchRes.json().catch(() => ({}));
-        throw new Error(data.error ?? "Failed to save avatar");
-      }
-
-      setProfile((prev) => (prev ? { ...prev, avatar_url: url } : prev));
-    } catch (err) {
-      setError((err as Error).message);
-    } finally {
-      setAvatarUploading(false);
-    }
-  }
-
-  async function handleSave(e: React.FormEvent) {
-    e.preventDefault();
-    setSaving(true);
-    setError(null);
-    setSaved(false);
-
-    const res = await fetch("/api/users/me", {
-      method: "PATCH",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(buildProfileUpdatePayload({
-        username,
-        displayName,
-        bio,
-        heardAbout,
-        link,
-        country,
-        githubUsername,
-        teamUrl,
-        isPublic,
-        emailNotifications,
-        emailMentionNotifications,
-        emailDmNotifications,
-        timezone,
-      })),
-    });
-
-    if (!res.ok) {
-      const data = await res.json();
-      setError(data.error ?? "Failed to save");
-    } else {
-      const data = await res.json();
-      setProfile((prev) => (prev ? { ...prev, ...data } : data));
-      setTeamUrl(data.team_url ?? "");
-      setSaved(true);
-      posthog.capture("profile_saved", { is_public: isPublic });
-    }
-    setSaving(false);
-  }
-
-  async function handleClearTeam() {
-    setClearingTeam(true);
-    setError(null);
-    try {
-      const res = await fetch("/api/users/me", {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ team_url: null }),
-      });
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}));
-        setError(data.error ?? "Failed to clear team");
-        return;
-      }
-      const data = await res.json();
-      setProfile((prev) => (prev ? { ...prev, ...data } : data));
-      setTeamUrl("");
-    } finally {
-      setClearingTeam(false);
-    }
-  }
-
-  if (loading) {
-    return <div className="px-[var(--app-page-padding-x)] py-6 text-sm text-muted">Loading&hellip;</div>;
-  }
-
-  if (!profile) {
-    return <div className="px-[var(--app-page-padding-x)] py-6 text-sm text-muted">Unable to load profile.</div>;
+import { redirect } from "next/navigation";
+import SettingsClient, {
+  type SettingsProfile,
+} from "@/components/app/settings/SettingsClient";
+import { getAuthIdentity } from "@/lib/supabase/auth";
+import { getServiceClient } from "@/lib/supabase/service";
+
+export default async function SettingsPage() {
+  const identity = await getAuthIdentity();
+  if (!identity) redirect("/login");
+
+  const db = getServiceClient();
+  const [{ data: profile, error }, { count: crewCount }] = await Promise.all([
+    db
+      .from("users")
+      .select(
+        "id, username, display_name, bio, heard_about, avatar_url, country, region, link, github_username, is_public, timezone, email_notifications, email_mention_notifications, email_dm_notifications, streak_freezes, referred_by, team_url, team_favicon_url, created_at, updated_at",
+      )
+      .eq("id", identity.id)
+      .single(),
+    db
+      .from("users")
+      .select("id", { count: "exact", head: true })
+      .eq("referred_by", identity.id),
+  ]);
+
+  if (error || !profile) {
+    return (
+      <p role="alert" className="px-[var(--app-page-padding-x)] py-6 text-sm text-muted">
+        Unable to load profile.
+      </p>
+    );
   }
 
-  return (
-    <>
-      <header className="sticky top-0 z-10 flex h-14 flex-wrap items-center justify-between gap-3 border-b border-border bg-background px-[var(--app-page-padding-x)]">
-        <h3 className="text-lg font-medium">Settings</h3>
-        <Link
-          href="/settings/import"
-          className="text-sm font-semibold text-accent hover:underline"
-        >
-          Import Usage Data
-        </Link>
-      </header>
-
-      <form onSubmit={handleSave} className="mx-auto max-w-lg px-[var(--app-page-padding-x)] py-8">
-        <div className="flex items-center gap-4 pb-6">
-          <div className="relative">
-            <Avatar
-              src={profile.avatar_url}
-              alt={profile.username ?? ""}
-              fallback={displayName || username || "?"}
-              size="lg"
-            />
-            <button
-              type="button"
-              onClick={() => avatarInputRef.current?.click()}
-              disabled={avatarUploading}
-              className="absolute -right-1 -bottom-1 flex size-8 items-center justify-center rounded-full border-2 border-background bg-subtle text-muted hover:bg-accent hover:text-accent-foreground disabled:opacity-60"
-              aria-label="Upload profile picture"
-            >
-              {avatarUploading ? (
-                <Loader2 size={14} className="animate-spin" />
-              ) : (
-                <Camera size={14} />
-              )}
-            </button>
-            <input
-              ref={avatarInputRef}
-              type="file"
-              accept="image/jpeg,image/png,image/webp,image/gif,image/heic,image/heif,.heic,.heif"
-              onChange={handleAvatarUpload}
-              className="hidden"
-              aria-label="Choose profile picture"
-            />
-          </div>
-          <div>
-            <p className="font-medium">{profile.display_name ?? profile.username ?? "No username set"}</p>
-            {profile.username && (
-              <p className="text-sm text-muted">@{profile.username}</p>
-            )}
-          </div>
-        </div>
-
-        {/* ── Profile ── */}
-        <fieldset className="space-y-6 border-t border-border pt-6">
-          <legend className="text-sm font-semibold uppercase tracking-widest text-muted">Profile</legend>
-
-          <div>
-            <label htmlFor="settings-username" className="mb-1 block text-xs font-semibold uppercase tracking-widest text-muted">
-              Username
-            </label>
-            <Input
-              id="settings-username"
-              name="username"
-              autoComplete="username"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              placeholder="your_username"
-              maxLength={20}
-              pattern="^[a-zA-Z0-9_]{3,20}$"
-            />
-            <p className="mt-1 text-xs text-muted">3-20 chars, alphanumeric + underscore</p>
-          </div>
-
-          <div>
-            <label htmlFor="settings-display-name" className="mb-1 block text-xs font-semibold uppercase tracking-widest text-muted">
-              Display Name
-            </label>
-            <Input
-              id="settings-display-name"
-              name="display_name"
-              autoComplete="name"
-              value={displayName}
-              onChange={(e) => setDisplayName(e.target.value)}
-            />
-          </div>
-
-          <div>
-            <label htmlFor="settings-bio" className="mb-1 block text-xs font-semibold uppercase tracking-widest text-muted">
-              Bio
-            </label>
-            <Textarea
-              id="settings-bio"
-              name="bio"
-              value={bio}
-              onChange={(e) => setBio(e.target.value)}
-              maxLength={160}
-              rows={2}
-              className="min-h-0"
-            />
-            <p className="mt-1 text-xs text-muted">{bio.length}/160</p>
-          </div>
-
-          <div>
-            <label htmlFor="settings-heard-about" className="mb-1 block text-xs font-semibold uppercase tracking-widest text-muted">
-              How did you hear about us?
-            </label>
-            <Textarea
-              id="settings-heard-about"
-              name="heard_about"
-              value={heardAbout}
-              onChange={(e) => setHeardAbout(e.target.value)}
-              placeholder="Friend, GitHub, X, newsletter, podcast..."
-              maxLength={500}
-              rows={3}
-              className="min-h-0"
-              aria-describedby="settings-heard-about-hint"
-            />
-            <div className="mt-1 flex items-center justify-between gap-3 text-xs text-muted">
-              <p id="settings-heard-about-hint" className="text-pretty">
-                Optional. This helps us understand where people are finding Straude.
-              </p>
-              <span>{heardAbout.length}/500</span>
-            </div>
-          </div>
-
-          <div>
-            <label htmlFor="settings-country" className="mb-1 block text-xs font-semibold uppercase tracking-widest text-muted">
-              Country
-            </label>
-            <CountryPicker
-              id="settings-country"
-              name="country"
-              value={country}
-              onChange={setCountry}
-            />
-          </div>
-
-          <div>
-            <label htmlFor="settings-website" className="mb-1 block text-xs font-semibold uppercase tracking-widest text-muted">
-              Website
-            </label>
-            <Input
-              id="settings-website"
-              name="url"
-              type="url"
-              autoComplete="url"
-              value={link}
-              onChange={(e) => setLink(e.target.value)}
-              placeholder="https://example.com"
-              maxLength={200}
-            />
-          </div>
-
-          <div>
-            <label htmlFor="settings-team-url" className="mb-1 block text-xs font-semibold uppercase tracking-widest text-muted">
-              Team
-            </label>
-            <Input
-              id="settings-team-url"
-              name="team_url"
-              type="url"
-              autoComplete="off"
-              value={teamUrl}
-              onChange={(e) => setTeamUrl(e.target.value)}
-              placeholder="https://anthropic.com"
-              maxLength={200}
-              aria-describedby="settings-team-url-hint"
-            />
-            <p id="settings-team-url-hint" className="mt-1 text-xs text-muted">
-              The URL of an organization you&rsquo;re affiliated with. Its logo
-              will appear next to your username across Straude.
-            </p>
-            {profile?.team_url && (
-              <div className="mt-2 flex items-center gap-2 rounded border border-border bg-subtle px-3 py-2">
-                <TeamBadge
-                  url={profile.team_url}
-                  faviconUrl={profile.team_favicon_url}
-                  size="md"
-                />
-                <span className="flex-1 truncate font-[family-name:var(--font-mono)] text-xs text-muted">
-                  {profile.team_url}
-                </span>
-                <button
-                  type="button"
-                  onClick={handleClearTeam}
-                  disabled={clearingTeam}
-                  aria-label="Clear team affiliation"
-                  className="inline-flex items-center gap-1 rounded-sm px-2 py-1 text-xs text-muted hover:text-foreground disabled:opacity-50"
-                >
-                  <XIcon size={12} />
-                  Clear
-                </button>
-              </div>
-            )}
-          </div>
-
-          <div>
-            <label htmlFor="settings-github" className="mb-1 block text-xs font-semibold uppercase tracking-widest text-muted">
-              GitHub Username
-            </label>
-            <Input
-              id="settings-github"
-              name="github_username"
-              value={githubUsername}
-              onChange={(e) => setGithubUsername(e.target.value)}
-            />
-          </div>
-
-          <div>
-            <label htmlFor="settings-timezone" className="mb-1 block text-xs font-semibold uppercase tracking-widest text-muted">
-              Timezone
-            </label>
-            <Input
-              id="settings-timezone"
-              name="timezone"
-              value={timezone}
-              onChange={(e) => setTimezone(e.target.value)}
-            />
-          </div>
-
-          {username && (
-            <div>
-              <p className="mb-1 text-xs font-semibold uppercase tracking-widest text-muted">Referral Link</p>
-              <div className="flex items-center gap-2">
-                <code className="flex-1 overflow-x-auto rounded border border-border bg-subtle px-3 py-2 font-[family-name:var(--font-mono)] text-sm">
-                  straude.com/join/{username}
-                </code>
-                <button
-                  type="button"
-                  onClick={() => {
-                    navigator.clipboard.writeText(`https://straude.com/join/${username}`);
-                    setRefCopied(true);
-                    setTimeout(() => setRefCopied(false), 2000);
-                    posthog.capture("referral_link_copied", { username });
-                  }}
-                  className="inline-flex items-center gap-1.5 border border-border px-3 py-2 text-sm font-semibold hover:bg-subtle"
-                  style={{ borderRadius: 4 }}
-                >
-                  {refCopied ? <Check size={14} className="text-accent" /> : <Copy size={14} />}
-                  {refCopied ? "Copied" : "Copy"}
-                </button>
-              </div>
-              <p className="mt-1 text-xs text-muted">
-                Share this link to invite others.{crewCount > 0 ? ` ${crewCount} recruited so far.` : ""}
-              </p>
-            </div>
-          )}
-        </fieldset>
-
-        {/* ── Notifications ── */}
-        <fieldset className="mt-8 space-y-4 border-t border-border pt-6">
-          <legend className="text-sm font-semibold uppercase tracking-widest text-muted">Notifications</legend>
-
-          <div className="space-y-1.5">
-            <div className="flex items-center gap-3">
-              <input
-                type="checkbox"
-                checked={emailNotifications}
-                onChange={(e) => setEmailNotifications(e.target.checked)}
-                id="email_notifications"
-                className="accent-accent"
-              />
-              <label htmlFor="email_notifications" className="text-sm font-medium">
-                Comment emails
-              </label>
-            </div>
-            <p className="pl-7 text-xs text-muted">
-              {emailNotifications
-                ? "You\u2019ll receive an email when someone comments on your posts."
-                : "Email notifications for comments are turned off."}
-            </p>
-          </div>
-
-          <div className="space-y-1.5">
-            <div className="flex items-center gap-3">
-              <input
-                type="checkbox"
-                checked={emailMentionNotifications}
-                onChange={(e) => setEmailMentionNotifications(e.target.checked)}
-                id="email_mention_notifications"
-                className="accent-accent"
-              />
-              <label htmlFor="email_mention_notifications" className="text-sm font-medium">
-                Mention emails
-              </label>
-            </div>
-            <p className="pl-7 text-xs text-muted">
-              {emailMentionNotifications
-                ? "You\u2019ll receive an email when someone @mentions you in a post or comment."
-                : "Email notifications for mentions are turned off."}
-            </p>
-          </div>
-
-          <div className="space-y-1.5">
-            <div className="flex items-center gap-3">
-              <input
-                type="checkbox"
-                checked={emailDmNotifications}
-                onChange={(e) => setEmailDmNotifications(e.target.checked)}
-                id="email_dm_notifications"
-                className="accent-accent"
-              />
-              <label htmlFor="email_dm_notifications" className="text-sm font-medium">
-                Direct message emails
-              </label>
-            </div>
-            <p className="pl-7 text-xs text-muted">
-              {emailDmNotifications
-                ? "You\u2019ll receive an email when someone sends you a direct message."
-                : "Email notifications for direct messages are turned off."}
-            </p>
-          </div>
-        </fieldset>
-
-        {/* ── Privacy & Account ── */}
-        <fieldset className="mt-8 space-y-4 border-t border-border pt-6">
-          <legend className="text-sm font-semibold uppercase tracking-widest text-muted">Privacy &amp; Account</legend>
-
-          <div className="space-y-1.5">
-            <div className="flex items-center gap-3">
-              <input
-                type="checkbox"
-                checked={isPublic}
-                onChange={(e) => setIsPublic(e.target.checked)}
-                id="is_public"
-                className="accent-accent"
-              />
-              <label htmlFor="is_public" className="text-sm font-medium">
-                Public profile
-              </label>
-            </div>
-            <p className="pl-7 text-xs text-muted">
-              {isPublic
-                ? "Your profile, posts, and stats are visible to everyone. You appear on the leaderboard."
-                : "Your profile and activity are only visible to your followers. You will not appear on the leaderboard."}
-            </p>
-          </div>
-        </fieldset>
-
-        <div className="mt-8 space-y-4">
-          {error && <p className="text-sm text-error">{error}</p>}
-          {saved && <p className="text-sm text-accent">Saved successfully.</p>}
-
-          <Button type="submit" disabled={saving} className="w-full py-3">
-            {saving ? "Saving\u2026" : "Save Changes"}
-          </Button>
-
-          <div className="border-t border-border pt-6">
-            <button
-              type="button"
-              onClick={async () => {
-                const supabase = createClient();
-                await supabase.auth.signOut();
-                router.push("/");
-              }}
-              className="flex items-center gap-2 text-sm text-muted hover:text-foreground"
-            >
-              <LogOut size={16} />
-              Log out
-            </button>
-          </div>
-        </div>
-
-        {/* ── Delete Account ── */}
-        <fieldset className="mt-12 space-y-4">
-          <legend className="text-2xl font-semibold text-error">Delete account</legend>
-          <hr className="border-error/30" />
-
-          <p className="text-sm">
-            Once you delete your account, all of your data&mdash;usage logs, posts, comments, and profile&mdash;will be permanently removed. This cannot be undone.
-          </p>
-
-          <button
-            type="button"
-            onClick={() => {
-              setDeleteConfirm("");
-              setDeleteError(null);
-              setDeleteOpen(true);
-            }}
-            className="rounded-[4px] border border-error/30 px-5 py-2.5 text-sm font-semibold text-error transition-colors hover:bg-error/10"
-          >
-            Delete your account
-          </button>
-        </fieldset>
-      </form>
-
-      {deleteOpen &&
-        createPortal(
-          <DeleteAccountDialog
-            username={username}
-            confirmValue={deleteConfirm}
-            onConfirmChange={setDeleteConfirm}
-            deleting={deleting}
-            error={deleteError}
-            inputRef={deleteInputRef}
-            onClose={() => setDeleteOpen(false)}
-            onDelete={async () => {
-              setDeleting(true);
-              setDeleteError(null);
-
-              const res = await fetch("/api/users/me", {
-                method: "DELETE",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ username }),
-              });
-
-              if (!res.ok) {
-                const data = await res.json().catch(() => ({}));
-                setDeleteError(data.error ?? "Failed to delete account");
-                setDeleting(false);
-                return;
-              }
-
-              const supabase = createClient();
-              await supabase.auth.signOut();
-              router.push("/");
-            }}
-          />,
-          document.body,
-        )}
-    </>
-  );
-}
-
-function DeleteAccountDialog({
-  username,
-  confirmValue,
-  onConfirmChange,
-  deleting,
-  error,
-  inputRef,
-  onClose,
-  onDelete,
-}: {
-  username: string;
-  confirmValue: string;
-  onConfirmChange: (value: string) => void;
-  deleting: boolean;
-  error: string | null;
-  inputRef: React.RefObject<HTMLInputElement | null>;
-  onClose: () => void;
-  onDelete: () => void;
-}) {
-  const confirmSentence = `I, ${username}, wish to delete my Straude account. I understand this cannot be undone.`;
-  const canDelete = confirmValue === confirmSentence && username.length > 0;
-
-  useEffect(() => {
-    const originalOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    inputRef.current?.focus();
-    return () => {
-      document.body.style.overflow = originalOverflow;
-    };
-  }, [inputRef]);
-
-  useEffect(() => {
-    function handleKeyDown(event: KeyboardEvent) {
-      if (event.key === "Escape" && !deleting) {
-        onClose();
-      }
-    }
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [onClose, deleting]);
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
-      onClick={(event) => {
-        if (event.target === event.currentTarget && !deleting) onClose();
-      }}
-    >
-      <div
-        role="alertdialog"
-        aria-modal="true"
-        aria-labelledby="delete-account-title"
-        aria-describedby="delete-account-desc"
-        className="w-full max-w-md rounded-[8px] border border-border bg-background shadow-xl"
-      >
-        <div className="border-b border-border px-5 py-4">
-          <h2 id="delete-account-title" className="text-lg font-semibold text-error">
-            Are you sure you want to do this?
-          </h2>
-        </div>
-
-        <div className="space-y-4 px-5 py-5">
-          <p id="delete-account-desc" className="text-sm text-muted">
-            This will permanently delete your account and all associated data including usage logs, posts, comments, followers, and your profile. <strong className="text-foreground">This action cannot be undone.</strong>
-          </p>
-
-          <div>
-            <label htmlFor="delete-confirm-input" className="mb-1.5 block text-sm">
-              To confirm, type the following statement below:
-            </label>
-            <p className="mb-2 select-all rounded border border-border bg-subtle px-3 py-2 font-[family-name:var(--font-mono)] text-xs text-foreground">
-              {confirmSentence}
-            </p>
-            <Input
-              ref={inputRef}
-              id="delete-confirm-input"
-              value={confirmValue}
-              onChange={(e) => onConfirmChange(e.target.value)}
-              placeholder="Type the sentence above to confirm"
-              autoComplete="off"
-              spellCheck={false}
-              disabled={deleting}
-            />
-          </div>
-
-          {error && <p className="text-sm text-error">{error}</p>}
-        </div>
+  const initialProfile: SettingsProfile = {
+    ...profile,
+    crew_count: crewCount ?? 0,
+  };
 
-        <div className="flex items-center justify-end gap-3 border-t border-border px-5 py-4">
-          <button
-            type="button"
-            onClick={onClose}
-            disabled={deleting}
-            className="rounded-[4px] border border-border px-4 py-2 text-sm font-semibold transition-colors hover:bg-subtle disabled:opacity-50"
-          >
-            Cancel
-          </button>
-          <button
-            type="button"
-            onClick={onDelete}
-            disabled={!canDelete || deleting}
-            className="rounded-[4px] bg-error px-4 py-2 text-sm font-semibold text-white transition-[filter,opacity] hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
-          >
-            {deleting ? "Deleting\u2026" : "Delete this account"}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
+  return <SettingsClient initialProfile={initialProfile} />;
 }
diff --git a/apps/web/app/api/usage/submit/route.ts b/apps/web/app/api/usage/submit/route.ts
index 0d5f1770..c1f8e473 100644
--- a/apps/web/app/api/usage/submit/route.ts
+++ b/apps/web/app/api/usage/submit/route.ts
@@ -7,7 +7,11 @@ import { getServiceClient } from "@/lib/supabase/service";
 import { checkAndAwardAchievements } from "@/lib/achievements";
 import { rateLimit } from "@/lib/rate-limit";
 import { formatCurrency } from "@/lib/utils/format";
-import type { UsageSubmitRequest, UsageSubmitResponse, CcusageDailyEntry, ModelBreakdownEntry, UsageCollectorMeta } from "@/types";
+import {
+  aggregateDeviceRows,
+  type DeviceUsageRow,
+} from "@/lib/usage/aggregate-device-rows";
+import type { UsageSubmitRequest, UsageSubmitResponse, CcusageDailyEntry, UsageCollectorMeta } from "@/types";
 
 const MAX_BACKFILL_DAYS = 30;
 const MAX_USAGE_ENTRIES = MAX_BACKFILL_DAYS + 2;
@@ -380,73 +384,6 @@ async function resolveAuthContext(request: Request): Promise<AuthContext | null>
   }
 }
 
-interface DeviceUsageRow {
-  cost_usd: number;
-  input_tokens: number;
-  output_tokens: number;
-  reasoning_output_tokens?: number;
-  cache_creation_tokens: number;
-  cache_read_tokens: number;
-  total_tokens: number;
-  models: string[];
-  model_breakdown: ModelBreakdownEntry[] | null;
-  collector_meta?: UsageCollectorMeta | null;
-}
-
-/**
- * Aggregate multiple device_usage rows into a single daily_usage summary.
- * SUMs numeric fields, unions models (deduplicated), merges model_breakdowns
- * by summing cost_usd per model name.
- */
-export function aggregateDeviceRows(rows: DeviceUsageRow[]) {
-  let cost_usd = 0;
-  let input_tokens = 0;
-  let output_tokens = 0;
-  let reasoning_output_tokens = 0;
-  let cache_creation_tokens = 0;
-  let cache_read_tokens = 0;
-  let total_tokens = 0;
-  const modelsSet = new Set<string>();
-  const breakdownMap = new Map<string, number>();
-
-  for (const row of rows) {
-    cost_usd += Number(row.cost_usd);
-    input_tokens += Number(row.input_tokens);
-    output_tokens += Number(row.output_tokens);
-    reasoning_output_tokens += Number(row.reasoning_output_tokens ?? 0);
-    cache_creation_tokens += Number(row.cache_creation_tokens ?? 0);
-    cache_read_tokens += Number(row.cache_read_tokens ?? 0);
-    total_tokens += Number(row.total_tokens);
-
-    if (Array.isArray(row.models)) {
-      for (const m of row.models) modelsSet.add(m);
-    }
-    if (Array.isArray(row.model_breakdown)) {
-      for (const entry of row.model_breakdown) {
-        breakdownMap.set(entry.model, (breakdownMap.get(entry.model) ?? 0) + entry.cost_usd);
-      }
-    }
-  }
-
-  const models = [...modelsSet];
-  const model_breakdown: ModelBreakdownEntry[] = breakdownMap.size > 0
-    ? [...breakdownMap.entries()].map(([model, cost]) => ({ model, cost_usd: cost }))
-    : [];
-
-  return {
-    cost_usd,
-    input_tokens,
-    output_tokens,
-    reasoning_output_tokens,
-    cache_creation_tokens,
-    cache_read_tokens,
-    total_tokens,
-    models,
-    model_breakdown: model_breakdown.length > 0 ? model_breakdown : null,
-    session_count: rows.length,
-  };
-}
-
 function resolveClaudeTitleLabel(models: string[] | null | undefined): string | null {
   if (!models || models.length === 0) return null;
   const slugs = models.map((model) => model.trim().toLowerCase());
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 88b40325..14c82d12 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata, Viewport } from "next";
 import { Inter, JetBrains_Mono } from "next/font/google";
-import { Agentation } from "agentation";
 import Script from "next/script";
+import { DevAgentation } from "@/components/dev/DevAgentation";
 import { getThemeBootstrapScript } from "@/lib/theme";
 import "./globals.css";
 
@@ -123,7 +123,7 @@ export default function RootLayout({
           Skip to content
         </a>
         {children}
-        {process.env.NODE_ENV === "development" && <Agentation />}
+        <DevAgentation />
       </body>
     </html>
   );
diff --git a/apps/web/components/app/card/CardClient.tsx b/apps/web/components/app/card/CardClient.tsx
new file mode 100644
index 00000000..55d580c9
--- /dev/null
+++ b/apps/web/components/app/card/CardClient.tsx
@@ -0,0 +1,169 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/Button";
+import { Copy, Check, ExternalLink } from "lucide-react";
+import Link from "next/link";
+
+type ThemeId = "light" | "dark";
+
+const THEMES: { id: ThemeId; label: string }[] = [
+  { id: "light", label: "Light" },
+  { id: "dark", label: "Dark" },
+];
+
+function CopyBlock({ label, code }: { label: string; code: string }) {
+  const [copied, setCopied] = useState(false);
+
+  function handleCopy() {
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="text-xs font-semibold text-muted uppercase tracking-wider">
+        {label}
+      </div>
+      <div className="relative">
+        <pre className="overflow-x-auto rounded-[4px] border border-border bg-subtle px-3 py-2.5 text-xs text-foreground leading-relaxed">
+          {code}
+        </pre>
+        <button
+          onClick={handleCopy}
+          className="absolute top-2 right-2 p-1.5 rounded-[4px] border border-border bg-background hover:bg-subtle transition-colors"
+          aria-label={copied ? "Copied" : "Copy to clipboard"}
+        >
+          {copied ? (
+            <Check className="w-3.5 h-3.5 text-green-500" />
+          ) : (
+            <Copy className="w-3.5 h-3.5 text-muted" />
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default function CardClient({
+  username,
+  isPublic,
+}: {
+  username: string | null;
+  isPublic: boolean;
+}) {
+  const [theme, setTheme] = useState<ThemeId>("light");
+
+  if (!username) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center gap-3 py-20">
+        <div className="text-sm text-muted">
+          Set a username in settings to get your card.
+        </div>
+        <Link href="/settings">
+          <Button variant="secondary" size="sm">
+            Go to Settings
+          </Button>
+        </Link>
+      </div>
+    );
+  }
+
+  const baseUrl = "https://straude.com";
+  const cardUrl = `${baseUrl}/api/card/${username}`;
+  const profileUrl = `${baseUrl}/u/${username}`;
+
+  const markdownLight = `[![Straude Stats](${cardUrl})](${profileUrl})`;
+  const markdownDark = `[![Straude Stats](${cardUrl}?theme=dark)](${profileUrl})`;
+  const markdownAuto = `<a href="${profileUrl}">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="${cardUrl}?theme=dark" />
+    <source media="(prefers-color-scheme: light)" srcset="${cardUrl}?theme=light" />
+    <img alt="Straude Stats" src="${cardUrl}" />
+  </picture>
+</a>`;
+
+  return (
+    <div className="flex-1 flex flex-col max-w-2xl mx-auto w-full px-4 py-8 gap-8">
+      <div>
+        <h1 className="text-lg font-bold text-foreground">Stats Card</h1>
+        <p className="mt-1 text-sm text-muted">
+          Embed your Straude stats on your GitHub profile README.
+        </p>
+      </div>
+
+      {!isPublic && (
+        <div className="rounded-[4px] border border-border bg-subtle px-4 py-3 text-sm text-muted">
+          Your profile is private. The card will show a &quot;private
+          profile&quot; placeholder until you{" "}
+          <Link href="/settings" className="text-accent hover:underline">
+            make it public
+          </Link>
+          .
+        </div>
+      )}
+
+      {/* Theme toggle */}
+      <div className="flex flex-col gap-3">
+        <div className="text-xs font-semibold text-muted uppercase tracking-wider">
+          Theme
+        </div>
+        <div className="flex gap-2">
+          {THEMES.map((t) => (
+            <button
+              key={t.id}
+              onClick={() => setTheme(t.id)}
+              className={`px-3 py-1.5 text-xs font-semibold rounded-[4px] border transition-colors ${
+                theme === t.id
+                  ? "border-accent text-accent bg-accent/10"
+                  : "border-border text-muted hover:text-foreground"
+              }`}
+            >
+              {t.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Preview */}
+      <div className="flex flex-col gap-3">
+        <div className="text-xs font-semibold text-muted uppercase tracking-wider">
+          Preview
+        </div>
+        <div className="rounded-[4px] border border-border bg-subtle p-4 flex items-center justify-center">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={`/api/card/${username}?theme=${theme}`}
+            alt="Straude Stats Card"
+            width={495}
+            height={270}
+            className="rounded-[4px]"
+          />
+        </div>
+        <div className="flex gap-2">
+          <a
+            href={`/api/card/${username}?theme=${theme}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Button variant="ghost" size="sm">
+              <ExternalLink className="w-3.5 h-3.5 mr-1.5" />
+              Open image
+            </Button>
+          </a>
+        </div>
+      </div>
+
+      {/* Embed snippets */}
+      <div className="flex flex-col gap-5">
+        <div className="text-xs font-semibold text-muted uppercase tracking-wider">
+          Embed in your README
+        </div>
+        <CopyBlock label="Light theme" code={markdownLight} />
+        <CopyBlock label="Dark theme" code={markdownDark} />
+        <CopyBlock label="Auto-match GitHub theme (recommended)" code={markdownAuto} />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/app/recap/RecapPage.tsx b/apps/web/components/app/recap/RecapPage.tsx
index 9d43435f..76b8dfc4 100644
--- a/apps/web/components/app/recap/RecapPage.tsx
+++ b/apps/web/components/app/recap/RecapPage.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import { Link2, Download, Check } from "lucide-react";
 import { RecapCard } from "@/components/app/recap/RecapCard";
 import type { RecapData } from "@/lib/utils/recap";
@@ -10,11 +10,18 @@ import {
   type RecapBackgroundId,
 } from "@/lib/recap-backgrounds";
 
-export function RecapPage() {
+export function RecapPage({
+  initialData,
+  initialError = null,
+}: {
+  initialData: RecapData | null;
+  initialError?: string | null;
+}) {
   const [period, setPeriod] = useState<"week" | "month">("week");
-  const [data, setData] = useState<RecapData | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
+  const [data, setData] = useState<RecapData | null>(initialData);
+  const [error, setError] = useState<string | null>(initialError);
+  const [loading, setLoading] = useState(false);
+  const initialRender = useRef(true);
   const [copied, setCopied] = useState(false);
   const [downloading, setDownloading] = useState(false);
   const [downloadError, setDownloadError] = useState<string | null>(null);
@@ -22,6 +29,11 @@ export function RecapPage() {
     useState<RecapBackgroundId>(DEFAULT_BACKGROUND_ID);
 
   useEffect(() => {
+    if (initialRender.current) {
+      initialRender.current = false;
+      return;
+    }
+
     let cancelled = false;
 
     async function loadRecap() {
diff --git a/apps/web/components/app/search/SearchClient.tsx b/apps/web/components/app/search/SearchClient.tsx
new file mode 100644
index 00000000..8c30ef82
--- /dev/null
+++ b/apps/web/components/app/search/SearchClient.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import { useState, useRef } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { Search } from "lucide-react";
+import type { User } from "@/types";
+import { Avatar } from "@/components/ui/Avatar";
+
+export type SearchUser = Pick<
+  User,
+  "id" | "username" | "display_name" | "bio" | "avatar_url" | "is_public"
+>;
+
+export default function SearchClient({
+  initialQuery,
+  initialResults,
+}: {
+  initialQuery: string;
+  initialResults: SearchUser[];
+}) {
+  const router = useRouter();
+  const [query, setQuery] = useState(initialQuery);
+  const [results, setResults] = useState<SearchUser[]>(initialResults);
+  const [loading, setLoading] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  function handleSearch(value: string) {
+    setQuery(value);
+    clearTimeout(timerRef.current);
+
+    if (value.length < 2) {
+      setResults([]);
+      setLoading(false);
+      router.replace("/search", { scroll: false });
+      return;
+    }
+
+    timerRef.current = setTimeout(async () => {
+      setLoading(true);
+      const params = new URLSearchParams({ q: value });
+      router.replace(`/search?${params.toString()}`, { scroll: false });
+
+      const res = await fetch(`/api/search?q=${encodeURIComponent(value)}&limit=20`);
+      const data = await res.json().catch(() => ({}));
+      setResults(res.ok ? (data.users ?? []) : []);
+      setLoading(false);
+    }, 300);
+  }
+
+  return (
+    <>
+      <header className="sticky top-0 z-10 border-b border-border bg-background px-[var(--app-page-padding-x)] py-3">
+        <div className="flex items-center gap-3 rounded-[4px] border border-border px-4 py-2 focus-within:border-accent focus-within:ring-3 focus-within:ring-accent/15">
+          <Search size={18} className="shrink-0 text-muted" />
+          <input
+            type="search"
+            name="q"
+            value={query}
+            onChange={(e) => handleSearch(e.target.value)}
+            placeholder="Search by username or email"
+            aria-label="Search users"
+            className="flex-1 bg-transparent text-base outline-none placeholder:text-muted"
+          />
+        </div>
+      </header>
+
+      <div>
+        {query.length < 2 && !loading && results.length === 0 && (
+          <p className="px-[var(--app-page-padding-x)] py-8 text-center text-sm text-muted">
+            Search by username or email
+          </p>
+        )}
+        {loading && (
+          <p className="px-[var(--app-page-padding-x)] py-8 text-center text-sm text-muted">Searching&hellip;</p>
+        )}
+        {!loading && query.length >= 2 && results.length === 0 && (
+          <p className="px-[var(--app-page-padding-x)] py-8 text-center text-sm text-muted">
+            No users found for &ldquo;{query}&rdquo;
+          </p>
+        )}
+        {results.map((user) => {
+          const content = (
+            <>
+              <Avatar
+                src={user.avatar_url}
+                alt={user.username ?? user.display_name ?? ""}
+                fallback={user.display_name ?? user.username ?? "?"}
+                size="md"
+              />
+              <div className="flex-1 overflow-hidden">
+                <p className="font-medium">
+                  {user.username
+                    ? user.username
+                    : user.display_name ?? "New user"}
+                </p>
+                {user.username ? (
+                  user.bio && (
+                    <p className="truncate text-sm text-muted">{user.bio}</p>
+                  )
+                ) : (
+                  <p className="text-sm text-muted">
+                    Hasn&apos;t set up their profile yet
+                  </p>
+                )}
+              </div>
+            </>
+          );
+
+          return user.username ? (
+            <Link
+              key={user.id}
+              href={`/u/${user.username}`}
+              className="flex items-center gap-4 border-b border-border px-[var(--app-page-padding-x)] py-4 hover:bg-subtle"
+            >
+              {content}
+            </Link>
+          ) : (
+            <div
+              key={user.id}
+              className="flex items-center gap-4 border-b border-border px-[var(--app-page-padding-x)] py-4"
+            >
+              {content}
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+}
diff --git a/apps/web/components/app/settings/SettingsClient.tsx b/apps/web/components/app/settings/SettingsClient.tsx
new file mode 100644
index 00000000..a4b004af
--- /dev/null
+++ b/apps/web/components/app/settings/SettingsClient.tsx
@@ -0,0 +1,732 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useRouter } from "next/navigation";
+import { createClient } from "@/lib/supabase/client";
+import Link from "next/link";
+import type { User } from "@/types";
+import { Input } from "@/components/ui/Input";
+import { Textarea } from "@/components/ui/Textarea";
+import { Button } from "@/components/ui/Button";
+import { Avatar } from "@/components/ui/Avatar";
+import { LogOut, Copy, Check, Camera, Loader2, X as XIcon } from "lucide-react";
+import { usePostHog } from "posthog-js/react";
+import { compressImage } from "@/lib/utils/compress-image";
+import { CountryPicker } from "@/components/ui/CountryPicker";
+import { TeamBadge } from "@/components/app/shared/TeamBadge";
+
+type ProfileUpdatePayloadInput = {
+  username: string;
+  displayName: string;
+  bio: string;
+  heardAbout: string;
+  link: string;
+  country: string;
+  githubUsername: string;
+  teamUrl: string;
+  isPublic: boolean;
+  emailNotifications: boolean;
+  emailMentionNotifications: boolean;
+  emailDmNotifications: boolean;
+  timezone: string;
+};
+
+export function buildProfileUpdatePayload(input: ProfileUpdatePayloadInput) {
+  return {
+    username: input.username.trim() || undefined,
+    display_name: input.displayName.trim() || null,
+    bio: input.bio.trim() || null,
+    heard_about: input.heardAbout.trim() || null,
+    link: input.link.trim() || null,
+    country: input.country || null,
+    github_username: input.githubUsername.trim() || null,
+    team_url: input.teamUrl.trim() || null,
+    is_public: input.isPublic,
+    email_notifications: input.emailNotifications,
+    email_mention_notifications: input.emailMentionNotifications,
+    email_dm_notifications: input.emailDmNotifications,
+    timezone: input.timezone,
+  };
+}
+
+export type SettingsProfile = User & { crew_count: number };
+
+export default function SettingsClient({
+  initialProfile,
+}: {
+  initialProfile: SettingsProfile;
+}) {
+  const router = useRouter();
+  const posthog = usePostHog();
+  const [profile, setProfile] = useState<SettingsProfile | null>(initialProfile);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const [username, setUsername] = useState(initialProfile.username ?? "");
+  const [displayName, setDisplayName] = useState(initialProfile.display_name ?? "");
+  const [bio, setBio] = useState(initialProfile.bio ?? "");
+  const [heardAbout, setHeardAbout] = useState(initialProfile.heard_about ?? "");
+  const [link, setLink] = useState(initialProfile.link ?? "");
+  const [country, setCountry] = useState(initialProfile.country ?? "");
+  const [githubUsername, setGithubUsername] = useState(initialProfile.github_username ?? "");
+  const [teamUrl, setTeamUrl] = useState(initialProfile.team_url ?? "");
+  const [clearingTeam, setClearingTeam] = useState(false);
+  const [isPublic, setIsPublic] = useState(initialProfile.is_public);
+  const [emailNotifications, setEmailNotifications] = useState(initialProfile.email_notifications ?? true);
+  const [emailMentionNotifications, setEmailMentionNotifications] = useState(initialProfile.email_mention_notifications ?? true);
+  const [emailDmNotifications, setEmailDmNotifications] = useState(initialProfile.email_dm_notifications ?? true);
+  const [timezone, setTimezone] = useState(initialProfile.timezone ?? "");
+  const crewCount = initialProfile.crew_count;
+  const [refCopied, setRefCopied] = useState(false);
+  const [avatarUploading, setAvatarUploading] = useState(false);
+  const avatarInputRef = useRef<HTMLInputElement>(null);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleteConfirm, setDeleteConfirm] = useState("");
+  const [deleting, setDeleting] = useState(false);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
+  const deleteInputRef = useRef<HTMLInputElement>(null);
+
+  async function handleAvatarUpload(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    if (avatarInputRef.current) avatarInputRef.current.value = "";
+
+    setAvatarUploading(true);
+    setError(null);
+
+    try {
+      const compressed = await compressImage(file);
+      const form = new FormData();
+      form.append("file", compressed);
+
+      const uploadRes = await fetch("/api/upload?bucket=avatars", {
+        method: "POST",
+        body: form,
+      });
+
+      if (!uploadRes.ok) {
+        const data = await uploadRes.json().catch(() => ({}));
+        throw new Error(data.error ?? "Upload failed");
+      }
+
+      const { url } = await uploadRes.json();
+
+      const patchRes = await fetch("/api/users/me", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ avatar_url: url }),
+      });
+
+      if (!patchRes.ok) {
+        const data = await patchRes.json().catch(() => ({}));
+        throw new Error(data.error ?? "Failed to save avatar");
+      }
+
+      setProfile((prev) => (prev ? { ...prev, avatar_url: url } : prev));
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setAvatarUploading(false);
+    }
+  }
+
+  async function handleSave(e: React.FormEvent) {
+    e.preventDefault();
+    setSaving(true);
+    setError(null);
+    setSaved(false);
+
+    const res = await fetch("/api/users/me", {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(buildProfileUpdatePayload({
+        username,
+        displayName,
+        bio,
+        heardAbout,
+        link,
+        country,
+        githubUsername,
+        teamUrl,
+        isPublic,
+        emailNotifications,
+        emailMentionNotifications,
+        emailDmNotifications,
+        timezone,
+      })),
+    });
+
+    if (!res.ok) {
+      const data = await res.json();
+      setError(data.error ?? "Failed to save");
+    } else {
+      const data = await res.json();
+      setProfile((prev) => (prev ? { ...prev, ...data } : data));
+      setTeamUrl(data.team_url ?? "");
+      setSaved(true);
+      posthog.capture("profile_saved", { is_public: isPublic });
+    }
+    setSaving(false);
+  }
+
+  async function handleClearTeam() {
+    setClearingTeam(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/users/me", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ team_url: null }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        setError(data.error ?? "Failed to clear team");
+        return;
+      }
+      const data = await res.json();
+      setProfile((prev) => (prev ? { ...prev, ...data } : data));
+      setTeamUrl("");
+    } finally {
+      setClearingTeam(false);
+    }
+  }
+
+  if (!profile) {
+    return <div className="px-[var(--app-page-padding-x)] py-6 text-sm text-muted">Unable to load profile.</div>;
+  }
+
+  return (
+    <>
+      <header className="sticky top-0 z-10 flex h-14 flex-wrap items-center justify-between gap-3 border-b border-border bg-background px-[var(--app-page-padding-x)]">
+        <h3 className="text-lg font-medium">Settings</h3>
+        <Link
+          href="/settings/import"
+          className="text-sm font-semibold text-accent hover:underline"
+        >
+          Import Usage Data
+        </Link>
+      </header>
+
+      <form onSubmit={handleSave} className="mx-auto max-w-lg px-[var(--app-page-padding-x)] py-8">
+        <div className="flex items-center gap-4 pb-6">
+          <div className="relative">
+            <Avatar
+              src={profile.avatar_url}
+              alt={profile.username ?? ""}
+              fallback={displayName || username || "?"}
+              size="lg"
+            />
+            <button
+              type="button"
+              onClick={() => avatarInputRef.current?.click()}
+              disabled={avatarUploading}
+              className="absolute -right-1 -bottom-1 flex size-8 items-center justify-center rounded-full border-2 border-background bg-subtle text-muted hover:bg-accent hover:text-accent-foreground disabled:opacity-60"
+              aria-label="Upload profile picture"
+            >
+              {avatarUploading ? (
+                <Loader2 size={14} className="animate-spin" />
+              ) : (
+                <Camera size={14} />
+              )}
+            </button>
+            <input
+              ref={avatarInputRef}
+              type="file"
+              accept="image/jpeg,image/png,image/webp,image/gif,image/heic,image/heif,.heic,.heif"
+              onChange={handleAvatarUpload}
+              className="hidden"
+              aria-label="Choose profile picture"
+            />
+          </div>
+          <div>
+            <p className="font-medium">{profile.display_name ?? profile.username ?? "No username set"}</p>
+            {profile.username && (
+              <p className="text-sm text-muted">@{profile.username}</p>
+            )}
+          </div>
+        </div>
+
+        {/* ── Profile ── */}
+        <fieldset className="space-y-6 border-t border-border pt-6">
+          <legend className="text-sm font-semibold uppercase tracking-widest text-muted">Profile</legend>
+
+          <div>
+            <label htmlFor="settings-username" className="mb-1 block text-xs font-semibold uppercase tracking-widest text-muted">
+              Username
+            </label>
+            <Input
+              id="settings-username"
+              name="username"
+              autoComplete="username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="your_username"
+              maxLength={20}
+              pattern="^[a-zA-Z0-9_]{3,20}$"
+            />
+            <p className="mt-1 text-xs text-muted">3-20 chars, alphanumeric + underscore</p>
+          </div>
+
+          <div>
+            <label htmlFor="settings-display-name" className="mb-1 block text-xs font-semibold uppercase tracking-widest text-muted">
+              Display Name
+            </label>
+            <Input
+              id="settings-display-name"
+              name="display_name"
+              autoComplete="name"
+              value={displayName}
+              onChange={(e) => setDisplayName(e.target.value)}
+            />
+          </div>
+
+          <div>
+            <label htmlFor="settings-bio" className="mb-1 block text-xs font-semibold uppercase tracking-widest text-muted">
+              Bio
+            </label>
+            <Textarea
+              id="settings-bio"
+              name="bio"
+              value={bio}
+              onChange={(e) => setBio(e.target.value)}
+              maxLength={160}
+              rows={2}
+              className="min-h-0"
+            />
+            <p className="mt-1 text-xs text-muted">{bio.length}/160</p>
+          </div>
+
+          <div>
+            <label htmlFor="settings-heard-about" className="mb-1 block text-xs font-semibold uppercase tracking-widest text-muted">
+              How did you hear about us?
+            </label>
+            <Textarea
+              id="settings-heard-about"
+              name="heard_about"
+              value={heardAbout}
+              onChange={(e) => setHeardAbout(e.target.value)}
+              placeholder="Friend, GitHub, X, newsletter, podcast..."
+              maxLength={500}
+              rows={3}
+              className="min-h-0"
+              aria-describedby="settings-heard-about-hint"
+            />
+            <div className="mt-1 flex items-center justify-between gap-3 text-xs text-muted">
+              <p id="settings-heard-about-hint" className="text-pretty">
+                Optional. This helps us understand where people are finding Straude.
+              </p>
+              <span>{heardAbout.length}/500</span>
+            </div>
+          </div>
+
+          <div>
+            <label htmlFor="settings-country" className="mb-1 block text-xs font-semibold uppercase tracking-widest text-muted">
+              Country
+            </label>
+            <CountryPicker
+              id="settings-country"
+              name="country"
+              value={country}
+              onChange={setCountry}
+            />
+          </div>
+
+          <div>
+            <label htmlFor="settings-website" className="mb-1 block text-xs font-semibold uppercase tracking-widest text-muted">
+              Website
+            </label>
+            <Input
+              id="settings-website"
+              name="url"
+              type="url"
+              autoComplete="url"
+              value={link}
+              onChange={(e) => setLink(e.target.value)}
+              placeholder="https://example.com"
+              maxLength={200}
+            />
+          </div>
+
+          <div>
+            <label htmlFor="settings-team-url" className="mb-1 block text-xs font-semibold uppercase tracking-widest text-muted">
+              Team
+            </label>
+            <Input
+              id="settings-team-url"
+              name="team_url"
+              type="url"
+              autoComplete="off"
+              value={teamUrl}
+              onChange={(e) => setTeamUrl(e.target.value)}
+              placeholder="https://anthropic.com"
+              maxLength={200}
+              aria-describedby="settings-team-url-hint"
+            />
+            <p id="settings-team-url-hint" className="mt-1 text-xs text-muted">
+              The URL of an organization you&rsquo;re affiliated with. Its logo
+              will appear next to your username across Straude.
+            </p>
+            {profile?.team_url && (
+              <div className="mt-2 flex items-center gap-2 rounded border border-border bg-subtle px-3 py-2">
+                <TeamBadge
+                  url={profile.team_url}
+                  faviconUrl={profile.team_favicon_url}
+                  size="md"
+                />
+                <span className="flex-1 truncate font-[family-name:var(--font-mono)] text-xs text-muted">
+                  {profile.team_url}
+                </span>
+                <button
+                  type="button"
+                  onClick={handleClearTeam}
+                  disabled={clearingTeam}
+                  aria-label="Clear team affiliation"
+                  className="inline-flex items-center gap-1 rounded-sm px-2 py-1 text-xs text-muted hover:text-foreground disabled:opacity-50"
+                >
+                  <XIcon size={12} />
+                  Clear
+                </button>
+              </div>
+            )}
+          </div>
+
+          <div>
+            <label htmlFor="settings-github" className="mb-1 block text-xs font-semibold uppercase tracking-widest text-muted">
+              GitHub Username
+            </label>
+            <Input
+              id="settings-github"
+              name="github_username"
+              value={githubUsername}
+              onChange={(e) => setGithubUsername(e.target.value)}
+            />
+          </div>
+
+          <div>
+            <label htmlFor="settings-timezone" className="mb-1 block text-xs font-semibold uppercase tracking-widest text-muted">
+              Timezone
+            </label>
+            <Input
+              id="settings-timezone"
+              name="timezone"
+              value={timezone}
+              onChange={(e) => setTimezone(e.target.value)}
+            />
+          </div>
+
+          {username && (
+            <div>
+              <p className="mb-1 text-xs font-semibold uppercase tracking-widest text-muted">Referral Link</p>
+              <div className="flex items-center gap-2">
+                <code className="flex-1 overflow-x-auto rounded border border-border bg-subtle px-3 py-2 font-[family-name:var(--font-mono)] text-sm">
+                  straude.com/join/{username}
+                </code>
+                <button
+                  type="button"
+                  onClick={() => {
+                    navigator.clipboard.writeText(`https://straude.com/join/${username}`);
+                    setRefCopied(true);
+                    setTimeout(() => setRefCopied(false), 2000);
+                    posthog.capture("referral_link_copied", { username });
+                  }}
+                  className="inline-flex items-center gap-1.5 border border-border px-3 py-2 text-sm font-semibold hover:bg-subtle"
+                  style={{ borderRadius: 4 }}
+                >
+                  {refCopied ? <Check size={14} className="text-accent" /> : <Copy size={14} />}
+                  {refCopied ? "Copied" : "Copy"}
+                </button>
+              </div>
+              <p className="mt-1 text-xs text-muted">
+                Share this link to invite others.{crewCount > 0 ? ` ${crewCount} recruited so far.` : ""}
+              </p>
+            </div>
+          )}
+        </fieldset>
+
+        {/* ── Notifications ── */}
+        <fieldset className="mt-8 space-y-4 border-t border-border pt-6">
+          <legend className="text-sm font-semibold uppercase tracking-widest text-muted">Notifications</legend>
+
+          <div className="space-y-1.5">
+            <div className="flex items-center gap-3">
+              <input
+                type="checkbox"
+                checked={emailNotifications}
+                onChange={(e) => setEmailNotifications(e.target.checked)}
+                id="email_notifications"
+                className="accent-accent"
+              />
+              <label htmlFor="email_notifications" className="text-sm font-medium">
+                Comment emails
+              </label>
+            </div>
+            <p className="pl-7 text-xs text-muted">
+              {emailNotifications
+                ? "You\u2019ll receive an email when someone comments on your posts."
+                : "Email notifications for comments are turned off."}
+            </p>
+          </div>
+
+          <div className="space-y-1.5">
+            <div className="flex items-center gap-3">
+              <input
+                type="checkbox"
+                checked={emailMentionNotifications}
+                onChange={(e) => setEmailMentionNotifications(e.target.checked)}
+                id="email_mention_notifications"
+                className="accent-accent"
+              />
+              <label htmlFor="email_mention_notifications" className="text-sm font-medium">
+                Mention emails
+              </label>
+            </div>
+            <p className="pl-7 text-xs text-muted">
+              {emailMentionNotifications
+                ? "You\u2019ll receive an email when someone @mentions you in a post or comment."
+                : "Email notifications for mentions are turned off."}
+            </p>
+          </div>
+
+          <div className="space-y-1.5">
+            <div className="flex items-center gap-3">
+              <input
+                type="checkbox"
+                checked={emailDmNotifications}
+                onChange={(e) => setEmailDmNotifications(e.target.checked)}
+                id="email_dm_notifications"
+                className="accent-accent"
+              />
+              <label htmlFor="email_dm_notifications" className="text-sm font-medium">
+                Direct message emails
+              </label>
+            </div>
+            <p className="pl-7 text-xs text-muted">
+              {emailDmNotifications
+                ? "You\u2019ll receive an email when someone sends you a direct message."
+                : "Email notifications for direct messages are turned off."}
+            </p>
+          </div>
+        </fieldset>
+
+        {/* ── Privacy & Account ── */}
+        <fieldset className="mt-8 space-y-4 border-t border-border pt-6">
+          <legend className="text-sm font-semibold uppercase tracking-widest text-muted">Privacy &amp; Account</legend>
+
+          <div className="space-y-1.5">
+            <div className="flex items-center gap-3">
+              <input
+                type="checkbox"
+                checked={isPublic}
+                onChange={(e) => setIsPublic(e.target.checked)}
+                id="is_public"
+                className="accent-accent"
+              />
+              <label htmlFor="is_public" className="text-sm font-medium">
+                Public profile
+              </label>
+            </div>
+            <p className="pl-7 text-xs text-muted">
+              {isPublic
+                ? "Your profile, posts, and stats are visible to everyone. You appear on the leaderboard."
+                : "Your profile and activity are only visible to your followers. You will not appear on the leaderboard."}
+            </p>
+          </div>
+        </fieldset>
+
+        <div className="mt-8 space-y-4">
+          {error && <p className="text-sm text-error">{error}</p>}
+          {saved && <p className="text-sm text-accent">Saved successfully.</p>}
+
+          <Button type="submit" disabled={saving} className="w-full py-3">
+            {saving ? "Saving\u2026" : "Save Changes"}
+          </Button>
+
+          <div className="border-t border-border pt-6">
+            <button
+              type="button"
+              onClick={async () => {
+                const supabase = createClient();
+                await supabase.auth.signOut();
+                router.push("/");
+              }}
+              className="flex items-center gap-2 text-sm text-muted hover:text-foreground"
+            >
+              <LogOut size={16} />
+              Log out
+            </button>
+          </div>
+        </div>
+
+        {/* ── Delete Account ── */}
+        <fieldset className="mt-12 space-y-4">
+          <legend className="text-2xl font-semibold text-error">Delete account</legend>
+          <hr className="border-error/30" />
+
+          <p className="text-sm">
+            Once you delete your account, all of your data&mdash;usage logs, posts, comments, and profile&mdash;will be permanently removed. This cannot be undone.
+          </p>
+
+          <button
+            type="button"
+            onClick={() => {
+              setDeleteConfirm("");
+              setDeleteError(null);
+              setDeleteOpen(true);
+            }}
+            className="rounded-[4px] border border-error/30 px-5 py-2.5 text-sm font-semibold text-error transition-colors hover:bg-error/10"
+          >
+            Delete your account
+          </button>
+        </fieldset>
+      </form>
+
+      {deleteOpen &&
+        createPortal(
+          <DeleteAccountDialog
+            username={username}
+            confirmValue={deleteConfirm}
+            onConfirmChange={setDeleteConfirm}
+            deleting={deleting}
+            error={deleteError}
+            inputRef={deleteInputRef}
+            onClose={() => setDeleteOpen(false)}
+            onDelete={async () => {
+              setDeleting(true);
+              setDeleteError(null);
+
+              const res = await fetch("/api/users/me", {
+                method: "DELETE",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ username }),
+              });
+
+              if (!res.ok) {
+                const data = await res.json().catch(() => ({}));
+                setDeleteError(data.error ?? "Failed to delete account");
+                setDeleting(false);
+                return;
+              }
+
+              const supabase = createClient();
+              await supabase.auth.signOut();
+              router.push("/");
+            }}
+          />,
+          document.body,
+        )}
+    </>
+  );
+}
+
+function DeleteAccountDialog({
+  username,
+  confirmValue,
+  onConfirmChange,
+  deleting,
+  error,
+  inputRef,
+  onClose,
+  onDelete,
+}: {
+  username: string;
+  confirmValue: string;
+  onConfirmChange: (value: string) => void;
+  deleting: boolean;
+  error: string | null;
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  onClose: () => void;
+  onDelete: () => void;
+}) {
+  const confirmSentence = `I, ${username}, wish to delete my Straude account. I understand this cannot be undone.`;
+  const canDelete = confirmValue === confirmSentence && username.length > 0;
+
+  useEffect(() => {
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    inputRef.current?.focus();
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, [inputRef]);
+
+  useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape" && !deleting) {
+        onClose();
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose, deleting]);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+      onClick={(event) => {
+        if (event.target === event.currentTarget && !deleting) onClose();
+      }}
+    >
+      <div
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="delete-account-title"
+        aria-describedby="delete-account-desc"
+        className="w-full max-w-md rounded-[8px] border border-border bg-background shadow-xl"
+      >
+        <div className="border-b border-border px-5 py-4">
+          <h2 id="delete-account-title" className="text-lg font-semibold text-error">
+            Are you sure you want to do this?
+          </h2>
+        </div>
+
+        <div className="space-y-4 px-5 py-5">
+          <p id="delete-account-desc" className="text-sm text-muted">
+            This will permanently delete your account and all associated data including usage logs, posts, comments, followers, and your profile. <strong className="text-foreground">This action cannot be undone.</strong>
+          </p>
+
+          <div>
+            <label htmlFor="delete-confirm-input" className="mb-1.5 block text-sm">
+              To confirm, type the following statement below:
+            </label>
+            <p className="mb-2 select-all rounded border border-border bg-subtle px-3 py-2 font-[family-name:var(--font-mono)] text-xs text-foreground">
+              {confirmSentence}
+            </p>
+            <Input
+              ref={inputRef}
+              id="delete-confirm-input"
+              value={confirmValue}
+              onChange={(e) => onConfirmChange(e.target.value)}
+              placeholder="Type the sentence above to confirm"
+              autoComplete="off"
+              spellCheck={false}
+              disabled={deleting}
+            />
+          </div>
+
+          {error && <p className="text-sm text-error">{error}</p>}
+        </div>
+
+        <div className="flex items-center justify-end gap-3 border-t border-border px-5 py-4">
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={deleting}
+            className="rounded-[4px] border border-border px-4 py-2 text-sm font-semibold transition-colors hover:bg-subtle disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={onDelete}
+            disabled={!canDelete || deleting}
+            className="rounded-[4px] bg-error px-4 py-2 text-sm font-semibold text-white transition-[filter,opacity] hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {deleting ? "Deleting\u2026" : "Delete this account"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/app/shared/RouteLoading.tsx b/apps/web/components/app/shared/RouteLoading.tsx
new file mode 100644
index 00000000..ea7e299e
--- /dev/null
+++ b/apps/web/components/app/shared/RouteLoading.tsx
@@ -0,0 +1,35 @@
+import { Skeleton } from "@/components/ui/Skeleton";
+
+export function RouteLoading({
+  label,
+  rows = 3,
+}: {
+  label: string;
+  rows?: number;
+}) {
+  return (
+    <section role="status" aria-live="polite" aria-busy="true">
+      <span className="sr-only">Loading {label}</span>
+      <div aria-hidden="true">
+        <header className="flex h-14 items-center border-b border-border px-[var(--app-page-padding-x)]">
+          <Skeleton className="h-5 w-28" />
+        </header>
+        <div className="space-y-5 px-[var(--app-page-padding-x)] py-6">
+          {Array.from({ length: rows }, (_, index) => (
+            <div key={index} className="space-y-3 border-b border-border pb-5">
+              <div className="flex items-center gap-3">
+                <Skeleton className="size-9 shrink-0 rounded-full" />
+                <div className="flex-1 space-y-2">
+                  <Skeleton className="h-4 w-32" />
+                  <Skeleton className="h-3 w-20" />
+                </div>
+              </div>
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-2/3" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/components/dev/DevAgentation.tsx b/apps/web/components/dev/DevAgentation.tsx
new file mode 100644
index 00000000..373d46d3
--- /dev/null
+++ b/apps/web/components/dev/DevAgentation.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const Agentation = dynamic(
+  () => import("agentation").then((module) => module.Agentation),
+  { ssr: false },
+);
+
+export function DevAgentation() {
+  if (process.env.NODE_ENV !== "development") return null;
+  return <Agentation />;
+}
diff --git a/apps/web/lib/usage/aggregate-device-rows.ts b/apps/web/lib/usage/aggregate-device-rows.ts
new file mode 100644
index 00000000..3af893c2
--- /dev/null
+++ b/apps/web/lib/usage/aggregate-device-rows.ts
@@ -0,0 +1,61 @@
+import type { ModelBreakdownEntry, UsageCollectorMeta } from "@/types";
+
+export interface DeviceUsageRow {
+  cost_usd: number;
+  input_tokens: number;
+  output_tokens: number;
+  reasoning_output_tokens?: number;
+  cache_creation_tokens: number;
+  cache_read_tokens: number;
+  total_tokens: number;
+  models: string[];
+  model_breakdown: ModelBreakdownEntry[] | null;
+  collector_meta?: UsageCollectorMeta | null;
+}
+
+export function aggregateDeviceRows(rows: DeviceUsageRow[]) {
+  let cost_usd = 0;
+  let input_tokens = 0;
+  let output_tokens = 0;
+  let reasoning_output_tokens = 0;
+  let cache_creation_tokens = 0;
+  let cache_read_tokens = 0;
+  let total_tokens = 0;
+  const modelsSet = new Set<string>();
+  const breakdownMap = new Map<string, number>();
+
+  for (const row of rows) {
+    cost_usd += Number(row.cost_usd);
+    input_tokens += Number(row.input_tokens);
+    output_tokens += Number(row.output_tokens);
+    reasoning_output_tokens += Number(row.reasoning_output_tokens ?? 0);
+    cache_creation_tokens += Number(row.cache_creation_tokens ?? 0);
+    cache_read_tokens += Number(row.cache_read_tokens ?? 0);
+    total_tokens += Number(row.total_tokens);
+
+    for (const model of row.models ?? []) modelsSet.add(model);
+    for (const entry of row.model_breakdown ?? []) {
+      breakdownMap.set(
+        entry.model,
+        (breakdownMap.get(entry.model) ?? 0) + entry.cost_usd,
+      );
+    }
+  }
+
+  const model_breakdown: ModelBreakdownEntry[] = [...breakdownMap].map(
+    ([model, cost_usd]) => ({ model, cost_usd }),
+  );
+
+  return {
+    cost_usd,
+    input_tokens,
+    output_tokens,
+    reasoning_output_tokens,
+    cache_creation_tokens,
+    cache_read_tokens,
+    total_tokens,
+    models: [...modelsSet],
+    model_breakdown: model_breakdown.length > 0 ? model_breakdown : null,
+    session_count: rows.length,
+  };
+}
diff --git a/apps/web/next.config.ts b/apps/web/next.config.ts
index 62657cf6..b5d3b058 100644
--- a/apps/web/next.config.ts
+++ b/apps/web/next.config.ts
@@ -1,4 +1,11 @@
 import type { NextConfig } from "next";
+import bundleAnalyzer from "@next/bundle-analyzer";
+
+const withBundleAnalyzer = bundleAnalyzer({
+  enabled: process.env.ANALYZE === "1",
+  analyzerMode: "json",
+  openAnalyzer: false,
+});
 
 const scriptSrc = [
   "script-src 'self' 'unsafe-inline'",
@@ -83,4 +90,4 @@ const nextConfig: NextConfig = {
   },
 };
 
-export default nextConfig;
+export default withBundleAnalyzer(nextConfig);
diff --git a/apps/web/package.json b/apps/web/package.json
index e2bd772e..1b93a55f 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "next dev --turbopack",
     "build": "next build",
+    "analyze": "ANALYZE=1 next build --webpack",
     "start": "next start",
     "lint": "eslint",
     "generate:og": "bun run ./scripts/generate-og.ts",
@@ -46,6 +47,7 @@
     "tailwind-merge": "^3"
   },
   "devDependencies": {
+    "@next/bundle-analyzer": "16.2.6",
     "@playwright/test": "^1.58.2",
     "@tailwindcss/postcss": "^4",
     "@testing-library/jest-dom": "^6.9.1",
diff --git a/bun.lock b/bun.lock
index 90754e9e..928312e5 100644
--- a/bun.lock
+++ b/bun.lock
@@ -46,6 +46,7 @@
         "tailwind-merge": "^3",
       },
       "devDependencies": {
+        "@next/bundle-analyzer": "16.2.6",
         "@playwright/test": "^1.58.2",
         "@tailwindcss/postcss": "^4",
         "@testing-library/jest-dom": "^6.9.1",
@@ -200,6 +201,8 @@
 
     "@csstools/css-tokenizer": ["@csstools/css-tokenizer@4.0.0", "", {}, "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA=="],
 
+    "@discoveryjs/json-ext": ["@discoveryjs/json-ext@0.5.7", "", {}, "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw=="],
+
     "@emnapi/core": ["@emnapi/core@1.10.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.1", "tslib": "^2.4.0" } }, "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw=="],
 
     "@emnapi/runtime": ["@emnapi/runtime@1.8.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg=="],
@@ -360,6 +363,8 @@
 
     "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.4", "", { "dependencies": { "@tybys/wasm-util": "^0.10.1" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" } }, "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow=="],
 
+    "@next/bundle-analyzer": ["@next/bundle-analyzer@16.2.6", "", { "dependencies": { "webpack-bundle-analyzer": "4.10.1" } }, "sha512-amPkVtHCTJAdBwyhhl5+qztHk24O4JlASgrWqh15AmnYi74apfZR46NGC0u4pM6BMAU1mYld4WdzD3cRBP3dOA=="],
+
     "@next/env": ["@next/env@16.2.6", "", {}, "sha512-gd8HoHN4ufj73WmR3JmVolrpJR47ILK6LouP5xElPglaVxir6e1a7VzvTvDWkOoPXT9rkkTzyCxBu4yeZfZwcw=="],
 
     "@next/eslint-plugin-next": ["@next/eslint-plugin-next@16.2.6", "", { "dependencies": { "fast-glob": "3.3.1" } }, "sha512-Z8l6o4JWKUl755x4R+wogD86KPeU+Ckw4K+SYG4kHeOJtRenDeK+OSbGcqZpDtbwn9DsJVdir2UxmwXuinUbUw=="],
@@ -394,6 +399,8 @@
 
     "@playwright/test": ["@playwright/test@1.58.2", "", { "dependencies": { "playwright": "1.58.2" }, "bin": { "playwright": "cli.js" } }, "sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA=="],
 
+    "@polka/url": ["@polka/url@1.0.0-next.29", "", {}, "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww=="],
+
     "@posthog/core": ["@posthog/core@1.30.14", "", { "dependencies": { "@posthog/types": "1.383.3" } }, "sha512-cC0che/17kP6qMIMgdmxsoz3h8Jar8knQfDM8WqQwVacSeWXkrwkemoV7S5tCGmgTuRTTsdigirs9HiBXHQ/dA=="],
 
     "@posthog/types": ["@posthog/types@1.383.3", "", {}, "sha512-N4jtmLaJxzjQ/C0UHnF0igQPSwUqwScPDv9ePGjKCfDomIEUcO3+c6pBrjTp7woxuMQ49BmyM/pV4/SOBPpe0Q=="],
@@ -770,10 +777,12 @@
 
     "abort-controller": ["abort-controller@3.0.0", "", { "dependencies": { "event-target-shim": "^5.0.0" } }, "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg=="],
 
-    "acorn": ["acorn@8.15.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg=="],
+    "acorn": ["acorn@8.16.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw=="],
 
     "acorn-jsx": ["acorn-jsx@5.3.2", "", { "peerDependencies": { "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="],
 
+    "acorn-walk": ["acorn-walk@8.3.5", "", { "dependencies": { "acorn": "^8.11.0" } }, "sha512-HEHNfbars9v4pgpW6SO1KSPkfoS0xVOM/9UzkJltjlsHZmJasxg8aXkuZa7SMf8vKGIBhpUsPluQSqhJFCqebw=="],
+
     "agent-base": ["agent-base@7.1.4", "", {}, "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ=="],
 
     "agentation": ["agentation@2.2.1", "", { "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" }, "optionalPeers": ["react", "react-dom"] }, "sha512-yV9P1DggI7M3SRaRwLwt+xqE5lXqg5l8xtqCr8KzEkbnH8Wa6eRATU97uKnD7cC8FrsJP62Mmw0Xf5Xi5KV50Q=="],
@@ -892,7 +901,7 @@
 
     "comma-separated-tokens": ["comma-separated-tokens@2.0.3", "", {}, "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg=="],
 
-    "commander": ["commander@4.1.1", "", {}, "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="],
+    "commander": ["commander@7.2.0", "", {}, "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="],
 
     "confbox": ["confbox@0.1.8", "", {}, "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w=="],
 
@@ -948,6 +957,8 @@
 
     "data-view-byte-offset": ["data-view-byte-offset@1.0.1", "", { "dependencies": { "call-bound": "^1.0.2", "es-errors": "^1.3.0", "is-data-view": "^1.0.1" } }, "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ=="],
 
+    "debounce": ["debounce@1.2.1", "", {}, "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="],
+
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
     "decimal.js": ["decimal.js@10.6.0", "", {}, "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg=="],
@@ -988,6 +999,8 @@
 
     "dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],
 
+    "duplexer": ["duplexer@0.1.2", "", {}, "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="],
+
     "electron-to-chromium": ["electron-to-chromium@1.5.286", "", {}, "sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A=="],
 
     "emoji-regex": ["emoji-regex@9.2.2", "", {}, "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="],
@@ -1144,6 +1157,8 @@
 
     "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
 
+    "gzip-size": ["gzip-size@6.0.0", "", { "dependencies": { "duplexer": "^0.1.2" } }, "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q=="],
+
     "has-bigints": ["has-bigints@1.1.0", "", {}, "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg=="],
 
     "has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="],
@@ -1174,6 +1189,8 @@
 
     "html-encoding-sniffer": ["html-encoding-sniffer@6.0.0", "", { "dependencies": { "@exodus/bytes": "^1.6.0" } }, "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg=="],
 
+    "html-escaper": ["html-escaper@2.0.2", "", {}, "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg=="],
+
     "html-to-text": ["html-to-text@9.0.5", "", { "dependencies": { "@selderee/plugin-htmlparser2": "^0.11.0", "deepmerge": "^4.3.1", "dom-serializer": "^2.0.0", "htmlparser2": "^8.0.2", "selderee": "^0.11.0" } }, "sha512-qY60FjREgVZL03vJU6IfMV4GDjGBIoOyvuFdpBDIX9yTlDw0TjxVBQp+P8NvpdIXNJvfWBTNul7fsAQJq2FNpg=="],
 
     "html-url-attributes": ["html-url-attributes@3.0.1", "", {}, "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ=="],
@@ -1254,6 +1271,8 @@
 
     "is-plain-obj": ["is-plain-obj@4.1.0", "", {}, "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg=="],
 
+    "is-plain-object": ["is-plain-object@5.0.0", "", {}, "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q=="],
+
     "is-potential-custom-element-name": ["is-potential-custom-element-name@1.0.1", "", {}, "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="],
 
     "is-regex": ["is-regex@1.2.1", "", { "dependencies": { "call-bound": "^1.0.2", "gopd": "^1.2.0", "has-tostringtag": "^1.0.2", "hasown": "^2.0.2" } }, "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g=="],
@@ -1456,6 +1475,8 @@
 
     "motion-utils": ["motion-utils@12.29.2", "", {}, "sha512-G3kc34H2cX2gI63RqU+cZq+zWRRPSsNIOjpdl9TN4AQwC4sgwYPl/Q/Obf/d53nOm569T0fYK+tcoSV50BWx8A=="],
 
+    "mrmime": ["mrmime@2.0.1", "", {}, "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="],
+
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
     "mz": ["mz@2.7.0", "", { "dependencies": { "any-promise": "^1.0.0", "object-assign": "^4.0.1", "thenify-all": "^1.0.0" } }, "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q=="],
@@ -1494,6 +1515,8 @@
 
     "onetime": ["onetime@5.1.2", "", { "dependencies": { "mimic-fn": "^2.1.0" } }, "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg=="],
 
+    "opener": ["opener@1.5.2", "", { "bin": { "opener": "bin/opener-bin.js" } }, "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A=="],
+
     "optionator": ["optionator@0.9.4", "", { "dependencies": { "deep-is": "^0.1.3", "fast-levenshtein": "^2.0.6", "levn": "^0.4.1", "prelude-ls": "^1.2.1", "type-check": "^0.4.0", "word-wrap": "^1.2.5" } }, "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g=="],
 
     "own-keys": ["own-keys@1.0.1", "", { "dependencies": { "get-intrinsic": "^1.2.6", "object-keys": "^1.1.1", "safe-push-apply": "^1.0.0" } }, "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg=="],
@@ -1690,6 +1713,8 @@
 
     "signal-exit": ["signal-exit@3.0.7", "", {}, "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="],
 
+    "sirv": ["sirv@2.0.4", "", { "dependencies": { "@polka/url": "^1.0.0-next.24", "mrmime": "^2.0.0", "totalist": "^3.0.0" } }, "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ=="],
+
     "slice-ansi": ["slice-ansi@8.0.0", "", { "dependencies": { "ansi-styles": "^6.2.3", "is-fullwidth-code-point": "^5.1.0" } }, "sha512-stxByr12oeeOyY2BlviTNQlYV5xOj47GirPr4yA1hE9JCtxfQN0+tVbkxwCtYDQWhEKWFHsEK48ORg5jrouCAg=="],
 
     "source-map": ["source-map@0.7.6", "", {}, "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ=="],
@@ -1784,6 +1809,8 @@
 
     "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],
 
+    "totalist": ["totalist@3.0.1", "", {}, "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ=="],
+
     "tough-cookie": ["tough-cookie@6.0.0", "", { "dependencies": { "tldts": "^7.0.5" } }, "sha512-kXuRi1mtaKMrsLUxz3sQYvVl37B0Ns6MzfrtV5DvJceE9bPyspOqk9xxv7XbZWcfLWbFmm997vl83qUWVJA64w=="],
 
     "tr46": ["tr46@6.0.0", "", { "dependencies": { "punycode": "^2.3.1" } }, "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw=="],
@@ -1870,6 +1897,8 @@
 
     "webidl-conversions": ["webidl-conversions@8.0.1", "", {}, "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ=="],
 
+    "webpack-bundle-analyzer": ["webpack-bundle-analyzer@4.10.1", "", { "dependencies": { "@discoveryjs/json-ext": "0.5.7", "acorn": "^8.0.4", "acorn-walk": "^8.0.0", "commander": "^7.2.0", "debounce": "^1.2.1", "escape-string-regexp": "^4.0.0", "gzip-size": "^6.0.0", "html-escaper": "^2.0.2", "is-plain-object": "^5.0.0", "opener": "^1.5.2", "picocolors": "^1.0.0", "sirv": "^2.0.3", "ws": "^7.3.1" }, "bin": { "webpack-bundle-analyzer": "lib/bin/analyzer.js" } }, "sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ=="],
+
     "whatwg-mimetype": ["whatwg-mimetype@5.0.0", "", {}, "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw=="],
 
     "whatwg-url": ["whatwg-url@16.0.0", "", { "dependencies": { "@exodus/bytes": "^1.11.0", "tr46": "^6.0.0", "webidl-conversions": "^8.0.1" } }, "sha512-9CcxtEKsf53UFwkSUZjG+9vydAsFO4lFHBpJUtjBcoJOCJpKnSJNwCw813zrYJHpCJ7sgfbtOe0V5Ku7Pa1XMQ=="],
@@ -1966,6 +1995,8 @@
 
     "eslint-plugin-react/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
 
+    "espree/acorn": ["acorn@8.15.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg=="],
+
     "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 
     "htmlparser2/entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],
@@ -1974,8 +2005,6 @@
 
     "mdast-util-find-and-replace/escape-string-regexp": ["escape-string-regexp@5.0.0", "", {}, "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw=="],
 
-    "mlly/acorn": ["acorn@8.16.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw=="],
-
     "node-fetch/whatwg-url": ["whatwg-url@5.0.0", "", { "dependencies": { "tr46": "~0.0.3", "webidl-conversions": "^3.0.0" } }, "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw=="],
 
     "parse-entities/@types/unist": ["@types/unist@2.0.11", "", {}, "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="],
@@ -2000,6 +2029,8 @@
 
     "strip-ansi/ansi-regex": ["ansi-regex@6.2.2", "", {}, "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg=="],
 
+    "sucrase/commander": ["commander@4.1.1", "", {}, "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="],
+
     "tsconfig-paths/json5": ["json5@1.0.2", "", { "dependencies": { "minimist": "^1.2.0" }, "bin": { "json5": "lib/cli.js" } }, "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA=="],
 
     "tsup/tinyexec": ["tinyexec@0.3.2", "", {}, "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA=="],
diff --git a/docs/perf/bundles.md b/docs/perf/bundles.md
new file mode 100644
index 00000000..50989edc
--- /dev/null
+++ b/docs/perf/bundles.md
@@ -0,0 +1,61 @@
+# Client bundle baseline
+
+Captured on 2026-07-18 with Next.js 16.2.6 and
+`@next/bundle-analyzer` 16.2.6.
+
+## Reproduce
+
+```bash
+bun --cwd apps/web run analyze
+```
+
+The command sets `ANALYZE=1`, runs the webpack production build required by
+`@next/bundle-analyzer`, and writes gitignored JSON reports to
+`apps/web/.next/analyze/`. The normal `bun run build` remains on Turbopack.
+
+The table reports gzip bytes for the union of each page entrypoint, the root
+App Router entrypoint, and the authenticated app layout entrypoint. This is an
+approximation of route first-load JavaScript from the analyzer graph, with
+shared assets deduplicated.
+
+| Authenticated route | Before M6 | After M6 | Delta |
+|---|---:|---:|---:|
+| `/feed` | 360.7 KiB | 321.6 KiB | -39.1 KiB |
+| `/leaderboard` | 369.7 KiB | 330.6 KiB | -39.1 KiB |
+| `/u/[username]` | 434.1 KiB | 395.0 KiB | -39.1 KiB |
+| `/post/[id]` | 391.5 KiB | 352.5 KiB | -39.1 KiB |
+| `/notifications` | 342.3 KiB | 303.2 KiB | -39.1 KiB |
+| `/messages` | 348.8 KiB | 309.8 KiB | -39.1 KiB |
+| `/prompts` | 339.5 KiB | 300.4 KiB | -39.1 KiB |
+| `/recap` | 343.9 KiB | 304.8 KiB | -39.0 KiB |
+| `/settings` | 350.8 KiB | 311.5 KiB | -39.2 KiB |
+| `/search` | 342.0 KiB | 302.9 KiB | -39.1 KiB |
+
+## Findings and decisions
+
+- `agentation` was the largest avoidable initial module at 40.9 KiB gzip. A
+  static import put the development-only toolbar into every production route
+  despite the render-time `NODE_ENV` guard. It now sits behind a dynamic client
+  boundary: zero Agentation assets are initial, and its chunk is requested only
+  when the development toolbar renders.
+- The 329.7 KiB gzip `heic2any` chunk is the largest generated client asset, but
+  it is already dynamically imported only after native decoding fails for a
+  user-selected HEIC/HEIF upload. Keeping it lazy preserves upload support
+  without charging initial routes for its WASM bundle.
+- Other heavy route-specific dependencies were already split correctly:
+  `react-markdown` is a lazy 32.8 KiB gzip chunk, the command palette/kbar path
+  is lazy (about 19.2 KiB across two chunks), and the prompt submission modal
+  is lazy (2.8 KiB).
+- PostHog remains the largest product-owned shared integration at about 63.2
+  KiB gzip. It is consent-aware and shared across the authenticated app, so M6
+  does not change its initialization contract. Further reduction would require
+  a separate analytics-loading decision and production RUM validation.
+- Moving settings, search, card, and the initial weekly recap read to the server
+  removes client fetch-on-mount waterfalls. Their JavaScript deltas are small by
+  design; the primary gain is useful HTML on the first response. The authenticated
+  recap harness improved from 552ms LCP to 296ms while preserving period and
+  background interactions.
+
+The analyzer emits an existing webpack warning from server-side
+`heic-convert`/`libheif-js` in the upload route. Both the analyzer build and the
+normal Turbopack production build complete successfully.

From e65e177e69e4f48c586580942889fbed645d83c2 Mon Sep 17 00:00:00 2001
From: Oscar Hong <oscar.hong2015@gmail.com>
Date: Sat, 18 Jul 2026 10:11:32 -0700
Subject: [PATCH 5/9] add cached leaderboard and profile snapshots

---
 apps/web/__tests__/api/leaderboard.test.ts    |  47 +-
 apps/web/__tests__/api/right-sidebar.test.ts  | 110 ++++
 .../flows/leaderboard-ranking.test.ts         |  80 ++-
 .../flows/privacy-visibility.test.ts          |  14 +
 .../__tests__/flows/signup-to-feed.test.ts    |  24 +-
 .../__tests__/lib/leaderboard-data.test.ts    |  79 +++
 apps/web/__tests__/lib/radar.test.ts          |  62 +++
 .../__tests__/unit/migration-safety.test.ts   |  91 ++++
 apps/web/app/(app)/leaderboard/page.tsx       |  30 +-
 apps/web/app/api/app/right-sidebar/route.ts   | 117 ++---
 apps/web/app/api/leaderboard/route.ts         |  84 +--
 apps/web/lib/data/leaderboard.ts              | 143 +++++
 apps/web/lib/data/right-sidebar.ts            | 105 ++++
 apps/web/lib/radar.ts                         | 204 +-------
 docs/perf/DB.md                               |  58 ++
 ...eaderboard_snapshots_and_profile_stats.sql | 494 ++++++++++++++++++
 ...20_add_leaderboard_snapshot_user_index.sql |   5 +
 17 files changed, 1380 insertions(+), 367 deletions(-)
 create mode 100644 apps/web/__tests__/api/right-sidebar.test.ts
 create mode 100644 apps/web/__tests__/lib/leaderboard-data.test.ts
 create mode 100644 apps/web/__tests__/lib/radar.test.ts
 create mode 100644 apps/web/lib/data/leaderboard.ts
 create mode 100644 apps/web/lib/data/right-sidebar.ts
 create mode 100644 docs/perf/DB.md
 create mode 100644 supabase/migrations/20260718165137_add_leaderboard_snapshots_and_profile_stats.sql
 create mode 100644 supabase/migrations/20260718170920_add_leaderboard_snapshot_user_index.sql

diff --git a/apps/web/__tests__/api/leaderboard.test.ts b/apps/web/__tests__/api/leaderboard.test.ts
index 44bb1bfc..c9f43ff4 100644
--- a/apps/web/__tests__/api/leaderboard.test.ts
+++ b/apps/web/__tests__/api/leaderboard.test.ts
@@ -1,5 +1,21 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 
+const leaderboardMocks = vi.hoisted(() => ({
+  loadEntries: vi.fn(),
+  loadRank: vi.fn(),
+  getAuthIdentity: vi.fn(),
+}));
+
+vi.mock("@/lib/supabase/auth", () => ({
+  getAuthIdentity: leaderboardMocks.getAuthIdentity,
+}));
+
+vi.mock("@/lib/data/leaderboard", () => ({
+  LEADERBOARD_PERIODS: ["day", "week", "month", "all_time"],
+  loadLeaderboardEntries: leaderboardMocks.loadEntries,
+  loadLeaderboardRank: leaderboardMocks.loadRank,
+}));
+
 vi.mock("@/lib/supabase/server", () => ({
   createClient: vi.fn(),
 }));
@@ -106,6 +122,9 @@ function mockSupabase(opts: {
 
 beforeEach(() => {
   vi.clearAllMocks();
+  leaderboardMocks.loadEntries.mockResolvedValue([]);
+  leaderboardMocks.loadRank.mockResolvedValue(null);
+  leaderboardMocks.getAuthIdentity.mockResolvedValue(null);
 });
 
 describe("GET /api/leaderboard", () => {
@@ -114,6 +133,7 @@ describe("GET /api/leaderboard", () => {
       { user_id: "u1", total_cost: 100, username: "alice" },
       { user_id: "u2", total_cost: 50, username: "bob" },
     ];
+    leaderboardMocks.loadEntries.mockResolvedValue(entries);
 
     // Use a simple mock where the main query returns entries
     const client: Record<string, any> = {
@@ -175,8 +195,12 @@ describe("GET /api/leaderboard", () => {
 
     await GET(makeRequest());
 
-    // The from() call should use leaderboard_weekly view
-    expect(client.from).toHaveBeenCalledWith("leaderboard_weekly");
+    expect(leaderboardMocks.loadEntries).toHaveBeenCalledWith({
+      period: "week",
+      region: null,
+      cursor: null,
+      limit: 50,
+    });
   });
 
   it("filters by period", async () => {
@@ -200,7 +224,12 @@ describe("GET /api/leaderboard", () => {
     (getServiceClient as any).mockReturnValue(client);
 
     await GET(makeRequest({ period: "month" }));
-    expect(client.from).toHaveBeenCalledWith("leaderboard_monthly");
+    expect(leaderboardMocks.loadEntries).toHaveBeenCalledWith({
+      period: "month",
+      region: null,
+      cursor: null,
+      limit: 50,
+    });
   });
 
   it("rejects invalid period", async () => {
@@ -256,6 +285,12 @@ describe("GET /api/leaderboard", () => {
     const json = await res.json();
 
     expect(res.status).toBe(200);
+    expect(leaderboardMocks.loadEntries).toHaveBeenCalledWith({
+      period: "week",
+      region: "north_america",
+      cursor: null,
+      limit: 50,
+    });
   });
 
   it("includes user_rank for current user in page", async () => {
@@ -263,6 +298,11 @@ describe("GET /api/leaderboard", () => {
       { user_id: "u1", total_cost: 100 },
       { user_id: "current-user", total_cost: 50 },
     ];
+    leaderboardMocks.loadEntries.mockResolvedValue(entries);
+    leaderboardMocks.getAuthIdentity.mockResolvedValue({
+      id: "current-user",
+      email: null,
+    });
 
     const client: Record<string, any> = {
       auth: {
@@ -298,6 +338,7 @@ describe("GET /api/leaderboard", () => {
       user_id: `u${i}`,
       total_cost: 100 - i,
     }));
+    leaderboardMocks.loadEntries.mockResolvedValue(entries);
 
     const client: Record<string, any> = {
       auth: {
diff --git a/apps/web/__tests__/api/right-sidebar.test.ts b/apps/web/__tests__/api/right-sidebar.test.ts
new file mode 100644
index 00000000..4fabfe37
--- /dev/null
+++ b/apps/web/__tests__/api/right-sidebar.test.ts
@@ -0,0 +1,110 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  createClient: vi.fn(),
+  loadUsageTotals: vi.fn(),
+  loadPublicData: vi.fn(),
+  getAuthIdentity: vi.fn(),
+}));
+
+vi.mock("@/lib/supabase/server", () => ({
+  createClient: mocks.createClient,
+}));
+
+vi.mock("@/lib/supabase/auth", () => ({
+  getAuthIdentity: mocks.getAuthIdentity,
+}));
+
+vi.mock("@/lib/data/usage-totals", () => ({
+  loadUsageTotals: mocks.loadUsageTotals,
+}));
+
+vi.mock("@/lib/data/right-sidebar", () => ({
+  loadRightSidebarPublicData: mocks.loadPublicData,
+}));
+
+import { GET } from "@/app/api/app/right-sidebar/route";
+
+function clientFor(userId: string, followingIds: string[]) {
+  return {
+    auth: {
+      getUser: vi.fn().mockResolvedValue({
+        data: { user: { id: userId } },
+        error: null,
+      }),
+    },
+    from: vi.fn(() => ({
+      select: vi.fn(() => ({
+        eq: vi.fn().mockResolvedValue({
+          data: followingIds.map((following_id) => ({ following_id })),
+          error: null,
+        }),
+      })),
+    })),
+  };
+}
+
+describe("GET /api/app/right-sidebar", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.loadUsageTotals.mockImplementation(async (_client: unknown, userId: string) => ({
+      totalTokens: userId === "viewer-1" ? 100 : 200,
+      totalCost: 0,
+    }));
+    mocks.loadPublicData.mockResolvedValue({
+      activeUsers: [
+        { id: "a", username: "a", avatar_url: null, bio: null },
+        { id: "b", username: "b", avatar_url: null, bio: null },
+        { id: "c", username: "c", avatar_url: null, bio: null },
+      ],
+      newSignups: [],
+      pinnedUsers: [],
+      topUsers: [],
+    });
+  });
+
+  it("keeps follows and usage totals request-scoped across users", async () => {
+    mocks.createClient
+      .mockResolvedValueOnce(clientFor("viewer-1", ["a"]))
+      .mockResolvedValueOnce(clientFor("viewer-2", ["b"]));
+    mocks.getAuthIdentity
+      .mockResolvedValueOnce({ id: "viewer-1", email: null })
+      .mockResolvedValueOnce({ id: "viewer-2", email: null });
+
+    const first = await GET();
+    const second = await GET();
+    const firstBody = await first.json();
+    const secondBody = await second.json();
+
+    expect(firstBody.suggested.map((user: { id: string }) => user.id)).toEqual([
+      "b",
+      "c",
+    ]);
+    expect(secondBody.suggested.map((user: { id: string }) => user.id)).toEqual([
+      "a",
+      "c",
+    ]);
+    expect(firstBody.totalOutputTokens).toBe(100);
+    expect(secondBody.totalOutputTokens).toBe(200);
+    expect(mocks.loadPublicData).toHaveBeenCalledTimes(2);
+    expect(mocks.loadUsageTotals.mock.calls.map((call) => call[1])).toEqual([
+      "viewer-1",
+      "viewer-2",
+    ]);
+  });
+
+  it("only admits public pinned users into the shared candidate cache", () => {
+    const source = readFileSync(
+      join(process.cwd(), "lib/data/right-sidebar.ts"),
+      "utf8"
+    );
+
+    expect(source).toMatch(
+      /from\("users"\)[\s\S]*?\.eq\("is_public", true\)[\s\S]*?\.eq\("is_pinned_suggestion", true\)/
+    );
+    expect(source).not.toContain("follower_id");
+    expect(source).not.toContain("loadUsageTotals");
+  });
+});
diff --git a/apps/web/__tests__/flows/leaderboard-ranking.test.ts b/apps/web/__tests__/flows/leaderboard-ranking.test.ts
index 6f9c918b..3196af98 100644
--- a/apps/web/__tests__/flows/leaderboard-ranking.test.ts
+++ b/apps/web/__tests__/flows/leaderboard-ranking.test.ts
@@ -1,5 +1,21 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 
+const leaderboardMocks = vi.hoisted(() => ({
+  loadEntries: vi.fn(),
+  loadRank: vi.fn(),
+  getAuthIdentity: vi.fn(),
+}));
+
+vi.mock("@/lib/supabase/auth", () => ({
+  getAuthIdentity: leaderboardMocks.getAuthIdentity,
+}));
+
+vi.mock("@/lib/data/leaderboard", () => ({
+  LEADERBOARD_PERIODS: ["day", "week", "month", "all_time"],
+  loadLeaderboardEntries: leaderboardMocks.loadEntries,
+  loadLeaderboardRank: leaderboardMocks.loadRank,
+}));
+
 // ---------------------------------------------------------------------------
 // Mock Supabase
 // ---------------------------------------------------------------------------
@@ -67,6 +83,9 @@ describe("Flow: Leaderboard Ranking", () => {
     vi.resetModules();
     mockSupabase.rpc.mockResolvedValue({ data: [] });
     mockServiceClient.from.mockReset();
+    leaderboardMocks.loadEntries.mockResolvedValue([]);
+    leaderboardMocks.loadRank.mockResolvedValue(null);
+    leaderboardMocks.getAuthIdentity.mockResolvedValue(null);
   });
 
   it("returns users sorted by cost DESC with correct rank badges", async () => {
@@ -74,6 +93,10 @@ describe("Flow: Leaderboard Ranking", () => {
     mockSupabase.auth.getUser.mockResolvedValue({
       data: { user: { id: currentUserId } },
     });
+    leaderboardMocks.getAuthIdentity.mockResolvedValue({
+      id: currentUserId,
+      email: null,
+    });
 
     const entries = [
       { user_id: "user-1", username: "topspender", total_cost: 100.0, region: "north_america" },
@@ -81,6 +104,7 @@ describe("Flow: Leaderboard Ranking", () => {
       { user_id: "user-3", username: "lowspender", total_cost: 25.0, region: "asia" },
       { user_id: "user-4", username: "casual", total_cost: 10.0, region: "north_america" },
     ];
+    leaderboardMocks.loadEntries.mockResolvedValue(entries);
 
     const lbChain = chainBuilder({ data: entries, error: null });
 
@@ -114,6 +138,7 @@ describe("Flow: Leaderboard Ranking", () => {
       { user_id: "user-1", username: "topspender", total_cost: 100.0, region: "north_america" },
       { user_id: "user-4", username: "casual", total_cost: 10.0, region: "north_america" },
     ];
+    leaderboardMocks.loadEntries.mockResolvedValue(naEntries);
 
     const lbChain = chainBuilder({ data: naEntries, error: null });
 
@@ -130,7 +155,12 @@ describe("Flow: Leaderboard Ranking", () => {
     expect(res.status).toBe(200);
     expect(data.entries).toHaveLength(2);
     expect(data.entries.every((entry: { region: string }) => entry.region === "north_america")).toBe(true);
-    expect(lbChain.eq).toHaveBeenCalledWith("region", "north_america");
+    expect(leaderboardMocks.loadEntries).toHaveBeenCalledWith({
+      period: "week",
+      region: "north_america",
+      cursor: null,
+      limit: 50,
+    });
   });
 
   it("filters by period: uses correct view", async () => {
@@ -146,19 +176,17 @@ describe("Flow: Leaderboard Ranking", () => {
 
     const { GET } = await import("@/app/api/leaderboard/route");
 
-    for (const [period, view] of [
-      ["day", "leaderboard_daily"],
-      ["week", "leaderboard_weekly"],
-      ["month", "leaderboard_monthly"],
-      ["all_time", "leaderboard_all_time"],
-    ] as const) {
-      mockSupabase.from.mockClear();
-      mockSupabase.from.mockImplementation(() => lbChain);
-
+    for (const period of ["day", "week", "month", "all_time"] as const) {
+      leaderboardMocks.loadEntries.mockClear();
       const req = makeRequest(`http://localhost:3000/api/leaderboard?period=${period}`);
       await GET(req);
 
-      expect(mockSupabase.from).toHaveBeenCalledWith(view);
+      expect(leaderboardMocks.loadEntries).toHaveBeenCalledWith({
+        period,
+        region: null,
+        cursor: null,
+        limit: 50,
+      });
     }
   });
 
@@ -179,31 +207,20 @@ describe("Flow: Leaderboard Ranking", () => {
     mockSupabase.auth.getUser.mockResolvedValue({
       data: { user: { id: currentUserId } },
     });
+    leaderboardMocks.getAuthIdentity.mockResolvedValue({
+      id: currentUserId,
+      email: null,
+    });
 
     // Main leaderboard does not include current user
     const topEntries = [
       { user_id: "user-1", username: "top1", total_cost: 200.0 },
       { user_id: "user-2", username: "top2", total_cost: 150.0 },
     ];
+    leaderboardMocks.loadEntries.mockResolvedValue(topEntries);
+    leaderboardMocks.loadRank.mockResolvedValue(11);
 
-    // User entry lookup
-    const userEntryResult = { data: { total_cost: 5.0 }, error: null };
-    // Count of users above
-    const countResult = { count: 10, data: null, error: null };
-
-    let callCount = 0;
-    mockSupabase.from.mockImplementation(() => {
-      callCount++;
-      if (callCount === 1) return chainBuilder({ data: topEntries, error: null });
-      if (callCount === 2) {
-        // user's entry
-        const c = chainBuilder();
-        c.maybeSingle = vi.fn(() => Promise.resolve(userEntryResult));
-        return c;
-      }
-      // count above
-      return chainBuilder(countResult);
-    });
+    mockSupabase.from.mockImplementation(() => chainBuilder({ data: [], error: null }));
     mockServiceClient.from.mockImplementation(() =>
       chainBuilder({ data: [], error: null })
     );
@@ -215,5 +232,10 @@ describe("Flow: Leaderboard Ranking", () => {
 
     expect(res.status).toBe(200);
     expect(data.user_rank).toBe(11);
+    expect(leaderboardMocks.loadRank).toHaveBeenCalledWith(
+      "week",
+      currentUserId,
+      null
+    );
   });
 });
diff --git a/apps/web/__tests__/flows/privacy-visibility.test.ts b/apps/web/__tests__/flows/privacy-visibility.test.ts
index b0bbb89d..7de7cac6 100644
--- a/apps/web/__tests__/flows/privacy-visibility.test.ts
+++ b/apps/web/__tests__/flows/privacy-visibility.test.ts
@@ -1,5 +1,16 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 
+const leaderboardMocks = vi.hoisted(() => ({
+  loadEntries: vi.fn(),
+  loadRank: vi.fn(),
+}));
+
+vi.mock("@/lib/data/leaderboard", () => ({
+  LEADERBOARD_PERIODS: ["day", "week", "month", "all_time"],
+  loadLeaderboardEntries: leaderboardMocks.loadEntries,
+  loadLeaderboardRank: leaderboardMocks.loadRank,
+}));
+
 // ---------------------------------------------------------------------------
 // Mock Supabase
 // ---------------------------------------------------------------------------
@@ -88,6 +99,8 @@ describe("Flow: Privacy and Visibility", () => {
       return Promise.resolve({ data: 0 });
     });
     mockServiceClient.rpc.mockResolvedValue({ data: 0 });
+    leaderboardMocks.loadEntries.mockResolvedValue([]);
+    leaderboardMocks.loadRank.mockResolvedValue(null);
   });
 
   it("public user appears in leaderboard", async () => {
@@ -98,6 +111,7 @@ describe("Flow: Privacy and Visibility", () => {
     const entries = [
       { user_id: PUBLIC_USER.id, username: PUBLIC_USER.username, total_cost: 50.0, region: "north_america" },
     ];
+    leaderboardMocks.loadEntries.mockResolvedValue(entries);
 
     const lbChain = chainBuilder();
     (lbChain.select as ReturnType<typeof vi.fn>).mockReturnValue(lbChain);
diff --git a/apps/web/__tests__/flows/signup-to-feed.test.ts b/apps/web/__tests__/flows/signup-to-feed.test.ts
index 146ea3f2..97ffb4b9 100644
--- a/apps/web/__tests__/flows/signup-to-feed.test.ts
+++ b/apps/web/__tests__/flows/signup-to-feed.test.ts
@@ -1,10 +1,21 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 
+const leaderboardMocks = vi.hoisted(() => ({
+  loadEntries: vi.fn(),
+  loadRank: vi.fn(),
+}));
+
+vi.mock("@/lib/data/leaderboard", () => ({
+  LEADERBOARD_PERIODS: ["day", "week", "month", "all_time"],
+  loadLeaderboardEntries: leaderboardMocks.loadEntries,
+  loadLeaderboardRank: leaderboardMocks.loadRank,
+}));
+
 // ---------------------------------------------------------------------------
 // Mock Supabase
 // ---------------------------------------------------------------------------
 const mockSupabase = {
-  auth: { getUser: vi.fn() },
+  auth: { getUser: vi.fn(), getClaims: vi.fn() },
   from: vi.fn(),
   rpc: vi.fn().mockResolvedValue({ data: [] }),
 };
@@ -74,6 +85,16 @@ describe("Flow: Signup to Feed", () => {
     vi.clearAllMocks();
     vi.stubEnv("NEXT_PUBLIC_APP_URL", "https://straude.com");
     mockSupabase.rpc.mockResolvedValue({ data: [] });
+    mockSupabase.auth.getClaims.mockImplementation(async () => {
+      const result = await mockSupabase.auth.getUser();
+      const subject = result?.data?.user?.id;
+      return {
+        data: typeof subject === "string" ? { claims: { sub: subject } } : null,
+        error: result?.error ?? null,
+      };
+    });
+    leaderboardMocks.loadEntries.mockResolvedValue([]);
+    leaderboardMocks.loadRank.mockResolvedValue(null);
   });
 
   it("new user lands on feed and sees empty results before following anyone", async () => {
@@ -163,6 +184,7 @@ describe("Flow: Signup to Feed", () => {
       { user_id: userId, username: "alice_dev", total_cost: 12.5, region: "north_america" },
       { user_id: "user-2", username: "bob", total_cost: 8.0, region: "europe" },
     ];
+    leaderboardMocks.loadEntries.mockResolvedValue(leaderboardEntries);
 
     const lbChain = chainBuilder();
     (lbChain.select as ReturnType<typeof vi.fn>).mockReturnValue(lbChain);
diff --git a/apps/web/__tests__/lib/leaderboard-data.test.ts b/apps/web/__tests__/lib/leaderboard-data.test.ts
new file mode 100644
index 00000000..2bcf64dd
--- /dev/null
+++ b/apps/web/__tests__/lib/leaderboard-data.test.ts
@@ -0,0 +1,79 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  from: vi.fn(),
+}));
+
+vi.mock("next/cache", () => ({
+  unstable_cache: <T extends (...args: never[]) => unknown>(fn: T) => fn,
+}));
+
+vi.mock("@/lib/supabase/service", () => ({
+  getServiceClient: vi.fn(() => ({ from: mocks.from })),
+}));
+
+import { loadLeaderboardEntries } from "@/lib/data/leaderboard";
+
+function queryResult(result: Record<string, unknown>) {
+  const chain: Record<string, ReturnType<typeof vi.fn>> & {
+    then?: (
+      resolve: (value: Record<string, unknown>) => unknown,
+      reject?: (error: unknown) => unknown
+    ) => Promise<unknown>;
+  } = {};
+  for (const method of ["select", "eq", "order", "limit", "lt"]) {
+    chain[method] = vi.fn(() => chain);
+  }
+  chain.then = (resolve, reject) => Promise.resolve(result).then(resolve, reject);
+  return chain;
+}
+
+describe("leaderboard snapshot loader", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("returns snapshot rows without touching the fallback view", async () => {
+    const snapshot = queryResult({
+      data: [{ user_id: "u1", username: "alice", total_cost: 10 }],
+      error: null,
+    });
+    mocks.from.mockReturnValue(snapshot);
+
+    await expect(
+      loadLeaderboardEntries({ period: "week", limit: 5 })
+    ).resolves.toMatchObject([{ user_id: "u1", username: "alice" }]);
+
+    expect(mocks.from).toHaveBeenCalledOnce();
+    expect(mocks.from).toHaveBeenCalledWith("leaderboard_snapshots");
+    expect(snapshot.eq).toHaveBeenCalledWith("period", "week");
+  });
+
+  it("falls back to the existing view before the migration is live", async () => {
+    const missingSnapshot = queryResult({
+      data: null,
+      error: { message: "relation does not exist" },
+    });
+    const fallback = queryResult({
+      data: [{ user_id: "u2", username: "bob", total_cost: 5 }],
+      error: null,
+    });
+    mocks.from
+      .mockReturnValueOnce(missingSnapshot)
+      .mockReturnValueOnce(fallback);
+
+    await expect(
+      loadLeaderboardEntries({
+        period: "month",
+        region: "europe",
+        limit: 10,
+      })
+    ).resolves.toMatchObject([{ user_id: "u2", username: "bob" }]);
+
+    expect(mocks.from.mock.calls.map((call) => call[0])).toEqual([
+      "leaderboard_snapshots",
+      "leaderboard_monthly",
+    ]);
+    expect(fallback.eq).toHaveBeenCalledWith("region", "europe");
+  });
+});
diff --git a/apps/web/__tests__/lib/radar.test.ts b/apps/web/__tests__/lib/radar.test.ts
new file mode 100644
index 00000000..10f07425
--- /dev/null
+++ b/apps/web/__tests__/lib/radar.test.ts
@@ -0,0 +1,62 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  rpc: vi.fn(),
+  single: vi.fn(),
+}));
+
+vi.mock("next/cache", () => ({
+  unstable_cache: <T extends (...args: never[]) => unknown>(fn: T) => fn,
+}));
+
+vi.mock("@/lib/supabase/service", () => ({
+  getServiceClient: vi.fn(() => ({
+    rpc: mocks.rpc,
+  })),
+}));
+
+import { computeRadarScores } from "@/lib/radar";
+
+describe("computeRadarScores", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.rpc.mockReturnValue({ single: mocks.single });
+  });
+
+  it("reads the service-only profile snapshot RPC once", async () => {
+    mocks.single.mockResolvedValue({
+      data: {
+        output: 91,
+        intensity: 72,
+        consistency: 63,
+        toolkit: 54,
+        community: 45,
+      },
+      error: null,
+    });
+
+    await expect(computeRadarScores("user-1")).resolves.toEqual({
+      output: 91,
+      intensity: 72,
+      consistency: 63,
+      toolkit: 54,
+      community: 45,
+    });
+    expect(mocks.rpc).toHaveBeenCalledWith("get_profile_stats", {
+      p_user_id: "user-1",
+    });
+    expect(mocks.rpc).toHaveBeenCalledOnce();
+    expect(mocks.single).toHaveBeenCalledOnce();
+  });
+
+  it("fails closed when the snapshot is unavailable", async () => {
+    mocks.single.mockResolvedValue({
+      data: null,
+      error: { message: "snapshot missing" },
+    });
+
+    await expect(computeRadarScores("user-1")).rejects.toThrow(
+      "snapshot missing"
+    );
+  });
+});
diff --git a/apps/web/__tests__/unit/migration-safety.test.ts b/apps/web/__tests__/unit/migration-safety.test.ts
index b7c83356..7c60a73f 100644
--- a/apps/web/__tests__/unit/migration-safety.test.ts
+++ b/apps/web/__tests__/unit/migration-safety.test.ts
@@ -225,6 +225,97 @@ describe("Migration safety", () => {
     expect(/ON\s+public\.comment_reactions\s+FOR\s+INSERT[\s\S]*WITH\s+CHECK[\s\S]*public\.comments[\s\S]*comment_reactions\.comment_id/i.test(content)).toBe(true);
   });
 
+  it("leaderboard and profile snapshots are private and refreshed atomically", () => {
+    const latest = getLatestMigrationMatching(
+      migrations,
+      /CREATE\s+TABLE\s+IF\s+NOT\s+EXISTS\s+public\.leaderboard_snapshots/i
+    );
+
+    expect(latest, "Expected the M4 snapshot migration").toBeTruthy();
+    const content = latest!.content;
+
+    expect(/ALTER\s+TABLE\s+public\.leaderboard_snapshots\s+ENABLE\s+ROW\s+LEVEL\s+SECURITY/i.test(content)).toBe(true);
+    expect(/ALTER\s+TABLE\s+public\.profile_stats_snapshots\s+ENABLE\s+ROW\s+LEVEL\s+SECURITY/i.test(content)).toBe(true);
+    expect(/REVOKE\s+ALL\s+ON\s+TABLE\s+public\.leaderboard_snapshots\s+FROM\s+anon/i.test(content)).toBe(true);
+    expect(/REVOKE\s+ALL\s+ON\s+TABLE\s+public\.profile_stats_snapshots\s+FROM\s+authenticated/i.test(content)).toBe(true);
+    expect(/pg_try_advisory_xact_lock/i.test(content)).toBe(true);
+    expect(/ON\s+CONFLICT\s*\(period,\s*user_id\)\s+DO\s+UPDATE/i.test(content)).toBe(true);
+    expect(/DELETE\s+FROM\s+public\.profile_stats_snapshots[\s\S]*refreshed_at\s*<>\s*v_refreshed_at/i.test(content)).toBe(true);
+    expect(/RANK\(\)\s+OVER\s*\(ORDER\s+BY\s+output_value\)\s*-\s*1/i.test(content)).toBe(true);
+    expect(/community_distribution/i.test(content)).toBe(true);
+    expect(/SELECT\s+COUNT\(\*\)\s+FROM\s+profile_values\s+AS\s+value/i.test(content)).toBe(false);
+    expect(/SELECT\s+public\.refresh_leaderboard_snapshots\(\)/i.test(content)).toBe(true);
+    expect(/'\*\/10 \* \* \* \*'/i.test(content)).toBe(true);
+  });
+
+  it("profile stats request RPC is a service-only one-row snapshot read", () => {
+    const latest = getLatestMigrationMatching(
+      migrations,
+      /CREATE\s+OR\s+REPLACE\s+FUNCTION\s+public\.get_profile_stats/i
+    );
+
+    expect(latest, "Expected get_profile_stats migration").toBeTruthy();
+    const definition = latest!.content.slice(
+      latest!.content.search(/CREATE\s+OR\s+REPLACE\s+FUNCTION\s+public\.get_profile_stats/i)
+    );
+
+    expect(/SECURITY\s+DEFINER/i.test(definition)).toBe(true);
+    expect(/SET\s+search_path\s*=\s*''/i.test(definition)).toBe(true);
+    expect(/FROM\s+public\.profile_stats_snapshots/i.test(definition)).toBe(true);
+    expect(/FROM\s+public\.(daily_usage|follows|posts|kudos)/i.test(definition.split("$$;")[0])).toBe(false);
+    expect(/REVOKE\s+ALL\s+ON\s+FUNCTION\s+public\.get_profile_stats\(UUID\)\s+FROM\s+PUBLIC/i.test(definition)).toBe(true);
+    expect(/GRANT\s+EXECUTE\s+ON\s+FUNCTION\s+public\.get_profile_stats\(UUID\)\s+TO\s+service_role/i.test(definition)).toBe(true);
+    expect(/GRANT\s+EXECUTE[^;]+get_profile_stats[^;]+TO\s+(anon|authenticated)/i.test(definition)).toBe(false);
+  });
+
+  it("calculate_user_streak is set-based and keeps timezone and freeze semantics", () => {
+    const latest = getLatestMigrationMatching(
+      migrations,
+      /CREATE\s+OR\s+REPLACE\s+FUNCTION\s+public\.calculate_user_streak/i
+    );
+
+    expect(latest, "Expected calculate_user_streak migration").toBeTruthy();
+    const content = latest!.content;
+    expect(/ROW_NUMBER\(\)\s+OVER\s*\(ORDER\s+BY\s+date\s+DESC\)/i.test(content)).toBe(true);
+    expect(/AT\s+TIME\s+ZONE\s+v_user_timezone/i.test(content)).toBe(true);
+    expect(/v_grace\s*:=\s*1\s*\+\s*p_freeze_days/i.test(content)).toBe(true);
+    expect(/^\s*LOOP\s*;?\s*$/im.test(content.slice(0, content.indexOf("CREATE OR REPLACE FUNCTION public.get_profile_stats")))).toBe(false);
+  });
+
+  it("adds a covering date-window leaderboard index", () => {
+    const latest = getLatestMigrationMatching(
+      migrations,
+      /idx_daily_usage_leaderboard_covering/i
+    );
+
+    expect(latest).toBeTruthy();
+    expect(/ON\s+public\.daily_usage\s*\(date\s+DESC,\s*user_id\)\s*INCLUDE\s*\(cost_usd,\s*output_tokens\)/i.test(latest!.content)).toBe(true);
+  });
+
+  it("indexes the leaderboard snapshot user foreign key without removing the region index", () => {
+    const userIndex = getLatestMigrationMatching(
+      migrations,
+      /idx_leaderboard_snapshots_user_id/i
+    );
+    const regionIndex = getLatestMigrationMatching(
+      migrations,
+      /idx_leaderboard_snapshots_period_region_cost/i
+    );
+
+    expect(userIndex).toBeTruthy();
+    expect(
+      /CREATE\s+INDEX\s+IF\s+NOT\s+EXISTS\s+idx_leaderboard_snapshots_user_id\s+ON\s+public\.leaderboard_snapshots\s*\(user_id\)/i.test(
+        userIndex!.content
+      )
+    ).toBe(true);
+    expect(regionIndex).toBeTruthy();
+    expect(
+      /ON\s+public\.leaderboard_snapshots\s*\(period,\s*region,\s*total_cost\s+DESC,\s*user_id\)/i.test(
+        regionIndex!.content
+      )
+    ).toBe(true);
+  });
+
   it("does not ship heuristic SQL repairs for historical Codex usage", () => {
     const abandonedRepairMigrations = migrations.filter((m) =>
       /repair_(legacy|native).*codex_inflation|restore_claude_costs_after_codex_repair|repair_codex_only_v3/i.test(m.name)
diff --git a/apps/web/app/(app)/leaderboard/page.tsx b/apps/web/app/(app)/leaderboard/page.tsx
index d060ced6..a21ae7c8 100644
--- a/apps/web/app/(app)/leaderboard/page.tsx
+++ b/apps/web/app/(app)/leaderboard/page.tsx
@@ -2,6 +2,11 @@ import Link from "next/link";
 import { createClient } from "@/lib/supabase/server";
 import { getAuthIdentity } from "@/lib/supabase/auth";
 import { getServiceClient } from "@/lib/supabase/service";
+import {
+  LEADERBOARD_PERIODS,
+  loadLeaderboardEntries,
+  type LeaderboardPeriod,
+} from "@/lib/data/leaderboard";
 import { firstRelation } from "@/lib/utils/first-relation";
 import { LeaderboardTable } from "@/components/app/leaderboard/LeaderboardTable";
 import type { LeaderboardEntry } from "@/types";
@@ -55,21 +60,16 @@ export default async function LeaderboardPage({
     createClient(),
   ]);
   const db = getServiceClient();
-
-  // We'll use the materialized view directly for SSR
-  const viewName = `leaderboard_${period === "all_time" ? "all_time" : period === "month" ? "monthly" : period === "day" ? "daily" : "weekly"}`;
-
-  let query = supabase
-    .from(viewName)
-    .select("*")
-    .order("total_cost", { ascending: false })
-    .limit(50);
-
-  if (region) {
-    query = query.eq("region", region);
-  }
-  const { data: rawEntries } = await query;
-  const entries = (rawEntries ?? []) as LeaderboardViewRow[];
+  const leaderboardPeriod = LEADERBOARD_PERIODS.includes(
+    period as LeaderboardPeriod
+  )
+    ? (period as LeaderboardPeriod)
+    : "week";
+  const entries = (await loadLeaderboardEntries({
+    period: leaderboardPeriod,
+    region,
+    limit: 50,
+  })) as LeaderboardViewRow[];
 
   // Fetch streaks + levels + team affiliation for all leaderboard users in parallel.
   // The leaderboard materialized views don't carry team_url/team_favicon_url, so
diff --git a/apps/web/app/api/app/right-sidebar/route.ts b/apps/web/app/api/app/right-sidebar/route.ts
index d2ba89f0..4c6196e7 100644
--- a/apps/web/app/api/app/right-sidebar/route.ts
+++ b/apps/web/app/api/app/right-sidebar/route.ts
@@ -1,117 +1,64 @@
 import { NextResponse } from "next/server";
+import { getAuthIdentity } from "@/lib/supabase/auth";
 import { createClient } from "@/lib/supabase/server";
-import { getServiceClient } from "@/lib/supabase/service";
+import { loadRightSidebarPublicData } from "@/lib/data/right-sidebar";
 import { loadUsageTotals } from "@/lib/data/usage-totals";
-import type {
-  RightSidebarSuggestedUser,
-  RightSidebarTopUser,
-} from "@/lib/query/right-sidebar";
-
-type ActiveUserRelation = {
-  id: string;
-  username: string;
-  avatar_url: string | null;
-  bio: string | null;
-  is_public: boolean;
-};
+import type { RightSidebarSuggestedUser } from "@/lib/query/right-sidebar";
 
 export async function GET() {
-  const supabase = await createClient();
-  const {
-    data: { user },
-  } = await supabase.auth.getUser();
+  const [supabase, identity] = await Promise.all([
+    createClient(),
+    getAuthIdentity(),
+  ]);
 
-  if (!user) {
+  if (!identity) {
     return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
   }
 
-  const service = getServiceClient();
-
-  const [{ data: topUsers }, { data: following }, usageTotals] = await Promise.all([
-    supabase
-      .from("leaderboard_weekly")
-      .select("user_id, username, avatar_url, total_cost")
-      .order("total_cost", { ascending: false })
-      .limit(5),
+  const [{ data: following }, usageTotals, publicData] = await Promise.all([
     supabase
       .from("follows")
       .select("following_id")
-      .eq("follower_id", user.id),
-    loadUsageTotals(supabase, user.id),
+      .eq("follower_id", identity.id),
+    loadUsageTotals(supabase, identity.id),
+    loadRightSidebarPublicData(),
   ]);
 
   const followingIds = following?.map((f) => f.following_id) ?? [];
-  const excludeIds = [user.id, ...followingIds];
-  const excludeFilter = `(${excludeIds.join(",")})`;
-
-  const [{ data: pinnedUsers }, { data: recentlyActive }, { data: newSignups }] =
-    await Promise.all([
-      service
-        .from("users")
-        .select("id, username, avatar_url, bio")
-        .eq("is_pinned_suggestion", true)
-        .not("id", "in", excludeFilter),
-      service
-        .from("daily_usage")
-        .select("user_id, users!inner(id, username, avatar_url, bio, is_public)")
-        .not("users.username", "is", null)
-        .not("user_id", "in", excludeFilter)
-        .order("date", { ascending: false })
-        .limit(20),
-      service
-        .from("users")
-        .select("id, username, avatar_url, bio")
-        .eq("is_public", true)
-        .not("username", "is", null)
-        .not("id", "in", excludeFilter)
-        .order("created_at", { ascending: false })
-        .limit(10),
-    ]);
-
-  const pinnedIds = new Set((pinnedUsers ?? []).map((u) => u.id));
+  const excludedIds = new Set([identity.id, ...followingIds]);
+  const pinnedList = publicData.pinnedUsers.filter(
+    (candidate) => !excludedIds.has(candidate.id)
+  );
+  const pinnedIds = new Set(pinnedList.map((candidate) => candidate.id));
   const seenIds = new Set<string>();
   const activeUsers: RightSidebarSuggestedUser[] = [];
 
-  for (const row of recentlyActive ?? []) {
-    const candidate = row.users as unknown as ActiveUserRelation;
-    if (!seenIds.has(candidate.id) && !pinnedIds.has(candidate.id) && candidate.is_public) {
-      seenIds.add(candidate.id);
-      activeUsers.push({
-        id: candidate.id,
-        username: candidate.username,
-        avatar_url: candidate.avatar_url,
-        bio: candidate.bio,
-      });
-    }
+  for (const candidate of publicData.activeUsers) {
+    if (excludedIds.has(candidate.id) || pinnedIds.has(candidate.id)) continue;
+    seenIds.add(candidate.id);
+    activeUsers.push(candidate);
   }
 
   const merged: RightSidebarSuggestedUser[] = [...activeUsers];
 
-  for (const candidate of newSignups ?? []) {
-    if (!candidate.username) continue;
-    if (pinnedIds.has(candidate.id) || merged.some((item) => item.id === candidate.id)) continue;
-    merged.push({
-      id: candidate.id,
-      username: candidate.username,
-      avatar_url: candidate.avatar_url,
-      bio: candidate.bio,
-    });
+  for (const candidate of publicData.newSignups) {
+    if (
+      excludedIds.has(candidate.id)
+      || pinnedIds.has(candidate.id)
+      || seenIds.has(candidate.id)
+    ) {
+      continue;
+    }
+    seenIds.add(candidate.id);
+    merged.push(candidate);
   }
 
-  const pinnedList: RightSidebarSuggestedUser[] = (pinnedUsers ?? [])
-    .filter((candidate) => candidate.username)
-    .map((candidate) => ({
-      id: candidate.id,
-      username: candidate.username as string,
-      avatar_url: candidate.avatar_url,
-      bio: candidate.bio,
-    }));
   const organicLimit = Math.max(0, 5 - pinnedList.length);
   const suggested = [...merged.slice(0, organicLimit), ...pinnedList].slice(0, 5);
 
   return NextResponse.json({
     suggested,
-    topUsers: (topUsers ?? []) as RightSidebarTopUser[],
+    topUsers: publicData.topUsers,
     totalOutputTokens: usageTotals.totalTokens,
   });
 }
diff --git a/apps/web/app/api/leaderboard/route.ts b/apps/web/app/api/leaderboard/route.ts
index e5751531..9bba2b72 100644
--- a/apps/web/app/api/leaderboard/route.ts
+++ b/apps/web/app/api/leaderboard/route.ts
@@ -1,58 +1,44 @@
 import { NextResponse, type NextRequest } from "next/server";
+import {
+  LEADERBOARD_PERIODS,
+  loadLeaderboardEntries,
+  loadLeaderboardRank,
+  type LeaderboardPeriod,
+} from "@/lib/data/leaderboard";
+import { getAuthIdentity } from "@/lib/supabase/auth";
 import { createClient } from "@/lib/supabase/server";
 import { getServiceClient } from "@/lib/supabase/service";
 
-const VALID_PERIODS = ["day", "week", "month", "all_time"] as const;
-type Period = (typeof VALID_PERIODS)[number];
-
-const VIEW_MAP: Record<Period, string> = {
-  day: "leaderboard_daily",
-  week: "leaderboard_weekly",
-  month: "leaderboard_monthly",
-  all_time: "leaderboard_all_time",
-};
-
 export async function GET(request: NextRequest) {
-  const supabase = await createClient();
+  const [supabase, identity] = await Promise.all([
+    createClient(),
+    getAuthIdentity(),
+  ]);
   const db = getServiceClient();
-  const {
-    data: { user },
-  } = await supabase.auth.getUser();
 
   const { searchParams } = request.nextUrl;
-  const period = (searchParams.get("period") ?? "week") as Period;
+  const requestedPeriod = searchParams.get("period") ?? "week";
   const region = searchParams.get("region");
   const cursor = searchParams.get("cursor");
   const limit = Math.min(Number(searchParams.get("limit") ?? 50), 100);
 
-  if (!VALID_PERIODS.includes(period)) {
+  if (!LEADERBOARD_PERIODS.includes(requestedPeriod as LeaderboardPeriod)) {
     return NextResponse.json({ error: "Invalid period" }, { status: 400 });
   }
 
-  const view = VIEW_MAP[period];
-
-  let query = supabase
-    .from(view)
-    .select("user_id, username, display_name, avatar_url, country, region, total_cost, total_output_tokens")
-    .order("total_cost", { ascending: false })
-    .limit(limit);
-
-  if (region) {
-    query = query.eq("region", region);
-  }
-
-  if (cursor) {
-    query = query.lt("total_cost", cursor);
-  }
-
-  const { data: entries, error } = await query;
-
-  if (error) {
-    return NextResponse.json({ error: error.message }, { status: 500 });
+  const period = requestedPeriod as LeaderboardPeriod;
+  let entries;
+  try {
+    entries = await loadLeaderboardEntries({ period, region, cursor, limit });
+  } catch (error) {
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : "Leaderboard unavailable" },
+      { status: 500 }
+    );
   }
 
   // Fetch streaks for all returned users in a single RPC call
-  const userIds = (entries ?? []).map((e) => e.user_id);
+  const userIds = entries.map((entry) => entry.user_id);
   const { data: streakRows } = userIds.length > 0
     ? await supabase.rpc("calculate_streaks_batch", { p_user_ids: userIds })
     : { data: [] };
@@ -75,7 +61,7 @@ export async function GET(request: NextRequest) {
   }
 
   // Assign ranks and streaks
-  const ranked = (entries ?? []).map((entry, i) => ({
+  const ranked = entries.map((entry, i) => ({
     ...entry,
     rank: i + 1,
     streak: streakMap.get(entry.user_id) ?? 0,
@@ -84,27 +70,13 @@ export async function GET(request: NextRequest) {
 
   // Find current user's rank
   let user_rank: number | undefined;
-  if (user) {
-    const found = ranked.find((e) => e.user_id === user.id);
+  if (identity) {
+    const found = ranked.find((e) => e.user_id === identity.id);
     if (found) {
       user_rank = found.rank;
     } else {
-      // User not in this page — query their rank separately
-      // Get user's cost from the view
-      const { data: userEntry } = await supabase
-        .from(view)
-        .select("total_cost")
-        .eq("user_id", user.id)
-        .maybeSingle();
-
-      if (userEntry) {
-        const { count } = await supabase
-          .from(view)
-          .select("*", { count: "exact", head: true })
-          .gt("total_cost", userEntry.total_cost);
-
-        user_rank = (count ?? 0) + 1;
-      }
+      user_rank =
+        (await loadLeaderboardRank(period, identity.id, region)) ?? undefined;
     }
   }
 
diff --git a/apps/web/lib/data/leaderboard.ts b/apps/web/lib/data/leaderboard.ts
new file mode 100644
index 00000000..f5bee4e5
--- /dev/null
+++ b/apps/web/lib/data/leaderboard.ts
@@ -0,0 +1,143 @@
+import { unstable_cache } from "next/cache";
+import { getServiceClient } from "@/lib/supabase/service";
+
+export const LEADERBOARD_PERIODS = ["day", "week", "month", "all_time"] as const;
+export type LeaderboardPeriod = (typeof LEADERBOARD_PERIODS)[number];
+
+export type LeaderboardRow = {
+  user_id: string;
+  username: string | null;
+  display_name: string | null;
+  avatar_url: string | null;
+  country: string | null;
+  region: string | null;
+  total_cost: number | string | null;
+  total_output_tokens: number | string | null;
+};
+
+type LeaderboardQuery = {
+  period: LeaderboardPeriod;
+  region?: string | null;
+  cursor?: string | null;
+  limit: number;
+};
+
+const VIEW_BY_PERIOD: Record<LeaderboardPeriod, string> = {
+  day: "leaderboard_daily",
+  week: "leaderboard_weekly",
+  month: "leaderboard_monthly",
+  all_time: "leaderboard_all_time",
+};
+
+const LEADERBOARD_SELECT =
+  "user_id, username, display_name, avatar_url, country, region, total_cost, total_output_tokens";
+
+async function queryLeaderboard({
+  period,
+  region,
+  cursor,
+  limit,
+}: LeaderboardQuery): Promise<LeaderboardRow[]> {
+  const db = getServiceClient();
+  let snapshotQuery = db
+    .from("leaderboard_snapshots")
+    .select(LEADERBOARD_SELECT)
+    .eq("period", period)
+    .order("total_cost", { ascending: false })
+    .limit(limit);
+
+  if (region) snapshotQuery = snapshotQuery.eq("region", region);
+  if (cursor) snapshotQuery = snapshotQuery.lt("total_cost", cursor);
+
+  const snapshot = await snapshotQuery;
+  if (!snapshot.error) {
+    return (snapshot.data ?? []) as LeaderboardRow[];
+  }
+
+  let fallbackQuery = db
+    .from(VIEW_BY_PERIOD[period])
+    .select(LEADERBOARD_SELECT)
+    .order("total_cost", { ascending: false })
+    .limit(limit);
+
+  if (region) fallbackQuery = fallbackQuery.eq("region", region);
+  if (cursor) fallbackQuery = fallbackQuery.lt("total_cost", cursor);
+
+  const fallback = await fallbackQuery;
+  if (fallback.error) throw new Error(fallback.error.message);
+  return (fallback.data ?? []) as LeaderboardRow[];
+}
+
+const loadCachedLeaderboard = unstable_cache(
+  async (
+    period: LeaderboardPeriod,
+    region: string | null,
+    cursor: string | null,
+    limit: number
+  ) => queryLeaderboard({ period, region, cursor, limit }),
+  ["public-leaderboard-snapshot-first"],
+  { revalidate: 600, tags: ["leaderboard"] }
+);
+
+export function loadLeaderboardEntries(query: LeaderboardQuery) {
+  return loadCachedLeaderboard(
+    query.period,
+    query.region ?? null,
+    query.cursor ?? null,
+    query.limit
+  );
+}
+
+async function queryLeaderboardRank(
+  period: LeaderboardPeriod,
+  userId: string,
+  region: string | null
+): Promise<number | null> {
+  const db = getServiceClient();
+  const snapshotEntry = await db
+    .from("leaderboard_snapshots")
+    .select("total_cost")
+    .eq("period", period)
+    .eq("user_id", userId)
+    .maybeSingle();
+
+  const source = snapshotEntry.error
+    ? VIEW_BY_PERIOD[period]
+    : "leaderboard_snapshots";
+  const entry = snapshotEntry.error
+    ? await db
+        .from(source)
+        .select("total_cost")
+        .eq("user_id", userId)
+        .maybeSingle()
+    : snapshotEntry;
+
+  if (entry.error || !entry.data) return null;
+
+  let countQuery = db
+    .from(source)
+    .select("*", { count: "exact", head: true })
+    .gt("total_cost", entry.data.total_cost);
+
+  if (source === "leaderboard_snapshots") {
+    countQuery = countQuery.eq("period", period);
+  }
+  if (region) countQuery = countQuery.eq("region", region);
+
+  const { count, error } = await countQuery;
+  return error ? null : (count ?? 0) + 1;
+}
+
+const loadCachedLeaderboardRank = unstable_cache(
+  queryLeaderboardRank,
+  ["public-leaderboard-rank-snapshot-first"],
+  { revalidate: 600, tags: ["leaderboard"] }
+);
+
+export function loadLeaderboardRank(
+  period: LeaderboardPeriod,
+  userId: string,
+  region?: string | null
+) {
+  return loadCachedLeaderboardRank(period, userId, region ?? null);
+}
diff --git a/apps/web/lib/data/right-sidebar.ts b/apps/web/lib/data/right-sidebar.ts
new file mode 100644
index 00000000..9618c3d4
--- /dev/null
+++ b/apps/web/lib/data/right-sidebar.ts
@@ -0,0 +1,105 @@
+import { unstable_cache } from "next/cache";
+import { loadLeaderboardEntries } from "@/lib/data/leaderboard";
+import { getServiceClient } from "@/lib/supabase/service";
+import type {
+  RightSidebarSuggestedUser,
+  RightSidebarTopUser,
+} from "@/lib/query/right-sidebar";
+
+type ActiveUserRelation = {
+  id: string;
+  username: string;
+  avatar_url: string | null;
+  bio: string | null;
+  is_public: boolean;
+};
+
+type ActiveUserRow = {
+  users: ActiveUserRelation | ActiveUserRelation[] | null;
+};
+
+export type RightSidebarPublicData = {
+  activeUsers: RightSidebarSuggestedUser[];
+  newSignups: RightSidebarSuggestedUser[];
+  pinnedUsers: RightSidebarSuggestedUser[];
+  topUsers: RightSidebarTopUser[];
+};
+
+function firstUser(relation: ActiveUserRow["users"]) {
+  return Array.isArray(relation) ? relation[0] : relation;
+}
+
+export const loadRightSidebarPublicData = unstable_cache(
+  async (): Promise<RightSidebarPublicData> => {
+    const service = getServiceClient();
+    const [leaderboard, pinnedResult, activeResult, signupResult] =
+      await Promise.all([
+        loadLeaderboardEntries({ period: "week", limit: 5 }),
+        service
+          .from("users")
+          .select("id, username, avatar_url, bio")
+          .eq("is_public", true)
+          .eq("is_pinned_suggestion", true),
+        service
+          .from("daily_usage")
+          .select("user_id, users!inner(id, username, avatar_url, bio, is_public)")
+          .not("users.username", "is", null)
+          .order("date", { ascending: false })
+          .limit(100),
+        service
+          .from("users")
+          .select("id, username, avatar_url, bio")
+          .eq("is_public", true)
+          .not("username", "is", null)
+          .order("created_at", { ascending: false })
+          .limit(50),
+      ]);
+
+    const seen = new Set<string>();
+    const activeUsers: RightSidebarSuggestedUser[] = [];
+    for (const row of (activeResult.data ?? []) as ActiveUserRow[]) {
+      const user = firstUser(row.users);
+      if (!user?.is_public || !user.username || seen.has(user.id)) continue;
+      seen.add(user.id);
+      activeUsers.push({
+        id: user.id,
+        username: user.username,
+        avatar_url: user.avatar_url,
+        bio: user.bio,
+      });
+    }
+
+    const mapUser = (user: {
+      id: string;
+      username: string | null;
+      avatar_url: string | null;
+      bio: string | null;
+    }): RightSidebarSuggestedUser | null =>
+      user.username
+        ? {
+            id: user.id,
+            username: user.username,
+            avatar_url: user.avatar_url,
+            bio: user.bio,
+          }
+        : null;
+
+    return {
+      activeUsers,
+      newSignups: (signupResult.data ?? [])
+        .map(mapUser)
+        .filter((user): user is RightSidebarSuggestedUser => user !== null),
+      pinnedUsers: (pinnedResult.data ?? [])
+        .map(mapUser)
+        .filter((user): user is RightSidebarSuggestedUser => user !== null),
+      topUsers: leaderboard.map((entry) => ({
+        user_id: entry.user_id,
+        username: entry.username,
+        avatar_url: entry.avatar_url,
+        total_cost: entry.total_cost,
+      })),
+    };
+  },
+  ["right-sidebar-public-candidates"],
+  { revalidate: 600, tags: ["leaderboard", "right-sidebar-public"] }
+);
diff --git a/apps/web/lib/radar.ts b/apps/web/lib/radar.ts
index a112ed68..bba75a53 100644
--- a/apps/web/lib/radar.ts
+++ b/apps/web/lib/radar.ts
@@ -1,3 +1,4 @@
+import { unstable_cache } from "next/cache";
 import { getServiceClient } from "@/lib/supabase/service";
 
 export type RadarScores = {
@@ -8,190 +9,37 @@ export type RadarScores = {
   community: number;
 };
 
-/**
- * Percentile rank (0–100) for a value within a sorted-ascending array.
- */
-function percentileRank(sortedValues: number[], value: number, total: number): number {
-  if (total === 0) return 0;
-  let rank = 0;
-  for (const v of sortedValues) {
-    if (v < value) rank++;
-    else break;
-  }
-  return Math.min(100, Math.max(0, Math.round((rank / total) * 100)));
-}
-
-// ---------------------------------------------------------------------------
-// Simple in-memory cache for the expensive global distributions.
-// The distributions change slowly (new usage rows trickle in) so a short TTL
-// is fine — it avoids re-scanning every table on every profile view.
-// ---------------------------------------------------------------------------
-type CachedDistributions = {
-  userStats: Map<string, { totalOutput: number; totalCost: number; rowCount: number; models: Set<string> }>;
-  followerCounts: Map<string, number>;
-  kudosCounts: Map<string, number>;
-  crewCounts: Map<string, number>;
-  usersMap: Map<string, { created_at: string }>;
-  allUserIds: Set<string>;
+type ProfileStatsRow = {
+  output: number;
+  intensity: number;
+  consistency: number;
+  toolkit: number;
+  community: number;
 };
 
-let _cache: { data: CachedDistributions; ts: number } | null = null;
-const CACHE_TTL_MS = 5 * 60 * 1000; // 5 minutes
-
-async function getDistributions(): Promise<CachedDistributions> {
-  if (_cache && Date.now() - _cache.ts < CACHE_TTL_MS) {
-    return _cache.data;
-  }
-
+const loadRadarScores = unstable_cache(async (userId: string): Promise<RadarScores> => {
   const db = getServiceClient();
+  const { data, error } = await db
+    .rpc("get_profile_stats", { p_user_id: userId })
+    .single();
 
-  // Run ALL heavy queries in parallel
-  const [{ data: allUsage }, { data: allUsers }, { data: allFollows }, { data: allPosts }, { data: allKudos }] =
-    await Promise.all([
-      db.from("daily_usage").select("user_id, output_tokens, cost_usd, model_breakdown"),
-      db.from("users").select("id, created_at, referred_by"),
-      db.from("follows").select("following_id"),
-      db.from("posts").select("id, user_id"),
-      db.from("kudos").select("post_id"),
-    ]);
-
-  // Build users map
-  const usersMap = new Map<string, { created_at: string }>();
-  for (const u of allUsers ?? []) {
-    usersMap.set(u.id, { created_at: u.created_at });
-  }
-
-  // Aggregate per-user stats from daily_usage
-  const userStats = new Map<
-    string,
-    { totalOutput: number; totalCost: number; rowCount: number; models: Set<string> }
-  >();
-  for (const row of allUsage ?? []) {
-    let stats = userStats.get(row.user_id);
-    if (!stats) {
-      stats = { totalOutput: 0, totalCost: 0, rowCount: 0, models: new Set() };
-      userStats.set(row.user_id, stats);
-    }
-    stats.totalOutput += Number(row.output_tokens) || 0;
-    stats.totalCost += Number(row.cost_usd) || 0;
-    stats.rowCount += 1;
-
-    const breakdown = row.model_breakdown as Array<{ model: string; cost_usd: number }> | null;
-    if (breakdown && Array.isArray(breakdown)) {
-      for (const entry of breakdown) {
-        if (entry.model) stats.models.add(entry.model);
-      }
-    }
-  }
-
-  // Follower counts
-  const followerCounts = new Map<string, number>();
-  for (const f of allFollows ?? []) {
-    followerCounts.set(f.following_id, (followerCounts.get(f.following_id) ?? 0) + 1);
+  if (error || !data) {
+    throw new Error(error?.message ?? "Profile stats snapshot is unavailable.");
   }
 
-  // Kudos received per user
-  const postOwnerMap = new Map<string, string>();
-  for (const p of allPosts ?? []) {
-    postOwnerMap.set(p.id, p.user_id);
-  }
-  const kudosCounts = new Map<string, number>();
-  for (const k of allKudos ?? []) {
-    const ownerId = postOwnerMap.get(k.post_id);
-    if (ownerId) {
-      kudosCounts.set(ownerId, (kudosCounts.get(ownerId) ?? 0) + 1);
-    }
-  }
-
-  // Crew (referrals)
-  const crewCounts = new Map<string, number>();
-  for (const u of allUsers ?? []) {
-    if (u.referred_by) {
-      crewCounts.set(u.referred_by, (crewCounts.get(u.referred_by) ?? 0) + 1);
-    }
-  }
-
-  // All user IDs that have usage
-  const allUserIds = new Set<string>();
-  for (const uid of userStats.keys()) allUserIds.add(uid);
-
-  const data: CachedDistributions = { userStats, followerCounts, kudosCounts, crewCounts, usersMap, allUserIds };
-  _cache = { data, ts: Date.now() };
-  return data;
-}
-
-/**
- * Compute radar scores for a given user. Uses a cached global distribution
- * so only the first call in a 5-minute window hits the database.
- */
-export async function computeRadarScores(userId: string): Promise<RadarScores> {
-  const dist = await getDistributions();
-  const { userStats, followerCounts, kudosCounts, crewCounts, usersMap, allUserIds } = dist;
-
-  // Ensure the target user is in the set
-  const ids = new Set(allUserIds);
-  ids.add(userId);
-
-  const now = Date.now();
-
-  const outputValues: number[] = [];
-  const intensityValues: number[] = [];
-  const consistencyValues: number[] = [];
-  const toolkitValues: number[] = [];
-  const communityValues: number[] = [];
-
-  let targetOutput = 0;
-  let targetIntensity = 0;
-  let targetConsistency = 0;
-  let targetToolkit = 0;
-  let targetCommunity = 0;
-
-  for (const uid of ids) {
-    const stats = userStats.get(uid);
-    const userCreatedAt = usersMap.get(uid)?.created_at;
-
-    const output = stats?.totalOutput ?? 0;
-    outputValues.push(output);
-
-    const intensity = stats && stats.rowCount > 0 ? stats.totalCost / stats.rowCount : 0;
-    intensityValues.push(intensity);
-
-    let consistency = 0;
-    if (userCreatedAt && stats && stats.rowCount > 0) {
-      const daysSinceCreation = Math.max(1, Math.floor((now - new Date(userCreatedAt).getTime()) / 86_400_000));
-      consistency = Math.min(100, (stats.rowCount / daysSinceCreation) * 100);
-    }
-    consistencyValues.push(consistency);
-
-    const toolkit = stats?.models.size ?? 0;
-    toolkitValues.push(toolkit);
-
-    const community =
-      (followerCounts.get(uid) ?? 0) + (kudosCounts.get(uid) ?? 0) + (crewCounts.get(uid) ?? 0);
-    communityValues.push(community);
-
-    if (uid === userId) {
-      targetOutput = output;
-      targetIntensity = intensity;
-      targetConsistency = consistency;
-      targetToolkit = toolkit;
-      targetCommunity = community;
-    }
-  }
-
-  outputValues.sort((a, b) => a - b);
-  intensityValues.sort((a, b) => a - b);
-  consistencyValues.sort((a, b) => a - b);
-  toolkitValues.sort((a, b) => a - b);
-  communityValues.sort((a, b) => a - b);
-
-  const total = ids.size;
-
+  const scores = data as ProfileStatsRow;
   return {
-    output: percentileRank(outputValues, targetOutput, total),
-    intensity: percentileRank(intensityValues, targetIntensity, total),
-    consistency: percentileRank(consistencyValues, targetConsistency, total),
-    toolkit: percentileRank(toolkitValues, targetToolkit, total),
-    community: percentileRank(communityValues, targetCommunity, total),
+    output: Number(scores.output) || 0,
+    intensity: Number(scores.intensity) || 0,
+    consistency: Number(scores.consistency) || 0,
+    toolkit: Number(scores.toolkit) || 0,
+    community: Number(scores.community) || 0,
   };
+}, ["public-profile-radar-snapshot"], {
+  revalidate: 600,
+  tags: ["profile-stats"],
+});
+
+export function computeRadarScores(userId: string): Promise<RadarScores> {
+  return loadRadarScores(userId);
 }
diff --git a/docs/perf/DB.md b/docs/perf/DB.md
new file mode 100644
index 00000000..d0f27681
--- /dev/null
+++ b/docs/perf/DB.md
@@ -0,0 +1,58 @@
+# Database performance evidence
+
+Recorded 2026-07-18 against Supabase project `kanfzeovbmusnhmbnhit`. The M4
+snapshot migration and its follow-up foreign-key index are live.
+
+## Live baseline
+
+- `public.daily_usage`: approximately 6,913 rows and 6.2 MB.
+- Existing indexes: primary key, unique `(user_id, date)`, `date DESC`, and
+  `(user_id, date DESC)`.
+- `pg_cron`: version 1.6.4. The only current job is
+  `expire-cli-auth-codes`.
+- Supabase advisors before M4: 35 security notices and 45 performance notices.
+  Deployment acceptance is no new notices, not a globally clean advisor run.
+- Weekly leaderboard baseline: 2.577 ms execution, 288 shared-hit blocks, using
+  a bitmap heap scan through `idx_daily_usage_date`.
+
+## Live post-apply result
+
+- Snapshot leaderboard query: 0.057 ms execution and 5 shared-hit blocks.
+- Snapshot rows: 355 in `public.leaderboard_snapshots` and 561 in
+  `public.profile_stats_snapshots`.
+- Supabase advisors returned to the exact baseline after both migrations: 35
+  security notices and 45 performance notices, with no migration-related
+  notices.
+- `idx_leaderboard_snapshots_user_id` covers foreign-key maintenance. A live
+  lookup used it in a bitmap index scan and completed in 0.193 ms.
+- A live period-and-region query used
+  `idx_leaderboard_snapshots_period_region_cost` and completed in 0.116 ms.
+
+## EXPLAIN query
+
+Run this before and after applying the migration, with `BUFFERS` enabled, to
+measure whether the covering index reduces heap access for the date-window
+aggregation:
+
+```sql
+EXPLAIN (ANALYZE, BUFFERS, VERBOSE)
+SELECT
+  u.id AS user_id,
+  COALESCE(SUM(d.cost_usd), 0) AS total_cost,
+  COALESCE(SUM(d.output_tokens), 0) AS total_output_tokens,
+  COUNT(DISTINCT d.date) AS active_days
+FROM public.users AS u
+LEFT JOIN public.daily_usage AS d
+  ON d.user_id = u.id
+ AND d.date >= CURRENT_DATE - INTERVAL '6 days'
+WHERE u.is_public = true
+GROUP BY u.id
+HAVING COALESCE(SUM(d.cost_usd), 0) > 0
+ORDER BY total_cost DESC;
+```
+
+The M4 migration adds
+`(date DESC, user_id) INCLUDE (cost_usd, output_tokens)`, but the planner may
+reasonably retain the existing plan at this data size. The measured
+request-path win comes from moving leaderboard aggregation and radar
+distributions to the ten-minute snapshot refresh.
diff --git a/supabase/migrations/20260718165137_add_leaderboard_snapshots_and_profile_stats.sql b/supabase/migrations/20260718165137_add_leaderboard_snapshots_and_profile_stats.sql
new file mode 100644
index 00000000..a4e16c43
--- /dev/null
+++ b/supabase/migrations/20260718165137_add_leaderboard_snapshots_and_profile_stats.sql
@@ -0,0 +1,494 @@
+-- M4 database primitives. This migration is intentionally safe to stage before
+-- the application switches every reader: the existing leaderboard views remain
+-- in place as fallbacks.
+
+CREATE INDEX IF NOT EXISTS idx_daily_usage_leaderboard_covering
+  ON public.daily_usage (date DESC, user_id)
+  INCLUDE (cost_usd, output_tokens);
+
+CREATE TABLE IF NOT EXISTS public.leaderboard_snapshots (
+  period TEXT NOT NULL CHECK (period IN ('day', 'week', 'month', 'all_time')),
+  user_id UUID NOT NULL REFERENCES public.users(id) ON DELETE CASCADE,
+  username TEXT,
+  display_name TEXT,
+  avatar_url TEXT,
+  country TEXT,
+  region TEXT,
+  total_cost NUMERIC NOT NULL DEFAULT 0,
+  total_output_tokens BIGINT NOT NULL DEFAULT 0,
+  active_days BIGINT,
+  session_count BIGINT,
+  refreshed_at TIMESTAMPTZ NOT NULL,
+  PRIMARY KEY (period, user_id)
+);
+
+CREATE INDEX IF NOT EXISTS idx_leaderboard_snapshots_period_cost
+  ON public.leaderboard_snapshots (period, total_cost DESC, user_id);
+
+CREATE INDEX IF NOT EXISTS idx_leaderboard_snapshots_period_region_cost
+  ON public.leaderboard_snapshots (period, region, total_cost DESC, user_id);
+
+ALTER TABLE public.leaderboard_snapshots ENABLE ROW LEVEL SECURITY;
+CREATE POLICY "Service role reads leaderboard snapshots"
+  ON public.leaderboard_snapshots
+  FOR SELECT
+  TO service_role
+  USING (true);
+REVOKE ALL ON TABLE public.leaderboard_snapshots FROM PUBLIC;
+REVOKE ALL ON TABLE public.leaderboard_snapshots FROM anon;
+REVOKE ALL ON TABLE public.leaderboard_snapshots FROM authenticated;
+GRANT SELECT ON TABLE public.leaderboard_snapshots TO service_role;
+
+CREATE TABLE IF NOT EXISTS public.profile_stats_snapshots (
+  user_id UUID PRIMARY KEY REFERENCES public.users(id) ON DELETE CASCADE,
+  output INTEGER NOT NULL CHECK (output BETWEEN 0 AND 100),
+  intensity INTEGER NOT NULL CHECK (intensity BETWEEN 0 AND 100),
+  consistency INTEGER NOT NULL CHECK (consistency BETWEEN 0 AND 100),
+  toolkit INTEGER NOT NULL CHECK (toolkit BETWEEN 0 AND 100),
+  community INTEGER NOT NULL CHECK (community BETWEEN 0 AND 100),
+  refreshed_at TIMESTAMPTZ NOT NULL
+);
+
+ALTER TABLE public.profile_stats_snapshots ENABLE ROW LEVEL SECURITY;
+CREATE POLICY "Service role reads profile stats snapshots"
+  ON public.profile_stats_snapshots
+  FOR SELECT
+  TO service_role
+  USING (true);
+REVOKE ALL ON TABLE public.profile_stats_snapshots FROM PUBLIC;
+REVOKE ALL ON TABLE public.profile_stats_snapshots FROM anon;
+REVOKE ALL ON TABLE public.profile_stats_snapshots FROM authenticated;
+GRANT SELECT ON TABLE public.profile_stats_snapshots TO service_role;
+
+CREATE OR REPLACE FUNCTION public.refresh_leaderboard_snapshots()
+RETURNS VOID
+LANGUAGE plpgsql
+SECURITY DEFINER
+SET search_path = ''
+AS $$
+DECLARE
+  v_refreshed_at TIMESTAMPTZ := clock_timestamp();
+BEGIN
+  IF NOT pg_catalog.pg_try_advisory_xact_lock(
+    pg_catalog.hashtextextended('public.refresh_leaderboard_snapshots', 0)
+  ) THEN
+    RETURN;
+  END IF;
+
+  INSERT INTO public.leaderboard_snapshots (
+    period,
+    user_id,
+    username,
+    display_name,
+    avatar_url,
+    country,
+    region,
+    total_cost,
+    total_output_tokens,
+    active_days,
+    session_count,
+    refreshed_at
+  )
+  SELECT
+    source.period,
+    source.user_id,
+    source.username,
+    source.display_name,
+    source.avatar_url,
+    source.country,
+    source.region,
+    source.total_cost,
+    source.total_output_tokens,
+    source.active_days,
+    source.session_count,
+    v_refreshed_at
+  FROM (
+    SELECT
+      'day'::TEXT AS period,
+      user_id,
+      username,
+      display_name,
+      avatar_url,
+      country,
+      region,
+      total_cost,
+      total_output_tokens,
+      NULL::BIGINT AS active_days,
+      session_count::BIGINT AS session_count
+    FROM public.leaderboard_daily
+    UNION ALL
+    SELECT
+      'week'::TEXT,
+      user_id,
+      username,
+      display_name,
+      avatar_url,
+      country,
+      region,
+      total_cost,
+      total_output_tokens,
+      active_days::BIGINT,
+      NULL::BIGINT
+    FROM public.leaderboard_weekly
+    UNION ALL
+    SELECT
+      'month'::TEXT,
+      user_id,
+      username,
+      display_name,
+      avatar_url,
+      country,
+      region,
+      total_cost,
+      total_output_tokens,
+      active_days::BIGINT,
+      NULL::BIGINT
+    FROM public.leaderboard_monthly
+    UNION ALL
+    SELECT
+      'all_time'::TEXT,
+      user_id,
+      username,
+      display_name,
+      avatar_url,
+      country,
+      region,
+      total_cost,
+      total_output_tokens,
+      active_days::BIGINT,
+      NULL::BIGINT
+    FROM public.leaderboard_all_time
+  ) AS source
+  ON CONFLICT (period, user_id) DO UPDATE SET
+    username = EXCLUDED.username,
+    display_name = EXCLUDED.display_name,
+    avatar_url = EXCLUDED.avatar_url,
+    country = EXCLUDED.country,
+    region = EXCLUDED.region,
+    total_cost = EXCLUDED.total_cost,
+    total_output_tokens = EXCLUDED.total_output_tokens,
+    active_days = EXCLUDED.active_days,
+    session_count = EXCLUDED.session_count,
+    refreshed_at = EXCLUDED.refreshed_at;
+
+  -- The function executes in one transaction, so readers see either the old
+  -- complete snapshot or the new complete snapshot, never the upsert/delete
+  -- transition between them.
+  DELETE FROM public.leaderboard_snapshots
+  WHERE refreshed_at <> v_refreshed_at;
+
+  WITH usage_stats AS (
+    SELECT
+      d.user_id,
+      COALESCE(SUM(d.output_tokens), 0)::NUMERIC AS total_output,
+      COALESCE(SUM(d.cost_usd), 0)::NUMERIC AS total_cost,
+      COUNT(*)::INTEGER AS row_count
+    FROM public.daily_usage AS d
+    GROUP BY d.user_id
+  ),
+  toolkit_stats AS (
+    SELECT
+      d.user_id,
+      COUNT(DISTINCT breakdown.entry->>'model')::INTEGER AS model_count
+    FROM public.daily_usage AS d
+    CROSS JOIN LATERAL pg_catalog.jsonb_array_elements(
+      CASE
+        WHEN pg_catalog.jsonb_typeof(d.model_breakdown) = 'array'
+          THEN d.model_breakdown
+        ELSE '[]'::JSONB
+      END
+    ) AS breakdown(entry)
+    WHERE NULLIF(breakdown.entry->>'model', '') IS NOT NULL
+    GROUP BY d.user_id
+  ),
+  follower_stats AS (
+    SELECT following_id AS user_id, COUNT(*)::INTEGER AS follower_count
+    FROM public.follows
+    GROUP BY following_id
+  ),
+  kudos_stats AS (
+    SELECT p.user_id, COUNT(*)::INTEGER AS kudos_count
+    FROM public.kudos AS k
+    JOIN public.posts AS p ON p.id = k.post_id
+    GROUP BY p.user_id
+  ),
+  crew_stats AS (
+    SELECT referred_by AS user_id, COUNT(*)::INTEGER AS crew_count
+    FROM public.users
+    WHERE referred_by IS NOT NULL
+    GROUP BY referred_by
+  ),
+  profile_values AS (
+    SELECT
+      u.id AS user_id,
+      usage.user_id IS NOT NULL AS has_usage,
+      COALESCE(usage.total_output, 0) AS output_value,
+      CASE
+        WHEN COALESCE(usage.row_count, 0) > 0
+          THEN usage.total_cost / usage.row_count
+        ELSE 0
+      END AS intensity_value,
+      CASE
+        WHEN COALESCE(usage.row_count, 0) > 0
+          THEN LEAST(
+            100::NUMERIC,
+            usage.row_count::NUMERIC
+              / GREATEST(1, CURRENT_DATE - u.created_at::DATE)
+              * 100
+          )
+        ELSE 0
+      END AS consistency_value,
+      COALESCE(toolkit.model_count, 0)::NUMERIC AS toolkit_value,
+      (
+        COALESCE(followers.follower_count, 0)
+        + COALESCE(kudos.kudos_count, 0)
+        + COALESCE(crew.crew_count, 0)
+      )::NUMERIC AS community_value
+    FROM public.users AS u
+    LEFT JOIN usage_stats AS usage ON usage.user_id = u.id
+    LEFT JOIN toolkit_stats AS toolkit ON toolkit.user_id = u.id
+    LEFT JOIN follower_stats AS followers ON followers.user_id = u.id
+    LEFT JOIN kudos_stats AS kudos ON kudos.user_id = u.id
+    LEFT JOIN crew_stats AS crew ON crew.user_id = u.id
+  ),
+  distribution_size AS (
+    SELECT COUNT(*)::NUMERIC AS usage_users
+    FROM profile_values
+    WHERE has_usage
+  ),
+  usage_ranks AS (
+    SELECT
+      user_id,
+      RANK() OVER (ORDER BY output_value) - 1 AS output_lower,
+      RANK() OVER (ORDER BY intensity_value) - 1 AS intensity_lower,
+      RANK() OVER (ORDER BY consistency_value) - 1 AS consistency_lower,
+      RANK() OVER (ORDER BY toolkit_value) - 1 AS toolkit_lower,
+      RANK() OVER (ORDER BY community_value) - 1 AS community_lower
+    FROM profile_values
+    WHERE has_usage
+  ),
+  community_distribution AS (
+    SELECT
+      community_value,
+      COUNT(*)::NUMERIC AS bucket_size,
+      COALESCE(
+        SUM(COUNT(*)) OVER (
+          ORDER BY community_value
+          ROWS BETWEEN UNBOUNDED PRECEDING AND 1 PRECEDING
+        ),
+        0
+      )::NUMERIC AS lower_count
+    FROM profile_values
+    WHERE has_usage
+    GROUP BY community_value
+  ),
+  profile_percentiles AS (
+    SELECT
+      target.user_id,
+      ROUND(
+        100.0 * CASE WHEN target.has_usage THEN ranks.output_lower ELSE 0 END
+        / NULLIF(size.usage_users + CASE WHEN target.has_usage THEN 0 ELSE 1 END, 0)
+      )::INTEGER AS output,
+      ROUND(
+        100.0 * CASE WHEN target.has_usage THEN ranks.intensity_lower ELSE 0 END
+        / NULLIF(size.usage_users + CASE WHEN target.has_usage THEN 0 ELSE 1 END, 0)
+      )::INTEGER AS intensity,
+      ROUND(
+        100.0 * CASE WHEN target.has_usage THEN ranks.consistency_lower ELSE 0 END
+        / NULLIF(size.usage_users + CASE WHEN target.has_usage THEN 0 ELSE 1 END, 0)
+      )::INTEGER AS consistency,
+      ROUND(
+        100.0 * CASE WHEN target.has_usage THEN ranks.toolkit_lower ELSE 0 END
+        / NULLIF(size.usage_users + CASE WHEN target.has_usage THEN 0 ELSE 1 END, 0)
+      )::INTEGER AS toolkit,
+      ROUND(
+        100.0 * CASE
+          WHEN target.has_usage THEN ranks.community_lower
+          ELSE COALESCE(community_rank.lower_count + community_rank.bucket_size, 0)
+        END
+        / NULLIF(size.usage_users + CASE WHEN target.has_usage THEN 0 ELSE 1 END, 0)
+      )::INTEGER AS community
+    FROM profile_values AS target
+    CROSS JOIN distribution_size AS size
+    LEFT JOIN usage_ranks AS ranks ON ranks.user_id = target.user_id
+    LEFT JOIN LATERAL (
+      SELECT lower_count, bucket_size
+      FROM community_distribution
+      WHERE community_value < target.community_value
+      ORDER BY community_value DESC
+      LIMIT 1
+    ) AS community_rank ON NOT target.has_usage
+  )
+  INSERT INTO public.profile_stats_snapshots (
+    user_id,
+    output,
+    intensity,
+    consistency,
+    toolkit,
+    community,
+    refreshed_at
+  )
+  SELECT
+    user_id,
+    output,
+    intensity,
+    consistency,
+    toolkit,
+    community,
+    v_refreshed_at
+  FROM profile_percentiles
+  ON CONFLICT (user_id) DO UPDATE SET
+    output = EXCLUDED.output,
+    intensity = EXCLUDED.intensity,
+    consistency = EXCLUDED.consistency,
+    toolkit = EXCLUDED.toolkit,
+    community = EXCLUDED.community,
+    refreshed_at = EXCLUDED.refreshed_at;
+
+  DELETE FROM public.profile_stats_snapshots
+  WHERE refreshed_at <> v_refreshed_at;
+END;
+$$;
+
+REVOKE ALL ON FUNCTION public.refresh_leaderboard_snapshots() FROM PUBLIC;
+REVOKE ALL ON FUNCTION public.refresh_leaderboard_snapshots() FROM anon;
+REVOKE ALL ON FUNCTION public.refresh_leaderboard_snapshots() FROM authenticated;
+GRANT EXECUTE ON FUNCTION public.refresh_leaderboard_snapshots() TO service_role;
+
+-- Preserve timezone and freeze-day semantics while replacing the per-day loop
+-- with one indexed, set-based scan of the user's distinct usage dates.
+CREATE OR REPLACE FUNCTION public.calculate_user_streak(
+  p_user_id UUID,
+  p_freeze_days INTEGER DEFAULT 0
+)
+RETURNS INTEGER
+LANGUAGE plpgsql
+STABLE
+SECURITY DEFINER
+SET search_path = ''
+AS $$
+DECLARE
+  v_latest_date DATE;
+  v_user_timezone TEXT;
+  v_user_today DATE;
+  v_grace INTEGER;
+  v_streak INTEGER;
+BEGIN
+  SELECT COALESCE(NULLIF(timezone, ''), 'UTC')
+  INTO v_user_timezone
+  FROM public.users
+  WHERE id = p_user_id;
+
+  IF v_user_timezone IS NULL THEN
+    v_user_timezone := 'UTC';
+  END IF;
+
+  BEGIN
+    v_user_today := (pg_catalog.now() AT TIME ZONE v_user_timezone)::DATE;
+  EXCEPTION WHEN OTHERS THEN
+    v_user_today := (pg_catalog.now() AT TIME ZONE 'UTC')::DATE;
+  END;
+
+  v_grace := 1 + p_freeze_days;
+
+  SELECT MAX(date)
+  INTO v_latest_date
+  FROM public.daily_usage
+  WHERE user_id = p_user_id;
+
+  IF v_latest_date IS NULL OR v_latest_date < v_user_today - v_grace THEN
+    RETURN 0;
+  END IF;
+
+  WITH ordered_dates AS (
+    SELECT
+      date,
+      ROW_NUMBER() OVER (ORDER BY date DESC) - 1 AS date_offset
+    FROM (
+      SELECT DISTINCT date
+      FROM public.daily_usage
+      WHERE user_id = p_user_id
+        AND date <= v_latest_date
+    ) AS dates
+  )
+  SELECT COUNT(*)::INTEGER
+  INTO v_streak
+  FROM ordered_dates
+  WHERE date = v_latest_date - date_offset::INTEGER;
+
+  RETURN COALESCE(v_streak, 0);
+END;
+$$;
+
+REVOKE ALL ON FUNCTION public.calculate_user_streak(UUID, INTEGER) FROM PUBLIC;
+GRANT EXECUTE ON FUNCTION public.calculate_user_streak(UUID, INTEGER) TO anon;
+GRANT EXECUTE ON FUNCTION public.calculate_user_streak(UUID, INTEGER) TO authenticated;
+GRANT EXECUTE ON FUNCTION public.calculate_user_streak(UUID, INTEGER) TO service_role;
+
+-- Service-only one-row snapshot read. All global aggregation is performed by
+-- refresh_leaderboard_snapshots(), never in the request path.
+CREATE OR REPLACE FUNCTION public.get_profile_stats(p_user_id UUID)
+RETURNS TABLE (
+  output INTEGER,
+  intensity INTEGER,
+  consistency INTEGER,
+  toolkit INTEGER,
+  community INTEGER
+)
+LANGUAGE sql
+STABLE
+SECURITY DEFINER
+SET search_path = ''
+AS $$
+  SELECT
+    stats.output,
+    stats.intensity,
+    stats.consistency,
+    stats.toolkit,
+    stats.community
+  FROM public.profile_stats_snapshots AS stats
+  WHERE stats.user_id = p_user_id;
+$$;
+
+REVOKE ALL ON FUNCTION public.get_profile_stats(UUID) FROM PUBLIC;
+REVOKE ALL ON FUNCTION public.get_profile_stats(UUID) FROM anon;
+REVOKE ALL ON FUNCTION public.get_profile_stats(UUID) FROM authenticated;
+GRANT EXECUTE ON FUNCTION public.get_profile_stats(UUID) TO service_role;
+
+DROP FUNCTION IF EXISTS public.refresh_leaderboards();
+DROP INDEX IF EXISTS public.leaderboard_daily_user_id;
+DROP INDEX IF EXISTS public.leaderboard_weekly_user_id;
+DROP INDEX IF EXISTS public.leaderboard_monthly_user_id;
+DROP INDEX IF EXISTS public.leaderboard_all_time_user_id;
+DROP INDEX IF EXISTS public.idx_leaderboard_daily_user;
+DROP INDEX IF EXISTS public.idx_leaderboard_weekly_user;
+DROP INDEX IF EXISTS public.idx_leaderboard_monthly_user;
+DROP INDEX IF EXISTS public.idx_leaderboard_all_time_user;
+
+DO $$
+DECLARE
+  v_job RECORD;
+BEGIN
+  FOR v_job IN
+    SELECT jobid
+    FROM cron.job
+    WHERE jobname IN (
+      'refresh-leaderboard-daily',
+      'refresh-leaderboard-weekly',
+      'refresh-leaderboard-monthly',
+      'refresh-leaderboard-all-time',
+      'refresh-leaderboard-snapshots'
+    )
+  LOOP
+    PERFORM cron.unschedule(v_job.jobid);
+  END LOOP;
+END;
+$$;
+
+SELECT public.refresh_leaderboard_snapshots();
+
+SELECT cron.schedule(
+  'refresh-leaderboard-snapshots',
+  '*/10 * * * *',
+  'SELECT public.refresh_leaderboard_snapshots()'
+);
diff --git a/supabase/migrations/20260718170920_add_leaderboard_snapshot_user_index.sql b/supabase/migrations/20260718170920_add_leaderboard_snapshot_user_index.sql
new file mode 100644
index 00000000..c5527268
--- /dev/null
+++ b/supabase/migrations/20260718170920_add_leaderboard_snapshot_user_index.sql
@@ -0,0 +1,5 @@
+-- Support the leaderboard_snapshots.user_id foreign key. The query-oriented
+-- indexes begin with period, so PostgreSQL cannot use them efficiently when
+-- validating deletes or updates to the referenced user row.
+CREATE INDEX IF NOT EXISTS idx_leaderboard_snapshots_user_id
+  ON public.leaderboard_snapshots (user_id);

From 38288ffebbc2f541cba23d9ad5d54501fa90e887 Mon Sep 17 00:00:00 2001
From: Oscar Hong <oscar.hong2015@gmail.com>
Date: Sat, 18 Jul 2026 10:13:27 -0700
Subject: [PATCH 6/9] document performance architecture and scorecard

---
 docs/CHANGELOG.md |  5 ++++
 docs/DECISIONS.md | 32 ++++++++++++++++++++
 docs/perf/PLAN.md | 75 ++++++++++++++++++++++++-----------------------
 3 files changed, 76 insertions(+), 36 deletions(-)

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 641b6eaa..c5592015 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -8,10 +8,15 @@
 
 ### Added
 
+- **Authenticated performance harness and local performance gate.** A production-build Playwright harness measures warm TTFB, FCP, LCP, middleware auth, layout attribution, and the right-sidebar API across 10 core authenticated pages. The final 2026-07-18 local run passed all 10 pages: TTFB 33-42ms, LCP 94-466ms, and right-sidebar 52ms.
+- **Private leaderboard and profile-stat snapshots.** Service-role-only snapshot tables move global leaderboard and radar aggregation out of request paths. A `pg_cron` job refreshes them transactionally every 10 minutes, with existing leaderboard views retained as a rollout fallback and a covering usage index added for aggregation.
+- **Route loading shells and bundle analysis.** All authenticated gating routes now have accessible loading boundaries. `@next/bundle-analyzer` runs behind `ANALYZE=1`; making the development-only Agentation toolbar lazy removed about 39 KiB gzip from every authenticated route's initial JavaScript.
 - **Daily `/api/cron/refresh-open-stats` cron** (Vercel cron, 05:00 UTC) that runs the live open-stats aggregation and persists a durable snapshot. Closes the gap left by the activation performance work, where `/open` and the landing ticker were switched to snapshot-only reads but nothing refreshed the snapshot.
 
 ### Changed
 
+- **Authenticated requests now use asymmetric ES256 JWT verification.** Supabase signing was moved to asymmetric keys and middleware uses `getClaims()` for local JWKS-backed verification, eliminating the remote `getUser()` round trip from the request gate while retaining server-side authorization checks where user data is read.
+- **Core authenticated pages render useful initial data from the server.** Settings, search, card, and recap no longer fetch their initial state after mount. Shared public leaderboard/right-sidebar reads use bounded server caches, while private and user-scoped reads remain request-scoped to prevent cross-user leakage.
 - **All ccusage sources and the OpenAI GPT-5.6 family are now tracked.** The CLI dependency floor is `ccusage@20.0.16`, the first release with `gpt-5.6`, `gpt-5.6-sol`, `gpt-5.6-terra`, and `gpt-5.6-luna` plus request-level long-context pricing. Collection now uses current online LiteLLM pricing by default, avoiding stale embedded-price estimates. Unified rows are no longer filtered to Claude/Codex: Straude accepts every source ID emitted by ccusage, carries each row's source IDs through submission metadata, and retains source-aware handling for trusted Codex corrections. A real bundled-binary fixture locks the four GPT-5.6 variants to 440,000 total tokens and $1.917 in API-equivalent spend at the current LiteLLM rates.
 
 - **Activation funnel events are now captured exclusively server-side.** `trackActivationEvent` no longer double-captures via browser posthog-js for consented users; the consent-exempt, privacy-limited server path (which owns anonymous→user identity stitching) is the single source of truth for funnel math.
diff --git a/docs/DECISIONS.md b/docs/DECISIONS.md
index e069e0d9..7430841e 100644
--- a/docs/DECISIONS.md
+++ b/docs/DECISIONS.md
@@ -1,5 +1,37 @@
 # Architecture & Design Decisions
 
+## Authenticated Request Verification Uses Asymmetric ES256 Claims (2026-07-18)
+
+**Decision:** Use Supabase asymmetric ES256 signing keys and verify authenticated request cookies in middleware with `getClaims()`. Keep authorization and data access on trusted server boundaries; the claims check replaces the remote middleware identity round trip, not application authorization.
+
+**Why:** The previous middleware `getUser()` call contacted Supabase on every navigation before the application could render. Local JWKS-backed claim verification reduced measured middleware auth from 25-30ms to 0-1ms and helped every authenticated route pass the TTFB gate.
+
+**Tradeoff:** Signing-key rollout and CLI authentication must be regression-tested together. Claim verification proves the signed identity, while pages and APIs must still enforce privacy and ownership when reading data.
+
+## Private Periodic Snapshots for Public Aggregate Data (2026-07-18)
+
+**Decision:** Materialize leaderboard rows and profile radar percentiles into private, service-role-only snapshot tables. Refresh both transactionally with one SECURITY DEFINER function scheduled by `pg_cron` every 10 minutes. Request paths read snapshots first and retain the existing leaderboard views as a rollout fallback.
+
+**Why:** The data is public aggregate output, but computing it required repeated full-table scans. Private snapshots allow bounded `unstable_cache` use for the shared result without exposing the underlying tables or accidentally caching personalized data. One transaction ensures readers see either the previous complete snapshot or the next complete snapshot.
+
+**Tradeoff:** Rankings and radar scores may be up to 10 minutes stale. The migration requires a production apply plus an advisor and EXPLAIN comparison; until then, the application falls back to existing views.
+
+## Server Initial Data, Route Loading, and Bundle Analysis (2026-07-18)
+
+**Decision:** Render initial settings, search, card, and recap data on the server; keep subsequent interactions client-side. Give every authenticated gating route an accessible `loading.tsx` boundary. Run `@next/bundle-analyzer` only when `ANALYZE=1`, using its required webpack build while normal production builds remain on Turbopack.
+
+**Why:** Fetch-on-mount delayed useful content and made placeholders the initial page state. Server initial data removes that waterfall, loading boundaries preserve responsive navigation, and the analyzer exposed a development-only Agentation import that cost every authenticated route about 39 KiB gzip.
+
+**Tradeoff:** The actual useful page can become the LCP candidate, so a metric may rise from a trivial loading label even when the page is more usable. Heavy dependencies that were already correctly lazy-loaded remain unchanged.
+
+## Local Performance Gate and Post-Deploy RUM (2026-07-18)
+
+**Decision:** Gate the mission locally on `bun run perf:check`: TTFB under 300ms and LCP under 500ms for all 10 authenticated pages in a production build. Treat PostHog p75 web vitals as a post-deploy honesty check, not a blocker for the local goal.
+
+**Result:** The 2026-07-18 17:04 run passed 10/10 pages, with TTFB 33-42ms, LCP 94-466ms, and the right-sidebar API at 52ms. M3 waterfall work and the combined M4/M5 snapshot/cache work landed before this final score; M6 then completed server-first rendering and bundle reductions.
+
+**Remaining acceptance:** Repeat the clean local scorecard once more for the two-consecutive-run M7 criterion, apply and verify the database migration in production, and confirm `$web_vitals` after deploy.
+
 ## Delegate all usage accounting to bundled ccusage v20 (2026-06-09)
 
 **Decision:** All supported coding-agent ingestion runs through a single bundled `ccusage` (compatible `^20.0.16` range) invoked as a native binary, with a `>=20.0.16` accuracy floor validated against the bundled package version. Straude's native collectors, token normalizer, source whitelist, and pricing aliases are deleted; Straude only parses ccusage's unified daily JSON into storage rows.
diff --git a/docs/perf/PLAN.md b/docs/perf/PLAN.md
index edea2fef..4427bb1d 100644
--- a/docs/perf/PLAN.md
+++ b/docs/perf/PLAN.md
@@ -3,34 +3,35 @@
 ## Milestone status
 
 - [x] M0 harness — acceptance: `bun run perf` scorecard for all 10 pages; `BASELINE.md` ready for the owner commit
-- [ ] M1 PostHog RUM — acceptance: `$web_vitals` in PostHog after deploy
+- [ ] M1 PostHog RUM — code/docs complete; post-deploy `$web_vitals` acceptance remains non-gating
 - [x] M2 auth consolidation — acceptance: TTFB drop; no direct `auth.getUser()` in (app); tests green
-- [ ] M3 waterfalls/duplicates — acceptance: per-page deltas; no regressions
-- [ ] M4 DB layer — acceptance: EXPLAIN deltas; advisors clean; tests green
-- [ ] M5 server caching — acceptance: right-sidebar timing; leakage test green
-- [ ] M6 rendering/bundle — acceptance: analyzer baseline; FCP/LCP deltas
-- [ ] M7 goal loop — acceptance: two consecutive clean `bun run perf:check` passes
+- [x] M3 waterfalls/duplicates — completed with M4/M5 before the final scorecard; tests green
+- [x] M4 DB layer — snapshot migration and EXPLAIN baseline ready; production apply/advisor comparison remains a deploy check
+- [x] M5 server caching — public snapshot reads cached; private/user-scoped data remains request-scoped; leakage tests green
+- [x] M6 rendering/bundle — loading shells, server initial data, and analyzer baseline complete
+- [ ] M7 goal loop — 10/10 local pass recorded; second consecutive clean-checkout pass remains
 
 ## Latest scorecard
 
-Captured 2026-07-18 after M2 auth consolidation. Targets: TTFB <300ms and
-LCP <500ms. Nine of 10 pages pass both gates; all 10 pass the TTFB gate.
+Captured 2026-07-18 at 17:04 after M3 and the combined M4/M5 work, followed
+by M6 rendering and bundle changes. Targets: TTFB <300ms and LCP <500ms.
+All 10 pages pass both local gates.
 
 | Page | TTFB | FCP | LCP | Server-Timing | Layout attribution | Pass |
 |---|---:|---:|---:|---|---|:---:|
-| `/feed` | 37ms | 96ms | 448ms | mw-auth:0ms | layoutAuth:2ms layoutProfile:29ms | PASS |
-| `/leaderboard` | 38ms | 94ms | 452ms | mw-auth:1ms | layoutAuth:2ms layoutProfile:31ms | PASS |
-| `/u/[username]` | 37ms | 96ms | 480ms | mw-auth:1ms | layoutAuth:2ms layoutProfile:30ms | PASS |
-| `/post/[id]` | 36ms | 92ms | 438ms | mw-auth:1ms | layoutAuth:3ms layoutProfile:29ms | PASS |
-| `/notifications` | 34ms | 92ms | 434ms | mw-auth:1ms | layoutAuth:2ms layoutProfile:28ms | PASS |
-| `/messages` | 59ms | 116ms | 470ms | mw-auth:1ms | layoutAuth:1ms layoutProfile:28ms | PASS |
-| `/prompts` | 59ms | 116ms | 116ms | mw-auth:0ms | layoutAuth:2ms layoutProfile:28ms | PASS |
-| `/recap` | 35ms | 92ms | 552ms | mw-auth:0ms | layoutAuth:1ms layoutProfile:29ms | FAIL |
-| `/settings` | 33ms | 88ms | 132ms | mw-auth:0ms | layoutAuth:2ms layoutProfile:27ms | PASS |
-| `/search` | 32ms | 84ms | 428ms | mw-auth:0ms | layoutAuth:2ms layoutProfile:27ms | PASS |
+| `/feed` | 38ms | 94ms | 448ms | mw-auth:1ms | layoutAuth:2ms layoutProfile:30ms | PASS |
+| `/leaderboard` | 38ms | 98ms | 452ms | mw-auth:1ms | layoutAuth:2ms layoutProfile:31ms | PASS |
+| `/u/[username]` | 37ms | 94ms | 466ms | mw-auth:1ms | layoutAuth:2ms layoutProfile:29ms | PASS |
+| `/post/[id]` | 37ms | 94ms | 444ms | mw-auth:1ms | layoutAuth:2ms layoutProfile:29ms | PASS |
+| `/notifications` | 37ms | 92ms | 438ms | mw-auth:1ms | layoutAuth:1ms layoutProfile:30ms | PASS |
+| `/messages` | 34ms | 110ms | 440ms | mw-auth:0ms | layoutAuth:2ms layoutProfile:28ms | PASS |
+| `/prompts` | 35ms | 94ms | 94ms | mw-auth:1ms | layoutAuth:2ms layoutProfile:28ms | PASS |
+| `/recap` | 39ms | 94ms | 442ms | mw-auth:0ms | layoutAuth:2ms layoutProfile:32ms | PASS |
+| `/settings` | 42ms | 100ms | 454ms | mw-auth:0ms | layoutAuth:1ms layoutProfile:36ms | PASS |
+| `/search` | 33ms | 88ms | 434ms | mw-auth:0ms | layoutAuth:1ms layoutProfile:28ms | PASS |
 
-Right-sidebar API: 102ms. The original pre-M2 baseline and full method notes
-are in [`BASELINE.md`](BASELINE.md).
+Right-sidebar API: 52ms. **10/10 pages passing.** The original pre-M2 baseline
+and full method notes are in [`BASELINE.md`](BASELINE.md).
 
 
 ## Context
@@ -117,22 +118,24 @@ Each milestone is independently committable; record scorecard-before/after in `d
 - Optional: `@lhci/cli` in GitHub Actions for public pages (authed scorecard stays local — needs secrets).
 - **Acceptance:** two consecutive `perf:check` passes on a clean checkout → mission complete; update `docs/CHANGELOG.md` + `docs/DECISIONS.md` (JWT keys, pg_cron, snapshot pattern).
 
-## Current state snapshot (as of 2026-07-18, M2 complete)
-
-- **Done:** M0 production-build Playwright harness, authenticated perf fixture,
-  10-page scorecard, right-sidebar measurement, strict goal gate, timing
-  attribution, and durable baseline. `bun run perf` completed 12/12 Playwright
-  tests and recorded 5/10 pages passing both gates.
-- **M2 result:** the ES256-backed `getClaims()` path reduced middleware auth
-  attribution from 25-30ms to 0-1ms and median page TTFB from 82-100ms to
-  32-59ms. Nine of 10 pages now pass both gates.
-- **Remaining gate:** `/recap` LCP is 552ms. Every other page is below both
-  thresholds; the right-sidebar median improved from 125ms to 102ms.
-- **In flight:** M3 page-query deduplication and M6 rendering/bundle work.
-  M1 code and query documentation are complete locally, but production
-  `$web_vitals` visibility still requires a deploy.
-- **Exact next action:** finish M3 and M6, rerun `bun run perf:check`, and work
-  `/recap` first if it remains above the LCP gate.
+## Current state snapshot (as of 2026-07-18, local performance gate passing)
+
+- **Local result:** the 17:04 production-build harness completed 12/12
+  Playwright checks with all 10 authenticated pages below both gates. TTFB is
+  33-42ms, LCP is 94-466ms, and the right-sidebar median is 52ms.
+- **Auth:** asymmetric ES256 signing plus `getClaims()` reduced middleware auth
+  attribution from 25-30ms to 0-1ms while preserving authenticated behavior.
+- **M3-M5:** waterfall/query deduplication and the private, service-only
+  leaderboard/profile snapshot pattern were completed together before the
+  final scorecard. Public snapshot reads use bounded shared caching; per-user
+  data is not shared-cached. The pg_cron migration refreshes snapshots every
+  10 minutes, but still requires production apply and advisor comparison.
+- **M6:** every gating route has a loading boundary, initial settings/search/
+  card/recap data is server-rendered, and bundle analysis removed about 39 KiB
+  gzip of development-only JavaScript from each authenticated route.
+- **Remaining checks:** run a second consecutive `bun run perf:check` on a
+  clean checkout for M7. After deploy, confirm PostHog `$web_vitals` for M1;
+  RUM is an honesty check and does not gate the local mission.
 
 ## Implementation notes
 

From e0ba05b41c1404191f69e394312baa7a2ef97b5b Mon Sep 17 00:00:00 2001
From: Oscar Hong <oscar.hong2015@gmail.com>
Date: Sat, 18 Jul 2026 10:17:46 -0700
Subject: [PATCH 7/9] record consecutive passing performance gates

---
 docs/perf/PLAN.md | 55 +++++++++++++++++++++++++----------------------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/docs/perf/PLAN.md b/docs/perf/PLAN.md
index 4427bb1d..e1dae94f 100644
--- a/docs/perf/PLAN.md
+++ b/docs/perf/PLAN.md
@@ -6,32 +6,34 @@
 - [ ] M1 PostHog RUM — code/docs complete; post-deploy `$web_vitals` acceptance remains non-gating
 - [x] M2 auth consolidation — acceptance: TTFB drop; no direct `auth.getUser()` in (app); tests green
 - [x] M3 waterfalls/duplicates — completed with M4/M5 before the final scorecard; tests green
-- [x] M4 DB layer — snapshot migration and EXPLAIN baseline ready; production apply/advisor comparison remains a deploy check
+- [x] M4 DB layer — snapshots live; EXPLAIN and advisor comparison clean
 - [x] M5 server caching — public snapshot reads cached; private/user-scoped data remains request-scoped; leakage tests green
 - [x] M6 rendering/bundle — loading shells, server initial data, and analyzer baseline complete
-- [ ] M7 goal loop — 10/10 local pass recorded; second consecutive clean-checkout pass remains
+- [x] M7 goal loop — two consecutive clean-checkout `perf:check` runs passed 10/10
 
 ## Latest scorecard
 
-Captured 2026-07-18 at 17:04 after M3 and the combined M4/M5 work, followed
-by M6 rendering and bundle changes. Targets: TTFB <300ms and LCP <500ms.
-All 10 pages pass both local gates.
+Captured 2026-07-18 at 17:16 after M3-M6, the live snapshot migrations, and
+the second consecutive clean-checkout goal run. Targets: TTFB <300ms and LCP
+<500ms. All 10 pages pass both local gates.
 
 | Page | TTFB | FCP | LCP | Server-Timing | Layout attribution | Pass |
 |---|---:|---:|---:|---|---|:---:|
-| `/feed` | 38ms | 94ms | 448ms | mw-auth:1ms | layoutAuth:2ms layoutProfile:30ms | PASS |
-| `/leaderboard` | 38ms | 98ms | 452ms | mw-auth:1ms | layoutAuth:2ms layoutProfile:31ms | PASS |
-| `/u/[username]` | 37ms | 94ms | 466ms | mw-auth:1ms | layoutAuth:2ms layoutProfile:29ms | PASS |
-| `/post/[id]` | 37ms | 94ms | 444ms | mw-auth:1ms | layoutAuth:2ms layoutProfile:29ms | PASS |
-| `/notifications` | 37ms | 92ms | 438ms | mw-auth:1ms | layoutAuth:1ms layoutProfile:30ms | PASS |
-| `/messages` | 34ms | 110ms | 440ms | mw-auth:0ms | layoutAuth:2ms layoutProfile:28ms | PASS |
-| `/prompts` | 35ms | 94ms | 94ms | mw-auth:1ms | layoutAuth:2ms layoutProfile:28ms | PASS |
-| `/recap` | 39ms | 94ms | 442ms | mw-auth:0ms | layoutAuth:2ms layoutProfile:32ms | PASS |
-| `/settings` | 42ms | 100ms | 454ms | mw-auth:0ms | layoutAuth:1ms layoutProfile:36ms | PASS |
-| `/search` | 33ms | 88ms | 434ms | mw-auth:0ms | layoutAuth:1ms layoutProfile:28ms | PASS |
-
-Right-sidebar API: 52ms. **10/10 pages passing.** The original pre-M2 baseline
-and full method notes are in [`BASELINE.md`](BASELINE.md).
+| `/feed` | 35ms | 92ms | 442ms | mw-auth:1ms | layoutAuth:2ms layoutProfile:28ms | PASS |
+| `/leaderboard` | 44ms | 108ms | 160ms | mw-auth:1ms | layoutAuth:3ms layoutProfile:36ms | PASS |
+| `/u/[username]` | 43ms | 98ms | 466ms | mw-auth:1ms | layoutAuth:2ms layoutProfile:36ms | PASS |
+| `/post/[id]` | 36ms | 90ms | 432ms | mw-auth:0ms | layoutAuth:2ms layoutProfile:29ms | PASS |
+| `/notifications` | 35ms | 92ms | 438ms | mw-auth:1ms | layoutAuth:1ms layoutProfile:29ms | PASS |
+| `/messages` | 43ms | 100ms | 444ms | mw-auth:1ms | layoutAuth:2ms layoutProfile:36ms | PASS |
+| `/prompts` | 42ms | 98ms | 98ms | mw-auth:0ms | layoutAuth:2ms layoutProfile:35ms | PASS |
+| `/recap` | 39ms | 94ms | 434ms | mw-auth:1ms | layoutAuth:2ms layoutProfile:32ms | PASS |
+| `/settings` | 43ms | 100ms | 444ms | mw-auth:1ms | layoutAuth:2ms layoutProfile:36ms | PASS |
+| `/search` | 37ms | 92ms | 430ms | mw-auth:0ms | layoutAuth:1ms layoutProfile:31ms | PASS |
+
+Right-sidebar API: 30ms. **10/10 pages passing.** The immediately preceding
+clean run at 17:15 also passed 10/10 (TTFB 33-43ms, LCP 88-466ms, sidebar
+30ms). The original pre-M2 baseline and full method notes are in
+[`BASELINE.md`](BASELINE.md).
 
 
 ## Context
@@ -120,22 +122,23 @@ Each milestone is independently committable; record scorecard-before/after in `d
 
 ## Current state snapshot (as of 2026-07-18, local performance gate passing)
 
-- **Local result:** the 17:04 production-build harness completed 12/12
-  Playwright checks with all 10 authenticated pages below both gates. TTFB is
-  33-42ms, LCP is 94-466ms, and the right-sidebar median is 52ms.
+- **Local result:** consecutive 17:15 and 17:16 production-build harness runs
+  each completed 12/12 Playwright checks with all 10 authenticated pages below
+  both gates. The second run measured TTFB at 35-44ms, LCP at 98-466ms, and
+  the right-sidebar median at 30ms.
 - **Auth:** asymmetric ES256 signing plus `getClaims()` reduced middleware auth
   attribution from 25-30ms to 0-1ms while preserving authenticated behavior.
 - **M3-M5:** waterfall/query deduplication and the private, service-only
   leaderboard/profile snapshot pattern were completed together before the
   final scorecard. Public snapshot reads use bounded shared caching; per-user
-  data is not shared-cached. The pg_cron migration refreshes snapshots every
-  10 minutes, but still requires production apply and advisor comparison.
+  data is not shared-cached. The live pg_cron job refreshes snapshots every
+  10 minutes. Production verification found 355 leaderboard rows and 561
+  profile-stat rows; advisors returned to the exact pre-change baseline.
 - **M6:** every gating route has a loading boundary, initial settings/search/
   card/recap data is server-rendered, and bundle analysis removed about 39 KiB
   gzip of development-only JavaScript from each authenticated route.
-- **Remaining checks:** run a second consecutive `bun run perf:check` on a
-  clean checkout for M7. After deploy, confirm PostHog `$web_vitals` for M1;
-  RUM is an honesty check and does not gate the local mission.
+- **Remaining check:** after deploy, confirm PostHog `$web_vitals` for M1. RUM
+  is an honesty check and does not gate the completed local mission.
 
 ## Implementation notes
 

From 5bb2e1b51d1042ce548e89fa652e249cc174b389 Mon Sep 17 00:00:00 2001
From: Oscar Hong <oscar.hong2015@gmail.com>
Date: Sat, 18 Jul 2026 10:25:35 -0700
Subject: [PATCH 8/9] exclude perf harness from default e2e suite

---
 apps/web/playwright.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/web/playwright.config.ts b/apps/web/playwright.config.ts
index fbda1f78..40605ed6 100644
--- a/apps/web/playwright.config.ts
+++ b/apps/web/playwright.config.ts
@@ -5,6 +5,7 @@ const useDevServer = process.env.PLAYWRIGHT_USE_DEV_SERVER === "1";
 
 export default defineConfig({
   testDir: "./e2e",
+  testIgnore: "**/perf/**",
   fullyParallel: false,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,

From f27cebb913e55b76c2cbec3a96b400056106ea4d Mon Sep 17 00:00:00 2001
From: Oscar Hong <oscar.hong2015@gmail.com>
Date: Sat, 18 Jul 2026 15:07:56 -0700
Subject: [PATCH 9/9] record third independent perf gate verification

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/perf/PLAN.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/docs/perf/PLAN.md b/docs/perf/PLAN.md
index e1dae94f..a26e61ac 100644
--- a/docs/perf/PLAN.md
+++ b/docs/perf/PLAN.md
@@ -35,6 +35,11 @@ clean run at 17:15 also passed 10/10 (TTFB 33-43ms, LCP 88-466ms, sidebar
 30ms). The original pre-M2 baseline and full method notes are in
 [`BASELINE.md`](BASELINE.md).
 
+A third independent verification run at 22:07 UTC (fresh session, clean tree)
+also passed 10/10: TTFB 35-46ms, LCP 96-492ms, sidebar 29ms. Note the LCP
+margin is thin (most pages 440-490ms against the 500ms gate) — regressions of
+even ~50ms on the client render path will trip the gate, which is intended.
+
 
 ## Context