fix: optimize event buffer (#278)

* fix: how we fetch profiles in the buffer * perf: optimize event buffer * remove unused file * fix * wip * wip: try groupmq 2 * try simplified event buffer with duration calculation on the fly instead
2026-03-16 13:29:40 +01:00
parent 4736f8509d
commit 4483e464d1
46 changed files with 887 additions and 1841 deletions
--- a/apps/start/src/components/events/event-list-item.tsx
+++ b/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>
  );
 }
--- a/apps/start/src/components/events/event-listener.tsx
+++ b/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>
--- a/apps/start/src/components/events/table/columns.tsx
+++ b/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,27 @@ 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"
+                title={fullTitle}
                onClick={() => {
                  pushModal('EventDetails', {
                    id: row.original.id,
@@ -89,11 +84,10 @@ export function useColumns() {
                    projectId: row.original.projectId,
                  });
                }}
-                className="font-medium hover:underline"
+                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,7 +197,7 @@ 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>
@@ -221,14 +215,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({
--- a/apps/start/src/components/events/table/index.tsx
+++ b/apps/start/src/components/events/table/index.tsx
@@ -35,6 +35,7 @@ type Props = {
    >,
    unknown
  >;
+  showEventListener?: boolean;
 };

 const LOADING_DATA = [{}, {}, {}, {}, {}, {}, {}, {}, {}] as IServiceEvent[];
@@ -215,7 +216,7 @@ const VirtualizedEventsTable = ({
  );
 };

-export const EventsTable = ({ query }: Props) => {
+export const EventsTable = ({ query, showEventListener = false }: Props) => {
  const { isLoading } = query;
  const columns = useColumns();

@@ -272,7 +273,7 @@ export const EventsTable = ({ query }: Props) => {

  return (
    <>
-      <EventsTableToolbar query={query} table={table} />
+      <EventsTableToolbar query={query} table={table} showEventListener={showEventListener} />
      <VirtualizedEventsTable table={table} data={data} isLoading={isLoading} />
      <div className="w-full h-10 center-center pt-4" ref={inViewportRef}>
        <div
@@ -291,9 +292,11 @@ 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(
@@ -305,7 +308,7 @@ function EventsTableToolbar({
  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"
--- a/apps/start/src/components/onboarding/onboarding-verify-listener.tsx
+++ b/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>
--- a/apps/start/src/components/realtime/realtime-active-sessions.tsx
+++ b/apps/start/src/components/realtime/realtime-active-sessions.tsx
@@ -1,11 +1,9 @@
-import { useTRPC } from '@/integrations/trpc/react';
 import { useQuery } from '@tanstack/react-query';
 import { AnimatePresence, motion } from 'framer-motion';
-import { useEffect, useState } from 'react';
-
-import useWS from '@/hooks/use-ws';
-import type { IServiceEvent } from '@openpanel/db';
-import { EventItem } from '../events/table/item';
+import { ProjectLink } from '../links';
+import { SerieIcon } from '../report-chart/common/serie-icon';
+import { useTRPC } from '@/integrations/trpc/react';
+import { formatTimeAgoOrDateTime } from '@/utils/date';

 interface RealtimeActiveSessionsProps {
  projectId: string;
@@ -17,64 +15,52 @@ export function RealtimeActiveSessions({
  limit = 10,
 }: RealtimeActiveSessionsProps) {
  const trpc = useTRPC();
-  const activeSessionsQuery = useQuery(
-    trpc.realtime.activeSessions.queryOptions({
-      projectId,
-    }),
+  const { data: sessions = [] } = useQuery(
+    trpc.realtime.activeSessions.queryOptions(
+      { projectId },
+      { refetchInterval: 5000 }
+    )
  );

-  const [state, setState] = useState<IServiceEvent[]>([]);
-
-  // Update state when initial data loads
-  useEffect(() => {
-    if (activeSessionsQuery.data && state.length === 0) {
-      setState(activeSessionsQuery.data);
-    }
-  }, [activeSessionsQuery.data, state]);
-
-  // Set up WebSocket connection for real-time updates
-  useWS<IServiceEvent>(
-    `/live/events/${projectId}`,
-    (session) => {
-      setState((prev) => {
-        // Add new session and remove duplicates, keeping most recent
-        const filtered = prev.filter((s) => s.id !== session.id);
-        return [session, ...filtered].slice(0, limit);
-      });
-    },
-    {
-      debounce: {
-        delay: 1000,
-        maxWait: 5000,
-      },
-    },
-  );
-
-  const sessions = state.length > 0 ? state : (activeSessionsQuery.data ?? []);
-
  return (
-    <div className="col h-full max-md:hidden">
-      <div className="hide-scrollbar h-full overflow-y-auto pb-10">
-        <AnimatePresence mode="popLayout" initial={false}>
-          <div className="col gap-4">
-            {sessions.map((session) => (
+    <div className="col card h-full max-md:hidden">
+      <div className="hide-scrollbar h-full overflow-y-auto">
+        <AnimatePresence initial={false} mode="popLayout">
+          <div className="col divide-y">
+            {sessions.slice(0, limit).map((session) => (
              <motion.div
-                key={session.id}
-                layout
-                // initial={{ opacity: 0, x: -200, scale: 0.8 }}
                animate={{ opacity: 1, x: 0, scale: 1 }}
                exit={{ opacity: 0, x: 200, scale: 0.8 }}
+                key={session.id}
+                layout
                transition={{ duration: 0.4, type: 'spring', stiffness: 300 }}
              >
-                <EventItem
-                  event={session}
-                  viewOptions={{
-                    properties: false,
-                    origin: false,
-                    queryString: false,
-                  }}
-                  className="w-full"
-                />
+                <ProjectLink
+                  className="relative block p-4 py-3 pr-14"
+                  href={`/sessions/${session.sessionId}`}
+                >
+                  <div className="col flex-1 gap-1">
+                    {session.name === 'screen_view' && (
+                      <span className="text-muted-foreground text-xs leading-normal/80">
+                        {session.origin}
+                      </span>
+                    )}
+                    <span className="font-medium text-sm leading-normal">
+                      {session.name === 'screen_view'
+                        ? session.path
+                        : session.name}
+                    </span>
+                    <span className="text-muted-foreground text-xs">
+                      {formatTimeAgoOrDateTime(session.createdAt)}
+                    </span>
+                  </div>
+                  <div className="row absolute top-1/2 right-4 origin-right -translate-y-1/2 scale-50 gap-2">
+                    <SerieIcon name={session.referrerName} />
+                    <SerieIcon name={session.os} />
+                    <SerieIcon name={session.browser} />
+                    <SerieIcon name={session.device} />
+                  </div>
+                </ProjectLink>
              </motion.div>
            ))}
          </div>
--- a/apps/start/src/routes/_app.$organizationId.$projectId.events._tabs.events.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.events._tabs.events.tsx
@@ -42,5 +42,5 @@ function Component() {
    ),
  );

-  return <EventsTable query={query} />;
+  return <EventsTable query={query} showEventListener />;
 }
--- a/apps/start/src/routes/_app.$organizationId.$projectId.realtime.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.realtime.tsx
@@ -1,3 +1,5 @@
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import { createFileRoute } from '@tanstack/react-router';
 import { Fullscreen, FullscreenClose } from '@/components/fullscreen-toggle';
 import RealtimeMap from '@/components/realtime/map';
 import { RealtimeActiveSessions } from '@/components/realtime/realtime-active-sessions';
@@ -7,12 +9,10 @@ import { RealtimePaths } from '@/components/realtime/realtime-paths';
 import { RealtimeReferrals } from '@/components/realtime/realtime-referrals';
 import RealtimeReloader from '@/components/realtime/realtime-reloader';
 import { useTRPC } from '@/integrations/trpc/react';
-import { PAGE_TITLES, createProjectTitle } from '@/utils/title';
-import { keepPreviousData, useQuery } from '@tanstack/react-query';
-import { createFileRoute } from '@tanstack/react-router';
+import { createProjectTitle, PAGE_TITLES } from '@/utils/title';

 export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId/realtime',
+  '/_app/$organizationId/$projectId/realtime'
 )({
  component: Component,
  head: () => {
@@ -36,8 +36,8 @@ function Component() {
      },
      {
        placeholderData: keepPreviousData,
-      },
-    ),
+      }
+    )
  );

  return (
@@ -47,7 +47,7 @@ function Component() {
        <RealtimeReloader projectId={projectId} />

        <div className="row relative">
-          <div className="overflow-hidden aspect-[4/2] w-full">
+          <div className="aspect-[4/2] w-full overflow-hidden">
            <RealtimeMap
              markers={coordinatesQuery.data ?? []}
              sidebarConfig={{
@@ -56,18 +56,17 @@ function Component() {
              }}
            />
          </div>
-          <div className="absolute top-8 left-8 bottom-0 col gap-4">
-            <div className="card p-4 w-72 bg-background/90">
+          <div className="col absolute top-8 bottom-4 left-8 gap-4">
+            <div className="card w-72 bg-background/90 p-4">
              <RealtimeLiveHistogram projectId={projectId} />
            </div>
-            <div className="w-72 flex-1 min-h-0 relative">
+            <div className="relative min-h-0 w-72 flex-1">
              <RealtimeActiveSessions projectId={projectId} />
-              <div className="absolute bottom-0 left-0 right-0 h-10 bg-gradient-to-t from-def-100 to-transparent" />
            </div>
          </div>
        </div>

-        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 p-4 pt-4 md:p-8 md:pt-0">
+        <div className="grid grid-cols-1 gap-4 p-4 pt-4 md:grid-cols-2 md:p-8 md:pt-0 xl:grid-cols-3">
          <div>
            <RealtimeGeo projectId={projectId} />
          </div>
--- a/apps/start/src/routes/_steps.onboarding.$projectId.verify.tsx
+++ b/apps/start/src/routes/_steps.onboarding.$projectId.verify.tsx
@@ -1,7 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { createFileRoute, Link, redirect } from '@tanstack/react-router';
 import { BoxSelectIcon } from 'lucide-react';
-import { useEffect, useState } from 'react';
 import { ButtonContainer } from '@/components/button-container';
 import { FullPageEmptyState } from '@/components/full-page-empty-state';
 import FullPageLoadingState from '@/components/full-page-loading-state';
@@ -33,22 +32,21 @@ export const Route = createFileRoute('/_steps/onboarding/$projectId/verify')({
 });

 function Component() {
-  const [isVerified, setIsVerified] = useState(false);
  const { projectId } = Route.useParams();
  const trpc = useTRPC();
-  const { data: events, refetch } = useQuery(
-    trpc.event.events.queryOptions({ projectId })
+  const { data: events } = useQuery(
+    trpc.event.events.queryOptions(
+      { projectId },
+      {
+        refetchInterval: 2500,
+      }
+    )
  );
+  const isVerified = events?.data && events.data.length > 0;
  const { data: project } = useQuery(
    trpc.project.getProjectWithClients.queryOptions({ projectId })
  );

-  useEffect(() => {
-    if (events && events.data.length > 0) {
-      setIsVerified(true);
-    }
-  }, [events]);
-
  if (!project) {
    return (
      <FullPageEmptyState icon={BoxSelectIcon} title="Project not found" />
@@ -64,15 +62,7 @@ function Component() {
    <div className="flex min-h-0 flex-1 flex-col">
      <div className="scrollbar-thin flex-1 overflow-y-auto">
        <div className="col gap-8 p-4">
-          <VerifyListener
-            client={client}
-            events={events?.data ?? []}
-            onVerified={() => {
-              refetch();
-              setIsVerified(true);
-            }}
-            project={project}
-          />
+          <VerifyListener events={events?.data ?? []} />

          <VerifyFaq project={project} />
        </div>