fix

wip

apps/api/package.json

@@ -30,7 +30,6 @@
     "@openpanel/logger": "workspace:*",
     "@openpanel/payments": "workspace:*",
     "@openpanel/queue": "workspace:*",
-    "groupmq": "catalog:",
     "@openpanel/redis": "workspace:*",
     "@openpanel/trpc": "workspace:*",
     "@openpanel/validation": "workspace:*",
@@ -40,6 +39,7 @@
     "fastify": "^5.6.1",
     "fastify-metrics": "^12.1.0",
     "fastify-raw-body": "^5.0.0",
+    "groupmq": "catalog:",
     "jsonwebtoken": "^9.0.2",
     "ramda": "^0.29.1",
     "sharp": "^0.33.5",

apps/api/scripts/test.ts

@@ -63,6 +63,7 @@ async function main() {
         imported_at: null,
         sdk_name: 'test-script',
         sdk_version: '1.0.0',
+        groups: [],
       });
     }
 

apps/api/src/bots/index.ts

@@ -1,4 +1,4 @@
-import { cacheable, cacheableLru } from '@openpanel/redis';
+import { cacheable } from '@openpanel/redis';
 import bots from './bots';
 
 // Pre-compile regex patterns at module load time
@@ -15,7 +15,7 @@ const compiledBots = bots.map((bot) => {
 const regexBots = compiledBots.filter((bot) => 'compiledRegex' in bot);
 const includesBots = compiledBots.filter((bot) => 'includes' in bot);
 
-export const isBot = cacheableLru(
+export const isBot = cacheable(
   'is-bot',
   (ua: string) => {
     // Check simple string patterns first (fast)
@@ -40,8 +40,5 @@ export const isBot = cacheableLru(
 
     return null;
   },
-  {
-    maxSize: 1000,
-    ttl: 60 * 5,
-  },
+  60 * 5
 );

apps/api/src/controllers/gsc-oauth-callback.controller.ts

@@ -0,0 +1,167 @@
+import { googleGsc } from '@openpanel/auth';
+import { db, encrypt } from '@openpanel/db';
+import type { FastifyReply, FastifyRequest } from 'fastify';
+import { z } from 'zod';
+import { LogError } from '@/utils/errors';
+
+const OAUTH_SENSITIVE_KEYS = ['code', 'state'];
+
+function sanitizeOAuthQuery(
+  query: Record<string, unknown> | null | undefined
+): Record<string, string> {
+  if (!query || typeof query !== 'object') {
+    return {};
+  }
+  return Object.fromEntries(
+    Object.entries(query).map(([k, v]) => [
+      k,
+      OAUTH_SENSITIVE_KEYS.includes(k) ? '<redacted>' : String(v),
+    ])
+  );
+}
+
+export async function gscGoogleCallback(
+  req: FastifyRequest,
+  reply: FastifyReply
+) {
+  try {
+    const schema = z.object({
+      code: z.string(),
+      state: z.string(),
+    });
+
+    const query = schema.safeParse(req.query);
+    if (!query.success) {
+      throw new LogError(
+        'Invalid GSC callback query params',
+        sanitizeOAuthQuery(req.query as Record<string, unknown>)
+      );
+    }
+
+    const { code, state } = query.data;
+
+    const rawStoredState = req.cookies.gsc_oauth_state ?? null;
+    const rawCodeVerifier = req.cookies.gsc_code_verifier ?? null;
+    const rawProjectId = req.cookies.gsc_project_id ?? null;
+
+    const storedStateResult =
+      rawStoredState !== null ? req.unsignCookie(rawStoredState) : null;
+    const codeVerifierResult =
+      rawCodeVerifier !== null ? req.unsignCookie(rawCodeVerifier) : null;
+    const projectIdResult =
+      rawProjectId !== null ? req.unsignCookie(rawProjectId) : null;
+
+    if (
+      !(
+        storedStateResult?.value &&
+        codeVerifierResult?.value &&
+        projectIdResult?.value
+      )
+    ) {
+      throw new LogError('Missing GSC OAuth cookies', {
+        storedState: !storedStateResult?.value,
+        codeVerifier: !codeVerifierResult?.value,
+        projectId: !projectIdResult?.value,
+      });
+    }
+
+    if (
+      !(
+        storedStateResult?.valid &&
+        codeVerifierResult?.valid &&
+        projectIdResult?.valid
+      )
+    ) {
+      throw new LogError('Invalid GSC OAuth cookies', {
+        storedState: !storedStateResult?.value,
+        codeVerifier: !codeVerifierResult?.value,
+        projectId: !projectIdResult?.value,
+      });
+    }
+
+    const stateStr = storedStateResult?.value;
+    const codeVerifierStr = codeVerifierResult?.value;
+    const projectIdStr = projectIdResult?.value;
+
+    if (state !== stateStr) {
+      throw new LogError('GSC OAuth state mismatch', {
+        hasState: true,
+        hasStoredState: true,
+        stateMismatch: true,
+      });
+    }
+
+    const tokens = await googleGsc.validateAuthorizationCode(
+      code,
+      codeVerifierStr
+    );
+
+    const accessToken = tokens.accessToken();
+    const refreshToken = tokens.hasRefreshToken()
+      ? tokens.refreshToken()
+      : null;
+    const accessTokenExpiresAt = tokens.accessTokenExpiresAt();
+
+    if (!refreshToken) {
+      throw new LogError('No refresh token returned from Google GSC OAuth');
+    }
+
+    const project = await db.project.findUnique({
+      where: { id: projectIdStr },
+      select: { id: true, organizationId: true },
+    });
+
+    if (!project) {
+      throw new LogError('Project not found for GSC connection', {
+        projectId: projectIdStr,
+      });
+    }
+
+    await db.gscConnection.upsert({
+      where: { projectId: projectIdStr },
+      create: {
+        projectId: projectIdStr,
+        accessToken: encrypt(accessToken),
+        refreshToken: encrypt(refreshToken),
+        accessTokenExpiresAt,
+        siteUrl: '',
+      },
+      update: {
+        accessToken: encrypt(accessToken),
+        refreshToken: encrypt(refreshToken),
+        accessTokenExpiresAt,
+        lastSyncStatus: null,
+        lastSyncError: null,
+      },
+    });
+
+    reply.clearCookie('gsc_oauth_state');
+    reply.clearCookie('gsc_code_verifier');
+    reply.clearCookie('gsc_project_id');
+
+    const dashboardUrl =
+      process.env.DASHBOARD_URL || process.env.NEXT_PUBLIC_DASHBOARD_URL!;
+    const redirectUrl = `${dashboardUrl}/${project.organizationId}/${projectIdStr}/settings/gsc`;
+    return reply.redirect(redirectUrl);
+  } catch (error) {
+    req.log.error(error);
+    reply.clearCookie('gsc_oauth_state');
+    reply.clearCookie('gsc_code_verifier');
+    reply.clearCookie('gsc_project_id');
+    return redirectWithError(reply, error);
+  }
+}
+
+function redirectWithError(reply: FastifyReply, error: LogError | unknown) {
+  const url = new URL(
+    process.env.DASHBOARD_URL || process.env.NEXT_PUBLIC_DASHBOARD_URL!
+  );
+  url.pathname = '/login';
+  if (error instanceof LogError) {
+    url.searchParams.set('error', error.message);
+  } else {
+    url.searchParams.set('error', 'Failed to connect Google Search Console');
+  }
+  url.searchParams.set('correlationId', reply.request.id);
+  return reply.redirect(url.toString());
+}

apps/api/src/controllers/healthcheck.controller.ts

@@ -1,12 +1,12 @@
-import { isShuttingDown } from '@/utils/graceful-shutdown';
 import { chQuery, db } from '@openpanel/db';
 import { getRedisCache } from '@openpanel/redis';
 import type { FastifyReply, FastifyRequest } from 'fastify';
+import { isShuttingDown } from '@/utils/graceful-shutdown';
 
 // For docker compose healthcheck
 export async function healthcheck(
   request: FastifyRequest,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   try {
     const redisRes = await getRedisCache().ping();
@@ -21,6 +21,7 @@ export async function healthcheck(
       ch: chRes && chRes.length > 0,
     });
   } catch (error) {
+    request.log.warn('healthcheck failed', { error });
     return reply.status(503).send({
       ready: false,
       reason: 'dependencies not ready',
@@ -41,18 +42,22 @@ export async function readiness(request: FastifyRequest, reply: FastifyReply) {
 
   // Perform lightweight dependency checks for readiness
   const redisRes = await getRedisCache().ping();
-  const dbRes = await db.project.findFirst();
+  const dbRes = await db.$executeRaw`SELECT 1`;
   const chRes = await chQuery('SELECT 1');
 
-  const isReady = redisRes && dbRes && chRes;
+  const isReady = redisRes;
 
   if (!isReady) {
-    return reply.status(503).send({
-      ready: false,
-      reason: 'dependencies not ready',
+    const res = {
       redis: redisRes === 'PONG',
       db: !!dbRes,
       ch: chRes && chRes.length > 0,
+    };
+    request.log.warn('dependencies not ready', res);
+    return reply.status(503).send({
+      ready: false,
+      reason: 'dependencies not ready',
+      ...res,
     });
   }
 

apps/api/src/controllers/live.controller.ts

@@ -1,23 +1,10 @@
-import type { FastifyRequest } from 'fastify';
-import superjson from 'superjson';
-
 import type { WebSocket } from '@fastify/websocket';
-import {
-  eventBuffer,
-  getProfileById,
-  transformMinimalEvent,
-} from '@openpanel/db';
+import { eventBuffer } from '@openpanel/db';
 import { setSuperJson } from '@openpanel/json';
-import {
-  psubscribeToPublishedEvent,
-  subscribeToPublishedEvent,
-} from '@openpanel/redis';
+import { subscribeToPublishedEvent } from '@openpanel/redis';
 import { getProjectAccess } from '@openpanel/trpc';
 import { getOrganizationAccess } from '@openpanel/trpc/src/access';
-
-export function getLiveEventInfo(key: string) {
-  return key.split(':').slice(2) as [string, string];
-}
+import type { FastifyRequest } from 'fastify';
 
 export function wsVisitors(
   socket: WebSocket,
@@ -25,32 +12,32 @@ export function wsVisitors(
     Params: {
       projectId: string;
     };
-  }>,
+  }>
 ) {
   const { params } = req;
-  const unsubscribe = subscribeToPublishedEvent('events', 'saved', (event) => {
-    if (event?.projectId === params.projectId) {
-      eventBuffer.getActiveVisitorCount(params.projectId).then((count) => {
+  const sendCount = () => {
+    eventBuffer
+      .getActiveVisitorCount(params.projectId)
+      .then((count) => {
         socket.send(String(count));
+      })
+      .catch(() => {
+        socket.send('0');
       });
-    }
-  });
+  };
 
-  const punsubscribe = psubscribeToPublishedEvent(
-    '__keyevent@0__:expired',
-    (key) => {
-      const [projectId] = getLiveEventInfo(key);
-      if (projectId && projectId === params.projectId) {
-        eventBuffer.getActiveVisitorCount(params.projectId).then((count) => {
-          socket.send(String(count));
-        });
+  const unsubscribe = subscribeToPublishedEvent(
+    'events',
+    'batch',
+    ({ projectId }) => {
+      if (projectId === params.projectId) {
+        sendCount();
       }
-    },
+    }
   );
 
   socket.on('close', () => {
     unsubscribe();
-    punsubscribe();
   });
 }
 
@@ -62,18 +49,10 @@ export async function wsProjectEvents(
     };
     Querystring: {
       token?: string;
-      type?: 'saved' | 'received';
     };
-  }>,
+  }>
 ) {
-  const { params, query } = req;
-  const type = query.type || 'saved';
-
-  if (!['saved', 'received'].includes(type)) {
-    socket.send('Invalid type');
-    socket.close();
-    return;
-  }
+  const { params } = req;
 
   const userId = req.session?.userId;
   if (!userId) {
@@ -87,24 +66,20 @@ export async function wsProjectEvents(
     projectId: params.projectId,
   });
 
+  if (!access) {
+    socket.send('No access');
+    socket.close();
+    return;
+  }
+
   const unsubscribe = subscribeToPublishedEvent(
     'events',
-    type,
-    async (event) => {
-      if (event.projectId === params.projectId) {
-        const profile = await getProfileById(event.profileId, event.projectId);
-        socket.send(
-          superjson.stringify(
-            access
-              ? {
-                  ...event,
-                  profile,
-                }
-              : transformMinimalEvent(event),
-          ),
-        );
+    'batch',
+    ({ projectId, count }) => {
+      if (projectId === params.projectId) {
+        socket.send(setSuperJson({ count }));
       }
-    },
+    }
   );
 
   socket.on('close', () => unsubscribe());
@@ -116,7 +91,7 @@ export async function wsProjectNotifications(
     Params: {
       projectId: string;
     };
-  }>,
+  }>
 ) {
   const { params } = req;
   const userId = req.session?.userId;
@@ -143,9 +118,9 @@ export async function wsProjectNotifications(
     'created',
     (notification) => {
       if (notification.projectId === params.projectId) {
-        socket.send(superjson.stringify(notification));
+        socket.send(setSuperJson(notification));
       }
-    },
+    }
   );
 
   socket.on('close', () => unsubscribe());
@@ -157,7 +132,7 @@ export async function wsOrganizationEvents(
     Params: {
       organizationId: string;
     };
-  }>,
+  }>
 ) {
   const { params } = req;
   const userId = req.session?.userId;
@@ -184,7 +159,7 @@ export async function wsOrganizationEvents(
     'subscription_updated',
     (message) => {
       socket.send(setSuperJson(message));
-    },
+    }
   );
 
   socket.on('close', () => unsubscribe());

apps/api/src/controllers/manage.controller.ts

@@ -1,5 +1,4 @@
 import crypto from 'node:crypto';
-import { HttpError } from '@/utils/errors';
 import { stripTrailingSlash } from '@openpanel/common';
 import { hashPassword } from '@openpanel/common/server';
 import {
@@ -10,6 +9,7 @@ import {
 } from '@openpanel/db';
 import type { FastifyReply, FastifyRequest } from 'fastify';
 import { z } from 'zod';
+import { HttpError } from '@/utils/errors';
 
 // Validation schemas
 const zCreateProject = z.object({
@@ -57,7 +57,7 @@ const zUpdateReference = z.object({
 // Projects CRUD
 export async function listProjects(
   request: FastifyRequest,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const projects = await db.project.findMany({
     where: {
@@ -74,7 +74,7 @@ export async function listProjects(
 
 export async function getProject(
   request: FastifyRequest<{ Params: { id: string } }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const project = await db.project.findFirst({
     where: {
@@ -92,7 +92,7 @@ export async function getProject(
 
 export async function createProject(
   request: FastifyRequest<{ Body: z.infer<typeof zCreateProject> }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const parsed = zCreateProject.safeParse(request.body);
 
@@ -139,12 +139,9 @@ export async function createProject(
     },
   });
 
-  // Clear cache
   await Promise.all([
     getProjectByIdCached.clear(project.id),
-    project.clients.map((client) => {
-      getClientByIdCached.clear(client.id);
-    }),
+    ...project.clients.map((client) => getClientByIdCached.clear(client.id)),
   ]);
 
   reply.send({
@@ -165,7 +162,7 @@ export async function updateProject(
     Params: { id: string };
     Body: z.infer<typeof zUpdateProject>;
   }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const parsed = zUpdateProject.safeParse(request.body);
 
@@ -223,12 +220,9 @@ export async function updateProject(
     data: updateData,
   });
 
-  // Clear cache
   await Promise.all([
     getProjectByIdCached.clear(project.id),
-    existing.clients.map((client) => {
-      getClientByIdCached.clear(client.id);
-    }),
+    ...existing.clients.map((client) => getClientByIdCached.clear(client.id)),
   ]);
 
   reply.send({ data: project });
@@ -236,7 +230,7 @@ export async function updateProject(
 
 export async function deleteProject(
   request: FastifyRequest<{ Params: { id: string } }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const project = await db.project.findFirst({
     where: {
@@ -266,7 +260,7 @@ export async function deleteProject(
 // Clients CRUD
 export async function listClients(
   request: FastifyRequest<{ Querystring: { projectId?: string } }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const where: any = {
     organizationId: request.client!.organizationId,
@@ -300,7 +294,7 @@ export async function listClients(
 
 export async function getClient(
   request: FastifyRequest<{ Params: { id: string } }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const client = await db.client.findFirst({
     where: {
@@ -318,7 +312,7 @@ export async function getClient(
 
 export async function createClient(
   request: FastifyRequest<{ Body: z.infer<typeof zCreateClient> }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const parsed = zCreateClient.safeParse(request.body);
 
@@ -374,7 +368,7 @@ export async function updateClient(
     Params: { id: string };
     Body: z.infer<typeof zUpdateClient>;
   }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const parsed = zUpdateClient.safeParse(request.body);
 
@@ -417,7 +411,7 @@ export async function updateClient(
 
 export async function deleteClient(
   request: FastifyRequest<{ Params: { id: string } }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const client = await db.client.findFirst({
     where: {
@@ -444,7 +438,7 @@ export async function deleteClient(
 // References CRUD
 export async function listReferences(
   request: FastifyRequest<{ Querystring: { projectId?: string } }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const where: any = {};
 
@@ -488,7 +482,7 @@ export async function listReferences(
 
 export async function getReference(
   request: FastifyRequest<{ Params: { id: string } }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const reference = await db.reference.findUnique({
     where: {
@@ -516,7 +510,7 @@ export async function getReference(
 
 export async function createReference(
   request: FastifyRequest<{ Body: z.infer<typeof zCreateReference> }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const parsed = zCreateReference.safeParse(request.body);
 
@@ -559,7 +553,7 @@ export async function updateReference(
     Params: { id: string };
     Body: z.infer<typeof zUpdateReference>;
   }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const parsed = zUpdateReference.safeParse(request.body);
 
@@ -616,7 +610,7 @@ export async function updateReference(
 
 export async function deleteReference(
   request: FastifyRequest<{ Params: { id: string } }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const reference = await db.reference.findUnique({
     where: {

apps/api/src/controllers/track.controller.ts

@@ -3,14 +3,20 @@ import { generateDeviceId, parseUserAgent } from '@openpanel/common/server';
 import {
   getProfileById,
   getSalts,
+  groupBuffer,
   replayBuffer,
   upsertProfile,
 } from '@openpanel/db';
 import { type GeoLocation, getGeoLocation } from '@openpanel/geo';
-import { getEventsGroupQueueShard } from '@openpanel/queue';
+import {
+  type EventsQueuePayloadIncomingEvent,
+  getEventsGroupQueueShard,
+} from '@openpanel/queue';
 import { getRedisCache } from '@openpanel/redis';
 import {
+  type IAssignGroupPayload,
   type IDecrementPayload,
+  type IGroupPayload,
   type IIdentifyPayload,
   type IIncrementPayload,
   type IReplayPayload,
@@ -112,6 +118,7 @@ interface TrackContext {
   identity?: IIdentifyPayload;
   deviceId: string;
   sessionId: string;
+  session?: EventsQueuePayloadIncomingEvent['payload']['session'];
   geo: GeoLocation;
 }
 
@@ -141,19 +148,21 @@ async function buildContext(
     validatedBody.payload.profileId = profileId;
   }
 
+  const overrideDeviceId =
+    validatedBody.type === 'track' &&
+    typeof validatedBody.payload?.properties?.__deviceId === 'string'
+      ? validatedBody.payload?.properties.__deviceId
+      : undefined;
+
   // Get geo location (needed for track and identify)
   const [geo, salts] = await Promise.all([getGeoLocation(ip), getSalts()]);
 
-  const { deviceId, sessionId } = await getDeviceId({
+  const deviceIdResult = await getDeviceId({
     projectId,
     ip,
     ua,
     salts,
-    overrideDeviceId:
-      validatedBody.type === 'track' &&
-      typeof validatedBody.payload?.properties?.__deviceId === 'string'
-        ? validatedBody.payload?.properties.__deviceId
-        : undefined,
+    overrideDeviceId,
   });
 
   return {
@@ -166,8 +175,9 @@ async function buildContext(
       isFromPast: timestamp.isTimestampFromThePast,
     },
     identity,
-    deviceId,
-    sessionId,
+    deviceId: deviceIdResult.deviceId,
+    sessionId: deviceIdResult.sessionId,
+    session: deviceIdResult.session,
     geo,
   };
 }
@@ -176,13 +186,14 @@ async function handleTrack(
   payload: ITrackPayload,
   context: TrackContext
 ): Promise<void> {
-  const { projectId, deviceId, geo, headers, timestamp, sessionId } = context;
+  const { projectId, deviceId, geo, headers, timestamp, sessionId, session } =
+    context;
 
   const uaInfo = parseUserAgent(headers['user-agent'], payload.properties);
   const groupId = uaInfo.isServer
     ? payload.profileId
       ? `${projectId}:${payload.profileId}`
-      : `${projectId}:${generateId()}`
+      : undefined
     : deviceId;
   const jobId = [
     slug(payload.name),
@@ -203,13 +214,14 @@ async function handleTrack(
   }
 
   promises.push(
-    getEventsGroupQueueShard(groupId).add({
+    getEventsGroupQueueShard(groupId || generateId()).add({
       orderMs: timestamp.value,
       data: {
         projectId,
         headers,
         event: {
           ...payload,
+          groups: payload.groups ?? [],
           timestamp: timestamp.value,
           isTimestampFromThePast: timestamp.isFromPast,
         },
@@ -217,6 +229,7 @@ async function handleTrack(
         geo,
         deviceId,
         sessionId,
+        session,
       },
       groupId,
       jobId,
@@ -324,6 +337,36 @@ async function handleReplay(
   await replayBuffer.add(row);
 }
 
+async function handleGroup(
+  payload: IGroupPayload,
+  context: TrackContext
+): Promise<void> {
+  const { id, type, name, properties = {} } = payload;
+  await groupBuffer.add({
+    id,
+    projectId: context.projectId,
+    type,
+    name,
+    properties,
+  });
+}
+
+async function handleAssignGroup(
+  payload: IAssignGroupPayload,
+  context: TrackContext
+): Promise<void> {
+  const profileId = payload.profileId ?? context.deviceId;
+  if (!profileId) {
+    return;
+  }
+  await upsertProfile({
+    id: String(profileId),
+    projectId: context.projectId,
+    isExternal: !!payload.profileId,
+    groups: payload.groupIds,
+  });
+}
+
 export async function handler(
   request: FastifyRequest<{
     Body: ITrackHandlerPayload;
@@ -372,6 +415,12 @@ export async function handler(
     case 'replay':
       await handleReplay(validatedBody.payload, context);
       break;
+    case 'group':
+      await handleGroup(validatedBody.payload, context);
+      break;
+    case 'assign_group':
+      await handleAssignGroup(validatedBody.payload, context);
+      break;
     default:
       return reply.status(400).send({
         status: 400,

apps/api/src/hooks/is-bot.hook.ts

@@ -1,20 +1,19 @@
-import { isBot } from '@/bots';
 import { createBotEvent } from '@openpanel/db';
 import type {
   DeprecatedPostEventPayload,
   ITrackHandlerPayload,
 } from '@openpanel/validation';
-
 import type { FastifyReply, FastifyRequest } from 'fastify';
+import { isBot } from '@/bots';
 
 export async function isBotHook(
   req: FastifyRequest<{
     Body: ITrackHandlerPayload | DeprecatedPostEventPayload;
   }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const bot = req.headers['user-agent']
-    ? isBot(req.headers['user-agent'])
+    ? await isBot(req.headers['user-agent'])
     : null;
 
   if (bot && req.client?.projectId) {
@@ -44,6 +43,6 @@ export async function isBotHook(
       }
     }
 
-    return reply.status(202).send();
+    return reply.status(202).send({ bot });
   }
 }

apps/api/src/index.ts

@@ -36,6 +36,7 @@ import { timestampHook } from './hooks/timestamp.hook';
 import aiRouter from './routes/ai.router';
 import eventRouter from './routes/event.router';
 import exportRouter from './routes/export.router';
+import gscCallbackRouter from './routes/gsc-callback.router';
 import importRouter from './routes/import.router';
 import insightsRouter from './routes/insights.router';
 import liveRouter from './routes/live.router';
@@ -194,6 +195,7 @@ const startServer = async () => {
       instance.register(liveRouter, { prefix: '/live' });
       instance.register(webhookRouter, { prefix: '/webhook' });
       instance.register(oauthRouter, { prefix: '/oauth' });
+      instance.register(gscCallbackRouter, { prefix: '/gsc' });
       instance.register(miscRouter, { prefix: '/misc' });
       instance.register(aiRouter, { prefix: '/ai' });
     });

apps/api/src/routes/gsc-callback.router.ts

@@ -0,0 +1,12 @@
+import { gscGoogleCallback } from '@/controllers/gsc-oauth-callback.controller';
+import type { FastifyPluginCallback } from 'fastify';
+
+const router: FastifyPluginCallback = async (fastify) => {
+  fastify.route({
+    method: 'GET',
+    url: '/callback',
+    handler: gscGoogleCallback,
+  });
+};
+
+export default router;

apps/api/src/routes/track.router.ts

@@ -1,6 +1,5 @@
-import { fetchDeviceId, handler } from '@/controllers/track.controller';
 import type { FastifyPluginCallback } from 'fastify';
-
+import { fetchDeviceId, handler } from '@/controllers/track.controller';
 import { clientHook } from '@/hooks/client.hook';
 import { duplicateHook } from '@/hooks/duplicate.hook';
 import { isBotHook } from '@/hooks/is-bot.hook';
@@ -13,7 +12,7 @@ const trackRouter: FastifyPluginCallback = async (fastify) => {
   fastify.route({
     method: 'POST',
     url: '/',
-    handler: handler,
+    handler,
   });
 
   fastify.route({

apps/api/src/utils/ids.ts

@@ -1,7 +1,12 @@
 import crypto from 'node:crypto';
 import { generateDeviceId } from '@openpanel/common/server';
 import { getSafeJson } from '@openpanel/json';
+import type {
+  EventsQueuePayloadCreateSessionEnd,
+  EventsQueuePayloadIncomingEvent,
+} from '@openpanel/queue';
 import { getRedisCache } from '@openpanel/redis';
+import { pick } from 'ramda';
 
 export async function getDeviceId({
   projectId,
@@ -37,14 +42,20 @@ export async function getDeviceId({
     ua,
   });
 
-  return await getDeviceIdFromSession({
+  return await getInfoFromSession({
     projectId,
     currentDeviceId,
     previousDeviceId,
   });
 }
 
-async function getDeviceIdFromSession({
+interface DeviceIdResult {
+  deviceId: string;
+  sessionId: string;
+  session?: EventsQueuePayloadIncomingEvent['payload']['session'];
+}
+
+async function getInfoFromSession({
   projectId,
   currentDeviceId,
   previousDeviceId,
@@ -52,7 +63,7 @@ async function getDeviceIdFromSession({
   projectId: string;
   currentDeviceId: string;
   previousDeviceId: string;
-}) {
+}): Promise<DeviceIdResult> {
   try {
     const multi = getRedisCache().multi();
     multi.hget(
@@ -65,21 +76,33 @@ async function getDeviceIdFromSession({
     );
     const res = await multi.exec();
     if (res?.[0]?.[1]) {
-      const data = getSafeJson<{ payload: { sessionId: string } }>(
+      const data = getSafeJson<EventsQueuePayloadCreateSessionEnd>(
         (res?.[0]?.[1] as string) ?? ''
       );
       if (data) {
-        const sessionId = data.payload.sessionId;
-        return { deviceId: currentDeviceId, sessionId };
+        return {
+          deviceId: currentDeviceId,
+          sessionId: data.payload.sessionId,
+          session: pick(
+            ['referrer', 'referrerName', 'referrerType'],
+            data.payload
+          ),
+        };
       }
     }
     if (res?.[1]?.[1]) {
-      const data = getSafeJson<{ payload: { sessionId: string } }>(
+      const data = getSafeJson<EventsQueuePayloadCreateSessionEnd>(
         (res?.[1]?.[1] as string) ?? ''
       );
       if (data) {
-        const sessionId = data.payload.sessionId;
-        return { deviceId: previousDeviceId, sessionId };
+        return {
+          deviceId: previousDeviceId,
+          sessionId: data.payload.sessionId,
+          session: pick(
+            ['referrer', 'referrerName', 'referrerType'],
+            data.payload
+          ),
+        };
       }
     }
   } catch (error) {

apps/public/content/articles/mixpanel-alternatives.mdx

@@ -1,7 +1,7 @@
 ---
 date: 2025-07-18
-title: "13 Best Mixpanel Alternatives & Competitors in 2026"
-description: "Compare the best Mixpanel alternatives for product analytics in 2026. Side-by-side pricing, features, and privacy comparison of 7 top tools plus 6 honorable mentions — including open source and free options."
+title: "13 Best Product Analytics Tools in 2026 (Ranked & Compared)"
+description: "Compare the best product analytics tools in 2026. Side-by-side pricing, features, and privacy comparison of 13 platforms — including open source, self-hosted, and free options for every team size."
 updated: 2026-02-16
 tag: Comparison
 team: OpenPanel Team

apps/public/content/compare/amplitude-alternative.json

@@ -3,7 +3,7 @@
   "page_type": "alternative",
   "seo": {
     "title": "Best Amplitude Alternatives 2026 - Open Source, Free & Paid",
-    "description": "Compare the best Amplitude alternatives in 2026: OpenPanel, PostHog, Mixpanel, Heap, and Plausible. Open source, privacy-first, and affordable options for every team size. See which fits you best.",
+    "description": "Compare the best Amplitude alternatives in 2026: OpenPanel, PostHog, Heap, and Plausible. Open source, privacy-first, and affordable options for every team size. See which fits you best.",
     "noindex": false
   },
   "hero": {
@@ -47,7 +47,7 @@
       "Large enterprises with dedicated analytics teams",
       "Organizations that need advanced experimentation and feature flags",
       "Teams requiring sophisticated behavioral cohorts and predictive analytics",
-      "Companies wanting an all-in-one platform with session replay and guides"
+      "Companies wanting an all-in-one platform with guides, surveys, and advanced experimentation"
     ]
   },
   "highlights": {
@@ -184,9 +184,9 @@
           },
           {
             "name": "Session replay",
-            "openpanel": false,
+            "openpanel": true,
             "competitor": true,
-            "notes": "Included in Amplitude platform"
+            "notes": "Both platforms include session replay"
           },
           {
             "name": "Custom dashboards",
@@ -423,7 +423,7 @@
       },
       {
         "title": "Simpler analytics needs",
-        "description": "If you don't need predictive ML models, feature flags, or session replay, OpenPanel gives you core analytics without the bloat.",
+        "description": "If you don't need predictive ML models or feature flags, OpenPanel gives you core analytics — including session replay — without the enterprise bloat.",
         "icon": "target"
       }
     ]
@@ -484,7 +484,7 @@
       },
       {
         "question": "What Amplitude features will I lose?",
-        "answer": "OpenPanel doesn't have feature flags, session replay, predictive cohorts, or the Guides & Surveys product. If you rely heavily on these enterprise features, Amplitude may still be the better fit."
+        "answer": "OpenPanel doesn't have feature flags, predictive cohorts, or the Guides & Surveys product. OpenPanel does include session replay. If you rely heavily on Amplitude's enterprise experimentation or ML-powered features, Amplitude may still be the better fit."
       },
       {
         "question": "How does the SDK size affect my app?",

apps/public/content/compare/fullstory-alternative.json

@@ -2,8 +2,8 @@
   "slug": "fullstory-alternative",
   "page_type": "alternative",
   "seo": {
-    "title": "Best FullStory Alternative 2026 - Open Source & Free",
-    "description": "Looking for a FullStory alternative? OpenPanel offers product analytics with transparent pricing, self-hosting, and privacy-first tracking \u2014 no expensive session replay costs. Free to start.",
+    "title": "Best FullStory Alternatives 2026 — Cheaper & Privacy-First",
+    "description": "FullStory pricing starts at $300/month. OpenPanel delivers product analytics — events, funnels, and retention — at $2.50/month or free to self-host. No enterprise contract required.",
     "noindex": false
   },
   "hero": {
@@ -353,7 +353,7 @@
       },
       {
         "title": "Remove FullStory script",
-        "description": "Once verified, remove the FullStory snippet. Note: You'll lose access to session replay and heatmaps."
+        "description": "Once verified, remove the FullStory snippet. Note: You'll lose access to FullStory's advanced heatmaps, frustration signals, and pixel-perfect replay. OpenPanel includes basic session replay."
       }
     ],
     "sdk_compatibility": {

apps/public/content/compare/heap-alternative.json

@@ -2,8 +2,8 @@
   "slug": "heap-alternative",
   "page_type": "alternative",
   "seo": {
-    "title": "Best Heap Alternative 2026 - Open Source & Free",
-    "description": "Looking for a Heap alternative? OpenPanel offers transparent pricing, lightweight analytics, and self-hosting without autocapture complexity. Open source and free to get started.",
+    "title": "Best Heap Alternatives 2026 — After the Contentsquare Acquisition",
+    "description": "Heap was acquired by Contentsquare in 2023. If you're re-evaluating, OpenPanel is an open-source alternative with transparent pricing from $2.50/month, full self-hosting, and no sales call required.",
     "noindex": false
   },
   "hero": {
@@ -27,8 +27,8 @@
   "overview": {
     "title": "Why consider OpenPanel over Heap?",
     "paragraphs": [
-      "Heap made its name with autocapture \u2014 the ability to automatically record every user interaction and analyze it retroactively. It's a compelling feature for teams that want to ask questions about user behavior without planning instrumentation in advance. But Heap's acquisition by Contentsquare, opaque enterprise pricing, and cloud-only architecture have many teams looking for alternatives.",
-      "OpenPanel takes a different approach with explicit event tracking, giving you precise control over what you measure and how. While you lose Heap's retroactive analysis capability, you gain transparency \u2014 both in your data collection and your costs. OpenPanel's pricing is publicly listed and event-based, starting at just $2.50 per month, compared to Heap's sales-required pricing that reportedly starts at $3,600 per year.",
+      "Heap was acquired by Contentsquare in September 2023. For many teams, that acquisition raised real questions: Will pricing change? Will the product roadmap shift to serve Contentsquare's enterprise customers? Will independent support continue? These concerns, combined with Heap's opaque pricing model and cloud-only architecture, have driven a wave of teams to evaluate alternatives.",
+      "OpenPanel takes a different approach with explicit event tracking, giving you precise control over what you measure and how. While you lose Heap's retroactive analysis capability, you gain transparency \u2014 both in your data collection and your costs. OpenPanel's pricing is publicly listed and event-based, starting at just $2.50 per month, compared to Heap's sales-required pricing that reportedly starts at $3,600 per year. And unlike Heap, OpenPanel is fully self-hostable and open source \u2014 no acquisition can change that.",
       "For teams that value data sovereignty, OpenPanel offers full self-hosting via a simple Docker deployment \u2014 something Heap doesn't provide at all. Being open source under the MIT license means you can inspect every line of code, contribute improvements, and avoid the vendor lock-in risk that comes with Heap's proprietary, now-Contentsquare-owned platform.",
       "If you prefer intentional, controlled analytics over autocapture-everything, want transparent pricing without sales calls, and need the option to self-host \u2014 OpenPanel gives you solid product analytics with full ownership of your data."
     ]
@@ -443,8 +443,8 @@
     ],
     "articles": [
       {
-        "title": "Find an alternative to Mixpanel",
-        "url": "/articles/alternatives-to-mixpanel"
+        "title": "Best product analytics tools in 2026",
+        "url": "/articles/mixpanel-alternatives"
       },
       {
         "title": "9 best open source web analytics tools",

apps/public/content/compare/mixpanel-alternative.json

@@ -2,13 +2,13 @@
   "slug": "mixpanel-alternative",
   "page_type": "alternative",
   "seo": {
-    "title": "Best Mixpanel Alternative 2026 - Open Source & Free",
-    "description": "Looking for a Mixpanel alternative? OpenPanel offers powerful product analytics at a fraction of the cost \u2014 with EU-only hosting, self-hosting, and full data ownership. Try free today.",
+    "title": "OpenPanel vs Mixpanel (2026): Full Feature & Pricing Comparison",
+    "description": "Side-by-side comparison of OpenPanel and Mixpanel: pricing, features, self-hosting, privacy, and migration guide. See which product analytics platform is right for your team.",
     "noindex": false
   },
   "hero": {
-    "heading": "Best Mixpanel Alternative",
-    "subheading": "OpenPanel is an open-source, privacy-first alternative to Mixpanel. Get powerful product analytics\u2014events, funnels, retention, and user profiles\u2014without event-based pricing that scales to thousands per month or sending your data to US servers.",
+    "heading": "OpenPanel vs Mixpanel",
+    "subheading": "A complete side-by-side comparison of OpenPanel and Mixpanel \u2014 pricing, features, self-hosting, privacy, and what it takes to switch. Make an informed decision before you migrate.",
     "badges": [
       "Open-source",
       "EU-only hosting",
@@ -45,7 +45,7 @@
     ],
     "best_for_competitor": [
       "Enterprise teams needing advanced experimentation and feature flags",
-      "Organizations requiring session replay across web and mobile",
+      "Teams needing Metric Trees for organizational goal alignment",
       "Companies with complex data warehouse integration needs",
       "Teams that need Metric Trees for organizational alignment"
     ]
@@ -184,9 +184,15 @@
           },
           {
             "name": "Session replay",
-            "openpanel": false,
+            "openpanel": true,
             "competitor": true,
-            "notes": "Mixpanel supports web, iOS, and Android"
+            "notes": "Mixpanel supports web, iOS, and Android. OpenPanel also offers session replay."
+          },
+          {
+            "name": "Group analytics",
+            "openpanel": true,
+            "competitor": true,
+            "notes": "Both support group/company-level analytics"
           },
           {
             "name": "Revenue tracking",
@@ -441,7 +447,7 @@
     "items": [
       {
         "question": "Does OpenPanel have all the features I use in Mixpanel?",
-        "answer": "OpenPanel covers the core features most teams actually use: event tracking, funnels, retention, cohorts, user profiles, and A/B testing. If you rely heavily on Mixpanel's session replay, feature flags, or Metric Trees, those aren't available in OpenPanel yet."
+        "answer": "OpenPanel covers the core features most teams actually use: event tracking, funnels, retention, cohorts, user profiles, A/B testing, session replay, and group analytics. If you rely heavily on Mixpanel's feature flags or Metric Trees, those aren't available in OpenPanel."
       },
       {
         "question": "Can I import my historical Mixpanel data?",

apps/public/content/compare/mouseflow-alternative.json

@@ -139,9 +139,9 @@
         "features": [
           {
             "name": "Session replay",
-            "openpanel": false,
+            "openpanel": true,
             "competitor": true,
-            "notes": null
+            "notes": "Mouseflow's session replay is more advanced with friction scoring and form analytics"
           },
           {
             "name": "Click heatmaps",

apps/public/content/compare/posthog-alternative.json

@@ -2,8 +2,8 @@
   "slug": "posthog-alternative",
   "page_type": "alternative",
   "seo": {
-    "title": "Best PostHog Alternative 2026 - Open Source & Free",
-    "description": "Looking for a PostHog alternative? OpenPanel offers simpler analytics with better privacy, a lighter SDK, and transparent pricing \u2014 no complex tiers. Open source and free to self-host.",
+    "title": "Best PostHog Alternatives in 2026 — Simpler, Free & Self-Hosted",
+    "description": "Looking for a simpler PostHog alternative? OpenPanel is free, open-source, and self-hostable — 2.3 KB SDK, cookie-free tracking, and no complex feature flags or session replay you don't need.",
     "noindex": false
   },
   "hero": {
@@ -28,7 +28,7 @@
     "title": "Why consider OpenPanel over PostHog?",
     "paragraphs": [
       "PostHog has built an impressive all-in-one platform with product analytics, feature flags, session replay, surveys, A/B testing, and more \u2014 over 10 products under one roof. It's a popular choice among developer-led teams who want everything in a single tool. But that breadth comes with trade-offs: a 52+ KB SDK, complex multi-product pricing, and a self-hosted setup that requires ClickHouse, Kafka, Redis, and PostgreSQL.",
-      "OpenPanel takes a focused approach. Instead of trying to be everything, it delivers excellent analytics \u2014 events, funnels, retention, cohorts, user profiles, and web analytics \u2014 with a dramatically smaller footprint. The SDK is just 2.3 KB (over 20x lighter than PostHog), which directly translates to faster page loads and better Core Web Vitals for your users.",
+      "OpenPanel takes a focused approach. Instead of trying to be everything, it delivers excellent analytics \u2014 events, funnels, retention, cohorts, user profiles, session replay, and web analytics \u2014 with a dramatically smaller footprint. The SDK is just 2.3 KB (over 20x lighter than PostHog), which directly translates to faster page loads and better Core Web Vitals for your users.",
       "Cookie-free tracking is another key difference. PostHog uses cookies by default and requires configuration to go cookieless, while OpenPanel is cookie-free out of the box \u2014 no consent banners needed. Self-hosting is also far simpler: OpenPanel runs in a single Docker container compared to PostHog's multi-service architecture.",
       "If you need focused analytics without the feature bloat, want a lighter SDK that doesn't impact performance, and prefer simple event-based pricing over multi-product metering \u2014 OpenPanel gives you exactly what you need without the overhead."
     ]
@@ -38,13 +38,13 @@
     "intro": "Both are open-source analytics platforms. PostHog is an all-in-one platform with many products. OpenPanel focuses on analytics with simplicity.",
     "one_liner": "PostHog is an all-in-one platform with 10+ products; OpenPanel focuses on analytics with a lighter footprint.",
     "best_for_openpanel": [
-      "Teams wanting focused analytics without feature flags, session replay, or surveys",
+      "Teams wanting focused analytics without feature flags or surveys",
       "Privacy-conscious products needing cookie-free tracking by default",
       "Performance-conscious applications (2.3KB SDK vs 52KB+)",
       "Teams preferring simple Docker deployment over multi-service architecture"
     ],
     "best_for_competitor": [
-      "Teams needing all-in-one platform (analytics, feature flags, session replay, surveys)",
+      "Teams needing all-in-one platform (analytics, feature flags, surveys, A/B experiments)",
       "Developers wanting SQL access (HogQL) for custom queries",
       "Y Combinator companies leveraging PostHog's ecosystem",
       "Teams requiring extensive CDP capabilities with 60+ connectors"
@@ -176,9 +176,9 @@
           },
           {
             "name": "Session Replay",
-            "openpanel": false,
+            "openpanel": true,
             "competitor": true,
-            "notes": "PostHog includes session replay for web, Android (beta), iOS (alpha)"
+            "notes": "Both platforms offer session replay."
           },
           {
             "name": "Surveys",
@@ -391,7 +391,7 @@
     "items": [
       {
         "title": "Teams Who Want Analytics Without Feature Bloat",
-        "description": "If you need product analytics but don't use PostHog's feature flags, session replay, surveys, or experiments, OpenPanel gives you exactly what you need without the overhead.",
+        "description": "If you need product analytics and session replay but don't need PostHog's feature flags, surveys, or experiments, OpenPanel gives you exactly what you need without the overhead.",
         "icon": "target"
       },
       {
@@ -430,7 +430,7 @@
       },
       {
         "question": "What features will I lose switching from PostHog?",
-        "answer": "PostHog includes feature flags, session replay, surveys, and A/B experiments in their platform. If you actively use these, you'd need separate tools. If you primarily use PostHog for analytics, OpenPanel provides everything you need with less complexity."
+        "answer": "PostHog includes feature flags, surveys, and A/B experiments in their platform. If you actively use these, you'd need separate tools. OpenPanel now includes session replay, so you won't lose that. If you primarily use PostHog for analytics, OpenPanel provides everything you need with less complexity."
       },
       {
         "question": "How does OpenPanel compare on privacy?",
@@ -442,7 +442,7 @@
       },
       {
         "question": "Is PostHog more feature-rich than OpenPanel?",
-        "answer": "PostHog offers more products (10+ including feature flags, session replay, surveys, A/B testing, data warehouse). However, this comes with added complexity. OpenPanel focuses on doing analytics exceptionally well with a simpler, more focused experience."
+        "answer": "PostHog offers more products (10+ including feature flags, surveys, A/B testing, data warehouse). However, this comes with added complexity. OpenPanel now includes session replay alongside its core analytics, while staying focused on simplicity and performance."
       },
       {
         "question": "How do SDK sizes compare?",

apps/public/content/compare/smartlook-alternative.json

@@ -2,13 +2,13 @@
   "slug": "smartlook-alternative",
   "page_type": "alternative",
   "seo": {
-    "title": "Best Smartlook Alternative 2026 - Open Source & Free",
-    "description": "Looking for a Smartlook alternative? OpenPanel offers product analytics with self-hosting, transparent pricing, and mobile SDKs \u2014 without session replay costs. Open source and free to start.",
+    "title": "5 Best Smartlook Alternatives in 2026 (Free & Open Source)",
+    "description": "Looking for a Smartlook alternative? OpenPanel is open source with product analytics, session replay, funnels, and retention. Self-hostable, cookie-free, and no consent banners required.",
     "noindex": false
   },
   "hero": {
     "heading": "Best Smartlook Alternative",
-    "subheading": "Need product analytics without requiring session replay? OpenPanel is an open-source alternative to Smartlook that focuses on event-based analytics, funnels, and retention\u2014with self-hosting and transparent pricing.",
+    "subheading": "OpenPanel is an open-source alternative to Smartlook with event-based product analytics, session replay, funnels, and retention\u2014with self-hosting, transparent pricing, and no Cisco vendor lock-in.",
     "badges": [
       "Open-source",
       "Self-hostable",
@@ -28,28 +28,27 @@
     "title": "Why consider OpenPanel over Smartlook?",
     "paragraphs": [
       "Smartlook combines product analytics with visual insights \u2014 session recordings, heatmaps, and event tracking in one platform. Since its acquisition by Cisco in 2023, it has positioned itself as an enterprise-ready analytics and observation tool. But enterprise ownership often means enterprise pricing, proprietary lock-in, and cloud-only infrastructure with no option for self-hosting.",
-      "OpenPanel focuses purely on product analytics without the session replay overhead, delivering event tracking, funnels, retention analysis, and cohort breakdowns with a cleaner, more focused experience. The result is a lighter tool that does analytics well rather than trying to be everything \u2014 and at a dramatically lower cost with transparent, event-based pricing starting at $2.50 per month.",
+      "OpenPanel delivers event tracking, funnels, retention analysis, cohort breakdowns, and session replay in a focused, open-source package. The result is a tool that covers both product analytics and visual session review \u2014 at a dramatically lower cost with transparent, event-based pricing starting at $2.50 per month.",
       "Being open source under the MIT license gives OpenPanel advantages that Smartlook's proprietary, Cisco-owned platform can't match. You can self-host on your own infrastructure for complete data sovereignty, audit the source code for security compliance, and avoid the vendor lock-in risk that comes with acquisition-prone platforms. Self-hosting also means unlimited data retention, compared to Smartlook's plan-based limits.",
-      "If you need session replay specifically, Smartlook has the edge in that area. But for teams that want focused, cost-effective product analytics with open-source transparency and the freedom to self-host, OpenPanel delivers more value without the enterprise complexity."
+      "If you need advanced heatmaps or Unity/game analytics, Smartlook has the edge. But for teams that want product analytics plus session replay with open-source transparency, self-hosting, and predictable pricing, OpenPanel delivers more value without the Cisco enterprise complexity."
     ]
   },
   "summary_comparison": {
     "title": "OpenPanel vs Smartlook: Which is right for you?",
-    "intro": "Both platforms offer product analytics, but Smartlook adds visual behavior tools (session replay, heatmaps) while OpenPanel focuses on event-based analytics with self-hosting.",
-    "one_liner": "OpenPanel is open source with self-hosting for product analytics; Smartlook combines analytics with session replay and heatmaps.",
+    "intro": "Both platforms offer product analytics and session replay. Smartlook adds heatmaps and frustration signals; OpenPanel adds self-hosting, open source, and simpler pricing.",
+    "one_liner": "OpenPanel is open source with self-hosting, product analytics, and session replay; Smartlook adds heatmaps and deeper visual behavior tools.",
     "best_for_openpanel": [
       "Teams needing self-hosting for data ownership and compliance",
-      "Open source requirements for transparency",
-      "Focus on event-based product analytics without visual replay",
+      "Open source requirements for transparency and auditability",
+      "Product analytics plus session replay without Cisco vendor lock-in",
       "Teams wanting unlimited data retention with self-hosting",
       "Server-side SDKs for backend tracking"
     ],
     "best_for_competitor": [
-      "Teams needing session recordings to watch user interactions",
-      "UX designers requiring heatmaps (click, scroll, movement)",
+      "UX designers requiring comprehensive heatmaps (click, scroll, movement)",
       "Mobile app crash reports with linked session recordings",
-      "Teams wanting combined analytics and replay in one tool",
-      "Unity game developers (Smartlook supports Unity)"
+      "Teams needing Unity game analytics",
+      "Teams requiring Cisco/AppDynamics ecosystem integration"
     ]
   },
   "highlights": {
@@ -68,8 +67,8 @@
       },
       {
         "label": "Session replay",
-        "openpanel": "Not available",
-        "competitor": "Yes, full recordings"
+        "openpanel": "Yes",
+        "competitor": "Yes, with heatmaps & friction detection"
       },
       {
         "label": "Heatmaps",
@@ -139,9 +138,9 @@
         "features": [
           {
             "name": "Session recordings",
-            "openpanel": false,
+            "openpanel": true,
             "competitor": true,
-            "notes": null
+            "notes": "Smartlook additionally links recordings to crash reports and heatmaps"
           },
           {
             "name": "Click heatmaps",
@@ -311,13 +310,13 @@
   },
   "migration": {
     "title": "Migrating from Smartlook to OpenPanel",
-    "intro": "Moving from Smartlook to OpenPanel involves transitioning from combined session replay and analytics to event-based product analytics.",
+    "intro": "Moving from Smartlook to OpenPanel means keeping session replay and product analytics while gaining self-hosting, open source, and simpler pricing.",
     "difficulty": "moderate",
     "estimated_time": "2-4 hours",
     "steps": [
       {
         "title": "Understand feature differences",
-        "description": "OpenPanel focuses on event-based product analytics. If you rely on session recordings and heatmaps, consider using complementary tools like Microsoft Clarity."
+        "description": "OpenPanel includes session replay and event-based product analytics. If you rely on heatmaps or Unity analytics, consider using complementary tools like Microsoft Clarity for heatmaps."
       },
       {
         "title": "Create OpenPanel account or self-host",
@@ -382,11 +381,11 @@
     "items": [
       {
         "question": "Can OpenPanel replace Smartlook's session recordings?",
-        "answer": "No, OpenPanel does not provide session recordings or heatmaps. If you need visual behavior analytics, consider using Microsoft Clarity (free) or Hotjar alongside OpenPanel, or continue using Smartlook for recordings while using OpenPanel for deeper product analytics."
+        "answer": "Yes for session replay — OpenPanel now includes session recording. However, if you need heatmaps (click, scroll, movement), frustration signals, or Unity game analytics, Smartlook still has the edge in those areas."
       },
       {
         "question": "Which tool has better funnel analysis?",
-        "answer": "Both tools offer funnel analysis. Smartlook's advantage is the ability to watch session recordings of users who dropped off. OpenPanel offers more advanced funnel customization and cohort breakdowns."
+        "answer": "Both tools offer funnel analysis. With OpenPanel you can also watch session recordings of users who dropped off, and OpenPanel offers more advanced funnel customization and cohort breakdowns."
       },
       {
         "question": "Can I self-host Smartlook?",

apps/public/content/docs/(tracking)/sdks/express.mdx

@@ -68,6 +68,34 @@ app.listen(3000, () => {
 - `trackRequest` - A function that returns `true` if the request should be tracked.
 - `getProfileId` - A function that returns the profile ID of the user making the request.
 
+## Working with Groups
+
+Groups let you track analytics at the account or company level. Since Express is a backend SDK, you can upsert groups and assign users from your route handlers.
+
+See the [Groups guide](/docs/get-started/groups) for the full walkthrough.
+
+```ts
+app.post('/login', async (req, res) => {
+  const user = await loginUser(req.body);
+
+  // Identify the user
+  req.op.identify({ profileId: user.id, email: user.email });
+
+  // Create/update the group entity
+  req.op.upsertGroup({
+    id: user.organizationId,
+    type: 'company',
+    name: user.organizationName,
+    properties: { plan: user.plan },
+  });
+
+  // Assign the user to the group
+  req.op.setGroup(user.organizationId);
+
+  res.json({ ok: true });
+});
+```
+
 ## Typescript
 
 If `req.op` is not typed you can extend the `Request` interface.

apps/public/content/docs/(tracking)/sdks/javascript.mdx

@@ -116,9 +116,38 @@ op.decrement({
 });
 ```
 
+### Working with Groups
+
+Groups let you track analytics at the account or company level. See the [Groups guide](/docs/get-started/groups) for the full walkthrough.
+
+**Create or update a group:**
+
+```js title="index.js"
+import { op } from './op.ts'
+
+op.upsertGroup({
+  id: 'org_acme',
+  type: 'company',
+  name: 'Acme Inc',
+  properties: { plan: 'enterprise' },
+});
+```
+
+**Assign the current user to a group** (call after `identify`):
+
+```js title="index.js"
+import { op } from './op.ts'
+
+op.setGroup('org_acme');
+// or multiple groups:
+op.setGroups(['org_acme', 'team_eng']);
+```
+
+Once set, all subsequent `track()` calls will automatically include the group IDs.
+
 ### Clearing User Data
 
-To clear the current user's data:
+To clear the current user's data (including groups):
 
 ```js title="index.js"
 import { op } from './op.ts'

apps/public/content/docs/(tracking)/sdks/nextjs.mdx

@@ -227,9 +227,32 @@ useOpenPanel().decrement({
 });
 ```
 
+### Working with Groups
+
+Groups let you track analytics at the account or company level. See the [Groups guide](/docs/get-started/groups) for the full walkthrough.
+
+**Create or update a group:**
+
+```tsx title="app/login/page.tsx"
+useOpenPanel().upsertGroup({
+  id: 'org_acme',
+  type: 'company',
+  name: 'Acme Inc',
+  properties: { plan: 'enterprise' },
+});
+```
+
+**Assign the current user to a group** (call after `identify`):
+
+```tsx title="app/login/page.tsx"
+useOpenPanel().setGroup('org_acme');
+```
+
+Once set, all subsequent `track()` calls will automatically include the group IDs.
+
 ### Clearing User Data
 
-To clear the current user's data:
+To clear the current user's data (including groups):
 
 ```js title="index.js"
 useOpenPanel().clear()

apps/public/content/docs/(tracking)/sdks/react-native.mdx

@@ -120,3 +120,35 @@ op.track('my_event', { foo: 'bar' });
 </Tabs>
 
 For more information on how to use the SDK, check out the [Javascript SDK](/docs/sdks/javascript#usage).
+
+## Offline support
+
+The SDK can buffer events when the device is offline and flush them once connectivity is restored. Events are stamped with a `__timestamp` at the time they are fired so they are recorded with the correct time even if they are delivered later.
+
+Two optional peer dependencies enable this feature:
+
+```npm
+npm install @react-native-async-storage/async-storage @react-native-community/netinfo
+```
+
+Pass them to the constructor:
+
+```typescript
+import { OpenPanel } from '@openpanel/react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import NetInfo from '@react-native-community/netinfo';
+
+const op = new OpenPanel({
+  clientId: '{YOUR_CLIENT_ID}',
+  clientSecret: '{YOUR_CLIENT_SECRET}',
+  // Persist the event queue across app restarts
+  storage: AsyncStorage,
+  // Automatically flush the queue when the device comes back online
+  networkInfo: NetInfo,
+});
+```
+
+Both options are independent — you can use either one or both:
+
+- **`storage`** — persists the queue to disk so events survive app restarts while offline.
+- **`networkInfo`** — flushes the queue automatically when connectivity is restored. Without this, the queue is flushed the next time the app becomes active.

apps/public/content/docs/(tracking)/sdks/react.mdx

@@ -174,9 +174,37 @@ function MyComponent() {
 }
 ```
 
+### Working with Groups
+
+Groups let you track analytics at the account or company level. See the [Groups guide](/docs/get-started/groups) for the full walkthrough.
+
+```tsx
+import { op } from '@/openpanel';
+
+function LoginComponent() {
+  const handleLogin = async (user: User) => {
+    // 1. Identify the user
+    op.identify({ profileId: user.id, email: user.email });
+
+    // 2. Create/update the group entity (only when data changes)
+    op.upsertGroup({
+      id: user.organizationId,
+      type: 'company',
+      name: user.organizationName,
+      properties: { plan: user.plan },
+    });
+
+    // 3. Link the user to their group — tags all future events
+    op.setGroup(user.organizationId);
+  };
+
+  return <button onClick={() => handleLogin(user)}>Login</button>;
+}
+```
+
 ### Clearing User Data
 
-To clear the current user's data:
+To clear the current user's data (including groups):
 
 ```tsx
 import { op } from '@/openpanel';

apps/public/content/docs/api/track.mdx

@@ -106,6 +106,81 @@ curl -X POST https://api.openpanel.dev/track \
 }'
 ```
 
+### Creating or updating a group
+
+```bash
+curl -X POST https://api.openpanel.dev/track \
+-H "Content-Type: application/json" \
+-H "openpanel-client-id: YOUR_CLIENT_ID" \
+-H "openpanel-client-secret: YOUR_CLIENT_SECRET" \
+-d '{
+  "type": "group",
+  "payload": {
+    "id": "org_acme",
+    "type": "company",
+    "name": "Acme Inc",
+    "properties": {
+      "plan": "enterprise",
+      "seats": 25
+    }
+  }
+}'
+```
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `id` | `string` | Yes | Unique identifier for the group |
+| `type` | `string` | Yes | Category of group (e.g. `"company"`, `"workspace"`) |
+| `name` | `string` | Yes | Display name |
+| `properties` | `object` | No | Custom metadata |
+
+### Assigning a user to a group
+
+Links a profile to one or more groups. This updates the profile record but does not auto-attach groups to future events — you still need to pass `groups` explicitly on each track call.
+
+```bash
+curl -X POST https://api.openpanel.dev/track \
+-H "Content-Type: application/json" \
+-H "openpanel-client-id: YOUR_CLIENT_ID" \
+-H "openpanel-client-secret: YOUR_CLIENT_SECRET" \
+-d '{
+  "type": "assign_group",
+  "payload": {
+    "profileId": "user_123",
+    "groupIds": ["org_acme"]
+  }
+}'
+```
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `profileId` | `string` | No | Profile to assign. Falls back to the device ID if omitted |
+| `groupIds` | `string[]` | Yes | Group IDs to link to the profile |
+
+### Tracking events with groups
+
+Groups are never auto-populated on events — even if the profile has been assigned to a group via `assign_group`. Pass `groups` on every track event where you want group data.
+
+```bash
+curl -X POST https://api.openpanel.dev/track \
+-H "Content-Type: application/json" \
+-H "openpanel-client-id: YOUR_CLIENT_ID" \
+-H "openpanel-client-secret: YOUR_CLIENT_SECRET" \
+-d '{
+  "type": "track",
+  "payload": {
+    "name": "report_exported",
+    "profileId": "user_123",
+    "groups": ["org_acme"],
+    "properties": {
+      "format": "pdf"
+    }
+  }
+}'
+```
+
+Unlike the SDK, where `setGroup()` stores group IDs on the instance and attaches them to every subsequent `track()` call, the API has no such state. You must pass `groups` on each event.
+
 ### Error Handling
 The API uses standard HTTP response codes to indicate the success or failure of requests. In case of an error, the response body will contain more information about the error.
 Example error response:

apps/public/content/docs/dashboard/understand-the-overview.mdx

@@ -59,7 +59,16 @@ The trailing edge of the line (the current, incomplete interval) is shown as a d
 
 ## Insights
 
-If you have configured [Insights](/features/insights) for your project, a scrollable row of insight cards appears below the chart. Each card shows a pre-configured metric with its current value and trend. Clicking a card applies that insight's filter to the entire overview page. Insights are optional—this section is hidden when none have been configured.
+A scrollable row of insight cards appears below the chart once your project has at least 30 days of data. OpenPanel automatically detects significant trends across pageviews, entry pages, referrers, and countries—no configuration needed.
+
+Each card shows:
+- **Share**: The percentage of total traffic that property represents (e.g., "United States: 42% of all sessions")
+- **Absolute change**: The raw increase or decrease in sessions compared to the previous period
+- **Percentage change**: How much that property grew or declined relative to its own previous value
+
+For example, if the US had 1,000 sessions last week and 1,200 this week, the card shows "+200 sessions (+20%)".
+
+Clicking any insight card filters the entire overview page to show only data matching that property—letting you drill into what's driving the trend.
 
 ---
 

apps/public/content/docs/get-started/groups.mdx

@@ -0,0 +1,208 @@
+---
+title: Groups
+description: Track analytics at the account, company, or team level — not just individual users.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+
+Groups let you associate users with a shared entity — like a company, workspace, or team — and analyze behavior at that level. Instead of asking "what did Jane do?", you can ask "what is Acme Inc doing?"
+
+This is especially useful for B2B SaaS products where a single paying account has many users.
+
+## How Groups work
+
+There are two separate concepts:
+
+1. **The group entity** — created/updated with `upsertGroup()`. Stores metadata about the group (name, plan, etc.).
+2. **Group membership** — set with `setGroup()` / `setGroups()`. Links a user profile to one or more groups, and automatically attaches those group IDs to every subsequent `track()` call.
+
+## Creating or updating a group
+
+Call `upsertGroup()` to create a group or update its properties. The group is identified by its `id` and `type`.
+
+```typescript
+op.upsertGroup({
+  id: 'org_acme',        // Your group's unique ID
+  type: 'company',       // Group type (company, workspace, team, etc.)
+  name: 'Acme Inc',      // Display name
+  properties: {
+    plan: 'enterprise',
+    seats: 25,
+    industry: 'logistics',
+  },
+});
+```
+
+### Group payload
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `id` | `string` | Yes | Unique identifier for the group |
+| `type` | `string` | Yes | Category of group (e.g. `"company"`, `"workspace"`) |
+| `name` | `string` | Yes | Human-readable display name |
+| `properties` | `object` | No | Custom metadata about the group |
+
+## Managing groups in the dashboard
+
+The easiest way to create, edit, and delete groups is directly in the OpenPanel dashboard. Navigate to your project and open the **Groups** section — from there you can manage group names, types, and properties without touching any code.
+
+`upsertGroup()` is the right tool when your group properties are **dynamic and driven by your own data** — for example, syncing a customer's current plan, seat count, or MRR from your backend at login time.
+
+<Callout>
+A good rule of thumb: call `upsertGroup()` on login or when group properties change — not on every request or page view. If you find yourself calling it frequently with the same data, the dashboard is probably the better place to manage that group.
+</Callout>
+
+## Assigning a user to a group
+
+After identifying a user, call `setGroup()` to link them to a group. This also attaches the group ID to all future `track()` calls for the current session.
+
+```typescript
+// After login
+op.identify({ profileId: 'user_123' });
+
+// Link the user to their organization
+op.setGroup('org_acme');
+```
+
+For users that belong to multiple groups:
+
+```typescript
+op.setGroups(['org_acme', 'team_engineering']);
+```
+
+<Callout>
+`setGroup()` and `setGroups()` persist group IDs on the SDK instance. All subsequent `track()` calls will automatically include these group IDs until `clear()` is called.
+</Callout>
+
+## Full login flow example
+
+`setGroup()` doesn't require the group to exist first. You can call it with just an ID — events will be tagged with that group ID, and you can create the group later in the dashboard or via `upsertGroup()`.
+
+```typescript
+// 1. Identify the user
+op.identify({
+  profileId: 'user_123',
+  firstName: 'Jane',
+  email: 'jane@acme.com',
+});
+
+// 2. Assign the user to the group — the group doesn't need to exist yet
+op.setGroup('org_acme');
+
+// 3. All subsequent events are now tagged with the group
+op.track('dashboard_viewed');  // → includes groups: ['org_acme']
+op.track('report_exported');   // → includes groups: ['org_acme']
+```
+
+If you want to sync dynamic group properties from your own data (plan, seats, MRR), add `upsertGroup()` to the flow:
+
+```typescript
+op.identify({ profileId: 'user_123', email: 'jane@acme.com' });
+
+// Sync group metadata from your backend
+op.upsertGroup({
+  id: 'org_acme',
+  type: 'company',
+  name: 'Acme Inc',
+  properties: { plan: 'pro' },
+});
+
+op.setGroup('org_acme');
+```
+
+## Per-event group override
+
+You can attach group IDs to a specific event without affecting the SDK's persistent group state:
+
+```typescript
+op.track('file_shared', {
+  filename: 'q4-report.pdf',
+  groups: ['org_acme', 'org_partner'], // Only applies to this event
+});
+```
+
+Groups passed in `track()` are **merged** with any groups already set on the SDK instance.
+
+## Clearing groups on logout
+
+`clear()` resets the profile, device, session, and all groups. Always call it on logout.
+
+```typescript
+function handleLogout() {
+  op.clear();
+  // redirect to login...
+}
+```
+
+## Common patterns
+
+### B2B SaaS — company accounts
+
+```typescript
+// On login
+op.identify({ profileId: user.id, email: user.email });
+op.upsertGroup({
+  id: user.organizationId,
+  type: 'company',
+  name: user.organizationName,
+  properties: { plan: user.plan, mrr: user.mrr },
+});
+op.setGroup(user.organizationId);
+```
+
+### Multi-tenant — workspaces
+
+```typescript
+// When user switches workspace
+op.upsertGroup({
+  id: workspace.id,
+  type: 'workspace',
+  name: workspace.name,
+});
+op.setGroup(workspace.id);
+```
+
+### Teams within a company
+
+```typescript
+// User belongs to a company and a specific team
+op.setGroups([user.organizationId, user.teamId]);
+```
+
+## API reference
+
+### `upsertGroup(payload)`
+
+Creates the group if it doesn't exist, or merges properties into the existing group.
+
+```typescript
+op.upsertGroup({
+  id: string;       // Required
+  type: string;     // Required
+  name: string;     // Required
+  properties?: Record<string, unknown>;
+});
+```
+
+### `setGroup(groupId)`
+
+Adds a single group ID to the SDK's internal group list and sends an `assign_group` event to link the current profile to that group.
+
+```typescript
+op.setGroup('org_acme');
+```
+
+### `setGroups(groupIds)`
+
+Same as `setGroup()` but for multiple group IDs at once.
+
+```typescript
+op.setGroups(['org_acme', 'team_engineering']);
+```
+
+## What to avoid
+
+- **Calling `upsertGroup()` on every event or page view** — call it on login or when group properties actually change. For static group management, use the dashboard instead.
+- **Not calling `setGroup()` after `identify()`** — without it, events won't be tagged with the group and you won't see group-level data in the dashboard.
+- **Forgetting `clear()` on logout** — groups persist on the SDK instance, so a new user logging in on the same session could inherit the previous user's groups.
+- **Using `upsertGroup()` to link a user to a group** — `upsertGroup()` manages the group entity only. Use `setGroup()` to link a user profile to it.

apps/public/content/docs/get-started/meta.json

@@ -3,6 +3,7 @@
     "install-openpanel",
     "track-events",
     "identify-users",
+    "groups",
     "revenue-tracking"
   ]
 }

apps/public/content/docs/self-hosting/high-volume.mdx

@@ -0,0 +1,251 @@
+---
+title: High volume setup
+description: Tuning OpenPanel for high event throughput
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+
+The default Docker Compose setup works well for most deployments. When you start seeing high event throughput — thousands of events per second or dozens of worker replicas — a few things need adjusting.
+
+## Connection pooling with PGBouncer
+
+PostgreSQL has a hard limit on the number of open connections. Each worker and API replica opens its own pool of connections, so the total can grow fast. Without pooling, you will start seeing `too many connections` errors under load.
+
+PGBouncer sits in front of PostgreSQL and maintains a small pool of real database connections, multiplexing many application connections on top of them.
+
+### Add PGBouncer to docker-compose.yml
+
+Add the `op-pgbouncer` service and update the `op-api` and `op-worker` dependencies:
+
+```yaml
+op-pgbouncer:
+  image: edoburu/pgbouncer:v1.25.1-p0
+  restart: always
+  depends_on:
+    op-db:
+      condition: service_healthy
+  environment:
+    - DB_HOST=op-db
+    - DB_PORT=5432
+    - DB_USER=postgres
+    - DB_PASSWORD=postgres
+    - DB_NAME=postgres
+    - AUTH_TYPE=scram-sha-256
+    - POOL_MODE=transaction
+    - MAX_CLIENT_CONN=1000
+    - DEFAULT_POOL_SIZE=20
+    - MIN_POOL_SIZE=5
+    - RESERVE_POOL_SIZE=5
+  healthcheck:
+    test: ["CMD-SHELL", "PGPASSWORD=postgres psql -h 127.0.0.1 -p 5432 -U postgres pgbouncer -c 'SHOW VERSION;' -q || exit 1"]
+    interval: 10s
+    timeout: 5s
+    retries: 5
+  logging:
+    driver: "json-file"
+    options:
+      max-size: "10m"
+      max-file: "3"
+```
+
+Then update `op-api` and `op-worker` to depend on `op-pgbouncer` instead of `op-db`:
+
+```yaml
+op-api:
+  depends_on:
+    op-pgbouncer:
+      condition: service_healthy
+    op-ch:
+      condition: service_healthy
+    op-kv:
+      condition: service_healthy
+
+op-worker:
+  depends_on:
+    op-pgbouncer:
+      condition: service_healthy
+    op-api:
+      condition: service_healthy
+```
+
+### Update DATABASE_URL
+
+Prisma needs to know it is talking to a pooler. Point `DATABASE_URL` at `op-pgbouncer` and add `&pgbouncer=true`:
+
+```bash
+# Before
+DATABASE_URL=postgresql://postgres:postgres@op-db:5432/postgres?schema=public
+
+# After
+DATABASE_URL=postgresql://postgres:postgres@op-pgbouncer:5432/postgres?schema=public&pgbouncer=true
+```
+
+Leave `DATABASE_URL_DIRECT` pointing at `op-db` directly, without the `pgbouncer=true` flag. Migrations use the direct connection and will not work through a transaction-mode pooler.
+
+```bash
+DATABASE_URL_DIRECT=postgresql://postgres:postgres@op-db:5432/postgres?schema=public
+```
+
+<Callout type="warn">
+PGBouncer runs in transaction mode. Prisma migrations and interactive transactions require a direct connection. Always set `DATABASE_URL_DIRECT` to the `op-db` address.
+</Callout>
+
+### Tuning the pool size
+
+A rough rule: `DEFAULT_POOL_SIZE` should not exceed your PostgreSQL `max_connections` divided by the number of distinct database/user pairs. The PostgreSQL default is 100. If you raise `max_connections` in Postgres, you can raise `DEFAULT_POOL_SIZE` proportionally.
+
+---
+
+## Buffer tuning
+
+Events, sessions, and profiles flow through in-memory Redis buffers before being written to ClickHouse in batches. The defaults are conservative. Under high load you want larger batches to reduce the number of ClickHouse inserts and improve throughput.
+
+### Event buffer
+
+The event buffer collects incoming events in Redis and flushes them to ClickHouse on a cron schedule.
+
+| Variable | Default | What it controls |
+|---|---|---|
+| `EVENT_BUFFER_BATCH_SIZE` | `4000` | How many events are read from Redis and sent to ClickHouse per flush |
+| `EVENT_BUFFER_CHUNK_SIZE` | `1000` | How many events are sent in a single ClickHouse insert call |
+| `EVENT_BUFFER_MICRO_BATCH_MS` | `10` | How long (ms) to accumulate events in memory before writing to Redis |
+| `EVENT_BUFFER_MICRO_BATCH_SIZE` | `100` | Max events to accumulate before forcing a Redis write |
+
+For high throughput, increase `EVENT_BUFFER_BATCH_SIZE` so each flush processes more events. Keep `EVENT_BUFFER_CHUNK_SIZE` at or below `EVENT_BUFFER_BATCH_SIZE`.
+
+```bash
+EVENT_BUFFER_BATCH_SIZE=10000
+EVENT_BUFFER_CHUNK_SIZE=2000
+```
+
+### Session buffer
+
+Sessions are updated on each event and flushed to ClickHouse separately.
+
+| Variable | Default | What it controls |
+|---|---|---|
+| `SESSION_BUFFER_BATCH_SIZE` | `1000` | Events read per flush |
+| `SESSION_BUFFER_CHUNK_SIZE` | `1000` | Events per ClickHouse insert |
+
+```bash
+SESSION_BUFFER_BATCH_SIZE=5000
+SESSION_BUFFER_CHUNK_SIZE=2000
+```
+
+### Profile buffer
+
+Profiles are merged with existing data before writing. The default batch size is small because each profile may require a ClickHouse lookup.
+
+| Variable | Default | What it controls |
+|---|---|---|
+| `PROFILE_BUFFER_BATCH_SIZE` | `200` | Profiles processed per flush |
+| `PROFILE_BUFFER_CHUNK_SIZE` | `1000` | Profiles per ClickHouse insert |
+| `PROFILE_BUFFER_TTL_IN_SECONDS` | `3600` | How long a profile stays cached in Redis |
+
+Raise `PROFILE_BUFFER_BATCH_SIZE` if profile processing is a bottleneck. Higher values mean fewer flushes but more memory used per flush.
+
+```bash
+PROFILE_BUFFER_BATCH_SIZE=500
+PROFILE_BUFFER_CHUNK_SIZE=1000
+```
+
+---
+
+## Scaling ingestion
+
+If the event queue is growing faster than workers can drain it, you have a few options.
+
+Start vertical before going horizontal. Each worker replica adds overhead: more Redis connections, more ClickHouse connections, more memory. Increasing concurrency on an existing replica is almost always cheaper and more effective than adding another one.
+
+### Increase job concurrency (do this first)
+
+Each worker processes multiple jobs in parallel. The default is `10` per replica.
+
+```bash
+EVENT_JOB_CONCURRENCY=20
+```
+
+Raise this in steps and watch your queue depth. The limit is memory, not logic — values of `500`, `1000`, or even `2000+` are possible on hardware with enough RAM. Each concurrent job holds event data in memory, so monitor usage as you increase the value. Only add more replicas once concurrency alone stops helping.
+
+### Add more worker replicas
+
+If you have maxed out concurrency and the queue is still falling behind, add more replicas.
+
+In `docker-compose.yml`:
+
+```yaml
+op-worker:
+  deploy:
+    replicas: 8
+```
+
+Or at runtime:
+
+```bash
+docker compose up -d --scale op-worker=8
+```
+
+### Shard the events queue
+
+<Callout type="warn">
+**Experimental.** Queue sharding requires either a Redis Cluster or Dragonfly. Dragonfly has seen minimal testing and Redis Cluster has not been tested at all. Do not use this in production without validating it in your environment first.
+</Callout>
+
+Redis is single-threaded, so a single queue instance can become the bottleneck at very high event rates. Queue sharding works around this by splitting the queue across multiple independent shards. Each shard can be backed by its own Redis instance, so the throughput scales with the number of instances rather than being capped by one core.
+
+Events are distributed across shards by project ID, so ordering within a project is preserved.
+
+```bash
+EVENTS_GROUP_QUEUES_SHARDS=4
+QUEUE_CLUSTER=true
+```
+
+<Callout type="warn">
+Set `EVENTS_GROUP_QUEUES_SHARDS` before you have live traffic on the queue. Changing it while jobs are pending will cause those jobs to be looked up on the wrong shard and they will not be processed until the shard count is restored.
+</Callout>
+
+### Tune the ordering delay
+
+Events arriving out of order are held briefly before processing. The default is `100ms`.
+
+```bash
+ORDERING_DELAY_MS=100
+```
+
+Lowering this reduces latency but increases the chance of out-of-order writes to ClickHouse. The value should not exceed `500ms`.
+
+---
+
+## Putting it together
+
+A starting point for a high-volume `.env`:
+
+```bash
+# Route app traffic through PGBouncer
+DATABASE_URL=postgresql://postgres:postgres@op-pgbouncer:5432/postgres?schema=public&pgbouncer=true
+# Keep direct connection for migrations
+DATABASE_URL_DIRECT=postgresql://postgres:postgres@op-db:5432/postgres?schema=public
+
+# Event buffer
+EVENT_BUFFER_BATCH_SIZE=10000
+EVENT_BUFFER_CHUNK_SIZE=2000
+
+# Session buffer
+SESSION_BUFFER_BATCH_SIZE=5000
+SESSION_BUFFER_CHUNK_SIZE=2000
+
+# Profile buffer
+PROFILE_BUFFER_BATCH_SIZE=500
+
+# Queue
+EVENTS_GROUP_QUEUES_SHARDS=4
+EVENT_JOB_CONCURRENCY=20
+```
+
+Then start with more workers:
+
+```bash
+docker compose up -d --scale op-worker=8
+```
+
+Monitor the Redis queue depth and ClickHouse insert latency as you tune. The right values depend on your hardware, event shape, and traffic pattern.

apps/public/content/docs/self-hosting/meta.json

@@ -8,6 +8,7 @@
     "[Deploy with Dokploy](/docs/self-hosting/deploy-dokploy)",
     "[Deploy on Kubernetes](/docs/self-hosting/deploy-kubernetes)",
     "[Environment Variables](/docs/self-hosting/environment-variables)",
+    "[High volume setup](/docs/self-hosting/high-volume)",
     "supporter-access-latest-docker-images",
     "changelog"
   ]

apps/public/content/for/nextjs.json

@@ -0,0 +1,155 @@
+{
+  "slug": "nextjs",
+  "audience": "nextjs",
+  "seo": {
+    "title": "Next.js Analytics — OpenPanel SDK for App Router & Pages Router",
+    "description": "Add analytics to your Next.js app in minutes. OpenPanel's Next.js SDK supports App Router, Pages Router, server-side events, and automatic route change tracking. Open source, cookieless, from $2.50/month.",
+    "noindex": false
+  },
+  "hero": {
+    "heading": "Analytics Built for Next.js",
+    "subheading": "Most analytics tools treat Next.js like a static site. OpenPanel was built for how Next.js actually works — App Router, server components, API routes, and route changes all tracked correctly. Install in 5 minutes, get events, funnels, and user profiles that work with SSR.",
+    "badges": [
+      "App Router support",
+      "Server-side events",
+      "Auto route tracking",
+      "2.3 KB client bundle"
+    ]
+  },
+  "problem": {
+    "title": "Why standard analytics breaks in Next.js",
+    "intro": "Next.js is not a traditional website. Most analytics tools were built before App Router existed and show it.",
+    "items": [
+      {
+        "title": "GA4 breaks with App Router route changes",
+        "description": "Google Analytics was designed for traditional page loads. In Next.js App Router, client-side navigation doesn't trigger GA4's page view events unless you add custom workarounds. Your analytics misses a significant portion of page views."
+      },
+      {
+        "title": "Cookie consent is painful in Next.js",
+        "description": "Implementing a GDPR-compliant cookie consent flow in a Next.js app requires next/script, consent state management, and conditional script loading. It's a non-trivial engineering task just to run analytics."
+      },
+      {
+        "title": "No server-side tracking",
+        "description": "Most analytics SDKs are client-only. Server-side events — API route completions, background jobs, server actions — are invisible. You're missing half the picture."
+      },
+      {
+        "title": "Analytics libraries bloat your bundle",
+        "description": "Many analytics SDKs add 20–50 KB to your JavaScript bundle. In a performance-conscious Next.js app, that overhead matters for Core Web Vitals."
+      }
+    ]
+  },
+  "features": {
+    "title": "Analytics that works the way Next.js works",
+    "intro": "OpenPanel's Next.js SDK was designed for modern Next.js patterns — not adapted from a legacy client-only library.",
+    "items": [
+      {
+        "title": "Next.js SDK with App Router support",
+        "description": "Install @openpanel/nextjs, add the <OpenPanelComponent> to your root layout, and automatic route change tracking works immediately across App Router and Pages Router."
+      },
+      {
+        "title": "Automatic route change tracking",
+        "description": "Every router.push(), <Link> navigation, and back/forward browser action is captured as a page view. No custom useEffect or router event listeners needed."
+      },
+      {
+        "title": "Server-side event tracking",
+        "description": "Import openPanel in any server component, API route, or server action to track events server-side. Track form submissions, payment completions, and background jobs without any client involvement."
+      },
+      {
+        "title": "Cookieless by default",
+        "description": "The OpenPanel SDK uses no cookies. No consent management library, no conditional script loading, no GDPR consent modal needed — just install and track."
+      },
+      {
+        "title": "Identify users across sessions",
+        "description": "Call op.identify({ profileId, name, email }) after authentication to tie anonymous events to known users. Works with any auth solution including NextAuth.js, Clerk, and custom implementations."
+      },
+      {
+        "title": "TypeScript-first SDK",
+        "description": "Full TypeScript types for all methods. Autocomplete for event names and properties. Zero runtime errors from mistyped event calls."
+      },
+      {
+        "title": "2.3 KB gzipped client bundle",
+        "description": "The smallest full-featured analytics SDK for Next.js. No impact on Lighthouse scores or Core Web Vitals."
+      }
+    ]
+  },
+  "benefits": {
+    "title": "Why Next.js developers choose OpenPanel",
+    "intro": "OpenPanel fits naturally into a modern Next.js codebase — not as an afterthought.",
+    "items": [
+      {
+        "title": "Works exactly how Next.js works",
+        "description": "Built for App Router, server components, and modern Next.js patterns. Not bolted onto a client-only library."
+      },
+      {
+        "title": "No consent infrastructure needed",
+        "description": "Cookieless tracking means no consent modal, no next/script loading gymnastics, no conditional initialization. Install once, works everywhere."
+      },
+      {
+        "title": "Track server and client events in the same dashboard",
+        "description": "Server actions, API endpoints, and client interactions all show up together. Full picture of what your app is doing."
+      },
+      {
+        "title": "Open source and self-hostable",
+        "description": "Run OpenPanel on your own infrastructure. Your Next.js app's analytics data never leaves your servers."
+      },
+      {
+        "title": "From $2.50/month",
+        "description": "No enterprise contract, no per-seat fees. Pay for events, get all features. Start free with 30-day trial."
+      }
+    ]
+  },
+  "faqs": {
+    "title": "Frequently asked questions",
+    "intro": "Common questions from Next.js developers evaluating OpenPanel.",
+    "items": [
+      {
+        "question": "How do I install OpenPanel in a Next.js app?",
+        "answer": "Install @openpanel/nextjs, add <OpenPanelComponent clientId=\"...\" /> to your root layout.tsx, and you're tracking page views. For custom events, import and call op.track('event_name', { properties }) anywhere. See the full step-by-step guide at /guides/nextjs-analytics."
+      },
+      {
+        "question": "Does OpenPanel support Next.js App Router?",
+        "answer": "Yes. The <OpenPanelComponent> handles App Router route changes automatically using the usePathname hook internally. No custom setup is needed for client-side navigation tracking."
+      },
+      {
+        "question": "Can I track events in Server Components and API Routes?",
+        "answer": "Yes. Import { openPanel } from @openpanel/nextjs/server and call openPanel.track() in any server context including Server Components, Route Handlers, and Server Actions."
+      },
+      {
+        "question": "Does OpenPanel work with NextAuth.js or Clerk?",
+        "answer": "Yes. Call op.identify({ profileId: session.user.id, ... }) after authentication to link events to user identities. Works with any auth solution that gives you a user ID."
+      },
+      {
+        "question": "Does OpenPanel add significant bundle size to my Next.js app?",
+        "answer": "No. The client-side SDK is 2.3 KB gzipped. For reference, GA4 adds 50+ KB. OpenPanel has negligible impact on your bundle size or Core Web Vitals."
+      },
+      {
+        "question": "Can I self-host OpenPanel for my Next.js app?",
+        "answer": "Yes. OpenPanel is fully open source and can be self-hosted with Docker. Your Next.js app sends events to your own server. The self-hosted version has no event limits and is free to run."
+      }
+    ]
+  },
+  "related_links": {
+    "guides": [
+      { "title": "Next.js analytics setup", "url": "/guides/nextjs-analytics" },
+      { "title": "React analytics setup", "url": "/guides/react-analytics" },
+      { "title": "Track custom events", "url": "/guides/track-custom-events" }
+    ],
+    "articles": [
+      { "title": "Self-hosted web analytics", "url": "/articles/self-hosted-web-analytics" }
+    ],
+    "comparisons": [
+      { "title": "OpenPanel vs Google Analytics", "url": "/compare/google-analytics-alternative" },
+      { "title": "OpenPanel vs PostHog", "url": "/compare/posthog-alternative" }
+    ]
+  },
+  "ctas": {
+    "primary": {
+      "label": "Try OpenPanel Free",
+      "href": "https://dashboard.openpanel.dev/onboarding"
+    },
+    "secondary": {
+      "label": "View Source on GitHub",
+      "href": "https://github.com/Openpanel-dev/openpanel"
+    }
+  }
+}

apps/public/content/for/saas.json

@@ -0,0 +1,165 @@
+{
+  "slug": "saas",
+  "audience": "saas",
+  "seo": {
+    "title": "SaaS Analytics — Track Events, Funnels & Retention Without Enterprise Pricing",
+    "description": "OpenPanel gives SaaS teams the product analytics they need to reduce churn and grow — events, funnels, retention, cohorts, and user profiles. Open source, from $2.50/month.",
+    "noindex": false
+  },
+  "hero": {
+    "heading": "Product Analytics for SaaS Teams",
+    "subheading": "Understanding why users churn, where trials drop off, and which features drive retention is the difference between a SaaS that grows and one that plateaus. OpenPanel gives you events, funnels, retention analysis, and user profiles — the core analytics stack for SaaS — without Mixpanel or Amplitude's enterprise pricing.",
+    "badges": [
+      "Funnel analysis",
+      "Retention tracking",
+      "User profiles",
+      "From $2.50/month"
+    ]
+  },
+  "problem": {
+    "title": "Why SaaS teams outgrow their analytics tools",
+    "intro": "The analytics tools most SaaS teams start with either can't answer the right questions or become unaffordable as you grow.",
+    "items": [
+      {
+        "title": "Mixpanel and Amplitude become unaffordable at scale",
+        "description": "Event-based pricing sounds cheap at 10K events, but SaaS products are event-heavy. At 1M events/month you're paying $300–800/month. At 10M, it's thousands. Your analytics bill grows faster than your revenue."
+      },
+      {
+        "title": "GA4 doesn't answer SaaS questions",
+        "description": "Google Analytics tells you pageviews. It can't tell you which users completed your onboarding flow, how feature adoption correlates with retention, or why your trial-to-paid conversion dropped last month."
+      },
+      {
+        "title": "Complex tools slow down your team",
+        "description": "Mixpanel's interface is powerful but has a steep learning curve. When it takes 30 minutes to build a simple funnel, your team stops using analytics to make decisions."
+      },
+      {
+        "title": "Cloud-only means full vendor dependence",
+        "description": "If Mixpanel raises prices, your data is hostage. No export path, no self-hosting option, and a pricing model that punishes growth."
+      }
+    ]
+  },
+  "features": {
+    "title": "The full product analytics stack for SaaS",
+    "intro": "Everything your team needs to understand users, reduce churn, and grow — without the enterprise pricing.",
+    "items": [
+      {
+        "title": "Event tracking",
+        "description": "Track any user action — feature used, button clicked, settings changed, plan upgraded. One line of code. Works across web, mobile, and your backend."
+      },
+      {
+        "title": "Funnel analysis",
+        "description": "Build conversion funnels for trial signup, onboarding, activation, and upgrade flows. See the exact step losing you the most conversions and fix it."
+      },
+      {
+        "title": "Retention analysis",
+        "description": "Cohort-based retention charts show you whether users activated in week 1 are still active in week 8. Identify which actions predict long-term retention."
+      },
+      {
+        "title": "User profiles",
+        "description": "See every event a specific user triggered since they signed up. Walk through their session to diagnose support issues or understand power user behavior."
+      },
+      {
+        "title": "Cohort analysis",
+        "description": "Group users by signup date, plan, or any property and compare their behavior over time. Understand how product changes affect different user segments."
+      },
+      {
+        "title": "Real-time dashboard",
+        "description": "See new signups, trial activations, and feature usage as they happen. Know immediately when a new deployment changes user behavior."
+      },
+      {
+        "title": "Revenue tracking",
+        "description": "Send MRR, payment events, and plan upgrade data to OpenPanel. Correlate feature usage with revenue without a separate BI tool."
+      },
+      {
+        "title": "Multi-platform SDKs",
+        "description": "Track across web app, marketing site, iOS, Android, and backend in one unified analytics view. Events from all platforms share the same user profiles."
+      }
+    ]
+  },
+  "benefits": {
+    "title": "Why SaaS teams choose OpenPanel",
+    "intro": "OpenPanel gives you the analytics depth of Mixpanel at a price that makes sense for growing SaaS products.",
+    "items": [
+      {
+        "title": "Predictable pricing as you scale",
+        "description": "Flat event tiers from $2.50 to $900/month. No per-seat fees, no MTU limits. Know exactly what you'll pay as your user base grows."
+      },
+      {
+        "title": "Answer the questions SaaS teams actually ask",
+        "description": "Which onboarding step has the highest drop-off? Which features are used by retained users vs churned users? OpenPanel is built for these questions."
+      },
+      {
+        "title": "Self-host to eliminate per-event costs",
+        "description": "Large SaaS products generate millions of events. Self-hosting eliminates the cost entirely — pay only for your server infrastructure."
+      },
+      {
+        "title": "All features from day one",
+        "description": "Funnels, retention, cohorts, user profiles, and dashboards are available at every pricing tier. No feature gating that forces upgrades."
+      },
+      {
+        "title": "Open source and auditable",
+        "description": "Your product data is sensitive. OpenPanel's open source codebase means you can audit exactly what's tracked and how it's stored."
+      }
+    ]
+  },
+  "faqs": {
+    "title": "Frequently asked questions",
+    "intro": "Common questions from SaaS founders and product teams evaluating OpenPanel.",
+    "items": [
+      {
+        "question": "How is OpenPanel different from Mixpanel for SaaS?",
+        "answer": "OpenPanel covers the same core analytics (events, funnels, retention, cohorts, user profiles) at a fraction of the cost. Mixpanel adds features like Metric Trees and advanced experimentation, but most SaaS teams don't use them. OpenPanel focuses on the analytics that actually drive decisions."
+      },
+      {
+        "question": "Can OpenPanel replace both GA4 and Mixpanel?",
+        "answer": "Yes. OpenPanel includes web analytics (pageviews, referrers, UTM campaigns) alongside product analytics. Most SaaS teams can replace both tools with one OpenPanel deployment."
+      },
+      {
+        "question": "How do I track trial-to-paid conversions?",
+        "answer": "Track a trial_started event on signup and a plan_upgraded event on conversion. Build a funnel in OpenPanel between those two events. See conversion rate by cohort, traffic source, or any user property."
+      },
+      {
+        "question": "Does OpenPanel support multi-product or multi-tenant SaaS?",
+        "answer": "Yes. Use the profileId to identify individual users and pass organization or workspace IDs as properties. You can filter analytics by any property you send."
+      },
+      {
+        "question": "What happens to my data if I stop paying for OpenPanel cloud?",
+        "answer": "You can export all your event data via the API at any time. Alternatively, migrate to self-hosting — OpenPanel has no lock-in and no proprietary data format."
+      },
+      {
+        "question": "Can I track backend events from my SaaS API?",
+        "answer": "Yes. OpenPanel has server-side SDKs for Node.js, Python, and a REST API. Track subscription webhooks, background jobs, and server-side logic alongside client events."
+      },
+      {
+        "question": "Is OpenPanel GDPR compliant for SaaS?",
+        "answer": "Yes. Cookieless tracking by default, EU-only cloud hosting, and the option to self-host for complete data sovereignty. No consent banner required for product analytics."
+      }
+    ]
+  },
+  "related_links": {
+    "guides": [
+      { "title": "Track custom events", "url": "/guides/track-custom-events" },
+      { "title": "Next.js analytics setup", "url": "/guides/nextjs-analytics" },
+      { "title": "React analytics setup", "url": "/guides/react-analytics" }
+    ],
+    "articles": [
+      { "title": "How to create a funnel", "url": "/articles/how-to-create-a-funnel" },
+      { "title": "Self-hosted web analytics", "url": "/articles/self-hosted-web-analytics" }
+    ],
+    "comparisons": [
+      { "title": "OpenPanel vs Mixpanel", "url": "/compare/mixpanel-alternative" },
+      { "title": "OpenPanel vs PostHog", "url": "/compare/posthog-alternative" },
+      { "title": "OpenPanel vs Amplitude", "url": "/compare/amplitude-alternative" }
+    ]
+  },
+  "ctas": {
+    "primary": {
+      "label": "Try OpenPanel Free",
+      "href": "https://dashboard.openpanel.dev/onboarding"
+    },
+    "secondary": {
+      "label": "View Source on GitHub",
+      "href": "https://github.com/Openpanel-dev/openpanel"
+    }
+  }
+}

apps/public/content/for/shopify.json

@@ -0,0 +1,158 @@
+{
+  "slug": "shopify",
+  "audience": "shopify",
+  "seo": {
+    "title": "Shopify Analytics — Cookie-Free Tracking Without Consent Banners",
+    "description": "Add product analytics to your Shopify store without GDPR consent banners. OpenPanel is cookieless by default — track events, funnels, and revenue from $2.50/month or free to self-host.",
+    "noindex": false
+  },
+  "hero": {
+    "heading": "Shopify Analytics That Actually Works",
+    "subheading": "Most analytics tools break on Shopify — cookie consent blocks tracking, GA4 loses attribution, and Shopify's built-in reports can't answer the questions that matter. OpenPanel tracks every event without cookies, so your data is complete and your checkout conversion doesn't suffer from a consent banner.",
+    "badges": [
+      "Cookie-free tracking",
+      "No consent banner needed",
+      "Revenue tracking",
+      "From $2.50/month"
+    ]
+  },
+  "problem": {
+    "title": "Why analytics breaks on Shopify",
+    "intro": "Every major analytics tool creates a different problem for Shopify stores. Here's what you're actually dealing with.",
+    "items": [
+      {
+        "title": "GA4 consent mode destroys your data",
+        "description": "Cookie consent requirements mean 30-50% of visitors opt out. GA4's \"consent mode\" fills gaps with modeled data — you're making decisions on estimates, not reality."
+      },
+      {
+        "title": "Shopify's built-in analytics is shallow",
+        "description": "Pageviews and sales are there, but you can't build funnels, analyze drop-off by product page, or see which acquisition channel retains customers best."
+      },
+      {
+        "title": "Event tracking requires a developer",
+        "description": "Installing GA4 on Shopify correctly, with purchase events, add-to-cart, and checkout steps, requires custom code or expensive third-party apps."
+      },
+      {
+        "title": "Cookie banners hurt conversion",
+        "description": "A consent popup before checkout is a conversion killer. Every analytics tool that uses cookies forces you to choose between data and revenue."
+      }
+    ]
+  },
+  "features": {
+    "title": "Everything you need to understand your Shopify store",
+    "intro": "OpenPanel is designed to give you complete visibility into your store's performance — without the privacy headaches.",
+    "items": [
+      {
+        "title": "Script tag install — no developer needed",
+        "description": "Add one script tag in Shopify's theme settings. Automatic page view tracking starts immediately. No Shopify app or coding required."
+      },
+      {
+        "title": "Cookieless tracking by default",
+        "description": "No cookies means no consent banner. Your analytics data is 100% complete — not modeled, not estimated, not filtered by opt-outs."
+      },
+      {
+        "title": "Purchase and revenue tracking",
+        "description": "Track add-to-cart, checkout started, and purchase events with revenue values. See exactly which campaigns and pages drive revenue, not just clicks."
+      },
+      {
+        "title": "Funnel analysis",
+        "description": "Build funnels from product page → add to cart → checkout → purchase. See exactly where you're losing customers and fix it."
+      },
+      {
+        "title": "UTM campaign attribution",
+        "description": "Track every paid ad, email campaign, and influencer link. See which traffic source actually converts to buyers, not just visitors."
+      },
+      {
+        "title": "User profiles",
+        "description": "See the complete journey of any customer — pages visited, products viewed, purchase history. Identify high-value customer behavior patterns."
+      },
+      {
+        "title": "Real-time dashboard",
+        "description": "Watch your store live. Launch a sale or send an email and see the traffic surge in real time."
+      },
+      {
+        "title": "EU data residency",
+        "description": "All data stored in the EU. No transfers to US servers. GDPR compliance without the legal complexity."
+      }
+    ]
+  },
+  "benefits": {
+    "title": "Why Shopify store owners choose OpenPanel",
+    "intro": "OpenPanel was built to solve the exact problems that plague analytics on Shopify.",
+    "items": [
+      {
+        "title": "Complete data, no consent required",
+        "description": "Cookieless tracking means every visitor is counted. No consent mode models, no sampling, no gaps from opt-outs."
+      },
+      {
+        "title": "Cheaper than Shopify analytics apps",
+        "description": "Most Shopify analytics apps charge $50–200/month. OpenPanel starts at $2.50/month with all features included."
+      },
+      {
+        "title": "Replace GA4 and your analytics app",
+        "description": "One tool covers web analytics (traffic, referrers, UTM) and product analytics (funnels, retention, revenue). Cancel two subscriptions."
+      },
+      {
+        "title": "Privacy-first out of the box",
+        "description": "EU hosting, no cookies, no fingerprinting. No compliance team required to use OpenPanel on your store."
+      },
+      {
+        "title": "Self-host for free",
+        "description": "For high-volume stores, self-hosting eliminates per-event costs entirely. One Docker deployment, unlimited events."
+      }
+    ]
+  },
+  "faqs": {
+    "title": "Frequently asked questions",
+    "intro": "Common questions from Shopify store owners evaluating OpenPanel.",
+    "items": [
+      {
+        "question": "How do I install OpenPanel on Shopify?",
+        "answer": "Add the OpenPanel script tag via Shopify Admin → Online Store → Themes → Edit Code → theme.liquid. Paste the snippet before </head>. Automatic page views track immediately. For purchase events, add a few lines to your order confirmation page."
+      },
+      {
+        "question": "Does OpenPanel work without a cookie consent banner?",
+        "answer": "Yes. OpenPanel is cookieless by default and doesn't collect personal data. No consent banner is required under GDPR or CCPA for analytics-only use."
+      },
+      {
+        "question": "Can I track Shopify purchase events?",
+        "answer": "Yes. Use a simple script on your order confirmation page to send purchase amount, order ID, and product data to OpenPanel. No Shopify app required."
+      },
+      {
+        "question": "How does OpenPanel compare to Lucky Orange or Hotjar for Shopify?",
+        "answer": "Lucky Orange and Hotjar focus on heatmaps and session replay. OpenPanel focuses on event analytics, funnels, and retention — understanding what users do, not watching recordings. If you need both, they complement each other."
+      },
+      {
+        "question": "Will OpenPanel affect my Shopify store's page speed?",
+        "answer": "OpenPanel's JavaScript SDK is 2.3 KB gzipped — one of the lightest analytics trackers available. GA4 is 50+ KB. The performance impact is negligible."
+      },
+      {
+        "question": "Does OpenPanel work with Shopify Plus?",
+        "answer": "Yes. OpenPanel works on any Shopify plan including Plus. The script tag installation method works identically across all plans."
+      }
+    ]
+  },
+  "related_links": {
+    "guides": [
+      { "title": "Ecommerce tracking setup", "url": "/guides/ecommerce-tracking" }
+    ],
+    "articles": [
+      { "title": "Cookieless analytics explained", "url": "/articles/cookieless-analytics" },
+      { "title": "Best open source analytics tools", "url": "/articles/open-source-web-analytics" }
+    ],
+    "comparisons": [
+      { "title": "OpenPanel vs Google Analytics", "url": "/compare/google-analytics-alternative" },
+      { "title": "OpenPanel vs Plausible", "url": "/compare/plausible-alternative" }
+    ]
+  },
+  "ctas": {
+    "primary": {
+      "label": "Try OpenPanel Free",
+      "href": "https://dashboard.openpanel.dev/onboarding"
+    },
+    "secondary": {
+      "label": "View Source on GitHub",
+      "href": "https://github.com/Openpanel-dev/openpanel"
+    }
+  }
+}

apps/public/content/for/wordpress.json

@@ -0,0 +1,157 @@
+{
+  "slug": "wordpress",
+  "audience": "wordpress",
+  "seo": {
+    "title": "WordPress Analytics Without Cookies — A Google Analytics Alternative",
+    "description": "Add privacy-first analytics to your WordPress site without cookie consent banners. OpenPanel is cookieless, open source, and starts at $2.50/month — a better alternative to GA4 for WordPress.",
+    "noindex": false
+  },
+  "hero": {
+    "heading": "WordPress Analytics Without the Cookie Banner",
+    "subheading": "Google Analytics on WordPress means cookie consent popups, GDPR complexity, and sending your visitors' data to US servers. OpenPanel is a cookieless WordPress analytics plugin that gives you pageviews, events, and user behavior — with full GDPR compliance out of the box and none of the privacy headaches.",
+    "badges": [
+      "No cookie banner needed",
+      "GDPR compliant",
+      "Open source",
+      "Lightweight — 2.3 KB"
+    ]
+  },
+  "problem": {
+    "title": "Why Google Analytics on WordPress creates problems",
+    "intro": "WordPress powers 40% of the web, but GA4 was not designed with WordPress privacy requirements in mind.",
+    "items": [
+      {
+        "title": "Google Analytics requires cookie consent on WordPress",
+        "description": "Installing GA4 on a WordPress site means a consent popup for every visitor. Under GDPR, you can't set GA4 cookies without explicit opt-in. That banner costs you conversions and corrupts your data."
+      },
+      {
+        "title": "GA4 sends data to US servers",
+        "description": "Google Analytics transfers visitor data to US servers. For European sites, this creates legal exposure under SCHREMS II — a risk WordPress site owners increasingly can't ignore."
+      },
+      {
+        "title": "WordPress analytics plugins are bloated",
+        "description": "Most GA4 WordPress plugins add significant weight to your site. Page speed suffers, Core Web Vitals scores drop, and you're still dealing with cookies."
+      },
+      {
+        "title": "You can't see user behavior, only pageviews",
+        "description": "GA4 tells you how many people visited. OpenPanel tells you what they did: which CTAs they clicked, where they dropped off, which blog posts convert to signups."
+      }
+    ]
+  },
+  "features": {
+    "title": "Privacy-first analytics for WordPress",
+    "intro": "OpenPanel gives WordPress site owners complete visibility without the cookie compliance headaches.",
+    "items": [
+      {
+        "title": "Official WordPress plugin",
+        "description": "Install the OpenPanel WordPress plugin directly from the WordPress plugin directory. Activate it, paste your Client ID, and page view tracking starts immediately — no code required."
+      },
+      {
+        "title": "Automatic page view tracking",
+        "description": "Every WordPress page, post, and custom post type is tracked automatically. No configuration needed for standard pageview analytics."
+      },
+      {
+        "title": "Cookie-free by default",
+        "description": "No cookies means no consent banner. Compliant with GDPR, CCPA, and ePrivacy without any configuration."
+      },
+      {
+        "title": "Custom event tracking",
+        "description": "Track clicks, form submissions, and conversions with a one-line JavaScript call. Know which CTAs and forms drive the most leads."
+      },
+      {
+        "title": "UTM campaign tracking",
+        "description": "See exactly which emails, ads, and social posts drive traffic to your WordPress site — and which ones actually convert."
+      },
+      {
+        "title": "Lightweight script — 2.3 KB",
+        "description": "OpenPanel's tracker is 20x smaller than GA4. No impact on Core Web Vitals or PageSpeed scores."
+      },
+      {
+        "title": "Self-hostable on your own server",
+        "description": "Run OpenPanel on your own infrastructure. Your WordPress visitor data never leaves your servers."
+      }
+    ]
+  },
+  "benefits": {
+    "title": "Why WordPress site owners switch to OpenPanel",
+    "intro": "OpenPanel replaces Google Analytics without sacrificing features — and fixes the privacy problems GA4 created.",
+    "items": [
+      {
+        "title": "No consent banner required",
+        "description": "Cookieless tracking means you're GDPR-compliant without a popup. No lost conversions, no fragmented data from opt-outs."
+      },
+      {
+        "title": "Replace Google Analytics without losing features",
+        "description": "Pageviews, referrers, countries, devices, UTM campaigns — all there. Plus events and funnels that GA4 requires complex configuration to support."
+      },
+      {
+        "title": "Your data stays out of Google's hands",
+        "description": "OpenPanel is EU-hosted with no data sharing. Ideal for European sites, publishers, and anyone avoiding Google's data monopoly."
+      },
+      {
+        "title": "Open source and auditable",
+        "description": "Unlike GA4, OpenPanel's code is public. You can see exactly what data is collected and how it's processed."
+      },
+      {
+        "title": "Affordable pricing",
+        "description": "From $2.50/month for small WordPress sites. Self-host for free if you prefer — full feature parity, no event limits."
+      }
+    ]
+  },
+  "faqs": {
+    "title": "Frequently asked questions",
+    "intro": "Common questions from WordPress site owners evaluating OpenPanel.",
+    "items": [
+      {
+        "question": "How do I install OpenPanel on WordPress?",
+        "answer": "Add the OpenPanel script tag to your WordPress site via your theme's header.php, a child theme, or any \"header scripts\" plugin. Paste the snippet before </head>. Automatic page view tracking starts immediately — no additional configuration needed."
+      },
+      {
+        "question": "Do I need a cookie consent banner with OpenPanel?",
+        "answer": "No. OpenPanel uses cookieless tracking and doesn't collect personal data by default. Under GDPR, cookie consent is only required when you actually use cookies. OpenPanel doesn't, so no banner is needed."
+      },
+      {
+        "question": "Is there an OpenPanel WordPress plugin?",
+        "answer": "Yes. The official OpenPanel plugin is available in the WordPress plugin directory. Search for \"OpenPanel\" in Plugins → Add New, install it, and paste your Client ID. You can also add the script tag manually via your theme's header.php or any \"add code to header\" plugin if you prefer."
+      },
+      {
+        "question": "How does OpenPanel compare to MonsterInsights or Analytify?",
+        "answer": "Those plugins are wrappers around Google Analytics — they still send data to Google and still require cookies. OpenPanel is an independent analytics platform that's cookieless by default and stores data in the EU."
+      },
+      {
+        "question": "Can I track WooCommerce events?",
+        "answer": "Yes. You can track add-to-cart, checkout, and purchase events by adding a few lines of JavaScript to your WooCommerce templates or using WordPress hooks. No dedicated WooCommerce plugin required."
+      },
+      {
+        "question": "Does OpenPanel affect WordPress site speed?",
+        "answer": "OpenPanel's script is 2.3 KB gzipped. By comparison, GA4 adds 50+ KB. Switching from GA4 to OpenPanel will likely improve your Core Web Vitals scores."
+      }
+    ]
+  },
+  "related_links": {
+    "guides": [
+      { "title": "Ecommerce tracking setup", "url": "/guides/ecommerce-tracking" },
+      { "title": "Website analytics setup", "url": "/guides/website-analytics-setup" },
+      { "title": "OpenPanel WordPress plugin", "url": "https://sv.wordpress.org/plugins/openpanel/" }
+    ],
+    "articles": [
+      { "title": "Cookieless analytics explained", "url": "/articles/cookieless-analytics" },
+      { "title": "How to self-host OpenPanel", "url": "/articles/self-hosted-web-analytics" }
+    ],
+    "comparisons": [
+      { "title": "OpenPanel vs Google Analytics", "url": "/compare/google-analytics-alternative" },
+      { "title": "OpenPanel vs Plausible", "url": "/compare/plausible-alternative" },
+      { "title": "OpenPanel vs Matomo", "url": "/compare/matomo-alternative" }
+    ]
+  },
+  "ctas": {
+    "primary": {
+      "label": "Try OpenPanel Free",
+      "href": "https://dashboard.openpanel.dev/onboarding"
+    },
+    "secondary": {
+      "label": "View Source on GitHub",
+      "href": "https://github.com/Openpanel-dev/openpanel"
+    }
+  }
+}

apps/public/content/pages/about.mdx

@@ -7,7 +7,7 @@ description: Learn about OpenPanel, the open-source web and product analytics pl
 
 **OpenPanel** is an open-source web and product analytics platform - a modern alternative to Mixpanel, Google Analytics, and Plausible. We're NOT a server control panel or hosting panel like other software that shares our name.
 
-If you were looking for a server administration panel (like cPanel or Plesk), you might be looking for [OpenPanel](https://openpanel.com) - that's a different product for managing web servers. **OpenPanel.dev** is all about analytics.
+If you were looking for a server administration panel (like cPanel or Plesk), you might be looking for [OpenPanel](https://openpanel.dev) - that's a different product for managing web servers. **OpenPanel.dev** is all about analytics.
 
 ## Introduction
 

apps/public/src/app/(home)/_sections/analytics-insights.tsx

@@ -1,56 +1,38 @@
-import {
-  BarChart3Icon,
-  ChevronRightIcon,
-  DollarSignIcon,
-  GlobeIcon,
-  PlayCircleIcon,
-} from 'lucide-react';
+import { ChevronRightIcon } from 'lucide-react';
 import Link from 'next/link';
 import { FeatureCard } from '@/components/feature-card';
+import { NotificationsIllustration } from '@/components/illustrations/notifications';
 import { ProductAnalyticsIllustration } from '@/components/illustrations/product-analytics';
+import { RetentionIllustration } from '@/components/illustrations/retention';
+import { SessionReplayIllustration } from '@/components/illustrations/session-replay';
 import { WebAnalyticsIllustration } from '@/components/illustrations/web-analytics';
 import { Section, SectionHeader } from '@/components/section';
 
-const features = [
+function wrap(child: React.ReactNode) {
+  return <div className="h-48 overflow-hidden">{child}</div>;
+}
+
+const mediumFeatures = [
   {
-    title: 'Revenue tracking',
+    title: 'Retention',
     description:
-      'Track revenue from your payments and get insights into your revenue sources.',
-    icon: DollarSignIcon,
-    link: {
-      href: '/features/revenue-tracking',
-      children: 'More about revenue',
-    },
-  },
-  {
-    title: 'Profiles & Sessions',
-    description:
-      'Track individual users and their complete journey across your platform.',
-    icon: GlobeIcon,
-    link: {
-      href: '/features/identify-users',
-      children: 'Identify your users',
-    },
-  },
-  {
-    title: 'Event Tracking',
-    description:
-      'Capture every important interaction with flexible event tracking.',
-    icon: BarChart3Icon,
-    link: {
-      href: '/features/event-tracking',
-      children: 'All about tracking',
-    },
+      'Know how many users come back after day 1, day 7, day 30. Identify which behaviors predict long-term retention.',
+    illustration: wrap(<RetentionIllustration />),
+    link: { href: '/features/retention', children: 'View retention' },
   },
   {
     title: 'Session Replay',
     description:
-      'Watch real user sessions to see exactly what happened. Privacy controls built in, loads async.',
-    icon: PlayCircleIcon,
-    link: {
-      href: '/features/session-replay',
-      children: 'See session replay',
-    },
+      'Watch real user sessions to see exactly what happened — clicks, scrolls, rage clicks. Privacy controls built in.',
+    illustration: wrap(<SessionReplayIllustration />),
+    link: { href: '/features/session-replay', children: 'See session replay' },
+  },
+  {
+    title: 'Notifications',
+    description:
+      'Get notified when a funnel is completed. Stay on top of key moments in your product without watching dashboards all day.',
+    illustration: wrap(<NotificationsIllustration />),
+    link: { href: '/features/notifications', children: 'Set up notifications' },
   },
 ];
 
@@ -59,37 +41,39 @@ export function AnalyticsInsights() {
     <Section className="container">
       <SectionHeader
         className="mb-16"
-        description="Combine web and product analytics in one platform. Track visitors, events, revenue, and user journeys, all with privacy-first tracking."
+        description="From first page view to long-term retention — every touchpoint in one platform. No sampling, no data limits, no guesswork."
         label="ANALYTICS & INSIGHTS"
-        title="See the full picture of your users and product performance"
+        title="Everything you need to understand your users"
       />
+
       <div className="mb-6 grid grid-cols-1 gap-6 md:grid-cols-2">
         <FeatureCard
           className="px-0 **:data-content:px-6"
-          description="Understand your website performance with privacy-first analytics and clear, actionable insights."
+          description="Understand your website performance with privacy-first analytics. Track visitors, referrers, and page views without touching user cookies."
           illustration={<WebAnalyticsIllustration />}
           title="Web Analytics"
-          variant="large"
         />
         <FeatureCard
           className="px-0 **:data-content:px-6"
-          description="Turn raw data into clarity with real-time visualization of performance, behavior, and trends."
+          description="Go beyond page views. Track custom events, understand user flows, and explore exactly how people use your product."
           illustration={<ProductAnalyticsIllustration />}
           title="Product Analytics"
-          variant="large"
         />
       </div>
-      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
-        {features.map((feature) => (
+
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
+        {mediumFeatures.map((feature) => (
           <FeatureCard
+            className="px-0 pt-0 **:data-content:px-6"
             description={feature.description}
-            icon={feature.icon}
+            illustration={feature.illustration}
             key={feature.title}
             link={feature.link}
             title={feature.title}
           />
         ))}
       </div>
+
       <p className="mt-8 text-center">
         <Link
           className="inline-flex items-center gap-1 text-muted-foreground text-sm transition-colors hover:text-foreground"

apps/public/src/app/(home)/_sections/collaboration.tsx

@@ -15,23 +15,23 @@ import { CollaborationChart } from './collaboration-chart';
 
 const features = [
   {
-    title: 'Visualize your data',
+    title: 'Flexible data visualization',
     description:
-      'See your data in a visual way. You can create advanced reports and more to understand',
+      'Build line charts, bar charts, sankey flows, and custom dashboards. Combine metrics from any event into a single view.',
     icon: ChartBarIcon,
     slug: 'data-visualization',
   },
   {
     title: 'Share & Collaborate',
     description:
-      'Invite unlimited members with org-wide or project-level access. Share full dashboards or individual reports—publicly or behind a password.',
+      'Invite unlimited team members with org-wide or project-level access. Share dashboards publicly or lock them behind a password.',
     icon: LayoutDashboardIcon,
     slug: 'share-and-collaborate',
   },
   {
-    title: 'Integrations',
+    title: 'Integrations & Webhooks',
     description:
-      'Get notified when new events are created, or forward specific events to your own systems with our easy-to-use integrations.',
+      'Forward events to your own systems or third-party tools. Connect OpenPanel to Slack, your data warehouse, or any webhook endpoint.',
     icon: WorkflowIcon,
     slug: 'integrations',
   },

apps/public/src/app/(home)/_sections/data-privacy.tsx

@@ -43,9 +43,9 @@ export function DataPrivacy() {
       />
       <div className="mt-16 mb-6 grid grid-cols-1 gap-6 md:grid-cols-2">
         <FeatureCard
-          description="Privacy-first analytics without cookies, fingerprinting, or invasive tracking. Built for compliance and user trust."
+          description="GDPR compliant and privacy-friendly analytics without cookies or invasive tracking. Data is EU hosted, and a Data Processing Agreement (DPA) is available to sign."
           illustration={<PrivacyIllustration />}
-          title="Privacy-first"
+          title="GDPR compliant"
           variant="large"
         />
         <FeatureCard

apps/public/src/app/(home)/_sections/faq.tsx

@@ -34,9 +34,9 @@ const faqData = [
       'We have a dedicated compare page where you can see how OpenPanel compares to other analytics tools. You can find it [here](/compare). You can also read our comprehensive guide on the [best open source web analytics tools](/articles/open-source-web-analytics).',
   },
   {
-    question: 'How does OpenPanel compare to Mixpanel?',
+    question: 'Is OpenPanel a good Mixpanel alternative?',
     answer:
-      "OpenPanel offers similar powerful product analytics features as Mixpanel, but with the added benefits of being open-source, more affordable, and including web analytics capabilities.\n\nYou get Mixpanel's power with Plausible's simplicity.",
+      "Yes — OpenPanel covers the core features most teams use in Mixpanel: event tracking, funnels, retention, cohorts, and user profiles. The key differences are pricing, privacy, and self-hosting.\n\nOpenPanel starts at $2.50/month and can be self-hosted for free, while Mixpanel is cloud-only and scales to hundreds or thousands per month. OpenPanel is also cookie-free by default with EU-only hosting, so no consent banners required — something Mixpanel can't offer.\n\nSee the full [OpenPanel vs Mixpanel comparison](/compare/mixpanel-alternative) for a side-by-side breakdown.",
   },
   {
     question: 'How does OpenPanel compare to Plausible?',

apps/public/src/app/(home)/_sections/feature-spotlight.tsx

@@ -0,0 +1,68 @@
+import { FeatureCard } from '@/components/feature-card';
+import { ConversionsIllustration } from '@/components/illustrations/conversions';
+import { GoogleSearchConsoleIllustration } from '@/components/illustrations/google-search-console';
+import { RevenueIllustration } from '@/components/illustrations/revenue';
+import { Section, SectionHeader } from '@/components/section';
+
+function wrap(child: React.ReactNode) {
+  return <div className="h-48 overflow-hidden">{child}</div>;
+}
+
+const features = [
+  {
+    title: 'Revenue Tracking',
+    description:
+      'Connect payment events to track MRR and see which referrers drive the most revenue.',
+    illustration: wrap(<RevenueIllustration />),
+    link: {
+      href: '/features/revenue-tracking',
+      children: 'Track revenue',
+    },
+  },
+  {
+    title: 'Conversion Tracking',
+    description:
+      'Monitor conversion rates over time and break down by A/B variant, country, or device. Catch regressions before they cost you.',
+    illustration: wrap(<ConversionsIllustration />),
+    link: {
+      href: '/features/conversion',
+      children: 'Track conversions',
+    },
+  },
+  {
+    title: 'Google Search Console',
+    description:
+      'See which search queries bring organic traffic and how visitors convert after landing. Your SEO and product data, in one place.',
+    illustration: wrap(<GoogleSearchConsoleIllustration />),
+    link: {
+      href: '/features/integrations',
+      children: 'View integrations',
+    },
+  },
+];
+
+export function FeatureSpotlight() {
+  return (
+    <Section className="container">
+      <SectionHeader
+        className="mb-16"
+        description="OpenPanel goes beyond page views. Track revenue, monitor conversions, and connect your SEO data — all without switching tools."
+        label="GROWTH TOOLS"
+        title="Built for teams who ship and measure"
+      />
+
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
+        {features.map((feature) => (
+          <FeatureCard
+            className="px-0 pt-0 **:data-content:px-6"
+            description={feature.description}
+            illustration={feature.illustration}
+            key={feature.title}
+            link={feature.link}
+            title={feature.title}
+          />
+        ))}
+      </div>
+    </Section>
+  );
+}

apps/public/src/app/(home)/_sections/hero.tsx

@@ -5,14 +5,14 @@ import {
   CalendarIcon,
   CookieIcon,
   CreditCardIcon,
-  DatabaseIcon,
   GithubIcon,
-  ServerIcon,
+  ShieldCheckIcon,
 } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useState } from 'react';
 import { Competition } from '@/components/competition';
+import { EuFlag } from '@/components/eu-flag';
 import { GetStartedButton } from '@/components/get-started-button';
 import { Perks } from '@/components/perks';
 import { Button } from '@/components/ui/button';
@@ -21,10 +21,10 @@ import { cn } from '@/lib/utils';
 const perks = [
   { text: 'Free trial 30 days', icon: CalendarIcon },
   { text: 'No credit card required', icon: CreditCardIcon },
+  { text: 'GDPR compliant', icon: ShieldCheckIcon },
+  { text: 'EU hosted', icon: EuFlag },
   { text: 'Cookie-less tracking', icon: CookieIcon },
   { text: 'Open-source', icon: GithubIcon },
-  { text: 'Your data, your rules', icon: DatabaseIcon },
-  { text: 'Self-hostable', icon: ServerIcon },
 ];
 
 const aspectRatio = 2946 / 1329;
@@ -90,7 +90,7 @@ export function Hero() {
             TRUSTED BY 1,000+ PROJECTS
           </div>
           <h1 className="font-semibold text-4xl leading-[1.1] md:text-5xl">
-            OpenPanel - The open-source alternative to <Competition />
+            The open-source alternative to <Competition />
           </h1>
           <p className="text-lg text-muted-foreground">
             An open-source web and product analytics platform that combines the

apps/public/src/app/(home)/_sections/mixpanel-alternative.tsx

@@ -0,0 +1,63 @@
+import { BarChart2Icon, CoinsIcon, GithubIcon, ServerIcon } from 'lucide-react';
+import Link from 'next/link';
+import { FeatureCard } from '@/components/feature-card';
+import { GetStartedButton } from '@/components/get-started-button';
+import { Section, SectionHeader } from '@/components/section';
+import { Button } from '@/components/ui/button';
+
+const reasons = [
+  {
+    icon: CoinsIcon,
+    title: 'Fraction of the cost',
+    description:
+      "Mixpanel's pricing scales to hundreds or thousands per month as your event volume grows. OpenPanel starts at $2.50/month — or self-host for free with no event limits.",
+  },
+  {
+    icon: BarChart2Icon,
+    title: 'The features you actually use',
+    description:
+      'Events, funnels, retention, cohorts, user profiles, custom dashboards, and A/B testing — all there. OpenPanel covers every core analytics workflow from Mixpanel without the learning curve.',
+  },
+  {
+    icon: ServerIcon,
+    title: 'Actually self-hostable',
+    description:
+      'Mixpanel is cloud-only. OpenPanel runs on your own infrastructure with a simple Docker setup. Full data ownership, zero vendor lock-in.',
+  },
+  {
+    icon: GithubIcon,
+    title: 'Open source & transparent',
+    description:
+      "Mixpanel is a black box. OpenPanel's code is public on GitHub — audit it, contribute to it, or fork it. No surprises, no hidden data processing.",
+  },
+];
+
+export function MixpanelAlternative() {
+  return (
+    <Section className="container">
+      <SectionHeader
+        description="OpenPanel covers the product analytics features teams actually use — events, funnels, retention, cohorts, and user profiles — without Mixpanel's pricing, privacy trade-offs, or vendor lock-in."
+        label="Mixpanel Alternative"
+        title="Why teams switch from Mixpanel to OpenPanel"
+      />
+      <div className="mt-8 grid grid-cols-1 gap-4 md:grid-cols-2">
+        {reasons.map((reason) => (
+          <FeatureCard
+            description={reason.description}
+            icon={reason.icon}
+            key={reason.title}
+            title={reason.title}
+          />
+        ))}
+      </div>
+      <div className="row mt-8 gap-4">
+        <GetStartedButton />
+        <Button asChild className="px-6" size="lg" variant="outline">
+          <Link href="/compare/mixpanel-alternative">
+            OpenPanel vs Mixpanel →
+          </Link>
+        </Button>
+      </div>
+    </Section>
+  );
+}

apps/public/src/app/(home)/_sections/pricing.tsx

@@ -55,6 +55,9 @@ export function Pricing() {
           <div className="col mt-8 w-full items-baseline md:mt-auto">
             {selected ? (
               <>
+                <span className="mb-2 rounded-full bg-primary/10 px-2.5 py-0.5 font-medium text-primary text-xs">
+                  30-day free trial
+                </span>
                 <div className="row items-end gap-3">
                   <NumberFlow
                     className="font-bold text-5xl"
@@ -67,9 +70,6 @@ export function Pricing() {
                     locales={'en-US'}
                     value={selected.price}
                   />
-                  <span className="mb-2 rounded-full bg-primary/10 px-2.5 py-0.5 font-medium text-primary text-xs">
-                    30-day free trial
-                  </span>
                 </div>
                 <div className="row w-full justify-between">
                   <span className="-mt-2 text-muted-foreground/80 text-sm">

apps/public/src/app/(home)/_sections/why-openpanel.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { QuoteIcon } from 'lucide-react';
+import { QuoteIcon, StarIcon } from 'lucide-react';
 import Image from 'next/image';
 import Markdown from 'react-markdown';
 import { FeatureCardBackground } from '@/components/feature-card';
@@ -94,13 +94,22 @@ export function WhyOpenPanel() {
           ))}
         </div>
         <div className="-mx-4 grid grid-cols-1 border-y py-4 md:grid-cols-2">
-          {quotes.map((quote) => (
+          {quotes.slice(0, 2).map((quote) => (
             <figure
               className="group px-4 py-4 md:odd:border-r"
               key={quote.author}
             >
-              <QuoteIcon className="mb-2 size-10 stroke-1 text-muted-foreground/50 transition-all group-hover:rotate-6 group-hover:text-foreground" />
-              <blockquote className="prose text-xl">
+              <div className="row items-center justify-between">
+                <QuoteIcon className="mb-2 size-10 stroke-1 text-muted-foreground/50 transition-all group-hover:rotate-6 group-hover:text-foreground" />
+                <div className="row gap-1">
+                  <StarIcon className="size-4 fill-yellow-500 stroke-0 text-yellow-500" />
+                  <StarIcon className="size-4 fill-yellow-500 stroke-0 text-yellow-500" />
+                  <StarIcon className="size-4 fill-yellow-500 stroke-0 text-yellow-500" />
+                  <StarIcon className="size-4 fill-yellow-500 stroke-0 text-yellow-500" />
+                  <StarIcon className="size-4 fill-yellow-500 stroke-0 text-yellow-500" />
+                </div>
+              </div>
+              <blockquote className="prose text-justify text-xl">
                 <Markdown>{quote.quote}</Markdown>
               </blockquote>
               <figcaption className="row mt-4 justify-between text-muted-foreground text-sm">

apps/public/src/app/(home)/page.tsx

@@ -1,8 +1,10 @@
 import { AnalyticsInsights } from './_sections/analytics-insights';
 import { Collaboration } from './_sections/collaboration';
+import { FeatureSpotlight } from './_sections/feature-spotlight';
 import { CtaBanner } from './_sections/cta-banner';
 import { DataPrivacy } from './_sections/data-privacy';
 import { Faq } from './_sections/faq';
+import { MixpanelAlternative } from './_sections/mixpanel-alternative';
 import { Hero } from './_sections/hero';
 import { Pricing } from './_sections/pricing';
 import { Sdks } from './_sections/sdks';
@@ -57,10 +59,12 @@ export default function HomePage() {
       <Hero />
       <WhyOpenPanel />
       <AnalyticsInsights />
+      <FeatureSpotlight />
       <Collaboration />
       <Testimonials />
       <Pricing />
       <DataPrivacy />
+      <MixpanelAlternative />
       <Sdks />
       <Faq />
       <CtaBanner />

apps/public/src/app/tools/ip-lookup/layout.tsx

@@ -3,9 +3,9 @@ import type { Metadata } from 'next';
 
 export const metadata: Metadata = getPageMetadata({
   url: '/tools/ip-lookup',
-  title: 'IP Lookup - Free IP Address Geolocation Tool',
+  title: 'Free IP Address Lookup — Geolocation, ISP & ASN',
   description:
-    'Find your IP address and get detailed geolocation information including country, city, ISP, ASN, and coordinates. Free IP lookup tool with map preview.',
+    'Instantly look up any IP address. Get country, city, region, ISP, ASN, and coordinates in seconds. Free tool, no signup required, powered by MaxMind GeoLite2.',
 });
 
 export default function IPLookupLayout({

apps/public/src/components/eu-flag.tsx

@@ -0,0 +1,37 @@
+function star(cx: number, cy: number, outerR: number, innerR: number) {
+  const pts: string[] = [];
+  for (let i = 0; i < 10; i++) {
+    const r = i % 2 === 0 ? outerR : innerR;
+    const angle = (i * Math.PI) / 5 - Math.PI / 2;
+    pts.push(`${cx + r * Math.cos(angle)},${cy + r * Math.sin(angle)}`);
+  }
+  return pts.join(' ');
+}
+
+const STARS = Array.from({ length: 12 }, (_, i) => {
+  const angle = (i * 30 - 90) * (Math.PI / 180);
+  return {
+    x: 12 + 5 * Math.cos(angle),
+    y: 8 + 5 * Math.sin(angle),
+  };
+});
+
+export function EuFlag({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect fill="#003399" height="16" rx="1.5" width="24" />
+      {STARS.map((s, i) => (
+        <polygon
+          // biome-ignore lint/suspicious/noArrayIndexKey: static data
+          key={i}
+          fill="#FFCC00"
+          points={star(s.x, s.y, 1.1, 0.45)}
+        />
+      ))}
+    </svg>
+  );
+}

apps/public/src/components/illustrations/conversions.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { SimpleChart } from '@/components/simple-chart';
+
+const variantA = [28, 31, 29, 34, 32, 36, 35, 38, 37, 40, 39, 42];
+const variantB = [28, 30, 32, 35, 38, 37, 40, 42, 44, 43, 47, 50];
+
+export function ConversionsIllustration() {
+  return (
+    <div className="h-full col gap-3 px-4 pb-3 pt-5">
+      {/* A/B variant cards */}
+      <div className="row gap-3">
+        <div className="col flex-1 gap-1 rounded-xl border bg-card p-3 transition-all duration-300 group-hover:-translate-y-0.5">
+          <div className="row items-center gap-1.5">
+            <span className="rounded bg-muted px-1.5 py-0.5 font-mono text-[9px]">
+              Variant A
+            </span>
+          </div>
+          <span className="font-bold font-mono text-xl">28.4%</span>
+          <SimpleChart
+            height={24}
+            points={variantA}
+            strokeColor="var(--foreground)"
+            width={200}
+          />
+        </div>
+        <div className="col flex-1 gap-1 rounded-xl border border-emerald-500/30 bg-card p-3 transition-all delay-75 duration-300 group-hover:-translate-y-0.5">
+          <div className="row items-center gap-1.5">
+            <span className="rounded bg-emerald-500/10 px-1.5 py-0.5 font-mono text-[9px] text-emerald-600 dark:text-emerald-400">
+              Variant B ↑
+            </span>
+          </div>
+          <span className="font-bold font-mono text-xl text-emerald-500">
+            41.2%
+          </span>
+          <SimpleChart
+            height={24}
+            points={variantB}
+            strokeColor="rgb(34, 197, 94)"
+            width={200}
+          />
+        </div>
+      </div>
+
+      {/* Breakdown label */}
+      <div className="col gap-1 rounded-xl border bg-card/60 px-3 py-2.5">
+        <span className="text-[9px] uppercase tracking-wider text-muted-foreground">
+          Breakdown by experiment variant
+        </span>
+        <div className="row items-center gap-2">
+          <div className="h-1 flex-1 rounded-full bg-muted">
+            <div
+              className="h-1 rounded-full bg-foreground/50"
+              style={{ width: '57%' }}
+            />
+          </div>
+          <span className="text-[9px] text-muted-foreground">A: 57%</span>
+        </div>
+        <div className="row items-center gap-2">
+          <div className="h-1 flex-1 rounded-full bg-muted">
+            <div
+              className="h-1 rounded-full bg-emerald-500"
+              style={{ width: '82%' }}
+            />
+          </div>
+          <span className="text-[9px] text-muted-foreground">B: 82%</span>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/public/src/components/illustrations/google-search-console.tsx

@@ -0,0 +1,78 @@
+const queries = [
+  {
+    query: 'openpanel analytics',
+    clicks: 312,
+    impressions: '4.1k',
+    pos: 1.2,
+  },
+  {
+    query: 'open source mixpanel alternative',
+    clicks: 187,
+    impressions: '3.8k',
+    pos: 2.4,
+  },
+  {
+    query: 'web analytics without cookies',
+    clicks: 98,
+    impressions: '2.2k',
+    pos: 4.7,
+  },
+];
+
+export function GoogleSearchConsoleIllustration() {
+  return (
+    <div className="col h-full gap-2 px-4 pt-5 pb-3">
+      {/* Top stats */}
+      <div className="row mb-1 gap-2">
+        <div className="col flex-1 gap-0.5 rounded-lg border bg-card px-2.5 py-2">
+          <span className="text-[8px] text-muted-foreground uppercase tracking-wider">
+            Clicks
+          </span>
+          <span className="font-bold font-mono text-sm">740</span>
+        </div>
+        <div className="col flex-1 gap-0.5 rounded-lg border bg-card px-2.5 py-2">
+          <span className="text-[8px] text-muted-foreground uppercase tracking-wider">
+            Impr.
+          </span>
+          <span className="font-bold font-mono text-sm">13k</span>
+        </div>
+        <div className="col flex-1 gap-0.5 rounded-lg border bg-card px-2.5 py-2">
+          <span className="text-[8px] text-muted-foreground uppercase tracking-wider">
+            Avg. CTR
+          </span>
+          <span className="font-bold font-mono text-sm">5.7%</span>
+        </div>
+        <div className="col flex-1 gap-0.5 rounded-lg border bg-card px-2.5 py-2">
+          <span className="text-[8px] text-muted-foreground uppercase tracking-wider">
+            Avg. Pos
+          </span>
+          <span className="font-bold font-mono text-sm">2.8</span>
+        </div>
+      </div>
+
+      {/* Query table */}
+      <div className="flex-1 overflow-hidden rounded-xl border border-border bg-card">
+        <div className="row border-border border-b px-3 py-1.5">
+          <span className="flex-1 text-[8px] text-muted-foreground uppercase tracking-wider">
+            Query
+          </span>
+          <span className="w-10 text-right text-[8px] text-muted-foreground uppercase tracking-wider">
+            Pos
+          </span>
+        </div>
+        {queries.map((q, i) => (
+          <div
+            className="row items-center border-border/50 border-b px-3 py-1.5 last:border-0"
+            key={q.query}
+            style={{ opacity: 1 - i * 0.18 }}
+          >
+            <span className="flex-1 truncate text-[9px]">{q.query}</span>
+            <span className="w-10 text-right font-mono text-[9px] text-muted-foreground">
+              {q.pos}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/public/src/components/illustrations/notifications.tsx

@@ -0,0 +1,47 @@
+import { CheckCircleIcon } from 'lucide-react';
+
+export function NotificationsIllustration() {
+  return (
+    <div className="col h-full justify-center gap-3 px-6 py-4">
+      {/* Funnel completion notification */}
+      <div className="col gap-2 rounded-xl border border-border bg-card p-4 shadow-lg transition-transform duration-300 group-hover:-translate-y-0.5">
+        <div className="row items-center gap-2">
+          <CheckCircleIcon className="size-4 shrink-0 text-emerald-500" />
+          <span className="font-semibold text-xs">Funnel completed</span>
+          <span className="ml-auto text-[9px] text-muted-foreground">
+            just now
+          </span>
+        </div>
+        <p className="font-medium text-sm">Signup Flow — 142 today</p>
+        <div className="row items-center gap-2">
+          <div className="h-1.5 flex-1 rounded-full bg-muted">
+            <div
+              className="h-1.5 rounded-full bg-emerald-500"
+              style={{ width: '71%' }}
+            />
+          </div>
+          <span className="text-[9px] text-muted-foreground">
+            71% conversion
+          </span>
+        </div>
+      </div>
+
+      {/* Notification rule */}
+      <div className="col gap-1.5 px-3 opacity-80">
+        <span className="text-[9px] text-muted-foreground uppercase tracking-wider">
+          Notification rule
+        </span>
+        <div className="row flex-wrap items-center gap-1.5">
+          <span className="text-[9px] text-muted-foreground">When</span>
+          <span className="rounded bg-muted px-1.5 py-0.5 font-mono text-[9px]">
+            Signup Flow
+          </span>
+          <span className="text-[9px] text-muted-foreground">completes →</span>
+          <span className="rounded bg-muted px-1.5 py-0.5 font-mono text-[9px]">
+            #growth
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/public/src/components/illustrations/retention.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+const cohorts = [
+  { label: 'Week 1', values: [100, 68, 45, 38, 31] },
+  { label: 'Week 2', values: [100, 72, 51, 42, 35] },
+  { label: 'Week 3', values: [100, 65, 48, 39, null] },
+  { label: 'Week 4', values: [100, 70, null, null, null] },
+];
+
+const headers = ['Day 0', 'Day 1', 'Day 7', 'Day 14', 'Day 30'];
+
+function cellStyle(v: number | null) {
+  if (v === null) {
+    return {
+      backgroundColor: 'transparent',
+      borderColor: 'var(--border)',
+      color: 'var(--muted-foreground)',
+    };
+  }
+  const opacity = 0.12 + (v / 100) * 0.7;
+  return {
+    backgroundColor: `rgba(34, 197, 94, ${opacity})`,
+    borderColor: `rgba(34, 197, 94, 0.3)`,
+    color: v > 55 ? 'rgba(0,0,0,0.75)' : 'var(--foreground)',
+  };
+}
+
+export function RetentionIllustration() {
+  return (
+    <div className="h-full px-4 pb-3 pt-5">
+      <div className="col h-full gap-1.5">
+        <div className="row gap-1">
+          <div className="w-12 shrink-0" />
+          {headers.map((h) => (
+            <div
+              key={h}
+              className="flex-1 text-center text-[9px] text-muted-foreground"
+            >
+              {h}
+            </div>
+          ))}
+        </div>
+        {cohorts.map(({ label, values }) => (
+          <div key={label} className="row flex-1 gap-1">
+            <div className="flex w-12 shrink-0 items-center text-[9px] text-muted-foreground">
+              {label}
+            </div>
+            {values.map((v, i) => (
+              <div
+                // biome-ignore lint/suspicious/noArrayIndexKey: static data
+                key={i}
+                className="flex flex-1 items-center justify-center rounded border text-[9px] font-medium transition-all duration-300 group-hover:scale-[1.03]"
+                style={cellStyle(v)}
+              >
+                {v !== null ? `${v}%` : '—'}
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/public/src/components/illustrations/revenue.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { SimpleChart } from '@/components/simple-chart';
+
+const revenuePoints = [28, 34, 31, 40, 37, 44, 41, 50, 47, 56, 59, 65];
+
+const referrers = [
+  { name: 'google.com', amount: '$3,840', pct: 46 },
+  { name: 'twitter.com', amount: '$1,920', pct: 23 },
+  { name: 'github.com', amount: '$1,260', pct: 15 },
+  { name: 'direct', amount: '$1,400', pct: 16 },
+];
+
+export function RevenueIllustration() {
+  return (
+    <div className="h-full col gap-3 px-4 pb-3 pt-5">
+      {/* MRR stat + chart */}
+      <div className="row gap-3">
+        <div className="col gap-1 rounded-xl border bg-card p-3 transition-all duration-300 group-hover:-translate-y-0.5">
+          <span className="text-[9px] uppercase tracking-wider text-muted-foreground">
+            MRR
+          </span>
+          <span className="font-bold font-mono text-xl text-emerald-500">
+            $8,420
+          </span>
+          <span className="text-[9px] text-emerald-500">↑ 12% this month</span>
+        </div>
+        <div className="col flex-1 gap-1 rounded-xl border bg-card px-3 py-2">
+          <span className="text-[9px] text-muted-foreground">MRR over time</span>
+          <SimpleChart
+            className="mt-1 flex-1"
+            height={36}
+            points={revenuePoints}
+            strokeColor="rgb(34, 197, 94)"
+            width={400}
+          />
+        </div>
+      </div>
+
+      {/* Revenue by referrer */}
+      <div className="flex-1 overflow-hidden rounded-xl border bg-card">
+        <div className="row border-b border-border px-3 py-1.5">
+          <span className="flex-1 text-[8px] uppercase tracking-wider text-muted-foreground">
+            Referrer
+          </span>
+          <span className="text-[8px] uppercase tracking-wider text-muted-foreground">
+            Revenue
+          </span>
+        </div>
+        {referrers.map((r) => (
+          <div
+            className="row items-center gap-2 border-b border-border/50 px-3 py-1.5 last:border-0"
+            key={r.name}
+          >
+            <span className="text-[9px] text-muted-foreground flex-none w-20 truncate">
+              {r.name}
+            </span>
+            <div className="flex-1 h-1 rounded-full bg-muted overflow-hidden">
+              <div
+                className="h-1 rounded-full bg-emerald-500/70"
+                style={{ width: `${r.pct}%` }}
+              />
+            </div>
+            <span className="font-mono text-[9px] text-emerald-500 flex-none">
+              {r.amount}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/public/src/components/illustrations/session-replay.tsx

@@ -0,0 +1,89 @@
+import { PlayIcon } from 'lucide-react';
+
+export function SessionReplayIllustration() {
+  return (
+    <div className="h-full px-6 pb-3 pt-4">
+      <div className="col h-full overflow-hidden rounded-xl border border-border bg-background shadow-lg transition-transform duration-300 group-hover:-translate-y-0.5">
+        {/* Browser chrome */}
+        <div className="row shrink-0 items-center gap-1.5 border-b border-border bg-muted/30 px-3 py-2">
+          <div className="h-2 w-2 rounded-full bg-red-400" />
+          <div className="h-2 w-2 rounded-full bg-yellow-400" />
+          <div className="h-2 w-2 rounded-full bg-green-400" />
+          <div className="mx-2 flex-1 rounded bg-background/80 px-2 py-0.5 text-[8px] text-muted-foreground">
+            app.example.com/pricing
+          </div>
+        </div>
+
+        {/* Page content */}
+        <div className="relative flex-1 overflow-hidden p-3">
+          <div className="mb-2 h-2 w-20 rounded-full bg-muted/60" />
+          <div className="mb-4 h-2 w-32 rounded-full bg-muted/40" />
+          <div className="row mb-3 gap-2">
+            <div className="h-10 flex-1 rounded-lg border border-border bg-muted/20" />
+            <div className="h-10 flex-1 rounded-lg border border-border bg-muted/20" />
+          </div>
+          <div className="mb-2 h-2 w-28 rounded-full bg-muted/30" />
+          <div className="h-2 w-24 rounded-full bg-muted/20" />
+
+          {/* Click heatspot */}
+          <div
+            className="absolute"
+            style={{ left: '62%', top: '48%' }}
+          >
+            <div className="h-4 w-4 animate-pulse rounded-full border-2 border-blue-500/70 bg-blue-500/20" />
+          </div>
+          <div
+            className="absolute"
+            style={{ left: '25%', top: '32%' }}
+          >
+            <div className="h-2.5 w-2.5 rounded-full border border-blue-500/40 bg-blue-500/25" />
+          </div>
+
+          {/* Cursor trail */}
+          <svg
+            className="pointer-events-none absolute inset-0 h-full w-full"
+            style={{ overflow: 'visible' }}
+          >
+            <path
+              d="M 18% 22% Q 42% 28% 62% 48%"
+              fill="none"
+              stroke="rgb(59 130 246 / 0.35)"
+              strokeDasharray="3 2"
+              strokeWidth="1"
+            />
+          </svg>
+
+          {/* Cursor */}
+          <div
+            className="absolute"
+            style={{
+              left: 'calc(62% + 8px)',
+              top: 'calc(48% + 6px)',
+            }}
+          >
+            <svg fill="none" height="12" viewBox="0 0 10 12" width="10">
+              <path
+                d="M0 0L0 10L3 7L5 11L6.5 10.5L4.5 6.5L8 6L0 0Z"
+                fill="var(--foreground)"
+              />
+            </svg>
+          </div>
+        </div>
+
+        {/* Playback bar */}
+        <div className="row shrink-0 items-center gap-2 border-t border-border bg-muted/20 px-3 py-2">
+          <PlayIcon className="size-3 shrink-0 text-muted-foreground" />
+          <div className="relative flex-1 h-1 overflow-hidden rounded-full bg-muted">
+            <div
+              className="absolute left-0 top-0 h-1 rounded-full bg-blue-500"
+              style={{ width: '42%' }}
+            />
+          </div>
+          <span className="font-mono text-[8px] text-muted-foreground">
+            0:52 / 2:05
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/public/src/components/illustrations/web-analytics.tsx

@@ -1,188 +1,165 @@
 'use client';
-import { SimpleChart } from '@/components/simple-chart';
-import { cn } from '@/lib/utils';
+
 import NumberFlow from '@number-flow/react';
-import { AnimatePresence, motion } from 'framer-motion';
-import { ArrowUpIcon } from 'lucide-react';
 import Image from 'next/image';
 import { useEffect, useState } from 'react';
 
-const TRAFFIC_SOURCES = [
+const VISITOR_DATA = [1840, 2100, 1950, 2400, 2250, 2650, 2980];
+const DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+
+const STATS = [
+  { label: 'Visitors', value: 4128, formatted: null, change: 12, up: true },
+  { label: 'Page views', value: 12438, formatted: '12.4k', change: 8, up: true },
+  { label: 'Bounce rate', value: null, formatted: '42%', change: 3, up: false },
+  { label: 'Avg. session', value: null, formatted: '3m 23s', change: 5, up: true },
+];
+
+const SOURCES = [
   {
     icon: 'https://api.openpanel.dev/misc/favicon?url=https%3A%2F%2Fgoogle.com',
-    name: 'Google',
-    percentage: 49,
-    value: 2039,
-  },
-  {
-    icon: 'https://api.openpanel.dev/misc/favicon?url=https%3A%2F%2Finstagram.com',
-    name: 'Instagram',
-    percentage: 23,
-    value: 920,
-  },
-  {
-    icon: 'https://api.openpanel.dev/misc/favicon?url=https%3A%2F%2Ffacebook.com',
-    name: 'Facebook',
-    percentage: 18,
-    value: 750,
+    name: 'google.com',
+    pct: 49,
   },
   {
     icon: 'https://api.openpanel.dev/misc/favicon?url=https%3A%2F%2Ftwitter.com',
-    name: 'Twitter',
-    percentage: 10,
-    value: 412,
+    name: 'twitter.com',
+    pct: 21,
+  },
+  {
+    icon: 'https://api.openpanel.dev/misc/favicon?url=https%3A%2F%2Fgithub.com',
+    name: 'github.com',
+    pct: 14,
   },
 ];
 
-const COUNTRIES = [
-  { icon: '🇺🇸', name: 'United States', percentage: 37, value: 1842 },
-  { icon: '🇩🇪', name: 'Germany', percentage: 28, value: 1391 },
-  { icon: '🇬🇧', name: 'United Kingdom', percentage: 20, value: 982 },
-  { icon: '🇯🇵', name: 'Japan', percentage: 15, value: 751 },
-];
+function AreaChart({ data }: { data: number[] }) {
+  const max = Math.max(...data);
+  const w = 400;
+  const h = 64;
+  const xStep = w / (data.length - 1);
+  const pts = data.map((v, i) => ({ x: i * xStep, y: h - (v / max) * h }));
+  const line = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x},${p.y}`).join(' ');
+  const area = `${line} L ${w},${h} L 0,${h} Z`;
+  const last = pts[pts.length - 1];
+
+  return (
+    <svg className="w-full" viewBox={`0 0 ${w} ${h + 4}`}>
+      <defs>
+        <linearGradient id="wa-fill" x1="0" x2="0" y1="0" y2="1">
+          <stop offset="0%" stopColor="rgb(59 130 246)" stopOpacity="0.25" />
+          <stop offset="100%" stopColor="rgb(59 130 246)" stopOpacity="0" />
+        </linearGradient>
+      </defs>
+      <path d={area} fill="url(#wa-fill)" />
+      <path
+        d={line}
+        fill="none"
+        stroke="rgb(59 130 246)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+      <circle cx={last.x} cy={last.y} fill="rgb(59 130 246)" r="3" />
+      <circle
+        cx={last.x}
+        cy={last.y}
+        fill="none"
+        r="6"
+        stroke="rgb(59 130 246)"
+        strokeOpacity="0.3"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+}
 
 export function WebAnalyticsIllustration() {
-  const [currentSourceIndex, setCurrentSourceIndex] = useState(0);
+  const [liveVisitors, setLiveVisitors] = useState(47);
 
   useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrentSourceIndex((prev) => (prev + 1) % TRAFFIC_SOURCES.length);
-    }, 3000);
-
-    return () => clearInterval(interval);
+    const values = [47, 51, 44, 53, 49, 56];
+    let i = 0;
+    const id = setInterval(() => {
+      i = (i + 1) % values.length;
+      setLiveVisitors(values[i]);
+    }, 2500);
+    return () => clearInterval(id);
   }, []);
 
   return (
-    <div className="px-12 group aspect-video">
-      <div className="relative h-full col">
-        <MetricCard
-          title="Session duration"
-          value="3m 23s"
-          change="3%"
-          chartPoints={[40, 10, 20, 43, 20, 40, 30, 37, 40, 34, 50, 31]}
-          color="var(--foreground)"
-          className="absolute w-full rotate-0 top-2 left-2 group-hover:-translate-y-1 group-hover:-rotate-2 transition-all duration-300"
-        />
-        <MetricCard
-          title="Bounce rate"
-          value="46%"
-          change="3%"
-          chartPoints={[10, 46, 20, 43, 20, 40, 30, 37, 40, 34, 50, 31]}
-          color="var(--foreground)"
-          className="absolute w-full -rotate-2 -left-2 top-12 group-hover:-translate-y-1 group-hover:rotate-0 transition-all duration-300"
-        />
-        <div className="col gap-4 w-[80%] md:w-[70%] ml-auto mt-auto">
-          <BarCell
-            {...TRAFFIC_SOURCES[currentSourceIndex]}
-            className="group-hover:scale-105 transition-all duration-300"
-          />
-          <BarCell
-            {...TRAFFIC_SOURCES[
-              (currentSourceIndex + 1) % TRAFFIC_SOURCES.length
-            ]}
-            className="group-hover:scale-105 transition-all duration-300"
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function MetricCard({
-  title,
-  value,
-  change,
-  chartPoints,
-  color,
-  className,
-}: {
-  title: string;
-  value: string;
-  change: string;
-  chartPoints: number[];
-  color: string;
-  className?: string;
-}) {
-  return (
-    <div className={cn('col bg-card rounded-lg p-4 pb-6 border', className)}>
-      <div className="row items-end justify-between">
-        <div>
-          <div className="text-muted-foreground text-sm">{title}</div>
-          <div className="text-2xl font-semibold font-mono">{value}</div>
-        </div>
-        <div className="row gap-2 items-center font-mono font-medium">
-          <ArrowUpIcon className="size-3" strokeWidth={3} />
-          <div>{change}</div>
-        </div>
-      </div>
-      <SimpleChart
-        width={400}
-        height={30}
-        points={chartPoints}
-        strokeColor={color}
-        className="mt-4"
-      />
-    </div>
-  );
-}
-
-function BarCell({
-  icon,
-  name,
-  percentage,
-  value,
-  className,
-}: {
-  icon: string;
-  name: string;
-  percentage: number;
-  value: number;
-  className?: string;
-}) {
-  return (
-    <div
-      className={cn(
-        'relative p-4 py-2 bg-card rounded-lg shadow-[0_10px_30px_rgba(0,0,0,0.3)] border',
-        className,
-      )}
-    >
-      <div
-        className="absolute bg-background bottom-0 top-0 left-0 rounded-lg transition-all duration-500"
-        style={{
-          width: `${percentage}%`,
-        }}
-      />
-      <div className="relative row justify-between ">
-        <div className="row gap-2 items-center font-medium text-sm">
-          {icon.startsWith('http') ? (
-            <Image
-              alt="serie icon"
-              className="max-h-4 rounded-[2px] object-contain"
-              src={icon}
-              width={16}
-              height={16}
-            />
-          ) : (
-            <div className="text-2xl">{icon}</div>
-          )}
-          <AnimatePresence mode="popLayout">
-            <motion.div
-              key={name}
-              initial={{ opacity: 0, y: -10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 10 }}
-              transition={{ duration: 0.3 }}
-            >
-              {name}
-            </motion.div>
-          </AnimatePresence>
-        </div>
-        <div className="row gap-3 font-mono text-sm">
-          <span className="text-muted-foreground">
-            <NumberFlow value={percentage} />%
+    <div className="aspect-video col gap-2.5 p-5">
+      {/* Header */}
+      <div className="row items-center justify-between">
+        <div className="row items-center gap-1.5">
+          <span className="relative flex h-1.5 w-1.5">
+            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
+            <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-emerald-500" />
+          </span>
+          <span className="text-[10px] font-medium text-muted-foreground">
+            <NumberFlow value={liveVisitors} /> online now
           </span>
-          <NumberFlow value={value} locales={'en-US'} />
         </div>
+        <span className="rounded bg-muted px-1.5 py-0.5 text-[9px] text-muted-foreground">
+          Last 7 days
+        </span>
+      </div>
+
+      {/* KPI tiles */}
+      <div className="grid grid-cols-4 gap-1.5">
+        {STATS.map((stat) => (
+          <div
+            className="col gap-0.5 rounded-lg border bg-card px-2 py-1.5"
+            key={stat.label}
+          >
+            <span className="text-[8px] text-muted-foreground">{stat.label}</span>
+            <span className="font-mono font-semibold text-xs leading-tight">
+              {stat.formatted ??
+                (stat.value !== null ? (
+                  <NumberFlow locales="en-US" value={stat.value} />
+                ) : null)}
+            </span>
+            <span
+              className={`text-[8px] ${stat.up ? 'text-emerald-500' : 'text-red-400'}`}
+            >
+              {stat.up ? '↑' : '↓'} {stat.change}%
+            </span>
+          </div>
+        ))}
+      </div>
+
+      {/* Area chart */}
+      <div className="flex-1 col gap-1 overflow-hidden rounded-xl border bg-card px-3 pt-2 pb-1">
+        <span className="text-[8px] text-muted-foreground">Unique visitors</span>
+        <AreaChart data={VISITOR_DATA} />
+        <div className="row justify-between px-0.5">
+          {DAYS.map((d) => (
+            <span className="text-[7px] text-muted-foreground" key={d}>
+              {d}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      {/* Traffic sources */}
+      <div className="row gap-1.5">
+        {SOURCES.map((src) => (
+          <div
+            className="row flex-1 items-center gap-1.5 overflow-hidden rounded-lg border bg-card px-2 py-1.5"
+            key={src.name}
+          >
+            <Image
+              alt={src.name}
+              className="rounded-[2px] object-contain"
+              height={10}
+              src={src.icon}
+              width={10}
+            />
+            <span className="flex-1 truncate text-[9px]">{src.name}</span>
+            <span className="font-mono text-[9px] text-muted-foreground">
+              {src.pct}%
+            </span>
+          </div>
+        ))}
       </div>
     </div>
   );

apps/public/src/components/perks.tsx

@@ -1,10 +1,13 @@
+import type React from 'react';
 import { cn } from '@/lib/utils';
 import type { LucideIcon } from 'lucide-react';
 
+type PerkIcon = LucideIcon | React.ComponentType<{ className?: string }>;
+
 export function Perks({
   perks,
   className,
-}: { perks: { text: string; icon: LucideIcon }[]; className?: string }) {
+}: { perks: { text: string; icon: PerkIcon }[]; className?: string }) {
   return (
     <ul className={cn('grid grid-cols-2 gap-2', className)}>
       {perks.map((perk) => (

apps/public/src/lib/layout.shared.tsx

@@ -26,11 +26,11 @@ export function baseOptions(): BaseLayoutProps {
 export const authors = [
   {
     name: 'OpenPanel Team',
-    url: 'https://openpanel.com',
+    url: 'https://openpanel.dev',
   },
   {
     name: 'Carl-Gerhard Lindesvärd',
-    url: 'https://openpanel.com',
+    url: 'https://openpanel.dev',
     image: '/twitter-carl.jpg',
   },
 ];

apps/start/src/components/chat/chat-report.tsx

@@ -1,24 +1,27 @@
-import { pushModal } from '@/modals';
 import type {
-  IReport,
   IChartRange,
   IChartType,
   IInterval,
+  IReport,
 } from '@openpanel/validation';
 import { SaveIcon } from 'lucide-react';
 import { useState } from 'react';
-import { ReportChart } from '../report-chart';
 import { ReportChartType } from '../report/ReportChartType';
 import { ReportInterval } from '../report/ReportInterval';
+import { ReportChart } from '../report-chart';
 import { TimeWindowPicker } from '../time-window-picker';
 import { Button } from '../ui/button';
+import { pushModal } from '@/modals';
 
 export function ChatReport({
   lazy,
   ...props
-}: { report: IReport & { startDate: string; endDate: string }; lazy: boolean }) {
+}: {
+  report: IReport & { startDate: string; endDate: string };
+  lazy: boolean;
+}) {
   const [chartType, setChartType] = useState<IChartType>(
-    props.report.chartType,
+    props.report.chartType
   );
   const [startDate, setStartDate] = useState<string>(props.report.startDate);
   const [endDate, setEndDate] = useState<string>(props.report.endDate);
@@ -35,47 +38,48 @@ export function ChatReport({
   };
   return (
     <div className="card">
-      <div className="text-center text-sm font-mono font-medium pt-4">
+      <div className="pt-4 text-center font-medium font-mono text-sm">
         {props.report.name}
       </div>
       <div className="p-4">
         <ReportChart lazy={lazy} report={report} />
       </div>
-      <div className="row justify-between gap-1 border-t border-border p-2">
+      <div className="row justify-between gap-1 border-border border-t p-2">
         <div className="col md:row gap-1">
           <TimeWindowPicker
             className="min-w-0"
-            onChange={setRange}
-            value={report.range}
-            onStartDateChange={setStartDate}
-            onEndDateChange={setEndDate}
             endDate={report.endDate}
+            onChange={setRange}
+            onEndDateChange={setEndDate}
+            onIntervalChange={setInterval}
+            onStartDateChange={setStartDate}
             startDate={report.startDate}
+            value={report.range}
           />
           <ReportInterval
+            chartType={chartType}
             className="min-w-0"
             interval={interval}
-            range={range}
-            chartType={chartType}
             onChange={setInterval}
+            range={range}
           />
           <ReportChartType
-            value={chartType}
             onChange={(type) => {
               setChartType(type);
             }}
+            value={chartType}
           />
         </div>
         <Button
           icon={SaveIcon}
-          variant="outline"
-          size="sm"
           onClick={() => {
             pushModal('SaveReport', {
               report,
               disableRedirect: true,
             });
           }}
+          size="sm"
+          variant="outline"
         >
           Save report
         </Button>

apps/start/src/components/events/event-list-item.tsx

@@ -1,25 +1,20 @@
+import type { IServiceEvent, IServiceEventMinimal } from '@openpanel/db';
+import { Link } from '@tanstack/react-router';
+import { SerieIcon } from '../report-chart/common/serie-icon';
+import { EventIcon } from './event-icon';
 import { Tooltiper } from '@/components/ui/tooltip';
 import { useAppParams } from '@/hooks/use-app-params';
-import { useNumber } from '@/hooks/use-numer-formatter';
 import { pushModal } from '@/modals';
 import { cn } from '@/utils/cn';
 import { getProfileName } from '@/utils/getters';
-import { Link } from '@tanstack/react-router';
-
-import type { IServiceEvent, IServiceEventMinimal } from '@openpanel/db';
-
-import { SerieIcon } from '../report-chart/common/serie-icon';
-import { EventIcon } from './event-icon';
 
 type EventListItemProps = IServiceEventMinimal | IServiceEvent;
 
 export function EventListItem(props: EventListItemProps) {
   const { organizationId, projectId } = useAppParams();
-  const { createdAt, name, path, duration, meta } = props;
+  const { createdAt, name, path, meta } = props;
   const profile = 'profile' in props ? props.profile : null;
 
-  const number = useNumber();
-
   const renderName = () => {
     if (name === 'screen_view') {
       if (path.includes('/')) {
@@ -32,83 +27,65 @@ export function EventListItem(props: EventListItemProps) {
     return name.replace(/_/g, ' ');
   };
 
-  const renderDuration = () => {
-    if (name === 'screen_view') {
-      return (
-        <span className="text-muted-foreground">
-          {number.shortWithUnit(duration / 1000, 'min')}
-        </span>
-      );
-    }
-
-    return null;
-  };
-
   const isMinimal = 'minimal' in props;
 
   return (
-    <>
-      <button
-        type="button"
-        onClick={() => {
-          if (!isMinimal) {
-            pushModal('EventDetails', {
-              id: props.id,
-              projectId,
-              createdAt,
-            });
-          }
-        }}
-        className={cn(
-          'card hover:bg-light-background flex w-full items-center justify-between rounded-lg p-4 transition-colors',
-          meta?.conversion &&
-            `bg-${meta.color}-50 dark:bg-${meta.color}-900 hover:bg-${meta.color}-100 dark:hover:bg-${meta.color}-700`,
-        )}
-      >
-        <div>
-          <div className="flex items-center gap-4 text-left ">
-            <EventIcon size="sm" name={name} meta={meta} />
-            <span>
-              <span className="font-medium">{renderName()}</span>
-              {'  '}
-              {renderDuration()}
-            </span>
-          </div>
-          <div className="pl-10">
-            <div className="flex origin-left scale-75 gap-1">
-              <SerieIcon name={props.country} />
-              <SerieIcon name={props.os} />
-              <SerieIcon name={props.browser} />
-            </div>
+    <button
+      className={cn(
+        'card flex w-full items-center justify-between rounded-lg p-4 transition-colors hover:bg-light-background',
+        meta?.conversion &&
+          `bg-${meta.color}-50 dark:bg-${meta.color}-900 hover:bg-${meta.color}-100 dark:hover:bg-${meta.color}-700`
+      )}
+      onClick={() => {
+        if (!isMinimal) {
+          pushModal('EventDetails', {
+            id: props.id,
+            projectId,
+            createdAt,
+          });
+        }
+      }}
+      type="button"
+    >
+      <div>
+        <div className="flex items-center gap-4 text-left">
+          <EventIcon meta={meta} name={name} size="sm" />
+          <span className="font-medium">{renderName()}</span>
+        </div>
+        <div className="pl-10">
+          <div className="flex origin-left scale-75 gap-1">
+            <SerieIcon name={props.country} />
+            <SerieIcon name={props.os} />
+            <SerieIcon name={props.browser} />
           </div>
         </div>
-        <div className="flex gap-4">
-          {profile && (
-            <Tooltiper asChild content={getProfileName(profile)}>
-              <Link
-                onClick={(e) => {
-                  e.stopPropagation();
-                }}
-                to={'/$organizationId/$projectId/profiles/$profileId'}
-                params={{
-                  organizationId,
-                  projectId,
-                  profileId: profile.id,
-                }}
-                className="max-w-[80px] overflow-hidden text-ellipsis whitespace-nowrap  text-muted-foreground hover:underline"
-              >
-                {getProfileName(profile)}
-              </Link>
-            </Tooltiper>
-          )}
-
-          <Tooltiper asChild content={createdAt.toLocaleString()}>
-            <div className=" text-muted-foreground">
-              {createdAt.toLocaleTimeString()}
-            </div>
+      </div>
+      <div className="flex gap-4">
+        {profile && (
+          <Tooltiper asChild content={getProfileName(profile)}>
+            <Link
+              className="max-w-[80px] overflow-hidden text-ellipsis whitespace-nowrap text-muted-foreground hover:underline"
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+              params={{
+                organizationId,
+                projectId,
+                profileId: profile.id,
+              }}
+              to={'/$organizationId/$projectId/profiles/$profileId'}
+            >
+              {getProfileName(profile)}
+            </Link>
           </Tooltiper>
-        </div>
-      </button>
-    </>
+        )}
+
+        <Tooltiper asChild content={createdAt.toLocaleString()}>
+          <div className="text-muted-foreground">
+            {createdAt.toLocaleTimeString()}
+          </div>
+        </Tooltiper>
+      </div>
+    </button>
   );
 }

apps/start/src/components/events/event-listener.tsx

@@ -1,3 +1,4 @@
+import { AnimatedNumber } from '../animated-number';
 import {
   Tooltip,
   TooltipContent,
@@ -8,71 +9,53 @@ import { useDebounceState } from '@/hooks/use-debounce-state';
 import useWS from '@/hooks/use-ws';
 import { cn } from '@/utils/cn';
 
-import type { IServiceEvent, IServiceEventMinimal } from '@openpanel/db';
-import { useParams } from '@tanstack/react-router';
-import { AnimatedNumber } from '../animated-number';
-
 export default function EventListener({
   onRefresh,
 }: {
   onRefresh: () => void;
 }) {
-  const params = useParams({
-    strict: false,
-  });
   const { projectId } = useAppParams();
   const counter = useDebounceState(0, 1000);
-  useWS<IServiceEventMinimal | IServiceEvent>(
+  useWS<{ count: number }>(
     `/live/events/${projectId}`,
-    (event) => {
-      if (event) {
-        const isProfilePage = !!params?.profileId;
-        if (isProfilePage) {
-          const profile = 'profile' in event ? event.profile : null;
-          if (profile?.id === params?.profileId) {
-            counter.set((prev) => prev + 1);
-          }
-          return;
-        }
-
-        counter.set((prev) => prev + 1);
-      }
+    ({ count }) => {
+      counter.set((prev) => prev + count);
     },
     {
       debounce: {
         delay: 1000,
         maxWait: 5000,
       },
-    },
+    }
   );
 
   return (
     <Tooltip>
       <TooltipTrigger asChild>
         <button
-          type="button"
+          className="flex h-8 items-center gap-2 rounded-md border border-border bg-card px-3 font-medium leading-none"
           onClick={() => {
             counter.set(0);
             onRefresh();
           }}
-          className="flex h-8 items-center gap-2 rounded-md border border-border bg-card px-3 font-medium leading-none"
+          type="button"
         >
           <div className="relative">
             <div
               className={cn(
-                'h-3 w-3 animate-ping rounded-full bg-emerald-500 opacity-100 transition-all',
+                'h-3 w-3 animate-ping rounded-full bg-emerald-500 opacity-100 transition-all'
               )}
             />
             <div
               className={cn(
-                'absolute left-0 top-0 h-3 w-3 rounded-full bg-emerald-500 transition-all',
+                'absolute top-0 left-0 h-3 w-3 rounded-full bg-emerald-500 transition-all'
               )}
             />
           </div>
           {counter.debounced === 0 ? (
             'Listening'
           ) : (
-            <AnimatedNumber value={counter.debounced} suffix=" new events" />
+            <AnimatedNumber suffix=" new events" value={counter.debounced} />
           )}
         </button>
       </TooltipTrigger>

apps/start/src/components/events/table/columns.tsx

@@ -1,15 +1,14 @@
+import type { IServiceEvent } from '@openpanel/db';
+import type { ColumnDef } from '@tanstack/react-table';
+import { ColumnCreatedAt } from '@/components/column-created-at';
 import { EventIcon } from '@/components/events/event-icon';
 import { ProjectLink } from '@/components/links';
+import { ProfileAvatar } from '@/components/profiles/profile-avatar';
 import { SerieIcon } from '@/components/report-chart/common/serie-icon';
+import { KeyValueGrid } from '@/components/ui/key-value-grid';
 import { useNumber } from '@/hooks/use-numer-formatter';
 import { pushModal } from '@/modals';
 import { getProfileName } from '@/utils/getters';
-import type { ColumnDef } from '@tanstack/react-table';
-
-import { ColumnCreatedAt } from '@/components/column-created-at';
-import { ProfileAvatar } from '@/components/profiles/profile-avatar';
-import { KeyValueGrid } from '@/components/ui/key-value-grid';
-import type { IServiceEvent } from '@openpanel/db';
 
 export function useColumns() {
   const number = useNumber();
@@ -28,17 +27,24 @@ export function useColumns() {
       accessorKey: 'name',
       header: 'Name',
       cell({ row }) {
-        const { name, path, duration, properties, revenue } = row.original;
+        const { name, path, revenue } = row.original;
+        const fullTitle =
+          name === 'screen_view'
+            ? path
+            : name === 'revenue' && revenue
+              ? `${name} (${number.currency(revenue / 100)})`
+              : name.replace(/_/g, ' ');
+
         const renderName = () => {
           if (name === 'screen_view') {
             if (path.includes('/')) {
-              return <span className="max-w-md truncate">{path}</span>;
+              return path;
             }
 
             return (
               <>
                 <span className="text-muted-foreground">Screen: </span>
-                <span className="max-w-md truncate">{path}</span>
+                {path}
               </>
             );
           }
@@ -50,38 +56,26 @@ export function useColumns() {
           return name.replace(/_/g, ' ');
         };
 
-        const renderDuration = () => {
-          if (name === 'screen_view') {
-            return (
-              <span className="text-muted-foreground">
-                {number.shortWithUnit(duration / 1000, 'min')}
-              </span>
-            );
-          }
-
-          return null;
-        };
-
         return (
-          <div className="flex items-center gap-2">
+          <div className="flex min-w-0 items-center gap-2">
             <button
-              type="button"
-              className="transition-transform hover:scale-105"
+              className="shrink-0 transition-transform hover:scale-105"
               onClick={() => {
                 pushModal('EditEvent', {
                   id: row.original.id,
                 });
               }}
+              type="button"
             >
               <EventIcon
-                size="sm"
-                name={row.original.name}
                 meta={row.original.meta}
+                name={row.original.name}
+                size="sm"
               />
             </button>
-            <span className="flex gap-2">
+            <span className="flex min-w-0 flex-1 gap-2">
               <button
-                type="button"
+                className="min-w-0 max-w-full truncate text-left font-medium hover:underline"
                 onClick={() => {
                   pushModal('EventDetails', {
                     id: row.original.id,
@@ -89,11 +83,11 @@ export function useColumns() {
                     projectId: row.original.projectId,
                   });
                 }}
-                className="font-medium hover:underline"
+                title={fullTitle}
+                type="button"
               >
-                {renderName()}
+                <span className="block truncate">{renderName()}</span>
               </button>
-              {renderDuration()}
             </span>
           </div>
         );
@@ -107,8 +101,8 @@ export function useColumns() {
         if (profile) {
           return (
             <ProjectLink
+              className="group row items-center gap-2 whitespace-nowrap font-medium hover:underline"
               href={`/profiles/${encodeURIComponent(profile.id)}`}
-              className="group whitespace-nowrap font-medium hover:underline row items-center gap-2"
             >
               <ProfileAvatar size="sm" {...profile} />
               {getProfileName(profile)}
@@ -119,8 +113,8 @@ export function useColumns() {
         if (profileId && profileId !== deviceId) {
           return (
             <ProjectLink
-              href={`/profiles/${encodeURIComponent(profileId)}`}
               className="whitespace-nowrap font-medium hover:underline"
+              href={`/profiles/${encodeURIComponent(profileId)}`}
             >
               Unknown
             </ProjectLink>
@@ -130,8 +124,8 @@ export function useColumns() {
         if (deviceId) {
           return (
             <ProjectLink
-              href={`/profiles/${encodeURIComponent(deviceId)}`}
               className="whitespace-nowrap font-medium hover:underline"
+              href={`/profiles/${encodeURIComponent(deviceId)}`}
             >
               Anonymous
             </ProjectLink>
@@ -152,10 +146,10 @@ export function useColumns() {
         const { sessionId } = row.original;
         return (
           <ProjectLink
-            href={`/sessions/${encodeURIComponent(sessionId)}`}
             className="whitespace-nowrap font-medium hover:underline"
+            href={`/sessions/${encodeURIComponent(sessionId)}`}
           >
-            {sessionId.slice(0,6)}
+            {sessionId.slice(0, 6)}
           </ProjectLink>
         );
       },
@@ -175,7 +169,7 @@ export function useColumns() {
       cell({ row }) {
         const { country, city } = row.original;
         return (
-          <div className="row items-center gap-2 min-w-0">
+          <div className="row min-w-0 items-center gap-2">
             <SerieIcon name={country} />
             <span className="truncate">{city}</span>
           </div>
@@ -189,7 +183,7 @@ export function useColumns() {
       cell({ row }) {
         const { os } = row.original;
         return (
-          <div className="row items-center gap-2 min-w-0">
+          <div className="row min-w-0 items-center gap-2">
             <SerieIcon name={os} />
             <span className="truncate">{os}</span>
           </div>
@@ -203,13 +197,39 @@ export function useColumns() {
       cell({ row }) {
         const { browser } = row.original;
         return (
-          <div className="row items-center gap-2 min-w-0">
+          <div className="row min-w-0 items-center gap-2">
             <SerieIcon name={browser} />
             <span className="truncate">{browser}</span>
           </div>
         );
       },
     },
+    {
+      accessorKey: 'groups',
+      header: 'Groups',
+      size: 200,
+      meta: {
+        hidden: true,
+      },
+      cell({ row }) {
+        const { groups } = row.original;
+        if (!groups?.length) {
+          return null;
+        }
+        return (
+          <div className="flex flex-wrap gap-1">
+            {groups.map((g) => (
+              <span
+                className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs"
+                key={g}
+              >
+                {g}
+              </span>
+            ))}
+          </div>
+        );
+      },
+    },
     {
       accessorKey: 'properties',
       header: 'Properties',
@@ -221,14 +241,14 @@ export function useColumns() {
         const { properties } = row.original;
         const filteredProperties = Object.fromEntries(
           Object.entries(properties || {}).filter(
-            ([key]) => !key.startsWith('__'),
-          ),
+            ([key]) => !key.startsWith('__')
+          )
         );
         const items = Object.entries(filteredProperties);
         const limit = 2;
         const data = items.slice(0, limit).map(([key, value]) => ({
           name: key,
-          value: value,
+          value,
         }));
         if (items.length > limit) {
           data.push({

apps/start/src/components/events/table/index.tsx

@@ -1,3 +1,17 @@
+import type { IServiceEvent } from '@openpanel/db';
+import type { UseInfiniteQueryResult } from '@tanstack/react-query';
+import type { Table } from '@tanstack/react-table';
+import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { useWindowVirtualizer } from '@tanstack/react-virtual';
+import type { TRPCInfiniteData } from '@trpc/tanstack-react-query';
+import { format } from 'date-fns';
+import { CalendarIcon, Loader2Icon } from 'lucide-react';
+import { parseAsIsoDateTime, useQueryState } from 'nuqs';
+import { last } from 'ramda';
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { useInViewport } from 'react-in-viewport';
+import EventListener from '../event-listener';
+import { useColumns } from './columns';
 import { FullPageEmptyState } from '@/components/full-page-empty-state';
 import {
   OverviewFilterButton,
@@ -12,20 +26,6 @@ import { useAppParams } from '@/hooks/use-app-params';
 import { pushModal } from '@/modals';
 import type { RouterInputs, RouterOutputs } from '@/trpc/client';
 import { cn } from '@/utils/cn';
-import type { IServiceEvent } from '@openpanel/db';
-import type { UseInfiniteQueryResult } from '@tanstack/react-query';
-import type { Table } from '@tanstack/react-table';
-import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
-import { useWindowVirtualizer } from '@tanstack/react-virtual';
-import type { TRPCInfiniteData } from '@trpc/tanstack-react-query';
-import { format } from 'date-fns';
-import { CalendarIcon, FilterIcon, Loader2Icon } from 'lucide-react';
-import { parseAsIsoDateTime, useQueryState } from 'nuqs';
-import { last } from 'ramda';
-import { memo, useEffect, useMemo, useRef } from 'react';
-import { useInViewport } from 'react-in-viewport';
-import EventListener from '../event-listener';
-import { useColumns } from './columns';
 
 type Props = {
   query: UseInfiniteQueryResult<
@@ -35,6 +35,7 @@ type Props = {
     >,
     unknown
   >;
+  showEventListener?: boolean;
 };
 
 const LOADING_DATA = [{}, {}, {}, {}, {}, {}, {}, {}, {}] as IServiceEvent[];
@@ -53,6 +54,7 @@ interface VirtualRowProps {
   scrollMargin: number;
   isLoading: boolean;
   headerColumnsHash: string;
+  onRowClick?: (row: any) => void;
 }
 
 const VirtualRow = memo(
@@ -62,12 +64,26 @@ const VirtualRow = memo(
     headerColumns,
     scrollMargin,
     isLoading,
+    onRowClick,
   }: VirtualRowProps) {
     return (
       <div
+        className={cn(
+          'group/row absolute top-0 left-0 w-full border-b transition-colors hover:bg-muted/50',
+          onRowClick && 'cursor-pointer'
+        )}
         data-index={virtualRow.index}
+        onClick={
+          onRowClick
+            ? (e) => {
+                if ((e.target as HTMLElement).closest('a, button')) {
+                  return;
+                }
+                onRowClick(row);
+              }
+            : undefined
+        }
         ref={virtualRow.measureElement}
-        className="absolute top-0 left-0 w-full border-b hover:bg-muted/50 transition-colors group/row"
         style={{
           transform: `translateY(${virtualRow.start - scrollMargin}px)`,
           display: 'grid',
@@ -82,8 +98,8 @@ const VirtualRow = memo(
           const width = `${cell.column.getSize()}px`;
           return (
             <div
+              className="flex items-center whitespace-nowrap p-2 px-4 align-middle"
               key={cell.id}
-              className="flex items-center p-2 px-4 align-middle whitespace-nowrap"
               style={{
                 width,
                 overflow: 'hidden',
@@ -113,16 +129,18 @@ const VirtualRow = memo(
       prevProps.virtualRow.start === nextProps.virtualRow.start &&
       prevProps.virtualRow.size === nextProps.virtualRow.size &&
       prevProps.isLoading === nextProps.isLoading &&
-      prevProps.headerColumnsHash === nextProps.headerColumnsHash
+      prevProps.headerColumnsHash === nextProps.headerColumnsHash &&
+      prevProps.onRowClick === nextProps.onRowClick
     );
-  },
+  }
 );
 
 const VirtualizedEventsTable = ({
   table,
   data,
   isLoading,
-}: VirtualizedEventsTableProps) => {
+  onRowClick,
+}: VirtualizedEventsTableProps & { onRowClick?: (row: any) => void }) => {
   const parentRef = useRef<HTMLDivElement>(null);
 
   const headerColumns = table.getAllLeafColumns().filter((col) => {
@@ -144,12 +162,12 @@ const VirtualizedEventsTable = ({
   const headerColumnsHash = headerColumns.map((col) => col.id).join(',');
   return (
     <div
+      className="w-full overflow-x-auto rounded-md border bg-card"
       ref={parentRef}
-      className="w-full overflow-x-auto border rounded-md bg-card"
     >
       {/* Table Header */}
       <div
-        className="sticky top-0 z-10 bg-card border-b"
+        className="sticky top-0 z-10 border-b bg-card"
         style={{
           display: 'grid',
           gridTemplateColumns: headerColumns
@@ -163,8 +181,8 @@ const VirtualizedEventsTable = ({
           const width = `${column.getSize()}px`;
           return (
             <div
+              className="flex h-10 items-center whitespace-nowrap px-4 text-left font-semibold text-[10px] text-foreground uppercase"
               key={column.id}
-              className="flex items-center h-10 px-4 text-left text-[10px] uppercase text-foreground font-semibold whitespace-nowrap"
               style={{
                 width,
               }}
@@ -177,8 +195,8 @@ const VirtualizedEventsTable = ({
 
       {!isLoading && data.length === 0 && (
         <FullPageEmptyState
-          title="No events"
           description={"Start sending events and you'll see them here"}
+          title="No events"
         />
       )}
 
@@ -193,20 +211,23 @@ const VirtualizedEventsTable = ({
       >
         {virtualRows.map((virtualRow) => {
           const row = table.getRowModel().rows[virtualRow.index];
-          if (!row) return null;
+          if (!row) {
+            return null;
+          }
 
           return (
             <VirtualRow
+              headerColumns={headerColumns}
+              headerColumnsHash={headerColumnsHash}
+              isLoading={isLoading}
               key={row.id}
+              onRowClick={onRowClick}
               row={row}
+              scrollMargin={rowVirtualizer.options.scrollMargin}
               virtualRow={{
                 ...virtualRow,
                 measureElement: rowVirtualizer.measureElement,
               }}
-              headerColumns={headerColumns}
-              headerColumnsHash={headerColumnsHash}
-              scrollMargin={rowVirtualizer.options.scrollMargin}
-              isLoading={isLoading}
             />
           );
         })}
@@ -215,10 +236,18 @@ const VirtualizedEventsTable = ({
   );
 };
 
-export const EventsTable = ({ query }: Props) => {
+export const EventsTable = ({ query, showEventListener = false }: Props) => {
   const { isLoading } = query;
   const columns = useColumns();
 
+  const handleRowClick = useCallback((row: any) => {
+    pushModal('EventDetails', {
+      id: row.original.id,
+      createdAt: row.original.createdAt,
+      projectId: row.original.projectId,
+    });
+  }, []);
+
   const data = useMemo(() => {
     if (isLoading) {
       return LOADING_DATA;
@@ -272,13 +301,22 @@ export const EventsTable = ({ query }: Props) => {
 
   return (
     <>
-      <EventsTableToolbar query={query} table={table} />
-      <VirtualizedEventsTable table={table} data={data} isLoading={isLoading} />
-      <div className="w-full h-10 center-center pt-4" ref={inViewportRef}>
+      <EventsTableToolbar
+        query={query}
+        showEventListener={showEventListener}
+        table={table}
+      />
+      <VirtualizedEventsTable
+        data={data}
+        isLoading={isLoading}
+        onRowClick={handleRowClick}
+        table={table}
+      />
+      <div className="center-center h-10 w-full pt-4" ref={inViewportRef}>
         <div
           className={cn(
-            'size-8 bg-background rounded-full center-center border opacity-0 transition-opacity',
-            query.isFetchingNextPage && 'opacity-100',
+            'center-center size-8 rounded-full border bg-background opacity-0 transition-opacity',
+            query.isFetchingNextPage && 'opacity-100'
           )}
         >
           <Loader2Icon className="size-4 animate-spin" />
@@ -291,24 +329,26 @@ export const EventsTable = ({ query }: Props) => {
 function EventsTableToolbar({
   query,
   table,
+  showEventListener,
 }: {
   query: Props['query'];
   table: Table<IServiceEvent>;
+  showEventListener: boolean;
 }) {
   const { projectId } = useAppParams();
   const [startDate, setStartDate] = useQueryState(
     'startDate',
-    parseAsIsoDateTime,
+    parseAsIsoDateTime
   );
   const [endDate, setEndDate] = useQueryState('endDate', parseAsIsoDateTime);
 
   return (
     <DataTableToolbarContainer>
       <div className="flex flex-1 flex-wrap items-center gap-2">
-        <EventListener onRefresh={() => query.refetch()} />
+        {showEventListener && (
+          <EventListener onRefresh={() => query.refetch()} />
+        )}
         <Button
-          variant="outline"
-          size="sm"
           icon={CalendarIcon}
           onClick={() => {
             pushModal('DateRangerPicker', {
@@ -320,6 +360,8 @@ function EventsTableToolbar({
               endDate: endDate || undefined,
             });
           }}
+          size="sm"
+          variant="outline"
         >
           {startDate && endDate
             ? `${format(startDate, 'MMM d')} - ${format(endDate, 'MMM d')}`

apps/start/src/components/groups/group-member-growth.tsx

@@ -0,0 +1,130 @@
+import { TrendingUpIcon } from 'lucide-react';
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Tooltip as RechartTooltip,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { WidgetHead, WidgetTitle } from '../overview/overview-widget';
+import {
+  useXAxisProps,
+  useYAxisProps,
+} from '@/components/report-chart/common/axis';
+import { Widget, WidgetBody } from '@/components/widget';
+import { useFormatDateInterval } from '@/hooks/use-format-date-interval';
+import { useNumber } from '@/hooks/use-numer-formatter';
+import { getChartColor } from '@/utils/theme';
+
+type Props = {
+  data: { date: string; count: number }[];
+};
+
+function Tooltip(props: any) {
+  const number = useNumber();
+  const formatDate = useFormatDateInterval({ interval: 'day', short: false });
+  const payload = props.payload?.[0]?.payload;
+
+  if (!payload) {
+    return null;
+  }
+
+  return (
+    <div className="flex min-w-[160px] flex-col gap-2 rounded-xl border bg-card p-3 shadow-xl">
+      <div className="text-muted-foreground text-sm">
+        {formatDate(new Date(payload.timestamp))}
+      </div>
+      <div className="flex items-center gap-2">
+        <div
+          className="h-10 w-1 rounded-full"
+          style={{ background: getChartColor(0) }}
+        />
+        <div className="col gap-1">
+          <div className="text-muted-foreground text-sm">Total members</div>
+          <div
+            className="font-semibold text-lg"
+            style={{ color: getChartColor(0) }}
+          >
+            {number.format(payload.cumulative)}
+          </div>
+        </div>
+      </div>
+      {payload.count > 0 && (
+        <div className="text-muted-foreground text-xs">
+          +{number.format(payload.count)} new
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function GroupMemberGrowth({ data }: Props) {
+  const xAxisProps = useXAxisProps({ interval: 'day' });
+  const yAxisProps = useYAxisProps({});
+  const color = getChartColor(0);
+
+  let cumulative = 0;
+  const chartData = data.map((item) => {
+    cumulative += item.count;
+    return {
+      date: item.date,
+      timestamp: new Date(item.date).getTime(),
+      count: item.count,
+      cumulative,
+    };
+  });
+
+  const gradientId = 'memberGrowthGradient';
+
+  return (
+    <Widget className="w-full">
+      <WidgetHead>
+        <WidgetTitle icon={TrendingUpIcon}>New members last 30 days</WidgetTitle>
+      </WidgetHead>
+      <WidgetBody>
+        {data.length === 0 ? (
+          <p className="py-4 text-center text-muted-foreground text-sm">
+            No data yet
+          </p>
+        ) : (
+          <div className="h-[200px] w-full">
+            <ResponsiveContainer>
+              <AreaChart data={chartData}>
+                <defs>
+                  <linearGradient id={gradientId} x1="0" x2="0" y1="0" y2="1">
+                    <stop offset="5%" stopColor={color} stopOpacity={0.3} />
+                    <stop offset="95%" stopColor={color} stopOpacity={0.02} />
+                  </linearGradient>
+                </defs>
+                <RechartTooltip
+                  content={<Tooltip />}
+                  cursor={{ stroke: color, strokeOpacity: 0.3 }}
+                />
+                <Area
+                  dataKey="cumulative"
+                  dot={false}
+                  fill={`url(#${gradientId})`}
+                  isAnimationActive={false}
+                  stroke={color}
+                  strokeWidth={2}
+                  type="monotone"
+                />
+                <XAxis {...xAxisProps} />
+                <YAxis {...yAxisProps} />
+                <CartesianGrid
+                  className="stroke-border"
+                  horizontal={true}
+                  strokeDasharray="3 3"
+                  strokeOpacity={0.5}
+                  vertical={false}
+                />
+              </AreaChart>
+            </ResponsiveContainer>
+          </div>
+        )}
+      </WidgetBody>
+    </Widget>
+  );
+}

apps/start/src/components/groups/table/columns.tsx

@@ -0,0 +1,76 @@
+import { useAppParams } from '@/hooks/use-app-params';
+import { ColumnCreatedAt } from '@/components/column-created-at';
+import { Badge } from '@/components/ui/badge';
+import { Link } from '@tanstack/react-router';
+import type { ColumnDef } from '@tanstack/react-table';
+import type { IServiceGroup } from '@openpanel/db';
+
+export type IServiceGroupWithStats = IServiceGroup & {
+  memberCount: number;
+  lastActiveAt: Date | null;
+};
+
+export function useGroupColumns(): ColumnDef<IServiceGroupWithStats>[] {
+  const { organizationId, projectId } = useAppParams();
+
+  return [
+    {
+      accessorKey: 'name',
+      header: 'Name',
+      cell: ({ row }) => {
+        const group = row.original;
+        return (
+          <Link
+            className="font-medium hover:underline"
+            params={{ organizationId, projectId, groupId: group.id }}
+            to="/$organizationId/$projectId/groups/$groupId"
+          >
+            {group.name}
+          </Link>
+        );
+      },
+    },
+    {
+      accessorKey: 'id',
+      header: 'ID',
+      cell: ({ row }) => (
+        <span className="font-mono text-muted-foreground text-xs">
+          {row.original.id}
+        </span>
+      ),
+    },
+    {
+      accessorKey: 'type',
+      header: 'Type',
+      cell: ({ row }) => (
+        <Badge variant="outline">{row.original.type}</Badge>
+      ),
+    },
+    {
+      accessorKey: 'memberCount',
+      header: 'Members',
+      cell: ({ row }) => (
+        <span className="tabular-nums">{row.original.memberCount}</span>
+      ),
+    },
+    {
+      accessorKey: 'lastActiveAt',
+      header: 'Last active',
+      size: ColumnCreatedAt.size,
+      cell: ({ row }) =>
+        row.original.lastActiveAt ? (
+          <ColumnCreatedAt>{row.original.lastActiveAt}</ColumnCreatedAt>
+        ) : (
+          <span className="text-muted-foreground">—</span>
+        ),
+    },
+    {
+      accessorKey: 'createdAt',
+      header: 'Created',
+      size: ColumnCreatedAt.size,
+      cell: ({ row }) => (
+        <ColumnCreatedAt>{row.original.createdAt}</ColumnCreatedAt>
+      ),
+    },
+  ];
+}

apps/start/src/components/groups/table/index.tsx

@@ -0,0 +1,114 @@
+import type { IServiceGroup } from '@openpanel/db';
+import type { UseQueryResult } from '@tanstack/react-query';
+import type { PaginationState, Table, Updater } from '@tanstack/react-table';
+import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { memo } from 'react';
+import { type IServiceGroupWithStats, useGroupColumns } from './columns';
+import { DataTable } from '@/components/ui/data-table/data-table';
+import {
+  useDataTableColumnVisibility,
+  useDataTablePagination,
+} from '@/components/ui/data-table/data-table-hooks';
+import {
+  AnimatedSearchInput,
+  DataTableToolbarContainer,
+} from '@/components/ui/data-table/data-table-toolbar';
+import { DataTableViewOptions } from '@/components/ui/data-table/data-table-view-options';
+import { useSearchQueryState } from '@/hooks/use-search-query-state';
+import type { RouterOutputs } from '@/trpc/client';
+import { arePropsEqual } from '@/utils/are-props-equal';
+
+const PAGE_SIZE = 50;
+
+interface Props {
+  query: UseQueryResult<RouterOutputs['group']['list'], unknown>;
+  pageSize?: number;
+  toolbarLeft?: React.ReactNode;
+}
+
+const LOADING_DATA = [{}, {}, {}, {}, {}, {}, {}, {}, {}] as IServiceGroupWithStats[];
+
+export const GroupsTable = memo(
+  ({ query, pageSize = PAGE_SIZE, toolbarLeft }: Props) => {
+    const { data, isLoading } = query;
+    const columns = useGroupColumns();
+
+    const { setPage, state: pagination } = useDataTablePagination(pageSize);
+    const {
+      columnVisibility,
+      setColumnVisibility,
+      columnOrder,
+      setColumnOrder,
+    } = useDataTableColumnVisibility(columns, 'groups');
+
+    const table = useReactTable({
+      data: isLoading ? LOADING_DATA : (data?.data ?? []),
+      getCoreRowModel: getCoreRowModel(),
+      manualPagination: true,
+      manualFiltering: true,
+      manualSorting: true,
+      columns,
+      rowCount: data?.meta.count,
+      pageCount: Math.ceil(
+        (data?.meta.count || 0) / (pagination.pageSize || 1)
+      ),
+      filterFns: {
+        isWithinRange: () => true,
+      },
+      state: {
+        pagination,
+        columnVisibility,
+        columnOrder,
+      },
+      onColumnVisibilityChange: setColumnVisibility,
+      onColumnOrderChange: setColumnOrder,
+      onPaginationChange: (updaterOrValue: Updater<PaginationState>) => {
+        const nextPagination =
+          typeof updaterOrValue === 'function'
+            ? updaterOrValue(pagination)
+            : updaterOrValue;
+        setPage(nextPagination.pageIndex + 1);
+      },
+      getRowId: (row, index) => row.id ?? `loading-${index}`,
+    });
+
+    return (
+      <>
+        <GroupsTableToolbar table={table} toolbarLeft={toolbarLeft} />
+        <DataTable
+          empty={{
+            title: 'No groups found',
+            description:
+              'Groups represent companies, teams, or other entities that events belong to.',
+          }}
+          loading={isLoading}
+          table={table}
+        />
+      </>
+    );
+  },
+  arePropsEqual(['query.isLoading', 'query.data', 'pageSize', 'toolbarLeft'])
+);
+
+function GroupsTableToolbar({
+  table,
+  toolbarLeft,
+}: {
+  table: Table<IServiceGroupWithStats>;
+  toolbarLeft?: React.ReactNode;
+}) {
+  const { search, setSearch } = useSearchQueryState();
+  return (
+    <DataTableToolbarContainer>
+      <div className="flex flex-wrap items-center gap-2">
+        {toolbarLeft}
+        <AnimatedSearchInput
+          onChange={setSearch}
+          placeholder="Search groups..."
+          value={search}
+        />
+      </div>
+      <DataTableViewOptions table={table} />
+    </DataTableToolbarContainer>
+  );
+}

apps/start/src/components/onboarding/onboarding-verify-listener.tsx

@@ -1,31 +1,13 @@
-import type {
-  IServiceClient,
-  IServiceEvent,
-  IServiceProject,
-} from '@openpanel/db';
+import type { IServiceEvent } from '@openpanel/db';
 import { CheckCircle2Icon, CheckIcon, Loader2 } from 'lucide-react';
-import { useState } from 'react';
-import useWS from '@/hooks/use-ws';
 import { cn } from '@/utils/cn';
 import { timeAgo } from '@/utils/date';
 
 interface Props {
-  project: IServiceProject;
-  client: IServiceClient | null;
   events: IServiceEvent[];
-  onVerified: (verified: boolean) => void;
 }
 
-const VerifyListener = ({ client, events: _events, onVerified }: Props) => {
-  const [events, setEvents] = useState<IServiceEvent[]>(_events ?? []);
-  useWS<IServiceEvent>(
-    `/live/events/${client?.projectId}?type=received`,
-    (data) => {
-      setEvents((prev) => [...prev, data]);
-      onVerified(true);
-    }
-  );
-
+const VerifyListener = ({ events }: Props) => {
   const isConnected = events.length > 0;
 
   const renderIcon = () => {
@@ -49,16 +31,18 @@ const VerifyListener = ({ client, events: _events, onVerified }: Props) => {
       <div
         className={cn(
           'flex gap-6 rounded-xl p-4 md:p-6',
-          isConnected ? 'bg-emerald-100 dark:bg-emerald-700' : 'bg-blue-500/10'
+          isConnected
+            ? 'bg-emerald-100 dark:bg-emerald-700/10'
+            : 'bg-blue-500/10'
         )}
       >
         {renderIcon()}
         <div className="flex-1">
           <div className="font-semibold text-foreground/90 text-lg leading-normal">
-            {isConnected ? 'Success' : 'Waiting for events'}
+            {isConnected ? 'Successfully connected' : 'Waiting for events'}
           </div>
           {isConnected ? (
-            <div className="flex flex-col-reverse">
+            <div className="mt-2 flex flex-col-reverse gap-1">
               {events.length > 5 && (
                 <div className="flex items-center gap-2">
                   <CheckIcon size={14} />{' '}
@@ -69,7 +53,7 @@ const VerifyListener = ({ client, events: _events, onVerified }: Props) => {
                 <div className="flex items-center gap-2" key={event.id}>
                   <CheckIcon size={14} />{' '}
                   <span className="font-medium">{event.name}</span>{' '}
-                  <span className="ml-auto text-emerald-800">
+                  <span className="ml-auto text-foreground/50 text-sm">
                     {timeAgo(event.createdAt, 'round')}
                   </span>
                 </div>

apps/start/src/components/organization/billing-faq.tsx

@@ -34,13 +34,13 @@ const questions = [
   {
     question: 'How do I change my billing information?',
     answer: [
-      'You can change your billing information by clicking the "Manage your subscription" button in the billing section.',
+      'You can change your billing information by clicking the "Customer portal" button in the billing section.',
     ],
   },
   {
     question: 'We need a custom plan, can you help us?',
     answer: [
-      'Yes, we can help you with that. Please contact us at hello@openpanel.com to request a quote.',
+      'Yes, we can help you with that. Please contact us at hello@openpanel.dev to request a quote.',
     ],
   },
 ];
@@ -52,13 +52,13 @@ export function BillingFaq() {
         <span className="title">Frequently asked questions</span>
       </WidgetHead>
       <Accordion
-        type="single"
-        collapsible
         className="w-full max-w-screen-md self-center"
+        collapsible
+        type="single"
       >
         {questions.map((q) => (
-          <AccordionItem value={q.question} key={q.question}>
-            <AccordionTrigger className="text-left px-4">
+          <AccordionItem key={q.question} value={q.question}>
+            <AccordionTrigger className="px-4 text-left">
               {q.question}
             </AccordionTrigger>
             <AccordionContent>

apps/start/src/components/organization/billing-prompt.tsx

@@ -1,8 +1,3 @@
-import { PageHeader } from '@/components/page-header';
-import { Button, LinkButton } from '@/components/ui/button';
-import { useNumber } from '@/hooks/use-numer-formatter';
-import { useTRPC } from '@/integrations/trpc/react';
-import { op } from '@/utils/op';
 import type { IServiceOrganization } from '@openpanel/db';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import {
@@ -11,11 +6,17 @@ import {
   InfinityIcon,
   type LucideIcon,
   MapIcon,
+  SearchIcon,
   ShieldCheckIcon,
   TrendingUpIcon,
 } from 'lucide-react';
 import { useEffect } from 'react';
 import { toast } from 'sonner';
+import { PageHeader } from '@/components/page-header';
+import { Button, LinkButton } from '@/components/ui/button';
+import { useNumber } from '@/hooks/use-numer-formatter';
+import { useTRPC } from '@/integrations/trpc/react';
+import { op } from '@/utils/op';
 
 const COPY = {
   expired: {
@@ -59,7 +60,7 @@ export default function BillingPrompt({
   const { data: products, isLoading: isLoadingProducts } = useQuery(
     trpc.subscription.products.queryOptions({
       organizationId: organization.id,
-    }),
+    })
   );
   const checkout = useMutation(
     trpc.subscription.checkout.mutationOptions({
@@ -72,15 +73,14 @@ export default function BillingPrompt({
           });
         }
       },
-    }),
+    })
   );
   const { title, description, body } = COPY[type];
 
   const bestProductFit = products?.find(
     (product) =>
       typeof product.metadata.eventsLimit === 'number' &&
-      product.metadata.eventsLimit >=
-        organization.subscriptionPeriodEventsCount,
+      product.metadata.eventsLimit >= organization.subscriptionPeriodEventsCount
   );
 
   useEffect(() => {
@@ -98,32 +98,30 @@ export default function BillingPrompt({
       }).format(
         bestProductFit.prices[0] && 'priceAmount' in bestProductFit.prices[0]
           ? bestProductFit.prices[0].priceAmount / 100
-          : 0,
+          : 0
       )
     : null;
 
   return (
-    <div className="p-4 md:p-20 max-w-7xl mx-auto">
-      <div className="border rounded-lg overflow-hidden bg-def-200 p-2 items-center">
+    <div className="mx-auto max-w-7xl p-4 md:p-20">
+      <div className="items-center overflow-hidden rounded-lg border bg-def-200 p-2">
         <div className="md:row">
-          <div className="p-6 bg-background rounded-md border col gap-4 flex-1">
-            <PageHeader title={title} description={description} />
+          <div className="col flex-1 gap-4 rounded-md border bg-background p-6">
+            <PageHeader description={description} title={title} />
             {body.map((paragraph) => (
               <p key={paragraph}>
                 {paragraph.replace(
                   '{{events}}',
-                  number.format(
-                    organization.subscriptionPeriodEventsCount ?? 0,
-                  ),
+                  number.format(organization.subscriptionPeriodEventsCount ?? 0)
                 )}
               </p>
             ))}
-            <div className="col gap-2 mt-auto">
+            <div className="col mt-auto gap-2">
               {bestProductFit && (
-                <div className="text-sm text-muted-foreground leading-normal">
+                <div className="text-muted-foreground text-sm leading-normal">
                   Based on your usage (
                   {number.format(
-                    organization.subscriptionPeriodEventsCount ?? 0,
+                    organization.subscriptionPeriodEventsCount ?? 0
                   )}{' '}
                   events) we recommend upgrading <br />
                   to the <strong>{bestProductFit.name}</strong> plan for{' '}
@@ -132,9 +130,8 @@ export default function BillingPrompt({
               )}
               <div className="col md:row gap-2">
                 <Button
-                  size="lg"
-                  loading={isLoadingProducts}
                   disabled={!bestProductFit}
+                  loading={isLoadingProducts}
                   onClick={() => {
                     if (bestProductFit) {
                       op.track('billing_prompt_upgrade_clicked', {
@@ -152,33 +149,34 @@ export default function BillingPrompt({
                       });
                     }
                   }}
+                  size="lg"
                 >
                   Upgrade to {price}
                 </Button>
                 <LinkButton
-                  size="lg"
-                  variant="outline"
-                  to="/$organizationId/billing"
                   params={{ organizationId: organization.id }}
+                  size="lg"
+                  to="/$organizationId/billing"
+                  variant="outline"
                 >
                   View pricing
                 </LinkButton>
               </div>
             </div>
           </div>
-          <div className="shrink-0 flex-1 p-6 gap-4 col min-w-[200px] max-w-[300px]">
+          <div className="col min-w-[200px] max-w-[300px] flex-1 shrink-0 gap-4 p-6">
             <Point icon={DollarSignIcon}>Plans start at just $2.5/month</Point>
             <Point icon={InfinityIcon}>
               Unlimited reports, members and projects
             </Point>
             <Point icon={BarChart3Icon}>Advanced funnels and conversions</Point>
             <Point icon={MapIcon}>Real-time analytics</Point>
-            <Point icon={TrendingUpIcon}>
-              Track KPIs and custom events (revenue soon)
-            </Point>
+            <Point icon={TrendingUpIcon}>Track KPIs and custom events</Point>
             <Point icon={ShieldCheckIcon}>
               Privacy-focused and GDPR compliant
             </Point>
+            <Point icon={DollarSignIcon}>Revenue tracking</Point>
+            <Point icon={SearchIcon}>Google Search Console integration</Point>
           </div>
         </div>
       </div>
@@ -189,13 +187,16 @@ export default function BillingPrompt({
 function Point({
   icon: Icon,
   children,
-}: { icon: LucideIcon; children: React.ReactNode }) {
+}: {
+  icon: LucideIcon;
+  children: React.ReactNode;
+}) {
   return (
     <div className="row gap-2">
-      <div className="size-6 shrink-0 center-center rounded-full bg-amber-500 text-white">
+      <div className="center-center size-6 shrink-0 rounded-full bg-amber-500 text-white">
         <Icon className="size-4" />
       </div>
-      <h3 className="font-medium mt-[1.5px]">{children}</h3>
+      <h3 className="mt-[1.5px] font-medium">{children}</h3>
     </div>
   );
 }

apps/start/src/components/organization/billing-usage.tsx

@@ -242,6 +242,7 @@ export default function BillingUsage({ organization }: Props) {
               <XAxis {...xAxisProps} dataKey="date" />
               <YAxis {...yAxisProps} domain={[0, 'dataMax']} />
               <CartesianGrid
+                className="stroke-border"
                 horizontal={true}
                 strokeDasharray="3 3"
                 strokeOpacity={0.5}

apps/start/src/components/overview/live-counter.tsx

@@ -1,61 +1,25 @@
-import { TooltipComplete } from '@/components/tooltip-complete';
-import { useDebounceState } from '@/hooks/use-debounce-state';
-import useWS from '@/hooks/use-ws';
-import { useTRPC } from '@/integrations/trpc/react';
-import { cn } from '@/utils/cn';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { useEffect, useRef } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCallback } from 'react';
 import { toast } from 'sonner';
 import { AnimatedNumber } from '../animated-number';
+import { TooltipComplete } from '@/components/tooltip-complete';
+import { useLiveCounter } from '@/hooks/use-live-counter';
+import { cn } from '@/utils/cn';
 
 export interface LiveCounterProps {
   projectId: string;
   shareId?: string;
 }
 
-const FIFTEEN_SECONDS = 1000 * 30;
-
 export function LiveCounter({ projectId, shareId }: LiveCounterProps) {
-  const trpc = useTRPC();
   const client = useQueryClient();
-  const counter = useDebounceState(0, 1000);
-  const lastRefresh = useRef(Date.now());
-  const query = useQuery(
-    trpc.overview.liveVisitors.queryOptions({
-      projectId,
-      shareId,
-    }),
-  );
-
-  useEffect(() => {
-    if (query.data) {
-      counter.set(query.data);
-    }
-  }, [query.data]);
-
-  useWS<number>(
-    `/live/visitors/${projectId}`,
-    (value) => {
-      if (!Number.isNaN(value)) {
-        counter.set(value);
-        if (Date.now() - lastRefresh.current > FIFTEEN_SECONDS) {
-          lastRefresh.current = Date.now();
-          if (!document.hidden) {
-            toast('Refreshed data');
-            client.refetchQueries({
-              type: 'active',
-            });
-          }
-        }
-      }
-    },
-    {
-      debounce: {
-        delay: 1000,
-        maxWait: 5000,
-      },
-    },
-  );
+  const onRefresh = useCallback(() => {
+    toast('Refreshed data');
+    client.refetchQueries({
+      type: 'active',
+    });
+  }, [client]);
+  const counter = useLiveCounter({ projectId, shareId, onRefresh });
 
   return (
     <TooltipComplete
@@ -66,13 +30,13 @@ export function LiveCounter({ projectId, shareId }: LiveCounterProps) {
           <div
             className={cn(
               'h-3 w-3 animate-ping rounded-full bg-emerald-500 opacity-100 transition-all',
-              counter.debounced === 0 && 'bg-destructive opacity-0',
+              counter.debounced === 0 && 'bg-destructive opacity-0'
             )}
           />
           <div
             className={cn(
-              'absolute left-0 top-0 h-3 w-3 rounded-full bg-emerald-500 transition-all',
-              counter.debounced === 0 && 'bg-destructive',
+              'absolute top-0 left-0 h-3 w-3 rounded-full bg-emerald-500 transition-all',
+              counter.debounced === 0 && 'bg-destructive'
             )}
           />
         </div>

apps/start/src/components/overview/overview-range.tsx

@@ -2,17 +2,25 @@ import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
 import { TimeWindowPicker } from '@/components/time-window-picker';
 
 export function OverviewRange() {
-  const { range, setRange, setStartDate, setEndDate, endDate, startDate } =
-    useOverviewOptions();
+  const {
+    range,
+    setRange,
+    setStartDate,
+    setEndDate,
+    endDate,
+    startDate,
+    setInterval,
+  } = useOverviewOptions();
 
   return (
     <TimeWindowPicker
-      onChange={setRange}
-      value={range}
-      onStartDateChange={setStartDate}
-      onEndDateChange={setEndDate}
       endDate={endDate}
+      onChange={setRange}
+      onEndDateChange={setEndDate}
+      onIntervalChange={setInterval}
+      onStartDateChange={setStartDate}
       startDate={startDate}
+      value={range}
     />
   );
 }

apps/start/src/components/page/gsc-breakdown-table.tsx

@@ -0,0 +1,143 @@
+import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
+import { OverviewWidgetTable } from '@/components/overview/overview-widget-table';
+import { Skeleton } from '@/components/skeleton';
+import { useTRPC } from '@/integrations/trpc/react';
+import { useQuery } from '@tanstack/react-query';
+
+interface GscBreakdownTableProps {
+  projectId: string;
+  value: string;
+  type: 'page' | 'query';
+}
+
+export function GscBreakdownTable({ projectId, value, type }: GscBreakdownTableProps) {
+  const { range, startDate, endDate } = useOverviewOptions();
+  const trpc = useTRPC();
+
+  const dateInput = {
+    range,
+    startDate: startDate ?? undefined,
+    endDate: endDate ?? undefined,
+  };
+
+  const pageQuery = useQuery(
+    trpc.gsc.getPageDetails.queryOptions(
+      { projectId, page: value, ...dateInput },
+      { enabled: type === 'page' },
+    ),
+  );
+
+  const queryQuery = useQuery(
+    trpc.gsc.getQueryDetails.queryOptions(
+      { projectId, query: value, ...dateInput },
+      { enabled: type === 'query' },
+    ),
+  );
+
+  const isLoading = type === 'page' ? pageQuery.isLoading : queryQuery.isLoading;
+
+  const breakdownRows: Record<string, string | number>[] =
+    type === 'page'
+      ? ((pageQuery.data as { queries?: unknown[] } | undefined)?.queries ?? []) as Record<string, string | number>[]
+      : ((queryQuery.data as { pages?: unknown[] } | undefined)?.pages ?? []) as Record<string, string | number>[];
+
+  const breakdownKey = type === 'page' ? 'query' : 'page';
+  const breakdownLabel = type === 'page' ? 'Query' : 'Page';
+  const pluralLabel = type === 'page' ? 'queries' : 'pages';
+
+  const maxClicks = Math.max(
+    ...(breakdownRows as { clicks: number }[]).map((r) => r.clicks),
+    1,
+  );
+
+  return (
+    <div className="card overflow-hidden">
+      <div className="border-b p-4">
+        <h3 className="font-medium text-sm">Top {pluralLabel}</h3>
+      </div>
+      {isLoading ? (
+        <OverviewWidgetTable
+          data={[1, 2, 3, 4, 5]}
+          keyExtractor={(i) => String(i)}
+          getColumnPercentage={() => 0}
+          columns={[
+            { name: breakdownLabel, width: 'w-full', render: () => <Skeleton className="h-4 w-2/3" /> },
+            { name: 'Clicks', width: '70px', render: () => <Skeleton className="h-4 w-10" /> },
+            { name: 'Impr.', width: '70px', render: () => <Skeleton className="h-4 w-10" /> },
+            { name: 'CTR', width: '60px', render: () => <Skeleton className="h-4 w-8" /> },
+            { name: 'Pos.', width: '55px', render: () => <Skeleton className="h-4 w-8" /> },
+          ]}
+        />
+      ) : (
+        <OverviewWidgetTable
+          data={breakdownRows}
+          keyExtractor={(item) => String(item[breakdownKey])}
+          getColumnPercentage={(item) => (item.clicks as number) / maxClicks}
+          columns={[
+            {
+              name: breakdownLabel,
+              width: 'w-full',
+              render(item) {
+                return (
+                  <div className="min-w-0 overflow-hidden">
+                    <span className="block truncate font-mono text-xs">
+                      {String(item[breakdownKey])}
+                    </span>
+                  </div>
+                );
+              },
+            },
+            {
+              name: 'Clicks',
+              width: '70px',
+              getSortValue: (item) => item.clicks as number,
+              render(item) {
+                return (
+                  <span className="font-mono font-semibold text-xs">
+                    {(item.clicks as number).toLocaleString()}
+                  </span>
+                );
+              },
+            },
+            {
+              name: 'Impr.',
+              width: '70px',
+              getSortValue: (item) => item.impressions as number,
+              render(item) {
+                return (
+                  <span className="font-mono font-semibold text-xs">
+                    {(item.impressions as number).toLocaleString()}
+                  </span>
+                );
+              },
+            },
+            {
+              name: 'CTR',
+              width: '60px',
+              getSortValue: (item) => item.ctr as number,
+              render(item) {
+                return (
+                  <span className="font-mono font-semibold text-xs">
+                    {((item.ctr as number) * 100).toFixed(1)}%
+                  </span>
+                );
+              },
+            },
+            {
+              name: 'Pos.',
+              width: '55px',
+              getSortValue: (item) => item.position as number,
+              render(item) {
+                return (
+                  <span className="font-mono font-semibold text-xs">
+                    {(item.position as number).toFixed(1)}
+                  </span>
+                );
+              },
+            },
+          ]}
+        />
+      )}
+    </div>
+  );
+}

apps/start/src/components/page/gsc-cannibalization.tsx

@@ -0,0 +1,255 @@
+import type { IChartRange, IInterval } from '@openpanel/validation';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import { AlertCircleIcon, ChevronsUpDownIcon, SearchIcon } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import { Pagination } from '@/components/pagination';
+import { Input } from '@/components/ui/input';
+import { useAppContext } from '@/hooks/use-app-context';
+import { useTRPC } from '@/integrations/trpc/react';
+import { pushModal } from '@/modals';
+import { cn } from '@/utils/cn';
+
+interface GscCannibalizationProps {
+  projectId: string;
+  range: IChartRange;
+  interval: IInterval;
+  startDate?: string;
+  endDate?: string;
+}
+
+export function GscCannibalization({
+  projectId,
+  range,
+  interval,
+  startDate,
+  endDate,
+}: GscCannibalizationProps) {
+  const trpc = useTRPC();
+  const { apiUrl } = useAppContext();
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  const [page, setPage] = useState(0);
+  const [search, setSearch] = useState('');
+  const pageSize = 15;
+
+  const query = useQuery(
+    trpc.gsc.getCannibalization.queryOptions(
+      {
+        projectId,
+        range,
+        interval,
+        startDate,
+        endDate,
+      },
+      { placeholderData: keepPreviousData }
+    )
+  );
+
+  const toggle = (q: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(q)) {
+        next.delete(q);
+      } else {
+        next.add(q);
+      }
+      return next;
+    });
+  };
+
+  const allItems = query.data ?? [];
+
+  const items = useMemo(() => {
+    if (!search.trim()) {
+      return allItems;
+    }
+    const q = search.toLowerCase();
+    return allItems.filter(
+      (item) =>
+        item.query.toLowerCase().includes(q) ||
+        item.pages.some((p) => p.page.toLowerCase().includes(q))
+    );
+  }, [allItems, search]);
+
+  const pageCount = Math.ceil(items.length / pageSize) || 1;
+  useEffect(() => {
+    setPage((p) => Math.max(0, Math.min(p, pageCount - 1)));
+  }, [items, pageSize, pageCount]);
+  const paginatedItems = useMemo(
+    () => items.slice(page * pageSize, (page + 1) * pageSize),
+    [items, page, pageSize]
+  );
+  const rangeStart = items.length ? page * pageSize + 1 : 0;
+  const rangeEnd = Math.min((page + 1) * pageSize, items.length);
+
+  if (!(query.isLoading || allItems.length)) {
+    return null;
+  }
+
+  return (
+    <div className="card">
+      <div className="border-b">
+        <div className="flex items-center justify-between px-4 py-3">
+          <div className="flex items-center gap-2">
+            <h3 className="font-medium text-sm">Keyword Cannibalization</h3>
+            {items.length > 0 && (
+              <span className="rounded-full bg-muted px-2 py-0.5 font-medium text-muted-foreground text-xs">
+                {items.length}
+              </span>
+            )}
+          </div>
+          {items.length > 0 && (
+            <div className="flex shrink-0 items-center gap-2">
+              <span className="whitespace-nowrap text-muted-foreground text-xs">
+                {items.length === 0
+                  ? '0 results'
+                  : `${rangeStart}-${rangeEnd} of ${items.length}`}
+              </span>
+              <Pagination
+                canNextPage={page < pageCount - 1}
+                canPreviousPage={page > 0}
+                nextPage={() => setPage((p) => Math.min(pageCount - 1, p + 1))}
+                pageIndex={page}
+                previousPage={() => setPage((p) => Math.max(0, p - 1))}
+              />
+            </div>
+          )}
+        </div>
+        <div className="relative">
+          <SearchIcon className="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            className="rounded-none border-0 border-t bg-transparent pl-9 text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground focus-visible:ring-offset-0"
+            onChange={(e) => {
+              setSearch(e.target.value);
+              setPage(0);
+            }}
+            placeholder="Search keywords"
+            type="search"
+            value={search}
+          />
+        </div>
+      </div>
+      <div className="divide-y">
+        {query.isLoading &&
+          [1, 2, 3].map((i) => (
+            <div className="space-y-2 p-4" key={i}>
+              <div className="h-4 w-1/3 animate-pulse rounded bg-muted" />
+              <div className="h-3 w-1/2 animate-pulse rounded bg-muted" />
+            </div>
+          ))}
+        {paginatedItems.map((item) => {
+          const isOpen = expanded.has(item.query);
+          const avgCtr =
+            item.pages.reduce((s, p) => s + p.ctr, 0) / item.pages.length;
+
+          return (
+            <div key={item.query}>
+              <button
+                className="flex w-full items-center gap-3 p-4 text-left transition-colors hover:bg-muted/40"
+                onClick={() => toggle(item.query)}
+                type="button"
+              >
+                <div className="flex min-w-0 flex-1 items-center gap-3">
+                  <div
+                    className={cn(
+                      'row shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 font-medium text-xs',
+                      'bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400'
+                    )}
+                  >
+                    <AlertCircleIcon className="size-3" />
+                    {item.pages.length} pages
+                  </div>
+                  <span className="truncate font-medium text-sm">
+                    {item.query}
+                  </span>
+                </div>
+                <div className="flex shrink-0 items-center gap-4">
+                  <span className="whitespace-nowrap font-mono text-muted-foreground text-xs">
+                    {item.totalImpressions.toLocaleString()} impr ·{' '}
+                    {(avgCtr * 100).toFixed(1)}% avg CTR
+                  </span>
+                  <ChevronsUpDownIcon
+                    className={cn(
+                      'size-3.5 text-muted-foreground transition-transform',
+                      isOpen && 'rotate-180'
+                    )}
+                  />
+                </div>
+              </button>
+
+              {isOpen && (
+                <div className="border-t bg-muted/20 px-4 py-3">
+                  <p className="mb-3 text-muted-foreground text-xs leading-normal">
+                    These pages all rank for{' '}
+                    <span className="font-medium text-foreground">
+                      "{item.query}"
+                    </span>
+                    . Consider consolidating weaker pages into the top-ranking
+                    one to concentrate link equity and avoid splitting clicks.
+                  </p>
+                  <div className="space-y-1.5">
+                    {item.pages.map((page, idx) => {
+                      // Strip hash fragments — GSC sometimes returns heading
+                      // anchor URLs (e.g. /page#section) as separate entries
+                      let cleanUrl = page.page;
+                      let origin = '';
+                      let path = page.page;
+                      try {
+                        const u = new URL(page.page);
+                        u.hash = '';
+                        cleanUrl = u.toString();
+                        origin = u.origin;
+                        path = u.pathname + u.search;
+                      } catch {
+                        cleanUrl = page.page.split('#')[0] ?? page.page;
+                      }
+                      const isWinner = idx === 0;
+
+                      return (
+                        <button
+                          className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-muted/60"
+                          key={page.page}
+                          onClick={() =>
+                            pushModal('PageDetails', {
+                              type: 'page',
+                              projectId,
+                              value: cleanUrl,
+                            })
+                          }
+                          type="button"
+                        >
+                          <img
+                            alt=""
+                            className="size-3.5 shrink-0 rounded-sm"
+                            loading="lazy"
+                            onError={(e) => {
+                              (e.target as HTMLImageElement).style.display =
+                                'none';
+                            }}
+                            src={`${apiUrl}/misc/favicon?url=${origin}`}
+                          />
+                          <span className="min-w-0 flex-1 truncate font-mono text-xs">
+                            {path || page.page}
+                          </span>
+                          {isWinner && (
+                            <span className="shrink-0 rounded bg-emerald-100 px-1 py-0.5 font-medium text-emerald-700 text-xs dark:bg-emerald-900/30 dark:text-emerald-400">
+                              #1
+                            </span>
+                          )}
+                          <span className="shrink-0 whitespace-nowrap font-mono text-muted-foreground text-xs">
+                            pos {page.position.toFixed(1)} ·{' '}
+                            {(page.ctr * 100).toFixed(1)}% CTR ·{' '}
+                            {page.impressions.toLocaleString()} impr
+                          </span>
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

apps/start/src/components/page/gsc-clicks-chart.tsx

@@ -0,0 +1,197 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+  CartesianGrid,
+  ComposedChart,
+  Line,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import {
+  ChartTooltipHeader,
+  ChartTooltipItem,
+  createChartTooltip,
+} from '@/components/charts/chart-tooltip';
+import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
+import {
+  useYAxisProps,
+  X_AXIS_STYLE_PROPS,
+} from '@/components/report-chart/common/axis';
+import { Skeleton } from '@/components/skeleton';
+import { useFormatDateInterval } from '@/hooks/use-format-date-interval';
+import { useTRPC } from '@/integrations/trpc/react';
+import { getChartColor } from '@/utils/theme';
+
+interface ChartData {
+  date: string;
+  clicks: number;
+  impressions: number;
+}
+
+const { TooltipProvider, Tooltip } = createChartTooltip<
+  ChartData,
+  { formatDate: (date: Date | string) => string }
+>(({ data, context }) => {
+  const item = data[0];
+  if (!item) {
+    return null;
+  }
+  return (
+    <>
+      <ChartTooltipHeader>
+        <div>{context.formatDate(item.date)}</div>
+      </ChartTooltipHeader>
+      <ChartTooltipItem color={getChartColor(0)}>
+        <div className="flex justify-between gap-8 font-medium font-mono">
+          <span>Clicks</span>
+          <span>{item.clicks.toLocaleString()}</span>
+        </div>
+      </ChartTooltipItem>
+      <ChartTooltipItem color={getChartColor(1)}>
+        <div className="flex justify-between gap-8 font-medium font-mono">
+          <span>Impressions</span>
+          <span>{item.impressions.toLocaleString()}</span>
+        </div>
+      </ChartTooltipItem>
+    </>
+  );
+});
+
+interface GscClicksChartProps {
+  projectId: string;
+  value: string;
+  type: 'page' | 'query';
+}
+
+export function GscClicksChart({
+  projectId,
+  value,
+  type,
+}: GscClicksChartProps) {
+  const { range, startDate, endDate, interval } = useOverviewOptions();
+  const trpc = useTRPC();
+  const yAxisProps = useYAxisProps();
+  const formatDateShort = useFormatDateInterval({ interval, short: true });
+  const formatDateLong = useFormatDateInterval({ interval, short: false });
+
+  const dateInput = {
+    range,
+    startDate: startDate ?? undefined,
+    endDate: endDate ?? undefined,
+  };
+
+  const pageQuery = useQuery(
+    trpc.gsc.getPageDetails.queryOptions(
+      { projectId, page: value, ...dateInput },
+      { enabled: type === 'page' }
+    )
+  );
+
+  const queryQuery = useQuery(
+    trpc.gsc.getQueryDetails.queryOptions(
+      { projectId, query: value, ...dateInput },
+      { enabled: type === 'query' }
+    )
+  );
+
+  const isLoading =
+    type === 'page' ? pageQuery.isLoading : queryQuery.isLoading;
+  const timeseries =
+    (type === 'page'
+      ? pageQuery.data?.timeseries
+      : queryQuery.data?.timeseries) ?? [];
+
+  const data: ChartData[] = timeseries.map((r) => ({
+    date: r.date,
+    clicks: r.clicks,
+    impressions: r.impressions,
+  }));
+
+  return (
+    <div className="card p-4">
+      <div className="mb-4 flex items-center justify-between">
+        <h3 className="font-medium text-sm">Clicks & Impressions</h3>
+        <div className="flex items-center gap-4 text-muted-foreground text-xs">
+          <span className="flex items-center gap-1.5">
+            <span
+              className="h-0.5 w-3 rounded-full"
+              style={{ backgroundColor: getChartColor(0) }}
+            />
+            Clicks
+          </span>
+          <span className="flex items-center gap-1.5">
+            <span
+              className="h-0.5 w-3 rounded-full"
+              style={{ backgroundColor: getChartColor(1) }}
+            />
+            Impressions
+          </span>
+        </div>
+      </div>
+      {isLoading ? (
+        <Skeleton className="h-40 w-full" />
+      ) : (
+        <TooltipProvider formatDate={formatDateLong}>
+          <ResponsiveContainer height={160} width="100%">
+            <ComposedChart data={data}>
+              <defs>
+                <filter
+                  height="140%"
+                  id="gsc-clicks-glow"
+                  width="140%"
+                  x="-20%"
+                  y="-20%"
+                >
+                  <feGaussianBlur result="blur" stdDeviation="5" />
+                  <feComponentTransfer in="blur" result="dimmedBlur">
+                    <feFuncA slope="0.5" type="linear" />
+                  </feComponentTransfer>
+                  <feComposite
+                    in="SourceGraphic"
+                    in2="dimmedBlur"
+                    operator="over"
+                  />
+                </filter>
+              </defs>
+              <CartesianGrid
+                className="stroke-border"
+                horizontal
+                strokeDasharray="3 3"
+                vertical={false}
+              />
+              <XAxis
+                {...X_AXIS_STYLE_PROPS}
+                dataKey="date"
+                tickFormatter={(v: string) => formatDateShort(v)}
+                type="category"
+              />
+              <YAxis {...yAxisProps} yAxisId="left" />
+              <YAxis {...yAxisProps} orientation="right" yAxisId="right" />
+              <Tooltip />
+              <Line
+                dataKey="clicks"
+                dot={false}
+                filter="url(#gsc-clicks-glow)"
+                isAnimationActive={false}
+                stroke={getChartColor(0)}
+                strokeWidth={2}
+                type="monotone"
+                yAxisId="left"
+              />
+              <Line
+                dataKey="impressions"
+                dot={false}
+                filter="url(#gsc-clicks-glow)"
+                isAnimationActive={false}
+                stroke={getChartColor(1)}
+                strokeWidth={2}
+                type="monotone"
+                yAxisId="right"
+              />
+            </ComposedChart>
+          </ResponsiveContainer>
+        </TooltipProvider>
+      )}
+    </div>
+  );
+}

apps/start/src/components/page/gsc-ctr-benchmark.tsx

@@ -0,0 +1,228 @@
+import {
+  CartesianGrid,
+  ComposedChart,
+  Line,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import {
+  ChartTooltipHeader,
+  ChartTooltipItem,
+  createChartTooltip,
+} from '@/components/charts/chart-tooltip';
+import {
+  useYAxisProps,
+  X_AXIS_STYLE_PROPS,
+} from '@/components/report-chart/common/axis';
+import { Skeleton } from '@/components/skeleton';
+import { getChartColor } from '@/utils/theme';
+
+// Industry average CTR by position (Google organic)
+const BENCHMARK: Record<number, number> = {
+  1: 28.5,
+  2: 15.7,
+  3: 11.0,
+  4: 8.0,
+  5: 6.3,
+  6: 5.0,
+  7: 4.0,
+  8: 3.3,
+  9: 2.8,
+  10: 2.5,
+  11: 2.2,
+  12: 2.0,
+  13: 1.8,
+  14: 1.5,
+  15: 1.2,
+  16: 1.1,
+  17: 1.0,
+  18: 0.9,
+  19: 0.8,
+  20: 0.7,
+};
+
+interface PageEntry {
+  path: string;
+  ctr: number;
+  impressions: number;
+}
+
+interface ChartData {
+  position: number;
+  yourCtr: number | null;
+  benchmark: number;
+  pages: PageEntry[];
+}
+
+const { TooltipProvider, Tooltip } = createChartTooltip<
+  ChartData,
+  Record<string, unknown>
+>(({ data }) => {
+  const item = data[0];
+  if (!item) {
+    return null;
+  }
+  return (
+    <>
+      <ChartTooltipHeader>
+        <div>Position #{item.position}</div>
+      </ChartTooltipHeader>
+      {item.yourCtr != null && (
+        <ChartTooltipItem color={getChartColor(0)}>
+          <div className="flex justify-between gap-8 font-medium font-mono">
+            <span>Your avg CTR</span>
+            <span>{item.yourCtr.toFixed(1)}%</span>
+          </div>
+        </ChartTooltipItem>
+      )}
+      <ChartTooltipItem color={getChartColor(3)}>
+        <div className="flex justify-between gap-8 font-medium font-mono">
+          <span>Benchmark</span>
+          <span>{item.benchmark.toFixed(1)}%</span>
+        </div>
+      </ChartTooltipItem>
+      {item.pages.length > 0 && (
+        <div className="mt-1.5 border-t pt-1.5">
+          {item.pages.map((p) => (
+            <div
+              className="flex items-center justify-between gap-4 py-0.5"
+              key={p.path}
+            >
+              <span className="max-w-40 truncate font-mono text-muted-foreground text-xs">
+                {p.path}
+              </span>
+              <span className="shrink-0 font-mono text-xs tabular-nums">
+                {(p.ctr * 100).toFixed(1)}%
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </>
+  );
+});
+
+interface GscCtrBenchmarkProps {
+  data: Array<{
+    page: string;
+    position: number;
+    ctr: number;
+    impressions: number;
+  }>;
+  isLoading: boolean;
+}
+
+export function GscCtrBenchmark({ data, isLoading }: GscCtrBenchmarkProps) {
+  const yAxisProps = useYAxisProps();
+
+  const grouped = new Map<number, { ctrSum: number; pages: PageEntry[] }>();
+  for (const d of data) {
+    const pos = Math.round(d.position);
+    if (pos < 1 || pos > 20 || d.impressions < 10) {
+      continue;
+    }
+    let path = d.page;
+    try {
+      path = new URL(d.page).pathname;
+    } catch {
+      // keep as-is
+    }
+    const entry = grouped.get(pos) ?? { ctrSum: 0, pages: [] };
+    entry.ctrSum += d.ctr * 100;
+    entry.pages.push({ path, ctr: d.ctr, impressions: d.impressions });
+    grouped.set(pos, entry);
+  }
+
+  const chartData: ChartData[] = Array.from({ length: 20 }, (_, i) => {
+    const pos = i + 1;
+    const entry = grouped.get(pos);
+    const pages = entry
+      ? [...entry.pages].sort((a, b) => b.ctr - a.ctr).slice(0, 5)
+      : [];
+    return {
+      position: pos,
+      yourCtr: entry ? entry.ctrSum / entry.pages.length : null,
+      benchmark: BENCHMARK[pos] ?? 0,
+      pages,
+    };
+  });
+
+  const hasAnyData = chartData.some((d) => d.yourCtr != null);
+
+  return (
+    <div className="card p-4">
+      <div className="mb-4 flex items-center justify-between">
+        <h3 className="font-medium text-sm">CTR vs Position</h3>
+        <div className="flex items-center gap-4 text-muted-foreground text-xs">
+          {hasAnyData && (
+            <span className="flex items-center gap-1.5">
+              <span
+                className="h-0.5 w-3 rounded-full"
+                style={{ backgroundColor: getChartColor(0) }}
+              />
+              Your CTR
+            </span>
+          )}
+          <span className="flex items-center gap-1.5">
+            <span
+              className="h-0.5 w-3 rounded-full opacity-60"
+              style={{ backgroundColor: getChartColor(3) }}
+            />
+            Benchmark
+          </span>
+        </div>
+      </div>
+      {isLoading ? (
+        <Skeleton className="h-40 w-full" />
+      ) : (
+        <TooltipProvider>
+          <ResponsiveContainer height={160} width="100%">
+            <ComposedChart data={chartData}>
+              <CartesianGrid
+                className="stroke-border"
+                horizontal
+                strokeDasharray="3 3"
+                vertical={false}
+              />
+              <XAxis
+                {...X_AXIS_STYLE_PROPS}
+                dataKey="position"
+                domain={[1, 20]}
+                tickFormatter={(v: number) => `#${v}`}
+                ticks={[1, 5, 10, 15, 20]}
+                type="number"
+              />
+              <YAxis
+                {...yAxisProps}
+                domain={[0, 'auto']}
+                tickFormatter={(v: number) => `${v}%`}
+              />
+              <Tooltip />
+              <Line
+                activeDot={{ r: 4 }}
+                connectNulls={false}
+                dataKey="yourCtr"
+                dot={{ r: 3, fill: getChartColor(0) }}
+                isAnimationActive={false}
+                stroke={getChartColor(0)}
+                strokeWidth={2}
+                type="monotone"
+              />
+              <Line
+                dataKey="benchmark"
+                dot={false}
+                isAnimationActive={false}
+                stroke={getChartColor(3)}
+                strokeDasharray="4 3"
+                strokeOpacity={0.6}
+                strokeWidth={1.5}
+                type="monotone"
+              />
+            </ComposedChart>
+          </ResponsiveContainer>
+        </TooltipProvider>
+      )}
+    </div>
+  );
+}

apps/start/src/components/page/gsc-position-chart.tsx

@@ -0,0 +1,129 @@
+import {
+  CartesianGrid,
+  ComposedChart,
+  Line,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import {
+  ChartTooltipHeader,
+  ChartTooltipItem,
+  createChartTooltip,
+} from '@/components/charts/chart-tooltip';
+import {
+  useYAxisProps,
+  X_AXIS_STYLE_PROPS,
+} from '@/components/report-chart/common/axis';
+import { Skeleton } from '@/components/skeleton';
+import { getChartColor } from '@/utils/theme';
+
+interface ChartData {
+  date: string;
+  position: number;
+}
+
+const { TooltipProvider, Tooltip } = createChartTooltip<
+  ChartData,
+  Record<string, unknown>
+>(({ data }) => {
+  const item = data[0];
+  if (!item) return null;
+  return (
+    <>
+      <ChartTooltipHeader>
+        <div>{item.date}</div>
+      </ChartTooltipHeader>
+      <ChartTooltipItem color={getChartColor(2)}>
+        <div className="flex justify-between gap-8 font-medium font-mono">
+          <span>Avg Position</span>
+          <span>{item.position.toFixed(1)}</span>
+        </div>
+      </ChartTooltipItem>
+    </>
+  );
+});
+
+interface GscPositionChartProps {
+  data: Array<{ date: string; position: number }>;
+  isLoading: boolean;
+}
+
+export function GscPositionChart({ data, isLoading }: GscPositionChartProps) {
+  const yAxisProps = useYAxisProps();
+
+  const chartData: ChartData[] = data.map((r) => ({
+    date: r.date,
+    position: r.position,
+  }));
+
+  const positions = chartData.map((d) => d.position).filter((p) => p > 0);
+  const minPos = positions.length ? Math.max(1, Math.floor(Math.min(...positions)) - 2) : 1;
+  const maxPos = positions.length ? Math.ceil(Math.max(...positions)) + 2 : 20;
+
+  return (
+    <div className="card p-4">
+      <div className="mb-4 flex items-center justify-between">
+        <h3 className="font-medium text-sm">Avg Position</h3>
+        <span className="text-muted-foreground text-xs">Lower is better</span>
+      </div>
+      {isLoading ? (
+        <Skeleton className="h-40 w-full" />
+      ) : (
+        <TooltipProvider>
+          <ResponsiveContainer height={160} width="100%">
+            <ComposedChart data={chartData}>
+              <defs>
+                <filter
+                  height="140%"
+                  id="gsc-pos-glow"
+                  width="140%"
+                  x="-20%"
+                  y="-20%"
+                >
+                  <feGaussianBlur result="blur" stdDeviation="5" />
+                  <feComponentTransfer in="blur" result="dimmedBlur">
+                    <feFuncA slope="0.5" type="linear" />
+                  </feComponentTransfer>
+                  <feComposite
+                    in="SourceGraphic"
+                    in2="dimmedBlur"
+                    operator="over"
+                  />
+                </filter>
+              </defs>
+              <CartesianGrid
+                className="stroke-border"
+                horizontal
+                strokeDasharray="3 3"
+                vertical={false}
+              />
+              <XAxis
+                {...X_AXIS_STYLE_PROPS}
+                dataKey="date"
+                tickFormatter={(v: string) => v.slice(5)}
+                type="category"
+              />
+              <YAxis
+                {...yAxisProps}
+                domain={[minPos, maxPos]}
+                reversed
+                tickFormatter={(v: number) => `#${v}`}
+              />
+              <Tooltip />
+              <Line
+                dataKey="position"
+                dot={false}
+                filter="url(#gsc-pos-glow)"
+                isAnimationActive={false}
+                stroke={getChartColor(2)}
+                strokeWidth={2}
+                type="monotone"
+              />
+            </ComposedChart>
+          </ResponsiveContainer>
+        </TooltipProvider>
+      )}
+    </div>
+  );
+}

apps/start/src/components/page/page-views-chart.tsx

@@ -0,0 +1,180 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+  CartesianGrid,
+  ComposedChart,
+  Line,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import {
+  ChartTooltipHeader,
+  ChartTooltipItem,
+  createChartTooltip,
+} from '@/components/charts/chart-tooltip';
+import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
+import { useFormatDateInterval } from '@/hooks/use-format-date-interval';
+import {
+  useYAxisProps,
+  X_AXIS_STYLE_PROPS,
+} from '@/components/report-chart/common/axis';
+import { Skeleton } from '@/components/skeleton';
+import { useTRPC } from '@/integrations/trpc/react';
+import { getChartColor } from '@/utils/theme';
+
+interface ChartData {
+  date: string;
+  pageviews: number;
+  sessions: number;
+}
+
+const { TooltipProvider, Tooltip } = createChartTooltip<
+  ChartData,
+  { formatDate: (date: Date | string) => string }
+>(({ data, context }) => {
+  const item = data[0];
+  if (!item) {
+    return null;
+  }
+  return (
+    <>
+      <ChartTooltipHeader>
+        <div>{context.formatDate(item.date)}</div>
+      </ChartTooltipHeader>
+      <ChartTooltipItem color={getChartColor(0)}>
+        <div className="flex justify-between gap-8 font-medium font-mono">
+          <span>Views</span>
+          <span>{item.pageviews.toLocaleString()}</span>
+        </div>
+      </ChartTooltipItem>
+      <ChartTooltipItem color={getChartColor(1)}>
+        <div className="flex justify-between gap-8 font-medium font-mono">
+          <span>Sessions</span>
+          <span>{item.sessions.toLocaleString()}</span>
+        </div>
+      </ChartTooltipItem>
+    </>
+  );
+});
+
+interface PageViewsChartProps {
+  projectId: string;
+  origin: string;
+  path: string;
+}
+
+export function PageViewsChart({
+  projectId,
+  origin,
+  path,
+}: PageViewsChartProps) {
+  const { range, interval } = useOverviewOptions();
+  const trpc = useTRPC();
+  const yAxisProps = useYAxisProps();
+  const formatDateShort = useFormatDateInterval({ interval, short: true });
+  const formatDateLong = useFormatDateInterval({ interval, short: false });
+
+  const query = useQuery(
+    trpc.event.pageTimeseries.queryOptions({
+      projectId,
+      range,
+      interval,
+      origin,
+      path,
+    })
+  );
+
+  const data: ChartData[] = (query.data ?? []).map((r) => ({
+    date: r.date,
+    pageviews: r.pageviews,
+    sessions: r.sessions,
+  }));
+
+  return (
+    <div className="card p-4">
+      <div className="mb-4 flex items-center justify-between">
+        <h3 className="font-medium text-sm">Views & Sessions</h3>
+        <div className="flex items-center gap-4 text-muted-foreground text-xs">
+          <span className="flex items-center gap-1.5">
+            <span
+              className="h-0.5 w-3 rounded-full"
+              style={{ backgroundColor: getChartColor(0) }}
+            />
+            Views
+          </span>
+          <span className="flex items-center gap-1.5">
+            <span
+              className="h-0.5 w-3 rounded-full"
+              style={{ backgroundColor: getChartColor(1) }}
+            />
+            Sessions
+          </span>
+        </div>
+      </div>
+      {query.isLoading ? (
+        <Skeleton className="h-40 w-full" />
+      ) : (
+        <TooltipProvider formatDate={formatDateLong}>
+          <ResponsiveContainer height={160} width="100%">
+            <ComposedChart data={data}>
+              <defs>
+                <filter
+                  height="140%"
+                  id="page-views-glow"
+                  width="140%"
+                  x="-20%"
+                  y="-20%"
+                >
+                  <feGaussianBlur result="blur" stdDeviation="5" />
+                  <feComponentTransfer in="blur" result="dimmedBlur">
+                    <feFuncA slope="0.5" type="linear" />
+                  </feComponentTransfer>
+                  <feComposite
+                    in="SourceGraphic"
+                    in2="dimmedBlur"
+                    operator="over"
+                  />
+                </filter>
+              </defs>
+              <CartesianGrid
+                className="stroke-border"
+                horizontal
+                strokeDasharray="3 3"
+                vertical={false}
+              />
+              <XAxis
+                {...X_AXIS_STYLE_PROPS}
+                dataKey="date"
+                tickFormatter={(v: string) => formatDateShort(v)}
+                type="category"
+              />
+              <YAxis {...yAxisProps} yAxisId="left" />
+              <YAxis {...yAxisProps} orientation="right" yAxisId="right" />
+              <Tooltip />
+              <Line
+                dataKey="pageviews"
+                dot={false}
+                filter="url(#page-views-glow)"
+                isAnimationActive={false}
+                stroke={getChartColor(0)}
+                strokeWidth={2}
+                type="monotone"
+                yAxisId="left"
+              />
+              <Line
+                dataKey="sessions"
+                dot={false}
+                filter="url(#page-views-glow)"
+                isAnimationActive={false}
+                stroke={getChartColor(1)}
+                strokeWidth={2}
+                type="monotone"
+                yAxisId="right"
+              />
+            </ComposedChart>
+          </ResponsiveContainer>
+        </TooltipProvider>
+      )}
+    </div>
+  );
+}

apps/start/src/components/page/pages-insights.tsx

@@ -0,0 +1,360 @@
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import {
+  AlertTriangleIcon,
+  EyeIcon,
+  MousePointerClickIcon,
+  SearchIcon,
+  TrendingUpIcon,
+} from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
+import { Pagination } from '@/components/pagination';
+import { Input } from '@/components/ui/input';
+import { useAppContext } from '@/hooks/use-app-context';
+import { useTRPC } from '@/integrations/trpc/react';
+import { pushModal } from '@/modals';
+import { cn } from '@/utils/cn';
+
+type InsightType =
+  | 'low_ctr'
+  | 'near_page_one'
+  | 'invisible_clicks'
+  | 'high_bounce';
+
+interface PageInsight {
+  page: string;
+  origin: string;
+  path: string;
+  type: InsightType;
+  impact: number;
+  headline: string;
+  suggestion: string;
+  metrics: string;
+}
+
+const INSIGHT_CONFIG: Record<
+  InsightType,
+  { label: string; icon: React.ElementType; color: string; bg: string }
+> = {
+  low_ctr: {
+    label: 'Low CTR',
+    icon: MousePointerClickIcon,
+    color: 'text-amber-600 dark:text-amber-400',
+    bg: 'bg-amber-100 dark:bg-amber-900/30',
+  },
+  near_page_one: {
+    label: 'Near page 1',
+    icon: TrendingUpIcon,
+    color: 'text-blue-600 dark:text-blue-400',
+    bg: 'bg-blue-100 dark:bg-blue-900/30',
+  },
+  invisible_clicks: {
+    label: 'Low visibility',
+    icon: EyeIcon,
+    color: 'text-violet-600 dark:text-violet-400',
+    bg: 'bg-violet-100 dark:bg-violet-900/30',
+  },
+  high_bounce: {
+    label: 'High bounce',
+    icon: AlertTriangleIcon,
+    color: 'text-red-600 dark:text-red-400',
+    bg: 'bg-red-100 dark:bg-red-900/30',
+  },
+};
+
+interface PagesInsightsProps {
+  projectId: string;
+}
+
+export function PagesInsights({ projectId }: PagesInsightsProps) {
+  const trpc = useTRPC();
+  const { range, interval, startDate, endDate } = useOverviewOptions();
+  const { apiUrl } = useAppContext();
+  const [page, setPage] = useState(0);
+  const [search, setSearch] = useState('');
+  const pageSize = 8;
+
+  const dateInput = {
+    range,
+    startDate: startDate ?? undefined,
+    endDate: endDate ?? undefined,
+  };
+
+  const gscPagesQuery = useQuery(
+    trpc.gsc.getPages.queryOptions(
+      { projectId, ...dateInput, limit: 1000 },
+      { placeholderData: keepPreviousData }
+    )
+  );
+
+  const analyticsQuery = useQuery(
+    trpc.event.pages.queryOptions(
+      { projectId, cursor: 1, take: 1000, search: undefined, range, interval },
+      { placeholderData: keepPreviousData }
+    )
+  );
+
+  const insights = useMemo<PageInsight[]>(() => {
+    const gscPages = gscPagesQuery.data ?? [];
+    const analyticsPages = analyticsQuery.data ?? [];
+
+    const analyticsMap = new Map(
+      analyticsPages.map((p) => [p.origin + p.path, p])
+    );
+
+    const results: PageInsight[] = [];
+
+    for (const gsc of gscPages) {
+      let origin = '';
+      let path = gsc.page;
+      try {
+        const url = new URL(gsc.page);
+        origin = url.origin;
+        path = url.pathname + url.search;
+      } catch {
+        // keep as-is
+      }
+
+      const analytics = analyticsMap.get(gsc.page);
+
+      // 1. Low CTR: ranking on page 1 but click rate is poor
+      if (gsc.position <= 10 && gsc.ctr < 0.04 && gsc.impressions >= 100) {
+        results.push({
+          page: gsc.page,
+          origin,
+          path,
+          type: 'low_ctr',
+          impact: gsc.impressions * (0.04 - gsc.ctr),
+          headline: `Ranking #${Math.round(gsc.position)} but only ${(gsc.ctr * 100).toFixed(1)}% CTR`,
+          suggestion:
+            'You are on page 1 but people rarely click. Rewrite your title tag and meta description to be more compelling and match search intent.',
+          metrics: `Pos ${Math.round(gsc.position)} · ${gsc.impressions.toLocaleString()} impr · ${(gsc.ctr * 100).toFixed(1)}% CTR`,
+        });
+      }
+
+      // 2. Near page 1: just off the first page with decent visibility
+      if (gsc.position > 10 && gsc.position <= 20 && gsc.impressions >= 100) {
+        results.push({
+          page: gsc.page,
+          origin,
+          path,
+          type: 'near_page_one',
+          impact: gsc.impressions / gsc.position,
+          headline: `Position ${Math.round(gsc.position)} — one push from page 1`,
+          suggestion:
+            'A content refresh, more internal links, or a few backlinks could move this into the top 10 and dramatically increase clicks.',
+          metrics: `Pos ${Math.round(gsc.position)} · ${gsc.impressions.toLocaleString()} impr · ${gsc.clicks} clicks`,
+        });
+      }
+
+      // 3. Invisible clicks: high impressions but barely any clicks
+      if (gsc.impressions >= 500 && gsc.ctr < 0.01 && gsc.position > 10) {
+        results.push({
+          page: gsc.page,
+          origin,
+          path,
+          type: 'invisible_clicks',
+          impact: gsc.impressions,
+          headline: `${gsc.impressions.toLocaleString()} impressions but only ${gsc.clicks} clicks`,
+          suggestion:
+            'Google shows this page a lot, but it almost never gets clicked. Consider whether the page targets the right queries or if a different format (e.g. listicle, how-to) would perform better.',
+          metrics: `${gsc.impressions.toLocaleString()} impr · ${gsc.clicks} clicks · Pos ${Math.round(gsc.position)}`,
+        });
+      }
+
+      // 4. High bounce: good traffic but poor engagement (requires analytics match)
+      if (
+        analytics &&
+        analytics.bounce_rate >= 70 &&
+        analytics.sessions >= 20
+      ) {
+        results.push({
+          page: gsc.page,
+          origin,
+          path,
+          type: 'high_bounce',
+          impact: analytics.sessions * (analytics.bounce_rate / 100),
+          headline: `${Math.round(analytics.bounce_rate)}% bounce rate on a page with ${analytics.sessions} sessions`,
+          suggestion:
+            'Visitors are leaving without engaging. Check if the page delivers on its title/meta promise, improve page speed, and make sure key content is above the fold.',
+          metrics: `${Math.round(analytics.bounce_rate)}% bounce · ${analytics.sessions} sessions · ${gsc.impressions.toLocaleString()} impr`,
+        });
+      }
+    }
+
+    // Also check analytics pages without GSC match for high bounce
+    for (const p of analyticsPages) {
+      const fullUrl = p.origin + p.path;
+      if (
+        !gscPagesQuery.data?.some((g) => g.page === fullUrl) &&
+        p.bounce_rate >= 75 &&
+        p.sessions >= 30
+      ) {
+        results.push({
+          page: fullUrl,
+          origin: p.origin,
+          path: p.path,
+          type: 'high_bounce',
+          impact: p.sessions * (p.bounce_rate / 100),
+          headline: `${Math.round(p.bounce_rate)}% bounce rate with ${p.sessions} sessions`,
+          suggestion:
+            'High bounce rate with no search visibility. Review content quality and check if the page is indexed and targeting the right keywords.',
+          metrics: `${Math.round(p.bounce_rate)}% bounce · ${p.sessions} sessions`,
+        });
+      }
+    }
+
+    // Dedupe by (page, type), keep highest impact
+    const seen = new Set<string>();
+    const deduped = results.filter((r) => {
+      const key = `${r.page}::${r.type}`;
+      if (seen.has(key)) {
+        return false;
+      }
+      seen.add(key);
+      return true;
+    });
+
+    return deduped.sort((a, b) => b.impact - a.impact);
+  }, [gscPagesQuery.data, analyticsQuery.data]);
+
+  const isLoading = gscPagesQuery.isLoading || analyticsQuery.isLoading;
+
+  const filteredInsights = useMemo(() => {
+    if (!search.trim()) {
+      return insights;
+    }
+    const q = search.toLowerCase();
+    return insights.filter(
+      (i) =>
+        i.path.toLowerCase().includes(q) || i.page.toLowerCase().includes(q)
+    );
+  }, [insights, search]);
+
+  const pageCount = Math.ceil(filteredInsights.length / pageSize) || 1;
+  const paginatedInsights = useMemo(
+    () => filteredInsights.slice(page * pageSize, (page + 1) * pageSize),
+    [filteredInsights, page, pageSize]
+  );
+  const rangeStart = filteredInsights.length ? page * pageSize + 1 : 0;
+  const rangeEnd = Math.min((page + 1) * pageSize, filteredInsights.length);
+
+  if (!(isLoading || insights.length)) {
+    return null;
+  }
+
+  return (
+    <div className="card">
+      <div className="border-b">
+        <div className="flex items-center justify-between px-4 py-3">
+          <div className="flex items-center gap-2">
+            <h3 className="font-medium text-sm">Opportunities</h3>
+            {filteredInsights.length > 0 && (
+              <span className="rounded-full bg-muted px-2 py-0.5 font-medium text-muted-foreground text-xs">
+                {filteredInsights.length}
+              </span>
+            )}
+          </div>
+          {filteredInsights.length > 0 && (
+            <div className="flex shrink-0 items-center gap-2">
+              <span className="whitespace-nowrap text-muted-foreground text-xs">
+                {filteredInsights.length === 0
+                  ? '0 results'
+                  : `${rangeStart}-${rangeEnd} of ${filteredInsights.length}`}
+              </span>
+              <Pagination
+                canNextPage={page < pageCount - 1}
+                canPreviousPage={page > 0}
+                nextPage={() => setPage((p) => Math.min(pageCount - 1, p + 1))}
+                pageIndex={page}
+                previousPage={() => setPage((p) => Math.max(0, p - 1))}
+              />
+            </div>
+          )}
+        </div>
+        <div className="relative">
+          <SearchIcon className="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            className="rounded-none border-0 border-t bg-transparent pl-9 text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground focus-visible:ring-offset-0"
+            onChange={(e) => {
+              setSearch(e.target.value);
+              setPage(0);
+            }}
+            placeholder="Search pages"
+            type="search"
+            value={search}
+          />
+        </div>
+      </div>
+      <div className="divide-y">
+        {isLoading &&
+          [1, 2, 3, 4].map((i) => (
+            <div className="flex items-start gap-3 p-4" key={i}>
+              <div className="mt-0.5 h-7 w-20 animate-pulse rounded-md bg-muted" />
+              <div className="min-w-0 flex-1 space-y-2">
+                <div className="h-4 w-2/3 animate-pulse rounded bg-muted" />
+                <div className="h-3 w-full animate-pulse rounded bg-muted" />
+              </div>
+              <div className="h-4 w-32 animate-pulse rounded bg-muted" />
+            </div>
+          ))}
+        {paginatedInsights.map((insight, i) => {
+          const config = INSIGHT_CONFIG[insight.type];
+          const Icon = config.icon;
+
+          return (
+            <button
+              className="flex w-full items-start gap-3 p-4 text-left transition-colors hover:bg-muted/40"
+              key={`${insight.page}-${insight.type}-${i}`}
+              onClick={() =>
+                pushModal('PageDetails', {
+                  type: 'page',
+                  projectId,
+                  value: insight.page,
+                })
+              }
+              type="button"
+            >
+              <div className="col min-w-0 flex-1 gap-2">
+                <span
+                  className={cn(
+                    'row shrink-0 items-center gap-1 self-start rounded-md px-1 py-0.5 font-medium text-xs',
+                    config.color,
+                    config.bg
+                  )}
+                >
+                  <Icon className="size-3" />
+                  {config.label}
+                </span>
+                <div className="flex items-center gap-2">
+                  <img
+                    alt=""
+                    className="size-3.5 shrink-0 rounded-sm"
+                    loading="lazy"
+                    onError={(e) => {
+                      (e.target as HTMLImageElement).style.display = 'none';
+                    }}
+                    src={`${apiUrl}/misc/favicon?url=${insight.origin}`}
+                  />
+                  <span className="truncate font-medium font-mono text-xs">
+                    {insight.path || insight.page}
+                  </span>
+
+                  <span className="ml-auto shrink-0 whitespace-nowrap font-mono text-muted-foreground text-xs">
+                    {insight.metrics}
+                  </span>
+                </div>
+                <p className="text-muted-foreground text-xs leading-relaxed">
+                  <span className="font-medium text-foreground">
+                    {insight.headline}.
+                  </span>{' '}
+                  {insight.suggestion}
+                </p>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

apps/start/src/components/pages/page-sparkline.tsx

@@ -0,0 +1,122 @@
+import { useQuery } from '@tanstack/react-query';
+import { Tooltiper } from '../ui/tooltip';
+import { LazyComponent } from '@/components/lazy-component';
+import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
+import { useTRPC } from '@/integrations/trpc/react';
+
+interface SparklineBarsProps {
+  data: { date: string; pageviews: number }[];
+}
+
+const defaultGap = 1;
+const height = 24;
+const width = 100;
+
+function getTrendDirection(data: { pageviews: number }[]): '↑' | '↓' | '→' {
+  const n = data.length;
+  if (n < 3) {
+    return '→';
+  }
+  const third = Math.max(1, Math.floor(n / 3));
+  const firstAvg =
+    data.slice(0, third).reduce((s, d) => s + d.pageviews, 0) / third;
+  const lastAvg =
+    data.slice(n - third).reduce((s, d) => s + d.pageviews, 0) / third;
+  const threshold = firstAvg * 0.05;
+  if (lastAvg - firstAvg > threshold) {
+    return '↑';
+  }
+  if (firstAvg - lastAvg > threshold) {
+    return '↓';
+  }
+  return '→';
+}
+
+function SparklineBars({ data }: SparklineBarsProps) {
+  if (!data.length) {
+    return <div style={{ height, width }} />;
+  }
+  const max = Math.max(...data.map((d) => d.pageviews), 1);
+  const total = data.length;
+  // Compute bar width to fit SVG width; reduce gap if needed so barW >= 1 when possible
+  let gap = defaultGap;
+  let barW = Math.floor((width - gap * (total - 1)) / total);
+  if (barW < 1 && total > 1) {
+    gap = 0;
+    barW = Math.floor((width - gap * (total - 1)) / total);
+  }
+  if (barW < 1) {
+    barW = 1;
+  }
+  const trend = getTrendDirection(data);
+  const trendColor =
+    trend === '↑'
+      ? 'text-emerald-500'
+      : trend === '↓'
+        ? 'text-red-500'
+        : 'text-muted-foreground';
+
+  return (
+    <div className="flex items-center gap-1.5">
+      <svg className="shrink-0" height={height} width={width}>
+        {data.map((d, i) => {
+          const barH = Math.max(
+            2,
+            Math.round((d.pageviews / max) * (height * 0.8))
+          );
+          return (
+            <rect
+              className="fill-chart-0"
+              height={barH}
+              key={d.date}
+              rx="1"
+              width={barW}
+              x={i * (barW + gap)}
+              y={height - barH}
+            />
+          );
+        })}
+      </svg>
+      <Tooltiper
+        content={
+          trend === '↑'
+            ? 'Upward trend'
+            : trend === '↓'
+              ? 'Downward trend'
+              : 'Stable trend'
+        }
+      >
+        <span className={`shrink-0 font-medium text-xs ${trendColor}`}>
+          {trend}
+        </span>
+      </Tooltiper>
+    </div>
+  );
+}
+
+interface PageSparklineProps {
+  projectId: string;
+  origin: string;
+  path: string;
+}
+
+export function PageSparkline({ projectId, origin, path }: PageSparklineProps) {
+  const { range, interval } = useOverviewOptions();
+  const trpc = useTRPC();
+
+  const query = useQuery(
+    trpc.event.pageTimeseries.queryOptions({
+      projectId,
+      range,
+      interval,
+      origin,
+      path,
+    })
+  );
+
+  return (
+    <LazyComponent fallback={<div style={{ height, width }} />}>
+      <SparklineBars data={query.data ?? []} />
+    </LazyComponent>
+  );
+}

apps/start/src/components/pages/table/columns.tsx

@@ -0,0 +1,206 @@
+import type { ColumnDef } from '@tanstack/react-table';
+import { ExternalLinkIcon } from 'lucide-react';
+import { useMemo } from 'react';
+import { PageSparkline } from '@/components/pages/page-sparkline';
+import { createHeaderColumn } from '@/components/ui/data-table/data-table-helpers';
+import { useAppContext } from '@/hooks/use-app-context';
+import { fancyMinutes, useNumber } from '@/hooks/use-numer-formatter';
+import type { RouterOutputs } from '@/trpc/client';
+
+export type PageRow = RouterOutputs['event']['pages'][number] & {
+  gsc?: { clicks: number; impressions: number; ctr: number; position: number };
+};
+
+export function useColumns({
+  projectId,
+  isGscConnected,
+  previousMap,
+}: {
+  projectId: string;
+  isGscConnected: boolean;
+  previousMap?: Map<string, number>;
+}): ColumnDef<PageRow>[] {
+  const number = useNumber();
+  const { apiUrl } = useAppContext();
+
+  return useMemo<ColumnDef<PageRow>[]>(() => {
+    const cols: ColumnDef<PageRow>[] = [
+      {
+        id: 'page',
+        accessorFn: (row) => `${row.origin}${row.path} ${row.title ?? ''}`,
+        header: createHeaderColumn('Page'),
+        size: 400,
+        meta: { bold: true },
+        cell: ({ row }) => {
+          const page = row.original;
+          return (
+            <div className="flex min-w-0 items-center gap-3">
+              <img
+                alt=""
+                className="size-4 shrink-0 rounded-sm"
+                loading="lazy"
+                onError={(e) => {
+                  (e.target as HTMLImageElement).style.display = 'none';
+                }}
+                src={`${apiUrl}/misc/favicon?url=${page.origin}`}
+              />
+              <div className="min-w-0">
+                {page.title && (
+                  <div className="truncate font-medium text-sm leading-tight">
+                    {page.title}
+                  </div>
+                )}
+                <div className="flex min-w-0 items-center gap-1">
+                  <span className="truncate font-mono text-muted-foreground text-xs">
+                    {page.path}
+                  </span>
+                  <a
+                    className="shrink-0 opacity-0 transition-opacity group-hover/row:opacity-100"
+                    href={page.origin + page.path}
+                    onClick={(e) => e.stopPropagation()}
+                    rel="noreferrer noopener"
+                    target="_blank"
+                  >
+                    <ExternalLinkIcon className="size-3 text-muted-foreground" />
+                  </a>
+                </div>
+              </div>
+            </div>
+          );
+        },
+      },
+      {
+        id: 'trend',
+        header: 'Trend',
+        enableSorting: false,
+        size: 96,
+        cell: ({ row }) => (
+          <PageSparkline
+            origin={row.original.origin}
+            path={row.original.path}
+            projectId={projectId}
+          />
+        ),
+      },
+      {
+        accessorKey: 'pageviews',
+        header: createHeaderColumn('Views'),
+        size: 80,
+        cell: ({ row }) => (
+          <span className="font-mono text-sm tabular-nums">
+            {number.short(row.original.pageviews)}
+          </span>
+        ),
+      },
+      {
+        accessorKey: 'sessions',
+        header: createHeaderColumn('Sessions'),
+        size: 90,
+        cell: ({ row }) => {
+          const prev = previousMap?.get(
+            row.original.origin + row.original.path
+          );
+          if (prev == null) {
+            return <span className="text-muted-foreground">—</span>;
+          }
+          if (prev === 0) {
+            return (
+              <div className="flex items-center gap-2">
+                <span className="font-mono text-sm tabular-nums">
+                  {number.short(row.original.sessions)}
+                </span>
+                <span className="text-muted-foreground">new</span>
+              </div>
+            );
+          }
+
+          const pct = ((row.original.sessions - prev) / prev) * 100;
+          const isPos = pct >= 0;
+
+          return (
+            <div className="flex items-center gap-2">
+              <span className="font-mono text-sm tabular-nums">
+                {number.short(row.original.sessions)}
+              </span>
+              <span
+                className={`font-mono text-sm tabular-nums ${isPos ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'}`}
+              >
+                {isPos ? '+' : ''}
+                {pct.toFixed(1)}%
+              </span>
+            </div>
+          );
+        },
+      },
+      {
+        accessorKey: 'bounce_rate',
+        header: createHeaderColumn('Bounce'),
+        size: 80,
+        cell: ({ row }) => (
+          <span className="font-mono text-sm tabular-nums">
+            {row.original.bounce_rate.toFixed(0)}%
+          </span>
+        ),
+      },
+      {
+        accessorKey: 'avg_duration',
+        header: createHeaderColumn('Duration'),
+        size: 90,
+        cell: ({ row }) => (
+          <span className="whitespace-nowrap font-mono text-sm tabular-nums">
+            {fancyMinutes(row.original.avg_duration)}
+          </span>
+        ),
+      },
+    ];
+
+    if (isGscConnected) {
+      cols.push(
+        {
+          id: 'gsc_impressions',
+          accessorFn: (row) => row.gsc?.impressions ?? 0,
+          header: createHeaderColumn('Impr.'),
+          size: 80,
+          cell: ({ row }) =>
+            row.original.gsc ? (
+              <span className="font-mono text-sm tabular-nums">
+                {number.short(row.original.gsc.impressions)}
+              </span>
+            ) : (
+              <span className="text-muted-foreground">—</span>
+            ),
+        },
+        {
+          id: 'gsc_ctr',
+          accessorFn: (row) => row.gsc?.ctr ?? 0,
+          header: createHeaderColumn('CTR'),
+          size: 70,
+          cell: ({ row }) =>
+            row.original.gsc ? (
+              <span className="font-mono text-sm tabular-nums">
+                {(row.original.gsc.ctr * 100).toFixed(1)}%
+              </span>
+            ) : (
+              <span className="text-muted-foreground">—</span>
+            ),
+        },
+        {
+          id: 'gsc_clicks',
+          accessorFn: (row) => row.gsc?.clicks ?? 0,
+          header: createHeaderColumn('Clicks'),
+          size: 80,
+          cell: ({ row }) =>
+            row.original.gsc ? (
+              <span className="font-mono text-sm tabular-nums">
+                {number.short(row.original.gsc.clicks)}
+              </span>
+            ) : (
+              <span className="text-muted-foreground">—</span>
+            ),
+        }
+      );
+    }
+
+    return cols;
+  }, [isGscConnected, number, apiUrl, projectId, previousMap]);
+}

apps/start/src/components/pages/table/index.tsx

@@ -0,0 +1,143 @@
+import { OverviewInterval } from '@/components/overview/overview-interval';
+import { OverviewRange } from '@/components/overview/overview-range';
+import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
+import { DataTable } from '@/components/ui/data-table/data-table';
+import {
+  AnimatedSearchInput,
+  DataTableToolbarContainer,
+} from '@/components/ui/data-table/data-table-toolbar';
+import { DataTableViewOptions } from '@/components/ui/data-table/data-table-view-options';
+import { useTable } from '@/components/ui/data-table/use-table';
+import { useSearchQueryState } from '@/hooks/use-search-query-state';
+import { useTRPC } from '@/integrations/trpc/react';
+import { pushModal } from '@/modals';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { type PageRow, useColumns } from './columns';
+
+interface PagesTableProps {
+  projectId: string;
+}
+
+export function PagesTable({ projectId }: PagesTableProps) {
+  const trpc = useTRPC();
+  const { range, interval, startDate, endDate } = useOverviewOptions();
+  const { debouncedSearch, setSearch, search } = useSearchQueryState();
+
+  const pagesQuery = useQuery(
+    trpc.event.pages.queryOptions(
+      {
+        projectId,
+        search: debouncedSearch ?? undefined,
+        range,
+        interval,
+      },
+      { placeholderData: keepPreviousData },
+    ),
+  );
+
+  const connectionQuery = useQuery(
+    trpc.gsc.getConnection.queryOptions({ projectId }),
+  );
+
+  const isGscConnected = !!(connectionQuery.data?.siteUrl);
+
+  const gscPagesQuery = useQuery(
+    trpc.gsc.getPages.queryOptions(
+      {
+        projectId,
+        range,
+        startDate: startDate ?? undefined,
+        endDate: endDate ?? undefined,
+        limit: 10_000,
+      },
+      { enabled: isGscConnected },
+    ),
+  );
+
+  const previousPagesQuery = useQuery(
+    trpc.event.previousPages.queryOptions(
+      { projectId, range, interval },
+      { placeholderData: keepPreviousData },
+    ),
+  );
+
+  const previousMap = useMemo(() => {
+    const map = new Map<string, number>();
+    for (const p of previousPagesQuery.data ?? []) {
+      map.set(p.origin + p.path, p.sessions);
+    }
+    return map;
+  }, [previousPagesQuery.data]);
+
+  const gscMap = useMemo(() => {
+    const map = new Map<
+      string,
+      { clicks: number; impressions: number; ctr: number; position: number }
+    >();
+    for (const row of gscPagesQuery.data ?? []) {
+      map.set(row.page, {
+        clicks: row.clicks,
+        impressions: row.impressions,
+        ctr: row.ctr,
+        position: row.position,
+      });
+    }
+    return map;
+  }, [gscPagesQuery.data]);
+
+  const rawData: PageRow[] = useMemo(() => {
+    return (pagesQuery.data ?? []).map((p) => ({
+      ...p,
+      gsc: gscMap.get(p.origin + p.path),
+    }));
+  }, [pagesQuery.data, gscMap]);
+
+  const columns = useColumns({ projectId, isGscConnected, previousMap });
+
+  const { table } = useTable({
+    columns,
+    data: rawData,
+    loading: pagesQuery.isLoading,
+    pageSize: 50,
+    name: 'pages',
+  });
+
+  return (
+    <>
+      <DataTableToolbarContainer>
+        <AnimatedSearchInput
+          placeholder="Search pages"
+          value={search ?? ''}
+          onChange={setSearch}
+        />
+        <div className="flex items-center gap-2">
+          <OverviewRange />
+          <OverviewInterval />
+          <DataTableViewOptions table={table} />
+        </div>
+      </DataTableToolbarContainer>
+      <DataTable
+        table={table}
+        loading={pagesQuery.isLoading}
+        empty={{
+          title: 'No pages',
+          description: debouncedSearch
+            ? `No pages found matching "${debouncedSearch}"`
+            : 'Integrate our web SDK to your site to get pages here.',
+        }}
+        onRowClick={(row) => {
+          if (!isGscConnected) {
+            return;
+          }
+          const page = row.original;
+          pushModal('PageDetails', {
+            type: 'page',
+            projectId,
+            value: page.origin + page.path,
+          });
+        }}
+      />
+    </>
+  );
+}

apps/start/src/components/profiles/most-events.tsx

@@ -1,4 +1,5 @@
-import { Widget } from '@/components/widget';
+import { ZapIcon } from 'lucide-react';
+import { Widget, WidgetEmptyState } from '@/components/widget';
 import { WidgetHead, WidgetTitle } from '../overview/overview-widget';
 
 type Props = {
@@ -6,28 +7,32 @@ type Props = {
 };
 
 export const MostEvents = ({ data }: Props) => {
-  const max = Math.max(...data.map((item) => item.count));
+  const max = data.length > 0 ? Math.max(...data.map((item) => item.count)) : 0;
   return (
     <Widget className="w-full">
       <WidgetHead>
         <WidgetTitle>Popular events</WidgetTitle>
       </WidgetHead>
-      <div className="flex flex-col gap-1 p-1">
-        {data.slice(0, 5).map((item) => (
-          <div key={item.name} className="relative px-3 py-2">
-            <div
-              className="absolute bottom-0 left-0 top-0 rounded bg-def-200"
-              style={{
-                width: `${(item.count / max) * 100}%`,
-              }}
-            />
-            <div className="relative flex justify-between ">
-              <div>{item.name}</div>
-              <div>{item.count}</div>
+      {data.length === 0 ? (
+        <WidgetEmptyState icon={ZapIcon} text="No events yet" />
+      ) : (
+        <div className="flex flex-col gap-1 p-1">
+          {data.slice(0, 5).map((item) => (
+            <div key={item.name} className="relative px-3 py-2">
+              <div
+                className="absolute bottom-0 left-0 top-0 rounded bg-def-200"
+                style={{
+                  width: `${(item.count / max) * 100}%`,
+                }}
+              />
+              <div className="relative flex justify-between ">
+                <div>{item.name}</div>
+                <div>{item.count}</div>
+              </div>
             </div>
-          </div>
-        ))}
-      </div>
+          ))}
+        </div>
+      )}
     </Widget>
   );
 };

apps/start/src/components/profiles/popular-routes.tsx

@@ -1,4 +1,5 @@
-import { Widget } from '@/components/widget';
+import { RouteIcon } from 'lucide-react';
+import { Widget, WidgetEmptyState } from '@/components/widget';
 import { WidgetHead, WidgetTitle } from '../overview/overview-widget';
 
 type Props = {
@@ -6,28 +7,32 @@ type Props = {
 };
 
 export const PopularRoutes = ({ data }: Props) => {
-  const max = Math.max(...data.map((item) => item.count));
+  const max = data.length > 0 ? Math.max(...data.map((item) => item.count)) : 0;
   return (
     <Widget className="w-full">
       <WidgetHead>
         <WidgetTitle>Most visted pages</WidgetTitle>
       </WidgetHead>
-      <div className="flex flex-col gap-1 p-1">
-        {data.slice(0, 5).map((item) => (
-          <div key={item.path} className="relative px-3 py-2">
-            <div
-              className="absolute bottom-0 left-0 top-0 rounded bg-def-200"
-              style={{
-                width: `${(item.count / max) * 100}%`,
-              }}
-            />
-            <div className="relative flex justify-between ">
-              <div>{item.path}</div>
-              <div>{item.count}</div>
+      {data.length === 0 ? (
+        <WidgetEmptyState icon={RouteIcon} text="No pages visited yet" />
+      ) : (
+        <div className="flex flex-col gap-1 p-1">
+          {data.slice(0, 5).map((item) => (
+            <div key={item.path} className="relative px-3 py-2">
+              <div
+                className="absolute bottom-0 left-0 top-0 rounded bg-def-200"
+                style={{
+                  width: `${(item.count / max) * 100}%`,
+                }}
+              />
+              <div className="relative flex justify-between ">
+                <div>{item.path}</div>
+                <div>{item.count}</div>
+              </div>
             </div>
-          </div>
-        ))}
-      </div>
+          ))}
+        </div>
+      )}
     </Widget>
   );
 };

apps/start/src/components/profiles/profile-groups.tsx

@@ -0,0 +1,43 @@
+import { ProjectLink } from '@/components/links';
+import { useTRPC } from '@/integrations/trpc/react';
+import { useQuery } from '@tanstack/react-query';
+import { UsersIcon } from 'lucide-react';
+
+interface Props {
+  profileId: string;
+  projectId: string;
+  groups: string[];
+}
+
+export const ProfileGroups = ({ projectId, groups }: Props) => {
+  const trpc = useTRPC();
+  const query = useQuery(
+    trpc.group.listByIds.queryOptions({
+      projectId,
+      ids: groups,
+    }),
+  );
+
+  if (groups.length === 0 || !query.data?.length) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <span className="flex shrink-0 items-center gap-1.5 text-muted-foreground text-xs">
+        <UsersIcon className="size-3.5" />
+        Groups
+      </span>
+      {query.data.map((group) => (
+        <ProjectLink
+          key={group.id}
+          href={`/groups/${encodeURIComponent(group.id)}`}
+          className="inline-flex items-center gap-1.5 rounded-full border bg-muted/50 px-2.5 py-1 text-xs transition-colors hover:bg-muted"
+        >
+          <span className="font-medium">{group.name}</span>
+          <span className="text-muted-foreground">{group.type}</span>
+        </ProjectLink>
+      ))}
+    </div>
+  );
+};

apps/start/src/components/profiles/table/columns.tsx

@@ -1,15 +1,10 @@
+import type { IServiceProfile } from '@openpanel/db';
+import type { ColumnDef } from '@tanstack/react-table';
+import { ProfileAvatar } from '../profile-avatar';
+import { ColumnCreatedAt } from '@/components/column-created-at';
 import { ProjectLink } from '@/components/links';
 import { SerieIcon } from '@/components/report-chart/common/serie-icon';
-import { Tooltiper } from '@/components/ui/tooltip';
-import { formatDateTime, formatTime } from '@/utils/date';
 import { getProfileName } from '@/utils/getters';
-import type { ColumnDef } from '@tanstack/react-table';
-import { isToday } from 'date-fns';
-
-import type { IServiceProfile } from '@openpanel/db';
-
-import { ColumnCreatedAt } from '@/components/column-created-at';
-import { ProfileAvatar } from '../profile-avatar';
 
 export function useColumns(type: 'profiles' | 'power-users') {
   const columns: ColumnDef<IServiceProfile>[] = [
@@ -20,8 +15,8 @@ export function useColumns(type: 'profiles' | 'power-users') {
         const profile = row.original;
         return (
           <ProjectLink
-            href={`/profiles/${encodeURIComponent(profile.id)}`}
             className="flex items-center gap-2 font-medium"
+            href={`/profiles/${encodeURIComponent(profile.id)}`}
             title={getProfileName(profile, false)}
           >
             <ProfileAvatar size="sm" {...profile} />
@@ -100,13 +95,40 @@ export function useColumns(type: 'profiles' | 'power-users') {
     },
     {
       accessorKey: 'createdAt',
-      header: 'Last seen',
+      header: 'First seen',
       size: ColumnCreatedAt.size,
       cell: ({ row }) => {
         const item = row.original;
         return <ColumnCreatedAt>{item.createdAt}</ColumnCreatedAt>;
       },
     },
+    {
+      accessorKey: 'groups',
+      header: 'Groups',
+      size: 200,
+      meta: {
+        hidden: true,
+      },
+      cell({ row }) {
+        const { groups } = row.original;
+        if (!groups?.length) {
+          return null;
+        }
+        return (
+          <div className="flex flex-wrap gap-1">
+            {groups.map((g) => (
+              <ProjectLink
+                className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs hover:underline"
+                href={`/groups/${encodeURIComponent(g)}`}
+                key={g}
+              >
+                {g}
+              </ProjectLink>
+            ))}
+          </div>
+        );
+      },
+    },
   ];
 
   if (type === 'power-users') {

apps/start/src/components/profiles/table/index.tsx

@@ -1,22 +1,24 @@
+import type { IServiceProfile } from '@openpanel/db';
 import type { UseQueryResult } from '@tanstack/react-query';
-
-import { useDataTableColumnVisibility } from '@/components/ui/data-table/data-table-hooks';
-import type { RouterOutputs } from '@/trpc/client';
+import { useNavigate } from '@tanstack/react-router';
+import type { PaginationState, Table, Updater } from '@tanstack/react-table';
+import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { memo, useCallback } from 'react';
 import { useColumns } from './columns';
-
 import { DataTable } from '@/components/ui/data-table/data-table';
-import { useDataTablePagination } from '@/components/ui/data-table/data-table-hooks';
+import {
+  useDataTableColumnVisibility,
+  useDataTablePagination,
+} from '@/components/ui/data-table/data-table-hooks';
 import {
   AnimatedSearchInput,
   DataTableToolbarContainer,
 } from '@/components/ui/data-table/data-table-toolbar';
 import { DataTableViewOptions } from '@/components/ui/data-table/data-table-view-options';
+import { useAppParams } from '@/hooks/use-app-params';
 import { useSearchQueryState } from '@/hooks/use-search-query-state';
+import type { RouterOutputs } from '@/trpc/client';
 import { arePropsEqual } from '@/utils/are-props-equal';
-import type { IServiceProfile } from '@openpanel/db';
-import type { PaginationState, Table, Updater } from '@tanstack/react-table';
-import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
-import { memo } from 'react';
 
 const PAGE_SIZE = 50;
 
@@ -32,6 +34,22 @@ export const ProfilesTable = memo(
   ({ type, query, pageSize = PAGE_SIZE }: Props) => {
     const { data, isLoading } = query;
     const columns = useColumns(type);
+    const navigate = useNavigate();
+    const { organizationId, projectId } = useAppParams();
+
+    const handleRowClick = useCallback(
+      (row: any) => {
+        navigate({
+          to: '/$organizationId/$projectId/profiles/$profileId',
+          params: {
+            organizationId,
+            projectId,
+            profileId: encodeURIComponent(row.original.id),
+          },
+        });
+      },
+      [navigate, organizationId, projectId]
+    );
 
     const { setPage, state: pagination } = useDataTablePagination(pageSize);
     const {
@@ -50,7 +68,7 @@ export const ProfilesTable = memo(
       columns,
       rowCount: data?.meta.count,
       pageCount: Math.ceil(
-        (data?.meta.count || 0) / (pagination.pageSize || 1),
+        (data?.meta.count || 0) / (pagination.pageSize || 1)
       ),
       filterFns: {
         isWithinRange: () => true,
@@ -76,17 +94,18 @@ export const ProfilesTable = memo(
       <>
         <ProfileTableToolbar table={table} />
         <DataTable
-          table={table}
-          loading={isLoading}
           empty={{
             title: 'No profiles',
             description: "Looks like you haven't identified any profiles yet.",
           }}
+          loading={isLoading}
+          onRowClick={handleRowClick}
+          table={table}
         />
       </>
     );
   },
-  arePropsEqual(['query.isLoading', 'query.data', 'type', 'pageSize']),
+  arePropsEqual(['query.isLoading', 'query.data', 'type', 'pageSize'])
 );
 
 function ProfileTableToolbar({ table }: { table: Table<IServiceProfile> }) {
@@ -94,9 +113,9 @@ function ProfileTableToolbar({ table }: { table: Table<IServiceProfile> }) {
   return (
     <DataTableToolbarContainer>
       <AnimatedSearchInput
+        onChange={setSearch}
         placeholder="Search profiles"
         value={search}
-        onChange={setSearch}
       />
       <DataTableViewOptions table={table} />
     </DataTableToolbarContainer>

apps/start/src/components/realtime/map/coordinates.ts

@@ -1,13 +1,133 @@
-export type Coordinate = {
+export interface Coordinate {
   lat: number;
   long: number;
   city?: string;
   country?: string;
-};
+  count?: number;
+}
+
+export type ClusterDetailLevel = 'country' | 'city' | 'coordinate';
+
+export interface CoordinateCluster {
+  center: Coordinate;
+  count: number;
+  members: Coordinate[];
+  location: {
+    city?: string;
+    country?: string;
+  };
+}
+
+const COUNTRY_GROUP_MAX_ZOOM = 2;
+const CITY_GROUP_MAX_ZOOM = 4.5;
+
+function normalizeLocationValue(value?: string) {
+  const trimmed = value?.trim();
+  return trimmed ? trimmed : undefined;
+}
+
+export function getClusterDetailLevel(zoom: number): ClusterDetailLevel {
+  if (zoom <= COUNTRY_GROUP_MAX_ZOOM) {
+    return 'country';
+  }
+
+  if (zoom <= CITY_GROUP_MAX_ZOOM) {
+    return 'city';
+  }
+
+  return 'coordinate';
+}
+
+function getLocationSummary(members: Coordinate[]) {
+  const cityCounts = new Map<string, number>();
+  const countryCounts = new Map<string, number>();
+
+  for (const member of members) {
+    const city = normalizeLocationValue(member.city);
+    const country = normalizeLocationValue(member.country);
+    const weight = member.count ?? 1;
+
+    if (city) {
+      cityCounts.set(city, (cityCounts.get(city) ?? 0) + weight);
+    }
+
+    if (country) {
+      countryCounts.set(country, (countryCounts.get(country) ?? 0) + weight);
+    }
+  }
+
+  const getTopLocation = (counts: Map<string, number>) =>
+    [...counts.entries()].sort((a, b) => b[1] - a[1])[0]?.[0];
+
+  return {
+    city: getTopLocation(cityCounts),
+    country: getTopLocation(countryCounts),
+  };
+}
+
+function getAggregationKey(
+  member: Coordinate,
+  detailLevel: Exclude<ClusterDetailLevel, 'coordinate'>
+) {
+  const city = normalizeLocationValue(member.city);
+  const country = normalizeLocationValue(member.country);
+
+  if (detailLevel === 'country') {
+    return country ?? city;
+  }
+
+  if (country && city) {
+    return `${country}::${city}`;
+  }
+
+  return city ?? country;
+}
+
+function regroupClustersByDetail(
+  clusters: CoordinateCluster[],
+  detailLevel: Exclude<ClusterDetailLevel, 'coordinate'>
+): CoordinateCluster[] {
+  const grouped = new Map<string, Coordinate[]>();
+  const ungrouped: CoordinateCluster[] = [];
+
+  for (const cluster of clusters) {
+    for (const member of cluster.members) {
+      const key = getAggregationKey(member, detailLevel);
+
+      if (!key) {
+        ungrouped.push({
+          members: [member],
+          center: calculateClusterCenter([member]),
+          count: member.count ?? 1,
+          location: {
+            city: normalizeLocationValue(member.city),
+            country: normalizeLocationValue(member.country),
+          },
+        });
+        continue;
+      }
+
+      grouped.set(key, [...(grouped.get(key) ?? []), member]);
+    }
+  }
+
+  const regrouped = [...grouped.values()].map((members) => {
+    const location = getLocationSummary(members);
+
+    return {
+      members,
+      center: calculateClusterCenter(members),
+      count: members.reduce((sum, member) => sum + (member.count ?? 1), 0),
+      location,
+    };
+  });
+
+  return [...regrouped, ...ungrouped];
+}
 
 export function haversineDistance(
   coord1: Coordinate,
-  coord2: Coordinate,
+  coord2: Coordinate
 ): number {
   const R = 6371; // Earth's radius in kilometers
   const lat1Rad = coord1.lat * (Math.PI / 180);
@@ -27,7 +147,7 @@ export function haversineDistance(
 }
 
 export function findFarthestPoints(
-  coordinates: Coordinate[],
+  coordinates: Coordinate[]
 ): [Coordinate, Coordinate] {
   if (coordinates.length < 2) {
     throw new Error('At least two coordinates are required');
@@ -58,14 +178,17 @@ export function getAverageCenter(coordinates: Coordinate[]): Coordinate {
 
   let sumLong = 0;
   let sumLat = 0;
+  let totalWeight = 0;
 
   for (const coord of coordinates) {
-    sumLong += coord.long;
-    sumLat += coord.lat;
+    const weight = coord.count ?? 1;
+    sumLong += coord.long * weight;
+    sumLat += coord.lat * weight;
+    totalWeight += weight;
   }
 
-  const avgLat = sumLat / coordinates.length;
-  const avgLong = sumLong / coordinates.length;
+  const avgLat = sumLat / totalWeight;
+  const avgLong = sumLong / totalWeight;
 
   return { long: avgLong, lat: avgLat };
 }
@@ -82,15 +205,17 @@ function cross(o: Coordinate, a: Coordinate, b: Coordinate): number {
 
 // convex hull
 export function getOuterMarkers(coordinates: Coordinate[]): Coordinate[] {
-  const sorted = coordinates.sort(sortCoordinates);
+  const sorted = [...coordinates].sort(sortCoordinates);
 
-  if (sorted.length <= 3) return sorted;
+  if (sorted.length <= 3) {
+    return sorted;
+  }
 
   const lower: Coordinate[] = [];
   for (const coord of sorted) {
     while (
       lower.length >= 2 &&
-      cross(lower[lower.length - 2]!, lower[lower.length - 1]!, coord) <= 0
+      cross(lower.at(-2)!, lower.at(-1)!, coord) <= 0
     ) {
       lower.pop();
     }
@@ -101,7 +226,7 @@ export function getOuterMarkers(coordinates: Coordinate[]): Coordinate[] {
   for (let i = coordinates.length - 1; i >= 0; i--) {
     while (
       upper.length >= 2 &&
-      cross(upper[upper.length - 2]!, upper[upper.length - 1]!, sorted[i]!) <= 0
+      cross(upper.at(-2)!, upper.at(-1)!, sorted[i]!) <= 0
     ) {
       upper.pop();
     }
@@ -133,7 +258,7 @@ export function calculateCentroid(polygon: Coordinate[]): Coordinate {
     centroidLat += (y0 + y1) * a;
   }
 
-  area = area / 2;
+  area /= 2;
   if (area === 0) {
     // This should not happen for a proper convex hull
     throw new Error('Area of the polygon is zero, check the coordinates.');
@@ -146,7 +271,7 @@ export function calculateCentroid(polygon: Coordinate[]): Coordinate {
 }
 
 export function calculateGeographicMidpoint(
-  coordinate: Coordinate[],
+  coordinate: Coordinate[]
 ): Coordinate {
   let minLat = Number.POSITIVE_INFINITY;
   let maxLat = Number.NEGATIVE_INFINITY;
@@ -154,10 +279,18 @@ export function calculateGeographicMidpoint(
   let maxLong = Number.NEGATIVE_INFINITY;
 
   for (const { lat, long } of coordinate) {
-    if (lat < minLat) minLat = lat;
-    if (lat > maxLat) maxLat = lat;
-    if (long < minLong) minLong = long;
-    if (long > maxLong) maxLong = long;
+    if (lat < minLat) {
+      minLat = lat;
+    }
+    if (lat > maxLat) {
+      maxLat = lat;
+    }
+    if (long < minLong) {
+      minLong = long;
+    }
+    if (long > maxLong) {
+      maxLong = long;
+    }
   }
 
   // Handling the wrap around the international date line
@@ -191,9 +324,10 @@ export function clusterCoordinates(
         maxLong: number;
       };
     };
-  } = {},
+  } = {}
 ) {
   const { zoom = 1, adaptiveRadius = true, viewport } = options;
+  const detailLevel = getClusterDetailLevel(zoom);
 
   // Calculate adaptive radius based on zoom level and coordinate density
   let adjustedRadius = radius;
@@ -214,7 +348,7 @@ export function clusterCoordinates(
           coord.lat >= viewport.bounds.minLat &&
           coord.lat <= viewport.bounds.maxLat &&
           coord.long >= viewport.bounds.minLong &&
-          coord.long <= viewport.bounds.maxLong,
+          coord.long <= viewport.bounds.maxLong
       );
 
       if (viewportCoords.length > 0) {
@@ -227,7 +361,7 @@ export function clusterCoordinates(
         // Adjust radius based on density - higher density = larger radius for more aggressive clustering
         const densityFactor = Math.max(
           0.5,
-          Math.min(5, Math.sqrt(density * 1000) + 1),
+          Math.min(5, Math.sqrt(density * 1000) + 1)
         );
         adjustedRadius *= densityFactor;
       }
@@ -241,44 +375,44 @@ export function clusterCoordinates(
   // TODO: Re-enable optimized clustering after thorough testing
   const result = basicClusterCoordinates(coordinates, adjustedRadius);
 
-  // Debug: Log clustering results
-  if (coordinates.length > 0) {
-    console.log(
-      `Clustering ${coordinates.length} coordinates with radius ${adjustedRadius.toFixed(2)}km resulted in ${result.length} clusters`,
-    );
+  if (detailLevel === 'coordinate') {
+    return result;
   }
 
-  return result;
+  return regroupClustersByDetail(result, detailLevel);
 }
 
 // Aggressive clustering algorithm with iterative expansion
 function basicClusterCoordinates(coordinates: Coordinate[], radius: number) {
-  if (coordinates.length === 0) return [];
+  if (coordinates.length === 0) {
+    return [];
+  }
 
-  const clusters: {
-    center: Coordinate;
-    count: number;
-    members: Coordinate[];
-  }[] = [];
+  const clusters: CoordinateCluster[] = [];
   const visited = new Set<number>();
 
   // Sort coordinates by density (coordinates near others first)
   const coordinatesWithDensity = coordinates
     .map((coord, idx) => {
       const nearbyCount = coordinates.filter(
-        (other) => haversineDistance(coord, other) <= radius * 0.5,
+        (other) => haversineDistance(coord, other) <= radius * 0.5
       ).length;
       return { ...coord, originalIdx: idx, nearbyCount };
     })
     .sort((a, b) => b.nearbyCount - a.nearbyCount);
 
   coordinatesWithDensity.forEach(
-    ({ lat, long, city, country, originalIdx }) => {
+    ({ lat, long, city, country, count, originalIdx }) => {
       if (!visited.has(originalIdx)) {
+        const initialCount = count ?? 1;
         const cluster = {
-          members: [{ lat, long, city, country }],
+          members: [{ lat, long, city, country, count: initialCount }],
           center: { lat, long },
-          count: 1,
+          count: initialCount,
+          location: {
+            city: normalizeLocationValue(city),
+            country: normalizeLocationValue(country),
+          },
         };
 
         // Mark the initial coordinate as visited
@@ -297,6 +431,7 @@ function basicClusterCoordinates(coordinates: Coordinate[], radius: number) {
                 long: otherLong,
                 city: otherCity,
                 country: otherCountry,
+                count: otherCount,
                 originalIdx: otherIdx,
               }) => {
                 if (!visited.has(otherIdx)) {
@@ -306,28 +441,31 @@ function basicClusterCoordinates(coordinates: Coordinate[], radius: number) {
                   });
 
                   if (distance <= radius) {
+                    const memberCount = otherCount ?? 1;
                     cluster.members.push({
                       lat: otherLat,
                       long: otherLong,
                       city: otherCity,
                       country: otherCountry,
+                      count: memberCount,
                     });
                     visited.add(otherIdx);
-                    cluster.count++;
+                    cluster.count += memberCount;
                     expandedInLastIteration = true;
                   }
                 }
-              },
+              }
             );
           }
         }
 
         // Calculate the proper center for the cluster
         cluster.center = calculateClusterCenter(cluster.members);
+        cluster.location = getLocationSummary(cluster.members);
 
         clusters.push(cluster);
       }
-    },
+    }
   );
 
   return clusters;
@@ -339,9 +477,12 @@ function basicClusterCoordinates(coordinates: Coordinate[], radius: number) {
 // Utility function to get clustering statistics for debugging
 export function getClusteringStats(
   coordinates: Coordinate[],
-  clusters: ReturnType<typeof clusterCoordinates>,
+  clusters: ReturnType<typeof clusterCoordinates>
 ) {
-  const totalPoints = coordinates.length;
+  const totalPoints = coordinates.reduce(
+    (sum, coordinate) => sum + (coordinate.count ?? 1),
+    0
+  );
   const totalClusters = clusters.length;
   const singletonClusters = clusters.filter((c) => c.count === 1).length;
   const avgClusterSize = totalPoints > 0 ? totalPoints / totalClusters : 0;
@@ -371,26 +512,33 @@ function calculateClusterCenter(members: Coordinate[]): Coordinate {
 
   let avgLat = 0;
   let avgLong = 0;
+  let totalWeight = 0;
 
   if (maxLong - minLong > 180) {
     // Handle dateline crossing
     let adjustedLongSum = 0;
     for (const member of members) {
-      avgLat += member.lat;
+      const weight = member.count ?? 1;
+      avgLat += member.lat * weight;
       const adjustedLong = member.long < 0 ? member.long + 360 : member.long;
-      adjustedLongSum += adjustedLong;
+      adjustedLongSum += adjustedLong * weight;
+      totalWeight += weight;
+    }
+    avgLat /= totalWeight;
+    avgLong = (adjustedLongSum / totalWeight) % 360;
+    if (avgLong > 180) {
+      avgLong -= 360;
     }
-    avgLat /= members.length;
-    avgLong = (adjustedLongSum / members.length) % 360;
-    if (avgLong > 180) avgLong -= 360;
   } else {
     // Normal case - no dateline crossing
     for (const member of members) {
-      avgLat += member.lat;
-      avgLong += member.long;
+      const weight = member.count ?? 1;
+      avgLat += member.lat * weight;
+      avgLong += member.long * weight;
+      totalWeight += weight;
     }
-    avgLat /= members.length;
-    avgLong /= members.length;
+    avgLat /= totalWeight;
+    avgLong /= totalWeight;
   }
 
   return { lat: avgLat, long: avgLong };

apps/start/src/components/realtime/map/index.tsx

@@ -1,350 +1,20 @@
-import { Tooltiper } from '@/components/ui/tooltip';
-import { bind } from 'bind-event-listener';
-import {
-  Fragment,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import {
-  ComposableMap,
-  Geographies,
-  Geography,
-  Marker,
-  ZoomableGroup,
-} from 'react-simple-maps';
+import { useRef } from 'react';
+import { MapBadgeDetails } from './map-badge-details';
+import { MapCanvas } from './map-canvas';
+import type { RealtimeMapProps } from './map-types';
 
-import { SerieIcon } from '@/components/report-chart/common/serie-icon';
-import { useTheme } from '@/hooks/use-theme';
-import type { Coordinate } from './coordinates';
-
-// Interpolate function similar to React Native Reanimated
-const interpolate = (
-  value: number,
-  inputRange: [number, number],
-  outputRange: [number, number],
-  extrapolate?: 'clamp' | 'extend' | 'identity',
-): number => {
-  const [inputMin, inputMax] = inputRange;
-  const [outputMin, outputMax] = outputRange;
-
-  // Handle edge cases
-  if (inputMin === inputMax) return outputMin;
-
-  const progress = (value - inputMin) / (inputMax - inputMin);
-
-  // Apply extrapolation
-  if (extrapolate === 'clamp') {
-    const clampedProgress = Math.max(0, Math.min(1, progress));
-    return outputMin + clampedProgress * (outputMax - outputMin);
-  }
-
-  return outputMin + progress * (outputMax - outputMin);
-};
-import {
-  calculateGeographicMidpoint,
-  clusterCoordinates,
-  getAverageCenter,
-  getOuterMarkers,
-} from './coordinates';
-import { GEO_MAP_URL, determineZoom, getBoundingBox } from './map.helpers';
-import { calculateMarkerSize } from './markers';
-
-type Props = {
-  markers: Coordinate[];
-  sidebarConfig?: {
-    width: number;
-    position: 'left' | 'right';
-  };
-};
-const Map = ({ markers, sidebarConfig }: Props) => {
-  const showCenterMarker = false;
-  const ref = useRef<HTMLDivElement>(null);
-  const [size, setSize] = useState<{ width: number; height: number } | null>(
-    null,
-  );
-  const [currentZoom, setCurrentZoom] = useState(1);
-  const [debouncedZoom, setDebouncedZoom] = useState(1);
-  const zoomTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-  // Memoize expensive calculations
-  const { hull, center, initialZoom } = useMemo(() => {
-    const hull = getOuterMarkers(markers);
-    const center =
-      hull.length < 2
-        ? getAverageCenter(markers)
-        : calculateGeographicMidpoint(hull);
-
-    // Calculate initial zoom based on markers distribution
-    const boundingBox = getBoundingBox(hull.length > 0 ? hull : markers);
-    const minZoom = 1;
-    const maxZoom = 20;
-
-    const aspectRatio = size ? size.width / size.height : 1;
-    const autoZoom = Math.max(
-      minZoom,
-      Math.min(maxZoom, determineZoom(boundingBox, aspectRatio) * 0.4),
-    );
-
-    // Use calculated zoom if we have markers, otherwise default to 1
-    const initialZoom = markers.length > 0 ? autoZoom : 1;
-
-    return { hull, center, initialZoom };
-  }, [markers, size]);
-
-  // Update current zoom when initial zoom changes (when new markers are loaded)
-  useEffect(() => {
-    setCurrentZoom(initialZoom);
-    setDebouncedZoom(initialZoom);
-  }, [initialZoom]);
-
-  // Debounced zoom update for marker clustering
-  const updateDebouncedZoom = useCallback((newZoom: number) => {
-    if (zoomTimeoutRef.current) {
-      clearTimeout(zoomTimeoutRef.current);
-    }
-
-    zoomTimeoutRef.current = setTimeout(() => {
-      setDebouncedZoom(newZoom);
-    }, 100); // 100ms debounce delay
-  }, []);
-
-  // Cleanup timeout on unmount
-  useEffect(() => {
-    return () => {
-      if (zoomTimeoutRef.current) {
-        clearTimeout(zoomTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  // Memoize center coordinates adjustment for sidebar
-  const { long, lat } = useMemo(() => {
-    let adjustedLong = center.long;
-
-    if (sidebarConfig && size) {
-      // Calculate how much to shift the map to center content in visible area
-      const sidebarOffset =
-        sidebarConfig.position === 'left'
-          ? sidebarConfig.width / 2
-          : -sidebarConfig.width / 2;
-
-      // Convert pixel offset to longitude degrees
-      // This is a rough approximation - degrees per pixel at current zoom
-      const longitudePerPixel = 360 / (size.width * initialZoom);
-      const longitudeOffset = sidebarOffset * longitudePerPixel;
-
-      adjustedLong = center.long - longitudeOffset; // Subtract to shift map right for left sidebar
-    }
-
-    return { long: adjustedLong, lat: center.lat };
-  }, [center.long, center.lat, sidebarConfig, size, initialZoom]);
-
-  const minZoom = 1;
-  const maxZoom = 20;
-
-  useEffect(() => {
-    return bind(window, {
-      type: 'resize',
-      listener() {
-        if (ref.current) {
-          const parentRect = ref.current.parentElement?.getBoundingClientRect();
-          setSize({
-            width: parentRect?.width ?? 0,
-            height: parentRect?.height ?? 0,
-          });
-        }
-      },
-    });
-  }, []);
-
-  useEffect(() => {
-    if (ref.current) {
-      const parentRect = ref.current.parentElement?.getBoundingClientRect();
-      setSize({
-        width: parentRect?.width ?? 0,
-        height: parentRect?.height ?? 0,
-      });
-    }
-  }, []);
-
-  // Dynamic marker size based on zoom level - balanced scaling for new size range
-  const getMarkerSize = useCallback(
-    (baseSize: number) => {
-      // Interpolate the adjustment value from zoom 1 to 20
-      // At zoom 1: adjustThisValue = 1
-      // At zoom 20: adjustThisValue = 0.5
-      const adjustThisValue = interpolate(
-        currentZoom,
-        [1, 20],
-        [1.5, 0.6],
-        'clamp',
-      );
-      const scaleFactor = (1 / Math.sqrt(currentZoom)) * adjustThisValue;
-
-      // Ensure minimum size for visibility, but allow smaller sizes for precision
-      const minSize = baseSize * 0.05;
-      const scaledSize = baseSize * scaleFactor;
-
-      return Math.max(minSize, scaledSize);
-    },
-    [currentZoom],
-  );
-
-  const getBorderWidth = useCallback(() => {
-    const map = {
-      0.1: [15, 20],
-      0.15: [10, 15],
-      0.25: [5, 10],
-      0.5: [0, 5],
-    };
-    const found = Object.entries(map).find(([, value]) => {
-      if (currentZoom >= value[0] && currentZoom <= value[1]) {
-        return true;
-      }
-    });
-    return found ? Number.parseFloat(found[0]) : 0.1;
-  }, [currentZoom]);
-
-  const theme = useTheme();
-
-  // Memoize clustered markers
-  const clusteredMarkers = useMemo(() => {
-    return clusterCoordinates(markers, 150, {
-      zoom: debouncedZoom,
-      adaptiveRadius: true,
-    });
-  }, [markers, debouncedZoom]);
+const Map = ({ projectId, markers, sidebarConfig }: RealtimeMapProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
 
   return (
-    <div ref={ref} className="relative">
-      <div className="bg-gradient-to-t from-def-100 to-transparent h-1/10 absolute bottom-0 left-0 right-0" />
-      {size === null ? (
-        <></>
-      ) : (
-        <>
-          <ComposableMap
-            projection="geoMercator"
-            width={size?.width || 800}
-            height={size?.height || 400}
-          >
-            <ZoomableGroup
-              center={[long, lat]}
-              zoom={initialZoom}
-              minZoom={minZoom}
-              maxZoom={maxZoom}
-              onMove={(event) => {
-                if (currentZoom !== event.zoom) {
-                  setCurrentZoom(event.zoom);
-                  updateDebouncedZoom(event.zoom);
-                }
-              }}
-            >
-              <Geographies geography={GEO_MAP_URL}>
-                {({ geographies }) =>
-                  geographies
-                    .filter((geo) => {
-                      return geo.properties.name !== 'Antarctica';
-                    })
-                    .map((geo) => (
-                      <Geography
-                        key={geo.rsmKey}
-                        geography={geo}
-                        fill={theme.theme === 'dark' ? '#000' : '#f0f0f0'}
-                        stroke={theme.theme === 'dark' ? '#333' : '#999'}
-                        strokeWidth={getBorderWidth()}
-                        pointerEvents={'none'}
-                      />
-                    ))
-                }
-              </Geographies>
-              {showCenterMarker && (
-                <Marker coordinates={[center.long, center.lat]}>
-                  <circle r={getMarkerSize(10)} fill="green" stroke="#fff" />
-                </Marker>
-              )}
-              {clusteredMarkers.map((marker, index) => {
-                const size = getMarkerSize(calculateMarkerSize(marker.count));
-                const coordinates: [number, number] = [
-                  marker.center.long,
-                  marker.center.lat,
-                ];
+    <div className="relative h-full w-full" ref={containerRef}>
+      <MapCanvas
+        markers={markers}
+        projectId={projectId}
+        sidebarConfig={sidebarConfig}
+      />
 
-                return (
-                  <Fragment
-                    key={`cluster-${index}-${marker.center.long}-${marker.center.lat}`}
-                  >
-                    {/* Animated ping effect */}
-                    <Marker coordinates={coordinates}>
-                      <circle
-                        r={size}
-                        fill={theme.theme === 'dark' ? '#3d79ff' : '#2266ec'}
-                        className="animate-ping opacity-20"
-                      />
-                    </Marker>
-                    {/* Main marker with tooltip */}
-                    <Tooltiper
-                      asChild
-                      content={
-                        <div className="flex min-w-[200px] flex-col gap-2">
-                          <h3 className="font-semibold capitalize">
-                            {`${marker.count} visitor${marker.count !== 1 ? 's' : ''}`}
-                          </h3>
-
-                          {marker.members
-                            .slice(0, 5)
-                            .filter((item) => item.country || item.city)
-                            .map((item) => (
-                              <div
-                                className="row items-center gap-2"
-                                key={`${item.long}-${item.lat}`}
-                              >
-                                <SerieIcon
-                                  name={
-                                    item.country || `${item.lat}, ${item.long}`
-                                  }
-                                />
-                                {item.city || 'Unknown'}
-                              </div>
-                            ))}
-                          {marker.members.length > 5 && (
-                            <div className="text-sm text-gray-500">
-                              + {marker.members.length - 5} more
-                            </div>
-                          )}
-                        </div>
-                      }
-                    >
-                      <Marker coordinates={coordinates}>
-                        <circle
-                          r={size}
-                          fill={theme.theme === 'dark' ? '#3d79ff' : '#2266ec'}
-                          fillOpacity={0.8}
-                          stroke="#fff"
-                          strokeWidth={getBorderWidth() * 0.5}
-                        />
-                        <text
-                          x={0}
-                          y={0}
-                          fill="#fff"
-                          textAnchor="middle"
-                          dominantBaseline="middle"
-                          fontSize={size * 0.6}
-                          fontWeight="bold"
-                        >
-                          {marker.count}
-                        </text>
-                      </Marker>
-                    </Tooltiper>
-                  </Fragment>
-                );
-              })}
-            </ZoomableGroup>
-          </ComposableMap>
-        </>
-      )}
+      <MapBadgeDetails containerRef={containerRef} />
     </div>
   );
 };

apps/start/src/components/realtime/map/map-badge-detail-card.tsx

@@ -0,0 +1,267 @@
+import { useQuery } from '@tanstack/react-query';
+import { motion } from 'framer-motion';
+import { XIcon } from 'lucide-react';
+import type { RefObject } from 'react';
+import type { DisplayMarker } from './map-types';
+import {
+  getBadgeOverlayPosition,
+  getProfileDisplayName,
+  getUniqueCoordinateDetailLocations,
+  getUniquePlaceDetailLocations,
+} from './map-utils';
+import { ProjectLink } from '@/components/links';
+import { ProfileAvatar } from '@/components/profiles/profile-avatar';
+import { SerieIcon } from '@/components/report-chart/common/serie-icon';
+import { useTRPC } from '@/integrations/trpc/react';
+
+export function MapBadgeDetailCard({
+  marker,
+  onClose,
+  panelRef,
+  projectId,
+  size,
+}: {
+  marker: DisplayMarker;
+  onClose: () => void;
+  panelRef: RefObject<HTMLDivElement | null>;
+  projectId: string;
+  size: { width: number; height: number };
+}) {
+  const trpc = useTRPC();
+  const input = {
+    detailScope: marker.detailScope,
+    projectId,
+    locations:
+      marker.detailScope === 'coordinate'
+        ? getUniqueCoordinateDetailLocations(marker.members)
+        : getUniquePlaceDetailLocations(marker.members),
+  };
+  const query = useQuery(
+    trpc.realtime.mapBadgeDetails.queryOptions(input, {
+      enabled: input.locations.length > 0,
+    })
+  );
+  const position = getBadgeOverlayPosition(marker, size);
+
+  return (
+    <motion.div
+      animate={{ opacity: 1, y: 0 }}
+      className="absolute z-[90]"
+      initial={{ opacity: 0, y: -8 }}
+      onMouseDown={(event) => event.stopPropagation()}
+      ref={panelRef}
+      style={{
+        left: position.left,
+        top: position.top,
+        width: position.overlayWidth,
+      }}
+      transition={{ duration: 0.18 }}
+    >
+      <motion.div
+        animate={{ opacity: 1 }}
+        className="overflow-hidden rounded-2xl border border-white/10 bg-background shadow-2xl"
+        initial={{ opacity: 0.98 }}
+        transition={{ duration: 0.18 }}
+      >
+        <div className="flex items-start justify-between gap-4 border-b p-4">
+          <div className="min-w-0">
+            <div className="mb-2 text-muted-foreground text-xs uppercase tracking-wide">
+              Realtime cluster
+            </div>
+            <div className="truncate text-lg" style={{ fontWeight: 600 }}>
+              {marker.label}
+            </div>
+            <div
+              className="mt-1 text-muted-foreground"
+              style={{ fontSize: 13 }}
+            >
+              {query.data?.summary.totalSessions ?? marker.count} sessions
+              {query.data?.summary.totalProfiles
+                ? ` • ${query.data.summary.totalProfiles} profiles`
+                : ''}
+            </div>
+          </div>
+          <button
+            className="rounded-md p-1 text-muted-foreground transition-colors hover:text-foreground"
+            onClick={onClose}
+            type="button"
+          >
+            <XIcon className="size-4" />
+          </button>
+        </div>
+
+        <div className="grid grid-cols-3 gap-2 border-b p-4 text-sm">
+          <div className="col gap-1 rounded-lg bg-def-200 p-3">
+            <div className="text-muted-foreground text-xs">Locations</div>
+            <div className="font-semibold">
+              {query.data?.summary.totalLocations ?? marker.members.length}
+            </div>
+          </div>
+          <div className="col gap-1 rounded-lg bg-def-200 p-3">
+            <div className="text-muted-foreground text-xs">Countries</div>
+            <div className="font-semibold">
+              {query.data?.summary.totalCountries ?? 0}
+            </div>
+          </div>
+          <div className="col gap-1 rounded-lg bg-def-200 p-3">
+            <div className="text-muted-foreground text-xs">Cities</div>
+            <div className="font-semibold">
+              {query.data?.summary.totalCities ?? 0}
+            </div>
+          </div>
+        </div>
+
+        <div className="max-h-[420px] space-y-4 overflow-y-auto p-4">
+          {query.isLoading ? (
+            <div className="space-y-3">
+              <div className="h-16 animate-pulse rounded-xl bg-def-200" />
+              <div className="h-24 animate-pulse rounded-xl bg-def-200" />
+              <div className="h-24 animate-pulse rounded-xl bg-def-200" />
+            </div>
+          ) : query.data ? (
+            <>
+              <div className="grid gap-4 md:grid-cols-2">
+                <div className="rounded-xl border p-3">
+                  <div className="mb-2 font-medium text-sm">Top referrers</div>
+                  <div className="space-y-2">
+                    {query.data.topReferrers.length > 0 ? (
+                      query.data.topReferrers.map((item) => (
+                        <div
+                          className="flex items-center justify-between gap-2 text-sm"
+                          key={item.referrerName || '(not set)'}
+                        >
+                          <div className="flex min-w-0 items-center gap-2">
+                            <SerieIcon name={item.referrerName} />
+                            <span className="truncate">
+                              {item.referrerName
+                                .replaceAll('https://', '')
+                                .replaceAll('http://', '')
+                                .replaceAll('www.', '') || '(Not set)'}
+                            </span>
+                          </div>
+                          <span className="font-mono">{item.count}</span>
+                        </div>
+                      ))
+                    ) : (
+                      <div className="text-muted-foreground text-sm">
+                        No data
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                <div className="rounded-xl border p-3">
+                  <div className="mb-2 font-medium text-sm">Top events</div>
+                  <div className="space-y-2">
+                    {query.data.topEvents.length > 0 ? (
+                      query.data.topEvents.map((item) => (
+                        <div
+                          className="flex items-center justify-between gap-2 text-sm"
+                          key={item.name}
+                        >
+                          <span className="truncate">{item.name}</span>
+                          <span className="font-mono">{item.count}</span>
+                        </div>
+                      ))
+                    ) : (
+                      <div className="text-muted-foreground text-sm">
+                        No data
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                <div className="col-span-2 rounded-xl border p-3">
+                  <div className="mb-2 font-medium text-sm">Top paths</div>
+                  <div className="space-y-2">
+                    {query.data.topPaths.length > 0 ? (
+                      query.data.topPaths.map((item) => (
+                        <div
+                          className="flex items-center justify-between gap-2 text-sm"
+                          key={`${item.origin}${item.path}`}
+                        >
+                          <span className="truncate">
+                            {item.path || '(Not set)'}
+                          </span>
+                          <span className="font-mono">{item.count}</span>
+                        </div>
+                      ))
+                    ) : (
+                      <div className="text-muted-foreground text-sm">
+                        No data
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              <div className="rounded-xl border p-3">
+                <div className="mb-3 font-medium text-sm">Recent sessions</div>
+                <div className="space-y-3">
+                  {query.data.recentProfiles.length > 0 ? (
+                    query.data.recentProfiles.map((profile) => {
+                      const href = profile.profileId
+                        ? `/profiles/${encodeURIComponent(profile.profileId)}`
+                        : `/sessions/${encodeURIComponent(profile.sessionId)}`;
+                      return (
+                        <ProjectLink
+                          className="-mx-1 flex items-center gap-3 rounded-lg px-1 py-0.5 transition-colors hover:bg-def-200"
+                          href={href}
+                          key={
+                            profile.profileId
+                              ? `p:${profile.profileId}`
+                              : `s:${profile.sessionId}`
+                          }
+                        >
+                          <ProfileAvatar
+                            avatar={profile.avatar}
+                            email={profile.email}
+                            firstName={profile.firstName}
+                            lastName={profile.lastName}
+                            size="sm"
+                          />
+                          <div className="min-w-0 flex-1">
+                            <div
+                              className="truncate"
+                              style={{ fontSize: 14, fontWeight: 500 }}
+                            >
+                              {getProfileDisplayName(profile)}
+                            </div>
+                            <div
+                              className="truncate text-muted-foreground"
+                              style={{ fontSize: 12 }}
+                            >
+                              {profile.latestPath || profile.latestEvent}
+                            </div>
+                          </div>
+                          <div
+                            className="text-right text-muted-foreground"
+                            style={{ fontSize: 12 }}
+                          >
+                            <div>
+                              {[profile.city, profile.country]
+                                .filter(Boolean)
+                                .join(', ') || 'Unknown'}
+                            </div>
+                          </div>
+                        </ProjectLink>
+                      );
+                    })
+                  ) : (
+                    <div className="text-muted-foreground text-sm">
+                      No recent sessions
+                    </div>
+                  )}
+                </div>
+              </div>
+            </>
+          ) : (
+            <div className="text-muted-foreground text-sm">
+              Could not load badge details.
+            </div>
+          )}
+        </div>
+      </motion.div>
+    </motion.div>
+  );
+}

apps/start/src/components/realtime/map/map-badge-details.tsx

@@ -0,0 +1,92 @@
+import { bind } from 'bind-event-listener';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useEffect, useRef, useState } from 'react';
+import { MapBadgeDetailCard } from './map-badge-detail-card';
+import { closeMapBadgeDetails } from './realtime-map-badge-slice';
+import { useDispatch, useSelector } from '@/redux';
+
+export function MapBadgeDetails({
+  containerRef,
+}: {
+  containerRef: React.RefObject<HTMLDivElement | null>;
+}) {
+  const dispatch = useDispatch();
+  const panelRef = useRef<HTMLDivElement>(null);
+  const { open, marker, projectId } = useSelector(
+    (state) => state.realtimeMapBadge
+  );
+  const [overlaySize, setOverlaySize] = useState<{
+    width: number;
+    height: number;
+  } | null>(null);
+
+  useEffect(() => {
+    if (!(open && marker)) {
+      return;
+    }
+
+    const onPointerDown = (event: MouseEvent) => {
+      if (!panelRef.current?.contains(event.target as Node)) {
+        dispatch(closeMapBadgeDetails());
+      }
+    };
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        dispatch(closeMapBadgeDetails());
+      }
+    };
+
+    window.addEventListener('mousedown', onPointerDown);
+    window.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      window.removeEventListener('mousedown', onPointerDown);
+      window.removeEventListener('keydown', onKeyDown);
+    };
+  }, [dispatch, marker, open]);
+
+  useEffect(() => {
+    const measure = () => {
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (!rect) {
+        return;
+      }
+
+      setOverlaySize({ width: rect.width, height: rect.height });
+    };
+
+    measure();
+
+    return bind(window, {
+      type: 'resize',
+      listener: measure,
+    });
+  }, [containerRef]);
+
+  if (!(open && marker && projectId && overlaySize)) {
+    return null;
+  }
+
+  return (
+    <AnimatePresence>
+      <motion.button
+        animate={{ opacity: 1 }}
+        className="fixed inset-0 z-[80] bg-black/10"
+        exit={{ opacity: 0 }}
+        initial={{ opacity: 0 }}
+        key="map-badge-backdrop"
+        onClick={() => dispatch(closeMapBadgeDetails())}
+        type="button"
+      />
+      <MapBadgeDetailCard
+        key="map-badge-panel"
+        marker={marker}
+        onClose={() => dispatch(closeMapBadgeDetails())}
+        panelRef={panelRef}
+        projectId={projectId}
+        size={overlaySize}
+      />
+    </AnimatePresence>
+  );
+}

apps/start/src/components/realtime/map/map-canvas.tsx

@@ -0,0 +1,314 @@
+import { bind } from 'bind-event-listener';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  ComposableMap,
+  Geographies,
+  Geography,
+  Marker,
+  ZoomableGroup,
+} from 'react-simple-maps';
+import {
+  calculateGeographicMidpoint,
+  clusterCoordinates,
+  getAverageCenter,
+  getOuterMarkers,
+} from './coordinates';
+import { determineZoom, GEO_MAP_URL, getBoundingBox } from './map.helpers';
+import { createDisplayMarkers } from './map-display-markers';
+import { MapMarkerPill } from './map-marker-pill';
+import type {
+  DisplayMarkerCache,
+  GeographyFeature,
+  MapCanvasProps,
+  MapProjection,
+  ZoomMoveEndPosition,
+  ZoomMovePosition,
+} from './map-types';
+import {
+  ANCHOR_R,
+  isValidCoordinate,
+  PILL_GAP,
+  PILL_H,
+  PILL_W,
+} from './map-utils';
+import {
+  closeMapBadgeDetails,
+  openMapBadgeDetails,
+} from './realtime-map-badge-slice';
+import { useTheme } from '@/hooks/use-theme';
+import { useDispatch } from '@/redux';
+
+export const MapCanvas = memo(function MapCanvas({
+  projectId,
+  markers,
+  sidebarConfig,
+}: MapCanvasProps) {
+  const dispatch = useDispatch();
+  const ref = useRef<HTMLDivElement>(null);
+  const [size, setSize] = useState<{ width: number; height: number } | null>(
+    null
+  );
+  const [currentZoom, setCurrentZoom] = useState(1);
+  const [debouncedZoom, setDebouncedZoom] = useState(1);
+  const [viewCenter, setViewCenter] = useState<[number, number]>([0, 20]);
+  const zoomTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const displayMarkersCacheRef = useRef<DisplayMarkerCache>({
+    markers: [],
+    projection: null,
+    viewportCenter: [0, 20],
+    zoom: 1,
+    size: null,
+    result: [],
+  });
+
+  const { center, initialZoom } = useMemo(() => {
+    const hull = getOuterMarkers(markers);
+    const center =
+      hull.length < 2
+        ? getAverageCenter(markers)
+        : calculateGeographicMidpoint(hull);
+
+    const boundingBox = getBoundingBox(hull.length > 0 ? hull : markers);
+    const aspectRatio = size ? size.width / size.height : 1;
+    const autoZoom = Math.max(
+      1,
+      Math.min(20, determineZoom(boundingBox, aspectRatio) * 0.4)
+    );
+    const initialZoom = markers.length > 0 ? autoZoom : 1;
+
+    return { center, initialZoom };
+  }, [markers, size]);
+
+  const updateDebouncedZoom = useCallback((newZoom: number) => {
+    if (zoomTimeoutRef.current) {
+      clearTimeout(zoomTimeoutRef.current);
+    }
+    zoomTimeoutRef.current = setTimeout(() => {
+      setDebouncedZoom(newZoom);
+    }, 100);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (zoomTimeoutRef.current) {
+        clearTimeout(zoomTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const { long, lat } = useMemo(() => {
+    let adjustedLong = center.long;
+    if (sidebarConfig && size) {
+      const sidebarOffset =
+        sidebarConfig.position === 'left'
+          ? sidebarConfig.width / 2
+          : -sidebarConfig.width / 2;
+      const longitudePerPixel = 360 / (size.width * initialZoom);
+      const longitudeOffset = sidebarOffset * longitudePerPixel;
+      adjustedLong = center.long - longitudeOffset;
+    }
+    return { long: adjustedLong, lat: center.lat };
+  }, [center.long, center.lat, sidebarConfig, size, initialZoom]);
+
+  useEffect(() => {
+    setViewCenter([long, lat]);
+    setCurrentZoom(initialZoom);
+    setDebouncedZoom(initialZoom);
+  }, [long, lat, initialZoom]);
+
+  useEffect(() => {
+    return bind(window, {
+      type: 'resize',
+      listener() {
+        if (ref.current) {
+          const parentRect = ref.current.getBoundingClientRect();
+          setSize({
+            width: parentRect.width ?? 0,
+            height: parentRect.height ?? 0,
+          });
+        }
+      },
+    });
+  }, []);
+
+  useEffect(() => {
+    if (ref.current) {
+      const parentRect = ref.current.getBoundingClientRect();
+      setSize({
+        width: parentRect.width ?? 0,
+        height: parentRect.height ?? 0,
+      });
+    }
+  }, []);
+
+  const theme = useTheme();
+
+  const clusteredMarkers = useMemo(() => {
+    return clusterCoordinates(markers, 150, {
+      zoom: debouncedZoom,
+      adaptiveRadius: true,
+    });
+  }, [markers, debouncedZoom]);
+
+  const invScale = Number.isNaN(1 / currentZoom) ? 1 : 1 / currentZoom;
+
+  return (
+    <div className="relative h-full w-full" ref={ref}>
+      <div className="absolute inset-x-0 bottom-0 h-1/10 bg-gradient-to-t from-def-100 to-transparent" />
+      {size !== null && (
+        <ComposableMap
+          height={size.height}
+          projection="geoMercator"
+          width={size.width}
+        >
+          <ZoomableGroup
+            center={[long, lat]}
+            // key={`${long}-${lat}-${initialZoom}`}
+            maxZoom={20}
+            minZoom={1}
+            onMove={(position: ZoomMovePosition) => {
+              dispatch(closeMapBadgeDetails());
+              if (currentZoom !== position.zoom) {
+                setCurrentZoom(position.zoom);
+                updateDebouncedZoom(position.zoom);
+              }
+            }}
+            onMoveEnd={(position: ZoomMoveEndPosition) => {
+              setViewCenter(position.coordinates);
+
+              if (currentZoom !== position.zoom) {
+                setCurrentZoom(position.zoom);
+                updateDebouncedZoom(position.zoom);
+              }
+            }}
+            zoom={initialZoom}
+          >
+            <Geographies geography={GEO_MAP_URL}>
+              {({
+                geographies,
+                projection,
+              }: {
+                geographies: GeographyFeature[];
+                projection: MapProjection;
+              }) => {
+                const cachedDisplayMarkers = displayMarkersCacheRef.current;
+                const cacheMatches =
+                  cachedDisplayMarkers.markers === clusteredMarkers &&
+                  cachedDisplayMarkers.projection === projection &&
+                  cachedDisplayMarkers.viewportCenter[0] === viewCenter[0] &&
+                  cachedDisplayMarkers.viewportCenter[1] === viewCenter[1] &&
+                  cachedDisplayMarkers.zoom === debouncedZoom &&
+                  cachedDisplayMarkers.size?.width === size.width &&
+                  cachedDisplayMarkers.size?.height === size.height;
+
+                const displayMarkers = cacheMatches
+                  ? cachedDisplayMarkers.result
+                  : createDisplayMarkers({
+                      markers: clusteredMarkers,
+                      projection,
+                      viewportCenter: viewCenter,
+                      zoom: debouncedZoom,
+                      labelZoom: debouncedZoom,
+                      size,
+                    });
+
+                if (!cacheMatches) {
+                  displayMarkersCacheRef.current = {
+                    markers: clusteredMarkers,
+                    projection,
+                    viewportCenter: viewCenter,
+                    zoom: debouncedZoom,
+                    size,
+                    result: displayMarkers,
+                  };
+                }
+
+                return (
+                  <>
+                    {geographies
+                      .filter(
+                        (geo: GeographyFeature) =>
+                          geo.properties.name !== 'Antarctica'
+                      )
+                      .map((geo: GeographyFeature) => (
+                        <Geography
+                          fill={theme.theme === 'dark' ? '#000' : '#f0f0f0'}
+                          geography={geo}
+                          key={geo.rsmKey}
+                          pointerEvents="none"
+                          stroke={theme.theme === 'dark' ? '#333' : '#999'}
+                          strokeWidth={0.5}
+                          vectorEffect="non-scaling-stroke"
+                        />
+                      ))}
+
+                    {markers.filter(isValidCoordinate).map((marker, index) => (
+                      <Marker
+                        coordinates={[marker.long, marker.lat]}
+                        key={`point-${index}-${marker.long}-${marker.lat}`}
+                      >
+                        <g transform={`scale(${invScale})`}>
+                          <circle
+                            fill="var(--primary)"
+                            fillOpacity={0.9}
+                            pointerEvents="none"
+                            r={ANCHOR_R}
+                          />
+                        </g>
+                      </Marker>
+                    ))}
+
+                    {displayMarkers.map((marker, index) => {
+                      const coordinates: [number, number] = [
+                        marker.center.long,
+                        marker.center.lat,
+                      ];
+
+                      return (
+                        <Marker
+                          coordinates={coordinates}
+                          key={`cluster-${index}-${marker.center.long}-${marker.center.lat}-${marker.mergedVisualClusters}`}
+                        >
+                          <g transform={`scale(${invScale})`}>
+                            <foreignObject
+                              height={PILL_H}
+                              overflow="visible"
+                              width={PILL_W}
+                              x={-PILL_W / 2}
+                              y={-(PILL_H + ANCHOR_R + PILL_GAP)}
+                            >
+                              <div
+                                style={{
+                                  display: 'flex',
+                                  justifyContent: 'center',
+                                  height: '100%',
+                                  alignItems: 'center',
+                                }}
+                              >
+                                <MapMarkerPill
+                                  marker={marker}
+                                  onClick={() => {
+                                    dispatch(
+                                      openMapBadgeDetails({
+                                        marker,
+                                        projectId,
+                                      })
+                                    );
+                                  }}
+                                />
+                              </div>
+                            </foreignObject>
+                          </g>
+                        </Marker>
+                      );
+                    })}
+                  </>
+                );
+              }}
+            </Geographies>
+          </ZoomableGroup>
+        </ComposableMap>
+      )}
+    </div>
+  );
+});

apps/start/src/components/realtime/map/map-display-markers.ts

@@ -0,0 +1,309 @@
+import type { Coordinate, CoordinateCluster } from './coordinates';
+import {
+  getAverageCenter,
+  getClusterDetailLevel,
+  haversineDistance,
+} from './coordinates';
+import type {
+  ContinentBucket,
+  DisplayMarker,
+  MapProjection,
+} from './map-types';
+import {
+  ANCHOR_R,
+  createDisplayLabel,
+  createMergedDisplayLabel,
+  getDetailQueryScope,
+  getDisplayMarkerId,
+  getMergedDetailQueryScope,
+  getWeightedScreenPoint,
+  isValidCoordinate,
+  normalizeLocationValue,
+  PILL_GAP,
+  PILL_H,
+  PILL_W,
+} from './map-utils';
+
+function projectToScreen(
+  projection: MapProjection,
+  coordinate: Coordinate,
+  viewportCenter: [number, number],
+  zoom: number,
+  size: { width: number; height: number }
+) {
+  const projectedPoint = projection([coordinate.long, coordinate.lat]);
+  const projectedCenter = projection(viewportCenter);
+
+  if (!(projectedPoint && projectedCenter)) {
+    return null;
+  }
+
+  return {
+    x: (projectedPoint[0] - projectedCenter[0]) * zoom + size.width / 2,
+    y: (projectedPoint[1] - projectedCenter[1]) * zoom + size.height / 2,
+  };
+}
+
+function isOffscreen(
+  point: { x: number; y: number },
+  size: { width: number; height: number }
+) {
+  const margin = PILL_W;
+
+  return (
+    point.x < -margin ||
+    point.x > size.width + margin ||
+    point.y < -margin ||
+    point.y > size.height + margin
+  );
+}
+
+function doPillsOverlap(
+  left: { x: number; y: number },
+  right: { x: number; y: number },
+  padding: number
+) {
+  const leftBox = {
+    left: left.x - PILL_W / 2 - padding,
+    right: left.x + PILL_W / 2 + padding,
+    top: left.y - (PILL_H + ANCHOR_R + PILL_GAP) - padding,
+  };
+  const rightBox = {
+    left: right.x - PILL_W / 2 - padding,
+    right: right.x + PILL_W / 2 + padding,
+    top: right.y - (PILL_H + ANCHOR_R + PILL_GAP) - padding,
+  };
+
+  const leftBottom = leftBox.top + PILL_H + padding * 2;
+  const rightBottom = rightBox.top + PILL_H + padding * 2;
+
+  return !(
+    leftBox.right < rightBox.left ||
+    leftBox.left > rightBox.right ||
+    leftBottom < rightBox.top ||
+    leftBox.top > rightBottom
+  );
+}
+
+function getVisualMergePadding(zoom: number) {
+  const detailLevel = getClusterDetailLevel(zoom);
+
+  if (detailLevel === 'country') {
+    return 8;
+  }
+
+  if (detailLevel === 'city') {
+    return 4;
+  }
+
+  return 2;
+}
+
+function getContinentBucket(coordinate: Coordinate): ContinentBucket {
+  const { lat, long } = coordinate;
+
+  if (lat >= 15 && long >= -170 && long <= -20) {
+    return 'north-america';
+  }
+
+  if (lat < 15 && lat >= -60 && long >= -95 && long <= -30) {
+    return 'south-america';
+  }
+
+  if (lat >= 35 && long >= -25 && long <= 45) {
+    return 'europe';
+  }
+
+  if (lat >= -40 && lat <= 38 && long >= -20 && long <= 55) {
+    return 'africa';
+  }
+
+  if (lat >= -10 && long >= 110 && long <= 180) {
+    return 'oceania';
+  }
+
+  if (lat >= -10 && long >= 55 && long <= 180) {
+    return 'asia';
+  }
+
+  if (lat >= 0 && long >= 45 && long <= 180) {
+    return 'asia';
+  }
+
+  if (lat >= -10 && long >= 30 && long < 55) {
+    return 'asia';
+  }
+
+  return 'unknown';
+}
+
+function getMaxVisualMergeDistanceKm(zoom: number) {
+  const detailLevel = getClusterDetailLevel(zoom);
+
+  if (detailLevel === 'country') {
+    return 2200;
+  }
+
+  if (detailLevel === 'city') {
+    return 900;
+  }
+
+  return 500;
+}
+
+function canVisuallyMergeMarkers(
+  left: CoordinateCluster,
+  right: CoordinateCluster,
+  zoom: number
+) {
+  const sameContinent =
+    getContinentBucket(left.center) === getContinentBucket(right.center);
+
+  if (!sameContinent) {
+    return false;
+  }
+
+  return (
+    haversineDistance(left.center, right.center) <=
+    getMaxVisualMergeDistanceKm(zoom)
+  );
+}
+
+export function createDisplayMarkers({
+  markers,
+  projection,
+  viewportCenter,
+  zoom,
+  labelZoom,
+  size,
+}: {
+  markers: CoordinateCluster[];
+  projection: MapProjection;
+  viewportCenter: [number, number];
+  zoom: number;
+  labelZoom: number;
+  size: { width: number; height: number };
+}): DisplayMarker[] {
+  const positionedMarkers = markers
+    .map((marker) => {
+      if (!isValidCoordinate(marker.center)) {
+        return null;
+      }
+
+      const point = projectToScreen(
+        projection,
+        marker.center,
+        viewportCenter,
+        zoom,
+        size
+      );
+
+      if (!point || isOffscreen(point, size)) {
+        return null;
+      }
+
+      return { marker, point };
+    })
+    .filter((entry) => entry !== null);
+
+  const entries = positionedMarkers.sort(
+    (left, right) => right.marker.count - left.marker.count
+  );
+  const consumed = new Set<number>();
+  const mergedMarkers: DisplayMarker[] = [];
+  const overlapPadding = getVisualMergePadding(labelZoom);
+
+  for (let index = 0; index < entries.length; index++) {
+    if (consumed.has(index)) {
+      continue;
+    }
+
+    const queue = [index];
+    const componentIndices: number[] = [];
+    consumed.add(index);
+
+    while (queue.length > 0) {
+      const currentIndex = queue.shift()!;
+      componentIndices.push(currentIndex);
+
+      for (
+        let candidateIndex = currentIndex + 1;
+        candidateIndex < entries.length;
+        candidateIndex++
+      ) {
+        if (consumed.has(candidateIndex)) {
+          continue;
+        }
+
+        if (
+          doPillsOverlap(
+            entries[currentIndex]!.point,
+            entries[candidateIndex]!.point,
+            overlapPadding
+          ) &&
+          canVisuallyMergeMarkers(
+            entries[currentIndex]!.marker,
+            entries[candidateIndex]!.marker,
+            labelZoom
+          )
+        ) {
+          consumed.add(candidateIndex);
+          queue.push(candidateIndex);
+        }
+      }
+    }
+
+    const componentEntries = componentIndices.map(
+      (componentIndex) => entries[componentIndex]!
+    );
+    const componentMarkers = componentEntries.map((entry) => entry.marker);
+
+    if (componentMarkers.length === 1) {
+      const marker = componentMarkers[0]!;
+      mergedMarkers.push({
+        ...marker,
+        detailScope: getDetailQueryScope(marker, labelZoom),
+        id: getDisplayMarkerId(marker.members),
+        label: createDisplayLabel(marker, labelZoom),
+        mergedVisualClusters: 1,
+        screenPoint: entries[index]!.point,
+      });
+      continue;
+    }
+
+    const members = componentMarkers.flatMap((marker) => marker.members);
+    const center = getAverageCenter(members);
+    const representativeCountry = normalizeLocationValue(
+      componentMarkers[0]?.location.country
+    );
+    const representativeCity = normalizeLocationValue(
+      componentMarkers[0]?.location.city
+    );
+
+    const mergedMarker: CoordinateCluster = {
+      center,
+      count: componentMarkers.reduce((sum, marker) => sum + marker.count, 0),
+      members,
+      location: {
+        city: representativeCity,
+        country: representativeCountry,
+      },
+    };
+
+    mergedMarkers.push({
+      ...mergedMarker,
+      detailScope: getMergedDetailQueryScope(labelZoom),
+      id: getDisplayMarkerId(mergedMarker.members),
+      label: createMergedDisplayLabel(mergedMarker, labelZoom),
+      mergedVisualClusters: componentMarkers.length,
+      screenPoint: getWeightedScreenPoint(
+        componentEntries.map((entry) => ({
+          count: entry.marker.count,
+          screenPoint: entry.point,
+        }))
+      ),
+    });
+  }
+
+  return mergedMarkers;
+}

apps/start/src/components/realtime/map/map-marker-pill.tsx

@@ -0,0 +1,35 @@
+import type { DisplayMarker } from './map-types';
+import { cn } from '@/lib/utils';
+
+export function MapMarkerPill({
+  marker,
+  onClick,
+}: {
+  marker: DisplayMarker;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      className={cn(
+        'inline-flex select-none items-center gap-1.5 whitespace-nowrap rounded-lg border border-border/10 bg-background px-[10px] py-[5px] font-medium text-[11px] text-foreground shadow-[0_4px_16px] shadow-background/20',
+        onClick ? 'cursor-pointer' : 'cursor-default'
+      )}
+      onClick={onClick}
+      type="button"
+    >
+      <span className="relative flex size-[7px] shrink-0">
+        <span className="absolute inset-0 animate-ping rounded-full bg-emerald-300 opacity-75" />
+        <span className="relative inline-flex size-[7px] rounded-full bg-emerald-500" />
+      </span>
+
+      <span className="tabular-nums">{marker.count.toLocaleString()}</span>
+
+      {marker.label ? (
+        <>
+          <span className="h-4 w-px shrink-0 bg-foreground/20" />
+          <span className="max-w-[110px] truncate">{marker.label}</span>
+        </>
+      ) : null}
+    </button>
+  );
+}

apps/start/src/components/realtime/map/map-types.ts

@@ -0,0 +1,55 @@
+import type { Coordinate, CoordinateCluster } from './coordinates';
+import type { MapBadgeDisplayMarker } from './realtime-map-badge-slice';
+
+export type DisplayMarker = MapBadgeDisplayMarker;
+
+export type ContinentBucket =
+  | 'north-america'
+  | 'south-america'
+  | 'europe'
+  | 'africa'
+  | 'asia'
+  | 'oceania'
+  | 'unknown';
+
+export type MapProjection = (
+  point: [number, number]
+) => [number, number] | null;
+
+export interface ZoomMovePosition {
+  zoom: number;
+}
+
+export interface ZoomMoveEndPosition {
+  coordinates: [number, number];
+  zoom: number;
+}
+
+export interface GeographyFeature {
+  rsmKey: string;
+  properties: {
+    name?: string;
+  };
+}
+
+export interface DisplayMarkerCache {
+  markers: CoordinateCluster[];
+  projection: MapProjection | null;
+  viewportCenter: [number, number];
+  zoom: number;
+  size: { width: number; height: number } | null;
+  result: DisplayMarker[];
+}
+
+export interface MapSidebarConfig {
+  width: number;
+  position: 'left' | 'right';
+}
+
+export interface RealtimeMapProps {
+  projectId: string;
+  markers: Coordinate[];
+  sidebarConfig?: MapSidebarConfig;
+}
+
+export interface MapCanvasProps extends RealtimeMapProps {}

apps/start/src/components/realtime/map/map-utils.ts

@@ -0,0 +1,298 @@
+import type { Coordinate, CoordinateCluster } from './coordinates';
+import { getClusterDetailLevel } from './coordinates';
+import type { DisplayMarker } from './map-types';
+
+export const PILL_W = 220;
+export const PILL_H = 32;
+export const ANCHOR_R = 3;
+export const PILL_GAP = 6;
+
+const COUNTRY_CODE_PATTERN = /^[A-Z]{2}$/;
+
+const regionDisplayNames =
+  typeof Intl !== 'undefined'
+    ? new Intl.DisplayNames(['en'], { type: 'region' })
+    : null;
+
+export function normalizeLocationValue(value?: string) {
+  const trimmed = value?.trim();
+  return trimmed ? trimmed : undefined;
+}
+
+export function isValidCoordinate(coordinate: Coordinate) {
+  return Number.isFinite(coordinate.lat) && Number.isFinite(coordinate.long);
+}
+
+export function getCoordinateIdentity(coordinate: Coordinate) {
+  return [
+    normalizeLocationValue(coordinate.country) ?? '',
+    normalizeLocationValue(coordinate.city) ?? '',
+    isValidCoordinate(coordinate) ? coordinate.long.toFixed(4) : 'invalid-long',
+    isValidCoordinate(coordinate) ? coordinate.lat.toFixed(4) : 'invalid-lat',
+  ].join(':');
+}
+
+export function getDisplayMarkerId(members: Coordinate[]) {
+  const validMembers = members.filter(isValidCoordinate);
+
+  if (validMembers.length === 0) {
+    return 'invalid-cluster';
+  }
+
+  return validMembers.map(getCoordinateIdentity).sort().join('|');
+}
+
+export function getWeightedScreenPoint(
+  markers: Array<{
+    count: number;
+    screenPoint: {
+      x: number;
+      y: number;
+    };
+  }>
+) {
+  let weightedX = 0;
+  let weightedY = 0;
+  let totalWeight = 0;
+
+  for (const marker of markers) {
+    weightedX += marker.screenPoint.x * marker.count;
+    weightedY += marker.screenPoint.y * marker.count;
+    totalWeight += marker.count;
+  }
+
+  return {
+    x: weightedX / totalWeight,
+    y: weightedY / totalWeight,
+  };
+}
+
+export function formatCountryLabel(country?: string) {
+  const normalized = normalizeLocationValue(country);
+
+  if (!normalized) {
+    return undefined;
+  }
+
+  if (!COUNTRY_CODE_PATTERN.test(normalized)) {
+    return normalized;
+  }
+
+  return regionDisplayNames?.of(normalized) ?? normalized;
+}
+
+export function summarizeLocation(members: Coordinate[]) {
+  const cities = new Set<string>();
+  const countries = new Set<string>();
+
+  for (const member of members) {
+    const city = normalizeLocationValue(member.city);
+    const country = normalizeLocationValue(member.country);
+
+    if (city) {
+      cities.add(city);
+    }
+
+    if (country) {
+      countries.add(country);
+    }
+  }
+
+  return {
+    cityCount: cities.size,
+    countryCount: countries.size,
+    firstCity: [...cities][0],
+    firstCountry: [...countries][0],
+  };
+}
+
+export function createDisplayLabel(
+  marker: CoordinateCluster,
+  zoom: number
+): string {
+  const detailLevel = getClusterDetailLevel(zoom);
+
+  if (detailLevel === 'country') {
+    return (
+      formatCountryLabel(marker.location.country) ?? marker.location.city ?? '?'
+    );
+  }
+
+  if (detailLevel === 'city') {
+    return (
+      marker.location.city ?? formatCountryLabel(marker.location.country) ?? '?'
+    );
+  }
+
+  const cityMember = marker.members.find((member) => member.city?.trim());
+  return (
+    cityMember?.city?.trim() ??
+    formatCountryLabel(marker.location.country) ??
+    '?'
+  );
+}
+
+export function getDetailQueryScope(
+  marker: CoordinateCluster,
+  zoom: number
+): DisplayMarker['detailScope'] {
+  const detailLevel = getClusterDetailLevel(zoom);
+
+  if (detailLevel === 'country') {
+    return 'country';
+  }
+
+  if (detailLevel === 'city') {
+    return marker.location.city ? 'city' : 'country';
+  }
+
+  return 'coordinate';
+}
+
+export function getMergedDetailQueryScope(
+  zoom: number
+): DisplayMarker['detailScope'] {
+  const detailLevel = getClusterDetailLevel(zoom);
+
+  return detailLevel === 'country' ? 'country' : 'city';
+}
+
+export function createMergedDisplayLabel(
+  marker: CoordinateCluster,
+  zoom: number
+): string {
+  const detailLevel = getClusterDetailLevel(zoom);
+  const summary = summarizeLocation(marker.members);
+
+  if (detailLevel === 'country') {
+    if (summary.countryCount <= 1) {
+      return (
+        formatCountryLabel(summary.firstCountry) ?? summary.firstCity ?? '?'
+      );
+    }
+
+    return `${summary.countryCount} countries`;
+  }
+
+  if (detailLevel === 'city') {
+    if (summary.cityCount === 1 && summary.firstCity) {
+      return summary.firstCity;
+    }
+
+    if (summary.countryCount === 1) {
+      const country = formatCountryLabel(summary.firstCountry);
+
+      if (country && summary.cityCount > 1) {
+        return `${country}, ${summary.cityCount} cities`;
+      }
+
+      return country ?? `${summary.cityCount} places`;
+    }
+
+    if (summary.countryCount > 1) {
+      return `${summary.countryCount} countries`;
+    }
+  }
+
+  if (summary.cityCount === 1 && summary.firstCity) {
+    return summary.firstCity;
+  }
+
+  if (summary.countryCount === 1) {
+    const country = formatCountryLabel(summary.firstCountry);
+
+    if (country && summary.cityCount > 1) {
+      return `${country}, ${summary.cityCount} places`;
+    }
+
+    return country ?? `${marker.members.length} places`;
+  }
+
+  return `${Math.max(summary.countryCount, summary.cityCount, 2)} places`;
+}
+
+export function getBadgeOverlayPosition(
+  marker: DisplayMarker,
+  size: { width: number; height: number }
+) {
+  const overlayWidth = Math.min(380, size.width - 24);
+  const preferredLeft = marker.screenPoint.x - overlayWidth / 2;
+  const left = Math.max(
+    12,
+    Math.min(preferredLeft, size.width - overlayWidth - 12)
+  );
+  const top = Math.max(
+    12,
+    Math.min(marker.screenPoint.y + 16, size.height - 340)
+  );
+
+  return { left, overlayWidth, top };
+}
+
+export function getProfileDisplayName(profile: {
+  firstName: string;
+  lastName: string;
+  email: string;
+  id: string;
+}) {
+  const name = [profile.firstName, profile.lastName].filter(Boolean).join(' ');
+  return name || profile.email || profile.id;
+}
+
+export function getUniqueCoordinateDetailLocations(members: Coordinate[]) {
+  const locationsByKey: Record<
+    string,
+    {
+      city?: string;
+      country?: string;
+      lat: number;
+      long: number;
+    }
+  > = {};
+
+  for (const member of members) {
+    if (!isValidCoordinate(member)) {
+      continue;
+    }
+
+    const key = [
+      normalizeLocationValue(member.country) ?? '',
+      normalizeLocationValue(member.city) ?? '',
+      member.long.toFixed(4),
+      member.lat.toFixed(4),
+    ].join(':');
+
+    locationsByKey[key] = {
+      city: member.city,
+      country: member.country,
+      lat: member.lat,
+      long: member.long,
+    };
+  }
+
+  return Object.values(locationsByKey);
+}
+
+export function getUniquePlaceDetailLocations(members: Coordinate[]) {
+  const locationsByKey: Record<
+    string,
+    {
+      city?: string;
+      country?: string;
+    }
+  > = {};
+
+  for (const member of members) {
+    const key = [
+      normalizeLocationValue(member.country) ?? '',
+      normalizeLocationValue(member.city) ?? '',
+    ].join(':');
+
+    locationsByKey[key] = {
+      city: member.city,
+      country: member.country,
+    };
+  }
+
+  return Object.values(locationsByKey);
+}

apps/start/src/components/realtime/map/map.helpers.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useZoomPan } from 'react-simple-maps';
-
 import type { Coordinate } from './coordinates';
 
 export const GEO_MAP_URL =
@@ -49,7 +48,7 @@ export const getBoundingBox = (coordinates: Coordinate[]) => {
 
 export const determineZoom = (
   bbox: ReturnType<typeof getBoundingBox>,
-  aspectRatio = 1.0,
+  aspectRatio = 1.0
 ): number => {
   const latDiff = bbox.maxLat - bbox.minLat;
   const longDiff = bbox.maxLong - bbox.minLong;
@@ -80,7 +79,7 @@ export function CustomZoomableGroup({
   children: React.ReactNode;
 }) {
   const { mapRef, transformString } = useZoomPan({
-    center: center,
+    center,
     zoom,
     filterZoomEvent: () => false,
   });

apps/start/src/components/realtime/map/markers.ts

@@ -1,43 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import type { Coordinate } from './coordinates';
-
-const useActiveMarkers = (initialMarkers: Coordinate[]) => {
-  const [activeMarkers, setActiveMarkers] = useState(initialMarkers);
-
-  const toggleActiveMarkers = useCallback(() => {
-    // Shuffle array function
-    const shuffled = [...initialMarkers].sort(() => 0.5 - Math.random());
-    // Cut the array in half randomly to simulate changes in active markers
-    const selected = shuffled.slice(
-      0,
-      Math.floor(Math.random() * shuffled.length) + 1,
-    );
-    setActiveMarkers(selected);
-  }, [activeMarkers]);
-
-  return { markers: activeMarkers, toggle: toggleActiveMarkers };
-};
-
-export default useActiveMarkers;
-
-export function calculateMarkerSize(count: number) {
-  const minSize = 3; // Minimum size for single visitor (reduced from 4)
-  const maxSize = 14; // Maximum size for very large clusters (reduced from 20)
-
-  if (count <= 1) return minSize;
-
-  // Use square root scaling for better visual differentiation
-  // This creates more noticeable size differences for common visitor counts
-  // Examples:
-  // 1 visitor: 3px
-  // 2 visitors: ~5px
-  // 5 visitors: ~7px
-  // 10 visitors: ~9px
-  // 25 visitors: ~12px
-  // 50+ visitors: ~14px (max)
-  const scaledSize = minSize + Math.sqrt(count - 1) * 1.8;
-
-  // Ensure size does not exceed maxSize or fall below minSize
-  return Math.max(minSize, Math.min(scaledSize, maxSize));
-}