wip

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/controllers/track.controller.ts

@@ -341,13 +341,23 @@ async function handleGroup(
   context: TrackContext
 ): Promise<void> {
   const { id, type, name, properties = {} } = payload;
-  await upsertGroup({
-    id,
-    projectId: context.projectId,
-    type,
-    name,
-    properties,
-  });
+  const profileId = payload.profileId ?? context.deviceId;
+
+  await Promise.all([
+    upsertGroup({
+      id,
+      projectId: context.projectId,
+      type,
+      name,
+      properties,
+    }),
+    upsertProfile({
+      id: profileId,
+      projectId: context.projectId,
+      isExternal: !!(payload.profileId ?? context.identity?.profileId),
+      groups: [id],
+    }),
+  ]);
 }
 
 export async function handler(

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 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/start/src/components/events/table/columns.tsx

@@ -76,7 +76,6 @@ export function useColumns() {
             <span className="flex min-w-0 flex-1 gap-2">
               <button
                 className="min-w-0 max-w-full truncate text-left font-medium hover:underline"
-                title={fullTitle}
                 onClick={() => {
                   pushModal('EventDetails', {
                     id: row.original.id,
@@ -84,6 +83,7 @@ export function useColumns() {
                     projectId: row.original.projectId,
                   });
                 }}
+                title={fullTitle}
                 type="button"
               >
                 <span className="block truncate">{renderName()}</span>
@@ -204,6 +204,32 @@ export function useColumns() {
         );
       },
     },
+    {
+      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',

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

@@ -0,0 +1,53 @@
+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 function useGroupColumns(): ColumnDef<IServiceGroup>[] {
+  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: '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 { 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 IServiceGroup[];
+
+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 as IServiceGroup).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<IServiceGroup>;
+  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/profiles/profile-groups.tsx

@@ -0,0 +1,52 @@
+import { ProjectLink } from '@/components/links';
+import { Widget } from '@/components/widget';
+import { useTRPC } from '@/integrations/trpc/react';
+import { WidgetHead } from '../overview/overview-widget';
+import { useQuery } from '@tanstack/react-query';
+import { FullPageEmptyState } from '../full-page-empty-state';
+
+type 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) return null;
+
+  return (
+    <Widget className="w-full">
+      <WidgetHead>
+        <div className="title">Groups</div>
+      </WidgetHead>
+      {query.data?.length ? (
+        <div className="flex flex-wrap gap-2 p-4">
+          {query.data.map((group) => (
+            <ProjectLink
+              key={group.id}
+              href={`/groups/${encodeURIComponent(group.id)}`}
+              className="flex items-center gap-2 rounded-md border bg-muted/50 px-3 py-2 hover:bg-muted transition-colors"
+            >
+              <div>
+                <div className="text-sm font-medium">{group.name}</div>
+                <div className="text-xs text-muted-foreground">
+                  {group.type} · {group.id}
+                </div>
+              </div>
+            </ProjectLink>
+          ))}
+        </div>
+      ) : query.isLoading ? null : (
+        <FullPageEmptyState title="No groups found" className="p-4" />
+      )}
+    </Widget>
+  );
+};

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/report-chart/funnel/chart.tsx

@@ -166,7 +166,8 @@ export function Tables({
         metric: 'sum',
         options: funnelOptions,
       },
-      stepIndex, // Pass the step index for funnel queries
+      stepIndex,
+      breakdownValues: breakdowns,
     });
   };
   return (

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

@@ -270,6 +270,27 @@ export function useColumns() {
       header: 'Device ID',
       size: 120,
     },
+    {
+      accessorKey: 'groups',
+      header: 'Groups',
+      size: 200,
+      cell: ({ row }) => {
+        const { groups } = row.original;
+        if (!groups?.length) return null;
+        return (
+          <div className="flex flex-wrap gap-1">
+            {groups.map((g) => (
+              <span
+                key={g}
+                className="rounded bg-muted px-1.5 py-0.5 text-xs font-mono"
+              >
+                {g}
+              </span>
+            ))}
+          </div>
+        );
+      },
+    },
   ];
 
   return columns;

apps/start/src/components/ui/data-table/data-table-toolbar.tsx

@@ -1,7 +1,6 @@
 import type { Column, Table } from '@tanstack/react-table';
 import { SearchIcon, X, XIcon } from 'lucide-react';
-import * as React from 'react';
-
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { DataTableDateFilter } from '@/components/ui/data-table/data-table-date-filter';
 import { DataTableFacetedFilter } from '@/components/ui/data-table/data-table-faceted-filter';
@@ -23,12 +22,12 @@ export function DataTableToolbarContainer({
 }: React.ComponentProps<'div'>) {
   return (
     <div
-      role="toolbar"
       aria-orientation="horizontal"
       className={cn(
-        'flex flex-1 items-start justify-between gap-2 mb-2',
-        className,
+        'mb-2 flex flex-1 items-start justify-between gap-2',
+        className
       )}
+      role="toolbar"
       {...props}
     />
   );
@@ -47,12 +46,12 @@ export function DataTableToolbar<TData>({
   });
   const isFiltered = table.getState().columnFilters.length > 0;
 
-  const columns = React.useMemo(
+  const columns = useMemo(
     () => table.getAllColumns().filter((column) => column.getCanFilter()),
-    [table],
+    [table]
   );
 
-  const onReset = React.useCallback(() => {
+  const onReset = useCallback(() => {
     table.resetColumnFilters();
   }, [table]);
 
@@ -61,23 +60,23 @@ export function DataTableToolbar<TData>({
       <div className="flex flex-1 flex-wrap items-center gap-2">
         {globalSearchKey && (
           <AnimatedSearchInput
+            onChange={setSearch}
             placeholder={globalSearchPlaceholder ?? 'Search'}
             value={search}
-            onChange={setSearch}
           />
         )}
         {columns.map((column) => (
-          <DataTableToolbarFilter key={column.id} column={column} />
+          <DataTableToolbarFilter column={column} key={column.id} />
         ))}
         {isFiltered && (
           <Button
             aria-label="Reset filters"
-            variant="outline"
-            size="sm"
             className="border-dashed"
             onClick={onReset}
+            size="sm"
+            variant="outline"
           >
-            <XIcon className="size-4 mr-2" />
+            <XIcon className="mr-2 size-4" />
             Reset
           </Button>
         )}
@@ -99,20 +98,22 @@ function DataTableToolbarFilter<TData>({
   {
     const columnMeta = column.columnDef.meta;
 
-    const getTitle = React.useCallback(() => {
+    const getTitle = useCallback(() => {
       return columnMeta?.label ?? columnMeta?.placeholder ?? column.id;
     }, [columnMeta, column]);
 
-    const onFilterRender = React.useCallback(() => {
-      if (!columnMeta?.variant) return null;
+    const onFilterRender = useCallback(() => {
+      if (!columnMeta?.variant) {
+        return null;
+      }
 
       switch (columnMeta.variant) {
         case 'text':
           return (
             <AnimatedSearchInput
+              onChange={(value) => column.setFilterValue(value)}
               placeholder={columnMeta.placeholder ?? columnMeta.label}
               value={(column.getFilterValue() as string) ?? ''}
-              onChange={(value) => column.setFilterValue(value)}
             />
           );
 
@@ -120,12 +121,12 @@ function DataTableToolbarFilter<TData>({
           return (
             <div className="relative">
               <Input
-                type="number"
-                inputMode="numeric"
-                placeholder={getTitle()}
-                value={(column.getFilterValue() as string) ?? ''}
-                onChange={(event) => column.setFilterValue(event.target.value)}
                 className={cn('h-8 w-[120px]', columnMeta.unit && 'pr-8')}
+                inputMode="numeric"
+                onChange={(event) => column.setFilterValue(event.target.value)}
+                placeholder={getTitle()}
+                type="number"
+                value={(column.getFilterValue() as string) ?? ''}
               />
               {columnMeta.unit && (
                 <span className="absolute top-0 right-0 bottom-0 flex items-center rounded-r-md bg-accent px-2 text-muted-foreground text-sm">
@@ -143,8 +144,8 @@ function DataTableToolbarFilter<TData>({
           return (
             <DataTableDateFilter
               column={column}
-              title={getTitle()}
               multiple={columnMeta.variant === 'dateRange'}
+              title={getTitle()}
             />
           );
 
@@ -153,9 +154,9 @@ function DataTableToolbarFilter<TData>({
           return (
             <DataTableFacetedFilter
               column={column}
-              title={getTitle()}
-              options={columnMeta.options ?? []}
               multiple={columnMeta.variant === 'multiSelect'}
+              options={columnMeta.options ?? []}
+              title={getTitle()}
             />
           );
 
@@ -179,11 +180,11 @@ export function AnimatedSearchInput({
   value,
   onChange,
 }: AnimatedSearchInputProps) {
-  const [isFocused, setIsFocused] = React.useState(false);
-  const inputRef = React.useRef<HTMLInputElement | null>(null);
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
   const isExpanded = isFocused || (value?.length ?? 0) > 0;
 
-  const handleClear = React.useCallback(() => {
+  const handleClear = useCallback(() => {
     onChange('');
     // Re-focus after clearing
     requestAnimationFrame(() => inputRef.current?.focus());
@@ -191,34 +192,35 @@ export function AnimatedSearchInput({
 
   return (
     <div
+      aria-label={placeholder ?? 'Search'}
       className={cn(
-        'relative flex h-8 items-center rounded-md border border-input bg-background text-sm transition-[width] duration-300 ease-out',
+        'relative flex items-center rounded-md border border-input bg-background text-sm transition-[width] duration-300 ease-out',
         'focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background',
-        isExpanded ? 'w-56 lg:w-72' : 'w-32',
+        'h-8 min-h-8',
+        isExpanded ? 'w-56 lg:w-72' : 'w-32'
       )}
       role="search"
-      aria-label={placeholder ?? 'Search'}
     >
-      <SearchIcon className="size-4 ml-2 shrink-0" />
+      <SearchIcon className="ml-2 size-4 shrink-0" />
 
       <Input
-        ref={inputRef}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder={placeholder}
         className={cn(
-          'absolute inset-0 -top-px h-8 w-full rounded-md border-0 bg-transparent pl-7 pr-7 shadow-none',
+          'absolute inset-0 h-full w-full rounded-md border-0 bg-transparent py-2 pr-7 pl-7 shadow-none',
           'focus-visible:ring-0 focus-visible:ring-offset-0',
           'transition-opacity duration-200',
-          'font-medium text-[14px] truncate align-baseline',
+          'truncate align-baseline font-medium text-[14px]'
         )}
-        onFocus={() => setIsFocused(true)}
         onBlur={() => setIsFocused(false)}
+        onChange={(e) => onChange(e.target.value)}
+        onFocus={() => setIsFocused(true)}
+        placeholder={placeholder}
+        ref={inputRef}
+        size="sm"
+        value={value}
       />
 
       {isExpanded && value && (
         <button
-          type="button"
           aria-label="Clear search"
           className="absolute right-1 flex size-6 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground"
           onClick={(e) => {
@@ -226,6 +228,7 @@ export function AnimatedSearchInput({
             e.stopPropagation();
             handleClear();
           }}
+          type="button"
         >
           <X className="size-4" />
         </button>

apps/start/src/components/ui/select.tsx

@@ -1,7 +1,6 @@
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
 import type * as React from 'react';
-
 import { cn } from '@/lib/utils';
 
 function Select({
@@ -32,12 +31,12 @@ function SelectTrigger({
 }) {
   return (
     <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        "flex w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[size=default]:h-8 data-[size=sm]:h-8 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:hover:bg-input/50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
       )}
+      data-size={size}
+      data-slot="select-trigger"
       {...props}
     >
       {children}
@@ -57,13 +56,13 @@ function SelectContent({
   return (
     <SelectPrimitive.Portal>
       <SelectPrimitive.Content
-        data-slot="select-content"
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in',
           position === 'popper' &&
-            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-          className,
+            'data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1',
+          className
         )}
+        data-slot="select-content"
         position={position}
         {...props}
       >
@@ -72,7 +71,7 @@ function SelectContent({
           className={cn(
             'p-1',
             position === 'popper' &&
-              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
+              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1'
           )}
         >
           {children}
@@ -89,8 +88,8 @@ function SelectLabel({
 }: React.ComponentProps<typeof SelectPrimitive.Label>) {
   return (
     <SelectPrimitive.Label
+      className={cn('px-2 py-1.5 text-muted-foreground text-xs', className)}
       data-slot="select-label"
-      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
       {...props}
     />
   );
@@ -103,11 +102,11 @@ function SelectItem({
 }: React.ComponentProps<typeof SelectPrimitive.Item>) {
   return (
     <SelectPrimitive.Item
-      data-slot="select-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className,
+        "relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
       )}
+      data-slot="select-item"
       {...props}
     >
       <span className="absolute right-2 flex size-3.5 items-center justify-center">
@@ -126,8 +125,8 @@ function SelectSeparator({
 }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
   return (
     <SelectPrimitive.Separator
+      className={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}
       data-slot="select-separator"
-      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
       {...props}
     />
   );
@@ -139,11 +138,11 @@ function SelectScrollUpButton({
 }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
   return (
     <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
       className={cn(
         'flex cursor-default items-center justify-center py-1',
-        className,
+        className
       )}
+      data-slot="select-scroll-up-button"
       {...props}
     >
       <ChevronUpIcon className="size-4" />
@@ -157,11 +156,11 @@ function SelectScrollDownButton({
 }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
   return (
     <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
       className={cn(
         'flex cursor-default items-center justify-center py-1',
-        className,
+        className
       )}
+      data-slot="select-scroll-down-button"
       {...props}
     >
       <ChevronDownIcon className="size-4" />

apps/start/src/modals/add-group.tsx

@@ -0,0 +1,118 @@
+import { ButtonContainer } from '@/components/button-container';
+import { InputWithLabel } from '@/components/forms/input-with-label';
+import { Button } from '@/components/ui/button';
+import { useAppParams } from '@/hooks/use-app-params';
+import { handleError, useTRPC } from '@/integrations/trpc/react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { PlusIcon, Trash2Icon } from 'lucide-react';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { popModal } from '.';
+import { ModalContent, ModalHeader } from './Modal/Container';
+
+interface IForm {
+  id: string;
+  type: string;
+  name: string;
+  properties: { key: string; value: string }[];
+}
+
+export default function AddGroup() {
+  const { projectId } = useAppParams();
+  const queryClient = useQueryClient();
+  const trpc = useTRPC();
+
+  const { register, handleSubmit, control, formState } = useForm<IForm>({
+    defaultValues: {
+      id: '',
+      type: '',
+      name: '',
+      properties: [],
+    },
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'properties',
+  });
+
+  const mutation = useMutation(
+    trpc.group.create.mutationOptions({
+      onSuccess() {
+        queryClient.invalidateQueries(trpc.group.list.pathFilter());
+        queryClient.invalidateQueries(trpc.group.types.pathFilter());
+        toast('Success', { description: 'Group created.' });
+        popModal();
+      },
+      onError: handleError,
+    }),
+  );
+
+  return (
+    <ModalContent>
+      <ModalHeader title="Add group" />
+      <form
+        className="flex flex-col gap-4"
+        onSubmit={handleSubmit(({ properties, ...values }) => {
+          const props = Object.fromEntries(
+            properties
+              .filter((p) => p.key.trim() !== '')
+              .map((p) => [p.key.trim(), String(p.value)]),
+          );
+          mutation.mutate({ projectId, ...values, properties: props });
+        })}
+      >
+        <InputWithLabel label="ID" placeholder="acme-corp" {...register('id', { required: true })} autoFocus />
+        <InputWithLabel label="Name" placeholder="Acme Corp" {...register('name', { required: true })} />
+        <InputWithLabel label="Type" placeholder="company" {...register('type', { required: true })} />
+
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium">Properties</span>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => append({ key: '', value: '' })}
+            >
+              <PlusIcon className="mr-1 size-3" />
+              Add
+            </Button>
+          </div>
+          {fields.map((field, index) => (
+            <div key={field.id} className="flex gap-2">
+              <input
+                className="h-9 flex-1 rounded-md border bg-background px-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+                placeholder="key"
+                {...register(`properties.${index}.key`)}
+              />
+              <input
+                className="h-9 flex-1 rounded-md border bg-background px-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+                placeholder="value"
+                {...register(`properties.${index}.value`)}
+              />
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="shrink-0"
+                onClick={() => remove(index)}
+              >
+                <Trash2Icon className="size-4" />
+              </Button>
+            </div>
+          ))}
+        </div>
+
+        <ButtonContainer>
+          <Button type="button" variant="outline" onClick={() => popModal()}>
+            Cancel
+          </Button>
+          <Button type="submit" disabled={!formState.isDirty || mutation.isPending}>
+            Create
+          </Button>
+        </ButtonContainer>
+      </form>
+    </ModalContent>
+  );
+}

apps/start/src/modals/edit-group.tsx

@@ -0,0 +1,120 @@
+import { ButtonContainer } from '@/components/button-container';
+import { InputWithLabel } from '@/components/forms/input-with-label';
+import { Button } from '@/components/ui/button';
+import { handleError, useTRPC } from '@/integrations/trpc/react';
+import type { IServiceGroup } from '@openpanel/db';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { PlusIcon, Trash2Icon } from 'lucide-react';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { popModal } from '.';
+import { ModalContent, ModalHeader } from './Modal/Container';
+
+interface IForm {
+  type: string;
+  name: string;
+  properties: { key: string; value: string }[];
+}
+
+type EditGroupProps = Pick<IServiceGroup, 'id' | 'projectId' | 'name' | 'type' | 'properties'>;
+
+export default function EditGroup({ id, projectId, name, type, properties }: EditGroupProps) {
+  const queryClient = useQueryClient();
+  const trpc = useTRPC();
+
+  const { register, handleSubmit, control, formState } = useForm<IForm>({
+    defaultValues: {
+      type,
+      name,
+      properties: Object.entries(properties as Record<string, string>).map(([key, value]) => ({
+        key,
+        value: String(value),
+      })),
+    },
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'properties',
+  });
+
+  const mutation = useMutation(
+    trpc.group.update.mutationOptions({
+      onSuccess() {
+        queryClient.invalidateQueries(trpc.group.list.pathFilter());
+        queryClient.invalidateQueries(trpc.group.byId.pathFilter());
+        queryClient.invalidateQueries(trpc.group.types.pathFilter());
+        toast('Success', { description: 'Group updated.' });
+        popModal();
+      },
+      onError: handleError,
+    }),
+  );
+
+  return (
+    <ModalContent>
+      <ModalHeader title="Edit group" />
+      <form
+        className="flex flex-col gap-4"
+        onSubmit={handleSubmit(({ properties: formProps, ...values }) => {
+          const props = Object.fromEntries(
+            formProps
+              .filter((p) => p.key.trim() !== '')
+              .map((p) => [p.key.trim(), String(p.value)]),
+          );
+          mutation.mutate({ id, projectId, ...values, properties: props });
+        })}
+      >
+        <InputWithLabel label="Name" {...register('name', { required: true })} />
+        <InputWithLabel label="Type" {...register('type', { required: true })} />
+
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium">Properties</span>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => append({ key: '', value: '' })}
+            >
+              <PlusIcon className="mr-1 size-3" />
+              Add
+            </Button>
+          </div>
+          {fields.map((field, index) => (
+            <div key={field.id} className="flex gap-2">
+              <input
+                className="h-9 flex-1 rounded-md border bg-background px-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+                placeholder="key"
+                {...register(`properties.${index}.key`)}
+              />
+              <input
+                className="h-9 flex-1 rounded-md border bg-background px-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+                placeholder="value"
+                {...register(`properties.${index}.value`)}
+              />
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="shrink-0"
+                onClick={() => remove(index)}
+              >
+                <Trash2Icon className="size-4" />
+              </Button>
+            </div>
+          ))}
+        </div>
+
+        <ButtonContainer>
+          <Button type="button" variant="outline" onClick={() => popModal()}>
+            Cancel
+          </Button>
+          <Button type="submit" disabled={!formState.isDirty || mutation.isPending}>
+            Update
+          </Button>
+        </ButtonContainer>
+      </form>
+    </ModalContent>
+  );
+}

apps/start/src/modals/index.tsx

@@ -1,7 +1,7 @@
-import PageDetails from './page-details';
 import { createPushModal } from 'pushmodal';
 import AddClient from './add-client';
 import AddDashboard from './add-dashboard';
+import AddGroup from './add-group';
 import AddImport from './add-import';
 import AddIntegration from './add-integration';
 import AddNotificationRule from './add-notification-rule';
@@ -16,6 +16,7 @@ import DateTimePicker from './date-time-picker';
 import EditClient from './edit-client';
 import EditDashboard from './edit-dashboard';
 import EditEvent from './edit-event';
+import EditGroup from './edit-group';
 import EditMember from './edit-member';
 import EditReference from './edit-reference';
 import EditReport from './edit-report';
@@ -23,6 +24,7 @@ import EventDetails from './event-details';
 import Instructions from './Instructions';
 import OverviewChartDetails from './overview-chart-details';
 import OverviewFilters from './overview-filters';
+import PageDetails from './page-details';
 import RequestPasswordReset from './request-reset-password';
 import SaveReport from './save-report';
 import SelectBillingPlan from './select-billing-plan';
@@ -36,6 +38,8 @@ import { op } from '@/utils/op';
 
 const modals = {
   PageDetails,
+  AddGroup,
+  EditGroup,
   OverviewTopPagesModal,
   OverviewTopGenericModal,
   RequestPasswordReset,

apps/start/src/modals/view-chart-users.tsx

@@ -281,9 +281,10 @@ function ChartUsersView({ chartData, report, date }: ChartUsersViewProps) {
 interface FunnelUsersViewProps {
   report: IReportInput;
   stepIndex: number;
+  breakdownValues?: string[];
 }
 
-function FunnelUsersView({ report, stepIndex }: FunnelUsersViewProps) {
+function FunnelUsersView({ report, stepIndex, breakdownValues }: FunnelUsersViewProps) {
   const trpc = useTRPC();
   const [showDropoffs, setShowDropoffs] = useState(false);
 
@@ -306,6 +307,7 @@ function FunnelUsersView({ report, stepIndex }: FunnelUsersViewProps) {
             ? report.options.funnelGroup
             : undefined,
         breakdowns: report.breakdowns,
+        breakdownValues: breakdownValues,
       },
       {
         enabled: stepIndex !== undefined,
@@ -384,13 +386,14 @@ type ViewChartUsersProps =
       type: 'funnel';
       report: IReportInput;
       stepIndex: number;
+      breakdownValues?: string[];
     };
 
 // Main component that routes to the appropriate view
 export default function ViewChartUsers(props: ViewChartUsersProps) {
   if (props.type === 'funnel') {
     return (
-      <FunnelUsersView report={props.report} stepIndex={props.stepIndex} />
+      <FunnelUsersView report={props.report} stepIndex={props.stepIndex} breakdownValues={props.breakdownValues} />
     );
   }
 

apps/start/src/routeTree.gen.ts

@@ -64,7 +64,6 @@ import { Route as AppOrganizationIdProjectIdSessionsSessionIdRouteImport } from
 import { Route as AppOrganizationIdProjectIdReportsReportIdRouteImport } from './routes/_app.$organizationId.$projectId.reports_.$reportId'
 import { Route as AppOrganizationIdProjectIdProfilesTabsRouteImport } from './routes/_app.$organizationId.$projectId.profiles._tabs'
 import { Route as AppOrganizationIdProjectIdNotificationsTabsRouteImport } from './routes/_app.$organizationId.$projectId.notifications._tabs'
-import { Route as AppOrganizationIdProjectIdGroupsGroupIdRouteImport } from './routes/_app.$organizationId.$projectId.groups_.$groupId'
 import { Route as AppOrganizationIdProjectIdEventsTabsRouteImport } from './routes/_app.$organizationId.$projectId.events._tabs'
 import { Route as AppOrganizationIdProjectIdDashboardsDashboardIdRouteImport } from './routes/_app.$organizationId.$projectId.dashboards_.$dashboardId'
 import { Route as AppOrganizationIdProjectIdSettingsTabsIndexRouteImport } from './routes/_app.$organizationId.$projectId.settings._tabs.index'
@@ -84,12 +83,16 @@ import { Route as AppOrganizationIdProjectIdProfilesTabsAnonymousRouteImport } f
 import { Route as AppOrganizationIdProjectIdProfilesProfileIdTabsRouteImport } from './routes/_app.$organizationId.$projectId.profiles.$profileId._tabs'
 import { Route as AppOrganizationIdProjectIdNotificationsTabsRulesRouteImport } from './routes/_app.$organizationId.$projectId.notifications._tabs.rules'
 import { Route as AppOrganizationIdProjectIdNotificationsTabsNotificationsRouteImport } from './routes/_app.$organizationId.$projectId.notifications._tabs.notifications'
+import { Route as AppOrganizationIdProjectIdGroupsGroupIdTabsRouteImport } from './routes/_app.$organizationId.$projectId.groups_.$groupId._tabs'
 import { Route as AppOrganizationIdProjectIdEventsTabsStatsRouteImport } from './routes/_app.$organizationId.$projectId.events._tabs.stats'
 import { Route as AppOrganizationIdProjectIdEventsTabsEventsRouteImport } from './routes/_app.$organizationId.$projectId.events._tabs.events'
 import { Route as AppOrganizationIdProjectIdEventsTabsConversionsRouteImport } from './routes/_app.$organizationId.$projectId.events._tabs.conversions'
 import { Route as AppOrganizationIdProjectIdProfilesProfileIdTabsIndexRouteImport } from './routes/_app.$organizationId.$projectId.profiles.$profileId._tabs.index'
+import { Route as AppOrganizationIdProjectIdGroupsGroupIdTabsIndexRouteImport } from './routes/_app.$organizationId.$projectId.groups_.$groupId._tabs.index'
 import { Route as AppOrganizationIdProjectIdProfilesProfileIdTabsSessionsRouteImport } from './routes/_app.$organizationId.$projectId.profiles.$profileId._tabs.sessions'
 import { Route as AppOrganizationIdProjectIdProfilesProfileIdTabsEventsRouteImport } from './routes/_app.$organizationId.$projectId.profiles.$profileId._tabs.events'
+import { Route as AppOrganizationIdProjectIdGroupsGroupIdTabsMembersRouteImport } from './routes/_app.$organizationId.$projectId.groups_.$groupId._tabs.members'
+import { Route as AppOrganizationIdProjectIdGroupsGroupIdTabsEventsRouteImport } from './routes/_app.$organizationId.$projectId.groups_.$groupId._tabs.events'
 
 const AppOrganizationIdProfileRouteImport = createFileRoute(
   '/_app/$organizationId/profile',
@@ -115,6 +118,9 @@ const AppOrganizationIdProjectIdEventsRouteImport = createFileRoute(
 const AppOrganizationIdProjectIdProfilesProfileIdRouteImport = createFileRoute(
   '/_app/$organizationId/$projectId/profiles/$profileId',
 )()
+const AppOrganizationIdProjectIdGroupsGroupIdRouteImport = createFileRoute(
+  '/_app/$organizationId/$projectId/groups_/$groupId',
+)()
 
 const UnsubscribeRoute = UnsubscribeRouteImport.update({
   id: '/unsubscribe',
@@ -376,6 +382,12 @@ const AppOrganizationIdProjectIdProfilesProfileIdRoute =
     path: '/$profileId',
     getParentRoute: () => AppOrganizationIdProjectIdProfilesRoute,
   } as any)
+const AppOrganizationIdProjectIdGroupsGroupIdRoute =
+  AppOrganizationIdProjectIdGroupsGroupIdRouteImport.update({
+    id: '/groups_/$groupId',
+    path: '/groups/$groupId',
+    getParentRoute: () => AppOrganizationIdProjectIdRoute,
+  } as any)
 const AppOrganizationIdProfileTabsIndexRoute =
   AppOrganizationIdProfileTabsIndexRouteImport.update({
     id: '/',
@@ -451,12 +463,6 @@ const AppOrganizationIdProjectIdNotificationsTabsRoute =
     id: '/_tabs',
     getParentRoute: () => AppOrganizationIdProjectIdNotificationsRoute,
   } as any)
-const AppOrganizationIdProjectIdGroupsGroupIdRoute =
-  AppOrganizationIdProjectIdGroupsGroupIdRouteImport.update({
-    id: '/groups_/$groupId',
-    path: '/groups/$groupId',
-    getParentRoute: () => AppOrganizationIdProjectIdRoute,
-  } as any)
 const AppOrganizationIdProjectIdEventsTabsRoute =
   AppOrganizationIdProjectIdEventsTabsRouteImport.update({
     id: '/_tabs',
@@ -569,6 +575,11 @@ const AppOrganizationIdProjectIdNotificationsTabsNotificationsRoute =
     path: '/notifications',
     getParentRoute: () => AppOrganizationIdProjectIdNotificationsTabsRoute,
   } as any)
+const AppOrganizationIdProjectIdGroupsGroupIdTabsRoute =
+  AppOrganizationIdProjectIdGroupsGroupIdTabsRouteImport.update({
+    id: '/_tabs',
+    getParentRoute: () => AppOrganizationIdProjectIdGroupsGroupIdRoute,
+  } as any)
 const AppOrganizationIdProjectIdEventsTabsStatsRoute =
   AppOrganizationIdProjectIdEventsTabsStatsRouteImport.update({
     id: '/stats',
@@ -593,6 +604,12 @@ const AppOrganizationIdProjectIdProfilesProfileIdTabsIndexRoute =
     path: '/',
     getParentRoute: () => AppOrganizationIdProjectIdProfilesProfileIdTabsRoute,
   } as any)
+const AppOrganizationIdProjectIdGroupsGroupIdTabsIndexRoute =
+  AppOrganizationIdProjectIdGroupsGroupIdTabsIndexRouteImport.update({
+    id: '/',
+    path: '/',
+    getParentRoute: () => AppOrganizationIdProjectIdGroupsGroupIdTabsRoute,
+  } as any)
 const AppOrganizationIdProjectIdProfilesProfileIdTabsSessionsRoute =
   AppOrganizationIdProjectIdProfilesProfileIdTabsSessionsRouteImport.update({
     id: '/sessions',
@@ -605,6 +622,18 @@ const AppOrganizationIdProjectIdProfilesProfileIdTabsEventsRoute =
     path: '/events',
     getParentRoute: () => AppOrganizationIdProjectIdProfilesProfileIdTabsRoute,
   } as any)
+const AppOrganizationIdProjectIdGroupsGroupIdTabsMembersRoute =
+  AppOrganizationIdProjectIdGroupsGroupIdTabsMembersRouteImport.update({
+    id: '/members',
+    path: '/members',
+    getParentRoute: () => AppOrganizationIdProjectIdGroupsGroupIdTabsRoute,
+  } as any)
+const AppOrganizationIdProjectIdGroupsGroupIdTabsEventsRoute =
+  AppOrganizationIdProjectIdGroupsGroupIdTabsEventsRouteImport.update({
+    id: '/events',
+    path: '/events',
+    getParentRoute: () => AppOrganizationIdProjectIdGroupsGroupIdTabsRoute,
+  } as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
@@ -645,7 +674,6 @@ export interface FileRoutesByFullPath {
   '/$organizationId/$projectId/': typeof AppOrganizationIdProjectIdIndexRoute
   '/$organizationId/$projectId/dashboards/$dashboardId': typeof AppOrganizationIdProjectIdDashboardsDashboardIdRoute
   '/$organizationId/$projectId/events': typeof AppOrganizationIdProjectIdEventsTabsRouteWithChildren
-  '/$organizationId/$projectId/groups/$groupId': typeof AppOrganizationIdProjectIdGroupsGroupIdRoute
   '/$organizationId/$projectId/notifications': typeof AppOrganizationIdProjectIdNotificationsTabsRouteWithChildren
   '/$organizationId/$projectId/profiles': typeof AppOrganizationIdProjectIdProfilesTabsRouteWithChildren
   '/$organizationId/$projectId/reports/$reportId': typeof AppOrganizationIdProjectIdReportsReportIdRoute
@@ -662,6 +690,7 @@ export interface FileRoutesByFullPath {
   '/$organizationId/$projectId/events/conversions': typeof AppOrganizationIdProjectIdEventsTabsConversionsRoute
   '/$organizationId/$projectId/events/events': typeof AppOrganizationIdProjectIdEventsTabsEventsRoute
   '/$organizationId/$projectId/events/stats': typeof AppOrganizationIdProjectIdEventsTabsStatsRoute
+  '/$organizationId/$projectId/groups/$groupId': typeof AppOrganizationIdProjectIdGroupsGroupIdTabsRouteWithChildren
   '/$organizationId/$projectId/notifications/notifications': typeof AppOrganizationIdProjectIdNotificationsTabsNotificationsRoute
   '/$organizationId/$projectId/notifications/rules': typeof AppOrganizationIdProjectIdNotificationsTabsRulesRoute
   '/$organizationId/$projectId/profiles/$profileId': typeof AppOrganizationIdProjectIdProfilesProfileIdTabsRouteWithChildren
@@ -679,8 +708,11 @@ export interface FileRoutesByFullPath {
   '/$organizationId/$projectId/notifications/': typeof AppOrganizationIdProjectIdNotificationsTabsIndexRoute
   '/$organizationId/$projectId/profiles/': typeof AppOrganizationIdProjectIdProfilesTabsIndexRoute
   '/$organizationId/$projectId/settings/': typeof AppOrganizationIdProjectIdSettingsTabsIndexRoute
+  '/$organizationId/$projectId/groups/$groupId/events': typeof AppOrganizationIdProjectIdGroupsGroupIdTabsEventsRoute
+  '/$organizationId/$projectId/groups/$groupId/members': typeof AppOrganizationIdProjectIdGroupsGroupIdTabsMembersRoute
   '/$organizationId/$projectId/profiles/$profileId/events': typeof AppOrganizationIdProjectIdProfilesProfileIdTabsEventsRoute
   '/$organizationId/$projectId/profiles/$profileId/sessions': typeof AppOrganizationIdProjectIdProfilesProfileIdTabsSessionsRoute
+  '/$organizationId/$projectId/groups/$groupId/': typeof AppOrganizationIdProjectIdGroupsGroupIdTabsIndexRoute
   '/$organizationId/$projectId/profiles/$profileId/': typeof AppOrganizationIdProjectIdProfilesProfileIdTabsIndexRoute
 }
 export interface FileRoutesByTo {
@@ -720,7 +752,6 @@ export interface FileRoutesByTo {
   '/$organizationId/$projectId': typeof AppOrganizationIdProjectIdIndexRoute
   '/$organizationId/$projectId/dashboards/$dashboardId': typeof AppOrganizationIdProjectIdDashboardsDashboardIdRoute
   '/$organizationId/$projectId/events': typeof AppOrganizationIdProjectIdEventsTabsIndexRoute
-  '/$organizationId/$projectId/groups/$groupId': typeof AppOrganizationIdProjectIdGroupsGroupIdRoute
   '/$organizationId/$projectId/notifications': typeof AppOrganizationIdProjectIdNotificationsTabsIndexRoute
   '/$organizationId/$projectId/profiles': typeof AppOrganizationIdProjectIdProfilesTabsIndexRoute
   '/$organizationId/$projectId/reports/$reportId': typeof AppOrganizationIdProjectIdReportsReportIdRoute
@@ -734,6 +765,7 @@ export interface FileRoutesByTo {
   '/$organizationId/$projectId/events/conversions': typeof AppOrganizationIdProjectIdEventsTabsConversionsRoute
   '/$organizationId/$projectId/events/events': typeof AppOrganizationIdProjectIdEventsTabsEventsRoute
   '/$organizationId/$projectId/events/stats': typeof AppOrganizationIdProjectIdEventsTabsStatsRoute
+  '/$organizationId/$projectId/groups/$groupId': typeof AppOrganizationIdProjectIdGroupsGroupIdTabsIndexRoute
   '/$organizationId/$projectId/notifications/notifications': typeof AppOrganizationIdProjectIdNotificationsTabsNotificationsRoute
   '/$organizationId/$projectId/notifications/rules': typeof AppOrganizationIdProjectIdNotificationsTabsRulesRoute
   '/$organizationId/$projectId/profiles/$profileId': typeof AppOrganizationIdProjectIdProfilesProfileIdTabsIndexRoute
@@ -747,6 +779,8 @@ export interface FileRoutesByTo {
   '/$organizationId/$projectId/settings/imports': typeof AppOrganizationIdProjectIdSettingsTabsImportsRoute
   '/$organizationId/$projectId/settings/tracking': typeof AppOrganizationIdProjectIdSettingsTabsTrackingRoute
   '/$organizationId/$projectId/settings/widgets': typeof AppOrganizationIdProjectIdSettingsTabsWidgetsRoute
+  '/$organizationId/$projectId/groups/$groupId/events': typeof AppOrganizationIdProjectIdGroupsGroupIdTabsEventsRoute
+  '/$organizationId/$projectId/groups/$groupId/members': typeof AppOrganizationIdProjectIdGroupsGroupIdTabsMembersRoute
   '/$organizationId/$projectId/profiles/$profileId/events': typeof AppOrganizationIdProjectIdProfilesProfileIdTabsEventsRoute
   '/$organizationId/$projectId/profiles/$profileId/sessions': typeof AppOrganizationIdProjectIdProfilesProfileIdTabsSessionsRoute
 }
@@ -798,7 +832,6 @@ export interface FileRoutesById {
   '/_app/$organizationId/$projectId/dashboards_/$dashboardId': typeof AppOrganizationIdProjectIdDashboardsDashboardIdRoute
   '/_app/$organizationId/$projectId/events': typeof AppOrganizationIdProjectIdEventsRouteWithChildren
   '/_app/$organizationId/$projectId/events/_tabs': typeof AppOrganizationIdProjectIdEventsTabsRouteWithChildren
-  '/_app/$organizationId/$projectId/groups_/$groupId': typeof AppOrganizationIdProjectIdGroupsGroupIdRoute
   '/_app/$organizationId/$projectId/notifications': typeof AppOrganizationIdProjectIdNotificationsRouteWithChildren
   '/_app/$organizationId/$projectId/notifications/_tabs': typeof AppOrganizationIdProjectIdNotificationsTabsRouteWithChildren
   '/_app/$organizationId/$projectId/profiles': typeof AppOrganizationIdProjectIdProfilesRouteWithChildren
@@ -818,6 +851,8 @@ export interface FileRoutesById {
   '/_app/$organizationId/$projectId/events/_tabs/conversions': typeof AppOrganizationIdProjectIdEventsTabsConversionsRoute
   '/_app/$organizationId/$projectId/events/_tabs/events': typeof AppOrganizationIdProjectIdEventsTabsEventsRoute
   '/_app/$organizationId/$projectId/events/_tabs/stats': typeof AppOrganizationIdProjectIdEventsTabsStatsRoute
+  '/_app/$organizationId/$projectId/groups_/$groupId': typeof AppOrganizationIdProjectIdGroupsGroupIdRouteWithChildren
+  '/_app/$organizationId/$projectId/groups_/$groupId/_tabs': typeof AppOrganizationIdProjectIdGroupsGroupIdTabsRouteWithChildren
   '/_app/$organizationId/$projectId/notifications/_tabs/notifications': typeof AppOrganizationIdProjectIdNotificationsTabsNotificationsRoute
   '/_app/$organizationId/$projectId/notifications/_tabs/rules': typeof AppOrganizationIdProjectIdNotificationsTabsRulesRoute
   '/_app/$organizationId/$projectId/profiles/$profileId': typeof AppOrganizationIdProjectIdProfilesProfileIdRouteWithChildren
@@ -836,8 +871,11 @@ export interface FileRoutesById {
   '/_app/$organizationId/$projectId/notifications/_tabs/': typeof AppOrganizationIdProjectIdNotificationsTabsIndexRoute
   '/_app/$organizationId/$projectId/profiles/_tabs/': typeof AppOrganizationIdProjectIdProfilesTabsIndexRoute
   '/_app/$organizationId/$projectId/settings/_tabs/': typeof AppOrganizationIdProjectIdSettingsTabsIndexRoute
+  '/_app/$organizationId/$projectId/groups_/$groupId/_tabs/events': typeof AppOrganizationIdProjectIdGroupsGroupIdTabsEventsRoute
+  '/_app/$organizationId/$projectId/groups_/$groupId/_tabs/members': typeof AppOrganizationIdProjectIdGroupsGroupIdTabsMembersRoute
   '/_app/$organizationId/$projectId/profiles/$profileId/_tabs/events': typeof AppOrganizationIdProjectIdProfilesProfileIdTabsEventsRoute
   '/_app/$organizationId/$projectId/profiles/$profileId/_tabs/sessions': typeof AppOrganizationIdProjectIdProfilesProfileIdTabsSessionsRoute
+  '/_app/$organizationId/$projectId/groups_/$groupId/_tabs/': typeof AppOrganizationIdProjectIdGroupsGroupIdTabsIndexRoute
   '/_app/$organizationId/$projectId/profiles/$profileId/_tabs/': typeof AppOrganizationIdProjectIdProfilesProfileIdTabsIndexRoute
 }
 export interface FileRouteTypes {
@@ -881,7 +919,6 @@ export interface FileRouteTypes {
     | '/$organizationId/$projectId/'
     | '/$organizationId/$projectId/dashboards/$dashboardId'
     | '/$organizationId/$projectId/events'
-    | '/$organizationId/$projectId/groups/$groupId'
     | '/$organizationId/$projectId/notifications'
     | '/$organizationId/$projectId/profiles'
     | '/$organizationId/$projectId/reports/$reportId'
@@ -898,6 +935,7 @@ export interface FileRouteTypes {
     | '/$organizationId/$projectId/events/conversions'
     | '/$organizationId/$projectId/events/events'
     | '/$organizationId/$projectId/events/stats'
+    | '/$organizationId/$projectId/groups/$groupId'
     | '/$organizationId/$projectId/notifications/notifications'
     | '/$organizationId/$projectId/notifications/rules'
     | '/$organizationId/$projectId/profiles/$profileId'
@@ -915,8 +953,11 @@ export interface FileRouteTypes {
     | '/$organizationId/$projectId/notifications/'
     | '/$organizationId/$projectId/profiles/'
     | '/$organizationId/$projectId/settings/'
+    | '/$organizationId/$projectId/groups/$groupId/events'
+    | '/$organizationId/$projectId/groups/$groupId/members'
     | '/$organizationId/$projectId/profiles/$profileId/events'
     | '/$organizationId/$projectId/profiles/$profileId/sessions'
+    | '/$organizationId/$projectId/groups/$groupId/'
     | '/$organizationId/$projectId/profiles/$profileId/'
   fileRoutesByTo: FileRoutesByTo
   to:
@@ -956,7 +997,6 @@ export interface FileRouteTypes {
     | '/$organizationId/$projectId'
     | '/$organizationId/$projectId/dashboards/$dashboardId'
     | '/$organizationId/$projectId/events'
-    | '/$organizationId/$projectId/groups/$groupId'
     | '/$organizationId/$projectId/notifications'
     | '/$organizationId/$projectId/profiles'
     | '/$organizationId/$projectId/reports/$reportId'
@@ -970,6 +1010,7 @@ export interface FileRouteTypes {
     | '/$organizationId/$projectId/events/conversions'
     | '/$organizationId/$projectId/events/events'
     | '/$organizationId/$projectId/events/stats'
+    | '/$organizationId/$projectId/groups/$groupId'
     | '/$organizationId/$projectId/notifications/notifications'
     | '/$organizationId/$projectId/notifications/rules'
     | '/$organizationId/$projectId/profiles/$profileId'
@@ -983,6 +1024,8 @@ export interface FileRouteTypes {
     | '/$organizationId/$projectId/settings/imports'
     | '/$organizationId/$projectId/settings/tracking'
     | '/$organizationId/$projectId/settings/widgets'
+    | '/$organizationId/$projectId/groups/$groupId/events'
+    | '/$organizationId/$projectId/groups/$groupId/members'
     | '/$organizationId/$projectId/profiles/$profileId/events'
     | '/$organizationId/$projectId/profiles/$profileId/sessions'
   id:
@@ -1033,7 +1076,6 @@ export interface FileRouteTypes {
     | '/_app/$organizationId/$projectId/dashboards_/$dashboardId'
     | '/_app/$organizationId/$projectId/events'
     | '/_app/$organizationId/$projectId/events/_tabs'
-    | '/_app/$organizationId/$projectId/groups_/$groupId'
     | '/_app/$organizationId/$projectId/notifications'
     | '/_app/$organizationId/$projectId/notifications/_tabs'
     | '/_app/$organizationId/$projectId/profiles'
@@ -1053,6 +1095,8 @@ export interface FileRouteTypes {
     | '/_app/$organizationId/$projectId/events/_tabs/conversions'
     | '/_app/$organizationId/$projectId/events/_tabs/events'
     | '/_app/$organizationId/$projectId/events/_tabs/stats'
+    | '/_app/$organizationId/$projectId/groups_/$groupId'
+    | '/_app/$organizationId/$projectId/groups_/$groupId/_tabs'
     | '/_app/$organizationId/$projectId/notifications/_tabs/notifications'
     | '/_app/$organizationId/$projectId/notifications/_tabs/rules'
     | '/_app/$organizationId/$projectId/profiles/$profileId'
@@ -1071,8 +1115,11 @@ export interface FileRouteTypes {
     | '/_app/$organizationId/$projectId/notifications/_tabs/'
     | '/_app/$organizationId/$projectId/profiles/_tabs/'
     | '/_app/$organizationId/$projectId/settings/_tabs/'
+    | '/_app/$organizationId/$projectId/groups_/$groupId/_tabs/events'
+    | '/_app/$organizationId/$projectId/groups_/$groupId/_tabs/members'
     | '/_app/$organizationId/$projectId/profiles/$profileId/_tabs/events'
     | '/_app/$organizationId/$projectId/profiles/$profileId/_tabs/sessions'
+    | '/_app/$organizationId/$projectId/groups_/$groupId/_tabs/'
     | '/_app/$organizationId/$projectId/profiles/$profileId/_tabs/'
   fileRoutesById: FileRoutesById
 }
@@ -1432,6 +1479,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppOrganizationIdProjectIdProfilesProfileIdRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdProfilesRoute
     }
+    '/_app/$organizationId/$projectId/groups_/$groupId': {
+      id: '/_app/$organizationId/$projectId/groups_/$groupId'
+      path: '/groups/$groupId'
+      fullPath: '/$organizationId/$projectId/groups/$groupId'
+      preLoaderRoute: typeof AppOrganizationIdProjectIdGroupsGroupIdRouteImport
+      parentRoute: typeof AppOrganizationIdProjectIdRoute
+    }
     '/_app/$organizationId/profile/_tabs/': {
       id: '/_app/$organizationId/profile/_tabs/'
       path: '/'
@@ -1523,13 +1577,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppOrganizationIdProjectIdNotificationsTabsRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdNotificationsRoute
     }
-    '/_app/$organizationId/$projectId/groups_/$groupId': {
-      id: '/_app/$organizationId/$projectId/groups_/$groupId'
-      path: '/groups/$groupId'
-      fullPath: '/$organizationId/$projectId/groups/$groupId'
-      preLoaderRoute: typeof AppOrganizationIdProjectIdGroupsGroupIdRouteImport
-      parentRoute: typeof AppOrganizationIdProjectIdRoute
-    }
     '/_app/$organizationId/$projectId/events/_tabs': {
       id: '/_app/$organizationId/$projectId/events/_tabs'
       path: '/events'
@@ -1663,6 +1710,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppOrganizationIdProjectIdNotificationsTabsNotificationsRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdNotificationsTabsRoute
     }
+    '/_app/$organizationId/$projectId/groups_/$groupId/_tabs': {
+      id: '/_app/$organizationId/$projectId/groups_/$groupId/_tabs'
+      path: '/groups/$groupId'
+      fullPath: '/$organizationId/$projectId/groups/$groupId'
+      preLoaderRoute: typeof AppOrganizationIdProjectIdGroupsGroupIdTabsRouteImport
+      parentRoute: typeof AppOrganizationIdProjectIdGroupsGroupIdRoute
+    }
     '/_app/$organizationId/$projectId/events/_tabs/stats': {
       id: '/_app/$organizationId/$projectId/events/_tabs/stats'
       path: '/stats'
@@ -1691,6 +1745,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppOrganizationIdProjectIdProfilesProfileIdTabsIndexRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdProfilesProfileIdTabsRoute
     }
+    '/_app/$organizationId/$projectId/groups_/$groupId/_tabs/': {
+      id: '/_app/$organizationId/$projectId/groups_/$groupId/_tabs/'
+      path: '/'
+      fullPath: '/$organizationId/$projectId/groups/$groupId/'
+      preLoaderRoute: typeof AppOrganizationIdProjectIdGroupsGroupIdTabsIndexRouteImport
+      parentRoute: typeof AppOrganizationIdProjectIdGroupsGroupIdTabsRoute
+    }
     '/_app/$organizationId/$projectId/profiles/$profileId/_tabs/sessions': {
       id: '/_app/$organizationId/$projectId/profiles/$profileId/_tabs/sessions'
       path: '/sessions'
@@ -1705,6 +1766,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppOrganizationIdProjectIdProfilesProfileIdTabsEventsRouteImport
       parentRoute: typeof AppOrganizationIdProjectIdProfilesProfileIdTabsRoute
     }
+    '/_app/$organizationId/$projectId/groups_/$groupId/_tabs/members': {
+      id: '/_app/$organizationId/$projectId/groups_/$groupId/_tabs/members'
+      path: '/members'
+      fullPath: '/$organizationId/$projectId/groups/$groupId/members'
+      preLoaderRoute: typeof AppOrganizationIdProjectIdGroupsGroupIdTabsMembersRouteImport
+      parentRoute: typeof AppOrganizationIdProjectIdGroupsGroupIdTabsRoute
+    }
+    '/_app/$organizationId/$projectId/groups_/$groupId/_tabs/events': {
+      id: '/_app/$organizationId/$projectId/groups_/$groupId/_tabs/events'
+      path: '/events'
+      fullPath: '/$organizationId/$projectId/groups/$groupId/events'
+      preLoaderRoute: typeof AppOrganizationIdProjectIdGroupsGroupIdTabsEventsRouteImport
+      parentRoute: typeof AppOrganizationIdProjectIdGroupsGroupIdTabsRoute
+    }
   }
 }
 
@@ -1912,6 +1987,42 @@ const AppOrganizationIdProjectIdSettingsRouteWithChildren =
     AppOrganizationIdProjectIdSettingsRouteChildren,
   )
 
+interface AppOrganizationIdProjectIdGroupsGroupIdTabsRouteChildren {
+  AppOrganizationIdProjectIdGroupsGroupIdTabsEventsRoute: typeof AppOrganizationIdProjectIdGroupsGroupIdTabsEventsRoute
+  AppOrganizationIdProjectIdGroupsGroupIdTabsMembersRoute: typeof AppOrganizationIdProjectIdGroupsGroupIdTabsMembersRoute
+  AppOrganizationIdProjectIdGroupsGroupIdTabsIndexRoute: typeof AppOrganizationIdProjectIdGroupsGroupIdTabsIndexRoute
+}
+
+const AppOrganizationIdProjectIdGroupsGroupIdTabsRouteChildren: AppOrganizationIdProjectIdGroupsGroupIdTabsRouteChildren =
+  {
+    AppOrganizationIdProjectIdGroupsGroupIdTabsEventsRoute:
+      AppOrganizationIdProjectIdGroupsGroupIdTabsEventsRoute,
+    AppOrganizationIdProjectIdGroupsGroupIdTabsMembersRoute:
+      AppOrganizationIdProjectIdGroupsGroupIdTabsMembersRoute,
+    AppOrganizationIdProjectIdGroupsGroupIdTabsIndexRoute:
+      AppOrganizationIdProjectIdGroupsGroupIdTabsIndexRoute,
+  }
+
+const AppOrganizationIdProjectIdGroupsGroupIdTabsRouteWithChildren =
+  AppOrganizationIdProjectIdGroupsGroupIdTabsRoute._addFileChildren(
+    AppOrganizationIdProjectIdGroupsGroupIdTabsRouteChildren,
+  )
+
+interface AppOrganizationIdProjectIdGroupsGroupIdRouteChildren {
+  AppOrganizationIdProjectIdGroupsGroupIdTabsRoute: typeof AppOrganizationIdProjectIdGroupsGroupIdTabsRouteWithChildren
+}
+
+const AppOrganizationIdProjectIdGroupsGroupIdRouteChildren: AppOrganizationIdProjectIdGroupsGroupIdRouteChildren =
+  {
+    AppOrganizationIdProjectIdGroupsGroupIdTabsRoute:
+      AppOrganizationIdProjectIdGroupsGroupIdTabsRouteWithChildren,
+  }
+
+const AppOrganizationIdProjectIdGroupsGroupIdRouteWithChildren =
+  AppOrganizationIdProjectIdGroupsGroupIdRoute._addFileChildren(
+    AppOrganizationIdProjectIdGroupsGroupIdRouteChildren,
+  )
+
 interface AppOrganizationIdProjectIdRouteChildren {
   AppOrganizationIdProjectIdChatRoute: typeof AppOrganizationIdProjectIdChatRoute
   AppOrganizationIdProjectIdDashboardsRoute: typeof AppOrganizationIdProjectIdDashboardsRoute
@@ -1926,12 +2037,12 @@ interface AppOrganizationIdProjectIdRouteChildren {
   AppOrganizationIdProjectIdIndexRoute: typeof AppOrganizationIdProjectIdIndexRoute
   AppOrganizationIdProjectIdDashboardsDashboardIdRoute: typeof AppOrganizationIdProjectIdDashboardsDashboardIdRoute
   AppOrganizationIdProjectIdEventsRoute: typeof AppOrganizationIdProjectIdEventsRouteWithChildren
-  AppOrganizationIdProjectIdGroupsGroupIdRoute: typeof AppOrganizationIdProjectIdGroupsGroupIdRoute
   AppOrganizationIdProjectIdNotificationsRoute: typeof AppOrganizationIdProjectIdNotificationsRouteWithChildren
   AppOrganizationIdProjectIdProfilesRoute: typeof AppOrganizationIdProjectIdProfilesRouteWithChildren
   AppOrganizationIdProjectIdReportsReportIdRoute: typeof AppOrganizationIdProjectIdReportsReportIdRoute
   AppOrganizationIdProjectIdSessionsSessionIdRoute: typeof AppOrganizationIdProjectIdSessionsSessionIdRoute
   AppOrganizationIdProjectIdSettingsRoute: typeof AppOrganizationIdProjectIdSettingsRouteWithChildren
+  AppOrganizationIdProjectIdGroupsGroupIdRoute: typeof AppOrganizationIdProjectIdGroupsGroupIdRouteWithChildren
 }
 
 const AppOrganizationIdProjectIdRouteChildren: AppOrganizationIdProjectIdRouteChildren =
@@ -1958,8 +2069,6 @@ const AppOrganizationIdProjectIdRouteChildren: AppOrganizationIdProjectIdRouteCh
       AppOrganizationIdProjectIdDashboardsDashboardIdRoute,
     AppOrganizationIdProjectIdEventsRoute:
       AppOrganizationIdProjectIdEventsRouteWithChildren,
-    AppOrganizationIdProjectIdGroupsGroupIdRoute:
-      AppOrganizationIdProjectIdGroupsGroupIdRoute,
     AppOrganizationIdProjectIdNotificationsRoute:
       AppOrganizationIdProjectIdNotificationsRouteWithChildren,
     AppOrganizationIdProjectIdProfilesRoute:
@@ -1970,6 +2079,8 @@ const AppOrganizationIdProjectIdRouteChildren: AppOrganizationIdProjectIdRouteCh
       AppOrganizationIdProjectIdSessionsSessionIdRoute,
     AppOrganizationIdProjectIdSettingsRoute:
       AppOrganizationIdProjectIdSettingsRouteWithChildren,
+    AppOrganizationIdProjectIdGroupsGroupIdRoute:
+      AppOrganizationIdProjectIdGroupsGroupIdRouteWithChildren,
   }
 
 const AppOrganizationIdProjectIdRouteWithChildren =

apps/start/src/routes/_app.$organizationId.$projectId.groups.tsx

@@ -1,11 +1,12 @@
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
-import { createFileRoute, Link } from '@tanstack/react-router';
-import { Building2Icon } from 'lucide-react';
+import { createFileRoute } from '@tanstack/react-router';
+import { PlusIcon } from 'lucide-react';
 import { parseAsString, useQueryState } from 'nuqs';
+import { GroupsTable } from '@/components/groups/table';
 import { PageContainer } from '@/components/page-container';
 import { PageHeader } from '@/components/page-header';
-import { Badge } from '@/components/ui/badge';
-import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { useDataTablePagination } from '@/components/ui/data-table/data-table-hooks';
 import {
   Select,
   SelectContent,
@@ -15,9 +16,11 @@ import {
 } from '@/components/ui/select';
 import { useSearchQueryState } from '@/hooks/use-search-query-state';
 import { useTRPC } from '@/integrations/trpc/react';
-import { formatDateTime } from '@/utils/date';
+import { pushModal } from '@/modals';
 import { createProjectTitle } from '@/utils/title';
 
+const PAGE_SIZE = 50;
+
 export const Route = createFileRoute('/_app/$organizationId/$projectId/groups')(
   {
     component: Component,
@@ -28,13 +31,14 @@ export const Route = createFileRoute('/_app/$organizationId/$projectId/groups')(
 );
 
 function Component() {
-  const { projectId, organizationId } = Route.useParams();
+  const { projectId } = Route.useParams();
   const trpc = useTRPC();
-  const { search, setSearch, debouncedSearch } = useSearchQueryState();
+  const { debouncedSearch } = useSearchQueryState();
   const [typeFilter, setTypeFilter] = useQueryState(
     'type',
     parseAsString.withDefault('')
   );
+  const { page } = useDataTablePagination(PAGE_SIZE);
 
   const typesQuery = useQuery(trpc.group.types.queryOptions({ projectId }));
 
@@ -44,103 +48,53 @@ function Component() {
         projectId,
         search: debouncedSearch || undefined,
         type: typeFilter || undefined,
-        take: 100,
+        take: PAGE_SIZE,
+        cursor: (page - 1) * PAGE_SIZE,
       },
       { placeholderData: keepPreviousData }
     )
   );
 
-  const groups = groupsQuery.data?.data ?? [];
   const types = typesQuery.data ?? [];
 
   return (
     <PageContainer>
       <PageHeader
+        actions={
+          <Button onClick={() => pushModal('AddGroup')}>
+            <PlusIcon className="mr-2 size-4" />
+            Add group
+          </Button>
+        }
+        className="mb-8"
         description="Groups represent companies, teams, or other entities that events belong to."
         title="Groups"
       />
 
-      <div className="mb-6 flex flex-wrap gap-3">
-        <Input
-          className="w-64"
-          onChange={(e) => setSearch(e.target.value)}
-          placeholder="Search groups..."
-          value={search}
-        />
-        {types.length > 0 && (
-          <Select
-            onValueChange={(v) => setTypeFilter(v === 'all' ? '' : v)}
-            value={typeFilter || 'all'}
-          >
-            <SelectTrigger className="w-40">
-              <SelectValue placeholder="All types" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">All types</SelectItem>
-              {types.map((t) => (
-                <SelectItem key={t} value={t}>
-                  {t}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        )}
-      </div>
-
-      {groups.length === 0 ? (
-        <div className="flex flex-col items-center justify-center gap-3 py-24 text-muted-foreground">
-          <Building2Icon className="size-10 opacity-30" />
-          <p className="text-sm">No groups found</p>
-        </div>
-      ) : (
-        <div className="card overflow-hidden">
-          <table className="w-full text-sm">
-            <thead>
-              <tr className="border-b bg-def-100">
-                <th className="px-4 py-3 text-left font-medium text-muted-foreground">
-                  Name
-                </th>
-                <th className="px-4 py-3 text-left font-medium text-muted-foreground">
-                  ID
-                </th>
-                <th className="px-4 py-3 text-left font-medium text-muted-foreground">
-                  Type
-                </th>
-                <th className="px-4 py-3 text-left font-medium text-muted-foreground">
-                  Created
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {groups.map((group) => (
-                <tr
-                  className="border-b transition-colors last:border-0 hover:bg-def-100"
-                  key={`${group.projectId}-${group.id}`}
-                >
-                  <td className="px-4 py-3">
-                    <Link
-                      className="font-medium hover:underline"
-                      params={{ organizationId, projectId, groupId: group.id }}
-                      to="/$organizationId/$projectId/groups/$groupId"
-                    >
-                      {group.name}
-                    </Link>
-                  </td>
-                  <td className="px-4 py-3 font-mono text-muted-foreground text-xs">
-                    {group.id}
-                  </td>
-                  <td className="px-4 py-3">
-                    <Badge variant="outline">{group.type}</Badge>
-                  </td>
-                  <td className="px-4 py-3 text-muted-foreground">
-                    {formatDateTime(new Date(group.createdAt))}
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      )}
+      <GroupsTable
+        pageSize={PAGE_SIZE}
+        query={groupsQuery}
+        toolbarLeft={
+          types.length > 0 ? (
+            <Select
+              onValueChange={(v) => setTypeFilter(v === 'all' ? '' : v)}
+              value={typeFilter || 'all'}
+            >
+              <SelectTrigger className="w-40">
+                <SelectValue placeholder="All types" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All types</SelectItem>
+                {types.map((t) => (
+                  <SelectItem key={t} value={t}>
+                    {t}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          ) : null
+        }
+      />
     </PageContainer>
   );
 }

apps/start/src/routes/_app.$organizationId.$projectId.groups_.$groupId._tabs.events.tsx

@@ -0,0 +1,46 @@
+import { EventsTable } from '@/components/events/table';
+import { useReadColumnVisibility } from '@/components/ui/data-table/data-table-hooks';
+import { useEventQueryNamesFilter } from '@/hooks/use-event-query-filters';
+import { useTRPC } from '@/integrations/trpc/react';
+import { createProjectTitle } from '@/utils/title';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { createFileRoute } from '@tanstack/react-router';
+import { parseAsIsoDateTime, useQueryState } from 'nuqs';
+
+export const Route = createFileRoute(
+  '/_app/$organizationId/$projectId/groups_/$groupId/_tabs/events'
+)({
+  component: Component,
+  head: () => ({
+    meta: [{ title: createProjectTitle('Group events') }],
+  }),
+});
+
+function Component() {
+  const { projectId, groupId } = Route.useParams();
+  const trpc = useTRPC();
+  const [startDate] = useQueryState('startDate', parseAsIsoDateTime);
+  const [endDate] = useQueryState('endDate', parseAsIsoDateTime);
+  const [eventNames] = useEventQueryNamesFilter();
+  const columnVisibility = useReadColumnVisibility('events');
+
+  const query = useInfiniteQuery(
+    trpc.event.events.infiniteQueryOptions(
+      {
+        projectId,
+        groupId,
+        filters: [], // Always scope to group only; date + event names from toolbar still apply
+        startDate: startDate || undefined,
+        endDate: endDate || undefined,
+        events: eventNames,
+        columnVisibility: columnVisibility ?? {},
+      },
+      {
+        enabled: columnVisibility !== null,
+        getNextPageParam: (lastPage) => lastPage.meta.next,
+      }
+    )
+  );
+
+  return <EventsTable query={query} />;
+}

apps/start/src/routes/_app.$organizationId.$projectId.groups_.$groupId._tabs.index.tsx

@@ -0,0 +1,208 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { createFileRoute, Link } from '@tanstack/react-router';
+import { UsersIcon } from 'lucide-react';
+import FullPageLoadingState from '@/components/full-page-loading-state';
+import { OverviewMetricCard } from '@/components/overview/overview-metric-card';
+import { WidgetHead, WidgetTitle } from '@/components/overview/overview-widget';
+import { ProfileActivity } from '@/components/profiles/profile-activity';
+import { KeyValueGrid } from '@/components/ui/key-value-grid';
+import { Widget, WidgetBody } from '@/components/widget';
+import { WidgetTable } from '@/components/widget-table';
+import { useTRPC } from '@/integrations/trpc/react';
+import { formatDateTime, formatTimeAgoOrDateTime } from '@/utils/date';
+import { createProjectTitle } from '@/utils/title';
+
+const MEMBERS_PREVIEW_LIMIT = 13;
+
+export const Route = createFileRoute(
+  '/_app/$organizationId/$projectId/groups_/$groupId/_tabs/'
+)({
+  component: Component,
+  loader: async ({ context, params }) => {
+    await Promise.all([
+      context.queryClient.prefetchQuery(
+        context.trpc.group.activity.queryOptions({
+          id: params.groupId,
+          projectId: params.projectId,
+        })
+      ),
+    ]);
+  },
+  pendingComponent: FullPageLoadingState,
+  head: () => ({
+    meta: [{ title: createProjectTitle('Group') }],
+  }),
+});
+
+function Component() {
+  const { projectId, organizationId, groupId } = Route.useParams();
+  const trpc = useTRPC();
+
+  const group = useSuspenseQuery(
+    trpc.group.byId.queryOptions({ id: groupId, projectId })
+  );
+  const metrics = useSuspenseQuery(
+    trpc.group.metrics.queryOptions({ id: groupId, projectId })
+  );
+  const activity = useSuspenseQuery(
+    trpc.group.activity.queryOptions({ id: groupId, projectId })
+  );
+  const members = useSuspenseQuery(
+    trpc.group.members.queryOptions({ id: groupId, projectId })
+  );
+
+  const g = group.data;
+  const m = metrics.data?.[0];
+
+  if (!g) {
+    return null;
+  }
+
+  const properties = g.properties as Record<string, unknown>;
+
+  return (
+    <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+      {/* Metrics */}
+      {m && (
+        <div className="col-span-1 md:col-span-2">
+          <div className="card grid grid-cols-2 overflow-hidden rounded-md md:grid-cols-4">
+            <OverviewMetricCard
+              data={[]}
+              id="totalEvents"
+              isLoading={false}
+              label="Total Events"
+              metric={{ current: m.totalEvents, previous: null }}
+              unit=""
+            />
+            <OverviewMetricCard
+              data={[]}
+              id="uniqueMembers"
+              isLoading={false}
+              label="Unique Members"
+              metric={{ current: m.uniqueProfiles, previous: null }}
+              unit=""
+            />
+            <OverviewMetricCard
+              data={[]}
+              id="firstSeen"
+              isLoading={false}
+              label="First Seen"
+              metric={{
+                current: m.firstSeen ? new Date(m.firstSeen).getTime() : 0,
+                previous: null,
+              }}
+              unit="timeAgo"
+            />
+            <OverviewMetricCard
+              data={[]}
+              id="lastSeen"
+              isLoading={false}
+              label="Last Seen"
+              metric={{
+                current: m.lastSeen ? new Date(m.lastSeen).getTime() : 0,
+                previous: null,
+              }}
+              unit="timeAgo"
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Properties */}
+      <div className="col-span-1 md:col-span-2">
+        <Widget className="w-full">
+          <WidgetHead>
+            <div className="title">Group Information</div>
+          </WidgetHead>
+          <KeyValueGrid
+            className="border-0"
+            columns={3}
+            copyable
+            data={[
+              { name: 'id', value: g.id },
+              { name: 'name', value: g.name },
+              { name: 'type', value: g.type },
+              {
+                name: 'createdAt',
+                value: formatDateTime(new Date(g.createdAt)),
+              },
+              ...Object.entries(properties)
+                .filter(([, v]) => v !== undefined && v !== '')
+                .map(([k, v]) => ({
+                  name: k,
+                  value: String(v),
+                })),
+            ]}
+          />
+        </Widget>
+      </div>
+
+      {/* Activity heatmap */}
+      <div className="col-span-1">
+        <ProfileActivity data={activity.data} />
+      </div>
+
+      {/* Members preview */}
+      <div className="col-span-1">
+        <Widget className="w-full">
+          <WidgetHead>
+            <WidgetTitle icon={UsersIcon}>Members</WidgetTitle>
+          </WidgetHead>
+          <WidgetBody className="p-0">
+            {members.data.length === 0 ? (
+              <p className="py-4 text-center text-muted-foreground text-sm">
+                No members found
+              </p>
+            ) : (
+              <WidgetTable
+                columnClassName="px-2"
+                columns={[
+                  {
+                    key: 'profile',
+                    name: 'Profile',
+                    width: 'w-full',
+                    render: (member) => (
+                      <Link
+                        className="font-mono text-xs hover:underline"
+                        params={{
+                          organizationId,
+                          projectId,
+                          profileId: member.profileId,
+                        }}
+                        to="/$organizationId/$projectId/profiles/$profileId"
+                      >
+                        {member.profileId}
+                      </Link>
+                    ),
+                  },
+                  {
+                    key: 'events',
+                    name: 'Events',
+                    width: '60px',
+                    className: 'text-muted-foreground',
+                    render: (member) => member.eventCount,
+                  },
+                  {
+                    key: 'lastSeen',
+                    name: 'Last Seen',
+                    width: '150px',
+                    className: 'text-muted-foreground',
+                    render: (member) =>
+                      formatTimeAgoOrDateTime(new Date(member.lastSeen)),
+                  },
+                ]}
+                data={members.data.slice(0, MEMBERS_PREVIEW_LIMIT)}
+                keyExtractor={(member) => member.profileId}
+              />
+            )}
+            {members.data.length > MEMBERS_PREVIEW_LIMIT && (
+              <p className="border-t py-2 text-center text-muted-foreground text-xs">
+                {`${members.data.length} members found. View all in Members tab`}
+              </p>
+            )}
+          </WidgetBody>
+        </Widget>
+      </div>
+    </div>
+  );
+}

apps/start/src/routes/_app.$organizationId.$projectId.groups_.$groupId._tabs.members.tsx

@@ -0,0 +1,42 @@
+import { ProfilesTable } from '@/components/profiles/table';
+import { useDataTablePagination } from '@/components/ui/data-table/data-table-hooks';
+import { useSearchQueryState } from '@/hooks/use-search-query-state';
+import { useTRPC } from '@/integrations/trpc/react';
+import { createProjectTitle } from '@/utils/title';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute(
+  '/_app/$organizationId/$projectId/groups_/$groupId/_tabs/members'
+)({
+  component: Component,
+  head: () => ({
+    meta: [{ title: createProjectTitle('Group members') }],
+  }),
+});
+
+function Component() {
+  const { projectId, groupId } = Route.useParams();
+  const trpc = useTRPC();
+  const { debouncedSearch } = useSearchQueryState();
+  const { page } = useDataTablePagination(50);
+
+  const query = useQuery({
+    ...trpc.group.listProfiles.queryOptions({
+      projectId,
+      groupId,
+      cursor: page - 1,
+      take: 50,
+      search: debouncedSearch || undefined,
+    }),
+    placeholderData: keepPreviousData,
+  });
+
+  return (
+    <ProfilesTable
+      pageSize={50}
+      query={query as Parameters<typeof ProfilesTable>[0]['query']}
+      type="profiles"
+    />
+  );
+}

apps/start/src/routes/_app.$organizationId.$projectId.groups_.$groupId._tabs.tsx

@@ -0,0 +1,161 @@
+import {
+  useMutation,
+  useQueryClient,
+  useSuspenseQuery,
+} from '@tanstack/react-query';
+import {
+  createFileRoute,
+  Outlet,
+  useNavigate,
+  useRouter,
+} from '@tanstack/react-router';
+import { Building2Icon, PencilIcon, Trash2Icon } from 'lucide-react';
+import FullPageLoadingState from '@/components/full-page-loading-state';
+import { PageContainer } from '@/components/page-container';
+import { PageHeader } from '@/components/page-header';
+import { Button } from '@/components/ui/button';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { usePageTabs } from '@/hooks/use-page-tabs';
+import { handleError, useTRPC } from '@/integrations/trpc/react';
+import { pushModal, showConfirm } from '@/modals';
+import { createProjectTitle } from '@/utils/title';
+
+export const Route = createFileRoute(
+  '/_app/$organizationId/$projectId/groups_/$groupId/_tabs'
+)({
+  component: Component,
+  loader: async ({ context, params }) => {
+    await Promise.all([
+      context.queryClient.prefetchQuery(
+        context.trpc.group.byId.queryOptions({
+          id: params.groupId,
+          projectId: params.projectId,
+        })
+      ),
+      context.queryClient.prefetchQuery(
+        context.trpc.group.metrics.queryOptions({
+          id: params.groupId,
+          projectId: params.projectId,
+        })
+      ),
+    ]);
+  },
+  pendingComponent: FullPageLoadingState,
+  head: () => ({
+    meta: [{ title: createProjectTitle('Group') }],
+  }),
+});
+
+function Component() {
+  const router = useRouter();
+  const { projectId, organizationId, groupId } = Route.useParams();
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+
+  const group = useSuspenseQuery(
+    trpc.group.byId.queryOptions({ id: groupId, projectId })
+  );
+
+  const deleteMutation = useMutation(
+    trpc.group.delete.mutationOptions({
+      onSuccess() {
+        queryClient.invalidateQueries(trpc.group.list.pathFilter());
+        navigate({
+          to: '/$organizationId/$projectId/groups',
+          params: { organizationId, projectId },
+        });
+      },
+      onError: handleError,
+    })
+  );
+
+  const { activeTab, tabs } = usePageTabs([
+    { id: '/$organizationId/$projectId/groups/$groupId', label: 'Overview' },
+    { id: 'members', label: 'Members' },
+    { id: 'events', label: 'Events' },
+  ]);
+
+  const handleTabChange = (tabId: string) => {
+    router.navigate({
+      from: Route.fullPath,
+      to: tabId,
+    });
+  };
+
+  const g = group.data;
+
+  if (!g) {
+    return (
+      <PageContainer>
+        <div className="flex flex-col items-center justify-center gap-3 py-24 text-muted-foreground">
+          <Building2Icon className="size-10 opacity-30" />
+          <p className="text-sm">Group not found</p>
+        </div>
+      </PageContainer>
+    );
+  }
+
+  return (
+    <PageContainer className="col">
+      <PageHeader
+        actions={
+          <div className="row gap-2">
+            <Button
+              onClick={() =>
+                pushModal('EditGroup', {
+                  id: g.id,
+                  projectId: g.projectId,
+                  name: g.name,
+                  type: g.type,
+                  properties: g.properties,
+                })
+              }
+              size="sm"
+              variant="outline"
+            >
+              <PencilIcon className="mr-2 size-4" />
+              Edit
+            </Button>
+            <Button
+              onClick={() =>
+                showConfirm({
+                  title: 'Delete group',
+                  text: `Are you sure you want to delete "${g.name}"? This action cannot be undone.`,
+                  onConfirm: () =>
+                    deleteMutation.mutate({ id: g.id, projectId }),
+                })
+              }
+              size="sm"
+              variant="outline"
+            >
+              <Trash2Icon className="mr-2 size-4" />
+              Delete
+            </Button>
+          </div>
+        }
+        title={
+          <div className="row min-w-0 items-center gap-3">
+            <Building2Icon className="size-6 shrink-0" />
+            <span className="truncate">{g.name}</span>
+          </div>
+        }
+      />
+
+      <Tabs
+        className="mt-2 mb-8"
+        onValueChange={handleTabChange}
+        value={activeTab}
+      >
+        <TabsList>
+          {tabs.map((tab) => (
+            <TabsTrigger key={tab.id} value={tab.id}>
+              {tab.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
+      <Outlet />
+    </PageContainer>
+  );
+}

apps/start/src/routes/_app.$organizationId.$projectId.groups_.$groupId.tsx

@@ -1,244 +0,0 @@
-import { useSuspenseQuery } from '@tanstack/react-query';
-import { createFileRoute, Link } from '@tanstack/react-router';
-import { Building2Icon, UsersIcon } from 'lucide-react';
-import FullPageLoadingState from '@/components/full-page-loading-state';
-import { OverviewMetricCard } from '@/components/overview/overview-metric-card';
-import { WidgetHead, WidgetTitle } from '@/components/overview/overview-widget';
-import { PageContainer } from '@/components/page-container';
-import { PageHeader } from '@/components/page-header';
-import { ProfileActivity } from '@/components/profiles/profile-activity';
-import { Badge } from '@/components/ui/badge';
-import { KeyValueGrid } from '@/components/ui/key-value-grid';
-import { Widget, WidgetBody } from '@/components/widget';
-import { useTRPC } from '@/integrations/trpc/react';
-import { formatDateTime } from '@/utils/date';
-import { createProjectTitle } from '@/utils/title';
-
-export const Route = createFileRoute(
-  '/_app/$organizationId/$projectId/groups_/$groupId'
-)({
-  component: Component,
-  loader: async ({ context, params }) => {
-    await Promise.all([
-      context.queryClient.prefetchQuery(
-        context.trpc.group.byId.queryOptions({
-          id: params.groupId,
-          projectId: params.projectId,
-        })
-      ),
-      context.queryClient.prefetchQuery(
-        context.trpc.group.metrics.queryOptions({
-          id: params.groupId,
-          projectId: params.projectId,
-        })
-      ),
-      context.queryClient.prefetchQuery(
-        context.trpc.group.activity.queryOptions({
-          id: params.groupId,
-          projectId: params.projectId,
-        })
-      ),
-      context.queryClient.prefetchQuery(
-        context.trpc.group.members.queryOptions({
-          id: params.groupId,
-          projectId: params.projectId,
-        })
-      ),
-    ]);
-  },
-  pendingComponent: FullPageLoadingState,
-  head: () => ({
-    meta: [{ title: createProjectTitle('Group') }],
-  }),
-});
-
-function Component() {
-  const { projectId, organizationId, groupId } = Route.useParams();
-  const trpc = useTRPC();
-
-  const group = useSuspenseQuery(
-    trpc.group.byId.queryOptions({ id: groupId, projectId })
-  );
-
-  const metrics = useSuspenseQuery(
-    trpc.group.metrics.queryOptions({ id: groupId, projectId })
-  );
-
-  const activity = useSuspenseQuery(
-    trpc.group.activity.queryOptions({ id: groupId, projectId })
-  );
-
-  const members = useSuspenseQuery(
-    trpc.group.members.queryOptions({ id: groupId, projectId })
-  );
-
-  const g = group.data;
-  const m = metrics.data?.[0];
-
-  if (!g) {
-    return (
-      <PageContainer>
-        <div className="flex flex-col items-center justify-center gap-3 py-24 text-muted-foreground">
-          <Building2Icon className="size-10 opacity-30" />
-          <p className="text-sm">Group not found</p>
-        </div>
-      </PageContainer>
-    );
-  }
-
-  const properties = g.properties as Record<string, unknown>;
-
-  return (
-    <PageContainer>
-      <PageHeader
-        title={
-          <div className="row min-w-0 items-center gap-3">
-            <Building2Icon className="size-6 shrink-0" />
-            <span className="truncate">{g.name}</span>
-            <Badge className="shrink-0" variant="outline">
-              {g.type}
-            </Badge>
-          </div>
-        }
-      >
-        <p className="font-mono text-muted-foreground text-sm">{g.id}</p>
-      </PageHeader>
-
-      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-        {/* Metrics */}
-        {m && (
-          <div className="col-span-1 md:col-span-2">
-            <div className="card grid grid-cols-2 overflow-hidden rounded-md md:grid-cols-4">
-              <OverviewMetricCard
-                data={[]}
-                id="totalEvents"
-                isLoading={false}
-                label="Total Events"
-                metric={{ current: m.totalEvents, previous: null }}
-                unit=""
-              />
-              <OverviewMetricCard
-                data={[]}
-                id="uniqueMembers"
-                isLoading={false}
-                label="Unique Members"
-                metric={{ current: m.uniqueProfiles, previous: null }}
-                unit=""
-              />
-              <OverviewMetricCard
-                data={[]}
-                id="firstSeen"
-                isLoading={false}
-                label="First Seen"
-                metric={{
-                  current: m.firstSeen ? new Date(m.firstSeen).getTime() : 0,
-                  previous: null,
-                }}
-                unit="timeAgo"
-              />
-              <OverviewMetricCard
-                data={[]}
-                id="lastSeen"
-                isLoading={false}
-                label="Last Seen"
-                metric={{
-                  current: m.lastSeen ? new Date(m.lastSeen).getTime() : 0,
-                  previous: null,
-                }}
-                unit="timeAgo"
-              />
-            </div>
-          </div>
-        )}
-
-        {/* Properties */}
-        <div className="col-span-1 md:col-span-2">
-          <Widget className="w-full">
-            <WidgetHead>
-              <div className="title">Group Information</div>
-            </WidgetHead>
-            <KeyValueGrid
-              className="border-0"
-              columns={3}
-              copyable
-              data={[
-                { name: 'id', value: g.id },
-                { name: 'name', value: g.name },
-                { name: 'type', value: g.type },
-                {
-                  name: 'createdAt',
-                  value: formatDateTime(new Date(g.createdAt)),
-                },
-                ...Object.entries(properties)
-                  .filter(([, v]) => v !== undefined && v !== '')
-                  .map(([k, v]) => ({
-                    name: k,
-                    value: String(v),
-                  })),
-              ]}
-            />
-          </Widget>
-        </div>
-
-        {/* Activity heatmap */}
-        <div className="col-span-1">
-          <ProfileActivity data={activity.data} />
-        </div>
-
-        {/* Members */}
-        <div className="col-span-1">
-          <Widget className="w-full">
-            <WidgetHead>
-              <WidgetTitle icon={UsersIcon}>Members</WidgetTitle>
-            </WidgetHead>
-            <WidgetBody>
-              {members.data.length === 0 ? (
-                <p className="py-4 text-center text-muted-foreground text-sm">
-                  No members found
-                </p>
-              ) : (
-                <table className="w-full text-sm">
-                  <thead>
-                    <tr className="border-b">
-                      <th className="py-2 text-left font-medium text-muted-foreground">
-                        Profile
-                      </th>
-                      <th className="py-2 text-right font-medium text-muted-foreground">
-                        Events
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {members.data.map((member) => (
-                      <tr
-                        className="border-b last:border-0"
-                        key={member.profileId}
-                      >
-                        <td className="py-2">
-                          <Link
-                            className="font-mono text-xs hover:underline"
-                            params={{
-                              organizationId,
-                              projectId,
-                              profileId: member.profileId,
-                            }}
-                            to="/$organizationId/$projectId/profiles/$profileId"
-                          >
-                            {member.profileId}
-                          </Link>
-                        </td>
-                        <td className="py-2 text-right text-muted-foreground">
-                          {member.eventCount}
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              )}
-            </WidgetBody>
-          </Widget>
-        </div>
-      </div>
-    </PageContainer>
-  );
-}

apps/start/src/routes/_app.$organizationId.$projectId.profiles.$profileId._tabs.index.tsx

@@ -4,6 +4,7 @@ import { MostEvents } from '@/components/profiles/most-events';
 import { PopularRoutes } from '@/components/profiles/popular-routes';
 import { ProfileActivity } from '@/components/profiles/profile-activity';
 import { ProfileCharts } from '@/components/profiles/profile-charts';
+import { ProfileGroups } from '@/components/profiles/profile-groups';
 import { ProfileMetrics } from '@/components/profiles/profile-metrics';
 import { ProfileProperties } from '@/components/profiles/profile-properties';
 import { useTRPC } from '@/integrations/trpc/react';
@@ -107,6 +108,17 @@ function Component() {
           <ProfileProperties profile={profile.data!} />
         </div>
 
+        {/* Groups - full width, only if profile belongs to groups */}
+        {profile.data?.groups?.length ? (
+          <div className="col-span-1 md:col-span-2">
+            <ProfileGroups
+              profileId={profileId}
+              projectId={projectId}
+              groups={profile.data.groups}
+            />
+          </div>
+        ) : null}
+
         {/* Heatmap / Activity */}
         <div className="col-span-1">
           <ProfileActivity data={activity.data} />

apps/testbed/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+public/op1.js
+.env

apps/testbed/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Testbed | OpenPanel SDK</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

apps/testbed/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@openpanel/testbed",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 3100",
+    "build": "tsc && vite build",
+    "postinstall": "node scripts/copy-op1.mjs"
+  },
+  "dependencies": {
+    "@openpanel/web": "workspace:*",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.13.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "catalog:",
+    "vite": "^6.0.0"
+  }
+}

apps/testbed/scripts/copy-op1.mjs

@@ -0,0 +1,16 @@
+import { copyFileSync, mkdirSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const src = join(__dirname, '../../public/public/op1.js');
+const dest = join(__dirname, '../public/op1.js');
+
+mkdirSync(join(__dirname, '../public'), { recursive: true });
+
+try {
+  copyFileSync(src, dest);
+  console.log('✓ Copied op1.js to public/');
+} catch (e) {
+  console.warn('⚠ Could not copy op1.js:', e.message);
+}

apps/testbed/src/App.tsx

@@ -0,0 +1,218 @@
+import { useEffect, useState } from 'react';
+import { Link, Route, Routes, useNavigate } from 'react-router-dom';
+import { op } from './analytics';
+import { CartPage } from './pages/Cart';
+import { CheckoutPage } from './pages/Checkout';
+import { LoginPage, PRESET_GROUPS } from './pages/Login';
+import { ProductPage } from './pages/Product';
+import { ShopPage } from './pages/Shop';
+import type { CartItem, Product, User } from './types';
+
+const PRODUCTS: Product[] = [
+  { id: 'p1', name: 'Classic T-Shirt', price: 25, category: 'clothing' },
+  { id: 'p2', name: 'Coffee Mug', price: 15, category: 'accessories' },
+  { id: 'p3', name: 'Hoodie', price: 60, category: 'clothing' },
+  { id: 'p4', name: 'Sticker Pack', price: 10, category: 'accessories' },
+  { id: 'p5', name: 'Cap', price: 35, category: 'clothing' },
+];
+
+export default function App() {
+  const navigate = useNavigate();
+  const [cart, setCart] = useState<CartItem[]>([]);
+  const [user, setUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    const stored = localStorage.getItem('op_testbed_user');
+    if (stored) {
+      const u = JSON.parse(stored) as User;
+      setUser(u);
+      op.identify({
+        profileId: u.id,
+        firstName: u.firstName,
+        lastName: u.lastName,
+        email: u.email,
+      });
+      applyGroups(u);
+    }
+    op.ready();
+  }, []);
+
+  function applyGroups(u: User) {
+    op.setGroups(u.groupIds);
+    for (const id of u.groupIds) {
+      const meta = PRESET_GROUPS.find((g) => g.id === id);
+      console.log('meta', meta);
+      if (meta) {
+        op.setGroup(id, meta);
+      }
+    }
+  }
+
+  function login(u: User) {
+    localStorage.setItem('op_testbed_user', JSON.stringify(u));
+    setUser(u);
+    op.identify({
+      profileId: u.id,
+      firstName: u.firstName,
+      lastName: u.lastName,
+      email: u.email,
+    });
+    applyGroups(u);
+    op.track('user_login', { method: 'form', group_count: u.groupIds.length });
+    navigate('/');
+  }
+
+  function logout() {
+    localStorage.removeItem('op_testbed_user');
+    op.clear();
+    setUser(null);
+  }
+
+  function addToCart(product: Product) {
+    setCart((prev) => {
+      const existing = prev.find((i) => i.id === product.id);
+      if (existing) {
+        return prev.map((i) =>
+          i.id === product.id ? { ...i, qty: i.qty + 1 } : i
+        );
+      }
+      return [...prev, { ...product, qty: 1 }];
+    });
+    op.track('add_to_cart', {
+      product_id: product.id,
+      product_name: product.name,
+      price: product.price,
+      category: product.category,
+    });
+  }
+
+  function removeFromCart(id: string) {
+    const item = cart.find((i) => i.id === id);
+    if (item) {
+      op.track('remove_from_cart', {
+        product_id: item.id,
+        product_name: item.name,
+      });
+    }
+    setCart((prev) => prev.filter((i) => i.id !== id));
+  }
+
+  function startCheckout() {
+    const total = cart.reduce((sum, i) => sum + i.price * i.qty, 0);
+    op.track('checkout_started', {
+      total,
+      item_count: cart.reduce((sum, i) => sum + i.qty, 0),
+      items: cart.map((i) => i.id),
+    });
+    navigate('/checkout');
+  }
+
+  function pay(succeed: boolean) {
+    const total = cart.reduce((sum, i) => sum + i.price * i.qty, 0);
+    op.track('payment_attempted', { total, success: succeed });
+
+    if (succeed) {
+      op.revenue(total, {
+        items: cart.map((i) => i.id),
+        item_count: cart.reduce((sum, i) => sum + i.qty, 0),
+      });
+      op.track('purchase_completed', { total });
+      setCart([]);
+      navigate('/success');
+    } else {
+      op.track('purchase_failed', { total, reason: 'declined' });
+      navigate('/error');
+    }
+  }
+
+  const cartCount = cart.reduce((sum, i) => sum + i.qty, 0);
+
+  return (
+    <div className="app">
+      <nav className="nav">
+        <Link className="nav-brand" to="/">
+          TESTSTORE
+        </Link>
+        <div className="nav-links">
+          <Link to="/">Shop</Link>
+          <Link to="/cart">Cart ({cartCount})</Link>
+          {user ? (
+            <>
+              <span className="nav-user">{user.firstName}</span>
+              <button onClick={logout} type="button">
+                Logout
+              </button>
+            </>
+          ) : (
+            <Link to="/login">Login</Link>
+          )}
+        </div>
+      </nav>
+
+      <main className="main">
+        <Routes>
+          <Route
+            element={<ShopPage onAddToCart={addToCart} products={PRODUCTS} />}
+            path="/"
+          />
+          <Route
+            element={
+              <ProductPage onAddToCart={addToCart} products={PRODUCTS} />
+            }
+            path="/product/:id"
+          />
+          <Route element={<LoginPage onLogin={login} />} path="/login" />
+          <Route
+            element={
+              <CartPage
+                cart={cart}
+                onCheckout={startCheckout}
+                onRemove={removeFromCart}
+              />
+            }
+            path="/cart"
+          />
+          <Route
+            element={<CheckoutPage cart={cart} onPay={pay} />}
+            path="/checkout"
+          />
+          <Route
+            element={
+              <div className="result-page">
+                <div className="result-icon">[OK]</div>
+                <div className="result-title">Payment successful</div>
+                <p>Your order has been placed. Thanks for testing!</p>
+                <div className="result-actions">
+                  <Link to="/">
+                    <button className="primary" type="button">
+                      Continue shopping
+                    </button>
+                  </Link>
+                </div>
+              </div>
+            }
+            path="/success"
+          />
+          <Route
+            element={
+              <div className="result-page">
+                <div className="result-icon">[ERR]</div>
+                <div className="result-title">Payment failed</div>
+                <p>Card declined. Try again or go back to cart.</p>
+                <div className="result-actions">
+                  <Link to="/checkout">
+                    <button type="button">Retry</button>
+                  </Link>
+                  <Link to="/cart">
+                    <button type="button">Back to cart</button>
+                  </Link>
+                </div>
+              </div>
+            }
+            path="/error"
+          />
+        </Routes>
+      </main>
+    </div>
+  );
+}

apps/testbed/src/analytics.ts

@@ -0,0 +1,10 @@
+import { OpenPanel } from '@openpanel/web';
+
+export const op = new OpenPanel({
+  clientId: import.meta.env.VITE_OPENPANEL_CLIENT_ID ?? 'testbed-client',
+  apiUrl: import.meta.env.VITE_OPENPANEL_API_URL ?? 'http://localhost:3333',
+  trackScreenViews: true,
+  trackOutgoingLinks: true,
+  trackAttributes: true,
+  disabled: true,
+});

apps/testbed/src/main.tsx

@@ -0,0 +1,10 @@
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import './styles.css';
+
+createRoot(document.getElementById('root')!).render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
+);

apps/testbed/src/pages/Cart.tsx

@@ -0,0 +1,63 @@
+import { Link } from 'react-router-dom';
+import type { CartItem } from '../types';
+
+type Props = {
+  cart: CartItem[];
+  onRemove: (id: string) => void;
+  onCheckout: () => void;
+};
+
+export function CartPage({ cart, onRemove, onCheckout }: Props) {
+  const total = cart.reduce((sum, i) => sum + i.price * i.qty, 0);
+
+  if (cart.length === 0) {
+    return (
+      <div>
+        <div className="page-title">Cart</div>
+        <div className="cart-empty">Your cart is empty.</div>
+        <Link to="/"><button type="button">← Back to shop</button></Link>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="page-title">Cart</div>
+      <table className="cart-table">
+        <thead>
+          <tr>
+            <th>Product</th>
+            <th>Price</th>
+            <th>Qty</th>
+            <th>Subtotal</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {cart.map((item) => (
+            <tr key={item.id}>
+              <td>{item.name}</td>
+              <td>${item.price}</td>
+              <td>{item.qty}</td>
+              <td>${item.price * item.qty}</td>
+              <td>
+                <button type="button" className="danger" onClick={() => onRemove(item.id)}>
+                  Remove
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div className="cart-summary">
+        <div className="cart-total">Total: ${total}</div>
+        <div className="cart-actions">
+          <Link to="/"><button type="button">← Shop</button></Link>
+          <button type="button" className="primary" onClick={onCheckout}>
+            Checkout →
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/testbed/src/pages/Checkout.tsx

@@ -0,0 +1,43 @@
+import { Link } from 'react-router-dom';
+import type { CartItem } from '../types';
+
+type Props = {
+  cart: CartItem[];
+  onPay: (succeed: boolean) => void;
+};
+
+export function CheckoutPage({ cart, onPay }: Props) {
+  const total = cart.reduce((sum, i) => sum + i.price * i.qty, 0);
+
+  return (
+    <div>
+      <div className="page-title">Checkout</div>
+      <div className="checkout-form">
+        <div className="form-group">
+          <label className="form-label" htmlFor="card">Card number</label>
+          <input id="card" defaultValue="4242 4242 4242 4242" readOnly />
+        </div>
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
+          <div className="form-group">
+            <label className="form-label" htmlFor="expiry">Expiry</label>
+            <input id="expiry" defaultValue="12/28" readOnly />
+          </div>
+          <div className="form-group">
+            <label className="form-label" htmlFor="cvc">CVC</label>
+            <input id="cvc" defaultValue="123" readOnly />
+          </div>
+        </div>
+        <div className="checkout-total">Total: ${total}</div>
+        <div className="checkout-pay-buttons">
+          <Link to="/cart"><button type="button">← Back</button></Link>
+          <button type="button" className="primary" onClick={() => onPay(true)}>
+            Pay ${total} (success)
+          </button>
+          <button type="button" className="danger" onClick={() => onPay(false)}>
+            Pay ${total} (fail)
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/testbed/src/pages/Login.tsx

@@ -0,0 +1,186 @@
+import { useState } from 'react';
+import type { Group, User } from '../types';
+
+export const PRESET_GROUPS: Group[] = [
+  {
+    type: 'company',
+    id: 'grp_acme',
+    name: 'Acme Corp',
+    properties: { plan: 'enterprise' },
+  },
+  {
+    type: 'company',
+    id: 'grp_globex',
+    name: 'Globex',
+    properties: { plan: 'pro' },
+  },
+  {
+    type: 'company',
+    id: 'grp_initech',
+    name: 'Initech',
+    properties: { plan: 'pro' },
+  },
+  {
+    type: 'company',
+    id: 'grp_umbrella',
+    name: 'Umbrella Ltd',
+    properties: { plan: 'enterprise' },
+  },
+  {
+    type: 'company',
+    id: 'grp_stark',
+    name: 'Stark Industries',
+    properties: { plan: 'enterprise' },
+  },
+  {
+    type: 'company',
+    id: 'grp_wayne',
+    name: 'Wayne Enterprises',
+    properties: { plan: 'pro' },
+  },
+  {
+    type: 'company',
+    id: 'grp_dunder',
+    name: 'Dunder Mifflin',
+    properties: { plan: 'free' },
+  },
+  {
+    type: 'company',
+    id: 'grp_pied',
+    name: 'Pied Piper',
+    properties: { plan: 'free' },
+  },
+  {
+    type: 'company',
+    id: 'grp_hooli',
+    name: 'Hooli',
+    properties: { plan: 'pro' },
+  },
+  {
+    type: 'company',
+    id: 'grp_vandelay',
+    name: 'Vandelay Industries',
+    properties: { plan: 'free' },
+  },
+];
+
+const FIRST_NAMES = ['Alice', 'Bob', 'Carol', 'Dave', 'Eve', 'Frank', 'Grace', 'Hank', 'Iris', 'Jack'];
+const LAST_NAMES = ['Smith', 'Jones', 'Brown', 'Taylor', 'Wilson', 'Davis', 'Clark', 'Hall', 'Lewis', 'Young'];
+
+function randomMock(): User {
+  const first = FIRST_NAMES[Math.floor(Math.random() * FIRST_NAMES.length)];
+  const last = LAST_NAMES[Math.floor(Math.random() * LAST_NAMES.length)];
+  const id = Math.random().toString(36).slice(2, 8);
+  return {
+    id: `usr_${id}`,
+    firstName: first,
+    lastName: last,
+    email: `${first.toLowerCase()}.${last.toLowerCase()}@example.com`,
+    groupIds: [],
+  };
+}
+
+type Props = {
+  onLogin: (user: User) => void;
+};
+
+export function LoginPage({ onLogin }: Props) {
+  const [form, setForm] = useState<User>(randomMock);
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    onLogin(form);
+  }
+
+  function set(field: keyof User, value: string) {
+    setForm((prev) => ({ ...prev, [field]: value }));
+  }
+
+  function toggleGroup(id: string) {
+    setForm((prev) => ({
+      ...prev,
+      groupIds: prev.groupIds.includes(id)
+        ? prev.groupIds.filter((g) => g !== id)
+        : [...prev.groupIds, id],
+    }));
+  }
+
+  return (
+    <div>
+      <div className="page-title">Login</div>
+      <form className="login-form" onSubmit={handleSubmit}>
+        <div className="form-group">
+          <label className="form-label" htmlFor="id">
+            User ID
+          </label>
+          <input
+            id="id"
+            onChange={(e) => set('id', e.target.value)}
+            required
+            value={form.id}
+          />
+        </div>
+        <div className="form-group">
+          <label className="form-label" htmlFor="firstName">
+            First name
+          </label>
+          <input
+            id="firstName"
+            onChange={(e) => set('firstName', e.target.value)}
+            required
+            value={form.firstName}
+          />
+        </div>
+        <div className="form-group">
+          <label className="form-label" htmlFor="lastName">
+            Last name
+          </label>
+          <input
+            id="lastName"
+            onChange={(e) => set('lastName', e.target.value)}
+            required
+            value={form.lastName}
+          />
+        </div>
+        <div className="form-group">
+          <label className="form-label" htmlFor="email">
+            Email
+          </label>
+          <input
+            id="email"
+            onChange={(e) => set('email', e.target.value)}
+            required
+            type="email"
+            value={form.email}
+          />
+        </div>
+
+        <div className="form-group">
+          <div className="form-label" style={{ marginBottom: 8 }}>
+            Groups (optional)
+          </div>
+          <div className="group-picker">
+            {PRESET_GROUPS.map((group) => {
+              const selected = form.groupIds.includes(group.id);
+              return (
+                <button
+                  className={selected ? 'primary' : ''}
+                  key={group.id}
+                  onClick={() => toggleGroup(group.id)}
+                  type="button"
+                >
+                  {group.name}
+                  <span className="group-plan">{group.plan}</span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        <button className="primary" style={{ width: '100%' }} type="submit">
+          Login
+        </button>
+      </form>
+    </div>
+  );
+}

apps/testbed/src/pages/Product.tsx

@@ -0,0 +1,61 @@
+import { useEffect } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { op } from '../analytics';
+import type { Product } from '../types';
+
+type Props = {
+  products: Product[];
+  onAddToCart: (product: Product) => void;
+};
+
+export function ProductPage({ products, onAddToCart }: Props) {
+  const { id } = useParams<{ id: string }>();
+  const product = products.find((p) => p.id === id);
+
+  useEffect(() => {
+    if (product) {
+      op.track('product_viewed', {
+        product_id: product.id,
+        product_name: product.name,
+        price: product.price,
+        category: product.category,
+      });
+    }
+  }, [product]);
+
+  if (!product) {
+    return (
+      <div>
+        <div className="page-title">Product not found</div>
+        <Link to="/"><button type="button">← Back to shop</button></Link>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <Link to="/">← Back to shop</Link>
+      </div>
+      <div className="product-detail">
+        <div className="product-detail-img">[img]</div>
+        <div className="product-detail-info">
+          <div className="product-card-category">{product.category}</div>
+          <div className="product-detail-name">{product.name}</div>
+          <div className="product-detail-price">${product.price}</div>
+          <p className="product-detail-desc">
+            A high quality {product.name.toLowerCase()} for testing purposes.
+            Lorem ipsum dolor sit amet consectetur adipiscing elit.
+          </p>
+          <button
+            type="button"
+            className="primary"
+            onClick={() => onAddToCart(product)}
+          >
+            Add to cart
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/testbed/src/pages/Shop.tsx

@@ -0,0 +1,36 @@
+import { Link } from 'react-router-dom';
+import type { Product } from '../types';
+
+type Props = {
+  products: Product[];
+  onAddToCart: (product: Product) => void;
+};
+
+export function ShopPage({ products, onAddToCart }: Props) {
+  return (
+    <div>
+      <div className="page-title">Products</div>
+      <div className="product-grid">
+        {products.map((product) => (
+          <div key={product.id} className="product-card">
+            <div className="product-card-category">{product.category}</div>
+            <Link to={`/product/${product.id}`} className="product-card-name">
+              {product.name}
+            </Link>
+            <div className="product-card-price">${product.price}</div>
+            <div className="product-card-actions">
+              <button
+                type="button"
+                className="primary"
+                style={{ width: '100%' }}
+                onClick={() => onAddToCart(product)}
+              >
+                Add to cart
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/testbed/src/styles.css

@@ -0,0 +1,358 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --border: 1px solid #999;
+  --bg: #f5f5f5;
+  --surface: #fff;
+  --text: #111;
+  --muted: #666;
+  --accent: #1a1a1a;
+  --gap: 16px;
+}
+
+body {
+  font-family: monospace;
+  font-size: 14px;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.5;
+}
+
+button, input, select {
+  font-family: monospace;
+  font-size: 14px;
+}
+
+button {
+  cursor: pointer;
+  border: var(--border);
+  background: var(--surface);
+  padding: 6px 14px;
+}
+
+button:hover {
+  background: var(--accent);
+  color: #fff;
+}
+
+button.primary {
+  background: var(--accent);
+  color: #fff;
+}
+
+button.primary:hover {
+  opacity: 0.85;
+}
+
+button.danger {
+  border-color: #c00;
+  color: #c00;
+}
+
+button.danger:hover {
+  background: #c00;
+  color: #fff;
+}
+
+input {
+  border: var(--border);
+  background: var(--surface);
+  padding: 6px 10px;
+  width: 100%;
+}
+
+input:focus {
+  outline: 2px solid var(--accent);
+}
+
+/* Layout */
+
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.nav {
+  border-bottom: var(--border);
+  padding: 12px var(--gap);
+  background: var(--surface);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap);
+}
+
+.nav-brand {
+  font-weight: bold;
+  font-size: 16px;
+  cursor: pointer;
+  letter-spacing: 1px;
+  text-decoration: none;
+  color: inherit;
+}
+
+.nav-links a {
+  color: inherit;
+  text-decoration: underline;
+}
+
+.nav-links a:hover {
+  color: var(--muted);
+}
+
+.nav-links {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.nav-links span {
+  cursor: default;
+}
+
+.nav-user {
+  text-decoration: none !important;
+  cursor: default !important;
+  color: var(--muted);
+}
+
+.main {
+  flex: 1;
+  padding: var(--gap);
+  max-width: 900px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+/* Page common */
+
+.page-title {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  padding-bottom: 8px;
+  border-bottom: var(--border);
+}
+
+/* Shop */
+
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: var(--gap);
+}
+
+.product-card {
+  border: var(--border);
+  background: var(--surface);
+  padding: var(--gap);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.product-card-name {
+  font-weight: bold;
+}
+
+.product-card-category {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.product-card-price {
+  font-size: 16px;
+}
+
+.product-card-actions {
+  margin-top: auto;
+}
+
+/* Cart */
+
+.cart-empty {
+  color: var(--muted);
+  padding: 40px 0;
+  text-align: center;
+}
+
+.cart-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: var(--gap);
+}
+
+.cart-table th,
+.cart-table td {
+  border: var(--border);
+  padding: 8px 12px;
+  text-align: left;
+}
+
+.cart-table th {
+  background: var(--bg);
+}
+
+.cart-summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  border-top: var(--border);
+  margin-top: 8px;
+}
+
+.cart-total {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.cart-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* Checkout */
+
+.checkout-form {
+  border: var(--border);
+  background: var(--surface);
+  padding: var(--gap);
+  max-width: 400px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 12px;
+}
+
+.form-label {
+  font-size: 12px;
+  color: var(--muted);
+  text-transform: uppercase;
+}
+
+.checkout-total {
+  margin: 16px 0;
+  padding: 12px;
+  border: var(--border);
+  background: var(--bg);
+  font-weight: bold;
+}
+
+.checkout-pay-buttons {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+/* Login */
+
+.login-form {
+  border: var(--border);
+  background: var(--surface);
+  padding: var(--gap);
+  max-width: 360px;
+}
+
+/* Product detail */
+
+.product-detail {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 32px;
+  max-width: 700px;
+}
+
+.product-detail-img {
+  border: var(--border);
+  background: var(--surface);
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 48px;
+  color: var(--muted);
+}
+
+.product-detail-info {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.product-detail-name {
+  font-size: 22px;
+  font-weight: bold;
+}
+
+.product-detail-price {
+  font-size: 20px;
+}
+
+.product-detail-desc {
+  color: var(--muted);
+  line-height: 1.6;
+}
+
+.product-card-name {
+  font-weight: bold;
+  color: inherit;
+}
+
+/* Group picker */
+
+.group-picker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.group-picker button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  font-size: 13px;
+}
+
+.group-plan {
+  font-size: 11px;
+  opacity: 0.6;
+  border-left: 1px solid currentColor;
+  padding-left: 6px;
+}
+
+/* Result pages */
+
+.result-page {
+  text-align: center;
+  padding: 60px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.result-icon {
+  font-size: 48px;
+  line-height: 1;
+}
+
+.result-title {
+  font-size: 22px;
+  font-weight: bold;
+}
+
+.result-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+}

apps/testbed/src/types.ts

@@ -0,0 +1,23 @@
+export type Product = {
+  id: string;
+  name: string;
+  price: number;
+  category: string;
+};
+
+export type CartItem = Product & { qty: number };
+
+export type User = {
+  id: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  groupIds: string[];
+};
+
+export type Group = {
+  id: string;
+  name: string;
+  type: string;
+  properties: Record<string, string>;
+};

apps/testbed/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true
+  },
+  "include": ["src"]
+}

apps/testbed/vite.config.ts

@@ -0,0 +1,9 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [react()],
+  define: {
+    'process.env': {},
+  },
+});

apps/worker/src/jobs/events.incoming-events.test.ts

@@ -312,6 +312,7 @@ describe('incomingEvent', () => {
       screen_views: [],
       sign: 1,
       version: 1,
+      groups: [],
     } satisfies IClickhouseSession);
 
     await incomingEvent(jobData);

docker-compose.yml

@@ -22,7 +22,7 @@ services:
       - 6379:6379
 
   op-ch:
-    image: clickhouse/clickhouse-server:25.10.2.65
+    image: clickhouse/clickhouse-server:26.1.3.52
     restart: always
     volumes:
       - ./docker/data/op-ch-data:/var/lib/clickhouse

packages/common/scripts/get-referrers.ts

@@ -1,6 +1,5 @@
 import fs from 'node:fs';
-import path from 'node:path';
-import { dirname } from 'node:path';
+import path, { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 const __filename = fileURLToPath(import.meta.url);
@@ -44,6 +43,66 @@ const extraReferrers = {
   'squarespace.com': { type: 'commerce', name: 'Squarespace' },
   'stackoverflow.com': { type: 'tech', name: 'Stack Overflow' },
   'teams.microsoft.com': { type: 'social', name: 'Microsoft Teams' },
+  'chat.com': { type: 'ai', name: 'Chat.com' },
+  'chatgpt.com': { type: 'ai', name: 'ChatGPT' },
+  'openai.com': { type: 'ai', name: 'OpenAI' },
+  'anthropic.com': { type: 'ai', name: 'Anthropic' },
+  'claude.ai': { type: 'ai', name: 'Claude' },
+  'gemini.google.com': { type: 'ai', name: 'Google Gemini' },
+  'bard.google.com': { type: 'ai', name: 'Google Bard' },
+  'copilot.microsoft.com': { type: 'ai', name: 'Microsoft Copilot' },
+  'copilot.cloud.microsoft': { type: 'ai', name: 'Microsoft Copilot' },
+  'perplexity.ai': { type: 'ai', name: 'Perplexity' },
+  'you.com': { type: 'ai', name: 'You.com' },
+  'poe.com': { type: 'ai', name: 'Poe' },
+  'phind.com': { type: 'ai', name: 'Phind' },
+  'huggingface.co': { type: 'ai', name: 'Hugging Face' },
+  'hf.co': { type: 'ai', name: 'Hugging Face' },
+  'character.ai': { type: 'ai', name: 'Character.AI' },
+  'meta.ai': { type: 'ai', name: 'Meta AI' },
+  'mistral.ai': { type: 'ai', name: 'Mistral' },
+  'chat.mistral.ai': { type: 'ai', name: 'Mistral Le Chat' },
+  'deepseek.com': { type: 'ai', name: 'DeepSeek' },
+  'chat.deepseek.com': { type: 'ai', name: 'DeepSeek Chat' },
+  'pi.ai': { type: 'ai', name: 'Pi' },
+  'inflection.ai': { type: 'ai', name: 'Inflection' },
+  'cohere.com': { type: 'ai', name: 'Cohere' },
+  'coral.cohere.com': { type: 'ai', name: 'Cohere Coral' },
+  'jasper.ai': { type: 'ai', name: 'Jasper' },
+  'writesonic.com': { type: 'ai', name: 'Writesonic' },
+  'copy.ai': { type: 'ai', name: 'Copy.ai' },
+  'rytr.me': { type: 'ai', name: 'Rytr' },
+  'notion.ai': { type: 'ai', name: 'Notion AI' },
+  'grammarly.com': { type: 'ai', name: 'Grammarly' },
+  'bing.com': { type: 'ai', name: 'Bing AI' },
+  'grok.com': { type: 'ai', name: 'Grok' },
+  'x.ai': { type: 'ai', name: 'xAI' },
+  'aistudio.google.com': { type: 'ai', name: 'Google AI Studio' },
+  'labs.google.com': { type: 'ai', name: 'Google Labs' },
+  'ai.google': { type: 'ai', name: 'Google AI' },
+  'forefront.ai': { type: 'ai', name: 'Forefront' },
+  'together.ai': { type: 'ai', name: 'Together AI' },
+  'groq.com': { type: 'ai', name: 'Groq' },
+  'replicate.com': { type: 'ai', name: 'Replicate' },
+  'vercel.ai': { type: 'ai', name: 'Vercel AI' },
+  'v0.dev': { type: 'ai', name: 'v0' },
+  'bolt.new': { type: 'ai', name: 'Bolt' },
+  'replit.com': { type: 'ai', name: 'Replit' },
+  'cursor.com': { type: 'ai', name: 'Cursor' },
+  'tabnine.com': { type: 'ai', name: 'Tabnine' },
+  'codeium.com': { type: 'ai', name: 'Codeium' },
+  'sourcegraph.com': { type: 'ai', name: 'Sourcegraph Cody' },
+  'kimi.moonshot.cn': { type: 'ai', name: 'Kimi' },
+  'moonshot.ai': { type: 'ai', name: 'Moonshot AI' },
+  'doubao.com': { type: 'ai', name: 'Doubao' },
+  'tongyi.aliyun.com': { type: 'ai', name: 'Tongyi Qianwen' },
+  'yiyan.baidu.com': { type: 'ai', name: 'Ernie Bot' },
+  'chatglm.cn': { type: 'ai', name: 'ChatGLM' },
+  'zhipu.ai': { type: 'ai', name: 'Zhipu AI' },
+  'minimax.chat': { type: 'ai', name: 'MiniMax' },
+  'lmsys.org': { type: 'ai', name: 'LMSYS' },
+  'chat.lmsys.org': { type: 'ai', name: 'LMSYS Chat' },
+  'llama.meta.com': { type: 'ai', name: 'Meta Llama' },
 };
 
 function transform(data: any) {
@@ -67,7 +126,7 @@ async function main() {
   // Get document, or throw exception on error
   try {
     const data = await fetch(
-      'https://s3-eu-west-1.amazonaws.com/snowplow-hosted-assets/third-party/referer-parser/referers-latest.json',
+      'https://s3-eu-west-1.amazonaws.com/snowplow-hosted-assets/third-party/referer-parser/referers-latest.json'
     ).then((res) => res.json());
 
     fs.writeFileSync(
@@ -82,11 +141,11 @@ async function main() {
           {
             ...transform(data),
             ...extraReferrers,
-          },
+          }
         )} as const;`,
         'export default referrers;',
       ].join('\n'),
-      'utf-8',
+      'utf-8'
     );
   } catch (e) {
     console.log(e);

packages/db/code-migrations/11-add-groups.ts

@@ -1,7 +1,9 @@
 import fs from 'node:fs';
 import path from 'node:path';
+import { TABLE_NAMES } from '../src/clickhouse/client';
 import {
   addColumns,
+  createTable,
   runClickhouseMigrationCommands,
 } from '../src/clickhouse/migration';
 import { getIsCluster } from './helpers';
@@ -9,45 +11,40 @@ import { getIsCluster } from './helpers';
 export async function up() {
   const isClustered = getIsCluster();
 
-  const databaseUrl = process.env.DATABASE_URL ?? '';
-  // Parse postgres connection string: postgresql://user:password@host:port/dbname
-  const match = databaseUrl.match(
-    /postgresql:\/\/([^:]+):([^@]+)@([^:]+):(\d+)\/(.+?)(\?.*)?$/
-  );
-
-  if (!match) {
-    throw new Error(`Could not parse DATABASE_URL: ${databaseUrl}`);
-  }
-
-  const [, pgUser, pgPassword, pgHost, pgPort, pgDb] = match;
-
-  const dictSql = `CREATE DICTIONARY IF NOT EXISTS groups_dict
-(
-  id         String,
-  project_id String,
-  type       String,
-  name       String,
-  properties String
-)
-PRIMARY KEY id, project_id
-SOURCE(POSTGRESQL(
-  host '${pgHost}'
-  port ${pgPort}
-  user '${pgUser}'
-  password '${pgPassword}'
-  db '${pgDb}'
-  table 'groups'
-))
-LIFETIME(MIN 300 MAX 600)
-LAYOUT(COMPLEX_KEY_HASHED())`;
-
   const sqls: string[] = [
     ...addColumns(
       'events',
-      ['`groups` Array(String) DEFAULT [] CODEC(ZSTD(3))'],
+      ['`groups` Array(String) DEFAULT [] CODEC(ZSTD(3)) AFTER session_id'],
       isClustered
     ),
-    dictSql,
+    ...addColumns(
+      'sessions',
+      ['`groups` Array(String) DEFAULT [] CODEC(ZSTD(3)) AFTER device_id'],
+      isClustered
+    ),
+    ...addColumns(
+      'profiles',
+      ['`groups` Array(String) DEFAULT [] CODEC(ZSTD(3)) AFTER project_id'],
+      isClustered
+    ),
+    ...createTable({
+      name: TABLE_NAMES.groups,
+      columns: [
+        '`id` String',
+        '`project_id` String',
+        '`type` String',
+        '`name` String',
+        '`properties` Map(String, String)',
+        '`created_at` DateTime',
+        '`version` UInt64',
+        '`deleted` UInt8 DEFAULT 0',
+      ],
+      engine: 'ReplacingMergeTree(version, deleted)',
+      orderBy: ['project_id', 'id'],
+      distributionHash: 'cityHash64(project_id, id)',
+      replicatedVersion: '1',
+      isClustered,
+    }),
   ];
 
   fs.writeFileSync(

packages/db/prisma/migrations/20260218164139_groups/migration.sql

@@ -1,15 +0,0 @@
--- CreateTable
-CREATE TABLE "public"."groups" (
-    "id" TEXT NOT NULL DEFAULT '',
-    "projectId" TEXT NOT NULL,
-    "type" TEXT NOT NULL,
-    "name" TEXT NOT NULL,
-    "properties" JSONB NOT NULL DEFAULT '{}',
-    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-
-    CONSTRAINT "groups_pkey" PRIMARY KEY ("projectId","id")
-);
-
--- AddForeignKey
-ALTER TABLE "public"."groups" ADD CONSTRAINT "groups_projectId_fkey" FOREIGN KEY ("projectId") REFERENCES "public"."projects"("id") ON DELETE CASCADE ON UPDATE CASCADE;

packages/db/prisma/schema.prisma

@@ -199,8 +199,6 @@ model Project {
   meta            EventMeta[]
   references      Reference[]
   access          ProjectAccess[]
-  groups          Group[]
-
   notificationRules NotificationRule[]
   notifications     Notification[]
   imports           Import[]
@@ -216,19 +214,6 @@ model Project {
   @@map("projects")
 }
 
-model Group {
-  id          String   @default("")
-  projectId   String
-  project     Project  @relation(fields: [projectId], references: [id], onDelete: Cascade)
-  type        String
-  name        String
-  properties  Json     @default("{}")
-  createdAt   DateTime @default(now())
-  updatedAt   DateTime @default(now()) @updatedAt
-
-  @@id([projectId, id])
-  @@map("groups")
-}
 
 enum AccessLevel {
   read

packages/db/src/buffers/event-buffer.ts

@@ -1,11 +1,7 @@
 import { getSafeJson } from '@openpanel/json';
-import {
-  type Redis,
-  getRedisCache,
-  publishEvent,
-} from '@openpanel/redis';
+import { getRedisCache, publishEvent, type Redis } from '@openpanel/redis';
 import { ch } from '../clickhouse/client';
-import { type IClickhouseEvent } from '../services/event.service';
+import type { IClickhouseEvent } from '../services/event.service';
 import { BaseBuffer } from './base-buffer';
 
 export class EventBuffer extends BaseBuffer {
@@ -95,7 +91,7 @@ export class EventBuffer extends BaseBuffer {
           this.incrementActiveVisitorCount(
             multi,
             event.project_id,
-            event.profile_id,
+            event.profile_id
           );
         }
       }
@@ -116,7 +112,7 @@ export class EventBuffer extends BaseBuffer {
           error,
           eventCount: eventsToFlush.length,
           flushRetryCount: this.flushRetryCount,
-        },
+        }
       );
     } finally {
       this.isFlushing = false;
@@ -137,7 +133,7 @@ export class EventBuffer extends BaseBuffer {
       const queueEvents = await redis.lrange(
         this.queueKey,
         0,
-        this.batchSize - 1,
+        this.batchSize - 1
       );
 
       if (queueEvents.length === 0) {
@@ -149,6 +145,9 @@ export class EventBuffer extends BaseBuffer {
       for (const eventStr of queueEvents) {
         const event = getSafeJson<IClickhouseEvent>(eventStr);
         if (event) {
+          if (!Array.isArray(event.groups)) {
+            event.groups = [];
+          }
           eventsToClickhouse.push(event);
         }
       }
@@ -161,7 +160,7 @@ export class EventBuffer extends BaseBuffer {
       eventsToClickhouse.sort(
         (a, b) =>
           new Date(a.created_at || 0).getTime() -
-          new Date(b.created_at || 0).getTime(),
+          new Date(b.created_at || 0).getTime()
       );
 
       this.logger.info('Inserting events into ClickHouse', {
@@ -181,7 +180,7 @@ export class EventBuffer extends BaseBuffer {
       for (const event of eventsToClickhouse) {
         countByProject.set(
           event.project_id,
-          (countByProject.get(event.project_id) ?? 0) + 1,
+          (countByProject.get(event.project_id) ?? 0) + 1
         );
       }
       for (const [projectId, count] of countByProject) {
@@ -222,7 +221,7 @@ export class EventBuffer extends BaseBuffer {
   private incrementActiveVisitorCount(
     multi: ReturnType<Redis['multi']>,
     projectId: string,
-    profileId: string,
+    profileId: string
   ) {
     const key = `${projectId}:${profileId}`;
     const now = Date.now();

packages/db/src/buffers/profile-buffer.test.ts

@@ -0,0 +1,151 @@
+import { getRedisCache } from '@openpanel/redis';
+import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import { getSafeJson } from '@openpanel/json';
+import type { IClickhouseProfile } from '../services/profile.service';
+
+// Mock chQuery to avoid hitting real ClickHouse
+vi.mock('../clickhouse/client', () => ({
+  ch: {
+    insert: vi.fn().mockResolvedValue(undefined),
+  },
+  chQuery: vi.fn().mockResolvedValue([]),
+  TABLE_NAMES: {
+    profiles: 'profiles',
+  },
+}));
+
+import { ProfileBuffer } from './profile-buffer';
+import { chQuery } from '../clickhouse/client';
+
+const redis = getRedisCache();
+
+function makeProfile(overrides: Partial<IClickhouseProfile>): IClickhouseProfile {
+  return {
+    id: 'profile-1',
+    project_id: 'project-1',
+    first_name: '',
+    last_name: '',
+    email: '',
+    avatar: '',
+    properties: {},
+    is_external: true,
+    created_at: new Date().toISOString(),
+    groups: [],
+    ...overrides,
+  };
+}
+
+beforeEach(async () => {
+  await redis.flushdb();
+  vi.mocked(chQuery).mockResolvedValue([]);
+});
+
+afterAll(async () => {
+  try {
+    await redis.quit();
+  } catch {}
+});
+
+describe('ProfileBuffer', () => {
+  let profileBuffer: ProfileBuffer;
+
+  beforeEach(() => {
+    profileBuffer = new ProfileBuffer();
+  });
+
+  it('adds a profile to the buffer', async () => {
+    const profile = makeProfile({ first_name: 'John', email: 'john@example.com' });
+
+    const sizeBefore = await profileBuffer.getBufferSize();
+    await profileBuffer.add(profile);
+    const sizeAfter = await profileBuffer.getBufferSize();
+
+    expect(sizeAfter).toBe(sizeBefore + 1);
+  });
+
+  it('merges subsequent updates via cache (sequential calls)', async () => {
+    const identifyProfile = makeProfile({
+      first_name: 'John',
+      email: 'john@example.com',
+      groups: [],
+    });
+
+    const groupProfile = makeProfile({
+      first_name: '',
+      email: '',
+      groups: ['group-abc'],
+    });
+
+    // Sequential: identify first, then group
+    await profileBuffer.add(identifyProfile);
+    await profileBuffer.add(groupProfile);
+
+    // Second add should read the cached identify profile and merge groups in
+    const cached = await profileBuffer.fetchFromCache('profile-1', 'project-1');
+    expect(cached?.first_name).toBe('John');
+    expect(cached?.email).toBe('john@example.com');
+    expect(cached?.groups).toContain('group-abc');
+  });
+
+  it('race condition: concurrent identify + group calls preserve all data', async () => {
+    const identifyProfile = makeProfile({
+      first_name: 'John',
+      email: 'john@example.com',
+      groups: [],
+    });
+
+    const groupProfile = makeProfile({
+      first_name: '',
+      email: '',
+      groups: ['group-abc'],
+    });
+
+    // Both calls run concurrently — the per-profile lock serializes them so the
+    // second one reads the first's result from cache and merges correctly.
+    await Promise.all([
+      profileBuffer.add(identifyProfile),
+      profileBuffer.add(groupProfile),
+    ]);
+
+    const cached = await profileBuffer.fetchFromCache('profile-1', 'project-1');
+
+    expect(cached?.first_name).toBe('John');
+    expect(cached?.email).toBe('john@example.com');
+    expect(cached?.groups).toContain('group-abc');
+  });
+
+  it('race condition: concurrent writes produce one merged buffer entry', async () => {
+    const identifyProfile = makeProfile({
+      first_name: 'John',
+      email: 'john@example.com',
+      groups: [],
+    });
+
+    const groupProfile = makeProfile({
+      first_name: '',
+      email: '',
+      groups: ['group-abc'],
+    });
+
+    const sizeBefore = await profileBuffer.getBufferSize();
+
+    await Promise.all([
+      profileBuffer.add(identifyProfile),
+      profileBuffer.add(groupProfile),
+    ]);
+
+    const sizeAfter = await profileBuffer.getBufferSize();
+
+    // The second add merges into the first — only 2 buffer entries total
+    // (one from identify, one merged update with group)
+    expect(sizeAfter).toBe(sizeBefore + 2);
+
+    // The last entry in the buffer should have both name and group
+    const rawEntries = await redis.lrange('profile-buffer', 0, -1);
+    const entries = rawEntries.map((e) => getSafeJson<IClickhouseProfile>(e));
+    const lastEntry = entries[entries.length - 1];
+
+    expect(lastEntry?.first_name).toBe('John');
+    expect(lastEntry?.groups).toContain('group-abc');
+  });
+});

packages/db/src/buffers/profile-buffer.ts

@@ -1,9 +1,10 @@
 import { deepMergeObjects } from '@openpanel/common';
+import { generateSecureId } from '@openpanel/common/server';
 import { getSafeJson } from '@openpanel/json';
 import type { ILogger } from '@openpanel/logger';
 import { getRedisCache, type Redis } from '@openpanel/redis';
 import shallowEqual from 'fast-deep-equal';
-import { omit } from 'ramda';
+import { omit, uniq } from 'ramda';
 import sqlstring from 'sqlstring';
 import { ch, chQuery, TABLE_NAMES } from '../clickhouse/client';
 import type { IClickhouseProfile } from '../services/profile.service';
@@ -24,6 +25,15 @@ export class ProfileBuffer extends BaseBuffer {
   private readonly redisProfilePrefix = 'profile-cache:';
 
   private redis: Redis;
+  private releaseLockSha: string | null = null;
+
+  private readonly releaseLockScript = `
+    if redis.call("get", KEYS[1]) == ARGV[1] then
+      return redis.call("del", KEYS[1])
+    else
+      return 0
+    end
+  `;
 
   constructor() {
     super({
@@ -33,6 +43,9 @@ export class ProfileBuffer extends BaseBuffer {
       },
     });
     this.redis = getRedisCache();
+    this.redis.script('LOAD', this.releaseLockScript).then((sha) => {
+      this.releaseLockSha = sha as string;
+    });
   }
 
   private getProfileCacheKey({
@@ -45,6 +58,42 @@ export class ProfileBuffer extends BaseBuffer {
     return `${this.redisProfilePrefix}${projectId}:${profileId}`;
   }
 
+  private async withProfileLock<T>(
+    profileId: string,
+    projectId: string,
+    fn: () => Promise<T>
+  ): Promise<T> {
+    const lockKey = `profile-lock:${projectId}:${profileId}`;
+    const lockId = generateSecureId('lock');
+    const maxRetries = 10;
+    const retryDelayMs = 25;
+
+    for (let i = 0; i < maxRetries; i++) {
+      const acquired = await this.redis.set(lockKey, lockId, 'EX', 5, 'NX');
+      if (acquired === 'OK') {
+        try {
+          return await fn();
+        } finally {
+          if (this.releaseLockSha) {
+            await this.redis.evalsha(this.releaseLockSha, 1, lockKey, lockId);
+          } else {
+            await this.redis.eval(this.releaseLockScript, 1, lockKey, lockId);
+          }
+        }
+      }
+      await new Promise((resolve) => setTimeout(resolve, retryDelayMs));
+    }
+
+    this.logger.error(
+      'Failed to acquire profile lock, proceeding without lock',
+      {
+        profileId,
+        projectId,
+      }
+    );
+    return fn();
+  }
+
   async alreadyExists(profile: IClickhouseProfile) {
     const cacheKey = this.getProfileCacheKey({
       profileId: profile.id,
@@ -67,83 +116,94 @@ export class ProfileBuffer extends BaseBuffer {
         return;
       }
 
-      const existingProfile = await this.fetchProfile(profile, logger);
+      await this.withProfileLock(profile.id, profile.project_id, async () => {
+        const existingProfile = await this.fetchProfile(profile, logger);
 
-      // Delete any properties that are not server related if we have a non-server profile
-      if (
-        existingProfile?.properties.device !== 'server' &&
-        profile.properties.device === 'server'
-      ) {
-        profile.properties = omit(
-          [
-            'city',
-            'country',
-            'region',
-            'longitude',
-            'latitude',
-            'os',
-            'osVersion',
-            'browser',
-            'device',
-            'isServer',
-            'os_version',
-            'browser_version',
-          ],
-          profile.properties
-        );
-      }
+        // Delete any properties that are not server related if we have a non-server profile
+        if (
+          existingProfile?.properties.device !== 'server' &&
+          profile.properties.device === 'server'
+        ) {
+          profile.properties = omit(
+            [
+              'city',
+              'country',
+              'region',
+              'longitude',
+              'latitude',
+              'os',
+              'osVersion',
+              'browser',
+              'device',
+              'isServer',
+              'os_version',
+              'browser_version',
+            ],
+            profile.properties
+          );
+        }
 
-      const mergedProfile: IClickhouseProfile = existingProfile
-        ? deepMergeObjects(existingProfile, omit(['created_at'], profile))
-        : profile;
+        const mergedProfile: IClickhouseProfile = existingProfile
+          ? {
+              ...deepMergeObjects(
+                existingProfile,
+                omit(['created_at', 'groups'], profile)
+              ),
+              groups: uniq([
+                ...(existingProfile.groups ?? []),
+                ...(profile.groups ?? []),
+              ]),
+            }
+          : profile;
 
-      if (
-        profile &&
-        existingProfile &&
-        shallowEqual(
-          omit(['created_at'], existingProfile),
-          omit(['created_at'], mergedProfile)
-        )
-      ) {
-        this.logger.debug('Profile not changed, skipping');
-        return;
-      }
+        if (
+          profile &&
+          existingProfile &&
+          shallowEqual(
+            omit(['created_at'], existingProfile),
+            omit(['created_at'], mergedProfile)
+          )
+        ) {
+          this.logger.debug('Profile not changed, skipping');
+          return;
+        }
 
-      this.logger.debug('Merged profile will be inserted', {
-        mergedProfile,
-        existingProfile,
-        profile,
-      });
-
-      const cacheKey = this.getProfileCacheKey({
-        profileId: profile.id,
-        projectId: profile.project_id,
-      });
-
-      const result = await this.redis
-        .multi()
-        .set(cacheKey, JSON.stringify(mergedProfile), 'EX', this.ttlInSeconds)
-        .rpush(this.redisKey, JSON.stringify(mergedProfile))
-        .incr(this.bufferCounterKey)
-        .llen(this.redisKey)
-        .exec();
-
-      if (!result) {
-        this.logger.error('Failed to add profile to Redis', {
+        this.logger.debug('Merged profile will be inserted', {
+          mergedProfile,
+          existingProfile,
           profile,
-          cacheKey,
         });
-        return;
-      }
-      const bufferLength = (result?.[3]?.[1] as number) ?? 0;
 
-      this.logger.debug('Current buffer length', {
-        bufferLength,
-        batchSize: this.batchSize,
+        const cacheKey = this.getProfileCacheKey({
+          profileId: profile.id,
+          projectId: profile.project_id,
+        });
+
+        const result = await this.redis
+          .multi()
+          .set(cacheKey, JSON.stringify(mergedProfile), 'EX', this.ttlInSeconds)
+          .rpush(this.redisKey, JSON.stringify(mergedProfile))
+          .incr(this.bufferCounterKey)
+          .llen(this.redisKey)
+          .exec();
+
+        if (!result) {
+          this.logger.error('Failed to add profile to Redis', {
+            profile,
+            cacheKey,
+          });
+          return;
+        }
+        const bufferLength = (result?.[3]?.[1] as number) ?? 0;
+
+        this.logger.debug('Current buffer length', {
+          bufferLength,
+          batchSize: this.batchSize,
+        });
+        if (bufferLength >= this.batchSize) {
+          await this.tryFlush();
+        }
       });
-      if (bufferLength >= this.batchSize) {
-        await this.tryFlush();
-      }
     } catch (error) {
       this.logger.error('Failed to add profile', { error, profile });
     }

packages/db/src/buffers/session-buffer.ts

@@ -109,6 +109,12 @@ export class SessionBuffer extends BaseBuffer {
         newSession.profile_id = event.profile_id;
       }
 
+      if (event.groups) {
+        newSession.groups = [
+          ...new Set([...newSession.groups, ...event.groups]),
+        ];
+      }
+
       return [newSession, oldSession];
     }
 
@@ -119,6 +125,7 @@ export class SessionBuffer extends BaseBuffer {
         profile_id: event.profile_id,
         project_id: event.project_id,
         device_id: event.device_id,
+        groups: event.groups,
         created_at: event.created_at,
         ended_at: event.created_at,
         event_count: event.name === 'screen_view' ? 0 : 1,

packages/db/src/clickhouse/query-builder.ts

@@ -66,6 +66,7 @@ export class Query<T = any> {
     alias?: string;
   }[] = [];
   private _skipNext = false;
+  private _rawJoins: string[] = [];
   private _fill?: {
     from: string | Date;
     to: string | Date;
@@ -329,6 +330,12 @@ export class Query<T = any> {
     return this.joinWithType('CROSS', table, '', alias);
   }
 
+  rawJoin(sql: string): this {
+    if (this._skipNext) return this;
+    this._rawJoins.push(sql);
+    return this;
+  }
+
   private joinWithType(
     type: JoinType,
     table: string | Expression | Query,
@@ -414,6 +421,10 @@ export class Query<T = any> {
           `${join.type} JOIN ${join.table instanceof Query ? `(${join.table.toSQL()})` : join.table instanceof Expression ? `(${join.table.toString()})` : join.table}${aliasClause}${conditionStr}`,
         );
       });
+      // Add raw joins (e.g. ARRAY JOIN)
+      this._rawJoins.forEach((join) => {
+        parts.push(join);
+      });
     }
 
     // WHERE
@@ -590,6 +601,7 @@ export class Query<T = any> {
 
     // Merge JOINS
     this._joins = [...this._joins, ...query._joins];
+    this._rawJoins = [...this._rawJoins, ...query._rawJoins];
 
     // Merge settings
     this._settings = { ...this._settings, ...query._settings };

packages/db/src/services/chart.service.ts

@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/style/useDefaultSwitchClause: <explanation> */
 import { DateTime, stripLeadingAndTrailingSlashes } from '@openpanel/common';
 import type {
   IChartEventFilter,
@@ -30,35 +31,77 @@ export function transformPropertyKey(property: string) {
   return `${match}['${property.replace(new RegExp(`^${match}.`), '')}']`;
 }
 
-// Returns a SQL expression for a group property using dictGet
+// Returns a SQL expression for a group property via the _g JOIN alias
 // property format: "group.name", "group.type", "group.properties.plan"
-export function getGroupPropertySql(
-  property: string,
-  projectId: string
-): string {
+export function getGroupPropertySql(property: string): string {
   const withoutPrefix = property.replace(/^group\./, '');
   if (withoutPrefix === 'name') {
-    return `dictGet('${TABLE_NAMES.groups_dict}', 'name', tuple(_group_id, ${sqlstring.escape(projectId)}))`;
+    return '_g.name';
   }
   if (withoutPrefix === 'type') {
-    return `dictGet('${TABLE_NAMES.groups_dict}', 'type', tuple(_group_id, ${sqlstring.escape(projectId)}))`;
+    return '_g.type';
   }
   if (withoutPrefix.startsWith('properties.')) {
     const propKey = withoutPrefix.replace(/^properties\./, '');
-    // properties is stored as JSON string in dict; use JSONExtractString
-    return `JSONExtractString(dictGet('${TABLE_NAMES.groups_dict}', 'properties', tuple(_group_id, ${sqlstring.escape(projectId)})), ${sqlstring.escape(propKey)})`;
+    return `_g.properties[${sqlstring.escape(propKey)}]`;
   }
   return '_group_id';
 }
 
+// Returns the SELECT expression when querying the groups table directly (no join alias).
+// Use for fetching distinct values for group.* properties.
+export function getGroupPropertySelect(property: string): string {
+  const withoutPrefix = property.replace(/^group\./, '');
+  if (withoutPrefix === 'name') {
+    return 'name';
+  }
+  if (withoutPrefix === 'type') {
+    return 'type';
+  }
+  if (withoutPrefix === 'id') {
+    return 'id';
+  }
+  if (withoutPrefix.startsWith('properties.')) {
+    const propKey = withoutPrefix.replace(/^properties\./, '');
+    return `properties[${sqlstring.escape(propKey)}]`;
+  }
+  return 'id';
+}
+
+// Returns the SELECT expression when querying the profiles table directly (no join alias).
+// Use for fetching distinct values for profile.* properties.
+export function getProfilePropertySelect(property: string): string {
+  const withoutPrefix = property.replace(/^profile\./, '');
+  if (withoutPrefix === 'id') {
+    return 'id';
+  }
+  if (withoutPrefix === 'first_name') {
+    return 'first_name';
+  }
+  if (withoutPrefix === 'last_name') {
+    return 'last_name';
+  }
+  if (withoutPrefix === 'email') {
+    return 'email';
+  }
+  if (withoutPrefix === 'avatar') {
+    return 'avatar';
+  }
+  if (withoutPrefix.startsWith('properties.')) {
+    const propKey = withoutPrefix.replace(/^properties\./, '');
+    return `properties[${sqlstring.escape(propKey)}]`;
+  }
+  return 'id';
+}
+
 export function getSelectPropertyKey(property: string, projectId?: string) {
   if (property === 'has_profile') {
     return `if(profile_id != device_id, 'true', 'false')`;
   }
 
-  // Handle group properties — requires ARRAY JOIN to be present in query
+  // Handle group properties — requires ARRAY JOIN + _g JOIN to be present in query
   if (property.startsWith('group.') && projectId) {
-    return getGroupPropertySql(property, projectId);
+    return getGroupPropertySql(property);
   }
 
   const propertyPatterns = ['properties', 'profile.properties'];
@@ -86,9 +129,7 @@ export function getChartSql({
   startDate,
   endDate,
   projectId,
-  limit,
   timezone,
-  chartType,
 }: IGetChartDataInput & { timezone: string }) {
   const {
     sb,
@@ -130,7 +171,12 @@ export function getChartSql({
     anyFilterOnGroup || anyBreakdownOnGroup || event.segment === 'group';
 
   if (needsGroupArrayJoin) {
+    addCte(
+      '_g',
+      `SELECT id, name, type, properties FROM ${TABLE_NAMES.groups} FINAL WHERE project_id = ${sqlstring.escape(projectId)}`
+    );
     sb.joins.groups = 'ARRAY JOIN groups AS _group_id';
+    sb.joins.groups_table = 'LEFT ANY JOIN _g ON _g.id = _group_id';
   }
 
   // Build WHERE clause without the bar filter (for use in subqueries and CTEs)
@@ -263,31 +309,6 @@ export function getChartSql({
     sb.where.endDate = `created_at <= toDateTime('${formatClickhouseDate(endDate)}')`;
   }
 
-  // Use CTE to define top breakdown values once, then reference in WHERE clause
-  if (breakdowns.length > 0 && limit) {
-    const breakdownSelects = breakdowns
-      .map((b) => getSelectPropertyKey(b.name, projectId))
-      .join(', ');
-
-    const groupArrayJoinClause = needsGroupArrayJoin
-      ? 'ARRAY JOIN groups AS _group_id'
-      : '';
-
-    // Add top_breakdowns CTE using the builder
-    addCte(
-      'top_breakdowns',
-      `SELECT ${breakdownSelects}
-      FROM ${TABLE_NAMES.events} e
-      ${profilesJoinRef ? `${profilesJoinRef} ` : ''}${groupArrayJoinClause ? `${groupArrayJoinClause} ` : ''}${getWhereWithoutBar()}
-      GROUP BY ${breakdownSelects}
-      ORDER BY count(*) DESC
-      LIMIT ${limit}`
-    );
-
-    // Filter main query to only include top breakdown values
-    sb.where.bar = `(${breakdowns.map((b) => getSelectPropertyKey(b.name, projectId)).join(',')}) IN (SELECT * FROM top_breakdowns)`;
-  }
-
   breakdowns.forEach((breakdown, index) => {
     // Breakdowns start at label_1 (label_0 is reserved for event name)
     const key = `label_${index + 1}`;
@@ -350,6 +371,10 @@ export function getChartSql({
   }
 
   // Note: The profile CTE (if it exists) is available in subqueries, so we can reference it directly
+  const subqueryGroupJoins = needsGroupArrayJoin
+    ? 'ARRAY JOIN groups AS _group_id LEFT ANY JOIN _g ON _g.id = _group_id '
+    : '';
+
   if (breakdowns.length > 0) {
     // Match breakdown properties in subquery with outer query's grouped values
     // Since outer query groups by label_X, we reference those in the correlation
@@ -370,7 +395,7 @@ export function getChartSql({
     sb.select.total_unique_count = `(
         SELECT uniq(profile_id)
         FROM ${TABLE_NAMES.events} e2
-        ${profilesJoinRef ? `${profilesJoinRef} ` : ''}${subqueryWhere}
+        ${subqueryGroupJoins}${profilesJoinRef ? `${profilesJoinRef} ` : ''}${subqueryWhere}
         AND ${breakdownMatches}
       ) as total_count`;
   } else {
@@ -383,7 +408,7 @@ export function getChartSql({
     sb.select.total_unique_count = `(
         SELECT uniq(profile_id)
         FROM ${TABLE_NAMES.events} e2
-        ${profilesJoinRef ? `${profilesJoinRef} ` : ''}${subqueryWhere}
+        ${subqueryGroupJoins}${profilesJoinRef ? `${profilesJoinRef} ` : ''}${subqueryWhere}
       ) as total_count`;
   }
 
@@ -432,18 +457,14 @@ export function getAggregateChartSql({
     anyFilterOnGroup || anyBreakdownOnGroup || event.segment === 'group';
 
   if (needsGroupArrayJoin) {
+    addCte(
+      '_g',
+      `SELECT id, name, type, properties FROM ${TABLE_NAMES.groups} FINAL WHERE project_id = ${sqlstring.escape(projectId)}`
+    );
     sb.joins.groups = 'ARRAY JOIN groups AS _group_id';
+    sb.joins.groups_table = 'LEFT ANY JOIN _g ON _g.id = _group_id';
   }
 
-  // Build WHERE clause without the bar filter (for use in subqueries and CTEs)
-  const getWhereWithoutBar = () => {
-    const whereWithoutBar = { ...sb.where };
-    delete whereWithoutBar.bar;
-    return Object.keys(whereWithoutBar).length
-      ? `WHERE ${join(whereWithoutBar, ' AND ')}`
-      : '';
-  };
-
   // Collect all profile fields used in filters and breakdowns
   const getProfileFields = () => {
     const fields = new Set<string>();
@@ -534,30 +555,6 @@ export function getAggregateChartSql({
   // Use startDate as the date value since we're aggregating across the entire range
   sb.select.date = `${sqlstring.escape(startDate)} as date`;
 
-  // Use CTE to define top breakdown values once, then reference in WHERE clause
-  if (breakdowns.length > 0 && limit) {
-    const breakdownSelects = breakdowns
-      .map((b) => getSelectPropertyKey(b.name, projectId))
-      .join(', ');
-
-    const groupArrayJoinClause = needsGroupArrayJoin
-      ? 'ARRAY JOIN groups AS _group_id'
-      : '';
-
-    addCte(
-      'top_breakdowns',
-      `SELECT ${breakdownSelects}
-      FROM ${TABLE_NAMES.events} e
-      ${profilesJoinRef ? `${profilesJoinRef} ` : ''}${groupArrayJoinClause ? `${groupArrayJoinClause} ` : ''}${getWhereWithoutBar()}
-      GROUP BY ${breakdownSelects}
-      ORDER BY count(*) DESC
-      LIMIT ${limit}`
-    );
-
-    // Filter main query to only include top breakdown values
-    sb.where.bar = `(${breakdowns.map((b) => getSelectPropertyKey(b.name, projectId)).join(',')}) IN (SELECT * FROM top_breakdowns)`;
-  }
-
   // Add breakdowns to SELECT and GROUP BY
   breakdowns.forEach((breakdown, index) => {
     // Breakdowns start at label_1 (label_0 is reserved for event name)
@@ -673,9 +670,9 @@ export function getEventFiltersWhereClause(
       return;
     }
 
-    // Handle group. prefixed filters using dictGet (requires ARRAY JOIN in query)
+    // Handle group. prefixed filters (requires ARRAY JOIN + _g JOIN in query)
     if (name.startsWith('group.') && projectId) {
-      const whereFrom = getGroupPropertySql(name, projectId);
+      const whereFrom = getGroupPropertySql(name);
       switch (operator) {
         case 'is': {
           if (value.length === 1) {

packages/db/src/services/conversion.service.ts

@@ -31,14 +31,14 @@ export class ConversionService {
     const funnelWindow = funnelOptions?.funnelWindow ?? 24;
     const group = funnelGroup === 'profile_id' ? 'profile_id' : 'session_id';
     const breakdownExpressions = breakdowns.map(
-      (b) => getSelectPropertyKey(b.name),
+      (b) => getSelectPropertyKey(b.name, projectId),
     );
     const breakdownSelects = breakdownExpressions.map(
       (expr, index) => `${expr} as b_${index}`,
     );
     const breakdownGroupBy = breakdowns.map((_, index) => `b_${index}`);
 
-    // Check if any breakdown uses profile fields and build profile JOIN if needed
+    // Check if any breakdown or filter uses profile fields
     const profileBreakdowns = breakdowns.filter((b) =>
       b.name.startsWith('profile.'),
     );
@@ -71,6 +71,15 @@ export class ConversionService {
 
     const events = onlyReportEvents(series);
 
+    // Check if any breakdown or filter uses group fields
+    const anyBreakdownOnGroup = breakdowns.some((b) =>
+      b.name.startsWith('group.'),
+    );
+    const anyFilterOnGroup = events.some((e) =>
+      e.filters?.some((f) => f.name.startsWith('group.')),
+    );
+    const needsGroupArrayJoin = anyBreakdownOnGroup || anyFilterOnGroup;
+
     if (events.length !== 2) {
       throw new Error('events must be an array of two events');
     }
@@ -82,10 +91,10 @@ export class ConversionService {
     const eventA = events[0]!;
     const eventB = events[1]!;
     const whereA = Object.values(
-      getEventFiltersWhereClause(eventA.filters),
+      getEventFiltersWhereClause(eventA.filters, projectId),
     ).join(' AND ');
     const whereB = Object.values(
-      getEventFiltersWhereClause(eventB.filters),
+      getEventFiltersWhereClause(eventB.filters, projectId),
     ).join(' AND ');
 
     const funnelWindowSeconds = funnelWindow * 3600;
@@ -98,6 +107,10 @@ export class ConversionService {
       ? `(name = '${eventB.name}' AND ${whereB})`
       : `name = '${eventB.name}'`;
 
+    const groupJoin = needsGroupArrayJoin
+      ? `ARRAY JOIN groups AS _group_id LEFT ANY JOIN (SELECT id, name, type, properties FROM ${TABLE_NAMES.groups} FINAL WHERE project_id = ${sqlstring.escape(projectId)}) AS _g ON _g.id = _group_id`
+      : '';
+
     // Use windowFunnel approach - single scan, no JOIN
     const query = clix(this.client, timezone)
       .select<{
@@ -126,6 +139,7 @@ export class ConversionService {
           ) as steps
         FROM ${TABLE_NAMES.events}
         ${profileJoin}
+        ${groupJoin}
         WHERE project_id = '${projectId}'
           AND name IN ('${eventA.name}', '${eventB.name}')
           AND created_at BETWEEN toDateTime('${startDate}') AND toDateTime('${endDate}')

packages/db/src/services/event.service.ts

@@ -32,14 +32,14 @@ export type IImportedEvent = Omit<
   properties: Record<string, unknown>;
 };
 
-export type IServicePage = {
+export interface IServicePage {
   path: string;
   count: number;
   project_id: string;
   first_seen: string;
   title: string;
   origin: string;
-};
+}
 
 export interface IClickhouseBotEvent {
   id: string;
@@ -335,6 +335,7 @@ export async function getEvents(
         projectId,
         isExternal: false,
         properties: {},
+        groups: [],
       };
     }
   }
@@ -439,6 +440,7 @@ export interface GetEventListOptions {
   projectId: string;
   profileId?: string;
   sessionId?: string;
+  groupId?: string;
   take: number;
   cursor?: number | Date;
   events?: string[] | null;
@@ -457,6 +459,7 @@ export async function getEventList(options: GetEventListOptions) {
     projectId,
     profileId,
     sessionId,
+    groupId,
     events,
     filters,
     startDate,
@@ -594,6 +597,10 @@ export async function getEventList(options: GetEventListOptions) {
     sb.select.revenue = 'revenue';
   }
 
+  if (select.groups) {
+    sb.select.groups = 'groups';
+  }
+
   if (profileId) {
     sb.where.deviceId = `(device_id IN (SELECT device_id as did FROM ${TABLE_NAMES.events} WHERE project_id = ${sqlstring.escape(projectId)} AND device_id != '' AND profile_id = ${sqlstring.escape(profileId)} group by did) OR profile_id = ${sqlstring.escape(profileId)})`;
   }
@@ -602,6 +609,10 @@ export async function getEventList(options: GetEventListOptions) {
     sb.where.sessionId = `session_id = ${sqlstring.escape(sessionId)}`;
   }
 
+  if (groupId) {
+    sb.where.groupId = `has(groups, ${sqlstring.escape(groupId)})`;
+  }
+
   if (startDate && endDate) {
     sb.where.created_at = `toDate(created_at) BETWEEN toDate('${formatClickhouseDate(startDate)}') AND toDate('${formatClickhouseDate(endDate)}')`;
   }
@@ -616,7 +627,7 @@ export async function getEventList(options: GetEventListOptions) {
   if (filters) {
     sb.where = {
       ...sb.where,
-      ...getEventFiltersWhereClause(filters),
+      ...getEventFiltersWhereClause(filters, projectId),
     };
 
     // Join profiles table if any filter uses profile fields
@@ -627,6 +638,13 @@ export async function getEventList(options: GetEventListOptions) {
     if (profileFilters.length > 0) {
       sb.joins.profiles = `LEFT ANY JOIN (SELECT id, ${uniq(profileFilters.map((f) => f.split('.')[0])).join(', ')} FROM ${TABLE_NAMES.profiles} FINAL WHERE project_id = ${sqlstring.escape(projectId)}) as profile on profile.id = profile_id`;
     }
+
+    // Join groups table if any filter uses group fields
+    const groupFilters = filters.filter((f) => f.name.startsWith('group.'));
+    if (groupFilters.length > 0) {
+      sb.joins.groups = 'ARRAY JOIN groups AS _group_id';
+      sb.joins.groups_cte = `LEFT ANY JOIN (SELECT id, name, type, properties FROM ${TABLE_NAMES.groups} FINAL WHERE project_id = ${sqlstring.escape(projectId)}) AS _g ON _g.id = _group_id`;
+    }
   }
 
   sb.orderBy.created_at = 'created_at DESC, id ASC';
@@ -652,6 +670,8 @@ export async function getEventList(options: GetEventListOptions) {
     });
   }
 
+  console.log('getSql', getSql());
+
   return data;
 }
 
@@ -683,7 +703,7 @@ export async function getEventsCount({
   if (filters) {
     sb.where = {
       ...sb.where,
-      ...getEventFiltersWhereClause(filters),
+      ...getEventFiltersWhereClause(filters, projectId),
     };
 
     // Join profiles table if any filter uses profile fields
@@ -694,6 +714,13 @@ export async function getEventsCount({
     if (profileFilters.length > 0) {
       sb.joins.profiles = `LEFT ANY JOIN (SELECT id, ${uniq(profileFilters.map((f) => f.split('.')[0])).join(', ')} FROM ${TABLE_NAMES.profiles} FINAL WHERE project_id = ${sqlstring.escape(projectId)}) as profile on profile.id = profile_id`;
     }
+
+    // Join groups table if any filter uses group fields
+    const groupFilters = filters.filter((f) => f.name.startsWith('group.'));
+    if (groupFilters.length > 0) {
+      sb.joins.groups = 'ARRAY JOIN groups AS _group_id';
+      sb.joins.groups_cte = `LEFT ANY JOIN (SELECT id, name, type, properties FROM ${TABLE_NAMES.groups} FINAL WHERE project_id = ${sqlstring.escape(projectId)}) AS _g ON _g.id = _group_id`;
+    }
   }
 
   const res = await chQuery<{ count: number }>(
@@ -1057,8 +1084,19 @@ class EventService {
           }
           if (filters) {
             q.rawWhere(
-              Object.values(getEventFiltersWhereClause(filters)).join(' AND ')
+              Object.values(
+                getEventFiltersWhereClause(filters, projectId)
+              ).join(' AND ')
             );
+            const groupFilters = filters.filter((f) =>
+              f.name.startsWith('group.')
+            );
+            if (groupFilters.length > 0) {
+              q.rawJoin('ARRAY JOIN groups AS _group_id');
+              q.rawJoin(
+                `LEFT ANY JOIN (SELECT id, name, type, properties FROM ${TABLE_NAMES.groups} FINAL WHERE project_id = ${sqlstring.escape(projectId)}) AS _g ON _g.id = _group_id`
+              );
+            }
           }
         },
         session: (q) => {

packages/db/src/services/funnel.service.ts

@@ -34,10 +34,10 @@ export class FunnelService {
     return group === 'profile_id' ? 'profile_id' : 'session_id';
   }
 
-  getFunnelConditions(events: IChartEvent[] = []): string[] {
+  getFunnelConditions(events: IChartEvent[] = [], projectId?: string): string[] {
     return events.map((event) => {
       const { sb, getWhere } = createSqlBuilder();
-      sb.where = getEventFiltersWhereClause(event.filters);
+      sb.where = getEventFiltersWhereClause(event.filters, projectId);
       sb.where.name = `name = ${sqlstring.escape(event.name)}`;
       return getWhere().replace('WHERE ', '');
     });
@@ -71,7 +71,7 @@ export class FunnelService {
     additionalGroupBy?: string[];
     group?: 'session_id' | 'profile_id';
   }) {
-    const funnels = this.getFunnelConditions(eventSeries);
+    const funnels = this.getFunnelConditions(eventSeries, projectId);
     const primaryKey = group === 'profile_id' ? 'profile_id' : 'session_id';
 
     return clix(this.client, timezone)
@@ -236,10 +236,18 @@ export class FunnelService {
     const anyBreakdownOnProfile = breakdowns.some((b) =>
       b.name.startsWith('profile.'),
     );
+    const anyFilterOnGroup = eventSeries.some((e) =>
+      e.filters?.some((f) => f.name.startsWith('group.')),
+    );
+    const anyBreakdownOnGroup = breakdowns.some((b) =>
+      b.name.startsWith('group.'),
+    );
+    const needsGroupArrayJoin =
+      anyFilterOnGroup || anyBreakdownOnGroup || funnelGroup === 'group';
 
     // Create the funnel CTE (session-level)
     const breakdownSelects = breakdowns.map(
-      (b, index) => `${getSelectPropertyKey(b.name)} as b_${index}`,
+      (b, index) => `${getSelectPropertyKey(b.name, projectId)} as b_${index}`,
     );
     const breakdownGroupBy = breakdowns.map((b, index) => `b_${index}`);
 
@@ -277,8 +285,21 @@ export class FunnelService {
       );
     }
 
+    if (needsGroupArrayJoin) {
+      funnelCte.rawJoin('ARRAY JOIN groups AS _group_id');
+      funnelCte.rawJoin('LEFT ANY JOIN _g ON _g.id = _group_id');
+    }
+
     // Base funnel query with CTEs
     const funnelQuery = clix(this.client, timezone);
+
+    if (needsGroupArrayJoin) {
+      funnelQuery.with(
+        '_g',
+        `SELECT id, name, type, properties FROM ${TABLE_NAMES.groups} FINAL WHERE project_id = ${sqlstring.escape(projectId)}`,
+      );
+    }
+
     funnelQuery.with('session_funnel', funnelCte);
 
     // windowFunnel is computed per the primary key (profile_id or session_id),

packages/db/src/services/group.service.ts

@@ -1,4 +1,13 @@
-import { db } from '../prisma-client';
+import { toDots } from '@openpanel/common';
+import sqlstring from 'sqlstring';
+import {
+  ch,
+  chQuery,
+  formatClickhouseDate,
+  TABLE_NAMES,
+} from '../clickhouse/client';
+import type { IServiceProfile } from './profile.service';
+import { getProfiles } from './profile.service';
 
 export type IServiceGroup = {
   id: string;
@@ -18,26 +27,69 @@ export type IServiceUpsertGroup = {
   properties?: Record<string, unknown>;
 };
 
-export async function upsertGroup(input: IServiceUpsertGroup) {
-  const { id, projectId, type, name, properties = {} } = input;
+type IClickhouseGroup = {
+  project_id: string;
+  id: string;
+  type: string;
+  name: string;
+  properties: Record<string, string>;
+  created_at: string;
+  version: string;
+};
 
-  await db.group.upsert({
-    where: {
-      projectId_id: { projectId, id },
-    },
-    update: {
-      type,
-      name,
-      properties: properties as Record<string, string>,
-      updatedAt: new Date(),
-    },
-    create: {
-      id,
-      projectId,
-      type,
-      name,
-      properties: properties as Record<string, string>,
-    },
+function transformGroup(row: IClickhouseGroup): IServiceGroup {
+  return {
+    id: row.id,
+    projectId: row.project_id,
+    type: row.type,
+    name: row.name,
+    properties: row.properties,
+    createdAt: new Date(row.created_at),
+    updatedAt: new Date(Number(row.version)),
+  };
+}
+
+async function writeGroupToCh(
+  group: {
+    id: string;
+    projectId: string;
+    type: string;
+    name: string;
+    properties: Record<string, string>;
+    createdAt?: Date;
+  },
+  deleted = 0
+) {
+  await ch.insert({
+    format: 'JSONEachRow',
+    table: TABLE_NAMES.groups,
+    values: [
+      {
+        project_id: group.projectId,
+        id: group.id,
+        type: group.type,
+        name: group.name,
+        properties: group.properties,
+        created_at: formatClickhouseDate(group.createdAt ?? new Date()),
+        version: Date.now(),
+        deleted,
+      },
+    ],
+  });
+}
+
+export async function upsertGroup(input: IServiceUpsertGroup) {
+  const existing = await getGroupById(input.id, input.projectId);
+  await writeGroupToCh({
+    id: input.id,
+    projectId: input.projectId,
+    type: input.type,
+    name: input.name,
+    properties: toDots({
+      ...(existing?.properties ?? {}),
+      ...(input.properties ?? {}),
+    }),
+    createdAt: existing?.createdAt,
   });
 }
 
@@ -45,23 +97,13 @@ export async function getGroupById(
   id: string,
   projectId: string
 ): Promise<IServiceGroup | null> {
-  const group = await db.group.findUnique({
-    where: { projectId_id: { projectId, id } },
-  });
-
-  if (!group) {
-    return null;
-  }
-
-  return {
-    id: group.id,
-    projectId: group.projectId,
-    type: group.type,
-    name: group.name,
-    properties: (group.properties as Record<string, unknown>) ?? {},
-    createdAt: group.createdAt,
-    updatedAt: group.updatedAt,
-  };
+  const rows = await chQuery<IClickhouseGroup>(`
+    SELECT project_id, id, type, name, properties, created_at, version
+    FROM ${TABLE_NAMES.groups} FINAL
+    WHERE project_id = ${sqlstring.escape(projectId)}
+      AND id = ${sqlstring.escape(id)}
+  `);
+  return rows[0] ? transformGroup(rows[0]) : null;
 }
 
 export async function getGroupList({
@@ -77,33 +119,25 @@ export async function getGroupList({
   search?: string;
   type?: string;
 }): Promise<IServiceGroup[]> {
-  const groups = await db.group.findMany({
-    where: {
-      projectId,
-      ...(type ? { type } : {}),
-      ...(search
-        ? {
-            OR: [
-              { name: { contains: search, mode: 'insensitive' } },
-              { id: { contains: search, mode: 'insensitive' } },
-            ],
-          }
-        : {}),
-    },
-    orderBy: { createdAt: 'desc' },
-    take,
-    skip: cursor,
-  });
+  const conditions = [
+    `project_id = ${sqlstring.escape(projectId)}`,
+    ...(type ? [`type = ${sqlstring.escape(type)}`] : []),
+    ...(search
+      ? [
+          `(name ILIKE ${sqlstring.escape(`%${search}%`)} OR id ILIKE ${sqlstring.escape(`%${search}%`)})`,
+        ]
+      : []),
+  ];
 
-  return groups.map((group) => ({
-    id: group.id,
-    projectId: group.projectId,
-    type: group.type,
-    name: group.name,
-    properties: (group.properties as Record<string, unknown>) ?? {},
-    createdAt: group.createdAt,
-    updatedAt: group.updatedAt,
-  }));
+  const rows = await chQuery<IClickhouseGroup>(`
+    SELECT project_id, id, type, name, properties, created_at, version
+    FROM ${TABLE_NAMES.groups} FINAL
+    WHERE ${conditions.join(' AND ')}
+    ORDER BY created_at DESC
+    LIMIT ${take}
+    OFFSET ${cursor ?? 0}
+  `);
+  return rows.map(transformGroup);
 }
 
 export async function getGroupListCount({
@@ -115,33 +149,182 @@ export async function getGroupListCount({
   type?: string;
   search?: string;
 }): Promise<number> {
-  return db.group.count({
-    where: {
-      projectId,
-      ...(type ? { type } : {}),
-      ...(search
-        ? {
-            OR: [
-              { name: { contains: search, mode: 'insensitive' } },
-              { id: { contains: search, mode: 'insensitive' } },
-            ],
-          }
-        : {}),
-    },
-  });
+  const conditions = [
+    `project_id = ${sqlstring.escape(projectId)}`,
+    ...(type ? [`type = ${sqlstring.escape(type)}`] : []),
+    ...(search
+      ? [
+          `(name ILIKE ${sqlstring.escape(`%${search}%`)} OR id ILIKE ${sqlstring.escape(`%${search}%`)})`,
+        ]
+      : []),
+  ];
+
+  const rows = await chQuery<{ count: number }>(`
+    SELECT count() as count
+    FROM ${TABLE_NAMES.groups} FINAL
+    WHERE ${conditions.join(' AND ')}
+  `);
+  return rows[0]?.count ?? 0;
 }
 
 export async function getGroupTypes(projectId: string): Promise<string[]> {
-  const groups = await db.group.findMany({
-    where: { projectId },
-    select: { type: true },
-    distinct: ['type'],
+  const rows = await chQuery<{ type: string }>(`
+    SELECT DISTINCT type
+    FROM ${TABLE_NAMES.groups} FINAL
+    WHERE project_id = ${sqlstring.escape(projectId)}
+  `);
+  return rows.map((r) => r.type);
+}
+
+export async function createGroup(input: IServiceUpsertGroup) {
+  const { id, projectId, type, name, properties = {} } = input;
+  await writeGroupToCh({
+    id,
+    projectId,
+    type,
+    name,
+    properties: properties as Record<string, string>,
+    createdAt: new Date(),
   });
-  return groups.map((g) => g.type);
+  return getGroupById(id, projectId);
+}
+
+export async function updateGroup(
+  id: string,
+  projectId: string,
+  data: { type?: string; name?: string; properties?: Record<string, unknown> }
+) {
+  const existing = await getGroupById(id, projectId);
+  if (!existing) {
+    throw new Error(`Group ${id} not found`);
+  }
+  const updated = {
+    id,
+    projectId,
+    type: data.type ?? existing.type,
+    name: data.name ?? existing.name,
+    properties: (data.properties ?? existing.properties) as Record<
+      string,
+      string
+    >,
+    createdAt: existing.createdAt,
+  };
+  await writeGroupToCh(updated);
+  return { ...existing, ...updated };
 }
 
 export async function deleteGroup(id: string, projectId: string) {
-  return db.group.delete({
-    where: { projectId_id: { projectId, id } },
-  });
+  const existing = await getGroupById(id, projectId);
+  if (!existing) {
+    throw new Error(`Group ${id} not found`);
+  }
+  await writeGroupToCh(
+    {
+      id,
+      projectId,
+      type: existing.type,
+      name: existing.name,
+      properties: existing.properties as Record<string, string>,
+      createdAt: existing.createdAt,
+    },
+    1
+  );
+  return existing;
+}
+
+export async function getGroupPropertyKeys(
+  projectId: string
+): Promise<string[]> {
+  const rows = await chQuery<{ key: string }>(`
+    SELECT DISTINCT arrayJoin(mapKeys(properties)) as key
+    FROM ${TABLE_NAMES.groups} FINAL
+    WHERE project_id = ${sqlstring.escape(projectId)}
+  `);
+  return rows.map((r) => r.key).sort();
+}
+
+export async function getGroupsByIds(
+  projectId: string,
+  ids: string[]
+): Promise<IServiceGroup[]> {
+  if (ids.length === 0) {
+    return [];
+  }
+
+  const rows = await chQuery<IClickhouseGroup>(`
+    SELECT project_id, id, type, name, properties, created_at, version
+    FROM ${TABLE_NAMES.groups} FINAL
+    WHERE project_id = ${sqlstring.escape(projectId)}
+      AND id IN (${ids.map((id) => sqlstring.escape(id)).join(',')})
+      AND deleted = 0
+  `);
+  return rows.map(transformGroup);
+}
+
+export async function getGroupMemberProfiles({
+  projectId,
+  groupId,
+  cursor,
+  take,
+  search,
+}: {
+  projectId: string;
+  groupId: string;
+  cursor?: number;
+  take: number;
+  search?: string;
+}): Promise<{ data: IServiceProfile[]; count: number }> {
+  const offset = Math.max(0, (cursor ?? 0) * take);
+  const searchCondition = search?.trim()
+    ? `AND (email ILIKE ${sqlstring.escape(`%${search.trim()}%`)} OR first_name ILIKE ${sqlstring.escape(`%${search.trim()}%`)} OR last_name ILIKE ${sqlstring.escape(`%${search.trim()}%`)})`
+    : '';
+
+  const countResult = await chQuery<{ count: number }>(`
+    SELECT count() AS count
+    FROM (
+      SELECT profile_id
+      FROM ${TABLE_NAMES.events}
+      WHERE project_id = ${sqlstring.escape(projectId)}
+        AND has(groups, ${sqlstring.escape(groupId)})
+        AND profile_id != device_id
+      GROUP BY profile_id
+    ) gm
+    INNER JOIN (
+      SELECT id FROM ${TABLE_NAMES.profiles} FINAL
+      WHERE project_id = ${sqlstring.escape(projectId)}
+      ${searchCondition}
+    ) p ON p.id = gm.profile_id
+  `);
+  const count = countResult[0]?.count ?? 0;
+
+  const idRows = await chQuery<{ profile_id: string }>(`
+    SELECT gm.profile_id
+    FROM (
+      SELECT profile_id, max(created_at) AS last_seen
+      FROM ${TABLE_NAMES.events}
+      WHERE project_id = ${sqlstring.escape(projectId)}
+        AND has(groups, ${sqlstring.escape(groupId)})
+        AND profile_id != device_id
+      GROUP BY profile_id
+      ORDER BY last_seen DESC
+    ) gm
+    INNER JOIN (
+      SELECT id FROM ${TABLE_NAMES.profiles} FINAL
+      WHERE project_id = ${sqlstring.escape(projectId)}
+      ${searchCondition}
+    ) p ON p.id = gm.profile_id
+    ORDER BY gm.last_seen DESC
+    LIMIT ${take}
+    OFFSET ${offset}
+  `);
+  const profileIds = idRows.map((r) => r.profile_id);
+  if (profileIds.length === 0) {
+    return { data: [], count };
+  }
+  const profiles = await getProfiles(profileIds, projectId);
+  const byId = new Map(profiles.map((p) => [p.id, p]));
+  const data = profileIds
+    .map((id) => byId.get(id))
+    .filter(Boolean) as IServiceProfile[];
+  return { data, count };
 }

packages/db/src/services/profile.service.ts

@@ -165,7 +165,8 @@ export async function getProfiles(ids: string[], projectId: string) {
       any(nullIf(avatar, '')) as avatar, 
       last_value(is_external) as is_external, 
       any(properties) as properties, 
-      any(created_at) as created_at
+      any(created_at) as created_at,
+      any(groups) as groups
     FROM ${TABLE_NAMES.profiles}
     WHERE 
       project_id = ${sqlstring.escape(projectId)} AND
@@ -232,6 +233,7 @@ export interface IServiceProfile {
   createdAt: Date;
   isExternal: boolean;
   projectId: string;
+  groups: string[];
   properties: Record<string, unknown> & {
     region?: string;
     country?: string;
@@ -259,6 +261,7 @@ export interface IClickhouseProfile {
   project_id: string;
   is_external: boolean;
   created_at: string;
+  groups: string[];
 }
 
 export interface IServiceUpsertProfile {
@@ -270,6 +273,7 @@ export interface IServiceUpsertProfile {
   avatar?: string;
   properties?: Record<string, unknown>;
   isExternal: boolean;
+  groups?: string[];
 }
 
 export function transformProfile({
@@ -288,6 +292,7 @@ export function transformProfile({
     id: profile.id,
     email: profile.email,
     avatar: profile.avatar,
+    groups: profile.groups ?? [],
   };
 }
 
@@ -301,6 +306,7 @@ export function upsertProfile(
     properties,
     projectId,
     isExternal,
+    groups,
   }: IServiceUpsertProfile,
   isFromEvent = false
 ) {
@@ -314,6 +320,7 @@ export function upsertProfile(
     project_id: projectId,
     created_at: formatClickhouseDate(new Date()),
     is_external: isExternal,
+    groups: groups ?? [],
   };
 
   return profileBuffer.add(profile, isFromEvent);

packages/db/src/services/session.service.ts

@@ -55,6 +55,7 @@ export interface IClickhouseSession {
   version: number;
   // Dynamically added
   has_replay?: boolean;
+  groups: string[];
 }
 
 export interface IServiceSession {
@@ -95,6 +96,7 @@ export interface IServiceSession {
   revenue: number;
   profile?: IServiceProfile;
   hasReplay?: boolean;
+  groups: string[];
 }
 
 export interface GetSessionListOptions {
@@ -152,6 +154,7 @@ export function transformSession(session: IClickhouseSession): IServiceSession {
     revenue: session.revenue,
     profile: undefined,
     hasReplay: session.has_replay,
+    groups: session.groups,
   };
 }
 
@@ -244,6 +247,7 @@ export async function getSessionList(options: GetSessionListOptions) {
     'screen_view_count',
     'event_count',
     'revenue',
+    'groups',
   ];
 
   columns.forEach((column) => {
@@ -292,6 +296,7 @@ export async function getSessionList(options: GetSessionListOptions) {
       projectId,
       isExternal: false,
       properties: {},
+      groups: [],
     },
   }));
 

packages/importer/src/providers/mixpanel.ts

@@ -396,6 +396,7 @@ export class MixpanelProvider extends BaseImportProvider<MixpanelRawEvent> {
       properties,
       created_at: createdAt,
       is_external: true,
+      groups: [],
     };
   }
 
@@ -536,6 +537,7 @@ export class MixpanelProvider extends BaseImportProvider<MixpanelRawEvent> {
         ? `${this.provider} (${props.mp_lib})`
         : this.provider,
       sdk_version: this.version,
+      groups: [],
     };
 
     // TODO: Remove this

packages/importer/src/providers/umami.ts

@@ -337,6 +337,7 @@ export class UmamiProvider extends BaseImportProvider<UmamiRawEvent> {
       imported_at: new Date().toISOString(),
       sdk_name: this.provider,
       sdk_version: this.version,
+      groups: [],
     };
   }
 

packages/logger/index.ts

@@ -66,7 +66,9 @@ export function createLogger({ name }: { name: string }): ILogger {
 
   const redactSensitiveInfo = winston.format((info) => {
     const redactObject = (obj: any): any => {
-      if (!obj || typeof obj !== 'object') return obj;
+      if (!obj || typeof obj !== 'object') {
+        return obj;
+      }
 
       return Object.keys(obj).reduce((acc, key) => {
         const lowerKey = key.toLowerCase();
@@ -85,7 +87,7 @@ export function createLogger({ name }: { name: string }): ILogger {
       }, {} as any);
     };
 
-    return Object.assign({}, info, redactObject(info));
+    return { ...info, ...redactObject(info) };
   });
 
   const transports: winston.transport[] = [];
@@ -96,12 +98,12 @@ export function createLogger({ name }: { name: string }): ILogger {
       HyperDX.getWinstonTransport(logLevel, {
         detectResources: true,
         service,
-      }),
+      })
     );
     format = winston.format.combine(
       errorFormatter(),
       redactSensitiveInfo(),
-      winston.format.json(),
+      winston.format.json()
     );
   } else {
     transports.push(new winston.transports.Console());
@@ -116,7 +118,7 @@ export function createLogger({ name }: { name: string }): ILogger {
         const metaStr =
           Object.keys(meta).length > 0 ? ` ${JSON.stringify(meta)}` : '';
         return `${level} ${message}${metaStr}`;
-      }),
+      })
     );
   }
 
@@ -126,7 +128,7 @@ export function createLogger({ name }: { name: string }): ILogger {
     format,
     transports,
     silent,
-    levels: Object.assign({}, customLevels, winston.config.syslog.levels),
+    levels: { ...customLevels, ...winston.config.syslog.levels },
   });
 
   return logger;

packages/sdks/sdk/src/index.ts

@@ -203,6 +203,7 @@ export class OpenPanel {
         payload: {
           id: groupId,
           ...metadata,
+          profileId: this.profileId,
         },
       });
     }
@@ -297,6 +298,12 @@ export class OpenPanel {
         ),
       } as TrackHandlerPayload['payload'];
     }
+    if (item.type === 'group') {
+      return {
+        ...item.payload,
+        profileId: item.payload.profileId ?? this.profileId,
+      };
+    }
     return item.payload;
   }
 

packages/trpc/src/routers/chart.ts

@@ -13,11 +13,12 @@ import {
   getChartStartEndDate,
   getEventFiltersWhereClause,
   getEventMetasCached,
+  getGroupPropertySelect,
+  getProfilePropertySelect,
   getProfilesCached,
   getReportById,
   getSelectPropertyKey,
   getSettingsForProject,
-  type IClickhouseProfile,
   type IServiceProfile,
   onlyReportEvents,
   sankeyService,
@@ -354,6 +355,32 @@ export const chartRouter = createTRPCRouter({
         const res = await query.execute();
 
         values.push(...res.map((e) => e.property_value));
+      } else if (property.startsWith('profile.')) {
+        const selectExpr = getProfilePropertySelect(property);
+        const query = clix(ch)
+          .select<{ values: string }>([`distinct ${selectExpr} as values`])
+          .from(TABLE_NAMES.profiles, true)
+          .where('project_id', '=', projectId)
+          .where(selectExpr, '!=', '')
+          .where(selectExpr, 'IS NOT NULL', null)
+          .orderBy('created_at', 'DESC')
+          .limit(100_000);
+
+        const res = await query.execute();
+        values.push(...res.map((r) => String(r.values)).filter(Boolean));
+      } else if (property.startsWith('group.')) {
+        const selectExpr = getGroupPropertySelect(property);
+        const query = clix(ch)
+          .select<{ values: string }>([`distinct ${selectExpr} as values`])
+          .from(TABLE_NAMES.groups, true)
+          .where('project_id', '=', projectId)
+          .where(selectExpr, '!=', '')
+          .where(selectExpr, 'IS NOT NULL', null)
+          .orderBy('created_at', 'DESC')
+          .limit(100_000);
+
+        const res = await query.execute();
+        values.push(...res.map((r) => String(r.values)).filter(Boolean));
       } else {
         const query = clix(ch)
           .select<{ values: string[] }>([
@@ -369,17 +396,6 @@ export const chartRouter = createTRPCRouter({
           query.where('name', '=', event);
         }
 
-        if (property.startsWith('profile.')) {
-          query.leftAnyJoin(
-            clix(ch)
-              .select<IClickhouseProfile>([])
-              .from(TABLE_NAMES.profiles)
-              .where('project_id', '=', projectId),
-            'profile.id = profile_id',
-            'profile'
-          );
-        }
-
         const events = await query.execute();
 
         values.push(
@@ -785,7 +801,7 @@ export const chartRouter = createTRPCRouter({
       const { sb, getSql } = createSqlBuilder();
 
       sb.select.profile_id = 'DISTINCT profile_id';
-      sb.where = getEventFiltersWhereClause(serie.filters);
+      sb.where = getEventFiltersWhereClause(serie.filters, projectId);
       sb.where.projectId = `project_id = ${sqlstring.escape(projectId)}`;
       sb.where.dateRange = `${clix.toStartOf('created_at', input.interval)} = ${clix.toDate(sqlstring.escape(formatClickhouseDate(dateObj)), input.interval)}`;
       if (serie.name !== '*') {
@@ -812,10 +828,22 @@ export const chartRouter = createTRPCRouter({
         sb.joins.profiles = `LEFT ANY JOIN (SELECT id, ${fieldsToSelect} FROM ${TABLE_NAMES.profiles} FINAL WHERE project_id = ${sqlstring.escape(projectId)}) as profile on profile.id = profile_id`;
       }
 
+      // Check for group filters/breakdowns and add ARRAY JOIN if needed
+      const anyFilterOnGroup = serie.filters.some((f) =>
+        f.name.startsWith('group.')
+      );
+      const anyBreakdownOnGroup = input.breakdowns
+        ? Object.keys(input.breakdowns).some((key) => key.startsWith('group.'))
+        : false;
+      if (anyFilterOnGroup || anyBreakdownOnGroup) {
+        sb.joins.groups = 'ARRAY JOIN groups AS _group_id';
+        sb.joins.groups_cte = `LEFT ANY JOIN (SELECT id, name, type, properties FROM ${TABLE_NAMES.groups} FINAL WHERE project_id = ${sqlstring.escape(projectId)}) AS _g ON _g.id = _group_id`;
+      }
+
       if (input.breakdowns) {
         Object.entries(input.breakdowns).forEach(([key, value]) => {
           // Transform property keys (e.g., properties.method -> properties['method'])
-          const propertyKey = getSelectPropertyKey(key);
+          const propertyKey = getSelectPropertyKey(key, projectId);
           sb.where[`breakdown_${key}`] =
             `${propertyKey} = ${sqlstring.escape(value)}`;
         });
@@ -858,6 +886,7 @@ export const chartRouter = createTRPCRouter({
         funnelWindow: z.number().optional(),
         funnelGroup: z.string().optional(),
         breakdowns: z.array(z.object({ name: z.string() })).optional(),
+        breakdownValues: z.array(z.string()).optional(),
         range: zRange,
       })
     )
@@ -870,6 +899,8 @@ export const chartRouter = createTRPCRouter({
         showDropoffs = false,
         funnelWindow,
         funnelGroup,
+        breakdowns = [],
+        breakdownValues = [],
       } = input;
 
       const { startDate, endDate } = getChartStartEndDate(input, timezone);
@@ -889,9 +920,21 @@ export const chartRouter = createTRPCRouter({
       // Get the grouping strategy (profile_id or session_id)
       const group = funnelService.getFunnelGroup(funnelGroup);
 
+      const anyFilterOnGroup = (eventSeries as IChartEvent[]).some((e) =>
+        e.filters?.some((f) => f.name.startsWith('group.'))
+      );
+      const anyBreakdownOnGroup = breakdowns.some((b) =>
+        b.name.startsWith('group.')
+      );
+      const needsGroupArrayJoin = anyFilterOnGroup || anyBreakdownOnGroup;
+
+      // Breakdown selects/groupBy so we can filter by specific breakdown values
+      const breakdownSelects = breakdowns.map(
+        (b, index) => `${getSelectPropertyKey(b.name, projectId)} as b_${index}`
+      );
+      const breakdownGroupBy = breakdowns.map((_, index) => `b_${index}`);
+
       // Create funnel CTE using funnel service
-      // Note: buildFunnelCte always computes windowFunnel per session_id and extracts
-      // profile_id via argMax to handle identity changes mid-session correctly.
       const funnelCte = funnelService.buildFunnelCte({
         projectId,
         startDate,
@@ -899,8 +942,8 @@ export const chartRouter = createTRPCRouter({
         eventSeries: eventSeries as IChartEvent[],
         funnelWindowMilliseconds,
         timezone,
-        // No need to add profile_id to additionalSelects/additionalGroupBy
-        // since buildFunnelCte already extracts it via argMax(profile_id, created_at)
+        additionalSelects: breakdownSelects,
+        additionalGroupBy: breakdownGroupBy,
       });
 
       // Check for profile filters and add profile join if needed
@@ -917,36 +960,50 @@ export const chartRouter = createTRPCRouter({
         );
       }
 
+      if (needsGroupArrayJoin) {
+        funnelCte.rawJoin('ARRAY JOIN groups AS _group_id');
+        funnelCte.rawJoin('LEFT ANY JOIN _g ON _g.id = _group_id');
+      }
+
       // Build main query
       const query = clix(ch, timezone);
+      if (needsGroupArrayJoin) {
+        query.with(
+          '_g',
+          `SELECT id, name, type, properties FROM ${TABLE_NAMES.groups} FINAL WHERE project_id = ${sqlstring.escape(projectId)}`
+        );
+      }
       query.with('session_funnel', funnelCte);
 
       if (group === 'profile_id') {
-        // For profile grouping: re-aggregate by profile_id, taking MAX level per profile.
-        // This ensures a user who completed the funnel with identity change is counted correctly.
-        // NOTE: Wrap in subquery to avoid ClickHouse resolving `level` in WHERE to the
-        // `max(level) AS level` alias (ILLEGAL_AGGREGATION error).
+        const breakdownAggregates =
+          breakdowns.length > 0
+            ? `, ${breakdowns.map((_, index) => `any(b_${index}) AS b_${index}`).join(', ')}`
+            : '';
         query.with(
           'funnel',
-          'SELECT profile_id, max(level) AS level FROM (SELECT * FROM session_funnel WHERE level != 0) GROUP BY profile_id'
+          `SELECT profile_id, max(level) AS level${breakdownAggregates} FROM (SELECT * FROM session_funnel WHERE level != 0) GROUP BY profile_id`
         );
       } else {
-        // For session grouping: filter out level = 0 inside the CTE
         query.with('funnel', 'SELECT * FROM session_funnel WHERE level != 0');
       }
 
-      // Get distinct profile IDs
-      // NOTE: level != 0 is already filtered inside the funnel CTE above
       query.select(['DISTINCT profile_id']).from('funnel');
 
       if (showDropoffs) {
-        // Show users who dropped off at this step (completed this step but not the next)
         query.where('level', '=', targetLevel);
       } else {
-        // Show users who completed at least this step
         query.where('level', '>=', targetLevel);
       }
 
+      // Filter by specific breakdown values when a breakdown row was clicked
+      breakdowns.forEach((_, index) => {
+        const value = breakdownValues[index];
+        if (value !== undefined) {
+          query.where(`b_${index}`, '=', value);
+        }
+      });
+
       // Cap the number of profiles to avoid exceeding ClickHouse max_query_size
       // when passing IDs to the next query
       query.limit(1000);

packages/trpc/src/routers/event.ts

@@ -122,6 +122,7 @@ export const eventRouter = createTRPCRouter({
         projectId: z.string(),
         profileId: z.string().optional(),
         sessionId: z.string().optional(),
+        groupId: z.string().optional(),
         cursor: z.string().optional(),
         filters: z.array(zChartEventFilter).default([]),
         startDate: z.date().optional(),

packages/trpc/src/routers/group.ts

@@ -1,12 +1,16 @@
 import {
   chQuery,
-  db,
+  createGroup,
   deleteGroup,
   getGroupById,
   getGroupList,
   getGroupListCount,
+  getGroupMemberProfiles,
+  getGroupPropertyKeys,
+  getGroupsByIds,
   getGroupTypes,
   TABLE_NAMES,
+  updateGroup,
 } from '@openpanel/db';
 import sqlstring from 'sqlstring';
 import { z } from 'zod';
@@ -37,6 +41,34 @@ export const groupRouter = createTRPCRouter({
       return getGroupById(id, projectId);
     }),
 
+  create: protectedProcedure
+    .input(
+      z.object({
+        id: z.string().min(1),
+        projectId: z.string(),
+        type: z.string().min(1),
+        name: z.string().min(1),
+        properties: z.record(z.string()).default({}),
+      })
+    )
+    .mutation(async ({ input }) => {
+      return createGroup(input);
+    }),
+
+  update: protectedProcedure
+    .input(
+      z.object({
+        id: z.string().min(1),
+        projectId: z.string(),
+        type: z.string().min(1).optional(),
+        name: z.string().min(1).optional(),
+        properties: z.record(z.string()).optional(),
+      })
+    )
+    .mutation(async ({ input: { id, projectId, ...data } }) => {
+      return updateGroup(id, projectId, data);
+    }),
+
   delete: protectedProcedure
     .input(z.object({ id: z.string(), projectId: z.string() }))
     .mutation(async ({ input: { id, projectId } }) => {
@@ -84,7 +116,7 @@ export const groupRouter = createTRPCRouter({
 
   members: protectedProcedure
     .input(z.object({ id: z.string(), projectId: z.string() }))
-    .query(async ({ input: { id, projectId } }) => {
+    .query(({ input: { id, projectId } }) => {
       return chQuery<{
         profileId: string;
         lastSeen: string;
@@ -99,27 +131,44 @@ export const groupRouter = createTRPCRouter({
           AND has(groups, ${sqlstring.escape(id)})
           AND profile_id != device_id
         GROUP BY profile_id
-        ORDER BY lastSeen DESC
-        LIMIT 100
+        ORDER BY lastSeen DESC, eventCount DESC
+        LIMIT 50
       `);
     }),
 
+  listProfiles: protectedProcedure
+    .input(
+      z.object({
+        projectId: z.string(),
+        groupId: z.string(),
+        cursor: z.number().optional(),
+        take: z.number().default(50),
+        search: z.string().optional(),
+      })
+    )
+    .query(async ({ input }) => {
+      const { data, count } = await getGroupMemberProfiles({
+        projectId: input.projectId,
+        groupId: input.groupId,
+        cursor: input.cursor,
+        take: input.take,
+        search: input.search,
+      });
+      return {
+        data,
+        meta: { count, pageCount: input.take },
+      };
+    }),
+
   properties: protectedProcedure
     .input(z.object({ projectId: z.string() }))
     .query(async ({ input: { projectId } }) => {
-      // Returns distinct property keys across all groups for this project
-      // Used by breakdown/filter pickers in the chart builder
-      const groups = await db.group.findMany({
-        where: { projectId },
-        select: { properties: true },
-      });
-      const keys = new Set<string>();
-      for (const group of groups) {
-        const props = group.properties as Record<string, unknown>;
-        for (const key of Object.keys(props)) {
-          keys.add(key);
-        }
-      }
-      return Array.from(keys).sort();
+      return getGroupPropertyKeys(projectId);
+    }),
+
+  listByIds: protectedProcedure
+    .input(z.object({ projectId: z.string(), ids: z.array(z.string()) }))
+    .query(async ({ input: { projectId, ids } }) => {
+      return getGroupsByIds(projectId, ids);
     }),
 });

packages/validation/src/track.validation.ts

@@ -7,6 +7,7 @@ export const zGroupPayload = z.object({
   type: z.string().min(1),
   name: z.string().min(1),
   properties: z.record(z.unknown()).optional(),
+  profileId: z.string().optional(),
 });
 
 export const zTrackPayload = z

scripts/seed-events.mjs

@@ -0,0 +1,599 @@
+#!/usr/bin/env node
+/**
+ * Seed script for generating realistic analytics events.
+ *
+ * Usage:
+ *   node scripts/seed-events.mjs [--timeline=30] [--sessions=500] [--url=http://localhost:3333]
+ *
+ * Options:
+ *   --timeline=N   Duration in minutes to spread events over (default: 30)
+ *   --sessions=N   Number of sessions to generate (default: 500)
+ *   --url=URL      API base URL (default: http://localhost:3333)
+ *   --clientId=ID  Client ID to use (required or set CLIENT_ID env var)
+ */
+
+// ---------------------------------------------------------------------------
+// Config
+// ---------------------------------------------------------------------------
+
+const args = Object.fromEntries(
+  process.argv.slice(2).map((a) => {
+    const [k, v] = a.replace(/^--/, '').split('=');
+    return [k, v ?? true];
+  })
+);
+
+const TIMELINE_MINUTES = Number(args.timeline ?? 30);
+const SESSION_COUNT = Number(args.sessions ?? 500);
+const BASE_URL = args.url ?? 'http://localhost:3333';
+const CLIENT_ID = args.clientId ?? process.env.CLIENT_ID ?? '';
+const ORIGIN = args.origin ?? process.env.ORIGIN ?? 'https://shop.example.com';
+const CONCURRENCY = 20; // max parallel requests
+
+if (!CLIENT_ID) {
+  console.error('ERROR: provide --clientId=<id> or set CLIENT_ID env var');
+  process.exit(1);
+}
+
+const TRACK_URL = `${BASE_URL}/track`;
+
+// ---------------------------------------------------------------------------
+// Deterministic seeded random (mulberry32) — keeps identities stable across runs
+// ---------------------------------------------------------------------------
+
+function mulberry32(seed) {
+  return function () {
+    seed |= 0;
+    seed = (seed + 0x6d2b79f5) | 0;
+    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+// Non-deterministic random for events (differs on each run)
+const eventRng = Math.random.bind(Math);
+
+function pick(arr, rng = eventRng) {
+  return arr[Math.floor(rng() * arr.length)];
+}
+
+function randInt(min, max, rng = eventRng) {
+  return Math.floor(rng() * (max - min + 1)) + min;
+}
+
+function randFloat(min, max, rng = eventRng) {
+  return rng() * (max - min) + min;
+}
+
+// ---------------------------------------------------------------------------
+// Fake data pools
+// ---------------------------------------------------------------------------
+
+const FIRST_NAMES = [
+  'Alice', 'Bob', 'Charlie', 'Diana', 'Eve', 'Frank', 'Grace', 'Hank',
+  'Iris', 'Jack', 'Karen', 'Leo', 'Mia', 'Noah', 'Olivia', 'Pete',
+  'Quinn', 'Rachel', 'Sam', 'Tina', 'Uma', 'Victor', 'Wendy', 'Xavier',
+  'Yara', 'Zoe', 'Aaron', 'Bella', 'Carlos', 'Dani', 'Ethan', 'Fiona',
+];
+
+const LAST_NAMES = [
+  'Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller',
+  'Davis', 'Wilson', 'Taylor', 'Anderson', 'Thomas', 'Jackson', 'White',
+  'Harris', 'Martin', 'Thompson', 'Moore', 'Young', 'Allen',
+];
+
+const EMAIL_DOMAINS = ['gmail.com', 'yahoo.com', 'outlook.com', 'icloud.com', 'proton.me'];
+
+const USER_AGENTS = [
+  'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36',
+  'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36',
+  'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
+  'Mozilla/5.0 (iPhone; CPU iPhone OS 17_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2 Mobile/15E148 Safari/604.1',
+  'Mozilla/5.0 (iPad; CPU OS 17_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2 Mobile/15E148 Safari/604.1',
+  'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:122.0) Gecko/20100101 Firefox/122.0',
+  'Mozilla/5.0 (Macintosh; Intel Mac OS X 14.3; rv:122.0) Gecko/20100101 Firefox/122.0',
+  'Mozilla/5.0 (Macintosh; Intel Mac OS X 14_3) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2 Safari/605.1.15',
+  'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36 Edg/121.0.0.0',
+  'Mozilla/5.0 (Linux; Android 14; Pixel 8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Mobile Safari/537.36',
+  'Mozilla/5.0 (Linux; Android 13; Samsung Galaxy S23) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/23.0 Chrome/115.0.0.0 Mobile Safari/537.36',
+  'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36 OPR/107.0.0.0',
+];
+
+// Ensure each session has a unique UA by appending a suffix
+function makeUniqueUA(base, index) {
+  return `${base} Session/${index}`;
+}
+
+// Generate a plausible IP address (avoiding private ranges)
+function makeIP(index) {
+  // Use a spread across several /8 public ranges
+  const ranges = [
+    [34, 0, 0, 0],
+    [52, 0, 0, 0],
+    [104, 0, 0, 0],
+    [185, 0, 0, 0],
+    [213, 0, 0, 0],
+  ];
+  const base = ranges[index % ranges.length];
+  const a = base[0];
+  const b = Math.floor(index / 65025) % 256;
+  const c = Math.floor(index / 255) % 256;
+  const d = index % 255 + 1;
+  return `${a}.${b}.${c}.${d}`;
+}
+
+// ---------------------------------------------------------------------------
+// Products & categories
+// ---------------------------------------------------------------------------
+
+const PRODUCTS = [
+  { id: 'prod_001', name: 'Wireless Headphones', category: 'Electronics', price: 8999 },
+  { id: 'prod_002', name: 'Running Shoes', category: 'Sports', price: 12999 },
+  { id: 'prod_003', name: 'Coffee Maker', category: 'Kitchen', price: 5499 },
+  { id: 'prod_004', name: 'Yoga Mat', category: 'Sports', price: 2999 },
+  { id: 'prod_005', name: 'Smart Watch', category: 'Electronics', price: 29999 },
+  { id: 'prod_006', name: 'Blender', category: 'Kitchen', price: 7999 },
+  { id: 'prod_007', name: 'Backpack', category: 'Travel', price: 4999 },
+  { id: 'prod_008', name: 'Sunglasses', category: 'Accessories', price: 3499 },
+  { id: 'prod_009', name: 'Novel: The Last Algorithm', category: 'Books', price: 1499 },
+  { id: 'prod_010', name: 'Standing Desk', category: 'Furniture', price: 45999 },
+];
+
+const CATEGORIES = ['Electronics', 'Sports', 'Kitchen', 'Travel', 'Accessories', 'Books', 'Furniture'];
+
+// ---------------------------------------------------------------------------
+// Groups (3 pre-defined companies)
+// ---------------------------------------------------------------------------
+
+const GROUPS = [
+  { id: 'org_acme', type: 'company', name: 'Acme Corp', properties: { plan: 'enterprise', industry: 'Technology', employees: 500 } },
+  { id: 'org_globex', type: 'company', name: 'Globex Inc', properties: { plan: 'pro', industry: 'Finance', employees: 120 } },
+  { id: 'org_initech', type: 'company', name: 'Initech LLC', properties: { plan: 'starter', industry: 'Consulting', employees: 45 } },
+];
+
+// ---------------------------------------------------------------------------
+// Scenarios — 20 distinct user journeys
+// ---------------------------------------------------------------------------
+
+/**
+ * Each scenario returns a list of event descriptors.
+ * screen_view events use a `path` property (origin + pathname).
+ */
+
+const SCENARIOS = [
+  // 1. Full e-commerce checkout success
+  (product) => [
+    { name: 'screen_view', props: { path: `${ORIGIN}/`, title: 'Home', referrer: 'https://google.com' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/products/${product.id}`, title: product.name } },
+    { name: 'product_viewed', props: { product_id: product.id, product_name: product.name, price: product.price, category: product.category } },
+    { name: 'add_to_cart', props: { product_id: product.id, product_name: product.name, price: product.price, quantity: 1 } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/cart`, title: 'Cart' } },
+    { name: 'checkout_started', props: { cart_total: product.price, item_count: 1 } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/checkout/shipping`, title: 'Shipping Info' } },
+    { name: 'shipping_info_submitted', props: { shipping_method: 'standard', estimated_days: 5 } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/checkout/payment`, title: 'Payment' } },
+    { name: 'payment_info_submitted', props: { payment_method: 'credit_card' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/checkout/review`, title: 'Order Review' } },
+    { name: 'purchase', props: { order_id: `ord_${Date.now()}`, revenue: product.price, product_id: product.id, product_name: product.name, quantity: 1 }, revenue: true },
+    { name: 'screen_view', props: { path: `${ORIGIN}/checkout/success`, title: 'Order Confirmed' } },
+    { name: 'checkout_success', props: { order_id: `ord_${Date.now()}`, revenue: product.price } },
+  ],
+
+  // 2. Checkout failed (payment declined)
+  (product) => [
+    { name: 'screen_view', props: { path: `${ORIGIN}/`, title: 'Home' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/products/${product.id}`, title: product.name } },
+    { name: 'product_viewed', props: { product_id: product.id, product_name: product.name, price: product.price, category: product.category } },
+    { name: 'add_to_cart', props: { product_id: product.id, product_name: product.name, price: product.price, quantity: 1 } },
+    { name: 'checkout_started', props: { cart_total: product.price, item_count: 1 } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/checkout/shipping`, title: 'Shipping Info' } },
+    { name: 'shipping_info_submitted', props: { shipping_method: 'express', estimated_days: 2 } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/checkout/payment`, title: 'Payment' } },
+    { name: 'payment_info_submitted', props: { payment_method: 'credit_card' } },
+    { name: 'checkout_failed', props: { reason: 'payment_declined', error_code: 'insufficient_funds' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/checkout/payment`, title: 'Payment' } },
+  ],
+
+  // 3. Browse only — no purchase
+  (product) => [
+    { name: 'screen_view', props: { path: `${ORIGIN}/`, title: 'Home', referrer: 'https://facebook.com' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/categories/${product.category.toLowerCase()}`, title: product.category } },
+    { name: 'category_viewed', props: { category: product.category } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/products/${product.id}`, title: product.name } },
+    { name: 'product_viewed', props: { product_id: product.id, product_name: product.name, price: product.price, category: product.category } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/products/${PRODUCTS[1].id}`, title: PRODUCTS[1].name } },
+    { name: 'product_viewed', props: { product_id: PRODUCTS[1].id, product_name: PRODUCTS[1].name, price: PRODUCTS[1].price, category: PRODUCTS[1].category } },
+  ],
+
+  // 4. Add to cart then abandon
+  (product) => [
+    { name: 'screen_view', props: { path: `${ORIGIN}/`, title: 'Home' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/products/${product.id}`, title: product.name } },
+    { name: 'product_viewed', props: { product_id: product.id, product_name: product.name, price: product.price, category: product.category } },
+    { name: 'add_to_cart', props: { product_id: product.id, product_name: product.name, price: product.price, quantity: 1 } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/cart`, title: 'Cart' } },
+    { name: 'cart_abandoned', props: { cart_total: product.price, item_count: 1 } },
+  ],
+
+  // 5. Search → product → purchase
+  (product) => [
+    { name: 'screen_view', props: { path: `${ORIGIN}/`, title: 'Home' } },
+    { name: 'search', props: { query: product.name.split(' ')[0], result_count: randInt(3, 20) } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/search?q=${encodeURIComponent(product.name)}`, title: 'Search Results' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/products/${product.id}`, title: product.name } },
+    { name: 'product_viewed', props: { product_id: product.id, product_name: product.name, price: product.price, category: product.category } },
+    { name: 'add_to_cart', props: { product_id: product.id, product_name: product.name, price: product.price, quantity: 1 } },
+    { name: 'checkout_started', props: { cart_total: product.price, item_count: 1 } },
+    { name: 'shipping_info_submitted', props: { shipping_method: 'standard', estimated_days: 5 } },
+    { name: 'payment_info_submitted', props: { payment_method: 'paypal' } },
+    { name: 'purchase', props: { order_id: `ord_${Date.now()}`, revenue: product.price, product_id: product.id, product_name: product.name, quantity: 1 }, revenue: true },
+    { name: 'checkout_success', props: { order_id: `ord_${Date.now()}`, revenue: product.price } },
+  ],
+
+  // 6. Sign up flow
+  (_product) => [
+    { name: 'screen_view', props: { path: `${ORIGIN}/`, title: 'Home', referrer: 'https://twitter.com' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/signup`, title: 'Sign Up' } },
+    { name: 'signup_started', props: {} },
+    { name: 'signup_step_completed', props: { step: 'email', step_number: 1 } },
+    { name: 'signup_step_completed', props: { step: 'password', step_number: 2 } },
+    { name: 'signup_step_completed', props: { step: 'profile', step_number: 3 } },
+    { name: 'signup_completed', props: { method: 'email' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/dashboard`, title: 'Dashboard' } },
+  ],
+
+  // 7. Login → browse → wishlist
+  (product) => [
+    { name: 'screen_view', props: { path: `${ORIGIN}/login`, title: 'Login' } },
+    { name: 'login', props: { method: 'email' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/`, title: 'Home' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/products/${product.id}`, title: product.name } },
+    { name: 'product_viewed', props: { product_id: product.id, product_name: product.name, price: product.price, category: product.category } },
+    { name: 'add_to_wishlist', props: { product_id: product.id, product_name: product.name, price: product.price } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/wishlist`, title: 'Wishlist' } },
+  ],
+
+  // 8. Promo code → purchase
+  (product) => [
+    { name: 'screen_view', props: { path: `${ORIGIN}/`, title: 'Home', referrer: 'https://newsletter.example.com' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/products/${product.id}`, title: product.name } },
+    { name: 'product_viewed', props: { product_id: product.id, product_name: product.name, price: product.price, category: product.category } },
+    { name: 'add_to_cart', props: { product_id: product.id, product_name: product.name, price: product.price, quantity: 1 } },
+    { name: 'checkout_started', props: { cart_total: product.price, item_count: 1 } },
+    { name: 'promo_code_applied', props: { code: 'SAVE20', discount_percent: 20, discount_amount: Math.round(product.price * 0.2) } },
+    { name: 'shipping_info_submitted', props: { shipping_method: 'standard', estimated_days: 5 } },
+    { name: 'payment_info_submitted', props: { payment_method: 'credit_card' } },
+    { name: 'purchase', props: { order_id: `ord_${Date.now()}`, revenue: Math.round(product.price * 0.8), product_id: product.id, product_name: product.name, quantity: 1, promo_code: 'SAVE20' }, revenue: true },
+    { name: 'checkout_success', props: { order_id: `ord_${Date.now()}`, revenue: Math.round(product.price * 0.8) } },
+  ],
+
+  // 9. Multi-item purchase
+  (_product) => {
+    const p1 = PRODUCTS[0];
+    const p2 = PRODUCTS[3];
+    const total = p1.price + p2.price;
+    return [
+      { name: 'screen_view', props: { path: `${ORIGIN}/`, title: 'Home' } },
+      { name: 'screen_view', props: { path: `${ORIGIN}/products/${p1.id}`, title: p1.name } },
+      { name: 'product_viewed', props: { product_id: p1.id, product_name: p1.name, price: p1.price, category: p1.category } },
+      { name: 'add_to_cart', props: { product_id: p1.id, product_name: p1.name, price: p1.price, quantity: 1 } },
+      { name: 'screen_view', props: { path: `${ORIGIN}/products/${p2.id}`, title: p2.name } },
+      { name: 'product_viewed', props: { product_id: p2.id, product_name: p2.name, price: p2.price, category: p2.category } },
+      { name: 'add_to_cart', props: { product_id: p2.id, product_name: p2.name, price: p2.price, quantity: 1 } },
+      { name: 'checkout_started', props: { cart_total: total, item_count: 2 } },
+      { name: 'shipping_info_submitted', props: { shipping_method: 'express', estimated_days: 2 } },
+      { name: 'payment_info_submitted', props: { payment_method: 'credit_card' } },
+      { name: 'purchase', props: { order_id: `ord_${Date.now()}`, revenue: total, item_count: 2 }, revenue: true },
+      { name: 'checkout_success', props: { order_id: `ord_${Date.now()}`, revenue: total } },
+    ];
+  },
+
+  // 10. Help center visit
+  (_product) => [
+    { name: 'screen_view', props: { path: `${ORIGIN}/`, title: 'Home' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/help`, title: 'Help Center' } },
+    { name: 'help_search', props: { query: 'return policy', result_count: 4 } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/help/returns`, title: 'Return Policy' } },
+    { name: 'help_article_read', props: { article: 'return_policy', time_on_page: randInt(60, 180) } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/help/shipping`, title: 'Shipping Info' } },
+    { name: 'help_article_read', props: { article: 'shipping_times', time_on_page: randInt(30, 120) } },
+  ],
+
+  // 11. Product review submitted
+  (product) => [
+    { name: 'screen_view', props: { path: `${ORIGIN}/`, title: 'Home' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/products/${product.id}`, title: product.name } },
+    { name: 'product_viewed', props: { product_id: product.id, product_name: product.name, price: product.price, category: product.category } },
+    { name: 'review_started', props: { product_id: product.id } },
+    { name: 'review_submitted', props: { product_id: product.id, rating: randInt(3, 5), has_text: true } },
+  ],
+
+  // 12. Newsletter signup only
+  (_product) => [
+    { name: 'screen_view', props: { path: `${ORIGIN}/`, title: 'Home', referrer: 'https://instagram.com' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/blog`, title: 'Blog' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/blog/top-10-gadgets-2024`, title: 'Top 10 Gadgets 2024' } },
+    { name: 'newsletter_signup', props: { source: 'blog_article', campaign: 'gadgets_2024' } },
+  ],
+
+  // 13. Account settings update
+  (_product) => [
+    { name: 'screen_view', props: { path: `${ORIGIN}/login`, title: 'Login' } },
+    { name: 'login', props: { method: 'google' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/account`, title: 'Account' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/account/settings`, title: 'Settings' } },
+    { name: 'settings_updated', props: { field: 'notification_preferences', value: 'email_only' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/account/address`, title: 'Addresses' } },
+    { name: 'address_added', props: { is_default: true } },
+  ],
+
+  // 14. Referral program engagement
+  (product) => [
+    { name: 'screen_view', props: { path: `${ORIGIN}/`, title: 'Home', referrer: 'https://referral.example.com/?ref=abc123' } },
+    { name: 'referral_link_clicked', props: { referrer_id: 'usr_ref123', campaign: 'summer_referral' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/products/${product.id}`, title: product.name } },
+    { name: 'product_viewed', props: { product_id: product.id, product_name: product.name, price: product.price, category: product.category } },
+    { name: 'add_to_cart', props: { product_id: product.id, product_name: product.name, price: product.price, quantity: 1 } },
+    { name: 'checkout_started', props: { cart_total: product.price, item_count: 1 } },
+    { name: 'shipping_info_submitted', props: { shipping_method: 'standard', estimated_days: 5 } },
+    { name: 'payment_info_submitted', props: { payment_method: 'credit_card' } },
+    { name: 'purchase', props: { order_id: `ord_${Date.now()}`, revenue: product.price, referral_code: 'abc123' }, revenue: true },
+    { name: 'checkout_success', props: { order_id: `ord_${Date.now()}`, revenue: product.price } },
+  ],
+
+  // 15. Mobile quick browse — short session
+  (product) => [
+    { name: 'screen_view', props: { path: `${ORIGIN}/`, title: 'Home' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/categories/${product.category.toLowerCase()}`, title: product.category } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/products/${product.id}`, title: product.name } },
+    { name: 'product_viewed', props: { product_id: product.id, product_name: product.name, price: product.price, category: product.category } },
+  ],
+
+  // 16. Compare products
+  (product) => [
+    { name: 'screen_view', props: { path: `${ORIGIN}/`, title: 'Home' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/products/${product.id}`, title: product.name } },
+    { name: 'product_viewed', props: { product_id: product.id, product_name: product.name, price: product.price, category: product.category } },
+    { name: 'compare_added', props: { product_id: product.id } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/products/${PRODUCTS[4].id}`, title: PRODUCTS[4].name } },
+    { name: 'product_viewed', props: { product_id: PRODUCTS[4].id, product_name: PRODUCTS[4].name, price: PRODUCTS[4].price, category: PRODUCTS[4].category } },
+    { name: 'compare_added', props: { product_id: PRODUCTS[4].id } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/compare?ids=${product.id},${PRODUCTS[4].id}`, title: 'Compare Products' } },
+    { name: 'compare_viewed', props: { product_ids: [product.id, PRODUCTS[4].id] } },
+  ],
+
+  // 17. Shipping failure retry → success
+  (product) => [
+    { name: 'screen_view', props: { path: `${ORIGIN}/`, title: 'Home' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/products/${product.id}`, title: product.name } },
+    { name: 'product_viewed', props: { product_id: product.id, product_name: product.name, price: product.price, category: product.category } },
+    { name: 'add_to_cart', props: { product_id: product.id, product_name: product.name, price: product.price, quantity: 1 } },
+    { name: 'checkout_started', props: { cart_total: product.price, item_count: 1 } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/checkout/shipping`, title: 'Shipping Info' } },
+    { name: 'shipping_info_error', props: { error: 'invalid_address', attempt: 1 } },
+    { name: 'shipping_info_submitted', props: { shipping_method: 'standard', estimated_days: 5, attempt: 2 } },
+    { name: 'payment_info_submitted', props: { payment_method: 'credit_card' } },
+    { name: 'purchase', props: { order_id: `ord_${Date.now()}`, revenue: product.price, product_id: product.id }, revenue: true },
+    { name: 'checkout_success', props: { order_id: `ord_${Date.now()}`, revenue: product.price } },
+  ],
+
+  // 18. Subscription / SaaS upgrade
+  (_product) => [
+    { name: 'screen_view', props: { path: `${ORIGIN}/pricing`, title: 'Pricing' } },
+    { name: 'pricing_viewed', props: {} },
+    { name: 'plan_selected', props: { plan: 'pro', billing: 'annual', price: 9900 } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/checkout/subscription`, title: 'Subscribe' } },
+    { name: 'payment_info_submitted', props: { payment_method: 'credit_card' } },
+    { name: 'subscription_started', props: { plan: 'pro', billing: 'annual', revenue: 9900 }, revenue: true },
+    { name: 'screen_view', props: { path: `${ORIGIN}/dashboard`, title: 'Dashboard' } },
+  ],
+
+  // 19. Deep content engagement (blog)
+  (_product) => [
+    { name: 'screen_view', props: { path: `${ORIGIN}/blog`, title: 'Blog', referrer: 'https://google.com' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/blog/buying-guide-headphones`, title: 'Headphones Buying Guide' } },
+    { name: 'content_read', props: { article: 'headphones_buying_guide', reading_time: randInt(120, 480), scroll_depth: randFloat(0.6, 1.0) } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/blog/best-running-shoes-2024`, title: 'Best Running Shoes 2024' } },
+    { name: 'content_read', props: { article: 'best_running_shoes_2024', reading_time: randInt(90, 300), scroll_depth: randFloat(0.5, 1.0) } },
+  ],
+
+  // 20. Error / 404 bounce
+  (_product) => [
+    { name: 'screen_view', props: { path: `${ORIGIN}/products/old-discontinued-product`, title: 'Product Not Found' } },
+    { name: 'page_error', props: { error_code: 404, path: '/products/old-discontinued-product' } },
+    { name: 'screen_view', props: { path: `${ORIGIN}/`, title: 'Home' } },
+  ],
+];
+
+// ---------------------------------------------------------------------------
+// Identity generation (deterministic by session index)
+// ---------------------------------------------------------------------------
+
+function generateIdentity(sessionIndex, sessionRng) {
+  const firstName = pick(FIRST_NAMES, sessionRng);
+  const lastName = pick(LAST_NAMES, sessionRng);
+  const emailDomain = pick(EMAIL_DOMAINS, sessionRng);
+  const profileId = `user_${String(sessionIndex + 1).padStart(4, '0')}`;
+  return {
+    profileId,
+    firstName,
+    lastName,
+    email: `${firstName.toLowerCase()}.${lastName.toLowerCase()}${sessionIndex}@${emailDomain}`,
+  };
+}
+
+// Which sessions belong to which group (roughly 1/6 each)
+function getGroupForSession(sessionIndex) {
+  if (sessionIndex % 6 === 0) return GROUPS[0];
+  if (sessionIndex % 6 === 1) return GROUPS[1];
+  if (sessionIndex % 6 === 2) return GROUPS[2];
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// HTTP helper
+// ---------------------------------------------------------------------------
+
+async function sendEvent(payload, ua, ip) {
+  const headers = {
+    'Content-Type': 'application/json',
+    'user-agent': ua,
+    'openpanel-client-id': CLIENT_ID,
+    'x-forwarded-for': ip,
+    origin: ORIGIN,
+  };
+
+  const res = await fetch(TRACK_URL, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify(payload),
+  });
+
+  if (!res.ok) {
+    const text = await res.text().catch(() => '');
+    console.warn(`  [WARN] ${res.status} ${payload.type}/${payload.payload?.name ?? ''}: ${text.slice(0, 120)}`);
+  }
+  return res;
+}
+
+// ---------------------------------------------------------------------------
+// Build session event list
+// ---------------------------------------------------------------------------
+
+function buildSession(sessionIndex) {
+  const sessionRng = mulberry32(sessionIndex * 9973 + 1337); // deterministic per session
+
+  const identity = generateIdentity(sessionIndex, sessionRng);
+  const group = getGroupForSession(sessionIndex);
+  const ua = makeUniqueUA(pick(USER_AGENTS, sessionRng), sessionIndex);
+  const ip = makeIP(sessionIndex);
+  const product = pick(PRODUCTS, sessionRng);
+  const scenarioFn = SCENARIOS[sessionIndex % SCENARIOS.length];
+  const events = scenarioFn(product);
+
+  return { identity, group, ua, ip, events };
+}
+
+// ---------------------------------------------------------------------------
+// Schedule events across timeline
+// ---------------------------------------------------------------------------
+
+function scheduleSession(session, sessionIndex, totalSessions) {
+  const timelineMs = TIMELINE_MINUTES * 60 * 1000;
+  const now = Date.now();
+
+  // Sessions are spread across the timeline
+  const sessionStartOffset = (sessionIndex / totalSessions) * timelineMs;
+  const sessionStart = now - timelineMs + sessionStartOffset;
+
+  // Events within session: spread over 2-10 minutes
+  const sessionDurationMs = randInt(2, 10) * 60 * 1000;
+  const eventCount = session.events.length;
+
+  return session.events.map((event, i) => {
+    const eventOffset = eventCount > 1 ? (i / (eventCount - 1)) * sessionDurationMs : 0;
+    return {
+      ...event,
+      timestamp: Math.round(sessionStart + eventOffset),
+    };
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Concurrency limiter
+// ---------------------------------------------------------------------------
+
+async function withConcurrency(tasks, limit) {
+  const results = [];
+  const executing = [];
+  for (const task of tasks) {
+    const p = Promise.resolve().then(task);
+    results.push(p);
+    const e = p.then(() => executing.splice(executing.indexOf(e), 1));
+    executing.push(e);
+    if (executing.length >= limit) {
+      await Promise.race(executing);
+    }
+  }
+  return Promise.all(results);
+}
+
+// ---------------------------------------------------------------------------
+// Main
+// ---------------------------------------------------------------------------
+
+async function main() {
+  console.log(`\nSeeding ${SESSION_COUNT} sessions over ${TIMELINE_MINUTES} minutes`);
+  console.log(`API: ${TRACK_URL}`);
+  console.log(`Client ID: ${CLIENT_ID}\n`);
+
+  let totalEvents = 0;
+  let errors = 0;
+
+  const sessionTasks = Array.from({ length: SESSION_COUNT }, (_, i) => async () => {
+    const session = buildSession(i);
+    const scheduledEvents = scheduleSession(session, i, SESSION_COUNT);
+    const { identity, group, ua, ip } = session;
+
+    // 1. Identify
+    try {
+      await sendEvent({ type: 'identify', payload: identity }, ua, ip);
+    } catch (e) {
+      errors++;
+      console.error(`  [ERROR] identify session ${i}:`, e.message);
+    }
+
+    // 2. Group (if applicable)
+    if (group) {
+      try {
+        await sendEvent({ type: 'group', payload: { ...group, profileId: identity.profileId } }, ua, ip);
+      } catch (e) {
+        errors++;
+        console.error(`  [ERROR] group session ${i}:`, e.message);
+      }
+    }
+
+    // 3. Track events in order
+    for (const ev of scheduledEvents) {
+      const trackPayload = {
+        name: ev.name,
+        profileId: identity.profileId,
+        properties: {
+          ...ev.props,
+          __timestamp: new Date(ev.timestamp).toISOString(),
+          ...(group ? { __group: group.id } : {}),
+        },
+        groups: group ? [group.id] : [],
+      };
+
+      if (ev.revenue) {
+        trackPayload.properties.__revenue = ev.props.revenue;
+      }
+
+      try {
+        await sendEvent({ type: 'track', payload: trackPayload }, ua, ip);
+        totalEvents++;
+      } catch (e) {
+        errors++;
+        console.error(`  [ERROR] track ${ev.name} session ${i}:`, e.message);
+      }
+    }
+
+    if ((i + 1) % 50 === 0 || i + 1 === SESSION_COUNT) {
+      console.log(`  Progress: ${i + 1}/${SESSION_COUNT} sessions`);
+    }
+  });
+
+  await withConcurrency(sessionTasks, CONCURRENCY);
+
+  console.log(`\nDone!`);
+  console.log(`  Sessions: ${SESSION_COUNT}`);
+  console.log(`  Events sent: ${totalEvents}`);
+  console.log(`  Errors: ${errors}`);
+}
+
+main().catch((err) => {
+  console.error('Fatal:', err);
+  process.exit(1);
+});