diff --git a/apps/backend/src/app/api/latest/ai/query/[mode]/route.ts b/apps/backend/src/app/api/latest/ai/query/[mode]/route.ts
index c578f77235..82f5fbbe00 100644
--- a/apps/backend/src/app/api/latest/ai/query/[mode]/route.ts
+++ b/apps/backend/src/app/api/latest/ai/query/[mode]/route.ts
@@ -5,6 +5,7 @@ import { getTools, validateToolNames } from "@/lib/ai/tools";
 import { listManagedProjectIds } from "@/lib/projects";
 import { SmartResponse } from "@/route-handlers/smart-response";
 import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
+import { validateImageAttachments } from "@stackframe/stack-shared/dist/ai/image-limits";
 import { yupMixed, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
 import { StatusError } from "@stackframe/stack-shared/dist/utils/errors";
 import { Json } from "@stackframe/stack-shared/dist/utils/json";
@@ -31,7 +32,6 @@ export const POST = createSmartRouteHandler({
     const isAuthenticated = fullReq.auth != null;
     const { quality, speed, systemPrompt: systemPromptId, tools: toolNames, messages, projectId } = body;
 
-    // Verify user has access to the target project
     if (projectId != null) {
       if (fullReq.auth?.project.id !== "internal") {
         throw new StatusError(StatusError.Forbidden, "You do not have access to this project");
@@ -46,12 +46,31 @@ export const POST = createSmartRouteHandler({
       }
     }
 
+    const imageValidationResult = validateImageAttachments(messages);
+    if (!imageValidationResult.ok) {
+      throw new StatusError(StatusError.BadRequest, imageValidationResult.reason);
+    }
+
     const model = selectModel(quality, speed, isAuthenticated);
     const systemPrompt = getFullSystemPrompt(systemPromptId);
     const tools = await getTools(toolNames, { auth: fullReq.auth, targetProjectId: projectId });
     const toolsArg = Object.keys(tools).length > 0 ? tools : undefined;
     const isDocsOrSearch = systemPromptId === "docs-ask-ai" || systemPromptId === "command-center-ask-ai";
-    const stepLimit = toolsArg == null ? 1 : isDocsOrSearch ? 50 : 5;
+    // create-dashboard now does an inspection loop (queryAnalytics) before calling updateDashboard,
+    // so it needs room for ~3 exploratory queries + the final tool call + some retry slack.
+    const isCreateDashboard = systemPromptId === "create-dashboard";
+    // build-analytics-query aims for one-shot queries with complete schema
+    // knowledge, but needs a few steps for retries on errors or follow-ups.
+    const isBuildAnalyticsQuery = systemPromptId === "build-analytics-query";
+    const stepLimit = toolsArg == null
+      ? 1
+      : isDocsOrSearch
+        ? 50
+        : isCreateDashboard
+          ? 12
+          : isBuildAnalyticsQuery
+            ? 5
+            : 5;
 
     if (mode === "stream") {
       const result = streamText({
diff --git a/apps/backend/src/app/api/latest/internal/metrics/route.test.ts b/apps/backend/src/app/api/latest/internal/metrics/route.test.ts
new file mode 100644
index 0000000000..9be2a91ad2
--- /dev/null
+++ b/apps/backend/src/app/api/latest/internal/metrics/route.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { getMetricsWindowBounds, isMetricsRevenueInvoiceStatus } from "./route";
+
+describe("internal metrics helpers", () => {
+  it("only counts paid and succeeded invoices as revenue", () => {
+    expect(isMetricsRevenueInvoiceStatus("paid")).toBe(true);
+    expect(isMetricsRevenueInvoiceStatus("succeeded")).toBe(true);
+    expect(isMetricsRevenueInvoiceStatus("failed")).toBe(false);
+    expect(isMetricsRevenueInvoiceStatus("uncollectible")).toBe(false);
+    expect(isMetricsRevenueInvoiceStatus(null)).toBe(false);
+  });
+
+  it("derives a single UTC-aligned rolling window from one clock", () => {
+    const { todayUtc, since, untilExclusive } = getMetricsWindowBounds(new Date("2026-04-13T23:59:59.999Z"));
+
+    expect(todayUtc.toISOString()).toBe("2026-04-13T00:00:00.000Z");
+    expect(since.toISOString()).toBe("2026-03-14T00:00:00.000Z");
+    expect(untilExclusive.toISOString()).toBe("2026-04-14T00:00:00.000Z");
+  });
+});
diff --git a/apps/backend/src/app/api/latest/internal/metrics/route.tsx b/apps/backend/src/app/api/latest/internal/metrics/route.tsx
index d6f2ad6192..2c1162cfac 100644
--- a/apps/backend/src/app/api/latest/internal/metrics/route.tsx
+++ b/apps/backend/src/app/api/latest/internal/metrics/route.tsx
@@ -1,28 +1,69 @@
+import { Prisma } from "@/generated/prisma/client";
+import { EmailOutboxSimpleStatus } from "@/generated/prisma/enums";
 import { getClickhouseAdminClient } from "@/lib/clickhouse";
+import { ClickHouseError } from "@clickhouse/client";
+import { ActivitySplit, buildSplitFromDailyEntitySets } from "@/lib/metrics-activity-split";
 import { Tenancy } from "@/lib/tenancies";
-import { getPrismaClientForTenancy, PrismaClientTransaction, getPrismaSchemaForTenancy, sqlQuoteIdent } from "@/prisma-client";
+import { getPrismaClientForTenancy, getPrismaSchemaForTenancy, sqlQuoteIdent } from "@/prisma-client";
 import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
 import { KnownErrors } from "@stackframe/stack-shared";
 import { UsersCrud } from "@stackframe/stack-shared/dist/interface/crud/users";
-import { adaptSchema, adminAuthTypeSchema, yupArray, yupMixed, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
-import yup from 'yup';
+import {
+  type MetricsDataPoint,
+  MetricsAnalyticsOverviewSchema,
+  MetricsAuthOverviewSchema,
+  MetricsDataPointsSchema as DataPointsSchema,
+  MetricsEmailOverviewSchema,
+  MetricsLoginMethodEntrySchema,
+  MetricsPaymentsOverviewSchema,
+  MetricsRecentUserSchema,
+} from "@stackframe/stack-shared/dist/interface/admin-metrics";
+import { captureError, StackAssertionError } from "@stackframe/stack-shared/dist/utils/errors";
+import { isUuid } from "@stackframe/stack-shared/dist/utils/uuids";
+import { adaptSchema, adminAuthTypeSchema, yupArray, yupMixed, yupNumber, yupObject, yupRecord, yupString } from "@stackframe/stack-shared/dist/schema-fields";
 import { userFullInclude, userPrismaToCrud, usersCrudHandlers } from "../../users/crud";
 
-type DataPoints = yup.InferType<typeof DataPointsSchema>;
+type DataPoints = MetricsDataPoint[];
 
 const MAX_USERS_FOR_COUNTRY_SAMPLE = 10_000;
+const METRICS_WINDOW_DAYS = 30;
+const METRICS_WINDOW_MS = METRICS_WINDOW_DAYS * 24 * 60 * 60 * 1000;
+const ONE_DAY_MS = 24 * 60 * 60 * 1000;
+export const METRICS_REVENUE_INVOICE_STATUSES = ["paid", "succeeded"] as const;
+const METRICS_REVENUE_INVOICE_STATUSES_SQL = Prisma.raw(
+  METRICS_REVENUE_INVOICE_STATUSES.map((status) => `'${status}'`).join(", "),
+);
+const METRICS_REVENUE_INVOICE_STATUS_SET = new Set<string>(METRICS_REVENUE_INVOICE_STATUSES);
 
-const DataPointsSchema = yupArray(yupObject({
-  date: yupString().defined(),
-  activity: yupNumber().defined(),
-}).defined()).defined();
+export function isMetricsRevenueInvoiceStatus(status: string | null | undefined): boolean {
+  return status != null && METRICS_REVENUE_INVOICE_STATUS_SET.has(status);
+}
+
+export function getMetricsWindowBounds(now: Date): {
+  todayUtc: Date,
+  since: Date,
+  untilExclusive: Date,
+} {
+  const todayUtc = new Date(now);
+  todayUtc.setUTCHours(0, 0, 0, 0);
+  return {
+    todayUtc,
+    since: new Date(todayUtc.getTime() - METRICS_WINDOW_MS),
+    untilExclusive: new Date(todayUtc.getTime() + ONE_DAY_MS),
+  };
+}
 
 function formatClickhouseDateTimeParam(date: Date): string {
   // ClickHouse DateTime params are passed as "YYYY-MM-DDTHH:MM:SS" (no timezone); treat them as UTC.
   return date.toISOString().slice(0, 19);
 }
 
-async function loadUsersByCountry(tenancy: Tenancy, prisma: PrismaClientTransaction, includeAnonymous: boolean = false): Promise<Record<string, number>> {
+function normalizeUuidFromEvent(value: string): string | null {
+  const normalized = value.trim().toLowerCase();
+  return isUuid(normalized) ? normalized : null;
+}
+
+async function loadUsersByCountry(tenancy: Tenancy, includeAnonymous: boolean = false): Promise<Record<string, number>> {
   const clickhouseClient = getClickhouseAdminClient();
   const res = await clickhouseClient.query({
     query: `
@@ -106,8 +147,8 @@ async function loadTotalUsers(tenancy: Tenancy, now: Date, includeAnonymous: boo
 async function loadDailyActiveUsers(tenancy: Tenancy, now: Date, includeAnonymous: boolean = false) {
   const todayUtc = new Date(now);
   todayUtc.setUTCHours(0, 0, 0, 0);
-  const since = new Date(todayUtc.getTime() - 30 * 24 * 60 * 60 * 1000);
-  const untilExclusive = new Date(todayUtc.getTime() + 24 * 60 * 60 * 1000);
+  const since = new Date(todayUtc.getTime() - METRICS_WINDOW_MS);
+  const untilExclusive = new Date(todayUtc.getTime() + ONE_DAY_MS);
 
   const clickhouseClient = getClickhouseAdminClient();
   const result = await clickhouseClient.query({
@@ -140,13 +181,13 @@ async function loadDailyActiveUsers(tenancy: Tenancy, now: Date, includeAnonymou
   const dauByDay = new Map<string, number>();
   for (const row of rows) {
     // ClickHouse returns dates/datetimes without timezone, treat as UTC.
-    const dayKey = new Date(row.day + 'Z').toISOString().split('T')[0];
+    const dayKey = row.day.split('T')[0];
     dauByDay.set(dayKey, Number(row.dau));
   }
 
   const out: DataPoints = [];
-  for (let i = 0; i <= 30; i += 1) {
-    const day = new Date(since.getTime() + i * 24 * 60 * 60 * 1000);
+  for (let i = 0; i <= METRICS_WINDOW_DAYS; i += 1) {
+    const day = new Date(since.getTime() + i * ONE_DAY_MS);
     const dayKey = day.toISOString().split('T')[0];
     out.push({
       date: dayKey,
@@ -156,6 +197,163 @@ async function loadDailyActiveUsers(tenancy: Tenancy, now: Date, includeAnonymou
   return out;
 }
 
+async function loadDailyActiveUsersSplit(tenancy: Tenancy, now: Date, includeAnonymous: boolean): Promise<ActivitySplit> {
+  const todayUtc = new Date(now);
+  todayUtc.setUTCHours(0, 0, 0, 0);
+  const since = new Date(todayUtc.getTime() - METRICS_WINDOW_MS);
+  const untilExclusive = new Date(todayUtc.getTime() + ONE_DAY_MS);
+  const clickhouseClient = getClickhouseAdminClient();
+  const schema = await getPrismaSchemaForTenancy(tenancy);
+  const prisma = await getPrismaClientForTenancy(tenancy);
+
+  const userRows = await clickhouseClient.query({
+    query: `
+      SELECT
+        toDate(event_at) AS day,
+        assumeNotNull(user_id) AS user_id
+      FROM analytics_internal.events
+      WHERE event_type = '$token-refresh'
+        AND project_id = {projectId:String}
+        AND branch_id = {branchId:String}
+        AND user_id IS NOT NULL
+        AND event_at >= {since:DateTime}
+        AND event_at < {untilExclusive:DateTime}
+        AND ({includeAnonymous:UInt8} = 1 OR JSONExtract(toJSONString(data), 'is_anonymous', 'UInt8') = 0)
+      GROUP BY day, user_id
+    `,
+    query_params: {
+      projectId: tenancy.project.id,
+      branchId: tenancy.branchId,
+      since: formatClickhouseDateTimeParam(since),
+      untilExclusive: formatClickhouseDateTimeParam(untilExclusive),
+      includeAnonymous: includeAnonymous ? 1 : 0,
+    },
+    format: "JSONEachRow",
+  }).then((result) => result.json() as Promise<{ day: string, user_id: string }[]>);
+
+  const sanitizedUserRows = userRows.flatMap((row) => {
+    const userId = normalizeUuidFromEvent(row.user_id);
+    if (userId == null) {
+      return [];
+    }
+    return [{ ...row, user_id: userId }];
+  });
+
+  const activeUserIds = [...new Set(sanitizedUserRows.map((row) => row.user_id))];
+  const users: { projectUserId: string, signedUpAtOrCreatedAt: Date }[] = activeUserIds.length === 0
+    ? []
+    : await prisma.$replica().$queryRaw<{ projectUserId: string, signedUpAtOrCreatedAt: Date }[]>`
+        SELECT
+          "projectUserId"::text AS "projectUserId",
+          COALESCE("signedUpAt", "createdAt") AS "signedUpAtOrCreatedAt"
+        FROM ${sqlQuoteIdent(schema)}."ProjectUser"
+        WHERE "tenancyId" = ${tenancy.id}::UUID
+          AND "projectUserId" IN (${Prisma.join(activeUserIds.map((id) => Prisma.sql`${id}::UUID`))})
+          ${includeAnonymous ? Prisma.empty : Prisma.sql`AND "isAnonymous" = false`}
+      `;
+
+  const orderedDays: string[] = [];
+  const idsByDay = new Map<string, Set<string>>();
+  for (let i = 0; i <= METRICS_WINDOW_DAYS; i += 1) {
+    const date = new Date(since.getTime() + i * ONE_DAY_MS).toISOString().split('T')[0];
+    orderedDays.push(date);
+    idsByDay.set(date, new Set<string>());
+  }
+  for (const row of sanitizedUserRows) {
+    const day = row.day.split('T')[0];
+    const daySet = idsByDay.get(day);
+    if (daySet) {
+      daySet.add(row.user_id);
+    }
+  }
+
+  const createdDayByUserId = new Map<string, string>(
+    users.map((user) => [user.projectUserId, user.signedUpAtOrCreatedAt.toISOString().split('T')[0]])
+  );
+
+  return buildSplitFromDailyEntitySets({
+    orderedDays,
+    entityIdsByDay: idsByDay,
+    createdDayByEntityId: createdDayByUserId,
+  });
+}
+
+async function loadDailyActiveTeamsSplit(tenancy: Tenancy, now: Date): Promise<ActivitySplit> {
+  const todayUtc = new Date(now);
+  todayUtc.setUTCHours(0, 0, 0, 0);
+  const since = new Date(todayUtc.getTime() - METRICS_WINDOW_MS);
+  const untilExclusive = new Date(todayUtc.getTime() + ONE_DAY_MS);
+  const clickhouseClient = getClickhouseAdminClient();
+  const schema = await getPrismaSchemaForTenancy(tenancy);
+  const prisma = await getPrismaClientForTenancy(tenancy);
+
+  const teamRows = await clickhouseClient.query({
+    query: `
+      SELECT
+        toDate(event_at) AS day,
+        assumeNotNull(team_id) AS team_id
+      FROM analytics_internal.events
+      WHERE event_type = '$token-refresh'
+        AND project_id = {projectId:String}
+        AND branch_id = {branchId:String}
+        AND team_id IS NOT NULL
+        AND event_at >= {since:DateTime}
+        AND event_at < {untilExclusive:DateTime}
+      GROUP BY day, team_id
+    `,
+    query_params: {
+      projectId: tenancy.project.id,
+      branchId: tenancy.branchId,
+      since: formatClickhouseDateTimeParam(since),
+      untilExclusive: formatClickhouseDateTimeParam(untilExclusive),
+    },
+    format: "JSONEachRow",
+  }).then((result) => result.json() as Promise<{ day: string, team_id: string }[]>);
+
+  const sanitizedTeamRows = teamRows.flatMap((row) => {
+    const teamId = normalizeUuidFromEvent(row.team_id);
+    if (teamId == null) {
+      return [];
+    }
+    return [{ ...row, team_id: teamId }];
+  });
+
+  const activeTeamIds = [...new Set(sanitizedTeamRows.map((row) => row.team_id))];
+  const teams: { teamId: string, createdAt: Date }[] = activeTeamIds.length === 0
+    ? []
+    : await prisma.$replica().$queryRaw<{ teamId: string, createdAt: Date }[]>`
+        SELECT "teamId"::text AS "teamId", "createdAt"
+        FROM ${sqlQuoteIdent(schema)}."Team"
+        WHERE "tenancyId" = ${tenancy.id}::UUID
+          AND "teamId" IN (${Prisma.join(activeTeamIds.map((id) => Prisma.sql`${id}::UUID`))})
+      `;
+
+  const orderedDays: string[] = [];
+  const idsByDay = new Map<string, Set<string>>();
+  for (let i = 0; i <= METRICS_WINDOW_DAYS; i += 1) {
+    const date = new Date(since.getTime() + i * ONE_DAY_MS).toISOString().split('T')[0];
+    orderedDays.push(date);
+    idsByDay.set(date, new Set<string>());
+  }
+  for (const row of sanitizedTeamRows) {
+    const day = row.day.split('T')[0];
+    const daySet = idsByDay.get(day);
+    if (daySet) {
+      daySet.add(row.team_id);
+    }
+  }
+
+  const createdDayByTeamId = new Map<string, string>(
+    teams.map((team) => [team.teamId, team.createdAt.toISOString().split('T')[0]])
+  );
+
+  return buildSplitFromDailyEntitySets({
+    orderedDays,
+    entityIdsByDay: idsByDay,
+    createdDayByEntityId: createdDayByTeamId,
+  });
+}
+
 async function loadLoginMethods(tenancy: Tenancy): Promise<{ method: string, count: number }[]> {
   const schema = await getPrismaSchemaForTenancy(tenancy);
   const prisma = await getPrismaClientForTenancy(tenancy);
@@ -199,6 +397,783 @@ async function loadRecentlyActiveUsers(tenancy: Tenancy, includeAnonymous: boole
   return dbUsers.map((user) => userPrismaToCrud(user, tenancy.config));
 }
 
+async function loadMonthlyActiveUsers(tenancy: Tenancy, now: Date, includeAnonymous: boolean = false): Promise<number> {
+  const { since, untilExclusive } = getMetricsWindowBounds(now);
+
+  const clickhouseClient = getClickhouseAdminClient();
+  try {
+    const result = await clickhouseClient.query({
+      query: `
+        SELECT
+          assumeNotNull(user_id) AS user_id
+        FROM analytics_internal.events
+        WHERE event_type = '$token-refresh'
+          AND project_id = {projectId:String}
+          AND branch_id = {branchId:String}
+          AND user_id IS NOT NULL
+          AND event_at >= {since:DateTime}
+          AND event_at < {untilExclusive:DateTime}
+          AND ({includeAnonymous:UInt8} = 1 OR JSONExtract(toJSONString(data), 'is_anonymous', 'UInt8') = 0)
+        GROUP BY user_id
+      `,
+      query_params: {
+        projectId: tenancy.project.id,
+        branchId: tenancy.branchId,
+        since: formatClickhouseDateTimeParam(since),
+        untilExclusive: formatClickhouseDateTimeParam(untilExclusive),
+        includeAnonymous: includeAnonymous ? 1 : 0,
+      },
+      format: "JSONEachRow",
+    });
+    const rows: { user_id: string }[] = await result.json();
+    const uniqueUserIds = new Set<string>();
+    for (const row of rows) {
+      const normalizedUserId = normalizeUuidFromEvent(row.user_id);
+      if (normalizedUserId != null) {
+        uniqueUserIds.add(normalizedUserId);
+      }
+    }
+    return uniqueUserIds.size;
+  } catch (error) {
+    // Only swallow real ClickHouse errors (e.g. project hasn't enabled
+    // analytics yet, transient query failure). Anything else is a programming
+    // bug and should propagate to the smart route handler.
+    if (!(error instanceof ClickHouseError)) {
+      throw error;
+    }
+    captureError("internal-metrics-load-monthly-active-users-failed", new StackAssertionError(
+      "Failed to load monthly active users for internal metrics.",
+      {
+        cause: error,
+        projectId: tenancy.project.id,
+        branchId: tenancy.branchId,
+      },
+    ));
+    return 0;
+  }
+}
+
+
+async function loadDailyRevenue(tenancy: Tenancy, now: Date): Promise<Array<{ date: string, new_cents: number, refund_cents: number }>> {
+  const schema = await getPrismaSchemaForTenancy(tenancy);
+  const prisma = await getPrismaClientForTenancy(tenancy);
+  const { since } = getMetricsWindowBounds(now);
+
+  const rows = await prisma.$replica().$queryRaw<{ day: string, new_cents: bigint }[]>`
+    SELECT
+      TO_CHAR("createdAt"::date, 'YYYY-MM-DD') AS day,
+      COALESCE(SUM("amountTotal"), 0)::bigint AS new_cents
+    FROM ${sqlQuoteIdent(schema)}."SubscriptionInvoice"
+    WHERE "tenancyId" = ${tenancy.id}::UUID
+      AND "amountTotal" IS NOT NULL
+      AND "status" IN (${METRICS_REVENUE_INVOICE_STATUSES_SQL})
+      AND "createdAt" >= ${since}
+    GROUP BY day
+    ORDER BY day
+  `;
+
+  const revenueByDay = new Map<string, number>();
+  for (const row of rows) {
+    revenueByDay.set(row.day, Number(row.new_cents));
+  }
+
+  const dailyRevenue: Array<{ date: string, new_cents: number, refund_cents: number }> = [];
+  for (let i = 0; i <= METRICS_WINDOW_DAYS; i++) {
+    const day = new Date(since.getTime() + i * ONE_DAY_MS);
+    const key = day.toISOString().split('T')[0];
+    dailyRevenue.push({ date: key, new_cents: revenueByDay.get(key) ?? 0, refund_cents: 0 });
+  }
+
+  return dailyRevenue;
+}
+
+async function loadPaymentsOverview(tenancy: Tenancy, now: Date) {
+  const schema = await getPrismaSchemaForTenancy(tenancy);
+  const prisma = await getPrismaClientForTenancy(tenancy);
+
+  const { since: thirtyDaysAgo } = getMetricsWindowBounds(now);
+
+  const [
+    subscriptionsByStatus,
+    aggregates,
+    dailySubscriptionRows,
+  ] = await Promise.all([
+    prisma.$replica().$queryRaw<{ status: string, cnt: number }[]>`
+      SELECT "status"::text AS status, COUNT(*)::int AS cnt
+      FROM ${sqlQuoteIdent(schema)}."Subscription"
+      WHERE "tenancyId" = ${tenancy.id}::UUID
+      GROUP BY "status"
+    `,
+    prisma.$replica().$queryRaw<[{
+      active_subscription_count: number,
+      total_one_time_purchases: number,
+      revenue_cents: bigint,
+      total_subscription_invoices: number,
+      successful_subscription_invoices: number,
+      mrr_cents: bigint,
+    }]>`
+      SELECT
+        (SELECT COUNT(*)::int
+          FROM ${sqlQuoteIdent(schema)}."Subscription"
+          WHERE "tenancyId" = ${tenancy.id}::UUID
+            AND "status" = 'active'::"SubscriptionStatus") AS active_subscription_count,
+        (SELECT COUNT(*)::int
+          FROM ${sqlQuoteIdent(schema)}."OneTimePurchase"
+          WHERE "tenancyId" = ${tenancy.id}::UUID) AS total_one_time_purchases,
+        (SELECT COALESCE(SUM("amountTotal"), 0)::bigint
+          FROM ${sqlQuoteIdent(schema)}."SubscriptionInvoice"
+          WHERE "tenancyId" = ${tenancy.id}::UUID
+            AND "amountTotal" IS NOT NULL
+            AND "status" IN (${METRICS_REVENUE_INVOICE_STATUSES_SQL})) AS revenue_cents,
+        (SELECT COUNT(*)::int
+          FROM ${sqlQuoteIdent(schema)}."SubscriptionInvoice"
+          WHERE "tenancyId" = ${tenancy.id}::UUID) AS total_subscription_invoices,
+        (SELECT COUNT(*)::int
+          FROM ${sqlQuoteIdent(schema)}."SubscriptionInvoice"
+          WHERE "tenancyId" = ${tenancy.id}::UUID
+            AND "status" IN (${METRICS_REVENUE_INVOICE_STATUSES_SQL})) AS successful_subscription_invoices,
+        (SELECT COALESCE(SUM("amountTotal"), 0)::bigint
+          FROM ${sqlQuoteIdent(schema)}."SubscriptionInvoice"
+          WHERE "tenancyId" = ${tenancy.id}::UUID
+            AND "amountTotal" IS NOT NULL
+            AND "status" IN (${METRICS_REVENUE_INVOICE_STATUSES_SQL})
+            AND "createdAt" >= ${thirtyDaysAgo}) AS mrr_cents
+    `,
+    // Daily subscription signups for the last 30 days
+    prisma.$replica().$queryRaw<{ day: string, cnt: number }[]>`
+      SELECT
+        TO_CHAR("createdAt"::date, 'YYYY-MM-DD') AS day,
+        COUNT(*)::int AS cnt
+      FROM ${sqlQuoteIdent(schema)}."Subscription"
+      WHERE "tenancyId" = ${tenancy.id}::UUID
+        AND "createdAt" >= ${thirtyDaysAgo}
+      GROUP BY day
+      ORDER BY day
+    `,
+  ]);
+
+  const subsByStatusMap = new Map<string, number>();
+  for (const group of subscriptionsByStatus) {
+    subsByStatusMap.set(group.status.toLowerCase(), Number(group.cnt));
+  }
+  const subsByStatus = Object.fromEntries(subsByStatusMap);
+
+  const activeSubscriptionCount = Number(aggregates[0].active_subscription_count);
+  const totalOneTimePurchases = Number(aggregates[0].total_one_time_purchases);
+  const invoiceRevenueCents = Number(aggregates[0].revenue_cents);
+  const totalSubscriptionInvoices = Number(aggregates[0].total_subscription_invoices);
+  const successfulSubscriptionInvoices = Number(aggregates[0].successful_subscription_invoices);
+  const mrrCents = Number(aggregates[0].mrr_cents);
+
+  const recentByDay = new Map<string, number>();
+  for (const row of dailySubscriptionRows) {
+    recentByDay.set(row.day, Number(row.cnt));
+  }
+  const dailySubscriptions: DataPoints = [];
+  for (let i = 0; i <= METRICS_WINDOW_DAYS; i++) {
+    const day = new Date(thirtyDaysAgo.getTime() + i * ONE_DAY_MS);
+    const key = day.toISOString().split('T')[0];
+    dailySubscriptions.push({ date: key, activity: recentByDay.get(key) ?? 0 });
+  }
+
+  // MRR proxy: trailing-30-day paid invoice revenue. This is an approximation
+  // (it conflates one-time and recurring revenue and ignores billing cadence)
+  // but it is derived from real data instead of a hardcoded per-subscription rate.
+  const totalOrders = totalOneTimePurchases + totalSubscriptionInvoices;
+  const checkoutConversionRate = totalOrders > 0
+    ? Number((((successfulSubscriptionInvoices + totalOneTimePurchases) / totalOrders) * 100).toFixed(2))
+    : 0;
+
+  return {
+    subscriptions_by_status: subsByStatus,
+    active_subscription_count: activeSubscriptionCount,
+    total_one_time_purchases: totalOneTimePurchases,
+    daily_subscriptions: dailySubscriptions,
+    revenue_cents: invoiceRevenueCents,
+    mrr_cents: mrrCents,
+    total_orders: totalOrders,
+    checkout_conversion_rate: checkoutConversionRate,
+  };
+}
+
+// ── Email Aggregates ─────────────────────────────────────────────────────────
+
+async function loadEmailOverview(tenancy: Tenancy, now: Date) {
+  const schema = await getPrismaSchemaForTenancy(tenancy);
+  const prisma = await getPrismaClientForTenancy(tenancy);
+  const { since: thirtyDaysAgo } = getMetricsWindowBounds(now);
+
+  const [
+    counts,
+    recentEmails,
+    emailsByDayAndStatus,
+  ] = await Promise.all([
+    // Single scan: per-status counts + delivered/bounced/clicked/finishedSending counts
+    prisma.$replica().$queryRaw<[{
+      ok_count: number,
+      error_count: number,
+      in_progress_count: number,
+      delivered_count: number,
+      bounced_count: number,
+      clicked_count: number,
+      finished_sending_count: number,
+    }]>`
+      SELECT
+        COUNT(*) FILTER (WHERE "simpleStatus" = 'OK'::"EmailOutboxSimpleStatus")::int AS ok_count,
+        COUNT(*) FILTER (WHERE "simpleStatus" = 'ERROR'::"EmailOutboxSimpleStatus")::int AS error_count,
+        COUNT(*) FILTER (WHERE "simpleStatus" = 'IN_PROGRESS'::"EmailOutboxSimpleStatus")::int AS in_progress_count,
+        COUNT(*) FILTER (WHERE "deliveredAt" IS NOT NULL)::int AS delivered_count,
+        COUNT(*) FILTER (WHERE "bouncedAt" IS NOT NULL)::int AS bounced_count,
+        COUNT(*) FILTER (WHERE "clickedAt" IS NOT NULL)::int AS clicked_count,
+        COUNT(*) FILTER (WHERE "finishedSendingAt" IS NOT NULL)::int AS finished_sending_count
+      FROM ${sqlQuoteIdent(schema)}."EmailOutbox"
+      WHERE "tenancyId" = ${tenancy.id}::UUID
+    `,
+    prisma.$replica().$queryRaw<{
+      id: string,
+      createdAt: Date,
+      simpleStatus: string,
+      status: string,
+      renderedSubject: string | null,
+    }[]>`
+      SELECT
+        "id"::text AS id,
+        "createdAt",
+        "simpleStatus"::text AS "simpleStatus",
+        "status"::text AS "status",
+        "renderedSubject"
+      FROM ${sqlQuoteIdent(schema)}."EmailOutbox"
+      WHERE "tenancyId" = ${tenancy.id}::UUID
+      ORDER BY "createdAt" DESC
+      LIMIT ${RECENT_LIST_PAGE_SIZE}
+    `,
+    // Per-day per-simpleStatus counts for the last 30 days
+    prisma.$replica().$queryRaw<{ day: string, status: string, cnt: number }[]>`
+      SELECT
+        TO_CHAR("createdAt"::date, 'YYYY-MM-DD') AS day,
+        "simpleStatus"::text AS status,
+        COUNT(*)::int AS cnt
+      FROM ${sqlQuoteIdent(schema)}."EmailOutbox"
+      WHERE "tenancyId" = ${tenancy.id}::UUID
+        AND "createdAt" >= ${thirtyDaysAgo}
+      GROUP BY day, "simpleStatus"
+      ORDER BY day
+    `,
+  ]);
+
+  const deliveredCount = Number(counts[0].delivered_count);
+  const bouncedCount = Number(counts[0].bounced_count);
+  const clickedCount = Number(counts[0].clicked_count);
+  const finishedSendingCount = Number(counts[0].finished_sending_count);
+
+  // Match the original groupBy behavior: only include statuses that actually
+  // have at least one row, mirroring what Prisma's groupBy used to return.
+  const emailsByStatus: Record<string, number> = {};
+  const okCount = Number(counts[0].ok_count);
+  const errorCount = Number(counts[0].error_count);
+  const inProgressCount = Number(counts[0].in_progress_count);
+  if (okCount > 0) emailsByStatus.ok = okCount;
+  if (errorCount > 0) emailsByStatus.error = errorCount;
+  if (inProgressCount > 0) emailsByStatus['in-progress'] = inProgressCount;
+
+  // Daily email sends for last 30 days
+  const emailByDay = new Map<string, number>();
+  for (const row of emailsByDayAndStatus) {
+    emailByDay.set(row.day, (emailByDay.get(row.day) ?? 0) + Number(row.cnt));
+  }
+  const dailyEmails: DataPoints = [];
+  for (let i = 0; i <= METRICS_WINDOW_DAYS; i++) {
+    const day = new Date(thirtyDaysAgo.getTime() + i * ONE_DAY_MS);
+    const key = day.toISOString().split('T')[0];
+    dailyEmails.push({ date: key, activity: emailByDay.get(key) ?? 0 });
+  }
+
+  const totalEmails = Object.values(emailsByStatus).reduce((a, b) => a + b, 0);
+  const denom = finishedSendingCount > 0 ? finishedSendingCount : 1;
+  const deliverabilityRate = Number((Math.min(deliveredCount / denom, 1) * 100).toFixed(2));
+  const bounceRate = Number((Math.min(bouncedCount / denom, 1) * 100).toFixed(2));
+  const clickRate = Number((Math.min(clickedCount / denom, 1) * 100).toFixed(2));
+
+  // Build per-day per-status breakdown for stacked bar chart
+  type DayStatusCounts = { date: string, ok: number, error: number, in_progress: number };
+  const dayStatusMap = new Map<string, { ok: number, error: number, in_progress: number }>();
+  for (let i = 0; i <= METRICS_WINDOW_DAYS; i++) {
+    const key = new Date(thirtyDaysAgo.getTime() + i * ONE_DAY_MS).toISOString().split('T')[0];
+    dayStatusMap.set(key, { ok: 0, error: 0, in_progress: 0 });
+  }
+  for (const row of emailsByDayAndStatus) {
+    const entry = dayStatusMap.get(row.day);
+    if (entry == null) continue;
+    const count = Number(row.cnt);
+    // Exhaustive switch over EmailOutboxSimpleStatus — adding a new enum
+    // value will fail typecheck here so we can't silently miscount.
+    const status = row.status as EmailOutboxSimpleStatus;
+    switch (status) {
+      case 'OK': {
+        entry.ok += count;
+        break;
+      }
+      case 'ERROR': {
+        entry.error += count;
+        break;
+      }
+      case 'IN_PROGRESS': {
+        entry.in_progress += count;
+        break;
+      }
+      default: {
+        const _exhaustiveCheck: never = status;
+        captureError("internal-metrics-unknown-email-simple-status", new StackAssertionError(
+          `Unknown EmailOutboxSimpleStatus value: ${String(_exhaustiveCheck)}`,
+          { status: _exhaustiveCheck },
+        ));
+      }
+    }
+  }
+  const dailyEmailsByStatus: DayStatusCounts[] = [...dayStatusMap.entries()].map(([date, counts]) => ({
+    date,
+    ...counts,
+  }));
+
+  return {
+    emails_by_status: emailsByStatus,
+    total_emails: totalEmails,
+    daily_emails: dailyEmails,
+    daily_emails_by_status: dailyEmailsByStatus,
+    emails_sent: finishedSendingCount,
+    recent_emails: recentEmails.map((email) => ({
+      id: email.id,
+      status: email.status,
+      subject: email.renderedSubject ?? '(no subject)',
+      created_at_millis: email.createdAt.getTime(),
+    })),
+    deliverability_status: {
+      delivered: deliveredCount,
+      bounced: bouncedCount,
+      error: emailsByStatus['error'] ?? 0,
+      in_progress: emailsByStatus['in-progress'] ?? 0,
+    },
+    deliverability_rate: deliverabilityRate,
+    bounce_rate: bounceRate,
+    click_rate: clickRate,
+  };
+}
+
+// ── Web Analytics Aggregates ─────────────────────────────────────────────────
+
+type SessionReplayAggregates = {
+  total: number,
+  recent: number,
+  avgSessionSeconds: number,
+  totalRevenueCents: number,
+};
+
+async function loadSessionReplayAggregates(tenancy: Tenancy, since: Date): Promise<SessionReplayAggregates> {
+  const schema = await getPrismaSchemaForTenancy(tenancy);
+  const prisma = await getPrismaClientForTenancy(tenancy);
+  const result = await prisma.$replica().$queryRaw<[{
+    total: number,
+    recent: number,
+    avg_ms: number | null,
+    total_revenue_cents: bigint,
+  }]>`
+    SELECT
+      (SELECT COUNT(*)::int
+        FROM ${sqlQuoteIdent(schema)}."SessionReplay"
+        WHERE "tenancyId" = ${tenancy.id}::UUID) AS total,
+      (SELECT COUNT(*)::int
+        FROM ${sqlQuoteIdent(schema)}."SessionReplay"
+        WHERE "tenancyId" = ${tenancy.id}::UUID
+          AND "startedAt" >= ${since}) AS recent,
+      (SELECT AVG(GREATEST(0, EXTRACT(EPOCH FROM ("lastEventAt" - "startedAt")) * 1000))
+        FROM ${sqlQuoteIdent(schema)}."SessionReplay"
+        WHERE "tenancyId" = ${tenancy.id}::UUID
+          AND "startedAt" >= ${since}) AS avg_ms,
+      (SELECT COALESCE(SUM("amountTotal"), 0)::bigint
+        FROM ${sqlQuoteIdent(schema)}."SubscriptionInvoice"
+        WHERE "tenancyId" = ${tenancy.id}::UUID
+          AND "amountTotal" IS NOT NULL
+          AND "status" IN (${METRICS_REVENUE_INVOICE_STATUSES_SQL})) AS total_revenue_cents
+  `;
+
+  const row = result[0];
+  const avgSessionSeconds = Number(((Number(row.avg_ms ?? 0)) / 1000).toFixed(1));
+  return {
+    total: Number(row.total),
+    recent: Number(row.recent),
+    avgSessionSeconds,
+    totalRevenueCents: Number(row.total_revenue_cents),
+  };
+}
+
+async function loadAnalyticsOverview(tenancy: Tenancy, now: Date, includeAnonymous: boolean) {
+  const todayUtc = new Date(now);
+  todayUtc.setUTCHours(0, 0, 0, 0);
+  const since = new Date(todayUtc.getTime() - METRICS_WINDOW_MS);
+  const untilExclusive = new Date(todayUtc.getTime() + ONE_DAY_MS);
+
+  const clickhouseClient = getClickhouseAdminClient();
+
+  // Session replay aggregates come from Postgres and have nothing to do with
+  // ClickHouse availability. Run them in parallel with the ClickHouse queries
+  // but keep them outside the ClickHouse-only try/catch so a postgres failure
+  // never gets misattributed to "analytics not enabled".
+  const replayPromise = loadSessionReplayAggregates(tenancy, since);
+
+  let clickhouseAggregates: {
+    dailyPageViews: DataPoints,
+    dailyClicks: DataPoints,
+    dailyVisitors: DataPoints,
+    visitors: number,
+    onlineLive: number,
+    topReferrers: { referrer: string, visitors: number }[],
+    topRegion: { country_code: string | null, region_code: string | null, count: number } | null,
+  } | null = null;
+
+  try {
+    const analyticsUserJoin = `
+      LEFT JOIN (
+        SELECT
+          user_id,
+          argMax(JSONExtract(toJSONString(data), 'is_anonymous', 'UInt8'), event_at) AS latest_is_anonymous
+        FROM analytics_internal.events
+        WHERE event_type = '$token-refresh'
+          AND project_id = {projectId:String}
+          AND branch_id = {branchId:String}
+          AND user_id IS NOT NULL
+          AND event_at < {untilExclusive:DateTime}
+        GROUP BY user_id
+      ) AS token_refresh_users
+        ON e.user_id = token_refresh_users.user_id
+    `;
+    const nonAnonymousAnalyticsUserFilter = "({includeAnonymous:UInt8} = 1 OR coalesce(JSONExtract(toJSONString(e.data), 'is_anonymous', 'Nullable(UInt8)'), token_refresh_users.latest_is_anonymous, 0) = 0)";
+    const [dailyEventResult, totalVisitorResult, referrerResult, topRegionResult, onlineResult] = await Promise.all([
+      // Combined daily aggregates: page-view count, click count, and unique
+      // visitors per day — one scan over the page-view/click event types.
+      clickhouseClient.query({
+        query: `
+          SELECT
+            toDate(e.event_at) AS day,
+            countIf(
+              e.event_type = '$page-view'
+                AND e.user_id IS NOT NULL
+                AND ${nonAnonymousAnalyticsUserFilter}
+            ) AS pv,
+            countIf(
+              e.event_type = '$click'
+                AND e.user_id IS NOT NULL
+                AND ${nonAnonymousAnalyticsUserFilter}
+            ) AS cl,
+            uniqExactIf(
+              assumeNotNull(e.user_id),
+              e.event_type = '$page-view'
+                AND e.user_id IS NOT NULL
+                AND ${nonAnonymousAnalyticsUserFilter}
+            ) AS visitors
+          FROM analytics_internal.events AS e
+          ${analyticsUserJoin}
+          WHERE e.event_type IN ('$page-view', '$click')
+            AND e.project_id = {projectId:String}
+            AND e.branch_id = {branchId:String}
+            AND e.event_at >= {since:DateTime}
+            AND e.event_at < {untilExclusive:DateTime}
+          GROUP BY day
+          ORDER BY day ASC
+        `,
+        query_params: {
+          since: formatClickhouseDateTimeParam(since),
+          untilExclusive: formatClickhouseDateTimeParam(untilExclusive),
+          projectId: tenancy.project.id,
+          branchId: tenancy.branchId,
+          includeAnonymous: includeAnonymous ? 1 : 0,
+        },
+        format: "JSONEachRow",
+      }),
+      clickhouseClient.query({
+        query: `
+          SELECT
+            uniqExactIf(
+              assumeNotNull(e.user_id),
+              e.user_id IS NOT NULL
+                AND ${nonAnonymousAnalyticsUserFilter}
+            ) AS visitors
+          FROM analytics_internal.events AS e
+          ${analyticsUserJoin}
+          WHERE e.event_type = '$page-view'
+            AND e.project_id = {projectId:String}
+            AND e.branch_id = {branchId:String}
+            AND e.user_id IS NOT NULL
+            AND e.event_at >= {since:DateTime}
+            AND e.event_at < {untilExclusive:DateTime}
+        `,
+        query_params: {
+          since: formatClickhouseDateTimeParam(since),
+          untilExclusive: formatClickhouseDateTimeParam(untilExclusive),
+          projectId: tenancy.project.id,
+          branchId: tenancy.branchId,
+          includeAnonymous: includeAnonymous ? 1 : 0,
+        },
+        format: "JSONEachRow",
+      }),
+      clickhouseClient.query({
+        query: `
+          SELECT
+            nullIf(CAST(e.data.referrer, 'String'), '') AS referrer,
+            uniqExactIf(
+              assumeNotNull(e.user_id),
+              e.user_id IS NOT NULL
+                AND ${nonAnonymousAnalyticsUserFilter}
+            ) AS visitors
+          FROM analytics_internal.events AS e
+          ${analyticsUserJoin}
+          WHERE e.event_type = '$page-view'
+            AND e.project_id = {projectId:String}
+            AND e.branch_id = {branchId:String}
+            AND e.event_at >= {since:DateTime}
+            AND e.event_at < {untilExclusive:DateTime}
+          GROUP BY referrer
+          HAVING visitors > 0
+          ORDER BY visitors DESC
+          LIMIT ${TOP_REFERRERS_PAGE_SIZE}
+        `,
+        query_params: {
+          since: formatClickhouseDateTimeParam(since),
+          untilExclusive: formatClickhouseDateTimeParam(untilExclusive),
+          projectId: tenancy.project.id,
+          branchId: tenancy.branchId,
+          includeAnonymous: includeAnonymous ? 1 : 0,
+        },
+        format: "JSONEachRow",
+      }),
+      clickhouseClient.query({
+        query: `
+          SELECT
+            CAST(data.ip_info.country_code, 'Nullable(String)') AS country_code,
+            CAST(data.ip_info.region_code, 'Nullable(String)') AS region_code,
+            uniqExactIf(
+              assumeNotNull(user_id),
+              user_id IS NOT NULL
+                AND ({includeAnonymous:UInt8} = 1 OR JSONExtract(toJSONString(data), 'is_anonymous', 'UInt8') = 0)
+            ) AS visitors
+          FROM analytics_internal.events
+          WHERE event_type = '$token-refresh'
+            AND project_id = {projectId:String}
+            AND branch_id = {branchId:String}
+            AND user_id IS NOT NULL
+            AND event_at >= {since:DateTime}
+            AND event_at < {untilExclusive:DateTime}
+          GROUP BY country_code, region_code
+          HAVING visitors > 0
+          ORDER BY visitors DESC
+          LIMIT 1
+        `,
+        query_params: {
+          since: formatClickhouseDateTimeParam(since),
+          untilExclusive: formatClickhouseDateTimeParam(untilExclusive),
+          projectId: tenancy.project.id,
+          branchId: tenancy.branchId,
+          includeAnonymous: includeAnonymous ? 1 : 0,
+        },
+        format: "JSONEachRow",
+      }),
+      clickhouseClient.query({
+        query: `
+          SELECT
+            uniqExact(assumeNotNull(user_id)) AS online
+          FROM analytics_internal.events
+          WHERE event_type = '$token-refresh'
+            AND project_id = {projectId:String}
+            AND branch_id = {branchId:String}
+            AND user_id IS NOT NULL
+            AND event_at >= {onlineSince:DateTime}
+            AND event_at < {untilExclusive:DateTime}
+            AND ({includeAnonymous:UInt8} = 1 OR JSONExtract(toJSONString(data), 'is_anonymous', 'UInt8') = 0)
+        `,
+        query_params: {
+          onlineSince: formatClickhouseDateTimeParam(new Date(now.getTime() - 5 * 60 * 1000)),
+          untilExclusive: formatClickhouseDateTimeParam(untilExclusive),
+          projectId: tenancy.project.id,
+          branchId: tenancy.branchId,
+          includeAnonymous: includeAnonymous ? 1 : 0,
+        },
+        format: "JSONEachRow",
+      }),
+    ]);
+
+    const dailyEventRows: { day: string, pv: number, cl: number, visitors: number }[] = await dailyEventResult.json();
+    const pvByDay = new Map<string, number>();
+    const clByDay = new Map<string, number>();
+    const visitorByDay = new Map<string, number>();
+    for (const row of dailyEventRows) {
+      const key = row.day.split('T')[0];
+      pvByDay.set(key, Number(row.pv));
+      clByDay.set(key, Number(row.cl));
+      visitorByDay.set(key, Number(row.visitors));
+    }
+    const totalVisitorRows: { visitors: number }[] = await totalVisitorResult.json();
+    const visitors = Number(totalVisitorRows[0]?.visitors ?? 0);
+
+    const dailyPageViews: DataPoints = [];
+    const dailyClicks: DataPoints = [];
+    const dailyVisitors: DataPoints = [];
+    for (let i = 0; i <= METRICS_WINDOW_DAYS; i++) {
+      const day = new Date(since.getTime() + i * ONE_DAY_MS);
+      const key = day.toISOString().split('T')[0];
+      dailyPageViews.push({ date: key, activity: pvByDay.get(key) ?? 0 });
+      dailyClicks.push({ date: key, activity: clByDay.get(key) ?? 0 });
+      dailyVisitors.push({ date: key, activity: visitorByDay.get(key) ?? 0 });
+    }
+
+    const referrers: { referrer: string | null, visitors: number }[] = await referrerResult.json();
+    const topRegionRows: { country_code: string | null, region_code: string | null, visitors: number }[] = await topRegionResult.json();
+    const onlineRows: { online: number }[] = await onlineResult.json();
+
+    clickhouseAggregates = {
+      dailyPageViews,
+      dailyClicks,
+      dailyVisitors,
+      visitors,
+      onlineLive: Number(onlineRows[0]?.online ?? 0),
+      topReferrers: referrers.map((row) => ({
+        referrer: row.referrer ?? '(direct)',
+        visitors: Number(row.visitors),
+      })),
+      topRegion: topRegionRows[0] ? {
+        country_code: topRegionRows[0].country_code,
+        region_code: topRegionRows[0].region_code,
+        count: Number(topRegionRows[0].visitors),
+      } : null,
+    };
+  } catch (error) {
+    // Only swallow real ClickHouse errors — that's the "analytics not enabled
+    // for this project" path. Anything else is a real bug and should propagate.
+    if (!(error instanceof ClickHouseError)) {
+      throw error;
+    }
+    captureError("internal-metrics-analytics-overview-clickhouse-fallback", new StackAssertionError(
+      "Falling back to empty analytics overview due to ClickHouse query failure.",
+      {
+        cause: error,
+        projectId: tenancy.project.id,
+        branchId: tenancy.branchId,
+      },
+    ));
+    // Leave clickhouseAggregates as null — handled in the response builder below.
+  }
+
+  // Postgres-backed session replay query has its own error surface — let it
+  // propagate naturally so we don't conflate it with "clickhouse missing".
+  const replayResult = await replayPromise;
+
+  // daily_revenue is intentionally not populated here — it is owned by
+  // payments_overview (real invoice data) and stitched into analytics_overview
+  // by the response builder so the dashboard can keep reading it from a single
+  // location.
+  if (clickhouseAggregates == null) {
+    return {
+      daily_page_views: [] as DataPoints,
+      daily_clicks: [] as DataPoints,
+      daily_visitors: [] as DataPoints,
+      daily_revenue: [] as Array<{ date: string, new_cents: number, refund_cents: number }>,
+      total_revenue_cents: replayResult.totalRevenueCents,
+      total_replays: replayResult.total,
+      recent_replays: replayResult.recent,
+      visitors: 0,
+      avg_session_seconds: replayResult.avgSessionSeconds,
+      online_live: 0,
+      revenue_per_visitor: 0,
+      top_referrers: [],
+      top_region: null,
+    };
+  }
+
+  return {
+    daily_page_views: clickhouseAggregates.dailyPageViews,
+    daily_clicks: clickhouseAggregates.dailyClicks,
+    daily_visitors: clickhouseAggregates.dailyVisitors,
+    daily_revenue: [] as Array<{ date: string, new_cents: number, refund_cents: number }>,
+    total_revenue_cents: replayResult.totalRevenueCents,
+    total_replays: replayResult.total,
+    recent_replays: replayResult.recent,
+    visitors: clickhouseAggregates.visitors,
+    avg_session_seconds: replayResult.avgSessionSeconds,
+    online_live: clickhouseAggregates.onlineLive,
+    revenue_per_visitor: clickhouseAggregates.visitors > 0
+      ? Number(((replayResult.totalRevenueCents / 100) / clickhouseAggregates.visitors).toFixed(2))
+      : 0,
+    top_referrers: clickhouseAggregates.topReferrers,
+    top_region: clickhouseAggregates.topRegion,
+  };
+}
+
+// ── Auth Extra Aggregates ────────────────────────────────────────────────────
+
+async function loadAuthOverview(tenancy: Tenancy, includeAnonymous: boolean, now: Date) {
+  const schema = await getPrismaSchemaForTenancy(tenancy);
+  const prisma = await getPrismaClientForTenancy(tenancy);
+
+  const [counts, dailyActiveUsersSplit, dailyActiveTeamsSplit, mau] = await Promise.all([
+    prisma.$replica().$queryRaw<[{
+      total_users: number,
+      verified_non_anonymous_users: number,
+      anonymous_users: number,
+      total_teams: number,
+    }]>`
+      SELECT
+        (SELECT COUNT(*)::int
+          FROM ${sqlQuoteIdent(schema)}."ProjectUser"
+          WHERE "tenancyId" = ${tenancy.id}::UUID) AS total_users,
+        (SELECT COUNT(*)::int
+          FROM ${sqlQuoteIdent(schema)}."ProjectUser" pu
+          WHERE pu."tenancyId" = ${tenancy.id}::UUID
+            AND pu."isAnonymous" = false
+            AND EXISTS (
+              SELECT 1 FROM ${sqlQuoteIdent(schema)}."ContactChannel" cc
+              WHERE cc."tenancyId" = pu."tenancyId"
+                AND cc."projectUserId" = pu."projectUserId"
+                AND cc."type" = 'EMAIL'::"ContactChannelType"
+                AND cc."isVerified" = true
+            )) AS verified_non_anonymous_users,
+        (SELECT COUNT(*)::int
+          FROM ${sqlQuoteIdent(schema)}."ProjectUser"
+          WHERE "tenancyId" = ${tenancy.id}::UUID
+            AND "isAnonymous" = true) AS anonymous_users,
+        (SELECT COUNT(*)::int
+          FROM ${sqlQuoteIdent(schema)}."Team"
+          WHERE "tenancyId" = ${tenancy.id}::UUID) AS total_teams
+    `,
+    loadDailyActiveUsersSplit(tenancy, now, includeAnonymous),
+    loadDailyActiveTeamsSplit(tenancy, now),
+    loadMonthlyActiveUsers(tenancy, now, includeAnonymous),
+  ]);
+
+  const totalUsers = Number(counts[0].total_users);
+  const verifiedNonAnonymousUsers = Number(counts[0].verified_non_anonymous_users);
+  const anonymousUsers = Number(counts[0].anonymous_users);
+  const totalTeams = Number(counts[0].total_teams);
+  const nonAnonymousTotal = totalUsers - anonymousUsers;
+  // total_users_filtered respects the includeAnonymous query flag so the
+  // handler can use it directly without a separate count round trip.
+  const totalUsersFiltered = includeAnonymous ? totalUsers : nonAnonymousTotal;
+
+  // verified_users / unverified_users always count non-anonymous users only,
+  // so they never overlap with anonymous_users (which is its own bucket).
+  // Adding all three always equals totalUsers, regardless of includeAnonymous.
+  return {
+    verified_users: verifiedNonAnonymousUsers,
+    unverified_users: nonAnonymousTotal - verifiedNonAnonymousUsers,
+    anonymous_users: anonymousUsers,
+    total_teams: totalTeams,
+    mau,
+    daily_active_users_split: dailyActiveUsersSplit,
+    daily_active_teams_split: dailyActiveTeamsSplit,
+    total_users_filtered: totalUsersFiltered,
+  };
+}
+
+const RECENT_LIST_PAGE_SIZE = 100;
+const TOP_REFERRERS_PAGE_SIZE = 100;
+
 export const GET = createSmartRouteHandler({
   metadata: {
     hidden: true,
@@ -219,40 +1194,46 @@ export const GET = createSmartRouteHandler({
       total_users: yupNumber().integer().defined(),
       daily_users: DataPointsSchema,
       daily_active_users: DataPointsSchema,
-      // TODO: Narrow down the types further
-      users_by_country: yupMixed().defined(),
-      recently_registered: yupMixed().defined(),
-      recently_active: yupMixed().defined(),
-      login_methods: yupMixed().defined(),
+      users_by_country: yupRecord(yupString().defined(), yupNumber().defined()).defined(),
+      // recently_registered/active are CRUD User objects passed through from
+      // usersCrudHandlers. Validated against MetricsRecentUserSchema, which
+      // covers the fields the dashboard reads — extra fields from
+      // UsersCrud["Admin"]["Read"] flow through.
+      recently_registered: yupArray(MetricsRecentUserSchema).defined(),
+      recently_active: yupArray(MetricsRecentUserSchema).defined(),
+      login_methods: yupArray(MetricsLoginMethodEntrySchema).defined(),
+      auth_overview: MetricsAuthOverviewSchema,
+      payments_overview: MetricsPaymentsOverviewSchema,
+      email_overview: MetricsEmailOverviewSchema,
+      analytics_overview: MetricsAnalyticsOverviewSchema,
     }).defined(),
   }),
   handler: async (req) => {
     const now = new Date();
     const includeAnonymous = req.query.include_anonymous === "true";
 
-    const prisma = await getPrismaClientForTenancy(req.auth.tenancy);
-
     const [
-      totalUsers,
       dailyUsers,
       dailyActiveUsers,
       usersByCountry,
       recentlyRegistered,
       recentlyActive,
-      loginMethods
+      loginMethods,
+      authOverview,
+      paymentsOverview,
+      emailOverview,
+      analyticsOverview,
+      dailyRevenue,
     ] = await Promise.all([
-      prisma.projectUser.count({
-        where: { tenancyId: req.auth.tenancy.id, ...(includeAnonymous ? {} : { isAnonymous: false }) },
-      }),
       loadTotalUsers(req.auth.tenancy, now, includeAnonymous),
       loadDailyActiveUsers(req.auth.tenancy, now, includeAnonymous),
-      loadUsersByCountry(req.auth.tenancy, prisma, includeAnonymous),
+      loadUsersByCountry(req.auth.tenancy, includeAnonymous),
       usersCrudHandlers.adminList({
         tenancy: req.auth.tenancy,
         query: {
           order_by: 'signed_up_at',
           desc: "true",
-          limit: 5,
+          limit: RECENT_LIST_PAGE_SIZE,
           include_anonymous: includeAnonymous ? "true" : "false",
         },
         allowedErrorTypes: [
@@ -261,8 +1242,19 @@ export const GET = createSmartRouteHandler({
       }).then(res => res.items),
       loadRecentlyActiveUsers(req.auth.tenancy, includeAnonymous),
       loadLoginMethods(req.auth.tenancy),
+      loadAuthOverview(req.auth.tenancy, includeAnonymous, now),
+      loadPaymentsOverview(req.auth.tenancy, now),
+      loadEmailOverview(req.auth.tenancy, now),
+      loadAnalyticsOverview(req.auth.tenancy, now, includeAnonymous),
+      loadDailyRevenue(req.auth.tenancy, now),
     ] as const);
 
+    const totalUsers = authOverview.total_users_filtered;
+
+    // Stitch real daily revenue (from paid invoices) into analytics_overview so
+    // the dashboard can read it from a single location.
+    const finalAnalyticsOverview = { ...analyticsOverview, daily_revenue: dailyRevenue };
+
     return {
       statusCode: 200,
       bodyType: "json",
@@ -274,6 +1266,10 @@ export const GET = createSmartRouteHandler({
         recently_registered: recentlyRegistered,
         recently_active: recentlyActive,
         login_methods: loginMethods,
+        auth_overview: authOverview,
+        payments_overview: paymentsOverview,
+        email_overview: emailOverview,
+        analytics_overview: finalAnalyticsOverview,
       }
     };
   },
diff --git a/apps/backend/src/lib/ai/prompts.ts b/apps/backend/src/lib/ai/prompts.ts
index ce054aa29a..7a66a4d3d7 100644
--- a/apps/backend/src/lib/ai/prompts.ts
+++ b/apps/backend/src/lib/ai/prompts.ts
@@ -43,6 +43,7 @@ export type SystemPromptId =
   | "email-assistant-draft"
   | "create-dashboard"
   | "run-query"
+  | "build-analytics-query"
   | "rewrite-template-source";
 
 /**
@@ -76,27 +77,35 @@ Run a ClickHouse SQL query against the project's analytics database. Only SELECT
 Available tables:
 
 **events** - User activity events
-- event_type: LowCardinality(String) - $token-refresh is the only valid event_type right now, it occurs whenever an access token is refreshed
+- event_type: LowCardinality(String) - ONLY: $page-view, $click, $token-refresh
 - event_at: DateTime64(3, 'UTC') - When the event occurred
-- data: JSON - Additional event data
-- user_id: Nullable(String) - Associated user ID
-- team_id: Nullable(String) - Associated team ID
+- data: JSON - MUST use toString() before extracting: JSONExtractString(toString(data), 'key')
+- user_id: Nullable(String) - Always populated (no nulls)
+- team_id: Nullable(String) - Always NULL, never use
 - created_at: DateTime64(3, 'UTC') - When the record was created
 
+Event data payloads:
+- $page-view: {is_anonymous, path, referrer}
+- $click: {is_anonymous, selector}
+- $token-refresh: {is_anonymous, refresh_token_id, ip_info: {country_code, city_name, region_code, is_trusted, latitude, longitude, tz_identifier, ip}}
+
 **users** - User profiles
 - id: UUID - User ID
 - display_name: Nullable(String) - User's display name
 - primary_email: Nullable(String) - User's primary email
 - primary_email_verified: UInt8 - Whether email is verified (0/1)
 - signed_up_at: DateTime64(3, 'UTC') - When user signed up
-- client_metadata: JSON - Client-side metadata
-- client_read_only_metadata: JSON - Read-only client metadata
-- server_metadata: JSON - Server-side metadata
+- client_metadata: JSON - Typically empty
+- client_read_only_metadata: JSON - Typically empty
+- server_metadata: JSON - Typically empty
 - is_anonymous: UInt8 - Whether user is anonymous (0/1)
 
 SQL QUERY GUIDELINES:
 - Only SELECT queries are allowed (no INSERT, UPDATE, DELETE)
+- JSON extraction REQUIRES toString(): JSONExtractString(toString(data), 'key')
+- Nested JSON uses dot notation: JSONExtractString(toString(data), 'ip_info.country_code')
 - Always use LIMIT to avoid returning too many rows (default to LIMIT 100)
+- Use relative date ranges: now() - INTERVAL X DAY
 - Use appropriate date functions: toDate(), toStartOfDay(), toStartOfWeek(), etc.
 - For counting, use COUNT(*) or COUNT(DISTINCT column)
 - Example queries:
@@ -490,6 +499,51 @@ RUNTIME CONTRACT (HARD RULES)
 
 No import/export/require statements. No external networking calls.
 
+────────────────────────────────────────
+HOOK SAFETY (HARD RULES — VIOLATING THIS CRASHES THE DASHBOARD)
+────────────────────────────────────────
+React throws "Minified React error #310" (also: #300, #301, #321) when hooks are called in a
+different order between renders. This is the #1 source of dashboard runtime crashes. You MUST
+follow these rules without exception:
+
+1. **ALL hooks go at the TOP of the Dashboard component**, before ANY conditional returns,
+   ANY \`if\`, ANY ternary, ANY loop, ANY early \`return\`.
+2. **Hooks are called UNCONDITIONALLY on every render.** Never wrap a hook in \`if\`, never call
+   one inside a \`.map()\` or \`.forEach()\`, never skip one because a variable is null.
+3. **Put loading / error / empty early returns AFTER every hook has run**, not before.
+4. **Do not call hooks inside event handlers, effects, or helper functions** defined inside the
+   component body. Hooks only go directly in the component function body.
+5. Before finishing the code, mentally re-order your hooks and confirm the count and order are
+   identical on every possible render path.
+
+CANONICAL BAD EXAMPLE (crashes with React error #310):
+  function Dashboard() {
+    const [users, setUsers] = React.useState(null);
+    if (!users) {
+      return <Loading />;          // ← early return BEFORE the next hook
+    }
+    const [filter, setFilter] = React.useState("");  // ← this hook is skipped on first render
+    React.useEffect(() => { ... }, []);  // ← and this one
+    return <div>...</div>;
+  }
+
+CANONICAL GOOD EXAMPLE:
+  function Dashboard() {
+    // All hooks first. Unconditional. Same count every render.
+    const [users, setUsers] = React.useState(null);
+    const [filter, setFilter] = React.useState("");
+    const [error, setError] = React.useState(null);
+    React.useEffect(() => { ... }, []);
+
+    // Conditional rendering AFTER all hooks:
+    if (error) return <ErrorState message={error} />;
+    if (!users) return <Loading />;
+    return <div>...</div>;
+  }
+
+If you catch yourself writing \`if (...) return ...\` anywhere above a \`React.useXxx\` call,
+STOP and move the return below every hook.
+
 ────────────────────────────────────────
 EDITING BEHAVIOR (when existing code is provided)
 ────────────────────────────────────────
@@ -517,121 +571,104 @@ Teams:
 Project:
 - stackServerApp.getProject() → Promise<Project>
 
+Analytics (ClickHouse):
+- stackServerApp.queryAnalytics({ query }) → Promise<{ result: Record<string, unknown>[], query_id: string }>
+  Use this for event trends, counts, distributions, and any aggregate that SDK list methods cannot express.
+  See the CLICKHOUSE ANALYTICS section below for schema and examples. Test your query with the
+  queryAnalytics TOOL during your reasoning loop BEFORE embedding it in the dashboard.
+
 Important:
 - Use camelCase options (includeAnonymous)
 - The SDK handles auth/retries/errors; still show graceful UI states
 
 ────────────────────────────────────────
-CHART RULES (RECHARTS REQUIRED)
+LAYOUT & DESIGN RULES
 ────────────────────────────────────────
-- Every dashboard MUST include at least one chart.
-- Choose chart types that match the question:
-  - Trends over time → LineChart / AreaChart
-  - Comparisons/top-N → BarChart
-  - Distributions → PieChart (or BarChart if many categories)
-- Always wrap charts in ResponsiveContainer.
-- Use XAxis/YAxis + Tooltip; include CartesianGrid when useful.
-- If the query is time-series, ALWAYS show a time-series chart.
-
-Do not overwhelm: 1–2 charts maximum.
-
-────────────────────────────────────────
-LAYOUT & DESIGN RULES (PRACTICAL)
-────────────────────────────────────────
-Use this container baseline:
-<div className="p-6 space-y-4 max-w-7xl mx-auto">
-
-
-Header:
-- Clear title that matches the question
-- Optional Refresh button using DashboardUI.DesignButton (disabled while loading)
-
-Metrics:
-- 2–4 DashboardUI.DesignMetricCard in a CSS grid:
-  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-- Use the trend prop to show up/down/neutral direction
-- Keep titles short
-
-Charts:
-- Wrap Recharts in DashboardUI.DesignChartCard + DashboardUI.DesignChartContainer
-- Always use DashboardUI.DesignChartTooltipContent and DashboardUI.DesignChartLegendContent
-- Use DashboardUI.getDesignChartColor(index) for consistent colors
-
-Tables (optional):
-- Use DashboardUI.DesignTable with sub-components
-- Only include if it helps answer the question
-
-Loading & Errors:
-- Always show DashboardUI.DesignSkeleton while loading
-- Disable interactions during loading
-- If an error happens, show a small, user-friendly message in the UI (non-technical)
-- Use DashboardUI.DesignEmptyState when there is no data to display
-
-DASHBOARD UI COMPONENTS: See the DashboardUI type definitions provided in context.
-All accessed as DashboardUI.<ComponentName>. Light/dark mode is automatic.
-AVAILABLE DASHBOARD UI COMPONENTS (via DashboardUI.*)
-────────────────────────────────────────
-All components are accessed as DashboardUI.<ComponentName>. No imports needed.
-Light and dark mode are handled automatically via CSS variables.
-
-METRIC CARDS (use for KPI / big numbers):
-  <DashboardUI.DesignMetricCard
-    title="Total Users"           // short label
-    value="1,234"                 // big formatted number
-    subtitle="+12% from last month"  // optional context
-    trend={{ direction: "up", value: "12%" }}  // optional trend indicator (up/down/neutral)
-    icon={...}                    // optional React node for an icon
-  />
-
-GENERAL-PURPOSE CARD (for text-only content like titles, descriptions, headings):
-  <DashboardUI.DesignCard>
-    Any content goes here
-  </DashboardUI.DesignCard>
-  Text-only cards (bodyOnly variant) are automatically transparent in dark mode.
-  Do NOT add padding (p-6, p-5, etc.) to DesignCard className — the component already has built-in padding.
-
-CHART COMPONENTS (wrapping Recharts):
-  <DashboardUI.DesignChartCard title="Signups Over Time" description="Last 30 days">
-    <DashboardUI.DesignChartContainer config={chartConfig} maxHeight={300}>
-      <Recharts.BarChart data={data}>
-        <Recharts.CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
-        <Recharts.XAxis dataKey="date" tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }} />
-        <Recharts.YAxis tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }} />
-        <Recharts.Tooltip content={<DashboardUI.DesignChartTooltipContent />} />
-        <Recharts.Legend content={<DashboardUI.DesignChartLegendContent />} />
-        <Recharts.Bar dataKey="users" fill={DashboardUI.getDesignChartColor(0)} radius={[4, 4, 0, 0]} />
-      </Recharts.BarChart>
-    </DashboardUI.DesignChartContainer>
-  </DashboardUI.DesignChartCard>
-
-  chartConfig format: { [dataKey]: { label: "Human Name", color: DashboardUI.getDesignChartColor(index) } }
-
-  TABLE:
-  <DashboardUI.DesignTable>
-    <DashboardUI.DesignTableHeader>
-      <DashboardUI.DesignTableRow>
-        <DashboardUI.DesignTableHead>Name</DashboardUI.DesignTableHead>
-        <DashboardUI.DesignTableHead>Email</DashboardUI.DesignTableHead>
-      </DashboardUI.DesignTableRow>
-    </DashboardUI.DesignTableHeader>
-    <DashboardUI.DesignTableBody>
-      {rows.map(row => (
-        <DashboardUI.DesignTableRow key={row.id}>
-          <DashboardUI.DesignTableCell>{row.name}</DashboardUI.DesignTableCell>
-          <DashboardUI.DesignTableCell>{row.email}</DashboardUI.DesignTableCell>
-        </DashboardUI.DesignTableRow>
-      ))}
-    </DashboardUI.DesignTableBody>
-  </DashboardUI.DesignTable>
-
-OTHER COMPONENTS:
-  <DashboardUI.DesignButton variant="default|outline|ghost|link" size="default|sm|lg|icon">
-  <DashboardUI.DesignBadge variant="default|secondary|destructive|outline">
-  <DashboardUI.DesignSkeleton className="h-4 w-[200px]" />
-  <DashboardUI.DesignSeparator orientation="horizontal|vertical" />
-  <DashboardUI.DesignProgressBar value={75} max={100} />
-  <DashboardUI.DesignEmptyState title="No data" description="..." icon={...} />
+You have FULL FREEDOM over the page layout. Use standard JSX with Tailwind utility classes
+(flexbox, CSS grid, spacing, typography) — the DashboardUI components handle light/dark mode,
+glassmorphism, and typography automatically.
+
+Container baseline:
+  <div className="p-6 space-y-4 max-w-7xl mx-auto">
+
+Organizing principles (NOT component specifics — see each component's JSDoc for those):
 
+- Every dashboard MUST include at least one chart.
+- 2–4 metric cards max in a header row; use a CSS grid like
+  \`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4\`.
+- 1–2 charts max in the main content area. Don't pack the page.
+- Put interactive elements (tables, filters) below the overview section.
+- Always render loading, error, AND empty states. A blank chart is a bug.
+- Prefer skeletons over spinners for loading (see DesignSkeleton JSDoc).
+- User-facing error messages are short and non-technical. Log details with
+  \`console.error('[Dashboard] <what failed>:', err)\` — do NOT surface React error
+  codes, stack traces, or raw exception strings to the user.
+
+For any component-specific question (props, state shape, examples, gotchas), read the JSDoc
+on the component you're using. The JSDoc is included in the type definitions delivered with
+this prompt — it is the source of truth, not this section.
+
+DASHBOARD UI COMPONENTS
+────────────────────────────────────────
+\`React\`, \`DashboardUI\`, \`Recharts\`, and \`stackServerApp\` are pre-injected globals
+in the sandbox — no \`import\` / \`require\` / \`export\` statements, ever. Reference them
+directly (e.g. \`React.useState\`, \`DashboardUI.DataGrid\`). Light / dark mode,
+glassmorphic surfaces, and typography are handled automatically by the components.
+
+THE JSDOC IS LOAD-BEARING — READ IT BEFORE YOU WRITE CODE
+─────────────────────────────────────────────────────────
+The FULL usage contract for every DashboardUI.* component (mental model, canonical
+pattern, prop rules, runnable examples, common mistakes) lives in a JSDoc block on
+the component itself. Those JSDoc blocks are injected into your context alongside
+the TypeScript types. BEFORE you write a single line against any component, locate
+its JSDoc in the "DashboardUI component documentation" block and read it. The bare
+type signatures are NOT sufficient — the JSDoc is where the load-bearing rules live
+(e.g. "DataGrid.rows is NEVER your raw array; use useDataSource"). If the JSDoc and
+this prompt disagree, the JSDoc wins — it ships with the component and is always
+up to date.
+
+"Fully controlled" — what it means on DashboardUI components
+─────────────────────────────────────────────────────────────
+Components that expose \`state\` + \`onChange\` (DataGrid, AnalyticsChart) are fully
+controlled: the component holds no internal state. You store the full state object
+in a \`React.useState\` hook, pass the current value as \`state\`, and pass the setter
+directly as \`onChange\`. The component calls your setter with the NEXT complete state
+object whenever anything changes (sort, search, zoom, etc.) — it never merges, never
+partial-updates. Rules:
+
+1. Keep data and state in SEPARATE hooks. Never combine them into one \`useState\`.
+2. Pass the raw setter to \`onChange\`: \`onChange={setGridState}\`. Do not wrap it.
+3. Always initialize state from the component's \`create*State\` / \`DEFAULT_STATE\`
+   helper. Never hand-assemble the state object.
+4. Read each component's JSDoc for its exact state shape — do NOT guess fields.
+
+Quick map of what to use when:
+
+- KPI / big number                 → DashboardUI.DesignMetricCard
+- Grouping / section wrapper       → DashboardUI.DesignCard
+- Chart chrome (title + body)      → DashboardUI.DesignChartCard
+- Time-series chart                → DashboardUI.AnalyticsChart (inside a DesignChartCard)
+- Static ranking / distribution    → DashboardUI.DesignChartCard + DashboardUI.DesignChartContainer + raw Recharts.*
+- Small static list (< 20 rows)    → DashboardUI.DesignTable + DesignTableHeader / Row / Head / Body / Cell
+- Interactive / large table        → DashboardUI.DataGrid + DashboardUI.useDataSource + DashboardUI.createDefaultDataGridState
+- Status pills / tags              → DashboardUI.DesignBadge
+- Buttons                          → DashboardUI.DesignButton
+- Empty / zero-result placeholder  → DashboardUI.DesignEmptyState
+- Loading placeholder              → DashboardUI.DesignSkeleton (NEVER a spinner or "Loading..." text)
+- Progress / quota bar             → DashboardUI.DesignProgressBar
+- Divider line                     → DashboardUI.DesignSeparator
+
+Chart decision tree:
+
+  1. Is the x-axis a timestamp? → AnalyticsChart (area / line / bar / compare / segmented).
+  2. Is it a breakdown / distribution you want to show as a pie? → AnalyticsChart with \`view: "pie"\`.
+  3. Is it a static ranking, horizontal bar chart, or something Recharts has but AnalyticsChart doesn't?
+     → Raw Recharts inside DesignChartCard + DesignChartContainer.
+  4. Is it a single number? → DesignMetricCard, not a chart.
+
+Do NOT reach for raw Recharts as a default. AnalyticsChart handles zoom, tooltips,
+annotations, formatting, and dark-mode palette automatically; rebuilding those on
+top of Recharts is wasted work.
 ────────────────────────────────────────
 LAYOUT
 ────────────────────────────────────────
@@ -641,6 +678,13 @@ Example:
   function Dashboard() {
     const [loading, setLoading] = React.useState(true);
     const [users, setUsers] = React.useState(null);
+    const [chartData, setChartData] = React.useState([]);
+    const [chartState, setChartState] = React.useState({
+      ...DashboardUI.ANALYTICS_CHART_DEFAULT_STATE,
+      layers: DashboardUI.ANALYTICS_CHART_DEFAULT_STATE.layers.map(l =>
+        l.kind === "compare" ? { ...l, visible: false } : l
+      ),
+    });
     const [error, setError] = React.useState(null);
     const [showControls] = React.useState(!!window.__showControls);
     const [chatOpen, setChatOpen] = React.useState(!!window.__chatOpen);
@@ -677,19 +721,22 @@ Example:
           <DashboardUI.DesignMetricCard label="Verified" value={verifiedUsers} onClick={() => window.dashboardNavigate('/users')} className="cursor-pointer hover:bg-foreground/[0.02] transition-colors hover:transition-none" />
         </div>
         <DashboardUI.DesignChartCard title="Signups Over Time">
-          <DashboardUI.DesignChartContainer config={{}} maxHeight={300}>
-            {/* Recharts chart here */}
-          </DashboardUI.DesignChartContainer>
+          {/* data and state are SEPARATE hooks — onChange receives AnalyticsChartState directly */}
+          <DashboardUI.AnalyticsChart data={chartData} state={chartState} onChange={setChartState} />
         </DashboardUI.DesignChartCard>
       </div>
     );
   }
 
 ────────────────────────────────────────
-RECHARTS (via Recharts.*)
+RECHARTS (via Recharts.*) — FALLBACK ONLY
 ────────────────────────────────────────
-Use via Recharts.* — always wrap in DashboardUI.DesignChartContainer:
-- Recharts.LineChart, Recharts.BarChart, Recharts.AreaChart, Recharts.PieChart
+Use raw Recharts ONLY for non-time-series visuals (static bar rankings, pie charts).
+For any time-series data, use DashboardUI.AnalyticsChart instead (see above).
+
+Available via Recharts.* — always wrap in DashboardUI.DesignChartContainer:
+- Recharts.BarChart, Recharts.PieChart (most common fallback uses)
+- Recharts.LineChart, Recharts.AreaChart (prefer AnalyticsChart for these)
 - Recharts.XAxis, Recharts.YAxis, Recharts.CartesianGrid
 - Recharts.Line, Recharts.Bar, Recharts.Area, Recharts.Cell
 - Recharts.ResponsiveContainer (used internally by DesignChartContainer — do NOT wrap again)
@@ -703,11 +750,19 @@ TYPE DEFINITIONS
 The type definitions for the Stack SDK and dashboard UI components will be provided in the user messages.
 Use them to determine available fields, methods, prop types, and variants.
 
-CLICKHOUSE (queryAnalytics only)
-Available tables:
+CLICKHOUSE ANALYTICS
+Two ways to use ClickHouse:
+
+1. **queryAnalytics TOOL (reasoning loop, inspection)** — use this BEFORE writing code, to look at real data.
+2. **stackServerApp.queryAnalytics({ query }) at RUNTIME (embedded in the dashboard TSX)** — use this INSIDE
+   the Dashboard component to fetch live aggregates for charts/tables. Returns \`{ result: Record<string, unknown>[], query_id: string }\`.
+
+Project + branch filtering is AUTOMATIC in both cases. Do NOT add \`WHERE project_id = ...\`.
+
+Available tables (same schema in both contexts):
 
 events:
-- event_type: LowCardinality(String) ($token-refresh only)
+- event_type: LowCardinality(String) ($token-refresh only, today)
 - event_at: DateTime64(3, 'UTC')
 - data: JSON
 - user_id: Nullable(String)
@@ -725,6 +780,98 @@ users (limited fields):
 - server_metadata: JSON
 - is_anonymous: UInt8 (0/1)
 
+────────────────────────────────────────
+INSPECTION LOOP — USE SPARINGLY
+────────────────────────────────────────
+\`queryAnalytics\` is an inspection tool that lets you look at real data before building the dashboard.
+
+DEFAULT TO SKIPPING INSPECTION. Only inspect if ONE of these is true:
+- You need to know the scale/shape of the data to pick the right chart type or normalization.
+- The user's question implies a segmentation (by region/plan/provider) and you need to check what segments exist.
+- You need to know the JSON keys in \`data\` / \`*_metadata\` columns before writing JSONExtract.
+- The user said the previous dashboard was "wrong", "off", or "not scaled well" — inspect to fix deterministically.
+
+BUDGET: ≤ 2 queries per turn. Make each query count — prefer aggregates that reveal multiple
+dimensions at once (e.g. combine counts, date ranges, and segments in one query).
+
+INSPECTION QUERY DISCIPLINE (when you do inspect):
+- ALWAYS include \`LIMIT\` (≤ 20 for row samples). Results are TRUNCATED to 50 rows for you.
+- PREFER aggregates (\`count\`, \`sum\`, \`min\`, \`max\`, \`avg\`, \`quantile\`, \`GROUP BY\`) over \`SELECT *\`.
+- Keep queries FAST. Add a time filter (\`event_at > now() - INTERVAL ...\`) where it helps.
+- Do NOT paste query results verbatim into the dashboard text. Use them to inform design only.
+- On a query error (unknown column, missing JSON key), DO NOT fall back to fabricated data.
+  See DATA HONESTY below.
+
+INSPECTION QUERY EXAMPLES (reference, not a checklist):
+  -- Scale check before a dual-axis chart:
+  SELECT count() AS signups, sum(toFloat64OrZero(JSONExtractString(data, 'amount_usd'))) AS revenue
+  FROM events WHERE event_at > now() - INTERVAL 30 DAY
+
+  -- Segment existence before "by region":
+  SELECT JSONExtractString(client_metadata, 'region') AS region, count()
+  FROM users GROUP BY region ORDER BY count() DESC LIMIT 10
+
+  -- Project age to pick a default window:
+  SELECT min(signed_up_at), max(signed_up_at), count() FROM users
+
+────────────────────────────────────────
+DATA HONESTY (HARD RULE — NEVER FABRICATE DATA)
+────────────────────────────────────────
+You MUST only use fields that actually exist in the SDK types or the ClickHouse schema. You
+MUST NOT invent synthetic/placeholder/mock data to fill in gaps, EVER. A dashboard showing fake
+numbers is worse than one that admits the data is missing.
+
+If the user asks for a metric the data cannot answer:
+
+1. **Substitute**: pick the closest REAL metric and name it honestly in the UI. For example, if
+   the user asks for "revenue by region" but there is no revenue field and no region field,
+   build "signups by day" (or another real metric) and include a \`DashboardUI.DesignCard\` or
+   subtitle briefly saying: "Revenue and region aren't tracked yet — showing signup activity
+   instead."
+
+2. **Degrade**: if there is genuinely nothing relevant to show for part of the ask, render
+   \`DashboardUI.DesignEmptyState\` with a non-technical message explaining what's missing
+   (e.g. "No revenue data yet — connect payments to see this chart").
+
+3. **Ship what works**: always ship a working dashboard. Do not block on the missing piece —
+   build the parts you CAN build, and be explicit about the parts you can't.
+
+FORBIDDEN:
+- Hardcoding arrays like \`[{ region: 'US', revenue: 1200 }, ...]\` with made-up values.
+- Using \`Math.random()\` or seeded generators to produce "realistic-looking" data.
+- Inventing field names on real records (e.g. \`user.subscriptionPlan\` when that doesn't exist).
+- Silently fudging math so a chart "looks right" — if the data is wrong, fix the data source,
+  don't cook the numbers.
+
+If you are not sure whether a field exists, either (a) check the SDK type definitions already
+provided in your context, or (b) run ONE inspection query to confirm. Do not guess.
+
+────────────────────────────────────────
+RUNTIME QUERIES IN THE GENERATED DASHBOARD TSX
+────────────────────────────────────────
+For dashboards backed by ClickHouse aggregates (event trends, counts by segment, etc.),
+embed the query in the dashboard itself so it fetches live data at runtime:
+
+  const [rows, setRows] = React.useState(null);
+  const [error, setError] = React.useState(null);
+  React.useEffect(() => {
+    stackServerApp.queryAnalytics({
+      query: "SELECT toStartOfDay(event_at) AS day, count() AS n FROM events WHERE event_at > now() - INTERVAL 30 DAY GROUP BY day ORDER BY day"
+    })
+      .then(res => setRows(res.result))
+      .catch(err => { console.error('[Dashboard] query failed', err); setError('Failed to load analytics'); });
+  }, []);
+
+Rules:
+- The query string must be valid ClickHouse SQL that you have already TESTED via the queryAnalytics TOOL during inspection.
+- Always handle loading + error + empty states.
+- \`res.result\` is an array of plain objects — map it to Point[] for AnalyticsChart (preferred) or \`data\` for Recharts.
+- Do NOT hardcode sample/mock data in place of a real query.
+- CRITICAL: ClickHouse returns ALL values as strings. You MUST cast numeric columns with Number():
+    res.result.map(r => ({ ts: new Date(r.day).getTime(), values: { primary: Number(r.count) } }))
+  Forgetting Number() causes NaN in charts and broken rendering. Always cast.
+- For segment arrays, cast every element: segments = res.result.map(r => [Number(r.a), Number(r.b)])
+
 ────────────────────────────────────────
 NAVIGATION API (postMessage-based)
 ────────────────────────────────────────
@@ -758,20 +905,18 @@ BACK & EDIT CONTROLS (conditional)
 PRIMARY OBJECTIVE
 ────────────────────────────────────────
 Build a dashboard that directly answers THE USER'S SPECIFIC QUESTION.
-
 A "generic analytics dashboard" is wrong.
-Every card, chart, and table must exist only because it helps answer the query.
+
+Every card, chart, and table must exist because it helps answer the query.
 
 ────────────────────────────────────────
 DASHBOARD REQUIREMENTS (HARD RULES)
 ────────────────────────────────────────
 1) Read the user's query carefully. Build ONLY what answers it.
-2) The dashboard MUST include at least one Recharts chart that visualizes the answer.
+2) The dashboard MUST include at least one chart (prefer AnalyticsChart for time-series).
    - Text-only dashboards are not allowed.
-3) Keep it concise:
-   - 2–4 metric cards
-   - 1–2 charts
-   - Optional: a small table ONLY if it adds decision-useful detail
+3) 2–4 metric cards, 1–2 charts.
+   - Optional: small tables when they add decision-useful detail
 4) Never show technical details in the UI:
    - No API names, method names, SDK details, types, or implementation notes.
 5) Use professional, clean design:
@@ -795,17 +940,53 @@ If the user's intent is slightly ambiguous, infer the most useful dashboard and
 EXAMPLES (MENTAL MODEL, NOT UI TEXT)
 ────────────────────────────────────────
 Query: "how many users do I have?"
-→ Total users card, verified card, anonymous card, signup trend chart
+→ Total users card, verified card, anonymous card, signup trend AnalyticsChart
 
 Query: "what users came from oauth providers?"
-→ OAuth vs email cards, provider distribution chart (Google/GitHub/etc.)
+→ OAuth vs email cards, provider distribution Recharts.PieChart (non-time-series)
 
 Query: "show me user growth over time"
-→ Total users card, net-new in period card, growth rate card, line chart
+→ Total users card, net-new in period card, growth rate card, AnalyticsChart (area) with compare layer showing previous period
 
 Query: "which teams have the most users?"
 → Total teams card, avg users per team card, bar chart of top teams
 
+Query: "full analytics overview"
+→ Total users card, growth rate card, verified % card, AnalyticsChart: signups over time
+
+────────────────────────────────────────
+PRE-EMIT CHECKLIST (RUN THIS IN YOUR HEAD BEFORE CALLING updateDashboard)
+────────────────────────────────────────
+Before you call updateDashboard, silently walk through these four checks. If any fails, fix it
+FIRST and re-run the list.
+
+  [1] HOOK ORDER — Are all \`React.useState\` / \`React.useEffect\` / \`React.useCallback\` calls at
+      the top of the Dashboard component, before every \`if\` / early \`return\` / conditional?
+      If no, move them up. This prevents React error #310. Also check that any variable
+      referenced inside a hook initializer (e.g. \`useState(() => foo(columns))\`) is declared
+      ABOVE that hook — a TDZ error looks like a hook-order crash but isn't one.
+
+  [2] DATA HONESTY — Does every field the code references actually exist in the SDK types or
+      ClickHouse schema shown in context? No made-up field names, no hardcoded sample arrays,
+      no \`Math.random()\` data. If something is missing, substitute or degrade — don't fabricate.
+
+  [3] SCALE / TYPE MATCH — If the chart combines multiple metrics on one axis, are their ranges
+      actually compatible? If not, use a dual axis, a different chart, or split into two charts.
+      (This is the single most common "still not scaled well" failure mode.)
+
+  [4] SEGMENT INTEGRITY — For every layer with \`segmented: true\`:
+      - segments.length === data.length (one row per Point)
+      - segments[i].length === segmentSeries.length (one value per category)
+      - segments[i] values sum to data[i].values[layerId] (rows sum to the layer total)
+      - If using explicit palette: palette light/dark arrays have same length as segmentSeries
+      Missing any of these → chart renders incorrectly (gaps, overflow, or wrong colors).
+
+  [5] EMPTY / ERROR STATES — Does the code handle loading, error, AND empty-data paths with
+      \`DashboardUI.DesignSkeleton\` / \`DashboardUI.DesignEmptyState\` / a user-friendly error
+      message? A blank chart is a bug.
+
+All five pass → emit the tool call. Any fail → fix, re-check, emit.
+
 You MUST call the updateDashboard tool with the complete source code. NEVER output code directly in the chat.
 `,
 
@@ -817,42 +998,188 @@ You are helping users query their Stack Auth project's analytics data using Clic
 **Available Tables:**
 
 **events** - User activity events
-- event_type: LowCardinality(String) - $token-refresh is the only valid event_type right now, it occurs whenever an access token is refreshed
+- event_type: LowCardinality(String) - ONLY: $page-view, $click, $token-refresh
 - event_at: DateTime64(3, 'UTC') - When the event occurred
-- data: JSON - Additional event data
-- user_id: Nullable(String) - Associated user ID
-- team_id: Nullable(String) - Associated team ID
+- data: JSON - MUST use toString() before extracting: JSONExtractString(toString(data), 'key')
+- user_id: Nullable(String) - Always populated (no nulls)
+- team_id: Nullable(String) - Always NULL, never use
 - created_at: DateTime64(3, 'UTC') - When the record was created
 
+Event data payloads:
+- $page-view: {is_anonymous, path, referrer}
+- $click: {is_anonymous, selector}
+- $token-refresh: {is_anonymous, refresh_token_id, ip_info: {country_code, city_name, region_code, is_trusted, latitude, longitude, tz_identifier, ip}}
+
 **users** - User profiles
 - id: UUID - User ID
 - display_name: Nullable(String) - User's display name
 - primary_email: Nullable(String) - User's primary email
 - primary_email_verified: UInt8 - Whether email is verified (0/1)
 - signed_up_at: DateTime64(3, 'UTC') - When user signed up
-- client_metadata: JSON - Client-side metadata
-- client_read_only_metadata: JSON - Read-only client metadata
-- server_metadata: JSON - Server-side metadata
+- client_metadata: JSON - Typically empty
+- client_read_only_metadata: JSON - Typically empty
+- server_metadata: JSON - Typically empty
 - is_anonymous: UInt8 - Whether user is anonymous (0/1)
 
 **SQL Query Guidelines:**
 - Only SELECT queries are allowed (no INSERT, UPDATE, DELETE)
 - Project filtering is automatic - you don't need WHERE project_id = ...
+- JSON extraction REQUIRES toString(): JSONExtractString(toString(data), 'key')
+- Nested JSON uses dot notation: JSONExtractString(toString(data), 'ip_info.country_code')
 - Always use LIMIT to avoid returning too many rows (default to LIMIT 100)
-- Use appropriate date functions: toDate(), toStartOfDay(), toStartOfWeek(), etc.
-- For counting, use COUNT(*) or COUNT(DISTINCT column)
+- Use relative date ranges: now() - INTERVAL X DAY
+- Use date functions: toDate(), toStartOfDay(), toStartOfWeek(), etc.
+- For counting, use count() or count(DISTINCT column)
 
 **Example Queries:**
-- Count users: \`SELECT COUNT(*) FROM users\`
+- Count users: \`SELECT count() FROM users\`
 - Recent signups: \`SELECT * FROM users ORDER BY signed_up_at DESC LIMIT 10\`
-- Events today: \`SELECT COUNT(*) FROM events WHERE toDate(event_at) = today()\`
-- Event types: \`SELECT event_type, COUNT(*) as count FROM events GROUP BY event_type ORDER BY count DESC LIMIT 10\`
+- Events today: \`SELECT count() FROM events WHERE toDate(event_at) = today()\`
+- Page views by path: \`SELECT JSONExtractString(toString(data), 'path') as path, count() as views FROM events WHERE event_type = '$page-view' GROUP BY path ORDER BY views DESC LIMIT 20\`
 
 **Focus:**
 - Help users write efficient, correct ClickHouse SQL queries
 - Explain query results clearly
 - Suggest relevant queries based on user questions
 - Use the queryAnalytics tool to execute queries and return results
+`,
+
+  "build-analytics-query": `
+## Context: Analytics Query Builder
+
+You are a ClickHouse SQL expert helping the user build queries that drive a data grid on the Stack Auth analytics page. The user asks questions in natural language; you translate them into accurate, one-shot ClickHouse SQL. You have complete schema knowledge below — use it to generate correct queries immediately without needing to inspect the data first.
+
+**HARD RULE — how the tool works:**
+Call \`queryAnalytics\` with your SQL query. The grid runs the full query independently — you only receive a preview (first 50 rows) to confirm the query is correct. The frontend only applies the query after the agent comes to a complete stop, so avoid being too chatty in the first few turns unless the user asks for it.
+1. Do NOT paste SQL into chat text in place of a tool call — the UI will not pick it up.
+2. You only see a small preview in the tool result — the user sees the full result set in the grid.
+3. Because you only get 50 preview rows, do NOT try to analyze full result sets from the tool output. If the user asks about the data, describe the query and let them read the grid.
+4. The grid wraps your query as a subquery: \`SELECT * FROM (<your query>) LIMIT 50 OFFSET ...\` and paginates via infinite scroll. Your LIMIT sets the **maximum total rows** the user can scroll through — use generous limits (e.g. 1000 for aggregates) so the grid can paginate the full result.
+
+### DATA SCHEMA (project/branch filtering is automatic — do NOT add WHERE project_id = ...)
+
+**users** table:
+| Column | Type | Notes |
+|--------|------|-------|
+| id | UUID | Primary key |
+| display_name | Nullable(String) | Typically populated |
+| primary_email | Nullable(String) | Usually present |
+| primary_email_verified | UInt8 (0/1) | Primary user segmentation axis |
+| signed_up_at | DateTime64(3, 'UTC') | High-resolution timestamp |
+| is_anonymous | UInt8 (0/1) | Rare; mostly testing |
+| client_metadata | JSON | Typically empty {} |
+| server_metadata | JSON | Typically empty {} |
+| client_read_only_metadata | JSON | Typically empty {} |
+| restricted_by_admin | UInt8 (0/1) | Rare; administrative flag |
+
+Key insights: Metadata fields are sparse/empty — don't expect rich structures. Email verification is the primary segmentation. Anonymous users are negligible.
+
+**events** table:
+| Column | Type | Notes |
+|--------|------|-------|
+| event_type | LowCardinality(String) | ONLY: \`$page-view\`, \`$click\`, \`$token-refresh\` |
+| event_at | DateTime64(3, 'UTC') | Use for aggregation by day/week/month |
+| data | JSON | Native JSON — MUST use toString() before extracting (see rules) |
+| user_id | Nullable(String) | 100% populated (no nulls); safe for filtering/joins |
+| team_id | Nullable(String) | Always NULL — never use it |
+| created_at | DateTime64(3, 'UTC') | Processing timestamp |
+
+### JSON PAYLOAD STRUCTURES (per event_type)
+
+**\`$page-view\`** data:
+\`\`\`json
+{"is_anonymous": false, "path": "/some-page", "referrer": "http://...or-empty"}
+\`\`\`
+- path: multiple unique page paths
+- referrer: empty string (most common) or various HTTP referrers
+
+**\`$click\`** data:
+\`\`\`json
+{"is_anonymous": false, "selector": "string-value"}
+\`\`\`
+- selector: low cardinality
+
+**\`$token-refresh\`** data:
+\`\`\`json
+{
+  "is_anonymous": false,
+  "refresh_token_id": "uuid-string",
+  "ip_info": {
+    "city_name": "string",
+    "country_code": "2-letter-ISO",
+    "ip": "ip-address",
+    "is_trusted": true,
+    "latitude": 0.0,
+    "longitude": 0.0,
+    "region_code": "string",
+    "tz_identifier": "timezone-string"
+  }
+}
+\`\`\`
+- Token refresh is an excellent proxy for active authenticated sessions
+- ip_info has rich geolocation data for geo-based analysis
+
+### CRITICAL SQL RULES
+
+1. **JSON extraction REQUIRES toString() wrapper:**
+   - CORRECT: \`JSONExtractString(toString(data), 'path')\`
+   - WRONG: \`JSONExtractString(data, 'path')\` — this WILL FAIL
+2. **Nested JSON uses dot notation:**
+   - CORRECT: \`JSONExtractString(toString(data), 'ip_info.country_code')\`
+   - WRONG: \`JSONExtractString(data, 'ip_info')['country_code']\`
+3. SELECT queries only — no INSERT / UPDATE / DELETE / DDL
+4. ALWAYS include LIMIT — this caps the total rows the user can scroll through in the grid (default 100 for row samples, 1000 for aggregates)
+5. Use relative date ranges: \`now() - INTERVAL X DAY\`
+6. team_id is always NULL — never filter on it
+7. Metadata fields are almost always empty — safe to ignore
+8. Prefer aggregates (count, sum, avg, quantile, GROUP BY) when the user is asking a question
+9. Use ClickHouse date helpers: toDate(), toStartOfDay(), toStartOfWeek(), toStartOfMonth()
+
+### COMMON QUERY PATTERNS
+
+Signups by day:
+\`\`\`sql
+SELECT toDate(signed_up_at) as date, count() as signups
+FROM users WHERE signed_up_at >= now() - INTERVAL 30 DAY
+GROUP BY date ORDER BY date DESC LIMIT 100
+\`\`\`
+
+Page views by path:
+\`\`\`sql
+SELECT JSONExtractString(toString(data), 'path') as path, count() as views
+FROM events WHERE event_type = '$page-view' AND event_at >= now() - INTERVAL 7 DAY
+GROUP BY path ORDER BY views DESC LIMIT 20
+\`\`\`
+
+Token refreshes by country:
+\`\`\`sql
+SELECT JSONExtractString(toString(data), 'ip_info.country_code') as country,
+  count() as refreshes, count(DISTINCT user_id) as unique_users
+FROM events WHERE event_type = '$token-refresh' AND event_at >= now() - INTERVAL 7 DAY
+GROUP BY country ORDER BY refreshes DESC LIMIT 50
+\`\`\`
+
+Email verification adoption:
+\`\`\`sql
+SELECT primary_email_verified, count() as users
+FROM users WHERE signed_up_at >= now() - INTERVAL 30 DAY
+GROUP BY primary_email_verified LIMIT 10
+\`\`\`
+
+Event volume trends by type:
+\`\`\`sql
+SELECT toDate(event_at) as date, event_type, count() as event_count
+FROM events WHERE event_at >= now() - INTERVAL 30 DAY
+GROUP BY date, event_type ORDER BY date DESC, event_count DESC LIMIT 100
+\`\`\`
+
+### INTERACTION STYLE
+
+- Generate accurate one-shot queries using the schema above. Do NOT run inspection queries unless the user asks about something genuinely ambiguous that the schema doesn't cover.
+- Keep chat messages short — the user sees the grid directly.
+- If the user refers to a previous query, modify it incrementally — don't start from scratch.
+- If \`queryAnalytics\` returns an error, adjust and retry. Do NOT invent columns or fabricate data.
+- If the user asks about event types or data that don't exist in the schema above, explain what IS available and generate the closest useful query instead.
 `,
 
   "rewrite-template-source": `You rewrite email template TSX source into standalone draft TSX.
diff --git a/apps/backend/src/lib/ai/schema.ts b/apps/backend/src/lib/ai/schema.ts
index e27a5abe27..3da71d7b21 100644
--- a/apps/backend/src/lib/ai/schema.ts
+++ b/apps/backend/src/lib/ai/schema.ts
@@ -15,6 +15,7 @@ export const requestBodySchema = yupObject({
     "email-assistant-draft",
     "create-dashboard",
     "run-query",
+    "build-analytics-query",
     "rewrite-template-source"
   ]).defined(),
   messages: yupArray(
diff --git a/apps/backend/src/lib/ai/tools/sql-query.ts b/apps/backend/src/lib/ai/tools/sql-query.ts
index 3025e03e90..37054d02b9 100644
--- a/apps/backend/src/lib/ai/tools/sql-query.ts
+++ b/apps/backend/src/lib/ai/tools/sql-query.ts
@@ -9,19 +9,21 @@ export const SQL_QUERY_RESULT_MAX_CHARS = 50_000;
 
 export function createSqlQueryTool(auth: SmartRequestAuth | null, targetProjectId?: string | null) {
   if (auth == null) {
-    // Return null or throw - analytics queries require authentication
     return null;
   }
 
   const projectId = targetProjectId ?? auth.tenancy.project.id;
   const branchId = targetProjectId ? "main" : auth.tenancy.branchId;
 
+  // Max rows returned to the model (backstop if LIMIT is missing).
+  const MAX_ROWS_FOR_AI = 50;
+
   return tool({
-    description: "Run a ClickHouse SQL query against the project's analytics database. Only SELECT queries are allowed. Project filtering is automatic.",
+    description: `Set and validate a ClickHouse SQL query for the analytics data grid. The grid runs the full query independently — you only receive a preview of the first ${MAX_ROWS_FOR_AI} rows to confirm correctness. Only SELECT queries are allowed. Project filtering is automatic. Always include a LIMIT clause.`,
     inputSchema: z.object({
       query: z
         .string()
-        .describe("The ClickHouse SQL query to execute. Only SELECT queries are allowed. Always include LIMIT clause."),
+        .describe("The ClickHouse SQL query to execute. Only SELECT queries are allowed. Always include a LIMIT clause unless the system prompt tells you to do otherwise."),
     }),
     execute: async ({ query }: { query: string }) => {
       const client = getClickhouseExternalClient();
@@ -41,7 +43,18 @@ export function createSqlQueryTool(auth: SmartRequestAuth | null, targetProjectI
           format: "JSONEachRow",
         });
         const rows = await resultSet.json<Record<string, unknown>[]>();
-        const response = { success: true as const, rowCount: rows.length, result: rows };
+        const truncated = rows.length > MAX_ROWS_FOR_AI;
+        const returnedRows = truncated ? rows.slice(0, MAX_ROWS_FOR_AI) : rows;
+        const response = {
+          success: true as const,
+          rowCount: returnedRows.length,
+          totalRows: rows.length,
+          truncated,
+          ...(truncated
+            ? { truncationNote: `Only the first ${MAX_ROWS_FOR_AI} of ${rows.length} rows are shown. Add LIMIT or aggregate to see the rest.` }
+            : {}),
+          result: returnedRows,
+        };
         const serialized = JSON.stringify(response);
         if (serialized.length > SQL_QUERY_RESULT_MAX_CHARS) {
           return {
diff --git a/apps/backend/src/lib/metrics-activity-split.ts b/apps/backend/src/lib/metrics-activity-split.ts
new file mode 100644
index 0000000000..f8e6eecf53
--- /dev/null
+++ b/apps/backend/src/lib/metrics-activity-split.ts
@@ -0,0 +1,244 @@
+import type { MetricsActivitySplit } from "@stackframe/stack-shared/dist/interface/admin-metrics";
+
+export type ActivitySplit = MetricsActivitySplit;
+
+export function createEmptySplitSeries(days: string[]): ActivitySplit {
+  const emptySeries = days.map((date) => ({ date, activity: 0 }));
+  return {
+    total: emptySeries.map((item) => ({ ...item })),
+    new: emptySeries.map((item) => ({ ...item })),
+    retained: emptySeries.map((item) => ({ ...item })),
+    reactivated: emptySeries.map((item) => ({ ...item })),
+  };
+}
+
+/**
+ * Bucket each day's active entity ids into new / retained / reactivated counts.
+ *
+ * Classification rules (in order):
+ *   1. createdDay === current day                       → new
+ *   2. entity was active on the immediately previous day → retained
+ *   3. entity was active earlier in the window           → reactivated
+ *   4. createdDay falls inside the window                → new (gap-day case)
+ *   5. otherwise (created before window, or unknown)     → reactivated
+ *      (avoids inflating "new" for pre-existing entities first seen inside the window)
+ */
+export function buildSplitFromDailyEntitySets(options: {
+  orderedDays: string[],
+  entityIdsByDay: Map<string, Set<string>>,
+  createdDayByEntityId?: Map<string, string>,
+}): ActivitySplit {
+  const { orderedDays, entityIdsByDay, createdDayByEntityId } = options;
+  const split = createEmptySplitSeries(orderedDays);
+  const windowStart = orderedDays[0];
+  const previouslySeen = new Set<string>();
+  let previousDaySet = new Set<string>();
+
+  for (let i = 0; i < orderedDays.length; i += 1) {
+    const day = orderedDays[i];
+    const currentDaySet = entityIdsByDay.get(day) ?? new Set<string>();
+    let newCount = 0;
+    let retainedCount = 0;
+    let reactivatedCount = 0;
+
+    for (const entityId of currentDaySet) {
+      const createdDay = createdDayByEntityId?.get(entityId);
+      if (createdDay === day) {
+        newCount += 1;
+      } else if (previousDaySet.has(entityId)) {
+        retainedCount += 1;
+      } else if (previouslySeen.has(entityId)) {
+        reactivatedCount += 1;
+      } else if (createdDay != null && createdDay >= windowStart) {
+        // Created within the window on a different day, but not active on the
+        // immediately previous day — treat as new (gap-day case).
+        newCount += 1;
+      } else {
+        // Either created before the window started, or createdDay is unknown.
+        // Either way, we cannot legitimately bucket this as "new" — count as
+        // reactivated to avoid inflating new-user metrics for pre-existing
+        // entities first seen inside the window.
+        reactivatedCount += 1;
+      }
+    }
+
+    split.total[i].activity = currentDaySet.size;
+    split.new[i].activity = newCount;
+    split.retained[i].activity = retainedCount;
+    split.reactivated[i].activity = reactivatedCount;
+
+    for (const entityId of currentDaySet) {
+      previouslySeen.add(entityId);
+    }
+    previousDaySet = currentDaySet;
+  }
+
+  return split;
+}
+
+if (import.meta.vitest) {
+  const { test, expect, describe } = import.meta.vitest;
+
+  // Three-day window for the simple cases below.
+  const days = ['2026-04-01', '2026-04-02', '2026-04-03'];
+
+  describe("buildSplitFromDailyEntitySets", () => {
+    test("classifies a user active only today as new when their createdDay === today", () => {
+      const split = buildSplitFromDailyEntitySets({
+        orderedDays: days,
+        entityIdsByDay: new Map([
+          ['2026-04-01', new Set()],
+          ['2026-04-02', new Set()],
+          ['2026-04-03', new Set(['user-a'])],
+        ]),
+        createdDayByEntityId: new Map([['user-a', '2026-04-03']]),
+      });
+      expect(split.new.map((d) => d.activity)).toEqual([0, 0, 1]);
+      expect(split.retained.map((d) => d.activity)).toEqual([0, 0, 0]);
+      expect(split.reactivated.map((d) => d.activity)).toEqual([0, 0, 0]);
+      expect(split.total.map((d) => d.activity)).toEqual([0, 0, 1]);
+    });
+
+    test("classifies a user active on consecutive days as new on day 1 and retained on day 2", () => {
+      const split = buildSplitFromDailyEntitySets({
+        orderedDays: days,
+        entityIdsByDay: new Map([
+          ['2026-04-01', new Set(['user-a'])],
+          ['2026-04-02', new Set(['user-a'])],
+          ['2026-04-03', new Set()],
+        ]),
+        createdDayByEntityId: new Map([['user-a', '2026-04-01']]),
+      });
+      expect(split.new.map((d) => d.activity)).toEqual([1, 0, 0]);
+      expect(split.retained.map((d) => d.activity)).toEqual([0, 1, 0]);
+      expect(split.reactivated.map((d) => d.activity)).toEqual([0, 0, 0]);
+    });
+
+    test("classifies a user with a gap day as new then reactivated", () => {
+      // Active day 1, missing day 2, active day 3 → reactivated on day 3
+      // because they were previously seen but not on the immediately previous day.
+      const split = buildSplitFromDailyEntitySets({
+        orderedDays: days,
+        entityIdsByDay: new Map([
+          ['2026-04-01', new Set(['user-a'])],
+          ['2026-04-02', new Set()],
+          ['2026-04-03', new Set(['user-a'])],
+        ]),
+        createdDayByEntityId: new Map([['user-a', '2026-04-01']]),
+      });
+      expect(split.new.map((d) => d.activity)).toEqual([1, 0, 0]);
+      expect(split.retained.map((d) => d.activity)).toEqual([0, 0, 0]);
+      expect(split.reactivated.map((d) => d.activity)).toEqual([0, 0, 1]);
+    });
+
+    test("classifies a user created in-window with a gap before first activity as new (rule 4)", () => {
+      // createdDay is 2026-04-02 but they're not active on 2026-04-02.
+      // First active 2026-04-03 → bucket as new (created within window),
+      // not reactivated, because they have never been seen before.
+      const split = buildSplitFromDailyEntitySets({
+        orderedDays: days,
+        entityIdsByDay: new Map([
+          ['2026-04-01', new Set()],
+          ['2026-04-02', new Set()],
+          ['2026-04-03', new Set(['user-a'])],
+        ]),
+        createdDayByEntityId: new Map([['user-a', '2026-04-02']]),
+      });
+      expect(split.new.map((d) => d.activity)).toEqual([0, 0, 1]);
+      expect(split.reactivated.map((d) => d.activity)).toEqual([0, 0, 0]);
+    });
+
+    test("classifies a user created before the window as reactivated, never new (rule 5)", () => {
+      // createdDay is 2026-03-15 (before window). They are first seen on 2026-04-02.
+      // Should bucket as reactivated to avoid inflating new-user metrics with
+      // pre-existing entities that just happened to log in inside the window.
+      const split = buildSplitFromDailyEntitySets({
+        orderedDays: days,
+        entityIdsByDay: new Map([
+          ['2026-04-01', new Set()],
+          ['2026-04-02', new Set(['user-a'])],
+          ['2026-04-03', new Set(['user-a'])],
+        ]),
+        createdDayByEntityId: new Map([['user-a', '2026-03-15']]),
+      });
+      expect(split.new.map((d) => d.activity)).toEqual([0, 0, 0]);
+      expect(split.retained.map((d) => d.activity)).toEqual([0, 0, 1]);
+      expect(split.reactivated.map((d) => d.activity)).toEqual([0, 1, 0]);
+    });
+
+    test("treats unknown createdDay as 'never new' (rule 5 fallback)", () => {
+      // user-a is active in the window but has no createdDay record. The
+      // function should not bucket them as new — falls into reactivated.
+      const split = buildSplitFromDailyEntitySets({
+        orderedDays: days,
+        entityIdsByDay: new Map([
+          ['2026-04-01', new Set()],
+          ['2026-04-02', new Set(['user-a'])],
+          ['2026-04-03', new Set()],
+        ]),
+        createdDayByEntityId: new Map(),
+      });
+      expect(split.new.map((d) => d.activity)).toEqual([0, 0, 0]);
+      expect(split.reactivated.map((d) => d.activity)).toEqual([0, 1, 0]);
+    });
+
+    test("handles multiple users with different classification on the same day", () => {
+      // Day 3:
+      //   - user-a created day 3 → new
+      //   - user-b active day 2 + day 3 → retained
+      //   - user-c active day 1 then day 3 (gap) → reactivated
+      const split = buildSplitFromDailyEntitySets({
+        orderedDays: days,
+        entityIdsByDay: new Map([
+          ['2026-04-01', new Set(['user-c'])],
+          ['2026-04-02', new Set(['user-b'])],
+          ['2026-04-03', new Set(['user-a', 'user-b', 'user-c'])],
+        ]),
+        createdDayByEntityId: new Map([
+          ['user-a', '2026-04-03'],
+          ['user-b', '2026-04-02'],
+          ['user-c', '2026-04-01'],
+        ]),
+      });
+      expect(split.total[2].activity).toBe(3);
+      expect(split.new[2].activity).toBe(1);        // user-a
+      expect(split.retained[2].activity).toBe(1);   // user-b
+      expect(split.reactivated[2].activity).toBe(1); // user-c
+    });
+
+    test("returns all-zero series when no entities are active", () => {
+      const split = buildSplitFromDailyEntitySets({
+        orderedDays: days,
+        entityIdsByDay: new Map(),
+        createdDayByEntityId: new Map(),
+      });
+      expect(split.total.map((d) => d.activity)).toEqual([0, 0, 0]);
+      expect(split.new.map((d) => d.activity)).toEqual([0, 0, 0]);
+      expect(split.retained.map((d) => d.activity)).toEqual([0, 0, 0]);
+      expect(split.reactivated.map((d) => d.activity)).toEqual([0, 0, 0]);
+    });
+
+    test("preserves the orderedDays date list across all four series", () => {
+      const split = buildSplitFromDailyEntitySets({
+        orderedDays: days,
+        entityIdsByDay: new Map(),
+      });
+      const dateList = days;
+      expect(split.total.map((d) => d.date)).toEqual(dateList);
+      expect(split.new.map((d) => d.date)).toEqual(dateList);
+      expect(split.retained.map((d) => d.date)).toEqual(dateList);
+      expect(split.reactivated.map((d) => d.date)).toEqual(dateList);
+    });
+  });
+
+  describe("createEmptySplitSeries", () => {
+    test("returns independent series objects (not aliased)", () => {
+      const split = createEmptySplitSeries(['2026-04-01', '2026-04-02']);
+      split.new[0].activity = 5;
+      // Mutating .new should not bleed into .total/.retained/.reactivated.
+      expect(split.total[0].activity).toBe(0);
+      expect(split.retained[0].activity).toBe(0);
+      expect(split.reactivated[0].activity).toBe(0);
+    });
+  });
+}
diff --git a/apps/backend/src/lib/seed-dummy-data.ts b/apps/backend/src/lib/seed-dummy-data.ts
index b9e3f85e21..8000166ef5 100644
--- a/apps/backend/src/lib/seed-dummy-data.ts
+++ b/apps/backend/src/lib/seed-dummy-data.ts
@@ -16,9 +16,50 @@ import { getEnvVariable } from '@stackframe/stack-shared/dist/utils/env';
 import { throwErr } from '@stackframe/stack-shared/dist/utils/errors';
 import { typedEntries, typedFromEntries } from '@stackframe/stack-shared/dist/utils/objects';
 import { generateUuid } from '@stackframe/stack-shared/dist/utils/uuids';
+import { createHash } from 'node:crypto';
 
 const EXPLORATORY_TEAM_DISPLAY_NAME = 'Exploratory Research and Insight Partnership With Very Long Collaborative Name For Testing';
 
+/**
+ * Derive a stable v4-shaped UUID from a namespaced string so seed re-runs
+ * upsert into existing rows instead of creating duplicates.
+ */
+function deterministicUuid(namespace: string): string {
+  const hex = createHash('sha256').update(namespace).digest('hex');
+  const a = hex.slice(0, 8);
+  const b = hex.slice(8, 12);
+  const c = '4' + hex.slice(13, 16);
+  const d = ((parseInt(hex.slice(16, 17), 16) & 0x3) | 0x8).toString(16) + hex.slice(17, 20);
+  const e = hex.slice(20, 32);
+  return `${a}-${b}-${c}-${d}-${e}`;
+}
+
+/** Mulberry32 — small, fast, deterministic PRNG. */
+function deterministicPrng(seed: number): () => number {
+  let s = seed >>> 0;
+  return () => {
+    s = (s + 0x6D2B79F5) >>> 0;
+    let t = s;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+/** Convert a string into a deterministic 32-bit seed for `deterministicPrng`. */
+function seedFromString(input: string): number {
+  const hex = createHash('sha256').update(input).digest('hex').slice(0, 8);
+  return parseInt(hex, 16) >>> 0;
+}
+
+function daysAgo(d: number, h: number = 12): Date {
+  const date = new Date();
+  date.setHours(0, 0, 0, 0);
+  date.setDate(date.getDate() - d);
+  date.setHours(h, 0, 0, 0);
+  return date;
+}
+
 // ============= Types =============
 
 type TeamSeed = {
@@ -39,6 +80,7 @@ type UserSeed = {
   primaryEmailVerified: boolean,
   isAnonymous: boolean,
   oauthProviders: UserSeedOauthProvider[],
+  createdAt?: Date,
 };
 
 type SeedDummyTeamsOptions = {
@@ -88,6 +130,17 @@ type SessionActivityEventSeedOptions = {
   userEmailToId: Map<string, string>,
 };
 
+type BulkActivityRegion = {
+  country: string,
+  region: string,
+  city: string,
+  lat: number,
+  lon: number,
+  tz: string,
+  weight: number,
+  ipPrefix: string,
+};
+
 type SeedDummyProjectOptions = {
   projectId?: string,
   ownerTeamId: string,
@@ -119,6 +172,7 @@ const userSeeds: UserSeed[] = [
     oauthProviders: [
       { providerId: 'github', accountId: 'amelia-chen-gh' },
     ],
+    createdAt: daysAgo(28, 9),
   },
   {
     email: 'leo.park@dummy.dev',
@@ -126,6 +180,7 @@ const userSeeds: UserSeed[] = [
     primaryEmailVerified: false,
     isAnonymous: false,
     oauthProviders: [],
+    createdAt: daysAgo(28, 15),
   },
   {
     displayName: 'Some-long-display-name with-middle-name with-last-name',
@@ -137,6 +192,7 @@ const userSeeds: UserSeed[] = [
       { providerId: 'google', accountId: 'isla-rodriguez-google' },
       { providerId: 'microsoft', accountId: 'isla-rodriguez-msft' },
     ],
+    createdAt: daysAgo(25, 10),
   },
   {
     displayName: 'Al',
@@ -145,6 +201,7 @@ const userSeeds: UserSeed[] = [
     primaryEmailVerified: true,
     isAnonymous: true,
     oauthProviders: [],
+    createdAt: daysAgo(25, 16),
   },
   {
     displayName: 'Priya Narang',
@@ -155,6 +212,7 @@ const userSeeds: UserSeed[] = [
     oauthProviders: [
       { providerId: 'spotify', accountId: 'priya-narang-spotify' },
     ],
+    createdAt: daysAgo(23, 8),
   },
   {
     displayName: 'Jonas Richter',
@@ -164,6 +222,7 @@ const userSeeds: UserSeed[] = [
     primaryEmailVerified: true,
     isAnonymous: false,
     oauthProviders: [],
+    createdAt: daysAgo(21, 14),
   },
   {
     displayName: 'Chioma Mensah',
@@ -175,6 +234,7 @@ const userSeeds: UserSeed[] = [
     oauthProviders: [
       { providerId: 'google', accountId: 'chioma-mensah-google' },
     ],
+    createdAt: daysAgo(21, 17),
   },
   {
     displayName: 'Nia Holloway',
@@ -183,6 +243,7 @@ const userSeeds: UserSeed[] = [
     primaryEmailVerified: true,
     isAnonymous: false,
     oauthProviders: [],
+    createdAt: daysAgo(18, 11),
   },
   {
     displayName: 'Mateo Silva',
@@ -193,6 +254,7 @@ const userSeeds: UserSeed[] = [
     oauthProviders: [
       { providerId: 'github', accountId: 'mateo-silva-gh' },
     ],
+    createdAt: daysAgo(15, 9),
   },
   {
     displayName: 'Harper Lin',
@@ -201,6 +263,7 @@ const userSeeds: UserSeed[] = [
     primaryEmailVerified: true,
     isAnonymous: false,
     oauthProviders: [],
+    createdAt: daysAgo(12, 13),
   },
   {
     displayName: 'Zara Malik',
@@ -210,6 +273,7 @@ const userSeeds: UserSeed[] = [
     primaryEmailVerified: true,
     isAnonymous: false,
     oauthProviders: [],
+    createdAt: daysAgo(9, 10),
   },
   {
     displayName: 'Luca Bennett',
@@ -218,6 +282,7 @@ const userSeeds: UserSeed[] = [
     primaryEmailVerified: false,
     isAnonymous: false,
     oauthProviders: [],
+    createdAt: daysAgo(6, 16),
   },
   {
     displayName: 'Evelyn Brooks',
@@ -227,6 +292,7 @@ const userSeeds: UserSeed[] = [
     primaryEmailVerified: true,
     isAnonymous: false,
     oauthProviders: [],
+    createdAt: daysAgo(4, 8),
   },
   {
     displayName: 'Theo Fischer',
@@ -238,6 +304,7 @@ const userSeeds: UserSeed[] = [
     oauthProviders: [
       { providerId: 'microsoft', accountId: 'theo-fischer-msft' },
     ],
+    createdAt: daysAgo(3, 11),
   },
   {
     email: 'naomi.patel@dummy.dev',
@@ -245,6 +312,7 @@ const userSeeds: UserSeed[] = [
     primaryEmailVerified: false,
     isAnonymous: false,
     oauthProviders: [],
+    createdAt: daysAgo(1, 9),
   },
   {
     displayName: 'Kai Romero',
@@ -253,6 +321,7 @@ const userSeeds: UserSeed[] = [
     primaryEmailVerified: true,
     isAnonymous: false,
     oauthProviders: [],
+    createdAt: daysAgo(1, 15),
   },
 ];
 
@@ -272,6 +341,16 @@ const DUMMY_SEED_IDS = {
     ameliaSeatPack: '0b696a83-c54e-4a74-ae47-3ac5a4db49e6',
     launchCouncilUpfront: '10766081-37fd-410c-8b2e-1c3351e2d364',
   },
+  invoices: {
+    growthMonthly1: 'e1a2b3c4-d5e6-4f78-9a0b-1c2d3e4f5a60',
+    growthMonthly2: 'f2b3c4d5-e6f7-4890-ab1c-2d3e4f5a6b71',
+    growthMonthly3: 'a3c4d5e6-f7a8-4901-bc2d-3e4f5a6b7c82',
+    growthMonthly4: 'b4d5e6f7-a8b9-4012-cd3e-4f5a6b7c8d93',
+    growthMonthly5: 'c5e6f7a8-b9c0-4123-de4f-5a6b7c8d9ea4',
+    starterCreation: 'd6f7a8b9-c0d1-4234-ef50-6a7b8c9d0fb5',
+    legacyPaid1: 'e7a8b9c0-d1e2-4345-a061-7b8c9d0e1ac6',
+    legacyPaid2: 'f8b9c0d1-e2f3-4456-b172-8c9d0e1f2bd7',
+  },
   emails: {
     welcomeAmelia: 'af8cfd90-8912-4bf7-93a7-20ff2be54767',
     passkeyMilo: 'd534d777-5aa2-4014-a198-6484bbadcbf2',
@@ -355,6 +434,13 @@ async function seedDummyUsers(options: SeedDummyUsersOptions): Promise<Map<strin
       userId = createdUser.id;
     }
 
+    if (user.createdAt != null) {
+      await prisma.projectUser.updateMany({
+        where: { tenancyId: tenancy.id, projectUserId: userId },
+        data: { createdAt: user.createdAt },
+      });
+    }
+
     userEmailToId.set(user.email, userId);
 
     for (const teamName of user.teamDisplayNames) {
@@ -379,6 +465,98 @@ async function seedDummyUsers(options: SeedDummyUsersOptions): Promise<Map<strin
     }
   }
 
+  // Generate additional bulk users for realistic chart data
+  // Uses seeded PRNG for reproducibility — each day gets a varying number of sign-ups
+  const bulkFirstNames = [
+    'Alex', 'Jordan', 'Taylor', 'Morgan', 'Riley', 'Quinn', 'Avery', 'Dakota',
+    'Casey', 'Hayden', 'Cameron', 'Rowan', 'Sage', 'Blake', 'Emery', 'Skyler',
+    'Reese', 'Peyton', 'Eden', 'Finley', 'Kendall', 'Aubrey', 'Drew', 'Jesse',
+    'Parker', 'Robin', 'Sydney', 'River', 'Harley', 'Milan',
+  ];
+  const bulkLastNames = [
+    'Kim', 'Liu', 'Patel', 'Garcia', 'Brown', 'Davis', 'Wilson', 'Martinez',
+    'Anderson', 'Thomas', 'Jackson', 'White', 'Harris', 'Clark', 'Lewis',
+    'Robinson', 'Walker', 'Young', 'Allen', 'Scott', 'Adams', 'Nelson',
+    'Hill', 'Moore', 'Hall', 'King', 'Wright', 'Green', 'Baker', 'Turner',
+  ];
+  const bulkOauthProviders = ['google', 'github', 'microsoft'];
+
+  // Seeded LCG PRNG for reproducibility
+  let bulkSeed = 42;
+  const bulkRand = () => {
+    bulkSeed = (bulkSeed * 1664525 + 1013904223) & 0x7fffffff;
+    return bulkSeed / 0x7fffffff;
+  };
+
+  // Per-day sign-up counts (day 0 = 30 days ago, day 29 = yesterday)
+  // Pattern: gradual growth with realistic variance and weekend dips
+  const dailySignUpCounts = [
+    1, 0, 2, 1, 3, 0, 1,   // week 1 (low, starting out)
+    2, 3, 1, 2, 4, 1, 0,   // week 2 (picking up)
+    3, 2, 4, 3, 2, 5, 1,   // week 3 (steady growth)
+    4, 3, 5, 2, 6, 3, 2, 4, // week 4+ (peak recent activity)
+  ];
+
+  let bulkIndex = 0;
+  for (let dayOffset = 0; dayOffset < dailySignUpCounts.length; dayOffset++) {
+    const count = dailySignUpCounts[dayOffset];
+    const dayBack = dailySignUpCounts.length - dayOffset;
+
+    for (let j = 0; j < count; j++) {
+      const fnIdx = Math.floor(bulkRand() * bulkFirstNames.length);
+      const lnIdx = Math.floor(bulkRand() * bulkLastNames.length);
+      const firstName = bulkFirstNames[fnIdx]!;
+      const lastName = bulkLastNames[lnIdx]!;
+      const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}.bulk${bulkIndex}@dummy.dev`;
+      const displayName = `${firstName} ${lastName}`;
+      const hour = 8 + Math.floor(bulkRand() * 12);
+      const bulkCreatedAt = daysAgo(dayBack, hour);
+      const hasOauth = bulkRand() > 0.6;
+      const oauthProvider = hasOauth
+        ? [{ providerId: bulkOauthProviders[Math.floor(bulkRand() * bulkOauthProviders.length)]!, accountId: `${email}-oauth` }]
+        : [];
+
+      const existing = await prisma.projectUser.findFirst({
+        where: {
+          tenancyId: tenancy.id,
+          contactChannels: { some: { type: 'EMAIL', value: email } },
+        },
+        select: { projectUserId: true },
+      });
+
+      let bulkUserId: string;
+      if (!existing) {
+        const created = await usersCrudHandlers.adminCreate({
+          tenancy,
+          data: {
+            display_name: displayName,
+            primary_email: email,
+            primary_email_auth_enabled: true,
+            primary_email_verified: bulkRand() > 0.3,
+            otp_auth_enabled: false,
+            is_anonymous: false,
+            oauth_providers: oauthProvider.map((p) => ({
+              id: p.providerId,
+              account_id: p.accountId,
+              email,
+            })),
+            profile_image_url: null,
+          },
+        });
+        bulkUserId = created.id;
+      } else {
+        bulkUserId = existing.projectUserId;
+      }
+      await prisma.projectUser.updateMany({
+        where: { tenancyId: tenancy.id, projectUserId: bulkUserId },
+        data: { createdAt: bulkCreatedAt },
+      });
+      userEmailToId.set(email, bulkUserId);
+
+      bulkIndex++;
+    }
+  }
+
   return userEmailToId;
 }
 
@@ -452,6 +630,31 @@ function buildDummyPaymentsSetup(): PaymentsSetup {
         },
       },
     },
+    'regression-addon': {
+      displayName: 'Regression Add-on',
+      productLineId: 'add_ons',
+      customerType: 'user',
+      serverOnly: false,
+      stackable: true,
+      prices: {
+        monthly: {
+          USD: '199',
+          interval: monthlyInterval as any,
+          serverOnly: false,
+        },
+      },
+      includedItems: {
+        snapshot_credits: {
+          quantity: 500,
+          repeat: monthlyInterval as any,
+          expires: 'when-repeated',
+        },
+      },
+      isAddOnTo: {
+        'starter': true,
+        'growth': true,
+      },
+    },
   };
 
   const paymentsBranchOverride = {
@@ -460,6 +663,10 @@ function buildDummyPaymentsSetup(): PaymentsSetup {
         displayName: 'Workspace Plans',
         customerType: 'team',
       },
+      add_ons: {
+        displayName: 'Add-ons',
+        customerType: 'team',
+      },
     },
     items: {
       studio_seats: {
@@ -474,6 +681,10 @@ function buildDummyPaymentsSetup(): PaymentsSetup {
         displayName: 'Automation Minutes',
         customerType: 'user',
       },
+      snapshot_credits: {
+        displayName: 'Snapshot Credits',
+        customerType: 'user',
+      },
     },
     products: paymentsProducts,
   };
@@ -788,6 +999,116 @@ async function seedDummyTransactions(options: TransactionsSeedOptions) {
       },
     });
   }
+
+  type InvoiceSeed = {
+    id: string,
+    stripeSubscriptionId: string,
+    stripeInvoiceId: string,
+    isSubscriptionCreationInvoice: boolean,
+    status: string,
+    amountTotal: number,
+    createdAt: Date,
+  };
+
+  const invoiceSeeds: InvoiceSeed[] = [
+    {
+      id: DUMMY_SEED_IDS.invoices.growthMonthly1,
+      stripeSubscriptionId: 'sub_growth_designsystems',
+      stripeInvoiceId: 'in_growth_ds_001',
+      isSubscriptionCreationInvoice: true,
+      status: 'paid',
+      amountTotal: 12900,
+      createdAt: daysAgo(25, 10),
+    },
+    {
+      id: DUMMY_SEED_IDS.invoices.growthMonthly2,
+      stripeSubscriptionId: 'sub_growth_designsystems',
+      stripeInvoiceId: 'in_growth_ds_002',
+      isSubscriptionCreationInvoice: false,
+      status: 'paid',
+      amountTotal: 12900,
+      createdAt: daysAgo(18, 10),
+    },
+    {
+      id: DUMMY_SEED_IDS.invoices.growthMonthly3,
+      stripeSubscriptionId: 'sub_growth_designsystems',
+      stripeInvoiceId: 'in_growth_ds_003',
+      isSubscriptionCreationInvoice: false,
+      status: 'paid',
+      amountTotal: 12900,
+      createdAt: daysAgo(11, 10),
+    },
+    {
+      id: DUMMY_SEED_IDS.invoices.growthMonthly4,
+      stripeSubscriptionId: 'sub_growth_designsystems',
+      stripeInvoiceId: 'in_growth_ds_004',
+      isSubscriptionCreationInvoice: false,
+      status: 'paid',
+      amountTotal: 12900,
+      createdAt: daysAgo(4, 10),
+    },
+    {
+      id: DUMMY_SEED_IDS.invoices.growthMonthly5,
+      stripeSubscriptionId: 'sub_growth_designsystems',
+      stripeInvoiceId: 'in_growth_ds_005',
+      isSubscriptionCreationInvoice: false,
+      status: 'succeeded',
+      amountTotal: 15900,
+      createdAt: daysAgo(1, 14),
+    },
+    {
+      id: DUMMY_SEED_IDS.invoices.starterCreation,
+      stripeSubscriptionId: 'sub_starter_prototype',
+      stripeInvoiceId: 'in_starter_proto_001',
+      isSubscriptionCreationInvoice: true,
+      status: 'paid',
+      amountTotal: 0,
+      createdAt: daysAgo(20, 8),
+    },
+    {
+      id: DUMMY_SEED_IDS.invoices.legacyPaid1,
+      stripeSubscriptionId: 'sub_legacy_enterprise_alpha',
+      stripeInvoiceId: 'in_legacy_ent_001',
+      isSubscriptionCreationInvoice: true,
+      status: 'paid',
+      amountTotal: 49900,
+      createdAt: daysAgo(28, 9),
+    },
+    {
+      id: DUMMY_SEED_IDS.invoices.legacyPaid2,
+      stripeSubscriptionId: 'sub_legacy_enterprise_alpha',
+      stripeInvoiceId: 'in_legacy_ent_002',
+      isSubscriptionCreationInvoice: false,
+      status: 'paid',
+      amountTotal: 49900,
+      createdAt: daysAgo(14, 9),
+    },
+  ];
+
+  for (const invoice of invoiceSeeds) {
+    await prisma.subscriptionInvoice.upsert({
+      where: {
+        tenancyId_id: {
+          tenancyId,
+          id: invoice.id,
+        },
+      },
+      update: {
+        status: invoice.status,
+        amountTotal: invoice.amountTotal,
+      },
+      create: {
+        tenancyId,
+        id: invoice.id,
+        stripeSubscriptionId: invoice.stripeSubscriptionId,
+        stripeInvoiceId: invoice.stripeInvoiceId,
+        isSubscriptionCreationInvoice: invoice.isSubscriptionCreationInvoice,
+        status: invoice.status,
+        amountTotal: invoice.amountTotal,
+        createdAt: invoice.createdAt,
+      },
+    });
+  }
 }
 
 async function seedDummyEmails(options: EmailSeedOptions) {
@@ -907,134 +1228,491 @@ const sessionActivityLocations = [
   { countryCode: 'CH', regionCode: 'ZH', cityName: 'Zurich', latitude: 47.3769, longitude: 8.5417, tzIdentifier: 'Europe/Zurich' },
 ];
 
+// ── Bulk activity seed fixtures ─────────────────────────────────────────────
+
+const BULK_ACTIVITY_REGIONS: BulkActivityRegion[] = [
+  // North America
+  { country: 'US', region: 'CA', city: 'San Francisco', lat: 37.7749, lon: -122.4194, tz: 'America/Los_Angeles', weight: 18, ipPrefix: '104.16' },
+  { country: 'US', region: 'NY', city: 'New York', lat: 40.7128, lon: -74.0060, tz: 'America/New_York', weight: 14, ipPrefix: '23.56' },
+  { country: 'US', region: 'TX', city: 'Austin', lat: 30.2672, lon: -97.7431, tz: 'America/Chicago', weight: 6, ipPrefix: '68.54' },
+  { country: 'US', region: 'WA', city: 'Seattle', lat: 47.6062, lon: -122.3321, tz: 'America/Los_Angeles', weight: 5, ipPrefix: '52.10' },
+  { country: 'CA', region: 'ON', city: 'Toronto', lat: 43.6532, lon: -79.3832, tz: 'America/Toronto', weight: 5, ipPrefix: '99.240' },
+  { country: 'CA', region: 'BC', city: 'Vancouver', lat: 49.2827, lon: -123.1207, tz: 'America/Vancouver', weight: 3, ipPrefix: '206.75' },
+  { country: 'MX', region: 'CMX', city: 'Mexico City', lat: 19.4326, lon: -99.1332, tz: 'America/Mexico_City', weight: 2, ipPrefix: '189.148' },
+  // Europe
+  { country: 'GB', region: 'ENG', city: 'London', lat: 51.5074, lon: -0.1278, tz: 'Europe/London', weight: 10, ipPrefix: '90.196' },
+  { country: 'DE', region: 'BE', city: 'Berlin', lat: 52.5200, lon: 13.4050, tz: 'Europe/Berlin', weight: 7, ipPrefix: '91.64' },
+  { country: 'FR', region: 'IDF', city: 'Paris', lat: 48.8566, lon: 2.3522, tz: 'Europe/Paris', weight: 5, ipPrefix: '82.64' },
+  { country: 'NL', region: 'NH', city: 'Amsterdam', lat: 52.3676, lon: 4.9041, tz: 'Europe/Amsterdam', weight: 3, ipPrefix: '145.14' },
+  { country: 'ES', region: 'MD', city: 'Madrid', lat: 40.4168, lon: -3.7038, tz: 'Europe/Madrid', weight: 3, ipPrefix: '85.55' },
+  { country: 'IT', region: 'LAZ', city: 'Rome', lat: 41.9028, lon: 12.4964, tz: 'Europe/Rome', weight: 2, ipPrefix: '93.41' },
+  { country: 'PL', region: 'MZ', city: 'Warsaw', lat: 52.2297, lon: 21.0122, tz: 'Europe/Warsaw', weight: 2, ipPrefix: '178.42' },
+  { country: 'SE', region: 'AB', city: 'Stockholm', lat: 59.3293, lon: 18.0686, tz: 'Europe/Stockholm', weight: 2, ipPrefix: '81.229' },
+  { country: 'IE', region: 'D', city: 'Dublin', lat: 53.3498, lon: -6.2603, tz: 'Europe/Dublin', weight: 2, ipPrefix: '185.2' },
+  // Asia-Pacific
+  { country: 'IN', region: 'KA', city: 'Bangalore', lat: 12.9716, lon: 77.5946, tz: 'Asia/Kolkata', weight: 9, ipPrefix: '157.48' },
+  { country: 'IN', region: 'MH', city: 'Mumbai', lat: 19.0760, lon: 72.8777, tz: 'Asia/Kolkata', weight: 4, ipPrefix: '14.140' },
+  { country: 'JP', region: '13', city: 'Tokyo', lat: 35.6762, lon: 139.6503, tz: 'Asia/Tokyo', weight: 5, ipPrefix: '126.209' },
+  { country: 'SG', region: '01', city: 'Singapore', lat: 1.3521, lon: 103.8198, tz: 'Asia/Singapore', weight: 3, ipPrefix: '165.21' },
+  { country: 'AU', region: 'NSW', city: 'Sydney', lat: -33.8688, lon: 151.2093, tz: 'Australia/Sydney', weight: 3, ipPrefix: '203.2' },
+  { country: 'KR', region: '11', city: 'Seoul', lat: 37.5665, lon: 126.9780, tz: 'Asia/Seoul', weight: 2, ipPrefix: '211.34' },
+  { country: 'CN', region: 'SH', city: 'Shanghai', lat: 31.2304, lon: 121.4737, tz: 'Asia/Shanghai', weight: 2, ipPrefix: '114.88' },
+  { country: 'ID', region: 'JK', city: 'Jakarta', lat: -6.2088, lon: 106.8456, tz: 'Asia/Jakarta', weight: 1, ipPrefix: '103.47' },
+  // South America / MEA
+  { country: 'BR', region: 'SP', city: 'São Paulo', lat: -23.5505, lon: -46.6333, tz: 'America/Sao_Paulo', weight: 3, ipPrefix: '177.66' },
+  { country: 'AR', region: 'C', city: 'Buenos Aires', lat: -34.6037, lon: -58.3816, tz: 'America/Argentina/Buenos_Aires', weight: 1, ipPrefix: '181.45' },
+  { country: 'ZA', region: 'GT', city: 'Johannesburg', lat: -26.2041, lon: 28.0473, tz: 'Africa/Johannesburg', weight: 1, ipPrefix: '41.76' },
+  { country: 'AE', region: 'DU', city: 'Dubai', lat: 25.2048, lon: 55.2708, tz: 'Asia/Dubai', weight: 1, ipPrefix: '94.200' },
+  { country: 'NG', region: 'LA', city: 'Lagos', lat: 6.5244, lon: 3.3792, tz: 'Africa/Lagos', weight: 1, ipPrefix: '102.89' },
+];
+
+const BULK_ACTIVITY_REGION_WEIGHT_TOTAL = BULK_ACTIVITY_REGIONS.reduce((sum, r) => sum + r.weight, 0);
+
+function pickBulkActivityRegion(rand: () => number): BulkActivityRegion {
+  const roll = rand() * BULK_ACTIVITY_REGION_WEIGHT_TOTAL;
+  let acc = 0;
+  for (const r of BULK_ACTIVITY_REGIONS) {
+    acc += r.weight;
+    if (roll < acc) return r;
+  }
+  return BULK_ACTIVITY_REGIONS[BULK_ACTIVITY_REGIONS.length - 1]!;
+}
+
+const BULK_FIRST_NAMES = [
+  'Alex', 'Jordan', 'Taylor', 'Morgan', 'Riley', 'Quinn', 'Avery', 'Dakota',
+  'Casey', 'Hayden', 'Cameron', 'Rowan', 'Sage', 'Blake', 'Emery', 'Skyler',
+  'Reese', 'Peyton', 'Eden', 'Finley', 'Kendall', 'Aubrey', 'Drew', 'Jesse',
+  'Parker', 'Robin', 'Sydney', 'River', 'Harley', 'Milan', 'Aarav', 'Yuki',
+  'Mateo', 'Nia', 'Omar', 'Priya', 'Kai', 'Luca', 'Zara', 'Ines', 'Noa',
+];
+const BULK_LAST_NAMES = [
+  'Kim', 'Liu', 'Patel', 'Garcia', 'Brown', 'Davis', 'Wilson', 'Martinez',
+  'Anderson', 'Thomas', 'Jackson', 'White', 'Harris', 'Clark', 'Lewis',
+  'Robinson', 'Walker', 'Young', 'Allen', 'Scott', 'Adams', 'Nelson', 'Hill',
+  'Moore', 'Hall', 'King', 'Wright', 'Green', 'Baker', 'Turner', 'Okafor',
+  'Suzuki', 'Schneider', 'Dubois', 'Rossi', 'Nakamura', 'Silva', 'Ivanov',
+];
+const BULK_OAUTH_PROVIDERS = ['google', 'github', 'microsoft'];
+
+const BULK_REFERRERS = [
+  { url: 'https://www.google.com/', weight: 32 },
+  { url: 'https://github.com/', weight: 18 },
+  { url: 'https://twitter.com/', weight: 12 },
+  { url: 'https://www.producthunt.com/', weight: 8 },
+  { url: '', weight: 20 },  // direct traffic
+  { url: 'https://news.ycombinator.com/', weight: 6 },
+  { url: 'https://www.reddit.com/', weight: 4 },
+];
+const BULK_REFERRER_WEIGHT_TOTAL = BULK_REFERRERS.reduce((sum, r) => sum + r.weight, 0);
+
+function pickBulkReferrer(rand: () => number): string {
+  const roll = rand() * BULK_REFERRER_WEIGHT_TOTAL;
+  let acc = 0;
+  for (const r of BULK_REFERRERS) {
+    acc += r.weight;
+    if (roll < acc) return r.url;
+  }
+  return '';
+}
+
+const BULK_PAGE_PATHS = [
+  '/', '/pricing', '/docs', '/docs/getting-started', '/docs/api-reference',
+  '/blog', '/blog/announcing-v2', '/about', '/contact', '/changelog',
+  '/dashboard', '/settings', '/settings/profile', '/settings/billing',
+  '/integrations', '/features', '/enterprise',
+];
+
+function bulkFakeIp(prefix: string, rand: () => number): string {
+  const c = Math.floor(rand() * 256);
+  const d = Math.floor(rand() * 254) + 1;
+  return `${prefix}.${c}.${d}`;
+}
+
+function bulkRandomTimestampOnDay(now: Date, daysAgo: number, rand: () => number): Date {
+  const ts = new Date(now);
+  ts.setUTCDate(ts.getUTCDate() - daysAgo);
+  const hour = 8 + Math.floor(rand() * 14);
+  ts.setUTCHours(hour, Math.floor(rand() * 60), Math.floor(rand() * 60), Math.floor(rand() * 1000));
+  return ts;
+}
+
+function distributeBulkSignups(count: number, days: number, rand: () => number, now: Date): number[] {
+  const dayWeights: number[] = [];
+  for (let d = 0; d < days; d++) {
+    const ramp = 0.5 + (d / Math.max(1, days - 1));
+    const jitter = 0.75 + rand() * 0.5;
+    const date = new Date(now);
+    date.setUTCDate(date.getUTCDate() - (days - 1 - d));
+    const dow = date.getUTCDay();
+    const weekend = (dow === 0 || dow === 6) ? 0.65 : 1.0;
+    dayWeights.push(ramp * jitter * weekend);
+  }
+  const total = dayWeights.reduce((a, b) => a + b, 0);
+  const offsets: number[] = [];
+  for (let d = 0; d < days; d++) {
+    const share = Math.round((dayWeights[d]! / total) * count);
+    const daysAgoOffset = days - 1 - d;
+    for (let i = 0; i < share; i++) offsets.push(daysAgoOffset);
+  }
+  while (offsets.length < count) offsets.push(Math.floor(rand() * days));
+  while (offsets.length > count) offsets.pop();
+  return offsets;
+}
+
+function formatClickhouseTimestamp(date: Date): string {
+  return date.toISOString().replace('T', ' ').slice(0, 23);
+}
+
 async function seedDummySessionActivityEvents(options: SessionActivityEventSeedOptions) {
   const { tenancyId, projectId, userEmailToId } = options;
 
-  const now = new Date();
-  const twoMonthsAgo = new Date(now);
+  // Anchor on midnight today so the seeded window is stable across re-runs
+  // within the same day. Across days the window legitimately shifts forward.
+  const todayUtc = new Date();
+  todayUtc.setUTCHours(0, 0, 0, 0);
+  const twoMonthsAgo = new Date(todayUtc);
   twoMonthsAgo.setMonth(twoMonthsAgo.getMonth() - 2);
+  const windowMs = todayUtc.getTime() - twoMonthsAgo.getTime();
 
   const userEmails = Array.from(userEmailToId.keys());
 
-  const ipInfoBatch: Prisma.EventIpInfoCreateManyInput[] = [];
-  const eventBatch: Prisma.EventCreateManyInput[] = [];
-  const clickhouseBatch: Array<{
-    event_type: string,
-    event_at: Date,
-    data: Record<string, unknown>,
-    project_id: string,
-    branch_id: string,
-    user_id: string | null,
-    team_id: string | null,
-    refresh_token_id: string | null,
-    session_replay_id: string | null,
-    session_replay_segment_id: string | null,
-  }> = [];
+  console.log(`Seeding session activity events for ${userEmails.length} users...`);
 
   for (const email of userEmails) {
     const userId = userEmailToId.get(email);
     if (!userId) continue;
 
-    const eventCount = 15 + Math.floor(Math.random() * 11);
+    // Per-user seeded PRNG so event count, timestamps, and locations are
+    // deterministic across re-runs. Deterministic IDs mean upserts hit the
+    // same rows instead of duplicating them.
+    const userRand = deterministicPrng(seedFromString(`session-events:${tenancyId}:${userId}`));
+    const eventCount = 15 + Math.floor(userRand() * 11); // 15-25 events
 
     for (let i = 0; i < eventCount; i++) {
-      const randomTime = new Date(
-        twoMonthsAgo.getTime() + Math.random() * (now.getTime() - twoMonthsAgo.getTime())
-      );
-
-      const location = sessionActivityLocations[Math.floor(Math.random() * sessionActivityLocations.length)];
-      const sessionId = `session-${userId.substring(0, 8)}-${i.toString().padStart(3, '0')}-${randomTime.getTime().toString(36)}`;
-      const ipAddress = `${10 + Math.floor(Math.random() * 200)}.${Math.floor(Math.random() * 256)}.${Math.floor(Math.random() * 256)}.${Math.floor(Math.random() * 256)}`;
-      const refreshTokenId = `seed-refresh-${generateUuid()}`;
-
-      const ipInfoId = generateUuid();
-      const eventId = generateUuid();
-
-      ipInfoBatch.push({
-        id: ipInfoId,
-        ip: ipAddress,
-        countryCode: location.countryCode,
-        regionCode: location.regionCode,
-        cityName: location.cityName,
-        latitude: location.latitude,
-        longitude: location.longitude,
-        tzIdentifier: location.tzIdentifier,
-        createdAt: randomTime,
-        updatedAt: randomTime,
+      const randomTime = new Date(twoMonthsAgo.getTime() + userRand() * windowMs);
+      const location = sessionActivityLocations[Math.floor(userRand() * sessionActivityLocations.length)]!;
+      const sessionId = `session-${userId.substring(0, 8)}-${i.toString().padStart(3, '0')}`;
+      const ipAddress = `${10 + Math.floor(userRand() * 200)}.${Math.floor(userRand() * 256)}.${Math.floor(userRand() * 256)}.${Math.floor(userRand() * 256)}`;
+      const refreshTokenId = deterministicUuid(`session-events-refresh-token:${tenancyId}:${userId}:${i}`);
+
+      const ipInfoId = deterministicUuid(`event-ip-info:${tenancyId}:${userId}:${i}`);
+      const eventId = deterministicUuid(`event:${tenancyId}:${userId}:${i}`);
+
+      await globalPrismaClient.eventIpInfo.upsert({
+        where: { id: ipInfoId },
+        update: {
+          ip: ipAddress,
+          countryCode: location.countryCode,
+          regionCode: location.regionCode,
+          cityName: location.cityName,
+          latitude: location.latitude,
+          longitude: location.longitude,
+          tzIdentifier: location.tzIdentifier,
+          updatedAt: randomTime,
+        },
+        create: {
+          id: ipInfoId,
+          ip: ipAddress,
+          countryCode: location.countryCode,
+          regionCode: location.regionCode,
+          cityName: location.cityName,
+          latitude: location.latitude,
+          longitude: location.longitude,
+          tzIdentifier: location.tzIdentifier,
+          createdAt: randomTime,
+          updatedAt: randomTime,
+        },
       });
 
-      eventBatch.push({
-        id: eventId,
-        systemEventTypeIds: ['$session-activity', '$user-activity', '$project-activity', '$project'],
-        data: {
-          projectId,
-          branchId: DEFAULT_BRANCH_ID,
-          userId,
-          sessionId,
-          isAnonymous: false,
+      await globalPrismaClient.event.upsert({
+        where: { id: eventId },
+        update: {
+          systemEventTypeIds: ['$session-activity', '$user-activity', '$project-activity', '$project'],
+          data: {
+            projectId,
+            branchId: DEFAULT_BRANCH_ID,
+            userId,
+            sessionId,
+            isAnonymous: false,
+          },
+          isEndUserIpInfoGuessTrusted: true,
+          endUserIpInfoGuessId: ipInfoId,
+          isWide: false,
+          eventStartedAt: randomTime,
+          eventEndedAt: randomTime,
+          updatedAt: randomTime,
+        },
+        create: {
+          id: eventId,
+          systemEventTypeIds: ['$session-activity', '$user-activity', '$project-activity', '$project'],
+          data: {
+            projectId,
+            branchId: DEFAULT_BRANCH_ID,
+            userId,
+            sessionId,
+            isAnonymous: false,
+          },
+          isEndUserIpInfoGuessTrusted: true,
+          endUserIpInfoGuessId: ipInfoId,
+          isWide: false,
+          eventStartedAt: randomTime,
+          eventEndedAt: randomTime,
+          createdAt: randomTime,
+          updatedAt: randomTime,
         },
-        isEndUserIpInfoGuessTrusted: true,
-        endUserIpInfoGuessId: ipInfoId,
-        isWide: false,
-        eventStartedAt: randomTime,
-        eventEndedAt: randomTime,
-        createdAt: randomTime,
-        updatedAt: randomTime,
       });
 
       // Also create $token-refresh events for ClickHouse (used by globe + analytics)
-      clickhouseBatch.push({
+      const clickhouseUrl = getEnvVariable("STACK_CLICKHOUSE_URL", "");
+      if (clickhouseUrl) {
+        const clickhouseClient = getClickhouseAdminClient();
+        await clickhouseClient.insert({
+          table: "analytics_internal.events",
+          values: [{
+            event_type: '$token-refresh',
+            event_at: randomTime,
+            data: {
+              refresh_token_id: refreshTokenId,
+              is_anonymous: false,
+              ip_info: {
+                ip: ipAddress,
+                is_trusted: true,
+                country_code: location.countryCode,
+                region_code: location.regionCode,
+                city_name: location.cityName,
+                latitude: location.latitude,
+                longitude: location.longitude,
+                tz_identifier: location.tzIdentifier,
+              },
+            },
+            project_id: projectId,
+            branch_id: DEFAULT_BRANCH_ID,
+            user_id: userId,
+            team_id: null,
+            refresh_token_id: refreshTokenId,
+            session_replay_id: null,
+            session_replay_segment_id: null,
+          }],
+          format: "JSONEachRow",
+          clickhouse_settings: {
+            date_time_input_format: "best_effort",
+          },
+        });
+      }
+    }
+  }
+
+  console.log('Finished seeding session activity events');
+}
+
+/**
+ * Seeds the dummy project with a bulk batch of fake user sign-ups and
+ * realistic activity data spread across recent history and various
+ * geographic regions. Populates:
+ *
+ *   1. ProjectUser rows with back-dated signedUpAt/createdAt
+ *   2. $token-refresh events in ClickHouse with geolocated ip_info
+ *   3. $page-view events in ClickHouse for daily visitors/page views/referrers
+ *   4. $click events in ClickHouse for the clicks chart
+ */
+async function seedBulkSignupsAndActivity(options: {
+  tenancy: Tenancy,
+  prisma: PrismaClientTransaction,
+  count?: number,
+  days?: number,
+}) {
+  const count = options.count ?? 500;
+  const days = options.days ?? 60;
+  const now = new Date();
+  const rand = deterministicPrng(0xC0FFEE);
+  const { tenancy, prisma } = options;
+  const clickhouse = getClickhouseAdminClient();
+
+  console.log(`[seed-activity] Target: ${count} users across ${days} days in project "${tenancy.project.id}" branch "${tenancy.branchId}"`);
+
+  const dayOffsets = distributeBulkSignups(count, days, rand, now);
+  const clickhouseRows: Array<Record<string, unknown>> = [];
+
+  let created = 0;
+  let updated = 0;
+
+  const userActivity: Array<{ userId: string, signupDaysAgo: number, region: BulkActivityRegion }> = [];
+
+  for (let i = 0; i < count; i++) {
+    const firstName = BULK_FIRST_NAMES[Math.floor(rand() * BULK_FIRST_NAMES.length)]!;
+    const lastName = BULK_LAST_NAMES[Math.floor(rand() * BULK_LAST_NAMES.length)]!;
+    const displayName = `${firstName} ${lastName}`;
+    const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}.signupseed${i}@dummy.dev`;
+    const signedUpAt = bulkRandomTimestampOnDay(now, dayOffsets[i]!, rand);
+    const region = pickBulkActivityRegion(rand);
+    const hasOauth = rand() > 0.55;
+    const oauthProvider = hasOauth
+      ? [{ id: BULK_OAUTH_PROVIDERS[Math.floor(rand() * BULK_OAUTH_PROVIDERS.length)]!, account_id: `${email}-oauth`, email }]
+      : [];
+
+    const existing = await prisma.projectUser.findFirst({
+      where: {
+        tenancyId: tenancy.id,
+        contactChannels: { some: { type: 'EMAIL', value: email } },
+      },
+      select: { projectUserId: true },
+    });
+
+    let userId: string;
+    if (existing) {
+      userId = existing.projectUserId;
+      updated++;
+    } else {
+      const createdUser = await usersCrudHandlers.adminCreate({
+        tenancy,
+        data: {
+          display_name: displayName,
+          primary_email: email,
+          primary_email_auth_enabled: true,
+          primary_email_verified: rand() > 0.25,
+          otp_auth_enabled: false,
+          is_anonymous: false,
+          oauth_providers: oauthProvider,
+          profile_image_url: null,
+        },
+      });
+      userId = createdUser.id;
+      created++;
+    }
+
+    await prisma.projectUser.updateMany({
+      where: { tenancyId: tenancy.id, projectUserId: userId },
+      data: { createdAt: signedUpAt, signedUpAt },
+    });
+
+    userActivity.push({ userId, signupDaysAgo: dayOffsets[i]!, region });
+
+    const ipInfoForUser = {
+      ip: bulkFakeIp(region.ipPrefix, rand),
+      is_trusted: true,
+      country_code: region.country,
+      region_code: region.region,
+      city_name: region.city,
+      latitude: region.lat,
+      longitude: region.lon,
+      tz_identifier: region.tz,
+    };
+
+    clickhouseRows.push({
+      event_type: '$token-refresh',
+      event_at: formatClickhouseTimestamp(signedUpAt),
+      data: {
+        refresh_token_id: generateUuid(),
+        is_anonymous: false,
+        ip_info: ipInfoForUser,
+      },
+      project_id: tenancy.project.id,
+      branch_id: tenancy.branchId,
+      user_id: userId,
+      team_id: null,
+    });
+
+    if ((i + 1) % 100 === 0) {
+      console.log(`[seed-activity] ${i + 1}/${count} users processed (${created} new, ${updated} updated)`);
+    }
+  }
+
+  console.log(`[seed-activity] Generating multi-day activity events for ${userActivity.length} users...`);
+
+  for (const { userId, signupDaysAgo, region } of userActivity) {
+    if (signupDaysAgo === 0) continue;
+    const isReturning = rand() < 0.7;
+    if (!isReturning) continue;
+
+    const returnVisits = 2 + Math.floor(rand() * 7);
+    const ipInfo = {
+      ip: bulkFakeIp(region.ipPrefix, rand),
+      is_trusted: true,
+      country_code: region.country,
+      region_code: region.region,
+      city_name: region.city,
+      latitude: region.lat,
+      longitude: region.lon,
+      tz_identifier: region.tz,
+    };
+
+    for (let v = 0; v < returnVisits; v++) {
+      const visitDaysAgo = Math.floor(rand() * signupDaysAgo);
+      const visitTime = bulkRandomTimestampOnDay(now, visitDaysAgo, rand);
+
+      clickhouseRows.push({
         event_type: '$token-refresh',
-        event_at: randomTime,
+        event_at: formatClickhouseTimestamp(visitTime),
         data: {
-          refresh_token_id: refreshTokenId,
+          refresh_token_id: generateUuid(),
           is_anonymous: false,
-          ip_info: {
-            ip: ipAddress,
-            is_trusted: true,
-            country_code: location.countryCode,
-            region_code: location.regionCode,
-            city_name: location.cityName,
-            latitude: location.latitude,
-            longitude: location.longitude,
-            tz_identifier: location.tzIdentifier,
-          },
+          ip_info: ipInfo,
         },
-        project_id: projectId,
-        branch_id: DEFAULT_BRANCH_ID,
+        project_id: tenancy.project.id,
+        branch_id: tenancy.branchId,
         user_id: userId,
         team_id: null,
-        refresh_token_id: refreshTokenId,
-        session_replay_id: null,
-        session_replay_segment_id: null,
       });
+
+      const pageViewCount = 1 + Math.floor(rand() * 4);
+      for (let p = 0; p < pageViewCount; p++) {
+        const pvOffset = Math.floor(rand() * 3600) * 1000;
+        const pvTime = new Date(visitTime.getTime() + pvOffset);
+        clickhouseRows.push({
+          event_type: '$page-view',
+          event_at: formatClickhouseTimestamp(pvTime),
+          data: {
+            path: BULK_PAGE_PATHS[Math.floor(rand() * BULK_PAGE_PATHS.length)],
+            referrer: p === 0 ? pickBulkReferrer(rand) : '',
+            is_anonymous: false,
+          },
+          project_id: tenancy.project.id,
+          branch_id: tenancy.branchId,
+          user_id: userId,
+          team_id: null,
+        });
+      }
+
+      if (rand() < 0.4) {
+        const clickOffset = Math.floor(rand() * 1800) * 1000;
+        const clickTime = new Date(visitTime.getTime() + clickOffset);
+        clickhouseRows.push({
+          event_type: '$click',
+          event_at: formatClickhouseTimestamp(clickTime),
+          data: {
+            selector: 'button.cta-primary',
+            is_anonymous: false,
+          },
+          project_id: tenancy.project.id,
+          branch_id: tenancy.branchId,
+          user_id: userId,
+          team_id: null,
+        });
+      }
     }
   }
 
-  // Batch insert into Postgres
-  await globalPrismaClient.eventIpInfo.createMany({
-    data: ipInfoBatch,
-    skipDuplicates: true,
-  });
-
-  await globalPrismaClient.event.createMany({
-    data: eventBatch,
-    skipDuplicates: true,
-  });
-
-  // Batch insert into ClickHouse for analytics/globe
-  const clickhouseUrl = getEnvVariable("STACK_CLICKHOUSE_URL", "");
-  if (clickhouseUrl) {
-    const clickhouseClient = getClickhouseAdminClient();
-    await clickhouseClient.insert({
-      table: "analytics_internal.events",
-      values: clickhouseBatch,
-      format: "JSONEachRow",
+  console.log(`[seed-activity] Flushing ${clickhouseRows.length} events to ClickHouse...`);
+  const BATCH = 500;
+  for (let i = 0; i < clickhouseRows.length; i += BATCH) {
+    const batch = clickhouseRows.slice(i, i + BATCH);
+    await clickhouse.insert({
+      table: 'analytics_internal.events',
+      values: batch,
+      format: 'JSONEachRow',
       clickhouse_settings: {
-        date_time_input_format: "best_effort",
+        date_time_input_format: 'best_effort',
+        async_insert: 1,
       },
     });
   }
+
+  const tokenRefreshCount = clickhouseRows.filter(r => r.event_type === '$token-refresh').length;
+  const pageViewCount = clickhouseRows.filter(r => r.event_type === '$page-view').length;
+  const clickCount = clickhouseRows.filter(r => r.event_type === '$click').length;
+
+  console.log(`[seed-activity] Done. created=${created} updated=${updated}`);
+  console.log(`[seed-activity] Events: $token-refresh=${tokenRefreshCount} $page-view=${pageViewCount} $click=${clickCount} total=${clickhouseRows.length}`);
 }
 
 /**
@@ -1214,6 +1892,11 @@ export async function seedDummyProject(options: SeedDummyProjectOptions): Promis
     }),
   ]);
 
+  await seedBulkSignupsAndActivity({
+    tenancy: dummyTenancy,
+    prisma: dummyPrisma,
+  });
+
   return projectId;
 }
 
@@ -1221,63 +1904,59 @@ async function seedDummySessionReplays({
   prisma,
   tenancyId,
   userEmailToId,
+  targetSessionReplayCount = 250,
 }: {
   prisma: PrismaClientTransaction,
   tenancyId: string,
   userEmailToId: Map<string, string>,
+  targetSessionReplayCount?: number,
 }) {
-  const now = new Date();
-  const usersToReplay = [
-    'amelia.chen@dummy.dev',
-    'mateo.silva@dummy.dev',
-    'priya.narang@dummy.dev',
-  ];
-
-  for (const email of usersToReplay) {
-    const userId = userEmailToId.get(email);
-    if (!userId) continue;
-
-    const replayId = generateUuid();
-    const batchId = generateUuid();
-    const chunkId = generateUuid();
-    const segmentId = generateUuid();
-    const browserSessionId = generateUuid();
-    const refreshTokenId = generateUuid();
-
-    // Each replay started 1-7 days ago, lasted ~8 seconds
-    const daysAgo = 1 + Math.floor(Math.random() * 7);
-    const startedAt = new Date(now.getTime() - daysAgo * 24 * 60 * 60 * 1000);
-    const lastEventAt = new Date(startedAt.getTime() + 8000);
-
-    await prisma.sessionReplay.upsert({
-      where: { tenancyId_id: { tenancyId, id: replayId } },
-      update: {},
-      create: {
-        id: replayId,
-        tenancyId,
-        projectUserId: userId,
-        refreshTokenId,
-        startedAt,
-        lastEventAt,
-      },
-    });
+  const userIds = Array.from(userEmailToId.values());
+  if (userIds.length === 0) {
+    throw new Error('Cannot seed session replays: no dummy project users exist');
+  }
 
-    await prisma.sessionReplayChunk.upsert({
-      where: { tenancyId_sessionReplayId_batchId: { tenancyId, sessionReplayId: replayId, batchId } },
-      update: {},
-      create: {
-        id: chunkId,
-        tenancyId,
-        sessionReplayId: replayId,
-        batchId,
-        sessionReplaySegmentId: segmentId,
-        browserSessionId,
-        s3Key: `preview://${replayId}/${batchId}`,
-        eventCount: 8,
-        byteLength: 0,
-        firstEventAt: startedAt,
-        lastEventAt,
-      },
+  // Anchor on midnight today so the seeded window is stable across re-runs
+  // within the same day.
+  const todayUtc = new Date();
+  todayUtc.setUTCHours(0, 0, 0, 0);
+  const twoWeeksAgo = new Date(todayUtc);
+  twoWeeksAgo.setDate(twoWeeksAgo.getDate() - 14);
+  const windowMs = todayUtc.getTime() - twoWeeksAgo.getTime();
+
+  // Single seeded PRNG keyed off tenancy so the whole replay set is
+  // deterministic across re-runs and identical IDs upsert in place.
+  const rand = deterministicPrng(seedFromString(`session-replays:${tenancyId}`));
+
+  const seeds: Prisma.SessionReplayCreateManyInput[] = [];
+  for (let i = 0; i < targetSessionReplayCount; i++) {
+    const startedAt = new Date(twoWeeksAgo.getTime() + rand() * windowMs);
+    const durationMs = 10_000 + Math.floor(rand() * (20 * 60 * 1000)); // 10s..20m
+    const lastEventAt = new Date(startedAt.getTime() + durationMs);
+    const projectUserId = userIds[Math.floor(rand() * userIds.length)]!;
+
+    seeds.push({
+      tenancyId,
+      refreshTokenId: deterministicUuid(`session-replay-refresh-token:${tenancyId}:${i}`),
+      projectUserId,
+      id: deterministicUuid(`session-replay:${tenancyId}:${i}`),
+      startedAt,
+      lastEventAt,
     });
   }
+
+  // Delete existing deterministic IDs first, then bulk-insert (Prisma createMany
+  // doesn't support upsert, so we delete+recreate to refresh timestamps).
+  const seedIds = seeds.map((s) => s.id!);
+  await prisma.sessionReplay.deleteMany({
+    where: {
+      tenancyId,
+      id: { in: seedIds },
+    },
+  });
+  await prisma.sessionReplay.createMany({
+    data: seeds,
+  });
+
+  console.log(`Seeded ${targetSessionReplayCount} session replays`);
 }
diff --git a/apps/dashboard/DESIGN-GUIDE.md b/apps/dashboard/DESIGN-GUIDE.md
index 43f05c8fd9..7923f49fdb 100644
--- a/apps/dashboard/DESIGN-GUIDE.md
+++ b/apps/dashboard/DESIGN-GUIDE.md
@@ -11,7 +11,7 @@ If this guide conflicts with older examples in the codebase, follow this guide.
 
 Always prefer components from `apps/dashboard/src/components/design-components`.
 
-- Do not build new ad-hoc visual primitives (for example custom `GlassCard`, custom badge pills, custom pill toggles, custom list rows) if a design-components component exists.
+- Do not build new ad-hoc visual primitives (for example custom `GlassCard`, custom `ChartCard`, custom badge pills, custom pill toggles, custom list rows) if a design-components component exists.
 - If the desired UI can be achieved by tweaking/customizing/extending a design-components component, do that instead of creating a page-local alternative.
 - In all cases, default to design-components first; only use a non-design-components approach when there is absolutely no viable way to achieve the result with design-components.
 - Use `@/components/ui/*` primitives only when no design-components equivalent exists, or when the design-components component intentionally wraps the primitive.
@@ -29,6 +29,7 @@ Use this when implementing a new dashboard UI quickly:
 
 1. Need a section container/card?
    - Use `DesignCard`.
+   - For chart-heavy analytics surfaces (especially Recharts tooltips/overflow), use `DesignAnalyticsCard`.
 2. Need user-facing status/info/warning/error message?
    - Use `DesignAlert`.
 3. Need small semantic label (sent, failed, queued, active)?
@@ -253,6 +254,36 @@ Default recommendation:
 - for dashboard sections, use `glassmorphic` style (either explicit or via nesting context)
 - use `gradient="default"` unless there is semantic reason for colored tint
 
+### 4.1.1 `DesignAnalyticsCard` (and chart helpers)
+
+File: `apps/dashboard/src/components/design-components/analytics-card.tsx`
+
+Use for:
+
+- chart-heavy analytics shells on overview and metrics surfaces
+- cards where chart tooltips need to escape clipping/stacking issues
+- previously duplicated glass analytics wrappers (`ChartCard`, `GlassCard` clones)
+
+Exports:
+
+- `DesignAnalyticsCard`
+- `DesignAnalyticsCardHeader`
+- `DesignChartLegend`
+- `useInfiniteListWindow`
+- `DesignInfiniteScrollList`
+
+`DesignAnalyticsCard` props:
+
+- `gradient`: `"blue" | "cyan" | "purple" | "green" | "orange" | "slate"`
+- `className`
+
+Rules:
+
+- prefer `DesignAnalyticsCard` over local chart wrappers for overview/analytics cards
+- keep chart implementation local (Recharts config, data transforms), but keep shell/legend/list plumbing shared
+- use `DesignChartLegend` instead of hand-rolled dot/label legend rows when layout matches
+- use `useInfiniteListWindow` for incremental scrolling lists in analytics/list tabs
+
 ### 4.2 `DesignAlert`
 
 File: `apps/dashboard/src/components/design-components/alert.tsx`
@@ -551,6 +582,20 @@ Reference surfaces:
 
 Current pattern in these pages often uses custom card/header/pill components. New and refactored code should standardize to design-components primitives as follows.
 
+### 5.0 `/projects/[projectId]/(overview)` analytics surfaces
+
+Use:
+
+- chart/list shells: `DesignAnalyticsCard`
+- compact chart headers: `DesignAnalyticsCardHeader`
+- stacked chart legends: `DesignChartLegend`
+- incremental list rendering: `useInfiniteListWindow` (or `DesignInfiniteScrollList` where it fits)
+
+Avoid:
+
+- page-local `ChartCard` wrappers
+- duplicated `IntersectionObserver` list window logic per card
+
 ### 5.1 `/projects/[projectId]/emails`
 
 Use:
@@ -774,7 +819,7 @@ Use this checklist before opening a dashboard UI PR:
 
 ## 10) Anti-Patterns (Do Not Introduce)
 
-- Creating local `GlassCard` components instead of `DesignCard`.
+- Creating local `GlassCard`/`ChartCard` components instead of `DesignCard` or `DesignAnalyticsCard`.
 - Creating local status pills instead of `DesignBadge`.
 - Creating local segmented/pill selectors instead of `DesignPillToggle`.
 - Using raw `Alert`/`Button` in standard dashboard surfaces where `DesignAlert`/`DesignButton` should be used.
@@ -786,7 +831,7 @@ Use this checklist before opening a dashboard UI PR:
 
 When touching existing email/project pages, migrate in this order:
 
-1. Cards/surfaces (`DesignCard`)
+1. Cards/surfaces (`DesignCard` / `DesignAnalyticsCard` for chart-heavy shells)
 2. Alerts (`DesignAlert`)
 3. Badges (`DesignBadge`)
 4. Toggles/tabs (`DesignPillToggle` / `DesignCategoryTabs`)
@@ -806,3 +851,4 @@ Whenever a new reusable visual pattern is introduced in dashboard features:
 - then document the component contract and preferred usage here
 - avoid introducing permanent page-local UI primitives that duplicate design-components behavior
 
+
diff --git a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/playground/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/playground/page-client.tsx
index 9c58911db4..45703700d4 100644
--- a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/playground/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/playground/page-client.tsx
@@ -1,18 +1,6 @@
 "use client";
 
 import { CodeBlock } from "@/components/code-block";
-import {
-  CursorBlastEffect,
-  DesignAlert,
-  DesignBadge,
-  type DesignBadgeColor,
-  type DesignBadgeContentMode,
-  DesignButton,
-  DesignCard,
-  DesignCategoryTabs,
-  DesignInput,
-  DesignPillToggle,
-} from "@stackframe/dashboard-ui-components";
 import {
   DesignDataTable,
   DesignEditableGrid,
@@ -23,7 +11,9 @@ import {
   DesignSelectorDropdown,
   DesignUserList,
 } from "@/components/design-components";
+import { DesignAnalyticsCard, DesignAnalyticsCardHeader, DesignChartLegend } from "@/components/design-components/analytics-card";
 import { DataTableColumnHeader, SearchToolbarItem, Typography } from "@/components/ui";
+import { cn } from "@/lib/utils";
 import {
   CheckCircle,
   Cube,
@@ -39,6 +29,24 @@ import {
   Tag,
   Trash,
 } from "@phosphor-icons/react";
+import {
+  CursorBlastEffect,
+  DataGrid,
+  useDataSource,
+  type DataGridColumnDef,
+  type DataGridPaginationMode,
+  type DataGridSelectionMode,
+  createDefaultDataGridState,
+  DesignAlert,
+  DesignBadge,
+  type DesignBadgeColor,
+  type DesignBadgeContentMode,
+  DesignButton,
+  DesignCard,
+  DesignCategoryTabs,
+  DesignInput,
+  DesignPillToggle,
+} from "@stackframe/dashboard-ui-components";
 import { ColumnDef } from "@tanstack/react-table";
 import { useMemo, useRef, useState } from "react";
 
@@ -46,11 +54,13 @@ import { useMemo, useRef, useState } from "react";
 
 type ComponentId =
   | "alert"
+  | "analytics-card"
   | "badge"
   | "button"
   | "card"
   | "category-tabs"
   | "cursor-blast"
+  | "data-grid"
   | "data-table"
   | "editable-grid"
   | "input"
@@ -62,11 +72,13 @@ type ComponentId =
 
 const COMPONENT_LIST: Array<{ value: ComponentId, label: string }> = [
   { value: "alert", label: "Alert" },
+  { value: "analytics-card", label: "Analytics Card" },
   { value: "badge", label: "Badge" },
   { value: "button", label: "Button" },
   { value: "card", label: "Card" },
   { value: "category-tabs", label: "Category Tabs" },
   { value: "cursor-blast", label: "Cursor Blast Effect" },
+  { value: "data-grid", label: "Data Grid" },
   { value: "data-table", label: "Data Table" },
   { value: "editable-grid", label: "Editable Grid" },
   { value: "input", label: "Input" },
@@ -112,8 +124,8 @@ function isSize3(v: string): v is Size3 {
 
 function PropField({ label, children }: { label: string, children: React.ReactNode }) {
   return (
-    <div className="space-y-1.5">
-      <span className="text-[10px] font-medium uppercase tracking-[0.12em] text-muted-foreground/80">
+    <div className="space-y-2">
+      <span className="block text-[10px] font-medium uppercase tracking-[0.12em] leading-none text-muted-foreground/80">
         {label}
       </span>
       {children}
@@ -199,6 +211,122 @@ const DEMO_USERS = [
   { name: "Alan Turing", email: "alan@example.com", time: "Active 5h ago", color: "cyan" as const },
 ];
 
+const DEMO_ANALYTICS_POINTS = [
+  { date: "Feb 28", new: 31, retained: 51, reactivated: 7, visitors: 1260, revenueCents: 18200, movingAvg: 89, highlightedAvg: 96 },
+  { date: "Mar 01", new: 34, retained: 54, reactivated: 8, visitors: 1330, revenueCents: 19600, movingAvg: 92, highlightedAvg: 97 },
+  { date: "Mar 02", new: 37, retained: 57, reactivated: 9, visitors: 1390, revenueCents: 20800, movingAvg: 94, highlightedAvg: 98 },
+  { date: "Mar 03", new: 40, retained: 59, reactivated: 10, visitors: 1450, revenueCents: 21900, movingAvg: 97, highlightedAvg: 99 },
+  { date: "Mar 04", new: 42, retained: 58, reactivated: 11, visitors: 1510, revenueCents: 22800, movingAvg: 97, highlightedAvg: 101 },
+  { date: "Mar 05", new: 37, retained: 61, reactivated: 9, visitors: 1470, revenueCents: 22400, movingAvg: 98, highlightedAvg: 102 },
+  { date: "Mar 06", new: 45, retained: 64, reactivated: 12, visitors: 1620, revenueCents: 24300, movingAvg: 101, highlightedAvg: 104 },
+  { date: "Mar 07", new: 49, retained: 66, reactivated: 10, visitors: 1675, revenueCents: 25700, movingAvg: 104, highlightedAvg: 105 },
+  { date: "Mar 08", new: 43, retained: 63, reactivated: 8, visitors: 1590, revenueCents: 23600, movingAvg: 102, highlightedAvg: 104 },
+  { date: "Mar 09", new: 52, retained: 70, reactivated: 13, visitors: 1740, revenueCents: 26900, movingAvg: 108, highlightedAvg: 107 },
+  { date: "Mar 10", new: 46, retained: 68, reactivated: 12, visitors: 1710, revenueCents: 26200, movingAvg: 109, highlightedAvg: 108 },
+  { date: "Mar 11", new: 55, retained: 74, reactivated: 15, visitors: 1835, revenueCents: 28400, movingAvg: 113, highlightedAvg: 110 },
+];
+
+// ─── Data Grid demo data ────────────────────────────────────────────────────
+
+type DemoGridUser = {
+  id: string,
+  name: string,
+  email: string,
+  role: "admin" | "editor" | "viewer",
+  status: "active" | "inactive" | "pending",
+  signUps: number,
+};
+
+const DEMO_GRID_USERS: DemoGridUser[] = [
+  { id: "1", name: "Alice Anderson", email: "alice@company.io", role: "admin", status: "active", signUps: 1240 },
+  { id: "2", name: "Bob Brown", email: "bob@gmail.com", role: "editor", status: "active", signUps: 870 },
+  { id: "3", name: "Carol Chen", email: "carol@outlook.com", role: "viewer", status: "pending", signUps: 310 },
+  { id: "4", name: "David Davis", email: "david@company.io", role: "editor", status: "inactive", signUps: 2100 },
+  { id: "5", name: "Eve Evans", email: "eve@hey.com", role: "admin", status: "active", signUps: 4500 },
+  { id: "6", name: "Frank Fisher", email: "frank@gmail.com", role: "viewer", status: "active", signUps: 95 },
+  { id: "7", name: "Grace Garcia", email: "grace@company.io", role: "editor", status: "pending", signUps: 1800 },
+  { id: "8", name: "Hank Harris", email: "hank@outlook.com", role: "viewer", status: "active", signUps: 620 },
+];
+
+const DEMO_GRID_COLUMNS: DataGridColumnDef<DemoGridUser>[] = [
+  {
+    id: "name",
+    header: "Name",
+    accessor: "name",
+    width: 180,
+    type: "string",
+    renderCell: ({ value }) => (
+      <div className="flex items-center gap-2.5">
+        <div className="flex h-7 w-7 items-center justify-center rounded-full bg-blue-500/10 text-blue-600 dark:text-blue-400 text-xs font-semibold flex-shrink-0">
+          {String(value).charAt(0).toUpperCase()}
+        </div>
+        <span className="truncate font-medium">{String(value)}</span>
+      </div>
+    ),
+  },
+  { id: "email", header: "Email", accessor: "email", width: 200, type: "string" },
+  {
+    id: "role",
+    header: "Role",
+    accessor: "role",
+    width: 120,
+    type: "singleSelect",
+    valueOptions: [
+      { value: "admin", label: "Admin" },
+      { value: "editor", label: "Editor" },
+      { value: "viewer", label: "Viewer" },
+    ],
+    renderCell: ({ value }) => {
+      const colors: Record<string, string> = {
+        admin: "bg-purple-500/10 text-purple-600 dark:text-purple-400 ring-1 ring-purple-500/20",
+        editor: "bg-blue-500/10 text-blue-600 dark:text-blue-400 ring-1 ring-blue-500/20",
+        viewer: "bg-foreground/[0.04] text-muted-foreground ring-1 ring-foreground/[0.06]",
+      };
+      return (
+        <span className={`inline-flex items-center px-2 py-0.5 rounded-md text-[11px] font-medium ${colors[String(value)] ?? ""}`}>
+          {String(value)}
+        </span>
+      );
+    },
+  },
+  {
+    id: "status",
+    header: "Status",
+    accessor: "status",
+    width: 110,
+    type: "singleSelect",
+    valueOptions: [
+      { value: "active", label: "Active" },
+      { value: "inactive", label: "Inactive" },
+      { value: "pending", label: "Pending" },
+    ],
+    renderCell: ({ value }) => {
+      const dot: Record<string, string> = {
+        active: "bg-emerald-500",
+        inactive: "bg-foreground/20",
+        pending: "bg-amber-500",
+      };
+      return (
+        <div className="flex items-center gap-1.5">
+          <div className={`h-1.5 w-1.5 rounded-full ${dot[String(value)] ?? ""}`} />
+          <span className="text-xs capitalize">{String(value)}</span>
+        </div>
+      );
+    },
+  },
+  {
+    id: "signUps",
+    header: "Sign-ups",
+    accessor: "signUps",
+    width: 110,
+    type: "number",
+    align: "right",
+    renderCell: ({ value }) => (
+      <span className="tabular-nums font-medium">{Number(value).toLocaleString()}</span>
+    ),
+  },
+];
+
 // ─── Main ────────────────────────────────────────────────────────────────────
 
 export default function PageClient() {
@@ -209,6 +337,19 @@ export default function PageClient() {
   const [alertTitle, setAlertTitle] = useState("Order placed");
   const [alertDesc, setAlertDesc] = useState("Your order has been confirmed.");
 
+  // Analytics Card
+  const [analyticsCardGradient, setAnalyticsCardGradient] = useState<"blue" | "cyan" | "purple" | "green" | "orange" | "slate">("blue");
+  const [analyticsCardShowHeader, setAnalyticsCardShowHeader] = useState(true);
+  const [analyticsCardShowLegend, setAnalyticsCardShowLegend] = useState(true);
+  const [analyticsCardType, setAnalyticsCardType] = useState<"none" | "line" | "bar" | "stacked-bar" | "composed" | "donut">("stacked-bar");
+  const [analyticsCardTooltipType, setAnalyticsCardTooltipType] = useState<"none" | "default" | "stacked" | "composed" | "visitors" | "revenue" | "donut">("stacked");
+  const [analyticsCardHighlightMode, setAnalyticsCardHighlightMode] = useState<"none" | "bar-segment" | "series-hover" | "dot-hover" | "mixed">("bar-segment");
+  const [analyticsCardMovingAverage, setAnalyticsCardMovingAverage] = useState(true);
+  const [analyticsCardSevenDayAverage, setAnalyticsCardSevenDayAverage] = useState(true);
+  const [analyticsCardMovingAverageDataKey, setAnalyticsCardMovingAverageDataKey] = useState("movingAvg");
+  const [analyticsCardSevenDayAverageDataKey, setAnalyticsCardSevenDayAverageDataKey] = useState("highlightedAvg");
+  const [analyticsCardHoveredIndex, setAnalyticsCardHoveredIndex] = useState<number | null>(null);
+
   // Badge
   const [badgeLabel, setBadgeLabel] = useState("In stock");
   const [badgeColor, setBadgeColor] = useState<DesignBadgeColor>("green");
@@ -245,6 +386,13 @@ export default function PageClient() {
   const [blastRageWindow, setBlastRageWindow] = useState(600);
   const [blastRageRadius, setBlastRageRadius] = useState(60);
 
+  // Data Grid
+  const [dgSelectionMode, setDgSelectionMode] = useState<DataGridSelectionMode>("none");
+  const [dgRowHeight, setDgRowHeight] = useState(44);
+  const [dgShowToolbar, setDgShowToolbar] = useState(true);
+  const [dgState, setDgState] = useState(() => createDefaultDataGridState(DEMO_GRID_COLUMNS));
+  const dgData = useDataSource({ data: DEMO_GRID_USERS, columns: DEMO_GRID_COLUMNS, getRowId: (r: DemoGridUser) => r.id, sorting: dgState.sorting, quickSearch: dgState.quickSearch, pagination: dgState.pagination, paginationMode: "client" });
+
   // Data Table
   const [tableClickableRows, setTableClickableRows] = useState(false);
   const [tableLastRowClick, setTableLastRowClick] = useState("");
@@ -443,6 +591,196 @@ export default function PageClient() {
         </div>
       );
     }
+    if (selected === "analytics-card") {
+      const demoLegendItems = [
+        { key: "new", label: "New", color: "hsl(152, 38%, 52%)" },
+        { key: "retained", label: "Retained", color: "hsl(221, 42%, 55%)" },
+        { key: "reactivated", label: "Reactivated", color: "hsl(36, 55%, 58%)" },
+      ];
+      const maxTotal = Math.max(
+        ...DEMO_ANALYTICS_POINTS.map((point) => point.new + point.retained + point.reactivated),
+        1,
+      );
+      const hoveredIndex = analyticsCardHoveredIndex ?? 0;
+      const hoveredPoint = DEMO_ANALYTICS_POINTS[hoveredIndex] ?? DEMO_ANALYTICS_POINTS[0];
+      const tooltipLeftPercent = ((hoveredIndex + 0.5) / DEMO_ANALYTICS_POINTS.length) * 100;
+      const movingAverageValue = hoveredPoint[analyticsCardMovingAverageDataKey as keyof typeof hoveredPoint];
+      const sevenDayAverageValue = hoveredPoint[analyticsCardSevenDayAverageDataKey as keyof typeof hoveredPoint];
+      const movingAverageIsNumber = typeof movingAverageValue === "number";
+      const sevenDayAverageIsNumber = typeof sevenDayAverageValue === "number";
+      const showTooltip = analyticsCardTooltipType !== "none" && analyticsCardType !== "none";
+      return (
+        <div className="w-full max-w-md" style={{ minHeight: 220 }}>
+          <DesignAnalyticsCard
+            gradient={analyticsCardGradient}
+            className="h-full min-h-[220px] flex flex-col"
+            chart={{
+              type: analyticsCardType,
+              tooltipType: analyticsCardTooltipType,
+              highlightMode: analyticsCardHighlightMode,
+              averages: {
+                movingAverage: analyticsCardMovingAverage,
+                sevenDayAverage: analyticsCardSevenDayAverage,
+                movingAverageDataKey: analyticsCardMovingAverageDataKey,
+                sevenDayAverageDataKey: analyticsCardSevenDayAverageDataKey,
+              },
+            }}
+          >
+            {analyticsCardShowHeader && (
+              <DesignAnalyticsCardHeader label="Daily Active Users" />
+            )}
+            {analyticsCardShowLegend && (
+              <DesignChartLegend items={demoLegendItems} />
+            )}
+            <div className="flex-1 min-h-0 px-4 pb-4 pt-2 flex flex-col">
+              <div
+                className="flex-1 min-h-0 rounded-lg bg-foreground/[0.02] p-2 relative"
+                onMouseLeave={() => setAnalyticsCardHoveredIndex(null)}
+              >
+                {analyticsCardType === "none" && (
+                  <div className="h-full flex items-center justify-center">
+                    <Typography variant="secondary" className="text-xs text-center">
+                      No chart selected
+                    </Typography>
+                  </div>
+                )}
+                {analyticsCardType === "donut" && (
+                  <div className="h-full flex items-center justify-center">
+                    <div
+                      className="relative h-28 w-28 rounded-full bg-[conic-gradient(hsl(152,38%,52%)_0_35%,hsl(221,42%,55%)_35%_78%,hsl(36,55%,58%)_78%_100%)]"
+                      onMouseEnter={() => setAnalyticsCardHoveredIndex(0)}
+                    >
+                      <div className="absolute inset-[18px] rounded-full bg-background/95" />
+                    </div>
+                  </div>
+                )}
+                {analyticsCardType !== "none" && analyticsCardType !== "donut" && (
+                  <div
+                    className="h-full min-h-0 grid gap-1.5 items-end"
+                    style={{ gridTemplateColumns: `repeat(${DEMO_ANALYTICS_POINTS.length}, minmax(0, 1fr))` }}
+                  >
+                    {DEMO_ANALYTICS_POINTS.map((point, index) => {
+                      const total = point.new + point.retained + point.reactivated;
+                      const totalHeightPercent = Math.max((total / maxTotal) * 100, 12);
+                      const retainedPercent = (point.retained / total) * 100;
+                      const newPercent = (point.new / total) * 100;
+                      const reactivatedPercent = (point.reactivated / total) * 100;
+                      const isHovered = hoveredIndex === index;
+                      const dimBySeriesHover = (analyticsCardHighlightMode === "series-hover" || analyticsCardHighlightMode === "mixed")
+                        && analyticsCardHoveredIndex !== null
+                        && !isHovered;
+                      return (
+                        <div
+                          key={point.date}
+                          className={cn("flex flex-col items-center gap-1", dimBySeriesHover && "opacity-45")}
+                          onMouseEnter={() => setAnalyticsCardHoveredIndex(index)}
+                        >
+                          <div className="h-20 w-full flex items-end justify-center">
+                            {analyticsCardType === "stacked-bar" && (
+                              <div
+                                className={cn(
+                                  "w-full rounded-sm overflow-hidden flex flex-col-reverse transition-all duration-150",
+                                  (analyticsCardHighlightMode === "bar-segment" || analyticsCardHighlightMode === "mixed") && isHovered && "ring-1 ring-foreground/30"
+                                )}
+                                style={{ height: `${totalHeightPercent}%` }}
+                              >
+                                <div className="w-full bg-[hsl(152,38%,52%)]" style={{ height: `${newPercent}%` }} />
+                                <div className="w-full bg-[hsl(221,42%,55%)]" style={{ height: `${retainedPercent}%` }} />
+                                <div className="w-full bg-[hsl(36,55%,58%)]" style={{ height: `${reactivatedPercent}%` }} />
+                              </div>
+                            )}
+                            {analyticsCardType === "bar" && (
+                              <div
+                                className={cn(
+                                  "w-full rounded-sm bg-[hsl(221,42%,55%)] transition-all duration-150",
+                                  (analyticsCardHighlightMode === "bar-segment" || analyticsCardHighlightMode === "mixed") && isHovered && "ring-1 ring-foreground/30"
+                                )}
+                                style={{ height: `${totalHeightPercent}%` }}
+                              />
+                            )}
+                            {analyticsCardType === "line" && (
+                              <div className="w-full flex justify-center">
+                                <div className={cn(
+                                  "h-2.5 w-2.5 rounded-full bg-[hsl(210,84%,64%)] ring-2 ring-[hsl(210,84%,64%)]/30 transition-all duration-150",
+                                  (analyticsCardHighlightMode === "dot-hover" || analyticsCardHighlightMode === "mixed") && isHovered && "scale-125"
+                                )} />
+                              </div>
+                            )}
+                            {analyticsCardType === "composed" && (
+                              <div className="relative w-full h-full flex items-end justify-center">
+                                <div className="w-full rounded-sm bg-[hsl(221,42%,55%)]/50" style={{ height: `${Math.max(totalHeightPercent * 0.8, 10)}%` }} />
+                                <div className="absolute bottom-0 left-1/2 h-2.5 w-2.5 -translate-x-1/2 rounded-full bg-[hsl(268,82%,66%)] ring-2 ring-[hsl(268,82%,66%)]/30" />
+                              </div>
+                            )}
+                          </div>
+                          <span className="text-[9px] text-muted-foreground">{point.date.slice(-2)}</span>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+                {showTooltip && analyticsCardHoveredIndex !== null && (
+                  <div
+                    className="absolute z-20 -top-2 -translate-x-1/2 -translate-y-full rounded-xl bg-background/95 border border-foreground/[0.1] shadow-lg px-3 py-2 min-w-[170px]"
+                    style={{ left: `${tooltipLeftPercent}%` }}
+                  >
+                    <div className="text-[10px] font-medium text-muted-foreground">{hoveredPoint.date}</div>
+                    {(analyticsCardTooltipType === "stacked" || analyticsCardTooltipType === "composed" || analyticsCardTooltipType === "default") && (
+                      <div className="mt-1.5 space-y-1">
+                        <div className="flex items-center justify-between text-[11px]">
+                          <span className="text-muted-foreground">New</span>
+                          <span className="font-medium tabular-nums">{hoveredPoint.new}</span>
+                        </div>
+                        <div className="flex items-center justify-between text-[11px]">
+                          <span className="text-muted-foreground">Retained</span>
+                          <span className="font-medium tabular-nums">{hoveredPoint.retained}</span>
+                        </div>
+                        <div className="flex items-center justify-between text-[11px]">
+                          <span className="text-muted-foreground">Reactivated</span>
+                          <span className="font-medium tabular-nums">{hoveredPoint.reactivated}</span>
+                        </div>
+                      </div>
+                    )}
+                    {analyticsCardTooltipType === "visitors" && (
+                      <div className="mt-1.5 flex items-center justify-between text-[11px]">
+                        <span className="text-muted-foreground">Visitors</span>
+                        <span className="font-medium tabular-nums">{hoveredPoint.visitors.toLocaleString()}</span>
+                      </div>
+                    )}
+                    {analyticsCardTooltipType === "revenue" && (
+                      <div className="mt-1.5 flex items-center justify-between text-[11px]">
+                        <span className="text-muted-foreground">Revenue</span>
+                        <span className="font-medium tabular-nums">${Math.round(hoveredPoint.revenueCents / 100)}</span>
+                      </div>
+                    )}
+                    {analyticsCardTooltipType === "donut" && (
+                      <div className="mt-1.5 flex items-center justify-between text-[11px]">
+                        <span className="text-muted-foreground">Segment share</span>
+                        <span className="font-medium tabular-nums">35% / 43% / 22%</span>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+              <div className="mt-2 flex items-center justify-between text-[10px] text-muted-foreground">
+                <span>
+                  {analyticsCardMovingAverageDataKey}:{" "}
+                  {analyticsCardMovingAverage
+                    ? (movingAverageIsNumber ? movingAverageValue : "invalid key")
+                    : "off"}
+                </span>
+                <span>
+                  {analyticsCardSevenDayAverageDataKey}:{" "}
+                  {analyticsCardSevenDayAverage
+                    ? (sevenDayAverageIsNumber ? sevenDayAverageValue : "invalid key")
+                    : "off"}
+                </span>
+              </div>
+            </div>
+          </DesignAnalyticsCard>
+        </div>
+      );
+    }
     if (selected === "badge") {
       const badgeIconProp = badgeContentMode === "icon"
         ? CheckCircle
@@ -543,6 +881,25 @@ export default function PageClient() {
         </div>
       );
     }
+    if (selected === "data-grid") {
+      return (
+        <div className="w-full max-w-3xl">
+          <DataGrid<DemoGridUser>
+            columns={DEMO_GRID_COLUMNS}
+            rows={dgData.rows}
+            getRowId={(row) => row.id}
+            totalRowCount={dgData.totalRowCount}
+            isLoading={dgData.isLoading}
+            state={dgState}
+            onChange={setDgState}
+            selectionMode={dgSelectionMode}
+            rowHeight={dgRowHeight}
+            toolbar={dgShowToolbar ? undefined : false}
+            maxHeight={400}
+          />
+        </div>
+      );
+    }
     if (selected === "data-table") {
       return (
         <div className="w-full max-w-2xl">
@@ -791,6 +1148,142 @@ export default function PageClient() {
         </div>
       );
     }
+    if (selected === "analytics-card") {
+      return (
+        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3 sm:gap-4 items-end">
+          <PropField label="Gradient">
+            <DesignSelectorDropdown
+              value={analyticsCardGradient}
+              onValueChange={(v) => {
+                if (v === "blue" || v === "cyan" || v === "purple" || v === "green" || v === "orange" || v === "slate") {
+                  setAnalyticsCardGradient(v);
+                  return;
+                }
+                throw new Error(`Unknown analytics card gradient "${v}"`);
+              }}
+              options={[
+                { value: "blue", label: "Blue" },
+                { value: "cyan", label: "Cyan" },
+                { value: "purple", label: "Purple" },
+                { value: "green", label: "Green" },
+                { value: "orange", label: "Orange" },
+                { value: "slate", label: "Slate" },
+              ]}
+              size="sm"
+            />
+          </PropField>
+          <PropField label="Chart Type">
+            <DesignSelectorDropdown
+              value={analyticsCardType}
+              onValueChange={(v) => {
+                if (v === "none" || v === "line" || v === "bar" || v === "stacked-bar" || v === "composed" || v === "donut") {
+                  setAnalyticsCardType(v);
+                  return;
+                }
+                throw new Error(`Unknown analytics chart type "${v}"`);
+              }}
+              options={[
+                { value: "none", label: "None" },
+                { value: "line", label: "Line" },
+                { value: "bar", label: "Bar" },
+                { value: "stacked-bar", label: "Stacked Bar" },
+                { value: "composed", label: "Composed" },
+                { value: "donut", label: "Donut" },
+              ]}
+              size="sm"
+            />
+          </PropField>
+          <PropField label="Tooltip Type">
+            <DesignSelectorDropdown
+              value={analyticsCardTooltipType}
+              onValueChange={(v) => {
+                if (v === "none" || v === "default" || v === "stacked" || v === "composed" || v === "visitors" || v === "revenue" || v === "donut") {
+                  setAnalyticsCardTooltipType(v);
+                  return;
+                }
+                throw new Error(`Unknown analytics tooltip type "${v}"`);
+              }}
+              options={[
+                { value: "none", label: "None" },
+                { value: "default", label: "Default" },
+                { value: "stacked", label: "Stacked" },
+                { value: "composed", label: "Composed" },
+                { value: "visitors", label: "Visitors" },
+                { value: "revenue", label: "Revenue" },
+                { value: "donut", label: "Donut" },
+              ]}
+              size="sm"
+            />
+          </PropField>
+          <PropField label="Highlight Mode">
+            <DesignSelectorDropdown
+              value={analyticsCardHighlightMode}
+              onValueChange={(v) => {
+                if (v === "none" || v === "bar-segment" || v === "series-hover" || v === "dot-hover" || v === "mixed") {
+                  setAnalyticsCardHighlightMode(v);
+                  return;
+                }
+                throw new Error(`Unknown analytics highlight mode "${v}"`);
+              }}
+              options={[
+                { value: "none", label: "None" },
+                { value: "bar-segment", label: "Bar Segment" },
+                { value: "series-hover", label: "Series Hover" },
+                { value: "dot-hover", label: "Dot Hover" },
+                { value: "mixed", label: "Mixed" },
+              ]}
+              size="sm"
+            />
+          </PropField>
+          <PropField label="Header">
+            <DesignPillToggle
+              options={[{ id: "yes", label: "Show" }, { id: "no", label: "Hide" }]}
+              selected={analyticsCardShowHeader ? "yes" : "no"}
+              onSelect={(v) => setAnalyticsCardShowHeader(v === "yes")}
+              size="sm"
+            />
+          </PropField>
+          <PropField label="Legend">
+            <DesignPillToggle
+              options={[{ id: "yes", label: "Show" }, { id: "no", label: "Hide" }]}
+              selected={analyticsCardShowLegend ? "yes" : "no"}
+              onSelect={(v) => setAnalyticsCardShowLegend(v === "yes")}
+              size="sm"
+            />
+          </PropField>
+          <PropField label="Moving Avg">
+            <DesignPillToggle
+              options={[{ id: "yes", label: "On" }, { id: "no", label: "Off" }]}
+              selected={analyticsCardMovingAverage ? "yes" : "no"}
+              onSelect={(v) => setAnalyticsCardMovingAverage(v === "yes")}
+              size="sm"
+            />
+          </PropField>
+          <PropField label="7-Day Avg">
+            <DesignPillToggle
+              options={[{ id: "yes", label: "On" }, { id: "no", label: "Off" }]}
+              selected={analyticsCardSevenDayAverage ? "yes" : "no"}
+              onSelect={(v) => setAnalyticsCardSevenDayAverage(v === "yes")}
+              size="sm"
+            />
+          </PropField>
+          <PropField label="Moving Avg Key">
+            <DesignInput
+              size="sm"
+              value={analyticsCardMovingAverageDataKey}
+              onChange={(e) => setAnalyticsCardMovingAverageDataKey(e.target.value)}
+            />
+          </PropField>
+          <PropField label="7-Day Avg Key">
+            <DesignInput
+              size="sm"
+              value={analyticsCardSevenDayAverageDataKey}
+              onChange={(e) => setAnalyticsCardSevenDayAverageDataKey(e.target.value)}
+            />
+          </PropField>
+        </div>
+      );
+    }
     if (selected === "badge") {
       return (
         <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3 sm:gap-4 items-end">
@@ -1052,6 +1545,44 @@ export default function PageClient() {
         </div>
       );
     }
+    if (selected === "data-grid") {
+      return (
+        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3 sm:gap-4 items-end">
+          <PropField label="Selection Mode">
+            <DesignSelectorDropdown
+              value={dgSelectionMode}
+              onValueChange={(v) => {
+                if (v === "none" || v === "single" || v === "multiple") {
+                  setDgSelectionMode(v);
+                  return;
+                }
+                throw new Error(`Unknown selection mode "${v}"`);
+              }}
+              options={[
+                { value: "none", label: "None" },
+                { value: "single", label: "Single" },
+                { value: "multiple", label: "Multiple" },
+              ]}
+              size="sm"
+            />
+          </PropField>
+          <PropField label="Row Height">
+            <DesignInput
+              size="sm"
+              type="text"
+              value={String(dgRowHeight)}
+              onChange={(e) => {
+                const n = Number(e.target.value);
+                if (!Number.isNaN(n) && n >= 24) setDgRowHeight(n);
+              }}
+            />
+          </PropField>
+          <PropField label="Toolbar">
+            <BoolToggle value={dgShowToolbar} onChange={setDgShowToolbar} on="Shown" off="Hidden" />
+          </PropField>
+        </div>
+      );
+    }
     if (selected === "data-table") {
       return (
         <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3 sm:gap-4 items-end">
@@ -1419,6 +1950,30 @@ export default function PageClient() {
   title="${escapeAttr(alertTitle)}"
   description="${escapeAttr(alertDesc)}"
 />`;
+    }
+    if (selected === "analytics-card") {
+      const headerSnippet = analyticsCardShowHeader
+        ? `\n  <DesignAnalyticsCardHeader label="Daily Active Users" />`
+        : "";
+      const legendSnippet = analyticsCardShowLegend
+        ? `\n  <DesignChartLegend\n    items={[\n      { key: "new", label: "New", color: "hsl(152, 38%, 52%)" },\n      { key: "retained", label: "Retained", color: "hsl(221, 42%, 55%)" },\n      { key: "reactivated", label: "Reactivated", color: "hsl(36, 55%, 58%)" },\n    ]}\n  />`
+        : "";
+      return `<DesignAnalyticsCard
+  gradient="${analyticsCardGradient}"
+  chart={{
+    type: "${analyticsCardType}",
+    tooltipType: "${analyticsCardTooltipType}",
+    highlightMode: "${analyticsCardHighlightMode}",
+    averages: {
+      movingAverage: ${analyticsCardMovingAverage},
+      sevenDayAverage: ${analyticsCardSevenDayAverage},
+      movingAverageDataKey: "${escapeAttr(analyticsCardMovingAverageDataKey)}",
+      sevenDayAverageDataKey: "${escapeAttr(analyticsCardSevenDayAverageDataKey)}",
+    },
+  }}
+>${headerSnippet}${legendSnippet}
+  {/* chart content */}
+</DesignAnalyticsCard>`;
     }
     if (selected === "badge") {
       const iconProp = badgeContentMode === "icon"
@@ -1484,6 +2039,19 @@ export default function PageClient() {
   rageClickThreshold={${blastRageThreshold}}
   rageClickWindowMs={${blastRageWindow}}
   rageClickRadiusPx={${blastRageRadius}}
+/>`;
+    }
+    if (selected === "data-grid") {
+      return `<DataGrid
+  columns={columns}
+  data={users}
+  getRowId={(row) => row.id}
+  state={gridState}
+  onChange={setGridState}
+  selectionMode="${dgSelectionMode}"
+  rowHeight={${dgRowHeight}}
+  toolbar={${dgShowToolbar}}
+  maxHeight={400}
 />`;
     }
     if (selected === "data-table") {
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/globe.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/globe.tsx
index 0a0a1dc710..6e70e1c4b2 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/globe.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/globe.tsx
@@ -168,17 +168,20 @@ function GlobeSectionInner({ countryData, totalUsers, children }: {countryData:
   // - Canvas width 350: Hide globe
   // - Canvas width 355: zoom = 360
   // - Canvas width 500: zoom = 309
-  // Formula: zoom = 484 - 0.35 * width (for width >= 355)
+  // - Canvas width >= 500: zoom stays at 309 so the globe keeps a constant
+  //   visual fill ratio on widescreens instead of growing without bound and
+  //   overflowing the canvas.
   const canvasWidth = globeContainerSize?.width ?? 0;
   const GLOBE_MIN_WIDTH = 350;
 
   const shouldShowGlobe = canvasWidth >= GLOBE_MIN_WIDTH;
 
   // Calculate zoom based on width
-  // For widths >= 355, use linear formula: zoom = 484 - 0.35 * width
+  // For widths >= 355, use linear formula clamped to a minimum distance.
   // For widths between 350-355, use 360 (same as at 355px)
+  const MIN_CAMERA_DISTANCE = 309; // matches the value at width = 500
   const cameraDistance = canvasWidth >= 355
-    ? 484 - 0.35 * canvasWidth
+    ? Math.max(MIN_CAMERA_DISTANCE, 484 - 0.35 * canvasWidth)
     : 360; // For 350-355 range, use 360
 
   // Calculate border size using exact same formula structure as cameraDistance
@@ -349,7 +352,7 @@ function GlobeSectionInner({ countryData, totalUsers, children }: {countryData:
   }, []);
 
   return (
-    <div className='relative w-full aspect-square'>
+    <div className='relative aspect-square w-full mx-auto'>
       <div inert className='absolute inset-0 pointer-events-none'>
         <GlobeLoading
           devReason="not ready"
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/line-chart.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/line-chart.tsx
index 7d1b8e85e3..a57b5a7481 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/line-chart.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/line-chart.tsx
@@ -3,15 +3,29 @@ import {
   cn,
   Typography
 } from "@/components/ui";
+import { Calendar } from "@/components/ui/calendar";
 import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
-import { DesignCardTint, DesignCategoryTabs, DesignPillToggle } from "@/components/design-components";
+import {
+  DesignAnalyticsCard,
+  type DesignAnalyticsChartConfig,
+  DesignCardTint,
+  DesignCategoryTabs,
+  DesignChartLegend,
+  DesignPillToggle,
+  useInfiniteListWindow,
+} from "@/components/design-components";
+import { Popover, PopoverAnchor, PopoverContent } from "@/components/ui/popover";
 import { UserAvatar } from '@stackframe/stack';
 import { fromNow, isWeekend } from '@stackframe/stack-shared/dist/utils/dates';
-import { urlString } from "@stackframe/stack-shared/dist/utils/urls";
-import { useState } from "react";
-import { Bar, BarChart, CartesianGrid, Cell, Pie, PieChart, TooltipProps, XAxis, YAxis } from "recharts";
+import { useId, useMemo, useState } from "react";
+import { Area, Bar, BarChart, CartesianGrid, Cell, ComposedChart, Line, LineChart, Pie, PieChart, TooltipProps, XAxis, YAxis } from "recharts";
+
+export type CustomDateRange = {
+  from: Date,
+  to: Date,
+};
 
-export type TimeRange = '7d' | '30d' | 'all';
+export type TimeRange = '7d' | '30d' | 'all' | 'custom';
 
 export type LineChartDisplayConfig = {
   name: string,
@@ -33,17 +47,19 @@ type UserListItem = {
   signed_up_at_millis: number,
 }
 
+const tooltipSurfaceClass = "rounded-xl bg-white dark:bg-background shadow-[0_10px_24px_rgba(15,23,42,0.14)] dark:shadow-lg ring-1 ring-slate-900/10 dark:ring-foreground/[0.12]";
+
 const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
   if (!active || !payload?.length) return null;
 
   const data = payload[0].payload as DataPoint;
-  const date = new Date(data.date);
+  const date = parseChartDate(data.date);
   const formattedDate = !isNaN(date.getTime())
     ? date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
     : data.date;
 
   return (
-    <div className="rounded-xl bg-background/95 px-3.5 py-2.5 shadow-lg backdrop-blur-xl ring-1 ring-foreground/[0.08]" style={{ zIndex: 9999 }}>
+    <div className={`${tooltipSurfaceClass} px-3.5 py-2.5`} style={{ zIndex: 9999 }}>
       <div className="flex flex-col gap-2">
         <span className="text-[11px] font-medium text-muted-foreground tracking-wide">
           {formattedDate}
@@ -68,18 +84,144 @@ const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
 };
 
 // Helper function to filter datapoints by time range
-function filterDatapointsByTimeRange(datapoints: DataPoint[], timeRange: TimeRange): DataPoint[] {
+function getDateKey(date: Date): string {
+  const year = String(date.getFullYear());
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+function normalizeToLocalDay(date: Date): Date {
+  const normalizedDate = new Date(date);
+  normalizedDate.setHours(0, 0, 0, 0);
+  return normalizedDate;
+}
+
+function parseChartDate(dateValue: string): Date {
+  if (/^\d{4}-\d{2}-\d{2}$/.test(dateValue)) {
+    const [year, month, day] = dateValue.split("-").map(Number);
+    return new Date(year, month - 1, day);
+  }
+
+  const parsed = new Date(dateValue);
+  if (Number.isNaN(parsed.getTime())) {
+    throw new Error(`Unsupported chart date format: ${dateValue}`);
+  }
+  return parsed;
+}
+
+function formatDateRangeLabel(range: CustomDateRange | null): string {
+  if (range == null) {
+    return "Pick date range";
+  }
+
+  const fromLabel = range.from.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+  const toLabel = range.to.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+
+  return `${fromLabel} - ${toLabel}`;
+}
+
+function filterPointsByTimeRange<T extends { date: string }>(
+  datapoints: T[],
+  timeRange: TimeRange,
+  customDateRange: CustomDateRange | null = null,
+): T[] {
   if (timeRange === '7d') {
     return datapoints.slice(-7);
   }
   if (timeRange === '30d') {
     return datapoints.slice(-30);
   }
+  if (timeRange === 'custom') {
+    if (customDateRange == null) {
+      return datapoints;
+    }
+
+    const fromKey = getDateKey(customDateRange.from);
+    const toKey = getDateKey(customDateRange.to);
+
+    return datapoints.filter((point) => point.date >= fromKey && point.date <= toKey);
+  }
   return datapoints;
 }
 
+export function filterDatapointsByTimeRange(
+  datapoints: DataPoint[],
+  timeRange: TimeRange,
+  customDateRange: CustomDateRange | null = null,
+): DataPoint[] {
+  return filterPointsByTimeRange(datapoints, timeRange, customDateRange);
+}
+
+export function filterStackedDatapointsByTimeRange<T extends { date: string }>(
+  datapoints: T[],
+  timeRange: TimeRange,
+  customDateRange: CustomDateRange | null = null,
+): T[] {
+  return filterPointsByTimeRange(datapoints, timeRange, customDateRange);
+}
+
+function getHoveredDataIndex(activeTooltipIndex: unknown, dataLength: number): number | null {
+  const parsedIndex = typeof activeTooltipIndex === "number"
+    ? activeTooltipIndex
+    : typeof activeTooltipIndex === "string"
+      ? Number(activeTooltipIndex)
+      : NaN;
+
+  if (!Number.isInteger(parsedIndex) || parsedIndex < 0 || parsedIndex >= dataLength) {
+    return null;
+  }
+
+  return parsedIndex;
+}
+
+function updateHoveredIndexFromChartState(
+  state: unknown,
+  dataLength: number,
+  setHoveredIndex: (index: number | null) => void,
+) {
+  if (typeof state !== "object" || state === null || !("activeTooltipIndex" in state)) {
+    setHoveredIndex(null);
+    return;
+  }
+
+  setHoveredIndex(getHoveredDataIndex(state.activeTooltipIndex, dataLength));
+}
+
+function getActiveCoordinateX(state: unknown): number | null {
+  if (typeof state !== "object" || state === null || !("activeCoordinate" in state)) {
+    return null;
+  }
+
+  const activeCoordinate = state.activeCoordinate;
+  if (
+    typeof activeCoordinate !== "object" ||
+    activeCoordinate === null ||
+    !("x" in activeCoordinate) ||
+    typeof activeCoordinate.x !== "number" ||
+    !Number.isFinite(activeCoordinate.x)
+  ) {
+    return null;
+  }
+
+  return activeCoordinate.x;
+}
+
+function getDimmedOpacity(
+  baseOpacity: number,
+  index: number,
+  hoveredIndex: number | null,
+  dimFactor = 0.22,
+) {
+  if (hoveredIndex == null) {
+    return baseOpacity;
+  }
+
+  return hoveredIndex === index ? baseOpacity : Math.max(baseOpacity * dimFactor, 0.08);
+}
+
 // Shared BarChart component to reduce duplication
-function ActivityBarChart({
+export function ActivityBarChart({
   datapoints,
   config,
   height,
@@ -90,6 +232,9 @@ function ActivityBarChart({
   height?: number,
   compact?: boolean,
 }) {
+  const id = useId();
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
   return (
     <ChartContainer
       config={config.chart}
@@ -97,9 +242,12 @@ function ActivityBarChart({
       maxHeight={height}
     >
       <BarChart
+        id={id}
         accessibilityLayer
         data={datapoints}
         margin={{ top: 10, right: 10, left: -10, bottom: 0 }}
+        onMouseMove={(state) => updateHoveredIndexFromChartState(state, datapoints.length, setHoveredIndex)}
+        onMouseLeave={() => setHoveredIndex(null)}
       >
         <CartesianGrid
           horizontal
@@ -126,12 +274,16 @@ function ActivityBarChart({
           isAnimationActive={false}
         >
           {datapoints.map((entry, index) => {
-            const isWeekendDay = isWeekend(new Date(entry.date));
+            const isWeekendDay = isWeekend(parseChartDate(entry.date));
+            const baseOpacity = isWeekendDay ? 0.5 : 1;
+            const isActiveBar = hoveredIndex === index;
             return (
               <Cell
                 key={`cell-${index}`}
                 fill="var(--color-activity)"
-                opacity={isWeekendDay ? 0.5 : 1}
+                opacity={getDimmedOpacity(baseOpacity, index, hoveredIndex)}
+                stroke={isActiveBar ? "hsl(var(--background))" : undefined}
+                strokeWidth={isActiveBar ? 1.25 : 0}
               />
             );
           })}
@@ -150,13 +302,13 @@ function ActivityBarChart({
           tickLine={false}
           tickMargin={compact ? 4 : 8}
           axisLine={false}
-          interval="equidistantPreserveStart"
+          interval={datapoints.length <= 7 ? 0 : "equidistantPreserveStart"}
           tick={{
             fill: "hsl(var(--muted-foreground))",
             fontSize: compact ? 8 : 10,
           }}
           tickFormatter={(value) => {
-            const date = new Date(value);
+            const date = parseChartDate(value);
             if (!isNaN(date.getTime())) {
               const month = date.toLocaleDateString("en-US", {
                 month: "short",
@@ -172,172 +324,981 @@ function ActivityBarChart({
   );
 }
 
-export type GradientColor = "blue" | "purple" | "green" | "orange" | "slate" | "cyan";
+// ── Stacked bar chart (for DAU/DAT new · reactivated · retained splits) ──────
 
-export function ChartCard({
-  children,
-  className,
-  gradientColor = "blue"
-}: {
-  children: React.ReactNode,
-  className?: string,
-  gradientColor?: GradientColor,
-}) {
-  const designCardGradients: Record<GradientColor, "blue" | "cyan" | "purple" | "green" | "orange" | "default"> = {
-    blue: "blue",
-    purple: "purple",
-    green: "green",
-    orange: "orange",
-    slate: "default",
-    cyan: "cyan",
-  };
+export type StackedDataPoint = {
+  date: string,
+  new: number,
+  reactivated: number,
+  retained: number,
+};
 
-  return (
-    <>
-      <style>
-        {`
-          .chart-card-tooltip-escape .recharts-tooltip-wrapper {
-            z-index: 9999 !important;
-            overflow: visible !important;
-          }
-          .chart-card-tooltip-escape .recharts-tooltip-wrapper > * {
-            overflow: visible !important;
-          }
-        `}
-      </style>
-      <DesignCardTint
-        gradient={designCardGradients[gradientColor]}
-        className={cn(
-          "chart-card-tooltip-escape h-full overflow-visible hover:z-10 [&>div]:h-full [&>div]:min-h-0 [&>div]:flex [&>div]:flex-col [&>div]:overflow-visible",
-          className
-        )}
-      >
-        <div className="h-full flex flex-col">
-          {children}
-        </div>
-      </DesignCardTint>
-    </>
-  );
-}
+const stackedChartConfig: ChartConfig = {
+  retained: { label: "Retained",    color: "hsl(221, 42%, 55%)" },
+  reactivated: { label: "Reactivated", color: "hsl(36,  55%, 58%)" },
+  new: { label: "New",         color: "hsl(152, 38%, 52%)" },
+};
 
-export function TimeRangeToggle({
-  timeRange,
-  onTimeRangeChange,
-}: {
-  timeRange: TimeRange,
-  onTimeRangeChange: (range: TimeRange) => void,
-}) {
-  const options: { id: TimeRange, label: string }[] = [
-    { id: '7d', label: '7d' },
-    { id: '30d', label: '30d' },
-    { id: 'all', label: 'All' },
+const StackedTooltip = ({ active, payload }: TooltipProps<number, string>) => {
+  if (!active || !payload?.length) return null;
+
+  const row = payload[0].payload as StackedDataPoint & { avg7d?: number };
+  const date = parseChartDate(row.date);
+  const formattedDate = !isNaN(date.getTime())
+    ? date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+    : row.date;
+
+  const segments: Array<{ key: keyof typeof stackedChartConfig, value: number }> = [
+    { key: 'retained', value: row.retained },
+    { key: 'reactivated', value: row.reactivated },
+    { key: 'new', value: row.new },
   ];
+  const nonZeroSegments = segments.filter((segment) => segment.value > 0);
+  const total = row.retained + row.reactivated + row.new;
 
   return (
-    <DesignPillToggle
-      options={options}
-      selected={timeRange}
-      size="sm"
-      glassmorphic
-      onSelect={(selectedId) => {
-        if (selectedId === '7d' || selectedId === '30d' || selectedId === 'all') {
-          onTimeRangeChange(selectedId);
-          return;
-        }
-        throw new Error(`Unsupported time range selected: ${selectedId}`);
-      }}
-    />
+    <div className={`${tooltipSurfaceClass} px-3.5 py-2.5`} style={{ zIndex: 9999 }}>
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center justify-between gap-6">
+          <span className="text-[11px] font-medium text-muted-foreground tracking-wide">
+            {formattedDate}
+          </span>
+          <span className="text-[11px] font-semibold tabular-nums text-foreground">{total} total</span>
+        </div>
+        {nonZeroSegments.map((seg) => (
+          <div key={seg.key} className="flex items-center gap-2.5">
+            <span
+              className="h-2 w-2 rounded-full ring-2 ring-white/20"
+              style={{ backgroundColor: `var(--color-${seg.key})` }}
+            />
+            <span className="text-[11px] text-muted-foreground">
+              {stackedChartConfig[seg.key].label}
+            </span>
+            <span className="ml-auto font-mono text-xs font-semibold tabular-nums text-foreground">
+              {seg.value.toLocaleString()}
+            </span>
+          </div>
+        ))}
+        {row.avg7d != null && (
+          <div className="border-t border-foreground/[0.06] pt-2">
+            <div className="flex items-center justify-between gap-6">
+              <span className="text-[11px] text-muted-foreground">7-day avg</span>
+              <span className="font-mono text-[11px] font-medium tabular-nums text-foreground">
+                {Math.round(row.avg7d).toLocaleString()}
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
   );
+};
+
+// Trailing moving average that ignores zero-value days.
+// This keeps trend direction intuitive while avoiding "floating" artifacts.
+function rollingAvg(values: number[], windowSize: number): (number | null)[] {
+  return values.map((val, i) => {
+    if (val === 0) return null;
+    const start = Math.max(0, i - windowSize + 1);
+    const slice = values.slice(start, i + 1).filter(v => v > 0);
+    if (slice.length === 0) return null;
+    return slice.reduce((s, v) => s + v, 0) / slice.length;
+  });
 }
 
-export function TabbedMetricsCard({
-  config,
-  chartData,
-  listData,
-  listTitle,
-  gradientColor = "blue",
-  projectId,
-  router,
+function sevenDayAvg(values: number[], index: number): number {
+  const start = Math.max(0, index - 6);
+  const slice = values.slice(start, index + 1);
+  return slice.reduce((s, v) => s + v, 0) / slice.length;
+}
+
+export function StackedBarChartDisplay({
+  datapoints,
   height,
   compact = false,
-  timeRange,
-  totalAllTime,
-  showTotal = false,
 }: {
-  config: LineChartDisplayConfig,
-  chartData: DataPoint[],
-  listData: UserListItem[],
-  listTitle: string,
-  gradientColor?: GradientColor,
-  projectId: string,
-  router: ReturnType<typeof useRouter>,
+  datapoints: StackedDataPoint[],
   height?: number,
   compact?: boolean,
-  timeRange: TimeRange,
-  totalAllTime?: number,
-  showTotal?: boolean,
 }) {
-  const [view, setView] = useState<'chart' | 'list'>('chart');
-
-  const filteredDatapoints = filterDatapointsByTimeRange(chartData, timeRange);
-
-  // Calculate total for the selected time range
-  const total = filteredDatapoints.reduce((sum, point) => sum + point.activity, 0);
+  const id = useId();
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
 
-  // For "all" time range, use totalAllTime if provided (which includes data beyond 30 days)
-  const displayTotal = timeRange === 'all' && totalAllTime !== undefined ? totalAllTime : total;
+  const windowSize = Math.max(4, Math.round(datapoints.length / 2.5));
+  const totals = datapoints.map(p => p.new + p.retained + p.reactivated);
+  const avgValues = rollingAvg(totals, windowSize);
+  const sevenDayAvgs = totals.map((_, i) => sevenDayAvg(totals, i));
+  const chartData = datapoints.map((p, i) => {
+    const total = totals[i];
+    const rawAvg = avgValues[i];
+    const movingAvg = total > 0 && rawAvg != null
+      ? Math.min(total * 0.9, Math.max(total * 0.35, rawAvg))
+      : null;
+    const isHighlightedAvg = hoveredIndex != null && i <= hoveredIndex && i >= hoveredIndex - 6;
+    return {
+      ...p,
+      movingAvg,
+      avg7d: sevenDayAvgs[i],
+      highlightedAvg: isHighlightedAvg ? movingAvg : null,
+    };
+  });
 
-  const hoverAccentColors: Record<GradientColor, string> = {
-    blue: "hover:bg-blue-500/[0.06]",
-    purple: "hover:bg-purple-500/[0.06]",
-    green: "hover:bg-emerald-500/[0.06]",
-    orange: "hover:bg-orange-500/[0.06]",
-    slate: "hover:bg-slate-500/[0.04]",
-    cyan: "hover:bg-cyan-500/[0.06]",
+  const movingAvgConfig: ChartConfig = {
+    ...stackedChartConfig,
+    movingAvg: { label: "Moving avg", color: "hsl(var(--foreground))" },
   };
 
-  const hoverAccentClass = hoverAccentColors[gradientColor];
-  const tabsGradient: "blue" | "cyan" | "purple" | "green" | "orange" | "default" = gradientColor === "slate" ? "default" : gradientColor;
-
   return (
-    <ChartCard className="h-full flex flex-col" gradientColor={gradientColor}>
-      <div className={cn("flex items-center justify-between border-b border-foreground/[0.05]", compact ? "px-4" : "px-5")}>
-        <DesignCategoryTabs
-          categories={[
-            { id: "chart", label: config.name },
-            { id: "list", label: listTitle },
-          ]}
-          selectedCategory={view}
-          onSelect={(selectedId) => {
-            if (selectedId === "chart" || selectedId === "list") {
-              setView(selectedId);
-              return;
+    <ChartContainer
+      config={movingAvgConfig}
+      className="w-full flex-1 min-h-0 !overflow-visible [&_.recharts-wrapper]:!overflow-visible"
+      maxHeight={height}
+    >
+      <ComposedChart
+        id={id}
+        accessibilityLayer
+        data={chartData}
+        margin={{ top: 10, right: 10, left: -10, bottom: 0 }}
+        onMouseMove={(state) => updateHoveredIndexFromChartState(state, chartData.length, setHoveredIndex)}
+        onMouseLeave={() => setHoveredIndex(null)}
+      >
+        <CartesianGrid
+          horizontal
+          vertical={false}
+          strokeDasharray="3 3"
+          stroke="hsl(var(--border))"
+          opacity={0.3}
+        />
+        <ChartTooltip
+          content={<StackedTooltip />}
+          cursor={{ fill: "hsl(var(--muted-foreground))", opacity: hoveredIndex == null ? 0.08 : 0.12, radius: 4 }}
+          offset={20}
+          allowEscapeViewBox={{ x: true, y: true }}
+          wrapperStyle={{ zIndex: 9999, pointerEvents: 'none' }}
+        />
+        <Bar dataKey="retained" stackId="split" fill="var(--color-retained)" radius={[0, 0, 0, 0]} isAnimationActive={false}>
+          {datapoints.map((entry, index) => {
+            const baseOpacity = isWeekend(parseChartDate(entry.date)) ? 0.5 : 1;
+            const isActiveBar = hoveredIndex === index;
+            return (
+              <Cell
+                key={`ret-${index}`}
+                opacity={getDimmedOpacity(baseOpacity, index, hoveredIndex)}
+                stroke={isActiveBar ? "hsl(var(--background))" : undefined}
+                strokeWidth={isActiveBar ? 1 : 0}
+              />
+            );
+          })}
+        </Bar>
+        <Bar dataKey="reactivated" stackId="split" fill="var(--color-reactivated)" radius={[0, 0, 0, 0]} isAnimationActive={false}>
+          {datapoints.map((entry, index) => {
+            const baseOpacity = isWeekend(parseChartDate(entry.date)) ? 0.5 : 1;
+            const isActiveBar = hoveredIndex === index;
+            return (
+              <Cell
+                key={`react-${index}`}
+                opacity={getDimmedOpacity(baseOpacity, index, hoveredIndex)}
+                stroke={isActiveBar ? "hsl(var(--background))" : undefined}
+                strokeWidth={isActiveBar ? 1 : 0}
+              />
+            );
+          })}
+        </Bar>
+        <Bar dataKey="new" stackId="split" fill="var(--color-new)" radius={[4, 4, 0, 0]} isAnimationActive={false}>
+          {datapoints.map((entry, index) => {
+            const baseOpacity = isWeekend(parseChartDate(entry.date)) ? 0.5 : 1;
+            const isActiveBar = hoveredIndex === index;
+            return (
+              <Cell
+                key={`new-${index}`}
+                opacity={getDimmedOpacity(baseOpacity, index, hoveredIndex)}
+                stroke={isActiveBar ? "hsl(var(--background))" : undefined}
+                strokeWidth={isActiveBar ? 1 : 0}
+              />
+            );
+          })}
+        </Bar>
+        <Line
+          dataKey="movingAvg"
+          type="natural"
+          stroke="hsl(var(--foreground))"
+          strokeWidth={5}
+          strokeOpacity={hoveredIndex == null ? 0.14 : 0.05}
+          strokeDasharray="2.5 3.5"
+          dot={false}
+          activeDot={false}
+          isAnimationActive={false}
+          connectNulls={false}
+          legendType="none"
+        />
+        <Line
+          dataKey="movingAvg"
+          type="natural"
+          stroke="hsl(var(--foreground))"
+          strokeWidth={2.1}
+          strokeOpacity={hoveredIndex == null ? 0.85 : 0.28}
+          strokeDasharray="2.5 3.5"
+          dot={false}
+          activeDot={{ r: 3.5, fill: "hsl(var(--foreground))", stroke: "hsl(var(--background))", strokeWidth: 1.5 }}
+          isAnimationActive={false}
+          connectNulls={false}
+          legendType="none"
+        />
+        {hoveredIndex != null && (
+          <Line
+            dataKey="highlightedAvg"
+            type="natural"
+            stroke="hsl(var(--foreground))"
+            strokeWidth={3}
+            strokeOpacity={1}
+            strokeDasharray="2.5 3.5"
+            dot={false}
+            activeDot={{ r: 3.5, fill: "hsl(var(--foreground))", stroke: "hsl(var(--background))", strokeWidth: 1.5 }}
+            isAnimationActive={false}
+            connectNulls={false}
+            legendType="none"
+          />
+        )}
+        <YAxis
+          tickLine={false}
+          axisLine={false}
+          width={compact ? 35 : 50}
+          tick={{ fill: "hsl(var(--muted-foreground))", fontSize: compact ? 9 : 11 }}
+        />
+        <XAxis
+          dataKey="date"
+          tickLine={false}
+          tickMargin={compact ? 4 : 8}
+          axisLine={false}
+          interval={datapoints.length <= 7 ? 0 : "equidistantPreserveStart"}
+          tick={{ fill: "hsl(var(--muted-foreground))", fontSize: compact ? 8 : 10 }}
+          tickFormatter={(value) => {
+            const date = parseChartDate(value);
+            if (!isNaN(date.getTime())) {
+              return `${date.toLocaleDateString("en-US", { month: "short" })} ${date.getDate()}`;
             }
-            throw new Error(`Unsupported metrics tab selected: ${selectedId}`);
+            return value;
           }}
-          showBadge={false}
-          size="sm"
-          glassmorphic={false}
-          gradient={tabsGradient}
-          className="flex-1 min-w-0 border-0 [&>button]:rounded-none [&>button]:px-3 [&>button]:py-3.5 [&>button]:text-xs"
         />
+      </ComposedChart>
+    </ChartContainer>
+  );
+}
 
-        {view === 'chart' && showTotal && (
-          <span className="text-lg font-semibold text-foreground tabular-nums">
-            {displayTotal.toLocaleString()}
+// ── Combined bar+line analytics chart ─────────────────────────────────────────
+
+export type ComposedDataPoint = {
+  date: string,
+  new_cents: number,
+  refund_cents: number,
+  visitors: number,
+  dau: number,
+  _showVisitors?: boolean,
+  _showRevenue?: boolean,
+};
+
+export type VisitorsHoverDataPoint = {
+  date: string,
+  page_views: number,
+  movingAvg?: number | null,
+  avg7d?: number,
+  highlightedAvg?: number | null,
+  top_countries?: Array<{ country_code: string, count: number }>,
+};
+
+export type RevenueHoverDataPoint = {
+  date: string,
+  new_cents: number,
+  refund_cents: number,
+  movingAvg?: number | null,
+  avg7d?: number,
+  highlightedAvg?: number | null,
+};
+
+type HighlightDotProps = {
+  cx?: number,
+  cy?: number,
+  fill?: string,
+};
+
+const composedChartConfig: ChartConfig = {
+  dau: {
+    label: "Daily Active Users",
+    theme: { light: "hsl(152, 38%, 52%)", dark: "hsl(152, 38%, 62%)" },
+  },
+  visitors: {
+    label: "Unique Visitors",
+    theme: { light: "hsl(210, 84%, 64%)", dark: "hsl(210, 84%, 72%)" },
+  },
+  revenue: {
+    label: "Revenue",
+    theme: { light: "hsl(268, 82%, 66%)", dark: "hsl(268, 82%, 74%)" },
+  },
+};
+
+function ComposedTooltip({ active, payload }: TooltipProps<number, string>) {
+  if (!active || !payload?.length) return null;
+
+  const row = payload[0]?.payload as ComposedDataPoint | undefined;
+  if (!row) return null;
+
+  const date = parseChartDate(row.date);
+  const formattedDate = !isNaN(date.getTime())
+    ? date.toLocaleDateString('en-US', { weekday: 'long', day: 'numeric', month: 'long' })
+    : row.date;
+
+  const visitorsEnabled = row._showVisitors !== false;
+  const revenueEnabled = row._showRevenue !== false;
+  const revenueDollars = (row.new_cents / 100);
+  const revenuePerVisitor = visitorsEnabled && revenueEnabled && row.visitors > 0 ? (revenueDollars / row.visitors) : null;
+
+  return (
+    <div className={`${tooltipSurfaceClass} px-4 py-3 min-w-[180px]`} style={{ zIndex: 9999 }}>
+      <div className="flex flex-col gap-2">
+        <span className="text-[11px] font-medium text-muted-foreground tracking-wide">
+          {formattedDate}
+        </span>
+
+        <div className="flex items-center justify-between gap-6">
+          <div className="flex items-center gap-2">
+            <span className="h-2.5 w-2.5 rounded-sm" style={{ backgroundColor: "var(--color-dau)" }} />
+            <span className="text-xs text-muted-foreground">Daily active users</span>
+          </div>
+          <span className="font-mono text-xs font-semibold tabular-nums text-foreground">
+            {row.dau.toLocaleString()}
           </span>
-        )}
-      </div>
+        </div>
 
-      {config.description && view === 'chart' && (
-        <div className={cn("text-xs text-muted-foreground", compact ? "px-4 pt-3" : "px-5 pt-4")}>
-          {config.description}
+        <div className="flex items-center justify-between gap-6">
+          <div className="flex items-center gap-2">
+            <span className="h-2.5 w-2.5 rounded-sm" style={{ backgroundColor: "var(--color-visitors)" }} />
+            <span className="text-xs text-muted-foreground">Unique visitors</span>
+          </div>
+          <span className="font-mono text-xs font-semibold tabular-nums text-foreground">
+            {visitorsEnabled ? row.visitors.toLocaleString() : "—"}
+          </span>
         </div>
-      )}
 
-      <div className={cn(compact ? "p-4 pt-3" : "p-5 pt-4", "flex flex-col justify-center flex-1 min-h-0 overflow-visible")}>
+        <div className="flex items-center justify-between gap-6">
+          <div className="flex items-center gap-2">
+            <span className="h-2.5 w-2.5 rounded-sm" style={{ backgroundColor: "var(--color-revenue)" }} />
+            <span className="text-xs text-muted-foreground">Revenue</span>
+          </div>
+          <span className="font-mono text-xs font-semibold tabular-nums text-foreground">
+            {revenueEnabled ? `$${revenueDollars.toLocaleString(undefined, { maximumFractionDigits: 0 })}` : "—"}
+          </span>
+        </div>
+
+        <div className="border-t border-foreground/[0.06] pt-2">
+          <div className="flex items-center justify-between gap-6">
+            <span className="text-[11px] text-muted-foreground">Revenue/visitor</span>
+            <span className="font-mono text-[11px] font-medium tabular-nums text-foreground">
+              {revenuePerVisitor != null ? `$${revenuePerVisitor.toFixed(2)}` : "—"}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function HighlightedLineDot({ cx, cy, fill }: HighlightDotProps) {
+  if (cx == null || cy == null || fill == null) {
+    return null;
+  }
+
+  return (
+    <g pointerEvents="none">
+      <circle cx={cx} cy={cy} r={16} fill={fill} opacity={0.12} />
+      <circle cx={cx} cy={cy} r={10} fill={fill} opacity={0.18} />
+      <circle cx={cx} cy={cy} r={6.5} fill="hsl(var(--background))" opacity={0.96} />
+      <circle cx={cx} cy={cy} r={4} fill={fill} stroke="hsl(var(--background))" strokeWidth={1.5} />
+    </g>
+  );
+}
+
+export function ComposedAnalyticsChart({
+  datapoints,
+  showVisitors = true,
+  showRevenue = true,
+  height,
+  compact = false,
+}: {
+  datapoints: ComposedDataPoint[],
+  showVisitors?: boolean,
+  showRevenue?: boolean,
+  height?: number,
+  compact?: boolean,
+}) {
+  const id = useId();
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const [hoveredX, setHoveredX] = useState<number | null>(null);
+  const taggedDatapoints = useMemo(
+    () => datapoints.map(d => ({ ...d, _showVisitors: showVisitors, _showRevenue: showRevenue })),
+    [datapoints, showVisitors, showRevenue],
+  );
+  const maxVisitors = Math.max(...datapoints.map(d => Math.max(showVisitors ? d.visitors : 0, d.dau)), 1);
+  const maxRevenueCents = Math.max(...datapoints.map(d => showRevenue ? d.new_cents : 0), 1);
+  const visitorTicks = niceAxisTicks(Math.ceil(maxVisitors * 1.1), 5);
+  const revenueTicks = niceAxisTicks(Math.ceil(maxRevenueCents * 1.15), 5);
+  const visitorsMax = visitorTicks[visitorTicks.length - 1] ?? maxVisitors;
+  const revenueMax = revenueTicks[revenueTicks.length - 1] ?? maxRevenueCents;
+
+  return (
+    <ChartContainer
+      config={composedChartConfig}
+      className="w-full flex-1 min-h-0 !overflow-visible [&_.recharts-wrapper]:!overflow-visible"
+      maxHeight={height}
+    >
+      <ComposedChart
+        id={id}
+        data={taggedDatapoints}
+        margin={{ top: 10, right: 4, left: 4, bottom: 0 }}
+        onMouseMove={(state) => {
+          updateHoveredIndexFromChartState(state, datapoints.length, setHoveredIndex);
+          setHoveredX(getActiveCoordinateX(state));
+        }}
+        onMouseLeave={() => {
+          setHoveredIndex(null);
+          setHoveredX(null);
+        }}
+      >
+        <defs>
+          <linearGradient id={`visitors-fill-${id}`} x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="var(--color-visitors)" stopOpacity={0.32} />
+            <stop offset="70%" stopColor="var(--color-visitors)" stopOpacity={0.08} />
+            <stop offset="100%" stopColor="var(--color-visitors)" stopOpacity={0.02} />
+          </linearGradient>
+          {hoveredX != null && (
+            <>
+              <clipPath id={`visitors-highlight-clip-${id}`}>
+                <rect x={hoveredX - 56} y={-1000} width={112} height={3000} />
+              </clipPath>
+              <clipPath id={`dau-highlight-clip-${id}`}>
+                <rect x={hoveredX - 56} y={-1000} width={112} height={3000} />
+              </clipPath>
+              <clipPath id={`revenue-highlight-clip-${id}`}>
+                <rect x={hoveredX - 56} y={-1000} width={112} height={3000} />
+              </clipPath>
+            </>
+          )}
+        </defs>
+        <CartesianGrid
+          horizontal
+          vertical={false}
+          strokeDasharray="3 3"
+          stroke="hsl(var(--border))"
+          opacity={0.24}
+        />
+        <ChartTooltip
+          content={<ComposedTooltip />}
+          cursor={{ stroke: "hsl(var(--foreground))", strokeOpacity: hoveredIndex == null ? 0.32 : 0.62, strokeWidth: hoveredIndex == null ? 1 : 1.5 }}
+          offset={20}
+          allowEscapeViewBox={{ x: true, y: true }}
+          wrapperStyle={{ zIndex: 9999, pointerEvents: 'none' }}
+        />
+        <Area
+          type="monotone"
+          dataKey="visitors"
+          yAxisId="visitors"
+          stroke="var(--color-visitors)"
+          strokeWidth={2}
+          fill={`url(#visitors-fill-${id})`}
+          fillOpacity={showVisitors ? (hoveredIndex == null ? 1 : 0.12) : 0}
+          strokeOpacity={showVisitors ? (hoveredIndex == null ? 1 : 0.22) : 0}
+          dot={false}
+          activeDot={showVisitors ? <HighlightedLineDot fill="var(--color-visitors)" /> : false}
+          isAnimationActive={false}
+        />
+        {showVisitors && hoveredIndex != null && hoveredX != null && (
+          <Line
+            type="monotone"
+            dataKey="visitors"
+            yAxisId="visitors"
+            stroke="var(--color-visitors)"
+            strokeWidth={4}
+            strokeOpacity={1}
+            dot={false}
+            activeDot={<HighlightedLineDot fill="var(--color-visitors)" />}
+            isAnimationActive={false}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            style={{ clipPath: `url(#visitors-highlight-clip-${id})` }}
+            legendType="none"
+          />
+        )}
+        <Line
+          type="monotone"
+          dataKey="dau"
+          yAxisId="visitors"
+          stroke="var(--color-dau)"
+          strokeWidth={2}
+          strokeOpacity={hoveredIndex == null ? 0.95 : 0.24}
+          dot={false}
+          activeDot={<HighlightedLineDot fill="var(--color-dau)" />}
+          isAnimationActive={false}
+        />
+        {hoveredIndex != null && hoveredX != null && (
+          <Line
+            type="monotone"
+            dataKey="dau"
+            yAxisId="visitors"
+            stroke="var(--color-dau)"
+            strokeWidth={3}
+            strokeOpacity={1}
+            dot={false}
+            activeDot={<HighlightedLineDot fill="var(--color-dau)" />}
+            isAnimationActive={false}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            style={{ clipPath: `url(#dau-highlight-clip-${id})` }}
+            legendType="none"
+          />
+        )}
+        <Line
+          type="monotone"
+          dataKey="new_cents"
+          yAxisId="revenue"
+          stroke="var(--color-revenue)"
+          strokeWidth={2.25}
+          strokeOpacity={showRevenue ? (hoveredIndex == null ? 1 : 0.2) : 0}
+          strokeDasharray="4 4"
+          dot={false}
+          activeDot={showRevenue ? <HighlightedLineDot fill="var(--color-revenue)" /> : false}
+          isAnimationActive={false}
+        />
+        {showRevenue && hoveredIndex != null && hoveredX != null && (
+          <Line
+            type="monotone"
+            dataKey="new_cents"
+            yAxisId="revenue"
+            stroke="var(--color-revenue)"
+            strokeWidth={3.5}
+            strokeOpacity={1}
+            strokeDasharray="4 4"
+            dot={false}
+            activeDot={<HighlightedLineDot fill="var(--color-revenue)" />}
+            isAnimationActive={false}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            style={{ clipPath: `url(#revenue-highlight-clip-${id})` }}
+            legendType="none"
+          />
+        )}
+        <YAxis
+          yAxisId="visitors"
+          tickLine={false}
+          axisLine={false}
+          width={compact ? 28 : 36}
+          tick={{ fill: "hsl(var(--muted-foreground))", fontSize: compact ? 9 : 10 }}
+          ticks={visitorTicks}
+          domain={[0, visitorsMax]}
+        />
+        <YAxis
+          yAxisId="revenue"
+          orientation="right"
+          hide
+          domain={[0, revenueMax]}
+        />
+        <XAxis
+          dataKey="date"
+          tickLine={false}
+          tickMargin={compact ? 4 : 6}
+          axisLine={false}
+          padding={{ left: 8, right: 8 }}
+          interval={datapoints.length <= 7 ? 0 : "equidistantPreserveStart"}
+          tick={{ fill: "hsl(var(--muted-foreground))", fontSize: compact ? 8 : 10 }}
+          tickFormatter={(value) => {
+            const date = parseChartDate(value);
+            if (!isNaN(date.getTime())) {
+              return `${date.toLocaleDateString("en-US", { month: "short" })} ${date.getDate()}`;
+            }
+            return value;
+          }}
+        />
+      </ComposedChart>
+    </ChartContainer>
+  );
+}
+
+function niceAxisTicks(maxValue: number, count: number): number[] {
+  if (maxValue <= 0) return [0];
+  const rough = maxValue / (count - 1);
+  const magnitude = Math.pow(10, Math.floor(Math.log10(rough)));
+  const residual = rough / magnitude;
+  let step: number;
+  if (residual <= 1.5) {
+    step = magnitude;
+  } else if (residual <= 3) {
+    step = 2 * magnitude;
+  } else if (residual <= 7) {
+    step = 5 * magnitude;
+  } else {
+    step = 10 * magnitude;
+  }
+  const ticks: number[] = [];
+  for (let v = 0; v <= maxValue + step * 0.5; v += step) {
+    ticks.push(Math.round(v));
+  }
+  return ticks;
+}
+
+export type GradientColor = "blue" | "purple" | "green" | "orange" | "slate" | "cyan";
+
+/**
+ * Thin wrapper kept for backward compatibility within this file.
+ * All new code should use DesignAnalyticsCard directly.
+ */
+export function ChartCard({
+  children,
+  className,
+  gradientColor = "blue",
+  chart,
+}: {
+  children: React.ReactNode,
+  className?: string,
+  gradientColor?: GradientColor,
+  chart?: DesignAnalyticsChartConfig,
+}) {
+  return (
+    <DesignAnalyticsCard gradient={gradientColor} className={className} chart={chart}>
+      {children}
+    </DesignAnalyticsCard>
+  );
+}
+
+export function TimeRangeToggle({
+  timeRange,
+  onTimeRangeChange,
+  customDateRange = null,
+  onCustomDateRangeChange,
+}: {
+  timeRange: TimeRange,
+  onTimeRangeChange: (range: TimeRange) => void,
+  customDateRange?: CustomDateRange | null,
+  onCustomDateRangeChange?: (range: CustomDateRange) => void,
+}) {
+  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
+  const supportsCustomDateRange = onCustomDateRangeChange != null;
+  const customDateRangeHandler = onCustomDateRangeChange;
+
+  const options: { id: TimeRange, label: string }[] = [
+    { id: '7d', label: '7d' },
+    { id: '30d', label: '30d' },
+    { id: 'all', label: 'All' },
+    ...(supportsCustomDateRange ? [{ id: 'custom' as const, label: 'Custom' }] : []),
+  ];
+
+  const selectedRange = customDateRange == null ? undefined : {
+    from: customDateRange.from,
+    to: customDateRange.to,
+  };
+  const latestSelectableDate = normalizeToLocalDay(new Date());
+
+  return (
+    <Popover open={isCalendarOpen} onOpenChange={setIsCalendarOpen}>
+      <PopoverAnchor asChild>
+        <div className="inline-flex items-center relative">
+          <DesignPillToggle
+            options={options}
+            selected={timeRange}
+            size="sm"
+            glassmorphic={false}
+            onSelect={(selectedId) => {
+              if (
+                selectedId === '7d' ||
+                selectedId === '30d' ||
+                selectedId === 'all' ||
+                selectedId === 'custom'
+              ) {
+                if (selectedId === "custom" && !supportsCustomDateRange) {
+                  throw new Error("Custom range selected but onCustomDateRangeChange is not provided");
+                }
+
+                if (selectedId === "custom") {
+                  if (customDateRangeHandler == null) {
+                    throw new Error("Custom range selected but onCustomDateRangeChange is not provided");
+                  }
+                  if (customDateRange == null) {
+                    const to = latestSelectableDate;
+                    const from = new Date(to);
+                    from.setDate(from.getDate() - 6);
+                    customDateRangeHandler({ from, to });
+                  }
+                  onTimeRangeChange("custom");
+                  setIsCalendarOpen(true);
+                  return;
+                }
+
+                setIsCalendarOpen(false);
+                onTimeRangeChange(selectedId);
+                return;
+              }
+              throw new Error(`Unsupported time range selected: ${selectedId}`);
+            }}
+          />
+        </div>
+      </PopoverAnchor>
+      {supportsCustomDateRange && (
+        <PopoverContent
+          align="end"
+          sideOffset={8}
+          className={cn(
+            "w-auto p-3",
+            "rounded-xl",
+            "bg-white/95 dark:bg-background/95 backdrop-blur-xl",
+            "border border-black/[0.08] dark:border-white/[0.08]",
+            "ring-1 ring-black/[0.08] dark:ring-white/[0.08]",
+            "shadow-lg",
+          )}
+        >
+          <Calendar
+            mode="range"
+            selected={selectedRange}
+            onSelect={(nextRange) => {
+              if (nextRange?.from == null || nextRange.to == null) {
+                return;
+              }
+
+              const normalizedFrom = normalizeToLocalDay(nextRange.from);
+              const normalizedTo = normalizeToLocalDay(nextRange.to);
+              const normalizedRange = normalizedFrom <= normalizedTo
+                ? { from: normalizedFrom, to: normalizedTo }
+                : { from: normalizedTo, to: normalizedFrom };
+
+              if (customDateRangeHandler == null) {
+                throw new Error("Custom date range update handler is missing");
+              }
+              customDateRangeHandler(normalizedRange);
+              onTimeRangeChange("custom");
+              setIsCalendarOpen(false);
+            }}
+            numberOfMonths={1}
+            defaultMonth={customDateRange?.from}
+            disabled={{ after: latestSelectableDate }}
+            className="!p-0 !border-0"
+            classNames={{
+              months: "relative",
+              month: "space-y-3",
+              month_caption: "flex justify-center items-center h-8",
+              caption_label: "text-sm font-semibold text-foreground",
+              nav: "absolute inset-x-0 top-0 flex items-center justify-between",
+              button_previous: cn(
+                "h-8 w-8 rounded-lg",
+                "inline-flex items-center justify-center",
+                "text-muted-foreground hover:text-foreground",
+                "hover:bg-foreground/[0.05]",
+                "transition-all duration-150 hover:transition-none",
+                "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              ),
+              button_next: cn(
+                "h-8 w-8 rounded-lg",
+                "inline-flex items-center justify-center",
+                "text-muted-foreground hover:text-foreground",
+                "hover:bg-foreground/[0.05]",
+                "transition-all duration-150 hover:transition-none",
+                "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              ),
+              month_grid: "w-full border-collapse mt-4",
+              weekdays: "flex gap-1",
+              weekday: cn(
+                "w-9 h-9 p-0 text-[11px] font-medium",
+                "text-muted-foreground/80",
+                "flex items-center justify-center",
+              ),
+              week: "flex gap-1 mt-1",
+              day: cn(
+                "relative w-9 h-9 p-0 text-center text-sm",
+                "flex items-center justify-center",
+                "focus-within:relative focus-within:z-20",
+              ),
+              day_button: cn(
+                "h-9 w-9 p-0 text-sm font-normal rounded-lg",
+                "inline-flex items-center justify-center",
+                "text-foreground",
+                "hover:bg-foreground/[0.05] hover:text-foreground",
+                "transition-all duration-150 hover:transition-none",
+                "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                "aria-selected:opacity-100",
+              ),
+              selected: "[&>button]:text-foreground",
+              range_start: cn(
+                "range_start",
+                "[&>button]:bg-white/95 dark:[&>button]:bg-white/95",
+                "[&>button]:text-background dark:[&>button]:text-background",
+                "[&>button]:shadow-sm [&>button]:ring-1",
+                "[&>button]:ring-black/[0.12] dark:[&>button]:ring-white/[0.08]",
+                "[&>button]:hover:bg-white [&>button]:hover:text-background",
+              ),
+              range_end: cn(
+                "range_end",
+                "[&>button]:bg-white/95 dark:[&>button]:bg-white/95",
+                "[&>button]:text-background dark:[&>button]:text-background",
+                "[&>button]:shadow-sm [&>button]:ring-1",
+                "[&>button]:ring-black/[0.12] dark:[&>button]:ring-white/[0.08]",
+                "[&>button]:hover:bg-white [&>button]:hover:text-background",
+              ),
+              range_middle: cn(
+                "[&>button]:bg-foreground/[0.05] dark:[&>button]:bg-white/[0.06]",
+                "[&>button]:text-foreground [&>button]:shadow-none [&>button]:ring-0",
+                "[&>button]:hover:bg-foreground/[0.08] dark:[&>button]:hover:bg-white/[0.08]",
+              ),
+              outside: "text-muted-foreground/30 aria-selected:text-muted-foreground/50",
+              disabled: cn(
+                "pointer-events-none text-muted-foreground/45 dark:text-muted-foreground/30",
+                "[&>button]:text-muted-foreground/45 dark:[&>button]:text-muted-foreground/30",
+                "[&>button]:opacity-60 dark:[&>button]:opacity-40",
+                "[&>button]:bg-foreground/[0.02] dark:[&>button]:bg-transparent",
+                "[&>button]:cursor-not-allowed",
+                "[&>button]:hover:bg-foreground/[0.02] dark:[&>button]:hover:bg-transparent",
+                "[&>button]:hover:text-muted-foreground/45 dark:[&>button]:hover:text-muted-foreground/30",
+              ),
+              hidden: "invisible",
+            }}
+          />
+        </PopoverContent>
+      )}
+    </Popover>
+  );
+}
+
+export function TabbedMetricsCard({
+  config,
+  chartData,
+  stackedChartData,
+  listData,
+  listTitle,
+  gradientColor = "blue",
+  projectId,
+  router,
+  height,
+  compact = false,
+  timeRange,
+  customDateRange = null,
+  totalAllTime,
+  showTotal = false,
+  stackedLegendItems,
+}: {
+  config: LineChartDisplayConfig,
+  chartData: DataPoint[],
+  stackedChartData?: StackedDataPoint[],
+  listData: UserListItem[],
+  listTitle: string,
+  gradientColor?: GradientColor,
+  projectId: string,
+  router: ReturnType<typeof useRouter>,
+  height?: number,
+  compact?: boolean,
+  timeRange: TimeRange,
+  customDateRange?: CustomDateRange | null,
+  totalAllTime?: number,
+  showTotal?: boolean,
+  stackedLegendItems?: Array<{ key: string, label: string, color: string }>,
+}) {
+  const [view, setView] = useState<'chart' | 'list'>('chart');
+
+  const filteredDatapoints = filterDatapointsByTimeRange(chartData, timeRange, customDateRange);
+  const filteredStackedDatapoints = stackedChartData ? filterStackedDatapointsByTimeRange(stackedChartData, timeRange, customDateRange) : null;
+
+  // Calculate total for the selected time range
+  const total = filteredDatapoints.reduce((sum, point) => sum + point.activity, 0);
+
+  // For "all" time range, use totalAllTime if provided (which includes data beyond 30 days)
+  const displayTotal = timeRange === 'all' && totalAllTime !== undefined ? totalAllTime : total;
+
+  const hoverAccentColors: Record<GradientColor, string> = {
+    blue: "hover:bg-blue-500/[0.06]",
+    purple: "hover:bg-purple-500/[0.06]",
+    green: "hover:bg-emerald-500/[0.06]",
+    orange: "hover:bg-orange-500/[0.06]",
+    slate: "hover:bg-slate-500/[0.04]",
+    cyan: "hover:bg-cyan-500/[0.06]",
+  };
+
+  const hoverAccentClass = hoverAccentColors[gradientColor];
+  const tabsGradient: "blue" | "cyan" | "purple" | "green" | "orange" | "default" = gradientColor === "slate" ? "default" : gradientColor;
+
+  const listWindow = useInfiniteListWindow(listData.length, view === "list" ? "list" : "chart", view === "list");
+
+  return (
+    <ChartCard
+      className="h-full min-h-0 flex flex-col"
+      gradientColor={gradientColor}
+      chart={{
+        type: view === "chart" ? (filteredStackedDatapoints != null ? "stacked-bar" : "bar") : "none",
+        tooltipType: view === "chart" ? (filteredStackedDatapoints != null ? "stacked" : "default") : "none",
+        highlightMode: view === "chart" ? "bar-segment" : "none",
+        averages: filteredStackedDatapoints != null ? { movingAverage: true, sevenDayAverage: true } : undefined,
+      }}
+    >
+      <div className={cn("flex items-center justify-between border-b border-foreground/[0.05]", compact ? "px-4" : "px-5")}>
+        <DesignCategoryTabs
+          categories={[
+            { id: "chart", label: config.name },
+            { id: "list", label: listTitle },
+          ]}
+          selectedCategory={view}
+          onSelect={(selectedId) => {
+            if (selectedId === "chart" || selectedId === "list") {
+              setView(selectedId);
+              return;
+            }
+            throw new Error(`Unsupported metrics tab selected: ${selectedId}`);
+          }}
+          showBadge={false}
+          size="sm"
+          glassmorphic={false}
+          gradient={tabsGradient}
+          className="flex-1 min-w-0 border-0 [&>button]:rounded-none [&>button]:px-3 [&>button]:py-3.5 [&>button]:text-xs"
+        />
+
+        {view === 'chart' && showTotal && (
+          <span className="text-sm font-semibold text-foreground tabular-nums">
+            {displayTotal.toLocaleString()}
+          </span>
+        )}
+      </div>
+
+      {config.description && view === 'chart' && (
+        <div className={cn("text-xs text-muted-foreground", compact ? "px-4 pt-3" : "px-5 pt-4")}>
+          {config.description}
+        </div>
+      )}
+
+      {filteredStackedDatapoints != null && view === 'chart' && (
+        <DesignChartLegend
+          items={(stackedLegendItems ?? [
+            { key: 'new',         label: 'New',         color: 'hsl(152, 38%, 52%)' },
+            { key: 'reactivated', label: 'Reactivated', color: 'hsl(36,  55%, 58%)'  },
+            { key: 'retained',    label: 'Retained',    color: 'hsl(221, 42%, 55%)' },
+          ])}
+          compact={compact}
+        />
+      )}
+
+      <div className={cn(
+        view === 'chart'
+          ? (compact ? "px-4 pt-2 pb-1" : "px-5 pt-3 pb-2")
+          : (compact ? "px-4 pt-1 pb-2" : "px-5 pt-2 pb-3"),
+        "flex flex-col flex-1 min-h-0",
+        view === 'chart' ? "overflow-visible" : "overflow-hidden"
+      )}>
         {view === 'chart' ? (
-          filteredDatapoints.length === 0 ? (
+          filteredStackedDatapoints != null ? (
+            filteredStackedDatapoints.length === 0 ? (
+              <div className="flex-1 flex items-center justify-center">
+                <Typography variant="secondary" className="text-xs text-center">
+                  No data available for this period
+                </Typography>
+              </div>
+            ) : (
+              <StackedBarChartDisplay
+                datapoints={filteredStackedDatapoints}
+                height={height}
+                compact={compact}
+              />
+            )
+          ) : filteredDatapoints.length === 0 ? (
             <div className="flex-1 flex items-center justify-center">
               <Typography variant="secondary" className="text-xs text-center">
                 No data available for this period
@@ -352,7 +1313,7 @@ export function TabbedMetricsCard({
             />
           )
         ) : (
-          <div className="flex-1 overflow-y-auto min-h-0 pr-1 -mr-1">
+          <div ref={listWindow.scrollRef} className="flex-1 overflow-y-auto min-h-0">
             {listData.length === 0 ? (
               <div className="flex items-center justify-center h-full">
                 <Typography variant="secondary" className="text-xs">
@@ -360,44 +1321,63 @@ export function TabbedMetricsCard({
                 </Typography>
               </div>
             ) : (
-              <div className="space-y-0.5">
-                {listData.map((user) => (
-                  <button
-                    key={user.id}
-                    onClick={() => router.push(urlString`/projects/${projectId}/users/${user.id}`)}
-                    className={cn(
-                      "w-full flex items-center gap-3 p-2.5 rounded-xl transition-all duration-150 hover:transition-none text-left group",
-                      hoverAccentClass
-                    )}
-                  >
-                    <div className="shrink-0">
-                      <UserAvatar
-                        user={{
-                          profileImageUrl: user.profile_image_url ?? undefined,
-                          displayName: user.display_name ?? undefined,
-                          primaryEmail: user.primary_email ?? undefined,
-                        }}
-                        size={32}
-                        border
-                      />
-                    </div>
-                    <div className="flex-1 min-w-0">
-                      <div className="text-sm font-medium truncate text-foreground group-hover:text-foreground transition-colors duration-150 group-hover:transition-none">
-                        {user.display_name || user.primary_email || 'Anonymous User'}
+              <div className="divide-y divide-foreground/[0.04]">
+                {listData.slice(0, listWindow.visibleCount).map((user) => {
+                  const displayName = user.display_name || user.primary_email || 'Anonymous User';
+                  const secondaryEmail = user.display_name && user.primary_email ? user.primary_email : null;
+                  const timeLabel = config.name === 'Daily Active Users'
+                    ? user.last_active_at_millis
+                      ? fromNow(new Date(user.last_active_at_millis))
+                      : null
+                    : user.signed_up_at_millis
+                      ? fromNow(new Date(user.signed_up_at_millis))
+                      : null;
+
+                  return (
+                    <button
+                      key={user.id}
+                      onClick={() => router.push(`/projects/${projectId}/users/${user.id}`)}
+                      className={cn(
+                        "w-full flex items-center gap-3 px-1 py-2.5 transition-all duration-150 hover:transition-none text-left group",
+                        hoverAccentClass
+                      )}
+                    >
+                      <div className="shrink-0">
+                        <UserAvatar
+                          user={{
+                            profileImageUrl: user.profile_image_url ?? undefined,
+                            displayName: user.display_name ?? undefined,
+                            primaryEmail: user.primary_email ?? undefined,
+                          }}
+                          size={30}
+                          border
+                        />
                       </div>
-                      <div className="text-[11px] text-muted-foreground truncate flex items-center gap-1.5 mt-0.5">
-                        <span>
-                          {config.name === 'Daily Active Users'
-                            ? user.last_active_at_millis
-                              ? `Active ${fromNow(new Date(user.last_active_at_millis))}`
-                              : 'Never active'
-                            : `Signed up ${fromNow(new Date(user.signed_up_at_millis))}`
-                          }
-                        </span>
+                      <div className="flex-1 min-w-0">
+                        <div className="text-[12.5px] font-medium truncate text-foreground leading-tight">
+                          {displayName}
+                        </div>
+                        {secondaryEmail && (
+                          <div className="text-[11px] text-muted-foreground truncate leading-tight mt-0.5">
+                            {secondaryEmail}
+                          </div>
+                        )}
                       </div>
-                    </div>
-                  </button>
-                ))}
+                      {timeLabel && (
+                        <div className="shrink-0 text-[10.5px] text-muted-foreground tabular-nums">
+                          {timeLabel}
+                        </div>
+                      )}
+                    </button>
+                  );
+                })}
+                {listWindow.hasMore && (
+                  <div ref={listWindow.sentinelRef} className="py-2 text-center">
+                    <Typography variant="secondary" className="text-[10px]">
+                      Loading more...
+                    </Typography>
+                  </div>
+                )}
               </div>
             )}
           </div>
@@ -415,6 +1395,7 @@ export function LineChartDisplay({
   compact = false,
   gradientColor = "blue",
   timeRange,
+  customDateRange = null,
 }: {
   config: LineChartDisplayConfig,
   datapoints: DataPoint[],
@@ -423,11 +1404,20 @@ export function LineChartDisplay({
   compact?: boolean,
   gradientColor?: GradientColor,
   timeRange: TimeRange,
+  customDateRange?: CustomDateRange | null,
 }) {
-  const filteredDatapoints = filterDatapointsByTimeRange(datapoints, timeRange);
+  const filteredDatapoints = filterDatapointsByTimeRange(datapoints, timeRange, customDateRange);
 
   return (
-    <ChartCard className={className} gradientColor={gradientColor}>
+    <ChartCard
+      className={className}
+      gradientColor={gradientColor}
+      chart={{
+        type: "bar",
+        tooltipType: "default",
+        highlightMode: "bar-segment",
+      }}
+    >
       <div className={compact ? "p-4 pb-3" : "p-5 pb-4"}>
         <div className="flex items-center justify-between">
           <div className="space-y-1">
@@ -450,12 +1440,427 @@ export function LineChartDisplay({
             </Typography>
           </div>
         ) : (
-          <ActivityBarChart
-            datapoints={filteredDatapoints}
-            config={config}
-            height={height}
-            compact={compact}
-          />
+          <ActivityBarChart
+            datapoints={filteredDatapoints}
+            config={config}
+            height={height}
+            compact={compact}
+          />
+        )}
+      </div>
+    </ChartCard>
+  );
+}
+
+// ── StatCard ─────────────────────────────────────────────────────────────────
+
+export type StatCardProps = {
+  label: string,
+  value: number | string,
+  delta?: number,
+  deltaLabel?: string,
+  icon?: React.ReactNode,
+  gradientColor?: GradientColor,
+  className?: string,
+  compact?: boolean,
+};
+
+export function StatCard({
+  label,
+  value,
+  delta,
+  deltaLabel,
+  icon,
+  gradientColor = "blue",
+  className,
+  compact = false,
+}: StatCardProps) {
+  const isPositive = delta !== undefined && delta > 0;
+  const isNegative = delta !== undefined && delta < 0;
+
+  return (
+    <ChartCard
+      gradientColor={gradientColor}
+      className={cn("h-full", className)}
+      chart={{ type: "line", tooltipType: "default", highlightMode: "series-hover" }}
+    >
+      <div className={cn("flex flex-col gap-1 h-full justify-between", compact ? "p-4" : "p-5")}>
+        <div className="flex items-start justify-between gap-2">
+          <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider leading-tight">
+            {label}
+          </span>
+          {icon && (
+            <span className="text-muted-foreground/60 shrink-0 mt-0.5">{icon}</span>
+          )}
+        </div>
+        <div className="mt-auto">
+          <div className={cn("font-bold tabular-nums text-foreground leading-none", compact ? "text-2xl" : "text-3xl")}>
+            {typeof value === 'number' ? value.toLocaleString() : value}
+          </div>
+          {delta !== undefined && (
+            <div className={cn(
+              "mt-1.5 text-xs font-medium flex items-center gap-1",
+              isPositive ? "text-emerald-600 dark:text-emerald-400"
+                : isNegative ? "text-red-500 dark:text-red-400"
+                  : "text-muted-foreground"
+            )}>
+              <span>{isPositive ? '↑' : isNegative ? '↓' : '→'}</span>
+              <span>
+                {isPositive ? '+' : ''}{delta}{deltaLabel ?? ''}
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+    </ChartCard>
+  );
+}
+
+// ── RankedListCard ────────────────────────────────────────────────────────────
+
+export type RankedListItem = {
+  label: string,
+  count: number,
+  color?: string,
+};
+
+export function RankedListCard({
+  title,
+  items,
+  gradientColor = "blue",
+  className,
+  compact = false,
+  emptyMessage = 'No data available',
+}: {
+  title: string,
+  items: RankedListItem[],
+  gradientColor?: GradientColor,
+  className?: string,
+  compact?: boolean,
+  emptyMessage?: string,
+}) {
+  const max = Math.max(...items.map(i => i.count), 1);
+
+  return (
+    <ChartCard gradientColor={gradientColor} className={cn("h-full", className)}>
+      <div className={cn("border-b border-foreground/[0.05]", compact ? "px-4 py-3" : "px-5 py-4")}>
+        <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">{title}</span>
+      </div>
+      <div className={cn("flex flex-col gap-2 flex-1 min-h-0 overflow-y-auto", compact ? "p-4 pt-3" : "p-5 pt-4")}>
+        {items.length === 0 ? (
+          <div className="flex items-center justify-center flex-1">
+            <Typography variant="secondary" className="text-xs">{emptyMessage}</Typography>
+          </div>
+        ) : (
+          items.map((item, i) => (
+            <div key={i} className="flex items-center gap-2.5">
+              <span className="text-[10px] font-mono text-muted-foreground w-4 shrink-0 text-right">{i + 1}</span>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center justify-between mb-0.5">
+                  <span className={cn("text-foreground font-medium truncate", compact ? "text-xs" : "text-sm")}>{item.label}</span>
+                  <span className={cn("text-muted-foreground tabular-nums shrink-0 ml-2", compact ? "text-[10px]" : "text-xs")}>{item.count.toLocaleString()}</span>
+                </div>
+                <div className="h-1.5 rounded-full bg-foreground/[0.05] overflow-hidden">
+                  <div
+                    className="h-full rounded-full"
+                    style={{
+                      width: `${(item.count / max) * 100}%`,
+                      backgroundColor: item.color ?? 'hsl(var(--primary))',
+                      opacity: 0.7,
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </ChartCard>
+  );
+}
+
+// ── StatusBreakdownCard ───────────────────────────────────────────────────────
+
+export type StatusBreakdownItem = {
+  label: string,
+  count: number,
+  color: string,
+};
+
+export function StatusBreakdownCard({
+  title,
+  items,
+  gradientColor = "blue",
+  className,
+  compact = false,
+  emptyMessage = 'No data',
+}: {
+  title: string,
+  items: StatusBreakdownItem[],
+  gradientColor?: GradientColor,
+  className?: string,
+  compact?: boolean,
+  emptyMessage?: string,
+}) {
+  const total = items.reduce((s, i) => s + i.count, 0);
+
+  return (
+    <ChartCard gradientColor={gradientColor} className={cn("h-full", className)}>
+      <div className={cn("border-b border-foreground/[0.05]", compact ? "px-4 py-3" : "px-5 py-4")}>
+        <div className="flex items-center justify-between">
+          <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">{title}</span>
+          {total > 0 && (
+            <span className="text-xs font-medium tabular-nums text-muted-foreground">{total.toLocaleString()}</span>
+          )}
+        </div>
+      </div>
+      <div className={cn("flex-1 min-h-0 flex flex-col", compact ? "p-4 pt-3 gap-2" : "p-5 pt-4 gap-2.5")}>
+        {items.length === 0 || total === 0 ? (
+          <div className="flex items-center justify-center flex-1">
+            <Typography variant="secondary" className="text-xs">{emptyMessage}</Typography>
+          </div>
+        ) : (
+          <>
+            {/* Stacked bar */}
+            <div className="flex h-2 rounded-full overflow-hidden gap-px">
+              {items.filter(i => i.count > 0).map((item, idx) => (
+                <div
+                  key={idx}
+                  style={{ width: `${(item.count / total) * 100}%`, backgroundColor: item.color }}
+                />
+              ))}
+            </div>
+            {/* Legend */}
+            <div className="flex flex-col gap-1.5 mt-1">
+              {items.filter(i => i.count > 0).map((item, idx) => (
+                <div key={idx} className="flex items-center justify-between">
+                  <div className="flex items-center gap-1.5">
+                    <div className="h-2 w-2 rounded-full shrink-0" style={{ backgroundColor: item.color }} />
+                    <span className={cn("text-foreground", compact ? "text-[11px]" : "text-xs")}>{item.label}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className={cn("text-muted-foreground tabular-nums", compact ? "text-[10px]" : "text-[11px]")}>
+                      {((item.count / total) * 100).toFixed(0)}%
+                    </span>
+                    <span className={cn("font-medium text-foreground tabular-nums", compact ? "text-[11px]" : "text-xs")}>
+                      {item.count.toLocaleString()}
+                    </span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+    </ChartCard>
+  );
+}
+
+// ── AlertListCard ─────────────────────────────────────────────────────────────
+
+export type AlertItem = {
+  label: string,
+  detail?: string,
+  severity: 'error' | 'warning' | 'info',
+};
+
+export function AlertListCard({
+  title,
+  alerts,
+  gradientColor = "orange",
+  className,
+  compact = false,
+  emptyMessage = 'No issues detected',
+}: {
+  title: string,
+  alerts: AlertItem[],
+  gradientColor?: GradientColor,
+  className?: string,
+  compact?: boolean,
+  emptyMessage?: string,
+}) {
+  const severityColors = {
+    error: 'bg-red-500/[0.12] text-red-600 dark:text-red-400 ring-red-500/20',
+    warning: 'bg-amber-500/[0.12] text-amber-600 dark:text-amber-400 ring-amber-500/20',
+    info: 'bg-blue-500/[0.08] text-blue-600 dark:text-blue-400 ring-blue-500/20',
+  };
+  const severityDot = {
+    error: 'bg-red-500',
+    warning: 'bg-amber-500',
+    info: 'bg-blue-500',
+  };
+
+  return (
+    <ChartCard gradientColor={gradientColor} className={cn("h-full", className)}>
+      <div className={cn("border-b border-foreground/[0.05]", compact ? "px-4 py-3" : "px-5 py-4")}>
+        <div className="flex items-center justify-between">
+          <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">{title}</span>
+          {alerts.length > 0 && (
+            <span className={cn(
+              "text-[10px] font-medium px-2 py-0.5 rounded-full ring-1",
+              alerts.some(a => a.severity === 'error') ? severityColors.error
+                : alerts.some(a => a.severity === 'warning') ? severityColors.warning
+                  : severityColors.info
+            )}>
+              {alerts.length}
+            </span>
+          )}
+        </div>
+      </div>
+      <div className={cn("flex-1 min-h-0 overflow-y-auto flex flex-col", compact ? "p-4 pt-3 gap-1.5" : "p-5 pt-4 gap-2")}>
+        {alerts.length === 0 ? (
+          <div className="flex items-center justify-center flex-1 gap-1.5 text-emerald-600 dark:text-emerald-400">
+            <span className="text-base">✓</span>
+            <Typography className="text-xs font-medium">{emptyMessage}</Typography>
+          </div>
+        ) : (
+          alerts.map((alert, idx) => (
+            <div key={idx} className={cn(
+              "flex items-start gap-2.5 rounded-xl px-3 py-2.5 ring-1",
+              severityColors[alert.severity]
+            )}>
+              <div className={cn("h-2 w-2 rounded-full shrink-0 mt-0.5", severityDot[alert.severity])} />
+              <div className="min-w-0">
+                <div className={cn("font-medium leading-snug", compact ? "text-xs" : "text-sm")}>{alert.label}</div>
+                {alert.detail && (
+                  <div className="text-[11px] opacity-80 mt-0.5">{alert.detail}</div>
+                )}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </ChartCard>
+  );
+}
+
+// ── CorrelationCard ───────────────────────────────────────────────────────────
+
+export type CorrelationSeries = {
+  key: string,
+  label: string,
+  color: string,
+  dataPoints: DataPoint[],
+};
+
+export function CorrelationCard({
+  title,
+  series,
+  gradientColor = "purple",
+  className,
+  height = 180,
+  compact = false,
+  timeRange,
+  customDateRange = null,
+}: {
+  title: string,
+  series: CorrelationSeries[],
+  gradientColor?: GradientColor,
+  className?: string,
+  height?: number,
+  compact?: boolean,
+  timeRange: TimeRange,
+  customDateRange?: CustomDateRange | null,
+}) {
+  // Merge all series data points by date
+  const dateSet = new Set<string>();
+  for (const s of series) {
+    for (const d of s.dataPoints) dateSet.add(d.date);
+  }
+
+  const sortedDates = [...dateSet].sort();
+  const filteredDates = filterStackedDatapointsByTimeRange(
+    sortedDates.map((date) => ({ date })),
+    timeRange,
+    customDateRange,
+  ).map((item) => item.date);
+
+  const merged = filteredDates.map(date => {
+    const row: Record<string, number | string> = { date };
+    for (const s of series) {
+      const pt = s.dataPoints.find(d => d.date === date);
+      row[s.key] = pt?.activity ?? 0;
+    }
+    return row;
+  });
+
+  const chartConfig: ChartConfig = Object.fromEntries(
+    series.map(s => [s.key, { label: s.label, color: s.color }])
+  );
+
+  return (
+    <ChartCard gradientColor={gradientColor} className={cn("h-full", className)}>
+      <div className={cn("border-b border-foreground/[0.05]", compact ? "px-4 py-3" : "px-5 py-4")}>
+        <div className="flex items-center justify-between gap-2 flex-wrap">
+          <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">{title}</span>
+          <div className="flex items-center gap-3 flex-wrap">
+            {series.map(s => (
+              <div key={s.key} className="flex items-center gap-1.5">
+                <div className="h-2 w-2 rounded-full" style={{ backgroundColor: s.color }} />
+                <span className="text-[11px] text-muted-foreground">{s.label}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      <div className={cn("flex-1 min-h-0 overflow-visible", compact ? "p-4 pt-3" : "p-5 pt-4")}>
+        {merged.length === 0 ? (
+          <div className="flex items-center justify-center h-full">
+            <Typography variant="secondary" className="text-xs">No data available</Typography>
+          </div>
+        ) : (
+          <ChartContainer
+            config={chartConfig}
+            className="w-full aspect-auto flex-1 min-h-0 !overflow-visible [&_.recharts-wrapper]:!overflow-visible"
+            maxHeight={height}
+          >
+            <LineChart data={merged} margin={{ top: 8, right: 8, left: -10, bottom: 0 }}>
+              <CartesianGrid
+                horizontal
+                vertical={false}
+                strokeDasharray="3 3"
+                stroke="hsl(var(--border))"
+                opacity={0.3}
+              />
+              <XAxis
+                dataKey="date"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={6}
+                interval="equidistantPreserveStart"
+                tick={{ fill: "hsl(var(--muted-foreground))", fontSize: compact ? 8 : 10 }}
+                tickFormatter={(value) => {
+                  const date = parseChartDate(value);
+                  if (isNaN(date.getTime())) return value;
+                  return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+                }}
+              />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                width={compact ? 30 : 40}
+                tick={{ fill: "hsl(var(--muted-foreground))", fontSize: compact ? 9 : 11 }}
+              />
+              <ChartTooltip
+                content={<ChartTooltipContent className={`${tooltipSurfaceClass} px-3.5 py-2.5`} />}
+                cursor={{ strokeDasharray: '3 3', stroke: "hsl(var(--border))" }}
+                offset={20}
+                allowEscapeViewBox={{ x: true, y: true }}
+                wrapperStyle={{ zIndex: 9999, pointerEvents: 'none' }}
+              />
+              {series.map(s => (
+                <Line
+                  key={s.key}
+                  type="monotone"
+                  dataKey={s.key}
+                  stroke={s.color}
+                  strokeWidth={1.5}
+                  dot={false}
+                  isAnimationActive={false}
+                />
+              ))}
+            </LineChart>
+          </ChartContainer>
         )}
       </div>
     </ChartCard>
@@ -510,7 +1915,11 @@ export function DonutChartDisplay({
   const outerRadius = compact ? 55 : 85;
 
   return (
-    <ChartCard className={className} gradientColor={gradientColor}>
+    <ChartCard
+      className={className}
+      gradientColor={gradientColor}
+      chart={{ type: "donut", tooltipType: "donut", highlightMode: "dot-hover" }}
+    >
       <div className={compact ? "p-4 pb-3" : "p-5 pb-4"}>
         <div className="flex items-center justify-between">
           <div className="space-y-1">
@@ -547,7 +1956,7 @@ export function DonutChartDisplay({
                   wrapperStyle={{ zIndex: 9999, pointerEvents: 'none' }}
                   content={
                     <ChartTooltipContent
-                      className="rounded-xl bg-background/95 px-3.5 py-2.5 shadow-lg backdrop-blur-xl ring-1 ring-foreground/[0.08]"
+                      className={`${tooltipSurfaceClass} px-3.5 py-2.5`}
                       hideIndicator
                       nameKey="method"
                       formatter={(value, _name, item) => {
@@ -623,3 +2032,657 @@ export function DonutChartDisplay({
     </ChartCard>
   );
 }
+
+// ── Email stacked bar chart (ok · error · in_progress per day) ───────────────
+
+export type EmailStackedDataPoint = {
+  date: string,
+  ok: number,
+  error: number,
+  in_progress: number,
+};
+
+const emailStackedChartConfig: ChartConfig = {
+  ok: { label: "Delivered", color: "hsl(168, 38%, 48%)" },
+  error: { label: "Error",     color: "hsl(355, 45%, 52%)" },
+  in_progress: { label: "Sending",   color: "hsl(213, 38%, 52%)" },
+};
+
+const EmailStackedTooltip = ({ active, payload }: TooltipProps<number, string>) => {
+  if (!active || !payload?.length) return null;
+  const row = payload[0].payload as EmailStackedDataPoint & { avg7d?: number };
+  const date = parseChartDate(row.date);
+  const formattedDate = !isNaN(date.getTime())
+    ? date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+    : row.date;
+  const total = row.ok + row.error + row.in_progress;
+  const segments: Array<{ key: keyof typeof emailStackedChartConfig, value: number }> = [
+    { key: 'ok',          value: row.ok },
+    { key: 'error',       value: row.error },
+    { key: 'in_progress', value: row.in_progress },
+  ];
+  return (
+    <div className={`${tooltipSurfaceClass} px-3.5 py-2.5`} style={{ zIndex: 9999 }}>
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center justify-between gap-6">
+          <span className="text-[11px] font-medium text-muted-foreground tracking-wide">{formattedDate}</span>
+          <span className="text-[11px] font-semibold tabular-nums text-foreground">{total} total</span>
+        </div>
+        {segments.filter(s => s.value > 0).map((seg) => (
+          <div key={seg.key} className="flex items-center gap-2.5">
+            <span
+              className="h-2 w-2 rounded-full ring-2 ring-white/20"
+              style={{ backgroundColor: `var(--color-${seg.key})` }}
+            />
+            <span className="text-[11px] text-muted-foreground">
+              {emailStackedChartConfig[seg.key].label}
+            </span>
+            <span className="ml-auto font-mono text-xs font-semibold tabular-nums text-foreground">
+              {seg.value.toLocaleString()}
+            </span>
+          </div>
+        ))}
+        {row.avg7d != null && (
+          <div className="border-t border-foreground/[0.06] pt-2">
+            <div className="flex items-center justify-between gap-6">
+              <span className="text-[11px] text-muted-foreground">7-day avg</span>
+              <span className="font-mono text-[11px] font-medium tabular-nums text-foreground">
+                {Math.round(row.avg7d).toLocaleString()}
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export function EmailStackedBarChartDisplay({
+  datapoints,
+  height,
+  compact = false,
+}: {
+  datapoints: EmailStackedDataPoint[],
+  height?: number,
+  compact?: boolean,
+}) {
+  const id = useId();
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  const windowSize = Math.max(4, Math.round(datapoints.length / 2.5));
+  const totals = datapoints.map(p => p.ok + p.error + p.in_progress);
+  const avgValues = rollingAvg(totals, windowSize);
+  const sevenDayAvgs = totals.map((_, i) => sevenDayAvg(totals, i));
+  const chartData = datapoints.map((p, i) => {
+    const total = totals[i];
+    const rawAvg = avgValues[i];
+    const movingAvg = total > 0 && rawAvg != null
+      ? Math.min(total * 0.9, Math.max(total * 0.35, rawAvg))
+      : null;
+    const isHighlightedAvg = hoveredIndex != null && i <= hoveredIndex && i >= hoveredIndex - 6;
+    return {
+      ...p,
+      movingAvg,
+      avg7d: sevenDayAvgs[i],
+      highlightedAvg: isHighlightedAvg ? movingAvg : null,
+    };
+  });
+
+  const movingAvgConfig: ChartConfig = {
+    ...emailStackedChartConfig,
+    movingAvg: { label: "Moving avg", color: "hsl(var(--foreground))" },
+  };
+
+  return (
+    <ChartContainer
+      config={movingAvgConfig}
+      className="w-full flex-1 min-h-0 !overflow-visible [&_.recharts-wrapper]:!overflow-visible"
+      maxHeight={height}
+    >
+      <ComposedChart
+        id={id}
+        accessibilityLayer
+        data={chartData}
+        margin={{ top: 10, right: 10, left: -10, bottom: 0 }}
+        onMouseMove={(state) => updateHoveredIndexFromChartState(state, chartData.length, setHoveredIndex)}
+        onMouseLeave={() => setHoveredIndex(null)}
+      >
+        <CartesianGrid
+          horizontal
+          vertical={false}
+          strokeDasharray="3 3"
+          stroke="hsl(var(--border))"
+          opacity={0.3}
+        />
+        <ChartTooltip
+          content={<EmailStackedTooltip />}
+          cursor={{ fill: "hsl(var(--muted-foreground))", opacity: hoveredIndex == null ? 0.08 : 0.12, radius: 4 }}
+          offset={20}
+          allowEscapeViewBox={{ x: true, y: true }}
+          wrapperStyle={{ zIndex: 9999, pointerEvents: 'none' }}
+        />
+        {/* Stack order: ok (bottom) → in_progress → error (top). Only the topmost segment per bar gets rounded corners. */}
+        {(["ok", "in_progress", "error"] as const).map((dataKey) => {
+          const isTopmost = (entry: EmailStackedDataPoint) => {
+            if (entry.error > 0) return dataKey === "error";
+            if (entry.in_progress > 0) return dataKey === "in_progress";
+            return dataKey === "ok";
+          };
+          const colorVar = dataKey === "ok" ? "ok" : dataKey === "in_progress" ? "in_progress" : "error";
+          return (
+            <Bar key={dataKey} dataKey={dataKey} stackId="split" fill={`var(--color-${colorVar})`} radius={[4, 4, 0, 0]} isAnimationActive={false}>
+              {datapoints.map((entry, index) => {
+                const baseOpacity = isWeekend(parseChartDate(entry.date)) ? 0.5 : 1;
+                const isActiveBar = hoveredIndex === index;
+                return (
+                  <Cell
+                    key={`${dataKey}-${index}`}
+                    // Recharts supports tuple radius for bar cells, but the Cell prop type is still SVG-typed.
+                    // @ts-expect-error tuple radius is intentional for top-segment rounding.
+                    radius={isTopmost(entry) ? [4, 4, 0, 0] : [0, 0, 0, 0]}
+                    opacity={getDimmedOpacity(baseOpacity, index, hoveredIndex)}
+                    stroke={isActiveBar ? "hsl(var(--background))" : undefined}
+                    strokeWidth={isActiveBar ? 1 : 0}
+                  />
+                );
+              })}
+            </Bar>
+          );
+        })}
+        <Line
+          dataKey="movingAvg"
+          type="natural"
+          stroke="hsl(var(--foreground))"
+          strokeWidth={5}
+          strokeOpacity={hoveredIndex == null ? 0.14 : 0.05}
+          strokeDasharray="2.5 3.5"
+          dot={false}
+          activeDot={false}
+          isAnimationActive={false}
+          connectNulls={false}
+          legendType="none"
+        />
+        <Line
+          dataKey="movingAvg"
+          type="natural"
+          stroke="hsl(var(--foreground))"
+          strokeWidth={2.1}
+          strokeOpacity={hoveredIndex == null ? 0.85 : 0.28}
+          strokeDasharray="2.5 3.5"
+          dot={false}
+          activeDot={{ r: 3.5, fill: "hsl(var(--foreground))", stroke: "hsl(var(--background))", strokeWidth: 1.5 }}
+          isAnimationActive={false}
+          connectNulls={false}
+          legendType="none"
+        />
+        {hoveredIndex != null && (
+          <Line
+            dataKey="highlightedAvg"
+            type="natural"
+            stroke="hsl(var(--foreground))"
+            strokeWidth={3}
+            strokeOpacity={1}
+            strokeDasharray="2.5 3.5"
+            dot={false}
+            activeDot={{ r: 3.5, fill: "hsl(var(--foreground))", stroke: "hsl(var(--background))", strokeWidth: 1.5 }}
+            isAnimationActive={false}
+            connectNulls={false}
+            legendType="none"
+          />
+        )}
+        <XAxis
+          dataKey="date"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={compact ? 6 : 8}
+          tick={{ fontSize: compact ? 9 : 11, fill: "hsl(var(--muted-foreground))" }}
+          tickFormatter={(value: string) => {
+            const d = parseChartDate(value);
+            return isNaN(d.getTime()) ? value : d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+          }}
+        />
+        <YAxis
+          tickLine={false}
+          axisLine={false}
+          tickMargin={4}
+          tick={{ fontSize: compact ? 9 : 11, fill: "hsl(var(--muted-foreground))" }}
+          allowDecimals={false}
+          width={28}
+        />
+      </ComposedChart>
+    </ChartContainer>
+  );
+}
+
+// ── Visitors hover chart (page views + avg line) ────────────────────────────
+
+const visitorsHoverChartConfig: ChartConfig = {
+  page_views: {
+    label: "Page Views",
+    theme: { light: "hsl(210, 84%, 64%)", dark: "hsl(210, 84%, 72%)" },
+  },
+  movingAvg: {
+    label: "Moving avg",
+    color: "hsl(var(--foreground))",
+  },
+};
+
+function VisitorsHoverTooltip({ active, payload }: TooltipProps<number, string>) {
+  if (!active || !payload?.length) return null;
+
+  const row = payload[0]?.payload as VisitorsHoverDataPoint | undefined;
+  if (!row) return null;
+
+  const date = parseChartDate(row.date);
+  const formattedDate = !isNaN(date.getTime())
+    ? date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+    : row.date;
+
+  const topCountries = (row.top_countries ?? []).slice(0, 3);
+
+  return (
+    <div className={`${tooltipSurfaceClass} px-3.5 py-2.5`} style={{ zIndex: 9999 }}>
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center justify-between gap-6">
+          <span className="text-[11px] font-medium text-muted-foreground tracking-wide">{formattedDate}</span>
+          <span className="text-[11px] font-semibold tabular-nums text-foreground">
+            {row.page_views.toLocaleString()} total
+          </span>
+        </div>
+        <div className="flex flex-col gap-1.5">
+          <div className="flex items-center gap-2.5">
+            <span className="h-2 w-2 rounded-full ring-2 ring-white/20" style={{ backgroundColor: "var(--color-page_views)" }} />
+            <span className="text-[11px] text-muted-foreground">Page Views</span>
+            <span className="ml-auto font-mono text-xs font-semibold tabular-nums text-foreground">
+              {row.page_views.toLocaleString()}
+            </span>
+          </div>
+          {row.avg7d != null && (
+            <div className="mt-0.5 pt-1.5 border-t border-foreground/[0.06] flex items-center gap-2.5">
+              <span className="text-[11px] text-muted-foreground">7-day avg</span>
+              <span className="ml-auto font-mono text-xs font-semibold tabular-nums text-foreground">
+                {Math.round(row.avg7d).toLocaleString()}
+              </span>
+            </div>
+          )}
+          {topCountries.length > 0 && (
+            <div className="mt-0.5 pt-1.5 border-t border-foreground/[0.06] flex flex-col gap-1.5">
+              <span className="text-[11px] font-medium text-muted-foreground">Top countries</span>
+              {topCountries.map((country) => (
+                <div key={country.country_code} className="flex items-center gap-2.5">
+                  <span className="text-[11px] text-muted-foreground">{country.country_code}</span>
+                  <span className="ml-auto font-mono text-xs font-semibold tabular-nums text-foreground">
+                    {country.count.toLocaleString()}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function VisitorsHoverChart({
+  datapoints,
+  height,
+  compact = false,
+}: {
+  datapoints: VisitorsHoverDataPoint[],
+  height?: number,
+  compact?: boolean,
+}) {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const windowSize = Math.max(4, Math.round(datapoints.length / 2.5));
+  const totals = datapoints.map((p) => p.page_views);
+  const avgValues = rollingAvg(totals, windowSize);
+  const sevenDayAvgs = totals.map((_, i) => sevenDayAvg(totals, i));
+  const chartData = datapoints.map((p, i) => {
+    const total = totals[i];
+    const rawAvg = avgValues[i];
+    const movingAvg = total > 0 && rawAvg != null
+      ? Math.min(total * 0.9, Math.max(total * 0.35, rawAvg))
+      : null;
+    const isHighlightedAvg = hoveredIndex != null && i <= hoveredIndex && i >= hoveredIndex - 6;
+    return {
+      ...p,
+      movingAvg,
+      avg7d: sevenDayAvgs[i],
+      highlightedAvg: isHighlightedAvg ? movingAvg : null,
+    };
+  });
+
+  return (
+    <ChartContainer
+      config={visitorsHoverChartConfig}
+      className="w-full flex-1 min-h-0 !overflow-visible [&_.recharts-wrapper]:!overflow-visible"
+      maxHeight={height}
+    >
+      <ComposedChart
+        data={chartData}
+        margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+        onMouseMove={(state) => updateHoveredIndexFromChartState(state, chartData.length, setHoveredIndex)}
+        onMouseLeave={() => setHoveredIndex(null)}
+      >
+        <CartesianGrid
+          horizontal
+          vertical={false}
+          strokeDasharray="3 3"
+          stroke="hsl(var(--border))"
+          opacity={0.3}
+        />
+        <ChartTooltip
+          content={<VisitorsHoverTooltip />}
+          cursor={{ fill: "hsl(var(--muted-foreground))", opacity: hoveredIndex == null ? 0.08 : 0.12, radius: 4 }}
+          offset={20}
+          allowEscapeViewBox={{ x: true, y: true }}
+          wrapperStyle={{ zIndex: 9999, pointerEvents: 'none' }}
+        />
+        <Bar dataKey="page_views" stackId="visitors" fill="var(--color-page_views)" radius={[4, 4, 0, 0]} isAnimationActive={false}>
+          {datapoints.map((entry, index) => {
+            const baseOpacity = isWeekend(parseChartDate(entry.date)) ? 0.5 : 1;
+            const isActiveBar = hoveredIndex === index;
+            return (
+              <Cell
+                key={`pv-${index}`}
+                opacity={getDimmedOpacity(baseOpacity, index, hoveredIndex)}
+                stroke={isActiveBar ? "hsl(var(--background))" : undefined}
+                strokeWidth={isActiveBar ? 1 : 0}
+              />
+            );
+          })}
+        </Bar>
+        <Line
+          dataKey="movingAvg"
+          type="natural"
+          stroke="hsl(var(--foreground))"
+          strokeWidth={5}
+          strokeOpacity={hoveredIndex == null ? 0.14 : 0.05}
+          strokeDasharray="2.5 3.5"
+          dot={false}
+          activeDot={false}
+          isAnimationActive={false}
+          connectNulls={false}
+          legendType="none"
+        />
+        <Line
+          dataKey="movingAvg"
+          type="natural"
+          stroke="hsl(var(--foreground))"
+          strokeWidth={2.1}
+          strokeOpacity={hoveredIndex == null ? 0.85 : 0.28}
+          strokeDasharray="2.5 3.5"
+          dot={false}
+          activeDot={{ r: 3.5, fill: "hsl(var(--foreground))", stroke: "hsl(var(--background))", strokeWidth: 1.5 }}
+          isAnimationActive={false}
+          connectNulls={false}
+          legendType="none"
+        />
+        {hoveredIndex != null && (
+          <Line
+            dataKey="highlightedAvg"
+            type="natural"
+            stroke="hsl(var(--foreground))"
+            strokeWidth={3}
+            strokeOpacity={1}
+            strokeDasharray="2.5 3.5"
+            dot={false}
+            activeDot={{ r: 3.5, fill: "hsl(var(--foreground))", stroke: "hsl(var(--background))", strokeWidth: 1.5 }}
+            isAnimationActive={false}
+            connectNulls={false}
+            legendType="none"
+          />
+        )}
+        <XAxis
+          dataKey="date"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={compact ? 6 : 8}
+          tick={{ fontSize: compact ? 9 : 11, fill: "hsl(var(--muted-foreground))" }}
+          interval={chartData.length <= 7 ? 0 : "equidistantPreserveStart"}
+          tickFormatter={(value: string) => {
+            const d = parseChartDate(value);
+            return isNaN(d.getTime()) ? value : d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+          }}
+        />
+        <YAxis
+          tickLine={false}
+          axisLine={false}
+          tickMargin={4}
+          tick={{ fontSize: compact ? 9 : 11, fill: "hsl(var(--muted-foreground))" }}
+          allowDecimals={false}
+          width={28}
+        />
+      </ComposedChart>
+    </ChartContainer>
+  );
+}
+
+// ── Revenue hover chart (new_cents + refund_cents stacked bar) ───────────────
+
+const revenueHoverChartConfig: ChartConfig = {
+  new_cents: {
+    label: "Revenue",
+    theme: { light: "hsl(268, 82%, 66%)", dark: "hsl(268, 82%, 74%)" },
+  },
+  refund_cents: {
+    label: "Refunds",
+    theme: { light: "hsl(355, 70%, 68%)", dark: "hsl(355, 70%, 76%)" },
+  },
+  movingAvg: {
+    label: "Moving avg",
+    color: "hsl(var(--foreground))",
+  },
+};
+
+function formatUsdCompact(cents: number): string {
+  const dollars = cents / 100;
+  if (dollars >= 1000) return `$${(dollars / 1000).toFixed(1)}k`;
+  return `$${dollars.toFixed(0)}`;
+}
+
+function RevenueHoverTooltip({ active, payload }: TooltipProps<number, string>) {
+  if (!active || !payload?.length) return null;
+
+  const row = payload[0]?.payload as RevenueHoverDataPoint | undefined;
+  if (!row) return null;
+
+  const date = parseChartDate(row.date);
+  const formattedDate = !isNaN(date.getTime())
+    ? date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+    : row.date;
+
+  const net = row.new_cents - row.refund_cents;
+
+  return (
+    <div className={`${tooltipSurfaceClass} px-3.5 py-2.5`} style={{ zIndex: 9999 }}>
+      <div className="flex flex-col gap-2">
+        <span className="text-[11px] font-medium text-muted-foreground tracking-wide">{formattedDate}</span>
+        <div className="flex flex-col gap-1.5">
+          <div className="flex items-center gap-2.5">
+            <span className="h-2 w-2 rounded-full" style={{ backgroundColor: "hsl(268, 82%, 66%)" }} />
+            <span className="text-[11px] text-muted-foreground">Revenue</span>
+            <span className="ml-auto font-mono text-xs font-semibold tabular-nums text-foreground">
+              {formatUsdCompact(row.new_cents)}
+            </span>
+          </div>
+          <div className="flex items-center gap-2.5">
+            <span className="h-2 w-2 rounded-full" style={{ backgroundColor: "hsl(355, 70%, 68%)" }} />
+            <span className="text-[11px] text-muted-foreground">Refunds</span>
+            <span className="ml-auto font-mono text-xs font-semibold tabular-nums text-foreground">
+              {formatUsdCompact(row.refund_cents)}
+            </span>
+          </div>
+          <div className="flex items-center gap-2.5 mt-0.5 pt-1.5 border-t border-foreground/[0.06]">
+            <span className="text-[11px] font-medium text-muted-foreground">Net</span>
+            <span className="ml-auto font-mono text-xs font-semibold tabular-nums text-foreground">
+              {formatUsdCompact(Math.max(0, net))}
+            </span>
+          </div>
+          {row.avg7d != null && (
+            <div className="flex items-center gap-2.5">
+              <span className="text-[11px] text-muted-foreground">7-day avg</span>
+              <span className="ml-auto font-mono text-xs font-semibold tabular-nums text-foreground">
+                {formatUsdCompact(Math.round(row.avg7d))}
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function RevenueHoverChart({
+  datapoints,
+  height,
+  compact = false,
+}: {
+  datapoints: RevenueHoverDataPoint[],
+  height?: number,
+  compact?: boolean,
+}) {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const windowSize = Math.max(4, Math.round(datapoints.length / 2.5));
+  const totals = datapoints.map((p) => p.new_cents + p.refund_cents);
+  const avgValues = rollingAvg(totals, windowSize);
+  const sevenDayAvgs = totals.map((_, i) => sevenDayAvg(totals, i));
+  const chartData = datapoints.map((p, i) => {
+    const total = totals[i];
+    const rawAvg = avgValues[i];
+    const movingAvg = total > 0 && rawAvg != null
+      ? Math.min(total * 0.9, Math.max(total * 0.35, rawAvg))
+      : null;
+    const isHighlightedAvg = hoveredIndex != null && i <= hoveredIndex && i >= hoveredIndex - 6;
+    return {
+      ...p,
+      movingAvg,
+      avg7d: sevenDayAvgs[i],
+      highlightedAvg: isHighlightedAvg ? movingAvg : null,
+    };
+  });
+
+  const maxCents = Math.max(...chartData.map(d => d.new_cents + d.refund_cents), 1);
+  const ticksCents = niceAxisTicks(Math.ceil(maxCents * 1.1), 4);
+
+  return (
+    <ChartContainer
+      config={revenueHoverChartConfig}
+      className="w-full flex-1 min-h-0 !overflow-visible [&_.recharts-wrapper]:!overflow-visible"
+      maxHeight={height}
+    >
+      <ComposedChart
+        data={chartData}
+        margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+        onMouseMove={(state) => updateHoveredIndexFromChartState(state, chartData.length, setHoveredIndex)}
+        onMouseLeave={() => setHoveredIndex(null)}
+      >
+        <CartesianGrid
+          horizontal
+          vertical={false}
+          strokeDasharray="3 3"
+          stroke="hsl(var(--border))"
+          opacity={0.3}
+        />
+        <ChartTooltip
+          content={<RevenueHoverTooltip />}
+          cursor={{ fill: "hsl(var(--muted-foreground))", opacity: hoveredIndex == null ? 0.08 : 0.12, radius: 4 }}
+          offset={20}
+          allowEscapeViewBox={{ x: true, y: true }}
+          wrapperStyle={{ zIndex: 9999, pointerEvents: 'none' }}
+        />
+        <Bar dataKey="new_cents" stackId="revenue" fill="var(--color-new_cents)" radius={[0, 0, 0, 0]} isAnimationActive={false}>
+          {datapoints.map((entry, index) => {
+            const baseOpacity = isWeekend(parseChartDate(entry.date)) ? 0.5 : 1;
+            const isActiveBar = hoveredIndex === index;
+            return (
+              <Cell
+                key={`nc-${index}`}
+                opacity={getDimmedOpacity(baseOpacity, index, hoveredIndex)}
+                stroke={isActiveBar ? "hsl(var(--background))" : undefined}
+                strokeWidth={isActiveBar ? 1 : 0}
+              />
+            );
+          })}
+        </Bar>
+        <Bar dataKey="refund_cents" stackId="revenue" fill="var(--color-refund_cents)" radius={[4, 4, 0, 0]} isAnimationActive={false}>
+          {datapoints.map((entry, index) => {
+            const baseOpacity = isWeekend(parseChartDate(entry.date)) ? 0.5 : 1;
+            const isActiveBar = hoveredIndex === index;
+            return (
+              <Cell
+                key={`rc-${index}`}
+                opacity={getDimmedOpacity(baseOpacity, index, hoveredIndex)}
+                stroke={isActiveBar ? "hsl(var(--background))" : undefined}
+                strokeWidth={isActiveBar ? 1 : 0}
+              />
+            );
+          })}
+        </Bar>
+        <Line
+          dataKey="movingAvg"
+          type="natural"
+          stroke="hsl(var(--foreground))"
+          strokeWidth={5}
+          strokeOpacity={hoveredIndex == null ? 0.14 : 0.05}
+          strokeDasharray="2.5 3.5"
+          dot={false}
+          activeDot={false}
+          isAnimationActive={false}
+          connectNulls={false}
+          legendType="none"
+        />
+        <Line
+          dataKey="movingAvg"
+          type="natural"
+          stroke="hsl(var(--foreground))"
+          strokeWidth={2.1}
+          strokeOpacity={hoveredIndex == null ? 0.85 : 0.28}
+          strokeDasharray="2.5 3.5"
+          dot={false}
+          activeDot={{ r: 3.5, fill: "hsl(var(--foreground))", stroke: "hsl(var(--background))", strokeWidth: 1.5 }}
+          isAnimationActive={false}
+          connectNulls={false}
+          legendType="none"
+        />
+        {hoveredIndex != null && (
+          <Line
+            dataKey="highlightedAvg"
+            type="natural"
+            stroke="hsl(var(--foreground))"
+            strokeWidth={3}
+            strokeOpacity={1}
+            strokeDasharray="2.5 3.5"
+            dot={false}
+            activeDot={{ r: 3.5, fill: "hsl(var(--foreground))", stroke: "hsl(var(--background))", strokeWidth: 1.5 }}
+            isAnimationActive={false}
+            connectNulls={false}
+            legendType="none"
+          />
+        )}
+        <XAxis
+          dataKey="date"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={compact ? 6 : 8}
+          tick={{ fontSize: compact ? 9 : 11, fill: "hsl(var(--muted-foreground))" }}
+          interval={chartData.length <= 7 ? 0 : "equidistantPreserveStart"}
+          tickFormatter={(value: string) => {
+            const d = parseChartDate(value);
+            return isNaN(d.getTime()) ? value : d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+          }}
+        />
+        <YAxis
+          tickLine={false}
+          axisLine={false}
+          tickMargin={4}
+          tick={{ fontSize: compact ? 9 : 11, fill: "hsl(var(--muted-foreground))" }}
+          ticks={ticksCents}
+          tickFormatter={(v: number) => formatUsdCompact(v)}
+          width={36}
+        />
+      </ComposedChart>
+    </ChartContainer>
+  );
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/metrics-page.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/metrics-page.tsx
index 9466fd4442..50f6be81bc 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/metrics-page.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/metrics-page.tsx
@@ -1,354 +1,939 @@
 'use client';
 
 import { AppIcon } from "@/components/app-square";
+import { DesignAnalyticsCard, DesignCategoryTabs, DesignChartLegend, useInfiniteListWindow } from "@/components/design-components";
 import { Link } from "@/components/link";
 import { useRouter } from "@/components/router";
-import { cn, Typography } from '@/components/ui';
-import { ALL_APPS_FRONTEND, getAppPath } from "@/lib/apps-frontend";
-import { stackAppInternalsSymbol } from "@/lib/stack-app-internals";
-import { CaretUpIcon, CompassIcon, DotsThreeIcon, GlobeIcon, SquaresFourIcon } from "@phosphor-icons/react";
+import { cn, Typography } from "@/components/ui";
+import { ALL_APPS_FRONTEND, type AppId, getAppPath } from "@/lib/apps-frontend";
+import {
+  type MetricsEmailOverview,
+  type MetricsRecentEmail,
+  type MetricsTopReferrer,
+  useMetricsOrThrow,
+} from "@/lib/stack-app-internals";
+import { CompassIcon, EnvelopeIcon, EnvelopeOpenIcon, GlobeIcon, SquaresFourIcon, WarningCircleIcon, XCircleIcon } from "@phosphor-icons/react";
 import useResizeObserver from '@react-hook/resize-observer';
-import { useUser } from '@stackframe/stack';
-import { ALL_APPS, type AppId } from "@stackframe/stack-shared/dist/apps/apps-config";
+import { useUser } from "@stackframe/stack";
+import { ALL_APPS } from "@stackframe/stack-shared/dist/apps/apps-config";
 import { typedEntries } from "@stackframe/stack-shared/dist/utils/objects";
-import { Suspense, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { stringCompare } from "@stackframe/stack-shared/dist/utils/strings";
+import { Suspense, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, type ElementType } from "react";
 import { PageLayout } from "../page-layout";
-import { useAdminApp, useProjectId } from '../use-admin-app';
-import { GlobeSectionWithData } from './globe-section-with-data';
-import { LineChartDisplayConfig, TabbedMetricsCard, TimeRange, TimeRangeToggle } from './line-chart';
-import { MetricsLoadingFallback } from './metrics-loading';
-
-// Widget definitions
-type WidgetId = 'apps' | 'daily-active-users' | 'daily-sign-ups' | 'globe' | 'total-users';
-
-type WidgetConfig = {
-  id: WidgetId,
-  name: string,
-  description: string,
-  defaultEnabled: boolean,
-  area: 'left' | 'right',
-}
-
-const AVAILABLE_WIDGETS: WidgetConfig[] = [
-  { id: 'globe', name: 'Globe', description: 'Interactive 3D globe showing user locations', defaultEnabled: true, area: 'left' },
-  { id: 'total-users', name: 'Total Users', description: 'Overview of total registered users', defaultEnabled: true, area: 'right' },
-  { id: 'apps', name: 'Quick Access', description: 'Quick access to your installed apps', defaultEnabled: true, area: 'right' },
-  { id: 'daily-active-users', name: 'Daily Active Users', description: 'Chart and list of active users', defaultEnabled: true, area: 'right' },
-  { id: 'daily-sign-ups', name: 'Daily Sign-Ups', description: 'Chart and list of new registrations', defaultEnabled: true, area: 'right' },
-];
-
-type DashboardConfig = {
-  enabledWidgets: WidgetId[],
-  widgetOrder: WidgetId[],
-}
+import { useAdminApp, useProjectId } from "../use-admin-app";
+import { GlobeSectionWithData } from "./globe-section-with-data";
+import {
+  ComposedAnalyticsChart,
+  ComposedDataPoint,
+  CustomDateRange,
+  DataPoint,
+  DonutChartDisplay,
+  EmailStackedBarChartDisplay,
+  EmailStackedDataPoint,
+  filterStackedDatapointsByTimeRange,
+  LineChartDisplayConfig,
+  RevenueHoverChart,
+  RevenueHoverDataPoint,
+  StackedBarChartDisplay,
+  StackedDataPoint,
+  TabbedMetricsCard,
+  TimeRange,
+  TimeRangeToggle,
+  VisitorsHoverChart,
+  VisitorsHoverDataPoint,
+} from "./line-chart";
+import { MetricsLoadingFallback } from "./metrics-loading";
 
-const DEFAULT_CONFIG: DashboardConfig = {
-  enabledWidgets: AVAILABLE_WIDGETS.filter(w => w.defaultEnabled).map(w => w.id),
-  widgetOrder: AVAILABLE_WIDGETS.map(w => w.id),
+const dailySignUpsConfig: LineChartDisplayConfig = {
+  name: 'Daily Sign-Ups',
+  chart: {
+    activity: {
+      label: "Sign-Ups",
+      theme: { light: "hsl(221, 83%, 53%)", dark: "hsl(240, 71%, 70%)" },
+    },
+  },
 };
 
-const STORAGE_KEY = 'stack-dashboard-widget-config';
-
-function loadConfig(): DashboardConfig {
-  if (typeof window === 'undefined') return DEFAULT_CONFIG;
-  try {
-    const stored = localStorage.getItem(STORAGE_KEY);
-    if (stored) {
-      const parsed = JSON.parse(stored);
-      // Validate and merge with defaults for any new widgets
-      const validWidgetIds = new Set(AVAILABLE_WIDGETS.map(w => w.id));
-      const enabledWidgets = (parsed.enabledWidgets || []).filter((id: string) => validWidgetIds.has(id as WidgetId));
-      const widgetOrder = (parsed.widgetOrder || []).filter((id: string) => validWidgetIds.has(id as WidgetId));
-
-      // Add any new widgets that aren't in the stored config
-      for (const widget of AVAILABLE_WIDGETS) {
-        if (!widgetOrder.includes(widget.id)) {
-          widgetOrder.push(widget.id);
-          if (widget.defaultEnabled) {
-            enabledWidgets.push(widget.id);
-          }
-        }
-      }
+function formatUsdFromCents(cents: number): string {
+  return `$${(cents / 100).toLocaleString(undefined, { maximumFractionDigits: 0 })}`;
+}
 
-      return { enabledWidgets, widgetOrder };
-    }
-  } catch (e) {
-    console.error('Failed to load dashboard config:', e);
-  }
-  return DEFAULT_CONFIG;
+function formatSeconds(seconds: number): string {
+  if (!Number.isFinite(seconds) || seconds <= 0) return "0s";
+  const m = Math.floor(seconds / 60);
+  const s = Math.round(seconds % 60);
+  return m > 0 ? `${m}m ${s}s` : `${s}s`;
 }
 
-// TODO: This function will be used when widget configuration UI is implemented
-function saveConfig(config: DashboardConfig) {
-  if (typeof window === 'undefined') return;
-  try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
-  } catch (e) {
-    console.error('Failed to save dashboard config:', e);
-  }
+function formatCompact(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
+  return n.toLocaleString();
 }
 
-const dailySignUpsConfig = {
-  name: 'Daily Sign-Ups',
-  chart: {
-    activity: {
-      label: "Activity",
-      theme: {
-        light: "hsl(221, 83%, 53%)",
-        dark: "hsl(240, 71%, 70%)",
-      },
-    },
+function calculatePeriodDelta(currentValue: number, previousValue: number): number | undefined {
+  if (!Number.isFinite(currentValue) || !Number.isFinite(previousValue)) {
+    return undefined;
   }
-} satisfies LineChartDisplayConfig;
-
-const dauConfig = {
-  name: 'Daily Active Users',
-  chart: {
-    activity: {
-      label: "Activity",
-      theme: {
-        light: "hsl(180, 95%, 53%)",
-        dark: "hsl(200, 91%, 70%)",
-      },
-    },
+  if (previousValue === 0) {
+    return currentValue === 0 ? 0 : undefined;
   }
-} satisfies LineChartDisplayConfig;
+  return Number((((currentValue - previousValue) / previousValue) * 100).toFixed(1));
+}
 
-function TotalUsersDisplay({ includeAnonymous, minimal = false }: { includeAnonymous: boolean, minimal?: boolean }) {
-  const adminApp = useAdminApp();
-  const data = (adminApp as any)[stackAppInternalsSymbol].useMetrics(includeAnonymous);
+function SetupAppPrompt({
+  projectId,
+  appId,
+  appLabel,
+  metricLabel,
+}: {
+  projectId: string,
+  appId: AppId,
+  appLabel: string,
+  metricLabel: string,
+}) {
+  return (
+    <div className="flex h-full min-h-0 w-full items-center justify-center px-4 py-4">
+      <div className="flex max-w-sm flex-col items-center gap-2 text-center">
+        <Typography variant="secondary" className="text-xs">
+          Enable{" "}
+          <span className="font-semibold text-foreground">
+            {appLabel}
+          </span>{" "}
+          in Explore Apps to track {metricLabel}.
+        </Typography>
+        <Link
+          href={`/projects/${projectId}/apps/${appId}`}
+          className="inline-flex items-center rounded-md bg-foreground/[0.08] px-3 py-1.5 text-[11px] font-medium text-foreground transition-colors duration-150 hover:bg-foreground/[0.12] hover:transition-none"
+        >
+          Open Explore Apps
+        </Link>
+      </div>
+    </div>
+  );
+}
 
-  const totalUsers = data.total_users || 0;
+type AnalyticsStatPill = {
+  label: string,
+  value: string,
+  delta?: number,
+};
 
-  if (minimal) {
-    return <>{totalUsers.toLocaleString()}</>;
-  }
+function StatCard({
+  stat,
+  compact = false,
+}: {
+  stat: AnalyticsStatPill,
+  compact?: boolean,
+}) {
+  return (
+    <DesignAnalyticsCard gradient="blue" className="h-full" chart={{ type: "none", tooltipType: "none", highlightMode: "none" }}>
+      <div className={cn(
+        "flex flex-col justify-between h-full",
+        compact ? "px-4 py-3" : "px-5 py-4",
+      )}>
+        <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider leading-tight">
+          {stat.label}
+        </span>
+        <div className="flex items-baseline gap-1.5 mt-1.5">
+          <span className="text-xl font-bold tabular-nums text-foreground leading-none">
+            {stat.value}
+          </span>
+          {stat.delta != null && (
+            <span className={cn(
+              "text-[10px] font-medium tabular-nums leading-none shrink-0",
+              stat.delta > 0 ? "text-emerald-600 dark:text-emerald-400" : stat.delta < 0 ? "text-red-500 dark:text-red-400" : "text-muted-foreground"
+            )}>
+              {stat.delta > 0 ? "+" : ""}{stat.delta}%
+            </span>
+          )}
+        </div>
+      </div>
+    </DesignAnalyticsCard>
+  );
+}
+
+type AnalyticsChartMode = 'default' | 'dau' | 'visitors' | 'revenue';
 
+function AnalyticsInChartPill({
+  label,
+  value,
+  delta,
+  color,
+  isSelected,
+  controlsId,
+  tabId,
+  onActivate,
+  onHoverPreview,
+  onHoverEnd,
+  onArrowNavigate,
+}: {
+  label: string,
+  value: string,
+  delta?: number,
+  color: string,
+  isSelected: boolean,
+  controlsId: string,
+  tabId: string,
+  onActivate: () => void,
+  onHoverPreview: () => void,
+  onHoverEnd: () => void,
+  onArrowNavigate: (direction: 'next' | 'prev' | 'first' | 'last') => void,
+}) {
   return (
-    <span className="text-foreground font-semibold">
-      {totalUsers.toLocaleString()} users
-    </span>
+    <button
+      type="button"
+      role="tab"
+      id={tabId}
+      aria-selected={isSelected}
+      aria-controls={controlsId}
+      tabIndex={isSelected ? 0 : -1}
+      onMouseEnter={onHoverPreview}
+      onMouseLeave={onHoverEnd}
+      onFocus={onActivate}
+      onClick={onActivate}
+      onKeyDown={(event) => {
+        const isNext = event.key === 'ArrowRight' || event.key === 'ArrowDown';
+        const isPrev = event.key === 'ArrowLeft' || event.key === 'ArrowUp';
+        const isActivate = event.key === ' ' || event.key === 'Enter';
+        if (isNext) {
+          event.preventDefault();
+          onArrowNavigate('next');
+        } else if (isPrev) {
+          event.preventDefault();
+          onArrowNavigate('prev');
+        } else if (event.key === 'Home') {
+          event.preventDefault();
+          onArrowNavigate('first');
+        } else if (event.key === 'End') {
+          event.preventDefault();
+          onArrowNavigate('last');
+        } else if (isActivate) {
+          event.preventDefault();
+          onActivate();
+        }
+      }}
+      className={cn(
+        "group/pill flex items-center gap-3 px-3.5 py-2.5 rounded-xl transition-colors hover:transition-none select-none flex-1",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/[0.18]",
+        isSelected
+          ? "bg-foreground/[0.06] ring-1 ring-foreground/[0.09]"
+          : "hover:bg-foreground/[0.03]"
+      )}
+    >
+      <span
+        className={cn(
+          "h-2 w-2 rounded-full shrink-0 transition-transform",
+          isSelected ? "scale-125" : ""
+        )}
+        style={{ backgroundColor: color }}
+      />
+      <div className="flex flex-col gap-0.5 text-left min-w-0">
+        <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider leading-none">
+          {label}
+        </span>
+        <div className="flex items-baseline gap-1.5">
+          <span className="text-[15px] font-bold tabular-nums text-foreground leading-none">
+            {value}
+          </span>
+          {delta != null && delta !== 0 && (
+            <span className={cn(
+              "text-[10px] font-semibold tabular-nums leading-none shrink-0",
+              delta > 0 ? "text-emerald-500 dark:text-emerald-400" : delta < 0 ? "text-red-500 dark:text-red-400" : "text-muted-foreground"
+            )}>
+              {delta > 0 ? "+" : ""}{delta}%
+            </span>
+          )}
+        </div>
+      </div>
+    </button>
   );
 }
 
+function AnalyticsChartWidget({
+  composedData,
+  dauStackedData,
+  visitorsData,
+  revenueData,
+  outerStats,
+  dauLabel,
+  dauTotal,
+  visitorsLabel,
+  revenueLabel,
+  dauDelta,
+  visitorsTotal,
+  revenueTotal,
+  visitorsDelta,
+  revenueDelta,
+  analyticsEnabled,
+  paymentsEnabled,
+  projectId,
+  compact = false,
+}: {
+  composedData: ComposedDataPoint[],
+  dauStackedData: StackedDataPoint[],
+  visitorsData: VisitorsHoverDataPoint[],
+  revenueData: RevenueHoverDataPoint[],
+  outerStats: AnalyticsStatPill[],
+  dauLabel: string,
+  dauTotal: string,
+  visitorsLabel: string,
+  revenueLabel: string,
+  dauDelta?: number,
+  visitorsTotal: string,
+  revenueTotal: string,
+  visitorsDelta?: number,
+  revenueDelta?: number,
+  analyticsEnabled: boolean,
+  paymentsEnabled: boolean,
+  projectId: string,
+  compact?: boolean,
+}) {
+  const [selectedMode, setSelectedMode] = useState<AnalyticsChartMode>('default');
+  const [previewMode, setPreviewMode] = useState<AnalyticsChartMode | null>(null);
+  const [displayMode, setDisplayMode] = useState<AnalyticsChartMode>('default');
+  const [fadingOut, setFadingOut] = useState(false);
+  const [fadingIn, setFadingIn] = useState(false);
+  const fadeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const fadeInRaf1Ref = useRef<number | null>(null);
+  const fadeInRaf2Ref = useRef<number | null>(null);
+  const FADE_OUT_MS = 140;
+
+  const tablistInstanceId = useId();
+  const tabpanelId = `${tablistInstanceId}-panel`;
+  const dauTabId = `${tablistInstanceId}-tab-dau`;
+  const visitorsTabId = `${tablistInstanceId}-tab-visitors`;
+  const revenueTabId = `${tablistInstanceId}-tab-revenue`;
+
+  const activeMode: AnalyticsChartMode = previewMode ?? selectedMode;
 
-// Widget components for better organization
-function AppsWidget({ installedApps, projectId }: { installedApps: AppId[], projectId: string }) {
-  const [ref, setRef] = useState<HTMLDivElement | null>(null);
-  const [width, setWidth] = useState(0);
-  const [expanded, setExpanded] = useState(false);
+  const switchToMode = (mode: AnalyticsChartMode) => {
+    if (mode === displayMode) return;
+    if (fadeTimerRef.current != null) {
+      clearTimeout(fadeTimerRef.current);
+    }
+    setFadingOut(true);
+    fadeTimerRef.current = setTimeout(() => {
+      setDisplayMode(mode);
+      setFadingOut(false);
+      setFadingIn(true);
+      fadeInRaf1Ref.current = requestAnimationFrame(() => {
+        fadeInRaf2Ref.current = requestAnimationFrame(() => {
+          setFadingIn(false);
+          fadeInRaf2Ref.current = null;
+        });
+        fadeInRaf1Ref.current = null;
+      });
+      fadeTimerRef.current = null;
+    }, FADE_OUT_MS);
+  };
 
-  useResizeObserver(ref, (entry) => setWidth(entry.contentRect.width));
+  useEffect(() => {
+    switchToMode(activeMode);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- switchToMode closes over displayMode/fade state
+  }, [activeMode]);
 
-  const gap = 8;
-  const minItemWidth = 90;
-  const itemsPerRow = Math.max(1, Math.floor((width + gap) / (minItemWidth + gap)));
-  const maxRows = 2;
-  const maxItems = itemsPerRow * maxRows;
+  useEffect(() => {
+    return () => {
+      if (fadeTimerRef.current != null) {
+        clearTimeout(fadeTimerRef.current);
+      }
+      if (fadeInRaf1Ref.current != null) {
+        cancelAnimationFrame(fadeInRaf1Ref.current);
+      }
+      if (fadeInRaf2Ref.current != null) {
+        cancelAnimationFrame(fadeInRaf2Ref.current);
+      }
+    };
+  }, []);
 
-  // Account for Explore button (always shown) and See all button (shown when can expand)
-  // Explore takes 1 slot, See all takes 1 slot when needed
-  const slotsForApps = maxItems - 1; // -1 for Explore (always shown)
-  const canExpand = installedApps.length > slotsForApps && width > 0;
-  const showSeeAll = !expanded && canExpand;
-  const showShowLess = expanded && canExpand;
-  // When See all is shown, we need another slot for it
-  const displayApps = showSeeAll ? installedApps.slice(0, slotsForApps - 1) : installedApps;
+  const handleHoverPreview = (mode: 'dau' | 'visitors' | 'revenue') => {
+    setPreviewMode(mode);
+  };
+
+  const handleHoverEnd = () => {
+    setPreviewMode(null);
+  };
+
+  const handleSelect = (mode: AnalyticsChartMode) => {
+    setSelectedMode(mode);
+    setPreviewMode(null);
+  };
+
+  const PILL_MODE_ORDER = ['dau', 'visitors', 'revenue'] as const;
+  const handleArrowNavigate = (current: 'dau' | 'visitors' | 'revenue', direction: 'next' | 'prev' | 'first' | 'last') => {
+    const idx = PILL_MODE_ORDER.indexOf(current);
+    let nextIdx: number;
+    switch (direction) {
+      case 'next': {
+        nextIdx = (idx + 1) % PILL_MODE_ORDER.length;
+        break;
+      }
+      case 'prev': {
+        nextIdx = (idx - 1 + PILL_MODE_ORDER.length) % PILL_MODE_ORDER.length;
+        break;
+      }
+      case 'first': {
+        nextIdx = 0;
+        break;
+      }
+      case 'last': {
+        nextIdx = PILL_MODE_ORDER.length - 1;
+        break;
+      }
+    }
+    handleSelect(PILL_MODE_ORDER[nextIdx]);
+  };
+
+  const dauColor = "hsl(152, 38%, 52%)";
+  const visitorsColor = "hsl(210, 84%, 64%)";
+  const revenueColor = "hsl(268, 82%, 66%)";
+  const chartViewportHeight = compact ? 260 : 320;
 
   return (
-    <div className="shrink-0">
-      <div className="flex items-center gap-2 mb-4">
-        <div className="p-1.5 rounded-lg bg-foreground/[0.04]">
-          <SquaresFourIcon className="h-3.5 w-3.5" />
-        </div>
-        <span className="text-xs font-semibold text-foreground uppercase tracking-wider">
-          Quick Access
-        </span>
+    <div className="flex flex-col gap-3 h-full">
+      <div className={cn(
+        "grid gap-3",
+        outerStats.length > 3 ? "grid-cols-2 sm:grid-cols-4" : "grid-cols-3",
+      )}>
+        {outerStats.map((stat) => (
+          <StatCard key={stat.label} stat={stat} compact={compact} />
+        ))}
       </div>
-      {installedApps.length === 0 ? (
-        <div className="flex items-center justify-center py-10">
-          <Typography variant="secondary" className="text-sm text-center">
-            No apps installed
-          </Typography>
-        </div>
-      ) : (
+
+      <DesignAnalyticsCard
+        gradient="blue"
+        className="flex-1 min-h-0"
+        chart={{
+          type: displayMode === "dau" ? "stacked-bar" : displayMode === "default" ? "composed" : "bar",
+          tooltipType: displayMode === "dau"
+            ? "stacked"
+            : displayMode === "visitors"
+              ? "visitors"
+              : displayMode === "revenue"
+                ? "revenue"
+                : "composed",
+          highlightMode: "mixed",
+          averages: { movingAverage: true, sevenDayAverage: true },
+        }}
+      >
         <div
-          ref={setRef}
-          className="grid grid-cols-[repeat(auto-fill,minmax(90px,1fr))] gap-2"
+          className={cn(
+            "flex-1 min-h-0 flex flex-col",
+            compact ? "px-4 pt-2 pb-2" : "px-4 pt-3 pb-3",
+          )}
+          onMouseLeave={handleHoverEnd}
         >
-          {displayApps.map((appId) => {
-            const appFrontend = ALL_APPS_FRONTEND[appId];
-            const app = ALL_APPS[appId];
-            const appPath = getAppPath(projectId, appFrontend);
-            return (
-              <Link
-                key={appId}
-                href={appPath}
-                className="group flex flex-col items-center gap-2.5 pt-3 pb-2 rounded-xl hover:bg-foreground/[0.03] transition-all duration-750 hover:transition-none"
-                title={app.displayName}
-              >
-                <div className="relative transition-transform duration-750 group-hover:transition-none group-hover:scale-105">
-                  <AppIcon
-                    appId={appId}
-                    variant="installed"
-                    className="shadow-sm group-hover:shadow-[0_0_20px_rgba(59,130,246,0.45)] group-hover:brightness-110 group-hover:saturate-110 transition-all duration-750 group-hover:transition-none"
-                  />
-                </div>
-                <span
-                  className="text-[11px] font-medium text-center group-hover:text-foreground transition-colors duration-750 group-hover:transition-none leading-tight w-full"
-                  title={app.displayName}
-                >
-                  {app.displayName}
-                </span>
-              </Link>
-            );
-          })}
-          {/* Explore Apps - always shown before See all/Less */}
-          <Link
-            href={`/projects/${projectId}/apps`}
-            className="group flex flex-col items-center gap-2.5 pt-3 pb-2 rounded-xl hover:bg-foreground/[0.03] transition-all duration-750 hover:transition-none"
-            title="Explore all apps"
+          <div
+            role="tablist"
+            aria-label="Analytics chart"
+            aria-orientation="horizontal"
+            className="flex items-stretch mb-2 -mx-1"
           >
-            <div className="relative transition-transform duration-750 group-hover:transition-none group-hover:scale-105">
-              <div className="flex items-center justify-center w-[72px] h-[72px]">
-                <CompassIcon className="w-[30px] h-[30px] text-muted-foreground group-hover:text-foreground transition-colors duration-750 group-hover:transition-none" />
-              </div>
-            </div>
-            <span className="text-[11px] font-medium text-center text-muted-foreground group-hover:text-foreground transition-colors duration-750 group-hover:transition-none leading-tight w-full">
-              Explore
-            </span>
-          </Link>
-          {showSeeAll && (
-            <button
-              onClick={() => setExpanded(true)}
-              className="group flex flex-col items-center gap-2.5 pt-3 pb-2 rounded-xl hover:bg-foreground/[0.03] transition-all duration-750 hover:transition-none"
-              title="See all apps"
-            >
-              <div className="relative transition-transform duration-750 group-hover:transition-none group-hover:scale-105">
-                <div className="flex items-center justify-center w-[72px] h-[72px]">
-                  <DotsThreeIcon className="w-[30px] h-[30px] text-muted-foreground group-hover:text-foreground transition-colors duration-750 group-hover:transition-none" />
-                </div>
-              </div>
-              <span className="text-[11px] font-medium text-center text-muted-foreground group-hover:text-foreground transition-colors duration-750 group-hover:transition-none leading-tight w-full">
-                See all
-              </span>
-            </button>
-          )}
-          {showShowLess && (
-            <button
-              onClick={() => setExpanded(false)}
-              className="group flex flex-col items-center gap-2.5 pt-3 pb-2 rounded-xl hover:bg-foreground/[0.03] transition-all duration-750 hover:transition-none"
-              title="Show less"
+            <AnalyticsInChartPill
+              label={dauLabel}
+              value={dauTotal}
+              delta={dauDelta}
+              color={dauColor}
+              isSelected={activeMode === 'dau'}
+              tabId={dauTabId}
+              controlsId={tabpanelId}
+              onActivate={() => handleSelect('dau')}
+              onHoverPreview={() => handleHoverPreview('dau')}
+              onHoverEnd={handleHoverEnd}
+              onArrowNavigate={(direction) => handleArrowNavigate('dau', direction)}
+            />
+            <div className="w-px bg-foreground/[0.07] shrink-0 my-1.5 mx-1" />
+            <AnalyticsInChartPill
+              label={visitorsLabel}
+              value={visitorsTotal}
+              delta={visitorsDelta}
+              color={visitorsColor}
+              isSelected={activeMode === 'visitors'}
+              tabId={visitorsTabId}
+              controlsId={tabpanelId}
+              onActivate={() => handleSelect('visitors')}
+              onHoverPreview={() => handleHoverPreview('visitors')}
+              onHoverEnd={handleHoverEnd}
+              onArrowNavigate={(direction) => handleArrowNavigate('visitors', direction)}
+            />
+            <div className="w-px bg-foreground/[0.07] shrink-0 my-1.5 mx-1" />
+            <AnalyticsInChartPill
+              label={revenueLabel}
+              value={revenueTotal}
+              delta={revenueDelta}
+              color={revenueColor}
+              isSelected={activeMode === 'revenue'}
+              tabId={revenueTabId}
+              controlsId={tabpanelId}
+              onActivate={() => handleSelect('revenue')}
+              onHoverPreview={() => handleHoverPreview('revenue')}
+              onHoverEnd={handleHoverEnd}
+              onArrowNavigate={(direction) => handleArrowNavigate('revenue', direction)}
+            />
+          </div>
+
+          <div
+            id={tabpanelId}
+            role="tabpanel"
+            aria-labelledby={
+              activeMode === 'dau' ? dauTabId :
+                activeMode === 'visitors' ? visitorsTabId :
+                  activeMode === 'revenue' ? revenueTabId : undefined
+            }
+            className="flex-1 min-h-0 relative"
+            style={{ minHeight: chartViewportHeight }}
+          >
+            <div
+              className={cn(
+                "h-full flex flex-col",
+                fadingOut
+                  ? "opacity-0 -translate-y-0.5 transition-[opacity,transform] duration-[140ms] ease-in"
+                  : fadingIn
+                    ? "opacity-0 translate-y-0.5"
+                    : "opacity-100 translate-y-0 transition-[opacity,transform] duration-[260ms] ease-out",
+              )}
             >
-              <div className="relative transition-transform duration-750 group-hover:transition-none group-hover:scale-105">
-                <div className="flex items-center justify-center w-[72px] h-[72px]">
-                  <CaretUpIcon className="w-[30px] h-[30px] text-muted-foreground group-hover:text-foreground transition-colors duration-750 group-hover:transition-none" />
-                </div>
-              </div>
-              <span className="text-[11px] font-medium text-center text-muted-foreground group-hover:text-foreground transition-colors duration-750 group-hover:transition-none truncate leading-tight w-full">
-                Less
-              </span>
-            </button>
-          )}
+              {displayMode === 'default' && (
+                composedData.length === 0 ? (
+                  <div className="flex items-center justify-center h-full">
+                    <Typography variant="secondary" className="text-xs">No data available</Typography>
+                  </div>
+                ) : (
+                  <ComposedAnalyticsChart
+                    datapoints={composedData}
+                    showVisitors={analyticsEnabled}
+                    showRevenue={paymentsEnabled}
+                    height={chartViewportHeight}
+                    compact={compact}
+                  />
+                )
+              )}
+              {displayMode === 'dau' && (
+                dauStackedData.length === 0 ? (
+                  <div className="flex items-center justify-center h-full">
+                    <Typography variant="secondary" className="text-xs">No daily active user data available</Typography>
+                  </div>
+                ) : (
+                  <StackedBarChartDisplay
+                    datapoints={dauStackedData}
+                    height={chartViewportHeight}
+                    compact={compact}
+                  />
+                )
+              )}
+              {displayMode === 'visitors' && (
+                !analyticsEnabled ? (
+                  <div className="h-full min-h-0">
+                    <SetupAppPrompt projectId={projectId} appId="analytics" appLabel="Analytics" metricLabel="visitor metrics" />
+                  </div>
+                ) : visitorsData.length === 0 ? (
+                  <div className="flex items-center justify-center h-full">
+                    <Typography variant="secondary" className="text-xs">No visitor data available</Typography>
+                  </div>
+                ) : (
+                  <VisitorsHoverChart
+                    datapoints={visitorsData}
+                    height={chartViewportHeight}
+                    compact={compact}
+                  />
+                )
+              )}
+              {displayMode === 'revenue' && (
+                !paymentsEnabled ? (
+                  <div className="h-full min-h-0">
+                    <SetupAppPrompt projectId={projectId} appId="payments" appLabel="Payments" metricLabel="revenue metrics" />
+                  </div>
+                ) : revenueData.length === 0 ? (
+                  <div className="flex items-center justify-center h-full">
+                    <Typography variant="secondary" className="text-xs">No revenue data available</Typography>
+                  </div>
+                ) : (
+                  <RevenueHoverChart
+                    datapoints={revenueData}
+                    height={chartViewportHeight}
+                    compact={compact}
+                  />
+                )
+              )}
+            </div>
+          </div>
         </div>
-      )}
+      </DesignAnalyticsCard>
     </div>
   );
 }
 
-function DailyActiveUsersWidget({
-  data,
-  projectId,
-  router,
-  timeRange
+type EmailItem = MetricsRecentEmail;
+
+const emailStatusConfig = new Map<string, {
+  label: string,
+  icon: ElementType,
+  bg: string,
+  text: string,
+  dot: string,
+}>([
+  ['sent',         { label: 'Sent',       icon: EnvelopeIcon,      bg: 'bg-blue-500/10 dark:bg-blue-500/15',    text: 'text-blue-600 dark:text-blue-400',    dot: 'bg-blue-500' }],
+  ['opened',       { label: 'Opened',     icon: EnvelopeOpenIcon,  bg: 'bg-emerald-500/10 dark:bg-emerald-500/15', text: 'text-emerald-600 dark:text-emerald-400', dot: 'bg-emerald-500' }],
+  ['delivered',    { label: 'Delivered',  icon: EnvelopeIcon,      bg: 'bg-emerald-500/10 dark:bg-emerald-500/15', text: 'text-emerald-600 dark:text-emerald-400', dot: 'bg-emerald-500' }],
+  ['bounced',      { label: 'Bounced',    icon: XCircleIcon,       bg: 'bg-red-500/10 dark:bg-red-500/15',      text: 'text-red-600 dark:text-red-400',      dot: 'bg-red-500' }],
+  ['error',        { label: 'Error',      icon: WarningCircleIcon, bg: 'bg-amber-500/10 dark:bg-amber-500/15',  text: 'text-amber-600 dark:text-amber-400',  dot: 'bg-amber-500' }],
+  ['in_progress',  { label: 'Sending',    icon: EnvelopeIcon,      bg: 'bg-sky-500/10 dark:bg-sky-500/15',      text: 'text-sky-600 dark:text-sky-400',      dot: 'bg-sky-400' }],
+]);
+
+const fallbackEmailStatus = { label: 'Unknown', icon: EnvelopeIcon, bg: 'bg-foreground/[0.06]', text: 'text-muted-foreground', dot: 'bg-muted-foreground' };
+
+function EmailListRow({ email }: { email: EmailItem }) {
+  const key = email.status.toLowerCase().replace(/\s+/g, '_');
+  const cfg = emailStatusConfig.get(key) ?? fallbackEmailStatus;
+  const StatusIcon = cfg.icon;
+
+  return (
+    <div className="flex items-center gap-3 px-1 py-2.5 group">
+      <div className={cn("w-7 h-7 rounded-lg flex items-center justify-center shrink-0", cfg.bg)}>
+        <StatusIcon className={cn("h-3.5 w-3.5", cfg.text)} weight="fill" />
+      </div>
+
+      <div className="flex-1 min-w-0">
+        <div className="text-[12.5px] font-medium truncate text-foreground leading-tight">
+          {email.subject}
+        </div>
+      </div>
+
+      <div className={cn(
+        "shrink-0 inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide",
+        cfg.bg, cfg.text
+      )}>
+        <span className={cn("w-1.5 h-1.5 rounded-full shrink-0", cfg.dot)} />
+        {cfg.label}
+      </div>
+    </div>
+  );
+}
+
+const emailLegendItems = [
+  { key: 'ok',          label: 'Delivered', color: 'hsl(168, 38%, 48%)' },
+  { key: 'in_progress', label: 'Sending',   color: 'hsl(213, 38%, 52%)' },
+  { key: 'error',       label: 'Error',     color: 'hsl(355, 45%, 52%)' },
+] as const;
+
+function TabbedEmailsCard({
+  stackedChartData,
+  recentEmails,
+  timeRange,
+  customDateRange = null,
+  compact = false,
 }: {
-  data: any,
-  projectId: string,
-  router: ReturnType<typeof useRouter>,
+  stackedChartData: EmailStackedDataPoint[],
+  recentEmails: MetricsRecentEmail[],
   timeRange: TimeRange,
+  customDateRange?: CustomDateRange | null,
+  compact?: boolean,
+}) {
+  const [view, setView] = useState<'chart' | 'list'>('chart');
+  const filteredDatapoints = filterStackedDatapointsByTimeRange(stackedChartData, timeRange, customDateRange);
+
+  const listWindow = useInfiniteListWindow(recentEmails.length, view === "list" ? "list" : "chart", view === "list");
+
+  return (
+    <DesignAnalyticsCard
+      gradient="orange"
+      className="h-full min-h-0 flex flex-col"
+      chart={{
+        type: view === "chart" ? "stacked-bar" : "none",
+        tooltipType: view === "chart" ? "stacked" : "none",
+        highlightMode: view === "chart" ? "bar-segment" : "none",
+      }}
+    >
+      <div className={cn("flex items-center justify-between border-b border-foreground/[0.05]", compact ? "px-4" : "px-5")}>
+        <DesignCategoryTabs
+          categories={[
+            { id: "chart", label: "Emails Sent" },
+            { id: "list", label: "Recent Emails" },
+          ]}
+          selectedCategory={view}
+          onSelect={(selectedId) => {
+            if (selectedId === "chart" || selectedId === "list") {
+              setView(selectedId);
+              return;
+            }
+            throw new Error(`Unsupported emails tab selected: ${selectedId}`);
+          }}
+          showBadge={false}
+          size="sm"
+          glassmorphic={false}
+          gradient="blue"
+          className="flex-1 min-w-0 border-0 [&>button]:rounded-none [&>button]:px-3 [&>button]:py-3.5 [&>button]:text-xs"
+        />
+      </div>
+      {view === 'chart' && (
+        <DesignChartLegend items={emailLegendItems} compact={compact} />
+      )}
+      <div className={cn(
+        view === 'chart'
+          ? (compact ? "px-4 pt-1.5 pb-1" : "px-5 pt-2 pb-2")
+          : (compact ? "px-4 pt-1 pb-2" : "px-5 pt-2 pb-3"),
+        "flex flex-col flex-1 min-h-0",
+        view === 'chart' ? "overflow-visible" : "overflow-hidden"
+      )}>
+        {view === 'chart' ? (
+          filteredDatapoints.length === 0 ? (
+            <div className="flex-1 flex items-center justify-center">
+              <Typography variant="secondary" className="text-xs">No email data for this period</Typography>
+            </div>
+          ) : (
+            <EmailStackedBarChartDisplay datapoints={filteredDatapoints} compact={compact} />
+          )
+        ) : (
+          <div ref={listWindow.scrollRef} className="flex-1 overflow-y-auto min-h-0 pr-1 -mr-1">
+            {recentEmails.length === 0 ? (
+              <div className="flex items-center justify-center h-full">
+                <Typography variant="secondary" className="text-xs">No recent emails</Typography>
+              </div>
+            ) : (
+              <div className="divide-y divide-foreground/[0.04]">
+                {recentEmails.slice(0, listWindow.visibleCount).map((email) => (
+                  <EmailListRow key={email.id} email={email} />
+                ))}
+                {listWindow.hasMore && (
+                  <div ref={listWindow.sentinelRef} className="py-2 text-center">
+                    <Typography variant="secondary" className="text-[10px]">
+                      Loading more...
+                    </Typography>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </DesignAnalyticsCard>
+  );
+}
+
+function EmailBreakdownCard({
+  deliverabilityStatus,
+  bounceRate,
+  clickRate,
+}: {
+  deliverabilityStatus: MetricsEmailOverview['deliverability_status'],
+  bounceRate: number,
+  clickRate: number,
 }) {
+  const items = [
+    { label: 'Delivered', count: deliverabilityStatus.delivered, color: '#10b981' },
+    { label: 'Bounced', count: deliverabilityStatus.bounced, color: '#ef4444' },
+    { label: 'In Progress', count: deliverabilityStatus.in_progress, color: '#06b6d4' },
+    { label: 'Error', count: deliverabilityStatus.error, color: '#f59e0b' },
+  ];
+  const total = items.reduce((s, i) => s + i.count, 0);
+
   return (
-    <TabbedMetricsCard
-      config={dauConfig}
-      chartData={data.daily_active_users || []}
-      listData={data.recently_active || []}
-      listTitle="Recently Active"
-      projectId={projectId}
-      router={router}
-      compact
-      gradientColor="cyan"
-      timeRange={timeRange}
-    />
+    <DesignAnalyticsCard gradient="orange" className="h-full" chart={{ type: "none", tooltipType: "none", highlightMode: "none" }}>
+      <div className="px-4 py-3 border-b border-foreground/[0.05]">
+        <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Email Delivery</span>
+      </div>
+      <div className="p-4 pt-3 flex-1 flex flex-col gap-2.5">
+        {total === 0 ? (
+          <div className="flex-1 flex items-center justify-center">
+            <Typography variant="secondary" className="text-xs">No email data</Typography>
+          </div>
+        ) : (
+          <>
+            <div className="flex h-2 rounded-full overflow-hidden gap-px">
+              {items.filter(i => i.count > 0).map((item, idx) => (
+                <div key={idx} style={{ width: `${(item.count / total) * 100}%`, backgroundColor: item.color }} />
+              ))}
+            </div>
+            <div className="flex flex-col gap-1.5">
+              {items.filter(i => i.count > 0).map((item, idx) => (
+                <div key={idx} className="flex items-center justify-between">
+                  <div className="flex items-center gap-1.5">
+                    <div className="h-2 w-2 rounded-full shrink-0" style={{ backgroundColor: item.color }} />
+                    <span className="text-[11px] text-foreground">{item.label}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-[10px] text-muted-foreground tabular-nums">
+                      {((item.count / total) * 100).toFixed(0)}%
+                    </span>
+                    <span className="text-[11px] font-medium text-foreground tabular-nums">
+                      {item.count.toLocaleString()}
+                    </span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+
+        <div className="mt-auto pt-2 border-t border-foreground/[0.05] grid grid-cols-2 gap-2 text-center">
+          <div>
+            <div className="text-[10px] text-muted-foreground uppercase tracking-wider">Bounce Rate</div>
+            <div className="text-sm font-semibold tabular-nums">{bounceRate}%</div>
+          </div>
+          <div>
+            <div className="text-[10px] text-muted-foreground uppercase tracking-wider">Click Rate</div>
+            <div className="text-sm font-semibold tabular-nums">{clickRate}%</div>
+          </div>
+        </div>
+      </div>
+    </DesignAnalyticsCard>
   );
 }
 
-function DailySignUpsWidget({
-  data,
+function ReferrersWithAnalyticsCard({
+  topReferrers,
+  analyticsEnabled,
   projectId,
-  router,
-  timeRange
 }: {
-  data: any,
+  topReferrers: MetricsTopReferrer[],
+  analyticsEnabled: boolean,
   projectId: string,
-  router: ReturnType<typeof useRouter>,
-  timeRange: TimeRange,
 }) {
+  const listWindow = useInfiniteListWindow(topReferrers.length);
+
   return (
-    <TabbedMetricsCard
-      config={dailySignUpsConfig}
-      chartData={data.daily_users || []}
-      listData={data.recently_registered || []}
-      listTitle="Recent Sign Ups"
-      projectId={projectId}
-      router={router}
-      compact
-      gradientColor="blue"
-      timeRange={timeRange}
-      totalAllTime={data.total_users}
-    />
+    <DesignAnalyticsCard gradient="purple" className="h-full" chart={{ type: "none", tooltipType: "none", highlightMode: "none" }}>
+      <div className="px-4 py-3 border-b border-foreground/[0.05]">
+        <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Top Referrers</span>
+      </div>
+      <div ref={listWindow.scrollRef} className="p-4 pt-3 flex-1 min-h-0 overflow-y-auto flex flex-col gap-2">
+        {!analyticsEnabled ? (
+          <SetupAppPrompt projectId={projectId} appId="analytics" appLabel="Analytics" metricLabel="referrer metrics" />
+        ) : topReferrers.length === 0 ? (
+          <div className="flex-1 flex items-center justify-center">
+            <Typography variant="secondary" className="text-xs">No referrer data</Typography>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-1.5">
+            {topReferrers.slice(0, listWindow.visibleCount).map((item) => {
+              const max = topReferrers[0].visitors;
+              return (
+                <div key={item.referrer} className="relative flex items-center justify-between rounded-lg px-2.5 py-1.5 overflow-hidden">
+                  <div
+                    className="absolute inset-y-0 left-0 rounded-lg bg-purple-500/10 dark:bg-purple-400/10"
+                    style={{ width: max > 0 ? `${(item.visitors / max) * 100}%` : '0%' }}
+                  />
+                  <span className="relative text-[11px] text-foreground truncate max-w-[65%]">{item.referrer}</span>
+                  <span className="relative text-[11px] font-medium text-foreground tabular-nums">{item.visitors.toLocaleString()}</span>
+                </div>
+              );
+            })}
+            {listWindow.hasMore && (
+              <div ref={listWindow.sentinelRef} className="py-2 text-center">
+                <Typography variant="secondary" className="text-[10px]">
+                  Loading more...
+                </Typography>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </DesignAnalyticsCard>
+  );
+}
+
+function QuickAccessApps({ projectId, installedApps }: { projectId: string, installedApps: AppId[] }) {
+  return (
+    <div className={cn(
+      "shrink-0 rounded-2xl bg-white/90 backdrop-blur-xl ring-1 ring-black/[0.06] shadow-sm",
+      "dark:bg-transparent dark:backdrop-blur-none dark:ring-0 dark:shadow-none dark:rounded-none",
+    )}>
+      <div className="p-4 sm:p-5 dark:px-0">
+        <div className="flex items-center gap-2 mb-3">
+          <div className="p-1.5 rounded-lg bg-foreground/[0.04]">
+            <SquaresFourIcon className="h-3.5 w-3.5 text-muted-foreground" />
+          </div>
+          <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+            Quick Access
+          </span>
+        </div>
+
+        {installedApps.length === 0 ? (
+          <div className="flex items-center justify-center py-8 rounded-xl bg-foreground/[0.02] ring-1 ring-foreground/[0.06]">
+            <Typography variant="secondary" className="text-sm text-center">
+              No apps installed
+            </Typography>
+          </div>
+        ) : (
+          <div className="grid grid-cols-[repeat(auto-fill,minmax(90px,1fr))] gap-2">
+            {installedApps.map((appId) => {
+              const appFrontend = ALL_APPS_FRONTEND[appId];
+              const appPath = getAppPath(projectId, appFrontend);
+              const app = ALL_APPS[appId];
+              return (
+                <Link
+                  key={appId}
+                  href={appPath}
+                  className="group flex flex-col items-center gap-2.5 pt-3 pb-2 rounded-xl hover:bg-foreground/[0.03] transition-all duration-150 hover:transition-none"
+                  title={app.displayName}
+                >
+                  <div className="relative transition-transform duration-150 group-hover:transition-none group-hover:scale-105">
+                    <AppIcon
+                      appId={appId}
+                      variant="installed"
+                      className="shadow-sm group-hover:shadow-[0_0_20px_rgba(59,130,246,0.45)] group-hover:brightness-110 group-hover:saturate-110 transition-all duration-150 group-hover:transition-none"
+                    />
+                  </div>
+                  <span
+                    className="text-[11px] font-medium text-center group-hover:text-foreground transition-colors duration-150 group-hover:transition-none leading-tight w-full"
+                    title={app.displayName}
+                  >
+                    {app.displayName}
+                  </span>
+                </Link>
+              );
+            })}
+
+            <Link
+              href={`/projects/${projectId}/apps`}
+              className="group flex flex-col items-center gap-2.5 pt-3 pb-2 rounded-xl hover:bg-foreground/[0.03] transition-all duration-150 hover:transition-none"
+              title="Explore apps"
+            >
+              <div className="relative transition-transform duration-150 group-hover:transition-none group-hover:scale-105">
+                <div className="flex items-center justify-center w-[72px] h-[72px]">
+                  <CompassIcon className="w-[30px] h-[30px] text-muted-foreground group-hover:text-foreground transition-colors duration-150 group-hover:transition-none" />
+                </div>
+              </div>
+              <span className="text-[11px] font-medium text-center text-muted-foreground group-hover:text-foreground transition-colors duration-150 group-hover:transition-none leading-tight w-full">
+                Explore
+              </span>
+            </Link>
+          </div>
+        )}
+      </div>
+    </div>
   );
 }
 
 export default function MetricsPage(props: { toSetup: () => void }) {
-  const adminApp = useAdminApp();
-  const project = adminApp.useProject();
-  const config = project.useConfig();
-  // Currently always false - can be made configurable in the future
   const includeAnonymous = false;
-  const [timeRange, setTimeRange] = useState<TimeRange>('30d');
-  const [dashboardConfig, setDashboardConfig] = useState<DashboardConfig>(DEFAULT_CONFIG);
+  const [timeRange, setTimeRange] = useState<TimeRange>("30d");
+  const [customDateRange, setCustomDateRange] = useState<CustomDateRange | null>(null);
   const user = useUser();
 
-  // Load config from localStorage on mount
-  useEffect(() => {
-    setDashboardConfig(loadConfig());
-  }, []);
-
-  const installedApps = typedEntries(config.apps.installed)
-    .filter(([_, appConfig]) => appConfig?.enabled)
-    .map(([appId]) => appId as AppId);
-
-  // Get display name with smart truncation
-  const displayName = user?.displayName || user?.primaryEmail || 'User';
-  const truncatedName = displayName.length > 30 ? displayName.slice(0, 30) + '...' : displayName;
+  const displayName = user?.displayName || user?.primaryEmail || "User";
+  const truncatedName = displayName.length > 30 ? `${displayName.slice(0, 30)}...` : displayName;
 
   return (
     <PageLayout
       title={`Welcome back, ${truncatedName}!`}
       actions={
         <div className="flex items-center gap-2 sm:gap-3 flex-shrink-0">
-          <TimeRangeToggle timeRange={timeRange} onTimeRangeChange={setTimeRange} />
+          <TimeRangeToggle
+            timeRange={timeRange}
+            onTimeRangeChange={setTimeRange}
+            customDateRange={customDateRange}
+            onCustomDateRangeChange={setCustomDateRange}
+          />
         </div>
       }
       fillWidth
+      fullBleed
+      wrapHeaderInCard
     >
       <Suspense fallback={<MetricsLoadingFallback />}>
-        <MetricsContent
-          includeAnonymous={includeAnonymous}
-          installedApps={installedApps}
-          timeRange={timeRange}
-          dashboardConfig={dashboardConfig}
-        />
+        <MetricsContent includeAnonymous={includeAnonymous} timeRange={timeRange} customDateRange={customDateRange} />
       </Suspense>
     </PageLayout>
   );
@@ -356,157 +941,272 @@ export default function MetricsPage(props: { toSetup: () => void }) {
 
 function MetricsContent({
   includeAnonymous,
-  installedApps,
   timeRange,
-  dashboardConfig,
+  customDateRange,
 }: {
   includeAnonymous: boolean,
-  installedApps: AppId[],
   timeRange: TimeRange,
-  dashboardConfig: DashboardConfig,
+  customDateRange: CustomDateRange | null,
 }) {
   const adminApp = useAdminApp();
+  const project = adminApp.useProject();
+  const config = project.useConfig();
   const projectId = useProjectId();
   const router = useRouter();
-  const data = (adminApp as any)[stackAppInternalsSymbol].useMetrics(includeAnonymous);
+  const data = useMetricsOrThrow(adminApp, includeAnonymous);
+  const installedApps = useMemo(
+    () => typedEntries(config.apps.installed)
+      .filter(([_, appConfig]) => appConfig?.enabled === true)
+      .map(([appId]) => appId as AppId),
+    [config.apps.installed]
+  );
+  const analyticsEnabled = installedApps.includes("analytics");
+  const paymentsEnabled = installedApps.includes("payments");
 
-  const isWidgetEnabled = (id: WidgetId) => dashboardConfig.enabledWidgets.includes(id);
+  const auth = data.auth_overview;
+  const payments = data.payments_overview;
+  const email = data.email_overview;
+  const analytics = data.analytics_overview;
 
-  // Get ordered right-side widgets
-  const rightWidgets = useMemo(() => {
-    return dashboardConfig.widgetOrder
-      .filter(id => {
-        const widget = AVAILABLE_WIDGETS.find(w => w.id === id);
-        return widget?.area === 'right' && dashboardConfig.enabledWidgets.includes(id);
-      });
-  }, [dashboardConfig]);
+  const recentEmails = email.recent_emails;
+  const topReferrers = analytics.top_referrers;
 
-  const showGlobe = isWidgetEnabled('globe');
+  const dauSplit = auth.daily_active_users_split;
+  const dauStackedData = useMemo<StackedDataPoint[]>(() => {
+    const dateSet = new Set([
+      ...dauSplit.new.map(d => d.date),
+      ...dauSplit.retained.map(d => d.date),
+      ...dauSplit.reactivated.map(d => d.date),
+    ]);
+    const newMap = new Map(dauSplit.new.map(d => [d.date, d.activity]));
+    const retainedMap = new Map(dauSplit.retained.map(d => [d.date, d.activity]));
+    const reactivatedMap = new Map(dauSplit.reactivated.map(d => [d.date, d.activity]));
+    return [...dateSet].sort().map(date => ({
+      date,
+      new: newMap.get(date) ?? 0,
+      retained: retainedMap.get(date) ?? 0,
+      reactivated: reactivatedMap.get(date) ?? 0,
+    }));
+  }, [dauSplit.new, dauSplit.retained, dauSplit.reactivated]);
+  const signUpsStackedData = useMemo<StackedDataPoint[]>(
+    () => data.daily_users.map((point) => ({
+      date: point.date,
+      new: point.activity,
+      retained: 0,
+      reactivated: 0,
+    })),
+    [data.daily_users],
+  );
+  const filteredDauStackedData = useMemo<StackedDataPoint[]>(
+    () => filterStackedDatapointsByTimeRange(dauStackedData, timeRange, customDateRange),
+    [dauStackedData, timeRange, customDateRange],
+  );
+  const dauTotalsByDate = useMemo<Map<string, number>>(
+    () => new Map(dauStackedData.map((point) => [point.date, point.new + point.retained + point.reactivated])),
+    [dauStackedData],
+  );
 
-  // Track grid container width to calculate globe column width
-  const gridContainerRef = useRef<HTMLDivElement>(null);
-  const [gridContainerSize, setGridContainerSize] = useState<DOMRectReadOnly>();
+  const emailStackedData = useMemo<EmailStackedDataPoint[]>(
+    () => email.daily_emails_by_status,
+    [email.daily_emails_by_status],
+  );
 
-  useLayoutEffect(() => {
-    setGridContainerSize(gridContainerRef.current?.getBoundingClientRect());
-  }, []);
+  const allComposedData = useMemo<ComposedDataPoint[]>(() => {
+    const dailyRev = analytics.daily_revenue;
+    const dailyVis = analytics.daily_visitors;
 
-  useResizeObserver(gridContainerRef, (entry) => setGridContainerSize(entry.contentRect));
-
-  // Calculate globe column width (5/12 of grid width, accounting for gaps)
-  // Grid has 12 columns, globe takes 5, with gap-4 sm:gap-5 between columns
-  // On lg screens, gap-5 applies = 1.25rem = 20px
-  const calculateGlobeColumnWidth = () => {
-    if (!gridContainerSize?.width) return 0;
-    const gap = 20; // gap-5 = 1.25rem = 20px on lg screens (sm:gap-5 applies)
-    const totalGaps = gap * 11; // 11 gaps between 12 columns
-    const availableWidth = gridContainerSize.width - totalGaps;
-    const columnWidth = availableWidth / 12;
-    return columnWidth * 5 + gap * 4; // 5 columns + 4 gaps
-  };
+    const visitorMap = new Map(dailyVis.map(d => [d.date, d.activity]));
+    const revenueMap = new Map(dailyRev.map(d => [d.date, d]));
 
-  const globeColumnWidth = calculateGlobeColumnWidth();
+    const allDates = new Set([
+      ...dailyVis.map(d => d.date),
+      ...dailyRev.map(d => d.date),
+      ...dauStackedData.map(d => d.date),
+    ]);
 
-  // Hide globe and total users section when width is less than 352.5px
-  const GLOBE_MIN_WIDTH = 352.5;
-  const shouldShowGlobeSection = showGlobe && globeColumnWidth >= GLOBE_MIN_WIDTH;
+    const points = [...allDates].map(date => ({
+      date,
+      visitors: analyticsEnabled ? (visitorMap.get(date) ?? 0) : 0,
+      new_cents: paymentsEnabled ? (revenueMap.get(date)?.new_cents ?? 0) : 0,
+      refund_cents: paymentsEnabled ? (revenueMap.get(date)?.refund_cents ?? 0) : 0,
+      dau: dauTotalsByDate.get(date) ?? 0,
+    })).sort((a, b) => stringCompare(a.date, b.date));
 
-  // On lg screens, derive grid height from globe column width
-  // Formula: height = min(max(viewHeight, globeWidth), globeWidth * 1.75)
-  const [isLgScreen, setIsLgScreen] = useState(false);
-  const [viewHeight, setViewHeight] = useState(0);
-  useEffect(() => {
-    const mediaQuery = window.matchMedia('(min-width: 1024px)');
-    setIsLgScreen(mediaQuery.matches);
-    const handler = (e: MediaQueryListEvent) => setIsLgScreen(e.matches);
-    mediaQuery.addEventListener('change', handler);
+    return points;
+  }, [analytics.daily_revenue, analytics.daily_visitors, dauStackedData, dauTotalsByDate, analyticsEnabled, paymentsEnabled]);
+  const composedData = useMemo<ComposedDataPoint[]>(
+    () => filterStackedDatapointsByTimeRange(allComposedData, timeRange, customDateRange),
+    [allComposedData, timeRange, customDateRange],
+  );
 
-    // Track viewport height
-    const updateViewHeight = () => setViewHeight(window.innerHeight - 180); // same as calc(100vh - 180px)
-    updateViewHeight();
-    window.addEventListener('resize', updateViewHeight);
+  const topCountries = useMemo<Array<{ country_code: string, count: number }>>(() => {
+    const countries: Array<{ country_code: string, count: number }> = [];
+    for (const [countryCode, count] of Object.entries(data.users_by_country)) {
+      if (countryCode.length === 0) continue;
+      if (!Number.isFinite(count) || count <= 0) continue;
+      countries.push({ country_code: countryCode.toUpperCase(), count });
+    }
+
+    countries.sort((a, b) => b.count - a.count || stringCompare(a.country_code, b.country_code));
+    return countries.slice(0, 3);
+  }, [data.users_by_country]);
+
+  const visitorsHoverData = useMemo<VisitorsHoverDataPoint[]>(() => {
+    if (!analyticsEnabled) {
+      return [];
+    }
+    const dailyPv = analytics.daily_page_views;
+
+    const pvMap = new Map(dailyPv.map(d => [d.date, d.activity]));
+    const allDates = new Set(dailyPv.map(d => d.date));
+
+    const points = [...allDates].map(date => ({
+      date,
+      page_views: pvMap.get(date) ?? 0,
+      top_countries: topCountries,
+    })).sort((a, b) => stringCompare(a.date, b.date));
+
+    return filterStackedDatapointsByTimeRange(points, timeRange, customDateRange);
+  }, [analytics.daily_page_views, timeRange, customDateRange, topCountries, analyticsEnabled]);
+
+  const revenueHoverData = useMemo<RevenueHoverDataPoint[]>(() => {
+    if (!paymentsEnabled) {
+      return [];
+    }
+
+    const points = analytics.daily_revenue.map(d => ({
+      date: d.date,
+      new_cents: d.new_cents,
+      refund_cents: d.refund_cents,
+    })).sort((a, b) => stringCompare(a.date, b.date));
+
+    return filterStackedDatapointsByTimeRange(points, timeRange, customDateRange);
+  }, [analytics.daily_revenue, timeRange, customDateRange, paymentsEnabled]);
+
+  const analyticsOuterStats = useMemo<AnalyticsStatPill[]>(() => {
+    const totalUsers = data.total_users;
+    const mau = Math.min(auth.mau, totalUsers);
+    const totalEmailsSent = email.emails_sent;
+    return [
+      {
+        label: "Monthly active users",
+        value: formatCompact(mau),
+      },
+      {
+        label: "Total Emails Sent",
+        value: formatCompact(totalEmailsSent),
+      },
+      {
+        label: "Avg. Session time",
+        value: analyticsEnabled ? formatSeconds(analytics.avg_session_seconds) : "—",
+      },
+    ];
+  }, [auth.mau, email.emails_sent, analytics.avg_session_seconds, data.total_users, analyticsEnabled]);
+
+  const inChartPillValues = useMemo(() => {
+    const latestDauPoint = dauStackedData.at(-1);
+    const latestDau = latestDauPoint == null
+      ? 0
+      : latestDauPoint.new + latestDauPoint.retained + latestDauPoint.reactivated;
+    const previousDauPoint = dauStackedData.at(-2);
+    const previousDau = previousDauPoint == null
+      ? undefined
+      : previousDauPoint.new + previousDauPoint.retained + previousDauPoint.reactivated;
+    const visitorsTotalInRange = composedData.reduce((sum, row) => sum + row.visitors, 0);
+    const totalRevenueCentsInRange = composedData.reduce((sum, row) => sum + row.new_cents, 0);
+
+    const composedIndexByDate = new Map(allComposedData.map((row, index) => [row.date, index]));
+    const firstComposedPoint = composedData.at(0);
+    const composedCurrentStartIndex = firstComposedPoint == null ? -1 : (composedIndexByDate.get(firstComposedPoint.date) ?? -1);
+    const composedCurrentLength = composedData.length;
+    const composedPreviousStartIndex = composedCurrentStartIndex - composedCurrentLength;
+    const composedPreviousEndIndex = composedCurrentStartIndex - 1;
+    const previousComposedWindow = composedPreviousStartIndex < 0
+      ? []
+      : allComposedData.slice(composedPreviousStartIndex, composedPreviousEndIndex + 1);
+    const hasFullPreviousComposedWindow = previousComposedWindow.length === composedCurrentLength && composedCurrentLength > 0;
+    const previousVisitorsTotal = previousComposedWindow.reduce((sum, row) => sum + row.visitors, 0);
+    const previousRevenueTotalCents = previousComposedWindow.reduce((sum, row) => sum + row.new_cents, 0);
+
+    return {
+      dauTotal: formatCompact(latestDau),
+      dauLabel: "Daily Active Users",
+      dauDelta: previousDau == null ? undefined : calculatePeriodDelta(latestDau, previousDau),
+      visitorsTotal: analyticsEnabled ? formatCompact(visitorsTotalInRange) : "—",
+      visitorsLabel: "Unique Visitors",
+      visitorsDelta: analyticsEnabled && hasFullPreviousComposedWindow ? calculatePeriodDelta(visitorsTotalInRange, previousVisitorsTotal) : undefined,
+      revenueTotal: paymentsEnabled
+        ? formatUsdFromCents(totalRevenueCentsInRange)
+        : "—",
+      revenueLabel: "Revenue",
+      revenueDelta: paymentsEnabled && hasFullPreviousComposedWindow ? calculatePeriodDelta(totalRevenueCentsInRange, previousRevenueTotalCents) : undefined,
+    };
+  }, [allComposedData, composedData, dauStackedData, analyticsEnabled, paymentsEnabled]);
+
+  const gridContainerRef = useRef<HTMLDivElement>(null);
+  const [gridContainerWidth, setGridContainerWidth] = useState(0);
+  const [isLgViewport, setIsLgViewport] = useState(false);
+  useLayoutEffect(() => {
+    setGridContainerWidth(gridContainerRef.current?.getBoundingClientRect().width ?? 0);
+  }, []);
+  useLayoutEffect(() => {
+    const mediaQuery = window.matchMedia("(min-width: 1024px)");
+    const updateViewportMatch = () => {
+      setIsLgViewport(mediaQuery.matches);
+    };
 
+    updateViewportMatch();
+    mediaQuery.addEventListener("change", updateViewportMatch);
     return () => {
-      mediaQuery.removeEventListener('change', handler);
-      window.removeEventListener('resize', updateViewHeight);
+      mediaQuery.removeEventListener("change", updateViewportMatch);
     };
   }, []);
+  useResizeObserver(gridContainerRef, (entry) => setGridContainerWidth(entry.contentRect.width));
 
-  // Calculate grid height based on globe column width on lg screens
-  // height = min(max(viewHeight, globeWidth), globeWidth * 1.75)
-  const gridHeightFromGlobe = isLgScreen && showGlobe && shouldShowGlobeSection && globeColumnWidth > 0 && viewHeight > 0
-    ? Math.min(Math.max(viewHeight, globeColumnWidth), globeColumnWidth * 1.75)
-    : undefined;
-
-  // Track charts grid size to determine layout
-  const chartsGridRef = useRef<HTMLDivElement>(null);
-  const [chartsGridSize, setChartsGridSize] = useState<{ width: number, height: number }>({ width: 0, height: 0 });
-
-  useResizeObserver(chartsGridRef, (entry) => {
-    setChartsGridSize({ width: entry.contentRect.width, height: entry.contentRect.height });
-  });
-
-  // Determine chart layout based on charts grid dimensions:
-  // - If charts grid is at least 70% as tall as wide (tall/portrait), stack vertically
-  // - If charts grid is wide and less than 70% as tall, use 2 columns
-  const shouldUseTwoColumns = chartsGridSize.width > 400 && chartsGridSize.height > 0 && (chartsGridSize.height / chartsGridSize.width) < 0.7;
-
-  // Render a widget by ID
-  const renderWidget = (widgetId: WidgetId) => {
-    switch (widgetId) {
-      case 'apps': {
-        return <AppsWidget installedApps={installedApps} projectId={projectId} />;
-      }
-      case 'daily-active-users': {
-        return (
-          <DailyActiveUsersWidget
-            data={data}
-            projectId={projectId}
-            router={router}
-            timeRange={timeRange}
-          />
-        );
-      }
-      case 'daily-sign-ups': {
-        return (
-          <DailySignUpsWidget
-            data={data}
-            projectId={projectId}
-            router={router}
-            timeRange={timeRange}
-          />
-        );
-      }
-      default: {
-        return null;
-      }
+  const GLOBE_MIN_WIDTH = 352.5;
+  const globeColumnWidth = (() => {
+    if (!gridContainerWidth) return 0;
+    const gap = 20;
+    const availableWidth = gridContainerWidth - gap * 11;
+    return (availableWidth / 12) * 5 + gap * 4;
+  })();
+  const shouldShowGlobe = isLgViewport && globeColumnWidth >= GLOBE_MIN_WIDTH;
+  const analyticsOuterStatsForLayout = useMemo<AnalyticsStatPill[]>(() => {
+    if (shouldShowGlobe) {
+      return analyticsOuterStats;
     }
-  };
 
-  // Group widgets for grid layout
-  const chartWidgets = rightWidgets.filter(id => id === 'daily-active-users' || id === 'daily-sign-ups');
-  const statWidgets = rightWidgets.filter(id => id === 'apps');
+    return [
+      {
+        label: "Total Users",
+        value: formatCompact(data.total_users),
+      },
+      ...analyticsOuterStats,
+    ];
+  }, [shouldShowGlobe, analyticsOuterStats, data.total_users]);
 
   return (
-    <div className="relative pb-4 sm:pb-6">
+    <div className="pb-6 flex flex-col gap-5">
+
       <div
         ref={gridContainerRef}
         className={cn(
-          "grid gap-4 sm:gap-5 min-h-[400px]",
-          gridHeightFromGlobe ? "" : "min-h-[calc(100vh-180px)]",
-          showGlobe ? "grid-cols-1 lg:grid-cols-12" : "grid-cols-1"
+          "grid gap-4 sm:gap-5 grid-cols-1 lg:grid-cols-12",
         )}
-        style={gridHeightFromGlobe ? { height: gridHeightFromGlobe } : undefined}
+        style={shouldShowGlobe
+          ? { minHeight: Math.max(400, Math.round(globeColumnWidth)) }
+          : { minHeight: 400 }}
       >
-        {/* Left Column: Globe - Hidden on mobile */}
-        {showGlobe && shouldShowGlobeSection && (
-          <div data-walkthrough="overview-globe" className="hidden lg:flex lg:col-span-5 h-full min-h-[300px] relative">
-            {/* Globe takes full space */}
+        {shouldShowGlobe && (
+          <div className={cn(
+            "hidden lg:flex lg:col-span-5 h-full relative",
+            "rounded-2xl bg-white/90 backdrop-blur-xl ring-1 ring-black/[0.06] shadow-sm",
+            "dark:bg-transparent dark:backdrop-blur-none dark:ring-0 dark:shadow-none dark:rounded-none",
+          )}>
             <div className="absolute inset-0 flex items-start justify-center">
               <GlobeSectionWithData includeAnonymous={includeAnonymous} />
             </div>
-            {/* Total Users overlay */}
-            <div className="absolute top-0 left-0 px-1 z-10">
+            <div className="absolute top-0 left-0 px-5 pt-4 z-10 dark:px-1 dark:pt-0">
               <div className="flex items-center gap-2 mb-2">
                 <div className="p-1.5 rounded-lg bg-foreground/[0.04]">
                   <GlobeIcon className="h-3.5 w-3.5 text-muted-foreground" />
@@ -516,80 +1216,89 @@ function MetricsContent({
                 </span>
               </div>
               <div className="text-4xl font-bold tracking-tight text-foreground pl-0.5">
-                <Suspense fallback="...">
-                  <TotalUsersDisplay includeAnonymous={includeAnonymous} minimal />
-                </Suspense>
+                {data.total_users.toLocaleString()}
               </div>
             </div>
           </div>
         )}
 
-        {/* Right Column: Stats Grid */}
-        <div
-          className={cn(
-            "flex flex-col gap-12 h-full",
-            showGlobe && shouldShowGlobeSection ? "lg:col-span-7" : showGlobe ? "lg:col-span-12" : ""
-          )}
-        >
-          {/* Stat Widgets Row (Apps) */}
-          {statWidgets.length > 0 && (
-            <div className={cn(
-              "shrink-0 grid gap-4",
-              statWidgets.length === 1 ? "grid-cols-1" : "grid-cols-1 sm:grid-cols-2"
-            )}>
-              {statWidgets.map(widgetId => (
-                <div key={widgetId}>
-                  {renderWidget(widgetId)}
-                </div>
-              ))}
-            </div>
-          )}
+        <div className={cn(
+          "h-full",
+          shouldShowGlobe ? "lg:col-span-7" : "lg:col-span-12",
+        )}>
+          <AnalyticsChartWidget
+            composedData={composedData}
+            dauStackedData={filteredDauStackedData}
+            visitorsData={visitorsHoverData}
+            revenueData={revenueHoverData}
+            analyticsEnabled={analyticsEnabled}
+            paymentsEnabled={paymentsEnabled}
+            projectId={projectId}
+            outerStats={analyticsOuterStatsForLayout}
+            dauLabel={inChartPillValues.dauLabel}
+            dauTotal={inChartPillValues.dauTotal}
+            visitorsLabel={inChartPillValues.visitorsLabel}
+            revenueLabel={inChartPillValues.revenueLabel}
+            dauDelta={inChartPillValues.dauDelta}
+            visitorsTotal={inChartPillValues.visitorsTotal}
+            revenueTotal={inChartPillValues.revenueTotal}
+            visitorsDelta={inChartPillValues.visitorsDelta}
+            revenueDelta={inChartPillValues.revenueDelta}
+            compact={shouldShowGlobe}
+          />
+        </div>
+      </div>
 
-          {/* Charts Grid */}
-          {chartWidgets.length > 0 && (
-            <div
-              data-walkthrough="overview-metrics"
-              ref={chartsGridRef}
-              className={cn(
-                "flex-1 grid gap-4",
-                chartWidgets.length === 1
-                  ? "grid-cols-1"
-                  : shouldUseTwoColumns ? "grid-cols-2" : "grid-cols-1"
-              )}
-            >
-              {chartWidgets.map(widgetId => (
-                <div key={widgetId} className="min-h-[200px]">
-                  {renderWidget(widgetId)}
-                </div>
-              ))}
-            </div>
-          )}
+      <QuickAccessApps projectId={projectId} installedApps={installedApps} />
 
-          {/* Empty state when no widgets */}
-          {rightWidgets.length === 0 && !showGlobe && (
-            <div className="flex-1 flex items-center justify-center min-h-[300px]">
-              <div className="text-center p-10">
-                <div className="p-3 rounded-2xl bg-foreground/[0.03] w-fit mx-auto mb-4">
-                  <SquaresFourIcon className="h-8 w-8 text-muted-foreground/40" />
-                </div>
-                <Typography variant="secondary" className="text-sm">
-                  No widgets enabled
-                </Typography>
-              </div>
-            </div>
-          )}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 min-h-0 lg:h-[340px]">
+        <div className="min-h-[340px] lg:min-h-0 lg:h-full">
+          <TabbedMetricsCard
+            config={dailySignUpsConfig}
+            chartData={data.daily_users}
+            stackedChartData={signUpsStackedData}
+            stackedLegendItems={[
+              { key: "new", label: "Sign-Ups", color: "hsl(152, 38%, 52%)" },
+            ]}
+            listData={data.recently_registered}
+            listTitle="Recent Sign-Ups"
+            projectId={projectId}
+            router={router}
+            compact
+            gradientColor="blue"
+            timeRange={timeRange}
+            customDateRange={customDateRange}
+          />
+        </div>
+        <div className="min-h-[340px] lg:min-h-0 lg:h-full">
+          <TabbedEmailsCard
+            stackedChartData={emailStackedData}
+            recentEmails={recentEmails}
+            timeRange={timeRange}
+            customDateRange={customDateRange}
+            compact
+          />
         </div>
       </div>
 
-      {/* Mobile Globe Notice */}
-      {showGlobe && (
-        <div className="lg:hidden mt-5 p-4 rounded-2xl bg-foreground/[0.02] ring-1 ring-foreground/[0.05] text-center">
-          <Typography variant="secondary" className="text-xs">
-            <GlobeIcon className="h-3.5 w-3.5 inline-block mr-1.5 -mt-0.5" />
-            Globe visualization is available on larger screens
-          </Typography>
-        </div>
-      )}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+        <DonutChartDisplay
+          datapoints={data.login_methods}
+          compact
+          height={180}
+          gradientColor="blue"
+        />
+        <EmailBreakdownCard
+          deliverabilityStatus={email.deliverability_status}
+          bounceRate={email.bounce_rate}
+          clickRate={email.click_rate}
+        />
+        <ReferrersWithAnalyticsCard
+          topReferrers={topReferrers}
+          analyticsEnabled={analyticsEnabled}
+          projectId={projectId}
+        />
+      </div>
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/ai-query-bar.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/ai-query-bar.tsx
new file mode 100644
index 0000000000..70ea162234
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/ai-query-bar.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import { SimpleTooltip } from "@/components/ui/simple-tooltip";
+import { cn } from "@/lib/utils";
+import {
+  EyeIcon,
+  PaperPlaneTiltIcon,
+  SparkleIcon,
+  SpinnerGapIcon,
+  XIcon,
+} from "@phosphor-icons/react";
+import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
+import { useCallback, useState, type KeyboardEvent } from "react";
+import type { AiQueryChat } from "./use-ai-query-chat";
+
+type AiQueryBarProps = {
+  chat: AiQueryChat,
+  /** Whether the AI has committed a query (drives the purple accent). */
+  isActive: boolean,
+  /** Invoked when the user clicks the eye button. */
+  onOpenDialog: () => void,
+  /** Invoked when the user clicks the reset (clear) button. */
+  onReset: () => void,
+};
+
+/**
+ * AI-powered search bar for the analytics tables page. Drops into the
+ * DataGridToolbar in place of the built-in quick-search input. Typing
+ * a message and pressing Enter sends a prompt to the shared AI chat;
+ * the AI responds by calling the `queryAnalytics` tool, and the
+ * extracted query drives the grid (via the parent component).
+ */
+export function AiQueryBar({
+  chat,
+  isActive,
+  onOpenDialog,
+  onReset,
+}: AiQueryBarProps) {
+  const [input, setInput] = useState("");
+
+  const handleSubmit = useCallback(() => {
+    const text = input.trim();
+    if (!text || chat.isResponding) return;
+    setInput("");
+    runAsynchronously(chat.sendMessage({ text }));
+  }, [input, chat]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit],
+  );
+
+  return (
+    <div className="flex min-w-0 flex-1 items-center gap-1.5">
+      <div
+        className={cn(
+          "group flex h-8 min-w-0 flex-1 items-center gap-2 rounded-xl px-2.5 sm:max-w-72",
+          "bg-background ring-1 transition-shadow",
+          isActive
+            ? "ring-purple-500/30 focus-within:ring-purple-500/50"
+            : "ring-black/[0.08] dark:ring-white/[0.08] focus-within:ring-foreground/[0.18]",
+        )}
+      >
+        <SparkleIcon
+          className={cn(
+            "h-3.5 w-3.5 shrink-0",
+            isActive ? "text-purple-400" : "text-muted-foreground/50",
+          )}
+        />
+        <input
+          type="text"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={
+            isActive ? "Refine with AI…" : "Ask about your analytics…"
+          }
+          className={cn(
+            "min-w-0 flex-1 bg-transparent text-xs outline-none",
+            "placeholder:text-muted-foreground/40",
+          )}
+          disabled={chat.isResponding}
+        />
+        {chat.isResponding && (
+          <SpinnerGapIcon className="h-3 w-3 shrink-0 animate-spin text-purple-400" />
+        )}
+        {!chat.isResponding && input.trim().length > 0 && (
+          <button
+            type="button"
+            onClick={handleSubmit}
+            className="shrink-0 rounded p-0.5 text-muted-foreground hover:text-purple-400 transition-colors hover:transition-none"
+            aria-label="Send"
+          >
+            <PaperPlaneTiltIcon className="h-3 w-3" />
+          </button>
+        )}
+        <SimpleTooltip tooltip="Open AI query builder">
+          <button
+            type="button"
+            onClick={onOpenDialog}
+            className={cn(
+              "shrink-0 rounded p-0.5 transition-colors hover:transition-none",
+              isActive
+                ? "text-purple-400 hover:text-purple-300"
+                : "text-muted-foreground/60 hover:text-foreground",
+            )}
+            aria-label="Open AI query builder"
+          >
+            <EyeIcon className="h-3 w-3" />
+          </button>
+        </SimpleTooltip>
+      </div>
+
+      {isActive && (
+        <SimpleTooltip tooltip="Clear AI query">
+          <button
+            type="button"
+            onClick={onReset}
+            className="shrink-0 rounded p-1 text-muted-foreground hover:text-foreground hover:bg-foreground/[0.06] transition-colors hover:transition-none"
+            aria-label="Clear AI query"
+          >
+            <XIcon className="h-3 w-3" />
+          </button>
+        </SimpleTooltip>
+      )}
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/ai-query-dialog.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/ai-query-dialog.tsx
new file mode 100644
index 0000000000..8359ea35fc
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/ai-query-dialog.tsx
@@ -0,0 +1,645 @@
+"use client";
+
+import { Button } from "@/components/ui";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { SimpleTooltip } from "@/components/ui/simple-tooltip";
+import { useUpdateConfig } from "@/lib/config-update";
+import { cn } from "@/lib/utils";
+import {
+  ArrowCounterClockwiseIcon,
+  CheckIcon,
+  CopyIcon,
+  FloppyDiskIcon,
+  LayoutIcon,
+  PaperPlaneTiltIcon,
+  SparkleIcon,
+  SpinnerGapIcon,
+  StopIcon,
+  TrashIcon,
+  UserIcon,
+  XIcon,
+} from "@phosphor-icons/react";
+import { generateSecureRandomString } from "@stackframe/stack-shared/dist/utils/crypto";
+import {
+  runAsynchronously,
+  runAsynchronouslyWithAlert,
+} from "@stackframe/stack-shared/dist/utils/promises";
+import type { UIMessage } from "@ai-sdk/react";
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent,
+} from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import type { CmdKPreviewProps } from "@/components/cmdk-commands";
+import { CreateDashboardPreview } from "@/components/commands/create-dashboard/create-dashboard-preview";
+import { useAdminApp } from "../../use-admin-app";
+import type { AiQueryChat } from "./use-ai-query-chat";
+
+// ─── Chat message rendering ─────────────────────────────────────────
+
+type OrderedPart =
+  | { kind: "text", text: string }
+  | { kind: "tool", id: string, state: string, query: string | null, error: string | null };
+
+function getOrderedParts(message: UIMessage): OrderedPart[] {
+  const parts: OrderedPart[] = [];
+  for (const [idx, part] of message.parts.entries()) {
+    if (part.type === "text") {
+      const text = (part as { type: "text", text: string }).text;
+      if (text.trim()) {
+        parts.push({ kind: "text", text });
+      }
+      continue;
+    }
+    if (!part.type.startsWith("tool-") || !part.type.endsWith("queryAnalytics")) continue;
+    const tp = part as {
+      type: string,
+      state: string,
+      input?: Record<string, unknown>,
+      output?: Record<string, unknown>,
+    };
+    const query =
+      typeof tp.input?.query === "string" ? (tp.input.query as string) : null;
+    const output = tp.output;
+    let errorMessage: string | null = null;
+    if (output && typeof output === "object") {
+      const success = (output as { success?: unknown }).success;
+      if (success === false) {
+        const err = (output as { error?: unknown }).error;
+        errorMessage = typeof err === "string" ? err : "Query failed";
+      }
+    }
+    parts.push({
+      kind: "tool",
+      id: `${message.id}-${idx}`,
+      state: tp.state,
+      query,
+      error: errorMessage,
+    });
+  }
+  return parts;
+}
+
+const UserMessageBubble = memo(function UserMessageBubble({
+  content,
+}: {
+  content: string,
+}) {
+  return (
+    <div className="flex items-start gap-2">
+      <div className="shrink-0 w-6 h-6 rounded-full bg-muted/50 flex items-center justify-center">
+        <UserIcon className="h-3 w-3 text-muted-foreground" />
+      </div>
+      <div className="flex-1 text-sm text-foreground whitespace-pre-wrap">
+        {content}
+      </div>
+    </div>
+  );
+});
+
+const AssistantMessageBubble = memo(function AssistantMessageBubble({
+  parts,
+  currentQuery,
+  onRewindToQuery,
+}: {
+  parts: OrderedPart[],
+  currentQuery: string | null,
+  onRewindToQuery: (query: string) => void,
+}) {
+  return (
+    <div className="flex items-start gap-2">
+      <div className="shrink-0 w-6 h-6 rounded-full bg-purple-500/10 flex items-center justify-center">
+        <SparkleIcon className="h-3 w-3 text-purple-400" />
+      </div>
+      <div className="flex-1 min-w-0 space-y-2">
+        {parts.map((part, idx) => {
+          if (part.kind === "text") {
+            return (
+              <div key={idx} className="prose prose-sm prose-invert max-w-none text-sm text-foreground/90 [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1">
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>{part.text}</ReactMarkdown>
+              </div>
+            );
+          }
+          const isActiveQuery = part.query != null && part.query === currentQuery;
+          return (
+            <div
+              key={part.id}
+              className={cn(
+                "rounded-md border px-2 py-1.5 text-[11px]",
+                part.error
+                  ? "border-red-500/30 bg-red-500/5 text-red-300"
+                  : part.state === "output-available"
+                    ? "border-emerald-500/20 bg-emerald-500/5 text-emerald-300"
+                    : "border-purple-500/20 bg-purple-500/5 text-purple-200",
+              )}
+            >
+              <div className="flex items-center gap-1.5">
+                {part.state !== "output-available" && !part.error && (
+                  <SpinnerGapIcon className="h-3 w-3 animate-spin" />
+                )}
+                <span className="font-medium">
+                  {part.error
+                    ? "Query failed"
+                    : part.state === "output-available"
+                      ? "Ran query"
+                      : "Building query"}
+                </span>
+                {!isActiveQuery && part.query && part.state === "output-available" && !part.error && (
+                  <>
+                    <div className="flex-1" />
+                    <SimpleTooltip tooltip="Rewind to this query">
+                      <button
+                        type="button"
+                        onClick={() => onRewindToQuery(part.query!)}
+                        className="p-0.5 rounded text-current opacity-60 hover:opacity-100 transition-opacity hover:transition-none"
+                        aria-label="Rewind to this query"
+                      >
+                        <ArrowCounterClockwiseIcon className="h-3 w-3" />
+                      </button>
+                    </SimpleTooltip>
+                  </>
+                )}
+              </div>
+              {part.error && (
+                <p className="mt-1 font-mono text-[10px] opacity-90">
+                  {part.error}
+                </p>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+});
+
+// ─── Save query sub-dialog ──────────────────────────────────────────
+
+function SaveQueryInlineDialog({
+  open,
+  onOpenChange,
+  sqlQuery,
+}: {
+  open: boolean,
+  onOpenChange: (open: boolean) => void,
+  sqlQuery: string,
+}) {
+  const adminApp = useAdminApp();
+  const project = adminApp.useProject();
+  const config = project.useConfig();
+  const updateConfig = useUpdateConfig();
+
+  const [displayName, setDisplayName] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (!open) {
+      setDisplayName("");
+      setSaving(false);
+    }
+  }, [open]);
+
+  const handleSave = useCallback(async () => {
+    if (!displayName.trim() || !sqlQuery.trim()) return;
+    setSaving(true);
+    try {
+      // Reuse an existing folder if available, otherwise create an
+      // "AI Queries" bucket on the fly so the save flow never stalls
+      // on folder management.
+      const existingFolders = Object.entries(config.analytics.queryFolders);
+      let folderId: string;
+      if (existingFolders.length > 0) {
+        folderId = existingFolders[0]![0];
+      } else {
+        folderId = generateSecureRandomString();
+        await updateConfig({
+          adminApp,
+          configUpdate: {
+            [`analytics.queryFolders.${folderId}`]: {
+              displayName: "AI Queries",
+              sortOrder: 0,
+              queries: {},
+            },
+          },
+          pushable: false,
+        });
+      }
+
+      const queryId = generateSecureRandomString();
+      await updateConfig({
+        adminApp,
+        configUpdate: {
+          [`analytics.queryFolders.${folderId}.queries.${queryId}`]: {
+            displayName: displayName.trim(),
+            sqlQuery,
+          },
+        },
+        pushable: false,
+      });
+      onOpenChange(false);
+    } finally {
+      setSaving(false);
+    }
+  }, [displayName, sqlQuery, config, updateConfig, adminApp, onOpenChange]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Save query</DialogTitle>
+        </DialogHeader>
+        <DialogBody>
+          <div className="space-y-3">
+            <div className="space-y-1.5">
+              <Label htmlFor="ai-save-query-name">Name</Label>
+              <Input
+                id="ai-save-query-name"
+                value={displayName}
+                onChange={(e) => setDisplayName(e.target.value)}
+                placeholder="Recent signups"
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    runAsynchronouslyWithAlert(handleSave);
+                  }
+                }}
+              />
+            </div>
+            <div className="rounded-md border border-border/50 bg-muted/30 p-2">
+              <pre className="whitespace-pre-wrap break-all font-mono text-[11px] text-muted-foreground max-h-32 overflow-auto">
+                {sqlQuery}
+              </pre>
+            </div>
+          </div>
+        </DialogBody>
+        <DialogFooter>
+          <Button variant="secondary" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => runAsynchronouslyWithAlert(handleSave)}
+            disabled={!displayName.trim() || saving}
+          >
+            {saving ? "Saving…" : "Save"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ─── Build dashboard sub-dialog ─────────────────────────────────────
+
+/**
+ * Reuses the existing `CreateDashboardPreview` component (the same
+ * one the Cmd+K command center uses) so the dashboard-builder
+ * experience is identical whether you enter it from the command
+ * palette or from the analytics AI query builder. Most of
+ * `CmdKPreviewProps` are unused by `CreateDashboardPreview` internally,
+ * so we pass no-op stubs for them.
+ */
+function BuildDashboardDialog({
+  open,
+  onOpenChange,
+  sqlQuery,
+}: {
+  open: boolean,
+  onOpenChange: (open: boolean) => void,
+  sqlQuery: string,
+}) {
+  // Synthesize a prompt that pre-seeds the SQL query as context so
+  // the dashboard the AI generates visualizes exactly these results.
+  const dashboardPrompt = useMemo(
+    () =>
+      `Build a dashboard that visualizes the results of this ClickHouse query:\n\n\`\`\`sql\n${sqlQuery}\n\`\`\``,
+    [sqlQuery],
+  );
+
+  const stubProps: Omit<CmdKPreviewProps, "query" | "onClose"> = {
+    isSelected: true,
+    registerOnFocus: () => {
+      // no-op
+    },
+    unregisterOnFocus: () => {
+      // no-op
+    },
+    onBlur: () => {
+      // no-op
+    },
+    registerNestedCommands: () => {
+      // no-op
+    },
+    navigateToNested: () => {
+      // no-op
+    },
+    depth: 0,
+    pathname: "",
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-5xl h-[80vh] p-0 overflow-hidden flex flex-col">
+        <DialogHeader className="px-4 pt-4 pb-2">
+          <DialogTitle className="flex items-center gap-2 text-sm">
+            <LayoutIcon className="h-4 w-4 text-cyan-500" />
+            Build dashboard
+          </DialogTitle>
+        </DialogHeader>
+        <div className="flex-1 min-h-0">
+          {open && (
+            <CreateDashboardPreview
+              query={dashboardPrompt}
+              onClose={() => onOpenChange(false)}
+              {...stubProps}
+            />
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ─── Main dialog ────────────────────────────────────────────────────
+
+type AiQueryDialogProps = {
+  open: boolean,
+  onOpenChange: (open: boolean) => void,
+  chat: AiQueryChat,
+  /** The query currently driving the data grid (may be `null` if none yet). */
+  currentQuery: string | null,
+};
+
+export function AiQueryDialog({
+  open,
+  onOpenChange,
+  chat,
+  currentQuery,
+}: AiQueryDialogProps) {
+  const [followUpInput, setFollowUpInput] = useState("");
+  const [copied, setCopied] = useState(false);
+  const [saveOpen, setSaveOpen] = useState(false);
+  const [buildOpen, setBuildOpen] = useState(false);
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Auto-scroll to the bottom whenever a new message arrives.
+  useEffect(() => {
+    if (!messagesContainerRef.current) return;
+    messagesContainerRef.current.scrollTop =
+      messagesContainerRef.current.scrollHeight;
+  }, [chat.messages, chat.isResponding]);
+
+  // Focus the input when the dialog opens so the user can keep typing.
+  useEffect(() => {
+    if (open) {
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  }, [open]);
+
+  const handleSend = useCallback(() => {
+    const text = followUpInput.trim();
+    if (!text || chat.isResponding) return;
+    setFollowUpInput("");
+    runAsynchronously(chat.sendMessage({ text }));
+  }, [followUpInput, chat]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend],
+  );
+
+  const handleCopy = useCallback(async () => {
+    if (!currentQuery) return;
+    await navigator.clipboard.writeText(currentQuery);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  }, [currentQuery]);
+
+  const canActOnQuery = Boolean(currentQuery && currentQuery.trim().length > 0);
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent noCloseButton className="max-w-3xl h-[80vh] p-0 overflow-hidden flex flex-col gap-0">
+          <DialogHeader className="px-5 pt-5 pb-3 border-b border-border/40">
+            <div className="flex items-center justify-between">
+              <DialogTitle className="flex items-center gap-2 text-sm">
+                <SparkleIcon className="h-4 w-4 text-purple-400" />
+                AI query builder
+              </DialogTitle>
+              <div className="flex items-center gap-1">
+                {chat.messages.length > 0 && (
+                  <SimpleTooltip tooltip="Clear chat">
+                    <button
+                      type="button"
+                      onClick={() => chat.setMessages([])}
+                      className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-foreground/[0.06] transition-colors hover:transition-none"
+                      aria-label="Clear chat"
+                    >
+                      <TrashIcon className="h-3.5 w-3.5" />
+                    </button>
+                  </SimpleTooltip>
+                )}
+                <button
+                  type="button"
+                  onClick={() => onOpenChange(false)}
+                  className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-foreground/[0.06] transition-colors hover:transition-none"
+                  aria-label="Close"
+                >
+                  <XIcon className="h-3.5 w-3.5" />
+                </button>
+              </div>
+            </div>
+          </DialogHeader>
+
+          {/* Current query */}
+          <div className="shrink-0 border-b border-border/40 bg-muted/20">
+            <div className="flex items-center justify-between px-5 py-2">
+              <Label className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+                Current query
+              </Label>
+              {canActOnQuery && (
+                <SimpleTooltip tooltip={copied ? "Copied!" : "Copy SQL"}>
+                  <button
+                    type="button"
+                    onClick={() => runAsynchronously(handleCopy())}
+                    className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-foreground/[0.06] transition-colors hover:transition-none"
+                  >
+                    {copied ? (
+                      <CheckIcon className="h-3 w-3 text-green-400" />
+                    ) : (
+                      <CopyIcon className="h-3 w-3" />
+                    )}
+                  </button>
+                </SimpleTooltip>
+              )}
+            </div>
+            <pre className="px-5 pb-3 whitespace-pre-wrap break-all font-mono text-[11px] text-foreground/90 max-h-32 overflow-auto">
+              {currentQuery?.trim() || (
+                <span className="text-muted-foreground italic">
+                  Ask the AI a question to generate a query.
+                </span>
+              )}
+            </pre>
+          </div>
+
+          {/* Chat thread */}
+          <div
+            ref={messagesContainerRef}
+            className="flex-1 min-h-0 overflow-y-auto px-5 py-4 space-y-4"
+          >
+            {chat.messages.length === 0 && (
+              <div className="flex flex-col items-center justify-center h-full text-center gap-2">
+                <div className="w-10 h-10 rounded-full bg-purple-500/10 flex items-center justify-center">
+                  <SparkleIcon className="h-4 w-4 text-purple-400" />
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  Describe what you want to see.
+                </p>
+                <p className="text-[11px] text-muted-foreground/70 max-w-sm">
+                  Try: &ldquo;daily signups over the last 30 days&rdquo; or
+                  &ldquo;top 10 users by event count this week&rdquo;.
+                </p>
+              </div>
+            )}
+
+            {chat.messages.map((message) => {
+              if (message.role === "user") {
+                const text = message.parts
+                  .filter((p): p is { type: "text", text: string } => p.type === "text")
+                  .map((p) => p.text)
+                  .join("");
+                return (
+                  <UserMessageBubble key={message.id} content={text} />
+                );
+              }
+              const parts = getOrderedParts(message);
+              if (parts.length === 0) return null;
+              return (
+                <AssistantMessageBubble
+                  key={message.id}
+                  parts={parts}
+                  currentQuery={currentQuery}
+                  onRewindToQuery={chat.rewindToQuery}
+                />
+              );
+            })}
+
+            {chat.isResponding && (
+              <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                <SpinnerGapIcon className="h-3 w-3 animate-spin text-purple-400" />
+                Thinking…
+              </div>
+            )}
+
+            {chat.error && (
+              <div className="rounded-md border border-red-500/30 bg-red-500/5 px-3 py-2 text-[12px] text-red-300">
+                {chat.error.message || "Failed to get a response."}
+              </div>
+            )}
+          </div>
+
+          {/* Input */}
+          <div className="shrink-0 border-t border-border/40 px-5 py-3">
+            <div className="flex items-center gap-2 rounded-md bg-background/60 px-3 py-1.5 ring-1 ring-foreground/[0.08] focus-within:ring-purple-500/30 transition-shadow">
+              <input
+                ref={inputRef}
+                type="text"
+                value={followUpInput}
+                onChange={(e) => setFollowUpInput(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder="Refine the query…"
+                className="flex-1 min-w-0 bg-transparent text-sm outline-none placeholder:text-muted-foreground/60"
+                disabled={chat.isResponding}
+              />
+              {chat.isResponding ? (
+                <SimpleTooltip tooltip="Stop generating">
+                  <button
+                    type="button"
+                    onClick={() => void chat.stop()}
+                    className="shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground transition-colors hover:transition-none"
+                    aria-label="Stop generating"
+                  >
+                    <StopIcon weight="fill" className="h-3.5 w-3.5" />
+                  </button>
+                </SimpleTooltip>
+              ) : (
+                <button
+                  type="button"
+                  onClick={handleSend}
+                  disabled={!followUpInput.trim()}
+                  className={cn(
+                    "shrink-0 rounded p-0.5 text-muted-foreground",
+                    "hover:text-purple-400 disabled:opacity-40 disabled:hover:text-muted-foreground",
+                    "transition-colors hover:transition-none",
+                  )}
+                  aria-label="Send"
+                >
+                  <PaperPlaneTiltIcon className="h-3.5 w-3.5" />
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* Actions */}
+          <DialogFooter className="px-5 py-3 border-t border-border/40 sm:justify-between gap-2">
+            <span className="text-[11px] text-muted-foreground">
+              Save the query or turn it into a live dashboard.
+            </span>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="secondary"
+                size="sm"
+                disabled={!canActOnQuery}
+                onClick={() => setSaveOpen(true)}
+                className="gap-1.5"
+              >
+                <FloppyDiskIcon className="h-3.5 w-3.5" />
+                Save query
+              </Button>
+              <Button
+                size="sm"
+                disabled={!canActOnQuery}
+                onClick={() => setBuildOpen(true)}
+                className="gap-1.5"
+              >
+                <LayoutIcon className="h-3.5 w-3.5" />
+                Build dashboard
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <SaveQueryInlineDialog
+        open={saveOpen}
+        onOpenChange={setSaveOpen}
+        sqlQuery={currentQuery ?? ""}
+      />
+      <BuildDashboardDialog
+        open={buildOpen}
+        onOpenChange={setBuildOpen}
+        sqlQuery={currentQuery ?? ""}
+      />
+    </>
+  );
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/page-client.tsx
index a3dca3d18a..e53123b26e 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/page-client.tsx
@@ -1,654 +1,221 @@
 "use client";
 
 import { Link } from "@/components/link";
-import { Alert, Button, Skeleton, Typography } from "@/components/ui";
-import {
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogHeader,
-  DialogTitle
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { SimpleTooltip } from "@/components/ui/simple-tooltip";
-import { Switch } from "@/components/ui/switch";
-import { useFromNow } from "@/hooks/use-from-now";
+import { Button, Typography } from "@/components/ui";
 import { cn } from "@/lib/utils";
-import {
-  ArrowClockwiseIcon,
-  ArrowDownIcon,
-  ArrowUpIcon,
-  CalendarIcon,
-  ClockIcon,
-  MagnifyingGlassIcon,
-  SparkleIcon,
-} from "@phosphor-icons/react";
-import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { ArrowClockwiseIcon, CodeIcon } from "@phosphor-icons/react";
+import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
+import { useCallback, useState } from "react";
 import { AppEnabledGuard } from "../../app-enabled-guard";
 import { PageLayout } from "../../page-layout";
-import { useAdminApp } from "../../use-admin-app";
+import { AiQueryBar } from "./ai-query-bar";
+import { AiQueryDialog } from "./ai-query-dialog";
 import {
-  isDateValue,
-  isJsonValue,
-  JsonValue,
-  parseClickHouseDate,
-  RowData,
-} from "../shared";
+  QueryDataGrid,
+  type QueryDataGridMode,
+} from "./query-data-grid";
+import { useAiQueryChat } from "./use-ai-query-chat";
 
-// Context for date display preference (specific to tables page for toggle feature)
-const DateDisplayContext = createContext<{ relative: boolean }>({ relative: true });
+// ─── Available tables ───────────────────────────────────────────────
 
-// Available tables in the analytics database
-const AVAILABLE_TABLES = new Map([
-  ["events", {
-    displayName: "Events",
-    baseQuery: "SELECT * FROM default.events",
-    defaultOrderBy: "event_at",
-    defaultOrderDir: "DESC" as const,
-  }],
-  ["users", {
-    displayName: "Users",
-    baseQuery: "SELECT * FROM default.users",
-    defaultOrderBy: "signed_up_at",
-    defaultOrderDir: "DESC" as const,
-  }],
-  ["contact_channels", {
-    displayName: "Contact Channels",
-    baseQuery: "SELECT * FROM default.contact_channels",
-    defaultOrderBy: "created_at",
-    defaultOrderDir: "DESC" as const,
-  }],
-  ["teams", {
-    displayName: "Teams",
-    baseQuery: "SELECT * FROM default.teams",
-    defaultOrderBy: "created_at",
-    defaultOrderDir: "DESC" as const,
-  }],
-  ["team_member_profiles", {
-    displayName: "Team Member Profiles",
-    baseQuery: "SELECT * FROM default.team_member_profiles",
-    defaultOrderBy: "created_at",
-    defaultOrderDir: "DESC" as const,
-  }],
-  ["team_permissions", {
-    displayName: "Team Permissions",
-    baseQuery: "SELECT * FROM default.team_permissions",
-    defaultOrderBy: "created_at",
-    defaultOrderDir: "DESC" as const,
-  }],
-  ["team_invitations", {
-    displayName: "Team Invitations",
-    baseQuery: "SELECT * FROM default.team_invitations",
-    defaultOrderBy: "created_at",
-    defaultOrderDir: "DESC" as const,
-  }],
-  ["email_outboxes", {
-    displayName: "Email Outboxes",
-    baseQuery: "SELECT * FROM default.email_outboxes",
-    defaultOrderBy: "created_at",
-    defaultOrderDir: "DESC" as const,
-  }],
-  ["project_permissions", {
-    displayName: "Project Permissions",
-    baseQuery: "SELECT * FROM default.project_permissions",
-    defaultOrderBy: "created_at",
-    defaultOrderDir: "DESC" as const,
-  }],
-  ["notification_preferences", {
-    displayName: "Notification Preferences",
-    baseQuery: "SELECT * FROM default.notification_preferences",
-    defaultOrderBy: "user_id",
-    defaultOrderDir: "DESC" as const,
-  }],
-  ["refresh_tokens", {
-    displayName: "Refresh Tokens",
-    baseQuery: "SELECT * FROM default.refresh_tokens",
-    defaultOrderBy: "created_at",
-    defaultOrderDir: "DESC" as const,
-  }],
-  ["connected_accounts", {
-    displayName: "Connected Accounts",
-    baseQuery: "SELECT * FROM default.connected_accounts",
-    defaultOrderBy: "created_at",
-    defaultOrderDir: "DESC" as const,
-  }],
-]);
+type TableConfig = {
+  displayName: string,
+  baseQuery: string,
+  defaultOrderBy: string,
+  defaultOrderDir: "asc" | "desc",
+};
 
 type TableId = string;
-type SortDir = "ASC" | "DESC";
-
-const PAGE_SIZE = 50;
-
-// Component for displaying dates with toggle support (specific to tables page)
-function DateValue({ value }: { value: string }) {
-  const { relative } = useContext(DateDisplayContext);
-  const date = parseClickHouseDate(value);
-  const fromNow = useFromNow(date);
-
-  if (relative) {
-    return (
-      <SimpleTooltip tooltip={date.toLocaleString()}>
-        <span className="cursor-help">{fromNow}</span>
-      </SimpleTooltip>
-    );
-  }
-
-  return <span>{date.toLocaleString()}</span>;
-}
-
-// Format a cell value for display
-function CellValue({ value, truncate = true }: { value: unknown, truncate?: boolean }) {
-  if (value === null || value === undefined) {
-    return <span className="text-muted-foreground/50">—</span>;
-  }
-
-  if (isDateValue(value)) {
-    return <DateValue value={value} />;
-  }
-
-  if (isJsonValue(value)) {
-    return <JsonValue value={value} truncate={truncate} />;
-  }
-
-  const str = String(value);
-  if (truncate && str.length > 100) {
-    return (
-      <SimpleTooltip tooltip={str}>
-        <span className="cursor-help">{str.slice(0, 97)}...</span>
-      </SimpleTooltip>
-    );
-  }
-
-  return <span>{str}</span>;
-}
-
-// Row detail dialog
-function RowDetailDialog({
-  row,
-  columns,
-  open,
-  onOpenChange,
-}: {
-  row: RowData | null,
-  columns: string[],
-  open: boolean,
-  onOpenChange: (open: boolean) => void,
-}) {
-  if (!row) return null;
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl max-h-[80vh]">
-        <DialogHeader>
-          <DialogTitle>Row Details</DialogTitle>
-        </DialogHeader>
-        <DialogBody>
-          <div className="space-y-4">
-            {columns.map((column) => (
-              <div key={column} className="space-y-1">
-                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                  {column}
-                </Label>
-                <div className="font-mono text-sm bg-muted/30 rounded px-3 py-2 overflow-auto max-h-48">
-                  {isJsonValue(row[column]) ? (
-                    <pre className="whitespace-pre-wrap break-all">
-                      {JSON.stringify(row[column], null, 2)}
-                    </pre>
-                  ) : (
-                    <CellValue value={row[column]} truncate={false} />
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-        </DialogBody>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-// Column header with sort
-function ColumnHeader({
-  column,
-  sortColumn,
-  sortDir,
-  onSort,
-}: {
-  column: string,
-  sortColumn: string | null,
-  sortDir: SortDir,
-  onSort: (column: string) => void,
-}) {
-  const isSorted = sortColumn === column;
 
-  return (
-    <button
-      onClick={() => onSort(column)}
-      className={cn(
-        "flex items-center gap-1 text-left font-mono text-xs font-medium",
-        "text-muted-foreground hover:text-foreground transition-colors hover:transition-none",
-        isSorted && "text-foreground"
-      )}
-    >
-      <span>{column}</span>
-      {isSorted && (
-        sortDir === "ASC"
-          ? <ArrowUpIcon className="h-3 w-3" />
-          : <ArrowDownIcon className="h-3 w-3" />
-      )}
-    </button>
-  );
-}
-
-// Virtualized flat table component
-function VirtualizedFlatTable({
-  columns,
-  rows,
-  onRowClick,
-  onLoadMore,
-  hasMore,
-  loadingMore,
-  sortColumn,
-  sortDir,
-  onSort,
-  refreshing = false,
-}: {
-  columns: string[],
-  rows: RowData[],
-  onRowClick: (row: RowData) => void,
-  onLoadMore: () => void,
-  hasMore: boolean,
-  loadingMore: boolean,
-  sortColumn: string | null,
-  sortDir: SortDir,
-  onSort: (column: string) => void,
-  refreshing?: boolean,
-}) {
-  const parentRef = useRef<HTMLDivElement>(null);
-
-  const rowVirtualizer = useVirtualizer({
-    count: rows.length + (hasMore ? 1 : 0), // +1 for loading indicator
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 40,
-    overscan: 10,
-  });
-
-  // Trigger load more when scrolling near the end
-  const virtualItems = rowVirtualizer.getVirtualItems();
-  const lastItemIndex = virtualItems.length > 0 ? virtualItems[virtualItems.length - 1]?.index ?? -1 : -1;
-
-  useEffect(() => {
-    if (lastItemIndex >= rows.length - 10 && hasMore && !loadingMore) {
-      onLoadMore();
-    }
-  }, [lastItemIndex, rows.length, hasMore, loadingMore, onLoadMore]);
-
-  // Column widths - distribute based on content type
-  const columnWidths = useMemo(() => {
-    const widths = new Map<string, string>();
-    columns.forEach((col) => {
-      if (col.includes("id") && col !== "project_id") {
-        widths.set(col, "minmax(280px, 1fr)");
-      } else if (col.includes("_at") || col.includes("date")) {
-        widths.set(col, "minmax(120px, 150px)");
-      } else if (col === "data" || col.includes("json")) {
-        widths.set(col, "minmax(200px, 2fr)");
-      } else if (col === "event_type" || col === "type") {
-        widths.set(col, "minmax(120px, 180px)");
-      } else {
-        widths.set(col, "minmax(100px, 1fr)");
-      }
-    });
-    return widths;
-  }, [columns]);
-
-  const gridTemplateColumns = columns.map((col) => columnWidths.get(col) ?? "1fr").join(" ");
-
-  // Calculate minimum content width based on columns
-  const minContentWidth = columns.length * 150;
-
-  return (
-    <div className="flex flex-col flex-1 min-h-0 overflow-hidden relative">
-      {/* Refresh loading overlay */}
-      {refreshing && (
-        <div className="absolute inset-0 bg-background/60 backdrop-blur-[1px] z-20 flex items-center justify-center">
-          <div className="flex items-center gap-3 px-4 py-2 rounded-lg bg-background/90 border border-border/50 shadow-lg">
-            <div className="h-4 w-4 border-2 border-muted-foreground/30 border-t-muted-foreground rounded-full animate-spin" />
-            <span className="text-sm text-muted-foreground">Refreshing...</span>
-          </div>
-        </div>
-      )}
-      {/* Single scroll container for both header and body - handles horizontal scroll */}
-      <div
-        ref={parentRef}
-        className="flex-1 overflow-auto"
-      >
-        {/* Inner container with min-width for horizontal scrolling */}
-        <div style={{ minWidth: `${minContentWidth}px` }}>
-          {/* Sticky header */}
-          <div
-            className="grid gap-4 pl-4 pr-16 py-2 border-b border-border/50 bg-muted/40 backdrop-blur-sm sticky top-0 z-10"
-            style={{ gridTemplateColumns }}
-          >
-            {columns.map((column) => (
-              <ColumnHeader
-                key={column}
-                column={column}
-                sortColumn={sortColumn}
-                sortDir={sortDir}
-                onSort={onSort}
-              />
-            ))}
-          </div>
-
-          {/* Virtualized rows container */}
-          <div
-            style={{
-              height: `${rowVirtualizer.getTotalSize()}px`,
-              width: "100%",
-              position: "relative",
-            }}
-          >
-            {rowVirtualizer.getVirtualItems().map((virtualRow) => {
-              const isLoaderRow = virtualRow.index >= rows.length;
-              const row = rows[virtualRow.index];
-
-              if (isLoaderRow) {
-                return (
-                  <div
-                    key="loader"
-                    className="absolute left-0 right-0 flex items-center justify-center py-4"
-                    style={{
-                      top: `${virtualRow.start}px`,
-                      height: `${virtualRow.size}px`,
-                    }}
-                  >
-                    {loadingMore ? (
-                      <div className="flex items-center gap-2 text-muted-foreground text-sm">
-                        <div className="h-4 w-4 border-2 border-muted-foreground/30 border-t-muted-foreground rounded-full animate-spin" />
-                        Loading more...
-                      </div>
-                    ) : (
-                      <span className="text-muted-foreground text-sm">Scroll to load more</span>
-                    )}
-                  </div>
-                );
-              }
+const AVAILABLE_TABLES = new Map<TableId, TableConfig>([
+  [
+    "events",
+    {
+      displayName: "Events",
+      baseQuery: "SELECT * FROM default.events",
+      defaultOrderBy: "event_at",
+      defaultOrderDir: "desc",
+    },
+  ],
+  [
+    "users",
+    {
+      displayName: "Users",
+      baseQuery: "SELECT * FROM default.users",
+      defaultOrderBy: "signed_up_at",
+      defaultOrderDir: "desc",
+    },
+  ],
+  [
+    "contact_channels",
+    {
+      displayName: "Contact Channels",
+      baseQuery: "SELECT * FROM default.contact_channels",
+      defaultOrderBy: "created_at",
+      defaultOrderDir: "desc",
+    },
+  ],
+  [
+    "teams",
+    {
+      displayName: "Teams",
+      baseQuery: "SELECT * FROM default.teams",
+      defaultOrderBy: "created_at",
+      defaultOrderDir: "desc",
+    },
+  ],
+  [
+    "team_member_profiles",
+    {
+      displayName: "Team Member Profiles",
+      baseQuery: "SELECT * FROM default.team_member_profiles",
+      defaultOrderBy: "created_at",
+      defaultOrderDir: "desc",
+    },
+  ],
+  [
+    "team_permissions",
+    {
+      displayName: "Team Permissions",
+      baseQuery: "SELECT * FROM default.team_permissions",
+      defaultOrderBy: "created_at",
+      defaultOrderDir: "desc",
+    },
+  ],
+  [
+    "team_invitations",
+    {
+      displayName: "Team Invitations",
+      baseQuery: "SELECT * FROM default.team_invitations",
+      defaultOrderBy: "created_at",
+      defaultOrderDir: "desc",
+    },
+  ],
+  [
+    "email_outboxes",
+    {
+      displayName: "Email Outboxes",
+      baseQuery: "SELECT * FROM default.email_outboxes",
+      defaultOrderBy: "created_at",
+      defaultOrderDir: "desc",
+    },
+  ],
+  [
+    "project_permissions",
+    {
+      displayName: "Project Permissions",
+      baseQuery: "SELECT * FROM default.project_permissions",
+      defaultOrderBy: "created_at",
+      defaultOrderDir: "desc",
+    },
+  ],
+  [
+    "notification_preferences",
+    {
+      displayName: "Notification Preferences",
+      baseQuery: "SELECT * FROM default.notification_preferences",
+      defaultOrderBy: "user_id",
+      defaultOrderDir: "desc",
+    },
+  ],
+  [
+    "refresh_tokens",
+    {
+      displayName: "Refresh Tokens",
+      baseQuery: "SELECT * FROM default.refresh_tokens",
+      defaultOrderBy: "created_at",
+      defaultOrderDir: "desc",
+    },
+  ],
+  [
+    "connected_accounts",
+    {
+      displayName: "Connected Accounts",
+      baseQuery: "SELECT * FROM default.connected_accounts",
+      defaultOrderBy: "created_at",
+      defaultOrderDir: "desc",
+    },
+  ],
+]);
 
-              return (
-                <div
-                  key={virtualRow.index}
-                  className={cn(
-                    "absolute left-0 right-0 grid gap-4 pl-4 pr-16 items-center cursor-pointer",
-                    "border-b border-border/30 hover:bg-muted/30 transition-colors hover:transition-none",
-                    virtualRow.index % 2 === 0 ? "bg-transparent" : "bg-muted/10"
-                  )}
-                  style={{
-                    top: `${virtualRow.start}px`,
-                    height: `${virtualRow.size}px`,
-                    gridTemplateColumns,
-                  }}
-                  onClick={() => onRowClick(row)}
-                >
-                  {columns.map((column) => (
-                    <div key={column} className="font-mono text-xs truncate">
-                      <CellValue value={row[column]} />
-                    </div>
-                  ))}
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
+// ─── Per-table content ──────────────────────────────────────────────
 
 function TableContent({ tableId }: { tableId: TableId }) {
-  const adminApp = useAdminApp();
-  const [columns, setColumns] = useState<string[]>([]);
-  const [rows, setRows] = useState<RowData[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [loadingMore, setLoadingMore] = useState(false);
-  const [hasMore, setHasMore] = useState(true);
-  const [relativeDate, setRelativeDate] = useState(true);
-  const [selectedRow, setSelectedRow] = useState<RowData | null>(null);
-  const [detailDialogOpen, setDetailDialogOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [sortColumn, setSortColumn] = useState<string | null>(null);
-  const [sortDir, setSortDir] = useState<SortDir>("DESC");
-
-  const tableConfig = AVAILABLE_TABLES.get(tableId);
-
-  const loadData = useCallback(async (offset: number = 0, append: boolean = false, isRefresh: boolean = false) => {
-    if (!tableConfig) return;
-
-    if (append) {
-      setLoadingMore(true);
-    } else if (isRefresh) {
-      // For refresh, keep existing data visible and just show loading overlay
-      setLoading(true);
-    } else {
-      // Initial load - clear everything
-      setLoading(true);
-      setRows([]);
-    }
-    setError(null);
-
-    try {
-      const orderBy = sortColumn ?? tableConfig.defaultOrderBy;
-      const orderDir = sortColumn ? sortDir : tableConfig.defaultOrderDir;
-      const query = `${tableConfig.baseQuery} ORDER BY ${orderBy} ${orderDir} LIMIT ${PAGE_SIZE} OFFSET ${offset}`;
-
-      const response = await adminApp.queryAnalytics({
-        query,
-        include_all_branches: false,
-        timeout_ms: 30000,
-      });
-
-      const newRows = response.result as RowData[];
-      const newColumns = newRows.length > 0 ? Object.keys(newRows[0]) : [];
-
-      if (append) {
-        setRows((prev) => [...prev, ...newRows]);
-      } else {
-        setColumns(newColumns);
-        setRows(newRows);
-      }
-
-      setHasMore(newRows.length === PAGE_SIZE);
-    } catch (e: unknown) {
-      const message = e instanceof Error ? e.message : "Failed to load table data";
-      setError(message);
-    } finally {
-      setLoading(false);
-      setLoadingMore(false);
-    }
-  }, [adminApp, tableConfig, sortColumn, sortDir]);
-
-  // Auto-load data when the component mounts or sort changes
-  // If we already have rows, treat it as a refresh (keep data visible)
-  useEffect(() => {
-    const isRefresh = rows.length > 0;
-    runAsynchronouslyWithAlert(() => loadData(0, false, isRefresh));
-  }, [loadData]); // eslint-disable-line react-hooks/exhaustive-deps -- rows.length is intentionally not a dependency to avoid infinite loop
-
-  const handleLoadMore = useCallback(() => {
-    if (!loadingMore && hasMore) {
-      runAsynchronouslyWithAlert(() => loadData(rows.length, true));
-    }
-  }, [loadData, loadingMore, hasMore, rows.length]);
-
-  const handleSort = useCallback((column: string) => {
-    if (sortColumn === column) {
-      setSortDir((prev) => (prev === "ASC" ? "DESC" : "ASC"));
-    } else {
-      setSortColumn(column);
-      setSortDir("DESC");
-    }
-  }, [sortColumn]);
-
-  const handleRowClick = (row: RowData) => {
-    setSelectedRow(row);
-    setDetailDialogOpen(true);
-  };
-
-  const handleRefresh = useCallback(() => {
-    runAsynchronouslyWithAlert(() => loadData(0, false, true));
-  }, [loadData]);
-
-  // Filter rows based on search query
-  const filteredRows = useMemo(() => {
-    if (!searchQuery.trim()) return rows;
-    const query = searchQuery.toLowerCase();
-    return rows.filter((row) =>
-      columns.some((col) => {
-        const value = row[col];
-        if (value === null || value === undefined) return false;
-        const str = typeof value === "object" ? JSON.stringify(value) : String(value);
-        return str.toLowerCase().includes(query);
-      })
-    );
-  }, [rows, columns, searchQuery]);
-
-  if (loading && rows.length === 0) {
-    // If we have columns from a previous load, show them with skeleton rows
-    if (columns.length > 0) {
-      const gridTemplateColumns = columns.map(() => "1fr").join(" ");
-      return (
-        <div className="flex-1 flex flex-col min-h-0">
-          {/* Toolbar skeleton */}
-          <div className="flex items-center gap-4 pl-4 pr-16 py-3 border-b border-border/50">
-            <Skeleton className="h-9 w-64" />
-            <Skeleton className="h-9 w-24" />
-          </div>
-          {/* Header */}
-          <div
-            className="grid gap-4 pl-4 pr-16 py-2 border-b border-border/50 bg-muted/40"
-            style={{ gridTemplateColumns }}
-          >
-            {columns.map((column) => (
-              <span key={column} className="font-mono text-xs font-medium text-muted-foreground">
-                {column}
-              </span>
-            ))}
-          </div>
-          {/* Skeleton rows */}
-          <div className="flex-1 p-4">
-            <div className="space-y-1">
-              {Array.from({ length: 15 }).map((_, i) => (
-                <Skeleton key={i} className="h-10 w-full" />
-              ))}
-            </div>
-          </div>
-        </div>
-      );
-    }
-    // No columns yet - show simple skeleton
-    return (
-      <div className="flex-1 p-4">
-        <div className="space-y-1">
-          {Array.from({ length: 15 }).map((_, i) => (
-            <Skeleton key={i} className="h-10 w-full" />
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="flex-1 p-4 space-y-4">
-        <Alert variant="destructive">{error}</Alert>
-        <Button variant="outline" onClick={handleRefresh}>
-          Retry
-        </Button>
-      </div>
-    );
-  }
+  const tableConfig = AVAILABLE_TABLES.get(tableId) ?? throwErr(`Unknown analytics table: ${tableId}`);
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  // Shared AI chat state — feeds both the search bar and the eye
+  // dialog, so they operate on a single conversation thread.
+  const chat = useAiQueryChat();
+
+  const aiQuery = chat.latestQuery;
+  const isAiActive = aiQuery != null;
+
+  // When the AI has committed a query, it becomes the source of
+  // truth; otherwise fall back to the table's own default query.
+  const effectiveQuery = aiQuery ?? tableConfig.baseQuery;
+  const effectiveMode: QueryDataGridMode = isAiActive ? "one-shot" : "paginated";
+
+  // Default sort / search only apply while the AI is inactive — an
+  // AI-generated aggregate won't have an `event_at` column to sort on.
+  const defaultOrderBy = isAiActive ? undefined : tableConfig.defaultOrderBy;
+  const defaultOrderDir = isAiActive ? undefined : tableConfig.defaultOrderDir;
+
+  const handleResetChat = useCallback(() => {
+    chat.setMessages([]);
+  }, [chat]);
+
+  const aiSearchBar = (
+    <AiQueryBar
+      chat={chat}
+      isActive={isAiActive}
+      onOpenDialog={() => setDialogOpen(true)}
+      onReset={handleResetChat}
+    />
+  );
 
-  if (rows.length === 0) {
-    return (
-      <div className="flex-1 flex flex-col items-center justify-center gap-4">
-        <Typography variant="secondary">No data available</Typography>
-        <Button variant="outline" onClick={handleRefresh}>
-          <ArrowClockwiseIcon className="mr-2 h-4 w-4" />
-          Refresh
+  const renderToolbarExtra = useCallback(
+    (ctx: { rowCount: number, hasMore: boolean, reload: () => void }) => (
+      <div className="flex items-center gap-2">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={ctx.reload}
+          className="h-7 w-7"
+          title="Refresh"
+        >
+          <ArrowClockwiseIcon className="h-3.5 w-3.5" />
         </Button>
+        <span className="hidden sm:inline px-1 text-[11px] tabular-nums text-muted-foreground">
+          {ctx.hasMore
+            ? `${ctx.rowCount.toLocaleString()}+ rows`
+            : `${ctx.rowCount.toLocaleString()} rows`}
+        </span>
       </div>
-    );
-  }
+    ),
+    [],
+  );
 
   return (
-    <DateDisplayContext.Provider value={{ relative: relativeDate }}>
-      <div className="flex-1 flex flex-col min-h-0">
-        {/* Toolbar */}
-        <div className="flex items-center gap-4 pl-4 pr-16 py-3 border-b border-border/50 flex-wrap">
-          {/* Search */}
-          <div className="relative flex-1 max-w-sm">
-            <MagnifyingGlassIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-            <Input
-              placeholder="Search..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-9 h-8 bg-transparent border-border/50"
-            />
-          </div>
-
-          {/* Date toggle */}
-          <div className="flex items-center gap-2">
-            <SimpleTooltip tooltip={relativeDate ? "Relative dates" : "Absolute dates"}>
-              <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                <CalendarIcon className={cn("h-4 w-4", !relativeDate && "text-foreground")} />
-                <Switch
-                  checked={relativeDate}
-                  onCheckedChange={setRelativeDate}
-                />
-                <ClockIcon className={cn("h-4 w-4", relativeDate && "text-foreground")} />
-              </div>
-            </SimpleTooltip>
-          </div>
-
-          {/* Refresh */}
-          <Button variant="ghost" size="sm" onClick={handleRefresh} className="h-8">
-            <ArrowClockwiseIcon className="mr-2 h-4 w-4" />
-            Refresh
-          </Button>
-
-          {/* Row count */}
-          <span className="text-xs text-muted-foreground">
-            {filteredRows.length.toLocaleString()} rows
-            {hasMore && "+"}
-          </span>
-        </div>
-
-        {/* Table */}
-        <VirtualizedFlatTable
-          columns={columns}
-          rows={filteredRows}
-          onRowClick={handleRowClick}
-          onLoadMore={handleLoadMore}
-          hasMore={hasMore && !searchQuery.trim()}
-          loadingMore={loadingMore}
-          sortColumn={sortColumn}
-          sortDir={sortDir}
-          onSort={handleSort}
-          refreshing={loading && rows.length > 0}
-        />
-
-        <RowDetailDialog
-          row={selectedRow}
-          columns={columns}
-          open={detailDialogOpen}
-          onOpenChange={setDetailDialogOpen}
-        />
-      </div>
-    </DateDisplayContext.Provider>
+    <div className="flex flex-1 min-h-0 flex-col">
+      <QueryDataGrid
+        query={effectiveQuery}
+        mode={effectiveMode}
+        defaultOrderBy={defaultOrderBy}
+        defaultOrderDir={defaultOrderDir}
+        enableQuickSearchFilter={!isAiActive}
+        searchBar={aiSearchBar}
+        toolbarExtra={renderToolbarExtra}
+        exportFilename={`${tableId}-export`}
+      />
+
+      <AiQueryDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        chat={chat}
+        currentQuery={aiQuery}
+      />
+    </div>
   );
 }
 
@@ -658,21 +225,23 @@ export default function PageClient() {
   return (
     <AppEnabledGuard appId="analytics">
       <PageLayout fillWidth noPadding>
-        <div className="flex flex-1 min-h-0 overflow-hidden -mx-2">
-          {/* Left sidebar - table list (doesn't scroll, border extends full height) */}
-          <div className="w-48 flex-shrink-0 border-r border-border/50 flex flex-col pl-2">
-            <div className="flex-1 py-4 px-4">
-              <Typography className="px-3 mb-3 text-xs font-semibold uppercase tracking-wide text-foreground/70">Tables</Typography>
+        <div className="flex h-[calc(100vh-4.5rem)] max-h-[calc(100vh-4.5rem)] flex-1 min-h-0 overflow-hidden lg:-mx-2 dark:h-full dark:max-h-full">
+          {/* Left sidebar — hidden on mobile */}
+          <div className="hidden lg:flex h-full w-48 flex-shrink-0 flex-col overflow-hidden border-r border-border/50 pl-2">
+            <div className="flex-1 overflow-auto px-4 py-4">
+              <Typography className="px-3 mb-3 text-xs font-semibold uppercase tracking-wide text-foreground/70">
+                Tables
+              </Typography>
               <div className="space-y-1">
                 {[...AVAILABLE_TABLES.entries()].map(([id, config]) => (
                   <button
                     key={id}
-                    onClick={() => setSelectedTable(id as TableId)}
+                    onClick={() => setSelectedTable(id)}
                     className={cn(
                       "w-full text-left px-3 py-2 rounded-md text-sm transition-colors hover:transition-none",
                       selectedTable === id
                         ? "bg-blue-500/10 text-blue-600 dark:text-blue-400"
-                        : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                        : "text-muted-foreground hover:bg-muted hover:text-foreground",
                     )}
                   >
                     {config.displayName}
@@ -685,19 +254,21 @@ export default function PageClient() {
                 href="./queries"
                 className="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-muted-foreground hover:bg-muted hover:text-foreground transition-colors hover:transition-none w-full"
               >
-                <SparkleIcon className="h-4 w-4" />
+                <CodeIcon className="h-4 w-4" />
                 Queries
               </Link>
             </div>
           </div>
 
-          {/* Right content - table data (scrolls independently, extends to edge) */}
-          <div className="flex-1 min-w-0 flex flex-col overflow-hidden">
+          {/* Right content */}
+          <div className="flex h-full min-w-0 flex-1 flex-col overflow-hidden">
             {selectedTable ? (
               <TableContent key={selectedTable} tableId={selectedTable} />
             ) : (
               <div className="flex-1 flex items-center justify-center">
-                <Typography variant="secondary">Select a table to view its contents</Typography>
+                <Typography variant="secondary">
+                  Select a table to view its contents
+                </Typography>
               </div>
             )}
           </div>
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/query-data-grid.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/query-data-grid.tsx
new file mode 100644
index 0000000000..004f5f6fa7
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/query-data-grid.tsx
@@ -0,0 +1,676 @@
+"use client";
+
+import { Alert, Button, Typography } from "@/components/ui";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { SimpleTooltip } from "@/components/ui/simple-tooltip";
+import { ArrowClockwiseIcon } from "@phosphor-icons/react";
+import {
+  createDefaultDataGridState,
+  DataGrid,
+  DataGridToolbar,
+  useDataSource,
+  type DataGridColumnDef,
+  type DataGridDataSource,
+  type DataGridState,
+  type DataGridToolbarContext,
+} from "@stackframe/dashboard-ui-components";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { useAdminApp } from "../../use-admin-app";
+import {
+  isJsonValue,
+  JsonValue,
+  parseClickHouseDate,
+  type RowData,
+} from "../shared";
+
+// ─── Types ──────────────────────────────────────────────────────────
+
+export type QueryDataGridMode = "paginated" | "one-shot";
+
+/**
+ * Extended toolbar context exposed by QueryDataGrid on top of the
+ * underlying DataGrid toolbar context. Adds the async data source's
+ * reload / loading / pagination hints so a custom toolbar (e.g. an AI
+ * search bar + refresh button) can wire these up without duplicating
+ * state management.
+ */
+export type QueryDataGridToolbarContext<TRow = RowData> =
+  DataGridToolbarContext<TRow> & {
+    reload: () => void,
+    rowCount: number,
+    hasMore: boolean,
+    isLoading: boolean,
+    isRefetching: boolean,
+  };
+
+export type QueryDataGridProps = {
+  /**
+   * The SQL query to execute.
+   *
+   * - In `paginated` mode this is treated as a **base** query. The grid
+   *   wraps it with `WHERE` (from quick-search), `ORDER BY` (from sort),
+   *   `LIMIT` and `OFFSET` for infinite scroll, so it must be a simple
+   *   expression like `SELECT * FROM default.events` without its own
+   *   pagination / sort clauses.
+   * - In `one-shot` mode the query is executed as-is, wrapped only in a
+   *   subquery for sort/filter by the grid. Supply a full, self-contained
+   *   query (aggregates, joins, GROUP BYs, etc.) — the grid will not
+   *   touch its LIMIT.
+   */
+  query: string,
+  /** Execution mode. Defaults to `paginated`. */
+  mode?: QueryDataGridMode,
+  /** Page size for paginated mode. Defaults to 50. */
+  pageSize?: number,
+  /** Initial sort column. When omitted, no default sort is injected. */
+  defaultOrderBy?: string,
+  /** Initial sort direction. Defaults to `"desc"`. */
+  defaultOrderDir?: "asc" | "desc",
+  /**
+   * Whether the built-in quick-search input should be wired up as a
+   * client/server-side ILIKE filter. Defaults to `true` — when the
+   * caller provides no custom toolbar, typing in the search box filters
+   * rows across discovered columns. Set `false` (or hook up a custom
+   * toolbar that doesn't write to `state.quickSearch`) to opt out.
+   */
+  enableQuickSearchFilter?: boolean,
+  /**
+   * Custom toolbar renderer. Replaces the default toolbar entirely.
+   * Receives an extended context with `reload` / `rowCount` etc. on
+   * top of the built-in DataGrid toolbar context. Use this only when
+   * you need full control — in most cases prefer `searchBar` +
+   * `toolbarExtra`, which keep the built-in columns / export actions.
+   */
+  toolbar?: (ctx: QueryDataGridToolbarContext<RowData>) => ReactNode,
+  /**
+   * Replaces the toolbar's built-in quick-search input with a custom
+   * node (e.g. an AI-powered search bar). The rest of the default
+   * toolbar — Columns, Export, density — stays intact. Can be a node
+   * or a function receiving the extended context.
+   */
+  searchBar?:
+    | ReactNode
+    | ((ctx: QueryDataGridToolbarContext<RowData>) => ReactNode),
+  /**
+   * Extra content slotted into the default toolbar, to the LEFT of
+   * the built-in columns / export actions. Can be a node or a function
+   * receiving the extended context.
+   */
+  toolbarExtra?:
+    | ReactNode
+    | ((ctx: QueryDataGridToolbarContext<RowData>) => ReactNode),
+  /** Whether the default row-click-to-inspect dialog is enabled. Defaults to `true`. */
+  enableRowDetailDialog?: boolean,
+  /** Custom row click handler. Overrides the default row detail dialog. */
+  onRowClick?: (row: RowData) => void,
+  /** Called whenever the error state changes (null when cleared). */
+  onError?: (error: string | null) => void,
+  /** Called when the discovered schema changes. */
+  onSchemaChange?: (columns: string[]) => void,
+  /** Filename stem for CSV export (without extension). */
+  exportFilename?: string,
+  /** Custom empty state. */
+  emptyState?: ReactNode,
+  /** Show the default footer. Defaults to `false`. */
+  footer?: boolean,
+};
+
+export type QueryDataGridHandle = {
+  reload: () => void,
+  getDiscoveredColumns: () => string[],
+};
+
+const INTERNAL_ROW_ID_KEY = "__stack_row_id";
+
+// ─── Utility helpers ────────────────────────────────────────────────
+
+/** Detect whether a column name refers to a date/time value. */
+function isDateColumnName(name: string): boolean {
+  return name.endsWith("_at") || name === "date" || /(^|_)date($|_)/.test(name);
+}
+
+/** Pick a sensible initial width for a column based on its name. */
+function guessColumnWidth(colName: string): number {
+  if (colName.includes("id") && colName !== "project_id") return 280;
+  if (colName.includes("_at") || colName.includes("date")) return 170;
+  if (colName === "data" || colName.includes("json")) return 320;
+  if (colName === "event_type" || colName === "type") return 160;
+  return 150;
+}
+
+/**
+ * ClickHouse emits `"YYYY-MM-DD HH:MM:SS.mmm"` strings. The grid's
+ * default `new Date()` parser would interpret those as local time;
+ * this wrapper returns `null` for anything invalid so the grid falls
+ * back to `—`.
+ */
+function parseClickHouseDateOrNull(value: unknown): Date | null {
+  if (typeof value !== "string") return null;
+  const d = parseClickHouseDate(value);
+  return isNaN(d.getTime()) ? null : d;
+}
+
+function CellValue({
+  value,
+  truncate = true,
+}: {
+  value: unknown,
+  truncate?: boolean,
+}) {
+  if (value === null || value === undefined) {
+    return <span className="text-muted-foreground/50">—</span>;
+  }
+
+  if (isJsonValue(value)) {
+    return <JsonValue value={value} truncate={truncate} />;
+  }
+
+  const str = String(value);
+  if (truncate && str.length > 100) {
+    return (
+      <SimpleTooltip tooltip={str}>
+        <span className="cursor-help">{str.slice(0, 97)}...</span>
+      </SimpleTooltip>
+    );
+  }
+
+  return <span>{str}</span>;
+}
+
+function RowDetailDialog({
+  row,
+  columns,
+  open,
+  onOpenChange,
+}: {
+  row: RowData | null,
+  columns: string[],
+  open: boolean,
+  onOpenChange: (open: boolean) => void,
+}) {
+  if (!row) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[80vh]">
+        <DialogHeader>
+          <DialogTitle>Row Details</DialogTitle>
+        </DialogHeader>
+        <DialogBody>
+          <div className="space-y-4">
+            {columns.map((column) => (
+              <div key={column} className="space-y-1">
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                  {column}
+                </Label>
+                <div className="font-mono text-sm bg-muted/30 rounded px-3 py-2 overflow-auto max-h-48">
+                  {isJsonValue(row[column]) ? (
+                    <pre className="whitespace-pre-wrap break-all">
+                      {JSON.stringify(row[column], null, 2)}
+                    </pre>
+                  ) : (
+                    <CellValue value={row[column]} truncate={false} />
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ─── Query building ─────────────────────────────────────────────────
+
+type BuildQueryArgs = {
+  baseQuery: string,
+  mode: QueryDataGridMode,
+  orderBy: string | null,
+  orderDir: "ASC" | "DESC",
+  search: string,
+  searchableColumns: readonly string[],
+  pageSize: number,
+  offset: number,
+};
+
+function escapeLiteral(value: string): string {
+  return value.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+}
+
+function buildWhereClause(search: string, columns: readonly string[]): string {
+  if (!search || columns.length === 0) return "";
+  const escaped = escapeLiteral(search);
+  const clauses = columns
+    .map((c) => `toString(\`${c}\`) ILIKE '%${escaped}%'`)
+    .join(" OR ");
+  return ` WHERE ${clauses}`;
+}
+
+function buildFinalQuery(args: BuildQueryArgs): string {
+  const { baseQuery, mode, orderBy, orderDir, search, searchableColumns, pageSize, offset } = args;
+  const where = buildWhereClause(search, searchableColumns);
+  const orderClause = orderBy ? ` ORDER BY \`${orderBy}\` ${orderDir}` : "";
+  if (mode === "paginated") {
+    return `${baseQuery}${where}${orderClause} LIMIT ${pageSize} OFFSET ${offset}`;
+  }
+  // one-shot: wrap the (potentially complex) user query as a subquery
+  // so we can still layer sort/filter on top without touching the
+  // inner LIMIT. The outer LIMIT/OFFSET lets the grid paginate through
+  // the AI query's result set via infinite scroll.
+  return `SELECT * FROM (${baseQuery})${where}${orderClause} LIMIT ${pageSize} OFFSET ${offset}`;
+}
+
+// ─── Component ──────────────────────────────────────────────────────
+
+/**
+ * Reusable, modular DataGrid wrapper that runs a ClickHouse query and
+ * streams results into a DataGrid. Handles schema discovery, paginated
+ * vs one-shot execution, client/server-side sort/search, and row
+ * inspection — callers only need to supply a query and (optionally)
+ * override the toolbar or row click behaviour.
+ *
+ * @example
+ * ```tsx
+ * <QueryDataGrid
+ *   query="SELECT * FROM default.events"
+ *   mode="paginated"
+ *   defaultOrderBy="event_at"
+ * />
+ * ```
+ *
+ * @example with a custom toolbar (e.g. an AI search bar)
+ * ```tsx
+ * <QueryDataGrid
+ *   query={currentQuery}
+ *   mode="one-shot"
+ *   toolbar={(ctx) => <MyAiToolbar ctx={ctx} />}
+ * />
+ * ```
+ */
+export const QueryDataGrid = forwardRef<QueryDataGridHandle, QueryDataGridProps>(
+  function QueryDataGrid(
+    {
+      query,
+      mode = "paginated",
+      pageSize = 50,
+      defaultOrderBy,
+      defaultOrderDir = "desc",
+      enableQuickSearchFilter = true,
+      toolbar,
+      searchBar,
+      toolbarExtra,
+      enableRowDetailDialog = true,
+      onRowClick,
+      onError,
+      onSchemaChange,
+      exportFilename,
+      emptyState,
+      footer = false,
+    },
+    ref,
+  ) {
+    const adminApp = useAdminApp();
+
+    const [discoveredColumns, setDiscoveredColumns] = useState<string[]>([]);
+    const [error, setError] = useState<string | null>(null);
+    const [selectedRow, setSelectedRow] = useState<RowData | null>(null);
+    const [detailDialogOpen, setDetailDialogOpen] = useState(false);
+
+    // Ref mirror so the async generator (memoised against adminApp) can
+    // read the latest column list without being re-created every time
+    // the schema updates.
+    const discoveredColumnsRef = useRef<string[]>([]);
+    const queryRef = useRef(query);
+    queryRef.current = query;
+    const modeRef = useRef(mode);
+    modeRef.current = mode;
+    const enableSearchFilterRef = useRef(enableQuickSearchFilter);
+    enableSearchFilterRef.current = enableQuickSearchFilter;
+    const defaultOrderByRef = useRef(defaultOrderBy);
+    defaultOrderByRef.current = defaultOrderBy;
+    const defaultOrderDirRef = useRef(defaultOrderDir);
+    defaultOrderDirRef.current = defaultOrderDir;
+
+    const [gridState, setGridState] = useState<DataGridState>(() => {
+      const base = createDefaultDataGridState([]);
+      return {
+        ...base,
+        sorting: defaultOrderBy
+          ? [
+            {
+              columnId: defaultOrderBy,
+              direction: defaultOrderDir,
+            },
+          ]
+          : [],
+        pagination: { pageIndex: 0, pageSize },
+      };
+    });
+
+    // Whenever the query changes we want fresh columns + a reset sort
+    // so a leftover sort from a previous schema doesn't crash the
+    // next query (nonexistent column in ORDER BY).
+    useEffect(() => {
+      setDiscoveredColumns([]);
+      discoveredColumnsRef.current = [];
+      setError(null);
+      setGridState((prev) => ({
+        ...prev,
+        sorting: defaultOrderByRef.current
+          ? [
+            {
+              columnId: defaultOrderByRef.current,
+              direction: defaultOrderDirRef.current,
+            },
+          ]
+          : [],
+        pagination: { ...prev.pagination, pageIndex: 0 },
+        quickSearch: "",
+      }));
+    }, [query]);
+
+    useEffect(() => {
+      onError?.(error);
+    }, [error, onError]);
+
+    useEffect(() => {
+      onSchemaChange?.(discoveredColumns);
+    }, [discoveredColumns, onSchemaChange]);
+
+    const columns = useMemo<DataGridColumnDef<RowData>[]>(
+      () =>
+        discoveredColumns.map((col): DataGridColumnDef<RowData> => {
+          const isDate = isDateColumnName(col);
+          if (isDate) {
+            return {
+              id: col,
+              header: col,
+              accessor: (row) => row[col],
+              width: guessColumnWidth(col),
+              minWidth: 80,
+              sortable: true,
+              type: "dateTime",
+              parseValue: parseClickHouseDateOrNull,
+            };
+          }
+          return {
+            id: col,
+            header: col,
+            accessor: (row) => row[col],
+            width: guessColumnWidth(col),
+            minWidth: 80,
+            sortable: true,
+            type: "string",
+            renderCell: ({ value }) => <CellValue value={value} />,
+          };
+        }),
+      [discoveredColumns],
+    );
+
+    const dataSource = useMemo<DataGridDataSource<RowData>>(() => {
+      return async function* (params) {
+        setError(null);
+        try {
+          let orderBy: string | null = null;
+          let orderDir: "ASC" | "DESC" = "DESC";
+          if (params.sorting.length > 0) {
+            const first = params.sorting[0]!;
+            orderBy = first.columnId;
+            orderDir = first.direction === "asc" ? "ASC" : "DESC";
+          } else if (defaultOrderByRef.current) {
+            orderBy = defaultOrderByRef.current;
+            orderDir = defaultOrderDirRef.current === "asc" ? "ASC" : "DESC";
+          }
+
+          const gridPageSize = params.pagination.pageSize;
+          const offset = params.pagination.pageIndex * gridPageSize;
+
+          const search = params.quickSearch.trim();
+          const applyFilter = enableSearchFilterRef.current;
+
+          const finalQuery = buildFinalQuery({
+            baseQuery: queryRef.current,
+            mode: modeRef.current,
+            orderBy,
+            orderDir,
+            search: applyFilter ? search : "",
+            searchableColumns: discoveredColumnsRef.current,
+            pageSize: gridPageSize,
+            offset,
+          });
+
+          const response = await adminApp.queryAnalytics({
+            query: finalQuery,
+            include_all_branches: false,
+            timeout_ms: 30000,
+          });
+
+          const newRows = (response.result as RowData[]).map((row, index) => ({
+            ...row,
+            [INTERNAL_ROW_ID_KEY]: `${offset + index}`,
+          }));
+
+          if (newRows.length > 0) {
+            const cols = Object.keys(newRows[0]!).filter((col) => col !== INTERNAL_ROW_ID_KEY);
+            discoveredColumnsRef.current = cols;
+            setDiscoveredColumns((prev) => {
+              if (prev.length === cols.length && prev.every((c, i) => c === cols[i])) {
+                return prev;
+              }
+              return cols;
+            });
+          }
+
+          yield {
+            rows: newRows,
+            hasMore: newRows.length === gridPageSize,
+          };
+        } catch (e: unknown) {
+          const message =
+            e instanceof Error ? e.message : "Failed to load query results";
+          setError(message);
+          yield { rows: [], hasMore: false };
+        }
+      };
+    }, [adminApp]);
+
+    const getRowId = useCallback((row: RowData): string => {
+      if (typeof row[INTERNAL_ROW_ID_KEY] === "string") return row[INTERNAL_ROW_ID_KEY];
+      if (row.id != null) return String(row.id);
+      if (row.event_id != null) return String(row.event_id);
+      throw new Error("QueryDataGrid row is missing an internal row id");
+    }, []);
+
+    const gridData = useDataSource<RowData>({
+      dataSource,
+      columns,
+      getRowId,
+      sorting: gridState.sorting,
+      quickSearch: gridState.quickSearch,
+      pagination: gridState.pagination,
+      paginationMode: "infinite",
+    });
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        reload: () => gridData.reload(),
+        getDiscoveredColumns: () => discoveredColumnsRef.current,
+      }),
+      [gridData],
+    );
+
+    const handleRowClick = useCallback(
+      (row: RowData) => {
+        if (onRowClick) {
+          onRowClick(row);
+          return;
+        }
+        if (enableRowDetailDialog) {
+          setSelectedRow(row);
+          setDetailDialogOpen(true);
+        }
+      },
+      [onRowClick, enableRowDetailDialog],
+    );
+
+    const showEmptyError =
+      error != null && !gridData.isLoading && gridData.rows.length === 0;
+
+    /**
+     * Extend the built-in toolbar context with the async data source
+     * state (reload, counts, loading flags) so callers can build rich
+     * toolbars without re-deriving any of this.
+     */
+    const extendCtx = useCallback(
+      (ctx: DataGridToolbarContext<RowData>): QueryDataGridToolbarContext<RowData> => ({
+        ...ctx,
+        reload: gridData.reload,
+        rowCount: gridData.rows.length,
+        hasMore: gridData.hasMore,
+        isLoading: gridData.isLoading,
+        isRefetching: gridData.isRefetching,
+      }),
+      [gridData.reload, gridData.rows.length, gridData.hasMore, gridData.isLoading, gridData.isRefetching],
+    );
+
+    /**
+     * Resolves the toolbar prop passed to the underlying DataGrid.
+     *
+     * Priority:
+     *  1. `toolbar` (full override)  — caller owns the whole row
+     *  2. `searchBar` provided       — render our own DataGridToolbar
+     *     wrapper that hides the built-in quick search and slots the
+     *     caller's node where it used to live; keeps Columns/Export
+     *     intact. `toolbarExtra` (if provided) is passed through as
+     *     the built-in extras slot.
+     *  3. neither                    — undefined, so the DataGrid
+     *     falls back to its default toolbar behaviour (built-in
+     *     quick search, extras, columns, export).
+     */
+    const renderCustomToolbar = useCallback(
+      function renderCustomToolbar(ctx: DataGridToolbarContext<RowData>) {
+        const extended = extendCtx(ctx);
+        const leading =
+          typeof searchBar === "function" ? searchBar(extended) : searchBar;
+        const extras =
+          toolbarExtra === undefined
+            ? undefined
+            : typeof toolbarExtra === "function"
+              ? toolbarExtra(extended)
+              : toolbarExtra;
+        return (
+          <DataGridToolbar
+            ctx={ctx}
+            extra={extras}
+            extraLeading={leading}
+            hideQuickSearch
+          />
+        );
+      },
+      [searchBar, toolbarExtra, extendCtx],
+    );
+
+    const renderForwardedToolbar = useCallback(
+      function renderForwardedToolbar(ctx: DataGridToolbarContext<RowData>) {
+        if (!toolbar) return null;
+        return toolbar(extendCtx(ctx));
+      },
+      [toolbar, extendCtx],
+    );
+
+    const resolvedToolbar = toolbar
+      ? renderForwardedToolbar
+      : searchBar !== undefined
+        ? renderCustomToolbar
+        : undefined;
+
+    const resolvedToolbarExtra = useMemo(() => {
+      // When we've already built a custom toolbar above for the
+      // `searchBar` case, the `toolbarExtra` prop is consumed inside
+      // that custom toolbar — don't also pass it to DataGrid.
+      if (toolbar || searchBar !== undefined) return undefined;
+      if (toolbarExtra === undefined) return undefined;
+      if (typeof toolbarExtra !== "function") return toolbarExtra;
+      return (ctx: DataGridToolbarContext<RowData>) => toolbarExtra(extendCtx(ctx));
+    }, [toolbar, searchBar, toolbarExtra, extendCtx]);
+
+    return (
+      <div className="flex flex-1 min-h-0 flex-col">
+        {error != null && !showEmptyError && (
+          <div className="shrink-0 px-4 pt-3">
+            <Alert variant="destructive">{error}</Alert>
+          </div>
+        )}
+
+        {showEmptyError && (
+          <div className="flex flex-1 flex-col items-start gap-4 p-4">
+            <Alert variant="destructive">{error}</Alert>
+            <Button variant="outline" onClick={gridData.reload}>
+              <ArrowClockwiseIcon className="mr-2 h-4 w-4" />
+              Retry
+            </Button>
+          </div>
+        )}
+
+        {!showEmptyError && (
+          <div className="flex-1 min-h-0 pr-0 lg:pr-8">
+            <DataGrid<RowData>
+              columns={columns}
+              rows={gridData.rows}
+              getRowId={getRowId}
+              totalRowCount={gridData.totalRowCount}
+              isLoading={gridData.isLoading}
+              isRefetching={gridData.isRefetching}
+              isLoadingMore={gridData.isLoadingMore}
+              hasMore={gridData.hasMore}
+              onLoadMore={gridData.loadMore}
+              state={gridState}
+              onChange={setGridState}
+              paginationMode="infinite"
+              selectionMode="none"
+              toolbar={resolvedToolbar}
+              toolbarExtra={resolvedToolbarExtra}
+              footer={footer ? undefined : false}
+              exportFilename={exportFilename}
+              onRowClick={handleRowClick}
+              emptyState={
+                emptyState ?? (
+                  <div className="flex flex-col items-center justify-center gap-4 py-16">
+                    <Typography variant="secondary">No data available</Typography>
+                  </div>
+                )
+              }
+            />
+          </div>
+        )}
+
+        {enableRowDetailDialog && (
+          <RowDetailDialog
+            row={selectedRow}
+            columns={discoveredColumns}
+            open={detailDialogOpen}
+            onOpenChange={setDetailDialogOpen}
+          />
+        )}
+      </div>
+    );
+  },
+);
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/use-ai-query-chat.test.ts b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/use-ai-query-chat.test.ts
new file mode 100644
index 0000000000..7f2d22df9b
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/use-ai-query-chat.test.ts
@@ -0,0 +1,44 @@
+import type { UIMessage } from "@ai-sdk/react";
+import { describe, expect, it } from "vitest";
+import { extractLatestQuery } from "./use-ai-query-chat";
+
+describe("extractLatestQuery", () => {
+  it("ignores failed queryAnalytics tool calls and keeps the last successful query", () => {
+    const messages = [
+      {
+        id: "assistant-1",
+        role: "assistant",
+        parts: [
+          {
+            type: "tool-queryAnalytics",
+            toolCallId: "call-1",
+            state: "output-available",
+            input: { query: "SELECT 1" },
+            output: { success: true },
+          },
+        ],
+      },
+      {
+        id: "assistant-2",
+        role: "assistant",
+        parts: [
+          {
+            type: "tool-queryAnalytics",
+            toolCallId: "call-2",
+            state: "output-error",
+            input: { query: "SELECT broken" },
+            errorText: "boom",
+          },
+        ],
+      },
+    ] satisfies UIMessage[];
+
+    const result = extractLatestQuery(messages);
+
+    expect(result).toEqual({
+      query: "SELECT 1",
+      state: "output-available",
+      toolCallIndex: 2,
+    });
+  });
+});
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/use-ai-query-chat.ts b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/use-ai-query-chat.ts
new file mode 100644
index 0000000000..72cdfaf1fa
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/use-ai-query-chat.ts
@@ -0,0 +1,193 @@
+"use client";
+
+import { buildStackAuthHeaders } from "@/lib/api-headers";
+import { getPublicEnvVar } from "@/lib/env";
+import { useChat, type UIMessage } from "@ai-sdk/react";
+import { useUser } from "@stackframe/stack";
+import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
+import { convertToModelMessages, DefaultChatTransport } from "ai";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useProjectId } from "../../use-admin-app";
+
+type ToolPart = {
+  type: string,
+  state: string,
+  input?: Record<string, unknown>,
+  output?: Record<string, unknown>,
+};
+
+function isToolPart(part: unknown): part is ToolPart {
+  if (typeof part !== "object" || part === null) return false;
+  const typed = part as { type?: unknown };
+  return typeof typed.type === "string" && typed.type.startsWith("tool-");
+}
+
+function isSuccessfulQueryToolPart(part: ToolPart): boolean {
+  if (part.state === "output-error") return false;
+  const success = part.output?.success;
+  if (success === false) return false;
+  return part.state === "output-available";
+}
+
+/**
+ * Walk backwards through messages / parts and return the most recent
+ * `queryAnalytics` tool call. The frontend uses the `query` argument
+ * of that call to drive the data grid — the AI is instructed to call
+ * the tool any time it wants to commit a new query.
+ */
+export function extractLatestQuery(messages: UIMessage[]): {
+  query: string,
+  state: string,
+  toolCallIndex: number,
+} | null {
+  let toolCallIndex = 0;
+  // Count total tool calls across the conversation so we can use the
+  // index as a stable "generation" key — the dialog uses this to know
+  // when the query has been regenerated (for highlight/animation).
+  for (const msg of messages) {
+    if (msg.role !== "assistant") continue;
+    for (const part of msg.parts) {
+      if (isToolPart(part) && part.type.endsWith("queryAnalytics")) {
+        toolCallIndex += 1;
+      }
+    }
+  }
+
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const msg = messages[i]!;
+    if (msg.role !== "assistant") continue;
+    for (let j = msg.parts.length - 1; j >= 0; j--) {
+      const part = msg.parts[j]!;
+      if (!isToolPart(part)) continue;
+      if (!part.type.endsWith("queryAnalytics")) continue;
+      // Wait for a successful tool result before surfacing the query
+      // to the grid — otherwise we'd re-run partially streamed or
+      // failed SQL on every chunk / failed turn.
+      if (!isSuccessfulQueryToolPart(part)) continue;
+      const query =
+        typeof part.input?.query === "string" ? (part.input.query as string) : null;
+      if (query && query.trim().length > 0) {
+        return { query, state: part.state, toolCallIndex };
+      }
+    }
+  }
+  return null;
+}
+
+export type AiQueryChat = ReturnType<typeof useChat> & {
+  /**
+   * The SQL query the frontend should render in the data grid. Only
+   * updates when an assistant turn COMPLETES, so the grid never
+   * flashes through intermediate inspection queries — the previously
+   * committed query stays visible while the AI is still responding.
+   */
+  latestQuery: string | null,
+  /** Monotonic counter — increments each time a new query is committed. */
+  queryGeneration: number,
+  /** `true` while the AI is thinking or streaming a response. */
+  isResponding: boolean,
+  /** Rewind the active query to a specific SQL string from a previous tool call. */
+  rewindToQuery: (query: string) => void,
+};
+
+/**
+ * Shared chat hook for the analytics AI query builder. Sends user
+ * messages to the unified AI endpoint with the `build-analytics-query`
+ * system prompt and the `sql-query` tool, then extracts the latest
+ * committed SQL query so the grid can render its results.
+ *
+ * Call this ONCE at the top of the tables page and pass the result
+ * down to both the search bar and the eye dialog, so they share a
+ * single conversation thread.
+ */
+export function useAiQueryChat(): AiQueryChat {
+  const currentUser = useUser();
+  const projectId = useProjectId();
+  const backendBaseUrl =
+    getPublicEnvVar("NEXT_PUBLIC_BROWSER_STACK_API_URL") ??
+    getPublicEnvVar("NEXT_PUBLIC_STACK_API_URL") ??
+    throwErr("NEXT_PUBLIC_BROWSER_STACK_API_URL is not set");
+
+  const transport = useMemo(
+    () =>
+      new DefaultChatTransport({
+        api: `${backendBaseUrl}/api/latest/ai/query/stream`,
+        headers: () => buildStackAuthHeaders(currentUser),
+        prepareSendMessagesRequest: async ({ messages: uiMessages, headers }) => {
+          const modelMessages = await convertToModelMessages(uiMessages);
+          return {
+            body: {
+              systemPrompt: "build-analytics-query",
+              tools: ["sql-query"],
+              quality: "smart",
+              speed: "fast",
+              projectId,
+              messages: modelMessages.map((m) => ({
+                role: m.role,
+                content: m.content,
+              })),
+            },
+            headers,
+          };
+        },
+      }),
+    // The transport only needs to be rebuilt if the backend URL or
+    // project changes; current user is read via closure on each
+    // request, so it's not in the dep list on purpose.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [backendBaseUrl, projectId],
+  );
+
+  const chat = useChat({ transport });
+
+  const isResponding = chat.status === "submitted" || chat.status === "streaming";
+
+  // Keep the committed query stable while the AI is still working —
+  // the grid should show the previous committed query (if any) until
+  // the current turn finishes, so we don't flash intermediate
+  // inspection queries into the grid. On turn completion we pick the
+  // LAST successful `queryAnalytics` tool call, which the prompt
+  // guarantees will be the user-facing final query.
+  const [committed, setCommitted] = useState<{
+    query: string,
+    generation: number,
+  } | null>(null);
+  const wasRespondingRef = useRef(false);
+  const lastCommittedGenRef = useRef(0);
+
+  useEffect(() => {
+    const justFinished = wasRespondingRef.current && !isResponding;
+    wasRespondingRef.current = isResponding;
+    if (!justFinished) return;
+
+    const latest = extractLatestQuery(chat.messages);
+    if (latest == null) return;
+    if (latest.toolCallIndex <= lastCommittedGenRef.current) return;
+    lastCommittedGenRef.current = latest.toolCallIndex;
+    setCommitted({ query: latest.query, generation: latest.toolCallIndex });
+  }, [isResponding, chat.messages]);
+
+  // When the chat is reset (e.g. setMessages([])) we also clear the
+  // committed query so the grid falls back to its default.
+  useEffect(() => {
+    if (chat.messages.length === 0 && committed != null) {
+      lastCommittedGenRef.current = 0;
+      setCommitted(null);
+    }
+  }, [chat.messages.length, committed]);
+
+  const rewindToQuery = useCallback((query: string) => {
+    setCommitted((prev) => ({
+      query,
+      generation: (prev?.generation ?? 0) + 1,
+    }));
+  }, []);
+
+  return {
+    ...chat,
+    latestQuery: committed?.query ?? null,
+    queryGeneration: committed?.generation ?? 0,
+    isResponding,
+    rewindToQuery,
+  };
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/[dashboardId]/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/[dashboardId]/page-client.tsx
index 76f620ee50..17ad8f25bb 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/[dashboardId]/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/[dashboardId]/page-client.tsx
@@ -1,20 +1,23 @@
 
 "use client";
 
-import { DashboardSandboxHost } from "@/components/commands/create-dashboard/dashboard-sandbox-host";
+import { DashboardSandboxHost, type DashboardRuntimeError, type WidgetSelection } from "@/components/commands/create-dashboard/dashboard-sandbox-host";
 import { useRouter, useRouterConfirm } from "@/components/router";
-import { ActionDialog, Button, Typography } from "@/components/ui";
+import { StreamingCodeViewer } from "@/components/streaming-code-viewer";
+import { ActionDialog, Button, Typography, useToast } from "@/components/ui";
 import { Input } from "@/components/ui/input";
 import {
   AssistantChat,
   createDashboardChatAdapter,
   createHistoryAdapter,
   DashboardToolUI,
+  type AssistantComposerApi,
 } from "@/components/vibe-coding";
 import { ToolCallContent } from "@/components/vibe-coding/chat-adapters";
 import { useUpdateConfig } from "@/lib/config-update";
 import { cn } from "@/lib/utils";
 import {
+  ChatCircleIcon,
   FloppyDiskIcon,
   PencilSimpleIcon,
   TrashIcon,
@@ -82,7 +85,8 @@ export default function PageClient() {
     <DashboardDetailContent
       dashboardId={dashboardId}
       displayName={dashboard.displayName}
-      tsxSource={dashboard.tsxSource}
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- stored dashboards may lack tsxSource before defaults backfill
+      tsxSource={dashboard.tsxSource ?? ""}
       projectId={projectId}
       adminApp={adminApp}
       updateConfig={updateConfig}
@@ -117,18 +121,89 @@ function DashboardDetailContent({
   backendBaseUrl: string,
   enabledAppIds: AppId[],
 }) {
-  const composerPlaceholder = useTypingPlaceholder(
-    "Create a dashboard about ",
-    DASHBOARD_PLACEHOLDER_SUFFIXES,
-  );
-
   const hasSource = tsxSource.length > 0;
   const [isChatOpen, setIsChatOpen] = useState(!hasSource);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [currentTsxSource, setCurrentTsxSource] = useState(tsxSource);
   const [savedTsxSource, setSavedTsxSource] = useState(tsxSource);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [pendingCode, setPendingCode] = useState<string | null>(null);
+  const [iframeReady, setIframeReady] = useState(hasSource);
+  const [codePhase, setCodePhase] = useState<"typing" | "loading" | "done">("done");
+  const codePhaseTimerRef = useRef<ReturnType<typeof setTimeout>>();
   const hasUnsavedChanges = currentTsxSource !== savedTsxSource;
   const { setNeedConfirm } = useRouterConfirm();
+  const { toast } = useToast();
+
+  // Handle on the assistant-ui composer, set by AssistantChat once its runtime mounts.
+  // Used to prefill the composer when the sandbox dashboard throws an error.
+  const composerApiRef = useRef<AssistantComposerApi | null>(null);
+  const handleComposerReady = useCallback((api: AssistantComposerApi) => {
+    composerApiRef.current = api;
+  }, []);
+
+  // Coalesce duplicate error reports — React re-renders a crashed component several times,
+  // and uncaught-error listeners can fire twice for the same exception. We only surface the
+  // first unique error per 2-second window so the composer isn't stomped on repeatedly.
+  const lastErrorRef = useRef<{ signature: string, at: number } | null>(null);
+  const handleDashboardRuntimeError = useCallback(
+    (err: DashboardRuntimeError) => {
+      const signature = `${err.message}::${(err.stack ?? "").slice(0, 200)}`;
+      const now = Date.now();
+      if (lastErrorRef.current && lastErrorRef.current.signature === signature && now - lastErrorRef.current.at < 2000) {
+        return;
+      }
+      lastErrorRef.current = { signature, at: now };
+
+      // Build a compact fix-request prompt. We keep the stack to ~1200 chars so the
+      // agent gets enough context to localize the bug without drowning in frame noise.
+      const stackSlice = (err.stack ?? "").trim().slice(0, 1200);
+      const componentStackSlice = (err.componentStack ?? "").trim().slice(0, 400);
+      const prefill = [
+        "The dashboard just crashed at runtime. Please diagnose and fix it.",
+        "",
+        "Error:",
+        err.message,
+        stackSlice ? `\nStack:\n${stackSlice}` : "",
+        componentStackSlice ? `\nComponent stack:${componentStackSlice}` : "",
+      ]
+        .filter(Boolean)
+        .join("\n");
+
+      // Open the chat panel if it's closed so the user sees the pre-filled composer.
+      // The iframe panel doesn't unmount when chat toggles, so no reload cost.
+      setIsChatOpen(true);
+      composerApiRef.current?.setText(prefill);
+
+      toast({
+        variant: "destructive",
+        title: "Dashboard crashed",
+        description: "Error added to chat — hit send to fix it.",
+      });
+    },
+    [toast],
+  );
+
+  const handleWidgetSelected = useCallback(
+    (selection: WidgetSelection) => {
+      const api = composerApiRef.current;
+      if (!api) return;
+
+      setIsChatOpen(true);
+
+      const { heading, tagName, rect, textPreview } = selection.metadata;
+      const name = heading ?? `${tagName} (${rect.width}×${rect.height})`;
+      const domContext = [
+        `[Widget: ${name}]`,
+        textPreview ? `Content: ${textPreview.slice(0, 200)}` : "",
+      ].filter(Boolean).join("\n");
+
+      const currentText = api.getText();
+      api.setText(domContext + "\n" + currentText);
+    },
+    [],
+  );
+
   useEffect(() => {
     if (!hasUnsavedChanges) return;
     setNeedConfirm(true);
@@ -155,16 +230,42 @@ function DashboardDetailContent({
   const currentHasSource = currentTsxSource.length > 0;
 
   const handleEditToggle = useCallback(() => {
-    if (!currentHasSource) return;
     setIsChatOpen(prev => !prev);
-  }, [currentHasSource]);
+  }, []);
 
   const handleNavigate = useCallback((path: string) => {
     router.push(`/projects/${projectId}${path}`);
   }, [router, projectId]);
 
   const handleCodeUpdate = useCallback((toolCall: ToolCallContent) => {
-    setCurrentTsxSource(toolCall.args.content);
+    if (typeof toolCall.args.content === "string") {
+      setPendingCode(toolCall.args.content);
+      setCurrentTsxSource(toolCall.args.content);
+      clearTimeout(codePhaseTimerRef.current);
+      setCodePhase("typing");
+      codePhaseTimerRef.current = setTimeout(() => {
+        setCodePhase("loading");
+        codePhaseTimerRef.current = setTimeout(() => {
+          setCodePhase("done");
+        }, 1000);
+      }, 3000);
+    }
+  }, []);
+
+  const handleRunStart = useCallback(() => {
+    setIsGenerating(true);
+    setPendingCode(null);
+    setIframeReady(false);
+    setCodePhase("typing");
+    clearTimeout(codePhaseTimerRef.current);
+  }, []);
+
+  const handleRunEnd = useCallback(() => {
+    setIsGenerating(false);
+  }, []);
+
+  const handleIframeReady = useCallback(() => {
+    setIframeReady(true);
   }, []);
 
   const handleSaveDashboard = useCallback(async () => {
@@ -206,28 +307,84 @@ function DashboardDetailContent({
     router.replace(`/projects/${projectId}/dashboards`);
   };
 
-  const dashboardPreview = currentHasSource ? (
-    <DashboardSandboxHost
-      artifact={artifact}
-      onBack={handleBack}
-      onEditToggle={handleEditToggle}
-      onNavigate={handleNavigate}
-      isChatOpen={isChatOpen}
-    />
-  ) : (
-    <div className="flex h-full items-center justify-center">
-      <div className="text-center space-y-3">
-        <div className="mx-auto h-12 w-12 rounded-2xl bg-foreground/[0.04] ring-1 ring-foreground/[0.06] flex items-center justify-center">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256" className="text-muted-foreground/60" fill="currentColor">
-            <path d="M224,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48ZM32,192V64H224V192ZM48,136a8,8,0,0,1,8-8H200a8,8,0,0,1,0,16H56A8,8,0,0,1,48,136Zm0-32a8,8,0,0,1,8-8h72a8,8,0,0,1,0,16H56A8,8,0,0,1,48,104Zm0,64a8,8,0,0,1,8-8H200a8,8,0,0,1,0,16H56A8,8,0,0,1,48,168Z"/>
-          </svg>
+  const isCreating = !currentHasSource;
+  const overlayActive = isCreating && (isGenerating || (pendingCode !== null && codePhase !== "done"));
+  const canShowDashboard = !isCreating || (codePhase === "done" && iframeReady);
+
+  const UPDATE_STATUS_MESSAGES = [
+    "Reviewing your current dashboard...",
+    "Understanding your changes...",
+    "Analyzing existing components...",
+    "Planning the update...",
+    "Building on your layout...",
+    "Applying modifications...",
+    "Updating data sources...",
+    "Adjusting the structure...",
+    "Refining components...",
+    "Wiring up interactions...",
+    "Polishing the details...",
+    "Almost there...",
+  ];
+
+  const dashboardPreview = (
+    <>
+      {overlayActive && (
+        <div className={cn(
+          "absolute inset-0 z-10 transition-opacity duration-700",
+          canShowDashboard ? "opacity-0 pointer-events-none" : "opacity-100"
+        )}>
+          {codePhase === "loading" ? (
+            <div className="flex h-full w-full items-center justify-center rounded-lg bg-zinc-50 dark:bg-zinc-950 ring-1 ring-zinc-200 dark:ring-white/[0.06]">
+              <div className="flex flex-col items-center gap-3">
+                <div className="flex gap-1">
+                  <div className="w-2 h-2 rounded-full bg-cyan-500 animate-pulse" />
+                  <div className="w-2 h-2 rounded-full bg-cyan-500 animate-pulse" style={{ animationDelay: "150ms" }} />
+                  <div className="w-2 h-2 rounded-full bg-cyan-500 animate-pulse" style={{ animationDelay: "300ms" }} />
+                </div>
+                <span className="text-[11px] text-zinc-400 dark:text-zinc-400">Loading dashboard...</span>
+              </div>
+            </div>
+          ) : (
+            <StreamingCodeViewer
+              code={pendingCode ?? ""}
+              isStreaming={isGenerating || codePhase === "typing"}
+            />
+          )}
         </div>
-        <Typography className="font-semibold text-foreground">No dashboard yet</Typography>
-        <Typography variant="secondary" className="text-sm max-w-[240px]">
-          Describe what you&apos;d like to see in the chat to generate your dashboard.
-        </Typography>
-      </div>
-    </div>
+      )}
+
+      {currentHasSource ? (
+        <div className={cn(
+          "h-full w-full transition-opacity duration-700",
+          canShowDashboard ? "opacity-100" : "opacity-0"
+        )}>
+          <DashboardSandboxHost
+            artifact={artifact}
+            onBack={handleBack}
+            onEditToggle={handleEditToggle}
+            onNavigate={handleNavigate}
+            onReady={handleIframeReady}
+            onRuntimeError={handleDashboardRuntimeError}
+            onWidgetSelected={handleWidgetSelected}
+            isChatOpen={isChatOpen}
+          />
+        </div>
+      ) : !isGenerating ? (
+        <div className="flex h-full items-center justify-center">
+          <div className="text-center space-y-3">
+            <div className="mx-auto h-12 w-12 rounded-2xl bg-foreground/[0.04] ring-1 ring-foreground/[0.06] flex items-center justify-center">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256" className="text-muted-foreground/60" fill="currentColor">
+                <path d="M224,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48ZM32,192V64H224V192ZM48,136a8,8,0,0,1,8-8H200a8,8,0,0,1,0,16H56A8,8,0,0,1,48,136Zm0-32a8,8,0,0,1,8-8h72a8,8,0,0,1,0,16H56A8,8,0,0,1,48,104Zm0,64a8,8,0,0,1,8-8H200a8,8,0,0,1,0,16H56A8,8,0,0,1,48,168Z"/>
+              </svg>
+            </div>
+            <Typography className="font-semibold text-foreground">No dashboard yet</Typography>
+            <Typography variant="secondary" className="text-sm max-w-[240px]">
+              Describe what you&apos;d like to see in the chat to generate your dashboard.
+            </Typography>
+          </div>
+        </div>
+      ) : null}
+    </>
   );
 
   return (
@@ -238,7 +395,7 @@ function DashboardDetailContent({
         {/* Dashboard iframe panel */}
         <div
           className={cn(
-            "flex-1 min-w-0 flex flex-col transition-all duration-300 ease-in-out",
+            "relative flex-1 min-w-0 flex flex-col transition-all duration-300 ease-in-out",
             "pl-6 pr-5 py-6",
             !isChatOpen && "dark:p-0",
           )}
@@ -249,6 +406,17 @@ function DashboardDetailContent({
           )}>
             {dashboardPreview}
           </div>
+
+          {!isChatOpen && (
+            <Button
+              size="icon"
+              variant="outline"
+              className="absolute bottom-10 right-10 z-[60] h-10 w-10 rounded-full shadow-lg"
+              onClick={handleEditToggle}
+            >
+              <ChatCircleIcon className="h-5 w-5" />
+            </Button>
+          )}
         </div>
 
         {/* Chat panel — slides in from the right. min-w on the inner card prevents content
@@ -274,17 +442,20 @@ function DashboardDetailContent({
                   setIsEditingName(false);
                 }}
                 onDelete={() => setDeleteDialogOpen(true)}
-                onClose={currentHasSource ? () => setIsChatOpen(false) : undefined}
+                onClose={() => setIsChatOpen(false)}
                 hasUnsavedChanges={hasUnsavedChanges}
                 onSaveDashboard={handleSaveDashboard}
               />
               <div className="flex-1 min-h-0">
                 <AssistantChat
-                  chatAdapter={createDashboardChatAdapter(backendBaseUrl, currentTsxSource, handleCodeUpdate, currentUser, enabledAppIds)}
+                  chatAdapter={createDashboardChatAdapter(backendBaseUrl, currentTsxSource, handleCodeUpdate, currentUser, enabledAppIds, projectId, handleRunStart, handleRunEnd)}
                   historyAdapter={createHistoryAdapter(adminApp, dashboardId)}
                   toolComponents={<DashboardToolUI setCurrentCode={setCurrentTsxSource} currentCode={currentTsxSource} />}
                   useOffWhiteLightMode
-                  composerPlaceholder={currentHasSource ? undefined : composerPlaceholder}
+                  composerPlaceholder={currentHasSource ? undefined : DASHBOARD_COMPOSER_PLACEHOLDER}
+                  runningStatusMessages={!isCreating ? UPDATE_STATUS_MESSAGES : undefined}
+                  composerAttachments
+                  onComposerReady={handleComposerReady}
                 />
               </div>
             </div>
@@ -311,78 +482,17 @@ function DashboardDetailContent({
   );
 }
 
-const DASHBOARD_PLACEHOLDER_SUFFIXES = [
-  "user signups and retention",
-  "team activity across projects",
-  "API latency and error rates",
-  "email open rates and clicks",
-  "authentication trends",
-  "revenue and subscription growth",
-];
-
-function useTypingPlaceholder(
-  prefix: string,
-  suffixes: readonly string[],
-  { typeSpeed = 70, deleteSpeed = 40, pauseAfterType = 2000, pauseAfterDelete = 400 } = {},
-): string {
-  const [suffixText, setSuffixText] = useState("");
-  const state = useRef({
-    suffixIndex: 0,
-    charIndex: 0,
-    phase: "typing" as "typing" | "pausing" | "deleting" | "waiting",
-  });
-
-  useEffect(() => {
-    let timeoutId: ReturnType<typeof setTimeout>;
-
-    function tick() {
-      const s = state.current;
-      const target = suffixes[s.suffixIndex % suffixes.length];
-
-      switch (s.phase) {
-        case "typing": {
-          if (s.charIndex < target.length) {
-            s.charIndex++;
-            setSuffixText(target.slice(0, s.charIndex));
-            timeoutId = setTimeout(tick, typeSpeed);
-          } else {
-            s.phase = "pausing";
-            timeoutId = setTimeout(tick, pauseAfterType);
-          }
-          break;
-        }
-        case "pausing": {
-          s.phase = "deleting";
-          timeoutId = setTimeout(tick, deleteSpeed);
-          break;
-        }
-        case "deleting": {
-          if (s.charIndex > 0) {
-            s.charIndex--;
-            setSuffixText(target.slice(0, s.charIndex));
-            timeoutId = setTimeout(tick, deleteSpeed);
-          } else {
-            s.phase = "waiting";
-            timeoutId = setTimeout(tick, pauseAfterDelete);
-          }
-          break;
-        }
-        case "waiting": {
-          s.suffixIndex = (s.suffixIndex + 1) % suffixes.length;
-          s.charIndex = 0;
-          s.phase = "typing";
-          timeoutId = setTimeout(tick, typeSpeed);
-          break;
-        }
-      }
-    }
-
-    timeoutId = setTimeout(tick, 500);
-    return () => clearTimeout(timeoutId);
-  }, [suffixes, typeSpeed, deleteSpeed, pauseAfterType, pauseAfterDelete]);
-
-  return prefix + suffixText;
-}
+const DASHBOARD_COMPOSER_PLACEHOLDER = {
+  prefix: "Create a dashboard about ",
+  suffixes: [
+    "user signups and retention",
+    "team activity across projects",
+    "API latency and error rates",
+    "email open rates and clicks",
+    "authentication trends",
+    "revenue and subscription growth",
+  ],
+} as const;
 
 function ChatPanelHeader({
   displayName,
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/page-client.tsx
index 11bc249889..dbb0fa39aa 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/page-client.tsx
@@ -12,6 +12,7 @@ import {
   TrashIcon,
 } from "@phosphor-icons/react";
 import { DesignCard } from "@stackframe/dashboard-ui-components";
+import { stringCompare } from "@stackframe/stack-shared/dist/utils/strings";
 import { generateUuid } from "@stackframe/stack-shared/dist/utils/uuids";
 import { useMemo, useState } from "react";
 import * as yup from "yup";
@@ -32,10 +33,12 @@ export default function PageClient() {
   const [deleteDialogId, setDeleteDialogId] = useState<string | null>(null);
 
   const dashboards = useMemo((): DashboardEntry[] => {
-    return Object.entries(config.customDashboards).map(([id, dashboard]) => ({
-      id,
-      displayName: (dashboard as { displayName: string }).displayName,
-    }));
+    return Object.entries(config.customDashboards)
+      .map(([id, dashboard]) => ({
+        id,
+        displayName: (dashboard as { displayName: string }).displayName,
+      }))
+      .sort((a, b) => stringCompare(a.displayName, b.displayName) || stringCompare(a.id, b.id));
   }, [config.customDashboards]);
 
   const dashboardToDelete = deleteDialogId
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/chart-demo/demo/analytics-chart-events-panel.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/chart-demo/demo/analytics-chart-events-panel.tsx
new file mode 100644
index 0000000000..86507ea75b
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/chart-demo/demo/analytics-chart-events-panel.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import {
+  DesignAnalyticsCard,
+  DesignAnalyticsCardHeader,
+  DesignButton,
+} from "@/components/design-components";
+import { XIcon } from "@phosphor-icons/react";
+
+export type AnalyticsChartLabEvent = {
+  id: number,
+  ts: number,
+  name: string,
+  payload: string,
+};
+
+export function AnalyticsChartEventsPanel({
+  events,
+  onClear,
+}: {
+  events: AnalyticsChartLabEvent[],
+  onClear: () => void,
+}) {
+  return (
+    <DesignAnalyticsCard
+      gradient="orange"
+      chart={{ type: "none", tooltipType: "none", highlightMode: "none" }}
+    >
+      <DesignAnalyticsCardHeader
+        label="Callback events"
+        right={
+          <DesignButton
+            size="sm"
+            variant="ghost"
+            className="h-7 gap-1.5 px-2 text-[11px]"
+            onClick={onClear}
+            disabled={events.length === 0}
+          >
+            <XIcon weight="bold" className="size-3" aria-hidden="true" />
+            Clear
+          </DesignButton>
+        }
+      />
+      <div className="px-5 py-4">
+        {events.length === 0 ? (
+          <p className="font-mono text-[11px] text-muted-foreground">
+            Interact with the preview — change a control, brush a range,
+            create an annotation, pin a point — and the corresponding
+            <span className="text-foreground"> on*Change </span>
+            callback fires here.
+          </p>
+        ) : (
+          <ol className="flex flex-col divide-y divide-foreground/[0.05] rounded-lg bg-foreground/[0.02] ring-1 ring-foreground/[0.05]">
+            {events.map((e) => (
+              <li
+                key={e.id}
+                className="flex items-baseline gap-3 px-3 py-1.5 first:rounded-t-lg last:rounded-b-lg"
+              >
+                <span className="font-mono text-[10px] tabular-nums text-muted-foreground/70 shrink-0 w-[68px]">
+                  {new Date(e.ts).toLocaleTimeString("en-US", {
+                    hour12: false,
+                    hour: "2-digit",
+                    minute: "2-digit",
+                    second: "2-digit",
+                  })}
+                </span>
+                <span className="font-mono text-[11px] font-semibold text-foreground shrink-0">
+                  {e.name}
+                </span>
+                <span className="ml-auto truncate font-mono text-[11px] tabular-nums text-muted-foreground">
+                  {e.payload}
+                </span>
+              </li>
+            ))}
+          </ol>
+        )}
+      </div>
+    </DesignAnalyticsCard>
+  );
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/chart-demo/demo/analytics-chart-state-panel.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/chart-demo/demo/analytics-chart-state-panel.tsx
new file mode 100644
index 0000000000..9ad39e551f
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/chart-demo/demo/analytics-chart-state-panel.tsx
@@ -0,0 +1,733 @@
+"use client";
+
+import {
+  DesignAnalyticsCard,
+  DesignAnalyticsCardHeader,
+  DesignButton,
+  DesignPillToggle,
+} from "@/components/design-components";
+import {
+  ArrowsClockwiseIcon,
+  ChartBarIcon,
+  ChartLineIcon,
+  ChartLineUpIcon,
+  ChartPieIcon,
+} from "@phosphor-icons/react";
+import type { ReactNode } from "react";
+import {
+  DEFAULT_FORMAT_KIND,
+  findLayerById,
+  isAnalyticsChartDataLayer,
+  patchLayerById,
+  setLayerById,
+  type AnalyticsChartAnnotationsLayer,
+  type AnalyticsChartDataLayer,
+  type AnalyticsChartLayer,
+  type AnalyticsChartLayerType,
+  type AnalyticsChartState,
+  type AnalyticsChartStrokeStyle,
+  type AnalyticsChartTimeseriesState,
+  type AnalyticsChartView,
+  type FormatKind,
+  type FormatKindDatetime,
+  type FormatKindPercent,
+  type FormatKindType,
+} from "@stackframe/dashboard-ui-components";
+
+/** Shared wrapper row used throughout the state panel: rounded border,
+ * subtle background, label + mono key caption, and a right-side slot. */
+function FieldRow({
+  label,
+  keyName,
+  right,
+  children,
+}: {
+  label: string,
+  keyName: string,
+  right?: ReactNode,
+  children?: ReactNode,
+}) {
+  return (
+    <div className="flex flex-col gap-2 rounded-md border border-foreground/10 bg-foreground/[0.02] px-3 py-2">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <div className="min-w-0">
+          <span className="text-[12px] font-medium text-foreground">{label}</span>
+          <div className="font-mono text-[9px] uppercase tracking-wider text-muted-foreground/70">
+            {keyName}
+          </div>
+        </div>
+        {right != null && <div className="flex items-center gap-2">{right}</div>}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+/** Boolean on/off toggle with the shared FieldRow chrome. */
+function BoolFieldRow({
+  label,
+  keyName,
+  value,
+  onChange,
+}: {
+  label: string,
+  keyName: string,
+  value: boolean,
+  onChange: (next: boolean) => void,
+}) {
+  return (
+    <FieldRow
+      label={label}
+      keyName={keyName}
+      right={
+        <DesignPillToggle
+          size="sm"
+          gradient="default"
+          options={[
+            { id: "off", label: "Off" },
+            { id: "on", label: "On" },
+          ]}
+          selected={value ? "on" : "off"}
+          onSelect={(id) => onChange(id === "on")}
+        />
+      }
+    />
+  );
+}
+
+/** Data-layer row — type picker, color, stroke, fill, segmentation, in-progress. */
+function DataLayerRow({
+  layer,
+  dataLength,
+  setLayerType,
+  setLayerStrokeStyle,
+  setLayerFillOpacity,
+  setLayerSegmented,
+  setLayerInProgress,
+  setLayerVisible,
+  setLayerColor,
+}: {
+  layer: AnalyticsChartDataLayer,
+  dataLength: number,
+  setLayerType: (id: string, next: AnalyticsChartLayerType) => void,
+  setLayerStrokeStyle: (id: string, next: AnalyticsChartStrokeStyle) => void,
+  setLayerFillOpacity: (id: string, next: number) => void,
+  setLayerSegmented: (id: string, next: boolean) => void,
+  setLayerInProgress: (id: string, next: number | null) => void,
+  setLayerVisible: (id: string, next: boolean) => void,
+  setLayerColor: (id: string, next: string) => void,
+}) {
+  const supportsStroke = layer.type === "line" || layer.type === "area";
+  const supportsFill = layer.type === "area" || layer.type === "bar";
+  const currentStroke = "strokeStyle" in layer ? layer.strokeStyle : undefined;
+  const currentFill = "fillOpacity" in layer ? layer.fillOpacity : undefined;
+  return (
+    <FieldRow
+      label={layer.label}
+      keyName={`layers.${layer.id}`}
+      right={
+        <>
+          <DesignPillToggle
+            size="sm"
+            gradient="default"
+            options={[
+              { id: "line", label: "Line", icon: ChartLineIcon },
+              { id: "area", label: "Area", icon: ChartLineUpIcon },
+              { id: "bar", label: "Bar", icon: ChartBarIcon },
+            ]}
+            selected={layer.type}
+            onSelect={(id) => setLayerType(layer.id, id as AnalyticsChartLayerType)}
+          />
+          <DesignPillToggle
+            size="sm"
+            gradient="default"
+            options={[
+              { id: "off", label: "Hide" },
+              { id: "on", label: "Show" },
+            ]}
+            selected={layer.visible ? "on" : "off"}
+            onSelect={(id) => setLayerVisible(layer.id, id === "on")}
+          />
+        </>
+      }
+    >
+      <div className="flex flex-wrap items-center gap-3 border-t border-foreground/[0.05] pt-2">
+        <label className="flex items-center gap-1.5">
+          <span className="font-mono text-[9px] uppercase tracking-wider text-muted-foreground">
+            color
+          </span>
+          <input
+            type="color"
+            value={layer.color}
+            onChange={(e) => setLayerColor(layer.id, e.target.value)}
+            aria-label={`${layer.label} color`}
+            className="size-6 cursor-pointer rounded border border-foreground/10 bg-transparent p-0"
+          />
+          <span className="font-mono text-[10px] tabular-nums text-muted-foreground">
+            {layer.color}
+          </span>
+        </label>
+        {supportsStroke && currentStroke !== undefined && (
+          <label className="flex items-center gap-1.5">
+            <span className="font-mono text-[9px] uppercase tracking-wider text-muted-foreground">
+              stroke
+            </span>
+            <DesignPillToggle
+              size="sm"
+              gradient="default"
+              options={[
+                { id: "solid", label: "Solid" },
+                { id: "dashed", label: "Dashed" },
+                { id: "dotted", label: "Dotted" },
+              ]}
+              selected={currentStroke}
+              onSelect={(id) => setLayerStrokeStyle(layer.id, id as AnalyticsChartStrokeStyle)}
+            />
+          </label>
+        )}
+        {supportsFill && currentFill !== undefined && (
+          <label className="flex items-center gap-1.5">
+            <span className="font-mono text-[9px] uppercase tracking-wider text-muted-foreground">
+              fill
+            </span>
+            <input
+              type="range"
+              min={0}
+              max={1}
+              step={0.02}
+              value={currentFill}
+              onChange={(e) => setLayerFillOpacity(layer.id, Number(e.target.value))}
+              aria-label={`${layer.label} fill opacity`}
+              className="h-1 w-20 cursor-pointer accent-foreground/60"
+            />
+            <span className="font-mono text-[10px] tabular-nums text-muted-foreground">
+              {currentFill.toFixed(2)}
+            </span>
+          </label>
+        )}
+        <label className="flex items-center gap-1.5">
+          <span className="font-mono text-[9px] uppercase tracking-wider text-muted-foreground">
+            segmented
+          </span>
+          <DesignPillToggle
+            size="sm"
+            gradient="default"
+            options={[
+              { id: "off", label: "Off" },
+              { id: "on", label: "On" },
+            ]}
+            selected={layer.segmented ? "on" : "off"}
+            onSelect={(id) => setLayerSegmented(layer.id, id === "on")}
+          />
+        </label>
+        <label className="flex items-center gap-1.5">
+          <span className="font-mono text-[9px] uppercase tracking-wider text-muted-foreground">
+            in&#8209;progress
+          </span>
+          <DesignPillToggle
+            size="sm"
+            gradient="default"
+            options={[
+              { id: "off", label: "Off" },
+              { id: "on", label: "On" },
+            ]}
+            selected={layer.inProgressFromIndex != null ? "on" : "off"}
+            onSelect={(id) => setLayerInProgress(layer.id, id === "on" ? dataLength - 1 : null)}
+          />
+        </label>
+      </div>
+    </FieldRow>
+  );
+}
+
+/** Annotations-layer row — color + visibility only. */
+function AnnotationsLayerRow({
+  layer,
+  setLayerColor,
+  setLayerVisible,
+}: {
+  layer: AnalyticsChartAnnotationsLayer,
+  setLayerColor: (id: string, next: string) => void,
+  setLayerVisible: (id: string, next: boolean) => void,
+}) {
+  return (
+    <FieldRow
+      label={layer.label}
+      keyName={`layers.${layer.id}`}
+      right={
+        <>
+          <label className="flex items-center gap-1.5">
+            <input
+              type="color"
+              value={layer.color}
+              onChange={(e) => setLayerColor(layer.id, e.target.value)}
+              aria-label={`${layer.label} color`}
+              className="size-6 cursor-pointer rounded border border-foreground/10 bg-transparent p-0"
+            />
+          </label>
+          <DesignPillToggle
+            size="sm"
+            gradient="default"
+            options={[
+              { id: "off", label: "Hide" },
+              { id: "on", label: "Show" },
+            ]}
+            selected={layer.visible ? "on" : "off"}
+            onSelect={(id) => setLayerVisible(layer.id, id === "on")}
+          />
+        </>
+      }
+    />
+  );
+}
+
+function FormatKindOptions({
+  kind,
+  onChange,
+}: {
+  kind: FormatKind,
+  onChange: (next: FormatKind) => void,
+}) {
+  const optionLabel = (text: string) => (
+    <span className="font-mono text-[9px] uppercase tracking-wider text-muted-foreground">
+      {text}
+    </span>
+  );
+  switch (kind.type) {
+    case "numeric": {
+      const decimals = kind.decimals ?? 0;
+      return (
+        <div className="flex flex-wrap items-center gap-3 border-t border-foreground/[0.05] pt-2">
+          <label className="flex items-center gap-1.5">
+            {optionLabel("decimals")}
+            <DesignPillToggle
+              size="sm"
+              gradient="default"
+              options={[
+                { id: "0", label: "0" },
+                { id: "1", label: "1" },
+                { id: "2", label: "2" },
+                { id: "3", label: "3" },
+              ]}
+              selected={String(decimals)}
+              onSelect={(id) => onChange({ ...kind, decimals: Number(id) })}
+            />
+          </label>
+        </div>
+      );
+    }
+    case "short": {
+      const precision = kind.precision ?? 1;
+      return (
+        <div className="flex flex-wrap items-center gap-3 border-t border-foreground/[0.05] pt-2">
+          <label className="flex items-center gap-1.5">
+            {optionLabel("precision")}
+            <DesignPillToggle
+              size="sm"
+              gradient="default"
+              options={[
+                { id: "0", label: "0" },
+                { id: "1", label: "1" },
+                { id: "2", label: "2" },
+              ]}
+              selected={String(precision)}
+              onSelect={(id) => onChange({ ...kind, precision: Number(id) })}
+            />
+          </label>
+        </div>
+      );
+    }
+    case "currency": {
+      const currency = kind.currency ?? "USD";
+      const divisor = kind.divisor ?? 1;
+      return (
+        <div className="flex flex-wrap items-center gap-3 border-t border-foreground/[0.05] pt-2">
+          <label className="flex items-center gap-1.5">
+            {optionLabel("currency")}
+            <DesignPillToggle
+              size="sm"
+              gradient="default"
+              options={[
+                { id: "USD", label: "USD" },
+                { id: "EUR", label: "EUR" },
+                { id: "GBP", label: "GBP" },
+                { id: "JPY", label: "JPY" },
+              ]}
+              selected={currency}
+              onSelect={(id) => onChange({ ...kind, currency: id })}
+            />
+          </label>
+          <label className="flex items-center gap-1.5">
+            {optionLabel("divisor")}
+            <DesignPillToggle
+              size="sm"
+              gradient="default"
+              options={[
+                { id: "1", label: "1" },
+                { id: "100", label: "100" },
+              ]}
+              selected={String(divisor)}
+              onSelect={(id) => onChange({ ...kind, divisor: Number(id) })}
+            />
+          </label>
+        </div>
+      );
+    }
+    case "duration": {
+      const unit = kind.unit ?? "s";
+      return (
+        <div className="flex flex-wrap items-center gap-3 border-t border-foreground/[0.05] pt-2">
+          <label className="flex items-center gap-1.5">
+            {optionLabel("unit")}
+            <DesignPillToggle
+              size="sm"
+              gradient="default"
+              options={[
+                { id: "ms", label: "ms" },
+                { id: "s", label: "s" },
+                { id: "m", label: "m" },
+                { id: "h", label: "h" },
+              ]}
+              selected={unit}
+              onSelect={(id) => onChange({ ...kind, unit: id as "ms" | "s" | "m" | "h" })}
+            />
+          </label>
+        </div>
+      );
+    }
+    case "datetime": {
+      const style = kind.style ?? "short";
+      return (
+        <div className="flex flex-wrap items-center gap-3 border-t border-foreground/[0.05] pt-2">
+          <label className="flex items-center gap-1.5">
+            {optionLabel("style")}
+            <DesignPillToggle
+              size="sm"
+              gradient="default"
+              options={[
+                { id: "short", label: "Short" },
+                { id: "long", label: "Long" },
+                { id: "iso", label: "ISO" },
+                { id: "relative", label: "Relative" },
+              ]}
+              selected={style}
+              onSelect={(id) =>
+                onChange({ ...kind, style: id as FormatKindDatetime["style"] })
+              }
+            />
+          </label>
+        </div>
+      );
+    }
+    case "percent": {
+      const source = kind.source ?? "fraction";
+      const decimals = kind.decimals ?? 1;
+      return (
+        <div className="flex flex-wrap items-center gap-3 border-t border-foreground/[0.05] pt-2">
+          <label className="flex items-center gap-1.5">
+            {optionLabel("source")}
+            <DesignPillToggle
+              size="sm"
+              gradient="default"
+              options={[
+                { id: "fraction", label: "0..1" },
+                { id: "basis", label: "0..10000" },
+                { id: "whole", label: "0..100" },
+              ]}
+              selected={source}
+              onSelect={(id) =>
+                onChange({ ...kind, source: id as FormatKindPercent["source"] })
+              }
+            />
+          </label>
+          <label className="flex items-center gap-1.5">
+            {optionLabel("decimals")}
+            <DesignPillToggle
+              size="sm"
+              gradient="default"
+              options={[
+                { id: "0", label: "0" },
+                { id: "1", label: "1" },
+                { id: "2", label: "2" },
+              ]}
+              selected={String(decimals)}
+              onSelect={(id) => onChange({ ...kind, decimals: Number(id) })}
+            />
+          </label>
+        </div>
+      );
+    }
+  }
+}
+
+function rebuildDataLayer(
+  current: AnalyticsChartDataLayer,
+  nextType: AnalyticsChartLayerType,
+): AnalyticsChartDataLayer {
+  const prevStroke: AnalyticsChartStrokeStyle =
+    "strokeStyle" in current ? current.strokeStyle : "solid";
+  const prevFill: number =
+    "fillOpacity" in current ? current.fillOpacity : 0.22;
+  const base = {
+    id: current.id,
+    kind: current.kind,
+    label: current.label,
+    visible: current.visible,
+    color: current.color,
+    segmented: current.segmented,
+    segments: current.segments,
+    segmentSeries: current.segmentSeries,
+    inProgressFromIndex: current.inProgressFromIndex,
+  };
+  if (nextType === "line") return { ...base, type: "line", strokeStyle: prevStroke };
+  if (nextType === "bar") return { ...base, type: "bar", fillOpacity: prevFill };
+  return { ...base, type: "area", strokeStyle: prevStroke, fillOpacity: prevFill };
+}
+
+export function AnalyticsChartStatePanel({
+  state,
+  onChange,
+  onReset,
+  dataLength,
+}: {
+  state: AnalyticsChartState,
+  onChange: React.Dispatch<React.SetStateAction<AnalyticsChartState>>,
+  onReset: () => void,
+  dataLength: number,
+}) {
+  const setTimeseriesField = <K extends keyof AnalyticsChartTimeseriesState>(
+    key: K,
+    value: AnalyticsChartTimeseriesState[K],
+  ) => {
+    onChange((prev) => {
+      if (prev.view !== "timeseries") return prev;
+      return { ...prev, [key]: value };
+    });
+  };
+  const setView = (next: AnalyticsChartView) => {
+    onChange((prev) => {
+      if (next === prev.view) return prev;
+      if (next === "pie") {
+        return {
+          view: "pie",
+          layers: prev.layers,
+          xFormatKind: prev.xFormatKind,
+          yFormatKind: prev.yFormatKind,
+        };
+      }
+      return {
+        view: "timeseries",
+        layers: prev.layers,
+        xFormatKind: prev.xFormatKind,
+        yFormatKind: prev.yFormatKind,
+        showGrid: true,
+        showXAxis: true,
+        showYAxis: true,
+        zoomRange: null,
+        pinnedIndex: null,
+      };
+    });
+  };
+  const setXFormatKind = (next: FormatKind) => {
+    onChange((prev) => ({ ...prev, xFormatKind: next }));
+  };
+  const setYFormatKind = (next: FormatKind) => {
+    onChange((prev) => ({ ...prev, yFormatKind: next }));
+  };
+  const patchLayer = (id: string, patch: Record<string, unknown>) => {
+    onChange((prev) => ({
+      ...prev,
+      layers: patchLayerById(prev.layers, id, patch),
+    }));
+  };
+  const replaceLayer = (id: string, next: AnalyticsChartLayer) => {
+    onChange((prev) => ({
+      ...prev,
+      layers: setLayerById(prev.layers, id, next),
+    }));
+  };
+
+  const setLayerType = (id: string, nextType: AnalyticsChartLayerType) => {
+    const current = findLayerById(state.layers, id);
+    if (!current || (current.kind !== "primary" && current.kind !== "compare")) return;
+    replaceLayer(id, rebuildDataLayer(current, nextType));
+  };
+  const setLayerStrokeStyle = (id: string, style: AnalyticsChartStrokeStyle) => {
+    const current = findLayerById(state.layers, id);
+    if (!current || (current.kind !== "primary" && current.kind !== "compare")) return;
+    if (current.type === "bar") return;
+    replaceLayer(id, { ...current, strokeStyle: style });
+  };
+  const setLayerFillOpacity = (id: string, fillOpacity: number) => {
+    const current = findLayerById(state.layers, id);
+    if (!current || (current.kind !== "primary" && current.kind !== "compare")) return;
+    if (current.type === "line") return;
+    replaceLayer(id, { ...current, fillOpacity });
+  };
+  const setLayerSegmented = (id: string, segmented: boolean) => patchLayer(id, { segmented });
+  const setLayerInProgress = (id: string, inProgressFromIndex: number | null) =>
+    patchLayer(id, { inProgressFromIndex });
+  const setLayerVisible = (id: string, visible: boolean) => patchLayer(id, { visible });
+  const setLayerColor = (id: string, color: string) => patchLayer(id, { color });
+
+  return (
+    <DesignAnalyticsCard
+      gradient="green"
+      chart={{ type: "none", tooltipType: "none", highlightMode: "none" }}
+    >
+      <DesignAnalyticsCardHeader
+        label="State · mix and match"
+        right={
+          <DesignButton
+            size="sm"
+            variant="ghost"
+            className="h-7 gap-1.5 px-2 text-[11px]"
+            onClick={onReset}
+          >
+            <ArrowsClockwiseIcon weight="bold" className="size-3" aria-hidden="true" />
+            Reset
+          </DesignButton>
+        }
+      />
+      <div className="px-5 py-4">
+        <p className="mb-3 text-[12px] text-muted-foreground">
+          The legend items are the source of truth. Each layer has its own
+          visibility and (where it makes sense) its own chart type. Set
+          Sign-ups to <span className="font-mono text-[11px] text-foreground">bar</span>
+          {" "}while leaving Previous period as <span className="font-mono text-[11px] text-foreground">line</span>
+          {" "}and you get bars with a dashed line overlay — no special &ldquo;mixed&rdquo;
+          mode needed. Segmentation is per-layer too: toggle
+          {" "}<span className="font-mono text-[11px] text-foreground">signups.segmented</span>
+          {" "}and <span className="font-mono text-[11px] text-foreground">previous.segmented</span>
+          {" "}independently. Pie is a separate
+          {" "}<span className="font-mono text-[11px] text-foreground">view</span>.
+        </p>
+        <div className="flex flex-col gap-3">
+          <FieldRow
+            label="View"
+            keyName="view"
+            right={
+              <DesignPillToggle
+                size="sm"
+                gradient="default"
+                options={[
+                  { id: "timeseries", label: "Timeseries", icon: ChartLineUpIcon },
+                  { id: "pie", label: "Pie", icon: ChartPieIcon },
+                ]}
+                selected={state.view}
+                onSelect={(id) => setView(id as AnalyticsChartView)}
+              />
+            }
+          />
+          <div className="flex flex-col gap-2">
+            <span className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">
+              Layers · source of truth
+            </span>
+            {state.layers.map((layer) => {
+              if (isAnalyticsChartDataLayer(layer)) {
+                return (
+                  <DataLayerRow
+                    key={layer.id}
+                    layer={layer}
+                    dataLength={dataLength}
+                    setLayerType={setLayerType}
+                    setLayerStrokeStyle={setLayerStrokeStyle}
+                    setLayerFillOpacity={setLayerFillOpacity}
+                    setLayerSegmented={setLayerSegmented}
+                    setLayerInProgress={setLayerInProgress}
+                    setLayerVisible={setLayerVisible}
+                    setLayerColor={setLayerColor}
+                  />
+                );
+              }
+              return (
+                <AnnotationsLayerRow
+                  key={layer.id}
+                  layer={layer}
+                  setLayerColor={setLayerColor}
+                  setLayerVisible={setLayerVisible}
+                />
+              );
+            })}
+          </div>
+          <FieldRow
+            label="X-axis format"
+            keyName="xFormatKind.type"
+            right={
+              <DesignPillToggle
+                size="sm"
+                gradient="default"
+                options={[
+                  { id: "numeric", label: "Numeric" },
+                  { id: "short", label: "Short" },
+                  { id: "currency", label: "Currency" },
+                  { id: "duration", label: "Duration" },
+                  { id: "datetime", label: "Date" },
+                  { id: "percent", label: "Percent" },
+                ]}
+                selected={state.xFormatKind.type}
+                onSelect={(id) =>
+                  setXFormatKind(DEFAULT_FORMAT_KIND[id as FormatKindType])
+                }
+              />
+            }
+          >
+            <FormatKindOptions
+              kind={state.xFormatKind}
+              onChange={(next) => setXFormatKind(next)}
+            />
+          </FieldRow>
+          <FieldRow
+            label="Y-axis format"
+            keyName="yFormatKind.type"
+            right={
+              <DesignPillToggle
+                size="sm"
+                gradient="default"
+                options={[
+                  { id: "numeric", label: "Numeric" },
+                  { id: "short", label: "Short" },
+                  { id: "currency", label: "Currency" },
+                  { id: "duration", label: "Duration" },
+                  { id: "datetime", label: "Date" },
+                  { id: "percent", label: "Percent" },
+                ]}
+                selected={state.yFormatKind.type}
+                onSelect={(id) =>
+                  setYFormatKind(DEFAULT_FORMAT_KIND[id as FormatKindType])
+                }
+              />
+            }
+          >
+            <FormatKindOptions
+              kind={state.yFormatKind}
+              onChange={(next) => setYFormatKind(next)}
+            />
+          </FieldRow>
+          {state.view === "timeseries" && (
+            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+              <BoolFieldRow
+                label="Grid lines"
+                keyName="showGrid"
+                value={state.showGrid}
+                onChange={(v) => setTimeseriesField("showGrid", v)}
+              />
+              <BoolFieldRow
+                label="X-axis labels"
+                keyName="showXAxis"
+                value={state.showXAxis}
+                onChange={(v) => setTimeseriesField("showXAxis", v)}
+              />
+              <BoolFieldRow
+                label="Y-axis labels"
+                keyName="showYAxis"
+                value={state.showYAxis}
+                onChange={(v) => setTimeseriesField("showYAxis", v)}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </DesignAnalyticsCard>
+  );
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/chart-demo/demo/analytics-chart-usage-viewer.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/chart-demo/demo/analytics-chart-usage-viewer.tsx
new file mode 100644
index 0000000000..1a013c5243
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/chart-demo/demo/analytics-chart-usage-viewer.tsx
@@ -0,0 +1,182 @@
+"use client";
+
+import {
+  DesignAnalyticsCard,
+  DesignAnalyticsCardHeader,
+  DesignButton,
+} from "@/components/design-components";
+import { CursorClickIcon } from "@phosphor-icons/react";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { useState } from "react";
+import type {
+  AnalyticsChartLayer,
+  AnalyticsChartState,
+  Annotation,
+  FormatKind,
+  Point,
+} from "@stackframe/dashboard-ui-components";
+
+function formatFormatKindLiteral(kind: FormatKind): string {
+  const fields: string[] = [`type: "${kind.type}"`];
+  for (const [key, value] of Object.entries(kind)) {
+    if (key === "type" || value === undefined) continue;
+    if (typeof value === "string") fields.push(`${key}: "${value}"`);
+    else fields.push(`${key}: ${value}`);
+  }
+  return `{ ${fields.join(", ")} }`;
+}
+
+function formatLayerLiteral(l: AnalyticsChartLayer): string {
+  const fields: string[] = [
+    `id: "${l.id}"`,
+    `kind: "${l.kind}"`,
+    `label: "${l.label}"`,
+    `visible: ${l.visible}`,
+  ];
+  if (l.kind === "primary" || l.kind === "compare") {
+    fields.push(
+      `color: "${l.color}"`,
+      `segmented: ${l.segmented}`,
+      `type: "${l.type}"`,
+    );
+    if (l.type === "line" || l.type === "area") {
+      fields.push(`strokeStyle: "${l.strokeStyle}"`);
+    }
+    if (l.type === "area" || l.type === "bar") {
+      fields.push(`fillOpacity: ${l.fillOpacity}`);
+    }
+    if (l.segments && l.segments.length > 0) {
+      const rows = l.segments.length;
+      const cols = l.segments[0]?.length ?? 0;
+      fields.push(`segments: /* ${rows}×${cols} */`);
+    }
+    if (l.segmentSeries && l.segmentSeries.length > 0) {
+      const keys = l.segmentSeries.map((s) => `"${s.key}"`).join(", ");
+      fields.push(`segmentSeries: [${keys}]`);
+    }
+    if (l.inProgressFromIndex != null) {
+      fields.push(`inProgressFromIndex: ${l.inProgressFromIndex}`);
+    }
+  } else {
+    fields.push(`color: "${l.color}"`);
+  }
+  return `{ ${fields.join(", ")} }`;
+}
+
+function formatStateLiteral(state: AnalyticsChartState, indent: string): string {
+  const inner = `${indent}  `;
+  const layersBlock = state.layers
+    .map((l) => `${inner}  ${formatLayerLiteral(l)},`)
+    .join("\n");
+  const lines = [
+    `${indent}{`,
+    `${inner}view: "${state.view}",`,
+    `${inner}layers: [`,
+    layersBlock,
+    `${inner}],`,
+    `${inner}xFormatKind: ${formatFormatKindLiteral(state.xFormatKind)},`,
+    `${inner}yFormatKind: ${formatFormatKindLiteral(state.yFormatKind)},`,
+  ];
+  if (state.view === "timeseries") {
+    lines.push(
+      `${inner}showGrid: ${state.showGrid},`,
+      `${inner}showXAxis: ${state.showXAxis},`,
+      `${inner}showYAxis: ${state.showYAxis},`,
+      `${inner}zoomRange: ${state.zoomRange ? `[${state.zoomRange[0]}, ${state.zoomRange[1]}]` : "null"},`,
+      `${inner}pinnedIndex: ${state.pinnedIndex ?? "null"},`,
+    );
+  }
+  lines.push(`${indent}}`);
+  return lines.join("\n");
+}
+
+function formatLiteralValue(value: unknown): string {
+  if (value === null) return "null";
+  if (typeof value === "string") return `"${value}"`;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  if (Array.isArray(value)) {
+    return `[${value.map(formatLiteralValue).join(", ")}]`;
+  }
+  if (typeof value === "object") {
+    const entries = Object.entries(value as Record<string, unknown>)
+      .map(([k, v]) => `${k}: ${formatLiteralValue(v)}`)
+      .join(", ");
+    return `{ ${entries} }`;
+  }
+  return String(value);
+}
+
+function formatDataProp(propName: string, items: unknown[], showCount = 2): string {
+  if (items.length === 0) return `  ${propName}={[]}`;
+  const previewItems = items.slice(0, showCount);
+  const remaining = items.length - previewItems.length;
+  const lines = [`  ${propName}={[`];
+  for (const item of previewItems) {
+    lines.push(`    ${formatLiteralValue(item)},`);
+  }
+  if (remaining > 0) {
+    lines.push(`    // …${remaining} more`);
+  }
+  lines.push("  ]}");
+  return lines.join("\n");
+}
+
+export type AnalyticsChartUsageData = {
+  data: Point[],
+  annotations: Annotation[],
+};
+
+export function generateAnalyticsChartUsage(
+  state: AnalyticsChartState,
+  exampleData: AnalyticsChartUsageData,
+): string {
+  const lines: string[] = [
+    "<AnalyticsChart",
+    formatDataProp("data", exampleData.data, 2),
+    formatDataProp("annotations", exampleData.annotations, 2),
+  ];
+  lines.push(`  state={${formatStateLiteral(state, "  ").trimStart()}}`);
+  lines.push(`  onChange={setState}`);
+  lines.push(`  onAnnotationCreate={(annotation) =>`);
+  lines.push(`    setAnnotations((prev) => [...prev, annotation])`);
+  lines.push(`  }`);
+  lines.push("/>");
+  return lines.join("\n");
+}
+
+export function AnalyticsChartUsageViewer({ code }: { code: string }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = () => {
+    runAsynchronouslyWithAlert(async () => {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1400);
+    });
+  };
+  return (
+    <DesignAnalyticsCard
+      gradient="cyan"
+      chart={{ type: "none", tooltipType: "none", highlightMode: "none" }}
+    >
+      <DesignAnalyticsCardHeader
+        label="Usage"
+        right={
+          <DesignButton
+            size="sm"
+            variant="ghost"
+            className="h-7 gap-1.5 px-2 text-[11px]"
+            onClick={handleCopy}
+          >
+            <CursorClickIcon weight="bold" className="size-3" aria-hidden="true" />
+            {copied ? "Copied" : "Copy"}
+          </DesignButton>
+        }
+      />
+      <div className="px-5 py-4">
+        <pre className="overflow-x-auto rounded-lg bg-foreground/[0.04] p-4 font-mono text-[11px] leading-[1.55] text-foreground ring-1 ring-foreground/[0.06]">
+          <code>{code}</code>
+        </pre>
+      </div>
+    </DesignAnalyticsCard>
+  );
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/chart-demo/demo/fixtures.ts b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/chart-demo/demo/fixtures.ts
new file mode 100644
index 0000000000..808a83af5e
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/chart-demo/demo/fixtures.ts
@@ -0,0 +1,128 @@
+import {
+  ANALYTICS_CHART_DEFAULT_LAYERS,
+  DEFAULT_FORMAT_KIND,
+  pointValue,
+  type AnalyticsChartLayer,
+  type AnalyticsChartSeries,
+  type AnalyticsChartState,
+  type Annotation,
+  type Point,
+} from "@stackframe/dashboard-ui-components";
+
+const DAY_COUNT = 30;
+
+export const SERIES: Point[] = Array.from({ length: DAY_COUNT }, (_, i) => {
+  const base = 420;
+  const trend = i * 14;
+  const wave = Math.sin(i * 0.48) * 78 + Math.cos(i * 0.21) * 34;
+  const prev = base + (i * 9) + Math.sin(i * 0.52 + 1.4) * 62;
+  return {
+    ts: Date.UTC(2026, 2, 7 + i),
+    values: {
+      signups: Math.max(0, Math.round(base + trend + wave)),
+      previous: Math.max(0, Math.round(prev)),
+    },
+  };
+});
+
+export const DEMO_BREAKDOWN_SERIES: AnalyticsChartSeries[] = [
+  { key: "us", label: "United States" },
+  { key: "eu", label: "European Union" },
+  { key: "asia", label: "Asia-Pacific" },
+  { key: "latam", label: "Latin America" },
+  { key: "other", label: "Other" },
+];
+
+const DEMO_BREAKDOWN_RATIOS = [0.32, 0.26, 0.20, 0.13, 0.09];
+
+export function allocateByWeight(total: number, weights: number[]): number[] {
+  const sumW = weights.reduce((a, b) => a + b, 0);
+  if (sumW <= 0) return weights.map(() => 0);
+  const raw = weights.map((w) => (total * w) / sumW);
+  const floors = raw.map((r) => Math.floor(r));
+  const base = floors.reduce((a, b) => a + b, 0);
+  const remainder = total - base;
+  const order = raw
+    .map((r, idx) => ({ idx, frac: r - Math.floor(r) }))
+    .sort((a, b) => b.frac - a.frac);
+  const result = [...floors];
+  for (let i = 0; i < remainder; i++) {
+    result[order[i % order.length]!.idx]!++;
+  }
+  return result;
+}
+
+export const DEMO_BREAKDOWN: number[][] = SERIES.map((p, i) => {
+  const weights = DEMO_BREAKDOWN_RATIOS.map((r, k) => {
+    const wave = Math.sin((i + k * 3) * 0.32) * 0.06;
+    return Math.max(0.01, r + wave);
+  });
+  return allocateByWeight(pointValue(p, "signups"), weights);
+});
+
+export const DEMO_BREAKDOWN_PREV: number[][] = SERIES.map((p, i) => {
+  const weights = DEMO_BREAKDOWN_RATIOS.map((r, k) => {
+    const wave = Math.sin((i + k * 3) * 0.32 + 1.7) * 0.05;
+    return Math.max(0.01, r + wave);
+  });
+  return allocateByWeight(pointValue(p, "previous"), weights);
+});
+
+export const ANNOTATIONS: Annotation[] = [
+  { index: 8, label: "v4.2", description: "Release v4.2 — new SSO provider" },
+  { index: 17, label: "Fix", description: "Hotfix deployed — rate-limit regression" },
+  { index: 24, label: "Exp", description: "A/B test launched — signup copy" },
+];
+
+function wireDemoLayer(layer: AnalyticsChartLayer): AnalyticsChartLayer {
+  if (layer.kind === "primary") {
+    return {
+      ...layer,
+      id: "signups",
+      label: "Sign-ups",
+      segments: DEMO_BREAKDOWN,
+      segmentSeries: DEMO_BREAKDOWN_SERIES,
+      inProgressFromIndex: DAY_COUNT - 1,
+    };
+  }
+  if (layer.kind === "compare") {
+    return {
+      ...layer,
+      id: "previous",
+      segments: DEMO_BREAKDOWN_PREV,
+      segmentSeries: DEMO_BREAKDOWN_SERIES,
+      inProgressFromIndex: null,
+    };
+  }
+  return layer;
+}
+
+export const DEMO_DEFAULT_STATE: AnalyticsChartState = {
+  view: "timeseries",
+  layers: ANALYTICS_CHART_DEFAULT_LAYERS.map(wireDemoLayer),
+  xFormatKind: DEFAULT_FORMAT_KIND.datetime,
+  yFormatKind: DEFAULT_FORMAT_KIND.short,
+  showGrid: true,
+  showXAxis: true,
+  showYAxis: true,
+  zoomRange: null,
+  pinnedIndex: null,
+};
+
+export type TableRow = {
+  key: string,
+  label: string,
+  light: string,
+  dark: string,
+  current: number,
+  previous: number,
+  trend: number[],
+};
+
+export const TABLE_ROWS: TableRow[] = [
+  { key: "gh", label: "google.com", light: "#2563eb", dark: "#60a5fa", current: 14_820, previous: 12_310, trend: [8, 10, 12, 14, 13, 15, 18, 21, 23, 27, 30, 34] },
+  { key: "tw", label: "twitter.com", light: "#059669", dark: "#34d399", current: 7_430, previous: 9_120, trend: [28, 26, 24, 23, 20, 18, 17, 15, 14, 13, 12, 11] },
+  { key: "prod", label: "producthunt.com", light: "#d97706", dark: "#fbbf24", current: 5_290, previous: 2_480, trend: [3, 4, 5, 8, 11, 14, 17, 19, 22, 26, 30, 32] },
+  { key: "hn", label: "news.ycombinator.com", light: "#7c3aed", dark: "#a78bfa", current: 4_120, previous: 3_980, trend: [12, 13, 14, 14, 13, 15, 14, 13, 14, 15, 14, 14] },
+  { key: "direct", label: "(direct)", light: "#94a3b8", dark: "#64748b", current: 3_610, previous: 3_420, trend: [20, 21, 21, 22, 22, 23, 22, 23, 23, 24, 24, 24] },
+];
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/chart-demo/demo/panels.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/chart-demo/demo/panels.tsx
new file mode 100644
index 0000000000..e5661c177c
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/chart-demo/demo/panels.tsx
@@ -0,0 +1,493 @@
+"use client";
+
+import {
+  DesignAlert,
+  DesignAnalyticsCard,
+  DesignAnalyticsCardHeader,
+  DesignButton,
+  DesignPillToggle,
+} from "@/components/design-components";
+import { cn, Typography } from "@/components/ui";
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  ArrowsClockwiseIcon,
+  ChartLineIcon,
+  SpinnerGapIcon,
+} from "@phosphor-icons/react";
+import { type CSSProperties, type ReactNode, useId, useMemo, useState } from "react";
+import {
+  formatDelta,
+  formatValue,
+  TrendPill,
+  type FormatKind,
+} from "@stackframe/dashboard-ui-components";
+import { TABLE_ROWS, type TableRow } from "./fixtures";
+
+export { TrendPill };
+
+export function SectionHeading({
+  index,
+  label,
+  caption,
+  right,
+}: {
+  index: string,
+  label: string,
+  caption: ReactNode,
+  right?: ReactNode,
+}) {
+  return (
+    <div className="mb-3 flex items-end justify-between gap-4">
+      <div className="flex items-baseline gap-3 min-w-0">
+        <span className="font-mono text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground/70 tabular-nums">
+          {index}
+        </span>
+        <div className="min-w-0">
+          <Typography type="h3" className="text-xs font-semibold uppercase tracking-wider">
+            {label}
+          </Typography>
+          <Typography variant="secondary" className="text-[11px] mt-0.5 truncate">
+            {caption}
+          </Typography>
+        </div>
+      </div>
+      {right != null && <div className="shrink-0">{right}</div>}
+    </div>
+  );
+}
+
+export function Sparkline({
+  values,
+  width = 90,
+  height = 22,
+  padding = 0,
+  showArea = false,
+  stroke,
+  strokeDark,
+  strokeWidth = 1.5,
+  className,
+  ariaHidden = true,
+}: {
+  values: number[],
+  width?: number,
+  height?: number,
+  padding?: number,
+  showArea?: boolean,
+  stroke: string,
+  strokeDark: string,
+  strokeWidth?: number,
+  className?: string,
+  ariaHidden?: boolean,
+}) {
+  const iw = width - padding * 2;
+  const ih = height - padding * 2;
+  const min = Math.min(...values);
+  const max = Math.max(...values) * (showArea ? 1.1 : 1);
+  const range = (max - min) || 1;
+  const n = values.length - 1 || 1;
+  const points = values
+    .map((v, i) => {
+      const x = padding + (i / n) * iw;
+      const y = padding + ih - ((v - min) / range) * ih;
+      return `${x.toFixed(1)},${y.toFixed(1)}`;
+    })
+    .join(" ");
+  const viewBox = `0 0 ${width} ${height}`;
+  const style = { "--s-l": stroke, "--s-d": strokeDark } as CSSProperties;
+  const areaPath = showArea
+    ? `M${points.split(" ").join(" L")} L${(padding + iw).toFixed(1)},${(padding + ih).toFixed(1)} L${padding.toFixed(1)},${(padding + ih).toFixed(1)} Z`
+    : null;
+  const gradientId = `spark-${useId().replace(/:/g, "")}`;
+
+  return (
+    <svg
+      viewBox={viewBox}
+      className={cn("block", className)}
+      style={style}
+      aria-hidden={ariaHidden || undefined}
+    >
+      {areaPath && (
+        <>
+          <defs>
+            <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor="var(--s-l)" stopOpacity="0.25" className="dark:[stop-color:var(--s-d)]" />
+              <stop offset="100%" stopColor="var(--s-l)" stopOpacity="0" className="dark:[stop-color:var(--s-d)]" />
+            </linearGradient>
+          </defs>
+          <path d={areaPath} fill={`url(#${gradientId})`} />
+        </>
+      )}
+      <polyline
+        points={points}
+        fill="none"
+        stroke="var(--s-l)"
+        strokeWidth={strokeWidth}
+        strokeLinejoin="round"
+        strokeLinecap="round"
+        className="dark:[stroke:var(--s-d)]"
+      />
+    </svg>
+  );
+}
+
+export function KpiBlock({
+  label,
+  current,
+  previous,
+  formatKind,
+  gradient,
+  periodLabel = "30d",
+  previousPeriodLabel = "prev 30d",
+}: {
+  label: string,
+  current: number,
+  previous: number,
+  formatKind: FormatKind,
+  gradient: "blue" | "cyan" | "green" | "orange" | "purple",
+  periodLabel?: string,
+  previousPeriodLabel?: string,
+}) {
+  const delta = formatDelta(current, previous);
+  const currentLabel = formatValue(current, formatKind);
+  const previousLabel = formatValue(previous, formatKind);
+  return (
+    <DesignAnalyticsCard
+      gradient={gradient}
+      chart={{ type: "none", tooltipType: "none", highlightMode: "none" }}
+    >
+      <div className="group relative flex h-full flex-col justify-between px-5 py-4">
+        <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+          {label}
+        </span>
+        <div className="mt-3 flex items-baseline gap-3">
+          <span className="font-mono text-3xl font-semibold tabular-nums leading-none text-foreground">
+            {currentLabel}
+          </span>
+          <TrendPill delta={delta} size="md" />
+        </div>
+        <div className="mt-2 flex items-center gap-1.5 text-[10px] text-muted-foreground">
+          <span className="font-mono tabular-nums">{previousLabel}</span>
+          <span>previous period</span>
+        </div>
+        <div
+          role="tooltip"
+          className="pointer-events-none absolute left-4 right-4 top-full z-20 mt-1.5 rounded-xl border border-foreground/10 bg-background/95 p-3 opacity-0 shadow-[0_12px_28px_rgba(15,23,42,0.18)] backdrop-blur-xl transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100 dark:shadow-[0_12px_28px_rgba(0,0,0,0.55)]"
+        >
+          <div className="grid grid-cols-2 gap-3">
+            <div className="flex flex-col gap-0.5">
+              <span className="font-mono text-[9px] uppercase tracking-wider text-muted-foreground">
+                Current · {periodLabel}
+              </span>
+              <span className="font-mono text-base font-semibold tabular-nums text-foreground">
+                {currentLabel}
+              </span>
+            </div>
+            <div className="flex flex-col gap-0.5">
+              <span className="font-mono text-[9px] uppercase tracking-wider text-muted-foreground">
+                {previousPeriodLabel}
+              </span>
+              <span className="font-mono text-base tabular-nums text-muted-foreground">
+                {previousLabel}
+              </span>
+            </div>
+          </div>
+          <div className="mt-2 flex items-center justify-between gap-3 border-t border-foreground/[0.06] pt-2">
+            <span className="font-mono text-[9px] uppercase tracking-wider text-muted-foreground">
+              Change
+            </span>
+            <TrendPill delta={delta} size="sm" />
+          </div>
+        </div>
+      </div>
+    </DesignAnalyticsCard>
+  );
+}
+
+export function FormatterPanel() {
+  const rows: { sample: number, kind: FormatKind, hint: string }[] = [
+    { sample: 48_271, kind: { type: "numeric", decimals: 0 }, hint: "Locale grouping (en-US)" },
+    { sample: 48_271, kind: { type: "numeric", decimals: 2 }, hint: "Locale grouping · 2 decimals" },
+    { sample: 4_827_104, kind: { type: "short", precision: 1 }, hint: "Compact (K / M / B)" },
+    { sample: 482_701, kind: { type: "currency", currency: "USD", divisor: 100 }, hint: "USD · cents → dollars" },
+    { sample: 482_701, kind: { type: "currency", currency: "EUR", divisor: 100 }, hint: "EUR · cents → euros" },
+    { sample: 4_271, kind: { type: "duration", unit: "s" }, hint: "1h 11m 11s (seconds)" },
+    { sample: 1_240, kind: { type: "duration", unit: "ms" }, hint: "1s 240ms (milliseconds)" },
+    { sample: Date.UTC(2026, 2, 17), kind: { type: "datetime", style: "short" }, hint: "Short date" },
+    { sample: Date.UTC(2026, 2, 17), kind: { type: "datetime", style: "long" }, hint: "Long date+time" },
+    { sample: Date.UTC(2026, 2, 17), kind: { type: "datetime", style: "iso" }, hint: "ISO-8601" },
+    { sample: Date.now() - 7_200_000, kind: { type: "datetime", style: "relative" }, hint: "Relative" },
+    { sample: 0.482, kind: { type: "percent", source: "fraction", decimals: 1 }, hint: "Fraction → percent" },
+    { sample: 4_827, kind: { type: "percent", source: "basis", decimals: 2 }, hint: "Basis points → percent" },
+  ];
+  return (
+    <DesignAnalyticsCard
+      gradient="purple"
+      chart={{ type: "none", tooltipType: "none", highlightMode: "none" }}
+    >
+      <DesignAnalyticsCardHeader label="Pluggable value rendering" />
+      <div className="px-5 py-4">
+        <ul className="divide-y divide-foreground/[0.05] rounded-lg bg-foreground/[0.02] ring-1 ring-foreground/[0.05]">
+          {rows.map((r, i) => (
+            <li
+              key={i}
+              className="flex items-center justify-between gap-4 px-3 py-2"
+            >
+              <div className="flex min-w-0 items-center gap-2">
+                <span className="shrink-0 font-mono text-[10px] uppercase tracking-wider text-muted-foreground">
+                  {r.kind.type}
+                </span>
+                <span className="truncate text-[11px] text-muted-foreground">
+                  {r.hint}
+                </span>
+              </div>
+              <span className="shrink-0 font-mono text-sm font-semibold tabular-nums text-foreground">
+                {formatValue(r.sample, r.kind)}
+              </span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </DesignAnalyticsCard>
+  );
+}
+
+type PanelState = "data" | "loading" | "empty" | "error";
+
+export function ThreeStatePanel() {
+  const [state, setState] = useState<PanelState>("data");
+  const data = useMemo(
+    () => Array.from({ length: 24 }, (_, i) => 30 + Math.sin(i * 0.5) * 18 + i * 3),
+    [],
+  );
+
+  return (
+    <DesignAnalyticsCard
+      gradient="orange"
+      chart={{ type: "none", tooltipType: "none", highlightMode: "none" }}
+    >
+      <DesignAnalyticsCardHeader
+        label="State shim"
+        right={
+          <DesignPillToggle
+            size="sm"
+            gradient="default"
+            options={[
+              { id: "data", label: "Data" },
+              { id: "loading", label: "Loading" },
+              { id: "empty", label: "Empty" },
+              { id: "error", label: "Error" },
+            ]}
+            selected={state}
+            onSelect={(id) => setState(id as PanelState)}
+          />
+        }
+      />
+      <div
+        className="relative flex h-[200px] items-center justify-center px-5 py-4"
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+      >
+        {state === "data" && (
+          <Sparkline
+            values={data}
+            width={520}
+            height={160}
+            padding={16}
+            showArea
+            stroke="#2563eb"
+            strokeDark="#60a5fa"
+            strokeWidth={2}
+            className="w-full h-full"
+          />
+        )}
+        {state === "loading" && (
+          <div className="flex flex-col items-center gap-3 text-muted-foreground">
+            <SpinnerGapIcon
+              weight="bold"
+              className="size-7 animate-spin text-blue-600 motion-reduce:animate-none dark:text-blue-400"
+              aria-hidden="true"
+            />
+            <div className="flex flex-col items-center gap-0.5">
+              <span className="text-xs font-medium text-foreground">Computing…</span>
+              <span className="font-mono text-[10px] uppercase tracking-wider">
+                Querying 14 days · 4 breakdowns
+              </span>
+            </div>
+          </div>
+        )}
+        {state === "empty" && (
+          <div className="flex max-w-sm flex-col items-center gap-3 text-center">
+            <div className="grid size-10 place-items-center rounded-full bg-foreground/[0.06]">
+              <ChartLineIcon weight="bold" className="size-5 text-muted-foreground" aria-hidden="true" />
+            </div>
+            <div className="flex flex-col items-center gap-1">
+              <span className="text-xs font-medium text-foreground">No matching events</span>
+              <span className="text-[11px] text-muted-foreground">
+                Widen the date range or remove breakdown filters to see more.
+              </span>
+            </div>
+          </div>
+        )}
+        {state === "error" && (
+          <div className="w-full">
+            <DesignAlert
+              variant="error"
+              title="Query failed"
+              description={
+                <div className="flex items-center justify-between gap-3">
+                  <span className="font-mono text-[11px] tabular-nums">
+                    HOGQL:42 · aggregation timeout after 12.4s
+                  </span>
+                  <DesignButton
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setState("loading")}
+                  >
+                    <ArrowsClockwiseIcon weight="bold" className="size-3" aria-hidden="true" />
+                    Retry
+                  </DesignButton>
+                </div>
+              }
+            />
+          </div>
+        )}
+      </div>
+    </DesignAnalyticsCard>
+  );
+}
+
+type SortKey = "current" | "previous" | "delta" | "label";
+type SortDir = "asc" | "desc";
+
+export function InsightsTablePanel() {
+  const [sortKey, setSortKey] = useState<SortKey>("current");
+  const [sortDir, setSortDir] = useState<SortDir>("desc");
+
+  const sorted = useMemo(() => {
+    const rows = [...TABLE_ROWS];
+    rows.sort((a, b) => {
+      const av = sortKey === "label" ? a.label
+        : sortKey === "current" ? a.current
+          : sortKey === "previous" ? a.previous
+            : formatDelta(a.current, a.previous).pct ?? 0;
+      const bv = sortKey === "label" ? b.label
+        : sortKey === "current" ? b.current
+          : sortKey === "previous" ? b.previous
+            : formatDelta(b.current, b.previous).pct ?? 0;
+      if (av < bv) return sortDir === "asc" ? -1 : 1;
+      if (av > bv) return sortDir === "asc" ? 1 : -1;
+      return 0;
+    });
+    return rows;
+  }, [sortKey, sortDir]);
+
+  const toggleSort = (key: SortKey) => {
+    if (key === sortKey) setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+    else {
+      setSortKey(key);
+      setSortDir(key === "label" ? "asc" : "desc");
+    }
+  };
+
+  const headCell = (key: SortKey, label: string, align: "left" | "right" = "right") => {
+    const sortState = sortKey === key ? (sortDir === "asc" ? "ascending" : "descending") : "none";
+    return (
+      <th
+        scope="col"
+        aria-sort={sortState}
+        className={cn("px-3 py-2", align === "right" ? "text-right" : "text-left")}
+      >
+        <button
+          type="button"
+          onClick={() => toggleSort(key)}
+          className={cn(
+            "inline-flex items-center gap-1 font-mono text-[10px] uppercase tracking-wider text-muted-foreground transition-colors duration-150 hover:text-foreground hover:transition-none focus-visible:outline-none focus-visible:underline",
+            sortKey === key && "text-foreground",
+          )}
+        >
+          {label}
+          {sortKey === key && (
+            sortDir === "asc"
+              ? <ArrowUpIcon weight="bold" className="size-2.5" aria-hidden="true" />
+              : <ArrowDownIcon weight="bold" className="size-2.5" aria-hidden="true" />
+          )}
+        </button>
+      </th>
+    );
+  };
+
+  return (
+    <DesignAnalyticsCard
+      gradient="slate"
+      chart={{ type: "none", tooltipType: "none", highlightMode: "none" }}
+    >
+      <DesignAnalyticsCardHeader
+        label="Top referrers"
+        right={
+          <span className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">
+            Click a header to sort
+          </span>
+        }
+      />
+      <div className="overflow-x-auto">
+        <table className="w-full border-collapse">
+          <thead>
+            <tr className="border-b border-foreground/[0.05]">
+              {headCell("label", "Source", "left")}
+              <th scope="col" className="px-3 py-2 text-left">
+                <span className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">
+                  Trend
+                </span>
+              </th>
+              {headCell("current", "Current")}
+              {headCell("previous", "Previous")}
+              {headCell("delta", "Δ")}
+            </tr>
+          </thead>
+          <tbody>
+            {sorted.map((r: TableRow) => {
+              const delta = formatDelta(r.current, r.previous);
+              return (
+                <tr
+                  key={r.key}
+                  className="border-b border-foreground/[0.04] last:border-0 transition-colors duration-150 hover:bg-foreground/[0.03] hover:transition-none"
+                >
+                  <td className="px-3 py-2.5">
+                    <div className="flex items-center gap-2.5">
+                      <span
+                        className="size-2 rounded-full shrink-0 bg-[var(--c-l)] dark:bg-[var(--c-d)]"
+                        style={{ "--c-l": r.light, "--c-d": r.dark } as CSSProperties}
+                      />
+                      <span className="text-[12px] font-medium text-foreground">{r.label}</span>
+                    </div>
+                  </td>
+                  <td className="px-3 py-2 w-[110px]">
+                    <Sparkline
+                      values={r.trend}
+                      width={90}
+                      height={22}
+                      stroke={r.light}
+                      strokeDark={r.dark}
+                      className="h-[22px] w-[90px]"
+                    />
+                  </td>
+                  <td className="px-3 py-2.5 text-right font-mono text-[12px] font-semibold tabular-nums text-foreground">
+                    {r.current.toLocaleString("en-US")}
+                  </td>
+                  <td className="px-3 py-2.5 text-right font-mono text-[12px] tabular-nums text-muted-foreground">
+                    {r.previous.toLocaleString("en-US")}
+                  </td>
+                  <td className="px-3 py-2.5 text-right">
+                    <TrendPill delta={delta} size="sm" />
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </DesignAnalyticsCard>
+  );
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/chart-demo/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/chart-demo/page-client.tsx
new file mode 100644
index 0000000000..1645d5aff3
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/chart-demo/page-client.tsx
@@ -0,0 +1,258 @@
+"use client";
+
+import {
+  DesignAnalyticsCard,
+  DesignBadge,
+} from "@/components/design-components";
+import { LightningIcon, PulseIcon } from "@phosphor-icons/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { PageLayout } from "../../page-layout";
+import {
+  AnalyticsChart,
+  DEFAULT_FORMAT_KIND,
+  pointValue,
+  type AnalyticsChartState,
+  type Annotation,
+} from "@stackframe/dashboard-ui-components";
+import {
+  AnalyticsChartEventsPanel,
+  type AnalyticsChartLabEvent,
+} from "./demo/analytics-chart-events-panel";
+import { AnalyticsChartStatePanel } from "./demo/analytics-chart-state-panel";
+import {
+  AnalyticsChartUsageViewer,
+  generateAnalyticsChartUsage,
+} from "./demo/analytics-chart-usage-viewer";
+import {
+  ANNOTATIONS,
+  DEMO_DEFAULT_STATE,
+  SERIES,
+} from "./demo/fixtures";
+import {
+  FormatterPanel,
+  InsightsTablePanel,
+  KpiBlock,
+  SectionHeading,
+  ThreeStatePanel,
+} from "./demo/panels";
+
+export default function PageClient() {
+  const [pulse, setPulse] = useState(0);
+
+  // Simulated "live" heartbeat so the LIVE badge visibly breathes.
+  useEffect(() => {
+    const id = window.setInterval(() => setPulse((p) => p + 1), 2400);
+    return () => window.clearInterval(id);
+  }, []);
+
+  const latest = SERIES[SERIES.length - 1]!;
+  const firstPrev = pointValue(SERIES[0]!, "previous");
+  const sumCurrent = SERIES.reduce((a, p) => a + pointValue(p, "signups"), 0);
+  const sumPrev = SERIES.reduce((a, p) => a + pointValue(p, "previous"), 0);
+
+  // AnalyticsChart is fully controlled — PageClient owns the entire state
+  // object. DEMO_DEFAULT_STATE ships with the demo breakdown matrices
+  // pre-wired into the primary/compare layers so the segmented view works
+  // immediately.
+  const [labState, setLabState] = useState<AnalyticsChartState>(DEMO_DEFAULT_STATE);
+  const resetLabState = () => setLabState(DEMO_DEFAULT_STATE);
+
+  // Annotations are a prop — PageClient owns the array and appends to it
+  // whenever the chart fires onAnnotationCreate.
+  const [labAnnotations, setLabAnnotations] = useState<Annotation[]>(ANNOTATIONS);
+
+  const usageCode = useMemo(
+    () =>
+      generateAnalyticsChartUsage(labState, {
+        data: SERIES,
+        annotations: labAnnotations,
+      }),
+    [labState, labAnnotations],
+  );
+
+  // Lab playground: live event log subscribed to onChange diffs and the
+  // discrete onAnnotationCreate callback. Capped at the most recent 16
+  // entries so the panel stays compact.
+  const [labEvents, setLabEvents] = useState<AnalyticsChartLabEvent[]>([]);
+  const labEventIdRef = useRef(0);
+  const logLabEvent = useCallback((name: string, payload: unknown) => {
+    setLabEvents((prev) => {
+      labEventIdRef.current += 1;
+      const next: AnalyticsChartLabEvent = {
+        id: labEventIdRef.current,
+        ts: Date.now(),
+        name,
+        payload:
+          payload === null
+            ? "null"
+            : typeof payload === "object"
+              ? JSON.stringify(payload)
+              : String(payload),
+      };
+      return [next, ...prev].slice(0, 16);
+    });
+  }, []);
+  const clearLabEvents = useCallback(() => setLabEvents([]), []);
+
+  // Wrap setLabState so every changed field becomes a discrete event in
+  // the log. Drops rows for the controlled-state props that no longer
+  // exist (hoverIndex, brush, annotationDraft) — only persistent state
+  // slices and annotation creation are surfaced.
+  const handleLabStateChange = useCallback<React.Dispatch<React.SetStateAction<AnalyticsChartState>>>(
+    (action) => {
+      setLabState((prev) => {
+        const next =
+          typeof action === "function"
+            ? (action as (p: AnalyticsChartState) => AnalyticsChartState)(prev)
+            : action;
+        for (const key of Object.keys(next) as (keyof AnalyticsChartState)[]) {
+          if (!Object.is(next[key], prev[key])) {
+            logLabEvent(`onChange:${key}`, next[key]);
+          }
+        }
+        return next;
+      });
+    },
+    [logLabEvent],
+  );
+  const handleLabAnnotationCreate = useCallback(
+    (annotation: Annotation) => {
+      setLabAnnotations((prev) => [...prev, annotation]);
+      logLabEvent("onAnnotationCreate", annotation);
+    },
+    [logLabEvent],
+  );
+
+  return (
+    <PageLayout
+      title="Chart interaction lab"
+      description={
+        <span>
+          Ported patterns from PostHog&apos;s insight surface — pinnable tooltips,
+          crosshair, period compare, annotations, formatter pluggability, series
+          visibility, three-state shims and instant display-type switching.
+          All shells use <span className="font-mono text-[11px] text-foreground">DesignAnalyticsCard</span>.
+        </span>
+      }
+      actions={
+        <div className="flex items-center gap-2">
+          <DesignBadge
+            label="Lab · internal"
+            color="purple"
+            icon={LightningIcon}
+            size="sm"
+          />
+          <DesignBadge
+            key={pulse}
+            label="Live"
+            color="cyan"
+            icon={PulseIcon}
+            size="sm"
+          />
+        </div>
+      }
+    >
+      <div className="flex flex-col gap-6">
+        <section>
+          <SectionHeading
+            index="01"
+            label="Analytics chart"
+            caption="Layer-based · fully controlled · mix-and-match per-layer types · live callbacks"
+          />
+          <div className="flex flex-col gap-4">
+            <AnalyticsChartStatePanel
+              state={labState}
+              onChange={handleLabStateChange}
+              onReset={resetLabState}
+              dataLength={SERIES.length}
+            />
+            <DesignAnalyticsCard
+              gradient="blue"
+              chart={{ type: "none", tooltipType: "none", highlightMode: "none" }}
+            >
+              <div className="flex items-center gap-3 border-b border-foreground/[0.05] px-5 py-3.5">
+                <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                  Sign-ups
+                </span>
+                <span className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground/70">
+                  30-day window
+                </span>
+              </div>
+              <div className="px-5 py-4">
+                <AnalyticsChart
+                  data={SERIES}
+                  annotations={labAnnotations}
+                  state={labState}
+                  onChange={handleLabStateChange}
+                  onAnnotationCreate={handleLabAnnotationCreate}
+                />
+              </div>
+            </DesignAnalyticsCard>
+            <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+              <AnalyticsChartUsageViewer code={usageCode} />
+              <AnalyticsChartEventsPanel events={labEvents} onClear={clearLabEvents} />
+            </div>
+          </div>
+        </section>
+
+        <section>
+          <SectionHeading
+            index="02"
+            label="KPI deltas"
+            caption="Big number + previous-period comparison with trend icons"
+          />
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            <KpiBlock
+              label="Sign-ups · 30d"
+              current={sumCurrent}
+              previous={sumPrev}
+              formatKind={DEFAULT_FORMAT_KIND.short}
+              gradient="blue"
+            />
+            <KpiBlock
+              label="Daily peak"
+              current={Math.max(...SERIES.map((p) => pointValue(p, "signups")))}
+              previous={Math.max(...SERIES.map((p) => pointValue(p, "previous")))}
+              formatKind={DEFAULT_FORMAT_KIND.numeric}
+              gradient="cyan"
+            />
+            <KpiBlock
+              label="Δ vs launch"
+              current={pointValue(latest, "signups")}
+              previous={firstPrev}
+              formatKind={DEFAULT_FORMAT_KIND.numeric}
+              gradient="green"
+            />
+          </div>
+        </section>
+
+        <section>
+          <SectionHeading
+            index="03"
+            label="Value formatters"
+            caption="One number, five pluggable renderers"
+          />
+          <FormatterPanel />
+        </section>
+
+        <section>
+          <SectionHeading
+            index="04"
+            label="State shim"
+            caption="Data · loading · empty · error — one shell, four states"
+          />
+          <ThreeStatePanel />
+        </section>
+
+        <section>
+          <SectionHeading
+            index="05"
+            label="Insights table"
+            caption="Sortable rows with trend sparklines and delta pills"
+          />
+          <InsightsTablePanel />
+        </section>
+      </div>
+    </PageLayout>
+  );
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/chart-demo/page.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/chart-demo/page.tsx
new file mode 100644
index 0000000000..107377a440
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/chart-demo/page.tsx
@@ -0,0 +1,9 @@
+import PageClient from "./page-client";
+
+export const metadata = {
+  title: "Chart Interaction Lab",
+};
+
+export default function Page() {
+  return <PageClient />;
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/datagrid-demo/demo/fixtures.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/datagrid-demo/demo/fixtures.tsx
new file mode 100644
index 0000000000..566309e202
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/datagrid-demo/demo/fixtures.tsx
@@ -0,0 +1,212 @@
+import type { DataGridColumnDef } from "@stackframe/dashboard-ui-components";
+
+// ─── Sample data type ────────────────────────────────────────────────
+
+export type User = {
+  id: string;
+  name: string;
+  email: string;
+  role: "admin" | "editor" | "viewer";
+  status: "active" | "inactive" | "pending";
+  signUps: number;
+  lastLogin: Date;
+  verified: boolean;
+  country: string;
+  revenue: number;
+};
+
+// ─── Column definitions ──────────────────────────────────────────────
+
+export const DEMO_COLUMNS: DataGridColumnDef<User>[] = [
+  {
+    id: "name",
+    header: "Name",
+    accessor: "name",
+    width: 180,
+    type: "string",
+    renderCell: ({ value, row }) => (
+      // Custom cell with avatar-like initial
+      <div className="flex items-center gap-2.5">
+        <div className="flex h-7 w-7 items-center justify-center rounded-full bg-blue-500/10 text-blue-600 dark:text-blue-400 text-xs font-semibold flex-shrink-0">
+          {String(value).charAt(0).toUpperCase()}
+        </div>
+        <span className="truncate font-medium">{String(value)}</span>
+      </div>
+    ),
+  },
+  {
+    id: "email",
+    header: "Email",
+    accessor: "email",
+    width: 220,
+    type: "string",
+    renderCell: ({ value }) => (
+      <span className="text-muted-foreground truncate">{String(value)}</span>
+    ),
+  },
+  {
+    id: "role",
+    header: "Role",
+    accessor: "role",
+    width: 120,
+    type: "singleSelect",
+    valueOptions: [
+      { value: "admin", label: "Admin" },
+      { value: "editor", label: "Editor" },
+      { value: "viewer", label: "Viewer" },
+    ],
+    renderCell: ({ value }) => {
+      const colors: Record<string, string> = {
+        admin: "bg-purple-500/10 text-purple-600 dark:text-purple-400 ring-1 ring-purple-500/20",
+        editor: "bg-blue-500/10 text-blue-600 dark:text-blue-400 ring-1 ring-blue-500/20",
+        viewer: "bg-foreground/[0.04] text-muted-foreground ring-1 ring-foreground/[0.06]",
+      };
+      return (
+        <span className={`inline-flex items-center px-2 py-0.5 rounded-md text-[11px] font-medium ${colors[String(value)] ?? ""}`}>
+          {String(value)}
+        </span>
+      );
+    },
+  },
+  {
+    id: "status",
+    header: "Status",
+    accessor: "status",
+    width: 110,
+    type: "singleSelect",
+    valueOptions: [
+      { value: "active", label: "Active" },
+      { value: "inactive", label: "Inactive" },
+      { value: "pending", label: "Pending" },
+    ],
+    renderCell: ({ value }) => {
+      const dot: Record<string, string> = {
+        active: "bg-emerald-500",
+        inactive: "bg-foreground/20",
+        pending: "bg-amber-500",
+      };
+      return (
+        <div className="flex items-center gap-1.5">
+          <div className={`h-1.5 w-1.5 rounded-full ${dot[String(value)] ?? ""}`} />
+          <span className="text-xs capitalize">{String(value)}</span>
+        </div>
+      );
+    },
+  },
+  {
+    id: "signUps",
+    header: "Sign-ups",
+    accessor: "signUps",
+    width: 110,
+    type: "number",
+    align: "right",
+    renderCell: ({ value }) => (
+      <span className="tabular-nums font-medium">{Number(value).toLocaleString()}</span>
+    ),
+  },
+  {
+    id: "revenue",
+    header: "Revenue",
+    accessor: "revenue",
+    width: 120,
+    type: "number",
+    align: "right",
+    renderCell: ({ value }) => (
+      <span className="tabular-nums font-medium">
+        ${Number(value).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+      </span>
+    ),
+    formatValue: (v) => `$${Number(v).toFixed(2)}`,
+  },
+  {
+    id: "lastLogin",
+    header: "Last login",
+    accessor: "lastLogin",
+    width: 150,
+    type: "date",
+    renderCell: ({ value }) => (
+      <span className="text-muted-foreground tabular-nums text-xs">
+        {value instanceof Date ? value.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }) : "-"}
+      </span>
+    ),
+  },
+  {
+    id: "verified",
+    header: "Verified",
+    accessor: "verified",
+    width: 90,
+    type: "boolean",
+    align: "center",
+  },
+  {
+    id: "country",
+    header: "Country",
+    accessor: "country",
+    width: 130,
+    type: "string",
+  },
+];
+
+// ─── Sample data ─────────────────────────────────────────────────────
+
+const firstNames = [
+  "Alice", "Bob", "Carol", "David", "Eve", "Frank", "Grace", "Hank",
+  "Ivy", "Jack", "Karen", "Leo", "Mia", "Noah", "Olivia", "Paul",
+  "Quinn", "Rose", "Sam", "Tina", "Uma", "Vince", "Wendy", "Xander",
+  "Yara", "Zack", "Aria", "Blake", "Clara", "Dean", "Ella", "Finn",
+  "Gina", "Hugo", "Iris", "Jake", "Kira", "Liam", "Maya", "Nate",
+  "Opal", "Petra", "Quinn", "Riley", "Sage", "Troy", "Ursa", "Vale",
+  "Wren", "Zoe",
+];
+const lastNames = [
+  "Anderson", "Brown", "Chen", "Davis", "Evans", "Fisher", "Garcia",
+  "Harris", "Ivanov", "Jones", "Kim", "Lee", "Martinez", "Nguyen",
+  "O'Brien", "Patel", "Quinn", "Robinson", "Smith", "Taylor", "Ueda",
+  "Vasquez", "Wilson", "Xu", "Yang", "Zhang", "Moore", "Clark",
+  "Lewis", "Walker",
+];
+const countries = [
+  "United States", "United Kingdom", "Germany", "France", "Canada",
+  "Japan", "Australia", "Brazil", "India", "South Korea", "Netherlands",
+  "Sweden", "Norway", "Mexico", "Spain",
+];
+const roles: User["role"][] = ["admin", "editor", "viewer"];
+const statuses: User["status"][] = ["active", "inactive", "pending"];
+
+function seededRandom(seed: number) {
+  let s = seed;
+  return () => {
+    s = (s * 16807) % 2147483647;
+    return (s - 1) / 2147483646;
+  };
+}
+
+export function generateUsers(count: number): User[] {
+  const rng = seededRandom(42);
+  const users: User[] = [];
+
+  for (let i = 0; i < count; i++) {
+    const firstName = firstNames[Math.floor(rng() * firstNames.length)]!;
+    const lastName = lastNames[Math.floor(rng() * lastNames.length)]!;
+    const domain = ["gmail.com", "company.io", "outlook.com", "hey.com"][Math.floor(rng() * 4)]!;
+
+    users.push({
+      id: `user-${i + 1}`,
+      name: `${firstName} ${lastName}`,
+      email: `${firstName.toLowerCase()}.${lastName.toLowerCase()}@${domain}`,
+      role: roles[Math.floor(rng() * roles.length)]!,
+      status: statuses[Math.floor(rng() * (i < count * 0.7 ? 2 : 3))]!,
+      signUps: Math.floor(rng() * 5000),
+      lastLogin: new Date(Date.now() - Math.floor(rng() * 90 * 24 * 60 * 60 * 1000)),
+      verified: rng() > 0.25,
+      country: countries[Math.floor(rng() * countries.length)]!,
+      revenue: Math.floor(rng() * 100000) / 100,
+    });
+  }
+
+  return users;
+}
+
+// Pre-generate datasets
+export const DEMO_USERS_200 = generateUsers(200);
+export const DEMO_USERS_10K = generateUsers(10_000);
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/datagrid-demo/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/datagrid-demo/page-client.tsx
new file mode 100644
index 0000000000..dd590059b4
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/datagrid-demo/page-client.tsx
@@ -0,0 +1,543 @@
+"use client";
+
+import { DesignBadge, DesignCard } from "@/components/design-components";
+import { cn } from "@/components/ui";
+import {
+  CaretRightIcon,
+  ClipboardTextIcon,
+  CursorClickIcon,
+  LightningIcon,
+  XIcon,
+} from "@phosphor-icons/react";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { PageLayout } from "../../page-layout";
+import {
+  createDefaultDataGridState,
+  DataGrid,
+  useDataSource,
+  type DataGridCellContext,
+  type DataGridDataSource,
+  type DataGridState,
+} from "@stackframe/dashboard-ui-components";
+import {
+  DEMO_COLUMNS,
+  DEMO_USERS_200,
+  DEMO_USERS_10K,
+  type User,
+} from "./demo/fixtures";
+
+// ─── Layout helpers ──────────────────────────────────────────────────
+
+function SectionHeading({ index, label, caption }: { index: string; label: string; caption: string }) {
+  return (
+    <div className="mb-3 flex items-end justify-between gap-4">
+      <div className="flex items-baseline gap-3 min-w-0">
+        <span className="font-mono text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground/70 tabular-nums">{index}</span>
+        <div className="min-w-0">
+          <h3 className="text-xs font-semibold uppercase tracking-wider text-foreground">{label}</h3>
+          <p className="text-[11px] mt-0.5 truncate text-muted-foreground">{caption}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Accordion({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <details className="group mt-3">
+      <summary className="flex items-center gap-1.5 cursor-pointer select-none text-xs text-muted-foreground hover:text-foreground transition-colors list-none [&::-webkit-details-marker]:hidden">
+        <CaretRightIcon className="h-3 w-3 transition-transform duration-150 group-open:rotate-90" weight="bold" />
+        {label}
+      </summary>
+      <div className="mt-3">{children}</div>
+    </details>
+  );
+}
+
+// ─── Event log ───────────────────────────────────────────────────────
+
+type LabEvent = { id: number; ts: number; name: string; payload: string };
+
+function useEventLog() {
+  const [events, setEvents] = useState<LabEvent[]>([]);
+  const idRef = useRef(0);
+  const log = useCallback((name: string, payload: string) => {
+    setEvents((prev) => {
+      idRef.current += 1;
+      return [{ id: idRef.current, ts: Date.now(), name, payload }, ...prev].slice(0, 30);
+    });
+  }, []);
+  const clear = useCallback(() => setEvents([]), []);
+  return { events, log, clear };
+}
+
+function EventsPanel({ events, onClear }: { events: LabEvent[]; onClear: () => void }) {
+  return (
+    <DesignCard
+      title="Callback events"
+      icon={LightningIcon}
+      actions={
+        <button className="flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground transition-colors disabled:opacity-30" onClick={onClear} disabled={events.length === 0}>
+          <XIcon weight="bold" className="h-3 w-3" /> Clear
+        </button>
+      }
+    >
+      {events.length === 0 ? (
+        <p className="font-mono text-[11px] text-muted-foreground leading-relaxed">
+          Interact with the grid and callbacks fire here.
+        </p>
+      ) : (
+        <ol className="flex flex-col divide-y divide-foreground/[0.05] rounded-lg bg-foreground/[0.02] ring-1 ring-foreground/[0.05] max-h-[220px] overflow-y-auto">
+          {events.map((e) => (
+            <li key={e.id} className="flex items-baseline gap-3 px-3 py-1.5">
+              <span className="font-mono text-[10px] tabular-nums text-muted-foreground/70 shrink-0 w-[60px]">
+                {new Date(e.ts).toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" })}
+              </span>
+              <span className="font-mono text-[11px] font-semibold text-foreground shrink-0">{e.name}</span>
+              <span className="ml-auto truncate font-mono text-[11px] text-muted-foreground max-w-[220px]">{e.payload}</span>
+            </li>
+          ))}
+        </ol>
+      )}
+    </DesignCard>
+  );
+}
+
+// ─── Usage code panel ────────────────────────────────────────────────
+
+function UsagePanel({ code }: { code: string }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <DesignCard
+      title="Usage"
+      icon={ClipboardTextIcon}
+      actions={
+        <button
+          className="flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground transition-colors"
+          onClick={() => {
+            runAsynchronouslyWithAlert(async () => {
+              await navigator.clipboard.writeText(code);
+              setCopied(true);
+              setTimeout(() => setCopied(false), 1400);
+            });
+          }}
+        >
+          <CursorClickIcon weight="bold" className="h-3 w-3" />
+          {copied ? "Copied" : "Copy"}
+        </button>
+      }
+    >
+      <pre className="overflow-x-auto rounded-lg bg-foreground/[0.04] p-3 font-mono text-[11px] leading-[1.55] text-foreground ring-1 ring-foreground/[0.06] max-h-[220px]">
+        <code>{code}</code>
+      </pre>
+    </DesignCard>
+  );
+}
+
+// ─── Usage code generation ───────────────────────────────────────────
+
+function genUsage(label: string, state: DataGridState, opts: { paginationMode: string; selectionMode: string; dataSource?: boolean }) {
+  const lines = [
+    `const [state, setState] = useState(() =>`,
+    `  createDefaultDataGridState(columns),`,
+    `);`,
+    ``,
+    `<DataGrid`,
+    `  columns={columns}`,
+    opts.dataSource ? `  dataSource={fetchUsers}` : `  data={users}`,
+    `  getRowId={(row) => row.id}`,
+    `  state={state}`,
+    `  onChange={setState}`,
+    `  paginationMode="${opts.paginationMode}"`,
+    `  selectionMode="${opts.selectionMode}"`,
+  ];
+  if (state.sorting.length > 0) lines.push(`  // sort: ${state.sorting.map((s) => `${s.columnId} ${s.direction}`).join(", ")}`);
+  if (state.selection.selectedIds.size > 0) lines.push(`  // selected: ${state.selection.selectedIds.size} row(s)`);
+  lines.push(
+    `  onRowClick={(row, id) => { /* ... */ }}`,
+    `  onSelectionChange={(ids, rows) => { /* ... */ }}`,
+    `/>`,
+  );
+  return lines.join("\n");
+}
+
+// ─── Wired onChange that logs diffs ──────────────────────────────────
+
+function useTrackedState(
+  init: () => DataGridState,
+  log: (name: string, payload: string) => void,
+): [DataGridState, React.Dispatch<React.SetStateAction<DataGridState>>] {
+  const [state, setState] = useState(init);
+  const tracked = useCallback<React.Dispatch<React.SetStateAction<DataGridState>>>(
+    (action) => {
+      setState((prev) => {
+        const next = typeof action === "function" ? action(prev) : action;
+        if (next.sorting !== prev.sorting) log("onSortChange", JSON.stringify(next.sorting));
+        if (next.quickSearch !== prev.quickSearch) log("onQuickSearch", `"${next.quickSearch}"`);
+        if (next.selection !== prev.selection)
+          log("onSelectionChange", `${next.selection.selectedIds.size} row(s)`);
+        if (next.columnWidths !== prev.columnWidths) {
+          const k = Object.keys(next.columnWidths).find((k) => next.columnWidths[k] !== prev.columnWidths[k]);
+          if (k) log("onColumnResize", `${k}=${next.columnWidths[k]}px`);
+        }
+        if (next.columnVisibility !== prev.columnVisibility)
+          log("onColumnVisibility", JSON.stringify(next.columnVisibility));
+        if (next.pagination !== prev.pagination)
+          log("onPaginationChange", `page=${next.pagination.pageIndex + 1}, pageSize=${next.pagination.pageSize}`);
+        return next;
+      });
+    },
+    [log],
+  );
+  return [state, tracked];
+}
+
+// ─── Columns with cell callbacks ─────────────────────────────────────
+
+function useColumnsWithCallbacks(log: (n: string, p: string) => void) {
+  return useMemo(
+    () =>
+      DEMO_COLUMNS.map((col) => ({
+        ...col,
+        onCellClick: (ctx: DataGridCellContext<User>) => log(`cell:click:${col.id}`, `row=${ctx.rowId}`),
+        onCellDoubleClick: (ctx: DataGridCellContext<User>) => log(`cell:dblclick:${col.id}`, `row=${ctx.rowId}`),
+      })),
+    [log],
+  );
+}
+
+// ─── Async data source ───────────────────────────────────────────────
+
+function createAsyncDataSource(allData: User[]): DataGridDataSource<User> {
+  return async function* (params) {
+    await new Promise((r) => setTimeout(r, 600));
+    let sorted = [...allData];
+    if (params.sorting.length > 0) {
+      const s = params.sorting[0]!;
+      sorted.sort((a, b) => {
+        const va = a[s.columnId as keyof User], vb = b[s.columnId as keyof User];
+        let c = 0;
+        if (typeof va === "number" && typeof vb === "number") c = va - vb;
+        else if (va instanceof Date && vb instanceof Date) c = va.getTime() - vb.getTime();
+        else c = String(va) < String(vb) ? -1 : String(va) > String(vb) ? 1 : 0;
+        return s.direction === "asc" ? c : -c;
+      });
+    }
+    const ps = params.pagination.pageSize, st = params.pagination.pageIndex * ps;
+    const page = sorted.slice(st, st + ps);
+    yield { rows: page, totalRowCount: sorted.length, hasMore: st + ps < sorted.length, nextCursor: st + ps < sorted.length ? st + ps : undefined };
+  };
+}
+
+// ─── Height edge case helper ─────────────────────────────────────────
+
+/**
+ * Renders a single DataGrid inside a parent with a specific height
+ * constraint, plus a caption describing what's being tested. Used by the
+ * "Height edge cases" section to exercise every combination of parent
+ * height × `maxHeight` prop × row count.
+ */
+function HeightCase({
+  index,
+  title,
+  expectation,
+  data,
+  maxHeight,
+  parentClassName,
+  toolbar,
+  footer,
+  wrapInFlex,
+}: {
+  index: string;
+  title: string;
+  expectation: string;
+  data: User[];
+  maxHeight?: number | string;
+  parentClassName?: string;
+  toolbar?: false;
+  footer?: false;
+  /** When true, wrap the grid in an extra `flex-1 min-h-0` child so the
+   *  `parentClassName` acts as a flex column with the grid as flex item. */
+  wrapInFlex?: boolean;
+}) {
+  const [state, setState] = useState(() => createDefaultDataGridState(DEMO_COLUMNS));
+  const ds = useDataSource({
+    data,
+    columns: DEMO_COLUMNS,
+    getRowId: (r: User) => r.id,
+    sorting: state.sorting,
+    quickSearch: state.quickSearch,
+    pagination: state.pagination,
+    paginationMode: "client",
+  });
+
+  const grid = (
+    <DataGrid<User>
+      columns={DEMO_COLUMNS}
+      rows={ds.rows}
+      getRowId={(row) => row.id}
+      totalRowCount={ds.totalRowCount}
+      isLoading={ds.isLoading}
+      state={state}
+      onChange={setState}
+      paginationMode="paginated"
+      selectionMode="none"
+      maxHeight={maxHeight}
+      toolbar={toolbar}
+      footer={footer}
+    />
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-baseline gap-2">
+        <span className="font-mono text-[10px] font-semibold tabular-nums text-muted-foreground/60">{index}</span>
+        <span className="text-xs font-semibold text-foreground">{title}</span>
+      </div>
+      <p className="font-mono text-[10px] leading-relaxed text-muted-foreground">{expectation}</p>
+      <div
+        className={cn(
+          "rounded-xl ring-1 ring-dashed ring-foreground/10 bg-foreground/[0.015] p-2",
+          parentClassName,
+        )}
+      >
+        {wrapInFlex ? (
+          <div className="flex h-full min-h-0 flex-col">
+            <div className="shrink-0 px-2 pb-2 font-mono text-[10px] text-muted-foreground/70">
+              sibling · shrink-0
+            </div>
+            <div className="flex-1 min-h-0">{grid}</div>
+          </div>
+        ) : (
+          grid
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── Page ────────────────────────────────────────────────────────────
+
+export default function PageClient() {
+  // ── Section 1: Client-side ─────────────────────────────────
+  const log1 = useEventLog();
+  const cols1 = useColumnsWithCallbacks(log1.log);
+  const [s1, setS1] = useTrackedState(() => createDefaultDataGridState(DEMO_COLUMNS), log1.log);
+  const ds1 = useDataSource({ data: DEMO_USERS_200, columns: DEMO_COLUMNS, getRowId: (r: User) => r.id, sorting: s1.sorting, quickSearch: s1.quickSearch, pagination: s1.pagination, paginationMode: "client" });
+  const usage1 = useMemo(() => genUsage("Client", s1, { paginationMode: "paginated", selectionMode: "multiple" }), [s1]);
+
+  // ── Section 2: Infinite scroll ─────────────────────────────
+  const log2 = useEventLog();
+  const cols2 = useColumnsWithCallbacks(log2.log);
+  const [s2, setS2] = useTrackedState(() => ({ ...createDefaultDataGridState(DEMO_COLUMNS), pagination: { pageIndex: 0, pageSize: 50 } }), log2.log);
+  const ds2Source = useMemo(() => createAsyncDataSource(DEMO_USERS_10K), []);
+  const ds2 = useDataSource({ dataSource: ds2Source, getRowId: (r: User) => r.id, columns: DEMO_COLUMNS, sorting: s2.sorting, quickSearch: s2.quickSearch, pagination: s2.pagination, paginationMode: "infinite" });
+  const usage2 = useMemo(() => genUsage("Infinite", s2, { paginationMode: "infinite", selectionMode: "none", dataSource: true }), [s2]);
+
+  // ── Section 3: Server pagination ───────────────────────────
+  const log3 = useEventLog();
+  const cols3 = useColumnsWithCallbacks(log3.log);
+  const [s3, setS3] = useTrackedState(() => ({ ...createDefaultDataGridState(DEMO_COLUMNS), pagination: { pageIndex: 0, pageSize: 25 } }), log3.log);
+  const ds3Source = useMemo(() => createAsyncDataSource(DEMO_USERS_10K), []);
+  const ds3 = useDataSource({ dataSource: ds3Source, getRowId: (r: User) => r.id, columns: DEMO_COLUMNS, sorting: s3.sorting, quickSearch: s3.quickSearch, pagination: s3.pagination, paginationMode: "server" });
+  const usage3 = useMemo(() => genUsage("Server", s3, { paginationMode: "paginated", selectionMode: "single", dataSource: true }), [s3]);
+
+  // ── Section 4: Selection ───────────────────────────────────
+  const log4 = useEventLog();
+  const cols4 = useColumnsWithCallbacks(log4.log);
+  const [s4, setS4] = useTrackedState(() => createDefaultDataGridState(DEMO_COLUMNS), log4.log);
+  const ds4 = useDataSource({ data: DEMO_USERS_200.slice(0, 50), columns: DEMO_COLUMNS, getRowId: (r: User) => r.id, sorting: s4.sorting, quickSearch: s4.quickSearch, pagination: s4.pagination, paginationMode: "client" });
+  const usage4 = useMemo(() => genUsage("Selection", s4, { paginationMode: "paginated", selectionMode: "multiple" }), [s4]);
+
+  return (
+    <PageLayout
+      title="DataGrid interaction lab"
+      description="Virtualized data grid with resizable columns, infinite scroll, quick search, sorting, selection, cell callbacks, and CSV export."
+      actions={<DesignBadge label="Lab · internal" color="purple" icon={LightningIcon} size="sm" />}
+    >
+      <div className="flex flex-col gap-8">
+        {/* ── 01 Client-side ───────────────────────────────────── */}
+        <section>
+          <SectionHeading index="01" label="Client-side · 200 rows · cell callbacks" caption="All callbacks wired — search, click cells, sort, resize, select" />
+          <DataGrid<User>
+            columns={cols1}
+            rows={ds1.rows}
+            getRowId={(row) => row.id}
+            totalRowCount={ds1.totalRowCount}
+            isLoading={ds1.isLoading}
+            state={s1}
+            onChange={setS1}
+            paginationMode="paginated"
+            selectionMode="multiple"
+            maxHeight={520}
+            exportFilename="users-client"
+            onRowClick={(row, id) => log1.log("onRowClick", `${id} (${row.name})`)}
+            onRowDoubleClick={(row, id) => log1.log("onRowDoubleClick", `${id} (${row.name})`)}
+          />
+          <Accordion label="Usage & callback log">
+            <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+              <UsagePanel code={usage1} />
+              <EventsPanel events={log1.events} onClear={log1.clear} />
+            </div>
+          </Accordion>
+        </section>
+
+        {/* ── 02 Infinite scroll ────────────────────────────────── */}
+        <section>
+          <SectionHeading index="02" label="Infinite scroll · 10K rows" caption="Async generator yields pages as you scroll — virtualized rendering for performance" />
+          <DataGrid<User>
+            columns={cols2}
+            rows={ds2.rows}
+            getRowId={(row) => row.id}
+            totalRowCount={ds2.totalRowCount}
+            isLoading={ds2.isLoading}
+            isLoadingMore={ds2.isLoadingMore}
+            hasMore={ds2.hasMore}
+            onLoadMore={ds2.loadMore}
+            state={s2}
+            onChange={setS2}
+            paginationMode="infinite"
+            selectionMode="none"
+            maxHeight={480}
+            exportFilename="users-infinite"
+            onRowClick={(row, id) => log2.log("onRowClick", `${id} (${row.name})`)}
+          />
+          <Accordion label="Usage & callback log">
+            <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+              <UsagePanel code={usage2} />
+              <EventsPanel events={log2.events} onClear={log2.clear} />
+            </div>
+          </Accordion>
+        </section>
+
+        {/* ── 03 Server pagination ──────────────────────────────── */}
+        <section>
+          <SectionHeading index="03" label="Server pagination · 10K rows" caption="Page-by-page server fetching with async data source — 25 rows per page" />
+          <DataGrid<User>
+            columns={cols3}
+            rows={ds3.rows}
+            getRowId={(row) => row.id}
+            totalRowCount={ds3.totalRowCount}
+            isLoading={ds3.isLoading}
+            isRefetching={ds3.isRefetching}
+            state={s3}
+            onChange={setS3}
+            paginationMode="paginated"
+            selectionMode="single"
+            maxHeight={480}
+            exportFilename="users-server"
+            onRowClick={(row, id) => log3.log("onRowClick", `${id} (${row.name})`)}
+          />
+          <Accordion label="Usage & callback log">
+            <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+              <UsagePanel code={usage3} />
+              <EventsPanel events={log3.events} onClear={log3.clear} />
+            </div>
+          </Accordion>
+        </section>
+
+        {/* ── 04 Selection ──────────────────────────────────────── */}
+        <section>
+          <SectionHeading index="04" label="Multi-select · click / ctrl / shift" caption="Click to select, Ctrl+Click to toggle, Shift+Click for range — checkbox column included" />
+          <DataGrid<User>
+            columns={cols4}
+            rows={ds4.rows}
+            getRowId={(row) => row.id}
+            totalRowCount={ds4.totalRowCount}
+            isLoading={ds4.isLoading}
+            state={s4}
+            onChange={setS4}
+            paginationMode="paginated"
+            selectionMode="multiple"
+            maxHeight={400}
+            footer={false}
+            onRowClick={(row, id) => log4.log("onRowClick", `${id} (${row.name})`)}
+            onSelectionChange={(ids, rows) => log4.log("onSelectionChange", `${ids.size} row(s): ${rows.slice(0, 3).map((r) => r.name).join(", ")}${rows.length > 3 ? "\u2026" : ""}`)}
+          />
+          <Accordion label="Usage & callback log">
+            <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+              <UsagePanel code={usage4} />
+              <EventsPanel events={log4.events} onClear={log4.clear} />
+            </div>
+          </Accordion>
+        </section>
+
+        {/* ── 05 Height edge cases ─────────────────────────────── */}
+        <section>
+          <SectionHeading
+            index="05"
+            label="Height edge cases"
+            caption="Every combination of parent height × maxHeight × row count — the grid should do the right thing in each"
+          />
+          <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+            <HeightCase
+              index="05.A"
+              title="Unbounded parent · no maxHeight · few rows"
+              expectation="Parent is auto-height. No maxHeight. 5 rows. Grid grows to fit its content; no scrollbar. Page does not scroll either because the grid is shorter than the viewport."
+              data={DEMO_USERS_200.slice(0, 5)}
+            />
+
+            <HeightCase
+              index="05.B"
+              title="Unbounded parent · no maxHeight · many rows"
+              expectation="Parent is auto-height. No maxHeight. 200 rows. Grid grows to its full content height and the PAGE scrolls. Not ideal for production, but the grid itself shouldn't crash or collapse."
+              data={DEMO_USERS_200}
+            />
+
+            <HeightCase
+              index="05.C"
+              title="Unbounded parent · maxHeight={360}"
+              expectation="Parent is auto-height. Grid caps at 360px via the prop and scrolls its body. Toolbar and footer remain visible."
+              data={DEMO_USERS_200}
+              maxHeight={360}
+            />
+
+            <HeightCase
+              index="05.D"
+              title={"Unbounded parent · maxHeight=\"40vh\""}
+              expectation="Parent is auto-height. maxHeight is a CSS string. Grid caps at 40% of the viewport and scrolls its body. Resize the browser to verify."
+              data={DEMO_USERS_200}
+              maxHeight="40vh"
+            />
+
+            <HeightCase
+              index="05.E"
+              title="Bounded parent · h-[360px] · no maxHeight"
+              expectation="Parent is a bounded box (360px). No maxHeight prop. Grid fills the parent via `h-full` and scrolls its body."
+              data={DEMO_USERS_200}
+              parentClassName="h-[360px]"
+            />
+
+            <HeightCase
+              index="05.F"
+              title="Bounded flex-col parent · grid is flex-1 sibling"
+              expectation="Parent is a `flex flex-col h-[360px]`. A shrink-0 sibling sits above. The grid fills the remaining space via `flex-1 min-h-0` and scrolls its body. This is the canonical layout for dashboard panels."
+              data={DEMO_USERS_200}
+              parentClassName="h-[360px]"
+              wrapInFlex
+            />
+
+            <HeightCase
+              index="05.G"
+              title="Chrome off · toolbar=false · footer=false · maxHeight={320}"
+              expectation="Toolbar and footer both hidden. maxHeight is 320. Header + scroll body only. Scroll body should still get exactly the right remaining space with no gap and no clipping."
+              data={DEMO_USERS_200}
+              maxHeight={320}
+              toolbar={false}
+              footer={false}
+            />
+
+            <HeightCase
+              index="05.H"
+              title="maxHeight={600} · only 3 rows"
+              expectation="maxHeight is larger than the content. Grid should render at its content height (NOT stretch to 600px of empty space). No scrollbar."
+              data={DEMO_USERS_200.slice(0, 3)}
+              maxHeight={600}
+            />
+          </div>
+        </section>
+      </div>
+    </PageLayout>
+  );
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/datagrid-demo/page.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/datagrid-demo/page.tsx
new file mode 100644
index 0000000000..774c859188
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/datagrid-demo/page.tsx
@@ -0,0 +1,9 @@
+import PageClient from "./page-client";
+
+export const metadata = {
+  title: "DataGrid Interaction Lab",
+};
+
+export default function Page() {
+  return <PageClient />;
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/[draftId]/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/[draftId]/page-client.tsx
index 543e03168b..a1d3f4c097 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/[draftId]/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/[draftId]/page-client.tsx
@@ -19,6 +19,16 @@ import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import { ColumnDef } from "@tanstack/react-table";
 import { useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
+
+const BUILDER_STATUS_MESSAGES = [
+  "Reading your current draft...",
+  "Understanding your changes...",
+  "Planning the update...",
+  "Crafting components...",
+  "Refining the layout...",
+  "Polishing the details...",
+  "Almost there...",
+];
 import { AppEnabledGuard } from "../../app-enabled-guard";
 import { useAdminApp } from "../../use-admin-app";
 import { SentEmailsView } from "../../email-sent/sent-emails-view";
@@ -94,6 +104,10 @@ export default function PageClient({ draftId }: { draftId: string }) {
     return () => setNeedConfirm(false);
   }, [setNeedConfirm, draft, currentCode, selectedThemeId, stage]);
 
+  const [isRunning, setIsRunning] = useState(false);
+  const handleRunStart = useCallback(() => setIsRunning(true), []);
+  const handleRunEnd = useCallback(() => setIsRunning(false), []);
+
   const handleToolUpdate = (toolCall: ToolCallContent) => {
     setCurrentCode(toolCall.args.content);
   };
@@ -233,9 +247,10 @@ export default function PageClient({ draftId }: { draftId: string }) {
                 chatComponent={
                   <AssistantChat
                     historyAdapter={createHistoryAdapter(stackAdminApp, draftId)}
-                    chatAdapter={createChatAdapter(backendBaseUrl, "email-draft", handleToolUpdate, () => currentCode, currentUser)}
+                    chatAdapter={createChatAdapter(backendBaseUrl, "email-draft", handleToolUpdate, () => currentCode, currentUser, handleRunStart, handleRunEnd)}
                     toolComponents={<EmailDraftUI setCurrentCode={setCurrentCode} />}
                     useOffWhiteLightMode
+                    runningStatusMessages={isRunning ? BUILDER_STATUS_MESSAGES : undefined}
                   />
                 }
               />
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/page-client.tsx
index 4aaebe0b26..93c5b1ed09 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/page-client.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { DesignCard } from "@/components/design-components";
 import { FormDialog } from "@/components/form-dialog";
 import { InputField } from "@/components/form-fields";
 import { useRouter } from "@/components/router";
@@ -9,11 +8,26 @@ import { cn } from "@/lib/utils";
 import { ArrowLeft, CaretDown, ClockCounterClockwise, Copy, DotsThreeVertical, FileCode, FileText, PaperPlaneTilt, Pencil, Plus, WarningCircle } from "@phosphor-icons/react";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
 import { urlString } from "@stackframe/stack-shared/dist/utils/urls";
-import { useMemo, useState } from "react";
+import { useMemo, useState, type ElementType } from "react";
 import * as yup from "yup";
 import { AppEnabledGuard } from "../app-enabled-guard";
 import { PageLayout } from "../page-layout";
 import { useAdminApp } from "../use-admin-app";
+import { DesignAnalyticsCard } from "@/components/design-components";
+
+// Section header with icon following design guide
+function SectionHeader({ icon: Icon, title }: { icon: ElementType, title: string }) {
+  return (
+    <div className="flex items-center gap-2">
+      <div className="p-1.5 rounded-lg bg-foreground/[0.04]">
+        <Icon className="h-3.5 w-3.5 text-muted-foreground" />
+      </div>
+      <span className="text-xs font-semibold text-foreground uppercase tracking-wider">
+        {title}
+      </span>
+    </div>
+  );
+}
 
 // Draft item card component
 function DraftCard({
@@ -251,10 +265,13 @@ export default function PageClient() {
   // Split drafts into active (not sent) and history (sent)
   const { activeDrafts, historyDrafts } = useMemo(() => {
     const active: typeof drafts = [];
-    const history: typeof drafts = [];
+    const history: Array<(typeof drafts)[number] & { sentAt: Date }> = [];
     for (const draft of drafts) {
-      if (draft.sentAt) {
-        history.push(draft);
+      if (draft.sentAt != null) {
+        history.push({
+          ...draft,
+          sentAt: draft.sentAt,
+        });
       } else {
         active.push(draft);
       }
@@ -290,16 +307,14 @@ export default function PageClient() {
           />
         }
       >
-        {/* Active Drafts Section */}
-        <DesignCard
-          gradient="default"
-          glassmorphic
-          contentClassName="p-0"
-        >
-          <div className="p-5 flex items-center justify-between gap-4">
-            <div className="flex items-center gap-2">
-              <div className="p-1.5 rounded-lg bg-foreground/[0.06] dark:bg-foreground/[0.04]">
-                <FileText className="h-3.5 w-3.5 text-foreground/70 dark:text-muted-foreground" />
+        <DesignAnalyticsCard gradient="slate" className="overflow-hidden" chart={{ type: "none", tooltipType: "none", highlightMode: "none" }}>
+          <div className="p-5">
+            <div className="flex items-start justify-between gap-4">
+              <div className="flex-1 min-w-0">
+                <SectionHeader icon={FileText} title="Drafts" />
+                <Typography variant="secondary" className="text-sm mt-1">
+                  Compose and manage your email drafts
+                </Typography>
               </div>
               <span className="text-xs font-semibold text-foreground uppercase tracking-wider">
                 Active Drafts
@@ -353,40 +368,30 @@ export default function PageClient() {
               />
             </div>
           )}
-        </DesignCard>
+        </DesignAnalyticsCard>
 
-        {/* Draft History Section (only show if there are sent drafts) */}
+        {/* Draft History */}
         {historyDrafts.length > 0 && (
-          <DesignCard
-            gradient="default"
-            glassmorphic
-            contentClassName="p-0"
-            className="mt-6"
-          >
-            <div className="p-5 flex items-center justify-between gap-4">
-              <div className="flex items-center gap-2">
-                <div className="p-1.5 rounded-lg bg-foreground/[0.06] dark:bg-foreground/[0.04]">
-                  <ClockCounterClockwise className="h-3.5 w-3.5 text-foreground/70 dark:text-muted-foreground" />
-                </div>
-                <span className="text-xs font-semibold text-foreground uppercase tracking-wider">
-                  Draft History
-                </span>
+          <DesignAnalyticsCard chart={{ type: "none", tooltipType: "none", highlightMode: "none" }}>
+            <div className="p-4">
+              <div className="flex items-center justify-between mb-3">
+                <SectionHeader icon={ClockCounterClockwise} title="History" />
+                <Typography variant="secondary" className="text-xs">
+                  {historyDrafts.length} sent {historyDrafts.length === 1 ? "draft" : "drafts"}
+                </Typography>
               </div>
-              <div className="text-xs text-muted-foreground tabular-nums">
-                {historyDrafts.length} sent
+              <div className="flex flex-col gap-2">
+                {historyDrafts.map((draft) => (
+                  <HistoryDraftCard
+                    key={draft.id}
+                    draft={draft}
+                    onOpen={() => handleOpenHistoryDraft(draft.id)}
+                    onDelete={() => runAsynchronouslyWithAlert(() => handleDeleteDraft(draft.id))}
+                  />
+                ))}
               </div>
             </div>
-            <div className="p-4 space-y-2">
-              {historyDrafts.map((draft) => (
-                <HistoryDraftCard
-                  key={draft.id}
-                  draft={draft as typeof draft & { sentAt: Date }}
-                  onOpen={() => handleOpenHistoryDraft(draft.id)}
-                  onDelete={() => runAsynchronouslyWithAlert(() => handleDeleteDraft(draft.id))}
-                />
-              ))}
-            </div>
-          </DesignCard>
+          </DesignAnalyticsCard>
         )}
 
         {/* Shared SMTP Warning Dialog */}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates/[templateId]/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates/[templateId]/page-client.tsx
index 75d6b6f4a7..66f6e3a3c0 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates/[templateId]/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates/[templateId]/page-client.tsx
@@ -22,6 +22,16 @@ import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
 import { useCallback, useEffect, useRef, useState } from "react";
 
+const BUILDER_STATUS_MESSAGES = [
+  "Reading your current template...",
+  "Understanding your changes...",
+  "Planning the update...",
+  "Crafting components...",
+  "Refining the layout...",
+  "Polishing the details...",
+  "Almost there...",
+];
+
 import { AppEnabledGuard } from "../../app-enabled-guard";
 import { PageLayout } from "../../page-layout";
 import { useAdminApp } from "../../use-admin-app";
@@ -117,6 +127,10 @@ export default function PageClient(props: { templateId: string }) {
     return () => setNeedConfirm(false);
   }, [setNeedConfirm, template, currentCode, selectedThemeId]);
 
+  const [isRunning, setIsRunning] = useState(false);
+  const handleRunStart = useCallback(() => setIsRunning(true), []);
+  const handleRunEnd = useCallback(() => setIsRunning(false), []);
+
   const handleCodeUpdate = (toolCall: ToolCallContent) => {
     setCurrentCode(toolCall.args.content);
   };
@@ -277,10 +291,11 @@ export default function PageClient(props: { templateId: string }) {
             }
             chatComponent={
               <AssistantChat
-                chatAdapter={createChatAdapter(backendBaseUrl, "email-template", handleCodeUpdate, () => currentCode, currentUser)}
+                chatAdapter={createChatAdapter(backendBaseUrl, "email-template", handleCodeUpdate, () => currentCode, currentUser, handleRunStart, handleRunEnd)}
                 historyAdapter={createHistoryAdapter(stackAdminApp, template.id)}
                 toolComponents={<EmailTemplateUI setCurrentCode={setCurrentCode} />}
                 useOffWhiteLightMode
+                runningStatusMessages={isRunning ? BUILDER_STATUS_MESSAGES : undefined}
               />
             }
           />
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/[themeId]/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/[themeId]/page-client.tsx
index 4f0b778e5c..bb76ddbb49 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/[themeId]/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/[themeId]/page-client.tsx
@@ -16,6 +16,16 @@ import { previewTemplateSource } from "@stackframe/stack-shared/dist/helpers/ema
 import { KnownErrors } from "@stackframe/stack-shared/dist/known-errors";
 import { useUser } from "@stackframe/stack";
 import { useCallback, useEffect, useState } from "react";
+
+const BUILDER_STATUS_MESSAGES = [
+  "Reading your current theme...",
+  "Understanding your changes...",
+  "Planning the update...",
+  "Crafting components...",
+  "Refining the layout...",
+  "Polishing the details...",
+  "Almost there...",
+];
 import { AppEnabledGuard } from "../../app-enabled-guard";
 import { useAdminApp } from "../../use-admin-app";
 
@@ -57,6 +67,10 @@ export default function PageClient({ themeId }: { themeId: string }) {
     return () => setNeedConfirm(false);
   }, [setNeedConfirm, theme, currentCode]);
 
+  const [isRunning, setIsRunning] = useState(false);
+  const handleRunStart = useCallback(() => setIsRunning(true), []);
+  const handleRunEnd = useCallback(() => setIsRunning(false), []);
+
   const handleThemeUpdate = (toolCall: ToolCallContent) => {
     setCurrentCode(toolCall.args.content);
   };
@@ -131,10 +145,11 @@ export default function PageClient({ themeId }: { themeId: string }) {
             }
             chatComponent={
               <AssistantChat
-                chatAdapter={createChatAdapter(backendBaseUrl, "email-theme", handleThemeUpdate, () => currentCode, currentUser)}
+                chatAdapter={createChatAdapter(backendBaseUrl, "email-theme", handleThemeUpdate, () => currentCode, currentUser, handleRunStart, handleRunEnd)}
                 historyAdapter={createHistoryAdapter(stackAdminApp, themeId)}
                 toolComponents={<EmailThemeUI setCurrentCode={setCurrentCode} />}
                 useOffWhiteLightMode
+                runningStatusMessages={isRunning ? BUILDER_STATUS_MESSAGES : undefined}
               />
             }
           />
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/page-client.tsx
index 3c146c2e05..5b22ee289f 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/page-client.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { DesignCard } from "@/components/design-components";
 import EmailPreview, { DEVICE_VIEWPORTS, DeviceViewport } from "@/components/email-preview";
 import { FormDialog } from "@/components/form-dialog";
 import { InputField } from "@/components/form-fields";
@@ -12,11 +11,26 @@ import { CheckIcon, DeviceMobile, DeviceTablet, Monitor, Palette, Plus, Trash }
 import { DEFAULT_EMAIL_THEMES, DEFAULT_EMAIL_THEME_ID, previewTemplateSource } from "@stackframe/stack-shared/dist/helpers/emails";
 import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, type ElementType } from "react";
 import * as yup from "yup";
 import { AppEnabledGuard } from "../app-enabled-guard";
 import { PageLayout } from "../page-layout";
 import { useAdminApp } from "../use-admin-app";
+import { DesignAnalyticsCard } from "@/components/design-components";
+
+// Section header with icon following design guide
+function SectionHeader({ icon: Icon, title }: { icon: ElementType, title: string }) {
+  return (
+    <div className="flex items-center gap-2">
+      <div className="p-1.5 rounded-lg bg-foreground/[0.04]">
+        <Icon className="h-3.5 w-3.5 text-muted-foreground" />
+      </div>
+      <span className="text-xs font-semibold text-foreground uppercase tracking-wider">
+        {title}
+      </span>
+    </div>
+  );
+}
 
 // Device icon component
 function DeviceIcon({ type, className }: { type: DeviceViewport['type'], className?: string }) {
@@ -149,18 +163,15 @@ export default function PageClient() {
       >
         <div className="flex flex-col gap-5">
           {/* Active Theme Card */}
-          <DesignCard glassmorphic gradient="default">
-            <div className="flex items-center justify-between gap-4">
-              <div className="flex items-center gap-4">
-                <div className="p-1.5 rounded-lg bg-foreground/[0.06] dark:bg-foreground/[0.04]">
-                  <Palette className="h-3.5 w-3.5 text-foreground/70 dark:text-muted-foreground" />
+          <DesignAnalyticsCard chart={{ type: "none", tooltipType: "none", highlightMode: "none" }}>
+            <div className="p-5">
+              <div className="flex items-center justify-between gap-4">
+                <div className="flex items-center gap-4">
+                  <SectionHeader icon={Palette} title="Active Theme" />
+                  <span className="text-sm text-muted-foreground">
+                    Currently using <span className="font-medium text-foreground">{selectedThemeData.displayName}</span>
+                  </span>
                 </div>
-                <span className="text-xs font-semibold text-foreground uppercase tracking-wider">
-                  Active Theme
-                </span>
-                <span className="text-sm text-muted-foreground">
-                  Currently using <span className="font-medium text-foreground">{selectedThemeData.displayName}</span>
-                </span>
               </div>
               <ActionDialog
                 trigger={
@@ -208,10 +219,10 @@ export default function PageClient() {
                 )}
               </ActionDialog>
             </div>
-          </DesignCard>
+          </DesignAnalyticsCard>
 
           {/* Device Preview Card */}
-          <DesignCard glassmorphic gradient="default" contentClassName="p-0">
+          <DesignAnalyticsCard className="overflow-hidden" chart={{ type: "none", tooltipType: "none", highlightMode: "none" }}>
             {/* Header with viewport selector */}
             <div className="p-5 flex items-center justify-between gap-4">
               <div className="flex items-center gap-4">
@@ -250,7 +261,7 @@ export default function PageClient() {
                 senderEmail={`noreply@${project.displayName.toLowerCase().replace(/[^a-z0-9]/g, '')}.com`}
               />
             </div>
-          </DesignCard>
+          </DesignAnalyticsCard>
         </div>
       </PageLayout>
     </AppEnabledGuard>
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/emails/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/emails/page-client.tsx
index 7fdd4afaf1..46dfc22f10 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/emails/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/emails/page-client.tsx
@@ -6,8 +6,7 @@ import { InputField, SelectField, TextAreaField } from "@/components/form-fields
 import { ActionDialog, Alert, AlertDescription, AlertTitle, Button, DataTable, DataTableColumnHeader, DataTableViewOptions, SimpleTooltip, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, useToast } from "@/components/ui";
 import { useUpdateConfig } from "@/lib/config-update";
 import { getPublicEnvVar } from "@/lib/env";
-import { cn } from "@/lib/utils";
-import { CheckCircle, Envelope, HardDrive, Sliders, WarningCircleIcon, XCircle, XIcon } from "@phosphor-icons/react";
+import { ArrowSquareOut, CheckCircle, Envelope, HardDrive, Sliders, WarningCircleIcon, XCircle, XIcon } from "@phosphor-icons/react";
 import { AdminEmailConfig, AdminProject, AdminSentEmail, ServerUser, UserAvatar } from "@stackframe/stack";
 import { CompleteConfig } from "@stackframe/stack-shared/dist/config/schema";
 import { strictEmailSchema } from "@stackframe/stack-shared/dist/schema-fields";
@@ -15,54 +14,15 @@ import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import { deepPlainEquals } from "@stackframe/stack-shared/dist/utils/objects";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
 import { ColumnDef, Table as TableType } from "@tanstack/react-table";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState, type ElementType } from "react";
 import * as yup from "yup";
 import { AppEnabledGuard } from "../app-enabled-guard";
 import { PageLayout } from "../page-layout";
 import { useAdminApp } from "../use-admin-app";
-
-// Glassmorphic card component following design guide
-function GlassCard({
-  children,
-  className,
-  gradientColor = "blue"
-}: {
-  children: React.ReactNode,
-  className?: string,
-  gradientColor?: "blue" | "purple" | "green" | "orange" | "slate" | "cyan",
-}) {
-  const hoverTints: Record<string, string> = {
-    blue: "group-hover:bg-blue-500/[0.03]",
-    purple: "group-hover:bg-purple-500/[0.03]",
-    green: "group-hover:bg-emerald-500/[0.03]",
-    orange: "group-hover:bg-orange-500/[0.03]",
-    slate: "group-hover:bg-slate-500/[0.02]",
-    cyan: "group-hover:bg-cyan-500/[0.03]",
-  };
-
-  return (
-    <div className={cn(
-      "group relative rounded-2xl bg-background/60 backdrop-blur-xl transition-all duration-150 hover:transition-none",
-      "ring-1 ring-foreground/[0.06] hover:ring-foreground/[0.1]",
-      "shadow-sm hover:shadow-md",
-      className
-    )}>
-      {/* Subtle glassmorphic background */}
-      <div className="absolute inset-0 bg-gradient-to-br from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl overflow-hidden" />
-      {/* Accent hover tint */}
-      <div className={cn(
-        "absolute inset-0 transition-colors duration-150 group-hover:transition-none pointer-events-none rounded-2xl overflow-hidden",
-        hoverTints[gradientColor]
-      )} />
-      <div className="relative">
-        {children}
-      </div>
-    </div>
-  );
-}
+import { DesignAnalyticsCard } from "@/components/design-components";
 
 // Section header with icon following design guide
-function SectionHeader({ icon: Icon, title }: { icon: React.ElementType, title: string }) {
+function SectionHeader({ icon: Icon, title }: { icon: ElementType, title: string }) {
   return (
     <div className="flex items-center gap-2">
       <div className="p-1.5 rounded-lg bg-foreground/[0.04]">
@@ -99,6 +59,7 @@ export default function PageClient() {
   const stackAdminApp = useAdminApp();
   const project = stackAdminApp.useProject();
   const emailConfig = project.useConfig().emails.server;
+  const isLocalEmulator = getPublicEnvVar("NEXT_PUBLIC_STACK_IS_LOCAL_EMULATOR") === "true";
 
   return (
     <AppEnabledGuard appId="emails">
@@ -118,6 +79,8 @@ export default function PageClient() {
         }
       >
         <div className="flex flex-col gap-5">
+          {isLocalEmulator && <EmulatorModeCard />}
+
           {/* Email Server Card */}
           <EmailServerCard emailConfig={emailConfig} />
 
@@ -129,6 +92,44 @@ export default function PageClient() {
   );
 }
 
+function EmulatorModeCard() {
+  const inbucketWebUrl = getPublicEnvVar("NEXT_PUBLIC_STACK_INBUCKET_WEB_URL");
+  const inbucketMonitorUrl = inbucketWebUrl == null
+    ? null
+    : `${inbucketWebUrl.replace(/\/$/, "")}/monitor`;
+
+  return (
+    <DesignAnalyticsCard gradient="purple" chart={{ type: "none", tooltipType: "none", highlightMode: "none" }}>
+      <div className="p-5">
+        <div className="flex items-start justify-between gap-5">
+          <div className="flex-1 min-w-0">
+            <SectionHeader icon={HardDrive} title="Mock Emails" />
+            <Typography variant="secondary" className="text-sm mt-1">
+              View all emails sent through the emulator in Inbucket
+            </Typography>
+          </div>
+          <Button
+            variant='secondary'
+            size="sm"
+            className="h-8 px-3 text-xs gap-1.5 flex-shrink-0"
+            disabled={inbucketMonitorUrl == null}
+            title={inbucketMonitorUrl == null ? "Set NEXT_PUBLIC_STACK_INBUCKET_WEB_URL to open Inbucket" : undefined}
+            onClick={() => {
+              if (inbucketMonitorUrl == null) {
+                throwErr("NEXT_PUBLIC_STACK_INBUCKET_WEB_URL must be configured to open Inbucket monitor.");
+              }
+              window.open(inbucketMonitorUrl, "_blank", "noopener,noreferrer");
+            }}
+          >
+            <ArrowSquareOut className="h-3.5 w-3.5" />
+            Open Inbox
+          </Button>
+        </div>
+      </div>
+    </DesignAnalyticsCard>
+  );
+}
+
 function EmailServerCard({ emailConfig }: { emailConfig: CompleteConfig['emails']['server'] }) {
   const isLocalEmulator = getPublicEnvVar("NEXT_PUBLIC_STACK_IS_LOCAL_EMULATOR") === "true";
   const serverType = emailConfig.isShared
@@ -144,7 +145,7 @@ function EmailServerCard({ emailConfig }: { emailConfig: CompleteConfig['emails'
       : emailConfig.senderEmail;
 
   return (
-    <GlassCard gradientColor="slate">
+    <DesignAnalyticsCard gradient="slate" chart={{ type: "none", tooltipType: "none", highlightMode: "none" }}>
       <div className="p-5">
         <div className="flex items-start justify-between gap-5">
           <div className="flex-1 min-w-0">
@@ -238,7 +239,7 @@ function EmailServerCard({ emailConfig }: { emailConfig: CompleteConfig['emails'
           )}
         </div>
       </div>
-    </GlassCard>
+    </DesignAnalyticsCard>
   );
 }
 
@@ -478,7 +479,7 @@ function EmailLogCard() {
 
   if (loading) {
     return (
-      <GlassCard gradientColor="slate" className="overflow-hidden">
+      <DesignAnalyticsCard gradient="slate" className="overflow-hidden" chart={{ type: "none", tooltipType: "none", highlightMode: "none" }}>
         <div className="p-5">
           <SectionHeader icon={Envelope} title="Email Log" />
           <Typography variant="secondary" className="text-sm mt-1">
@@ -495,13 +496,13 @@ function EmailLogCard() {
             </Typography>
           </div>
         </div>
-      </GlassCard>
+      </DesignAnalyticsCard>
     );
   }
 
   if (error) {
     return (
-      <GlassCard gradientColor="slate" className="overflow-hidden">
+      <DesignAnalyticsCard gradient="slate" className="overflow-hidden" chart={{ type: "none", tooltipType: "none", highlightMode: "none" }}>
         <div className="p-5">
           <SectionHeader icon={Envelope} title="Email Log" />
           <Typography variant="secondary" className="text-sm mt-1">
@@ -521,13 +522,13 @@ function EmailLogCard() {
             </div>
           </div>
         </div>
-      </GlassCard>
+      </DesignAnalyticsCard>
     );
   }
 
   if (emailLogs.length === 0) {
     return (
-      <GlassCard gradientColor="slate" className="overflow-hidden">
+      <DesignAnalyticsCard gradient="slate" className="overflow-hidden" chart={{ type: "none", tooltipType: "none", highlightMode: "none" }}>
         <div className="p-5">
           <SectionHeader icon={Envelope} title="Email Log" />
           <Typography variant="secondary" className="text-sm mt-1">
@@ -547,12 +548,12 @@ function EmailLogCard() {
             </div>
           </div>
         </div>
-      </GlassCard>
+      </DesignAnalyticsCard>
     );
   }
 
   return (
-    <GlassCard gradientColor="slate" className="overflow-hidden">
+    <DesignAnalyticsCard gradient="slate" className="overflow-hidden" chart={{ type: "none", tooltipType: "none", highlightMode: "none" }}>
       <div className="p-5">
         <div className="flex w-full items-start justify-between gap-4">
           <div className="flex-1 min-w-0">
@@ -585,7 +586,7 @@ function EmailLogCard() {
           }}
         />
       </div>
-    </GlassCard>
+    </DesignAnalyticsCard>
   );
 }
 
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/page-layout.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/page-layout.tsx
index 6628e79f63..e2b064a75e 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/page-layout.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/page-layout.tsx
@@ -9,13 +9,18 @@ export function PageLayout(props: {
   fillWidth?: boolean,
   noPadding?: boolean,
   allowContentOverflow?: boolean,
+  fullBleed?: boolean,
+  wrapHeaderInCard?: boolean,
 } & ({
   fillWidth: true,
 } | {
   width?: number,
 })) {
   return (
-    <div className={cn("flex justify-center flex-1 min-h-0", !props.noPadding && "py-4 px-4 sm:py-6 sm:px-6")}>
+    <div
+      className={cn("flex justify-center flex-1 min-h-0", !props.noPadding && "py-4 px-4 sm:py-6 sm:px-6")}
+      data-full-bleed={props.fullBleed ? "true" : undefined}
+    >
       <div
         className={cn("min-w-0 min-h-0 flex flex-col w-full", !props.fillWidth && "max-w-7xl")}
         style={{
@@ -24,24 +29,31 @@ export function PageLayout(props: {
         }}
       >
         {(props.title || props.description || props.actions) && (
-          <div className="flex flex-col gap-3 sm:flex-row sm:justify-between sm:items-center mb-6">
-            <div className="space-y-1">
-              {props.title && (
-                <Typography type="h2" className="text-xl sm:text-2xl font-semibold tracking-tight">
-                  {props.title}
-                </Typography>
-              )}
-              {props.description && (
-                <Typography type={typeof props.description === "string" ? "p" : "div"} variant="secondary" className="text-sm">
-                  {props.description}
-                </Typography>
+          <div
+            className={cn(
+              "mb-6",
+              props.wrapHeaderInCard && "rounded-2xl border border-black/[0.06] bg-white/90 px-4 py-3 shadow-[0_2px_12px_rgba(0,0,0,0.04)] backdrop-blur-xl sm:px-5 sm:py-4 dark:border-0 dark:bg-transparent dark:shadow-none dark:backdrop-blur-none dark:rounded-none dark:px-0 dark:py-0 dark:sm:px-0 dark:sm:py-0"
+            )}
+          >
+            <div className="flex flex-col gap-3 sm:flex-row sm:justify-between sm:items-center">
+              <div className="space-y-1">
+                {props.title && (
+                  <Typography type="h2" className="text-xl sm:text-2xl font-semibold tracking-tight">
+                    {props.title}
+                  </Typography>
+                )}
+                {props.description && (
+                  <Typography type={typeof props.description === "string" ? "p" : "div"} variant="secondary" className="text-sm">
+                    {props.description}
+                  </Typography>
+                )}
+              </div>
+              {props.actions && (
+                <div className="flex-shrink-0">
+                  {props.actions}
+                </div>
               )}
             </div>
-            {props.actions && (
-              <div className="flex-shrink-0">
-                {props.actions}
-              </div>
-            )}
           </div>
         )}
         <div className={cn(
diff --git a/apps/dashboard/src/app/globals.css b/apps/dashboard/src/app/globals.css
index 7d76c55280..e041e515c6 100644
--- a/apps/dashboard/src/app/globals.css
+++ b/apps/dashboard/src/app/globals.css
@@ -133,7 +133,40 @@
 @layer base {
   * {
     @apply border-border;
+
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--foreground) / 0.22) transparent;
+  }
+
+  .analytics-card-tooltip-escape .recharts-tooltip-wrapper {
+    z-index: 9999 !important;
+    overflow: visible !important;
+  }
+
+  .analytics-card-tooltip-escape .recharts-tooltip-wrapper > * {
+    overflow: visible !important;
+  }
+
+  *::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
   }
+
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--foreground) / 0.18);
+    border-radius: 9999px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: hsl(var(--foreground) / 0.28);
+  }
+
   body {
     @apply bg-background text-foreground;
     background-image: var(--page-ambient);
diff --git a/apps/dashboard/src/components/assistant-ui/image-attachment-adapter.ts b/apps/dashboard/src/components/assistant-ui/image-attachment-adapter.ts
new file mode 100644
index 0000000000..7062edca96
--- /dev/null
+++ b/apps/dashboard/src/components/assistant-ui/image-attachment-adapter.ts
@@ -0,0 +1,47 @@
+import { validateComposerImageByteLength } from "@/components/assistant-ui/image-attachment-validation";
+import {
+  type AttachmentAdapter,
+  type CompleteAttachment,
+  type PendingAttachment,
+} from "@assistant-ui/react";
+import { generateUuid } from "@stackframe/stack-shared/dist/utils/uuids";
+
+/** Chat composer attachments: UUID ids, shared max file size (see `image-limits`). */
+export class ImageAttachmentAdapter implements AttachmentAdapter {
+  public readonly accept = "image/*";
+
+  public async add(state: { file: File }): Promise<PendingAttachment> {
+    const sizeValidation = validateComposerImageByteLength(state.file.size);
+    if (!sizeValidation.ok) {
+      throw new Error(`"${state.file.name}": ${sizeValidation.reason}`);
+    }
+    return {
+      id: generateUuid(),
+      type: "image",
+      name: state.file.name,
+      contentType: state.file.type,
+      file: state.file,
+      status: { type: "requires-action", reason: "composer-send" },
+    };
+  }
+
+  public async send(attachment: PendingAttachment): Promise<CompleteAttachment> {
+    const image = await readFileAsDataUrl(attachment.file);
+    return {
+      ...attachment,
+      status: { type: "complete" },
+      content: [{ type: "image", image }],
+    };
+  }
+
+  public async remove(): Promise<void> {}
+}
+
+function readFileAsDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = () => reject(reader.error ?? new Error("Failed to read file"));
+    reader.readAsDataURL(file);
+  });
+}
diff --git a/apps/dashboard/src/components/assistant-ui/image-attachment-validation.ts b/apps/dashboard/src/components/assistant-ui/image-attachment-validation.ts
new file mode 100644
index 0000000000..d032147bf8
--- /dev/null
+++ b/apps/dashboard/src/components/assistant-ui/image-attachment-validation.ts
@@ -0,0 +1,27 @@
+import {
+  MAX_IMAGE_BYTES_PER_FILE,
+  MAX_IMAGE_MB_PER_FILE,
+  MAX_IMAGES_PER_MESSAGE,
+} from "@stackframe/stack-shared/dist/ai/image-limits";
+
+type ValidationResult = { ok: true } | { ok: false, reason: string };
+
+export function validateComposerImageCount(imageCount: number): ValidationResult {
+  if (imageCount > MAX_IMAGES_PER_MESSAGE) {
+    return {
+      ok: false,
+      reason: `Maximum ${MAX_IMAGES_PER_MESSAGE} images per message.`,
+    };
+  }
+  return { ok: true };
+}
+
+export function validateComposerImageByteLength(bytes: number): ValidationResult {
+  if (bytes > MAX_IMAGE_BYTES_PER_FILE) {
+    return {
+      ok: false,
+      reason: `Image exceeds ${MAX_IMAGE_MB_PER_FILE}MB limit (${(bytes / 1024 / 1024).toFixed(2)}MB).`,
+    };
+  }
+  return { ok: true };
+}
diff --git a/apps/dashboard/src/components/assistant-ui/thread.tsx b/apps/dashboard/src/components/assistant-ui/thread.tsx
index 73392e502d..af27c79e4b 100644
--- a/apps/dashboard/src/components/assistant-ui/thread.tsx
+++ b/apps/dashboard/src/components/assistant-ui/thread.tsx
@@ -1,63 +1,122 @@
+import { MarkdownText } from "@/components/assistant-ui/markdown-text";
+import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
+import { Button, useToast } from "@/components/ui";
 import { cn } from "@/lib/utils";
 import {
+  validateComposerImageByteLength,
+  validateComposerImageCount,
+} from "./image-attachment-validation";
+import {
+  type Attachment,
+  type AttachmentAdapter,
+  type CompleteAttachment,
   ActionBarPrimitive,
   BranchPickerPrimitive,
   ComposerPrimitive,
   MessagePrimitive,
   ThreadPrimitive,
+  useComposer,
+  useComposerRuntime,
+  useMessage,
+  useThreadRuntime,
+  type PendingAttachment,
 } from "@assistant-ui/react";
-import { ArrowClockwiseIcon, ArrowDownIcon, CaretLeftIcon, CaretRightIcon, CheckIcon, CopyIcon, PaperPlaneRightIcon, PencilSimpleIcon, WarningCircle } from "@phosphor-icons/react";
-import { createContext, useContext, type FC } from "react";
+import { ArrowClockwiseIcon, ArrowDownIcon, CaretLeftIcon, CaretRightIcon, CheckIcon, CopyIcon, ImageIcon, PaperPlaneRightIcon, PencilSimpleIcon, WarningCircle, XIcon } from "@phosphor-icons/react";
+import {
+  MAX_IMAGES_PER_MESSAGE,
+  MAX_IMAGE_MB_PER_FILE,
+} from "@stackframe/stack-shared/dist/ai/image-limits";
+import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
+import { createContext, useContext, useEffect, useMemo, useRef, useState, type FC } from "react";
 
 const HideMessageActionsContext = createContext(false);
+const HasRunningStatusContext = createContext(false);
 
-import { MarkdownText } from "@/components/assistant-ui/markdown-text";
-import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
-import { Button } from "@/components/ui";
+const ComposerAttachmentsEnabledContext = createContext(false);
+const ComposerAttachmentAdapterContext = createContext<AttachmentAdapter | null>(null);
+
+function useComposerAttachmentsEnabled() {
+  return useContext(ComposerAttachmentsEnabledContext);
+}
+
+function useComposerAttachmentAdapter() {
+  return useContext(ComposerAttachmentAdapterContext);
+}
 
-export const Thread: FC<{ useOffWhiteLightMode?: boolean, composerPlaceholder?: string, hideMessageActions?: boolean }> = ({ useOffWhiteLightMode = false, composerPlaceholder, hideMessageActions = false }) => {
+/** Static placeholder string, or config for the typing-animation input. */
+export type ComposerPlaceholder =
+  | string
+  | {
+      prefix: string,
+      suffixes: readonly string[],
+      typeSpeed?: number,
+      deleteSpeed?: number,
+      pauseAfterType?: number,
+      pauseAfterDelete?: number,
+    };
+
+export const Thread: FC<{
+  useOffWhiteLightMode?: boolean,
+  composerPlaceholder?: ComposerPlaceholder,
+  hideMessageActions?: boolean,
+  runningStatusMessages?: string[],
+  composerAttachments?: boolean,
+  attachmentAdapter?: AttachmentAdapter,
+}> = ({ useOffWhiteLightMode = false, composerPlaceholder, hideMessageActions = false, runningStatusMessages, composerAttachments = false, attachmentAdapter }) => {
   return (
     <HideMessageActionsContext.Provider value={hideMessageActions}>
-      <ThreadPrimitive.Root
-        className={cn(
-        "box-border flex h-0 flex-grow flex-col overflow-hidden",
-        useOffWhiteLightMode ? "bg-slate-50/90 dark:bg-background" : "bg-background",
-      )}
-        style={{
-          ["--thread-max-width" as string]: "100%",
-        }}
-      >
-        <ThreadPrimitive.Viewport
-          className={cn(
-          "flex h-full flex-col items-center overflow-y-auto scroll-smooth px-3",
-          useOffWhiteLightMode ? "bg-slate-50/90 dark:bg-inherit" : "bg-inherit",
+      <HasRunningStatusContext.Provider value={!!runningStatusMessages}>
+        <ComposerAttachmentAdapterContext.Provider value={attachmentAdapter ?? null}>
+          <ComposerAttachmentsEnabledContext.Provider value={composerAttachments}>
+            <ThreadPrimitive.Root
+              className={cn(
+          "box-border flex h-0 flex-grow flex-col overflow-hidden",
+          useOffWhiteLightMode ? "bg-slate-50/90 dark:bg-background" : "bg-background",
         )}
-        >
-          <ThreadWelcome />
-
-          <ThreadPrimitive.Messages
-            components={{
-              UserMessage: UserMessage,
-              EditComposer: EditComposer,
-              AssistantMessage: AssistantMessage,
-            }}
-          />
-
-          <ThreadPrimitive.If empty={false}>
-            <div className="min-h-6 flex-grow" />
-          </ThreadPrimitive.If>
-
-          <div className={cn(
-          "sticky bottom-0 mt-2 flex w-full max-w-[var(--thread-max-width)] flex-col items-center justify-end bg-gradient-to-t to-transparent pt-6 pb-3",
-          useOffWhiteLightMode
-            ? "from-slate-50/90 via-slate-50/90 dark:from-background dark:via-background"
-            : "from-background via-background",
-        )}>
-            <ThreadScrollToBottom />
-            <Composer placeholder={composerPlaceholder} />
-          </div>
-        </ThreadPrimitive.Viewport>
-      </ThreadPrimitive.Root>
+              style={{
+                ["--thread-max-width" as string]: "100%",
+              }}
+            >
+              <ThreadPrimitive.Viewport
+                className={cn(
+            "flex h-full flex-col items-center overflow-y-auto scroll-smooth px-3",
+            useOffWhiteLightMode ? "bg-slate-50/90 dark:bg-inherit" : "bg-inherit",
+          )}
+              >
+                <ThreadWelcome />
+
+                <ThreadPrimitive.Messages
+                  components={{
+                    UserMessage: UserMessage,
+                    EditComposer: EditComposer,
+                    AssistantMessage: AssistantMessage,
+                  }}
+                />
+
+                {runningStatusMessages && (
+                  <ThreadPrimitive.If running>
+                    <ThreadRunningStatus messages={runningStatusMessages} />
+                  </ThreadPrimitive.If>
+                )}
+
+                <ThreadPrimitive.If empty={false}>
+                  <div className="min-h-6 flex-grow" />
+                </ThreadPrimitive.If>
+
+                <div className={cn(
+            "sticky bottom-0 mt-2 flex w-full max-w-[var(--thread-max-width)] flex-col items-center justify-end bg-gradient-to-t to-transparent pt-6 pb-3",
+            useOffWhiteLightMode
+              ? "from-slate-50/90 via-slate-50/90 dark:from-background dark:via-background"
+              : "from-background via-background",
+          )}>
+                  <ThreadScrollToBottom />
+                  <Composer placeholder={composerPlaceholder} />
+                </div>
+              </ThreadPrimitive.Viewport>
+            </ThreadPrimitive.Root>
+          </ComposerAttachmentsEnabledContext.Provider>
+        </ComposerAttachmentAdapterContext.Provider>
+      </HasRunningStatusContext.Provider>
     </HideMessageActionsContext.Provider>
   );
 };
@@ -123,16 +182,382 @@ const ThreadWelcomeSuggestions: FC = () => {
   );
 };
 
-const Composer: FC<{ placeholder?: string }> = ({ placeholder }) => {
+type DisplayableAttachment = {
+  id: string,
+  name: string,
+  file?: File,
+  content?: readonly unknown[],
+};
+
+function extractImageUrlFromContent(content: readonly unknown[] | undefined): string | null {
+  if (!Array.isArray(content)) return null;
+  for (const part of content) {
+    if (part && typeof part === "object" && (part as { type?: unknown }).type === "image") {
+      const image = (part as { image?: unknown }).image;
+      if (typeof image === "string") return image;
+    }
+  }
+  return null;
+}
+
+function isCompleteAttachment(attachment: Attachment): attachment is CompleteAttachment {
+  return attachment.status.type === "complete";
+}
+
+function isPendingAttachment(attachment: Attachment): attachment is PendingAttachment {
+  return attachment.status.type !== "complete";
+}
+
+function getAttachmentIdentityKey(attachment: Attachment): string {
+  return attachment.id;
+}
+
+function haveAttachmentListsChanged(
+  currentAttachments: readonly Attachment[],
+  originalAttachments: readonly Attachment[],
+): boolean {
+  if (currentAttachments.length !== originalAttachments.length) {
+    return true;
+  }
+  return currentAttachments.some((attachment, index) => (
+    getAttachmentIdentityKey(attachment) !== getAttachmentIdentityKey(originalAttachments[index]!)
+  ));
+}
+
+function getTextContent(parts: readonly { type: string, text?: string }[]): string {
+  return parts
+    .filter((part) => part.type === "text" && typeof part.text === "string")
+    .map((part) => part.text ?? "")
+    .join("");
+}
+
+async function resolveComposerAttachments(
+  attachments: readonly Attachment[],
+  attachmentAdapter: AttachmentAdapter | null,
+): Promise<readonly CompleteAttachment[]> {
+  if (attachments.length === 0) {
+    return [];
+  }
+  if (attachmentAdapter == null) {
+    if (attachments.some(isPendingAttachment)) {
+      throw new Error("Image attachments are not available in this composer.");
+    }
+    return attachments.filter(isCompleteAttachment);
+  }
+
+  const resolved: CompleteAttachment[] = [];
+  for (const attachment of attachments) {
+    if (isCompleteAttachment(attachment)) {
+      resolved.push(attachment);
+      continue;
+    }
+    resolved.push(await attachmentAdapter.send(attachment));
+  }
+  return resolved;
+}
+
+const AttachmentThumb: FC<{
+  attachment: DisplayableAttachment,
+  onRemove?: () => void,
+}> = ({ attachment, onRemove }) => {
+  const { file, name, content } = attachment;
+
+  const liveFile = file instanceof Blob ? file : null;
+
+  const [objectUrl, setObjectUrl] = useState<string | null>(null);
+  useEffect(() => {
+    if (!liveFile) {
+      setObjectUrl(null);
+      return;
+    }
+    const url = URL.createObjectURL(liveFile);
+    setObjectUrl(url);
+    return () => {
+      URL.revokeObjectURL(url);
+    };
+  }, [liveFile]);
+
+  const contentUrl = useMemo(() => extractImageUrlFromContent(content), [content]);
+  const displayUrl = objectUrl ?? contentUrl;
+
+  return (
+    <div className="group/attachment relative h-14 w-14 overflow-hidden rounded-xl ring-1 ring-foreground/[0.08] bg-foreground/[0.03] shadow-sm">
+      {displayUrl ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img src={displayUrl} alt={name} className="h-full w-full object-cover" draggable={false} />
+      ) : (
+        <div className="flex h-full w-full items-center justify-center text-muted-foreground">
+          <ImageIcon className="h-5 w-5" />
+        </div>
+      )}
+      {onRemove && (
+        <button
+          type="button"
+          aria-label={`Remove ${name}`}
+          onClick={onRemove}
+          className="absolute right-1 top-1 grid h-5 w-5 place-items-center rounded-full bg-background/95 text-foreground/80 ring-1 ring-foreground/[0.1] shadow opacity-0 group-hover/attachment:opacity-100 focus-visible:opacity-100 transition-opacity hover:text-foreground"
+        >
+          <XIcon className="h-3 w-3" weight="bold" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+const ComposerAttachmentsRow: FC = () => {
+  const composerRuntime = useComposerRuntime();
+  const attachments = useComposer((s) => s.attachments);
+  if (attachments.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-2 px-3 pt-3 pb-1 border-b border-foreground/[0.04]">
+      {attachments.map((attachment, index) => (
+        <AttachmentThumb
+          key={attachment.id}
+          attachment={attachment as DisplayableAttachment}
+          onRemove={() =>
+            runAsynchronously(composerRuntime.getAttachmentByIndex(index).remove())
+          }
+        />
+      ))}
+    </div>
+  );
+};
+
+const UserMessageAttachmentsRow: FC = () => {
+  const attachments = useMessage((m) =>
+    m.role === "user" ? m.attachments : undefined,
+  );
+  if (!attachments || attachments.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap items-center justify-end gap-2 mb-1.5">
+      {attachments.map((attachment) => (
+        <AttachmentThumb
+          key={attachment.id}
+          attachment={attachment as DisplayableAttachment}
+        />
+      ))}
+    </div>
+  );
+};
+
+const ComposerAttachmentsAddButton: FC = () => {
+  const composerRuntime = useComposerRuntime();
+  const count = useComposer((s) => s.attachments.length);
+  const { toast } = useToast();
+  const atLimit = count >= MAX_IMAGES_PER_MESSAGE;
+
+  const handleClick = () => {
+    const countValidation = validateComposerImageCount(composerRuntime.getState().attachments.length + 1);
+    if (!countValidation.ok) {
+      toast({
+        variant: "destructive",
+        description: countValidation.reason,
+      });
+      return;
+    }
+
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*";
+    input.multiple = true;
+    input.hidden = true;
+    document.body.appendChild(input);
+
+    input.onchange = (e) => {
+      const files = (e.target as HTMLInputElement).files;
+      if (files && files.length > 0) {
+        const liveCount = composerRuntime.getState().attachments.length;
+        const remaining = Math.max(0, MAX_IMAGES_PER_MESSAGE - liveCount);
+        const picked = Array.from(files);
+        const selected = picked.slice(0, remaining);
+        const valid: File[] = [];
+        const oversized: File[] = [];
+        for (const file of selected) {
+          const sizeValidation = validateComposerImageByteLength(file.size);
+          if (sizeValidation.ok) {
+            valid.push(file);
+          } else {
+            oversized.push(file);
+          }
+        }
+
+        const countValidation = validateComposerImageCount(liveCount + picked.length);
+        if (!countValidation.ok) {
+          toast({
+            variant: "destructive",
+            description: countValidation.reason,
+          });
+        }
+
+        if (oversized.length > 0) {
+          const firstOversizedValidation = validateComposerImageByteLength(oversized[0]!.size);
+          toast({
+            variant: "destructive",
+            description:
+              oversized.length === 1
+                ? `"${oversized[0]!.name}": ${firstOversizedValidation.ok ? `Image exceeds ${MAX_IMAGE_MB_PER_FILE}MB limit.` : firstOversizedValidation.reason}`
+                : `${oversized.length} images exceeded the ${MAX_IMAGE_MB_PER_FILE}MB limit and were skipped.`,
+          });
+        }
+
+        runAsynchronously(
+          (async () => {
+            for (const file of valid) {
+              if (composerRuntime.getState().attachments.length >= MAX_IMAGES_PER_MESSAGE) {
+                break;
+              }
+              try {
+                await composerRuntime.addAttachment(file);
+              } catch (err) {
+                toast({
+                  variant: "destructive",
+                  description:
+                    err instanceof Error ? err.message : `Failed to attach "${file.name}".`,
+                });
+              }
+            }
+          })(),
+        );
+      }
+      document.body.removeChild(input);
+    };
+
+    input.oncancel = () => {
+      if (!input.files || input.files.length === 0) {
+        if (input.parentNode) document.body.removeChild(input);
+      }
+    };
+    input.click();
+  };
+
+  const tooltipText = atLimit
+    ? `Limit reached (${MAX_IMAGES_PER_MESSAGE}/${MAX_IMAGES_PER_MESSAGE})`
+    : `Attach image (${count}/${MAX_IMAGES_PER_MESSAGE}, max ${MAX_IMAGE_MB_PER_FILE}MB)`;
+
+  return (
+    <TooltipIconButton
+      tooltip={tooltipText}
+      onClick={handleClick}
+      className={cn(
+        "h-7 w-7 rounded-lg text-muted-foreground hover:bg-foreground/[0.05] hover:text-foreground",
+        atLimit && "text-muted-foreground/70",
+      )}
+    >
+      <ImageIcon className="h-[15px] w-[15px]" weight="regular" />
+    </TooltipIconButton>
+  );
+};
+
+const COMPOSER_INPUT_CLASS =
+  "placeholder:text-muted-foreground/60 max-h-32 w-full resize-none border-none bg-transparent px-4 py-3 text-sm outline-none focus:ring-0 disabled:cursor-not-allowed leading-relaxed";
+
+const ComposerAnimatedInput: FC<{
+  prefix: string,
+  suffixes: readonly string[],
+  typeSpeed: number,
+  deleteSpeed: number,
+  pauseAfterType: number,
+  pauseAfterDelete: number,
+}> = ({ prefix, suffixes, typeSpeed, deleteSpeed, pauseAfterType, pauseAfterDelete }) => {
+  const [suffixText, setSuffixText] = useState("");
+  const stateRef = useRef({
+    suffixIndex: 0,
+    charIndex: 0,
+    phase: "typing" as "typing" | "pausing" | "deleting" | "waiting",
+  });
+
+  useEffect(() => {
+    let timeoutId: ReturnType<typeof setTimeout>;
+
+    function tick() {
+      const s = stateRef.current;
+      const target = suffixes[s.suffixIndex % suffixes.length];
+      switch (s.phase) {
+        case "typing": {
+          if (s.charIndex < target.length) {
+            s.charIndex++;
+            setSuffixText(target.slice(0, s.charIndex));
+            timeoutId = setTimeout(tick, typeSpeed);
+          } else {
+            s.phase = "pausing";
+            timeoutId = setTimeout(tick, pauseAfterType);
+          }
+          break;
+        }
+        case "pausing": {
+          s.phase = "deleting";
+          timeoutId = setTimeout(tick, deleteSpeed);
+          break;
+        }
+        case "deleting": {
+          if (s.charIndex > 0) {
+            s.charIndex--;
+            setSuffixText(target.slice(0, s.charIndex));
+            timeoutId = setTimeout(tick, deleteSpeed);
+          } else {
+            s.phase = "waiting";
+            timeoutId = setTimeout(tick, pauseAfterDelete);
+          }
+          break;
+        }
+        case "waiting": {
+          s.suffixIndex = (s.suffixIndex + 1) % suffixes.length;
+          s.charIndex = 0;
+          s.phase = "typing";
+          timeoutId = setTimeout(tick, typeSpeed);
+          break;
+        }
+      }
+    }
+
+    timeoutId = setTimeout(tick, 500);
+    return () => clearTimeout(timeoutId);
+  }, [suffixes, typeSpeed, deleteSpeed, pauseAfterType, pauseAfterDelete]);
+
+  return (
+    <ComposerPrimitive.Input
+      rows={1}
+      autoFocus
+      placeholder={prefix + suffixText}
+      className={COMPOSER_INPUT_CLASS}
+    />
+  );
+};
+
+const ComposerStaticInput: FC<{ placeholder?: string }> = ({ placeholder }) => {
+  return (
+    <ComposerPrimitive.Input
+      rows={1}
+      autoFocus
+      placeholder={placeholder ?? "Describe what you want..."}
+      className={COMPOSER_INPUT_CLASS}
+    />
+  );
+};
+
+const Composer: FC<{ placeholder?: ComposerPlaceholder }> = ({ placeholder }) => {
+  const attachmentsEnabled = useComposerAttachmentsEnabled();
   return (
     <ComposerPrimitive.Root className="group/composer relative flex w-full flex-col rounded-2xl border border-border/20 dark:border-foreground/[0.08] bg-white dark:bg-background/90 backdrop-blur-xl shadow-sm dark:shadow-lg ring-1 ring-foreground/[0.04] transition-all duration-150 hover:transition-none focus-within:ring-2 focus-within:ring-blue-500/20 focus-within:border-blue-500/30">
-      <ComposerPrimitive.Input
-        rows={1}
-        autoFocus
-        placeholder={placeholder ?? "Describe what you want..."}
-        className="placeholder:text-muted-foreground/60 max-h-32 w-full resize-none border-none bg-transparent px-4 py-3 text-sm outline-none focus:ring-0 disabled:cursor-not-allowed leading-relaxed"
-      />
-      <div className="flex items-center justify-end px-3 pb-2.5">
+      {attachmentsEnabled && <ComposerAttachmentsRow />}
+      {typeof placeholder === "object" ? (
+        <ComposerAnimatedInput
+          prefix={placeholder.prefix}
+          suffixes={placeholder.suffixes}
+          typeSpeed={placeholder.typeSpeed ?? 70}
+          deleteSpeed={placeholder.deleteSpeed ?? 40}
+          pauseAfterType={placeholder.pauseAfterType ?? 2000}
+          pauseAfterDelete={placeholder.pauseAfterDelete ?? 400}
+        />
+      ) : (
+        <ComposerStaticInput placeholder={placeholder} />
+      )}
+      <div className="flex items-center justify-between px-3 pb-2.5 gap-2">
+        <div className="flex items-center gap-1">
+          {attachmentsEnabled && <ComposerAttachmentsAddButton />}
+        </div>
         <ComposerAction />
       </div>
     </ComposerPrimitive.Root>
@@ -172,11 +597,14 @@ const ComposerAction: FC = () => {
 const UserMessage: FC = () => {
   return (
     <MessagePrimitive.Root className="group flex flex-col items-end w-full max-w-[var(--thread-max-width)] py-3 gap-1.5">
+      <UserMessageAttachmentsRow />
       <div className="flex items-start gap-2 justify-end w-full">
         <UserActionBar />
-        <div className="bg-foreground/[0.05] text-foreground max-w-[90%] break-words rounded-2xl px-3.5 py-2.5 text-sm ring-1 ring-foreground/[0.06]">
-          <MessagePrimitive.Content />
-        </div>
+        <MessagePrimitive.If hasContent>
+          <div className="bg-foreground/[0.05] text-foreground max-w-[90%] break-words rounded-2xl px-3.5 py-2.5 text-sm ring-1 ring-foreground/[0.06]">
+            <MessagePrimitive.Content />
+          </div>
+        </MessagePrimitive.If>
       </div>
       <BranchPicker className="justify-end mr-1" />
     </MessagePrimitive.Root>
@@ -202,33 +630,96 @@ const UserActionBar: FC = () => {
 };
 
 const EditComposer: FC = () => {
+  const attachmentsEnabled = useComposerAttachmentsEnabled();
+  const attachmentAdapter = useComposerAttachmentAdapter();
+  const composerRuntime = useComposerRuntime();
+  const threadRuntime = useThreadRuntime();
+  const { toast } = useToast();
+  const messageId = useMessage((m) => m.id);
+  const parentId = useMessage((m) => m.parentId ?? null);
+  const role = useMessage((m) => m.role);
+  const originalContent = useMessage((m) => m.content);
+  const originalAttachments = useMessage((m) => m.attachments ?? []);
+  const composerText = useComposer((s) => s.text);
+  const composerAttachments = useComposer((s) => s.attachments);
+  const originalText = useMemo(() => getTextContent(originalContent), [originalContent]);
+  const hasChanges = composerText !== originalText
+    || haveAttachmentListsChanged(composerAttachments, originalAttachments);
+
+  const handleSend = async () => {
+    if (!hasChanges) {
+      return;
+    }
+
+    try {
+      const composerState = composerRuntime.getState();
+      const resolvedAttachments = await resolveComposerAttachments(
+        composerState.attachments,
+        attachmentAdapter,
+      );
+      threadRuntime.append({
+        parentId,
+        sourceId: messageId,
+        role,
+        content: composerState.text ? [{ type: "text", text: composerState.text }] : [],
+        attachments: resolvedAttachments,
+        metadata: { custom: {} },
+        runConfig: composerState.runConfig,
+      });
+      composerRuntime.cancel();
+    } catch (error) {
+      toast({
+        variant: "destructive",
+        description: error instanceof Error ? error.message : "Failed to send edited message.",
+      });
+    }
+  };
+
   return (
     <ComposerPrimitive.Root className="bg-foreground/[0.03] my-3 flex w-full max-w-[var(--thread-max-width)] flex-col gap-2 rounded-xl ring-1 ring-foreground/[0.08]">
+      {attachmentsEnabled && <ComposerAttachmentsRow />}
       <ComposerPrimitive.Input className="text-foreground flex min-h-[2.5rem] w-full resize-none bg-transparent p-3 pb-0 text-sm outline-none" />
 
-      <div className="px-3 pb-2.5 flex items-center justify-end gap-2">
-        <ComposerPrimitive.Cancel asChild>
-          <Button variant="ghost" size="sm" className="h-7 px-2.5 text-xs">Cancel</Button>
-        </ComposerPrimitive.Cancel>
-        <ComposerPrimitive.Send asChild>
-          <Button size="sm" className="h-7 px-3 text-xs bg-blue-600 hover:bg-blue-500">Send</Button>
-        </ComposerPrimitive.Send>
+      <div className="px-3 pb-2.5 flex items-center justify-between gap-2">
+        <div className="flex items-center gap-1">
+          {attachmentsEnabled && <ComposerAttachmentsAddButton />}
+        </div>
+        <div className="flex items-center gap-2">
+          <ComposerPrimitive.Cancel asChild>
+            <Button variant="ghost" size="sm" className="h-7 px-2.5 text-xs">Cancel</Button>
+          </ComposerPrimitive.Cancel>
+          <Button
+            size="sm"
+            className="h-7 px-3 text-xs bg-blue-600 hover:bg-blue-500"
+            disabled={!hasChanges}
+            onClick={handleSend}
+          >
+            Send
+          </Button>
+        </div>
       </div>
     </ComposerPrimitive.Root>
   );
 };
 
 const AssistantMessage: FC = () => {
+  const hasRunningStatus = useContext(HasRunningStatusContext);
   return (
     <MessagePrimitive.Root className="flex flex-col relative w-full max-w-[var(--thread-max-width)] py-4 group">
       <div className="flex items-start gap-3">
         <div className="w-7 h-7 rounded-full bg-gradient-to-br from-blue-500/20 to-blue-600/10 flex items-center justify-center shrink-0 ring-1 ring-blue-500/20 shadow-sm">
-          <ThreadPrimitive.If running>
-            <div className="w-2.5 h-2.5 rounded-full bg-blue-500 animate-pulse" />
-          </ThreadPrimitive.If>
-          <ThreadPrimitive.If running={false}>
+          {hasRunningStatus ? (
             <div className="w-2.5 h-2.5 rounded-full bg-blue-500" />
-          </ThreadPrimitive.If>
+          ) : (
+            <>
+              <ThreadPrimitive.If running>
+                <div className="w-2.5 h-2.5 rounded-full bg-blue-500 animate-pulse" />
+              </ThreadPrimitive.If>
+              <ThreadPrimitive.If running={false}>
+                <div className="w-2.5 h-2.5 rounded-full bg-blue-500" />
+              </ThreadPrimitive.If>
+            </>
+          )}
         </div>
         <div className="flex-1 min-w-0 space-y-2">
           <div className="text-foreground break-words leading-relaxed text-sm">
@@ -332,6 +823,40 @@ const BranchPicker: FC<BranchPickerPrimitive.Root.Props> = ({
   );
 };
 
+const ThreadRunningStatus: FC<{ messages: string[] }> = ({ messages }) => {
+  const [index, setIndex] = useState(0);
+  const prevMessagesRef = useRef(messages);
+
+  useEffect(() => {
+    if (prevMessagesRef.current !== messages) {
+      prevMessagesRef.current = messages;
+      setIndex(0);
+    }
+  }, [messages]);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setIndex((prev) => (prev + 1) % messages.length);
+    }, 1200);
+    return () => clearInterval(interval);
+  }, [messages.length]);
+
+  return (
+    <div className="flex w-full max-w-[var(--thread-max-width)] py-3">
+      <div className="flex items-center gap-3 ml-10">
+        <div className="flex gap-1">
+          <div className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse" />
+          <div className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse" style={{ animationDelay: "150ms" }} />
+          <div className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse" style={{ animationDelay: "300ms" }} />
+        </div>
+        <span className="text-xs text-muted-foreground transition-opacity duration-300">
+          {messages[index]}
+        </span>
+      </div>
+    </div>
+  );
+};
+
 const CircleStopIcon = ({ className }: { className?: string }) => {
   return (
     <svg
diff --git a/apps/dashboard/src/components/code-block.tsx b/apps/dashboard/src/components/code-block.tsx
index ae32339e8a..8cff7dea4a 100644
--- a/apps/dashboard/src/components/code-block.tsx
+++ b/apps/dashboard/src/components/code-block.tsx
@@ -8,11 +8,12 @@ import type { ReactNode } from 'react';
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
 import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
+import sql from 'react-syntax-highlighter/dist/esm/languages/prism/sql';
 import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
 import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
 import { dark, prism } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
-Object.entries({ tsx, bash, typescript, python }).forEach(([key, value]) => {
+Object.entries({ tsx, bash, typescript, python, sql }).forEach(([key, value]) => {
   SyntaxHighlighter.registerLanguage(key, value);
 });
 
diff --git a/apps/dashboard/src/components/commands/create-dashboard/create-dashboard-preview.tsx b/apps/dashboard/src/components/commands/create-dashboard/create-dashboard-preview.tsx
index a74139887f..6691a3bf4e 100644
--- a/apps/dashboard/src/components/commands/create-dashboard/create-dashboard-preview.tsx
+++ b/apps/dashboard/src/components/commands/create-dashboard/create-dashboard-preview.tsx
@@ -3,9 +3,10 @@
 import { useAdminApp, useProjectId } from "@/app/(main)/(protected)/projects/[projectId]/use-admin-app";
 import { useRouter } from "@/components/router";
 import { Button } from "@/components/ui";
-import { generateDashboardCode } from "@/components/vibe-coding/chat-adapters";
 import { useDebouncedAction } from "@/hooks/use-debounced-action";
+import { buildDashboardMessages } from "@/lib/ai-dashboard/shared-prompt";
 import type { AppId } from "@/lib/apps-frontend";
+import { buildStackAuthHeaders } from "@/lib/api-headers";
 import { useUpdateConfig } from "@/lib/config-update";
 import { getPublicEnvVar } from "@/lib/env";
 import { cn } from "@/lib/utils";
@@ -16,11 +17,12 @@ import { captureError, throwErr } from "@stackframe/stack-shared/dist/utils/erro
 import { typedEntries } from "@stackframe/stack-shared/dist/utils/objects";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
 import { generateUuid } from "@stackframe/stack-shared/dist/utils/uuids";
+import { useChat, type UIMessage } from "@ai-sdk/react";
+import { convertToModelMessages, DefaultChatTransport } from "ai";
 import { memo, useCallback, useMemo, useRef, useState } from "react";
 import { CmdKPreviewProps } from "../../cmdk-commands";
 import { DashboardSandboxHost } from "./dashboard-sandbox-host";
-
-type GenerationState = "idle" | "generating" | "ready" | "error";
+import { StreamingCodeViewer } from "../../streaming-code-viewer";
 
 type DashboardArtifact = {
   prompt: string,
@@ -32,6 +34,48 @@ type DashboardArtifact = {
   },
 };
 
+function sanitizeGeneratedCode(code: string): string {
+  let result = code.trim();
+
+  if (result.startsWith("```")) {
+    const lines = result.split("\n");
+    lines.shift();
+    if (lines[lines.length - 1]?.trim() === "```") {
+      lines.pop();
+    }
+    result = lines.join("\n").trim();
+  }
+
+  result = result
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&amp;/g, "&");
+
+  result = result.replace(/;(\s*\n\s*[A-Za-z_$][\w$]*\s*:)/g, ",$1");
+
+  return result;
+}
+
+function extractToolPart(messages: UIMessage[]): {
+  state: string,
+  code: string,
+} | null {
+  const lastAssistant = messages.findLast((m) => m.role === "assistant");
+  if (!lastAssistant) return null;
+
+  for (const part of lastAssistant.parts) {
+    if (!part.type.startsWith("tool-")) continue;
+    const toolPart = part as { type: string, state: string, input?: Record<string, unknown> };
+    const code = typeof toolPart.input?.content === "string" ? toolPart.input.content : "";
+    if (code) {
+      return { state: toolPart.state, code };
+    }
+  }
+  return null;
+}
+
 export function CreateDashboardPreview({ query, ...rest }: CmdKPreviewProps) {
   return <CreateDashboardPreviewInner key={query} query={query} {...rest} />;
 }
@@ -45,7 +89,8 @@ const CreateDashboardPreviewInner = memo(function CreateDashboardPreviewInner({
   const project = adminApp.useProject();
   const config = project.useConfig();
   const currentUser = useUser({ or: "redirect" });
-  const backendBaseUrl = getPublicEnvVar("NEXT_PUBLIC_STACK_API_URL") ?? throwErr("NEXT_PUBLIC_STACK_API_URL is not set");;
+  const backendBaseUrl = getPublicEnvVar("NEXT_PUBLIC_STACK_API_URL") ?? throwErr("NEXT_PUBLIC_STACK_API_URL is not set");
+  const browserBaseUrl = getPublicEnvVar("NEXT_PUBLIC_BROWSER_STACK_API_URL") ?? backendBaseUrl;
   const updateConfig = useUpdateConfig();
   const router = useRouter();
   const prompt = query.trim();
@@ -57,54 +102,132 @@ const CreateDashboardPreviewInner = memo(function CreateDashboardPreviewInner({
     [config.apps.installed]
   );
 
-  const [state, setState] = useState<GenerationState>("idle");
-  const [errorText, setErrorText] = useState<string | null>(null);
   const [artifact, setArtifact] = useState<DashboardArtifact | null>(null);
+  const [iframeReady, setIframeReady] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
-  const abortControllerRef = useRef<AbortController | null>(null);
+  const [errorText, setErrorText] = useState<string | null>(null);
 
-  const generateDashboard = useCallback(async () => {
-    if (!projectId || !prompt) {
-      return;
-    }
+  const enabledAppIdsRef = useRef(enabledAppIds);
+  enabledAppIdsRef.current = enabledAppIds;
+  const currentUserRef = useRef(currentUser);
+  currentUserRef.current = currentUser;
+  const backendBaseUrlRef = useRef(backendBaseUrl);
+  backendBaseUrlRef.current = backendBaseUrl;
+  const projectIdRef = useRef(projectId);
+  projectIdRef.current = projectId;
 
-    abortControllerRef.current?.abort();
-    const controller = new AbortController();
-    abortControllerRef.current = controller;
+  const finalizedRef = useRef(false);
 
-    setState("generating");
-    setErrorText(null);
-    setArtifact(null);
+  const transport = useMemo(() => new DefaultChatTransport({
+    api: `${browserBaseUrl}/api/latest/ai/query/stream`,
+    headers: () => buildStackAuthHeaders(currentUserRef.current),
+    prepareSendMessagesRequest: async ({ messages: uiMessages, headers }) => {
+      const modelMessages = await convertToModelMessages(uiMessages);
+      const userMessages = modelMessages.map(m => ({
+        role: m.role as string,
+        content: m.content as unknown,
+      }));
+      const contextMessages = await buildDashboardMessages(
+        backendBaseUrlRef.current,
+        currentUserRef.current,
+        userMessages,
+        undefined,
+        enabledAppIdsRef.current,
+      );
+      return {
+        body: {
+          systemPrompt: "create-dashboard",
+          tools: ["update-dashboard"],
+          quality: "smart",
+          speed: "slow",
+          projectId: projectIdRef.current,
+          messages: [...contextMessages, ...userMessages],
+        },
+        headers,
+      };
+    },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), [browserBaseUrl]);
+
+  const {
+    messages,
+    status,
+    sendMessage,
+    stop,
+    setMessages,
+    error: aiError,
+  } = useChat({ transport });
+
+  const toolPart = extractToolPart(messages);
+  const chatActive = status === "submitted" || status === "streaming";
+
+  let phase: "idle" | "waiting" | "streaming" | "booting" | "ready" | "error";
+  if (artifact && iframeReady) {
+    phase = "ready";
+  } else if (artifact && !iframeReady) {
+    phase = "booting";
+  } else if (toolPart?.state === "input-streaming") {
+    phase = "streaming";
+  } else if (chatActive) {
+    phase = "waiting";
+  } else if (aiError || errorText) {
+    phase = "error";
+  } else {
+    phase = "idle";
+  }
+
+  const displayCode = toolPart?.code ?? "";
+
+  if (toolPart?.state === "input-available" && !artifact && !finalizedRef.current) {
+    finalizedRef.current = true;
+    const sanitized = sanitizeGeneratedCode(toolPart.code);
+    setArtifact({
+      prompt,
+      projectId,
+      runtimeCodegen: {
+        title: prompt.slice(0, 120),
+        description: "",
+        uiRuntimeSourceCode: sanitized,
+      },
+    });
+    setIframeReady(false);
+  }
+
+  if (status === "ready" && !chatActive && !toolPart && !artifact && messages.length > 0 && !errorText) {
+    setErrorText("AI did not return dashboard code.");
+  }
+
+  if (aiError && !errorText && !artifact) {
+    captureError("create-dashboard-preview", aiError);
+    setErrorText("Failed to generate dashboard. Please try again.");
+  }
+
+  const handleIframeReady = useCallback(() => {
+    setIframeReady(true);
+  }, []);
+
+  const generateDashboard = useCallback(async () => {
+    if (!projectId || !prompt) return;
 
     try {
-      const userMessages: Array<{ role: string, content: string }> = [{ role: "user", content: prompt }];
-      const { toolCall } = await generateDashboardCode(backendBaseUrl, currentUser, userMessages, { enabledAppIds, abortSignal: controller.signal });
-
-      if (controller.signal.aborted) return;
-
-      if (!toolCall?.args?.content) {
-        setState("error");
-        setErrorText("AI did not return dashboard code");
-        return;
-      }
-
-      setArtifact({
-        prompt,
-        projectId,
-        runtimeCodegen: {
-          title: prompt.slice(0, 120),
-          description: "",
-          uiRuntimeSourceCode: toolCall.args.content,
-        },
-      });
-      setState("ready");
-    } catch (error) {
-      if (controller.signal.aborted) return;
-      captureError("create-dashboard-preview", error);
-      setState("error");
-      setErrorText("Failed to generate dashboard. Please try again.");
+      await stop();
+    } catch {
+      // nothing to stop
     }
-  }, [projectId, prompt, currentUser, backendBaseUrl, enabledAppIds]);
+    setMessages([]);
+    setArtifact(null);
+    setErrorText(null);
+    setIframeReady(false);
+    finalizedRef.current = false;
+
+    await sendMessage({ text: prompt });
+  }, [projectId, prompt, sendMessage, stop, setMessages]);
+
+  useDebouncedAction({
+    action: generateDashboard,
+    delayMs: 500,
+    skip: !projectId || !prompt,
+  });
 
   const handleSave = useCallback(async () => {
     if (!artifact) return;
@@ -128,12 +251,6 @@ const CreateDashboardPreviewInner = memo(function CreateDashboardPreviewInner({
     }
   }, [artifact, adminApp, updateConfig, router, projectId, onClose]);
 
-  useDebouncedAction({
-    action: generateDashboard,
-    delayMs: 500,
-    skip: !projectId || !prompt,
-  });
-
   if (!prompt) {
     return (
       <div className="flex flex-col h-full w-full items-center justify-center p-6 text-center">
@@ -143,16 +260,18 @@ const CreateDashboardPreviewInner = memo(function CreateDashboardPreviewInner({
     );
   }
 
+  const isGenerating = phase === "streaming" || phase === "booting" || phase === "waiting";
+
   return (
     <div className="flex h-full w-full flex-col">
       <div className="px-3 py-2 border-b border-foreground/[0.08] space-y-2">
         <div className="flex items-center justify-between gap-3">
-          <div>
+          <div className="min-w-0">
             <div className="text-[12px] font-medium text-foreground">Create Dashboard</div>
             <div className="text-[10px] text-muted-foreground truncate">{prompt}</div>
           </div>
-          <div className="flex items-center gap-2">
-            {state === "ready" && artifact && (
+          <div className="flex shrink-0 items-center gap-2">
+            {phase === "ready" && artifact && (
               <Button
                 size="sm"
                 disabled={isSaving}
@@ -166,30 +285,46 @@ const CreateDashboardPreviewInner = memo(function CreateDashboardPreviewInner({
             <Button
               size="sm"
               variant="secondary"
-              disabled={state === "generating"}
+              disabled={isGenerating}
               onClick={() => runAsynchronouslyWithAlert(generateDashboard())}
             >
-              {state === "generating" ? "Generating..." : "Regenerate"}
+              {isGenerating ? "Generating..." : "Regenerate"}
             </Button>
           </div>
         </div>
-        {state === "error" && errorText && (
+        {phase === "error" && (errorText || aiError?.message) && (
           <div className={cn("rounded-md border px-2 py-1.5 text-[10px]", "border-red-500/30 bg-red-500/10 text-red-200")}>
-            {errorText}
+            {errorText || aiError?.message}
           </div>
         )}
       </div>
 
-      <div className="flex-1 min-h-0 p-2">
-        {state === "generating" && (
-          <div className="flex h-full items-center justify-center text-xs text-muted-foreground">Generating dashboard...</div>
+      <div className="relative flex-1 min-h-0 p-2">
+        {(phase === "waiting" || phase === "streaming" || phase === "booting" || (phase === "ready" && artifact)) && (
+          <div className={cn(
+            "absolute inset-2 z-10 transition-opacity duration-700",
+            iframeReady ? "opacity-0 pointer-events-none" : "opacity-100"
+          )}>
+            <StreamingCodeViewer code={displayCode} isStreaming={phase === "waiting" || phase === "streaming"} />
+          </div>
         )}
-        {state !== "generating" && artifact && (
-          <DashboardSandboxHost artifact={artifact} />
+
+        {(phase === "booting" || phase === "ready") && artifact && (
+          <div className={cn(
+            "h-full w-full transition-opacity duration-700",
+            iframeReady ? "opacity-100" : "opacity-0"
+          )}>
+            <DashboardSandboxHost artifact={artifact} onReady={handleIframeReady} />
+          </div>
         )}
-        {state !== "generating" && !artifact && state !== "error" && (
+
+        {phase === "idle" && (
           <div className="flex h-full items-center justify-center text-xs text-muted-foreground">Waiting for generation...</div>
         )}
+
+        {phase === "error" && !artifact && (
+          <div className="flex h-full items-center justify-center text-xs text-muted-foreground">Generation failed</div>
+        )}
       </div>
     </div>
   );
diff --git a/apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx b/apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx
index 36e3fa6c12..30f5b5f90a 100644
--- a/apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx
+++ b/apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx
@@ -227,6 +227,39 @@ function getSandboxDocument(artifact: DashboardArtifact, baseUrl: string, dashbo
       .dark { color-scheme: dark; }
       html, body, #root { scrollbar-width: none; }
       html::-webkit-scrollbar, body::-webkit-scrollbar, #root::-webkit-scrollbar { display: none; }
+
+      /* Widget selection overlay — active only when chat panel is open */
+      .widget-overlay {
+        position: fixed;
+        pointer-events: none;
+        border: 2px dashed hsl(var(--primary) / 0.35);
+        border-radius: 10px;
+        z-index: 9999;
+        transition: top 0.12s ease, left 0.12s ease, width 0.12s ease, height 0.12s ease;
+        display: none;
+        background: hsl(var(--primary) / 0.03);
+      }
+      .widget-overlay-btn {
+        position: absolute;
+        top: 6px;
+        right: 6px;
+        pointer-events: auto;
+        width: 28px;
+        height: 28px;
+        border-radius: 8px;
+        background: hsl(var(--primary));
+        color: hsl(var(--primary-foreground));
+        border: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transition: opacity 0.15s ease, transform 0.15s ease;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+      }
+      .widget-overlay-btn:hover { transform: scale(1.08); }
+      .widget-overlay.active .widget-overlay-btn { opacity: 1; }
     </style>
   </head>
   <body>
@@ -329,17 +362,37 @@ function getSandboxDocument(artifact: DashboardArtifact, baseUrl: string, dashbo
         return stackServerApp;
       }
       
+      // Forward uncaught runtime errors (async throws, unhandled rejections) that never
+      // reach the React boundary. React ErrorBoundary alone misses these, so without this
+      // the parent has no way to observe e.g. a fetch() that rejected inside useEffect.
+      window.addEventListener('error', (event) => {
+        const err = event?.error;
+        window.parent.postMessage({
+          type: 'dashboard-error-boundary',
+          message: err?.message || event?.message || 'Unknown runtime error',
+          stack: err?.stack,
+        }, '*');
+      });
+      window.addEventListener('unhandledrejection', (event) => {
+        const reason = event?.reason;
+        window.parent.postMessage({
+          type: 'dashboard-error-boundary',
+          message: (reason && (reason.message || String(reason))) || 'Unhandled promise rejection',
+          stack: reason?.stack,
+        }, '*');
+      });
+
       // Error Boundary Component
       class ErrorBoundary extends React.Component {
         constructor(props) {
           super(props);
           this.state = { hasError: false, error: null };
         }
-        
+
         static getDerivedStateFromError(error) {
           return { hasError: true, error };
         }
-        
+
         componentDidCatch(error, errorInfo) {
           window.parent.postMessage({
             type: 'dashboard-error-boundary',
@@ -424,21 +477,157 @@ function getSandboxDocument(artifact: DashboardArtifact, baseUrl: string, dashbo
         );
       });
     </script>
+
+    <!-- Widget selection overlay — lets the user pick a widget and send it to the chat panel -->
+    <script>
+    (function () {
+      var overlay = document.createElement('div');
+      overlay.className = 'widget-overlay';
+      var btn = document.createElement('button');
+      btn.className = 'widget-overlay-btn';
+      btn.setAttribute('aria-label', 'Add to chat');
+      btn.title = 'Add to chat';
+      btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 256 256" fill="currentColor"><path d="M216,48H40A16,16,0,0,0,24,64V176a16,16,0,0,0,16,16H96l32,32a8,8,0,0,0,11.31,0L171.31,192H216a16,16,0,0,0,16-16V64A16,16,0,0,0,216,48ZM160,136H96a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Zm0-32H96a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Z"/></svg>';
+      overlay.appendChild(btn);
+
+      var currentWidget = null;
+      var mounted = false;
+
+      function mount() {
+        if (mounted) return;
+        document.body.appendChild(overlay);
+        mounted = true;
+      }
+
+      /* ── Widget detection heuristic ── */
+      function findWidget(el) {
+        var current = el;
+        var root = document.getElementById('root');
+        while (current && current !== root && current !== document.body) {
+          if (current === overlay || overlay.contains(current)) {
+            current = current.parentElement;
+            continue;
+          }
+          var rect = current.getBoundingClientRect();
+          if (rect.width < 80 || rect.height < 50) { current = current.parentElement; continue; }
+          if (rect.width > window.innerWidth * 0.85 && rect.height > window.innerHeight * 0.85) {
+            current = current.parentElement; continue;
+          }
+          var hasContent = current.querySelector('svg, h1, h2, h3, h4, h5, h6, table, img, canvas');
+          var cls = typeof current.className === 'string' ? current.className : '';
+          var isCard = /rounded|shadow|border|card|bg-/.test(cls);
+          var parent = current.parentElement;
+          var isLayoutChild = false;
+          if (parent && parent !== root) {
+            var ps = getComputedStyle(parent).display;
+            isLayoutChild = ps === 'grid' || ps === 'flex';
+          }
+          if (hasContent || isCard || isLayoutChild) return current;
+          current = current.parentElement;
+        }
+        return null;
+      }
+
+      function showOverlay(widget) {
+        mount();
+        var rect = widget.getBoundingClientRect();
+        overlay.style.display = 'block';
+        overlay.style.top = rect.top - 2 + 'px';
+        overlay.style.left = rect.left - 2 + 'px';
+        overlay.style.width = rect.width + 4 + 'px';
+        overlay.style.height = rect.height + 4 + 'px';
+        overlay.classList.add('active');
+        currentWidget = widget;
+      }
+
+      function hideOverlay() {
+        overlay.style.display = 'none';
+        overlay.classList.remove('active');
+        currentWidget = null;
+      }
+
+      document.addEventListener('mousemove', function (e) {
+        if (!window.__chatOpen) return;
+        if (overlay.contains(e.target)) return;
+        var widget = findWidget(e.target);
+        if (widget && widget !== currentWidget) showOverlay(widget);
+        else if (!widget) hideOverlay();
+      });
+
+      document.addEventListener('mouseleave', function () { hideOverlay(); });
+      window.addEventListener('chat-state-change', function () { if (!window.__chatOpen) hideOverlay(); });
+
+      /* ── Send DOM metadata to parent ── */
+      btn.addEventListener('click', function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+        if (!currentWidget) return;
+
+        var heading = currentWidget.querySelector('h1,h2,h3,h4,h5,h6');
+        var widgetRect = currentWidget.getBoundingClientRect();
+        var metadata = {
+          heading: heading ? heading.textContent.trim() : null,
+          tagName: currentWidget.tagName.toLowerCase(),
+          classes: (typeof currentWidget.className === 'string' ? currentWidget.className : '').slice(0, 300),
+          textPreview: (currentWidget.textContent || '').trim().slice(0, 500),
+          rect: { width: Math.round(widgetRect.width), height: Math.round(widgetRect.height) },
+        };
+
+        window.parent.postMessage({ type: 'dashboard-widget-selected', metadata: metadata }, '*');
+        hideOverlay();
+      });
+    })();
+    </script>
   </body>
 </html>`;
 }
 
+/**
+ * Shape of a runtime error surfaced from the sandbox iframe. Covers three sources:
+ *   1. React ErrorBoundary catches (componentStack is present)
+ *   2. Uncaught window errors (sync throws outside render)
+ *   3. Unhandled promise rejections (async failures inside effects/handlers)
+ */
+export type DashboardRuntimeError = {
+  message: string,
+  stack?: string,
+  componentStack?: string,
+};
+
+/**
+ * Payload sent when the user clicks "Add to chat" on a widget in the iframe.
+ * `metadata` carries DOM info so the AI knows which part of the dashboard is targeted.
+ */
+export type WidgetSelection = {
+  metadata: {
+    heading: string | null,
+    tagName: string,
+    classes: string,
+    textPreview: string,
+    rect: { width: number, height: number },
+  },
+};
+
 export const DashboardSandboxHost = memo(function DashboardSandboxHost({
   artifact,
   onBack,
   onEditToggle,
   onNavigate,
+  onReady,
+  onRuntimeError,
+  onWidgetSelected,
   isChatOpen,
 }: {
   artifact: DashboardArtifact,
   onBack?: () => void,
   onEditToggle?: () => void,
   onNavigate?: (path: string) => void,
+  onReady?: () => void,
+  /** Fires whenever the sandbox reports a runtime error. Parent uses this to auto-insert
+      the crash into the assistant composer so the user can one-click fix it. */
+  onRuntimeError?: (err: DashboardRuntimeError) => void,
+  /** Fires when the user clicks "Add to chat" on a widget overlay in the iframe. */
+  onWidgetSelected?: (selection: WidgetSelection) => void,
   isChatOpen?: boolean,
 }) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
@@ -448,6 +637,12 @@ export const DashboardSandboxHost = memo(function DashboardSandboxHost({
   onEditToggleRef.current = onEditToggle;
   const onNavigateRef = useRef(onNavigate);
   onNavigateRef.current = onNavigate;
+  const onReadyRef = useRef(onReady);
+  onReadyRef.current = onReady;
+  const onRuntimeErrorRef = useRef(onRuntimeError);
+  onRuntimeErrorRef.current = onRuntimeError;
+  const onWidgetSelectedRef = useRef(onWidgetSelected);
+  onWidgetSelectedRef.current = onWidgetSelected;
   const user = useUser({ or: "redirect" });
   const { resolvedTheme } = useTheme();
 
@@ -544,10 +739,42 @@ export const DashboardSandboxHost = memo(function DashboardSandboxHost({
         const err = new Error(event.data.message ?? 'Unknown dashboard error');
         if (event.data.stack) err.stack = event.data.stack;
         captureError('dashboard-sandbox-error-boundary', err);
+        onRuntimeErrorRef.current?.({
+          message: typeof event.data.message === "string" ? event.data.message : "Unknown dashboard error",
+          stack: typeof event.data.stack === "string" ? event.data.stack : undefined,
+          componentStack: typeof event.data.componentStack === "string" ? event.data.componentStack : undefined,
+        });
+        return;
+      }
+
+      if (type === "stack-ai-dashboard-error") {
+        // Thrown during sandbox initialization (deps failed to load, Dashboard export missing, etc.)
+        // Surface it via the same channel so the UX is consistent with runtime errors.
+        onRuntimeErrorRef.current?.({
+          message: typeof event.data.message === "string" ? event.data.message : "Failed to initialize dashboard",
+          stack: typeof event.data.stack === "string" ? event.data.stack : undefined,
+        });
+        return;
+      }
+
+      if (type === "dashboard-widget-selected") {
+        onWidgetSelectedRef.current?.({
+          metadata: {
+            heading: typeof event.data.metadata?.heading === "string" ? event.data.metadata.heading : null,
+            tagName: typeof event.data.metadata?.tagName === "string" ? event.data.metadata.tagName : "div",
+            classes: typeof event.data.metadata?.classes === "string" ? event.data.metadata.classes : "",
+            textPreview: typeof event.data.metadata?.textPreview === "string" ? event.data.metadata.textPreview : "",
+            rect: {
+              width: typeof event.data.metadata?.rect?.width === "number" ? event.data.metadata.rect.width : 0,
+              height: typeof event.data.metadata?.rect?.height === "number" ? event.data.metadata.rect.height : 0,
+            },
+          },
+        });
         return;
       }
 
-      if (type === "stack-ai-dashboard-ready" || type === "stack-ai-dashboard-error") {
+      if (type === "stack-ai-dashboard-ready") {
+        onReadyRef.current?.();
         return;
       }
     };
diff --git a/apps/dashboard/src/components/design-components/analytics-card.tsx b/apps/dashboard/src/components/design-components/analytics-card.tsx
new file mode 100644
index 0000000000..b6eb7bb003
--- /dev/null
+++ b/apps/dashboard/src/components/design-components/analytics-card.tsx
@@ -0,0 +1,309 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import React, { useEffect, useRef, useState } from "react";
+import { Typography } from "@/components/ui";
+
+// ─── Gradient types ───────────────────────────────────────────────────────────
+
+export type AnalyticsCardGradient = "blue" | "cyan" | "purple" | "green" | "orange" | "slate";
+
+export type AnalyticsChartType = "none" | "line" | "bar" | "stacked-bar" | "composed" | "donut";
+export type AnalyticsTooltipType = "none" | "default" | "stacked" | "composed" | "visitors" | "revenue" | "donut";
+export type AnalyticsHighlightMode = "none" | "bar-segment" | "series-hover" | "dot-hover" | "mixed";
+
+export type AnalyticsAverageLineConfig = {
+  movingAverage?: boolean,
+  sevenDayAverage?: boolean,
+  movingAverageDataKey?: string,
+  sevenDayAverageDataKey?: string,
+};
+
+export type DesignAnalyticsChartConfig = {
+  type: AnalyticsChartType,
+  tooltipType?: AnalyticsTooltipType,
+  highlightMode?: AnalyticsHighlightMode,
+  averages?: AnalyticsAverageLineConfig,
+};
+
+// ─── Internal style maps ──────────────────────────────────────────────────────
+
+const hoverTintClasses = new Map<AnalyticsCardGradient, string>([
+  ["blue",   "group-hover:bg-blue-500/[0.03]"],
+  ["purple", "group-hover:bg-purple-500/[0.03]"],
+  ["green",  "group-hover:bg-emerald-500/[0.03]"],
+  ["orange", "group-hover:bg-orange-500/[0.03]"],
+  ["slate",  "group-hover:bg-slate-500/[0.02]"],
+  ["cyan",   "group-hover:bg-cyan-500/[0.03]"],
+]);
+
+// ─── DesignAnalyticsCard ──────────────────────────────────────────────────────
+//
+// A glass-surface card designed as the standard shell for chart widgets on the
+// overview page. Key differences from DesignCard:
+//
+//   - Lighter light-mode background (bg-white/90) vs dark (bg-background/60)
+//     so charts and data pop against the page without competing with other cards.
+//   - A "chart-card-tooltip-escape" CSS escape layer so Recharts tooltip
+//     wrappers (which are position:absolute) are not clipped by the card's
+//     overflow:hidden.
+//   - Does NOT clip overflow by default, which allows chart axis labels and
+//     floating tooltips to extend past the card bounds.
+//   - `hover:z-10` so the hovered card's tooltip sits above adjacent cards.
+//
+// Props:
+//   gradient  — accent tint shown on hover; defaults to "blue"
+//   className — forwarded to the outer wrapper div
+
+export type DesignAnalyticsCardProps = {
+  gradient?: AnalyticsCardGradient,
+  className?: string,
+  chart?: DesignAnalyticsChartConfig,
+  children: React.ReactNode,
+};
+
+export function DesignAnalyticsCard({
+  gradient = "blue",
+  className,
+  chart,
+  children,
+}: DesignAnalyticsCardProps) {
+  const hoverTint = hoverTintClasses.get(gradient) ?? "group-hover:bg-slate-500/[0.02]";
+  const chartType = chart?.type ?? "none";
+  const tooltipType = chart?.tooltipType ?? "none";
+  const highlightMode = chart?.highlightMode ?? "none";
+  const hasMovingAverage = chart?.averages?.movingAverage === true;
+  const hasSevenDayAverage = chart?.averages?.sevenDayAverage === true;
+  const hasAverageLines = hasMovingAverage || hasSevenDayAverage;
+
+  return (
+    <>
+      <div
+        className={cn(
+          // Surface
+          "group relative min-h-0 rounded-2xl",
+          "bg-white/90 dark:bg-background/60 backdrop-blur-xl",
+          // Border / shadow
+          "ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]",
+          "shadow-sm hover:shadow-md hover:z-10",
+          // Transitions — enter is instant, exit fades
+          "transition-all duration-150 hover:transition-none",
+          // Required for Recharts tooltip overflow escape
+          "analytics-card-tooltip-escape",
+          className
+        )}
+        data-analytics-chart-type={chartType}
+        data-analytics-tooltip-type={tooltipType}
+        data-analytics-highlight-mode={highlightMode}
+        data-analytics-has-average-lines={hasAverageLines ? "true" : "false"}
+        data-analytics-has-moving-average={hasMovingAverage ? "true" : "false"}
+        data-analytics-has-seven-day-average={hasSevenDayAverage ? "true" : "false"}
+      >
+        {/* Subtle gradient gloss */}
+        <div className="absolute inset-0 bg-gradient-to-br from-foreground/[0.06] via-foreground/[0.02] dark:from-foreground/[0.03] dark:via-foreground/[0.01] to-transparent pointer-events-none rounded-2xl overflow-hidden" />
+        {/* Gradient hover tint */}
+        <div className={cn(
+          "absolute inset-0 transition-colors duration-150 group-hover:transition-none pointer-events-none rounded-2xl overflow-hidden",
+          hoverTint
+        )} />
+        {/* Content layer — must be relative so children stack above pseudo-layers */}
+        <div className="relative h-full min-h-0 flex flex-col">
+          {children}
+        </div>
+      </div>
+    </>
+  );
+}
+
+// ─── DesignAnalyticsCardHeader ────────────────────────────────────────────────
+//
+// Compact single-line header bar (label + optional right-side slot) separated
+// from body by a thin divider. Used for ranked list cards, stat cards, and any
+// card that wants a simple heading above the content area.
+
+export type DesignAnalyticsCardHeaderProps = {
+  label: React.ReactNode,
+  right?: React.ReactNode,
+  compact?: boolean,
+  className?: string,
+};
+
+export function DesignAnalyticsCardHeader({
+  label,
+  right,
+  compact = false,
+  className,
+}: DesignAnalyticsCardHeaderProps) {
+  return (
+    <div className={cn(
+      "flex items-center justify-between border-b border-foreground/[0.05] shrink-0",
+      compact ? "px-4 py-3" : "px-5 py-3.5",
+      className
+    )}>
+      <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+        {label}
+      </span>
+      {right != null && (
+        <div className="shrink-0">{right}</div>
+      )}
+    </div>
+  );
+}
+
+// ─── DesignChartLegend ────────────────────────────────────────────────────────
+//
+// A row of dot + label legend items that appears above or below a stacked chart.
+// Used by sign-ups, emails sent, and any stacked-bar chart that needs a legend.
+
+export type DesignChartLegendItem = {
+  key: string,
+  label: string,
+  color: string,
+};
+
+export type DesignChartLegendProps = {
+  items: readonly DesignChartLegendItem[],
+  compact?: boolean,
+  className?: string,
+};
+
+export function DesignChartLegend({
+  items,
+  compact = false,
+  className,
+}: DesignChartLegendProps) {
+  return (
+    <div className={cn(
+      "flex items-center gap-3 flex-wrap",
+      compact ? "px-4 pt-2" : "px-5 pt-2.5",
+      className
+    )}>
+      {items.map((item) => (
+        <div key={item.key} className="flex items-center gap-1.5">
+          <span
+            className="h-2 w-2 rounded-full shrink-0"
+            style={{ backgroundColor: item.color }}
+          />
+          <span className="text-[10px] font-medium text-muted-foreground">
+            {item.label}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ─── useInfiniteListWindow ────────────────────────────────────────────────────
+//
+// Shared hook for incremental list rendering driven by an IntersectionObserver.
+// Renders BATCH_SIZE items initially, then reveals the next batch whenever the
+// sentinel element at the bottom of the list scrolls into view of its scrollable
+// container.
+//
+// Usage:
+//   const { visibleCount, scrollRef, sentinelRef, hasMore } = useInfiniteListWindow(items.length);
+//   <div ref={scrollRef} className="overflow-y-auto flex-1 min-h-0">
+//     {items.slice(0, visibleCount).map(…)}
+//     {hasMore && <div ref={sentinelRef} />}
+//   </div>
+
+const INFINITE_LIST_BATCH_SIZE = 12;
+
+export type InfiniteListWindow = {
+  visibleCount: number,
+  scrollRef: React.RefObject<HTMLDivElement>,
+  sentinelRef: React.RefObject<HTMLDivElement>,
+  hasMore: boolean,
+};
+
+export function useInfiniteListWindow(
+  totalCount: number,
+  /** Reset visible count when this flag changes (e.g. tab switch). */
+  resetKey?: unknown,
+  /** Enable observation only when list UI is mounted. */
+  enabled: boolean = true,
+): InfiniteListWindow {
+  const [visibleCount, setVisibleCount] = useState(() => Math.min(INFINITE_LIST_BATCH_SIZE, totalCount));
+  // React 19 useRef<T>(null) returns RefObject<T | null>; cast to RefObject<T>
+  // for compatibility with JSX ref props that expect RefObject<T>.
+  const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
+  const sentinelRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
+  const hasMore = visibleCount < totalCount;
+
+  // Reset whenever the list source or reset key changes.
+  useEffect(() => {
+    setVisibleCount(Math.min(INFINITE_LIST_BATCH_SIZE, totalCount));
+  }, [totalCount, resetKey]);
+
+  // Attach IntersectionObserver only when there is more to reveal.
+  useEffect(() => {
+    if (!enabled || !hasMore) return;
+    // scrollRef.current and sentinelRef.current are typed non-null after the
+    // cast above, but at mount they start as null at runtime. Guard explicitly.
+    const root = scrollRef.current as HTMLDivElement | null;
+    const target = sentinelRef.current as HTMLDivElement | null;
+    if (root == null || target == null) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (!entry.isIntersecting) return;
+        setVisibleCount((c) => Math.min(c + INFINITE_LIST_BATCH_SIZE, totalCount));
+      },
+      { root, rootMargin: "120px 0px", threshold: 0.01 },
+    );
+
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [enabled, hasMore, totalCount]);
+
+  return { visibleCount, scrollRef, sentinelRef, hasMore };
+}
+
+// ─── DesignInfiniteScrollList ─────────────────────────────────────────────────
+//
+// Scrollable list container that automatically appends a "Loading more…" sentinel
+// and drives visibility via useInfiniteListWindow.
+// Renders children as-is; the consumer slices by `window.visibleCount`.
+
+export type DesignInfiniteScrollListProps = {
+  totalCount: number,
+  resetKey?: unknown,
+  emptyMessage?: string,
+  loadingLabel?: string,
+  children: (window: InfiniteListWindow) => React.ReactNode,
+  className?: string,
+};
+
+export function DesignInfiniteScrollList({
+  totalCount,
+  resetKey,
+  emptyMessage = "No items",
+  loadingLabel = "Loading more…",
+  children,
+  className,
+}: DesignInfiniteScrollListProps) {
+  const window = useInfiniteListWindow(totalCount, resetKey);
+
+  if (totalCount === 0) {
+    return (
+      <div className={cn("flex items-center justify-center h-full", className)}>
+        <Typography variant="secondary" className="text-xs">{emptyMessage}</Typography>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={window.scrollRef}
+      className={cn("flex-1 min-h-0 overflow-y-auto", className)}
+    >
+      {children(window)}
+      {window.hasMore && (
+        <div ref={window.sentinelRef} className="py-2 text-center">
+          <Typography variant="secondary" className="text-[10px]">{loadingLabel}</Typography>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/design-components/index.ts b/apps/dashboard/src/components/design-components/index.ts
index ad10260bb1..e92fd172b1 100644
--- a/apps/dashboard/src/components/design-components/index.ts
+++ b/apps/dashboard/src/components/design-components/index.ts
@@ -1,4 +1,5 @@
 export * from "@stackframe/dashboard-ui-components";
+export * from "./analytics-card";
 export * from "./editable-grid";
 export * from "./list";
 export * from "./menu";
diff --git a/apps/dashboard/src/components/streaming-code-viewer.tsx b/apps/dashboard/src/components/streaming-code-viewer.tsx
new file mode 100644
index 0000000000..f2d6317c44
--- /dev/null
+++ b/apps/dashboard/src/components/streaming-code-viewer.tsx
@@ -0,0 +1,181 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { memo, useEffect, useRef, useState } from "react";
+
+const STATUS_MESSAGES = [
+  "Understanding your query...",
+  "Analyzing project structure...",
+  "Writing dashboard code...",
+  "Generating components...",
+  "Assembling layout...",
+];
+
+const CHARS_PER_FRAME = 8;
+const FRAME_INTERVAL_MS = 16;
+
+function highlightCode(code: string): React.ReactNode[] {
+  const lines = code.split("\n");
+  return lines.map((line, i) => (
+    <div key={i} className="whitespace-pre">
+      {highlightLine(line)}
+    </div>
+  ));
+}
+
+function highlightLine(line: string): React.ReactNode[] {
+  const tokens: React.ReactNode[] = [];
+  const regex = /(\/\/.*$|\/\*[\s\S]*?\*\/|"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`|\b(?:import|export|from|const|let|var|function|return|if|else|for|while|async|await|new|class|extends|typeof|interface|type)\b|\b\d+(?:\.\d+)?\b|<\/?[A-Z][A-Za-z0-9.]*|[{}()[\];,.])/gm;
+
+  let lastIndex = 0;
+  let match;
+  while ((match = regex.exec(line)) !== null) {
+    if (match.index > lastIndex) {
+      tokens.push(line.slice(lastIndex, match.index));
+    }
+    const token = match[0];
+    if (token.startsWith("//") || token.startsWith("/*")) {
+      tokens.push(<span key={`${lastIndex}-c`} className="text-zinc-400 dark:text-zinc-500">{token}</span>);
+    } else if (token.startsWith('"') || token.startsWith("'") || token.startsWith("`")) {
+      tokens.push(<span key={`${lastIndex}-s`} className="text-green-600 dark:text-green-400">{token}</span>);
+    } else if (/^<\/?[A-Z]/.test(token)) {
+      tokens.push(<span key={`${lastIndex}-j`} className="text-amber-600 dark:text-amber-400">{token}</span>);
+    } else if (/^\b(?:import|export|from|const|let|var|function|return|if|else|for|while|async|await|new|class|extends|typeof|interface|type)\b$/.test(token)) {
+      tokens.push(<span key={`${lastIndex}-k`} className="text-blue-600 dark:text-blue-400">{token}</span>);
+    } else if (/^\d/.test(token)) {
+      tokens.push(<span key={`${lastIndex}-n`} className="text-orange-600 dark:text-orange-400">{token}</span>);
+    } else {
+      tokens.push(token);
+    }
+    lastIndex = match.index + token.length;
+  }
+  if (lastIndex < line.length) {
+    tokens.push(line.slice(lastIndex));
+  }
+  return tokens;
+}
+
+export const StreamingCodeViewer = memo(function StreamingCodeViewer({
+  code,
+  isStreaming,
+  onComplete,
+}: {
+  code: string,
+  isStreaming: boolean,
+  onComplete?: () => void,
+}) {
+  const onCompleteRef = useRef(onComplete);
+  onCompleteRef.current = onComplete;
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const [visibleLen, setVisibleLen] = useState(0);
+  const targetRef = useRef(0);
+
+  useEffect(() => {
+    targetRef.current = code.length;
+  }, [code]);
+
+  useEffect(() => {
+    if (code.length === 0) {
+      setVisibleLen(0);
+      targetRef.current = 0;
+    }
+  }, [code.length]);
+
+  const isTyping = visibleLen < code.length;
+  useEffect(() => {
+    if (!isTyping) return;
+    const interval = setInterval(() => {
+      setVisibleLen((prev) => {
+        const target = targetRef.current;
+        if (prev >= target) return prev;
+        return Math.min(prev + CHARS_PER_FRAME, target);
+      });
+    }, FRAME_INTERVAL_MS);
+    return () => clearInterval(interval);
+  }, [isTyping]);
+
+  const firedCompleteRef = useRef(false);
+  useEffect(() => {
+    if (!isTyping && !isStreaming && code.length > 0 && !firedCompleteRef.current) {
+      firedCompleteRef.current = true;
+      onCompleteRef.current?.();
+    }
+  }, [isTyping, isStreaming, code.length]);
+
+  useEffect(() => {
+    if (code.length === 0) {
+      firedCompleteRef.current = false;
+    }
+  }, [code.length]);
+
+  const visibleCode = code.slice(0, visibleLen);
+  const hasVisible = visibleLen > 0;
+  const hasCode = code.length > 0;
+  const showCursor = isStreaming || isTyping;
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [visibleCode]);
+
+  const [statusIndex, setStatusIndex] = useState(0);
+  useEffect(() => {
+    if (hasCode) return;
+    const interval = setInterval(() => {
+      setStatusIndex((prev) => (prev + 1) % STATUS_MESSAGES.length);
+    }, 2000);
+    return () => clearInterval(interval);
+  }, [hasCode]);
+
+  useEffect(() => {
+    if (!hasCode) setStatusIndex(0);
+  }, [hasCode]);
+
+  return (
+    <div className="flex h-full w-full flex-col rounded-lg overflow-hidden bg-zinc-50 dark:bg-zinc-950 ring-1 ring-zinc-200 dark:ring-white/[0.06]">
+      <div className="flex items-center gap-2 px-3 py-2 bg-zinc-100/80 dark:bg-zinc-900/80 border-b border-zinc-200 dark:border-white/[0.06]">
+        <div className="flex gap-1.5">
+          <div className="w-2.5 h-2.5 rounded-full bg-red-500/70" />
+          <div className="w-2.5 h-2.5 rounded-full bg-yellow-500/70" />
+          <div className="w-2.5 h-2.5 rounded-full bg-green-500/70" />
+        </div>
+        <span className="text-[10px] text-zinc-400 dark:text-zinc-500 font-mono ml-1">Dashboard.tsx</span>
+      </div>
+
+      <div
+        ref={containerRef}
+        className="flex-1 min-h-0 overflow-hidden p-3 font-mono text-[11px] leading-relaxed text-zinc-700 dark:text-zinc-300"
+      >
+        {hasVisible ? (
+          <div>
+            {highlightCode(visibleCode)}
+            {showCursor && (
+              <span className={cn(
+                "inline-block w-[6px] h-[14px] bg-cyan-500 dark:bg-cyan-400 ml-0.5 align-middle",
+                "animate-pulse"
+              )} />
+            )}
+          </div>
+        ) : (
+          <div className="flex h-full items-center justify-center">
+            <div className="flex flex-col items-center gap-3">
+              <div className="flex gap-1">
+                <div className="w-1.5 h-1.5 rounded-full bg-cyan-500 animate-pulse" />
+                <div className="w-1.5 h-1.5 rounded-full bg-cyan-500 animate-pulse" style={{ animationDelay: "150ms" }} />
+                <div className="w-1.5 h-1.5 rounded-full bg-cyan-500 animate-pulse" style={{ animationDelay: "300ms" }} />
+              </div>
+              <span className="text-[11px] text-zinc-400 dark:text-zinc-500 transition-opacity duration-300">
+                {STATUS_MESSAGES[statusIndex]}
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {showCursor && hasVisible && (
+        <div className="h-8 bg-gradient-to-t from-cyan-500/[0.04] dark:from-cyan-500/[0.06] to-transparent pointer-events-none" />
+      )}
+    </div>
+  );
+});
diff --git a/apps/dashboard/src/components/vibe-coding/assistant-chat.tsx b/apps/dashboard/src/components/vibe-coding/assistant-chat.tsx
index 5966c70280..aa9ad1e339 100644
--- a/apps/dashboard/src/components/vibe-coding/assistant-chat.tsx
+++ b/apps/dashboard/src/components/vibe-coding/assistant-chat.tsx
@@ -1,19 +1,58 @@
-import { Thread } from "@/components/assistant-ui/thread";
+import { ImageAttachmentAdapter } from "@/components/assistant-ui/image-attachment-adapter";
+import { Thread, type ComposerPlaceholder } from "@/components/assistant-ui/thread";
 import {
   AssistantRuntimeProvider,
+  useComposerRuntime,
   useLocalRuntime,
   type ChatModelAdapter,
   type ThreadHistoryAdapter,
 } from "@assistant-ui/react";
+import { useEffect, useMemo } from "react";
 import { TooltipProvider } from "@/components/ui";
 
+/**
+ * Imperative handle the parent can use to drive the thread composer from outside the
+ * assistant-ui runtime — e.g. pre-filling it with a crash report captured from the
+ * dashboard sandbox iframe. We keep it small on purpose: anything beyond "set the
+ * current draft" is a smell.
+ */
+export type AssistantComposerApi = {
+  setText: (text: string) => void,
+  getText: () => string,
+};
+
 type AssistantChatProps = {
   chatAdapter: ChatModelAdapter,
   historyAdapter: ThreadHistoryAdapter,
   toolComponents: React.ReactNode,
   useOffWhiteLightMode?: boolean,
-  composerPlaceholder?: string,
+  /** Static string, or `{ prefix, suffixes }` for a typing animation isolated to a leaf input. */
+  composerPlaceholder?: ComposerPlaceholder,
   hideMessageActions?: boolean,
+  runningStatusMessages?: string[],
+  /** Enable image attachment UI (subject to shared MAX_IMAGES_PER_MESSAGE/MAX_IMAGE_BYTES_PER_FILE). */
+  composerAttachments?: boolean,
+  /**
+   * Called once the composer runtime is mounted. Parent stores the handle in a ref
+   * and can then call `setText(...)` imperatively. Fires inside the runtime provider
+   * so the hook contract is honored.
+   */
+  onComposerReady?: (api: AssistantComposerApi) => void,
+}
+
+/**
+ * Lives INSIDE `AssistantRuntimeProvider` so `useComposerRuntime()` resolves. All it
+ * does is forward a tiny imperative handle upward on mount — no rendered output.
+ */
+function ComposerBridge({ onReady }: { onReady: (api: AssistantComposerApi) => void }) {
+  const composerRuntime = useComposerRuntime();
+  useEffect(() => {
+    onReady({
+      setText: (text: string) => composerRuntime.setText(text),
+      getText: () => composerRuntime.getState().text,
+    });
+  }, [composerRuntime, onReady]);
+  return null;
 }
 
 export default function AssistantChat({
@@ -23,19 +62,40 @@ export default function AssistantChat({
   useOffWhiteLightMode = false,
   composerPlaceholder,
   hideMessageActions = false,
+  runningStatusMessages,
+  composerAttachments = false,
+  onComposerReady,
 }: AssistantChatProps) {
+  const attachmentAdapter = useMemo(
+    () => (composerAttachments ? new ImageAttachmentAdapter() : undefined),
+    [composerAttachments],
+  );
+
   const runtime = useLocalRuntime(
     chatAdapter,
-    { adapters: { history: historyAdapter } }
+    {
+      adapters: {
+        history: historyAdapter,
+        ...(attachmentAdapter ? { attachments: attachmentAdapter } : {}),
+      },
+    }
   );
 
   return (
     <AssistantRuntimeProvider runtime={runtime}>
       <div className="flex flex-col h-full w-full overflow-hidden border-l border-border/10 dark:border-foreground/[0.06]">
         <TooltipProvider delayDuration={300}>
-          <Thread useOffWhiteLightMode={useOffWhiteLightMode} composerPlaceholder={composerPlaceholder} hideMessageActions={hideMessageActions} />
+          <Thread
+            useOffWhiteLightMode={useOffWhiteLightMode}
+            composerPlaceholder={composerPlaceholder}
+            hideMessageActions={hideMessageActions}
+            runningStatusMessages={runningStatusMessages}
+            composerAttachments={composerAttachments}
+            attachmentAdapter={attachmentAdapter}
+          />
         </TooltipProvider>
         {toolComponents}
+        {onComposerReady ? <ComposerBridge onReady={onComposerReady} /> : null}
       </div>
     </AssistantRuntimeProvider>
   );
diff --git a/apps/dashboard/src/components/vibe-coding/chat-adapters.ts b/apps/dashboard/src/components/vibe-coding/chat-adapters.ts
index 769f041b78..d05baf31e7 100644
--- a/apps/dashboard/src/components/vibe-coding/chat-adapters.ts
+++ b/apps/dashboard/src/components/vibe-coding/chat-adapters.ts
@@ -4,12 +4,20 @@ import type { AppId } from "@/lib/apps-frontend";
 import {
   type ChatModelAdapter,
   type ChatModelRunOptions,
+  type ChatModelRunResult,
   type ExportedMessageRepository,
   type ThreadHistoryAdapter,
 } from "@assistant-ui/react";
 import { StackAdminApp } from "@stackframe/stack";
 import { ChatContent } from "@stackframe/stack-shared/dist/interface/admin-interface";
 import type { EditableMetadata } from "@stackframe/stack-shared/dist/utils/jsx-editable-transpiler";
+import {
+  parseJsonEventStream,
+  readUIMessageStream,
+  uiMessageChunkSchema,
+  type UIMessage,
+  type UIMessageChunk,
+} from "ai";
 
 export type ToolCallContent = Extract<ChatContent[number], { type: "tool-call" }>;
 
@@ -17,17 +25,30 @@ const isToolCall = (content: { type: string }): content is ToolCallContent => {
   return content.type === "tool-call";
 };
 
-/**
- * Sanitizes AI-generated JSX/TSX code before it is applied to the renderer.
- *
- * Handles four common model output issues:
- * 1. Markdown code fences (```tsx ... ```) wrapping the output despite instructions
- * 2. HTML-encoded angle brackets (&lt;Component&gt; instead of <Component>)
- * 3. Bare & in JSX text content (invalid JSX; must be &amp; or {"&"})
- * 4. Semicolons used as property separators in JS object literals instead of commas
- *    (the AI confuses TypeScript interface syntax with JS object syntax).
- *    TypeScript also accepts commas in interfaces/types, so replacing ; → , is always safe.
- */
+/** Maps thread messages to the backend wire format; merges `attachments` into `content`. */
+function formatThreadMessagesForBackend(
+  messages: readonly { role: string, content: readonly { type: string }[], attachments?: readonly { content?: readonly unknown[] }[] }[],
+): Array<{ role: string, content: unknown }> {
+  const formatted: Array<{ role: string, content: unknown }> = [];
+  for (const msg of messages) {
+    const textContent = msg.content.filter((c) => !isToolCall(c));
+    const attachmentContent: unknown[] = [];
+    if (msg.attachments) {
+      for (const attachment of msg.attachments) {
+        if (Array.isArray(attachment.content)) {
+          attachmentContent.push(...attachment.content);
+        }
+      }
+    }
+    const combined = [...textContent, ...attachmentContent];
+    if (combined.length > 0) {
+      formatted.push({ role: msg.role, content: combined });
+    }
+  }
+  return formatted;
+}
+
+/** Normalizes model JSX: strip fences, decode basic entities, fix `;` vs `,` between object props. */
 function sanitizeGeneratedCode(code: string): string {
   let result = code.trim();
 
@@ -72,6 +93,7 @@ async function sendAiRequest(
     systemPrompt: string,
     tools: string[],
     messages: Array<{ role: string, content: unknown }>,
+    projectId?: string,
   },
   abortSignal?: AbortSignal,
 ): Promise<ChatContent> {
@@ -104,6 +126,153 @@ function sanitizeAiContent(content: ChatContent): ChatContent {
   });
 }
 
+/**
+ * Sends a request to the AI streaming endpoint and returns a stream of UIMessageChunks
+ * (as produced by the Vercel AI SDK's `streamText().toUIMessageStreamResponse()`).
+ */
+async function sendAiStreamRequest(
+  backendBaseUrl: string,
+  currentUser: CurrentUser | undefined,
+  body: {
+    quality: string,
+    speed: string,
+    systemPrompt: string,
+    tools: string[],
+    messages: Array<{ role: string, content: unknown }>,
+    projectId?: string,
+  },
+  abortSignal?: AbortSignal,
+): Promise<ReadableStream<UIMessageChunk>> {
+  const authHeaders = await buildStackAuthHeaders(currentUser);
+
+  const response = await fetch(`${backendBaseUrl}/api/latest/ai/query/stream`, {
+    method: "POST",
+    headers: {
+      "content-type": "application/json",
+      accept: "text/event-stream",
+      ...authHeaders,
+    },
+    ...(abortSignal ? { signal: abortSignal } : {}),
+    body: JSON.stringify(body),
+  });
+
+  if (!response.ok || !response.body) {
+    throw new Error(`AI stream request failed: ${response.status} ${response.statusText}`);
+  }
+
+  return parseJsonEventStream({
+    stream: response.body,
+    schema: uiMessageChunkSchema,
+  }).pipeThrough(
+    new TransformStream<
+      { success: true, value: UIMessageChunk, rawValue: unknown } | { success: false, error: unknown, rawValue: unknown },
+      UIMessageChunk
+    >({
+      transform(parseResult, controller) {
+        if (parseResult.success) {
+          controller.enqueue(parseResult.value);
+        }
+      },
+    }),
+  );
+}
+
+/**
+ * Converts a UIMessage's parts (as emitted by `readUIMessageStream`) into our
+ * ChatContent shape so the existing tool UI / sanitizer pipeline keeps working.
+ */
+function uiPartsToChatContent(parts: UIMessage["parts"]): ChatContent {
+  const result: ChatContent = [];
+  for (const part of parts) {
+    if (part.type === "text") {
+      if (part.text) {
+        result.push({ type: "text", text: part.text });
+      }
+      continue;
+    }
+
+    if (part.type === "dynamic-tool") {
+      const toolPart = part as { toolCallId: string, toolName: string, input?: unknown, output?: unknown };
+      const input = toolPart.input ?? {};
+      result.push({
+        type: "tool-call",
+        toolCallId: toolPart.toolCallId,
+        toolName: toolPart.toolName,
+        args: input,
+        argsText: typeof input === "string" ? input : JSON.stringify(input),
+        result: toolPart.output ?? null,
+      });
+      continue;
+    }
+
+    if (typeof part.type === "string" && part.type.startsWith("tool-")) {
+      const toolName = part.type.slice("tool-".length);
+      const toolPart = part as { toolCallId: string, input?: unknown, output?: unknown };
+      const input = toolPart.input ?? {};
+      result.push({
+        type: "tool-call",
+        toolCallId: toolPart.toolCallId,
+        toolName,
+        args: input,
+        argsText: typeof input === "string" ? input : JSON.stringify(input),
+        result: toolPart.output ?? null,
+      });
+      continue;
+    }
+  }
+  return result;
+}
+
+/**
+ * Streaming dashboard generation: yields progressively updated ChatContent as the AI
+ * streams text and tool-call input. Each yield represents the full current state of
+ * the assistant message (not an incremental delta).
+ */
+export async function* streamDashboardCode(
+  backendBaseUrl: string,
+  currentUser: CurrentUser | undefined,
+  messages: Array<{ role: string, content: unknown }>,
+  options?: {
+    currentTsxSource?: string,
+    abortSignal?: AbortSignal,
+    enabledAppIds?: AppId[],
+    projectId?: string,
+  },
+): AsyncGenerator<ChatContent, void, undefined> {
+  const contextMessages = await buildDashboardMessages(
+    backendBaseUrl,
+    currentUser,
+    messages,
+    options?.currentTsxSource,
+    options?.enabledAppIds,
+  );
+
+  // Only give the agent the sql-query tool when we know which project to scope it to.
+  // Without projectId, the tool would fall back to the internal project — wrong target.
+  const tools = options?.projectId
+    ? ["update-dashboard", "sql-query"]
+    : ["update-dashboard"];
+
+  const chunkStream = await sendAiStreamRequest(
+    backendBaseUrl,
+    currentUser,
+    {
+      quality: "smart",
+      speed: "slow",
+      systemPrompt: "create-dashboard",
+      tools,
+      messages: [...contextMessages, ...messages],
+      projectId: options?.projectId,
+    },
+    options?.abortSignal,
+  );
+
+  for await (const message of readUIMessageStream({ stream: chunkStream })) {
+    if (options?.abortSignal?.aborted) return;
+    yield sanitizeAiContent(uiPartsToChatContent(message.parts));
+  }
+}
+
 /**
  * One-shot dashboard generation: builds context, calls AI, returns the tool call content.
  * Used by both the cmd+K preview and the dashboard chat adapter.
@@ -116,6 +285,7 @@ export async function generateDashboardCode(
     currentTsxSource?: string,
     abortSignal?: AbortSignal,
     enabledAppIds?: AppId[],
+    projectId?: string,
   },
 ): Promise<{ content: ChatContent, toolCall: ToolCallContent | undefined }> {
   const contextMessages = await buildDashboardMessages(
@@ -125,6 +295,9 @@ export async function generateDashboardCode(
     options?.currentTsxSource,
     options?.enabledAppIds,
   );
+  const tools = options?.projectId
+    ? ["update-dashboard", "sql-query"]
+    : ["update-dashboard"];
   const rawContent = await sendAiRequest(
     backendBaseUrl,
     currentUser,
@@ -132,8 +305,9 @@ export async function generateDashboardCode(
       quality: "smart",
       speed: "slow",
       systemPrompt: "create-dashboard",
-      tools: ["update-dashboard"],
+      tools,
       messages: [...contextMessages, ...messages],
+      projectId: options?.projectId,
     },
     options?.abortSignal,
   );
@@ -155,17 +329,14 @@ export function createChatAdapter(
   onToolCall: (toolCall: ToolCallContent) => void,
   getCurrentSource?: () => string,
   currentUser?: CurrentUser,
+  onRunStart?: () => void,
+  onRunEnd?: () => void,
 ): ChatModelAdapter {
   return {
     async run({ messages, abortSignal }: ChatModelRunOptions) {
+      onRunStart?.();
       try {
-        const formattedMessages: Array<{ role: string, content: unknown }> = [];
-        for (const msg of messages) {
-          const textContent = msg.content.filter(c => !isToolCall(c));
-          if (textContent.length > 0) {
-            formattedMessages.push({ role: msg.role, content: textContent });
-          }
-        }
+        const formattedMessages = formatThreadMessagesForBackend(messages);
 
         const { systemPrompt, tools } = CONTEXT_MAP[contextType];
 
@@ -204,6 +375,8 @@ export function createChatAdapter(
           return {};
         }
         throw new Error("Failed to get AI response. Please try again.");
+      } finally {
+        onRunEnd?.();
       }
     },
   };
@@ -215,19 +388,18 @@ export function createDashboardChatAdapter(
   onToolCall: (toolCall: ToolCallContent) => void,
   currentUser?: CurrentUser,
   enabledAppIds?: AppId[],
+  projectId?: string,
+  onRunStart?: () => void,
+  onRunEnd?: () => void,
 ): ChatModelAdapter {
   return {
-    async run({ messages, abortSignal }: ChatModelRunOptions) {
+    async *run({ messages, abortSignal }: ChatModelRunOptions): AsyncGenerator<ChatModelRunResult, void> {
+      onRunStart?.();
       try {
-        const formattedMessages: Array<{ role: string, content: unknown }> = [];
-        for (const msg of messages) {
-          const textContent = msg.content.filter(c => !isToolCall(c));
-          if (textContent.length > 0) {
-            formattedMessages.push({ role: msg.role, content: textContent });
-          }
-        }
+        const formattedMessages = formatThreadMessagesForBackend(messages);
 
-        const { content, toolCall } = await generateDashboardCode(
+        let latestContent: ChatContent = [];
+        for await (const content of streamDashboardCode(
           backendBaseUrl,
           currentUser,
           formattedMessages,
@@ -235,19 +407,26 @@ export function createDashboardChatAdapter(
             currentTsxSource,
             abortSignal,
             enabledAppIds,
+            projectId,
           },
-        );
-
-        if (toolCall) {
-          onToolCall(toolCall);
+        )) {
+          latestContent = content;
+          yield { content };
         }
 
-        return { content };
+        const finalToolCall = latestContent.find(
+          (item): item is ToolCallContent => isToolCall(item) && item.toolName === "updateDashboard",
+        );
+        if (finalToolCall) {
+          onToolCall(finalToolCall);
+        }
       } catch (error) {
         if (abortSignal.aborted) {
-          return {};
+          return;
         }
         throw new Error("Failed to get AI response. Please try again.");
+      } finally {
+        onRunEnd?.();
       }
     },
   };
diff --git a/apps/dashboard/src/components/vibe-coding/dashboard-tool-components.tsx b/apps/dashboard/src/components/vibe-coding/dashboard-tool-components.tsx
index c75b3d61ed..488359cf22 100644
--- a/apps/dashboard/src/components/vibe-coding/dashboard-tool-components.tsx
+++ b/apps/dashboard/src/components/vibe-coding/dashboard-tool-components.tsx
@@ -1,7 +1,25 @@
-import { Button, Card } from "@/components/ui";
+import { CodeBlock } from "@/components/code-block";
+import {
+  Button,
+  Card,
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  SimpleTooltip,
+} from "@/components/ui";
+import { cn } from "@/lib/utils";
 import { makeAssistantToolUI } from "@assistant-ui/react";
-import { ArrowCounterClockwiseIcon, CheckCircleIcon } from "@phosphor-icons/react";
-import { useEffect, useSyncExternalStore } from "react";
+import {
+  ArrowCounterClockwiseIcon,
+  CheckCircleIcon,
+  EyeIcon,
+  MagnifyingGlassIcon,
+  WarningIcon,
+} from "@phosphor-icons/react";
+import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
 
 let setCurrentCodeRef: ((code: string) => void) | null = null;
 let currentCodeRef: string = "";
@@ -18,22 +36,73 @@ function useCurrentCode() {
   return useSyncExternalStore(subscribe, () => currentCodeRef);
 }
 
-function ToolRender({ args }: { args: { content: string } }) {
+function ToolRender({ args, isRunning }: { args: { content: string }, isRunning: boolean }) {
   const currentCode = useCurrentCode();
   const isActive = args.content === currentCode;
+  const [isCodeOpen, setIsCodeOpen] = useState(false);
 
   return (
-    <Card className={`flex items-center gap-2 p-4 justify-between transition-colors ${isActive ? "ring-1 ring-primary/30 bg-primary/[0.03]" : ""}`}>
-      <span className="text-sm flex items-center gap-2">
-        {isActive && <CheckCircleIcon className="size-4 text-primary" weight="fill" />}
-        Updated dashboard
-      </span>
-      {!isActive && (
-        <Button variant="ghost" size="icon" onClick={() => setCurrentCodeRef?.(args.content)}>
-          <ArrowCounterClockwiseIcon className="size-4" />
-        </Button>
-      )}
-    </Card>
+    <>
+      <Card className={`flex items-center gap-2 p-4 justify-between transition-colors ${isActive ? "ring-1 ring-primary/30 bg-primary/[0.03]" : ""}`}>
+        <span className="text-sm flex items-center gap-2">
+          {isActive && <CheckCircleIcon className="size-4 text-primary" weight="fill" />}
+          {isRunning ? "Updating dashboard..." : "Updated dashboard"}
+        </span>
+        <div className="flex items-center gap-0.5">
+          <SimpleTooltip tooltip={isRunning ? "Streaming source..." : "View source"}>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-7"
+              onClick={() => setIsCodeOpen(true)}
+              aria-label="View generated source"
+            >
+              <EyeIcon className="size-4" />
+            </Button>
+          </SimpleTooltip>
+          {!isActive && (
+            <SimpleTooltip tooltip={isRunning ? "Available when generation finishes" : "Restore this version"}>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-7"
+                disabled={isRunning}
+                onClick={() => setCurrentCodeRef?.(args.content)}
+                aria-label="Restore this version"
+              >
+                <ArrowCounterClockwiseIcon className="size-4" />
+              </Button>
+            </SimpleTooltip>
+          )}
+        </div>
+      </Card>
+      <Dialog open={isCodeOpen} onOpenChange={setIsCodeOpen}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>Generated source</DialogTitle>
+            <DialogDescription>
+              {isRunning
+                ? "Streaming from the model — updates live as tokens arrive."
+                : "The TSX the model returned for this turn."}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogBody>
+            <CodeBlock
+              language="tsx"
+              content={args.content || "// Waiting for the model to produce code..."}
+              title="Dashboard.tsx"
+              icon="code"
+              maxHeight={480}
+              customRender={isRunning ? (
+                <pre className="p-4 text-sm font-mono" style={{ maxHeight: 480, overflow: 'auto', whiteSpace: 'pre-wrap', wordBreak: 'break-word', margin: 0 }}>
+                  {args.content || "// Waiting for the model to produce code..."}
+                </pre>
+              ) : undefined}
+            />
+          </DialogBody>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }
 
@@ -42,7 +111,233 @@ const ToolUI = makeAssistantToolUI<
   "success"
 >({
   toolName: "updateDashboard",
-  render: (props) => <ToolRender args={props.args} />,
+  render: (props) => <ToolRender args={props.args} isRunning={props.status.type === "running"} />,
+});
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * queryAnalytics tool UI — inspection steps the agent takes before/between
+ * writes. Visual weight is DELIBERATELY lighter than the updateDashboard card:
+ * updateDashboard is a state transition ("the dashboard changed"); an inspection
+ * step is a breadcrumb ("the agent looked something up"). If both looked alike
+ * the chat would feel noisy and the user couldn't scan at a glance.
+ * ────────────────────────────────────────────────────────────────────────── */
+
+type QueryAnalyticsSuccess = {
+  success: true,
+  rowCount: number,
+  totalRows?: number,
+  truncated?: boolean,
+  truncationNote?: string,
+  result: Array<Record<string, unknown>>,
+}
+
+type QueryAnalyticsError = {
+  success: false,
+  error: string,
+}
+
+type QueryAnalyticsResult = QueryAnalyticsSuccess | QueryAnalyticsError;
+
+function isQueryAnalyticsResult(v: unknown): v is QueryAnalyticsResult {
+  return typeof v === "object" && v !== null && "success" in v && typeof (v as { success: unknown }).success === "boolean";
+}
+
+function firstNonEmptyLine(s: string): string {
+  for (const line of s.split("\n")) {
+    const trimmed = line.trim();
+    if (trimmed.length > 0) return trimmed;
+  }
+  return s.trim();
+}
+
+/** Renders cell values inside the result preview table. Objects are JSON-encoded
+ *  so the agent's `data` JSON column is still inspectable without a custom viewer. */
+function formatCell(v: unknown): string {
+  if (v === null || v === undefined) return "—";
+  if (typeof v === "string") return v;
+  if (typeof v === "number" || typeof v === "boolean" || typeof v === "bigint") return String(v);
+  try {
+    return JSON.stringify(v);
+  } catch {
+    return String(v);
+  }
+}
+
+function QueryAnalyticsToolRender({
+  args,
+  result,
+  isRunning,
+}: {
+  args: { query?: string },
+  result: unknown,
+  isRunning: boolean,
+}) {
+  const [open, setOpen] = useState(false);
+  const query = (args.query ?? "").trim();
+  const parsedResult = isQueryAnalyticsResult(result) ? result : undefined;
+
+  const previewLine = useMemo(() => {
+    const line = firstNonEmptyLine(query);
+    return line.length > 0 ? line : "(pending)";
+  }, [query]);
+
+  const label = isRunning
+    ? "Inspecting analytics"
+    : parsedResult?.success === false
+      ? "Query failed"
+      : "Inspected analytics";
+
+  const isError = parsedResult?.success === false;
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className={cn(
+          "group w-full flex items-center gap-3 rounded-lg py-2 pl-2.5 pr-2 text-left",
+          "bg-foreground/[0.015] hover:bg-foreground/[0.035]",
+          "ring-1 ring-foreground/[0.05] hover:ring-foreground/[0.09]",
+          "transition-colors",
+          isError && "ring-red-500/20 hover:ring-red-500/30 bg-red-500/[0.02]",
+        )}
+        aria-label="View query details"
+      >
+        {/* Icon bubble — the single visual indicator that this is a "thinking" step */}
+        <div
+          className={cn(
+            "size-6 shrink-0 rounded-md flex items-center justify-center",
+            isError
+              ? "bg-red-500/10 text-red-500/80"
+              : "bg-foreground/[0.05] text-muted-foreground",
+          )}
+        >
+          {isRunning ? (
+            <span
+              className="size-1.5 rounded-full bg-current"
+              style={{ animation: "pulse 1.2s ease-in-out infinite" }}
+            />
+          ) : isError ? (
+            <WarningIcon className="size-3.5" weight="fill" />
+          ) : (
+            <MagnifyingGlassIcon className="size-3.5" />
+          )}
+        </div>
+
+        {/* Label + SQL preview */}
+        <div className="flex-1 min-w-0">
+          <div className="text-[10px] uppercase tracking-[0.08em] text-muted-foreground/70 font-medium">
+            {label}
+          </div>
+          <code className="block text-xs font-mono text-foreground/75 truncate">
+            {previewLine}
+          </code>
+        </div>
+
+        {/* Trailing status chip */}
+        {!isRunning && parsedResult?.success && (
+          <span className="shrink-0 text-[10px] font-medium text-muted-foreground/80 whitespace-nowrap bg-foreground/[0.05] rounded-md px-1.5 py-0.5">
+            {parsedResult.rowCount} {parsedResult.rowCount === 1 ? "row" : "rows"}
+            {parsedResult.truncated ? " +" : ""}
+          </span>
+        )}
+        {!isRunning && isError && (
+          <span className="shrink-0 text-[10px] font-medium text-red-500/90 whitespace-nowrap bg-red-500/[0.1] rounded-md px-1.5 py-0.5">
+            error
+          </span>
+        )}
+      </button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>Analytics query</DialogTitle>
+            <DialogDescription>
+              {isRunning
+                ? "Running against the project's ClickHouse database…"
+                : parsedResult?.success
+                  ? parsedResult.truncationNote
+                    ?? `${parsedResult.rowCount} ${parsedResult.rowCount === 1 ? "row" : "rows"} returned`
+                  : isError
+                    ? "The query did not complete successfully."
+                    : "Query details"}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogBody>
+            <CodeBlock
+              language="sql"
+              content={query || "-- Waiting for the model to emit a query…"}
+              title="query.sql"
+              icon="code"
+              maxHeight={240}
+            />
+
+            {parsedResult?.success && parsedResult.result.length > 0 && (
+              <div className="mt-4 rounded-lg ring-1 ring-foreground/[0.06] overflow-hidden">
+                <div className="max-h-[320px] overflow-auto">
+                  <table className="w-full text-xs font-mono">
+                    <thead className="bg-foreground/[0.03] sticky top-0">
+                      <tr>
+                        {Object.keys(parsedResult.result[0]).map((key) => (
+                          <th
+                            key={key}
+                            className="text-left px-3 py-2 font-medium text-muted-foreground/80 border-b border-foreground/[0.05] whitespace-nowrap"
+                          >
+                            {key}
+                          </th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {parsedResult.result.map((row, i) => (
+                        <tr key={i} className="odd:bg-foreground/[0.012]">
+                          {Object.keys(parsedResult.result[0]).map((key) => (
+                            <td
+                              key={key}
+                              className="px-3 py-1.5 text-foreground/80 border-b border-foreground/[0.04] max-w-[260px] truncate"
+                              title={formatCell(row[key])}
+                            >
+                              {formatCell(row[key])}
+                            </td>
+                          ))}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            )}
+
+            {parsedResult?.success && parsedResult.result.length === 0 && (
+              <div className="mt-4 rounded-lg py-6 text-center text-xs text-muted-foreground/70 bg-foreground/[0.015] ring-1 ring-foreground/[0.04]">
+                Query returned no rows.
+              </div>
+            )}
+
+            {isError && (
+              <div className="mt-4 rounded-lg px-3 py-3 text-xs bg-red-500/[0.05] ring-1 ring-red-500/20 text-red-500/90 font-mono whitespace-pre-wrap break-words">
+                {parsedResult.error}
+              </div>
+            )}
+          </DialogBody>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
+const QueryAnalyticsToolUI = makeAssistantToolUI<
+  { query?: string },
+  QueryAnalyticsResult
+>({
+  toolName: "queryAnalytics",
+  render: (props) => (
+    <QueryAnalyticsToolRender
+      args={props.args}
+      result={props.result}
+      isRunning={props.status.type === "running"}
+    />
+  ),
 });
 
 type DashboardToolUIProps = {
@@ -65,5 +360,10 @@ export const DashboardToolUI = ({ setCurrentCode, currentCode }: DashboardToolUI
     }
   }, [currentCode]);
 
-  return <ToolUI />;
+  return (
+    <>
+      <ToolUI />
+      <QueryAnalyticsToolUI />
+    </>
+  );
 };
diff --git a/apps/dashboard/src/components/vibe-coding/index.ts b/apps/dashboard/src/components/vibe-coding/index.ts
index 64093b619d..445a3b856b 100644
--- a/apps/dashboard/src/components/vibe-coding/index.ts
+++ b/apps/dashboard/src/components/vibe-coding/index.ts
@@ -1,4 +1,4 @@
-export { default as AssistantChat } from './assistant-chat';
+export { default as AssistantChat, type AssistantComposerApi } from './assistant-chat';
 export { createChatAdapter, createDashboardChatAdapter, createHistoryAdapter } from './chat-adapters';
 export { default as CodeEditor } from './code-editor';
 export { default as VibeCodeLayout, type ViewportMode, type WysiwygDebugInfo } from './vibe-code-layout';
diff --git a/apps/dashboard/src/lib/ai-dashboard/shared-prompt.ts b/apps/dashboard/src/lib/ai-dashboard/shared-prompt.ts
index 67ca812d1f..d008d628d4 100644
--- a/apps/dashboard/src/lib/ai-dashboard/shared-prompt.ts
+++ b/apps/dashboard/src/lib/ai-dashboard/shared-prompt.ts
@@ -161,23 +161,34 @@ export async function buildDashboardMessages(
 
   const contextMessages: Array<{ role: string, content: string }> = [];
 
+  const dashboardUiDocsHeader = [
+    "DashboardUI component documentation (READ THIS BEFORE USING ANY COMPONENT):",
+    "",
+    "The block below is not just TypeScript types — each component carries a JSDoc block",
+    "with its mental model, canonical pattern, prop rules, runnable examples, and common",
+    "mistakes. Before you write code against DataGrid, AnalyticsChart, DesignMetricCard,",
+    "DesignCard, DesignBadge, DesignButton, or any other DashboardUI.* component, read the",
+    "JSDoc on that specific component in the block below. The JSDoc is load-bearing — the",
+    "bare type signatures are NOT enough to use the components correctly.",
+  ].join("\n");
+
   if (currentSource != null && currentSource.length > 0) {
     contextMessages.push({
       role: "user",
-      content: `Here is the current dashboard source code:\n\`\`\`tsx\n${currentSource}\n\`\`\`\n\nHere are the type definitions:\n${typeDefinitions}\n\nHere are the dashboard UI component types:\n${BUNDLED_DASHBOARD_UI_TYPES}${availableRoutes}`,
+      content: `Here is the current dashboard source code:\n\`\`\`tsx\n${currentSource}\n\`\`\`\n\nHere are the type definitions:\n${typeDefinitions}\n\n${dashboardUiDocsHeader}\n${BUNDLED_DASHBOARD_UI_TYPES}${availableRoutes}`,
     });
     contextMessages.push({
       role: "assistant",
-      content: "I understand the current dashboard code, type definitions, available UI components, and available routes. What changes would you like to make?",
+      content: "I understand the current dashboard code, type definitions, and available routes. I've also read the JSDoc on every DashboardUI component I plan to use and will follow each component's canonical pattern. What changes would you like to make?",
     });
   } else {
     contextMessages.push({
       role: "user",
-      content: `Here are the type definitions for the Stack SDK:\n${typeDefinitions}\n\nHere are the dashboard UI component types:\n${BUNDLED_DASHBOARD_UI_TYPES}${availableRoutes}`,
+      content: `Here are the type definitions for the Stack SDK:\n${typeDefinitions}\n\n${dashboardUiDocsHeader}\n${BUNDLED_DASHBOARD_UI_TYPES}${availableRoutes}`,
     });
     contextMessages.push({
       role: "assistant",
-      content: "I have the type definitions, available UI components, and available routes. What dashboard would you like me to create?",
+      content: "I have the type definitions and available routes. I've also read the JSDoc on every DashboardUI component I plan to use and will follow each component's canonical pattern. What dashboard would you like me to create?",
     });
   }
 
diff --git a/apps/dashboard/src/lib/stack-app-internals.ts b/apps/dashboard/src/lib/stack-app-internals.ts
index 1afd120686..75e314e463 100644
--- a/apps/dashboard/src/lib/stack-app-internals.ts
+++ b/apps/dashboard/src/lib/stack-app-internals.ts
@@ -1 +1,46 @@
+import {
+  type MetricsResponse,
+} from "@stackframe/stack-shared/dist/interface/admin-metrics";
+import { StackAssertionError } from "@stackframe/stack-shared/dist/utils/errors";
+
 export const stackAppInternalsSymbol = Symbol.for("StackAuth--DO-NOT-USE-OR-YOU-WILL-BE-FIRED--StackAppInternals");
+
+// Re-export the metrics response type tree from the shared package so dashboard
+// code can read these types without having to know where the schemas live.
+export type {
+  MetricsActivitySplit,
+  MetricsAnalyticsOverview,
+  MetricsAuthOverview,
+  MetricsDailyEmailStatusBreakdown,
+  MetricsDailyRevenuePoint,
+  MetricsDataPoint,
+  MetricsEmailOverview,
+  MetricsLoginMethodEntry,
+  MetricsPaymentsOverview,
+  MetricsRecentEmail,
+  MetricsResponse,
+  MetricsTopReferrer,
+  MetricsTopRegion,
+} from "@stackframe/stack-shared/dist/interface/admin-metrics";
+
+/**
+ * Pulls the typed `useMetrics` hook out of the admin app via the internals
+ * symbol. Throws as a programming error if the symbol is missing or malformed
+ * — this should never happen at runtime in a correctly-built admin app.
+ *
+ * Returns the typed `MetricsResponse` shape derived from the same yup schemas
+ * the backend route uses, so dashboard call sites do not need `as ...` casts.
+ */
+export function useMetricsOrThrow(adminApp: object, includeAnonymous: boolean): MetricsResponse {
+  const internals = Reflect.get(adminApp, stackAppInternalsSymbol);
+  if (typeof internals !== "object" || internals == null || !("useMetrics" in internals)) {
+    throw new StackAssertionError("Admin app internals are unavailable: missing useMetrics");
+  }
+
+  const useMetrics = internals.useMetrics;
+  if (typeof useMetrics !== "function") {
+    throw new StackAssertionError("Admin app internals are unavailable: useMetrics is not callable");
+  }
+
+  return useMetrics(includeAnonymous) as MetricsResponse;
+}
diff --git a/apps/dashboard/tailwind.config.ts b/apps/dashboard/tailwind.config.ts
index 4641bdf47e..748cd6be4d 100644
--- a/apps/dashboard/tailwind.config.ts
+++ b/apps/dashboard/tailwind.config.ts
@@ -6,6 +6,7 @@ const config = {
     './src/**/*.{ts,tsx}',
     "./node_modules/@stackframe/stack-ui/src/**/*.{ts,tsx}",
     "./node_modules/@stackframe/stack-shared/src/**/*.{ts,tsx}",
+    "./node_modules/@stackframe/dashboard-ui-components/src/**/*.{ts,tsx}",
 	],
   prefix: "",
   theme: {
diff --git a/apps/e2e/tests/backend/endpoints/api/v1/__snapshots__/internal-metrics.test.ts.snap b/apps/e2e/tests/backend/endpoints/api/v1/__snapshots__/internal-metrics.test.ts.snap
index d15eeba3fc..ea78adab31 100644
--- a/apps/e2e/tests/backend/endpoints/api/v1/__snapshots__/internal-metrics.test.ts.snap
+++ b/apps/e2e/tests/backend/endpoints/api/v1/__snapshots__/internal-metrics.test.ts.snap
@@ -4,6 +4,1572 @@ exports[`should return metrics data > metrics_result_no_users 1`] = `
 NiceResponse {
   "status": 200,
   "body": {
+    "analytics_overview": {
+      "avg_session_seconds": 0,
+      "daily_clicks": [
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+      ],
+      "daily_page_views": [
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+      ],
+      "daily_revenue": [
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+      ],
+      "daily_visitors": [
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+      ],
+      "online_live": 0,
+      "recent_replays": 0,
+      "revenue_per_visitor": 0,
+      "top_referrers": [],
+      "top_region": null,
+      "total_replays": 0,
+      "total_revenue_cents": 0,
+      "visitors": 0,
+    },
+    "auth_overview": {
+      "anonymous_users": 0,
+      "daily_active_teams_split": {
+        "new": [
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+        ],
+        "reactivated": [
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+        ],
+        "retained": [
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+        ],
+        "total": [
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+        ],
+      },
+      "daily_active_users_split": {
+        "new": [
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+        ],
+        "reactivated": [
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+        ],
+        "retained": [
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+        ],
+        "total": [
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+        ],
+      },
+      "mau": 0,
+      "total_teams": 0,
+      "total_users_filtered": 0,
+      "unverified_users": 0,
+      "verified_users": 0,
+    },
     "daily_active_users": [
       {
         "activity": 0,
@@ -251,25 +1817,2059 @@ NiceResponse {
         "activity": 0,
         "date": <stripped field 'date'>,
       },
-      {
-        "activity": 0,
-        "date": <stripped field 'date'>,
+      {
+        "activity": 0,
+        "date": <stripped field 'date'>,
+      },
+    ],
+    "email_overview": {
+      "bounce_rate": 0,
+      "click_rate": 0,
+      "daily_emails": [
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+      ],
+      "daily_emails_by_status": [
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+      ],
+      "deliverability_rate": 0,
+      "deliverability_status": {
+        "bounced": 0,
+        "delivered": 0,
+        "error": 0,
+        "in_progress": 0,
+      },
+      "emails_by_status": {},
+      "emails_sent": 0,
+      "recent_emails": [],
+      "total_emails": 0,
+    },
+    "login_methods": [],
+    "payments_overview": {
+      "active_subscription_count": 0,
+      "checkout_conversion_rate": 0,
+      "daily_subscriptions": [
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+      ],
+      "mrr_cents": 0,
+      "revenue_cents": 0,
+      "subscriptions_by_status": {},
+      "total_one_time_purchases": 0,
+      "total_orders": 0,
+    },
+    "recently_active": [],
+    "recently_registered": [],
+    "total_users": 0,
+    "users_by_country": {},
+  },
+  "headers": Headers { <some fields may have been hidden> },
+}
+`;
+
+exports[`should return metrics data with users > metrics_result_with_users 1`] = `
+NiceResponse {
+  "status": 200,
+  "body": {
+    "analytics_overview": {
+      "avg_session_seconds": 0,
+      "daily_clicks": [
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+      ],
+      "daily_page_views": [
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+      ],
+      "daily_revenue": [
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "new_cents": 0,
+          "refund_cents": 0,
+        },
+      ],
+      "daily_visitors": [
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+      ],
+      "online_live": 10,
+      "recent_replays": 0,
+      "revenue_per_visitor": 0,
+      "top_referrers": [],
+      "top_region": {
+        "count": 10,
+        "country_code": null,
+        "region_code": null,
+      },
+      "total_replays": 0,
+      "total_revenue_cents": 0,
+      "visitors": 0,
+    },
+    "auth_overview": {
+      "anonymous_users": 0,
+      "daily_active_teams_split": {
+        "new": [
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+        ],
+        "reactivated": [
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+        ],
+        "retained": [
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+        ],
+        "total": [
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+        ],
       },
-    ],
-    "login_methods": [],
-    "recently_active": [],
-    "recently_registered": [],
-    "total_users": 0,
-    "users_by_country": {},
-  },
-  "headers": Headers { <some fields may have been hidden> },
-}
-`;
-
-exports[`should return metrics data with users > metrics_result_with_users 1`] = `
-NiceResponse {
-  "status": 200,
-  "body": {
+      "daily_active_users_split": {
+        "new": [
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 9,
+            "date": <stripped field 'date'>,
+          },
+        ],
+        "reactivated": [
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 1,
+            "date": <stripped field 'date'>,
+          },
+        ],
+        "retained": [
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+        ],
+        "total": [
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 0,
+            "date": <stripped field 'date'>,
+          },
+          {
+            "activity": 10,
+            "date": <stripped field 'date'>,
+          },
+        ],
+      },
+      "mau": 10,
+      "total_teams": 0,
+      "total_users_filtered": 9,
+      "unverified_users": 0,
+      "verified_users": 9,
+    },
     "daily_active_users": [
       {
         "activity": 0,
@@ -522,12 +4122,567 @@ NiceResponse {
         "date": <stripped field 'date'>,
       },
     ],
+    "email_overview": {
+      "bounce_rate": 0,
+      "click_rate": 0,
+      "daily_emails": [
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 15,
+          "date": <stripped field 'date'>,
+        },
+      ],
+      "daily_emails_by_status": [
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 0,
+        },
+        {
+          "date": <stripped field 'date'>,
+          "error": 0,
+          "in_progress": 0,
+          "ok": 15,
+        },
+      ],
+      "deliverability_rate": 0,
+      "deliverability_status": {
+        "bounced": 0,
+        "delivered": 0,
+        "error": 0,
+        "in_progress": 0,
+      },
+      "emails_by_status": { "ok": 15 },
+      "emails_sent": 15,
+      "recent_emails": [
+        {
+          "created_at_millis": <stripped field 'created_at_millis'>,
+          "id": "<stripped UUID>",
+          "status": "SENT",
+          "subject": "Sign in to New Project: Your code is <stripped code>",
+        },
+        {
+          "created_at_millis": <stripped field 'created_at_millis'>,
+          "id": "<stripped UUID>",
+          "status": "SENT",
+          "subject": "Sign in to New Project: Your code is <stripped code>",
+        },
+        {
+          "created_at_millis": <stripped field 'created_at_millis'>,
+          "id": "<stripped UUID>",
+          "status": "SENT",
+          "subject": "Sign in to New Project: Your code is <stripped code>",
+        },
+        {
+          "created_at_millis": <stripped field 'created_at_millis'>,
+          "id": "<stripped UUID>",
+          "status": "SENT",
+          "subject": "Sign in to New Project: Your code is <stripped code>",
+        },
+        {
+          "created_at_millis": <stripped field 'created_at_millis'>,
+          "id": "<stripped UUID>",
+          "status": "SENT",
+          "subject": "Sign in to New Project: Your code is <stripped code>",
+        },
+        {
+          "created_at_millis": <stripped field 'created_at_millis'>,
+          "id": "<stripped UUID>",
+          "status": "SENT",
+          "subject": "Sign in to New Project: Your code is <stripped code>",
+        },
+        {
+          "created_at_millis": <stripped field 'created_at_millis'>,
+          "id": "<stripped UUID>",
+          "status": "SENT",
+          "subject": "Sign in to New Project: Your code is <stripped code>",
+        },
+        {
+          "created_at_millis": <stripped field 'created_at_millis'>,
+          "id": "<stripped UUID>",
+          "status": "SENT",
+          "subject": "Sign in to New Project: Your code is <stripped code>",
+        },
+        {
+          "created_at_millis": <stripped field 'created_at_millis'>,
+          "id": "<stripped UUID>",
+          "status": "SENT",
+          "subject": "Sign in to New Project: Your code is <stripped code>",
+        },
+        {
+          "created_at_millis": <stripped field 'created_at_millis'>,
+          "id": "<stripped UUID>",
+          "status": "SENT",
+          "subject": "Sign in to New Project: Your code is <stripped code>",
+        },
+        {
+          "created_at_millis": <stripped field 'created_at_millis'>,
+          "id": "<stripped UUID>",
+          "status": "SENT",
+          "subject": "Sign in to New Project: Your code is <stripped code>",
+        },
+        {
+          "created_at_millis": <stripped field 'created_at_millis'>,
+          "id": "<stripped UUID>",
+          "status": "SENT",
+          "subject": "Sign in to New Project: Your code is <stripped code>",
+        },
+        {
+          "created_at_millis": <stripped field 'created_at_millis'>,
+          "id": "<stripped UUID>",
+          "status": "SENT",
+          "subject": "Sign in to New Project: Your code is <stripped code>",
+        },
+        {
+          "created_at_millis": <stripped field 'created_at_millis'>,
+          "id": "<stripped UUID>",
+          "status": "SENT",
+          "subject": "Sign in to New Project: Your code is <stripped code>",
+        },
+        {
+          "created_at_millis": <stripped field 'created_at_millis'>,
+          "id": "<stripped UUID>",
+          "status": "SENT",
+          "subject": "Sign in to New Project: Your code is <stripped code>",
+        },
+      ],
+      "total_emails": 15,
+    },
     "login_methods": [
       {
         "count": 9,
         "method": "otp",
       },
     ],
+    "payments_overview": {
+      "active_subscription_count": 0,
+      "checkout_conversion_rate": 0,
+      "daily_subscriptions": [
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+        {
+          "activity": 0,
+          "date": <stripped field 'date'>,
+        },
+      ],
+      "mrr_cents": 0,
+      "revenue_cents": 0,
+      "subscriptions_by_status": {},
+      "total_one_time_purchases": 0,
+      "total_orders": 0,
+    },
     "recently_active": [
       {
         "auth_with_email": true,
@@ -871,6 +5026,142 @@ NiceResponse {
         "server_metadata": null,
         "signed_up_at_millis": <stripped field 'signed_up_at_millis'>,
       },
+      {
+        "auth_with_email": true,
+        "client_metadata": null,
+        "client_read_only_metadata": null,
+        "country_code": null,
+        "display_name": null,
+        "has_password": false,
+        "id": "<stripped UUID>",
+        "is_anonymous": false,
+        "is_restricted": false,
+        "last_active_at_millis": <stripped field 'last_active_at_millis'>,
+        "oauth_providers": [],
+        "otp_auth_enabled": true,
+        "passkey_auth_enabled": false,
+        "primary_email": "mailbox-4--<stripped UUID>@stack-generated.example.com",
+        "primary_email_auth_enabled": true,
+        "primary_email_verified": true,
+        "profile_image_url": null,
+        "requires_totp_mfa": false,
+        "restricted_by_admin": false,
+        "restricted_by_admin_private_details": null,
+        "restricted_by_admin_reason": null,
+        "restricted_reason": null,
+        "risk_scores": {
+          "sign_up": {
+            "bot": 0,
+            "free_trial_abuse": 0,
+          },
+        },
+        "selected_team": null,
+        "selected_team_id": null,
+        "server_metadata": null,
+        "signed_up_at_millis": <stripped field 'signed_up_at_millis'>,
+      },
+      {
+        "auth_with_email": true,
+        "client_metadata": null,
+        "client_read_only_metadata": null,
+        "country_code": null,
+        "display_name": null,
+        "has_password": false,
+        "id": "<stripped UUID>",
+        "is_anonymous": false,
+        "is_restricted": false,
+        "last_active_at_millis": <stripped field 'last_active_at_millis'>,
+        "oauth_providers": [],
+        "otp_auth_enabled": true,
+        "passkey_auth_enabled": false,
+        "primary_email": "mailbox-3--<stripped UUID>@stack-generated.example.com",
+        "primary_email_auth_enabled": true,
+        "primary_email_verified": true,
+        "profile_image_url": null,
+        "requires_totp_mfa": false,
+        "restricted_by_admin": false,
+        "restricted_by_admin_private_details": null,
+        "restricted_by_admin_reason": null,
+        "restricted_reason": null,
+        "risk_scores": {
+          "sign_up": {
+            "bot": 0,
+            "free_trial_abuse": 0,
+          },
+        },
+        "selected_team": null,
+        "selected_team_id": null,
+        "server_metadata": null,
+        "signed_up_at_millis": <stripped field 'signed_up_at_millis'>,
+      },
+      {
+        "auth_with_email": true,
+        "client_metadata": null,
+        "client_read_only_metadata": null,
+        "country_code": null,
+        "display_name": null,
+        "has_password": false,
+        "id": "<stripped UUID>",
+        "is_anonymous": false,
+        "is_restricted": false,
+        "last_active_at_millis": <stripped field 'last_active_at_millis'>,
+        "oauth_providers": [],
+        "otp_auth_enabled": true,
+        "passkey_auth_enabled": false,
+        "primary_email": "mailbox-2--<stripped UUID>@stack-generated.example.com",
+        "primary_email_auth_enabled": true,
+        "primary_email_verified": true,
+        "profile_image_url": null,
+        "requires_totp_mfa": false,
+        "restricted_by_admin": false,
+        "restricted_by_admin_private_details": null,
+        "restricted_by_admin_reason": null,
+        "restricted_reason": null,
+        "risk_scores": {
+          "sign_up": {
+            "bot": 0,
+            "free_trial_abuse": 0,
+          },
+        },
+        "selected_team": null,
+        "selected_team_id": null,
+        "server_metadata": null,
+        "signed_up_at_millis": <stripped field 'signed_up_at_millis'>,
+      },
+      {
+        "auth_with_email": true,
+        "client_metadata": null,
+        "client_read_only_metadata": null,
+        "country_code": "AQ",
+        "display_name": null,
+        "has_password": false,
+        "id": "<stripped UUID>",
+        "is_anonymous": false,
+        "is_restricted": false,
+        "last_active_at_millis": <stripped field 'last_active_at_millis'>,
+        "oauth_providers": [],
+        "otp_auth_enabled": true,
+        "passkey_auth_enabled": false,
+        "primary_email": "mailbox-1--<stripped UUID>@stack-generated.example.com",
+        "primary_email_auth_enabled": true,
+        "primary_email_verified": true,
+        "profile_image_url": null,
+        "requires_totp_mfa": false,
+        "restricted_by_admin": false,
+        "restricted_by_admin_private_details": null,
+        "restricted_by_admin_reason": null,
+        "restricted_reason": null,
+        "risk_scores": {
+          "sign_up": {
+            "bot": 0,
+            "free_trial_abuse": 0,
+          },
+        },
+        "selected_team": null,
+        "selected_team_id": null,
+        "server_metadata": null,
+        "signed_up_at_millis": <stripped field 'signed_up_at_millis'>,
+      },
     ],
     "total_users": 9,
     "users_by_country": {
diff --git a/apps/e2e/tests/backend/endpoints/api/v1/ai-query.test.ts b/apps/e2e/tests/backend/endpoints/api/v1/ai-query.test.ts
index f02c41ffcc..26a7969223 100644
--- a/apps/e2e/tests/backend/endpoints/api/v1/ai-query.test.ts
+++ b/apps/e2e/tests/backend/endpoints/api/v1/ai-query.test.ts
@@ -1,3 +1,4 @@
+import { MAX_IMAGE_BYTES_PER_FILE, MAX_IMAGES_PER_MESSAGE } from "@stackframe/stack-shared/dist/ai/image-limits";
 import { getEnvVariable } from "@stackframe/stack-shared/dist/utils/env";
 import { describe } from "vitest";
 import { it } from "../../../../helpers";
@@ -218,6 +219,59 @@ describe("AI Query Endpoint - Validation", () => {
     expect(response.body).toMatchObject({ code: "SCHEMA_ERROR", error: expect.stringContaining("messages") });
   });
 
+  it("rejects user messages with too many image attachments", async ({ expect }) => {
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "smart",
+        speed: "fast",
+        tools: [],
+        systemPrompt: "command-center-ask-ai",
+        messages: [
+          {
+            role: "user",
+            content: new Array(MAX_IMAGES_PER_MESSAGE + 1).fill(null).map(() => ({
+              type: "image",
+              image: "data:image/png;base64,AA==",
+            })),
+          },
+        ],
+      },
+    });
+
+    expect(response.status).toBe(400);
+    expect(response.body).toEqual(expect.stringContaining(`Maximum ${MAX_IMAGES_PER_MESSAGE} images per message.`));
+  });
+
+  it("rejects user messages with oversized image attachments", async ({ expect }) => {
+    const oversizedBase64 = "A".repeat(Math.ceil(((MAX_IMAGE_BYTES_PER_FILE + 1) * 4) / 3));
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "smart",
+        speed: "fast",
+        tools: [],
+        systemPrompt: "command-center-ask-ai",
+        messages: [
+          {
+            role: "user",
+            content: [
+              {
+                type: "image",
+                image: `data:image/png;base64,${oversizedBase64}`,
+              },
+            ],
+          },
+        ],
+      },
+    });
+
+    expect(response.status).toBe(400);
+    expect(response.body).toEqual(expect.stringContaining("Image exceeds"));
+  });
+
 });
 
 describeWithAi("AI Query Endpoint - Authentication", () => {
diff --git a/apps/e2e/tests/backend/endpoints/api/v1/internal-metrics.test.ts b/apps/e2e/tests/backend/endpoints/api/v1/internal-metrics.test.ts
index 33255ece04..59a0a7c08b 100644
--- a/apps/e2e/tests/backend/endpoints/api/v1/internal-metrics.test.ts
+++ b/apps/e2e/tests/backend/endpoints/api/v1/internal-metrics.test.ts
@@ -1,15 +1,73 @@
+import { randomUUID } from "node:crypto";
+import { deepPlainEquals } from "@stackframe/stack-shared/dist/utils/objects";
 import { wait } from "@stackframe/stack-shared/dist/utils/promises";
 import { expect } from "vitest";
 import { NiceResponse, it } from "../../../../helpers";
-import { Auth, InternalApiKey, Project, backendContext, createMailbox, niceBackendFetch } from "../../../backend-helpers";
+import { Auth, InternalApiKey, Project, Team, backendContext, createMailbox, niceBackendFetch } from "../../../backend-helpers";
+
+type MetricsUser = {
+  is_anonymous: boolean,
+};
+
+type LoginMethodMetric = {
+  count: number,
+};
+
+async function uploadAnalyticsEventBatch(options: {
+  sessionReplaySegmentId: string,
+  batchId: string,
+  sentAtMs: number,
+  events: { event_type: string, event_at_ms: number, data: unknown }[],
+}) {
+  return await niceBackendFetch("/api/v1/analytics/events/batch", {
+    method: "POST",
+    accessType: "client",
+    body: {
+      session_replay_segment_id: options.sessionReplaySegmentId,
+      batch_id: options.batchId,
+      sent_at_ms: options.sentAtMs,
+      events: options.events,
+    },
+  });
+}
 
 async function ensureAnonymousUsersAreStillExcluded(metricsResponse: NiceResponse) {
+  const baselineTotalUsers = metricsResponse.body.total_users as number;
+  const baselineUsersByCountry = metricsResponse.body.users_by_country as Record<string, number>;
+  const baselineRecentlyRegisteredIds = (metricsResponse.body.recently_registered as Array<{ id: string }>).map((user) => user.id);
+  const baselineRecentlyActiveIds = (metricsResponse.body.recently_active as Array<{ id: string }>).map((user) => user.id);
+
   for (let i = 0; i < 2; i++) {
     await Auth.Anonymous.signUp();
   }
-  await wait(2000); // the event log is async, so let's give it some time to be written to the DB
-  const response = await niceBackendFetch("/api/v1/internal/metrics", { accessType: 'admin' });
-  expect(response.body).toEqual(metricsResponse.body);
+
+  // ClickHouse ingestion is async; poll until anonymous users are excluded again.
+  let response!: NiceResponse;
+  for (let i = 0; i < 10; i++) {
+    await wait(2_000);
+    response = await niceBackendFetch("/api/v1/internal/metrics", { accessType: 'admin' });
+    const noAnonymousInRecentlyRegistered = (response.body.recently_registered as MetricsUser[]).every((user) => !user.is_anonymous);
+    const noAnonymousInRecentlyActive = (response.body.recently_active as MetricsUser[]).every((user) => !user.is_anonymous);
+    const currentRecentlyRegisteredIds = (response.body.recently_registered as Array<{ id: string }>).map((user) => user.id);
+    const currentRecentlyActiveIds = (response.body.recently_active as Array<{ id: string }>).map((user) => user.id);
+    if (
+      response.body.total_users === baselineTotalUsers &&
+      deepPlainEquals(response.body.users_by_country, baselineUsersByCountry) &&
+      noAnonymousInRecentlyRegistered &&
+      noAnonymousInRecentlyActive &&
+      deepPlainEquals(currentRecentlyRegisteredIds, baselineRecentlyRegisteredIds) &&
+      deepPlainEquals(currentRecentlyActiveIds, baselineRecentlyActiveIds)
+    ) {
+      return;
+    }
+  }
+
+  expect(response.body.total_users).toBe(baselineTotalUsers);
+  expect(response.body.users_by_country).toEqual(baselineUsersByCountry);
+  expect((response.body.recently_registered as MetricsUser[]).every((user) => !user.is_anonymous)).toBe(true);
+  expect((response.body.recently_active as MetricsUser[]).every((user) => !user.is_anonymous)).toBe(true);
+  expect((response.body.recently_registered as Array<{ id: string }>).map((user) => user.id)).toEqual(baselineRecentlyRegisteredIds);
+  expect((response.body.recently_active as Array<{ id: string }>).map((user) => user.id)).toEqual(baselineRecentlyActiveIds);
 }
 
 async function waitForMetricsToIncludeUsersByCountry(options: { countryCode: string, expectedCount: number }): Promise<NiceResponse> {
@@ -24,6 +82,47 @@ async function waitForMetricsToIncludeUsersByCountry(options: { countryCode: str
   return response;
 }
 
+async function waitForMetricsMatch(
+  includeAnonymous: boolean,
+  predicate: (response: NiceResponse) => boolean,
+): Promise<NiceResponse> {
+  let response!: NiceResponse;
+  const suffix = includeAnonymous ? "?include_anonymous=true" : "";
+  for (let i = 0; i < 20; i++) {
+    response = await niceBackendFetch(`/api/v1/internal/metrics${suffix}`, { accessType: 'admin' });
+    if (predicate(response)) {
+      return response;
+    }
+    await wait(1_000);
+  }
+  return response;
+}
+
+async function waitForAnalyticsRowsForSessionReplaySegment(
+  sessionReplaySegmentId: string,
+  expectedCount: number,
+): Promise<void> {
+  for (let i = 0; i < 30; i++) {
+    const response = await niceBackendFetch("/api/v1/internal/analytics/query", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        query: `
+          SELECT count() AS count
+          FROM events
+          WHERE session_replay_segment_id = {segId:String}
+        `,
+        params: { segId: sessionReplaySegmentId },
+      },
+    });
+    if (response.status === 200 && Number(response.body.result?.[0]?.count ?? 0) >= expectedCount) {
+      return;
+    }
+    await wait(500);
+  }
+  throw new Error(`Timed out waiting for ${expectedCount} analytics rows for session replay segment ${sessionReplaySegmentId}`);
+}
+
 it("should return metrics data", async ({ expect }) => {
   await Project.createAndSwitch({
     config: {
@@ -137,11 +236,20 @@ it("should exclude anonymous users from metrics", async ({ expect }) => {
     await Auth.Anonymous.signUp();
   }
 
-  // the event log is async, so let's give it some time to be written to the DB
+  // Poll until the core metrics (which exclude anonymous users) stabilize.
+  // We can't compare the entire body because auth_overview.anonymous_users
+  // will have changed.
   let result!: NiceResponse;
-  for (let i = 0; i < 5; i++) {
+  for (let i = 0; i < 10; i++) {
     result = await niceBackendFetch("/api/v1/internal/metrics", { accessType: 'admin' });
-    if (JSON.stringify(result.body) === JSON.stringify(beforeMetrics.body)) {
+    if (
+      result.body.total_users === beforeMetrics.body.total_users &&
+      deepPlainEquals(result.body.users_by_country, beforeMetrics.body.users_by_country) &&
+      deepPlainEquals(
+        (result.body.recently_registered as Array<{ id: string }>).map((u: { id: string }) => u.id),
+        (beforeMetrics.body.recently_registered as Array<{ id: string }>).map((u: { id: string }) => u.id),
+      )
+    ) {
       break;
     }
     await wait(2_000);
@@ -152,10 +260,10 @@ it("should exclude anonymous users from metrics", async ({ expect }) => {
 
   // Verify anonymous users don't appear in recently_registered
   expect(result.body.recently_registered.length).toBe(1);
-  expect(result.body.recently_registered.every((user: any) => !user.is_anonymous)).toBe(true);
+  expect(result.body.recently_registered.every((user: MetricsUser) => !user.is_anonymous)).toBe(true);
 
   // Verify anonymous users don't appear in recently_active
-  expect(result.body.recently_active.every((user: any) => !user.is_anonymous)).toBe(true);
+  expect(result.body.recently_active.every((user: MetricsUser) => !user.is_anonymous)).toBe(true);
 
   // Verify anonymous users aren't counted in daily_users
   const lastDayUsers = result.body.daily_users[result.body.daily_users.length - 1];
@@ -165,6 +273,8 @@ it("should exclude anonymous users from metrics", async ({ expect }) => {
   expect(result.body.users_by_country["US"]).toBe(1);
 
   await ensureAnonymousUsersAreStillExcluded(result);
+}, {
+  timeout: 120_000,
 });
 
 it("should handle anonymous users with activity correctly", async ({ expect }) => {
@@ -205,6 +315,8 @@ it("should handle anonymous users with activity correctly", async ({ expect }) =
   expect(response.body.users_by_country["US"]).toBeUndefined();
 
   await ensureAnonymousUsersAreStillExcluded(response);
+}, {
+  timeout: 120_000,
 });
 
 it("should handle mixed auth methods excluding anonymous users", async ({ expect }) => {
@@ -243,8 +355,239 @@ it("should handle mixed auth methods excluding anonymous users", async ({ expect
 
   // Login methods should only count regular users' methods
   const loginMethods = response.body.login_methods;
-  const totalMethodCount = loginMethods.reduce((sum: number, method: any) => sum + method.count, 0);
+  const totalMethodCount = loginMethods.reduce((sum: number, method: LoginMethodMetric) => sum + method.count, 0);
   expect(totalMethodCount).toBe(2); // 1 OTP + 1 password, no anonymous
 
   await ensureAnonymousUsersAreStillExcluded(response);
+}, {
+  timeout: 120_000,
+});
+
+it("should return cross-product aggregates in the metrics response", async ({ expect }) => {
+  await Project.createAndSwitch({
+    config: {
+      magic_link_enabled: true,
+    }
+  });
+
+  await wait(2000);
+
+  const response = await niceBackendFetch("/api/v1/internal/metrics", { accessType: 'admin' });
+  expect(response.status).toBe(200);
+
+  // Core auth fields must always be present
+  expect(response.body).toHaveProperty('total_users');
+  expect(response.body).toHaveProperty('daily_users');
+  expect(response.body).toHaveProperty('daily_active_users');
+  expect(response.body).toHaveProperty('login_methods');
+
+  // Extended aggregate groups must always be present (even for sparse projects)
+  expect(response.body).toHaveProperty('auth_overview');
+  expect(response.body).toHaveProperty('payments_overview');
+  expect(response.body).toHaveProperty('email_overview');
+  expect(response.body).toHaveProperty('analytics_overview');
+
+  // Auth overview shape
+  const authOverview = response.body.auth_overview;
+  expect(typeof authOverview.verified_users).toBe('number');
+  expect(typeof authOverview.unverified_users).toBe('number');
+  expect(typeof authOverview.anonymous_users).toBe('number');
+  expect(typeof authOverview.total_teams).toBe('number');
+  // MAU field introduced for analytics chart widget
+  expect(typeof authOverview.mau).toBe('number');
+
+  // Payments overview shape
+  const paymentsOverview = response.body.payments_overview;
+  expect(typeof paymentsOverview.subscriptions_by_status).toBe('object');
+  expect(typeof paymentsOverview.active_subscription_count).toBe('number');
+  expect(typeof paymentsOverview.total_one_time_purchases).toBe('number');
+  expect(Array.isArray(paymentsOverview.daily_subscriptions)).toBe(true);
+
+  // Email overview shape
+  const emailOverview = response.body.email_overview;
+  expect(typeof emailOverview.emails_by_status).toBe('object');
+  expect(typeof emailOverview.total_emails).toBe('number');
+  expect(Array.isArray(emailOverview.daily_emails)).toBe(true);
+
+  // Analytics overview shape (may have empty arrays for sparse projects)
+  const analyticsOverview = response.body.analytics_overview;
+  expect(Array.isArray(analyticsOverview.daily_page_views)).toBe(true);
+  expect(Array.isArray(analyticsOverview.daily_clicks)).toBe(true);
+  expect(typeof analyticsOverview.total_replays).toBe('number');
+  expect(typeof analyticsOverview.recent_replays).toBe('number');
+  // Fields used by visitors/revenue hover charts
+  expect(Array.isArray(analyticsOverview.daily_visitors)).toBe(true);
+  expect(Array.isArray(analyticsOverview.daily_revenue)).toBe(true);
+  expect(typeof analyticsOverview.visitors).toBe('number');
+  expect(Array.isArray(analyticsOverview.top_referrers)).toBe(true);
+});
+
+it("should return correct auth_overview breakdown including teams", async ({ expect }) => {
+  await Project.createAndSwitch({
+    config: {
+      magic_link_enabled: true,
+    }
+  });
+  await Team.create();
+
+  await InternalApiKey.createAndSetProjectKeys();
+
+  // Create a verified user
+  const verifiedMailbox = createMailbox();
+  backendContext.set({ mailbox: verifiedMailbox });
+  await Auth.Otp.signIn();
+
+  // Create an anonymous user
+  await Auth.Anonymous.signUp();
+
+  await wait(2000);
+
+  const response = await niceBackendFetch("/api/v1/internal/metrics", { accessType: 'admin' });
+  expect(response.status).toBe(200);
+
+  const authOverview = response.body.auth_overview;
+
+  // Total = 1 regular (verified by OTP/magic-link) + 1 anonymous
+  // anonymous_users count should be 1
+  expect(authOverview.anonymous_users).toBeGreaterThanOrEqual(1);
+
+  // verified + unverified should match non-anonymous total
+  const nonAnonFromOverview = authOverview.verified_users + authOverview.unverified_users;
+  expect(nonAnonFromOverview).toBeGreaterThanOrEqual(1);
+  expect(authOverview.total_teams).toBeGreaterThanOrEqual(1);
+});
+
+it("should count top referrers by unique visitors and exclude anonymous analytics by default", async ({ expect }) => {
+  await Project.createAndSwitch({
+    config: {
+      magic_link_enabled: true,
+    }
+  });
+  await Project.updateConfig({
+    "apps.installed.analytics": { enabled: true },
+  });
+
+  await InternalApiKey.createAndSetProjectKeys();
+
+  backendContext.set({
+    mailbox: createMailbox(),
+    ipData: {
+      country: "US",
+      ipAddress: "127.0.0.11",
+      city: "New York",
+      region: "NY",
+      latitude: 40.7128,
+      longitude: -74.0060,
+      tzIdentifier: "America/New_York",
+    },
+  });
+  await Auth.Otp.signIn();
+
+  const regularSessionReplaySegmentId = randomUUID();
+  const regularNow = Date.now();
+  const regularReferrer = "https://regular.example/source";
+  const regularBatchResponse = await uploadAnalyticsEventBatch({
+    sessionReplaySegmentId: regularSessionReplaySegmentId,
+    batchId: randomUUID(),
+    sentAtMs: regularNow,
+    events: [
+      {
+        event_type: "$page-view",
+        event_at_ms: regularNow - 200,
+        data: {
+          url: "https://stack-auth.example/regular-1",
+          path: "/regular-1",
+          referrer: regularReferrer,
+          title: "Regular Page 1",
+          entry_type: "initial",
+          viewport_width: 1920,
+          viewport_height: 1080,
+          screen_width: 1920,
+          screen_height: 1080,
+        },
+      },
+      {
+        event_type: "$page-view",
+        event_at_ms: regularNow - 100,
+        data: {
+          url: "https://stack-auth.example/regular-2",
+          path: "/regular-2",
+          referrer: regularReferrer,
+          title: "Regular Page 2",
+          entry_type: "push",
+          viewport_width: 1920,
+          viewport_height: 1080,
+          screen_width: 1920,
+          screen_height: 1080,
+        },
+      },
+    ],
+  });
+  expect(regularBatchResponse.status).toBe(200);
+  await waitForAnalyticsRowsForSessionReplaySegment(regularSessionReplaySegmentId, 2);
+
+  backendContext.set({
+    ipData: {
+      country: "CA",
+      ipAddress: "127.0.0.12",
+      city: "Toronto",
+      region: "ON",
+      latitude: 43.6532,
+      longitude: -79.3832,
+      tzIdentifier: "America/Toronto",
+    },
+  });
+  await Auth.Anonymous.signUp();
+
+  const anonymousSessionReplaySegmentId = randomUUID();
+  const anonymousNow = Date.now();
+  const anonymousReferrer = "https://anonymous.example/source";
+  const anonymousBatchResponse = await uploadAnalyticsEventBatch({
+    sessionReplaySegmentId: anonymousSessionReplaySegmentId,
+    batchId: randomUUID(),
+    sentAtMs: anonymousNow,
+    events: [
+      {
+        event_type: "$page-view",
+        event_at_ms: anonymousNow - 100,
+        data: {
+          url: "https://stack-auth.example/anonymous-1",
+          path: "/anonymous-1",
+          referrer: anonymousReferrer,
+          title: "Anonymous Page 1",
+          entry_type: "initial",
+          viewport_width: 1920,
+          viewport_height: 1080,
+          screen_width: 1920,
+          screen_height: 1080,
+        },
+      },
+    ],
+  });
+  expect(anonymousBatchResponse.status).toBe(200);
+  await waitForAnalyticsRowsForSessionReplaySegment(anonymousSessionReplaySegmentId, 1);
+
+  const metricsWithoutAnonymous = await waitForMetricsMatch(false, (response) => {
+    const topReferrers = response.body.analytics_overview.top_referrers as Array<{ referrer: string, visitors: number }>;
+    return response.body.analytics_overview.online_live === 1
+      && topReferrers.some((item) => item.referrer === regularReferrer && item.visitors === 1)
+      && !topReferrers.some((item) => item.referrer === anonymousReferrer);
+  });
+  const topReferrersWithoutAnonymous = metricsWithoutAnonymous.body.analytics_overview.top_referrers as Array<{ referrer: string, visitors: number }>;
+  expect(topReferrersWithoutAnonymous).toContainEqual({ referrer: regularReferrer, visitors: 1 });
+  expect(topReferrersWithoutAnonymous.some((item) => item.referrer === anonymousReferrer)).toBe(false);
+  expect(metricsWithoutAnonymous.body.analytics_overview.online_live).toBe(1);
+
+  const metricsWithAnonymous = await waitForMetricsMatch(true, (response) => {
+    const topReferrers = response.body.analytics_overview.top_referrers as Array<{ referrer: string, visitors: number }>;
+    return response.body.analytics_overview.online_live === 2
+      && topReferrers.some((item) => item.referrer === regularReferrer && item.visitors === 1)
+      && topReferrers.some((item) => item.referrer === anonymousReferrer && item.visitors === 1);
+  });
+  const topReferrersWithAnonymous = metricsWithAnonymous.body.analytics_overview.top_referrers as Array<{ referrer: string, visitors: number }>;
+  expect(topReferrersWithAnonymous).toContainEqual({ referrer: regularReferrer, visitors: 1 });
+  expect(topReferrersWithAnonymous).toContainEqual({ referrer: anonymousReferrer, visitors: 1 });
+  expect(metricsWithAnonymous.body.analytics_overview.online_live).toBe(2);
+}, {
+  timeout: 120_000,
 });
diff --git a/apps/e2e/tests/backend/endpoints/api/v1/team-invitations.test.ts b/apps/e2e/tests/backend/endpoints/api/v1/team-invitations.test.ts
index 97b791f5e5..c908757518 100644
--- a/apps/e2e/tests/backend/endpoints/api/v1/team-invitations.test.ts
+++ b/apps/e2e/tests/backend/endpoints/api/v1/team-invitations.test.ts
@@ -844,6 +844,8 @@ it("should allow a restricted user to accept invitation after verifying email",
     method: "GET",
   });
   expect(teamsResponse.body.items.find((item: any) => item.id === teamId)).toBeDefined();
+}, {
+  timeout: 120_000,
 });
 
 
diff --git a/claude/CLAUDE-KNOWLEDGE.md b/claude/CLAUDE-KNOWLEDGE.md
index 943980b48d..b9e5d08a14 100644
--- a/claude/CLAUDE-KNOWLEDGE.md
+++ b/claude/CLAUDE-KNOWLEDGE.md
@@ -3,6 +3,12 @@
 Q: How are the development ports derived now that NEXT_PUBLIC_STACK_PORT_PREFIX exists?
 A: Host ports use `${NEXT_PUBLIC_STACK_PORT_PREFIX:-81}` plus the two-digit suffix (e.g., Postgres is `${NEXT_PUBLIC_STACK_PORT_PREFIX:-81}28`, Inbucket SMTP `${NEXT_PUBLIC_STACK_PORT_PREFIX:-81}29`, POP3 `${NEXT_PUBLIC_STACK_PORT_PREFIX:-81}30`, and OTLP `${NEXT_PUBLIC_STACK_PORT_PREFIX:-81}31` by default).
 
+Q: How do you expand the internal metrics endpoint to include cross-product aggregates?
+A: Extend the existing `/api/v1/internal/metrics` route (in `apps/backend/src/app/api/latest/internal/metrics/route.tsx`) by adding new parallel async queries for each product domain. Add `auth_overview`, `payments_overview`, `email_overview`, and `analytics_overview` to the response schema and the handler, loaded via dedicated helper functions that use Prisma (for payments/emails/teams/users) and ClickHouse (for page views, clicks). New response fields must also be added to the shared yup schemas in `packages/stack-shared/src/interface/admin-metrics.ts` so the dashboard `useMetrics` hook (typed via `yup.InferType<typeof MetricsResponseBodySchema>`) automatically picks up the new shape with full type safety. Never widen `useMetrics` (or `getMetrics`) to `any` — the schemas are the single source of truth and dashboard call sites should never need `as ...` casts.
+
+Q: How can duplicate Recharts keys like `rectangle-25-10-0` appear on overview pages with multiple charts?
+A: Recharts can generate colliding internal SVG IDs/keys across chart instances when they share default ID generation paths. Set explicit unique IDs (or instance-unique IDs) on chart roots and avoid duplicated chart-def namespaces to prevent repeated internal keys and console errors.
+
 Q: How can I show helper text beneath metadata text areas in the dashboard?
 A: Use the shared `TextAreaField` component's `helperText` prop in `apps/dashboard/src/components/form-fields.tsx`; it now renders the helper content in a secondary Typography line under the textarea.
 
@@ -79,6 +85,51 @@ A: Run lint from `apps/dashboard` directly (for example `pnpm lint -- "src/app/(
 Q: How should unsubscribe-link e2e tests avoid breakage from email theme/layout changes?
 A: In `apps/e2e/tests/backend/endpoints/api/v1/unsubscribe-link.test.ts`, avoid snapshotting the entire rendered HTML for transactional emails; assert stable behavior instead (email content present and `/api/v1/emails/unsubscribe-link` absent) so cosmetic wrapper/style changes do not fail the test.
 
+Q: How can overview Recharts on the dashboard dim non-hovered data while keeping the active day emphasized?
+A: In `apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/line-chart.tsx`, track `hoveredIndex` from Recharts' `activeTooltipIndex` via chart `onMouseMove`/`onMouseLeave`, then use that index to lower non-hovered `Cell` opacity for bar charts and reduce line/area `strokeOpacity`/`fillOpacity` while relying on `activeDot` plus a stronger tooltip cursor to keep the hovered point visually focused.
+
+Q: How do you add a hover-to-swap chart interaction to the analytics chart widget with fade transitions?
+A: In `metrics-page.tsx`, maintain `chartMode` (the hover intent) and `displayMode` (the chart currently rendered) as separate states. On pill mouse-enter, set chartMode immediately, then use a 120ms timer to set displayMode and clear a `fadingOut` flag. Fade is achieved via CSS opacity transitions on the chart container. The pill component uses `onMouseEnter`/`onMouseLeave` rather than `onClick` so hovering is enough to swap. Clear the timer ref when a new mode is requested to avoid flicker during rapid transitions.
+
+Q: How do you add a MAU (monthly active users) metric sourced from ClickHouse to the backend metrics endpoint?
+A: Add a `loadMonthlyActiveUsers` function in `route.tsx` that runs `uniqExact(user_id)` over `$token-refresh` events in the last 30 days on `analytics_internal.events`. Wrap the ClickHouse call in try/catch and return 0 on error. Add the result to `loadAuthOverview`'s return as `mau`, and in the dev fallback block set `mau: totalUsers * 0.3` when `mau === 0` to ensure the dashboard is usable in development.
+
+Q: How should overview dashboard charts support both preset ranges and calendar-picked custom ranges?
+A: In `apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/line-chart.tsx`, expand `TimeRange` to include presets (`7d`, `14d`, `30d`, `90d`, `all`) plus `custom`, add a `CustomDateRange` type, and route all date-series filtering through shared helpers (`filterDatapointsByTimeRange` and `filterStackedDatapointsByTimeRange`) that accept the optional custom range. Then pass `customDateRange` through `TimeRangeToggle`, `TabbedMetricsCard`, and metrics-page data derivations so charts and range-dependent totals stay synchronized when the user changes either preset pills or the calendar range.
+
+Q: How should the overview custom date picker behave to avoid runtime errors when `custom` is selected?
+A: Keep custom-range interaction inside the `Custom` pill flow in `TimeRangeToggle` (no separate "Pick date range" action button), seed a default range when none exists before switching to `custom`, and make range filters tolerate a temporarily missing custom range by returning unfiltered data instead of throwing.
+
+Q: How can a custom date-range panel anchored to a pill toggle stay visually consistent with dashboard design standards?
+A: Use shadcn primitives (`Popover`, `PopoverAnchor`, `PopoverContent`, `Calendar`) and style the content as a glassmorphic control surface (`rounded-2xl`, subtle border/ring, backdrop blur, compact spacing rhythm, muted header text), with customized `Calendar` classNames for range states so selection/readability stay balanced in dark mode.
+
+Q: How should overview charts parse `YYYY-MM-DD` analytics dates without shifting a day in some timezones?
+A: In `apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/line-chart.tsx`, do not use `new Date("YYYY-MM-DD")` for chart labels/tooltips because browsers interpret date-only strings as UTC. Parse those keys into local dates with `new Date(year, month - 1, day)` via a shared helper (for example `parseChartDate`) before formatting or weekend checks.
+
+Q: How should the overview custom date picker prevent invalid future selections?
+A: Normalize picker dates to local midnight and pass `disabled={{ after: latestSelectableDate }}` to the dashboard `Calendar` so users cannot select dates after today, while keeping the default seeded custom range capped at today as well.
+
+Q: How should overview dashboard rows handle fixed chart heights across breakpoints?
+A: In `apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/metrics-page.tsx`, only apply fixed row heights like `h-[340px]` at the desktop layout breakpoint (`lg:`). When a two-column chart row collapses to one column, wrap each card in a `min-h-[340px]` container so stacked charts keep a usable height instead of being squeezed into the old shared row height.
+
+Q: How do we add Daily Active Users into the analytics chart modes while keeping the lower card focused on sign-ups?
+A: In `metrics-page.tsx`, keep DAU split data as `StackedDataPoint[]`, pass a time-filtered version to `AnalyticsChartWidget` as the first in-card mode, and aggregate DAU totals into the shared `composedData` points as a `dau` field so `ComposedAnalyticsChart` can render a third line. Then remove `stackedChartData` from the lower `TabbedMetricsCard` so that card displays plain Daily Sign-Ups behavior while DAU remains in the analytics chart widget.
+
+Q: Why can tuple corner radii on Recharts `Cell` fail TypeScript checks even though they work at runtime?
+A: In dashboard charts, `Cell` props are typed broadly from SVG attributes (`radius` as `string | number`), but Recharts bar rectangles accept tuple radii like `[4, 4, 0, 0]`. For stacked bars that need per-cell top-corner rounding, keep tuple `radius` on `Cell` and document it with `@ts-expect-error` at the specific line.
+
+Q: How can overview "recent" tabs support infinite lazy loading without adding new endpoints?
+A: Return a larger bounded page from `/api/v1/internal/metrics` (for example 100 recent sign-ups/emails), then implement client-side incremental rendering in the tab list views using an `IntersectionObserver` sentinel inside the scroll container (batching e.g. 12 items at a time). This gives infinite-scroll UX while keeping backend changes minimal.
+
+Q: How can the Top Referrers card on overview support infinite lazy loading?
+A: In `metrics-page.tsx`, make the referrers list container scrollable (`min-h-0 overflow-y-auto`) and append rows incrementally via an `IntersectionObserver` sentinel (e.g. 12 rows per batch). In `internal/metrics/route.tsx`, raise the ClickHouse referrer query limit (e.g. `TOP_REFERRERS_PAGE_SIZE = 100`) so the UI has enough rows to lazy-load.
+
+Q: Where does the shared glassmorphic chart-card shell live after the design-component refactor?
+A: In `apps/dashboard/src/components/design-components/analytics-card.tsx`. It exports `DesignAnalyticsCard` (the glass card with Recharts tooltip escape), `DesignAnalyticsCardHeader` (compact header row with divider), `DesignChartLegend` (dot+label legend strip), `useInfiniteListWindow` (IntersectionObserver-based incremental list hook), and `DesignInfiniteScrollList` (a scroll container that drives `useInfiniteListWindow`). The page-local `ChartCard` wrapper in `line-chart.tsx` and all `GlassCard` clones in emails/email-drafts/email-themes pages were replaced with `DesignAnalyticsCard`.
+
+Q: How do you fix "RefObject<HTMLDivElement | null> is not assignable to LegacyRef<HTMLDivElement>" TS errors when using useRef with JSX in React 19?
+A: In React 19 with TypeScript 5.x, `useRef<T>(null)` returns `RefObject<T | null>`, but JSX `ref` props still expect `RefObject<T>`. Cast the result: `const ref = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>`. Then inside effects, cast `.current` back to `T | null` when doing null checks to avoid triggering `@typescript-eslint/no-unnecessary-condition`.
+
 Q: How do cross-domain auth handoffs avoid creating extra refresh-token sessions?
 A: The cross-domain authorize route must carry the current `refreshTokenId` through authorization-code exchange and OAuth token issuance must reuse that ID. Keep `afterCallbackRedirectUrl` URL-only and persist refresh-token linkage in `ProjectUserAuthorizationCode.grantedRefreshTokenId`; then return that as `user.refreshTokenId` in `getAuthorizationCode` so token issuance can reuse the same refresh-token row with ownership checks.
 
@@ -184,6 +235,12 @@ A: `getCustomPagePrompts` now takes no arguments and returns all prompts directl
 Q: Which port suffixes are assigned to the two local docs sites?
 A: `docs` (old docs app) uses suffix `26`, and `docs-mintlify` uses suffix `04`. Keep these in sync across `docs/package.json`, `docs-mintlify/package.json`, `apps/dev-launchpad/public/index.html`, and `apps/dashboard/.env.development` (`NEXT_PUBLIC_STACK_DOCS_BASE_URL` points to old docs on `26`).
 
+Q: Do analytics `$page-view` / `$click` rows in ClickHouse carry `is_anonymous` today?
+A: Not by default. The client event tracker in `packages/template/src/lib/stack-app/apps/implementations/event-tracker.ts` sends page-view and click payloads without `is_anonymous`, and `apps/backend/src/app/api/latest/analytics/events/batch/route.tsx` currently inserts `event.data` unchanged into `analytics_internal.events`. Any metrics code that wants anonymous filtering for page-view/click events must either enrich those rows at ingestion time or do a time-correct join against another source.
+
+Q: What does the current overview revenue logic count?
+A: The overview metrics queries in `apps/backend/src/app/api/latest/internal/metrics/route.tsx` currently derive `daily_revenue`, `payments_overview.revenue_cents`, `payments_overview.mrr_cents`, and `analytics_overview.total_revenue_cents` from `SubscriptionInvoice.amountTotal` only. `OneTimePurchase` rows do not have an `amountTotal` column in the Prisma schema, so one-time-purchase-only projects will show zero revenue unless that amount is derived from the stored product/price snapshot and added separately.
+
 Q: Why did the dashboard Vercel integration throw "Expected publishableClientKey" during key generation?
 A: In `apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/vercel/page-client.tsx`, the code always asserted `newKey.publishableClientKey` even when `project.requirePublishableClientKey` was false. Fix by only asserting/passing `publishableClientKey` when that project config flag is true.
 
diff --git a/packages/dashboard-ui-components/package.json b/packages/dashboard-ui-components/package.json
index a22b6c1290..6f5d89b306 100644
--- a/packages/dashboard-ui-components/package.json
+++ b/packages/dashboard-ui-components/package.json
@@ -57,6 +57,7 @@
     "@react-hook/resize-observer": "^2.0.2",
     "@stackframe/stack-shared": "workspace:*",
     "@stackframe/stack-ui": "workspace:*",
+    "@tanstack/react-virtual": "^3.13.0",
     "class-variance-authority": "^0.7.0"
   },
   "devDependencies": {
diff --git a/packages/dashboard-ui-components/src/components/analytics-chart/analytics-chart-pie.tsx b/packages/dashboard-ui-components/src/components/analytics-chart/analytics-chart-pie.tsx
new file mode 100644
index 0000000000..1dc9d807f1
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/analytics-chart/analytics-chart-pie.tsx
@@ -0,0 +1,331 @@
+import { MagnifyingGlassMinusIcon } from "@phosphor-icons/react";
+import { cn } from "@stackframe/stack-ui";
+import { type DesignChartConfig, DesignChartContainer } from "../chart-container";
+import { type CSSProperties, type Ref, useMemo } from "react";
+import { Cell, Pie, PieChart } from "recharts";
+import { TrendPill } from "./default-analytics-chart-tooltip";
+import { formatDelta } from "./format";
+import type { AnalyticsChartStrings } from "./strings";
+import {
+  cssIdent,
+  type AnalyticsChartPieProps,
+  type AnalyticsChartSeries,
+  type FormatKind,
+  type Point,
+} from "./types";
+
+type SegmentColors = {
+  primary: { light: string[], dark: string[] },
+  compare: { light: string[], dark: string[] },
+};
+
+type AnalyticsChartPieBodyProps = {
+  wrapperRef: Ref<HTMLDivElement>,
+  primarySegmentSeries: readonly AnalyticsChartSeries[],
+  compareSegmentSeries: readonly AnalyticsChartSeries[],
+  aggregatedPrimarySegments: number[],
+  aggregatedCompareSegments: number[],
+  aggregatedPrimaryTotal: number,
+  aggregatedCompareTotal: number,
+  segmentColors: SegmentColors,
+  showPrimary: boolean,
+  showCompare: boolean,
+  xFormatKind: FormatKind,
+  yFormatKind: FormatKind,
+  hoverKey: string | null,
+  setHoverKey: (k: string | null) => void,
+  zoomRange: [number, number] | null,
+  onResetZoom: () => void,
+  visibleStart: number,
+  visibleEnd: number,
+  fullData: Point[],
+  strings: AnalyticsChartStrings,
+  fmtValue: (value: number, kind: FormatKind) => string,
+  pie: AnalyticsChartPieProps | undefined,
+};
+
+const DEFAULT_PIE_CLASSNAME = "aspect-square h-[220px] w-[220px] sm:h-[240px] sm:w-[240px]";
+
+export function AnalyticsChartPie({
+  wrapperRef,
+  primarySegmentSeries,
+  compareSegmentSeries,
+  aggregatedPrimarySegments,
+  aggregatedCompareSegments,
+  aggregatedPrimaryTotal,
+  aggregatedCompareTotal,
+  segmentColors,
+  showPrimary,
+  showCompare,
+  xFormatKind,
+  yFormatKind,
+  hoverKey,
+  setHoverKey,
+  zoomRange,
+  onResetZoom,
+  visibleStart,
+  visibleEnd,
+  fullData,
+  strings,
+  fmtValue,
+  pie,
+}: AnalyticsChartPieBodyProps) {
+  const innerRadius = pie?.innerRadius ?? 60;
+  const outerRadius = pie?.outerRadius ?? 84;
+  const compareInnerRadius = pie?.compareInnerRadius ?? 36;
+  const compareOuterRadius = pie?.compareOuterRadius ?? 52;
+  const containerClassName = pie?.className ?? DEFAULT_PIE_CLASSNAME;
+
+  const canonicalSeries = primarySegmentSeries.length > 0
+    ? primarySegmentSeries
+    : compareSegmentSeries;
+  const usePrimaryForCanonical = primarySegmentSeries.length > 0;
+
+  const compareValueByKey = useMemo(() => {
+    const m = new Map<string, number>();
+    compareSegmentSeries.forEach((s, sIdx) => {
+      m.set(s.key, aggregatedCompareSegments[sIdx] ?? 0);
+    });
+    return m;
+  }, [compareSegmentSeries, aggregatedCompareSegments]);
+  const primaryValueByKey = useMemo(() => {
+    const m = new Map<string, number>();
+    primarySegmentSeries.forEach((s, sIdx) => {
+      m.set(s.key, aggregatedPrimarySegments[sIdx] ?? 0);
+    });
+    return m;
+  }, [primarySegmentSeries, aggregatedPrimarySegments]);
+
+  const canonicalTotal = usePrimaryForCanonical
+    ? aggregatedPrimaryTotal
+    : aggregatedCompareTotal;
+
+  const legendRows = useMemo(
+    () =>
+      canonicalSeries
+        .map((s, sIdx) => {
+          const value = usePrimaryForCanonical
+            ? (aggregatedPrimarySegments[sIdx] ?? 0)
+            : (aggregatedCompareSegments[sIdx] ?? 0);
+          const prevValue = usePrimaryForCanonical
+            ? (compareValueByKey.get(s.key) ?? 0)
+            : (primaryValueByKey.get(s.key) ?? 0);
+          return {
+            key: s.key,
+            label: s.label,
+            sIdx,
+            value,
+            prevValue,
+            pct: canonicalTotal > 0 ? value / canonicalTotal : 0,
+            fill: segmentColors.primary.light[sIdx],
+            fillDark: segmentColors.primary.dark[sIdx],
+            fillCompare: segmentColors.compare.light[sIdx],
+            fillCompareDark: segmentColors.compare.dark[sIdx],
+          };
+        })
+        .sort((a, b) => b.value - a.value),
+    [
+      canonicalSeries,
+      usePrimaryForCanonical,
+      aggregatedPrimarySegments,
+      aggregatedCompareSegments,
+      compareValueByKey,
+      primaryValueByKey,
+      canonicalTotal,
+      segmentColors,
+    ],
+  );
+
+  const chartConfig = useMemo<DesignChartConfig>(() => {
+    const config: DesignChartConfig = {};
+    canonicalSeries.forEach((s, sIdx) => {
+      config[cssIdent(s.key)] = {
+        label: s.label,
+        theme: {
+          light: segmentColors.primary.light[sIdx],
+          dark: segmentColors.primary.dark[sIdx],
+        },
+      };
+      config[`compare-${cssIdent(s.key)}`] = {
+        label: s.label,
+        theme: {
+          light: segmentColors.compare.light[sIdx],
+          dark: segmentColors.compare.dark[sIdx],
+        },
+      };
+    });
+    return config;
+  }, [canonicalSeries, segmentColors]);
+
+  const activeRow = hoverKey
+    ? legendRows.find((r) => r.key === hoverKey) ?? null
+    : null;
+  const activeDelta = activeRow
+    ? formatDelta(activeRow.value, activeRow.prevValue)
+    : formatDelta(aggregatedPrimaryTotal, aggregatedCompareTotal);
+
+  const windowDays = visibleEnd - visibleStart + 1;
+  const startLabel = fmtValue(fullData[visibleStart]!.ts, xFormatKind);
+  const endLabel = fmtValue(fullData[visibleEnd]!.ts, xFormatKind);
+
+  const outerData = legendRows.map((r) => ({ name: cssIdent(r.key), hoverKey: r.key, value: r.value, fill: r.fill }));
+  const innerData = legendRows.map((r) => ({ name: cssIdent(r.key), hoverKey: r.key, value: r.prevValue, fill: r.fillCompare }));
+  const activeIdx = hoverKey ? legendRows.findIndex((r) => r.key === hoverKey) : -1;
+
+  return (
+    <div
+      ref={wrapperRef}
+      className="relative w-full select-none"
+      onClick={(e) => e.stopPropagation()}
+    >
+      {zoomRange && (
+        <div className="absolute right-2 top-2 z-20">
+          <button
+            type="button"
+            onClick={onResetZoom}
+            className="inline-flex items-center gap-1.5 rounded-full bg-blue-500/10 px-2.5 py-1 font-mono text-[10px] font-semibold uppercase tracking-wider text-blue-600 ring-1 ring-blue-500/30 transition-colors duration-150 hover:bg-blue-500/15 hover:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 dark:text-blue-300 dark:ring-blue-400/30"
+          >
+            <MagnifyingGlassMinusIcon weight="bold" className="size-3" aria-hidden="true" />
+            <span>{strings.resetZoom}</span>
+          </button>
+        </div>
+      )}
+
+      <div className="flex min-h-[260px] flex-col items-center gap-6 sm:min-h-[320px] sm:flex-row sm:items-center sm:justify-center sm:gap-10">
+        <div className="flex shrink-0 flex-col items-center gap-3">
+          <div className="relative">
+            <DesignChartContainer config={chartConfig} className={containerClassName}>
+              <PieChart
+                role="img"
+                aria-label={strings.pieAriaLabel({
+                  segmentCount: canonicalSeries.length,
+                  windowDays,
+                })}
+              >
+                {showPrimary && (
+                  <Pie
+                    data={outerData}
+                    dataKey="value"
+                    nameKey="name"
+                    cx="50%"
+                    cy="50%"
+                    innerRadius={innerRadius}
+                    outerRadius={outerRadius}
+                    paddingAngle={1}
+                    startAngle={90}
+                    endAngle={-270}
+                    isAnimationActive={false}
+                    stroke="none"
+                  >
+                    {outerData.map((d, i) => {
+                      const inactive = activeIdx >= 0 && activeIdx !== i;
+                      return (
+                        <Cell
+                          key={`outer-${d.name}`}
+                          fill={`var(--color-${d.name})`}
+                          opacity={inactive ? 0.22 : 1}
+                          onMouseEnter={() => setHoverKey(d.hoverKey)}
+                          onMouseLeave={() => setHoverKey(null)}
+                        />
+                      );
+                    })}
+                  </Pie>
+                )}
+                {showCompare && (
+                  <Pie
+                    data={innerData}
+                    dataKey="value"
+                    nameKey="name"
+                    cx="50%"
+                    cy="50%"
+                    innerRadius={compareInnerRadius}
+                    outerRadius={compareOuterRadius}
+                    paddingAngle={1}
+                    startAngle={90}
+                    endAngle={-270}
+                    isAnimationActive={false}
+                    stroke="none"
+                  >
+                    {innerData.map((d, i) => {
+                      const inactive = activeIdx >= 0 && activeIdx !== i;
+                      return (
+                        <Cell
+                          key={`inner-${d.name}`}
+                          fill={`var(--color-compare-${d.name})`}
+                          opacity={inactive ? 0.22 : 0.95}
+                          onMouseEnter={() => setHoverKey(d.hoverKey)}
+                          onMouseLeave={() => setHoverKey(null)}
+                        />
+                      );
+                    })}
+                  </Pie>
+                )}
+              </PieChart>
+            </DesignChartContainer>
+
+            <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center">
+              <span className="block max-w-[68px] truncate font-mono text-[9px] uppercase tracking-wider text-muted-foreground">
+                {activeRow ? activeRow.label : strings.pieTotalCenter}
+              </span>
+              <span className="mt-0.5 block max-w-[72px] truncate font-mono text-xl font-semibold leading-none tabular-nums text-foreground">
+                {fmtValue(activeRow ? activeRow.value : canonicalTotal, yFormatKind)}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2 text-center">
+            <span className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground/80">
+              {startLabel} – {endLabel}
+            </span>
+            {showCompare && (
+              <TrendPill delta={activeDelta} size="sm" label={strings.pieVsPrev} />
+            )}
+          </div>
+        </div>
+
+        <ul className="flex w-full max-w-[380px] flex-col gap-1">
+          {legendRows.map((r) => {
+            const isActive = hoverKey === r.key;
+            const dimmed = hoverKey != null && !isActive;
+            const rowDelta = formatDelta(r.value, r.prevValue);
+            return (
+              <li key={r.key}>
+                <button
+                  type="button"
+                  onMouseEnter={() => setHoverKey(r.key)}
+                  onMouseLeave={() => setHoverKey(null)}
+                  onFocus={() => setHoverKey(r.key)}
+                  onBlur={() => setHoverKey(null)}
+                  className={cn(
+                    "flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-left transition-[background-color,opacity] duration-150 hover:bg-foreground/[0.04] hover:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/20",
+                    isActive && "bg-foreground/[0.05]",
+                    dimmed && "opacity-50",
+                  )}
+                >
+                  <span
+                    className="size-2.5 shrink-0 rounded-[3px] bg-[var(--c-l)] dark:bg-[var(--c-d)]"
+                    style={{ "--c-l": r.fill, "--c-d": r.fillDark } as CSSProperties}
+                  />
+                  <span className="min-w-0 flex-1 truncate text-[12px] font-medium text-foreground">
+                    {r.label}
+                  </span>
+                  <span className="shrink-0 font-mono text-[11px] tabular-nums text-muted-foreground">
+                    {(r.pct * 100).toFixed(1)}%
+                  </span>
+                  <span className="shrink-0 min-w-[48px] text-right font-mono text-[11px] font-semibold tabular-nums text-foreground">
+                    {fmtValue(r.value, yFormatKind)}
+                  </span>
+                  {showCompare && (
+                    <span className="shrink-0">
+                      <TrendPill delta={rowDelta} size="sm" />
+                    </span>
+                  )}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/dashboard-ui-components/src/components/analytics-chart/analytics-chart.tsx b/packages/dashboard-ui-components/src/components/analytics-chart/analytics-chart.tsx
new file mode 100644
index 0000000000..21aabec778
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/analytics-chart/analytics-chart.tsx
@@ -0,0 +1,1585 @@
+"use client";
+
+import { cn } from "@stackframe/stack-ui";
+import { DesignButton } from "../button";
+import {
+  type DesignChartConfig,
+  DesignChartContainer,
+} from "../chart-container";
+import {
+  CartesianGrid,
+  ComposedChart,
+  ReferenceArea,
+  ReferenceLine,
+  XAxis,
+  YAxis,
+} from "recharts";
+import {
+  FlagIcon,
+  MagnifyingGlassMinusIcon,
+  MagnifyingGlassPlusIcon,
+  XIcon,
+} from "@phosphor-icons/react";
+import {
+  type CSSProperties,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { AnalyticsChartPie } from "./analytics-chart-pie";
+import {
+  DefaultAnalyticsChartTooltip,
+  type AnalyticsChartTooltipContext,
+  type AnalyticsChartTooltipLayerView,
+  type AnalyticsChartTooltipSegmentRow,
+} from "./default-analytics-chart-tooltip";
+import { formatDelta, formatValue } from "./format";
+import {
+  buildRampColors,
+  resolveAnalyticsChartPalette,
+} from "./palette";
+import { renderDataSeries } from "./render-data-series";
+import {
+  computeLocalInProgressIdx,
+  EMPTY_MATRIX,
+  EMPTY_SERIES,
+  findAnnotationsLayer,
+  findCompareLayer,
+  findPrimaryLayer,
+  isAnalyticsChartDataLayer,
+  isTimeseriesState,
+  resolveDataLayerStyle,
+  STROKE_DASHARRAY,
+  type ResolvedDataLayerStyle,
+} from "./state";
+import { resolveAnalyticsChartStrings } from "./strings";
+import type {
+  AnalyticsChartDelta,
+  AnalyticsChartPalette,
+  AnalyticsChartPieProps,
+  AnalyticsChartSeries,
+  AnalyticsChartState,
+  AnalyticsChartTimeseriesState,
+  Annotation,
+  FormatKind,
+  Point,
+} from "./types";
+import { cssIdent, pointValue } from "./types";
+import type { AnalyticsChartStrings } from "./strings";
+
+/** Mirrors Recharts' internal `Margin` shape (not exported from their typings). */
+export type Margin = {
+  top?: number,
+  right?: number,
+  bottom?: number,
+  left?: number,
+};
+
+/**
+ * Props for {@link AnalyticsChart}.
+ *
+ * ## HOW TO REFERENCE THIS COMPONENT
+ *
+ * **In the custom dashboard sandbox** (AI-generated dashboard code): every
+ * export lives on the global `DashboardUI` object. Use
+ * `DashboardUI.AnalyticsChart`, `DashboardUI.ANALYTICS_CHART_DEFAULT_STATE`,
+ * `DashboardUI.pointValue`, etc. **Never** use bare identifiers like
+ * `<AnalyticsChart />` inside the sandbox — there is no module system and
+ * nothing is destructured into scope. Types (`AnalyticsChartState`,
+ * `Point`, …) don't exist at runtime anyway, so just drop the type
+ * annotations in sandbox code.
+ *
+ * **In a regular TypeScript app** (anywhere importing `@stackframe/dashboard-ui-components`
+ * directly): `import { AnalyticsChart, ANALYTICS_CHART_DEFAULT_STATE } from
+ * "@stackframe/dashboard-ui-components"` and use the bare name. Drop the
+ * `DashboardUI.` prefix from the examples below when doing so.
+ *
+ * ## Data shape in 30 seconds
+ *
+ * - `data` is `Point[]`. Each `Point` is `{ ts: number, values: Record<string, number> }`.
+ *   `ts` is a Unix millisecond timestamp; `values` is keyed by **layer id**.
+ * - `state` is fully controlled. Start from
+ *   `DashboardUI.ANALYTICS_CHART_DEFAULT_STATE` (which ships with a
+ *   `"primary"` + `"compare"` + `"annotations"` layer set) and override
+ *   what you need. Do **not** hand-build the layer array from scratch.
+ * - For a breakdown (e.g. signups by region), add `segments` (a `number[][]`
+ *   with one row per `data` point) and `segmentSeries` (the category labels)
+ *   to the primary layer. Rows of `segments` should sum to the point's layer
+ *   value. Same for the compare layer if you want a compared breakdown.
+ *
+ * ## **SCALE YOUR DATA BEFORE PUTTING IT ON A POINT** (critical)
+ *
+ * The chart renders every visible layer on a **single shared y-axis**. If
+ * two layers are on different orders of magnitude (e.g. revenue in cents
+ * `1_200_000` and sign-ups `450`), the smaller series collapses to a flat
+ * line at the bottom and the chart looks broken. You **must** normalize
+ * both metrics into the same range before building `data`. Rules of thumb:
+ *
+ * - **Cents → dollars / units**: divide money amounts by 100 (or 1000 for
+ *   large currencies). Use a `valueFormatter` to render the original unit
+ *   in tooltips so the UX still reads as "$12,543".
+ * - **Counts vs rates**: if one layer is a count (e.g. requests) and the
+ *   other is a ratio (e.g. error rate 0.02), multiply the ratio by the
+ *   count's scale (or by `max(counts)`) so both sit in the same band.
+ * - **Very different counts** (e.g. page views `120_000` vs sign-ups `430`):
+ *   either divide the large metric (`views / 100`) or promote the small
+ *   one to a rate (`signups / views * 1000`). Note the transformation in
+ *   the layer `label` ("Sign-ups per 1k views") so it's honest.
+ * - **Pick the target range from the layer with the most natural scale**
+ *   — usually the metric the user actually cares about — and normalize
+ *   everything else into it. Don't normalize by fighting Recharts with
+ *   `yDomain` hacks; do it in the data.
+ *
+ * If the two metrics truly can't share an axis (e.g. latency ms vs error
+ * count), render them as **two separate `AnalyticsChart` instances** stacked
+ * in the layout instead of jamming them into one chart.
+ *
+ * ## Example 1 — simplest possible: one area layer, no compare
+ *
+ * ```jsx
+ * // Sandbox dashboard code — everything prefixed with DashboardUI.*
+ * function Dashboard() {
+ *   const data = [
+ *     { ts: Date.UTC(2026, 2, 1), values: { primary: 420 } },
+ *     { ts: Date.UTC(2026, 2, 2), values: { primary: 512 } },
+ *     { ts: Date.UTC(2026, 2, 3), values: { primary: 604 } },
+ *     // ...one row per time bucket
+ *   ];
+ *
+ *   // Start from defaults, hide the compare layer so it's a single series.
+ *   const [state, setState] = React.useState({
+ *     ...DashboardUI.ANALYTICS_CHART_DEFAULT_STATE,
+ *     layers: DashboardUI.ANALYTICS_CHART_DEFAULT_STATE.layers.map((l) =>
+ *       l.kind === "compare" ? { ...l, visible: false } : l,
+ *     ),
+ *   });
+ *
+ *   return (
+ *     <DashboardUI.DesignChartCard title="Sign-ups" description="Last 30 days">
+ *       <DashboardUI.AnalyticsChart
+ *         data={data}
+ *         state={state}
+ *         onChange={setState}
+ *       />
+ *     </DashboardUI.DesignChartCard>
+ *   );
+ * }
+ * ```
+ *
+ * ## Example 2 — current vs previous period (compare)
+ *
+ * Each point carries both layer values under their layer ids. The default
+ * state's `"primary"` and `"compare"` layers are already visible, so no
+ * state customization is needed.
+ *
+ * ```jsx
+ * function Dashboard() {
+ *   const data = rows.map((r) => ({
+ *     ts: r.bucketTs,
+ *     values: {
+ *       primary: r.signupsThisPeriod,   // keyed by layer id "primary"
+ *       compare: r.signupsLastPeriod,   // keyed by layer id "compare"
+ *     },
+ *   }));
+ *
+ *   const [state, setState] = React.useState(
+ *     DashboardUI.ANALYTICS_CHART_DEFAULT_STATE,
+ *   );
+ *
+ *   return (
+ *     <DashboardUI.AnalyticsChart
+ *       data={data}
+ *       state={state}
+ *       onChange={setState}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * ## Example 3 — stacked bar with region breakdown (segmented)
+ *
+ * ```jsx
+ * function Dashboard() {
+ *   const regions = [
+ *     { key: "us", label: "United States" },
+ *     { key: "eu", label: "European Union" },
+ *     { key: "asia", label: "Asia-Pacific" },
+ *   ];
+ *
+ *   // Row index matches `data` index; column index matches `regions`.
+ *   // Each row MUST sum to data[i].values.primary.
+ *   const segments = [
+ *     [210, 140,  70],  // day 0 → total 420
+ *     [250, 170,  92],  // day 1 → total 512
+ *     [300, 200, 104],  // day 2 → total 604
+ *   ];
+ *
+ *   const data = [
+ *     { ts: Date.UTC(2026, 2, 1), values: { primary: 420 } },
+ *     { ts: Date.UTC(2026, 2, 2), values: { primary: 512 } },
+ *     { ts: Date.UTC(2026, 2, 3), values: { primary: 604 } },
+ *   ];
+ *
+ *   const [state, setState] = React.useState({
+ *     ...DashboardUI.ANALYTICS_CHART_DEFAULT_STATE,
+ *     layers: DashboardUI.ANALYTICS_CHART_DEFAULT_STATE.layers.map((l) => {
+ *       if (l.kind === "primary") {
+ *         return {
+ *           ...l,
+ *           type: "bar",        // switch from area → stacked bars
+ *           segmented: true,
+ *           segments,
+ *           segmentSeries: regions,
+ *         };
+ *       }
+ *       if (l.kind === "compare") {
+ *         return { ...l, visible: false };
+ *       }
+ *       return l;
+ *     }),
+ *   });
+ *
+ *   return (
+ *     <DashboardUI.AnalyticsChart
+ *       data={data}
+ *       state={state}
+ *       onChange={setState}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * ## Example 4 — mixing display types (e.g. revenue bars + signups area)
+ *
+ * Use two layers. The "primary" layer holds one metric; reuse the "compare"
+ * layer slot for the second metric by overriding its `id`, `label`, and
+ * `type`. Then key both values in each `Point`.
+ *
+ * **IMPORTANT**: the two metrics share a single y-axis, so scale them into
+ * the same range before putting them on the point. A common trick is to
+ * pass a `valueFormatter` that reports each layer's number with its own
+ * unit so tooltips still read correctly.
+ *
+ * ```jsx
+ * function Dashboard() {
+ *   // Sign-ups are already in range; revenue cents would dwarf them, so
+ *   // we normalize revenue (cents → dollars) onto the same scale.
+ *   const data = rows.map((r) => ({
+ *     ts: r.bucketTs,
+ *     values: {
+ *       revenue: r.revenueCents / 100,
+ *       signups: r.signups,
+ *     },
+ *   }));
+ *
+ *   const [state, setState] = React.useState({
+ *     ...DashboardUI.ANALYTICS_CHART_DEFAULT_STATE,
+ *     layers: DashboardUI.ANALYTICS_CHART_DEFAULT_STATE.layers.map((l) => {
+ *       if (l.kind === "primary") {
+ *         return { ...l, id: "revenue", label: "Revenue", type: "bar" };
+ *       }
+ *       if (l.kind === "compare") {
+ *         return {
+ *           ...l,
+ *           id: "signups",
+ *           label: "Sign-ups",
+ *           type: "area",
+ *           visible: true,
+ *         };
+ *       }
+ *       return l;
+ *     }),
+ *   });
+ *
+ *   // Per-layer formatter: `kind` lets you branch per-axis vs per-layer
+ *   // using the layer id passed in via the tooltip context. For most
+ *   // cases formatting by raw value is enough.
+ *   const valueFormatter = (value, kind) => {
+ *     if (kind.type === "currency") return `$${value.toFixed(0)}`;
+ *     return value.toLocaleString();
+ *   };
+ *
+ *   return (
+ *     <DashboardUI.AnalyticsChart
+ *       data={data}
+ *       state={state}
+ *       onChange={setState}
+ *       valueFormatter={valueFormatter}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * ## Example 5 — segmented sign-ups stacked with a revenue line (mix + segment)
+ *
+ * Combines Example 3 and Example 4: primary layer is revenue as a line
+ * (un-segmented), compare layer is sign-ups as a stacked bar (segmented
+ * by region). Remember: row sums of the compare segments must equal
+ * `point.values.signups`, and both metrics share one y-axis.
+ *
+ * ```jsx
+ * function Dashboard() {
+ *   const regions = [
+ *     { key: "us", label: "United States" },
+ *     { key: "eu", label: "European Union" },
+ *     { key: "asia", label: "Asia-Pacific" },
+ *   ];
+ *
+ *   // Normalize revenue to the same order of magnitude as sign-ups.
+ *   const data = rows.map((r) => ({
+ *     ts: r.bucketTs,
+ *     values: {
+ *       revenue: r.revenueCents / 100,
+ *       signups: r.signupsTotal,
+ *     },
+ *   }));
+ *
+ *   // Row index matches `data` index. Each row sums to signupsTotal.
+ *   const signupSegments = rows.map((r) => [
+ *     r.signupsUs,
+ *     r.signupsEu,
+ *     r.signupsAsia,
+ *   ]);
+ *
+ *   const [state, setState] = React.useState({
+ *     ...DashboardUI.ANALYTICS_CHART_DEFAULT_STATE,
+ *     layers: DashboardUI.ANALYTICS_CHART_DEFAULT_STATE.layers.map((l) => {
+ *       if (l.kind === "primary") {
+ *         return { ...l, id: "revenue", label: "Revenue", type: "line" };
+ *       }
+ *       if (l.kind === "compare") {
+ *         return {
+ *           ...l,
+ *           id: "signups",
+ *           label: "Sign-ups",
+ *           type: "bar",
+ *           visible: true,
+ *           segmented: true,
+ *           segments: signupSegments,
+ *           segmentSeries: regions,
+ *         };
+ *       }
+ *       return l;
+ *     }),
+ *   });
+ *
+ *   return (
+ *     <DashboardUI.AnalyticsChart
+ *       data={data}
+ *       state={state}
+ *       onChange={setState}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export type AnalyticsChartProps = {
+  /** Time-series points — each point carries `values` keyed by layer id.
+   * See {@link AnalyticsChartProps} for full data-shape examples. */
+  data: Point[],
+  /** Annotations. Fully prop-driven; the consumer owns the array. */
+  annotations?: Annotation[],
+  /** Fully-controlled state + dispatch. The chart reads every config and
+   * persistent-interaction slice from `state` and mutates it through
+   * `onChange`. Ephemeral interaction state (hover, brush, pin, draft) is
+   * managed internally and surfaces only through the state callbacks. */
+  state: AnalyticsChartState,
+  onChange: React.Dispatch<React.SetStateAction<AnalyticsChartState>>,
+  /** Fired when the user submits the in-chart annotation form. The consumer
+   * is expected to append to its own annotations array. */
+  onAnnotationCreate?: (annotation: Annotation) => void,
+  /** Override any user-visible copy. Shallow-merges over the defaults. */
+  strings?: Partial<AnalyticsChartStrings>,
+  /** Override segment color ramps. Each ramp is either procedural
+   * (hue + sat + lightness range) or explicit (concrete color lists). */
+  palette?: Partial<AnalyticsChartPalette>,
+  /** Render slot for the tooltip body. Receives a prepared context with
+   * the active point, primary/compare layer views, pre-bound formatters,
+   * and resolved strings. Defaults to `DefaultAnalyticsChartTooltip`. */
+  renderTooltip?: (ctx: AnalyticsChartTooltipContext) => ReactNode,
+  /** Recharts plot margins. Also drives overlay positioning math so the
+   * crosshair, tooltip anchor, brush popup, and flag markers line up with
+   * the actual plot area. Defaults to `{ top: 16, right: 24, bottom: 8, left: 12 }`. */
+  plotMargin?: Margin,
+  /** Y-axis reserved width in pixels. Defaults to 48. */
+  yAxisWidth?: number,
+  /** Fractional headroom added to the y-axis top. Defaults to 0.1. */
+  yDomainPadding?: number,
+  /** Grouped pie configuration. Each field has a sensible default. */
+  pie?: AnalyticsChartPieProps,
+  /** Custom number formatter. Receives the raw value and the kind to format
+   * with — the same function is invoked for both x-axis and y-axis values. */
+  valueFormatter?: (value: number, kind: FormatKind) => string,
+};
+
+type RechartsMouseState = {
+  activeTooltipIndex?: number,
+  isTooltipActive?: boolean,
+};
+
+const FALLBACK_PRIMARY_STYLE: ResolvedDataLayerStyle = {
+  color: "#2563eb",
+  type: "area",
+  strokeStyle: "solid",
+  fillOpacity: 0,
+};
+const FALLBACK_COMPARE_STYLE: ResolvedDataLayerStyle = {
+  color: "#f59e0b",
+  type: "line",
+  strokeStyle: "dashed",
+  fillOpacity: 0,
+};
+const FALLBACK_ANNOTATION_COLOR = "#f59e0b";
+
+function buildTooltipLayerView(args: {
+  show: boolean,
+  layer: { id: string, label: string } | undefined,
+  color: string,
+  segmented: boolean,
+  segmentSeries: readonly AnalyticsChartSeries[],
+  segmentRows: readonly (readonly number[])[],
+  segmentTotals: readonly number[],
+  segmentColorsLight: readonly string[],
+  segmentColorsDark: readonly string[],
+  activeIndex: number,
+  activePoint: Point,
+  fallbackLabel?: string,
+}): AnalyticsChartTooltipLayerView | null {
+  const {
+    show,
+    layer,
+    color,
+    segmented,
+    segmentSeries,
+    segmentRows,
+    segmentTotals,
+    segmentColorsLight,
+    segmentColorsDark,
+    activeIndex,
+    activePoint,
+    fallbackLabel,
+  } = args;
+  if (!show || !layer) return null;
+  const segments: AnalyticsChartTooltipSegmentRow[] = segmented
+    ? segmentSeries.map((s, sIdx) => ({
+      key: s.key,
+      label: s.label,
+      value: segmentRows[activeIndex]?.[sIdx] ?? 0,
+      color: segmentColorsLight[sIdx],
+      colorDark: segmentColorsDark[sIdx],
+    }))
+    : [];
+  return {
+    id: layer.id,
+    label: layer.label || fallbackLabel || "",
+    color,
+    colorDark: color,
+    total: segmented
+      ? (segmentTotals[activeIndex] ?? 0)
+      : pointValue(activePoint, layer.id),
+    segmented,
+    segments,
+  };
+}
+
+/**
+ * Preferred chart for all time-series: area, line, bar, compare layers,
+ * segmented stacks, tooltips, zoom, and annotations. Wrap in
+ * `DesignChartCard` for the title/description chrome. Only fall back to
+ * raw Recharts for non-time-series visuals (static rankings etc.).
+ *
+ * ## Data shape
+ *
+ * `data` is `Point[]`, where `Point = { ts: number, values: Record<string, number> }`.
+ * `ts` is a Unix milliseconds timestamp. `values` maps layer id → numeric value
+ * at that bucket. Example:
+ *
+ * ```ts
+ * { ts: 1743465600000, values: { primary: 420 } }
+ * { ts: 1743465600000, values: { primary: 420, compare: 380 } }  // with compare layer
+ * ```
+ *
+ * ## State is fully controlled — start from ANALYTICS_CHART_DEFAULT_STATE
+ *
+ * The default state ships with three pre-configured layers: `"primary"`,
+ * `"compare"`, and `"annotations"`. ALWAYS spread from
+ * `ANALYTICS_CHART_DEFAULT_STATE` and map over `layers` to override. Do NOT
+ * hand-build the layer array from scratch — you will miss fields and crash.
+ *
+ * ```ts
+ * // Default state shape (for reference — spread from the constant, don't copy):
+ * {
+ *   view: "timeseries",
+ *   layers: [
+ *     { id: "primary", kind: "primary", label: "Current", visible: true, color: "#2563eb",
+ *       segmented: false, type: "area", strokeStyle: "solid", fillOpacity: 0.22, inProgressFromIndex: null },
+ *     { id: "compare", kind: "compare", label: "Previous period", visible: true, color: "#f59e0b",
+ *       segmented: false, type: "line", strokeStyle: "dashed", inProgressFromIndex: null },
+ *     { id: "annotations", kind: "annotations", label: "Annotations", visible: true, color: "#f59e0b" },
+ *   ],
+ *   xFormatKind: { type: "datetime", style: "short" },
+ *   yFormatKind: { type: "short" },
+ *   showGrid: true, showXAxis: true, showYAxis: true,
+ *   zoomRange: null, pinnedIndex: null,
+ * }
+ * ```
+ *
+ * ## onChange — CRITICAL, get this right
+ *
+ * `onChange` fires with an `AnalyticsChartState` object — NOT your custom
+ * wrapper. If you store chart data and state together, `onChange` MUST only
+ * update the state part. Keep data and state in SEPARATE hooks:
+ *
+ * ```tsx
+ * // WRONG — overwrites your data with a bare state object, crashes on next render:
+ * const [combined, setCombined] = React.useState({ data: [], state: ANALYTICS_CHART_DEFAULT_STATE });
+ * <AnalyticsChart data={combined.data} state={combined.state} onChange={setCombined} />
+ *
+ * // RIGHT — two hooks:
+ * const [data, setData] = React.useState([]);
+ * const [chartState, setChartState] = React.useState({ ...ANALYTICS_CHART_DEFAULT_STATE });
+ * <AnalyticsChart data={data} state={chartState} onChange={setChartState} />
+ * ```
+ *
+ * NEVER pass a setter that manages a combined `{ data, state }` object directly to `onChange`.
+ *
+ * ## Common patterns
+ *
+ * ### 1. Simplest — one area layer, no compare
+ *
+ * ```tsx
+ * const data = rows.map(r => ({ ts: r.bucketTs, values: { primary: r.count } }));
+ * const [state, setState] = React.useState({
+ *   ...ANALYTICS_CHART_DEFAULT_STATE,
+ *   layers: ANALYTICS_CHART_DEFAULT_STATE.layers.map(l =>
+ *     l.kind === "compare" ? { ...l, visible: false } : l
+ *   ),
+ * });
+ * <DesignChartCard title="Signups" description="Last 30 days">
+ *   <AnalyticsChart data={data} state={state} onChange={setState} />
+ * </DesignChartCard>
+ * ```
+ *
+ * ### 2. Current vs previous period (compare)
+ *
+ * ```tsx
+ * const data = rows.map(r => ({
+ *   ts: r.bucketTs,
+ *   values: { primary: r.thisPeriod, compare: r.lastPeriod },
+ * }));
+ * const [state, setState] = React.useState(ANALYTICS_CHART_DEFAULT_STATE);
+ * <AnalyticsChart data={data} state={state} onChange={setState} />
+ * ```
+ *
+ * ### 3. Stacked bar with breakdown (segmented)
+ *
+ * ```tsx
+ * const regions = [{ key: "us", label: "US" }, { key: "eu", label: "EU" }];
+ * const segments = rows.map(r => [r.signupsUs, r.signupsEu]); // MUST sum to primary value per row
+ * const [state, setState] = React.useState({
+ *   ...ANALYTICS_CHART_DEFAULT_STATE,
+ *   layers: ANALYTICS_CHART_DEFAULT_STATE.layers.map(l => {
+ *     if (l.kind === "primary") return { ...l, type: "bar", segmented: true, segments, segmentSeries: regions };
+ *     if (l.kind === "compare") return { ...l, visible: false };
+ *     return l;
+ *   }),
+ * });
+ * <AnalyticsChart data={data} state={state} onChange={setState} />
+ * ```
+ *
+ * ### 4. Two metrics on one chart (revenue bars + signups area)
+ *
+ * ```tsx
+ * // IMPORTANT: metrics share one y-axis, so normalize into the same range.
+ * const data = rows.map(r => ({
+ *   ts: r.bucketTs,
+ *   values: { revenue: r.revenueCents / 100, signups: r.signups },
+ * }));
+ * const [state, setState] = React.useState({
+ *   ...ANALYTICS_CHART_DEFAULT_STATE,
+ *   layers: ANALYTICS_CHART_DEFAULT_STATE.layers.map(l => {
+ *     if (l.kind === "primary") return { ...l, id: "revenue", label: "Revenue", type: "bar" };
+ *     if (l.kind === "compare") return { ...l, id: "signups", label: "Sign-ups", type: "area", visible: true };
+ *     return l;
+ *   }),
+ * });
+ * <AnalyticsChart data={data} state={state} onChange={setState} />
+ * ```
+ *
+ * ### 5. Pie view (distribution / breakdown, non-time-series)
+ *
+ * Pie needs one data point, `segments` with one row, and `segmentSeries` with labels:
+ *
+ * ```tsx
+ * const categories = [{ key: "verified", label: "Verified" }, { key: "unverified", label: "Unverified" }, { key: "anonymous", label: "Anonymous" }];
+ * const total = verified + unverified + anonymous;
+ * const data = [{ ts: 0, values: { primary: total } }];
+ * const segments = [[verified, unverified, anonymous]]; // one row; values sum to total
+ * const [state, setState] = React.useState({
+ *   ...ANALYTICS_CHART_DEFAULT_STATE,
+ *   view: "pie",
+ *   layers: ANALYTICS_CHART_DEFAULT_STATE.layers.map(l => {
+ *     if (l.kind === "primary") return { ...l, segmented: true, segments, segmentSeries: categories };
+ *     if (l.kind === "compare") return { ...l, visible: false };
+ *     return l;
+ *   }),
+ * });
+ * <AnalyticsChart data={data} state={state} onChange={setState} />
+ * ```
+ *
+ * ## Segment data contract (MUST follow when segmented: true)
+ *
+ * `segments` is a 2D array: `segments[dayIndex][categoryIndex] = number`.
+ *
+ * - Outer length MUST equal `data.length` (one row per Point).
+ * - Inner length MUST equal `segmentSeries.length` (one value per category).
+ * - Each row MUST sum to `data[dayIndex].values[layerId]` (the layer's total for that day).
+ * - `segmentSeries` defines the category labels, in the SAME order as segment columns.
+ *
+ * Example: if `segmentSeries = [{ key: "us", label: "US" }, { key: "eu", label: "EU" }]`
+ * and `data[0].values.primary = 420`, then `segments[0]` must be `[usValue, euValue]`
+ * where `usValue + euValue === 420`. If rows don't sum to the layer total, stacked bars
+ * will render incorrectly (gaps or overflow).
+ *
+ * ## Palette
+ *
+ * AnalyticsChart auto-generates segment colors (blue shades for primary, amber for
+ * compare). You do NOT need to pass a palette prop — it just works. Segment keys
+ * can be any string; the component sanitizes them for CSS purposes internally.
+ *
+ * ## Layer quick reference
+ *
+ * - Layer `type` options: `"area" | "line" | "bar"`
+ * - Layer `kind` values: `"primary" | "compare" | "annotations"`
+ * - To hide a layer: `{ ...l, visible: false }`
+ * - To switch chart type: `{ ...l, type: "bar" }` (or `"line"`, `"area"`)
+ * - To rename a layer: `{ ...l, id: "myMetric", label: "My Metric" }`
+ *
+ * ## Formatting (xFormatKind / yFormatKind on state)
+ *
+ * - `{ type: "numeric" }` — plain number
+ * - `{ type: "short" }` — abbreviated (1.2K, 3.4M) — good default for y-axis
+ * - `{ type: "currency", currency: "USD", divisor: 100 }` — for cents → dollars
+ * - `{ type: "percent", source: "fraction" }` — for 0..1 → "45.2%"
+ * - `{ type: "datetime", style: "short" }` — good default for x-axis timestamps
+ *
+ * Set these on state:
+ * `{ ...ANALYTICS_CHART_DEFAULT_STATE, yFormatKind: { type: "currency", currency: "USD" } }`
+ *
+ * ## Scale warning
+ *
+ * All visible layers share ONE y-axis. If magnitudes differ wildly (e.g. revenue
+ * cents vs signup count), normalize the data BEFORE building Points. If
+ * normalization is impossible, use two separate `AnalyticsChart` instances stacked
+ * vertically.
+ */
+export function AnalyticsChart({
+  data: fullData,
+  annotations: fullAnnotations = [],
+  state,
+  onChange,
+  onAnnotationCreate,
+  strings: stringsOverride,
+  palette: paletteOverride,
+  renderTooltip,
+  plotMargin,
+  yAxisWidth = 48,
+  yDomainPadding = 0.1,
+  pie,
+  valueFormatter,
+}: AnalyticsChartProps) {
+  const resolvedPlotMargin = useMemo<Required<Margin>>(
+    () => ({
+      top: plotMargin?.top ?? 16,
+      right: plotMargin?.right ?? 24,
+      bottom: plotMargin?.bottom ?? 8,
+      left: plotMargin?.left ?? 12,
+    }),
+    [plotMargin],
+  );
+  const fmtValue = valueFormatter ?? formatValue;
+  const strings = useMemo(
+    () => resolveAnalyticsChartStrings(stringsOverride),
+    [stringsOverride],
+  );
+  const palette = useMemo(
+    () => resolveAnalyticsChartPalette(paletteOverride),
+    [paletteOverride],
+  );
+
+  const renderTooltipFn = useMemo(
+    () => renderTooltip ?? ((ctx: AnalyticsChartTooltipContext) => <DefaultAnalyticsChartTooltip ctx={ctx} />),
+    [renderTooltip],
+  );
+
+  const { xFormatKind, yFormatKind, layers } = state;
+  const timeseries = isTimeseriesState(state) ? state : null;
+  const showGrid = timeseries?.showGrid ?? false;
+  const showXAxis = timeseries?.showXAxis ?? false;
+  const showYAxis = timeseries?.showYAxis ?? false;
+  const zoomRange = timeseries?.zoomRange ?? null;
+  const pinnedIndex = timeseries?.pinnedIndex ?? null;
+
+  const primaryLayer = findPrimaryLayer(layers);
+  const compareLayer = findCompareLayer(layers);
+  const annotationsLayer = findAnnotationsLayer(layers);
+  const showPrimary = primaryLayer?.visible ?? false;
+  const showCompare = compareLayer?.visible ?? false;
+  const showAnnotationsLayer = annotationsLayer?.visible ?? false;
+
+  const primaryStyle = primaryLayer ? resolveDataLayerStyle(primaryLayer) : FALLBACK_PRIMARY_STYLE;
+  const compareStyle = compareLayer ? resolveDataLayerStyle(compareLayer) : FALLBACK_COMPARE_STYLE;
+  const primaryColor = primaryStyle.color;
+  const compareColor = compareStyle.color;
+  const annotationColor = annotationsLayer?.color ?? FALLBACK_ANNOTATION_COLOR;
+  const primaryStroke = STROKE_DASHARRAY[primaryStyle.strokeStyle];
+  const compareStroke = STROKE_DASHARRAY[compareStyle.strokeStyle];
+  const primaryFillOpacity = primaryStyle.fillOpacity;
+  const compareFillOpacity = compareStyle.fillOpacity;
+
+  const setTimeseriesField = useCallback(
+    <K extends keyof AnalyticsChartTimeseriesState>(
+      key: K,
+      value: AnalyticsChartTimeseriesState[K],
+    ) => {
+      onChange((prev) => {
+        if (prev.view !== "timeseries") return prev;
+        return { ...prev, [key]: value };
+      });
+    },
+    [onChange],
+  );
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [hoverIndex, setHoverIndex] = useState<number | null>(null);
+  const [committedRange, setCommittedRange] = useState<[number, number] | null>(null);
+  const [annotationDraft, setAnnotationDraft] = useState<string | null>(null);
+  const [dragAnchor, setDragAnchor] = useState<number | null>(null);
+  const [brushStart, setBrushStart] = useState<number | null>(null);
+  const [brushEnd, setBrushEnd] = useState<number | null>(null);
+  const [pieHoverKey, setPieHoverKey] = useState<string | null>(null);
+
+  const activeIndex = pinnedIndex ?? hoverIndex;
+
+  const primarySegmentSeries = useMemo<readonly AnalyticsChartSeries[]>(
+    () => primaryLayer?.segmentSeries ?? EMPTY_SERIES,
+    [primaryLayer?.segmentSeries],
+  );
+  const compareSegmentSeries = useMemo<readonly AnalyticsChartSeries[]>(
+    () => compareLayer?.segmentSeries ?? EMPTY_SERIES,
+    [compareLayer?.segmentSeries],
+  );
+  const primaryFullSegments = useMemo<readonly (readonly number[])[]>(
+    () => primaryLayer?.segments ?? EMPTY_MATRIX,
+    [primaryLayer?.segments],
+  );
+  const compareFullSegments = useMemo<readonly (readonly number[])[]>(
+    () => compareLayer?.segments ?? EMPTY_MATRIX,
+    [compareLayer?.segments],
+  );
+
+  const primarySegmented =
+    (primaryLayer?.segmented ?? false)
+    && showPrimary
+    && primarySegmentSeries.length > 0
+    && primaryFullSegments.length > 0;
+  const compareSegmented =
+    (compareLayer?.segmented ?? false)
+    && showCompare
+    && compareSegmentSeries.length > 0
+    && compareFullSegments.length > 0;
+
+  const visibleStart = zoomRange ? zoomRange[0] : 0;
+  const visibleEnd = zoomRange ? zoomRange[1] : fullData.length - 1;
+
+  const data = useMemo(
+    () => fullData.slice(visibleStart, visibleEnd + 1),
+    [fullData, visibleStart, visibleEnd],
+  );
+  const primarySegments = useMemo(
+    () => primaryFullSegments.slice(visibleStart, visibleEnd + 1),
+    [primaryFullSegments, visibleStart, visibleEnd],
+  );
+  const compareSegments = useMemo(
+    () => compareFullSegments.slice(visibleStart, visibleEnd + 1),
+    [compareFullSegments, visibleStart, visibleEnd],
+  );
+  const primarySegmentTotals = useMemo(
+    () => primarySegments.map((row) => row.reduce((a, b) => a + b, 0)),
+    [primarySegments],
+  );
+  const compareSegmentTotals = useMemo(
+    () => compareSegments.map((row) => row.reduce((a, b) => a + b, 0)),
+    [compareSegments],
+  );
+
+  const yDomainMax = useMemo(() => {
+    const dataLayerIds = layers.filter(isAnalyticsChartDataLayer).map((l) => l.id);
+    const layerMaxes = dataLayerIds.map((id) =>
+      data.reduce((m, p) => Math.max(m, pointValue(p, id)), 0),
+    );
+    const primaryStackMax = primarySegmentTotals.reduce((m, v) => Math.max(m, v), 0);
+    const compareStackMax = compareSegmentTotals.reduce((m, v) => Math.max(m, v), 0);
+    const rawMax = Math.max(0, ...layerMaxes, primaryStackMax, compareStackMax);
+    return Math.ceil(rawMax * (1 + yDomainPadding));
+  }, [data, layers, primarySegmentTotals, compareSegmentTotals, yDomainPadding]);
+
+  const segmentColors = useMemo(() => {
+    return {
+      primary: {
+        light: buildRampColors(palette.primary, primarySegmentSeries.length, "light"),
+        dark: buildRampColors(palette.primary, primarySegmentSeries.length, "dark"),
+      },
+      compare: {
+        light: buildRampColors(palette.compare, compareSegmentSeries.length, "light"),
+        dark: buildRampColors(palette.compare, compareSegmentSeries.length, "dark"),
+      },
+    };
+  }, [primarySegmentSeries.length, compareSegmentSeries.length, palette]);
+
+  const aggregatedPrimarySegments = useMemo(
+    () =>
+      primarySegmentSeries.map((_, sIdx) =>
+        primarySegments.reduce((acc, row) => acc + (row[sIdx] ?? 0), 0),
+      ),
+    [primarySegmentSeries, primarySegments],
+  );
+  const aggregatedCompareSegments = useMemo(
+    () =>
+      compareSegmentSeries.map((_, sIdx) =>
+        compareSegments.reduce((acc, row) => acc + (row[sIdx] ?? 0), 0),
+      ),
+    [compareSegmentSeries, compareSegments],
+  );
+  const aggregatedPrimaryTotal = useMemo(
+    () => aggregatedPrimarySegments.reduce((a, b) => a + b, 0),
+    [aggregatedPrimarySegments],
+  );
+  const aggregatedCompareTotal = useMemo(
+    () => aggregatedCompareSegments.reduce((a, b) => a + b, 0),
+    [aggregatedCompareSegments],
+  );
+
+  const annotations = useMemo(() => {
+    return fullAnnotations
+      .filter((a) => a.index >= visibleStart && a.index <= visibleEnd)
+      .map((a) => ({ ...a, index: a.index - visibleStart }));
+  }, [fullAnnotations, visibleStart, visibleEnd]);
+
+  const brushing = brushStart != null;
+  const N = data.length;
+
+  const primaryKey = primaryLayer?.id ?? "__analytics_primary";
+  const compareKey = compareLayer?.id ?? "__analytics_compare";
+  // Segment keys must be valid CSS `<ident>` tokens — colons break `--color-${key}` declarations.
+  const primarySolidKey = `${primaryKey}_solid`;
+  const primaryDashedKey = `${primaryKey}_dashed`;
+  const compareSolidKey = `${compareKey}_solid`;
+  const compareDashedKey = `${compareKey}_dashed`;
+  const primarySegKey = useCallback(
+    (segKey: string) => `${primaryKey}_seg_${cssIdent(segKey)}`,
+    [primaryKey],
+  );
+  const compareSegKey = useCallback(
+    (segKey: string) => `${compareKey}_seg_${cssIdent(segKey)}`,
+    [compareKey],
+  );
+
+  const primaryInProgressLocalIdx = computeLocalInProgressIdx(
+    primaryLayer?.inProgressFromIndex,
+    visibleStart,
+    visibleEnd,
+  );
+  const compareInProgressLocalIdx = computeLocalInProgressIdx(
+    compareLayer?.inProgressFromIndex,
+    visibleStart,
+    visibleEnd,
+  );
+  const primaryHasInProgress =
+    primaryInProgressLocalIdx != null
+    && !primarySegmented
+    && (primaryStyle.type === "line" || primaryStyle.type === "area");
+  const compareHasInProgress =
+    compareInProgressLocalIdx != null
+    && !compareSegmented
+    && (compareStyle.type === "line" || compareStyle.type === "area");
+
+  const chartData = useMemo(() => {
+    return data.map((point, i) => {
+      const row: Record<string, number | string | null> = {
+        index: i,
+        ts: point.ts,
+      };
+      for (const [k, v] of Object.entries(point.values)) {
+        row[k] = v;
+      }
+      if (primaryLayer && primaryHasInProgress) {
+        const k = primaryInProgressLocalIdx as number;
+        const v = pointValue(point, primaryLayer.id);
+        row[primarySolidKey] = i < k ? v : null;
+        row[primaryDashedKey] = i >= k - 1 ? v : null;
+      }
+      if (compareLayer && compareHasInProgress) {
+        const k = compareInProgressLocalIdx as number;
+        const v = pointValue(point, compareLayer.id);
+        row[compareSolidKey] = i < k ? v : null;
+        row[compareDashedKey] = i >= k - 1 ? v : null;
+      }
+      if (primarySegmented) {
+        primarySegmentSeries.forEach((s, sIdx) => {
+          row[primarySegKey(s.key)] = primarySegments[i]?.[sIdx] ?? 0;
+        });
+      }
+      if (compareSegmented) {
+        compareSegmentSeries.forEach((s, sIdx) => {
+          row[compareSegKey(s.key)] = compareSegments[i]?.[sIdx] ?? 0;
+        });
+      }
+      return row;
+    });
+  }, [
+    data,
+    primaryLayer,
+    compareLayer,
+    primarySolidKey,
+    primaryDashedKey,
+    compareSolidKey,
+    compareDashedKey,
+    primarySegKey,
+    compareSegKey,
+    primarySegments,
+    compareSegments,
+    primarySegmentSeries,
+    compareSegmentSeries,
+    primarySegmented,
+    compareSegmented,
+    primaryHasInProgress,
+    compareHasInProgress,
+    primaryInProgressLocalIdx,
+    compareInProgressLocalIdx,
+  ]);
+
+  const chartConfig = useMemo<DesignChartConfig>(() => {
+    const primaryLabel = primaryLayer?.label ?? "";
+    const compareLabel = compareLayer?.label ?? "";
+    const config: DesignChartConfig = {};
+    if (primaryLayer) {
+      config[primaryLayer.id] = { label: primaryLabel, color: primaryColor };
+      if (primaryHasInProgress) {
+        config[primarySolidKey] = { label: primaryLabel, color: primaryColor };
+        config[primaryDashedKey] = { label: primaryLabel, color: primaryColor };
+      }
+    }
+    if (compareLayer) {
+      config[compareLayer.id] = { label: compareLabel, color: compareColor };
+      if (compareHasInProgress) {
+        config[compareSolidKey] = { label: compareLabel, color: compareColor };
+        config[compareDashedKey] = { label: compareLabel, color: compareColor };
+      }
+    }
+    if (primarySegmented) {
+      primarySegmentSeries.forEach((s, i) => {
+        config[primarySegKey(s.key)] = {
+          label: s.label,
+          theme: {
+            light: segmentColors.primary.light[i],
+            dark: segmentColors.primary.dark[i],
+          },
+        };
+      });
+    }
+    if (compareSegmented) {
+      compareSegmentSeries.forEach((s, i) => {
+        config[compareSegKey(s.key)] = {
+          label: s.label,
+          theme: {
+            light: segmentColors.compare.light[i],
+            dark: segmentColors.compare.dark[i],
+          },
+        };
+      });
+    }
+    return config;
+  }, [
+    primaryLayer,
+    compareLayer,
+    primarySolidKey,
+    primaryDashedKey,
+    compareSolidKey,
+    compareDashedKey,
+    primarySegKey,
+    compareSegKey,
+    primaryColor,
+    compareColor,
+    primaryHasInProgress,
+    compareHasInProgress,
+    primarySegmented,
+    compareSegmented,
+    primarySegmentSeries,
+    compareSegmentSeries,
+    segmentColors,
+  ]);
+
+  const handleChartMouseMove = useCallback(
+    (rechartsState: RechartsMouseState) => {
+      const i = rechartsState.activeTooltipIndex;
+      if (typeof i !== "number") return;
+      setHoverIndex(i);
+      if (dragAnchor != null && (brushStart != null || i !== dragAnchor)) {
+        if (brushStart == null) setBrushStart(dragAnchor);
+        setBrushEnd(i);
+      }
+    },
+    [dragAnchor, brushStart],
+  );
+  const handleChartMouseDown = useCallback(
+    (rechartsState: RechartsMouseState, e: React.MouseEvent) => {
+      if (e.button !== 0) return;
+      const i = rechartsState.activeTooltipIndex;
+      if (typeof i !== "number") return;
+      e.preventDefault();
+      setDragAnchor(i);
+      setAnnotationDraft(null);
+    },
+    [],
+  );
+  const handleChartMouseUp = useCallback(
+    (_: RechartsMouseState, e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (brushStart != null && brushEnd != null) {
+        const lo = Math.min(brushStart, brushEnd);
+        const hi = Math.max(brushStart, brushEnd);
+        setBrushStart(null);
+        setBrushEnd(null);
+        setDragAnchor(null);
+        if (hi - lo >= 1) setCommittedRange([lo, hi]);
+        return;
+      }
+      setDragAnchor(null);
+      if (pinnedIndex != null) {
+        setTimeseriesField("pinnedIndex", null);
+      } else if (hoverIndex != null) {
+        setTimeseriesField("pinnedIndex", hoverIndex);
+      }
+    },
+    [
+      brushStart,
+      brushEnd,
+      hoverIndex,
+      pinnedIndex,
+      setTimeseriesField,
+    ],
+  );
+  const handleChartMouseLeave = useCallback(() => {
+    if (!brushing) setHoverIndex(null);
+  }, [brushing]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+        e.preventDefault();
+        setHoverIndex((cur) => {
+          const base = cur ?? pinnedIndex ?? 0;
+          return e.key === "ArrowRight"
+            ? Math.min(N - 1, base + 1)
+            : Math.max(0, base - 1);
+        });
+        return;
+      }
+      if (e.key === "Home") {
+        e.preventDefault();
+        setHoverIndex(0);
+        return;
+      }
+      if (e.key === "End") {
+        e.preventDefault();
+        setHoverIndex(N - 1);
+        return;
+      }
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (pinnedIndex != null) {
+          setTimeseriesField("pinnedIndex", null);
+        } else if (hoverIndex != null) {
+          setTimeseriesField("pinnedIndex", hoverIndex);
+        }
+      }
+    },
+    [N, hoverIndex, pinnedIndex, setTimeseriesField],
+  );
+
+  useEffect(() => {
+    if (pinnedIndex == null) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setTimeseriesField("pinnedIndex", null);
+    };
+    const onDown = (e: MouseEvent) => {
+      if (!wrapperRef.current) return;
+      if (!wrapperRef.current.contains(e.target as Node)) setTimeseriesField("pinnedIndex", null);
+    };
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("mousedown", onDown);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("mousedown", onDown);
+    };
+  }, [pinnedIndex, setTimeseriesField]);
+
+  const plotInset = resolvedPlotMargin.left + resolvedPlotMargin.right;
+  const indexToCss = useCallback(
+    (i: number): string => {
+      if (N <= 1) return `calc(${resolvedPlotMargin.left}px + (100% - ${plotInset}px) * 0.5)`;
+      const t = Math.max(0, Math.min(1, i / (N - 1)));
+      return `calc(${resolvedPlotMargin.left}px + (100% - ${plotInset}px) * ${t})`;
+    },
+    [N, resolvedPlotMargin.left, plotInset],
+  );
+  const tooltipXPct = activeIndex != null
+    ? N <= 1
+      ? 50
+      : (activeIndex / (N - 1)) * 100
+    : 0;
+  const shouldFlip = tooltipXPct > 68;
+
+  const activePoint = activeIndex != null ? data[activeIndex] : null;
+
+  const chartAriaLabel = primaryLayer?.label || "Chart";
+
+  if (state.view === "pie") {
+    return (
+      <AnalyticsChartPie
+        wrapperRef={wrapperRef}
+        primarySegmentSeries={primarySegmentSeries}
+        compareSegmentSeries={compareSegmentSeries}
+        aggregatedPrimarySegments={aggregatedPrimarySegments}
+        aggregatedCompareSegments={aggregatedCompareSegments}
+        aggregatedPrimaryTotal={aggregatedPrimaryTotal}
+        aggregatedCompareTotal={aggregatedCompareTotal}
+        segmentColors={segmentColors}
+        showPrimary={showPrimary}
+        showCompare={showCompare}
+        xFormatKind={xFormatKind}
+        yFormatKind={yFormatKind}
+        hoverKey={pieHoverKey}
+        setHoverKey={setPieHoverKey}
+        zoomRange={zoomRange}
+        onResetZoom={() => {
+          onChange((prev) => ({ ...prev, zoomRange: null, pinnedIndex: null }));
+          setCommittedRange(null);
+          setAnnotationDraft(null);
+          setHoverIndex(null);
+        }}
+        visibleStart={visibleStart}
+        visibleEnd={visibleEnd}
+        fullData={fullData}
+        strings={strings}
+        fmtValue={fmtValue}
+        pie={pie}
+      />
+    );
+  }
+
+  return (
+    <div
+      ref={wrapperRef}
+      className={cn(
+        "relative w-full select-none rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:focus-visible:ring-blue-400/40",
+        brushing && "[&_.recharts-wrapper]:cursor-ew-resize",
+        !brushing && "[&_.recharts-wrapper]:cursor-crosshair",
+      )}
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+      onKeyDown={handleKeyDown}
+      onFocus={() => {
+        if (hoverIndex == null) setHoverIndex(pinnedIndex ?? Math.floor(N / 2));
+      }}
+      tabIndex={0}
+      role="img"
+      aria-label={`${chartAriaLabel} over the visible ${data.length}-day range. Use arrow keys to move the cursor, Enter to pin, Escape to release. Click and drag to select a range.`}
+    >
+      <DesignChartContainer
+        config={chartConfig}
+        className="aspect-auto h-[260px] w-full sm:h-[320px]"
+      >
+        <ComposedChart
+          data={chartData}
+          margin={resolvedPlotMargin}
+          onMouseMove={handleChartMouseMove}
+          onMouseDown={handleChartMouseDown}
+          onMouseUp={handleChartMouseUp}
+          onMouseLeave={handleChartMouseLeave}
+        >
+          {showGrid && <CartesianGrid vertical={false} strokeDasharray="3 3" />}
+          {showXAxis && (
+            <XAxis
+              dataKey="index"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={10}
+              minTickGap={32}
+              tickFormatter={(value: number | string) => {
+                const idx = Number(value);
+                if (idx < 0 || idx >= data.length) return "";
+                return fmtValue(data[idx]!.ts, xFormatKind);
+              }}
+            />
+          )}
+          {showYAxis && (
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              width={yAxisWidth}
+              domain={[0, yDomainMax]}
+              allowDataOverflow={false}
+              tickFormatter={(value: number | string) =>
+                fmtValue(Math.round(Number(value)), yFormatKind)
+              }
+            />
+          )}
+
+          {showAnnotationsLayer
+            && annotations.map((a) => (
+              <ReferenceLine
+                key={a.index}
+                x={a.index}
+                stroke={annotationColor}
+                strokeDasharray="3 4"
+                strokeOpacity={0.55}
+                ifOverflow="visible"
+              />
+            ))}
+
+          {committedRange && (
+            <ReferenceArea
+              x1={committedRange[0]}
+              x2={committedRange[1]}
+              fill={primaryColor}
+              fillOpacity={0.07}
+              stroke={primaryColor}
+              strokeOpacity={0.45}
+              strokeDasharray="3 3"
+              ifOverflow="visible"
+            />
+          )}
+
+          {brushStart != null && brushEnd != null && (
+            <ReferenceArea
+              x1={Math.min(brushStart, brushEnd)}
+              x2={Math.max(brushStart, brushEnd)}
+              fill={primaryColor}
+              fillOpacity={0.15}
+              stroke={primaryColor}
+              strokeOpacity={0.55}
+              ifOverflow="visible"
+            />
+          )}
+
+          {showPrimary && primaryLayer && renderDataSeries({
+            layer: primaryLayer,
+            segmented: primarySegmented,
+            segmentSeries: primarySegmentSeries,
+            segKey: primarySegKey,
+            stackId: "primary-segments",
+            strokeDasharray: primaryStroke,
+            segmentedStrokeDasharray: undefined,
+            fillOpacity: primaryFillOpacity,
+            segmentedFillOpacity: 0.78,
+            strokeWidth: 2,
+            segmentedStrokeWidth: 0.75,
+            inProgressKeys: primaryHasInProgress
+              ? { solid: primarySolidKey, dashed: primaryDashedKey }
+              : null,
+          })}
+
+          {showCompare && compareLayer && renderDataSeries({
+            layer: compareLayer,
+            segmented: compareSegmented,
+            segmentSeries: compareSegmentSeries,
+            segKey: compareSegKey,
+            stackId: "compare-segments",
+            strokeDasharray: compareStroke,
+            segmentedStrokeDasharray: compareStroke,
+            fillOpacity: compareFillOpacity,
+            segmentedFillOpacity: 0.6,
+            baseOpacity: compareSegmented ? 0.9 : 1,
+            strokeWidth: 1.5,
+            segmentedStrokeWidth: 0.75,
+            inProgressKeys: compareHasInProgress
+              ? { solid: compareSolidKey, dashed: compareDashedKey }
+              : null,
+          })}
+        </ComposedChart>
+      </DesignChartContainer>
+
+      {activeIndex != null && activePoint && !brushing && (
+        <div
+          className="pointer-events-none absolute inset-y-4 z-10 w-px border-l border-dashed border-foreground/30"
+          style={{ left: indexToCss(activeIndex) }}
+        />
+      )}
+
+      {brushStart != null && brushEnd != null && (() => {
+        const lo = Math.min(brushStart, brushEnd);
+        const hi = Math.max(brushStart, brushEnd);
+        const days = hi - lo + 1;
+        return (
+          <div
+            className="pointer-events-none absolute -top-1 z-30 -translate-x-1/2 -translate-y-full rounded-lg border border-blue-500/30 bg-background/95 px-3 py-1.5 text-[11px] shadow-lg backdrop-blur-xl dark:border-blue-400/30"
+            style={{ left: indexToCss((lo + hi) / 2) }}
+          >
+            <div className="flex items-center gap-2">
+              <span className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">
+                {strings.rangeLabel}
+              </span>
+              <span className="font-mono tabular-nums text-foreground">
+                {fmtValue(data[lo]!.ts, xFormatKind)} – {fmtValue(data[hi]!.ts, xFormatKind)}
+              </span>
+              <span className="font-mono text-[10px] tabular-nums text-muted-foreground">
+                · {strings.daysShort(days)}
+              </span>
+            </div>
+          </div>
+        );
+      })()}
+
+      {zoomRange && (
+        <div className="absolute right-2 top-2 z-20">
+          <button
+            type="button"
+            onClick={() => {
+              onChange((prev) => ({ ...prev, zoomRange: null, pinnedIndex: null }));
+              setCommittedRange(null);
+              setAnnotationDraft(null);
+              setHoverIndex(null);
+            }}
+            className="inline-flex items-center gap-1.5 rounded-full bg-blue-500/10 px-2.5 py-1 font-mono text-[10px] font-semibold uppercase tracking-wider text-blue-600 ring-1 ring-blue-500/30 transition-colors duration-150 hover:bg-blue-500/15 hover:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 dark:text-blue-300 dark:ring-blue-400/30"
+          >
+            <MagnifyingGlassMinusIcon weight="bold" className="size-3" aria-hidden="true" />
+            <span>{strings.resetZoom}</span>
+          </button>
+        </div>
+      )}
+
+      {committedRange && !brushing && (() => {
+        const [lo, hi] = committedRange;
+        const center = (lo + hi) / 2;
+        const centerPct = N <= 1 ? 50 : (center / (N - 1)) * 100;
+        const snapLeft = centerPct < 22;
+        const snapRight = centerPct > 78;
+        const anchorStyle: CSSProperties = snapLeft
+          ? { left: "8px" }
+          : snapRight
+            ? { right: "8px" }
+            : { left: indexToCss(center), transform: "translateX(-50%)" };
+        const days = hi - lo + 1;
+        const draft = annotationDraft;
+        return (
+          <div className="absolute top-2 z-30" style={anchorStyle}>
+            <div className="flex items-center gap-1 rounded-full border border-foreground/10 bg-background/95 py-1 pl-2 pr-1 shadow-[0_10px_28px_rgba(15,23,42,0.18)] backdrop-blur-xl dark:shadow-[0_10px_28px_rgba(0,0,0,0.55)]">
+              {draft == null ? (
+                <>
+                  <span className="flex items-center gap-1.5 whitespace-nowrap px-1 font-mono text-[10px] tabular-nums text-muted-foreground">
+                    <span className="text-foreground">
+                      {fmtValue(data[lo]!.ts, xFormatKind)} – {fmtValue(data[hi]!.ts, xFormatKind)}
+                    </span>
+                    <span className="text-foreground/30">·</span>
+                    <span>{strings.daysShort(days)}</span>
+                  </span>
+                  <div className="h-4 w-px bg-foreground/10" aria-hidden="true" />
+                  <DesignButton
+                    size="sm"
+                    variant="ghost"
+                    className="h-7 gap-1.5 px-2 text-[11px]"
+                    onClick={() => {
+                      onChange((prev) => ({
+                        ...prev,
+                        zoomRange: [visibleStart + lo, visibleStart + hi],
+                        pinnedIndex: null,
+                      }));
+                      setCommittedRange(null);
+                      setAnnotationDraft(null);
+                      setHoverIndex(null);
+                    }}
+                  >
+                    <MagnifyingGlassPlusIcon weight="bold" className="size-3.5" aria-hidden="true" />
+                    {strings.zoomIn}
+                  </DesignButton>
+                  <DesignButton
+                    size="sm"
+                    variant="ghost"
+                    className="h-7 gap-1.5 px-2 text-[11px]"
+                    onClick={() => setAnnotationDraft("")}
+                  >
+                    <FlagIcon weight="bold" className="size-3.5" aria-hidden="true" />
+                    {strings.annotate}
+                  </DesignButton>
+                  <DesignButton
+                    size="sm"
+                    variant="ghost"
+                    className="h-7 w-7 p-0"
+                    aria-label={strings.clearSelection}
+                    onClick={() => setCommittedRange(null)}
+                  >
+                    <XIcon weight="bold" className="size-3.5" aria-hidden="true" />
+                  </DesignButton>
+                </>
+              ) : (
+                <form
+                  className="flex items-center gap-1 px-1"
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    const label = draft.trim();
+                    if (label.length === 0) return;
+                    const mid = Math.round((lo + hi) / 2);
+                    onAnnotationCreate?.({
+                      index: visibleStart + mid,
+                      label,
+                      description: label,
+                    });
+                    setCommittedRange(null);
+                    setAnnotationDraft(null);
+                  }}
+                >
+                  <FlagIcon
+                    weight="bold"
+                    className="size-3.5 text-amber-500 dark:text-amber-400"
+                    aria-hidden="true"
+                  />
+                  <input
+                    autoFocus
+                    type="text"
+                    value={draft}
+                    onChange={(e) => setAnnotationDraft(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Escape") {
+                        e.preventDefault();
+                        setAnnotationDraft(null);
+                      }
+                    }}
+                    maxLength={40}
+                    placeholder={strings.annotationPlaceholder}
+                    aria-label={strings.annotationLabelAria}
+                    className="w-44 bg-transparent px-1 py-0.5 font-mono text-[11px] text-foreground placeholder:text-muted-foreground/60 focus-visible:outline-none"
+                  />
+                  <DesignButton
+                    type="submit"
+                    size="sm"
+                    variant="default"
+                    className="h-7 px-2.5 text-[11px]"
+                    disabled={draft.trim().length === 0}
+                  >
+                    {strings.save}
+                  </DesignButton>
+                  <DesignButton
+                    type="button"
+                    size="sm"
+                    variant="ghost"
+                    className="h-7 px-2 text-[11px]"
+                    onClick={() => setAnnotationDraft(null)}
+                  >
+                    {strings.cancel}
+                  </DesignButton>
+                </form>
+              )}
+            </div>
+          </div>
+        );
+      })()}
+
+      {showAnnotationsLayer && (
+        <div className="pointer-events-none absolute inset-x-0 top-1 h-0">
+          {annotations.map((a) => {
+            return (
+              <div
+                key={a.index}
+                className="absolute -translate-x-1/2"
+                style={{ left: indexToCss(a.index) }}
+              >
+                <button
+                  type="button"
+                  aria-label={a.description}
+                  className="peer pointer-events-auto inline-flex items-center gap-1 rounded-full bg-amber-500/15 px-1.5 py-[1px] font-mono text-[9px] font-semibold uppercase tracking-wider text-amber-700 ring-1 ring-amber-500/30 dark:text-amber-300 dark:bg-amber-500/20 dark:ring-amber-500/40 transition-colors duration-150 hover:bg-amber-500/25 hover:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-500/50"
+                >
+                  <FlagIcon weight="fill" className="size-2.5" aria-hidden="true" />
+                  {a.label}
+                </button>
+                <span
+                  role="tooltip"
+                  className="pointer-events-none absolute left-1/2 top-full z-30 mt-1 hidden -translate-x-1/2 whitespace-nowrap rounded-md bg-foreground px-2 py-1 text-[10px] font-normal text-background shadow-md peer-hover:block peer-focus-visible:block"
+                >
+                  {a.description}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {activeIndex != null && activePoint && (() => {
+        const primaryView = buildTooltipLayerView({
+          show: showPrimary,
+          layer: primaryLayer,
+          color: primaryColor,
+          segmented: primarySegmented,
+          segmentSeries: primarySegmentSeries,
+          segmentRows: primarySegments,
+          segmentTotals: primarySegmentTotals,
+          segmentColorsLight: segmentColors.primary.light,
+          segmentColorsDark: segmentColors.primary.dark,
+          activeIndex,
+          activePoint,
+          fallbackLabel: "Chart",
+        });
+        const compareView = buildTooltipLayerView({
+          show: showCompare,
+          layer: compareLayer,
+          color: compareColor,
+          segmented: compareSegmented,
+          segmentSeries: compareSegmentSeries,
+          segmentRows: compareSegments,
+          segmentTotals: compareSegmentTotals,
+          segmentColorsLight: segmentColors.compare.light,
+          segmentColorsDark: segmentColors.compare.dark,
+          activeIndex,
+          activePoint,
+        });
+        const delta: AnalyticsChartDelta | null = primaryView && compareView
+          ? formatDelta(primaryView.total, compareView.total)
+          : null;
+        const ctx: AnalyticsChartTooltipContext = {
+          activeIndex,
+          point: activePoint,
+          isPinned: pinnedIndex != null,
+          primary: primaryView,
+          compare: compareView,
+          delta,
+          formatValue: (v) => fmtValue(v, yFormatKind),
+          formatDate: (ts) => fmtValue(ts, xFormatKind),
+          strings,
+        };
+        return (
+          <div
+            className={cn(
+              "pointer-events-none absolute top-10 z-20",
+              "transition-[transform,opacity] duration-150",
+            )}
+            style={{
+              left: indexToCss(activeIndex),
+              transform: shouldFlip
+                ? "translateX(calc(-100% - 16px))"
+                : "translateX(16px)",
+            }}
+          >
+            {renderTooltipFn(ctx)}
+          </div>
+        );
+      })()}
+    </div>
+  );
+}
+
diff --git a/packages/dashboard-ui-components/src/components/analytics-chart/default-analytics-chart-tooltip.tsx b/packages/dashboard-ui-components/src/components/analytics-chart/default-analytics-chart-tooltip.tsx
new file mode 100644
index 0000000000..7e106ead7f
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/analytics-chart/default-analytics-chart-tooltip.tsx
@@ -0,0 +1,265 @@
+import { cn } from "@stackframe/stack-ui";
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  CursorClickIcon,
+  MinusIcon,
+  PushPinSimpleIcon,
+} from "@phosphor-icons/react";
+import type { CSSProperties } from "react";
+import type { AnalyticsChartStrings } from "./strings";
+import type { AnalyticsChartDelta, Point } from "./types";
+
+/** Trend pill — small rounded badge with an up/down/flat arrow, a signed
+ * percentage, and an optional trailing label. Shared between the default
+ * tooltip, the pie view, and the demo panels (which re-export it). */
+export function TrendPill({
+  delta,
+  label,
+  size = "sm",
+}: {
+  delta: AnalyticsChartDelta,
+  label?: string,
+  size?: "sm" | "md",
+}) {
+  const { pct, sign } = delta;
+  const tone =
+    sign === "up" ? "text-emerald-600 dark:text-emerald-400 bg-emerald-500/10"
+      : sign === "down" ? "text-rose-600 dark:text-rose-400 bg-rose-500/10"
+        : "text-muted-foreground bg-foreground/[0.06]";
+  const Icon = sign === "up" ? ArrowUpIcon : sign === "down" ? ArrowDownIcon : MinusIcon;
+  const text = pct == null ? "—" : `${pct > 0 ? "+" : ""}${pct}%`;
+  return (
+    <span className={cn(
+      "inline-flex items-center gap-1 rounded-full font-mono tabular-nums font-medium",
+      size === "md" ? "px-2 py-0.5 text-[11px]" : "px-1.5 py-[1px] text-[10px]",
+      tone,
+    )}>
+      <Icon weight="bold" className={size === "md" ? "size-3" : "size-2.5"} aria-hidden="true" />
+      {text}
+      {label && <span className="ml-0.5 text-muted-foreground font-normal">{label}</span>}
+    </span>
+  );
+}
+
+export type AnalyticsChartTooltipSegmentRow = {
+  key: string,
+  label: string,
+  value: number,
+  /** Light-theme color for the dot / swatch. */
+  color: string,
+  /** Dark-theme color for the dot / swatch. */
+  colorDark: string,
+};
+
+export type AnalyticsChartTooltipLayerView = {
+  /** Stable layer id (e.g. `"signups"`, `"previous"`). */
+  id: string,
+  /** Consumer-provided layer label. */
+  label: string,
+  /** Resolved layer color (light theme). */
+  color: string,
+  /** Resolved layer color (dark theme). */
+  colorDark: string,
+  /** Flat total for this layer at the hovered index. Populated regardless
+   * of segmentation so consumers can render the same number in either mode. */
+  total: number,
+  /** True iff this layer is rendered as a stacked breakdown. */
+  segmented: boolean,
+  /** Per-segment rows — empty when `segmented === false`. Order matches
+   * `segmentSeries`. */
+  segments: AnalyticsChartTooltipSegmentRow[],
+};
+
+export type AnalyticsChartTooltipContext = {
+  /** Index into the visible window. */
+  activeIndex: number,
+  /** Raw point at `activeIndex` — convenient for `.ts` access. */
+  point: Point,
+  /** True when the tooltip is pinned (via click) and stable under hover. */
+  isPinned: boolean,
+  /** Primary layer view or null when the primary layer is hidden. */
+  primary: AnalyticsChartTooltipLayerView | null,
+  /** Compare layer view or null when the compare layer is hidden. */
+  compare: AnalyticsChartTooltipLayerView | null,
+  /** Flat-mode delta between primary and compare totals. Null when either
+   * side is hidden. Consumers should feed this into their trend pill. */
+  delta: AnalyticsChartDelta | null,
+  /** Pre-bound value formatter for y-axis values. */
+  formatValue: (v: number) => string,
+  /** Pre-bound formatter for x-axis values. */
+  formatDate: (ts: number) => string,
+  /** Resolved strings — already merged with defaults. */
+  strings: AnalyticsChartStrings,
+};
+
+export type DefaultAnalyticsChartTooltipProps = {
+  ctx: AnalyticsChartTooltipContext,
+};
+
+/** The default tooltip body. The tooltip is rendered as an
+ * absolutely-positioned sibling of `<ChartContainer>`, which means it sits
+ * OUTSIDE the `[data-chart=…]` subtree that scopes shadcn's `--color-${key}`
+ * CSS variables. We therefore cannot reference those variables for segment
+ * swatches — instead, every swatch uses a single span with `--c-l`/`--c-d`
+ * custom properties + Tailwind arbitrary variants so one DOM element covers
+ * both themes. */
+export function DefaultAnalyticsChartTooltip({ ctx }: DefaultAnalyticsChartTooltipProps) {
+  const { point, isPinned, primary, compare, delta, formatValue: fv, formatDate: fd, strings } = ctx;
+  const anySegmented = (primary?.segmented ?? false) || (compare?.segmented ?? false);
+  return (
+    <div className="rounded-xl border border-foreground/10 bg-background/95 px-3 py-2.5 shadow-[0_10px_28px_rgba(15,23,42,0.18)] backdrop-blur-xl dark:shadow-[0_10px_28px_rgba(0,0,0,0.55)] min-w-[180px]">
+      <div className="flex items-center justify-between gap-3">
+        <span className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">
+          {fd(point.ts)}
+        </span>
+        {isPinned && (
+          <span className="inline-flex items-center gap-1 rounded-full bg-blue-500/10 px-1.5 py-[1px] text-[9px] font-semibold uppercase tracking-wider text-blue-600 dark:text-blue-300">
+            <PushPinSimpleIcon weight="fill" className="size-2.5" aria-hidden="true" />
+            {strings.pinnedBadge}
+          </span>
+        )}
+      </div>
+      <div className="mt-2 flex flex-col gap-1.5">
+        <TooltipLayerRows view={primary} keyPrefix="p" fv={fv} muted={false} />
+        <TooltipLayerRows view={compare} keyPrefix="c" fv={fv} muted />
+      </div>
+      {anySegmented && (
+        <div className="mt-2 flex flex-col gap-1 border-t border-foreground/[0.07] pt-2">
+          {primary?.segmented && (
+            <LayerSummaryRow
+              label={`${primary.label}${strings.layerTotalSuffix}`}
+              value={fv(primary.total)}
+              muted={false}
+            />
+          )}
+          {compare?.segmented && (
+            <LayerSummaryRow
+              label={`${compare.label}${strings.layerTotalSuffix}`}
+              value={fv(compare.total)}
+              muted
+            />
+          )}
+          {primary?.segmented && compare?.segmented && delta && (
+            <div className="mt-1 flex items-center justify-between">
+              <span className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">
+                {strings.deltaVsPrev}
+              </span>
+              <TrendPill delta={delta} size="sm" />
+            </div>
+          )}
+        </div>
+      )}
+      {!anySegmented && delta && primary && compare && (
+        <div className="mt-2 flex items-center justify-between border-t border-foreground/[0.07] pt-2">
+          <span className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">
+            {strings.deltaVsPrev}
+          </span>
+          <TrendPill delta={delta} size="sm" />
+        </div>
+      )}
+      <div className="mt-2 flex items-center gap-1 text-[10px] text-muted-foreground">
+        <CursorClickIcon weight="bold" className="size-2.5" aria-hidden="true" />
+        <span>{isPinned ? strings.hintClickAnywhereUnpin : strings.hintClickToPin}</span>
+      </div>
+    </div>
+  );
+}
+
+/** Render either a single flat row or the per-segment breakdown rows for
+ * one tooltip layer view. Collapses what were formerly two parallel
+ * primary/compare branches into one component. */
+function TooltipLayerRows({
+  view,
+  keyPrefix,
+  fv,
+  muted,
+}: {
+  view: AnalyticsChartTooltipLayerView | null,
+  keyPrefix: string,
+  fv: (v: number) => string,
+  muted: boolean,
+}) {
+  if (!view) return null;
+  if (!view.segmented) {
+    return (
+      <LayerTotalRow
+        light={view.color}
+        dark={view.colorDark}
+        label={view.label}
+        value={fv(view.total)}
+        muted={muted}
+      />
+    );
+  }
+  return (
+    <>
+      {view.segments.map((s) => (
+        <LayerTotalRow
+          key={`${keyPrefix}-${s.key}`}
+          light={s.color}
+          dark={s.colorDark}
+          label={s.label}
+          value={fv(s.value)}
+          muted={muted}
+        />
+      ))}
+    </>
+  );
+}
+
+/** Single row: swatch + label + value. One DOM element for the swatch —
+ * dark-mode color is picked up via `--c-d`. */
+function LayerTotalRow({
+  light,
+  dark,
+  label,
+  value,
+  muted,
+}: {
+  light: string,
+  dark: string,
+  label: string,
+  value: string,
+  muted: boolean,
+}) {
+  return (
+    <div className="flex items-center gap-2.5">
+      <span
+        className="size-2 rounded-full bg-[var(--c-l)] dark:bg-[var(--c-d)]"
+        style={{ "--c-l": light, "--c-d": dark } as CSSProperties}
+      />
+      <span className="text-[11px] text-muted-foreground">{label}</span>
+      <span className={cn(
+        "ml-auto font-mono text-xs tabular-nums",
+        muted ? "text-muted-foreground" : "font-semibold text-foreground",
+      )}>
+        {value}
+      </span>
+    </div>
+  );
+}
+
+function LayerSummaryRow({
+  label,
+  value,
+  muted,
+}: {
+  label: string,
+  value: string,
+  muted: boolean,
+}) {
+  return (
+    <div className="flex items-center justify-between">
+      <span className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">
+        {label}
+      </span>
+      <span className={cn(
+        "font-mono text-xs tabular-nums",
+        muted ? "text-muted-foreground" : "font-semibold text-foreground",
+      )}>
+        {value}
+      </span>
+    </div>
+  );
+}
diff --git a/packages/dashboard-ui-components/src/components/analytics-chart/format.ts b/packages/dashboard-ui-components/src/components/analytics-chart/format.ts
new file mode 100644
index 0000000000..93c22fd6be
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/analytics-chart/format.ts
@@ -0,0 +1,101 @@
+import type { FormatKind, FormatKindType, AnalyticsChartDelta } from "./types";
+
+export const FORMAT_KIND_TYPES: FormatKindType[] = [
+  "numeric",
+  "short",
+  "currency",
+  "duration",
+  "datetime",
+  "percent",
+];
+
+export const DEFAULT_FORMAT_KIND: { [K in FormatKindType]: Extract<FormatKind, { type: K }> } = {
+  numeric: { type: "numeric", locale: "en-US", decimals: 0 },
+  short: { type: "short", precision: 1, locale: "en-US" },
+  currency: { type: "currency", currency: "USD", divisor: 100, locale: "en-US" },
+  duration: { type: "duration", unit: "s", showZero: false },
+  datetime: { type: "datetime", style: "short", locale: "en-US" },
+  percent: { type: "percent", source: "fraction", decimals: 1 },
+};
+
+function formatRelative(value: number, locale: string): string {
+  const diff = value - Date.now();
+  const absSec = Math.abs(diff) / 1000;
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+  if (absSec >= 86_400) return rtf.format(Math.round(diff / 86_400_000), "day");
+  if (absSec >= 3600) return rtf.format(Math.round(diff / 3_600_000), "hour");
+  if (absSec >= 60) return rtf.format(Math.round(diff / 60_000), "minute");
+  return "just now";
+}
+
+/** `short` uses compact notation (e.g. `1.2K`), not a custom `k` suffix. */
+export function formatValue(value: number, kind: FormatKind): string {
+  switch (kind.type) {
+    case "numeric": {
+      const decimals = kind.decimals ?? 0;
+      return value.toLocaleString(kind.locale ?? "en-US", {
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals,
+      });
+    }
+    case "short": {
+      const precision = kind.precision ?? 1;
+      return new Intl.NumberFormat(kind.locale ?? "en-US", {
+        notation: "compact",
+        compactDisplay: "short",
+        minimumFractionDigits: precision,
+        maximumFractionDigits: precision,
+      }).format(value);
+    }
+    case "currency": {
+      const divisor = kind.divisor ?? 1;
+      return new Intl.NumberFormat(kind.locale ?? "en-US", {
+        style: "currency",
+        currency: kind.currency ?? "USD",
+      }).format(value / divisor);
+    }
+    case "duration": {
+      const unit = kind.unit ?? "s";
+      const seconds = unit === "ms" ? value / 1000
+        : unit === "m" ? value * 60
+          : unit === "h" ? value * 3600
+            : value;
+      const h = Math.floor(seconds / 3600);
+      const m = Math.floor((seconds % 3600) / 60);
+      const s = Math.floor(seconds % 60);
+      if (h > 0) return `${h}h ${m}m ${s}s`;
+      if (m > 0) return `${m}m ${s}s`;
+      if (unit === "ms" && seconds < 1) return `${Math.round(value)}ms`;
+      if (s > 0 || kind.showZero) return `${s}s`;
+      return "0s";
+    }
+    case "datetime": {
+      const d = new Date(value);
+      const style = kind.style ?? "short";
+      const locale = kind.locale ?? "en-US";
+      if (style === "iso") return d.toISOString();
+      if (style === "relative") return formatRelative(value, locale);
+      if (style === "long") return d.toLocaleString(locale, {
+        dateStyle: "medium",
+        timeStyle: "short",
+      });
+      return d.toLocaleDateString(locale, { month: "short", day: "numeric" });
+    }
+    case "percent": {
+      const source = kind.source ?? "fraction";
+      const decimals = kind.decimals ?? 1;
+      const pct = source === "basis" ? value / 100
+        : source === "whole" ? value
+          : value * 100;
+      return `${pct.toFixed(decimals)}%`;
+    }
+  }
+}
+
+export function formatDelta(current: number, previous: number): AnalyticsChartDelta {
+  if (!Number.isFinite(current) || !Number.isFinite(previous)) return { pct: null, sign: "na" };
+  if (previous === 0) return current === 0 ? { pct: 0, sign: "flat" } : { pct: null, sign: "na" };
+  const pct = Number((((current - previous) / previous) * 100).toFixed(1));
+  const sign = pct > 0 ? "up" : pct < 0 ? "down" : "flat";
+  return { pct, sign };
+}
diff --git a/packages/dashboard-ui-components/src/components/analytics-chart/index.ts b/packages/dashboard-ui-components/src/components/analytics-chart/index.ts
new file mode 100644
index 0000000000..c5cc60a092
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/analytics-chart/index.ts
@@ -0,0 +1,75 @@
+export { AnalyticsChart, type AnalyticsChartProps, type Margin } from "./analytics-chart";
+export {
+  DefaultAnalyticsChartTooltip,
+  TrendPill,
+  type AnalyticsChartTooltipContext,
+  type AnalyticsChartTooltipLayerView,
+  type AnalyticsChartTooltipSegmentRow,
+  type DefaultAnalyticsChartTooltipProps,
+} from "./default-analytics-chart-tooltip";
+export {
+  formatDelta,
+  formatValue,
+  DEFAULT_FORMAT_KIND,
+  FORMAT_KIND_TYPES,
+} from "./format";
+export {
+  ANALYTICS_CHART_DEFAULT_PALETTE,
+  buildRampColors,
+  buildSegmentThemeMap,
+  resolveAnalyticsChartPalette,
+} from "./palette";
+export {
+  ANALYTICS_CHART_DEFAULT_LAYERS,
+  ANALYTICS_CHART_DEFAULT_STATE,
+  computeLocalInProgressIdx,
+  EMPTY_MATRIX,
+  EMPTY_SERIES,
+  findAnnotationsLayer,
+  findCompareLayer,
+  findLayerById,
+  findPrimaryLayer,
+  isAnalyticsChartDataLayer,
+  isTimeseriesState,
+  patchLayerById,
+  resolveDataLayerStyle,
+  setLayerById,
+  STROKE_DASHARRAY,
+  type ResolvedDataLayerStyle,
+} from "./state";
+export {
+  ANALYTICS_CHART_DEFAULT_STRINGS,
+  resolveAnalyticsChartStrings,
+  type AnalyticsChartStrings,
+} from "./strings";
+export {
+  pointValue,
+  type AnalyticsChartAnnotationsLayer,
+  type AnalyticsChartAreaLayer,
+  type AnalyticsChartBarLayer,
+  type AnalyticsChartDataLayer,
+  type AnalyticsChartDelta,
+  type AnalyticsChartLayer,
+  type AnalyticsChartLayers,
+  type AnalyticsChartLayerType,
+  type AnalyticsChartLineLayer,
+  type AnalyticsChartPalette,
+  type AnalyticsChartPieProps,
+  type AnalyticsChartPieState,
+  type AnalyticsChartSegmentRamp,
+  type AnalyticsChartSeries,
+  type AnalyticsChartState,
+  type AnalyticsChartStrokeStyle,
+  type AnalyticsChartTimeseriesState,
+  type AnalyticsChartView,
+  type Annotation,
+  type FormatKind,
+  type FormatKindCurrency,
+  type FormatKindDatetime,
+  type FormatKindDuration,
+  type FormatKindNumeric,
+  type FormatKindPercent,
+  type FormatKindShort,
+  type FormatKindType,
+  type Point,
+} from "./types";
diff --git a/packages/dashboard-ui-components/src/components/analytics-chart/palette.ts b/packages/dashboard-ui-components/src/components/analytics-chart/palette.ts
new file mode 100644
index 0000000000..60647c401c
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/analytics-chart/palette.ts
@@ -0,0 +1,68 @@
+import type {
+  AnalyticsChartPalette,
+  AnalyticsChartSegmentRamp,
+  AnalyticsChartSeries,
+} from "./types";
+
+export const ANALYTICS_CHART_DEFAULT_PALETTE: AnalyticsChartPalette = {
+  primary: {
+    kind: "procedural",
+    hue: 220,
+    sat: 78,
+    shadeRangeLight: [28, 62],
+    shadeRangeDark: [52, 82],
+  },
+  compare: {
+    kind: "procedural",
+    hue: 38,
+    sat: 92,
+    shadeRangeLight: [28, 62],
+    shadeRangeDark: [52, 82],
+  },
+};
+
+export function resolveAnalyticsChartPalette(
+  override: Partial<AnalyticsChartPalette> | undefined,
+): AnalyticsChartPalette {
+  if (!override) return ANALYTICS_CHART_DEFAULT_PALETTE;
+  return {
+    primary: override.primary ?? ANALYTICS_CHART_DEFAULT_PALETTE.primary,
+    compare: override.compare ?? ANALYTICS_CHART_DEFAULT_PALETTE.compare,
+  };
+}
+
+/** Expand a ramp into N colors for a given theme. */
+export function buildRampColors(
+  ramp: AnalyticsChartSegmentRamp,
+  count: number,
+  theme: "light" | "dark",
+): string[] {
+  if (ramp.kind === "explicit") {
+    const list = theme === "light" ? ramp.light : ramp.dark;
+    if (list.length === 0) return Array.from({ length: count }, () => "#888");
+    return Array.from(
+      { length: count },
+      (_, i) => list[i < list.length ? i : list.length - 1]!,
+    );
+  }
+  const range = theme === "light" ? ramp.shadeRangeLight : ramp.shadeRangeDark;
+  return Array.from({ length: count }, (_, i) => {
+    const t = count <= 1 ? 0.5 : i / (count - 1);
+    const l = range[0] + t * (range[1] - range[0]);
+    return `hsl(${ramp.hue} ${ramp.sat}% ${l.toFixed(1)}%)`;
+  });
+}
+
+/** Per-segment light/dark colors for `ChartConfig.theme` (SVG only; siblings use inline vars). */
+export function buildSegmentThemeMap(
+  series: readonly AnalyticsChartSeries[],
+  ramp: AnalyticsChartSegmentRamp,
+): Record<string, { light: string, dark: string }> {
+  const light = buildRampColors(ramp, series.length, "light");
+  const dark = buildRampColors(ramp, series.length, "dark");
+  const out: Record<string, { light: string, dark: string }> = {};
+  series.forEach((s, i) => {
+    out[s.key] = { light: light[i]!, dark: dark[i]! };
+  });
+  return out;
+}
diff --git a/packages/dashboard-ui-components/src/components/analytics-chart/render-data-series.tsx b/packages/dashboard-ui-components/src/components/analytics-chart/render-data-series.tsx
new file mode 100644
index 0000000000..8d8ffd0616
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/analytics-chart/render-data-series.tsx
@@ -0,0 +1,169 @@
+import type { ReactNode } from "react";
+import { Area, Bar, Line } from "recharts";
+import type {
+  AnalyticsChartDataLayer,
+  AnalyticsChartSeries,
+} from "./types";
+
+/** Area layers use fill-only `<Area>` plus `<Line>` for the top edge (not Recharts' closed-path stroke). */
+export type RenderDataSeriesArgs = {
+  layer: AnalyticsChartDataLayer,
+  segmented: boolean,
+  segmentSeries: readonly AnalyticsChartSeries[],
+  segKey: (segKey: string) => string,
+  stackId: string,
+  strokeDasharray: string | undefined,
+  segmentedStrokeDasharray: string | undefined,
+  fillOpacity: number,
+  segmentedFillOpacity: number,
+  baseOpacity?: number,
+  strokeWidth: number,
+  segmentedStrokeWidth: number,
+  inProgressKeys: { solid: string, dashed: string } | null,
+};
+
+/** Return value must be spread into `<ComposedChart>` as siblings — do not wrap in `<Fragment>`. */
+export function renderDataSeries(args: RenderDataSeriesArgs): ReactNode[] {
+  const {
+    layer,
+    segmented,
+    segmentSeries,
+    segKey,
+    stackId,
+    strokeDasharray,
+    segmentedStrokeDasharray,
+    fillOpacity,
+    segmentedFillOpacity,
+    baseOpacity = 1,
+    strokeWidth,
+    segmentedStrokeWidth,
+    inProgressKeys,
+  } = args;
+
+  const nodes: ReactNode[] = [];
+
+  if (segmented) {
+    segmentSeries.forEach((s, sIdx) => {
+      const key = segKey(s.key);
+      const nodeKey = `${layer.id}_seg_${s.key}`;
+      if (layer.type === "bar") {
+        const isTop = sIdx === segmentSeries.length - 1;
+        nodes.push(
+          <Bar
+            key={nodeKey}
+            dataKey={key}
+            stackId={stackId}
+            fill={`var(--color-${key})`}
+            radius={isTop ? [2, 2, 0, 0] : 0}
+            isAnimationActive={false}
+            opacity={baseOpacity}
+          />,
+        );
+      } else if (layer.type === "area") {
+        nodes.push(
+          <Area
+            key={nodeKey}
+            dataKey={key}
+            stackId={stackId}
+            type="linear"
+            fill={`var(--color-${key})`}
+            fillOpacity={segmentedFillOpacity}
+            stroke={`var(--color-${key})`}
+            strokeWidth={segmentedStrokeWidth}
+            strokeDasharray={segmentedStrokeDasharray}
+            isAnimationActive={false}
+            opacity={baseOpacity}
+          />,
+        );
+      } else {
+        nodes.push(
+          <Line
+            key={nodeKey}
+            dataKey={key}
+            type="linear"
+            stroke={`var(--color-${key})`}
+            strokeWidth={strokeWidth}
+            strokeDasharray={segmentedStrokeDasharray}
+            dot={false}
+            isAnimationActive={false}
+            opacity={baseOpacity}
+          />,
+        );
+      }
+    });
+    return nodes;
+  }
+
+  if (layer.type === "bar") {
+    nodes.push(
+      <Bar
+        key={`${layer.id}_main`}
+        dataKey={layer.id}
+        fill={`var(--color-${layer.id})`}
+        radius={2}
+        isAnimationActive={false}
+      />,
+    );
+    return nodes;
+  }
+
+  if (layer.type === "area") {
+    nodes.push(
+      <Area
+        key={`${layer.id}_area`}
+        dataKey={layer.id}
+        type="linear"
+        fill={`var(--color-${layer.id})`}
+        fillOpacity={fillOpacity}
+        stroke="none"
+        isAnimationActive={false}
+      />,
+    );
+  }
+
+  if (inProgressKeys) {
+    nodes.push(
+      <Line
+        key={`${layer.id}_solid`}
+        dataKey={inProgressKeys.solid}
+        type="linear"
+        stroke={`var(--color-${layer.id})`}
+        strokeWidth={strokeWidth}
+        strokeDasharray={strokeDasharray}
+        dot={false}
+        isAnimationActive={false}
+        connectNulls
+      />,
+    );
+    nodes.push(
+      <Line
+        key={`${layer.id}_dashed`}
+        dataKey={inProgressKeys.dashed}
+        type="linear"
+        stroke={`var(--color-${layer.id})`}
+        strokeWidth={strokeWidth}
+        strokeDasharray="4 4"
+        dot={false}
+        isAnimationActive={false}
+        connectNulls
+        opacity={0.85}
+      />,
+    );
+  } else {
+    nodes.push(
+      <Line
+        key={`${layer.id}_line`}
+        dataKey={layer.id}
+        type="linear"
+        stroke={`var(--color-${layer.id})`}
+        strokeWidth={strokeWidth}
+        strokeDasharray={strokeDasharray}
+        dot={false}
+        isAnimationActive={false}
+        opacity={baseOpacity}
+      />,
+    );
+  }
+
+  return nodes;
+}
diff --git a/packages/dashboard-ui-components/src/components/analytics-chart/state.ts b/packages/dashboard-ui-components/src/components/analytics-chart/state.ts
new file mode 100644
index 0000000000..471b573dfb
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/analytics-chart/state.ts
@@ -0,0 +1,165 @@
+import { DEFAULT_FORMAT_KIND } from "./format";
+import type {
+  AnalyticsChartAnnotationsLayer,
+  AnalyticsChartDataLayer,
+  AnalyticsChartLayer,
+  AnalyticsChartLayers,
+  AnalyticsChartLayerType,
+  AnalyticsChartSeries,
+  AnalyticsChartState,
+  AnalyticsChartStrokeStyle,
+  AnalyticsChartTimeseriesState,
+} from "./types";
+
+export const STROKE_DASHARRAY: Record<AnalyticsChartStrokeStyle, string | undefined> = {
+  solid: undefined,
+  dashed: "5 4",
+  dotted: "1 4",
+};
+
+export const EMPTY_SERIES: readonly AnalyticsChartSeries[] = [];
+export const EMPTY_MATRIX: readonly (readonly number[])[] = [];
+
+/** Generic non-segmented defaults; demos swap in segment data. */
+export const ANALYTICS_CHART_DEFAULT_LAYERS: AnalyticsChartLayers = [
+  {
+    id: "primary",
+    kind: "primary",
+    label: "Current",
+    visible: true,
+    color: "#2563eb",
+    segmented: false,
+    type: "area",
+    strokeStyle: "solid",
+    fillOpacity: 0.22,
+    inProgressFromIndex: null,
+  },
+  {
+    id: "compare",
+    kind: "compare",
+    label: "Previous period",
+    visible: true,
+    color: "#f59e0b",
+    segmented: false,
+    type: "line",
+    strokeStyle: "dashed",
+    inProgressFromIndex: null,
+  },
+  { id: "annotations", kind: "annotations", label: "Annotations", visible: true, color: "#f59e0b" },
+];
+
+/**
+ * Default state for `AnalyticsChart`. ALWAYS spread from this when
+ * initializing state; never build the state object by hand. Ships with
+ * three pre-configured layers (primary, compare, annotations) — map over
+ * `layers` to override individual ones.
+ *
+ * ```tsx
+ * const [state, setState] = React.useState({
+ *   ...ANALYTICS_CHART_DEFAULT_STATE,
+ *   layers: ANALYTICS_CHART_DEFAULT_STATE.layers.map(l =>
+ *     l.kind === "compare" ? { ...l, visible: false } : l
+ *   ),
+ * });
+ * ```
+ *
+ * See the JSDoc on `AnalyticsChart` for the full contract, examples, and
+ * the segment data format.
+ */
+export const ANALYTICS_CHART_DEFAULT_STATE: AnalyticsChartState = {
+  view: "timeseries",
+  layers: ANALYTICS_CHART_DEFAULT_LAYERS,
+  xFormatKind: DEFAULT_FORMAT_KIND.datetime,
+  yFormatKind: DEFAULT_FORMAT_KIND.short,
+  showGrid: true,
+  showXAxis: true,
+  showYAxis: true,
+  zoomRange: null,
+  pinnedIndex: null,
+};
+
+export function findPrimaryLayer(layers: AnalyticsChartLayers): AnalyticsChartDataLayer | undefined {
+  const l = layers.find((x) => x.kind === "primary");
+  return l as AnalyticsChartDataLayer | undefined;
+}
+export function findCompareLayer(layers: AnalyticsChartLayers): AnalyticsChartDataLayer | undefined {
+  const l = layers.find((x) => x.kind === "compare");
+  return l as AnalyticsChartDataLayer | undefined;
+}
+export function findAnnotationsLayer(layers: AnalyticsChartLayers): AnalyticsChartAnnotationsLayer | undefined {
+  const l = layers.find((x) => x.kind === "annotations");
+  return l as AnalyticsChartAnnotationsLayer | undefined;
+}
+
+export function findLayerById(
+  layers: AnalyticsChartLayers,
+  id: string,
+): AnalyticsChartLayer | undefined {
+  return layers.find((l) => l.id === id);
+}
+
+export function isAnalyticsChartDataLayer(l: AnalyticsChartLayer): l is AnalyticsChartDataLayer {
+  return l.kind === "primary" || l.kind === "compare";
+}
+
+export function isTimeseriesState(
+  state: AnalyticsChartState,
+): state is AnalyticsChartTimeseriesState {
+  return state.view === "timeseries";
+}
+
+/** Replace a single layer (looked up by id) with a new layer object. */
+export function setLayerById(
+  layers: AnalyticsChartLayers,
+  id: string,
+  next: AnalyticsChartLayer,
+): AnalyticsChartLayers {
+  return layers.map((l) => (l.id === id ? next : l));
+}
+
+/** Shallow-patch fields on a layer by id. The patch type is deliberately
+ * loose — callers are trusted to supply only fields the layer's
+ * `kind`/`type` actually owns. */
+export function patchLayerById(
+  layers: AnalyticsChartLayers,
+  id: string,
+  patch: Record<string, unknown>,
+): AnalyticsChartLayers {
+  return layers.map((l) => (l.id === id ? ({ ...l, ...patch } as AnalyticsChartLayer) : l));
+}
+
+export type ResolvedDataLayerStyle = {
+  color: string,
+  type: AnalyticsChartLayerType,
+  strokeStyle: AnalyticsChartStrokeStyle,
+  fillOpacity: number,
+};
+
+export function resolveDataLayerStyle(
+  layer: AnalyticsChartDataLayer,
+): ResolvedDataLayerStyle {
+  return {
+    color: layer.color,
+    type: layer.type,
+    // Bars have no stroke pattern — default to solid for the underline.
+    strokeStyle: layer.type === "bar" ? "solid" : layer.strokeStyle,
+    // Lines have no fill — default to 0 so gradient overlays sit flat.
+    fillOpacity: layer.type === "line" ? 0 : layer.fillOpacity,
+  };
+}
+
+/** Translate a layer's absolute `inProgressFromIndex` into a local index
+ * inside the visible window. Returns `null` when the marker sits beyond
+ * the visible window, `0` when it sits before the window (whole window
+ * is dashed), or the clamped local index otherwise. */
+export function computeLocalInProgressIdx(
+  absIdx: number | null | undefined,
+  visibleStart: number,
+  visibleEnd: number,
+): number | null {
+  if (absIdx == null) return null;
+  const local = absIdx - visibleStart;
+  if (local >= visibleEnd - visibleStart + 1) return null; // beyond window
+  if (local < 0) return 0; // before window — whole window is dashed
+  return local;
+}
diff --git a/packages/dashboard-ui-components/src/components/analytics-chart/strings.ts b/packages/dashboard-ui-components/src/components/analytics-chart/strings.ts
new file mode 100644
index 0000000000..65a3fb1eff
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/analytics-chart/strings.ts
@@ -0,0 +1,72 @@
+export type AnalyticsChartStrings = {
+  /** Reset-zoom badge in the top-right corner when `state.zoomRange` is set. */
+  resetZoom: string,
+  /** Header label above the timestamps in the live range-brush popup. */
+  rangeLabel: string,
+  /** Formatted day-count suffix used by the brush + action-bar. */
+  daysShort: (days: number) => string,
+  /** "Zoom in" button inside the committed-range action bar. */
+  zoomIn: string,
+  /** "Annotate" button inside the committed-range action bar. */
+  annotate: string,
+  /** Placeholder for the annotation label input. */
+  annotationPlaceholder: string,
+  /** `aria-label` for the annotation label input. */
+  annotationLabelAria: string,
+  /** Save button in the annotation form. */
+  save: string,
+  /** Cancel button in the annotation form. */
+  cancel: string,
+  /** `aria-label` for the X button that clears the committed range. */
+  clearSelection: string,
+  /** Pinned badge shown in the tooltip header when the tooltip is pinned. */
+  pinnedBadge: string,
+  /** "Δ vs prev" row label in the tooltip (both segmented and flat modes). */
+  deltaVsPrev: string,
+  /** Suffix appended to a layer's label in the per-layer totals section
+   * (e.g. "Sign-ups" → "Sign-ups total"). */
+  layerTotalSuffix: string,
+  /** Hint row shown in the tooltip while it is floating (not pinned). */
+  hintClickToPin: string,
+  /** Hint row shown in the tooltip while it is pinned. */
+  hintClickAnywhereUnpin: string,
+  /** Center-stat heading shown in the pie when no segment is hovered. */
+  pieTotalCenter: string,
+  /** Label on the TrendPill in the pie center. */
+  pieVsPrev: string,
+  /** `aria-label` for the PieChart SVG. */
+  pieAriaLabel: (ctx: { segmentCount: number, windowDays: number }) => string,
+  /** Percentage-of-total caption shown under an active pie slice. */
+  piePercentOfTotal: (pct: number) => string,
+};
+
+export const ANALYTICS_CHART_DEFAULT_STRINGS: AnalyticsChartStrings = {
+  resetZoom: "Reset zoom",
+  rangeLabel: "Range",
+  daysShort: (days) => `${days}d`,
+  zoomIn: "Zoom in",
+  annotate: "Annotate",
+  annotationPlaceholder: "Label this range…",
+  annotationLabelAria: "Annotation label",
+  save: "Save",
+  cancel: "Cancel",
+  clearSelection: "Clear selection",
+  pinnedBadge: "Pinned",
+  deltaVsPrev: "Δ vs prev",
+  layerTotalSuffix: " total",
+  hintClickToPin: "Click to pin this point",
+  hintClickAnywhereUnpin: "Click anywhere · Esc\u00A0to unpin",
+  pieTotalCenter: "Total",
+  pieVsPrev: "vs prev",
+  pieAriaLabel: ({ segmentCount, windowDays }) =>
+    `${segmentCount} segment share-of-total over the visible ${windowDays}-day range`,
+  piePercentOfTotal: (pct) => `${(pct * 100).toFixed(1)}% of total`,
+};
+
+/** Shallow merge — every field is a primitive or a flat function. */
+export function resolveAnalyticsChartStrings(
+  override: Partial<AnalyticsChartStrings> | undefined,
+): AnalyticsChartStrings {
+  if (!override) return ANALYTICS_CHART_DEFAULT_STRINGS;
+  return { ...ANALYTICS_CHART_DEFAULT_STRINGS, ...override };
+}
diff --git a/packages/dashboard-ui-components/src/components/analytics-chart/types.ts b/packages/dashboard-ui-components/src/components/analytics-chart/types.ts
new file mode 100644
index 0000000000..f2278656de
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/analytics-chart/types.ts
@@ -0,0 +1,219 @@
+/** Time-series point. `values` is keyed by layer id. */
+export type Point = {
+  ts: number,
+  values: Record<string, number>,
+};
+
+/** Missing or non-finite values become 0. */
+export function pointValue(p: Point, id: string): number {
+  const v = p.values[id];
+  return typeof v === "number" && Number.isFinite(v) ? v : 0;
+}
+
+/** Sanitize a string into a valid CSS `<ident>` token.
+ *  Replaces characters not allowed in CSS identifiers (like `$`, spaces,
+ *  slashes, dots) with underscores. Used to build safe `var(--color-xxx)`
+ *  custom property names from arbitrary segment keys. */
+export function cssIdent(raw: string): string {
+  // Replace everything that isn't a letter, digit, hyphen, or underscore.
+  // Prefix with `_` if the result starts with a digit (not valid as ident start).
+  const cleaned = raw.replace(/[^a-zA-Z0-9_-]/g, "_");
+  return /^\d/.test(cleaned) ? `_${cleaned}` : cleaned;
+}
+
+export type Annotation = {
+  index: number,
+  label: string,
+  description: string,
+};
+
+/** Breakdown category definition — `{ key, label }` tuple. */
+export type AnalyticsChartSeries = {
+  key: string,
+  label: string,
+};
+
+export type FormatKindType =
+  | "numeric"
+  | "short"
+  | "currency"
+  | "duration"
+  | "datetime"
+  | "percent";
+
+export type FormatKindNumeric = {
+  type: "numeric",
+  /** Locale used for grouping and digit separators. Defaults to "en-US". */
+  locale?: string,
+  /** Fixed decimal places (0-4). Defaults to 0. */
+  decimals?: number,
+};
+export type FormatKindShort = {
+  type: "short",
+  /** Decimal places after the unit suffix (1.2K vs 1.20K). Defaults to 1. */
+  precision?: number,
+  locale?: string,
+};
+export type FormatKindCurrency = {
+  type: "currency",
+  /** ISO 4217 code. Defaults to "USD". */
+  currency?: string,
+  /** Divisor applied before formatting — e.g. 100 for cents → dollars. Defaults to 1. */
+  divisor?: number,
+  locale?: string,
+};
+export type FormatKindDuration = {
+  type: "duration",
+  /** Source unit of the input value. Defaults to "s". */
+  unit?: "ms" | "s" | "m" | "h",
+  /** Show the smallest unit even when zero. Defaults to false. */
+  showZero?: boolean,
+};
+export type FormatKindDatetime = {
+  type: "datetime",
+  /** Render style. Defaults to "short". */
+  style?: "short" | "long" | "iso" | "relative",
+  locale?: string,
+};
+export type FormatKindPercent = {
+  type: "percent",
+  /** How to interpret the input value:
+   * - "fraction" → 0..1     → multiply by 100  (default)
+   * - "basis"    → 0..10000 → divide by 100
+   * - "whole"    → 0..100   → no scaling
+   */
+  source?: "fraction" | "basis" | "whole",
+  /** Decimal places. Defaults to 1. */
+  decimals?: number,
+};
+
+export type FormatKind =
+  | FormatKindNumeric
+  | FormatKindShort
+  | FormatKindCurrency
+  | FormatKindDuration
+  | FormatKindDatetime
+  | FormatKindPercent;
+
+export type AnalyticsChartView = "timeseries" | "pie";
+export type AnalyticsChartLayerType = "line" | "area" | "bar";
+export type AnalyticsChartStrokeStyle = "solid" | "dashed" | "dotted";
+
+type AnalyticsChartDataLayerCommon = {
+  id: string,
+  kind: "primary" | "compare",
+  label: string,
+  visible: boolean,
+  color: string,
+  segmented: boolean,
+  /** Per-day per-category values. Outer index is the day (matches the
+   * chart data array index); inner index is the category (matches
+   * `segmentSeries`). Rows should sum to `point.values[layer.id]`. */
+  segments?: readonly (readonly number[])[],
+  /** Breakdown category definitions ordered to match the inner index of
+   * `segments`. */
+  segmentSeries?: readonly AnalyticsChartSeries[],
+  /** Absolute index into the full data array at which this layer's values
+   * become "in progress" (incomplete and still changing). Points from this
+   * index onward render with a dashed overlay so users don't panic at a
+   * half-filled bucket. Applies to line and area rendering only. */
+  inProgressFromIndex?: number | null,
+};
+export type AnalyticsChartLineLayer = AnalyticsChartDataLayerCommon & {
+  type: "line",
+  strokeStyle: AnalyticsChartStrokeStyle,
+};
+export type AnalyticsChartAreaLayer = AnalyticsChartDataLayerCommon & {
+  type: "area",
+  strokeStyle: AnalyticsChartStrokeStyle,
+  fillOpacity: number,
+};
+export type AnalyticsChartBarLayer = AnalyticsChartDataLayerCommon & {
+  type: "bar",
+  fillOpacity: number,
+};
+
+export type AnalyticsChartDataLayer =
+  | AnalyticsChartLineLayer
+  | AnalyticsChartAreaLayer
+  | AnalyticsChartBarLayer;
+
+export type AnalyticsChartAnnotationsLayer = {
+  id: string,
+  kind: "annotations",
+  label: string,
+  visible: boolean,
+  color: string,
+};
+
+export type AnalyticsChartLayer =
+  | AnalyticsChartDataLayer
+  | AnalyticsChartAnnotationsLayer;
+
+export type AnalyticsChartLayers = readonly AnalyticsChartLayer[];
+
+export type AnalyticsChartTimeseriesState = {
+  view: "timeseries",
+  layers: AnalyticsChartLayers,
+  /** Format applied to every x-axis value. Defaults to `datetime / short`. */
+  xFormatKind: FormatKind,
+  /** Format applied to every y-axis value. Defaults to `short`. */
+  yFormatKind: FormatKind,
+  showGrid: boolean,
+  showXAxis: boolean,
+  showYAxis: boolean,
+  zoomRange: [number, number] | null,
+  pinnedIndex: number | null,
+};
+export type AnalyticsChartPieState = {
+  view: "pie",
+  layers: AnalyticsChartLayers,
+  xFormatKind: FormatKind,
+  yFormatKind: FormatKind,
+};
+export type AnalyticsChartState =
+  | AnalyticsChartTimeseriesState
+  | AnalyticsChartPieState;
+
+export type AnalyticsChartDelta = {
+  pct: number | null,
+  sign: "up" | "down" | "flat" | "na",
+};
+
+/** Grouped pie config — collapses the formerly-separate
+ * `pieInnerRadius` / `pieOuterRadius` / `pieCompareInnerRadius` /
+ * `pieCompareOuterRadius` / `pieContainerClassName` props into one object. */
+export type AnalyticsChartPieProps = {
+  innerRadius?: number,
+  outerRadius?: number,
+  compareInnerRadius?: number,
+  compareOuterRadius?: number,
+  className?: string,
+};
+
+export type AnalyticsChartSegmentRamp =
+  | {
+    kind: "procedural",
+    /** HSL hue (0-360). */
+    hue: number,
+    /** HSL saturation percent (0-100). */
+    sat: number,
+    /** Lightness range `[start, end]` for the light theme (0-100). */
+    shadeRangeLight: [number, number],
+    /** Lightness range `[start, end]` for the dark theme (0-100). */
+    shadeRangeDark: [number, number],
+  }
+  | {
+    kind: "explicit",
+    /** Concrete light-theme color list. Indexed by segment. */
+    light: readonly string[],
+    /** Concrete dark-theme color list. Indexed by segment. */
+    dark: readonly string[],
+  };
+
+export type AnalyticsChartPalette = {
+  /** Color ramp for the primary data layer (current period). */
+  primary: AnalyticsChartSegmentRamp,
+  /** Color ramp for the compare data layer (previous period). */
+  compare: AnalyticsChartSegmentRamp,
+};
diff --git a/packages/dashboard-ui-components/src/components/badge.tsx b/packages/dashboard-ui-components/src/components/badge.tsx
index 037d78c958..73bd6d3bac 100644
--- a/packages/dashboard-ui-components/src/components/badge.tsx
+++ b/packages/dashboard-ui-components/src/components/badge.tsx
@@ -58,6 +58,22 @@ function getShowLabelShowIcon(
   }
 }
 
+/**
+ * Small pill used for status tags, roles, categories, and other short
+ * labels. Not a variant-based component — pick a semantic `color` and
+ * optionally pass an `icon` (as a component type, not a rendered node).
+ *
+ * ```tsx
+ * <DesignBadge label="Verified" color="green" icon={CheckIcon} />
+ * <DesignBadge label="Beta" color="purple" />
+ * <DesignBadge label="Error" color="red" size="sm" />
+ * ```
+ *
+ * Notes:
+ * - Props are `label` + `color`, NOT `variant` + children.
+ * - `color` is one of: `"blue" | "cyan" | "purple" | "green" | "orange" | "red"`.
+ * - `icon` is optional but, if set via `contentMode: "icon"`, is required.
+ */
 export function DesignBadge({
   label,
   color,
diff --git a/packages/dashboard-ui-components/src/components/button.tsx b/packages/dashboard-ui-components/src/components/button.tsx
index 4edf200ebf..e60483eaa8 100644
--- a/packages/dashboard-ui-components/src/components/button.tsx
+++ b/packages/dashboard-ui-components/src/components/button.tsx
@@ -62,6 +62,20 @@ export type DesignButtonProps = {
   loadingStyle?: "spinner" | "disabled",
 } & DesignOriginalButtonProps;
 
+/**
+ * Standard button. Variants: `default | destructive | outline | secondary | ghost | link | plain`.
+ * Sizes: `default | sm | lg | icon`.
+ *
+ * ```tsx
+ * <DesignButton variant="default" onClick={handleSave}>Save</DesignButton>
+ * <DesignButton variant="outline" size="sm" onClick={handleCancel}>Cancel</DesignButton>
+ * <DesignButton variant="ghost" size="icon"><PlusIcon className="h-4 w-4" /></DesignButton>
+ * ```
+ *
+ * Pass an async `onClick` and the button will automatically show a spinner
+ * while the promise is pending (set `loadingStyle="disabled"` if you prefer
+ * a simple disabled state instead).
+ */
 export const DesignButton = forwardRefIfNeeded<HTMLButtonElement, DesignButtonProps>(
   ({ onClick, loading: loadingProp, loadingStyle = "spinner", children, size, ...props }, ref) => {
     const [handleClick, isLoading] = useAsyncCallback(async (e: React.MouseEvent<HTMLButtonElement>) => {
diff --git a/packages/dashboard-ui-components/src/components/card.tsx b/packages/dashboard-ui-components/src/components/card.tsx
index a4e63c9c52..d7af23494a 100644
--- a/packages/dashboard-ui-components/src/components/card.tsx
+++ b/packages/dashboard-ui-components/src/components/card.tsx
@@ -80,6 +80,34 @@ type WithoutTitleProps = {
 
 export type DesignCardProps = DesignCardBaseProps & (WithTitleProps | WithoutTitleProps);
 
+/**
+ * General-purpose card for grouping related content: section headers,
+ * description blocks, chart-less panels, etc. If the content is a
+ * big-number metric, use `DesignMetricCard` instead. If it contains a
+ * chart, wrap it in `DesignChartCard`.
+ *
+ * Two shapes, picked automatically by the props you pass:
+ *
+ * ```tsx
+ * // With a header (title requires icon):
+ * <DesignCard title="Recent activity" icon={ActivityIcon}>
+ *   ...body...
+ * </DesignCard>
+ *
+ * // Body-only (no header):
+ * <DesignCard>
+ *   <h2 className="text-2xl font-semibold">Dashboard</h2>
+ *   <p className="text-muted-foreground">Overview of your user base</p>
+ * </DesignCard>
+ * ```
+ *
+ * Rules:
+ * - DO NOT add padding classes (`p-6`, `p-5`, etc.) to `className` — the
+ *   component already has built-in padding and extra padding will look wrong.
+ * - If you set `title`, you MUST also set `icon`. The TS types enforce this,
+ *   but writing `title` without `icon` will fail.
+ * - Body-only cards (no `title`) automatically go transparent in dark mode.
+ */
 export function DesignCard({
   title,
   subtitle,
diff --git a/packages/dashboard-ui-components/src/components/chart-card.tsx b/packages/dashboard-ui-components/src/components/chart-card.tsx
index 5e7bb7769a..71355d7f7b 100644
--- a/packages/dashboard-ui-components/src/components/chart-card.tsx
+++ b/packages/dashboard-ui-components/src/components/chart-card.tsx
@@ -20,6 +20,35 @@ export type DesignChartCardProps = {
   description?: React.ReactNode,
 } & Omit<React.ComponentProps<"div">, "title">;
 
+/**
+ * Card chrome (title + description + border) for a chart. Wrap every
+ * `AnalyticsChart` in this so the chart has context. Also used around raw
+ * Recharts components paired with `DesignChartContainer` for non-time-series
+ * fallbacks.
+ *
+ * ```tsx
+ * // Time-series chart (preferred):
+ * <DesignChartCard title="Signups" description="Last 30 days">
+ *   <AnalyticsChart data={data} state={state} onChange={setState} />
+ * </DesignChartCard>
+ *
+ * // Non-time-series fallback (static ranking, distribution, etc.):
+ * <DesignChartCard title="Top referrers" description="This month">
+ *   <DesignChartContainer config={chartConfig} maxHeight={300}>
+ *     <Recharts.BarChart data={data}>
+ *       <Recharts.CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+ *       <Recharts.XAxis dataKey="name" tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }} />
+ *       <Recharts.YAxis tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }} />
+ *       <Recharts.Tooltip content={<DesignChartTooltipContent />} />
+ *       <Recharts.Bar dataKey="count" fill={getDesignChartColor(0)} radius={[4, 4, 0, 0]} />
+ *     </Recharts.BarChart>
+ *   </DesignChartContainer>
+ * </DesignChartCard>
+ * ```
+ *
+ * `chartConfig` for `DesignChartContainer` maps each `dataKey` to its label and color:
+ * `{ count: { label: "Count", color: getDesignChartColor(0) } }`.
+ */
 export function DesignChartCard({
   gradient = "default",
   title,
diff --git a/packages/dashboard-ui-components/src/components/chart-legend.tsx b/packages/dashboard-ui-components/src/components/chart-legend.tsx
index 65bc488e44..48785acd7b 100644
--- a/packages/dashboard-ui-components/src/components/chart-legend.tsx
+++ b/packages/dashboard-ui-components/src/components/chart-legend.tsx
@@ -5,8 +5,6 @@ import * as RechartsPrimitive from "recharts";
 import { cn } from "@stackframe/stack-ui";
 import { useDesignChart, getPayloadConfigFromPayload } from "./chart-container";
 
-export const DesignChartLegend = RechartsPrimitive.Legend;
-
 export const DesignChartLegendContent = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<"div"> &
diff --git a/packages/dashboard-ui-components/src/components/data-grid/data-grid-sizing.ts b/packages/dashboard-ui-components/src/components/data-grid/data-grid-sizing.ts
new file mode 100644
index 0000000000..e52cd466f0
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/data-grid/data-grid-sizing.ts
@@ -0,0 +1,40 @@
+import type { CSSProperties } from "react";
+import type { DataGridColumnDef } from "./types";
+
+// CSS variable names for column widths set on the grid container.
+// Cells read these via var(...) so a single setProperty during drag
+// resizes every cell in a column with zero React re-renders.
+
+function colVar(id: string): `--col-${string}` {
+  return `--col-${id}`;
+}
+
+export function getColumnSizingStyle<TRow>(col: DataGridColumnDef<TRow>): CSSProperties {
+  const w = `var(${colVar(col.id)})`;
+  return { flex: `0 0 ${w}`, width: w, minWidth: col.minWidth ?? 50, maxWidth: col.maxWidth ?? 800 };
+}
+
+export function createGridSizingStyle(
+  widths: ReadonlyMap<string, number>,
+  totalWidth: number,
+): Record<string, string> {
+  const style: Record<string, string> = { "--grid-total-w": `${totalWidth}px` };
+  for (const [id, w] of widths) {
+    style[colVar(id)] = `${w}px`;
+  }
+  return style;
+}
+
+export function applyDraggedColumnWidth(
+  el: HTMLElement,
+  columnId: string,
+  width: number,
+  totalWidth: number,
+) {
+  el.style.setProperty(colVar(columnId), `${width}px`);
+  el.style.setProperty("--grid-total-w", `${totalWidth}px`);
+}
+
+export function clampColumnWidth<TRow>(col: DataGridColumnDef<TRow>, width: number): number {
+  return Math.max(col.minWidth ?? 50, Math.min(col.maxWidth ?? 800, width));
+}
diff --git a/packages/dashboard-ui-components/src/components/data-grid/data-grid-toolbar.tsx b/packages/dashboard-ui-components/src/components/data-grid/data-grid-toolbar.tsx
new file mode 100644
index 0000000000..81291b755f
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/data-grid/data-grid-toolbar.tsx
@@ -0,0 +1,372 @@
+"use client";
+
+import { cn } from "@stackframe/stack-ui";
+import {
+  Check,
+  DownloadSimple,
+  Eye,
+  EyeSlash,
+  MagnifyingGlass,
+  X,
+} from "@phosphor-icons/react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import type {
+  DataGridColumnDef,
+  DataGridDateDisplay,
+  DataGridStrings,
+  DataGridToolbarContext,
+} from "./types";
+
+// ─── Popover primitive ───────────────────────────────────────────────
+
+function usePopover() {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+
+  React.useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open]);
+
+  return { open, setOpen, ref };
+}
+
+function PopoverPanel({
+  children,
+  className,
+  popoverRef,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  popoverRef: React.Ref<HTMLDivElement>;
+}) {
+  return (
+    <div
+      ref={popoverRef}
+      className={cn(
+        "absolute top-full left-0 mt-1 z-50",
+        "bg-popover text-popover-foreground rounded-xl shadow-lg",
+        "ring-1 ring-black/[0.08] dark:ring-white/[0.1]",
+        "backdrop-blur-xl",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+// ─── Quick search ────────────────────────────────────────────────────
+
+function QuickSearch({
+  value,
+  onChange,
+  placeholder,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+}) {
+  return (
+    <div className="relative flex min-w-0 flex-1 items-center sm:flex-initial">
+      <MagnifyingGlass className="absolute left-2.5 h-3.5 w-3.5 text-muted-foreground/50 pointer-events-none" />
+      <input
+        type="text"
+        className={cn(
+          "h-8 w-full sm:w-52 pl-8 pr-7 rounded-xl text-xs",
+          "bg-background",
+          "border border-black/[0.08] dark:border-white/[0.08]",
+          "placeholder:text-muted-foreground/40",
+          "focus:outline-none focus:ring-1 focus:ring-foreground/[0.1]",
+          "transition-all duration-150",
+        )}
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      />
+      {value && (
+        <button
+          className="absolute right-2 text-muted-foreground/40 hover:text-muted-foreground"
+          onClick={() => onChange("")}
+          aria-label="Clear search"
+        >
+          <X className="h-3 w-3" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+// ─── Toolbar button ──────────────────────────────────────────────────
+
+function ToolbarButton({
+  children,
+  onClick,
+  active,
+  title,
+  className: extraClassName,
+}: {
+  children: React.ReactNode;
+  onClick?: () => void;
+  active?: boolean;
+  title?: string;
+  className?: string;
+}) {
+  return (
+    <button
+      className={cn(
+        "relative flex items-center justify-center rounded-lg text-xs font-medium",
+        "h-7 w-7",
+        "transition-colors duration-75",
+        active
+          ? "bg-foreground/[0.06] text-foreground"
+          : "text-muted-foreground hover:text-foreground hover:bg-foreground/[0.04]",
+        extraClassName,
+      )}
+      onClick={onClick}
+      title={title}
+    >
+      {children}
+    </button>
+  );
+}
+
+// ─── Column manager ──────────────────────────────────────────────────
+
+function ColumnManager<TRow>({
+  columns,
+  visibility,
+  onChange,
+  strings,
+  dateDisplay,
+  onDateDisplayChange,
+  hasDateColumns,
+}: {
+  columns: readonly DataGridColumnDef<TRow>[];
+  visibility: Record<string, boolean>;
+  onChange: (visibility: Record<string, boolean>) => void;
+  strings: DataGridStrings;
+  dateDisplay: DataGridDateDisplay;
+  onDateDisplayChange: (mode: DataGridDateDisplay) => void;
+  hasDateColumns: boolean;
+}) {
+  const hideableColumns = useMemo(
+    () => columns.filter((c) => c.hideable !== false),
+    [columns],
+  );
+
+  const toggleColumn = (id: string) => {
+    const current = visibility[id] !== false;
+    onChange({ ...visibility, [id]: !current });
+  };
+
+  const showAll = () => {
+    const next = { ...visibility };
+    for (const col of hideableColumns) next[col.id] = true;
+    onChange(next);
+  };
+
+  const hideAll = () => {
+    const next = { ...visibility };
+    for (const col of hideableColumns) next[col.id] = false;
+    onChange(next);
+  };
+
+  return (
+    <div className="p-2 min-w-[240px] max-w-[300px]">
+      <div className="max-h-[280px] overflow-y-auto space-y-0.5">
+        {hideableColumns.map((col) => {
+          const visible = visibility[col.id] !== false;
+          return (
+            <button
+              key={col.id}
+              className={cn(
+                "flex items-center gap-2 w-full px-2.5 py-1.5 rounded-lg text-xs",
+                "hover:bg-foreground/[0.06] transition-colors duration-75",
+                visible ? "text-foreground" : "text-muted-foreground/50",
+              )}
+              onClick={() => toggleColumn(col.id)}
+            >
+              {visible ? (
+                <Eye className="h-3.5 w-3.5 flex-shrink-0 text-blue-500" />
+              ) : (
+                <EyeSlash className="h-3.5 w-3.5 flex-shrink-0" />
+              )}
+              <span className="truncate text-left">
+                {typeof col.header === "string" ? col.header : col.id}
+              </span>
+              {visible && <Check className="h-3 w-3 ml-auto flex-shrink-0 text-blue-500" />}
+            </button>
+          );
+        })}
+      </div>
+      <div className="flex items-center gap-2 mt-2 pt-2 border-t border-foreground/[0.06]">
+        <button className="text-[10px] text-muted-foreground hover:text-foreground font-medium uppercase tracking-wider transition-colors duration-75" onClick={showAll}>
+          {strings.showAll}
+        </button>
+        <span className="text-muted-foreground/20">|</span>
+        <button className="text-[10px] text-muted-foreground hover:text-foreground font-medium uppercase tracking-wider transition-colors duration-75" onClick={hideAll}>
+          {strings.hideAll}
+        </button>
+      </div>
+
+      {/* Date format toggle — only rendered when at least one column
+          uses `type: "date"` or `"dateTime"`. Toggling writes to
+          `state.dateDisplay` and the grid re-renders every date cell. */}
+      {hasDateColumns && (
+        <div className="mt-2 pt-2 border-t border-foreground/[0.06]">
+          <div className="flex items-center justify-between gap-2 px-1">
+            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+              {strings.dateFormat}
+            </span>
+            <div className="inline-flex items-center gap-0.5 rounded-lg bg-foreground/[0.04] p-0.5">
+              <button
+                className={cn(
+                  "px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-75",
+                  dateDisplay === "relative"
+                    ? "bg-background text-foreground shadow-sm ring-1 ring-foreground/[0.06]"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+                onClick={() => onDateDisplayChange("relative")}
+              >
+                {strings.dateFormatRelative}
+              </button>
+              <button
+                className={cn(
+                  "px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-75",
+                  dateDisplay === "absolute"
+                    ? "bg-background text-foreground shadow-sm ring-1 ring-foreground/[0.06]"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+                onClick={() => onDateDisplayChange("absolute")}
+              >
+                {strings.dateFormatAbsolute}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Main toolbar ────────────────────────────────────────────────────
+
+export function DataGridToolbar<TRow>({
+  ctx,
+  extra,
+  extraLeading,
+  hideQuickSearch,
+}: {
+  ctx: DataGridToolbarContext<TRow>;
+  /** Extra content rendered inside the toolbar row, to the left of the
+   *  built-in columns / export actions. Use this to add table-specific
+   *  affordances (refresh, custom toggles, row counts) without giving up
+   *  the default actions. */
+  extra?: React.ReactNode;
+  /** Extra content rendered at the START of the toolbar row — occupies
+   *  the same position as the built-in quick search (after it, if the
+   *  quick search is visible). Use this together with `hideQuickSearch`
+   *  to fully replace the quick search with a custom input, e.g. an
+   *  AI-powered search bar. */
+  extraLeading?: React.ReactNode;
+  /** Whether to hide the built-in quick-search input. When `true`,
+   *  callers are expected to provide their own search UI via
+   *  `extraLeading`. */
+  hideQuickSearch?: boolean;
+}) {
+  const { state, onChange, columns, strings, exportCsv } = ctx;
+
+  const columnPopover = usePopover();
+
+  const updateVisibility = useCallback(
+    (visibility: Record<string, boolean>) => {
+      onChange((s) => ({ ...s, columnVisibility: visibility }));
+    },
+    [onChange],
+  );
+
+  const updateDateDisplay = useCallback(
+    (mode: DataGridDateDisplay) => {
+      onChange((s) => ({ ...s, dateDisplay: mode }));
+    },
+    [onChange],
+  );
+
+  const updateQuickSearch = useCallback(
+    (value: string) => {
+      onChange((s) => ({
+        ...s,
+        quickSearch: value,
+        // Reset to first page whenever the search text changes,
+        // otherwise you can end up on a page index that no longer
+        // exists in the filtered / refetched result set.
+        pagination: { ...s.pagination, pageIndex: 0 },
+      }));
+    },
+    [onChange],
+  );
+
+  const hasDateColumns = useMemo(
+    () => columns.some((c) => c.type === "date" || c.type === "dateTime"),
+    [columns],
+  );
+
+  return (
+    <div className="flex items-center gap-2 px-2.5 py-2.5 border-b border-foreground/[0.06]">
+      {!hideQuickSearch && (
+        <QuickSearch
+          value={state.quickSearch}
+          onChange={updateQuickSearch}
+          placeholder={strings.searchPlaceholder}
+        />
+      )}
+      {extraLeading}
+      <div className="flex-1 min-w-0" />
+
+      {extra}
+
+      <div className="relative shrink-0" ref={columnPopover.ref}>
+        <ToolbarButton
+          onClick={() => columnPopover.setOpen(!columnPopover.open)}
+          active={columnPopover.open}
+          title={strings.columns}
+        >
+          <Eye className="h-3.5 w-3.5" />
+        </ToolbarButton>
+        {columnPopover.open && (
+          <PopoverPanel popoverRef={columnPopover.ref} className="right-0 left-auto">
+            <ColumnManager
+              columns={columns}
+              visibility={state.columnVisibility}
+              onChange={updateVisibility}
+              strings={strings}
+              dateDisplay={state.dateDisplay}
+              onDateDisplayChange={updateDateDisplay}
+              hasDateColumns={hasDateColumns}
+            />
+          </PopoverPanel>
+        )}
+      </div>
+
+      <ToolbarButton onClick={exportCsv} title={strings.export}>
+        <DownloadSimple className="h-3.5 w-3.5" />
+      </ToolbarButton>
+    </div>
+  );
+}
diff --git a/packages/dashboard-ui-components/src/components/data-grid/data-grid.tsx b/packages/dashboard-ui-components/src/components/data-grid/data-grid.tsx
new file mode 100644
index 0000000000..fa9e7f41bc
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/data-grid/data-grid.tsx
@@ -0,0 +1,1252 @@
+"use client";
+
+import {
+  ArrowDown,
+  ArrowUp,
+  CaretDown,
+  CaretUp,
+  CheckSquare,
+  MinusSquare,
+  Square,
+} from "@phosphor-icons/react";
+import { cn } from "@stackframe/stack-ui";
+import { useVirtualizer, type VirtualItem } from "@tanstack/react-virtual";
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from "react";
+
+import { DesignSkeleton } from "../skeleton";
+import { DataGridToolbar } from "./data-grid-toolbar";
+import {
+  applyDraggedColumnWidth,
+  clampColumnWidth,
+  createGridSizingStyle,
+  getColumnSizingStyle,
+} from "./data-grid-sizing";
+import {
+  clearSelection,
+  exportToCsv,
+  formatGridDate,
+  getSortDirection,
+  getSortIndex,
+  isColumnVisible,
+  resolveColumnValue,
+  resolveColumnWidth,
+  selectAll,
+  toggleRowSelection,
+  toggleSort,
+} from "./state";
+import { resolveDataGridStrings } from "./strings";
+import type {
+  DataGridCellContext,
+  DataGridColumnDef,
+  DataGridDateDisplay,
+  DataGridFooterContext,
+  DataGridHeaderContext,
+  DataGridPaginationMode,
+  DataGridProps,
+  DataGridState,
+  DataGridStrings,
+  DataGridToolbarContext,
+  RowId
+} from "./types";
+// ─── Resize handle ───────────────────────────────────────────────────
+
+function ResizeHandle({
+  onResize,
+  onResizeEnd,
+}: {
+  onResize: (delta: number) => void;
+  onResizeEnd: () => void;
+}) {
+  const startXRef = useRef(0);
+  const rafRef = useRef(0);
+  const latestDeltaRef = useRef(0);
+  const callbacksRef = useRef({ onResize, onResizeEnd });
+
+  callbacksRef.current = { onResize, onResizeEnd };
+
+  const onPointerDown = useCallback(
+    (e: React.PointerEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      startXRef.current = e.clientX;
+      latestDeltaRef.current = 0;
+      const el = e.currentTarget as HTMLElement;
+      el.setPointerCapture(e.pointerId);
+      let finished = false;
+
+      const onMove = (ev: PointerEvent) => {
+        latestDeltaRef.current = ev.clientX - startXRef.current;
+        if (rafRef.current !== 0) {
+          return;
+        }
+
+        rafRef.current = requestAnimationFrame(() => {
+          rafRef.current = 0;
+          callbacksRef.current.onResize(latestDeltaRef.current);
+        });
+      };
+      const finish = () => {
+        if (finished) return;
+        finished = true;
+        if (rafRef.current !== 0) {
+          cancelAnimationFrame(rafRef.current);
+          rafRef.current = 0;
+          callbacksRef.current.onResize(latestDeltaRef.current);
+        }
+        el.removeEventListener("pointermove", onMove);
+        el.removeEventListener("pointerup", finish);
+        el.removeEventListener("pointercancel", finish);
+        el.removeEventListener("lostpointercapture", finish);
+        if (el.hasPointerCapture(e.pointerId)) {
+          el.releasePointerCapture(e.pointerId);
+        }
+        callbacksRef.current.onResizeEnd();
+      };
+
+      el.addEventListener("pointermove", onMove);
+      el.addEventListener("pointerup", finish);
+      el.addEventListener("pointercancel", finish);
+      el.addEventListener("lostpointercapture", finish);
+    },
+    [],
+  );
+
+  return (
+    <div
+      className={cn(
+        "absolute right-0 top-0 bottom-0 z-10 w-[5px] cursor-col-resize touch-none",
+        "group-hover/header:bg-foreground/[0.06] hover:!bg-blue-500/30",
+        "transition-colors duration-100",
+      )}
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+      onPointerDown={onPointerDown}
+    />
+  );
+}
+
+// ─── Header cell ─────────────────────────────────────────────────────
+
+function HeaderCell<TRow>({
+  col,
+  isSorted,
+  sortIndex,
+  resizable,
+  onSort,
+  onResize,
+  onResizeEnd,
+}: {
+  col: DataGridColumnDef<TRow>;
+  isSorted: false | "asc" | "desc";
+  sortIndex: number | null;
+  resizable: boolean;
+  onSort: (columnId: string, multi: boolean) => void;
+  onResize: (columnId: string, delta: number) => void;
+  onResizeEnd: () => void;
+}) {
+  const ctx: DataGridHeaderContext<TRow> = {
+    columnId: col.id,
+    columnDef: col,
+    isSorted,
+    sortIndex,
+  };
+  const label =
+    typeof col.header === "function" ? col.header(ctx) : col.header;
+
+  const sortable = col.sortable !== false;
+
+  return (
+    <div
+      className={cn(
+        "group/header relative flex items-center gap-1.5 px-3 select-none bg-transparent",
+        "border-r border-black/[0.04] dark:border-white/[0.04] last:border-r-0",
+        sortable && "cursor-pointer",
+      )}
+      style={getColumnSizingStyle(col)}
+      data-col-id={col.id}
+      onClick={(e) => sortable && onSort(col.id, e.metaKey || e.ctrlKey)}
+      role="columnheader"
+      aria-sort={isSorted === "asc" ? "ascending" : isSorted === "desc" ? "descending" : "none"}
+    >
+      <span
+        className={cn(
+          "flex-1 truncate text-xs font-semibold uppercase tracking-wider text-muted-foreground",
+          col.align === "center" && "text-center",
+          col.align === "right" && "text-right",
+        )}
+      >
+        {label}
+      </span>
+
+      {/* Sort indicator */}
+      {isSorted && (
+        <span className="flex items-center gap-0.5 text-foreground/60">
+          {isSorted === "asc" ? (
+            <ArrowUp className="h-3 w-3" weight="bold" />
+          ) : (
+            <ArrowDown className="h-3 w-3" weight="bold" />
+          )}
+          {sortIndex != null && (
+            <span className="text-[10px] font-medium tabular-nums">{sortIndex}</span>
+          )}
+        </span>
+      )}
+
+      {/* Unsorted hint on hover */}
+      {!isSorted && sortable && (
+        <span className="hidden group-hover/header:flex items-center text-foreground/20">
+          <CaretUp className="h-2.5 w-2.5 -mb-[1px]" weight="bold" />
+          <CaretDown className="h-2.5 w-2.5 -mt-[1px]" weight="bold" />
+        </span>
+      )}
+
+      {/* Resize handle */}
+      {resizable && col.resizable !== false && (
+        <ResizeHandle
+          onResize={(delta) => onResize(col.id, delta)}
+          onResizeEnd={onResizeEnd}
+        />
+      )}
+    </div>
+  );
+}
+
+// ─── Data cell ───────────────────────────────────────────────────────
+
+function DataCell<TRow>({
+  col,
+  row,
+  rowId,
+  rowIndex,
+  isSelected,
+  dateDisplay,
+}: {
+  col: DataGridColumnDef<TRow>;
+  row: TRow;
+  rowId: RowId;
+  rowIndex: number;
+  isSelected: boolean;
+  dateDisplay: DataGridDateDisplay;
+}) {
+  const value = resolveColumnValue(col, row);
+  const ctx: DataGridCellContext<TRow> = {
+    row,
+    rowId,
+    rowIndex,
+    value,
+    columnId: col.id,
+    isSelected,
+    dateDisplay,
+  };
+
+  const isDateCol = col.type === "date" || col.type === "dateTime";
+  let content: React.ReactNode;
+  if (col.renderCell) {
+    content = col.renderCell(ctx);
+  } else if (isDateCol) {
+    content = renderDateCell(value, dateDisplay, col);
+  } else {
+    content = formatCellValue(value);
+  }
+  const hasCellClick = col.onCellClick || col.onCellDoubleClick;
+
+  return (
+    <div
+      className={cn(
+        "flex items-center px-3 truncate bg-transparent",
+        "border-r border-black/[0.04] dark:border-white/[0.04] last:border-r-0",
+        "text-sm text-foreground",
+        col.align === "center" && "justify-center",
+        col.align === "right" && "justify-end",
+        hasCellClick && "cursor-pointer",
+      )}
+      style={getColumnSizingStyle(col)}
+      data-col-id={col.id}
+      role="gridcell"
+      onClick={col.onCellClick ? (e) => {
+        e.stopPropagation();
+        col.onCellClick!(ctx, e);
+      } : undefined}
+      onDoubleClick={col.onCellDoubleClick ? (e) => {
+        e.stopPropagation();
+        col.onCellDoubleClick!(ctx, e);
+      } : undefined}
+    >
+      {content}
+    </div>
+  );
+}
+
+function formatCellValue(value: unknown): React.ReactNode {
+  if (value == null) return <span className="text-muted-foreground/40">-</span>;
+  if (typeof value === "boolean") {
+    return (
+      <span
+        className={cn(
+          "inline-flex items-center px-1.5 py-0.5 rounded-md text-xs font-medium",
+          value
+            ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+            : "bg-foreground/[0.04] text-muted-foreground",
+        )}
+      >
+        {value ? "Yes" : "No"}
+      </span>
+    );
+  }
+  if (value instanceof Date) {
+    return (
+      <span className="tabular-nums text-muted-foreground">
+        {value.toLocaleDateString()}
+      </span>
+    );
+  }
+  return <span className="truncate">{String(value)}</span>;
+}
+
+/** Built-in date cell — mirrors what `formatGridDate` returns but wraps
+ * the display in a `<span>` with a `title` tooltip showing the absolute
+ * datetime. Only used when the column has `type: "date" | "dateTime"`
+ * and no custom `renderCell`. */
+function renderDateCell<TRow>(
+  value: unknown,
+  dateDisplay: DataGridDateDisplay,
+  col: DataGridColumnDef<TRow>,
+): React.ReactNode {
+  const { display, tooltip } = formatGridDate(value, dateDisplay, {
+    parseValue: col.parseValue,
+    dateFormat: col.dateFormat,
+  });
+  if (display == null) return <span className="text-muted-foreground/40">-</span>;
+  return (
+    <span
+      className="tabular-nums text-muted-foreground truncate cursor-help"
+      title={tooltip ?? undefined}
+    >
+      {display}
+    </span>
+  );
+}
+
+// ─── Skeleton row ────────────────────────────────────────────────────
+
+function SkeletonRow({
+  columns,
+  height,
+  showCheckbox,
+}: {
+  columns: readonly DataGridColumnDef<any>[];
+  height: number;
+  showCheckbox?: boolean;
+}) {
+  return (
+    <div className="flex" style={{ height }} role="row">
+      {showCheckbox && (
+        <div
+          className="flex items-center justify-center border-r border-black/[0.04] dark:border-white/[0.04]"
+          style={{ width: 44 }}
+        >
+          <DesignSkeleton className="h-4 w-4 rounded" />
+        </div>
+      )}
+      {columns.map((col) => (
+        <div
+          key={col.id}
+          className="flex items-center px-3 border-r border-black/[0.04] dark:border-white/[0.04] last:border-r-0"
+          style={getColumnSizingStyle(col)}
+        >
+          <DesignSkeleton
+            className="h-3.5 rounded-md"
+            style={{ width: `${40 + Math.random() * 40}%` }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ─── Checkbox cell ───────────────────────────────────────────────────
+
+function SelectionCheckbox({
+  checked,
+  indeterminate,
+  onChange,
+  ariaLabel,
+}: {
+  checked: boolean;
+  indeterminate?: boolean;
+  onChange: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  ariaLabel: string;
+}) {
+  const Icon = indeterminate ? MinusSquare : checked ? CheckSquare : Square;
+  return (
+    <button
+      className={cn(
+        "flex items-center justify-center w-full h-full",
+        "hover:bg-foreground/[0.04] transition-colors duration-75",
+        checked || indeterminate
+          ? "text-blue-600 dark:text-blue-400"
+          : "text-muted-foreground/40 hover:text-muted-foreground/60",
+      )}
+      onClick={(e) => {
+        e.stopPropagation();
+        onChange(e);
+      }}
+      aria-label={ariaLabel}
+      role="checkbox"
+      aria-checked={indeterminate ? "mixed" : checked}
+    >
+      <Icon className="h-4 w-4" weight={checked || indeterminate ? "fill" : "regular"} />
+    </button>
+  );
+}
+
+// ─── Infinite scroll sentinel ────────────────────────────────────────
+
+function InfiniteScrollSentinel({
+  onIntersect,
+  isLoading,
+  strings,
+}: {
+  onIntersect: () => void;
+  isLoading: boolean;
+  strings: DataGridStrings;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          onIntersect();
+        }
+      },
+      { rootMargin: "200px" },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [onIntersect]);
+
+  return (
+    <div ref={ref} className="flex items-center justify-center py-4">
+      {isLoading && (
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          <div className="h-3 w-3 rounded-full border-2 border-current border-t-transparent animate-spin" />
+          {strings.loadingMore}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Footer ──────────────────────────────────────────────────────────
+
+function DefaultFooter<TRow>({
+  ctx,
+  pagination,
+  onChange,
+}: {
+  ctx: DataGridFooterContext<TRow>;
+  pagination: DataGridPaginationMode;
+  onChange: React.Dispatch<React.SetStateAction<DataGridState>>;
+}) {
+  const { state, totalRowCount, visibleRowCount, selectedRowCount, strings } = ctx;
+  const totalPages = totalRowCount != null
+    ? Math.max(1, Math.ceil(totalRowCount / state.pagination.pageSize))
+    : undefined;
+
+  const setPage = (pageIndex: number) =>
+    onChange((s) => ({
+      ...s,
+      pagination: { ...s.pagination, pageIndex },
+    }));
+
+  const setPageSize = (pageSize: number) =>
+    onChange((s) => ({
+      ...s,
+      pagination: { ...s.pagination, pageSize, pageIndex: 0 },
+    }));
+
+  return (
+    <div className="flex items-center justify-between px-4 py-2.5 border-t border-foreground/[0.06] text-xs text-muted-foreground">
+      <div className="flex items-center gap-3">
+        {selectedRowCount > 0 && (
+          <span className="font-medium text-foreground">
+            {strings.rowsSelected(selectedRowCount)}
+          </span>
+        )}
+        {totalRowCount != null && (
+          <span>
+            {visibleRowCount} of {totalRowCount} rows
+          </span>
+        )}
+      </div>
+
+      {pagination !== "infinite" && totalPages != null && (
+        <div className="flex items-center gap-3">
+          {/* Page size selector */}
+          <div className="flex items-center gap-1.5">
+            <span>{strings.rowsPerPage}</span>
+            <select
+              className={cn(
+                "h-7 rounded-lg border border-black/[0.08] dark:border-white/[0.08] bg-background px-1.5",
+                "text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-foreground/[0.1]",
+                "cursor-pointer",
+              )}
+              value={state.pagination.pageSize}
+              onChange={(e) => setPageSize(Number(e.target.value))}
+            >
+              {[10, 25, 50, 100].map((size) => (
+                <option key={size} value={size}>
+                  {size}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Page navigation */}
+          <div className="flex items-center gap-1">
+            <button
+              className={cn(
+                "h-7 w-7 flex items-center justify-center rounded-lg",
+                "hover:bg-foreground/[0.04] disabled:opacity-30 disabled:cursor-not-allowed",
+                "transition-colors duration-75",
+              )}
+              onClick={() => setPage(state.pagination.pageIndex - 1)}
+              disabled={state.pagination.pageIndex === 0}
+              aria-label="Previous page"
+            >
+              <CaretUp className="h-3.5 w-3.5 -rotate-90" weight="bold" />
+            </button>
+            <span className="px-2 tabular-nums font-medium">
+              {strings.pageOf(state.pagination.pageIndex + 1, totalPages)}
+            </span>
+            <button
+              className={cn(
+                "h-7 w-7 flex items-center justify-center rounded-lg",
+                "hover:bg-foreground/[0.04] disabled:opacity-30 disabled:cursor-not-allowed",
+                "transition-colors duration-75",
+              )}
+              onClick={() => setPage(state.pagination.pageIndex + 1)}
+              disabled={state.pagination.pageIndex >= totalPages - 1}
+              aria-label="Next page"
+            >
+              <CaretDown className="h-3.5 w-3.5 -rotate-90" weight="bold" />
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Main DataGrid ───────────────────────────────────────────────────
+
+/**
+ * Interactive table with sorting, quick search, pagination, selection,
+ * and virtualization. Handles 10k+ rows smoothly. Pair with
+ * `useDataSource` for client-side data; use an async `dataSource`
+ * generator for server or infinite-scroll modes.
+ *
+ * ## Mental model (read this first — everything else depends on it)
+ *
+ * DataGrid is a **display** component. It does NOT sort, search, or
+ * paginate your data directly — you own that, but `useDataSource` does
+ * it for you. The `rows` prop is always the already-processed slice to
+ * show. The grid tracks user intent in `state` (sort model, quick
+ * search text, page index). You feed that state into `useDataSource`,
+ * and its output goes back in as `rows`.
+ *
+ * `useDataSource` IS the processor. Given your full dataset and the
+ * grid's state, it returns the searched + sorted + paginated rows
+ * ready to pass to DataGrid. This is the ONLY correct pattern for
+ * client-side data — do NOT pass a raw array to `rows`.
+ *
+ * ## Search (client vs async)
+ *
+ * - **Client mode** (`useDataSource` with `data`): a case-insensitive
+ *   substring match across every column is applied automatically.
+ *   Override the matcher with `matchRow` for fuzzy / weighted search,
+ *   or disable by passing `matchRow: () => true`.
+ * - **Async mode** (`useDataSource` with `dataSource`): `state.quickSearch`
+ *   is forwarded to the generator as `params.quickSearch`. Same
+ *   mechanism as `params.sorting` — a change triggers a refetch, and
+ *   the generator is the "matching logic" (typically a WHERE / ILIKE
+ *   clause in the backend query). The grid does NO client-side
+ *   filtering in async mode.
+ *
+ * ## The canonical pattern
+ *
+ * ```tsx
+ * // 1. Columns — define OUTSIDE the component or inside a useMemo. Must be stable.
+ * const columns = React.useMemo(() => [
+ *   { id: "name", header: "Name", accessor: "name", width: 180, type: "string" },
+ *   { id: "email", header: "Email", accessor: "email", width: 240, type: "string" },
+ *   { id: "role", header: "Role", accessor: "role", width: 120, type: "singleSelect",
+ *     valueOptions: [{ value: "admin", label: "Admin" }, { value: "member", label: "Member" }] },
+ *   { id: "signUps", header: "Sign-ups", accessor: "signUps", width: 120, type: "number", align: "right",
+ *     renderCell: ({ value }) => <span className="tabular-nums">{Number(value).toLocaleString()}</span> },
+ * ], []);
+ *
+ * // 2. Grid state — one hook, initialized from the columns. NEVER build the state object by hand.
+ * const [gridState, setGridState] = React.useState(() => createDefaultDataGridState(columns));
+ *
+ * // 3. Data source — wires your raw array through the grid state. ALWAYS call this
+ * //    hook unconditionally at the top level (no if/return before it).
+ * const gridData = useDataSource({
+ *   data: users,                   // your raw array (can be [] while loading)
+ *   columns,
+ *   getRowId: (row) => row.id,
+ *   sorting: gridState.sorting,
+ *   quickSearch: gridState.quickSearch,
+ *   pagination: gridState.pagination,
+ *   paginationMode: "client",       // "client" | "server" | "infinite"
+ * });
+ *
+ * // 4. Render — `rows` comes from gridData.rows, NOT from your raw array.
+ * <DataGrid
+ *   columns={columns}
+ *   rows={gridData.rows}
+ *   getRowId={(row) => row.id}
+ *   totalRowCount={gridData.totalRowCount}
+ *   isLoading={gridData.isLoading}
+ *   state={gridState}
+ *   onChange={setGridState}
+ *   selectionMode="none"            // "none" | "single" | "multiple"
+ *   maxHeight={480}
+ * />
+ * ```
+ *
+ * ## Iron rules (violating any of these breaks the grid)
+ *
+ * 1. The prop is `rows`, NOT `data`. There is no `data` prop on DataGrid.
+ *    `data` belongs on `useDataSource`.
+ * 2. `rows` is ALWAYS `gridData.rows`. Never pass your raw array to
+ *    `rows` — the grid won't search, sort, or paginate it.
+ * 3. Columns must be stable across renders. Define them outside the
+ *    component or wrap in `React.useMemo`. A fresh columns array every
+ *    render will reset sorting state.
+ * 4. Initialize grid state with `createDefaultDataGridState(columns)`.
+ *    Do NOT spell out the state object manually — you will miss fields
+ *    and crash.
+ * 5. `onChange` takes a `SetStateAction` (the setter you got from
+ *    `useState`). Pass `setGridState` directly. Do NOT wrap it unless
+ *    you know exactly what you're doing.
+ * 6. Call `useDataSource` ONCE per grid, at the top level, before any
+ *    early return. It contains hooks.
+ * 7. `renderCell` is a PURE function of its context. NEVER call React
+ *    hooks inside it (no `useState`, `useMemo`, `useEffect`, nothing).
+ *    If you need derived data per row, compute it BEFORE the render —
+ *    e.g. build a `Map<rowId, sparklineData>` in a `useMemo` and look
+ *    it up in `renderCell`.
+ * 8. `toolbar` accepts `false` (hide it) or a render function
+ *    `(ctx) => ReactNode`. Anything else — `true`, `undefined`, a state
+ *    variable — will either show the default toolbar or crash. If you
+ *    just want the default toolbar, omit the prop entirely.
+ * 9. The toolbar's search input writes to `state.quickSearch`. That
+ *    value is consumed by `useDataSource` — client mode filters
+ *    client-side, async mode forwards to the generator. Do NOT wire
+ *    a separate "controlled" search prop, everything flows through
+ *    grid state.
+ *
+ * ## renderCell — what you can and cannot do inside it
+ *
+ * ```tsx
+ * // OK — pure rendering from ctx:
+ * renderCell: ({ value }) => <span className="tabular-nums">{Number(value).toLocaleString()}</span>
+ * renderCell: ({ row }) => <Badge variant={row.active ? "default" : "outline"}>{row.status}</Badge>
+ *
+ * // OK — looking up pre-computed data by row id:
+ * // BEFORE the return, in the component body:
+ * const sparklinesById = React.useMemo(() => {
+ *   const m = new Map();
+ *   for (const u of users) {
+ *     m.set(u.id, u.recentActivity.map((n, i) => ({ ts: i, values: { primary: n } })));
+ *   }
+ *   return m;
+ * }, [users]);
+ * // Then inside the column def:
+ * renderCell: ({ rowId }) => <MiniSparkline data={sparklinesById.get(rowId) ?? []} />
+ *
+ * // NOT OK — hooks inside renderCell:
+ * renderCell: ({ row }) => {
+ *   const [hovered, setHovered] = React.useState(false);  // ← crashes the grid
+ *   const data = React.useMemo(() => ..., []);             // ← crashes the grid
+ *   return ...;
+ * }
+ *
+ * // NOT OK — embedding AnalyticsChart (or any other controlled, stateful chart) per row:
+ * // AnalyticsChart owns its own state, tooltips, zoom, and virtualized data
+ * // pipeline. Instantiating one per row is expensive and fights the grid's
+ * // virtualizer. Don't do it.
+ * ```
+ *
+ * ## Sparklines and mini-charts in cells — use raw Recharts
+ *
+ * If you want a tiny chart (sparkline, micro bar chart, trend line) inside
+ * a cell, drop down to raw `Recharts.*` components — they are lightweight
+ * and stateless, so they render cleanly per row without owning any state.
+ * Read pre-computed points off the row (or off a `Map<rowId, points>` you
+ * built in a `useMemo` above) and pass them directly to the Recharts
+ * primitive. Do NOT wrap them in `DesignChartContainer` or
+ * `DesignChartCard` inside a cell — those add chrome meant for full-size
+ * charts.
+ *
+ * ```tsx
+ * // OK — raw Recharts sparkline per row:
+ * renderCell: ({ rowId }) => {
+ *   const points = sparklinesById.get(rowId) ?? [];
+ *   return (
+ *     <Recharts.ResponsiveContainer width="100%" height={28}>
+ *       <Recharts.LineChart data={points} margin={{ top: 2, right: 2, bottom: 2, left: 2 }}>
+ *         <Recharts.Line type="monotone" dataKey="v" stroke="currentColor" strokeWidth={1.5} dot={false} isAnimationActive={false} />
+ *       </Recharts.LineChart>
+ *     </Recharts.ResponsiveContainer>
+ *   );
+ * }
+ * ```
+ *
+ * Keep in-cell Recharts configs minimal: no axes, no tooltips, no animation
+ * (`isAnimationActive={false}`), tight margins, fixed height. The goal is a
+ * visual summary, not an interactive chart.
+ *
+ * ## State shape (from `createDefaultDataGridState`)
+ *
+ * ```ts
+ * {
+ *   sorting: [],                                        // { columnId, direction: "asc" | "desc" }[]
+ *   quickSearch: "",                                    // search input text
+ *   dateDisplay: "relative",                            // "relative" | "absolute"
+ *   columnVisibility: {}, columnWidths: {...},
+ *   columnPinning: { left: [], right: [] }, columnOrder: [...],
+ *   pagination: { pageIndex: 0, pageSize: 50 },
+ *   selection: { selectedIds: new Set(), anchorId: null },
+ * }
+ * ```
+ *
+ * Everything is updated through `setGridState` — the toolbar, header,
+ * and footer all call it for you. You do not need to wire any of this
+ * manually.
+ *
+ * ## Height and scrolling
+ *
+ * DataGrid is NOT a card. It has no border, rounded corners, or shadow of
+ * its own. Wrap it in whatever chrome you want — a `DesignCard`, a section,
+ * or just raw layout. The grid itself fills its parent's height via
+ * `h-full`.
+ *
+ * How the grid gets its height (pick ONE):
+ * 1. Bounded parent — put the grid inside a flex/grid container with a
+ *    definite height (e.g. `flex-1 min-h-0` inside a page-filling flex
+ *    column). The grid stretches to that height and scrolls its body.
+ * 2. `maxHeight` prop — pass a number (pixels) or CSS string
+ *    (`"480px"`, `"60vh"`, `"100%"`). The grid caps at that size and
+ *    scrolls its body.
+ * 3. Unbounded — omit `maxHeight` and let the parent grow freely. The
+ *    grid renders at its full content height and the page scrolls. Fine
+ *    for small lists; bad UX for thousands of rows.
+ *
+ * The toolbar, header, and footer are always `shrink-0`; only the body
+ * scrolls. You do NOT need to subtract toolbar/footer heights from
+ * `maxHeight` — the grid's internal flex layout handles that.
+ *
+ * ## When to use what
+ *
+ * - Simple static list, < 20 rows, no interaction → use a plain table component instead.
+ * - Interactive table, sortable + searchable, any size → `DataGrid` +
+ *   `useDataSource` with `paginationMode: "client"`.
+ * - Infinite scroll over a huge dataset you fetch in pages → `dataSource` async
+ *   generator + `paginationMode: "infinite"`. Only reach for this if you actually
+ *   need pagination over a remote source. For anything that fits in memory,
+ *   `"client"` is simpler and faster.
+ *
+ * ## Features you get for free
+ *
+ * Quick search, sortable columns (shift-click for multi-sort), column
+ * visibility toggle, column resize, CSV export, virtualized rendering
+ * for 10k+ rows, keyboard navigation, and a relative/absolute date
+ * toggle for `date` / `dateTime` columns.
+ */
+export function DataGrid<TRow>(props: DataGridProps<TRow>) {
+  const {
+    columns: allColumns,
+    rows,
+    getRowId,
+    totalRowCount,
+    isLoading = false,
+    isRefetching = false,
+    hasMore = false,
+    isLoadingMore = false,
+    onLoadMore,
+    state,
+    onChange,
+    paginationMode = "paginated",
+    selectionMode = "none",
+    resizable = true,
+    rowHeight = 44,
+    headerHeight = 44,
+    overscan = 5,
+    maxHeight,
+    toolbar,
+    toolbarExtra,
+    emptyState,
+    loadingState,
+    footer,
+    footerExtra,
+    exportFilename = "export",
+    strings: stringsOverride,
+    className,
+    // Callbacks
+    onRowClick,
+    onRowDoubleClick,
+    onSelectionChange,
+    onSortChange,
+  } = props;
+
+  const strings = useMemo(
+    () => resolveDataGridStrings(stringsOverride),
+    [stringsOverride],
+  );
+
+  // ── Visible columns ──────────────────────────────────────────
+  const visibleColumns = useMemo(
+    () =>
+      (state.columnOrder.length > 0
+        ? state.columnOrder
+          .map((id) => allColumns.find((c) => c.id === id))
+          .filter(Boolean) as DataGridColumnDef<TRow>[]
+        : allColumns
+      ).filter((col) => isColumnVisible(col.id, state.columnVisibility)),
+    [allColumns, state.columnOrder, state.columnVisibility],
+  );
+
+  // ── Row IDs (stable) ─────────────────────────────────────────
+  const rowIds = useMemo(() => rows.map(getRowId), [rows, getRowId]);
+
+  // ── Column widths ────────────────────────────────────────────
+  const visibleColumnMetrics = useMemo(() => {
+    const widths = new Map<string, number>();
+    let totalWidth = selectionMode !== "none" ? 44 : 0;
+
+    for (const col of visibleColumns) {
+      const width = resolveColumnWidth(col, state.columnWidths[col.id]);
+      widths.set(col.id, width);
+      totalWidth += width;
+    }
+
+    return { widths, totalWidth };
+  }, [selectionMode, state.columnWidths, visibleColumns]);
+
+  const gridSizingStyle = useMemo(
+    () => createGridSizingStyle(visibleColumnMetrics.widths, visibleColumnMetrics.totalWidth),
+    [visibleColumnMetrics],
+  );
+
+  // Resize drag tracked via ref — zero React re-renders during drag.
+  // CSS variables on gridRef are mutated directly; committed on pointer up.
+  const resizeRef = useRef<{ columnId: string; baseWidth: number; baseTotalWidth: number; latestWidth: number } | null>(null);
+  const gridRef = useRef<HTMLDivElement>(null);
+
+  // ── Handlers ─────────────────────────────────────────────────
+  const handleSort = useCallback(
+    (columnId: string, multi: boolean) => {
+      onChange((s) => {
+        const next = toggleSort(s.sorting, columnId, multi);
+        onSortChange?.(next);
+        return { ...s, sorting: next };
+      });
+    },
+    [onChange, onSortChange],
+  );
+
+  const handleResize = useCallback(
+    (columnId: string, delta: number) => {
+      const col = allColumns.find((c) => c.id === columnId);
+      if (!col) return;
+      if (!resizeRef.current || resizeRef.current.columnId !== columnId) {
+        const baseWidth = visibleColumnMetrics.widths.get(columnId) ?? resolveColumnWidth(col, state.columnWidths[columnId]);
+        resizeRef.current = { columnId, baseWidth, baseTotalWidth: visibleColumnMetrics.totalWidth, latestWidth: baseWidth };
+      }
+      const newWidth = clampColumnWidth(col, resizeRef.current.baseWidth + delta);
+      resizeRef.current.latestWidth = newWidth;
+      if (gridRef.current) {
+        applyDraggedColumnWidth(gridRef.current, columnId, newWidth, resizeRef.current.baseTotalWidth + (newWidth - resizeRef.current.baseWidth));
+      }
+    },
+    [allColumns, state.columnWidths, visibleColumnMetrics],
+  );
+
+  // Re-apply CSS vars after React re-renders (e.g. sort during drag)
+  useLayoutEffect(() => {
+    const r = resizeRef.current;
+    if (r && gridRef.current) {
+      applyDraggedColumnWidth(gridRef.current, r.columnId, r.latestWidth, r.baseTotalWidth + (r.latestWidth - r.baseWidth));
+    }
+  }, [gridSizingStyle]);
+
+  const handleResizeEnd = useCallback(() => {
+    const r = resizeRef.current;
+    resizeRef.current = null;
+    if (!r || r.latestWidth === r.baseWidth) return;
+    onChange((s) => ({ ...s, columnWidths: { ...s.columnWidths, [r.columnId]: r.latestWidth } }));
+  }, [onChange]);
+
+  const handleRowClick = useCallback(
+    (row: TRow, rowId: RowId, event: React.MouseEvent) => {
+      // Selection
+      if (selectionMode !== "none") {
+        onChange((s) => {
+          const next = toggleRowSelection(
+            s.selection,
+            rowId,
+            selectionMode,
+            event.shiftKey,
+            event.metaKey || event.ctrlKey,
+            rowIds,
+          );
+          // Fire callback after state update
+          if (onSelectionChange) {
+            const selectedRows = rows.filter((r) =>
+              next.selectedIds.has(getRowId(r)),
+            );
+            setTimeout(() => onSelectionChange(next.selectedIds, selectedRows), 0);
+          }
+          return { ...s, selection: next };
+        });
+      }
+
+      onRowClick?.(row, rowId, event);
+    },
+    [selectionMode, onChange, onRowClick, onSelectionChange, rowIds, rows, getRowId],
+  );
+
+  const handleRowSelectionCheckboxClick = useCallback(
+    (
+      row: TRow,
+      rowId: RowId,
+      event: React.MouseEvent<HTMLButtonElement>,
+    ) => {
+      handleRowClick(row, rowId, event);
+    },
+    [handleRowClick],
+  );
+
+  const handleSelectAll = useCallback(() => {
+    onChange((s) => {
+      const allSelected = rowIds.every((id) => s.selection.selectedIds.has(id));
+      const next = allSelected ? clearSelection() : selectAll(rowIds);
+      if (onSelectionChange) {
+        const selectedRows = allSelected
+          ? []
+          : rows;
+        setTimeout(() => onSelectionChange(next.selectedIds, [...selectedRows]), 0);
+      }
+      return { ...s, selection: next };
+    });
+  }, [onChange, rowIds, rows, onSelectionChange]);
+
+  const handleExportCsv = useCallback(() => {
+    exportToCsv(rows, visibleColumns, exportFilename);
+  }, [rows, visibleColumns, exportFilename]);
+
+  // ── Virtualizer ──────────────────────────────────────────────
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const headerScrollRef = useRef<HTMLDivElement>(null);
+  const rowVirtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => scrollContainerRef.current,
+    estimateSize: () => rowHeight,
+    overscan,
+  });
+
+  // Sync horizontal scroll from body to header
+  const handleBodyScroll = useCallback(() => {
+    const body = scrollContainerRef.current;
+    const header = headerScrollRef.current;
+    if (body && header) {
+      header.scrollLeft = body.scrollLeft;
+    }
+  }, []);
+
+  // ── Toolbar context ──────────────────────────────────────────
+  const toolbarCtx: DataGridToolbarContext<TRow> = useMemo(
+    () => ({
+      state,
+      onChange,
+      columns: allColumns,
+      visibleColumns,
+      totalRowCount,
+      selectedRowCount: state.selection.selectedIds.size,
+      strings,
+      exportCsv: handleExportCsv,
+    }),
+    [state, onChange, allColumns, visibleColumns, totalRowCount, strings, handleExportCsv],
+  );
+
+  // ── Footer context ───────────────────────────────────────────
+  const footerCtx: DataGridFooterContext<TRow> = useMemo(
+    () => ({
+      state,
+      totalRowCount,
+      visibleRowCount: rows.length,
+      selectedRowCount: state.selection.selectedIds.size,
+      paginationMode,
+      strings,
+    }),
+    [state, totalRowCount, rows.length, paginationMode, strings],
+  );
+
+  // ── Selection state for header checkbox ──────────────────────
+  const allSelected = rowIds.length > 0 && rowIds.every((id) => state.selection.selectedIds.has(id));
+  const someSelected = !allSelected && rowIds.some((id) => state.selection.selectedIds.has(id));
+
+  // ── Render ───────────────────────────────────────────────────
+  //
+  // Height model:
+  // - Root is `flex flex-col h-full min-h-0 bg-transparent`. `h-full`
+  //   makes the grid fill a bounded parent; in an unbounded parent it
+  //   resolves to `auto` and the grid takes the content's intrinsic size.
+  // - Toolbar/header/footer are `shrink-0`; the scroll body is
+  //   `flex-1 min-h-0 overflow-auto`, so the scroll area naturally takes
+  //   whatever space remains after the fixed-size chrome — regardless of
+  //   toolbar/footer size.
+  // - `maxHeight` is applied directly to the root; the scroll body never
+  //   subtracts chrome sizes manually (that math breaks when the toolbar
+  //   wraps, the footer grows, etc.).
+  return (
+    <div
+      ref={gridRef}
+      className={cn(
+        "flex flex-col h-full min-h-0 bg-transparent",
+        className,
+      )}
+      style={maxHeight != null ? { ...gridSizingStyle, maxHeight } : gridSizingStyle}
+      role="grid"
+      aria-rowcount={totalRowCount ?? rows.length}
+      aria-colcount={visibleColumns.length}
+    >
+      {/* Toolbar. When a custom `toolbar` render function is supplied,
+          it owns the whole row — `toolbarExtra` is ignored because the
+          custom render can consume `ctx` and include whatever it wants.
+          When the default toolbar is used, `toolbarExtra` is injected
+          into its row to the left of the columns / export actions. */}
+      {toolbar !== false && (
+        <div className="relative shrink-0 bg-transparent">
+          {toolbar ? (
+            toolbar(toolbarCtx)
+          ) : (
+            <DataGridToolbar
+              ctx={toolbarCtx}
+              extra={
+                typeof toolbarExtra === "function"
+                  ? toolbarExtra(toolbarCtx)
+                  : toolbarExtra
+              }
+            />
+          )}
+        </div>
+      )}
+
+      {/* Grid content */}
+      <div className="relative flex min-h-0 flex-1 flex-col">
+        {/* Refetch indicator — thin progress bar, no layout shift */}
+        {isRefetching && (
+          <div className="absolute top-0 left-0 right-0 h-0.5 z-30 bg-foreground/[0.04] overflow-hidden">
+            <div className="h-full w-1/3 bg-blue-500/60 rounded-full animate-pulse" />
+          </div>
+        )}
+
+        {/* Header row — separate from scroll body, syncs horizontal scroll */}
+        <div
+          ref={headerScrollRef}
+          className="overflow-hidden shrink-0 border-b border-foreground/[0.06]"
+        >
+          <div
+            className="flex"
+            style={{ height: headerHeight, minWidth: visibleColumnMetrics.totalWidth }}
+            role="row"
+          >
+            {selectionMode !== "none" && (
+              <div
+                className="flex items-center justify-center border-r border-foreground/[0.04]"
+                style={{ width: 44 }}
+              >
+                {selectionMode === "multiple" && (
+                  <SelectionCheckbox
+                    checked={allSelected}
+                    indeterminate={someSelected}
+                    onChange={handleSelectAll}
+                    ariaLabel="Select all rows"
+                  />
+                )}
+              </div>
+            )}
+            {visibleColumns.map((col) => (
+              <HeaderCell
+                key={col.id}
+                col={col}
+                isSorted={getSortDirection(state.sorting, col.id)}
+                sortIndex={getSortIndex(state.sorting, col.id)}
+                resizable={resizable}
+                onSort={handleSort}
+                onResize={handleResize}
+                onResizeEnd={handleResizeEnd}
+              />
+            ))}
+          </div>
+        </div>
+
+        {/* Scrollable body — flex-1 + min-h-0 makes it take the remaining
+            space inside the `flex flex-col` grid wrapper, no manual math. */}
+        <div
+          ref={scrollContainerRef}
+          className={cn(
+            "min-h-0 overflow-auto flex-1 bg-transparent",
+            // Custom scrollbar
+            "[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:h-1.5",
+            "[&::-webkit-scrollbar-track]:bg-transparent",
+            "[&::-webkit-scrollbar-thumb]:bg-foreground/[0.08] [&::-webkit-scrollbar-thumb]:rounded-full",
+            "[&::-webkit-scrollbar-thumb]:hover:bg-foreground/[0.15]",
+          )}
+          onScroll={handleBodyScroll}
+        >
+          {/* Loading initial */}
+          {isLoading && (
+            <div style={{ minWidth: visibleColumnMetrics.totalWidth }}>
+              {loadingState ??
+                Array.from({ length: 8 }).map((_, i) => (
+                  <SkeletonRow
+                    key={i}
+                    columns={visibleColumns}
+                    height={rowHeight}
+                    showCheckbox={selectionMode !== "none"}
+                  />
+                ))}
+            </div>
+          )}
+
+          {/* Empty state */}
+          {!isLoading && rows.length === 0 && (
+            <div
+              className="flex items-center justify-center py-16 text-sm text-muted-foreground"
+              style={{ minWidth: visibleColumnMetrics.totalWidth }}
+            >
+              {emptyState ?? strings.noData}
+            </div>
+          )}
+
+          {/* Virtualized rows */}
+          {!isLoading && rows.length > 0 && (
+            <div
+              style={{
+                height: rowVirtualizer.getTotalSize(),
+                width: "100%",
+                minWidth: visibleColumnMetrics.totalWidth,
+                position: "relative",
+              }}
+            >
+              {rowVirtualizer.getVirtualItems().map((virtualRow: VirtualItem) => {
+                const row = rows[virtualRow.index]!;
+                const rowId = getRowId(row);
+                const isSelected = state.selection.selectedIds.has(rowId);
+
+                const isOddRow = virtualRow.index % 2 === 1;
+                return (
+                  <div
+                    key={rowId}
+                    className={cn(
+                      "absolute left-0 w-full flex",
+                      "border-b border-black/[0.03] dark:border-white/[0.03]",
+                      "transition-colors duration-75",
+                      isSelected
+                        ? "bg-blue-500/[0.06] dark:bg-blue-400/[0.08] hover:bg-blue-500/[0.08] dark:hover:bg-blue-400/[0.1]"
+                        : isOddRow
+                          ? "bg-foreground/[0.02] dark:bg-foreground/[0.03] hover:bg-foreground/[0.04] dark:hover:bg-foreground/[0.06]"
+                          : "hover:bg-foreground/[0.025] dark:hover:bg-foreground/[0.04]",
+                      selectionMode !== "none" && "cursor-pointer",
+                    )}
+                    style={{
+                      height: rowHeight,
+                      transform: `translateY(${virtualRow.start}px)`,
+                    }}
+                    onClick={(e) => handleRowClick(row, rowId, e)}
+                    onDoubleClick={(e) => onRowDoubleClick?.(row, rowId, e)}
+                    role="row"
+                    aria-rowindex={virtualRow.index + 2}
+                    aria-selected={isSelected}
+                    data-row-id={rowId}
+                    data-state={isSelected ? "selected" : undefined}
+                  >
+                    {/* Selection checkbox */}
+                    {selectionMode !== "none" && (
+                      <div
+                        className="flex items-center justify-center border-r border-black/[0.04] dark:border-white/[0.04]"
+                        style={{ width: 44 }}
+                      >
+                        <SelectionCheckbox
+                          checked={isSelected}
+                          onChange={(event) => handleRowSelectionCheckboxClick(row, rowId, event)}
+                          ariaLabel={`Select row ${rowId}`}
+                        />
+                      </div>
+                    )}
+
+                    {/* Data cells */}
+                    {visibleColumns.map((col) => (
+                      <DataCell
+                        key={col.id}
+                        col={col}
+                        row={row}
+                        rowId={rowId}
+                        rowIndex={virtualRow.index}
+                        isSelected={isSelected}
+                        dateDisplay={state.dateDisplay}
+                      />
+                    ))}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
+          {/* Infinite scroll sentinel */}
+          {paginationMode === "infinite" && hasMore && !isLoading && (
+            <InfiniteScrollSentinel
+              onIntersect={onLoadMore ?? (() => {})}
+              isLoading={isLoadingMore}
+              strings={strings}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* Footer */}
+      {footer !== false && (
+        <div className="relative z-10 shrink-0 bg-transparent">
+          {footer ? (
+            footer(footerCtx)
+          ) : (
+            <DefaultFooter
+              ctx={footerCtx}
+              pagination={paginationMode}
+              onChange={onChange}
+            />
+          )}
+          {footerExtra && (
+            typeof footerExtra === "function" ? footerExtra(footerCtx) : footerExtra
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/dashboard-ui-components/src/components/data-grid/index.ts b/packages/dashboard-ui-components/src/components/data-grid/index.ts
new file mode 100644
index 0000000000..ef64820035
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/data-grid/index.ts
@@ -0,0 +1,68 @@
+export { DataGrid } from "./data-grid";
+
+export { DataGridToolbar } from "./data-grid-toolbar";
+
+export { useDataSource } from "./use-data-source";
+export type { UseDataSourceResult } from "./use-data-source";
+
+export {
+  createDefaultDataGridState,
+  resolveColumnValue,
+  resolveColumnWidth,
+  isColumnVisible,
+  toggleSort,
+  getSortDirection,
+  getSortIndex,
+  buildRowComparator,
+  paginateRows,
+  getTotalPages,
+  toggleRowSelection,
+  selectAll,
+  clearSelection,
+  exportToCsv,
+  defaultParseDate,
+  defaultFormatRelative,
+  defaultFormatAbsolute,
+  formatGridDate,
+  defaultMatchRow,
+  applyQuickSearch,
+  EMPTY_SORT_MODEL,
+  EMPTY_SELECTION,
+  DEFAULT_PAGINATION,
+} from "./state";
+
+export {
+  DATA_GRID_DEFAULT_STRINGS,
+  resolveDataGridStrings,
+} from "./strings";
+
+export type {
+  RowId,
+  DataGridColumnType,
+  DataGridColumnAlign,
+  DataGridColumnPin,
+  DataGridDateDisplay,
+  DataGridDateFormat,
+  DataGridCellContext,
+  DataGridHeaderContext,
+  DataGridColumnDef,
+  DataGridSelectOption,
+  DataGridSortItem,
+  DataGridSortModel,
+  DataGridSelectionMode,
+  DataGridSelectionModel,
+  DataGridColumnVisibility,
+  DataGridColumnPinning,
+  DataGridPaginationMode,
+  DataGridDataPaginationMode,
+  DataGridPaginationModel,
+  DataGridState,
+  DataGridFetchParams,
+  DataGridFetchResult,
+  DataGridDataSource,
+  DataGridCallbacks,
+  DataGridProps,
+  DataGridToolbarContext,
+  DataGridFooterContext,
+  DataGridStrings,
+} from "./types";
diff --git a/packages/dashboard-ui-components/src/components/data-grid/state.ts b/packages/dashboard-ui-components/src/components/data-grid/state.ts
new file mode 100644
index 0000000000..1e0047f165
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/data-grid/state.ts
@@ -0,0 +1,414 @@
+import { stringCompare } from "@stackframe/stack-shared/dist/utils/strings";
+import type {
+  DataGridColumnDef,
+  DataGridDateDisplay,
+  DataGridDateFormat,
+  DataGridPaginationModel,
+  DataGridSelectionModel,
+  DataGridSortModel,
+  DataGridState,
+} from "./types";
+
+// ─── Default state ───────────────────────────────────────────────────
+
+export const EMPTY_SORT_MODEL: DataGridSortModel = [];
+export const EMPTY_SELECTION: DataGridSelectionModel = {
+  selectedIds: new Set(),
+  anchorId: null,
+};
+export const DEFAULT_PAGINATION: DataGridPaginationModel = {
+  pageIndex: 0,
+  pageSize: 50,
+};
+
+/**
+ * Build the initial `DataGridState` for a set of columns. Pass this as the
+ * lazy initializer to `useState` — NEVER hand-assemble the state object.
+ *
+ * ```tsx
+ * const [gridState, setGridState] = React.useState(() =>
+ *   createDefaultDataGridState(columns)
+ * );
+ * ```
+ *
+ * `columns` must be defined BEFORE this call (obvious, but a common TDZ
+ * mistake: if you declare columns after the `useState`, you'll crash on
+ * the first render). Keep the columns reference stable across renders
+ * (define them outside the component or wrap in `React.useMemo`).
+ */
+export function createDefaultDataGridState(
+  columns: readonly DataGridColumnDef<any>[],
+): DataGridState {
+  const columnWidths: Record<string, number> = {};
+  const columnOrder: string[] = [];
+
+  for (const col of columns) {
+    columnWidths[col.id] = col.width ?? 150;
+    columnOrder.push(col.id);
+  }
+
+  return {
+    sorting: EMPTY_SORT_MODEL,
+    columnVisibility: {},
+    columnWidths,
+    columnPinning: { left: [], right: [] },
+    columnOrder,
+    pagination: DEFAULT_PAGINATION,
+    selection: EMPTY_SELECTION,
+    dateDisplay: "relative",
+    quickSearch: "",
+  };
+}
+
+// ─── Column helpers ──────────────────────────────────────────────────
+
+export function resolveColumnValue<TRow>(
+  col: DataGridColumnDef<TRow>,
+  row: TRow,
+): unknown {
+  if (typeof col.accessor === "function") return col.accessor(row);
+  const key = (col.accessor ?? col.id) as keyof TRow;
+  return row[key];
+}
+
+export function resolveColumnWidth(
+  col: DataGridColumnDef<any>,
+  storedWidth: number | undefined,
+): number {
+  return storedWidth ?? col.width ?? 150;
+}
+
+export function isColumnVisible(
+  columnId: string,
+  visibility: Record<string, boolean>,
+): boolean {
+  return visibility[columnId] !== false;
+}
+
+// ─── Sort helpers ────────────────────────────────────────────────────
+
+export function toggleSort(
+  model: DataGridSortModel,
+  columnId: string,
+  multiSort: boolean,
+): DataGridSortModel {
+  const existing = model.find((s) => s.columnId === columnId);
+
+  if (!existing) {
+    const item = { columnId, direction: "asc" as const };
+    return multiSort ? [...model, item] : [item];
+  }
+
+  if (existing.direction === "asc") {
+    const updated = { columnId, direction: "desc" as const };
+    return model.map((s) => (s.columnId === columnId ? updated : s));
+  }
+
+  // desc → remove
+  return model.filter((s) => s.columnId !== columnId);
+}
+
+export function getSortDirection(
+  model: DataGridSortModel,
+  columnId: string,
+): false | "asc" | "desc" {
+  const item = model.find((s) => s.columnId === columnId);
+  return item ? item.direction : false;
+}
+
+export function getSortIndex(
+  model: DataGridSortModel,
+  columnId: string,
+): number | null {
+  if (model.length <= 1) return null;
+  const idx = model.findIndex((s) => s.columnId === columnId);
+  return idx >= 0 ? idx + 1 : null;
+}
+
+// ─── Default sort comparator ─────────────────────────────────────────
+
+function defaultComparator(a: unknown, b: unknown): number {
+  if (a == null && b == null) return 0;
+  if (a == null) return -1;
+  if (b == null) return 1;
+
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+  return stringCompare(String(a), String(b));
+}
+
+export function buildRowComparator<TRow>(
+  sortModel: DataGridSortModel,
+  columns: readonly DataGridColumnDef<TRow>[],
+): ((a: TRow, b: TRow) => number) | null {
+  if (sortModel.length === 0) return null;
+
+  const colMap = new Map(columns.map((c) => [c.id, c]));
+
+  return (a, b) => {
+    for (const { columnId, direction } of sortModel) {
+      const col = colMap.get(columnId);
+      if (!col) continue;
+
+      const va = resolveColumnValue(col, a);
+      const vb = resolveColumnValue(col, b);
+      const cmp = col.sortComparator
+        ? col.sortComparator(va, vb)
+        : defaultComparator(va, vb);
+      if (cmp !== 0) return direction === "asc" ? cmp : -cmp;
+    }
+    return 0;
+  };
+}
+
+// ─── Pagination helpers ──────────────────────────────────────────────
+
+export function paginateRows<TRow>(
+  rows: readonly TRow[],
+  pagination: DataGridPaginationModel,
+): TRow[] {
+  const start = pagination.pageIndex * pagination.pageSize;
+  return rows.slice(start, start + pagination.pageSize) as TRow[];
+}
+
+export function getTotalPages(
+  totalRows: number,
+  pageSize: number,
+): number {
+  return Math.max(1, Math.ceil(totalRows / pageSize));
+}
+
+// ─── Selection helpers ───────────────────────────────────────────────
+
+export function toggleRowSelection(
+  selection: DataGridSelectionModel,
+  rowId: string,
+  mode: "single" | "multiple",
+  shiftKey: boolean,
+  ctrlKey: boolean,
+  allRowIds: readonly string[],
+): DataGridSelectionModel {
+  if (mode === "single") {
+    const isSelected = selection.selectedIds.has(rowId);
+    return {
+      selectedIds: isSelected ? new Set() : new Set([rowId]),
+      anchorId: isSelected ? null : rowId,
+    };
+  }
+
+  // Multiple mode
+  if (shiftKey && selection.anchorId != null) {
+    const anchorIdx = allRowIds.indexOf(selection.anchorId);
+    const currentIdx = allRowIds.indexOf(rowId);
+    if (anchorIdx >= 0 && currentIdx >= 0) {
+      const start = Math.min(anchorIdx, currentIdx);
+      const end = Math.max(anchorIdx, currentIdx);
+      const rangeIds = allRowIds.slice(start, end + 1);
+
+      const next = ctrlKey ? new Set(selection.selectedIds) : new Set<string>();
+      for (const id of rangeIds) next.add(id);
+
+      return { selectedIds: next, anchorId: selection.anchorId };
+    }
+  }
+
+  if (ctrlKey) {
+    // Toggle single in multi mode
+    const next = new Set(selection.selectedIds);
+    if (next.has(rowId)) {
+      next.delete(rowId);
+    } else {
+      next.add(rowId);
+    }
+    return { selectedIds: next, anchorId: rowId };
+  }
+
+  // Plain click in multi mode — select only this row
+  return {
+    selectedIds: new Set([rowId]),
+    anchorId: rowId,
+  };
+}
+
+export function selectAll(
+  allRowIds: readonly string[],
+): DataGridSelectionModel {
+  return {
+    selectedIds: new Set(allRowIds),
+    anchorId: null,
+  };
+}
+
+export function clearSelection(): DataGridSelectionModel {
+  return EMPTY_SELECTION;
+}
+
+// ─── Quick search ────────────────────────────────────────────────────
+
+/** Default row matcher used by `applyQuickSearch`. Case-insensitive
+ * substring match across every column's resolved cell value. Columns
+ * with `null` / `undefined` values are skipped. The query is expected
+ * to be pre-trimmed and lowercased by `applyQuickSearch` — this helper
+ * does NOT trim or lowercase it again, so if you wire it up yourself,
+ * do that first. */
+export function defaultMatchRow<TRow>(
+  row: TRow,
+  query: string,
+  columns: readonly DataGridColumnDef<TRow>[],
+): boolean {
+  for (const col of columns) {
+    const v = resolveColumnValue(col, row);
+    if (v == null) continue;
+    if (String(v).toLowerCase().includes(query)) return true;
+  }
+  return false;
+}
+
+/** Client-side quick-search filter. Returns the original array
+ * reference when `query` is empty, so calling this in a hot `useMemo`
+ * is cheap in the common "no search" case.
+ *
+ * Used by `useDataSource` in client mode. Exported so consumers driving
+ * the grid manually (or doing their own pre-filtering before feeding
+ * rows to an async data source) can stay consistent with the built-in
+ * search behaviour.
+ *
+ * Override `matchRow` for custom matching logic — e.g. fuzzy matching,
+ * field-specific weighting, or skipping some columns. */
+export function applyQuickSearch<TRow>(
+  rows: readonly TRow[],
+  query: string,
+  columns: readonly DataGridColumnDef<TRow>[],
+  matchRow: (
+    row: TRow,
+    query: string,
+    columns: readonly DataGridColumnDef<TRow>[],
+  ) => boolean = defaultMatchRow,
+): readonly TRow[] {
+  const trimmed = query.trim().toLowerCase();
+  if (!trimmed) return rows;
+  return rows.filter((r) => matchRow(r, trimmed, columns));
+}
+
+// ─── Date helpers ────────────────────────────────────────────────────
+
+/** Parse a raw cell value into a `Date`. Returns `null` for nullish,
+ * unparseable, or invalid dates. Accepts strings (including ISO and
+ * "YYYY-MM-DD HH:MM:SS"-style ClickHouse output), numbers (ms since
+ * epoch), and `Date` instances. For truly weird formats, override via
+ * `col.parseValue`. */
+export function defaultParseDate(value: unknown): Date | null {
+  if (value == null) return null;
+  if (value instanceof Date) return isNaN(value.getTime()) ? null : value;
+  if (typeof value === "number") {
+    const d = new Date(value);
+    return isNaN(d.getTime()) ? null : d;
+  }
+  if (typeof value === "string") {
+    const d = new Date(value);
+    return isNaN(d.getTime()) ? null : d;
+  }
+  return null;
+}
+
+const DIVISIONS: Array<{ amount: number; unit: Intl.RelativeTimeFormatUnit }> = [
+  { amount: 60, unit: "second" },
+  { amount: 60, unit: "minute" },
+  { amount: 24, unit: "hour" },
+  { amount: 7, unit: "day" },
+  { amount: 4.34524, unit: "week" },
+  { amount: 12, unit: "month" },
+  { amount: Number.POSITIVE_INFINITY, unit: "year" },
+];
+
+/** Default relative formatter — "1 day ago" / "in 2 hours" via
+ * `Intl.RelativeTimeFormat`. Pure function of the date; does NOT
+ * re-render as real time passes. */
+export function defaultFormatRelative(date: Date): string {
+  const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" });
+  let duration = (date.getTime() - Date.now()) / 1000;
+  for (const div of DIVISIONS) {
+    if (Math.abs(duration) < div.amount) {
+      return rtf.format(Math.round(duration), div.unit);
+    }
+    duration /= div.amount;
+  }
+  return rtf.format(Math.round(duration), "year");
+}
+
+/** Default absolute formatter — full locale date + time. */
+export function defaultFormatAbsolute(date: Date): string {
+  return date.toLocaleString();
+}
+
+/** Format a raw cell value for display in a `date` / `dateTime` column.
+ * Returns both the inline display string and the tooltip string (which
+ * is always the absolute form so users can read the exact datetime).
+ *
+ * Used internally by the grid's default date cell renderer, and exported
+ * so consumers writing a custom `renderCell` for a date column can stay
+ * visually consistent with the built-in behaviour.
+ *
+ * ```tsx
+ * renderCell: ({ value, dateDisplay }) => {
+ *   const { display, tooltip } = formatGridDate(value, dateDisplay);
+ *   if (!display) return <span className="text-muted-foreground/40">—</span>;
+ *   return <span title={tooltip ?? undefined}>{display}</span>;
+ * }
+ * ``` */
+export function formatGridDate(
+  value: unknown,
+  mode: DataGridDateDisplay,
+  opts?: {
+    parseValue?: (value: unknown) => Date | null;
+    dateFormat?: DataGridDateFormat;
+  },
+): { display: string | null; tooltip: string | null } {
+  const parse = opts?.parseValue ?? defaultParseDate;
+  const date = parse(value);
+  if (!date) return { display: null, tooltip: null };
+
+  const relative = opts?.dateFormat?.relative ?? defaultFormatRelative;
+  const absolute = opts?.dateFormat?.absolute ?? defaultFormatAbsolute;
+
+  const tooltip = absolute(date);
+  const display = mode === "relative" ? relative(date) : tooltip;
+  return { display, tooltip };
+}
+
+// ─── CSV Export ──────────────────────────────────────────────────────
+
+export function exportToCsv<TRow>(
+  rows: readonly TRow[],
+  columns: readonly DataGridColumnDef<TRow>[],
+  filename: string,
+): void {
+  const header = columns.map((col) =>
+    typeof col.header === "string" ? col.header : col.id,
+  );
+
+  const csvRows = rows.map((row) =>
+    columns.map((col) => {
+      const val = resolveColumnValue(col, row);
+      const formatted = col.formatValue ? col.formatValue(val, row) : String(val ?? "");
+      // Escape CSV special characters
+      if (formatted.includes(",") || formatted.includes('"') || formatted.includes("\n")) {
+        return `"${formatted.replace(/"/g, '""')}"`;
+      }
+      return formatted;
+    }),
+  );
+
+  const csvContent = [
+    header.join(","),
+    ...csvRows.map((row) => row.join(",")),
+  ].join("\n");
+
+  const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = `${filename}.csv`;
+  link.click();
+  URL.revokeObjectURL(url);
+}
diff --git a/packages/dashboard-ui-components/src/components/data-grid/strings.ts b/packages/dashboard-ui-components/src/components/data-grid/strings.ts
new file mode 100644
index 0000000000..3ad3028747
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/data-grid/strings.ts
@@ -0,0 +1,45 @@
+import type { DataGridStrings } from "./types";
+
+export const DATA_GRID_DEFAULT_STRINGS: DataGridStrings = {
+  // toolbar
+  searchPlaceholder: "Search\u2026",
+  columns: "Columns",
+  export: "Export",
+  density: "Density",
+  // column manager
+  showAll: "Show all",
+  hideAll: "Hide all",
+  resetColumns: "Reset",
+  // date display
+  dateFormat: "Date format",
+  dateFormatRelative: "Relative",
+  dateFormatAbsolute: "Absolute",
+  // selection
+  rowsSelected: (count) => `${count} row${count === 1 ? "" : "s"} selected`,
+  // pagination
+  rowsPerPage: "Rows per page",
+  pageOf: (page, total) => `${page} of ${total}`,
+  // empty / loading
+  noData: "No data",
+  loading: "Loading\u2026",
+  loadingMore: "Loading more\u2026",
+  // export
+  exportCsv: "Export CSV",
+  exportCopied: "Copied!",
+  // sort
+  sortAsc: "Sort ascending",
+  sortDesc: "Sort descending",
+  unsort: "Remove sort",
+  // misc
+  pinLeft: "Pin left",
+  pinRight: "Pin right",
+  unpin: "Unpin",
+  hideColumn: "Hide column",
+};
+
+export function resolveDataGridStrings(
+  override: Partial<DataGridStrings> | undefined,
+): DataGridStrings {
+  if (!override) return DATA_GRID_DEFAULT_STRINGS;
+  return { ...DATA_GRID_DEFAULT_STRINGS, ...override };
+}
diff --git a/packages/dashboard-ui-components/src/components/data-grid/types.ts b/packages/dashboard-ui-components/src/components/data-grid/types.ts
new file mode 100644
index 0000000000..82b8d70648
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/data-grid/types.ts
@@ -0,0 +1,363 @@
+import type { ReactNode } from "react";
+
+// ─── Row identity ────────────────────────────────────────────────────
+/** Every row must be uniquely identifiable. The grid resolves identity
+ * through the top-level `getRowId` prop. */
+export type RowId = string;
+
+// ─── Column definition ──────────────────────────────────────────────
+export type DataGridColumnType =
+  | "string"
+  | "number"
+  | "date"
+  | "dateTime"
+  | "boolean"
+  | "singleSelect"
+  | "custom";
+
+export type DataGridColumnAlign = "left" | "center" | "right";
+
+export type DataGridColumnPin = "left" | "right" | false;
+
+/** How `date` / `dateTime` cells render their value. `"relative"` shows
+ * "1 day ago"–style text with the full datetime in a tooltip; `"absolute"`
+ * shows the full datetime inline. */
+export type DataGridDateDisplay = "relative" | "absolute";
+
+/** Per-column overrides for how a `date` / `dateTime` cell is formatted.
+ * If either function is omitted the grid falls back to its default
+ * (Intl.RelativeTimeFormat + `toLocaleString()`). */
+export type DataGridDateFormat = {
+  relative?: (date: Date) => string;
+  absolute?: (date: Date) => string;
+};
+
+/** Context passed to `renderCell`. */
+export type DataGridCellContext<TRow> = {
+  row: TRow;
+  rowId: RowId;
+  rowIndex: number;
+  value: unknown;
+  columnId: string;
+  isSelected: boolean;
+  /** Current date display mode — consumers writing custom `renderCell`
+   * for `date` / `dateTime` columns should branch on this to match the
+   * grid's built-in behaviour. */
+  dateDisplay: DataGridDateDisplay;
+};
+
+/** Context passed to `renderHeader`. */
+export type DataGridHeaderContext<TRow> = {
+  columnId: string;
+  columnDef: DataGridColumnDef<TRow>;
+  isSorted: false | "asc" | "desc";
+  sortIndex: number | null;
+};
+
+/** A single column's full configuration. Generic over the row type. */
+export type DataGridColumnDef<TRow> = {
+  /** Unique identifier for this column. */
+  id: string;
+
+  /** Display label. If a function is given it receives the header context. */
+  header: string | ((ctx: DataGridHeaderContext<TRow>) => ReactNode);
+
+  /** Accessor — either a key of TRow or a function. If omitted, `id` is
+   * used as the key. */
+  accessor?: keyof TRow | ((row: TRow) => unknown);
+
+  /** Custom cell renderer. Falls back to plain text of the resolved value. */
+  renderCell?: (ctx: DataGridCellContext<TRow>) => ReactNode;
+
+  // ── Sizing ──────────────────────────────────────────────────
+  /** Initial width in pixels. Defaults to 150. */
+  width?: number;
+  /** Minimum width during resize. Defaults to 50. */
+  minWidth?: number;
+  /** Maximum width during resize. Defaults to 800. */
+  maxWidth?: number;
+  /** Flex grow factor. When set, remaining space is distributed among flex
+   * columns proportionally. */
+  flex?: number;
+
+  // ── Feature flags ──────────────────────────────────────────
+  sortable?: boolean;
+  resizable?: boolean;
+  hideable?: boolean;
+  /** Pin position. Defaults to `false` (unpinned). */
+  pin?: DataGridColumnPin;
+
+  // ── Display ──────────────────────────────────────────────────
+  align?: DataGridColumnAlign;
+  /** Column type affects default sorting. */
+  type?: DataGridColumnType;
+  /** For `singleSelect` type — available value options. */
+  valueOptions?: readonly DataGridSelectOption[];
+
+  // ── Overrides ──────────────────────────────────────────────
+  /** Custom sort comparator. Receives two resolved cell values.
+   * Return negative if a < b, positive if a > b, 0 if equal. */
+  sortComparator?: (a: unknown, b: unknown) => number;
+  /** Format a cell value to a plain string — used for export and
+   * clipboard copy. Defaults to `String(value)`. */
+  formatValue?: (value: unknown, row: TRow) => string;
+
+  // ── Date / dateTime ─────────────────────────────────────────
+  /** Parse a raw cell value into a `Date`. Only consulted when `type` is
+   * `"date"` or `"dateTime"`. Defaults to `new Date(value)` with graceful
+   * handling of `null` / `undefined` / invalid dates. Override for
+   * non-standard formats (e.g. ClickHouse's space-separated UTC strings). */
+  parseValue?: (value: unknown) => Date | null;
+  /** Per-column override for the relative / absolute date formatters. */
+  dateFormat?: DataGridDateFormat;
+
+  // ── Cell-level callbacks ──────────────────────────────────────
+  /** Fired when a cell in this column is clicked. */
+  onCellClick?: (ctx: DataGridCellContext<TRow>, event: React.MouseEvent) => void;
+  /** Fired when a cell in this column is double-clicked. */
+  onCellDoubleClick?: (ctx: DataGridCellContext<TRow>, event: React.MouseEvent) => void;
+};
+
+export type DataGridSelectOption = {
+  value: string;
+  label: string;
+};
+
+// ─── Sorting ─────────────────────────────────────────────────────────
+export type DataGridSortItem = {
+  columnId: string;
+  direction: "asc" | "desc";
+};
+export type DataGridSortModel = readonly DataGridSortItem[];
+
+// ─── Selection ───────────────────────────────────────────────────────
+export type DataGridSelectionMode = "none" | "single" | "multiple";
+
+export type DataGridSelectionModel = {
+  selectedIds: ReadonlySet<RowId>;
+  /** Tracks the last-clicked row for shift-range selection. */
+  anchorId: RowId | null;
+};
+
+// ─── Column visibility / pinning ─────────────────────────────────────
+export type DataGridColumnVisibility = Record<string, boolean>;
+
+export type DataGridColumnPinning = {
+  left: readonly string[];
+  right: readonly string[];
+};
+
+// ─── Pagination ──────────────────────────────────────────────────────
+/** UI display mode — "paginated" shows page controls, "infinite" shows scroll sentinel. */
+export type DataGridPaginationMode = "paginated" | "infinite";
+
+/** Data-fetching strategy used by `useDataSource`. */
+export type DataGridDataPaginationMode = "client" | "server" | "infinite";
+
+export type DataGridPaginationModel = {
+  pageIndex: number;
+  pageSize: number;
+};
+
+// ─── Combined grid state ─────────────────────────────────────────────
+export type DataGridState = {
+  sorting: DataGridSortModel;
+  columnVisibility: DataGridColumnVisibility;
+  columnWidths: Record<string, number>;
+  columnPinning: DataGridColumnPinning;
+  columnOrder: readonly string[];
+  pagination: DataGridPaginationModel;
+  selection: DataGridSelectionModel;
+  /** How `date` / `dateTime` columns render. Defaults to `"relative"`
+   * via `createDefaultDataGridState`. Toggled from the Columns popover
+   * whenever the grid has at least one date column. */
+  dateDisplay: DataGridDateDisplay;
+  /** Current quick-search text. Written by the built-in search input in
+   * the toolbar. `useDataSource` in client mode auto-filters by this
+   * value (via `applyQuickSearch`); in async mode it's passed through
+   * to the generator as `params.quickSearch`, where the consumer owns
+   * the "how do I match?" decision (typically by modifying the backend
+   * query). Defaults to `""`. */
+  quickSearch: string;
+};
+
+// ─── Data source ─────────────────────────────────────────────────────
+/** Params sent to the async data source on each fetch. */
+export type DataGridFetchParams = {
+  sorting: DataGridSortModel;
+  pagination: DataGridPaginationModel;
+  /** Current quick-search text. Passed through from `state.quickSearch`
+   * so the async generator can fold it into its query (e.g. a SQL WHERE
+   * clause). Empty string when the search box is empty. A change in
+   * this value triggers a refetch, same mechanism as sorting. */
+  quickSearch: string;
+  /** For cursor-based: the last row of the previous page. */
+  cursor: unknown;
+};
+
+/** Return type from a data source fetch. */
+export type DataGridFetchResult<TRow> = {
+  rows: TRow[];
+  /** Total row count if known. `-1` or `undefined` for unknown (infinite). */
+  totalRowCount?: number;
+  /** Cursor for the next page (for cursor-based pagination). */
+  nextCursor?: unknown;
+  /** If `false`, there are no more pages. */
+  hasMore?: boolean;
+};
+
+/** An async-generator data source yields pages of rows. The generator
+ * receives fetch params as its argument and yields pages. Yielding
+ * allows the grid to display partial results during loading. */
+export type DataGridDataSource<TRow> = (
+  params: DataGridFetchParams,
+) => AsyncGenerator<DataGridFetchResult<TRow>, void, undefined>;
+
+// ─── Callbacks ───────────────────────────────────────────────────────
+export type DataGridCallbacks<TRow> = {
+  onRowClick?: (row: TRow, rowId: RowId, event: React.MouseEvent) => void;
+  onRowDoubleClick?: (row: TRow, rowId: RowId, event: React.MouseEvent) => void;
+  onCellClick?: (row: TRow, columnId: string, value: unknown, event: React.MouseEvent) => void;
+  onSelectionChange?: (selectedIds: ReadonlySet<RowId>, selectedRows: TRow[]) => void;
+  onSortChange?: (model: DataGridSortModel) => void;
+  onColumnResize?: (columnId: string, width: number) => void;
+  onColumnVisibilityChange?: (model: DataGridColumnVisibility) => void;
+};
+
+// ─── Main props ──────────────────────────────────────────────────────
+export type DataGridProps<TRow> = {
+  /** Column definitions. */
+  columns: readonly DataGridColumnDef<TRow>[];
+
+  // ── Data (pre-resolved by the consumer) ────────────────────────
+  /** The rows to display. The consumer is responsible for sorting
+   *  and paginating before passing them in. */
+  rows: readonly TRow[];
+  /** Extract a unique identifier from each row. */
+  getRowId: (row: TRow) => RowId;
+  /** Total row count across all pages (used for pagination UI). */
+  totalRowCount?: number;
+  /** True while the initial data load is in progress (shows skeleton). */
+  isLoading?: boolean;
+  /** True during a background refetch (shows subtle indicator, keeps rows). */
+  isRefetching?: boolean;
+
+  // ── Infinite scroll ────────────────────────────────────────────
+  /** Whether more rows can be loaded (shows infinite scroll sentinel). */
+  hasMore?: boolean;
+  /** True while loading the next page of infinite scroll. */
+  isLoadingMore?: boolean;
+  /** Called when the infinite scroll sentinel becomes visible. */
+  onLoadMore?: () => void;
+
+  // ── State (fully controlled) ───────────────────────────────────
+  state: DataGridState;
+  onChange: React.Dispatch<React.SetStateAction<DataGridState>>;
+
+  // ── Modes ──────────────────────────────────────────────────────
+  /** UI mode for pagination. "paginated" shows page controls in the
+   *  footer. "infinite" shows a scroll sentinel instead. Defaults to
+   *  "paginated". */
+  paginationMode?: "paginated" | "infinite";
+  /** Selection behaviour. Defaults to "none". */
+  selectionMode?: DataGridSelectionMode;
+  /** Whether columns can be resized by dragging. Defaults to true. */
+  resizable?: boolean;
+
+  // ── Layout ─────────────────────────────────────────────────────
+  /** Row height in pixels. Defaults to 44. */
+  rowHeight?: number;
+  /** Header row height in pixels. Defaults to 44. */
+  headerHeight?: number;
+  /** Number of rows to render outside the visible area. Defaults to 5. */
+  overscan?: number;
+  /** Grid max height. If omitted, grid takes available space. */
+  maxHeight?: number | string;
+
+  // ── Callbacks ──────────────────────────────────────────────────
+} & DataGridCallbacks<TRow> & {
+  // ── Customisation ──────────────────────────────────────────────
+  /** Custom toolbar renderer. When `false`, toolbar is hidden entirely. */
+  toolbar?: false | ((ctx: DataGridToolbarContext<TRow>) => ReactNode);
+  /** Extra content rendered inside the default toolbar row, to the left of
+   *  the built-in columns / export actions. Use this to slot in
+   *  refresh buttons, custom toggles, row counts, etc. without giving up
+   *  the built-in actions. Ignored if a custom `toolbar` render function
+   *  is provided — that function owns the entire row. */
+  toolbarExtra?: ReactNode | ((ctx: DataGridToolbarContext<TRow>) => ReactNode);
+  /** Custom empty state. Defaults to a centered "No data" message. */
+  emptyState?: ReactNode;
+  /** Custom loading state. Defaults to skeleton rows. */
+  loadingState?: ReactNode;
+  /** Custom footer. When `false`, footer is hidden. */
+  footer?: false | ((ctx: DataGridFooterContext<TRow>) => ReactNode);
+  /** Extra content rendered to the right of the default footer info. */
+  footerExtra?: ReactNode | ((ctx: DataGridFooterContext<TRow>) => ReactNode);
+
+  /** Filename stem for CSV export (without extension). */
+  exportFilename?: string;
+  /** i18n overrides. */
+  strings?: Partial<DataGridStrings>;
+
+  className?: string;
+};
+
+// ─── Toolbar / footer context ────────────────────────────────────────
+export type DataGridToolbarContext<TRow> = {
+  state: DataGridState;
+  onChange: React.Dispatch<React.SetStateAction<DataGridState>>;
+  columns: readonly DataGridColumnDef<TRow>[];
+  visibleColumns: readonly DataGridColumnDef<TRow>[];
+  totalRowCount: number | undefined;
+  selectedRowCount: number;
+  strings: DataGridStrings;
+  /** Trigger a CSV export. */
+  exportCsv: () => void;
+};
+
+export type DataGridFooterContext<TRow> = {
+  state: DataGridState;
+  totalRowCount: number | undefined;
+  visibleRowCount: number;
+  selectedRowCount: number;
+  paginationMode: DataGridPaginationMode;
+  strings: DataGridStrings;
+};
+
+// ─── Strings ─────────────────────────────────────────────────────────
+export type DataGridStrings = {
+  // toolbar
+  searchPlaceholder: string;
+  columns: string;
+  export: string;
+  density: string;
+  // column manager
+  showAll: string;
+  hideAll: string;
+  resetColumns: string;
+  // date display
+  dateFormat: string;
+  dateFormatRelative: string;
+  dateFormatAbsolute: string;
+  // selection
+  rowsSelected: (count: number) => string;
+  // pagination
+  rowsPerPage: string;
+  pageOf: (page: number, total: number) => string;
+  // empty / loading
+  noData: string;
+  loading: string;
+  loadingMore: string;
+  // export
+  exportCsv: string;
+  exportCopied: string;
+  // sort
+  sortAsc: string;
+  sortDesc: string;
+  unsort: string;
+  // misc
+  pinLeft: string;
+  pinRight: string;
+  unpin: string;
+  hideColumn: string;
+};
diff --git a/packages/dashboard-ui-components/src/components/data-grid/use-data-source.ts b/packages/dashboard-ui-components/src/components/data-grid/use-data-source.ts
new file mode 100644
index 0000000000..78d2614d9f
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/data-grid/use-data-source.ts
@@ -0,0 +1,362 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type {
+  DataGridColumnDef,
+  DataGridDataSource,
+  DataGridFetchParams,
+  DataGridDataPaginationMode,
+  DataGridPaginationModel,
+  DataGridSortModel,
+  RowId,
+} from "./types";
+import {
+  applyQuickSearch,
+  buildRowComparator,
+  defaultMatchRow,
+  paginateRows,
+} from "./state";
+
+export type UseDataSourceResult<TRow> = {
+  /** All rows currently loaded (for infinite mode, the accumulated set). */
+  rows: readonly TRow[];
+  /** Total row count if known. */
+  totalRowCount: number | undefined;
+  /** Whether the initial load is in progress (no data at all yet). */
+  isLoading: boolean;
+  /** Whether a background refetch is happening (data already shown). */
+  isRefetching: boolean;
+  /** Whether more rows are being fetched (infinite scroll). */
+  isLoadingMore: boolean;
+  /** Request the next page (infinite scroll). */
+  loadMore: () => void;
+  /** Whether there are more pages to load. */
+  hasMore: boolean;
+  /** Reload from scratch. */
+  reload: () => void;
+};
+
+// ─── Client-side hook ────────────────────────────────────────────────
+// Memoised so resize / selection / other unrelated state changes
+// don't recompute or create new array references.
+
+function useClientDataSource<TRow>(opts: {
+  data: readonly TRow[];
+  columns: readonly DataGridColumnDef<TRow>[];
+  sorting: DataGridSortModel;
+  quickSearch: string;
+  matchRow: (
+    row: TRow,
+    query: string,
+    columns: readonly DataGridColumnDef<TRow>[],
+  ) => boolean;
+  pagination: DataGridPaginationModel;
+  paginationMode: DataGridDataPaginationMode;
+}): UseDataSourceResult<TRow> {
+  const { data, columns, sorting, quickSearch, matchRow, pagination, paginationMode } = opts;
+
+  // Stable serialised keys so useMemo only fires on real changes
+  const sortingKey = JSON.stringify(sorting);
+
+  const processed = useMemo(() => {
+    // Quick search is applied FIRST, on the full input. If nothing is
+    // typed this is a zero-cost no-op (applyQuickSearch returns the
+    // original array reference). Sort and paginate operate on the
+    // already-filtered set so the result counts are search-aware.
+    const searched = applyQuickSearch(data, quickSearch, columns, matchRow);
+    const comparator = buildRowComparator(sorting, columns);
+    const sorted = comparator ? [...searched].sort(comparator) : searched;
+    const totalRowCount = sorted.length;
+    const paged =
+      paginationMode === "client"
+        ? paginateRows(sorted as readonly TRow[], pagination)
+        : sorted;
+    return { rows: paged, totalRowCount };
+  }, [data, sortingKey, quickSearch, matchRow, pagination.pageIndex, pagination.pageSize, paginationMode, columns]);
+
+  return useMemo(() => ({
+    rows: processed.rows,
+    totalRowCount: processed.totalRowCount,
+    isLoading: false,
+    isRefetching: false,
+    isLoadingMore: false,
+    loadMore: () => {},
+    hasMore: false,
+    reload: () => {},
+  }), [processed]);
+}
+
+// ─── Async data source hook ──────────────────────────────────────────
+// Key behaviour: when refetching (sort change), we keep showing the old
+// rows and set `isRefetching` instead of `isLoading`. This avoids the
+// jarring flash-to-skeleton on every sort toggle.
+
+function useAsyncDataSource<TRow>(opts: {
+  dataSource: DataGridDataSource<TRow>;
+  getRowId: (row: TRow) => RowId;
+  sorting: DataGridSortModel;
+  quickSearch: string;
+  pagination: DataGridPaginationModel;
+  paginationMode: DataGridDataPaginationMode;
+}): UseDataSourceResult<TRow> {
+  const {
+    dataSource,
+    getRowId,
+    sorting,
+    quickSearch,
+    pagination,
+    paginationMode,
+  } = opts;
+
+  const [rows, setRows] = useState<TRow[]>([]);
+  const [totalRowCount, setTotalRowCount] = useState<number | undefined>(undefined);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isRefetching, setIsRefetching] = useState(false);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+
+  const cursorRef = useRef<unknown>(undefined);
+  const abortRef = useRef<AbortController | null>(null);
+  const pageIndexRef = useRef(0);
+  const hasDataRef = useRef(false);
+  const hasMountedServerPaginationRef = useRef(false);
+
+  const latestArgsRef = useRef({
+    dataSource,
+    getRowId,
+    sorting,
+    quickSearch,
+    pagination,
+  });
+  latestArgsRef.current = { dataSource, getRowId, sorting, quickSearch, pagination };
+
+  const sortingKey = JSON.stringify(sorting);
+  const quickSearchKey = quickSearch;
+
+  const fetchPage = useCallback(
+    async (append: boolean) => {
+      const {
+        dataSource: currentDataSource,
+        getRowId: currentGetRowId,
+        sorting: currentSorting,
+        quickSearch: currentQuickSearch,
+        pagination: currentPagination,
+      } = latestArgsRef.current;
+
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+
+      if (append) {
+        setIsLoadingMore(true);
+      } else {
+        // First load → skeleton. Subsequent → subtle refetch indicator.
+        if (hasDataRef.current) {
+          setIsRefetching(true);
+        } else {
+          setIsLoading(true);
+        }
+        cursorRef.current = undefined;
+        pageIndexRef.current = 0;
+      }
+
+      try {
+        const params: DataGridFetchParams = {
+          sorting: currentSorting,
+          quickSearch: currentQuickSearch,
+          pagination: append
+            ? { pageIndex: pageIndexRef.current, pageSize: currentPagination.pageSize }
+            : currentPagination,
+          cursor: cursorRef.current,
+        };
+
+        const gen = currentDataSource(params);
+
+        for await (const result of gen) {
+          if (controller.signal.aborted) return;
+
+          if (result.totalRowCount != null) {
+            setTotalRowCount(result.totalRowCount);
+          }
+          if (result.nextCursor !== undefined) {
+            cursorRef.current = result.nextCursor;
+          }
+          setHasMore(result.hasMore !== false);
+
+          if (append) {
+            setRows((prev) => {
+              const existingIds = new Set(prev.map(currentGetRowId));
+              const newRows = result.rows.filter(
+                (r) => !existingIds.has(currentGetRowId(r)),
+              );
+              return [...prev, ...newRows];
+            });
+          } else {
+            setRows(result.rows);
+          }
+
+          hasDataRef.current = true;
+          pageIndexRef.current++;
+        }
+      } catch (err) {
+        if (controller.signal.aborted) return;
+        console.error("[DataGrid] Data source error:", err);
+      } finally {
+        if (!controller.signal.aborted) {
+          setIsLoading(false);
+          setIsRefetching(false);
+          setIsLoadingMore(false);
+        }
+      }
+    },
+    [],
+  );
+
+  useEffect(() => {
+    fetchPage(false).catch(() => {});
+    return () => abortRef.current?.abort();
+  }, [fetchPage, sortingKey, quickSearchKey, pagination.pageSize]);
+
+  useEffect(() => {
+    if (paginationMode !== "server") {
+      hasMountedServerPaginationRef.current = false;
+      return;
+    }
+    if (!hasMountedServerPaginationRef.current) {
+      hasMountedServerPaginationRef.current = true;
+      return;
+    }
+    fetchPage(false).catch(() => {});
+  }, [fetchPage, paginationMode, pagination.pageIndex]);
+
+  const loadMore = useCallback(() => {
+    if (!isLoadingMore && hasMore && paginationMode === "infinite") {
+      fetchPage(true).catch(() => {});
+    }
+  }, [isLoadingMore, hasMore, paginationMode, fetchPage]);
+
+  const reload = useCallback(() => {
+    fetchPage(false).catch(() => {});
+  }, [fetchPage]);
+
+  return {
+    rows,
+    totalRowCount,
+    isLoading,
+    isRefetching,
+    isLoadingMore,
+    loadMore,
+    hasMore,
+    reload,
+  };
+}
+
+// ─── Noop data source (stable reference) ─────────────────────────────
+const NOOP_DATA_SOURCE: DataGridDataSource<any> = async function* () {};
+const NOOP_GET_ROW_ID = () => "";
+
+// ─── Public hook ─────────────────────────────────────────────────────
+// Both inner hooks are always called (React rules-of-hooks) but only
+// one provides the returned result.
+
+/**
+ * Hook that processes raw data through the grid's sort/pagination state
+ * and returns the `rows` slice ready to pass to `DataGrid`. This is the
+ * only correct way to feed client-side data into a grid.
+ *
+ * Two modes, picked by which prop you pass:
+ * - `data: TRow[]` → client-side mode. In-memory sort + paginate.
+ * - `dataSource: (params) => AsyncGenerator` → server / infinite mode.
+ *   The generator yields pages as you scroll or change pages.
+ *
+ * ```tsx
+ * // Client-side (most common):
+ * const gridData = useDataSource({
+ *   data: users,
+ *   columns,
+ *   getRowId: (row) => row.id,
+ *   sorting: gridState.sorting,
+ *   quickSearch: gridState.quickSearch,
+ *   pagination: gridState.pagination,
+ *   paginationMode: "client",
+ * });
+ *
+ * <DataGrid
+ *   columns={columns}
+ *   rows={gridData.rows}
+ *   totalRowCount={gridData.totalRowCount}
+ *   isLoading={gridData.isLoading}
+ *   state={gridState}
+ *   onChange={setGridState}
+ *   getRowId={(row) => row.id}
+ * />
+ * ```
+ *
+ * Rules:
+ * - Call this hook unconditionally at the top level, before any early return.
+ * - `rows` on `DataGrid` must ALWAYS be `gridData.rows`, never your raw array.
+ * - For server or infinite pagination, use `dataSource` — see the
+ *   `DataGridDataSource` type for the generator signature.
+ *
+ * Quick search:
+ * - Client mode (`data` prop): the hook auto-filters rows via
+ *   `applyQuickSearch` using a default case-insensitive substring match
+ *   across every column. Override with `matchRow` for custom matching
+ *   (fuzzy, weighted, field-specific, etc.).
+ * - Async mode (`dataSource` prop): the hook passes `quickSearch` into
+ *   `params.quickSearch` and re-runs the generator whenever the search
+ *   string changes. The consumer owns the matching logic (typically by
+ *   folding it into a backend query). The grid performs NO client-side
+ *   filtering in async mode.
+ */
+export function useDataSource<TRow>(opts: {
+  data?: readonly TRow[];
+  dataSource?: DataGridDataSource<TRow>;
+  columns: readonly DataGridColumnDef<TRow>[];
+  getRowId: (row: TRow) => RowId;
+  sorting: DataGridSortModel;
+  /** Current quick-search text, typically `gridState.quickSearch`. */
+  quickSearch: string;
+  /** Override the default client-mode matcher. Ignored in async mode
+   * (there the generator is the matcher). */
+  matchRow?: (
+    row: TRow,
+    query: string,
+    columns: readonly DataGridColumnDef<TRow>[],
+  ) => boolean;
+  pagination: DataGridPaginationModel;
+  paginationMode: DataGridDataPaginationMode;
+}): UseDataSourceResult<TRow> {
+  const {
+    data,
+    dataSource,
+    columns,
+    getRowId,
+    sorting,
+    quickSearch,
+    matchRow = defaultMatchRow,
+    pagination,
+    paginationMode,
+  } = opts;
+
+  const isClientMode = data != null && !dataSource;
+
+  const clientResult = useClientDataSource({
+    data: data ?? [],
+    columns,
+    sorting,
+    quickSearch,
+    matchRow,
+    pagination,
+    paginationMode,
+  });
+
+  const asyncResult = useAsyncDataSource({
+    dataSource: dataSource ?? NOOP_DATA_SOURCE,
+    getRowId: dataSource ? getRowId : NOOP_GET_ROW_ID,
+    sorting,
+    quickSearch,
+    pagination,
+    paginationMode,
+  });
+
+  return isClientMode ? clientResult : asyncResult;
+}
diff --git a/packages/dashboard-ui-components/src/components/empty-state.tsx b/packages/dashboard-ui-components/src/components/empty-state.tsx
index 4be0d18ddd..94b9a6c109 100644
--- a/packages/dashboard-ui-components/src/components/empty-state.tsx
+++ b/packages/dashboard-ui-components/src/components/empty-state.tsx
@@ -11,6 +11,22 @@ export type DesignEmptyStateProps = {
   className?: string,
 };
 
+/**
+ * Centered "no data" placeholder. Show this inside a `DataGrid` via the
+ * `emptyState` prop, inside a chart when a query returns zero rows, or
+ * inside a card when a section has nothing to display.
+ *
+ * ```tsx
+ * <DesignEmptyState
+ *   icon={SearchIcon}
+ *   title="No results"
+ *   description="Try adjusting your filters."
+ * />
+ * ```
+ *
+ * Prefer this over a raw "No data" div — it handles spacing, typography,
+ * and the optional icon for you. `icon` is a component type, not a rendered node.
+ */
 export function DesignEmptyState({
   icon: Icon,
   title = "No data available",
diff --git a/packages/dashboard-ui-components/src/components/metric-card.tsx b/packages/dashboard-ui-components/src/components/metric-card.tsx
index 73cdf702fa..ffb3da7765 100644
--- a/packages/dashboard-ui-components/src/components/metric-card.tsx
+++ b/packages/dashboard-ui-components/src/components/metric-card.tsx
@@ -29,6 +29,30 @@ export type DesignMetricCardProps = {
   gradient?: DesignMetricCardGradient,
 } & Omit<React.ComponentProps<"div">, "children">;
 
+/**
+ * KPI card for big-number metrics (users, revenue, signups, etc.).
+ * Use this instead of a plain `DesignCard` when the value is the focal point.
+ *
+ * ```tsx
+ * <DesignMetricCard
+ *   label="Total Users"
+ *   value="1,234"
+ *   description="+12% from last month"
+ *   trend={{ direction: "up", value: 12, label: "vs. last period" }}
+ *   icon={UsersIcon}
+ *   gradient="blue"
+ * />
+ * ```
+ *
+ * Notes:
+ * - `label` is the short caption (NOT `title`).
+ * - `value` can be a pre-formatted string ("1,234") or a number — prefer
+ *   strings so you control the format.
+ * - `description` is the subline (NOT `subtitle`).
+ * - `trend.value` is a NUMBER, not a pre-formatted "12%" string. The card
+ *   renders the arrow and formatting.
+ * - `icon` is a component type (e.g. `UsersIcon`), not a rendered node.
+ */
 export function DesignMetricCard({
   label,
   value,
diff --git a/packages/dashboard-ui-components/src/components/progress-bar.tsx b/packages/dashboard-ui-components/src/components/progress-bar.tsx
index e3448f7336..6413677442 100644
--- a/packages/dashboard-ui-components/src/components/progress-bar.tsx
+++ b/packages/dashboard-ui-components/src/components/progress-bar.tsx
@@ -23,6 +23,16 @@ export type DesignProgressBarProps = {
   className?: string,
 };
 
+/**
+ * Horizontal progress bar for quota / fill-level indicators. Takes a
+ * `value` and optional `max` (defaults to 100 — pass raw values, the
+ * component computes the percentage). Optional label + percentage display.
+ *
+ * ```tsx
+ * <DesignProgressBar value={usedSeats} max={totalSeats} label="Seats used" showPercentage />
+ * <DesignProgressBar value={75} gradient="green" />
+ * ```
+ */
 export function DesignProgressBar({
   value,
   max = 100,
diff --git a/packages/dashboard-ui-components/src/components/separator.tsx b/packages/dashboard-ui-components/src/components/separator.tsx
index b97487de64..0c04595d17 100644
--- a/packages/dashboard-ui-components/src/components/separator.tsx
+++ b/packages/dashboard-ui-components/src/components/separator.tsx
@@ -6,6 +6,15 @@ export type DesignSeparatorProps = {
   orientation?: "horizontal" | "vertical",
 } & React.HTMLAttributes<HTMLDivElement>;
 
+/**
+ * Thin divider line. Use `orientation="vertical"` inside a flex row to
+ * separate inline groups, or omit for a horizontal rule between sections.
+ *
+ * ```tsx
+ * <DesignSeparator />
+ * <DesignSeparator orientation="vertical" className="h-6" />
+ * ```
+ */
 export function DesignSeparator({
   orientation = "horizontal",
   className,
diff --git a/packages/dashboard-ui-components/src/components/skeleton.tsx b/packages/dashboard-ui-components/src/components/skeleton.tsx
index 248d8d31f4..470a4dc939 100644
--- a/packages/dashboard-ui-components/src/components/skeleton.tsx
+++ b/packages/dashboard-ui-components/src/components/skeleton.tsx
@@ -5,6 +5,18 @@ import type React from "react";
 
 export type DesignSkeletonProps = React.HTMLAttributes<HTMLDivElement>;
 
+/**
+ * Animated placeholder block. Use while data is loading — size it via
+ * `className` to match the content it's standing in for.
+ *
+ * ```tsx
+ * <DesignSkeleton className="h-4 w-[200px]" />
+ * <DesignSkeleton className="h-24 w-full rounded-lg" />
+ * ```
+ *
+ * Rule: always show a skeleton during initial load, not a spinner or
+ * "Loading..." text. Skeletons preserve layout and feel faster.
+ */
 export function DesignSkeleton({ className, ...props }: DesignSkeletonProps) {
   return (
     <div
diff --git a/packages/dashboard-ui-components/src/components/table.tsx b/packages/dashboard-ui-components/src/components/table.tsx
index 18f95606cf..7fe6186ef9 100644
--- a/packages/dashboard-ui-components/src/components/table.tsx
+++ b/packages/dashboard-ui-components/src/components/table.tsx
@@ -4,6 +4,31 @@ import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
 import { cn } from "@stackframe/stack-ui";
 import React from "react";
 
+/**
+ * Simple static table — header + rows + cells. Use this for small,
+ * read-only lists (< 20 rows, no interaction). For anything that needs
+ * sorting, filtering, pagination, or virtualization, use `DataGrid` +
+ * `useDataSource` instead.
+ *
+ * ```tsx
+ * <DesignTable>
+ *   <DesignTableHeader>
+ *     <DesignTableRow>
+ *       <DesignTableHead>Name</DesignTableHead>
+ *       <DesignTableHead>Email</DesignTableHead>
+ *     </DesignTableRow>
+ *   </DesignTableHeader>
+ *   <DesignTableBody>
+ *     {rows.map(row => (
+ *       <DesignTableRow key={row.id}>
+ *         <DesignTableCell>{row.name}</DesignTableCell>
+ *         <DesignTableCell>{row.email}</DesignTableCell>
+ *       </DesignTableRow>
+ *     ))}
+ *   </DesignTableBody>
+ * </DesignTable>
+ * ```
+ */
 export const DesignTable = forwardRefIfNeeded<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
diff --git a/packages/dashboard-ui-components/src/index.ts b/packages/dashboard-ui-components/src/index.ts
index 39cff89c82..71c2da44f9 100644
--- a/packages/dashboard-ui-components/src/index.ts
+++ b/packages/dashboard-ui-components/src/index.ts
@@ -40,7 +40,7 @@ export type { DesignChartConfig } from "./components/chart-container";
 
 export { DesignChartTooltip, DesignChartTooltipContent } from "./components/chart-tooltip";
 
-export { DesignChartLegend, DesignChartLegendContent } from "./components/chart-legend";
+export { DesignChartLegendContent } from "./components/chart-legend";
 
 export { DesignChartCard } from "./components/chart-card";
 export type { DesignChartCardProps } from "./components/chart-card";
@@ -53,3 +53,7 @@ export type { DesignProgressBarProps } from "./components/progress-bar";
 
 export { DesignEmptyState } from "./components/empty-state";
 export type { DesignEmptyStateProps } from "./components/empty-state";
+
+export * from "./components/analytics-chart";
+
+export * from "./components/data-grid";
diff --git a/packages/stack-shared/src/ai/image-limits.ts b/packages/stack-shared/src/ai/image-limits.ts
new file mode 100644
index 0000000000..687b8af8c0
--- /dev/null
+++ b/packages/stack-shared/src/ai/image-limits.ts
@@ -0,0 +1,62 @@
+/** Shared image attachment limits for AI chat (client composer + `/api/latest/ai/query/[mode]`). */
+
+export const MAX_IMAGES_PER_MESSAGE = 3;
+export const MAX_IMAGE_BYTES_PER_FILE = 3 * 1024 * 1024;
+export const MAX_IMAGE_MB_PER_FILE = MAX_IMAGE_BYTES_PER_FILE / (1024 * 1024);
+
+/** Decoded byte length of a base64 data URL or raw base64 (padding error ≤ 2 bytes). */
+export function estimateBase64ByteLength(dataUrl: string): number {
+  const commaIdx = dataUrl.indexOf(",");
+  const base64 = commaIdx === -1 ? dataUrl : dataUrl.slice(commaIdx + 1);
+  if (base64.length === 0) return 0;
+  let padding = 0;
+  if (base64.endsWith("==")) padding = 2;
+  else if (base64.endsWith("=")) padding = 1;
+  return Math.max(0, Math.floor((base64.length * 3) / 4) - padding);
+}
+
+type ValidationResult = { ok: true } | { ok: false, reason: string };
+type UnknownPart = { type?: unknown, image?: unknown };
+type MessageLike = { role?: unknown, content?: unknown };
+
+export function validateImageCount(imageCount: number): ValidationResult {
+  if (imageCount > MAX_IMAGES_PER_MESSAGE) {
+    return {
+      ok: false,
+      reason: `Maximum ${MAX_IMAGES_PER_MESSAGE} images per message.`,
+    };
+  }
+  return { ok: true };
+}
+
+export function validateImageByteLength(bytes: number): ValidationResult {
+  if (bytes > MAX_IMAGE_BYTES_PER_FILE) {
+    return {
+      ok: false,
+      reason: `Image exceeds ${MAX_IMAGE_MB_PER_FILE}MB limit (${(bytes / 1024 / 1024).toFixed(2)}MB).`,
+    };
+  }
+  return { ok: true };
+}
+
+/** Validates per-message image count and per-file size for user messages. */
+export function validateImageAttachments(messages: readonly MessageLike[]): ValidationResult {
+  for (const msg of messages) {
+    if (!Array.isArray(msg.content)) continue;
+    let imageCount = 0;
+    for (const rawPart of msg.content as unknown[]) {
+      if (!rawPart || typeof rawPart !== "object") continue;
+      const part = rawPart as UnknownPart;
+      if (part.type !== "image") continue;
+      imageCount++;
+      const countValidation = validateImageCount(imageCount);
+      if (!countValidation.ok) return countValidation;
+      if (typeof part.image === "string") {
+        const bytes = estimateBase64ByteLength(part.image);
+        const sizeValidation = validateImageByteLength(bytes);
+        if (!sizeValidation.ok) return sizeValidation;
+      }
+    }
+  }
+  return { ok: true };
+}
diff --git a/packages/stack-shared/src/interface/admin-interface.ts b/packages/stack-shared/src/interface/admin-interface.ts
index 9971ad5586..6450430ab5 100644
--- a/packages/stack-shared/src/interface/admin-interface.ts
+++ b/packages/stack-shared/src/interface/admin-interface.ts
@@ -5,6 +5,7 @@ import { AccessToken, InternalSession, RefreshToken } from "../sessions";
 import type { MoneyAmount } from "../utils/currency-constants";
 import type { Json } from "../utils/json";
 import { Result } from "../utils/results";
+import type { MetricsResponse } from "./admin-metrics";
 import type { AnalyticsQueryOptions, AnalyticsQueryResponse } from "./crud/analytics";
 import { EmailOutboxCrud } from "./crud/email-outbox";
 import { InternalEmailsCrud } from "./crud/emails";
@@ -342,7 +343,7 @@ export class StackAdminInterface extends StackServerInterface {
     );
   }
 
-  async getMetrics(includeAnonymous: boolean = false): Promise<any> {
+  async getMetrics(includeAnonymous: boolean = false): Promise<MetricsResponse> {
     const params = new URLSearchParams();
     if (includeAnonymous) {
       params.append('include_anonymous', 'true');
@@ -355,7 +356,7 @@ export class StackAdminInterface extends StackServerInterface {
       },
       null,
     );
-    return await response.json();
+    return (await response.json()) as MetricsResponse;
   }
 
   async sendTestEmail(data: {
diff --git a/packages/stack-shared/src/interface/admin-metrics.ts b/packages/stack-shared/src/interface/admin-metrics.ts
new file mode 100644
index 0000000000..60e0055d8f
--- /dev/null
+++ b/packages/stack-shared/src/interface/admin-metrics.ts
@@ -0,0 +1,170 @@
+import yup from "yup";
+import { yupArray, yupMixed, yupNumber, yupObject, yupRecord, yupString } from "../schema-fields";
+
+// Single source of truth for the `/internal/metrics` endpoint shape.
+//
+// Both the backend route handler (`apps/backend/src/app/api/latest/internal/metrics/route.tsx`)
+// and the dashboard hook (`apps/dashboard/src/lib/stack-app-internals.ts`) import
+// these schemas. The runtime validation lives in the schemas; the static types
+// are derived via `yup.InferType` so we never have to keep parallel copies in
+// sync.
+
+export const MetricsDataPointSchema = yupObject({
+  date: yupString().defined(),
+  activity: yupNumber().defined(),
+}).defined();
+
+export const MetricsDataPointsSchema = yupArray(MetricsDataPointSchema).defined();
+
+export const MetricsActivitySplitSchema = yupObject({
+  total: MetricsDataPointsSchema,
+  new: MetricsDataPointsSchema,
+  retained: MetricsDataPointsSchema,
+  reactivated: MetricsDataPointsSchema,
+}).defined();
+
+export const MetricsAuthOverviewSchema = yupObject({
+  verified_users: yupNumber().integer().defined(),
+  unverified_users: yupNumber().integer().defined(),
+  anonymous_users: yupNumber().integer().defined(),
+  total_teams: yupNumber().integer().defined(),
+  mau: yupNumber().integer().defined(),
+  daily_active_users_split: MetricsActivitySplitSchema,
+  daily_active_teams_split: MetricsActivitySplitSchema,
+  total_users_filtered: yupNumber().integer().defined(),
+}).defined();
+
+export const MetricsPaymentsOverviewSchema = yupObject({
+  subscriptions_by_status: yupRecord(yupString().defined(), yupNumber().defined()).defined(),
+  active_subscription_count: yupNumber().integer().defined(),
+  total_one_time_purchases: yupNumber().integer().defined(),
+  daily_subscriptions: MetricsDataPointsSchema,
+  revenue_cents: yupNumber().integer().defined(),
+  mrr_cents: yupNumber().integer().defined(),
+  total_orders: yupNumber().integer().defined(),
+  checkout_conversion_rate: yupNumber().defined(),
+}).defined();
+
+export const MetricsRecentEmailSchema = yupObject({
+  id: yupString().defined(),
+  status: yupString().defined(),
+  subject: yupString().defined(),
+  created_at_millis: yupNumber().defined(),
+}).defined();
+
+export const MetricsDailyEmailStatusBreakdownSchema = yupObject({
+  date: yupString().defined(),
+  ok: yupNumber().integer().defined(),
+  error: yupNumber().integer().defined(),
+  in_progress: yupNumber().integer().defined(),
+}).defined();
+
+export const MetricsEmailOverviewSchema = yupObject({
+  emails_by_status: yupRecord(yupString().defined(), yupNumber().defined()).defined(),
+  total_emails: yupNumber().integer().defined(),
+  daily_emails: MetricsDataPointsSchema,
+  daily_emails_by_status: yupArray(MetricsDailyEmailStatusBreakdownSchema).defined(),
+  emails_sent: yupNumber().integer().defined(),
+  recent_emails: yupArray(MetricsRecentEmailSchema).defined(),
+  deliverability_status: yupObject({
+    delivered: yupNumber().integer().defined(),
+    bounced: yupNumber().integer().defined(),
+    error: yupNumber().integer().defined(),
+    in_progress: yupNumber().integer().defined(),
+  }).defined(),
+  deliverability_rate: yupNumber().defined(),
+  bounce_rate: yupNumber().defined(),
+  click_rate: yupNumber().defined(),
+}).defined();
+
+export const MetricsDailyRevenuePointSchema = yupObject({
+  date: yupString().defined(),
+  new_cents: yupNumber().integer().defined(),
+  refund_cents: yupNumber().integer().defined(),
+}).defined();
+
+export const MetricsTopReferrerSchema = yupObject({
+  referrer: yupString().defined(),
+  visitors: yupNumber().integer().defined(),
+}).defined();
+
+export const MetricsTopRegionSchema = yupObject({
+  country_code: yupString().nullable().defined(),
+  region_code: yupString().nullable().defined(),
+  count: yupNumber().integer().defined(),
+}).defined();
+
+export const MetricsAnalyticsOverviewSchema = yupObject({
+  daily_page_views: MetricsDataPointsSchema,
+  daily_clicks: MetricsDataPointsSchema,
+  daily_visitors: MetricsDataPointsSchema,
+  daily_revenue: yupArray(MetricsDailyRevenuePointSchema).defined(),
+  total_revenue_cents: yupNumber().integer().defined(),
+  total_replays: yupNumber().integer().defined(),
+  recent_replays: yupNumber().integer().defined(),
+  visitors: yupNumber().integer().defined(),
+  avg_session_seconds: yupNumber().defined(),
+  online_live: yupNumber().integer().defined(),
+  revenue_per_visitor: yupNumber().defined(),
+  top_referrers: yupArray(MetricsTopReferrerSchema).defined(),
+  top_region: MetricsTopRegionSchema.nullable().defined(),
+  // dev-fallback fields (only present in non-production environments)
+  bounce_rate: yupNumber().optional(),
+  conversion_rate: yupNumber().optional(),
+  deltas: yupMixed().optional(),
+}).defined();
+
+export const MetricsLoginMethodEntrySchema = yupObject({
+  method: yupString().defined(),
+  count: yupNumber().integer().defined(),
+}).defined();
+
+// Recent user summary — a slim projection of UsersCrud["Admin"]["Read"] with
+// just the fields the overview list views actually read. Defined here so the
+// metrics response stays self-contained and doesn't pull in users-crud.
+//
+// `.noUnknown(false)` tells our strict object validator to allow the extra
+// fields that the backend returns as part of the full users-crud payload —
+// `is_anonymous`, `has_password`, `oauth_providers`, etc. — without rejecting
+// them. Only the keys explicitly listed here are validated; extras pass through.
+export const MetricsRecentUserSchema = yupObject({
+  id: yupString().defined(),
+  display_name: yupString().nullable().defined(),
+  primary_email: yupString().nullable().defined(),
+  profile_image_url: yupString().nullable().defined(),
+  signed_up_at_millis: yupNumber().defined(),
+  last_active_at_millis: yupNumber().nullable().defined(),
+}).noUnknown(false).defined();
+
+export const MetricsResponseBodySchema = yupObject({
+  total_users: yupNumber().integer().defined(),
+  daily_users: MetricsDataPointsSchema,
+  daily_active_users: MetricsDataPointsSchema,
+  users_by_country: yupRecord(yupString().defined(), yupNumber().defined()).defined(),
+  // recently_registered/active are CRUD User objects passed through from the
+  // backend. The schema only validates the fields the dashboard actually
+  // reads — extra fields from UsersCrud["Admin"]["Read"] are allowed through.
+  recently_registered: yupArray(MetricsRecentUserSchema).defined(),
+  recently_active: yupArray(MetricsRecentUserSchema).defined(),
+  login_methods: yupArray(MetricsLoginMethodEntrySchema).defined(),
+  auth_overview: MetricsAuthOverviewSchema,
+  payments_overview: MetricsPaymentsOverviewSchema,
+  email_overview: MetricsEmailOverviewSchema,
+  analytics_overview: MetricsAnalyticsOverviewSchema,
+}).defined();
+
+// Derived static types — single source of truth lives in the schemas above.
+export type MetricsDataPoint = yup.InferType<typeof MetricsDataPointSchema>;
+export type MetricsActivitySplit = yup.InferType<typeof MetricsActivitySplitSchema>;
+export type MetricsAuthOverview = yup.InferType<typeof MetricsAuthOverviewSchema>;
+export type MetricsPaymentsOverview = yup.InferType<typeof MetricsPaymentsOverviewSchema>;
+export type MetricsRecentEmail = yup.InferType<typeof MetricsRecentEmailSchema>;
+export type MetricsDailyEmailStatusBreakdown = yup.InferType<typeof MetricsDailyEmailStatusBreakdownSchema>;
+export type MetricsEmailOverview = yup.InferType<typeof MetricsEmailOverviewSchema>;
+export type MetricsDailyRevenuePoint = yup.InferType<typeof MetricsDailyRevenuePointSchema>;
+export type MetricsTopReferrer = yup.InferType<typeof MetricsTopReferrerSchema>;
+export type MetricsTopRegion = yup.InferType<typeof MetricsTopRegionSchema>;
+export type MetricsAnalyticsOverview = yup.InferType<typeof MetricsAnalyticsOverviewSchema>;
+export type MetricsLoginMethodEntry = yup.InferType<typeof MetricsLoginMethodEntrySchema>;
+export type MetricsRecentUser = yup.InferType<typeof MetricsRecentUserSchema>;
+export type MetricsResponse = yup.InferType<typeof MetricsResponseBodySchema>;
diff --git a/packages/template/src/lib/stack-app/apps/implementations/admin-app-impl.ts b/packages/template/src/lib/stack-app/apps/implementations/admin-app-impl.ts
index c34a8b8a3e..3238b7194b 100644
--- a/packages/template/src/lib/stack-app/apps/implementations/admin-app-impl.ts
+++ b/packages/template/src/lib/stack-app/apps/implementations/admin-app-impl.ts
@@ -1,6 +1,7 @@
 import { StackAdminInterface } from "@stackframe/stack-shared";
 import { getProductionModeErrors } from "@stackframe/stack-shared/dist/helpers/production-mode";
 import { InternalApiKeyCreateCrudResponse } from "@stackframe/stack-shared/dist/interface/admin-interface";
+import type { MetricsResponse } from "@stackframe/stack-shared/dist/interface/admin-metrics";
 import { AnalyticsQueryOptions, AnalyticsQueryResponse } from "@stackframe/stack-shared/dist/interface/crud/analytics";
 import { EmailTemplateCrud } from "@stackframe/stack-shared/dist/interface/crud/email-templates";
 import { InternalApiKeysCrud } from "@stackframe/stack-shared/dist/interface/crud/internal-api-keys";
@@ -558,8 +559,8 @@ export class _StackAdminAppImplIncomplete<HasTokenStore extends boolean, Project
     return {
       ...super[stackAppInternalsSymbol],
       // IF_PLATFORM react-like
-      useMetrics: (includeAnonymous: boolean = false): any => {
-        return useAsyncCache(this._metricsCache, [includeAnonymous] as const, "adminApp.useMetrics()");
+      useMetrics: (includeAnonymous: boolean = false): MetricsResponse => {
+        return useAsyncCache(this._metricsCache, [includeAnonymous] as const, "adminApp.useMetrics()") as MetricsResponse;
       }
       // END_PLATFORM
     };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dd890a4bd2..96593a4cc7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1551,6 +1551,9 @@ importers:
       '@stackframe/stack-ui':
         specifier: workspace:*
         version: link:../stack-ui
+      '@tanstack/react-virtual':
+        specifier: ^3.13.0
+        version: 3.13.18(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       class-variance-authority:
         specifier: ^0.7.0
         version: 0.7.1