From 0841c9797cb9ea4b9c3f7bf2e62df59fd1f529e5 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 07:37:41 +0530
Subject: [PATCH 01/98] feat(frontend): add basic structure for data filters
 page

---
 .../app/[teamId]/data_filters/page.tsx        | 137 ++++++++++++++++++
 frontend/dashboard/app/[teamId]/layout.tsx    |   6 +
 frontend/dashboard/app/api/api_calls.ts       |  61 ++++++++
 3 files changed, 204 insertions(+)
 create mode 100644 frontend/dashboard/app/[teamId]/data_filters/page.tsx

diff --git a/frontend/dashboard/app/[teamId]/data_filters/page.tsx b/frontend/dashboard/app/[teamId]/data_filters/page.tsx
new file mode 100644
index 000000000..2a5619195
--- /dev/null
+++ b/frontend/dashboard/app/[teamId]/data_filters/page.tsx
@@ -0,0 +1,137 @@
+"use client"
+
+import { DataFiltersApiStatus, DataFiltersResponse, fetchDataFiltersFromServer, FilterSource } from '@/app/api/api_calls'
+import Filters, { AppVersionsInitialSelectionType, defaultFilters } from '@/app/components/filters'
+import LoadingBar from '@/app/components/loading_bar'
+import { Table, TableBody, TableHead, TableHeader, TableRow } from '@/app/components/table'
+
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useEffect, useState } from 'react'
+
+interface PageState {
+    dataFiltersApiStatus: DataFiltersApiStatus
+    filters: typeof defaultFilters
+    dataFilters: DataFiltersResponse | null
+}
+
+export default function DataFilters({ params }: { params: { teamId: string } }) {
+    const router = useRouter()
+    const searchParams = useSearchParams()
+
+    const initialState: PageState = {
+        dataFiltersApiStatus: DataFiltersApiStatus.Loading,
+        filters: defaultFilters,
+        dataFilters: null,
+    }
+
+    const [pageState, setPageState] = useState<PageState>(initialState)
+
+    const updatePageState = (newState: Partial<PageState>) => {
+        setPageState(prevState => {
+            const updatedState = { ...prevState, ...newState }
+            return updatedState
+        })
+    }
+
+    const getDataFilters = async () => {
+        updatePageState({ dataFiltersApiStatus: DataFiltersApiStatus.Loading })
+
+        const result = await fetchDataFiltersFromServer(pageState.filters.app!.id)
+
+        switch (result.status) {
+            case DataFiltersApiStatus.Error:
+                updatePageState({ dataFiltersApiStatus: DataFiltersApiStatus.Error })
+                break
+            case DataFiltersApiStatus.NoFilters:
+                updatePageState({ dataFiltersApiStatus: DataFiltersApiStatus.NoFilters })
+                break
+            case DataFiltersApiStatus.Success:
+                updatePageState({
+                    dataFiltersApiStatus: DataFiltersApiStatus.Success,
+                    dataFilters: result.data
+                })
+                break
+        }
+    }
+
+    const handleFiltersChanged = (updatedFilters: typeof defaultFilters) => {
+        // update filters only if they have changed
+        if (pageState.filters.ready !== updatedFilters.ready || pageState.filters.serialisedFilters !== updatedFilters.serialisedFilters) {
+            updatePageState({
+                filters: updatedFilters,
+                dataFilters: null,
+            })
+        }
+    }
+
+    useEffect(() => {
+        if (!pageState.filters.ready) {
+            return
+        }
+
+        // update url
+        router.replace(`?${pageState.filters.serialisedFilters!}`, { scroll: false })
+
+        getDataFilters()
+    }, [pageState.filters])
+
+    return (
+        <div className="flex flex-col selection:bg-yellow-200/75 items-start">
+            <p className="font-display text-4xl max-w-6xl text-center">Data Filters</p>
+            <div className="py-4" />
+
+            <Filters
+                teamId={params.teamId}
+                filterSource={FilterSource.Events}
+                appVersionsInitialSelectionType={AppVersionsInitialSelectionType.All}
+                showNoData={true}
+                showNotOnboarded={false}
+                showAppSelector={true}
+                showAppVersions={false}
+                showDates={false}
+                showSessionType={false}
+                showOsVersions={false}
+                showCountries={false}
+                showNetworkTypes={false}
+                showNetworkProviders={false}
+                showNetworkGenerations={false}
+                showLocales={false}
+                showDeviceManufacturers={false}
+                showDeviceNames={false}
+                showBugReportStatus={false}
+                showUdAttrs={false}
+                showFreeText={false}
+                freeTextPlaceholder={""}
+                onFiltersChanged={handleFiltersChanged} />
+            <div className="py-4" />
+
+            {/* Error state for bug reports fetch */}
+            {pageState.filters.ready
+                && pageState.dataFiltersApiStatus === DataFiltersApiStatus.Error
+                && <p className="text-lg font-display">Error fetching data filters, please change filters, refresh page or select a different app to try again</p>}
+
+            {/* Main bug reports list UI */}
+            {pageState.filters.ready
+                && (pageState.dataFiltersApiStatus === DataFiltersApiStatus.Success || pageState.dataFiltersApiStatus === DataFiltersApiStatus.Loading) &&
+                <div className="flex flex-col items-center w-full">
+                    <div className={`py-1 w-full ${pageState.dataFiltersApiStatus === DataFiltersApiStatus.Loading ? 'visible' : 'invisible'}`}>
+                        <LoadingBar />
+                    </div>
+                    <div className="py-4" />
+                    <Table className="font-display">
+                        <TableHeader>
+                            <TableRow>
+                                <TableHead className="w-[40%]">Filter</TableHead>
+                                <TableHead className="w-[15%] text-center">Created At</TableHead>
+                                <TableHead className="w-[15%] text-center">Created By</TableHead>
+                                <TableHead className="w-[15%] text-center">Last Updated</TableHead>
+                                <TableHead className="w-[15%] text-center">Updated At</TableHead>
+                            </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                        </TableBody>
+                    </Table>
+                </div>}
+        </div>
+    )
+}
diff --git a/frontend/dashboard/app/[teamId]/layout.tsx b/frontend/dashboard/app/[teamId]/layout.tsx
index 22efc1edb..ce5230f6e 100644
--- a/frontend/dashboard/app/[teamId]/layout.tsx
+++ b/frontend/dashboard/app/[teamId]/layout.tsx
@@ -91,6 +91,12 @@ const initNavData = {
     {
       title: "Settings",
       items: [
+        {
+          title: "Data Filters",
+          url: "data_filters",
+          isActive: false,
+          external: false,
+        },
         {
           title: "Apps",
           url: "apps",
diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index 4ec1205c7..5d7e3b98d 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -353,6 +353,15 @@ export enum AlertsOverviewApiStatus {
   Cancelled,
 }
 
+export enum DataFiltersApiStatus {
+  Loading,
+  Success,
+  Error,
+  NoFilters,
+  Cancelled,
+}
+
+
 export enum SessionType {
   All = "All Sessions",
   Crashes = "Crash Sessions",
@@ -1022,6 +1031,34 @@ export const emptyAlertsOverviewResponse = {
   }[],
 }
 
+export type DataFiltersResponse = {
+  meta: {
+    next: false,
+    previous: false,
+  },
+  results: DataFilter[],
+}
+
+export type DataFilter = {
+  id: string,
+  type: DataFilterType,
+  rule: string,
+  collection_config: DataFilterCollectionConfig,
+  attachment_config: DataFilterAttachmentConfig | null,
+  created_at: string,
+  created_by: string,
+  updated_at: string,
+  updated_by: string,
+}
+
+export type DataFilterType = "event" | "trace"
+export type DataFilterCollectionConfig =
+  | { mode: 'sample_rate'; sample_rate: number }
+  | { mode: 'timeline_only' }
+  | { mode: 'disable' };
+
+export type DataFilterAttachmentConfig = 'layout_snapshot' | 'screenshot' | 'none';
+
 export class AppVersion {
   name: string
   code: string
@@ -2356,3 +2393,27 @@ export const fetchAlertsOverviewFromServer = async (
     return { status: AlertsOverviewApiStatus.Cancelled, data: null }
   }
 }
+
+export const fetchDataFiltersFromServer = async (
+  appId: String,
+) => {
+  const url = `/api/apps/${appId}/data_filters`
+
+  try {
+    const res = await measureAuth.fetchMeasure(url)
+
+    if (!res.ok) {
+      return { status: DataFiltersApiStatus.Error, data: null }
+    }
+
+    const data = await res.json()
+
+    if (data.results === null) {
+      return { status: DataFiltersApiStatus.NoFilters, data: null }
+    } else {
+      return { status: DataFiltersApiStatus.Success, data: data }
+    }
+  } catch {
+    return { status: DataFiltersApiStatus.Cancelled, data: null }
+  }
+}
\ No newline at end of file

From d07fb2ce6495dd75790c0d3af704a57c80d3ae0b Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 07:53:51 +0530
Subject: [PATCH 02/98] feat(frontend): add table with dummy data

---
 .../app/[teamId]/data_filters/page.tsx        | 70 +++++++++++++++----
 frontend/dashboard/app/api/api_calls.ts       | 66 ++++++++++++++++-
 2 files changed, 123 insertions(+), 13 deletions(-)

diff --git a/frontend/dashboard/app/[teamId]/data_filters/page.tsx b/frontend/dashboard/app/[teamId]/data_filters/page.tsx
index 2a5619195..1b4c1e8d4 100644
--- a/frontend/dashboard/app/[teamId]/data_filters/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data_filters/page.tsx
@@ -1,17 +1,43 @@
 "use client"
 
-import { DataFiltersApiStatus, DataFiltersResponse, fetchDataFiltersFromServer, FilterSource } from '@/app/api/api_calls'
+import { DataFiltersApiStatus, DataFiltersResponse, emptyDataFiltersResponse, fetchDataFiltersFromServer, FilterSource } from '@/app/api/api_calls'
 import Filters, { AppVersionsInitialSelectionType, defaultFilters } from '@/app/components/filters'
 import LoadingBar from '@/app/components/loading_bar'
-import { Table, TableBody, TableHead, TableHeader, TableRow } from '@/app/components/table'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/app/components/table'
 
+import { DataFilterAttachmentConfig, DataFilterCollectionConfig } from '@/app/api/api_calls'
+import { formatDateToHumanReadableDate, formatDateToHumanReadableTime } from '@/app/utils/time_utils'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useEffect, useState } from 'react'
 
 interface PageState {
     dataFiltersApiStatus: DataFiltersApiStatus
     filters: typeof defaultFilters
-    dataFilters: DataFiltersResponse | null
+    dataFilters: DataFiltersResponse
+}
+
+const getCollectionConfigDisplay = (collectionConfig: DataFilterCollectionConfig): string => {
+    switch (collectionConfig.mode) {
+        case 'sample_rate':
+            return `Sample Rate: ${collectionConfig.sample_rate * 100}%`
+        case 'timeline_only':
+            return 'Timeline Only'
+        case 'disable':
+            return 'Do not collect'
+        default:
+            return 'Unknown'
+    }
+}
+
+const getAttachmentConfigDisplay = (attachmentConfig: DataFilterAttachmentConfig | null): string => {
+    if (!attachmentConfig || attachmentConfig === 'none') {
+        return 'With no attachments'
+    } else if (attachmentConfig === 'layout_snapshot') {
+        return 'With layout snapshot'
+    } else if (attachmentConfig === 'screenshot') {
+        return 'With screenshot'
+    }
+    return attachmentConfig
 }
 
 export default function DataFilters({ params }: { params: { teamId: string } }) {
@@ -19,9 +45,9 @@ export default function DataFilters({ params }: { params: { teamId: string } })
     const searchParams = useSearchParams()
 
     const initialState: PageState = {
-        dataFiltersApiStatus: DataFiltersApiStatus.Loading,
+        dataFiltersApiStatus: DataFiltersApiStatus.Success,
         filters: defaultFilters,
-        dataFilters: null,
+        dataFilters: emptyDataFiltersResponse,
     }
 
     const [pageState, setPageState] = useState<PageState>(initialState)
@@ -59,7 +85,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         if (pageState.filters.ready !== updatedFilters.ready || pageState.filters.serialisedFilters !== updatedFilters.serialisedFilters) {
             updatePageState({
                 filters: updatedFilters,
-                dataFilters: null,
+                dataFilters: emptyDataFiltersResponse,
             })
         }
     }
@@ -72,7 +98,8 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         // update url
         router.replace(`?${pageState.filters.serialisedFilters!}`, { scroll: false })
 
-        getDataFilters()
+        // TODO: Re-enable API call when ready
+        // getDataFilters()
     }, [pageState.filters])
 
     return (
@@ -121,14 +148,33 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                     <Table className="font-display">
                         <TableHeader>
                             <TableRow>
-                                <TableHead className="w-[40%]">Filter</TableHead>
-                                <TableHead className="w-[15%] text-center">Created At</TableHead>
-                                <TableHead className="w-[15%] text-center">Created By</TableHead>
-                                <TableHead className="w-[15%] text-center">Last Updated</TableHead>
-                                <TableHead className="w-[15%] text-center">Updated At</TableHead>
+                                <TableHead className="w-[60%]">Filter</TableHead>
+                                <TableHead className="w-[20%] text-center">Updated At</TableHead>
+                                <TableHead className="w-[20%] text-center">Updated By</TableHead>
                             </TableRow>
                         </TableHeader>
                         <TableBody>
+                            {pageState.dataFilters.results.map((dataFilter, idx) => (
+                                <TableRow
+                                    key={`${idx}-${dataFilter.id}`}
+                                    className="font-body"
+                                >
+                                    <TableCell className="w-[40%] p-4">
+                                        <p className='truncate select-none font-mono text-sm'>{dataFilter.filter}</p>
+                                        <div className='py-1' />
+                                        <p className='text-xs truncate text-gray-500 select-none'>{getCollectionConfigDisplay(dataFilter.collection_config)}</p>
+                                        <p className='text-xs truncate text-gray-500 select-none'>{getAttachmentConfigDisplay(dataFilter.attachment_config)}</p>
+                                    </TableCell>
+                                    <TableCell className="w-[15%] text-center p-4">
+                                        <p className='truncate select-none'>{formatDateToHumanReadableDate(dataFilter.updated_at)}</p>
+                                        <div className='py-1' />
+                                        <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(dataFilter.updated_at)}</p>
+                                    </TableCell>
+                                    <TableCell className="w-[15%] text-center p-4">
+                                        <p className='truncate select-none'>{dataFilter.updated_by}</p>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
                         </TableBody>
                     </Table>
                 </div>}
diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index 5d7e3b98d..e9cee2955 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -1042,7 +1042,7 @@ export type DataFiltersResponse = {
 export type DataFilter = {
   id: string,
   type: DataFilterType,
-  rule: string,
+  filter: string,
   collection_config: DataFilterCollectionConfig,
   attachment_config: DataFilterAttachmentConfig | null,
   created_at: string,
@@ -1059,6 +1059,70 @@ export type DataFilterCollectionConfig =
 
 export type DataFilterAttachmentConfig = 'layout_snapshot' | 'screenshot' | 'none';
 
+export const emptyDataFiltersResponse: DataFiltersResponse = {
+  meta: {
+    next: false,
+    previous: false,
+  },
+  results: [
+    {
+      id: "df-001",
+      type: "event",
+      filter: "event.type == 'click' && event.target == 'checkout_button'",
+      collection_config: { mode: 'sample_rate', sample_rate: 0.5 },
+      attachment_config: 'screenshot',
+      created_at: "2024-01-15T10:30:00Z",
+      created_by: "user1@example.com",
+      updated_at: "2024-02-20T14:45:00Z",
+      updated_by: "user2@example.com",
+    },
+    {
+      id: "df-002",
+      type: "trace",
+      filter: "trace.duration > 5000 && trace.status == 'error'",
+      collection_config: { mode: 'timeline_only' },
+      attachment_config: 'layout_snapshot',
+      created_at: "2024-01-20T08:15:00Z",
+      created_by: "admin@example.com",
+      updated_at: "2024-01-20T08:15:00Z",
+      updated_by: "admin@example.com",
+    },
+    {
+      id: "df-003",
+      type: "event",
+      filter: "event.name == 'app_background' && session.is_crash == true",
+      collection_config: { mode: 'disable' },
+      attachment_config: null,
+      created_at: "2024-02-01T12:00:00Z",
+      created_by: "developer@example.com",
+      updated_at: "2024-03-10T09:30:00Z",
+      updated_by: "lead@example.com",
+    },
+    {
+      id: "df-004",
+      type: "trace",
+      filter: "trace.name == 'network_request' && trace.http.status_code >= 400",
+      collection_config: { mode: 'sample_rate', sample_rate: 0.25 },
+      attachment_config: 'none',
+      created_at: "2024-02-10T16:20:00Z",
+      created_by: "qa@example.com",
+      updated_at: "2024-02-28T11:15:00Z",
+      updated_by: "qa@example.com",
+    },
+    {
+      id: "df-005",
+      type: "event",
+      filter: "event.type == 'gesture' && device.manufacturer == 'Samsung'",
+      collection_config: { mode: 'sample_rate', sample_rate: 1.0 },
+      attachment_config: 'screenshot',
+      created_at: "2024-03-05T13:45:00Z",
+      created_by: "user3@example.com",
+      updated_at: "2024-03-05T13:45:00Z",
+      updated_by: "user3@example.com",
+    },
+  ],
+}
+
 export class AppVersion {
   name: string
   code: string

From 8825783f0170485051f3cc371f2f964cb29f82aa Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 08:15:18 +0530
Subject: [PATCH 03/98] feat(frontend): handle default filters

---
 .../app/[teamId]/data_filters/page.tsx        | 148 +++++++++++++-----
 frontend/dashboard/app/api/api_calls.ts       |  24 ++-
 2 files changed, 132 insertions(+), 40 deletions(-)

diff --git a/frontend/dashboard/app/[teamId]/data_filters/page.tsx b/frontend/dashboard/app/[teamId]/data_filters/page.tsx
index 1b4c1e8d4..e9ddec415 100644
--- a/frontend/dashboard/app/[teamId]/data_filters/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data_filters/page.tsx
@@ -5,7 +5,7 @@ import Filters, { AppVersionsInitialSelectionType, defaultFilters } from '@/app/
 import LoadingBar from '@/app/components/loading_bar'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/app/components/table'
 
-import { DataFilterAttachmentConfig, DataFilterCollectionConfig } from '@/app/api/api_calls'
+import { DataFilter, DataFilterAttachmentConfig, DataFilterCollectionConfig, DataFilterType } from '@/app/api/api_calls'
 import { formatDateToHumanReadableDate, formatDateToHumanReadableTime } from '@/app/utils/time_utils'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useEffect, useState } from 'react'
@@ -16,12 +16,27 @@ interface PageState {
     dataFilters: DataFiltersResponse
 }
 
+const isGlobalRule = (type: DataFilterType): boolean => {
+    return type === 'all_events' || type === 'all_traces'
+}
+
+const getFilterDisplayText = (type: DataFilterType, filter: string): string => {
+    switch (type) {
+        case 'all_events':
+            return 'All Events'
+        case 'all_traces':
+            return 'All Traces'
+        default:
+            return filter
+    }
+}
+
 const getCollectionConfigDisplay = (collectionConfig: DataFilterCollectionConfig): string => {
     switch (collectionConfig.mode) {
         case 'sample_rate':
-            return `Sample Rate: ${collectionConfig.sample_rate * 100}%`
+            return `Collect at ${collectionConfig.sample_rate}% sample rate`
         case 'timeline_only':
-            return 'Timeline Only'
+            return 'Collect with session timeline only'
         case 'disable':
             return 'Do not collect'
         default:
@@ -102,6 +117,9 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         // getDataFilters()
     }, [pageState.filters])
 
+    const globalRules = pageState.dataFilters.results.filter(df => isGlobalRule(df.type))
+    const overrideRules = pageState.dataFilters.results.filter(df => !isGlobalRule(df.type))
+
     return (
         <div className="flex flex-col selection:bg-yellow-200/75 items-start">
             <p className="font-display text-4xl max-w-6xl text-center">Data Filters</p>
@@ -132,51 +150,103 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                 onFiltersChanged={handleFiltersChanged} />
             <div className="py-4" />
 
-            {/* Error state for bug reports fetch */}
+            {/* Error state for data filters fetch */}
             {pageState.filters.ready
                 && pageState.dataFiltersApiStatus === DataFiltersApiStatus.Error
                 && <p className="text-lg font-display">Error fetching data filters, please change filters, refresh page or select a different app to try again</p>}
 
-            {/* Main bug reports list UI */}
+            {/* Main data filters UI */}
             {pageState.filters.ready
                 && (pageState.dataFiltersApiStatus === DataFiltersApiStatus.Success || pageState.dataFiltersApiStatus === DataFiltersApiStatus.Loading) &&
-                <div className="flex flex-col items-center w-full">
+                <div className="flex flex-col items-start w-full">
                     <div className={`py-1 w-full ${pageState.dataFiltersApiStatus === DataFiltersApiStatus.Loading ? 'visible' : 'invisible'}`}>
                         <LoadingBar />
                     </div>
-                    <div className="py-4" />
-                    <Table className="font-display">
-                        <TableHeader>
-                            <TableRow>
-                                <TableHead className="w-[60%]">Filter</TableHead>
-                                <TableHead className="w-[20%] text-center">Updated At</TableHead>
-                                <TableHead className="w-[20%] text-center">Updated By</TableHead>
-                            </TableRow>
-                        </TableHeader>
-                        <TableBody>
-                            {pageState.dataFilters.results.map((dataFilter, idx) => (
-                                <TableRow
-                                    key={`${idx}-${dataFilter.id}`}
-                                    className="font-body"
-                                >
-                                    <TableCell className="w-[40%] p-4">
-                                        <p className='truncate select-none font-mono text-sm'>{dataFilter.filter}</p>
-                                        <div className='py-1' />
-                                        <p className='text-xs truncate text-gray-500 select-none'>{getCollectionConfigDisplay(dataFilter.collection_config)}</p>
-                                        <p className='text-xs truncate text-gray-500 select-none'>{getAttachmentConfigDisplay(dataFilter.attachment_config)}</p>
-                                    </TableCell>
-                                    <TableCell className="w-[15%] text-center p-4">
-                                        <p className='truncate select-none'>{formatDateToHumanReadableDate(dataFilter.updated_at)}</p>
-                                        <div className='py-1' />
-                                        <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(dataFilter.updated_at)}</p>
-                                    </TableCell>
-                                    <TableCell className="w-[15%] text-center p-4">
-                                        <p className='truncate select-none'>{dataFilter.updated_by}</p>
-                                    </TableCell>
-                                </TableRow>
-                            ))}
-                        </TableBody>
-                    </Table>
+
+                    {/* Global Rules Section */}
+                    {globalRules.length > 0 && (
+                        <div className="w-full">
+                            <p className="font-display text-2xl">Default Filters</p>
+
+                            <div className="py-4" />
+
+                            <Table className="font-display">
+                                <TableHeader>
+                                    <TableRow>
+                                        <TableHead className="w-[52%]">Filter</TableHead>
+                                        <TableHead className="w-[24%] text-center">Updated At</TableHead>
+                                        <TableHead className="w-[24%] text-center">Updated By</TableHead>
+                                    </TableRow>
+                                </TableHeader>
+                                <TableBody>
+                                    {globalRules.map((dataFilter, idx) => (
+                                        <TableRow
+                                            key={`${idx}-${dataFilter.id}`}
+                                            className="font-body"
+                                        >
+                                            <TableCell className="w-[60%] p-4">
+                                                <p className='select-none text-base mb-2'>{getFilterDisplayText(dataFilter.type, dataFilter.filter)}</p>
+                                                <p className='text-xs truncate text-gray-500 select-none'>{getCollectionConfigDisplay(dataFilter.collection_config)}</p>
+                                                <p className='text-xs truncate text-gray-500 select-none'>{getAttachmentConfigDisplay(dataFilter.attachment_config)}</p>
+                                            </TableCell>
+                                            <TableCell className="w-[20%] text-center p-4">
+                                                <p className='truncate select-none'>{formatDateToHumanReadableDate(dataFilter.updated_at)}</p>
+                                                <div className='py-1' />
+                                                <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(dataFilter.updated_at)}</p>
+                                            </TableCell>
+                                            <TableCell className="w-[20%] text-center p-4">
+                                                <p className='truncate select-none'>{dataFilter.updated_by}</p>
+                                            </TableCell>
+                                        </TableRow>
+                                    ))}
+                                </TableBody>
+                            </Table>
+                        </div>
+                    )}
+
+                    <div className="py-8" />
+
+                    {/* Override Rules Table */}
+                    {overrideRules.length > 0 && (
+                        <div className="w-full">
+                            <p className="font-display text-2xl">Overrides</p>
+
+                            <div className="py-4" />
+                            
+                            <Table className="font-display">
+                                <TableHeader>
+                                    <TableRow>
+                                        <TableHead className="w-[52%]">Filter</TableHead>
+                                        <TableHead className="w-[24%] text-center">Updated At</TableHead>
+                                        <TableHead className="w-[24%] text-center">Updated By</TableHead>
+                                    </TableRow>
+                                </TableHeader>
+                                <TableBody>
+                                    {overrideRules.map((dataFilter, idx) => (
+                                        <TableRow
+                                            key={`${idx}-${dataFilter.id}`}
+                                            className="font-body"
+                                        >
+                                            <TableCell className="w-[60%] p-4">
+                                                <p className='truncate select-none font-mono text-sm'>{getFilterDisplayText(dataFilter.type, dataFilter.filter)}</p>
+                                                <div className='py-1' />
+                                                <p className='text-xs truncate text-gray-500 select-none'>{getCollectionConfigDisplay(dataFilter.collection_config)}</p>
+                                                <p className='text-xs truncate text-gray-500 select-none'>{getAttachmentConfigDisplay(dataFilter.attachment_config)}</p>
+                                            </TableCell>
+                                            <TableCell className="w-[20%] text-center p-4">
+                                                <p className='truncate select-none'>{formatDateToHumanReadableDate(dataFilter.updated_at)}</p>
+                                                <div className='py-1' />
+                                                <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(dataFilter.updated_at)}</p>
+                                            </TableCell>
+                                            <TableCell className="w-[20%] text-center p-4">
+                                                <p className='truncate select-none'>{dataFilter.updated_by}</p>
+                                            </TableCell>
+                                        </TableRow>
+                                    ))}
+                                </TableBody>
+                            </Table>
+                        </div>
+                    )}
                 </div>}
         </div>
     )
diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index e9cee2955..f42758a46 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -1051,7 +1051,7 @@ export type DataFilter = {
   updated_by: string,
 }
 
-export type DataFilterType = "event" | "trace"
+export type DataFilterType = "event" | "trace" | "all_events" | "all_traces";
 export type DataFilterCollectionConfig =
   | { mode: 'sample_rate'; sample_rate: number }
   | { mode: 'timeline_only' }
@@ -1065,6 +1065,28 @@ export const emptyDataFiltersResponse: DataFiltersResponse = {
     previous: false,
   },
   results: [
+    {
+      id: "df-global-001",
+      type: "all_events",
+      filter: 'event_type == "*"',
+      collection_config: { mode: 'timeline_only'},
+      attachment_config: 'none',
+      created_at: "2024-01-01T00:00:00Z",
+      created_by: "system@example.com",
+      updated_at: "2024-01-01T00:00:00Z",
+      updated_by: "system@example.com",
+    },
+    {
+      id: "df-global-002",
+      type: "all_traces",
+      filter: 'span.name == "*"',
+      collection_config: { mode: 'sample_rate', sample_rate: 1 },
+      attachment_config: 'none',
+      created_at: "2024-01-01T00:00:00Z",
+      created_by: "system@example.com",
+      updated_at: "2024-01-01T00:00:00Z",
+      updated_by: "system@example.com",
+    },
     {
       id: "df-001",
       type: "event",

From 91508aade566a61af1a076f7f77bc67c98b6d6f4 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 08:26:59 +0530
Subject: [PATCH 04/98] feat(frontend): rename rules to filters

---
 .../app/[teamId]/data_filters/page.tsx        | 41 ++++++++++++-------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/frontend/dashboard/app/[teamId]/data_filters/page.tsx b/frontend/dashboard/app/[teamId]/data_filters/page.tsx
index e9ddec415..1552edd23 100644
--- a/frontend/dashboard/app/[teamId]/data_filters/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data_filters/page.tsx
@@ -5,10 +5,12 @@ import Filters, { AppVersionsInitialSelectionType, defaultFilters } from '@/app/
 import LoadingBar from '@/app/components/loading_bar'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/app/components/table'
 
-import { DataFilter, DataFilterAttachmentConfig, DataFilterCollectionConfig, DataFilterType } from '@/app/api/api_calls'
+import { DataFilterAttachmentConfig, DataFilterCollectionConfig, DataFilterType } from '@/app/api/api_calls'
 import { formatDateToHumanReadableDate, formatDateToHumanReadableTime } from '@/app/utils/time_utils'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useEffect, useState } from 'react'
+import { Button } from '@/app/components/button'
+import { Plus } from 'lucide-react'
 
 interface PageState {
     dataFiltersApiStatus: DataFiltersApiStatus
@@ -16,7 +18,7 @@ interface PageState {
     dataFilters: DataFiltersResponse
 }
 
-const isGlobalRule = (type: DataFilterType): boolean => {
+const isGlobalFilter = (type: DataFilterType): boolean => {
     return type === 'all_events' || type === 'all_traces'
 }
 
@@ -46,7 +48,7 @@ const getCollectionConfigDisplay = (collectionConfig: DataFilterCollectionConfig
 
 const getAttachmentConfigDisplay = (attachmentConfig: DataFilterAttachmentConfig | null): string => {
     if (!attachmentConfig || attachmentConfig === 'none') {
-        return 'With no attachments'
+        return ''
     } else if (attachmentConfig === 'layout_snapshot') {
         return 'With layout snapshot'
     } else if (attachmentConfig === 'screenshot') {
@@ -117,12 +119,23 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         // getDataFilters()
     }, [pageState.filters])
 
-    const globalRules = pageState.dataFilters.results.filter(df => isGlobalRule(df.type))
-    const overrideRules = pageState.dataFilters.results.filter(df => !isGlobalRule(df.type))
+    const globalFilters = pageState.dataFilters.results.filter(df => isGlobalFilter(df.type))
+    const overrideFilters = pageState.dataFilters.results.filter(df => !isGlobalFilter(df.type))
 
     return (
         <div className="flex flex-col selection:bg-yellow-200/75 items-start">
-            <p className="font-display text-4xl max-w-6xl text-center">Data Filters</p>
+
+            <div className="flex flex-row items-center gap-2 justify-between w-full">
+                <p className="font-display text-4xl max-w-6xl text-center">Data Filters</p>
+                <Button
+                    variant="outline"
+                    className="font-display border border-black select-none"
+                    disabled={pageState.dataFiltersApiStatus === DataFiltersApiStatus.Loading}
+                    onClick={() => console.log('New data filter')}
+                >
+                    <Plus /> Create Filter
+                </Button>
+            </div>
             <div className="py-4" />
 
             <Filters
@@ -163,10 +176,10 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         <LoadingBar />
                     </div>
 
-                    {/* Global Rules Section */}
-                    {globalRules.length > 0 && (
+                    {/* Global Filters Section */}
+                    {globalFilters.length > 0 && (
                         <div className="w-full">
-                            <p className="font-display text-2xl">Default Filters</p>
+                            <p className="font-display text-2xl">Global Filters</p>
 
                             <div className="py-4" />
 
@@ -179,7 +192,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                                     </TableRow>
                                 </TableHeader>
                                 <TableBody>
-                                    {globalRules.map((dataFilter, idx) => (
+                                    {globalFilters.map((dataFilter, idx) => (
                                         <TableRow
                                             key={`${idx}-${dataFilter.id}`}
                                             className="font-body"
@@ -206,13 +219,13 @@ export default function DataFilters({ params }: { params: { teamId: string } })
 
                     <div className="py-8" />
 
-                    {/* Override Rules Table */}
-                    {overrideRules.length > 0 && (
+                    {/* Override Filters Table */}
+                    {overrideFilters.length > 0 && (
                         <div className="w-full">
                             <p className="font-display text-2xl">Overrides</p>
 
                             <div className="py-4" />
-                            
+
                             <Table className="font-display">
                                 <TableHeader>
                                     <TableRow>
@@ -222,7 +235,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                                     </TableRow>
                                 </TableHeader>
                                 <TableBody>
-                                    {overrideRules.map((dataFilter, idx) => (
+                                    {overrideFilters.map((dataFilter, idx) => (
                                         <TableRow
                                             key={`${idx}-${dataFilter.id}`}
                                             className="font-body"

From 09158c71859266bb809ee25d0ff077b1865fd358 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 08:35:22 +0530
Subject: [PATCH 05/98] feat(frontend): show dropdown to create filter and
 update state

---
 .../app/[teamId]/data_filters/page.tsx        | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/frontend/dashboard/app/[teamId]/data_filters/page.tsx b/frontend/dashboard/app/[teamId]/data_filters/page.tsx
index 1552edd23..17652c99c 100644
--- a/frontend/dashboard/app/[teamId]/data_filters/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data_filters/page.tsx
@@ -11,11 +11,13 @@ import { useRouter, useSearchParams } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { Button } from '@/app/components/button'
 import { Plus } from 'lucide-react'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/app/components/dropdown_menu'
 
 interface PageState {
     dataFiltersApiStatus: DataFiltersApiStatus
     filters: typeof defaultFilters
     dataFilters: DataFiltersResponse
+    editingFilterType: 'event' | 'trace' | null
 }
 
 const isGlobalFilter = (type: DataFilterType): boolean => {
@@ -65,6 +67,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         dataFiltersApiStatus: DataFiltersApiStatus.Success,
         filters: defaultFilters,
         dataFilters: emptyDataFiltersResponse,
+        editingFilterType: null,
     }
 
     const [pageState, setPageState] = useState<PageState>(initialState)
@@ -127,14 +130,25 @@ export default function DataFilters({ params }: { params: { teamId: string } })
 
             <div className="flex flex-row items-center gap-2 justify-between w-full">
                 <p className="font-display text-4xl max-w-6xl text-center">Data Filters</p>
-                <Button
-                    variant="outline"
-                    className="font-display border border-black select-none"
-                    disabled={pageState.dataFiltersApiStatus === DataFiltersApiStatus.Loading}
-                    onClick={() => console.log('New data filter')}
-                >
-                    <Plus /> Create Filter
-                </Button>
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button
+                            variant="outline"
+                            className="font-display border border-black select-none"
+                            disabled={pageState.dataFiltersApiStatus === DataFiltersApiStatus.Loading}
+                        >
+                            <Plus /> Create Filter
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                        <DropdownMenuItem onClick={() => updatePageState({ editingFilterType: 'event' })}>
+                            Event Filter
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => updatePageState({ editingFilterType: 'trace' })}>
+                            Trace Filter
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
             </div>
             <div className="py-4" />
 

From a4f3c97f200221f35eb78b6a177df24df7e10d11 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 08:41:32 +0530
Subject: [PATCH 06/98] feat(frontend): show a create/edit filter card and
 manage edit state

---
 .../app/[teamId]/data_filters/page.tsx        |  41 +++++-
 .../session_targeting/rule_builder_card.tsx   | 135 ++++++++++++++++++
 2 files changed, 175 insertions(+), 1 deletion(-)
 create mode 100644 frontend/dashboard/app/components/session_targeting/rule_builder_card.tsx

diff --git a/frontend/dashboard/app/[teamId]/data_filters/page.tsx b/frontend/dashboard/app/[teamId]/data_filters/page.tsx
index 17652c99c..b47ac3df0 100644
--- a/frontend/dashboard/app/[teamId]/data_filters/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data_filters/page.tsx
@@ -12,6 +12,7 @@ import { useEffect, useState } from 'react'
 import { Button } from '@/app/components/button'
 import { Plus } from 'lucide-react'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/app/components/dropdown_menu'
+import { Card, CardContent, CardFooter } from '@/app/components/card'
 
 interface PageState {
     dataFiltersApiStatus: DataFiltersApiStatus
@@ -125,6 +126,14 @@ export default function DataFilters({ params }: { params: { teamId: string } })
     const globalFilters = pageState.dataFilters.results.filter(df => isGlobalFilter(df.type))
     const overrideFilters = pageState.dataFilters.results.filter(df => !isGlobalFilter(df.type))
 
+    const handleCancel = () => {
+        updatePageState({ editingFilterType: null })
+    }
+
+    const handleCreateFilter = () => {
+        updatePageState({ editingFilterType: null })
+    }
+
     return (
         <div className="flex flex-col selection:bg-yellow-200/75 items-start">
 
@@ -135,7 +144,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         <Button
                             variant="outline"
                             className="font-display border border-black select-none"
-                            disabled={pageState.dataFiltersApiStatus === DataFiltersApiStatus.Loading}
+                            disabled={pageState.dataFiltersApiStatus === DataFiltersApiStatus.Loading || pageState.editingFilterType !== null}
                         >
                             <Plus /> Create Filter
                         </Button>
@@ -177,6 +186,36 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                 onFiltersChanged={handleFiltersChanged} />
             <div className="py-4" />
 
+            {/* Filter creation card */}
+            {pageState.editingFilterType && (
+                <>
+                    <Card className="w-full">
+                        <CardContent className="pt-6">
+                            <div className="mb-6">
+                            </div>
+                        </CardContent>
+
+                        <CardFooter className="flex justify-end gap-3">
+                            <Button
+                                variant="outline"
+                                onClick={handleCancel}
+                                className="font-display"
+                            >
+                                Cancel
+                            </Button>
+                            <Button
+                                variant="outline"
+                                onClick={handleCreateFilter}
+                                className="font-display border border-black"
+                            >
+                                Create Filter
+                            </Button>
+                        </CardFooter>
+                    </Card>
+                    <div className="py-12" />
+                </>
+            )}
+
             {/* Error state for data filters fetch */}
             {pageState.filters.ready
                 && pageState.dataFiltersApiStatus === DataFiltersApiStatus.Error
diff --git a/frontend/dashboard/app/components/session_targeting/rule_builder_card.tsx b/frontend/dashboard/app/components/session_targeting/rule_builder_card.tsx
new file mode 100644
index 000000000..3d6e56181
--- /dev/null
+++ b/frontend/dashboard/app/components/session_targeting/rule_builder_card.tsx
@@ -0,0 +1,135 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardFooter } from "@/app/components/card"
+import { Button } from "@/app/components/button"
+import { Input } from "@/app/components/input"
+import DropdownSelect, { DropdownSelectType } from "@/app/components/dropdown_select"
+import { Plus } from "lucide-react"
+import RuleBuilderAttributeRow from "@/app/components/session_targeting/rule_builder_attribute_row"
+
+interface RuleBuilderCardProps {
+    type: 'event' | 'trace' | 'session_attr'
+    onCancel: () => void
+    onSave: (rule: any) => void
+    initialData?: any | null
+}
+
+interface EventFilter {
+    id: string
+    key: string
+    type: string
+    value: string | boolean | number
+    operator: string
+    hasError?: boolean
+    errorMessage?: string
+    hint?: string
+}
+
+// Sample data - replace with actual data from your API
+const eventTypes = ["click", "view", "error", "custom"]
+const attributeKeys = ["user_id", "session_id", "device_type", "app_version"]
+const operators = ["equals", "not equals", "contains", "greater than", "less than"]
+
+// Operator types mapping for different attribute types
+const operatorTypesMapping = {
+    string: ['eq', 'neq', 'contains', 'ncontains'],
+    number: ['eq', 'neq', 'gt', 'gte', 'lt', 'lte'],
+    int64: ['eq', 'neq', 'gt', 'gte', 'lt', 'lte'],
+    float64: ['eq', 'neq', 'gt', 'gte', 'lt', 'lte'],
+    bool: ['eq', 'neq']
+}
+
+const getOperatorsForType = (mapping: any, type: string): string[] => {
+    return mapping[type] || mapping.string
+}
+
+export default function RuleBuilderCard({ type, onCancel, onSave, initialData }: RuleBuilderCardProps) {
+    const [selectedEventType, setSelectedEventType] = useState<string>(initialData?.eventType || eventTypes[0])
+    const [eventFilters, setEventFilters] = useState<EventFilter[]>(initialData?.eventFilters || [])
+
+    // For session_attr type
+    const [sessionAttr, setSessionAttr] = useState<EventFilter>(initialData?.attribute || {
+        id: 'session-attr',
+        key: attributeKeys[0],
+        type: 'string',
+        operator: 'eq',
+        value: ""
+    })
+
+    const [collectionMode, setCollectionMode] = useState<'none' | 'sample' | 'timeline'>(initialData?.collectionMode || 'sample')
+    const [eventTraceSamplingRate, setEventTraceSamplingRate] = useState<string>(initialData?.eventTraceSamplingRate?.toString() || "100")
+    const [snapshotType, setSnapshotType] = useState<'none' | 'screenshot' | 'layout'>(initialData?.snapshotType || 'none')
+
+    const addEventFilter = () => {
+        const newFilter: EventFilter = {
+            id: `filter-${Date.now()}`,
+            key: attributeKeys[0],
+            type: 'string',
+            operator: 'eq',
+            value: ""
+        }
+        setEventFilters([...eventFilters, newFilter])
+    }
+
+    const removeEventFilter = (conditionId: string, attrId: string) => {
+        setEventFilters(eventFilters.filter(filter => filter.id !== attrId))
+    }
+
+    const updateEventFilter = (conditionId: string, attrId: string, field: 'key' | 'type' | 'value' | 'operator', value: any) => {
+        setEventFilters(eventFilters.map(filter =>
+            filter.id === attrId ? { ...filter, [field]: value } : filter
+        ))
+    }
+
+    const updateSessionAttr = (conditionId: string, attrId: string, field: 'key' | 'type' | 'value' | 'operator', value: any) => {
+        setSessionAttr(prev => ({ ...prev, [field]: value }))
+    }
+
+    const handleSave = () => {
+        let rule: any = {
+            type: type,
+            collectEvent: collectionMode === 'sample',
+            collectTimeline: collectionMode === 'timeline',
+            eventTraceSamplingRate: collectionMode === 'sample' ? parseFloat(eventTraceSamplingRate) : null,
+            snapshotType: collectionMode === 'none' ? null : snapshotType
+        }
+
+        if (type === 'event' || type === 'trace') {
+            rule.eventType = selectedEventType
+            rule.eventFilters = eventFilters
+        } else if (type === 'session_attr') {
+            rule.attribute = sessionAttr
+        }
+
+        onSave(rule)
+    }
+
+    const checkboxStyle = "appearance-none border-black rounded-xs font-display checked:bg-neutral-950 checked:hover:bg-neutral-950 focus:ring-offset-yellow-200 focus:ring-0 checked:focus:bg-neutral-950"
+    const radioStyle = "appearance-none border-black rounded-full font-display checked:bg-neutral-950 checked:hover:bg-neutral-950 focus:ring-offset-yellow-200 focus:ring-0 checked:focus:bg-neutral-950"
+
+    return (
+        <Card className="w-full">
+            <CardContent className="pt-6">
+                <div className="mb-6">
+            </CardContent>
+
+            <CardFooter className="flex justify-end gap-3">
+                <Button
+                    variant="outline"
+                    onClick={onCancel}
+                    className="font-display"
+                >
+                    Cancel
+                </Button>
+                <Button
+                    variant="outline"
+                    onClick={handleSave}
+                    className="font-display border border-black"
+                >
+                    Create Filter
+                </Button>
+            </CardFooter>
+        </Card>
+    )
+}

From 2eebbf12b10d4a0fa9caf0822bbdc6326e7d9ff3 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 09:01:41 +0530
Subject: [PATCH 07/98] feat(frontend): add a basic flow for editing global
 filters

---
 .../app/[teamId]/data_filters/page.tsx        | 202 ++++++++++++++----
 1 file changed, 163 insertions(+), 39 deletions(-)

diff --git a/frontend/dashboard/app/[teamId]/data_filters/page.tsx b/frontend/dashboard/app/[teamId]/data_filters/page.tsx
index b47ac3df0..693c13c7b 100644
--- a/frontend/dashboard/app/[teamId]/data_filters/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data_filters/page.tsx
@@ -10,15 +10,22 @@ import { formatDateToHumanReadableDate, formatDateToHumanReadableTime } from '@/
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { Button } from '@/app/components/button'
-import { Plus } from 'lucide-react'
+import { Plus, Pencil } from 'lucide-react'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/app/components/dropdown_menu'
 import { Card, CardContent, CardFooter } from '@/app/components/card'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/app/components/dialog'
 
 interface PageState {
     dataFiltersApiStatus: DataFiltersApiStatus
     filters: typeof defaultFilters
     dataFilters: DataFiltersResponse
     editingFilterType: 'event' | 'trace' | null
+    editingGlobalFilter: {
+        id: string
+        type: DataFilterType
+        collectionMode: DataFilterCollectionConfig['mode']
+        sampleRate?: number
+    } | null
 }
 
 const isGlobalFilter = (type: DataFilterType): boolean => {
@@ -69,6 +76,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         filters: defaultFilters,
         dataFilters: emptyDataFiltersResponse,
         editingFilterType: null,
+        editingGlobalFilter: null,
     }
 
     const [pageState, setPageState] = useState<PageState>(initialState)
@@ -134,6 +142,27 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         updatePageState({ editingFilterType: null })
     }
 
+    const handleEditGlobalFilter = (dataFilter: typeof globalFilters[0], e: React.MouseEvent) => {
+        e.stopPropagation()
+        updatePageState({
+            editingGlobalFilter: {
+                id: dataFilter.id,
+                type: dataFilter.type,
+                collectionMode: dataFilter.collection_config.mode,
+                sampleRate: dataFilter.collection_config.mode === 'sample_rate' ? dataFilter.collection_config.sample_rate : undefined
+            }
+        })
+    }
+
+    const handleSaveGlobalFilter = () => {
+        // TODO: Implement save logic
+        updatePageState({ editingGlobalFilter: null })
+    }
+
+    const handleCancelGlobalFilter = () => {
+        updatePageState({ editingGlobalFilter: null })
+    }
+
     return (
         <div className="flex flex-col selection:bg-yellow-200/75 items-start">
 
@@ -231,42 +260,35 @@ export default function DataFilters({ params }: { params: { teamId: string } })
 
                     {/* Global Filters Section */}
                     {globalFilters.length > 0 && (
-                        <div className="w-full">
-                            <p className="font-display text-2xl">Global Filters</p>
-
-                            <div className="py-4" />
-
-                            <Table className="font-display">
-                                <TableHeader>
-                                    <TableRow>
-                                        <TableHead className="w-[52%]">Filter</TableHead>
-                                        <TableHead className="w-[24%] text-center">Updated At</TableHead>
-                                        <TableHead className="w-[24%] text-center">Updated By</TableHead>
-                                    </TableRow>
-                                </TableHeader>
-                                <TableBody>
-                                    {globalFilters.map((dataFilter, idx) => (
-                                        <TableRow
-                                            key={`${idx}-${dataFilter.id}`}
-                                            className="font-body"
-                                        >
-                                            <TableCell className="w-[60%] p-4">
-                                                <p className='select-none text-base mb-2'>{getFilterDisplayText(dataFilter.type, dataFilter.filter)}</p>
-                                                <p className='text-xs truncate text-gray-500 select-none'>{getCollectionConfigDisplay(dataFilter.collection_config)}</p>
-                                                <p className='text-xs truncate text-gray-500 select-none'>{getAttachmentConfigDisplay(dataFilter.attachment_config)}</p>
-                                            </TableCell>
-                                            <TableCell className="w-[20%] text-center p-4">
-                                                <p className='truncate select-none'>{formatDateToHumanReadableDate(dataFilter.updated_at)}</p>
-                                                <div className='py-1' />
-                                                <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(dataFilter.updated_at)}</p>
-                                            </TableCell>
-                                            <TableCell className="w-[20%] text-center p-4">
-                                                <p className='truncate select-none'>{dataFilter.updated_by}</p>
-                                            </TableCell>
-                                        </TableRow>
-                                    ))}
-                                </TableBody>
-                            </Table>
+                        <div className="flex flex-col gap-3 w-full">
+                            {globalFilters.map((dataFilter, idx) => (
+                                <Card
+                                    key={`${idx}-${dataFilter.id}`}
+                                    className={`w-full group relative ${dataFilter.type === 'all_events' ? 'bg-blue-100' : 'bg-purple-100'}`}
+                                >
+                                    <CardContent className="p-4">
+                                        <div className="flex flex-row items-center justify-between">
+                                            <div className="flex-1">
+                                                <p className='select-none text-base font-display mb-1'>{getFilterDisplayText(dataFilter.type, dataFilter.filter)}</p>
+                                                <p className='text-xs text-gray-700 select-none'>{getCollectionConfigDisplay(dataFilter.collection_config)}{getAttachmentConfigDisplay(dataFilter.attachment_config) && ` • ${getAttachmentConfigDisplay(dataFilter.attachment_config)}`}</p>
+                                            </div>
+                                            <div className="flex items-center gap-4 ml-6">
+                                                <div className="flex items-center gap-4 text-xs text-gray-600">
+                                                    <span className='select-none'>{formatDateToHumanReadableDate(dataFilter.updated_at)} at {formatDateToHumanReadableTime(dataFilter.updated_at)}</span>
+                                                    <span className='select-none'>•</span>
+                                                    <span className='select-none'>{dataFilter.updated_by}</span>
+                                                </div>
+                                                <button
+                                                    onClick={(e) => handleEditGlobalFilter(dataFilter, e)}
+                                                    className="opacity-0 group-hover:opacity-100 transition-opacity p-2 hover:bg-gray-200 rounded"
+                                                >
+                                                    <Pencil className="w-4 h-4 text-gray-600" />
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </CardContent>
+                                </Card>
+                            ))}
                         </div>
                     )}
 
@@ -275,9 +297,12 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                     {/* Override Filters Table */}
                     {overrideFilters.length > 0 && (
                         <div className="w-full">
-                            <p className="font-display text-2xl">Overrides</p>
+                            <div className="mb-4">
+                                <p className="font-display text-2xl">Custom Filters</p>
+                                <p className="text-sm text-gray-600 mt-1">Filters for specific events and traces that override global settings</p>
+                            </div>
 
-                            <div className="py-4" />
+                            <div className="py-2" />
 
                             <Table className="font-display">
                                 <TableHeader>
@@ -314,6 +339,105 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         </div>
                     )}
                 </div>}
+
+            {/* Global Filter Edit Dialog */}
+            <Dialog open={pageState.editingGlobalFilter !== null} onOpenChange={(open) => !open && handleCancelGlobalFilter()}>
+                <DialogContent className="font-display">
+                    <DialogHeader>
+                        <DialogTitle>
+                            Edit {pageState.editingGlobalFilter?.type === 'all_events' ? 'All Events' : 'All Traces'} Filter
+                        </DialogTitle>
+                    </DialogHeader>
+
+                    <div className="space-y-4 py-4">
+                        <div className="space-y-2">
+                            <label className="text-sm font-medium">Collection Mode</label>
+                            <div className="space-y-2">
+                                <label className="flex items-center gap-2 cursor-pointer">
+                                    <input
+                                        type="radio"
+                                        name="collectionMode"
+                                        value="sample_rate"
+                                        checked={pageState.editingGlobalFilter?.collectionMode === 'sample_rate'}
+                                        onChange={(e) => updatePageState({
+                                            editingGlobalFilter: pageState.editingGlobalFilter ? {
+                                                ...pageState.editingGlobalFilter,
+                                                collectionMode: 'sample_rate',
+                                                sampleRate: pageState.editingGlobalFilter.sampleRate || 100
+                                            } : null
+                                        })}
+                                    />
+                                    <span className="text-sm">Sample Rate</span>
+                                </label>
+                                {pageState.editingGlobalFilter?.collectionMode === 'sample_rate' && (
+                                    <input
+                                        type="number"
+                                        min="0"
+                                        max="100"
+                                        value={pageState.editingGlobalFilter.sampleRate || 100}
+                                        onChange={(e) => updatePageState({
+                                            editingGlobalFilter: pageState.editingGlobalFilter ? {
+                                                ...pageState.editingGlobalFilter,
+                                                sampleRate: parseInt(e.target.value)
+                                            } : null
+                                        })}
+                                        className="ml-6 w-24 px-2 py-1 border rounded text-sm"
+                                    />
+                                )}
+
+                                <label className="flex items-center gap-2 cursor-pointer">
+                                    <input
+                                        type="radio"
+                                        name="collectionMode"
+                                        value="timeline_only"
+                                        checked={pageState.editingGlobalFilter?.collectionMode === 'timeline_only'}
+                                        onChange={(e) => updatePageState({
+                                            editingGlobalFilter: pageState.editingGlobalFilter ? {
+                                                ...pageState.editingGlobalFilter,
+                                                collectionMode: 'timeline_only'
+                                            } : null
+                                        })}
+                                    />
+                                    <span className="text-sm">Timeline Only</span>
+                                </label>
+
+                                <label className="flex items-center gap-2 cursor-pointer">
+                                    <input
+                                        type="radio"
+                                        name="collectionMode"
+                                        value="disable"
+                                        checked={pageState.editingGlobalFilter?.collectionMode === 'disable'}
+                                        onChange={(e) => updatePageState({
+                                            editingGlobalFilter: pageState.editingGlobalFilter ? {
+                                                ...pageState.editingGlobalFilter,
+                                                collectionMode: 'disable'
+                                            } : null
+                                        })}
+                                    />
+                                    <span className="text-sm">Disable</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <DialogFooter>
+                        <Button
+                            variant="outline"
+                            onClick={handleCancelGlobalFilter}
+                            className="font-display"
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            variant="outline"
+                            onClick={handleSaveGlobalFilter}
+                            className="font-display border border-black"
+                        >
+                            Confirm
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
         </div>
     )
 }

From ba17a2519fa2f74195105ef9c5ad4c7852c2aa85 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 11:35:31 +0530
Subject: [PATCH 08/98] feat(frontend): improve sampling rate input

---
 .../app/[teamId]/data_filters/page.tsx        | 169 +++++++++---------
 .../rule_builder_card.tsx                     |   7 +-
 .../data_filters/sampling_rate_input.tsx      |  60 +++++++
 3 files changed, 147 insertions(+), 89 deletions(-)
 rename frontend/dashboard/app/components/{session_targeting => data_filters}/rule_builder_card.tsx (93%)
 create mode 100644 frontend/dashboard/app/components/data_filters/sampling_rate_input.tsx

diff --git a/frontend/dashboard/app/[teamId]/data_filters/page.tsx b/frontend/dashboard/app/[teamId]/data_filters/page.tsx
index 693c13c7b..b95629dd9 100644
--- a/frontend/dashboard/app/[teamId]/data_filters/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data_filters/page.tsx
@@ -14,6 +14,7 @@ import { Plus, Pencil } from 'lucide-react'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/app/components/dropdown_menu'
 import { Card, CardContent, CardFooter } from '@/app/components/card'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/app/components/dialog'
+import SamplingRateInput from '@/app/components/data_filters/sampling_rate_input'
 
 interface PageState {
     dataFiltersApiStatus: DataFiltersApiStatus
@@ -264,7 +265,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                             {globalFilters.map((dataFilter, idx) => (
                                 <Card
                                     key={`${idx}-${dataFilter.id}`}
-                                    className={`w-full group relative ${dataFilter.type === 'all_events' ? 'bg-blue-100' : 'bg-purple-100'}`}
+                                    className={`w-full ${dataFilter.type === 'all_events' ? 'bg-blue-100' : 'bg-purple-100'}`}
                                 >
                                     <CardContent className="p-4">
                                         <div className="flex flex-row items-center justify-between">
@@ -280,7 +281,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                                                 </div>
                                                 <button
                                                     onClick={(e) => handleEditGlobalFilter(dataFilter, e)}
-                                                    className="opacity-0 group-hover:opacity-100 transition-opacity p-2 hover:bg-gray-200 rounded"
+                                                    className="p-2 hover:bg-gray-200 rounded"
                                                 >
                                                     <Pencil className="w-4 h-4 text-gray-600" />
                                                 </button>
@@ -294,15 +295,23 @@ export default function DataFilters({ params }: { params: { teamId: string } })
 
                     <div className="py-8" />
 
-                    {/* Override Filters Table */}
-                    {overrideFilters.length > 0 && (
-                        <div className="w-full">
-                            <div className="mb-4">
-                                <p className="font-display text-2xl">Custom Filters</p>
-                                <p className="text-sm text-gray-600 mt-1">Filters for specific events and traces that override global settings</p>
-                            </div>
+                    {/* Override Filters Section */}
+                    <div className="w-full">
+                        <div className="mb-4">
+                            <p className="font-display text-2xl">Filters</p>
+                            <p className="text-sm text-gray-600 mt-1">Add filters for events and traces that override global settings</p>
+                        </div>
 
-                            <div className="py-2" />
+                        <div className="py-2" />
+
+                        {overrideFilters.length === 0 ? (
+                            <div className="w-full py-12 text-center">
+                                <p className="text-gray-500 text-sm">
+                                    Click "Create Filter" to override the global filter settings for any event or trace
+                                </p>
+                            </div>
+                        ) : (
+                            <div>
 
                             <Table className="font-display">
                                 <TableHeader>
@@ -336,88 +345,82 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                                     ))}
                                 </TableBody>
                             </Table>
-                        </div>
-                    )}
+                            </div>
+                        )}
+                    </div>
                 </div>}
 
             {/* Global Filter Edit Dialog */}
             <Dialog open={pageState.editingGlobalFilter !== null} onOpenChange={(open) => !open && handleCancelGlobalFilter()}>
                 <DialogContent className="font-display">
                     <DialogHeader>
-                        <DialogTitle>
-                            Edit {pageState.editingGlobalFilter?.type === 'all_events' ? 'All Events' : 'All Traces'} Filter
+                        <DialogTitle className="font-display text-2xl">
+                            Edit {pageState.editingGlobalFilter?.type === 'all_events' ? 'Events' : 'Traces'} Filter
                         </DialogTitle>
                     </DialogHeader>
 
-                    <div className="space-y-4 py-4">
-                        <div className="space-y-2">
-                            <label className="text-sm font-medium">Collection Mode</label>
-                            <div className="space-y-2">
-                                <label className="flex items-center gap-2 cursor-pointer">
-                                    <input
-                                        type="radio"
-                                        name="collectionMode"
-                                        value="sample_rate"
-                                        checked={pageState.editingGlobalFilter?.collectionMode === 'sample_rate'}
-                                        onChange={(e) => updatePageState({
-                                            editingGlobalFilter: pageState.editingGlobalFilter ? {
-                                                ...pageState.editingGlobalFilter,
-                                                collectionMode: 'sample_rate',
-                                                sampleRate: pageState.editingGlobalFilter.sampleRate || 100
-                                            } : null
-                                        })}
-                                    />
-                                    <span className="text-sm">Sample Rate</span>
-                                </label>
-                                {pageState.editingGlobalFilter?.collectionMode === 'sample_rate' && (
-                                    <input
-                                        type="number"
-                                        min="0"
-                                        max="100"
-                                        value={pageState.editingGlobalFilter.sampleRate || 100}
-                                        onChange={(e) => updatePageState({
-                                            editingGlobalFilter: pageState.editingGlobalFilter ? {
-                                                ...pageState.editingGlobalFilter,
-                                                sampleRate: parseInt(e.target.value)
-                                            } : null
-                                        })}
-                                        className="ml-6 w-24 px-2 py-1 border rounded text-sm"
-                                    />
-                                )}
-
-                                <label className="flex items-center gap-2 cursor-pointer">
-                                    <input
-                                        type="radio"
-                                        name="collectionMode"
-                                        value="timeline_only"
-                                        checked={pageState.editingGlobalFilter?.collectionMode === 'timeline_only'}
-                                        onChange={(e) => updatePageState({
-                                            editingGlobalFilter: pageState.editingGlobalFilter ? {
-                                                ...pageState.editingGlobalFilter,
-                                                collectionMode: 'timeline_only'
-                                            } : null
-                                        })}
-                                    />
-                                    <span className="text-sm">Timeline Only</span>
-                                </label>
-
-                                <label className="flex items-center gap-2 cursor-pointer">
-                                    <input
-                                        type="radio"
-                                        name="collectionMode"
-                                        value="disable"
-                                        checked={pageState.editingGlobalFilter?.collectionMode === 'disable'}
-                                        onChange={(e) => updatePageState({
-                                            editingGlobalFilter: pageState.editingGlobalFilter ? {
-                                                ...pageState.editingGlobalFilter,
-                                                collectionMode: 'disable'
-                                            } : null
-                                        })}
-                                    />
-                                    <span className="text-sm">Disable</span>
-                                </label>
-                            </div>
-                        </div>
+                    <div className="space-y-3 py-4">
+                        <label className="flex items-center gap-3 cursor-pointer h-10">
+                            <input
+                                type="radio"
+                                name="collectionMode"
+                                value="sample_rate"
+                                checked={pageState.editingGlobalFilter?.collectionMode === 'sample_rate'}
+                                onChange={(e) => updatePageState({
+                                    editingGlobalFilter: pageState.editingGlobalFilter ? {
+                                        ...pageState.editingGlobalFilter,
+                                        collectionMode: 'sample_rate',
+                                        sampleRate: pageState.editingGlobalFilter.sampleRate || 100
+                                    } : null
+                                })}
+                                className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                            />
+                            <SamplingRateInput
+                                value={pageState.editingGlobalFilter?.sampleRate || 100}
+                                onChange={(value) => updatePageState({
+                                    editingGlobalFilter: pageState.editingGlobalFilter ? {
+                                        ...pageState.editingGlobalFilter,
+                                        collectionMode: 'sample_rate',
+                                        sampleRate: value
+                                    } : null
+                                })}
+                                disabled={pageState.editingGlobalFilter?.collectionMode !== 'sample_rate'}
+                            />
+                        </label>
+
+                        <label className="flex items-center gap-3 cursor-pointer h-10">
+                            <input
+                                type="radio"
+                                name="collectionMode"
+                                value="timeline_only"
+                                checked={pageState.editingGlobalFilter?.collectionMode === 'timeline_only'}
+                                onChange={(e) => updatePageState({
+                                    editingGlobalFilter: pageState.editingGlobalFilter ? {
+                                        ...pageState.editingGlobalFilter,
+                                        collectionMode: 'timeline_only'
+                                    } : null
+                                })}
+                                className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                            />
+                            <span className="text-sm font-body">Collect with session timeline only</span>
+                        </label>
+
+                        <label className="flex items-center gap-3 cursor-pointer h-10">
+                            <input
+                                type="radio"
+                                name="collectionMode"
+                                value="disable"
+                                checked={pageState.editingGlobalFilter?.collectionMode === 'disable'}
+                                onChange={(e) => updatePageState({
+                                    editingGlobalFilter: pageState.editingGlobalFilter ? {
+                                        ...pageState.editingGlobalFilter,
+                                        collectionMode: 'disable'
+                                    } : null
+                                })}
+                                className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                            />
+                            <span className="text-sm font-body">Collect no {pageState.editingGlobalFilter?.type === 'all_events' ? 'events' : 'traces'}</span>
+                        </label>
                     </div>
 
                     <DialogFooter>
diff --git a/frontend/dashboard/app/components/session_targeting/rule_builder_card.tsx b/frontend/dashboard/app/components/data_filters/rule_builder_card.tsx
similarity index 93%
rename from frontend/dashboard/app/components/session_targeting/rule_builder_card.tsx
rename to frontend/dashboard/app/components/data_filters/rule_builder_card.tsx
index 3d6e56181..53f46007d 100644
--- a/frontend/dashboard/app/components/session_targeting/rule_builder_card.tsx
+++ b/frontend/dashboard/app/components/data_filters/rule_builder_card.tsx
@@ -3,10 +3,6 @@
 import { useState } from "react"
 import { Card, CardContent, CardFooter } from "@/app/components/card"
 import { Button } from "@/app/components/button"
-import { Input } from "@/app/components/input"
-import DropdownSelect, { DropdownSelectType } from "@/app/components/dropdown_select"
-import { Plus } from "lucide-react"
-import RuleBuilderAttributeRow from "@/app/components/session_targeting/rule_builder_attribute_row"
 
 interface RuleBuilderCardProps {
     type: 'event' | 'trace' | 'session_attr'
@@ -33,7 +29,7 @@ const operators = ["equals", "not equals", "contains", "greater than", "less tha
 
 // Operator types mapping for different attribute types
 const operatorTypesMapping = {
-    string: ['eq', 'neq', 'contains', 'ncontains'],
+    string: ['eq', 'neq', 'contains'],
     number: ['eq', 'neq', 'gt', 'gte', 'lt', 'lte'],
     int64: ['eq', 'neq', 'gt', 'gte', 'lt', 'lte'],
     float64: ['eq', 'neq', 'gt', 'gte', 'lt', 'lte'],
@@ -111,7 +107,6 @@ export default function RuleBuilderCard({ type, onCancel, onSave, initialData }:
     return (
         <Card className="w-full">
             <CardContent className="pt-6">
-                <div className="mb-6">
             </CardContent>
 
             <CardFooter className="flex justify-end gap-3">
diff --git a/frontend/dashboard/app/components/data_filters/sampling_rate_input.tsx b/frontend/dashboard/app/components/data_filters/sampling_rate_input.tsx
new file mode 100644
index 000000000..7c1d79c72
--- /dev/null
+++ b/frontend/dashboard/app/components/data_filters/sampling_rate_input.tsx
@@ -0,0 +1,60 @@
+import { useState, useEffect } from 'react'
+
+interface SamplingRateInputProps {
+    value: number
+    onChange: (value: number) => void
+    disabled?: boolean
+}
+
+const formatSamplingRate = (value: string): string => {
+    if (value === '') return ''
+    const numValue = parseFloat(value)
+    if (isNaN(numValue)) return ''
+    const clampedValue = Math.max(0, Math.min(100, numValue))
+    const formattedValue = Math.round(clampedValue * 1000000) / 1000000
+    return formattedValue.toString()
+}
+
+export default function SamplingRateInput({ value, onChange, disabled = false }: SamplingRateInputProps) {
+    const [inputValue, setInputValue] = useState(value.toString())
+
+    // Sync with prop value when it changes externally
+    useEffect(() => {
+        setInputValue(value.toString())
+    }, [value])
+
+    const handleBlur = () => {
+        const formatted = formatSamplingRate(inputValue)
+
+        if (formatted !== '') {
+            const numValue = parseFloat(formatted)
+            onChange(numValue)
+            setInputValue(numValue.toString())
+        } else {
+            // Reset to current value if invalid
+            setInputValue(value.toString())
+        }
+    }
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setInputValue(e.target.value)
+    }
+
+    return (
+        <div className="flex items-center gap-3">
+            <span className="text-sm font-body">Collect at</span>
+            <input
+                type="number"
+                min="0"
+                max="100"
+                step="0.000001"
+                value={inputValue}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                disabled={disabled}
+                className="w-32 border border-black rounded-md outline-hidden text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 font-body disabled:opacity-50 disabled:cursor-not-allowed"
+            />
+            <span className="text-sm font-body">% sampling rate</span>
+        </div>
+    )
+}

From 4f16178ac11b0fd74dad6f874f0d52a72ba72c90 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 11:37:50 +0530
Subject: [PATCH 09/98] feat(frontend): fix empty state

---
 .../app/[teamId]/data_filters/page.tsx        |  28 ++---
 frontend/dashboard/app/api/api_calls.ts       | 110 +++++++++---------
 2 files changed, 69 insertions(+), 69 deletions(-)

diff --git a/frontend/dashboard/app/[teamId]/data_filters/page.tsx b/frontend/dashboard/app/[teamId]/data_filters/page.tsx
index b95629dd9..104ac7fc1 100644
--- a/frontend/dashboard/app/[teamId]/data_filters/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data_filters/page.tsx
@@ -296,21 +296,21 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                     <div className="py-8" />
 
                     {/* Override Filters Section */}
-                    <div className="w-full">
-                        <div className="mb-4">
-                            <p className="font-display text-2xl">Filters</p>
-                            <p className="text-sm text-gray-600 mt-1">Add filters for events and traces that override global settings</p>
+                    {overrideFilters.length === 0 ? (
+                        <div className="w-full py-12 text-center">
+                            <p className="text-gray-500 text-sm">
+                                Click "Create Filter" to override the global filter settings for any event or trace
+                            </p>
                         </div>
+                    ) : (
+                        <div className="w-full">
+                            <div className="mb-4">
+                                <p className="font-display text-2xl">Filters</p>
+                                <p className="text-sm text-gray-600 mt-1">Add filters for events and traces that override global settings</p>
+                            </div>
 
-                        <div className="py-2" />
+                            <div className="py-2" />
 
-                        {overrideFilters.length === 0 ? (
-                            <div className="w-full py-12 text-center">
-                                <p className="text-gray-500 text-sm">
-                                    Click "Create Filter" to override the global filter settings for any event or trace
-                                </p>
-                            </div>
-                        ) : (
                             <div>
 
                             <Table className="font-display">
@@ -346,8 +346,8 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                                 </TableBody>
                             </Table>
                             </div>
-                        )}
-                    </div>
+                        </div>
+                    )}
                 </div>}
 
             {/* Global Filter Edit Dialog */}
diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index f42758a46..72e617e60 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -1087,61 +1087,61 @@ export const emptyDataFiltersResponse: DataFiltersResponse = {
       updated_at: "2024-01-01T00:00:00Z",
       updated_by: "system@example.com",
     },
-    {
-      id: "df-001",
-      type: "event",
-      filter: "event.type == 'click' && event.target == 'checkout_button'",
-      collection_config: { mode: 'sample_rate', sample_rate: 0.5 },
-      attachment_config: 'screenshot',
-      created_at: "2024-01-15T10:30:00Z",
-      created_by: "user1@example.com",
-      updated_at: "2024-02-20T14:45:00Z",
-      updated_by: "user2@example.com",
-    },
-    {
-      id: "df-002",
-      type: "trace",
-      filter: "trace.duration > 5000 && trace.status == 'error'",
-      collection_config: { mode: 'timeline_only' },
-      attachment_config: 'layout_snapshot',
-      created_at: "2024-01-20T08:15:00Z",
-      created_by: "admin@example.com",
-      updated_at: "2024-01-20T08:15:00Z",
-      updated_by: "admin@example.com",
-    },
-    {
-      id: "df-003",
-      type: "event",
-      filter: "event.name == 'app_background' && session.is_crash == true",
-      collection_config: { mode: 'disable' },
-      attachment_config: null,
-      created_at: "2024-02-01T12:00:00Z",
-      created_by: "developer@example.com",
-      updated_at: "2024-03-10T09:30:00Z",
-      updated_by: "lead@example.com",
-    },
-    {
-      id: "df-004",
-      type: "trace",
-      filter: "trace.name == 'network_request' && trace.http.status_code >= 400",
-      collection_config: { mode: 'sample_rate', sample_rate: 0.25 },
-      attachment_config: 'none',
-      created_at: "2024-02-10T16:20:00Z",
-      created_by: "qa@example.com",
-      updated_at: "2024-02-28T11:15:00Z",
-      updated_by: "qa@example.com",
-    },
-    {
-      id: "df-005",
-      type: "event",
-      filter: "event.type == 'gesture' && device.manufacturer == 'Samsung'",
-      collection_config: { mode: 'sample_rate', sample_rate: 1.0 },
-      attachment_config: 'screenshot',
-      created_at: "2024-03-05T13:45:00Z",
-      created_by: "user3@example.com",
-      updated_at: "2024-03-05T13:45:00Z",
-      updated_by: "user3@example.com",
-    },
+    // {
+    //   id: "df-001",
+    //   type: "event",
+    //   filter: "event.type == 'click' && event.target == 'checkout_button'",
+    //   collection_config: { mode: 'sample_rate', sample_rate: 0.5 },
+    //   attachment_config: 'screenshot',
+    //   created_at: "2024-01-15T10:30:00Z",
+    //   created_by: "user1@example.com",
+    //   updated_at: "2024-02-20T14:45:00Z",
+    //   updated_by: "user2@example.com",
+    // },
+    // {
+    //   id: "df-002",
+    //   type: "trace",
+    //   filter: "trace.duration > 5000 && trace.status == 'error'",
+    //   collection_config: { mode: 'timeline_only' },
+    //   attachment_config: 'layout_snapshot',
+    //   created_at: "2024-01-20T08:15:00Z",
+    //   created_by: "admin@example.com",
+    //   updated_at: "2024-01-20T08:15:00Z",
+    //   updated_by: "admin@example.com",
+    // },
+    // {
+    //   id: "df-003",
+    //   type: "event",
+    //   filter: "event.name == 'app_background' && session.is_crash == true",
+    //   collection_config: { mode: 'disable' },
+    //   attachment_config: null,
+    //   created_at: "2024-02-01T12:00:00Z",
+    //   created_by: "developer@example.com",
+    //   updated_at: "2024-03-10T09:30:00Z",
+    //   updated_by: "lead@example.com",
+    // },
+    // {
+    //   id: "df-004",
+    //   type: "trace",
+    //   filter: "trace.name == 'network_request' && trace.http.status_code >= 400",
+    //   collection_config: { mode: 'sample_rate', sample_rate: 0.25 },
+    //   attachment_config: 'none',
+    //   created_at: "2024-02-10T16:20:00Z",
+    //   created_by: "qa@example.com",
+    //   updated_at: "2024-02-28T11:15:00Z",
+    //   updated_by: "qa@example.com",
+    // },
+    // {
+    //   id: "df-005",
+    //   type: "event",
+    //   filter: "event.type == 'gesture' && device.manufacturer == 'Samsung'",
+    //   collection_config: { mode: 'sample_rate', sample_rate: 1.0 },
+    //   attachment_config: 'screenshot',
+    //   created_at: "2024-03-05T13:45:00Z",
+    //   created_by: "user3@example.com",
+    //   updated_at: "2024-03-05T13:45:00Z",
+    //   updated_by: "user3@example.com",
+    // },
   ],
 }
 

From 1c52a3dfac64aff3a08e343040644192b3d5bff7 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 11:41:26 +0530
Subject: [PATCH 10/98] feat(frontend): hide content ni edit mode

---
 .../app/[teamId]/data_filters/page.tsx        | 104 +++++++++---------
 frontend/dashboard/app/api/api_calls.ts       |  22 ++--
 2 files changed, 64 insertions(+), 62 deletions(-)

diff --git a/frontend/dashboard/app/[teamId]/data_filters/page.tsx b/frontend/dashboard/app/[teamId]/data_filters/page.tsx
index 104ac7fc1..4ecccee19 100644
--- a/frontend/dashboard/app/[teamId]/data_filters/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data_filters/page.tsx
@@ -259,8 +259,8 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         <LoadingBar />
                     </div>
 
-                    {/* Global Filters Section */}
-                    {globalFilters.length > 0 && (
+                    {/* Global Filters Section - Hidden during edit mode */}
+                    {pageState.editingFilterType === null && globalFilters.length > 0 && (
                         <div className="flex flex-col gap-3 w-full">
                             {globalFilters.map((dataFilter, idx) => (
                                 <Card
@@ -295,58 +295,60 @@ export default function DataFilters({ params }: { params: { teamId: string } })
 
                     <div className="py-8" />
 
-                    {/* Override Filters Section */}
-                    {overrideFilters.length === 0 ? (
-                        <div className="w-full py-12 text-center">
-                            <p className="text-gray-500 text-sm">
-                                Click "Create Filter" to override the global filter settings for any event or trace
-                            </p>
-                        </div>
-                    ) : (
-                        <div className="w-full">
-                            <div className="mb-4">
-                                <p className="font-display text-2xl">Filters</p>
-                                <p className="text-sm text-gray-600 mt-1">Add filters for events and traces that override global settings</p>
+                    {/* Override Filters Section - Hidden during edit mode */}
+                    {pageState.editingFilterType === null && (
+                        overrideFilters.length === 0 ? (
+                            <div className="w-full py-12 text-center">
+                                <p className="text-gray-500 text-sm">
+                                    Click "Create Filter" to override the global filter settings for any event or trace
+                                </p>
                             </div>
-
-                            <div className="py-2" />
-
-                            <div>
-
-                            <Table className="font-display">
-                                <TableHeader>
-                                    <TableRow>
-                                        <TableHead className="w-[52%]">Filter</TableHead>
-                                        <TableHead className="w-[24%] text-center">Updated At</TableHead>
-                                        <TableHead className="w-[24%] text-center">Updated By</TableHead>
-                                    </TableRow>
-                                </TableHeader>
-                                <TableBody>
-                                    {overrideFilters.map((dataFilter, idx) => (
-                                        <TableRow
-                                            key={`${idx}-${dataFilter.id}`}
-                                            className="font-body"
-                                        >
-                                            <TableCell className="w-[60%] p-4">
-                                                <p className='truncate select-none font-mono text-sm'>{getFilterDisplayText(dataFilter.type, dataFilter.filter)}</p>
-                                                <div className='py-1' />
-                                                <p className='text-xs truncate text-gray-500 select-none'>{getCollectionConfigDisplay(dataFilter.collection_config)}</p>
-                                                <p className='text-xs truncate text-gray-500 select-none'>{getAttachmentConfigDisplay(dataFilter.attachment_config)}</p>
-                                            </TableCell>
-                                            <TableCell className="w-[20%] text-center p-4">
-                                                <p className='truncate select-none'>{formatDateToHumanReadableDate(dataFilter.updated_at)}</p>
-                                                <div className='py-1' />
-                                                <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(dataFilter.updated_at)}</p>
-                                            </TableCell>
-                                            <TableCell className="w-[20%] text-center p-4">
-                                                <p className='truncate select-none'>{dataFilter.updated_by}</p>
-                                            </TableCell>
+                        ) : (
+                            <div className="w-full">
+                                <div className="mb-4">
+                                    <p className="font-display text-2xl">Filters</p>
+                                    <p className="text-sm text-gray-600 mt-1">Add filters for events and traces that override global settings</p>
+                                </div>
+
+                                <div className="py-2" />
+
+                                <div>
+
+                                <Table className="font-display">
+                                    <TableHeader>
+                                        <TableRow>
+                                            <TableHead className="w-[52%]">Filter</TableHead>
+                                            <TableHead className="w-[24%] text-center">Updated At</TableHead>
+                                            <TableHead className="w-[24%] text-center">Updated By</TableHead>
                                         </TableRow>
-                                    ))}
-                                </TableBody>
-                            </Table>
+                                    </TableHeader>
+                                    <TableBody>
+                                        {overrideFilters.map((dataFilter, idx) => (
+                                            <TableRow
+                                                key={`${idx}-${dataFilter.id}`}
+                                                className="font-body"
+                                            >
+                                                <TableCell className="w-[60%] p-4">
+                                                    <p className='truncate select-none font-mono text-sm'>{getFilterDisplayText(dataFilter.type, dataFilter.filter)}</p>
+                                                    <div className='py-1' />
+                                                    <p className='text-xs truncate text-gray-500 select-none'>{getCollectionConfigDisplay(dataFilter.collection_config)}</p>
+                                                    <p className='text-xs truncate text-gray-500 select-none'>{getAttachmentConfigDisplay(dataFilter.attachment_config)}</p>
+                                                </TableCell>
+                                                <TableCell className="w-[20%] text-center p-4">
+                                                    <p className='truncate select-none'>{formatDateToHumanReadableDate(dataFilter.updated_at)}</p>
+                                                    <div className='py-1' />
+                                                    <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(dataFilter.updated_at)}</p>
+                                                </TableCell>
+                                                <TableCell className="w-[20%] text-center p-4">
+                                                    <p className='truncate select-none'>{dataFilter.updated_by}</p>
+                                                </TableCell>
+                                            </TableRow>
+                                        ))}
+                                    </TableBody>
+                                </Table>
+                                </div>
                             </div>
-                        </div>
+                        )
                     )}
                 </div>}
 
diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index 72e617e60..507212209 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -1087,17 +1087,17 @@ export const emptyDataFiltersResponse: DataFiltersResponse = {
       updated_at: "2024-01-01T00:00:00Z",
       updated_by: "system@example.com",
     },
-    // {
-    //   id: "df-001",
-    //   type: "event",
-    //   filter: "event.type == 'click' && event.target == 'checkout_button'",
-    //   collection_config: { mode: 'sample_rate', sample_rate: 0.5 },
-    //   attachment_config: 'screenshot',
-    //   created_at: "2024-01-15T10:30:00Z",
-    //   created_by: "user1@example.com",
-    //   updated_at: "2024-02-20T14:45:00Z",
-    //   updated_by: "user2@example.com",
-    // },
+    {
+      id: "df-001",
+      type: "event",
+      filter: "event.type == 'click' && event.target == 'checkout_button'",
+      collection_config: { mode: 'sample_rate', sample_rate: 0.5 },
+      attachment_config: 'screenshot',
+      created_at: "2024-01-15T10:30:00Z",
+      created_by: "user1@example.com",
+      updated_at: "2024-02-20T14:45:00Z",
+      updated_by: "user2@example.com",
+    },
     // {
     //   id: "df-002",
     //   type: "trace",

From e2bcf7a8610205e0a6c23fe51af6df59714c9178 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 11:52:13 +0530
Subject: [PATCH 11/98] feat(frontend): implement clicks for filters

---
 .../app/[teamId]/data_filters/page.tsx        | 48 +++++++++++++++----
 1 file changed, 39 insertions(+), 9 deletions(-)

diff --git a/frontend/dashboard/app/[teamId]/data_filters/page.tsx b/frontend/dashboard/app/[teamId]/data_filters/page.tsx
index 4ecccee19..b795159d7 100644
--- a/frontend/dashboard/app/[teamId]/data_filters/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data_filters/page.tsx
@@ -27,6 +27,13 @@ interface PageState {
         collectionMode: DataFilterCollectionConfig['mode']
         sampleRate?: number
     } | null
+    editingFilter: {
+        id: string
+        type: DataFilterType
+        filter: string
+        collectionMode: DataFilterCollectionConfig['mode']
+        sampleRate?: number
+    } | null
 }
 
 const isGlobalFilter = (type: DataFilterType): boolean => {
@@ -78,6 +85,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         dataFilters: emptyDataFiltersResponse,
         editingFilterType: null,
         editingGlobalFilter: null,
+        editingFilter: null,
     }
 
     const [pageState, setPageState] = useState<PageState>(initialState)
@@ -164,6 +172,27 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         updatePageState({ editingGlobalFilter: null })
     }
 
+    const handleEditFilter = (dataFilter: typeof overrideFilters[0]) => {
+        updatePageState({
+            editingFilter: {
+                id: dataFilter.id,
+                type: dataFilter.type,
+                filter: dataFilter.filter,
+                collectionMode: dataFilter.collection_config.mode,
+                sampleRate: dataFilter.collection_config.mode === 'sample_rate' ? dataFilter.collection_config.sample_rate : undefined
+            }
+        })
+    }
+
+    const handleSaveFilter = () => {
+        // TODO: Implement save logic
+        updatePageState({ editingFilter: null })
+    }
+
+    const handleCancelFilter = () => {
+        updatePageState({ editingFilter: null })
+    }
+
     return (
         <div className="flex flex-col selection:bg-yellow-200/75 items-start">
 
@@ -174,7 +203,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         <Button
                             variant="outline"
                             className="font-display border border-black select-none"
-                            disabled={pageState.dataFiltersApiStatus === DataFiltersApiStatus.Loading || pageState.editingFilterType !== null}
+                            disabled={pageState.dataFiltersApiStatus === DataFiltersApiStatus.Loading || pageState.editingFilterType !== null || pageState.editingFilter !== null}
                         >
                             <Plus /> Create Filter
                         </Button>
@@ -216,8 +245,8 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                 onFiltersChanged={handleFiltersChanged} />
             <div className="py-4" />
 
-            {/* Filter creation card */}
-            {pageState.editingFilterType && (
+            {/* Filter creation/edit card */}
+            {(pageState.editingFilterType || pageState.editingFilter) && (
                 <>
                     <Card className="w-full">
                         <CardContent className="pt-6">
@@ -228,17 +257,17 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         <CardFooter className="flex justify-end gap-3">
                             <Button
                                 variant="outline"
-                                onClick={handleCancel}
+                                onClick={pageState.editingFilter ? handleCancelFilter : handleCancel}
                                 className="font-display"
                             >
                                 Cancel
                             </Button>
                             <Button
                                 variant="outline"
-                                onClick={handleCreateFilter}
+                                onClick={pageState.editingFilter ? handleSaveFilter : handleCreateFilter}
                                 className="font-display border border-black"
                             >
-                                Create Filter
+                                {pageState.editingFilter ? 'Save Changes' : 'Create Filter'}
                             </Button>
                         </CardFooter>
                     </Card>
@@ -260,7 +289,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                     </div>
 
                     {/* Global Filters Section - Hidden during edit mode */}
-                    {pageState.editingFilterType === null && globalFilters.length > 0 && (
+                    {pageState.editingFilterType === null && pageState.editingFilter === null && globalFilters.length > 0 && (
                         <div className="flex flex-col gap-3 w-full">
                             {globalFilters.map((dataFilter, idx) => (
                                 <Card
@@ -296,7 +325,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                     <div className="py-8" />
 
                     {/* Override Filters Section - Hidden during edit mode */}
-                    {pageState.editingFilterType === null && (
+                    {pageState.editingFilterType === null && pageState.editingFilter === null && (
                         overrideFilters.length === 0 ? (
                             <div className="w-full py-12 text-center">
                                 <p className="text-gray-500 text-sm">
@@ -326,7 +355,8 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                                         {overrideFilters.map((dataFilter, idx) => (
                                             <TableRow
                                                 key={`${idx}-${dataFilter.id}`}
-                                                className="font-body"
+                                                className="font-body cursor-pointer hover:bg-gray-50"
+                                                onClick={() => handleEditFilter(dataFilter)}
                                             >
                                                 <TableCell className="w-[60%] p-4">
                                                     <p className='truncate select-none font-mono text-sm'>{getFilterDisplayText(dataFilter.type, dataFilter.filter)}</p>

From c580c0457655e82f3ffdaf96da4ce2a9ed9ec1ff Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 12:00:34 +0530
Subject: [PATCH 12/98] feat(frontend): use routes for edit/create mode

---
 .../event/[filterId]/edit/page.tsx            | 50 +++++++++++
 .../data_filters/event/create/page.tsx        | 50 +++++++++++
 .../app/[teamId]/data_filters/page.tsx        | 88 +++----------------
 .../trace/[filterId]/edit/page.tsx            | 50 +++++++++++
 .../data_filters/trace/create/page.tsx        | 50 +++++++++++
 frontend/dashboard/app/api/api_calls.ts       | 17 ++--
 6 files changed, 221 insertions(+), 84 deletions(-)
 create mode 100644 frontend/dashboard/app/[teamId]/data_filters/event/[filterId]/edit/page.tsx
 create mode 100644 frontend/dashboard/app/[teamId]/data_filters/event/create/page.tsx
 create mode 100644 frontend/dashboard/app/[teamId]/data_filters/trace/[filterId]/edit/page.tsx
 create mode 100644 frontend/dashboard/app/[teamId]/data_filters/trace/create/page.tsx

diff --git a/frontend/dashboard/app/[teamId]/data_filters/event/[filterId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data_filters/event/[filterId]/edit/page.tsx
new file mode 100644
index 000000000..6bd9e5b36
--- /dev/null
+++ b/frontend/dashboard/app/[teamId]/data_filters/event/[filterId]/edit/page.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { useRouter } from 'next/navigation'
+import { Button } from '@/app/components/button'
+import { Card, CardContent, CardFooter } from '@/app/components/card'
+
+export default function EditEventFilter({ params }: { params: { teamId: string, filterId: string } }) {
+    const router = useRouter()
+
+    const handleCancel = () => {
+        router.push(`/${params.teamId}/data_filters`)
+    }
+
+    const handleSave = () => {
+        // TODO: Implement save logic
+        router.push(`/${params.teamId}/data_filters`)
+    }
+
+    return (
+        <div className="flex flex-col selection:bg-yellow-200/75 items-start">
+            <p className="font-display text-4xl max-w-6xl text-center">Edit Event Filter</p>
+            <div className="py-4" />
+
+            <Card className="w-full">
+                <CardContent className="pt-6">
+                    <div className="mb-6">
+                        {/* TODO: Add form fields */}
+                    </div>
+                </CardContent>
+
+                <CardFooter className="flex justify-end gap-3">
+                    <Button
+                        variant="outline"
+                        onClick={handleCancel}
+                        className="font-display"
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        variant="outline"
+                        onClick={handleSave}
+                        className="font-display border border-black"
+                    >
+                        Save Changes
+                    </Button>
+                </CardFooter>
+            </Card>
+        </div>
+    )
+}
diff --git a/frontend/dashboard/app/[teamId]/data_filters/event/create/page.tsx b/frontend/dashboard/app/[teamId]/data_filters/event/create/page.tsx
new file mode 100644
index 000000000..fe3c264bd
--- /dev/null
+++ b/frontend/dashboard/app/[teamId]/data_filters/event/create/page.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { useRouter } from 'next/navigation'
+import { Button } from '@/app/components/button'
+import { Card, CardContent, CardFooter } from '@/app/components/card'
+
+export default function CreateEventFilter({ params }: { params: { teamId: string } }) {
+    const router = useRouter()
+
+    const handleCancel = () => {
+        router.push(`/${params.teamId}/data_filters`)
+    }
+
+    const handleCreate = () => {
+        // TODO: Implement create logic
+        router.push(`/${params.teamId}/data_filters`)
+    }
+
+    return (
+        <div className="flex flex-col selection:bg-yellow-200/75 items-start">
+            <p className="font-display text-4xl max-w-6xl text-center">Create Event Filter</p>
+            <div className="py-4" />
+
+            <Card className="w-full">
+                <CardContent className="pt-6">
+                    <div className="mb-6">
+                        {/* TODO: Add form fields */}
+                    </div>
+                </CardContent>
+
+                <CardFooter className="flex justify-end gap-3">
+                    <Button
+                        variant="outline"
+                        onClick={handleCancel}
+                        className="font-display"
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        variant="outline"
+                        onClick={handleCreate}
+                        className="font-display border border-black"
+                    >
+                        Create Filter
+                    </Button>
+                </CardFooter>
+            </Card>
+        </div>
+    )
+}
diff --git a/frontend/dashboard/app/[teamId]/data_filters/page.tsx b/frontend/dashboard/app/[teamId]/data_filters/page.tsx
index b795159d7..ddcca3a3d 100644
--- a/frontend/dashboard/app/[teamId]/data_filters/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data_filters/page.tsx
@@ -11,29 +11,21 @@ import { useRouter, useSearchParams } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { Button } from '@/app/components/button'
 import { Plus, Pencil } from 'lucide-react'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/app/components/dropdown_menu'
-import { Card, CardContent, CardFooter } from '@/app/components/card'
+import { Card, CardContent } from '@/app/components/card'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/app/components/dialog'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/app/components/dropdown_menu'
 import SamplingRateInput from '@/app/components/data_filters/sampling_rate_input'
 
 interface PageState {
     dataFiltersApiStatus: DataFiltersApiStatus
     filters: typeof defaultFilters
     dataFilters: DataFiltersResponse
-    editingFilterType: 'event' | 'trace' | null
     editingGlobalFilter: {
         id: string
         type: DataFilterType
         collectionMode: DataFilterCollectionConfig['mode']
         sampleRate?: number
     } | null
-    editingFilter: {
-        id: string
-        type: DataFilterType
-        filter: string
-        collectionMode: DataFilterCollectionConfig['mode']
-        sampleRate?: number
-    } | null
 }
 
 const isGlobalFilter = (type: DataFilterType): boolean => {
@@ -83,9 +75,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         dataFiltersApiStatus: DataFiltersApiStatus.Success,
         filters: defaultFilters,
         dataFilters: emptyDataFiltersResponse,
-        editingFilterType: null,
         editingGlobalFilter: null,
-        editingFilter: null,
     }
 
     const [pageState, setPageState] = useState<PageState>(initialState)
@@ -143,14 +133,6 @@ export default function DataFilters({ params }: { params: { teamId: string } })
     const globalFilters = pageState.dataFilters.results.filter(df => isGlobalFilter(df.type))
     const overrideFilters = pageState.dataFilters.results.filter(df => !isGlobalFilter(df.type))
 
-    const handleCancel = () => {
-        updatePageState({ editingFilterType: null })
-    }
-
-    const handleCreateFilter = () => {
-        updatePageState({ editingFilterType: null })
-    }
-
     const handleEditGlobalFilter = (dataFilter: typeof globalFilters[0], e: React.MouseEvent) => {
         e.stopPropagation()
         updatePageState({
@@ -173,24 +155,8 @@ export default function DataFilters({ params }: { params: { teamId: string } })
     }
 
     const handleEditFilter = (dataFilter: typeof overrideFilters[0]) => {
-        updatePageState({
-            editingFilter: {
-                id: dataFilter.id,
-                type: dataFilter.type,
-                filter: dataFilter.filter,
-                collectionMode: dataFilter.collection_config.mode,
-                sampleRate: dataFilter.collection_config.mode === 'sample_rate' ? dataFilter.collection_config.sample_rate : undefined
-            }
-        })
-    }
-
-    const handleSaveFilter = () => {
-        // TODO: Implement save logic
-        updatePageState({ editingFilter: null })
-    }
-
-    const handleCancelFilter = () => {
-        updatePageState({ editingFilter: null })
+        const filterType = dataFilter.type === 'event' ? 'event' : 'trace'
+        router.push(`/${params.teamId}/data_filters/${filterType}/${dataFilter.id}/edit`)
     }
 
     return (
@@ -203,16 +169,16 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         <Button
                             variant="outline"
                             className="font-display border border-black select-none"
-                            disabled={pageState.dataFiltersApiStatus === DataFiltersApiStatus.Loading || pageState.editingFilterType !== null || pageState.editingFilter !== null}
+                            disabled={pageState.dataFiltersApiStatus === DataFiltersApiStatus.Loading}
                         >
                             <Plus /> Create Filter
                         </Button>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent align="end">
-                        <DropdownMenuItem onClick={() => updatePageState({ editingFilterType: 'event' })}>
+                        <DropdownMenuItem onClick={() => router.push(`/${params.teamId}/data_filters/event/create`)}>
                             Event Filter
                         </DropdownMenuItem>
-                        <DropdownMenuItem onClick={() => updatePageState({ editingFilterType: 'trace' })}>
+                        <DropdownMenuItem onClick={() => router.push(`/${params.teamId}/data_filters/trace/create`)}>
                             Trace Filter
                         </DropdownMenuItem>
                     </DropdownMenuContent>
@@ -245,36 +211,6 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                 onFiltersChanged={handleFiltersChanged} />
             <div className="py-4" />
 
-            {/* Filter creation/edit card */}
-            {(pageState.editingFilterType || pageState.editingFilter) && (
-                <>
-                    <Card className="w-full">
-                        <CardContent className="pt-6">
-                            <div className="mb-6">
-                            </div>
-                        </CardContent>
-
-                        <CardFooter className="flex justify-end gap-3">
-                            <Button
-                                variant="outline"
-                                onClick={pageState.editingFilter ? handleCancelFilter : handleCancel}
-                                className="font-display"
-                            >
-                                Cancel
-                            </Button>
-                            <Button
-                                variant="outline"
-                                onClick={pageState.editingFilter ? handleSaveFilter : handleCreateFilter}
-                                className="font-display border border-black"
-                            >
-                                {pageState.editingFilter ? 'Save Changes' : 'Create Filter'}
-                            </Button>
-                        </CardFooter>
-                    </Card>
-                    <div className="py-12" />
-                </>
-            )}
-
             {/* Error state for data filters fetch */}
             {pageState.filters.ready
                 && pageState.dataFiltersApiStatus === DataFiltersApiStatus.Error
@@ -288,8 +224,8 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         <LoadingBar />
                     </div>
 
-                    {/* Global Filters Section - Hidden during edit mode */}
-                    {pageState.editingFilterType === null && pageState.editingFilter === null && globalFilters.length > 0 && (
+                    {/* Global Filters Section */}
+                    {globalFilters.length > 0 && (
                         <div className="flex flex-col gap-3 w-full">
                             {globalFilters.map((dataFilter, idx) => (
                                 <Card
@@ -324,8 +260,8 @@ export default function DataFilters({ params }: { params: { teamId: string } })
 
                     <div className="py-8" />
 
-                    {/* Override Filters Section - Hidden during edit mode */}
-                    {pageState.editingFilterType === null && pageState.editingFilter === null && (
+                    {/* Override Filters Section */}
+                    {(
                         overrideFilters.length === 0 ? (
                             <div className="w-full py-12 text-center">
                                 <p className="text-gray-500 text-sm">
@@ -355,7 +291,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                                         {overrideFilters.map((dataFilter, idx) => (
                                             <TableRow
                                                 key={`${idx}-${dataFilter.id}`}
-                                                className="font-body cursor-pointer hover:bg-gray-50"
+                                                className="font-body cursor-pointer hover:bg-yellow-200 focus-visible:border-yellow-200 select-none"
                                                 onClick={() => handleEditFilter(dataFilter)}
                                             >
                                                 <TableCell className="w-[60%] p-4">
diff --git a/frontend/dashboard/app/[teamId]/data_filters/trace/[filterId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data_filters/trace/[filterId]/edit/page.tsx
new file mode 100644
index 000000000..e6e64ae04
--- /dev/null
+++ b/frontend/dashboard/app/[teamId]/data_filters/trace/[filterId]/edit/page.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { useRouter } from 'next/navigation'
+import { Button } from '@/app/components/button'
+import { Card, CardContent, CardFooter } from '@/app/components/card'
+
+export default function EditTraceFilter({ params }: { params: { teamId: string, filterId: string } }) {
+    const router = useRouter()
+
+    const handleCancel = () => {
+        router.push(`/${params.teamId}/data_filters`)
+    }
+
+    const handleSave = () => {
+        // TODO: Implement save logic
+        router.push(`/${params.teamId}/data_filters`)
+    }
+
+    return (
+        <div className="flex flex-col selection:bg-yellow-200/75 items-start">
+            <p className="font-display text-4xl max-w-6xl text-center">Edit Trace Filter</p>
+            <div className="py-4" />
+
+            <Card className="w-full">
+                <CardContent className="pt-6">
+                    <div className="mb-6">
+                        {/* TODO: Add form fields */}
+                    </div>
+                </CardContent>
+
+                <CardFooter className="flex justify-end gap-3">
+                    <Button
+                        variant="outline"
+                        onClick={handleCancel}
+                        className="font-display"
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        variant="outline"
+                        onClick={handleSave}
+                        className="font-display border border-black"
+                    >
+                        Save Changes
+                    </Button>
+                </CardFooter>
+            </Card>
+        </div>
+    )
+}
diff --git a/frontend/dashboard/app/[teamId]/data_filters/trace/create/page.tsx b/frontend/dashboard/app/[teamId]/data_filters/trace/create/page.tsx
new file mode 100644
index 000000000..663ffb23a
--- /dev/null
+++ b/frontend/dashboard/app/[teamId]/data_filters/trace/create/page.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { useRouter } from 'next/navigation'
+import { Button } from '@/app/components/button'
+import { Card, CardContent, CardFooter } from '@/app/components/card'
+
+export default function CreateTraceFilter({ params }: { params: { teamId: string } }) {
+    const router = useRouter()
+
+    const handleCancel = () => {
+        router.push(`/${params.teamId}/data_filters`)
+    }
+
+    const handleCreate = () => {
+        // TODO: Implement create logic
+        router.push(`/${params.teamId}/data_filters`)
+    }
+
+    return (
+        <div className="flex flex-col selection:bg-yellow-200/75 items-start">
+            <p className="font-display text-4xl max-w-6xl text-center">Create Trace Filter</p>
+            <div className="py-4" />
+
+            <Card className="w-full">
+                <CardContent className="pt-6">
+                    <div className="mb-6">
+                        {/* TODO: Add form fields */}
+                    </div>
+                </CardContent>
+
+                <CardFooter className="flex justify-end gap-3">
+                    <Button
+                        variant="outline"
+                        onClick={handleCancel}
+                        className="font-display"
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        variant="outline"
+                        onClick={handleCreate}
+                        className="font-display border border-black"
+                    >
+                        Create Filter
+                    </Button>
+                </CardFooter>
+            </Card>
+        </div>
+    )
+}
diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index 507212209..b2290f67f 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -1039,6 +1039,15 @@ export type DataFiltersResponse = {
   results: DataFilter[],
 }
 
+export type DataFilterType = "event" | "trace" | "all_events" | "all_traces";
+
+export type DataFilterCollectionConfig =
+  | { mode: 'sample_rate'; sample_rate: number }
+  | { mode: 'timeline_only' }
+  | { mode: 'disable' };
+
+export type DataFilterAttachmentConfig = 'layout_snapshot' | 'screenshot' | 'none';
+
 export type DataFilter = {
   id: string,
   type: DataFilterType,
@@ -1051,14 +1060,6 @@ export type DataFilter = {
   updated_by: string,
 }
 
-export type DataFilterType = "event" | "trace" | "all_events" | "all_traces";
-export type DataFilterCollectionConfig =
-  | { mode: 'sample_rate'; sample_rate: number }
-  | { mode: 'timeline_only' }
-  | { mode: 'disable' };
-
-export type DataFilterAttachmentConfig = 'layout_snapshot' | 'screenshot' | 'none';
-
 export const emptyDataFiltersResponse: DataFiltersResponse = {
   meta: {
     next: false,

From ce526759e767176d439403f7ae527742a05b44ab Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 13:44:58 +0530
Subject: [PATCH 13/98] feat(frontend): revamp UI to match rest of the app

---
 .../event/[filterId]/edit/page.tsx            |   0
 .../event/create/page.tsx                     |   0
 .../[teamId]/{data_filters => data}/page.tsx  | 245 +++++++++++-------
 .../trace/[filterId]/edit/page.tsx            |   0
 .../trace/create/page.tsx                     |   0
 frontend/dashboard/app/[teamId]/layout.tsx    |   4 +-
 frontend/dashboard/app/api/api_calls.ts       |  94 +++----
 7 files changed, 196 insertions(+), 147 deletions(-)
 rename frontend/dashboard/app/[teamId]/{data_filters => data}/event/[filterId]/edit/page.tsx (100%)
 rename frontend/dashboard/app/[teamId]/{data_filters => data}/event/create/page.tsx (100%)
 rename frontend/dashboard/app/[teamId]/{data_filters => data}/page.tsx (61%)
 rename frontend/dashboard/app/[teamId]/{data_filters => data}/trace/[filterId]/edit/page.tsx (100%)
 rename frontend/dashboard/app/[teamId]/{data_filters => data}/trace/create/page.tsx (100%)

diff --git a/frontend/dashboard/app/[teamId]/data_filters/event/[filterId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/event/[filterId]/edit/page.tsx
similarity index 100%
rename from frontend/dashboard/app/[teamId]/data_filters/event/[filterId]/edit/page.tsx
rename to frontend/dashboard/app/[teamId]/data/event/[filterId]/edit/page.tsx
diff --git a/frontend/dashboard/app/[teamId]/data_filters/event/create/page.tsx b/frontend/dashboard/app/[teamId]/data/event/create/page.tsx
similarity index 100%
rename from frontend/dashboard/app/[teamId]/data_filters/event/create/page.tsx
rename to frontend/dashboard/app/[teamId]/data/event/create/page.tsx
diff --git a/frontend/dashboard/app/[teamId]/data_filters/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
similarity index 61%
rename from frontend/dashboard/app/[teamId]/data_filters/page.tsx
rename to frontend/dashboard/app/[teamId]/data/page.tsx
index ddcca3a3d..488231eaa 100644
--- a/frontend/dashboard/app/[teamId]/data_filters/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -11,9 +11,8 @@ import { useRouter, useSearchParams } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { Button } from '@/app/components/button'
 import { Plus, Pencil } from 'lucide-react'
-import { Card, CardContent } from '@/app/components/card'
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/app/components/dialog'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/app/components/dropdown_menu'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/app/components/dialog'
 import SamplingRateInput from '@/app/components/data_filters/sampling_rate_input'
 
 interface PageState {
@@ -46,7 +45,7 @@ const getFilterDisplayText = (type: DataFilterType, filter: string): string => {
 const getCollectionConfigDisplay = (collectionConfig: DataFilterCollectionConfig): string => {
     switch (collectionConfig.mode) {
         case 'sample_rate':
-            return `Collect at ${collectionConfig.sample_rate}% sample rate`
+            return `Collect all at ${collectionConfig.sample_rate}% sample rate`
         case 'timeline_only':
             return 'Collect with session timeline only'
         case 'disable':
@@ -131,10 +130,18 @@ export default function DataFilters({ params }: { params: { teamId: string } })
     }, [pageState.filters])
 
     const globalFilters = pageState.dataFilters.results.filter(df => isGlobalFilter(df.type))
+    const allEventsFilter = globalFilters.find(df => df.type === 'all_events')
+    const allTracesFilter = globalFilters.find(df => df.type === 'all_traces')
     const overrideFilters = pageState.dataFilters.results.filter(df => !isGlobalFilter(df.type))
+    const eventFilters = overrideFilters.filter(df => df.type === 'event')
+    const traceFilters = overrideFilters.filter(df => df.type === 'trace')
+
+    const handleEditFilter = (dataFilter: typeof overrideFilters[0]) => {
+        const filterType = dataFilter.type === 'event' ? 'event' : 'trace'
+        router.push(`/${params.teamId}/data/${filterType}/${dataFilter.id}/edit`)
+    }
 
-    const handleEditGlobalFilter = (dataFilter: typeof globalFilters[0], e: React.MouseEvent) => {
-        e.stopPropagation()
+    const handleEditGlobalFilter = (dataFilter: typeof globalFilters[0]) => {
         updatePageState({
             editingGlobalFilter: {
                 id: dataFilter.id,
@@ -154,16 +161,11 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         updatePageState({ editingGlobalFilter: null })
     }
 
-    const handleEditFilter = (dataFilter: typeof overrideFilters[0]) => {
-        const filterType = dataFilter.type === 'event' ? 'event' : 'trace'
-        router.push(`/${params.teamId}/data_filters/${filterType}/${dataFilter.id}/edit`)
-    }
-
     return (
         <div className="flex flex-col selection:bg-yellow-200/75 items-start">
 
             <div className="flex flex-row items-center gap-2 justify-between w-full">
-                <p className="font-display text-4xl max-w-6xl text-center">Data Filters</p>
+                <p className="font-display text-4xl max-w-6xl text-center">Data Control</p>
                 <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                         <Button
@@ -171,15 +173,15 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                             className="font-display border border-black select-none"
                             disabled={pageState.dataFiltersApiStatus === DataFiltersApiStatus.Loading}
                         >
-                            <Plus /> Create Filter
+                            <Plus /> Create Rule
                         </Button>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent align="end">
-                        <DropdownMenuItem onClick={() => router.push(`/${params.teamId}/data_filters/event/create`)}>
-                            Event Filter
+                        <DropdownMenuItem onClick={() => router.push(`/${params.teamId}/data/event/create`)}>
+                            Event Rule
                         </DropdownMenuItem>
-                        <DropdownMenuItem onClick={() => router.push(`/${params.teamId}/data_filters/trace/create`)}>
-                            Trace Filter
+                        <DropdownMenuItem onClick={() => router.push(`/${params.teamId}/data/trace/create`)}>
+                            Trace Rule
                         </DropdownMenuItem>
                     </DropdownMenuContent>
                 </DropdownMenu>
@@ -224,98 +226,141 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         <LoadingBar />
                     </div>
 
-                    {/* Global Filters Section */}
-                    {globalFilters.length > 0 && (
-                        <div className="flex flex-col gap-3 w-full">
-                            {globalFilters.map((dataFilter, idx) => (
-                                <Card
-                                    key={`${idx}-${dataFilter.id}`}
-                                    className={`w-full ${dataFilter.type === 'all_events' ? 'bg-blue-100' : 'bg-purple-100'}`}
+                    {/* Event Filters Section */}
+                    <div className="w-full">
+                        <p className="font-display text-2xl">Event Rules</p>
+                        <div className="py-4" />
+
+                        {/* Default Event Filter */}
+                        <div className="flex items-center gap-2">
+                            <p className="font-display text-gray-500">Default Rule</p>
+                            {allEventsFilter && (
+                                <button
+                                    onClick={() => handleEditGlobalFilter(allEventsFilter)}
+                                    className="p-1 hover:bg-yellow-200 rounded"
                                 >
-                                    <CardContent className="p-4">
-                                        <div className="flex flex-row items-center justify-between">
-                                            <div className="flex-1">
-                                                <p className='select-none text-base font-display mb-1'>{getFilterDisplayText(dataFilter.type, dataFilter.filter)}</p>
-                                                <p className='text-xs text-gray-700 select-none'>{getCollectionConfigDisplay(dataFilter.collection_config)}{getAttachmentConfigDisplay(dataFilter.attachment_config) && ` • ${getAttachmentConfigDisplay(dataFilter.attachment_config)}`}</p>
-                                            </div>
-                                            <div className="flex items-center gap-4 ml-6">
-                                                <div className="flex items-center gap-4 text-xs text-gray-600">
-                                                    <span className='select-none'>{formatDateToHumanReadableDate(dataFilter.updated_at)} at {formatDateToHumanReadableTime(dataFilter.updated_at)}</span>
-                                                    <span className='select-none'>•</span>
-                                                    <span className='select-none'>{dataFilter.updated_by}</span>
-                                                </div>
-                                                <button
-                                                    onClick={(e) => handleEditGlobalFilter(dataFilter, e)}
-                                                    className="p-2 hover:bg-gray-200 rounded"
-                                                >
-                                                    <Pencil className="w-4 h-4 text-gray-600" />
-                                                </button>
-                                            </div>
-                                        </div>
-                                    </CardContent>
-                                </Card>
-                            ))}
+                                    <Pencil className="w-4 h-4 text-gray-600" />
+                                </button>
+                            )}
                         </div>
-                    )}
-
-                    <div className="py-8" />
-
-                    {/* Override Filters Section */}
-                    {(
-                        overrideFilters.length === 0 ? (
-                            <div className="w-full py-12 text-center">
-                                <p className="text-gray-500 text-sm">
-                                    Click "Create Filter" to override the global filter settings for any event or trace
-                                </p>
+                        <div className="py-2" />
+                        {allEventsFilter && (
+                            <div className="text-sm font-body text-gray-700">
+                                {getCollectionConfigDisplay(allEventsFilter.collection_config)}
                             </div>
-                        ) : (
-                            <div className="w-full">
-                                <div className="mb-4">
-                                    <p className="font-display text-2xl">Filters</p>
-                                    <p className="text-sm text-gray-600 mt-1">Add filters for events and traces that override global settings</p>
-                                </div>
+                        )}
 
+                        {eventFilters.length > 0 && (
+                            <>
+                                <div className="py-6" />
+                                {/* Event Overrides */}
+                                <p className="font-display text-gray-500">Overrides</p>
                                 <div className="py-2" />
+                                <Table className="font-display">
+                                <TableHeader>
+                                    <TableRow>
+                                        <TableHead className="w-[52%]">Rule</TableHead>
+                                        <TableHead className="w-[24%] text-center">Updated At</TableHead>
+                                        <TableHead className="w-[24%] text-center">Updated By</TableHead>
+                                    </TableRow>
+                                </TableHeader>
+                                <TableBody>
+                                    {eventFilters.map((dataFilter, idx) => (
+                                        <TableRow
+                                            key={`${idx}-${dataFilter.id}`}
+                                            className="font-body cursor-pointer hover:bg-yellow-200 focus-visible:border-yellow-200 select-none"
+                                            onClick={() => handleEditFilter(dataFilter)}
+                                        >
+                                            <TableCell className="w-[60%] p-4">
+                                                <p className='truncate select-none font-mono text-sm'>{getFilterDisplayText(dataFilter.type, dataFilter.filter)}</p>
+                                                <div className='py-1' />
+                                                <p className='text-xs truncate text-gray-500 select-none'>{getCollectionConfigDisplay(dataFilter.collection_config)}</p>
+                                                <p className='text-xs truncate text-gray-500 select-none'>{getAttachmentConfigDisplay(dataFilter.attachment_config)}</p>
+                                            </TableCell>
+                                            <TableCell className="w-[20%] text-center p-4">
+                                                <p className='truncate select-none'>{formatDateToHumanReadableDate(dataFilter.updated_at)}</p>
+                                                <div className='py-1' />
+                                                <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(dataFilter.updated_at)}</p>
+                                            </TableCell>
+                                            <TableCell className="w-[20%] text-center p-4">
+                                                <p className='truncate select-none'>{dataFilter.updated_by}</p>
+                                            </TableCell>
+                                        </TableRow>
+                                    ))}
+                                </TableBody>
+                                </Table>
+                            </>
+                        )}
+                    </div>
+
+                    <div className="py-14" />
+
+                    {/* Trace Filters Section */}
+                    <div className="w-full">
+                        <p className="font-display text-2xl">Trace Rules</p>
+                        <div className="py-4" />
 
-                                <div>
+                        {/* Default Trace Filter */}
+                        <div className="flex items-center gap-2">
+                            <p className="font-display text-gray-500">Default Rule</p>
+                            {allTracesFilter && (
+                                <button
+                                    onClick={() => handleEditGlobalFilter(allTracesFilter)}
+                                    className="p-1 hover:bg-yellow-200 rounded"
+                                >
+                                    <Pencil className="w-4 h-4 text-gray-600" />
+                                </button>
+                            )}
+                        </div>
+                        <div className="py-2" />
+                        {allTracesFilter && (
+                            <div className="text-sm font-body text-gray-700">
+                                {getCollectionConfigDisplay(allTracesFilter.collection_config)}
+                            </div>
+                        )}
 
+                        {traceFilters.length > 0 && (
+                            <>
+                                <div className="py-6" />
+                                {/* Trace Overrides */}
+                                <p className="font-display text-gray-500">Overrides</p>
+                                <div className="py-2" />
                                 <Table className="font-display">
-                                    <TableHeader>
-                                        <TableRow>
-                                            <TableHead className="w-[52%]">Filter</TableHead>
-                                            <TableHead className="w-[24%] text-center">Updated At</TableHead>
-                                            <TableHead className="w-[24%] text-center">Updated By</TableHead>
+                                <TableHeader>
+                                    <TableRow>
+                                        <TableHead className="w-[52%]">Rule</TableHead>
+                                        <TableHead className="w-[24%] text-center">Updated At</TableHead>
+                                        <TableHead className="w-[24%] text-center">Updated By</TableHead>
+                                    </TableRow>
+                                </TableHeader>
+                                <TableBody>
+                                    {traceFilters.map((dataFilter, idx) => (
+                                        <TableRow
+                                            key={`${idx}-${dataFilter.id}`}
+                                            className="font-body cursor-pointer hover:bg-yellow-200 focus-visible:border-yellow-200 select-none"
+                                            onClick={() => handleEditFilter(dataFilter)}
+                                        >
+                                            <TableCell className="w-[60%] p-4">
+                                                <p className='truncate select-none font-mono text-sm'>{getFilterDisplayText(dataFilter.type, dataFilter.filter)}</p>
+                                                <div className='py-1' />
+                                                <p className='text-xs truncate text-gray-500 select-none'>{getCollectionConfigDisplay(dataFilter.collection_config)}</p>
+                                                <p className='text-xs truncate text-gray-500 select-none'>{getAttachmentConfigDisplay(dataFilter.attachment_config)}</p>
+                                            </TableCell>
+                                            <TableCell className="w-[20%] text-center p-4">
+                                                <p className='truncate select-none'>{formatDateToHumanReadableDate(dataFilter.updated_at)}</p>
+                                                <div className='py-1' />
+                                                <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(dataFilter.updated_at)}</p>
+                                            </TableCell>
+                                            <TableCell className="w-[20%] text-center p-4">
+                                                <p className='truncate select-none'>{dataFilter.updated_by}</p>
+                                            </TableCell>
                                         </TableRow>
-                                    </TableHeader>
-                                    <TableBody>
-                                        {overrideFilters.map((dataFilter, idx) => (
-                                            <TableRow
-                                                key={`${idx}-${dataFilter.id}`}
-                                                className="font-body cursor-pointer hover:bg-yellow-200 focus-visible:border-yellow-200 select-none"
-                                                onClick={() => handleEditFilter(dataFilter)}
-                                            >
-                                                <TableCell className="w-[60%] p-4">
-                                                    <p className='truncate select-none font-mono text-sm'>{getFilterDisplayText(dataFilter.type, dataFilter.filter)}</p>
-                                                    <div className='py-1' />
-                                                    <p className='text-xs truncate text-gray-500 select-none'>{getCollectionConfigDisplay(dataFilter.collection_config)}</p>
-                                                    <p className='text-xs truncate text-gray-500 select-none'>{getAttachmentConfigDisplay(dataFilter.attachment_config)}</p>
-                                                </TableCell>
-                                                <TableCell className="w-[20%] text-center p-4">
-                                                    <p className='truncate select-none'>{formatDateToHumanReadableDate(dataFilter.updated_at)}</p>
-                                                    <div className='py-1' />
-                                                    <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(dataFilter.updated_at)}</p>
-                                                </TableCell>
-                                                <TableCell className="w-[20%] text-center p-4">
-                                                    <p className='truncate select-none'>{dataFilter.updated_by}</p>
-                                                </TableCell>
-                                            </TableRow>
-                                        ))}
-                                    </TableBody>
+                                    ))}
+                                </TableBody>
                                 </Table>
-                                </div>
-                            </div>
-                        )
-                    )}
+                            </>
+                        )}
+                    </div>
                 </div>}
 
             {/* Global Filter Edit Dialog */}
@@ -323,7 +368,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                 <DialogContent className="font-display">
                     <DialogHeader>
                         <DialogTitle className="font-display text-2xl">
-                            Edit {pageState.editingGlobalFilter?.type === 'all_events' ? 'Events' : 'Traces'} Filter
+                            Edit Default {pageState.editingGlobalFilter?.type === 'all_events' ? 'Events' : 'Traces'} Rule
                         </DialogTitle>
                     </DialogHeader>
 
@@ -387,7 +432,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                                 })}
                                 className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
                             />
-                            <span className="text-sm font-body">Collect no {pageState.editingGlobalFilter?.type === 'all_events' ? 'events' : 'traces'}</span>
+                            <span className="text-sm font-body">Collect no {pageState.editingGlobalFilter?.type === 'all_events' ? 'events' : 'traces'} by default</span>
                         </label>
                     </div>
 
diff --git a/frontend/dashboard/app/[teamId]/data_filters/trace/[filterId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/trace/[filterId]/edit/page.tsx
similarity index 100%
rename from frontend/dashboard/app/[teamId]/data_filters/trace/[filterId]/edit/page.tsx
rename to frontend/dashboard/app/[teamId]/data/trace/[filterId]/edit/page.tsx
diff --git a/frontend/dashboard/app/[teamId]/data_filters/trace/create/page.tsx b/frontend/dashboard/app/[teamId]/data/trace/create/page.tsx
similarity index 100%
rename from frontend/dashboard/app/[teamId]/data_filters/trace/create/page.tsx
rename to frontend/dashboard/app/[teamId]/data/trace/create/page.tsx
diff --git a/frontend/dashboard/app/[teamId]/layout.tsx b/frontend/dashboard/app/[teamId]/layout.tsx
index ce5230f6e..cc8eb59ce 100644
--- a/frontend/dashboard/app/[teamId]/layout.tsx
+++ b/frontend/dashboard/app/[teamId]/layout.tsx
@@ -92,8 +92,8 @@ const initNavData = {
       title: "Settings",
       items: [
         {
-          title: "Data Filters",
-          url: "data_filters",
+          title: "Data",
+          url: "data",
           isActive: false,
           external: false,
         },
diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index b2290f67f..3c10e0a69 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -1099,50 +1099,50 @@ export const emptyDataFiltersResponse: DataFiltersResponse = {
       updated_at: "2024-02-20T14:45:00Z",
       updated_by: "user2@example.com",
     },
-    // {
-    //   id: "df-002",
-    //   type: "trace",
-    //   filter: "trace.duration > 5000 && trace.status == 'error'",
-    //   collection_config: { mode: 'timeline_only' },
-    //   attachment_config: 'layout_snapshot',
-    //   created_at: "2024-01-20T08:15:00Z",
-    //   created_by: "admin@example.com",
-    //   updated_at: "2024-01-20T08:15:00Z",
-    //   updated_by: "admin@example.com",
-    // },
-    // {
-    //   id: "df-003",
-    //   type: "event",
-    //   filter: "event.name == 'app_background' && session.is_crash == true",
-    //   collection_config: { mode: 'disable' },
-    //   attachment_config: null,
-    //   created_at: "2024-02-01T12:00:00Z",
-    //   created_by: "developer@example.com",
-    //   updated_at: "2024-03-10T09:30:00Z",
-    //   updated_by: "lead@example.com",
-    // },
-    // {
-    //   id: "df-004",
-    //   type: "trace",
-    //   filter: "trace.name == 'network_request' && trace.http.status_code >= 400",
-    //   collection_config: { mode: 'sample_rate', sample_rate: 0.25 },
-    //   attachment_config: 'none',
-    //   created_at: "2024-02-10T16:20:00Z",
-    //   created_by: "qa@example.com",
-    //   updated_at: "2024-02-28T11:15:00Z",
-    //   updated_by: "qa@example.com",
-    // },
-    // {
-    //   id: "df-005",
-    //   type: "event",
-    //   filter: "event.type == 'gesture' && device.manufacturer == 'Samsung'",
-    //   collection_config: { mode: 'sample_rate', sample_rate: 1.0 },
-    //   attachment_config: 'screenshot',
-    //   created_at: "2024-03-05T13:45:00Z",
-    //   created_by: "user3@example.com",
-    //   updated_at: "2024-03-05T13:45:00Z",
-    //   updated_by: "user3@example.com",
-    // },
+    {
+      id: "df-002",
+      type: "trace",
+      filter: "trace.duration > 5000 && trace.status == 'error'",
+      collection_config: { mode: 'timeline_only' },
+      attachment_config: 'layout_snapshot',
+      created_at: "2024-01-20T08:15:00Z",
+      created_by: "admin@example.com",
+      updated_at: "2024-01-20T08:15:00Z",
+      updated_by: "admin@example.com",
+    },
+    {
+      id: "df-003",
+      type: "event",
+      filter: "event.name == 'app_background' && session.is_crash == true",
+      collection_config: { mode: 'disable' },
+      attachment_config: null,
+      created_at: "2024-02-01T12:00:00Z",
+      created_by: "developer@example.com",
+      updated_at: "2024-03-10T09:30:00Z",
+      updated_by: "lead@example.com",
+    },
+    {
+      id: "df-004",
+      type: "trace",
+      filter: "trace.name == 'network_request' && trace.http.status_code >= 400",
+      collection_config: { mode: 'sample_rate', sample_rate: 0.25 },
+      attachment_config: 'none',
+      created_at: "2024-02-10T16:20:00Z",
+      created_by: "qa@example.com",
+      updated_at: "2024-02-28T11:15:00Z",
+      updated_by: "qa@example.com",
+    },
+    {
+      id: "df-005",
+      type: "event",
+      filter: "event.type == 'gesture' && device.manufacturer == 'Samsung'",
+      collection_config: { mode: 'sample_rate', sample_rate: 1.0 },
+      attachment_config: 'screenshot',
+      created_at: "2024-03-05T13:45:00Z",
+      created_by: "user3@example.com",
+      updated_at: "2024-03-05T13:45:00Z",
+      updated_by: "user3@example.com",
+    },
   ],
 }
 
@@ -2483,8 +2483,12 @@ export const fetchAlertsOverviewFromServer = async (
 
 export const fetchDataFiltersFromServer = async (
   appId: String,
+  type?: string,
 ) => {
-  const url = `/api/apps/${appId}/data_filters`
+  let url = `/api/apps/${appId}/dataFilters`
+  if (type) {
+    url += `?type=${type}`
+  }
 
   try {
     const res = await measureAuth.fetchMeasure(url)

From 71777b176b8148d7454ead0907b53759bff7d622 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 13:58:39 +0530
Subject: [PATCH 14/98] feat(frontend): refactor default rule dialog

---
 frontend/dashboard/app/[teamId]/data/page.tsx | 157 ++++--------------
 .../data/edit_default_rule_dialog.tsx         | 114 +++++++++++++
 .../rule_builder_card.tsx                     |   0
 .../sampling_rate_input.tsx                   |   0
 4 files changed, 147 insertions(+), 124 deletions(-)
 create mode 100644 frontend/dashboard/app/components/data/edit_default_rule_dialog.tsx
 rename frontend/dashboard/app/components/{data_filters => data}/rule_builder_card.tsx (100%)
 rename frontend/dashboard/app/components/{data_filters => data}/sampling_rate_input.tsx (100%)

diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index 488231eaa..a2e36c57f 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -12,22 +12,16 @@ import { useEffect, useState } from 'react'
 import { Button } from '@/app/components/button'
 import { Plus, Pencil } from 'lucide-react'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/app/components/dropdown_menu'
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/app/components/dialog'
-import SamplingRateInput from '@/app/components/data_filters/sampling_rate_input'
+import EditDefaultRuleDialog, { DefaultRuleState } from '@/app/components/data/edit_default_rule_dialog'
 
 interface PageState {
     dataFiltersApiStatus: DataFiltersApiStatus
     filters: typeof defaultFilters
     dataFilters: DataFiltersResponse
-    editingGlobalFilter: {
-        id: string
-        type: DataFilterType
-        collectionMode: DataFilterCollectionConfig['mode']
-        sampleRate?: number
-    } | null
+    defaultRuleEditState: DefaultRuleState | null
 }
 
-const isGlobalFilter = (type: DataFilterType): boolean => {
+const isDefaultRule = (type: DataFilterType): boolean => {
     return type === 'all_events' || type === 'all_traces'
 }
 
@@ -68,13 +62,12 @@ const getAttachmentConfigDisplay = (attachmentConfig: DataFilterAttachmentConfig
 
 export default function DataFilters({ params }: { params: { teamId: string } }) {
     const router = useRouter()
-    const searchParams = useSearchParams()
 
     const initialState: PageState = {
         dataFiltersApiStatus: DataFiltersApiStatus.Success,
         filters: defaultFilters,
         dataFilters: emptyDataFiltersResponse,
-        editingGlobalFilter: null,
+        defaultRuleEditState: null,
     }
 
     const [pageState, setPageState] = useState<PageState>(initialState)
@@ -129,10 +122,10 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         // getDataFilters()
     }, [pageState.filters])
 
-    const globalFilters = pageState.dataFilters.results.filter(df => isGlobalFilter(df.type))
-    const allEventsFilter = globalFilters.find(df => df.type === 'all_events')
-    const allTracesFilter = globalFilters.find(df => df.type === 'all_traces')
-    const overrideFilters = pageState.dataFilters.results.filter(df => !isGlobalFilter(df.type))
+    const defaultRules = pageState.dataFilters.results.filter(df => isDefaultRule(df.type))
+    const allEventsFilter = defaultRules.find(df => df.type === 'all_events')
+    const allTracesFilter = defaultRules.find(df => df.type === 'all_traces')
+    const overrideFilters = pageState.dataFilters.results.filter(df => !isDefaultRule(df.type))
     const eventFilters = overrideFilters.filter(df => df.type === 'event')
     const traceFilters = overrideFilters.filter(df => df.type === 'trace')
 
@@ -141,9 +134,9 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         router.push(`/${params.teamId}/data/${filterType}/${dataFilter.id}/edit`)
     }
 
-    const handleEditGlobalFilter = (dataFilter: typeof globalFilters[0]) => {
+    const handleEditDefaultRule = (dataFilter: typeof defaultRules[0]) => {
         updatePageState({
-            editingGlobalFilter: {
+            defaultRuleEditState: {
                 id: dataFilter.id,
                 type: dataFilter.type,
                 collectionMode: dataFilter.collection_config.mode,
@@ -152,18 +145,16 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         })
     }
 
-    const handleSaveGlobalFilter = () => {
-        // TODO: Implement save logic
-        updatePageState({ editingGlobalFilter: null })
+    const handleSaveDefaultRule = () => {
+        updatePageState({ defaultRuleEditState: null })
     }
 
-    const handleCancelGlobalFilter = () => {
-        updatePageState({ editingGlobalFilter: null })
+    const handleCancelDefaultRule = () => {
+        updatePageState({ defaultRuleEditState: null })
     }
 
     return (
         <div className="flex flex-col selection:bg-yellow-200/75 items-start">
-
             <div className="flex flex-row items-center gap-2 justify-between w-full">
                 <p className="font-display text-4xl max-w-6xl text-center">Data Control</p>
                 <DropdownMenu>
@@ -211,14 +202,15 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                 showFreeText={false}
                 freeTextPlaceholder={""}
                 onFiltersChanged={handleFiltersChanged} />
-            <div className="py-4" />
 
-            {/* Error state for data filters fetch */}
+            <div className="py-2" />
+
+            {/* Error state for data rules fetch */}
             {pageState.filters.ready
                 && pageState.dataFiltersApiStatus === DataFiltersApiStatus.Error
                 && <p className="text-lg font-display">Error fetching data filters, please change filters, refresh page or select a different app to try again</p>}
 
-            {/* Main data filters UI */}
+            {/* Main data rules UI */}
             {pageState.filters.ready
                 && (pageState.dataFiltersApiStatus === DataFiltersApiStatus.Success || pageState.dataFiltersApiStatus === DataFiltersApiStatus.Loading) &&
                 <div className="flex flex-col items-start w-full">
@@ -226,17 +218,17 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         <LoadingBar />
                     </div>
 
-                    {/* Event Filters Section */}
+                    {/* Event Rules Section */}
                     <div className="w-full">
                         <p className="font-display text-2xl">Event Rules</p>
                         <div className="py-4" />
 
-                        {/* Default Event Filter */}
+                        {/* Default Event Rule */}
                         <div className="flex items-center gap-2">
                             <p className="font-display text-gray-500">Default Rule</p>
                             {allEventsFilter && (
                                 <button
-                                    onClick={() => handleEditGlobalFilter(allEventsFilter)}
+                                    onClick={() => handleEditDefaultRule(allEventsFilter)}
                                     className="p-1 hover:bg-yellow-200 rounded"
                                 >
                                     <Pencil className="w-4 h-4 text-gray-600" />
@@ -293,19 +285,19 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         )}
                     </div>
 
-                    <div className="py-14" />
+                    <div className="py-12" />
 
-                    {/* Trace Filters Section */}
+                    {/* Trace Rules Section */}
                     <div className="w-full">
                         <p className="font-display text-2xl">Trace Rules</p>
                         <div className="py-4" />
 
-                        {/* Default Trace Filter */}
+                        {/* Default Trace Rule */}
                         <div className="flex items-center gap-2">
                             <p className="font-display text-gray-500">Default Rule</p>
                             {allTracesFilter && (
                                 <button
-                                    onClick={() => handleEditGlobalFilter(allTracesFilter)}
+                                    onClick={() => handleEditDefaultRule(allTracesFilter)}
                                     className="p-1 hover:bg-yellow-200 rounded"
                                 >
                                     <Pencil className="w-4 h-4 text-gray-600" />
@@ -363,97 +355,14 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                     </div>
                 </div>}
 
-            {/* Global Filter Edit Dialog */}
-            <Dialog open={pageState.editingGlobalFilter !== null} onOpenChange={(open) => !open && handleCancelGlobalFilter()}>
-                <DialogContent className="font-display">
-                    <DialogHeader>
-                        <DialogTitle className="font-display text-2xl">
-                            Edit Default {pageState.editingGlobalFilter?.type === 'all_events' ? 'Events' : 'Traces'} Rule
-                        </DialogTitle>
-                    </DialogHeader>
-
-                    <div className="space-y-3 py-4">
-                        <label className="flex items-center gap-3 cursor-pointer h-10">
-                            <input
-                                type="radio"
-                                name="collectionMode"
-                                value="sample_rate"
-                                checked={pageState.editingGlobalFilter?.collectionMode === 'sample_rate'}
-                                onChange={(e) => updatePageState({
-                                    editingGlobalFilter: pageState.editingGlobalFilter ? {
-                                        ...pageState.editingGlobalFilter,
-                                        collectionMode: 'sample_rate',
-                                        sampleRate: pageState.editingGlobalFilter.sampleRate || 100
-                                    } : null
-                                })}
-                                className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                            />
-                            <SamplingRateInput
-                                value={pageState.editingGlobalFilter?.sampleRate || 100}
-                                onChange={(value) => updatePageState({
-                                    editingGlobalFilter: pageState.editingGlobalFilter ? {
-                                        ...pageState.editingGlobalFilter,
-                                        collectionMode: 'sample_rate',
-                                        sampleRate: value
-                                    } : null
-                                })}
-                                disabled={pageState.editingGlobalFilter?.collectionMode !== 'sample_rate'}
-                            />
-                        </label>
-
-                        <label className="flex items-center gap-3 cursor-pointer h-10">
-                            <input
-                                type="radio"
-                                name="collectionMode"
-                                value="timeline_only"
-                                checked={pageState.editingGlobalFilter?.collectionMode === 'timeline_only'}
-                                onChange={(e) => updatePageState({
-                                    editingGlobalFilter: pageState.editingGlobalFilter ? {
-                                        ...pageState.editingGlobalFilter,
-                                        collectionMode: 'timeline_only'
-                                    } : null
-                                })}
-                                className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                            />
-                            <span className="text-sm font-body">Collect with session timeline only</span>
-                        </label>
-
-                        <label className="flex items-center gap-3 cursor-pointer h-10">
-                            <input
-                                type="radio"
-                                name="collectionMode"
-                                value="disable"
-                                checked={pageState.editingGlobalFilter?.collectionMode === 'disable'}
-                                onChange={(e) => updatePageState({
-                                    editingGlobalFilter: pageState.editingGlobalFilter ? {
-                                        ...pageState.editingGlobalFilter,
-                                        collectionMode: 'disable'
-                                    } : null
-                                })}
-                                className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                            />
-                            <span className="text-sm font-body">Collect no {pageState.editingGlobalFilter?.type === 'all_events' ? 'events' : 'traces'} by default</span>
-                        </label>
-                    </div>
-
-                    <DialogFooter>
-                        <Button
-                            variant="outline"
-                            onClick={handleCancelGlobalFilter}
-                            className="font-display"
-                        >
-                            Cancel
-                        </Button>
-                        <Button
-                            variant="outline"
-                            onClick={handleSaveGlobalFilter}
-                            className="font-display border border-black"
-                        >
-                            Confirm
-                        </Button>
-                    </DialogFooter>
-                </DialogContent>
-            </Dialog>
+            {/* Default Rule Edit Dialog */}
+            <EditDefaultRuleDialog
+                isOpen={pageState.defaultRuleEditState !== null}
+                defaultRule={pageState.defaultRuleEditState}
+                onClose={handleCancelDefaultRule}
+                onSave={handleSaveDefaultRule}
+                onUpdate={(updatedRule) => updatePageState({ defaultRuleEditState: updatedRule })}
+            />
         </div>
     )
 }
diff --git a/frontend/dashboard/app/components/data/edit_default_rule_dialog.tsx b/frontend/dashboard/app/components/data/edit_default_rule_dialog.tsx
new file mode 100644
index 000000000..464fa9e11
--- /dev/null
+++ b/frontend/dashboard/app/components/data/edit_default_rule_dialog.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import { DataFilterCollectionConfig, DataFilterType } from '@/app/api/api_calls'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/app/components/dialog'
+import { Button } from '@/app/components/button'
+import SamplingRateInput from '@/app/components/data/sampling_rate_input'
+
+export interface DefaultRuleState {
+    id: string
+    type: DataFilterType
+    collectionMode: DataFilterCollectionConfig['mode']
+    sampleRate?: number
+}
+
+interface EditDefaultRuleDialogProps {
+    isOpen: boolean
+    defaultRule: DefaultRuleState | null
+    onClose: () => void
+    onSave: () => void
+    onUpdate: (updatedRule: DefaultRuleState) => void
+}
+
+export default function EditDefaultRuleDialog({
+    isOpen,
+    defaultRule,
+    onClose,
+    onSave,
+    onUpdate
+}: EditDefaultRuleDialogProps) {
+    return (
+        <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+            <DialogContent className="font-display">
+                <DialogHeader>
+                    <DialogTitle className="font-display text-2xl">
+                        Edit Default {defaultRule?.type === 'all_events' ? 'Events' : 'Traces'} Rule
+                    </DialogTitle>
+                </DialogHeader>
+
+                <div className="space-y-3 py-4">
+                    <label className="flex items-center gap-3 cursor-pointer h-10">
+                        <input
+                            type="radio"
+                            name="collectionMode"
+                            value="sample_rate"
+                            checked={defaultRule?.collectionMode === 'sample_rate'}
+                            onChange={(e) => defaultRule && onUpdate({
+                                ...defaultRule,
+                                collectionMode: 'sample_rate',
+                                sampleRate: defaultRule.sampleRate || 100
+                            })}
+                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                        />
+                        <SamplingRateInput
+                            value={defaultRule?.sampleRate || 100}
+                            onChange={(value) => defaultRule && onUpdate({
+                                ...defaultRule,
+                                collectionMode: 'sample_rate',
+                                sampleRate: value
+                            })}
+                            disabled={defaultRule?.collectionMode !== 'sample_rate'}
+                        />
+                    </label>
+
+                    <label className="flex items-center gap-3 cursor-pointer h-10">
+                        <input
+                            type="radio"
+                            name="collectionMode"
+                            value="timeline_only"
+                            checked={defaultRule?.collectionMode === 'timeline_only'}
+                            onChange={(e) => defaultRule && onUpdate({
+                                ...defaultRule,
+                                collectionMode: 'timeline_only'
+                            })}
+                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                        />
+                        <span className="text-sm font-body">Collect with session timeline only</span>
+                    </label>
+
+                    <label className="flex items-center gap-3 cursor-pointer h-10">
+                        <input
+                            type="radio"
+                            name="collectionMode"
+                            value="disable"
+                            checked={defaultRule?.collectionMode === 'disable'}
+                            onChange={(e) => defaultRule && onUpdate({
+                                ...defaultRule,
+                                collectionMode: 'disable'
+                            })}
+                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                        />
+                        <span className="text-sm font-body">Collect no {defaultRule?.type === 'all_events' ? 'events' : 'traces'} by default</span>
+                    </label>
+                </div>
+
+                <DialogFooter>
+                    <Button
+                        variant="outline"
+                        onClick={onClose}
+                        className="font-display"
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        variant="outline"
+                        onClick={onSave}
+                        className="font-display border border-black"
+                    >
+                        Confirm
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}
diff --git a/frontend/dashboard/app/components/data_filters/rule_builder_card.tsx b/frontend/dashboard/app/components/data/rule_builder_card.tsx
similarity index 100%
rename from frontend/dashboard/app/components/data_filters/rule_builder_card.tsx
rename to frontend/dashboard/app/components/data/rule_builder_card.tsx
diff --git a/frontend/dashboard/app/components/data_filters/sampling_rate_input.tsx b/frontend/dashboard/app/components/data/sampling_rate_input.tsx
similarity index 100%
rename from frontend/dashboard/app/components/data_filters/sampling_rate_input.tsx
rename to frontend/dashboard/app/components/data/sampling_rate_input.tsx

From 54e7b2ad858c21b67a6ab9779a46bc497247c8cb Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 14:03:31 +0530
Subject: [PATCH 15/98] feat(frontend): refactor tables into reusable component

---
 frontend/dashboard/app/[teamId]/data/page.tsx | 114 +-----------------
 frontend/dashboard/app/api/api_calls.ts       |  16 +--
 .../components/data/rule_overrides_table.tsx  |  94 +++++++++++++++
 3 files changed, 107 insertions(+), 117 deletions(-)
 create mode 100644 frontend/dashboard/app/components/data/rule_overrides_table.tsx

diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index a2e36c57f..7b7d4f94f 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -3,16 +3,14 @@
 import { DataFiltersApiStatus, DataFiltersResponse, emptyDataFiltersResponse, fetchDataFiltersFromServer, FilterSource } from '@/app/api/api_calls'
 import Filters, { AppVersionsInitialSelectionType, defaultFilters } from '@/app/components/filters'
 import LoadingBar from '@/app/components/loading_bar'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/app/components/table'
-
-import { DataFilterAttachmentConfig, DataFilterCollectionConfig, DataFilterType } from '@/app/api/api_calls'
-import { formatDateToHumanReadableDate, formatDateToHumanReadableTime } from '@/app/utils/time_utils'
-import { useRouter, useSearchParams } from 'next/navigation'
+import { DataFilterCollectionConfig, DataFilterType } from '@/app/api/api_calls'
+import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { Button } from '@/app/components/button'
 import { Plus, Pencil } from 'lucide-react'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/app/components/dropdown_menu'
 import EditDefaultRuleDialog, { DefaultRuleState } from '@/app/components/data/edit_default_rule_dialog'
+import RulesTable from '@/app/components/data/rule_overrides_table'
 
 interface PageState {
     dataFiltersApiStatus: DataFiltersApiStatus
@@ -25,17 +23,6 @@ const isDefaultRule = (type: DataFilterType): boolean => {
     return type === 'all_events' || type === 'all_traces'
 }
 
-const getFilterDisplayText = (type: DataFilterType, filter: string): string => {
-    switch (type) {
-        case 'all_events':
-            return 'All Events'
-        case 'all_traces':
-            return 'All Traces'
-        default:
-            return filter
-    }
-}
-
 const getCollectionConfigDisplay = (collectionConfig: DataFilterCollectionConfig): string => {
     switch (collectionConfig.mode) {
         case 'sample_rate':
@@ -49,17 +36,6 @@ const getCollectionConfigDisplay = (collectionConfig: DataFilterCollectionConfig
     }
 }
 
-const getAttachmentConfigDisplay = (attachmentConfig: DataFilterAttachmentConfig | null): string => {
-    if (!attachmentConfig || attachmentConfig === 'none') {
-        return ''
-    } else if (attachmentConfig === 'layout_snapshot') {
-        return 'With layout snapshot'
-    } else if (attachmentConfig === 'screenshot') {
-        return 'With screenshot'
-    }
-    return attachmentConfig
-}
-
 export default function DataFilters({ params }: { params: { teamId: string } }) {
     const router = useRouter()
 
@@ -242,47 +218,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                             </div>
                         )}
 
-                        {eventFilters.length > 0 && (
-                            <>
-                                <div className="py-6" />
-                                {/* Event Overrides */}
-                                <p className="font-display text-gray-500">Overrides</p>
-                                <div className="py-2" />
-                                <Table className="font-display">
-                                <TableHeader>
-                                    <TableRow>
-                                        <TableHead className="w-[52%]">Rule</TableHead>
-                                        <TableHead className="w-[24%] text-center">Updated At</TableHead>
-                                        <TableHead className="w-[24%] text-center">Updated By</TableHead>
-                                    </TableRow>
-                                </TableHeader>
-                                <TableBody>
-                                    {eventFilters.map((dataFilter, idx) => (
-                                        <TableRow
-                                            key={`${idx}-${dataFilter.id}`}
-                                            className="font-body cursor-pointer hover:bg-yellow-200 focus-visible:border-yellow-200 select-none"
-                                            onClick={() => handleEditFilter(dataFilter)}
-                                        >
-                                            <TableCell className="w-[60%] p-4">
-                                                <p className='truncate select-none font-mono text-sm'>{getFilterDisplayText(dataFilter.type, dataFilter.filter)}</p>
-                                                <div className='py-1' />
-                                                <p className='text-xs truncate text-gray-500 select-none'>{getCollectionConfigDisplay(dataFilter.collection_config)}</p>
-                                                <p className='text-xs truncate text-gray-500 select-none'>{getAttachmentConfigDisplay(dataFilter.attachment_config)}</p>
-                                            </TableCell>
-                                            <TableCell className="w-[20%] text-center p-4">
-                                                <p className='truncate select-none'>{formatDateToHumanReadableDate(dataFilter.updated_at)}</p>
-                                                <div className='py-1' />
-                                                <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(dataFilter.updated_at)}</p>
-                                            </TableCell>
-                                            <TableCell className="w-[20%] text-center p-4">
-                                                <p className='truncate select-none'>{dataFilter.updated_by}</p>
-                                            </TableCell>
-                                        </TableRow>
-                                    ))}
-                                </TableBody>
-                                </Table>
-                            </>
-                        )}
+                        <RulesTable rules={eventFilters} onRuleClick={handleEditFilter} />
                     </div>
 
                     <div className="py-12" />
@@ -311,47 +247,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                             </div>
                         )}
 
-                        {traceFilters.length > 0 && (
-                            <>
-                                <div className="py-6" />
-                                {/* Trace Overrides */}
-                                <p className="font-display text-gray-500">Overrides</p>
-                                <div className="py-2" />
-                                <Table className="font-display">
-                                <TableHeader>
-                                    <TableRow>
-                                        <TableHead className="w-[52%]">Rule</TableHead>
-                                        <TableHead className="w-[24%] text-center">Updated At</TableHead>
-                                        <TableHead className="w-[24%] text-center">Updated By</TableHead>
-                                    </TableRow>
-                                </TableHeader>
-                                <TableBody>
-                                    {traceFilters.map((dataFilter, idx) => (
-                                        <TableRow
-                                            key={`${idx}-${dataFilter.id}`}
-                                            className="font-body cursor-pointer hover:bg-yellow-200 focus-visible:border-yellow-200 select-none"
-                                            onClick={() => handleEditFilter(dataFilter)}
-                                        >
-                                            <TableCell className="w-[60%] p-4">
-                                                <p className='truncate select-none font-mono text-sm'>{getFilterDisplayText(dataFilter.type, dataFilter.filter)}</p>
-                                                <div className='py-1' />
-                                                <p className='text-xs truncate text-gray-500 select-none'>{getCollectionConfigDisplay(dataFilter.collection_config)}</p>
-                                                <p className='text-xs truncate text-gray-500 select-none'>{getAttachmentConfigDisplay(dataFilter.attachment_config)}</p>
-                                            </TableCell>
-                                            <TableCell className="w-[20%] text-center p-4">
-                                                <p className='truncate select-none'>{formatDateToHumanReadableDate(dataFilter.updated_at)}</p>
-                                                <div className='py-1' />
-                                                <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(dataFilter.updated_at)}</p>
-                                            </TableCell>
-                                            <TableCell className="w-[20%] text-center p-4">
-                                                <p className='truncate select-none'>{dataFilter.updated_by}</p>
-                                            </TableCell>
-                                        </TableRow>
-                                    ))}
-                                </TableBody>
-                                </Table>
-                            </>
-                        )}
+                        <RulesTable rules={traceFilters} onRuleClick={handleEditFilter} />
                     </div>
                 </div>}
 
diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index 3c10e0a69..253fbe360 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -1051,7 +1051,7 @@ export type DataFilterAttachmentConfig = 'layout_snapshot' | 'screenshot' | 'non
 export type DataFilter = {
   id: string,
   type: DataFilterType,
-  filter: string,
+  rule: string,
   collection_config: DataFilterCollectionConfig,
   attachment_config: DataFilterAttachmentConfig | null,
   created_at: string,
@@ -1069,7 +1069,7 @@ export const emptyDataFiltersResponse: DataFiltersResponse = {
     {
       id: "df-global-001",
       type: "all_events",
-      filter: 'event_type == "*"',
+      rule: 'event_type == "*"',
       collection_config: { mode: 'timeline_only'},
       attachment_config: 'none',
       created_at: "2024-01-01T00:00:00Z",
@@ -1080,7 +1080,7 @@ export const emptyDataFiltersResponse: DataFiltersResponse = {
     {
       id: "df-global-002",
       type: "all_traces",
-      filter: 'span.name == "*"',
+      rule: 'span.name == "*"',
       collection_config: { mode: 'sample_rate', sample_rate: 1 },
       attachment_config: 'none',
       created_at: "2024-01-01T00:00:00Z",
@@ -1091,7 +1091,7 @@ export const emptyDataFiltersResponse: DataFiltersResponse = {
     {
       id: "df-001",
       type: "event",
-      filter: "event.type == 'click' && event.target == 'checkout_button'",
+      rule: "event.type == 'click' && event.target == 'checkout_button'",
       collection_config: { mode: 'sample_rate', sample_rate: 0.5 },
       attachment_config: 'screenshot',
       created_at: "2024-01-15T10:30:00Z",
@@ -1102,7 +1102,7 @@ export const emptyDataFiltersResponse: DataFiltersResponse = {
     {
       id: "df-002",
       type: "trace",
-      filter: "trace.duration > 5000 && trace.status == 'error'",
+      rule: "trace.duration > 5000 && trace.status == 'error'",
       collection_config: { mode: 'timeline_only' },
       attachment_config: 'layout_snapshot',
       created_at: "2024-01-20T08:15:00Z",
@@ -1113,7 +1113,7 @@ export const emptyDataFiltersResponse: DataFiltersResponse = {
     {
       id: "df-003",
       type: "event",
-      filter: "event.name == 'app_background' && session.is_crash == true",
+      rule: "event.name == 'app_background' && session.is_crash == true",
       collection_config: { mode: 'disable' },
       attachment_config: null,
       created_at: "2024-02-01T12:00:00Z",
@@ -1124,7 +1124,7 @@ export const emptyDataFiltersResponse: DataFiltersResponse = {
     {
       id: "df-004",
       type: "trace",
-      filter: "trace.name == 'network_request' && trace.http.status_code >= 400",
+      rule: "trace.name == 'network_request' && trace.http.status_code >= 400",
       collection_config: { mode: 'sample_rate', sample_rate: 0.25 },
       attachment_config: 'none',
       created_at: "2024-02-10T16:20:00Z",
@@ -1135,7 +1135,7 @@ export const emptyDataFiltersResponse: DataFiltersResponse = {
     {
       id: "df-005",
       type: "event",
-      filter: "event.type == 'gesture' && device.manufacturer == 'Samsung'",
+      rule: "event.type == 'gesture' && device.manufacturer == 'Samsung'",
       collection_config: { mode: 'sample_rate', sample_rate: 1.0 },
       attachment_config: 'screenshot',
       created_at: "2024-03-05T13:45:00Z",
diff --git a/frontend/dashboard/app/components/data/rule_overrides_table.tsx b/frontend/dashboard/app/components/data/rule_overrides_table.tsx
new file mode 100644
index 000000000..feb5482d0
--- /dev/null
+++ b/frontend/dashboard/app/components/data/rule_overrides_table.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { DataFiltersResponse, DataFilterCollectionConfig, DataFilterAttachmentConfig, DataFilterType } from '@/app/api/api_calls'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/app/components/table'
+import { formatDateToHumanReadableDate, formatDateToHumanReadableTime } from '@/app/utils/time_utils'
+
+const getFilterDisplayText = (type: DataFilterType, filter: string): string => {
+    switch (type) {
+        case 'all_events':
+            return 'All Events'
+        case 'all_traces':
+            return 'All Traces'
+        default:
+            return filter
+    }
+}
+
+const getCollectionConfigDisplay = (collectionConfig: DataFilterCollectionConfig): string => {
+    switch (collectionConfig.mode) {
+        case 'sample_rate':
+            return `Collect all at ${collectionConfig.sample_rate}% sample rate`
+        case 'timeline_only':
+            return 'Collect with session timeline only'
+        case 'disable':
+            return 'Do not collect'
+        default:
+            return 'Unknown'
+    }
+}
+
+const getAttachmentConfigDisplay = (attachmentConfig: DataFilterAttachmentConfig | null): string => {
+    if (!attachmentConfig || attachmentConfig === 'none') {
+        return ''
+    } else if (attachmentConfig === 'layout_snapshot') {
+        return 'With layout snapshot'
+    } else if (attachmentConfig === 'screenshot') {
+        return 'With screenshot'
+    }
+    return attachmentConfig
+}
+
+type RuleFilter = DataFiltersResponse['results'][0]
+
+interface RulesTableProps {
+    rules: RuleFilter[]
+    onRuleClick: (rule: RuleFilter) => void
+}
+
+export default function RulesTable({ rules, onRuleClick }: RulesTableProps) {
+    if (rules.length === 0) {
+        return null
+    }
+
+    return (
+        <>
+            <div className="py-6" />
+            <p className="font-display text-gray-500">Overrides</p>
+            <div className="py-2" />
+            <Table className="font-display">
+                <TableHeader>
+                    <TableRow>
+                        <TableHead className="w-[52%]">Rule</TableHead>
+                        <TableHead className="w-[24%] text-center">Updated At</TableHead>
+                        <TableHead className="w-[24%] text-center">Updated By</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {rules.map((dataFilter, idx) => (
+                        <TableRow
+                            key={`${idx}-${dataFilter.id}`}
+                            className="font-body cursor-pointer hover:bg-yellow-200 focus-visible:border-yellow-200 select-none"
+                            onClick={() => onRuleClick(dataFilter)}
+                        >
+                            <TableCell className="w-[60%] p-4">
+                                <p className='truncate select-none font-mono text-sm'>{getFilterDisplayText(dataFilter.type, dataFilter.rule)}</p>
+                                <div className='py-1' />
+                                <p className='text-xs truncate text-gray-500 select-none'>{getCollectionConfigDisplay(dataFilter.collection_config)}</p>
+                                <p className='text-xs truncate text-gray-500 select-none'>{getAttachmentConfigDisplay(dataFilter.attachment_config)}</p>
+                            </TableCell>
+                            <TableCell className="w-[20%] text-center p-4">
+                                <p className='truncate select-none'>{formatDateToHumanReadableDate(dataFilter.updated_at)}</p>
+                                <div className='py-1' />
+                                <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(dataFilter.updated_at)}</p>
+                            </TableCell>
+                            <TableCell className="w-[20%] text-center p-4">
+                                <p className='truncate select-none'>{dataFilter.updated_by}</p>
+                            </TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </>
+    )
+}

From e2f21372aa0959d0f97d5cfd9b05f235b82e16de Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 14:20:01 +0530
Subject: [PATCH 16/98] feat(frontend): add client side pagination for override
 rule tables

---
 frontend/dashboard/app/api/api_calls.ts       | 114 +++++++++++++++++-
 .../components/data/rule_overrides_table.tsx  |  43 ++++++-
 2 files changed, 150 insertions(+), 7 deletions(-)

diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index 253fbe360..176b5532a 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -1053,7 +1053,7 @@ export type DataFilter = {
   type: DataFilterType,
   rule: string,
   collection_config: DataFilterCollectionConfig,
-  attachment_config: DataFilterAttachmentConfig | null,
+  attachment_config: DataFilterAttachmentConfig,
   created_at: string,
   created_by: string,
   updated_at: string,
@@ -1115,7 +1115,7 @@ export const emptyDataFiltersResponse: DataFiltersResponse = {
       type: "event",
       rule: "event.name == 'app_background' && session.is_crash == true",
       collection_config: { mode: 'disable' },
-      attachment_config: null,
+      attachment_config: 'none',
       created_at: "2024-02-01T12:00:00Z",
       created_by: "developer@example.com",
       updated_at: "2024-03-10T09:30:00Z",
@@ -1143,6 +1143,116 @@ export const emptyDataFiltersResponse: DataFiltersResponse = {
       updated_at: "2024-03-05T13:45:00Z",
       updated_by: "user3@example.com",
     },
+    {
+      id: "df-006",
+      type: "trace",
+      rule: "trace.name == 'database_query' && trace.duration > 1000",
+      collection_config: { mode: 'sample_rate', sample_rate: 0.75 },
+      attachment_config: 'none',
+      created_at: "2024-03-10T09:20:00Z",
+      created_by: "developer@example.com",
+      updated_at: "2024-03-15T14:30:00Z",
+      updated_by: "developer@example.com",
+    },
+    {
+      id: "df-007",
+      type: "event",
+      rule: "event.type == 'navigation' && event.screen == 'profile'",
+      collection_config: { mode: 'timeline_only' },
+      attachment_config: 'layout_snapshot',
+      created_at: "2024-03-12T11:15:00Z",
+      created_by: "user1@example.com",
+      updated_at: "2024-03-12T11:15:00Z",
+      updated_by: "user1@example.com",
+    },
+    {
+      id: "df-008",
+      type: "trace",
+      rule: "trace.name == 'api_call' && trace.http.method == 'POST'",
+      collection_config: { mode: 'sample_rate', sample_rate: 0.3 },
+      attachment_config: 'none',
+      created_at: "2024-03-14T16:40:00Z",
+      created_by: "qa@example.com",
+      updated_at: "2024-03-20T10:25:00Z",
+      updated_by: "lead@example.com",
+    },
+    {
+      id: "df-009",
+      type: "event",
+      rule: "event.type == 'error' && event.severity == 'high'",
+      collection_config: { mode: 'sample_rate', sample_rate: 1.0 },
+      attachment_config: 'screenshot',
+      created_at: "2024-03-18T08:30:00Z",
+      created_by: "admin@example.com",
+      updated_at: "2024-03-18T08:30:00Z",
+      updated_by: "admin@example.com",
+    },
+    {
+      id: "df-010",
+      type: "trace",
+      rule: "trace.name == 'image_upload' && trace.file_size > 5000000",
+      collection_config: { mode: 'disable' },
+      attachment_config: 'none',
+      created_at: "2024-03-22T14:55:00Z",
+      created_by: "developer@example.com",
+      updated_at: "2024-03-25T09:10:00Z",
+      updated_by: "admin@example.com",
+    },
+    {
+      id: "df-011",
+      type: "event",
+      rule: "event.type == 'payment' && event.amount > 100",
+      collection_config: { mode: 'sample_rate', sample_rate: 1.0 },
+      attachment_config: 'screenshot',
+      created_at: "2024-03-26T10:20:00Z",
+      created_by: "user2@example.com",
+      updated_at: "2024-03-26T10:20:00Z",
+      updated_by: "user2@example.com",
+    },
+    {
+      id: "df-012",
+      type: "trace",
+      rule: "trace.name == 'video_processing' && trace.duration > 3000",
+      collection_config: { mode: 'timeline_only' },
+      attachment_config: 'layout_snapshot',
+      created_at: "2024-03-28T15:45:00Z",
+      created_by: "qa@example.com",
+      updated_at: "2024-03-28T15:45:00Z",
+      updated_by: "qa@example.com",
+    },
+    {
+      id: "df-013",
+      type: "event",
+      rule: "event.type == 'search' && event.query_length > 50",
+      collection_config: { mode: 'sample_rate', sample_rate: 0.5 },
+      attachment_config: 'none',
+      created_at: "2024-04-01T12:00:00Z",
+      created_by: "user3@example.com",
+      updated_at: "2024-04-05T14:20:00Z",
+      updated_by: "lead@example.com",
+    },
+    {
+      id: "df-014",
+      type: "trace",
+      rule: "trace.name == 'cache_miss' && trace.status == 'ok'",
+      collection_config: { mode: 'sample_rate', sample_rate: 0.1 },
+      attachment_config: 'none',
+      created_at: "2024-04-03T09:30:00Z",
+      created_by: "developer@example.com",
+      updated_at: "2024-04-03T09:30:00Z",
+      updated_by: "developer@example.com",
+    },
+    {
+      id: "df-015",
+      type: "event",
+      rule: "event.type == 'form_submit' && event.field_count > 10",
+      collection_config: { mode: 'sample_rate', sample_rate: 0.8 },
+      attachment_config: 'layout_snapshot',
+      created_at: "2024-04-07T11:40:00Z",
+      created_by: "user1@example.com",
+      updated_at: "2024-04-10T16:15:00Z",
+      updated_by: "admin@example.com",
+    },
   ],
 }
 
diff --git a/frontend/dashboard/app/components/data/rule_overrides_table.tsx b/frontend/dashboard/app/components/data/rule_overrides_table.tsx
index feb5482d0..38be777d6 100644
--- a/frontend/dashboard/app/components/data/rule_overrides_table.tsx
+++ b/frontend/dashboard/app/components/data/rule_overrides_table.tsx
@@ -3,6 +3,8 @@
 import { DataFiltersResponse, DataFilterCollectionConfig, DataFilterAttachmentConfig, DataFilterType } from '@/app/api/api_calls'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/app/components/table'
 import { formatDateToHumanReadableDate, formatDateToHumanReadableTime } from '@/app/utils/time_utils'
+import Paginator from '@/app/components/paginator'
+import { useState, useEffect } from 'react'
 
 const getFilterDisplayText = (type: DataFilterType, filter: string): string => {
     switch (type) {
@@ -28,8 +30,8 @@ const getCollectionConfigDisplay = (collectionConfig: DataFilterCollectionConfig
     }
 }
 
-const getAttachmentConfigDisplay = (attachmentConfig: DataFilterAttachmentConfig | null): string => {
-    if (!attachmentConfig || attachmentConfig === 'none') {
+const getAttachmentConfigDisplay = (attachmentConfig: DataFilterAttachmentConfig): string => {
+    if (attachmentConfig === 'none') {
         return ''
     } else if (attachmentConfig === 'layout_snapshot') {
         return 'With layout snapshot'
@@ -46,16 +48,47 @@ interface RulesTableProps {
     onRuleClick: (rule: RuleFilter) => void
 }
 
+const paginationLimit = 5
+
 export default function RulesTable({ rules, onRuleClick }: RulesTableProps) {
+    const [paginationOffset, setPaginationOffset] = useState(0)
+
+    useEffect(() => {
+        setPaginationOffset(0)
+    }, [rules])
+
     if (rules.length === 0) {
         return null
     }
 
+    const handleNextPage = () => {
+        setPaginationOffset(paginationOffset + paginationLimit)
+    }
+
+    const handlePrevPage = () => {
+        setPaginationOffset(Math.max(0, paginationOffset - paginationLimit))
+    }
+
+    const prevEnabled = paginationOffset > 0
+    const nextEnabled = paginationOffset + paginationLimit < rules.length
+    const paginatedRules = rules.slice(paginationOffset, paginationOffset + paginationLimit)
+
     return (
         <>
             <div className="py-6" />
-            <p className="font-display text-gray-500">Overrides</p>
-            <div className="py-2" />
+            <div className="w-full flex items-center justify-between">
+                <p className="font-display text-gray-500">Overrides</p>
+                {rules.length > paginationLimit && (
+                    <Paginator
+                        prevEnabled={prevEnabled}
+                        nextEnabled={nextEnabled}
+                        displayText=""
+                        onNext={handleNextPage}
+                        onPrev={handlePrevPage}
+                    />
+                )}
+            </div>
+            <div className="py-4" />
             <Table className="font-display">
                 <TableHeader>
                     <TableRow>
@@ -65,7 +98,7 @@ export default function RulesTable({ rules, onRuleClick }: RulesTableProps) {
                     </TableRow>
                 </TableHeader>
                 <TableBody>
-                    {rules.map((dataFilter, idx) => (
+                    {paginatedRules.map((dataFilter, idx) => (
                         <TableRow
                             key={`${idx}-${dataFilter.id}`}
                             className="font-body cursor-pointer hover:bg-yellow-200 focus-visible:border-yellow-200 select-none"

From 0c1d872a204e3dd8148adaa68c82b3389f35c69a Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 14:28:04 +0530
Subject: [PATCH 17/98] feat(frontend): rename filter to rule

---
 frontend/dashboard/app/[teamId]/data/page.tsx |  40 ++---
 frontend/dashboard/app/api/api_calls.ts       | 140 ++----------------
 .../edit_default_rule_dialog.tsx              |   8 +-
 .../{data => data_rule}/rule_builder_card.tsx |   0
 .../rule_overrides_table.tsx                  |  10 +-
 .../sampling_rate_input.tsx                   |   0
 6 files changed, 44 insertions(+), 154 deletions(-)
 rename frontend/dashboard/app/components/{data => data_rule}/edit_default_rule_dialog.tsx (95%)
 rename frontend/dashboard/app/components/{data => data_rule}/rule_builder_card.tsx (100%)
 rename frontend/dashboard/app/components/{data => data_rule}/rule_overrides_table.tsx (91%)
 rename frontend/dashboard/app/components/{data => data_rule}/sampling_rate_input.tsx (100%)

diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index 7b7d4f94f..e2ff801a2 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -1,29 +1,29 @@
 "use client"
 
-import { DataFiltersApiStatus, DataFiltersResponse, emptyDataFiltersResponse, fetchDataFiltersFromServer, FilterSource } from '@/app/api/api_calls'
+import { DataRulesApiStatus, DataRulesResponse, emptyDataFiltersResponse, fetchDataFiltersFromServer, FilterSource } from '@/app/api/api_calls'
 import Filters, { AppVersionsInitialSelectionType, defaultFilters } from '@/app/components/filters'
 import LoadingBar from '@/app/components/loading_bar'
-import { DataFilterCollectionConfig, DataFilterType } from '@/app/api/api_calls'
+import { DataRuleCollectionConfig, DataRuleType } from '@/app/api/api_calls'
 import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { Button } from '@/app/components/button'
 import { Plus, Pencil } from 'lucide-react'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/app/components/dropdown_menu'
-import EditDefaultRuleDialog, { DefaultRuleState } from '@/app/components/data/edit_default_rule_dialog'
-import RulesTable from '@/app/components/data/rule_overrides_table'
+import EditDefaultRuleDialog, { DefaultRuleState } from '@/app/components/data_rule/edit_default_rule_dialog'
+import RulesTable from '@/app/components/data_rule/rule_overrides_table'
 
 interface PageState {
-    dataFiltersApiStatus: DataFiltersApiStatus
+    dataFiltersApiStatus: DataRulesApiStatus
     filters: typeof defaultFilters
-    dataFilters: DataFiltersResponse
+    dataFilters: DataRulesResponse
     defaultRuleEditState: DefaultRuleState | null
 }
 
-const isDefaultRule = (type: DataFilterType): boolean => {
+const isDefaultRule = (type: DataRuleType): boolean => {
     return type === 'all_events' || type === 'all_traces'
 }
 
-const getCollectionConfigDisplay = (collectionConfig: DataFilterCollectionConfig): string => {
+const getCollectionConfigDisplay = (collectionConfig: DataRuleCollectionConfig): string => {
     switch (collectionConfig.mode) {
         case 'sample_rate':
             return `Collect all at ${collectionConfig.sample_rate}% sample rate`
@@ -40,7 +40,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
     const router = useRouter()
 
     const initialState: PageState = {
-        dataFiltersApiStatus: DataFiltersApiStatus.Success,
+        dataFiltersApiStatus: DataRulesApiStatus.Success,
         filters: defaultFilters,
         dataFilters: emptyDataFiltersResponse,
         defaultRuleEditState: null,
@@ -56,20 +56,20 @@ export default function DataFilters({ params }: { params: { teamId: string } })
     }
 
     const getDataFilters = async () => {
-        updatePageState({ dataFiltersApiStatus: DataFiltersApiStatus.Loading })
+        updatePageState({ dataFiltersApiStatus: DataRulesApiStatus.Loading })
 
         const result = await fetchDataFiltersFromServer(pageState.filters.app!.id)
 
         switch (result.status) {
-            case DataFiltersApiStatus.Error:
-                updatePageState({ dataFiltersApiStatus: DataFiltersApiStatus.Error })
+            case DataRulesApiStatus.Error:
+                updatePageState({ dataFiltersApiStatus: DataRulesApiStatus.Error })
                 break
-            case DataFiltersApiStatus.NoFilters:
-                updatePageState({ dataFiltersApiStatus: DataFiltersApiStatus.NoFilters })
+            case DataRulesApiStatus.NoFilters:
+                updatePageState({ dataFiltersApiStatus: DataRulesApiStatus.NoFilters })
                 break
-            case DataFiltersApiStatus.Success:
+            case DataRulesApiStatus.Success:
                 updatePageState({
-                    dataFiltersApiStatus: DataFiltersApiStatus.Success,
+                    dataFiltersApiStatus: DataRulesApiStatus.Success,
                     dataFilters: result.data
                 })
                 break
@@ -138,7 +138,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         <Button
                             variant="outline"
                             className="font-display border border-black select-none"
-                            disabled={pageState.dataFiltersApiStatus === DataFiltersApiStatus.Loading}
+                            disabled={pageState.dataFiltersApiStatus === DataRulesApiStatus.Loading}
                         >
                             <Plus /> Create Rule
                         </Button>
@@ -183,14 +183,14 @@ export default function DataFilters({ params }: { params: { teamId: string } })
 
             {/* Error state for data rules fetch */}
             {pageState.filters.ready
-                && pageState.dataFiltersApiStatus === DataFiltersApiStatus.Error
+                && pageState.dataFiltersApiStatus === DataRulesApiStatus.Error
                 && <p className="text-lg font-display">Error fetching data filters, please change filters, refresh page or select a different app to try again</p>}
 
             {/* Main data rules UI */}
             {pageState.filters.ready
-                && (pageState.dataFiltersApiStatus === DataFiltersApiStatus.Success || pageState.dataFiltersApiStatus === DataFiltersApiStatus.Loading) &&
+                && (pageState.dataFiltersApiStatus === DataRulesApiStatus.Success || pageState.dataFiltersApiStatus === DataRulesApiStatus.Loading) &&
                 <div className="flex flex-col items-start w-full">
-                    <div className={`py-1 w-full ${pageState.dataFiltersApiStatus === DataFiltersApiStatus.Loading ? 'visible' : 'invisible'}`}>
+                    <div className={`py-1 w-full ${pageState.dataFiltersApiStatus === DataRulesApiStatus.Loading ? 'visible' : 'invisible'}`}>
                         <LoadingBar />
                     </div>
 
diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index 176b5532a..084032008 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -353,7 +353,7 @@ export enum AlertsOverviewApiStatus {
   Cancelled,
 }
 
-export enum DataFiltersApiStatus {
+export enum DataRulesApiStatus {
   Loading,
   Success,
   Error,
@@ -1031,36 +1031,36 @@ export const emptyAlertsOverviewResponse = {
   }[],
 }
 
-export type DataFiltersResponse = {
+export type DataRulesResponse = {
   meta: {
     next: false,
     previous: false,
   },
-  results: DataFilter[],
+  results: DataRule[],
 }
 
-export type DataFilterType = "event" | "trace" | "all_events" | "all_traces";
+export type DataRuleType = "event" | "trace" | "all_events" | "all_traces";
 
-export type DataFilterCollectionConfig =
+export type DataRuleCollectionConfig =
   | { mode: 'sample_rate'; sample_rate: number }
   | { mode: 'timeline_only' }
   | { mode: 'disable' };
 
-export type DataFilterAttachmentConfig = 'layout_snapshot' | 'screenshot' | 'none';
+export type DataRuleAttachmentConfig = 'layout_snapshot' | 'screenshot' | 'none';
 
-export type DataFilter = {
+export type DataRule = {
   id: string,
-  type: DataFilterType,
+  type: DataRuleType,
   rule: string,
-  collection_config: DataFilterCollectionConfig,
-  attachment_config: DataFilterAttachmentConfig,
+  collection_config: DataRuleCollectionConfig,
+  attachment_config: DataRuleAttachmentConfig,
   created_at: string,
   created_by: string,
   updated_at: string,
   updated_by: string,
 }
 
-export const emptyDataFiltersResponse: DataFiltersResponse = {
+export const emptyDataFiltersResponse: DataRulesResponse = {
   meta: {
     next: false,
     previous: false,
@@ -1143,116 +1143,6 @@ export const emptyDataFiltersResponse: DataFiltersResponse = {
       updated_at: "2024-03-05T13:45:00Z",
       updated_by: "user3@example.com",
     },
-    {
-      id: "df-006",
-      type: "trace",
-      rule: "trace.name == 'database_query' && trace.duration > 1000",
-      collection_config: { mode: 'sample_rate', sample_rate: 0.75 },
-      attachment_config: 'none',
-      created_at: "2024-03-10T09:20:00Z",
-      created_by: "developer@example.com",
-      updated_at: "2024-03-15T14:30:00Z",
-      updated_by: "developer@example.com",
-    },
-    {
-      id: "df-007",
-      type: "event",
-      rule: "event.type == 'navigation' && event.screen == 'profile'",
-      collection_config: { mode: 'timeline_only' },
-      attachment_config: 'layout_snapshot',
-      created_at: "2024-03-12T11:15:00Z",
-      created_by: "user1@example.com",
-      updated_at: "2024-03-12T11:15:00Z",
-      updated_by: "user1@example.com",
-    },
-    {
-      id: "df-008",
-      type: "trace",
-      rule: "trace.name == 'api_call' && trace.http.method == 'POST'",
-      collection_config: { mode: 'sample_rate', sample_rate: 0.3 },
-      attachment_config: 'none',
-      created_at: "2024-03-14T16:40:00Z",
-      created_by: "qa@example.com",
-      updated_at: "2024-03-20T10:25:00Z",
-      updated_by: "lead@example.com",
-    },
-    {
-      id: "df-009",
-      type: "event",
-      rule: "event.type == 'error' && event.severity == 'high'",
-      collection_config: { mode: 'sample_rate', sample_rate: 1.0 },
-      attachment_config: 'screenshot',
-      created_at: "2024-03-18T08:30:00Z",
-      created_by: "admin@example.com",
-      updated_at: "2024-03-18T08:30:00Z",
-      updated_by: "admin@example.com",
-    },
-    {
-      id: "df-010",
-      type: "trace",
-      rule: "trace.name == 'image_upload' && trace.file_size > 5000000",
-      collection_config: { mode: 'disable' },
-      attachment_config: 'none',
-      created_at: "2024-03-22T14:55:00Z",
-      created_by: "developer@example.com",
-      updated_at: "2024-03-25T09:10:00Z",
-      updated_by: "admin@example.com",
-    },
-    {
-      id: "df-011",
-      type: "event",
-      rule: "event.type == 'payment' && event.amount > 100",
-      collection_config: { mode: 'sample_rate', sample_rate: 1.0 },
-      attachment_config: 'screenshot',
-      created_at: "2024-03-26T10:20:00Z",
-      created_by: "user2@example.com",
-      updated_at: "2024-03-26T10:20:00Z",
-      updated_by: "user2@example.com",
-    },
-    {
-      id: "df-012",
-      type: "trace",
-      rule: "trace.name == 'video_processing' && trace.duration > 3000",
-      collection_config: { mode: 'timeline_only' },
-      attachment_config: 'layout_snapshot',
-      created_at: "2024-03-28T15:45:00Z",
-      created_by: "qa@example.com",
-      updated_at: "2024-03-28T15:45:00Z",
-      updated_by: "qa@example.com",
-    },
-    {
-      id: "df-013",
-      type: "event",
-      rule: "event.type == 'search' && event.query_length > 50",
-      collection_config: { mode: 'sample_rate', sample_rate: 0.5 },
-      attachment_config: 'none',
-      created_at: "2024-04-01T12:00:00Z",
-      created_by: "user3@example.com",
-      updated_at: "2024-04-05T14:20:00Z",
-      updated_by: "lead@example.com",
-    },
-    {
-      id: "df-014",
-      type: "trace",
-      rule: "trace.name == 'cache_miss' && trace.status == 'ok'",
-      collection_config: { mode: 'sample_rate', sample_rate: 0.1 },
-      attachment_config: 'none',
-      created_at: "2024-04-03T09:30:00Z",
-      created_by: "developer@example.com",
-      updated_at: "2024-04-03T09:30:00Z",
-      updated_by: "developer@example.com",
-    },
-    {
-      id: "df-015",
-      type: "event",
-      rule: "event.type == 'form_submit' && event.field_count > 10",
-      collection_config: { mode: 'sample_rate', sample_rate: 0.8 },
-      attachment_config: 'layout_snapshot',
-      created_at: "2024-04-07T11:40:00Z",
-      created_by: "user1@example.com",
-      updated_at: "2024-04-10T16:15:00Z",
-      updated_by: "admin@example.com",
-    },
   ],
 }
 
@@ -2604,17 +2494,17 @@ export const fetchDataFiltersFromServer = async (
     const res = await measureAuth.fetchMeasure(url)
 
     if (!res.ok) {
-      return { status: DataFiltersApiStatus.Error, data: null }
+      return { status: DataRulesApiStatus.Error, data: null }
     }
 
     const data = await res.json()
 
     if (data.results === null) {
-      return { status: DataFiltersApiStatus.NoFilters, data: null }
+      return { status: DataRulesApiStatus.NoFilters, data: null }
     } else {
-      return { status: DataFiltersApiStatus.Success, data: data }
+      return { status: DataRulesApiStatus.Success, data: data }
     }
   } catch {
-    return { status: DataFiltersApiStatus.Cancelled, data: null }
+    return { status: DataRulesApiStatus.Cancelled, data: null }
   }
 }
\ No newline at end of file
diff --git a/frontend/dashboard/app/components/data/edit_default_rule_dialog.tsx b/frontend/dashboard/app/components/data_rule/edit_default_rule_dialog.tsx
similarity index 95%
rename from frontend/dashboard/app/components/data/edit_default_rule_dialog.tsx
rename to frontend/dashboard/app/components/data_rule/edit_default_rule_dialog.tsx
index 464fa9e11..feab0f717 100644
--- a/frontend/dashboard/app/components/data/edit_default_rule_dialog.tsx
+++ b/frontend/dashboard/app/components/data_rule/edit_default_rule_dialog.tsx
@@ -1,14 +1,14 @@
 "use client"
 
-import { DataFilterCollectionConfig, DataFilterType } from '@/app/api/api_calls'
+import { DataRuleCollectionConfig, DataRuleType } from '@/app/api/api_calls'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/app/components/dialog'
 import { Button } from '@/app/components/button'
-import SamplingRateInput from '@/app/components/data/sampling_rate_input'
+import SamplingRateInput from '@/app/components/data_rule/sampling_rate_input'
 
 export interface DefaultRuleState {
     id: string
-    type: DataFilterType
-    collectionMode: DataFilterCollectionConfig['mode']
+    type: DataRuleType
+    collectionMode: DataRuleCollectionConfig['mode']
     sampleRate?: number
 }
 
diff --git a/frontend/dashboard/app/components/data/rule_builder_card.tsx b/frontend/dashboard/app/components/data_rule/rule_builder_card.tsx
similarity index 100%
rename from frontend/dashboard/app/components/data/rule_builder_card.tsx
rename to frontend/dashboard/app/components/data_rule/rule_builder_card.tsx
diff --git a/frontend/dashboard/app/components/data/rule_overrides_table.tsx b/frontend/dashboard/app/components/data_rule/rule_overrides_table.tsx
similarity index 91%
rename from frontend/dashboard/app/components/data/rule_overrides_table.tsx
rename to frontend/dashboard/app/components/data_rule/rule_overrides_table.tsx
index 38be777d6..72d7e13de 100644
--- a/frontend/dashboard/app/components/data/rule_overrides_table.tsx
+++ b/frontend/dashboard/app/components/data_rule/rule_overrides_table.tsx
@@ -1,12 +1,12 @@
 "use client"
 
-import { DataFiltersResponse, DataFilterCollectionConfig, DataFilterAttachmentConfig, DataFilterType } from '@/app/api/api_calls'
+import { DataRulesResponse, DataRuleCollectionConfig, DataRuleAttachmentConfig, DataRuleType } from '@/app/api/api_calls'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/app/components/table'
 import { formatDateToHumanReadableDate, formatDateToHumanReadableTime } from '@/app/utils/time_utils'
 import Paginator from '@/app/components/paginator'
 import { useState, useEffect } from 'react'
 
-const getFilterDisplayText = (type: DataFilterType, filter: string): string => {
+const getFilterDisplayText = (type: DataRuleType, filter: string): string => {
     switch (type) {
         case 'all_events':
             return 'All Events'
@@ -17,7 +17,7 @@ const getFilterDisplayText = (type: DataFilterType, filter: string): string => {
     }
 }
 
-const getCollectionConfigDisplay = (collectionConfig: DataFilterCollectionConfig): string => {
+const getCollectionConfigDisplay = (collectionConfig: DataRuleCollectionConfig): string => {
     switch (collectionConfig.mode) {
         case 'sample_rate':
             return `Collect all at ${collectionConfig.sample_rate}% sample rate`
@@ -30,7 +30,7 @@ const getCollectionConfigDisplay = (collectionConfig: DataFilterCollectionConfig
     }
 }
 
-const getAttachmentConfigDisplay = (attachmentConfig: DataFilterAttachmentConfig): string => {
+const getAttachmentConfigDisplay = (attachmentConfig: DataRuleAttachmentConfig): string => {
     if (attachmentConfig === 'none') {
         return ''
     } else if (attachmentConfig === 'layout_snapshot') {
@@ -41,7 +41,7 @@ const getAttachmentConfigDisplay = (attachmentConfig: DataFilterAttachmentConfig
     return attachmentConfig
 }
 
-type RuleFilter = DataFiltersResponse['results'][0]
+type RuleFilter = DataRulesResponse['results'][0]
 
 interface RulesTableProps {
     rules: RuleFilter[]
diff --git a/frontend/dashboard/app/components/data/sampling_rate_input.tsx b/frontend/dashboard/app/components/data_rule/sampling_rate_input.tsx
similarity index 100%
rename from frontend/dashboard/app/components/data/sampling_rate_input.tsx
rename to frontend/dashboard/app/components/data_rule/sampling_rate_input.tsx

From 961a548674cf17d191ae0b3df9ac73daee5398c3 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 20:45:03 +0530
Subject: [PATCH 18/98] feat(frontend): add cel parser and generator

---
 .../utils/cel/cel_conversion_test.ts          | 162 ++++
 .../__tests__/utils/cel/cel_generator_test.ts | 765 ++++++++++++++++++
 .../__tests__/utils/cel/cel_parser_test.ts    | 335 ++++++++
 .../{[filterId] => [ruleId]}/edit/page.tsx    |   0
 frontend/dashboard/app/[teamId]/data/page.tsx |  36 +-
 .../dashboard/app/utils/cel/cel_generator.ts  | 321 ++++++++
 .../dashboard/app/utils/cel/cel_parser.ts     | 618 ++++++++++++++
 .../dashboard/app/utils/cel/cel_tokenizer.ts  | 314 +++++++
 .../dashboard/app/utils/cel/conditions.ts     |  41 +
 9 files changed, 2574 insertions(+), 18 deletions(-)
 create mode 100644 frontend/dashboard/__tests__/utils/cel/cel_conversion_test.ts
 create mode 100644 frontend/dashboard/__tests__/utils/cel/cel_generator_test.ts
 create mode 100644 frontend/dashboard/__tests__/utils/cel/cel_parser_test.ts
 rename frontend/dashboard/app/[teamId]/data/event/{[filterId] => [ruleId]}/edit/page.tsx (100%)
 create mode 100644 frontend/dashboard/app/utils/cel/cel_generator.ts
 create mode 100644 frontend/dashboard/app/utils/cel/cel_parser.ts
 create mode 100644 frontend/dashboard/app/utils/cel/cel_tokenizer.ts
 create mode 100644 frontend/dashboard/app/utils/cel/conditions.ts

diff --git a/frontend/dashboard/__tests__/utils/cel/cel_conversion_test.ts b/frontend/dashboard/__tests__/utils/cel/cel_conversion_test.ts
new file mode 100644
index 000000000..f3f4e7052
--- /dev/null
+++ b/frontend/dashboard/__tests__/utils/cel/cel_conversion_test.ts
@@ -0,0 +1,162 @@
+import { conditionsToCel } from "@/app/utils/cel/cel_generator";
+import { celToConditions } from "@/app/utils/cel/cel_parser";
+
+describe('CEL to conditions and back to CEL', () => {
+
+    test('processes a single event condition', () => {
+        const cel = '(event_type == "anr")';
+        const conditions = celToConditions(cel);
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: undefined });
+        expect(outputCel).toBe(cel);
+    });
+
+    test('processes multiple event conditions with AND operator', () => {
+        const cel = '((event_type == "anr") && (event_type == "exception"))';
+        const conditions = celToConditions(cel);
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: undefined });
+        expect(outputCel).toBe(cel);
+    });
+
+    test('processes multiple event conditions with OR operator', () => {
+        const cel = '((event_type == "anr") || (event_type == "exception"))';
+        const conditions = celToConditions(cel);
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: undefined });
+        expect(outputCel).toBe(cel);
+    });
+
+    test('processes event with attribute', () => {
+        const cel = '(event_type == "exception" && exception.handled == false)';
+        const conditions = celToConditions(cel);
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: undefined });
+        expect(outputCel).toBe(cel);
+    });
+
+    test('processes event with attribute and ud-attribute', () => {
+        const cel = '(event_type == "custom" && custom.name == "login" && event.user_defined_attrs.is_premium_user == true)';
+        const conditions = celToConditions(cel);
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: undefined });
+        expect(outputCel).toBe(cel);
+    });
+
+    test('processes event with ud-attribute', () => {
+        const cel = '(event_type == "custom" && event.user_defined_attrs.is_premium_user == true)';
+        const conditions = celToConditions(cel);
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: undefined });
+        expect(outputCel).toBe(cel);
+    });
+
+    test('processes session attribute only', () => {
+        const cel = '(attribute.is_device_foldable == true)';
+        const conditions = celToConditions(cel);
+        const outputCel = conditionsToCel({ event: undefined, trace: undefined, session: conditions.session, });
+        expect(outputCel).toBe(cel);
+    });
+
+    test('processes multiple session attributes with AND operator', () => {
+        const cel = '((attribute.is_device_foldable == true) && (attribute.app_version == "1.0.0"))';
+        const conditions = celToConditions(cel);
+        const outputCel = conditionsToCel({ event: undefined, trace: undefined, session: conditions.session, });
+        expect(outputCel).toBe(cel);
+    });
+
+    test('processes multiple session attributes with OR operator', () => {
+        const cel = '((attribute.is_device_foldable == true) || (attribute.app_version == "1.0.0"))';
+        const conditions = celToConditions(cel);
+        const outputCel = conditionsToCel({ event: undefined, trace: undefined, session: conditions.session, });
+        expect(outputCel).toBe(cel);
+    });
+
+    test('processes combined event and session conditions', () => {
+        const cel = '(event_type == "anr") && (attribute.is_device_foldable == true)';
+        const conditions = celToConditions(cel);
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: conditions.session });
+        expect(outputCel).toBe(cel);
+    });
+
+    test('processes condition with contains operator', () => {
+        const cel = '(event_type == "custom" && custom.name.contains("log"))';
+        const conditions = celToConditions(cel);
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: undefined });
+        expect(outputCel).toBe(cel);
+    });
+
+    test('processes condition with startsWith operator', () => {
+        const cel = '(event_type == "custom" && custom.name.startsWith("log"))';
+        const conditions = celToConditions(cel);
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: undefined });
+        expect(outputCel).toBe(cel);
+    });
+
+    test('processes condition with gte operator', () => {
+        const cel = '(event_type == "custom" && custom.retry_cound >= 1)';
+        const conditions = celToConditions(cel);
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: undefined });
+        expect(outputCel).toBe(cel);
+    });
+
+    test('processes condition with lte operator', () => {
+        const cel = '(event_type == "custom" && custom.retry_cound <= 1)';
+        const conditions = celToConditions(cel);
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: undefined });
+        expect(outputCel).toBe(cel);
+    });
+
+    test('processes condition with lt operator', () => {
+        const cel = '(event_type == "custom" && custom.retry_cound < 1)';
+        const conditions = celToConditions(cel);
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: undefined });
+        expect(outputCel).toBe(cel);
+    });
+
+    test('processes condition with gt operator', () => {
+        const cel = '(event_type == "custom" && custom.retry_cound > 1)';
+        const conditions = celToConditions(cel);
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: undefined });
+        expect(outputCel).toBe(cel);
+    });
+
+    test('processes a span condition', () => {
+        const cel = '(span_name == "Activity TTID")';
+        const conditions = celToConditions(cel);
+        const outputCel = conditionsToCel({ event: undefined, trace: conditions.trace , session: undefined });
+        expect(outputCel).toBe(cel);
+    });
+
+    test('processes multiple span conditions with AND operator', () => {
+        const cel = '((span_name == "Activity TTID") && (span_name.startsWith("HTTP GET /config")))';
+        const conditions = celToConditions(cel);
+        const outputCel = conditionsToCel({ event: undefined, trace: conditions.trace , session: undefined });
+        expect(outputCel).toBe(cel);
+    });
+
+    test('processes multiple span conditions with OR operator', () => {
+        const cel = '((span_name == "Activity TTID") || (span_name.startsWith("HTTP GET /config")))';
+        const conditions = celToConditions(cel);
+        const outputCel = conditionsToCel({ event: undefined, trace: conditions.trace , session: undefined });
+        expect(outputCel).toBe(cel);
+    });
+
+    test('processes a span condition with user defined attributes', () => {
+        const cel = '(span_name == "Activity TTID" && trace.user_defined_attrs.api_level >= 21)';
+        const conditions = celToConditions(cel);
+
+        expect(conditions.trace).toBeDefined();
+
+        const outputCel = conditionsToCel({ event: undefined, trace: conditions.trace , session: undefined });
+        expect(outputCel).toBe(cel);
+    });
+
+    test('processes a span condition with session conditions', () => {
+        const cel = '(span_name == "Activity TTID") && (attribute.is_device_foldable == true)';
+        const conditions = celToConditions(cel);
+        const outputCel = conditionsToCel({ event: undefined, trace: conditions.trace, session: conditions.session });
+        expect(outputCel).toBe(cel);
+    });
+
+    test('processes complex combined conditions', () => {
+        const cel = '((event_type == "anr") && (event_type == "exception")) && (span_name == "Activity TTID" && trace.user_defined_attrs.api_level >= 21) && (attribute.is_device_foldable == true)';
+        const conditions = celToConditions(cel);
+        const outputCel = conditionsToCel({ event: conditions.event, trace: conditions.trace, session: conditions.session });
+        expect(outputCel).toBe(cel);
+    });
+});
diff --git a/frontend/dashboard/__tests__/utils/cel/cel_generator_test.ts b/frontend/dashboard/__tests__/utils/cel/cel_generator_test.ts
new file mode 100644
index 000000000..3f7c2a505
--- /dev/null
+++ b/frontend/dashboard/__tests__/utils/cel/cel_generator_test.ts
@@ -0,0 +1,765 @@
+import { conditionsToCel } from "@/app/utils/cel/cel_generator";
+import { ParsedConditions } from "@/app/utils/cel/cel_parser";
+
+describe('CEL Generator', () => {
+    describe('CEL from event conditions', () => {
+        test('generates CEL for single event type condition', () => {
+            const conditions: ParsedConditions = {
+                event: {
+                    conditions: [{
+                        id: 'cond1',
+                        type: 'anr',
+                        attrs: [],
+                        ud_attrs: [],
+                        session_attrs: []
+                    }],
+                    operators: []
+                }
+            };
+
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('(event_type == "anr")');
+        });
+
+        test('generates CEL for event with standard attribute', () => {
+            const conditions: ParsedConditions = {
+                event: {
+                    conditions: [{
+                        id: 'cond1',
+                        type: 'exception',
+                        attrs: [{
+                            id: 'attr1',
+                            key: 'handled',
+                            type: 'boolean',
+                            value: false,
+                            operator: 'eq'
+                        }],
+                        ud_attrs: [],
+                        session_attrs: []
+                    }],
+                    operators: []
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('(event_type == "exception" && exception.handled == false)');
+        });
+
+        test('generates CEL for event with user-defined attribute', () => {
+            const conditions: ParsedConditions = {
+                event: {
+                    conditions: [{
+                        id: 'cond1',
+                        type: 'custom',
+                        attrs: [],
+                        ud_attrs: [
+                            {
+                                id: 'ud_attr1',
+                                key: 'user_tier',
+                                type: 'string',
+                                value: 'premium',
+                                operator: 'eq'
+                            }
+                        ],
+                        session_attrs: [],
+                    }],
+                    operators: []
+                }
+            };
+
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('(event_type == "custom" && event.user_defined_attrs.user_tier == "premium")');
+        });
+
+        test('generates CEL for event with both standard and user-defined attributes', () => {
+            const conditions: ParsedConditions = {
+                event: {
+                    conditions: [{
+                        id: 'cond1',
+                        type: 'exception',
+                        attrs: [{
+                            id: 'attr1',
+                            key: 'handled',
+                            type: 'boolean',
+                            value: false,
+                            operator: 'eq'
+                        }],
+                        ud_attrs: [{
+                            id: 'ud_attr1',
+                            key: 'user_tier',
+                            type: 'string',
+                            value: 'premium',
+                            operator: 'eq'
+                        }],
+                        session_attrs: []
+                    }],
+                    operators: []
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('(event_type == "exception" && exception.handled == false && event.user_defined_attrs.user_tier == "premium")');
+        });
+
+        test('generates CEL for multiple event conditions with AND operator', () => {
+            const conditions: ParsedConditions = {
+                event: {
+                    conditions: [{
+                        id: 'cond1',
+                        type: 'exception',
+                        attrs: [],
+                        ud_attrs: [],
+                        session_attrs: [],
+
+                    }, {
+                        id: 'cond2',
+                        type: 'anr',
+                        attrs: [],
+                        ud_attrs: [],
+                        session_attrs: [],
+                    }],
+                    operators: ['AND']
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('((event_type == "exception") && (event_type == "anr"))');
+        });
+
+        test('generates CEL for multiple event conditions with AND operator', () => {
+            const conditions: ParsedConditions = {
+                event: {
+                    conditions: [{
+                        id: 'cond1',
+                        type: 'exception',
+                        attrs: [],
+                        ud_attrs: [],
+                        session_attrs: [],
+                    }, {
+                        id: 'cond2',
+                        type: 'anr',
+                        attrs: [],
+                        ud_attrs: [],
+                        session_attrs: [],
+                    }],
+                    operators: ['OR']
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('((event_type == "exception") || (event_type == "anr"))');
+        });
+
+        test('generates CEL with string contains operator', () => {
+            const conditions: ParsedConditions = {
+                event: {
+                    conditions: [{
+                        id: 'cond1',
+                        type: 'custom',
+                        attrs: [{
+                            id: 'attr1',
+                            key: 'name',
+                            type: 'string',
+                            value: 'abc',
+                            operator: 'contains'
+                        }],
+                        ud_attrs: [],
+                        session_attrs: [],
+                    }],
+                    operators: []
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('(event_type == "custom" && custom.name.contains("abc"))');
+        });
+
+        test('generates CEL with string startsWith operator', () => {
+            const conditions: ParsedConditions = {
+                event: {
+                    conditions: [{
+                        id: 'cond1',
+                        type: 'custom',
+                        attrs: [{
+                            id: 'attr1',
+                            key: 'name',
+                            type: 'string',
+                            value: 'prefix_',
+                            operator: 'startsWith'
+                        }],
+                        ud_attrs: [],
+                        session_attrs: [],
+                    }],
+                    operators: []
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('(event_type == "custom" && custom.name.startsWith("prefix_"))');
+        });
+
+        test('generates CEL with numeric comparison operators', () => {
+            const conditions: ParsedConditions = {
+                event: {
+                    conditions: [{
+                        id: 'cond1',
+                        type: 'custom',
+                        attrs: [
+                            { id: 'attr1', key: 'count', type: 'number', value: 5, operator: 'gt' },
+                            { id: 'attr2', key: 'limit', type: 'number', value: 10, operator: 'lte' }
+                        ],
+                        ud_attrs: [],
+                        session_attrs: [],
+                    }],
+                    operators: []
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('(event_type == "custom" && custom.count > 5 && custom.limit <= 10)');
+        });
+    });
+
+    describe('CEL from session conditions', () => {
+        test('generates CEL for single session attribute', () => {
+            const conditions: ParsedConditions = {
+                session: {
+                    conditions: [{
+                        id: 'cond1',
+                        attrs: [{
+                            id: 'attr1',
+                            key: 'is_device_foldable',
+                            type: 'boolean',
+                            value: true,
+                            operator: 'eq'
+                        }]
+                    }],
+                    operators: []
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('(attribute.is_device_foldable == true)');
+        });
+
+        test('generates CEL for multiple session attributes with AND operator', () => {
+            const conditions: ParsedConditions = {
+                session: {
+                    conditions: [
+                        {
+                            id: 'cond1',
+                            attrs: [{
+                                id: 'attr1',
+                                key: 'is_device_foldable',
+                                type: 'boolean',
+                                value: true,
+                                operator: 'eq'
+                            }]
+                        },
+                        {
+                            id: 'cond2',
+                            attrs: [{
+                                id: 'attr2',
+                                key: 'app_version',
+                                type: 'string',
+                                value: '1.0.0',
+                                operator: 'eq'
+                            }]
+                        }
+                    ],
+                    operators: ['AND']
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('((attribute.is_device_foldable == true) && (attribute.app_version == "1.0.0"))');
+        });
+
+        test('generates CEL for session attribute with string operators', () => {
+            const conditions: ParsedConditions = {
+                session: {
+                    conditions: [{
+                        id: 'cond1',
+                        attrs: [{
+                            id: 'attr1',
+                            key: 'device_model',
+                            type: 'string',
+                            value: 'Samsung',
+                            operator: 'startsWith'
+                        }]
+                    }],
+                    operators: []
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('(attribute.device_model.startsWith("Samsung"))');
+        });
+    });
+
+    describe('Trace Conditions', () => {
+        test('generates CEL for single span name condition', () => {
+            const conditions: ParsedConditions = {
+                trace: {
+                    conditions: [{
+                        id: 'cond1',
+                        spanName: 'Activity TTID',
+                        operator: 'eq',
+                        ud_attrs: [],
+                        session_attrs: [],
+                    }],
+                    operators: []
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('(span_name == "Activity TTID")');
+        });
+
+        test('generates CEL for span name with string contains operator', () => {
+            const conditions: ParsedConditions = {
+                trace: {
+                    conditions: [{
+                        id: 'cond1',
+                        spanName: 'HTTP',
+                        operator: 'contains',
+                        ud_attrs: [],
+                        session_attrs: [],
+                    }],
+                    operators: []
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('(span_name.contains("HTTP"))');
+        });
+
+        test('generates CEL for span name with string startsWith operator', () => {
+            const conditions: ParsedConditions = {
+                trace: {
+                    conditions: [{
+                        id: 'cond1',
+                        spanName: 'HTTP GET',
+                        operator: 'startsWith',
+                        ud_attrs: [],
+                        session_attrs: [],
+                    }],
+                    operators: []
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('(span_name.startsWith("HTTP GET"))');
+        });
+
+        test('generates CEL for span with user-defined attributes', () => {
+            const conditions: ParsedConditions = {
+                trace: {
+                    conditions: [{
+                        id: 'cond1',
+                        spanName: 'Activity TTID',
+                        operator: 'eq',
+                        ud_attrs: [{
+                            id: 'ud_attr1',
+                            key: 'api_level',
+                            type: 'number',
+                            value: 21,
+                            operator: 'gte'
+                        }],
+                        session_attrs: [],
+                    }],
+                    operators: []
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('(span_name == "Activity TTID" && trace.user_defined_attrs.api_level >= 21)');
+        });
+
+        test('generates CEL for span with multiple user-defined attributes', () => {
+            const conditions: ParsedConditions = {
+                trace: {
+                    conditions: [{
+                        id: 'cond1',
+                        spanName: 'HTTP Request',
+                        operator: 'eq',
+                        ud_attrs: [
+                            {
+                                id: 'ud_attr1',
+                                key: 'status_code',
+                                type: 'number',
+                                value: 200,
+                                operator: 'eq'
+                            },
+                            {
+                                id: 'ud_attr2',
+                                key: 'method',
+                                type: 'string',
+                                value: 'GET',
+                                operator: 'eq'
+                            }
+                        ],
+                        session_attrs: [],
+                    }],
+                    operators: []
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('(span_name == "HTTP Request" && trace.user_defined_attrs.status_code == 200 && trace.user_defined_attrs.method == "GET")');
+        });
+
+        test('generates CEL for multiple trace conditions with AND operator', () => {
+            const conditions: ParsedConditions = {
+                trace: {
+                    conditions: [
+                        {
+                            id: 'cond1',
+                            spanName: 'Activity TTID',
+                            operator: 'eq',
+                            ud_attrs: [],
+                            session_attrs: [],
+                        },
+                        {
+                            id: 'cond2',
+                            spanName: 'HTTP GET',
+                            operator: 'startsWith',
+                            ud_attrs: [],
+                            session_attrs: [],
+                        }
+                    ],
+                    operators: ['AND']
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('((span_name == "Activity TTID") && (span_name.startsWith("HTTP GET")))');
+        });
+
+        test('generates CEL for multiple trace conditions with OR operator', () => {
+            const conditions: ParsedConditions = {
+                trace: {
+                    conditions: [
+                        {
+                            id: 'cond1',
+                            spanName: 'Activity TTID',
+                            operator: 'eq',
+                            ud_attrs: [],
+                            session_attrs: [],
+                        },
+                        {
+                            id: 'cond2',
+                            spanName: 'HTTP GET /config',
+                            operator: 'startsWith',
+                            ud_attrs: [],
+                            session_attrs: [],
+                        }
+                    ],
+                    operators: ['OR']
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('((span_name == "Activity TTID") || (span_name.startsWith("HTTP GET /config")))');
+        });
+
+        test('generates CEL for user-defined attributes with string operators', () => {
+            const conditions: ParsedConditions = {
+                trace: {
+                    conditions: [{
+                        id: 'cond1',
+                        spanName: 'Database Query',
+                        operator: 'eq',
+                        ud_attrs: [
+                            {
+                                id: 'ud_attr1',
+                                key: 'table_name',
+                                type: 'string',
+                                value: 'user',
+                                operator: 'contains'
+                            },
+                            {
+                                id: 'ud_attr2',
+                                key: 'query_type',
+                                type: 'string',
+                                value: 'SELECT',
+                                operator: 'startsWith'
+                            }
+                        ],
+                        session_attrs: [],
+                    }],
+                    operators: []
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('(span_name == "Database Query" && trace.user_defined_attrs.table_name.contains("user") && trace.user_defined_attrs.query_type.startsWith("SELECT"))');
+        });
+    });
+
+    describe('CEL from event conditions with session_attrs', () => {
+        test('generates CEL for event with session_attrs', () => {
+            const conditions: ParsedConditions = {
+                event: {
+                    conditions: [{
+                        id: 'cond1',
+                        type: 'exception',
+                        attrs: [{
+                            id: 'attr1',
+                            key: 'handled',
+                            type: 'boolean',
+                            value: false,
+                            operator: 'eq'
+                        }],
+                        ud_attrs: [],
+                        session_attrs: [{
+                            id: 'session1',
+                            key: 'is_device_foldable',
+                            type: 'boolean',
+                            value: true,
+                            operator: 'eq'
+                        }]
+                    }],
+                    operators: []
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('(event_type == "exception" && exception.handled == false && attribute.is_device_foldable == true)');
+        });
+
+        test('generates CEL for event with multiple session_attrs', () => {
+            const conditions: ParsedConditions = {
+                event: {
+                    conditions: [{
+                        id: 'cond1',
+                        type: 'anr',
+                        attrs: [],
+                        ud_attrs: [],
+                        session_attrs: [
+                            {
+                                id: 'session1',
+                                key: 'app_version',
+                                type: 'string',
+                                value: '1.0.0',
+                                operator: 'eq'
+                            },
+                            {
+                                id: 'session2',
+                                key: 'device_manufacturer',
+                                type: 'string',
+                                value: 'Samsung',
+                                operator: 'startsWith'
+                            }
+                        ]
+                    }],
+                    operators: []
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('(event_type == "anr" && attribute.app_version == "1.0.0" && attribute.device_manufacturer.startsWith("Samsung"))');
+        });
+
+        test('generates CEL for event with attrs, ud_attrs, and session_attrs', () => {
+            const conditions: ParsedConditions = {
+                event: {
+                    conditions: [{
+                        id: 'cond1',
+                        type: 'custom',
+                        attrs: [{
+                            id: 'attr1',
+                            key: 'name',
+                            type: 'string',
+                            value: 'login',
+                            operator: 'eq'
+                        }],
+                        ud_attrs: [{
+                            id: 'ud1',
+                            key: 'user_tier',
+                            type: 'string',
+                            value: 'premium',
+                            operator: 'eq'
+                        }],
+                        session_attrs: [{
+                            id: 'session1',
+                            key: 'platform',
+                            type: 'string',
+                            value: 'android',
+                            operator: 'eq'
+                        }]
+                    }],
+                    operators: []
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('(event_type == "custom" && custom.name == "login" && event.user_defined_attrs.user_tier == "premium" && attribute.platform == "android")');
+        });
+    });
+
+    describe('CEL from trace conditions with session_attrs', () => {
+        test('generates CEL for trace with session_attrs', () => {
+            const conditions: ParsedConditions = {
+                trace: {
+                    conditions: [{
+                        id: 'cond1',
+                        spanName: 'Activity TTID',
+                        operator: 'eq',
+                        ud_attrs: [],
+                        session_attrs: [{
+                            id: 'session1',
+                            key: 'is_device_foldable',
+                            type: 'boolean',
+                            value: true,
+                            operator: 'eq'
+                        }]
+                    }],
+                    operators: []
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('(span_name == "Activity TTID" && attribute.is_device_foldable == true)');
+        });
+
+        test('generates CEL for trace with ud_attrs and session_attrs', () => {
+            const conditions: ParsedConditions = {
+                trace: {
+                    conditions: [{
+                        id: 'cond1',
+                        spanName: 'HTTP Request',
+                        operator: 'contains',
+                        ud_attrs: [{
+                            id: 'ud1',
+                            key: 'api_level',
+                            type: 'number',
+                            value: 21,
+                            operator: 'gte'
+                        }],
+                        session_attrs: [{
+                            id: 'session1',
+                            key: 'app_version',
+                            type: 'string',
+                            value: '2.0',
+                            operator: 'startsWith'
+                        }]
+                    }],
+                    operators: []
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('(span_name.contains("HTTP Request") && trace.user_defined_attrs.api_level >= 21 && attribute.app_version.startsWith("2.0"))');
+        });
+
+        test('generates CEL for trace with multiple session_attrs', () => {
+            const conditions: ParsedConditions = {
+                trace: {
+                    conditions: [{
+                        id: 'cond1',
+                        spanName: 'Database Query',
+                        operator: 'eq',
+                        ud_attrs: [],
+                        session_attrs: [
+                            {
+                                id: 'session1',
+                                key: 'device_model',
+                                type: 'string',
+                                value: 'Pixel',
+                                operator: 'contains'
+                            },
+                            {
+                                id: 'session2',
+                                key: 'os_version',
+                                type: 'number',
+                                value: 13,
+                                operator: 'gte'
+                            }
+                        ]
+                    }],
+                    operators: []
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('(span_name == "Database Query" && attribute.device_model.contains("Pixel") && attribute.os_version >= 13)');
+        });
+    });
+
+    describe('CEL from combined conditions', () => {
+        test('generates CEL for event and session conditions', () => {
+            const conditions: ParsedConditions = {
+                event: {
+                    conditions: [{
+                        id: 'cond1',
+                        type: 'anr',
+                        attrs: [],
+                        ud_attrs: [],
+                        session_attrs: [],
+                    }],
+                    operators: []
+                },
+                session: {
+                    conditions: [{
+                        id: 'cond2',
+                        attrs: [{
+                            id: 'attr1',
+                            key: 'is_device_foldable',
+                            type: 'boolean',
+                            value: true,
+                            operator: 'eq'
+                        }]
+                    }],
+                    operators: []
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('(event_type == "anr") && (attribute.is_device_foldable == true)');
+        });
+
+        test('generates CEL for event, trace, and session conditions', () => {
+            const conditions: ParsedConditions = {
+                event: {
+                    conditions: [{
+                        id: 'cond1',
+                        type: 'custom',
+                        attrs: [],
+                        ud_attrs: [],
+                        session_attrs: [],
+                    }],
+                    operators: []
+                },
+                trace: {
+                    conditions: [{
+                        id: 'cond2',
+                        spanName: 'Activity TTID',
+                        operator: 'eq',
+                        ud_attrs: [],
+                        session_attrs: [],
+                    }],
+                    operators: []
+                },
+                session: {
+                    conditions: [{
+                        id: 'cond3',
+                        attrs: [{
+                            id: 'attr1',
+                            key: 'platform',
+                            type: 'string',
+                            value: 'android',
+                            operator: 'eq'
+                        }]
+                    }],
+                    operators: []
+                }
+            };
+
+            const result = conditionsToCel(conditions);
+            expect(result).toBe('(event_type == "custom") && (span_name == "Activity TTID") && (attribute.platform == "android")');
+        });
+    });
+});
\ No newline at end of file
diff --git a/frontend/dashboard/__tests__/utils/cel/cel_parser_test.ts b/frontend/dashboard/__tests__/utils/cel/cel_parser_test.ts
new file mode 100644
index 000000000..f0d9a5f62
--- /dev/null
+++ b/frontend/dashboard/__tests__/utils/cel/cel_parser_test.ts
@@ -0,0 +1,335 @@
+import { celToConditions } from "@/app/utils/cel/cel_parser";
+
+describe('CEL Parser', () => {
+    test('parses single event type condition', () => {
+        const cel = '(event_type == "anr")';
+        const conditions = celToConditions(cel);
+
+        expect(conditions.event).toBeDefined();
+        expect(conditions.event!.conditions).toHaveLength(1);
+        expect(conditions.event!.conditions[0]).toMatchObject({
+            type: 'anr',
+            attrs: [],
+            ud_attrs: []
+        });
+        expect(conditions.event!.operators).toHaveLength(0);
+        expect(conditions.session).toBeUndefined();
+        expect(conditions.trace).toBeUndefined();
+    });
+
+    test('parses multiple event conditions with AND operator', () => {
+        const cel = '((event_type == "anr") && (event_type == "exception"))';
+        const conditions = celToConditions(cel);
+
+        expect(conditions.event).toBeDefined();
+        expect(conditions.event!.conditions).toHaveLength(2);
+        expect(conditions.event!.conditions[0].type).toBe('anr');
+        expect(conditions.event!.conditions[1].type).toBe('exception');
+        expect(conditions.event!.operators).toEqual(['AND']);
+    });
+
+    test('parses multiple event conditions with OR operator', () => {
+        const cel = '((event_type == "anr") || (event_type == "exception"))';
+        const conditions = celToConditions(cel);
+
+        expect(conditions.event).toBeDefined();
+        expect(conditions.event!.conditions).toHaveLength(2);
+        expect(conditions.event!.conditions[0].type).toBe('anr');
+        expect(conditions.event!.conditions[1].type).toBe('exception');
+        expect(conditions.event!.operators).toEqual(['OR']);
+    });
+
+    test('parses event with attribute', () => {
+        const cel = '(event_type == "exception" && exception.handled == false)';
+        const conditions = celToConditions(cel);
+
+        expect(conditions.event).toBeDefined();
+        expect(conditions.event!.conditions).toHaveLength(1);
+
+        const condition = conditions.event!.conditions[0];
+        expect(condition.type).toBe('exception');
+        expect(condition.attrs).toHaveLength(1);
+        expect(condition.attrs![0]).toMatchObject({
+            key: 'handled',
+            type: 'bool',
+            value: false,
+            operator: 'eq'
+        });
+    });
+
+    test('parses event with user-defined attribute', () => {
+        const cel = '(event_type == "custom" && event.user_defined_attrs.is_premium_user == true)';
+        const conditions = celToConditions(cel);
+
+        expect(conditions.event).toBeDefined();
+        expect(conditions.event!.conditions).toHaveLength(1);
+
+        const condition = conditions.event!.conditions[0];
+        expect(condition.type).toBe('custom');
+        expect(condition.ud_attrs).toHaveLength(1);
+        expect(condition.ud_attrs![0]).toMatchObject({
+            key: 'is_premium_user',
+            type: 'bool',
+            value: true,
+            operator: 'eq'
+        });
+    });
+
+    test('parses event with both regular and user-defined attributes', () => {
+        const cel = '(event_type == "custom" && custom.name == "login" && event.user_defined_attrs.is_premium_user == true)';
+        const conditions = celToConditions(cel);
+
+        expect(conditions.event).toBeDefined();
+        expect(conditions.event!.conditions).toHaveLength(1);
+
+        const condition = conditions.event!.conditions[0];
+        expect(condition.type).toBe('custom');
+        expect(condition.attrs).toHaveLength(1);
+        expect(condition.attrs![0]).toMatchObject({
+            key: 'name',
+            type: 'string',
+            value: 'login',
+            operator: 'eq'
+        });
+        expect(condition.ud_attrs).toHaveLength(1);
+        expect(condition.ud_attrs![0]).toMatchObject({
+            key: 'is_premium_user',
+            type: 'bool',
+            value: true,
+            operator: 'eq'
+        });
+    });
+
+    test('parses session attribute condition', () => {
+        const cel = '(attribute.is_device_foldable == true)';
+        const conditions = celToConditions(cel);
+
+        expect(conditions.session).toBeDefined();
+        expect(conditions.session!.conditions).toHaveLength(1);
+        expect(conditions.session!.conditions[0].attrs).toHaveLength(1);
+        expect(conditions.session!.conditions[0].attrs[0]).toMatchObject({
+            key: 'is_device_foldable',
+            type: 'bool',
+            value: true,
+            operator: 'eq'
+        });
+        expect(conditions.event).toBeUndefined();
+        expect(conditions.trace).toBeUndefined();
+    });
+
+    test('parses multiple session attributes with AND operator', () => {
+        const cel = '((attribute.is_device_foldable == true) && (attribute.app_version == "1.0.0"))';
+        const conditions = celToConditions(cel);
+
+        expect(conditions.session).toBeDefined();
+        expect(conditions.session!.conditions).toHaveLength(2);
+        expect(conditions.session!.operators).toEqual(['AND']);
+        expect(conditions.session!.conditions[0].attrs[0].key).toBe('is_device_foldable');
+        expect(conditions.session!.conditions[1].attrs[0].key).toBe('app_version');
+    });
+
+    test('parses multiple session attributes with OR operator', () => {
+        const cel = '((attribute.is_device_foldable == true) || (attribute.app_version == "1.0.0"))';
+        const conditions = celToConditions(cel);
+
+        expect(conditions.session).toBeDefined();
+        expect(conditions.session!.conditions).toHaveLength(2);
+        expect(conditions.session!.operators).toEqual(['OR']);
+    });
+
+    test('parses span name condition', () => {
+        const cel = '(span_name == "Activity TTID")';
+        const conditions = celToConditions(cel);
+
+        expect(conditions.trace).toBeDefined();
+        expect(conditions.trace!.conditions).toHaveLength(1);
+        expect(conditions.trace!.conditions[0]).toMatchObject({
+            spanName: 'Activity TTID',
+            operator: 'eq',
+            ud_attrs: []
+        });
+        expect(conditions.event).toBeUndefined();
+        expect(conditions.session).toBeUndefined();
+    });
+
+    test('parses multiple span conditions with AND operator', () => {
+        const cel = '((span_name == "Activity TTID") && (span_name.startsWith("HTTP GET /config")))';
+        const conditions = celToConditions(cel);
+
+        expect(conditions.trace).toBeDefined();
+        expect(conditions.trace!.conditions).toHaveLength(2);
+        expect(conditions.trace!.operators).toEqual(['AND']);
+        expect(conditions.trace!.conditions[0].spanName).toBe('Activity TTID');
+        expect(conditions.trace!.conditions[1].spanName).toBe('HTTP GET /config');
+        expect(conditions.trace!.conditions[1].operator).toBe('startsWith');
+    });
+
+    test('parses span condition with user-defined attributes', () => {
+        const cel = '(span_name == "Activity TTID" && trace.user_defined_attrs.api_level >= 21)';
+        const conditions = celToConditions(cel);
+
+        expect(conditions.trace).toBeDefined();
+        expect(conditions.trace!.conditions).toHaveLength(1);
+
+        const condition = conditions.trace!.conditions[0];
+        expect(condition.spanName).toBe('Activity TTID');
+        expect(condition.ud_attrs).toHaveLength(1);
+        expect(condition.ud_attrs![0]).toMatchObject({
+            key: 'api_level',
+            type: 'number',
+            value: 21,
+            operator: 'gte'
+        });
+    });
+
+    test('parses combined event and session conditions', () => {
+        const cel = '(event_type == "anr") && (attribute.is_device_foldable == true)';
+        const conditions = celToConditions(cel);
+
+        expect(conditions.event).toBeDefined();
+        expect(conditions.session).toBeDefined();
+
+        expect(conditions.event!.conditions).toHaveLength(1);
+        expect(conditions.event!.conditions[0].type).toBe('anr');
+
+        expect(conditions.session!.conditions).toHaveLength(1);
+        expect(conditions.session!.conditions[0].attrs[0].key).toBe('is_device_foldable');
+    });
+
+    test('parses condition with contains operator', () => {
+        const cel = '(event_type == "custom" && custom.name.contains("log"))';
+        const conditions = celToConditions(cel);
+
+        expect(conditions.event).toBeDefined();
+        const condition = conditions.event!.conditions[0];
+        expect(condition.attrs![0]).toMatchObject({
+            key: 'name',
+            type: 'string',
+            value: 'log',
+            operator: 'contains'
+        });
+    });
+
+    test('parses condition with startsWith operator', () => {
+        const cel = '(event_type == "custom" && custom.name.startsWith("log"))';
+        const conditions = celToConditions(cel);
+
+        expect(conditions.event).toBeDefined();
+        const condition = conditions.event!.conditions[0];
+        expect(condition.attrs![0]).toMatchObject({
+            key: 'name',
+            type: 'string',
+            value: 'log',
+            operator: 'startsWith'
+        });
+    });
+
+    test('parses condition with numeric comparison operators', () => {
+        const testCases = [
+            { cel: '(event_type == "custom" && custom.retry_count >= 1)', operator: 'gte' },
+            { cel: '(event_type == "custom" && custom.retry_count <= 1)', operator: 'lte' },
+            { cel: '(event_type == "custom" && custom.retry_count < 1)', operator: 'lt' },
+            { cel: '(event_type == "custom" && custom.retry_count > 1)', operator: 'gt' },
+            { cel: '(event_type == "custom" && custom.retry_count != 1)', operator: 'neq' }
+        ];
+
+        testCases.forEach(({ cel, operator }) => {
+            const conditions = celToConditions(cel);
+            expect(conditions.event).toBeDefined();
+            const condition = conditions.event!.conditions[0];
+            expect(condition.attrs![0]).toMatchObject({
+                key: 'retry_count',
+                type: 'number',
+                value: 1,
+                operator
+            });
+        });
+    });
+
+    test('parses complex combined conditions', () => {
+        const cel = '((event_type == "anr") && (event_type == "exception")) && (span_name == "Activity TTID" && trace.user_defined_attrs.api_level >= 21) && (attribute.is_device_foldable == true)';
+        const conditions = celToConditions(cel);
+
+        // Event conditions
+        expect(conditions.event).toBeDefined();
+        expect(conditions.event!.conditions).toHaveLength(2);
+        expect(conditions.event!.operators).toEqual(['AND']);
+        expect(conditions.event!.conditions[0].type).toBe('anr');
+        expect(conditions.event!.conditions[1].type).toBe('exception');
+
+        // Trace conditions
+        expect(conditions.trace).toBeDefined();
+        expect(conditions.trace!.conditions).toHaveLength(1);
+        expect(conditions.trace!.conditions[0].spanName).toBe('Activity TTID');
+        expect(conditions.trace!.conditions[0].ud_attrs).toHaveLength(1);
+
+        // Session conditions
+        expect(conditions.session).toBeDefined();
+        expect(conditions.session!.conditions).toHaveLength(1);
+        expect(conditions.session!.conditions[0].attrs[0].key).toBe('is_device_foldable');
+    });
+
+    test('parses condition with null value', () => {
+        const cel = '(event_type == "custom" && custom.value == null)';
+        const conditions = celToConditions(cel);
+
+        expect(conditions.event).toBeDefined();
+        const condition = conditions.event!.conditions[0];
+        expect(condition.attrs![0]).toMatchObject({
+            key: 'value',
+            type: 'null',
+            value: null,
+            operator: 'eq'
+        });
+    });
+
+    test('parses condition with string value', () => {
+        const cel = '(event_type == "custom" && custom.message == "hello world")';
+        const conditions = celToConditions(cel);
+
+        expect(conditions.event).toBeDefined();
+        const condition = conditions.event!.conditions[0];
+        expect(condition.attrs![0]).toMatchObject({
+            key: 'message',
+            type: 'string',
+            value: 'hello world',
+            operator: 'eq'
+        });
+    });
+
+    test('parses condition with number value', () => {
+        const cel = '(event_type == "custom" && custom.count == 42)';
+        const conditions = celToConditions(cel);
+
+        expect(conditions.event).toBeDefined();
+        const condition = conditions.event!.conditions[0];
+        expect(condition.attrs![0]).toMatchObject({
+            key: 'count',
+            type: 'number',
+            value: 42,
+            operator: 'eq'
+        });
+    });
+
+    test('handles whitespace in expression', () => {
+        const cel = '  ( event_type  ==  "anr"  )  ';
+        const conditions = celToConditions(cel);
+
+        expect(conditions.event).toBeDefined();
+        expect(conditions.event!.conditions[0].type).toBe('anr');
+    });
+
+    test('returns empty result for invalid expression', () => {
+        const cel = 'invalid expression';
+        const conditions = celToConditions(cel);
+
+        expect(conditions).toEqual({});
+    });
+
+    test('returns empty result for malformed parentheses', () => {
+        const cel = '(event_type == "anr"';
+        const conditions = celToConditions(cel);
+
+        expect(conditions).toEqual({});
+    });
+});
\ No newline at end of file
diff --git a/frontend/dashboard/app/[teamId]/data/event/[filterId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/event/[ruleId]/edit/page.tsx
similarity index 100%
rename from frontend/dashboard/app/[teamId]/data/event/[filterId]/edit/page.tsx
rename to frontend/dashboard/app/[teamId]/data/event/[ruleId]/edit/page.tsx
diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index e2ff801a2..b0c0ef970 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -9,14 +9,14 @@ import { useEffect, useState } from 'react'
 import { Button } from '@/app/components/button'
 import { Plus, Pencil } from 'lucide-react'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/app/components/dropdown_menu'
-import EditDefaultRuleDialog, { DefaultRuleState } from '@/app/components/data_rule/edit_default_rule_dialog'
+import EditDefaultRuleDialog, { DefaultRuleState as DefaultRuleEditState } from '@/app/components/data_rule/edit_default_rule_dialog'
 import RulesTable from '@/app/components/data_rule/rule_overrides_table'
 
 interface PageState {
-    dataFiltersApiStatus: DataRulesApiStatus
+    dataRulesApiStatus: DataRulesApiStatus
     filters: typeof defaultFilters
-    dataFilters: DataRulesResponse
-    defaultRuleEditState: DefaultRuleState | null
+    dataRules: DataRulesResponse
+    defaultRuleEditState: DefaultRuleEditState | null
 }
 
 const isDefaultRule = (type: DataRuleType): boolean => {
@@ -40,9 +40,9 @@ export default function DataFilters({ params }: { params: { teamId: string } })
     const router = useRouter()
 
     const initialState: PageState = {
-        dataFiltersApiStatus: DataRulesApiStatus.Success,
+        dataRulesApiStatus: DataRulesApiStatus.Success,
         filters: defaultFilters,
-        dataFilters: emptyDataFiltersResponse,
+        dataRules: emptyDataFiltersResponse,
         defaultRuleEditState: null,
     }
 
@@ -56,21 +56,21 @@ export default function DataFilters({ params }: { params: { teamId: string } })
     }
 
     const getDataFilters = async () => {
-        updatePageState({ dataFiltersApiStatus: DataRulesApiStatus.Loading })
+        updatePageState({ dataRulesApiStatus: DataRulesApiStatus.Loading })
 
         const result = await fetchDataFiltersFromServer(pageState.filters.app!.id)
 
         switch (result.status) {
             case DataRulesApiStatus.Error:
-                updatePageState({ dataFiltersApiStatus: DataRulesApiStatus.Error })
+                updatePageState({ dataRulesApiStatus: DataRulesApiStatus.Error })
                 break
             case DataRulesApiStatus.NoFilters:
-                updatePageState({ dataFiltersApiStatus: DataRulesApiStatus.NoFilters })
+                updatePageState({ dataRulesApiStatus: DataRulesApiStatus.NoFilters })
                 break
             case DataRulesApiStatus.Success:
                 updatePageState({
-                    dataFiltersApiStatus: DataRulesApiStatus.Success,
-                    dataFilters: result.data
+                    dataRulesApiStatus: DataRulesApiStatus.Success,
+                    dataRules: result.data
                 })
                 break
         }
@@ -81,7 +81,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         if (pageState.filters.ready !== updatedFilters.ready || pageState.filters.serialisedFilters !== updatedFilters.serialisedFilters) {
             updatePageState({
                 filters: updatedFilters,
-                dataFilters: emptyDataFiltersResponse,
+                dataRules: emptyDataFiltersResponse,
             })
         }
     }
@@ -98,10 +98,10 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         // getDataFilters()
     }, [pageState.filters])
 
-    const defaultRules = pageState.dataFilters.results.filter(df => isDefaultRule(df.type))
+    const defaultRules = pageState.dataRules.results.filter(df => isDefaultRule(df.type))
     const allEventsFilter = defaultRules.find(df => df.type === 'all_events')
     const allTracesFilter = defaultRules.find(df => df.type === 'all_traces')
-    const overrideFilters = pageState.dataFilters.results.filter(df => !isDefaultRule(df.type))
+    const overrideFilters = pageState.dataRules.results.filter(df => !isDefaultRule(df.type))
     const eventFilters = overrideFilters.filter(df => df.type === 'event')
     const traceFilters = overrideFilters.filter(df => df.type === 'trace')
 
@@ -138,7 +138,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         <Button
                             variant="outline"
                             className="font-display border border-black select-none"
-                            disabled={pageState.dataFiltersApiStatus === DataRulesApiStatus.Loading}
+                            disabled={pageState.dataRulesApiStatus === DataRulesApiStatus.Loading}
                         >
                             <Plus /> Create Rule
                         </Button>
@@ -183,14 +183,14 @@ export default function DataFilters({ params }: { params: { teamId: string } })
 
             {/* Error state for data rules fetch */}
             {pageState.filters.ready
-                && pageState.dataFiltersApiStatus === DataRulesApiStatus.Error
+                && pageState.dataRulesApiStatus === DataRulesApiStatus.Error
                 && <p className="text-lg font-display">Error fetching data filters, please change filters, refresh page or select a different app to try again</p>}
 
             {/* Main data rules UI */}
             {pageState.filters.ready
-                && (pageState.dataFiltersApiStatus === DataRulesApiStatus.Success || pageState.dataFiltersApiStatus === DataRulesApiStatus.Loading) &&
+                && (pageState.dataRulesApiStatus === DataRulesApiStatus.Success || pageState.dataRulesApiStatus === DataRulesApiStatus.Loading) &&
                 <div className="flex flex-col items-start w-full">
-                    <div className={`py-1 w-full ${pageState.dataFiltersApiStatus === DataRulesApiStatus.Loading ? 'visible' : 'invisible'}`}>
+                    <div className={`py-1 w-full ${pageState.dataRulesApiStatus === DataRulesApiStatus.Loading ? 'visible' : 'invisible'}`}>
                         <LoadingBar />
                     </div>
 
diff --git a/frontend/dashboard/app/utils/cel/cel_generator.ts b/frontend/dashboard/app/utils/cel/cel_generator.ts
new file mode 100644
index 000000000..cffa989ab
--- /dev/null
+++ b/frontend/dashboard/app/utils/cel/cel_generator.ts
@@ -0,0 +1,321 @@
+/**
+ * Converts UI state conditions into Common 
+ * Expression Language (CEL) strings.
+ * 
+ * This is the reverse of the CEL parser, used to 
+ * regenerate CEL expressions for filtering and 
+ * evaluation.
+ */
+
+import { EventCondition, AttributeCondition, TraceCondition, EventConditions, SessionConditions, TraceConditions } from "./conditions"
+import { ParsedConditions } from "./cel_parser"
+
+const OPERATOR_MAPPINGS = {
+  eq: '==',
+  neq: '!=',
+  gt: '>',
+  lt: '<',
+  gte: '>=',
+  lte: '<=',
+  contains: 'contains',
+  startsWith: 'startsWith'
+} as const
+
+const LOGICAL_OPERATOR_MAPPINGS = {
+  AND: '&&',
+  OR: '||'
+} as const
+
+/**
+ * Formats a value for CEL syntax, wrapping strings in quotes.
+ */
+function formatValueForCel(value: string | boolean | number, type: string): string {
+  return type === 'string' ? `"${value}"` : String(value)
+}
+
+/**
+ * Creates a CEL expression for an event type.
+ * Example output: 'event_type == "anr"'
+ */
+function createEventTypeCondition(eventType: string): string {
+  return `event_type == "${eventType}"`
+}
+
+/**
+ * Creates a CEL expression for a standard event attribute.
+ * Example output: 'exception.handled == false'
+ */
+function createEventAttributeCondition(
+  attribute: {
+    key: string;
+    type: string;
+    value: string | boolean | number;
+    operator?: string
+  },
+  eventType: string
+): string {
+  const operator = OPERATOR_MAPPINGS[attribute.operator as keyof typeof OPERATOR_MAPPINGS] || '=='
+  const formattedValue = formatValueForCel(attribute.value, attribute.type)
+  const fullKey = `${eventType}.${attribute.key}`
+
+  if (attribute.type === 'string' && (operator === 'contains' || operator === 'startsWith')) {
+    return `${fullKey}.${operator}(${formattedValue})`
+  }
+
+  return `${fullKey} ${operator} ${formattedValue}`
+}
+
+/**
+ * Creates a CEL expression for a user-defined event attribute.
+ * Example output: 'event.user_defined_attrs.is_premium == true'
+ */
+function createUserDefinedEventAttributeCondition(attribute: {
+  key: string;
+  type: string;
+  value: string | boolean | number;
+  operator?: string
+}): string {
+  const operator = OPERATOR_MAPPINGS[attribute.operator as keyof typeof OPERATOR_MAPPINGS] || '=='
+  const formattedValue = formatValueForCel(attribute.value, attribute.type)
+  const fullKey = `event.user_defined_attrs.${attribute.key}`
+
+  if (attribute.type === 'string' && (operator === 'contains' || operator === 'startsWith')) {
+    return `${fullKey}.${operator}(${formattedValue})`
+  }
+
+  return `${fullKey} ${operator} ${formattedValue}`
+}
+
+/**
+ * Creates a CEL expression for a session attribute.
+ * Example output: 'attribute.session_duration > 300'
+ */
+function createSessionAttributeCondition(attribute: {
+  key: string;
+  type: string;
+  value: string | boolean | number;
+  operator?: string
+}): string {
+  const operator = OPERATOR_MAPPINGS[attribute.operator as keyof typeof OPERATOR_MAPPINGS] || '=='
+  const formattedValue = formatValueForCel(attribute.value, attribute.type)
+
+  if (attribute.type === 'string' && (operator === 'contains' || operator === 'startsWith')) {
+    return `attribute.${attribute.key}.${operator}(${formattedValue})`
+  }
+
+  return `attribute.${attribute.key} ${operator} ${formattedValue}`
+}
+
+/** 
+ * Creates a CEL expression for a span name.
+ * Example output: 'span_name.contains("HTTP")'
+ */
+function createSpanNameCondition(spanName: string, operator: string): string {
+  const formattedValue = formatValueForCel(spanName, 'string')
+
+  if (operator === 'contains' || operator === 'startsWith') {
+    return `span_name.${operator}(${formattedValue})`
+  }
+
+  const celOperator = OPERATOR_MAPPINGS[operator as keyof typeof OPERATOR_MAPPINGS] || '=='
+  return `span_name ${celOperator} ${formattedValue}`
+}
+
+/**
+ * Creates a CEL expression for a span's user-defined attribute.
+ * Example output: 'trace.user_defined_attrs.is_critical == true'
+ */
+function createSpanUserDefinedAttributeCondition(attribute: {
+  key: string;
+  type: string;
+  value: string | boolean | number;
+  operator?: string
+}): string {
+  const operator = OPERATOR_MAPPINGS[attribute.operator as keyof typeof OPERATOR_MAPPINGS] || '=='
+  const formattedValue = formatValueForCel(attribute.value, attribute.type)
+  const fullKey = `trace.user_defined_attrs.${attribute.key}`
+
+  if (attribute.type === 'string' && (operator === 'contains' || operator === 'startsWith')) {
+    return `${fullKey}.${operator}(${formattedValue})`
+  }
+
+  return `${fullKey} ${operator} ${formattedValue}`
+}
+
+/**
+ * Converts a single event condition object into an 
+ * array of its constituent CEL parts.
+ * Example output: ['event_type == "exception"', 'exception.handled == false']
+ */
+function buildEventConditionParts(condition: EventCondition): string[] {
+  const parts: string[] = []
+
+  if (condition.type) {
+    parts.push(createEventTypeCondition(condition.type))
+  }
+
+  condition.attrs?.forEach(attr =>
+    parts.push(createEventAttributeCondition(attr, condition.type))
+  )
+
+  condition.ud_attrs?.forEach(attr =>
+    parts.push(createUserDefinedEventAttributeCondition(attr))
+  )
+
+  condition.session_attrs?.forEach(attr =>
+    parts.push(createSessionAttributeCondition(attr))
+  )
+
+  return parts
+}
+
+/**
+ * Converts a single session condition object into an 
+ * array of its constituent CEL parts.
+ * Example output: ['attribute.session_duration > 300', 'attribute.user_country == "US"']
+ */
+function buildSessionConditionParts(condition: AttributeCondition): string[] {
+  return condition.attrs?.map(createSessionAttributeCondition) || []
+}
+
+/**
+ * Converts a single trace condition object into an 
+ * array of its constituent CEL parts.
+ * Example output: ['span_name.contains("HTTP")', 'trace.user_defined_attrs.is_critical == true']
+ */
+function buildTraceConditionParts(condition: TraceCondition): string[] {
+  const parts: string[] = []
+
+  if (condition.spanName) {
+    parts.push(createSpanNameCondition(condition.spanName, condition.operator))
+  }
+
+  condition.ud_attrs?.forEach(attr =>
+    parts.push(createSpanUserDefinedAttributeCondition(attr))
+  )
+
+  condition.session_attrs?.forEach(attr =>
+    parts.push(createSessionAttributeCondition(attr))
+  )
+
+  return parts
+}
+
+/**
+ * Joins an array of CEL parts for a 
+ * single condition using the AND (`&&`) operator.
+ * Example output: 'part1 && part2 && part3'
+ */
+function combineConditionParts(parts: string[]): string {
+  if (parts.length === 0) return ''
+  return parts.join(' && ')
+}
+
+/**
+ * Combines multiple completed condition strings 
+ * using specified logical operators (`&&` or `||`).
+ * Example output: '(cond1) && (cond2) || (cond3)'
+ */
+function combineConditionsWithLogicalOperators(
+  conditions: string[],
+  operators: ('AND' | 'OR')[]
+): string {
+  if (conditions.length === 0) return ''
+  if (conditions.length === 1) return conditions[0]
+
+  let result = `(${conditions[0]})`
+
+  for (let i = 0; i < operators.length && i + 1 < conditions.length; i++) {
+    const celOperator = LOGICAL_OPERATOR_MAPPINGS[operators[i]]
+    result = `${result} ${celOperator} (${conditions[i + 1]})`
+  }
+
+  return result
+}
+
+/**
+ * High-level processor for all event conditions.
+ * It builds, combines, and links all event conditions into a single CEL string.
+ * Example output: '(event_type == "anr" && exception.handled == false) || (event_type == "crash")'
+ */
+function processEventConditions(eventConditions: EventConditions | undefined): string | null {
+  if (!eventConditions?.conditions?.length) return null
+
+  const conditionStrings = eventConditions.conditions
+    .map(buildEventConditionParts)
+    .filter(parts => parts.length > 0)
+    .map(combineConditionParts)
+
+  return conditionStrings.length > 0
+    ? combineConditionsWithLogicalOperators(conditionStrings, eventConditions.operators || [])
+    : null
+}
+
+/**
+ * High-level processor for all session conditions.
+ * It builds, combines, and links all session conditions into a single CEL string.
+ * Example output: '(attribute.session_duration > 300) && (attribute.user_country == "US")'
+ */
+function processSessionConditions(sessionConditions: SessionConditions | undefined): string | null {
+  if (!sessionConditions?.conditions?.length) return null
+
+  const conditionStrings = sessionConditions.conditions
+    .map(buildSessionConditionParts)
+    .filter(parts => parts.length > 0)
+    .map(combineConditionParts)
+
+  return conditionStrings.length > 0
+    ? combineConditionsWithLogicalOperators(conditionStrings, sessionConditions.operators || [])
+    : null
+}
+
+/**
+ * High-level processor for all trace conditions.
+ * Example output: '(span_name.contains("HTTP")) || (trace.user_defined_attrs.is_critical == true)'
+ */
+function processTraceConditions(traceConditions: TraceConditions | undefined): string | null {
+  if (!traceConditions?.conditions?.length) return null
+
+  const conditionStrings = traceConditions.conditions
+    .map(buildTraceConditionParts)
+    .filter(parts => parts.length > 0)
+    .map(combineConditionParts)
+
+  return conditionStrings.length > 0
+    ? combineConditionsWithLogicalOperators(conditionStrings, traceConditions.operators || [])
+    : null
+}
+
+/**
+ * Wraps and joins the final event, session, and trace CEL groups with AND (`&&`).
+ * Each group is individually wrapped in parentheses.
+ */
+function wrapConditionGroups(conditionGroups: string[]): string {
+  if (conditionGroups.length === 0) return ''
+
+  if (conditionGroups.length === 1) {
+    return `(${conditionGroups[0]})`
+  }
+
+  const wrappedGroups = conditionGroups.map(group => `(${group})`)
+  return wrappedGroups.join(' && ')
+}
+
+/**
+ * Converts a structured `ParsedConditions` object into a final CEL expression string.
+ * This is the main entry point for the CEL generation logic.
+ */
+export function conditionsToCel(parsedConditions: ParsedConditions): string | null {
+  const eventCelExpression = processEventConditions(parsedConditions.event)
+  const traceCelExpression = processTraceConditions(parsedConditions.trace)
+  const sessionCelExpression = processSessionConditions(parsedConditions.session)
+
+  const conditionGroups = [eventCelExpression, traceCelExpression, sessionCelExpression]
+    .filter((group): group is string => Boolean(group))
+
+  if (conditionGroups.length === 0) {
+    return null
+  }
+
+  return wrapConditionGroups(conditionGroups)
+}
\ No newline at end of file
diff --git a/frontend/dashboard/app/utils/cel/cel_parser.ts b/frontend/dashboard/app/utils/cel/cel_parser.ts
new file mode 100644
index 000000000..6d859158d
--- /dev/null
+++ b/frontend/dashboard/app/utils/cel/cel_parser.ts
@@ -0,0 +1,618 @@
+/**
+ * CEL (Common Expression Language) Parser
+ * 
+ * This module parses tokenized CEL expressions into structured condition objects
+ * that can be used for event, session, and trace filtering. It builds an Abstract
+ * Syntax Tree (AST) and converts it into domain-specific condition formats.
+ */
+
+import { EventConditions, SessionConditions, TraceConditions, EventCondition, AttributeCondition, TraceCondition } from './conditions'
+import { CelTokenizer, Token, TokenType, CelParseError } from './cel_tokenizer'
+
+/**
+ * Result of parsing a CEL expression
+ */
+export interface ParsedConditions {
+  event?: EventConditions
+  session?: SessionConditions
+  trace?: TraceConditions
+}
+
+/**
+ * Represents a field path like "event.user_defined_attrs.key"
+ */
+interface FieldPath {
+  segments: string[]
+  position: number
+}
+
+/**
+ * Represents a literal value in the expression
+ */
+interface Literal {
+  type: 'string' | 'number' | 'boolean' | 'null'
+  value: string | number | boolean | null
+  position: number
+}
+
+/**
+ * Represents a comparison operation (field operator value)
+ */
+interface Comparison {
+  field: FieldPath
+  operator: string
+  value: Literal
+  position: number
+}
+
+/**
+ * Represents a logical operation (AND/OR) between expressions
+ */
+interface LogicalExpression {
+  left: Comparison | LogicalExpression
+  operator: 'AND' | 'OR'
+  right: Comparison | LogicalExpression
+  position: number
+}
+
+/**
+ * Union type for all expression types
+ */
+type Expression = Comparison | LogicalExpression
+
+/**
+ * Parser for CEL expressions that builds structured condition objects
+ */
+class CelParser {
+  private tokens: Token[]
+  private currentPosition = 0
+  private idGenerator = 0
+
+  // Condition builders for different types
+  private eventConditions: EventCondition[] = []
+  private sessionConditions: AttributeCondition[] = []
+  private traceConditions: TraceCondition[] = []
+
+  // Operator sequences for combining conditions
+  private eventOperators: ('AND' | 'OR')[] = []
+  private sessionOperators: ('AND' | 'OR')[] = []
+  private traceOperators: ('AND' | 'OR')[] = []
+
+  constructor(tokens: Token[]) {
+    this.tokens = tokens
+  }
+
+  /**
+   * Parses the tokens into structured conditions
+   * @returns Parsed conditions organized by type (event, session, trace)
+   */
+  parse(): ParsedConditions {
+    this.resetState()
+
+    try {
+      const ast = this.parseExpression()
+      this.convertAstToConditions(ast)
+      this.validateParsingComplete()
+      return this.buildResult()
+    } catch (error) {
+      return this.handleParsingError(error)
+    }
+  }
+
+  /**
+   * Resets parser state for a new parsing operation
+   */
+  private resetState(): void {
+    this.currentPosition = 0
+    this.idGenerator = 0
+    this.clearConditions()
+  }
+
+  /**
+   * Clears all condition arrays and operators
+   */
+  private clearConditions(): void {
+    this.eventConditions = []
+    this.sessionConditions = []
+    this.traceConditions = []
+    this.eventOperators = []
+    this.sessionOperators = []
+    this.traceOperators = []
+  }
+
+  /**
+   * Parses the top-level expression (handles OR operations)
+   */
+  private parseExpression(): Expression {
+    return this.parseOrExpression()
+  }
+
+  /**
+   * Parses OR expressions (lowest precedence logical operator)
+   */
+  private parseOrExpression(): Expression {
+    let left = this.parseAndExpression()
+
+    while (this.consumeIfMatches(TokenType.OR)) {
+      const operatorPos = this.previousToken().position
+      const right = this.parseAndExpression()
+      left = { left, operator: 'OR', right, position: operatorPos }
+    }
+
+    return left
+  }
+
+  /**
+   * Parses AND expressions (higher precedence than OR)
+   */
+  private parseAndExpression(): Expression {
+    let left = this.parsePrimaryExpression()
+
+    while (this.consumeIfMatches(TokenType.AND)) {
+      const operatorPos = this.previousToken().position
+      const right = this.parsePrimaryExpression()
+      left = { left, operator: 'AND', right, position: operatorPos }
+    }
+
+    return left
+  }
+
+  /**
+   * Parses primary expressions (comparisons and parenthesized expressions)
+   */
+  private parsePrimaryExpression(): Expression {
+    if (this.consumeIfMatches(TokenType.LPAREN)) {
+      const expr = this.parseExpression()
+      this.consumeExpected(TokenType.RPAREN, 'Expected closing parenthesis')
+      return expr
+    }
+
+    return this.parseComparison()
+  }
+
+  /**
+   * Parses a comparison expression (field operator value)
+   */
+  private parseComparison(): Comparison {
+    const field = this.parseFieldPath()
+    const operator = this.parseComparisonOperator()
+    const value = this.parseLiteral()
+
+    // Handle method call syntax (contains, startsWith)
+    if (operator === 'contains' || operator === 'startsWith') {
+      this.consumeExpected(TokenType.RPAREN, `Expected closing parenthesis after ${operator} method call`)
+    }
+
+    return { field, operator, value, position: field.position }
+  }
+
+  /**
+   * Parses a field path like "event.user_defined_attrs.key"
+   */
+  private parseFieldPath(): FieldPath {
+    const startPos = this.currentToken().position
+    const segments: string[] = []
+
+    this.validateIdentifierExpected()
+    segments.push(this.advance().value)
+
+    while (this.consumeIfMatches(TokenType.DOT)) {
+      // Stop if we encounter method calls
+      if (this.isCurrentToken(TokenType.CONTAINS) || this.isCurrentToken(TokenType.STARTS_WITH)) {
+        break
+      }
+
+      this.validateIdentifierExpected()
+      segments.push(this.advance().value)
+    }
+
+    return { segments, position: startPos }
+  }
+
+  /**
+   * Parses comparison operators including method calls
+   */
+  private parseComparisonOperator(): string {
+    const token = this.currentToken()
+
+    // Method call operators
+    if (this.consumeIfMatches(TokenType.CONTAINS, TokenType.STARTS_WITH)) {
+      const methodName = this.previousToken().value
+      this.consumeExpected(TokenType.LPAREN, `Expected opening parenthesis after ${methodName}`)
+      return methodName
+    }
+
+    // Standard comparison operators
+    if (this.consumeIfMatches(
+      TokenType.EQUALS, TokenType.NOT_EQUALS,
+      TokenType.GREATER_THAN, TokenType.LESS_THAN,
+      TokenType.GREATER_EQUAL, TokenType.LESS_EQUAL
+    )) {
+      return this.convertTokenTypeToOperator(this.previousToken().type)
+    }
+
+    throw new CelParseError(
+      'Expected comparison operator',
+      token.position,
+      token.value,
+      ['==', '!=', '>', '<', '>=', '<=', 'contains', 'startsWith']
+    )
+  }
+
+  /**
+   * Parses literal values (strings, numbers, booleans, null)
+   */
+  private parseLiteral(): Literal {
+    const token = this.currentToken()
+
+    if (this.consumeIfMatches(TokenType.STRING)) {
+      return { type: 'string', value: this.previousToken().value, position: token.position }
+    }
+    if (this.consumeIfMatches(TokenType.NUMBER)) {
+      return { type: 'number', value: parseFloat(this.previousToken().value), position: token.position }
+    }
+    if (this.consumeIfMatches(TokenType.BOOLEAN)) {
+      return { type: 'boolean', value: this.previousToken().value === 'true', position: token.position }
+    }
+    if (this.consumeIfMatches(TokenType.NULL)) {
+      return { type: 'null', value: null, position: token.position }
+    }
+
+    throw new CelParseError(
+      'Expected literal value',
+      token.position,
+      token.value,
+      ['string', 'number', 'boolean', 'null']
+    )
+  }
+
+  /**
+   * Converts the AST into structured conditions
+   */
+  private convertAstToConditions(expr: Expression): void {
+    this.processExpression(expr, [])
+  }
+
+  /**
+   * Recursively processes expressions and builds conditions
+   */
+  private processExpression(expr: Expression, operators: ('AND' | 'OR')[]): void {
+    if (this.isLogicalExpression(expr)) {
+      this.processExpression(expr.left, operators)
+      operators.push(expr.operator)
+      this.processExpression(expr.right, operators)
+    } else {
+      this.processComparison(expr, operators)
+    }
+  }
+
+  /**
+   * Processes a comparison and adds it to the appropriate condition list
+   */
+  private processComparison(comparison: Comparison, operators: ('AND' | 'OR')[]): void {
+    const category = this.categorizeFieldPath(comparison.field.segments)
+
+    switch (category) {
+      case 'event':
+        this.addEventCondition(comparison)
+        this.transferOperators(operators, this.eventOperators)
+        break
+      case 'session':
+        this.addSessionCondition(comparison)
+        this.transferOperators(operators, this.sessionOperators)
+        break
+      case 'trace':
+        this.addTraceCondition(comparison)
+        this.transferOperators(operators, this.traceOperators)
+        break
+    }
+  }
+
+  /**
+   * Determines the category of a field based on its path segments
+   */
+  private categorizeFieldPath(segments: string[]): 'event' | 'session' | 'trace' {
+    const firstSegment = segments[0]
+
+    if (firstSegment === 'event_type' || firstSegment === 'event') {
+      return 'event'
+    }
+    if (firstSegment === 'attribute') {
+      return 'session'
+    }
+    if (firstSegment === 'span_name' || firstSegment === 'trace') {
+      return 'trace'
+    }
+
+    // Default to event for unknown fields
+    return 'event'
+  }
+
+  /**
+   * Adds an event condition based on the comparison
+   */
+  private addEventCondition(comparison: Comparison): void {
+    const segments = comparison.field.segments
+
+    if (segments[0] === 'event_type') {
+      this.addEventTypeCondition(comparison)
+    } else if (this.isUserDefinedEventAttribute(segments)) {
+      this.addEventUserDefinedAttribute(comparison, segments)
+    } else {
+      this.addEventAttribute(comparison, segments)
+    }
+  }
+
+  /**
+   * Adds an event type condition
+   */
+  private addEventTypeCondition(comparison: Comparison): void {
+    const eventType = comparison.value.value as string
+    let condition = this.findEventConditionByType(eventType)
+
+    if (!condition) {
+      condition = this.createEventCondition(eventType)
+      this.eventConditions.push(condition)
+    }
+  }
+
+  /**
+   * Adds a user-defined event attribute
+   */
+  private addEventUserDefinedAttribute(comparison: Comparison, segments: string[]): void {
+    const key = segments.slice(2).join('.')
+    const condition = this.getLastEventCondition()
+
+    if (!condition) {
+      throw new CelParseError('User-defined attribute found without a preceding event_type', comparison.position)
+    }
+
+    condition.ud_attrs!.push(this.createAttributeFromComparison(comparison, key))
+  }
+
+  /**
+   * Adds a regular event attribute
+   */
+  private addEventAttribute(comparison: Comparison, segments: string[]): void {
+    const eventType = segments[0] === 'event' ? segments[1] : segments[0]
+    const fullPathKey = segments.join('.')
+
+    let condition = this.findEventConditionByType(eventType)
+    if (!condition) {
+      condition = this.createEventCondition(eventType)
+      this.eventConditions.push(condition)
+    }
+
+    condition.attrs!.push(this.createAttributeFromComparison(comparison, fullPathKey))
+  }
+
+  /**
+   * Adds a session condition
+   */
+  private addSessionCondition(comparison: Comparison): void {
+    const key = comparison.field.segments.join('.')
+    const condition: AttributeCondition = {
+      id: this.generateId(),
+      attrs: [this.createAttributeFromComparison(comparison, key)]
+    }
+    this.sessionConditions.push(condition)
+  }
+
+  /**
+   * Adds a trace condition
+   */
+  private addTraceCondition(comparison: Comparison): void {
+    const segments = comparison.field.segments
+
+    if (segments[0] === 'span_name') {
+      this.addSpanNameCondition(comparison)
+    } else if (this.isUserDefinedTraceAttribute(segments)) {
+      this.addTraceUserDefinedAttribute(comparison, segments)
+    }
+  }
+
+  /**
+   * Adds a span name condition
+   */
+  private addSpanNameCondition(comparison: Comparison): void {
+    const condition: TraceCondition = {
+      id: this.generateId(),
+      spanName: comparison.value.value as string,
+      operator: comparison.operator,
+      ud_attrs: [],
+      session_attrs: []
+    }
+    this.traceConditions.push(condition)
+  }
+
+  /**
+   * Adds a trace user-defined attribute
+   */
+  private addTraceUserDefinedAttribute(comparison: Comparison, segments: string[]): void {
+    const currentCondition = this.getLastTraceCondition()
+    if (!currentCondition) {
+      throw new CelParseError('Trace attribute found without a preceding span name', comparison.position)
+    }
+
+    const fullPathKey = segments.join('.')
+    currentCondition.ud_attrs!.push(this.createAttributeFromComparison(comparison, fullPathKey))
+  }
+
+  // Helper methods for token management
+  private consumeIfMatches(...types: TokenType[]): boolean {
+    if (types.some(type => this.isCurrentToken(type))) {
+      this.advance()
+      return true
+    }
+    return false
+  }
+
+  private isCurrentToken(type: TokenType): boolean {
+    return !this.isAtEnd() && this.currentToken().type === type
+  }
+
+  private advance(): Token {
+    if (!this.isAtEnd()) this.currentPosition++
+    return this.previousToken()
+  }
+
+  private isAtEnd(): boolean {
+    return this.currentToken().type === TokenType.EOF
+  }
+
+  private currentToken(): Token {
+    return this.tokens[this.currentPosition]
+  }
+
+  private previousToken(): Token {
+    return this.tokens[this.currentPosition - 1]
+  }
+
+  private consumeExpected(type: TokenType, message: string): Token {
+    if (this.isCurrentToken(type)) return this.advance()
+
+    const token = this.currentToken()
+    throw new CelParseError(message, token.position, token.value, [type])
+  }
+
+  // Helper methods for validation and utility
+  private validateIdentifierExpected(): void {
+    if (!this.isCurrentToken(TokenType.IDENTIFIER)) {
+      const token = this.currentToken()
+      throw new CelParseError(
+        'Expected field name',
+        token.position,
+        token.value,
+        ['identifier']
+      )
+    }
+  }
+
+  private validateParsingComplete(): void {
+    if (!this.isAtEnd()) {
+      const token = this.currentToken()
+      throw new CelParseError(
+        'Unexpected tokens after expression',
+        token.position,
+        token.value
+      )
+    }
+  }
+
+  private handleParsingError(error: unknown): ParsedConditions {
+    if (error instanceof CelParseError) {
+      console.error('CEL Parse Error:', error.message, 'at position', error.position, 'token:', error.token, 'expected:', error.expected)
+    } else {
+      console.error('Failed to parse CEL expression:', error)
+    }
+    return {}
+  }
+
+  private convertTokenTypeToOperator(type: TokenType): string {
+    switch (type) {
+      case TokenType.EQUALS:
+        return 'eq'
+      case TokenType.NOT_EQUALS:
+        return 'neq'
+      case TokenType.GREATER_THAN:
+        return 'gt'
+      case TokenType.LESS_THAN:
+        return 'lt'
+      case TokenType.GREATER_EQUAL:
+        return 'gte'
+      case TokenType.LESS_EQUAL:
+        return 'lte'
+      default:
+        throw new CelParseError('Invalid comparison operator', this.currentToken().position, this.currentToken().value)
+    }
+  }
+
+  // Helper methods for condition management
+  private generateId(): string {
+    return `id-${this.idGenerator++}`
+  }
+
+  private findEventConditionByType(eventType: string): EventCondition | undefined {
+    return this.eventConditions.find(c => c.type === eventType)
+  }
+
+  private createEventCondition(eventType: string): EventCondition {
+    return {
+      id: this.generateId(),
+      type: eventType,
+      attrs: [],
+      ud_attrs: [],
+      session_attrs: []
+    }
+  }
+
+  private getLastEventCondition(): EventCondition | undefined {
+    return this.eventConditions[this.eventConditions.length - 1]
+  }
+
+  private getLastTraceCondition(): TraceCondition | undefined {
+    return this.traceConditions[this.traceConditions.length - 1]
+  }
+
+  private createAttributeFromComparison(comparison: Comparison, key: string) {
+    const parsedKey = key.split('.').pop() || key
+    return {
+      id: this.generateId(),
+      key: parsedKey,
+      type: comparison.value.type === 'boolean' ? 'bool' : comparison.value.type,
+      value: comparison.value.value as string | number | boolean,
+      operator: comparison.operator
+    }
+  }
+
+  private isUserDefinedEventAttribute(segments: string[]): boolean {
+    return segments[0] === 'event' && segments[1] === 'user_defined_attrs'
+  }
+
+  private isUserDefinedTraceAttribute(segments: string[]): boolean {
+    return (segments[0] === 'trace') && segments[1] === 'user_defined_attrs'
+  }
+
+  private isLogicalExpression(expr: Expression): expr is LogicalExpression {
+    return 'operator' in expr && (expr.operator === 'AND' || expr.operator === 'OR')
+  }
+
+  private transferOperators(source: ('AND' | 'OR')[], target: ('AND' | 'OR')[]): void {
+    if (source.length > 0) {
+      target.push(...source)
+      source.length = 0
+    }
+  }
+
+  /**
+   * Builds the final result from parsed conditions
+   */
+  private buildResult(): ParsedConditions {
+    const result: ParsedConditions = {}
+
+    if (this.eventConditions.length > 0) {
+      result.event = { conditions: this.eventConditions, operators: this.eventOperators }
+    }
+    if (this.sessionConditions.length > 0) {
+      result.session = { conditions: this.sessionConditions, operators: this.sessionOperators }
+    }
+    if (this.traceConditions.length > 0) {
+      result.trace = { conditions: this.traceConditions, operators: this.traceOperators }
+    }
+
+    return result
+  }
+}
+
+/**
+ * Parses a CEL expression string into structured conditions
+ */
+export function celToConditions(expression: string): ParsedConditions {
+  if (!expression?.trim()) {
+    return { event: undefined, trace: undefined, session: undefined };
+  }
+  const tokenizer = new CelTokenizer(expression);
+  const tokens = tokenizer.tokenize();
+  const parser = new CelParser(tokens);
+  return parser.parse();
+}
\ No newline at end of file
diff --git a/frontend/dashboard/app/utils/cel/cel_tokenizer.ts b/frontend/dashboard/app/utils/cel/cel_tokenizer.ts
new file mode 100644
index 000000000..8a362dbe8
--- /dev/null
+++ b/frontend/dashboard/app/utils/cel/cel_tokenizer.ts
@@ -0,0 +1,314 @@
+/**
+ * CEL (Common Expression Language) Tokenizer
+ * 
+ * This module provides tokenization for CEL expressions, breaking down input strings
+ * into meaningful tokens for parsing.
+ */
+
+/**
+ * Error thrown during CEL parsing with detailed context information
+ */
+export class CelParseError extends Error {
+  constructor(
+    message: string,
+    public position: number,
+    public token?: string,
+    public expected?: string[]
+  ) {
+    const contextInfo = token ? ` (found: '${token}')` : ''
+    const expectedInfo = expected ? ` (expected: ${expected.join(' or ')})` : ''
+    super(`${message} at position ${position}${contextInfo}${expectedInfo}`)
+    this.name = 'CelParseError'
+  }
+}
+
+/**
+ * Token types supported by the CEL tokenizer
+ */
+export enum TokenType {
+  // Literal values
+  IDENTIFIER = 'IDENTIFIER',
+  STRING = 'STRING',
+  NUMBER = 'NUMBER',
+  BOOLEAN = 'BOOLEAN',
+  NULL = 'NULL',
+
+  // Comparison operators
+  EQUALS = 'EQUALS',
+  NOT_EQUALS = 'NOT_EQUALS',
+  GREATER_THAN = 'GREATER_THAN',
+  LESS_THAN = 'LESS_THAN',
+  GREATER_EQUAL = 'GREATER_EQUAL',
+  LESS_EQUAL = 'LESS_EQUAL',
+
+  // String methods
+  CONTAINS = 'CONTAINS',
+  STARTS_WITH = 'STARTS_WITH',
+
+  // Logical operators
+  AND = 'AND',
+  OR = 'OR',
+
+  // Punctuation
+  DOT = 'DOT',
+  LPAREN = 'LPAREN',
+  RPAREN = 'RPAREN',
+  COMMA = 'COMMA',
+
+  // End marker
+  EOF = 'EOF'
+}
+
+/**
+ * Represents a single token with its type, value, and position
+ */
+export interface Token {
+  type: TokenType
+  value: string
+  position: number
+}
+
+/**
+ * Tokenizes CEL expressions into a sequence of tokens
+ */
+export class CelTokenizer {
+  private input: string
+  private position = 0
+
+  constructor(input: string) {
+    this.input = input.trim()
+  }
+
+  /**
+   * Tokenizes the input string into an array of tokens
+   * @returns Array of tokens including EOF marker at the end
+   */
+  tokenize(): Token[] {
+    const tokens: Token[] = []
+    this.position = 0
+
+    while (this.position < this.input.length) {
+      this.skipWhitespace()
+      if (this.position >= this.input.length) break
+
+      const startPos = this.position
+      const token = this.readNextToken()
+      tokens.push({ ...token, position: startPos })
+    }
+
+    tokens.push({ type: TokenType.EOF, value: '', position: this.position })
+    return tokens
+  }
+
+  /**
+   * Reads and returns the next token from the input
+   */
+  private readNextToken(): Omit<Token, 'position'> {
+    // Multi-character operators first
+    const twoCharToken = this.tryReadTwoCharOperator()
+    if (twoCharToken) return twoCharToken
+
+    const char = this.currentChar()
+
+    // Single character tokens
+    const singleCharToken = this.tryReadSingleCharToken(char)
+    if (singleCharToken) return singleCharToken
+
+    // Complex tokens that require parsing
+    if (char === '"') return { type: TokenType.STRING, value: this.readStringLiteral() }
+    if (this.isDigit(char)) return { type: TokenType.NUMBER, value: this.readNumber() }
+    if (this.isIdentifierStart(char)) {
+      const identifier = this.readIdentifier()
+      return { type: this.classifyIdentifier(identifier), value: identifier }
+    }
+
+    throw new CelParseError(`Unexpected character '${char}'`, this.position)
+  }
+
+  /**
+   * Skips whitespace characters
+   */
+  private skipWhitespace(): void {
+    while (this.position < this.input.length && /\s/.test(this.currentChar())) {
+      this.position++
+    }
+  }
+
+  /**
+   * Attempts to read a two-character operator
+   */
+  private tryReadTwoCharOperator(): Omit<Token, 'position'> | null {
+    if (this.position + 1 >= this.input.length) return null
+
+    const twoChar = this.input.slice(this.position, this.position + 2)
+    const tokenType = this.getTwoCharOperatorType(twoChar)
+    
+    if (tokenType) {
+      this.position += 2
+      return { type: tokenType, value: twoChar }
+    }
+    
+    return null
+  }
+
+  /**
+   * Maps two-character sequences to their token types
+   */
+  private getTwoCharOperatorType(twoChar: string): TokenType | null {
+    const operators: Record<string, TokenType> = {
+      '==': TokenType.EQUALS,
+      '!=': TokenType.NOT_EQUALS,
+      '>=': TokenType.GREATER_EQUAL,
+      '<=': TokenType.LESS_EQUAL,
+      '&&': TokenType.AND,
+      '||': TokenType.OR
+    }
+    return operators[twoChar] || null
+  }
+
+  /**
+   * Attempts to read a single-character token
+   */
+  private tryReadSingleCharToken(char: string): Omit<Token, 'position'> | null {
+    const tokenType = this.getSingleCharTokenType(char)
+    if (tokenType) {
+      this.position++
+      return { type: tokenType, value: char }
+    }
+    return null
+  }
+
+  /**
+   * Maps single characters to their token types
+   */
+  private getSingleCharTokenType(char: string): TokenType | null {
+    const tokens: Record<string, TokenType> = {
+      '(': TokenType.LPAREN,
+      ')': TokenType.RPAREN,
+      '.': TokenType.DOT,
+      ',': TokenType.COMMA,
+      '>': TokenType.GREATER_THAN,
+      '<': TokenType.LESS_THAN
+    }
+    return tokens[char] || null
+  }
+
+  /**
+   * Classifies an identifier as a keyword.
+   */
+  private classifyIdentifier(identifier: string): TokenType {
+    const keywords: Record<string, TokenType> = {
+      'true': TokenType.BOOLEAN,
+      'false': TokenType.BOOLEAN,
+      'null': TokenType.NULL,
+      'contains': TokenType.CONTAINS,
+      'startsWith': TokenType.STARTS_WITH
+    }
+    return keywords[identifier] || TokenType.IDENTIFIER
+  }
+
+  /**
+   * Reads a string literal, handling escape sequences
+   */
+  private readStringLiteral(): string {
+    this.position++ // Skip opening quote
+    let value = ''
+
+    while (this.position < this.input.length && this.currentChar() !== '"') {
+      if (this.currentChar() === '\\' && this.position + 1 < this.input.length) {
+        this.position++
+        value += this.readEscapeSequence(this.currentChar())
+      } else {
+        value += this.currentChar()
+      }
+      this.position++
+    }
+
+    if (this.position >= this.input.length) {
+      throw new CelParseError('Unterminated string literal', this.position - value.length - 1)
+    }
+
+    this.position++ // Skip closing quote
+    return value
+  }
+
+  /**
+   * Converts escape sequences to their actual characters
+   */
+  private readEscapeSequence(char: string): string {
+    const escapeChars: Record<string, string> = {
+      'n': '\n',
+      't': '\t',
+      'r': '\r',
+      '\\': '\\',
+      '"': '"'
+    }
+    return escapeChars[char] || char
+  }
+
+  /**
+   * Reads a numeric literal (integer or float)
+   */
+  private readNumber(): string {
+    let value = ''
+    let hasDecimal = false
+
+    while (this.position < this.input.length) {
+      const char = this.currentChar()
+      if (this.isDigit(char)) {
+        value += char
+        this.position++
+      } else if (char === '.' && !hasDecimal) {
+        hasDecimal = true
+        value += char
+        this.position++
+      } else {
+        break
+      }
+    }
+
+    return value
+  }
+
+  /**
+   * Reads an identifier (variable name, function name, etc.)
+   */
+  private readIdentifier(): string {
+    let value = ''
+
+    while (this.position < this.input.length && this.isIdentifierChar(this.currentChar())) {
+      value += this.currentChar()
+      this.position++
+    }
+
+    return value
+  }
+
+  /**
+   * Gets the current character without advancing position
+   */
+  private currentChar(): string {
+    return this.input[this.position]
+  }
+
+  /**
+   * Checks if a character is a digit
+   */
+  private isDigit(char: string): boolean {
+    return /\d/.test(char)
+  }
+
+  /**
+   * Checks if a character can start an identifier
+   */
+  private isIdentifierStart(char: string): boolean {
+    return /[a-zA-Z_]/.test(char)
+  }
+
+  /**
+   * Checks if a character can be part of an identifier
+   */
+  private isIdentifierChar(char: string): boolean {
+    return /[a-zA-Z0-9_]/.test(char)
+  }
+}
\ No newline at end of file
diff --git a/frontend/dashboard/app/utils/cel/conditions.ts b/frontend/dashboard/app/utils/cel/conditions.ts
new file mode 100644
index 000000000..580a6a37d
--- /dev/null
+++ b/frontend/dashboard/app/utils/cel/conditions.ts
@@ -0,0 +1,41 @@
+// Shared attribute field type
+export interface AttributeField {
+    id: string
+    key: string
+    type: string
+    value: string | boolean | number
+    hint?: string
+    operator?: string
+    hasError?: boolean
+    errorMessage?: string
+}
+
+export interface EventCondition {
+    id: string
+    type: string
+    attrs: AttributeField[]
+    ud_attrs: AttributeField[]
+    session_attrs: AttributeField[]
+}
+
+export interface AttributeCondition {
+    id: string
+    attrs: AttributeField[]
+}
+
+export interface TraceCondition {
+    id: string
+    spanName: string
+    operator: string
+    ud_attrs: AttributeField[]
+    session_attrs: AttributeField[]
+}
+
+export interface Conditions<T> {
+    conditions: T[]
+    operators: ('AND' | 'OR')[]
+}
+
+export type EventConditions = Conditions<EventCondition>
+export type SessionConditions = Conditions<AttributeCondition>
+export type TraceConditions = Conditions<TraceCondition>
\ No newline at end of file

From bf7e55309146da10a7159f8a3f9640f8d255eb11 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 21:02:04 +0530
Subject: [PATCH 19/98] refactor(frontend): change name to DataTargeting

---
 frontend/dashboard/app/[teamId]/data/page.tsx | 52 +++++++++----------
 .../{[filterId] => ruleId}/edit/page.tsx      |  0
 frontend/dashboard/app/api/api_calls.ts       | 30 +++++------
 .../edit_default_rule_dialog.tsx              |  8 +--
 .../rule_builder_card.tsx                     |  0
 .../rule_overrides_table.tsx                  | 10 ++--
 .../sampling_rate_input.tsx                   |  0
 7 files changed, 50 insertions(+), 50 deletions(-)
 rename frontend/dashboard/app/[teamId]/data/trace/{[filterId] => ruleId}/edit/page.tsx (100%)
 rename frontend/dashboard/app/components/{data_rule => targeting}/edit_default_rule_dialog.tsx (95%)
 rename frontend/dashboard/app/components/{data_rule => targeting}/rule_builder_card.tsx (100%)
 rename frontend/dashboard/app/components/{data_rule => targeting}/rule_overrides_table.tsx (90%)
 rename frontend/dashboard/app/components/{data_rule => targeting}/sampling_rate_input.tsx (100%)

diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index b0c0ef970..4f492b72c 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -1,29 +1,29 @@
 "use client"
 
-import { DataRulesApiStatus, DataRulesResponse, emptyDataFiltersResponse, fetchDataFiltersFromServer, FilterSource } from '@/app/api/api_calls'
+import { DataTargetingRulesApiStatus, DataTargetingRulesResponse, emptyDataFiltersResponse, fetchDataTargetingRulesFromServer, FilterSource } from '@/app/api/api_calls'
 import Filters, { AppVersionsInitialSelectionType, defaultFilters } from '@/app/components/filters'
 import LoadingBar from '@/app/components/loading_bar'
-import { DataRuleCollectionConfig, DataRuleType } from '@/app/api/api_calls'
+import { DataTargetingCollectionConfig, DataTargetingRuleType } from '@/app/api/api_calls'
 import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { Button } from '@/app/components/button'
 import { Plus, Pencil } from 'lucide-react'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/app/components/dropdown_menu'
-import EditDefaultRuleDialog, { DefaultRuleState as DefaultRuleEditState } from '@/app/components/data_rule/edit_default_rule_dialog'
-import RulesTable from '@/app/components/data_rule/rule_overrides_table'
+import EditDefaultRuleDialog, { DefaultRuleState as DefaultRuleEditState } from '@/app/components/targeting/edit_default_rule_dialog'
+import RulesTable from '@/app/components/targeting/rule_overrides_table'
 
 interface PageState {
-    dataRulesApiStatus: DataRulesApiStatus
+    dataTargetingRulesApiStatus: DataTargetingRulesApiStatus
     filters: typeof defaultFilters
-    dataRules: DataRulesResponse
+    dataTargetingRules: DataTargetingRulesResponse
     defaultRuleEditState: DefaultRuleEditState | null
 }
 
-const isDefaultRule = (type: DataRuleType): boolean => {
+const isDefaultRule = (type: DataTargetingRuleType): boolean => {
     return type === 'all_events' || type === 'all_traces'
 }
 
-const getCollectionConfigDisplay = (collectionConfig: DataRuleCollectionConfig): string => {
+const getCollectionConfigDisplay = (collectionConfig: DataTargetingCollectionConfig): string => {
     switch (collectionConfig.mode) {
         case 'sample_rate':
             return `Collect all at ${collectionConfig.sample_rate}% sample rate`
@@ -40,9 +40,9 @@ export default function DataFilters({ params }: { params: { teamId: string } })
     const router = useRouter()
 
     const initialState: PageState = {
-        dataRulesApiStatus: DataRulesApiStatus.Success,
+        dataTargetingRulesApiStatus: DataTargetingRulesApiStatus.Success,
         filters: defaultFilters,
-        dataRules: emptyDataFiltersResponse,
+        dataTargetingRules: emptyDataFiltersResponse,
         defaultRuleEditState: null,
     }
 
@@ -56,21 +56,21 @@ export default function DataFilters({ params }: { params: { teamId: string } })
     }
 
     const getDataFilters = async () => {
-        updatePageState({ dataRulesApiStatus: DataRulesApiStatus.Loading })
+        updatePageState({ dataTargetingRulesApiStatus: DataTargetingRulesApiStatus.Loading })
 
-        const result = await fetchDataFiltersFromServer(pageState.filters.app!.id)
+        const result = await fetchDataTargetingRulesFromServer(pageState.filters.app!.id)
 
         switch (result.status) {
-            case DataRulesApiStatus.Error:
-                updatePageState({ dataRulesApiStatus: DataRulesApiStatus.Error })
+            case DataTargetingRulesApiStatus.Error:
+                updatePageState({ dataTargetingRulesApiStatus: DataTargetingRulesApiStatus.Error })
                 break
-            case DataRulesApiStatus.NoFilters:
-                updatePageState({ dataRulesApiStatus: DataRulesApiStatus.NoFilters })
+            case DataTargetingRulesApiStatus.NoFilters:
+                updatePageState({ dataTargetingRulesApiStatus: DataTargetingRulesApiStatus.NoFilters })
                 break
-            case DataRulesApiStatus.Success:
+            case DataTargetingRulesApiStatus.Success:
                 updatePageState({
-                    dataRulesApiStatus: DataRulesApiStatus.Success,
-                    dataRules: result.data
+                    dataTargetingRulesApiStatus: DataTargetingRulesApiStatus.Success,
+                    dataTargetingRules: result.data
                 })
                 break
         }
@@ -81,7 +81,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         if (pageState.filters.ready !== updatedFilters.ready || pageState.filters.serialisedFilters !== updatedFilters.serialisedFilters) {
             updatePageState({
                 filters: updatedFilters,
-                dataRules: emptyDataFiltersResponse,
+                dataTargetingRules: emptyDataFiltersResponse,
             })
         }
     }
@@ -98,10 +98,10 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         // getDataFilters()
     }, [pageState.filters])
 
-    const defaultRules = pageState.dataRules.results.filter(df => isDefaultRule(df.type))
+    const defaultRules = pageState.dataTargetingRules.results.filter(df => isDefaultRule(df.type))
     const allEventsFilter = defaultRules.find(df => df.type === 'all_events')
     const allTracesFilter = defaultRules.find(df => df.type === 'all_traces')
-    const overrideFilters = pageState.dataRules.results.filter(df => !isDefaultRule(df.type))
+    const overrideFilters = pageState.dataTargetingRules.results.filter(df => !isDefaultRule(df.type))
     const eventFilters = overrideFilters.filter(df => df.type === 'event')
     const traceFilters = overrideFilters.filter(df => df.type === 'trace')
 
@@ -138,7 +138,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         <Button
                             variant="outline"
                             className="font-display border border-black select-none"
-                            disabled={pageState.dataRulesApiStatus === DataRulesApiStatus.Loading}
+                            disabled={pageState.dataTargetingRulesApiStatus === DataTargetingRulesApiStatus.Loading}
                         >
                             <Plus /> Create Rule
                         </Button>
@@ -183,14 +183,14 @@ export default function DataFilters({ params }: { params: { teamId: string } })
 
             {/* Error state for data rules fetch */}
             {pageState.filters.ready
-                && pageState.dataRulesApiStatus === DataRulesApiStatus.Error
+                && pageState.dataTargetingRulesApiStatus === DataTargetingRulesApiStatus.Error
                 && <p className="text-lg font-display">Error fetching data filters, please change filters, refresh page or select a different app to try again</p>}
 
             {/* Main data rules UI */}
             {pageState.filters.ready
-                && (pageState.dataRulesApiStatus === DataRulesApiStatus.Success || pageState.dataRulesApiStatus === DataRulesApiStatus.Loading) &&
+                && (pageState.dataTargetingRulesApiStatus === DataTargetingRulesApiStatus.Success || pageState.dataTargetingRulesApiStatus === DataTargetingRulesApiStatus.Loading) &&
                 <div className="flex flex-col items-start w-full">
-                    <div className={`py-1 w-full ${pageState.dataRulesApiStatus === DataRulesApiStatus.Loading ? 'visible' : 'invisible'}`}>
+                    <div className={`py-1 w-full ${pageState.dataTargetingRulesApiStatus === DataTargetingRulesApiStatus.Loading ? 'visible' : 'invisible'}`}>
                         <LoadingBar />
                     </div>
 
diff --git a/frontend/dashboard/app/[teamId]/data/trace/[filterId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/trace/ruleId/edit/page.tsx
similarity index 100%
rename from frontend/dashboard/app/[teamId]/data/trace/[filterId]/edit/page.tsx
rename to frontend/dashboard/app/[teamId]/data/trace/ruleId/edit/page.tsx
diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index 084032008..514487b41 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -353,7 +353,7 @@ export enum AlertsOverviewApiStatus {
   Cancelled,
 }
 
-export enum DataRulesApiStatus {
+export enum DataTargetingRulesApiStatus {
   Loading,
   Success,
   Error,
@@ -1031,7 +1031,7 @@ export const emptyAlertsOverviewResponse = {
   }[],
 }
 
-export type DataRulesResponse = {
+export type DataTargetingRulesResponse = {
   meta: {
     next: false,
     previous: false,
@@ -1039,28 +1039,28 @@ export type DataRulesResponse = {
   results: DataRule[],
 }
 
-export type DataRuleType = "event" | "trace" | "all_events" | "all_traces";
+export type DataTargetingRuleType = "event" | "trace" | "all_events" | "all_traces";
 
-export type DataRuleCollectionConfig =
+export type DataTargetingCollectionConfig =
   | { mode: 'sample_rate'; sample_rate: number }
   | { mode: 'timeline_only' }
   | { mode: 'disable' };
 
-export type DataRuleAttachmentConfig = 'layout_snapshot' | 'screenshot' | 'none';
+export type DataTargetingAttachmentConfig = 'layout_snapshot' | 'screenshot' | 'none';
 
 export type DataRule = {
   id: string,
-  type: DataRuleType,
+  type: DataTargetingRuleType,
   rule: string,
-  collection_config: DataRuleCollectionConfig,
-  attachment_config: DataRuleAttachmentConfig,
+  collection_config: DataTargetingCollectionConfig,
+  attachment_config: DataTargetingAttachmentConfig,
   created_at: string,
   created_by: string,
   updated_at: string,
   updated_by: string,
 }
 
-export const emptyDataFiltersResponse: DataRulesResponse = {
+export const emptyDataFiltersResponse: DataTargetingRulesResponse = {
   meta: {
     next: false,
     previous: false,
@@ -2481,11 +2481,11 @@ export const fetchAlertsOverviewFromServer = async (
   }
 }
 
-export const fetchDataFiltersFromServer = async (
+export const fetchDataTargetingRulesFromServer = async (
   appId: String,
   type?: string,
 ) => {
-  let url = `/api/apps/${appId}/dataFilters`
+  let url = `/api/apps/${appId}/dataTargetingRules`
   if (type) {
     url += `?type=${type}`
   }
@@ -2494,17 +2494,17 @@ export const fetchDataFiltersFromServer = async (
     const res = await measureAuth.fetchMeasure(url)
 
     if (!res.ok) {
-      return { status: DataRulesApiStatus.Error, data: null }
+      return { status: DataTargetingRulesApiStatus.Error, data: null }
     }
 
     const data = await res.json()
 
     if (data.results === null) {
-      return { status: DataRulesApiStatus.NoFilters, data: null }
+      return { status: DataTargetingRulesApiStatus.NoFilters, data: null }
     } else {
-      return { status: DataRulesApiStatus.Success, data: data }
+      return { status: DataTargetingRulesApiStatus.Success, data: data }
     }
   } catch {
-    return { status: DataRulesApiStatus.Cancelled, data: null }
+    return { status: DataTargetingRulesApiStatus.Cancelled, data: null }
   }
 }
\ No newline at end of file
diff --git a/frontend/dashboard/app/components/data_rule/edit_default_rule_dialog.tsx b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
similarity index 95%
rename from frontend/dashboard/app/components/data_rule/edit_default_rule_dialog.tsx
rename to frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
index feab0f717..3ea82991e 100644
--- a/frontend/dashboard/app/components/data_rule/edit_default_rule_dialog.tsx
+++ b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
@@ -1,14 +1,14 @@
 "use client"
 
-import { DataRuleCollectionConfig, DataRuleType } from '@/app/api/api_calls'
+import { DataTargetingCollectionConfig, DataTargetingRuleType } from '@/app/api/api_calls'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/app/components/dialog'
 import { Button } from '@/app/components/button'
-import SamplingRateInput from '@/app/components/data_rule/sampling_rate_input'
+import SamplingRateInput from '@/app/components/targeting/sampling_rate_input'
 
 export interface DefaultRuleState {
     id: string
-    type: DataRuleType
-    collectionMode: DataRuleCollectionConfig['mode']
+    type: DataTargetingRuleType
+    collectionMode: DataTargetingCollectionConfig['mode']
     sampleRate?: number
 }
 
diff --git a/frontend/dashboard/app/components/data_rule/rule_builder_card.tsx b/frontend/dashboard/app/components/targeting/rule_builder_card.tsx
similarity index 100%
rename from frontend/dashboard/app/components/data_rule/rule_builder_card.tsx
rename to frontend/dashboard/app/components/targeting/rule_builder_card.tsx
diff --git a/frontend/dashboard/app/components/data_rule/rule_overrides_table.tsx b/frontend/dashboard/app/components/targeting/rule_overrides_table.tsx
similarity index 90%
rename from frontend/dashboard/app/components/data_rule/rule_overrides_table.tsx
rename to frontend/dashboard/app/components/targeting/rule_overrides_table.tsx
index 72d7e13de..a8856e826 100644
--- a/frontend/dashboard/app/components/data_rule/rule_overrides_table.tsx
+++ b/frontend/dashboard/app/components/targeting/rule_overrides_table.tsx
@@ -1,12 +1,12 @@
 "use client"
 
-import { DataRulesResponse, DataRuleCollectionConfig, DataRuleAttachmentConfig, DataRuleType } from '@/app/api/api_calls'
+import { DataTargetingRulesResponse, DataTargetingCollectionConfig, DataTargetingAttachmentConfig, DataTargetingRuleType } from '@/app/api/api_calls'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/app/components/table'
 import { formatDateToHumanReadableDate, formatDateToHumanReadableTime } from '@/app/utils/time_utils'
 import Paginator from '@/app/components/paginator'
 import { useState, useEffect } from 'react'
 
-const getFilterDisplayText = (type: DataRuleType, filter: string): string => {
+const getFilterDisplayText = (type: DataTargetingRuleType, filter: string): string => {
     switch (type) {
         case 'all_events':
             return 'All Events'
@@ -17,7 +17,7 @@ const getFilterDisplayText = (type: DataRuleType, filter: string): string => {
     }
 }
 
-const getCollectionConfigDisplay = (collectionConfig: DataRuleCollectionConfig): string => {
+const getCollectionConfigDisplay = (collectionConfig: DataTargetingCollectionConfig): string => {
     switch (collectionConfig.mode) {
         case 'sample_rate':
             return `Collect all at ${collectionConfig.sample_rate}% sample rate`
@@ -30,7 +30,7 @@ const getCollectionConfigDisplay = (collectionConfig: DataRuleCollectionConfig):
     }
 }
 
-const getAttachmentConfigDisplay = (attachmentConfig: DataRuleAttachmentConfig): string => {
+const getAttachmentConfigDisplay = (attachmentConfig: DataTargetingAttachmentConfig): string => {
     if (attachmentConfig === 'none') {
         return ''
     } else if (attachmentConfig === 'layout_snapshot') {
@@ -41,7 +41,7 @@ const getAttachmentConfigDisplay = (attachmentConfig: DataRuleAttachmentConfig):
     return attachmentConfig
 }
 
-type RuleFilter = DataRulesResponse['results'][0]
+type RuleFilter = DataTargetingRulesResponse['results'][0]
 
 interface RulesTableProps {
     rules: RuleFilter[]
diff --git a/frontend/dashboard/app/components/data_rule/sampling_rate_input.tsx b/frontend/dashboard/app/components/targeting/sampling_rate_input.tsx
similarity index 100%
rename from frontend/dashboard/app/components/data_rule/sampling_rate_input.tsx
rename to frontend/dashboard/app/components/targeting/sampling_rate_input.tsx

From fc6c1c8a8122ce2aebb5ed955ddbfc8aa4714063 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 21:06:06 +0530
Subject: [PATCH 20/98] feat(frontend): add empty session targeting pages

---
 frontend/dashboard/app/[teamId]/data/session/[ruleId]/page.tsx    | 0
 frontend/dashboard/app/[teamId]/data/session/create/page.tsx      | 0
 .../app/[teamId]/data/trace/{ruleId => [ruleId]}/edit/page.tsx    | 0
 3 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 frontend/dashboard/app/[teamId]/data/session/[ruleId]/page.tsx
 create mode 100644 frontend/dashboard/app/[teamId]/data/session/create/page.tsx
 rename frontend/dashboard/app/[teamId]/data/trace/{ruleId => [ruleId]}/edit/page.tsx (100%)

diff --git a/frontend/dashboard/app/[teamId]/data/session/[ruleId]/page.tsx b/frontend/dashboard/app/[teamId]/data/session/[ruleId]/page.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/dashboard/app/[teamId]/data/session/create/page.tsx b/frontend/dashboard/app/[teamId]/data/session/create/page.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/dashboard/app/[teamId]/data/trace/ruleId/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/trace/[ruleId]/edit/page.tsx
similarity index 100%
rename from frontend/dashboard/app/[teamId]/data/trace/ruleId/edit/page.tsx
rename to frontend/dashboard/app/[teamId]/data/trace/[ruleId]/edit/page.tsx

From f4f36883523b33fa765432571c1c3889b324d5a9 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 21:40:53 +0530
Subject: [PATCH 21/98] feat(frontend): separate events and traces targeting
 state

---
 frontend/dashboard/app/[teamId]/data/page.tsx | 136 ++++++-----
 frontend/dashboard/app/api/api_calls.ts       | 222 +++++++++++-------
 .../targeting/edit_default_rule_dialog.tsx    |   6 +-
 .../targeting/rule_overrides_table.tsx        |  14 +-
 4 files changed, 226 insertions(+), 152 deletions(-)

diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index 4f492b72c..cb46b4e63 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -1,9 +1,9 @@
 "use client"
 
-import { DataTargetingRulesApiStatus, DataTargetingRulesResponse, emptyDataFiltersResponse, fetchDataTargetingRulesFromServer, FilterSource } from '@/app/api/api_calls'
+import { EventTargetingApiStatus, EventTargetingResponse, emptyEventTargetingResponse, fetchEventTargetingRulesFromServer, TraceTargetingApiStatus, TraceTargetingResponse, emptyTraceTargetingResponse, fetchTraceTargetingRulesFromServer, FilterSource } from '@/app/api/api_calls'
 import Filters, { AppVersionsInitialSelectionType, defaultFilters } from '@/app/components/filters'
 import LoadingBar from '@/app/components/loading_bar'
-import { DataTargetingCollectionConfig, DataTargetingRuleType } from '@/app/api/api_calls'
+import { EventTargetingCollectionConfig } from '@/app/api/api_calls'
 import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { Button } from '@/app/components/button'
@@ -13,17 +13,15 @@ import EditDefaultRuleDialog, { DefaultRuleState as DefaultRuleEditState } from
 import RulesTable from '@/app/components/targeting/rule_overrides_table'
 
 interface PageState {
-    dataTargetingRulesApiStatus: DataTargetingRulesApiStatus
+    eventTargetingApiStatus: EventTargetingApiStatus
+    traceTargetingApiStatus: TraceTargetingApiStatus
     filters: typeof defaultFilters
-    dataTargetingRules: DataTargetingRulesResponse
+    eventTargetingRules: EventTargetingResponse
+    traceTargetingRules: TraceTargetingResponse
     defaultRuleEditState: DefaultRuleEditState | null
 }
 
-const isDefaultRule = (type: DataTargetingRuleType): boolean => {
-    return type === 'all_events' || type === 'all_traces'
-}
-
-const getCollectionConfigDisplay = (collectionConfig: DataTargetingCollectionConfig): string => {
+const getCollectionConfigDisplay = (collectionConfig: EventTargetingCollectionConfig): string => {
     switch (collectionConfig.mode) {
         case 'sample_rate':
             return `Collect all at ${collectionConfig.sample_rate}% sample rate`
@@ -40,9 +38,11 @@ export default function DataFilters({ params }: { params: { teamId: string } })
     const router = useRouter()
 
     const initialState: PageState = {
-        dataTargetingRulesApiStatus: DataTargetingRulesApiStatus.Success,
+        eventTargetingApiStatus: EventTargetingApiStatus.Success,
+        traceTargetingApiStatus: TraceTargetingApiStatus.Success,
         filters: defaultFilters,
-        dataTargetingRules: emptyDataFiltersResponse,
+        eventTargetingRules: emptyEventTargetingResponse,
+        traceTargetingRules: emptyTraceTargetingResponse,
         defaultRuleEditState: null,
     }
 
@@ -56,24 +56,37 @@ export default function DataFilters({ params }: { params: { teamId: string } })
     }
 
     const getDataFilters = async () => {
-        updatePageState({ dataTargetingRulesApiStatus: DataTargetingRulesApiStatus.Loading })
-
-        const result = await fetchDataTargetingRulesFromServer(pageState.filters.app!.id)
-
-        switch (result.status) {
-            case DataTargetingRulesApiStatus.Error:
-                updatePageState({ dataTargetingRulesApiStatus: DataTargetingRulesApiStatus.Error })
-                break
-            case DataTargetingRulesApiStatus.NoFilters:
-                updatePageState({ dataTargetingRulesApiStatus: DataTargetingRulesApiStatus.NoFilters })
-                break
-            case DataTargetingRulesApiStatus.Success:
-                updatePageState({
-                    dataTargetingRulesApiStatus: DataTargetingRulesApiStatus.Success,
-                    dataTargetingRules: result.data
-                })
-                break
+        updatePageState({
+            eventTargetingApiStatus: EventTargetingApiStatus.Loading,
+            traceTargetingApiStatus: TraceTargetingApiStatus.Loading
+        })
+
+        const [eventResult, traceResult] = await Promise.all([
+            fetchEventTargetingRulesFromServer(pageState.filters.app!.id),
+            fetchTraceTargetingRulesFromServer(pageState.filters.app!.id)
+        ])
+
+        if (eventResult.status === EventTargetingApiStatus.Error || traceResult.status === TraceTargetingApiStatus.Error) {
+            updatePageState({
+                eventTargetingApiStatus: EventTargetingApiStatus.Error,
+                traceTargetingApiStatus: TraceTargetingApiStatus.Error
+            })
+            return
         }
+
+        const eventStatus = eventResult.status === EventTargetingApiStatus.NoData
+            ? EventTargetingApiStatus.NoData
+            : EventTargetingApiStatus.Success
+        const traceStatus = traceResult.status === TraceTargetingApiStatus.NoData
+            ? TraceTargetingApiStatus.NoData
+            : TraceTargetingApiStatus.Success
+
+        updatePageState({
+            eventTargetingApiStatus: eventStatus,
+            traceTargetingApiStatus: traceStatus,
+            eventTargetingRules: eventResult.data || emptyEventTargetingResponse,
+            traceTargetingRules: traceResult.data || emptyTraceTargetingResponse
+        })
     }
 
     const handleFiltersChanged = (updatedFilters: typeof defaultFilters) => {
@@ -81,7 +94,8 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         if (pageState.filters.ready !== updatedFilters.ready || pageState.filters.serialisedFilters !== updatedFilters.serialisedFilters) {
             updatePageState({
                 filters: updatedFilters,
-                dataTargetingRules: emptyDataFiltersResponse,
+                eventTargetingRules: emptyEventTargetingResponse,
+                traceTargetingRules: emptyTraceTargetingResponse,
             })
         }
     }
@@ -98,19 +112,35 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         // getDataFilters()
     }, [pageState.filters])
 
-    const defaultRules = pageState.dataTargetingRules.results.filter(df => isDefaultRule(df.type))
-    const allEventsFilter = defaultRules.find(df => df.type === 'all_events')
-    const allTracesFilter = defaultRules.find(df => df.type === 'all_traces')
-    const overrideFilters = pageState.dataTargetingRules.results.filter(df => !isDefaultRule(df.type))
-    const eventFilters = overrideFilters.filter(df => df.type === 'event')
-    const traceFilters = overrideFilters.filter(df => df.type === 'trace')
+    const isLoading = () => {
+        return pageState.eventTargetingApiStatus === EventTargetingApiStatus.Loading ||
+            pageState.traceTargetingApiStatus === TraceTargetingApiStatus.Loading
+    }
+
+    const hasError = () => {
+        return pageState.eventTargetingApiStatus === EventTargetingApiStatus.Error ||
+            pageState.traceTargetingApiStatus === TraceTargetingApiStatus.Error
+    }
+
+    const canShowContent = () => {
+        const eventReady = pageState.eventTargetingApiStatus === EventTargetingApiStatus.Success ||
+            pageState.eventTargetingApiStatus === EventTargetingApiStatus.Loading
+        const traceReady = pageState.traceTargetingApiStatus === TraceTargetingApiStatus.Success ||
+            pageState.traceTargetingApiStatus === TraceTargetingApiStatus.Loading
+        return pageState.filters.ready && eventReady && traceReady
+    }
+
+    const eventsDefaultRule = pageState.eventTargetingRules.result.default;
+    const eventsOverideRules = pageState.eventTargetingRules.result.overrides;
+    const traceDefaultRule = pageState.traceTargetingRules.result.default;
+    const traceOverrideRules = pageState.traceTargetingRules.result.overrides;
 
-    const handleEditFilter = (dataFilter: typeof overrideFilters[0]) => {
+    const handleEditFilter = (dataFilter: typeof eventsOverideRules[0] | typeof traceOverrideRules[0]) => {
         const filterType = dataFilter.type === 'event' ? 'event' : 'trace'
         router.push(`/${params.teamId}/data/${filterType}/${dataFilter.id}/edit`)
     }
 
-    const handleEditDefaultRule = (dataFilter: typeof defaultRules[0]) => {
+    const handleEditDefaultRule = (dataFilter: typeof eventsDefaultRule | typeof traceDefaultRule) => {
         updatePageState({
             defaultRuleEditState: {
                 id: dataFilter.id,
@@ -138,7 +168,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         <Button
                             variant="outline"
                             className="font-display border border-black select-none"
-                            disabled={pageState.dataTargetingRulesApiStatus === DataTargetingRulesApiStatus.Loading}
+                            disabled={pageState.eventTargetingApiStatus === EventTargetingApiStatus.Loading}
                         >
                             <Plus /> Create Rule
                         </Button>
@@ -182,15 +212,13 @@ export default function DataFilters({ params }: { params: { teamId: string } })
             <div className="py-2" />
 
             {/* Error state for data rules fetch */}
-            {pageState.filters.ready
-                && pageState.dataTargetingRulesApiStatus === DataTargetingRulesApiStatus.Error
-                && <p className="text-lg font-display">Error fetching data filters, please change filters, refresh page or select a different app to try again</p>}
+            {pageState.filters.ready && hasError() &&
+                <p className="text-lg font-display">Error fetching data filters, please change filters, refresh page or select a different app to try again</p>}
 
             {/* Main data rules UI */}
-            {pageState.filters.ready
-                && (pageState.dataTargetingRulesApiStatus === DataTargetingRulesApiStatus.Success || pageState.dataTargetingRulesApiStatus === DataTargetingRulesApiStatus.Loading) &&
+            {canShowContent() &&
                 <div className="flex flex-col items-start w-full">
-                    <div className={`py-1 w-full ${pageState.dataTargetingRulesApiStatus === DataTargetingRulesApiStatus.Loading ? 'visible' : 'invisible'}`}>
+                    <div className={`py-1 w-full ${isLoading() ? 'visible' : 'invisible'}`}>
                         <LoadingBar />
                     </div>
 
@@ -202,9 +230,9 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         {/* Default Event Rule */}
                         <div className="flex items-center gap-2">
                             <p className="font-display text-gray-500">Default Rule</p>
-                            {allEventsFilter && (
+                            {eventsDefaultRule && (
                                 <button
-                                    onClick={() => handleEditDefaultRule(allEventsFilter)}
+                                    onClick={() => handleEditDefaultRule(eventsDefaultRule)}
                                     className="p-1 hover:bg-yellow-200 rounded"
                                 >
                                     <Pencil className="w-4 h-4 text-gray-600" />
@@ -212,13 +240,13 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                             )}
                         </div>
                         <div className="py-2" />
-                        {allEventsFilter && (
+                        {eventsDefaultRule && (
                             <div className="text-sm font-body text-gray-700">
-                                {getCollectionConfigDisplay(allEventsFilter.collection_config)}
+                                {getCollectionConfigDisplay(eventsDefaultRule.collection_config)}
                             </div>
                         )}
 
-                        <RulesTable rules={eventFilters} onRuleClick={handleEditFilter} />
+                        <RulesTable rules={eventsOverideRules} onRuleClick={handleEditFilter} />
                     </div>
 
                     <div className="py-12" />
@@ -231,9 +259,9 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         {/* Default Trace Rule */}
                         <div className="flex items-center gap-2">
                             <p className="font-display text-gray-500">Default Rule</p>
-                            {allTracesFilter && (
+                            {traceDefaultRule && (
                                 <button
-                                    onClick={() => handleEditDefaultRule(allTracesFilter)}
+                                    onClick={() => handleEditDefaultRule(traceDefaultRule)}
                                     className="p-1 hover:bg-yellow-200 rounded"
                                 >
                                     <Pencil className="w-4 h-4 text-gray-600" />
@@ -241,13 +269,13 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                             )}
                         </div>
                         <div className="py-2" />
-                        {allTracesFilter && (
+                        {traceDefaultRule && (
                             <div className="text-sm font-body text-gray-700">
-                                {getCollectionConfigDisplay(allTracesFilter.collection_config)}
+                                {getCollectionConfigDisplay(traceDefaultRule.collection_config)}
                             </div>
                         )}
 
-                        <RulesTable rules={traceFilters} onRuleClick={handleEditFilter} />
+                        <RulesTable rules={traceOverrideRules} onRuleClick={handleEditFilter} />
                     </div>
                 </div>}
 
diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index 514487b41..d7231f795 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -353,14 +353,21 @@ export enum AlertsOverviewApiStatus {
   Cancelled,
 }
 
-export enum DataTargetingRulesApiStatus {
+export enum EventTargetingApiStatus {
   Loading,
   Success,
   Error,
-  NoFilters,
+  NoData,
   Cancelled,
 }
 
+export enum TraceTargetingApiStatus {
+  Loading,
+  Success,
+  Error,
+  NoData,
+  Cancelled,
+}
 
 export enum SessionType {
   All = "All Sessions",
@@ -1031,119 +1038,138 @@ export const emptyAlertsOverviewResponse = {
   }[],
 }
 
-export type DataTargetingRulesResponse = {
+export type EventTargetingResponse = {
   meta: {
     next: false,
     previous: false,
   },
-  results: DataRule[],
-}
+  result: {
+    default: EventTargetingRule,
+    overrides: EventTargetingRule[]
+  },
+};
 
-export type DataTargetingRuleType = "event" | "trace" | "all_events" | "all_traces";
+export type EventTargetingRuleType = 'all_events' | 'all_traces' | 'event' | 'trace';
 
-export type DataTargetingCollectionConfig =
+export type EventTargetingCollectionConfig =
   | { mode: 'sample_rate'; sample_rate: number }
   | { mode: 'timeline_only' }
   | { mode: 'disable' };
 
-export type DataTargetingAttachmentConfig = 'layout_snapshot' | 'screenshot' | 'none';
+export type EventTargetingAttachmentConfig = 'layout_snapshot' | 'screenshot' | 'none';
 
-export type DataRule = {
+export type EventTargetingRule = {
   id: string,
-  type: DataTargetingRuleType,
+  type: EventTargetingRuleType,
   rule: string,
-  collection_config: DataTargetingCollectionConfig,
-  attachment_config: DataTargetingAttachmentConfig,
+  collection_config: EventTargetingCollectionConfig,
+  attachment_config: EventTargetingAttachmentConfig,
   created_at: string,
   created_by: string,
   updated_at: string,
   updated_by: string,
 }
 
-export const emptyDataFiltersResponse: DataTargetingRulesResponse = {
+export type TraceTargetingResponse = {
   meta: {
     next: false,
     previous: false,
   },
-  results: [
-    {
+  result: {
+    default: TraceTargetingRule,
+    overrides: TraceTargetingRule[]
+  },
+};
+
+export type TraceTargetingCollectionConfig =
+  | { mode: 'sample_rate'; sample_rate: number }
+  | { mode: 'timeline_only' }
+  | { mode: 'disable' };
+
+export type TraceTargetingRule = {
+  id: string,
+  type: EventTargetingRuleType,
+  rule: string,
+  collection_config: TraceTargetingCollectionConfig,
+  created_at: string,
+  created_by: string,
+  updated_at: string,
+  updated_by: string,
+}
+
+export const emptyEventTargetingResponse: EventTargetingResponse = {
+  meta: {
+    next: false,
+    previous: false,
+  },
+  result: {
+    default: {
       id: "df-global-001",
-      type: "all_events",
+      type: 'all_events',
       rule: 'event_type == "*"',
-      collection_config: { mode: 'timeline_only'},
+      collection_config: { mode: 'timeline_only' },
       attachment_config: 'none',
       created_at: "2024-01-01T00:00:00Z",
       created_by: "system@example.com",
       updated_at: "2024-01-01T00:00:00Z",
       updated_by: "system@example.com",
     },
-    {
-      id: "df-global-002",
-      type: "all_traces",
-      rule: 'span.name == "*"',
-      collection_config: { mode: 'sample_rate', sample_rate: 1 },
-      attachment_config: 'none',
+    overrides: [
+      {
+        id: "df-001",
+        type: 'event',
+        rule: "event.type == 'click' && event.target == 'checkout_button'",
+        collection_config: { mode: 'sample_rate', sample_rate: 0.5 },
+        attachment_config: 'screenshot',
+        created_at: "2024-01-15T10:30:00Z",
+        created_by: "user1@example.com",
+        updated_at: "2024-02-20T14:45:00Z",
+        updated_by: "user2@example.com",
+      },
+      {
+        id: "df-003",
+        type: 'event',
+        rule: "event.name == 'app_background' && session.is_crash == true",
+        collection_config: { mode: 'disable' },
+        attachment_config: 'none',
+        created_at: "2024-02-01T12:00:00Z",
+        created_by: "developer@example.com",
+        updated_at: "2024-03-10T09:30:00Z",
+        updated_by: "lead@example.com",
+      },
+      {
+        id: "df-005",
+        type: 'event',
+        rule: "event.type == 'gesture' && device.manufacturer == 'Samsung'",
+        collection_config: { mode: 'sample_rate', sample_rate: 1.0 },
+        attachment_config: 'screenshot',
+        created_at: "2024-03-05T13:45:00Z",
+        created_by: "user3@example.com",
+        updated_at: "2024-03-05T13:45:00Z",
+        updated_by: "user3@example.com",
+      },
+    ]
+  },
+}
+
+export const emptyTraceTargetingResponse: TraceTargetingResponse = {
+  meta: {
+    next: false,
+    previous: false,
+  },
+  result: {
+    default: {
+      id: "df-global-traces-001",
+      type: 'all_traces',
+      rule: 'trace_type == "*"',
+      collection_config: { mode: 'timeline_only' },
       created_at: "2024-01-01T00:00:00Z",
       created_by: "system@example.com",
       updated_at: "2024-01-01T00:00:00Z",
       updated_by: "system@example.com",
     },
-    {
-      id: "df-001",
-      type: "event",
-      rule: "event.type == 'click' && event.target == 'checkout_button'",
-      collection_config: { mode: 'sample_rate', sample_rate: 0.5 },
-      attachment_config: 'screenshot',
-      created_at: "2024-01-15T10:30:00Z",
-      created_by: "user1@example.com",
-      updated_at: "2024-02-20T14:45:00Z",
-      updated_by: "user2@example.com",
-    },
-    {
-      id: "df-002",
-      type: "trace",
-      rule: "trace.duration > 5000 && trace.status == 'error'",
-      collection_config: { mode: 'timeline_only' },
-      attachment_config: 'layout_snapshot',
-      created_at: "2024-01-20T08:15:00Z",
-      created_by: "admin@example.com",
-      updated_at: "2024-01-20T08:15:00Z",
-      updated_by: "admin@example.com",
-    },
-    {
-      id: "df-003",
-      type: "event",
-      rule: "event.name == 'app_background' && session.is_crash == true",
-      collection_config: { mode: 'disable' },
-      attachment_config: 'none',
-      created_at: "2024-02-01T12:00:00Z",
-      created_by: "developer@example.com",
-      updated_at: "2024-03-10T09:30:00Z",
-      updated_by: "lead@example.com",
-    },
-    {
-      id: "df-004",
-      type: "trace",
-      rule: "trace.name == 'network_request' && trace.http.status_code >= 400",
-      collection_config: { mode: 'sample_rate', sample_rate: 0.25 },
-      attachment_config: 'none',
-      created_at: "2024-02-10T16:20:00Z",
-      created_by: "qa@example.com",
-      updated_at: "2024-02-28T11:15:00Z",
-      updated_by: "qa@example.com",
-    },
-    {
-      id: "df-005",
-      type: "event",
-      rule: "event.type == 'gesture' && device.manufacturer == 'Samsung'",
-      collection_config: { mode: 'sample_rate', sample_rate: 1.0 },
-      attachment_config: 'screenshot',
-      created_at: "2024-03-05T13:45:00Z",
-      created_by: "user3@example.com",
-      updated_at: "2024-03-05T13:45:00Z",
-      updated_by: "user3@example.com",
-    },
-  ],
+    overrides: []
+  },
 }
 
 export class AppVersion {
@@ -2481,30 +2507,50 @@ export const fetchAlertsOverviewFromServer = async (
   }
 }
 
-export const fetchDataTargetingRulesFromServer = async (
+export const fetchEventTargetingRulesFromServer = async (
   appId: String,
-  type?: string,
 ) => {
-  let url = `/api/apps/${appId}/dataTargetingRules`
-  if (type) {
-    url += `?type=${type}`
+  let url = `/api/apps/${appId}/targetingRules/events`
+
+  try {
+    const res = await measureAuth.fetchMeasure(url)
+
+    if (!res.ok) {
+      return { status: EventTargetingApiStatus.Error, data: null }
+    }
+
+    const data = await res.json()
+
+    if (data.results === null) {
+      return { status: EventTargetingApiStatus.NoData, data: null }
+    } else {
+      return { status: EventTargetingApiStatus.Success, data: data }
+    }
+  } catch {
+    return { status: EventTargetingApiStatus.Cancelled, data: null }
   }
+}
+
+export const fetchTraceTargetingRulesFromServer = async (
+  appId: String,
+) => {
+  let url = `/api/apps/${appId}/targetingRules/traces`
 
   try {
     const res = await measureAuth.fetchMeasure(url)
 
     if (!res.ok) {
-      return { status: DataTargetingRulesApiStatus.Error, data: null }
+      return { status: TraceTargetingApiStatus.Error, data: null }
     }
 
     const data = await res.json()
 
     if (data.results === null) {
-      return { status: DataTargetingRulesApiStatus.NoFilters, data: null }
+      return { status: TraceTargetingApiStatus.NoData, data: null }
     } else {
-      return { status: DataTargetingRulesApiStatus.Success, data: data }
+      return { status: TraceTargetingApiStatus.Success, data: data }
     }
   } catch {
-    return { status: DataTargetingRulesApiStatus.Cancelled, data: null }
+    return { status: TraceTargetingApiStatus.Cancelled, data: null }
   }
 }
\ No newline at end of file
diff --git a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
index 3ea82991e..a4360459a 100644
--- a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
+++ b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
@@ -1,14 +1,14 @@
 "use client"
 
-import { DataTargetingCollectionConfig, DataTargetingRuleType } from '@/app/api/api_calls'
+import { EventTargetingCollectionConfig, EventTargetingRuleType } from '@/app/api/api_calls'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/app/components/dialog'
 import { Button } from '@/app/components/button'
 import SamplingRateInput from '@/app/components/targeting/sampling_rate_input'
 
 export interface DefaultRuleState {
     id: string
-    type: DataTargetingRuleType
-    collectionMode: DataTargetingCollectionConfig['mode']
+    type: EventTargetingRuleType
+    collectionMode: EventTargetingCollectionConfig['mode']
     sampleRate?: number
 }
 
diff --git a/frontend/dashboard/app/components/targeting/rule_overrides_table.tsx b/frontend/dashboard/app/components/targeting/rule_overrides_table.tsx
index a8856e826..c256ae070 100644
--- a/frontend/dashboard/app/components/targeting/rule_overrides_table.tsx
+++ b/frontend/dashboard/app/components/targeting/rule_overrides_table.tsx
@@ -1,12 +1,12 @@
 "use client"
 
-import { DataTargetingRulesResponse, DataTargetingCollectionConfig, DataTargetingAttachmentConfig, DataTargetingRuleType } from '@/app/api/api_calls'
+import { EventTargetingRule, TraceTargetingRule, EventTargetingCollectionConfig, EventTargetingAttachmentConfig, EventTargetingRuleType } from '@/app/api/api_calls'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/app/components/table'
 import { formatDateToHumanReadableDate, formatDateToHumanReadableTime } from '@/app/utils/time_utils'
 import Paginator from '@/app/components/paginator'
 import { useState, useEffect } from 'react'
 
-const getFilterDisplayText = (type: DataTargetingRuleType, filter: string): string => {
+const getFilterDisplayText = (type: EventTargetingRuleType, filter: string): string => {
     switch (type) {
         case 'all_events':
             return 'All Events'
@@ -17,7 +17,7 @@ const getFilterDisplayText = (type: DataTargetingRuleType, filter: string): stri
     }
 }
 
-const getCollectionConfigDisplay = (collectionConfig: DataTargetingCollectionConfig): string => {
+const getCollectionConfigDisplay = (collectionConfig: EventTargetingCollectionConfig): string => {
     switch (collectionConfig.mode) {
         case 'sample_rate':
             return `Collect all at ${collectionConfig.sample_rate}% sample rate`
@@ -30,8 +30,8 @@ const getCollectionConfigDisplay = (collectionConfig: DataTargetingCollectionCon
     }
 }
 
-const getAttachmentConfigDisplay = (attachmentConfig: DataTargetingAttachmentConfig): string => {
-    if (attachmentConfig === 'none') {
+const getAttachmentConfigDisplay = (attachmentConfig?: EventTargetingAttachmentConfig): string => {
+    if (!attachmentConfig || attachmentConfig === 'none') {
         return ''
     } else if (attachmentConfig === 'layout_snapshot') {
         return 'With layout snapshot'
@@ -41,7 +41,7 @@ const getAttachmentConfigDisplay = (attachmentConfig: DataTargetingAttachmentCon
     return attachmentConfig
 }
 
-type RuleFilter = DataTargetingRulesResponse['results'][0]
+type RuleFilter = EventTargetingRule | TraceTargetingRule
 
 interface RulesTableProps {
     rules: RuleFilter[]
@@ -108,7 +108,7 @@ export default function RulesTable({ rules, onRuleClick }: RulesTableProps) {
                                 <p className='truncate select-none font-mono text-sm'>{getFilterDisplayText(dataFilter.type, dataFilter.rule)}</p>
                                 <div className='py-1' />
                                 <p className='text-xs truncate text-gray-500 select-none'>{getCollectionConfigDisplay(dataFilter.collection_config)}</p>
-                                <p className='text-xs truncate text-gray-500 select-none'>{getAttachmentConfigDisplay(dataFilter.attachment_config)}</p>
+                                <p className='text-xs truncate text-gray-500 select-none'>{getAttachmentConfigDisplay('attachment_config' in dataFilter ? dataFilter.attachment_config : undefined)}</p>
                             </TableCell>
                             <TableCell className="w-[20%] text-center p-4">
                                 <p className='truncate select-none'>{formatDateToHumanReadableDate(dataFilter.updated_at)}</p>

From 28557fe22e932867072a5ed82e0358c615497eef Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 21:47:58 +0530
Subject: [PATCH 22/98] feat(frontend): implement pagination for both APIs

---
 frontend/dashboard/app/[teamId]/data/page.tsx | 50 +++++++++++++++++--
 frontend/dashboard/app/api/api_calls.ts       | 14 ++++++
 .../targeting/rule_overrides_table.tsx        | 36 ++++---------
 3 files changed, 69 insertions(+), 31 deletions(-)

diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index cb46b4e63..ebca6bf18 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -18,9 +18,13 @@ interface PageState {
     filters: typeof defaultFilters
     eventTargetingRules: EventTargetingResponse
     traceTargetingRules: TraceTargetingResponse
+    eventPaginationOffset: number
+    tracePaginationOffset: number
     defaultRuleEditState: DefaultRuleEditState | null
 }
 
+const paginationLimit = 5
+
 const getCollectionConfigDisplay = (collectionConfig: EventTargetingCollectionConfig): string => {
     switch (collectionConfig.mode) {
         case 'sample_rate':
@@ -44,6 +48,8 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         eventTargetingRules: emptyEventTargetingResponse,
         traceTargetingRules: emptyTraceTargetingResponse,
         defaultRuleEditState: null,
+        eventPaginationOffset: 0,
+        tracePaginationOffset: 0,
     }
 
     const [pageState, setPageState] = useState<PageState>(initialState)
@@ -62,8 +68,8 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         })
 
         const [eventResult, traceResult] = await Promise.all([
-            fetchEventTargetingRulesFromServer(pageState.filters.app!.id),
-            fetchTraceTargetingRulesFromServer(pageState.filters.app!.id)
+            fetchEventTargetingRulesFromServer(pageState.filters.app!.id, paginationLimit, pageState.eventPaginationOffset),
+            fetchTraceTargetingRulesFromServer(pageState.filters.app!.id, paginationLimit, pageState.tracePaginationOffset)
         ])
 
         if (eventResult.status === EventTargetingApiStatus.Error || traceResult.status === TraceTargetingApiStatus.Error) {
@@ -96,10 +102,28 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                 filters: updatedFilters,
                 eventTargetingRules: emptyEventTargetingResponse,
                 traceTargetingRules: emptyTraceTargetingResponse,
+                eventPaginationOffset: 0,
+                tracePaginationOffset: 0,
             })
         }
     }
 
+    const handleEventNextPage = () => {
+        updatePageState({ eventPaginationOffset: pageState.eventPaginationOffset + paginationLimit })
+    }
+
+    const handleEventPrevPage = () => {
+        updatePageState({ eventPaginationOffset: Math.max(0, pageState.eventPaginationOffset - paginationLimit) })
+    }
+
+    const handleTraceNextPage = () => {
+        updatePageState({ tracePaginationOffset: pageState.tracePaginationOffset + paginationLimit })
+    }
+
+    const handleTracePrevPage = () => {
+        updatePageState({ tracePaginationOffset: Math.max(0, pageState.tracePaginationOffset - paginationLimit) })
+    }
+
     useEffect(() => {
         if (!pageState.filters.ready) {
             return
@@ -110,7 +134,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
 
         // TODO: Re-enable API call when ready
         // getDataFilters()
-    }, [pageState.filters])
+    }, [pageState.filters, pageState.eventPaginationOffset, pageState.tracePaginationOffset])
 
     const isLoading = () => {
         return pageState.eventTargetingApiStatus === EventTargetingApiStatus.Loading ||
@@ -246,7 +270,15 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                             </div>
                         )}
 
-                        <RulesTable rules={eventsOverideRules} onRuleClick={handleEditFilter} />
+                        <RulesTable
+                            rules={eventsOverideRules}
+                            onRuleClick={handleEditFilter}
+                            prevEnabled={pageState.eventTargetingRules.meta.previous}
+                            nextEnabled={pageState.eventTargetingRules.meta.next}
+                            onNext={handleEventNextPage}
+                            onPrev={handleEventPrevPage}
+                            showPaginator={eventsOverideRules.length > 0}
+                        />
                     </div>
 
                     <div className="py-12" />
@@ -275,7 +307,15 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                             </div>
                         )}
 
-                        <RulesTable rules={traceOverrideRules} onRuleClick={handleEditFilter} />
+                        <RulesTable
+                            rules={traceOverrideRules}
+                            onRuleClick={handleEditFilter}
+                            prevEnabled={pageState.traceTargetingRules.meta.previous}
+                            nextEnabled={pageState.traceTargetingRules.meta.next}
+                            onNext={handleTraceNextPage}
+                            onPrev={handleTracePrevPage}
+                            showPaginator={traceOverrideRules.length > 0}
+                        />
                     </div>
                 </div>}
 
diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index d7231f795..4a9a4d85f 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -2509,9 +2509,16 @@ export const fetchAlertsOverviewFromServer = async (
 
 export const fetchEventTargetingRulesFromServer = async (
   appId: String,
+  limit: number,
+  offset: number,
 ) => {
   let url = `/api/apps/${appId}/targetingRules/events`
 
+  const searchParams = new URLSearchParams()
+  searchParams.append("limit", String(limit))
+  searchParams.append("offset", String(offset))
+  url += `?${searchParams.toString()}`
+
   try {
     const res = await measureAuth.fetchMeasure(url)
 
@@ -2533,9 +2540,16 @@ export const fetchEventTargetingRulesFromServer = async (
 
 export const fetchTraceTargetingRulesFromServer = async (
   appId: String,
+  limit: number,
+  offset: number,
 ) => {
   let url = `/api/apps/${appId}/targetingRules/traces`
 
+  const searchParams = new URLSearchParams()
+  searchParams.append("limit", String(limit))
+  searchParams.append("offset", String(offset))
+  url += `?${searchParams.toString()}`
+
   try {
     const res = await measureAuth.fetchMeasure(url)
 
diff --git a/frontend/dashboard/app/components/targeting/rule_overrides_table.tsx b/frontend/dashboard/app/components/targeting/rule_overrides_table.tsx
index c256ae070..e9de6d626 100644
--- a/frontend/dashboard/app/components/targeting/rule_overrides_table.tsx
+++ b/frontend/dashboard/app/components/targeting/rule_overrides_table.tsx
@@ -4,7 +4,6 @@ import { EventTargetingRule, TraceTargetingRule, EventTargetingCollectionConfig,
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/app/components/table'
 import { formatDateToHumanReadableDate, formatDateToHumanReadableTime } from '@/app/utils/time_utils'
 import Paginator from '@/app/components/paginator'
-import { useState, useEffect } from 'react'
 
 const getFilterDisplayText = (type: EventTargetingRuleType, filter: string): string => {
     switch (type) {
@@ -46,45 +45,30 @@ type RuleFilter = EventTargetingRule | TraceTargetingRule
 interface RulesTableProps {
     rules: RuleFilter[]
     onRuleClick: (rule: RuleFilter) => void
+    prevEnabled: boolean
+    nextEnabled: boolean
+    onNext: () => void
+    onPrev: () => void
+    showPaginator: boolean
 }
 
-const paginationLimit = 5
-
-export default function RulesTable({ rules, onRuleClick }: RulesTableProps) {
-    const [paginationOffset, setPaginationOffset] = useState(0)
-
-    useEffect(() => {
-        setPaginationOffset(0)
-    }, [rules])
-
+export default function RulesTable({ rules, onRuleClick, prevEnabled, nextEnabled, onNext, onPrev, showPaginator }: RulesTableProps) {
     if (rules.length === 0) {
         return null
     }
 
-    const handleNextPage = () => {
-        setPaginationOffset(paginationOffset + paginationLimit)
-    }
-
-    const handlePrevPage = () => {
-        setPaginationOffset(Math.max(0, paginationOffset - paginationLimit))
-    }
-
-    const prevEnabled = paginationOffset > 0
-    const nextEnabled = paginationOffset + paginationLimit < rules.length
-    const paginatedRules = rules.slice(paginationOffset, paginationOffset + paginationLimit)
-
     return (
         <>
             <div className="py-6" />
             <div className="w-full flex items-center justify-between">
                 <p className="font-display text-gray-500">Overrides</p>
-                {rules.length > paginationLimit && (
+                {showPaginator && (
                     <Paginator
                         prevEnabled={prevEnabled}
                         nextEnabled={nextEnabled}
                         displayText=""
-                        onNext={handleNextPage}
-                        onPrev={handlePrevPage}
+                        onNext={onNext}
+                        onPrev={onPrev}
                     />
                 )}
             </div>
@@ -98,7 +82,7 @@ export default function RulesTable({ rules, onRuleClick }: RulesTableProps) {
                     </TableRow>
                 </TableHeader>
                 <TableBody>
-                    {paginatedRules.map((dataFilter, idx) => (
+                    {rules.map((dataFilter, idx) => (
                         <TableRow
                             key={`${idx}-${dataFilter.id}`}
                             className="font-body cursor-pointer hover:bg-yellow-200 focus-visible:border-yellow-200 select-none"

From 09d6a32ce66327680461077c7243a94fee1de753 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 22:13:39 +0530
Subject: [PATCH 23/98] feat(frontend): refactor edit default rule flow

---
 frontend/dashboard/app/[teamId]/data/page.tsx |  69 ++++---
 frontend/dashboard/app/api/api_calls.ts       |   9 -
 .../targeting/edit_default_rule_dialog.tsx    | 177 +++++++++++-------
 3 files changed, 146 insertions(+), 109 deletions(-)

diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index ebca6bf18..e2616be6d 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -9,8 +9,9 @@ import { useEffect, useState } from 'react'
 import { Button } from '@/app/components/button'
 import { Plus, Pencil } from 'lucide-react'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/app/components/dropdown_menu'
-import EditDefaultRuleDialog, { DefaultRuleState as DefaultRuleEditState } from '@/app/components/targeting/edit_default_rule_dialog'
+import EditDefaultRuleDialog from '@/app/components/targeting/edit_default_rule_dialog'
 import RulesTable from '@/app/components/targeting/rule_overrides_table'
+import { toastPositive, toastNegative } from '@/app/utils/use_toast'
 
 interface PageState {
     eventTargetingApiStatus: EventTargetingApiStatus
@@ -20,7 +21,7 @@ interface PageState {
     traceTargetingRules: TraceTargetingResponse
     eventPaginationOffset: number
     tracePaginationOffset: number
-    defaultRuleEditState: DefaultRuleEditState | null
+    editingDefaultRule: 'event' | 'trace' | null
 }
 
 const paginationLimit = 5
@@ -47,9 +48,9 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         filters: defaultFilters,
         eventTargetingRules: emptyEventTargetingResponse,
         traceTargetingRules: emptyTraceTargetingResponse,
-        defaultRuleEditState: null,
         eventPaginationOffset: 0,
         tracePaginationOffset: 0,
+        editingDefaultRule: null,
     }
 
     const [pageState, setPageState] = useState<PageState>(initialState)
@@ -159,28 +160,16 @@ export default function DataFilters({ params }: { params: { teamId: string } })
     const traceDefaultRule = pageState.traceTargetingRules.result.default;
     const traceOverrideRules = pageState.traceTargetingRules.result.overrides;
 
-    const handleEditFilter = (dataFilter: typeof eventsOverideRules[0] | typeof traceOverrideRules[0]) => {
-        const filterType = dataFilter.type === 'event' ? 'event' : 'trace'
+    const handleEditFilter = (dataFilter: typeof eventsOverideRules[0] | typeof traceOverrideRules[0], filterType: 'event' | 'trace') => {
         router.push(`/${params.teamId}/data/${filterType}/${dataFilter.id}/edit`)
     }
 
-    const handleEditDefaultRule = (dataFilter: typeof eventsDefaultRule | typeof traceDefaultRule) => {
-        updatePageState({
-            defaultRuleEditState: {
-                id: dataFilter.id,
-                type: dataFilter.type,
-                collectionMode: dataFilter.collection_config.mode,
-                sampleRate: dataFilter.collection_config.mode === 'sample_rate' ? dataFilter.collection_config.sample_rate : undefined
-            }
-        })
-    }
-
-    const handleSaveDefaultRule = () => {
-        updatePageState({ defaultRuleEditState: null })
+    const handleDefaultRuleUpdateSuccess = () => {
+        toastPositive('Rule updated successfully')
     }
 
-    const handleCancelDefaultRule = () => {
-        updatePageState({ defaultRuleEditState: null })
+    const handleDefaultRuleUpdateError = (error: string) => {
+        toastNegative('Failed to update rule', error)
     }
 
     return (
@@ -256,7 +245,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                             <p className="font-display text-gray-500">Default Rule</p>
                             {eventsDefaultRule && (
                                 <button
-                                    onClick={() => handleEditDefaultRule(eventsDefaultRule)}
+                                    onClick={() => updatePageState({ editingDefaultRule: 'event' })}
                                     className="p-1 hover:bg-yellow-200 rounded"
                                 >
                                     <Pencil className="w-4 h-4 text-gray-600" />
@@ -272,7 +261,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
 
                         <RulesTable
                             rules={eventsOverideRules}
-                            onRuleClick={handleEditFilter}
+                            onRuleClick={(rule) => handleEditFilter(rule, 'event')}
                             prevEnabled={pageState.eventTargetingRules.meta.previous}
                             nextEnabled={pageState.eventTargetingRules.meta.next}
                             onNext={handleEventNextPage}
@@ -293,7 +282,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                             <p className="font-display text-gray-500">Default Rule</p>
                             {traceDefaultRule && (
                                 <button
-                                    onClick={() => handleEditDefaultRule(traceDefaultRule)}
+                                    onClick={() => updatePageState({ editingDefaultRule: 'trace' })}
                                     className="p-1 hover:bg-yellow-200 rounded"
                                 >
                                     <Pencil className="w-4 h-4 text-gray-600" />
@@ -309,7 +298,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
 
                         <RulesTable
                             rules={traceOverrideRules}
-                            onRuleClick={handleEditFilter}
+                            onRuleClick={(rule) => handleEditFilter(rule, 'trace')}
                             prevEnabled={pageState.traceTargetingRules.meta.previous}
                             nextEnabled={pageState.traceTargetingRules.meta.next}
                             onNext={handleTraceNextPage}
@@ -320,13 +309,31 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                 </div>}
 
             {/* Default Rule Edit Dialog */}
-            <EditDefaultRuleDialog
-                isOpen={pageState.defaultRuleEditState !== null}
-                defaultRule={pageState.defaultRuleEditState}
-                onClose={handleCancelDefaultRule}
-                onSave={handleSaveDefaultRule}
-                onUpdate={(updatedRule) => updatePageState({ defaultRuleEditState: updatedRule })}
-            />
+            {pageState.editingDefaultRule && (
+                <EditDefaultRuleDialog
+                    isOpen={true}
+                    onClose={() => updatePageState({ editingDefaultRule: null })}
+                    onSuccess={handleDefaultRuleUpdateSuccess}
+                    onError={handleDefaultRuleUpdateError}
+                    ruleType={pageState.editingDefaultRule}
+                    ruleId={
+                        pageState.editingDefaultRule === 'event'
+                            ? eventsDefaultRule.id
+                            : traceDefaultRule.id
+                    }
+                    appId={pageState.filters.app!.id}
+                    initialCollectionMode={
+                        pageState.editingDefaultRule === 'event'
+                            ? eventsDefaultRule.collection_config.mode
+                            : traceDefaultRule.collection_config.mode
+                    }
+                    initialSampleRate={
+                        pageState.editingDefaultRule === 'event'
+                            ? (eventsDefaultRule.collection_config.mode === 'sample_rate' ? eventsDefaultRule.collection_config.sample_rate : undefined)
+                            : (traceDefaultRule.collection_config.mode === 'sample_rate' ? traceDefaultRule.collection_config.sample_rate : undefined)
+                    }
+                />
+            )}
         </div>
     )
 }
diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index 4a9a4d85f..abd4969dd 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -1049,8 +1049,6 @@ export type EventTargetingResponse = {
   },
 };
 
-export type EventTargetingRuleType = 'all_events' | 'all_traces' | 'event' | 'trace';
-
 export type EventTargetingCollectionConfig =
   | { mode: 'sample_rate'; sample_rate: number }
   | { mode: 'timeline_only' }
@@ -1060,7 +1058,6 @@ export type EventTargetingAttachmentConfig = 'layout_snapshot' | 'screenshot' |
 
 export type EventTargetingRule = {
   id: string,
-  type: EventTargetingRuleType,
   rule: string,
   collection_config: EventTargetingCollectionConfig,
   attachment_config: EventTargetingAttachmentConfig,
@@ -1088,7 +1085,6 @@ export type TraceTargetingCollectionConfig =
 
 export type TraceTargetingRule = {
   id: string,
-  type: EventTargetingRuleType,
   rule: string,
   collection_config: TraceTargetingCollectionConfig,
   created_at: string,
@@ -1105,7 +1101,6 @@ export const emptyEventTargetingResponse: EventTargetingResponse = {
   result: {
     default: {
       id: "df-global-001",
-      type: 'all_events',
       rule: 'event_type == "*"',
       collection_config: { mode: 'timeline_only' },
       attachment_config: 'none',
@@ -1117,7 +1112,6 @@ export const emptyEventTargetingResponse: EventTargetingResponse = {
     overrides: [
       {
         id: "df-001",
-        type: 'event',
         rule: "event.type == 'click' && event.target == 'checkout_button'",
         collection_config: { mode: 'sample_rate', sample_rate: 0.5 },
         attachment_config: 'screenshot',
@@ -1128,7 +1122,6 @@ export const emptyEventTargetingResponse: EventTargetingResponse = {
       },
       {
         id: "df-003",
-        type: 'event',
         rule: "event.name == 'app_background' && session.is_crash == true",
         collection_config: { mode: 'disable' },
         attachment_config: 'none',
@@ -1139,7 +1132,6 @@ export const emptyEventTargetingResponse: EventTargetingResponse = {
       },
       {
         id: "df-005",
-        type: 'event',
         rule: "event.type == 'gesture' && device.manufacturer == 'Samsung'",
         collection_config: { mode: 'sample_rate', sample_rate: 1.0 },
         attachment_config: 'screenshot',
@@ -1160,7 +1152,6 @@ export const emptyTraceTargetingResponse: TraceTargetingResponse = {
   result: {
     default: {
       id: "df-global-traces-001",
-      type: 'all_traces',
       rule: 'trace_type == "*"',
       collection_config: { mode: 'timeline_only' },
       created_at: "2024-01-01T00:00:00Z",
diff --git a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
index a4360459a..0107f6080 100644
--- a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
+++ b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
@@ -1,108 +1,147 @@
 "use client"
 
-import { EventTargetingCollectionConfig, EventTargetingRuleType } from '@/app/api/api_calls'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/app/components/dialog'
 import { Button } from '@/app/components/button'
 import SamplingRateInput from '@/app/components/targeting/sampling_rate_input'
+import { useState, useEffect } from 'react'
 
-export interface DefaultRuleState {
-    id: string
-    type: EventTargetingRuleType
-    collectionMode: EventTargetingCollectionConfig['mode']
-    sampleRate?: number
-}
+type CollectionMode = 'sample_rate' | 'timeline_only' | 'disable'
 
 interface EditDefaultRuleDialogProps {
     isOpen: boolean
-    defaultRule: DefaultRuleState | null
+    ruleType: 'event' | 'trace'
+    ruleId: string
+    appId: string
+    initialCollectionMode: CollectionMode
+    initialSampleRate?: number
     onClose: () => void
-    onSave: () => void
-    onUpdate: (updatedRule: DefaultRuleState) => void
+    onSuccess: () => void
+    onError: (error: string) => void
 }
 
 export default function EditDefaultRuleDialog({
     isOpen,
-    defaultRule,
     onClose,
-    onSave,
-    onUpdate
+    onSuccess,
+    onError,
+    ruleType,
+    ruleId,
+    appId,
+    initialCollectionMode,
+    initialSampleRate
 }: EditDefaultRuleDialogProps) {
+    const [collectionMode, setCollectionMode] = useState<CollectionMode>(initialCollectionMode)
+    const [sampleRate, setSampleRate] = useState<number>(initialSampleRate || 100)
+    const [isSaving, setIsSaving] = useState(false)
+
+    useEffect(() => {
+        if (isOpen) {
+            setCollectionMode(initialCollectionMode)
+            setSampleRate(initialSampleRate || 100)
+        }
+    }, [isOpen, initialCollectionMode, initialSampleRate])
+
+    const handleSave = async () => {
+        setIsSaving(true)
+
+        try {
+            // TODO: Implement actual API call
+            // const result = await updateDefaultTargetingRule(appId, ruleId, {
+            //     collection_config: collectionMode === 'sample_rate'
+            //         ? { mode: 'sample_rate', sample_rate: sampleRate }
+            //         : { mode: collectionMode }
+            // })
+
+            // Simulate API call
+            await new Promise(resolve => setTimeout(resolve, 500))
+
+            // For now, always succeed
+            onSuccess()
+            onClose()
+        } catch (error) {
+            onError(error instanceof Error ? error.message : 'Failed to update rule')
+        } finally {
+            setIsSaving(false)
+        }
+    }
+
+    const isEvent = ruleType === 'event'
+    const displayName = isEvent ? 'Events' : 'Traces'
+    const displayNameLower = isEvent ? 'events' : 'traces'
+
     return (
         <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
             <DialogContent className="font-display">
                 <DialogHeader>
                     <DialogTitle className="font-display text-2xl">
-                        Edit Default {defaultRule?.type === 'all_events' ? 'Events' : 'Traces'} Rule
+                        Edit Default {displayName} Rule
                     </DialogTitle>
                 </DialogHeader>
 
-                <div className="space-y-3 py-4">
-                    <label className="flex items-center gap-3 cursor-pointer h-10">
-                        <input
-                            type="radio"
-                            name="collectionMode"
-                            value="sample_rate"
-                            checked={defaultRule?.collectionMode === 'sample_rate'}
-                            onChange={(e) => defaultRule && onUpdate({
-                                ...defaultRule,
-                                collectionMode: 'sample_rate',
-                                sampleRate: defaultRule.sampleRate || 100
-                            })}
-                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                        />
-                        <SamplingRateInput
-                            value={defaultRule?.sampleRate || 100}
-                            onChange={(value) => defaultRule && onUpdate({
-                                ...defaultRule,
-                                collectionMode: 'sample_rate',
-                                sampleRate: value
-                            })}
-                            disabled={defaultRule?.collectionMode !== 'sample_rate'}
-                        />
-                    </label>
-
-                    <label className="flex items-center gap-3 cursor-pointer h-10">
-                        <input
-                            type="radio"
-                            name="collectionMode"
-                            value="timeline_only"
-                            checked={defaultRule?.collectionMode === 'timeline_only'}
-                            onChange={(e) => defaultRule && onUpdate({
-                                ...defaultRule,
-                                collectionMode: 'timeline_only'
-                            })}
-                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                        />
-                        <span className="text-sm font-body">Collect with session timeline only</span>
-                    </label>
-
-                    <label className="flex items-center gap-3 cursor-pointer h-10">
-                        <input
-                            type="radio"
-                            name="collectionMode"
-                            value="disable"
-                            checked={defaultRule?.collectionMode === 'disable'}
-                            onChange={(e) => defaultRule && onUpdate({
-                                ...defaultRule,
-                                collectionMode: 'disable'
-                            })}
-                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                        />
-                        <span className="text-sm font-body">Collect no {defaultRule?.type === 'all_events' ? 'events' : 'traces'} by default</span>
-                    </label>
+                <div className="space-y-6 py-4">
+                    {/* Collection Config Section */}
+                    <div className="space-y-3">
+                        <p className="font-display text-sm font-medium">Collection Config</p>
+
+                        <label className="flex items-center gap-3 cursor-pointer h-10">
+                            <input
+                                type="radio"
+                                name="collectionMode"
+                                value="sample_rate"
+                                checked={collectionMode === 'sample_rate'}
+                                onChange={() => setCollectionMode('sample_rate')}
+                                disabled={isSaving}
+                                className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
+                            />
+                            <SamplingRateInput
+                                value={sampleRate}
+                                onChange={setSampleRate}
+                                disabled={collectionMode !== 'sample_rate' || isSaving}
+                            />
+                        </label>
+
+                        <label className="flex items-center gap-3 cursor-pointer h-10">
+                            <input
+                                type="radio"
+                                name="collectionMode"
+                                value="timeline_only"
+                                checked={collectionMode === 'timeline_only'}
+                                onChange={() => setCollectionMode('timeline_only')}
+                                disabled={isSaving}
+                                className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
+                            />
+                            <span className="text-sm font-body">Collect with session timeline only</span>
+                        </label>
+
+                        <label className="flex items-center gap-3 cursor-pointer h-10">
+                            <input
+                                type="radio"
+                                name="collectionMode"
+                                value="disable"
+                                checked={collectionMode === 'disable'}
+                                onChange={() => setCollectionMode('disable')}
+                                disabled={isSaving}
+                                className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
+                            />
+                            <span className="text-sm font-body">Collect no {displayNameLower} by default</span>
+                        </label>
+                    </div>
                 </div>
 
                 <DialogFooter>
                     <Button
                         variant="outline"
                         onClick={onClose}
+                        disabled={isSaving}
                         className="font-display"
                     >
                         Cancel
                     </Button>
                     <Button
                         variant="outline"
-                        onClick={onSave}
+                        onClick={handleSave}
+                        disabled={isSaving}
+                        loading={isSaving}
                         className="font-display border border-black"
                     >
                         Confirm

From 3f6697eb3a8e0ac44a581f9fabef03a32cb8a85f Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 22:15:22 +0530
Subject: [PATCH 24/98] feat(frontend): fix collection config signature

---
 frontend/dashboard/app/[teamId]/data/page.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index e2616be6d..5389a8406 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -1,9 +1,8 @@
 "use client"
 
-import { EventTargetingApiStatus, EventTargetingResponse, emptyEventTargetingResponse, fetchEventTargetingRulesFromServer, TraceTargetingApiStatus, TraceTargetingResponse, emptyTraceTargetingResponse, fetchTraceTargetingRulesFromServer, FilterSource } from '@/app/api/api_calls'
+import { EventTargetingApiStatus, EventTargetingResponse, emptyEventTargetingResponse, fetchEventTargetingRulesFromServer, TraceTargetingApiStatus, TraceTargetingResponse, emptyTraceTargetingResponse, fetchTraceTargetingRulesFromServer, FilterSource, EventTargetingCollectionConfig, TraceTargetingCollectionConfig } from '@/app/api/api_calls'
 import Filters, { AppVersionsInitialSelectionType, defaultFilters } from '@/app/components/filters'
 import LoadingBar from '@/app/components/loading_bar'
-import { EventTargetingCollectionConfig } from '@/app/api/api_calls'
 import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { Button } from '@/app/components/button'
@@ -26,7 +25,7 @@ interface PageState {
 
 const paginationLimit = 5
 
-const getCollectionConfigDisplay = (collectionConfig: EventTargetingCollectionConfig): string => {
+const getCollectionConfigDisplay = (collectionConfig: EventTargetingCollectionConfig | TraceTargetingCollectionConfig): string => {
     switch (collectionConfig.mode) {
         case 'sample_rate':
             return `Collect all at ${collectionConfig.sample_rate}% sample rate`

From b2a1fa44e7b2a04667cbd63bf857fb1b44044f4b Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 5 Nov 2025 23:36:23 +0530
Subject: [PATCH 25/98] feat(frontend): update default config without page
 refresh

---
 frontend/dashboard/app/[teamId]/data/page.tsx | 35 +++++++++++++++++--
 .../targeting/edit_default_rule_dialog.tsx    |  4 +--
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index 5389a8406..009f16df4 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -61,7 +61,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         })
     }
 
-    const getDataFilters = async () => {
+    const getAllDataFilters = async () => {
         updatePageState({
             eventTargetingApiStatus: EventTargetingApiStatus.Loading,
             traceTargetingApiStatus: TraceTargetingApiStatus.Loading
@@ -163,7 +163,38 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         router.push(`/${params.teamId}/data/${filterType}/${dataFilter.id}/edit`)
     }
 
-    const handleDefaultRuleUpdateSuccess = () => {
+    const handleDefaultRuleUpdateSuccess = (collectionMode: 'sample_rate' | 'timeline_only' | 'disable', sampleRate?: number) => {
+        // Update local state based on which rule was edited
+        if (pageState.editingDefaultRule === 'event') {
+            const updatedEventRules = {
+                ...pageState.eventTargetingRules,
+                result: {
+                    ...pageState.eventTargetingRules.result,
+                    default: {
+                        ...pageState.eventTargetingRules.result.default,
+                        collection_config: collectionMode === 'sample_rate'
+                            ? { mode: collectionMode as const, sample_rate: sampleRate! }
+                            : { mode: collectionMode as const }
+                    }
+                }
+            }
+            updatePageState({ eventTargetingRules: updatedEventRules })
+        } else if (pageState.editingDefaultRule === 'trace') {
+            const updatedTraceRules = {
+                ...pageState.traceTargetingRules,
+                result: {
+                    ...pageState.traceTargetingRules.result,
+                    default: {
+                        ...pageState.traceTargetingRules.result.default,
+                        collection_config: collectionMode === 'sample_rate'
+                            ? { mode: collectionMode as const, sample_rate: sampleRate! }
+                            : { mode: collectionMode as const }
+                    }
+                }
+            }
+            updatePageState({ traceTargetingRules: updatedTraceRules })
+        }
+
         toastPositive('Rule updated successfully')
     }
 
diff --git a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
index 0107f6080..4ecdf1a51 100644
--- a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
+++ b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
@@ -15,7 +15,7 @@ interface EditDefaultRuleDialogProps {
     initialCollectionMode: CollectionMode
     initialSampleRate?: number
     onClose: () => void
-    onSuccess: () => void
+    onSuccess: (collectionMode: CollectionMode, sampleRate?: number) => void
     onError: (error: string) => void
 }
 
@@ -56,7 +56,7 @@ export default function EditDefaultRuleDialog({
             await new Promise(resolve => setTimeout(resolve, 500))
 
             // For now, always succeed
-            onSuccess()
+            onSuccess(collectionMode, collectionMode === 'sample_rate' ? sampleRate : undefined)
             onClose()
         } catch (error) {
             onError(error instanceof Error ? error.message : 'Failed to update rule')

From d35528d4f4325f8457b8c60b879e3849caf5e504 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 6 Nov 2025 00:10:52 +0530
Subject: [PATCH 26/98] feat(frontend): implement session targeting table

---
 .../data/event/[ruleId]/edit/page.tsx         |   4 +-
 .../app/[teamId]/data/event/create/page.tsx   |   4 +-
 frontend/dashboard/app/[teamId]/data/page.tsx |  73 ++++++++---
 .../data/session/[ruleId]/edit/page.tsx       |  50 ++++++++
 .../[teamId]/data/session/[ruleId]/page.tsx   |   0
 .../app/[teamId]/data/session/create/page.tsx |  50 ++++++++
 .../data/trace/[ruleId]/edit/page.tsx         |   4 +-
 .../app/[teamId]/data/trace/create/page.tsx   |   4 +-
 frontend/dashboard/app/api/api_calls.ts       | 113 +++++++++++-------
 .../targeting/rule_overrides_table.tsx        |   8 +-
 .../targeting/session_targeting_table.tsx     |  75 ++++++++++++
 11 files changed, 317 insertions(+), 68 deletions(-)
 create mode 100644 frontend/dashboard/app/[teamId]/data/session/[ruleId]/edit/page.tsx
 delete mode 100644 frontend/dashboard/app/[teamId]/data/session/[ruleId]/page.tsx
 create mode 100644 frontend/dashboard/app/components/targeting/session_targeting_table.tsx

diff --git a/frontend/dashboard/app/[teamId]/data/event/[ruleId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/event/[ruleId]/edit/page.tsx
index 6bd9e5b36..2a7515775 100644
--- a/frontend/dashboard/app/[teamId]/data/event/[ruleId]/edit/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/event/[ruleId]/edit/page.tsx
@@ -8,12 +8,12 @@ export default function EditEventFilter({ params }: { params: { teamId: string,
     const router = useRouter()
 
     const handleCancel = () => {
-        router.push(`/${params.teamId}/data_filters`)
+        router.push(`/${params.teamId}/data`)
     }
 
     const handleSave = () => {
         // TODO: Implement save logic
-        router.push(`/${params.teamId}/data_filters`)
+        router.push(`/${params.teamId}/data`)
     }
 
     return (
diff --git a/frontend/dashboard/app/[teamId]/data/event/create/page.tsx b/frontend/dashboard/app/[teamId]/data/event/create/page.tsx
index fe3c264bd..582d386e3 100644
--- a/frontend/dashboard/app/[teamId]/data/event/create/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/event/create/page.tsx
@@ -8,12 +8,12 @@ export default function CreateEventFilter({ params }: { params: { teamId: string
     const router = useRouter()
 
     const handleCancel = () => {
-        router.push(`/${params.teamId}/data_filters`)
+        router.push(`/${params.teamId}/data`)
     }
 
     const handleCreate = () => {
         // TODO: Implement create logic
-        router.push(`/${params.teamId}/data_filters`)
+        router.push(`/${params.teamId}/data`)
     }
 
     return (
diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index 009f16df4..88f798f7c 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { EventTargetingApiStatus, EventTargetingResponse, emptyEventTargetingResponse, fetchEventTargetingRulesFromServer, TraceTargetingApiStatus, TraceTargetingResponse, emptyTraceTargetingResponse, fetchTraceTargetingRulesFromServer, FilterSource, EventTargetingCollectionConfig, TraceTargetingCollectionConfig } from '@/app/api/api_calls'
+import { EventTargetingApiStatus, EventTargetingResponse, emptyEventTargetingResponse, fetchEventTargetingRulesFromServer, TraceTargetingApiStatus, TraceTargetingResponse, emptyTraceTargetingResponse, fetchTraceTargetingRulesFromServer, FilterSource, EventTargetingCollectionConfig, TraceTargetingCollectionConfig, SessionTargetingResponse, emptySessionTargetingResponse, fetchSessionTargetingRulesFromServer } from '@/app/api/api_calls'
 import Filters, { AppVersionsInitialSelectionType, defaultFilters } from '@/app/components/filters'
 import LoadingBar from '@/app/components/loading_bar'
 import { useRouter } from 'next/navigation'
@@ -9,7 +9,8 @@ import { Button } from '@/app/components/button'
 import { Plus, Pencil } from 'lucide-react'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/app/components/dropdown_menu'
 import EditDefaultRuleDialog from '@/app/components/targeting/edit_default_rule_dialog'
-import RulesTable from '@/app/components/targeting/rule_overrides_table'
+import RulesOverridesTable from '@/app/components/targeting/rule_overrides_table'
+import SessionTargetingTable from '@/app/components/targeting/session_targeting_table'
 import { toastPositive, toastNegative } from '@/app/utils/use_toast'
 
 interface PageState {
@@ -18,8 +19,10 @@ interface PageState {
     filters: typeof defaultFilters
     eventTargetingRules: EventTargetingResponse
     traceTargetingRules: TraceTargetingResponse
+    sessionTargetingRules: SessionTargetingResponse
     eventPaginationOffset: number
     tracePaginationOffset: number
+    sessionPaginationOffset: number
     editingDefaultRule: 'event' | 'trace' | null
 }
 
@@ -47,8 +50,10 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         filters: defaultFilters,
         eventTargetingRules: emptyEventTargetingResponse,
         traceTargetingRules: emptyTraceTargetingResponse,
+        sessionTargetingRules: emptySessionTargetingResponse,
         eventPaginationOffset: 0,
         tracePaginationOffset: 0,
+        sessionPaginationOffset: 0,
         editingDefaultRule: null,
     }
 
@@ -67,9 +72,10 @@ export default function DataFilters({ params }: { params: { teamId: string } })
             traceTargetingApiStatus: TraceTargetingApiStatus.Loading
         })
 
-        const [eventResult, traceResult] = await Promise.all([
+        const [eventResult, traceResult, sessionResult] = await Promise.all([
             fetchEventTargetingRulesFromServer(pageState.filters.app!.id, paginationLimit, pageState.eventPaginationOffset),
-            fetchTraceTargetingRulesFromServer(pageState.filters.app!.id, paginationLimit, pageState.tracePaginationOffset)
+            fetchTraceTargetingRulesFromServer(pageState.filters.app!.id, paginationLimit, pageState.tracePaginationOffset),
+            fetchSessionTargetingRulesFromServer(pageState.filters.app!.id, paginationLimit, pageState.sessionPaginationOffset)
         ])
 
         if (eventResult.status === EventTargetingApiStatus.Error || traceResult.status === TraceTargetingApiStatus.Error) {
@@ -91,7 +97,8 @@ export default function DataFilters({ params }: { params: { teamId: string } })
             eventTargetingApiStatus: eventStatus,
             traceTargetingApiStatus: traceStatus,
             eventTargetingRules: eventResult.data || emptyEventTargetingResponse,
-            traceTargetingRules: traceResult.data || emptyTraceTargetingResponse
+            traceTargetingRules: traceResult.data || emptyTraceTargetingResponse,
+            sessionTargetingRules: sessionResult.data || emptySessionTargetingResponse
         })
     }
 
@@ -124,6 +131,14 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         updatePageState({ tracePaginationOffset: Math.max(0, pageState.tracePaginationOffset - paginationLimit) })
     }
 
+    const handleSessionNextPage = () => {
+        updatePageState({ sessionPaginationOffset: pageState.sessionPaginationOffset + paginationLimit })
+    }
+
+    const handleSessionPrevPage = () => {
+        updatePageState({ sessionPaginationOffset: Math.max(0, pageState.sessionPaginationOffset - paginationLimit) })
+    }
+
     useEffect(() => {
         if (!pageState.filters.ready) {
             return
@@ -134,7 +149,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
 
         // TODO: Re-enable API call when ready
         // getDataFilters()
-    }, [pageState.filters, pageState.eventPaginationOffset, pageState.tracePaginationOffset])
+    }, [pageState.filters, pageState.eventPaginationOffset, pageState.tracePaginationOffset, pageState.sessionPaginationOffset])
 
     const isLoading = () => {
         return pageState.eventTargetingApiStatus === EventTargetingApiStatus.Loading ||
@@ -158,13 +173,13 @@ export default function DataFilters({ params }: { params: { teamId: string } })
     const eventsOverideRules = pageState.eventTargetingRules.result.overrides;
     const traceDefaultRule = pageState.traceTargetingRules.result.default;
     const traceOverrideRules = pageState.traceTargetingRules.result.overrides;
+    const sessionTargetingRules = pageState.sessionTargetingRules.results;
 
-    const handleEditFilter = (dataFilter: typeof eventsOverideRules[0] | typeof traceOverrideRules[0], filterType: 'event' | 'trace') => {
+    const handleEditRule = (dataFilter: typeof eventsOverideRules[0] | typeof traceOverrideRules[0] | typeof sessionTargetingRules[0], filterType: 'event' | 'trace' | 'session') => {
         router.push(`/${params.teamId}/data/${filterType}/${dataFilter.id}/edit`)
     }
 
     const handleDefaultRuleUpdateSuccess = (collectionMode: 'sample_rate' | 'timeline_only' | 'disable', sampleRate?: number) => {
-        // Update local state based on which rule was edited
         if (pageState.editingDefaultRule === 'event') {
             const updatedEventRules = {
                 ...pageState.eventTargetingRules,
@@ -173,8 +188,10 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                     default: {
                         ...pageState.eventTargetingRules.result.default,
                         collection_config: collectionMode === 'sample_rate'
-                            ? { mode: collectionMode as const, sample_rate: sampleRate! }
-                            : { mode: collectionMode as const }
+                            ? { mode: 'sample_rate' as const, sample_rate: sampleRate! }
+                            : collectionMode === 'timeline_only'
+                                ? { mode: 'timeline_only' as const }
+                                : { mode: 'disable' as const }
                     }
                 }
             }
@@ -187,8 +204,10 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                     default: {
                         ...pageState.traceTargetingRules.result.default,
                         collection_config: collectionMode === 'sample_rate'
-                            ? { mode: collectionMode as const, sample_rate: sampleRate! }
-                            : { mode: collectionMode as const }
+                            ? { mode: 'sample_rate' as const, sample_rate: sampleRate! }
+                            : collectionMode === 'timeline_only'
+                                ? { mode: 'timeline_only' as const }
+                                : { mode: 'disable' as const }
                     }
                 }
             }
@@ -223,6 +242,9 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         <DropdownMenuItem onClick={() => router.push(`/${params.teamId}/data/trace/create`)}>
                             Trace Rule
                         </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => router.push(`/${params.teamId}/data/session/create`)}>
+                            Session Rule
+                        </DropdownMenuItem>
                     </DropdownMenuContent>
                 </DropdownMenu>
             </div>
@@ -289,9 +311,9 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                             </div>
                         )}
 
-                        <RulesTable
+                        <RulesOverridesTable
                             rules={eventsOverideRules}
-                            onRuleClick={(rule) => handleEditFilter(rule, 'event')}
+                            onRuleClick={(rule) => handleEditRule(rule, 'event')}
                             prevEnabled={pageState.eventTargetingRules.meta.previous}
                             nextEnabled={pageState.eventTargetingRules.meta.next}
                             onNext={handleEventNextPage}
@@ -326,9 +348,9 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                             </div>
                         )}
 
-                        <RulesTable
+                        <RulesOverridesTable
                             rules={traceOverrideRules}
-                            onRuleClick={(rule) => handleEditFilter(rule, 'trace')}
+                            onRuleClick={(rule) => handleEditRule(rule, 'trace')}
                             prevEnabled={pageState.traceTargetingRules.meta.previous}
                             nextEnabled={pageState.traceTargetingRules.meta.next}
                             onNext={handleTraceNextPage}
@@ -336,6 +358,25 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                             showPaginator={traceOverrideRules.length > 0}
                         />
                     </div>
+
+                    <div className="py-12" />
+
+                    {/* Session Timeline Rules Section */}
+                    <div className="w-full">
+                        <p className="font-display text-2xl">Session Timeline Rules</p>
+
+                        <div className="py-4" />
+
+                        <SessionTargetingTable
+                            rules={sessionTargetingRules}
+                            onRuleClick={(rule) => handleEditRule(rule, 'session')}
+                            prevEnabled={pageState.sessionTargetingRules.meta.previous}
+                            nextEnabled={pageState.sessionTargetingRules.meta.next}
+                            onNext={handleSessionNextPage}
+                            onPrev={handleSessionPrevPage}
+                            showPaginator={sessionTargetingRules.length > 0}
+                        />
+                    </div>
                 </div>}
 
             {/* Default Rule Edit Dialog */}
diff --git a/frontend/dashboard/app/[teamId]/data/session/[ruleId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/session/[ruleId]/edit/page.tsx
new file mode 100644
index 000000000..e0d6b9c68
--- /dev/null
+++ b/frontend/dashboard/app/[teamId]/data/session/[ruleId]/edit/page.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { useRouter } from 'next/navigation'
+import { Button } from '@/app/components/button'
+import { Card, CardContent, CardFooter } from '@/app/components/card'
+
+export default function EditSessionFilter({ params }: { params: { teamId: string, ruleId: string } }) {
+    const router = useRouter()
+
+    const handleCancel = () => {
+        router.push(`/${params.teamId}/data`)
+    }
+
+    const handleSave = () => {
+        // TODO: Implement save logic
+        router.push(`/${params.teamId}/data`)
+    }
+
+    return (
+        <div className="flex flex-col selection:bg-yellow-200/75 items-start">
+            <p className="font-display text-4xl max-w-6xl text-center">Edit Session Filter</p>
+            <div className="py-4" />
+
+            <Card className="w-full">
+                <CardContent className="pt-6">
+                    <div className="mb-6">
+                        {/* TODO: Add form fields */}
+                    </div>
+                </CardContent>
+
+                <CardFooter className="flex justify-end gap-3">
+                    <Button
+                        variant="outline"
+                        onClick={handleCancel}
+                        className="font-display"
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        variant="outline"
+                        onClick={handleSave}
+                        className="font-display border border-black"
+                    >
+                        Save Changes
+                    </Button>
+                </CardFooter>
+            </Card>
+        </div>
+    )
+}
diff --git a/frontend/dashboard/app/[teamId]/data/session/[ruleId]/page.tsx b/frontend/dashboard/app/[teamId]/data/session/[ruleId]/page.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/frontend/dashboard/app/[teamId]/data/session/create/page.tsx b/frontend/dashboard/app/[teamId]/data/session/create/page.tsx
index e69de29bb..54258ee5f 100644
--- a/frontend/dashboard/app/[teamId]/data/session/create/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/session/create/page.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { useRouter } from 'next/navigation'
+import { Button } from '@/app/components/button'
+import { Card, CardContent, CardFooter } from '@/app/components/card'
+
+export default function CreateSessionFilter({ params }: { params: { teamId: string } }) {
+    const router = useRouter()
+
+    const handleCancel = () => {
+        router.push(`/${params.teamId}/data`)
+    }
+
+    const handleCreate = () => {
+        // TODO: Implement create logic
+        router.push(`/${params.teamId}/data`)
+    }
+
+    return (
+        <div className="flex flex-col selection:bg-yellow-200/75 items-start">
+            <p className="font-display text-4xl max-w-6xl text-center">Create Session Filter</p>
+            <div className="py-4" />
+
+            <Card className="w-full">
+                <CardContent className="pt-6">
+                    <div className="mb-6">
+                        {/* TODO: Add form fields */}
+                    </div>
+                </CardContent>
+
+                <CardFooter className="flex justify-end gap-3">
+                    <Button
+                        variant="outline"
+                        onClick={handleCancel}
+                        className="font-display"
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        variant="outline"
+                        onClick={handleCreate}
+                        className="font-display border border-black"
+                    >
+                        Create Filter
+                    </Button>
+                </CardFooter>
+            </Card>
+        </div>
+    )
+}
diff --git a/frontend/dashboard/app/[teamId]/data/trace/[ruleId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/trace/[ruleId]/edit/page.tsx
index e6e64ae04..5fd711ad4 100644
--- a/frontend/dashboard/app/[teamId]/data/trace/[ruleId]/edit/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/trace/[ruleId]/edit/page.tsx
@@ -8,12 +8,12 @@ export default function EditTraceFilter({ params }: { params: { teamId: string,
     const router = useRouter()
 
     const handleCancel = () => {
-        router.push(`/${params.teamId}/data_filters`)
+        router.push(`/${params.teamId}/data`)
     }
 
     const handleSave = () => {
         // TODO: Implement save logic
-        router.push(`/${params.teamId}/data_filters`)
+        router.push(`/${params.teamId}/data`)
     }
 
     return (
diff --git a/frontend/dashboard/app/[teamId]/data/trace/create/page.tsx b/frontend/dashboard/app/[teamId]/data/trace/create/page.tsx
index 663ffb23a..d59a2f4a8 100644
--- a/frontend/dashboard/app/[teamId]/data/trace/create/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/trace/create/page.tsx
@@ -8,12 +8,12 @@ export default function CreateTraceFilter({ params }: { params: { teamId: string
     const router = useRouter()
 
     const handleCancel = () => {
-        router.push(`/${params.teamId}/data_filters`)
+        router.push(`/${params.teamId}/data`)
     }
 
     const handleCreate = () => {
         // TODO: Implement create logic
-        router.push(`/${params.teamId}/data_filters`)
+        router.push(`/${params.teamId}/data`)
     }
 
     return (
diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index abd4969dd..65e1e9b33 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -369,6 +369,14 @@ export enum TraceTargetingApiStatus {
   Cancelled,
 }
 
+export enum SessionTargetingApiStatus {
+  Loading,
+  Success,
+  Error,
+  NoData,
+  Cancelled,
+}
+
 export enum SessionType {
   All = "All Sessions",
   Crashes = "Crash Sessions",
@@ -1061,8 +1069,6 @@ export type EventTargetingRule = {
   rule: string,
   collection_config: EventTargetingCollectionConfig,
   attachment_config: EventTargetingAttachmentConfig,
-  created_at: string,
-  created_by: string,
   updated_at: string,
   updated_by: string,
 }
@@ -1087,8 +1093,22 @@ export type TraceTargetingRule = {
   id: string,
   rule: string,
   collection_config: TraceTargetingCollectionConfig,
-  created_at: string,
-  created_by: string,
+  updated_at: string,
+  updated_by: string,
+}
+
+export type SessionTargetingResponse = {
+  meta: {
+    next: false,
+    previous: false,
+  },
+  results: SessionTargetingRule[]
+};
+
+export type SessionTargetingRule = {
+  id: string,
+  rule: string,
+  sampling_rate: number,
   updated_at: string,
   updated_by: string,
 }
@@ -1104,43 +1124,10 @@ export const emptyEventTargetingResponse: EventTargetingResponse = {
       rule: 'event_type == "*"',
       collection_config: { mode: 'timeline_only' },
       attachment_config: 'none',
-      created_at: "2024-01-01T00:00:00Z",
-      created_by: "system@example.com",
       updated_at: "2024-01-01T00:00:00Z",
       updated_by: "system@example.com",
     },
-    overrides: [
-      {
-        id: "df-001",
-        rule: "event.type == 'click' && event.target == 'checkout_button'",
-        collection_config: { mode: 'sample_rate', sample_rate: 0.5 },
-        attachment_config: 'screenshot',
-        created_at: "2024-01-15T10:30:00Z",
-        created_by: "user1@example.com",
-        updated_at: "2024-02-20T14:45:00Z",
-        updated_by: "user2@example.com",
-      },
-      {
-        id: "df-003",
-        rule: "event.name == 'app_background' && session.is_crash == true",
-        collection_config: { mode: 'disable' },
-        attachment_config: 'none',
-        created_at: "2024-02-01T12:00:00Z",
-        created_by: "developer@example.com",
-        updated_at: "2024-03-10T09:30:00Z",
-        updated_by: "lead@example.com",
-      },
-      {
-        id: "df-005",
-        rule: "event.type == 'gesture' && device.manufacturer == 'Samsung'",
-        collection_config: { mode: 'sample_rate', sample_rate: 1.0 },
-        attachment_config: 'screenshot',
-        created_at: "2024-03-05T13:45:00Z",
-        created_by: "user3@example.com",
-        updated_at: "2024-03-05T13:45:00Z",
-        updated_by: "user3@example.com",
-      },
-    ]
+    overrides: []
   },
 }
 
@@ -1154,8 +1141,6 @@ export const emptyTraceTargetingResponse: TraceTargetingResponse = {
       id: "df-global-traces-001",
       rule: 'trace_type == "*"',
       collection_config: { mode: 'timeline_only' },
-      created_at: "2024-01-01T00:00:00Z",
-      created_by: "system@example.com",
       updated_at: "2024-01-01T00:00:00Z",
       updated_by: "system@example.com",
     },
@@ -1163,6 +1148,23 @@ export const emptyTraceTargetingResponse: TraceTargetingResponse = {
   },
 }
 
+export const emptySessionTargetingResponse: SessionTargetingResponse = {
+  meta: {
+    next: false,
+    previous: false,
+  },
+  results: [
+    {
+      id: "df-sessions-001",
+      rule: "Default Session Targeting Rule",
+      rule: 'event.event_type == "exception"',
+      sampling_rate: 0,
+      updated_at: "2024-01-01T00:00:00Z",
+      updated_by: "system@example.com",
+    },
+  ]
+}
+
 export class AppVersion {
   name: string
   code: string
@@ -2558,4 +2560,35 @@ export const fetchTraceTargetingRulesFromServer = async (
   } catch {
     return { status: TraceTargetingApiStatus.Cancelled, data: null }
   }
+}
+
+export const fetchSessionTargetingRulesFromServer = async (
+  appId: String,
+  limit: number,
+  offset: number,
+) => {
+  let url = `/api/apps/${appId}/targetingRules/sessions`
+
+  const searchParams = new URLSearchParams()
+  searchParams.append("limit", String(limit))
+  searchParams.append("offset", String(offset))
+  url += `?${searchParams.toString()}`
+
+  try {
+    const res = await measureAuth.fetchMeasure(url)
+
+    if (!res.ok) {
+      return { status: SessionTargetingApiStatus.Error, data: null }
+    }
+
+    const data = await res.json()
+
+    if (data.results === null) {
+      return { status: SessionTargetingApiStatus.NoData, data: null }
+    } else {
+      return { status: SessionTargetingApiStatus.Success, data: data }
+    }
+  } catch {
+    return { status: SessionTargetingApiStatus.Cancelled, data: null }
+  }
 }
\ No newline at end of file
diff --git a/frontend/dashboard/app/components/targeting/rule_overrides_table.tsx b/frontend/dashboard/app/components/targeting/rule_overrides_table.tsx
index e9de6d626..1eade276b 100644
--- a/frontend/dashboard/app/components/targeting/rule_overrides_table.tsx
+++ b/frontend/dashboard/app/components/targeting/rule_overrides_table.tsx
@@ -40,11 +40,11 @@ const getAttachmentConfigDisplay = (attachmentConfig?: EventTargetingAttachmentC
     return attachmentConfig
 }
 
-type RuleFilter = EventTargetingRule | TraceTargetingRule
+type Rule = EventTargetingRule | TraceTargetingRule
 
 interface RulesTableProps {
-    rules: RuleFilter[]
-    onRuleClick: (rule: RuleFilter) => void
+    rules: Rule[]
+    onRuleClick: (rule: Rule) => void
     prevEnabled: boolean
     nextEnabled: boolean
     onNext: () => void
@@ -52,7 +52,7 @@ interface RulesTableProps {
     showPaginator: boolean
 }
 
-export default function RulesTable({ rules, onRuleClick, prevEnabled, nextEnabled, onNext, onPrev, showPaginator }: RulesTableProps) {
+export default function RulesOverridesTable({ rules, onRuleClick, prevEnabled, nextEnabled, onNext, onPrev, showPaginator }: RulesTableProps) {
     if (rules.length === 0) {
         return null
     }
diff --git a/frontend/dashboard/app/components/targeting/session_targeting_table.tsx b/frontend/dashboard/app/components/targeting/session_targeting_table.tsx
new file mode 100644
index 000000000..37496d10c
--- /dev/null
+++ b/frontend/dashboard/app/components/targeting/session_targeting_table.tsx
@@ -0,0 +1,75 @@
+"use client"
+
+import { SessionTargetingRule } from '@/app/api/api_calls'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/app/components/table'
+import { formatDateToHumanReadableDate, formatDateToHumanReadableTime } from '@/app/utils/time_utils'
+import Paginator from '@/app/components/paginator'
+
+const getSamplingRateDisplay = (samplingRate: number): string => {
+    return `${samplingRate}% sampling rate`
+}
+
+interface SessionTargetingTableProps {
+    rules: SessionTargetingRule[]
+    onRuleClick: (rule: SessionTargetingRule) => void
+    prevEnabled: boolean
+    nextEnabled: boolean
+    onNext: () => void
+    onPrev: () => void
+    showPaginator: boolean
+}
+
+export default function SessionTargetingTable({ rules, onRuleClick, prevEnabled, nextEnabled, onNext, onPrev, showPaginator }: SessionTargetingTableProps) {
+    if (rules.length === 0) {
+        return null
+    }
+
+    return (
+        <>
+            <div className="w-full flex items-center justify-end">
+                {showPaginator && (
+                    <Paginator
+                        prevEnabled={prevEnabled}
+                        nextEnabled={nextEnabled}
+                        displayText=""
+                        onNext={onNext}
+                        onPrev={onPrev}
+                    />
+                )}
+            </div>
+            <div className="py-4" />
+            <Table className="font-display">
+                <TableHeader>
+                    <TableRow>
+                        <TableHead className="w-[52%]">Rule</TableHead>
+                        <TableHead className="w-[24%] text-center">Updated At</TableHead>
+                        <TableHead className="w-[24%] text-center">Updated By</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {rules.map((rule, idx) => (
+                        <TableRow
+                            key={`${idx}-${rule.id}`}
+                            className="font-body cursor-pointer hover:bg-yellow-200 focus-visible:border-yellow-200 select-none"
+                            onClick={() => onRuleClick(rule)}
+                        >
+                            <TableCell className="w-[60%] p-4">
+                                <p className='truncate select-none font-mono text-sm'>{rule.rule}</p>
+                                <div className='py-1' />
+                                <p className='text-xs truncate text-gray-500 select-none'>{getSamplingRateDisplay(rule.sampling_rate)}</p>
+                            </TableCell>
+                            <TableCell className="w-[20%] text-center p-4">
+                                <p className='truncate select-none'>{formatDateToHumanReadableDate(rule.updated_at)}</p>
+                                <div className='py-1' />
+                                <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(rule.updated_at)}</p>
+                            </TableCell>
+                            <TableCell className="w-[20%] text-center p-4">
+                                <p className='truncate select-none'>{rule.updated_by}</p>
+                            </TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </>
+    )
+}

From 438fec3651c74c8a3d0b2761ddfbebbb07c2d848 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 6 Nov 2025 00:16:04 +0530
Subject: [PATCH 27/98] feat(frontend): add dummy data

---
 frontend/dashboard/app/api/api_calls.ts | 37 +++++++++++++++++++++++--
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index 65e1e9b33..ed300e0b2 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -1127,7 +1127,24 @@ export const emptyEventTargetingResponse: EventTargetingResponse = {
       updated_at: "2024-01-01T00:00:00Z",
       updated_by: "system@example.com",
     },
-    overrides: []
+    overrides: [
+      {
+        id: "df-events-001",
+        rule: 'event.event_type == "crash"',
+        collection_config: { mode: 'sample_rate', sample_rate: 5 },
+        attachment_config: 'screenshot',
+        updated_at: "2024-01-01T00:00:00Z",
+        updated_by: "system@example.com",
+      },
+      {
+        id: "df-events-002",
+        rule: 'event.event_type == "anr"',
+        collection_config: { mode: 'disable' },
+        attachment_config: 'none',
+        updated_at: "2024-01-01T00:00:00Z",
+        updated_by: "system@example.com",
+      }
+    ]
   },
 }
 
@@ -1144,7 +1161,22 @@ export const emptyTraceTargetingResponse: TraceTargetingResponse = {
       updated_at: "2024-01-01T00:00:00Z",
       updated_by: "system@example.com",
     },
-    overrides: []
+    overrides: [
+      {
+        id: "df-traces-001",
+        rule: 'trace.trace_name == "root"',
+        collection_config: { mode: 'sample_rate', sample_rate: 10 },
+        updated_at: "2024-01-01T00:00:00Z",
+        updated_by: "system@example.com",
+      },
+      {
+        id: "df-traces-002",
+        rule: 'trace.trace_name == "activity.onCreate"',
+        collection_config: { mode: 'disable' },
+        updated_at: "2024-01-01T00:00:00Z",
+        updated_by: "system@example.com",
+      }
+    ]
   },
 }
 
@@ -1156,7 +1188,6 @@ export const emptySessionTargetingResponse: SessionTargetingResponse = {
   results: [
     {
       id: "df-sessions-001",
-      rule: "Default Session Targeting Rule",
       rule: 'event.event_type == "exception"',
       sampling_rate: 0,
       updated_at: "2024-01-01T00:00:00Z",

From 826566a2e09055923f5cb29c70d58133dc79db94 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 6 Nov 2025 00:29:28 +0530
Subject: [PATCH 28/98] feat(frontend): basic scaffloding for create and edit
 event/trace rule

---
 .../data/event/[ruleId]/edit/page.tsx         |  39 +-----
 .../app/[teamId]/data/event/create/page.tsx   |  38 +----
 .../data/trace/[ruleId]/edit/page.tsx         |  38 +----
 .../app/[teamId]/data/trace/create/page.tsx   |  38 +----
 .../targeting/event_trace_rule_builder.tsx    |  67 +++++++++
 .../targeting/rule_builder_card.tsx           | 130 ------------------
 6 files changed, 95 insertions(+), 255 deletions(-)
 create mode 100644 frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
 delete mode 100644 frontend/dashboard/app/components/targeting/rule_builder_card.tsx

diff --git a/frontend/dashboard/app/[teamId]/data/event/[ruleId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/event/[ruleId]/edit/page.tsx
index 2a7515775..4f73fcd0d 100644
--- a/frontend/dashboard/app/[teamId]/data/event/[ruleId]/edit/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/event/[ruleId]/edit/page.tsx
@@ -1,8 +1,7 @@
 "use client"
 
 import { useRouter } from 'next/navigation'
-import { Button } from '@/app/components/button'
-import { Card, CardContent, CardFooter } from '@/app/components/card'
+import EventTraceRuleBuilder from '@/app/components/targeting/event_trace_rule_builder'
 
 export default function EditEventFilter({ params }: { params: { teamId: string, filterId: string } }) {
     const router = useRouter()
@@ -12,39 +11,15 @@ export default function EditEventFilter({ params }: { params: { teamId: string,
     }
 
     const handleSave = () => {
-        // TODO: Implement save logic
         router.push(`/${params.teamId}/data`)
     }
 
     return (
-        <div className="flex flex-col selection:bg-yellow-200/75 items-start">
-            <p className="font-display text-4xl max-w-6xl text-center">Edit Event Filter</p>
-            <div className="py-4" />
-
-            <Card className="w-full">
-                <CardContent className="pt-6">
-                    <div className="mb-6">
-                        {/* TODO: Add form fields */}
-                    </div>
-                </CardContent>
-
-                <CardFooter className="flex justify-end gap-3">
-                    <Button
-                        variant="outline"
-                        onClick={handleCancel}
-                        className="font-display"
-                    >
-                        Cancel
-                    </Button>
-                    <Button
-                        variant="outline"
-                        onClick={handleSave}
-                        className="font-display border border-black"
-                    >
-                        Save Changes
-                    </Button>
-                </CardFooter>
-            </Card>
-        </div>
+        <EventTraceRuleBuilder
+            type="event"
+            mode="edit"
+            onCancel={handleCancel}
+            onPrimaryAction={handleSave}
+        />
     )
 }
diff --git a/frontend/dashboard/app/[teamId]/data/event/create/page.tsx b/frontend/dashboard/app/[teamId]/data/event/create/page.tsx
index 582d386e3..d9a22fa56 100644
--- a/frontend/dashboard/app/[teamId]/data/event/create/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/event/create/page.tsx
@@ -1,8 +1,7 @@
 "use client"
 
 import { useRouter } from 'next/navigation'
-import { Button } from '@/app/components/button'
-import { Card, CardContent, CardFooter } from '@/app/components/card'
+import EventTraceRuleBuilder from '@/app/components/targeting/event_trace_rule_builder'
 
 export default function CreateEventFilter({ params }: { params: { teamId: string } }) {
     const router = useRouter()
@@ -17,34 +16,11 @@ export default function CreateEventFilter({ params }: { params: { teamId: string
     }
 
     return (
-        <div className="flex flex-col selection:bg-yellow-200/75 items-start">
-            <p className="font-display text-4xl max-w-6xl text-center">Create Event Filter</p>
-            <div className="py-4" />
-
-            <Card className="w-full">
-                <CardContent className="pt-6">
-                    <div className="mb-6">
-                        {/* TODO: Add form fields */}
-                    </div>
-                </CardContent>
-
-                <CardFooter className="flex justify-end gap-3">
-                    <Button
-                        variant="outline"
-                        onClick={handleCancel}
-                        className="font-display"
-                    >
-                        Cancel
-                    </Button>
-                    <Button
-                        variant="outline"
-                        onClick={handleCreate}
-                        className="font-display border border-black"
-                    >
-                        Create Filter
-                    </Button>
-                </CardFooter>
-            </Card>
-        </div>
+        <EventTraceRuleBuilder
+            type="event"
+            mode="create"
+            onCancel={handleCancel}
+            onPrimaryAction={handleCreate}
+        />
     )
 }
diff --git a/frontend/dashboard/app/[teamId]/data/trace/[ruleId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/trace/[ruleId]/edit/page.tsx
index 5fd711ad4..ac794e782 100644
--- a/frontend/dashboard/app/[teamId]/data/trace/[ruleId]/edit/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/trace/[ruleId]/edit/page.tsx
@@ -1,8 +1,7 @@
 "use client"
 
 import { useRouter } from 'next/navigation'
-import { Button } from '@/app/components/button'
-import { Card, CardContent, CardFooter } from '@/app/components/card'
+import EventTraceRuleBuilder from '@/app/components/targeting/event_trace_rule_builder'
 
 export default function EditTraceFilter({ params }: { params: { teamId: string, filterId: string } }) {
     const router = useRouter()
@@ -17,34 +16,11 @@ export default function EditTraceFilter({ params }: { params: { teamId: string,
     }
 
     return (
-        <div className="flex flex-col selection:bg-yellow-200/75 items-start">
-            <p className="font-display text-4xl max-w-6xl text-center">Edit Trace Filter</p>
-            <div className="py-4" />
-
-            <Card className="w-full">
-                <CardContent className="pt-6">
-                    <div className="mb-6">
-                        {/* TODO: Add form fields */}
-                    </div>
-                </CardContent>
-
-                <CardFooter className="flex justify-end gap-3">
-                    <Button
-                        variant="outline"
-                        onClick={handleCancel}
-                        className="font-display"
-                    >
-                        Cancel
-                    </Button>
-                    <Button
-                        variant="outline"
-                        onClick={handleSave}
-                        className="font-display border border-black"
-                    >
-                        Save Changes
-                    </Button>
-                </CardFooter>
-            </Card>
-        </div>
+        <EventTraceRuleBuilder
+            type="trace"
+            mode="edit"
+            onCancel={handleCancel}
+            onPrimaryAction={handleSave}
+        />
     )
 }
diff --git a/frontend/dashboard/app/[teamId]/data/trace/create/page.tsx b/frontend/dashboard/app/[teamId]/data/trace/create/page.tsx
index d59a2f4a8..9f78675b0 100644
--- a/frontend/dashboard/app/[teamId]/data/trace/create/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/trace/create/page.tsx
@@ -1,8 +1,7 @@
 "use client"
 
 import { useRouter } from 'next/navigation'
-import { Button } from '@/app/components/button'
-import { Card, CardContent, CardFooter } from '@/app/components/card'
+import EventTraceRuleBuilder from '@/app/components/targeting/event_trace_rule_builder'
 
 export default function CreateTraceFilter({ params }: { params: { teamId: string } }) {
     const router = useRouter()
@@ -17,34 +16,11 @@ export default function CreateTraceFilter({ params }: { params: { teamId: string
     }
 
     return (
-        <div className="flex flex-col selection:bg-yellow-200/75 items-start">
-            <p className="font-display text-4xl max-w-6xl text-center">Create Trace Filter</p>
-            <div className="py-4" />
-
-            <Card className="w-full">
-                <CardContent className="pt-6">
-                    <div className="mb-6">
-                        {/* TODO: Add form fields */}
-                    </div>
-                </CardContent>
-
-                <CardFooter className="flex justify-end gap-3">
-                    <Button
-                        variant="outline"
-                        onClick={handleCancel}
-                        className="font-display"
-                    >
-                        Cancel
-                    </Button>
-                    <Button
-                        variant="outline"
-                        onClick={handleCreate}
-                        className="font-display border border-black"
-                    >
-                        Create Filter
-                    </Button>
-                </CardFooter>
-            </Card>
-        </div>
+        <EventTraceRuleBuilder
+            type="trace"
+            mode="create"
+            onCancel={handleCancel}
+            onPrimaryAction={handleCreate}
+        />
     )
 }
diff --git a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
new file mode 100644
index 000000000..d4d54e983
--- /dev/null
+++ b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
@@ -0,0 +1,67 @@
+"use client"
+
+import { Button } from '@/app/components/button'
+import { Card, CardContent, CardFooter } from '@/app/components/card'
+import RuleBuilderCard from './rule_builder_card'
+
+interface EventTraceRuleBuilderProps {
+    type: 'event' | 'trace'
+    mode: 'create' | 'edit'
+    onCancel: () => void
+    onPrimaryAction: () => void
+    children?: React.ReactNode
+}
+
+export default function EventTraceRuleBuilder({
+    type,
+    mode,
+    onCancel,
+    onPrimaryAction,
+    children
+}: EventTraceRuleBuilderProps) {
+    // Derive title based on type and mode
+    const getTitle = () => {
+        const typeLabel = type === 'event' ? 'Event' : 'Trace'
+        if (mode === 'create') {
+            return `Create ${typeLabel} Filter`
+        }
+        return `Edit ${typeLabel} Rule`
+    }
+
+    // Derive primary action label based on mode
+    const getPrimaryActionLabel = () => {
+        return mode === 'create' ? 'Create Rule' : 'Save Changes'
+    }
+
+    return (
+        <div className="flex flex-col selection:bg-yellow-200/75 items-start">
+            <p className="font-display text-4xl max-w-6xl text-center">{getTitle()}</p>
+            <div className="py-4" />
+
+            <Card className="w-full">
+                <CardContent className="pt-6">
+                    <div className="mb-6">
+                        {children}
+                    </div>
+                </CardContent>
+
+                <CardFooter className="flex justify-end gap-3">
+                    <Button
+                        variant="outline"
+                        onClick={onCancel}
+                        className="font-display"
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        variant="outline"
+                        onClick={onPrimaryAction}
+                        className="font-display border border-black"
+                    >
+                        {getPrimaryActionLabel()}
+                    </Button>
+                </CardFooter>
+            </Card>
+        </div>
+    )
+}
diff --git a/frontend/dashboard/app/components/targeting/rule_builder_card.tsx b/frontend/dashboard/app/components/targeting/rule_builder_card.tsx
deleted file mode 100644
index 53f46007d..000000000
--- a/frontend/dashboard/app/components/targeting/rule_builder_card.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { Card, CardContent, CardFooter } from "@/app/components/card"
-import { Button } from "@/app/components/button"
-
-interface RuleBuilderCardProps {
-    type: 'event' | 'trace' | 'session_attr'
-    onCancel: () => void
-    onSave: (rule: any) => void
-    initialData?: any | null
-}
-
-interface EventFilter {
-    id: string
-    key: string
-    type: string
-    value: string | boolean | number
-    operator: string
-    hasError?: boolean
-    errorMessage?: string
-    hint?: string
-}
-
-// Sample data - replace with actual data from your API
-const eventTypes = ["click", "view", "error", "custom"]
-const attributeKeys = ["user_id", "session_id", "device_type", "app_version"]
-const operators = ["equals", "not equals", "contains", "greater than", "less than"]
-
-// Operator types mapping for different attribute types
-const operatorTypesMapping = {
-    string: ['eq', 'neq', 'contains'],
-    number: ['eq', 'neq', 'gt', 'gte', 'lt', 'lte'],
-    int64: ['eq', 'neq', 'gt', 'gte', 'lt', 'lte'],
-    float64: ['eq', 'neq', 'gt', 'gte', 'lt', 'lte'],
-    bool: ['eq', 'neq']
-}
-
-const getOperatorsForType = (mapping: any, type: string): string[] => {
-    return mapping[type] || mapping.string
-}
-
-export default function RuleBuilderCard({ type, onCancel, onSave, initialData }: RuleBuilderCardProps) {
-    const [selectedEventType, setSelectedEventType] = useState<string>(initialData?.eventType || eventTypes[0])
-    const [eventFilters, setEventFilters] = useState<EventFilter[]>(initialData?.eventFilters || [])
-
-    // For session_attr type
-    const [sessionAttr, setSessionAttr] = useState<EventFilter>(initialData?.attribute || {
-        id: 'session-attr',
-        key: attributeKeys[0],
-        type: 'string',
-        operator: 'eq',
-        value: ""
-    })
-
-    const [collectionMode, setCollectionMode] = useState<'none' | 'sample' | 'timeline'>(initialData?.collectionMode || 'sample')
-    const [eventTraceSamplingRate, setEventTraceSamplingRate] = useState<string>(initialData?.eventTraceSamplingRate?.toString() || "100")
-    const [snapshotType, setSnapshotType] = useState<'none' | 'screenshot' | 'layout'>(initialData?.snapshotType || 'none')
-
-    const addEventFilter = () => {
-        const newFilter: EventFilter = {
-            id: `filter-${Date.now()}`,
-            key: attributeKeys[0],
-            type: 'string',
-            operator: 'eq',
-            value: ""
-        }
-        setEventFilters([...eventFilters, newFilter])
-    }
-
-    const removeEventFilter = (conditionId: string, attrId: string) => {
-        setEventFilters(eventFilters.filter(filter => filter.id !== attrId))
-    }
-
-    const updateEventFilter = (conditionId: string, attrId: string, field: 'key' | 'type' | 'value' | 'operator', value: any) => {
-        setEventFilters(eventFilters.map(filter =>
-            filter.id === attrId ? { ...filter, [field]: value } : filter
-        ))
-    }
-
-    const updateSessionAttr = (conditionId: string, attrId: string, field: 'key' | 'type' | 'value' | 'operator', value: any) => {
-        setSessionAttr(prev => ({ ...prev, [field]: value }))
-    }
-
-    const handleSave = () => {
-        let rule: any = {
-            type: type,
-            collectEvent: collectionMode === 'sample',
-            collectTimeline: collectionMode === 'timeline',
-            eventTraceSamplingRate: collectionMode === 'sample' ? parseFloat(eventTraceSamplingRate) : null,
-            snapshotType: collectionMode === 'none' ? null : snapshotType
-        }
-
-        if (type === 'event' || type === 'trace') {
-            rule.eventType = selectedEventType
-            rule.eventFilters = eventFilters
-        } else if (type === 'session_attr') {
-            rule.attribute = sessionAttr
-        }
-
-        onSave(rule)
-    }
-
-    const checkboxStyle = "appearance-none border-black rounded-xs font-display checked:bg-neutral-950 checked:hover:bg-neutral-950 focus:ring-offset-yellow-200 focus:ring-0 checked:focus:bg-neutral-950"
-    const radioStyle = "appearance-none border-black rounded-full font-display checked:bg-neutral-950 checked:hover:bg-neutral-950 focus:ring-offset-yellow-200 focus:ring-0 checked:focus:bg-neutral-950"
-
-    return (
-        <Card className="w-full">
-            <CardContent className="pt-6">
-            </CardContent>
-
-            <CardFooter className="flex justify-end gap-3">
-                <Button
-                    variant="outline"
-                    onClick={onCancel}
-                    className="font-display"
-                >
-                    Cancel
-                </Button>
-                <Button
-                    variant="outline"
-                    onClick={handleSave}
-                    className="font-display border border-black"
-                >
-                    Create Filter
-                </Button>
-            </CardFooter>
-        </Card>
-    )
-}

From 781a025b82df25c9ab119263ee02e32a77fc3508 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 6 Nov 2025 00:33:20 +0530
Subject: [PATCH 29/98] feat(frontend): fix rule name rendering

---
 .../targeting/event_trace_rule_builder.tsx    |  1 -
 .../targeting/rule_overrides_table.tsx        | 23 +++++--------------
 2 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
index d4d54e983..1a889d8bd 100644
--- a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
@@ -2,7 +2,6 @@
 
 import { Button } from '@/app/components/button'
 import { Card, CardContent, CardFooter } from '@/app/components/card'
-import RuleBuilderCard from './rule_builder_card'
 
 interface EventTraceRuleBuilderProps {
     type: 'event' | 'trace'
diff --git a/frontend/dashboard/app/components/targeting/rule_overrides_table.tsx b/frontend/dashboard/app/components/targeting/rule_overrides_table.tsx
index 1eade276b..e9bd19c24 100644
--- a/frontend/dashboard/app/components/targeting/rule_overrides_table.tsx
+++ b/frontend/dashboard/app/components/targeting/rule_overrides_table.tsx
@@ -1,21 +1,10 @@
 "use client"
 
-import { EventTargetingRule, TraceTargetingRule, EventTargetingCollectionConfig, EventTargetingAttachmentConfig, EventTargetingRuleType } from '@/app/api/api_calls'
+import { EventTargetingRule, TraceTargetingRule, EventTargetingCollectionConfig, EventTargetingAttachmentConfig } from '@/app/api/api_calls'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/app/components/table'
 import { formatDateToHumanReadableDate, formatDateToHumanReadableTime } from '@/app/utils/time_utils'
 import Paginator from '@/app/components/paginator'
 
-const getFilterDisplayText = (type: EventTargetingRuleType, filter: string): string => {
-    switch (type) {
-        case 'all_events':
-            return 'All Events'
-        case 'all_traces':
-            return 'All Traces'
-        default:
-            return filter
-    }
-}
-
 const getCollectionConfigDisplay = (collectionConfig: EventTargetingCollectionConfig): string => {
     switch (collectionConfig.mode) {
         case 'sample_rate':
@@ -40,11 +29,11 @@ const getAttachmentConfigDisplay = (attachmentConfig?: EventTargetingAttachmentC
     return attachmentConfig
 }
 
-type Rule = EventTargetingRule | TraceTargetingRule
+type RuleFilter = EventTargetingRule | TraceTargetingRule
 
 interface RulesTableProps {
-    rules: Rule[]
-    onRuleClick: (rule: Rule) => void
+    rules: RuleFilter[]
+    onRuleClick: (rule: RuleFilter) => void
     prevEnabled: boolean
     nextEnabled: boolean
     onNext: () => void
@@ -52,7 +41,7 @@ interface RulesTableProps {
     showPaginator: boolean
 }
 
-export default function RulesOverridesTable({ rules, onRuleClick, prevEnabled, nextEnabled, onNext, onPrev, showPaginator }: RulesTableProps) {
+export default function RulesTable({ rules, onRuleClick, prevEnabled, nextEnabled, onNext, onPrev, showPaginator }: RulesTableProps) {
     if (rules.length === 0) {
         return null
     }
@@ -89,7 +78,7 @@ export default function RulesOverridesTable({ rules, onRuleClick, prevEnabled, n
                             onClick={() => onRuleClick(dataFilter)}
                         >
                             <TableCell className="w-[60%] p-4">
-                                <p className='truncate select-none font-mono text-sm'>{getFilterDisplayText(dataFilter.type, dataFilter.rule)}</p>
+                                <p className='truncate select-none font-mono text-sm'>{dataFilter.rule}</p>
                                 <div className='py-1' />
                                 <p className='text-xs truncate text-gray-500 select-none'>{getCollectionConfigDisplay(dataFilter.collection_config)}</p>
                                 <p className='text-xs truncate text-gray-500 select-none'>{getAttachmentConfigDisplay('attachment_config' in dataFilter ? dataFilter.attachment_config : undefined)}</p>

From 69f1d76ad5f269accc855e4ce07665fcd23f3e56 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 6 Nov 2025 00:33:42 +0530
Subject: [PATCH 30/98] feat(frontend): remove unnecessary comments

---
 .../app/components/targeting/event_trace_rule_builder.tsx       | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
index 1a889d8bd..7fd693c7d 100644
--- a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
@@ -18,7 +18,6 @@ export default function EventTraceRuleBuilder({
     onPrimaryAction,
     children
 }: EventTraceRuleBuilderProps) {
-    // Derive title based on type and mode
     const getTitle = () => {
         const typeLabel = type === 'event' ? 'Event' : 'Trace'
         if (mode === 'create') {
@@ -27,7 +26,6 @@ export default function EventTraceRuleBuilder({
         return `Edit ${typeLabel} Rule`
     }
 
-    // Derive primary action label based on mode
     const getPrimaryActionLabel = () => {
         return mode === 'create' ? 'Create Rule' : 'Save Changes'
     }

From 8f353a1f7eafebdbdbe039b618d9d5720a0721f4 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 6 Nov 2025 00:38:12 +0530
Subject: [PATCH 31/98] feat(frontend): refactor names

---
 frontend/dashboard/app/[teamId]/data/page.tsx          | 10 +++++-----
 ...able.tsx => event_tracce_targeting_rules_table.tsx} |  0
 ...ing_table.tsx => session_targeting_rules_table.tsx} |  4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)
 rename frontend/dashboard/app/components/targeting/{rule_overrides_table.tsx => event_tracce_targeting_rules_table.tsx} (100%)
 rename frontend/dashboard/app/components/targeting/{session_targeting_table.tsx => session_targeting_rules_table.tsx} (93%)

diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index 88f798f7c..827efcaf6 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -9,8 +9,8 @@ import { Button } from '@/app/components/button'
 import { Plus, Pencil } from 'lucide-react'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/app/components/dropdown_menu'
 import EditDefaultRuleDialog from '@/app/components/targeting/edit_default_rule_dialog'
-import RulesOverridesTable from '@/app/components/targeting/rule_overrides_table'
-import SessionTargetingTable from '@/app/components/targeting/session_targeting_table'
+import EventTraceTargetingRulesTable from '@/app/components/targeting/event_tracce_targeting_rules_table'
+import SessionTargetingRulesTable from '@/app/components/targeting/session_targeting_rules_table'
 import { toastPositive, toastNegative } from '@/app/utils/use_toast'
 
 interface PageState {
@@ -311,7 +311,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                             </div>
                         )}
 
-                        <RulesOverridesTable
+                        <EventTraceTargetingRulesTable
                             rules={eventsOverideRules}
                             onRuleClick={(rule) => handleEditRule(rule, 'event')}
                             prevEnabled={pageState.eventTargetingRules.meta.previous}
@@ -348,7 +348,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                             </div>
                         )}
 
-                        <RulesOverridesTable
+                        <EventTraceTargetingRulesTable
                             rules={traceOverrideRules}
                             onRuleClick={(rule) => handleEditRule(rule, 'trace')}
                             prevEnabled={pageState.traceTargetingRules.meta.previous}
@@ -367,7 +367,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
 
                         <div className="py-4" />
 
-                        <SessionTargetingTable
+                        <SessionTargetingRulesTable
                             rules={sessionTargetingRules}
                             onRuleClick={(rule) => handleEditRule(rule, 'session')}
                             prevEnabled={pageState.sessionTargetingRules.meta.previous}
diff --git a/frontend/dashboard/app/components/targeting/rule_overrides_table.tsx b/frontend/dashboard/app/components/targeting/event_tracce_targeting_rules_table.tsx
similarity index 100%
rename from frontend/dashboard/app/components/targeting/rule_overrides_table.tsx
rename to frontend/dashboard/app/components/targeting/event_tracce_targeting_rules_table.tsx
diff --git a/frontend/dashboard/app/components/targeting/session_targeting_table.tsx b/frontend/dashboard/app/components/targeting/session_targeting_rules_table.tsx
similarity index 93%
rename from frontend/dashboard/app/components/targeting/session_targeting_table.tsx
rename to frontend/dashboard/app/components/targeting/session_targeting_rules_table.tsx
index 37496d10c..98d967c8c 100644
--- a/frontend/dashboard/app/components/targeting/session_targeting_table.tsx
+++ b/frontend/dashboard/app/components/targeting/session_targeting_rules_table.tsx
@@ -9,7 +9,7 @@ const getSamplingRateDisplay = (samplingRate: number): string => {
     return `${samplingRate}% sampling rate`
 }
 
-interface SessionTargetingTableProps {
+interface SessionTargetingRulesTableProps {
     rules: SessionTargetingRule[]
     onRuleClick: (rule: SessionTargetingRule) => void
     prevEnabled: boolean
@@ -19,7 +19,7 @@ interface SessionTargetingTableProps {
     showPaginator: boolean
 }
 
-export default function SessionTargetingTable({ rules, onRuleClick, prevEnabled, nextEnabled, onNext, onPrev, showPaginator }: SessionTargetingTableProps) {
+export default function SessionTargetingRulesTable({ rules, onRuleClick, prevEnabled, nextEnabled, onNext, onPrev, showPaginator }: SessionTargetingRulesTableProps) {
     if (rules.length === 0) {
         return null
     }

From 40b7908f0e5ba591c00add236e5e342c3570e19d Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 6 Nov 2025 00:55:18 +0530
Subject: [PATCH 32/98] feat(frontend): pass on ruleId to rule builder
 component

---
 .../dashboard/app/[teamId]/data/event/[ruleId]/edit/page.tsx   | 3 ++-
 .../dashboard/app/[teamId]/data/trace/[ruleId]/edit/page.tsx   | 3 ++-
 .../app/components/targeting/event_trace_rule_builder.tsx      | 2 ++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/dashboard/app/[teamId]/data/event/[ruleId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/event/[ruleId]/edit/page.tsx
index 4f73fcd0d..5741cb745 100644
--- a/frontend/dashboard/app/[teamId]/data/event/[ruleId]/edit/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/event/[ruleId]/edit/page.tsx
@@ -3,7 +3,7 @@
 import { useRouter } from 'next/navigation'
 import EventTraceRuleBuilder from '@/app/components/targeting/event_trace_rule_builder'
 
-export default function EditEventFilter({ params }: { params: { teamId: string, filterId: string } }) {
+export default function EditEventFilter({ params }: { params: { teamId: string, ruleId: string } }) {
     const router = useRouter()
 
     const handleCancel = () => {
@@ -18,6 +18,7 @@ export default function EditEventFilter({ params }: { params: { teamId: string,
         <EventTraceRuleBuilder
             type="event"
             mode="edit"
+            ruleId={params.ruleId}
             onCancel={handleCancel}
             onPrimaryAction={handleSave}
         />
diff --git a/frontend/dashboard/app/[teamId]/data/trace/[ruleId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/trace/[ruleId]/edit/page.tsx
index ac794e782..a597e0d1f 100644
--- a/frontend/dashboard/app/[teamId]/data/trace/[ruleId]/edit/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/trace/[ruleId]/edit/page.tsx
@@ -3,7 +3,7 @@
 import { useRouter } from 'next/navigation'
 import EventTraceRuleBuilder from '@/app/components/targeting/event_trace_rule_builder'
 
-export default function EditTraceFilter({ params }: { params: { teamId: string, filterId: string } }) {
+export default function EditTraceFilter({ params }: { params: { teamId: string, ruleId: string } }) {
     const router = useRouter()
 
     const handleCancel = () => {
@@ -19,6 +19,7 @@ export default function EditTraceFilter({ params }: { params: { teamId: string,
         <EventTraceRuleBuilder
             type="trace"
             mode="edit"
+            ruleId={params.ruleId}
             onCancel={handleCancel}
             onPrimaryAction={handleSave}
         />
diff --git a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
index 7fd693c7d..b0f8436d5 100644
--- a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
@@ -6,6 +6,7 @@ import { Card, CardContent, CardFooter } from '@/app/components/card'
 interface EventTraceRuleBuilderProps {
     type: 'event' | 'trace'
     mode: 'create' | 'edit'
+    ruleId?: string
     onCancel: () => void
     onPrimaryAction: () => void
     children?: React.ReactNode
@@ -14,6 +15,7 @@ interface EventTraceRuleBuilderProps {
 export default function EventTraceRuleBuilder({
     type,
     mode,
+    ruleId,
     onCancel,
     onPrimaryAction,
     children

From e42dac4c173564bbf04cadcfc51737bf7f35a945 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 6 Nov 2025 01:13:57 +0530
Subject: [PATCH 33/98] feat(frontend): navigation fixes use appId for edit and
 create pages

---
 .../event/[ruleId]/edit/page.tsx              |   7 +-
 .../data/{ => [appId]}/event/create/page.tsx  |   7 +-
 .../session/[ruleId]/edit/page.tsx            |   6 +-
 .../{ => [appId]}/session/create/page.tsx     |   6 +-
 .../trace/[ruleId]/edit/page.tsx              |   7 +-
 .../data/{ => [appId]}/trace/create/page.tsx  |   7 +-
 frontend/dashboard/app/[teamId]/data/page.tsx |   8 +-
 frontend/dashboard/app/api/api_calls.ts       |  78 +++++++++++
 .../targeting/event_trace_rule_builder.tsx    | 131 +++++++++++++++---
 9 files changed, 218 insertions(+), 39 deletions(-)
 rename frontend/dashboard/app/[teamId]/data/{ => [appId]}/event/[ruleId]/edit/page.tsx (80%)
 rename frontend/dashboard/app/[teamId]/data/{ => [appId]}/event/create/page.tsx (82%)
 rename frontend/dashboard/app/[teamId]/data/{ => [appId]}/session/[ruleId]/edit/page.tsx (91%)
 rename frontend/dashboard/app/[teamId]/data/{ => [appId]}/session/create/page.tsx (92%)
 rename frontend/dashboard/app/[teamId]/data/{ => [appId]}/trace/[ruleId]/edit/page.tsx (81%)
 rename frontend/dashboard/app/[teamId]/data/{ => [appId]}/trace/create/page.tsx (82%)

diff --git a/frontend/dashboard/app/[teamId]/data/event/[ruleId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/event/[ruleId]/edit/page.tsx
similarity index 80%
rename from frontend/dashboard/app/[teamId]/data/event/[ruleId]/edit/page.tsx
rename to frontend/dashboard/app/[teamId]/data/[appId]/event/[ruleId]/edit/page.tsx
index 5741cb745..097dc6cda 100644
--- a/frontend/dashboard/app/[teamId]/data/event/[ruleId]/edit/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/event/[ruleId]/edit/page.tsx
@@ -3,21 +3,22 @@
 import { useRouter } from 'next/navigation'
 import EventTraceRuleBuilder from '@/app/components/targeting/event_trace_rule_builder'
 
-export default function EditEventFilter({ params }: { params: { teamId: string, ruleId: string } }) {
+export default function EditEventFilter({ params }: { params: { teamId: string, appId: string, ruleId: string } }) {
     const router = useRouter()
 
     const handleCancel = () => {
-        router.push(`/${params.teamId}/data`)
+        router.back()
     }
 
     const handleSave = () => {
-        router.push(`/${params.teamId}/data`)
+        router.back()
     }
 
     return (
         <EventTraceRuleBuilder
             type="event"
             mode="edit"
+            appId={params.appId}
             ruleId={params.ruleId}
             onCancel={handleCancel}
             onPrimaryAction={handleSave}
diff --git a/frontend/dashboard/app/[teamId]/data/event/create/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/event/create/page.tsx
similarity index 82%
rename from frontend/dashboard/app/[teamId]/data/event/create/page.tsx
rename to frontend/dashboard/app/[teamId]/data/[appId]/event/create/page.tsx
index d9a22fa56..bcb42dad9 100644
--- a/frontend/dashboard/app/[teamId]/data/event/create/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/event/create/page.tsx
@@ -3,22 +3,23 @@
 import { useRouter } from 'next/navigation'
 import EventTraceRuleBuilder from '@/app/components/targeting/event_trace_rule_builder'
 
-export default function CreateEventFilter({ params }: { params: { teamId: string } }) {
+export default function CreateEventFilter({ params }: { params: { teamId: string, appId: string } }) {
     const router = useRouter()
 
     const handleCancel = () => {
-        router.push(`/${params.teamId}/data`)
+        router.back()
     }
 
     const handleCreate = () => {
         // TODO: Implement create logic
-        router.push(`/${params.teamId}/data`)
+        router.back()
     }
 
     return (
         <EventTraceRuleBuilder
             type="event"
             mode="create"
+            appId={params.appId}
             onCancel={handleCancel}
             onPrimaryAction={handleCreate}
         />
diff --git a/frontend/dashboard/app/[teamId]/data/session/[ruleId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/session/[ruleId]/edit/page.tsx
similarity index 91%
rename from frontend/dashboard/app/[teamId]/data/session/[ruleId]/edit/page.tsx
rename to frontend/dashboard/app/[teamId]/data/[appId]/session/[ruleId]/edit/page.tsx
index e0d6b9c68..569a94850 100644
--- a/frontend/dashboard/app/[teamId]/data/session/[ruleId]/edit/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/session/[ruleId]/edit/page.tsx
@@ -4,16 +4,16 @@ import { useRouter } from 'next/navigation'
 import { Button } from '@/app/components/button'
 import { Card, CardContent, CardFooter } from '@/app/components/card'
 
-export default function EditSessionFilter({ params }: { params: { teamId: string, ruleId: string } }) {
+export default function EditSessionFilter({ params }: { params: { teamId: string, appId: string, ruleId: string } }) {
     const router = useRouter()
 
     const handleCancel = () => {
-        router.push(`/${params.teamId}/data`)
+        router.back()
     }
 
     const handleSave = () => {
         // TODO: Implement save logic
-        router.push(`/${params.teamId}/data`)
+        router.back()
     }
 
     return (
diff --git a/frontend/dashboard/app/[teamId]/data/session/create/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/session/create/page.tsx
similarity index 92%
rename from frontend/dashboard/app/[teamId]/data/session/create/page.tsx
rename to frontend/dashboard/app/[teamId]/data/[appId]/session/create/page.tsx
index 54258ee5f..633aaa286 100644
--- a/frontend/dashboard/app/[teamId]/data/session/create/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/session/create/page.tsx
@@ -4,16 +4,16 @@ import { useRouter } from 'next/navigation'
 import { Button } from '@/app/components/button'
 import { Card, CardContent, CardFooter } from '@/app/components/card'
 
-export default function CreateSessionFilter({ params }: { params: { teamId: string } }) {
+export default function CreateSessionFilter({ params }: { params: { teamId: string, appId: string } }) {
     const router = useRouter()
 
     const handleCancel = () => {
-        router.push(`/${params.teamId}/data`)
+        router.back()
     }
 
     const handleCreate = () => {
         // TODO: Implement create logic
-        router.push(`/${params.teamId}/data`)
+        router.back()
     }
 
     return (
diff --git a/frontend/dashboard/app/[teamId]/data/trace/[ruleId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/trace/[ruleId]/edit/page.tsx
similarity index 81%
rename from frontend/dashboard/app/[teamId]/data/trace/[ruleId]/edit/page.tsx
rename to frontend/dashboard/app/[teamId]/data/[appId]/trace/[ruleId]/edit/page.tsx
index a597e0d1f..3b0cdd57c 100644
--- a/frontend/dashboard/app/[teamId]/data/trace/[ruleId]/edit/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/trace/[ruleId]/edit/page.tsx
@@ -3,22 +3,23 @@
 import { useRouter } from 'next/navigation'
 import EventTraceRuleBuilder from '@/app/components/targeting/event_trace_rule_builder'
 
-export default function EditTraceFilter({ params }: { params: { teamId: string, ruleId: string } }) {
+export default function EditTraceFilter({ params }: { params: { teamId: string, appId: string, ruleId: string } }) {
     const router = useRouter()
 
     const handleCancel = () => {
-        router.push(`/${params.teamId}/data`)
+        router.back()
     }
 
     const handleSave = () => {
         // TODO: Implement save logic
-        router.push(`/${params.teamId}/data`)
+        router.back()
     }
 
     return (
         <EventTraceRuleBuilder
             type="trace"
             mode="edit"
+            appId={params.appId}
             ruleId={params.ruleId}
             onCancel={handleCancel}
             onPrimaryAction={handleSave}
diff --git a/frontend/dashboard/app/[teamId]/data/trace/create/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/trace/create/page.tsx
similarity index 82%
rename from frontend/dashboard/app/[teamId]/data/trace/create/page.tsx
rename to frontend/dashboard/app/[teamId]/data/[appId]/trace/create/page.tsx
index 9f78675b0..cf7763622 100644
--- a/frontend/dashboard/app/[teamId]/data/trace/create/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/trace/create/page.tsx
@@ -3,22 +3,23 @@
 import { useRouter } from 'next/navigation'
 import EventTraceRuleBuilder from '@/app/components/targeting/event_trace_rule_builder'
 
-export default function CreateTraceFilter({ params }: { params: { teamId: string } }) {
+export default function CreateTraceFilter({ params }: { params: { teamId: string, appId: string } }) {
     const router = useRouter()
 
     const handleCancel = () => {
-        router.push(`/${params.teamId}/data`)
+        router.back()
     }
 
     const handleCreate = () => {
         // TODO: Implement create logic
-        router.push(`/${params.teamId}/data`)
+        router.back()
     }
 
     return (
         <EventTraceRuleBuilder
             type="trace"
             mode="create"
+            appId={params.appId}
             onCancel={handleCancel}
             onPrimaryAction={handleCreate}
         />
diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index 827efcaf6..f069be1df 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -176,7 +176,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
     const sessionTargetingRules = pageState.sessionTargetingRules.results;
 
     const handleEditRule = (dataFilter: typeof eventsOverideRules[0] | typeof traceOverrideRules[0] | typeof sessionTargetingRules[0], filterType: 'event' | 'trace' | 'session') => {
-        router.push(`/${params.teamId}/data/${filterType}/${dataFilter.id}/edit`)
+        router.push(`/${params.teamId}/data/${pageState.filters.app!.id}/${filterType}/${dataFilter.id}/edit`)
     }
 
     const handleDefaultRuleUpdateSuccess = (collectionMode: 'sample_rate' | 'timeline_only' | 'disable', sampleRate?: number) => {
@@ -236,13 +236,13 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         </Button>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent align="end">
-                        <DropdownMenuItem onClick={() => router.push(`/${params.teamId}/data/event/create`)}>
+                        <DropdownMenuItem onClick={() => router.push(`/${params.teamId}/data/${pageState.filters.app!.id}/event/create`)}>
                             Event Rule
                         </DropdownMenuItem>
-                        <DropdownMenuItem onClick={() => router.push(`/${params.teamId}/data/trace/create`)}>
+                        <DropdownMenuItem onClick={() => router.push(`/${params.teamId}/data/${pageState.filters.app!.id}/trace/create`)}>
                             Trace Rule
                         </DropdownMenuItem>
-                        <DropdownMenuItem onClick={() => router.push(`/${params.teamId}/data/session/create`)}>
+                        <DropdownMenuItem onClick={() => router.push(`/${params.teamId}/data/${pageState.filters.app!.id}/session/create`)}>
                             Session Rule
                         </DropdownMenuItem>
                     </DropdownMenuContent>
diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index ed300e0b2..8144d350f 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -377,6 +377,27 @@ export enum SessionTargetingApiStatus {
   Cancelled,
 }
 
+export enum EventTargetingRuleApiStatus {
+  Loading,
+  Success,
+  Error,
+  Cancelled,
+}
+
+export enum TraceTargetingRuleApiStatus {
+  Loading,
+  Success,
+  Error,
+  Cancelled,
+}
+
+export enum SessionTargetingRuleApiStatus {
+  Loading,
+  Success,
+  Error,
+  Cancelled,
+}
+
 export enum SessionType {
   All = "All Sessions",
   Crashes = "Crash Sessions",
@@ -2622,4 +2643,61 @@ export const fetchSessionTargetingRulesFromServer = async (
   } catch {
     return { status: SessionTargetingApiStatus.Cancelled, data: null }
   }
+}
+
+export const fetchEventTargetingRuleFromServer = async (
+  appId: String,
+  ruleId: string,
+) => {
+  const url = `/api/apps/${appId}/targetingRules/events/${ruleId}`
+
+  try {
+    const res = await measureAuth.fetchMeasure(url)
+
+    if (!res.ok) {
+      return { status: EventTargetingRuleApiStatus.Error, data: null }
+    }
+    
+    const data = await res.json()
+    return { status: EventTargetingRuleApiStatus.Success, data: data }
+  } catch {
+    return { status: EventTargetingRuleApiStatus.Cancelled, data: null }
+  }
+}
+
+export const fetchTraceTargetingRuleFromServer = async (
+  appId: String,
+  ruleId: string,
+) => {
+  const url = `/api/apps/${appId}/targetingRules/traces/${ruleId}`
+  
+  try {
+    const res = await measureAuth.fetchMeasure(url)
+    
+    if (!res.ok) {
+      return { status: TraceTargetingRuleApiStatus.Error, data: null }
+    }
+    const data = await res.json()
+    return { status: TraceTargetingRuleApiStatus.Success, data: data }
+  } catch {
+    return { status: TraceTargetingRuleApiStatus.Cancelled, data: null }
+  }
+}
+
+export const fetchSessionTargetingRuleFromServer = async (
+  appId: String,
+  ruleId: string,
+) => {
+  const url = `/api/apps/${appId}/targetingRules/sessions/${ruleId}`
+  
+  try {
+    const res = await measureAuth.fetchMeasure(url)
+    if (!res.ok) {
+      return { status: SessionTargetingRuleApiStatus.Error, data: null }
+    }
+    const data = await res.json()
+    return { status: SessionTargetingRuleApiStatus.Success, data: data }
+  } catch {
+    return { status: SessionTargetingRuleApiStatus.Cancelled, data: null }
+  }
 }
\ No newline at end of file
diff --git a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
index b0f8436d5..faf029fd4 100644
--- a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
@@ -2,10 +2,21 @@
 
 import { Button } from '@/app/components/button'
 import { Card, CardContent, CardFooter } from '@/app/components/card'
+import { useEffect, useState } from 'react'
+import {
+    EventTargetingRuleApiStatus,
+    TraceTargetingRuleApiStatus,
+    EventTargetingRule,
+    TraceTargetingRule,
+    fetchEventTargetingRuleFromServer,
+    fetchTraceTargetingRuleFromServer
+} from '@/app/api/api_calls'
+import LoadingBar from '@/app/components/loading_bar'
 
 interface EventTraceRuleBuilderProps {
     type: 'event' | 'trace'
     mode: 'create' | 'edit'
+    appId: string
     ruleId?: string
     onCancel: () => void
     onPrimaryAction: () => void
@@ -15,11 +26,65 @@ interface EventTraceRuleBuilderProps {
 export default function EventTraceRuleBuilder({
     type,
     mode,
+    appId,
     ruleId,
     onCancel,
     onPrimaryAction,
     children
 }: EventTraceRuleBuilderProps) {
+    const [apiStatus, setApiStatus] = useState<EventTargetingRuleApiStatus | TraceTargetingRuleApiStatus>(
+        mode === 'create'
+            ? EventTargetingRuleApiStatus.Success
+            : EventTargetingRuleApiStatus.Loading
+    )
+    const [ruleData, setRuleData] = useState<EventTargetingRule | TraceTargetingRule | null>(null)
+
+    useEffect(() => {
+        if (mode === 'edit' && ruleId) {
+            fetchRuleData()
+        }
+    }, [mode, ruleId, appId])
+
+    const fetchEventRuleData = async () => {
+        if (!ruleId) return
+
+        setApiStatus(EventTargetingRuleApiStatus.Loading)
+
+        const result = await fetchEventTargetingRuleFromServer(appId, ruleId)
+
+        if (result.status === EventTargetingRuleApiStatus.Error) {
+            setApiStatus(EventTargetingRuleApiStatus.Error)
+            return
+        }
+
+        setRuleData(result.data)
+        setApiStatus(EventTargetingRuleApiStatus.Success)
+    }
+
+    const fetchTraceRuleData = async () => {
+        if (!ruleId) return
+
+        setApiStatus(TraceTargetingRuleApiStatus.Loading)
+
+        const result = await fetchTraceTargetingRuleFromServer(appId, ruleId)
+
+        if (result.status === TraceTargetingRuleApiStatus.Error) {
+            setApiStatus(TraceTargetingRuleApiStatus.Error)
+            return
+        }
+
+        setRuleData(result.data)
+        setApiStatus(TraceTargetingRuleApiStatus.Success)
+    }
+
+    const fetchRuleData = async () => {
+        if (type === 'event') {
+            await fetchEventRuleData()
+        } else {
+            await fetchTraceRuleData()
+        }
+    }
+
     const getTitle = () => {
         const typeLabel = type === 'event' ? 'Event' : 'Trace'
         if (mode === 'create') {
@@ -32,35 +97,67 @@ export default function EventTraceRuleBuilder({
         return mode === 'create' ? 'Create Rule' : 'Save Changes'
     }
 
+    const isLoading = apiStatus === EventTargetingRuleApiStatus.Loading ||
+                      apiStatus === TraceTargetingRuleApiStatus.Loading
+    const hasError = apiStatus === EventTargetingRuleApiStatus.Error ||
+                     apiStatus === TraceTargetingRuleApiStatus.Error
+    const isReady = apiStatus === EventTargetingRuleApiStatus.Success ||
+                    apiStatus === TraceTargetingRuleApiStatus.Success
+
     return (
         <div className="flex flex-col selection:bg-yellow-200/75 items-start">
             <p className="font-display text-4xl max-w-6xl text-center">{getTitle()}</p>
             <div className="py-4" />
 
-            <Card className="w-full">
-                <CardContent className="pt-6">
-                    <div className="mb-6">
-                        {children}
-                    </div>
-                </CardContent>
+            {/* Loading indicator */}
+            <div className={`py-1 w-full ${isLoading ? 'visible' : 'invisible'}`}>
+                <LoadingBar />
+            </div>
 
-                <CardFooter className="flex justify-end gap-3">
+            {/* Error state */}
+            {hasError && (
+                <div className="w-full">
+                    <p className="text-lg font-display text-red-600">
+                        Error loading rule data. Please try again or go back.
+                    </p>
+                    <div className="py-4" />
                     <Button
                         variant="outline"
                         onClick={onCancel}
                         className="font-display"
                     >
-                        Cancel
+                        Go Back
                     </Button>
-                    <Button
-                        variant="outline"
-                        onClick={onPrimaryAction}
-                        className="font-display border border-black"
-                    >
-                        {getPrimaryActionLabel()}
-                    </Button>
-                </CardFooter>
-            </Card>
+                </div>
+            )}
+
+            {/* Main content */}
+            {isReady && (
+                <Card className="w-full">
+                    <CardContent className="pt-6">
+                        <div className="mb-6">
+                            {children}
+                        </div>
+                    </CardContent>
+
+                    <CardFooter className="flex justify-end gap-3">
+                        <Button
+                            variant="outline"
+                            onClick={onCancel}
+                            className="font-display"
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            variant="outline"
+                            onClick={onPrimaryAction}
+                            className="font-display border border-black"
+                        >
+                            {getPrimaryActionLabel()}
+                        </Button>
+                    </CardFooter>
+                </Card>
+            )}
         </div>
     )
 }

From 617aaf1fc119b7b2db6c99cfc2b768f34707cd14 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 6 Nov 2025 01:19:44 +0530
Subject: [PATCH 34/98] feat(frontend): minor changes

---
 frontend/dashboard/app/[teamId]/data/page.tsx             | 8 ++++++--
 .../app/components/targeting/event_trace_rule_builder.tsx | 6 +++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index f069be1df..8920b604b 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -235,7 +235,11 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                             <Plus /> Create Rule
                         </Button>
                     </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
+                    <DropdownMenuContent
+                        align="end"
+                        className='select-none'
+                        onCloseAutoFocus={(e) => e.preventDefault()}
+                    >
                         <DropdownMenuItem onClick={() => router.push(`/${params.teamId}/data/${pageState.filters.app!.id}/event/create`)}>
                             Event Rule
                         </DropdownMenuItem>
@@ -243,7 +247,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                             Trace Rule
                         </DropdownMenuItem>
                         <DropdownMenuItem onClick={() => router.push(`/${params.teamId}/data/${pageState.filters.app!.id}/session/create`)}>
-                            Session Rule
+                            Session Timeline Rule
                         </DropdownMenuItem>
                     </DropdownMenuContent>
                 </DropdownMenu>
diff --git a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
index faf029fd4..562688467 100644
--- a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
@@ -116,15 +116,15 @@ export default function EventTraceRuleBuilder({
 
             {/* Error state */}
             {hasError && (
-                <div className="w-full">
-                    <p className="text-lg font-display text-red-600">
+                <div className="w-full flex flex-col items-center">
+                    <p className="text-normal font-body">
                         Error loading rule data. Please try again or go back.
                     </p>
                     <div className="py-4" />
                     <Button
                         variant="outline"
                         onClick={onCancel}
-                        className="font-display"
+                        className="font-display border border-black select-none"
                     >
                         Go Back
                     </Button>

From 2ae4fa5f6803a63414ddcac9fa3405475d109638 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 6 Nov 2025 01:23:42 +0530
Subject: [PATCH 35/98] feat(frontend): add dummy response for edit event and
 trace rule

---
 frontend/dashboard/app/api/api_calls.ts       | 17 +++++++++
 .../targeting/event_trace_rule_builder.tsx    | 38 +++++++++++--------
 2 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index 8144d350f..126033d21 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -1217,6 +1217,23 @@ export const emptySessionTargetingResponse: SessionTargetingResponse = {
   ]
 }
 
+export const emptyEventTargetingRule: EventTargetingRule = {
+  id: "df-events-001",
+  rule: 'event.event_type == "crash"',
+  collection_config: { mode: 'sample_rate', sample_rate: 5 },
+  attachment_config: 'screenshot',
+  updated_at: "2024-01-01T00:00:00Z",
+  updated_by: "system@example.com",
+}
+
+export const emptyTraceTargetingRule: TraceTargetingRule = {
+  id: "df-traces-001",
+  rule: 'trace.trace_name == "root"',
+  collection_config: { mode: 'sample_rate', sample_rate: 10 },
+  updated_at: "2024-01-01T00:00:00Z",
+  updated_by: "system@example.com",
+}
+
 export class AppVersion {
   name: string
   code: string
diff --git a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
index 562688467..9c50a0503 100644
--- a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
@@ -9,7 +9,9 @@ import {
     EventTargetingRule,
     TraceTargetingRule,
     fetchEventTargetingRuleFromServer,
-    fetchTraceTargetingRuleFromServer
+    fetchTraceTargetingRuleFromServer,
+    emptyEventTargetingRule,
+    emptyTraceTargetingRule
 } from '@/app/api/api_calls'
 import LoadingBar from '@/app/components/loading_bar'
 
@@ -50,14 +52,16 @@ export default function EventTraceRuleBuilder({
 
         setApiStatus(EventTargetingRuleApiStatus.Loading)
 
-        const result = await fetchEventTargetingRuleFromServer(appId, ruleId)
+        // TEMPORARY: Using dummy response instead of actual API call
+        // const result = await fetchEventTargetingRuleFromServer(appId, ruleId)
+        // if (result.status === EventTargetingRuleApiStatus.Error) {
+        //     setApiStatus(EventTargetingRuleApiStatus.Error)
+        //     return
+        // }
+        // setRuleData(result.data)
 
-        if (result.status === EventTargetingRuleApiStatus.Error) {
-            setApiStatus(EventTargetingRuleApiStatus.Error)
-            return
-        }
-
-        setRuleData(result.data)
+        // Using dummy data temporarily
+        setRuleData(emptyEventTargetingRule)
         setApiStatus(EventTargetingRuleApiStatus.Success)
     }
 
@@ -66,14 +70,16 @@ export default function EventTraceRuleBuilder({
 
         setApiStatus(TraceTargetingRuleApiStatus.Loading)
 
-        const result = await fetchTraceTargetingRuleFromServer(appId, ruleId)
-
-        if (result.status === TraceTargetingRuleApiStatus.Error) {
-            setApiStatus(TraceTargetingRuleApiStatus.Error)
-            return
-        }
+        // TEMPORARY: Using dummy response instead of actual API call
+        // const result = await fetchTraceTargetingRuleFromServer(appId, ruleId)
+        // if (result.status === TraceTargetingRuleApiStatus.Error) {
+        //     setApiStatus(TraceTargetingRuleApiStatus.Error)
+        //     return
+        // }
+        // setRuleData(result.data)
 
-        setRuleData(result.data)
+        // Using dummy data temporarily
+        setRuleData(emptyTraceTargetingRule)
         setApiStatus(TraceTargetingRuleApiStatus.Success)
     }
 
@@ -118,7 +124,7 @@ export default function EventTraceRuleBuilder({
             {hasError && (
                 <div className="w-full flex flex-col items-center">
                     <p className="text-normal font-body">
-                        Error loading rule data. Please try again or go back.
+                        Error loading rule. Please try again or go back.
                     </p>
                     <div className="py-4" />
                     <Button

From 5c974ea02d7930dd5c94ed41106e6777fe1bed03 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 6 Nov 2025 08:50:52 +0530
Subject: [PATCH 36/98] feat(frontend): consistent page title names

---
 .../app/[teamId]/data/[appId]/event/[ruleId]/edit/page.tsx    | 2 +-
 .../dashboard/app/[teamId]/data/[appId]/event/create/page.tsx | 2 +-
 .../app/[teamId]/data/[appId]/session/[ruleId]/edit/page.tsx  | 2 +-
 .../app/[teamId]/data/[appId]/session/create/page.tsx         | 4 ++--
 .../app/[teamId]/data/[appId]/trace/[ruleId]/edit/page.tsx    | 2 +-
 .../dashboard/app/[teamId]/data/[appId]/trace/create/page.tsx | 2 +-
 .../app/components/targeting/event_trace_rule_builder.tsx     | 2 +-
 7 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/dashboard/app/[teamId]/data/[appId]/event/[ruleId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/event/[ruleId]/edit/page.tsx
index 097dc6cda..13538cf61 100644
--- a/frontend/dashboard/app/[teamId]/data/[appId]/event/[ruleId]/edit/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/event/[ruleId]/edit/page.tsx
@@ -3,7 +3,7 @@
 import { useRouter } from 'next/navigation'
 import EventTraceRuleBuilder from '@/app/components/targeting/event_trace_rule_builder'
 
-export default function EditEventFilter({ params }: { params: { teamId: string, appId: string, ruleId: string } }) {
+export default function EditEventRule({ params }: { params: { teamId: string, appId: string, ruleId: string } }) {
     const router = useRouter()
 
     const handleCancel = () => {
diff --git a/frontend/dashboard/app/[teamId]/data/[appId]/event/create/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/event/create/page.tsx
index bcb42dad9..5b9460952 100644
--- a/frontend/dashboard/app/[teamId]/data/[appId]/event/create/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/event/create/page.tsx
@@ -3,7 +3,7 @@
 import { useRouter } from 'next/navigation'
 import EventTraceRuleBuilder from '@/app/components/targeting/event_trace_rule_builder'
 
-export default function CreateEventFilter({ params }: { params: { teamId: string, appId: string } }) {
+export default function CreateEventRule({ params }: { params: { teamId: string, appId: string } }) {
     const router = useRouter()
 
     const handleCancel = () => {
diff --git a/frontend/dashboard/app/[teamId]/data/[appId]/session/[ruleId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/session/[ruleId]/edit/page.tsx
index 569a94850..2ac26ff36 100644
--- a/frontend/dashboard/app/[teamId]/data/[appId]/session/[ruleId]/edit/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/session/[ruleId]/edit/page.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation'
 import { Button } from '@/app/components/button'
 import { Card, CardContent, CardFooter } from '@/app/components/card'
 
-export default function EditSessionFilter({ params }: { params: { teamId: string, appId: string, ruleId: string } }) {
+export default function EditSessionTimelineRule({ params }: { params: { teamId: string, appId: string, ruleId: string } }) {
     const router = useRouter()
 
     const handleCancel = () => {
diff --git a/frontend/dashboard/app/[teamId]/data/[appId]/session/create/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/session/create/page.tsx
index 633aaa286..b59dc9dfe 100644
--- a/frontend/dashboard/app/[teamId]/data/[appId]/session/create/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/session/create/page.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation'
 import { Button } from '@/app/components/button'
 import { Card, CardContent, CardFooter } from '@/app/components/card'
 
-export default function CreateSessionFilter({ params }: { params: { teamId: string, appId: string } }) {
+export default function CreateSessionTimelineRule({ params }: { params: { teamId: string, appId: string } }) {
     const router = useRouter()
 
     const handleCancel = () => {
@@ -18,7 +18,7 @@ export default function CreateSessionFilter({ params }: { params: { teamId: stri
 
     return (
         <div className="flex flex-col selection:bg-yellow-200/75 items-start">
-            <p className="font-display text-4xl max-w-6xl text-center">Create Session Filter</p>
+            <p className="font-display text-4xl max-w-6xl text-center">Create Session Timeline Rule</p>
             <div className="py-4" />
 
             <Card className="w-full">
diff --git a/frontend/dashboard/app/[teamId]/data/[appId]/trace/[ruleId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/trace/[ruleId]/edit/page.tsx
index 3b0cdd57c..3ca2f10aa 100644
--- a/frontend/dashboard/app/[teamId]/data/[appId]/trace/[ruleId]/edit/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/trace/[ruleId]/edit/page.tsx
@@ -3,7 +3,7 @@
 import { useRouter } from 'next/navigation'
 import EventTraceRuleBuilder from '@/app/components/targeting/event_trace_rule_builder'
 
-export default function EditTraceFilter({ params }: { params: { teamId: string, appId: string, ruleId: string } }) {
+export default function EditTraceRule({ params }: { params: { teamId: string, appId: string, ruleId: string } }) {
     const router = useRouter()
 
     const handleCancel = () => {
diff --git a/frontend/dashboard/app/[teamId]/data/[appId]/trace/create/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/trace/create/page.tsx
index cf7763622..db85a4bb0 100644
--- a/frontend/dashboard/app/[teamId]/data/[appId]/trace/create/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/trace/create/page.tsx
@@ -3,7 +3,7 @@
 import { useRouter } from 'next/navigation'
 import EventTraceRuleBuilder from '@/app/components/targeting/event_trace_rule_builder'
 
-export default function CreateTraceFilter({ params }: { params: { teamId: string, appId: string } }) {
+export default function CreateTraceRule({ params }: { params: { teamId: string, appId: string } }) {
     const router = useRouter()
 
     const handleCancel = () => {
diff --git a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
index 9c50a0503..c95471826 100644
--- a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
@@ -94,7 +94,7 @@ export default function EventTraceRuleBuilder({
     const getTitle = () => {
         const typeLabel = type === 'event' ? 'Event' : 'Trace'
         if (mode === 'create') {
-            return `Create ${typeLabel} Filter`
+            return `Create ${typeLabel} Rule`
         }
         return `Edit ${typeLabel} Rule`
     }

From 1d56821f247dce6e5c7523dd4ec6d37aa6972a9f Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 6 Nov 2025 08:56:20 +0530
Subject: [PATCH 37/98] feat(frontend): change dummy data id

---
 frontend/dashboard/app/api/api_calls.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index 126033d21..d76911c76 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -1184,14 +1184,14 @@ export const emptyTraceTargetingResponse: TraceTargetingResponse = {
     },
     overrides: [
       {
-        id: "df-traces-001",
+        id: "df-001",
         rule: 'trace.trace_name == "root"',
         collection_config: { mode: 'sample_rate', sample_rate: 10 },
         updated_at: "2024-01-01T00:00:00Z",
         updated_by: "system@example.com",
       },
       {
-        id: "df-traces-002",
+        id: "df-002",
         rule: 'trace.trace_name == "activity.onCreate"',
         collection_config: { mode: 'disable' },
         updated_at: "2024-01-01T00:00:00Z",
@@ -1227,7 +1227,7 @@ export const emptyEventTargetingRule: EventTargetingRule = {
 }
 
 export const emptyTraceTargetingRule: TraceTargetingRule = {
-  id: "df-traces-001",
+  id: "df-001",
   rule: 'trace.trace_name == "root"',
   collection_config: { mode: 'sample_rate', sample_rate: 10 },
   updated_at: "2024-01-01T00:00:00Z",

From f2e9a8e8cd80ecdd71f86812043101fea326281c Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 6 Nov 2025 08:59:25 +0530
Subject: [PATCH 38/98] feat(frontend): remove uneeded prop from
 EventTraceRuleBuilder

---
 .../app/components/targeting/event_trace_rule_builder.tsx     | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
index c95471826..1e51bf5cc 100644
--- a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
@@ -22,7 +22,6 @@ interface EventTraceRuleBuilderProps {
     ruleId?: string
     onCancel: () => void
     onPrimaryAction: () => void
-    children?: React.ReactNode
 }
 
 export default function EventTraceRuleBuilder({
@@ -32,7 +31,6 @@ export default function EventTraceRuleBuilder({
     ruleId,
     onCancel,
     onPrimaryAction,
-    children
 }: EventTraceRuleBuilderProps) {
     const [apiStatus, setApiStatus] = useState<EventTargetingRuleApiStatus | TraceTargetingRuleApiStatus>(
         mode === 'create'
@@ -110,6 +108,7 @@ export default function EventTraceRuleBuilder({
     const isReady = apiStatus === EventTargetingRuleApiStatus.Success ||
                     apiStatus === TraceTargetingRuleApiStatus.Success
 
+
     return (
         <div className="flex flex-col selection:bg-yellow-200/75 items-start">
             <p className="font-display text-4xl max-w-6xl text-center">{getTitle()}</p>
@@ -142,7 +141,6 @@ export default function EventTraceRuleBuilder({
                 <Card className="w-full">
                     <CardContent className="pt-6">
                         <div className="mb-6">
-                            {children}
                         </div>
                     </CardContent>
 

From 0fce43499dbf21df8f09a72d56bb54e4e6c54ffc Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 6 Nov 2025 09:19:40 +0530
Subject: [PATCH 39/98] feat(frontend): integrate config APIs in
 EventTraceRuleBuilder

---
 frontend/dashboard/app/api/api_calls.ts       | 169 ++++++++++++++++++
 .../targeting/event_trace_rule_builder.tsx    | 118 +++++++-----
 2 files changed, 241 insertions(+), 46 deletions(-)

diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index d76911c76..0937dc49d 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -398,6 +398,27 @@ export enum SessionTargetingRuleApiStatus {
   Cancelled,
 }
 
+export enum EventTargetingConfigApiStatus {
+  Loading,
+  Success,
+  Error,
+  Cancelled,
+}
+
+export enum TraceTargetingConfigApiStatus {
+  Loading,
+  Success,
+  Error,
+  Cancelled,
+}
+
+export enum SessionTargetingConfigApiStatus {
+  Loading,
+  Success,
+  Error,
+  Cancelled,
+}
+
 export enum SessionType {
   All = "All Sessions",
   Crashes = "Crash Sessions",
@@ -1134,6 +1155,49 @@ export type SessionTargetingRule = {
   updated_by: string,
 }
 
+export type EventTargetingConfig = {
+  type: string;
+  attrs: AttributeTargetingConfig[] | null;
+  has_ud_attrs: boolean;
+}
+
+export type TraceTargetingConfig = {
+  name: string;
+  attrs: AttributeTargetingConfig[] | null;
+  has_ud_attrs: boolean;
+}
+
+export type AttributeTargetingConfig = {
+  key: string;
+  type: string;
+  hint?: string;
+}
+
+export type TargetingOperatorConfig = {
+  bool: string[];
+  float64: string[];
+  int64: string[];
+  string: string[];
+}
+
+export type EventTargetingConfigResponse = {
+  result: {
+    events: EventTargetingConfig[];
+    event_ud_attrs: AttributeTargetingConfig[];
+    session_attrs: AttributeTargetingConfig[];
+    operator_types: TargetingOperatorConfig;
+  };
+}
+
+export type TraceTargetingConfigResponse = {
+  result: {
+    traces: TraceTargetingConfig[];
+    trace_ud_attrs: AttributeTargetingConfig[];
+    session_attrs: AttributeTargetingConfig[];
+    operator_types: TargetingOperatorConfig;
+  };
+}
+
 export const emptyEventTargetingResponse: EventTargetingResponse = {
   meta: {
     next: false,
@@ -1234,6 +1298,60 @@ export const emptyTraceTargetingRule: TraceTargetingRule = {
   updated_by: "system@example.com",
 }
 
+export const emptyEventTargetingConfigResponse: EventTargetingConfigResponse = {
+  result: {
+    events: [
+      {
+        type: "exception",
+        attrs: [
+          { key: "handled", type: "bool", hint: "True for handled exceptions, false for crashes" },
+        ],
+        has_ud_attrs: true,
+      },
+    ],
+    event_ud_attrs: [
+      { key: "feature_flag", type: "string", hint: "Feature flag associated with the event" },
+    ],
+    session_attrs: [
+      { key: "user_id", type: "string", hint: "Identifier for the user" },
+    ],
+    operator_types: {
+      bool: ["==", "!="],
+      float64: ["==", "!=", "<", "<=", ">", ">="],
+      int64: ["==", "!=", "<", "<=", ">", ">="],
+      string: ["==", "!=", "contains", "starts_with", "ends_with"],
+    },
+  },
+}
+
+export const emptyTraceTargetingConfigResponse: TraceTargetingConfigResponse = {
+  result: {
+    traces: [
+      {
+        name: "root",
+        attrs: null,
+        has_ud_attrs: false,
+      },
+      {
+        name: "activity.onCreate",
+        attrs: null,
+        has_ud_attrs: false,
+      },
+    ],
+    trace_ud_attrs: [
+      { key: "feature_flag", type: "string", hint: "Feature flag associated with the trace" },
+    ],
+    session_attrs: [
+      { key: "user_id", type: "string", hint: "Identifier for the user" },
+    ],
+    operator_types: {
+      bool: ["==", "!="],
+      float64: ["==", "!=", "<", "<=", ">", ">="],
+      int64: ["==", "!=", "<", "<=", ">", ">="],
+      string: ["==", "!=", "contains", "starts_with", "ends_with"],
+    },
+  },
+}
 export class AppVersion {
   name: string
   code: string
@@ -2717,4 +2835,55 @@ export const fetchSessionTargetingRuleFromServer = async (
   } catch {
     return { status: SessionTargetingRuleApiStatus.Cancelled, data: null }
   }
+}
+
+export const fetchEventTargetingConfigFromServer = async (
+  appId: String,
+) => {
+  const url = `/api/apps/${appId}/targetingRules/events/config`
+  
+  try {
+    const res = await measureAuth.fetchMeasure(url)
+    if (!res.ok) {
+      return { status: EventTargetingConfigApiStatus.Error, data: null }
+    }
+    const data = await res.json()
+    return { status: EventTargetingConfigApiStatus.Success, data: data }
+  } catch {
+    return { status: EventTargetingConfigApiStatus.Cancelled, data: null }
+  }
+}
+
+export const fetchTraceTargetingConfigFromServer = async (
+  appId: String,
+) => {
+  const url = `/api/apps/${appId}/targetingRules/traces/config`
+  
+  try {
+    const res = await measureAuth.fetchMeasure(url)
+    if (!res.ok) {
+      return { status: TraceTargetingConfigApiStatus.Error, data: null }
+    }
+    const data = await res.json()
+    return { status: TraceTargetingConfigApiStatus.Success, data: data }
+  } catch {
+    return { status: TraceTargetingConfigApiStatus.Cancelled, data: null }
+  }
+}
+
+export const fetchSessionTargetingConfigFromServer = async (
+  appId: String,
+) => {
+  const url = `/api/apps/${appId}/targetingRules/sessions/config`
+  
+  try {
+    const res = await measureAuth.fetchMeasure(url)
+    if (!res.ok) {
+      return { status: SessionTargetingConfigApiStatus.Error, data: null }
+    }
+    const data = await res.json()
+    return { status: SessionTargetingConfigApiStatus.Success, data: data }
+  } catch {
+    return { status: SessionTargetingConfigApiStatus.Cancelled, data: null }
+  }
 }
\ No newline at end of file
diff --git a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
index 1e51bf5cc..f011fd2a4 100644
--- a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
@@ -6,12 +6,20 @@ import { useEffect, useState } from 'react'
 import {
     EventTargetingRuleApiStatus,
     TraceTargetingRuleApiStatus,
+    EventTargetingConfigApiStatus,
+    TraceTargetingConfigApiStatus,
     EventTargetingRule,
     TraceTargetingRule,
+    EventTargetingConfigResponse,
+    TraceTargetingConfigResponse,
     fetchEventTargetingRuleFromServer,
     fetchTraceTargetingRuleFromServer,
+    fetchEventTargetingConfigFromServer,
+    fetchTraceTargetingConfigFromServer,
     emptyEventTargetingRule,
-    emptyTraceTargetingRule
+    emptyTraceTargetingRule,
+    emptyEventTargetingConfigResponse,
+    emptyTraceTargetingConfigResponse
 } from '@/app/api/api_calls'
 import LoadingBar from '@/app/components/loading_bar'
 
@@ -24,6 +32,11 @@ interface EventTraceRuleBuilderProps {
     onPrimaryAction: () => void
 }
 
+type PageState = {
+    ruleData: EventTargetingRule | TraceTargetingRule | null
+    configData: EventTargetingConfigResponse | TraceTargetingConfigResponse | null
+}
+
 export default function EventTraceRuleBuilder({
     type,
     mode,
@@ -33,59 +46,72 @@ export default function EventTraceRuleBuilder({
     onPrimaryAction,
 }: EventTraceRuleBuilderProps) {
     const [apiStatus, setApiStatus] = useState<EventTargetingRuleApiStatus | TraceTargetingRuleApiStatus>(
-        mode === 'create'
-            ? EventTargetingRuleApiStatus.Success
-            : EventTargetingRuleApiStatus.Loading
+        EventTargetingRuleApiStatus.Loading
     )
-    const [ruleData, setRuleData] = useState<EventTargetingRule | TraceTargetingRule | null>(null)
+    const [pageState, setPageState] = useState<PageState>({
+        ruleData: null,
+        configData: null
+    })
 
     useEffect(() => {
-        if (mode === 'edit' && ruleId) {
-            fetchRuleData()
-        }
-    }, [mode, ruleId, appId])
-
-    const fetchEventRuleData = async () => {
-        if (!ruleId) return
+        fetchPageData()
+    }, [mode, ruleId, appId, type])
 
+    const fetchPageData = async () => {
         setApiStatus(EventTargetingRuleApiStatus.Loading)
 
-        // TEMPORARY: Using dummy response instead of actual API call
-        // const result = await fetchEventTargetingRuleFromServer(appId, ruleId)
-        // if (result.status === EventTargetingRuleApiStatus.Error) {
-        //     setApiStatus(EventTargetingRuleApiStatus.Error)
-        //     return
-        // }
-        // setRuleData(result.data)
-
-        // Using dummy data temporarily
-        setRuleData(emptyEventTargetingRule)
-        setApiStatus(EventTargetingRuleApiStatus.Success)
-    }
-
-    const fetchTraceRuleData = async () => {
-        if (!ruleId) return
-
-        setApiStatus(TraceTargetingRuleApiStatus.Loading)
-
-        // TEMPORARY: Using dummy response instead of actual API call
-        // const result = await fetchTraceTargetingRuleFromServer(appId, ruleId)
-        // if (result.status === TraceTargetingRuleApiStatus.Error) {
-        //     setApiStatus(TraceTargetingRuleApiStatus.Error)
-        //     return
-        // }
-        // setRuleData(result.data)
-
-        // Using dummy data temporarily
-        setRuleData(emptyTraceTargetingRule)
-        setApiStatus(TraceTargetingRuleApiStatus.Success)
-    }
-
-    const fetchRuleData = async () => {
         if (type === 'event') {
-            await fetchEventRuleData()
+            // TEMPORARY: Using dummy response instead of actual API call
+            // const configResult = await fetchEventTargetingConfigFromServer(appId)
+            // if (configResult.status === EventTargetingConfigApiStatus.Error) {
+            //     setApiStatus(EventTargetingRuleApiStatus.Error)
+            //     return
+            // }
+
+            // Fetch rule data if in edit mode
+            let ruleData = null
+            if (mode === 'edit' && ruleId) {
+                // TEMPORARY: Using dummy response instead of actual API call
+                // const ruleResult = await fetchEventTargetingRuleFromServer(appId, ruleId)
+                // if (ruleResult.status === EventTargetingRuleApiStatus.Error) {
+                //     setApiStatus(EventTargetingRuleApiStatus.Error)
+                //     return
+                // }
+                // ruleData = ruleResult.data
+                ruleData = emptyEventTargetingRule
+            }
+
+            setPageState({
+                ruleData,
+                configData: emptyEventTargetingConfigResponse
+            })
+            setApiStatus(EventTargetingRuleApiStatus.Success)
         } else {
-            await fetchTraceRuleData()
+            // TEMPORARY: Using dummy response instead of actual API call
+            // const configResult = await fetchTraceTargetingConfigFromServer(appId)
+            // if (configResult.status === TraceTargetingConfigApiStatus.Error) {
+            //     setApiStatus(TraceTargetingRuleApiStatus.Error)
+            //     return
+            // }
+
+            // Fetch rule data if in edit mode
+            let ruleData = null
+            if (mode === 'edit' && ruleId) {
+                // TEMPORARY: Using dummy response instead of actual API call
+                // const ruleResult = await fetchTraceTargetingRuleFromServer(appId, ruleId)
+                // if (ruleResult.status === TraceTargetingRuleApiStatus.Error) {
+                //     setApiStatus(TraceTargetingRuleApiStatus.Error)
+                //     return
+                // }
+                // ruleData = ruleResult.data
+                ruleData = emptyTraceTargetingRule
+            }
+
+            setPageState({
+                ruleData,
+                configData: emptyTraceTargetingConfigResponse
+            })
+            setApiStatus(TraceTargetingRuleApiStatus.Success)
         }
     }
 

From 4fdd26e3ce378d1d32b1b241ce9fca8592a85ee4 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 6 Nov 2025 09:22:24 +0530
Subject: [PATCH 40/98] feat(frontend): refactor page state

---
 .../targeting/event_trace_rule_builder.tsx    | 83 ++++++++++++++-----
 1 file changed, 61 insertions(+), 22 deletions(-)

diff --git a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
index f011fd2a4..5140991f6 100644
--- a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
@@ -35,6 +35,8 @@ interface EventTraceRuleBuilderProps {
 type PageState = {
     ruleData: EventTargetingRule | TraceTargetingRule | null
     configData: EventTargetingConfigResponse | TraceTargetingConfigResponse | null
+    ruleApiStatus: EventTargetingRuleApiStatus | TraceTargetingRuleApiStatus
+    configApiStatus: EventTargetingConfigApiStatus | TraceTargetingConfigApiStatus
 }
 
 export default function EventTraceRuleBuilder({
@@ -45,12 +47,11 @@ export default function EventTraceRuleBuilder({
     onCancel,
     onPrimaryAction,
 }: EventTraceRuleBuilderProps) {
-    const [apiStatus, setApiStatus] = useState<EventTargetingRuleApiStatus | TraceTargetingRuleApiStatus>(
-        EventTargetingRuleApiStatus.Loading
-    )
     const [pageState, setPageState] = useState<PageState>({
         ruleData: null,
-        configData: null
+        configData: null,
+        ruleApiStatus: EventTargetingRuleApiStatus.Loading,
+        configApiStatus: EventTargetingConfigApiStatus.Loading
     })
 
     useEffect(() => {
@@ -58,23 +59,36 @@ export default function EventTraceRuleBuilder({
     }, [mode, ruleId, appId, type])
 
     const fetchPageData = async () => {
-        setApiStatus(EventTargetingRuleApiStatus.Loading)
+        setPageState(prev => ({
+            ...prev,
+            ruleApiStatus: EventTargetingRuleApiStatus.Loading,
+            configApiStatus: EventTargetingConfigApiStatus.Loading
+        }))
 
         if (type === 'event') {
             // TEMPORARY: Using dummy response instead of actual API call
             // const configResult = await fetchEventTargetingConfigFromServer(appId)
             // if (configResult.status === EventTargetingConfigApiStatus.Error) {
-            //     setApiStatus(EventTargetingRuleApiStatus.Error)
+            //     setPageState(prev => ({
+            //         ...prev,
+            //         configApiStatus: EventTargetingConfigApiStatus.Error
+            //     }))
             //     return
             // }
 
             // Fetch rule data if in edit mode
             let ruleData = null
+            let ruleApiStatus = EventTargetingRuleApiStatus.Success
             if (mode === 'edit' && ruleId) {
                 // TEMPORARY: Using dummy response instead of actual API call
                 // const ruleResult = await fetchEventTargetingRuleFromServer(appId, ruleId)
                 // if (ruleResult.status === EventTargetingRuleApiStatus.Error) {
-                //     setApiStatus(EventTargetingRuleApiStatus.Error)
+                //     setPageState(prev => ({
+                //         ...prev,
+                //         ruleApiStatus: EventTargetingRuleApiStatus.Error,
+                //         configApiStatus: EventTargetingConfigApiStatus.Success,
+                //         configData: configResult.data
+                //     }))
                 //     return
                 // }
                 // ruleData = ruleResult.data
@@ -83,24 +97,34 @@ export default function EventTraceRuleBuilder({
 
             setPageState({
                 ruleData,
-                configData: emptyEventTargetingConfigResponse
+                configData: emptyEventTargetingConfigResponse,
+                ruleApiStatus,
+                configApiStatus: EventTargetingConfigApiStatus.Success
             })
-            setApiStatus(EventTargetingRuleApiStatus.Success)
         } else {
             // TEMPORARY: Using dummy response instead of actual API call
             // const configResult = await fetchTraceTargetingConfigFromServer(appId)
             // if (configResult.status === TraceTargetingConfigApiStatus.Error) {
-            //     setApiStatus(TraceTargetingRuleApiStatus.Error)
+            //     setPageState(prev => ({
+            //         ...prev,
+            //         configApiStatus: TraceTargetingConfigApiStatus.Error
+            //     }))
             //     return
             // }
 
             // Fetch rule data if in edit mode
             let ruleData = null
+            let ruleApiStatus = TraceTargetingRuleApiStatus.Success
             if (mode === 'edit' && ruleId) {
                 // TEMPORARY: Using dummy response instead of actual API call
                 // const ruleResult = await fetchTraceTargetingRuleFromServer(appId, ruleId)
                 // if (ruleResult.status === TraceTargetingRuleApiStatus.Error) {
-                //     setApiStatus(TraceTargetingRuleApiStatus.Error)
+                //     setPageState(prev => ({
+                //         ...prev,
+                //         ruleApiStatus: TraceTargetingRuleApiStatus.Error,
+                //         configApiStatus: TraceTargetingConfigApiStatus.Success,
+                //         configData: configResult.data
+                //     }))
                 //     return
                 // }
                 // ruleData = ruleResult.data
@@ -109,9 +133,10 @@ export default function EventTraceRuleBuilder({
 
             setPageState({
                 ruleData,
-                configData: emptyTraceTargetingConfigResponse
+                configData: emptyTraceTargetingConfigResponse,
+                ruleApiStatus,
+                configApiStatus: TraceTargetingConfigApiStatus.Success
             })
-            setApiStatus(TraceTargetingRuleApiStatus.Success)
         }
     }
 
@@ -127,12 +152,26 @@ export default function EventTraceRuleBuilder({
         return mode === 'create' ? 'Create Rule' : 'Save Changes'
     }
 
-    const isLoading = apiStatus === EventTargetingRuleApiStatus.Loading ||
-                      apiStatus === TraceTargetingRuleApiStatus.Loading
-    const hasError = apiStatus === EventTargetingRuleApiStatus.Error ||
-                     apiStatus === TraceTargetingRuleApiStatus.Error
-    const isReady = apiStatus === EventTargetingRuleApiStatus.Success ||
-                    apiStatus === TraceTargetingRuleApiStatus.Success
+    const isLoading = () => {
+        return pageState.ruleApiStatus === EventTargetingRuleApiStatus.Loading ||
+               pageState.ruleApiStatus === TraceTargetingRuleApiStatus.Loading ||
+               pageState.configApiStatus === EventTargetingConfigApiStatus.Loading ||
+               pageState.configApiStatus === TraceTargetingConfigApiStatus.Loading
+    }
+
+    const hasError = () => {
+        return pageState.ruleApiStatus === EventTargetingRuleApiStatus.Error ||
+               pageState.ruleApiStatus === TraceTargetingRuleApiStatus.Error ||
+               pageState.configApiStatus === EventTargetingConfigApiStatus.Error ||
+               pageState.configApiStatus === TraceTargetingConfigApiStatus.Error
+    }
+
+    const isReady = () => {
+        return (pageState.ruleApiStatus === EventTargetingRuleApiStatus.Success ||
+                pageState.ruleApiStatus === TraceTargetingRuleApiStatus.Success) &&
+               (pageState.configApiStatus === EventTargetingConfigApiStatus.Success ||
+                pageState.configApiStatus === TraceTargetingConfigApiStatus.Success)
+    }
 
 
     return (
@@ -141,12 +180,12 @@ export default function EventTraceRuleBuilder({
             <div className="py-4" />
 
             {/* Loading indicator */}
-            <div className={`py-1 w-full ${isLoading ? 'visible' : 'invisible'}`}>
+            <div className={`py-1 w-full ${isLoading() ? 'visible' : 'invisible'}`}>
                 <LoadingBar />
             </div>
 
             {/* Error state */}
-            {hasError && (
+            {hasError() && (
                 <div className="w-full flex flex-col items-center">
                     <p className="text-normal font-body">
                         Error loading rule. Please try again or go back.
@@ -163,7 +202,7 @@ export default function EventTraceRuleBuilder({
             )}
 
             {/* Main content */}
-            {isReady && (
+            {isReady() && (
                 <Card className="w-full">
                     <CardContent className="pt-6">
                         <div className="mb-6">

From 50c90dc43a02909f5246b124923c3bcbadef7fc8 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 6 Nov 2025 11:55:45 +0530
Subject: [PATCH 41/98] feat(frontend): remove dialog sub heading

---
 .../app/components/targeting/edit_default_rule_dialog.tsx   | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
index 4ecdf1a51..7cdc10025 100644
--- a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
+++ b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
@@ -4,6 +4,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '
 import { Button } from '@/app/components/button'
 import SamplingRateInput from '@/app/components/targeting/sampling_rate_input'
 import { useState, useEffect } from 'react'
+import { DialogDescription } from '@radix-ui/react-dialog'
 
 type CollectionMode = 'sample_rate' | 'timeline_only' | 'disable'
 
@@ -74,15 +75,12 @@ export default function EditDefaultRuleDialog({
             <DialogContent className="font-display">
                 <DialogHeader>
                     <DialogTitle className="font-display text-2xl">
-                        Edit Default {displayName} Rule
+                        Modify Default {displayName} Rule
                     </DialogTitle>
                 </DialogHeader>
 
                 <div className="space-y-6 py-4">
-                    {/* Collection Config Section */}
                     <div className="space-y-3">
-                        <p className="font-display text-sm font-medium">Collection Config</p>
-
                         <label className="flex items-center gap-3 cursor-pointer h-10">
                             <input
                                 type="radio"

From 8a808ea2897b46a002a0e29ba1c2eff77d5cbe22 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 6 Nov 2025 11:56:20 +0530
Subject: [PATCH 42/98] feat(frontend): remove unnecessary comment

---
 .../app/components/targeting/event_trace_rule_builder.tsx     | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
index 5140991f6..0ed3bc76a 100644
--- a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
@@ -66,7 +66,6 @@ export default function EventTraceRuleBuilder({
         }))
 
         if (type === 'event') {
-            // TEMPORARY: Using dummy response instead of actual API call
             // const configResult = await fetchEventTargetingConfigFromServer(appId)
             // if (configResult.status === EventTargetingConfigApiStatus.Error) {
             //     setPageState(prev => ({
@@ -80,7 +79,6 @@ export default function EventTraceRuleBuilder({
             let ruleData = null
             let ruleApiStatus = EventTargetingRuleApiStatus.Success
             if (mode === 'edit' && ruleId) {
-                // TEMPORARY: Using dummy response instead of actual API call
                 // const ruleResult = await fetchEventTargetingRuleFromServer(appId, ruleId)
                 // if (ruleResult.status === EventTargetingRuleApiStatus.Error) {
                 //     setPageState(prev => ({
@@ -102,7 +100,6 @@ export default function EventTraceRuleBuilder({
                 configApiStatus: EventTargetingConfigApiStatus.Success
             })
         } else {
-            // TEMPORARY: Using dummy response instead of actual API call
             // const configResult = await fetchTraceTargetingConfigFromServer(appId)
             // if (configResult.status === TraceTargetingConfigApiStatus.Error) {
             //     setPageState(prev => ({
@@ -116,7 +113,6 @@ export default function EventTraceRuleBuilder({
             let ruleData = null
             let ruleApiStatus = TraceTargetingRuleApiStatus.Success
             if (mode === 'edit' && ruleId) {
-                // TEMPORARY: Using dummy response instead of actual API call
                 // const ruleResult = await fetchTraceTargetingRuleFromServer(appId, ruleId)
                 // if (ruleResult.status === TraceTargetingRuleApiStatus.Error) {
                 //     setPageState(prev => ({

From 2d3db964ebd8c6c029dfcb4229ee129304cdf154 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 6 Nov 2025 13:12:07 +0530
Subject: [PATCH 43/98] feat(frontend): minor changes

---
 .../[appId]/session/[ruleId]/edit/page.tsx    | 19 +++++++++----------
 .../data/[appId]/session/create/page.tsx      | 19 +++++++++----------
 frontend/dashboard/app/[teamId]/data/page.tsx |  2 +-
 frontend/dashboard/app/[teamId]/layout.tsx    | 12 ++++++------
 .../targeting/event_trace_rule_builder.tsx    | 17 ++++++++---------
 ... => event_trace_targeting_rules_table.tsx} |  0
 6 files changed, 33 insertions(+), 36 deletions(-)
 rename frontend/dashboard/app/components/targeting/{event_tracce_targeting_rules_table.tsx => event_trace_targeting_rules_table.tsx} (100%)

diff --git a/frontend/dashboard/app/[teamId]/data/[appId]/session/[ruleId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/session/[ruleId]/edit/page.tsx
index 2ac26ff36..d7746d74a 100644
--- a/frontend/dashboard/app/[teamId]/data/[appId]/session/[ruleId]/edit/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/session/[ruleId]/edit/page.tsx
@@ -2,7 +2,6 @@
 
 import { useRouter } from 'next/navigation'
 import { Button } from '@/app/components/button'
-import { Card, CardContent, CardFooter } from '@/app/components/card'
 
 export default function EditSessionTimelineRule({ params }: { params: { teamId: string, appId: string, ruleId: string } }) {
     const router = useRouter()
@@ -21,14 +20,14 @@ export default function EditSessionTimelineRule({ params }: { params: { teamId:
             <p className="font-display text-4xl max-w-6xl text-center">Edit Session Filter</p>
             <div className="py-4" />
 
-            <Card className="w-full">
-                <CardContent className="pt-6">
-                    <div className="mb-6">
-                        {/* TODO: Add form fields */}
-                    </div>
-                </CardContent>
+            <div className="w-full flex flex-col">
+                {/* Reserved space for content */}
+                <div className="mb-6">
+                    {/* TODO: Add form fields */}
+                </div>
 
-                <CardFooter className="flex justify-end gap-3">
+                {/* Action buttons */}
+                <div className="flex justify-end gap-3">
                     <Button
                         variant="outline"
                         onClick={handleCancel}
@@ -43,8 +42,8 @@ export default function EditSessionTimelineRule({ params }: { params: { teamId:
                     >
                         Save Changes
                     </Button>
-                </CardFooter>
-            </Card>
+                </div>
+            </div>
         </div>
     )
 }
diff --git a/frontend/dashboard/app/[teamId]/data/[appId]/session/create/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/session/create/page.tsx
index b59dc9dfe..bd8d37a9e 100644
--- a/frontend/dashboard/app/[teamId]/data/[appId]/session/create/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/session/create/page.tsx
@@ -2,7 +2,6 @@
 
 import { useRouter } from 'next/navigation'
 import { Button } from '@/app/components/button'
-import { Card, CardContent, CardFooter } from '@/app/components/card'
 
 export default function CreateSessionTimelineRule({ params }: { params: { teamId: string, appId: string } }) {
     const router = useRouter()
@@ -21,14 +20,14 @@ export default function CreateSessionTimelineRule({ params }: { params: { teamId
             <p className="font-display text-4xl max-w-6xl text-center">Create Session Timeline Rule</p>
             <div className="py-4" />
 
-            <Card className="w-full">
-                <CardContent className="pt-6">
-                    <div className="mb-6">
-                        {/* TODO: Add form fields */}
-                    </div>
-                </CardContent>
+            <div className="w-full flex flex-col">
+                {/* Reserved space for content */}
+                <div className="mb-6">
+                    {/* TODO: Add form fields */}
+                </div>
 
-                <CardFooter className="flex justify-end gap-3">
+                {/* Action buttons */}
+                <div className="flex justify-end gap-3">
                     <Button
                         variant="outline"
                         onClick={handleCancel}
@@ -43,8 +42,8 @@ export default function CreateSessionTimelineRule({ params }: { params: { teamId
                     >
                         Create Filter
                     </Button>
-                </CardFooter>
-            </Card>
+                </div>
+            </div>
         </div>
     )
 }
diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index 8920b604b..e3baa3dfe 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -9,7 +9,7 @@ import { Button } from '@/app/components/button'
 import { Plus, Pencil } from 'lucide-react'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/app/components/dropdown_menu'
 import EditDefaultRuleDialog from '@/app/components/targeting/edit_default_rule_dialog'
-import EventTraceTargetingRulesTable from '@/app/components/targeting/event_tracce_targeting_rules_table'
+import EventTraceTargetingRulesTable from '@/app/components/targeting/event_trace_targeting_rules_table'
 import SessionTargetingRulesTable from '@/app/components/targeting/session_targeting_rules_table'
 import { toastPositive, toastNegative } from '@/app/utils/use_toast'
 
diff --git a/frontend/dashboard/app/[teamId]/layout.tsx b/frontend/dashboard/app/[teamId]/layout.tsx
index cc8eb59ce..e41a21c32 100644
--- a/frontend/dashboard/app/[teamId]/layout.tsx
+++ b/frontend/dashboard/app/[teamId]/layout.tsx
@@ -91,12 +91,6 @@ const initNavData = {
     {
       title: "Settings",
       items: [
-        {
-          title: "Data",
-          url: "data",
-          isActive: false,
-          external: false,
-        },
         {
           title: "Apps",
           url: "apps",
@@ -109,6 +103,12 @@ const initNavData = {
           isActive: false,
           external: false,
         },
+        {
+          title: "Data",
+          url: "data",
+          isActive: false,
+          external: false,
+        },
         {
           title: "Usage",
           url: "usage",
diff --git a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
index 0ed3bc76a..580584eba 100644
--- a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
@@ -1,7 +1,6 @@
 "use client"
 
 import { Button } from '@/app/components/button'
-import { Card, CardContent, CardFooter } from '@/app/components/card'
 import { useEffect, useState } from 'react'
 import {
     EventTargetingRuleApiStatus,
@@ -199,13 +198,13 @@ export default function EventTraceRuleBuilder({
 
             {/* Main content */}
             {isReady() && (
-                <Card className="w-full">
-                    <CardContent className="pt-6">
-                        <div className="mb-6">
-                        </div>
-                    </CardContent>
+                <div className="w-full flex flex-col">
+                    {/* Reserved space for content */}
+                    <div className="mb-6">
+                    </div>
 
-                    <CardFooter className="flex justify-end gap-3">
+                    {/* Action buttons */}
+                    <div className="flex justify-end gap-3">
                         <Button
                             variant="outline"
                             onClick={onCancel}
@@ -220,8 +219,8 @@ export default function EventTraceRuleBuilder({
                         >
                             {getPrimaryActionLabel()}
                         </Button>
-                    </CardFooter>
-                </Card>
+                    </div>
+                </div>
             )}
         </div>
     )
diff --git a/frontend/dashboard/app/components/targeting/event_tracce_targeting_rules_table.tsx b/frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx
similarity index 100%
rename from frontend/dashboard/app/components/targeting/event_tracce_targeting_rules_table.tsx
rename to frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx

From 7e28b4aab2a8ca712ee970ca46f263ec2d7b4531 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 6 Nov 2025 13:55:56 +0530
Subject: [PATCH 44/98] feat(frontend): improve the layout to remove pagination

---
 frontend/dashboard/app/[teamId]/data/page.tsx |   4 +-
 frontend/dashboard/app/api/api_calls.ts       | 117 ++++++++++++++++++
 .../targeting/edit_default_rule_dialog.tsx    |   2 +-
 .../event_trace_targeting_rules_table.tsx     | 105 ++++++++--------
 .../session_targeting_rules_table.tsx         |  92 ++++++--------
 5 files changed, 215 insertions(+), 105 deletions(-)

diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index e3baa3dfe..34731c8a8 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -298,7 +298,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
 
                         {/* Default Event Rule */}
                         <div className="flex items-center gap-2">
-                            <p className="font-display text-gray-500">Default Rule</p>
+                            <p className="font-display text-gray-500">Default Behaviour</p>
                             {eventsDefaultRule && (
                                 <button
                                     onClick={() => updatePageState({ editingDefaultRule: 'event' })}
@@ -335,7 +335,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
 
                         {/* Default Trace Rule */}
                         <div className="flex items-center gap-2">
-                            <p className="font-display text-gray-500">Default Rule</p>
+                            <p className="font-display text-gray-500">Default Behaviour</p>
                             {traceDefaultRule && (
                                 <button
                                     onClick={() => updatePageState({ editingDefaultRule: 'trace' })}
diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index 0937dc49d..01c73f194 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -1228,6 +1228,46 @@ export const emptyEventTargetingResponse: EventTargetingResponse = {
         attachment_config: 'none',
         updated_at: "2024-01-01T00:00:00Z",
         updated_by: "system@example.com",
+      },
+      {
+        id: "df-events-003",
+        rule: 'event.event_type == "click" && session.app_version == "1.2.0"',
+        collection_config: { mode: 'sample_rate', sample_rate: 25 },
+        attachment_config: 'layout_snapshot',
+        updated_at: "2024-01-02T10:30:00Z",
+        updated_by: "user@example.com",
+      },
+      {
+        id: "df-events-004",
+        rule: 'event.event_type == "navigation" && session.user_id == "test_user"',
+        collection_config: { mode: 'sample_rate', sample_rate: 100 },
+        attachment_config: 'none',
+        updated_at: "2024-01-03T14:15:00Z",
+        updated_by: "admin@example.com",
+      },
+      {
+        id: "df-events-005",
+        rule: 'event.event_type == "custom_event" && event.handled == true',
+        collection_config: { mode: 'timeline_only' },
+        attachment_config: 'screenshot',
+        updated_at: "2024-01-04T09:45:00Z",
+        updated_by: "developer@example.com",
+      },
+      {
+        id: "df-events-006",
+        rule: 'event.event_type == "lifecycle_activity"',
+        collection_config: { mode: 'sample_rate', sample_rate: 10 },
+        attachment_config: 'none',
+        updated_at: "2024-01-05T16:20:00Z",
+        updated_by: "tester@example.com",
+      },
+      {
+        id: "df-events-007",
+        rule: 'event.event_type == "network_error" && session.os_version >= "11.0"',
+        collection_config: { mode: 'sample_rate', sample_rate: 50 },
+        attachment_config: 'layout_snapshot',
+        updated_at: "2024-01-06T11:00:00Z",
+        updated_by: "qa@example.com",
       }
     ]
   },
@@ -1260,6 +1300,41 @@ export const emptyTraceTargetingResponse: TraceTargetingResponse = {
         collection_config: { mode: 'disable' },
         updated_at: "2024-01-01T00:00:00Z",
         updated_by: "system@example.com",
+      },
+      {
+        id: "df-003",
+        rule: 'trace.trace_name == "network.request" && session.app_version == "2.0.0"',
+        collection_config: { mode: 'sample_rate', sample_rate: 30 },
+        updated_at: "2024-01-02T08:45:00Z",
+        updated_by: "backend@example.com",
+      },
+      {
+        id: "df-004",
+        rule: 'trace.trace_name == "database.query"',
+        collection_config: { mode: 'sample_rate', sample_rate: 15 },
+        updated_at: "2024-01-03T13:20:00Z",
+        updated_by: "db-admin@example.com",
+      },
+      {
+        id: "df-005",
+        rule: 'trace.trace_name == "activity.onResume" && session.device_manufacturer == "Samsung"',
+        collection_config: { mode: 'timeline_only' },
+        updated_at: "2024-01-04T10:15:00Z",
+        updated_by: "mobile@example.com",
+      },
+      {
+        id: "df-006",
+        rule: 'trace.trace_name == "api.authentication"',
+        collection_config: { mode: 'sample_rate', sample_rate: 100 },
+        updated_at: "2024-01-05T15:30:00Z",
+        updated_by: "security@example.com",
+      },
+      {
+        id: "df-007",
+        rule: 'trace.trace_name == "image.processing" && trace.duration > 1000',
+        collection_config: { mode: 'sample_rate', sample_rate: 20 },
+        updated_at: "2024-01-06T09:00:00Z",
+        updated_by: "performance@example.com",
       }
     ]
   },
@@ -1278,6 +1353,48 @@ export const emptySessionTargetingResponse: SessionTargetingResponse = {
       updated_at: "2024-01-01T00:00:00Z",
       updated_by: "system@example.com",
     },
+    {
+      id: "df-sessions-002",
+      rule: 'session.app_version == "1.5.0" && session.os_name == "android"',
+      sampling_rate: 25,
+      updated_at: "2024-01-02T11:20:00Z",
+      updated_by: "android-team@example.com",
+    },
+    {
+      id: "df-sessions-003",
+      rule: 'session.user_id == "beta_tester"',
+      sampling_rate: 100,
+      updated_at: "2024-01-03T14:45:00Z",
+      updated_by: "beta@example.com",
+    },
+    {
+      id: "df-sessions-004",
+      rule: 'session.device_manufacturer == "Google" && session.app_version >= "2.0.0"',
+      sampling_rate: 50,
+      updated_at: "2024-01-04T09:30:00Z",
+      updated_by: "qa-lead@example.com",
+    },
+    {
+      id: "df-sessions-005",
+      rule: 'session.network_type == "wifi"',
+      sampling_rate: 10,
+      updated_at: "2024-01-05T16:00:00Z",
+      updated_by: "network-team@example.com",
+    },
+    {
+      id: "df-sessions-006",
+      rule: 'session.os_version >= "12.0" && session.device_model contains "Pixel"',
+      sampling_rate: 75,
+      updated_at: "2024-01-06T10:15:00Z",
+      updated_by: "pixel-team@example.com",
+    },
+    {
+      id: "df-sessions-007",
+      rule: 'session.locale == "en-US" || session.locale == "en-GB"',
+      sampling_rate: 15,
+      updated_at: "2024-01-07T13:40:00Z",
+      updated_by: "localization@example.com",
+    },
   ]
 }
 
diff --git a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
index 7cdc10025..2b3d54099 100644
--- a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
+++ b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
@@ -75,7 +75,7 @@ export default function EditDefaultRuleDialog({
             <DialogContent className="font-display">
                 <DialogHeader>
                     <DialogTitle className="font-display text-2xl">
-                        Modify Default {displayName} Rule
+                        Modify Default {displayName} Behaviour
                     </DialogTitle>
                 </DialogHeader>
 
diff --git a/frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx b/frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx
index e9bd19c24..5bcf0f252 100644
--- a/frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx
+++ b/frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx
@@ -3,7 +3,8 @@
 import { EventTargetingRule, TraceTargetingRule, EventTargetingCollectionConfig, EventTargetingAttachmentConfig } from '@/app/api/api_calls'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/app/components/table'
 import { formatDateToHumanReadableDate, formatDateToHumanReadableTime } from '@/app/utils/time_utils'
-import Paginator from '@/app/components/paginator'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/tooltip'
+import { Info } from 'lucide-react'
 
 const getCollectionConfigDisplay = (collectionConfig: EventTargetingCollectionConfig): string => {
     switch (collectionConfig.mode) {
@@ -34,14 +35,9 @@ type RuleFilter = EventTargetingRule | TraceTargetingRule
 interface RulesTableProps {
     rules: RuleFilter[]
     onRuleClick: (rule: RuleFilter) => void
-    prevEnabled: boolean
-    nextEnabled: boolean
-    onNext: () => void
-    onPrev: () => void
-    showPaginator: boolean
 }
 
-export default function RulesTable({ rules, onRuleClick, prevEnabled, nextEnabled, onNext, onPrev, showPaginator }: RulesTableProps) {
+export default function RulesTable({ rules, onRuleClick }: RulesTableProps) {
     if (rules.length === 0) {
         return null
     }
@@ -49,52 +45,61 @@ export default function RulesTable({ rules, onRuleClick, prevEnabled, nextEnable
     return (
         <>
             <div className="py-6" />
-            <div className="w-full flex items-center justify-between">
+            <div className="w-full flex items-center gap-2">
                 <p className="font-display text-gray-500">Overrides</p>
-                {showPaginator && (
-                    <Paginator
-                        prevEnabled={prevEnabled}
-                        nextEnabled={nextEnabled}
-                        displayText=""
-                        onNext={onNext}
-                        onPrev={onPrev}
-                    />
-                )}
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <Info className="w-4 h-4 text-gray-400 cursor-help" />
+                    </TooltipTrigger>
+                    <TooltipContent side="right" align="start" className="font-display text-sm text-white fill-neutral-800 bg-neutral-800 whitespace-nowrap">
+                        <div className="p-2">
+                            <p>When a rule's condition matches, it overrides the default behavior.</p>
+                        </div>
+                    </TooltipContent>
+                </Tooltip>
             </div>
             <div className="py-4" />
-            <Table className="font-display">
-                <TableHeader>
-                    <TableRow>
-                        <TableHead className="w-[52%]">Rule</TableHead>
-                        <TableHead className="w-[24%] text-center">Updated At</TableHead>
-                        <TableHead className="w-[24%] text-center">Updated By</TableHead>
-                    </TableRow>
-                </TableHeader>
-                <TableBody>
-                    {rules.map((dataFilter, idx) => (
-                        <TableRow
-                            key={`${idx}-${dataFilter.id}`}
-                            className="font-body cursor-pointer hover:bg-yellow-200 focus-visible:border-yellow-200 select-none"
-                            onClick={() => onRuleClick(dataFilter)}
-                        >
-                            <TableCell className="w-[60%] p-4">
-                                <p className='truncate select-none font-mono text-sm'>{dataFilter.rule}</p>
-                                <div className='py-1' />
-                                <p className='text-xs truncate text-gray-500 select-none'>{getCollectionConfigDisplay(dataFilter.collection_config)}</p>
-                                <p className='text-xs truncate text-gray-500 select-none'>{getAttachmentConfigDisplay('attachment_config' in dataFilter ? dataFilter.attachment_config : undefined)}</p>
-                            </TableCell>
-                            <TableCell className="w-[20%] text-center p-4">
-                                <p className='truncate select-none'>{formatDateToHumanReadableDate(dataFilter.updated_at)}</p>
-                                <div className='py-1' />
-                                <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(dataFilter.updated_at)}</p>
-                            </TableCell>
-                            <TableCell className="w-[20%] text-center p-4">
-                                <p className='truncate select-none'>{dataFilter.updated_by}</p>
-                            </TableCell>
-                        </TableRow>
-                    ))}
-                </TableBody>
-            </Table>
+            <div className="overflow-hidden">
+                <div className="overflow-x-auto">
+                    <Table className="font-display">
+                        <TableHeader className="sticky top-0 bg-white z-10">
+                            <TableRow>
+                                <TableHead className="w-[52%]">Rules</TableHead>
+                                <TableHead className="w-[24%] text-center">Updated At</TableHead>
+                                <TableHead className="w-[24%] text-center">Updated By</TableHead>
+                            </TableRow>
+                        </TableHeader>
+                    </Table>
+                </div>
+                <div className="max-h-[400px] overflow-y-auto scrollbar-hide hover:scrollbar-default focus-within:scrollbar-default">
+                    <Table className="font-display">
+                        <TableBody>
+                            {rules.map((dataFilter, idx) => (
+                                <TableRow
+                                    key={`${idx}-${dataFilter.id}`}
+                                    className="font-body cursor-pointer hover:bg-yellow-200 focus-visible:border-yellow-200 select-none"
+                                    onClick={() => onRuleClick(dataFilter)}
+                                >
+                                    <TableCell className="w-[52%] p-4">
+                                        <p className='truncate select-none font-mono text-sm'>{dataFilter.rule}</p>
+                                        <div className='py-1' />
+                                        <p className='text-xs truncate text-gray-500 select-none'>{getCollectionConfigDisplay(dataFilter.collection_config)}</p>
+                                        <p className='text-xs truncate text-gray-500 select-none'>{getAttachmentConfigDisplay('attachment_config' in dataFilter ? dataFilter.attachment_config : undefined)}</p>
+                                    </TableCell>
+                                    <TableCell className="w-[24%] text-center p-4">
+                                        <p className='truncate select-none'>{formatDateToHumanReadableDate(dataFilter.updated_at)}</p>
+                                        <div className='py-1' />
+                                        <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(dataFilter.updated_at)}</p>
+                                    </TableCell>
+                                    <TableCell className="w-[24%] text-center p-4">
+                                        <p className='truncate select-none'>{dataFilter.updated_by}</p>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </div>
+            </div>
         </>
     )
 }
diff --git a/frontend/dashboard/app/components/targeting/session_targeting_rules_table.tsx b/frontend/dashboard/app/components/targeting/session_targeting_rules_table.tsx
index 98d967c8c..0d8637433 100644
--- a/frontend/dashboard/app/components/targeting/session_targeting_rules_table.tsx
+++ b/frontend/dashboard/app/components/targeting/session_targeting_rules_table.tsx
@@ -3,7 +3,6 @@
 import { SessionTargetingRule } from '@/app/api/api_calls'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/app/components/table'
 import { formatDateToHumanReadableDate, formatDateToHumanReadableTime } from '@/app/utils/time_utils'
-import Paginator from '@/app/components/paginator'
 
 const getSamplingRateDisplay = (samplingRate: number): string => {
     return `${samplingRate}% sampling rate`
@@ -12,64 +11,53 @@ const getSamplingRateDisplay = (samplingRate: number): string => {
 interface SessionTargetingRulesTableProps {
     rules: SessionTargetingRule[]
     onRuleClick: (rule: SessionTargetingRule) => void
-    prevEnabled: boolean
-    nextEnabled: boolean
-    onNext: () => void
-    onPrev: () => void
-    showPaginator: boolean
 }
 
-export default function SessionTargetingRulesTable({ rules, onRuleClick, prevEnabled, nextEnabled, onNext, onPrev, showPaginator }: SessionTargetingRulesTableProps) {
+export default function SessionTargetingRulesTable({ rules, onRuleClick }: SessionTargetingRulesTableProps) {
     if (rules.length === 0) {
         return null
     }
 
     return (
-        <>
-            <div className="w-full flex items-center justify-end">
-                {showPaginator && (
-                    <Paginator
-                        prevEnabled={prevEnabled}
-                        nextEnabled={nextEnabled}
-                        displayText=""
-                        onNext={onNext}
-                        onPrev={onPrev}
-                    />
-                )}
-            </div>
-            <div className="py-4" />
-            <Table className="font-display">
-                <TableHeader>
-                    <TableRow>
-                        <TableHead className="w-[52%]">Rule</TableHead>
-                        <TableHead className="w-[24%] text-center">Updated At</TableHead>
-                        <TableHead className="w-[24%] text-center">Updated By</TableHead>
-                    </TableRow>
-                </TableHeader>
-                <TableBody>
-                    {rules.map((rule, idx) => (
-                        <TableRow
-                            key={`${idx}-${rule.id}`}
-                            className="font-body cursor-pointer hover:bg-yellow-200 focus-visible:border-yellow-200 select-none"
-                            onClick={() => onRuleClick(rule)}
-                        >
-                            <TableCell className="w-[60%] p-4">
-                                <p className='truncate select-none font-mono text-sm'>{rule.rule}</p>
-                                <div className='py-1' />
-                                <p className='text-xs truncate text-gray-500 select-none'>{getSamplingRateDisplay(rule.sampling_rate)}</p>
-                            </TableCell>
-                            <TableCell className="w-[20%] text-center p-4">
-                                <p className='truncate select-none'>{formatDateToHumanReadableDate(rule.updated_at)}</p>
-                                <div className='py-1' />
-                                <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(rule.updated_at)}</p>
-                            </TableCell>
-                            <TableCell className="w-[20%] text-center p-4">
-                                <p className='truncate select-none'>{rule.updated_by}</p>
-                            </TableCell>
+        <div className="overflow-hidden">
+            <div className="overflow-x-auto">
+                <Table className="font-display">
+                    <TableHeader className="sticky top-0 bg-white z-10">
+                        <TableRow>
+                            <TableHead className="w-[52%]">Rules</TableHead>
+                            <TableHead className="w-[24%] text-center">Updated At</TableHead>
+                            <TableHead className="w-[24%] text-center">Updated By</TableHead>
                         </TableRow>
-                    ))}
-                </TableBody>
-            </Table>
-        </>
+                    </TableHeader>
+                </Table>
+            </div>
+            <div className="max-h-[400px] overflow-y-auto scrollbar-hide hover:scrollbar-default focus-within:scrollbar-default">
+                <Table className="font-display">
+                    <TableBody>
+                        {rules.map((rule, idx) => (
+                            <TableRow
+                                key={`${idx}-${rule.id}`}
+                                className="font-body cursor-pointer hover:bg-yellow-200 focus-visible:border-yellow-200 select-none"
+                                onClick={() => onRuleClick(rule)}
+                            >
+                                <TableCell className="w-[52%] p-4">
+                                    <p className='truncate select-none font-mono text-sm'>{rule.rule}</p>
+                                    <div className='py-1' />
+                                    <p className='text-xs truncate text-gray-500 select-none'>{getSamplingRateDisplay(rule.sampling_rate)}</p>
+                                </TableCell>
+                                <TableCell className="w-[24%] text-center p-4">
+                                    <p className='truncate select-none'>{formatDateToHumanReadableDate(rule.updated_at)}</p>
+                                    <div className='py-1' />
+                                    <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(rule.updated_at)}</p>
+                                </TableCell>
+                                <TableCell className="w-[24%] text-center p-4">
+                                    <p className='truncate select-none'>{rule.updated_by}</p>
+                                </TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </div>
+        </div>
     )
 }

From 3fbad1fdaa95ce205e4cf933bbbad86c41497b8a Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 6 Nov 2025 14:00:22 +0530
Subject: [PATCH 45/98] feat(frontend): improve layout

---
 frontend/dashboard/app/[teamId]/data/page.tsx | 13 ++++----
 .../targeting/edit_default_rule_dialog.tsx    |  5 +--
 .../event_trace_targeting_rules_table.tsx     |  2 +-
 .../targeting/sampling_rate_input.tsx         | 33 ++++++++++---------
 4 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index 34731c8a8..e65deaa77 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -28,14 +28,15 @@ interface PageState {
 
 const paginationLimit = 5
 
-const getCollectionConfigDisplay = (collectionConfig: EventTargetingCollectionConfig | TraceTargetingCollectionConfig): string => {
+const getCollectionConfigDisplay = (collectionConfig: EventTargetingCollectionConfig | TraceTargetingCollectionConfig, type: 'event' | 'trace'): string => {
+    const typeName = type === 'event' ? 'events' : 'traces'
     switch (collectionConfig.mode) {
         case 'sample_rate':
-            return `Collect all at ${collectionConfig.sample_rate}% sample rate`
+            return `Collect all ${typeName} at ${collectionConfig.sample_rate}% sample rate`
         case 'timeline_only':
-            return 'Collect with session timeline only'
+            return `Collect ${typeName} with session timeline only`
         case 'disable':
-            return 'Do not collect'
+            return `Collect no ${typeName} by default`
         default:
             return 'Unknown'
     }
@@ -311,7 +312,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         <div className="py-2" />
                         {eventsDefaultRule && (
                             <div className="text-sm font-body text-gray-700">
-                                {getCollectionConfigDisplay(eventsDefaultRule.collection_config)}
+                                {getCollectionConfigDisplay(eventsDefaultRule.collection_config, 'event')}
                             </div>
                         )}
 
@@ -348,7 +349,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         <div className="py-2" />
                         {traceDefaultRule && (
                             <div className="text-sm font-body text-gray-700">
-                                {getCollectionConfigDisplay(traceDefaultRule.collection_config)}
+                                {getCollectionConfigDisplay(traceDefaultRule.collection_config, 'trace')}
                             </div>
                         )}
 
diff --git a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
index 2b3d54099..b9eee38ff 100644
--- a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
+++ b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
@@ -72,7 +72,7 @@ export default function EditDefaultRuleDialog({
 
     return (
         <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
-            <DialogContent className="font-display">
+            <DialogContent className="font-display max-w-2xl">
                 <DialogHeader>
                     <DialogTitle className="font-display text-2xl">
                         Modify Default {displayName} Behaviour
@@ -95,6 +95,7 @@ export default function EditDefaultRuleDialog({
                                 value={sampleRate}
                                 onChange={setSampleRate}
                                 disabled={collectionMode !== 'sample_rate' || isSaving}
+                                type={displayNameLower as 'events' | 'traces'}
                             />
                         </label>
 
@@ -108,7 +109,7 @@ export default function EditDefaultRuleDialog({
                                 disabled={isSaving}
                                 className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
                             />
-                            <span className="text-sm font-body">Collect with session timeline only</span>
+                            <span className="text-sm font-body">Collect {displayNameLower} with session timeline only</span>
                         </label>
 
                         <label className="flex items-center gap-3 cursor-pointer h-10">
diff --git a/frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx b/frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx
index 5bcf0f252..b102d6007 100644
--- a/frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx
+++ b/frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx
@@ -58,7 +58,7 @@ export default function RulesTable({ rules, onRuleClick }: RulesTableProps) {
                     </TooltipContent>
                 </Tooltip>
             </div>
-            <div className="py-4" />
+            <div className="py-2" />
             <div className="overflow-hidden">
                 <div className="overflow-x-auto">
                     <Table className="font-display">
diff --git a/frontend/dashboard/app/components/targeting/sampling_rate_input.tsx b/frontend/dashboard/app/components/targeting/sampling_rate_input.tsx
index 7c1d79c72..215db99cb 100644
--- a/frontend/dashboard/app/components/targeting/sampling_rate_input.tsx
+++ b/frontend/dashboard/app/components/targeting/sampling_rate_input.tsx
@@ -4,6 +4,7 @@ interface SamplingRateInputProps {
     value: number
     onChange: (value: number) => void
     disabled?: boolean
+    type?: 'events' | 'traces'
 }
 
 const formatSamplingRate = (value: string): string => {
@@ -15,7 +16,7 @@ const formatSamplingRate = (value: string): string => {
     return formattedValue.toString()
 }
 
-export default function SamplingRateInput({ value, onChange, disabled = false }: SamplingRateInputProps) {
+export default function SamplingRateInput({ value, onChange, disabled = false, type = 'events' }: SamplingRateInputProps) {
     const [inputValue, setInputValue] = useState(value.toString())
 
     // Sync with prop value when it changes externally
@@ -41,20 +42,22 @@ export default function SamplingRateInput({ value, onChange, disabled = false }:
     }
 
     return (
-        <div className="flex items-center gap-3">
-            <span className="text-sm font-body">Collect at</span>
-            <input
-                type="number"
-                min="0"
-                max="100"
-                step="0.000001"
-                value={inputValue}
-                onChange={handleChange}
-                onBlur={handleBlur}
-                disabled={disabled}
-                className="w-32 border border-black rounded-md outline-hidden text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 font-body disabled:opacity-50 disabled:cursor-not-allowed"
-            />
-            <span className="text-sm font-body">% sampling rate</span>
+        <div className="flex items-center gap-2 flex-wrap">
+            <span className="text-sm font-body whitespace-nowrap">Collect all {type} at</span>
+            <div className="flex items-center gap-2">
+                <input
+                    type="number"
+                    min="0"
+                    max="100"
+                    step="0.000001"
+                    value={inputValue}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    disabled={disabled}
+                    className="w-32 border border-black rounded-md outline-hidden text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 font-body disabled:opacity-50 disabled:cursor-not-allowed"
+                />
+                <span className="text-sm font-body whitespace-nowrap">% sampling rate</span>
+            </div>
         </div>
     )
 }

From 03bdcbf0e5c1cfed82866741942ef94f48905d90 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 6 Nov 2025 14:27:21 +0530
Subject: [PATCH 46/98] feat(frontend): fix errors

---
 frontend/dashboard/app/[teamId]/data/page.tsx     | 15 ---------------
 .../event_trace_targeting_rules_table.tsx         |  2 +-
 .../targeting/session_targeting_rules_table.tsx   |  2 +-
 3 files changed, 2 insertions(+), 17 deletions(-)

diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index e65deaa77..549d621a6 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -319,11 +319,6 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         <EventTraceTargetingRulesTable
                             rules={eventsOverideRules}
                             onRuleClick={(rule) => handleEditRule(rule, 'event')}
-                            prevEnabled={pageState.eventTargetingRules.meta.previous}
-                            nextEnabled={pageState.eventTargetingRules.meta.next}
-                            onNext={handleEventNextPage}
-                            onPrev={handleEventPrevPage}
-                            showPaginator={eventsOverideRules.length > 0}
                         />
                     </div>
 
@@ -356,11 +351,6 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         <EventTraceTargetingRulesTable
                             rules={traceOverrideRules}
                             onRuleClick={(rule) => handleEditRule(rule, 'trace')}
-                            prevEnabled={pageState.traceTargetingRules.meta.previous}
-                            nextEnabled={pageState.traceTargetingRules.meta.next}
-                            onNext={handleTraceNextPage}
-                            onPrev={handleTracePrevPage}
-                            showPaginator={traceOverrideRules.length > 0}
                         />
                     </div>
 
@@ -375,11 +365,6 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         <SessionTargetingRulesTable
                             rules={sessionTargetingRules}
                             onRuleClick={(rule) => handleEditRule(rule, 'session')}
-                            prevEnabled={pageState.sessionTargetingRules.meta.previous}
-                            nextEnabled={pageState.sessionTargetingRules.meta.next}
-                            onNext={handleSessionNextPage}
-                            onPrev={handleSessionPrevPage}
-                            showPaginator={sessionTargetingRules.length > 0}
                         />
                     </div>
                 </div>}
diff --git a/frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx b/frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx
index b102d6007..64a5f7544 100644
--- a/frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx
+++ b/frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx
@@ -71,7 +71,7 @@ export default function RulesTable({ rules, onRuleClick }: RulesTableProps) {
                         </TableHeader>
                     </Table>
                 </div>
-                <div className="max-h-[400px] overflow-y-auto scrollbar-hide hover:scrollbar-default focus-within:scrollbar-default">
+                <div className="max-h-[400px] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-transparent hover:[&::-webkit-scrollbar-thumb]:bg-gray-300 focus-within:[&::-webkit-scrollbar-thumb]:bg-gray-300">
                     <Table className="font-display">
                         <TableBody>
                             {rules.map((dataFilter, idx) => (
diff --git a/frontend/dashboard/app/components/targeting/session_targeting_rules_table.tsx b/frontend/dashboard/app/components/targeting/session_targeting_rules_table.tsx
index 0d8637433..bded715d0 100644
--- a/frontend/dashboard/app/components/targeting/session_targeting_rules_table.tsx
+++ b/frontend/dashboard/app/components/targeting/session_targeting_rules_table.tsx
@@ -31,7 +31,7 @@ export default function SessionTargetingRulesTable({ rules, onRuleClick }: Sessi
                     </TableHeader>
                 </Table>
             </div>
-            <div className="max-h-[400px] overflow-y-auto scrollbar-hide hover:scrollbar-default focus-within:scrollbar-default">
+            <div className="max-h-[400px] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-transparent hover:[&::-webkit-scrollbar-thumb]:bg-gray-300 focus-within:[&::-webkit-scrollbar-thumb]:bg-gray-300">
                 <Table className="font-display">
                     <TableBody>
                         {rules.map((rule, idx) => (

From 1e3799a2e7a769b7182074a7d0d881163b8d4005 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 6 Nov 2025 15:25:34 +0530
Subject: [PATCH 47/98] feat(frontend): implement basic edit/create rule page

---
 .../targeting/event_trace_rule_builder.tsx    | 171 +++++++++++++++++-
 1 file changed, 167 insertions(+), 4 deletions(-)

diff --git a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
index 580584eba..f775e0bf0 100644
--- a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
@@ -36,6 +36,14 @@ type PageState = {
     configData: EventTargetingConfigResponse | TraceTargetingConfigResponse | null
     ruleApiStatus: EventTargetingRuleApiStatus | TraceTargetingRuleApiStatus
     configApiStatus: EventTargetingConfigApiStatus | TraceTargetingConfigApiStatus
+    initialRuleState: string | null
+    currentRuleState: string | null
+}
+
+type FormState = {
+    collectionMode: 'sample_rate' | 'timeline_only' | 'disable'
+    sampleRate: number
+    attachmentMode: 'layout_snapshot' | 'screenshot' | 'none'
 }
 
 export default function EventTraceRuleBuilder({
@@ -50,7 +58,15 @@ export default function EventTraceRuleBuilder({
         ruleData: null,
         configData: null,
         ruleApiStatus: EventTargetingRuleApiStatus.Loading,
-        configApiStatus: EventTargetingConfigApiStatus.Loading
+        configApiStatus: EventTargetingConfigApiStatus.Loading,
+        initialRuleState: null,
+        currentRuleState: null
+    })
+
+    const [formState, setFormState] = useState<FormState>({
+        collectionMode: 'sample_rate',
+        sampleRate: 100,
+        attachmentMode: 'none'
     })
 
     useEffect(() => {
@@ -92,11 +108,20 @@ export default function EventTraceRuleBuilder({
                 ruleData = emptyEventTargetingRule
             }
 
+            const initialFormState = {
+                collectionMode: 'sample_rate' as const,
+                sampleRate: 100,
+                attachmentMode: 'none' as const
+            }
+            setFormState(initialFormState)
+            const initialState = JSON.stringify(initialFormState)
             setPageState({
                 ruleData,
                 configData: emptyEventTargetingConfigResponse,
                 ruleApiStatus,
-                configApiStatus: EventTargetingConfigApiStatus.Success
+                configApiStatus: EventTargetingConfigApiStatus.Success,
+                initialRuleState: initialState,
+                currentRuleState: initialState
             })
         } else {
             // const configResult = await fetchTraceTargetingConfigFromServer(appId)
@@ -126,11 +151,20 @@ export default function EventTraceRuleBuilder({
                 ruleData = emptyTraceTargetingRule
             }
 
+            const initialFormState = {
+                collectionMode: 'sample_rate' as const,
+                sampleRate: 100,
+                attachmentMode: 'none' as const
+            }
+            setFormState(initialFormState)
+            const initialState = JSON.stringify(initialFormState)
             setPageState({
                 ruleData,
                 configData: emptyTraceTargetingConfigResponse,
                 ruleApiStatus,
-                configApiStatus: TraceTargetingConfigApiStatus.Success
+                configApiStatus: TraceTargetingConfigApiStatus.Success,
+                initialRuleState: initialState,
+                currentRuleState: initialState
             })
         }
     }
@@ -168,6 +202,20 @@ export default function EventTraceRuleBuilder({
                 pageState.configApiStatus === TraceTargetingConfigApiStatus.Success)
     }
 
+    const hasChanges = () => {
+        if (mode === 'create') return true
+        return pageState.initialRuleState !== pageState.currentRuleState
+    }
+
+    const updateFormState = (updates: Partial<FormState>) => {
+        const newFormState = { ...formState, ...updates }
+        setFormState(newFormState)
+        setPageState(prev => ({
+            ...prev,
+            currentRuleState: JSON.stringify(newFormState)
+        }))
+    }
+
 
     return (
         <div className="flex flex-col selection:bg-yellow-200/75 items-start">
@@ -199,8 +247,122 @@ export default function EventTraceRuleBuilder({
             {/* Main content */}
             {isReady() && (
                 <div className="w-full flex flex-col">
-                    {/* Reserved space for content */}
+                    {/* When section */}
+                    <div className="mb-6">
+                        <div className="flex items-center gap-3 mb-4">
+                            <span className="font-display text-lg">When</span>
+                            <div className="flex-1 px-4 py-2 border border-gray-300 rounded-md bg-gray-50">
+                                <code className="text-sm font-mono">
+                                    {mode === 'edit' && pageState.ruleData
+                                        ? pageState.ruleData.rule
+                                        : 'event_type == "click"'}
+                                </code>
+                            </div>
+                        </div>
+                        <button className="text-sm font-body text-gray-600 flex items-center gap-2 ml-14">
+                            + Filter by attribute
+                        </button>
+                    </div>
+
+                    {/* Then section */}
                     <div className="mb-6">
+                        <p className="font-display text-lg mb-4">Then</p>
+
+                        {/* Collection config */}
+                        <div className="mb-4">
+                            <p className="font-body text-sm text-gray-500 mb-3">Collection</p>
+                            <div className="space-y-3 ml-4">
+                                <label className="flex items-center gap-3 cursor-pointer h-10">
+                                    <input
+                                        type="radio"
+                                        name="collectionMode"
+                                        value="sample_rate"
+                                        checked={formState.collectionMode === 'sample_rate'}
+                                        onChange={() => updateFormState({ collectionMode: 'sample_rate' })}
+                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                    />
+                                    <span className="text-sm font-body">Collect at sampling rate</span>
+                                    <input
+                                        type="number"
+                                        value={formState.sampleRate}
+                                        onChange={(e) => updateFormState({ sampleRate: parseFloat(e.target.value) || 0 })}
+                                        min="0"
+                                        max="100"
+                                        step="0.000001"
+                                        className="w-32 border border-black rounded-md outline-hidden text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 font-body"
+                                    />
+                                    <span className="text-sm font-body">%</span>
+                                </label>
+
+                                <label className="flex items-center gap-3 cursor-pointer h-10">
+                                    <input
+                                        type="radio"
+                                        name="collectionMode"
+                                        value="timeline_only"
+                                        checked={formState.collectionMode === 'timeline_only'}
+                                        onChange={() => updateFormState({ collectionMode: 'timeline_only' })}
+                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                    />
+                                    <span className="text-sm font-body">Collect with timeline only</span>
+                                </label>
+
+                                <label className="flex items-center gap-3 cursor-pointer h-10">
+                                    <input
+                                        type="radio"
+                                        name="collectionMode"
+                                        value="disable"
+                                        checked={formState.collectionMode === 'disable'}
+                                        onChange={() => updateFormState({ collectionMode: 'disable' })}
+                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                    />
+                                    <span className="text-sm font-body">Never collect</span>
+                                </label>
+                            </div>
+                        </div>
+
+                        {/* Attachments (only for events) */}
+                        {type === 'event' && (
+                            <div className="mb-4">
+                                <p className="font-body text-sm text-gray-500 mb-3">Attachments</p>
+                                <div className="space-y-3 ml-4">
+                                    <label className="flex items-center gap-3 cursor-pointer h-10">
+                                        <input
+                                            type="radio"
+                                            name="attachmentMode"
+                                            value="layout_snapshot"
+                                            checked={formState.attachmentMode === 'layout_snapshot'}
+                                            onChange={() => updateFormState({ attachmentMode: 'layout_snapshot' })}
+                                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                        />
+                                        <span className="text-sm font-body">Take layout snapshot</span>
+                                    </label>
+
+                                    <label className="flex items-center gap-3 cursor-pointer h-10">
+                                        <input
+                                            type="radio"
+                                            name="attachmentMode"
+                                            value="screenshot"
+                                            checked={formState.attachmentMode === 'screenshot'}
+                                            onChange={() => updateFormState({ attachmentMode: 'screenshot' })}
+                                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                        />
+                                        <span className="text-sm font-body">Take screenshot</span>
+                                    </label>
+
+                                    <label className="flex items-center gap-3 cursor-pointer h-10">
+                                        <input
+                                            type="radio"
+                                            name="attachmentMode"
+                                            value="none"
+                                            checked={formState.attachmentMode === 'none'}
+                                            onChange={() => updateFormState({ attachmentMode: 'none' })}
+                                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                        />
+                                        <span className="text-sm font-body">No attachments</span>
+                                    </label>
+                                </div>
+                            </div>
+                        )}
                     </div>
 
                     {/* Action buttons */}
@@ -216,6 +378,7 @@ export default function EventTraceRuleBuilder({
                             variant="outline"
                             onClick={onPrimaryAction}
                             className="font-display border border-black"
+                            disabled={!hasChanges()}
                         >
                             {getPrimaryActionLabel()}
                         </Button>

From 6d642b38c2f51bc3b79a701b9f9793955b65330f Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Fri, 7 Nov 2025 16:15:39 +0530
Subject: [PATCH 48/98] feat(backend): implement dashboard APIs

---
 backend/api/main.go                    |  10 +
 backend/api/measure/app.go             | 731 +++++++++++++++++++++
 backend/api/measure/targeting_rules.go | 875 +++++++++++++++++++++++++
 backend/api/measure/user.go            |  44 ++
 4 files changed, 1660 insertions(+)
 create mode 100644 backend/api/measure/targeting_rules.go

diff --git a/backend/api/main.go b/backend/api/main.go
index f6ad25fa1..8414edc5f 100644
--- a/backend/api/main.go
+++ b/backend/api/main.go
@@ -59,6 +59,7 @@ func main() {
 	// SDK routes
 	r.PUT("/events", measure.ValidateAPIKey(), measure.PutEvents)
 	r.PUT("/builds", measure.ValidateAPIKey(), measure.PutBuilds)
+	// r.GET("/config", measure.ValidateAPIKey(), measure.GetConfig)
 
 	// Proxy routes
 	r.GET("/proxy/attachments", measure.ProxyAttachment)
@@ -114,6 +115,15 @@ func main() {
 		apps.GET(":id/bugReports/:bugReportId", measure.GetBugReport)
 		apps.PATCH(":id/bugReports/:bugReportId", measure.UpdateBugReportStatus)
 		apps.GET(":id/alerts", measure.GetAlertsOverview)
+		apps.GET(":id/targetingRules/events", measure.GetEventTargetingRules)
+		apps.GET(":id/targetingRules/traces", measure.GetTraceTargetingRules)
+		apps.GET(":id/targetingRules/sessions", measure.GetSessionTargetingRules)
+		apps.GET(":id/targetingRules/events/:ruleId", measure.GetEventTargetingRule)
+		apps.GET(":id/targetingRules/traces/:ruleId", measure.GetTraceTargetingRule)
+		apps.GET(":id/targetingRules/sessions/:ruleId", measure.GetSessionTargetingRule)
+		apps.GET(":id/targetingRules/events/config", measure.GetEventTargetingRuleConfig)
+		apps.GET(":id/targetingRules/traces/config", measure.GetTraceTargetingRuleConfig)
+		apps.GET(":id/targetingRules/sessions/config", measure.GetSessionTargetingRuleConfig)
 	}
 
 	teams := r.Group("/teams", measure.ValidateAccessToken())
diff --git a/backend/api/measure/app.go b/backend/api/measure/app.go
index 725491730..548066d94 100644
--- a/backend/api/measure/app.go
+++ b/backend/api/measure/app.go
@@ -6467,3 +6467,734 @@ func GetAlertsOverview(c *gin.Context) {
 		},
 	})
 }
+
+func GetEventTargetingRules(c *gin.Context) {
+	ctx := c.Request.Context()
+	id, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		msg := `id invalid or missing`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	af := filter.AppFilter{
+		AppID: id,
+	}
+
+	if err := c.ShouldBindQuery(&af); err != nil {
+		msg := `failed to parse query parameters`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error":   msg,
+			"details": err.Error(),
+		})
+		return
+	}
+
+	if err := af.Expand(ctx); err != nil {
+		msg := `failed to expand filters`
+		fmt.Println(msg, err)
+		status := http.StatusInternalServerError
+		if errors.Is(err, pgx.ErrNoRows) {
+			status = http.StatusNotFound
+		}
+		c.JSON(status, gin.H{
+			"error":   msg,
+			"details": err.Error(),
+		})
+		return
+	}
+
+	msg := "event targeting rules request validation failed"
+	if err := af.Validate(); err != nil {
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error":   msg,
+			"details": err.Error(),
+		})
+		return
+	}
+
+	app := App{
+		ID: &id,
+	}
+	team, err := app.getTeam(ctx)
+	if err != nil {
+		msg := "failed to get team from app id"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+	if team == nil {
+		msg := fmt.Sprintf("no team exists for app [%s]", app.ID)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	userId := c.GetString("userId")
+	okTeam, err := PerformAuthz(userId, team.ID.String(), *ScopeTeamRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	okApp, err := PerformAuthz(userId, team.ID.String(), *ScopeAppRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	if !okTeam || !okApp {
+		msg := `you are not authorized to access this app`
+		c.JSON(http.StatusForbidden, gin.H{"error": msg})
+		return
+	}
+
+	rules, err := GetEventTargetingRulesWithFilter(ctx, &af)
+	if err != nil {
+		msg := "failed to get app's event targeting rules"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	c.JSON(http.StatusOK, gin.H{
+		"results": rules,
+	})
+}
+
+func GetTraceTargetingRules(c *gin.Context) {
+	ctx := c.Request.Context()
+	id, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		msg := `id invalid or missing`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	af := filter.AppFilter{
+		AppID: id,
+	}
+
+	if err := c.ShouldBindQuery(&af); err != nil {
+		msg := `failed to parse query parameters`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error":   msg,
+			"details": err.Error(),
+		})
+		return
+	}
+
+	if err := af.Expand(ctx); err != nil {
+		msg := `failed to expand filters`
+		fmt.Println(msg, err)
+		status := http.StatusInternalServerError
+		if errors.Is(err, pgx.ErrNoRows) {
+			status = http.StatusNotFound
+		}
+		c.JSON(status, gin.H{
+			"error":   msg,
+			"details": err.Error(),
+		})
+		return
+	}
+
+	msg := "trace targeting rules request validation failed"
+	if err := af.Validate(); err != nil {
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error":   msg,
+			"details": err.Error(),
+		})
+		return
+	}
+
+	app := App{
+		ID: &id,
+	}
+	team, err := app.getTeam(ctx)
+	if err != nil {
+		msg := "failed to get team from app id"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+	if team == nil {
+		msg := fmt.Sprintf("no team exists for app [%s]", app.ID)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	userId := c.GetString("userId")
+	okTeam, err := PerformAuthz(userId, team.ID.String(), *ScopeTeamRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	okApp, err := PerformAuthz(userId, team.ID.String(), *ScopeAppRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	if !okTeam || !okApp {
+		msg := `you are not authorized to access this app`
+		c.JSON(http.StatusForbidden, gin.H{"error": msg})
+		return
+	}
+
+	rules, err := GetTraceTargetingRulesWithFilter(ctx, &af)
+	if err != nil {
+		msg := "failed to get app's trace targeting rules"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	c.JSON(http.StatusOK, gin.H{
+		"results": rules,
+	})
+}
+
+func GetSessionTargetingRules(c *gin.Context) {
+	ctx := c.Request.Context()
+	id, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		msg := `id invalid or missing`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	af := filter.AppFilter{
+		AppID: id,
+	}
+
+	if err := c.ShouldBindQuery(&af); err != nil {
+		msg := `failed to parse query parameters`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error":   msg,
+			"details": err.Error(),
+		})
+		return
+	}
+
+	if err := af.Expand(ctx); err != nil {
+		msg := `failed to expand filters`
+		fmt.Println(msg, err)
+		status := http.StatusInternalServerError
+		if errors.Is(err, pgx.ErrNoRows) {
+			status = http.StatusNotFound
+		}
+		c.JSON(status, gin.H{
+			"error":   msg,
+			"details": err.Error(),
+		})
+		return
+	}
+
+	msg := "session targeting rules request validation failed"
+	if err := af.Validate(); err != nil {
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error":   msg,
+			"details": err.Error(),
+		})
+		return
+	}
+
+	app := App{
+		ID: &id,
+	}
+	team, err := app.getTeam(ctx)
+	if err != nil {
+		msg := "failed to get team from app id"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+	if team == nil {
+		msg := fmt.Sprintf("no team exists for app [%s]", app.ID)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	userId := c.GetString("userId")
+	okTeam, err := PerformAuthz(userId, team.ID.String(), *ScopeTeamRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	okApp, err := PerformAuthz(userId, team.ID.String(), *ScopeAppRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	if !okTeam || !okApp {
+		msg := `you are not authorized to access this app`
+		c.JSON(http.StatusForbidden, gin.H{"error": msg})
+		return
+	}
+
+	rules, err := GetSessionTargetingRulesWithFilter(ctx, &af)
+	if err != nil {
+		msg := "failed to get app's session targeting rules"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	c.JSON(http.StatusOK, gin.H{
+		"results": rules,
+	})
+}
+
+func GetEventTargetingRule(c *gin.Context) {
+	ctx := c.Request.Context()
+	id, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		msg := `id invalid or missing`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	ruleId := c.Param("ruleId")
+
+	app := App{
+		ID: &id,
+	}
+	team, err := app.getTeam(ctx)
+	if err != nil {
+		msg := "failed to get team from app id"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+	if team == nil {
+		msg := fmt.Sprintf("no team exists for app [%s]", app.ID)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	userId := c.GetString("userId")
+	okTeam, err := PerformAuthz(userId, team.ID.String(), *ScopeTeamRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	okApp, err := PerformAuthz(userId, team.ID.String(), *ScopeAppRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	if !okTeam || !okApp {
+		msg := `you are not authorized to access this app`
+		c.JSON(http.StatusForbidden, gin.H{"error": msg})
+		return
+	}
+
+	targetingRule, err := GetEventTargetingRuleById(ctx, app.ID, ruleId)
+	if err != nil {
+		msg := "failed to get event targeting rule"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	c.JSON(http.StatusOK, targetingRule)
+}
+
+func GetTraceTargetingRule(c *gin.Context) {
+	ctx := c.Request.Context()
+	id, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		msg := `id invalid or missing`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	ruleId := c.Param("ruleId")
+
+	app := App{
+		ID: &id,
+	}
+	team, err := app.getTeam(ctx)
+	if err != nil {
+		msg := "failed to get team from app id"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+	if team == nil {
+		msg := fmt.Sprintf("no team exists for app [%s]", app.ID)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	userId := c.GetString("userId")
+	okTeam, err := PerformAuthz(userId, team.ID.String(), *ScopeTeamRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	okApp, err := PerformAuthz(userId, team.ID.String(), *ScopeAppRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	if !okTeam || !okApp {
+		msg := `you are not authorized to access this app`
+		c.JSON(http.StatusForbidden, gin.H{"error": msg})
+		return
+	}
+
+	targetingRule, err := GetTraceTargetingRuleById(ctx, app.ID, ruleId)
+	if err != nil {
+		msg := "failed to get session targeting rule"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	c.JSON(http.StatusOK, targetingRule)
+}
+
+func GetSessionTargetingRule(c *gin.Context) {
+	ctx := c.Request.Context()
+	id, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		msg := `id invalid or missing`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	ruleId := c.Param("ruleId")
+
+	app := App{
+		ID: &id,
+	}
+	team, err := app.getTeam(ctx)
+	if err != nil {
+		msg := "failed to get team from app id"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+	if team == nil {
+		msg := fmt.Sprintf("no team exists for app [%s]", app.ID)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	userId := c.GetString("userId")
+	okTeam, err := PerformAuthz(userId, team.ID.String(), *ScopeTeamRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	okApp, err := PerformAuthz(userId, team.ID.String(), *ScopeAppRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	if !okTeam || !okApp {
+		msg := `you are not authorized to access this app`
+		c.JSON(http.StatusForbidden, gin.H{"error": msg})
+		return
+	}
+
+	targetingRule, err := GetSessionTargetingRuleById(ctx, app.ID, ruleId)
+	if err != nil {
+		msg := "failed to get session targeting rule"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	c.JSON(http.StatusOK, targetingRule)
+}
+
+func GetEventTargetingRuleConfig(c *gin.Context) {
+	ctx := c.Request.Context()
+	id, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		msg := `id invalid or missing`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	app := App{
+		ID: &id,
+	}
+	team, err := app.getTeam(ctx)
+	if err != nil {
+		msg := "failed to get team from app id"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+	if team == nil {
+		msg := fmt.Sprintf("no team exists for app [%s]", app.ID)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	userId := c.GetString("userId")
+	okTeam, err := PerformAuthz(userId, team.ID.String(), *ScopeTeamRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	okApp, err := PerformAuthz(userId, team.ID.String(), *ScopeAppRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	if !okTeam || !okApp {
+		msg := `you are not authorized to access this app`
+		c.JSON(http.StatusForbidden, gin.H{"error": msg})
+		return
+	}
+
+	// Safely get OS name for the app
+	// set to opsys.Unknown if unavailable
+	stmt := sqlf.PostgreSQL.From("apps").
+		Select("os_name").
+		Where("id = ?", app.ID)
+
+	defer stmt.Close()
+
+	var osName *string
+	err = server.Server.PgPool.QueryRow(ctx, stmt.String(), stmt.Args()...).Scan(&osName)
+	if err != nil {
+		msg := `failed to fetch app details`
+		fmt.Println(msg, err)
+		status := http.StatusInternalServerError
+
+		if errors.Is(err, pgx.ErrNoRows) {
+			status = http.StatusNotFound
+			msg = fmt.Sprintf(`app with id %q does not exist`, app.ID)
+		}
+
+		c.JSON(status, gin.H{
+			"error": msg,
+		})
+
+		return
+	}
+
+	if osName != nil {
+		app.OSName = *osName
+	} else {
+		app.OSName = opsys.Unknown
+	}
+
+	config, err := GetEventTargetingConfig(ctx, id, app.OSName)
+	if err != nil {
+		msg := "failed to get event targeting rule config"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	c.JSON(http.StatusOK, config)
+}
+
+func GetTraceTargetingRuleConfig(c *gin.Context) {
+	ctx := c.Request.Context()
+	id, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		msg := `id invalid or missing`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	app := App{
+		ID: &id,
+	}
+	team, err := app.getTeam(ctx)
+	if err != nil {
+		msg := "failed to get team from app id"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+	if team == nil {
+		msg := fmt.Sprintf("no team exists for app [%s]", app.ID)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	userId := c.GetString("userId")
+	okTeam, err := PerformAuthz(userId, team.ID.String(), *ScopeTeamRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	okApp, err := PerformAuthz(userId, team.ID.String(), *ScopeAppRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	if !okTeam || !okApp {
+		msg := `you are not authorized to access this app`
+		c.JSON(http.StatusForbidden, gin.H{"error": msg})
+		return
+	}
+
+	// Safely get OS name for the app
+	// set to opsys.Unknown if unavailable
+	stmt := sqlf.PostgreSQL.From("apps").
+		Select("os_name").
+		Where("id = ?", app.ID)
+		
+	defer stmt.Close()
+
+	var osName *string
+	err = server.Server.PgPool.QueryRow(ctx, stmt.String(), stmt.Args()...).Scan(&osName)
+	if err != nil {
+		msg := `failed to fetch app details`
+		fmt.Println(msg, err)
+		status := http.StatusInternalServerError
+		
+		if errors.Is(err, pgx.ErrNoRows) {
+			status = http.StatusNotFound
+			msg = fmt.Sprintf(`app with id %q does not exist`, app.ID)
+		}
+		
+		c.JSON(status, gin.H{
+			"error": msg,
+		})
+
+		return
+	}
+
+	if osName != nil {
+		app.OSName = *osName
+	} else {
+		app.OSName = opsys.Unknown
+	}
+
+	config, err := GetTraceTargetingConfig(ctx, id, app.OSName)
+	if err != nil {
+		msg := "failed to get trace targeting rule config"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	c.JSON(http.StatusOK, config)
+}
+func GetSessionTargetingRuleConfig(c *gin.Context) {
+	ctx := c.Request.Context()
+	id, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		msg := `id invalid or missing`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	app := App{
+		ID: &id,
+	}
+	team, err := app.getTeam(ctx)
+	if err != nil {
+		msg := "failed to get team from app id"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+	if team == nil {
+		msg := fmt.Sprintf("no team exists for app [%s]", app.ID)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	userId := c.GetString("userId")
+	okTeam, err := PerformAuthz(userId, team.ID.String(), *ScopeTeamRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	okApp, err := PerformAuthz(userId, team.ID.String(), *ScopeAppRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	if !okTeam || !okApp {
+		msg := `you are not authorized to access this app`
+		c.JSON(http.StatusForbidden, gin.H{"error": msg})
+		return
+	}
+
+	config, err := GetSessionTargetingConfig(ctx, id, app.OSName)
+	if err != nil {
+		msg := "failed to get session targeting rule config"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	c.JSON(http.StatusOK, config)
+}
diff --git a/backend/api/measure/targeting_rules.go b/backend/api/measure/targeting_rules.go
new file mode 100644
index 000000000..66e05d233
--- /dev/null
+++ b/backend/api/measure/targeting_rules.go
@@ -0,0 +1,875 @@
+package measure
+
+import (
+	"backend/api/filter"
+	"backend/api/opsys"
+	"backend/api/server"
+	"context"
+	"fmt"
+	"sort"
+	"time"
+
+	"github.com/google/uuid"
+	"github.com/leporo/sqlf"
+)
+
+// Represents a event targting rule.
+type EventTargetingRule struct {
+	Id             uuid.UUID `json:"id"`
+	TeamId         uuid.UUID `json:"team_id"`
+	AppId          uuid.UUID `json:"app_id"`
+	Status         int       `json:"status"`
+	Condition      string    `json:"condition"`
+	CollectionMode string    `json:"collection_mode"`
+	AttachmentMode string    `json:"attachment_mode"`
+	SamplingRate   float32   `json:"sampling_rate"`
+	CreatedAt      time.Time `json:"created_at"`
+	CreatedBy      uuid.UUID `json:"-"`
+	CreatedByEmail string    `json:"created_by"`
+	UpdatedAt      time.Time `json:"updated_at"`
+	UpdatedBy      uuid.UUID `json:"-"`
+	UpdatedByEmail string    `json:"updated_by"`
+}
+
+// Represents a trace targting rule.
+type TraceTargetingRule struct {
+	Id             uuid.UUID `json:"id"`
+	TeamId         uuid.UUID `json:"team_id"`
+	AppId          uuid.UUID `json:"app_id"`
+	Status         int       `json:"status"`
+	Condition      string    `json:"condition"`
+	CollectionMode string    `json:"collection_mode"`
+	SamplingRate   float32   `json:"sampling_rate"`
+	CreatedAt      time.Time `json:"created_at"`
+	CreatedBy      uuid.UUID `json:"-"`
+	CreatedByEmail string    `json:"created_by"`
+	UpdatedAt      time.Time `json:"updated_at"`
+	UpdatedBy      uuid.UUID `json:"-"`
+	UpdatedByEmail string    `json:"updated_by"`
+}
+
+// Represents a session targting rule.
+type SessionTargetingRule struct {
+	Id             uuid.UUID `json:"id"`
+	TeamId         uuid.UUID `json:"team_id"`
+	AppId          uuid.UUID `json:"app_id"`
+	Status         int       `json:"status"`
+	SamplingRate   float32   `json:"sampling_rate"`
+	Condition      string    `json:"condition"`
+	CreatedAt      time.Time `json:"created_at"`
+	CreatedBy      uuid.UUID `json:"-"`
+	CreatedByEmail string    `json:"created_by"`
+	UpdatedAt      time.Time `json:"updated_at"`
+	UpdatedBy      uuid.UUID `json:"-"`
+	UpdatedByEmail string    `json:"updated_by"`
+}
+
+// EventConfig part of the
+// targeting dashboard config.
+type EventConfig struct {
+	Type       string       `json:"type"`
+	Attrs      []AttrConfig `json:"attrs"`
+	HasUdAttrs bool         `json:"has_ud_attrs"`
+}
+
+// TraceConfig part of the
+// targeting dashboard config.
+type TraceConfig struct {
+	Name       string       `json:"name"`
+	Attrs      []AttrConfig `json:"attrs"`
+	HasUdAttrs bool         `json:"has_ud_attrs"`
+}
+
+// AttrConfig part of the session
+// targeting dashboard config.
+type AttrConfig struct {
+	Key  string `json:"key"`
+	Type string `json:"type"`
+	Hint string `json:"hint"`
+}
+
+// OperatorTypes part of the session
+// targeting dashboard config.
+type OperatorTypes struct {
+	Bool    []string `json:"bool"`
+	Float64 []string `json:"float64"`
+	Int64   []string `json:"int64"`
+	String  []string `json:"string"`
+}
+
+// Event targeting config used
+// by the dashboard.
+type EventTargetingConfig struct {
+	Events        []EventConfig `json:"events"`
+	SessionAttrs  []AttrConfig  `json:"session_attrs"`
+	EventUdAttrs  []AttrConfig  `json:"event_ud_attrs"`
+	OperatorTypes OperatorTypes `json:"operator_types"`
+}
+
+// Trace targeting config used
+// by the dashboard.
+type TraceTargetingConfig struct {
+	Traces            []TraceConfig `json:"trace_config"`
+	SessionAttrs      []AttrConfig  `json:"session_attrs"`
+	TraceUDAttributes []AttrConfig  `json:"trace_ud_attrs"`
+	OperatorTypes     OperatorTypes `json:"operator_types"`
+}
+
+// Session targeting config used
+// by the dashboard.
+type SessionTargetingConfig struct {
+	Events            []EventConfig `json:"events"`
+	Traces            []TraceConfig `json:"trace_config"`
+	EventUdAttrs      []AttrConfig  `json:"event_ud_attrs"`
+	TraceUDAttributes []AttrConfig  `json:"trace_ud_attrs"`
+	SessionAttrs      []AttrConfig  `json:"session_attrs"`
+	OperatorTypes     OperatorTypes `json:"operator_types"`
+}
+
+// GetEventTargetingRules provides all
+// event targeting rules.
+func GetEventTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter) (rules []EventTargetingRule, err error) {
+	stmt := sqlf.PostgreSQL.From("event_targeting_rules").
+		Select("id").
+		Select("team_id").
+		Select("app_id").
+		Select("status").
+		Select("condition").
+		Select("collection_mode").
+		Select("attachment_mode").
+		Select("created_at").
+		Select("created_by").
+		Select("updated_at").
+		Select("updated_by").
+		Where("app_id = ?", af.AppID)
+
+	stmt.OrderBy("updated_at DESC")
+
+	defer stmt.Close()
+
+	rows, err := server.Server.PgPool.Query(ctx, stmt.String(), stmt.Args()...)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	for rows.Next() {
+		var rule EventTargetingRule
+		if err := rows.Scan(
+			&rule.Id,
+			&rule.TeamId,
+			&rule.AppId,
+			&rule.Status,
+			&rule.Condition,
+			&rule.CollectionMode,
+			&rule.AttachmentMode,
+			&rule.CreatedAt,
+			&rule.CreatedBy,
+			&rule.UpdatedAt,
+			&rule.UpdatedBy,
+		); err != nil {
+			return nil, err
+		}
+		rules = append(rules, rule)
+	}
+
+	// Populate user emails for all rules
+	if err := populateUserEmailsForEventRules(ctx, rules); err != nil {
+		return nil, err
+	}
+
+	return rules, nil
+}
+
+// GetTraceTargetingRulesWithFilter provides all
+// trace targeting rules.
+func GetTraceTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter) (rules []TraceTargetingRule, err error) {
+	stmt := sqlf.PostgreSQL.From("trace_targeting_rules").
+		Select("id").
+		Select("team_id").
+		Select("app_id").
+		Select("status").
+		Select("condition").
+		Select("collection_mode").
+		Select("created_at").
+		Select("created_by").
+		Select("updated_at").
+		Select("updated_by").
+		Where("app_id = ?", af.AppID)
+
+	stmt.OrderBy("updated_at DESC")
+
+	defer stmt.Close()
+
+	rows, err := server.Server.PgPool.Query(ctx, stmt.String(), stmt.Args()...)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	for rows.Next() {
+		var rule TraceTargetingRule
+		if err := rows.Scan(
+			&rule.Id,
+			&rule.TeamId,
+			&rule.AppId,
+			&rule.Status,
+			&rule.Condition,
+			&rule.CollectionMode,
+			&rule.CreatedAt,
+			&rule.CreatedBy,
+			&rule.UpdatedAt,
+			&rule.UpdatedBy,
+		); err != nil {
+			return nil, err
+		}
+		rules = append(rules, rule)
+	}
+
+	// Populate user emails for all rules
+	if err := populateUserEmailsForTraceRules(ctx, rules); err != nil {
+		return nil, err
+	}
+
+	return rules, nil
+}
+
+// GetSessionTargetingRulesWithFilter provides all
+// session targeting rules.
+func GetSessionTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter) (rules []SessionTargetingRule, err error) {
+	stmt := sqlf.PostgreSQL.From("session_targeting_rules").
+		Select("id").
+		Select("team_id").
+		Select("app_id").
+		Select("status").
+		Select("sampling_rate").
+		Select("condition").
+		Select("created_at").
+		Select("created_by").
+		Select("updated_at").
+		Select("updated_by").
+		Where("app_id = ?", af.AppID)
+
+	stmt.OrderBy("updated_at DESC")
+
+	defer stmt.Close()
+
+	rows, err := server.Server.PgPool.Query(ctx, stmt.String(), stmt.Args()...)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	for rows.Next() {
+		var rule SessionTargetingRule
+		if err := rows.Scan(
+			&rule.Id,
+			&rule.TeamId,
+			&rule.AppId,
+			&rule.Status,
+			&rule.SamplingRate,
+			&rule.Condition,
+			&rule.CreatedAt,
+			&rule.CreatedBy,
+			&rule.UpdatedAt,
+			&rule.UpdatedBy,
+		); err != nil {
+			return nil, err
+		}
+		rules = append(rules, rule)
+	}
+
+	// Populate user emails for all rules
+	if err := populateUserEmailsForSessionRules(ctx, rules); err != nil {
+		return nil, err
+	}
+
+	return rules, nil
+}
+
+// GetEventTargetingRuleWithFilter queries a single
+// event targeting rule by its id.
+func GetEventTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId string) (rule *EventTargetingRule, err error) {
+	stmt := sqlf.PostgreSQL.From("event_targeting_rules").
+		Select("id").
+		Select("team_id").
+		Select("app_id").
+		Select("status").
+		Select("condition").
+		Select("collection_mode").
+		Select("attachment_mode").
+		Select("sampling_rate").
+		Select("created_at").
+		Select("created_by").
+		Select("updated_at").
+		Select("updated_by").
+		Where("app_id = ?", appId).
+		Where("id = toUUID(?)", ruleId)
+
+	defer stmt.Close()
+
+	row := server.Server.PgPool.QueryRow(ctx, stmt.String(), stmt.Args()...)
+
+	var r EventTargetingRule
+	if err := row.Scan(
+		&r.Id,
+		&r.TeamId,
+		&r.AppId,
+		&r.Status,
+		&r.Condition,
+		&r.CollectionMode,
+		&r.AttachmentMode,
+		&r.SamplingRate,
+		&r.CreatedAt,
+		&r.CreatedBy,
+		&r.UpdatedAt,
+		&r.UpdatedBy,
+	); err != nil {
+		return nil, err
+	}
+
+	// Populate user emails
+	rules := []EventTargetingRule{r}
+	if err := populateUserEmailsForEventRules(ctx, rules); err != nil {
+		return nil, err
+	}
+
+	return &rules[0], nil
+}
+
+// GetTraceTargetingRuleById queries a single
+// trace targeting rule by its id.
+func GetTraceTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId string) (rule *TraceTargetingRule, err error) {
+	stmt := sqlf.PostgreSQL.From("trace_targeting_rules").
+		Select("id").
+		Select("team_id").
+		Select("app_id").
+		Select("status").
+		Select("condition").
+		Select("collection_mode").
+		Select("sampling_rate").
+		Select("created_at").
+		Select("created_by").
+		Select("updated_at").
+		Select("updated_by").
+		Where("app_id = ?", appId).
+		Where("id = toUUID(?)", ruleId)
+
+	defer stmt.Close()
+
+	row := server.Server.PgPool.QueryRow(ctx, stmt.String(), stmt.Args()...)
+
+	var r TraceTargetingRule
+	if err := row.Scan(
+		&r.Id,
+		&r.TeamId,
+		&r.AppId,
+		&r.Status,
+		&r.Condition,
+		&r.CollectionMode,
+		&r.SamplingRate,
+		&r.CreatedAt,
+		&r.CreatedBy,
+		&r.UpdatedAt,
+		&r.UpdatedBy,
+	); err != nil {
+		return nil, err
+	}
+
+	// Populate user emails
+	rules := []TraceTargetingRule{r}
+	if err := populateUserEmailsForTraceRules(ctx, rules); err != nil {
+		return nil, err
+	}
+
+	return &rules[0], nil
+}
+
+// GetSessionTargetingRuleById queries a single
+// trace targeting rule by its id.
+func GetSessionTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId string) (rule *SessionTargetingRule, err error) {
+	stmt := sqlf.PostgreSQL.From("session_targeting_rules").
+		Select("id").
+		Select("team_id").
+		Select("app_id").
+		Select("status").
+		Select("condition").
+		Select("sampling_rate").
+		Select("created_at").
+		Select("created_by").
+		Select("updated_at").
+		Select("updated_by").
+		Where("app_id = ?", appId).
+		Where("id = toUUID(?)", ruleId)
+
+	defer stmt.Close()
+
+	row := server.Server.PgPool.QueryRow(ctx, stmt.String(), stmt.Args()...)
+
+	var r SessionTargetingRule
+	if err := row.Scan(
+		&r.Id,
+		&r.TeamId,
+		&r.AppId,
+		&r.Status,
+		&r.Condition,
+		&r.SamplingRate,
+		&r.CreatedAt,
+		&r.CreatedBy,
+		&r.UpdatedAt,
+		&r.UpdatedBy,
+	); err != nil {
+		return nil, err
+	}
+
+	// Populate user emails
+	rules := []SessionTargetingRule{r}
+	if err := populateUserEmailsForSessionRules(ctx, rules); err != nil {
+		return nil, err
+	}
+
+	return &rules[0], nil
+}
+
+// GetEventTargetingConfig creates and returns
+// the config required to render event
+// targeting rule creation page.
+func GetEventTargetingConfig(ctx context.Context, appId uuid.UUID, osName string) (EventTargetingConfig, error) {
+	eventUdAttrs, err := getEventUDAttrKeys(ctx, appId)
+	if err != nil {
+		return EventTargetingConfig{}, err
+	}
+
+	return EventTargetingConfig{
+		Events:        newEventsConfig(osName),
+		SessionAttrs:  newSessionConfig(osName),
+		EventUdAttrs:  eventUdAttrs,
+		OperatorTypes: newOperatorTypes(),
+	}, nil
+}
+
+// GetTraceTargetingConfig creates and returns
+// the config required to render trace
+// targeting rule creation page.
+func GetTraceTargetingConfig(ctx context.Context, appId uuid.UUID, osName string) (TraceTargetingConfig, error) {
+	traceUdAttrs, err := getTraceUDAttrKeys(ctx, appId)
+	if err != nil {
+		return TraceTargetingConfig{}, err
+	}
+
+	traces, err := getTraceNames(ctx, appId)
+	if err != nil {
+		return TraceTargetingConfig{}, err
+	}
+
+	traceConfigs := make([]TraceConfig, 0, len(traces))
+	for _, traceName := range traces {
+		traceConfigs = append(traceConfigs, TraceConfig{
+			Name:       traceName,
+			Attrs:      []AttrConfig{},
+			HasUdAttrs: true,
+		})
+	}
+	return TraceTargetingConfig{
+		Traces:            traceConfigs,
+		SessionAttrs:      newSessionConfig(osName),
+		TraceUDAttributes: traceUdAttrs,
+		OperatorTypes:     newOperatorTypes(),
+	}, nil
+}
+
+// GetSessionTargetingConfig creates and returns
+// the config required to render session
+// targeting rule creation page.
+func GetSessionTargetingConfig(ctx context.Context, appId uuid.UUID, osName string) (SessionTargetingConfig, error) {
+	eventUdAttrs, err := getEventUDAttrKeys(ctx, appId)
+	if err != nil {
+		return SessionTargetingConfig{}, err
+	}
+	traceUdAttrs, err := getTraceUDAttrKeys(ctx, appId)
+	if err != nil {
+		return SessionTargetingConfig{}, err
+	}
+	traces, err := getTraceNames(ctx, appId)
+	if err != nil {
+		return SessionTargetingConfig{}, err
+	}
+	traceConfigs := make([]TraceConfig, 0, len(traces))
+	for _, traceName := range traces {
+		traceConfigs = append(traceConfigs, TraceConfig{
+			Name:       traceName,
+			Attrs:      []AttrConfig{},
+			HasUdAttrs: true,
+		})
+	}
+	return SessionTargetingConfig{
+		Events:            newEventsConfig(osName),
+		Traces:            traceConfigs,
+		EventUdAttrs:      eventUdAttrs,
+		TraceUDAttributes: traceUdAttrs,
+		SessionAttrs:      newSessionConfig(osName),
+		OperatorTypes:     newOperatorTypes(),
+	}, nil
+}
+
+// getTraceNames returns list of root span names for a given app id
+func getTraceNames(ctx context.Context, appId uuid.UUID) (traceNames []string, err error) {
+	stmt := sqlf.
+		Select("distinct toString(span_name)").
+		From("spans").
+		Where("app_id = ?", appId).
+		Where("parent_id = ''").
+		OrderBy("start_time desc")
+
+	defer stmt.Close()
+
+	rows, err := server.Server.ChPool.Query(ctx, stmt.String(), stmt.Args()...)
+	if err != nil {
+		return
+	}
+
+	for rows.Next() {
+		var traceName string
+
+		if err = rows.Scan(&traceName); err != nil {
+			fmt.Println(err)
+			return
+		}
+
+		if err = rows.Err(); err != nil {
+			return
+		}
+
+		traceNames = append(traceNames, traceName)
+	}
+
+	err = rows.Err()
+	return
+
+}
+
+func getEventUDAttrKeys(ctx context.Context, appId uuid.UUID) (attributes []AttrConfig, err error) {
+	var table string = "user_def_attrs"
+	substmt := sqlf.From(table).
+		Select("distinct key").
+		Select("argMax(type, ver) last_inserted_type").
+		Clause("final prewhere app_id = toUUID(?)", appId).
+		GroupBy("key")
+
+	stmt := sqlf.With("last_type", substmt).
+		Select("distinct t.key, t.type").
+		From(table+" t").
+		Join("last_type lt", "t.key = lt.key").
+		Where("t.type = lt.last_inserted_type").
+		OrderBy("key")
+
+	defer stmt.Close()
+
+	rows, err := server.Server.ChPool.Query(ctx, stmt.String(), stmt.Args()...)
+	if err != nil {
+		return
+	}
+
+	for rows.Next() {
+		var attribute AttrConfig
+		if err = rows.Scan(&attribute.Key, &attribute.Type); err != nil {
+			return
+		}
+
+		attributes = append(attributes, attribute)
+	}
+
+	err = rows.Err()
+
+	return
+}
+
+func getTraceUDAttrKeys(ctx context.Context, appId uuid.UUID) (attributes []AttrConfig, err error) {
+	var table string = "span_user_def_attrs"
+	substmt := sqlf.From(table).
+		Select("distinct key").
+		Select("argMax(type, ver) last_inserted_type").
+		Clause("final prewhere app_id = toUUID(?)", appId).
+		GroupBy("key")
+
+	stmt := sqlf.With("last_type", substmt).
+		Select("distinct t.key, t.type").
+		From(table+" t").
+		Join("last_type lt", "t.key = lt.key").
+		Where("t.type = lt.last_inserted_type").
+		OrderBy("key")
+	defer stmt.Close()
+
+	rows, err := server.Server.ChPool.Query(ctx, stmt.String(), stmt.Args()...)
+	if err != nil {
+		return
+	}
+
+	for rows.Next() {
+		var attribute AttrConfig
+		if err = rows.Scan(&attribute.Key, &attribute.Type); err != nil {
+			return
+		}
+
+		attributes = append(attributes, attribute)
+	}
+
+	err = rows.Err()
+	return
+}
+
+// newEventsConfig creates OS-specific
+// events configuration
+func newEventsConfig(osName string) []EventConfig {
+	// Common events for both iOS and Android
+	events := []EventConfig{
+		{
+			Type:       "exception",
+			HasUdAttrs: false,
+			Attrs: []AttrConfig{
+				{Key: "handled", Type: "bool"},
+			},
+		},
+		{
+			Type:       "bug_report",
+			HasUdAttrs: true,
+			Attrs:      []AttrConfig{},
+		},
+		{
+			Type:       "custom",
+			HasUdAttrs: true,
+			Attrs: []AttrConfig{
+				{Key: "name", Type: "string", Hint: "Enter custom event name"},
+			},
+		},
+		{
+			Type:       "screen_view",
+			HasUdAttrs: true,
+			Attrs: []AttrConfig{
+				{Key: "name", Type: "string", Hint: "Enter screen name"},
+			},
+		},
+		{
+			Type:       "http",
+			HasUdAttrs: false,
+			Attrs: []AttrConfig{
+				{Key: "url", Type: "string", Hint: "Enter a HTTP URL"},
+				{Key: "status_code", Type: "int64", Hint: "Enter HTTP status code"},
+			},
+		},
+	}
+
+	// Define platform-specific events
+	androidEvents := []EventConfig{
+		{
+			Type:       "anr",
+			HasUdAttrs: false,
+			Attrs:      []AttrConfig{},
+		},
+		{
+			Type:       "lifecycle_activity",
+			HasUdAttrs: false,
+			Attrs: []AttrConfig{
+				{Key: "class_name", Type: "string", Hint: "Enter Activity class name"},
+			},
+		},
+		{
+			Type:       "lifecycle_fragment",
+			HasUdAttrs: false,
+			Attrs: []AttrConfig{
+				{Key: "class_name", Type: "string", Hint: "Enter Fragment class name"},
+			},
+		},
+	}
+
+	iosEvents := []EventConfig{
+		{
+			Type:       "lifecycle_view_controller",
+			HasUdAttrs: false,
+			Attrs: []AttrConfig{
+				{Key: "class_name", Type: "string", Hint: "Enter View Controller class name"},
+			},
+		},
+		{
+			Type:       "lifecycle_swift_ui",
+			HasUdAttrs: false,
+			Attrs: []AttrConfig{
+				{Key: "class_name", Type: "string", Hint: "Enter Swift View class name"},
+			},
+		},
+	}
+
+	switch opsys.ToFamily(osName) {
+	case opsys.Android:
+		events = append(events, androidEvents...)
+	case opsys.AppleFamily:
+		events = append(events, iosEvents...)
+	default:
+		// Unknown OS - include both Android and iOS events
+		events = append(events, androidEvents...)
+		events = append(events, iosEvents...)
+	}
+
+	// sort values by event type
+	sort.Slice(events, func(i, j int) bool {
+		return events[i].Type < events[j].Type
+	})
+
+	return events
+}
+
+// newEventsConfig creates OS-specific
+// session attributes configuration.
+func newSessionConfig(osName string) []AttrConfig {
+	switch opsys.ToFamily(osName) {
+	case opsys.Android:
+		return []AttrConfig{
+			{Key: "app_build", Type: "string", Hint: "Enter your app's build number"},
+			{Key: "app_version", Type: "string", Hint: "Enter your app's version"},
+			{Key: "device_is_foldable", Type: "bool"},
+			{Key: "device_is_physical", Type: "bool"},
+			{Key: "device_locale", Type: "string", Hint: "Enter a locale like en_US, fr_FR"},
+			{Key: "device_low_power_mode", Type: "bool"},
+			{Key: "device_manufacturer", Type: "string", Hint: "E.g. Apple, Samsung, Google"},
+			{Key: "device_model", Type: "string", Hint: "E.g. Redmi Go, Pixel 4a "},
+			{Key: "device_name", Type: "string", Hint: "E.g. sunfish, tiare"},
+			{Key: "device_thermal_throttling_enabled", Type: "bool"},
+			{Key: "device_type", Type: "string", Hint: "E.g. phone or tablet"},
+			{Key: "installation_id", Type: "string", Hint: "Enter an installation ID"},
+			{Key: "user_id", Type: "string", Hint: "Enter a user ID"},
+			{Key: "os_version", Type: "string", Hint: "Enter API level like 21, 36"},
+		}
+	case opsys.AppleFamily:
+		return []AttrConfig{
+			{Key: "app_build", Type: "string", Hint: "Enter your app's build ID"},
+			{Key: "app_version", Type: "string", Hint: "Enter your app's version"},
+			{Key: "device_is_foldable", Type: "bool"},
+			{Key: "device_is_physical", Type: "bool"},
+			{Key: "device_locale", Type: "string", Hint: "Enter a locale like en_US, fr_FR"},
+			{Key: "device_low_power_mode", Type: "bool"},
+			{Key: "device_model", Type: "string", Hint: "E.g. iPhone 17"},
+			{Key: "device_thermal_throttling_enabled", Type: "bool"},
+			{Key: "device_type", Type: "string", Hint: "E.g. phone or tablet"},
+			{Key: "installation_id", Type: "string", Hint: "Enter an installation Id"},
+			{Key: "os_version", Type: "string", Hint: "E.g. 18.3.1, 18.4.1"},
+			{Key: "user_id", Type: "string", Hint: "Enter a user ID"},
+		}
+	default:
+		return []AttrConfig{}
+	}
+}
+
+func newOperatorTypes() OperatorTypes {
+	return OperatorTypes{
+		Bool:    []string{"eq", "neq"},
+		Float64: []string{"eq", "neq", "gt", "lt", "gte", "lte"},
+		Int64:   []string{"eq", "neq", "gt", "lt", "gte", "lte"},
+		String:  []string{"eq", "neq", "contains", "startsWith"},
+	}
+}
+
+// populateUserEmailsForEventRules fetches and
+// populates email addresses
+func populateUserEmailsForEventRules(ctx context.Context, rules []EventTargetingRule) error {
+	if len(rules) == 0 {
+		return nil
+	}
+
+	// Extract unique user IDs from all rules
+	idLUT := make(map[uuid.UUID]bool)
+	for _, rule := range rules {
+		idLUT[rule.CreatedBy] = true
+		idLUT[rule.UpdatedBy] = true
+	}
+
+	if len(idLUT) > 0 {
+		ids := make([]uuid.UUID, 0, len(idLUT))
+		for id := range idLUT {
+			ids = append(ids, id)
+		}
+
+		emailLUT, err := GetEmails(ctx, ids)
+		if err != nil {
+			return fmt.Errorf("failed to fetch user emails: %w", err)
+		}
+
+		// Populate emails for all rules
+		for i := range rules {
+			rules[i].CreatedByEmail = emailLUT[rules[i].CreatedBy]
+			rules[i].UpdatedByEmail = emailLUT[rules[i].UpdatedBy]
+		}
+	}
+
+	return nil
+}
+
+// populateUserEmailsForTraceRules fetches and
+// populates email addresses
+func populateUserEmailsForTraceRules(ctx context.Context, rules []TraceTargetingRule) error {
+	if len(rules) == 0 {
+		return nil
+	}
+
+	// Extract unique user IDs from all rules
+	idLUT := make(map[uuid.UUID]bool)
+	for _, rule := range rules {
+		idLUT[rule.CreatedBy] = true
+		idLUT[rule.UpdatedBy] = true
+	}
+
+	if len(idLUT) > 0 {
+		ids := make([]uuid.UUID, 0, len(idLUT))
+		for id := range idLUT {
+			ids = append(ids, id)
+		}
+
+		emailLUT, err := GetEmails(ctx, ids)
+		if err != nil {
+			return fmt.Errorf("failed to fetch user emails: %w", err)
+		}
+
+		// Populate emails for all rules
+		for i := range rules {
+			rules[i].CreatedByEmail = emailLUT[rules[i].CreatedBy]
+			rules[i].UpdatedByEmail = emailLUT[rules[i].UpdatedBy]
+		}
+	}
+
+	return nil
+}
+
+// populateUserEmailsForSessionRules fetches and
+// populates email addresses for
+// one or more session rules
+func populateUserEmailsForSessionRules(ctx context.Context, rules []SessionTargetingRule) error {
+	if len(rules) == 0 {
+		return nil
+	}
+
+	// Extract unique user IDs from all rules
+	idLUT := make(map[uuid.UUID]bool)
+	for _, rule := range rules {
+		idLUT[rule.CreatedBy] = true
+		idLUT[rule.UpdatedBy] = true
+	}
+
+	if len(idLUT) > 0 {
+		ids := make([]uuid.UUID, 0, len(idLUT))
+		for id := range idLUT {
+			ids = append(ids, id)
+		}
+
+		emailLUT, err := GetEmails(ctx, ids)
+		if err != nil {
+			return fmt.Errorf("failed to fetch user emails: %w", err)
+		}
+
+		// Populate emails for all rules
+		for i := range rules {
+			rules[i].CreatedByEmail = emailLUT[rules[i].CreatedBy]
+			rules[i].UpdatedByEmail = emailLUT[rules[i].UpdatedBy]
+		}
+	}
+
+	return nil
+}
diff --git a/backend/api/measure/user.go b/backend/api/measure/user.go
index b764f9977..6180b47f8 100644
--- a/backend/api/measure/user.go
+++ b/backend/api/measure/user.go
@@ -326,3 +326,47 @@ func NewUser(name, email string) (user *User) {
 
 	return
 }
+
+// GetEmails retrives email address for userIDs.
+func GetEmails(ctx context.Context, userIDs []uuid.UUID) (map[uuid.UUID]string, error) {
+	if len(userIDs) == 0 {
+		return make(map[uuid.UUID]string), nil
+	}
+
+	// Build the IN clause with quoted UUIDs
+	var idStrings []string
+	for _, id := range userIDs {
+		idStrings = append(idStrings, fmt.Sprintf("'%s'", id.String()))
+	}
+	idList := strings.Join(idStrings, ", ")
+
+	stmt := sqlf.PostgreSQL.
+		From("users").
+		Select("id").
+		Select("email").
+		Where(fmt.Sprintf("id IN (%s)", idList))
+
+	defer stmt.Close()
+
+	rows, err := server.Server.PgPool.Query(ctx, stmt.String())
+	if err != nil {
+		return nil, fmt.Errorf("failed to query user emails: %w", err)
+	}
+	defer rows.Close()
+
+	emailLUT := make(map[uuid.UUID]string)
+	for rows.Next() {
+		var userID uuid.UUID
+		var email string
+		if err := rows.Scan(&userID, &email); err != nil {
+			return nil, fmt.Errorf("failed to scan user email: %w", err)
+		}
+		emailLUT[userID] = email
+	}
+
+	if err := rows.Err(); err != nil {
+		return nil, fmt.Errorf("error iterating user email rows: %w", err)
+	}
+
+	return emailLUT, nil
+}

From 2ccc82ba0255061b8cf248b4208dd7d579adf3be Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Fri, 7 Nov 2025 16:17:46 +0530
Subject: [PATCH 49/98] feat(frontend): remove pagination stale code

---
 frontend/dashboard/app/[teamId]/data/page.tsx | 40 ++-----------------
 frontend/dashboard/app/api/api_calls.ts       | 27 ++-----------
 2 files changed, 7 insertions(+), 60 deletions(-)

diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index 549d621a6..8aea9a26e 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -20,9 +20,6 @@ interface PageState {
     eventTargetingRules: EventTargetingResponse
     traceTargetingRules: TraceTargetingResponse
     sessionTargetingRules: SessionTargetingResponse
-    eventPaginationOffset: number
-    tracePaginationOffset: number
-    sessionPaginationOffset: number
     editingDefaultRule: 'event' | 'trace' | null
 }
 
@@ -52,9 +49,6 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         eventTargetingRules: emptyEventTargetingResponse,
         traceTargetingRules: emptyTraceTargetingResponse,
         sessionTargetingRules: emptySessionTargetingResponse,
-        eventPaginationOffset: 0,
-        tracePaginationOffset: 0,
-        sessionPaginationOffset: 0,
         editingDefaultRule: null,
     }
 
@@ -74,9 +68,9 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         })
 
         const [eventResult, traceResult, sessionResult] = await Promise.all([
-            fetchEventTargetingRulesFromServer(pageState.filters.app!.id, paginationLimit, pageState.eventPaginationOffset),
-            fetchTraceTargetingRulesFromServer(pageState.filters.app!.id, paginationLimit, pageState.tracePaginationOffset),
-            fetchSessionTargetingRulesFromServer(pageState.filters.app!.id, paginationLimit, pageState.sessionPaginationOffset)
+            fetchEventTargetingRulesFromServer(pageState.filters.app!.id),
+            fetchTraceTargetingRulesFromServer(pageState.filters.app!.id),
+            fetchSessionTargetingRulesFromServer(pageState.filters.app!.id)
         ])
 
         if (eventResult.status === EventTargetingApiStatus.Error || traceResult.status === TraceTargetingApiStatus.Error) {
@@ -110,36 +104,10 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                 filters: updatedFilters,
                 eventTargetingRules: emptyEventTargetingResponse,
                 traceTargetingRules: emptyTraceTargetingResponse,
-                eventPaginationOffset: 0,
-                tracePaginationOffset: 0,
             })
         }
     }
 
-    const handleEventNextPage = () => {
-        updatePageState({ eventPaginationOffset: pageState.eventPaginationOffset + paginationLimit })
-    }
-
-    const handleEventPrevPage = () => {
-        updatePageState({ eventPaginationOffset: Math.max(0, pageState.eventPaginationOffset - paginationLimit) })
-    }
-
-    const handleTraceNextPage = () => {
-        updatePageState({ tracePaginationOffset: pageState.tracePaginationOffset + paginationLimit })
-    }
-
-    const handleTracePrevPage = () => {
-        updatePageState({ tracePaginationOffset: Math.max(0, pageState.tracePaginationOffset - paginationLimit) })
-    }
-
-    const handleSessionNextPage = () => {
-        updatePageState({ sessionPaginationOffset: pageState.sessionPaginationOffset + paginationLimit })
-    }
-
-    const handleSessionPrevPage = () => {
-        updatePageState({ sessionPaginationOffset: Math.max(0, pageState.sessionPaginationOffset - paginationLimit) })
-    }
-
     useEffect(() => {
         if (!pageState.filters.ready) {
             return
@@ -150,7 +118,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
 
         // TODO: Re-enable API call when ready
         // getDataFilters()
-    }, [pageState.filters, pageState.eventPaginationOffset, pageState.tracePaginationOffset, pageState.sessionPaginationOffset])
+    }, [pageState.filters])
 
     const isLoading = () => {
         return pageState.eventTargetingApiStatus === EventTargetingApiStatus.Loading ||
diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index 01c73f194..df8f10ddb 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -2806,15 +2806,8 @@ export const fetchAlertsOverviewFromServer = async (
 
 export const fetchEventTargetingRulesFromServer = async (
   appId: String,
-  limit: number,
-  offset: number,
 ) => {
-  let url = `/api/apps/${appId}/targetingRules/events`
-
-  const searchParams = new URLSearchParams()
-  searchParams.append("limit", String(limit))
-  searchParams.append("offset", String(offset))
-  url += `?${searchParams.toString()}`
+  const url = `/api/apps/${appId}/targetingRules/events`
 
   try {
     const res = await measureAuth.fetchMeasure(url)
@@ -2837,15 +2830,8 @@ export const fetchEventTargetingRulesFromServer = async (
 
 export const fetchTraceTargetingRulesFromServer = async (
   appId: String,
-  limit: number,
-  offset: number,
 ) => {
-  let url = `/api/apps/${appId}/targetingRules/traces`
-
-  const searchParams = new URLSearchParams()
-  searchParams.append("limit", String(limit))
-  searchParams.append("offset", String(offset))
-  url += `?${searchParams.toString()}`
+  const url = `/api/apps/${appId}/targetingRules/traces`
 
   try {
     const res = await measureAuth.fetchMeasure(url)
@@ -2868,15 +2854,8 @@ export const fetchTraceTargetingRulesFromServer = async (
 
 export const fetchSessionTargetingRulesFromServer = async (
   appId: String,
-  limit: number,
-  offset: number,
 ) => {
-  let url = `/api/apps/${appId}/targetingRules/sessions`
-
-  const searchParams = new URLSearchParams()
-  searchParams.append("limit", String(limit))
-  searchParams.append("offset", String(offset))
-  url += `?${searchParams.toString()}`
+  const url = `/api/apps/${appId}/targetingRules/sessions`
 
   try {
     const res = await measureAuth.fetchMeasure(url)

From 151637efcdbb1a2ea8ba9f1abeda68f09a6af521 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Fri, 7 Nov 2025 16:38:20 +0530
Subject: [PATCH 50/98] feat(backend): temporarily disable filters validation

---
 backend/api/measure/app.go                    | 57 ++++++------
 frontend/dashboard/app/[teamId]/data/page.tsx | 50 +++++------
 .../targeting/event_trace_rule_builder.tsx    | 86 +++++++++----------
 3 files changed, 96 insertions(+), 97 deletions(-)

diff --git a/backend/api/measure/app.go b/backend/api/measure/app.go
index 548066d94..0aedcfe35 100644
--- a/backend/api/measure/app.go
+++ b/backend/api/measure/app.go
@@ -6506,15 +6506,16 @@ func GetEventTargetingRules(c *gin.Context) {
 		return
 	}
 
-	msg := "event targeting rules request validation failed"
-	if err := af.Validate(); err != nil {
-		fmt.Println(msg, err)
-		c.JSON(http.StatusBadRequest, gin.H{
-			"error":   msg,
-			"details": err.Error(),
-		})
-		return
-	}
+	// TODO: review how to handle validation for targeting rules
+	// msg := "event targeting rules request validation failed"
+	// if err := af.Validate(); err != nil {
+	// 	fmt.Println(msg, err)
+	// 	c.JSON(http.StatusBadRequest, gin.H{
+	// 		"error":   msg,
+	// 		"details": err.Error(),
+	// 	})
+	// 	return
+	// }
 
 	app := App{
 		ID: &id,
@@ -6606,15 +6607,16 @@ func GetTraceTargetingRules(c *gin.Context) {
 		return
 	}
 
-	msg := "trace targeting rules request validation failed"
-	if err := af.Validate(); err != nil {
-		fmt.Println(msg, err)
-		c.JSON(http.StatusBadRequest, gin.H{
-			"error":   msg,
-			"details": err.Error(),
-		})
-		return
-	}
+	// TODO: review how to handle validation for targeting rules
+	// msg := "trace targeting rules request validation failed"
+	// if err := af.Validate(); err != nil {
+	// 	fmt.Println(msg, err)
+	// 	c.JSON(http.StatusBadRequest, gin.H{
+	// 		"error":   msg,
+	// 		"details": err.Error(),
+	// 	})
+	// 	return
+	// }
 
 	app := App{
 		ID: &id,
@@ -6706,15 +6708,16 @@ func GetSessionTargetingRules(c *gin.Context) {
 		return
 	}
 
-	msg := "session targeting rules request validation failed"
-	if err := af.Validate(); err != nil {
-		fmt.Println(msg, err)
-		c.JSON(http.StatusBadRequest, gin.H{
-			"error":   msg,
-			"details": err.Error(),
-		})
-		return
-	}
+	// TODO: review how to handle validation for targeting rules
+	// msg := "session targeting rules request validation failed"
+	// if err := af.Validate(); err != nil {
+	// 	fmt.Println(msg, err)
+	// 	c.JSON(http.StatusBadRequest, gin.H{
+	// 		"error":   msg,
+	// 		"details": err.Error(),
+	// 	})
+	// 	return
+	// }
 
 	app := App{
 		ID: &id,
diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index 8aea9a26e..951304a9b 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { EventTargetingApiStatus, EventTargetingResponse, emptyEventTargetingResponse, fetchEventTargetingRulesFromServer, TraceTargetingApiStatus, TraceTargetingResponse, emptyTraceTargetingResponse, fetchTraceTargetingRulesFromServer, FilterSource, EventTargetingCollectionConfig, TraceTargetingCollectionConfig, SessionTargetingResponse, emptySessionTargetingResponse, fetchSessionTargetingRulesFromServer } from '@/app/api/api_calls'
+import { EventTargetingApiStatus, EventTargetingResponse, fetchEventTargetingRulesFromServer, TraceTargetingApiStatus, TraceTargetingResponse, emptyTraceTargetingResponse, fetchTraceTargetingRulesFromServer, FilterSource, EventTargetingCollectionConfig, TraceTargetingCollectionConfig, SessionTargetingResponse, emptySessionTargetingResponse, fetchSessionTargetingRulesFromServer } from '@/app/api/api_calls'
 import Filters, { AppVersionsInitialSelectionType, defaultFilters } from '@/app/components/filters'
 import LoadingBar from '@/app/components/loading_bar'
 import { useRouter } from 'next/navigation'
@@ -17,9 +17,9 @@ interface PageState {
     eventTargetingApiStatus: EventTargetingApiStatus
     traceTargetingApiStatus: TraceTargetingApiStatus
     filters: typeof defaultFilters
-    eventTargetingRules: EventTargetingResponse
-    traceTargetingRules: TraceTargetingResponse
-    sessionTargetingRules: SessionTargetingResponse
+    eventTargetingRules: EventTargetingResponse | null
+    traceTargetingRules: TraceTargetingResponse | null
+    sessionTargetingRules: SessionTargetingResponse | null
     editingDefaultRule: 'event' | 'trace' | null
 }
 
@@ -46,9 +46,9 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         eventTargetingApiStatus: EventTargetingApiStatus.Success,
         traceTargetingApiStatus: TraceTargetingApiStatus.Success,
         filters: defaultFilters,
-        eventTargetingRules: emptyEventTargetingResponse,
-        traceTargetingRules: emptyTraceTargetingResponse,
-        sessionTargetingRules: emptySessionTargetingResponse,
+        eventTargetingRules: null,
+        traceTargetingRules: null,
+        sessionTargetingRules: null,
         editingDefaultRule: null,
     }
 
@@ -61,7 +61,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         })
     }
 
-    const getAllDataFilters = async () => {
+    const loadAllRules = async () => {
         updatePageState({
             eventTargetingApiStatus: EventTargetingApiStatus.Loading,
             traceTargetingApiStatus: TraceTargetingApiStatus.Loading
@@ -91,9 +91,9 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         updatePageState({
             eventTargetingApiStatus: eventStatus,
             traceTargetingApiStatus: traceStatus,
-            eventTargetingRules: eventResult.data || emptyEventTargetingResponse,
-            traceTargetingRules: traceResult.data || emptyTraceTargetingResponse,
-            sessionTargetingRules: sessionResult.data || emptySessionTargetingResponse
+            eventTargetingRules: eventResult.data,
+            traceTargetingRules: traceResult.data,
+            sessionTargetingRules: sessionResult.data,
         })
     }
 
@@ -102,8 +102,8 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         if (pageState.filters.ready !== updatedFilters.ready || pageState.filters.serialisedFilters !== updatedFilters.serialisedFilters) {
             updatePageState({
                 filters: updatedFilters,
-                eventTargetingRules: emptyEventTargetingResponse,
-                traceTargetingRules: emptyTraceTargetingResponse,
+                eventTargetingRules: null,
+                traceTargetingRules: null,
             })
         }
     }
@@ -116,8 +116,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         // update url
         router.replace(`?${pageState.filters.serialisedFilters!}`, { scroll: false })
 
-        // TODO: Re-enable API call when ready
-        // getDataFilters()
+        loadAllRules()
     }, [pageState.filters])
 
     const isLoading = () => {
@@ -138,18 +137,18 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         return pageState.filters.ready && eventReady && traceReady
     }
 
-    const eventsDefaultRule = pageState.eventTargetingRules.result.default;
-    const eventsOverideRules = pageState.eventTargetingRules.result.overrides;
-    const traceDefaultRule = pageState.traceTargetingRules.result.default;
-    const traceOverrideRules = pageState.traceTargetingRules.result.overrides;
-    const sessionTargetingRules = pageState.sessionTargetingRules.results;
+    const eventsDefaultRule = pageState.eventTargetingRules?.result.default;
+    const eventsOverideRules = pageState.eventTargetingRules?.result.overrides ?? [];
+    const traceDefaultRule = pageState.traceTargetingRules?.result.default;
+    const traceOverrideRules = pageState.traceTargetingRules?.result.overrides ?? [];
+    const sessionTargetingRules = pageState.sessionTargetingRules?.results ?? [];
 
     const handleEditRule = (dataFilter: typeof eventsOverideRules[0] | typeof traceOverrideRules[0] | typeof sessionTargetingRules[0], filterType: 'event' | 'trace' | 'session') => {
         router.push(`/${params.teamId}/data/${pageState.filters.app!.id}/${filterType}/${dataFilter.id}/edit`)
     }
 
     const handleDefaultRuleUpdateSuccess = (collectionMode: 'sample_rate' | 'timeline_only' | 'disable', sampleRate?: number) => {
-        if (pageState.editingDefaultRule === 'event') {
+        if (pageState.editingDefaultRule === 'event' && pageState.eventTargetingRules) {
             const updatedEventRules = {
                 ...pageState.eventTargetingRules,
                 result: {
@@ -165,7 +164,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                 }
             }
             updatePageState({ eventTargetingRules: updatedEventRules })
-        } else if (pageState.editingDefaultRule === 'trace') {
+        } else if (pageState.editingDefaultRule === 'trace' && pageState.traceTargetingRules) {
             const updatedTraceRules = {
                 ...pageState.traceTargetingRules,
                 result: {
@@ -199,7 +198,10 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         <Button
                             variant="outline"
                             className="font-display border border-black select-none"
-                            disabled={pageState.eventTargetingApiStatus === EventTargetingApiStatus.Loading}
+                            disabled={
+                                pageState.eventTargetingApiStatus !== EventTargetingApiStatus.Success ||
+                                pageState.traceTargetingApiStatus !== TraceTargetingApiStatus.Success
+                            }
                         >
                             <Plus /> Create Rule
                         </Button>
@@ -338,7 +340,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                 </div>}
 
             {/* Default Rule Edit Dialog */}
-            {pageState.editingDefaultRule && (
+            {pageState.editingDefaultRule && eventsDefaultRule && traceDefaultRule && (
                 <EditDefaultRuleDialog
                     isOpen={true}
                     onClose={() => updatePageState({ editingDefaultRule: null })}
diff --git a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
index f775e0bf0..3d144461b 100644
--- a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
@@ -15,10 +15,6 @@ import {
     fetchTraceTargetingRuleFromServer,
     fetchEventTargetingConfigFromServer,
     fetchTraceTargetingConfigFromServer,
-    emptyEventTargetingRule,
-    emptyTraceTargetingRule,
-    emptyEventTargetingConfigResponse,
-    emptyTraceTargetingConfigResponse
 } from '@/app/api/api_calls'
 import LoadingBar from '@/app/components/loading_bar'
 
@@ -81,31 +77,30 @@ export default function EventTraceRuleBuilder({
         }))
 
         if (type === 'event') {
-            // const configResult = await fetchEventTargetingConfigFromServer(appId)
-            // if (configResult.status === EventTargetingConfigApiStatus.Error) {
-            //     setPageState(prev => ({
-            //         ...prev,
-            //         configApiStatus: EventTargetingConfigApiStatus.Error
-            //     }))
-            //     return
-            // }
+            const configResult = await fetchEventTargetingConfigFromServer(appId)
+            if (configResult.status === EventTargetingConfigApiStatus.Error) {
+                setPageState(prev => ({
+                    ...prev,
+                    configApiStatus: EventTargetingConfigApiStatus.Error
+                }))
+                return
+            }
 
             // Fetch rule data if in edit mode
             let ruleData = null
             let ruleApiStatus = EventTargetingRuleApiStatus.Success
             if (mode === 'edit' && ruleId) {
-                // const ruleResult = await fetchEventTargetingRuleFromServer(appId, ruleId)
-                // if (ruleResult.status === EventTargetingRuleApiStatus.Error) {
-                //     setPageState(prev => ({
-                //         ...prev,
-                //         ruleApiStatus: EventTargetingRuleApiStatus.Error,
-                //         configApiStatus: EventTargetingConfigApiStatus.Success,
-                //         configData: configResult.data
-                //     }))
-                //     return
-                // }
-                // ruleData = ruleResult.data
-                ruleData = emptyEventTargetingRule
+                const ruleResult = await fetchEventTargetingRuleFromServer(appId, ruleId)
+                if (ruleResult.status === EventTargetingRuleApiStatus.Error) {
+                    setPageState(prev => ({
+                        ...prev,
+                        ruleApiStatus: EventTargetingRuleApiStatus.Error,
+                        configApiStatus: EventTargetingConfigApiStatus.Success,
+                        configData: configResult.data
+                    }))
+                    return
+                }
+                ruleData = ruleResult.data
             }
 
             const initialFormState = {
@@ -117,38 +112,37 @@ export default function EventTraceRuleBuilder({
             const initialState = JSON.stringify(initialFormState)
             setPageState({
                 ruleData,
-                configData: emptyEventTargetingConfigResponse,
+                configData: configResult.data,
                 ruleApiStatus,
                 configApiStatus: EventTargetingConfigApiStatus.Success,
                 initialRuleState: initialState,
                 currentRuleState: initialState
             })
         } else {
-            // const configResult = await fetchTraceTargetingConfigFromServer(appId)
-            // if (configResult.status === TraceTargetingConfigApiStatus.Error) {
-            //     setPageState(prev => ({
-            //         ...prev,
-            //         configApiStatus: TraceTargetingConfigApiStatus.Error
-            //     }))
-            //     return
-            // }
+            const configResult = await fetchTraceTargetingConfigFromServer(appId)
+            if (configResult.status === TraceTargetingConfigApiStatus.Error) {
+                setPageState(prev => ({
+                    ...prev,
+                    configApiStatus: TraceTargetingConfigApiStatus.Error
+                }))
+                return
+            }
 
             // Fetch rule data if in edit mode
             let ruleData = null
             let ruleApiStatus = TraceTargetingRuleApiStatus.Success
             if (mode === 'edit' && ruleId) {
-                // const ruleResult = await fetchTraceTargetingRuleFromServer(appId, ruleId)
-                // if (ruleResult.status === TraceTargetingRuleApiStatus.Error) {
-                //     setPageState(prev => ({
-                //         ...prev,
-                //         ruleApiStatus: TraceTargetingRuleApiStatus.Error,
-                //         configApiStatus: TraceTargetingConfigApiStatus.Success,
-                //         configData: configResult.data
-                //     }))
-                //     return
-                // }
-                // ruleData = ruleResult.data
-                ruleData = emptyTraceTargetingRule
+                const ruleResult = await fetchTraceTargetingRuleFromServer(appId, ruleId)
+                if (ruleResult.status === TraceTargetingRuleApiStatus.Error) {
+                    setPageState(prev => ({
+                        ...prev,
+                        ruleApiStatus: TraceTargetingRuleApiStatus.Error,
+                        configApiStatus: TraceTargetingConfigApiStatus.Success,
+                        configData: configResult.data
+                    }))
+                    return
+                }
+                ruleData = ruleResult.data
             }
 
             const initialFormState = {
@@ -160,7 +154,7 @@ export default function EventTraceRuleBuilder({
             const initialState = JSON.stringify(initialFormState)
             setPageState({
                 ruleData,
-                configData: emptyTraceTargetingConfigResponse,
+                configData: ruleData,
                 ruleApiStatus,
                 configApiStatus: TraceTargetingConfigApiStatus.Success,
                 initialRuleState: initialState,

From 10ea971e6fababefa72dcffdef051cacaf7ac6ad Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Fri, 7 Nov 2025 17:10:21 +0530
Subject: [PATCH 51/98] feat(backend): add targeting rule tables

---
 ...347_create_event_targeting_rules_table.sql | 32 +++++++++++++++++++
 ...408_create_trace_targeting_rules_table.sql | 28 ++++++++++++++++
 ...3_create_session_targeting_rules_table.sql | 26 +++++++++++++++
 3 files changed, 86 insertions(+)
 create mode 100644 self-host/postgres/20251107111347_create_event_targeting_rules_table.sql
 create mode 100644 self-host/postgres/20251107111408_create_trace_targeting_rules_table.sql
 create mode 100644 self-host/postgres/20251107111413_create_session_targeting_rules_table.sql

diff --git a/self-host/postgres/20251107111347_create_event_targeting_rules_table.sql b/self-host/postgres/20251107111347_create_event_targeting_rules_table.sql
new file mode 100644
index 000000000..837dd6329
--- /dev/null
+++ b/self-host/postgres/20251107111347_create_event_targeting_rules_table.sql
@@ -0,0 +1,32 @@
+-- migrate:up
+create table if not exists measure.event_targeting_rules (
+    id uuid primary key not null,
+    team_id uuid not null,
+    app_id uuid not null,
+    sampling_rate numeric(9, 6) not null,
+    condition text not null,
+    collection_mode text not null,
+    take_screenshot boolean not null default false,
+    take_layout_snapshot boolean not null default false,
+    created_at timestamptz not null default now(),
+    created_by uuid not null,
+    updated_at timestamptz not null default now(),
+    updated_by uuid not null
+);
+
+comment on table measure.event_targeting_rules is 'table storing event targeting rules';
+comment on column measure.event_targeting_rules.team_id is 'id of team to which the rule belongs';
+comment on column measure.event_targeting_rules.app_id is 'app_id of the app to which the rule belongs';
+comment on column measure.event_targeting_rules.id is 'id of the rule';
+comment on column measure.event_targeting_rules.sampling_rate is 'the percentage sampling rate applied';
+comment on column measure.event_targeting_rules.condition is 'the condition represented as a CEL expression';
+comment on column measure.event_targeting_rules.collection_mode is 'the collection mode for the event (e.g., "sampled", "session_timeline", "none")';
+comment on column measure.event_targeting_rules.take_screenshot is 'whether to take a screenshot for the event';
+comment on column measure.event_targeting_rules.take_layout_snapshot is 'whether to take a layout snapshot for the event';
+comment on column measure.event_targeting_rules.created_at is 'utc timestamp at the time of rule creation';
+comment on column measure.event_targeting_rules.created_by is ' id of the user who created the rule';
+comment on column measure.event_targeting_rules.updated_at is 'utc timestamp at the time of rule update';
+comment on column measure.event_targeting_rules.updated_by is 'id of the user who updated the rule';
+
+-- migrate:down
+drop table if exists measure.event_targeting_rules;
\ No newline at end of file
diff --git a/self-host/postgres/20251107111408_create_trace_targeting_rules_table.sql b/self-host/postgres/20251107111408_create_trace_targeting_rules_table.sql
new file mode 100644
index 000000000..c968bc7da
--- /dev/null
+++ b/self-host/postgres/20251107111408_create_trace_targeting_rules_table.sql
@@ -0,0 +1,28 @@
+-- migrate:up
+create table if not exists measure.trace_targeting_rules (
+    id uuid primary key not null,
+    team_id uuid not null,
+    app_id uuid not null,
+    sampling_rate numeric(9, 6) not null,
+    condition text not null,
+    collection_mode text not null,
+    created_at timestamptz not null default now(),
+    created_by uuid not null,
+    updated_at timestamptz not null default now(),
+    updated_by uuid not null
+);
+
+comment on table measure.trace_targeting_rules is 'table storing trace targeting rules';
+comment on column measure.trace_targeting_rules.team_id is 'id of team to which the rule belongs';
+comment on column measure.trace_targeting_rules.app_id is 'app_id of the app to which the rule belongs';
+comment on column measure.trace_targeting_rules.id is 'id of the rule';
+comment on column measure.trace_targeting_rules.sampling_rate is 'the percentage sampling rate applied';
+comment on column measure.trace_targeting_rules.condition is 'the condition represented as a CEL expression';
+comment on column measure.trace_targeting_rules.collection_mode is 'the collection mode for the trace (e.g., "sampled", "session_timeline", "none")';
+comment on column measure.trace_targeting_rules.created_at is 'utc timestamp at the time of rule creation';
+comment on column measure.trace_targeting_rules.created_by is ' id of the user who created the rule';
+comment on column measure.trace_targeting_rules.updated_at is 'utc timestamp at the time of rule update';
+comment on column measure.trace_targeting_rules.updated_by is 'id of the user who updated the rule';
+
+-- migrate:down
+drop table if exists measure.trace_targeting_rules;
\ No newline at end of file
diff --git a/self-host/postgres/20251107111413_create_session_targeting_rules_table.sql b/self-host/postgres/20251107111413_create_session_targeting_rules_table.sql
new file mode 100644
index 000000000..e1142b3fb
--- /dev/null
+++ b/self-host/postgres/20251107111413_create_session_targeting_rules_table.sql
@@ -0,0 +1,26 @@
+-- migrate:up
+create table if not exists measure.session_targeting_rules (
+    id uuid primary key not null,
+    team_id uuid not null,
+    app_id uuid not null,
+    sampling_rate numeric(9, 6) not null,
+    condition text not null,
+    created_at timestamptz not null default now(),
+    created_by uuid not null,
+    updated_at timestamptz not null default now(),
+    updated_by uuid not null
+);
+
+comment on table measure.session_targeting_rules is 'table storing session targeting rules';
+comment on column measure.session_targeting_rules.team_id is 'id of team to which the rule belongs';
+comment on column measure.session_targeting_rules.app_id is 'app_id of the app to which the rule belongs';
+comment on column measure.session_targeting_rules.id is 'id of the rule';
+comment on column measure.session_targeting_rules.sampling_rate is 'the percentage sampling rate applied';
+comment on column measure.session_targeting_rules.condition is 'the condition represented as a CEL expression';
+comment on column measure.session_targeting_rules.created_at is 'utc timestamp at the time of rule creation';
+comment on column measure.session_targeting_rules.created_by is ' id of the user who created the rule';
+comment on column measure.session_targeting_rules.updated_at is 'utc timestamp at the time of rule update';
+comment on column measure.session_targeting_rules.updated_by is 'id of the user who updated the rule';
+
+-- migrate:down
+drop table if exists measure.session_targeting_rules;
\ No newline at end of file

From c76ee5806ff32463230890d500fa4a0c28c41198 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Sat, 8 Nov 2025 08:24:13 +0530
Subject: [PATCH 52/98] feat(backend): fix targeting schemas

---
 backend/api/measure/targeting_rules.go | 54 +++++++++++---------------
 1 file changed, 22 insertions(+), 32 deletions(-)

diff --git a/backend/api/measure/targeting_rules.go b/backend/api/measure/targeting_rules.go
index 66e05d233..1c09fd1a3 100644
--- a/backend/api/measure/targeting_rules.go
+++ b/backend/api/measure/targeting_rules.go
@@ -15,20 +15,20 @@ import (
 
 // Represents a event targting rule.
 type EventTargetingRule struct {
-	Id             uuid.UUID `json:"id"`
-	TeamId         uuid.UUID `json:"team_id"`
-	AppId          uuid.UUID `json:"app_id"`
-	Status         int       `json:"status"`
-	Condition      string    `json:"condition"`
-	CollectionMode string    `json:"collection_mode"`
-	AttachmentMode string    `json:"attachment_mode"`
-	SamplingRate   float32   `json:"sampling_rate"`
-	CreatedAt      time.Time `json:"created_at"`
-	CreatedBy      uuid.UUID `json:"-"`
-	CreatedByEmail string    `json:"created_by"`
-	UpdatedAt      time.Time `json:"updated_at"`
-	UpdatedBy      uuid.UUID `json:"-"`
-	UpdatedByEmail string    `json:"updated_by"`
+	Id                 uuid.UUID `json:"id"`
+	TeamId             uuid.UUID `json:"team_id"`
+	AppId              uuid.UUID `json:"app_id"`
+	Condition          string    `json:"condition"`
+	CollectionMode     string    `json:"collection_mode"`
+	TakeScreenshot     bool      `json:"take_screenshot"`
+	TakeLayoutSnapshot bool      `json:"take_layout_snapshot"`
+	SamplingRate       float32   `json:"sampling_rate"`
+	CreatedAt          time.Time `json:"created_at"`
+	CreatedBy          uuid.UUID `json:"-"`
+	CreatedByEmail     string    `json:"created_by"`
+	UpdatedAt          time.Time `json:"updated_at"`
+	UpdatedBy          uuid.UUID `json:"-"`
+	UpdatedByEmail     string    `json:"updated_by"`
 }
 
 // Represents a trace targting rule.
@@ -36,7 +36,6 @@ type TraceTargetingRule struct {
 	Id             uuid.UUID `json:"id"`
 	TeamId         uuid.UUID `json:"team_id"`
 	AppId          uuid.UUID `json:"app_id"`
-	Status         int       `json:"status"`
 	Condition      string    `json:"condition"`
 	CollectionMode string    `json:"collection_mode"`
 	SamplingRate   float32   `json:"sampling_rate"`
@@ -53,7 +52,6 @@ type SessionTargetingRule struct {
 	Id             uuid.UUID `json:"id"`
 	TeamId         uuid.UUID `json:"team_id"`
 	AppId          uuid.UUID `json:"app_id"`
-	Status         int       `json:"status"`
 	SamplingRate   float32   `json:"sampling_rate"`
 	Condition      string    `json:"condition"`
 	CreatedAt      time.Time `json:"created_at"`
@@ -133,10 +131,10 @@ func GetEventTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter)
 		Select("id").
 		Select("team_id").
 		Select("app_id").
-		Select("status").
 		Select("condition").
 		Select("collection_mode").
-		Select("attachment_mode").
+		Select("take_screenshot").
+		Select("take_layout_snapshot").
 		Select("created_at").
 		Select("created_by").
 		Select("updated_at").
@@ -159,10 +157,10 @@ func GetEventTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter)
 			&rule.Id,
 			&rule.TeamId,
 			&rule.AppId,
-			&rule.Status,
 			&rule.Condition,
 			&rule.CollectionMode,
-			&rule.AttachmentMode,
+			&rule.TakeScreenshot,
+			&rule.TakeLayoutSnapshot,
 			&rule.CreatedAt,
 			&rule.CreatedBy,
 			&rule.UpdatedAt,
@@ -188,7 +186,6 @@ func GetTraceTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter)
 		Select("id").
 		Select("team_id").
 		Select("app_id").
-		Select("status").
 		Select("condition").
 		Select("collection_mode").
 		Select("created_at").
@@ -213,7 +210,6 @@ func GetTraceTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter)
 			&rule.Id,
 			&rule.TeamId,
 			&rule.AppId,
-			&rule.Status,
 			&rule.Condition,
 			&rule.CollectionMode,
 			&rule.CreatedAt,
@@ -241,7 +237,6 @@ func GetSessionTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilte
 		Select("id").
 		Select("team_id").
 		Select("app_id").
-		Select("status").
 		Select("sampling_rate").
 		Select("condition").
 		Select("created_at").
@@ -266,7 +261,6 @@ func GetSessionTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilte
 			&rule.Id,
 			&rule.TeamId,
 			&rule.AppId,
-			&rule.Status,
 			&rule.SamplingRate,
 			&rule.Condition,
 			&rule.CreatedAt,
@@ -294,10 +288,10 @@ func GetEventTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId str
 		Select("id").
 		Select("team_id").
 		Select("app_id").
-		Select("status").
 		Select("condition").
 		Select("collection_mode").
-		Select("attachment_mode").
+		Select("take_screenshot").
+		Select("take_layout_snapshot").
 		Select("sampling_rate").
 		Select("created_at").
 		Select("created_by").
@@ -315,10 +309,10 @@ func GetEventTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId str
 		&r.Id,
 		&r.TeamId,
 		&r.AppId,
-		&r.Status,
 		&r.Condition,
 		&r.CollectionMode,
-		&r.AttachmentMode,
+		&r.TakeScreenshot,
+		&r.TakeLayoutSnapshot,
 		&r.SamplingRate,
 		&r.CreatedAt,
 		&r.CreatedBy,
@@ -344,7 +338,6 @@ func GetTraceTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId str
 		Select("id").
 		Select("team_id").
 		Select("app_id").
-		Select("status").
 		Select("condition").
 		Select("collection_mode").
 		Select("sampling_rate").
@@ -364,7 +357,6 @@ func GetTraceTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId str
 		&r.Id,
 		&r.TeamId,
 		&r.AppId,
-		&r.Status,
 		&r.Condition,
 		&r.CollectionMode,
 		&r.SamplingRate,
@@ -392,7 +384,6 @@ func GetSessionTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId s
 		Select("id").
 		Select("team_id").
 		Select("app_id").
-		Select("status").
 		Select("condition").
 		Select("sampling_rate").
 		Select("created_at").
@@ -411,7 +402,6 @@ func GetSessionTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId s
 		&r.Id,
 		&r.TeamId,
 		&r.AppId,
-		&r.Status,
 		&r.Condition,
 		&r.SamplingRate,
 		&r.CreatedAt,

From 543f503c2a91ce3cb910495304bbdb12f03d4b8c Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Sat, 8 Nov 2025 08:24:28 +0530
Subject: [PATCH 53/98] feat(frontend): remove redundant variable

---
 frontend/dashboard/app/[teamId]/data/page.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index 951304a9b..e013a336b 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -23,8 +23,6 @@ interface PageState {
     editingDefaultRule: 'event' | 'trace' | null
 }
 
-const paginationLimit = 5
-
 const getCollectionConfigDisplay = (collectionConfig: EventTargetingCollectionConfig | TraceTargetingCollectionConfig, type: 'event' | 'trace'): string => {
     const typeName = type === 'event' ? 'events' : 'traces'
     switch (collectionConfig.mode) {

From 00f892e5e87808c7c628d5848c38a21879fa4bee Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Sat, 8 Nov 2025 15:38:44 +0530
Subject: [PATCH 54/98] feat(backend): implement CRUD APIs for event, trace,
 session targeting

---
 backend/api/main.go                    |   9 +
 backend/api/measure/app.go             | 668 ++++++++++++++++++++++++-
 backend/api/measure/targeting_rules.go | 231 +++++++++
 3 files changed, 905 insertions(+), 3 deletions(-)

diff --git a/backend/api/main.go b/backend/api/main.go
index 8414edc5f..259886fc1 100644
--- a/backend/api/main.go
+++ b/backend/api/main.go
@@ -124,6 +124,15 @@ func main() {
 		apps.GET(":id/targetingRules/events/config", measure.GetEventTargetingRuleConfig)
 		apps.GET(":id/targetingRules/traces/config", measure.GetTraceTargetingRuleConfig)
 		apps.GET(":id/targetingRules/sessions/config", measure.GetSessionTargetingRuleConfig)
+		apps.POST(":id/targetingRules/events", measure.CreateEventTargetingRule)
+		apps.POST(":id/targetingRules/traces", measure.CreateTraceTargetingRule)
+		apps.POST(":id/targetingRules/sessions", measure.CreateSessionTargetingRule)
+		apps.PATCH(":id/targetingRules/events/:ruleId", measure.UpdateEventTargetingRule)
+		apps.PATCH(":id/targetingRules/traces/:ruleId", measure.UpdateTraceTargetingRule)
+		apps.PATCH(":id/targetingRules/sessions/:ruleId", measure.UpdateSessionTargetingRule)
+		apps.DELETE(":id/targetingRules/events/:ruleId", measure.DeleteEventTargetingRule)
+		apps.DELETE(":id/targetingRules/traces/:ruleId", measure.DeleteTraceTargetingRule)
+		apps.DELETE(":id/targetingRules/sessions/:ruleId", measure.DeleteSessionTargetingRule)
 	}
 
 	teams := r.Group("/teams", measure.ValidateAccessToken())
diff --git a/backend/api/measure/app.go b/backend/api/measure/app.go
index 0aedcfe35..43f84e1df 100644
--- a/backend/api/measure/app.go
+++ b/backend/api/measure/app.go
@@ -7104,7 +7104,7 @@ func GetTraceTargetingRuleConfig(c *gin.Context) {
 	stmt := sqlf.PostgreSQL.From("apps").
 		Select("os_name").
 		Where("id = ?", app.ID)
-		
+
 	defer stmt.Close()
 
 	var osName *string
@@ -7113,12 +7113,12 @@ func GetTraceTargetingRuleConfig(c *gin.Context) {
 		msg := `failed to fetch app details`
 		fmt.Println(msg, err)
 		status := http.StatusInternalServerError
-		
+
 		if errors.Is(err, pgx.ErrNoRows) {
 			status = http.StatusNotFound
 			msg = fmt.Sprintf(`app with id %q does not exist`, app.ID)
 		}
-		
+
 		c.JSON(status, gin.H{
 			"error": msg,
 		})
@@ -7201,3 +7201,665 @@ func GetSessionTargetingRuleConfig(c *gin.Context) {
 
 	c.JSON(http.StatusOK, config)
 }
+
+func CreateEventTargetingRule(c *gin.Context) {
+	ctx := c.Request.Context()
+	id, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		msg := `id invalid or missing`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	var payload EventTargetingRulePayload
+	if err := c.ShouldBindJSON(&payload); err != nil {
+		msg := `failed to parse create event targeting rule json payload`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	app := App{
+		ID: &id,
+	}
+	team, err := app.getTeam(ctx)
+	if err != nil {
+		msg := "failed to get team from app id"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+	if team == nil {
+		msg := fmt.Sprintf("no team exists for app [%s]", app.ID)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	userId := c.GetString("userId")
+
+	// TODO: check for ScopeAppWrite when implemented
+	okTeam, err := PerformAuthz(userId, team.ID.String(), *ScopeTeamRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	okApp, err := PerformAuthz(userId, team.ID.String(), *ScopeAppRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	if !okTeam || !okApp {
+		msg := `you are not authorized to access this app`
+		c.JSON(http.StatusForbidden, gin.H{"error": msg})
+		return
+	}
+
+	ruleId, err := CreateEventTargetingRuleForApp(ctx, id, app.TeamId, payload, userId)
+	if err != nil {
+		msg := "failed to create event targeting rule"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	c.JSON(http.StatusCreated, gin.H{"id": ruleId})
+}
+
+func CreateTraceTargetingRule(c *gin.Context) {
+	ctx := c.Request.Context()
+	id, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		msg := `id invalid or missing`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	var payload TraceTargetingRulePayload
+	if err := c.ShouldBindJSON(&payload); err != nil {
+		msg := `failed to parse create trace targeting rule json payload`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	app := App{
+		ID: &id,
+	}
+	team, err := app.getTeam(ctx)
+	if err != nil {
+		msg := "failed to get team from app id"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+	if team == nil {
+		msg := fmt.Sprintf("no team exists for app [%s]", app.ID)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	userId := c.GetString("userId")
+
+	// TODO: check for ScopeAppWrite when implemented
+	okTeam, err := PerformAuthz(userId, team.ID.String(), *ScopeTeamRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	okApp, err := PerformAuthz(userId, team.ID.String(), *ScopeAppRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	if !okTeam || !okApp {
+		msg := `you are not authorized to access this app`
+		c.JSON(http.StatusForbidden, gin.H{"error": msg})
+		return
+	}
+
+	ruleId, err := CreateTraceTargetingRuleForApp(ctx, id, app.TeamId, payload, userId)
+	if err != nil {
+		msg := "failed to create trace targeting rule"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	c.JSON(http.StatusCreated, gin.H{"id": ruleId})
+}
+
+func CreateSessionTargetingRule(c *gin.Context) {
+	ctx := c.Request.Context()
+	id, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		msg := `id invalid or missing`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	var payload SessionTargetingRulePayload
+	if err := c.ShouldBindJSON(&payload); err != nil {
+		msg := `failed to parse create session targeting rule json payload`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	app := App{
+		ID: &id,
+	}
+	team, err := app.getTeam(ctx)
+	if err != nil {
+		msg := "failed to get team from app id"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+	if team == nil {
+		msg := fmt.Sprintf("no team exists for app [%s]", app.ID)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	userId := c.GetString("userId")
+
+	// TODO: check for ScopeAppWrite when implemented
+	okTeam, err := PerformAuthz(userId, team.ID.String(), *ScopeTeamRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	okApp, err := PerformAuthz(userId, team.ID.String(), *ScopeAppRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	if !okTeam || !okApp {
+		msg := `you are not authorized to access this app`
+		c.JSON(http.StatusForbidden, gin.H{"error": msg})
+		return
+	}
+
+	ruleId, err := CreateSessionTargetingRuleForApp(ctx, id, app.TeamId, payload, userId)
+	if err != nil {
+		msg := "failed to create session targeting rule"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	c.JSON(http.StatusCreated, gin.H{"id": ruleId})
+}
+
+func UpdateEventTargetingRule(c *gin.Context) {
+	ctx := c.Request.Context()
+	id, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		msg := `id invalid or missing`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	ruleId := c.Param("ruleId")
+	var payload EventTargetingRulePayload
+	if err := c.ShouldBindJSON(&payload); err != nil {
+		msg := `failed to parse update event targeting rule json payload`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	app := App{
+		ID: &id,
+	}
+	team, err := app.getTeam(ctx)
+	if err != nil {
+		msg := "failed to get team from app id"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+	if team == nil {
+		msg := fmt.Sprintf("no team exists for app [%s]", app.ID)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	userId := c.GetString("userId")
+	okTeam, err := PerformAuthz(userId, team.ID.String(), *ScopeTeamRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	okApp, err := PerformAuthz(userId, team.ID.String(), *ScopeAppRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	if !okTeam || !okApp {
+		msg := `you are not authorized to access this app`
+		c.JSON(http.StatusForbidden, gin.H{"error": msg})
+		return
+	}
+
+	err = UpdateEventTargetingRuleForApp(ctx, id, ruleId, payload, userId)
+	if err != nil {
+		msg := "failed to update event targeting rule"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	c.Status(http.StatusNoContent)
+}
+
+func UpdateTraceTargetingRule(c *gin.Context) {
+	ctx := c.Request.Context()
+	id, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		msg := `id invalid or missing`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	ruleId := c.Param("ruleId")
+	var payload TraceTargetingRulePayload
+	if err := c.ShouldBindJSON(&payload); err != nil {
+		msg := `failed to parse update trace targeting rule json payload`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	app := App{
+		ID: &id,
+	}
+	team, err := app.getTeam(ctx)
+	if err != nil {
+		msg := "failed to get team from app id"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+	if team == nil {
+		msg := fmt.Sprintf("no team exists for app [%s]", app.ID)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	userId := c.GetString("userId")
+	okTeam, err := PerformAuthz(userId, team.ID.String(), *ScopeTeamRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	okApp, err := PerformAuthz(userId, team.ID.String(), *ScopeAppRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	if !okTeam || !okApp {
+		msg := `you are not authorized to access this app`
+		c.JSON(http.StatusForbidden, gin.H{"error": msg})
+		return
+	}
+
+	err = UpdateTraceTargetingRuleForApp(ctx, id, ruleId, payload, userId)
+	if err != nil {
+		msg := "failed to update trace targeting rule"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	c.Status(http.StatusNoContent)
+}
+
+func UpdateSessionTargetingRule(c *gin.Context) {
+	ctx := c.Request.Context()
+	id, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		msg := `id invalid or missing`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	ruleId := c.Param("ruleId")
+	var payload SessionTargetingRulePayload
+	if err := c.ShouldBindJSON(&payload); err != nil {
+		msg := `failed to parse update session targeting rule json payload`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	app := App{
+		ID: &id,
+	}
+	team, err := app.getTeam(ctx)
+	if err != nil {
+		msg := "failed to get team from app id"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+	if team == nil {
+		msg := fmt.Sprintf("no team exists for app [%s]", app.ID)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	userId := c.GetString("userId")
+	okTeam, err := PerformAuthz(userId, team.ID.String(), *ScopeTeamRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	okApp, err := PerformAuthz(userId, team.ID.String(), *ScopeAppRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	if !okTeam || !okApp {
+		msg := `you are not authorized to access this app`
+		c.JSON(http.StatusForbidden, gin.H{"error": msg})
+		return
+	}
+
+	err = UpdateSessionTargetingRuleForApp(ctx, id, ruleId, payload, userId)
+	if err != nil {
+		msg := "failed to update session targeting rule"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	c.Status(http.StatusNoContent)
+}
+
+func DeleteEventTargetingRule(c *gin.Context) {
+	ctx := c.Request.Context()
+	id, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		msg := `id invalid or missing`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	ruleId := c.Param("ruleId")
+
+	app := App{
+		ID: &id,
+	}
+	team, err := app.getTeam(ctx)
+	if err != nil {
+		msg := "failed to get team from app id"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+	if team == nil {
+		msg := fmt.Sprintf("no team exists for app [%s]", app.ID)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	userId := c.GetString("userId")
+	okTeam, err := PerformAuthz(userId, team.ID.String(), *ScopeTeamRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	okApp, err := PerformAuthz(userId, team.ID.String(), *ScopeAppRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	if !okTeam || !okApp {
+		msg := `you are not authorized to access this app`
+		c.JSON(http.StatusForbidden, gin.H{"error": msg})
+		return
+	}
+
+	err = DeleteEventTargetingRuleForApp(ctx, id, ruleId)
+	if err != nil {
+		msg := "failed to delete event targeting rule"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	c.Status(http.StatusNoContent)
+}
+
+func DeleteTraceTargetingRule(c *gin.Context) {
+	ctx := c.Request.Context()
+	id, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		msg := `id invalid or missing`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	ruleId := c.Param("ruleId")
+	app := App{
+		ID: &id,
+	}
+	team, err := app.getTeam(ctx)
+	if err != nil {
+		msg := "failed to get team from app id"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+	if team == nil {
+		msg := fmt.Sprintf("no team exists for app [%s]", app.ID)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	userId := c.GetString("userId")
+	okTeam, err := PerformAuthz(userId, team.ID.String(), *ScopeTeamRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	okApp, err := PerformAuthz(userId, team.ID.String(), *ScopeAppRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	if !okTeam || !okApp {
+		msg := `you are not authorized to access this app`
+		c.JSON(http.StatusForbidden, gin.H{"error": msg})
+		return
+	}
+
+	err = DeleteTraceTargetingRuleForApp(ctx, id, ruleId)
+	if err != nil {
+		msg := "failed to delete trace targeting rule"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	c.Status(http.StatusNoContent)
+}
+
+func DeleteSessionTargetingRule(c *gin.Context) {
+	ctx := c.Request.Context()
+	id, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		msg := `id invalid or missing`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	ruleId := c.Param("ruleId")
+
+	app := App{
+		ID: &id,
+	}
+	team, err := app.getTeam(ctx)
+	if err != nil {
+		msg := "failed to get team from app id"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+	if team == nil {
+		msg := fmt.Sprintf("no team exists for app [%s]", app.ID)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	userId := c.GetString("userId")
+	okTeam, err := PerformAuthz(userId, team.ID.String(), *ScopeTeamRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	okApp, err := PerformAuthz(userId, team.ID.String(), *ScopeAppRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	if !okTeam || !okApp {
+		msg := `you are not authorized to access this app`
+		c.JSON(http.StatusForbidden, gin.H{"error": msg})
+		return
+	}
+	err = DeleteSessionTargetingRuleForApp(ctx, id, ruleId)
+	if err != nil {
+		msg := "failed to delete session targeting rule"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	c.Status(http.StatusNoContent)
+}
+
+func DeleteSessionTargetingRules(c *gin.Context) {
+	ctx := c.Request.Context()
+	id, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		msg := `id invalid or missing`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	ruleId := c.Param("ruleId")
+	app := App{
+		ID: &id,
+	}
+	team, err := app.getTeam(ctx)
+	if err != nil {
+		msg := "failed to get team from app id"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+	if team == nil {
+		msg := fmt.Sprintf("no team exists for app [%s]", app.ID)
+		c.JSON(http.StatusBadRequest, gin.H{"error": msg})
+		return
+	}
+
+	userId := c.GetString("userId")
+	okTeam, err := PerformAuthz(userId, team.ID.String(), *ScopeTeamRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	okApp, err := PerformAuthz(userId, team.ID.String(), *ScopeAppRead)
+	if err != nil {
+		msg := `failed to perform authorization`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	if !okTeam || !okApp {
+		msg := `you are not authorized to access this app`
+		c.JSON(http.StatusForbidden, gin.H{"error": msg})
+		return
+	}
+
+	err = DeleteSessionTargetingRuleForApp(ctx, id, ruleId)
+	if err != nil {
+		msg := "failed to delete session targeting rule"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	c.Status(http.StatusNoContent)
+}
diff --git a/backend/api/measure/targeting_rules.go b/backend/api/measure/targeting_rules.go
index 1c09fd1a3..41dd07bff 100644
--- a/backend/api/measure/targeting_rules.go
+++ b/backend/api/measure/targeting_rules.go
@@ -124,6 +124,25 @@ type SessionTargetingConfig struct {
 	OperatorTypes     OperatorTypes `json:"operator_types"`
 }
 
+type EventTargetingRulePayload struct {
+	Condition          string  `json:"condition"`
+	CollectionMode     string  `json:"collection_mode"`
+	TakeScreenshot     bool    `json:"take_screenshot"`
+	TakeLayoutSnapshot bool    `json:"take_layout_snapshot"`
+	SamplingRate       float32 `json:"sampling_rate"`
+}
+
+type TraceTargetingRulePayload struct {
+	Condition      string  `json:"condition"`
+	CollectionMode string  `json:"collection_mode"`
+	SamplingRate   float32 `json:"sampling_rate"`
+}
+
+type SessionTargetingRulePayload struct {
+	Condition    string  `json:"condition"`
+	SamplingRate float32 `json:"sampling_rate"`
+}
+
 // GetEventTargetingRules provides all
 // event targeting rules.
 func GetEventTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter) (rules []EventTargetingRule, err error) {
@@ -502,6 +521,218 @@ func GetSessionTargetingConfig(ctx context.Context, appId uuid.UUID, osName stri
 	}, nil
 }
 
+func CreateEventTargetingRuleForApp(ctx context.Context, appId uuid.UUID, teamId uuid.UUID, payload EventTargetingRulePayload, createdBy string) (ruleId uuid.UUID, err error) {
+	now := time.Now()
+	createdByUUID, err := uuid.Parse(createdBy)
+	if err != nil {
+		return uuid.Nil, fmt.Errorf("invalid createdBy UUID: %w", err)
+	}
+
+	stmt := sqlf.PostgreSQL.InsertInto("event_targeting_rules").
+		Set("team_id", teamId).
+		Set("app_id", appId).
+		Set("condition", payload.Condition).
+		Set("collection_mode", payload.CollectionMode).
+		Set("take_screenshot", payload.TakeScreenshot).
+		Set("take_layout_snapshot", payload.TakeLayoutSnapshot).
+		Set("sampling_rate", payload.SamplingRate).
+		Set("created_at", now).
+		Set("created_by", createdByUUID).
+		Set("updated_at", now).
+		Set("updated_by", createdByUUID).
+		Returning("id")
+
+	defer stmt.Close()
+
+	row := server.Server.PgPool.QueryRow(ctx, stmt.String(), stmt.Args()...)
+	if err := row.Scan(&ruleId); err != nil {
+		return uuid.Nil, err
+	}
+	return ruleId, nil
+}
+
+func UpdateEventTargetingRuleForApp(ctx context.Context, appId uuid.UUID, ruleId string, payload EventTargetingRulePayload, updatedBy string) error {
+	updatedByUUID, err := uuid.Parse(updatedBy)
+	if err != nil {
+		return fmt.Errorf("invalid updatedBy UUID: %w", err)
+	}
+
+	stmt := sqlf.PostgreSQL.Update("event_targeting_rules").
+		Set("condition", payload.Condition).
+		Set("collection_mode", payload.CollectionMode).
+		Set("take_screenshot", payload.TakeScreenshot).
+		Set("take_layout_snapshot", payload.TakeLayoutSnapshot).
+		Set("sampling_rate", payload.SamplingRate).
+		Set("updated_at", time.Now()).
+		Set("updated_by", updatedByUUID).
+		Where("app_id = ?", appId).
+		Where("id = toUUID(?)", ruleId)
+
+	defer stmt.Close()
+
+	result, err := server.Server.PgPool.Exec(ctx, stmt.String(), stmt.Args()...)
+	if err != nil {
+		return err
+	}
+
+	if result.RowsAffected() == 0 {
+		return fmt.Errorf("event targeting rule not found")
+	}
+
+	return nil
+}
+
+func CreateTraceTargetingRuleForApp(ctx context.Context, appId uuid.UUID, teamId uuid.UUID, payload TraceTargetingRulePayload, createdBy string) (ruleId uuid.UUID, err error) {
+	now := time.Now()
+	createdByUUID, err := uuid.Parse(createdBy)
+	if err != nil {
+		return uuid.Nil, fmt.Errorf("invalid createdBy UUID: %w", err)
+	}
+	stmt := sqlf.PostgreSQL.InsertInto("trace_targeting_rules").
+		Set("team_id", teamId).
+		Set("app_id", appId).
+		Set("condition", payload.Condition).
+		Set("collection_mode", payload.CollectionMode).
+		Set("sampling_rate", payload.SamplingRate).
+		Set("created_at", now).
+		Set("created_by", createdByUUID).
+		Set("updated_at", now).
+		Set("updated_by", createdByUUID).
+		Returning("id")
+	defer stmt.Close()
+	row := server.Server.PgPool.QueryRow(ctx, stmt.String(), stmt.Args()...)
+	if err := row.Scan(&ruleId); err != nil {
+		return uuid.Nil, err
+	}
+	return ruleId, nil
+}
+
+func UpdateTraceTargetingRuleForApp(ctx context.Context, appId uuid.UUID, ruleId string, payload TraceTargetingRulePayload, updatedBy string) error {
+	updatedByUUID, err := uuid.Parse(updatedBy)
+	if err != nil {
+		return fmt.Errorf("invalid updatedBy UUID: %w", err)
+	}
+
+	stmt := sqlf.PostgreSQL.Update("trace_targeting_rules").
+		Set("condition", payload.Condition).
+		Set("collection_mode", payload.CollectionMode).
+		Set("sampling_rate", payload.SamplingRate).
+		Set("updated_at", time.Now()).
+		Set("updated_by", updatedByUUID).
+		Where("app_id = ?", appId).
+		Where("id = toUUID(?)", ruleId)
+
+	defer stmt.Close()
+
+	result, err := server.Server.PgPool.Exec(ctx, stmt.String(), stmt.Args()...)
+	if err != nil {
+		return err
+	}
+
+	if result.RowsAffected() == 0 {
+		return fmt.Errorf("trace targeting rule not found")
+	}
+
+	return nil
+}
+
+func CreateSessionTargetingRuleForApp(ctx context.Context, appId uuid.UUID, teamId uuid.UUID, payload SessionTargetingRulePayload, createdBy string) (ruleId uuid.UUID, err error) {
+	now := time.Now()
+	createdByUUID, err := uuid.Parse(createdBy)
+	if err != nil {
+		return uuid.Nil, fmt.Errorf("invalid createdBy UUID: %w", err)
+	}
+	stmt := sqlf.PostgreSQL.InsertInto("session_targeting_rules").
+		Set("team_id", teamId).
+		Set("app_id", appId).
+		Set("condition", payload.Condition).
+		Set("sampling_rate", payload.SamplingRate).
+		Set("created_at", now).
+		Set("created_by", createdByUUID).
+		Set("updated_at", now).
+		Set("updated_by", createdByUUID).
+		Returning("id")
+	defer stmt.Close()
+	row := server.Server.PgPool.QueryRow(ctx, stmt.String(), stmt.Args()...)
+	if err := row.Scan(&ruleId); err != nil {
+		return uuid.Nil, err
+	}
+	return ruleId, nil
+}
+
+func UpdateSessionTargetingRuleForApp(ctx context.Context, appId uuid.UUID, ruleId string, payload SessionTargetingRulePayload, updatedBy string) error {
+	updatedByUUID, err := uuid.Parse(updatedBy)
+	if err != nil {
+		return fmt.Errorf("invalid updatedBy UUID: %w", err)
+	}
+
+	stmt := sqlf.PostgreSQL.Update("session_targeting_rules").
+		Set("condition", payload.Condition).
+		Set("sampling_rate", payload.SamplingRate).
+		Set("updated_at", time.Now()).
+		Set("updated_by", updatedByUUID).
+		Where("app_id = ?", appId).
+		Where("id = toUUID(?)", ruleId)
+
+	defer stmt.Close()
+
+	result, err := server.Server.PgPool.Exec(ctx, stmt.String(), stmt.Args()...)
+	if err != nil {
+		return err
+	}
+
+	if result.RowsAffected() == 0 {
+		return fmt.Errorf("session targeting rule not found")
+	}
+
+	return nil
+}
+
+func DeleteEventTargetingRuleForApp(ctx context.Context, appId uuid.UUID, ruleId string) error {
+	stmt := sqlf.PostgreSQL.DeleteFrom("event_targeting_rules").
+		Where("app_id = ?", appId).
+		Where("id = toUUID(?)", ruleId)
+	defer stmt.Close()
+	result, err := server.Server.PgPool.Exec(ctx, stmt.String(), stmt.Args()...)
+	if err != nil {
+		return err
+	}
+	if result.RowsAffected() == 0 {
+		return fmt.Errorf("event targeting rule not found")
+	}
+	return nil
+}
+
+func DeleteTraceTargetingRuleForApp(ctx context.Context, appId uuid.UUID, ruleId string) error {
+	stmt := sqlf.PostgreSQL.DeleteFrom("trace_targeting_rules").
+		Where("app_id = ?", appId).
+		Where("id = toUUID(?)", ruleId)
+	defer stmt.Close()
+	result, err := server.Server.PgPool.Exec(ctx, stmt.String(), stmt.Args()...)
+	if err != nil {
+		return err
+	}
+	if result.RowsAffected() == 0 {
+		return fmt.Errorf("trace targeting rule not found")
+	}
+	return nil
+}
+
+func DeleteSessionTargetingRuleForApp(ctx context.Context, appId uuid.UUID, ruleId string) error {
+	stmt := sqlf.PostgreSQL.DeleteFrom("session_targeting_rules").
+		Where("app_id = ?", appId).
+		Where("id = toUUID(?)", ruleId)
+	defer stmt.Close()
+	result, err := server.Server.PgPool.Exec(ctx, stmt.String(), stmt.Args()...)
+	if err != nil {
+		return err
+	}
+	if result.RowsAffected() == 0 {
+		return fmt.Errorf("session targeting rule not found")
+	}
+	return nil
+}
+
 // getTraceNames returns list of root span names for a given app id
 func getTraceNames(ctx context.Context, appId uuid.UUID) (traceNames []string, err error) {
 	stmt := sqlf.

From 1b41c905761c23d1b8e0d6a7dc0ff61e78740f48 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Sat, 8 Nov 2025 16:15:17 +0530
Subject: [PATCH 55/98] feat(backend): integrate dashboard with APIs

---
 frontend/dashboard/app/api/api_calls.ts       | 570 +++++++++---------
 .../targeting/event_trace_rule_builder.tsx    |  89 ++-
 2 files changed, 376 insertions(+), 283 deletions(-)

diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index df8f10ddb..83cb0d021 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -419,6 +419,69 @@ export enum SessionTargetingConfigApiStatus {
   Cancelled,
 }
 
+export enum CreateEventTargetingRuleApiStatus {
+  Loading,
+  Success,
+  Error,
+  Cancelled,
+}
+
+export enum CreateTraceTargetingRuleApiStatus {
+  Loading,
+  Success,
+  Error,
+  Cancelled,
+}
+
+export enum CreateSessionTargetingRuleApiStatus {
+  Loading,
+  Success,
+  Error,
+  Cancelled,
+}
+
+export enum UpdateEventTargetingRuleApiStatus {
+  Loading,
+  Success,
+  Error,
+  Cancelled,
+}
+
+export enum UpdateTraceTargetingRuleApiStatus {
+  Loading,
+  Success,
+  Error,
+  Cancelled,
+}
+
+export enum UpdateSessionTargetingRuleApiStatus {
+  Loading,
+  Success,
+  Error,
+  Cancelled,
+}
+
+export enum DeleteEventTargetingRuleApiStatus {
+  Loading,
+  Success,
+  Error,
+  Cancelled,
+}
+
+export enum DeleteTraceTargetingRuleApiStatus {
+  Loading,
+  Success,
+  Error,
+  Cancelled,
+}
+
+export enum DeleteSessionTargetingRuleApiStatus {
+  Loading,
+  Success,
+  Error,
+  Cancelled,
+}
+
 export enum SessionType {
   All = "All Sessions",
   Crashes = "Crash Sessions",
@@ -1104,13 +1167,29 @@ export type EventTargetingCollectionConfig =
   | { mode: 'timeline_only' }
   | { mode: 'disable' };
 
-export type EventTargetingAttachmentConfig = 'layout_snapshot' | 'screenshot' | 'none';
+export type EventTargetingRuleRequest = {
+  rule: string,
+  collection_config: EventTargetingCollectionConfig,
+  take_screenshot: boolean,
+  take_layout_snapshot: boolean,
+}
+
+export type TraceTargetingRuleRequest = {
+  rule: string,
+  collection_config: TraceTargetingCollectionConfig,
+}
+
+export type SessionTargetingRuleRequest = {
+  rule: string,
+  sampling_rate: number,
+}
 
 export type EventTargetingRule = {
   id: string,
   rule: string,
   collection_config: EventTargetingCollectionConfig,
-  attachment_config: EventTargetingAttachmentConfig,
+  take_screenshot: boolean,
+  take_layout_snapshot: boolean,
   updated_at: string,
   updated_by: string,
 }
@@ -1197,278 +1276,6 @@ export type TraceTargetingConfigResponse = {
     operator_types: TargetingOperatorConfig;
   };
 }
-
-export const emptyEventTargetingResponse: EventTargetingResponse = {
-  meta: {
-    next: false,
-    previous: false,
-  },
-  result: {
-    default: {
-      id: "df-global-001",
-      rule: 'event_type == "*"',
-      collection_config: { mode: 'timeline_only' },
-      attachment_config: 'none',
-      updated_at: "2024-01-01T00:00:00Z",
-      updated_by: "system@example.com",
-    },
-    overrides: [
-      {
-        id: "df-events-001",
-        rule: 'event.event_type == "crash"',
-        collection_config: { mode: 'sample_rate', sample_rate: 5 },
-        attachment_config: 'screenshot',
-        updated_at: "2024-01-01T00:00:00Z",
-        updated_by: "system@example.com",
-      },
-      {
-        id: "df-events-002",
-        rule: 'event.event_type == "anr"',
-        collection_config: { mode: 'disable' },
-        attachment_config: 'none',
-        updated_at: "2024-01-01T00:00:00Z",
-        updated_by: "system@example.com",
-      },
-      {
-        id: "df-events-003",
-        rule: 'event.event_type == "click" && session.app_version == "1.2.0"',
-        collection_config: { mode: 'sample_rate', sample_rate: 25 },
-        attachment_config: 'layout_snapshot',
-        updated_at: "2024-01-02T10:30:00Z",
-        updated_by: "user@example.com",
-      },
-      {
-        id: "df-events-004",
-        rule: 'event.event_type == "navigation" && session.user_id == "test_user"',
-        collection_config: { mode: 'sample_rate', sample_rate: 100 },
-        attachment_config: 'none',
-        updated_at: "2024-01-03T14:15:00Z",
-        updated_by: "admin@example.com",
-      },
-      {
-        id: "df-events-005",
-        rule: 'event.event_type == "custom_event" && event.handled == true',
-        collection_config: { mode: 'timeline_only' },
-        attachment_config: 'screenshot',
-        updated_at: "2024-01-04T09:45:00Z",
-        updated_by: "developer@example.com",
-      },
-      {
-        id: "df-events-006",
-        rule: 'event.event_type == "lifecycle_activity"',
-        collection_config: { mode: 'sample_rate', sample_rate: 10 },
-        attachment_config: 'none',
-        updated_at: "2024-01-05T16:20:00Z",
-        updated_by: "tester@example.com",
-      },
-      {
-        id: "df-events-007",
-        rule: 'event.event_type == "network_error" && session.os_version >= "11.0"',
-        collection_config: { mode: 'sample_rate', sample_rate: 50 },
-        attachment_config: 'layout_snapshot',
-        updated_at: "2024-01-06T11:00:00Z",
-        updated_by: "qa@example.com",
-      }
-    ]
-  },
-}
-
-export const emptyTraceTargetingResponse: TraceTargetingResponse = {
-  meta: {
-    next: false,
-    previous: false,
-  },
-  result: {
-    default: {
-      id: "df-global-traces-001",
-      rule: 'trace_type == "*"',
-      collection_config: { mode: 'timeline_only' },
-      updated_at: "2024-01-01T00:00:00Z",
-      updated_by: "system@example.com",
-    },
-    overrides: [
-      {
-        id: "df-001",
-        rule: 'trace.trace_name == "root"',
-        collection_config: { mode: 'sample_rate', sample_rate: 10 },
-        updated_at: "2024-01-01T00:00:00Z",
-        updated_by: "system@example.com",
-      },
-      {
-        id: "df-002",
-        rule: 'trace.trace_name == "activity.onCreate"',
-        collection_config: { mode: 'disable' },
-        updated_at: "2024-01-01T00:00:00Z",
-        updated_by: "system@example.com",
-      },
-      {
-        id: "df-003",
-        rule: 'trace.trace_name == "network.request" && session.app_version == "2.0.0"',
-        collection_config: { mode: 'sample_rate', sample_rate: 30 },
-        updated_at: "2024-01-02T08:45:00Z",
-        updated_by: "backend@example.com",
-      },
-      {
-        id: "df-004",
-        rule: 'trace.trace_name == "database.query"',
-        collection_config: { mode: 'sample_rate', sample_rate: 15 },
-        updated_at: "2024-01-03T13:20:00Z",
-        updated_by: "db-admin@example.com",
-      },
-      {
-        id: "df-005",
-        rule: 'trace.trace_name == "activity.onResume" && session.device_manufacturer == "Samsung"',
-        collection_config: { mode: 'timeline_only' },
-        updated_at: "2024-01-04T10:15:00Z",
-        updated_by: "mobile@example.com",
-      },
-      {
-        id: "df-006",
-        rule: 'trace.trace_name == "api.authentication"',
-        collection_config: { mode: 'sample_rate', sample_rate: 100 },
-        updated_at: "2024-01-05T15:30:00Z",
-        updated_by: "security@example.com",
-      },
-      {
-        id: "df-007",
-        rule: 'trace.trace_name == "image.processing" && trace.duration > 1000',
-        collection_config: { mode: 'sample_rate', sample_rate: 20 },
-        updated_at: "2024-01-06T09:00:00Z",
-        updated_by: "performance@example.com",
-      }
-    ]
-  },
-}
-
-export const emptySessionTargetingResponse: SessionTargetingResponse = {
-  meta: {
-    next: false,
-    previous: false,
-  },
-  results: [
-    {
-      id: "df-sessions-001",
-      rule: 'event.event_type == "exception"',
-      sampling_rate: 0,
-      updated_at: "2024-01-01T00:00:00Z",
-      updated_by: "system@example.com",
-    },
-    {
-      id: "df-sessions-002",
-      rule: 'session.app_version == "1.5.0" && session.os_name == "android"',
-      sampling_rate: 25,
-      updated_at: "2024-01-02T11:20:00Z",
-      updated_by: "android-team@example.com",
-    },
-    {
-      id: "df-sessions-003",
-      rule: 'session.user_id == "beta_tester"',
-      sampling_rate: 100,
-      updated_at: "2024-01-03T14:45:00Z",
-      updated_by: "beta@example.com",
-    },
-    {
-      id: "df-sessions-004",
-      rule: 'session.device_manufacturer == "Google" && session.app_version >= "2.0.0"',
-      sampling_rate: 50,
-      updated_at: "2024-01-04T09:30:00Z",
-      updated_by: "qa-lead@example.com",
-    },
-    {
-      id: "df-sessions-005",
-      rule: 'session.network_type == "wifi"',
-      sampling_rate: 10,
-      updated_at: "2024-01-05T16:00:00Z",
-      updated_by: "network-team@example.com",
-    },
-    {
-      id: "df-sessions-006",
-      rule: 'session.os_version >= "12.0" && session.device_model contains "Pixel"',
-      sampling_rate: 75,
-      updated_at: "2024-01-06T10:15:00Z",
-      updated_by: "pixel-team@example.com",
-    },
-    {
-      id: "df-sessions-007",
-      rule: 'session.locale == "en-US" || session.locale == "en-GB"',
-      sampling_rate: 15,
-      updated_at: "2024-01-07T13:40:00Z",
-      updated_by: "localization@example.com",
-    },
-  ]
-}
-
-export const emptyEventTargetingRule: EventTargetingRule = {
-  id: "df-events-001",
-  rule: 'event.event_type == "crash"',
-  collection_config: { mode: 'sample_rate', sample_rate: 5 },
-  attachment_config: 'screenshot',
-  updated_at: "2024-01-01T00:00:00Z",
-  updated_by: "system@example.com",
-}
-
-export const emptyTraceTargetingRule: TraceTargetingRule = {
-  id: "df-001",
-  rule: 'trace.trace_name == "root"',
-  collection_config: { mode: 'sample_rate', sample_rate: 10 },
-  updated_at: "2024-01-01T00:00:00Z",
-  updated_by: "system@example.com",
-}
-
-export const emptyEventTargetingConfigResponse: EventTargetingConfigResponse = {
-  result: {
-    events: [
-      {
-        type: "exception",
-        attrs: [
-          { key: "handled", type: "bool", hint: "True for handled exceptions, false for crashes" },
-        ],
-        has_ud_attrs: true,
-      },
-    ],
-    event_ud_attrs: [
-      { key: "feature_flag", type: "string", hint: "Feature flag associated with the event" },
-    ],
-    session_attrs: [
-      { key: "user_id", type: "string", hint: "Identifier for the user" },
-    ],
-    operator_types: {
-      bool: ["==", "!="],
-      float64: ["==", "!=", "<", "<=", ">", ">="],
-      int64: ["==", "!=", "<", "<=", ">", ">="],
-      string: ["==", "!=", "contains", "starts_with", "ends_with"],
-    },
-  },
-}
-
-export const emptyTraceTargetingConfigResponse: TraceTargetingConfigResponse = {
-  result: {
-    traces: [
-      {
-        name: "root",
-        attrs: null,
-        has_ud_attrs: false,
-      },
-      {
-        name: "activity.onCreate",
-        attrs: null,
-        has_ud_attrs: false,
-      },
-    ],
-    trace_ud_attrs: [
-      { key: "feature_flag", type: "string", hint: "Feature flag associated with the trace" },
-    ],
-    session_attrs: [
-      { key: "user_id", type: "string", hint: "Identifier for the user" },
-    ],
-    operator_types: {
-      bool: ["==", "!="],
-      float64: ["==", "!=", "<", "<=", ">", ">="],
-      int64: ["==", "!=", "<", "<=", ">", ">="],
-      string: ["==", "!=", "contains", "starts_with", "ends_with"],
-    },
-  },
-}
 export class AppVersion {
   name: string
   code: string
@@ -2888,7 +2695,7 @@ export const fetchEventTargetingRuleFromServer = async (
     if (!res.ok) {
       return { status: EventTargetingRuleApiStatus.Error, data: null }
     }
-    
+
     const data = await res.json()
     return { status: EventTargetingRuleApiStatus.Success, data: data }
   } catch {
@@ -2901,10 +2708,10 @@ export const fetchTraceTargetingRuleFromServer = async (
   ruleId: string,
 ) => {
   const url = `/api/apps/${appId}/targetingRules/traces/${ruleId}`
-  
+
   try {
     const res = await measureAuth.fetchMeasure(url)
-    
+
     if (!res.ok) {
       return { status: TraceTargetingRuleApiStatus.Error, data: null }
     }
@@ -2920,7 +2727,7 @@ export const fetchSessionTargetingRuleFromServer = async (
   ruleId: string,
 ) => {
   const url = `/api/apps/${appId}/targetingRules/sessions/${ruleId}`
-  
+
   try {
     const res = await measureAuth.fetchMeasure(url)
     if (!res.ok) {
@@ -2937,7 +2744,7 @@ export const fetchEventTargetingConfigFromServer = async (
   appId: String,
 ) => {
   const url = `/api/apps/${appId}/targetingRules/events/config`
-  
+
   try {
     const res = await measureAuth.fetchMeasure(url)
     if (!res.ok) {
@@ -2954,7 +2761,7 @@ export const fetchTraceTargetingConfigFromServer = async (
   appId: String,
 ) => {
   const url = `/api/apps/${appId}/targetingRules/traces/config`
-  
+
   try {
     const res = await measureAuth.fetchMeasure(url)
     if (!res.ok) {
@@ -2971,7 +2778,7 @@ export const fetchSessionTargetingConfigFromServer = async (
   appId: String,
 ) => {
   const url = `/api/apps/${appId}/targetingRules/sessions/config`
-  
+
   try {
     const res = await measureAuth.fetchMeasure(url)
     if (!res.ok) {
@@ -2982,4 +2789,205 @@ export const fetchSessionTargetingConfigFromServer = async (
   } catch {
     return { status: SessionTargetingConfigApiStatus.Cancelled, data: null }
   }
+}
+
+export const createEventTargetingRule = async (
+  appId: String,
+  ruleData: EventTargetingRuleRequest,
+) => {
+  const opts = {
+    method: "POST",
+    body: JSON.stringify(ruleData),
+  }
+
+  const url = `/api/apps/${appId}/targetingRules/events`
+  try {
+    const res = await measureAuth.fetchMeasure(url, opts)
+    const data = await res.json()
+    if (!res.ok) {
+      return { status: CreateEventTargetingRuleApiStatus.Error, error: data.error }
+    }
+    return { status: CreateEventTargetingRuleApiStatus.Success, data: data }
+  } catch {
+    return { status: CreateEventTargetingRuleApiStatus.Cancelled }
+  }
+}
+
+export const createTraceTargetingRule = async (
+  appId: String,
+  ruleData: TraceTargetingRuleRequest,
+) => {
+  const opts = {
+    method: "POST",
+    body: JSON.stringify(ruleData),
+  }
+
+  const url = `/api/apps/${appId}/targetingRules/traces`
+  try {
+    const res = await measureAuth.fetchMeasure(url, opts)
+    const data = await res.json()
+    if (!res.ok) {
+      return { status: CreateTraceTargetingRuleApiStatus.Error, error: data.error }
+    }
+    return { status: CreateTraceTargetingRuleApiStatus.Success, data: data }
+  } catch {
+    return { status: CreateTraceTargetingRuleApiStatus.Cancelled }
+  }
+}
+
+export const createSessionTargetingRule = async (
+  appId: String,
+  ruleData: SessionTargetingRuleRequest,
+) => {
+  const opts = {
+    method: "POST",
+    body: JSON.stringify(ruleData),
+  }
+
+  const url = `/api/apps/${appId}/targetingRules/sessions`
+  try {
+    const res = await measureAuth.fetchMeasure(url, opts)
+    const data = await res.json()
+    if (!res.ok) {
+      return { status: CreateSessionTargetingRuleApiStatus.Error, error: data.error }
+    }
+    return { status: CreateSessionTargetingRuleApiStatus.Success, data: data }
+  } catch {
+    return { status: CreateSessionTargetingRuleApiStatus.Cancelled }
+  }
+}
+
+export const updateEventTargetingRule = async (
+  appId: String,
+  ruleId: string,
+  ruleData: EventTargetingRuleRequest,
+) => {
+  const opts = {
+    method: "PATCH",
+    body: JSON.stringify(ruleData),
+  }
+
+  const url = `/api/apps/${appId}/targetingRules/events/${ruleId}`
+  try {
+    const res = await measureAuth.fetchMeasure(url, opts)
+    const data = await res.json()
+    if (!res.ok) {
+      return { status: UpdateEventTargetingRuleApiStatus.Error, error: data.error }
+    }
+    return { status: UpdateEventTargetingRuleApiStatus.Success, data: data }
+  }
+  catch {
+    return { status: UpdateEventTargetingRuleApiStatus.Cancelled }
+  }
+}
+
+export const updateTraceTargetingRule = async (
+  appId: String,
+  ruleId: string,
+  ruleData: TraceTargetingRuleRequest,
+) => {
+  const opts = {
+    method: "PATCH",
+    body: JSON.stringify(ruleData),
+  }
+
+  const url = `/api/apps/${appId}/targetingRules/traces/${ruleId}`
+  try {
+    const res = await measureAuth.fetchMeasure(url, opts)
+    const data = await res.json()
+    if (!res.ok) {
+      return { status: UpdateTraceTargetingRuleApiStatus.Error, error: data.error }
+    }
+    return { status: UpdateTraceTargetingRuleApiStatus.Success, data: data }
+  }
+  catch {
+    return { status: UpdateTraceTargetingRuleApiStatus.Cancelled }
+  }
+}
+
+export const updateSessionTargetingRule = async (
+  appId: String,
+  ruleId: string,
+  ruleData: SessionTargetingRuleRequest,
+) => {
+  const opts = {
+    method: "PATCH",
+    body: JSON.stringify(ruleData),
+  }
+
+  const url = `/api/apps/${appId}/targetingRules/sessions/${ruleId}`
+  try {
+    const res = await measureAuth.fetchMeasure(url, opts)
+    const data = await res.json()
+    if (!res.ok) {
+      return { status: UpdateSessionTargetingRuleApiStatus.Error, error: data.error }
+    }
+    return { status: UpdateSessionTargetingRuleApiStatus.Success, data: data }
+  }
+  catch {
+    return { status: UpdateSessionTargetingRuleApiStatus.Cancelled }
+  }
+}
+
+export const deleteEventTargetingRule = async (
+  appId: String,
+  ruleId: string,
+) => {
+  const opts = {
+    method: "DELETE",
+  }
+
+  const url = `/api/apps/${appId}/targetingRules/events/${ruleId}`
+  try {
+    const res = await measureAuth.fetchMeasure(url, opts)
+    if (!res.ok) {
+      return { status: DeleteEventTargetingRuleApiStatus.Error }
+    }
+    return { status: DeleteEventTargetingRuleApiStatus.Success }
+  }
+  catch {
+    return { status: DeleteEventTargetingRuleApiStatus.Cancelled }
+  }
+}
+
+export const deleteTraceTargetingRule = async (
+  appId: String,
+  ruleId: string,
+) => {
+  const opts = {
+    method: "DELETE",
+  }
+
+  const url = `/api/apps/${appId}/targetingRules/traces/${ruleId}`
+  try {
+    const res = await measureAuth.fetchMeasure(url, opts)
+    if (!res.ok) {
+      return { status: DeleteTraceTargetingRuleApiStatus.Error }
+    }
+    return { status: DeleteTraceTargetingRuleApiStatus.Success }
+  }
+  catch {
+    return { status: DeleteTraceTargetingRuleApiStatus.Cancelled }
+  }
+}
+
+export const deleteSessionTargetingRule = async (
+  appId: String,
+  ruleId: string,
+) => {
+  const opts = {
+    method: "DELETE",
+  }
+
+  const url = `/api/apps/${appId}/targetingRules/sessions/${ruleId}`
+  try {
+    const res = await measureAuth.fetchMeasure(url, opts)
+    if (!res.ok) {
+      return { status: DeleteSessionTargetingRuleApiStatus.Error }
+    }
+    return { status: DeleteSessionTargetingRuleApiStatus.Success }
+  }
+  catch {
+    return { status: DeleteSessionTargetingRuleApiStatus.Cancelled }
+  }
 }
\ No newline at end of file
diff --git a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
index 3d144461b..be65b49a4 100644
--- a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
@@ -2,6 +2,7 @@
 
 import { Button } from '@/app/components/button'
 import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
 import {
     EventTargetingRuleApiStatus,
     TraceTargetingRuleApiStatus,
@@ -15,8 +16,17 @@ import {
     fetchTraceTargetingRuleFromServer,
     fetchEventTargetingConfigFromServer,
     fetchTraceTargetingConfigFromServer,
+    createEventTargetingRule,
+    createTraceTargetingRule,
+    updateEventTargetingRule,
+    updateTraceTargetingRule,
+    CreateEventTargetingRuleApiStatus,
+    CreateTraceTargetingRuleApiStatus,
+    UpdateEventTargetingRuleApiStatus,
+    UpdateTraceTargetingRuleApiStatus,
 } from '@/app/api/api_calls'
 import LoadingBar from '@/app/components/loading_bar'
+import { toastPositive, toastNegative } from '@/app/utils/use_toast'
 
 interface EventTraceRuleBuilderProps {
     type: 'event' | 'trace'
@@ -34,6 +44,7 @@ type PageState = {
     configApiStatus: EventTargetingConfigApiStatus | TraceTargetingConfigApiStatus
     initialRuleState: string | null
     currentRuleState: string | null
+    isSaving: boolean
 }
 
 type FormState = {
@@ -50,13 +61,15 @@ export default function EventTraceRuleBuilder({
     onCancel,
     onPrimaryAction,
 }: EventTraceRuleBuilderProps) {
+    const router = useRouter()
     const [pageState, setPageState] = useState<PageState>({
         ruleData: null,
         configData: null,
         ruleApiStatus: EventTargetingRuleApiStatus.Loading,
         configApiStatus: EventTargetingConfigApiStatus.Loading,
         initialRuleState: null,
-        currentRuleState: null
+        currentRuleState: null,
+        isSaving: false
     })
 
     const [formState, setFormState] = useState<FormState>({
@@ -210,6 +223,74 @@ export default function EventTraceRuleBuilder({
         }))
     }
 
+    const handlePrimaryAction = async () => {
+        setPageState(prev => ({ ...prev, isSaving: true }))
+
+        try {
+            // Build collection config
+            const collectionConfig = formState.collectionMode === 'sample_rate'
+                ? { mode: 'sample_rate' as const, sample_rate: formState.sampleRate }
+                : formState.collectionMode === 'timeline_only'
+                    ? { mode: 'timeline_only' as const }
+                    : { mode: 'disable' as const }
+
+            if (type === 'event') {
+                // Build event rule request
+                const ruleData = {
+                    rule: mode === 'edit' && pageState.ruleData ? pageState.ruleData.rule : 'event_type == "click"',
+                    collection_config: collectionConfig,
+                    take_screenshot: formState.attachmentMode === 'screenshot',
+                    take_layout_snapshot: formState.attachmentMode === 'layout_snapshot',
+                }
+
+                if (mode === 'create') {
+                    const result = await createEventTargetingRule(appId, ruleData)
+                    if (result.status === CreateEventTargetingRuleApiStatus.Success) {
+                        toastPositive('Event rule created successfully')
+                        onPrimaryAction()
+                    } else {
+                        toastNegative('Failed to create event rule', result.error || 'Unknown error')
+                    }
+                } else {
+                    const result = await updateEventTargetingRule(appId, ruleId!, ruleData)
+                    if (result.status === UpdateEventTargetingRuleApiStatus.Success) {
+                        toastPositive('Event rule updated successfully')
+                        onPrimaryAction()
+                    } else {
+                        toastNegative('Failed to update event rule', result.error || 'Unknown error')
+                    }
+                }
+            } else {
+                // Build trace rule request
+                const ruleData = {
+                    rule: mode === 'edit' && pageState.ruleData ? pageState.ruleData.rule : 'trace_name == "root"',
+                    collection_config: collectionConfig,
+                }
+
+                if (mode === 'create') {
+                    const result = await createTraceTargetingRule(appId, ruleData)
+                    if (result.status === CreateTraceTargetingRuleApiStatus.Success) {
+                        toastPositive('Trace rule created successfully')
+                        onPrimaryAction()
+                    } else {
+                        toastNegative('Failed to create trace rule', result.error || 'Unknown error')
+                    }
+                } else {
+                    const result = await updateTraceTargetingRule(appId, ruleId!, ruleData)
+                    if (result.status === UpdateTraceTargetingRuleApiStatus.Success) {
+                        toastPositive('Trace rule updated successfully')
+                        onPrimaryAction()
+                    } else {
+                        toastNegative('Failed to update trace rule', result.error || 'Unknown error')
+                    }
+                }
+            }
+        } catch (error) {
+            toastNegative('An error occurred', 'Please try again')
+        } finally {
+            setPageState(prev => ({ ...prev, isSaving: false }))
+        }
+    }
 
     return (
         <div className="flex flex-col selection:bg-yellow-200/75 items-start">
@@ -362,17 +443,21 @@ export default function EventTraceRuleBuilder({
                     {/* Action buttons */}
                     <div className="flex justify-end gap-3">
                         <Button
+                            type="button"
                             variant="outline"
                             onClick={onCancel}
                             className="font-display"
+                            disabled={pageState.isSaving}
                         >
                             Cancel
                         </Button>
                         <Button
+                            type="button"
                             variant="outline"
-                            onClick={onPrimaryAction}
+                            onClick={handlePrimaryAction}
                             className="font-display border border-black"
                             disabled={!hasChanges()}
+                            loading={pageState.isSaving}
                         >
                             {getPrimaryActionLabel()}
                         </Button>

From f638c219a105df23168f9ee068f48b4a2494ecdd Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Sun, 9 Nov 2025 07:20:45 +0530
Subject: [PATCH 56/98] feat(backend): validate event and trace on creation

---
 backend/api/measure/app.go             |  6 +-
 backend/api/measure/targeting_rules.go | 92 ++++++++++++++++++++++----
 2 files changed, 83 insertions(+), 15 deletions(-)

diff --git a/backend/api/measure/app.go b/backend/api/measure/app.go
index 43f84e1df..51897d9f3 100644
--- a/backend/api/measure/app.go
+++ b/backend/api/measure/app.go
@@ -7261,7 +7261,7 @@ func CreateEventTargetingRule(c *gin.Context) {
 		return
 	}
 
-	ruleId, err := CreateEventTargetingRuleForApp(ctx, id, app.TeamId, payload, userId)
+	ruleId, err := CreateEventTargetingRuleForApp(ctx, id, *team.ID, payload, userId)
 	if err != nil {
 		msg := "failed to create event targeting rule"
 		fmt.Println(msg, err)
@@ -7331,7 +7331,7 @@ func CreateTraceTargetingRule(c *gin.Context) {
 		return
 	}
 
-	ruleId, err := CreateTraceTargetingRuleForApp(ctx, id, app.TeamId, payload, userId)
+	ruleId, err := CreateTraceTargetingRuleForApp(ctx, id, *team.ID, payload, userId)
 	if err != nil {
 		msg := "failed to create trace targeting rule"
 		fmt.Println(msg, err)
@@ -7401,7 +7401,7 @@ func CreateSessionTargetingRule(c *gin.Context) {
 		return
 	}
 
-	ruleId, err := CreateSessionTargetingRuleForApp(ctx, id, app.TeamId, payload, userId)
+	ruleId, err := CreateSessionTargetingRuleForApp(ctx, id, *team.ID, payload, userId)
 	if err != nil {
 		msg := "failed to create session targeting rule"
 		fmt.Println(msg, err)
diff --git a/backend/api/measure/targeting_rules.go b/backend/api/measure/targeting_rules.go
index 41dd07bff..1fd542b0b 100644
--- a/backend/api/measure/targeting_rules.go
+++ b/backend/api/measure/targeting_rules.go
@@ -528,7 +528,36 @@ func CreateEventTargetingRuleForApp(ctx context.Context, appId uuid.UUID, teamId
 		return uuid.Nil, fmt.Errorf("invalid createdBy UUID: %w", err)
 	}
 
+	ruleId = uuid.New()
+
+	if (appId == uuid.Nil) || (teamId == uuid.Nil) {
+		return uuid.Nil, fmt.Errorf("appId and teamId cannot be nil")
+	}
+
+	if createdByUUID == uuid.Nil {
+		return uuid.Nil, fmt.Errorf("createdBy UUID cannot be nil")
+	}
+
+	if payload.Condition == "" {
+		return uuid.Nil, fmt.Errorf("condition cannot be empty")
+	}
+
+	if payload.CollectionMode != "session_timeline" && payload.CollectionMode != "disabled" && payload.CollectionMode != "sampled" {
+		return uuid.Nil, fmt.Errorf("invalid collection mode: %s", payload.CollectionMode)
+	}
+
+	if payload.CollectionMode == "sampled" {
+		if payload.SamplingRate < 0 || payload.SamplingRate > 100 {
+			return uuid.Nil, fmt.Errorf("sampling rate must be between 0 and 100")
+		}
+	}
+
+	if payload.TakeScreenshot && payload.TakeLayoutSnapshot {
+		return uuid.Nil, fmt.Errorf("only one of take_screenshot and take_layout_snapshot can be true")
+	}
+
 	stmt := sqlf.PostgreSQL.InsertInto("event_targeting_rules").
+		Set("id", ruleId).
 		Set("team_id", teamId).
 		Set("app_id", appId).
 		Set("condition", payload.Condition).
@@ -539,13 +568,12 @@ func CreateEventTargetingRuleForApp(ctx context.Context, appId uuid.UUID, teamId
 		Set("created_at", now).
 		Set("created_by", createdByUUID).
 		Set("updated_at", now).
-		Set("updated_by", createdByUUID).
-		Returning("id")
+		Set("updated_by", createdByUUID)
 
 	defer stmt.Close()
 
-	row := server.Server.PgPool.QueryRow(ctx, stmt.String(), stmt.Args()...)
-	if err := row.Scan(&ruleId); err != nil {
+	_, err = server.Server.PgPool.Exec(ctx, stmt.String(), stmt.Args()...)
+	if err != nil {
 		return uuid.Nil, err
 	}
 	return ruleId, nil
@@ -588,7 +616,33 @@ func CreateTraceTargetingRuleForApp(ctx context.Context, appId uuid.UUID, teamId
 	if err != nil {
 		return uuid.Nil, fmt.Errorf("invalid createdBy UUID: %w", err)
 	}
+
+	ruleId = uuid.New()
+
+	if (appId == uuid.Nil) || (teamId == uuid.Nil) {
+		return uuid.Nil, fmt.Errorf("appId and teamId cannot be nil")
+	}
+
+	if createdByUUID == uuid.Nil {
+		return uuid.Nil, fmt.Errorf("createdBy UUID cannot be nil")
+	}
+
+	if payload.Condition == "" {
+		return uuid.Nil, fmt.Errorf("condition cannot be empty")
+	}
+
+	if payload.CollectionMode != "session_timeline" && payload.CollectionMode != "disabled" && payload.CollectionMode != "sampled" {
+		return uuid.Nil, fmt.Errorf("invalid collection mode: %s", payload.CollectionMode)
+	}
+
+	if payload.CollectionMode == "sampled" {
+		if payload.SamplingRate < 0 || payload.SamplingRate > 100 {
+			return uuid.Nil, fmt.Errorf("sampling rate must be between 0 and 100")
+		}
+	}
+
 	stmt := sqlf.PostgreSQL.InsertInto("trace_targeting_rules").
+		Set("id", ruleId).
 		Set("team_id", teamId).
 		Set("app_id", appId).
 		Set("condition", payload.Condition).
@@ -597,11 +651,10 @@ func CreateTraceTargetingRuleForApp(ctx context.Context, appId uuid.UUID, teamId
 		Set("created_at", now).
 		Set("created_by", createdByUUID).
 		Set("updated_at", now).
-		Set("updated_by", createdByUUID).
-		Returning("id")
+		Set("updated_by", createdByUUID)
 	defer stmt.Close()
-	row := server.Server.PgPool.QueryRow(ctx, stmt.String(), stmt.Args()...)
-	if err := row.Scan(&ruleId); err != nil {
+	_, err = server.Server.PgPool.Exec(ctx, stmt.String(), stmt.Args()...)
+	if err != nil {
 		return uuid.Nil, err
 	}
 	return ruleId, nil
@@ -642,7 +695,23 @@ func CreateSessionTargetingRuleForApp(ctx context.Context, appId uuid.UUID, team
 	if err != nil {
 		return uuid.Nil, fmt.Errorf("invalid createdBy UUID: %w", err)
 	}
+
+	ruleId = uuid.New()
+
+	if (appId == uuid.Nil) || (teamId == uuid.Nil) {
+		return uuid.Nil, fmt.Errorf("appId and teamId cannot be nil")
+	}
+
+	if createdByUUID == uuid.Nil {
+		return uuid.Nil, fmt.Errorf("createdBy UUID cannot be nil")
+	}
+
+	if payload.Condition == "" {
+		return uuid.Nil, fmt.Errorf("condition cannot be empty")
+	}
+
 	stmt := sqlf.PostgreSQL.InsertInto("session_targeting_rules").
+		Set("id", ruleId).
 		Set("team_id", teamId).
 		Set("app_id", appId).
 		Set("condition", payload.Condition).
@@ -650,11 +719,10 @@ func CreateSessionTargetingRuleForApp(ctx context.Context, appId uuid.UUID, team
 		Set("created_at", now).
 		Set("created_by", createdByUUID).
 		Set("updated_at", now).
-		Set("updated_by", createdByUUID).
-		Returning("id")
+		Set("updated_by", createdByUUID)
 	defer stmt.Close()
-	row := server.Server.PgPool.QueryRow(ctx, stmt.String(), stmt.Args()...)
-	if err := row.Scan(&ruleId); err != nil {
+	_, err = server.Server.PgPool.Exec(ctx, stmt.String(), stmt.Args()...)
+	if err != nil {
 		return uuid.Nil, err
 	}
 	return ruleId, nil

From 89c41c7e0bf0559460cd3a599d43e70a6d60feac Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Sun, 9 Nov 2025 13:02:18 +0530
Subject: [PATCH 57/98] feat(backend): fix integration between backend and
 frontend

---
 backend/api/main.go                           |   6 +-
 backend/api/measure/app.go                    |  35 +-
 backend/api/measure/targeting_rules.go        | 265 ++++++++--
 .../data/[appId]/event/[ruleId]/edit/page.tsx |   7 +-
 .../data/[appId]/event/create/page.tsx        |   7 +-
 .../data/[appId]/trace/[ruleId]/edit/page.tsx |   5 +-
 .../data/[appId]/trace/create/page.tsx        |   5 +-
 frontend/dashboard/app/[teamId]/data/page.tsx |  89 ++--
 frontend/dashboard/app/api/api_calls.ts       |  70 ++-
 .../targeting/edit_default_rule_dialog.tsx    |  69 ++-
 .../targeting/event_rule_builder.tsx          | 473 ++++++++++++++++++
 .../targeting/event_trace_rule_builder.tsx    | 469 -----------------
 .../event_trace_targeting_rules_table.tsx     | 101 ++--
 .../session_targeting_rules_table.tsx         |   8 +-
 .../targeting/trace_rule_builder.tsx          | 414 +++++++++++++++
 .../dashboard/app/utils/cel/cel_generator.ts  |  34 +-
 ...347_create_event_targeting_rules_table.sql |   2 +
 ...408_create_trace_targeting_rules_table.sql |   2 +
 18 files changed, 1353 insertions(+), 708 deletions(-)
 create mode 100644 frontend/dashboard/app/components/targeting/event_rule_builder.tsx
 delete mode 100644 frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
 create mode 100644 frontend/dashboard/app/components/targeting/trace_rule_builder.tsx

diff --git a/backend/api/main.go b/backend/api/main.go
index 259886fc1..30792fac4 100644
--- a/backend/api/main.go
+++ b/backend/api/main.go
@@ -127,9 +127,9 @@ func main() {
 		apps.POST(":id/targetingRules/events", measure.CreateEventTargetingRule)
 		apps.POST(":id/targetingRules/traces", measure.CreateTraceTargetingRule)
 		apps.POST(":id/targetingRules/sessions", measure.CreateSessionTargetingRule)
-		apps.PATCH(":id/targetingRules/events/:ruleId", measure.UpdateEventTargetingRule)
-		apps.PATCH(":id/targetingRules/traces/:ruleId", measure.UpdateTraceTargetingRule)
-		apps.PATCH(":id/targetingRules/sessions/:ruleId", measure.UpdateSessionTargetingRule)
+		apps.PUT(":id/targetingRules/events/:ruleId", measure.UpdateEventTargetingRule)
+		apps.PUT(":id/targetingRules/traces/:ruleId", measure.UpdateTraceTargetingRule)
+		apps.PUT(":id/targetingRules/sessions/:ruleId", measure.UpdateSessionTargetingRule)
 		apps.DELETE(":id/targetingRules/events/:ruleId", measure.DeleteEventTargetingRule)
 		apps.DELETE(":id/targetingRules/traces/:ruleId", measure.DeleteTraceTargetingRule)
 		apps.DELETE(":id/targetingRules/sessions/:ruleId", measure.DeleteSessionTargetingRule)
diff --git a/backend/api/measure/app.go b/backend/api/measure/app.go
index 51897d9f3..61b4f64a0 100644
--- a/backend/api/measure/app.go
+++ b/backend/api/measure/app.go
@@ -4623,6 +4623,15 @@ func CreateApp(c *gin.Context) {
 
 	app.APIKey = apiKey
 
+	// create default targeting rules
+	// ignore errors as app has already
+	// been created
+	err = CreateDefaultTargetingRules(c, teamId.String(), app.ID.String(), userId)
+	if err != nil {
+		msg := "failed to create session targeting rules for app"
+		fmt.Println(msg, err)
+	}
+
 	c.JSON(http.StatusCreated, app)
 }
 
@@ -6556,7 +6565,7 @@ func GetEventTargetingRules(c *gin.Context) {
 		return
 	}
 
-	rules, err := GetEventTargetingRulesWithFilter(ctx, &af)
+	response, err := GetEventTargetingRulesWithFilter(ctx, &af, team.ID)
 	if err != nil {
 		msg := "failed to get app's event targeting rules"
 		fmt.Println(msg, err)
@@ -6564,9 +6573,7 @@ func GetEventTargetingRules(c *gin.Context) {
 		return
 	}
 
-	c.JSON(http.StatusOK, gin.H{
-		"results": rules,
-	})
+	c.JSON(http.StatusOK, response)
 }
 
 func GetTraceTargetingRules(c *gin.Context) {
@@ -6657,7 +6664,7 @@ func GetTraceTargetingRules(c *gin.Context) {
 		return
 	}
 
-	rules, err := GetTraceTargetingRulesWithFilter(ctx, &af)
+	response, err := GetTraceTargetingRulesWithFilter(ctx, &af, team.ID)
 	if err != nil {
 		msg := "failed to get app's trace targeting rules"
 		fmt.Println(msg, err)
@@ -6665,9 +6672,7 @@ func GetTraceTargetingRules(c *gin.Context) {
 		return
 	}
 
-	c.JSON(http.StatusOK, gin.H{
-		"results": rules,
-	})
+	c.JSON(http.StatusOK, response)
 }
 
 func GetSessionTargetingRules(c *gin.Context) {
@@ -7478,7 +7483,7 @@ func UpdateEventTargetingRule(c *gin.Context) {
 		return
 	}
 
-	c.Status(http.StatusNoContent)
+	c.JSON(http.StatusOK, gin.H{"ok": "done"})
 }
 
 func UpdateTraceTargetingRule(c *gin.Context) {
@@ -7547,7 +7552,7 @@ func UpdateTraceTargetingRule(c *gin.Context) {
 		return
 	}
 
-	c.Status(http.StatusNoContent)
+	c.JSON(http.StatusOK, gin.H{"ok": "done"})
 }
 
 func UpdateSessionTargetingRule(c *gin.Context) {
@@ -7616,7 +7621,7 @@ func UpdateSessionTargetingRule(c *gin.Context) {
 		return
 	}
 
-	c.Status(http.StatusNoContent)
+	c.JSON(http.StatusOK, gin.H{"ok": "done"})
 }
 
 func DeleteEventTargetingRule(c *gin.Context) {
@@ -7678,7 +7683,7 @@ func DeleteEventTargetingRule(c *gin.Context) {
 		return
 	}
 
-	c.Status(http.StatusNoContent)
+	c.JSON(http.StatusOK, gin.H{"ok": "done"})
 }
 
 func DeleteTraceTargetingRule(c *gin.Context) {
@@ -7739,7 +7744,7 @@ func DeleteTraceTargetingRule(c *gin.Context) {
 		return
 	}
 
-	c.Status(http.StatusNoContent)
+	c.JSON(http.StatusOK, gin.H{"ok": "done"})
 }
 
 func DeleteSessionTargetingRule(c *gin.Context) {
@@ -7800,7 +7805,7 @@ func DeleteSessionTargetingRule(c *gin.Context) {
 		return
 	}
 
-	c.Status(http.StatusNoContent)
+	c.JSON(http.StatusOK, gin.H{"ok": "done"})
 }
 
 func DeleteSessionTargetingRules(c *gin.Context) {
@@ -7861,5 +7866,5 @@ func DeleteSessionTargetingRules(c *gin.Context) {
 		return
 	}
 
-	c.Status(http.StatusNoContent)
+	c.JSON(http.StatusOK, gin.H{"ok": "done"})
 }
diff --git a/backend/api/measure/targeting_rules.go b/backend/api/measure/targeting_rules.go
index 1fd542b0b..838b5eeb3 100644
--- a/backend/api/measure/targeting_rules.go
+++ b/backend/api/measure/targeting_rules.go
@@ -4,6 +4,7 @@ import (
 	"backend/api/filter"
 	"backend/api/opsys"
 	"backend/api/server"
+	"backend/api/span"
 	"context"
 	"fmt"
 	"sort"
@@ -23,6 +24,7 @@ type EventTargetingRule struct {
 	TakeScreenshot     bool      `json:"take_screenshot"`
 	TakeLayoutSnapshot bool      `json:"take_layout_snapshot"`
 	SamplingRate       float32   `json:"sampling_rate"`
+	IsDefaultRule      bool      `json:"is_default_rule"`
 	CreatedAt          time.Time `json:"created_at"`
 	CreatedBy          uuid.UUID `json:"-"`
 	CreatedByEmail     string    `json:"created_by"`
@@ -39,6 +41,7 @@ type TraceTargetingRule struct {
 	Condition      string    `json:"condition"`
 	CollectionMode string    `json:"collection_mode"`
 	SamplingRate   float32   `json:"sampling_rate"`
+	IsDefaultRule  bool      `json:"is_default_rule"`
 	CreatedAt      time.Time `json:"created_at"`
 	CreatedBy      uuid.UUID `json:"-"`
 	CreatedByEmail string    `json:"created_by"`
@@ -62,6 +65,16 @@ type SessionTargetingRule struct {
 	UpdatedByEmail string    `json:"updated_by"`
 }
 
+type EventTargetingRulesResponse struct {
+	Rules       []EventTargetingRule `json:"rules"`
+	DefaultRule EventTargetingRule   `json:"default_rule"`
+}
+
+type TraceTargetingRulesResponse struct {
+	Rules       []TraceTargetingRule `json:"rules"`
+	DefaultRule TraceTargetingRule   `json:"default_rule"`
+}
+
 // EventConfig part of the
 // targeting dashboard config.
 type EventConfig struct {
@@ -130,12 +143,14 @@ type EventTargetingRulePayload struct {
 	TakeScreenshot     bool    `json:"take_screenshot"`
 	TakeLayoutSnapshot bool    `json:"take_layout_snapshot"`
 	SamplingRate       float32 `json:"sampling_rate"`
+	IsDefaultRule      bool    `json:"is_default_rule"`
 }
 
 type TraceTargetingRulePayload struct {
 	Condition      string  `json:"condition"`
 	CollectionMode string  `json:"collection_mode"`
 	SamplingRate   float32 `json:"sampling_rate"`
+	IsDefaultRule  bool    `json:"is_default_rule"`
 }
 
 type SessionTargetingRulePayload struct {
@@ -145,7 +160,7 @@ type SessionTargetingRulePayload struct {
 
 // GetEventTargetingRules provides all
 // event targeting rules.
-func GetEventTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter) (rules []EventTargetingRule, err error) {
+func GetEventTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter, teamId *uuid.UUID) (response EventTargetingRulesResponse, err error) {
 	stmt := sqlf.PostgreSQL.From("event_targeting_rules").
 		Select("id").
 		Select("team_id").
@@ -154,6 +169,8 @@ func GetEventTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter)
 		Select("collection_mode").
 		Select("take_screenshot").
 		Select("take_layout_snapshot").
+		Select("sampling_rate").
+		Select("is_default_rule").
 		Select("created_at").
 		Select("created_by").
 		Select("updated_at").
@@ -166,10 +183,11 @@ func GetEventTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter)
 
 	rows, err := server.Server.PgPool.Query(ctx, stmt.String(), stmt.Args()...)
 	if err != nil {
-		return nil, err
+		return response, err
 	}
 	defer rows.Close()
 
+	var allRules []EventTargetingRule
 	for rows.Next() {
 		var rule EventTargetingRule
 		if err := rows.Scan(
@@ -180,33 +198,51 @@ func GetEventTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter)
 			&rule.CollectionMode,
 			&rule.TakeScreenshot,
 			&rule.TakeLayoutSnapshot,
+			&rule.SamplingRate,
+			&rule.IsDefaultRule,
 			&rule.CreatedAt,
 			&rule.CreatedBy,
 			&rule.UpdatedAt,
 			&rule.UpdatedBy,
 		); err != nil {
-			return nil, err
+			return response, err
 		}
-		rules = append(rules, rule)
+		allRules = append(allRules, rule)
 	}
 
 	// Populate user emails for all rules
-	if err := populateUserEmailsForEventRules(ctx, rules); err != nil {
-		return nil, err
+	if err := populateUserEmailsForEventRules(ctx, allRules); err != nil {
+		return response, err
+	}
+
+	// Separate default rule from regular rules
+	var rules []EventTargetingRule
+	var defaultRule EventTargetingRule
+	for _, rule := range allRules {
+		if rule.IsDefaultRule {
+			defaultRule = rule
+		} else {
+			rules = append(rules, rule)
+		}
 	}
 
-	return rules, nil
+	response.Rules = rules
+	response.DefaultRule = defaultRule
+
+	return response, nil
 }
 
 // GetTraceTargetingRulesWithFilter provides all
 // trace targeting rules.
-func GetTraceTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter) (rules []TraceTargetingRule, err error) {
+func GetTraceTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter, teamId *uuid.UUID) (response TraceTargetingRulesResponse, err error) {
 	stmt := sqlf.PostgreSQL.From("trace_targeting_rules").
 		Select("id").
 		Select("team_id").
 		Select("app_id").
 		Select("condition").
 		Select("collection_mode").
+		Select("sampling_rate").
+		Select("is_default_rule").
 		Select("created_at").
 		Select("created_by").
 		Select("updated_at").
@@ -219,10 +255,11 @@ func GetTraceTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter)
 
 	rows, err := server.Server.PgPool.Query(ctx, stmt.String(), stmt.Args()...)
 	if err != nil {
-		return nil, err
+		return response, err
 	}
 	defer rows.Close()
 
+	var allRules []TraceTargetingRule
 	for rows.Next() {
 		var rule TraceTargetingRule
 		if err := rows.Scan(
@@ -231,22 +268,38 @@ func GetTraceTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter)
 			&rule.AppId,
 			&rule.Condition,
 			&rule.CollectionMode,
+			&rule.SamplingRate,
+			&rule.IsDefaultRule,
 			&rule.CreatedAt,
 			&rule.CreatedBy,
 			&rule.UpdatedAt,
 			&rule.UpdatedBy,
 		); err != nil {
-			return nil, err
+			return response, err
 		}
-		rules = append(rules, rule)
+		allRules = append(allRules, rule)
 	}
 
 	// Populate user emails for all rules
-	if err := populateUserEmailsForTraceRules(ctx, rules); err != nil {
-		return nil, err
+	if err := populateUserEmailsForTraceRules(ctx, allRules); err != nil {
+		return response, err
+	}
+
+	// Separate default rule from regular rules
+	var rules []TraceTargetingRule
+	var defaultRule TraceTargetingRule
+	for _, rule := range allRules {
+		if rule.IsDefaultRule {
+			defaultRule = rule
+		} else {
+			rules = append(rules, rule)
+		}
 	}
 
-	return rules, nil
+	response.Rules = rules
+	response.DefaultRule = defaultRule
+
+	return response, nil
 }
 
 // GetSessionTargetingRulesWithFilter provides all
@@ -303,6 +356,11 @@ func GetSessionTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilte
 // GetEventTargetingRuleWithFilter queries a single
 // event targeting rule by its id.
 func GetEventTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId string) (rule *EventTargetingRule, err error) {
+	ruleUUID, err := uuid.Parse(ruleId)
+	if err != nil {
+		return nil, fmt.Errorf("invalid ruleId UUID: %w", err)
+	}
+
 	stmt := sqlf.PostgreSQL.From("event_targeting_rules").
 		Select("id").
 		Select("team_id").
@@ -312,12 +370,13 @@ func GetEventTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId str
 		Select("take_screenshot").
 		Select("take_layout_snapshot").
 		Select("sampling_rate").
+		Select("is_default_rule").
 		Select("created_at").
 		Select("created_by").
 		Select("updated_at").
 		Select("updated_by").
 		Where("app_id = ?", appId).
-		Where("id = toUUID(?)", ruleId)
+		Where("id = ?", ruleUUID)
 
 	defer stmt.Close()
 
@@ -333,6 +392,7 @@ func GetEventTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId str
 		&r.TakeScreenshot,
 		&r.TakeLayoutSnapshot,
 		&r.SamplingRate,
+		&r.IsDefaultRule,
 		&r.CreatedAt,
 		&r.CreatedBy,
 		&r.UpdatedAt,
@@ -353,6 +413,11 @@ func GetEventTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId str
 // GetTraceTargetingRuleById queries a single
 // trace targeting rule by its id.
 func GetTraceTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId string) (rule *TraceTargetingRule, err error) {
+	ruleUUID, err := uuid.Parse(ruleId)
+	if err != nil {
+		return nil, fmt.Errorf("invalid ruleId UUID: %w", err)
+	}
+
 	stmt := sqlf.PostgreSQL.From("trace_targeting_rules").
 		Select("id").
 		Select("team_id").
@@ -360,12 +425,13 @@ func GetTraceTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId str
 		Select("condition").
 		Select("collection_mode").
 		Select("sampling_rate").
+		Select("is_default_rule").
 		Select("created_at").
 		Select("created_by").
 		Select("updated_at").
 		Select("updated_by").
 		Where("app_id = ?", appId).
-		Where("id = toUUID(?)", ruleId)
+		Where("id = ?", ruleUUID)
 
 	defer stmt.Close()
 
@@ -379,6 +445,7 @@ func GetTraceTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId str
 		&r.Condition,
 		&r.CollectionMode,
 		&r.SamplingRate,
+		&r.IsDefaultRule,
 		&r.CreatedAt,
 		&r.CreatedBy,
 		&r.UpdatedAt,
@@ -399,6 +466,11 @@ func GetTraceTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId str
 // GetSessionTargetingRuleById queries a single
 // trace targeting rule by its id.
 func GetSessionTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId string) (rule *SessionTargetingRule, err error) {
+	ruleUUID, err := uuid.Parse(ruleId)
+	if err != nil {
+		return nil, fmt.Errorf("invalid ruleId UUID: %w", err)
+	}
+
 	stmt := sqlf.PostgreSQL.From("session_targeting_rules").
 		Select("id").
 		Select("team_id").
@@ -410,7 +482,7 @@ func GetSessionTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId s
 		Select("updated_at").
 		Select("updated_by").
 		Where("app_id = ?", appId).
-		Where("id = toUUID(?)", ruleId)
+		Where("id = ?", ruleUUID)
 
 	defer stmt.Close()
 
@@ -466,7 +538,7 @@ func GetTraceTargetingConfig(ctx context.Context, appId uuid.UUID, osName string
 		return TraceTargetingConfig{}, err
 	}
 
-	traces, err := getTraceNames(ctx, appId)
+	traces, err := span.FetchRootSpanNames(ctx, appId)
 	if err != nil {
 		return TraceTargetingConfig{}, err
 	}
@@ -499,7 +571,7 @@ func GetSessionTargetingConfig(ctx context.Context, appId uuid.UUID, osName stri
 	if err != nil {
 		return SessionTargetingConfig{}, err
 	}
-	traces, err := getTraceNames(ctx, appId)
+	traces, err := span.FetchRootSpanNames(ctx, appId)
 	if err != nil {
 		return SessionTargetingConfig{}, err
 	}
@@ -556,6 +628,16 @@ func CreateEventTargetingRuleForApp(ctx context.Context, appId uuid.UUID, teamId
 		return uuid.Nil, fmt.Errorf("only one of take_screenshot and take_layout_snapshot can be true")
 	}
 
+	if payload.IsDefaultRule {
+		if payload.TakeScreenshot {
+			return uuid.Nil, fmt.Errorf("take_screenshot must be false for default rule")
+		}
+
+		if payload.TakeLayoutSnapshot {
+			return uuid.Nil, fmt.Errorf("take_layout_snapshot must be false for default rule")
+		}
+	}
+
 	stmt := sqlf.PostgreSQL.InsertInto("event_targeting_rules").
 		Set("id", ruleId).
 		Set("team_id", teamId).
@@ -580,11 +662,20 @@ func CreateEventTargetingRuleForApp(ctx context.Context, appId uuid.UUID, teamId
 }
 
 func UpdateEventTargetingRuleForApp(ctx context.Context, appId uuid.UUID, ruleId string, payload EventTargetingRulePayload, updatedBy string) error {
+	if appId == uuid.Nil {
+		return fmt.Errorf("appId cannot be nil")
+	}
+
 	updatedByUUID, err := uuid.Parse(updatedBy)
 	if err != nil {
 		return fmt.Errorf("invalid updatedBy UUID: %w", err)
 	}
 
+	ruleUUID, err := uuid.Parse(ruleId)
+	if err != nil {
+		return fmt.Errorf("invalid ruleId UUID: %w", err)
+	}
+
 	stmt := sqlf.PostgreSQL.Update("event_targeting_rules").
 		Set("condition", payload.Condition).
 		Set("collection_mode", payload.CollectionMode).
@@ -594,7 +685,7 @@ func UpdateEventTargetingRuleForApp(ctx context.Context, appId uuid.UUID, ruleId
 		Set("updated_at", time.Now()).
 		Set("updated_by", updatedByUUID).
 		Where("app_id = ?", appId).
-		Where("id = toUUID(?)", ruleId)
+		Where("id = ?", ruleUUID)
 
 	defer stmt.Close()
 
@@ -661,11 +752,20 @@ func CreateTraceTargetingRuleForApp(ctx context.Context, appId uuid.UUID, teamId
 }
 
 func UpdateTraceTargetingRuleForApp(ctx context.Context, appId uuid.UUID, ruleId string, payload TraceTargetingRulePayload, updatedBy string) error {
+	if appId == uuid.Nil {
+		return fmt.Errorf("appId cannot be nil")
+	}
+
 	updatedByUUID, err := uuid.Parse(updatedBy)
 	if err != nil {
 		return fmt.Errorf("invalid updatedBy UUID: %w", err)
 	}
 
+	ruleUUID, err := uuid.Parse(ruleId)
+	if err != nil {
+		return fmt.Errorf("invalid ruleId UUID: %w", err)
+	}
+
 	stmt := sqlf.PostgreSQL.Update("trace_targeting_rules").
 		Set("condition", payload.Condition).
 		Set("collection_mode", payload.CollectionMode).
@@ -673,7 +773,7 @@ func UpdateTraceTargetingRuleForApp(ctx context.Context, appId uuid.UUID, ruleId
 		Set("updated_at", time.Now()).
 		Set("updated_by", updatedByUUID).
 		Where("app_id = ?", appId).
-		Where("id = toUUID(?)", ruleId)
+		Where("id = ?", ruleUUID)
 
 	defer stmt.Close()
 
@@ -734,13 +834,18 @@ func UpdateSessionTargetingRuleForApp(ctx context.Context, appId uuid.UUID, rule
 		return fmt.Errorf("invalid updatedBy UUID: %w", err)
 	}
 
+	ruleUUID, err := uuid.Parse(ruleId)
+	if err != nil {
+		return fmt.Errorf("invalid ruleId UUID: %w", err)
+	}
+
 	stmt := sqlf.PostgreSQL.Update("session_targeting_rules").
 		Set("condition", payload.Condition).
 		Set("sampling_rate", payload.SamplingRate).
 		Set("updated_at", time.Now()).
 		Set("updated_by", updatedByUUID).
 		Where("app_id = ?", appId).
-		Where("id = toUUID(?)", ruleId)
+		Where("id = ?", ruleUUID)
 
 	defer stmt.Close()
 
@@ -757,9 +862,14 @@ func UpdateSessionTargetingRuleForApp(ctx context.Context, appId uuid.UUID, rule
 }
 
 func DeleteEventTargetingRuleForApp(ctx context.Context, appId uuid.UUID, ruleId string) error {
+	ruleUUID, err := uuid.Parse(ruleId)
+	if err != nil {
+		return fmt.Errorf("invalid ruleId UUID: %w", err)
+	}
+
 	stmt := sqlf.PostgreSQL.DeleteFrom("event_targeting_rules").
 		Where("app_id = ?", appId).
-		Where("id = toUUID(?)", ruleId)
+		Where("id = ?", ruleUUID)
 	defer stmt.Close()
 	result, err := server.Server.PgPool.Exec(ctx, stmt.String(), stmt.Args()...)
 	if err != nil {
@@ -772,9 +882,14 @@ func DeleteEventTargetingRuleForApp(ctx context.Context, appId uuid.UUID, ruleId
 }
 
 func DeleteTraceTargetingRuleForApp(ctx context.Context, appId uuid.UUID, ruleId string) error {
+	ruleUUID, err := uuid.Parse(ruleId)
+	if err != nil {
+		return fmt.Errorf("invalid ruleId UUID: %w", err)
+	}
+
 	stmt := sqlf.PostgreSQL.DeleteFrom("trace_targeting_rules").
 		Where("app_id = ?", appId).
-		Where("id = toUUID(?)", ruleId)
+		Where("id = ?", ruleUUID)
 	defer stmt.Close()
 	result, err := server.Server.PgPool.Exec(ctx, stmt.String(), stmt.Args()...)
 	if err != nil {
@@ -787,9 +902,14 @@ func DeleteTraceTargetingRuleForApp(ctx context.Context, appId uuid.UUID, ruleId
 }
 
 func DeleteSessionTargetingRuleForApp(ctx context.Context, appId uuid.UUID, ruleId string) error {
+	ruleUUID, err := uuid.Parse(ruleId)
+	if err != nil {
+		return fmt.Errorf("invalid ruleId UUID: %w", err)
+	}
+
 	stmt := sqlf.PostgreSQL.DeleteFrom("session_targeting_rules").
 		Where("app_id = ?", appId).
-		Where("id = toUUID(?)", ruleId)
+		Where("id = ?", ruleUUID)
 	defer stmt.Close()
 	result, err := server.Server.PgPool.Exec(ctx, stmt.String(), stmt.Args()...)
 	if err != nil {
@@ -801,40 +921,87 @@ func DeleteSessionTargetingRuleForApp(ctx context.Context, appId uuid.UUID, rule
 	return nil
 }
 
-// getTraceNames returns list of root span names for a given app id
-func getTraceNames(ctx context.Context, appId uuid.UUID) (traceNames []string, err error) {
-	stmt := sqlf.
-		Select("distinct toString(span_name)").
-		From("spans").
-		Where("app_id = ?", appId).
-		Where("parent_id = ''").
-		OrderBy("start_time desc")
+func CreateDefaultTargetingRules(ctx context.Context, teamId string, appId string, createdBy string) error {
+	teamUUID, err := uuid.Parse(teamId)
+	if err != nil {
+		return fmt.Errorf("invalid teamId: %w", err)
+	}
 
-	defer stmt.Close()
+	appUUID, err := uuid.Parse(appId)
+	if err != nil {
+		return fmt.Errorf("invalid appId: %w", err)
+	}
 
-	rows, err := server.Server.ChPool.Query(ctx, stmt.String(), stmt.Args()...)
+	createdByUUID, err := uuid.Parse(createdBy)
 	if err != nil {
-		return
+		return fmt.Errorf("invalid createdBy UUID: %w", err)
 	}
 
-	for rows.Next() {
-		var traceName string
+	now := time.Now()
 
-		if err = rows.Scan(&traceName); err != nil {
-			fmt.Println(err)
-			return
-		}
+	// Create default event targeting rule
+	eventRuleId := uuid.New()
+	eventPayload := EventTargetingRulePayload{
+		Condition:          "event_type == \"*\"",
+		CollectionMode:     "timeline",
+		TakeScreenshot:     false,
+		TakeLayoutSnapshot: false,
+		SamplingRate:       0,
+		IsDefaultRule:      true,
+	}
+
+	eventStmt := sqlf.PostgreSQL.InsertInto("event_targeting_rules").
+		Set("id", eventRuleId).
+		Set("team_id", teamUUID).
+		Set("app_id", appUUID).
+		Set("condition", eventPayload.Condition).
+		Set("collection_mode", eventPayload.CollectionMode).
+		Set("take_screenshot", eventPayload.TakeScreenshot).
+		Set("take_layout_snapshot", eventPayload.TakeLayoutSnapshot).
+		Set("sampling_rate", eventPayload.SamplingRate).
+		Set("is_default_rule", eventPayload.IsDefaultRule).
+		Set("created_at", now).
+		Set("created_by", createdByUUID).
+		Set("updated_at", now).
+		Set("updated_by", createdByUUID)
 
-		if err = rows.Err(); err != nil {
-			return
-		}
+	defer eventStmt.Close()
 
-		traceNames = append(traceNames, traceName)
-	}
+	_, err = server.Server.PgPool.Exec(ctx, eventStmt.String(), eventStmt.Args()...)
+	if err != nil {
+		return fmt.Errorf("failed to create default event targeting rule: %w", err)
+	}
+
+	// Create default trace targeting rule
+	traceRuleId := uuid.New()
+	tracePayload := TraceTargetingRulePayload{
+		Condition:      "span.name == \"*\"",
+		CollectionMode: "timeline",
+		SamplingRate:   0,
+		IsDefaultRule:  true,
+	}
+
+	traceStmt := sqlf.PostgreSQL.InsertInto("trace_targeting_rules").
+		Set("id", traceRuleId).
+		Set("team_id", teamUUID).
+		Set("app_id", appUUID).
+		Set("condition", tracePayload.Condition).
+		Set("collection_mode", tracePayload.CollectionMode).
+		Set("sampling_rate", tracePayload.SamplingRate).
+		Set("is_default_rule", tracePayload.IsDefaultRule).
+		Set("created_at", now).
+		Set("created_by", createdByUUID).
+		Set("updated_at", now).
+		Set("updated_by", createdByUUID)
 
-	err = rows.Err()
-	return
+	defer traceStmt.Close()
 
+	_, err = server.Server.PgPool.Exec(ctx, traceStmt.String(), traceStmt.Args()...)
+	if err != nil {
+		return fmt.Errorf("failed to create default trace targeting rule: %w", err)
+	}
+
+	return nil
 }
 
 func getEventUDAttrKeys(ctx context.Context, appId uuid.UUID) (attributes []AttrConfig, err error) {
diff --git a/frontend/dashboard/app/[teamId]/data/[appId]/event/[ruleId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/event/[ruleId]/edit/page.tsx
index 13538cf61..a511292ce 100644
--- a/frontend/dashboard/app/[teamId]/data/[appId]/event/[ruleId]/edit/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/event/[ruleId]/edit/page.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useRouter } from 'next/navigation'
-import EventTraceRuleBuilder from '@/app/components/targeting/event_trace_rule_builder'
+import EventRuleBuilder from '@/app/components/targeting/event_rule_builder'
 
 export default function EditEventRule({ params }: { params: { teamId: string, appId: string, ruleId: string } }) {
     const router = useRouter()
@@ -15,13 +15,12 @@ export default function EditEventRule({ params }: { params: { teamId: string, ap
     }
 
     return (
-        <EventTraceRuleBuilder
-            type="event"
+        <EventRuleBuilder
             mode="edit"
             appId={params.appId}
             ruleId={params.ruleId}
             onCancel={handleCancel}
-            onPrimaryAction={handleSave}
+            onSaved={handleSave}
         />
     )
 }
diff --git a/frontend/dashboard/app/[teamId]/data/[appId]/event/create/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/event/create/page.tsx
index 5b9460952..bfd832fa0 100644
--- a/frontend/dashboard/app/[teamId]/data/[appId]/event/create/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/event/create/page.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useRouter } from 'next/navigation'
-import EventTraceRuleBuilder from '@/app/components/targeting/event_trace_rule_builder'
+import EventRuleBuilder from '@/app/components/targeting/event_rule_builder'
 
 export default function CreateEventRule({ params }: { params: { teamId: string, appId: string } }) {
     const router = useRouter()
@@ -16,12 +16,11 @@ export default function CreateEventRule({ params }: { params: { teamId: string,
     }
 
     return (
-        <EventTraceRuleBuilder
-            type="event"
+        <EventRuleBuilder
             mode="create"
             appId={params.appId}
             onCancel={handleCancel}
-            onPrimaryAction={handleCreate}
+            onSaved={handleCreate}
         />
     )
 }
diff --git a/frontend/dashboard/app/[teamId]/data/[appId]/trace/[ruleId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/trace/[ruleId]/edit/page.tsx
index 3ca2f10aa..58d14f30a 100644
--- a/frontend/dashboard/app/[teamId]/data/[appId]/trace/[ruleId]/edit/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/trace/[ruleId]/edit/page.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useRouter } from 'next/navigation'
-import EventTraceRuleBuilder from '@/app/components/targeting/event_trace_rule_builder'
+import TraceRuleBuilder from '@/app/components/targeting/trace_rule_builder'
 
 export default function EditTraceRule({ params }: { params: { teamId: string, appId: string, ruleId: string } }) {
     const router = useRouter()
@@ -16,8 +16,7 @@ export default function EditTraceRule({ params }: { params: { teamId: string, ap
     }
 
     return (
-        <EventTraceRuleBuilder
-            type="trace"
+        <TraceRuleBuilder
             mode="edit"
             appId={params.appId}
             ruleId={params.ruleId}
diff --git a/frontend/dashboard/app/[teamId]/data/[appId]/trace/create/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/trace/create/page.tsx
index db85a4bb0..e9271381d 100644
--- a/frontend/dashboard/app/[teamId]/data/[appId]/trace/create/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/trace/create/page.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useRouter } from 'next/navigation'
-import EventTraceRuleBuilder from '@/app/components/targeting/event_trace_rule_builder'
+import TraceRuleBuilder from '@/app/components/targeting/trace_rule_builder'
 
 export default function CreateTraceRule({ params }: { params: { teamId: string, appId: string } }) {
     const router = useRouter()
@@ -16,8 +16,7 @@ export default function CreateTraceRule({ params }: { params: { teamId: string,
     }
 
     return (
-        <EventTraceRuleBuilder
-            type="trace"
+        <TraceRuleBuilder
             mode="create"
             appId={params.appId}
             onCancel={handleCancel}
diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index e013a336b..cfd27d629 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { EventTargetingApiStatus, EventTargetingResponse, fetchEventTargetingRulesFromServer, TraceTargetingApiStatus, TraceTargetingResponse, emptyTraceTargetingResponse, fetchTraceTargetingRulesFromServer, FilterSource, EventTargetingCollectionConfig, TraceTargetingCollectionConfig, SessionTargetingResponse, emptySessionTargetingResponse, fetchSessionTargetingRulesFromServer } from '@/app/api/api_calls'
+import { EventTargetingApiStatus, EventTargetingRulesResponse, fetchEventTargetingRulesFromServer, TraceTargetingApiStatus, TraceTargetingRulesResponse, fetchTraceTargetingRulesFromServer, FilterSource, CollectionMode, SessionTargetingRulesResponse, fetchSessionTargetingRulesFromServer } from '@/app/api/api_calls'
 import Filters, { AppVersionsInitialSelectionType, defaultFilters } from '@/app/components/filters'
 import LoadingBar from '@/app/components/loading_bar'
 import { useRouter } from 'next/navigation'
@@ -17,20 +17,20 @@ interface PageState {
     eventTargetingApiStatus: EventTargetingApiStatus
     traceTargetingApiStatus: TraceTargetingApiStatus
     filters: typeof defaultFilters
-    eventTargetingRules: EventTargetingResponse | null
-    traceTargetingRules: TraceTargetingResponse | null
-    sessionTargetingRules: SessionTargetingResponse | null
+    eventTargetingRules: EventTargetingRulesResponse | null
+    traceTargetingRules: TraceTargetingRulesResponse | null
+    sessionTargetingRules: SessionTargetingRulesResponse | null
     editingDefaultRule: 'event' | 'trace' | null
 }
 
-const getCollectionConfigDisplay = (collectionConfig: EventTargetingCollectionConfig | TraceTargetingCollectionConfig, type: 'event' | 'trace'): string => {
+const getCollectionConfigDisplay = (collectionMode: CollectionMode, samplingRate: number, type: 'event' | 'trace'): string => {
     const typeName = type === 'event' ? 'events' : 'traces'
-    switch (collectionConfig.mode) {
-        case 'sample_rate':
-            return `Collect all ${typeName} at ${collectionConfig.sample_rate}% sample rate`
-        case 'timeline_only':
+    switch (collectionMode) {
+        case 'sampled':
+            return `Collect all ${typeName} at ${samplingRate}% sample rate`
+        case 'timeline':
             return `Collect ${typeName} with session timeline only`
-        case 'disable':
+        case 'disabled':
             return `Collect no ${typeName} by default`
         default:
             return 'Unknown'
@@ -41,8 +41,8 @@ export default function DataFilters({ params }: { params: { teamId: string } })
     const router = useRouter()
 
     const initialState: PageState = {
-        eventTargetingApiStatus: EventTargetingApiStatus.Success,
-        traceTargetingApiStatus: TraceTargetingApiStatus.Success,
+        eventTargetingApiStatus: EventTargetingApiStatus.Loading,
+        traceTargetingApiStatus: TraceTargetingApiStatus.Loading,
         filters: defaultFilters,
         eventTargetingRules: null,
         traceTargetingRules: null,
@@ -135,46 +135,34 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         return pageState.filters.ready && eventReady && traceReady
     }
 
-    const eventsDefaultRule = pageState.eventTargetingRules?.result.default;
-    const eventsOverideRules = pageState.eventTargetingRules?.result.overrides ?? [];
-    const traceDefaultRule = pageState.traceTargetingRules?.result.default;
-    const traceOverrideRules = pageState.traceTargetingRules?.result.overrides ?? [];
+    const eventsDefaultRule = pageState.eventTargetingRules?.default_rule;
+    const eventsOverideRules = pageState.eventTargetingRules?.rules ?? [];
+    const traceDefaultRule = pageState.traceTargetingRules?.default_rule;
+    const traceOverrideRules = pageState.traceTargetingRules?.rules ?? [];
     const sessionTargetingRules = pageState.sessionTargetingRules?.results ?? [];
 
     const handleEditRule = (dataFilter: typeof eventsOverideRules[0] | typeof traceOverrideRules[0] | typeof sessionTargetingRules[0], filterType: 'event' | 'trace' | 'session') => {
         router.push(`/${params.teamId}/data/${pageState.filters.app!.id}/${filterType}/${dataFilter.id}/edit`)
     }
 
-    const handleDefaultRuleUpdateSuccess = (collectionMode: 'sample_rate' | 'timeline_only' | 'disable', sampleRate?: number) => {
+    const handleDefaultRuleUpdateSuccess = (collectionMode: 'sampled' | 'timeline' | 'disabled', samplingRate?: number) => {
         if (pageState.editingDefaultRule === 'event' && pageState.eventTargetingRules) {
             const updatedEventRules = {
                 ...pageState.eventTargetingRules,
-                result: {
-                    ...pageState.eventTargetingRules.result,
-                    default: {
-                        ...pageState.eventTargetingRules.result.default,
-                        collection_config: collectionMode === 'sample_rate'
-                            ? { mode: 'sample_rate' as const, sample_rate: sampleRate! }
-                            : collectionMode === 'timeline_only'
-                                ? { mode: 'timeline_only' as const }
-                                : { mode: 'disable' as const }
-                    }
+                default_rule: {
+                    ...pageState.eventTargetingRules.default_rule,
+                    collection_mode: collectionMode,
+                    sampling_rate: samplingRate || 0
                 }
             }
             updatePageState({ eventTargetingRules: updatedEventRules })
         } else if (pageState.editingDefaultRule === 'trace' && pageState.traceTargetingRules) {
             const updatedTraceRules = {
                 ...pageState.traceTargetingRules,
-                result: {
-                    ...pageState.traceTargetingRules.result,
-                    default: {
-                        ...pageState.traceTargetingRules.result.default,
-                        collection_config: collectionMode === 'sample_rate'
-                            ? { mode: 'sample_rate' as const, sample_rate: sampleRate! }
-                            : collectionMode === 'timeline_only'
-                                ? { mode: 'timeline_only' as const }
-                                : { mode: 'disable' as const }
-                    }
+                default_rule: {
+                    ...pageState.traceTargetingRules.default_rule,
+                    collection_mode: collectionMode,
+                    sampling_rate: samplingRate || 0
                 }
             }
             updatePageState({ traceTargetingRules: updatedTraceRules })
@@ -280,7 +268,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         <div className="py-2" />
                         {eventsDefaultRule && (
                             <div className="text-sm font-body text-gray-700">
-                                {getCollectionConfigDisplay(eventsDefaultRule.collection_config, 'event')}
+                                {getCollectionConfigDisplay(eventsDefaultRule.collection_mode, eventsDefaultRule.sampling_rate, 'event')}
                             </div>
                         )}
 
@@ -312,7 +300,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         <div className="py-2" />
                         {traceDefaultRule && (
                             <div className="text-sm font-body text-gray-700">
-                                {getCollectionConfigDisplay(traceDefaultRule.collection_config, 'trace')}
+                                {getCollectionConfigDisplay(traceDefaultRule.collection_mode, traceDefaultRule.sampling_rate, 'trace')}
                             </div>
                         )}
 
@@ -351,15 +339,30 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                             : traceDefaultRule.id
                     }
                     appId={pageState.filters.app!.id}
+                    condition={
+                        pageState.editingDefaultRule === 'event'
+                            ? eventsDefaultRule.condition
+                            : traceDefaultRule.condition
+                    }
+                    takeScreenshot={
+                        pageState.editingDefaultRule === 'event'
+                            ? eventsDefaultRule.take_screenshot
+                            : undefined
+                    }
+                    takeLayoutSnapshot={
+                        pageState.editingDefaultRule === 'event'
+                            ? eventsDefaultRule.take_layout_snapshot
+                            : undefined
+                    }
                     initialCollectionMode={
                         pageState.editingDefaultRule === 'event'
-                            ? eventsDefaultRule.collection_config.mode
-                            : traceDefaultRule.collection_config.mode
+                            ? eventsDefaultRule.collection_mode
+                            : traceDefaultRule.collection_mode
                     }
                     initialSampleRate={
                         pageState.editingDefaultRule === 'event'
-                            ? (eventsDefaultRule.collection_config.mode === 'sample_rate' ? eventsDefaultRule.collection_config.sample_rate : undefined)
-                            : (traceDefaultRule.collection_config.mode === 'sample_rate' ? traceDefaultRule.collection_config.sample_rate : undefined)
+                            ? eventsDefaultRule.sampling_rate
+                            : traceDefaultRule.sampling_rate
                     }
                 />
             )}
diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index 83cb0d021..0adde5fc1 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -1151,74 +1151,62 @@ export const emptyAlertsOverviewResponse = {
   }[],
 }
 
-export type EventTargetingResponse = {
-  meta: {
-    next: false,
-    previous: false,
-  },
-  result: {
-    default: EventTargetingRule,
-    overrides: EventTargetingRule[]
-  },
+export type CollectionMode = 'sampled' | 'timeline' | 'disabled';
+
+export type EventTargetingAttachmentConfig = 'none' | 'layout_snapshot' | 'screenshot';
+
+export type EventTargetingRulesResponse = {
+  rules: EventTargetingRule[] | null,
+  default_rule: EventTargetingRule
 };
 
-export type EventTargetingCollectionConfig =
-  | { mode: 'sample_rate'; sample_rate: number }
-  | { mode: 'timeline_only' }
-  | { mode: 'disable' };
 
 export type EventTargetingRuleRequest = {
-  rule: string,
-  collection_config: EventTargetingCollectionConfig,
+  condition: string,
+  collection_mode: CollectionMode,
+  sampling_rate: number,
   take_screenshot: boolean,
   take_layout_snapshot: boolean,
 }
 
 export type TraceTargetingRuleRequest = {
-  rule: string,
-  collection_config: TraceTargetingCollectionConfig,
+  condition: string,
+  collection_mode: CollectionMode,
+  sampling_rate: number,
 }
 
 export type SessionTargetingRuleRequest = {
-  rule: string,
+  condition: string,
   sampling_rate: number,
 }
 
 export type EventTargetingRule = {
   id: string,
-  rule: string,
-  collection_config: EventTargetingCollectionConfig,
+  condition: string,
+  collection_mode: CollectionMode,
+  sampling_rate: number,
   take_screenshot: boolean,
   take_layout_snapshot: boolean,
+  attachment_config?: EventTargetingAttachmentConfig,
   updated_at: string,
   updated_by: string,
 }
 
-export type TraceTargetingResponse = {
-  meta: {
-    next: false,
-    previous: false,
-  },
-  result: {
-    default: TraceTargetingRule,
-    overrides: TraceTargetingRule[]
-  },
+export type TraceTargetingRulesResponse = {
+  rules: TraceTargetingRule[] | null,
+  default_rule: TraceTargetingRule
 };
 
-export type TraceTargetingCollectionConfig =
-  | { mode: 'sample_rate'; sample_rate: number }
-  | { mode: 'timeline_only' }
-  | { mode: 'disable' };
-
 export type TraceTargetingRule = {
   id: string,
-  rule: string,
-  collection_config: TraceTargetingCollectionConfig,
+  condition: string,
+  collection_mode: CollectionMode,
+  sampling_rate: number,
   updated_at: string,
   updated_by: string,
 }
 
-export type SessionTargetingResponse = {
+export type SessionTargetingRulesResponse = {
   meta: {
     next: false,
     previous: false,
@@ -1228,7 +1216,7 @@ export type SessionTargetingResponse = {
 
 export type SessionTargetingRule = {
   id: string,
-  rule: string,
+  condition: string,
   sampling_rate: number,
   updated_at: string,
   updated_by: string,
@@ -2863,7 +2851,7 @@ export const updateEventTargetingRule = async (
   ruleData: EventTargetingRuleRequest,
 ) => {
   const opts = {
-    method: "PATCH",
+    method: "PUT",
     body: JSON.stringify(ruleData),
   }
 
@@ -2887,7 +2875,7 @@ export const updateTraceTargetingRule = async (
   ruleData: TraceTargetingRuleRequest,
 ) => {
   const opts = {
-    method: "PATCH",
+    method: "PUT",
     body: JSON.stringify(ruleData),
   }
 
@@ -2911,7 +2899,7 @@ export const updateSessionTargetingRule = async (
   ruleData: SessionTargetingRuleRequest,
 ) => {
   const opts = {
-    method: "PATCH",
+    method: "PUT",
     body: JSON.stringify(ruleData),
   }
 
diff --git a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
index b9eee38ff..a4ae3ffca 100644
--- a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
+++ b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
@@ -5,14 +5,18 @@ import { Button } from '@/app/components/button'
 import SamplingRateInput from '@/app/components/targeting/sampling_rate_input'
 import { useState, useEffect } from 'react'
 import { DialogDescription } from '@radix-ui/react-dialog'
+import { updateEventTargetingRule, updateTraceTargetingRule, UpdateEventTargetingRuleApiStatus, UpdateTraceTargetingRuleApiStatus } from '@/app/api/api_calls'
 
-type CollectionMode = 'sample_rate' | 'timeline_only' | 'disable'
+type CollectionMode = 'sampled' | 'timeline' | 'disabled'
 
 interface EditDefaultRuleDialogProps {
     isOpen: boolean
     ruleType: 'event' | 'trace'
     ruleId: string
     appId: string
+    condition: string
+    takeScreenshot?: boolean
+    takeLayoutSnapshot?: boolean
     initialCollectionMode: CollectionMode
     initialSampleRate?: number
     onClose: () => void
@@ -28,6 +32,9 @@ export default function EditDefaultRuleDialog({
     ruleType,
     ruleId,
     appId,
+    condition,
+    takeScreenshot,
+    takeLayoutSnapshot,
     initialCollectionMode,
     initialSampleRate
 }: EditDefaultRuleDialogProps) {
@@ -46,18 +53,33 @@ export default function EditDefaultRuleDialog({
         setIsSaving(true)
 
         try {
-            // TODO: Implement actual API call
-            // const result = await updateDefaultTargetingRule(appId, ruleId, {
-            //     collection_config: collectionMode === 'sample_rate'
-            //         ? { mode: 'sample_rate', sample_rate: sampleRate }
-            //         : { mode: collectionMode }
-            // })
-
-            // Simulate API call
-            await new Promise(resolve => setTimeout(resolve, 500))
-
-            // For now, always succeed
-            onSuccess(collectionMode, collectionMode === 'sample_rate' ? sampleRate : undefined)
+            if (ruleType === 'event') {
+                const result = await updateEventTargetingRule(appId, ruleId, {
+                    condition,
+                    collection_mode: collectionMode,
+                    sampling_rate: collectionMode === 'sampled' ? sampleRate : 0,
+                    take_screenshot: takeScreenshot || false,
+                    take_layout_snapshot: takeLayoutSnapshot || false
+                })
+
+                if (result.status === UpdateEventTargetingRuleApiStatus.Error) {
+                    onError(result.error || 'Failed to update rule')
+                    return
+                }
+            } else {
+                const result = await updateTraceTargetingRule(appId, ruleId, {
+                    condition,
+                    collection_mode: collectionMode,
+                    sampling_rate: collectionMode === 'sampled' ? sampleRate : 0
+                })
+
+                if (result.status === UpdateTraceTargetingRuleApiStatus.Error) {
+                    onError(result.error || 'Failed to update rule')
+                    return
+                }
+            }
+
+            onSuccess(collectionMode, collectionMode === 'sampled' ? sampleRate : undefined)
             onClose()
         } catch (error) {
             onError(error instanceof Error ? error.message : 'Failed to update rule')
@@ -77,6 +99,9 @@ export default function EditDefaultRuleDialog({
                     <DialogTitle className="font-display text-2xl">
                         Modify Default {displayName} Behaviour
                     </DialogTitle>
+                    <DialogDescription className="sr-only">
+                        Configure collection settings for default {displayNameLower} rule
+                    </DialogDescription>
                 </DialogHeader>
 
                 <div className="space-y-6 py-4">
@@ -85,16 +110,16 @@ export default function EditDefaultRuleDialog({
                             <input
                                 type="radio"
                                 name="collectionMode"
-                                value="sample_rate"
-                                checked={collectionMode === 'sample_rate'}
-                                onChange={() => setCollectionMode('sample_rate')}
+                                value="sampled"
+                                checked={collectionMode === 'sampled'}
+                                onChange={() => setCollectionMode('sampled')}
                                 disabled={isSaving}
                                 className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
                             />
                             <SamplingRateInput
                                 value={sampleRate}
                                 onChange={setSampleRate}
-                                disabled={collectionMode !== 'sample_rate' || isSaving}
+                                disabled={collectionMode !== 'sampled' || isSaving}
                                 type={displayNameLower as 'events' | 'traces'}
                             />
                         </label>
@@ -103,9 +128,9 @@ export default function EditDefaultRuleDialog({
                             <input
                                 type="radio"
                                 name="collectionMode"
-                                value="timeline_only"
-                                checked={collectionMode === 'timeline_only'}
-                                onChange={() => setCollectionMode('timeline_only')}
+                                value="timeline"
+                                checked={collectionMode === 'timeline'}
+                                onChange={() => setCollectionMode('timeline')}
                                 disabled={isSaving}
                                 className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
                             />
@@ -117,8 +142,8 @@ export default function EditDefaultRuleDialog({
                                 type="radio"
                                 name="collectionMode"
                                 value="disable"
-                                checked={collectionMode === 'disable'}
-                                onChange={() => setCollectionMode('disable')}
+                                checked={collectionMode === 'disabled'}
+                                onChange={() => setCollectionMode('disabled')}
                                 disabled={isSaving}
                                 className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
                             />
diff --git a/frontend/dashboard/app/components/targeting/event_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
new file mode 100644
index 000000000..455bd9123
--- /dev/null
+++ b/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
@@ -0,0 +1,473 @@
+"use client"
+
+import { Button } from '@/app/components/button'
+import { useEffect, useState, useId } from 'react'
+import { useRouter } from 'next/navigation'
+import {
+    EventTargetingRuleApiStatus,
+    EventTargetingConfigApiStatus,
+    EventTargetingRule,
+    EventTargetingConfigResponse,
+    fetchEventTargetingRuleFromServer,
+    fetchEventTargetingConfigFromServer,
+    createEventTargetingRule,
+    updateEventTargetingRule,
+    CreateEventTargetingRuleApiStatus,
+    UpdateEventTargetingRuleApiStatus,
+} from '@/app/api/api_calls'
+import LoadingBar from '@/app/components/loading_bar'
+import { toastPositive, toastNegative } from '@/app/utils/use_toast'
+import { EventCondition } from '@/app/utils/cel/conditions'
+import { celToConditions } from '@/app/utils/cel/cel_parser'
+import DropdownSelect, { DropdownSelectType } from '@/app/components/dropdown_select'
+import { eventConditionToCel } from '@/app/utils/cel/cel_generator'
+
+interface EventRuleBuilderProps {
+    mode: 'create' | 'edit'
+    appId: string
+    ruleId?: string
+    onCancel: () => void
+    onSaved: () => void
+}
+
+interface EventRuleState {
+    condition: EventCondition
+    collectionMode: 'sampled' | 'timeline' | 'disabled'
+    sampleRate: number
+    take_layout_snapshot: boolean
+    take_screenshot: boolean
+}
+
+type PageState = {
+    ruleData: EventTargetingRule | null
+    configData: EventTargetingConfigResponse | null
+    ruleApiStatus: EventTargetingRuleApiStatus
+    configApiStatus: EventTargetingConfigApiStatus
+    initialRuleState: EventRuleState | null
+    currentRuleState: EventRuleState | null
+    isSaving: boolean
+}
+
+export default function EventRuleBuilder({
+    mode,
+    appId,
+    ruleId,
+    onCancel,
+    onSaved: onSave,
+}: EventRuleBuilderProps) {
+    const router = useRouter()
+    const baseId = useId()
+    const [pageState, setPageState] = useState<PageState>({
+        ruleData: null,
+        configData: null,
+        ruleApiStatus: EventTargetingRuleApiStatus.Loading,
+        configApiStatus: EventTargetingConfigApiStatus.Loading,
+        initialRuleState: null,
+        currentRuleState: null,
+        isSaving: false
+    })
+
+    useEffect(() => {
+        fetchPageData()
+    }, [mode, ruleId, appId])
+
+    const fetchPageData = async () => {
+        setPageState(prev => ({
+            ...prev,
+            ruleApiStatus: EventTargetingRuleApiStatus.Loading,
+            configApiStatus: EventTargetingConfigApiStatus.Loading
+        }))
+
+        const configResult = await fetchEventTargetingConfigFromServer(appId)
+        if (configResult.status === EventTargetingConfigApiStatus.Error) {
+            setPageState(prev => ({
+                ...prev,
+                configApiStatus: EventTargetingConfigApiStatus.Error
+            }))
+            return
+        }
+
+        // Fetch rule data if in edit mode
+        let ruleData: EventTargetingRule | null = null
+        let ruleApiStatus = EventTargetingRuleApiStatus.Success
+        if (mode === 'edit' && ruleId) {
+            const ruleResult = await fetchEventTargetingRuleFromServer(appId, ruleId)
+            if (ruleResult.status === EventTargetingRuleApiStatus.Error) {
+                setPageState(prev => ({
+                    ...prev,
+                    ruleApiStatus: EventTargetingRuleApiStatus.Error,
+                    configApiStatus: EventTargetingConfigApiStatus.Success,
+                    configData: configResult.data
+                }))
+                return
+            }
+            ruleData = ruleResult.data
+        }
+
+        const initialState = convertToEventRuleState(ruleData, configResult.data, baseId)
+
+        setPageState({
+            ruleData,
+            configData: configResult.data,
+            ruleApiStatus,
+            configApiStatus: EventTargetingConfigApiStatus.Success,
+            initialRuleState: initialState,
+            currentRuleState: initialState,
+            isSaving: false
+        })
+    }
+
+    const convertToEventRuleState = (ruleData: EventTargetingRule | null, configData: EventTargetingConfigResponse, idPrefix: string): EventRuleState => {
+        if (ruleData) {
+            const parsedConditions = celToConditions(ruleData.condition)
+            const eventCondition = parsedConditions.event?.conditions[0] || createDefaultEventCondition(configData, idPrefix)
+
+            return {
+                condition: eventCondition,
+                collectionMode: ruleData.collection_mode,
+                sampleRate: ruleData.sampling_rate,
+                take_layout_snapshot: ruleData.take_layout_snapshot,
+                take_screenshot: ruleData.take_screenshot
+            }
+        } else {
+            return {
+                condition: createDefaultEventCondition(configData, idPrefix),
+                collectionMode: 'timeline',
+                sampleRate: 0,
+                take_layout_snapshot: false,
+                take_screenshot: false
+            }
+        }
+    }
+
+    const createDefaultEventCondition = (configData: EventTargetingConfigResponse, idPrefix: string): EventCondition => {
+        const config = (configData as any)
+        const firstEventConfig = config.events[0]
+
+        return {
+            id: `${idPrefix}-condition`,
+            type: firstEventConfig.type,
+            attrs: [],
+            ud_attrs: [],
+            session_attrs: [],
+        }
+    }
+
+    const getTitle = () => {
+        if (mode === 'create') {
+            return 'Create Event Rule'
+        }
+        return 'Edit Event Rule'
+    }
+
+    const getPrimaryActionLabel = () => {
+        return mode === 'create' ? 'Create Rule' : 'Save Changes'
+    }
+
+    const isLoading = () => {
+        return pageState.ruleApiStatus === EventTargetingRuleApiStatus.Loading ||
+               pageState.configApiStatus === EventTargetingConfigApiStatus.Loading
+    }
+
+    const hasError = () => {
+        return pageState.ruleApiStatus === EventTargetingRuleApiStatus.Error ||
+               pageState.configApiStatus === EventTargetingConfigApiStatus.Error
+    }
+
+    const isReady = () => {
+        return pageState.ruleApiStatus === EventTargetingRuleApiStatus.Success &&
+               pageState.configApiStatus === EventTargetingConfigApiStatus.Success
+    }
+
+    const hasChanges = () => {
+        if (mode === 'create') return true
+        return JSON.stringify(pageState.initialRuleState) !== JSON.stringify(pageState.currentRuleState)
+    }
+
+    const updateRuleState = (updates: Partial<EventRuleState>) => {
+        setPageState(prev => ({
+            ...prev,
+            currentRuleState: prev.currentRuleState ? { ...prev.currentRuleState, ...updates } : null
+        }))
+    }
+
+    const handleEventTypeChange = (newEventType: string) => {
+        if (!pageState.configData) return
+
+        // Handle both nested and flat response structures
+        const config = pageState.configData.result || (pageState.configData as any)
+        if (!config?.events) return
+
+        const eventConfig = config.events.find(e => e.type === newEventType)
+        if (!eventConfig) return
+
+        // Create new condition with updated event type and attrs
+        const attrs = (eventConfig.attrs || []).map((attr, idx) => ({
+            id: `${baseId}-attr-${idx}`,
+            key: attr.key,
+            type: attr.type,
+            value: attr.type === 'bool' ? false : attr.type === 'number' ? 0 : '',
+            hint: attr.hint,
+            operator: 'eq'
+        }))
+
+        const ud_attrs = eventConfig.has_ud_attrs
+            ? config.event_ud_attrs.map((attr, idx) => ({
+                id: `${baseId}-ud-${idx}`,
+                key: attr.key,
+                type: attr.type,
+                value: attr.type === 'bool' ? false : attr.type === 'number' ? 0 : '',
+                hint: attr.hint,
+                operator: 'eq'
+            }))
+            : []
+
+        const session_attrs = eventConfig.has_ud_attrs
+            ? config.session_attrs.map((attr, idx) => ({
+                id: `${baseId}-session-${idx}`,
+                key: attr.key,
+                type: attr.type,
+                value: attr.type === 'bool' ? false : attr.type === 'number' ? 0 : '',
+                hint: attr.hint,
+                operator: 'eq'
+            }))
+            : []
+
+        const newCondition: EventCondition = {
+            id: `${baseId}-condition`,
+            type: newEventType,
+            attrs,
+            ud_attrs,
+            session_attrs
+        }
+
+        updateRuleState({ condition: newCondition })
+    }
+
+    const handleSaveChanges = async () => {
+        if (!pageState.currentRuleState) {
+            return
+        }
+
+        setPageState(prev => ({ ...prev, isSaving: true }))
+
+        try {
+            const currentState = pageState.currentRuleState
+
+            const celCondition = eventConditionToCel(pageState.currentRuleState.condition)
+            if (!celCondition) {
+                setPageState(prev => ({ ...prev, isSaving: false }))
+                return
+            }
+
+            const ruleData = {
+                condition: celCondition,
+                collection_mode: currentState.collectionMode,
+                sampling_rate: currentState.sampleRate,
+                take_screenshot: currentState.take_screenshot,
+                take_layout_snapshot: currentState.take_layout_snapshot,
+            }
+
+            if (mode === 'create') {
+                const result = await createEventTargetingRule(appId, ruleData)
+                if (result.status === CreateEventTargetingRuleApiStatus.Success) {
+                    toastPositive('Event rule created successfully')
+                    onSave()
+                } else {
+                    toastNegative('Failed to create event rule', result.error || 'Unknown error')
+                }
+            } else {
+                const result = await updateEventTargetingRule(appId, ruleId!, ruleData)
+                if (result.status === UpdateEventTargetingRuleApiStatus.Success) {
+                    toastPositive('Event rule updated successfully')
+                    onSave()
+                } else {
+                    toastNegative('Failed to update event rule', result.error || 'Unknown error')
+                }
+            }
+        } catch (error) {
+            toastNegative('An error occurred', 'Please try again')
+        } finally {
+            setPageState(prev => ({ ...prev, isSaving: false }))
+        }
+    }
+
+    return (
+        <div className="flex flex-col selection:bg-yellow-200/75 items-start">
+            <p className="font-display text-4xl max-w-6xl text-center">{getTitle()}</p>
+            <div className="py-4" />
+
+            {/* Loading indicator */}
+            <div className={`py-1 w-full ${isLoading() ? 'visible' : 'invisible'}`}>
+                <LoadingBar />
+            </div>
+
+            {/* Error state */}
+            {hasError() && (
+                <div className="w-full flex flex-col items-center">
+                    <p className="text-normal font-body">
+                        Error loading rule. Please try again or go back.
+                    </p>
+                    <div className="py-4" />
+                    <Button
+                        variant="outline"
+                        onClick={onCancel}
+                        className="font-display border border-black select-none"
+                    >
+                        Go Back
+                    </Button>
+                </div>
+            )}
+
+            {/* Main content */}
+            {isReady() && (
+                <div className="w-full flex flex-col">
+                    {/* When section */}
+                    <div className="mb-6">
+                        <div className="flex items-center gap-3 mb-4">
+                            <span className="font-display text-xl">When</span>
+                            <DropdownSelect
+                                type={DropdownSelectType.SingleString}
+                                title="Select event type"
+                                items={(() => {
+                                    const config = pageState.configData?.result || (pageState.configData as any)
+                                    return config?.events?.map((e: any) => e.type) || []
+                                })()}
+                                initialSelected={pageState.currentRuleState?.condition.type || ''}
+                                onChangeSelected={(selected) => handleEventTypeChange(selected as string)}
+                            />
+                            <span className="font-display text-xl">event occurs</span>
+                        </div>
+                        <button className="text-sm font-body flex items-center gap-2">
+                            + Filter by attribute
+                        </button>
+                    </div>
+
+                    <div className='py-4' />
+
+                    {/* Then section */}
+                    <div className="mb-6">
+                        <p className="font-display text-xl mb-4">Then</p>
+
+                        {/* Collection config */}
+                        <div className="mb-4">
+                            <p className="font-body text-sm text-gray-500 mb-3">Collection</p>
+                            <div className="space-y-3 ml-4">
+                                <label className="flex items-center gap-3 cursor-pointer h-10">
+                                    <input
+                                        type="radio"
+                                        name="collectionMode"
+                                        value="sampled"
+                                        checked={pageState.currentRuleState?.collectionMode === 'sampled'}
+                                        onChange={() => updateRuleState({ collectionMode: 'sampled' })}
+                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                    />
+                                    <span className="text-sm font-body">Collect at sampling rate</span>
+                                    <input
+                                        type="number"
+                                        value={pageState.currentRuleState?.sampleRate || 100}
+                                        onChange={(e) => updateRuleState({ sampleRate: parseFloat(e.target.value) || 0 })}
+                                        min="0"
+                                        max="100"
+                                        step="0.000001"
+                                        className="w-32 border border-black rounded-md outline-hidden text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 font-body"
+                                    />
+                                    <span className="text-sm font-body">%</span>
+                                </label>
+
+                                <label className="flex items-center gap-3 cursor-pointer h-10">
+                                    <input
+                                        type="radio"
+                                        name="collectionMode"
+                                        value="timeline"
+                                        checked={pageState.currentRuleState?.collectionMode === 'timeline'}
+                                        onChange={() => updateRuleState({ collectionMode: 'timeline' })}
+                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                    />
+                                    <span className="text-sm font-body">Collect with timeline only</span>
+                                </label>
+
+                                <label className="flex items-center gap-3 cursor-pointer h-10">
+                                    <input
+                                        type="radio"
+                                        name="collectionMode"
+                                        value="disabled"
+                                        checked={pageState.currentRuleState?.collectionMode === 'disabled'}
+                                        onChange={() => updateRuleState({ collectionMode: 'disabled' })}
+                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                    />
+                                    <span className="text-sm font-body">Do not collect</span>
+                                </label>
+                            </div>
+                        </div>
+
+                        {/* Attachments */}
+                        <div className="mb-4">
+                            <p className="font-body text-sm text-gray-500 mb-3">Attachments</p>
+                            <div className="space-y-3 ml-4">
+                                <label className="flex items-center gap-3 cursor-pointer h-10">
+                                    <input
+                                        type="radio"
+                                        name="attachmentMode"
+                                        value="layout_snapshot"
+                                        checked={pageState.currentRuleState?.take_layout_snapshot === true && pageState.currentRuleState?.take_screenshot === false}
+                                        onChange={() => updateRuleState({ take_layout_snapshot: true, take_screenshot: false })}
+                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                    />
+                                    <span className="text-sm font-body">Take layout snapshot</span>
+                                </label>
+
+                                <label className="flex items-center gap-3 cursor-pointer h-10">
+                                    <input
+                                        type="radio"
+                                        name="attachmentMode"
+                                        value="screenshot"
+                                        checked={pageState.currentRuleState?.take_screenshot === true && pageState.currentRuleState?.take_layout_snapshot === false}
+                                        onChange={() => updateRuleState({ take_screenshot: true, take_layout_snapshot: false })}
+                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                    />
+                                    <span className="text-sm font-body">Take screenshot</span>
+                                </label>
+
+                                <label className="flex items-center gap-3 cursor-pointer h-10">
+                                    <input
+                                        type="radio"
+                                        name="attachmentMode"
+                                        value="none"
+                                        checked={pageState.currentRuleState?.take_screenshot === false && pageState.currentRuleState?.take_layout_snapshot === false}
+                                        onChange={() => updateRuleState({ take_screenshot: false, take_layout_snapshot: false })}
+                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                    />
+                                    <span className="text-sm font-body">No attachments</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Action buttons */}
+                    <div className="flex justify-end gap-3">
+                        <Button
+                            type="button"
+                            variant="outline"
+                            onClick={onCancel}
+                            className="font-display"
+                            disabled={pageState.isSaving}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            type="button"
+                            variant="outline"
+                            onClick={handleSaveChanges}
+                            className="font-display border border-black"
+                            disabled={!hasChanges()}
+                            loading={pageState.isSaving}
+                        >
+                            {getPrimaryActionLabel()}
+                        </Button>
+                    </div>
+                </div>
+            )}
+        </div>
+    )
+}
diff --git a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
deleted file mode 100644
index be65b49a4..000000000
--- a/frontend/dashboard/app/components/targeting/event_trace_rule_builder.tsx
+++ /dev/null
@@ -1,469 +0,0 @@
-"use client"
-
-import { Button } from '@/app/components/button'
-import { useEffect, useState } from 'react'
-import { useRouter } from 'next/navigation'
-import {
-    EventTargetingRuleApiStatus,
-    TraceTargetingRuleApiStatus,
-    EventTargetingConfigApiStatus,
-    TraceTargetingConfigApiStatus,
-    EventTargetingRule,
-    TraceTargetingRule,
-    EventTargetingConfigResponse,
-    TraceTargetingConfigResponse,
-    fetchEventTargetingRuleFromServer,
-    fetchTraceTargetingRuleFromServer,
-    fetchEventTargetingConfigFromServer,
-    fetchTraceTargetingConfigFromServer,
-    createEventTargetingRule,
-    createTraceTargetingRule,
-    updateEventTargetingRule,
-    updateTraceTargetingRule,
-    CreateEventTargetingRuleApiStatus,
-    CreateTraceTargetingRuleApiStatus,
-    UpdateEventTargetingRuleApiStatus,
-    UpdateTraceTargetingRuleApiStatus,
-} from '@/app/api/api_calls'
-import LoadingBar from '@/app/components/loading_bar'
-import { toastPositive, toastNegative } from '@/app/utils/use_toast'
-
-interface EventTraceRuleBuilderProps {
-    type: 'event' | 'trace'
-    mode: 'create' | 'edit'
-    appId: string
-    ruleId?: string
-    onCancel: () => void
-    onPrimaryAction: () => void
-}
-
-type PageState = {
-    ruleData: EventTargetingRule | TraceTargetingRule | null
-    configData: EventTargetingConfigResponse | TraceTargetingConfigResponse | null
-    ruleApiStatus: EventTargetingRuleApiStatus | TraceTargetingRuleApiStatus
-    configApiStatus: EventTargetingConfigApiStatus | TraceTargetingConfigApiStatus
-    initialRuleState: string | null
-    currentRuleState: string | null
-    isSaving: boolean
-}
-
-type FormState = {
-    collectionMode: 'sample_rate' | 'timeline_only' | 'disable'
-    sampleRate: number
-    attachmentMode: 'layout_snapshot' | 'screenshot' | 'none'
-}
-
-export default function EventTraceRuleBuilder({
-    type,
-    mode,
-    appId,
-    ruleId,
-    onCancel,
-    onPrimaryAction,
-}: EventTraceRuleBuilderProps) {
-    const router = useRouter()
-    const [pageState, setPageState] = useState<PageState>({
-        ruleData: null,
-        configData: null,
-        ruleApiStatus: EventTargetingRuleApiStatus.Loading,
-        configApiStatus: EventTargetingConfigApiStatus.Loading,
-        initialRuleState: null,
-        currentRuleState: null,
-        isSaving: false
-    })
-
-    const [formState, setFormState] = useState<FormState>({
-        collectionMode: 'sample_rate',
-        sampleRate: 100,
-        attachmentMode: 'none'
-    })
-
-    useEffect(() => {
-        fetchPageData()
-    }, [mode, ruleId, appId, type])
-
-    const fetchPageData = async () => {
-        setPageState(prev => ({
-            ...prev,
-            ruleApiStatus: EventTargetingRuleApiStatus.Loading,
-            configApiStatus: EventTargetingConfigApiStatus.Loading
-        }))
-
-        if (type === 'event') {
-            const configResult = await fetchEventTargetingConfigFromServer(appId)
-            if (configResult.status === EventTargetingConfigApiStatus.Error) {
-                setPageState(prev => ({
-                    ...prev,
-                    configApiStatus: EventTargetingConfigApiStatus.Error
-                }))
-                return
-            }
-
-            // Fetch rule data if in edit mode
-            let ruleData = null
-            let ruleApiStatus = EventTargetingRuleApiStatus.Success
-            if (mode === 'edit' && ruleId) {
-                const ruleResult = await fetchEventTargetingRuleFromServer(appId, ruleId)
-                if (ruleResult.status === EventTargetingRuleApiStatus.Error) {
-                    setPageState(prev => ({
-                        ...prev,
-                        ruleApiStatus: EventTargetingRuleApiStatus.Error,
-                        configApiStatus: EventTargetingConfigApiStatus.Success,
-                        configData: configResult.data
-                    }))
-                    return
-                }
-                ruleData = ruleResult.data
-            }
-
-            const initialFormState = {
-                collectionMode: 'sample_rate' as const,
-                sampleRate: 100,
-                attachmentMode: 'none' as const
-            }
-            setFormState(initialFormState)
-            const initialState = JSON.stringify(initialFormState)
-            setPageState({
-                ruleData,
-                configData: configResult.data,
-                ruleApiStatus,
-                configApiStatus: EventTargetingConfigApiStatus.Success,
-                initialRuleState: initialState,
-                currentRuleState: initialState
-            })
-        } else {
-            const configResult = await fetchTraceTargetingConfigFromServer(appId)
-            if (configResult.status === TraceTargetingConfigApiStatus.Error) {
-                setPageState(prev => ({
-                    ...prev,
-                    configApiStatus: TraceTargetingConfigApiStatus.Error
-                }))
-                return
-            }
-
-            // Fetch rule data if in edit mode
-            let ruleData = null
-            let ruleApiStatus = TraceTargetingRuleApiStatus.Success
-            if (mode === 'edit' && ruleId) {
-                const ruleResult = await fetchTraceTargetingRuleFromServer(appId, ruleId)
-                if (ruleResult.status === TraceTargetingRuleApiStatus.Error) {
-                    setPageState(prev => ({
-                        ...prev,
-                        ruleApiStatus: TraceTargetingRuleApiStatus.Error,
-                        configApiStatus: TraceTargetingConfigApiStatus.Success,
-                        configData: configResult.data
-                    }))
-                    return
-                }
-                ruleData = ruleResult.data
-            }
-
-            const initialFormState = {
-                collectionMode: 'sample_rate' as const,
-                sampleRate: 100,
-                attachmentMode: 'none' as const
-            }
-            setFormState(initialFormState)
-            const initialState = JSON.stringify(initialFormState)
-            setPageState({
-                ruleData,
-                configData: ruleData,
-                ruleApiStatus,
-                configApiStatus: TraceTargetingConfigApiStatus.Success,
-                initialRuleState: initialState,
-                currentRuleState: initialState
-            })
-        }
-    }
-
-    const getTitle = () => {
-        const typeLabel = type === 'event' ? 'Event' : 'Trace'
-        if (mode === 'create') {
-            return `Create ${typeLabel} Rule`
-        }
-        return `Edit ${typeLabel} Rule`
-    }
-
-    const getPrimaryActionLabel = () => {
-        return mode === 'create' ? 'Create Rule' : 'Save Changes'
-    }
-
-    const isLoading = () => {
-        return pageState.ruleApiStatus === EventTargetingRuleApiStatus.Loading ||
-               pageState.ruleApiStatus === TraceTargetingRuleApiStatus.Loading ||
-               pageState.configApiStatus === EventTargetingConfigApiStatus.Loading ||
-               pageState.configApiStatus === TraceTargetingConfigApiStatus.Loading
-    }
-
-    const hasError = () => {
-        return pageState.ruleApiStatus === EventTargetingRuleApiStatus.Error ||
-               pageState.ruleApiStatus === TraceTargetingRuleApiStatus.Error ||
-               pageState.configApiStatus === EventTargetingConfigApiStatus.Error ||
-               pageState.configApiStatus === TraceTargetingConfigApiStatus.Error
-    }
-
-    const isReady = () => {
-        return (pageState.ruleApiStatus === EventTargetingRuleApiStatus.Success ||
-                pageState.ruleApiStatus === TraceTargetingRuleApiStatus.Success) &&
-               (pageState.configApiStatus === EventTargetingConfigApiStatus.Success ||
-                pageState.configApiStatus === TraceTargetingConfigApiStatus.Success)
-    }
-
-    const hasChanges = () => {
-        if (mode === 'create') return true
-        return pageState.initialRuleState !== pageState.currentRuleState
-    }
-
-    const updateFormState = (updates: Partial<FormState>) => {
-        const newFormState = { ...formState, ...updates }
-        setFormState(newFormState)
-        setPageState(prev => ({
-            ...prev,
-            currentRuleState: JSON.stringify(newFormState)
-        }))
-    }
-
-    const handlePrimaryAction = async () => {
-        setPageState(prev => ({ ...prev, isSaving: true }))
-
-        try {
-            // Build collection config
-            const collectionConfig = formState.collectionMode === 'sample_rate'
-                ? { mode: 'sample_rate' as const, sample_rate: formState.sampleRate }
-                : formState.collectionMode === 'timeline_only'
-                    ? { mode: 'timeline_only' as const }
-                    : { mode: 'disable' as const }
-
-            if (type === 'event') {
-                // Build event rule request
-                const ruleData = {
-                    rule: mode === 'edit' && pageState.ruleData ? pageState.ruleData.rule : 'event_type == "click"',
-                    collection_config: collectionConfig,
-                    take_screenshot: formState.attachmentMode === 'screenshot',
-                    take_layout_snapshot: formState.attachmentMode === 'layout_snapshot',
-                }
-
-                if (mode === 'create') {
-                    const result = await createEventTargetingRule(appId, ruleData)
-                    if (result.status === CreateEventTargetingRuleApiStatus.Success) {
-                        toastPositive('Event rule created successfully')
-                        onPrimaryAction()
-                    } else {
-                        toastNegative('Failed to create event rule', result.error || 'Unknown error')
-                    }
-                } else {
-                    const result = await updateEventTargetingRule(appId, ruleId!, ruleData)
-                    if (result.status === UpdateEventTargetingRuleApiStatus.Success) {
-                        toastPositive('Event rule updated successfully')
-                        onPrimaryAction()
-                    } else {
-                        toastNegative('Failed to update event rule', result.error || 'Unknown error')
-                    }
-                }
-            } else {
-                // Build trace rule request
-                const ruleData = {
-                    rule: mode === 'edit' && pageState.ruleData ? pageState.ruleData.rule : 'trace_name == "root"',
-                    collection_config: collectionConfig,
-                }
-
-                if (mode === 'create') {
-                    const result = await createTraceTargetingRule(appId, ruleData)
-                    if (result.status === CreateTraceTargetingRuleApiStatus.Success) {
-                        toastPositive('Trace rule created successfully')
-                        onPrimaryAction()
-                    } else {
-                        toastNegative('Failed to create trace rule', result.error || 'Unknown error')
-                    }
-                } else {
-                    const result = await updateTraceTargetingRule(appId, ruleId!, ruleData)
-                    if (result.status === UpdateTraceTargetingRuleApiStatus.Success) {
-                        toastPositive('Trace rule updated successfully')
-                        onPrimaryAction()
-                    } else {
-                        toastNegative('Failed to update trace rule', result.error || 'Unknown error')
-                    }
-                }
-            }
-        } catch (error) {
-            toastNegative('An error occurred', 'Please try again')
-        } finally {
-            setPageState(prev => ({ ...prev, isSaving: false }))
-        }
-    }
-
-    return (
-        <div className="flex flex-col selection:bg-yellow-200/75 items-start">
-            <p className="font-display text-4xl max-w-6xl text-center">{getTitle()}</p>
-            <div className="py-4" />
-
-            {/* Loading indicator */}
-            <div className={`py-1 w-full ${isLoading() ? 'visible' : 'invisible'}`}>
-                <LoadingBar />
-            </div>
-
-            {/* Error state */}
-            {hasError() && (
-                <div className="w-full flex flex-col items-center">
-                    <p className="text-normal font-body">
-                        Error loading rule. Please try again or go back.
-                    </p>
-                    <div className="py-4" />
-                    <Button
-                        variant="outline"
-                        onClick={onCancel}
-                        className="font-display border border-black select-none"
-                    >
-                        Go Back
-                    </Button>
-                </div>
-            )}
-
-            {/* Main content */}
-            {isReady() && (
-                <div className="w-full flex flex-col">
-                    {/* When section */}
-                    <div className="mb-6">
-                        <div className="flex items-center gap-3 mb-4">
-                            <span className="font-display text-lg">When</span>
-                            <div className="flex-1 px-4 py-2 border border-gray-300 rounded-md bg-gray-50">
-                                <code className="text-sm font-mono">
-                                    {mode === 'edit' && pageState.ruleData
-                                        ? pageState.ruleData.rule
-                                        : 'event_type == "click"'}
-                                </code>
-                            </div>
-                        </div>
-                        <button className="text-sm font-body text-gray-600 flex items-center gap-2 ml-14">
-                            + Filter by attribute
-                        </button>
-                    </div>
-
-                    {/* Then section */}
-                    <div className="mb-6">
-                        <p className="font-display text-lg mb-4">Then</p>
-
-                        {/* Collection config */}
-                        <div className="mb-4">
-                            <p className="font-body text-sm text-gray-500 mb-3">Collection</p>
-                            <div className="space-y-3 ml-4">
-                                <label className="flex items-center gap-3 cursor-pointer h-10">
-                                    <input
-                                        type="radio"
-                                        name="collectionMode"
-                                        value="sample_rate"
-                                        checked={formState.collectionMode === 'sample_rate'}
-                                        onChange={() => updateFormState({ collectionMode: 'sample_rate' })}
-                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                                    />
-                                    <span className="text-sm font-body">Collect at sampling rate</span>
-                                    <input
-                                        type="number"
-                                        value={formState.sampleRate}
-                                        onChange={(e) => updateFormState({ sampleRate: parseFloat(e.target.value) || 0 })}
-                                        min="0"
-                                        max="100"
-                                        step="0.000001"
-                                        className="w-32 border border-black rounded-md outline-hidden text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 font-body"
-                                    />
-                                    <span className="text-sm font-body">%</span>
-                                </label>
-
-                                <label className="flex items-center gap-3 cursor-pointer h-10">
-                                    <input
-                                        type="radio"
-                                        name="collectionMode"
-                                        value="timeline_only"
-                                        checked={formState.collectionMode === 'timeline_only'}
-                                        onChange={() => updateFormState({ collectionMode: 'timeline_only' })}
-                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                                    />
-                                    <span className="text-sm font-body">Collect with timeline only</span>
-                                </label>
-
-                                <label className="flex items-center gap-3 cursor-pointer h-10">
-                                    <input
-                                        type="radio"
-                                        name="collectionMode"
-                                        value="disable"
-                                        checked={formState.collectionMode === 'disable'}
-                                        onChange={() => updateFormState({ collectionMode: 'disable' })}
-                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                                    />
-                                    <span className="text-sm font-body">Never collect</span>
-                                </label>
-                            </div>
-                        </div>
-
-                        {/* Attachments (only for events) */}
-                        {type === 'event' && (
-                            <div className="mb-4">
-                                <p className="font-body text-sm text-gray-500 mb-3">Attachments</p>
-                                <div className="space-y-3 ml-4">
-                                    <label className="flex items-center gap-3 cursor-pointer h-10">
-                                        <input
-                                            type="radio"
-                                            name="attachmentMode"
-                                            value="layout_snapshot"
-                                            checked={formState.attachmentMode === 'layout_snapshot'}
-                                            onChange={() => updateFormState({ attachmentMode: 'layout_snapshot' })}
-                                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                                        />
-                                        <span className="text-sm font-body">Take layout snapshot</span>
-                                    </label>
-
-                                    <label className="flex items-center gap-3 cursor-pointer h-10">
-                                        <input
-                                            type="radio"
-                                            name="attachmentMode"
-                                            value="screenshot"
-                                            checked={formState.attachmentMode === 'screenshot'}
-                                            onChange={() => updateFormState({ attachmentMode: 'screenshot' })}
-                                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                                        />
-                                        <span className="text-sm font-body">Take screenshot</span>
-                                    </label>
-
-                                    <label className="flex items-center gap-3 cursor-pointer h-10">
-                                        <input
-                                            type="radio"
-                                            name="attachmentMode"
-                                            value="none"
-                                            checked={formState.attachmentMode === 'none'}
-                                            onChange={() => updateFormState({ attachmentMode: 'none' })}
-                                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                                        />
-                                        <span className="text-sm font-body">No attachments</span>
-                                    </label>
-                                </div>
-                            </div>
-                        )}
-                    </div>
-
-                    {/* Action buttons */}
-                    <div className="flex justify-end gap-3">
-                        <Button
-                            type="button"
-                            variant="outline"
-                            onClick={onCancel}
-                            className="font-display"
-                            disabled={pageState.isSaving}
-                        >
-                            Cancel
-                        </Button>
-                        <Button
-                            type="button"
-                            variant="outline"
-                            onClick={handlePrimaryAction}
-                            className="font-display border border-black"
-                            disabled={!hasChanges()}
-                            loading={pageState.isSaving}
-                        >
-                            {getPrimaryActionLabel()}
-                        </Button>
-                    </div>
-                </div>
-            )}
-        </div>
-    )
-}
diff --git a/frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx b/frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx
index 64a5f7544..ab080c9aa 100644
--- a/frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx
+++ b/frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx
@@ -1,18 +1,18 @@
 "use client"
 
-import { EventTargetingRule, TraceTargetingRule, EventTargetingCollectionConfig, EventTargetingAttachmentConfig } from '@/app/api/api_calls'
+import { EventTargetingRule, TraceTargetingRule, CollectionMode, EventTargetingAttachmentConfig } from '@/app/api/api_calls'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/app/components/table'
 import { formatDateToHumanReadableDate, formatDateToHumanReadableTime } from '@/app/utils/time_utils'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/tooltip'
 import { Info } from 'lucide-react'
 
-const getCollectionConfigDisplay = (collectionConfig: EventTargetingCollectionConfig): string => {
-    switch (collectionConfig.mode) {
-        case 'sample_rate':
-            return `Collect all at ${collectionConfig.sample_rate}% sample rate`
-        case 'timeline_only':
+const getCollectionConfigDisplay = (collectionMode: CollectionMode, samplingRate?: number): string => {
+    switch (collectionMode) {
+        case 'sampled':
+            return `Collect all at ${samplingRate}% sample rate`
+        case 'timeline':
             return 'Collect with session timeline only'
-        case 'disable':
+        case 'disabled':
             return 'Do not collect'
         default:
             return 'Unknown'
@@ -38,10 +38,6 @@ interface RulesTableProps {
 }
 
 export default function RulesTable({ rules, onRuleClick }: RulesTableProps) {
-    if (rules.length === 0) {
-        return null
-    }
-
     return (
         <>
             <div className="py-6" />
@@ -59,47 +55,54 @@ export default function RulesTable({ rules, onRuleClick }: RulesTableProps) {
                 </Tooltip>
             </div>
             <div className="py-2" />
-            <div className="overflow-hidden">
-                <div className="overflow-x-auto">
-                    <Table className="font-display">
-                        <TableHeader className="sticky top-0 bg-white z-10">
-                            <TableRow>
-                                <TableHead className="w-[52%]">Rules</TableHead>
-                                <TableHead className="w-[24%] text-center">Updated At</TableHead>
-                                <TableHead className="w-[24%] text-center">Updated By</TableHead>
-                            </TableRow>
-                        </TableHeader>
-                    </Table>
+
+            {rules.length === 0 ? (
+                <div className="text-sm font-body text-gray-500">
+                    No override rules configured
                 </div>
-                <div className="max-h-[400px] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-transparent hover:[&::-webkit-scrollbar-thumb]:bg-gray-300 focus-within:[&::-webkit-scrollbar-thumb]:bg-gray-300">
-                    <Table className="font-display">
-                        <TableBody>
-                            {rules.map((dataFilter, idx) => (
-                                <TableRow
-                                    key={`${idx}-${dataFilter.id}`}
-                                    className="font-body cursor-pointer hover:bg-yellow-200 focus-visible:border-yellow-200 select-none"
-                                    onClick={() => onRuleClick(dataFilter)}
-                                >
-                                    <TableCell className="w-[52%] p-4">
-                                        <p className='truncate select-none font-mono text-sm'>{dataFilter.rule}</p>
-                                        <div className='py-1' />
-                                        <p className='text-xs truncate text-gray-500 select-none'>{getCollectionConfigDisplay(dataFilter.collection_config)}</p>
-                                        <p className='text-xs truncate text-gray-500 select-none'>{getAttachmentConfigDisplay('attachment_config' in dataFilter ? dataFilter.attachment_config : undefined)}</p>
-                                    </TableCell>
-                                    <TableCell className="w-[24%] text-center p-4">
-                                        <p className='truncate select-none'>{formatDateToHumanReadableDate(dataFilter.updated_at)}</p>
-                                        <div className='py-1' />
-                                        <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(dataFilter.updated_at)}</p>
-                                    </TableCell>
-                                    <TableCell className="w-[24%] text-center p-4">
-                                        <p className='truncate select-none'>{dataFilter.updated_by}</p>
-                                    </TableCell>
+            ) : (
+                <div className="overflow-hidden">
+                    <div className="overflow-x-auto">
+                        <Table className="font-display">
+                            <TableHeader className="sticky top-0 bg-white z-10">
+                                <TableRow>
+                                    <TableHead className="w-[52%]">Rules</TableHead>
+                                    <TableHead className="w-[24%] text-center">Updated At</TableHead>
+                                    <TableHead className="w-[24%] text-center">Updated By</TableHead>
                                 </TableRow>
-                            ))}
-                        </TableBody>
-                    </Table>
+                            </TableHeader>
+                        </Table>
+                    </div>
+                    <div className="max-h-[400px] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-transparent hover:[&::-webkit-scrollbar-thumb]:bg-gray-300 focus-within:[&::-webkit-scrollbar-thumb]:bg-gray-300">
+                        <Table className="font-display">
+                            <TableBody>
+                                {rules.map((dataFilter, idx) => (
+                                    <TableRow
+                                        key={`${idx}-${dataFilter.id}`}
+                                        className="font-body cursor-pointer hover:bg-yellow-200 focus-visible:border-yellow-200 select-none"
+                                        onClick={() => onRuleClick(dataFilter)}
+                                    >
+                                        <TableCell className="w-[52%] p-4">
+                                            <p className='truncate select-none font-mono text-sm'>{dataFilter.condition}</p>
+                                            <div className='py-1' />
+                                            <p className='text-xs truncate text-gray-500 select-none'>{getCollectionConfigDisplay(dataFilter.collection_mode, dataFilter.sampling_rate)}</p>
+                                            <p className='text-xs truncate text-gray-500 select-none'>{getAttachmentConfigDisplay('attachment_config' in dataFilter ? dataFilter.attachment_config : undefined)}</p>
+                                        </TableCell>
+                                        <TableCell className="w-[24%] text-center p-4">
+                                            <p className='truncate select-none'>{formatDateToHumanReadableDate(dataFilter.updated_at)}</p>
+                                            <div className='py-1' />
+                                            <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(dataFilter.updated_at)}</p>
+                                        </TableCell>
+                                        <TableCell className="w-[24%] text-center p-4">
+                                            <p className='truncate select-none'>{dataFilter.updated_by}</p>
+                                        </TableCell>
+                                    </TableRow>
+                                ))}
+                            </TableBody>
+                        </Table>
+                    </div>
                 </div>
-            </div>
+            )}
         </>
     )
 }
diff --git a/frontend/dashboard/app/components/targeting/session_targeting_rules_table.tsx b/frontend/dashboard/app/components/targeting/session_targeting_rules_table.tsx
index bded715d0..c4fa14e95 100644
--- a/frontend/dashboard/app/components/targeting/session_targeting_rules_table.tsx
+++ b/frontend/dashboard/app/components/targeting/session_targeting_rules_table.tsx
@@ -15,7 +15,11 @@ interface SessionTargetingRulesTableProps {
 
 export default function SessionTargetingRulesTable({ rules, onRuleClick }: SessionTargetingRulesTableProps) {
     if (rules.length === 0) {
-        return null
+        return (
+            <div className="text-sm font-body text-gray-500">
+                No session timeline rules configured
+            </div>
+        )
     }
 
     return (
@@ -41,7 +45,7 @@ export default function SessionTargetingRulesTable({ rules, onRuleClick }: Sessi
                                 onClick={() => onRuleClick(rule)}
                             >
                                 <TableCell className="w-[52%] p-4">
-                                    <p className='truncate select-none font-mono text-sm'>{rule.rule}</p>
+                                    <p className='truncate select-none font-mono text-sm'>{rule.condition}</p>
                                     <div className='py-1' />
                                     <p className='text-xs truncate text-gray-500 select-none'>{getSamplingRateDisplay(rule.sampling_rate)}</p>
                                 </TableCell>
diff --git a/frontend/dashboard/app/components/targeting/trace_rule_builder.tsx b/frontend/dashboard/app/components/targeting/trace_rule_builder.tsx
new file mode 100644
index 000000000..83bcd4c26
--- /dev/null
+++ b/frontend/dashboard/app/components/targeting/trace_rule_builder.tsx
@@ -0,0 +1,414 @@
+"use client"
+
+import { Button } from '@/app/components/button'
+import { useEffect, useState, useId } from 'react'
+import { useRouter } from 'next/navigation'
+import {
+    TraceTargetingRuleApiStatus,
+    TraceTargetingConfigApiStatus,
+    TraceTargetingRule,
+    TraceTargetingConfigResponse,
+    fetchTraceTargetingRuleFromServer,
+    fetchTraceTargetingConfigFromServer,
+    createTraceTargetingRule,
+    updateTraceTargetingRule,
+    CreateTraceTargetingRuleApiStatus,
+    UpdateTraceTargetingRuleApiStatus,
+} from '@/app/api/api_calls'
+import LoadingBar from '@/app/components/loading_bar'
+import { toastPositive, toastNegative } from '@/app/utils/use_toast'
+import { TraceCondition } from '@/app/utils/cel/conditions'
+import { celToConditions } from '@/app/utils/cel/cel_parser'
+import DropdownSelect, { DropdownSelectType } from '@/app/components/dropdown_select'
+import { traceConditionToCel } from '@/app/utils/cel/cel_generator'
+
+interface TraceRuleBuilderProps {
+    mode: 'create' | 'edit'
+    appId: string
+    ruleId?: string
+    onCancel: () => void
+    onPrimaryAction: () => void
+}
+
+interface TraceRuleState {
+    condition: TraceCondition
+    collectionMode: 'sampled' | 'timeline' | 'disabled'
+    sampleRate: number
+}
+
+type PageState = {
+    ruleData: TraceTargetingRule | null
+    configData: TraceTargetingConfigResponse | null
+    ruleApiStatus: TraceTargetingRuleApiStatus
+    configApiStatus: TraceTargetingConfigApiStatus
+    initialRuleState: TraceRuleState | null
+    currentRuleState: TraceRuleState | null
+    isSaving: boolean
+}
+
+export default function TraceRuleBuilder({
+    mode,
+    appId,
+    ruleId,
+    onCancel,
+    onPrimaryAction: onSave,
+}: TraceRuleBuilderProps) {
+    const router = useRouter()
+    const baseId = useId()
+    const [pageState, setPageState] = useState<PageState>({
+        ruleData: null,
+        configData: null,
+        ruleApiStatus: TraceTargetingRuleApiStatus.Loading,
+        configApiStatus: TraceTargetingConfigApiStatus.Loading,
+        initialRuleState: null,
+        currentRuleState: null,
+        isSaving: false
+    })
+
+    useEffect(() => {
+        fetchPageData()
+    }, [mode, ruleId, appId])
+
+    const fetchPageData = async () => {
+        setPageState(prev => ({
+            ...prev,
+            ruleApiStatus: TraceTargetingRuleApiStatus.Loading,
+            configApiStatus: TraceTargetingConfigApiStatus.Loading
+        }))
+
+        const configResult = await fetchTraceTargetingConfigFromServer(appId)
+        if (configResult.status === TraceTargetingConfigApiStatus.Error) {
+            setPageState(prev => ({
+                ...prev,
+                configApiStatus: TraceTargetingConfigApiStatus.Error
+            }))
+            return
+        }
+
+        // Fetch rule data if in edit mode
+        let ruleData: TraceTargetingRule | null = null
+        let ruleApiStatus = TraceTargetingRuleApiStatus.Success
+        if (mode === 'edit' && ruleId) {
+            const ruleResult = await fetchTraceTargetingRuleFromServer(appId, ruleId)
+            if (ruleResult.status === TraceTargetingRuleApiStatus.Error) {
+                setPageState(prev => ({
+                    ...prev,
+                    ruleApiStatus: TraceTargetingRuleApiStatus.Error,
+                    configApiStatus: TraceTargetingConfigApiStatus.Success,
+                    configData: configResult.data
+                }))
+                return
+            }
+            ruleData = ruleResult.data
+        }
+
+        const initialState = convertToTraceRuleState(ruleData, configResult.data, baseId)
+
+        setPageState({
+            ruleData,
+            configData: configResult.data,
+            ruleApiStatus,
+            configApiStatus: TraceTargetingConfigApiStatus.Success,
+            initialRuleState: initialState,
+            currentRuleState: initialState,
+            isSaving: false
+        })
+    }
+
+    const convertToTraceRuleState = (ruleData: TraceTargetingRule | null, configData: TraceTargetingConfigResponse, idPrefix: string): TraceRuleState => {
+        if (ruleData) {
+            const parsedConditions = celToConditions(ruleData.condition)
+            const traceCondition = parsedConditions.trace?.conditions[0] || createDefaultTraceCondition(configData, idPrefix)
+
+            return {
+                condition: traceCondition,
+                collectionMode: ruleData.collection_mode,
+                sampleRate: ruleData.sampling_rate
+            }
+        } else {
+            return {
+                condition: createDefaultTraceCondition(configData, idPrefix),
+                collectionMode: 'timeline',
+                sampleRate: 0
+            }
+        }
+    }
+
+    const createDefaultTraceCondition = (configData: TraceTargetingConfigResponse, idPrefix: string): TraceCondition => {
+        const config = (configData as any)
+        const firstTraceConfig = config?.trace_config?.[0]
+
+        return {
+            id: `${idPrefix}-condition`,
+            spanName: firstTraceConfig?.name || '',
+            operator: 'eq',
+            ud_attrs: [],
+            session_attrs: [],
+        }
+    }
+
+    const getTitle = () => {
+        if (mode === 'create') {
+            return 'Create Trace Rule'
+        }
+        return 'Edit Trace Rule'
+    }
+
+    const getPrimaryActionLabel = () => {
+        return mode === 'create' ? 'Create Rule' : 'Save Changes'
+    }
+
+    const isLoading = () => {
+        return pageState.ruleApiStatus === TraceTargetingRuleApiStatus.Loading ||
+               pageState.configApiStatus === TraceTargetingConfigApiStatus.Loading
+    }
+
+    const hasError = () => {
+        return pageState.ruleApiStatus === TraceTargetingRuleApiStatus.Error ||
+               pageState.configApiStatus === TraceTargetingConfigApiStatus.Error
+    }
+
+    const isReady = () => {
+        return pageState.ruleApiStatus === TraceTargetingRuleApiStatus.Success &&
+               pageState.configApiStatus === TraceTargetingConfigApiStatus.Success
+    }
+
+    const hasChanges = () => {
+        if (mode === 'create') return true
+        return JSON.stringify(pageState.initialRuleState) !== JSON.stringify(pageState.currentRuleState)
+    }
+
+    const updateRuleState = (updates: Partial<TraceRuleState>) => {
+        setPageState(prev => ({
+            ...prev,
+            currentRuleState: prev.currentRuleState ? { ...prev.currentRuleState, ...updates } : null
+        }))
+    }
+
+    const handleSpanNameChange = (newSpanName: string) => {
+        if (!pageState.configData) return
+
+        // Handle both nested and flat response structures
+        const config = pageState.configData.result || (pageState.configData as any)
+        if (!config?.trace_config) return
+
+        const traceConfig = config.trace_config.find(t => t.name === newSpanName)
+        if (!traceConfig) return
+
+        // Create new condition with updated span name
+        const ud_attrs = traceConfig.has_ud_attrs
+            ? config.trace_ud_attrs.map((attr, idx) => ({
+                id: `${baseId}-ud-${idx}`,
+                key: attr.key,
+                type: attr.type,
+                value: attr.type === 'bool' ? false : attr.type === 'number' ? 0 : '',
+                hint: attr.hint,
+                operator: 'eq'
+            }))
+            : []
+
+        const session_attrs = traceConfig.has_ud_attrs
+            ? config.session_attrs.map((attr, idx) => ({
+                id: `${baseId}-session-${idx}`,
+                key: attr.key,
+                type: attr.type,
+                value: attr.type === 'bool' ? false : attr.type === 'number' ? 0 : '',
+                hint: attr.hint,
+                operator: 'eq'
+            }))
+            : []
+
+        const newCondition: TraceCondition = {
+            id: `${baseId}-condition`,
+            spanName: newSpanName,
+            operator: 'eq',
+            ud_attrs,
+            session_attrs
+        }
+
+        updateRuleState({ condition: newCondition })
+    }
+
+    const handleSaveChanges = async () => {
+        if (!pageState.currentRuleState) {
+            return
+        }
+
+        setPageState(prev => ({ ...prev, isSaving: true }))
+
+        try {
+            const currentState = pageState.currentRuleState
+
+            const celCondition = traceConditionToCel(pageState.currentRuleState.condition)
+            if (!celCondition) {
+                setPageState(prev => ({ ...prev, isSaving: false }))
+                return
+            }
+
+            const ruleData = {
+                condition: celCondition,
+                collection_mode: currentState.collectionMode,
+                sampling_rate: currentState.sampleRate,
+            }
+
+            if (mode === 'create') {
+                const result = await createTraceTargetingRule(appId, ruleData)
+                if (result.status === CreateTraceTargetingRuleApiStatus.Success) {
+                    toastPositive('Trace rule created successfully')
+                    onSave()
+                } else {
+                    toastNegative('Failed to create trace rule', result.error || 'Unknown error')
+                }
+            } else {
+                const result = await updateTraceTargetingRule(appId, ruleId!, ruleData)
+                if (result.status === UpdateTraceTargetingRuleApiStatus.Success) {
+                    toastPositive('Trace rule updated successfully')
+                    onSave()
+                } else {
+                    toastNegative('Failed to update trace rule', result.error || 'Unknown error')
+                }
+            }
+        } catch (error) {
+            toastNegative('An error occurred', 'Please try again')
+        } finally {
+            setPageState(prev => ({ ...prev, isSaving: false }))
+        }
+    }
+
+    return (
+        <div className="flex flex-col selection:bg-yellow-200/75 items-start">
+            <p className="font-display text-4xl max-w-6xl text-center">{getTitle()}</p>
+            <div className="py-4" />
+
+            {/* Loading indicator */}
+            <div className={`py-1 w-full ${isLoading() ? 'visible' : 'invisible'}`}>
+                <LoadingBar />
+            </div>
+
+            {/* Error state */}
+            {hasError() && (
+                <div className="w-full flex flex-col items-center">
+                    <p className="text-normal font-body">
+                        Error loading rule. Please try again or go back.
+                    </p>
+                    <div className="py-4" />
+                    <Button
+                        variant="outline"
+                        onClick={onCancel}
+                        className="font-display border border-black select-none"
+                    >
+                        Go Back
+                    </Button>
+                </div>
+            )}
+
+            {/* Main content */}
+            {isReady() && (
+                <div className="w-full flex flex-col">
+                    {/* When section */}
+                    <div className="mb-6">
+                        <div className="flex items-center gap-3 mb-4">
+                            <span className="font-display text-xl">When</span>
+                            <DropdownSelect
+                                type={DropdownSelectType.SingleString}
+                                title="Select span name"
+                                items={(() => {
+                                    const config = pageState.configData?.result || (pageState.configData as any)
+                                    return config?.trace_config?.map((t: any) => t.name) || []
+                                })()}
+                                initialSelected={pageState.currentRuleState?.condition.spanName || ''}
+                                onChangeSelected={(selected) => handleSpanNameChange(selected as string)}
+                            />
+                            <span className="font-display text-xl">span ends</span>
+                        </div>
+                        <button className="text-sm font-body flex items-center gap-2">
+                            + Filter by attribute
+                        </button>
+                    </div>
+
+                    <div className='py-4' />
+
+                    {/* Then section */}
+                    <div className="mb-6">
+                        <p className="font-display text-xl mb-4">Then</p>
+
+                        {/* Collection config */}
+                        <div className="mb-4">
+                            <p className="font-body text-sm text-gray-500 mb-3">Collection</p>
+                            <div className="space-y-3 ml-4">
+                                <label className="flex items-center gap-3 cursor-pointer h-10">
+                                    <input
+                                        type="radio"
+                                        name="collectionMode"
+                                        value="sampled"
+                                        checked={pageState.currentRuleState?.collectionMode === 'sampled'}
+                                        onChange={() => updateRuleState({ collectionMode: 'sampled' })}
+                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                    />
+                                    <span className="text-sm font-body">Collect at sampling rate</span>
+                                    <input
+                                        type="number"
+                                        value={pageState.currentRuleState?.sampleRate || 100}
+                                        onChange={(e) => updateRuleState({ sampleRate: parseFloat(e.target.value) || 0 })}
+                                        min="0"
+                                        max="100"
+                                        step="0.000001"
+                                        className="w-32 border border-black rounded-md outline-hidden text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 font-body"
+                                    />
+                                    <span className="text-sm font-body">%</span>
+                                </label>
+
+                                <label className="flex items-center gap-3 cursor-pointer h-10">
+                                    <input
+                                        type="radio"
+                                        name="collectionMode"
+                                        value="timeline"
+                                        checked={pageState.currentRuleState?.collectionMode === 'timeline'}
+                                        onChange={() => updateRuleState({ collectionMode: 'timeline' })}
+                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                    />
+                                    <span className="text-sm font-body">Collect with timeline only</span>
+                                </label>
+
+                                <label className="flex items-center gap-3 cursor-pointer h-10">
+                                    <input
+                                        type="radio"
+                                        name="collectionMode"
+                                        value="disabled"
+                                        checked={pageState.currentRuleState?.collectionMode === 'disabled'}
+                                        onChange={() => updateRuleState({ collectionMode: 'disabled' })}
+                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                    />
+                                    <span className="text-sm font-body">Do not collect</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Action buttons */}
+                    <div className="flex justify-end gap-3">
+                        <Button
+                            type="button"
+                            variant="outline"
+                            onClick={onCancel}
+                            className="font-display"
+                            disabled={pageState.isSaving}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            type="button"
+                            variant="outline"
+                            onClick={handleSaveChanges}
+                            className="font-display border border-black"
+                            disabled={!hasChanges()}
+                            loading={pageState.isSaving}
+                        >
+                            {getPrimaryActionLabel()}
+                        </Button>
+                    </div>
+                </div>
+            )}
+        </div>
+    )
+}
diff --git a/frontend/dashboard/app/utils/cel/cel_generator.ts b/frontend/dashboard/app/utils/cel/cel_generator.ts
index cffa989ab..4d842fef5 100644
--- a/frontend/dashboard/app/utils/cel/cel_generator.ts
+++ b/frontend/dashboard/app/utils/cel/cel_generator.ts
@@ -301,6 +301,38 @@ function wrapConditionGroups(conditionGroups: string[]): string {
   return wrappedGroups.join(' && ')
 }
 
+/**
+ * Converts a single EventCondition into a CEL expression string.
+ * This is a simpler version for when you only have one event condition.
+ * Example output: '(event_type == "anr" && exception.handled == false)'
+ */
+export function eventConditionToCel(condition: EventCondition): string | null {
+  const parts = buildEventConditionParts(condition)
+
+  if (parts.length === 0) {
+    return null
+  }
+
+  const combined = combineConditionParts(parts)
+  return `(${combined})`
+}
+
+/**
+ * Converts a single TraceCondition into a CEL expression string.
+ * This is a simpler version for when you only have one trace condition.
+ * Example output: '(span_name.contains("HTTP") && trace.user_defined_attrs.is_critical == true)'
+ */
+export function traceConditionToCel(condition: TraceCondition): string | null {
+  const parts = buildTraceConditionParts(condition)
+
+  if (parts.length === 0) {
+    return null
+  }
+
+  const combined = combineConditionParts(parts)
+  return `(${combined})`
+}
+
 /**
  * Converts a structured `ParsedConditions` object into a final CEL expression string.
  * This is the main entry point for the CEL generation logic.
@@ -318,4 +350,4 @@ export function conditionsToCel(parsedConditions: ParsedConditions): string | nu
   }
 
   return wrapConditionGroups(conditionGroups)
-}
\ No newline at end of file
+}
diff --git a/self-host/postgres/20251107111347_create_event_targeting_rules_table.sql b/self-host/postgres/20251107111347_create_event_targeting_rules_table.sql
index 837dd6329..633a4fe5d 100644
--- a/self-host/postgres/20251107111347_create_event_targeting_rules_table.sql
+++ b/self-host/postgres/20251107111347_create_event_targeting_rules_table.sql
@@ -8,6 +8,7 @@ create table if not exists measure.event_targeting_rules (
     collection_mode text not null,
     take_screenshot boolean not null default false,
     take_layout_snapshot boolean not null default false,
+    is_default_rule boolean not null default false,
     created_at timestamptz not null default now(),
     created_by uuid not null,
     updated_at timestamptz not null default now(),
@@ -21,6 +22,7 @@ comment on column measure.event_targeting_rules.id is 'id of the rule';
 comment on column measure.event_targeting_rules.sampling_rate is 'the percentage sampling rate applied';
 comment on column measure.event_targeting_rules.condition is 'the condition represented as a CEL expression';
 comment on column measure.event_targeting_rules.collection_mode is 'the collection mode for the event (e.g., "sampled", "session_timeline", "none")';
+comment on column measure.event_targeting_rules.is_default_rule is 'whether this is the default rule';
 comment on column measure.event_targeting_rules.take_screenshot is 'whether to take a screenshot for the event';
 comment on column measure.event_targeting_rules.take_layout_snapshot is 'whether to take a layout snapshot for the event';
 comment on column measure.event_targeting_rules.created_at is 'utc timestamp at the time of rule creation';
diff --git a/self-host/postgres/20251107111408_create_trace_targeting_rules_table.sql b/self-host/postgres/20251107111408_create_trace_targeting_rules_table.sql
index c968bc7da..897512566 100644
--- a/self-host/postgres/20251107111408_create_trace_targeting_rules_table.sql
+++ b/self-host/postgres/20251107111408_create_trace_targeting_rules_table.sql
@@ -6,6 +6,7 @@ create table if not exists measure.trace_targeting_rules (
     sampling_rate numeric(9, 6) not null,
     condition text not null,
     collection_mode text not null,
+    is_default_rule boolean not null default false,
     created_at timestamptz not null default now(),
     created_by uuid not null,
     updated_at timestamptz not null default now(),
@@ -19,6 +20,7 @@ comment on column measure.trace_targeting_rules.id is 'id of the rule';
 comment on column measure.trace_targeting_rules.sampling_rate is 'the percentage sampling rate applied';
 comment on column measure.trace_targeting_rules.condition is 'the condition represented as a CEL expression';
 comment on column measure.trace_targeting_rules.collection_mode is 'the collection mode for the trace (e.g., "sampled", "session_timeline", "none")';
+comment on column measure.trace_targeting_rules.is_default_rule is 'whether this is the default rule';
 comment on column measure.trace_targeting_rules.created_at is 'utc timestamp at the time of rule creation';
 comment on column measure.trace_targeting_rules.created_by is ' id of the user who created the rule';
 comment on column measure.trace_targeting_rules.updated_at is 'utc timestamp at the time of rule update';

From 1ebe5ef11c51f6defc316a87f55df76886586d9c Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Mon, 10 Nov 2025 11:02:21 +0530
Subject: [PATCH 58/98] feat(backend): modify dropdown select

---
 .../app/components/dropdown_select.tsx        |   5 +-
 .../targeting/event_rule_builder.tsx          | 269 ++++++++++++++++--
 .../targeting/rule_builder_attribute_row.tsx  | 132 +++++++++
 3 files changed, 375 insertions(+), 31 deletions(-)
 create mode 100644 frontend/dashboard/app/components/targeting/rule_builder_attribute_row.tsx

diff --git a/frontend/dashboard/app/components/dropdown_select.tsx b/frontend/dashboard/app/components/dropdown_select.tsx
index 01ad157e2..a772f1218 100644
--- a/frontend/dashboard/app/components/dropdown_select.tsx
+++ b/frontend/dashboard/app/components/dropdown_select.tsx
@@ -30,9 +30,10 @@ interface DropdownSelectProps {
   items: string[] | AppVersion[] | OsVersion[]
   initialSelected: string | AppVersion | OsVersion | string[] | AppVersion[] | OsVersion[]
   onChangeSelected?: (item: string | AppVersion | OsVersion | string[] | AppVersion[] | OsVersion[]) => void
+  buttonClassName?: string
 }
 
-const DropdownSelect: React.FC<DropdownSelectProps> = ({ title, type, items, initialSelected, onChangeSelected }) => {
+const DropdownSelect: React.FC<DropdownSelectProps> = ({ title, type, items, initialSelected, onChangeSelected, buttonClassName }) => {
   const [open, setOpen] = useState(false)
   const [selected, setSelected] = useState(initialSelected)
   const [searchValue, setSearchValue] = useState("")
@@ -222,7 +223,7 @@ const DropdownSelect: React.FC<DropdownSelectProps> = ({ title, type, items, ini
       <PopoverTrigger asChild>
         <Button
           variant="outline"
-          className="flex justify-between font-display border border-black w-fit min-w-[150px] select-none"
+          className={buttonClassName || "flex justify-between font-display border border-black w-fit min-w-[150px] select-none"}
         >
           <span className="truncate">{getDisplayText()}</span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
diff --git a/frontend/dashboard/app/components/targeting/event_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
index 455bd9123..535e06e3e 100644
--- a/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
@@ -17,10 +17,11 @@ import {
 } from '@/app/api/api_calls'
 import LoadingBar from '@/app/components/loading_bar'
 import { toastPositive, toastNegative } from '@/app/utils/use_toast'
-import { EventCondition } from '@/app/utils/cel/conditions'
+import { EventCondition, AttributeField } from '@/app/utils/cel/conditions'
 import { celToConditions } from '@/app/utils/cel/cel_parser'
 import DropdownSelect, { DropdownSelectType } from '@/app/components/dropdown_select'
 import { eventConditionToCel } from '@/app/utils/cel/cel_generator'
+import RuleBuilderAttributeRow from '@/app/components/targeting/rule_builder_attribute_row'
 
 interface EventRuleBuilderProps {
     mode: 'create' | 'edit'
@@ -191,6 +192,131 @@ export default function EventRuleBuilder({
         }))
     }
 
+    const getAvailableAttrKeys = (attrType: 'attrs' | 'ud_attrs' | 'session_attrs'): string[] => {
+        if (!pageState.configData) return []
+
+        const config = pageState.configData.result || (pageState.configData as any)
+        const currentEventType = pageState.currentRuleState?.condition.type
+
+        if (attrType === 'attrs') {
+            const eventConfig = config?.events?.find(e => e.type === currentEventType)
+            return eventConfig?.attrs?.map((attr: any) => attr.key) || []
+        } else if (attrType === 'ud_attrs') {
+            return config?.event_ud_attrs?.map((attr: any) => attr.key) || []
+        } else {
+            return config?.session_attrs?.map((attr: any) => attr.key) || []
+        }
+    }
+
+    const getCombinedAttrKeys = (): string[] => {
+        const sessionKeys = getAvailableAttrKeys('session_attrs')
+        const udKeys = getAvailableAttrKeys('ud_attrs')
+        return [...sessionKeys, ...udKeys]
+    }
+
+    const getOperatorsForType = (operatorTypesMapping: any, type: string): string[] => {
+        return operatorTypesMapping?.[type] || ['eq', 'neq']
+    }
+
+    const getAttrConfigByKey = (key: string, attrType: 'attrs' | 'ud_attrs' | 'session_attrs') => {
+        if (!pageState.configData) return null
+
+        const config = pageState.configData.result || (pageState.configData as any)
+        const currentEventType = pageState.currentRuleState?.condition.type
+
+        if (attrType === 'attrs') {
+            const eventConfig = config?.events?.find(e => e.type === currentEventType)
+            return eventConfig?.attrs?.find((attr: any) => attr.key === key)
+        } else if (attrType === 'ud_attrs') {
+            return config?.event_ud_attrs?.find((attr: any) => attr.key === key)
+        } else {
+            return config?.session_attrs?.find((attr: any) => attr.key === key)
+        }
+    }
+
+    const handleAddAttribute = (attrType: 'ud_attrs' | 'session_attrs') => {
+        if (!pageState.currentRuleState) return
+
+        const availableKeys = attrType === 'ud_attrs'
+            ? getAvailableAttrKeys('ud_attrs')
+            : getAvailableAttrKeys('session_attrs')
+
+        if (availableKeys.length === 0) return
+
+        const firstKey = availableKeys[0]
+        const attrConfig = getAttrConfigByKey(firstKey, attrType)
+
+        const newAttr: AttributeField = {
+            id: `${baseId}-${attrType}-${Date.now()}`,
+            key: firstKey,
+            type: attrConfig?.type || 'string',
+            value: attrConfig?.type === 'bool' ? false : attrConfig?.type === 'number' ? 0 : '',
+            hint: attrConfig?.hint,
+            operator: 'eq'
+        }
+
+        const updatedCondition = {
+            ...pageState.currentRuleState.condition,
+            [attrType]: [...pageState.currentRuleState.condition[attrType], newAttr]
+        }
+
+        updateRuleState({ condition: updatedCondition })
+    }
+
+    const handleUpdateAttr = (
+        conditionId: string,
+        attrId: string,
+        field: 'key' | 'type' | 'value' | 'operator',
+        value: any,
+        attrType: 'attrs' | 'ud_attrs' | 'session_attrs'
+    ) => {
+        if (!pageState.currentRuleState) return
+
+        const attrs = pageState.currentRuleState.condition[attrType]
+        const attrIndex = attrs.findIndex(a => a.id === attrId)
+        if (attrIndex === -1) return
+
+        const updatedAttrs = [...attrs]
+        const updatedAttr = { ...updatedAttrs[attrIndex] }
+
+        if (field === 'key') {
+            // When key changes, update type and reset value
+            const attrConfig = getAttrConfigByKey(value, attrType)
+            updatedAttr.key = value
+            updatedAttr.type = attrConfig?.type || 'string'
+            updatedAttr.value = attrConfig?.type === 'bool' ? false : attrConfig?.type === 'number' ? 0 : ''
+            updatedAttr.hint = attrConfig?.hint
+        } else {
+            updatedAttr[field] = value
+        }
+
+        updatedAttrs[attrIndex] = updatedAttr
+
+        const updatedCondition = {
+            ...pageState.currentRuleState.condition,
+            [attrType]: updatedAttrs
+        }
+
+        updateRuleState({ condition: updatedCondition })
+    }
+
+    const handleRemoveAttr = (
+        conditionId: string,
+        attrId: string,
+        attrType: 'attrs' | 'ud_attrs' | 'session_attrs'
+    ) => {
+        if (!pageState.currentRuleState) return
+
+        const updatedAttrs = pageState.currentRuleState.condition[attrType].filter(a => a.id !== attrId)
+
+        const updatedCondition = {
+            ...pageState.currentRuleState.condition,
+            [attrType]: updatedAttrs
+        }
+
+        updateRuleState({ condition: updatedCondition })
+    }
+
     const handleEventTypeChange = (newEventType: string) => {
         if (!pageState.configData) return
 
@@ -201,7 +327,7 @@ export default function EventRuleBuilder({
         const eventConfig = config.events.find(e => e.type === newEventType)
         if (!eventConfig) return
 
-        // Create new condition with updated event type and attrs
+        // Pre-populate event attrs (rendered by default)
         const attrs = (eventConfig.attrs || []).map((attr, idx) => ({
             id: `${baseId}-attr-${idx}`,
             key: attr.key,
@@ -211,34 +337,13 @@ export default function EventRuleBuilder({
             operator: 'eq'
         }))
 
-        const ud_attrs = eventConfig.has_ud_attrs
-            ? config.event_ud_attrs.map((attr, idx) => ({
-                id: `${baseId}-ud-${idx}`,
-                key: attr.key,
-                type: attr.type,
-                value: attr.type === 'bool' ? false : attr.type === 'number' ? 0 : '',
-                hint: attr.hint,
-                operator: 'eq'
-            }))
-            : []
-
-        const session_attrs = eventConfig.has_ud_attrs
-            ? config.session_attrs.map((attr, idx) => ({
-                id: `${baseId}-session-${idx}`,
-                key: attr.key,
-                type: attr.type,
-                value: attr.type === 'bool' ? false : attr.type === 'number' ? 0 : '',
-                hint: attr.hint,
-                operator: 'eq'
-            }))
-            : []
-
+        // Start with empty arrays for ud_attrs and session_attrs (added on demand)
         const newCondition: EventCondition = {
             id: `${baseId}-condition`,
             type: newEventType,
             attrs,
-            ud_attrs,
-            session_attrs
+            ud_attrs: [],
+            session_attrs: []
         }
 
         updateRuleState({ condition: newCondition })
@@ -338,9 +443,115 @@ export default function EventRuleBuilder({
                             />
                             <span className="font-display text-xl">event occurs</span>
                         </div>
-                        <button className="text-sm font-body flex items-center gap-2">
-                            + Filter by attribute
-                        </button>
+
+                        {/* Event Attributes Section - Always shown if event has attrs */}
+                        {pageState.currentRuleState?.condition.attrs && pageState.currentRuleState.condition.attrs.length > 0 && (
+                            <div className="mt-3 space-y-2">
+                                {pageState.currentRuleState.condition.attrs.map(attr => (
+                                    <RuleBuilderAttributeRow
+                                        key={attr.id}
+                                        attr={attr}
+                                        conditionId={pageState.currentRuleState!.condition.id}
+                                        attrType="attrs"
+                                        attrKeys={getAvailableAttrKeys('attrs')}
+                                        operatorTypesMapping={(() => {
+                                            const config = pageState.configData?.result || (pageState.configData as any)
+                                            return config?.operator_types || {}
+                                        })()}
+                                        getOperatorsForType={getOperatorsForType}
+                                        onUpdateAttr={handleUpdateAttr}
+                                        showDeleteButton={false}
+                                    />
+                                ))}
+                            </div>
+                        )}
+
+                        {/* Add Filter Button - Only shown if event has ud_attrs capability */}
+                        {(() => {
+                            const config = pageState.configData?.result || (pageState.configData as any)
+                            const currentEventType = pageState.currentRuleState?.condition.type
+                            const eventConfig = config?.events?.find((e: any) => e.type === currentEventType)
+                            const hasUdAttrs = eventConfig?.has_ud_attrs
+                            const hasCombinedAttrs = pageState.currentRuleState?.condition.ud_attrs.length > 0 ||
+                                                     pageState.currentRuleState?.condition.session_attrs.length > 0
+
+                            return hasUdAttrs && !hasCombinedAttrs && (
+                                <Button
+                                    variant="ghost"
+                                    onClick={() => {
+                                        // Add first session attr if available, otherwise first ud attr
+                                        const sessionKeys = getAvailableAttrKeys('session_attrs')
+                                        if (sessionKeys.length > 0) {
+                                            handleAddAttribute('session_attrs')
+                                        } else {
+                                            handleAddAttribute('ud_attrs')
+                                        }
+                                    }}
+                                    className="text-sm font-body px-2 py-1 h-auto -ml-2 mt-2 hover:bg-yellow-200 focus:bg-yellow-200"
+                                >
+                                    + Filter by attribute
+                                </Button>
+                            )
+                        })()}
+
+                        {/* User-Defined & Session Attributes Section */}
+                        {(pageState.currentRuleState?.condition.ud_attrs.length > 0 ||
+                          pageState.currentRuleState?.condition.session_attrs.length > 0) && (
+                            <div className="mt-3 space-y-2">
+                                {/* Render session attrs */}
+                                {pageState.currentRuleState.condition.session_attrs.map(attr => (
+                                    <RuleBuilderAttributeRow
+                                        key={attr.id}
+                                        attr={attr}
+                                        conditionId={pageState.currentRuleState!.condition.id}
+                                        attrType="session_attrs"
+                                        attrKeys={getCombinedAttrKeys()}
+                                        operatorTypesMapping={(() => {
+                                            const config = pageState.configData?.result || (pageState.configData as any)
+                                            return config?.operator_types || {}
+                                        })()}
+                                        getOperatorsForType={getOperatorsForType}
+                                        onUpdateAttr={handleUpdateAttr}
+                                        onRemoveAttr={handleRemoveAttr}
+                                        showDeleteButton={true}
+                                    />
+                                ))}
+                                {/* Render ud attrs */}
+                                {pageState.currentRuleState.condition.ud_attrs.map(attr => (
+                                    <RuleBuilderAttributeRow
+                                        key={attr.id}
+                                        attr={attr}
+                                        conditionId={pageState.currentRuleState!.condition.id}
+                                        attrType="ud_attrs"
+                                        attrKeys={getCombinedAttrKeys()}
+                                        operatorTypesMapping={(() => {
+                                            const config = pageState.configData?.result || (pageState.configData as any)
+                                            return config?.operator_types || {}
+                                        })()}
+                                        getOperatorsForType={getOperatorsForType}
+                                        onUpdateAttr={handleUpdateAttr}
+                                        onRemoveAttr={handleRemoveAttr}
+                                        showDeleteButton={true}
+                                    />
+                                ))}
+                                {/* Add more attributes button */}
+                                <Button
+                                    variant="ghost"
+                                    onClick={() => {
+                                        // Add first session attr if available, otherwise first ud attr
+                                        const sessionKeys = getAvailableAttrKeys('session_attrs')
+                                        if (sessionKeys.length > 0) {
+                                            handleAddAttribute('session_attrs')
+                                        } else {
+                                            handleAddAttribute('ud_attrs')
+                                        }
+                                    }}
+                                    className="text-sm font-body px-2 py-1 h-auto -ml-2 mt-1 hover:bg-yellow-200 focus:bg-yellow-200"
+                                >
+                                    + Filter by attribute
+                                </Button>
+                            </div>
+                        )}
                     </div>
 
                     <div className='py-4' />
diff --git a/frontend/dashboard/app/components/targeting/rule_builder_attribute_row.tsx b/frontend/dashboard/app/components/targeting/rule_builder_attribute_row.tsx
new file mode 100644
index 000000000..68db613ad
--- /dev/null
+++ b/frontend/dashboard/app/components/targeting/rule_builder_attribute_row.tsx
@@ -0,0 +1,132 @@
+"use client"
+
+import DropdownSelect, { DropdownSelectType } from '@/app/components/dropdown_select';
+import { Button } from '@/app/components/button';
+import { X } from 'lucide-react';
+
+type AttrType = 'attrs' | 'ud_attrs';
+
+const getTypeDisplayName = (type: string): string => {
+    const typeMap: { [key: string]: string } = {
+        'float64': 'decimal',
+        'int64': 'number',
+        'number': 'number',
+        'string': 'text'
+    };
+
+    return typeMap[type] || type;
+};
+
+const RuleBuilderAttributeRow = ({
+    attr,
+    conditionId,
+    attrType,
+    attrKeys,
+    operatorTypesMapping,
+    getOperatorsForType,
+    onUpdateAttr,
+    onRemoveAttr,
+    showDeleteButton = true
+}: {
+    attr: { id: string; key: string; type: string; value: string | boolean | number; operator?: string; hasError?: boolean; errorMessage?: string; hint?: string };
+    conditionId: string;
+    attrType: AttrType;
+    attrKeys: string[];
+    operatorTypesMapping: any;
+    getOperatorsForType: (mapping: any, type: string) => string[];
+    onUpdateAttr: (conditionId: string, attrId: string, field: 'key' | 'type' | 'value' | 'operator', value: any, attrType: AttrType) => void;
+    onRemoveAttr?: (conditionId: string, attrId: string, attrType: AttrType) => void;
+    showDeleteButton?: boolean;
+}) => {
+    const operatorTypes = getOperatorsForType(operatorTypesMapping, attr.type);
+
+    const handleValueChange = (newValue: string | boolean | number) => {
+        onUpdateAttr(conditionId, attr.id, 'value', newValue, attrType);
+    };
+
+    return (
+        <div className={`flex items-center group ${attr.hasError ? 'mb-8' : ''}`}>
+            {/* Attribute Key Dropdown */}
+            <div className="flex-[35] mr-3 min-w-0">
+                <DropdownSelect
+                    type={DropdownSelectType.SingleString}
+                    title="Attributes"
+                    items={attrKeys}
+                    initialSelected={attr.key}
+                    onChangeSelected={(selected) => {
+                        onUpdateAttr(conditionId, attr.id, 'key', selected as string, attrType);
+                    }}
+                    buttonClassName="flex justify-between font-display border border-black w-full select-none"
+                />
+            </div>
+
+            {/* Operator Dropdown */}
+            <div className="flex-[15] mr-3">
+                <DropdownSelect
+                    type={DropdownSelectType.SingleString}
+                    title="Condition"
+                    items={operatorTypes}
+                    initialSelected={attr.operator || operatorTypes[0] || 'eq'}
+                    onChangeSelected={(selected) => {
+                        onUpdateAttr(conditionId, attr.id, 'operator', selected as string, attrType);
+                    }}
+                    buttonClassName="flex justify-between font-display border border-black w-full select-none"
+                />
+            </div>
+
+            {/* Value section */}
+            <div className="flex-[35] mr-3">
+                {attr.type === 'bool' ? (
+                    <DropdownSelect
+                        type={DropdownSelectType.SingleString}
+                        title="Value"
+                        items={['true', 'false']}
+                        initialSelected={attr.value ? 'true' : 'false'}
+                        onChangeSelected={(selected) => {
+                            handleValueChange((selected as string) === 'true')
+                        }}
+                        buttonClassName="flex justify-between font-display border border-black w-full select-none"
+                    />
+                ) : (
+                    <div className="relative">
+                        <input
+                            id="change-team-name-input"
+                            type={attr.type === 'number' || attr.type === 'int64' || attr.type === 'float64' ? 'number' : 'text'}
+                            placeholder={attr.hint ? attr.hint :`Enter ${getTypeDisplayName(attr.type)} value`}
+                            value={attr.value as string | number}
+                            onChange={(e) => {
+                                const value = (attr.type === 'number' || attr.type === 'int64' || attr.type === 'float64') ?
+                                    (e.target.value === '' ? '' : Number(e.target.value)) :
+                                    e.target.value
+                                handleValueChange(value)
+                            }}
+                            className={`w-full border rounded-md outline-hidden text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 font-body placeholder:text-neutral-400 ${attr.hasError ? 'border-red-500' : 'border-black'}`}
+                        />
+                        {attr.hasError && attr.errorMessage && (
+                            <p className="absolute top-full left-0 w-full text-red-500 text-xs mt-1 ml-1">{attr.errorMessage}</p>
+                        )}
+                    </div>
+                )}
+            </div>
+
+            {/* Remove Attribute Button */}
+            <div className="flex justify-start flex-[15]">
+                {showDeleteButton && onRemoveAttr ? (
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => onRemoveAttr(conditionId, attr.id, attrType)}
+                        className="h-8 w-8 p-0 hover:bg-yellow-200 focus:bg-yellow-200 focus:opacity-100 flex-shrink-0
+                       opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+                    >
+                        <X className="h-4 w-4" />
+                    </Button>
+                ) : (
+                    <div className="h-8 w-8"></div>
+                )}
+            </div>
+        </div>
+    )
+};
+
+export default RuleBuilderAttributeRow;
\ No newline at end of file

From b5dc91b01dfbabb73350b3215b51d5ef9d46be97 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Mon, 10 Nov 2025 11:14:33 +0530
Subject: [PATCH 59/98] feat(frontend): fix sampling rate input

---
 .../targeting/event_rule_builder.tsx          | 14 ++----
 .../targeting/sampling_rate_input.tsx         | 46 +++++++------------
 .../targeting/trace_rule_builder.tsx          | 14 ++----
 3 files changed, 27 insertions(+), 47 deletions(-)

diff --git a/frontend/dashboard/app/components/targeting/event_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
index 535e06e3e..d7afe67a3 100644
--- a/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
@@ -22,6 +22,7 @@ import { celToConditions } from '@/app/utils/cel/cel_parser'
 import DropdownSelect, { DropdownSelectType } from '@/app/components/dropdown_select'
 import { eventConditionToCel } from '@/app/utils/cel/cel_generator'
 import RuleBuilderAttributeRow from '@/app/components/targeting/rule_builder_attribute_row'
+import SamplingRateInput from '@/app/components/targeting/sampling_rate_input'
 
 interface EventRuleBuilderProps {
     mode: 'create' | 'edit'
@@ -573,17 +574,12 @@ export default function EventRuleBuilder({
                                         onChange={() => updateRuleState({ collectionMode: 'sampled' })}
                                         className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
                                     />
-                                    <span className="text-sm font-body">Collect at sampling rate</span>
-                                    <input
-                                        type="number"
+                                    <SamplingRateInput
                                         value={pageState.currentRuleState?.sampleRate || 100}
-                                        onChange={(e) => updateRuleState({ sampleRate: parseFloat(e.target.value) || 0 })}
-                                        min="0"
-                                        max="100"
-                                        step="0.000001"
-                                        className="w-32 border border-black rounded-md outline-hidden text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 font-body"
+                                        onChange={(value) => updateRuleState({ sampleRate: value })}
+                                        disabled={pageState.currentRuleState?.collectionMode !== 'sampled'}
+                                        type="events"
                                     />
-                                    <span className="text-sm font-body">%</span>
                                 </label>
 
                                 <label className="flex items-center gap-3 cursor-pointer h-10">
diff --git a/frontend/dashboard/app/components/targeting/sampling_rate_input.tsx b/frontend/dashboard/app/components/targeting/sampling_rate_input.tsx
index 215db99cb..afbd8195c 100644
--- a/frontend/dashboard/app/components/targeting/sampling_rate_input.tsx
+++ b/frontend/dashboard/app/components/targeting/sampling_rate_input.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 
 interface SamplingRateInputProps {
     value: number
@@ -7,38 +7,25 @@ interface SamplingRateInputProps {
     type?: 'events' | 'traces'
 }
 
-const formatSamplingRate = (value: string): string => {
-    if (value === '') return ''
-    const numValue = parseFloat(value)
-    if (isNaN(numValue)) return ''
-    const clampedValue = Math.max(0, Math.min(100, numValue))
-    const formattedValue = Math.round(clampedValue * 1000000) / 1000000
-    return formattedValue.toString()
-}
-
 export default function SamplingRateInput({ value, onChange, disabled = false, type = 'events' }: SamplingRateInputProps) {
-    const [inputValue, setInputValue] = useState(value.toString())
-
-    // Sync with prop value when it changes externally
-    useEffect(() => {
-        setInputValue(value.toString())
-    }, [value])
+    const [localValue, setLocalValue] = useState<string>(value.toString())
 
     const handleBlur = () => {
-        const formatted = formatSamplingRate(inputValue)
-
-        if (formatted !== '') {
-            const numValue = parseFloat(formatted)
-            onChange(numValue)
-            setInputValue(numValue.toString())
+        const numValue = parseFloat(localValue)
+        if (isNaN(numValue) || localValue.trim() === '') {
+            // Reset to parent value if invalid
+            setLocalValue(value.toString())
         } else {
-            // Reset to current value if invalid
-            setInputValue(value.toString())
+            // Clamp and update parent
+            const clampedValue = Math.max(0, Math.min(100, numValue))
+            onChange(clampedValue)
+            setLocalValue(clampedValue.toString())
         }
     }
 
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setInputValue(e.target.value)
+    const handleFocus = () => {
+        // Sync with parent value when focusing
+        setLocalValue(value.toString())
     }
 
     return (
@@ -49,9 +36,10 @@ export default function SamplingRateInput({ value, onChange, disabled = false, t
                     type="number"
                     min="0"
                     max="100"
-                    step="0.000001"
-                    value={inputValue}
-                    onChange={handleChange}
+                    step="0.01"
+                    value={localValue}
+                    onChange={(e) => setLocalValue(e.target.value)}
+                    onFocus={handleFocus}
                     onBlur={handleBlur}
                     disabled={disabled}
                     className="w-32 border border-black rounded-md outline-hidden text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 font-body disabled:opacity-50 disabled:cursor-not-allowed"
diff --git a/frontend/dashboard/app/components/targeting/trace_rule_builder.tsx b/frontend/dashboard/app/components/targeting/trace_rule_builder.tsx
index 83bcd4c26..cf93ea9dc 100644
--- a/frontend/dashboard/app/components/targeting/trace_rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/trace_rule_builder.tsx
@@ -21,6 +21,7 @@ import { TraceCondition } from '@/app/utils/cel/conditions'
 import { celToConditions } from '@/app/utils/cel/cel_parser'
 import DropdownSelect, { DropdownSelectType } from '@/app/components/dropdown_select'
 import { traceConditionToCel } from '@/app/utils/cel/cel_generator'
+import SamplingRateInput from '@/app/components/targeting/sampling_rate_input'
 
 interface TraceRuleBuilderProps {
     mode: 'create' | 'edit'
@@ -345,17 +346,12 @@ export default function TraceRuleBuilder({
                                         onChange={() => updateRuleState({ collectionMode: 'sampled' })}
                                         className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
                                     />
-                                    <span className="text-sm font-body">Collect at sampling rate</span>
-                                    <input
-                                        type="number"
+                                    <SamplingRateInput
                                         value={pageState.currentRuleState?.sampleRate || 100}
-                                        onChange={(e) => updateRuleState({ sampleRate: parseFloat(e.target.value) || 0 })}
-                                        min="0"
-                                        max="100"
-                                        step="0.000001"
-                                        className="w-32 border border-black rounded-md outline-hidden text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 font-body"
+                                        onChange={(value) => updateRuleState({ sampleRate: value })}
+                                        disabled={pageState.currentRuleState?.collectionMode !== 'sampled'}
+                                        type="traces"
                                     />
-                                    <span className="text-sm font-body">%</span>
                                 </label>
 
                                 <label className="flex items-center gap-3 cursor-pointer h-10">

From 3260653ae02d90fbdd05867c17733d29602e83d3 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Mon, 10 Nov 2025 17:00:15 +0530
Subject: [PATCH 60/98] feat(frontend): refactor event builder

---
 backend/api/measure/targeting_rules.go        |   2 +-
 .../data/[appId]/event/[ruleId]/edit/page.tsx |   7 +-
 .../data/[appId]/event/create/page.tsx        |   8 +-
 .../data/[appId]/trace/[ruleId]/edit/page.tsx |   3 +-
 .../data/[appId]/trace/create/page.tsx        |   3 +-
 frontend/dashboard/app/api/api_calls.ts       |  22 +-
 .../app/components/targeting/delete_rule.tsx  |  33 +
 .../targeting/edit_default_rule_dialog.tsx    |   6 +-
 .../targeting/event_rule_builder.tsx          | 900 +++++++++---------
 .../event_trace_targeting_rules_table.tsx     |   2 +-
 .../targeting/rule_builder_attribute_row.tsx  | 124 ++-
 .../targeting/trace_rule_builder.tsx          | 355 ++++++-
 12 files changed, 912 insertions(+), 553 deletions(-)
 create mode 100644 frontend/dashboard/app/components/targeting/delete_rule.tsx

diff --git a/backend/api/measure/targeting_rules.go b/backend/api/measure/targeting_rules.go
index 838b5eeb3..58f2ec36f 100644
--- a/backend/api/measure/targeting_rules.go
+++ b/backend/api/measure/targeting_rules.go
@@ -1110,7 +1110,7 @@ func newEventsConfig(osName string) []EventConfig {
 			HasUdAttrs: false,
 			Attrs: []AttrConfig{
 				{Key: "url", Type: "string", Hint: "Enter a HTTP URL"},
-				{Key: "status_code", Type: "int64", Hint: "Enter HTTP status code"},
+				{Key: "status_code", Type: "int64", Hint: "Enter HTTP status code 500, 200, etc."},
 			},
 		},
 	}
diff --git a/frontend/dashboard/app/[teamId]/data/[appId]/event/[ruleId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/event/[ruleId]/edit/page.tsx
index a511292ce..95423705f 100644
--- a/frontend/dashboard/app/[teamId]/data/[appId]/event/[ruleId]/edit/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/event/[ruleId]/edit/page.tsx
@@ -14,13 +14,18 @@ export default function EditEventRule({ params }: { params: { teamId: string, ap
         router.back()
     }
 
+    const handleDelete = () => {
+        router.back()
+    }
+
     return (
         <EventRuleBuilder
             mode="edit"
             appId={params.appId}
             ruleId={params.ruleId}
             onCancel={handleCancel}
-            onSaved={handleSave}
+            onSave={handleSave}
+            onDelete={handleDelete}
         />
     )
 }
diff --git a/frontend/dashboard/app/[teamId]/data/[appId]/event/create/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/event/create/page.tsx
index bfd832fa0..4272b6100 100644
--- a/frontend/dashboard/app/[teamId]/data/[appId]/event/create/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/event/create/page.tsx
@@ -11,7 +11,10 @@ export default function CreateEventRule({ params }: { params: { teamId: string,
     }
 
     const handleCreate = () => {
-        // TODO: Implement create logic
+        router.back()
+    }
+
+    const handleDelete = () => {
         router.back()
     }
 
@@ -20,7 +23,8 @@ export default function CreateEventRule({ params }: { params: { teamId: string,
             mode="create"
             appId={params.appId}
             onCancel={handleCancel}
-            onSaved={handleCreate}
+            onSave={handleCreate}
+            onDelete={handleDelete}
         />
     )
 }
diff --git a/frontend/dashboard/app/[teamId]/data/[appId]/trace/[ruleId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/trace/[ruleId]/edit/page.tsx
index 58d14f30a..900267c40 100644
--- a/frontend/dashboard/app/[teamId]/data/[appId]/trace/[ruleId]/edit/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/trace/[ruleId]/edit/page.tsx
@@ -11,7 +11,6 @@ export default function EditTraceRule({ params }: { params: { teamId: string, ap
     }
 
     const handleSave = () => {
-        // TODO: Implement save logic
         router.back()
     }
 
@@ -21,7 +20,7 @@ export default function EditTraceRule({ params }: { params: { teamId: string, ap
             appId={params.appId}
             ruleId={params.ruleId}
             onCancel={handleCancel}
-            onPrimaryAction={handleSave}
+            onSave={handleSave}
         />
     )
 }
diff --git a/frontend/dashboard/app/[teamId]/data/[appId]/trace/create/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/trace/create/page.tsx
index e9271381d..7cdabf5e2 100644
--- a/frontend/dashboard/app/[teamId]/data/[appId]/trace/create/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/trace/create/page.tsx
@@ -11,7 +11,6 @@ export default function CreateTraceRule({ params }: { params: { teamId: string,
     }
 
     const handleCreate = () => {
-        // TODO: Implement create logic
         router.back()
     }
 
@@ -20,7 +19,7 @@ export default function CreateTraceRule({ params }: { params: { teamId: string,
             mode="create"
             appId={params.appId}
             onCancel={handleCancel}
-            onPrimaryAction={handleCreate}
+            onSave={handleCreate}
         />
     )
 }
diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index 0adde5fc1..1189023fe 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -1151,7 +1151,7 @@ export const emptyAlertsOverviewResponse = {
   }[],
 }
 
-export type CollectionMode = 'sampled' | 'timeline' | 'disabled';
+export type CollectionMode = 'sampled' | 'session_timeline' | 'disabled';
 
 export type EventTargetingAttachmentConfig = 'none' | 'layout_snapshot' | 'screenshot';
 
@@ -1248,21 +1248,17 @@ export type TargetingOperatorConfig = {
 }
 
 export type EventTargetingConfigResponse = {
-  result: {
-    events: EventTargetingConfig[];
-    event_ud_attrs: AttributeTargetingConfig[];
-    session_attrs: AttributeTargetingConfig[];
-    operator_types: TargetingOperatorConfig;
-  };
+  events: EventTargetingConfig[];
+  event_ud_attrs: AttributeTargetingConfig[];
+  session_attrs: AttributeTargetingConfig[];
+  operator_types: TargetingOperatorConfig;
 }
 
 export type TraceTargetingConfigResponse = {
-  result: {
-    traces: TraceTargetingConfig[];
-    trace_ud_attrs: AttributeTargetingConfig[];
-    session_attrs: AttributeTargetingConfig[];
-    operator_types: TargetingOperatorConfig;
-  };
+  traces: TraceTargetingConfig[];
+  trace_ud_attrs: AttributeTargetingConfig[];
+  session_attrs: AttributeTargetingConfig[];
+  operator_types: TargetingOperatorConfig;
 }
 export class AppVersion {
   name: string
diff --git a/frontend/dashboard/app/components/targeting/delete_rule.tsx b/frontend/dashboard/app/components/targeting/delete_rule.tsx
new file mode 100644
index 000000000..9d888312b
--- /dev/null
+++ b/frontend/dashboard/app/components/targeting/delete_rule.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import React from "react"
+import DangerConfirmationDialog from "../danger_confirmation_dialog"
+
+export type DeleteRuleProps = {
+  open: boolean
+  onConfirm: () => void
+  onCancel: () => void
+  isDeleting: boolean
+}
+
+export default function DeleteRule({
+  open,
+  onConfirm,
+  onCancel,
+  isDeleting,
+}: DeleteRuleProps) {
+  return (
+    <DangerConfirmationDialog
+      body={
+        <p className="font-body">
+          Do you want to delete this rule? This action cannot be undone.
+        </p>
+      }
+      open={open}
+      affirmativeText={isDeleting ? "Deleting…" : "Delete Rule"}
+      cancelText="Cancel"
+      onAffirmativeAction={onConfirm}
+      onCancelAction={onCancel}
+    />
+  )
+}
diff --git a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
index a4ae3ffca..85dcf2065 100644
--- a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
+++ b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
@@ -7,7 +7,7 @@ import { useState, useEffect } from 'react'
 import { DialogDescription } from '@radix-ui/react-dialog'
 import { updateEventTargetingRule, updateTraceTargetingRule, UpdateEventTargetingRuleApiStatus, UpdateTraceTargetingRuleApiStatus } from '@/app/api/api_calls'
 
-type CollectionMode = 'sampled' | 'timeline' | 'disabled'
+type CollectionMode = 'sampled' | 'session_timeline' | 'disabled'
 
 interface EditDefaultRuleDialogProps {
     isOpen: boolean
@@ -129,8 +129,8 @@ export default function EditDefaultRuleDialog({
                                 type="radio"
                                 name="collectionMode"
                                 value="timeline"
-                                checked={collectionMode === 'timeline'}
-                                onChange={() => setCollectionMode('timeline')}
+                                checked={collectionMode === 'session_timeline'}
+                                onChange={() => setCollectionMode('session_timeline')}
                                 disabled={isSaving}
                                 className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
                             />
diff --git a/frontend/dashboard/app/components/targeting/event_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
index d7afe67a3..b8b4605e1 100644
--- a/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
@@ -1,8 +1,7 @@
 "use client"
 
 import { Button } from '@/app/components/button'
-import { useEffect, useState, useId } from 'react'
-import { useRouter } from 'next/navigation'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import {
     EventTargetingRuleApiStatus,
     EventTargetingConfigApiStatus,
@@ -14,8 +13,11 @@ import {
     updateEventTargetingRule,
     CreateEventTargetingRuleApiStatus,
     UpdateEventTargetingRuleApiStatus,
+    deleteEventTargetingRule,
+    DeleteEventTargetingRuleApiStatus,
 } from '@/app/api/api_calls'
 import LoadingBar from '@/app/components/loading_bar'
+import DangerConfirmationDialog from '@/app/components/danger_confirmation_dialog'
 import { toastPositive, toastNegative } from '@/app/utils/use_toast'
 import { EventCondition, AttributeField } from '@/app/utils/cel/conditions'
 import { celToConditions } from '@/app/utils/cel/cel_parser'
@@ -23,265 +25,246 @@ import DropdownSelect, { DropdownSelectType } from '@/app/components/dropdown_se
 import { eventConditionToCel } from '@/app/utils/cel/cel_generator'
 import RuleBuilderAttributeRow from '@/app/components/targeting/rule_builder_attribute_row'
 import SamplingRateInput from '@/app/components/targeting/sampling_rate_input'
+import DeleteRule from './delete_rule'
 
 interface EventRuleBuilderProps {
     mode: 'create' | 'edit'
     appId: string
     ruleId?: string
     onCancel: () => void
-    onSaved: () => void
+    onSave: () => void
+    onDelete: () => void
 }
 
 interface EventRuleState {
     condition: EventCondition
-    collectionMode: 'sampled' | 'timeline' | 'disabled'
+    collectionMode: 'sampled' | 'session_timeline' | 'disabled'
     sampleRate: number
     take_layout_snapshot: boolean
     take_screenshot: boolean
 }
 
-type PageState = {
-    ruleData: EventTargetingRule | null
-    configData: EventTargetingConfigResponse | null
-    ruleApiStatus: EventTargetingRuleApiStatus
-    configApiStatus: EventTargetingConfigApiStatus
-    initialRuleState: EventRuleState | null
-    currentRuleState: EventRuleState | null
-    isSaving: boolean
-}
-
 export default function EventRuleBuilder({
     mode,
     appId,
     ruleId,
     onCancel,
-    onSaved: onSave,
+    onSave,
+    onDelete,
 }: EventRuleBuilderProps) {
-    const router = useRouter()
-    const baseId = useId()
-    const [pageState, setPageState] = useState<PageState>({
-        ruleData: null,
-        configData: null,
-        ruleApiStatus: EventTargetingRuleApiStatus.Loading,
-        configApiStatus: EventTargetingConfigApiStatus.Loading,
-        initialRuleState: null,
-        currentRuleState: null,
-        isSaving: false
+
+    const [apiState, setApiState] = useState({
+        ruleStatus: EventTargetingRuleApiStatus.Loading,
+        configStatus: EventTargetingConfigApiStatus.Loading,
+        ruleData: null as EventTargetingRule | null,
+        config: null as EventTargetingConfigResponse | null,
     })
+    const [uiState, setUiState] = useState({
+        showDeleteDialog: false,
+        isSubmitting: false,
+        isDeleting: false,
+    })
+    const [ruleState, setRuleState] = useState<EventRuleState | null>(null)
+    const [initialRuleState, setInitialRuleState] = useState<EventRuleState | null>(null)
+
+
+    const convertToEventRuleState = useCallback(
+        (ruleData: EventTargetingRule | null, configData: EventTargetingConfigResponse): EventRuleState => {
+            if (ruleData) {
+                const parsed = celToConditions(ruleData.condition)
+                const eventCondition = parsed.event?.conditions[0] || createDefaultEventCondition(configData)
+                return {
+                    condition: eventCondition,
+                    collectionMode: ruleData.collection_mode,
+                    sampleRate: ruleData.sampling_rate,
+                    take_layout_snapshot: ruleData.take_layout_snapshot,
+                    take_screenshot: ruleData.take_screenshot,
+                }
+            } else {
+                return {
+                    condition: createDefaultEventCondition(configData),
+                    collectionMode: 'session_timeline',
+                    sampleRate: 0,
+                    take_layout_snapshot: false,
+                    take_screenshot: false,
+                }
+            }
+        },
+        []
+    )
 
-    useEffect(() => {
-        fetchPageData()
-    }, [mode, ruleId, appId])
+    const createDefaultEventCondition = (config: EventTargetingConfigResponse): EventCondition => {
+        const firstEventConfig = config.events[0]
+        return {
+            id: `${crypto.randomUUID()}`,
+            type: firstEventConfig.type,
+            attrs: [],
+            ud_attrs: [],
+            session_attrs: [],
+        }
+    }
 
-    const fetchPageData = async () => {
-        setPageState(prev => ({
+    const fetchPageData = useCallback(async () => {
+        setApiState(prev => ({
             ...prev,
-            ruleApiStatus: EventTargetingRuleApiStatus.Loading,
-            configApiStatus: EventTargetingConfigApiStatus.Loading
+            ruleStatus: EventTargetingRuleApiStatus.Loading,
+            configStatus: EventTargetingConfigApiStatus.Loading,
         }))
 
-        const configResult = await fetchEventTargetingConfigFromServer(appId)
-        if (configResult.status === EventTargetingConfigApiStatus.Error) {
-            setPageState(prev => ({
-                ...prev,
-                configApiStatus: EventTargetingConfigApiStatus.Error
-            }))
-            return
-        }
+        try {
+            const configPromise = fetchEventTargetingConfigFromServer(appId)
+            const rulePromise = mode === 'edit' && ruleId
+                ? fetchEventTargetingRuleFromServer(appId, ruleId)
+                : Promise.resolve(null)
+
+            const [configResult, ruleResult] = await Promise.all([configPromise, rulePromise])
 
-        // Fetch rule data if in edit mode
-        let ruleData: EventTargetingRule | null = null
-        let ruleApiStatus = EventTargetingRuleApiStatus.Success
-        if (mode === 'edit' && ruleId) {
-            const ruleResult = await fetchEventTargetingRuleFromServer(appId, ruleId)
-            if (ruleResult.status === EventTargetingRuleApiStatus.Error) {
-                setPageState(prev => ({
-                    ...prev,
-                    ruleApiStatus: EventTargetingRuleApiStatus.Error,
-                    configApiStatus: EventTargetingConfigApiStatus.Success,
-                    configData: configResult.data
-                }))
+            if (configResult.status === EventTargetingConfigApiStatus.Error) {
+                setApiState(prev => ({ ...prev, configStatus: EventTargetingConfigApiStatus.Error }))
                 return
             }
-            ruleData = ruleResult.data
-        }
-
-        const initialState = convertToEventRuleState(ruleData, configResult.data, baseId)
-
-        setPageState({
-            ruleData,
-            configData: configResult.data,
-            ruleApiStatus,
-            configApiStatus: EventTargetingConfigApiStatus.Success,
-            initialRuleState: initialState,
-            currentRuleState: initialState,
-            isSaving: false
-        })
-    }
 
-    const convertToEventRuleState = (ruleData: EventTargetingRule | null, configData: EventTargetingConfigResponse, idPrefix: string): EventRuleState => {
-        if (ruleData) {
-            const parsedConditions = celToConditions(ruleData.condition)
-            const eventCondition = parsedConditions.event?.conditions[0] || createDefaultEventCondition(configData, idPrefix)
-
-            return {
-                condition: eventCondition,
-                collectionMode: ruleData.collection_mode,
-                sampleRate: ruleData.sampling_rate,
-                take_layout_snapshot: ruleData.take_layout_snapshot,
-                take_screenshot: ruleData.take_screenshot
-            }
-        } else {
-            return {
-                condition: createDefaultEventCondition(configData, idPrefix),
-                collectionMode: 'timeline',
-                sampleRate: 0,
-                take_layout_snapshot: false,
-                take_screenshot: false
+            let ruleData: EventTargetingRule | null = null
+            let ruleApiStatus = EventTargetingRuleApiStatus.Success
+
+            if (mode === 'edit' && ruleResult) {
+                if (ruleResult.status === EventTargetingRuleApiStatus.Error) {
+                    setApiState({
+                        ruleStatus: EventTargetingRuleApiStatus.Error,
+                        configStatus: EventTargetingConfigApiStatus.Success,
+                        ruleData: null,
+                        config: configResult.data,
+                    })
+                    return
+                } else {
+                    ruleData = ruleResult.data
+                }
             }
-        }
-    }
 
-    const createDefaultEventCondition = (configData: EventTargetingConfigResponse, idPrefix: string): EventCondition => {
-        const config = (configData as any)
-        const firstEventConfig = config.events[0]
-
-        return {
-            id: `${idPrefix}-condition`,
-            type: firstEventConfig.type,
-            attrs: [],
-            ud_attrs: [],
-            session_attrs: [],
+            const initial = convertToEventRuleState(ruleData, configResult.data)
+
+            setApiState({
+                ruleStatus: ruleApiStatus,
+                configStatus: EventTargetingConfigApiStatus.Success,
+                ruleData,
+                config: configResult.data,
+            })
+            setInitialRuleState(initial)
+            setRuleState(initial)
+            setUiState(prev => ({ ...prev, showDeleteDialog: false }))
+        } catch (err) {
+            setApiState(prev => ({
+                ...prev,
+                ruleStatus: EventTargetingRuleApiStatus.Error,
+                configStatus: EventTargetingConfigApiStatus.Error,
+            }))
         }
-    }
+    }, [appId, mode, ruleId, convertToEventRuleState])
 
-    const getTitle = () => {
-        if (mode === 'create') {
-            return 'Create Event Rule'
-        }
-        return 'Edit Event Rule'
-    }
+    useEffect(() => {
+        fetchPageData()
+    }, [fetchPageData])
 
-    const getPrimaryActionLabel = () => {
-        return mode === 'create' ? 'Create Rule' : 'Save Changes'
-    }
 
-    const isLoading = () => {
-        return pageState.ruleApiStatus === EventTargetingRuleApiStatus.Loading ||
-               pageState.configApiStatus === EventTargetingConfigApiStatus.Loading
-    }
+    const isLoading = useMemo(() => {
+        return apiState.ruleStatus === EventTargetingRuleApiStatus.Loading ||
+            apiState.configStatus === EventTargetingConfigApiStatus.Loading
+    }, [apiState.ruleStatus, apiState.configStatus])
 
-    const hasError = () => {
-        return pageState.ruleApiStatus === EventTargetingRuleApiStatus.Error ||
-               pageState.configApiStatus === EventTargetingConfigApiStatus.Error
-    }
+    const hasError = useMemo(() => {
+        return apiState.ruleStatus === EventTargetingRuleApiStatus.Error ||
+            apiState.configStatus === EventTargetingConfigApiStatus.Error
+    }, [apiState.ruleStatus, apiState.configStatus])
 
-    const isReady = () => {
-        return pageState.ruleApiStatus === EventTargetingRuleApiStatus.Success &&
-               pageState.configApiStatus === EventTargetingConfigApiStatus.Success
-    }
+    const eventTypes = useMemo(() => {
+        return apiState.config?.events?.map(e => e.type) ?? []
+    }, [apiState.config])
 
-    const hasChanges = () => {
+    const hasChanges = useCallback(() => {
         if (mode === 'create') return true
-        return JSON.stringify(pageState.initialRuleState) !== JSON.stringify(pageState.currentRuleState)
-    }
+        return JSON.stringify(initialRuleState) !== JSON.stringify(ruleState)
+    }, [mode, initialRuleState, ruleState])
 
-    const updateRuleState = (updates: Partial<EventRuleState>) => {
-        setPageState(prev => ({
-            ...prev,
-            currentRuleState: prev.currentRuleState ? { ...prev.currentRuleState, ...updates } : null
-        }))
-    }
 
-    const getAvailableAttrKeys = (attrType: 'attrs' | 'ud_attrs' | 'session_attrs'): string[] => {
-        if (!pageState.configData) return []
-
-        const config = pageState.configData.result || (pageState.configData as any)
-        const currentEventType = pageState.currentRuleState?.condition.type
+    const updateRuleState = useCallback((updates: Partial<EventRuleState>) => {
+        setRuleState(prev => (prev ? { ...prev, ...updates } : prev))
+    }, [])
 
+    const getAvailableAttrKeys = useCallback((attrType: 'attrs' | 'ud_attrs' | 'session_attrs'): string[] => {
+        if (!apiState.config || !ruleState) return []
+        const currentEventType = ruleState.condition.type
         if (attrType === 'attrs') {
-            const eventConfig = config?.events?.find(e => e.type === currentEventType)
-            return eventConfig?.attrs?.map((attr: any) => attr.key) || []
+            const eventConfig = apiState.config.events?.find(e => e.type === currentEventType)
+            return eventConfig?.attrs?.map((a) => a.key) ?? []
         } else if (attrType === 'ud_attrs') {
-            return config?.event_ud_attrs?.map((attr: any) => attr.key) || []
+            return apiState.config?.event_ud_attrs?.map((a) => a.key) ?? []
         } else {
-            return config?.session_attrs?.map((attr: any) => attr.key) || []
+            return apiState.config?.session_attrs?.map((a) => a.key) ?? []
         }
-    }
+    }, [apiState.config, ruleState])
 
-    const getCombinedAttrKeys = (): string[] => {
+    const getCombinedAttrKeys = useCallback(() => {
         const sessionKeys = getAvailableAttrKeys('session_attrs')
         const udKeys = getAvailableAttrKeys('ud_attrs')
         return [...sessionKeys, ...udKeys]
-    }
-
-    const getOperatorsForType = (operatorTypesMapping: any, type: string): string[] => {
-        return operatorTypesMapping?.[type] || ['eq', 'neq']
-    }
+    }, [getAvailableAttrKeys])
 
-    const getAttrConfigByKey = (key: string, attrType: 'attrs' | 'ud_attrs' | 'session_attrs') => {
-        if (!pageState.configData) return null
-
-        const config = pageState.configData.result || (pageState.configData as any)
-        const currentEventType = pageState.currentRuleState?.condition.type
+    const getOperatorsForType = useCallback((operatorMapping: Record<string, string[]>, type: string): string[] => {
+        return operatorMapping?.[type] || []
+    }, [])
 
+    const getAttrConfigByKey = useCallback((key: string, attrType: 'attrs' | 'ud_attrs' | 'session_attrs') => {
+        if (!apiState.config || !ruleState) return null
+        const currentEventType = ruleState.condition.type
         if (attrType === 'attrs') {
-            const eventConfig = config?.events?.find(e => e.type === currentEventType)
-            return eventConfig?.attrs?.find((attr: any) => attr.key === key)
+            const eventConfig = apiState.config.events?.find(e => e.type === currentEventType)
+            return eventConfig?.attrs?.find((a) => a.key === key) ?? null
         } else if (attrType === 'ud_attrs') {
-            return config?.event_ud_attrs?.find((attr: any) => attr.key === key)
+            return apiState.config.event_ud_attrs?.find((a) => a.key === key) ?? null
         } else {
-            return config?.session_attrs?.find((attr: any) => attr.key === key)
+            return apiState.config.session_attrs?.find((a) => a.key === key) ?? null
         }
-    }
-
-    const handleAddAttribute = (attrType: 'ud_attrs' | 'session_attrs') => {
-        if (!pageState.currentRuleState) return
-
-        const availableKeys = attrType === 'ud_attrs'
-            ? getAvailableAttrKeys('ud_attrs')
-            : getAvailableAttrKeys('session_attrs')
+    }, [apiState.config, ruleState])
 
+    const handleAddAttribute = useCallback((attrType: 'ud_attrs' | 'session_attrs') => {
+        if (!ruleState) return
+        const availableKeys = attrType === 'ud_attrs' ? getAvailableAttrKeys('ud_attrs') : getAvailableAttrKeys('session_attrs')
         if (availableKeys.length === 0) return
-
         const firstKey = availableKeys[0]
         const attrConfig = getAttrConfigByKey(firstKey, attrType)
 
         const newAttr: AttributeField = {
-            id: `${baseId}-${attrType}-${Date.now()}`,
+            id: `${crypto.randomUUID()}`,
             key: firstKey,
             type: attrConfig?.type || 'string',
             value: attrConfig?.type === 'bool' ? false : attrConfig?.type === 'number' ? 0 : '',
             hint: attrConfig?.hint,
-            operator: 'eq'
+            operator: 'eq',
         }
 
         const updatedCondition = {
-            ...pageState.currentRuleState.condition,
-            [attrType]: [...pageState.currentRuleState.condition[attrType], newAttr]
+            ...ruleState.condition,
+            [attrType]: [...ruleState.condition[attrType], newAttr],
         }
 
         updateRuleState({ condition: updatedCondition })
-    }
+    }, [ruleState, getAvailableAttrKeys, getAttrConfigByKey, updateRuleState])
 
-    const handleUpdateAttr = (
-        conditionId: string,
+    const handleUpdateAttr = useCallback((
+        _conditionId: string,
         attrId: string,
         field: 'key' | 'type' | 'value' | 'operator',
         value: any,
         attrType: 'attrs' | 'ud_attrs' | 'session_attrs'
     ) => {
-        if (!pageState.currentRuleState) return
-
-        const attrs = pageState.currentRuleState.condition[attrType]
-        const attrIndex = attrs.findIndex(a => a.id === attrId)
-        if (attrIndex === -1) return
-
+        if (!ruleState) return
+        const attrs = ruleState.condition[attrType]
+        const idx = attrs.findIndex(a => a.id === attrId)
+        if (idx === -1) return
         const updatedAttrs = [...attrs]
-        const updatedAttr = { ...updatedAttrs[attrIndex] }
+        const updatedAttr = { ...updatedAttrs[idx] }
 
         if (field === 'key') {
-            // When key changes, update type and reset value
             const attrConfig = getAttrConfigByKey(value, attrType)
             updatedAttr.key = value
             updatedAttr.type = attrConfig?.type || 'string'
@@ -291,87 +274,69 @@ export default function EventRuleBuilder({
             updatedAttr[field] = value
         }
 
-        updatedAttrs[attrIndex] = updatedAttr
-
-        const updatedCondition = {
-            ...pageState.currentRuleState.condition,
-            [attrType]: updatedAttrs
-        }
-
+        updatedAttrs[idx] = updatedAttr
+        const updatedCondition = { ...ruleState.condition, [attrType]: updatedAttrs }
         updateRuleState({ condition: updatedCondition })
-    }
+    }, [ruleState, getAttrConfigByKey, updateRuleState])
 
-    const handleRemoveAttr = (
-        conditionId: string,
+    const handleRemoveAttr = useCallback((
+        _conditionId: string,
         attrId: string,
         attrType: 'attrs' | 'ud_attrs' | 'session_attrs'
     ) => {
-        if (!pageState.currentRuleState) return
-
-        const updatedAttrs = pageState.currentRuleState.condition[attrType].filter(a => a.id !== attrId)
-
-        const updatedCondition = {
-            ...pageState.currentRuleState.condition,
-            [attrType]: updatedAttrs
-        }
-
+        if (!ruleState) return
+        const updatedAttrs = ruleState.condition[attrType].filter(a => a.id !== attrId)
+        const updatedCondition = { ...ruleState.condition, [attrType]: updatedAttrs }
         updateRuleState({ condition: updatedCondition })
-    }
-
-    const handleEventTypeChange = (newEventType: string) => {
-        if (!pageState.configData) return
-
-        // Handle both nested and flat response structures
-        const config = pageState.configData.result || (pageState.configData as any)
-        if (!config?.events) return
+    }, [ruleState, updateRuleState])
 
-        const eventConfig = config.events.find(e => e.type === newEventType)
+    const handleEventTypeChange = useCallback((newEventType: string) => {
+        if (!apiState.config) return
+        const eventConfig = apiState.config.events?.find(e => e.type === newEventType)
         if (!eventConfig) return
 
-        // Pre-populate event attrs (rendered by default)
-        const attrs = (eventConfig.attrs || []).map((attr, idx) => ({
-            id: `${baseId}-attr-${idx}`,
+        const attrs = (eventConfig.attrs || []).map((attr) => ({
+            id: `${crypto.randomUUID()}`,
             key: attr.key,
             type: attr.type,
             value: attr.type === 'bool' ? false : attr.type === 'number' ? 0 : '',
             hint: attr.hint,
-            operator: 'eq'
+            operator: 'eq',
         }))
 
-        // Start with empty arrays for ud_attrs and session_attrs (added on demand)
         const newCondition: EventCondition = {
-            id: `${baseId}-condition`,
+            id: `${crypto.randomUUID()}`,
             type: newEventType,
             attrs,
             ud_attrs: [],
-            session_attrs: []
+            session_attrs: [],
         }
 
         updateRuleState({ condition: newCondition })
-    }
+    }, [apiState.config, updateRuleState])
 
-    const handleSaveChanges = async () => {
-        if (!pageState.currentRuleState) {
-            return
-        }
+    const hasFilterAttributes = useCallback(() => {
+        return (ruleState?.condition?.ud_attrs?.length ?? 0) > 0 || (ruleState?.condition?.session_attrs?.length ?? 0) > 0
+    }, [ruleState])
 
-        setPageState(prev => ({ ...prev, isSaving: true }))
 
-        try {
-            const currentState = pageState.currentRuleState
+    const handleSaveChanges = useCallback(async () => {
+        if (!ruleState) return
+        setUiState(prev => ({ ...prev, isSubmitting: true }))
 
-            const celCondition = eventConditionToCel(pageState.currentRuleState.condition)
+        try {
+            const celCondition = eventConditionToCel(ruleState.condition)
             if (!celCondition) {
-                setPageState(prev => ({ ...prev, isSaving: false }))
+                setUiState(prev => ({ ...prev, isSubmitting: false }))
                 return
             }
 
             const ruleData = {
                 condition: celCondition,
-                collection_mode: currentState.collectionMode,
-                sampling_rate: currentState.sampleRate,
-                take_screenshot: currentState.take_screenshot,
-                take_layout_snapshot: currentState.take_layout_snapshot,
+                collection_mode: ruleState.collectionMode,
+                sampling_rate: ruleState.sampleRate,
+                take_screenshot: ruleState.take_screenshot,
+                take_layout_snapshot: ruleState.take_layout_snapshot,
             }
 
             if (mode === 'create') {
@@ -391,290 +356,323 @@ export default function EventRuleBuilder({
                     toastNegative('Failed to update event rule', result.error || 'Unknown error')
                 }
             }
-        } catch (error) {
+        } catch (err) {
             toastNegative('An error occurred', 'Please try again')
         } finally {
-            setPageState(prev => ({ ...prev, isSaving: false }))
+            setUiState(prev => ({ ...prev, isSubmitting: false }))
         }
-    }
+    }, [ruleState, mode, appId, ruleId, onSave])
 
-    return (
-        <div className="flex flex-col selection:bg-yellow-200/75 items-start">
-            <p className="font-display text-4xl max-w-6xl text-center">{getTitle()}</p>
-            <div className="py-4" />
+    const openDeleteDialog = useCallback(() => {
+        setUiState(prev => ({ ...prev, showDeleteDialog: true }))
+    }, [])
+
+    const closeDeleteDialog = useCallback(() => {
+        setUiState(prev => ({ ...prev, showDeleteDialog: false }))
+    }, [])
+
+    const handleDeleteRule = useCallback(async () => {
+        if (!ruleId) return
+        setUiState(prev => ({ ...prev, showDeleteDialog: false, isDeleting: true }))
+        try {
+            const result = await deleteEventTargetingRule(appId, ruleId)
+            if (result.status === DeleteEventTargetingRuleApiStatus.Success) {
+                toastPositive('Event rule deleted successfully')
+                onDelete()
+            } else {
+                toastNegative('Failed to delete event rule, please try again later')
+            }
+        } catch (err) {
+            toastNegative('An error occurred', 'Please try again')
+        } finally {
+            setUiState(prev => ({ ...prev, isDeleting: false }))
+        }
+    }, [appId, ruleId, onDelete])
 
-            {/* Loading indicator */}
-            <div className={`py-1 w-full ${isLoading() ? 'visible' : 'invisible'}`}>
-                <LoadingBar />
+
+    if (isLoading) {
+        return (
+            <div className="flex flex-col selection:bg-yellow-200/75 items-start">
+                <div className="flex flex-row items-center justify-between w-full">
+                    <p className="font-display text-4xl max-w-6xl">{mode === 'create' ? 'Create Event Rule' : 'Edit Event Rule'}</p>
+                </div>
+                <div className="py-4" />
+                <div className="py-1 w-full visible">
+                    <LoadingBar />
+                </div>
             </div>
+        )
+    }
 
-            {/* Error state */}
-            {hasError() && (
+    if (hasError) {
+        return (
+            <div className="flex flex-col selection:bg-yellow-200/75 items-start">
+                <div className="flex flex-row items-center justify-between w-full">
+                    <p className="font-display text-4xl max-w-6xl">{mode === 'create' ? 'Create Event Rule' : 'Edit Event Rule'}</p>
+                </div>
+                <div className="py-4" />
                 <div className="w-full flex flex-col items-center">
-                    <p className="text-normal font-body">
-                        Error loading rule. Please try again or go back.
-                    </p>
+                    <p className="text-normal font-body">Error loading rule. Please try again or go back.</p>
                     <div className="py-4" />
-                    <Button
-                        variant="outline"
-                        onClick={onCancel}
-                        className="font-display border border-black select-none"
-                    >
-                        Go Back
-                    </Button>
+                    <div className="flex gap-3">
+                        <Button variant="outline" onClick={fetchPageData} className="font-display border border-black">Retry</Button>
+                        <Button variant="outline" onClick={onCancel} className="font-display border border-black">Go Back</Button>
+                    </div>
                 </div>
-            )}
-
-            {/* Main content */}
-            {isReady() && (
-                <div className="w-full flex flex-col">
-                    {/* When section */}
-                    <div className="mb-6">
-                        <div className="flex items-center gap-3 mb-4">
-                            <span className="font-display text-xl">When</span>
-                            <DropdownSelect
-                                type={DropdownSelectType.SingleString}
-                                title="Select event type"
-                                items={(() => {
-                                    const config = pageState.configData?.result || (pageState.configData as any)
-                                    return config?.events?.map((e: any) => e.type) || []
-                                })()}
-                                initialSelected={pageState.currentRuleState?.condition.type || ''}
-                                onChangeSelected={(selected) => handleEventTypeChange(selected as string)}
-                            />
-                            <span className="font-display text-xl">event occurs</span>
-                        </div>
+            </div>
+        )
+    }
 
-                        {/* Event Attributes Section - Always shown if event has attrs */}
-                        {pageState.currentRuleState?.condition.attrs && pageState.currentRuleState.condition.attrs.length > 0 && (
-                            <div className="mt-3 space-y-2">
-                                {pageState.currentRuleState.condition.attrs.map(attr => (
-                                    <RuleBuilderAttributeRow
-                                        key={attr.id}
-                                        attr={attr}
-                                        conditionId={pageState.currentRuleState!.condition.id}
-                                        attrType="attrs"
-                                        attrKeys={getAvailableAttrKeys('attrs')}
-                                        operatorTypesMapping={(() => {
-                                            const config = pageState.configData?.result || (pageState.configData as any)
-                                            return config?.operator_types || {}
-                                        })()}
-                                        getOperatorsForType={getOperatorsForType}
-                                        onUpdateAttr={handleUpdateAttr}
-                                        showDeleteButton={false}
-                                    />
-                                ))}
-                            </div>
-                        )}
-
-                        {/* Add Filter Button - Only shown if event has ud_attrs capability */}
-                        {(() => {
-                            const config = pageState.configData?.result || (pageState.configData as any)
-                            const currentEventType = pageState.currentRuleState?.condition.type
-                            const eventConfig = config?.events?.find((e: any) => e.type === currentEventType)
-                            const hasUdAttrs = eventConfig?.has_ud_attrs
-                            const hasCombinedAttrs = pageState.currentRuleState?.condition.ud_attrs.length > 0 ||
-                                                     pageState.currentRuleState?.condition.session_attrs.length > 0
-
-                            return hasUdAttrs && !hasCombinedAttrs && (
+    function RuleConfigurationSection() {
+        return (
+            <div className="w-full flex flex-col">
+                {/* When */}
+                <div className="mb-6">
+                    <div className="flex items-center gap-3 mb-4">
+                        <span className="font-display text-xl">When</span>
+
+                        <DropdownSelect
+                            type={DropdownSelectType.SingleString}
+                            title="Select event type"
+                            items={eventTypes}
+                            initialSelected={ruleState?.condition.type || ''}
+                            onChangeSelected={(selected) => handleEventTypeChange(selected as string)}
+                        />
+
+                        <span className="font-display text-xl">event occurs</span>
+                    </div>
+
+                    {/* Event Attributes */}
+                    {ruleState?.condition.attrs && ruleState.condition.attrs.length > 0 && (
+                        <div className="mt-3 space-y-2">
+                            {ruleState.condition.attrs.map(attr => (
+                                <RuleBuilderAttributeRow
+                                    key={attr.id}
+                                    attr={attr}
+                                    conditionId={ruleState.condition.id}
+                                    attrType="attrs"
+                                    attrKeys={getAvailableAttrKeys('attrs')}
+                                    operatorTypesMapping={apiState.config?.operator_types}
+                                    getOperatorsForType={getOperatorsForType}
+                                    onUpdateAttr={handleUpdateAttr}
+                                    showDeleteButton={false}
+                                />
+                            ))}
+                        </div>
+                    )}
+
+                    {/* Add Filter CTA (only show if event supports ud_attrs and no filters yet) */}
+                    {(() => {
+                        const currentEventType = ruleState?.condition.type
+                        const eventConfig = apiState.config?.events?.find(e => e.type === currentEventType)
+                        const hasUdAttrs = !!eventConfig?.has_ud_attrs
+                        const hasCombinedAttrs = hasFilterAttributes()
+                        if (hasUdAttrs && !hasCombinedAttrs) {
+                            return (
                                 <Button
                                     variant="ghost"
                                     onClick={() => {
-                                        // Add first session attr if available, otherwise first ud attr
                                         const sessionKeys = getAvailableAttrKeys('session_attrs')
-                                        if (sessionKeys.length > 0) {
-                                            handleAddAttribute('session_attrs')
-                                        } else {
-                                            handleAddAttribute('ud_attrs')
-                                        }
+                                        if (sessionKeys.length > 0) handleAddAttribute('session_attrs')
+                                        else handleAddAttribute('ud_attrs')
                                     }}
                                     className="text-sm font-body px-2 py-1 h-auto -ml-2 mt-2 hover:bg-yellow-200 focus:bg-yellow-200"
                                 >
                                     + Filter by attribute
                                 </Button>
                             )
-                        })()}
-
-                        {/* User-Defined & Session Attributes Section */}
-                        {(pageState.currentRuleState?.condition.ud_attrs.length > 0 ||
-                          pageState.currentRuleState?.condition.session_attrs.length > 0) && (
+                        }
+                        return null
+                    })()}
+
+                    {/* Session & UD attrs (if any) */}
+                    {hasFilterAttributes() && (() => {
+                        const condition = ruleState!.condition
+                        return (
                             <div className="mt-3 space-y-2">
-                                {/* Render session attrs */}
-                                {pageState.currentRuleState.condition.session_attrs.map(attr => (
+                                {condition.session_attrs.map(attr => (
                                     <RuleBuilderAttributeRow
                                         key={attr.id}
                                         attr={attr}
-                                        conditionId={pageState.currentRuleState!.condition.id}
-                                        attrType="session_attrs"
+                                        conditionId={condition.id}
+                                        attrType="attrs"
                                         attrKeys={getCombinedAttrKeys()}
-                                        operatorTypesMapping={(() => {
-                                            const config = pageState.configData?.result || (pageState.configData as any)
-                                            return config?.operator_types || {}
-                                        })()}
+                                        operatorTypesMapping={apiState.config?.operator_types}
                                         getOperatorsForType={getOperatorsForType}
                                         onUpdateAttr={handleUpdateAttr}
                                         onRemoveAttr={handleRemoveAttr}
                                         showDeleteButton={true}
                                     />
                                 ))}
-                                {/* Render ud attrs */}
-                                {pageState.currentRuleState.condition.ud_attrs.map(attr => (
+                                {condition.ud_attrs.map(attr => (
                                     <RuleBuilderAttributeRow
                                         key={attr.id}
                                         attr={attr}
-                                        conditionId={pageState.currentRuleState!.condition.id}
+                                        conditionId={condition.id}
                                         attrType="ud_attrs"
                                         attrKeys={getCombinedAttrKeys()}
-                                        operatorTypesMapping={(() => {
-                                            const config = pageState.configData?.result || (pageState.configData as any)
-                                            return config?.operator_types || {}
-                                        })()}
+                                        operatorTypesMapping={apiState.config?.operator_types}
                                         getOperatorsForType={getOperatorsForType}
                                         onUpdateAttr={handleUpdateAttr}
                                         onRemoveAttr={handleRemoveAttr}
                                         showDeleteButton={true}
                                     />
                                 ))}
-                                {/* Add more attributes button */}
                                 <Button
                                     variant="ghost"
                                     onClick={() => {
-                                        // Add first session attr if available, otherwise first ud attr
                                         const sessionKeys = getAvailableAttrKeys('session_attrs')
-                                        if (sessionKeys.length > 0) {
-                                            handleAddAttribute('session_attrs')
-                                        } else {
-                                            handleAddAttribute('ud_attrs')
-                                        }
+                                        if (sessionKeys.length > 0) handleAddAttribute('session_attrs')
+                                        else handleAddAttribute('ud_attrs')
                                     }}
                                     className="text-sm font-body px-2 py-1 h-auto -ml-2 mt-1 hover:bg-yellow-200 focus:bg-yellow-200"
                                 >
                                     + Filter by attribute
                                 </Button>
                             </div>
-                        )}
-                    </div>
+                        )
+                    })()}
+                </div>
 
-                    <div className='py-4' />
-
-                    {/* Then section */}
-                    <div className="mb-6">
-                        <p className="font-display text-xl mb-4">Then</p>
-
-                        {/* Collection config */}
-                        <div className="mb-4">
-                            <p className="font-body text-sm text-gray-500 mb-3">Collection</p>
-                            <div className="space-y-3 ml-4">
-                                <label className="flex items-center gap-3 cursor-pointer h-10">
-                                    <input
-                                        type="radio"
-                                        name="collectionMode"
-                                        value="sampled"
-                                        checked={pageState.currentRuleState?.collectionMode === 'sampled'}
-                                        onChange={() => updateRuleState({ collectionMode: 'sampled' })}
-                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                                    />
-                                    <SamplingRateInput
-                                        value={pageState.currentRuleState?.sampleRate || 100}
-                                        onChange={(value) => updateRuleState({ sampleRate: value })}
-                                        disabled={pageState.currentRuleState?.collectionMode !== 'sampled'}
-                                        type="events"
-                                    />
-                                </label>
-
-                                <label className="flex items-center gap-3 cursor-pointer h-10">
-                                    <input
-                                        type="radio"
-                                        name="collectionMode"
-                                        value="timeline"
-                                        checked={pageState.currentRuleState?.collectionMode === 'timeline'}
-                                        onChange={() => updateRuleState({ collectionMode: 'timeline' })}
-                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                                    />
-                                    <span className="text-sm font-body">Collect with timeline only</span>
-                                </label>
-
-                                <label className="flex items-center gap-3 cursor-pointer h-10">
-                                    <input
-                                        type="radio"
-                                        name="collectionMode"
-                                        value="disabled"
-                                        checked={pageState.currentRuleState?.collectionMode === 'disabled'}
-                                        onChange={() => updateRuleState({ collectionMode: 'disabled' })}
-                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                                    />
-                                    <span className="text-sm font-body">Do not collect</span>
-                                </label>
-                            </div>
+                <div className="py-4" />
+
+                {/* Then */}
+                <div className="mb-6">
+                    <p className="font-display text-xl mb-4">Then</p>
+
+                    {/* Collection */}
+                    <div className="mb-4">
+                        <p className="font-display text-gray-500 mb-3">Collection</p>
+                        <div className="space-y-3 ml-4">
+                            <label className="flex items-center gap-3 cursor-pointer h-10">
+                                <input
+                                    type="radio"
+                                    name="collectionMode"
+                                    value="sampled"
+                                    checked={ruleState?.collectionMode === 'sampled'}
+                                    onChange={() => updateRuleState({ collectionMode: 'sampled' })}
+                                    className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                />
+                                <SamplingRateInput
+                                    value={ruleState?.sampleRate || 100}
+                                    onChange={(value) => updateRuleState({ sampleRate: value })}
+                                    disabled={ruleState?.collectionMode !== 'sampled'}
+                                    type="events"
+                                />
+                            </label>
+
+                            <label className="flex items-center gap-3 cursor-pointer h-10">
+                                <input
+                                    type="radio"
+                                    name="collectionMode"
+                                    value="session_timeline"
+                                    checked={ruleState?.collectionMode === 'session_timeline'}
+                                    onChange={() => updateRuleState({ collectionMode: 'session_timeline' })}
+                                    className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                />
+                                <span className="text-sm font-body">Collect with timeline only</span>
+                            </label>
+
+                            <label className="flex items-center gap-3 cursor-pointer h-10">
+                                <input
+                                    type="radio"
+                                    name="collectionMode"
+                                    value="disabled"
+                                    checked={ruleState?.collectionMode === 'disabled'}
+                                    onChange={() => updateRuleState({ collectionMode: 'disabled' })}
+                                    className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                />
+                                <span className="text-sm font-body">Do not collect</span>
+                            </label>
                         </div>
+                    </div>
 
-                        {/* Attachments */}
-                        <div className="mb-4">
-                            <p className="font-body text-sm text-gray-500 mb-3">Attachments</p>
-                            <div className="space-y-3 ml-4">
-                                <label className="flex items-center gap-3 cursor-pointer h-10">
-                                    <input
-                                        type="radio"
-                                        name="attachmentMode"
-                                        value="layout_snapshot"
-                                        checked={pageState.currentRuleState?.take_layout_snapshot === true && pageState.currentRuleState?.take_screenshot === false}
-                                        onChange={() => updateRuleState({ take_layout_snapshot: true, take_screenshot: false })}
-                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                                    />
-                                    <span className="text-sm font-body">Take layout snapshot</span>
-                                </label>
-
-                                <label className="flex items-center gap-3 cursor-pointer h-10">
-                                    <input
-                                        type="radio"
-                                        name="attachmentMode"
-                                        value="screenshot"
-                                        checked={pageState.currentRuleState?.take_screenshot === true && pageState.currentRuleState?.take_layout_snapshot === false}
-                                        onChange={() => updateRuleState({ take_screenshot: true, take_layout_snapshot: false })}
-                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                                    />
-                                    <span className="text-sm font-body">Take screenshot</span>
-                                </label>
-
-                                <label className="flex items-center gap-3 cursor-pointer h-10">
-                                    <input
-                                        type="radio"
-                                        name="attachmentMode"
-                                        value="none"
-                                        checked={pageState.currentRuleState?.take_screenshot === false && pageState.currentRuleState?.take_layout_snapshot === false}
-                                        onChange={() => updateRuleState({ take_screenshot: false, take_layout_snapshot: false })}
-                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                                    />
-                                    <span className="text-sm font-body">No attachments</span>
-                                </label>
-                            </div>
+                    {/* Attachments */}
+                    <div className="mb-4">
+                        <p className="font-display text-gray-500 mb-3">Attachments</p>
+                        <div className="space-y-3 ml-4">
+                            <label className="flex items-center gap-3 cursor-pointer h-10">
+                                <input
+                                    type="radio"
+                                    name="attachmentMode"
+                                    value="layout_snapshot"
+                                    checked={ruleState?.take_layout_snapshot === true && ruleState?.take_screenshot === false}
+                                    onChange={() => updateRuleState({ take_layout_snapshot: true, take_screenshot: false })}
+                                    className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                />
+                                <span className="text-sm font-body">Take layout snapshot</span>
+                            </label>
+
+                            <label className="flex items-center gap-3 cursor-pointer h-10">
+                                <input
+                                    type="radio"
+                                    name="attachmentMode"
+                                    value="screenshot"
+                                    checked={ruleState?.take_screenshot === true && ruleState?.take_layout_snapshot === false}
+                                    onChange={() => updateRuleState({ take_screenshot: true, take_layout_snapshot: false })}
+                                    className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                />
+                                <span className="text-sm font-body">Take screenshot</span>
+                            </label>
+
+                            <label className="flex items-center gap-3 cursor-pointer h-10">
+                                <input
+                                    type="radio"
+                                    name="attachmentMode"
+                                    value="none"
+                                    checked={ruleState?.take_screenshot === false && ruleState?.take_layout_snapshot === false}
+                                    onChange={() => updateRuleState({ take_screenshot: false, take_layout_snapshot: false })}
+                                    className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                />
+                                <span className="text-sm font-body">No attachments</span>
+                            </label>
                         </div>
                     </div>
+                </div>
+            </div>
+        )
+    }
 
-                    {/* Action buttons */}
-                    <div className="flex justify-end gap-3">
-                        <Button
-                            type="button"
-                            variant="outline"
-                            onClick={onCancel}
-                            className="font-display"
-                            disabled={pageState.isSaving}
-                        >
-                            Cancel
-                        </Button>
-                        <Button
-                            type="button"
-                            variant="outline"
-                            onClick={handleSaveChanges}
-                            className="font-display border border-black"
-                            disabled={!hasChanges()}
-                            loading={pageState.isSaving}
-                        >
-                            {getPrimaryActionLabel()}
-                        </Button>
-                    </div>
+
+    return (
+        <div className="flex flex-col selection:bg-yellow-200/75 items-start">
+            <DeleteRule
+                open={uiState.showDeleteDialog}
+                onConfirm={handleDeleteRule}
+                onCancel={closeDeleteDialog}
+                isDeleting={uiState.isDeleting}
+            />
+
+            <div className="flex flex-row items-center justify-between w-full">
+                <p className="font-display text-4xl max-w-6xl">{mode === 'create' ? 'Create Event Rule' : 'Edit Event Rule'}</p>
+                <Button
+                    type="button"
+                    variant="outline"
+                    onClick={handleSaveChanges}
+                    className="font-display border border-black"
+                    disabled={!hasChanges()}
+                    loading={uiState.isSubmitting}
+                >
+                    {mode === 'create' ? 'Publish Rule' : 'Save Changes'}
+                </Button>
+            </div>
+
+            <div className="py-4" />
+
+            <RuleConfigurationSection />
+
+            {mode === 'edit' ? (
+                <div className="w-full flex justify-center">
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        onClick={openDeleteDialog}
+                        className="font-display text-red-600 hover:text-white hover:bg-red-600"
+                    >
+                        Delete Rule
+                    </Button>
                 </div>
-            )}
+            ) : <div />}
         </div>
     )
 }
diff --git a/frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx b/frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx
index ab080c9aa..473e1660d 100644
--- a/frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx
+++ b/frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx
@@ -10,7 +10,7 @@ const getCollectionConfigDisplay = (collectionMode: CollectionMode, samplingRate
     switch (collectionMode) {
         case 'sampled':
             return `Collect all at ${samplingRate}% sample rate`
-        case 'timeline':
+        case 'session_timeline':
             return 'Collect with session timeline only'
         case 'disabled':
             return 'Do not collect'
diff --git a/frontend/dashboard/app/components/targeting/rule_builder_attribute_row.tsx b/frontend/dashboard/app/components/targeting/rule_builder_attribute_row.tsx
index 68db613ad..46e777c69 100644
--- a/frontend/dashboard/app/components/targeting/rule_builder_attribute_row.tsx
+++ b/frontend/dashboard/app/components/targeting/rule_builder_attribute_row.tsx
@@ -1,21 +1,21 @@
 "use client"
 
-import DropdownSelect, { DropdownSelectType } from '@/app/components/dropdown_select';
-import { Button } from '@/app/components/button';
-import { X } from 'lucide-react';
+import DropdownSelect, { DropdownSelectType } from '@/app/components/dropdown_select'
+import { Button } from '@/app/components/button'
+import { X } from 'lucide-react'
+import { useState, useEffect } from 'react'
 
-type AttrType = 'attrs' | 'ud_attrs';
+type AttrType = 'attrs' | 'ud_attrs'
 
 const getTypeDisplayName = (type: string): string => {
     const typeMap: { [key: string]: string } = {
-        'float64': 'decimal',
-        'int64': 'number',
-        'number': 'number',
-        'string': 'text'
-    };
-
-    return typeMap[type] || type;
-};
+        float64: 'decimal',
+        int64: 'number',
+        number: 'number',
+        string: 'text',
+    }
+    return typeMap[type] || type
+}
 
 const RuleBuilderAttributeRow = ({
     attr,
@@ -26,23 +26,50 @@ const RuleBuilderAttributeRow = ({
     getOperatorsForType,
     onUpdateAttr,
     onRemoveAttr,
-    showDeleteButton = true
+    showDeleteButton = true,
 }: {
-    attr: { id: string; key: string; type: string; value: string | boolean | number; operator?: string; hasError?: boolean; errorMessage?: string; hint?: string };
-    conditionId: string;
-    attrType: AttrType;
-    attrKeys: string[];
-    operatorTypesMapping: any;
-    getOperatorsForType: (mapping: any, type: string) => string[];
-    onUpdateAttr: (conditionId: string, attrId: string, field: 'key' | 'type' | 'value' | 'operator', value: any, attrType: AttrType) => void;
-    onRemoveAttr?: (conditionId: string, attrId: string, attrType: AttrType) => void;
-    showDeleteButton?: boolean;
+    attr: {
+        id: string
+        key: string
+        type: string
+        value: string | boolean | number
+        operator?: string
+        hasError?: boolean
+        errorMessage?: string
+        hint?: string
+    }
+    conditionId: string
+    attrType: AttrType
+    attrKeys: string[]
+    operatorTypesMapping: any
+    getOperatorsForType: (mapping: any, type: string) => string[]
+    onUpdateAttr: (
+        conditionId: string,
+        attrId: string,
+        field: 'key' | 'type' | 'value' | 'operator',
+        value: any,
+        attrType: AttrType
+    ) => void
+    onRemoveAttr?: (conditionId: string, attrId: string, attrType: AttrType) => void
+    showDeleteButton?: boolean
 }) => {
-    const operatorTypes = getOperatorsForType(operatorTypesMapping, attr.type);
+    const operatorTypes = getOperatorsForType(operatorTypesMapping, attr.type)
+
+    // --- local state for input value (fixes losing focus) ---
+    const [localValue, setLocalValue] = useState(attr.value)
+
+    // keep local state in sync with external value changes (e.g. resets)
+    useEffect(() => {
+        if (attr.value !== localValue) {
+            setLocalValue(attr.value)
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [attr.value])
 
     const handleValueChange = (newValue: string | boolean | number) => {
-        onUpdateAttr(conditionId, attr.id, 'value', newValue, attrType);
-    };
+        setLocalValue(newValue)
+        onUpdateAttr(conditionId, attr.id, 'value', newValue, attrType)
+    }
 
     return (
         <div className={`flex items-center group ${attr.hasError ? 'mb-8' : ''}`}>
@@ -54,7 +81,7 @@ const RuleBuilderAttributeRow = ({
                     items={attrKeys}
                     initialSelected={attr.key}
                     onChangeSelected={(selected) => {
-                        onUpdateAttr(conditionId, attr.id, 'key', selected as string, attrType);
+                        onUpdateAttr(conditionId, attr.id, 'key', selected as string, attrType)
                     }}
                     buttonClassName="flex justify-between font-display border border-black w-full select-none"
                 />
@@ -68,7 +95,7 @@ const RuleBuilderAttributeRow = ({
                     items={operatorTypes}
                     initialSelected={attr.operator || operatorTypes[0] || 'eq'}
                     onChangeSelected={(selected) => {
-                        onUpdateAttr(conditionId, attr.id, 'operator', selected as string, attrType);
+                        onUpdateAttr(conditionId, attr.id, 'operator', selected as string, attrType)
                     }}
                     buttonClassName="flex justify-between font-display border border-black w-full select-none"
                 />
@@ -81,7 +108,7 @@ const RuleBuilderAttributeRow = ({
                         type={DropdownSelectType.SingleString}
                         title="Value"
                         items={['true', 'false']}
-                        initialSelected={attr.value ? 'true' : 'false'}
+                        initialSelected={localValue ? 'true' : 'false'}
                         onChangeSelected={(selected) => {
                             handleValueChange((selected as string) === 'true')
                         }}
@@ -90,20 +117,39 @@ const RuleBuilderAttributeRow = ({
                 ) : (
                     <div className="relative">
                         <input
-                            id="change-team-name-input"
-                            type={attr.type === 'number' || attr.type === 'int64' || attr.type === 'float64' ? 'number' : 'text'}
-                            placeholder={attr.hint ? attr.hint :`Enter ${getTypeDisplayName(attr.type)} value`}
-                            value={attr.value as string | number}
+                            id={`attr-value-${attr.id}`}
+                            type={
+                                attr.type === 'number' ||
+                                attr.type === 'int64' ||
+                                attr.type === 'float64'
+                                    ? 'number'
+                                    : 'text'
+                            }
+                            placeholder={
+                                attr.hint
+                                    ? attr.hint
+                                    : `Enter ${getTypeDisplayName(attr.type)} value`
+                            }
+                            value={localValue as string | number}
                             onChange={(e) => {
-                                const value = (attr.type === 'number' || attr.type === 'int64' || attr.type === 'float64') ?
-                                    (e.target.value === '' ? '' : Number(e.target.value)) :
-                                    e.target.value
+                                const value =
+                                    attr.type === 'number' ||
+                                    attr.type === 'int64' ||
+                                    attr.type === 'float64'
+                                        ? e.target.value === ''
+                                            ? ''
+                                            : Number(e.target.value)
+                                        : e.target.value
                                 handleValueChange(value)
                             }}
-                            className={`w-full border rounded-md outline-hidden text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 font-body placeholder:text-neutral-400 ${attr.hasError ? 'border-red-500' : 'border-black'}`}
+                            className={`w-full border rounded-md outline-hidden text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 font-body placeholder:text-neutral-400 ${
+                                attr.hasError ? 'border-red-500' : 'border-black'
+                            }`}
                         />
                         {attr.hasError && attr.errorMessage && (
-                            <p className="absolute top-full left-0 w-full text-red-500 text-xs mt-1 ml-1">{attr.errorMessage}</p>
+                            <p className="absolute top-full left-0 w-full text-red-500 text-xs mt-1 ml-1">
+                                {attr.errorMessage}
+                            </p>
                         )}
                     </div>
                 )}
@@ -127,6 +173,6 @@ const RuleBuilderAttributeRow = ({
             </div>
         </div>
     )
-};
+}
 
-export default RuleBuilderAttributeRow;
\ No newline at end of file
+export default RuleBuilderAttributeRow
diff --git a/frontend/dashboard/app/components/targeting/trace_rule_builder.tsx b/frontend/dashboard/app/components/targeting/trace_rule_builder.tsx
index cf93ea9dc..b828a4a55 100644
--- a/frontend/dashboard/app/components/targeting/trace_rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/trace_rule_builder.tsx
@@ -14,13 +14,17 @@ import {
     updateTraceTargetingRule,
     CreateTraceTargetingRuleApiStatus,
     UpdateTraceTargetingRuleApiStatus,
+    deleteTraceTargetingRule,
+    DeleteTraceTargetingRuleApiStatus,
 } from '@/app/api/api_calls'
 import LoadingBar from '@/app/components/loading_bar'
+import DangerConfirmationDialog from '@/app/components/danger_confirmation_dialog'
 import { toastPositive, toastNegative } from '@/app/utils/use_toast'
-import { TraceCondition } from '@/app/utils/cel/conditions'
+import { TraceCondition, AttributeField } from '@/app/utils/cel/conditions'
 import { celToConditions } from '@/app/utils/cel/cel_parser'
 import DropdownSelect, { DropdownSelectType } from '@/app/components/dropdown_select'
 import { traceConditionToCel } from '@/app/utils/cel/cel_generator'
+import RuleBuilderAttributeRow from '@/app/components/targeting/rule_builder_attribute_row'
 import SamplingRateInput from '@/app/components/targeting/sampling_rate_input'
 
 interface TraceRuleBuilderProps {
@@ -28,12 +32,12 @@ interface TraceRuleBuilderProps {
     appId: string
     ruleId?: string
     onCancel: () => void
-    onPrimaryAction: () => void
+    onSave: () => void
 }
 
 interface TraceRuleState {
     condition: TraceCondition
-    collectionMode: 'sampled' | 'timeline' | 'disabled'
+    collectionMode: 'sampled' | 'session_timeline' | 'disabled'
     sampleRate: number
 }
 
@@ -52,9 +56,8 @@ export default function TraceRuleBuilder({
     appId,
     ruleId,
     onCancel,
-    onPrimaryAction: onSave,
+    onSave: onSave,
 }: TraceRuleBuilderProps) {
-    const router = useRouter()
     const baseId = useId()
     const [pageState, setPageState] = useState<PageState>({
         ruleData: null,
@@ -65,6 +68,8 @@ export default function TraceRuleBuilder({
         currentRuleState: null,
         isSaving: false
     })
+    const [deleteConfirmationModalOpen, setDeleteConfirmationModalOpen] = useState(false)
+    const [deleteApiStatus, setDeleteApiStatus] = useState(DeleteTraceTargetingRuleApiStatus.Init)
 
     useEffect(() => {
         fetchPageData()
@@ -129,7 +134,7 @@ export default function TraceRuleBuilder({
         } else {
             return {
                 condition: createDefaultTraceCondition(configData, idPrefix),
-                collectionMode: 'timeline',
+                collectionMode: 'session_timeline',
                 sampleRate: 0
             }
         }
@@ -143,6 +148,7 @@ export default function TraceRuleBuilder({
             id: `${idPrefix}-condition`,
             spanName: firstTraceConfig?.name || '',
             operator: 'eq',
+            attrs: [],
             ud_attrs: [],
             session_attrs: [],
         }
@@ -186,6 +192,48 @@ export default function TraceRuleBuilder({
         }))
     }
 
+    const getAvailableAttrKeys = (attrType: 'attrs' | 'ud_attrs' | 'session_attrs'): string[] => {
+        if (!pageState.configData) return []
+
+        const config = pageState.configData.result || (pageState.configData as any)
+        const currentSpanName = pageState.currentRuleState?.condition.spanName
+
+        if (attrType === 'attrs') {
+            const traceConfig = config?.trace_config?.find(t => t.name === currentSpanName)
+            return traceConfig?.attrs?.map((attr: any) => attr.key) || []
+        } else if (attrType === 'ud_attrs') {
+            return config?.trace_ud_attrs?.map((attr: any) => attr.key) || []
+        } else {
+            return config?.session_attrs?.map((attr: any) => attr.key) || []
+        }
+    }
+
+    const getCombinedAttrKeys = (): string[] => {
+        const sessionKeys = getAvailableAttrKeys('session_attrs')
+        const udKeys = getAvailableAttrKeys('ud_attrs')
+        return [...sessionKeys, ...udKeys]
+    }
+
+    const getOperatorsForType = (operatorTypesMapping: any, type: string): string[] => {
+        return operatorTypesMapping?.[type] || ['eq', 'neq']
+    }
+
+    const getAttrConfigByKey = (key: string, attrType: 'attrs' | 'ud_attrs' | 'session_attrs') => {
+        if (!pageState.configData) return null
+
+        const config = pageState.configData.result || (pageState.configData as any)
+        const currentSpanName = pageState.currentRuleState?.condition.spanName
+
+        if (attrType === 'attrs') {
+            const traceConfig = config?.trace_config?.find(t => t.name === currentSpanName)
+            return traceConfig?.attrs?.find((attr: any) => attr.key === key)
+        } else if (attrType === 'ud_attrs') {
+            return config?.trace_ud_attrs?.find((attr: any) => attr.key === key)
+        } else {
+            return config?.session_attrs?.find((attr: any) => attr.key === key)
+        }
+    }
+
     const handleSpanNameChange = (newSpanName: string) => {
         if (!pageState.configData) return
 
@@ -196,40 +244,112 @@ export default function TraceRuleBuilder({
         const traceConfig = config.trace_config.find(t => t.name === newSpanName)
         if (!traceConfig) return
 
-        // Create new condition with updated span name
-        const ud_attrs = traceConfig.has_ud_attrs
-            ? config.trace_ud_attrs.map((attr, idx) => ({
-                id: `${baseId}-ud-${idx}`,
-                key: attr.key,
-                type: attr.type,
-                value: attr.type === 'bool' ? false : attr.type === 'number' ? 0 : '',
-                hint: attr.hint,
-                operator: 'eq'
-            }))
-            : []
-
-        const session_attrs = traceConfig.has_ud_attrs
-            ? config.session_attrs.map((attr, idx) => ({
-                id: `${baseId}-session-${idx}`,
-                key: attr.key,
-                type: attr.type,
-                value: attr.type === 'bool' ? false : attr.type === 'number' ? 0 : '',
-                hint: attr.hint,
-                operator: 'eq'
-            }))
-            : []
+        // Pre-populate trace attrs (rendered by default)
+        const attrs = (traceConfig.attrs || []).map((attr, idx) => ({
+            id: `${baseId}-attr-${idx}`,
+            key: attr.key,
+            type: attr.type,
+            value: attr.type === 'bool' ? false : attr.type === 'number' ? 0 : '',
+            hint: attr.hint,
+            operator: 'eq'
+        }))
 
+        // Start with empty arrays for ud_attrs and session_attrs (added on demand)
         const newCondition: TraceCondition = {
             id: `${baseId}-condition`,
             spanName: newSpanName,
             operator: 'eq',
-            ud_attrs,
-            session_attrs
+            attrs,
+            ud_attrs: [],
+            session_attrs: []
         }
 
         updateRuleState({ condition: newCondition })
     }
 
+    const handleAddAttribute = (attrType: 'ud_attrs' | 'session_attrs') => {
+        if (!pageState.currentRuleState) return
+
+        const availableKeys = attrType === 'ud_attrs'
+            ? getAvailableAttrKeys('ud_attrs')
+            : getAvailableAttrKeys('session_attrs')
+
+        if (availableKeys.length === 0) return
+
+        const firstKey = availableKeys[0]
+        const attrConfig = getAttrConfigByKey(firstKey, attrType)
+
+        const newAttr: AttributeField = {
+            id: `${baseId}-${attrType}-${Date.now()}`,
+            key: firstKey,
+            type: attrConfig?.type || 'string',
+            value: attrConfig?.type === 'bool' ? false : attrConfig?.type === 'number' ? 0 : '',
+            hint: attrConfig?.hint,
+            operator: 'eq'
+        }
+
+        const updatedCondition = {
+            ...pageState.currentRuleState.condition,
+            [attrType]: [...pageState.currentRuleState.condition[attrType], newAttr]
+        }
+
+        updateRuleState({ condition: updatedCondition })
+    }
+
+    const handleUpdateAttr = (
+        conditionId: string,
+        attrId: string,
+        field: 'key' | 'type' | 'value' | 'operator',
+        value: any,
+        attrType: 'attrs' | 'ud_attrs' | 'session_attrs'
+    ) => {
+        if (!pageState.currentRuleState) return
+
+        const attrs = pageState.currentRuleState.condition[attrType]
+        const attrIndex = attrs.findIndex(a => a.id === attrId)
+        if (attrIndex === -1) return
+
+        const updatedAttrs = [...attrs]
+        const updatedAttr = { ...updatedAttrs[attrIndex] }
+
+        if (field === 'key') {
+            // When key changes, update type and reset value
+            const attrConfig = getAttrConfigByKey(value, attrType)
+            updatedAttr.key = value
+            updatedAttr.type = attrConfig?.type || 'string'
+            updatedAttr.value = attrConfig?.type === 'bool' ? false : attrConfig?.type === 'number' ? 0 : ''
+            updatedAttr.hint = attrConfig?.hint
+        } else {
+            updatedAttr[field] = value
+        }
+
+        updatedAttrs[attrIndex] = updatedAttr
+
+        const updatedCondition = {
+            ...pageState.currentRuleState.condition,
+            [attrType]: updatedAttrs
+        }
+
+        updateRuleState({ condition: updatedCondition })
+    }
+
+    const handleRemoveAttr = (
+        conditionId: string,
+        attrId: string,
+        attrType: 'attrs' | 'ud_attrs' | 'session_attrs'
+    ) => {
+        if (!pageState.currentRuleState) return
+
+        const updatedAttrs = pageState.currentRuleState.condition[attrType].filter(a => a.id !== attrId)
+
+        const updatedCondition = {
+            ...pageState.currentRuleState.condition,
+            [attrType]: updatedAttrs
+        }
+
+        updateRuleState({ condition: updatedCondition })
+    }
+
     const handleSaveChanges = async () => {
         if (!pageState.currentRuleState) {
             return
@@ -276,9 +396,61 @@ export default function TraceRuleBuilder({
         }
     }
 
+    const handleDeleteRule = async () => {
+        if (!ruleId) return
+
+        setDeleteApiStatus(DeleteTraceTargetingRuleApiStatus.Loading)
+
+        try {
+            const result = await deleteTraceTargetingRule(appId, ruleId)
+            if (result.status === DeleteTraceTargetingRuleApiStatus.Success) {
+                setDeleteApiStatus(DeleteTraceTargetingRuleApiStatus.Success)
+                toastPositive('Trace rule deleted successfully')
+                onSave()
+            } else {
+                setDeleteApiStatus(DeleteTraceTargetingRuleApiStatus.Error)
+                toastNegative('Failed to delete trace rule', result.error || 'Unknown error')
+            }
+        } catch (error) {
+            setDeleteApiStatus(DeleteTraceTargetingRuleApiStatus.Error)
+            toastNegative('An error occurred', 'Please try again')
+        }
+    }
+
+    const hasFilterAttributes = () => {
+        return (pageState.currentRuleState?.condition?.ud_attrs?.length ?? 0) > 0 ||
+            (pageState.currentRuleState?.condition?.session_attrs?.length ?? 0) > 0
+    }
+
     return (
         <div className="flex flex-col selection:bg-yellow-200/75 items-start">
-            <p className="font-display text-4xl max-w-6xl text-center">{getTitle()}</p>
+            {/* Delete Confirmation Dialog */}
+            <DangerConfirmationDialog
+                body={<p className="font-body">Are you sure you want to delete this trace rule? This action cannot be undone.</p>}
+                open={deleteConfirmationModalOpen}
+                affirmativeText="Delete Rule"
+                cancelText="Cancel"
+                onAffirmativeAction={() => {
+                    setDeleteConfirmationModalOpen(false)
+                    handleDeleteRule()
+                }}
+                onCancelAction={() => setDeleteConfirmationModalOpen(false)}
+            />
+
+            <div className="flex flex-row items-center justify-between w-full">
+                <p className="font-display text-4xl max-w-6xl">{getTitle()}</p>
+                {mode === 'edit' && (
+                    <Button
+                        variant="destructive"
+                        onClick={() => setDeleteConfirmationModalOpen(true)}
+                        className="font-display"
+                        disabled={deleteApiStatus === DeleteTraceTargetingRuleApiStatus.Loading}
+                        loading={deleteApiStatus === DeleteTraceTargetingRuleApiStatus.Loading}
+                    >
+                        Delete Rule
+                    </Button>
+                )}
+            </div>
             <div className="py-4" />
 
             {/* Loading indicator */}
@@ -322,9 +494,116 @@ export default function TraceRuleBuilder({
                             />
                             <span className="font-display text-xl">span ends</span>
                         </div>
-                        <button className="text-sm font-body flex items-center gap-2">
-                            + Filter by attribute
-                        </button>
+
+                        {/* Trace Attributes Section - Always shown if trace has attrs */}
+                        {pageState.currentRuleState?.condition.attrs && pageState.currentRuleState.condition.attrs.length > 0 && (
+                            <div className="mt-3 space-y-2">
+                                {pageState.currentRuleState.condition.attrs.map(attr => (
+                                    <RuleBuilderAttributeRow
+                                        key={attr.id}
+                                        attr={attr}
+                                        conditionId={pageState.currentRuleState!.condition.id}
+                                        attrType="attrs"
+                                        attrKeys={getAvailableAttrKeys('attrs')}
+                                        operatorTypesMapping={(() => {
+                                            const config = pageState.configData?.result || (pageState.configData as any)
+                                            return config?.operator_types || {}
+                                        })()}
+                                        getOperatorsForType={getOperatorsForType}
+                                        onUpdateAttr={handleUpdateAttr}
+                                        showDeleteButton={false}
+                                    />
+                                ))}
+                            </div>
+                        )}
+
+                        {/* Add Filter Button - Only shown if trace has ud_attrs capability */}
+                        {(() => {
+                            const config = pageState.configData?.result || (pageState.configData as any)
+                            const currentSpanName = pageState.currentRuleState?.condition.spanName
+                            const traceConfig = config?.trace_config?.find((t: any) => t.name === currentSpanName)
+                            const hasUdAttrs = traceConfig?.has_ud_attrs
+                            const hasCombinedAttrs = hasFilterAttributes()
+
+                            return hasUdAttrs && !hasCombinedAttrs && (
+                                <Button
+                                    variant="ghost"
+                                    onClick={() => {
+                                        // Add first session attr if available, otherwise first ud attr
+                                        const sessionKeys = getAvailableAttrKeys('session_attrs')
+                                        if (sessionKeys.length > 0) {
+                                            handleAddAttribute('session_attrs')
+                                        } else {
+                                            handleAddAttribute('ud_attrs')
+                                        }
+                                    }}
+                                    className="text-sm font-body px-2 py-1 h-auto -ml-2 mt-2 hover:bg-yellow-200 focus:bg-yellow-200"
+                                >
+                                    + Filter by attribute
+                                </Button>
+                            )
+                        })()}
+
+                        {/* User-Defined & Session Attributes Section */}
+                        {hasFilterAttributes() && (() => {
+                            const condition = pageState.currentRuleState!.condition
+                            return (
+                                <div className="mt-3 space-y-2">
+                                    {/* Render session attrs */}
+                                    {condition.session_attrs.map(attr => (
+                                        <RuleBuilderAttributeRow
+                                            key={attr.id}
+                                            attr={attr}
+                                            conditionId={condition.id}
+                                            attrType="session_attrs"
+                                            attrKeys={getCombinedAttrKeys()}
+                                            operatorTypesMapping={(() => {
+                                                const config = pageState.configData?.result || (pageState.configData as any)
+                                                return config?.operator_types || {}
+                                            })()}
+                                            getOperatorsForType={getOperatorsForType}
+                                            onUpdateAttr={handleUpdateAttr}
+                                            onRemoveAttr={handleRemoveAttr}
+                                            showDeleteButton={true}
+                                        />
+                                    ))}
+                                    {/* Render ud attrs */}
+                                    {condition.ud_attrs.map(attr => (
+                                        <RuleBuilderAttributeRow
+                                            key={attr.id}
+                                            attr={attr}
+                                            conditionId={condition.id}
+                                            attrType="ud_attrs"
+                                            attrKeys={getCombinedAttrKeys()}
+                                            operatorTypesMapping={(() => {
+                                                const config = pageState.configData?.result || (pageState.configData as any)
+                                                return config?.operator_types || {}
+                                            })()}
+                                            getOperatorsForType={getOperatorsForType}
+                                            onUpdateAttr={handleUpdateAttr}
+                                            onRemoveAttr={handleRemoveAttr}
+                                            showDeleteButton={true}
+                                        />
+                                    ))}
+                                    {/* Add more attributes button */}
+                                    <Button
+                                        variant="ghost"
+                                        onClick={() => {
+                                            // Add first session attr if available, otherwise first ud attr
+                                            const sessionKeys = getAvailableAttrKeys('session_attrs')
+                                            if (sessionKeys.length > 0) {
+                                                handleAddAttribute('session_attrs')
+                                            } else {
+                                                handleAddAttribute('ud_attrs')
+                                            }
+                                        }}
+                                        className="text-sm font-body px-2 py-1 h-auto -ml-2 mt-1 hover:bg-yellow-200 focus:bg-yellow-200"
+                                    >
+                                        + Filter by attribute
+                                    </Button>
+                                </div>
+                            )
+                        })()}
                     </div>
 
                     <div className='py-4' />
@@ -335,7 +614,7 @@ export default function TraceRuleBuilder({
 
                         {/* Collection config */}
                         <div className="mb-4">
-                            <p className="font-body text-sm text-gray-500 mb-3">Collection</p>
+                            <p className="font-display text-gray-500 mb-3">Collection</p>
                             <div className="space-y-3 ml-4">
                                 <label className="flex items-center gap-3 cursor-pointer h-10">
                                     <input
@@ -359,8 +638,8 @@ export default function TraceRuleBuilder({
                                         type="radio"
                                         name="collectionMode"
                                         value="timeline"
-                                        checked={pageState.currentRuleState?.collectionMode === 'timeline'}
-                                        onChange={() => updateRuleState({ collectionMode: 'timeline' })}
+                                        checked={pageState.currentRuleState?.collectionMode === 'session_timeline'}
+                                        onChange={() => updateRuleState({ collectionMode: 'session_timeline' })}
                                         className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
                                     />
                                     <span className="text-sm font-body">Collect with timeline only</span>
@@ -407,4 +686,4 @@ export default function TraceRuleBuilder({
             )}
         </div>
     )
-}
+}
\ No newline at end of file

From 2f78ee123bfedaccb79c90bebaa6fd5f4b0d4375 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Mon, 10 Nov 2025 17:24:27 +0530
Subject: [PATCH 61/98] feat(frontend): refactor event builder

---
 .../targeting/event_rule_builder.tsx          |  2 +-
 .../targeting/rule_builder_attribute_row.tsx  | 28 ++++++++-----------
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/frontend/dashboard/app/components/targeting/event_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
index b8b4605e1..56f5c64db 100644
--- a/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
@@ -182,7 +182,7 @@ export default function EventRuleBuilder({
 
     const hasChanges = useCallback(() => {
         if (mode === 'create') return true
-        return JSON.stringify(initialRuleState) !== JSON.stringify(ruleState)
+        return JSON.stringify(initialRuleState) === JSON.stringify(ruleState)
     }, [mode, initialRuleState, ruleState])
 
 
diff --git a/frontend/dashboard/app/components/targeting/rule_builder_attribute_row.tsx b/frontend/dashboard/app/components/targeting/rule_builder_attribute_row.tsx
index 46e777c69..2086726d9 100644
--- a/frontend/dashboard/app/components/targeting/rule_builder_attribute_row.tsx
+++ b/frontend/dashboard/app/components/targeting/rule_builder_attribute_row.tsx
@@ -3,9 +3,9 @@
 import DropdownSelect, { DropdownSelectType } from '@/app/components/dropdown_select'
 import { Button } from '@/app/components/button'
 import { X } from 'lucide-react'
-import { useState, useEffect } from 'react'
+// REMOVED: import { useState, useEffect } from 'react'
 
-type AttrType = 'attrs' | 'ud_attrs'
+type AttrType = 'attrs' | 'ud_attrs' | 'session_attrs' // Ensure 'session_attrs' is here
 
 const getTypeDisplayName = (type: string): string => {
     const typeMap: { [key: string]: string } = {
@@ -55,19 +55,11 @@ const RuleBuilderAttributeRow = ({
 }) => {
     const operatorTypes = getOperatorsForType(operatorTypesMapping, attr.type)
 
-    // --- local state for input value (fixes losing focus) ---
-    const [localValue, setLocalValue] = useState(attr.value)
-
-    // keep local state in sync with external value changes (e.g. resets)
-    useEffect(() => {
-        if (attr.value !== localValue) {
-            setLocalValue(attr.value)
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [attr.value])
+    // REMOVED: localValue state
+    // REMOVED: useEffect
 
+    // This function now ONLY updates the parent state
     const handleValueChange = (newValue: string | boolean | number) => {
-        setLocalValue(newValue)
         onUpdateAttr(conditionId, attr.id, 'value', newValue, attrType)
     }
 
@@ -108,7 +100,8 @@ const RuleBuilderAttributeRow = ({
                         type={DropdownSelectType.SingleString}
                         title="Value"
                         items={['true', 'false']}
-                        initialSelected={localValue ? 'true' : 'false'}
+                        // BIND directly to attr.value
+                        initialSelected={attr.value ? 'true' : 'false'}
                         onChangeSelected={(selected) => {
                             handleValueChange((selected as string) === 'true')
                         }}
@@ -130,14 +123,15 @@ const RuleBuilderAttributeRow = ({
                                     ? attr.hint
                                     : `Enter ${getTypeDisplayName(attr.type)} value`
                             }
-                            value={localValue as string | number}
+                            // BIND directly to attr.value
+                            value={attr.value as string | number}
                             onChange={(e) => {
                                 const value =
                                     attr.type === 'number' ||
                                     attr.type === 'int64' ||
                                     attr.type === 'float64'
                                         ? e.target.value === ''
-                                            ? ''
+                                            ? '' // Handle empty string for numbers
                                             : Number(e.target.value)
                                         : e.target.value
                                 handleValueChange(value)
@@ -175,4 +169,4 @@ const RuleBuilderAttributeRow = ({
     )
 }
 
-export default RuleBuilderAttributeRow
+export default RuleBuilderAttributeRow
\ No newline at end of file

From 298462c1fc2166ac6d3f834dd5e6ddcee1ae55ee Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Mon, 10 Nov 2025 17:25:18 +0530
Subject: [PATCH 62/98] feat(frontend): refactor event builder

---
 .../app/components/targeting/event_rule_builder.tsx          | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/dashboard/app/components/targeting/event_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
index 56f5c64db..fc17357b1 100644
--- a/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
@@ -17,7 +17,6 @@ import {
     DeleteEventTargetingRuleApiStatus,
 } from '@/app/api/api_calls'
 import LoadingBar from '@/app/components/loading_bar'
-import DangerConfirmationDialog from '@/app/components/danger_confirmation_dialog'
 import { toastPositive, toastNegative } from '@/app/utils/use_toast'
 import { EventCondition, AttributeField } from '@/app/utils/cel/conditions'
 import { celToConditions } from '@/app/utils/cel/cel_parser'
@@ -182,7 +181,7 @@ export default function EventRuleBuilder({
 
     const hasChanges = useCallback(() => {
         if (mode === 'create') return true
-        return JSON.stringify(initialRuleState) === JSON.stringify(ruleState)
+        return JSON.stringify(initialRuleState) !== JSON.stringify(ruleState)
     }, [mode, initialRuleState, ruleState])
 
 
@@ -661,6 +660,8 @@ export default function EventRuleBuilder({
 
             <RuleConfigurationSection />
 
+            <div className="py-4" />
+
             {mode === 'edit' ? (
                 <div className="w-full flex justify-center">
                     <Button

From 3c9db2c61f8f0854e865adb47446f6ec4f5e15b1 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Mon, 10 Nov 2025 17:43:22 +0530
Subject: [PATCH 63/98] feat(frontend): fix input in attribute row

---
 .../targeting/rule_builder_attribute_row.tsx  | 32 +++++++++++--------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/frontend/dashboard/app/components/targeting/rule_builder_attribute_row.tsx b/frontend/dashboard/app/components/targeting/rule_builder_attribute_row.tsx
index 2086726d9..ea945a9b2 100644
--- a/frontend/dashboard/app/components/targeting/rule_builder_attribute_row.tsx
+++ b/frontend/dashboard/app/components/targeting/rule_builder_attribute_row.tsx
@@ -3,9 +3,9 @@
 import DropdownSelect, { DropdownSelectType } from '@/app/components/dropdown_select'
 import { Button } from '@/app/components/button'
 import { X } from 'lucide-react'
-// REMOVED: import { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 
-type AttrType = 'attrs' | 'ud_attrs' | 'session_attrs' // Ensure 'session_attrs' is here
+type AttrType = 'attrs' | 'ud_attrs' | 'session_attrs'
 
 const getTypeDisplayName = (type: string): string => {
     const typeMap: { [key: string]: string } = {
@@ -55,10 +55,14 @@ const RuleBuilderAttributeRow = ({
 }) => {
     const operatorTypes = getOperatorsForType(operatorTypesMapping, attr.type)
 
-    // REMOVED: localValue state
-    // REMOVED: useEffect
+    // Local state for value to prevent re-renders while typing
+    const [localValue, setLocalValue] = useState(attr.value)
+
+    // Sync local value if parent updates attr.value externally
+    useEffect(() => {
+        setLocalValue(attr.value)
+    }, [attr.value])
 
-    // This function now ONLY updates the parent state
     const handleValueChange = (newValue: string | boolean | number) => {
         onUpdateAttr(conditionId, attr.id, 'value', newValue, attrType)
     }
@@ -100,7 +104,6 @@ const RuleBuilderAttributeRow = ({
                         type={DropdownSelectType.SingleString}
                         title="Value"
                         items={['true', 'false']}
-                        // BIND directly to attr.value
                         initialSelected={attr.value ? 'true' : 'false'}
                         onChangeSelected={(selected) => {
                             handleValueChange((selected as string) === 'true')
@@ -123,17 +126,18 @@ const RuleBuilderAttributeRow = ({
                                     ? attr.hint
                                     : `Enter ${getTypeDisplayName(attr.type)} value`
                             }
-                            // BIND directly to attr.value
-                            value={attr.value as string | number}
-                            onChange={(e) => {
+                            value={localValue as string | number}
+                            onChange={(e) => setLocalValue(e.target.value)} // only local update
+                            onBlur={(e) => {
+                                const raw = e.target.value
                                 const value =
                                     attr.type === 'number' ||
                                     attr.type === 'int64' ||
                                     attr.type === 'float64'
-                                        ? e.target.value === ''
-                                            ? '' // Handle empty string for numbers
-                                            : Number(e.target.value)
-                                        : e.target.value
+                                        ? raw === ''
+                                            ? ''
+                                            : Number(raw)
+                                        : raw
                                 handleValueChange(value)
                             }}
                             className={`w-full border rounded-md outline-hidden text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 font-body placeholder:text-neutral-400 ${
@@ -169,4 +173,4 @@ const RuleBuilderAttributeRow = ({
     )
 }
 
-export default RuleBuilderAttributeRow
\ No newline at end of file
+export default RuleBuilderAttributeRow

From ec0042956818f95df1a9528a402c49dc7ef0b0d3 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Mon, 10 Nov 2025 17:48:22 +0530
Subject: [PATCH 64/98] feat(frontend): discard attrs with empty values

---
 .../dashboard/app/utils/cel/cel_generator.ts  | 120 ++++++++++--------
 1 file changed, 67 insertions(+), 53 deletions(-)

diff --git a/frontend/dashboard/app/utils/cel/cel_generator.ts b/frontend/dashboard/app/utils/cel/cel_generator.ts
index 4d842fef5..b04c2136d 100644
--- a/frontend/dashboard/app/utils/cel/cel_generator.ts
+++ b/frontend/dashboard/app/utils/cel/cel_generator.ts
@@ -7,7 +7,14 @@
  * evaluation.
  */
 
-import { EventCondition, AttributeCondition, TraceCondition, EventConditions, SessionConditions, TraceConditions } from "./conditions"
+import {
+  EventCondition,
+  AttributeCondition,
+  TraceCondition,
+  EventConditions,
+  SessionConditions,
+  TraceConditions
+} from "./conditions"
 import { ParsedConditions } from "./cel_parser"
 
 const OPERATOR_MAPPINGS = {
@@ -47,13 +54,17 @@ function createEventTypeCondition(eventType: string): string {
  */
 function createEventAttributeCondition(
   attribute: {
-    key: string;
-    type: string;
-    value: string | boolean | number;
+    key: string
+    type: string
+    value: string | boolean | number
     operator?: string
   },
   eventType: string
-): string {
+): string | null {
+  if (attribute.value === '' || attribute.value === undefined || attribute.value === null) {
+    return null
+  }
+
   const operator = OPERATOR_MAPPINGS[attribute.operator as keyof typeof OPERATOR_MAPPINGS] || '=='
   const formattedValue = formatValueForCel(attribute.value, attribute.type)
   const fullKey = `${eventType}.${attribute.key}`
@@ -70,11 +81,15 @@ function createEventAttributeCondition(
  * Example output: 'event.user_defined_attrs.is_premium == true'
  */
 function createUserDefinedEventAttributeCondition(attribute: {
-  key: string;
-  type: string;
-  value: string | boolean | number;
+  key: string
+  type: string
+  value: string | boolean | number
   operator?: string
-}): string {
+}): string | null {
+  if (attribute.value === '' || attribute.value === undefined || attribute.value === null) {
+    return null
+  }
+
   const operator = OPERATOR_MAPPINGS[attribute.operator as keyof typeof OPERATOR_MAPPINGS] || '=='
   const formattedValue = formatValueForCel(attribute.value, attribute.type)
   const fullKey = `event.user_defined_attrs.${attribute.key}`
@@ -91,11 +106,15 @@ function createUserDefinedEventAttributeCondition(attribute: {
  * Example output: 'attribute.session_duration > 300'
  */
 function createSessionAttributeCondition(attribute: {
-  key: string;
-  type: string;
-  value: string | boolean | number;
+  key: string
+  type: string
+  value: string | boolean | number
   operator?: string
-}): string {
+}): string | null {
+  if (attribute.value === '' || attribute.value === undefined || attribute.value === null) {
+    return null
+  }
+
   const operator = OPERATOR_MAPPINGS[attribute.operator as keyof typeof OPERATOR_MAPPINGS] || '=='
   const formattedValue = formatValueForCel(attribute.value, attribute.type)
 
@@ -126,11 +145,15 @@ function createSpanNameCondition(spanName: string, operator: string): string {
  * Example output: 'trace.user_defined_attrs.is_critical == true'
  */
 function createSpanUserDefinedAttributeCondition(attribute: {
-  key: string;
-  type: string;
-  value: string | boolean | number;
+  key: string
+  type: string
+  value: string | boolean | number
   operator?: string
-}): string {
+}): string | null {
+  if (attribute.value === '' || attribute.value === undefined || attribute.value === null) {
+    return null
+  }
+
   const operator = OPERATOR_MAPPINGS[attribute.operator as keyof typeof OPERATOR_MAPPINGS] || '=='
   const formattedValue = formatValueForCel(attribute.value, attribute.type)
   const fullKey = `trace.user_defined_attrs.${attribute.key}`
@@ -154,17 +177,20 @@ function buildEventConditionParts(condition: EventCondition): string[] {
     parts.push(createEventTypeCondition(condition.type))
   }
 
-  condition.attrs?.forEach(attr =>
-    parts.push(createEventAttributeCondition(attr, condition.type))
-  )
+  condition.attrs?.forEach(attr => {
+    const expr = createEventAttributeCondition(attr, condition.type)
+    if (expr) parts.push(expr)
+  })
 
-  condition.ud_attrs?.forEach(attr =>
-    parts.push(createUserDefinedEventAttributeCondition(attr))
-  )
+  condition.ud_attrs?.forEach(attr => {
+    const expr = createUserDefinedEventAttributeCondition(attr)
+    if (expr) parts.push(expr)
+  })
 
-  condition.session_attrs?.forEach(attr =>
-    parts.push(createSessionAttributeCondition(attr))
-  )
+  condition.session_attrs?.forEach(attr => {
+    const expr = createSessionAttributeCondition(attr)
+    if (expr) parts.push(expr)
+  })
 
   return parts
 }
@@ -175,7 +201,11 @@ function buildEventConditionParts(condition: EventCondition): string[] {
  * Example output: ['attribute.session_duration > 300', 'attribute.user_country == "US"']
  */
 function buildSessionConditionParts(condition: AttributeCondition): string[] {
-  return condition.attrs?.map(createSessionAttributeCondition) || []
+  return (
+    condition.attrs
+      ?.map(createSessionAttributeCondition)
+      .filter((expr): expr is string => Boolean(expr)) || []
+  )
 }
 
 /**
@@ -190,13 +220,15 @@ function buildTraceConditionParts(condition: TraceCondition): string[] {
     parts.push(createSpanNameCondition(condition.spanName, condition.operator))
   }
 
-  condition.ud_attrs?.forEach(attr =>
-    parts.push(createSpanUserDefinedAttributeCondition(attr))
-  )
+  condition.ud_attrs?.forEach(attr => {
+    const expr = createSpanUserDefinedAttributeCondition(attr)
+    if (expr) parts.push(expr)
+  })
 
-  condition.session_attrs?.forEach(attr =>
-    parts.push(createSessionAttributeCondition(attr))
-  )
+  condition.session_attrs?.forEach(attr => {
+    const expr = createSessionAttributeCondition(attr)
+    if (expr) parts.push(expr)
+  })
 
   return parts
 }
@@ -235,8 +267,6 @@ function combineConditionsWithLogicalOperators(
 
 /**
  * High-level processor for all event conditions.
- * It builds, combines, and links all event conditions into a single CEL string.
- * Example output: '(event_type == "anr" && exception.handled == false) || (event_type == "crash")'
  */
 function processEventConditions(eventConditions: EventConditions | undefined): string | null {
   if (!eventConditions?.conditions?.length) return null
@@ -253,8 +283,6 @@ function processEventConditions(eventConditions: EventConditions | undefined): s
 
 /**
  * High-level processor for all session conditions.
- * It builds, combines, and links all session conditions into a single CEL string.
- * Example output: '(attribute.session_duration > 300) && (attribute.user_country == "US")'
  */
 function processSessionConditions(sessionConditions: SessionConditions | undefined): string | null {
   if (!sessionConditions?.conditions?.length) return null
@@ -271,7 +299,6 @@ function processSessionConditions(sessionConditions: SessionConditions | undefin
 
 /**
  * High-level processor for all trace conditions.
- * Example output: '(span_name.contains("HTTP")) || (trace.user_defined_attrs.is_critical == true)'
  */
 function processTraceConditions(traceConditions: TraceConditions | undefined): string | null {
   if (!traceConditions?.conditions?.length) return null
@@ -288,11 +315,9 @@ function processTraceConditions(traceConditions: TraceConditions | undefined): s
 
 /**
  * Wraps and joins the final event, session, and trace CEL groups with AND (`&&`).
- * Each group is individually wrapped in parentheses.
  */
 function wrapConditionGroups(conditionGroups: string[]): string {
   if (conditionGroups.length === 0) return ''
-
   if (conditionGroups.length === 1) {
     return `(${conditionGroups[0]})`
   }
@@ -303,15 +328,10 @@ function wrapConditionGroups(conditionGroups: string[]): string {
 
 /**
  * Converts a single EventCondition into a CEL expression string.
- * This is a simpler version for when you only have one event condition.
- * Example output: '(event_type == "anr" && exception.handled == false)'
  */
 export function eventConditionToCel(condition: EventCondition): string | null {
   const parts = buildEventConditionParts(condition)
-
-  if (parts.length === 0) {
-    return null
-  }
+  if (parts.length === 0) return null
 
   const combined = combineConditionParts(parts)
   return `(${combined})`
@@ -319,15 +339,10 @@ export function eventConditionToCel(condition: EventCondition): string | null {
 
 /**
  * Converts a single TraceCondition into a CEL expression string.
- * This is a simpler version for when you only have one trace condition.
- * Example output: '(span_name.contains("HTTP") && trace.user_defined_attrs.is_critical == true)'
  */
 export function traceConditionToCel(condition: TraceCondition): string | null {
   const parts = buildTraceConditionParts(condition)
-
-  if (parts.length === 0) {
-    return null
-  }
+  if (parts.length === 0) return null
 
   const combined = combineConditionParts(parts)
   return `(${combined})`
@@ -335,7 +350,6 @@ export function traceConditionToCel(condition: TraceCondition): string | null {
 
 /**
  * Converts a structured `ParsedConditions` object into a final CEL expression string.
- * This is the main entry point for the CEL generation logic.
  */
 export function conditionsToCel(parsedConditions: ParsedConditions): string | null {
   const eventCelExpression = processEventConditions(parsedConditions.event)

From 2899f61b06c57f31bb90995e0a561e5384b6984d Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Mon, 10 Nov 2025 17:54:02 +0530
Subject: [PATCH 65/98] feat(frontend): fix session_attrs deletion bug

---
 .../dashboard/app/components/targeting/event_rule_builder.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/dashboard/app/components/targeting/event_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
index fc17357b1..b174419c4 100644
--- a/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
@@ -494,7 +494,7 @@ export default function EventRuleBuilder({
                                         key={attr.id}
                                         attr={attr}
                                         conditionId={condition.id}
-                                        attrType="attrs"
+                                        attrType="session_attrs"
                                         attrKeys={getCombinedAttrKeys()}
                                         operatorTypesMapping={apiState.config?.operator_types}
                                         getOperatorsForType={getOperatorsForType}

From ab04946662e040a81e60567538169d6ee03de846 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Mon, 10 Nov 2025 18:16:57 +0530
Subject: [PATCH 66/98] feat(frontend): fix initial state parsing

---
 .../targeting/event_rule_builder.tsx          | 95 +++++++++++++++----
 1 file changed, 79 insertions(+), 16 deletions(-)

diff --git a/frontend/dashboard/app/components/targeting/event_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
index b174419c4..1dd934c1b 100644
--- a/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
@@ -43,6 +43,33 @@ interface EventRuleState {
     take_screenshot: boolean
 }
 
+const createEventConditionFromConfig = (eventConfig: EventTargetingConfigResponse['events'][number]): EventCondition => {
+    const attrs = (eventConfig.attrs || []).map((attr) => ({
+        id: `${crypto.randomUUID()}`,
+        key: attr.key,
+        type: attr.type,
+        value: attr.type === 'bool' ? false : attr.type === 'number' ? 0 : '',
+        hint: attr.hint,
+        operator: 'eq',
+    }))
+
+    return {
+        id: `${crypto.randomUUID()}`,
+        type: eventConfig.type,
+        attrs,
+        ud_attrs: [],
+        session_attrs: [],
+    }
+}
+
+const createDefaultEventCondition = (config: EventTargetingConfigResponse): EventCondition => {
+    const firstEventConfig = config.events[0]
+    if (!firstEventConfig) {
+        return { id: crypto.randomUUID(), type: '', attrs: [], ud_attrs: [], session_attrs: [] }
+    }
+    return createEventConditionFromConfig(firstEventConfig)
+}
+
 export default function EventRuleBuilder({
     mode,
     appId,
@@ -66,19 +93,54 @@ export default function EventRuleBuilder({
     const [ruleState, setRuleState] = useState<EventRuleState | null>(null)
     const [initialRuleState, setInitialRuleState] = useState<EventRuleState | null>(null)
 
-
     const convertToEventRuleState = useCallback(
-        (ruleData: EventTargetingRule | null, configData: EventTargetingConfigResponse): EventRuleState => {
+        (ruleData: EventTargetingRule | null, configData: EventTargetingConfigResponse): EventRuleState | null => { // <--- Update return type
             if (ruleData) {
+                // Edit Mode
                 const parsed = celToConditions(ruleData.condition)
-                const eventCondition = parsed.event?.conditions[0] || createDefaultEventCondition(configData)
+                const parsedCondition = parsed.event?.conditions[0]
+
+                // Fallback if parsing fails
+                if (!parsedCondition) {
+                    return null
+                }
+
+                // Find the config for the event type from the parsed condition
+                const eventConfig = configData.events.find(e => e.type === parsedCondition.type)
+
+                // If event type from rule is no longer valid, fallback
+                if (!eventConfig) {
+                    return null
+                }
+
+                // Create the condition for this event type
+                const templateCondition = createEventConditionFromConfig(eventConfig)
+
+                // Merge the parsed data
+                const mergedAttrs = templateCondition.attrs.map(templateAttr => {
+                    const parsedAttr = parsedCondition.attrs.find(pAttr => pAttr.key === templateAttr.key)
+                    if (parsedAttr) {
+                        return { ...templateAttr, id: parsedAttr.id || templateAttr.id, value: parsedAttr.value, operator: parsedAttr.operator }
+                    }
+                    return templateAttr
+                })
+
+                const finalCondition: EventCondition = {
+                    id: parsedCondition.id || templateCondition.id,
+                    type: parsedCondition.type,
+                    attrs: mergedAttrs,
+                    ud_attrs: parsedCondition.ud_attrs,
+                    session_attrs: parsedCondition.session_attrs,
+                }
+
                 return {
-                    condition: eventCondition,
+                    condition: finalCondition,
                     collectionMode: ruleData.collection_mode,
                     sampleRate: ruleData.sampling_rate,
                     take_layout_snapshot: ruleData.take_layout_snapshot,
                     take_screenshot: ruleData.take_screenshot,
                 }
+
             } else {
                 return {
                     condition: createDefaultEventCondition(configData),
@@ -89,20 +151,9 @@ export default function EventRuleBuilder({
                 }
             }
         },
-        []
+        [createEventConditionFromConfig, createDefaultEventCondition] // Add dependencies
     )
 
-    const createDefaultEventCondition = (config: EventTargetingConfigResponse): EventCondition => {
-        const firstEventConfig = config.events[0]
-        return {
-            id: `${crypto.randomUUID()}`,
-            type: firstEventConfig.type,
-            attrs: [],
-            ud_attrs: [],
-            session_attrs: [],
-        }
-    }
-
     const fetchPageData = useCallback(async () => {
         setApiState(prev => ({
             ...prev,
@@ -142,6 +193,18 @@ export default function EventRuleBuilder({
 
             const initial = convertToEventRuleState(ruleData, configResult.data)
 
+            if (!initial) {
+                // Parsing failed, set the rule status to Error
+                setApiState({
+                    ruleStatus: EventTargetingRuleApiStatus.Error,
+                    configStatus: EventTargetingConfigApiStatus.Success,
+                    ruleData: null,
+                    config: configResult.data,
+                })
+                toastNegative("Failed to load rule. Please try again later")
+                return
+            }
+
             setApiState({
                 ruleStatus: ruleApiStatus,
                 configStatus: EventTargetingConfigApiStatus.Success,

From 63e748df7d3c4195f6787b35e8d6deeee285542f Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Tue, 11 Nov 2025 10:52:58 +0530
Subject: [PATCH 67/98] feat(frontend): rewrite

feat(frontend): wip

feat(frontend): wip

feat(frontend): wip

feat(frontend): wip

feat(frontend): cel update

feat(frontend): cel fixed

feat(frontend): fix all

feat(frontend): wip

feat(frontend): wip

feat(frontend): wip

feat(frontend): default 1% sampling for launch events

feat(frontend): add auto created to table
---
 backend/api/measure/app.go                    |   76 +-
 backend/api/measure/targeting_rules.go        |  391 +++--
 docs/hosting/migration-guides/README.md       |    1 +
 .../migration-guides/v0.10.x/README.md        |   64 +
 .../utils/cel/cel_conversion_test.ts          |   74 +-
 .../__tests__/utils/cel/cel_generator_test.ts |  134 +-
 .../__tests__/utils/cel/cel_parser_test.ts    |   53 +-
 .../data/[appId]/event/[ruleId]/edit/page.tsx |    7 +-
 .../data/[appId]/event/create/page.tsx        |    7 +-
 .../[appId]/session/[ruleId]/edit/page.tsx    |   48 +-
 .../data/[appId]/session/create/page.tsx      |   45 +-
 .../data/[appId]/trace/[ruleId]/edit/page.tsx |   12 +-
 .../data/[appId]/trace/create/page.tsx        |   12 +-
 frontend/dashboard/app/[teamId]/data/page.tsx |   24 +-
 frontend/dashboard/app/api/api_calls.ts       |   40 +-
 .../targeting/attribute_builder.tsx           |  145 ++
 .../attribute_key_dropdown_select.tsx         |  112 ++
 .../app/components/targeting/delete_rule.tsx  |   33 -
 .../targeting/edit_default_rule_dialog.tsx    |   10 +-
 .../targeting/event_rule_builder.tsx          |  742 ---------
 .../event_trace_targeting_rules_table.tsx     |  108 --
 .../app/components/targeting/rule_builder.tsx | 1442 +++++++++++++++++
 .../targeting/rule_builder_attribute_row.tsx  |  176 --
 .../app/components/targeting/rules_table.tsx  |  170 ++
 .../targeting/sampling_rate_input.tsx         |    7 +-
 .../session_targeting_rules_table.tsx         |   67 -
 .../targeting/trace_rule_builder.tsx          |  689 --------
 .../dashboard/app/utils/cel/cel_generator.ts  |   40 +-
 .../dashboard/app/utils/cel/cel_parser.ts     |  126 +-
 .../dashboard/app/utils/cel/conditions.ts     |   26 +-
 .../v0.10.x-add-default-targeting-rules.sh    |  193 +++
 ...347_create_event_targeting_rules_table.sql |   12 +-
 ...408_create_trace_targeting_rules_table.sql |   14 +-
 ...3_create_session_targeting_rules_table.sql |   10 +-
 34 files changed, 2728 insertions(+), 2382 deletions(-)
 create mode 100644 docs/hosting/migration-guides/v0.10.x/README.md
 create mode 100644 frontend/dashboard/app/components/targeting/attribute_builder.tsx
 create mode 100644 frontend/dashboard/app/components/targeting/attribute_key_dropdown_select.tsx
 delete mode 100644 frontend/dashboard/app/components/targeting/delete_rule.tsx
 delete mode 100644 frontend/dashboard/app/components/targeting/event_rule_builder.tsx
 delete mode 100644 frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx
 create mode 100644 frontend/dashboard/app/components/targeting/rule_builder.tsx
 delete mode 100644 frontend/dashboard/app/components/targeting/rule_builder_attribute_row.tsx
 create mode 100644 frontend/dashboard/app/components/targeting/rules_table.tsx
 delete mode 100644 frontend/dashboard/app/components/targeting/session_targeting_rules_table.tsx
 delete mode 100644 frontend/dashboard/app/components/targeting/trace_rule_builder.tsx
 create mode 100755 self-host/migrations/v0.10.x-add-default-targeting-rules.sh

diff --git a/backend/api/measure/app.go b/backend/api/measure/app.go
index 61b4f64a0..cd94d5739 100644
--- a/backend/api/measure/app.go
+++ b/backend/api/measure/app.go
@@ -1115,18 +1115,11 @@ func (a App) getJourneyEvents(ctx context.Context, af *filter.AppFilter, opts fi
 	return
 }
 
-func (a *App) add() (*APIKey, error) {
+func (a *App) add(tx pgx.Tx) (*APIKey, error) {
 	id := uuid.New()
 	a.ID = &id
-	tx, err := server.Server.PgPool.Begin(context.Background())
-
-	if err != nil {
-		return nil, err
-	}
-
-	defer tx.Rollback(context.Background())
 
-	_, err = tx.Exec(context.Background(), "insert into apps(id, team_id, app_name, created_at, updated_at) values ($1, $2, $3, $4, $5);", a.ID, a.TeamId, a.AppName, a.CreatedAt, a.UpdatedAt)
+	_, err := tx.Exec(context.Background(), "insert into apps(id, team_id, app_name, created_at, updated_at) values ($1, $2, $3, $4, $5);", a.ID, a.TeamId, a.AppName, a.CreatedAt, a.UpdatedAt)
 
 	if err != nil {
 		return nil, err
@@ -1142,10 +1135,6 @@ func (a *App) add() (*APIKey, error) {
 		return nil, err
 	}
 
-	if err := tx.Commit(context.Background()); err != nil {
-		return nil, err
-	}
-
 	return apiKey, nil
 }
 
@@ -4612,24 +4601,38 @@ func CreateApp(c *gin.Context) {
 		return
 	}
 
-	apiKey, err := app.add()
+	tx, err := server.Server.PgPool.Begin(context.Background())
+	if err != nil {
+		msg := `failed to start transaction`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+	defer tx.Rollback(context.Background()) // Rollback if not committed
 
+	apiKey, err := app.add(tx)
 	if err != nil {
 		msg := "failed to create app"
 		fmt.Println(msg, err)
 		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
 		return
 	}
-
 	app.APIKey = apiKey
 
-	// create default targeting rules
-	// ignore errors as app has already
-	// been created
-	err = CreateDefaultTargetingRules(c, teamId.String(), app.ID.String(), userId)
+	err = CreateDefaultTargetingRules(c, tx, teamId.String(), app.ID.String(), userId)
+	if err != nil {
+		msg := "failed to create default targeting rules for app"
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	err = tx.Commit(context.Background())
 	if err != nil {
-		msg := "failed to create session targeting rules for app"
+		msg := "failed to commit transaction"
 		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
 	}
 
 	c.JSON(http.StatusCreated, app)
@@ -7196,6 +7199,39 @@ func GetSessionTargetingRuleConfig(c *gin.Context) {
 		return
 	}
 
+	// Safely get OS name for the app
+	// set to opsys.Unknown if unavailable
+	stmt := sqlf.PostgreSQL.From("apps").
+		Select("os_name").
+		Where("id = ?", app.ID)
+
+	defer stmt.Close()
+
+	var osName *string
+	err = server.Server.PgPool.QueryRow(ctx, stmt.String(), stmt.Args()...).Scan(&osName)
+	if err != nil {
+		msg := `failed to fetch app details`
+		fmt.Println(msg, err)
+		status := http.StatusInternalServerError
+
+		if errors.Is(err, pgx.ErrNoRows) {
+			status = http.StatusNotFound
+			msg = fmt.Sprintf(`app with id %q does not exist`, app.ID)
+		}
+
+		c.JSON(status, gin.H{
+			"error": msg,
+		})
+
+		return
+	}
+
+	if osName != nil {
+		app.OSName = *osName
+	} else {
+		app.OSName = opsys.Unknown
+	}
+
 	config, err := GetSessionTargetingConfig(ctx, id, app.OSName)
 	if err != nil {
 		msg := "failed to get session targeting rule config"
diff --git a/backend/api/measure/targeting_rules.go b/backend/api/measure/targeting_rules.go
index 58f2ec36f..b3654d41c 100644
--- a/backend/api/measure/targeting_rules.go
+++ b/backend/api/measure/targeting_rules.go
@@ -11,58 +11,65 @@ import (
 	"time"
 
 	"github.com/google/uuid"
+	"github.com/jackc/pgx/v5"
 	"github.com/leporo/sqlf"
 )
 
 // Represents a event targting rule.
 type EventTargetingRule struct {
-	Id                 uuid.UUID `json:"id"`
-	TeamId             uuid.UUID `json:"team_id"`
-	AppId              uuid.UUID `json:"app_id"`
-	Condition          string    `json:"condition"`
-	CollectionMode     string    `json:"collection_mode"`
-	TakeScreenshot     bool      `json:"take_screenshot"`
-	TakeLayoutSnapshot bool      `json:"take_layout_snapshot"`
-	SamplingRate       float32   `json:"sampling_rate"`
-	IsDefaultRule      bool      `json:"is_default_rule"`
-	CreatedAt          time.Time `json:"created_at"`
-	CreatedBy          uuid.UUID `json:"-"`
-	CreatedByEmail     string    `json:"created_by"`
-	UpdatedAt          time.Time `json:"updated_at"`
-	UpdatedBy          uuid.UUID `json:"-"`
-	UpdatedByEmail     string    `json:"updated_by"`
+	Id                 uuid.UUID  `json:"id"`
+	TeamId             uuid.UUID  `json:"team_id"`
+	AppId              uuid.UUID  `json:"app_id"`
+	Name               string     `json:"name"`
+	Condition          string     `json:"condition"`
+	CollectionMode     string     `json:"collection_mode"`
+	TakeScreenshot     bool       `json:"take_screenshot"`
+	TakeLayoutSnapshot bool       `json:"take_layout_snapshot"`
+	SamplingRate       float32    `json:"sampling_rate"`
+	IsDefaultBehaviour bool       `json:"is_default_behaviour"`
+	CreatedAt          time.Time  `json:"created_at"`
+	CreatedBy          uuid.UUID  `json:"-"`
+	CreatedByEmail     string     `json:"created_by"`
+	UpdatedAt          *time.Time `json:"updated_at"`
+	UpdatedBy          uuid.UUID  `json:"-"`
+	UpdatedByEmail     string     `json:"updated_by"`
+	AutoCreated        bool       `json:"auto_created"`
 }
 
 // Represents a trace targting rule.
 type TraceTargetingRule struct {
-	Id             uuid.UUID `json:"id"`
-	TeamId         uuid.UUID `json:"team_id"`
-	AppId          uuid.UUID `json:"app_id"`
-	Condition      string    `json:"condition"`
-	CollectionMode string    `json:"collection_mode"`
-	SamplingRate   float32   `json:"sampling_rate"`
-	IsDefaultRule  bool      `json:"is_default_rule"`
-	CreatedAt      time.Time `json:"created_at"`
-	CreatedBy      uuid.UUID `json:"-"`
-	CreatedByEmail string    `json:"created_by"`
-	UpdatedAt      time.Time `json:"updated_at"`
-	UpdatedBy      uuid.UUID `json:"-"`
-	UpdatedByEmail string    `json:"updated_by"`
+	Id                 uuid.UUID  `json:"id"`
+	TeamId             uuid.UUID  `json:"team_id"`
+	AppId              uuid.UUID  `json:"app_id"`
+	Name               string     `json:"name"`
+	Condition          string     `json:"condition"`
+	CollectionMode     string     `json:"collection_mode"`
+	SamplingRate       float32    `json:"sampling_rate"`
+	IsDefaultBehaviour bool       `json:"is_default_behaviour"`
+	CreatedAt          time.Time  `json:"created_at"`
+	CreatedBy          uuid.UUID  `json:"-"`
+	CreatedByEmail     string     `json:"created_by"`
+	UpdatedAt          *time.Time `json:"updated_at"`
+	UpdatedBy          uuid.UUID  `json:"-"`
+	UpdatedByEmail     string     `json:"updated_by"`
+	AutoCreated        bool       `json:"auto_created"`
 }
 
 // Represents a session targting rule.
 type SessionTargetingRule struct {
-	Id             uuid.UUID `json:"id"`
-	TeamId         uuid.UUID `json:"team_id"`
-	AppId          uuid.UUID `json:"app_id"`
-	SamplingRate   float32   `json:"sampling_rate"`
-	Condition      string    `json:"condition"`
-	CreatedAt      time.Time `json:"created_at"`
-	CreatedBy      uuid.UUID `json:"-"`
-	CreatedByEmail string    `json:"created_by"`
-	UpdatedAt      time.Time `json:"updated_at"`
-	UpdatedBy      uuid.UUID `json:"-"`
-	UpdatedByEmail string    `json:"updated_by"`
+	Id             uuid.UUID  `json:"id"`
+	TeamId         uuid.UUID  `json:"team_id"`
+	AppId          uuid.UUID  `json:"app_id"`
+	Name           string     `json:"name"`
+	SamplingRate   float32    `json:"sampling_rate"`
+	Condition      string     `json:"condition"`
+	CreatedAt      time.Time  `json:"created_at"`
+	CreatedBy      uuid.UUID  `json:"-"`
+	CreatedByEmail string     `json:"created_by"`
+	UpdatedAt      *time.Time `json:"updated_at"`
+	UpdatedBy      uuid.UUID  `json:"-"`
+	UpdatedByEmail string     `json:"updated_by"`
+	AutoCreated    bool       `json:"auto_created"`
 }
 
 type EventTargetingRulesResponse struct {
@@ -138,22 +145,25 @@ type SessionTargetingConfig struct {
 }
 
 type EventTargetingRulePayload struct {
+	Name               string  `json:"name"`
 	Condition          string  `json:"condition"`
 	CollectionMode     string  `json:"collection_mode"`
 	TakeScreenshot     bool    `json:"take_screenshot"`
 	TakeLayoutSnapshot bool    `json:"take_layout_snapshot"`
 	SamplingRate       float32 `json:"sampling_rate"`
-	IsDefaultRule      bool    `json:"is_default_rule"`
+	IsDefaultBehaviour bool    `json:"is_default_behaviour"`
 }
 
 type TraceTargetingRulePayload struct {
-	Condition      string  `json:"condition"`
-	CollectionMode string  `json:"collection_mode"`
-	SamplingRate   float32 `json:"sampling_rate"`
-	IsDefaultRule  bool    `json:"is_default_rule"`
+	Name               string  `json:"name"`
+	Condition          string  `json:"condition"`
+	CollectionMode     string  `json:"collection_mode"`
+	SamplingRate       float32 `json:"sampling_rate"`
+	IsDefaultBehaviour bool    `json:"is_default_behaviour"`
 }
 
 type SessionTargetingRulePayload struct {
+	Name         string  `json:"name"`
 	Condition    string  `json:"condition"`
 	SamplingRate float32 `json:"sampling_rate"`
 }
@@ -165,16 +175,18 @@ func GetEventTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter,
 		Select("id").
 		Select("team_id").
 		Select("app_id").
+		Select("name").
 		Select("condition").
 		Select("collection_mode").
 		Select("take_screenshot").
 		Select("take_layout_snapshot").
 		Select("sampling_rate").
-		Select("is_default_rule").
+		Select("is_default_behaviour").
 		Select("created_at").
 		Select("created_by").
 		Select("updated_at").
 		Select("updated_by").
+		Select("auto_created").
 		Where("app_id = ?", af.AppID)
 
 	stmt.OrderBy("updated_at DESC")
@@ -194,16 +206,18 @@ func GetEventTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter,
 			&rule.Id,
 			&rule.TeamId,
 			&rule.AppId,
+			&rule.Name,
 			&rule.Condition,
 			&rule.CollectionMode,
 			&rule.TakeScreenshot,
 			&rule.TakeLayoutSnapshot,
 			&rule.SamplingRate,
-			&rule.IsDefaultRule,
+			&rule.IsDefaultBehaviour,
 			&rule.CreatedAt,
 			&rule.CreatedBy,
 			&rule.UpdatedAt,
 			&rule.UpdatedBy,
+			&rule.AutoCreated,
 		); err != nil {
 			return response, err
 		}
@@ -215,11 +229,11 @@ func GetEventTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter,
 		return response, err
 	}
 
-	// Separate default rule from regular rules
+	// Separate default rule from override rules
 	var rules []EventTargetingRule
 	var defaultRule EventTargetingRule
 	for _, rule := range allRules {
-		if rule.IsDefaultRule {
+		if rule.IsDefaultBehaviour {
 			defaultRule = rule
 		} else {
 			rules = append(rules, rule)
@@ -239,14 +253,16 @@ func GetTraceTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter,
 		Select("id").
 		Select("team_id").
 		Select("app_id").
+		Select("name").
 		Select("condition").
 		Select("collection_mode").
 		Select("sampling_rate").
-		Select("is_default_rule").
+		Select("is_default_behaviour").
 		Select("created_at").
 		Select("created_by").
 		Select("updated_at").
 		Select("updated_by").
+		Select("auto_created").
 		Where("app_id = ?", af.AppID)
 
 	stmt.OrderBy("updated_at DESC")
@@ -266,14 +282,16 @@ func GetTraceTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter,
 			&rule.Id,
 			&rule.TeamId,
 			&rule.AppId,
+			&rule.Name,
 			&rule.Condition,
 			&rule.CollectionMode,
 			&rule.SamplingRate,
-			&rule.IsDefaultRule,
+			&rule.IsDefaultBehaviour,
 			&rule.CreatedAt,
 			&rule.CreatedBy,
 			&rule.UpdatedAt,
 			&rule.UpdatedBy,
+			&rule.AutoCreated,
 		); err != nil {
 			return response, err
 		}
@@ -285,11 +303,11 @@ func GetTraceTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter,
 		return response, err
 	}
 
-	// Separate default rule from regular rules
+	// Separate default rule from override rules
 	var rules []TraceTargetingRule
 	var defaultRule TraceTargetingRule
 	for _, rule := range allRules {
-		if rule.IsDefaultRule {
+		if rule.IsDefaultBehaviour {
 			defaultRule = rule
 		} else {
 			rules = append(rules, rule)
@@ -309,12 +327,14 @@ func GetSessionTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilte
 		Select("id").
 		Select("team_id").
 		Select("app_id").
+		Select("name").
 		Select("sampling_rate").
 		Select("condition").
 		Select("created_at").
 		Select("created_by").
 		Select("updated_at").
 		Select("updated_by").
+		Select("auto_created").
 		Where("app_id = ?", af.AppID)
 
 	stmt.OrderBy("updated_at DESC")
@@ -333,12 +353,14 @@ func GetSessionTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilte
 			&rule.Id,
 			&rule.TeamId,
 			&rule.AppId,
+			&rule.Name,
 			&rule.SamplingRate,
 			&rule.Condition,
 			&rule.CreatedAt,
 			&rule.CreatedBy,
 			&rule.UpdatedAt,
 			&rule.UpdatedBy,
+			&rule.AutoCreated,
 		); err != nil {
 			return nil, err
 		}
@@ -365,16 +387,18 @@ func GetEventTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId str
 		Select("id").
 		Select("team_id").
 		Select("app_id").
+		Select("name").
 		Select("condition").
 		Select("collection_mode").
 		Select("take_screenshot").
 		Select("take_layout_snapshot").
 		Select("sampling_rate").
-		Select("is_default_rule").
+		Select("is_default_behaviour").
 		Select("created_at").
 		Select("created_by").
 		Select("updated_at").
 		Select("updated_by").
+		Select("auto_created").
 		Where("app_id = ?", appId).
 		Where("id = ?", ruleUUID)
 
@@ -387,16 +411,18 @@ func GetEventTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId str
 		&r.Id,
 		&r.TeamId,
 		&r.AppId,
+		&r.Name,
 		&r.Condition,
 		&r.CollectionMode,
 		&r.TakeScreenshot,
 		&r.TakeLayoutSnapshot,
 		&r.SamplingRate,
-		&r.IsDefaultRule,
+		&r.IsDefaultBehaviour,
 		&r.CreatedAt,
 		&r.CreatedBy,
 		&r.UpdatedAt,
 		&r.UpdatedBy,
+		&r.AutoCreated,
 	); err != nil {
 		return nil, err
 	}
@@ -422,14 +448,16 @@ func GetTraceTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId str
 		Select("id").
 		Select("team_id").
 		Select("app_id").
+		Select("name").
 		Select("condition").
 		Select("collection_mode").
 		Select("sampling_rate").
-		Select("is_default_rule").
+		Select("is_default_behaviour").
 		Select("created_at").
 		Select("created_by").
 		Select("updated_at").
 		Select("updated_by").
+		Select("auto_created").
 		Where("app_id = ?", appId).
 		Where("id = ?", ruleUUID)
 
@@ -442,14 +470,16 @@ func GetTraceTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId str
 		&r.Id,
 		&r.TeamId,
 		&r.AppId,
+		&r.Name,
 		&r.Condition,
 		&r.CollectionMode,
 		&r.SamplingRate,
-		&r.IsDefaultRule,
+		&r.IsDefaultBehaviour,
 		&r.CreatedAt,
 		&r.CreatedBy,
 		&r.UpdatedAt,
 		&r.UpdatedBy,
+		&r.AutoCreated,
 	); err != nil {
 		return nil, err
 	}
@@ -475,12 +505,14 @@ func GetSessionTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId s
 		Select("id").
 		Select("team_id").
 		Select("app_id").
+		Select("name").
 		Select("condition").
 		Select("sampling_rate").
 		Select("created_at").
 		Select("created_by").
 		Select("updated_at").
 		Select("updated_by").
+		Select("auto_created").
 		Where("app_id = ?", appId).
 		Where("id = ?", ruleUUID)
 
@@ -493,12 +525,14 @@ func GetSessionTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId s
 		&r.Id,
 		&r.TeamId,
 		&r.AppId,
+		&r.Name,
 		&r.Condition,
 		&r.SamplingRate,
 		&r.CreatedAt,
 		&r.CreatedBy,
 		&r.UpdatedAt,
 		&r.UpdatedBy,
+		&r.AutoCreated,
 	); err != nil {
 		return nil, err
 	}
@@ -614,7 +648,7 @@ func CreateEventTargetingRuleForApp(ctx context.Context, appId uuid.UUID, teamId
 		return uuid.Nil, fmt.Errorf("condition cannot be empty")
 	}
 
-	if payload.CollectionMode != "session_timeline" && payload.CollectionMode != "disabled" && payload.CollectionMode != "sampled" {
+	if payload.CollectionMode != "timeline" && payload.CollectionMode != "disabled" && payload.CollectionMode != "sampled" {
 		return uuid.Nil, fmt.Errorf("invalid collection mode: %s", payload.CollectionMode)
 	}
 
@@ -628,7 +662,7 @@ func CreateEventTargetingRuleForApp(ctx context.Context, appId uuid.UUID, teamId
 		return uuid.Nil, fmt.Errorf("only one of take_screenshot and take_layout_snapshot can be true")
 	}
 
-	if payload.IsDefaultRule {
+	if payload.IsDefaultBehaviour {
 		if payload.TakeScreenshot {
 			return uuid.Nil, fmt.Errorf("take_screenshot must be false for default rule")
 		}
@@ -642,6 +676,7 @@ func CreateEventTargetingRuleForApp(ctx context.Context, appId uuid.UUID, teamId
 		Set("id", ruleId).
 		Set("team_id", teamId).
 		Set("app_id", appId).
+		Set("name", payload.Name).
 		Set("condition", payload.Condition).
 		Set("collection_mode", payload.CollectionMode).
 		Set("take_screenshot", payload.TakeScreenshot).
@@ -649,9 +684,7 @@ func CreateEventTargetingRuleForApp(ctx context.Context, appId uuid.UUID, teamId
 		Set("sampling_rate", payload.SamplingRate).
 		Set("created_at", now).
 		Set("created_by", createdByUUID).
-		Set("updated_at", now).
-		Set("updated_by", createdByUUID)
-
+		Set("auto_created", false)
 	defer stmt.Close()
 
 	_, err = server.Server.PgPool.Exec(ctx, stmt.String(), stmt.Args()...)
@@ -677,6 +710,7 @@ func UpdateEventTargetingRuleForApp(ctx context.Context, appId uuid.UUID, ruleId
 	}
 
 	stmt := sqlf.PostgreSQL.Update("event_targeting_rules").
+		Set("name", payload.Name).
 		Set("condition", payload.Condition).
 		Set("collection_mode", payload.CollectionMode).
 		Set("take_screenshot", payload.TakeScreenshot).
@@ -722,7 +756,7 @@ func CreateTraceTargetingRuleForApp(ctx context.Context, appId uuid.UUID, teamId
 		return uuid.Nil, fmt.Errorf("condition cannot be empty")
 	}
 
-	if payload.CollectionMode != "session_timeline" && payload.CollectionMode != "disabled" && payload.CollectionMode != "sampled" {
+	if payload.CollectionMode != "timeline" && payload.CollectionMode != "disabled" && payload.CollectionMode != "sampled" {
 		return uuid.Nil, fmt.Errorf("invalid collection mode: %s", payload.CollectionMode)
 	}
 
@@ -736,13 +770,13 @@ func CreateTraceTargetingRuleForApp(ctx context.Context, appId uuid.UUID, teamId
 		Set("id", ruleId).
 		Set("team_id", teamId).
 		Set("app_id", appId).
+		Set("name", payload.Name).
 		Set("condition", payload.Condition).
 		Set("collection_mode", payload.CollectionMode).
 		Set("sampling_rate", payload.SamplingRate).
 		Set("created_at", now).
 		Set("created_by", createdByUUID).
-		Set("updated_at", now).
-		Set("updated_by", createdByUUID)
+		Set("auto_created", false)
 	defer stmt.Close()
 	_, err = server.Server.PgPool.Exec(ctx, stmt.String(), stmt.Args()...)
 	if err != nil {
@@ -767,6 +801,7 @@ func UpdateTraceTargetingRuleForApp(ctx context.Context, appId uuid.UUID, ruleId
 	}
 
 	stmt := sqlf.PostgreSQL.Update("trace_targeting_rules").
+		Set("name", payload.Name).
 		Set("condition", payload.Condition).
 		Set("collection_mode", payload.CollectionMode).
 		Set("sampling_rate", payload.SamplingRate).
@@ -814,12 +849,12 @@ func CreateSessionTargetingRuleForApp(ctx context.Context, appId uuid.UUID, team
 		Set("id", ruleId).
 		Set("team_id", teamId).
 		Set("app_id", appId).
+		Set("name", payload.Name).
 		Set("condition", payload.Condition).
 		Set("sampling_rate", payload.SamplingRate).
 		Set("created_at", now).
 		Set("created_by", createdByUUID).
-		Set("updated_at", now).
-		Set("updated_by", createdByUUID)
+		Set("auto_created", false)
 	defer stmt.Close()
 	_, err = server.Server.PgPool.Exec(ctx, stmt.String(), stmt.Args()...)
 	if err != nil {
@@ -840,6 +875,7 @@ func UpdateSessionTargetingRuleForApp(ctx context.Context, appId uuid.UUID, rule
 	}
 
 	stmt := sqlf.PostgreSQL.Update("session_targeting_rules").
+		Set("name", payload.Name).
 		Set("condition", payload.Condition).
 		Set("sampling_rate", payload.SamplingRate).
 		Set("updated_at", time.Now()).
@@ -921,15 +957,15 @@ func DeleteSessionTargetingRuleForApp(ctx context.Context, appId uuid.UUID, rule
 	return nil
 }
 
-func CreateDefaultTargetingRules(ctx context.Context, teamId string, appId string, createdBy string) error {
+func CreateDefaultTargetingRules(ctx context.Context, tx pgx.Tx, teamId string, appId string, createdBy string) error {
 	teamUUID, err := uuid.Parse(teamId)
 	if err != nil {
-		return fmt.Errorf("invalid teamId: %w", err)
+		return fmt.Errorf("invalid teamId")
 	}
 
 	appUUID, err := uuid.Parse(appId)
 	if err != nil {
-		return fmt.Errorf("invalid appId: %w", err)
+		return fmt.Errorf("invalid appId")
 	}
 
 	createdByUUID, err := uuid.Parse(createdBy)
@@ -939,66 +975,169 @@ func CreateDefaultTargetingRules(ctx context.Context, teamId string, appId strin
 
 	now := time.Now()
 
-	// Create default event targeting rule
-	eventRuleId := uuid.New()
-	eventPayload := EventTargetingRulePayload{
-		Condition:          "event_type == \"*\"",
-		CollectionMode:     "timeline",
-		TakeScreenshot:     false,
-		TakeLayoutSnapshot: false,
-		SamplingRate:       0,
-		IsDefaultRule:      true,
+	// Insert all event targeting rules in one query
+	eventRules := []EventTargetingRulePayload{
+		{
+			Name:               "Collect all events",
+			Condition:          "event_type == \"*\"",
+			CollectionMode:     "timeline",
+			TakeScreenshot:     false,
+			TakeLayoutSnapshot: false,
+			SamplingRate:       0,
+			IsDefaultBehaviour: true,
+		},
+		{
+			Name:               "Collect all crashes",
+			Condition:          "(event_type==\"exception\" && exception.handled==false)",
+			CollectionMode:     "sampled",
+			TakeScreenshot:     true,
+			TakeLayoutSnapshot: false,
+			SamplingRate:       100,
+			IsDefaultBehaviour: false,
+		},
+		{
+			Name:               "Collect all ANRs",
+			Condition:          "(event_type==\"anr\")",
+			CollectionMode:     "sampled",
+			TakeScreenshot:     true,
+			TakeLayoutSnapshot: false,
+			SamplingRate:       100,
+			IsDefaultBehaviour: false,
+		},
+		{
+			Name:               "Collect all bug reports",
+			Condition:          "(event_type==\"bug_report\")",
+			CollectionMode:     "sampled",
+			TakeScreenshot:     false,
+			TakeLayoutSnapshot: false,
+			SamplingRate:       100,
+			IsDefaultBehaviour: false,
+		},
+		{
+			Name:               "Collect sampled cold launch events",
+			Condition:          "(event_type==\"cold_launch\")",
+			CollectionMode:     "sampled",
+			TakeScreenshot:     false,
+			TakeLayoutSnapshot: false,
+			SamplingRate:       1,
+			IsDefaultBehaviour: false,
+		},
+		{
+			Name:               "Collect sampled hot launch events",
+			Condition:          "(event_type==\"hot_launch\")",
+			CollectionMode:     "sampled",
+			TakeScreenshot:     false,
+			TakeLayoutSnapshot: false,
+			SamplingRate:       1,
+			IsDefaultBehaviour: false,
+		},
+		{
+			Name:               "Collect sampled warm launch events",
+			Condition:          "(event_type==\"warm_launch\")",
+			CollectionMode:     "sampled",
+			TakeScreenshot:     false,
+			TakeLayoutSnapshot: false,
+			SamplingRate:       1,
+			IsDefaultBehaviour: false,
+		},
+		{
+			Name:               "Collect layout snapshots with clicks",
+			Condition:          "(event_type==\"gesture_click\")",
+			CollectionMode:     "timeline",
+			TakeScreenshot:     false,
+			TakeLayoutSnapshot: true,
+			SamplingRate:       0,
+			IsDefaultBehaviour: false,
+		},
 	}
 
-	eventStmt := sqlf.PostgreSQL.InsertInto("event_targeting_rules").
-		Set("id", eventRuleId).
-		Set("team_id", teamUUID).
-		Set("app_id", appUUID).
-		Set("condition", eventPayload.Condition).
-		Set("collection_mode", eventPayload.CollectionMode).
-		Set("take_screenshot", eventPayload.TakeScreenshot).
-		Set("take_layout_snapshot", eventPayload.TakeLayoutSnapshot).
-		Set("sampling_rate", eventPayload.SamplingRate).
-		Set("is_default_rule", eventPayload.IsDefaultRule).
-		Set("created_at", now).
-		Set("created_by", createdByUUID).
-		Set("updated_at", now).
-		Set("updated_by", createdByUUID)
-
+	eventStmt := sqlf.PostgreSQL.InsertInto("event_targeting_rules")
+	for _, payload := range eventRules {
+		eventStmt.NewRow().
+			Set("id", uuid.New()).
+			Set("team_id", teamUUID).
+			Set("app_id", appUUID).
+			Set("name", payload.Name).
+			Set("condition", payload.Condition).
+			Set("collection_mode", payload.CollectionMode).
+			Set("take_screenshot", payload.TakeScreenshot).
+			Set("take_layout_snapshot", payload.TakeLayoutSnapshot).
+			Set("sampling_rate", payload.SamplingRate).
+			Set("is_default_behaviour", payload.IsDefaultBehaviour).
+			Set("created_at", now).
+			Set("created_by", createdByUUID).
+			Set("updated_at", now).
+			Set("updated_by", createdByUUID).
+			Set("auto_created", true)
+	}
 	defer eventStmt.Close()
 
-	_, err = server.Server.PgPool.Exec(ctx, eventStmt.String(), eventStmt.Args()...)
+	_, err = tx.Exec(context.Background(), eventStmt.String(), eventStmt.Args()...)
 	if err != nil {
-		return fmt.Errorf("failed to create default event targeting rule: %w", err)
+		return fmt.Errorf("failed to create event targeting rules: %w", err)
 	}
 
-	// Create default trace targeting rule
-	traceRuleId := uuid.New()
-	tracePayload := TraceTargetingRulePayload{
-		Condition:      "span.name == \"*\"",
-		CollectionMode: "timeline",
-		SamplingRate:   0,
-		IsDefaultRule:  true,
+	// Insert all session targeting rules in one query
+	sessionRules := []SessionTargetingRulePayload{
+		{
+			Name:         "Sessions with a Crash",
+			Condition:    "(event_type==\"exception\" && exception.handled==false)",
+			SamplingRate: 100,
+		},
+		{
+			Name:         "Sessions with an ANR",
+			Condition:    "(event_type==\"anr\")",
+			SamplingRate: 100,
+		},
+		{
+			Name:         "Sessions with a Bug Report",
+			Condition:    "(event_type==\"bug_report\")",
+			SamplingRate: 100,
+		},
 	}
 
+	sessionStmt := sqlf.PostgreSQL.InsertInto("session_targeting_rules")
+	for _, payload := range sessionRules {
+		sessionStmt.NewRow().
+			Set("id", uuid.New()).
+			Set("team_id", teamUUID).
+			Set("app_id", appUUID).
+			Set("name", payload.Name).
+			Set("condition", payload.Condition).
+			Set("sampling_rate", payload.SamplingRate).
+			Set("created_at", now).
+			Set("created_by", createdByUUID).
+			Set("updated_at", now).
+			Set("updated_by", createdByUUID).
+			Set("auto_created", true)
+	}
+	defer sessionStmt.Close()
+
+	_, err = tx.Exec(context.Background(), sessionStmt.String(), sessionStmt.Args()...)
+	if err != nil {
+		return fmt.Errorf("failed to create session targeting rules: %w", err)
+	}
+
+	// Insert trace targeting rule
 	traceStmt := sqlf.PostgreSQL.InsertInto("trace_targeting_rules").
-		Set("id", traceRuleId).
+		Set("id", uuid.New()).
 		Set("team_id", teamUUID).
 		Set("app_id", appUUID).
-		Set("condition", tracePayload.Condition).
-		Set("collection_mode", tracePayload.CollectionMode).
-		Set("sampling_rate", tracePayload.SamplingRate).
-		Set("is_default_rule", tracePayload.IsDefaultRule).
+		Set("name", "Collect all traces at 0.1 percent sampling rate").
+		Set("condition", "span.name == \"*\"").
+		Set("collection_mode", "sampled").
+		Set("sampling_rate", 0.1).
+		Set("is_default_behaviour", true).
 		Set("created_at", now).
 		Set("created_by", createdByUUID).
 		Set("updated_at", now).
-		Set("updated_by", createdByUUID)
-
+		Set("updated_by", createdByUUID).
+		Set("auto_created", true)
 	defer traceStmt.Close()
 
-	_, err = server.Server.PgPool.Exec(ctx, traceStmt.String(), traceStmt.Args()...)
+	_, err = tx.Exec(context.Background(), traceStmt.String(), traceStmt.Args()...)
 	if err != nil {
-		return fmt.Errorf("failed to create default trace targeting rule: %w", err)
+		return fmt.Errorf("failed to create trace targeting rule: %w", err)
 	}
 
 	return nil
@@ -1113,6 +1252,14 @@ func newEventsConfig(osName string) []EventConfig {
 				{Key: "status_code", Type: "int64", Hint: "Enter HTTP status code 500, 200, etc."},
 			},
 		},
+		{
+			Type:       "gesture_click",
+			HasUdAttrs: false,
+			Attrs: []AttrConfig{
+				{Key: "target", Type: "string", Hint: "Enter a class name like UIButtonLabel"},
+				{Key: "target_id", Type: "string", Hint: "Enter a view identifier"},
+			},
+		},
 	}
 
 	// Define platform-specific events
@@ -1183,24 +1330,21 @@ func newSessionConfig(osName string) []AttrConfig {
 			{Key: "app_build", Type: "string", Hint: "Enter your app's build number"},
 			{Key: "app_version", Type: "string", Hint: "Enter your app's version"},
 			{Key: "device_is_foldable", Type: "bool"},
-			{Key: "device_is_physical", Type: "bool"},
 			{Key: "device_locale", Type: "string", Hint: "Enter a locale like en_US, fr_FR"},
 			{Key: "device_low_power_mode", Type: "bool"},
-			{Key: "device_manufacturer", Type: "string", Hint: "E.g. Apple, Samsung, Google"},
+			{Key: "device_manufacturer", Type: "string", Hint: "E.g. Samsung, Google"},
 			{Key: "device_model", Type: "string", Hint: "E.g. Redmi Go, Pixel 4a "},
-			{Key: "device_name", Type: "string", Hint: "E.g. sunfish, tiare"},
 			{Key: "device_thermal_throttling_enabled", Type: "bool"},
 			{Key: "device_type", Type: "string", Hint: "E.g. phone or tablet"},
 			{Key: "installation_id", Type: "string", Hint: "Enter an installation ID"},
-			{Key: "user_id", Type: "string", Hint: "Enter a user ID"},
 			{Key: "os_version", Type: "string", Hint: "Enter API level like 21, 36"},
+			{Key: "user_id", Type: "string", Hint: "Enter a user ID"},
 		}
 	case opsys.AppleFamily:
 		return []AttrConfig{
 			{Key: "app_build", Type: "string", Hint: "Enter your app's build ID"},
 			{Key: "app_version", Type: "string", Hint: "Enter your app's version"},
 			{Key: "device_is_foldable", Type: "bool"},
-			{Key: "device_is_physical", Type: "bool"},
 			{Key: "device_locale", Type: "string", Hint: "Enter a locale like en_US, fr_FR"},
 			{Key: "device_low_power_mode", Type: "bool"},
 			{Key: "device_model", Type: "string", Hint: "E.g. iPhone 17"},
@@ -1211,7 +1355,20 @@ func newSessionConfig(osName string) []AttrConfig {
 			{Key: "user_id", Type: "string", Hint: "Enter a user ID"},
 		}
 	default:
-		return []AttrConfig{}
+		return []AttrConfig{
+			{Key: "app_build", Type: "string", Hint: "Enter your app's build number"},
+			{Key: "app_version", Type: "string", Hint: "Enter your app's version"},
+			{Key: "device_is_foldable", Type: "bool"},
+			{Key: "device_locale", Type: "string", Hint: "Enter a locale like en_US, fr_FR"},
+			{Key: "device_low_power_mode", Type: "bool"},
+			{Key: "device_manufacturer", Type: "string", Hint: "E.g. Apple, Samsung, Google"},
+			{Key: "device_model", Type: "string", Hint: "E.g. iPhone 17, Pixel 9"},
+			{Key: "device_thermal_throttling_enabled", Type: "bool"},
+			{Key: "device_type", Type: "string", Hint: "E.g. phone or tablet"},
+			{Key: "installation_id", Type: "string", Hint: "Enter an installation ID"},
+			{Key: "os_version", Type: "string", Hint: "Enter API level or iOS version"},
+			{Key: "user_id", Type: "string", Hint: "Enter a user ID"},
+		}
 	}
 }
 
diff --git a/docs/hosting/migration-guides/README.md b/docs/hosting/migration-guides/README.md
index 88002335f..12fd901d5 100644
--- a/docs/hosting/migration-guides/README.md
+++ b/docs/hosting/migration-guides/README.md
@@ -14,3 +14,4 @@ Some migrations may contain _optional_ steps. The specific guide would state tha
 - [**v0.6.x**](./v0.6.x/README.md) - Migration Guide for `v0.6.x`
 - [**v0.8.x**](./v0.8.x/README.md) - Migration Guide for `v0.8.x`
 - [**v0.9.x**](./v0.9.x/README.md) - Migration Guide for `v0.9.x`
+- [**v0.10.x**](./v0.10.x/README.md) - Migration Guide for `v0.10.x`
diff --git a/docs/hosting/migration-guides/v0.10.x/README.md b/docs/hosting/migration-guides/v0.10.x/README.md
new file mode 100644
index 000000000..c09d3baf9
--- /dev/null
+++ b/docs/hosting/migration-guides/v0.10.x/README.md
@@ -0,0 +1,64 @@
+# Migration Guide for Adding Default Targeting Rules
+
+Use this guide to add default targeting rules to existing apps in your Measure installation.
+
+> [!WARNING]
+>
+> Steps mentioned in this document will cause downtime.
+
+Follow these steps to populate default targeting rules for all existing apps. There is some downtime involved. During the downtime, the Measure dashboard may be unavailable. Once the migration is complete, all services should resume normally.
+
+## 1. SSH into the VM where Measure is hosted
+
+## 2. Navigate to the self-host directory
+```sh
+cd ~/measure/self-host
+```
+
+## 3. Run the targeting rules migration script
+
+This script will add default targeting rules (event, session, and trace rules) for all existing apps in your Measure installation.
+```sh
+sudo ./migrations/v0.10.x-add-default-targeting-rules.sh
+```
+
+The script will:
+- Start the PostgreSQL service
+- Insert default event targeting rules per app
+- Insert default session targeting rules per app
+- Insert default trace targeting rule per app
+- Shutdown the PostgreSQL service
+
+## 4. Verify the migration
+
+You can verify that the rules were added successfully by checking the database:
+```sh
+sudo docker compose -f compose.yml -f compose.prod.yml exec postgres psql -U postgres -d measure -c "SELECT count(*) FROM measure.event_targeting_rules;"
+```
+```sh
+sudo docker compose -f compose.yml -f compose.prod.yml exec postgres psql -U postgres -d measure -c "SELECT count(*) FROM measure.session_targeting_rules;"
+```
+```sh
+sudo docker compose -f compose.yml -f compose.prod.yml exec postgres psql -U postgres -d measure -c "SELECT count(*) FROM measure.trace_targeting_rules;"
+```
+
+## Expected Results
+
+If you have `N` apps in your system, you should see:
+- Event targeting rules: `7 × N` rows
+- Session targeting rules: `3 × N` rows
+- Trace targeting rules: `1 × N` rows
+
+## Troubleshooting
+
+If the migration fails:
+
+1. Check the error message in the console output
+2. Ensure the PostgreSQL service is accessible
+3. Verify that the `measure.apps` table exists and contains data
+4. Check that the targeting rules tables exist and have the correct schema
+
+You can safely re-run the migration script if needed - it will insert additional rules, so make sure to clean up any partial data first if you need to retry:
+```sh
+sudo docker compose -f compose.yml -f compose.prod.yml exec postgres psql -U postgres -d measure -c "DELETE FROM measure.event_targeting_rules; DELETE FROM measure.session_targeting_rules; DELETE FROM measure.trace_targeting_rules;"
+```
\ No newline at end of file
diff --git a/frontend/dashboard/__tests__/utils/cel/cel_conversion_test.ts b/frontend/dashboard/__tests__/utils/cel/cel_conversion_test.ts
index f3f4e7052..16d68c86f 100644
--- a/frontend/dashboard/__tests__/utils/cel/cel_conversion_test.ts
+++ b/frontend/dashboard/__tests__/utils/cel/cel_conversion_test.ts
@@ -6,133 +6,105 @@ describe('CEL to conditions and back to CEL', () => {
     test('processes a single event condition', () => {
         const cel = '(event_type == "anr")';
         const conditions = celToConditions(cel);
-        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: undefined });
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined });
         expect(outputCel).toBe(cel);
     });
 
     test('processes multiple event conditions with AND operator', () => {
         const cel = '((event_type == "anr") && (event_type == "exception"))';
         const conditions = celToConditions(cel);
-        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: undefined });
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined });
         expect(outputCel).toBe(cel);
     });
 
     test('processes multiple event conditions with OR operator', () => {
         const cel = '((event_type == "anr") || (event_type == "exception"))';
         const conditions = celToConditions(cel);
-        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: undefined });
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined });
         expect(outputCel).toBe(cel);
     });
 
     test('processes event with attribute', () => {
         const cel = '(event_type == "exception" && exception.handled == false)';
         const conditions = celToConditions(cel);
-        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: undefined });
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined });
         expect(outputCel).toBe(cel);
     });
 
     test('processes event with attribute and ud-attribute', () => {
         const cel = '(event_type == "custom" && custom.name == "login" && event.user_defined_attrs.is_premium_user == true)';
         const conditions = celToConditions(cel);
-        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: undefined });
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined });
         expect(outputCel).toBe(cel);
     });
 
     test('processes event with ud-attribute', () => {
         const cel = '(event_type == "custom" && event.user_defined_attrs.is_premium_user == true)';
         const conditions = celToConditions(cel);
-        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: undefined });
-        expect(outputCel).toBe(cel);
-    });
-
-    test('processes session attribute only', () => {
-        const cel = '(attribute.is_device_foldable == true)';
-        const conditions = celToConditions(cel);
-        const outputCel = conditionsToCel({ event: undefined, trace: undefined, session: conditions.session, });
-        expect(outputCel).toBe(cel);
-    });
-
-    test('processes multiple session attributes with AND operator', () => {
-        const cel = '((attribute.is_device_foldable == true) && (attribute.app_version == "1.0.0"))';
-        const conditions = celToConditions(cel);
-        const outputCel = conditionsToCel({ event: undefined, trace: undefined, session: conditions.session, });
-        expect(outputCel).toBe(cel);
-    });
-
-    test('processes multiple session attributes with OR operator', () => {
-        const cel = '((attribute.is_device_foldable == true) || (attribute.app_version == "1.0.0"))';
-        const conditions = celToConditions(cel);
-        const outputCel = conditionsToCel({ event: undefined, trace: undefined, session: conditions.session, });
-        expect(outputCel).toBe(cel);
-    });
-
-    test('processes combined event and session conditions', () => {
-        const cel = '(event_type == "anr") && (attribute.is_device_foldable == true)';
-        const conditions = celToConditions(cel);
-        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: conditions.session });
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined });
         expect(outputCel).toBe(cel);
     });
 
     test('processes condition with contains operator', () => {
         const cel = '(event_type == "custom" && custom.name.contains("log"))';
         const conditions = celToConditions(cel);
-        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: undefined });
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined });
         expect(outputCel).toBe(cel);
     });
 
     test('processes condition with startsWith operator', () => {
         const cel = '(event_type == "custom" && custom.name.startsWith("log"))';
         const conditions = celToConditions(cel);
-        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: undefined });
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined });
         expect(outputCel).toBe(cel);
     });
 
     test('processes condition with gte operator', () => {
         const cel = '(event_type == "custom" && custom.retry_cound >= 1)';
         const conditions = celToConditions(cel);
-        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: undefined });
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined });
         expect(outputCel).toBe(cel);
     });
 
     test('processes condition with lte operator', () => {
         const cel = '(event_type == "custom" && custom.retry_cound <= 1)';
         const conditions = celToConditions(cel);
-        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: undefined });
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined });
         expect(outputCel).toBe(cel);
     });
 
     test('processes condition with lt operator', () => {
         const cel = '(event_type == "custom" && custom.retry_cound < 1)';
         const conditions = celToConditions(cel);
-        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: undefined });
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined });
         expect(outputCel).toBe(cel);
     });
 
     test('processes condition with gt operator', () => {
         const cel = '(event_type == "custom" && custom.retry_cound > 1)';
         const conditions = celToConditions(cel);
-        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined, session: undefined });
+        const outputCel = conditionsToCel({ event: conditions.event, trace: undefined });
         expect(outputCel).toBe(cel);
     });
 
     test('processes a span condition', () => {
         const cel = '(span_name == "Activity TTID")';
         const conditions = celToConditions(cel);
-        const outputCel = conditionsToCel({ event: undefined, trace: conditions.trace , session: undefined });
+        const outputCel = conditionsToCel({ event: undefined, trace: conditions.trace  });
         expect(outputCel).toBe(cel);
     });
 
     test('processes multiple span conditions with AND operator', () => {
         const cel = '((span_name == "Activity TTID") && (span_name.startsWith("HTTP GET /config")))';
         const conditions = celToConditions(cel);
-        const outputCel = conditionsToCel({ event: undefined, trace: conditions.trace , session: undefined });
+        const outputCel = conditionsToCel({ event: undefined, trace: conditions.trace  });
         expect(outputCel).toBe(cel);
     });
 
     test('processes multiple span conditions with OR operator', () => {
         const cel = '((span_name == "Activity TTID") || (span_name.startsWith("HTTP GET /config")))';
         const conditions = celToConditions(cel);
-        const outputCel = conditionsToCel({ event: undefined, trace: conditions.trace , session: undefined });
+        const outputCel = conditionsToCel({ event: undefined, trace: conditions.trace  });
         expect(outputCel).toBe(cel);
     });
 
@@ -142,21 +114,7 @@ describe('CEL to conditions and back to CEL', () => {
 
         expect(conditions.trace).toBeDefined();
 
-        const outputCel = conditionsToCel({ event: undefined, trace: conditions.trace , session: undefined });
-        expect(outputCel).toBe(cel);
-    });
-
-    test('processes a span condition with session conditions', () => {
-        const cel = '(span_name == "Activity TTID") && (attribute.is_device_foldable == true)';
-        const conditions = celToConditions(cel);
-        const outputCel = conditionsToCel({ event: undefined, trace: conditions.trace, session: conditions.session });
-        expect(outputCel).toBe(cel);
-    });
-
-    test('processes complex combined conditions', () => {
-        const cel = '((event_type == "anr") && (event_type == "exception")) && (span_name == "Activity TTID" && trace.user_defined_attrs.api_level >= 21) && (attribute.is_device_foldable == true)';
-        const conditions = celToConditions(cel);
-        const outputCel = conditionsToCel({ event: conditions.event, trace: conditions.trace, session: conditions.session });
+        const outputCel = conditionsToCel({ event: undefined, trace: conditions.trace  });
         expect(outputCel).toBe(cel);
     });
 });
diff --git a/frontend/dashboard/__tests__/utils/cel/cel_generator_test.ts b/frontend/dashboard/__tests__/utils/cel/cel_generator_test.ts
index 3f7c2a505..7f3e16b1d 100644
--- a/frontend/dashboard/__tests__/utils/cel/cel_generator_test.ts
+++ b/frontend/dashboard/__tests__/utils/cel/cel_generator_test.ts
@@ -222,83 +222,6 @@ describe('CEL Generator', () => {
         });
     });
 
-    describe('CEL from session conditions', () => {
-        test('generates CEL for single session attribute', () => {
-            const conditions: ParsedConditions = {
-                session: {
-                    conditions: [{
-                        id: 'cond1',
-                        attrs: [{
-                            id: 'attr1',
-                            key: 'is_device_foldable',
-                            type: 'boolean',
-                            value: true,
-                            operator: 'eq'
-                        }]
-                    }],
-                    operators: []
-                }
-            };
-
-            const result = conditionsToCel(conditions);
-            expect(result).toBe('(attribute.is_device_foldable == true)');
-        });
-
-        test('generates CEL for multiple session attributes with AND operator', () => {
-            const conditions: ParsedConditions = {
-                session: {
-                    conditions: [
-                        {
-                            id: 'cond1',
-                            attrs: [{
-                                id: 'attr1',
-                                key: 'is_device_foldable',
-                                type: 'boolean',
-                                value: true,
-                                operator: 'eq'
-                            }]
-                        },
-                        {
-                            id: 'cond2',
-                            attrs: [{
-                                id: 'attr2',
-                                key: 'app_version',
-                                type: 'string',
-                                value: '1.0.0',
-                                operator: 'eq'
-                            }]
-                        }
-                    ],
-                    operators: ['AND']
-                }
-            };
-
-            const result = conditionsToCel(conditions);
-            expect(result).toBe('((attribute.is_device_foldable == true) && (attribute.app_version == "1.0.0"))');
-        });
-
-        test('generates CEL for session attribute with string operators', () => {
-            const conditions: ParsedConditions = {
-                session: {
-                    conditions: [{
-                        id: 'cond1',
-                        attrs: [{
-                            id: 'attr1',
-                            key: 'device_model',
-                            type: 'string',
-                            value: 'Samsung',
-                            operator: 'startsWith'
-                        }]
-                    }],
-                    operators: []
-                }
-            };
-
-            const result = conditionsToCel(conditions);
-            expect(result).toBe('(attribute.device_model.startsWith("Samsung"))');
-        });
-    });
-
     describe('Trace Conditions', () => {
         test('generates CEL for single span name condition', () => {
             const conditions: ParsedConditions = {
@@ -690,38 +613,7 @@ describe('CEL Generator', () => {
     });
 
     describe('CEL from combined conditions', () => {
-        test('generates CEL for event and session conditions', () => {
-            const conditions: ParsedConditions = {
-                event: {
-                    conditions: [{
-                        id: 'cond1',
-                        type: 'anr',
-                        attrs: [],
-                        ud_attrs: [],
-                        session_attrs: [],
-                    }],
-                    operators: []
-                },
-                session: {
-                    conditions: [{
-                        id: 'cond2',
-                        attrs: [{
-                            id: 'attr1',
-                            key: 'is_device_foldable',
-                            type: 'boolean',
-                            value: true,
-                            operator: 'eq'
-                        }]
-                    }],
-                    operators: []
-                }
-            };
-
-            const result = conditionsToCel(conditions);
-            expect(result).toBe('(event_type == "anr") && (attribute.is_device_foldable == true)');
-        });
-
-        test('generates CEL for event, trace, and session conditions', () => {
+        test('generates CEL for event and trace', () => {
             const conditions: ParsedConditions = {
                 event: {
                     conditions: [{
@@ -729,7 +621,14 @@ describe('CEL Generator', () => {
                         type: 'custom',
                         attrs: [],
                         ud_attrs: [],
-                        session_attrs: [],
+                        session_attrs: [
+                            {
+                                id: 'attr1',
+                                key: 'platform',
+                                type: 'string',
+                                value: 'android',
+                                operator: 'eq'
+                            }]
                     }],
                     operators: []
                 },
@@ -742,24 +641,11 @@ describe('CEL Generator', () => {
                         session_attrs: [],
                     }],
                     operators: []
-                },
-                session: {
-                    conditions: [{
-                        id: 'cond3',
-                        attrs: [{
-                            id: 'attr1',
-                            key: 'platform',
-                            type: 'string',
-                            value: 'android',
-                            operator: 'eq'
-                        }]
-                    }],
-                    operators: []
                 }
             };
 
             const result = conditionsToCel(conditions);
-            expect(result).toBe('(event_type == "custom") && (span_name == "Activity TTID") && (attribute.platform == "android")');
+            expect(result).toBe('((event_type == "custom" && attribute.platform == "android") && (span_name == "Activity TTID"))');
         });
     });
 });
\ No newline at end of file
diff --git a/frontend/dashboard/__tests__/utils/cel/cel_parser_test.ts b/frontend/dashboard/__tests__/utils/cel/cel_parser_test.ts
index f0d9a5f62..c14ace70e 100644
--- a/frontend/dashboard/__tests__/utils/cel/cel_parser_test.ts
+++ b/frontend/dashboard/__tests__/utils/cel/cel_parser_test.ts
@@ -13,7 +13,6 @@ describe('CEL Parser', () => {
             ud_attrs: []
         });
         expect(conditions.event!.operators).toHaveLength(0);
-        expect(conditions.session).toBeUndefined();
         expect(conditions.trace).toBeUndefined();
     });
 
@@ -100,43 +99,6 @@ describe('CEL Parser', () => {
         });
     });
 
-    test('parses session attribute condition', () => {
-        const cel = '(attribute.is_device_foldable == true)';
-        const conditions = celToConditions(cel);
-
-        expect(conditions.session).toBeDefined();
-        expect(conditions.session!.conditions).toHaveLength(1);
-        expect(conditions.session!.conditions[0].attrs).toHaveLength(1);
-        expect(conditions.session!.conditions[0].attrs[0]).toMatchObject({
-            key: 'is_device_foldable',
-            type: 'bool',
-            value: true,
-            operator: 'eq'
-        });
-        expect(conditions.event).toBeUndefined();
-        expect(conditions.trace).toBeUndefined();
-    });
-
-    test('parses multiple session attributes with AND operator', () => {
-        const cel = '((attribute.is_device_foldable == true) && (attribute.app_version == "1.0.0"))';
-        const conditions = celToConditions(cel);
-
-        expect(conditions.session).toBeDefined();
-        expect(conditions.session!.conditions).toHaveLength(2);
-        expect(conditions.session!.operators).toEqual(['AND']);
-        expect(conditions.session!.conditions[0].attrs[0].key).toBe('is_device_foldable');
-        expect(conditions.session!.conditions[1].attrs[0].key).toBe('app_version');
-    });
-
-    test('parses multiple session attributes with OR operator', () => {
-        const cel = '((attribute.is_device_foldable == true) || (attribute.app_version == "1.0.0"))';
-        const conditions = celToConditions(cel);
-
-        expect(conditions.session).toBeDefined();
-        expect(conditions.session!.conditions).toHaveLength(2);
-        expect(conditions.session!.operators).toEqual(['OR']);
-    });
-
     test('parses span name condition', () => {
         const cel = '(span_name == "Activity TTID")';
         const conditions = celToConditions(cel);
@@ -149,7 +111,6 @@ describe('CEL Parser', () => {
             ud_attrs: []
         });
         expect(conditions.event).toBeUndefined();
-        expect(conditions.session).toBeUndefined();
     });
 
     test('parses multiple span conditions with AND operator', () => {
@@ -183,17 +144,16 @@ describe('CEL Parser', () => {
     });
 
     test('parses combined event and session conditions', () => {
-        const cel = '(event_type == "anr") && (attribute.is_device_foldable == true)';
+        const cel = '(event_type == "anr" && attribute.is_device_foldable == true)';
         const conditions = celToConditions(cel);
 
         expect(conditions.event).toBeDefined();
-        expect(conditions.session).toBeDefined();
 
         expect(conditions.event!.conditions).toHaveLength(1);
         expect(conditions.event!.conditions[0].type).toBe('anr');
 
-        expect(conditions.session!.conditions).toHaveLength(1);
-        expect(conditions.session!.conditions[0].attrs[0].key).toBe('is_device_foldable');
+        expect(conditions.event!.conditions[0].session_attrs!).toHaveLength(1);
+        expect(conditions.event!.conditions[0].session_attrs[0].key).toBe('is_device_foldable');
     });
 
     test('parses condition with contains operator', () => {
@@ -247,7 +207,7 @@ describe('CEL Parser', () => {
     });
 
     test('parses complex combined conditions', () => {
-        const cel = '((event_type == "anr") && (event_type == "exception")) && (span_name == "Activity TTID" && trace.user_defined_attrs.api_level >= 21) && (attribute.is_device_foldable == true)';
+        const cel = '((event_type == "anr" && attribute.is_device_foldable == true) && (event_type == "exception")) && (span_name == "Activity TTID" && trace.user_defined_attrs.api_level >= 21)';
         const conditions = celToConditions(cel);
 
         // Event conditions
@@ -264,9 +224,8 @@ describe('CEL Parser', () => {
         expect(conditions.trace!.conditions[0].ud_attrs).toHaveLength(1);
 
         // Session conditions
-        expect(conditions.session).toBeDefined();
-        expect(conditions.session!.conditions).toHaveLength(1);
-        expect(conditions.session!.conditions[0].attrs[0].key).toBe('is_device_foldable');
+        expect(conditions.event!.conditions[0].session_attrs[0]).toBeDefined();
+        expect(conditions.event!.conditions[0].session_attrs[0].key).toBe('is_device_foldable');
     });
 
     test('parses condition with null value', () => {
diff --git a/frontend/dashboard/app/[teamId]/data/[appId]/event/[ruleId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/event/[ruleId]/edit/page.tsx
index 95423705f..83af31276 100644
--- a/frontend/dashboard/app/[teamId]/data/[appId]/event/[ruleId]/edit/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/event/[ruleId]/edit/page.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useRouter } from 'next/navigation'
-import EventRuleBuilder from '@/app/components/targeting/event_rule_builder'
+import RuleBuilder from '@/app/components/targeting/rule_builder'
 
 export default function EditEventRule({ params }: { params: { teamId: string, appId: string, ruleId: string } }) {
     const router = useRouter()
@@ -19,8 +19,9 @@ export default function EditEventRule({ params }: { params: { teamId: string, ap
     }
 
     return (
-        <EventRuleBuilder
-            mode="edit"
+        <RuleBuilder 
+            type='event'
+            mode='edit'
             appId={params.appId}
             ruleId={params.ruleId}
             onCancel={handleCancel}
diff --git a/frontend/dashboard/app/[teamId]/data/[appId]/event/create/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/event/create/page.tsx
index 4272b6100..f59ca45ad 100644
--- a/frontend/dashboard/app/[teamId]/data/[appId]/event/create/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/event/create/page.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useRouter } from 'next/navigation'
-import EventRuleBuilder from '@/app/components/targeting/event_rule_builder'
+import RuleBuilder from '@/app/components/targeting/rule_builder'
 
 export default function CreateEventRule({ params }: { params: { teamId: string, appId: string } }) {
     const router = useRouter()
@@ -19,8 +19,9 @@ export default function CreateEventRule({ params }: { params: { teamId: string,
     }
 
     return (
-        <EventRuleBuilder
-            mode="create"
+        <RuleBuilder
+            type='event'
+            mode='create'
             appId={params.appId}
             onCancel={handleCancel}
             onSave={handleCreate}
diff --git a/frontend/dashboard/app/[teamId]/data/[appId]/session/[ruleId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/session/[ruleId]/edit/page.tsx
index d7746d74a..02602288a 100644
--- a/frontend/dashboard/app/[teamId]/data/[appId]/session/[ruleId]/edit/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/session/[ruleId]/edit/page.tsx
@@ -1,7 +1,8 @@
 "use client"
 
+import RuleBuilder from '@/app/components/targeting/rule_builder'
+import SessionTimelineRuleBuilder from '@/app/components/targeting/session_timeline_rule_builder'
 import { useRouter } from 'next/navigation'
-import { Button } from '@/app/components/button'
 
 export default function EditSessionTimelineRule({ params }: { params: { teamId: string, appId: string, ruleId: string } }) {
     const router = useRouter()
@@ -10,40 +11,23 @@ export default function EditSessionTimelineRule({ params }: { params: { teamId:
         router.back()
     }
 
-    const handleSave = () => {
-        // TODO: Implement save logic
+    const handleCreate = () => {
         router.back()
     }
 
-    return (
-        <div className="flex flex-col selection:bg-yellow-200/75 items-start">
-            <p className="font-display text-4xl max-w-6xl text-center">Edit Session Filter</p>
-            <div className="py-4" />
-
-            <div className="w-full flex flex-col">
-                {/* Reserved space for content */}
-                <div className="mb-6">
-                    {/* TODO: Add form fields */}
-                </div>
+    const handleDelete = () => {
+        router.back()
+    }
 
-                {/* Action buttons */}
-                <div className="flex justify-end gap-3">
-                    <Button
-                        variant="outline"
-                        onClick={handleCancel}
-                        className="font-display"
-                    >
-                        Cancel
-                    </Button>
-                    <Button
-                        variant="outline"
-                        onClick={handleSave}
-                        className="font-display border border-black"
-                    >
-                        Save Changes
-                    </Button>
-                </div>
-            </div>
-        </div>
+    return (
+        <RuleBuilder
+            type='timeline'
+            mode='edit'
+            appId={params.appId}
+            ruleId={params.ruleId}
+            onCancel={handleCancel}
+            onSave={handleCreate}
+            onDelete={handleDelete}
+        />
     )
 }
diff --git a/frontend/dashboard/app/[teamId]/data/[appId]/session/create/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/session/create/page.tsx
index bd8d37a9e..f85328cb0 100644
--- a/frontend/dashboard/app/[teamId]/data/[appId]/session/create/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/session/create/page.tsx
@@ -1,7 +1,8 @@
 "use client"
 
+import RuleBuilder from '@/app/components/targeting/rule_builder'
+import SessionTimelineRuleBuilder from '@/app/components/targeting/session_timeline_rule_builder'
 import { useRouter } from 'next/navigation'
-import { Button } from '@/app/components/button'
 
 export default function CreateSessionTimelineRule({ params }: { params: { teamId: string, appId: string } }) {
     const router = useRouter()
@@ -11,39 +12,21 @@ export default function CreateSessionTimelineRule({ params }: { params: { teamId
     }
 
     const handleCreate = () => {
-        // TODO: Implement create logic
         router.back()
     }
 
-    return (
-        <div className="flex flex-col selection:bg-yellow-200/75 items-start">
-            <p className="font-display text-4xl max-w-6xl text-center">Create Session Timeline Rule</p>
-            <div className="py-4" />
-
-            <div className="w-full flex flex-col">
-                {/* Reserved space for content */}
-                <div className="mb-6">
-                    {/* TODO: Add form fields */}
-                </div>
+    const handleDelete = () => {
+        router.back()
+    }
 
-                {/* Action buttons */}
-                <div className="flex justify-end gap-3">
-                    <Button
-                        variant="outline"
-                        onClick={handleCancel}
-                        className="font-display"
-                    >
-                        Cancel
-                    </Button>
-                    <Button
-                        variant="outline"
-                        onClick={handleCreate}
-                        className="font-display border border-black"
-                    >
-                        Create Filter
-                    </Button>
-                </div>
-            </div>
-        </div>
+    return (
+        <RuleBuilder
+            type='timeline'
+            mode='create'
+            appId={params.appId}
+            onCancel={handleCancel}
+            onSave={handleCreate}
+            onDelete={handleDelete}
+        />
     )
 }
diff --git a/frontend/dashboard/app/[teamId]/data/[appId]/trace/[ruleId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/trace/[ruleId]/edit/page.tsx
index 900267c40..60f9f0379 100644
--- a/frontend/dashboard/app/[teamId]/data/[appId]/trace/[ruleId]/edit/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/trace/[ruleId]/edit/page.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useRouter } from 'next/navigation'
-import TraceRuleBuilder from '@/app/components/targeting/trace_rule_builder'
+import RuleBuilder from '@/app/components/targeting/rule_builder'
 
 export default function EditTraceRule({ params }: { params: { teamId: string, appId: string, ruleId: string } }) {
     const router = useRouter()
@@ -14,13 +14,19 @@ export default function EditTraceRule({ params }: { params: { teamId: string, ap
         router.back()
     }
 
+    const handleDelete = () => {
+        router.back()
+    }
+
     return (
-        <TraceRuleBuilder
-            mode="edit"
+        <RuleBuilder
+            type='trace'
+            mode='edit'
             appId={params.appId}
             ruleId={params.ruleId}
             onCancel={handleCancel}
             onSave={handleSave}
+            onDelete={handleDelete}
         />
     )
 }
diff --git a/frontend/dashboard/app/[teamId]/data/[appId]/trace/create/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/trace/create/page.tsx
index 7cdabf5e2..6b8277243 100644
--- a/frontend/dashboard/app/[teamId]/data/[appId]/trace/create/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/trace/create/page.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useRouter } from 'next/navigation'
-import TraceRuleBuilder from '@/app/components/targeting/trace_rule_builder'
+import RuleBuilder from '@/app/components/targeting/rule_builder'
 
 export default function CreateTraceRule({ params }: { params: { teamId: string, appId: string } }) {
     const router = useRouter()
@@ -14,12 +14,18 @@ export default function CreateTraceRule({ params }: { params: { teamId: string,
         router.back()
     }
 
+    const handleDelete = () => {
+        router.back()
+    }
+
     return (
-        <TraceRuleBuilder
-            mode="create"
+        <RuleBuilder
+            type='trace'
+            mode='create'
             appId={params.appId}
             onCancel={handleCancel}
             onSave={handleCreate}
+            onDelete={handleDelete}
         />
     )
 }
diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index cfd27d629..38f4dadf0 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -9,8 +9,7 @@ import { Button } from '@/app/components/button'
 import { Plus, Pencil } from 'lucide-react'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/app/components/dropdown_menu'
 import EditDefaultRuleDialog from '@/app/components/targeting/edit_default_rule_dialog'
-import EventTraceTargetingRulesTable from '@/app/components/targeting/event_trace_targeting_rules_table'
-import SessionTargetingRulesTable from '@/app/components/targeting/session_targeting_rules_table'
+import RulesTable from '@/app/components/targeting/rules_table'
 import { toastPositive, toastNegative } from '@/app/utils/use_toast'
 
 interface PageState {
@@ -197,13 +196,16 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                         className='select-none'
                         onCloseAutoFocus={(e) => e.preventDefault()}
                     >
-                        <DropdownMenuItem onClick={() => router.push(`/${params.teamId}/data/${pageState.filters.app!.id}/event/create`)}>
+                        <DropdownMenuItem onClick={() => router.push(`/${params.teamId}/data/${pageState.filters.app!.id}/event/create`)}
+                            className="font-display">
                             Event Rule
                         </DropdownMenuItem>
-                        <DropdownMenuItem onClick={() => router.push(`/${params.teamId}/data/${pageState.filters.app!.id}/trace/create`)}>
+                        <DropdownMenuItem onClick={() => router.push(`/${params.teamId}/data/${pageState.filters.app!.id}/trace/create`)}
+                            className="font-display">
                             Trace Rule
                         </DropdownMenuItem>
-                        <DropdownMenuItem onClick={() => router.push(`/${params.teamId}/data/${pageState.filters.app!.id}/session/create`)}>
+                        <DropdownMenuItem onClick={() => router.push(`/${params.teamId}/data/${pageState.filters.app!.id}/session/create`)}
+                            className="font-display">
                             Session Timeline Rule
                         </DropdownMenuItem>
                     </DropdownMenuContent>
@@ -239,7 +241,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
 
             {/* Error state for data rules fetch */}
             {pageState.filters.ready && hasError() &&
-                <p className="text-lg font-display">Error fetching data filters, please change filters, refresh page or select a different app to try again</p>}
+                <p className="text-lg font-display">Error loading rules, please refresh page or select a different app to try again</p>}
 
             {/* Main data rules UI */}
             {canShowContent() &&
@@ -272,8 +274,9 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                             </div>
                         )}
 
-                        <EventTraceTargetingRulesTable
+                        <RulesTable
                             rules={eventsOverideRules}
+                            tableType='event'
                             onRuleClick={(rule) => handleEditRule(rule, 'event')}
                         />
                     </div>
@@ -304,8 +307,9 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                             </div>
                         )}
 
-                        <EventTraceTargetingRulesTable
+                        <RulesTable
                             rules={traceOverrideRules}
+                            tableType='trace'
                             onRuleClick={(rule) => handleEditRule(rule, 'trace')}
                         />
                     </div>
@@ -318,9 +322,11 @@ export default function DataFilters({ params }: { params: { teamId: string } })
 
                         <div className="py-4" />
 
-                        <SessionTargetingRulesTable
+                        <RulesTable
                             rules={sessionTargetingRules}
+                            tableType='session'
                             onRuleClick={(rule) => handleEditRule(rule, 'session')}
+                            showOverridesHeader={false}
                         />
                     </div>
                 </div>}
diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index 1189023fe..e75c06702 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -1151,9 +1151,7 @@ export const emptyAlertsOverviewResponse = {
   }[],
 }
 
-export type CollectionMode = 'sampled' | 'session_timeline' | 'disabled';
-
-export type EventTargetingAttachmentConfig = 'none' | 'layout_snapshot' | 'screenshot';
+export type CollectionMode = 'sampled' | 'timeline' | 'disabled';
 
 export type EventTargetingRulesResponse = {
   rules: EventTargetingRule[] | null,
@@ -1162,6 +1160,7 @@ export type EventTargetingRulesResponse = {
 
 
 export type EventTargetingRuleRequest = {
+  name: string,
   condition: string,
   collection_mode: CollectionMode,
   sampling_rate: number,
@@ -1170,26 +1169,30 @@ export type EventTargetingRuleRequest = {
 }
 
 export type TraceTargetingRuleRequest = {
+  name: string,
   condition: string,
   collection_mode: CollectionMode,
   sampling_rate: number,
 }
 
 export type SessionTargetingRuleRequest = {
+  name: string,
   condition: string,
   sampling_rate: number,
 }
 
 export type EventTargetingRule = {
   id: string,
+  name: string,
   condition: string,
   collection_mode: CollectionMode,
   sampling_rate: number,
   take_screenshot: boolean,
   take_layout_snapshot: boolean,
-  attachment_config?: EventTargetingAttachmentConfig,
-  updated_at: string,
-  updated_by: string,
+  updated_at?: string,
+  updated_by?: string,
+  created_at: string,
+  created_by: string,
 }
 
 export type TraceTargetingRulesResponse = {
@@ -1199,11 +1202,14 @@ export type TraceTargetingRulesResponse = {
 
 export type TraceTargetingRule = {
   id: string,
+  name: string,
   condition: string,
   collection_mode: CollectionMode,
   sampling_rate: number,
-  updated_at: string,
-  updated_by: string,
+  updated_at?: string,
+  updated_by?: string,
+  created_at: string,
+  created_by: string,
 }
 
 export type SessionTargetingRulesResponse = {
@@ -1216,10 +1222,13 @@ export type SessionTargetingRulesResponse = {
 
 export type SessionTargetingRule = {
   id: string,
+  name: string,
   condition: string,
   sampling_rate: number,
-  updated_at: string,
-  updated_by: string,
+  updated_at?: string,
+  updated_by?: string,
+  created_at: string,
+  created_by: string,
 }
 
 export type EventTargetingConfig = {
@@ -1255,7 +1264,16 @@ export type EventTargetingConfigResponse = {
 }
 
 export type TraceTargetingConfigResponse = {
-  traces: TraceTargetingConfig[];
+  trace_config: TraceTargetingConfig[];
+  trace_ud_attrs: AttributeTargetingConfig[];
+  session_attrs: AttributeTargetingConfig[];
+  operator_types: TargetingOperatorConfig;
+}
+
+export type SessionTargetingConfigResponse = {
+  events: EventTargetingConfig[];
+  trace_config: TraceTargetingConfig[];
+  event_ud_attrs: AttributeTargetingConfig[];
   trace_ud_attrs: AttributeTargetingConfig[];
   session_attrs: AttributeTargetingConfig[];
   operator_types: TargetingOperatorConfig;
diff --git a/frontend/dashboard/app/components/targeting/attribute_builder.tsx b/frontend/dashboard/app/components/targeting/attribute_builder.tsx
new file mode 100644
index 000000000..fce68bdab
--- /dev/null
+++ b/frontend/dashboard/app/components/targeting/attribute_builder.tsx
@@ -0,0 +1,145 @@
+"use client"
+
+import { AttributeField } from '@/app/utils/cel/conditions'
+import { X } from 'lucide-react'
+import { Button } from '../button'
+import DropdownSelect, { DropdownSelectType } from '../dropdown_select'
+import { useState, useEffect } from 'react'
+import AttributeKeyDropdownSelect from './attribute_key_dropdown_select'
+
+interface AttributeBuilderProps {
+    attribute: AttributeField
+    attributeKeys: Record<string, string>
+    operators: string[]
+    onUpdateKey: (attrId: string, updatedKey: string, attrSource: string) => void
+    onUpdateValue: (attrId: string, updateValue: string | number | boolean) => void
+    onUpdateOperator: (attrId: string, operator: string) => void
+    allowDelete: boolean
+    onDelete?: (attrId: string) => void
+}
+
+export default function AttributeBuilder({
+    attribute,
+    attributeKeys,
+    operators,
+    onUpdateValue,
+    onUpdateOperator,
+    allowDelete = true,
+    onUpdateKey,
+    onDelete,
+}: AttributeBuilderProps) {
+    const [localValue, setLocalValue] = useState(attribute.value)
+
+    useEffect(() => {
+        setLocalValue(attribute.value)
+    }, [attribute.value])
+
+
+    const getTypeDisplayName = (type: string): string => {
+        const typeMap: { [key: string]: string } = {
+            float64: 'decimal',
+            int64: 'number',
+            number: 'number',
+            string: 'text',
+        }
+        return typeMap[type] || type
+    }
+
+    return (
+        <div className={`flex items-center group`}>
+            <span className="ml-5 mr-4">and</span>
+            {/* Attribute Key Dropdown or Text */}
+            <div className="flex-[35] mr-3 min-w-0">
+                <AttributeKeyDropdownSelect
+                    title="Attributes"
+                    items={attributeKeys}
+                    initialSelected={attribute.key}
+                    onKeySelected={(key, attrSource) => {
+                        onUpdateKey?.(attribute.id, key, attrSource)
+                    }}
+                    buttonClassName="flex justify-between font-display border border-black w-full select-none"
+                />
+            </div>
+
+            {/* Operator Dropdown */}
+            <div className="flex-[15] mr-3">
+                <DropdownSelect
+                    type={DropdownSelectType.SingleString}
+                    title="Condition"
+                    items={operators}
+                    initialSelected={attribute.operator}
+                    onChangeSelected={(selected) => {
+                        onUpdateOperator(attribute.id, selected as string)
+                    }}
+                    buttonClassName="flex justify-between font-display border border-black w-full select-none"
+                />
+            </div>
+
+            {/* Value section */}
+            <div className="flex-[35] mr-3">
+                {attribute.type === 'bool' ? (
+                    <DropdownSelect
+                        type={DropdownSelectType.SingleString}
+                        title="Value"
+                        items={['true', 'false']}
+                        initialSelected={attribute.value ? 'true' : 'false'}
+                        onChangeSelected={(selected) => {
+                            onUpdateValue(attribute.id, (selected as string) === 'true')
+                        }}
+                        buttonClassName="flex justify-between font-display border border-black w-full select-none"
+                    />
+                ) : (
+                    <div className="relative">
+                        <input
+                            id={`attr-value-${attribute.id}`}
+                            type={
+                                attribute.type === 'number' ||
+                                    attribute.type === 'int64' ||
+                                    attribute.type === 'float64'
+                                    ? 'number'
+                                    : 'text'
+                            }
+                            placeholder={
+                                attribute.hint
+                                    ? attribute.hint
+                                    : `Enter ${getTypeDisplayName(attribute.type)} value`
+                            }
+                            value={localValue as string | number}
+                            onChange={(e) => setLocalValue(e.target.value)}
+                            onBlur={(e) => {
+                                const raw = e.target.value
+                                let value: string | number | boolean;
+                                if (attribute.type === 'int64') {
+                                    value = parseInt(raw, 10) || 0
+                                } else if (attribute.type === 'number' || attribute.type === 'float64') {
+                                    value = parseFloat(raw) || 0
+                                } else {
+                                    value = raw
+                                }
+                                onUpdateValue(attribute.id, value)
+                            }}
+                            className={`w-full border rounded-md outline-hidden text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 font-body placeholder:text-neutral-400 border-black`}
+                        />
+                    </div>
+                )}
+            </div>
+
+            {/* Remove Attribute Button */}
+            <div className="flex justify-start flex-[15]">
+                {allowDelete && onDelete ? (
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => onDelete(attribute.id)}
+                        className="h-8 w-8 p-0 hover:bg-yellow-200 focus:bg-yellow-200 focus:opacity-100 flex-shrink-0
+                       opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+                    >
+                        <X className="h-4 w-4" />
+                    </Button>
+                ) : (
+                    <div className="h-8 w-8"></div>
+                )}
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/frontend/dashboard/app/components/targeting/attribute_key_dropdown_select.tsx b/frontend/dashboard/app/components/targeting/attribute_key_dropdown_select.tsx
new file mode 100644
index 000000000..5dcc83d8f
--- /dev/null
+++ b/frontend/dashboard/app/components/targeting/attribute_key_dropdown_select.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import { Check, ChevronsUpDown } from "lucide-react"
+import React, { useEffect, useState } from 'react'
+
+import { cn } from '../../utils/shadcn_utils'
+import { Button } from '../button'
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+} from '../command'
+import { Popover, PopoverContent, PopoverTrigger } from '../popover'
+
+interface AttributeKeyDropdownSelectProps {
+    title: string
+    items: Record<string, string>
+    initialSelected: string
+    onKeySelected?: (key: string, type: string) => void
+    buttonClassName?: string
+}
+
+const AttributeKeyDropdownSelect: React.FC<AttributeKeyDropdownSelectProps> = ({
+    title,
+    items,
+    initialSelected,
+    onKeySelected,
+    buttonClassName
+}) => {
+    const [open, setOpen] = useState(false)
+    const [selected, setSelected] = useState(initialSelected)
+    const [searchValue, setSearchValue] = useState("")
+
+    useEffect(() => {
+        if (selected !== initialSelected) {
+            setSelected(initialSelected)
+        }
+    }, [initialSelected])
+
+    const handleItemClick = (key: string) => {
+        setSelected(key)
+        setOpen(false)
+        onKeySelected?.(key, items[key])
+    }
+
+    const getFilteredItems = () => {
+        const searchLower = searchValue.toLowerCase()
+        return Object.entries(items).filter(([key]) =>
+            key.toLowerCase().includes(searchLower)
+        )
+    }
+
+    const getDisplayText = () => {
+        return selected ? selected : title
+    }
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    variant="outline"
+                    className={buttonClassName || "flex justify-between font-display border border-black w-fit min-w-[150px] select-none"}
+                >
+                    <span className="truncate">{getDisplayText()}</span>
+                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0 w-64" align="start">
+                <Command>
+                    <CommandInput
+                        placeholder="Search..."
+                        value={searchValue}
+                        onValueChange={setSearchValue}
+                        className="h-10 p-1 border border-0 rounded-md focus:ring-0 font-body text-sm"
+                    />
+                    <CommandEmpty>
+                        <div className="text-center py-2 text-sm text-gray-500">No results found</div>
+                    </CommandEmpty>
+                    <CommandGroup className="max-h-72 overflow-auto">
+                        {getFilteredItems().map(([key, type]) => (
+                            <CommandItem
+                                key={key}
+                                onSelect={() => handleItemClick(key)}
+                                className={cn(
+                                    "flex items-center justify-between cursor-default focus-visible:ring-3 focus-visible:ring-yellow-300",
+                                )}
+                                tabIndex={0}
+                                onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {
+                                    if (e.key === 'Enter') {
+                                        e.preventDefault()
+                                        handleItemClick(key)
+                                    }
+                                }}
+                            >
+                                <span className="flex-1 truncate font-display text-sm">{key}</span>
+                                <div className="flex items-center gap-2">
+                                    {selected === key && (
+                                        <Check className="h-4 w-4 ml-1 shrink-0" />
+                                    )}
+                                </div>
+                            </CommandItem>
+                        ))}
+                    </CommandGroup>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    )
+}
+
+export default AttributeKeyDropdownSelect
\ No newline at end of file
diff --git a/frontend/dashboard/app/components/targeting/delete_rule.tsx b/frontend/dashboard/app/components/targeting/delete_rule.tsx
deleted file mode 100644
index 9d888312b..000000000
--- a/frontend/dashboard/app/components/targeting/delete_rule.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client"
-
-import React from "react"
-import DangerConfirmationDialog from "../danger_confirmation_dialog"
-
-export type DeleteRuleProps = {
-  open: boolean
-  onConfirm: () => void
-  onCancel: () => void
-  isDeleting: boolean
-}
-
-export default function DeleteRule({
-  open,
-  onConfirm,
-  onCancel,
-  isDeleting,
-}: DeleteRuleProps) {
-  return (
-    <DangerConfirmationDialog
-      body={
-        <p className="font-body">
-          Do you want to delete this rule? This action cannot be undone.
-        </p>
-      }
-      open={open}
-      affirmativeText={isDeleting ? "Deleting…" : "Delete Rule"}
-      cancelText="Cancel"
-      onAffirmativeAction={onConfirm}
-      onCancelAction={onCancel}
-    />
-  )
-}
diff --git a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
index 85dcf2065..c1c66386a 100644
--- a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
+++ b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
@@ -5,9 +5,7 @@ import { Button } from '@/app/components/button'
 import SamplingRateInput from '@/app/components/targeting/sampling_rate_input'
 import { useState, useEffect } from 'react'
 import { DialogDescription } from '@radix-ui/react-dialog'
-import { updateEventTargetingRule, updateTraceTargetingRule, UpdateEventTargetingRuleApiStatus, UpdateTraceTargetingRuleApiStatus } from '@/app/api/api_calls'
-
-type CollectionMode = 'sampled' | 'session_timeline' | 'disabled'
+import { updateEventTargetingRule, updateTraceTargetingRule, UpdateEventTargetingRuleApiStatus, UpdateTraceTargetingRuleApiStatus, CollectionMode } from '@/app/api/api_calls'
 
 interface EditDefaultRuleDialogProps {
     isOpen: boolean
@@ -55,6 +53,7 @@ export default function EditDefaultRuleDialog({
         try {
             if (ruleType === 'event') {
                 const result = await updateEventTargetingRule(appId, ruleId, {
+                    name: 'default_behaviour',
                     condition,
                     collection_mode: collectionMode,
                     sampling_rate: collectionMode === 'sampled' ? sampleRate : 0,
@@ -68,6 +67,7 @@ export default function EditDefaultRuleDialog({
                 }
             } else {
                 const result = await updateTraceTargetingRule(appId, ruleId, {
+                    name: 'default_behaviour',
                     condition,
                     collection_mode: collectionMode,
                     sampling_rate: collectionMode === 'sampled' ? sampleRate : 0
@@ -129,8 +129,8 @@ export default function EditDefaultRuleDialog({
                                 type="radio"
                                 name="collectionMode"
                                 value="timeline"
-                                checked={collectionMode === 'session_timeline'}
-                                onChange={() => setCollectionMode('session_timeline')}
+                                checked={collectionMode === 'timeline'}
+                                onChange={() => setCollectionMode('timeline')}
                                 disabled={isSaving}
                                 className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
                             />
diff --git a/frontend/dashboard/app/components/targeting/event_rule_builder.tsx b/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
deleted file mode 100644
index 1dd934c1b..000000000
--- a/frontend/dashboard/app/components/targeting/event_rule_builder.tsx
+++ /dev/null
@@ -1,742 +0,0 @@
-"use client"
-
-import { Button } from '@/app/components/button'
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import {
-    EventTargetingRuleApiStatus,
-    EventTargetingConfigApiStatus,
-    EventTargetingRule,
-    EventTargetingConfigResponse,
-    fetchEventTargetingRuleFromServer,
-    fetchEventTargetingConfigFromServer,
-    createEventTargetingRule,
-    updateEventTargetingRule,
-    CreateEventTargetingRuleApiStatus,
-    UpdateEventTargetingRuleApiStatus,
-    deleteEventTargetingRule,
-    DeleteEventTargetingRuleApiStatus,
-} from '@/app/api/api_calls'
-import LoadingBar from '@/app/components/loading_bar'
-import { toastPositive, toastNegative } from '@/app/utils/use_toast'
-import { EventCondition, AttributeField } from '@/app/utils/cel/conditions'
-import { celToConditions } from '@/app/utils/cel/cel_parser'
-import DropdownSelect, { DropdownSelectType } from '@/app/components/dropdown_select'
-import { eventConditionToCel } from '@/app/utils/cel/cel_generator'
-import RuleBuilderAttributeRow from '@/app/components/targeting/rule_builder_attribute_row'
-import SamplingRateInput from '@/app/components/targeting/sampling_rate_input'
-import DeleteRule from './delete_rule'
-
-interface EventRuleBuilderProps {
-    mode: 'create' | 'edit'
-    appId: string
-    ruleId?: string
-    onCancel: () => void
-    onSave: () => void
-    onDelete: () => void
-}
-
-interface EventRuleState {
-    condition: EventCondition
-    collectionMode: 'sampled' | 'session_timeline' | 'disabled'
-    sampleRate: number
-    take_layout_snapshot: boolean
-    take_screenshot: boolean
-}
-
-const createEventConditionFromConfig = (eventConfig: EventTargetingConfigResponse['events'][number]): EventCondition => {
-    const attrs = (eventConfig.attrs || []).map((attr) => ({
-        id: `${crypto.randomUUID()}`,
-        key: attr.key,
-        type: attr.type,
-        value: attr.type === 'bool' ? false : attr.type === 'number' ? 0 : '',
-        hint: attr.hint,
-        operator: 'eq',
-    }))
-
-    return {
-        id: `${crypto.randomUUID()}`,
-        type: eventConfig.type,
-        attrs,
-        ud_attrs: [],
-        session_attrs: [],
-    }
-}
-
-const createDefaultEventCondition = (config: EventTargetingConfigResponse): EventCondition => {
-    const firstEventConfig = config.events[0]
-    if (!firstEventConfig) {
-        return { id: crypto.randomUUID(), type: '', attrs: [], ud_attrs: [], session_attrs: [] }
-    }
-    return createEventConditionFromConfig(firstEventConfig)
-}
-
-export default function EventRuleBuilder({
-    mode,
-    appId,
-    ruleId,
-    onCancel,
-    onSave,
-    onDelete,
-}: EventRuleBuilderProps) {
-
-    const [apiState, setApiState] = useState({
-        ruleStatus: EventTargetingRuleApiStatus.Loading,
-        configStatus: EventTargetingConfigApiStatus.Loading,
-        ruleData: null as EventTargetingRule | null,
-        config: null as EventTargetingConfigResponse | null,
-    })
-    const [uiState, setUiState] = useState({
-        showDeleteDialog: false,
-        isSubmitting: false,
-        isDeleting: false,
-    })
-    const [ruleState, setRuleState] = useState<EventRuleState | null>(null)
-    const [initialRuleState, setInitialRuleState] = useState<EventRuleState | null>(null)
-
-    const convertToEventRuleState = useCallback(
-        (ruleData: EventTargetingRule | null, configData: EventTargetingConfigResponse): EventRuleState | null => { // <--- Update return type
-            if (ruleData) {
-                // Edit Mode
-                const parsed = celToConditions(ruleData.condition)
-                const parsedCondition = parsed.event?.conditions[0]
-
-                // Fallback if parsing fails
-                if (!parsedCondition) {
-                    return null
-                }
-
-                // Find the config for the event type from the parsed condition
-                const eventConfig = configData.events.find(e => e.type === parsedCondition.type)
-
-                // If event type from rule is no longer valid, fallback
-                if (!eventConfig) {
-                    return null
-                }
-
-                // Create the condition for this event type
-                const templateCondition = createEventConditionFromConfig(eventConfig)
-
-                // Merge the parsed data
-                const mergedAttrs = templateCondition.attrs.map(templateAttr => {
-                    const parsedAttr = parsedCondition.attrs.find(pAttr => pAttr.key === templateAttr.key)
-                    if (parsedAttr) {
-                        return { ...templateAttr, id: parsedAttr.id || templateAttr.id, value: parsedAttr.value, operator: parsedAttr.operator }
-                    }
-                    return templateAttr
-                })
-
-                const finalCondition: EventCondition = {
-                    id: parsedCondition.id || templateCondition.id,
-                    type: parsedCondition.type,
-                    attrs: mergedAttrs,
-                    ud_attrs: parsedCondition.ud_attrs,
-                    session_attrs: parsedCondition.session_attrs,
-                }
-
-                return {
-                    condition: finalCondition,
-                    collectionMode: ruleData.collection_mode,
-                    sampleRate: ruleData.sampling_rate,
-                    take_layout_snapshot: ruleData.take_layout_snapshot,
-                    take_screenshot: ruleData.take_screenshot,
-                }
-
-            } else {
-                return {
-                    condition: createDefaultEventCondition(configData),
-                    collectionMode: 'session_timeline',
-                    sampleRate: 0,
-                    take_layout_snapshot: false,
-                    take_screenshot: false,
-                }
-            }
-        },
-        [createEventConditionFromConfig, createDefaultEventCondition] // Add dependencies
-    )
-
-    const fetchPageData = useCallback(async () => {
-        setApiState(prev => ({
-            ...prev,
-            ruleStatus: EventTargetingRuleApiStatus.Loading,
-            configStatus: EventTargetingConfigApiStatus.Loading,
-        }))
-
-        try {
-            const configPromise = fetchEventTargetingConfigFromServer(appId)
-            const rulePromise = mode === 'edit' && ruleId
-                ? fetchEventTargetingRuleFromServer(appId, ruleId)
-                : Promise.resolve(null)
-
-            const [configResult, ruleResult] = await Promise.all([configPromise, rulePromise])
-
-            if (configResult.status === EventTargetingConfigApiStatus.Error) {
-                setApiState(prev => ({ ...prev, configStatus: EventTargetingConfigApiStatus.Error }))
-                return
-            }
-
-            let ruleData: EventTargetingRule | null = null
-            let ruleApiStatus = EventTargetingRuleApiStatus.Success
-
-            if (mode === 'edit' && ruleResult) {
-                if (ruleResult.status === EventTargetingRuleApiStatus.Error) {
-                    setApiState({
-                        ruleStatus: EventTargetingRuleApiStatus.Error,
-                        configStatus: EventTargetingConfigApiStatus.Success,
-                        ruleData: null,
-                        config: configResult.data,
-                    })
-                    return
-                } else {
-                    ruleData = ruleResult.data
-                }
-            }
-
-            const initial = convertToEventRuleState(ruleData, configResult.data)
-
-            if (!initial) {
-                // Parsing failed, set the rule status to Error
-                setApiState({
-                    ruleStatus: EventTargetingRuleApiStatus.Error,
-                    configStatus: EventTargetingConfigApiStatus.Success,
-                    ruleData: null,
-                    config: configResult.data,
-                })
-                toastNegative("Failed to load rule. Please try again later")
-                return
-            }
-
-            setApiState({
-                ruleStatus: ruleApiStatus,
-                configStatus: EventTargetingConfigApiStatus.Success,
-                ruleData,
-                config: configResult.data,
-            })
-            setInitialRuleState(initial)
-            setRuleState(initial)
-            setUiState(prev => ({ ...prev, showDeleteDialog: false }))
-        } catch (err) {
-            setApiState(prev => ({
-                ...prev,
-                ruleStatus: EventTargetingRuleApiStatus.Error,
-                configStatus: EventTargetingConfigApiStatus.Error,
-            }))
-        }
-    }, [appId, mode, ruleId, convertToEventRuleState])
-
-    useEffect(() => {
-        fetchPageData()
-    }, [fetchPageData])
-
-
-    const isLoading = useMemo(() => {
-        return apiState.ruleStatus === EventTargetingRuleApiStatus.Loading ||
-            apiState.configStatus === EventTargetingConfigApiStatus.Loading
-    }, [apiState.ruleStatus, apiState.configStatus])
-
-    const hasError = useMemo(() => {
-        return apiState.ruleStatus === EventTargetingRuleApiStatus.Error ||
-            apiState.configStatus === EventTargetingConfigApiStatus.Error
-    }, [apiState.ruleStatus, apiState.configStatus])
-
-    const eventTypes = useMemo(() => {
-        return apiState.config?.events?.map(e => e.type) ?? []
-    }, [apiState.config])
-
-    const hasChanges = useCallback(() => {
-        if (mode === 'create') return true
-        return JSON.stringify(initialRuleState) !== JSON.stringify(ruleState)
-    }, [mode, initialRuleState, ruleState])
-
-
-    const updateRuleState = useCallback((updates: Partial<EventRuleState>) => {
-        setRuleState(prev => (prev ? { ...prev, ...updates } : prev))
-    }, [])
-
-    const getAvailableAttrKeys = useCallback((attrType: 'attrs' | 'ud_attrs' | 'session_attrs'): string[] => {
-        if (!apiState.config || !ruleState) return []
-        const currentEventType = ruleState.condition.type
-        if (attrType === 'attrs') {
-            const eventConfig = apiState.config.events?.find(e => e.type === currentEventType)
-            return eventConfig?.attrs?.map((a) => a.key) ?? []
-        } else if (attrType === 'ud_attrs') {
-            return apiState.config?.event_ud_attrs?.map((a) => a.key) ?? []
-        } else {
-            return apiState.config?.session_attrs?.map((a) => a.key) ?? []
-        }
-    }, [apiState.config, ruleState])
-
-    const getCombinedAttrKeys = useCallback(() => {
-        const sessionKeys = getAvailableAttrKeys('session_attrs')
-        const udKeys = getAvailableAttrKeys('ud_attrs')
-        return [...sessionKeys, ...udKeys]
-    }, [getAvailableAttrKeys])
-
-    const getOperatorsForType = useCallback((operatorMapping: Record<string, string[]>, type: string): string[] => {
-        return operatorMapping?.[type] || []
-    }, [])
-
-    const getAttrConfigByKey = useCallback((key: string, attrType: 'attrs' | 'ud_attrs' | 'session_attrs') => {
-        if (!apiState.config || !ruleState) return null
-        const currentEventType = ruleState.condition.type
-        if (attrType === 'attrs') {
-            const eventConfig = apiState.config.events?.find(e => e.type === currentEventType)
-            return eventConfig?.attrs?.find((a) => a.key === key) ?? null
-        } else if (attrType === 'ud_attrs') {
-            return apiState.config.event_ud_attrs?.find((a) => a.key === key) ?? null
-        } else {
-            return apiState.config.session_attrs?.find((a) => a.key === key) ?? null
-        }
-    }, [apiState.config, ruleState])
-
-    const handleAddAttribute = useCallback((attrType: 'ud_attrs' | 'session_attrs') => {
-        if (!ruleState) return
-        const availableKeys = attrType === 'ud_attrs' ? getAvailableAttrKeys('ud_attrs') : getAvailableAttrKeys('session_attrs')
-        if (availableKeys.length === 0) return
-        const firstKey = availableKeys[0]
-        const attrConfig = getAttrConfigByKey(firstKey, attrType)
-
-        const newAttr: AttributeField = {
-            id: `${crypto.randomUUID()}`,
-            key: firstKey,
-            type: attrConfig?.type || 'string',
-            value: attrConfig?.type === 'bool' ? false : attrConfig?.type === 'number' ? 0 : '',
-            hint: attrConfig?.hint,
-            operator: 'eq',
-        }
-
-        const updatedCondition = {
-            ...ruleState.condition,
-            [attrType]: [...ruleState.condition[attrType], newAttr],
-        }
-
-        updateRuleState({ condition: updatedCondition })
-    }, [ruleState, getAvailableAttrKeys, getAttrConfigByKey, updateRuleState])
-
-    const handleUpdateAttr = useCallback((
-        _conditionId: string,
-        attrId: string,
-        field: 'key' | 'type' | 'value' | 'operator',
-        value: any,
-        attrType: 'attrs' | 'ud_attrs' | 'session_attrs'
-    ) => {
-        if (!ruleState) return
-        const attrs = ruleState.condition[attrType]
-        const idx = attrs.findIndex(a => a.id === attrId)
-        if (idx === -1) return
-        const updatedAttrs = [...attrs]
-        const updatedAttr = { ...updatedAttrs[idx] }
-
-        if (field === 'key') {
-            const attrConfig = getAttrConfigByKey(value, attrType)
-            updatedAttr.key = value
-            updatedAttr.type = attrConfig?.type || 'string'
-            updatedAttr.value = attrConfig?.type === 'bool' ? false : attrConfig?.type === 'number' ? 0 : ''
-            updatedAttr.hint = attrConfig?.hint
-        } else {
-            updatedAttr[field] = value
-        }
-
-        updatedAttrs[idx] = updatedAttr
-        const updatedCondition = { ...ruleState.condition, [attrType]: updatedAttrs }
-        updateRuleState({ condition: updatedCondition })
-    }, [ruleState, getAttrConfigByKey, updateRuleState])
-
-    const handleRemoveAttr = useCallback((
-        _conditionId: string,
-        attrId: string,
-        attrType: 'attrs' | 'ud_attrs' | 'session_attrs'
-    ) => {
-        if (!ruleState) return
-        const updatedAttrs = ruleState.condition[attrType].filter(a => a.id !== attrId)
-        const updatedCondition = { ...ruleState.condition, [attrType]: updatedAttrs }
-        updateRuleState({ condition: updatedCondition })
-    }, [ruleState, updateRuleState])
-
-    const handleEventTypeChange = useCallback((newEventType: string) => {
-        if (!apiState.config) return
-        const eventConfig = apiState.config.events?.find(e => e.type === newEventType)
-        if (!eventConfig) return
-
-        const attrs = (eventConfig.attrs || []).map((attr) => ({
-            id: `${crypto.randomUUID()}`,
-            key: attr.key,
-            type: attr.type,
-            value: attr.type === 'bool' ? false : attr.type === 'number' ? 0 : '',
-            hint: attr.hint,
-            operator: 'eq',
-        }))
-
-        const newCondition: EventCondition = {
-            id: `${crypto.randomUUID()}`,
-            type: newEventType,
-            attrs,
-            ud_attrs: [],
-            session_attrs: [],
-        }
-
-        updateRuleState({ condition: newCondition })
-    }, [apiState.config, updateRuleState])
-
-    const hasFilterAttributes = useCallback(() => {
-        return (ruleState?.condition?.ud_attrs?.length ?? 0) > 0 || (ruleState?.condition?.session_attrs?.length ?? 0) > 0
-    }, [ruleState])
-
-
-    const handleSaveChanges = useCallback(async () => {
-        if (!ruleState) return
-        setUiState(prev => ({ ...prev, isSubmitting: true }))
-
-        try {
-            const celCondition = eventConditionToCel(ruleState.condition)
-            if (!celCondition) {
-                setUiState(prev => ({ ...prev, isSubmitting: false }))
-                return
-            }
-
-            const ruleData = {
-                condition: celCondition,
-                collection_mode: ruleState.collectionMode,
-                sampling_rate: ruleState.sampleRate,
-                take_screenshot: ruleState.take_screenshot,
-                take_layout_snapshot: ruleState.take_layout_snapshot,
-            }
-
-            if (mode === 'create') {
-                const result = await createEventTargetingRule(appId, ruleData)
-                if (result.status === CreateEventTargetingRuleApiStatus.Success) {
-                    toastPositive('Event rule created successfully')
-                    onSave()
-                } else {
-                    toastNegative('Failed to create event rule', result.error || 'Unknown error')
-                }
-            } else {
-                const result = await updateEventTargetingRule(appId, ruleId!, ruleData)
-                if (result.status === UpdateEventTargetingRuleApiStatus.Success) {
-                    toastPositive('Event rule updated successfully')
-                    onSave()
-                } else {
-                    toastNegative('Failed to update event rule', result.error || 'Unknown error')
-                }
-            }
-        } catch (err) {
-            toastNegative('An error occurred', 'Please try again')
-        } finally {
-            setUiState(prev => ({ ...prev, isSubmitting: false }))
-        }
-    }, [ruleState, mode, appId, ruleId, onSave])
-
-    const openDeleteDialog = useCallback(() => {
-        setUiState(prev => ({ ...prev, showDeleteDialog: true }))
-    }, [])
-
-    const closeDeleteDialog = useCallback(() => {
-        setUiState(prev => ({ ...prev, showDeleteDialog: false }))
-    }, [])
-
-    const handleDeleteRule = useCallback(async () => {
-        if (!ruleId) return
-        setUiState(prev => ({ ...prev, showDeleteDialog: false, isDeleting: true }))
-        try {
-            const result = await deleteEventTargetingRule(appId, ruleId)
-            if (result.status === DeleteEventTargetingRuleApiStatus.Success) {
-                toastPositive('Event rule deleted successfully')
-                onDelete()
-            } else {
-                toastNegative('Failed to delete event rule, please try again later')
-            }
-        } catch (err) {
-            toastNegative('An error occurred', 'Please try again')
-        } finally {
-            setUiState(prev => ({ ...prev, isDeleting: false }))
-        }
-    }, [appId, ruleId, onDelete])
-
-
-    if (isLoading) {
-        return (
-            <div className="flex flex-col selection:bg-yellow-200/75 items-start">
-                <div className="flex flex-row items-center justify-between w-full">
-                    <p className="font-display text-4xl max-w-6xl">{mode === 'create' ? 'Create Event Rule' : 'Edit Event Rule'}</p>
-                </div>
-                <div className="py-4" />
-                <div className="py-1 w-full visible">
-                    <LoadingBar />
-                </div>
-            </div>
-        )
-    }
-
-    if (hasError) {
-        return (
-            <div className="flex flex-col selection:bg-yellow-200/75 items-start">
-                <div className="flex flex-row items-center justify-between w-full">
-                    <p className="font-display text-4xl max-w-6xl">{mode === 'create' ? 'Create Event Rule' : 'Edit Event Rule'}</p>
-                </div>
-                <div className="py-4" />
-                <div className="w-full flex flex-col items-center">
-                    <p className="text-normal font-body">Error loading rule. Please try again or go back.</p>
-                    <div className="py-4" />
-                    <div className="flex gap-3">
-                        <Button variant="outline" onClick={fetchPageData} className="font-display border border-black">Retry</Button>
-                        <Button variant="outline" onClick={onCancel} className="font-display border border-black">Go Back</Button>
-                    </div>
-                </div>
-            </div>
-        )
-    }
-
-    function RuleConfigurationSection() {
-        return (
-            <div className="w-full flex flex-col">
-                {/* When */}
-                <div className="mb-6">
-                    <div className="flex items-center gap-3 mb-4">
-                        <span className="font-display text-xl">When</span>
-
-                        <DropdownSelect
-                            type={DropdownSelectType.SingleString}
-                            title="Select event type"
-                            items={eventTypes}
-                            initialSelected={ruleState?.condition.type || ''}
-                            onChangeSelected={(selected) => handleEventTypeChange(selected as string)}
-                        />
-
-                        <span className="font-display text-xl">event occurs</span>
-                    </div>
-
-                    {/* Event Attributes */}
-                    {ruleState?.condition.attrs && ruleState.condition.attrs.length > 0 && (
-                        <div className="mt-3 space-y-2">
-                            {ruleState.condition.attrs.map(attr => (
-                                <RuleBuilderAttributeRow
-                                    key={attr.id}
-                                    attr={attr}
-                                    conditionId={ruleState.condition.id}
-                                    attrType="attrs"
-                                    attrKeys={getAvailableAttrKeys('attrs')}
-                                    operatorTypesMapping={apiState.config?.operator_types}
-                                    getOperatorsForType={getOperatorsForType}
-                                    onUpdateAttr={handleUpdateAttr}
-                                    showDeleteButton={false}
-                                />
-                            ))}
-                        </div>
-                    )}
-
-                    {/* Add Filter CTA (only show if event supports ud_attrs and no filters yet) */}
-                    {(() => {
-                        const currentEventType = ruleState?.condition.type
-                        const eventConfig = apiState.config?.events?.find(e => e.type === currentEventType)
-                        const hasUdAttrs = !!eventConfig?.has_ud_attrs
-                        const hasCombinedAttrs = hasFilterAttributes()
-                        if (hasUdAttrs && !hasCombinedAttrs) {
-                            return (
-                                <Button
-                                    variant="ghost"
-                                    onClick={() => {
-                                        const sessionKeys = getAvailableAttrKeys('session_attrs')
-                                        if (sessionKeys.length > 0) handleAddAttribute('session_attrs')
-                                        else handleAddAttribute('ud_attrs')
-                                    }}
-                                    className="text-sm font-body px-2 py-1 h-auto -ml-2 mt-2 hover:bg-yellow-200 focus:bg-yellow-200"
-                                >
-                                    + Filter by attribute
-                                </Button>
-                            )
-                        }
-                        return null
-                    })()}
-
-                    {/* Session & UD attrs (if any) */}
-                    {hasFilterAttributes() && (() => {
-                        const condition = ruleState!.condition
-                        return (
-                            <div className="mt-3 space-y-2">
-                                {condition.session_attrs.map(attr => (
-                                    <RuleBuilderAttributeRow
-                                        key={attr.id}
-                                        attr={attr}
-                                        conditionId={condition.id}
-                                        attrType="session_attrs"
-                                        attrKeys={getCombinedAttrKeys()}
-                                        operatorTypesMapping={apiState.config?.operator_types}
-                                        getOperatorsForType={getOperatorsForType}
-                                        onUpdateAttr={handleUpdateAttr}
-                                        onRemoveAttr={handleRemoveAttr}
-                                        showDeleteButton={true}
-                                    />
-                                ))}
-                                {condition.ud_attrs.map(attr => (
-                                    <RuleBuilderAttributeRow
-                                        key={attr.id}
-                                        attr={attr}
-                                        conditionId={condition.id}
-                                        attrType="ud_attrs"
-                                        attrKeys={getCombinedAttrKeys()}
-                                        operatorTypesMapping={apiState.config?.operator_types}
-                                        getOperatorsForType={getOperatorsForType}
-                                        onUpdateAttr={handleUpdateAttr}
-                                        onRemoveAttr={handleRemoveAttr}
-                                        showDeleteButton={true}
-                                    />
-                                ))}
-                                <Button
-                                    variant="ghost"
-                                    onClick={() => {
-                                        const sessionKeys = getAvailableAttrKeys('session_attrs')
-                                        if (sessionKeys.length > 0) handleAddAttribute('session_attrs')
-                                        else handleAddAttribute('ud_attrs')
-                                    }}
-                                    className="text-sm font-body px-2 py-1 h-auto -ml-2 mt-1 hover:bg-yellow-200 focus:bg-yellow-200"
-                                >
-                                    + Filter by attribute
-                                </Button>
-                            </div>
-                        )
-                    })()}
-                </div>
-
-                <div className="py-4" />
-
-                {/* Then */}
-                <div className="mb-6">
-                    <p className="font-display text-xl mb-4">Then</p>
-
-                    {/* Collection */}
-                    <div className="mb-4">
-                        <p className="font-display text-gray-500 mb-3">Collection</p>
-                        <div className="space-y-3 ml-4">
-                            <label className="flex items-center gap-3 cursor-pointer h-10">
-                                <input
-                                    type="radio"
-                                    name="collectionMode"
-                                    value="sampled"
-                                    checked={ruleState?.collectionMode === 'sampled'}
-                                    onChange={() => updateRuleState({ collectionMode: 'sampled' })}
-                                    className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                                />
-                                <SamplingRateInput
-                                    value={ruleState?.sampleRate || 100}
-                                    onChange={(value) => updateRuleState({ sampleRate: value })}
-                                    disabled={ruleState?.collectionMode !== 'sampled'}
-                                    type="events"
-                                />
-                            </label>
-
-                            <label className="flex items-center gap-3 cursor-pointer h-10">
-                                <input
-                                    type="radio"
-                                    name="collectionMode"
-                                    value="session_timeline"
-                                    checked={ruleState?.collectionMode === 'session_timeline'}
-                                    onChange={() => updateRuleState({ collectionMode: 'session_timeline' })}
-                                    className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                                />
-                                <span className="text-sm font-body">Collect with timeline only</span>
-                            </label>
-
-                            <label className="flex items-center gap-3 cursor-pointer h-10">
-                                <input
-                                    type="radio"
-                                    name="collectionMode"
-                                    value="disabled"
-                                    checked={ruleState?.collectionMode === 'disabled'}
-                                    onChange={() => updateRuleState({ collectionMode: 'disabled' })}
-                                    className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                                />
-                                <span className="text-sm font-body">Do not collect</span>
-                            </label>
-                        </div>
-                    </div>
-
-                    {/* Attachments */}
-                    <div className="mb-4">
-                        <p className="font-display text-gray-500 mb-3">Attachments</p>
-                        <div className="space-y-3 ml-4">
-                            <label className="flex items-center gap-3 cursor-pointer h-10">
-                                <input
-                                    type="radio"
-                                    name="attachmentMode"
-                                    value="layout_snapshot"
-                                    checked={ruleState?.take_layout_snapshot === true && ruleState?.take_screenshot === false}
-                                    onChange={() => updateRuleState({ take_layout_snapshot: true, take_screenshot: false })}
-                                    className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                                />
-                                <span className="text-sm font-body">Take layout snapshot</span>
-                            </label>
-
-                            <label className="flex items-center gap-3 cursor-pointer h-10">
-                                <input
-                                    type="radio"
-                                    name="attachmentMode"
-                                    value="screenshot"
-                                    checked={ruleState?.take_screenshot === true && ruleState?.take_layout_snapshot === false}
-                                    onChange={() => updateRuleState({ take_screenshot: true, take_layout_snapshot: false })}
-                                    className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                                />
-                                <span className="text-sm font-body">Take screenshot</span>
-                            </label>
-
-                            <label className="flex items-center gap-3 cursor-pointer h-10">
-                                <input
-                                    type="radio"
-                                    name="attachmentMode"
-                                    value="none"
-                                    checked={ruleState?.take_screenshot === false && ruleState?.take_layout_snapshot === false}
-                                    onChange={() => updateRuleState({ take_screenshot: false, take_layout_snapshot: false })}
-                                    className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                                />
-                                <span className="text-sm font-body">No attachments</span>
-                            </label>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        )
-    }
-
-
-    return (
-        <div className="flex flex-col selection:bg-yellow-200/75 items-start">
-            <DeleteRule
-                open={uiState.showDeleteDialog}
-                onConfirm={handleDeleteRule}
-                onCancel={closeDeleteDialog}
-                isDeleting={uiState.isDeleting}
-            />
-
-            <div className="flex flex-row items-center justify-between w-full">
-                <p className="font-display text-4xl max-w-6xl">{mode === 'create' ? 'Create Event Rule' : 'Edit Event Rule'}</p>
-                <Button
-                    type="button"
-                    variant="outline"
-                    onClick={handleSaveChanges}
-                    className="font-display border border-black"
-                    disabled={!hasChanges()}
-                    loading={uiState.isSubmitting}
-                >
-                    {mode === 'create' ? 'Publish Rule' : 'Save Changes'}
-                </Button>
-            </div>
-
-            <div className="py-4" />
-
-            <RuleConfigurationSection />
-
-            <div className="py-4" />
-
-            {mode === 'edit' ? (
-                <div className="w-full flex justify-center">
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        onClick={openDeleteDialog}
-                        className="font-display text-red-600 hover:text-white hover:bg-red-600"
-                    >
-                        Delete Rule
-                    </Button>
-                </div>
-            ) : <div />}
-        </div>
-    )
-}
diff --git a/frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx b/frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx
deleted file mode 100644
index 473e1660d..000000000
--- a/frontend/dashboard/app/components/targeting/event_trace_targeting_rules_table.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-"use client"
-
-import { EventTargetingRule, TraceTargetingRule, CollectionMode, EventTargetingAttachmentConfig } from '@/app/api/api_calls'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/app/components/table'
-import { formatDateToHumanReadableDate, formatDateToHumanReadableTime } from '@/app/utils/time_utils'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/tooltip'
-import { Info } from 'lucide-react'
-
-const getCollectionConfigDisplay = (collectionMode: CollectionMode, samplingRate?: number): string => {
-    switch (collectionMode) {
-        case 'sampled':
-            return `Collect all at ${samplingRate}% sample rate`
-        case 'session_timeline':
-            return 'Collect with session timeline only'
-        case 'disabled':
-            return 'Do not collect'
-        default:
-            return 'Unknown'
-    }
-}
-
-const getAttachmentConfigDisplay = (attachmentConfig?: EventTargetingAttachmentConfig): string => {
-    if (!attachmentConfig || attachmentConfig === 'none') {
-        return ''
-    } else if (attachmentConfig === 'layout_snapshot') {
-        return 'With layout snapshot'
-    } else if (attachmentConfig === 'screenshot') {
-        return 'With screenshot'
-    }
-    return attachmentConfig
-}
-
-type RuleFilter = EventTargetingRule | TraceTargetingRule
-
-interface RulesTableProps {
-    rules: RuleFilter[]
-    onRuleClick: (rule: RuleFilter) => void
-}
-
-export default function RulesTable({ rules, onRuleClick }: RulesTableProps) {
-    return (
-        <>
-            <div className="py-6" />
-            <div className="w-full flex items-center gap-2">
-                <p className="font-display text-gray-500">Overrides</p>
-                <Tooltip>
-                    <TooltipTrigger asChild>
-                        <Info className="w-4 h-4 text-gray-400 cursor-help" />
-                    </TooltipTrigger>
-                    <TooltipContent side="right" align="start" className="font-display text-sm text-white fill-neutral-800 bg-neutral-800 whitespace-nowrap">
-                        <div className="p-2">
-                            <p>When a rule's condition matches, it overrides the default behavior.</p>
-                        </div>
-                    </TooltipContent>
-                </Tooltip>
-            </div>
-            <div className="py-2" />
-
-            {rules.length === 0 ? (
-                <div className="text-sm font-body text-gray-500">
-                    No override rules configured
-                </div>
-            ) : (
-                <div className="overflow-hidden">
-                    <div className="overflow-x-auto">
-                        <Table className="font-display">
-                            <TableHeader className="sticky top-0 bg-white z-10">
-                                <TableRow>
-                                    <TableHead className="w-[52%]">Rules</TableHead>
-                                    <TableHead className="w-[24%] text-center">Updated At</TableHead>
-                                    <TableHead className="w-[24%] text-center">Updated By</TableHead>
-                                </TableRow>
-                            </TableHeader>
-                        </Table>
-                    </div>
-                    <div className="max-h-[400px] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-transparent hover:[&::-webkit-scrollbar-thumb]:bg-gray-300 focus-within:[&::-webkit-scrollbar-thumb]:bg-gray-300">
-                        <Table className="font-display">
-                            <TableBody>
-                                {rules.map((dataFilter, idx) => (
-                                    <TableRow
-                                        key={`${idx}-${dataFilter.id}`}
-                                        className="font-body cursor-pointer hover:bg-yellow-200 focus-visible:border-yellow-200 select-none"
-                                        onClick={() => onRuleClick(dataFilter)}
-                                    >
-                                        <TableCell className="w-[52%] p-4">
-                                            <p className='truncate select-none font-mono text-sm'>{dataFilter.condition}</p>
-                                            <div className='py-1' />
-                                            <p className='text-xs truncate text-gray-500 select-none'>{getCollectionConfigDisplay(dataFilter.collection_mode, dataFilter.sampling_rate)}</p>
-                                            <p className='text-xs truncate text-gray-500 select-none'>{getAttachmentConfigDisplay('attachment_config' in dataFilter ? dataFilter.attachment_config : undefined)}</p>
-                                        </TableCell>
-                                        <TableCell className="w-[24%] text-center p-4">
-                                            <p className='truncate select-none'>{formatDateToHumanReadableDate(dataFilter.updated_at)}</p>
-                                            <div className='py-1' />
-                                            <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(dataFilter.updated_at)}</p>
-                                        </TableCell>
-                                        <TableCell className="w-[24%] text-center p-4">
-                                            <p className='truncate select-none'>{dataFilter.updated_by}</p>
-                                        </TableCell>
-                                    </TableRow>
-                                ))}
-                            </TableBody>
-                        </Table>
-                    </div>
-                </div>
-            )}
-        </>
-    )
-}
diff --git a/frontend/dashboard/app/components/targeting/rule_builder.tsx b/frontend/dashboard/app/components/targeting/rule_builder.tsx
new file mode 100644
index 000000000..66f5cf6e8
--- /dev/null
+++ b/frontend/dashboard/app/components/targeting/rule_builder.tsx
@@ -0,0 +1,1442 @@
+"use client"
+
+import { createEventTargetingRule, CreateEventTargetingRuleApiStatus, createTraceTargetingRule, CreateTraceTargetingRuleApiStatus, EventTargetingConfigResponse, EventTargetingRule, fetchEventTargetingConfigFromServer, fetchEventTargetingRuleFromServer, fetchTraceTargetingConfigFromServer, fetchTraceTargetingRuleFromServer, TraceTargetingConfigResponse, TraceTargetingRule, updateEventTargetingRule, UpdateEventTargetingRuleApiStatus, updateTraceTargetingRule, UpdateTraceTargetingRuleApiStatus, EventTargetingConfig, TraceTargetingConfig, DeleteEventTargetingRuleApiStatus, deleteEventTargetingRule, deleteTraceTargetingRule, DeleteTraceTargetingRuleApiStatus, CollectionMode, fetchSessionTargetingConfigFromServer, fetchSessionTargetingRuleFromServer, SessionTargetingConfigResponse, SessionTargetingRule, deleteSessionTargetingRule, DeleteSessionTargetingRuleApiStatus, createSessionTargetingRule, CreateSessionTargetingRuleApiStatus, updateSessionTargetingRule, UpdateSessionTargetingRuleApiStatus } from "@/app/api/api_calls"
+import { conditionsToCel } from "@/app/utils/cel/cel_generator"
+import { celToConditions, ParsedConditions } from "@/app/utils/cel/cel_parser"
+import { AttributeField, EventCondition, TraceCondition } from "@/app/utils/cel/conditions"
+import { toastNegative, toastPositive } from "@/app/utils/use_toast"
+import { useEffect, useState } from "react"
+import { Button } from "../button"
+import DropdownSelect, { DropdownSelectType } from "../dropdown_select"
+import LoadingSpinner from "../loading_spinner"
+import SamplingRateInput from "./sampling_rate_input"
+import DangerConfirmationDialog from "../danger_confirmation_dialog"
+import AttributeBuilder from "./attribute_builder"
+import { Plus } from "lucide-react"
+
+enum PageState {
+    Loading,
+    Error,
+    Success
+}
+
+interface RuleBuilderProps {
+    type: 'event' | 'trace' | 'timeline'
+    mode: 'create' | 'edit'
+    appId: string
+    ruleId?: string
+    onCancel: () => void
+    onSave: () => void
+    onDelete: () => void
+}
+
+interface RuleState {
+    name: string,
+    conditionType: 'event' | 'trace',
+    condition: {
+        id: string
+        eventType?: string
+        spanName?: string
+        attributes: AttributeField[]
+    }
+    collectionMode: CollectionMode
+    sampleRate: number
+    take_layout_snapshot?: boolean
+    take_screenshot?: boolean
+}
+
+export default function RuleBuilder({
+    type,
+    mode,
+    appId,
+    ruleId,
+    onCancel,
+    onSave,
+    onDelete,
+}: RuleBuilderProps) {
+    const [uiState, setUiState] = useState({
+        showDeleteDialog: false,
+        pageState: PageState.Loading,
+        saving: false,
+        deleting: false,
+        ruleNameError: false,
+    })
+
+    const [ruleState, setRuleState] = useState<RuleState | null>(null)
+
+    const [initialRuleState, setInitialRuleState] = useState<RuleState | null>(null)
+
+    const [config, setConfig] = useState<EventTargetingConfigResponse | TraceTargetingConfigResponse | TraceTargetingConfigResponse | null>(null)
+
+    const createEmptyEventRuleState = (config: EventTargetingConfigResponse): RuleState | null => {
+        const firstEvent = config.events[0]
+
+        if (!firstEvent) {
+            return null
+        }
+
+        const type = firstEvent.type
+
+        return {
+            name: '',
+            collectionMode: 'timeline',
+            condition: {
+                id: crypto.randomUUID(),
+                eventType: type,
+                attributes: []
+            },
+            conditionType: 'event',
+            sampleRate: 100,
+            take_layout_snapshot: false,
+            take_screenshot: false,
+        }
+    }
+
+    const convertToEventRuleState = (ruleData: EventTargetingRule): RuleState | null => {
+        const parsed = celToConditions(ruleData.condition)
+        const eventCondition = parsed.event?.conditions[0]
+        if (!eventCondition) {
+            console.error("Failed to parse event rule to UI state")
+            return null
+        }
+
+        const attributes: AttributeField[] = [
+            ...(eventCondition.attrs || []).map(attr => ({ ...attr, source: 'fixed' as const })),
+            ...(eventCondition.session_attrs || []).map(attr => ({ ...attr, source: 'session' as const })),
+            ...(eventCondition.ud_attrs || []).map(attr => ({ ...attr, source: 'ud' as const })),
+        ]
+
+        return {
+            name: ruleData.name,
+            collectionMode: ruleData.collection_mode,
+            conditionType: 'event',
+            condition: {
+                id: eventCondition.id,
+                eventType: eventCondition.type,
+                attributes: attributes
+            },
+            sampleRate: ruleData.sampling_rate,
+            take_layout_snapshot: ruleData.take_layout_snapshot,
+            take_screenshot: ruleData.take_screenshot,
+        }
+    }
+
+    const createEmptyTraceRuleState = (config: TraceTargetingConfigResponse): RuleState | null => {
+        if (!config.trace_config || config.trace_config.length === 0) {
+            console.error("No traces available in config")
+            return null
+        }
+
+        const firstTrace = config.trace_config[0]
+
+        if (!firstTrace) {
+            return null
+        }
+
+        const name = firstTrace.name
+
+        return {
+            name: '',
+            collectionMode: 'timeline',
+            conditionType: 'trace',
+            condition: {
+                id: crypto.randomUUID(),
+                spanName: name,
+                attributes: []
+            },
+            sampleRate: 100,
+            take_layout_snapshot: false,
+            take_screenshot: false,
+        }
+    }
+    const convertToTraceRuleState = (ruleData: TraceTargetingRule): RuleState | null => {
+        const parsed = celToConditions(ruleData.condition)
+        const traceCondition = parsed.trace?.conditions[0]
+
+        if (!traceCondition) {
+            console.error("Failed to parse trace rule to UI state")
+            return null
+        }
+
+        const attributes: AttributeField[] = [
+            ...(traceCondition.ud_attrs || []).map(attr => ({ ...attr, source: 'ud' as const })),
+            ...(traceCondition.session_attrs || []).map(attr => ({ ...attr, source: 'session' as const })),
+        ]
+
+        return {
+            name: ruleData.name,
+            collectionMode: ruleData.collection_mode,
+            conditionType: 'trace',
+            condition: {
+                id: traceCondition.id,
+                spanName: traceCondition.spanName,
+                attributes: attributes
+            },
+            sampleRate: ruleData.sampling_rate,
+        }
+    }
+
+    const fetchTracePageData = async () => {
+        setUiState((prev) => ({
+            ...prev,
+            pageState: PageState.Loading
+        }))
+
+        try {
+            const configPromise = fetchTraceTargetingConfigFromServer(appId)
+            const rulePromise = mode === 'edit' && ruleId
+                ? fetchTraceTargetingRuleFromServer(appId, ruleId)
+                : Promise.resolve(null)
+
+            const [configResult, ruleResult] = await Promise.all([configPromise, rulePromise])
+
+            if (!configResult) {
+                console.log("No config result")
+                setUiState((prev) => ({
+                    ...prev,
+                    pageState: PageState.Error
+                }))
+                return
+            }
+
+            if (mode === 'edit' && !ruleResult) {
+                setUiState((prev) => ({
+                    ...prev,
+                    pageState: PageState.Error
+                }))
+                return
+            }
+
+            const ruleState = mode === 'edit'
+                ? convertToTraceRuleState(ruleResult!.data)
+                : createEmptyTraceRuleState(configResult.data)
+
+
+            if (!ruleState) {
+                setUiState((prev) => ({
+                    ...prev,
+                    pageState: PageState.Error
+                }))
+                return
+            }
+
+            setConfig(configResult.data)
+            setInitialRuleState(ruleState)
+            setRuleState(ruleState)
+            setUiState((prev) => ({
+                ...prev,
+                pageState: PageState.Success
+            }))
+        } catch (err) {
+            console.log(err)
+            setUiState((prev) => ({
+                ...prev,
+                pageState: PageState.Error
+            }))
+        }
+    }
+
+    const createEmptyTimelineRuleState = (config: SessionTargetingConfigResponse): RuleState | null => {
+        // Default to event type
+        const firstEvent = config.events[0]
+        if (!firstEvent || !('type' in firstEvent)) {
+            return null
+        }
+
+        const eventConfig = firstEvent as EventTargetingConfig
+
+        return {
+            name: '',
+            condition: {
+                id: crypto.randomUUID(),
+                eventType: eventConfig.type,
+                attributes: [],
+            },
+            conditionType: 'event',
+            collectionMode: 'sampled',
+            sampleRate: 100,
+        }
+    }
+
+    const convertToTimelineRuleState = (ruleData: SessionTargetingRule): RuleState | null => {
+        const parsed = celToConditions(ruleData.condition)
+
+        // Check if it's an event-based rule
+        if (parsed.event?.conditions[0]) {
+            const eventCondition = parsed.event.conditions[0]
+            const attributes: AttributeField[] = [
+                ...(eventCondition.attrs || []).map(attr => ({ ...attr, source: 'fixed' as const })),
+                ...(eventCondition.session_attrs || []).map(attr => ({ ...attr, source: 'session' as const })),
+                ...(eventCondition.ud_attrs || []).map(attr => ({ ...attr, source: 'ud' as const })),
+            ]
+
+            return {
+                name: ruleData.name,
+                condition: {
+                    id: eventCondition.id,
+                    eventType: eventCondition.type,
+                    attributes: attributes
+                },
+                collectionMode: 'sampled',
+                conditionType: 'event',
+                sampleRate: ruleData.sampling_rate,
+            }
+        }
+
+        // Check if it's a trace-based rule
+        if (parsed.trace?.conditions[0]) {
+            const traceCondition = parsed.trace.conditions[0]
+            const attributes: AttributeField[] = [
+                ...(traceCondition.ud_attrs || []).map(attr => ({ ...attr, source: 'ud' as const })),
+                ...(traceCondition.session_attrs || []).map(attr => ({ ...attr, source: 'session' as const })),
+            ]
+
+            return {
+                name: ruleData.name,
+                condition: {
+                    id: traceCondition.id,
+                    spanName: traceCondition.spanName,
+                    attributes: attributes
+                },
+                conditionType: 'trace',
+                collectionMode: 'sampled',
+                sampleRate: ruleData.sampling_rate,
+            }
+        }
+
+        console.error("Failed to parse session timeline rule to UI state")
+        return null
+    }
+
+    const fetchEventPageData = async () => {
+        setUiState((prev) => ({
+            ...prev,
+            pageState: PageState.Loading
+        }))
+
+        try {
+            const configPromise = fetchEventTargetingConfigFromServer(appId)
+            const rulePromise = mode === 'edit' && ruleId
+                ? fetchEventTargetingRuleFromServer(appId, ruleId)
+                : Promise.resolve(null)
+
+            const [configResult, ruleResult] = await Promise.all([configPromise, rulePromise])
+
+            if (!configResult) {
+                setUiState((prev) => ({
+                    ...prev,
+                    pageState: PageState.Error
+                }))
+                return
+            }
+
+            if (mode === 'edit' && !ruleResult) {
+                setUiState((prev) => ({
+                    ...prev,
+                    pageState: PageState.Error
+                }))
+                return
+            }
+
+            const ruleState = mode === 'edit'
+                ? convertToEventRuleState(ruleResult!.data)
+                : createEmptyEventRuleState(configResult.data)
+
+
+            if (!ruleState) {
+                setUiState((prev) => ({
+                    ...prev,
+                    pageState: PageState.Error
+                }))
+                return
+            }
+
+            setConfig(configResult.data)
+            setInitialRuleState(ruleState)
+            setRuleState(ruleState)
+            setUiState((prev) => ({
+                ...prev,
+                pageState: PageState.Success
+            }))
+        } catch (err) {
+            setUiState((prev) => ({
+                ...prev,
+                pageState: PageState.Error
+            }))
+        }
+    }
+
+    const fetchTimelinePageData = async () => {
+        setUiState((prev) => ({
+            ...prev,
+            pageState: PageState.Loading
+        }))
+
+        try {
+            const configPromise = fetchSessionTargetingConfigFromServer(appId)
+            const rulePromise = mode === 'edit' && ruleId
+                ? fetchSessionTargetingRuleFromServer(appId, ruleId)
+                : Promise.resolve(null)
+
+            const [configResult, ruleResult] = await Promise.all([configPromise, rulePromise])
+
+            if (!configResult) {
+                console.log("No config result")
+                setUiState((prev) => ({
+                    ...prev,
+                    pageState: PageState.Error
+                }))
+                return
+            }
+
+            if (mode === 'edit' && !ruleResult) {
+                setUiState((prev) => ({
+                    ...prev,
+                    pageState: PageState.Error
+                }))
+                return
+            }
+
+            const ruleState = mode === 'edit'
+                ? convertToTimelineRuleState(ruleResult!.data)
+                : createEmptyTimelineRuleState(configResult.data)
+
+            if (!ruleState) {
+                setUiState((prev) => ({
+                    ...prev,
+                    pageState: PageState.Error
+                }))
+                return
+            }
+
+            setConfig(configResult.data)
+            setInitialRuleState(ruleState)
+            setRuleState(ruleState)
+            setUiState((prev) => ({
+                ...prev,
+                pageState: PageState.Success
+            }))
+        } catch (err) {
+            console.log(err)
+            setUiState((prev) => ({
+                ...prev,
+                pageState: PageState.Error
+            }))
+        }
+    }
+
+    const handleSave = async () => {
+        if (!ruleState) {
+            console.error("Failed to save rule as ruleState was null")
+            return
+        }
+
+        if (!ruleState.name || ruleState.name.trim() === '') {
+            toastNegative("Please enter a rule name")
+            setUiState((prev) => ({
+                ...prev,
+                ruleNameError: true
+            }))
+            return
+        }
+
+        setUiState((prev) => ({
+            ...prev,
+            saving: true
+        }))
+
+        if (type === 'event') {
+            const attributes = ruleState.condition.attributes
+            const eventCondition: EventCondition = {
+                id: ruleState.condition.id,
+                type: ruleState.condition.eventType!,
+                attrs: attributes.filter(a => a.source === 'fixed'),
+                session_attrs: attributes.filter(a => a.source === 'session'),
+                ud_attrs: attributes.filter(a => a.source === 'ud'),
+            }
+            const parsedConditions: ParsedConditions = {
+                event: {
+                    conditions: [eventCondition],
+                    operators: []
+                },
+            }
+
+            const celConditions = conditionsToCel(parsedConditions)
+
+            if (!celConditions) {
+                console.error("Failed to generate CEL from UI state")
+                setUiState((prev) => ({
+                    ...prev,
+                    saving: false
+                }))
+                return
+            }
+
+            const ruleData = {
+                name: ruleState.name,
+                condition: celConditions,
+                collection_mode: ruleState.collectionMode,
+                sampling_rate: ruleState.sampleRate,
+                take_screenshot: ruleState.take_screenshot ?? false,
+                take_layout_snapshot: ruleState.take_layout_snapshot ?? false,
+            }
+
+            if (mode === 'edit') {
+                const result = await updateEventTargetingRule(appId, ruleId!, ruleData)
+                if (result.status === UpdateEventTargetingRuleApiStatus.Success) {
+                    toastPositive("Successfully updated rule")
+                    onSave()
+                } else {
+                    toastNegative("Failed to save rule, please try again later")
+                }
+            } else {
+                const result = await createEventTargetingRule(appId, ruleData)
+                if (result.status === CreateEventTargetingRuleApiStatus.Success) {
+                    toastPositive("Successfully created rule")
+                    onSave()
+                } else {
+                    toastNegative("Failed to save rule, please try again later")
+                }
+            }
+        } else if (type === 'trace') {
+            const attributes = ruleState.condition.attributes
+            const traceCondition: TraceCondition = {
+                id: ruleState.condition.id,
+                spanName: ruleState.condition.spanName!,
+                operator: 'eq',
+                ud_attrs: attributes.filter(a => a.source === 'ud'),
+                session_attrs: attributes.filter(a => a.source === 'session'),
+            }
+
+            const parsedConditions: ParsedConditions = {
+                trace: {
+                    conditions: [traceCondition],
+                    operators: []
+                },
+            }
+
+            const celConditions = conditionsToCel(parsedConditions)
+
+            if (!celConditions) {
+                console.log("Failed to generate CEL from UI state")
+                setUiState((prev) => ({
+                    ...prev,
+                    saving: false
+                }))
+                return
+            }
+
+            const ruleData = {
+                name: ruleState.name,
+                condition: celConditions,
+                collection_mode: ruleState.collectionMode,
+                sampling_rate: ruleState.sampleRate,
+            }
+
+            if (mode === 'edit') {
+                const result = await updateTraceTargetingRule(appId, ruleId!, ruleData)
+                if (result.status === UpdateTraceTargetingRuleApiStatus.Success) {
+                    toastPositive("Successfully updated rule")
+                    onSave()
+                } else {
+                    toastNegative("Failed to save rule, please try again later")
+                }
+            } else {
+                const result = await createTraceTargetingRule(appId, ruleData)
+                if (result.status === CreateTraceTargetingRuleApiStatus.Success) {
+                    toastPositive("Successfully created rule")
+                    onSave()
+                } else {
+                    toastNegative("Failed to save rule, please try again later")
+                }
+            }
+        } else if (type === 'timeline') {
+            let celConditions: string | null = null
+
+            if (ruleState.conditionType === 'event') {
+                const attributes = ruleState.condition.attributes
+                const eventCondition: EventCondition = {
+                    id: ruleState.condition.id,
+                    type: ruleState.condition.eventType!,
+                    attrs: attributes.filter(a => a.source === 'fixed'),
+                    session_attrs: attributes.filter(a => a.source === 'session'),
+                    ud_attrs: attributes.filter(a => a.source === 'ud'),
+                }
+                const parsedConditions: ParsedConditions = {
+                    event: {
+                        conditions: [eventCondition],
+                        operators: []
+                    },
+                }
+                celConditions = conditionsToCel(parsedConditions)
+            } else {
+                const attributes = ruleState.condition.attributes
+                const traceCondition: TraceCondition = {
+                    id: ruleState.condition.id,
+                    spanName: ruleState.condition.spanName!,
+                    operator: 'eq',
+                    ud_attrs: attributes.filter(a => a.source === 'ud'),
+                    session_attrs: attributes.filter(a => a.source === 'session'),
+                }
+                const parsedConditions: ParsedConditions = {
+                    trace: {
+                        conditions: [traceCondition],
+                        operators: []
+                    },
+                }
+                celConditions = conditionsToCel(parsedConditions)
+            }
+
+            if (!celConditions) {
+                console.error("Failed to generate CEL from UI state")
+                setUiState((prev) => ({
+                    ...prev,
+                    saving: false
+                }))
+                return
+            }
+
+            const ruleData = {
+                name: ruleState.name,
+                condition: celConditions,
+                sampling_rate: ruleState.sampleRate,
+            }
+
+            if (mode === 'edit') {
+                const result = await updateSessionTargetingRule(appId, ruleId!, ruleData)
+                if (result.status === UpdateSessionTargetingRuleApiStatus.Success) {
+                    toastPositive("Successfully updated rule")
+                    onSave()
+                } else {
+                    toastNegative("Failed to save rule, please try again later")
+                }
+            } else {
+                const result = await createSessionTargetingRule(appId, ruleData)
+                if (result.status === CreateSessionTargetingRuleApiStatus.Success) {
+                    toastPositive("Successfully created rule")
+                    onSave()
+                } else {
+                    toastNegative("Failed to save rule, please try again later")
+                }
+            }
+        }
+
+        setUiState((prev) => ({
+            ...prev,
+            saving: false
+        }))
+    }
+
+    const shouldEnableSaveButton = (() => {
+        if (uiState.pageState != PageState.Success) {
+            return false
+        }
+
+        if (mode === 'create') {
+            return true
+        }
+
+        return JSON.stringify(initialRuleState) !== JSON.stringify(ruleState)
+    })()
+
+    const updateRuleState = (updates: Partial<RuleState>) => {
+        setRuleState(prev => (prev ? { ...prev, ...updates } : prev))
+    }
+
+    const handleEventTypeChange = async (type: string) => {
+        setRuleState((prev) => {
+            if (!prev) return prev;
+
+            return {
+                ...prev,
+                condition: {
+                    ...prev.condition,
+                    eventType: type,
+                    attributes: []
+                }
+            };
+        });
+    };
+
+    const handleConditionTypeChange = (newType: 'event' | 'trace') => {
+        if (!config) return
+        const sessionConfig = config as SessionTargetingConfigResponse
+
+        if (newType === 'event') {
+            const firstEvent = sessionConfig.events[0]
+            if (!firstEvent || !('type' in firstEvent)) return
+
+            const eventConfig = firstEvent as EventTargetingConfig
+
+            setRuleState((prev) => {
+                if (!prev) return prev
+                return {
+                    ...prev,
+                    conditionType: 'event',
+                    condition: {
+                        id: crypto.randomUUID(),
+                        eventType: eventConfig.type,
+                        attributes: []
+                    }
+                }
+            })
+        } else {
+            const firstTrace = sessionConfig.trace_config[0]
+            if (!firstTrace || !('name' in firstTrace)) return
+
+            const traceConfig = firstTrace as TraceTargetingConfig
+
+            setRuleState((prev) => {
+                if (!prev) return prev
+                return {
+                    ...prev,
+                    conditionType: 'trace',
+                    condition: {
+                        id: crypto.randomUUID(),
+                        spanName: traceConfig.name,
+                        attributes: []
+                    }
+                }
+            })
+        }
+    }
+
+    const handleTraceTypeChange = async (name: string) => {
+        setRuleState((prev) => {
+            if (!prev) return prev;
+
+            return {
+                ...prev,
+                condition: {
+                    ...prev.condition,
+                    spanName: name
+                }
+            };
+        });
+    };
+
+    const closeDeleteDialog = (() => {
+        setUiState(prev => ({ ...prev, showDeleteDialog: false }))
+    })
+
+    const openDeleteDialog = (() => {
+        setUiState(prev => ({ ...prev, showDeleteDialog: true }))
+    })
+
+    const handleDeleteRule = async () => {
+        if (!ruleId) return
+        setUiState(prev => ({ ...prev, showDeleteDialog: false, isDeleting: true }))
+        try {
+
+            switch (type) {
+                case 'event':
+                    const eventResult = await deleteEventTargetingRule(appId, ruleId)
+                    if (eventResult.status === DeleteEventTargetingRuleApiStatus.Success) {
+                        toastPositive('Event rule deleted successfully')
+                        onDelete()
+                    } else {
+                        toastNegative('Failed to delete event rule, please try again later')
+                    }
+                    break;
+                case 'trace':
+                    const traceResult = await deleteTraceTargetingRule(appId, ruleId)
+                    if (traceResult.status === DeleteTraceTargetingRuleApiStatus.Success) {
+                        toastPositive('Trace rule deleted successfully')
+                        onDelete()
+                    } else {
+                        toastNegative('Failed to delete trace rule, please try again later')
+                    }
+                case 'timeline':
+                    const timelineResult = await deleteSessionTargetingRule(appId, ruleId)
+                    if (timelineResult.status === DeleteSessionTargetingRuleApiStatus.Success) {
+                        toastPositive('Session timeline rule deleted successfully')
+                        onDelete()
+                    } else {
+                        toastNegative('Failed to delete rule, please try again later')
+                    }
+            }
+        } catch (err) {
+            toastNegative('An error occurred', 'Please try again')
+        } finally {
+            setUiState(prev => ({ ...prev, isDeleting: false }))
+        }
+    }
+
+    const renderEventWhen = () => {
+        if (!ruleState || !config) return null
+
+        const eventConfig = config as EventTargetingConfigResponse
+        const eventTypes = eventConfig.events
+            .filter((e): e is EventTargetingConfig => 'type' in e)
+            .map(e => e.type)
+
+        const eventTypeDropdown = (
+            <DropdownSelect
+                type={DropdownSelectType.SingleString}
+                title="Select event type"
+                items={eventTypes}
+                initialSelected={ruleState.condition.eventType ?? ''}
+                onChangeSelected={(selected) => handleEventTypeChange(selected as string)}
+            />
+        )
+
+        return (
+            <div className="flex flex-wrap items-center gap-3">
+                <span className="font-display text-xl">When</span>
+                {eventTypeDropdown}
+                <span className="font-display text-xl">event occurs</span>
+                <Button
+                    type="button"
+                    variant="ghost"
+                    onClick={addAttribute}
+                    className="flex items-center gap-1 text-sm self-start"
+                >
+                    <Plus className="w-4 h-4" />
+                    Add Filter
+                </Button>
+            </div>
+        )
+    }
+
+    const renderTraceWhen = () => {
+        if (!ruleState || !config) return null
+
+        const traceConfig = config as TraceTargetingConfigResponse
+        const traceNames = traceConfig.trace_config
+            .filter((t): t is TraceTargetingConfig => 'name' in t)
+            .map(t => t.name)
+
+        const traceNameDropdown = (
+            <DropdownSelect
+                type={DropdownSelectType.SingleString}
+                title="Select trace name"
+                items={traceNames}
+                initialSelected={ruleState.condition.spanName ?? ''}
+                onChangeSelected={(selected) => handleTraceTypeChange(selected as string)}
+            />
+        )
+
+        return (
+            <div className="flex flex-wrap items-center gap-3">
+                <span className="font-display text-xl">When</span>
+                {traceNameDropdown}
+                <span className="font-display text-xl">trace ends</span>
+                <Button
+                    type="button"
+                    variant="ghost"
+                    onClick={addAttribute}
+                    className="flex items-center gap-1 text-sm self-start"
+                >
+                    <Plus className="w-4 h-4" />
+                    Add Filter
+                </Button>
+            </div>
+        )
+    }
+
+    const renderTimelineWhen = () => {
+        if (!ruleState || !config) return null
+
+        const sessionConfig = config as SessionTargetingConfigResponse
+        const effectiveType = ruleState.conditionType
+
+        const conditionTypeDropdown = (
+            <DropdownSelect
+                type={DropdownSelectType.SingleString}
+                title="Select condition type"
+                items={['event', 'trace']}
+                initialSelected={ruleState.conditionType}
+                onChangeSelected={(selected) => handleConditionTypeChange(selected as 'event' | 'trace')}
+            />
+        )
+
+        if (effectiveType === 'event') {
+            const eventTypes = sessionConfig.events
+                .filter((e): e is EventTargetingConfig => 'type' in e)
+                .map(e => e.type)
+
+            const eventTypeDropdown = (
+                <DropdownSelect
+                    type={DropdownSelectType.SingleString}
+                    title="Select event type"
+                    items={eventTypes}
+                    initialSelected={ruleState.condition.eventType ?? ''}
+                    onChangeSelected={(selected) => handleEventTypeChange(selected as string)}
+                />
+            )
+
+            return (
+                <div className="flex flex-wrap items-center gap-3">
+                    <span className="font-display text-xl">When</span>
+                    {conditionTypeDropdown}
+                    <span className="font-display text-xl">with type</span>
+                    {eventTypeDropdown}
+                    <span className="font-display text-xl">occurs</span>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        onClick={addAttribute}
+                        className="flex items-center gap-1 text-sm self-start"
+                    >
+                        <Plus className="w-4 h-4" />
+                        Add Filter
+                    </Button>
+                </div>
+            )
+        } else {
+            const traceNames = sessionConfig.trace_config
+                .filter((t): t is TraceTargetingConfig => 'name' in t)
+                .map(t => t.name)
+
+            const traceNameDropdown = (
+                <DropdownSelect
+                    type={DropdownSelectType.SingleString}
+                    title="Select trace name"
+                    items={traceNames}
+                    initialSelected={ruleState.condition.spanName ?? ''}
+                    onChangeSelected={(selected) => handleTraceTypeChange(selected as string)}
+                />
+            )
+
+            return (
+                <div className="flex flex-wrap items-center gap-3">
+                    <span className="font-display text-xl">When</span>
+                    {conditionTypeDropdown}
+                    <span className="font-display text-xl">with name</span>
+                    {traceNameDropdown}
+                    <span className="font-display text-xl">ends</span>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        onClick={addAttribute}
+                        className="flex items-center gap-1 text-sm self-start"
+                    >
+                        <Plus className="w-4 h-4" />
+                        Add Filter
+                    </Button>
+                </div>
+            )
+        }
+    }
+
+    const renderThen = () => {
+        if (!ruleState) return null
+
+        return (
+            <div>
+                <p className="font-display text-xl mb-4">Then</p>
+
+                {type === 'timeline' ? (
+                    <div className="mb-4">
+                        <div className="flex items-center gap-3">
+                            <SamplingRateInput
+                                value={ruleState.sampleRate || 100}
+                                onChange={(value) => updateRuleState({ sampleRate: value })}
+                                disabled={false}
+                                type="timeline"
+                            />
+                        </div>
+                    </div>
+                ) : (
+                    <>
+                        {/* Collection */}
+                        <div className="mb-4">
+                            <p className="font-display text-gray-500 mb-3">Collection</p>
+                            <div className="space-y-3 ml-4">
+                                <label className="flex items-center gap-3 cursor-pointer h-10">
+                                    <input
+                                        type="radio"
+                                        name="collectionMode"
+                                        value="sampled"
+                                        checked={ruleState.collectionMode === 'sampled'}
+                                        onChange={() => updateRuleState({ collectionMode: 'sampled' })}
+                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                    />
+                                    <SamplingRateInput
+                                        value={ruleState.sampleRate || 100}
+                                        onChange={(value) => updateRuleState({ sampleRate: value })}
+                                        disabled={ruleState.collectionMode !== 'sampled'}
+                                        type={type === 'event' ? 'event' : 'trace'}
+                                    />
+                                </label>
+
+                                <label className="flex items-center gap-3 cursor-pointer h-10">
+                                    <input
+                                        type="radio"
+                                        name="collectionMode"
+                                        value="timeline"
+                                        checked={ruleState.collectionMode === 'timeline'}
+                                        onChange={() => updateRuleState({ collectionMode: 'timeline' })}
+                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                    />
+                                    <span className="text-sm font-body">Collect with timeline only</span>
+                                </label>
+
+                                <label className="flex items-center gap-3 cursor-pointer h-10">
+                                    <input
+                                        type="radio"
+                                        name="collectionMode"
+                                        value="disabled"
+                                        checked={ruleState.collectionMode === 'disabled'}
+                                        onChange={() => updateRuleState({ collectionMode: 'disabled' })}
+                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                    />
+                                    <span className="text-sm font-body">Do not collect</span>
+                                </label>
+                            </div>
+                        </div>
+
+                        {/* Attachments */}
+                        {type === 'event' && (
+                            <div className="mb-4">
+                                <p className="font-display text-gray-500 mb-3">Attachments</p>
+                                <div className="space-y-3 ml-4">
+                                    <label className={`flex items-center gap-3 h-10 ${ruleState.collectionMode === 'disabled' ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}>
+                                        <input
+                                            type="radio"
+                                            name="attachmentMode"
+                                            value="layout_snapshot"
+                                            checked={ruleState.take_layout_snapshot === true && ruleState.take_screenshot === false}
+                                            onChange={() => updateRuleState({ take_layout_snapshot: true, take_screenshot: false })}
+                                            disabled={ruleState.collectionMode === 'disabled'}
+                                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0 disabled:cursor-not-allowed"
+                                        />
+                                        <span className="text-sm font-body">Take layout snapshot</span>
+                                    </label>
+
+                                    <label className={`flex items-center gap-3 h-10 ${ruleState.collectionMode === 'disabled' ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}>
+                                        <input
+                                            type="radio"
+                                            name="attachmentMode"
+                                            value="screenshot"
+                                            checked={ruleState.take_screenshot === true && ruleState.take_layout_snapshot === false}
+                                            onChange={() => updateRuleState({ take_screenshot: true, take_layout_snapshot: false })}
+                                            disabled={ruleState.collectionMode === 'disabled'}
+                                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0 disabled:cursor-not-allowed"
+                                        />
+                                        <span className="text-sm font-body">Take screenshot</span>
+                                    </label>
+
+                                    <label className={`flex items-center gap-3 h-10 ${ruleState.collectionMode === 'disabled' ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}>
+                                        <input
+                                            type="radio"
+                                            name="attachmentMode"
+                                            value="none"
+                                            checked={ruleState.take_screenshot === false && ruleState.take_layout_snapshot === false}
+                                            onChange={() => updateRuleState({ take_screenshot: false, take_layout_snapshot: false })}
+                                            disabled={ruleState.collectionMode === 'disabled'}
+                                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0 disabled:cursor-not-allowed"
+                                        />
+                                        <span className="text-sm font-body">No attachments</span>
+                                    </label>
+                                </div>
+                            </div>
+                        )}
+                    </>
+                )}
+            </div>
+        )
+    }
+
+    const getOperatorsForType = (type: string) => {
+        if (!config) return []
+
+        switch (type) {
+            case 'float64':
+                return config?.operator_types.float64
+            case 'int64':
+                return config?.operator_types.int64
+            case 'bool':
+                return config?.operator_types.bool
+            default:
+                return config?.operator_types.string
+        }
+    };
+
+    const getDefaultValue = (type: string): string | number | boolean => {
+        if (type === 'bool') return false
+        if (type === 'int64' || type === 'float64') return 0
+        return ''
+    }
+
+    const addAttribute = () => {
+        if (!ruleState || !config) {
+            return
+        }
+
+        // For timeline type, check the conditionType; for others, use the type directly
+        const effectiveType = type === 'timeline' ? ruleState.conditionType : type
+
+        if (effectiveType === 'event') {
+            const eventConfig = config as EventTargetingConfigResponse | SessionTargetingConfigResponse
+            const eventDef = 'events' in eventConfig
+                ? eventConfig.events.find((e) => 'type' in e && e.type === ruleState.condition.eventType) as EventTargetingConfig | undefined
+                : undefined
+            const attr = eventDef?.attrs?.at(0) ?? eventConfig.session_attrs?.at(0)
+
+            if (!attr) {
+                console.error("Failed to add attribute, no attribute found")
+                return
+            }
+
+            let source: 'fixed' | 'session' | 'ud'
+            if (eventDef?.attrs?.some(a => a.key === attr.key)) {
+                source = 'fixed'
+            } else if (eventConfig.session_attrs?.some(a => a.key === attr.key)) {
+                source = 'session'
+            } else {
+                source = 'ud'
+            }
+
+            const newEventAttr: AttributeField & { source: 'fixed' | 'session' | 'ud' } = {
+                id: crypto.randomUUID(),
+                key: attr.key,
+                type: attr.type,
+                hint: attr.hint,
+                value: getDefaultValue(attr.type),
+                operator: getOperatorsForType(attr.type)[0] || 'eq',
+                source: source,
+            }
+
+            setRuleState((prev) => {
+                if (!prev) return prev
+                return {
+                    ...prev,
+                    condition: {
+                        ...prev.condition,
+                        attributes: [...prev.condition.attributes, newEventAttr]
+                    }
+                }
+            })
+        } else {
+            // trace type
+            const traceConfig = config as TraceTargetingConfigResponse | SessionTargetingConfigResponse
+            const traceAttr = traceConfig.session_attrs?.at(0)
+
+            if (!traceAttr) {
+                console.error("Failed to add trace attribute, no attribute found")
+                return
+            }
+
+            const newTraceAttr: AttributeField & { source: 'fixed' | 'session' | 'ud' } = {
+                id: crypto.randomUUID(),
+                key: traceAttr.key,
+                type: traceAttr.type,
+                hint: traceAttr.hint,
+                value: getDefaultValue(traceAttr.type),
+                operator: getOperatorsForType(traceAttr.type)[0] || 'eq',
+                source: 'session',
+            }
+
+            setRuleState((prev) => {
+                if (!prev) return prev
+                return {
+                    ...prev,
+                    condition: {
+                        ...prev.condition,
+                        attributes: [...prev.condition.attributes, newTraceAttr]
+                    }
+                }
+            })
+        }
+    }
+
+    const updateAttributeKey = (id: string, newKey: string, newSource: 'fixed' | 'session' | 'ud') => {
+        if (!ruleState || !config) return
+        let attrDef;
+        if (type === 'event') {
+            const eventConfig = config as EventTargetingConfigResponse
+            const eventDef = eventConfig.events.find(e => e.type === ruleState.condition.eventType)
+
+            if (newSource === 'fixed') {
+                attrDef = eventDef?.attrs?.find(a => a.key === newKey)
+            } else if (newSource === 'session') {
+                attrDef = eventConfig.session_attrs?.find(a => a.key === newKey)
+            } else {
+                attrDef = eventConfig.event_ud_attrs?.find(a => a.key === newKey)
+            }
+        } else {
+            const traceConfig = config as TraceTargetingConfigResponse
+            if (newSource === 'session') {
+                attrDef = traceConfig.session_attrs?.find(a => a.key === newKey)
+            }
+        }
+
+        if (!attrDef) {
+            console.error("Failed to find attribute definition for new key")
+            return
+        }
+
+        setRuleState((prev) => {
+            if (!prev) return prev
+            return {
+                ...prev,
+                condition: {
+                    ...prev.condition,
+                    attributes: prev.condition.attributes.map(attr =>
+                        attr.id === id ? {
+                            ...attr,
+                            key: newKey,
+                            source: newSource,
+                            type: attrDef.type,
+                            hint: attrDef.hint,
+                            value: getDefaultValue(attrDef.type),
+                            operator: getOperatorsForType(attrDef.type)[0] || 'eq',
+                        } : attr
+                    )
+                }
+            }
+        })
+    }
+
+    const updateAttributeValue = (id: string, newValue: string | number | boolean) => {
+        setRuleState((prev) => {
+            if (!prev) return prev
+            return {
+                ...prev,
+                condition: {
+                    ...prev.condition,
+                    attributes: prev.condition.attributes.map(attr =>
+                        attr.id === id ? { ...attr, value: newValue } : attr
+                    )
+                }
+            }
+        })
+    }
+
+    const updateAttributeOperator = (id: string, newOperator: string) => {
+        setRuleState((prev) => {
+            if (!prev) return prev
+            return {
+                ...prev,
+                condition: {
+                    ...prev.condition,
+                    attributes: prev.condition.attributes.map(attr =>
+                        attr.id === id ? { ...attr, operator: newOperator } : attr
+                    )
+                }
+            }
+        })
+    }
+
+    const deleteAttribute = (id: string) => {
+        setRuleState((prev) => {
+            if (!prev) return prev
+            return {
+                ...prev,
+                condition: {
+                    ...prev.condition,
+                    attributes: prev.condition.attributes.filter(attr => attr.id !== id)
+                }
+            }
+        })
+    }
+
+    const handleRuleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setRuleState((prev) => {
+            if (!prev) return null;
+            return {
+                ...prev,
+                name: event.target.value,
+            }
+        })
+
+        setUiState((prev) => ({
+            ...prev,
+            ruleNameError: false
+        }))
+    }
+
+    const renderAttributes = () => {
+        if (!ruleState || !config) return null
+
+        // For timeline type, check the conditionType; for others, use the type directly
+        const effectiveType = type === 'timeline' ? ruleState.conditionType : type
+
+        const allAttributeKeys: Record<string, string> = {}
+
+        if (effectiveType === 'event') {
+            const eventConfig = config as EventTargetingConfigResponse | SessionTargetingConfigResponse
+            const eventDef = 'events' in eventConfig
+                ? eventConfig.events.find((e) => 'type' in e && e.type === ruleState.condition.eventType) as EventTargetingConfig | undefined
+                : undefined
+
+            const fixedAttrKeys = eventDef?.attrs?.map(a => a.key) ?? []
+            const sessionAttrKeys = eventConfig.session_attrs?.map(a => a.key) ?? []
+            const udAttrKeys = eventDef?.has_ud_attrs && 'event_ud_attrs' in eventConfig
+                ? eventConfig.event_ud_attrs?.map(a => a.key) ?? []
+                : []
+
+            for (const key of fixedAttrKeys) {
+                allAttributeKeys[key] = 'fixed'
+            }
+            for (const key of sessionAttrKeys) {
+                allAttributeKeys[key] = 'session'
+            }
+            for (const key of udAttrKeys) {
+                allAttributeKeys[key] = 'ud'
+            }
+        } else {
+            // trace type
+            const traceConfig = config as TraceTargetingConfigResponse | SessionTargetingConfigResponse
+            const sessionAttrKeys = traceConfig.session_attrs?.map(a => a.key) ?? []
+            const udAttrKeys = 'trace_ud_attrs' in traceConfig
+                ? traceConfig.trace_ud_attrs?.map(a => a.key) ?? []
+                : []
+
+            for (const key of sessionAttrKeys) {
+                allAttributeKeys[key] = 'session'
+            }
+            for (const key of udAttrKeys) {
+                allAttributeKeys[key] = 'ud'
+            }
+        }
+
+        return (
+            <div className="flex flex-col gap-3">
+                {ruleState.condition.attributes.map(attr => (
+                    <AttributeBuilder
+                        key={attr.id}
+                        attribute={attr}
+                        attributeKeys={allAttributeKeys}
+                        operators={getOperatorsForType(attr.type)}
+                        onUpdateKey={(id, newKey, source) => {
+                            updateAttributeKey(id, newKey, source as 'fixed' | 'session' | 'ud')
+                        }}
+                        onUpdateValue={(id, newValue) => {
+                            updateAttributeValue(id, newValue)
+                        }}
+                        onUpdateOperator={(id, newOperator) => {
+                            updateAttributeOperator(id, newOperator)
+                        }}
+                        onDelete={id => {
+                            deleteAttribute(id)
+                        }}
+                        allowDelete
+                    />
+                ))}
+            </div>
+        )
+    }
+
+    const pageHeading = (() => {
+        switch (type) {
+            case 'event':
+                return mode === 'create' ? 'Create Event Rule' : 'Edit Event Rule'
+            case 'trace':
+                return mode === 'create' ? 'Create Trace Rule' : 'Edit Trace Rule'
+            case 'timeline':
+                return mode === 'create' ? 'Create Session Timeline Rule' : 'Edit Session Timeline Rule'
+        }
+    })()
+
+    useEffect(() => {
+        if (type == 'event') {
+            fetchEventPageData()
+        } else if (type === 'trace') {
+            fetchTracePageData()
+        } else if (type === 'timeline') {
+            fetchTimelinePageData()
+        }
+    }, [type, appId, mode, ruleId])
+
+
+    return (
+        <div>
+            {/* Heading & save button */}
+            <div className="flex flex-row items-center justify-between w-full">
+                <p className="font-display text-4xl max-w-6xl">{pageHeading}</p>
+                <Button
+                    type="button"
+                    variant="outline"
+                    onClick={handleSave}
+                    className="font-display border border-black"
+                    disabled={!shouldEnableSaveButton}
+                    loading={uiState.saving}
+                >
+                    {mode === 'create' ? 'Publish Rule' : 'Save Changes'}
+                </Button>
+            </div>
+
+            <div className="py-6" />
+
+            {/* Loading state */}
+            {uiState.pageState == PageState.Loading && (
+                <div className="flex flex-col selection:bg-yellow-200/75 items-start">
+                    <div className="py-1 w-full visible">
+                        <LoadingSpinner />
+                    </div>
+                </div>
+            )}
+
+            {/* Error state */}
+            {uiState.pageState == PageState.Error && (
+                <div className="flex flex-col selection:bg-yellow-200/75 items-start">
+                    <div className="w-full flex flex-col items-center">
+                        <p className="text-normal font-body">Error loading rule. Please try again or go back.</p>
+                        <div className="py-4" />
+                        <div className="flex gap-3">
+                            <Button variant="outline" onClick={type == 'event' ? fetchEventPageData : fetchTracePageData} className="font-display border border-black">Retry</Button>
+                            <Button variant="outline" onClick={onCancel} className="font-display border border-black">Go Back</Button>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* Main content */}
+            {uiState.pageState == PageState.Success && (
+                <div className="flex flex-col gap-4 w-full">
+                    {type === 'event' && renderEventWhen()}
+                    {type === 'trace' && renderTraceWhen()}
+                    {type === 'timeline' && renderTimelineWhen()}
+
+                    <div className="flex flex-col gap-3">
+                        {renderAttributes()}
+                    </div>
+
+                    <div className="py-2" />
+
+                    {renderThen()}
+
+                    <div className='py-2' />
+                    <p className="font-display text-xl max-w-6xl">Rule Name</p>
+                    <input
+                        type="text"
+                        placeholder="Enter a rule name"
+                        maxLength={64}
+                        value={ruleState?.name}
+                        onChange={handleRuleNameChange}
+                        className={`w-96 border rounded-md outline-hidden text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 mt-4 font-body disabled:opacity-50 disabled:cursor-not-allowed ${uiState.ruleNameError ? 'border-red-500' : 'border-black'}`}
+                    />
+                    {uiState.ruleNameError && (
+                        <p className="text-red-600 text-sm ml-1">Rule name is required</p>
+                    )}
+
+                    <div className="py-6" />
+
+                    {mode === 'edit' ? (
+                        <div className="w-full flex justify-center">
+                            <Button
+                                type="button"
+                                variant="ghost"
+                                onClick={openDeleteDialog}
+                                className="font-display text-red-600 hover:text-white hover:bg-red-600"
+                            >
+                                Delete Rule
+                            </Button>
+                        </div>
+                    ) : <div />}
+
+                    <DangerConfirmationDialog
+                        body="Do you want to delete this rule? This action cannot be undone."
+                        open={uiState.showDeleteDialog}
+                        affirmativeText={uiState.deleting ? "Deleting…" : "Delete Rule"}
+                        cancelText="Cancel"
+                        onAffirmativeAction={handleDeleteRule}
+                        onCancelAction={closeDeleteDialog}
+                    />
+                </div>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/frontend/dashboard/app/components/targeting/rule_builder_attribute_row.tsx b/frontend/dashboard/app/components/targeting/rule_builder_attribute_row.tsx
deleted file mode 100644
index ea945a9b2..000000000
--- a/frontend/dashboard/app/components/targeting/rule_builder_attribute_row.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-"use client"
-
-import DropdownSelect, { DropdownSelectType } from '@/app/components/dropdown_select'
-import { Button } from '@/app/components/button'
-import { X } from 'lucide-react'
-import { useState, useEffect } from 'react'
-
-type AttrType = 'attrs' | 'ud_attrs' | 'session_attrs'
-
-const getTypeDisplayName = (type: string): string => {
-    const typeMap: { [key: string]: string } = {
-        float64: 'decimal',
-        int64: 'number',
-        number: 'number',
-        string: 'text',
-    }
-    return typeMap[type] || type
-}
-
-const RuleBuilderAttributeRow = ({
-    attr,
-    conditionId,
-    attrType,
-    attrKeys,
-    operatorTypesMapping,
-    getOperatorsForType,
-    onUpdateAttr,
-    onRemoveAttr,
-    showDeleteButton = true,
-}: {
-    attr: {
-        id: string
-        key: string
-        type: string
-        value: string | boolean | number
-        operator?: string
-        hasError?: boolean
-        errorMessage?: string
-        hint?: string
-    }
-    conditionId: string
-    attrType: AttrType
-    attrKeys: string[]
-    operatorTypesMapping: any
-    getOperatorsForType: (mapping: any, type: string) => string[]
-    onUpdateAttr: (
-        conditionId: string,
-        attrId: string,
-        field: 'key' | 'type' | 'value' | 'operator',
-        value: any,
-        attrType: AttrType
-    ) => void
-    onRemoveAttr?: (conditionId: string, attrId: string, attrType: AttrType) => void
-    showDeleteButton?: boolean
-}) => {
-    const operatorTypes = getOperatorsForType(operatorTypesMapping, attr.type)
-
-    // Local state for value to prevent re-renders while typing
-    const [localValue, setLocalValue] = useState(attr.value)
-
-    // Sync local value if parent updates attr.value externally
-    useEffect(() => {
-        setLocalValue(attr.value)
-    }, [attr.value])
-
-    const handleValueChange = (newValue: string | boolean | number) => {
-        onUpdateAttr(conditionId, attr.id, 'value', newValue, attrType)
-    }
-
-    return (
-        <div className={`flex items-center group ${attr.hasError ? 'mb-8' : ''}`}>
-            {/* Attribute Key Dropdown */}
-            <div className="flex-[35] mr-3 min-w-0">
-                <DropdownSelect
-                    type={DropdownSelectType.SingleString}
-                    title="Attributes"
-                    items={attrKeys}
-                    initialSelected={attr.key}
-                    onChangeSelected={(selected) => {
-                        onUpdateAttr(conditionId, attr.id, 'key', selected as string, attrType)
-                    }}
-                    buttonClassName="flex justify-between font-display border border-black w-full select-none"
-                />
-            </div>
-
-            {/* Operator Dropdown */}
-            <div className="flex-[15] mr-3">
-                <DropdownSelect
-                    type={DropdownSelectType.SingleString}
-                    title="Condition"
-                    items={operatorTypes}
-                    initialSelected={attr.operator || operatorTypes[0] || 'eq'}
-                    onChangeSelected={(selected) => {
-                        onUpdateAttr(conditionId, attr.id, 'operator', selected as string, attrType)
-                    }}
-                    buttonClassName="flex justify-between font-display border border-black w-full select-none"
-                />
-            </div>
-
-            {/* Value section */}
-            <div className="flex-[35] mr-3">
-                {attr.type === 'bool' ? (
-                    <DropdownSelect
-                        type={DropdownSelectType.SingleString}
-                        title="Value"
-                        items={['true', 'false']}
-                        initialSelected={attr.value ? 'true' : 'false'}
-                        onChangeSelected={(selected) => {
-                            handleValueChange((selected as string) === 'true')
-                        }}
-                        buttonClassName="flex justify-between font-display border border-black w-full select-none"
-                    />
-                ) : (
-                    <div className="relative">
-                        <input
-                            id={`attr-value-${attr.id}`}
-                            type={
-                                attr.type === 'number' ||
-                                attr.type === 'int64' ||
-                                attr.type === 'float64'
-                                    ? 'number'
-                                    : 'text'
-                            }
-                            placeholder={
-                                attr.hint
-                                    ? attr.hint
-                                    : `Enter ${getTypeDisplayName(attr.type)} value`
-                            }
-                            value={localValue as string | number}
-                            onChange={(e) => setLocalValue(e.target.value)} // only local update
-                            onBlur={(e) => {
-                                const raw = e.target.value
-                                const value =
-                                    attr.type === 'number' ||
-                                    attr.type === 'int64' ||
-                                    attr.type === 'float64'
-                                        ? raw === ''
-                                            ? ''
-                                            : Number(raw)
-                                        : raw
-                                handleValueChange(value)
-                            }}
-                            className={`w-full border rounded-md outline-hidden text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 font-body placeholder:text-neutral-400 ${
-                                attr.hasError ? 'border-red-500' : 'border-black'
-                            }`}
-                        />
-                        {attr.hasError && attr.errorMessage && (
-                            <p className="absolute top-full left-0 w-full text-red-500 text-xs mt-1 ml-1">
-                                {attr.errorMessage}
-                            </p>
-                        )}
-                    </div>
-                )}
-            </div>
-
-            {/* Remove Attribute Button */}
-            <div className="flex justify-start flex-[15]">
-                {showDeleteButton && onRemoveAttr ? (
-                    <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => onRemoveAttr(conditionId, attr.id, attrType)}
-                        className="h-8 w-8 p-0 hover:bg-yellow-200 focus:bg-yellow-200 focus:opacity-100 flex-shrink-0
-                       opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-                    >
-                        <X className="h-4 w-4" />
-                    </Button>
-                ) : (
-                    <div className="h-8 w-8"></div>
-                )}
-            </div>
-        </div>
-    )
-}
-
-export default RuleBuilderAttributeRow
diff --git a/frontend/dashboard/app/components/targeting/rules_table.tsx b/frontend/dashboard/app/components/targeting/rules_table.tsx
new file mode 100644
index 000000000..f4e351ae3
--- /dev/null
+++ b/frontend/dashboard/app/components/targeting/rules_table.tsx
@@ -0,0 +1,170 @@
+"use client"
+
+import { EventTargetingRule, TraceTargetingRule, SessionTargetingRule, CollectionMode } from '@/app/api/api_calls'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/app/components/table'
+import { formatDateToHumanReadableDate, formatDateToHumanReadableTime } from '@/app/utils/time_utils'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/tooltip'
+import { Info } from 'lucide-react'
+
+const getCollectionConfigDisplay = (collectionMode: CollectionMode, samplingRate?: number): string => {
+    switch (collectionMode) {
+        case 'sampled':
+            return `${samplingRate}% sampling rate`
+        case 'timeline':
+            return 'With session timeline only'
+        case 'disabled':
+            return 'Do not collect'
+        default:
+            return 'Unknown'
+    }
+}
+
+const getAttachmentDisplay = (takeScreenshot: boolean, takeLayoutSnapshot: boolean): string => {
+    const attachments: string[] = []
+
+    if (takeScreenshot) {
+        attachments.push('take screenshot')
+    }
+
+    if (takeLayoutSnapshot) {
+        attachments.push('take layout snapshot')
+    }
+
+    return attachments.length > 0 ? attachments.join(', ') : ''
+}
+
+const getSamplingRateDisplay = (samplingRate: number): string => {
+    return `${samplingRate}% sampling rate`
+}
+
+type Rule = EventTargetingRule | TraceTargetingRule | SessionTargetingRule
+
+interface RulesTableProps {
+    rules: Rule[]
+    tableType: 'session' | 'event' | 'trace'
+    onRuleClick: (rule: Rule) => void
+    showOverridesHeader?: boolean
+}
+
+export default function RulesTable({ rules, tableType, onRuleClick, showOverridesHeader = true }: RulesTableProps) {
+    const renderCollectionMode = (rule: Rule) => {
+        switch (tableType) {
+            case 'session':
+                const sessionRule = rule as SessionTargetingRule
+                return <p className='text-xs truncate select-none text-gray-500'>{getSamplingRateDisplay(sessionRule.sampling_rate)}</p>
+
+            case 'event':
+                const eventRule = rule as EventTargetingRule
+                const collectionDisplay = getCollectionConfigDisplay(eventRule.collection_mode, eventRule.sampling_rate)
+                const attachmentDisplay = getAttachmentDisplay(eventRule.take_screenshot, eventRule.take_layout_snapshot)
+                const fullDisplay = attachmentDisplay ? `${collectionDisplay}, ${attachmentDisplay}` : collectionDisplay
+
+                return (
+                    <>
+                        <p className='text-xs truncate select-none text-gray-500'>
+                            {fullDisplay}
+                        </p>
+                    </>
+                )
+
+            case 'trace':
+                const traceRule = rule as TraceTargetingRule
+                return (
+                    <p className='text-xs truncate select-none text-gray-500'>
+                        {getCollectionConfigDisplay(traceRule.collection_mode, traceRule.sampling_rate)}
+                    </p>
+                )
+        }
+    }
+
+    return (
+        <>
+            {showOverridesHeader && (
+                <>
+                    <div className="py-6" />
+                    <div className="w-full flex items-center gap-2">
+                        <p className="font-display text-gray-500">Overrides</p>
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <Info className="w-4 h-4 text-gray-400 cursor-help" />
+                            </TooltipTrigger>
+                            <TooltipContent side="right" align="start" className="font-display text-sm text-white fill-neutral-800 bg-neutral-800 whitespace-nowrap">
+                                <div className="p-2">
+                                    <p>When a rule's condition matches, it overrides the default behavior.</p>
+                                </div>
+                            </TooltipContent>
+                        </Tooltip>
+                    </div>
+                    <div className="py-2" />
+                </>
+            )}
+
+            {rules.length === 0 ? (
+                <div className="text-sm font-body text-gray-500">
+                    No override rules configured
+                </div>
+            ) : (
+                <div className="overflow-hidden">
+                    <div className="overflow-x-auto">
+                        <Table className="font-display">
+                            <TableHeader className="sticky top-0 bg-white z-10">
+                                <TableRow>
+                                    <TableHead className="w-[60%]">Rule</TableHead>
+                                    <TableHead className="w-[20%]">Created</TableHead>
+                                    <TableHead className="w-[20%]">Modified</TableHead>
+                                </TableRow>
+                            </TableHeader>
+                        </Table>
+                    </div>
+                    <div className="max-h-[400px] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-transparent hover:[&::-webkit-scrollbar-thumb]:bg-gray-300 focus-within:[&::-webkit-scrollbar-thumb]:bg-gray-300">
+                        <Table className="font-display">
+                            <TableBody>
+                                {rules.map((rule, idx) => (
+                                    <TableRow
+                                        key={`${idx}-${rule.id}`}
+                                        className="font-body cursor-pointer hover:bg-yellow-200 focus-visible:border-yellow-200 select-none"
+                                        onClick={() => onRuleClick(rule)}
+                                    >
+                                        <TableCell className="w-[60%] p-4">
+                                            <p className='truncate select-none'>{rule.name}</p>
+                                            <div className='py-1' />
+                                            {renderCollectionMode(rule)}
+                                        </TableCell>
+                                        <TableCell className="w-[20%] p-4">
+                                            <p className='truncate select-none'>{formatDateToHumanReadableDate(rule.created_at)}</p>
+                                            <div className='py-1' />
+                                            <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(rule.created_at)}</p>
+                                            {rule.created_by && (
+                                                <>
+                                                    <div className='py-1' />
+                                                    <p className='text-xs truncate text-gray-500 select-none'>by {rule.created_by}</p>
+                                                </>
+                                            )}
+                                        </TableCell>
+                                        <TableCell className="w-[20%] p-4">
+                                            {rule.updated_at ? (
+                                                <>
+                                                    <p className='truncate select-none'>{formatDateToHumanReadableDate(rule.updated_at)}</p>
+                                                    <div className='py-1' />
+                                                    <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(rule.updated_at)}</p>
+                                                    {rule.updated_by && (
+                                                        <>
+                                                            <div className='py-1' />
+                                                            <p className='text-xs truncate text-gray-500 select-none'>by {rule.updated_by}</p>
+                                                        </>
+                                                    )}
+                                                </>
+                                            ) : (
+                                                <div>-</div>
+                                            )}
+                                        </TableCell>
+                                    </TableRow>
+                                ))}
+                            </TableBody>
+                        </Table>
+                    </div>
+                </div>
+            )}
+        </>
+    )
+}
\ No newline at end of file
diff --git a/frontend/dashboard/app/components/targeting/sampling_rate_input.tsx b/frontend/dashboard/app/components/targeting/sampling_rate_input.tsx
index afbd8195c..063fad47f 100644
--- a/frontend/dashboard/app/components/targeting/sampling_rate_input.tsx
+++ b/frontend/dashboard/app/components/targeting/sampling_rate_input.tsx
@@ -4,7 +4,7 @@ interface SamplingRateInputProps {
     value: number
     onChange: (value: number) => void
     disabled?: boolean
-    type?: 'events' | 'traces'
+    type?: 'events' | 'traces' | 'event' | 'trace' |'timeline'
 }
 
 export default function SamplingRateInput({ value, onChange, disabled = false, type = 'events' }: SamplingRateInputProps) {
@@ -13,10 +13,8 @@ export default function SamplingRateInput({ value, onChange, disabled = false, t
     const handleBlur = () => {
         const numValue = parseFloat(localValue)
         if (isNaN(numValue) || localValue.trim() === '') {
-            // Reset to parent value if invalid
             setLocalValue(value.toString())
         } else {
-            // Clamp and update parent
             const clampedValue = Math.max(0, Math.min(100, numValue))
             onChange(clampedValue)
             setLocalValue(clampedValue.toString())
@@ -24,13 +22,12 @@ export default function SamplingRateInput({ value, onChange, disabled = false, t
     }
 
     const handleFocus = () => {
-        // Sync with parent value when focusing
         setLocalValue(value.toString())
     }
 
     return (
         <div className="flex items-center gap-2 flex-wrap">
-            <span className="text-sm font-body whitespace-nowrap">Collect all {type} at</span>
+            <span className="text-sm font-body whitespace-nowrap">Collect {type} at</span>
             <div className="flex items-center gap-2">
                 <input
                     type="number"
diff --git a/frontend/dashboard/app/components/targeting/session_targeting_rules_table.tsx b/frontend/dashboard/app/components/targeting/session_targeting_rules_table.tsx
deleted file mode 100644
index c4fa14e95..000000000
--- a/frontend/dashboard/app/components/targeting/session_targeting_rules_table.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-"use client"
-
-import { SessionTargetingRule } from '@/app/api/api_calls'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/app/components/table'
-import { formatDateToHumanReadableDate, formatDateToHumanReadableTime } from '@/app/utils/time_utils'
-
-const getSamplingRateDisplay = (samplingRate: number): string => {
-    return `${samplingRate}% sampling rate`
-}
-
-interface SessionTargetingRulesTableProps {
-    rules: SessionTargetingRule[]
-    onRuleClick: (rule: SessionTargetingRule) => void
-}
-
-export default function SessionTargetingRulesTable({ rules, onRuleClick }: SessionTargetingRulesTableProps) {
-    if (rules.length === 0) {
-        return (
-            <div className="text-sm font-body text-gray-500">
-                No session timeline rules configured
-            </div>
-        )
-    }
-
-    return (
-        <div className="overflow-hidden">
-            <div className="overflow-x-auto">
-                <Table className="font-display">
-                    <TableHeader className="sticky top-0 bg-white z-10">
-                        <TableRow>
-                            <TableHead className="w-[52%]">Rules</TableHead>
-                            <TableHead className="w-[24%] text-center">Updated At</TableHead>
-                            <TableHead className="w-[24%] text-center">Updated By</TableHead>
-                        </TableRow>
-                    </TableHeader>
-                </Table>
-            </div>
-            <div className="max-h-[400px] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-transparent hover:[&::-webkit-scrollbar-thumb]:bg-gray-300 focus-within:[&::-webkit-scrollbar-thumb]:bg-gray-300">
-                <Table className="font-display">
-                    <TableBody>
-                        {rules.map((rule, idx) => (
-                            <TableRow
-                                key={`${idx}-${rule.id}`}
-                                className="font-body cursor-pointer hover:bg-yellow-200 focus-visible:border-yellow-200 select-none"
-                                onClick={() => onRuleClick(rule)}
-                            >
-                                <TableCell className="w-[52%] p-4">
-                                    <p className='truncate select-none font-mono text-sm'>{rule.condition}</p>
-                                    <div className='py-1' />
-                                    <p className='text-xs truncate text-gray-500 select-none'>{getSamplingRateDisplay(rule.sampling_rate)}</p>
-                                </TableCell>
-                                <TableCell className="w-[24%] text-center p-4">
-                                    <p className='truncate select-none'>{formatDateToHumanReadableDate(rule.updated_at)}</p>
-                                    <div className='py-1' />
-                                    <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(rule.updated_at)}</p>
-                                </TableCell>
-                                <TableCell className="w-[24%] text-center p-4">
-                                    <p className='truncate select-none'>{rule.updated_by}</p>
-                                </TableCell>
-                            </TableRow>
-                        ))}
-                    </TableBody>
-                </Table>
-            </div>
-        </div>
-    )
-}
diff --git a/frontend/dashboard/app/components/targeting/trace_rule_builder.tsx b/frontend/dashboard/app/components/targeting/trace_rule_builder.tsx
deleted file mode 100644
index b828a4a55..000000000
--- a/frontend/dashboard/app/components/targeting/trace_rule_builder.tsx
+++ /dev/null
@@ -1,689 +0,0 @@
-"use client"
-
-import { Button } from '@/app/components/button'
-import { useEffect, useState, useId } from 'react'
-import { useRouter } from 'next/navigation'
-import {
-    TraceTargetingRuleApiStatus,
-    TraceTargetingConfigApiStatus,
-    TraceTargetingRule,
-    TraceTargetingConfigResponse,
-    fetchTraceTargetingRuleFromServer,
-    fetchTraceTargetingConfigFromServer,
-    createTraceTargetingRule,
-    updateTraceTargetingRule,
-    CreateTraceTargetingRuleApiStatus,
-    UpdateTraceTargetingRuleApiStatus,
-    deleteTraceTargetingRule,
-    DeleteTraceTargetingRuleApiStatus,
-} from '@/app/api/api_calls'
-import LoadingBar from '@/app/components/loading_bar'
-import DangerConfirmationDialog from '@/app/components/danger_confirmation_dialog'
-import { toastPositive, toastNegative } from '@/app/utils/use_toast'
-import { TraceCondition, AttributeField } from '@/app/utils/cel/conditions'
-import { celToConditions } from '@/app/utils/cel/cel_parser'
-import DropdownSelect, { DropdownSelectType } from '@/app/components/dropdown_select'
-import { traceConditionToCel } from '@/app/utils/cel/cel_generator'
-import RuleBuilderAttributeRow from '@/app/components/targeting/rule_builder_attribute_row'
-import SamplingRateInput from '@/app/components/targeting/sampling_rate_input'
-
-interface TraceRuleBuilderProps {
-    mode: 'create' | 'edit'
-    appId: string
-    ruleId?: string
-    onCancel: () => void
-    onSave: () => void
-}
-
-interface TraceRuleState {
-    condition: TraceCondition
-    collectionMode: 'sampled' | 'session_timeline' | 'disabled'
-    sampleRate: number
-}
-
-type PageState = {
-    ruleData: TraceTargetingRule | null
-    configData: TraceTargetingConfigResponse | null
-    ruleApiStatus: TraceTargetingRuleApiStatus
-    configApiStatus: TraceTargetingConfigApiStatus
-    initialRuleState: TraceRuleState | null
-    currentRuleState: TraceRuleState | null
-    isSaving: boolean
-}
-
-export default function TraceRuleBuilder({
-    mode,
-    appId,
-    ruleId,
-    onCancel,
-    onSave: onSave,
-}: TraceRuleBuilderProps) {
-    const baseId = useId()
-    const [pageState, setPageState] = useState<PageState>({
-        ruleData: null,
-        configData: null,
-        ruleApiStatus: TraceTargetingRuleApiStatus.Loading,
-        configApiStatus: TraceTargetingConfigApiStatus.Loading,
-        initialRuleState: null,
-        currentRuleState: null,
-        isSaving: false
-    })
-    const [deleteConfirmationModalOpen, setDeleteConfirmationModalOpen] = useState(false)
-    const [deleteApiStatus, setDeleteApiStatus] = useState(DeleteTraceTargetingRuleApiStatus.Init)
-
-    useEffect(() => {
-        fetchPageData()
-    }, [mode, ruleId, appId])
-
-    const fetchPageData = async () => {
-        setPageState(prev => ({
-            ...prev,
-            ruleApiStatus: TraceTargetingRuleApiStatus.Loading,
-            configApiStatus: TraceTargetingConfigApiStatus.Loading
-        }))
-
-        const configResult = await fetchTraceTargetingConfigFromServer(appId)
-        if (configResult.status === TraceTargetingConfigApiStatus.Error) {
-            setPageState(prev => ({
-                ...prev,
-                configApiStatus: TraceTargetingConfigApiStatus.Error
-            }))
-            return
-        }
-
-        // Fetch rule data if in edit mode
-        let ruleData: TraceTargetingRule | null = null
-        let ruleApiStatus = TraceTargetingRuleApiStatus.Success
-        if (mode === 'edit' && ruleId) {
-            const ruleResult = await fetchTraceTargetingRuleFromServer(appId, ruleId)
-            if (ruleResult.status === TraceTargetingRuleApiStatus.Error) {
-                setPageState(prev => ({
-                    ...prev,
-                    ruleApiStatus: TraceTargetingRuleApiStatus.Error,
-                    configApiStatus: TraceTargetingConfigApiStatus.Success,
-                    configData: configResult.data
-                }))
-                return
-            }
-            ruleData = ruleResult.data
-        }
-
-        const initialState = convertToTraceRuleState(ruleData, configResult.data, baseId)
-
-        setPageState({
-            ruleData,
-            configData: configResult.data,
-            ruleApiStatus,
-            configApiStatus: TraceTargetingConfigApiStatus.Success,
-            initialRuleState: initialState,
-            currentRuleState: initialState,
-            isSaving: false
-        })
-    }
-
-    const convertToTraceRuleState = (ruleData: TraceTargetingRule | null, configData: TraceTargetingConfigResponse, idPrefix: string): TraceRuleState => {
-        if (ruleData) {
-            const parsedConditions = celToConditions(ruleData.condition)
-            const traceCondition = parsedConditions.trace?.conditions[0] || createDefaultTraceCondition(configData, idPrefix)
-
-            return {
-                condition: traceCondition,
-                collectionMode: ruleData.collection_mode,
-                sampleRate: ruleData.sampling_rate
-            }
-        } else {
-            return {
-                condition: createDefaultTraceCondition(configData, idPrefix),
-                collectionMode: 'session_timeline',
-                sampleRate: 0
-            }
-        }
-    }
-
-    const createDefaultTraceCondition = (configData: TraceTargetingConfigResponse, idPrefix: string): TraceCondition => {
-        const config = (configData as any)
-        const firstTraceConfig = config?.trace_config?.[0]
-
-        return {
-            id: `${idPrefix}-condition`,
-            spanName: firstTraceConfig?.name || '',
-            operator: 'eq',
-            attrs: [],
-            ud_attrs: [],
-            session_attrs: [],
-        }
-    }
-
-    const getTitle = () => {
-        if (mode === 'create') {
-            return 'Create Trace Rule'
-        }
-        return 'Edit Trace Rule'
-    }
-
-    const getPrimaryActionLabel = () => {
-        return mode === 'create' ? 'Create Rule' : 'Save Changes'
-    }
-
-    const isLoading = () => {
-        return pageState.ruleApiStatus === TraceTargetingRuleApiStatus.Loading ||
-               pageState.configApiStatus === TraceTargetingConfigApiStatus.Loading
-    }
-
-    const hasError = () => {
-        return pageState.ruleApiStatus === TraceTargetingRuleApiStatus.Error ||
-               pageState.configApiStatus === TraceTargetingConfigApiStatus.Error
-    }
-
-    const isReady = () => {
-        return pageState.ruleApiStatus === TraceTargetingRuleApiStatus.Success &&
-               pageState.configApiStatus === TraceTargetingConfigApiStatus.Success
-    }
-
-    const hasChanges = () => {
-        if (mode === 'create') return true
-        return JSON.stringify(pageState.initialRuleState) !== JSON.stringify(pageState.currentRuleState)
-    }
-
-    const updateRuleState = (updates: Partial<TraceRuleState>) => {
-        setPageState(prev => ({
-            ...prev,
-            currentRuleState: prev.currentRuleState ? { ...prev.currentRuleState, ...updates } : null
-        }))
-    }
-
-    const getAvailableAttrKeys = (attrType: 'attrs' | 'ud_attrs' | 'session_attrs'): string[] => {
-        if (!pageState.configData) return []
-
-        const config = pageState.configData.result || (pageState.configData as any)
-        const currentSpanName = pageState.currentRuleState?.condition.spanName
-
-        if (attrType === 'attrs') {
-            const traceConfig = config?.trace_config?.find(t => t.name === currentSpanName)
-            return traceConfig?.attrs?.map((attr: any) => attr.key) || []
-        } else if (attrType === 'ud_attrs') {
-            return config?.trace_ud_attrs?.map((attr: any) => attr.key) || []
-        } else {
-            return config?.session_attrs?.map((attr: any) => attr.key) || []
-        }
-    }
-
-    const getCombinedAttrKeys = (): string[] => {
-        const sessionKeys = getAvailableAttrKeys('session_attrs')
-        const udKeys = getAvailableAttrKeys('ud_attrs')
-        return [...sessionKeys, ...udKeys]
-    }
-
-    const getOperatorsForType = (operatorTypesMapping: any, type: string): string[] => {
-        return operatorTypesMapping?.[type] || ['eq', 'neq']
-    }
-
-    const getAttrConfigByKey = (key: string, attrType: 'attrs' | 'ud_attrs' | 'session_attrs') => {
-        if (!pageState.configData) return null
-
-        const config = pageState.configData.result || (pageState.configData as any)
-        const currentSpanName = pageState.currentRuleState?.condition.spanName
-
-        if (attrType === 'attrs') {
-            const traceConfig = config?.trace_config?.find(t => t.name === currentSpanName)
-            return traceConfig?.attrs?.find((attr: any) => attr.key === key)
-        } else if (attrType === 'ud_attrs') {
-            return config?.trace_ud_attrs?.find((attr: any) => attr.key === key)
-        } else {
-            return config?.session_attrs?.find((attr: any) => attr.key === key)
-        }
-    }
-
-    const handleSpanNameChange = (newSpanName: string) => {
-        if (!pageState.configData) return
-
-        // Handle both nested and flat response structures
-        const config = pageState.configData.result || (pageState.configData as any)
-        if (!config?.trace_config) return
-
-        const traceConfig = config.trace_config.find(t => t.name === newSpanName)
-        if (!traceConfig) return
-
-        // Pre-populate trace attrs (rendered by default)
-        const attrs = (traceConfig.attrs || []).map((attr, idx) => ({
-            id: `${baseId}-attr-${idx}`,
-            key: attr.key,
-            type: attr.type,
-            value: attr.type === 'bool' ? false : attr.type === 'number' ? 0 : '',
-            hint: attr.hint,
-            operator: 'eq'
-        }))
-
-        // Start with empty arrays for ud_attrs and session_attrs (added on demand)
-        const newCondition: TraceCondition = {
-            id: `${baseId}-condition`,
-            spanName: newSpanName,
-            operator: 'eq',
-            attrs,
-            ud_attrs: [],
-            session_attrs: []
-        }
-
-        updateRuleState({ condition: newCondition })
-    }
-
-    const handleAddAttribute = (attrType: 'ud_attrs' | 'session_attrs') => {
-        if (!pageState.currentRuleState) return
-
-        const availableKeys = attrType === 'ud_attrs'
-            ? getAvailableAttrKeys('ud_attrs')
-            : getAvailableAttrKeys('session_attrs')
-
-        if (availableKeys.length === 0) return
-
-        const firstKey = availableKeys[0]
-        const attrConfig = getAttrConfigByKey(firstKey, attrType)
-
-        const newAttr: AttributeField = {
-            id: `${baseId}-${attrType}-${Date.now()}`,
-            key: firstKey,
-            type: attrConfig?.type || 'string',
-            value: attrConfig?.type === 'bool' ? false : attrConfig?.type === 'number' ? 0 : '',
-            hint: attrConfig?.hint,
-            operator: 'eq'
-        }
-
-        const updatedCondition = {
-            ...pageState.currentRuleState.condition,
-            [attrType]: [...pageState.currentRuleState.condition[attrType], newAttr]
-        }
-
-        updateRuleState({ condition: updatedCondition })
-    }
-
-    const handleUpdateAttr = (
-        conditionId: string,
-        attrId: string,
-        field: 'key' | 'type' | 'value' | 'operator',
-        value: any,
-        attrType: 'attrs' | 'ud_attrs' | 'session_attrs'
-    ) => {
-        if (!pageState.currentRuleState) return
-
-        const attrs = pageState.currentRuleState.condition[attrType]
-        const attrIndex = attrs.findIndex(a => a.id === attrId)
-        if (attrIndex === -1) return
-
-        const updatedAttrs = [...attrs]
-        const updatedAttr = { ...updatedAttrs[attrIndex] }
-
-        if (field === 'key') {
-            // When key changes, update type and reset value
-            const attrConfig = getAttrConfigByKey(value, attrType)
-            updatedAttr.key = value
-            updatedAttr.type = attrConfig?.type || 'string'
-            updatedAttr.value = attrConfig?.type === 'bool' ? false : attrConfig?.type === 'number' ? 0 : ''
-            updatedAttr.hint = attrConfig?.hint
-        } else {
-            updatedAttr[field] = value
-        }
-
-        updatedAttrs[attrIndex] = updatedAttr
-
-        const updatedCondition = {
-            ...pageState.currentRuleState.condition,
-            [attrType]: updatedAttrs
-        }
-
-        updateRuleState({ condition: updatedCondition })
-    }
-
-    const handleRemoveAttr = (
-        conditionId: string,
-        attrId: string,
-        attrType: 'attrs' | 'ud_attrs' | 'session_attrs'
-    ) => {
-        if (!pageState.currentRuleState) return
-
-        const updatedAttrs = pageState.currentRuleState.condition[attrType].filter(a => a.id !== attrId)
-
-        const updatedCondition = {
-            ...pageState.currentRuleState.condition,
-            [attrType]: updatedAttrs
-        }
-
-        updateRuleState({ condition: updatedCondition })
-    }
-
-    const handleSaveChanges = async () => {
-        if (!pageState.currentRuleState) {
-            return
-        }
-
-        setPageState(prev => ({ ...prev, isSaving: true }))
-
-        try {
-            const currentState = pageState.currentRuleState
-
-            const celCondition = traceConditionToCel(pageState.currentRuleState.condition)
-            if (!celCondition) {
-                setPageState(prev => ({ ...prev, isSaving: false }))
-                return
-            }
-
-            const ruleData = {
-                condition: celCondition,
-                collection_mode: currentState.collectionMode,
-                sampling_rate: currentState.sampleRate,
-            }
-
-            if (mode === 'create') {
-                const result = await createTraceTargetingRule(appId, ruleData)
-                if (result.status === CreateTraceTargetingRuleApiStatus.Success) {
-                    toastPositive('Trace rule created successfully')
-                    onSave()
-                } else {
-                    toastNegative('Failed to create trace rule', result.error || 'Unknown error')
-                }
-            } else {
-                const result = await updateTraceTargetingRule(appId, ruleId!, ruleData)
-                if (result.status === UpdateTraceTargetingRuleApiStatus.Success) {
-                    toastPositive('Trace rule updated successfully')
-                    onSave()
-                } else {
-                    toastNegative('Failed to update trace rule', result.error || 'Unknown error')
-                }
-            }
-        } catch (error) {
-            toastNegative('An error occurred', 'Please try again')
-        } finally {
-            setPageState(prev => ({ ...prev, isSaving: false }))
-        }
-    }
-
-    const handleDeleteRule = async () => {
-        if (!ruleId) return
-
-        setDeleteApiStatus(DeleteTraceTargetingRuleApiStatus.Loading)
-
-        try {
-            const result = await deleteTraceTargetingRule(appId, ruleId)
-            if (result.status === DeleteTraceTargetingRuleApiStatus.Success) {
-                setDeleteApiStatus(DeleteTraceTargetingRuleApiStatus.Success)
-                toastPositive('Trace rule deleted successfully')
-                onSave()
-            } else {
-                setDeleteApiStatus(DeleteTraceTargetingRuleApiStatus.Error)
-                toastNegative('Failed to delete trace rule', result.error || 'Unknown error')
-            }
-        } catch (error) {
-            setDeleteApiStatus(DeleteTraceTargetingRuleApiStatus.Error)
-            toastNegative('An error occurred', 'Please try again')
-        }
-    }
-
-    const hasFilterAttributes = () => {
-        return (pageState.currentRuleState?.condition?.ud_attrs?.length ?? 0) > 0 ||
-            (pageState.currentRuleState?.condition?.session_attrs?.length ?? 0) > 0
-    }
-
-    return (
-        <div className="flex flex-col selection:bg-yellow-200/75 items-start">
-            {/* Delete Confirmation Dialog */}
-            <DangerConfirmationDialog
-                body={<p className="font-body">Are you sure you want to delete this trace rule? This action cannot be undone.</p>}
-                open={deleteConfirmationModalOpen}
-                affirmativeText="Delete Rule"
-                cancelText="Cancel"
-                onAffirmativeAction={() => {
-                    setDeleteConfirmationModalOpen(false)
-                    handleDeleteRule()
-                }}
-                onCancelAction={() => setDeleteConfirmationModalOpen(false)}
-            />
-
-            <div className="flex flex-row items-center justify-between w-full">
-                <p className="font-display text-4xl max-w-6xl">{getTitle()}</p>
-                {mode === 'edit' && (
-                    <Button
-                        variant="destructive"
-                        onClick={() => setDeleteConfirmationModalOpen(true)}
-                        className="font-display"
-                        disabled={deleteApiStatus === DeleteTraceTargetingRuleApiStatus.Loading}
-                        loading={deleteApiStatus === DeleteTraceTargetingRuleApiStatus.Loading}
-                    >
-                        Delete Rule
-                    </Button>
-                )}
-            </div>
-            <div className="py-4" />
-
-            {/* Loading indicator */}
-            <div className={`py-1 w-full ${isLoading() ? 'visible' : 'invisible'}`}>
-                <LoadingBar />
-            </div>
-
-            {/* Error state */}
-            {hasError() && (
-                <div className="w-full flex flex-col items-center">
-                    <p className="text-normal font-body">
-                        Error loading rule. Please try again or go back.
-                    </p>
-                    <div className="py-4" />
-                    <Button
-                        variant="outline"
-                        onClick={onCancel}
-                        className="font-display border border-black select-none"
-                    >
-                        Go Back
-                    </Button>
-                </div>
-            )}
-
-            {/* Main content */}
-            {isReady() && (
-                <div className="w-full flex flex-col">
-                    {/* When section */}
-                    <div className="mb-6">
-                        <div className="flex items-center gap-3 mb-4">
-                            <span className="font-display text-xl">When</span>
-                            <DropdownSelect
-                                type={DropdownSelectType.SingleString}
-                                title="Select span name"
-                                items={(() => {
-                                    const config = pageState.configData?.result || (pageState.configData as any)
-                                    return config?.trace_config?.map((t: any) => t.name) || []
-                                })()}
-                                initialSelected={pageState.currentRuleState?.condition.spanName || ''}
-                                onChangeSelected={(selected) => handleSpanNameChange(selected as string)}
-                            />
-                            <span className="font-display text-xl">span ends</span>
-                        </div>
-
-                        {/* Trace Attributes Section - Always shown if trace has attrs */}
-                        {pageState.currentRuleState?.condition.attrs && pageState.currentRuleState.condition.attrs.length > 0 && (
-                            <div className="mt-3 space-y-2">
-                                {pageState.currentRuleState.condition.attrs.map(attr => (
-                                    <RuleBuilderAttributeRow
-                                        key={attr.id}
-                                        attr={attr}
-                                        conditionId={pageState.currentRuleState!.condition.id}
-                                        attrType="attrs"
-                                        attrKeys={getAvailableAttrKeys('attrs')}
-                                        operatorTypesMapping={(() => {
-                                            const config = pageState.configData?.result || (pageState.configData as any)
-                                            return config?.operator_types || {}
-                                        })()}
-                                        getOperatorsForType={getOperatorsForType}
-                                        onUpdateAttr={handleUpdateAttr}
-                                        showDeleteButton={false}
-                                    />
-                                ))}
-                            </div>
-                        )}
-
-                        {/* Add Filter Button - Only shown if trace has ud_attrs capability */}
-                        {(() => {
-                            const config = pageState.configData?.result || (pageState.configData as any)
-                            const currentSpanName = pageState.currentRuleState?.condition.spanName
-                            const traceConfig = config?.trace_config?.find((t: any) => t.name === currentSpanName)
-                            const hasUdAttrs = traceConfig?.has_ud_attrs
-                            const hasCombinedAttrs = hasFilterAttributes()
-
-                            return hasUdAttrs && !hasCombinedAttrs && (
-                                <Button
-                                    variant="ghost"
-                                    onClick={() => {
-                                        // Add first session attr if available, otherwise first ud attr
-                                        const sessionKeys = getAvailableAttrKeys('session_attrs')
-                                        if (sessionKeys.length > 0) {
-                                            handleAddAttribute('session_attrs')
-                                        } else {
-                                            handleAddAttribute('ud_attrs')
-                                        }
-                                    }}
-                                    className="text-sm font-body px-2 py-1 h-auto -ml-2 mt-2 hover:bg-yellow-200 focus:bg-yellow-200"
-                                >
-                                    + Filter by attribute
-                                </Button>
-                            )
-                        })()}
-
-                        {/* User-Defined & Session Attributes Section */}
-                        {hasFilterAttributes() && (() => {
-                            const condition = pageState.currentRuleState!.condition
-                            return (
-                                <div className="mt-3 space-y-2">
-                                    {/* Render session attrs */}
-                                    {condition.session_attrs.map(attr => (
-                                        <RuleBuilderAttributeRow
-                                            key={attr.id}
-                                            attr={attr}
-                                            conditionId={condition.id}
-                                            attrType="session_attrs"
-                                            attrKeys={getCombinedAttrKeys()}
-                                            operatorTypesMapping={(() => {
-                                                const config = pageState.configData?.result || (pageState.configData as any)
-                                                return config?.operator_types || {}
-                                            })()}
-                                            getOperatorsForType={getOperatorsForType}
-                                            onUpdateAttr={handleUpdateAttr}
-                                            onRemoveAttr={handleRemoveAttr}
-                                            showDeleteButton={true}
-                                        />
-                                    ))}
-                                    {/* Render ud attrs */}
-                                    {condition.ud_attrs.map(attr => (
-                                        <RuleBuilderAttributeRow
-                                            key={attr.id}
-                                            attr={attr}
-                                            conditionId={condition.id}
-                                            attrType="ud_attrs"
-                                            attrKeys={getCombinedAttrKeys()}
-                                            operatorTypesMapping={(() => {
-                                                const config = pageState.configData?.result || (pageState.configData as any)
-                                                return config?.operator_types || {}
-                                            })()}
-                                            getOperatorsForType={getOperatorsForType}
-                                            onUpdateAttr={handleUpdateAttr}
-                                            onRemoveAttr={handleRemoveAttr}
-                                            showDeleteButton={true}
-                                        />
-                                    ))}
-                                    {/* Add more attributes button */}
-                                    <Button
-                                        variant="ghost"
-                                        onClick={() => {
-                                            // Add first session attr if available, otherwise first ud attr
-                                            const sessionKeys = getAvailableAttrKeys('session_attrs')
-                                            if (sessionKeys.length > 0) {
-                                                handleAddAttribute('session_attrs')
-                                            } else {
-                                                handleAddAttribute('ud_attrs')
-                                            }
-                                        }}
-                                        className="text-sm font-body px-2 py-1 h-auto -ml-2 mt-1 hover:bg-yellow-200 focus:bg-yellow-200"
-                                    >
-                                        + Filter by attribute
-                                    </Button>
-                                </div>
-                            )
-                        })()}
-                    </div>
-
-                    <div className='py-4' />
-
-                    {/* Then section */}
-                    <div className="mb-6">
-                        <p className="font-display text-xl mb-4">Then</p>
-
-                        {/* Collection config */}
-                        <div className="mb-4">
-                            <p className="font-display text-gray-500 mb-3">Collection</p>
-                            <div className="space-y-3 ml-4">
-                                <label className="flex items-center gap-3 cursor-pointer h-10">
-                                    <input
-                                        type="radio"
-                                        name="collectionMode"
-                                        value="sampled"
-                                        checked={pageState.currentRuleState?.collectionMode === 'sampled'}
-                                        onChange={() => updateRuleState({ collectionMode: 'sampled' })}
-                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                                    />
-                                    <SamplingRateInput
-                                        value={pageState.currentRuleState?.sampleRate || 100}
-                                        onChange={(value) => updateRuleState({ sampleRate: value })}
-                                        disabled={pageState.currentRuleState?.collectionMode !== 'sampled'}
-                                        type="traces"
-                                    />
-                                </label>
-
-                                <label className="flex items-center gap-3 cursor-pointer h-10">
-                                    <input
-                                        type="radio"
-                                        name="collectionMode"
-                                        value="timeline"
-                                        checked={pageState.currentRuleState?.collectionMode === 'session_timeline'}
-                                        onChange={() => updateRuleState({ collectionMode: 'session_timeline' })}
-                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                                    />
-                                    <span className="text-sm font-body">Collect with timeline only</span>
-                                </label>
-
-                                <label className="flex items-center gap-3 cursor-pointer h-10">
-                                    <input
-                                        type="radio"
-                                        name="collectionMode"
-                                        value="disabled"
-                                        checked={pageState.currentRuleState?.collectionMode === 'disabled'}
-                                        onChange={() => updateRuleState({ collectionMode: 'disabled' })}
-                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
-                                    />
-                                    <span className="text-sm font-body">Do not collect</span>
-                                </label>
-                            </div>
-                        </div>
-                    </div>
-
-                    {/* Action buttons */}
-                    <div className="flex justify-end gap-3">
-                        <Button
-                            type="button"
-                            variant="outline"
-                            onClick={onCancel}
-                            className="font-display"
-                            disabled={pageState.isSaving}
-                        >
-                            Cancel
-                        </Button>
-                        <Button
-                            type="button"
-                            variant="outline"
-                            onClick={handleSaveChanges}
-                            className="font-display border border-black"
-                            disabled={!hasChanges()}
-                            loading={pageState.isSaving}
-                        >
-                            {getPrimaryActionLabel()}
-                        </Button>
-                    </div>
-                </div>
-            )}
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/frontend/dashboard/app/utils/cel/cel_generator.ts b/frontend/dashboard/app/utils/cel/cel_generator.ts
index b04c2136d..19cb53105 100644
--- a/frontend/dashboard/app/utils/cel/cel_generator.ts
+++ b/frontend/dashboard/app/utils/cel/cel_generator.ts
@@ -9,10 +9,8 @@
 
 import {
   EventCondition,
-  AttributeCondition,
   TraceCondition,
   EventConditions,
-  SessionConditions,
   TraceConditions
 } from "./conditions"
 import { ParsedConditions } from "./cel_parser"
@@ -195,19 +193,6 @@ function buildEventConditionParts(condition: EventCondition): string[] {
   return parts
 }
 
-/**
- * Converts a single session condition object into an 
- * array of its constituent CEL parts.
- * Example output: ['attribute.session_duration > 300', 'attribute.user_country == "US"']
- */
-function buildSessionConditionParts(condition: AttributeCondition): string[] {
-  return (
-    condition.attrs
-      ?.map(createSessionAttributeCondition)
-      .filter((expr): expr is string => Boolean(expr)) || []
-  )
-}
-
 /**
  * Converts a single trace condition object into an 
  * array of its constituent CEL parts.
@@ -281,22 +266,6 @@ function processEventConditions(eventConditions: EventConditions | undefined): s
     : null
 }
 
-/**
- * High-level processor for all session conditions.
- */
-function processSessionConditions(sessionConditions: SessionConditions | undefined): string | null {
-  if (!sessionConditions?.conditions?.length) return null
-
-  const conditionStrings = sessionConditions.conditions
-    .map(buildSessionConditionParts)
-    .filter(parts => parts.length > 0)
-    .map(combineConditionParts)
-
-  return conditionStrings.length > 0
-    ? combineConditionsWithLogicalOperators(conditionStrings, sessionConditions.operators || [])
-    : null
-}
-
 /**
  * High-level processor for all trace conditions.
  */
@@ -323,7 +292,9 @@ function wrapConditionGroups(conditionGroups: string[]): string {
   }
 
   const wrappedGroups = conditionGroups.map(group => `(${group})`)
-  return wrappedGroups.join(' && ')
+  const joined = wrappedGroups.join(' && ')
+  // Wrap the entire combined expression in parentheses
+  return `(${joined})`
 }
 
 /**
@@ -354,9 +325,8 @@ export function traceConditionToCel(condition: TraceCondition): string | null {
 export function conditionsToCel(parsedConditions: ParsedConditions): string | null {
   const eventCelExpression = processEventConditions(parsedConditions.event)
   const traceCelExpression = processTraceConditions(parsedConditions.trace)
-  const sessionCelExpression = processSessionConditions(parsedConditions.session)
 
-  const conditionGroups = [eventCelExpression, traceCelExpression, sessionCelExpression]
+  const conditionGroups = [eventCelExpression, traceCelExpression]
     .filter((group): group is string => Boolean(group))
 
   if (conditionGroups.length === 0) {
@@ -364,4 +334,4 @@ export function conditionsToCel(parsedConditions: ParsedConditions): string | nu
   }
 
   return wrapConditionGroups(conditionGroups)
-}
+}
\ No newline at end of file
diff --git a/frontend/dashboard/app/utils/cel/cel_parser.ts b/frontend/dashboard/app/utils/cel/cel_parser.ts
index 6d859158d..3d673a33f 100644
--- a/frontend/dashboard/app/utils/cel/cel_parser.ts
+++ b/frontend/dashboard/app/utils/cel/cel_parser.ts
@@ -6,7 +6,7 @@
  * Syntax Tree (AST) and converts it into domain-specific condition formats.
  */
 
-import { EventConditions, SessionConditions, TraceConditions, EventCondition, AttributeCondition, TraceCondition } from './conditions'
+import { EventConditions, TraceConditions, EventCondition, TraceCondition } from './conditions'
 import { CelTokenizer, Token, TokenType, CelParseError } from './cel_tokenizer'
 
 /**
@@ -14,7 +14,6 @@ import { CelTokenizer, Token, TokenType, CelParseError } from './cel_tokenizer'
  */
 export interface ParsedConditions {
   event?: EventConditions
-  session?: SessionConditions
   trace?: TraceConditions
 }
 
@@ -60,6 +59,14 @@ interface LogicalExpression {
  */
 type Expression = Comparison | LogicalExpression
 
+/**
+ * Context for tracking which condition type we're currently in
+ */
+interface ParsingContext {
+  currentEventCondition?: EventCondition
+  currentTraceCondition?: TraceCondition
+}
+
 /**
  * Parser for CEL expressions that builds structured condition objects
  */
@@ -70,14 +77,15 @@ class CelParser {
 
   // Condition builders for different types
   private eventConditions: EventCondition[] = []
-  private sessionConditions: AttributeCondition[] = []
   private traceConditions: TraceCondition[] = []
 
   // Operator sequences for combining conditions
   private eventOperators: ('AND' | 'OR')[] = []
-  private sessionOperators: ('AND' | 'OR')[] = []
   private traceOperators: ('AND' | 'OR')[] = []
 
+  // Track the current parsing context
+  private context: ParsingContext = {}
+
   constructor(tokens: Token[]) {
     this.tokens = tokens
   }
@@ -106,6 +114,7 @@ class CelParser {
     this.currentPosition = 0
     this.idGenerator = 0
     this.clearConditions()
+    this.context = {}
   }
 
   /**
@@ -113,10 +122,8 @@ class CelParser {
    */
   private clearConditions(): void {
     this.eventConditions = []
-    this.sessionConditions = []
     this.traceConditions = []
     this.eventOperators = []
-    this.sessionOperators = []
     this.traceOperators = []
   }
 
@@ -291,38 +298,62 @@ class CelParser {
    */
   private processComparison(comparison: Comparison, operators: ('AND' | 'OR')[]): void {
     const category = this.categorizeFieldPath(comparison.field.segments)
+    const previousCategory = this.getCurrentCategory()
 
     switch (category) {
       case 'event':
         this.addEventCondition(comparison)
-        this.transferOperators(operators, this.eventOperators)
-        break
-      case 'session':
-        this.addSessionCondition(comparison)
-        this.transferOperators(operators, this.sessionOperators)
+        // Only transfer operators if we're continuing within the same category
+        if (previousCategory === 'event' || previousCategory === null) {
+          this.transferOperators(operators, this.eventOperators)
+        } else {
+          // Clear operators when switching categories (they connect different condition types)
+          operators.length = 0
+        }
         break
       case 'trace':
         this.addTraceCondition(comparison)
-        this.transferOperators(operators, this.traceOperators)
+        // Only transfer operators if we're continuing within the same category
+        if (previousCategory === 'trace' || previousCategory === null) {
+          this.transferOperators(operators, this.traceOperators)
+        } else {
+          // Clear operators when switching categories (they connect different condition types)
+          operators.length = 0
+        }
+        break
+      case 'session':
+        this.addSessionAttribute(comparison)
+        // Session attributes don't transfer operators, but we need to clear them
+        // to prevent them from accumulating when the next condition is processed
+        operators.length = 0
         break
     }
   }
 
+  /**
+   * Gets the current category based on what type of condition we're processing
+   */
+  private getCurrentCategory(): 'event' | 'trace' | null {
+    if (this.context.currentEventCondition) return 'event'
+    if (this.context.currentTraceCondition) return 'trace'
+    return null
+  }
+
   /**
    * Determines the category of a field based on its path segments
    */
-  private categorizeFieldPath(segments: string[]): 'event' | 'session' | 'trace' {
+  private categorizeFieldPath(segments: string[]): 'event' | 'trace' | 'session' {
     const firstSegment = segments[0]
 
     if (firstSegment === 'event_type' || firstSegment === 'event') {
       return 'event'
     }
-    if (firstSegment === 'attribute') {
-      return 'session'
-    }
     if (firstSegment === 'span_name' || firstSegment === 'trace') {
       return 'trace'
     }
+    if (firstSegment === 'attribute') {
+      return 'session'
+    }
 
     // Default to event for unknown fields
     return 'event'
@@ -354,6 +385,10 @@ class CelParser {
       condition = this.createEventCondition(eventType)
       this.eventConditions.push(condition)
     }
+
+    // Update context to track current event condition
+    this.context.currentEventCondition = condition
+    this.context.currentTraceCondition = undefined
   }
 
   /**
@@ -386,18 +421,6 @@ class CelParser {
     condition.attrs!.push(this.createAttributeFromComparison(comparison, fullPathKey))
   }
 
-  /**
-   * Adds a session condition
-   */
-  private addSessionCondition(comparison: Comparison): void {
-    const key = comparison.field.segments.join('.')
-    const condition: AttributeCondition = {
-      id: this.generateId(),
-      attrs: [this.createAttributeFromComparison(comparison, key)]
-    }
-    this.sessionConditions.push(condition)
-  }
-
   /**
    * Adds a trace condition
    */
@@ -420,9 +443,13 @@ class CelParser {
       spanName: comparison.value.value as string,
       operator: comparison.operator,
       ud_attrs: [],
-      session_attrs: []
+      session_attrs: [],
     }
     this.traceConditions.push(condition)
+
+    // Update context to track current trace condition
+    this.context.currentTraceCondition = condition
+    this.context.currentEventCondition = undefined
   }
 
   /**
@@ -438,6 +465,40 @@ class CelParser {
     currentCondition.ud_attrs!.push(this.createAttributeFromComparison(comparison, fullPathKey))
   }
 
+  /**
+   * Adds a session attribute to the current event or trace condition
+   */
+  private addSessionAttribute(comparison: Comparison): void {
+    const segments = comparison.field.segments
+    const key = segments.slice(1).join('.') // Remove 'attribute' prefix
+
+    const attr = this.createAttributeFromComparison(comparison, key)
+
+    // Add to current event condition if exists
+    if (this.context.currentEventCondition) {
+      this.context.currentEventCondition.session_attrs!.push(attr)
+      return
+    }
+
+    // Add to current trace condition if exists
+    if (this.context.currentTraceCondition) {
+      this.context.currentTraceCondition.session_attrs!.push(attr)
+      return
+    }
+
+    // If no current condition exists, add to the last event or trace condition
+    const lastEventCondition = this.getLastEventCondition()
+    const lastTraceCondition = this.getLastTraceCondition()
+
+    if (lastEventCondition) {
+      lastEventCondition.session_attrs!.push(attr)
+    } else if (lastTraceCondition) {
+      lastTraceCondition.session_attrs!.push(attr)
+    } else {
+      throw new CelParseError('Session attribute found without a preceding event or trace condition', comparison.position)
+    }
+  }
+
   // Helper methods for token management
   private consumeIfMatches(...types: TokenType[]): boolean {
     if (types.some(type => this.isCurrentToken(type))) {
@@ -542,7 +603,7 @@ class CelParser {
       type: eventType,
       attrs: [],
       ud_attrs: [],
-      session_attrs: []
+      session_attrs: [],
     }
   }
 
@@ -593,9 +654,6 @@ class CelParser {
     if (this.eventConditions.length > 0) {
       result.event = { conditions: this.eventConditions, operators: this.eventOperators }
     }
-    if (this.sessionConditions.length > 0) {
-      result.session = { conditions: this.sessionConditions, operators: this.sessionOperators }
-    }
     if (this.traceConditions.length > 0) {
       result.trace = { conditions: this.traceConditions, operators: this.traceOperators }
     }
@@ -609,7 +667,7 @@ class CelParser {
  */
 export function celToConditions(expression: string): ParsedConditions {
   if (!expression?.trim()) {
-    return { event: undefined, trace: undefined, session: undefined };
+    return { event: undefined, trace: undefined };
   }
   const tokenizer = new CelTokenizer(expression);
   const tokens = tokenizer.tokenize();
diff --git a/frontend/dashboard/app/utils/cel/conditions.ts b/frontend/dashboard/app/utils/cel/conditions.ts
index 580a6a37d..7ab12f16f 100644
--- a/frontend/dashboard/app/utils/cel/conditions.ts
+++ b/frontend/dashboard/app/utils/cel/conditions.ts
@@ -1,34 +1,31 @@
 // Shared attribute field type
-export interface AttributeField {
+export interface BaseAttributeField {
     id: string
     key: string
     type: string
     value: string | boolean | number
+    operator: string
     hint?: string
-    operator?: string
-    hasError?: boolean
-    errorMessage?: string
 }
 
+// For UI only - extends base with source
+export interface AttributeField extends BaseAttributeField {
+    source: 'fixed' | 'session' | 'ud'
+}
 export interface EventCondition {
     id: string
     type: string
-    attrs: AttributeField[]
-    ud_attrs: AttributeField[]
-    session_attrs: AttributeField[]
-}
-
-export interface AttributeCondition {
-    id: string
-    attrs: AttributeField[]
+    attrs: BaseAttributeField[]
+    ud_attrs: BaseAttributeField[]
+    session_attrs: BaseAttributeField[]
 }
 
 export interface TraceCondition {
     id: string
     spanName: string
     operator: string
-    ud_attrs: AttributeField[]
-    session_attrs: AttributeField[]
+    ud_attrs: BaseAttributeField[]
+    session_attrs: BaseAttributeField[]
 }
 
 export interface Conditions<T> {
@@ -37,5 +34,4 @@ export interface Conditions<T> {
 }
 
 export type EventConditions = Conditions<EventCondition>
-export type SessionConditions = Conditions<AttributeCondition>
 export type TraceConditions = Conditions<TraceCondition>
\ No newline at end of file
diff --git a/self-host/migrations/v0.10.x-add-default-targeting-rules.sh b/self-host/migrations/v0.10.x-add-default-targeting-rules.sh
new file mode 100755
index 000000000..694908595
--- /dev/null
+++ b/self-host/migrations/v0.10.x-add-default-targeting-rules.sh
@@ -0,0 +1,193 @@
+#!/usr/bin/env bash
+
+# exit on error
+set -e
+
+SCRIPT_DIR="$(cd -- "$(dirname -- "${BASH_SOURCE[0]}")" && pwd)"
+source "${SCRIPT_DIR}/../shared.sh"
+
+# Check if command is available
+has_command() {
+  if command -v "$1" &>/dev/null; then
+    return 0
+  else
+    return 1
+  fi
+}
+
+# Check if the script is run from the 'self-host' directory
+check_base_dir() {
+  local base_dir
+  base_dir=$(basename "$(pwd)")
+  if [[ "$base_dir" != "self-host" ]]; then
+    echo "Error: This script must be run from the 'self-host' directory."
+    exit 1
+  fi
+}
+
+# Set the docker-compose command
+set_docker_compose() {
+  if has_command docker-compose; then
+    DOCKER_COMPOSE="docker-compose"
+  elif docker compose version >/dev/null 2>&1; then
+    DOCKER_COMPOSE="docker compose"
+  else
+    echo "Neither 'docker compose' nor 'docker-compose' is available" >&2
+    exit 1
+  fi
+}
+
+# Start the postgres service
+start_postgres_service() {
+  $DOCKER_COMPOSE \
+    --file compose.yml \
+    --file compose.prod.yml \
+    up --wait -d postgres
+}
+
+# Shutdown the postgres service
+shutdown_postgres_service() {
+  $DOCKER_COMPOSE \
+    --file compose.yml \
+    --file compose.prod.yml \
+    down postgres
+}
+
+# Add default targeting rules data
+add_default_targeting_rules() {
+  echo "Adding default targeting rules..."
+  start_postgres_service
+
+  if ! $DOCKER_COMPOSE exec -T postgres psql -q -v ON_ERROR_STOP=1 -U postgres -d measure <<-'EOF'
+  do $$
+  declare
+    migration_user_id uuid;
+    event_rules_count int;
+    session_rules_count int;
+    trace_rules_count int;
+  begin
+    -- Use nil UUID for migration user
+    migration_user_id := '00000000-0000-0000-0000-000000000000'::uuid;
+
+    -- Check if rules already exist
+    select count(*) into event_rules_count from measure.event_targeting_rules;
+    select count(*) into session_rules_count from measure.session_targeting_rules;
+    select count(*) into trace_rules_count from measure.trace_targeting_rules;
+
+    -- Insert default event targeting rules only if table is empty
+    if event_rules_count = 0 then
+      insert into measure.event_targeting_rules (
+          id,
+          team_id,
+          app_id,
+          name,
+          condition,
+          collection_mode,
+          take_screenshot,
+          take_layout_snapshot,
+          sampling_rate,
+          is_default_behaviour,
+          created_at,
+          created_by
+      )
+      select
+          gen_random_uuid(),
+          a.team_id,
+          a.id,
+          rules.name,
+          rules.condition,
+          rules.collection_mode,
+          rules.take_screenshot,
+          rules.take_layout_snapshot,
+          rules.sampling_rate,
+          rules.is_default_behaviour,
+          now(),
+          migration_user_id
+      from measure.apps a
+      cross join (
+          values
+              ('Collect all Events', 'event_type == "*"', 'timeline', false, false, 0, true),
+              ('Collect all Crashes', '(event_type=="exception" && exception.handled==false)', 'sampled', true, false, 100, false),
+              ('Collect all ANRs', '(event_type=="anr")', 'sampled', true, false, 100, false),
+              ('Collect all Bug Reports', '(event_type=="bug_report")', 'sampled', false, false, 100, false),
+              ('Collect sampled Cold Launch events', '(event_type=="cold_launch")', 'sampled', false, false, 1, false),
+              ('Collect sampled Hot Launch events', '(event_type=="hot_launch")', 'sampled', false, false, 1, false),
+              ('Collect sampled Warm Launch events', '(event_type=="warm_launch")', 'sampled', false, false, 1, false),
+              ('Collect layout snapshots with clicks', '(event_type=="gesture_click")', 'timeline', false, true, 0, false)
+      ) as rules(name, condition, collection_mode, take_screenshot, take_layout_snapshot, sampling_rate, is_default_behaviour);
+    end if;
+
+    -- Insert default session targeting rules only if table is empty
+    if session_rules_count = 0 then
+      insert into measure.session_targeting_rules (
+          id,
+          team_id,
+          app_id,
+          name,
+          condition,
+          sampling_rate,
+          created_at,
+          created_by
+      )
+      select
+          gen_random_uuid(),
+          a.team_id,
+          a.id,
+          rules.name,
+          rules.condition,
+          rules.sampling_rate,
+          now(),
+          migration_user_id
+      from measure.apps a
+      cross join (
+          values
+              ('Sessions with a Crash', '(event_type=="exception" && exception.handled==false)', 100),
+              ('Sessions with an ANR', '(event_type=="anr")', 100),
+              ('Sessions with a Bug Report', '(event_type=="bug_report")', 100)
+      ) as rules(name, condition, sampling_rate);
+    end if;
+
+    -- Insert default trace targeting rule only if table is empty
+    if trace_rules_count = 0 then
+      insert into measure.trace_targeting_rules (
+          id,
+          team_id,
+          app_id,
+          name,
+          condition,
+          collection_mode,
+          sampling_rate,
+          is_default_behaviour,
+          created_at,
+          created_by
+      )
+      select
+          gen_random_uuid(),
+          a.team_id,
+          a.id,
+          'Collect all traces at 0.1 percent sampling rate',
+          'span.name == "*"',
+          'sampled',
+          0.1,
+          true,
+          now(),
+          migration_user_id
+      from measure.apps a;
+    end if;
+  end;
+  $$;
+EOF
+  then
+    echo "Failed to add default targeting rules"
+    shutdown_postgres_service
+    return 1
+  fi
+
+  echo "Successfully added default targeting rules"
+  shutdown_postgres_service
+}
+
+# kick things off
+check_base_dir
+set_docker_compose
+add_default_targeting_rules
\ No newline at end of file
diff --git a/self-host/postgres/20251107111347_create_event_targeting_rules_table.sql b/self-host/postgres/20251107111347_create_event_targeting_rules_table.sql
index 633a4fe5d..384d4c0db 100644
--- a/self-host/postgres/20251107111347_create_event_targeting_rules_table.sql
+++ b/self-host/postgres/20251107111347_create_event_targeting_rules_table.sql
@@ -3,32 +3,36 @@ create table if not exists measure.event_targeting_rules (
     id uuid primary key not null,
     team_id uuid not null,
     app_id uuid not null,
+    name text not null,
     sampling_rate numeric(9, 6) not null,
     condition text not null,
     collection_mode text not null,
     take_screenshot boolean not null default false,
     take_layout_snapshot boolean not null default false,
-    is_default_rule boolean not null default false,
+    is_default_behaviour boolean not null default false,
     created_at timestamptz not null default now(),
     created_by uuid not null,
-    updated_at timestamptz not null default now(),
-    updated_by uuid not null
+    updated_at timestamptz,
+    updated_by uuid,
+    auto_created boolean not null default false
 );
 
 comment on table measure.event_targeting_rules is 'table storing event targeting rules';
 comment on column measure.event_targeting_rules.team_id is 'id of team to which the rule belongs';
 comment on column measure.event_targeting_rules.app_id is 'app_id of the app to which the rule belongs';
+comment on column measure.event_targeting_rules.name is 'a user provided name of the rule';
 comment on column measure.event_targeting_rules.id is 'id of the rule';
 comment on column measure.event_targeting_rules.sampling_rate is 'the percentage sampling rate applied';
 comment on column measure.event_targeting_rules.condition is 'the condition represented as a CEL expression';
 comment on column measure.event_targeting_rules.collection_mode is 'the collection mode for the event (e.g., "sampled", "session_timeline", "none")';
-comment on column measure.event_targeting_rules.is_default_rule is 'whether this is the default rule';
+comment on column measure.event_targeting_rules.is_default_behaviour is 'whether this rule represents the default behavior';
 comment on column measure.event_targeting_rules.take_screenshot is 'whether to take a screenshot for the event';
 comment on column measure.event_targeting_rules.take_layout_snapshot is 'whether to take a layout snapshot for the event';
 comment on column measure.event_targeting_rules.created_at is 'utc timestamp at the time of rule creation';
 comment on column measure.event_targeting_rules.created_by is ' id of the user who created the rule';
 comment on column measure.event_targeting_rules.updated_at is 'utc timestamp at the time of rule update';
 comment on column measure.event_targeting_rules.updated_by is 'id of the user who updated the rule';
+comment on column measure.event_targeting_rules.auto_created is 'true if this rule was automatically created, false if created by a user';
 
 -- migrate:down
 drop table if exists measure.event_targeting_rules;
\ No newline at end of file
diff --git a/self-host/postgres/20251107111408_create_trace_targeting_rules_table.sql b/self-host/postgres/20251107111408_create_trace_targeting_rules_table.sql
index 897512566..ecc9854e6 100644
--- a/self-host/postgres/20251107111408_create_trace_targeting_rules_table.sql
+++ b/self-host/postgres/20251107111408_create_trace_targeting_rules_table.sql
@@ -3,28 +3,32 @@ create table if not exists measure.trace_targeting_rules (
     id uuid primary key not null,
     team_id uuid not null,
     app_id uuid not null,
+    name text not null,
     sampling_rate numeric(9, 6) not null,
     condition text not null,
     collection_mode text not null,
-    is_default_rule boolean not null default false,
+    is_default_behaviour boolean not null default false,
     created_at timestamptz not null default now(),
     created_by uuid not null,
-    updated_at timestamptz not null default now(),
-    updated_by uuid not null
+    updated_at timestamptz,
+    updated_by uuid,
+    auto_created boolean not null default false
 );
 
+comment on column measure.trace_targeting_rules.id is 'id of the rule';
 comment on table measure.trace_targeting_rules is 'table storing trace targeting rules';
 comment on column measure.trace_targeting_rules.team_id is 'id of team to which the rule belongs';
 comment on column measure.trace_targeting_rules.app_id is 'app_id of the app to which the rule belongs';
-comment on column measure.trace_targeting_rules.id is 'id of the rule';
+comment on column measure.trace_targeting_rules.name is 'a user provided name of the rule';
 comment on column measure.trace_targeting_rules.sampling_rate is 'the percentage sampling rate applied';
 comment on column measure.trace_targeting_rules.condition is 'the condition represented as a CEL expression';
 comment on column measure.trace_targeting_rules.collection_mode is 'the collection mode for the trace (e.g., "sampled", "session_timeline", "none")';
-comment on column measure.trace_targeting_rules.is_default_rule is 'whether this is the default rule';
+comment on column measure.trace_targeting_rules.is_default_behaviour is 'whether this rule represents the default behavior';
 comment on column measure.trace_targeting_rules.created_at is 'utc timestamp at the time of rule creation';
 comment on column measure.trace_targeting_rules.created_by is ' id of the user who created the rule';
 comment on column measure.trace_targeting_rules.updated_at is 'utc timestamp at the time of rule update';
 comment on column measure.trace_targeting_rules.updated_by is 'id of the user who updated the rule';
+comment on column measure.trace_targeting_rules.auto_created is 'true if this rule was automatically created, false if created by a user';
 
 -- migrate:down
 drop table if exists measure.trace_targeting_rules;
\ No newline at end of file
diff --git a/self-host/postgres/20251107111413_create_session_targeting_rules_table.sql b/self-host/postgres/20251107111413_create_session_targeting_rules_table.sql
index e1142b3fb..83433b881 100644
--- a/self-host/postgres/20251107111413_create_session_targeting_rules_table.sql
+++ b/self-host/postgres/20251107111413_create_session_targeting_rules_table.sql
@@ -3,24 +3,28 @@ create table if not exists measure.session_targeting_rules (
     id uuid primary key not null,
     team_id uuid not null,
     app_id uuid not null,
+    name text not null,
     sampling_rate numeric(9, 6) not null,
     condition text not null,
     created_at timestamptz not null default now(),
     created_by uuid not null,
-    updated_at timestamptz not null default now(),
-    updated_by uuid not null
+    updated_at timestamptz,
+    updated_by uuid,
+    auto_created boolean not null default false
 );
 
+comment on column measure.session_targeting_rules.id is 'id of the rule';
 comment on table measure.session_targeting_rules is 'table storing session targeting rules';
 comment on column measure.session_targeting_rules.team_id is 'id of team to which the rule belongs';
 comment on column measure.session_targeting_rules.app_id is 'app_id of the app to which the rule belongs';
-comment on column measure.session_targeting_rules.id is 'id of the rule';
+comment on column measure.session_targeting_rules.name is 'a user provided name of the rule';
 comment on column measure.session_targeting_rules.sampling_rate is 'the percentage sampling rate applied';
 comment on column measure.session_targeting_rules.condition is 'the condition represented as a CEL expression';
 comment on column measure.session_targeting_rules.created_at is 'utc timestamp at the time of rule creation';
 comment on column measure.session_targeting_rules.created_by is ' id of the user who created the rule';
 comment on column measure.session_targeting_rules.updated_at is 'utc timestamp at the time of rule update';
 comment on column measure.session_targeting_rules.updated_by is 'id of the user who updated the rule';
+comment on column measure.session_targeting_rules.auto_created is 'true if this rule was automatically created, false if created by a user';
 
 -- migrate:down
 drop table if exists measure.session_targeting_rules;
\ No newline at end of file

From fbaa6740a4ffed3c5183a782a6160a719ca5ca4a Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Tue, 18 Nov 2025 08:14:47 +0530
Subject: [PATCH 68/98] feat(frontend): improve auto complete dropdown

---
 frontend/dashboard/app/[teamId]/data/page.tsx |   4 -
 .../targeting/autocomplete_builder.tsx        | 211 ++++++++++++++++
 .../app/components/targeting/rule_builder.tsx | 231 +++++++++---------
 3 files changed, 326 insertions(+), 120 deletions(-)
 create mode 100644 frontend/dashboard/app/components/targeting/autocomplete_builder.tsx

diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index 38f4dadf0..648842939 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -246,10 +246,6 @@ export default function DataFilters({ params }: { params: { teamId: string } })
             {/* Main data rules UI */}
             {canShowContent() &&
                 <div className="flex flex-col items-start w-full">
-                    <div className={`py-1 w-full ${isLoading() ? 'visible' : 'invisible'}`}>
-                        <LoadingBar />
-                    </div>
-
                     {/* Event Rules Section */}
                     <div className="w-full">
                         <p className="font-display text-2xl">Event Rules</p>
diff --git a/frontend/dashboard/app/components/targeting/autocomplete_builder.tsx b/frontend/dashboard/app/components/targeting/autocomplete_builder.tsx
new file mode 100644
index 000000000..3f6949bcb
--- /dev/null
+++ b/frontend/dashboard/app/components/targeting/autocomplete_builder.tsx
@@ -0,0 +1,211 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { Popover, PopoverContent, PopoverAnchor } from "../popover"
+import { cn } from "@/app/utils/shadcn_utils"
+import DropdownSelect, { DropdownSelectType } from "../dropdown_select"
+
+interface AutocompleteInputWithOperatorProps {
+    operator: string
+    value: string
+    suggestions?: string[]
+    availableOperators: string[]
+    placeholder?: string
+    onValueChange: (value: string) => void
+    onOperatorChange: (operator: string) => void
+}
+
+export default function AutocompleteInputWithOperator({
+    operator,
+    value,
+    suggestions = [],
+    availableOperators,
+    placeholder = "Enter value...",
+    onValueChange,
+    onOperatorChange
+}: AutocompleteInputWithOperatorProps) {
+    const [suggestionsOpen, setSuggestionsOpen] = useState(false)
+    const [searchValue, setSearchValue] = useState("")
+    const [highlightedIndex, setHighlightedIndex] = useState(0)
+    const inputRef = useRef<HTMLInputElement>(null)
+    const listRef = useRef<HTMLDivElement>(null)
+    const itemRefs = useRef<Map<string, HTMLDivElement>>(new Map())
+
+    useEffect(() => {
+        setSearchValue(value)
+    }, [value])
+
+    const filteredSuggestions = searchValue
+        ? suggestions.filter(suggestion =>
+            suggestion.toLowerCase().includes(searchValue.toLowerCase())
+        )
+        : suggestions
+
+    // Reset highlighted index when filtered list changes
+    useEffect(() => {
+        setHighlightedIndex(0)
+    }, [filteredSuggestions.length])
+
+    // Use suggestion value as key for stable refs
+    const setItemRef = (suggestion: string, idx: number, el: HTMLDivElement | null) => {
+        const key = `${idx}-${suggestion}`
+        if (el) {
+            itemRefs.current.set(key, el)
+        } else {
+            itemRefs.current.delete(key)
+        }
+    }
+
+    const getItemRef = (idx: number) => {
+        if (idx >= 0 && idx < filteredSuggestions.length) {
+            const suggestion = filteredSuggestions[idx]
+            const key = `${idx}-${suggestion}`
+            return itemRefs.current.get(key)
+        }
+        return undefined
+    }
+
+    const handleSuggestionClick = (suggestion: string) => {
+        onValueChange(suggestion)
+        setSearchValue(suggestion)
+        setSuggestionsOpen(false)
+        inputRef.current?.focus()
+    }
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const newValue = e.target.value
+        setSearchValue(newValue)
+        onValueChange(newValue)
+        setSuggestionsOpen(true)
+    }
+
+    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (!suggestionsOpen || filteredSuggestions.length === 0) return
+
+        switch (e.key) {
+            case 'Tab':
+                if (filteredSuggestions.length > 0) {
+                    e.preventDefault()
+                    getItemRef(0)?.focus()
+                }
+                break
+            case 'Enter':
+                e.preventDefault()
+                if (filteredSuggestions[highlightedIndex]) {
+                    handleSuggestionClick(filteredSuggestions[highlightedIndex])
+                }
+                break
+            case 'Escape':
+                e.preventDefault()
+                setSuggestionsOpen(false)
+                inputRef.current?.focus()
+                break
+        }
+    }
+
+    const handleItemKeyDown = (e: React.KeyboardEvent<HTMLDivElement>, idx: number) => {
+        switch (e.key) {
+            case 'Enter':
+            case ' ':
+                e.preventDefault()
+                handleSuggestionClick(filteredSuggestions[idx])
+                break
+            case 'Escape':
+                e.preventDefault()
+                setSuggestionsOpen(false)
+                inputRef.current?.focus()
+                break
+        }
+    }
+
+    const handleItemBlur = () => {
+        setTimeout(() => {
+            const activeElement = document.activeElement
+            const isInputFocused = activeElement === inputRef.current
+            const isItemFocused = Array.from(itemRefs.current.values()).some(ref => ref === activeElement)
+
+            if (!isInputFocused && !isItemFocused) {
+                setSuggestionsOpen(false)
+            }
+        }, 0)
+    }
+
+    return (
+        <div className="flex items-center gap-2">
+            <DropdownSelect
+                type={DropdownSelectType.SingleString}
+                title="Condition"
+                items={availableOperators}
+                initialSelected={operator}
+                onChangeSelected={(selected) => {
+                    onOperatorChange(selected as string)
+                }}
+                buttonClassName="flex justify-between font-display border border-black w-fit min-w-[120px] select-none"
+            />
+
+            <Popover open={suggestionsOpen} onOpenChange={setSuggestionsOpen}>
+                <PopoverAnchor asChild>
+                    <input
+                        ref={inputRef}
+                        type="text"
+                        role="combobox"
+                        aria-expanded={suggestionsOpen}
+                        aria-autocomplete="list"
+                        aria-controls="suggestions-list"
+                        value={searchValue}
+                        onChange={handleInputChange}
+                        onKeyDown={handleInputKeyDown}
+                        onFocus={() => setSuggestionsOpen(true)}
+                        onBlur={() => setTimeout(() => {
+                            const activeElement = document.activeElement
+                            const isItemFocused = Array.from(itemRefs.current.values()).some(ref => ref === activeElement)
+                            if (!isItemFocused) {
+                                setSuggestionsOpen(false)
+                            }
+                        }, 0)}
+                        placeholder={placeholder}
+                        className="w-96 border rounded-md outline-hidden text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 font-body placeholder:text-neutral-400 border-black"
+                    />
+                </PopoverAnchor>
+                {suggestionsOpen && filteredSuggestions.length > 0 && (
+                    <PopoverContent
+                        className="p-1 w-96"
+                        align="start"
+                        onOpenAutoFocus={(e) => e.preventDefault()}
+                    >
+                        <div
+                            ref={listRef}
+                            id="suggestions-list"
+                            role="listbox"
+                            className="max-h-72 overflow-auto"
+                        >
+                            {filteredSuggestions.map((suggestion, idx) => (
+                                <div
+                                    key={`${idx}-${suggestion}`}
+                                    ref={el => setItemRef(suggestion, idx, el)}
+                                    role="option"
+                                    tabIndex={0}
+                                    aria-selected={idx === highlightedIndex}
+                                    className={cn(
+                                        "flex items-center px-2 py-1.5 cursor-default rounded-sm font-display text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-yellow-300",
+                                        idx === highlightedIndex && "bg-accent text-accent-foreground"
+                                    )}
+                                    onFocus={() => setHighlightedIndex(idx)}
+                                    onMouseEnter={() => setHighlightedIndex(idx)}
+                                    onMouseDown={(e) => {
+                                        e.preventDefault()
+                                        handleSuggestionClick(suggestion)
+                                    }}
+                                    onKeyDown={(e) => handleItemKeyDown(e, idx)}
+                                    onBlur={handleItemBlur}
+                                >
+                                    <span className="flex-1 truncate">{suggestion}</span>
+                                </div>
+                            ))}
+                        </div>
+                    </PopoverContent>
+                )}
+            </Popover>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/frontend/dashboard/app/components/targeting/rule_builder.tsx b/frontend/dashboard/app/components/targeting/rule_builder.tsx
index 66f5cf6e8..e70912c45 100644
--- a/frontend/dashboard/app/components/targeting/rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/rule_builder.tsx
@@ -13,6 +13,7 @@ import SamplingRateInput from "./sampling_rate_input"
 import DangerConfirmationDialog from "../danger_confirmation_dialog"
 import AttributeBuilder from "./attribute_builder"
 import { Plus } from "lucide-react"
+import AutocompleteInputWithOperator from "./autocomplete_builder"
 
 enum PageState {
     Loading,
@@ -37,6 +38,7 @@ interface RuleState {
         id: string
         eventType?: string
         spanName?: string
+        spanOperator?: string
         attributes: AttributeField[]
     }
     collectionMode: CollectionMode
@@ -122,26 +124,14 @@ export default function RuleBuilder({
     }
 
     const createEmptyTraceRuleState = (config: TraceTargetingConfigResponse): RuleState | null => {
-        if (!config.trace_config || config.trace_config.length === 0) {
-            console.error("No traces available in config")
-            return null
-        }
-
-        const firstTrace = config.trace_config[0]
-
-        if (!firstTrace) {
-            return null
-        }
-
-        const name = firstTrace.name
-
         return {
             name: '',
             collectionMode: 'timeline',
             conditionType: 'trace',
             condition: {
                 id: crypto.randomUUID(),
-                spanName: name,
+                spanName: '',
+                spanOperator: 'eq',
                 attributes: []
             },
             sampleRate: 100,
@@ -149,6 +139,7 @@ export default function RuleBuilder({
             take_screenshot: false,
         }
     }
+
     const convertToTraceRuleState = (ruleData: TraceTargetingRule): RuleState | null => {
         const parsed = celToConditions(ruleData.condition)
         const traceCondition = parsed.trace?.conditions[0]
@@ -170,6 +161,7 @@ export default function RuleBuilder({
             condition: {
                 id: traceCondition.id,
                 spanName: traceCondition.spanName,
+                spanOperator: traceCondition.operator || 'eq',
                 attributes: attributes
             },
             sampleRate: ruleData.sampling_rate,
@@ -503,7 +495,7 @@ export default function RuleBuilder({
             const traceCondition: TraceCondition = {
                 id: ruleState.condition.id,
                 spanName: ruleState.condition.spanName!,
-                operator: 'eq',
+                operator: ruleState.condition.spanOperator || 'eq',
                 ud_attrs: attributes.filter(a => a.source === 'ud'),
                 session_attrs: attributes.filter(a => a.source === 'session'),
             }
@@ -770,30 +762,31 @@ export default function RuleBuilder({
             .filter((e): e is EventTargetingConfig => 'type' in e)
             .map(e => e.type)
 
-        const eventTypeDropdown = (
-            <DropdownSelect
-                type={DropdownSelectType.SingleString}
-                title="Select event type"
-                items={eventTypes}
-                initialSelected={ruleState.condition.eventType ?? ''}
-                onChangeSelected={(selected) => handleEventTypeChange(selected as string)}
-            />
-        )
-
         return (
-            <div className="flex flex-wrap items-center gap-3">
-                <span className="font-display text-xl">When</span>
-                {eventTypeDropdown}
-                <span className="font-display text-xl">event occurs</span>
-                <Button
-                    type="button"
-                    variant="ghost"
-                    onClick={addAttribute}
-                    className="flex items-center gap-1 text-sm self-start"
-                >
-                    <Plus className="w-4 h-4" />
-                    Add Filter
-                </Button>
+            <div className="flex flex-col gap-2">
+                <div className="flex flex-wrap items-center gap-3">
+                    <span className="font-display text-xl">When</span>
+
+                    <DropdownSelect
+                        type={DropdownSelectType.SingleString}
+                        title="Select event type"
+                        items={eventTypes}
+                        initialSelected={ruleState.condition.eventType ?? ''}
+                        onChangeSelected={(selected) => handleEventTypeChange(selected as string)}
+                    />
+
+                    <span className="font-display text-xl">event occurs</span>
+
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        onClick={addAttribute}
+                        className="flex items-center gap-1 text-sm self-start"
+                    >
+                        <Plus className="w-4 h-4" />
+                        Add Filter
+                    </Button>
+                </div>
             </div>
         )
     }
@@ -806,30 +799,36 @@ export default function RuleBuilder({
             .filter((t): t is TraceTargetingConfig => 'name' in t)
             .map(t => t.name)
 
-        const traceNameDropdown = (
-            <DropdownSelect
-                type={DropdownSelectType.SingleString}
-                title="Select trace name"
-                items={traceNames}
-                initialSelected={ruleState.condition.spanName ?? ''}
-                onChangeSelected={(selected) => handleTraceTypeChange(selected as string)}
-            />
-        )
+        const operators = config.operator_types?.string || ['eq']
 
         return (
-            <div className="flex flex-wrap items-center gap-3">
-                <span className="font-display text-xl">When</span>
-                {traceNameDropdown}
-                <span className="font-display text-xl">trace ends</span>
-                <Button
-                    type="button"
-                    variant="ghost"
-                    onClick={addAttribute}
-                    className="flex items-center gap-1 text-sm self-start"
-                >
-                    <Plus className="w-4 h-4" />
-                    Add Filter
-                </Button>
+            <div className="flex flex-col gap-2">
+                <span className="font-display text-xl">When trace with name</span>
+
+                <div className="flex flex-wrap items-center gap-3">
+                    <AutocompleteInputWithOperator
+                        operator={ruleState.condition.spanOperator || "eq"}
+                        value={ruleState.condition.spanName || ""}
+                        suggestions={traceNames}
+                        availableOperators={operators}
+                        placeholder="Enter trace name"
+                        onValueChange={(value) =>
+                            setRuleState(prev =>
+                                prev ? { ...prev, condition: { ...prev.condition, spanName: value } } : prev
+                            )
+                        }
+                        onOperatorChange={(operator) =>
+                            setRuleState(prev =>
+                                prev ? { ...prev, condition: { ...prev.condition, spanOperator: operator } } : prev
+                            )
+                        }
+                    />
+                    <span className="font-display text-xl">ends</span>
+
+                    <Button type="button" variant="ghost" onClick={addAttribute}>
+                        <Plus className="w-4 h-4" /> Add Filter
+                    </Button>
+                </div>
             </div>
         )
     }
@@ -838,8 +837,8 @@ export default function RuleBuilder({
         if (!ruleState || !config) return null
 
         const sessionConfig = config as SessionTargetingConfigResponse
-        const effectiveType = ruleState.conditionType
 
+        // Dropdown for choosing event / trace
         const conditionTypeDropdown = (
             <DropdownSelect
                 type={DropdownSelectType.SingleString}
@@ -850,61 +849,61 @@ export default function RuleBuilder({
             />
         )
 
-        if (effectiveType === 'event') {
-            const eventTypes = sessionConfig.events
-                .filter((e): e is EventTargetingConfig => 'type' in e)
-                .map(e => e.type)
-
-            const eventTypeDropdown = (
-                <DropdownSelect
-                    type={DropdownSelectType.SingleString}
-                    title="Select event type"
-                    items={eventTypes}
-                    initialSelected={ruleState.condition.eventType ?? ''}
-                    onChangeSelected={(selected) => handleEventTypeChange(selected as string)}
-                />
-            )
-
-            return (
-                <div className="flex flex-wrap items-center gap-3">
-                    <span className="font-display text-xl">When</span>
-                    {conditionTypeDropdown}
-                    <span className="font-display text-xl">with type</span>
-                    {eventTypeDropdown}
-                    <span className="font-display text-xl">occurs</span>
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        onClick={addAttribute}
-                        className="flex items-center gap-1 text-sm self-start"
-                    >
-                        <Plus className="w-4 h-4" />
-                        Add Filter
-                    </Button>
-                </div>
-            )
-        } else {
-            const traceNames = sessionConfig.trace_config
-                .filter((t): t is TraceTargetingConfig => 'name' in t)
-                .map(t => t.name)
-
-            const traceNameDropdown = (
-                <DropdownSelect
-                    type={DropdownSelectType.SingleString}
-                    title="Select trace name"
-                    items={traceNames}
-                    initialSelected={ruleState.condition.spanName ?? ''}
-                    onChangeSelected={(selected) => handleTraceTypeChange(selected as string)}
-                />
-            )
-
-            return (
+        // Event types list
+        const eventTypes = sessionConfig.events
+            .filter((e): e is EventTargetingConfig => 'type' in e)
+            .map(e => e.type)
+
+        // Trace names list
+        const traceNames = sessionConfig.trace_config
+            .filter((t): t is TraceTargetingConfig => 'name' in t)
+            .map(t => t.name)
+
+        return (
+            <div className="flex flex-col gap-2">
+                {/* Row 1 */}
+                <span className="font-display text-xl">When session contains</span>
+
+                {/* Row 2 - always shows dropdown type selector */}
                 <div className="flex flex-wrap items-center gap-3">
-                    <span className="font-display text-xl">When</span>
                     {conditionTypeDropdown}
-                    <span className="font-display text-xl">with name</span>
-                    {traceNameDropdown}
-                    <span className="font-display text-xl">ends</span>
+
+                    {ruleState.conditionType === 'event' ? (
+                        <>
+                            <span className="font-display text-xl">with type</span>
+
+                            <DropdownSelect
+                                type={DropdownSelectType.SingleString}
+                                title="Select event type"
+                                items={eventTypes}
+                                initialSelected={ruleState.condition.eventType ?? ''}
+                                onChangeSelected={(selected) => handleEventTypeChange(selected as string)}
+                            />
+                        </>
+                    ) : (
+                        <>
+                            <span className="font-display text-xl">with name</span>
+
+                            <AutocompleteInputWithOperator
+                                operator={ruleState.condition.spanOperator || "eq"}
+                                value={ruleState.condition.spanName || ""}
+                                suggestions={traceNames}
+                                availableOperators={sessionConfig.operator_types?.string || ['eq']}
+                                placeholder="Enter trace name..."
+                                onValueChange={(value) =>
+                                    setRuleState(prev =>
+                                        prev ? { ...prev, condition: { ...prev.condition, spanName: value } } : prev
+                                    )
+                                }
+                                onOperatorChange={(operator) =>
+                                    setRuleState(prev =>
+                                        prev ? { ...prev, condition: { ...prev.condition, spanOperator: operator } } : prev
+                                    )
+                                }
+                            />
+                        </>
+                    )}
+
                     <Button
                         type="button"
                         variant="ghost"
@@ -915,8 +914,8 @@ export default function RuleBuilder({
                         Add Filter
                     </Button>
                 </div>
-            )
-        }
+            </div>
+        )
     }
 
     const renderThen = () => {

From 781969c1ead7b5eac6434f736622976a13f9e84d Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Tue, 18 Nov 2025 08:21:45 +0530
Subject: [PATCH 69/98] feat(frontend): refactor components to extract
 autocomplete component

---
 .../app/components/autocomplete_input.tsx     | 196 ++++++++++++++++
 .../targeting/autocomplete_builder.tsx        | 211 ------------------
 .../app/components/targeting/rule_builder.tsx |   7 +-
 .../targeting/trace_name_operator_input.tsx   |  46 ++++
 4 files changed, 246 insertions(+), 214 deletions(-)
 create mode 100644 frontend/dashboard/app/components/autocomplete_input.tsx
 delete mode 100644 frontend/dashboard/app/components/targeting/autocomplete_builder.tsx
 create mode 100644 frontend/dashboard/app/components/targeting/trace_name_operator_input.tsx

diff --git a/frontend/dashboard/app/components/autocomplete_input.tsx b/frontend/dashboard/app/components/autocomplete_input.tsx
new file mode 100644
index 000000000..bbdac5849
--- /dev/null
+++ b/frontend/dashboard/app/components/autocomplete_input.tsx
@@ -0,0 +1,196 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { Popover, PopoverContent, PopoverAnchor } from "./popover"
+import { cn } from "@/app/utils/shadcn_utils"
+
+interface AutocompleteInputProps {
+    value: string
+    suggestions?: string[]
+    placeholder?: string
+    onValueChange: (value: string) => void
+    className?: string
+}
+
+export default function AutocompleteInput({
+    value,
+    suggestions = [],
+    placeholder = "Enter value...",
+    onValueChange,
+    className = "w-96"
+}: AutocompleteInputProps) {
+    const [suggestionsOpen, setSuggestionsOpen] = useState(false)
+    const [searchValue, setSearchValue] = useState("")
+    const [highlightedIndex, setHighlightedIndex] = useState(0)
+    const inputRef = useRef<HTMLInputElement>(null)
+    const listRef = useRef<HTMLDivElement>(null)
+    const itemRefs = useRef<Map<string, HTMLDivElement>>(new Map())
+
+    useEffect(() => {
+        setSearchValue(value)
+    }, [value])
+
+    const filteredSuggestions = searchValue
+        ? suggestions.filter(suggestion =>
+            suggestion.toLowerCase().includes(searchValue.toLowerCase())
+        )
+        : suggestions
+
+    // Reset highlighted index when filtered list changes
+    useEffect(() => {
+        setHighlightedIndex(0)
+    }, [filteredSuggestions.length])
+
+    // Use suggestion value as key for stable refs
+    const setItemRef = (suggestion: string, idx: number, el: HTMLDivElement | null) => {
+        const key = `${idx}-${suggestion}`
+        if (el) {
+            itemRefs.current.set(key, el)
+        } else {
+            itemRefs.current.delete(key)
+        }
+    }
+
+    const getItemRef = (idx: number) => {
+        if (idx >= 0 && idx < filteredSuggestions.length) {
+            const suggestion = filteredSuggestions[idx]
+            const key = `${idx}-${suggestion}`
+            return itemRefs.current.get(key)
+        }
+        return undefined
+    }
+
+    const handleSuggestionClick = (suggestion: string) => {
+        onValueChange(suggestion)
+        setSearchValue(suggestion)
+        setSuggestionsOpen(false)
+        inputRef.current?.focus()
+    }
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const newValue = e.target.value
+        setSearchValue(newValue)
+        onValueChange(newValue)
+        setSuggestionsOpen(true)
+    }
+
+    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (!suggestionsOpen || filteredSuggestions.length === 0) return
+
+        switch (e.key) {
+            case 'Tab':
+                if (filteredSuggestions.length > 0) {
+                    e.preventDefault()
+                    getItemRef(0)?.focus()
+                }
+                break
+            case 'Enter':
+                e.preventDefault()
+                if (filteredSuggestions[highlightedIndex]) {
+                    handleSuggestionClick(filteredSuggestions[highlightedIndex])
+                }
+                break
+            case 'Escape':
+                e.preventDefault()
+                setSuggestionsOpen(false)
+                inputRef.current?.focus()
+                break
+        }
+    }
+
+    const handleItemKeyDown = (e: React.KeyboardEvent<HTMLDivElement>, idx: number) => {
+        switch (e.key) {
+            case 'Enter':
+            case ' ':
+                e.preventDefault()
+                handleSuggestionClick(filteredSuggestions[idx])
+                break
+            case 'Escape':
+                e.preventDefault()
+                setSuggestionsOpen(false)
+                inputRef.current?.focus()
+                break
+        }
+    }
+
+    const handleItemBlur = () => {
+        setTimeout(() => {
+            const activeElement = document.activeElement
+            const isInputFocused = activeElement === inputRef.current
+            const isItemFocused = Array.from(itemRefs.current.values()).some(ref => ref === activeElement)
+
+            if (!isInputFocused && !isItemFocused) {
+                setSuggestionsOpen(false)
+            }
+        }, 0)
+    }
+
+    return (
+        <Popover open={suggestionsOpen} onOpenChange={setSuggestionsOpen}>
+            <PopoverAnchor asChild>
+                <input
+                    ref={inputRef}
+                    type="text"
+                    role="combobox"
+                    aria-expanded={suggestionsOpen}
+                    aria-autocomplete="list"
+                    aria-controls="suggestions-list"
+                    value={searchValue}
+                    onChange={handleInputChange}
+                    onKeyDown={handleInputKeyDown}
+                    onFocus={() => setSuggestionsOpen(true)}
+                    onBlur={() => setTimeout(() => {
+                        const activeElement = document.activeElement
+                        const isItemFocused = Array.from(itemRefs.current.values()).some(ref => ref === activeElement)
+                        if (!isItemFocused) {
+                            setSuggestionsOpen(false)
+                        }
+                    }, 0)}
+                    placeholder={placeholder}
+                    className={cn(
+                        "border rounded-md outline-hidden text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 font-body placeholder:text-neutral-400 border-black",
+                        className
+                    )}
+                />
+            </PopoverAnchor>
+            {suggestionsOpen && filteredSuggestions.length > 0 && (
+                <PopoverContent
+                    className={cn("p-1", className)}
+                    align="start"
+                    onOpenAutoFocus={(e) => e.preventDefault()}
+                >
+                    <div
+                        ref={listRef}
+                        id="suggestions-list"
+                        role="listbox"
+                        className="max-h-72 overflow-auto"
+                    >
+                        {filteredSuggestions.map((suggestion, idx) => (
+                            <div
+                                key={`${idx}-${suggestion}`}
+                                ref={el => setItemRef(suggestion, idx, el)}
+                                role="option"
+                                tabIndex={0}
+                                aria-selected={idx === highlightedIndex}
+                                className={cn(
+                                    "flex items-center px-2 py-1.5 cursor-default rounded-sm font-display text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-yellow-300",
+                                    idx === highlightedIndex && "bg-accent text-accent-foreground"
+                                )}
+                                onFocus={() => setHighlightedIndex(idx)}
+                                onMouseEnter={() => setHighlightedIndex(idx)}
+                                onMouseDown={(e) => {
+                                    e.preventDefault()
+                                    handleSuggestionClick(suggestion)
+                                }}
+                                onKeyDown={(e) => handleItemKeyDown(e, idx)}
+                                onBlur={handleItemBlur}
+                            >
+                                <span className="flex-1 truncate">{suggestion}</span>
+                            </div>
+                        ))}
+                    </div>
+                </PopoverContent>
+            )}
+        </Popover>
+    )
+}
\ No newline at end of file
diff --git a/frontend/dashboard/app/components/targeting/autocomplete_builder.tsx b/frontend/dashboard/app/components/targeting/autocomplete_builder.tsx
deleted file mode 100644
index 3f6949bcb..000000000
--- a/frontend/dashboard/app/components/targeting/autocomplete_builder.tsx
+++ /dev/null
@@ -1,211 +0,0 @@
-"use client"
-
-import { useEffect, useRef, useState } from "react"
-import { Popover, PopoverContent, PopoverAnchor } from "../popover"
-import { cn } from "@/app/utils/shadcn_utils"
-import DropdownSelect, { DropdownSelectType } from "../dropdown_select"
-
-interface AutocompleteInputWithOperatorProps {
-    operator: string
-    value: string
-    suggestions?: string[]
-    availableOperators: string[]
-    placeholder?: string
-    onValueChange: (value: string) => void
-    onOperatorChange: (operator: string) => void
-}
-
-export default function AutocompleteInputWithOperator({
-    operator,
-    value,
-    suggestions = [],
-    availableOperators,
-    placeholder = "Enter value...",
-    onValueChange,
-    onOperatorChange
-}: AutocompleteInputWithOperatorProps) {
-    const [suggestionsOpen, setSuggestionsOpen] = useState(false)
-    const [searchValue, setSearchValue] = useState("")
-    const [highlightedIndex, setHighlightedIndex] = useState(0)
-    const inputRef = useRef<HTMLInputElement>(null)
-    const listRef = useRef<HTMLDivElement>(null)
-    const itemRefs = useRef<Map<string, HTMLDivElement>>(new Map())
-
-    useEffect(() => {
-        setSearchValue(value)
-    }, [value])
-
-    const filteredSuggestions = searchValue
-        ? suggestions.filter(suggestion =>
-            suggestion.toLowerCase().includes(searchValue.toLowerCase())
-        )
-        : suggestions
-
-    // Reset highlighted index when filtered list changes
-    useEffect(() => {
-        setHighlightedIndex(0)
-    }, [filteredSuggestions.length])
-
-    // Use suggestion value as key for stable refs
-    const setItemRef = (suggestion: string, idx: number, el: HTMLDivElement | null) => {
-        const key = `${idx}-${suggestion}`
-        if (el) {
-            itemRefs.current.set(key, el)
-        } else {
-            itemRefs.current.delete(key)
-        }
-    }
-
-    const getItemRef = (idx: number) => {
-        if (idx >= 0 && idx < filteredSuggestions.length) {
-            const suggestion = filteredSuggestions[idx]
-            const key = `${idx}-${suggestion}`
-            return itemRefs.current.get(key)
-        }
-        return undefined
-    }
-
-    const handleSuggestionClick = (suggestion: string) => {
-        onValueChange(suggestion)
-        setSearchValue(suggestion)
-        setSuggestionsOpen(false)
-        inputRef.current?.focus()
-    }
-
-    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const newValue = e.target.value
-        setSearchValue(newValue)
-        onValueChange(newValue)
-        setSuggestionsOpen(true)
-    }
-
-    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (!suggestionsOpen || filteredSuggestions.length === 0) return
-
-        switch (e.key) {
-            case 'Tab':
-                if (filteredSuggestions.length > 0) {
-                    e.preventDefault()
-                    getItemRef(0)?.focus()
-                }
-                break
-            case 'Enter':
-                e.preventDefault()
-                if (filteredSuggestions[highlightedIndex]) {
-                    handleSuggestionClick(filteredSuggestions[highlightedIndex])
-                }
-                break
-            case 'Escape':
-                e.preventDefault()
-                setSuggestionsOpen(false)
-                inputRef.current?.focus()
-                break
-        }
-    }
-
-    const handleItemKeyDown = (e: React.KeyboardEvent<HTMLDivElement>, idx: number) => {
-        switch (e.key) {
-            case 'Enter':
-            case ' ':
-                e.preventDefault()
-                handleSuggestionClick(filteredSuggestions[idx])
-                break
-            case 'Escape':
-                e.preventDefault()
-                setSuggestionsOpen(false)
-                inputRef.current?.focus()
-                break
-        }
-    }
-
-    const handleItemBlur = () => {
-        setTimeout(() => {
-            const activeElement = document.activeElement
-            const isInputFocused = activeElement === inputRef.current
-            const isItemFocused = Array.from(itemRefs.current.values()).some(ref => ref === activeElement)
-
-            if (!isInputFocused && !isItemFocused) {
-                setSuggestionsOpen(false)
-            }
-        }, 0)
-    }
-
-    return (
-        <div className="flex items-center gap-2">
-            <DropdownSelect
-                type={DropdownSelectType.SingleString}
-                title="Condition"
-                items={availableOperators}
-                initialSelected={operator}
-                onChangeSelected={(selected) => {
-                    onOperatorChange(selected as string)
-                }}
-                buttonClassName="flex justify-between font-display border border-black w-fit min-w-[120px] select-none"
-            />
-
-            <Popover open={suggestionsOpen} onOpenChange={setSuggestionsOpen}>
-                <PopoverAnchor asChild>
-                    <input
-                        ref={inputRef}
-                        type="text"
-                        role="combobox"
-                        aria-expanded={suggestionsOpen}
-                        aria-autocomplete="list"
-                        aria-controls="suggestions-list"
-                        value={searchValue}
-                        onChange={handleInputChange}
-                        onKeyDown={handleInputKeyDown}
-                        onFocus={() => setSuggestionsOpen(true)}
-                        onBlur={() => setTimeout(() => {
-                            const activeElement = document.activeElement
-                            const isItemFocused = Array.from(itemRefs.current.values()).some(ref => ref === activeElement)
-                            if (!isItemFocused) {
-                                setSuggestionsOpen(false)
-                            }
-                        }, 0)}
-                        placeholder={placeholder}
-                        className="w-96 border rounded-md outline-hidden text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 font-body placeholder:text-neutral-400 border-black"
-                    />
-                </PopoverAnchor>
-                {suggestionsOpen && filteredSuggestions.length > 0 && (
-                    <PopoverContent
-                        className="p-1 w-96"
-                        align="start"
-                        onOpenAutoFocus={(e) => e.preventDefault()}
-                    >
-                        <div
-                            ref={listRef}
-                            id="suggestions-list"
-                            role="listbox"
-                            className="max-h-72 overflow-auto"
-                        >
-                            {filteredSuggestions.map((suggestion, idx) => (
-                                <div
-                                    key={`${idx}-${suggestion}`}
-                                    ref={el => setItemRef(suggestion, idx, el)}
-                                    role="option"
-                                    tabIndex={0}
-                                    aria-selected={idx === highlightedIndex}
-                                    className={cn(
-                                        "flex items-center px-2 py-1.5 cursor-default rounded-sm font-display text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-yellow-300",
-                                        idx === highlightedIndex && "bg-accent text-accent-foreground"
-                                    )}
-                                    onFocus={() => setHighlightedIndex(idx)}
-                                    onMouseEnter={() => setHighlightedIndex(idx)}
-                                    onMouseDown={(e) => {
-                                        e.preventDefault()
-                                        handleSuggestionClick(suggestion)
-                                    }}
-                                    onKeyDown={(e) => handleItemKeyDown(e, idx)}
-                                    onBlur={handleItemBlur}
-                                >
-                                    <span className="flex-1 truncate">{suggestion}</span>
-                                </div>
-                            ))}
-                        </div>
-                    </PopoverContent>
-                )}
-            </Popover>
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/frontend/dashboard/app/components/targeting/rule_builder.tsx b/frontend/dashboard/app/components/targeting/rule_builder.tsx
index e70912c45..3d599a420 100644
--- a/frontend/dashboard/app/components/targeting/rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/rule_builder.tsx
@@ -13,7 +13,8 @@ import SamplingRateInput from "./sampling_rate_input"
 import DangerConfirmationDialog from "../danger_confirmation_dialog"
 import AttributeBuilder from "./attribute_builder"
 import { Plus } from "lucide-react"
-import AutocompleteInputWithOperator from "./autocomplete_builder"
+import AutocompleteInputWithOperator from "../autocomplete_input"
+import TraceOperatorNameInput from "./trace_name_operator_input"
 
 enum PageState {
     Loading,
@@ -806,7 +807,7 @@ export default function RuleBuilder({
                 <span className="font-display text-xl">When trace with name</span>
 
                 <div className="flex flex-wrap items-center gap-3">
-                    <AutocompleteInputWithOperator
+                    <TraceOperatorNameInput
                         operator={ruleState.condition.spanOperator || "eq"}
                         value={ruleState.condition.spanName || ""}
                         suggestions={traceNames}
@@ -884,7 +885,7 @@ export default function RuleBuilder({
                         <>
                             <span className="font-display text-xl">with name</span>
 
-                            <AutocompleteInputWithOperator
+                            <TraceOperatorNameInput
                                 operator={ruleState.condition.spanOperator || "eq"}
                                 value={ruleState.condition.spanName || ""}
                                 suggestions={traceNames}
diff --git a/frontend/dashboard/app/components/targeting/trace_name_operator_input.tsx b/frontend/dashboard/app/components/targeting/trace_name_operator_input.tsx
new file mode 100644
index 000000000..27be178ef
--- /dev/null
+++ b/frontend/dashboard/app/components/targeting/trace_name_operator_input.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import DropdownSelect, { DropdownSelectType } from "../dropdown_select"
+import AutocompleteInput from "./../autocomplete_input"
+
+interface TraceOperatorNameInputProps {
+    operator: string
+    value: string
+    suggestions?: string[]
+    availableOperators: string[]
+    placeholder?: string
+    onValueChange: (value: string) => void
+    onOperatorChange: (operator: string) => void
+}
+
+export default function TraceOperatorNameInput({
+    operator,
+    value,
+    suggestions = [],
+    availableOperators,
+    placeholder = "Enter trace name...",
+    onValueChange,
+    onOperatorChange
+}: TraceOperatorNameInputProps) {
+    return (
+        <div className="flex items-center gap-2">
+            <DropdownSelect
+                type={DropdownSelectType.SingleString}
+                title="Condition"
+                items={availableOperators}
+                initialSelected={operator}
+                onChangeSelected={(selected) => {
+                    onOperatorChange(selected as string)
+                }}
+                buttonClassName="flex justify-between font-display border border-black w-fit min-w-[120px] select-none"
+            />
+
+            <AutocompleteInput
+                value={value}
+                suggestions={suggestions}
+                placeholder={placeholder}
+                onValueChange={onValueChange}
+            />
+        </div>
+    )
+}
\ No newline at end of file

From 56e515ab098c8bf38b6cc0a780535adb553e8f52 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Tue, 18 Nov 2025 08:33:40 +0530
Subject: [PATCH 70/98] feat(frontend): fix ordering of rules in tables

---
 backend/api/measure/targeting_rules.go | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/backend/api/measure/targeting_rules.go b/backend/api/measure/targeting_rules.go
index b3654d41c..e147bb2aa 100644
--- a/backend/api/measure/targeting_rules.go
+++ b/backend/api/measure/targeting_rules.go
@@ -189,7 +189,7 @@ func GetEventTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter,
 		Select("auto_created").
 		Where("app_id = ?", af.AppID)
 
-	stmt.OrderBy("updated_at DESC")
+	stmt.OrderBy("COALESCE(updated_at, created_at) DESC")
 
 	defer stmt.Close()
 
@@ -265,7 +265,7 @@ func GetTraceTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter,
 		Select("auto_created").
 		Where("app_id = ?", af.AppID)
 
-	stmt.OrderBy("updated_at DESC")
+	stmt.OrderBy("COALESCE(updated_at, created_at) DESC")
 
 	defer stmt.Close()
 
@@ -337,7 +337,7 @@ func GetSessionTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilte
 		Select("auto_created").
 		Where("app_id = ?", af.AppID)
 
-	stmt.OrderBy("updated_at DESC")
+	stmt.OrderBy("COALESCE(updated_at, created_at) DESC")
 
 	defer stmt.Close()
 

From 5d76cd1e432bd89c90e342898f462300d79784fe Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Tue, 18 Nov 2025 08:51:10 +0530
Subject: [PATCH 71/98] feat(frontend): fix keyboard navigation in radio groups

---
 .../dashboard/app/components/autocomplete_input.tsx  |  2 +-
 .../app/components/targeting/rule_builder.tsx        | 12 ++++++------
 .../app/components/targeting/rules_table.tsx         |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/dashboard/app/components/autocomplete_input.tsx b/frontend/dashboard/app/components/autocomplete_input.tsx
index bbdac5849..2b6c841cb 100644
--- a/frontend/dashboard/app/components/autocomplete_input.tsx
+++ b/frontend/dashboard/app/components/autocomplete_input.tsx
@@ -17,7 +17,7 @@ export default function AutocompleteInput({
     suggestions = [],
     placeholder = "Enter value...",
     onValueChange,
-    className = "w-96"
+    className = "w-112"
 }: AutocompleteInputProps) {
     const [suggestionsOpen, setSuggestionsOpen] = useState(false)
     const [searchValue, setSearchValue] = useState("")
diff --git a/frontend/dashboard/app/components/targeting/rule_builder.tsx b/frontend/dashboard/app/components/targeting/rule_builder.tsx
index 3d599a420..65d914670 100644
--- a/frontend/dashboard/app/components/targeting/rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/rule_builder.tsx
@@ -950,7 +950,7 @@ export default function RuleBuilder({
                                         value="sampled"
                                         checked={ruleState.collectionMode === 'sampled'}
                                         onChange={() => updateRuleState({ collectionMode: 'sampled' })}
-                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
                                     />
                                     <SamplingRateInput
                                         value={ruleState.sampleRate || 100}
@@ -967,7 +967,7 @@ export default function RuleBuilder({
                                         value="timeline"
                                         checked={ruleState.collectionMode === 'timeline'}
                                         onChange={() => updateRuleState({ collectionMode: 'timeline' })}
-                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
                                     />
                                     <span className="text-sm font-body">Collect with timeline only</span>
                                 </label>
@@ -979,7 +979,7 @@ export default function RuleBuilder({
                                         value="disabled"
                                         checked={ruleState.collectionMode === 'disabled'}
                                         onChange={() => updateRuleState({ collectionMode: 'disabled' })}
-                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0"
+                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
                                     />
                                     <span className="text-sm font-body">Do not collect</span>
                                 </label>
@@ -999,7 +999,7 @@ export default function RuleBuilder({
                                             checked={ruleState.take_layout_snapshot === true && ruleState.take_screenshot === false}
                                             onChange={() => updateRuleState({ take_layout_snapshot: true, take_screenshot: false })}
                                             disabled={ruleState.collectionMode === 'disabled'}
-                                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0 disabled:cursor-not-allowed"
+                                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
                                         />
                                         <span className="text-sm font-body">Take layout snapshot</span>
                                     </label>
@@ -1012,7 +1012,7 @@ export default function RuleBuilder({
                                             checked={ruleState.take_screenshot === true && ruleState.take_layout_snapshot === false}
                                             onChange={() => updateRuleState({ take_screenshot: true, take_layout_snapshot: false })}
                                             disabled={ruleState.collectionMode === 'disabled'}
-                                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0 disabled:cursor-not-allowed"
+                                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
                                         />
                                         <span className="text-sm font-body">Take screenshot</span>
                                     </label>
@@ -1025,7 +1025,7 @@ export default function RuleBuilder({
                                             checked={ruleState.take_screenshot === false && ruleState.take_layout_snapshot === false}
                                             onChange={() => updateRuleState({ take_screenshot: false, take_layout_snapshot: false })}
                                             disabled={ruleState.collectionMode === 'disabled'}
-                                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0 disabled:cursor-not-allowed"
+                                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
                                         />
                                         <span className="text-sm font-body">No attachments</span>
                                     </label>
diff --git a/frontend/dashboard/app/components/targeting/rules_table.tsx b/frontend/dashboard/app/components/targeting/rules_table.tsx
index f4e351ae3..5e72ab08f 100644
--- a/frontend/dashboard/app/components/targeting/rules_table.tsx
+++ b/frontend/dashboard/app/components/targeting/rules_table.tsx
@@ -101,7 +101,7 @@ export default function RulesTable({ rules, tableType, onRuleClick, showOverride
 
             {rules.length === 0 ? (
                 <div className="text-sm font-body text-gray-500">
-                    No override rules configured
+                    No rules created
                 </div>
             ) : (
                 <div className="overflow-hidden">

From 024fcd2245b0174e8f96dc040b75189f65b45e60 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Tue, 18 Nov 2025 08:56:18 +0530
Subject: [PATCH 72/98] feat(frontend): disable attachments when event
 collection is disabled

---
 .../app/components/targeting/edit_default_rule_dialog.tsx   | 6 +++---
 .../dashboard/app/components/targeting/rule_builder.tsx     | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
index c1c66386a..820a429c5 100644
--- a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
+++ b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
@@ -114,7 +114,7 @@ export default function EditDefaultRuleDialog({
                                 checked={collectionMode === 'sampled'}
                                 onChange={() => setCollectionMode('sampled')}
                                 disabled={isSaving}
-                                className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
+                                className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
                             />
                             <SamplingRateInput
                                 value={sampleRate}
@@ -132,7 +132,7 @@ export default function EditDefaultRuleDialog({
                                 checked={collectionMode === 'timeline'}
                                 onChange={() => setCollectionMode('timeline')}
                                 disabled={isSaving}
-                                className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
+                                className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
                             />
                             <span className="text-sm font-body">Collect {displayNameLower} with session timeline only</span>
                         </label>
@@ -145,7 +145,7 @@ export default function EditDefaultRuleDialog({
                                 checked={collectionMode === 'disabled'}
                                 onChange={() => setCollectionMode('disabled')}
                                 disabled={isSaving}
-                                className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
+                                className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
                             />
                             <span className="text-sm font-body">Collect no {displayNameLower} by default</span>
                         </label>
diff --git a/frontend/dashboard/app/components/targeting/rule_builder.tsx b/frontend/dashboard/app/components/targeting/rule_builder.tsx
index 65d914670..113111ce0 100644
--- a/frontend/dashboard/app/components/targeting/rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/rule_builder.tsx
@@ -978,7 +978,7 @@ export default function RuleBuilder({
                                         name="collectionMode"
                                         value="disabled"
                                         checked={ruleState.collectionMode === 'disabled'}
-                                        onChange={() => updateRuleState({ collectionMode: 'disabled' })}
+                                        onChange={() => updateRuleState({ collectionMode: 'disabled', take_layout_snapshot: false, take_screenshot: false })}
                                         className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
                                     />
                                     <span className="text-sm font-body">Do not collect</span>

From 3081ea834e6b7b9f0656a2ab11e1ab3e6d3910a0 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Tue, 18 Nov 2025 11:59:07 +0530
Subject: [PATCH 73/98] feat(frontend): improve spacing in rule builder

---
 .../targeting/attribute_builder.tsx           |   2 +-
 .../app/components/targeting/rule_builder.tsx | 187 ++++++++++--------
 2 files changed, 102 insertions(+), 87 deletions(-)

diff --git a/frontend/dashboard/app/components/targeting/attribute_builder.tsx b/frontend/dashboard/app/components/targeting/attribute_builder.tsx
index fce68bdab..1a953bd95 100644
--- a/frontend/dashboard/app/components/targeting/attribute_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/attribute_builder.tsx
@@ -47,7 +47,7 @@ export default function AttributeBuilder({
 
     return (
         <div className={`flex items-center group`}>
-            <span className="ml-5 mr-4">and</span>
+            <span className="mr-4">and</span>
             {/* Attribute Key Dropdown or Text */}
             <div className="flex-[35] mr-3 min-w-0">
                 <AttributeKeyDropdownSelect
diff --git a/frontend/dashboard/app/components/targeting/rule_builder.tsx b/frontend/dashboard/app/components/targeting/rule_builder.tsx
index 113111ce0..a3ce778d7 100644
--- a/frontend/dashboard/app/components/targeting/rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/rule_builder.tsx
@@ -694,20 +694,6 @@ export default function RuleBuilder({
         }
     }
 
-    const handleTraceTypeChange = async (name: string) => {
-        setRuleState((prev) => {
-            if (!prev) return prev;
-
-            return {
-                ...prev,
-                condition: {
-                    ...prev.condition,
-                    spanName: name
-                }
-            };
-        });
-    };
-
     const closeDeleteDialog = (() => {
         setUiState(prev => ({ ...prev, showDeleteDialog: false }))
     })
@@ -764,10 +750,11 @@ export default function RuleBuilder({
             .map(e => e.type)
 
         return (
-            <div className="flex flex-col gap-2">
-                <div className="flex flex-wrap items-center gap-3">
-                    <span className="font-display text-xl">When</span>
+            <div className="flex flex-col gap-4">
+                <span className="font-display text-xl">When</span>
 
+                <div className="flex items-center gap-3">
+                    <span className="font-display text-base text-gray-600">Event of type</span>
                     <DropdownSelect
                         type={DropdownSelectType.SingleString}
                         title="Select event type"
@@ -775,19 +762,22 @@ export default function RuleBuilder({
                         initialSelected={ruleState.condition.eventType ?? ''}
                         onChangeSelected={(selected) => handleEventTypeChange(selected as string)}
                     />
-
-                    <span className="font-display text-xl">event occurs</span>
-
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        onClick={addAttribute}
-                        className="flex items-center gap-1 text-sm self-start"
-                    >
-                        <Plus className="w-4 h-4" />
-                        Add Filter
-                    </Button>
+                    <span className="font-display text-base text-gray-600">occurs</span>
                 </div>
+
+                {ruleState.condition.attributes.length === 0 && (
+                    <div>
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            onClick={addAttribute}
+                            className="flex items-center gap-1.5 text-sm -ml-2"
+                        >
+                            <Plus className="w-4 h-4" />
+                            Add Filter
+                        </Button>
+                    </div>
+                )}
             </div>
         )
     }
@@ -803,10 +793,11 @@ export default function RuleBuilder({
         const operators = config.operator_types?.string || ['eq']
 
         return (
-            <div className="flex flex-col gap-2">
-                <span className="font-display text-xl">When trace with name</span>
+            <div className="flex flex-col gap-4">
+                <span className="font-display text-xl">When</span>
 
-                <div className="flex flex-wrap items-center gap-3">
+                <div className="flex items-center gap-3">
+                    <span className="font-display text-base text-gray-600">Trace with name</span>
                     <TraceOperatorNameInput
                         operator={ruleState.condition.spanOperator || "eq"}
                         value={ruleState.condition.spanName || ""}
@@ -824,12 +815,22 @@ export default function RuleBuilder({
                             )
                         }
                     />
-                    <span className="font-display text-xl">ends</span>
-
-                    <Button type="button" variant="ghost" onClick={addAttribute}>
-                        <Plus className="w-4 h-4" /> Add Filter
-                    </Button>
+                    <span className="font-display text-base text-gray-600">ends</span>
                 </div>
+
+                {ruleState.condition.attributes.length === 0 && (
+                    <div>
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            onClick={addAttribute}
+                            className="flex items-center gap-1.5 text-sm -ml-2"
+                        >
+                            <Plus className="w-4 h-4" />
+                            Add Filter
+                        </Button>
+                    </div>
+                )}
             </div>
         )
     }
@@ -839,17 +840,6 @@ export default function RuleBuilder({
 
         const sessionConfig = config as SessionTargetingConfigResponse
 
-        // Dropdown for choosing event / trace
-        const conditionTypeDropdown = (
-            <DropdownSelect
-                type={DropdownSelectType.SingleString}
-                title="Select condition type"
-                items={['event', 'trace']}
-                initialSelected={ruleState.conditionType}
-                onChangeSelected={(selected) => handleConditionTypeChange(selected as 'event' | 'trace')}
-            />
-        )
-
         // Event types list
         const eventTypes = sessionConfig.events
             .filter((e): e is EventTargetingConfig => 'type' in e)
@@ -861,18 +851,22 @@ export default function RuleBuilder({
             .map(t => t.name)
 
         return (
-            <div className="flex flex-col gap-2">
-                {/* Row 1 */}
-                <span className="font-display text-xl">When session contains</span>
+            <div className="flex flex-col gap-4">
+                <span className="font-display text-xl">When Session contains</span>
 
-                {/* Row 2 - always shows dropdown type selector */}
-                <div className="flex flex-wrap items-center gap-3">
-                    {conditionTypeDropdown}
+                {/* Condition type selector row */}
+                <div className="flex items-center gap-3">
+                    <DropdownSelect
+                        type={DropdownSelectType.SingleString}
+                        title="Select condition type"
+                        items={['event', 'trace']}
+                        initialSelected={ruleState.conditionType}
+                        onChangeSelected={(selected) => handleConditionTypeChange(selected as 'event' | 'trace')}
+                    />
 
                     {ruleState.conditionType === 'event' ? (
                         <>
-                            <span className="font-display text-xl">with type</span>
-
+                            <span className="font-display text-base text-gray-600">with type</span>
                             <DropdownSelect
                                 type={DropdownSelectType.SingleString}
                                 title="Select event type"
@@ -883,8 +877,7 @@ export default function RuleBuilder({
                         </>
                     ) : (
                         <>
-                            <span className="font-display text-xl">with name</span>
-
+                            <span className="font-display text-base text-gray-600">with name</span>
                             <TraceOperatorNameInput
                                 operator={ruleState.condition.spanOperator || "eq"}
                                 value={ruleState.condition.spanName || ""}
@@ -904,17 +897,21 @@ export default function RuleBuilder({
                             />
                         </>
                     )}
-
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        onClick={addAttribute}
-                        className="flex items-center gap-1 text-sm self-start"
-                    >
-                        <Plus className="w-4 h-4" />
-                        Add Filter
-                    </Button>
                 </div>
+
+                {ruleState.condition.attributes.length === 0 && (
+                    <div>
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            onClick={addAttribute}
+                            className="font-medium flex items-center gap-1.5 text-sm -ml-2"
+                        >
+                            <Plus className="w-4 h-4" />
+                            Add Filter
+                        </Button>
+                    </div>
+                )}
             </div>
         )
     }
@@ -1277,7 +1274,6 @@ export default function RuleBuilder({
                 allAttributeKeys[key] = 'ud'
             }
         } else {
-            // trace type
             const traceConfig = config as TraceTargetingConfigResponse | SessionTargetingConfigResponse
             const sessionAttrKeys = traceConfig.session_attrs?.map(a => a.key) ?? []
             const udAttrKeys = 'trace_ud_attrs' in traceConfig
@@ -1292,8 +1288,12 @@ export default function RuleBuilder({
             }
         }
 
+        if (ruleState.condition.attributes.length === 0) {
+            return null
+        }
+
         return (
-            <div className="flex flex-col gap-3">
+            <div className="flex flex-col gap-6">
                 {ruleState.condition.attributes.map(attr => (
                     <AttributeBuilder
                         key={attr.id}
@@ -1315,6 +1315,18 @@ export default function RuleBuilder({
                         allowDelete
                     />
                 ))}
+
+                <div>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        onClick={addAttribute}
+                        className="flex items-center gap-1.5 text-sm self-start -ml-2"
+                    >
+                        <Plus className="w-4 h-4" />
+                        Add Filter
+                    </Button>
+                </div>
             </div>
         )
     }
@@ -1385,32 +1397,35 @@ export default function RuleBuilder({
 
             {/* Main content */}
             {uiState.pageState == PageState.Success && (
-                <div className="flex flex-col gap-4 w-full">
+                <div className="flex flex-col gap-6 w-full">
                     {type === 'event' && renderEventWhen()}
                     {type === 'trace' && renderTraceWhen()}
                     {type === 'timeline' && renderTimelineWhen()}
 
-                    <div className="flex flex-col gap-3">
-                        {renderAttributes()}
-                    </div>
+                    {renderAttributes()}
 
                     <div className="py-2" />
 
                     {renderThen()}
 
                     <div className='py-2' />
-                    <p className="font-display text-xl max-w-6xl">Rule Name</p>
-                    <input
-                        type="text"
-                        placeholder="Enter a rule name"
-                        maxLength={64}
-                        value={ruleState?.name}
-                        onChange={handleRuleNameChange}
-                        className={`w-96 border rounded-md outline-hidden text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 mt-4 font-body disabled:opacity-50 disabled:cursor-not-allowed ${uiState.ruleNameError ? 'border-red-500' : 'border-black'}`}
-                    />
-                    {uiState.ruleNameError && (
-                        <p className="text-red-600 text-sm ml-1">Rule name is required</p>
-                    )}
+
+                    <div className="flex flex-col gap-2">
+                        <p className="font-display text-xl max-w-6xl">Rule Name</p>
+
+                        <div className="py-0.5" />
+                        <input
+                            type="text"
+                            placeholder="Enter a rule name"
+                            maxLength={64}
+                            value={ruleState?.name}
+                            onChange={handleRuleNameChange}
+                            className={`w-96 border rounded-md outline-hidden text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 font-body disabled:opacity-50 disabled:cursor-not-allowed ${uiState.ruleNameError ? 'border-red-500' : 'border-black'}`}
+                        />
+                        {uiState.ruleNameError && (
+                            <p className="text-red-600 text-sm ml-1">Rule name is required</p>
+                        )}
+                    </div>
 
                     <div className="py-6" />
 

From 6653d42876f04c003844aa15c8ff273bae624c89 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Tue, 18 Nov 2025 13:23:57 +0530
Subject: [PATCH 74/98] feat(frontend): improve spacing in table

---
 .../app/components/targeting/rules_table.tsx  | 26 +++++++------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/frontend/dashboard/app/components/targeting/rules_table.tsx b/frontend/dashboard/app/components/targeting/rules_table.tsx
index 5e72ab08f..346c87e12 100644
--- a/frontend/dashboard/app/components/targeting/rules_table.tsx
+++ b/frontend/dashboard/app/components/targeting/rules_table.tsx
@@ -60,11 +60,9 @@ export default function RulesTable({ rules, tableType, onRuleClick, showOverride
                 const fullDisplay = attachmentDisplay ? `${collectionDisplay}, ${attachmentDisplay}` : collectionDisplay
 
                 return (
-                    <>
-                        <p className='text-xs truncate select-none text-gray-500'>
-                            {fullDisplay}
-                        </p>
-                    </>
+                    <p className='text-xs truncate select-none text-gray-500'>
+                        {fullDisplay}
+                    </p>
                 )
 
             case 'trace':
@@ -110,8 +108,8 @@ export default function RulesTable({ rules, tableType, onRuleClick, showOverride
                             <TableHeader className="sticky top-0 bg-white z-10">
                                 <TableRow>
                                     <TableHead className="w-[60%]">Rule</TableHead>
-                                    <TableHead className="w-[20%]">Created</TableHead>
-                                    <TableHead className="w-[20%]">Modified</TableHead>
+                                    <TableHead className="w-[20%] text-center">Created</TableHead>
+                                    <TableHead className="w-[20%] text-center">Modified</TableHead>
                                 </TableRow>
                             </TableHeader>
                         </Table>
@@ -130,18 +128,14 @@ export default function RulesTable({ rules, tableType, onRuleClick, showOverride
                                             <div className='py-1' />
                                             {renderCollectionMode(rule)}
                                         </TableCell>
-                                        <TableCell className="w-[20%] p-4">
+                                        <TableCell className="w-[20%] text-center p-4">
                                             <p className='truncate select-none'>{formatDateToHumanReadableDate(rule.created_at)}</p>
                                             <div className='py-1' />
                                             <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(rule.created_at)}</p>
-                                            {rule.created_by && (
-                                                <>
-                                                    <div className='py-1' />
-                                                    <p className='text-xs truncate text-gray-500 select-none'>by {rule.created_by}</p>
-                                                </>
-                                            )}
+                                            <div className='py-1' />
+                                            <p className='text-xs truncate text-gray-500 select-none'>{rule.created_by ? rule.created_by : "Default"}</p>
                                         </TableCell>
-                                        <TableCell className="w-[20%] p-4">
+                                        <TableCell className="w-[20%] text-center p-4">
                                             {rule.updated_at ? (
                                                 <>
                                                     <p className='truncate select-none'>{formatDateToHumanReadableDate(rule.updated_at)}</p>
@@ -150,7 +144,7 @@ export default function RulesTable({ rules, tableType, onRuleClick, showOverride
                                                     {rule.updated_by && (
                                                         <>
                                                             <div className='py-1' />
-                                                            <p className='text-xs truncate text-gray-500 select-none'>by {rule.updated_by}</p>
+                                                            <p className='text-xs truncate text-gray-500 select-none'>{rule.updated_by}</p>
                                                         </>
                                                     )}
                                                 </>

From 6e6497861fbc6c719ecd379a6d32b961d1ab2226 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Tue, 18 Nov 2025 13:43:56 +0530
Subject: [PATCH 75/98] feat(frontend): do not autofill trace name

---
 backend/api/measure/targeting_rules.go                 |  4 ++--
 frontend/dashboard/app/api/api_calls.ts                |  2 +-
 .../app/components/targeting/rule_builder.tsx          | 10 ++--------
 3 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/backend/api/measure/targeting_rules.go b/backend/api/measure/targeting_rules.go
index e147bb2aa..0bfb19ad5 100644
--- a/backend/api/measure/targeting_rules.go
+++ b/backend/api/measure/targeting_rules.go
@@ -127,7 +127,7 @@ type EventTargetingConfig struct {
 // Trace targeting config used
 // by the dashboard.
 type TraceTargetingConfig struct {
-	Traces            []TraceConfig `json:"trace_config"`
+	Traces            []TraceConfig `json:"traces"`
 	SessionAttrs      []AttrConfig  `json:"session_attrs"`
 	TraceUDAttributes []AttrConfig  `json:"trace_ud_attrs"`
 	OperatorTypes     OperatorTypes `json:"operator_types"`
@@ -137,7 +137,7 @@ type TraceTargetingConfig struct {
 // by the dashboard.
 type SessionTargetingConfig struct {
 	Events            []EventConfig `json:"events"`
-	Traces            []TraceConfig `json:"trace_config"`
+	Traces            []TraceConfig `json:"traces"`
 	EventUdAttrs      []AttrConfig  `json:"event_ud_attrs"`
 	TraceUDAttributes []AttrConfig  `json:"trace_ud_attrs"`
 	SessionAttrs      []AttrConfig  `json:"session_attrs"`
diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index e75c06702..7208dc8e3 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -1272,7 +1272,7 @@ export type TraceTargetingConfigResponse = {
 
 export type SessionTargetingConfigResponse = {
   events: EventTargetingConfig[];
-  trace_config: TraceTargetingConfig[];
+  traces: TraceTargetingConfig[];
   event_ud_attrs: AttributeTargetingConfig[];
   trace_ud_attrs: AttributeTargetingConfig[];
   session_attrs: AttributeTargetingConfig[];
diff --git a/frontend/dashboard/app/components/targeting/rule_builder.tsx b/frontend/dashboard/app/components/targeting/rule_builder.tsx
index a3ce778d7..a5bc3d39b 100644
--- a/frontend/dashboard/app/components/targeting/rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/rule_builder.tsx
@@ -13,7 +13,6 @@ import SamplingRateInput from "./sampling_rate_input"
 import DangerConfirmationDialog from "../danger_confirmation_dialog"
 import AttributeBuilder from "./attribute_builder"
 import { Plus } from "lucide-react"
-import AutocompleteInputWithOperator from "../autocomplete_input"
 import TraceOperatorNameInput from "./trace_name_operator_input"
 
 enum PageState {
@@ -674,11 +673,6 @@ export default function RuleBuilder({
                 }
             })
         } else {
-            const firstTrace = sessionConfig.trace_config[0]
-            if (!firstTrace || !('name' in firstTrace)) return
-
-            const traceConfig = firstTrace as TraceTargetingConfig
-
             setRuleState((prev) => {
                 if (!prev) return prev
                 return {
@@ -686,7 +680,7 @@ export default function RuleBuilder({
                     conditionType: 'trace',
                     condition: {
                         id: crypto.randomUUID(),
-                        spanName: traceConfig.name,
+                        spanName: "",
                         attributes: []
                     }
                 }
@@ -846,7 +840,7 @@ export default function RuleBuilder({
             .map(e => e.type)
 
         // Trace names list
-        const traceNames = sessionConfig.trace_config
+        const traceNames = sessionConfig.traces
             .filter((t): t is TraceTargetingConfig => 'name' in t)
             .map(t => t.name)
 

From b5a733d7713715a7368fe3d3086b3aceddb1cff2 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Tue, 18 Nov 2025 14:12:05 +0530
Subject: [PATCH 76/98] feat(frontend): modify hint

---
 frontend/dashboard/app/components/targeting/rule_builder.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/dashboard/app/components/targeting/rule_builder.tsx b/frontend/dashboard/app/components/targeting/rule_builder.tsx
index a5bc3d39b..fa9020abd 100644
--- a/frontend/dashboard/app/components/targeting/rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/rule_builder.tsx
@@ -877,7 +877,7 @@ export default function RuleBuilder({
                                 value={ruleState.condition.spanName || ""}
                                 suggestions={traceNames}
                                 availableOperators={sessionConfig.operator_types?.string || ['eq']}
-                                placeholder="Enter trace name..."
+                                placeholder="Enter trace name"
                                 onValueChange={(value) =>
                                     setRuleState(prev =>
                                         prev ? { ...prev, condition: { ...prev.condition, spanName: value } } : prev

From f6a1838070d90bb84b1cc84dfcf5aafc3e72a4fa Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Tue, 18 Nov 2025 14:29:19 +0530
Subject: [PATCH 77/98] feat(frontend): populate session attribute values

---
 backend/api/measure/app.go             | 183 ++++++++++++++++++++-----
 backend/api/measure/targeting_rules.go |  85 +++++++++---
 2 files changed, 216 insertions(+), 52 deletions(-)

diff --git a/backend/api/measure/app.go b/backend/api/measure/app.go
index cd94d5739..09dad709b 100644
--- a/backend/api/measure/app.go
+++ b/backend/api/measure/app.go
@@ -6492,6 +6492,7 @@ func GetEventTargetingRules(c *gin.Context) {
 
 	af := filter.AppFilter{
 		AppID: id,
+		Limit: filter.DefaultPaginationLimit,
 	}
 
 	if err := c.ShouldBindQuery(&af); err != nil {
@@ -6518,16 +6519,15 @@ func GetEventTargetingRules(c *gin.Context) {
 		return
 	}
 
-	// TODO: review how to handle validation for targeting rules
-	// msg := "event targeting rules request validation failed"
-	// if err := af.Validate(); err != nil {
-	// 	fmt.Println(msg, err)
-	// 	c.JSON(http.StatusBadRequest, gin.H{
-	// 		"error":   msg,
-	// 		"details": err.Error(),
-	// 	})
-	// 	return
-	// }
+	msg := "event targeting rules request validation failed"
+	if err := af.Validate(); err != nil {
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error":   msg,
+			"details": err.Error(),
+		})
+		return
+	}
 
 	app := App{
 		ID: &id,
@@ -6591,6 +6591,7 @@ func GetTraceTargetingRules(c *gin.Context) {
 
 	af := filter.AppFilter{
 		AppID: id,
+		Limit: filter.DefaultPaginationLimit,
 	}
 
 	if err := c.ShouldBindQuery(&af); err != nil {
@@ -6617,16 +6618,15 @@ func GetTraceTargetingRules(c *gin.Context) {
 		return
 	}
 
-	// TODO: review how to handle validation for targeting rules
-	// msg := "trace targeting rules request validation failed"
-	// if err := af.Validate(); err != nil {
-	// 	fmt.Println(msg, err)
-	// 	c.JSON(http.StatusBadRequest, gin.H{
-	// 		"error":   msg,
-	// 		"details": err.Error(),
-	// 	})
-	// 	return
-	// }
+	msg := "trace targeting rules request validation failed"
+	if err := af.Validate(); err != nil {
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error":   msg,
+			"details": err.Error(),
+		})
+		return
+	}
 
 	app := App{
 		ID: &id,
@@ -6690,6 +6690,7 @@ func GetSessionTargetingRules(c *gin.Context) {
 
 	af := filter.AppFilter{
 		AppID: id,
+		Limit: filter.DefaultPaginationLimit,
 	}
 
 	if err := c.ShouldBindQuery(&af); err != nil {
@@ -6716,16 +6717,15 @@ func GetSessionTargetingRules(c *gin.Context) {
 		return
 	}
 
-	// TODO: review how to handle validation for targeting rules
-	// msg := "session targeting rules request validation failed"
-	// if err := af.Validate(); err != nil {
-	// 	fmt.Println(msg, err)
-	// 	c.JSON(http.StatusBadRequest, gin.H{
-	// 		"error":   msg,
-	// 		"details": err.Error(),
-	// 	})
-	// 	return
-	// }
+	msg := "session targeting rules request validation failed"
+	if err := af.Validate(); err != nil {
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error":   msg,
+			"details": err.Error(),
+		})
+		return
+	}
 
 	app := App{
 		ID: &id,
@@ -6975,6 +6975,45 @@ func GetEventTargetingRuleConfig(c *gin.Context) {
 		return
 	}
 
+	af := filter.AppFilter{
+		AppID: id,
+		Limit: filter.DefaultPaginationLimit,
+	}
+
+	if err := c.ShouldBindQuery(&af); err != nil {
+		msg := `failed to parse query parameters`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error":   msg,
+			"details": err.Error(),
+		})
+		return
+	}
+
+	if err := af.Expand(ctx); err != nil {
+		msg := `failed to expand filters`
+		fmt.Println(msg, err)
+		status := http.StatusInternalServerError
+		if errors.Is(err, pgx.ErrNoRows) {
+			status = http.StatusNotFound
+		}
+		c.JSON(status, gin.H{
+			"error":   msg,
+			"details": err.Error(),
+		})
+		return
+	}
+
+	msg := "event targeting rules request validation failed"
+	if err := af.Validate(); err != nil {
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error":   msg,
+			"details": err.Error(),
+		})
+		return
+	}
+
 	app := App{
 		ID: &id,
 	}
@@ -7047,7 +7086,7 @@ func GetEventTargetingRuleConfig(c *gin.Context) {
 		app.OSName = opsys.Unknown
 	}
 
-	config, err := GetEventTargetingConfig(ctx, id, app.OSName)
+	config, err := GetEventTargetingConfig(ctx, &af)
 	if err != nil {
 		msg := "failed to get event targeting rule config"
 		fmt.Println(msg, err)
@@ -7068,6 +7107,45 @@ func GetTraceTargetingRuleConfig(c *gin.Context) {
 		return
 	}
 
+	af := filter.AppFilter{
+		AppID: id,
+		Limit: filter.DefaultPaginationLimit,
+	}
+
+	if err := c.ShouldBindQuery(&af); err != nil {
+		msg := `failed to parse query parameters`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error":   msg,
+			"details": err.Error(),
+		})
+		return
+	}
+
+	if err := af.Expand(ctx); err != nil {
+		msg := `failed to expand filters`
+		fmt.Println(msg, err)
+		status := http.StatusInternalServerError
+		if errors.Is(err, pgx.ErrNoRows) {
+			status = http.StatusNotFound
+		}
+		c.JSON(status, gin.H{
+			"error":   msg,
+			"details": err.Error(),
+		})
+		return
+	}
+
+	msg := "trace targeting rules request validation failed"
+	if err := af.Validate(); err != nil {
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error":   msg,
+			"details": err.Error(),
+		})
+		return
+	}
+
 	app := App{
 		ID: &id,
 	}
@@ -7140,7 +7218,7 @@ func GetTraceTargetingRuleConfig(c *gin.Context) {
 		app.OSName = opsys.Unknown
 	}
 
-	config, err := GetTraceTargetingConfig(ctx, id, app.OSName)
+	config, err := GetTraceTargetingConfig(ctx, &af)
 	if err != nil {
 		msg := "failed to get trace targeting rule config"
 		fmt.Println(msg, err)
@@ -7160,6 +7238,45 @@ func GetSessionTargetingRuleConfig(c *gin.Context) {
 		return
 	}
 
+	af := filter.AppFilter{
+		AppID: id,
+		Limit: filter.DefaultPaginationLimit,
+	}
+
+	if err := c.ShouldBindQuery(&af); err != nil {
+		msg := `failed to parse query parameters`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error":   msg,
+			"details": err.Error(),
+		})
+		return
+	}
+
+	if err := af.Expand(ctx); err != nil {
+		msg := `failed to expand filters`
+		fmt.Println(msg, err)
+		status := http.StatusInternalServerError
+		if errors.Is(err, pgx.ErrNoRows) {
+			status = http.StatusNotFound
+		}
+		c.JSON(status, gin.H{
+			"error":   msg,
+			"details": err.Error(),
+		})
+		return
+	}
+
+	msg := "event targeting rules request validation failed"
+	if err := af.Validate(); err != nil {
+		fmt.Println(msg, err)
+		c.JSON(http.StatusBadRequest, gin.H{
+			"error":   msg,
+			"details": err.Error(),
+		})
+		return
+	}
+
 	app := App{
 		ID: &id,
 	}
@@ -7232,7 +7349,7 @@ func GetSessionTargetingRuleConfig(c *gin.Context) {
 		app.OSName = opsys.Unknown
 	}
 
-	config, err := GetSessionTargetingConfig(ctx, id, app.OSName)
+	config, err := GetSessionTargetingConfig(ctx, &af)
 	if err != nil {
 		msg := "failed to get session targeting rule config"
 		fmt.Println(msg, err)
diff --git a/backend/api/measure/targeting_rules.go b/backend/api/measure/targeting_rules.go
index 0bfb19ad5..db975a9c5 100644
--- a/backend/api/measure/targeting_rules.go
+++ b/backend/api/measure/targeting_rules.go
@@ -101,9 +101,10 @@ type TraceConfig struct {
 // AttrConfig part of the session
 // targeting dashboard config.
 type AttrConfig struct {
-	Key  string `json:"key"`
-	Type string `json:"type"`
-	Hint string `json:"hint"`
+	Key    string    `json:"key"`
+	Type   string    `json:"type"`
+	Hint   string    `json:"hint"`
+	Values *[]string `json:"values"`
 }
 
 // OperatorTypes part of the session
@@ -549,15 +550,24 @@ func GetSessionTargetingRuleById(ctx context.Context, appId *uuid.UUID, ruleId s
 // GetEventTargetingConfig creates and returns
 // the config required to render event
 // targeting rule creation page.
-func GetEventTargetingConfig(ctx context.Context, appId uuid.UUID, osName string) (EventTargetingConfig, error) {
-	eventUdAttrs, err := getEventUDAttrKeys(ctx, appId)
+func GetEventTargetingConfig(ctx context.Context, af *filter.AppFilter) (EventTargetingConfig, error) {
+	eventUdAttrs, err := getEventUDAttrKeys(ctx, af.AppID)
 	if err != nil {
 		return EventTargetingConfig{}, err
 	}
 
+	// Fetch filter values
+	var filterList filter.FilterList
+	if err := af.GetGenericFilters(ctx, &filterList); err != nil {
+		return EventTargetingConfig{}, err
+	}
+
+	sessionAttrs := newSessionConfig(af.AppOSName)
+	populateSessionConfigValues(sessionAttrs, &filterList)
+
 	return EventTargetingConfig{
-		Events:        newEventsConfig(osName),
-		SessionAttrs:  newSessionConfig(osName),
+		Events:        newEventsConfig(af.AppOSName),
+		SessionAttrs:  sessionAttrs,
 		EventUdAttrs:  eventUdAttrs,
 		OperatorTypes: newOperatorTypes(),
 	}, nil
@@ -566,17 +576,26 @@ func GetEventTargetingConfig(ctx context.Context, appId uuid.UUID, osName string
 // GetTraceTargetingConfig creates and returns
 // the config required to render trace
 // targeting rule creation page.
-func GetTraceTargetingConfig(ctx context.Context, appId uuid.UUID, osName string) (TraceTargetingConfig, error) {
-	traceUdAttrs, err := getTraceUDAttrKeys(ctx, appId)
+func GetTraceTargetingConfig(ctx context.Context, af *filter.AppFilter) (TraceTargetingConfig, error) {
+	traceUdAttrs, err := getTraceUDAttrKeys(ctx, af.AppID)
 	if err != nil {
 		return TraceTargetingConfig{}, err
 	}
 
-	traces, err := span.FetchRootSpanNames(ctx, appId)
+	traces, err := span.FetchRootSpanNames(ctx, af.AppID)
 	if err != nil {
 		return TraceTargetingConfig{}, err
 	}
 
+	// Fetch filter values
+	var filterList filter.FilterList
+	if err := af.GetGenericFilters(ctx, &filterList); err != nil {
+		return TraceTargetingConfig{}, err
+	}
+
+	sessionAttrs := newSessionConfig(af.AppOSName)
+	populateSessionConfigValues(sessionAttrs, &filterList)
+
 	traceConfigs := make([]TraceConfig, 0, len(traces))
 	for _, traceName := range traces {
 		traceConfigs = append(traceConfigs, TraceConfig{
@@ -587,7 +606,7 @@ func GetTraceTargetingConfig(ctx context.Context, appId uuid.UUID, osName string
 	}
 	return TraceTargetingConfig{
 		Traces:            traceConfigs,
-		SessionAttrs:      newSessionConfig(osName),
+		SessionAttrs:      sessionAttrs,
 		TraceUDAttributes: traceUdAttrs,
 		OperatorTypes:     newOperatorTypes(),
 	}, nil
@@ -596,19 +615,29 @@ func GetTraceTargetingConfig(ctx context.Context, appId uuid.UUID, osName string
 // GetSessionTargetingConfig creates and returns
 // the config required to render session
 // targeting rule creation page.
-func GetSessionTargetingConfig(ctx context.Context, appId uuid.UUID, osName string) (SessionTargetingConfig, error) {
-	eventUdAttrs, err := getEventUDAttrKeys(ctx, appId)
+func GetSessionTargetingConfig(ctx context.Context, af *filter.AppFilter) (SessionTargetingConfig, error) {
+	eventUdAttrs, err := getEventUDAttrKeys(ctx, af.AppID)
 	if err != nil {
 		return SessionTargetingConfig{}, err
 	}
-	traceUdAttrs, err := getTraceUDAttrKeys(ctx, appId)
+	traceUdAttrs, err := getTraceUDAttrKeys(ctx, af.AppID)
 	if err != nil {
 		return SessionTargetingConfig{}, err
 	}
-	traces, err := span.FetchRootSpanNames(ctx, appId)
+	traces, err := span.FetchRootSpanNames(ctx, af.AppID)
 	if err != nil {
 		return SessionTargetingConfig{}, err
 	}
+
+	// Fetch filter values
+	var filterList filter.FilterList
+	if err := af.GetGenericFilters(ctx, &filterList); err != nil {
+		return SessionTargetingConfig{}, err
+	}
+
+	sessionAttrs := newSessionConfig(af.AppOSName)
+	populateSessionConfigValues(sessionAttrs, &filterList)
+
 	traceConfigs := make([]TraceConfig, 0, len(traces))
 	for _, traceName := range traces {
 		traceConfigs = append(traceConfigs, TraceConfig{
@@ -618,11 +647,11 @@ func GetSessionTargetingConfig(ctx context.Context, appId uuid.UUID, osName stri
 		})
 	}
 	return SessionTargetingConfig{
-		Events:            newEventsConfig(osName),
+		Events:            newEventsConfig(af.AppOSName),
 		Traces:            traceConfigs,
 		EventUdAttrs:      eventUdAttrs,
 		TraceUDAttributes: traceUdAttrs,
-		SessionAttrs:      newSessionConfig(osName),
+		SessionAttrs:      sessionAttrs,
 		OperatorTypes:     newOperatorTypes(),
 	}, nil
 }
@@ -1321,7 +1350,7 @@ func newEventsConfig(osName string) []EventConfig {
 	return events
 }
 
-// newEventsConfig creates OS-specific
+// newSessionConfig creates OS-specific
 // session attributes configuration.
 func newSessionConfig(osName string) []AttrConfig {
 	switch opsys.ToFamily(osName) {
@@ -1372,6 +1401,24 @@ func newSessionConfig(osName string) []AttrConfig {
 	}
 }
 
+// populateSessionConfigValues maps FilterList data to AttrConfig values.
+func populateSessionConfigValues(configs []AttrConfig, fl *filter.FilterList) {
+	valueMap := map[string][]string{
+		"app_version":         fl.Versions,
+		"app_build":           fl.VersionCodes,
+		"os_version":          fl.OsVersions,
+		"device_locale":       fl.DeviceLocales,
+		"device_manufacturer": fl.DeviceManufacturers,
+		"device_model":        fl.DeviceNames,
+	}
+
+	for i := range configs {
+		if values, exists := valueMap[configs[i].Key]; exists && len(values) > 0 {
+			configs[i].Values = &values
+		}
+	}
+}
+
 func newOperatorTypes() OperatorTypes {
 	return OperatorTypes{
 		Bool:    []string{"eq", "neq"},
@@ -1485,4 +1532,4 @@ func populateUserEmailsForSessionRules(ctx context.Context, rules []SessionTarge
 	}
 
 	return nil
-}
+}
\ No newline at end of file

From 4566fa1eceb3d32140cb23554a3e33990742ce57 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Tue, 18 Nov 2025 14:30:48 +0530
Subject: [PATCH 78/98] feat(frontend): rename field

---
 frontend/dashboard/app/api/api_calls.ts                      | 2 +-
 frontend/dashboard/app/components/targeting/rule_builder.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index 7208dc8e3..12a780811 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -1264,7 +1264,7 @@ export type EventTargetingConfigResponse = {
 }
 
 export type TraceTargetingConfigResponse = {
-  trace_config: TraceTargetingConfig[];
+  traces: TraceTargetingConfig[];
   trace_ud_attrs: AttributeTargetingConfig[];
   session_attrs: AttributeTargetingConfig[];
   operator_types: TargetingOperatorConfig;
diff --git a/frontend/dashboard/app/components/targeting/rule_builder.tsx b/frontend/dashboard/app/components/targeting/rule_builder.tsx
index fa9020abd..341ef52c8 100644
--- a/frontend/dashboard/app/components/targeting/rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/rule_builder.tsx
@@ -780,7 +780,7 @@ export default function RuleBuilder({
         if (!ruleState || !config) return null
 
         const traceConfig = config as TraceTargetingConfigResponse
-        const traceNames = traceConfig.trace_config
+        const traceNames = traceConfig.traces
             .filter((t): t is TraceTargetingConfig => 'name' in t)
             .map(t => t.name)
 

From 1216f432053fd2d5eb3db3f553e9b04c1ff97c07 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Tue, 18 Nov 2025 15:20:20 +0530
Subject: [PATCH 79/98] feat(frontend): implement attribute suggestions

---
 backend/api/measure/targeting_rules.go        |  22 ++--
 frontend/dashboard/app/api/api_calls.ts       |   1 +
 .../targeting/attribute_builder.tsx           |  59 +++++-----
 .../app/components/targeting/rule_builder.tsx | 104 +++++++++++++++---
 .../dashboard/app/utils/cel/conditions.ts     |   1 +
 5 files changed, 124 insertions(+), 63 deletions(-)

diff --git a/backend/api/measure/targeting_rules.go b/backend/api/measure/targeting_rules.go
index db975a9c5..fd9df503f 100644
--- a/backend/api/measure/targeting_rules.go
+++ b/backend/api/measure/targeting_rules.go
@@ -101,10 +101,10 @@ type TraceConfig struct {
 // AttrConfig part of the session
 // targeting dashboard config.
 type AttrConfig struct {
-	Key    string    `json:"key"`
-	Type   string    `json:"type"`
-	Hint   string    `json:"hint"`
-	Values *[]string `json:"values"`
+	Key         string    `json:"key"`
+	Type        string    `json:"type"`
+	Hint        string    `json:"hint"`
+	Suggestions *[]string `json:"suggestions"`
 }
 
 // OperatorTypes part of the session
@@ -1362,9 +1362,8 @@ func newSessionConfig(osName string) []AttrConfig {
 			{Key: "device_locale", Type: "string", Hint: "Enter a locale like en_US, fr_FR"},
 			{Key: "device_low_power_mode", Type: "bool"},
 			{Key: "device_manufacturer", Type: "string", Hint: "E.g. Samsung, Google"},
-			{Key: "device_model", Type: "string", Hint: "E.g. Redmi Go, Pixel 4a "},
 			{Key: "device_thermal_throttling_enabled", Type: "bool"},
-			{Key: "device_type", Type: "string", Hint: "E.g. phone or tablet"},
+			{Key: "device_type", Type: "string", Hint: "E.g. phone or tablet", Suggestions: &[]string{"phone", "tablet"}},
 			{Key: "installation_id", Type: "string", Hint: "Enter an installation ID"},
 			{Key: "os_version", Type: "string", Hint: "Enter API level like 21, 36"},
 			{Key: "user_id", Type: "string", Hint: "Enter a user ID"},
@@ -1376,9 +1375,8 @@ func newSessionConfig(osName string) []AttrConfig {
 			{Key: "device_is_foldable", Type: "bool"},
 			{Key: "device_locale", Type: "string", Hint: "Enter a locale like en_US, fr_FR"},
 			{Key: "device_low_power_mode", Type: "bool"},
-			{Key: "device_model", Type: "string", Hint: "E.g. iPhone 17"},
 			{Key: "device_thermal_throttling_enabled", Type: "bool"},
-			{Key: "device_type", Type: "string", Hint: "E.g. phone or tablet"},
+			{Key: "device_type", Type: "string", Hint: "E.g. phone or tablet", Suggestions: &[]string{"phone", "tablet"}},
 			{Key: "installation_id", Type: "string", Hint: "Enter an installation Id"},
 			{Key: "os_version", Type: "string", Hint: "E.g. 18.3.1, 18.4.1"},
 			{Key: "user_id", Type: "string", Hint: "Enter a user ID"},
@@ -1391,9 +1389,8 @@ func newSessionConfig(osName string) []AttrConfig {
 			{Key: "device_locale", Type: "string", Hint: "Enter a locale like en_US, fr_FR"},
 			{Key: "device_low_power_mode", Type: "bool"},
 			{Key: "device_manufacturer", Type: "string", Hint: "E.g. Apple, Samsung, Google"},
-			{Key: "device_model", Type: "string", Hint: "E.g. iPhone 17, Pixel 9"},
 			{Key: "device_thermal_throttling_enabled", Type: "bool"},
-			{Key: "device_type", Type: "string", Hint: "E.g. phone or tablet"},
+			{Key: "device_type", Type: "string", Hint: "E.g. phone or tablet", Suggestions: &[]string{"phone", "tablet"}},
 			{Key: "installation_id", Type: "string", Hint: "Enter an installation ID"},
 			{Key: "os_version", Type: "string", Hint: "Enter API level or iOS version"},
 			{Key: "user_id", Type: "string", Hint: "Enter a user ID"},
@@ -1409,12 +1406,11 @@ func populateSessionConfigValues(configs []AttrConfig, fl *filter.FilterList) {
 		"os_version":          fl.OsVersions,
 		"device_locale":       fl.DeviceLocales,
 		"device_manufacturer": fl.DeviceManufacturers,
-		"device_model":        fl.DeviceNames,
 	}
 
 	for i := range configs {
 		if values, exists := valueMap[configs[i].Key]; exists && len(values) > 0 {
-			configs[i].Values = &values
+			configs[i].Suggestions = &values
 		}
 	}
 }
@@ -1532,4 +1528,4 @@ func populateUserEmailsForSessionRules(ctx context.Context, rules []SessionTarge
 	}
 
 	return nil
-}
\ No newline at end of file
+}
diff --git a/frontend/dashboard/app/api/api_calls.ts b/frontend/dashboard/app/api/api_calls.ts
index 12a780811..90b6a968c 100644
--- a/frontend/dashboard/app/api/api_calls.ts
+++ b/frontend/dashboard/app/api/api_calls.ts
@@ -1247,6 +1247,7 @@ export type AttributeTargetingConfig = {
   key: string;
   type: string;
   hint?: string;
+  suggestions?: string[] | number[];
 }
 
 export type TargetingOperatorConfig = {
diff --git a/frontend/dashboard/app/components/targeting/attribute_builder.tsx b/frontend/dashboard/app/components/targeting/attribute_builder.tsx
index 1a953bd95..7084a40e6 100644
--- a/frontend/dashboard/app/components/targeting/attribute_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/attribute_builder.tsx
@@ -6,6 +6,7 @@ import { Button } from '../button'
 import DropdownSelect, { DropdownSelectType } from '../dropdown_select'
 import { useState, useEffect } from 'react'
 import AttributeKeyDropdownSelect from './attribute_key_dropdown_select'
+import AutocompleteInput from '../autocomplete_input'
 
 interface AttributeBuilderProps {
     attribute: AttributeField
@@ -16,6 +17,7 @@ interface AttributeBuilderProps {
     onUpdateOperator: (attrId: string, operator: string) => void
     allowDelete: boolean
     onDelete?: (attrId: string) => void
+    suggestions?: string[] | number[]
 }
 
 export default function AttributeBuilder({
@@ -27,6 +29,7 @@ export default function AttributeBuilder({
     allowDelete = true,
     onUpdateKey,
     onDelete,
+    suggestions,
 }: AttributeBuilderProps) {
     const [localValue, setLocalValue] = useState(attribute.value)
 
@@ -45,6 +48,20 @@ export default function AttributeBuilder({
         return typeMap[type] || type
     }
 
+    const handleValueChange = (newValue: string) => {
+        setLocalValue(newValue)
+        
+        let value: string | number | boolean;
+        if (attribute.type === 'int64') {
+            value = parseInt(newValue, 10) || 0
+        } else if (attribute.type === 'number' || attribute.type === 'float64') {
+            value = parseFloat(newValue) || 0
+        } else {
+            value = newValue
+        }
+        onUpdateValue(attribute.id, value)
+    }
+
     return (
         <div className={`flex items-center group`}>
             <span className="mr-4">and</span>
@@ -89,38 +106,16 @@ export default function AttributeBuilder({
                         buttonClassName="flex justify-between font-display border border-black w-full select-none"
                     />
                 ) : (
-                    <div className="relative">
-                        <input
-                            id={`attr-value-${attribute.id}`}
-                            type={
-                                attribute.type === 'number' ||
-                                    attribute.type === 'int64' ||
-                                    attribute.type === 'float64'
-                                    ? 'number'
-                                    : 'text'
-                            }
-                            placeholder={
-                                attribute.hint
-                                    ? attribute.hint
-                                    : `Enter ${getTypeDisplayName(attribute.type)} value`
-                            }
-                            value={localValue as string | number}
-                            onChange={(e) => setLocalValue(e.target.value)}
-                            onBlur={(e) => {
-                                const raw = e.target.value
-                                let value: string | number | boolean;
-                                if (attribute.type === 'int64') {
-                                    value = parseInt(raw, 10) || 0
-                                } else if (attribute.type === 'number' || attribute.type === 'float64') {
-                                    value = parseFloat(raw) || 0
-                                } else {
-                                    value = raw
-                                }
-                                onUpdateValue(attribute.id, value)
-                            }}
-                            className={`w-full border rounded-md outline-hidden text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 font-body placeholder:text-neutral-400 border-black`}
-                        />
-                    </div>
+                    <AutocompleteInput
+                        value={String(localValue ?? '')}
+                        suggestions={suggestions?.map(String) ?? []}
+                        placeholder={
+                            attribute.hint
+                                ? attribute.hint
+                                : `Enter ${getTypeDisplayName(attribute.type)} value`
+                        }
+                        onValueChange={handleValueChange}
+                    />
                 )}
             </div>
 
diff --git a/frontend/dashboard/app/components/targeting/rule_builder.tsx b/frontend/dashboard/app/components/targeting/rule_builder.tsx
index 341ef52c8..8b599b5e4 100644
--- a/frontend/dashboard/app/components/targeting/rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/rule_builder.tsx
@@ -1,9 +1,9 @@
 "use client"
 
-import { createEventTargetingRule, CreateEventTargetingRuleApiStatus, createTraceTargetingRule, CreateTraceTargetingRuleApiStatus, EventTargetingConfigResponse, EventTargetingRule, fetchEventTargetingConfigFromServer, fetchEventTargetingRuleFromServer, fetchTraceTargetingConfigFromServer, fetchTraceTargetingRuleFromServer, TraceTargetingConfigResponse, TraceTargetingRule, updateEventTargetingRule, UpdateEventTargetingRuleApiStatus, updateTraceTargetingRule, UpdateTraceTargetingRuleApiStatus, EventTargetingConfig, TraceTargetingConfig, DeleteEventTargetingRuleApiStatus, deleteEventTargetingRule, deleteTraceTargetingRule, DeleteTraceTargetingRuleApiStatus, CollectionMode, fetchSessionTargetingConfigFromServer, fetchSessionTargetingRuleFromServer, SessionTargetingConfigResponse, SessionTargetingRule, deleteSessionTargetingRule, DeleteSessionTargetingRuleApiStatus, createSessionTargetingRule, CreateSessionTargetingRuleApiStatus, updateSessionTargetingRule, UpdateSessionTargetingRuleApiStatus } from "@/app/api/api_calls"
+import { createEventTargetingRule, CreateEventTargetingRuleApiStatus, createTraceTargetingRule, CreateTraceTargetingRuleApiStatus, EventTargetingConfigResponse, EventTargetingRule, fetchEventTargetingConfigFromServer, fetchEventTargetingRuleFromServer, fetchTraceTargetingConfigFromServer, fetchTraceTargetingRuleFromServer, TraceTargetingConfigResponse, TraceTargetingRule, updateEventTargetingRule, UpdateEventTargetingRuleApiStatus, updateTraceTargetingRule, UpdateTraceTargetingRuleApiStatus, EventTargetingConfig, TraceTargetingConfig, DeleteEventTargetingRuleApiStatus, deleteEventTargetingRule, deleteTraceTargetingRule, DeleteTraceTargetingRuleApiStatus, CollectionMode, fetchSessionTargetingConfigFromServer, fetchSessionTargetingRuleFromServer, SessionTargetingConfigResponse, SessionTargetingRule, deleteSessionTargetingRule, DeleteSessionTargetingRuleApiStatus, createSessionTargetingRule, CreateSessionTargetingRuleApiStatus, updateSessionTargetingRule, UpdateSessionTargetingRuleApiStatus, AttributeTargetingConfig } from "@/app/api/api_calls"
 import { conditionsToCel } from "@/app/utils/cel/cel_generator"
 import { celToConditions, ParsedConditions } from "@/app/utils/cel/cel_parser"
-import { AttributeField, EventCondition, TraceCondition } from "@/app/utils/cel/conditions"
+import { AttributeField, BaseAttributeField, EventCondition, TraceCondition } from "@/app/utils/cel/conditions"
 import { toastNegative, toastPositive } from "@/app/utils/use_toast"
 import { useEffect, useState } from "react"
 import { Button } from "../button"
@@ -94,7 +94,43 @@ export default function RuleBuilder({
         }
     }
 
-    const convertToEventRuleState = (ruleData: EventTargetingRule): RuleState | null => {
+    const getAttributeWithSuggestions = (
+        key: string,
+        source: 'fixed' | 'session' | 'ud',
+        baseAttr: BaseAttributeField,
+        config: EventTargetingConfigResponse | TraceTargetingConfigResponse | SessionTargetingConfigResponse,
+        eventType?: string
+    ): AttributeField => {
+        let attrConfig: AttributeTargetingConfig | undefined
+
+        if (source === 'fixed') {
+            // Only applicable for event-based rules
+            if ('events' in config) {
+                const eventDef = config.events.find(e => 'type' in e && e.type === eventType)
+                attrConfig = eventDef?.attrs?.find(a => a.key === key)
+            }
+        } else if (source === 'session') {
+            attrConfig = config.session_attrs?.find(a => a.key === key)
+        } else if (source === 'ud') {
+            if ('event_ud_attrs' in config) {
+                attrConfig = config.event_ud_attrs?.find(a => a.key === key)
+            } else if ('trace_ud_attrs' in config) {
+                attrConfig = config.trace_ud_attrs?.find(a => a.key === key)
+            }
+        }
+
+        return {
+            ...baseAttr,
+            source,
+            suggestions: attrConfig?.suggestions,
+            hint: attrConfig?.hint,
+        }
+    }
+
+    const convertToEventRuleState = (
+        ruleData: EventTargetingRule,
+        config: EventTargetingConfigResponse
+    ): RuleState | null => {
         const parsed = celToConditions(ruleData.condition)
         const eventCondition = parsed.event?.conditions[0]
         if (!eventCondition) {
@@ -103,9 +139,15 @@ export default function RuleBuilder({
         }
 
         const attributes: AttributeField[] = [
-            ...(eventCondition.attrs || []).map(attr => ({ ...attr, source: 'fixed' as const })),
-            ...(eventCondition.session_attrs || []).map(attr => ({ ...attr, source: 'session' as const })),
-            ...(eventCondition.ud_attrs || []).map(attr => ({ ...attr, source: 'ud' as const })),
+            ...(eventCondition.attrs || []).map(attr =>
+                getAttributeWithSuggestions(attr.key, 'fixed', attr, config, eventCondition.type)
+            ),
+            ...(eventCondition.session_attrs || []).map(attr =>
+                getAttributeWithSuggestions(attr.key, 'session', attr, config)
+            ),
+            ...(eventCondition.ud_attrs || []).map(attr =>
+                getAttributeWithSuggestions(attr.key, 'ud', attr, config)
+            ),
         ]
 
         return {
@@ -140,7 +182,10 @@ export default function RuleBuilder({
         }
     }
 
-    const convertToTraceRuleState = (ruleData: TraceTargetingRule): RuleState | null => {
+    const convertToTraceRuleState = (
+        ruleData: TraceTargetingRule,
+        config: TraceTargetingConfigResponse
+    ): RuleState | null => {
         const parsed = celToConditions(ruleData.condition)
         const traceCondition = parsed.trace?.conditions[0]
 
@@ -150,8 +195,12 @@ export default function RuleBuilder({
         }
 
         const attributes: AttributeField[] = [
-            ...(traceCondition.ud_attrs || []).map(attr => ({ ...attr, source: 'ud' as const })),
-            ...(traceCondition.session_attrs || []).map(attr => ({ ...attr, source: 'session' as const })),
+            ...(traceCondition.ud_attrs || []).map(attr =>
+                getAttributeWithSuggestions(attr.key, 'ud', attr, config)
+            ),
+            ...(traceCondition.session_attrs || []).map(attr =>
+                getAttributeWithSuggestions(attr.key, 'session', attr, config)
+            ),
         ]
 
         return {
@@ -200,7 +249,7 @@ export default function RuleBuilder({
             }
 
             const ruleState = mode === 'edit'
-                ? convertToTraceRuleState(ruleResult!.data)
+                ? convertToTraceRuleState(ruleResult!.data, configResult.data)
                 : createEmptyTraceRuleState(configResult.data)
 
 
@@ -250,16 +299,26 @@ export default function RuleBuilder({
         }
     }
 
-    const convertToTimelineRuleState = (ruleData: SessionTargetingRule): RuleState | null => {
+    const convertToTimelineRuleState = (
+        ruleData: SessionTargetingRule,
+        config: SessionTargetingConfigResponse
+    ): RuleState | null => {
         const parsed = celToConditions(ruleData.condition)
 
         // Check if it's an event-based rule
         if (parsed.event?.conditions[0]) {
             const eventCondition = parsed.event.conditions[0]
+
             const attributes: AttributeField[] = [
-                ...(eventCondition.attrs || []).map(attr => ({ ...attr, source: 'fixed' as const })),
-                ...(eventCondition.session_attrs || []).map(attr => ({ ...attr, source: 'session' as const })),
-                ...(eventCondition.ud_attrs || []).map(attr => ({ ...attr, source: 'ud' as const })),
+                ...(eventCondition.attrs || []).map(attr =>
+                    getAttributeWithSuggestions(attr.key, 'fixed', attr, config, eventCondition.type)
+                ),
+                ...(eventCondition.session_attrs || []).map(attr =>
+                    getAttributeWithSuggestions(attr.key, 'session', attr, config)
+                ),
+                ...(eventCondition.ud_attrs || []).map(attr =>
+                    getAttributeWithSuggestions(attr.key, 'ud', attr, config)
+                ),
             ]
 
             return {
@@ -278,9 +337,14 @@ export default function RuleBuilder({
         // Check if it's a trace-based rule
         if (parsed.trace?.conditions[0]) {
             const traceCondition = parsed.trace.conditions[0]
+
             const attributes: AttributeField[] = [
-                ...(traceCondition.ud_attrs || []).map(attr => ({ ...attr, source: 'ud' as const })),
-                ...(traceCondition.session_attrs || []).map(attr => ({ ...attr, source: 'session' as const })),
+                ...(traceCondition.ud_attrs || []).map(attr =>
+                    getAttributeWithSuggestions(attr.key, 'ud', attr, config)
+                ),
+                ...(traceCondition.session_attrs || []).map(attr =>
+                    getAttributeWithSuggestions(attr.key, 'session', attr, config)
+                ),
             ]
 
             return {
@@ -331,7 +395,7 @@ export default function RuleBuilder({
             }
 
             const ruleState = mode === 'edit'
-                ? convertToEventRuleState(ruleResult!.data)
+                ? convertToEventRuleState(ruleResult!.data, configResult.data)
                 : createEmptyEventRuleState(configResult.data)
 
 
@@ -390,7 +454,7 @@ export default function RuleBuilder({
             }
 
             const ruleState = mode === 'edit'
-                ? convertToTimelineRuleState(ruleResult!.data)
+                ? convertToTimelineRuleState(ruleResult!.data, configResult.data)
                 : createEmptyTimelineRuleState(configResult.data)
 
             if (!ruleState) {
@@ -1084,6 +1148,7 @@ export default function RuleBuilder({
                 key: attr.key,
                 type: attr.type,
                 hint: attr.hint,
+                suggestions: attr.suggestions,
                 value: getDefaultValue(attr.type),
                 operator: getOperatorsForType(attr.type)[0] || 'eq',
                 source: source,
@@ -1114,6 +1179,7 @@ export default function RuleBuilder({
                 key: traceAttr.key,
                 type: traceAttr.type,
                 hint: traceAttr.hint,
+                suggestions: traceAttr.suggestions,
                 value: getDefaultValue(traceAttr.type),
                 operator: getOperatorsForType(traceAttr.type)[0] || 'eq',
                 source: 'session',
@@ -1171,6 +1237,7 @@ export default function RuleBuilder({
                             source: newSource,
                             type: attrDef.type,
                             hint: attrDef.hint,
+                            suggestions: attrDef.suggestions,
                             value: getDefaultValue(attrDef.type),
                             operator: getOperatorsForType(attrDef.type)[0] || 'eq',
                         } : attr
@@ -1294,6 +1361,7 @@ export default function RuleBuilder({
                         attribute={attr}
                         attributeKeys={allAttributeKeys}
                         operators={getOperatorsForType(attr.type)}
+                        suggestions={attr.suggestions}
                         onUpdateKey={(id, newKey, source) => {
                             updateAttributeKey(id, newKey, source as 'fixed' | 'session' | 'ud')
                         }}
diff --git a/frontend/dashboard/app/utils/cel/conditions.ts b/frontend/dashboard/app/utils/cel/conditions.ts
index 7ab12f16f..36358aaeb 100644
--- a/frontend/dashboard/app/utils/cel/conditions.ts
+++ b/frontend/dashboard/app/utils/cel/conditions.ts
@@ -6,6 +6,7 @@ export interface BaseAttributeField {
     value: string | boolean | number
     operator: string
     hint?: string
+    suggestions?: string[] | number[]
 }
 
 // For UI only - extends base with source

From a5ce9989158ec1b7acae21281ae4eb15a638a0ac Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Tue, 18 Nov 2025 15:38:28 +0530
Subject: [PATCH 80/98] feat(frontend): fix border getting clipped

---
 frontend/dashboard/app/components/autocomplete_input.tsx   | 7 ++++---
 .../app/components/targeting/attribute_builder.tsx         | 3 ++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/dashboard/app/components/autocomplete_input.tsx b/frontend/dashboard/app/components/autocomplete_input.tsx
index 2b6c841cb..12dcd736f 100644
--- a/frontend/dashboard/app/components/autocomplete_input.tsx
+++ b/frontend/dashboard/app/components/autocomplete_input.tsx
@@ -17,7 +17,7 @@ export default function AutocompleteInput({
     suggestions = [],
     placeholder = "Enter value...",
     onValueChange,
-    className = "w-112"
+    className = "w-full"
 }: AutocompleteInputProps) {
     const [suggestionsOpen, setSuggestionsOpen] = useState(false)
     const [searchValue, setSearchValue] = useState("")
@@ -155,7 +155,8 @@ export default function AutocompleteInput({
             </PopoverAnchor>
             {suggestionsOpen && filteredSuggestions.length > 0 && (
                 <PopoverContent
-                    className={cn("p-1", className)}
+                    className={"p-1"}
+                    style={{ width: inputRef.current?.offsetWidth }}
                     align="start"
                     onOpenAutoFocus={(e) => e.preventDefault()}
                 >
@@ -163,7 +164,7 @@ export default function AutocompleteInput({
                         ref={listRef}
                         id="suggestions-list"
                         role="listbox"
-                        className="max-h-72 overflow-auto"
+                        className="max-h-72 overflow-auto p-0.5"
                     >
                         {filteredSuggestions.map((suggestion, idx) => (
                             <div
diff --git a/frontend/dashboard/app/components/targeting/attribute_builder.tsx b/frontend/dashboard/app/components/targeting/attribute_builder.tsx
index 7084a40e6..ec9885418 100644
--- a/frontend/dashboard/app/components/targeting/attribute_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/attribute_builder.tsx
@@ -50,7 +50,7 @@ export default function AttributeBuilder({
 
     const handleValueChange = (newValue: string) => {
         setLocalValue(newValue)
-        
+
         let value: string | number | boolean;
         if (attribute.type === 'int64') {
             value = parseInt(newValue, 10) || 0
@@ -115,6 +115,7 @@ export default function AttributeBuilder({
                                 : `Enter ${getTypeDisplayName(attribute.type)} value`
                         }
                         onValueChange={handleValueChange}
+                        className="w-full"
                     />
                 )}
             </div>

From 4386dbcc25eec4774052c2c644534c426b08f757 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Tue, 18 Nov 2025 16:25:10 +0530
Subject: [PATCH 81/98] feat(frontend): refactor

---
 .../[appId]/session/[ruleId]/edit/page.tsx    |   1 -
 .../data/[appId]/session/create/page.tsx      |   1 -
 frontend/dashboard/app/[teamId]/data/page.tsx | 117 ++++++++----------
 .../targeting/edit_default_rule_dialog.tsx    |  14 +--
 4 files changed, 61 insertions(+), 72 deletions(-)

diff --git a/frontend/dashboard/app/[teamId]/data/[appId]/session/[ruleId]/edit/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/session/[ruleId]/edit/page.tsx
index 02602288a..bc243a400 100644
--- a/frontend/dashboard/app/[teamId]/data/[appId]/session/[ruleId]/edit/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/session/[ruleId]/edit/page.tsx
@@ -1,7 +1,6 @@
 "use client"
 
 import RuleBuilder from '@/app/components/targeting/rule_builder'
-import SessionTimelineRuleBuilder from '@/app/components/targeting/session_timeline_rule_builder'
 import { useRouter } from 'next/navigation'
 
 export default function EditSessionTimelineRule({ params }: { params: { teamId: string, appId: string, ruleId: string } }) {
diff --git a/frontend/dashboard/app/[teamId]/data/[appId]/session/create/page.tsx b/frontend/dashboard/app/[teamId]/data/[appId]/session/create/page.tsx
index f85328cb0..4ec9273a9 100644
--- a/frontend/dashboard/app/[teamId]/data/[appId]/session/create/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/[appId]/session/create/page.tsx
@@ -1,7 +1,6 @@
 "use client"
 
 import RuleBuilder from '@/app/components/targeting/rule_builder'
-import SessionTimelineRuleBuilder from '@/app/components/targeting/session_timeline_rule_builder'
 import { useRouter } from 'next/navigation'
 
 export default function CreateSessionTimelineRule({ params }: { params: { teamId: string, appId: string } }) {
diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index 648842939..82c3e1bde 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -1,8 +1,7 @@
 "use client"
 
-import { EventTargetingApiStatus, EventTargetingRulesResponse, fetchEventTargetingRulesFromServer, TraceTargetingApiStatus, TraceTargetingRulesResponse, fetchTraceTargetingRulesFromServer, FilterSource, CollectionMode, SessionTargetingRulesResponse, fetchSessionTargetingRulesFromServer } from '@/app/api/api_calls'
+import { EventTargetingApiStatus, EventTargetingRulesResponse, fetchEventTargetingRulesFromServer, TraceTargetingApiStatus, TraceTargetingRulesResponse, fetchTraceTargetingRulesFromServer, FilterSource, CollectionMode, SessionTargetingRulesResponse, fetchSessionTargetingRulesFromServer, EventTargetingRule, TraceTargetingRule, SessionTargetingRule } from '@/app/api/api_calls'
 import Filters, { AppVersionsInitialSelectionType, defaultFilters } from '@/app/components/filters'
-import LoadingBar from '@/app/components/loading_bar'
 import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { Button } from '@/app/components/button'
@@ -19,36 +18,21 @@ interface PageState {
     eventTargetingRules: EventTargetingRulesResponse | null
     traceTargetingRules: TraceTargetingRulesResponse | null
     sessionTargetingRules: SessionTargetingRulesResponse | null
-    editingDefaultRule: 'event' | 'trace' | null
+    editingDefaultRuleType: 'event' | 'trace' | null
 }
 
-const getCollectionConfigDisplay = (collectionMode: CollectionMode, samplingRate: number, type: 'event' | 'trace'): string => {
-    const typeName = type === 'event' ? 'events' : 'traces'
-    switch (collectionMode) {
-        case 'sampled':
-            return `Collect all ${typeName} at ${samplingRate}% sample rate`
-        case 'timeline':
-            return `Collect ${typeName} with session timeline only`
-        case 'disabled':
-            return `Collect no ${typeName} by default`
-        default:
-            return 'Unknown'
-    }
+const initialState: PageState = {
+    eventTargetingApiStatus: EventTargetingApiStatus.Loading,
+    traceTargetingApiStatus: TraceTargetingApiStatus.Loading,
+    filters: defaultFilters,
+    eventTargetingRules: null,
+    traceTargetingRules: null,
+    sessionTargetingRules: null,
+    editingDefaultRuleType: null,
 }
 
 export default function DataFilters({ params }: { params: { teamId: string } }) {
     const router = useRouter()
-
-    const initialState: PageState = {
-        eventTargetingApiStatus: EventTargetingApiStatus.Loading,
-        traceTargetingApiStatus: TraceTargetingApiStatus.Loading,
-        filters: defaultFilters,
-        eventTargetingRules: null,
-        traceTargetingRules: null,
-        sessionTargetingRules: null,
-        editingDefaultRule: null,
-    }
-
     const [pageState, setPageState] = useState<PageState>(initialState)
 
     const updatePageState = (newState: Partial<PageState>) => {
@@ -95,7 +79,6 @@ export default function DataFilters({ params }: { params: { teamId: string } })
     }
 
     const handleFiltersChanged = (updatedFilters: typeof defaultFilters) => {
-        // update filters only if they have changed
         if (pageState.filters.ready !== updatedFilters.ready || pageState.filters.serialisedFilters !== updatedFilters.serialisedFilters) {
             updatePageState({
                 filters: updatedFilters,
@@ -105,22 +88,6 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         }
     }
 
-    useEffect(() => {
-        if (!pageState.filters.ready) {
-            return
-        }
-
-        // update url
-        router.replace(`?${pageState.filters.serialisedFilters!}`, { scroll: false })
-
-        loadAllRules()
-    }, [pageState.filters])
-
-    const isLoading = () => {
-        return pageState.eventTargetingApiStatus === EventTargetingApiStatus.Loading ||
-            pageState.traceTargetingApiStatus === TraceTargetingApiStatus.Loading
-    }
-
     const hasError = () => {
         return pageState.eventTargetingApiStatus === EventTargetingApiStatus.Error ||
             pageState.traceTargetingApiStatus === TraceTargetingApiStatus.Error
@@ -134,18 +101,26 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         return pageState.filters.ready && eventReady && traceReady
     }
 
-    const eventsDefaultRule = pageState.eventTargetingRules?.default_rule;
-    const eventsOverideRules = pageState.eventTargetingRules?.rules ?? [];
-    const traceDefaultRule = pageState.traceTargetingRules?.default_rule;
-    const traceOverrideRules = pageState.traceTargetingRules?.rules ?? [];
-    const sessionTargetingRules = pageState.sessionTargetingRules?.results ?? [];
+    const getCollectionConfigDisplay = (collectionMode: CollectionMode, samplingRate: number, type: 'event' | 'trace'): string => {
+        const typeName = type === 'event' ? 'events' : 'traces'
+        switch (collectionMode) {
+            case 'sampled':
+                return `Collect all ${typeName} at ${samplingRate}% sample rate`
+            case 'timeline':
+                return `Collect ${typeName} with session timeline only`
+            case 'disabled':
+                return `Collect no ${typeName} by default`
+            default:
+                return 'Unknown'
+        }
+    }
 
-    const handleEditRule = (dataFilter: typeof eventsOverideRules[0] | typeof traceOverrideRules[0] | typeof sessionTargetingRules[0], filterType: 'event' | 'trace' | 'session') => {
-        router.push(`/${params.teamId}/data/${pageState.filters.app!.id}/${filterType}/${dataFilter.id}/edit`)
+    const handleEditRule = (rule: EventTargetingRule | TraceTargetingRule | SessionTargetingRule, ruleType: 'event' | 'trace' | 'session') => {
+        router.push(`/${params.teamId}/data/${pageState.filters.app!.id}/${ruleType}/${rule.id}/edit`)
     }
 
     const handleDefaultRuleUpdateSuccess = (collectionMode: 'sampled' | 'timeline' | 'disabled', samplingRate?: number) => {
-        if (pageState.editingDefaultRule === 'event' && pageState.eventTargetingRules) {
+        if (pageState.editingDefaultRuleType === 'event' && pageState.eventTargetingRules) {
             const updatedEventRules = {
                 ...pageState.eventTargetingRules,
                 default_rule: {
@@ -155,7 +130,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                 }
             }
             updatePageState({ eventTargetingRules: updatedEventRules })
-        } else if (pageState.editingDefaultRule === 'trace' && pageState.traceTargetingRules) {
+        } else if (pageState.editingDefaultRuleType === 'trace' && pageState.traceTargetingRules) {
             const updatedTraceRules = {
                 ...pageState.traceTargetingRules,
                 default_rule: {
@@ -174,6 +149,22 @@ export default function DataFilters({ params }: { params: { teamId: string } })
         toastNegative('Failed to update rule', error)
     }
 
+    useEffect(() => {
+        if (!pageState.filters.ready) {
+            return
+        }
+
+        router.replace(`?${pageState.filters.serialisedFilters!}`, { scroll: false })
+
+        loadAllRules()
+    }, [pageState.filters])
+
+    const eventsDefaultRule = pageState.eventTargetingRules?.default_rule;
+    const eventsOverideRules = pageState.eventTargetingRules?.rules ?? [];
+    const traceDefaultRule = pageState.traceTargetingRules?.default_rule;
+    const traceOverrideRules = pageState.traceTargetingRules?.rules ?? [];
+    const sessionTargetingRules = pageState.sessionTargetingRules?.results ?? [];
+
     return (
         <div className="flex flex-col selection:bg-yellow-200/75 items-start">
             <div className="flex flex-row items-center gap-2 justify-between w-full">
@@ -256,7 +247,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                             <p className="font-display text-gray-500">Default Behaviour</p>
                             {eventsDefaultRule && (
                                 <button
-                                    onClick={() => updatePageState({ editingDefaultRule: 'event' })}
+                                    onClick={() => updatePageState({ editingDefaultRuleType: 'event' })}
                                     className="p-1 hover:bg-yellow-200 rounded"
                                 >
                                     <Pencil className="w-4 h-4 text-gray-600" />
@@ -289,7 +280,7 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                             <p className="font-display text-gray-500">Default Behaviour</p>
                             {traceDefaultRule && (
                                 <button
-                                    onClick={() => updatePageState({ editingDefaultRule: 'trace' })}
+                                    onClick={() => updatePageState({ editingDefaultRuleType: 'trace' })}
                                     className="p-1 hover:bg-yellow-200 rounded"
                                 >
                                     <Pencil className="w-4 h-4 text-gray-600" />
@@ -328,41 +319,41 @@ export default function DataFilters({ params }: { params: { teamId: string } })
                 </div>}
 
             {/* Default Rule Edit Dialog */}
-            {pageState.editingDefaultRule && eventsDefaultRule && traceDefaultRule && (
+            {pageState.editingDefaultRuleType && eventsDefaultRule && traceDefaultRule && (
                 <EditDefaultRuleDialog
                     isOpen={true}
-                    onClose={() => updatePageState({ editingDefaultRule: null })}
+                    onClose={() => updatePageState({ editingDefaultRuleType: null })}
                     onSuccess={handleDefaultRuleUpdateSuccess}
                     onError={handleDefaultRuleUpdateError}
-                    ruleType={pageState.editingDefaultRule}
+                    ruleType={pageState.editingDefaultRuleType}
                     ruleId={
-                        pageState.editingDefaultRule === 'event'
+                        pageState.editingDefaultRuleType === 'event'
                             ? eventsDefaultRule.id
                             : traceDefaultRule.id
                     }
                     appId={pageState.filters.app!.id}
                     condition={
-                        pageState.editingDefaultRule === 'event'
+                        pageState.editingDefaultRuleType === 'event'
                             ? eventsDefaultRule.condition
                             : traceDefaultRule.condition
                     }
                     takeScreenshot={
-                        pageState.editingDefaultRule === 'event'
+                        pageState.editingDefaultRuleType === 'event'
                             ? eventsDefaultRule.take_screenshot
                             : undefined
                     }
                     takeLayoutSnapshot={
-                        pageState.editingDefaultRule === 'event'
+                        pageState.editingDefaultRuleType === 'event'
                             ? eventsDefaultRule.take_layout_snapshot
                             : undefined
                     }
                     initialCollectionMode={
-                        pageState.editingDefaultRule === 'event'
+                        pageState.editingDefaultRuleType === 'event'
                             ? eventsDefaultRule.collection_mode
                             : traceDefaultRule.collection_mode
                     }
                     initialSampleRate={
-                        pageState.editingDefaultRule === 'event'
+                        pageState.editingDefaultRuleType === 'event'
                             ? eventsDefaultRule.sampling_rate
                             : traceDefaultRule.sampling_rate
                     }
diff --git a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
index 820a429c5..80080b603 100644
--- a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
+++ b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
@@ -40,13 +40,6 @@ export default function EditDefaultRuleDialog({
     const [sampleRate, setSampleRate] = useState<number>(initialSampleRate || 100)
     const [isSaving, setIsSaving] = useState(false)
 
-    useEffect(() => {
-        if (isOpen) {
-            setCollectionMode(initialCollectionMode)
-            setSampleRate(initialSampleRate || 100)
-        }
-    }, [isOpen, initialCollectionMode, initialSampleRate])
-
     const handleSave = async () => {
         setIsSaving(true)
 
@@ -88,6 +81,13 @@ export default function EditDefaultRuleDialog({
         }
     }
 
+     useEffect(() => {
+        if (isOpen) {
+            setCollectionMode(initialCollectionMode)
+            setSampleRate(initialSampleRate || 100)
+        }
+    }, [isOpen, initialCollectionMode, initialSampleRate])
+
     const isEvent = ruleType === 'event'
     const displayName = isEvent ? 'Events' : 'Traces'
     const displayNameLower = isEvent ? 'events' : 'traces'

From 8db1131caa4c92af709b321be39a94462715548e Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Tue, 18 Nov 2025 16:35:29 +0530
Subject: [PATCH 82/98] feat(frontend): refactor

---
 .../app/components/targeting/rule_builder.tsx | 703 +++++++++---------
 1 file changed, 344 insertions(+), 359 deletions(-)

diff --git a/frontend/dashboard/app/components/targeting/rule_builder.tsx b/frontend/dashboard/app/components/targeting/rule_builder.tsx
index 8b599b5e4..d71977c40 100644
--- a/frontend/dashboard/app/components/targeting/rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/rule_builder.tsx
@@ -65,9 +65,7 @@ export default function RuleBuilder({
     })
 
     const [ruleState, setRuleState] = useState<RuleState | null>(null)
-
     const [initialRuleState, setInitialRuleState] = useState<RuleState | null>(null)
-
     const [config, setConfig] = useState<EventTargetingConfigResponse | TraceTargetingConfigResponse | TraceTargetingConfigResponse | null>(null)
 
     const createEmptyEventRuleState = (config: EventTargetingConfigResponse): RuleState | null => {
@@ -104,7 +102,6 @@ export default function RuleBuilder({
         let attrConfig: AttributeTargetingConfig | undefined
 
         if (source === 'fixed') {
-            // Only applicable for event-based rules
             if ('events' in config) {
                 const eventDef = config.events.find(e => 'type' in e && e.type === eventType)
                 attrConfig = eventDef?.attrs?.find(a => a.key === key)
@@ -217,68 +214,7 @@ export default function RuleBuilder({
         }
     }
 
-    const fetchTracePageData = async () => {
-        setUiState((prev) => ({
-            ...prev,
-            pageState: PageState.Loading
-        }))
-
-        try {
-            const configPromise = fetchTraceTargetingConfigFromServer(appId)
-            const rulePromise = mode === 'edit' && ruleId
-                ? fetchTraceTargetingRuleFromServer(appId, ruleId)
-                : Promise.resolve(null)
-
-            const [configResult, ruleResult] = await Promise.all([configPromise, rulePromise])
-
-            if (!configResult) {
-                console.log("No config result")
-                setUiState((prev) => ({
-                    ...prev,
-                    pageState: PageState.Error
-                }))
-                return
-            }
-
-            if (mode === 'edit' && !ruleResult) {
-                setUiState((prev) => ({
-                    ...prev,
-                    pageState: PageState.Error
-                }))
-                return
-            }
-
-            const ruleState = mode === 'edit'
-                ? convertToTraceRuleState(ruleResult!.data, configResult.data)
-                : createEmptyTraceRuleState(configResult.data)
-
-
-            if (!ruleState) {
-                setUiState((prev) => ({
-                    ...prev,
-                    pageState: PageState.Error
-                }))
-                return
-            }
-
-            setConfig(configResult.data)
-            setInitialRuleState(ruleState)
-            setRuleState(ruleState)
-            setUiState((prev) => ({
-                ...prev,
-                pageState: PageState.Success
-            }))
-        } catch (err) {
-            console.log(err)
-            setUiState((prev) => ({
-                ...prev,
-                pageState: PageState.Error
-            }))
-        }
-    }
-
     const createEmptyTimelineRuleState = (config: SessionTargetingConfigResponse): RuleState | null => {
-        // Default to event type
         const firstEvent = config.events[0]
         if (!firstEvent || !('type' in firstEvent)) {
             return null
@@ -305,7 +241,6 @@ export default function RuleBuilder({
     ): RuleState | null => {
         const parsed = celToConditions(ruleData.condition)
 
-        // Check if it's an event-based rule
         if (parsed.event?.conditions[0]) {
             const eventCondition = parsed.event.conditions[0]
 
@@ -334,7 +269,6 @@ export default function RuleBuilder({
             }
         }
 
-        // Check if it's a trace-based rule
         if (parsed.trace?.conditions[0]) {
             const traceCondition = parsed.trace.conditions[0]
 
@@ -364,6 +298,54 @@ export default function RuleBuilder({
         return null
     }
 
+    const getOperatorsForType = (type: string) => {
+        if (!config) return []
+
+        switch (type) {
+            case 'float64':
+                return config?.operator_types.float64
+            case 'int64':
+                return config?.operator_types.int64
+            case 'bool':
+                return config?.operator_types.bool
+            default:
+                return config?.operator_types.string
+        }
+    }
+
+    const getDefaultValue = (type: string): string | number | boolean => {
+        if (type === 'bool') return false
+        if (type === 'int64' || type === 'float64') return 0
+        return ''
+    }
+
+    const updateRuleState = (updates: Partial<RuleState>) => {
+        setRuleState(prev => (prev ? { ...prev, ...updates } : prev))
+    }
+
+    const pageHeading = (() => {
+        switch (type) {
+            case 'event':
+                return mode === 'create' ? 'Create Event Rule' : 'Edit Event Rule'
+            case 'trace':
+                return mode === 'create' ? 'Create Trace Rule' : 'Edit Trace Rule'
+            case 'timeline':
+                return mode === 'create' ? 'Create Session Timeline Rule' : 'Edit Session Timeline Rule'
+        }
+    })()
+
+    const shouldEnableSaveButton = (() => {
+        if (uiState.pageState != PageState.Success) {
+            return false
+        }
+
+        if (mode === 'create') {
+            return true
+        }
+
+        return JSON.stringify(initialRuleState) !== JSON.stringify(ruleState)
+    })()
+
     const fetchEventPageData = async () => {
         setUiState((prev) => ({
             ...prev,
@@ -422,6 +404,66 @@ export default function RuleBuilder({
         }
     }
 
+    const fetchTracePageData = async () => {
+        setUiState((prev) => ({
+            ...prev,
+            pageState: PageState.Loading
+        }))
+
+        try {
+            const configPromise = fetchTraceTargetingConfigFromServer(appId)
+            const rulePromise = mode === 'edit' && ruleId
+                ? fetchTraceTargetingRuleFromServer(appId, ruleId)
+                : Promise.resolve(null)
+
+            const [configResult, ruleResult] = await Promise.all([configPromise, rulePromise])
+
+            if (!configResult) {
+                console.log("No config result")
+                setUiState((prev) => ({
+                    ...prev,
+                    pageState: PageState.Error
+                }))
+                return
+            }
+
+            if (mode === 'edit' && !ruleResult) {
+                setUiState((prev) => ({
+                    ...prev,
+                    pageState: PageState.Error
+                }))
+                return
+            }
+
+            const ruleState = mode === 'edit'
+                ? convertToTraceRuleState(ruleResult!.data, configResult.data)
+                : createEmptyTraceRuleState(configResult.data)
+
+
+            if (!ruleState) {
+                setUiState((prev) => ({
+                    ...prev,
+                    pageState: PageState.Error
+                }))
+                return
+            }
+
+            setConfig(configResult.data)
+            setInitialRuleState(ruleState)
+            setRuleState(ruleState)
+            setUiState((prev) => ({
+                ...prev,
+                pageState: PageState.Success
+            }))
+        } catch (err) {
+            console.log(err)
+            setUiState((prev) => ({
+                ...prev,
+                pageState: PageState.Error
+            }))
+        }
+    }
+
     const fetchTimelinePageData = async () => {
         setUiState((prev) => ({
             ...prev,
@@ -683,22 +725,6 @@ export default function RuleBuilder({
         }))
     }
 
-    const shouldEnableSaveButton = (() => {
-        if (uiState.pageState != PageState.Success) {
-            return false
-        }
-
-        if (mode === 'create') {
-            return true
-        }
-
-        return JSON.stringify(initialRuleState) !== JSON.stringify(ruleState)
-    })()
-
-    const updateRuleState = (updates: Partial<RuleState>) => {
-        setRuleState(prev => (prev ? { ...prev, ...updates } : prev))
-    }
-
     const handleEventTypeChange = async (type: string) => {
         setRuleState((prev) => {
             if (!prev) return prev;
@@ -712,7 +738,7 @@ export default function RuleBuilder({
                 }
             };
         });
-    };
+    }
 
     const handleConditionTypeChange = (newType: 'event' | 'trace') => {
         if (!config) return
@@ -752,14 +778,6 @@ export default function RuleBuilder({
         }
     }
 
-    const closeDeleteDialog = (() => {
-        setUiState(prev => ({ ...prev, showDeleteDialog: false }))
-    })
-
-    const openDeleteDialog = (() => {
-        setUiState(prev => ({ ...prev, showDeleteDialog: true }))
-    })
-
     const handleDeleteRule = async () => {
         if (!ruleId) return
         setUiState(prev => ({ ...prev, showDeleteDialog: false, isDeleting: true }))
@@ -799,49 +817,246 @@ export default function RuleBuilder({
         }
     }
 
-    const renderEventWhen = () => {
-        if (!ruleState || !config) return null
+    const handleRuleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setRuleState((prev) => {
+            if (!prev) return null;
+            return {
+                ...prev,
+                name: event.target.value,
+            }
+        })
 
-        const eventConfig = config as EventTargetingConfigResponse
-        const eventTypes = eventConfig.events
-            .filter((e): e is EventTargetingConfig => 'type' in e)
-            .map(e => e.type)
+        setUiState((prev) => ({
+            ...prev,
+            ruleNameError: false
+        }))
+    }
 
-        return (
-            <div className="flex flex-col gap-4">
-                <span className="font-display text-xl">When</span>
+    const closeDeleteDialog = (() => {
+        setUiState(prev => ({ ...prev, showDeleteDialog: false }))
+    })
 
-                <div className="flex items-center gap-3">
-                    <span className="font-display text-base text-gray-600">Event of type</span>
-                    <DropdownSelect
-                        type={DropdownSelectType.SingleString}
-                        title="Select event type"
-                        items={eventTypes}
-                        initialSelected={ruleState.condition.eventType ?? ''}
-                        onChangeSelected={(selected) => handleEventTypeChange(selected as string)}
-                    />
-                    <span className="font-display text-base text-gray-600">occurs</span>
-                </div>
+    const openDeleteDialog = (() => {
+        setUiState(prev => ({ ...prev, showDeleteDialog: true }))
+    })
 
-                {ruleState.condition.attributes.length === 0 && (
-                    <div>
-                        <Button
-                            type="button"
-                            variant="ghost"
-                            onClick={addAttribute}
-                            className="flex items-center gap-1.5 text-sm -ml-2"
-                        >
-                            <Plus className="w-4 h-4" />
-                            Add Filter
-                        </Button>
-                    </div>
-                )}
-            </div>
-        )
-    }
+    const addAttribute = () => {
+        if (!ruleState || !config) {
+            return
+        }
 
-    const renderTraceWhen = () => {
-        if (!ruleState || !config) return null
+        const effectiveType = type === 'timeline' ? ruleState.conditionType : type
+
+        if (effectiveType === 'event') {
+            const eventConfig = config as EventTargetingConfigResponse | SessionTargetingConfigResponse
+            const eventDef = 'events' in eventConfig
+                ? eventConfig.events.find((e) => 'type' in e && e.type === ruleState.condition.eventType) as EventTargetingConfig | undefined
+                : undefined
+            const attr = eventDef?.attrs?.at(0) ?? eventConfig.session_attrs?.at(0)
+
+            if (!attr) {
+                console.error("Failed to add attribute, no attribute found")
+                return
+            }
+
+            let source: 'fixed' | 'session' | 'ud'
+            if (eventDef?.attrs?.some(a => a.key === attr.key)) {
+                source = 'fixed'
+            } else if (eventConfig.session_attrs?.some(a => a.key === attr.key)) {
+                source = 'session'
+            } else {
+                source = 'ud'
+            }
+
+            const newEventAttr: AttributeField & { source: 'fixed' | 'session' | 'ud' } = {
+                id: crypto.randomUUID(),
+                key: attr.key,
+                type: attr.type,
+                hint: attr.hint,
+                suggestions: attr.suggestions,
+                value: getDefaultValue(attr.type),
+                operator: getOperatorsForType(attr.type)[0] || 'eq',
+                source: source,
+            }
+
+            setRuleState((prev) => {
+                if (!prev) return prev
+                return {
+                    ...prev,
+                    condition: {
+                        ...prev.condition,
+                        attributes: [...prev.condition.attributes, newEventAttr]
+                    }
+                }
+            })
+        } else {
+            const traceConfig = config as TraceTargetingConfigResponse | SessionTargetingConfigResponse
+            const traceAttr = traceConfig.session_attrs?.at(0)
+
+            if (!traceAttr) {
+                console.error("Failed to add trace attribute, no attribute found")
+                return
+            }
+
+            const newTraceAttr: AttributeField & { source: 'fixed' | 'session' | 'ud' } = {
+                id: crypto.randomUUID(),
+                key: traceAttr.key,
+                type: traceAttr.type,
+                hint: traceAttr.hint,
+                suggestions: traceAttr.suggestions,
+                value: getDefaultValue(traceAttr.type),
+                operator: getOperatorsForType(traceAttr.type)[0] || 'eq',
+                source: 'session',
+            }
+
+            setRuleState((prev) => {
+                if (!prev) return prev
+                return {
+                    ...prev,
+                    condition: {
+                        ...prev.condition,
+                        attributes: [...prev.condition.attributes, newTraceAttr]
+                    }
+                }
+            })
+        }
+    }
+
+    const updateAttributeKey = (id: string, newKey: string, newSource: 'fixed' | 'session' | 'ud') => {
+        if (!ruleState || !config) return
+        let attrDef;
+        if (type === 'event') {
+            const eventConfig = config as EventTargetingConfigResponse
+            const eventDef = eventConfig.events.find(e => e.type === ruleState.condition.eventType)
+
+            if (newSource === 'fixed') {
+                attrDef = eventDef?.attrs?.find(a => a.key === newKey)
+            } else if (newSource === 'session') {
+                attrDef = eventConfig.session_attrs?.find(a => a.key === newKey)
+            } else {
+                attrDef = eventConfig.event_ud_attrs?.find(a => a.key === newKey)
+            }
+        } else {
+            const traceConfig = config as TraceTargetingConfigResponse
+            if (newSource === 'session') {
+                attrDef = traceConfig.session_attrs?.find(a => a.key === newKey)
+            }
+        }
+
+        if (!attrDef) {
+            console.error("Failed to find attribute definition for new key")
+            return
+        }
+
+        setRuleState((prev) => {
+            if (!prev) return prev
+            return {
+                ...prev,
+                condition: {
+                    ...prev.condition,
+                    attributes: prev.condition.attributes.map(attr =>
+                        attr.id === id ? {
+                            ...attr,
+                            key: newKey,
+                            source: newSource,
+                            type: attrDef.type,
+                            hint: attrDef.hint,
+                            suggestions: attrDef.suggestions,
+                            value: getDefaultValue(attrDef.type),
+                            operator: getOperatorsForType(attrDef.type)[0] || 'eq',
+                        } : attr
+                    )
+                }
+            }
+        })
+    }
+
+    const updateAttributeValue = (id: string, newValue: string | number | boolean) => {
+        setRuleState((prev) => {
+            if (!prev) return prev
+            return {
+                ...prev,
+                condition: {
+                    ...prev.condition,
+                    attributes: prev.condition.attributes.map(attr =>
+                        attr.id === id ? { ...attr, value: newValue } : attr
+                    )
+                }
+            }
+        })
+    }
+
+    const updateAttributeOperator = (id: string, newOperator: string) => {
+        setRuleState((prev) => {
+            if (!prev) return prev
+            return {
+                ...prev,
+                condition: {
+                    ...prev.condition,
+                    attributes: prev.condition.attributes.map(attr =>
+                        attr.id === id ? { ...attr, operator: newOperator } : attr
+                    )
+                }
+            }
+        })
+    }
+
+    const deleteAttribute = (id: string) => {
+        setRuleState((prev) => {
+            if (!prev) return prev
+            return {
+                ...prev,
+                condition: {
+                    ...prev.condition,
+                    attributes: prev.condition.attributes.filter(attr => attr.id !== id)
+                }
+            }
+        })
+    }
+
+    const renderEventWhen = () => {
+        if (!ruleState || !config) return null
+
+        const eventConfig = config as EventTargetingConfigResponse
+        const eventTypes = eventConfig.events
+            .filter((e): e is EventTargetingConfig => 'type' in e)
+            .map(e => e.type)
+
+        return (
+            <div className="flex flex-col gap-4">
+                <span className="font-display text-xl">When</span>
+
+                <div className="flex items-center gap-3">
+                    <span className="font-display text-base text-gray-600">Event of type</span>
+                    <DropdownSelect
+                        type={DropdownSelectType.SingleString}
+                        title="Select event type"
+                        items={eventTypes}
+                        initialSelected={ruleState.condition.eventType ?? ''}
+                        onChangeSelected={(selected) => handleEventTypeChange(selected as string)}
+                    />
+                    <span className="font-display text-base text-gray-600">occurs</span>
+                </div>
+
+                {ruleState.condition.attributes.length === 0 && (
+                    <div>
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            onClick={addAttribute}
+                            className="flex items-center gap-1.5 text-sm -ml-2"
+                        >
+                            <Plus className="w-4 h-4" />
+                            Add Filter
+                        </Button>
+                    </div>
+                )}
+            </div>
+        )
+    }
+
+    const renderTraceWhen = () => {
+        if (!ruleState || !config) return null
 
         const traceConfig = config as TraceTargetingConfigResponse
         const traceNames = traceConfig.traces
@@ -898,12 +1113,10 @@ export default function RuleBuilder({
 
         const sessionConfig = config as SessionTargetingConfigResponse
 
-        // Event types list
         const eventTypes = sessionConfig.events
             .filter((e): e is EventTargetingConfig => 'type' in e)
             .map(e => e.type)
 
-        // Trace names list
         const traceNames = sessionConfig.traces
             .filter((t): t is TraceTargetingConfig => 'name' in t)
             .map(t => t.name)
@@ -912,7 +1125,6 @@ export default function RuleBuilder({
             <div className="flex flex-col gap-4">
                 <span className="font-display text-xl">When Session contains</span>
 
-                {/* Condition type selector row */}
                 <div className="flex items-center gap-3">
                     <DropdownSelect
                         type={DropdownSelectType.SingleString}
@@ -994,7 +1206,6 @@ export default function RuleBuilder({
                     </div>
                 ) : (
                     <>
-                        {/* Collection */}
                         <div className="mb-4">
                             <p className="font-display text-gray-500 mb-3">Collection</p>
                             <div className="space-y-3 ml-4">
@@ -1041,7 +1252,6 @@ export default function RuleBuilder({
                             </div>
                         </div>
 
-                        {/* Attachments */}
                         {type === 'event' && (
                             <div className="mb-4">
                                 <p className="font-display text-gray-500 mb-3">Attachments</p>
@@ -1093,222 +1303,9 @@ export default function RuleBuilder({
         )
     }
 
-    const getOperatorsForType = (type: string) => {
-        if (!config) return []
-
-        switch (type) {
-            case 'float64':
-                return config?.operator_types.float64
-            case 'int64':
-                return config?.operator_types.int64
-            case 'bool':
-                return config?.operator_types.bool
-            default:
-                return config?.operator_types.string
-        }
-    };
-
-    const getDefaultValue = (type: string): string | number | boolean => {
-        if (type === 'bool') return false
-        if (type === 'int64' || type === 'float64') return 0
-        return ''
-    }
-
-    const addAttribute = () => {
-        if (!ruleState || !config) {
-            return
-        }
-
-        // For timeline type, check the conditionType; for others, use the type directly
-        const effectiveType = type === 'timeline' ? ruleState.conditionType : type
-
-        if (effectiveType === 'event') {
-            const eventConfig = config as EventTargetingConfigResponse | SessionTargetingConfigResponse
-            const eventDef = 'events' in eventConfig
-                ? eventConfig.events.find((e) => 'type' in e && e.type === ruleState.condition.eventType) as EventTargetingConfig | undefined
-                : undefined
-            const attr = eventDef?.attrs?.at(0) ?? eventConfig.session_attrs?.at(0)
-
-            if (!attr) {
-                console.error("Failed to add attribute, no attribute found")
-                return
-            }
-
-            let source: 'fixed' | 'session' | 'ud'
-            if (eventDef?.attrs?.some(a => a.key === attr.key)) {
-                source = 'fixed'
-            } else if (eventConfig.session_attrs?.some(a => a.key === attr.key)) {
-                source = 'session'
-            } else {
-                source = 'ud'
-            }
-
-            const newEventAttr: AttributeField & { source: 'fixed' | 'session' | 'ud' } = {
-                id: crypto.randomUUID(),
-                key: attr.key,
-                type: attr.type,
-                hint: attr.hint,
-                suggestions: attr.suggestions,
-                value: getDefaultValue(attr.type),
-                operator: getOperatorsForType(attr.type)[0] || 'eq',
-                source: source,
-            }
-
-            setRuleState((prev) => {
-                if (!prev) return prev
-                return {
-                    ...prev,
-                    condition: {
-                        ...prev.condition,
-                        attributes: [...prev.condition.attributes, newEventAttr]
-                    }
-                }
-            })
-        } else {
-            // trace type
-            const traceConfig = config as TraceTargetingConfigResponse | SessionTargetingConfigResponse
-            const traceAttr = traceConfig.session_attrs?.at(0)
-
-            if (!traceAttr) {
-                console.error("Failed to add trace attribute, no attribute found")
-                return
-            }
-
-            const newTraceAttr: AttributeField & { source: 'fixed' | 'session' | 'ud' } = {
-                id: crypto.randomUUID(),
-                key: traceAttr.key,
-                type: traceAttr.type,
-                hint: traceAttr.hint,
-                suggestions: traceAttr.suggestions,
-                value: getDefaultValue(traceAttr.type),
-                operator: getOperatorsForType(traceAttr.type)[0] || 'eq',
-                source: 'session',
-            }
-
-            setRuleState((prev) => {
-                if (!prev) return prev
-                return {
-                    ...prev,
-                    condition: {
-                        ...prev.condition,
-                        attributes: [...prev.condition.attributes, newTraceAttr]
-                    }
-                }
-            })
-        }
-    }
-
-    const updateAttributeKey = (id: string, newKey: string, newSource: 'fixed' | 'session' | 'ud') => {
-        if (!ruleState || !config) return
-        let attrDef;
-        if (type === 'event') {
-            const eventConfig = config as EventTargetingConfigResponse
-            const eventDef = eventConfig.events.find(e => e.type === ruleState.condition.eventType)
-
-            if (newSource === 'fixed') {
-                attrDef = eventDef?.attrs?.find(a => a.key === newKey)
-            } else if (newSource === 'session') {
-                attrDef = eventConfig.session_attrs?.find(a => a.key === newKey)
-            } else {
-                attrDef = eventConfig.event_ud_attrs?.find(a => a.key === newKey)
-            }
-        } else {
-            const traceConfig = config as TraceTargetingConfigResponse
-            if (newSource === 'session') {
-                attrDef = traceConfig.session_attrs?.find(a => a.key === newKey)
-            }
-        }
-
-        if (!attrDef) {
-            console.error("Failed to find attribute definition for new key")
-            return
-        }
-
-        setRuleState((prev) => {
-            if (!prev) return prev
-            return {
-                ...prev,
-                condition: {
-                    ...prev.condition,
-                    attributes: prev.condition.attributes.map(attr =>
-                        attr.id === id ? {
-                            ...attr,
-                            key: newKey,
-                            source: newSource,
-                            type: attrDef.type,
-                            hint: attrDef.hint,
-                            suggestions: attrDef.suggestions,
-                            value: getDefaultValue(attrDef.type),
-                            operator: getOperatorsForType(attrDef.type)[0] || 'eq',
-                        } : attr
-                    )
-                }
-            }
-        })
-    }
-
-    const updateAttributeValue = (id: string, newValue: string | number | boolean) => {
-        setRuleState((prev) => {
-            if (!prev) return prev
-            return {
-                ...prev,
-                condition: {
-                    ...prev.condition,
-                    attributes: prev.condition.attributes.map(attr =>
-                        attr.id === id ? { ...attr, value: newValue } : attr
-                    )
-                }
-            }
-        })
-    }
-
-    const updateAttributeOperator = (id: string, newOperator: string) => {
-        setRuleState((prev) => {
-            if (!prev) return prev
-            return {
-                ...prev,
-                condition: {
-                    ...prev.condition,
-                    attributes: prev.condition.attributes.map(attr =>
-                        attr.id === id ? { ...attr, operator: newOperator } : attr
-                    )
-                }
-            }
-        })
-    }
-
-    const deleteAttribute = (id: string) => {
-        setRuleState((prev) => {
-            if (!prev) return prev
-            return {
-                ...prev,
-                condition: {
-                    ...prev.condition,
-                    attributes: prev.condition.attributes.filter(attr => attr.id !== id)
-                }
-            }
-        })
-    }
-
-    const handleRuleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        setRuleState((prev) => {
-            if (!prev) return null;
-            return {
-                ...prev,
-                name: event.target.value,
-            }
-        })
-
-        setUiState((prev) => ({
-            ...prev,
-            ruleNameError: false
-        }))
-    }
-
     const renderAttributes = () => {
         if (!ruleState || !config) return null
 
-        // For timeline type, check the conditionType; for others, use the type directly
         const effectiveType = type === 'timeline' ? ruleState.conditionType : type
 
         const allAttributeKeys: Record<string, string> = {}
@@ -1393,17 +1390,6 @@ export default function RuleBuilder({
         )
     }
 
-    const pageHeading = (() => {
-        switch (type) {
-            case 'event':
-                return mode === 'create' ? 'Create Event Rule' : 'Edit Event Rule'
-            case 'trace':
-                return mode === 'create' ? 'Create Trace Rule' : 'Edit Trace Rule'
-            case 'timeline':
-                return mode === 'create' ? 'Create Session Timeline Rule' : 'Edit Session Timeline Rule'
-        }
-    })()
-
     useEffect(() => {
         if (type == 'event') {
             fetchEventPageData()
@@ -1414,7 +1400,6 @@ export default function RuleBuilder({
         }
     }, [type, appId, mode, ruleId])
 
-
     return (
         <div>
             {/* Heading & save button */}

From b3576c9c4f39306ec85a6947d9534e4d23911e39 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Tue, 18 Nov 2025 16:49:02 +0530
Subject: [PATCH 83/98] feat(frontend): refactor

---
 .../app/components/targeting/rule_builder.tsx | 50 +++++++++----------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/frontend/dashboard/app/components/targeting/rule_builder.tsx b/frontend/dashboard/app/components/targeting/rule_builder.tsx
index d71977c40..f38e8baae 100644
--- a/frontend/dashboard/app/components/targeting/rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/rule_builder.tsx
@@ -1024,10 +1024,10 @@ export default function RuleBuilder({
 
         return (
             <div className="flex flex-col gap-4">
-                <span className="font-display text-xl">When</span>
+                <span className="text-xl font-display">When</span>
 
                 <div className="flex items-center gap-3">
-                    <span className="font-display text-base text-gray-600">Event of type</span>
+                    <span className="text-base text-gray-600 font-display">Event of type</span>
                     <DropdownSelect
                         type={DropdownSelectType.SingleString}
                         title="Select event type"
@@ -1035,7 +1035,7 @@ export default function RuleBuilder({
                         initialSelected={ruleState.condition.eventType ?? ''}
                         onChangeSelected={(selected) => handleEventTypeChange(selected as string)}
                     />
-                    <span className="font-display text-base text-gray-600">occurs</span>
+                    <span className="text-base text-gray-600 font-display">occurs</span>
                 </div>
 
                 {ruleState.condition.attributes.length === 0 && (
@@ -1044,7 +1044,7 @@ export default function RuleBuilder({
                             type="button"
                             variant="ghost"
                             onClick={addAttribute}
-                            className="flex items-center gap-1.5 text-sm -ml-2"
+                            className="font-medium flex items-center gap-1.5 text-sm -ml-2"
                         >
                             <Plus className="w-4 h-4" />
                             Add Filter
@@ -1067,10 +1067,10 @@ export default function RuleBuilder({
 
         return (
             <div className="flex flex-col gap-4">
-                <span className="font-display text-xl">When</span>
+                <span className="text-xl font-display">When</span>
 
                 <div className="flex items-center gap-3">
-                    <span className="font-display text-base text-gray-600">Trace with name</span>
+                    <span className="text-base text-gray-600 font-display">Trace with name</span>
                     <TraceOperatorNameInput
                         operator={ruleState.condition.spanOperator || "eq"}
                         value={ruleState.condition.spanName || ""}
@@ -1088,7 +1088,7 @@ export default function RuleBuilder({
                             )
                         }
                     />
-                    <span className="font-display text-base text-gray-600">ends</span>
+                    <span className="text-base text-gray-600 font-display">ends</span>
                 </div>
 
                 {ruleState.condition.attributes.length === 0 && (
@@ -1097,7 +1097,7 @@ export default function RuleBuilder({
                             type="button"
                             variant="ghost"
                             onClick={addAttribute}
-                            className="flex items-center gap-1.5 text-sm -ml-2"
+                            className="font-medium flex items-center gap-1.5 text-sm -ml-2"
                         >
                             <Plus className="w-4 h-4" />
                             Add Filter
@@ -1123,7 +1123,7 @@ export default function RuleBuilder({
 
         return (
             <div className="flex flex-col gap-4">
-                <span className="font-display text-xl">When Session contains</span>
+                <span className="text-xl font-display">When Session contains</span>
 
                 <div className="flex items-center gap-3">
                     <DropdownSelect
@@ -1136,7 +1136,7 @@ export default function RuleBuilder({
 
                     {ruleState.conditionType === 'event' ? (
                         <>
-                            <span className="font-display text-base text-gray-600">with type</span>
+                            <span className="text-base text-gray-600 font-display">with type</span>
                             <DropdownSelect
                                 type={DropdownSelectType.SingleString}
                                 title="Select event type"
@@ -1147,7 +1147,7 @@ export default function RuleBuilder({
                         </>
                     ) : (
                         <>
-                            <span className="font-display text-base text-gray-600">with name</span>
+                            <span className="text-base text-gray-600 font-display">with name</span>
                             <TraceOperatorNameInput
                                 operator={ruleState.condition.spanOperator || "eq"}
                                 value={ruleState.condition.spanName || ""}
@@ -1216,7 +1216,7 @@ export default function RuleBuilder({
                                         value="sampled"
                                         checked={ruleState.collectionMode === 'sampled'}
                                         onChange={() => updateRuleState({ collectionMode: 'sampled' })}
-                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
+                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full outline-none cursor-pointer checked:bg-black checked:border-black focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
                                     />
                                     <SamplingRateInput
                                         value={ruleState.sampleRate || 100}
@@ -1233,7 +1233,7 @@ export default function RuleBuilder({
                                         value="timeline"
                                         checked={ruleState.collectionMode === 'timeline'}
                                         onChange={() => updateRuleState({ collectionMode: 'timeline' })}
-                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
+                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full outline-none cursor-pointer checked:bg-black checked:border-black focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
                                     />
                                     <span className="text-sm font-body">Collect with timeline only</span>
                                 </label>
@@ -1245,7 +1245,7 @@ export default function RuleBuilder({
                                         value="disabled"
                                         checked={ruleState.collectionMode === 'disabled'}
                                         onChange={() => updateRuleState({ collectionMode: 'disabled', take_layout_snapshot: false, take_screenshot: false })}
-                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
+                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full outline-none cursor-pointer checked:bg-black checked:border-black focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
                                     />
                                     <span className="text-sm font-body">Do not collect</span>
                                 </label>
@@ -1264,7 +1264,7 @@ export default function RuleBuilder({
                                             checked={ruleState.take_layout_snapshot === true && ruleState.take_screenshot === false}
                                             onChange={() => updateRuleState({ take_layout_snapshot: true, take_screenshot: false })}
                                             disabled={ruleState.collectionMode === 'disabled'}
-                                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
+                                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full outline-none cursor-pointer checked:bg-black checked:border-black focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
                                         />
                                         <span className="text-sm font-body">Take layout snapshot</span>
                                     </label>
@@ -1277,7 +1277,7 @@ export default function RuleBuilder({
                                             checked={ruleState.take_screenshot === true && ruleState.take_layout_snapshot === false}
                                             onChange={() => updateRuleState({ take_screenshot: true, take_layout_snapshot: false })}
                                             disabled={ruleState.collectionMode === 'disabled'}
-                                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
+                                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full outline-none cursor-pointer checked:bg-black checked:border-black focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
                                         />
                                         <span className="text-sm font-body">Take screenshot</span>
                                     </label>
@@ -1290,7 +1290,7 @@ export default function RuleBuilder({
                                             checked={ruleState.take_screenshot === false && ruleState.take_layout_snapshot === false}
                                             onChange={() => updateRuleState({ take_screenshot: false, take_layout_snapshot: false })}
                                             disabled={ruleState.collectionMode === 'disabled'}
-                                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
+                                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full outline-none cursor-pointer checked:bg-black checked:border-black focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
                                         />
                                         <span className="text-sm font-body">No attachments</span>
                                     </label>
@@ -1380,7 +1380,7 @@ export default function RuleBuilder({
                         type="button"
                         variant="ghost"
                         onClick={addAttribute}
-                        className="flex items-center gap-1.5 text-sm self-start -ml-2"
+                        className="font-medium flex items-center gap-1.5 text-sm -ml-2"
                     >
                         <Plus className="w-4 h-4" />
                         Add Filter
@@ -1404,12 +1404,12 @@ export default function RuleBuilder({
         <div>
             {/* Heading & save button */}
             <div className="flex flex-row items-center justify-between w-full">
-                <p className="font-display text-4xl max-w-6xl">{pageHeading}</p>
+                <p className="max-w-6xl text-4xl font-display">{pageHeading}</p>
                 <Button
                     type="button"
                     variant="outline"
                     onClick={handleSave}
-                    className="font-display border border-black"
+                    className="border border-black font-display"
                     disabled={!shouldEnableSaveButton}
                     loading={uiState.saving}
                 >
@@ -1435,8 +1435,8 @@ export default function RuleBuilder({
                         <p className="text-normal font-body">Error loading rule. Please try again or go back.</p>
                         <div className="py-4" />
                         <div className="flex gap-3">
-                            <Button variant="outline" onClick={type == 'event' ? fetchEventPageData : fetchTracePageData} className="font-display border border-black">Retry</Button>
-                            <Button variant="outline" onClick={onCancel} className="font-display border border-black">Go Back</Button>
+                            <Button variant="outline" onClick={type == 'event' ? fetchEventPageData : fetchTracePageData} className="border border-black font-display">Retry</Button>
+                            <Button variant="outline" onClick={onCancel} className="border border-black font-display">Go Back</Button>
                         </div>
                     </div>
                 </div>
@@ -1458,7 +1458,7 @@ export default function RuleBuilder({
                     <div className='py-2' />
 
                     <div className="flex flex-col gap-2">
-                        <p className="font-display text-xl max-w-6xl">Rule Name</p>
+                        <p className="max-w-6xl text-xl font-display">Rule Name</p>
 
                         <div className="py-0.5" />
                         <input
@@ -1467,7 +1467,7 @@ export default function RuleBuilder({
                             maxLength={64}
                             value={ruleState?.name}
                             onChange={handleRuleNameChange}
-                            className={`w-96 border rounded-md outline-hidden text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 font-body disabled:opacity-50 disabled:cursor-not-allowed ${uiState.ruleNameError ? 'border-red-500' : 'border-black'}`}
+                            className={`w-96 border rounded-md outline-none text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] py-2 px-4 font-body disabled:opacity-50 disabled:cursor-not-allowed ${uiState.ruleNameError ? 'border-red-500' : 'border-black'}`}
                         />
                         {uiState.ruleNameError && (
                             <p className="text-red-600 text-sm ml-1">Rule name is required</p>
@@ -1482,7 +1482,7 @@ export default function RuleBuilder({
                                 type="button"
                                 variant="ghost"
                                 onClick={openDeleteDialog}
-                                className="font-display text-red-600 hover:text-white hover:bg-red-600"
+                                className="text-red-600 font-display hover:text-white hover:bg-red-600"
                             >
                                 Delete Rule
                             </Button>

From 5a9f2a9dd461a07420f67f53771edbc82de89f95 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Tue, 18 Nov 2025 16:58:46 +0530
Subject: [PATCH 84/98] feat(frontend): refactor

---
 .../app/components/targeting/rule_builder.tsx |   8 +-
 .../app/components/targeting/rules_table.tsx  | 215 ++++++++++--------
 2 files changed, 128 insertions(+), 95 deletions(-)

diff --git a/frontend/dashboard/app/components/targeting/rule_builder.tsx b/frontend/dashboard/app/components/targeting/rule_builder.tsx
index f38e8baae..3d1b54731 100644
--- a/frontend/dashboard/app/components/targeting/rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/rule_builder.tsx
@@ -1024,7 +1024,7 @@ export default function RuleBuilder({
 
         return (
             <div className="flex flex-col gap-4">
-                <span className="text-xl font-display">When</span>
+                <p className="max-w-6xl text-xl font-display">When</p>
 
                 <div className="flex items-center gap-3">
                     <span className="text-base text-gray-600 font-display">Event of type</span>
@@ -1191,7 +1191,9 @@ export default function RuleBuilder({
 
         return (
             <div>
-                <p className="font-display text-xl mb-4">Then</p>
+                <p className="max-w-6xl text-xl font-display">Then</p>
+
+                <div className="py-2"></div>
 
                 {type === 'timeline' ? (
                     <div className="mb-4">
@@ -1455,7 +1457,7 @@ export default function RuleBuilder({
 
                     {renderThen()}
 
-                    <div className='py-2' />
+                    <div className='py-1' />
 
                     <div className="flex flex-col gap-2">
                         <p className="max-w-6xl text-xl font-display">Rule Name</p>
diff --git a/frontend/dashboard/app/components/targeting/rules_table.tsx b/frontend/dashboard/app/components/targeting/rules_table.tsx
index 346c87e12..4fad3c68a 100644
--- a/frontend/dashboard/app/components/targeting/rules_table.tsx
+++ b/frontend/dashboard/app/components/targeting/rules_table.tsx
@@ -6,6 +6,15 @@ import { formatDateToHumanReadableDate, formatDateToHumanReadableTime } from '@/
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/tooltip'
 import { Info } from 'lucide-react'
 
+type Rule = EventTargetingRule | TraceTargetingRule | SessionTargetingRule
+
+interface RulesTableProps {
+    rules: Rule[]
+    tableType: 'session' | 'event' | 'trace'
+    onRuleClick: (rule: Rule) => void
+    showOverridesHeader?: boolean
+}
+
 const getCollectionConfigDisplay = (collectionMode: CollectionMode, samplingRate?: number): string => {
     switch (collectionMode) {
         case 'sampled':
@@ -37,21 +46,16 @@ const getSamplingRateDisplay = (samplingRate: number): string => {
     return `${samplingRate}% sampling rate`
 }
 
-type Rule = EventTargetingRule | TraceTargetingRule | SessionTargetingRule
-
-interface RulesTableProps {
-    rules: Rule[]
-    tableType: 'session' | 'event' | 'trace'
-    onRuleClick: (rule: Rule) => void
-    showOverridesHeader?: boolean
-}
-
 export default function RulesTable({ rules, tableType, onRuleClick, showOverridesHeader = true }: RulesTableProps) {
     const renderCollectionMode = (rule: Rule) => {
         switch (tableType) {
             case 'session':
                 const sessionRule = rule as SessionTargetingRule
-                return <p className='text-xs truncate select-none text-gray-500'>{getSamplingRateDisplay(sessionRule.sampling_rate)}</p>
+                return (
+                    <p className="text-xs text-gray-500 truncate select-none">
+                        {getSamplingRateDisplay(sessionRule.sampling_rate)}
+                    </p>
+                )
 
             case 'event':
                 const eventRule = rule as EventTargetingRule
@@ -60,7 +64,7 @@ export default function RulesTable({ rules, tableType, onRuleClick, showOverride
                 const fullDisplay = attachmentDisplay ? `${collectionDisplay}, ${attachmentDisplay}` : collectionDisplay
 
                 return (
-                    <p className='text-xs truncate select-none text-gray-500'>
+                    <p className="text-xs text-gray-500 truncate select-none">
                         {fullDisplay}
                     </p>
                 )
@@ -68,97 +72,124 @@ export default function RulesTable({ rules, tableType, onRuleClick, showOverride
             case 'trace':
                 const traceRule = rule as TraceTargetingRule
                 return (
-                    <p className='text-xs truncate select-none text-gray-500'>
+                    <p className="text-xs text-gray-500 truncate select-none">
                         {getCollectionConfigDisplay(traceRule.collection_mode, traceRule.sampling_rate)}
                     </p>
                 )
         }
     }
 
-    return (
-        <>
-            {showOverridesHeader && (
-                <>
-                    <div className="py-6" />
-                    <div className="w-full flex items-center gap-2">
-                        <p className="font-display text-gray-500">Overrides</p>
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <Info className="w-4 h-4 text-gray-400 cursor-help" />
-                            </TooltipTrigger>
-                            <TooltipContent side="right" align="start" className="font-display text-sm text-white fill-neutral-800 bg-neutral-800 whitespace-nowrap">
-                                <div className="p-2">
-                                    <p>When a rule's condition matches, it overrides the default behavior.</p>
-                                </div>
-                            </TooltipContent>
-                        </Tooltip>
-                    </div>
-                    <div className="py-2" />
-                </>
-            )}
+    const renderOverridesHeader = () => {
+        if (!showOverridesHeader) return null
 
-            {rules.length === 0 ? (
-                <div className="text-sm font-body text-gray-500">
-                    No rules created
+        return (
+            <>
+                <div className="py-6" />
+                <div className="flex items-center gap-2 w-full">
+                    <p className="text-gray-500 font-display">Overrides</p>
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <Info className="w-4 h-4 text-gray-400 cursor-help" />
+                        </TooltipTrigger>
+                        <TooltipContent 
+                            side="right" 
+                            align="start" 
+                            className="p-2 text-sm text-white font-display whitespace-nowrap bg-neutral-800 fill-neutral-800"
+                        >
+                            <p>When a rule's condition matches, it overrides the default behavior.</p>
+                        </TooltipContent>
+                    </Tooltip>
                 </div>
+                <div className="py-2" />
+            </>
+        )
+    }
+
+    const renderEmptyState = () => (
+        <div className="text-sm text-gray-500 font-body">
+            No rules created
+        </div>
+    )
+
+    const renderRuleCreatedCell = (rule: Rule) => (
+        <TableCell className="w-[20%] p-4 text-center">
+            <p className="truncate select-none">{formatDateToHumanReadableDate(rule.created_at)}</p>
+            <div className="py-1" />
+            <p className="text-xs truncate select-none">{formatDateToHumanReadableTime(rule.created_at)}</p>
+            <div className="py-1" />
+            <p className="text-xs text-gray-500 truncate select-none">{rule.created_by ? rule.created_by : "Default"}</p>
+        </TableCell>
+    )
+
+    const renderRuleModifiedCell = (rule: Rule) => (
+        <TableCell className="w-[20%] p-4 text-center">
+            {rule.updated_at ? (
+                <>
+                    <p className="truncate select-none">{formatDateToHumanReadableDate(rule.updated_at)}</p>
+                    <div className="py-1" />
+                    <p className="text-xs truncate select-none">{formatDateToHumanReadableTime(rule.updated_at)}</p>
+                    {rule.updated_by && (
+                        <>
+                            <div className="py-1" />
+                            <p className="text-xs text-gray-500 truncate select-none">{rule.updated_by}</p>
+                        </>
+                    )}
+                </>
             ) : (
-                <div className="overflow-hidden">
-                    <div className="overflow-x-auto">
-                        <Table className="font-display">
-                            <TableHeader className="sticky top-0 bg-white z-10">
-                                <TableRow>
-                                    <TableHead className="w-[60%]">Rule</TableHead>
-                                    <TableHead className="w-[20%] text-center">Created</TableHead>
-                                    <TableHead className="w-[20%] text-center">Modified</TableHead>
-                                </TableRow>
-                            </TableHeader>
-                        </Table>
-                    </div>
-                    <div className="max-h-[400px] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-transparent hover:[&::-webkit-scrollbar-thumb]:bg-gray-300 focus-within:[&::-webkit-scrollbar-thumb]:bg-gray-300">
-                        <Table className="font-display">
-                            <TableBody>
-                                {rules.map((rule, idx) => (
-                                    <TableRow
-                                        key={`${idx}-${rule.id}`}
-                                        className="font-body cursor-pointer hover:bg-yellow-200 focus-visible:border-yellow-200 select-none"
-                                        onClick={() => onRuleClick(rule)}
-                                    >
-                                        <TableCell className="w-[60%] p-4">
-                                            <p className='truncate select-none'>{rule.name}</p>
-                                            <div className='py-1' />
-                                            {renderCollectionMode(rule)}
-                                        </TableCell>
-                                        <TableCell className="w-[20%] text-center p-4">
-                                            <p className='truncate select-none'>{formatDateToHumanReadableDate(rule.created_at)}</p>
-                                            <div className='py-1' />
-                                            <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(rule.created_at)}</p>
-                                            <div className='py-1' />
-                                            <p className='text-xs truncate text-gray-500 select-none'>{rule.created_by ? rule.created_by : "Default"}</p>
-                                        </TableCell>
-                                        <TableCell className="w-[20%] text-center p-4">
-                                            {rule.updated_at ? (
-                                                <>
-                                                    <p className='truncate select-none'>{formatDateToHumanReadableDate(rule.updated_at)}</p>
-                                                    <div className='py-1' />
-                                                    <p className='text-xs truncate select-none'>{formatDateToHumanReadableTime(rule.updated_at)}</p>
-                                                    {rule.updated_by && (
-                                                        <>
-                                                            <div className='py-1' />
-                                                            <p className='text-xs truncate text-gray-500 select-none'>{rule.updated_by}</p>
-                                                        </>
-                                                    )}
-                                                </>
-                                            ) : (
-                                                <div>-</div>
-                                            )}
-                                        </TableCell>
-                                    </TableRow>
-                                ))}
-                            </TableBody>
-                        </Table>
-                    </div>
-                </div>
+                <div>-</div>
             )}
+        </TableCell>
+    )
+
+    const renderTableHeader = () => (
+        <div className="overflow-x-auto">
+            <Table className="font-display">
+                <TableHeader className="sticky top-0 z-10 bg-white">
+                    <TableRow>
+                        <TableHead className="w-[60%]">Rule</TableHead>
+                        <TableHead className="w-[20%] text-center">Created</TableHead>
+                        <TableHead className="w-[20%] text-center">Modified</TableHead>
+                    </TableRow>
+                </TableHeader>
+            </Table>
+        </div>
+    )
+
+    const renderTableBody = () => (
+        <div className="max-h-[400px] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-transparent hover:[&::-webkit-scrollbar-thumb]:bg-gray-300 focus-within:[&::-webkit-scrollbar-thumb]:bg-gray-300">
+            <Table className="font-display">
+                <TableBody>
+                    {rules.map((rule, idx) => (
+                        <TableRow
+                            key={`${idx}-${rule.id}`}
+                            className="cursor-pointer select-none font-body hover:bg-yellow-200 focus-visible:border-yellow-200"
+                            onClick={() => onRuleClick(rule)}
+                        >
+                            <TableCell className="w-[60%] p-4">
+                                <p className="truncate select-none">{rule.name}</p>
+                                <div className="py-1" />
+                                {renderCollectionMode(rule)}
+                            </TableCell>
+                            {renderRuleCreatedCell(rule)}
+                            {renderRuleModifiedCell(rule)}
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </div>
+    )
+
+    const renderTable = () => (
+        <div className="overflow-hidden">
+            {renderTableHeader()}
+            {renderTableBody()}
+        </div>
+    )
+
+    return (
+        <>
+            {renderOverridesHeader()}
+            {rules.length === 0 ? renderEmptyState() : renderTable()}
         </>
     )
 }
\ No newline at end of file

From abd18b5417e29b9ed8db4cf614cbb9cc7d958439 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Tue, 18 Nov 2025 17:08:04 +0530
Subject: [PATCH 85/98] feat(frontend): radio styling

---
 .../targeting/edit_default_rule_dialog.tsx           |  8 ++++----
 .../app/components/targeting/rule_builder.tsx        | 12 ++++++------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
index 80080b603..31886efd7 100644
--- a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
+++ b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
@@ -81,7 +81,7 @@ export default function EditDefaultRuleDialog({
         }
     }
 
-     useEffect(() => {
+    useEffect(() => {
         if (isOpen) {
             setCollectionMode(initialCollectionMode)
             setSampleRate(initialSampleRate || 100)
@@ -114,7 +114,7 @@ export default function EditDefaultRuleDialog({
                                 checked={collectionMode === 'sampled'}
                                 onChange={() => setCollectionMode('sampled')}
                                 disabled={isSaving}
-                                className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
+                                className="appearance-none w-4 h-4 border-2 border-gray-300 rounded-full cursor-pointer bg-white checked:bg-yellow-500 checked:border-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-300"
                             />
                             <SamplingRateInput
                                 value={sampleRate}
@@ -132,7 +132,7 @@ export default function EditDefaultRuleDialog({
                                 checked={collectionMode === 'timeline'}
                                 onChange={() => setCollectionMode('timeline')}
                                 disabled={isSaving}
-                                className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
+                                className="appearance-none w-4 h-4 border-2 border-gray-300 rounded-full cursor-pointer bg-white checked:bg-yellow-500 checked:border-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-300"
                             />
                             <span className="text-sm font-body">Collect {displayNameLower} with session timeline only</span>
                         </label>
@@ -145,7 +145,7 @@ export default function EditDefaultRuleDialog({
                                 checked={collectionMode === 'disabled'}
                                 onChange={() => setCollectionMode('disabled')}
                                 disabled={isSaving}
-                                className="appearance-none w-4 h-4 border border-gray-400 rounded-full checked:bg-black checked:border-black cursor-pointer outline-none focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
+                                className="appearance-none w-4 h-4 border-2 border-gray-300 rounded-full cursor-pointer bg-white checked:bg-yellow-500 checked:border-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-300"
                             />
                             <span className="text-sm font-body">Collect no {displayNameLower} by default</span>
                         </label>
diff --git a/frontend/dashboard/app/components/targeting/rule_builder.tsx b/frontend/dashboard/app/components/targeting/rule_builder.tsx
index 3d1b54731..b6a6d325b 100644
--- a/frontend/dashboard/app/components/targeting/rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/rule_builder.tsx
@@ -1218,7 +1218,7 @@ export default function RuleBuilder({
                                         value="sampled"
                                         checked={ruleState.collectionMode === 'sampled'}
                                         onChange={() => updateRuleState({ collectionMode: 'sampled' })}
-                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full outline-none cursor-pointer checked:bg-black checked:border-black focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
+                                        className="appearance-none w-4 h-4 border-2 border-gray-300 rounded-full cursor-pointer bg-white checked:bg-yellow-500 checked:border-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-300"
                                     />
                                     <SamplingRateInput
                                         value={ruleState.sampleRate || 100}
@@ -1235,7 +1235,7 @@ export default function RuleBuilder({
                                         value="timeline"
                                         checked={ruleState.collectionMode === 'timeline'}
                                         onChange={() => updateRuleState({ collectionMode: 'timeline' })}
-                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full outline-none cursor-pointer checked:bg-black checked:border-black focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
+                                        className="appearance-none w-4 h-4 border-2 border-gray-300 rounded-full cursor-pointer bg-white checked:bg-yellow-500 checked:border-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-300"
                                     />
                                     <span className="text-sm font-body">Collect with timeline only</span>
                                 </label>
@@ -1247,7 +1247,7 @@ export default function RuleBuilder({
                                         value="disabled"
                                         checked={ruleState.collectionMode === 'disabled'}
                                         onChange={() => updateRuleState({ collectionMode: 'disabled', take_layout_snapshot: false, take_screenshot: false })}
-                                        className="appearance-none w-4 h-4 border border-gray-400 rounded-full outline-none cursor-pointer checked:bg-black checked:border-black focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
+                                        className="appearance-none w-4 h-4 border-2 border-gray-300 rounded-full cursor-pointer bg-white checked:bg-yellow-500 checked:border-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-300"
                                     />
                                     <span className="text-sm font-body">Do not collect</span>
                                 </label>
@@ -1266,7 +1266,7 @@ export default function RuleBuilder({
                                             checked={ruleState.take_layout_snapshot === true && ruleState.take_screenshot === false}
                                             onChange={() => updateRuleState({ take_layout_snapshot: true, take_screenshot: false })}
                                             disabled={ruleState.collectionMode === 'disabled'}
-                                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full outline-none cursor-pointer checked:bg-black checked:border-black focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
+                                            className="appearance-none w-4 h-4 border-2 border-gray-300 rounded-full cursor-pointer bg-white checked:bg-yellow-500 checked:border-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-300"
                                         />
                                         <span className="text-sm font-body">Take layout snapshot</span>
                                     </label>
@@ -1279,7 +1279,7 @@ export default function RuleBuilder({
                                             checked={ruleState.take_screenshot === true && ruleState.take_layout_snapshot === false}
                                             onChange={() => updateRuleState({ take_screenshot: true, take_layout_snapshot: false })}
                                             disabled={ruleState.collectionMode === 'disabled'}
-                                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full outline-none cursor-pointer checked:bg-black checked:border-black focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
+                                            className="appearance-none w-4 h-4 border-2 border-gray-300 rounded-full cursor-pointer bg-white checked:bg-yellow-500 checked:border-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-300"
                                         />
                                         <span className="text-sm font-body">Take screenshot</span>
                                     </label>
@@ -1292,7 +1292,7 @@ export default function RuleBuilder({
                                             checked={ruleState.take_screenshot === false && ruleState.take_layout_snapshot === false}
                                             onChange={() => updateRuleState({ take_screenshot: false, take_layout_snapshot: false })}
                                             disabled={ruleState.collectionMode === 'disabled'}
-                                            className="appearance-none w-4 h-4 border border-gray-400 rounded-full outline-none cursor-pointer checked:bg-black checked:border-black focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-0 disabled:cursor-not-allowed"
+                                            className="appearance-none w-4 h-4 border-2 border-gray-300 rounded-full cursor-pointer bg-white checked:bg-yellow-500 checked:border-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-300"
                                         />
                                         <span className="text-sm font-body">No attachments</span>
                                     </label>

From df21c6fd0fb71094a4bf08dd2a88069f0ec0e777 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 19 Nov 2025 07:59:39 +0530
Subject: [PATCH 86/98] feat(frontend): add tests

---
 .../components/rule_builder_test.tsx          | 1993 +++++++++++++++++
 .../pages/data_control_overview_test.tsx      |  324 +++
 frontend/dashboard/app/[teamId]/data/page.tsx |    2 +-
 3 files changed, 2318 insertions(+), 1 deletion(-)
 create mode 100644 frontend/dashboard/__tests__/components/rule_builder_test.tsx
 create mode 100644 frontend/dashboard/__tests__/pages/data_control_overview_test.tsx

diff --git a/frontend/dashboard/__tests__/components/rule_builder_test.tsx b/frontend/dashboard/__tests__/components/rule_builder_test.tsx
new file mode 100644
index 000000000..a1c872b6a
--- /dev/null
+++ b/frontend/dashboard/__tests__/components/rule_builder_test.tsx
@@ -0,0 +1,1993 @@
+import RuleBuilder from '@/app/components/targeting/rule_builder'
+import { beforeEach, describe, expect, it } from '@jest/globals'
+import '@testing-library/jest-dom'
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+
+// Mock callbacks
+const onCancelMock = jest.fn()
+const onSaveMock = jest.fn()
+const onDeleteMock = jest.fn()
+
+Object.defineProperty(global, 'crypto', {
+    value: {
+        randomUUID: () => 'test-uuid-' + Math.random().toString(36).substring(7)
+    }
+})
+
+// Mock API calls
+jest.mock('@/app/api/api_calls', () => ({
+    __esModule: true,
+    CreateEventTargetingRuleApiStatus: {
+        Success: 'success',
+        Error: 'error'
+    },
+    UpdateEventTargetingRuleApiStatus: {
+        Success: 'success',
+        Error: 'error'
+    },
+    DeleteEventTargetingRuleApiStatus: {
+        Success: 'success',
+        Error: 'error'
+    },
+    CreateTraceTargetingRuleApiStatus: {
+        Success: 'success',
+        Error: 'error'
+    },
+    UpdateTraceTargetingRuleApiStatus: {
+        Success: 'success',
+        Error: 'error'
+    },
+    DeleteTraceTargetingRuleApiStatus: {
+        Success: 'success',
+        Error: 'error'
+    },
+    CreateSessionTargetingRuleApiStatus: {
+        Success: 'success',
+        Error: 'error'
+    },
+    UpdateSessionTargetingRuleApiStatus: {
+        Success: 'success',
+        Error: 'error'
+    },
+    DeleteSessionTargetingRuleApiStatus: {
+        Success: 'success',
+        Error: 'error'
+    },
+    fetchEventTargetingConfigFromServer: jest.fn(() =>
+        Promise.resolve({
+            data: {
+                events: [
+                    {
+                        type: 'click',
+                        attrs: [
+                            {
+                                key: 'target',
+                                type: 'string',
+                                suggestions: null,
+                                hint: 'The target element'
+                            }
+                        ],
+                        has_ud_attrs: true
+                    },
+                    {
+                        type: 'http',
+                        attrs: [
+                            {
+                                key: 'url',
+                                type: 'string',
+                                hint: 'Enter a HTTP URL',
+                                suggestions: null
+                            }
+                        ],
+                        has_ud_attrs: false
+                    }
+                ],
+                traces: [
+                    {
+                        name: 'api_call',
+                        attrs: [],
+                        has_ud_attrs: true
+                    }
+                ],
+                session_attrs: [
+                    {
+                        key: 'user_id',
+                        type: 'string',
+                        suggestions: null,
+                        hint: 'Enter a user ID'
+                    },
+                    {
+                        key: 'app_version',
+                        type: 'string',
+                        hint: "Enter your app's version",
+                        suggestions: ['0.0.1']
+                    }
+                ],
+                event_ud_attrs: [
+                    {
+                        key: 'custom_attr',
+                        type: 'string',
+                        suggestions: null,
+                        hint: ''
+                    },
+                    {
+                        key: 'is_premium',
+                        type: 'bool',
+                        hint: '',
+                        suggestions: null
+                    }
+                ],
+                trace_ud_attrs: [
+                    {
+                        key: 'endpoint',
+                        type: 'string',
+                        hint: '',
+                        suggestions: null
+                    }
+                ],
+                operator_types: {
+                    string: ['eq', 'neq', 'contains', 'startsWith'],
+                    int64: ['eq', 'neq', 'gt', 'lt', 'gte', 'lte'],
+                    float64: ['eq', 'neq', 'gt', 'lt', 'gte', 'lte'],
+                    bool: ['eq', 'neq']
+                }
+            }
+        })
+    ),
+    fetchSessionTargetingRuleFromServer: jest.fn(() =>
+        Promise.resolve({
+            data: {
+                id: 'session-rule-1',
+                team_id: 'team-1',
+                app_id: 'app-1',
+                name: 'Test Session Rule',
+                condition: '(event_type == "click")',
+                sampling_rate: 100,
+                created_at: '2025-11-18T05:50:03.474764Z',
+                created_by: 'test@example.com',
+                updated_at: null,
+                updated_by: '',
+                auto_created: false
+            }
+        })
+    ),
+    fetchTraceTargetingConfigFromServer: jest.fn(() =>
+        Promise.resolve({
+            data: {
+                traces: [
+                    {
+                        name: 'api_call',
+                        attrs: [],
+                        has_ud_attrs: true
+                    },
+                    {
+                        name: 'load-data',
+                        attrs: [],
+                        has_ud_attrs: true
+                    }
+                ],
+                session_attrs: [
+                    {
+                        key: 'user_id',
+                        type: 'string',
+                        suggestions: null,
+                        hint: 'Enter a user ID'
+                    }
+                ],
+                trace_ud_attrs: [
+                    {
+                        key: 'endpoint',
+                        type: 'string',
+                        hint: '',
+                        suggestions: null
+                    },
+                    {
+                        key: 'timeout_ms',
+                        type: 'int64',
+                        hint: '',
+                        suggestions: null
+                    }
+                ],
+                operator_types: {
+                    string: ['eq', 'neq', 'contains', 'startsWith'],
+                    int64: ['eq', 'neq', 'gt', 'lt', 'gte', 'lte'],
+                    float64: ['eq', 'neq', 'gt', 'lt', 'gte', 'lte'],
+                    bool: ['eq', 'neq']
+                }
+            }
+        })
+    ),
+    fetchTraceTargetingRuleFromServer: jest.fn(() =>
+        Promise.resolve({
+            data: {
+                id: 'trace-rule-1',
+                team_id: 'team-1',
+                app_id: 'app-1',
+                name: 'Test Trace Rule',
+                condition: '(span_name == "api_call")',
+                collection_mode: 'sampled',
+                sampling_rate: 50,
+                is_default_behaviour: false,
+                created_at: '2025-11-18T05:50:03.474764Z',
+                created_by: 'test@example.com',
+                updated_at: null,
+                updated_by: '',
+                auto_created: false
+            }
+        })
+    ),
+    fetchSessionTargetingConfigFromServer: jest.fn(() =>
+        Promise.resolve({
+            data: {
+                events: [
+                    {
+                        type: 'click',
+                        attrs: [
+                            {
+                                key: 'target',
+                                type: 'string',
+                                suggestions: null,
+                                hint: 'The target element'
+                            }
+                        ],
+                        has_ud_attrs: true
+                    }
+                ],
+                traces: [
+                    {
+                        name: 'api_call',
+                        attrs: [],
+                        has_ud_attrs: true
+                    }
+                ],
+                session_attrs: [
+                    {
+                        key: 'user_id',
+                        type: 'string',
+                        suggestions: null,
+                        hint: 'Enter a user ID'
+                    }
+                ],
+                operator_types: {
+                    string: ['eq', 'neq', 'contains', 'startsWith'],
+                    int64: ['eq', 'neq', 'gt', 'lt', 'gte', 'lte'],
+                    float64: ['eq', 'neq', 'gt', 'lt', 'gte', 'lte'],
+                    bool: ['eq', 'neq']
+                }
+            }
+        })
+    ),
+    fetchEventTargetingRuleFromServer: jest.fn(() =>
+        Promise.resolve({
+            data: {
+                id: 'rule-1',
+                team_id: 'team-1',
+                app_id: 'app-1',
+                name: 'Test Event Rule',
+                condition: '(event_type == "click")',
+                collection_mode: 'sampled',
+                sampling_rate: 100,
+                take_screenshot: false,
+                take_layout_snapshot: false,
+                is_default_behaviour: false,
+                created_at: '2025-11-18T05:50:03.474764Z',
+                created_by: 'test@example.com',
+                updated_at: null,
+                updated_by: '',
+                auto_created: false
+            }
+        })
+    ),
+    createEventTargetingRule: jest.fn(() =>
+        Promise.resolve({
+            status: 'success'
+        })
+    ),
+    updateEventTargetingRule: jest.fn(() =>
+        Promise.resolve({
+            status: 'success'
+        })
+    ),
+    deleteEventTargetingRule: jest.fn(() =>
+        Promise.resolve({
+            status: 'success'
+        })
+    ),
+    createTraceTargetingRule: jest.fn(() =>
+        Promise.resolve({
+            status: 'success'
+        })
+    ),
+    updateTraceTargetingRule: jest.fn(() =>
+        Promise.resolve({
+            status: 'success'
+        })
+    ),
+    deleteTraceTargetingRule: jest.fn(() =>
+        Promise.resolve({
+            status: 'success'
+        })
+    ),
+    createSessionTargetingRule: jest.fn(() =>
+        Promise.resolve({
+            status: 'success'
+        })
+    ),
+    updateSessionTargetingRule: jest.fn(() =>
+        Promise.resolve({
+            status: 'success'
+        })
+    ),
+    deleteSessionTargetingRule: jest.fn(() =>
+        Promise.resolve({
+            status: 'success'
+        })
+    ),
+}))
+
+// Mock toast
+jest.mock('@/app/utils/use_toast', () => ({
+    toastPositive: jest.fn(),
+    toastNegative: jest.fn(),
+}))
+
+// Mock components
+jest.mock('@/app/components/loading_spinner', () => ({
+    __esModule: true,
+    default: () => <div data-testid="loading-spinner">Loading...</div>
+}))
+
+jest.mock('@/app/components/dropdown_select', () => ({
+    __esModule: true,
+    default: (props: any) => (
+        <select
+            data-testid={`dropdown-${props.title}`}
+            value={props.initialSelected}
+            onChange={(e) => props.onChangeSelected(e.target.value)}
+        >
+            {props.items.map((item: string) => (
+                <option key={item} value={item}>{item}</option>
+            ))}
+        </select>
+    ),
+    DropdownSelectType: {
+        SingleString: 'single-string'
+    }
+}))
+
+jest.mock('@/app/components/targeting/sampling_rate_input', () => ({
+    __esModule: true,
+    default: (props: any) => (
+        <div data-testid="sampling-rate-input">
+            <input
+                type="number"
+                value={props.value}
+                onChange={(e) => props.onChange(Number(e.target.value))}
+                disabled={props.disabled}
+            />
+        </div>
+    )
+}))
+
+jest.mock('@/app/components/danger_confirmation_dialog', () => ({
+    __esModule: true,
+    default: (props: any) => {
+        if (!props.open) return null
+
+        return (
+            <div data-testid="danger-confirmation-dialog">
+                <p>{props.body}</p>
+                <button
+                    data-testid="dialog-affirmative"
+                    onClick={props.onAffirmativeAction}
+                >
+                    {props.affirmativeText}
+                </button>
+                <button
+                    data-testid="dialog-cancel"
+                    onClick={props.onCancelAction}
+                >
+                    {props.cancelText}
+                </button>
+            </div>
+        )
+    }
+}))
+
+jest.mock('@/app/components/targeting/attribute_builder', () => ({
+    __esModule: true,
+    default: (props: any) => (
+        <div data-testid={`attribute-builder-${props.attribute.id}`}>
+            <span>Attribute: {props.attribute.key}</span>
+            <button onClick={() => props.onDelete(props.attribute.id)}>Delete</button>
+        </div>
+    )
+}))
+
+jest.mock('@/app/components/targeting/trace_name_operator_input', () => ({
+    __esModule: true,
+    default: (props: any) => (
+        <div data-testid="trace-name-operator-input">
+            <input
+                type="text"
+                placeholder={props.placeholder}
+                value={props.value}
+                onChange={(e) => props.onValueChange(e.target.value)}
+            />
+            <select
+                value={props.operator}
+                onChange={(e) => props.onOperatorChange(e.target.value)}
+            >
+                {props.availableOperators.map((op: string) => (
+                    <option key={op} value={op}>{op}</option>
+                ))}
+            </select>
+        </div>
+    )
+}))
+
+describe('Basic Rendering', () => {
+    it('renders heading and save button for create mode', async () => {
+        await act(async () => {
+            render(
+                <RuleBuilder
+                    type="event"
+                    mode="create"
+                    appId="test-app-id"
+                    onCancel={onCancelMock}
+                    onSave={onSaveMock}
+                    onDelete={onDeleteMock}
+                />
+            )
+        })
+
+        await waitFor(() => {
+            expect(screen.getByText('When')).toBeInTheDocument()
+            expect(screen.getByText('Then')).toBeInTheDocument()
+            expect(screen.getByText('Rule Name')).toBeInTheDocument()
+        })
+
+        expect(screen.getByText('Create Event Rule')).toBeInTheDocument()
+        expect(screen.getByRole('button', { name: /Publish Rule/i })).toBeEnabled()
+    })
+
+    it('renders heading and save button for edit mode', async () => {
+        await act(async () => {
+            render(
+                <RuleBuilder
+                    type="event"
+                    mode="edit"
+                    appId="test-app-id"
+                    ruleId="rule-1"
+                    onCancel={onCancelMock}
+                    onSave={onSaveMock}
+                    onDelete={onDeleteMock}
+                />
+            )
+        })
+
+        await waitFor(() => {
+            expect(screen.getByText('When')).toBeInTheDocument()
+            expect(screen.getByText('Then')).toBeInTheDocument()
+        })
+
+        expect(screen.getByText('Edit Event Rule')).toBeInTheDocument()
+
+        const saveButton = screen.getByRole('button', { name: /Save Changes/i })
+        expect(saveButton).toBeInTheDocument()
+    })
+
+    it('shows loading spinner while fetching data', async () => {
+        render(
+            <RuleBuilder
+                type="event"
+                mode="create"
+                appId="test-app-id"
+                onCancel={onCancelMock}
+                onSave={onSaveMock}
+                onDelete={onDeleteMock}
+            />
+        )
+
+        // Check loading state immediately
+        expect(screen.getByTestId('loading-spinner')).toBeInTheDocument()
+        expect(screen.queryByText('When')).not.toBeInTheDocument()
+
+        // cleanup to avoid warnings
+        await waitFor(() => {
+            expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument()
+        })
+    })
+
+    it('shows error message when data fetch fails', async () => {
+        const { fetchEventTargetingConfigFromServer } = require('@/app/api/api_calls')
+        fetchEventTargetingConfigFromServer.mockImplementationOnce(() => Promise.resolve(null))
+
+        await act(async () => {
+            render(
+                <RuleBuilder
+                    type="event"
+                    mode="create"
+                    appId="test-app-id"
+                    onCancel={onCancelMock}
+                    onSave={onSaveMock}
+                    onDelete={onDeleteMock}
+                />
+            )
+        })
+
+        await waitFor(() => {
+            expect(screen.getByText(/Error loading rule/)).toBeInTheDocument()
+        })
+
+        expect(screen.getByText('Retry')).toBeInTheDocument()
+        expect(screen.getByText('Go Back')).toBeInTheDocument()
+        expect(screen.queryByText('When')).not.toBeInTheDocument()
+    })
+
+    describe('Event Rules', () => {
+        it('renders event type selector and "When" section for event rules', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            expect(screen.getByText('Event of type')).toBeInTheDocument()
+            expect(screen.getByText('occurs')).toBeInTheDocument()
+
+            const eventTypeDropdown = screen.getByTestId('dropdown-Select event type')
+            expect(eventTypeDropdown).toBeInTheDocument()
+            expect(eventTypeDropdown).toHaveValue('click')
+        })
+
+        it('displays loaded event rule data correctly in edit mode', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="edit"
+                        appId="test-app-id"
+                        ruleId="rule-1"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            const ruleNameInput = screen.getByPlaceholderText('Enter a rule name')
+            expect(ruleNameInput).toHaveValue('Test Event Rule')
+
+            const eventTypeDropdown = screen.getByTestId('dropdown-Select event type')
+            expect(eventTypeDropdown).toHaveValue('click')
+
+            // Check sampling rate is loaded
+            const samplingRateInput = screen.getByTestId('sampling-rate-input').querySelector('input')
+            expect(samplingRateInput).toHaveValue(100)
+        })
+
+        it('allows changing event type', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            const eventTypeDropdown = screen.getByTestId('dropdown-Select event type')
+            expect(eventTypeDropdown).toHaveValue('click')
+
+            await act(async () => {
+                fireEvent.change(eventTypeDropdown, { target: { value: 'http' } })
+            })
+
+            expect(eventTypeDropdown).toHaveValue('http')
+        })
+
+        it('adds new attribute when "Add Filter" is clicked', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            expect(screen.queryByTestId(/^attribute-builder-/)).not.toBeInTheDocument()
+
+            const addFilterButton = screen.getAllByText('Add Filter')[0]
+            await act(async () => {
+                fireEvent.click(addFilterButton)
+            })
+
+            expect(screen.getByTestId(/^attribute-builder-/)).toBeInTheDocument()
+        })
+
+        it('removes attribute when delete is clicked', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            // Add an attribute
+            const addFilterButton = screen.getAllByText('Add Filter')[0]
+            await act(async () => {
+                fireEvent.click(addFilterButton)
+            })
+
+            const attributeBuilder = screen.getByTestId(/^attribute-builder-/)
+            expect(attributeBuilder).toBeInTheDocument()
+
+            // Delete the attribute
+            const deleteButton = within(attributeBuilder).getByText('Delete')
+            await act(async () => {
+                fireEvent.click(deleteButton)
+            })
+
+            expect(screen.queryByTestId(/^attribute-builder-/)).not.toBeInTheDocument()
+        })
+
+        it('renders collection mode options with sampling rate', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('Then')).toBeInTheDocument()
+            })
+
+            // Check collection mode options
+            expect(screen.getByText('Collect with timeline only')).toBeInTheDocument()
+            expect(screen.getByText('Do not collect')).toBeInTheDocument()
+
+            // Check sampling rate input
+            expect(screen.getByTestId('sampling-rate-input')).toBeInTheDocument()
+        })
+
+        it('renders attachment options for event rules', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('Then')).toBeInTheDocument()
+            })
+
+            expect(screen.getByText('Take layout snapshot')).toBeInTheDocument()
+            expect(screen.getByText('Take screenshot')).toBeInTheDocument()
+            expect(screen.getByText('No attachments')).toBeInTheDocument()
+        })
+
+        it('disables attachment options when collection mode is disabled', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('Then')).toBeInTheDocument()
+            })
+
+            // Select "Do not collect" mode
+            const doNotCollectRadio = screen.getByLabelText('Do not collect')
+            await act(async () => {
+                fireEvent.click(doNotCollectRadio)
+            })
+
+            // Check that attachment radios are disabled
+            const layoutSnapshotRadio = screen.getByLabelText('Take layout snapshot')
+            const screenshotRadio = screen.getByLabelText('Take screenshot')
+
+            expect(layoutSnapshotRadio).toBeDisabled()
+            expect(screenshotRadio).toBeDisabled()
+        })
+    })
+
+    describe('Trace Rules', () => {
+        it('renders trace name input and operator selector for trace rules', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="trace"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            expect(screen.getByText('Trace with name')).toBeInTheDocument()
+            expect(screen.getByText('ends')).toBeInTheDocument()
+            expect(screen.getByTestId('trace-name-operator-input')).toBeInTheDocument()
+        })
+
+        it('displays loaded trace rule data correctly in edit mode', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="trace"
+                        mode="edit"
+                        appId="test-app-id"
+                        ruleId="trace-rule-1"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            const ruleNameInput = screen.getByPlaceholderText('Enter a rule name')
+            expect(ruleNameInput).toHaveValue('Test Trace Rule')
+
+            const traceNameInput = screen.getByTestId('trace-name-operator-input').querySelector('input')
+            expect(traceNameInput).toHaveValue('api_call')
+
+            // Check sampling rate is loaded
+            const samplingRateInput = screen.getByTestId('sampling-rate-input').querySelector('input')
+            expect(samplingRateInput).toHaveValue(50)
+        })
+
+        it('allows changing trace name and operator', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="trace"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            const traceOperatorInput = screen.getByTestId('trace-name-operator-input')
+            const nameInput = traceOperatorInput.querySelector('input[type="text"]')
+            const operatorSelect = traceOperatorInput.querySelector('select')
+
+            await act(async () => {
+                fireEvent.change(nameInput!, { target: { value: 'load-data' } })
+            })
+
+            expect(nameInput).toHaveValue('load-data')
+
+            await act(async () => {
+                fireEvent.change(operatorSelect!, { target: { value: 'contains' } })
+            })
+
+            expect(operatorSelect).toHaveValue('contains')
+        })
+
+        it('adds new trace attribute when "Add Filter" is clicked', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="trace"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            expect(screen.queryByTestId(/^attribute-builder-/)).not.toBeInTheDocument()
+
+            const addFilterButton = screen.getAllByText('Add Filter')[0]
+            await act(async () => {
+                fireEvent.click(addFilterButton)
+            })
+
+            expect(screen.getByTestId(/^attribute-builder-/)).toBeInTheDocument()
+        })
+
+        it('renders trace rule heading in create mode', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="trace"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            expect(screen.getByText('Create Trace Rule')).toBeInTheDocument()
+        })
+
+        it('renders trace rule heading in edit mode', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="trace"
+                        mode="edit"
+                        appId="test-app-id"
+                        ruleId="trace-rule-1"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            expect(screen.getByText('Edit Trace Rule')).toBeInTheDocument()
+        })
+    })
+
+    describe('Timeline Rules', () => {
+        it('renders condition type selector for timeline rules', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="timeline"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText(/When Session contains/)).toBeInTheDocument()
+            })
+
+            expect(screen.getByText('Create Session Timeline Rule')).toBeInTheDocument()
+            const conditionTypeDropdown = screen.getByTestId('dropdown-Select condition type')
+            expect(conditionTypeDropdown).toBeInTheDocument()
+        })
+
+        it('switches between event and trace conditions', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="timeline"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText(/When Session contains/)).toBeInTheDocument()
+            })
+
+            const conditionTypeDropdown = screen.getByTestId('dropdown-Select condition type')
+            expect(conditionTypeDropdown).toHaveValue('event')
+
+            // Should show event type dropdown
+            expect(screen.getByText('with type')).toBeInTheDocument()
+            expect(screen.getByTestId('dropdown-Select event type')).toBeInTheDocument()
+
+            // Switch to trace
+            await act(async () => {
+                fireEvent.change(conditionTypeDropdown, { target: { value: 'trace' } })
+            })
+
+            expect(conditionTypeDropdown).toHaveValue('trace')
+
+            // Should show trace name input
+            expect(screen.getByText('with name')).toBeInTheDocument()
+            expect(screen.getByTestId('trace-name-operator-input')).toBeInTheDocument()
+        })
+
+        it('displays event fields when condition type is event', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="timeline"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText(/When Session contains/)).toBeInTheDocument()
+            })
+
+            expect(screen.getByText('with type')).toBeInTheDocument()
+            expect(screen.getByTestId('dropdown-Select event type')).toBeInTheDocument()
+            expect(screen.queryByTestId('trace-name-operator-input')).not.toBeInTheDocument()
+        })
+
+        it('displays trace fields when condition type is trace', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="timeline"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText(/When Session contains/)).toBeInTheDocument()
+            })
+
+            const conditionTypeDropdown = screen.getByTestId('dropdown-Select condition type')
+
+            await act(async () => {
+                fireEvent.change(conditionTypeDropdown, { target: { value: 'trace' } })
+            })
+
+            expect(screen.getByText('with name')).toBeInTheDocument()
+            expect(screen.getByTestId('trace-name-operator-input')).toBeInTheDocument()
+            expect(screen.queryByTestId('dropdown-Select event type')).not.toBeInTheDocument()
+        })
+
+        it('renders sampling rate input as the only collection option', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="timeline"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('Then')).toBeInTheDocument()
+            })
+
+            // Should have sampling rate
+            expect(screen.getByTestId('sampling-rate-input')).toBeInTheDocument()
+
+            // Should NOT have collection mode options
+            expect(screen.queryByText('Collect with timeline only')).not.toBeInTheDocument()
+            expect(screen.queryByText('Do not collect')).not.toBeInTheDocument()
+        })
+
+        it('displays loaded timeline rule data correctly in edit mode', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="timeline"
+                        mode="edit"
+                        appId="test-app-id"
+                        ruleId="session-rule-1"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText(/When Session contains/)).toBeInTheDocument()
+            })
+
+            const ruleNameInput = screen.getByPlaceholderText('Enter a rule name')
+            expect(ruleNameInput).toHaveValue('Test Session Rule')
+
+            const conditionTypeDropdown = screen.getByTestId('dropdown-Select condition type')
+            expect(conditionTypeDropdown).toHaveValue('event')
+
+            const eventTypeDropdown = screen.getByTestId('dropdown-Select event type')
+            expect(eventTypeDropdown).toHaveValue('click')
+
+            const samplingRateInput = screen.getByTestId('sampling-rate-input').querySelector('input')
+            expect(samplingRateInput).toHaveValue(100)
+        })
+
+        it('renders timeline rule heading in edit mode', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="timeline"
+                        mode="edit"
+                        appId="test-app-id"
+                        ruleId="session-rule-1"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText(/When Session contains/)).toBeInTheDocument()
+            })
+
+            expect(screen.getByText('Edit Session Timeline Rule')).toBeInTheDocument()
+        })
+    })
+
+    describe('Save Rule', () => {
+        it('disables save button when no changes are made in edit mode', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="edit"
+                        appId="test-app-id"
+                        ruleId="rule-1"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            const saveButton = screen.getByRole('button', { name: /Save Changes/i })
+            expect(saveButton).toBeDisabled()
+        })
+
+        it('enables save button when changes are made in edit mode', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="edit"
+                        appId="test-app-id"
+                        ruleId="rule-1"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            const saveButton = screen.getByRole('button', { name: /Save Changes/i })
+            expect(saveButton).toBeDisabled()
+
+            // Make a change to the rule name
+            const ruleNameInput = screen.getByPlaceholderText('Enter a rule name')
+            await act(async () => {
+                fireEvent.change(ruleNameInput, { target: { value: 'Updated Rule Name' } })
+            })
+
+            expect(saveButton).toBeEnabled()
+        })
+
+        it('enables save button in create mode', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            const saveButton = screen.getByRole('button', { name: /Publish Rule/i })
+            expect(saveButton).toBeEnabled()
+        })
+
+        it('shows validation error when rule name is empty', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            const saveButton = screen.getByRole('button', { name: /Publish Rule/i })
+
+            await act(async () => {
+                fireEvent.click(saveButton)
+            })
+
+            const { toastNegative } = require('@/app/utils/use_toast')
+            expect(toastNegative).toHaveBeenCalledWith('Please enter a rule name')
+
+            // Check that the error styling is applied
+            const ruleNameInput = screen.getByPlaceholderText('Enter a rule name')
+            expect(ruleNameInput).toHaveClass('border-red-500')
+
+            expect(screen.getByText('Rule name is required')).toBeInTheDocument()
+        })
+
+        it('calls onSave callback after successful save in create mode', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            // Enter a rule name
+            const ruleNameInput = screen.getByPlaceholderText('Enter a rule name')
+            await act(async () => {
+                fireEvent.change(ruleNameInput, { target: { value: 'My New Rule' } })
+            })
+
+            const saveButton = screen.getByRole('button', { name: /Publish Rule/i })
+
+            await act(async () => {
+                fireEvent.click(saveButton)
+            })
+
+            await waitFor(() => {
+                expect(onSaveMock).toHaveBeenCalled()
+            })
+
+            const { toastPositive } = require('@/app/utils/use_toast')
+            expect(toastPositive).toHaveBeenCalledWith('Successfully created rule')
+        })
+
+        it('calls onSave callback after successful save in edit mode', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="edit"
+                        appId="test-app-id"
+                        ruleId="rule-1"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            // Make a change
+            const ruleNameInput = screen.getByPlaceholderText('Enter a rule name')
+            await act(async () => {
+                fireEvent.change(ruleNameInput, { target: { value: 'Updated Rule' } })
+            })
+
+            const saveButton = screen.getByRole('button', { name: /Save Changes/i })
+
+            await act(async () => {
+                fireEvent.click(saveButton)
+            })
+
+            await waitFor(() => {
+                expect(onSaveMock).toHaveBeenCalled()
+            })
+
+            const { toastPositive } = require('@/app/utils/use_toast')
+            expect(toastPositive).toHaveBeenCalledWith('Successfully updated rule')
+        })
+
+        it('shows error toast when save fails', async () => {
+            const { createEventTargetingRule } = require('@/app/api/api_calls')
+            createEventTargetingRule.mockImplementationOnce(() =>
+                Promise.resolve({ status: 'error' })
+            )
+
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            // Enter a rule name
+            const ruleNameInput = screen.getByPlaceholderText('Enter a rule name')
+            await act(async () => {
+                fireEvent.change(ruleNameInput, { target: { value: 'My New Rule' } })
+            })
+
+            const saveButton = screen.getByRole('button', { name: /Publish Rule/i })
+
+            await act(async () => {
+                fireEvent.click(saveButton)
+            })
+
+            await waitFor(() => {
+                const { toastNegative } = require('@/app/utils/use_toast')
+                expect(toastNegative).toHaveBeenCalledWith('Failed to save rule, please try again later')
+            })
+
+            expect(onSaveMock).not.toHaveBeenCalled()
+        })
+
+        it('shows loading state on save button while saving', async () => {
+            // Create a promise we can control
+            let resolveSave: any
+            const savePromise = new Promise(resolve => {
+                resolveSave = resolve
+            })
+
+            const { createEventTargetingRule } = require('@/app/api/api_calls')
+            createEventTargetingRule.mockImplementationOnce(() => savePromise)
+
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            // Enter a rule name
+            const ruleNameInput = screen.getByPlaceholderText('Enter a rule name')
+            await act(async () => {
+                fireEvent.change(ruleNameInput, { target: { value: 'My New Rule' } })
+            })
+
+            const saveButton = screen.getByRole('button', { name: /Publish Rule/i })
+            expect(saveButton).toBeEnabled()
+
+            await act(async () => {
+                fireEvent.click(saveButton)
+            })
+
+            // The button should be disabled while saving
+            await waitFor(() => {
+                expect(saveButton).toBeDisabled()
+            })
+
+            // Resolve the save
+            await act(async () => {
+                resolveSave({ status: 'success' })
+            })
+
+            await waitFor(() => {
+                expect(onSaveMock).toHaveBeenCalled()
+            })
+        })
+    })
+
+    describe('Delete Rule', () => {
+        it('shows delete button only in edit mode', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="edit"
+                        appId="test-app-id"
+                        ruleId="rule-1"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            expect(screen.getByRole('button', { name: /Delete Rule/i })).toBeInTheDocument()
+        })
+
+        it('does not show delete button in create mode', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            expect(screen.queryByRole('button', { name: /Delete Rule/i })).not.toBeInTheDocument()
+        })
+
+        it('opens confirmation dialog when delete button is clicked', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="edit"
+                        appId="test-app-id"
+                        ruleId="rule-1"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            expect(screen.queryByTestId('danger-confirmation-dialog')).not.toBeInTheDocument()
+
+            const deleteButton = screen.getByRole('button', { name: /Delete Rule/i })
+            await act(async () => {
+                fireEvent.click(deleteButton)
+            })
+
+            await waitFor(() => {
+                expect(screen.getByTestId('danger-confirmation-dialog')).toBeInTheDocument()
+            })
+
+            expect(screen.getByText(/Do you want to delete this rule/)).toBeInTheDocument()
+        })
+
+        it('closes confirmation dialog when cancel is clicked', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="edit"
+                        appId="test-app-id"
+                        ruleId="rule-1"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            const deleteButton = screen.getByRole('button', { name: /Delete Rule/i })
+            await act(async () => {
+                fireEvent.click(deleteButton)
+            })
+
+            await waitFor(() => {
+                expect(screen.getByTestId('danger-confirmation-dialog')).toBeInTheDocument()
+            })
+
+            const cancelButton = screen.getByTestId('dialog-cancel')
+            await act(async () => {
+                fireEvent.click(cancelButton)
+            })
+
+            await waitFor(() => {
+                expect(screen.queryByTestId('danger-confirmation-dialog')).not.toBeInTheDocument()
+            })
+        })
+
+        it('calls onDelete callback after successful deletion for event rules', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="edit"
+                        appId="test-app-id"
+                        ruleId="rule-1"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            const deleteButton = screen.getByRole('button', { name: /Delete Rule/i })
+            await act(async () => {
+                fireEvent.click(deleteButton)
+            })
+
+            await waitFor(() => {
+                expect(screen.getByTestId('danger-confirmation-dialog')).toBeInTheDocument()
+            })
+
+            const confirmButton = screen.getByTestId('dialog-affirmative')
+            await act(async () => {
+                fireEvent.click(confirmButton)
+            })
+
+            await waitFor(() => {
+                expect(onDeleteMock).toHaveBeenCalled()
+            })
+
+            const { toastPositive } = require('@/app/utils/use_toast')
+            expect(toastPositive).toHaveBeenCalledWith('Event rule deleted successfully')
+        })
+
+        it('calls onDelete callback after successful deletion for trace rules', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="trace"
+                        mode="edit"
+                        appId="test-app-id"
+                        ruleId="trace-rule-1"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            const deleteButton = screen.getByRole('button', { name: /Delete Rule/i })
+            await act(async () => {
+                fireEvent.click(deleteButton)
+            })
+
+            await waitFor(() => {
+                expect(screen.getByTestId('danger-confirmation-dialog')).toBeInTheDocument()
+            })
+
+            const confirmButton = screen.getByTestId('dialog-affirmative')
+            await act(async () => {
+                fireEvent.click(confirmButton)
+            })
+
+            await waitFor(() => {
+                expect(onDeleteMock).toHaveBeenCalled()
+            })
+
+            const { toastPositive } = require('@/app/utils/use_toast')
+            expect(toastPositive).toHaveBeenCalledWith('Trace rule deleted successfully')
+        })
+
+        it('calls onDelete callback after successful deletion for timeline rules', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="timeline"
+                        mode="edit"
+                        appId="test-app-id"
+                        ruleId="session-rule-1"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText(/When Session contains/)).toBeInTheDocument()
+            })
+
+            const deleteButton = screen.getByRole('button', { name: /Delete Rule/i })
+            await act(async () => {
+                fireEvent.click(deleteButton)
+            })
+
+            await waitFor(() => {
+                expect(screen.getByTestId('danger-confirmation-dialog')).toBeInTheDocument()
+            })
+
+            const confirmButton = screen.getByTestId('dialog-affirmative')
+            await act(async () => {
+                fireEvent.click(confirmButton)
+            })
+
+            await waitFor(() => {
+                expect(onDeleteMock).toHaveBeenCalled()
+            })
+
+            const { toastPositive } = require('@/app/utils/use_toast')
+            expect(toastPositive).toHaveBeenCalledWith('Session timeline rule deleted successfully')
+        })
+
+        it('shows error toast when deletion fails', async () => {
+            const { deleteEventTargetingRule } = require('@/app/api/api_calls')
+            deleteEventTargetingRule.mockImplementationOnce(() =>
+                Promise.resolve({ status: 'error' })
+            )
+
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="edit"
+                        appId="test-app-id"
+                        ruleId="rule-1"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            const deleteButton = screen.getByRole('button', { name: /Delete Rule/i })
+            await act(async () => {
+                fireEvent.click(deleteButton)
+            })
+
+            await waitFor(() => {
+                expect(screen.getByTestId('danger-confirmation-dialog')).toBeInTheDocument()
+            })
+
+            const confirmButton = screen.getByTestId('dialog-affirmative')
+            await act(async () => {
+                fireEvent.click(confirmButton)
+            })
+
+            await waitFor(() => {
+                const { toastNegative } = require('@/app/utils/use_toast')
+                expect(toastNegative).toHaveBeenCalledWith('Failed to delete event rule, please try again later')
+            })
+
+            expect(onDeleteMock).not.toHaveBeenCalled()
+        })
+    })
+
+    describe('Cancel Callback', () => {
+        it('calls onCancel callback when Go Back button is clicked in error state', async () => {
+            const { fetchEventTargetingConfigFromServer } = require('@/app/api/api_calls')
+            fetchEventTargetingConfigFromServer.mockImplementationOnce(() => Promise.resolve(null))
+
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText(/Error loading rule/)).toBeInTheDocument()
+            })
+
+            const goBackButton = screen.getByRole('button', { name: /Go Back/i })
+            await act(async () => {
+                fireEvent.click(goBackButton)
+            })
+
+            expect(onCancelMock).toHaveBeenCalled()
+        })
+
+        it('retries data fetch when Retry button is clicked in error state', async () => {
+            const { fetchEventTargetingConfigFromServer } = require('@/app/api/api_calls')
+            fetchEventTargetingConfigFromServer.mockImplementationOnce(() => Promise.resolve(null))
+
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText(/Error loading rule/)).toBeInTheDocument()
+            })
+
+            // Mock successful response for retry
+            fetchEventTargetingConfigFromServer.mockImplementationOnce(() =>
+                Promise.resolve({
+                    data: {
+                        events: [
+                            {
+                                type: 'click',
+                                attrs: [
+                                    {
+                                        key: 'target',
+                                        type: 'string',
+                                        suggestions: null,
+                                        hint: 'The target element'
+                                    }
+                                ],
+                                has_ud_attrs: true
+                            }
+                        ],
+                        session_attrs: [],
+                        event_ud_attrs: [],
+                        operator_types: {
+                            string: ['eq', 'neq'],
+                            int64: ['eq', 'neq'],
+                            float64: ['eq', 'neq'],
+                            bool: ['eq', 'neq']
+                        }
+                    }
+                })
+            )
+
+            const retryButton = screen.getByRole('button', { name: /Retry/i })
+            await act(async () => {
+                fireEvent.click(retryButton)
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            expect(screen.queryByText(/Error loading rule/)).not.toBeInTheDocument()
+        })
+    })
+
+    describe('Attribute Clearing on Type Changes', () => {
+        it('clears attributes when event type is changed', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="event"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            // Add an attribute
+            const addFilterButton = screen.getAllByText('Add Filter')[0]
+            await act(async () => {
+                fireEvent.click(addFilterButton)
+            })
+
+            expect(screen.getByTestId(/^attribute-builder-/)).toBeInTheDocument()
+
+            // Change event type
+            const eventTypeDropdown = screen.getByTestId('dropdown-Select event type')
+            await act(async () => {
+                fireEvent.change(eventTypeDropdown, { target: { value: 'http' } })
+            })
+
+            // Verify attributes are cleared
+            expect(screen.queryByTestId(/^attribute-builder-/)).not.toBeInTheDocument()
+        })
+
+        it('preserves attributes when trace name or operator is changed', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="trace"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText('When')).toBeInTheDocument()
+            })
+
+            // Add an attribute
+            const addFilterButton = screen.getAllByText('Add Filter')[0]
+            await act(async () => {
+                fireEvent.click(addFilterButton)
+            })
+
+            expect(screen.getByTestId(/^attribute-builder-/)).toBeInTheDocument()
+
+            // Change trace name
+            const traceOperatorInput = screen.getByTestId('trace-name-operator-input')
+            const nameInput = traceOperatorInput.querySelector('input[type="text"]')
+
+            await act(async () => {
+                fireEvent.change(nameInput!, { target: { value: 'load-data' } })
+            })
+
+            // Verify attributes are NOT cleared (trace rules preserve attributes)
+            expect(screen.getByTestId(/^attribute-builder-/)).toBeInTheDocument()
+
+            // Change operator
+            const operatorSelect = traceOperatorInput.querySelector('select')
+            await act(async () => {
+                fireEvent.change(operatorSelect!, { target: { value: 'contains' } })
+            })
+
+            // Verify attributes are still preserved
+            expect(screen.getByTestId(/^attribute-builder-/)).toBeInTheDocument()
+        })
+
+        it('clears attributes when session timeline event type is changed', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="timeline"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText(/When Session contains/)).toBeInTheDocument()
+            })
+
+            // Verify we're in event mode
+            const conditionTypeDropdown = screen.getByTestId('dropdown-Select condition type')
+            expect(conditionTypeDropdown).toHaveValue('event')
+
+            // Add an attribute
+            const addFilterButton = screen.getAllByText('Add Filter')[0]
+            await act(async () => {
+                fireEvent.click(addFilterButton)
+            })
+
+            expect(screen.getByTestId(/^attribute-builder-/)).toBeInTheDocument()
+
+            // Change event type
+            const eventTypeDropdown = screen.getByTestId('dropdown-Select event type')
+            await act(async () => {
+                fireEvent.change(eventTypeDropdown, { target: { value: 'http' } })
+            })
+
+            // Verify attributes are cleared
+            expect(screen.queryByTestId(/^attribute-builder-/)).not.toBeInTheDocument()
+        })
+
+        it('clears attributes when session timeline switches from event to trace condition', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="timeline"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText(/When Session contains/)).toBeInTheDocument()
+            })
+
+            // Start with event condition
+            const conditionTypeDropdown = screen.getByTestId('dropdown-Select condition type')
+            expect(conditionTypeDropdown).toHaveValue('event')
+
+            // Add an attribute
+            const addFilterButton = screen.getAllByText('Add Filter')[0]
+            await act(async () => {
+                fireEvent.click(addFilterButton)
+            })
+
+            expect(screen.getByTestId(/^attribute-builder-/)).toBeInTheDocument()
+
+            // Switch to trace condition
+            await act(async () => {
+                fireEvent.change(conditionTypeDropdown, { target: { value: 'trace' } })
+            })
+
+            // Verify attributes are cleared
+            expect(screen.queryByTestId(/^attribute-builder-/)).not.toBeInTheDocument()
+
+            // Verify we're now showing trace inputs
+            expect(screen.getByTestId('trace-name-operator-input')).toBeInTheDocument()
+        })
+
+        it('clears attributes when session timeline switches from trace to event condition', async () => {
+            await act(async () => {
+                render(
+                    <RuleBuilder
+                        type="timeline"
+                        mode="create"
+                        appId="test-app-id"
+                        onCancel={onCancelMock}
+                        onSave={onSaveMock}
+                        onDelete={onDeleteMock}
+                    />
+                )
+            })
+
+            await waitFor(() => {
+                expect(screen.getByText(/When Session contains/)).toBeInTheDocument()
+            })
+
+            const conditionTypeDropdown = screen.getByTestId('dropdown-Select condition type')
+
+            // Switch to trace condition first
+            await act(async () => {
+                fireEvent.change(conditionTypeDropdown, { target: { value: 'trace' } })
+            })
+
+            expect(conditionTypeDropdown).toHaveValue('trace')
+
+            // Add an attribute
+            const addFilterButton = screen.getAllByText('Add Filter')[0]
+            await act(async () => {
+                fireEvent.click(addFilterButton)
+            })
+
+            expect(screen.getByTestId(/^attribute-builder-/)).toBeInTheDocument()
+
+            // Switch back to event condition
+            await act(async () => {
+                fireEvent.change(conditionTypeDropdown, { target: { value: 'event' } })
+            })
+
+            // Verify attributes are cleared
+            expect(screen.queryByTestId(/^attribute-builder-/)).not.toBeInTheDocument()
+
+            // Verify we're now showing event inputs
+            expect(screen.getByTestId('dropdown-Select event type')).toBeInTheDocument()
+        })
+    })
+})
\ No newline at end of file
diff --git a/frontend/dashboard/__tests__/pages/data_control_overview_test.tsx b/frontend/dashboard/__tests__/pages/data_control_overview_test.tsx
new file mode 100644
index 000000000..80a3a5761
--- /dev/null
+++ b/frontend/dashboard/__tests__/pages/data_control_overview_test.tsx
@@ -0,0 +1,324 @@
+import DataControlOverview from '@/app/[teamId]/data/page'
+import { beforeEach, describe, expect, it } from '@jest/globals'
+import '@testing-library/jest-dom'
+import { act, fireEvent, render, screen, within } from '@testing-library/react'
+
+const replaceMock = jest.fn()
+const pushMock = jest.fn()
+
+jest.mock('next/navigation', () => ({
+    useRouter: () => ({
+        replace: replaceMock,
+        push: pushMock,
+    }),
+    useSearchParams: () => new URLSearchParams(),
+}))
+
+// Mock API calls with valid data
+jest.mock('@/app/api/api_calls', () => ({
+    __esModule: true,
+    EventTargetingApiStatus: {
+        Loading: 'loading',
+        Error: 'error',
+        Success: 'success',
+        NoData: 'no_data'
+    },
+    TraceTargetingApiStatus: {
+        Loading: 'loading',
+        Error: 'error',
+        Success: 'success',
+        NoData: 'no_data'
+    },
+    fetchEventTargetingRulesFromServer: jest.fn(() =>
+        Promise.resolve({
+            status: 'success',
+            data: {
+                default_rule: {
+                    id: 'default-event-1',
+                    collection_mode: 'sampled',
+                    sampling_rate: 100,
+                    condition: 'default',
+                    take_screenshot: false,
+                    take_layout_snapshot: false
+                },
+                rules: [
+                    {
+                        id: 'event-rule-1',
+                        name: 'High Priority Events',
+                        collection_mode: 'sampled',
+                        sampling_rate: 100,
+                        condition: 'priority > 8',
+                        take_screenshot: true,
+                        take_layout_snapshot: false
+                    }
+                ]
+            }
+        })
+    ),
+    fetchTraceTargetingRulesFromServer: jest.fn(() =>
+        Promise.resolve({
+            status: 'success',
+            data: {
+                default_rule: {
+                    id: 'default-trace-1',
+                    collection_mode: 'timeline',
+                    sampling_rate: 0,
+                    condition: 'default'
+                },
+                rules: [
+                    {
+                        id: 'trace-rule-1',
+                        name: 'Slow Traces',
+                        collection_mode: 'sampled',
+                        sampling_rate: 50,
+                        condition: 'duration > 1000'
+                    }
+                ]
+            }
+        })
+    ),
+    fetchSessionTargetingRulesFromServer: jest.fn(() =>
+        Promise.resolve({
+            status: 'success',
+            data: {
+                results: [
+                    {
+                        id: 'session-rule-1',
+                        name: 'Premium Users',
+                        condition: 'user.tier == "premium"'
+                    }
+                ]
+            }
+        })
+    ),
+    FilterSource: { Events: 'events' },
+}))
+
+jest.mock('@/app/components/filters', () => ({
+    __esModule: true,
+    default: (props: any) => (
+        <div data-testid="filters-mock">
+            <button
+                data-testid="update-filters"
+                onClick={() =>
+                    props.onFiltersChanged({
+                        ready: true,
+                        serialisedFilters: 'app=test-app',
+                        app: { id: 'test-app-id', name: 'Test App' }
+                    })
+                }
+            >
+                Update Filters
+            </button>
+        </div>
+    ),
+    AppVersionsInitialSelectionType: { All: 'all' },
+    defaultFilters: { ready: false, serialisedFilters: '', app: null },
+}))
+
+jest.mock('@/app/components/targeting/rules_table', () => ({
+    __esModule: true,
+    default: (props: any) => (
+        <div data-testid={`rules-table-${props.tableType}`}>
+            {props.rules.map((rule: any) => (
+                <button
+                    key={rule.id}
+                    data-testid={`rule-${rule.id}`}
+                    onClick={() => props.onRuleClick(rule)}
+                >
+                    {rule.name}
+                </button>
+            ))}
+        </div>
+    ),
+}))
+
+jest.mock('@/app/components/targeting/edit_default_rule_dialog', () => ({
+    __esModule: true,
+    default: (props: any) => (
+        props.isOpen ? (
+            <div data-testid="edit-default-rule-dialog">
+                <span data-testid="dialog-rule-type">{props.ruleType}</span>
+                <button data-testid="dialog-close" onClick={props.onClose}>Close</button>
+                <button
+                    data-testid="dialog-success"
+                    onClick={() => props.onSuccess('sampled', 75)}
+                >
+                    Save
+                </button>
+                <button
+                    data-testid="dialog-error"
+                    onClick={() => props.onError('Test error')}
+                >
+                    Trigger Error
+                </button>
+            </div>
+        ) : null
+    ),
+}))
+
+jest.mock('@/app/utils/use_toast', () => ({
+    toastPositive: jest.fn(),
+    toastNegative: jest.fn(),
+}))
+
+describe('DataControlOverview Component', () => {
+    beforeEach(() => {
+        replaceMock.mockClear()
+        pushMock.mockClear()
+    })
+
+    it('renders the Data Control heading and Filters component', () => {
+        render(<DataControlOverview params={{ teamId: '123' }} />)
+        expect(screen.getByText('Data Control')).toBeInTheDocument()
+        expect(screen.getByTestId('filters-mock')).toBeInTheDocument()
+    })
+
+    it('does not render main UI when filters are not ready', () => {
+        render(<DataControlOverview params={{ teamId: '123' }} />)
+        expect(screen.queryByText('Event Rules')).not.toBeInTheDocument()
+        expect(screen.queryByText('Trace Rules')).not.toBeInTheDocument()
+    })
+
+    it('renders all rule sections and updates URL when filters become ready', async () => {
+        render(<DataControlOverview params={{ teamId: '123' }} />)
+        const updateButton = screen.getByTestId('update-filters')
+
+        await act(async () => {
+            fireEvent.click(updateButton)
+        })
+
+        expect(replaceMock).toHaveBeenCalledWith('?app=test-app', { scroll: false })
+        expect(await screen.findByText('Event Rules')).toBeInTheDocument()
+        expect(screen.getByText('Trace Rules')).toBeInTheDocument()
+        expect(screen.getByText('Session Timeline Rules')).toBeInTheDocument()
+    })
+
+    it('displays default rules and override rules correctly', async () => {
+        render(<DataControlOverview params={{ teamId: '123' }} />)
+
+        await act(async () => {
+            fireEvent.click(screen.getByTestId('update-filters'))
+        })
+
+        // Check default rule displays
+        expect(await screen.findByText(/Collect all events at 100% sample rate/)).toBeInTheDocument()
+        expect(screen.getByText(/Collect traces with session timeline only/)).toBeInTheDocument()
+
+        // Check override rules are rendered
+        expect(screen.getByTestId('rules-table-event')).toBeInTheDocument()
+        expect(screen.getByText('High Priority Events')).toBeInTheDocument()
+        expect(screen.getByTestId('rules-table-trace')).toBeInTheDocument()
+        expect(screen.getByText('Slow Traces')).toBeInTheDocument()
+        expect(screen.getByTestId('rules-table-session')).toBeInTheDocument()
+        expect(screen.getByText('Premium Users')).toBeInTheDocument()
+    })
+
+    it('shows error message when API returns error status', async () => {
+        const { fetchEventTargetingRulesFromServer } = require('@/app/api/api_calls')
+        fetchEventTargetingRulesFromServer.mockImplementationOnce(() =>
+            Promise.resolve({ status: 'error' })
+        )
+
+        render(<DataControlOverview params={{ teamId: '123' }} />)
+
+        await act(async () => {
+            fireEvent.click(screen.getByTestId('update-filters'))
+        })
+
+        expect(await screen.findByText(/Error loading rules/)).toBeInTheDocument()
+    })
+
+    it('navigates to edit page when rule is clicked', async () => {
+        render(<DataControlOverview params={{ teamId: '123' }} />)
+
+        await act(async () => {
+            fireEvent.click(screen.getByTestId('update-filters'))
+        })
+
+        const ruleButton = await screen.findByTestId('rule-event-rule-1')
+        await act(async () => {
+            fireEvent.click(ruleButton)
+        })
+
+        expect(pushMock).toHaveBeenCalledWith('/123/data/test-app-id/event/event-rule-1/edit')
+    })
+
+    it('opens and closes default rule edit dialog for events', async () => {
+        render(<DataControlOverview params={{ teamId: '123' }} />)
+
+        await act(async () => {
+            fireEvent.click(screen.getByTestId('update-filters'))
+        })
+
+        // Wait for content to load
+        await screen.findByText('Event Rules')
+
+        // Get all buttons and find the ones with pencil icons
+        const allButtons = screen.getAllByRole('button')
+        const eventEditButton = allButtons.find(btn =>
+            btn.querySelector('.lucide-pencil') !== null
+        )
+
+        expect(eventEditButton).toBeDefined()
+
+        await act(async () => {
+            fireEvent.click(eventEditButton!)
+        })
+
+        expect(screen.getByTestId('edit-default-rule-dialog')).toBeInTheDocument()
+        expect(screen.getByTestId('dialog-rule-type')).toHaveTextContent('event')
+
+        await act(async () => {
+            fireEvent.click(screen.getByTestId('dialog-close'))
+        })
+
+        expect(screen.queryByTestId('edit-default-rule-dialog')).not.toBeInTheDocument()
+    })
+
+    it('updates rule and shows success toast on successful save', async () => {
+        const { toastPositive } = require('@/app/utils/use_toast')
+
+        render(<DataControlOverview params={{ teamId: '123' }} />)
+
+        await act(async () => {
+            fireEvent.click(screen.getByTestId('update-filters'))
+        })
+
+        // Open dialog
+        const editButtons = screen.getAllByRole('button')
+        const eventEditButton = editButtons.find(btn =>
+            btn.querySelector('.lucide-pencil')
+        )
+
+        await act(async () => {
+            fireEvent.click(eventEditButton!)
+        })
+
+        // Trigger success
+        await act(async () => {
+            fireEvent.click(screen.getByTestId('dialog-success'))
+        })
+
+        expect(toastPositive).toHaveBeenCalledWith('Rule updated successfully')
+    })
+
+    it('disables Create Rule button when rules are still loading', () => {
+        render(<DataControlOverview params={{ teamId: '123' }} />)
+
+        const createButton = screen.getByText('Create Rule')
+        expect(createButton).toBeDisabled()
+    })
+
+    it('enables Create Rule button and shows dropdown when rules load successfully', async () => {
+        render(<DataControlOverview params={{ teamId: '123' }} />)
+
+        await act(async () => {
+            fireEvent.click(screen.getByTestId('update-filters'))
+        })
+
+        const createButton = await screen.findByText('Create Rule')
+        expect(createButton).not.toBeDisabled()
+    })
+    
+})
\ No newline at end of file
diff --git a/frontend/dashboard/app/[teamId]/data/page.tsx b/frontend/dashboard/app/[teamId]/data/page.tsx
index 82c3e1bde..3dd901dcc 100644
--- a/frontend/dashboard/app/[teamId]/data/page.tsx
+++ b/frontend/dashboard/app/[teamId]/data/page.tsx
@@ -31,7 +31,7 @@ const initialState: PageState = {
     editingDefaultRuleType: null,
 }
 
-export default function DataFilters({ params }: { params: { teamId: string } }) {
+export default function DataControlOverview({ params }: { params: { teamId: string } }) {
     const router = useRouter()
     const [pageState, setPageState] = useState<PageState>(initialState)
 

From be85aa62c354a41b21b170a0206c3ade11d748c8 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 19 Nov 2025 10:30:39 +0530
Subject: [PATCH 87/98] feat(frontend): add tests for attribute builder

---
 .../components/attribute_builder_test.tsx     | 464 ++++++++++++++++++
 1 file changed, 464 insertions(+)
 create mode 100644 frontend/dashboard/__tests__/components/attribute_builder_test.tsx

diff --git a/frontend/dashboard/__tests__/components/attribute_builder_test.tsx b/frontend/dashboard/__tests__/components/attribute_builder_test.tsx
new file mode 100644
index 000000000..2595b9921
--- /dev/null
+++ b/frontend/dashboard/__tests__/components/attribute_builder_test.tsx
@@ -0,0 +1,464 @@
+import AttributeBuilder from '@/app/components/targeting/attribute_builder'
+import { beforeEach, describe, expect, it } from '@jest/globals'
+import '@testing-library/jest-dom'
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import { AttributeField } from '@/app/utils/cel/conditions'
+
+// Mock callbacks
+const onUpdateKeyMock = jest.fn()
+const onUpdateValueMock = jest.fn()
+const onUpdateOperatorMock = jest.fn()
+const onDeleteMock = jest.fn()
+
+// Mock DropdownSelect component
+jest.mock('@/app/components/dropdown_select', () => ({
+    __esModule: true,
+    default: (props: any) => (
+        <select
+            data-testid={`dropdown-${props.title}`}
+            value={props.initialSelected}
+            onChange={(e) => props.onChangeSelected(e.target.value)}
+        >
+            {props.items.map((item: string) => (
+                <option key={item} value={item}>{item}</option>
+            ))}
+        </select>
+    ),
+    DropdownSelectType: {
+        SingleString: 'single-string'
+    }
+}))
+
+// Mock AutocompleteInput component
+jest.mock('@/app/components/autocomplete_input', () => ({
+    __esModule: true,
+    default: (props: any) => (
+        <input
+            data-testid="autocomplete-input"
+            type="text"
+            value={props.value}
+            placeholder={props.placeholder}
+            onChange={(e) => props.onValueChange(e.target.value)}
+            className={props.className}
+        />
+    )
+}))
+
+describe('AttributeBuilder Component', () => {
+    beforeEach(() => {
+        onUpdateKeyMock.mockClear()
+        onUpdateValueMock.mockClear()
+        onUpdateOperatorMock.mockClear()
+        onDeleteMock.mockClear()
+    })
+
+    const defaultStringAttribute: AttributeField = {
+        id: 'attr-1',
+        key: 'user_id',
+        type: 'string',
+        value: 'test-value',
+        operator: 'eq',
+        source: 'session',
+        suggestions: ['user-1', 'user-2'],
+        hint: 'Enter a user ID'
+    }
+
+    const defaultAttributeKeys = {
+        'user_id': 'session',
+        'app_version': 'session',
+        'device_locale': 'session'
+    }
+
+    const defaultOperators = ['eq', 'neq', 'contains']
+
+    it('renders with initial string attribute values', () => {
+        render(
+            <AttributeBuilder
+                attribute={defaultStringAttribute}
+                attributeKeys={defaultAttributeKeys}
+                operators={defaultOperators}
+                onUpdateKey={onUpdateKeyMock}
+                onUpdateValue={onUpdateValueMock}
+                onUpdateOperator={onUpdateOperatorMock}
+                onDelete={onDeleteMock}
+                allowDelete={true}
+                suggestions={defaultStringAttribute.suggestions}
+            />
+        )
+
+        expect(screen.getByText('and')).toBeInTheDocument()
+        expect(screen.getByRole('button', { name: /user_id/i })).toBeInTheDocument()
+        expect(screen.getByTestId('dropdown-Condition')).toHaveValue('eq')
+        expect(screen.getByTestId('autocomplete-input')).toHaveValue('test-value')
+    })
+
+    it('opens attribute key dropdown and shows all available keys', async () => {
+        render(
+            <AttributeBuilder
+                attribute={defaultStringAttribute}
+                attributeKeys={defaultAttributeKeys}
+                operators={defaultOperators}
+                onUpdateKey={onUpdateKeyMock}
+                onUpdateValue={onUpdateValueMock}
+                onUpdateOperator={onUpdateOperatorMock}
+                onDelete={onDeleteMock}
+                allowDelete={true}
+            />
+        )
+
+        const keyButton = screen.getByRole('button', { name: /user_id/i })
+        await act(async () => {
+            fireEvent.click(keyButton)
+        })
+
+        await waitFor(() => {
+            expect(screen.getByText('app_version')).toBeInTheDocument()
+        })
+
+        expect(screen.getByText('device_locale')).toBeInTheDocument()
+    })
+
+    it('changes attribute key when selecting from dropdown', async () => {
+        render(
+            <AttributeBuilder
+                attribute={defaultStringAttribute}
+                attributeKeys={defaultAttributeKeys}
+                operators={defaultOperators}
+                onUpdateKey={onUpdateKeyMock}
+                onUpdateValue={onUpdateValueMock}
+                onUpdateOperator={onUpdateOperatorMock}
+                onDelete={onDeleteMock}
+                allowDelete={true}
+            />
+        )
+
+        const keyButton = screen.getByRole('button', { name: /user_id/i })
+        await act(async () => {
+            fireEvent.click(keyButton)
+        })
+
+        await waitFor(() => {
+            expect(screen.getByText('app_version')).toBeInTheDocument()
+        })
+
+        const appVersionOption = screen.getByText('app_version')
+        await act(async () => {
+            fireEvent.click(appVersionOption)
+        })
+
+        expect(onUpdateKeyMock).toHaveBeenCalledWith('attr-1', 'app_version', 'session')
+    })
+
+    it('searches for attribute keys in dropdown', async () => {
+        render(
+            <AttributeBuilder
+                attribute={defaultStringAttribute}
+                attributeKeys={defaultAttributeKeys}
+                operators={defaultOperators}
+                onUpdateKey={onUpdateKeyMock}
+                onUpdateValue={onUpdateValueMock}
+                onUpdateOperator={onUpdateOperatorMock}
+                onDelete={onDeleteMock}
+                allowDelete={true}
+            />
+        )
+
+        const keyButton = screen.getByRole('button', { name: /user_id/i })
+        await act(async () => {
+            fireEvent.click(keyButton)
+        })
+
+        await waitFor(() => {
+            expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument()
+        })
+
+        const searchInput = screen.getByPlaceholderText('Search...')
+        await act(async () => {
+            fireEvent.change(searchInput, { target: { value: 'device' } })
+        })
+
+        await waitFor(() => {
+            expect(screen.getByText('device_locale')).toBeInTheDocument()
+        })
+
+        expect(screen.queryByText('app_version')).not.toBeInTheDocument()
+    })
+
+    it('changes operator value', async () => {
+        render(
+            <AttributeBuilder
+                attribute={defaultStringAttribute}
+                attributeKeys={defaultAttributeKeys}
+                operators={defaultOperators}
+                onUpdateKey={onUpdateKeyMock}
+                onUpdateValue={onUpdateValueMock}
+                onUpdateOperator={onUpdateOperatorMock}
+                onDelete={onDeleteMock}
+                allowDelete={true}
+            />
+        )
+
+        const operatorDropdown = screen.getByTestId('dropdown-Condition')
+        await act(async () => {
+            fireEvent.change(operatorDropdown, { target: { value: 'contains' } })
+        })
+
+        expect(onUpdateOperatorMock).toHaveBeenCalledWith('attr-1', 'contains')
+    })
+
+    it('changes string value', async () => {
+        render(
+            <AttributeBuilder
+                attribute={defaultStringAttribute}
+                attributeKeys={defaultAttributeKeys}
+                operators={defaultOperators}
+                onUpdateKey={onUpdateKeyMock}
+                onUpdateValue={onUpdateValueMock}
+                onUpdateOperator={onUpdateOperatorMock}
+                onDelete={onDeleteMock}
+                allowDelete={true}
+            />
+        )
+
+        const valueInput = screen.getByTestId('autocomplete-input')
+        await act(async () => {
+            fireEvent.change(valueInput, { target: { value: 'new-value' } })
+        })
+
+        expect(onUpdateValueMock).toHaveBeenCalledWith('attr-1', 'new-value')
+    })
+
+    it('handles integer attribute type', async () => {
+        const intAttribute: AttributeField = {
+            id: 'attr-2',
+            key: 'count',
+            type: 'int64',
+            value: 10,
+            operator: 'gt',
+            source: 'ud'
+        }
+
+        render(
+            <AttributeBuilder
+                attribute={intAttribute}
+                attributeKeys={defaultAttributeKeys}
+                operators={['eq', 'neq', 'gt', 'lt']}
+                onUpdateKey={onUpdateKeyMock}
+                onUpdateValue={onUpdateValueMock}
+                onUpdateOperator={onUpdateOperatorMock}
+                onDelete={onDeleteMock}
+                allowDelete={true}
+            />
+        )
+
+        const valueInput = screen.getByTestId('autocomplete-input')
+        expect(valueInput).toHaveValue('10')
+
+        await act(async () => {
+            fireEvent.change(valueInput, { target: { value: '25' } })
+        })
+
+        expect(onUpdateValueMock).toHaveBeenCalledWith('attr-2', 25)
+    })
+
+    it('handles float attribute type', async () => {
+        const floatAttribute: AttributeField = {
+            id: 'attr-3',
+            key: 'price',
+            type: 'float64',
+            value: 19.99,
+            operator: 'gte',
+            source: 'ud'
+        }
+
+        render(
+            <AttributeBuilder
+                attribute={floatAttribute}
+                attributeKeys={defaultAttributeKeys}
+                operators={['eq', 'neq', 'gt', 'lt', 'gte', 'lte']}
+                onUpdateKey={onUpdateKeyMock}
+                onUpdateValue={onUpdateValueMock}
+                onUpdateOperator={onUpdateOperatorMock}
+                onDelete={onDeleteMock}
+                allowDelete={true}
+            />
+        )
+
+        const valueInput = screen.getByTestId('autocomplete-input')
+        expect(valueInput).toHaveValue('19.99')
+
+        await act(async () => {
+            fireEvent.change(valueInput, { target: { value: '29.99' } })
+        })
+
+        expect(onUpdateValueMock).toHaveBeenCalledWith('attr-3', 29.99)
+    })
+
+    it('handles boolean attribute type with dropdown', async () => {
+        const boolAttribute: AttributeField = {
+            id: 'attr-4',
+            key: 'is_premium',
+            type: 'bool',
+            value: true,
+            operator: 'eq',
+            source: 'ud'
+        }
+
+        render(
+            <AttributeBuilder
+                attribute={boolAttribute}
+                attributeKeys={defaultAttributeKeys}
+                operators={['eq', 'neq']}
+                onUpdateKey={onUpdateKeyMock}
+                onUpdateValue={onUpdateValueMock}
+                onUpdateOperator={onUpdateOperatorMock}
+                onDelete={onDeleteMock}
+                allowDelete={true}
+            />
+        )
+
+        const boolDropdown = screen.getByTestId('dropdown-Value')
+        expect(boolDropdown).toHaveValue('true')
+
+        await act(async () => {
+            fireEvent.change(boolDropdown, { target: { value: 'false' } })
+        })
+
+        expect(onUpdateValueMock).toHaveBeenCalledWith('attr-4', false)
+    })
+
+    it('shows delete button when allowDelete is true', () => {
+        render(
+            <AttributeBuilder
+                attribute={defaultStringAttribute}
+                attributeKeys={defaultAttributeKeys}
+                operators={defaultOperators}
+                onUpdateKey={onUpdateKeyMock}
+                onUpdateValue={onUpdateValueMock}
+                onUpdateOperator={onUpdateOperatorMock}
+                onDelete={onDeleteMock}
+                allowDelete={true}
+            />
+        )
+
+        const deleteButton = screen.getByRole('button', { name: '' })
+        expect(deleteButton).toBeInTheDocument()
+    })
+
+    it('hides delete button when allowDelete is false', () => {
+        render(
+            <AttributeBuilder
+                attribute={defaultStringAttribute}
+                attributeKeys={defaultAttributeKeys}
+                operators={defaultOperators}
+                onUpdateKey={onUpdateKeyMock}
+                onUpdateValue={onUpdateValueMock}
+                onUpdateOperator={onUpdateOperatorMock}
+                allowDelete={false}
+            />
+        )
+
+        // Should not find delete button with X icon
+        const buttons = screen.getAllByRole('button')
+        const deleteButton = buttons.find(btn => btn.querySelector('.lucide-x'))
+        expect(deleteButton).toBeUndefined()
+    })
+
+    it('calls onDelete when delete button is clicked', async () => {
+        render(
+            <AttributeBuilder
+                attribute={defaultStringAttribute}
+                attributeKeys={defaultAttributeKeys}
+                operators={defaultOperators}
+                onUpdateKey={onUpdateKeyMock}
+                onUpdateValue={onUpdateValueMock}
+                onUpdateOperator={onUpdateOperatorMock}
+                onDelete={onDeleteMock}
+                allowDelete={true}
+            />
+        )
+
+        const buttons = screen.getAllByRole('button')
+        const deleteButton = buttons.find(btn => btn.querySelector('.lucide-x'))
+
+        await act(async () => {
+            fireEvent.click(deleteButton!)
+        })
+
+        expect(onDeleteMock).toHaveBeenCalledWith('attr-1')
+    })
+
+    it('displays hint as placeholder when provided', () => {
+        render(
+            <AttributeBuilder
+                attribute={defaultStringAttribute}
+                attributeKeys={defaultAttributeKeys}
+                operators={defaultOperators}
+                onUpdateKey={onUpdateKeyMock}
+                onUpdateValue={onUpdateValueMock}
+                onUpdateOperator={onUpdateOperatorMock}
+                onDelete={onDeleteMock}
+                allowDelete={true}
+            />
+        )
+
+        const valueInput = screen.getByPlaceholderText('Enter a user ID')
+        expect(valueInput).toBeInTheDocument()
+    })
+
+    it('displays default placeholder when no hint provided', () => {
+        const attrWithoutHint: AttributeField = {
+            ...defaultStringAttribute,
+            hint: undefined
+        }
+
+        render(
+            <AttributeBuilder
+                attribute={attrWithoutHint}
+                attributeKeys={defaultAttributeKeys}
+                operators={defaultOperators}
+                onUpdateKey={onUpdateKeyMock}
+                onUpdateValue={onUpdateValueMock}
+                onUpdateOperator={onUpdateOperatorMock}
+                onDelete={onDeleteMock}
+                allowDelete={true}
+            />
+        )
+
+        const valueInput = screen.getByPlaceholderText('Enter text value')
+        expect(valueInput).toBeInTheDocument()
+    })
+
+    it('shows "No results found" when search has no matches', async () => {
+        render(
+            <AttributeBuilder
+                attribute={defaultStringAttribute}
+                attributeKeys={defaultAttributeKeys}
+                operators={defaultOperators}
+                onUpdateKey={onUpdateKeyMock}
+                onUpdateValue={onUpdateValueMock}
+                onUpdateOperator={onUpdateOperatorMock}
+                onDelete={onDeleteMock}
+                allowDelete={true}
+            />
+        )
+
+        const keyButton = screen.getByRole('button', { name: /user_id/i })
+        await act(async () => {
+            fireEvent.click(keyButton)
+        })
+
+        await waitFor(() => {
+            expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument()
+        })
+
+        const searchInput = screen.getByPlaceholderText('Search...')
+        await act(async () => {
+            fireEvent.change(searchInput, { target: { value: 'nonexistent' } })
+        })
+
+        await waitFor(() => {
+            expect(screen.getByText('No results found')).toBeInTheDocument()
+        })
+    })
+})
\ No newline at end of file

From 81f50faf0df06fa45c2a3c23075cfe569b311cb8 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 19 Nov 2025 10:43:21 +0530
Subject: [PATCH 88/98] feat(frontend): add tests

---
 .../components/autocompete_input_test.tsx     | 456 ++++++++++++++++++
 .../pages/data_control_overview_test.tsx      |   1 -
 2 files changed, 456 insertions(+), 1 deletion(-)
 create mode 100644 frontend/dashboard/__tests__/components/autocompete_input_test.tsx

diff --git a/frontend/dashboard/__tests__/components/autocompete_input_test.tsx b/frontend/dashboard/__tests__/components/autocompete_input_test.tsx
new file mode 100644
index 000000000..322673594
--- /dev/null
+++ b/frontend/dashboard/__tests__/components/autocompete_input_test.tsx
@@ -0,0 +1,456 @@
+import AutocompleteInput from '@/app/components/autocomplete_input'
+import { beforeEach, describe, expect, it } from '@jest/globals'
+import '@testing-library/jest-dom'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+const onValueChangeMock = jest.fn()
+
+describe('AutocompleteInput Component', () => {
+    beforeEach(() => {
+        onValueChangeMock.mockClear()
+    })
+
+    const defaultSuggestions = ['user-123', 'user-456', 'user-789', 'admin-001', 'guest-user']
+
+    it('renders input with placeholder', () => {
+        render(
+            <AutocompleteInput
+                value=""
+                suggestions={defaultSuggestions}
+                placeholder="Enter a user ID..."
+                onValueChange={onValueChangeMock}
+            />
+        )
+
+        const input = screen.getByRole('combobox')
+        expect(input).toBeInTheDocument()
+        expect(input).toHaveAttribute('placeholder', 'Enter a user ID...')
+    })
+
+    it('renders with initial value', () => {
+        render(
+            <AutocompleteInput
+                value="user-123"
+                suggestions={defaultSuggestions}
+                onValueChange={onValueChangeMock}
+            />
+        )
+
+        const input = screen.getByRole('combobox')
+        expect(input).toHaveValue('user-123')
+    })
+
+    it('shows suggestions when input is focused', async () => {
+        render(
+            <AutocompleteInput
+                value=""
+                suggestions={defaultSuggestions}
+                onValueChange={onValueChangeMock}
+            />
+        )
+
+        const input = screen.getByRole('combobox')
+
+        await act(async () => {
+            fireEvent.focus(input)
+        })
+
+        await waitFor(() => {
+            expect(screen.getByRole('listbox')).toBeInTheDocument()
+        })
+
+        expect(screen.getByText('user-123')).toBeInTheDocument()
+        expect(screen.getByText('user-456')).toBeInTheDocument()
+        expect(screen.getByText('admin-001')).toBeInTheDocument()
+    })
+
+    it('filters suggestions based on input value', async () => {
+        render(
+            <AutocompleteInput
+                value=""
+                suggestions={defaultSuggestions}
+                onValueChange={onValueChangeMock}
+            />
+        )
+
+        const input = screen.getByRole('combobox')
+
+        await act(async () => {
+            fireEvent.focus(input)
+            fireEvent.change(input, { target: { value: 'admin' } })
+        })
+
+        await waitFor(() => {
+            expect(screen.getByText('admin-001')).toBeInTheDocument()
+        })
+
+        expect(screen.queryByText('user-123')).not.toBeInTheDocument()
+        expect(screen.queryByText('guest-user')).not.toBeInTheDocument()
+    })
+
+    it('calls onValueChange when typing', async () => {
+        render(
+            <AutocompleteInput
+                value=""
+                suggestions={defaultSuggestions}
+                onValueChange={onValueChangeMock}
+            />
+        )
+
+        const input = screen.getByRole('combobox')
+
+        await act(async () => {
+            fireEvent.change(input, { target: { value: 'custom-id' } })
+        })
+
+        expect(onValueChangeMock).toHaveBeenCalledWith('custom-id')
+    })
+
+    it('selects suggestion on click', async () => {
+        render(
+            <AutocompleteInput
+                value=""
+                suggestions={defaultSuggestions}
+                onValueChange={onValueChangeMock}
+            />
+        )
+
+        const input = screen.getByRole('combobox')
+
+        await act(async () => {
+            fireEvent.focus(input)
+        })
+
+        await waitFor(() => {
+            expect(screen.getByText('user-456')).toBeInTheDocument()
+        })
+
+        await act(async () => {
+            fireEvent.mouseDown(screen.getByText('user-456'))
+        })
+
+        expect(onValueChangeMock).toHaveBeenCalledWith('user-456')
+
+        await waitFor(() => {
+            expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+        })
+    })
+
+    it('selects highlighted suggestion on Enter key', async () => {
+        render(
+            <AutocompleteInput
+                value=""
+                suggestions={defaultSuggestions}
+                onValueChange={onValueChangeMock}
+            />
+        )
+
+        const input = screen.getByRole('combobox')
+
+        await act(async () => {
+            fireEvent.focus(input)
+        })
+
+        await waitFor(() => {
+            expect(screen.getByRole('listbox')).toBeInTheDocument()
+        })
+
+        await act(async () => {
+            fireEvent.keyDown(input, { key: 'Enter' })
+        })
+
+        expect(onValueChangeMock).toHaveBeenCalledWith('user-123')
+    })
+
+    it('closes suggestions on Escape key', async () => {
+        render(
+            <AutocompleteInput
+                value=""
+                suggestions={defaultSuggestions}
+                onValueChange={onValueChangeMock}
+            />
+        )
+
+        const input = screen.getByRole('combobox')
+
+        await act(async () => {
+            fireEvent.focus(input)
+        })
+
+        await waitFor(() => {
+            expect(screen.getByRole('listbox')).toBeInTheDocument()
+        })
+
+        await act(async () => {
+            fireEvent.keyDown(input, { key: 'Escape' })
+        })
+
+        await waitFor(() => {
+            expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+        })
+    })
+
+    it('focuses first suggestion on Tab key', async () => {
+        render(
+            <AutocompleteInput
+                value=""
+                suggestions={defaultSuggestions}
+                onValueChange={onValueChangeMock}
+            />
+        )
+
+        const input = screen.getByRole('combobox')
+
+        await act(async () => {
+            fireEvent.focus(input)
+        })
+
+        await waitFor(() => {
+            expect(screen.getByRole('listbox')).toBeInTheDocument()
+        })
+
+        const firstOption = screen.getAllByRole('option')[0]
+
+        await act(async () => {
+            fireEvent.keyDown(input, { key: 'Tab' })
+        })
+
+        await waitFor(() => {
+            expect(firstOption).toHaveFocus()
+        })
+    })
+
+    it('selects suggestion on Space key when suggestion is focused', async () => {
+        render(
+            <AutocompleteInput
+                value=""
+                suggestions={defaultSuggestions}
+                onValueChange={onValueChangeMock}
+            />
+        )
+
+        const input = screen.getByRole('combobox')
+
+        await act(async () => {
+            fireEvent.focus(input)
+        })
+
+        await waitFor(() => {
+            expect(screen.getByRole('listbox')).toBeInTheDocument()
+        })
+
+        const userOption = screen.getByText('user-456')
+
+        await act(async () => {
+            fireEvent.focus(userOption)
+        })
+
+        await act(async () => {
+            fireEvent.keyDown(userOption, { key: ' ' })
+        })
+
+        expect(onValueChangeMock).toHaveBeenCalledWith('user-456')
+    })
+
+    it('selects suggestion on Enter key when suggestion is focused', async () => {
+        render(
+            <AutocompleteInput
+                value=""
+                suggestions={defaultSuggestions}
+                onValueChange={onValueChangeMock}
+            />
+        )
+
+        const input = screen.getByRole('combobox')
+
+        await act(async () => {
+            fireEvent.focus(input)
+        })
+
+        await waitFor(() => {
+            expect(screen.getByRole('listbox')).toBeInTheDocument()
+        })
+
+        const adminOption = screen.getByText('admin-001')
+
+        await act(async () => {
+            fireEvent.focus(adminOption)
+        })
+
+        await act(async () => {
+            fireEvent.keyDown(adminOption, { key: 'Enter' })
+        })
+
+        expect(onValueChangeMock).toHaveBeenCalledWith('admin-001')
+    })
+
+    it('highlights suggestion on hover', async () => {
+        render(
+            <AutocompleteInput
+                value=""
+                suggestions={defaultSuggestions}
+                onValueChange={onValueChangeMock}
+            />
+        )
+
+        const input = screen.getByRole('combobox')
+
+        await act(async () => {
+            fireEvent.focus(input)
+        })
+
+        await waitFor(() => {
+            expect(screen.getByRole('listbox')).toBeInTheDocument()
+        })
+
+        const userOption = screen.getByText('user-789')
+
+        await act(async () => {
+            fireEvent.mouseEnter(userOption)
+        })
+
+        expect(userOption.closest('[role="option"]')).toHaveAttribute('aria-selected', 'true')
+    })
+
+    it('does not show suggestions when list is empty', async () => {
+        render(
+            <AutocompleteInput
+                value=""
+                suggestions={[]}
+                onValueChange={onValueChangeMock}
+            />
+        )
+
+        const input = screen.getByRole('combobox')
+
+        await act(async () => {
+            fireEvent.focus(input)
+        })
+
+        expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+    })
+
+    it('hides suggestions when filtered list is empty', async () => {
+        render(
+            <AutocompleteInput
+                value=""
+                suggestions={defaultSuggestions}
+                onValueChange={onValueChangeMock}
+            />
+        )
+
+        const input = screen.getByRole('combobox')
+
+        await act(async () => {
+            fireEvent.focus(input)
+        })
+
+        await waitFor(() => {
+            expect(screen.getByRole('listbox')).toBeInTheDocument()
+        })
+
+        await act(async () => {
+            fireEvent.change(input, { target: { value: 'nonexistent' } })
+        })
+
+        await waitFor(() => {
+            expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+        })
+    })
+
+    it('shows all suggestions when input value is cleared', async () => {
+        render(
+            <AutocompleteInput
+                value="user"
+                suggestions={defaultSuggestions}
+                onValueChange={onValueChangeMock}
+            />
+        )
+
+        const input = screen.getByRole('combobox')
+
+        await act(async () => {
+            fireEvent.focus(input)
+        })
+
+        // Initially shows filtered suggestions
+        await waitFor(() => {
+            expect(screen.getByText('user-123')).toBeInTheDocument()
+        })
+
+        expect(screen.queryByText('admin-001')).not.toBeInTheDocument()
+
+        // Clear the input
+        await act(async () => {
+            fireEvent.change(input, { target: { value: '' } })
+        })
+
+        // Should show all suggestions
+        await waitFor(() => {
+            expect(screen.getByText('user-123')).toBeInTheDocument()
+            expect(screen.getByText('user-456')).toBeInTheDocument()
+            expect(screen.getByText('admin-001')).toBeInTheDocument()
+        })
+    })
+
+    it('case-insensitive filtering', async () => {
+        render(
+            <AutocompleteInput
+                value=""
+                suggestions={defaultSuggestions}
+                onValueChange={onValueChangeMock}
+            />
+        )
+
+        const input = screen.getByRole('combobox')
+
+        await act(async () => {
+            fireEvent.focus(input)
+            fireEvent.change(input, { target: { value: 'ADMIN' } })
+        })
+
+        await waitFor(() => {
+            expect(screen.getByText('admin-001')).toBeInTheDocument()
+        })
+
+        expect(screen.queryByText('user-123')).not.toBeInTheDocument()
+    })
+
+    it('updates value when prop changes', async () => {
+        const { rerender } = render(
+            <AutocompleteInput
+                value="user-123"
+                suggestions={defaultSuggestions}
+                onValueChange={onValueChangeMock}
+            />
+        )
+
+        const input = screen.getByRole('combobox')
+        expect(input).toHaveValue('user-123')
+
+        rerender(
+            <AutocompleteInput
+                value="admin-001"
+                suggestions={defaultSuggestions}
+                onValueChange={onValueChangeMock}
+            />
+        )
+
+        await waitFor(() => {
+            expect(input).toHaveValue('admin-001')
+        })
+    })
+
+    it('uses default placeholder when not provided', () => {
+        render(
+            <AutocompleteInput
+                value=""
+                suggestions={defaultSuggestions}
+                onValueChange={onValueChangeMock}
+            />
+        )
+
+        const input = screen.getByRole('combobox')
+        expect(input).toHaveAttribute('placeholder', 'Enter value...')
+    })
+})
\ No newline at end of file
diff --git a/frontend/dashboard/__tests__/pages/data_control_overview_test.tsx b/frontend/dashboard/__tests__/pages/data_control_overview_test.tsx
index 80a3a5761..49a86443d 100644
--- a/frontend/dashboard/__tests__/pages/data_control_overview_test.tsx
+++ b/frontend/dashboard/__tests__/pages/data_control_overview_test.tsx
@@ -320,5 +320,4 @@ describe('DataControlOverview Component', () => {
         const createButton = await screen.findByText('Create Rule')
         expect(createButton).not.toBeDisabled()
     })
-    
 })
\ No newline at end of file

From d43efbd409b35b2eb24613b18e30a3c9811cda1f Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Wed, 19 Nov 2025 19:39:45 +0530
Subject: [PATCH 89/98] feat(backend): implement sdk config API

---
 backend/api/main.go                    |   2 +-
 backend/api/measure/app.go             |   4 +-
 backend/api/measure/sdkconfig.go       | 214 +++++++++++++++++++++++++
 backend/api/measure/targeting_rules.go |   4 +-
 4 files changed, 219 insertions(+), 5 deletions(-)
 create mode 100644 backend/api/measure/sdkconfig.go

diff --git a/backend/api/main.go b/backend/api/main.go
index 30792fac4..144b412bc 100644
--- a/backend/api/main.go
+++ b/backend/api/main.go
@@ -59,7 +59,7 @@ func main() {
 	// SDK routes
 	r.PUT("/events", measure.ValidateAPIKey(), measure.PutEvents)
 	r.PUT("/builds", measure.ValidateAPIKey(), measure.PutBuilds)
-	// r.GET("/config", measure.ValidateAPIKey(), measure.GetConfig)
+	r.GET("/config", measure.ValidateAPIKey(), measure.GetConfig)
 
 	// Proxy routes
 	r.GET("/proxy/attachments", measure.ProxyAttachment)
diff --git a/backend/api/measure/app.go b/backend/api/measure/app.go
index 09dad709b..efc5556cd 100644
--- a/backend/api/measure/app.go
+++ b/backend/api/measure/app.go
@@ -6568,7 +6568,7 @@ func GetEventTargetingRules(c *gin.Context) {
 		return
 	}
 
-	response, err := GetEventTargetingRulesWithFilter(ctx, &af, team.ID)
+	response, err := GetEventTargetingRulesWithFilter(ctx, &af)
 	if err != nil {
 		msg := "failed to get app's event targeting rules"
 		fmt.Println(msg, err)
@@ -6667,7 +6667,7 @@ func GetTraceTargetingRules(c *gin.Context) {
 		return
 	}
 
-	response, err := GetTraceTargetingRulesWithFilter(ctx, &af, team.ID)
+	response, err := GetTraceTargetingRulesWithFilter(ctx, &af)
 	if err != nil {
 		msg := "failed to get app's trace targeting rules"
 		fmt.Println(msg, err)
diff --git a/backend/api/measure/sdkconfig.go b/backend/api/measure/sdkconfig.go
new file mode 100644
index 000000000..8cda7e755
--- /dev/null
+++ b/backend/api/measure/sdkconfig.go
@@ -0,0 +1,214 @@
+package measure
+
+import (
+	"backend/api/server"
+	"context"
+	"fmt"
+	"net/http"
+
+	"github.com/gin-gonic/gin"
+	"github.com/google/uuid"
+	"github.com/leporo/sqlf"
+)
+
+const (
+	cacheControlHeader = "Cache-Control"
+	cacheControlValue  = "max-age=600" // 10 minutes
+)
+
+// SDK-specific rule types
+type SDKEventRule struct {
+	Id                 uuid.UUID `json:"id"`
+	Name               string    `json:"name"`
+	Condition          string    `json:"condition"`
+	CollectionMode     string    `json:"collection_mode"`
+	TakeScreenshot     bool      `json:"take_screenshot"`
+	TakeLayoutSnapshot bool      `json:"take_layout_snapshot"`
+	SamplingRate       float32   `json:"sampling_rate"`
+	IsDefaultBehaviour bool      `json:"is_default_behaviour"`
+}
+
+type SDKTraceRule struct {
+	Id                 uuid.UUID `json:"id"`
+	Name               string    `json:"name"`
+	Condition          string    `json:"condition"`
+	CollectionMode     string    `json:"collection_mode"`
+	SamplingRate       float32   `json:"sampling_rate"`
+	IsDefaultBehaviour bool      `json:"is_default_behaviour"`
+}
+
+type SDKSessionRule struct {
+	Id           uuid.UUID `json:"id"`
+	Name         string    `json:"name"`
+	Condition    string    `json:"condition"`
+	SamplingRate float32   `json:"sampling_rate"`
+}
+
+// SDK config contains session targeting
+// rules and will have more configurations
+// in future.
+type SDKConfig struct {
+	EventRules   []SDKEventRule   `json:"event_rules"`
+	TraceRules   []SDKTraceRule   `json:"trace_rules"`
+	SessionRules []SDKSessionRule `json:"session_rules"`
+}
+
+// GetSDKEventRules queries event targeting rules optimized for SDK
+func GetSDKEventRules(ctx context.Context, appId uuid.UUID) ([]SDKEventRule, error) {
+	stmt := sqlf.PostgreSQL.From("event_targeting_rules").
+		Select("id").
+		Select("name").
+		Select("condition").
+		Select("collection_mode").
+		Select("take_screenshot").
+		Select("take_layout_snapshot").
+		Select("sampling_rate").
+		Select("is_default_behaviour").
+		Where("app_id = ?", appId)
+
+	defer stmt.Close()
+
+	rows, err := server.Server.PgPool.Query(ctx, stmt.String(), stmt.Args()...)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	var rules []SDKEventRule
+	for rows.Next() {
+		var rule SDKEventRule
+		if err := rows.Scan(
+			&rule.Id,
+			&rule.Name,
+			&rule.Condition,
+			&rule.CollectionMode,
+			&rule.TakeScreenshot,
+			&rule.TakeLayoutSnapshot,
+			&rule.SamplingRate,
+			&rule.IsDefaultBehaviour,
+		); err != nil {
+			return nil, err
+		}
+		rules = append(rules, rule)
+	}
+
+	return rules, rows.Err()
+}
+
+// GetSDKTraceRules queries trace targeting rules optimized for SDK
+func GetSDKTraceRules(ctx context.Context, appId uuid.UUID) ([]SDKTraceRule, error) {
+	stmt := sqlf.PostgreSQL.From("trace_targeting_rules").
+		Select("id").
+		Select("name").
+		Select("condition").
+		Select("collection_mode").
+		Select("sampling_rate").
+		Select("is_default_behaviour").
+		Where("app_id = ?", appId)
+
+	defer stmt.Close()
+
+	rows, err := server.Server.PgPool.Query(ctx, stmt.String(), stmt.Args()...)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	var rules []SDKTraceRule
+	for rows.Next() {
+		var rule SDKTraceRule
+		if err := rows.Scan(
+			&rule.Id,
+			&rule.Name,
+			&rule.Condition,
+			&rule.CollectionMode,
+			&rule.SamplingRate,
+			&rule.IsDefaultBehaviour,
+		); err != nil {
+			return nil, err
+		}
+		rules = append(rules, rule)
+	}
+
+	return rules, rows.Err()
+}
+
+// GetSDKSessionRules queries session targeting rules optimized for SDK
+func GetSDKSessionRules(ctx context.Context, appId uuid.UUID) ([]SDKSessionRule, error) {
+	stmt := sqlf.PostgreSQL.From("session_targeting_rules").
+		Select("id").
+		Select("name").
+		Select("condition").
+		Select("sampling_rate").
+		Where("app_id = ?", appId)
+
+	defer stmt.Close()
+
+	rows, err := server.Server.PgPool.Query(ctx, stmt.String(), stmt.Args()...)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	var rules []SDKSessionRule
+	for rows.Next() {
+		var rule SDKSessionRule
+		if err := rows.Scan(
+			&rule.Id,
+			&rule.Name,
+			&rule.Condition,
+			&rule.SamplingRate,
+		); err != nil {
+			return nil, err
+		}
+		rules = append(rules, rule)
+	}
+
+	return rules, rows.Err()
+}
+
+// GetConfig returns the SDK config
+// for session targeting
+func GetConfig(c *gin.Context) {
+	appId, err := uuid.Parse(c.GetString("appId"))
+	if err != nil {
+		msg := `error parsing app's uuid`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	// Fetch all rule types
+	eventRules, err := GetSDKEventRules(c, appId)
+	if err != nil {
+		msg := `error fetching event rules`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	traceRules, err := GetSDKTraceRules(c, appId)
+	if err != nil {
+		msg := `error fetching trace rules`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	sessionRules, err := GetSDKSessionRules(c, appId)
+	if err != nil {
+		msg := `error fetching session rules`
+		fmt.Println(msg, err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+		return
+	}
+
+	sdkConfig := SDKConfig{
+		EventRules:   eventRules,
+		TraceRules:   traceRules,
+		SessionRules: sessionRules,
+	}
+
+	c.Header(cacheControlHeader, cacheControlValue)
+	c.JSON(http.StatusOK, sdkConfig)
+}
diff --git a/backend/api/measure/targeting_rules.go b/backend/api/measure/targeting_rules.go
index fd9df503f..374206003 100644
--- a/backend/api/measure/targeting_rules.go
+++ b/backend/api/measure/targeting_rules.go
@@ -171,7 +171,7 @@ type SessionTargetingRulePayload struct {
 
 // GetEventTargetingRules provides all
 // event targeting rules.
-func GetEventTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter, teamId *uuid.UUID) (response EventTargetingRulesResponse, err error) {
+func GetEventTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter) (response EventTargetingRulesResponse, err error) {
 	stmt := sqlf.PostgreSQL.From("event_targeting_rules").
 		Select("id").
 		Select("team_id").
@@ -249,7 +249,7 @@ func GetEventTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter,
 
 // GetTraceTargetingRulesWithFilter provides all
 // trace targeting rules.
-func GetTraceTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter, teamId *uuid.UUID) (response TraceTargetingRulesResponse, err error) {
+func GetTraceTargetingRulesWithFilter(ctx context.Context, af *filter.AppFilter) (response TraceTargetingRulesResponse, err error) {
 	stmt := sqlf.PostgreSQL.From("trace_targeting_rules").
 		Select("id").
 		Select("team_id").

From a918d9a76d0349a1f6943d976b81e454a7794070 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 20 Nov 2025 07:25:15 +0530
Subject: [PATCH 90/98] feat(backend): add valkey service to docker

---
 self-host/compose.prod.yml | 20 ++++++++++++++++++++
 self-host/compose.yml      | 21 +++++++++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/self-host/compose.prod.yml b/self-host/compose.prod.yml
index 3ba643b6d..a46c94f45 100644
--- a/self-host/compose.prod.yml
+++ b/self-host/compose.prod.yml
@@ -136,3 +136,23 @@ services:
       options:
         max-size: 10m
         max-file: 5
+
+  valkey:
+    command: >
+      valkey-server
+      --maxmemory 256mb
+      --maxmemory-policy allkeys-lru
+      --io-threads 4
+      --io-threads-do-reads yes
+      --save ""
+      --appendonly no
+      --requirepass ${REDIS_PASSWORD}
+      --rename-command FLUSHDB ""
+      --rename-command FLUSHALL ""
+      --rename-command CONFIG ""
+    restart: unless-stopped
+    logging:
+      driver: local
+      options:
+        max-size: 10m
+        max-file: 5
diff --git a/self-host/compose.yml b/self-host/compose.yml
index ae7674bc9..c3ec4d1ad 100644
--- a/self-host/compose.yml
+++ b/self-host/compose.yml
@@ -444,6 +444,27 @@ services:
         source: ./clickhouse/config/users.xml
         target: /etc/clickhouse-server/users.xml
 
+  valkey:
+    image: valkey/valkey:9.0.0-alpine
+    ports:
+      - "6379:6379"
+    environment:
+        - VALKEY_PASSWORD=${VALKEY_PASSWORD:-dev_password}
+        - VALKEY_DISABLE_COMMANDS=FLUSHDB,FLUSHALL
+    command: >
+      valkey-server
+      --maxmemory 256mb
+      --maxmemory-policy allkeys-lru
+      --io-threads 4
+      --io-threads-do-reads yes
+      --save ""
+      --appendonly no
+    healthcheck:
+      test: ["CMD", "valkey-cli", "ping"]
+      interval: 5s
+      timeout: 3s
+      retries: 5
+
 volumes:
   clickhouse-volume:
   migrator-volume:

From 9733afa9670712b32a90c8ae07e33bdd1dbf130a Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 20 Nov 2025 08:01:38 +0530
Subject: [PATCH 91/98] feat(backend): update config.sh to generate valkey env
 variables

---
 self-host/compose.yml |  6 +++---
 self-host/config.sh   | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/self-host/compose.yml b/self-host/compose.yml
index c3ec4d1ad..43c6b9784 100644
--- a/self-host/compose.yml
+++ b/self-host/compose.yml
@@ -64,6 +64,7 @@ services:
       - POSTGRES_DSN=${POSTGRES_DSN}
       - CLICKHOUSE_DSN=${CLICKHOUSE_DSN}
       - CLICKHOUSE_READER_DSN=${CLICKHOUSE_READER_DSN}
+      - VALKEY_DSN=${VALKEY_DSN}   
       - AWS_ENDPOINT_URL=${AWS_ENDPOINT_URL}
       - SYMBOLS_S3_BUCKET=${SYMBOLS_S3_BUCKET}
       - SYMBOLS_S3_BUCKET_REGION=${SYMBOLS_S3_BUCKET_REGION}
@@ -125,6 +126,8 @@ services:
         condition: service_healthy
       metering:
         condition: service_healthy
+      valkey:
+        condition: service_healthy
 
   cleanup:
     build:
@@ -448,9 +451,6 @@ services:
     image: valkey/valkey:9.0.0-alpine
     ports:
       - "6379:6379"
-    environment:
-        - VALKEY_PASSWORD=${VALKEY_PASSWORD:-dev_password}
-        - VALKEY_DISABLE_COMMANDS=FLUSHDB,FLUSHALL
     command: >
       valkey-server
       --maxmemory 256mb
diff --git a/self-host/config.sh b/self-host/config.sh
index aa6db6099..74e19ba5a 100755
--- a/self-host/config.sh
+++ b/self-host/config.sh
@@ -198,6 +198,9 @@ CLICKHOUSE_DSN=clickhouse://\${CLICKHOUSE_OPERATOR_USER}:\${CLICKHOUSE_OPERATOR_
 CLICKHOUSE_READER_DSN=clickhouse://\${CLICKHOUSE_READER_USER}:\${CLICKHOUSE_READER_PASSWORD}@clickhouse:9000/measure
 CLICKHOUSE_MIGRATION_URL=clickhouse://\${CLICKHOUSE_ADMIN_USER}:\${CLICKHOUSE_ADMIN_PASSWORD}@clickhouse:9000/measure
 
+VALKEY_PASSWORD=
+VALKEY_DSN=redis://valkey:6379/0
+
 ##################
 # Object Storage #
 ##################
@@ -345,6 +348,9 @@ CLICKHOUSE_DSN=clickhouse://\${CLICKHOUSE_OPERATOR_USER}:\${CLICKHOUSE_OPERATOR_
 CLICKHOUSE_READER_DSN=clickhouse://\${CLICKHOUSE_READER_USER}:\${CLICKHOUSE_READER_PASSWORD}@clickhouse:9000/measure
 CLICKHOUSE_MIGRATION_URL=clickhouse://\${CLICKHOUSE_ADMIN_USER}:\${CLICKHOUSE_ADMIN_PASSWORD}@clickhouse:9000/measure
 
+VALKEY_PASSWORD=$VALKEY_PASSWORD
+VALKEY_DSN=redis://:\${VALKEY_PASSWORD}@valkey:6379/0
+
 ##################
 # Object Storage #
 ##################
@@ -521,6 +527,9 @@ END
 
       echo -e "Set ClickHouse reader user's password"
       CLICKHOUSE_READER_PASSWORD=$(prompt_password 24 "Enter password for ClickHouse user: ")
+
+      echo -e "Set Valkey password"
+      VALKEY_PASSWORD=$(prompt_password 24 "Enter password for Valkey: ")
     else
       # Generate secure database passwords
       echo -e "Generated secure password for Postgres user"
@@ -534,6 +543,9 @@ END
 
       echo -e "Generated secure password for ClickHouse reader user"
       CLICKHOUSE_READER_PASSWORD=$(generate_password 24)
+
+      echo -e "Generated secure password for Valkey"
+      VALKEY_PASSWORD=$(generate_password 24)
     fi
 
     if [[ $USE_EXTERNAL_BUCKETS -eq 1 ]]; then
@@ -607,6 +619,9 @@ END
   echo -e "Wrote config to $ENV_WEB_FILE"
 }
 
+# ------------------------------------------------------------------------------
+# Sync environment variables
+# ------------------------------------------------------------------------------
 # ------------------------------------------------------------------------------
 # Sync environment variables
 # ------------------------------------------------------------------------------
@@ -624,6 +639,8 @@ ensure() {
   local clickhouse_reader_dsn
   local symbolicator_origin
   local symboloader_origin
+  local valkey_password
+  local valkey_dsn
 
   clickhouse_admin_user="app_admin"
   clickhouse_operator_user="app_operator"
@@ -640,6 +657,7 @@ ensure() {
     clickhouse_admin_password="dummY_pa55w0rd"
     clickhouse_operator_password="dummY_pa55w0rd"
     clickhouse_reader_password="dummY_pa55w0rd"
+    valkey_dsn="redis://valkey:6379/0"
 
     if ! check_env_variable "CLICKHOUSE_ADMIN_USER"; then
       add_env_variable "CLICKHOUSE_ADMIN_USER" "$clickhouse_admin_user" "CLICKHOUSE_PASSWORD"
@@ -684,10 +702,21 @@ ensure() {
     if ! check_env_variable "CLICKHOUSE_READER_DSN"; then
       add_env_variable "CLICKHOUSE_READER_DSN" "$clickhouse_reader_dsn" "CLICKHOUSE_MIGRATION_URL"
     fi
+
+    if ! check_env_variable "VALKEY_PASSWORD"; then
+      add_env_variable "VALKEY_PASSWORD" "" "CLICKHOUSE_READER_DSN"
+    fi
+
+    if ! check_env_variable "VALKEY_DSN"; then
+      add_env_variable "VALKEY_DSN" "$valkey_dsn" "VALKEY_PASSWORD"
+    fi
+
   elif [[ "$SETUP_ENV" == "production" ]]; then
     clickhouse_admin_password=$(generate_password 24)
     clickhouse_operator_password=$(generate_password 24)
     clickhouse_reader_password=$(generate_password 24)
+    valkey_password=$(generate_password 24)
+    valkey_dsn="redis://:\${VALKEY_PASSWORD}@valkey:6379/0"
 
     if ! check_env_variable "CLICKHOUSE_ADMIN_USER"; then
       add_env_variable "CLICKHOUSE_ADMIN_USER" "$clickhouse_admin_user" "CLICKHOUSE_PASSWORD"
@@ -732,6 +761,14 @@ ensure() {
     if ! check_env_variable "CLICKHOUSE_READER_DSN"; then
       add_env_variable "CLICKHOUSE_READER_DSN" "$clickhouse_reader_dsn" "CLICKHOUSE_MIGRATION_URL"
     fi
+
+    if ! check_env_variable "VALKEY_PASSWORD"; then
+      add_env_variable "VALKEY_PASSWORD" "$valkey_password" "CLICKHOUSE_READER_DSN"
+    fi
+
+    if ! check_env_variable "VALKEY_DSN"; then
+      add_env_variable "VALKEY_DSN" "$valkey_dsn" "VALKEY_PASSWORD"
+    fi
   fi
 
   # set the common variables across environments

From 427402b69e452a316b6fc2715351aba0ce25cd2a Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 20 Nov 2025 11:59:57 +0530
Subject: [PATCH 92/98] feat(backend): back sdk config with redis cache

---
 backend/api/go.mod                     |   2 +
 backend/api/go.sum                     |   4 +
 backend/api/measure/sdkconfig.go       | 114 ++++++++++++++++++++-----
 backend/api/measure/targeting_rules.go |  46 ++++++++++
 backend/api/server/server.go           |  33 +++++++
 go.work.sum                            |   6 +-
 6 files changed, 181 insertions(+), 24 deletions(-)

diff --git a/backend/api/go.mod b/backend/api/go.mod
index 5083838ca..67557ed2d 100644
--- a/backend/api/go.mod
+++ b/backend/api/go.mod
@@ -16,6 +16,7 @@ require (
 	github.com/klauspost/compress v1.18.0
 	github.com/leporo/sqlf v1.4.0
 	github.com/oschwald/maxminddb-golang v1.13.1
+	github.com/redis/go-redis/v9 v9.17.0
 	github.com/wneessen/go-mail v0.7.1
 	github.com/yourbasic/graph v0.0.0-20210606180040-8ecfec1c2869
 	go.opentelemetry.io/contrib/instrumentation/github.com/gin-gonic/gin/otelgin v0.62.0
@@ -56,6 +57,7 @@ require (
 	github.com/cespare/xxhash/v2 v2.3.0 // indirect
 	github.com/cloudwego/base64x v0.1.5 // indirect
 	github.com/cncf/xds/go v0.0.0-20250501225837-2ac532fd4443 // indirect
+	github.com/dgryski/go-rendezvous v0.0.0-20200823014737-9f7001d12a5f // indirect
 	github.com/envoyproxy/go-control-plane/envoy v1.32.4 // indirect
 	github.com/envoyproxy/protoc-gen-validate v1.2.1 // indirect
 	github.com/felixge/httpsnoop v1.0.4 // indirect
diff --git a/backend/api/go.sum b/backend/api/go.sum
index fc26fb02e..c7b4fb687 100644
--- a/backend/api/go.sum
+++ b/backend/api/go.sum
@@ -76,6 +76,8 @@ github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSs
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc h1:U9qPSI2PIWSS1VwoXQT9A3Wy9MM3WgvqSxFWenqJduM=
 github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/dgryski/go-rendezvous v0.0.0-20200823014737-9f7001d12a5f h1:lO4WD4F/rVNCu3HqELle0jiPLLBs70cWOduZpkS1E78=
+github.com/dgryski/go-rendezvous v0.0.0-20200823014737-9f7001d12a5f/go.mod h1:cuUVRXasLTGF7a8hSLbxyZXjz+1KgoB3wDUb6vlszIc=
 github.com/envoyproxy/go-control-plane v0.13.4 h1:zEqyPVyku6IvWCFwux4x9RxkLOMUL+1vC9xUFv5l2/M=
 github.com/envoyproxy/go-control-plane v0.13.4/go.mod h1:kDfuBlDVsSj2MjrLEtRWtHlsWIFcGyB2RMO44Dc5GZA=
 github.com/envoyproxy/go-control-plane/envoy v1.32.4 h1:jb83lalDRZSpPWW2Z7Mck/8kXZ5CQAFYVjQcdVIr83A=
@@ -192,6 +194,8 @@ github.com/planetscale/vtprotobuf v0.6.1-0.20240319094008-0393e58bdf10/go.mod h1
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2 h1:Jamvg5psRIccs7FGNTlIRMkT8wgtp5eCXdBlqhYGL6U=
 github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/redis/go-redis/v9 v9.17.0 h1:K6E+ZlYN95KSMmZeEQPbU/c++wfmEvfFB17yEAq/VhM=
+github.com/redis/go-redis/v9 v9.17.0/go.mod h1:u410H11HMLoB+TP67dz8rL9s6QW2j76l0//kSOd3370=
 github.com/rogpeppe/go-internal v1.13.1 h1:KvO1DLK/DRN07sQ1LQKScxyZJuNnedQ5/wKSR38lUII=
 github.com/rogpeppe/go-internal v1.13.1/go.mod h1:uMEvuHeurkdAXX61udpOXGD/AzZDWNMNyH2VO9fmH0o=
 github.com/segmentio/asm v1.2.1 h1:DTNbBqs57ioxAD4PrArqftgypG4/qNpXoJx8TVXxPR0=
diff --git a/backend/api/measure/sdkconfig.go b/backend/api/measure/sdkconfig.go
index 8cda7e755..4a06b96c4 100644
--- a/backend/api/measure/sdkconfig.go
+++ b/backend/api/measure/sdkconfig.go
@@ -3,6 +3,7 @@ package measure
 import (
 	"backend/api/server"
 	"context"
+	"encoding/json"
 	"fmt"
 	"net/http"
 
@@ -53,6 +54,87 @@ type SDKConfig struct {
 	SessionRules []SDKSessionRule `json:"session_rules"`
 }
 
+// getSDKConfigCacheKey returns the Redis cache key for SDK config
+func getSDKConfigCacheKey(appId uuid.UUID) string {
+	return fmt.Sprintf("sdk_config:%s", appId.String())
+}
+
+// getSDKConfigFromCache attempts to read SDK config from Redis cache
+func getSDKConfigFromCache(ctx context.Context, appId uuid.UUID) (*SDKConfig, error) {
+	key := getSDKConfigCacheKey(appId)
+
+	data, err := server.Server.Redis.Get(ctx, key).Result()
+	if err != nil {
+		return nil, err
+	}
+
+	var config SDKConfig
+	if err := json.Unmarshal([]byte(data), &config); err != nil {
+		return nil, fmt.Errorf("failed to unmarshal cached config: %w", err)
+	}
+
+	fmt.Println("[SdkConfig]: Accessed SDK config from cache")
+	return &config, nil
+}
+
+// setSDKConfigToCache stores SDK config in Redis cache
+func setSDKConfigToCache(ctx context.Context, appId uuid.UUID, config *SDKConfig) error {
+	key := getSDKConfigCacheKey(appId)
+
+	data, err := json.Marshal(config)
+	if err != nil {
+		return fmt.Errorf("failed to marshal config: %w", err)
+	}
+
+	// Set with no expiration
+	if err := server.Server.Redis.Set(ctx, key, data, 0).Err(); err != nil {
+		return fmt.Errorf("failed to set cache: %w", err)
+	}
+
+	fmt.Println("[SdkConfig]: Setting SDK config to cache")
+
+	return nil
+}
+
+// InvalidateSDKConfigCache deletes the cached SDK config for an app
+func InvalidateSDKConfigCache(ctx context.Context, appId uuid.UUID) error {
+	key := getSDKConfigCacheKey(appId)
+
+	if err := server.Server.Redis.Del(ctx, key).Err(); err != nil {
+		return fmt.Errorf("failed to delete cache: %w", err)
+	}
+
+	fmt.Println("[SdkConfig]: Invalidate SDK config")
+	return nil
+}
+
+// fetchSDKConfigFromDB fetches SDK config from database
+func fetchSDKConfigFromDB(ctx context.Context, appId uuid.UUID) (*SDKConfig, error) {
+	// Fetch all rule types
+	eventRules, err := GetSDKEventRules(ctx, appId)
+	if err != nil {
+		return nil, fmt.Errorf("error fetching event rules: %w", err)
+	}
+
+	traceRules, err := GetSDKTraceRules(ctx, appId)
+	if err != nil {
+		return nil, fmt.Errorf("error fetching trace rules: %w", err)
+	}
+
+	sessionRules, err := GetSDKSessionRules(ctx, appId)
+	if err != nil {
+		return nil, fmt.Errorf("error fetching session rules: %w", err)
+	}
+
+	fmt.Println("[SdkConfig]: Accessed SDK config from DB")
+
+	return &SDKConfig{
+		EventRules:   eventRules,
+		TraceRules:   traceRules,
+		SessionRules: sessionRules,
+	}, nil
+}
+
 // GetSDKEventRules queries event targeting rules optimized for SDK
 func GetSDKEventRules(ctx context.Context, appId uuid.UUID) ([]SDKEventRule, error) {
 	stmt := sqlf.PostgreSQL.From("event_targeting_rules").
@@ -178,35 +260,27 @@ func GetConfig(c *gin.Context) {
 		return
 	}
 
-	// Fetch all rule types
-	eventRules, err := GetSDKEventRules(c, appId)
-	if err != nil {
-		msg := `error fetching event rules`
-		fmt.Println(msg, err)
-		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
+	// Check cache
+	cachedConfig, err := getSDKConfigFromCache(c.Request.Context(), appId)
+	if err == nil && cachedConfig != nil {
+		// Cache hit
+		c.Header(cacheControlHeader, cacheControlValue)
+		c.JSON(http.StatusOK, cachedConfig)
 		return
 	}
 
-	traceRules, err := GetSDKTraceRules(c, appId)
+	// Cache miss
+	sdkConfig, err := fetchSDKConfigFromDB(c.Request.Context(), appId)
 	if err != nil {
-		msg := `error fetching trace rules`
+		msg := `error fetching SDK config`
 		fmt.Println(msg, err)
 		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
 		return
 	}
 
-	sessionRules, err := GetSDKSessionRules(c, appId)
-	if err != nil {
-		msg := `error fetching session rules`
-		fmt.Println(msg, err)
-		c.JSON(http.StatusInternalServerError, gin.H{"error": msg})
-		return
-	}
-
-	sdkConfig := SDKConfig{
-		EventRules:   eventRules,
-		TraceRules:   traceRules,
-		SessionRules: sessionRules,
+	// Update cache
+	if err := setSDKConfigToCache(c.Request.Context(), appId, sdkConfig); err != nil {
+		fmt.Println("failed to cache SDK config:", err)
 	}
 
 	c.Header(cacheControlHeader, cacheControlValue)
diff --git a/backend/api/measure/targeting_rules.go b/backend/api/measure/targeting_rules.go
index 374206003..160477456 100644
--- a/backend/api/measure/targeting_rules.go
+++ b/backend/api/measure/targeting_rules.go
@@ -720,6 +720,11 @@ func CreateEventTargetingRuleForApp(ctx context.Context, appId uuid.UUID, teamId
 	if err != nil {
 		return uuid.Nil, err
 	}
+
+	if err := InvalidateSDKConfigCache(ctx, appId); err != nil {
+		fmt.Println("failed to invalidate SDK config cache:", err)
+	}
+
 	return ruleId, nil
 }
 
@@ -761,6 +766,10 @@ func UpdateEventTargetingRuleForApp(ctx context.Context, appId uuid.UUID, ruleId
 		return fmt.Errorf("event targeting rule not found")
 	}
 
+	if err := InvalidateSDKConfigCache(ctx, appId); err != nil {
+		fmt.Println("failed to invalidate SDK config cache:", err)
+	}
+
 	return nil
 }
 
@@ -811,6 +820,11 @@ func CreateTraceTargetingRuleForApp(ctx context.Context, appId uuid.UUID, teamId
 	if err != nil {
 		return uuid.Nil, err
 	}
+
+	if err := InvalidateSDKConfigCache(ctx, appId); err != nil {
+		fmt.Println("failed to invalidate SDK config cache:", err)
+	}
+
 	return ruleId, nil
 }
 
@@ -850,6 +864,10 @@ func UpdateTraceTargetingRuleForApp(ctx context.Context, appId uuid.UUID, ruleId
 		return fmt.Errorf("trace targeting rule not found")
 	}
 
+	if err := InvalidateSDKConfigCache(ctx, appId); err != nil {
+		fmt.Println("failed to invalidate SDK config cache:", err)
+	}
+
 	return nil
 }
 
@@ -889,6 +907,11 @@ func CreateSessionTargetingRuleForApp(ctx context.Context, appId uuid.UUID, team
 	if err != nil {
 		return uuid.Nil, err
 	}
+
+	if err := InvalidateSDKConfigCache(ctx, appId); err != nil {
+		fmt.Println("failed to invalidate SDK config cache:", err)
+	}
+
 	return ruleId, nil
 }
 
@@ -923,6 +946,10 @@ func UpdateSessionTargetingRuleForApp(ctx context.Context, appId uuid.UUID, rule
 		return fmt.Errorf("session targeting rule not found")
 	}
 
+	if err := InvalidateSDKConfigCache(ctx, appId); err != nil {
+		fmt.Println("failed to invalidate SDK config cache:", err)
+	}
+
 	return nil
 }
 
@@ -943,6 +970,11 @@ func DeleteEventTargetingRuleForApp(ctx context.Context, appId uuid.UUID, ruleId
 	if result.RowsAffected() == 0 {
 		return fmt.Errorf("event targeting rule not found")
 	}
+
+	if err := InvalidateSDKConfigCache(ctx, appId); err != nil {
+		fmt.Println("failed to invalidate SDK config cache:", err)
+	}
+
 	return nil
 }
 
@@ -963,6 +995,11 @@ func DeleteTraceTargetingRuleForApp(ctx context.Context, appId uuid.UUID, ruleId
 	if result.RowsAffected() == 0 {
 		return fmt.Errorf("trace targeting rule not found")
 	}
+
+	if err := InvalidateSDKConfigCache(ctx, appId); err != nil {
+		fmt.Println("failed to invalidate SDK config cache:", err)
+	}
+
 	return nil
 }
 
@@ -983,6 +1020,11 @@ func DeleteSessionTargetingRuleForApp(ctx context.Context, appId uuid.UUID, rule
 	if result.RowsAffected() == 0 {
 		return fmt.Errorf("session targeting rule not found")
 	}
+
+	if err := InvalidateSDKConfigCache(ctx, appId); err != nil {
+		fmt.Println("failed to invalidate SDK config cache:", err)
+	}
+
 	return nil
 }
 
@@ -1169,6 +1211,10 @@ func CreateDefaultTargetingRules(ctx context.Context, tx pgx.Tx, teamId string,
 		return fmt.Errorf("failed to create trace targeting rule: %w", err)
 	}
 
+	if err := InvalidateSDKConfigCache(ctx, appUUID); err != nil {
+		fmt.Println("failed to invalidate SDK config cache:", err)
+	}
+
 	return nil
 }
 
diff --git a/backend/api/server/server.go b/backend/api/server/server.go
index 5a8c496f2..5982b36bf 100644
--- a/backend/api/server/server.go
+++ b/backend/api/server/server.go
@@ -17,6 +17,7 @@ import (
 	"github.com/gin-gonic/gin"
 	"github.com/jackc/pgx/v5"
 	"github.com/jackc/pgx/v5/pgxpool"
+	"github.com/redis/go-redis/v9"
 	"github.com/wneessen/go-mail"
 	"go.opentelemetry.io/otel"
 	"go.opentelemetry.io/otel/attribute"
@@ -34,6 +35,7 @@ type server struct {
 	PgPool  *pgxpool.Pool
 	ChPool  driver.Conn
 	RchPool driver.Conn
+	Redis   *redis.Client
 	Mail    *mail.Client
 	Config  *ServerConfig
 }
@@ -49,9 +51,15 @@ type ClickhouseConfig struct {
 	ReaderDSN string
 }
 
+type RedisConfig struct {
+	/* connection string of the redis instance */
+	DSN string
+}
+
 type ServerConfig struct {
 	PG                         PostgresConfig
 	CH                         ClickhouseConfig
+	RD                         RedisConfig
 	ServiceAccountEmail        string
 	SymbolsBucket              string
 	SymbolsBucketRegion        string
@@ -210,6 +218,11 @@ func NewConfig() *ServerConfig {
 		log.Println("CLICKHOUSE_READER_DSN env var is not set, cannot start server")
 	}
 
+	valkeyDSN := os.Getenv("VALKEY_DSN")
+	if valkeyDSN == "" {
+		log.Println("VALKEY_DSN env var is not set, caching will not work")
+	}
+
 	smtpHost := os.Getenv("SMTP_HOST")
 	if smtpHost == "" {
 		log.Println("SMTP_HOST env var is not set, emails will not work")
@@ -271,6 +284,9 @@ func NewConfig() *ServerConfig {
 			DSN:       clickhouseDSN,
 			ReaderDSN: clickhouseReaderDSN,
 		},
+		RD: RedisConfig{
+			DSN: valkeyDSN,
+		},
 		ServiceAccountEmail:        serviceAccountEmail,
 		SymbolsBucket:              symbolsBucket,
 		SymbolsBucketRegion:        symbolsBucketRegion,
@@ -379,6 +395,22 @@ func Init(config *ServerConfig) {
 		log.Printf("Unable to create reader CH connection pool: %v\n", err)
 	}
 
+	// init redis client
+	var redisClient *redis.Client
+	if config.RD.DSN != "" {
+		redisOpts, err := redis.ParseURL(config.RD.DSN)
+		if err != nil {
+			log.Printf("Unable to parse Redis connection string: %v\n", err)
+		}
+
+		redisClient = redis.NewClient(redisOpts)
+
+		// test redis connection
+		if err := redisClient.Ping(ctx).Err(); err != nil {
+			log.Printf("Unable to connect to Redis: %v\n", err)
+		}
+	}
+
 	if err := inet.Init(); err != nil {
 		log.Printf("Unable to initialize geo ip lookup system: %v\n", err)
 	}
@@ -407,6 +439,7 @@ func Init(config *ServerConfig) {
 		PgPool:  pgPool,
 		ChPool:  chPool,
 		RchPool: rChPool,
+		Redis:   redisClient,
 		Config:  config,
 		Mail:    mailClient,
 	}
diff --git a/go.work.sum b/go.work.sum
index 255954289..6fabd37c2 100644
--- a/go.work.sum
+++ b/go.work.sum
@@ -213,6 +213,8 @@ github.com/StackExchange/wmi v0.0.0-20190523213315-cbe66965904d/go.mod h1:3eOhrU
 github.com/ajstarks/svgo v0.0.0-20211024235047-1546f124cd8b/go.mod h1:1KcenG0jGWcpt8ov532z81sp/kMMUG485J2InIOyADM=
 github.com/antihax/optional v1.0.0/go.mod h1:uupD/76wgC+ih3iEmQUL+0Ugr19nfwCT1kdvxnR2qWY=
 github.com/apache/arrow/go/v15 v15.0.2/go.mod h1:DGXsR3ajT524njufqf95822i+KTh+yea1jass9YXgjA=
+github.com/bsm/ginkgo/v2 v2.12.0/go.mod h1:SwYbGRRDovPVboqFv0tPTcG1sN61LM1Z4ARdbAV9g4c=
+github.com/bsm/gomega v1.27.10/go.mod h1:JyEr/xRbxbtgWNi8tIEVPUYZ5Dzef52k01W3YH0H+O0=
 github.com/campoy/embedmd v1.0.0/go.mod h1:oxyr9RCiSXg0M3VJ3ks0UGfp98BpSSGr0kpiX3MzVl8=
 github.com/cenkalti/backoff/v4 v4.3.0/go.mod h1:Y3VNntkOUPxTVeUxJ/G5vcM//AlwfmyYozVcomhLiZE=
 github.com/census-instrumentation/opencensus-proto v0.4.1/go.mod h1:4T9NM4+4Vw91VeyqjLS6ao50K5bOcLKN6Q42XnYaRYw=
@@ -382,8 +384,6 @@ github.com/satori/go.uuid v1.2.0/go.mod h1:dA0hQrYB0VpLJoorglMZABFdXlWrHn1NEOzdh
 github.com/shirou/gopsutil v2.19.11+incompatible/go.mod h1:5b4v6he4MtMOwMlS0TUMTu2PcXUg8+E1lC7eC3UO/RA=
 github.com/shirou/gopsutil v3.21.11+incompatible h1:+1+c1VGhc88SSonWP6foOcLhvnKlUeu/erjjvaPEYiI=
 github.com/shirou/gopsutil v3.21.11+incompatible/go.mod h1:5b4v6he4MtMOwMlS0TUMTu2PcXUg8+E1lC7eC3UO/RA=
-github.com/shirou/gopsutil/v4 v4.25.5 h1:rtd9piuSMGeU8g1RMXjZs9y9luK5BwtnG7dZaQUJAsc=
-github.com/shirou/gopsutil/v4 v4.25.5/go.mod h1:PfybzyydfZcN+JMMjkF6Zb8Mq1A/VcogFFg7hj50W9c=
 github.com/shirou/w32 v0.0.0-20160930032740-bb4de0191aa4/go.mod h1:qsXQc7+bwAM3Q1u/4XEfrquwF8Lw7D7y5cD8CuHnfIc=
 github.com/shopspring/decimal v0.0.0-20180709203117-cd690d0c9e24/go.mod h1:M+9NzErvs504Cn4c5DxATwIqPbtswREoFCre64PpcG4=
 github.com/shopspring/decimal v1.2.0/go.mod h1:DKyhrW/HYNuLGql+MJL6WCR6knT2jwCFRcu2hWCYk4o=
@@ -437,8 +437,6 @@ go.uber.org/zap v1.9.1/go.mod h1:vwi/ZaCAaUcBkycHslxD9B2zi4UTXhF60s6SWpuDF0Q=
 go.uber.org/zap v1.10.0/go.mod h1:vwi/ZaCAaUcBkycHslxD9B2zi4UTXhF60s6SWpuDF0Q=
 go.uber.org/zap v1.13.0/go.mod h1:zwrFLgMcdUuIBviXEYEH1YKNaOBnKXsx2IPda5bBwHM=
 go.uber.org/zap v1.27.0/go.mod h1:GB2qFLM7cTU87MWRP2mPIjqfIDnGu+VIO4V/SdhGo2E=
-go.yaml.in/yaml/v3 v3.0.4 h1:tfq32ie2Jv2UxXFdLJdh3jXuOzWiL1fo0bu/FbuKpbc=
-go.yaml.in/yaml/v3 v3.0.4/go.mod h1:DhzuOOF2ATzADvBadXxruRBLzYTpT36CKvDb3+aBEFg=
 golang.org/x/arch v0.0.0-20210923205945-b76863e36670/go.mod h1:5om86z9Hs0C8fWVUuoMHwpExlXzs5Tkyp9hOrfG7pp8=
 golang.org/x/crypto v0.0.0-20190411191339-88737f569e3a/go.mod h1:WFFai1msRO1wXaEeE5yQxYXgSfI8pQAWXbQop6sCtWE=
 golang.org/x/crypto v0.0.0-20190820162420-60c769a6c586/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=

From 0b02afa58a6ecd33d06a7e0adbe7beb7dd55a825 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 20 Nov 2025 13:43:19 +0530
Subject: [PATCH 93/98] feat(backend): implement etags

---
 backend/api/measure/sdkconfig.go | 99 ++++++++++++++++++--------------
 1 file changed, 55 insertions(+), 44 deletions(-)

diff --git a/backend/api/measure/sdkconfig.go b/backend/api/measure/sdkconfig.go
index 4a06b96c4..f869ece3d 100644
--- a/backend/api/measure/sdkconfig.go
+++ b/backend/api/measure/sdkconfig.go
@@ -3,8 +3,10 @@ package measure
 import (
 	"backend/api/server"
 	"context"
+	"encoding/hex"
 	"encoding/json"
 	"fmt"
+	"hash/fnv"
 	"net/http"
 
 	"github.com/gin-gonic/gin"
@@ -17,6 +19,11 @@ const (
 	cacheControlValue  = "max-age=600" // 10 minutes
 )
 
+type CachedSDKConfig struct {
+	Config string `json:"config"`
+	ETag   string `json:"etag"`
+}
+
 // SDK-specific rule types
 type SDKEventRule struct {
 	Id                 uuid.UUID `json:"id"`
@@ -54,46 +61,42 @@ type SDKConfig struct {
 	SessionRules []SDKSessionRule `json:"session_rules"`
 }
 
-// getSDKConfigCacheKey returns the Redis cache key for SDK config
-func getSDKConfigCacheKey(appId uuid.UUID) string {
-	return fmt.Sprintf("sdk_config:%s", appId.String())
+func computeETag(data []byte) string {
+	h := fnv.New64a() 
+	_, _ = h.Write(data)
+	return hex.EncodeToString(h.Sum(nil))
 }
 
-// getSDKConfigFromCache attempts to read SDK config from Redis cache
-func getSDKConfigFromCache(ctx context.Context, appId uuid.UUID) (*SDKConfig, error) {
+func getSDKConfigETag(ctx context.Context, appId uuid.UUID) (string, error) {
 	key := getSDKConfigCacheKey(appId)
+	return server.Server.Redis.HGet(ctx, key, "etag").Result()
+}
 
-	data, err := server.Server.Redis.Get(ctx, key).Result()
-	if err != nil {
-		return nil, err
-	}
-
-	var config SDKConfig
-	if err := json.Unmarshal([]byte(data), &config); err != nil {
-		return nil, fmt.Errorf("failed to unmarshal cached config: %w", err)
-	}
+func getSDKConfigData(ctx context.Context, appId uuid.UUID) (string, error) {
+	key := getSDKConfigCacheKey(appId)
+	return server.Server.Redis.HGet(ctx, key, "data").Result()
+}
 
-	fmt.Println("[SdkConfig]: Accessed SDK config from cache")
-	return &config, nil
+// getSDKConfigCacheKey returns the Redis cache key for SDK config
+func getSDKConfigCacheKey(appId uuid.UUID) string {
+	return fmt.Sprintf("%s:sdk_config", appId.String())
 }
 
-// setSDKConfigToCache stores SDK config in Redis cache
-func setSDKConfigToCache(ctx context.Context, appId uuid.UUID, config *SDKConfig) error {
+// setSDKConfigToCache stores config JSON & ETag
+func setSDKConfigToCache(ctx context.Context, appId uuid.UUID, jsonConfig []byte) (string, error) {
 	key := getSDKConfigCacheKey(appId)
 
-	data, err := json.Marshal(config)
-	if err != nil {
-		return fmt.Errorf("failed to marshal config: %w", err)
-	}
+	etag := computeETag(jsonConfig)
 
-	// Set with no expiration
-	if err := server.Server.Redis.Set(ctx, key, data, 0).Err(); err != nil {
-		return fmt.Errorf("failed to set cache: %w", err)
+	pipe := server.Server.Redis.TxPipeline()
+	pipe.HSet(ctx, key, "etag", etag)
+	pipe.HSet(ctx, key, "data", string(jsonConfig))
+	_, err := pipe.Exec(ctx)
+	if err != nil {
+		return "", fmt.Errorf("failed to store config hash: %w", err)
 	}
 
-	fmt.Println("[SdkConfig]: Setting SDK config to cache")
-
-	return nil
+	return etag, nil
 }
 
 // InvalidateSDKConfigCache deletes the cached SDK config for an app
@@ -104,13 +107,11 @@ func InvalidateSDKConfigCache(ctx context.Context, appId uuid.UUID) error {
 		return fmt.Errorf("failed to delete cache: %w", err)
 	}
 
-	fmt.Println("[SdkConfig]: Invalidate SDK config")
 	return nil
 }
 
 // fetchSDKConfigFromDB fetches SDK config from database
 func fetchSDKConfigFromDB(ctx context.Context, appId uuid.UUID) (*SDKConfig, error) {
-	// Fetch all rule types
 	eventRules, err := GetSDKEventRules(ctx, appId)
 	if err != nil {
 		return nil, fmt.Errorf("error fetching event rules: %w", err)
@@ -126,8 +127,6 @@ func fetchSDKConfigFromDB(ctx context.Context, appId uuid.UUID) (*SDKConfig, err
 		return nil, fmt.Errorf("error fetching session rules: %w", err)
 	}
 
-	fmt.Println("[SdkConfig]: Accessed SDK config from DB")
-
 	return &SDKConfig{
 		EventRules:   eventRules,
 		TraceRules:   traceRules,
@@ -260,13 +259,26 @@ func GetConfig(c *gin.Context) {
 		return
 	}
 
-	// Check cache
-	cachedConfig, err := getSDKConfigFromCache(c.Request.Context(), appId)
-	if err == nil && cachedConfig != nil {
-		// Cache hit
-		c.Header(cacheControlHeader, cacheControlValue)
-		c.JSON(http.StatusOK, cachedConfig)
-		return
+	clientETag := c.GetHeader("If-None-Match")
+
+	redisETag, err := getSDKConfigETag(c.Request.Context(), appId)
+	if err == nil && redisETag != "" {
+		// Same ETag
+		if redisETag == clientETag {
+			c.Header(cacheControlHeader, cacheControlValue)
+			c.Header("ETag", redisETag)
+			c.Status(http.StatusNotModified)
+			return
+		}
+
+		// Different ETag
+		data, err := getSDKConfigData(c.Request.Context(), appId)
+		if err == nil && data != "" {
+			c.Header(cacheControlHeader, cacheControlValue)
+			c.Header("ETag", redisETag)
+			c.Data(http.StatusOK, "application/json", []byte(data))
+			return
+		}
 	}
 
 	// Cache miss
@@ -278,11 +290,10 @@ func GetConfig(c *gin.Context) {
 		return
 	}
 
-	// Update cache
-	if err := setSDKConfigToCache(c.Request.Context(), appId, sdkConfig); err != nil {
-		fmt.Println("failed to cache SDK config:", err)
-	}
+	jsonConfig, _ := json.Marshal(sdkConfig)
+	etag, _ := setSDKConfigToCache(c.Request.Context(), appId, jsonConfig)
 
 	c.Header(cacheControlHeader, cacheControlValue)
-	c.JSON(http.StatusOK, sdkConfig)
+	c.Header("ETag", etag)
+	c.Data(http.StatusOK, "application/json", jsonConfig)
 }

From b03c56fc07214f0162443464c7ead793f5c24d97 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 20 Nov 2025 16:50:36 +0530
Subject: [PATCH 94/98] feat(backend): refactor

change redis to valkey

add comments, make functions private
---
 backend/api/measure/sdkconfig.go | 48 +++++++++++++++++++-------------
 backend/api/server/server.go     | 28 +++++++++----------
 2 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/backend/api/measure/sdkconfig.go b/backend/api/measure/sdkconfig.go
index f869ece3d..d336cbd95 100644
--- a/backend/api/measure/sdkconfig.go
+++ b/backend/api/measure/sdkconfig.go
@@ -61,25 +61,33 @@ type SDKConfig struct {
 	SessionRules []SDKSessionRule `json:"session_rules"`
 }
 
+// computeETag returns a hex-encoded
+// FNV-1a hash of the given data.
 func computeETag(data []byte) string {
-	h := fnv.New64a() 
+	h := fnv.New64a()
 	_, _ = h.Write(data)
 	return hex.EncodeToString(h.Sum(nil))
 }
 
+// getSDKConfigETag retrieves the
+// ETag value for the given app
+// ID from Valkey.
 func getSDKConfigETag(ctx context.Context, appId uuid.UUID) (string, error) {
 	key := getSDKConfigCacheKey(appId)
-	return server.Server.Redis.HGet(ctx, key, "etag").Result()
+	return server.Server.Valkey.HGet(ctx, key, "etag").Result()
 }
 
+// getSDKConfigData retrieves the
+// config payload for the given
+// app ID from Valkey.
 func getSDKConfigData(ctx context.Context, appId uuid.UUID) (string, error) {
 	key := getSDKConfigCacheKey(appId)
-	return server.Server.Redis.HGet(ctx, key, "data").Result()
+	return server.Server.Valkey.HGet(ctx, key, "data").Result()
 }
 
 // getSDKConfigCacheKey returns the Redis cache key for SDK config
 func getSDKConfigCacheKey(appId uuid.UUID) string {
-	return fmt.Sprintf("%s:sdk_config", appId.String())
+	return fmt.Sprintf("{%s}:sdk_config", appId.String())
 }
 
 // setSDKConfigToCache stores config JSON & ETag
@@ -88,7 +96,7 @@ func setSDKConfigToCache(ctx context.Context, appId uuid.UUID, jsonConfig []byte
 
 	etag := computeETag(jsonConfig)
 
-	pipe := server.Server.Redis.TxPipeline()
+	pipe := server.Server.Valkey.TxPipeline()
 	pipe.HSet(ctx, key, "etag", etag)
 	pipe.HSet(ctx, key, "data", string(jsonConfig))
 	_, err := pipe.Exec(ctx)
@@ -103,7 +111,7 @@ func setSDKConfigToCache(ctx context.Context, appId uuid.UUID, jsonConfig []byte
 func InvalidateSDKConfigCache(ctx context.Context, appId uuid.UUID) error {
 	key := getSDKConfigCacheKey(appId)
 
-	if err := server.Server.Redis.Del(ctx, key).Err(); err != nil {
+	if err := server.Server.Valkey.Del(ctx, key).Err(); err != nil {
 		return fmt.Errorf("failed to delete cache: %w", err)
 	}
 
@@ -112,17 +120,17 @@ func InvalidateSDKConfigCache(ctx context.Context, appId uuid.UUID) error {
 
 // fetchSDKConfigFromDB fetches SDK config from database
 func fetchSDKConfigFromDB(ctx context.Context, appId uuid.UUID) (*SDKConfig, error) {
-	eventRules, err := GetSDKEventRules(ctx, appId)
+	eventRules, err := getSDKEventRules(ctx, appId)
 	if err != nil {
 		return nil, fmt.Errorf("error fetching event rules: %w", err)
 	}
 
-	traceRules, err := GetSDKTraceRules(ctx, appId)
+	traceRules, err := getSDKTraceRules(ctx, appId)
 	if err != nil {
 		return nil, fmt.Errorf("error fetching trace rules: %w", err)
 	}
 
-	sessionRules, err := GetSDKSessionRules(ctx, appId)
+	sessionRules, err := getSDKSessionRules(ctx, appId)
 	if err != nil {
 		return nil, fmt.Errorf("error fetching session rules: %w", err)
 	}
@@ -134,8 +142,8 @@ func fetchSDKConfigFromDB(ctx context.Context, appId uuid.UUID) (*SDKConfig, err
 	}, nil
 }
 
-// GetSDKEventRules queries event targeting rules optimized for SDK
-func GetSDKEventRules(ctx context.Context, appId uuid.UUID) ([]SDKEventRule, error) {
+// getSDKEventRules queries event targeting rules optimized for SDK
+func getSDKEventRules(ctx context.Context, appId uuid.UUID) ([]SDKEventRule, error) {
 	stmt := sqlf.PostgreSQL.From("event_targeting_rules").
 		Select("id").
 		Select("name").
@@ -176,8 +184,8 @@ func GetSDKEventRules(ctx context.Context, appId uuid.UUID) ([]SDKEventRule, err
 	return rules, rows.Err()
 }
 
-// GetSDKTraceRules queries trace targeting rules optimized for SDK
-func GetSDKTraceRules(ctx context.Context, appId uuid.UUID) ([]SDKTraceRule, error) {
+// getSDKTraceRules queries trace targeting rules optimized for SDK
+func getSDKTraceRules(ctx context.Context, appId uuid.UUID) ([]SDKTraceRule, error) {
 	stmt := sqlf.PostgreSQL.From("trace_targeting_rules").
 		Select("id").
 		Select("name").
@@ -214,8 +222,8 @@ func GetSDKTraceRules(ctx context.Context, appId uuid.UUID) ([]SDKTraceRule, err
 	return rules, rows.Err()
 }
 
-// GetSDKSessionRules queries session targeting rules optimized for SDK
-func GetSDKSessionRules(ctx context.Context, appId uuid.UUID) ([]SDKSessionRule, error) {
+// getSDKSessionRules queries session targeting rules optimized for SDK
+func getSDKSessionRules(ctx context.Context, appId uuid.UUID) ([]SDKSessionRule, error) {
 	stmt := sqlf.PostgreSQL.From("session_targeting_rules").
 		Select("id").
 		Select("name").
@@ -261,12 +269,12 @@ func GetConfig(c *gin.Context) {
 
 	clientETag := c.GetHeader("If-None-Match")
 
-	redisETag, err := getSDKConfigETag(c.Request.Context(), appId)
-	if err == nil && redisETag != "" {
+	cachedETag, err := getSDKConfigETag(c.Request.Context(), appId)
+	if err == nil && cachedETag != "" {
 		// Same ETag
-		if redisETag == clientETag {
+		if cachedETag == clientETag {
 			c.Header(cacheControlHeader, cacheControlValue)
-			c.Header("ETag", redisETag)
+			c.Header("ETag", cachedETag)
 			c.Status(http.StatusNotModified)
 			return
 		}
@@ -275,7 +283,7 @@ func GetConfig(c *gin.Context) {
 		data, err := getSDKConfigData(c.Request.Context(), appId)
 		if err == nil && data != "" {
 			c.Header(cacheControlHeader, cacheControlValue)
-			c.Header("ETag", redisETag)
+			c.Header("ETag", cachedETag)
 			c.Data(http.StatusOK, "application/json", []byte(data))
 			return
 		}
diff --git a/backend/api/server/server.go b/backend/api/server/server.go
index 5982b36bf..719bdab08 100644
--- a/backend/api/server/server.go
+++ b/backend/api/server/server.go
@@ -17,7 +17,7 @@ import (
 	"github.com/gin-gonic/gin"
 	"github.com/jackc/pgx/v5"
 	"github.com/jackc/pgx/v5/pgxpool"
-	"github.com/redis/go-redis/v9"
+	valkey "github.com/redis/go-redis/v9"
 	"github.com/wneessen/go-mail"
 	"go.opentelemetry.io/otel"
 	"go.opentelemetry.io/otel/attribute"
@@ -35,7 +35,7 @@ type server struct {
 	PgPool  *pgxpool.Pool
 	ChPool  driver.Conn
 	RchPool driver.Conn
-	Redis   *redis.Client
+	Valkey  *valkey.Client
 	Mail    *mail.Client
 	Config  *ServerConfig
 }
@@ -51,15 +51,15 @@ type ClickhouseConfig struct {
 	ReaderDSN string
 }
 
-type RedisConfig struct {
-	/* connection string of the redis instance */
+type ValkeyConfig struct {
+	/* connection string of the valkey instance */
 	DSN string
 }
 
 type ServerConfig struct {
 	PG                         PostgresConfig
 	CH                         ClickhouseConfig
-	RD                         RedisConfig
+	RD                         ValkeyConfig
 	ServiceAccountEmail        string
 	SymbolsBucket              string
 	SymbolsBucketRegion        string
@@ -284,7 +284,7 @@ func NewConfig() *ServerConfig {
 			DSN:       clickhouseDSN,
 			ReaderDSN: clickhouseReaderDSN,
 		},
-		RD: RedisConfig{
+		RD: ValkeyConfig{
 			DSN: valkeyDSN,
 		},
 		ServiceAccountEmail:        serviceAccountEmail,
@@ -395,19 +395,19 @@ func Init(config *ServerConfig) {
 		log.Printf("Unable to create reader CH connection pool: %v\n", err)
 	}
 
-	// init redis client
-	var redisClient *redis.Client
+	// init valkey client
+	var valkeyClient *valkey.Client
 	if config.RD.DSN != "" {
-		redisOpts, err := redis.ParseURL(config.RD.DSN)
+		redisOpts, err := valkey.ParseURL(config.RD.DSN)
 		if err != nil {
-			log.Printf("Unable to parse Redis connection string: %v\n", err)
+			log.Printf("Unable to parse Valkey connection string: %v\n", err)
 		}
 
-		redisClient = redis.NewClient(redisOpts)
+		valkeyClient = valkey.NewClient(redisOpts)
 
 		// test redis connection
-		if err := redisClient.Ping(ctx).Err(); err != nil {
-			log.Printf("Unable to connect to Redis: %v\n", err)
+		if err := valkeyClient.Ping(ctx).Err(); err != nil {
+			log.Printf("Unable to connect to Valkey: %v\n", err)
 		}
 	}
 
@@ -439,7 +439,7 @@ func Init(config *ServerConfig) {
 		PgPool:  pgPool,
 		ChPool:  chPool,
 		RchPool: rChPool,
-		Redis:   redisClient,
+		Valkey:  valkeyClient,
 		Config:  config,
 		Mail:    mailClient,
 	}

From 8a517aad391c97f60c108b7de6fcb3f71c8afb07 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Thu, 20 Nov 2025 17:00:42 +0530
Subject: [PATCH 95/98] feat(backend): improve valkey compose config

---
 self-host/compose.prod.yml | 7 ++-----
 self-host/compose.yml      | 4 ++--
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/self-host/compose.prod.yml b/self-host/compose.prod.yml
index a46c94f45..a4e5dcc0f 100644
--- a/self-host/compose.prod.yml
+++ b/self-host/compose.prod.yml
@@ -144,12 +144,9 @@ services:
       --maxmemory-policy allkeys-lru
       --io-threads 4
       --io-threads-do-reads yes
-      --save ""
-      --appendonly no
+      --appendonly yes
+      --appendfsync everysec
       --requirepass ${REDIS_PASSWORD}
-      --rename-command FLUSHDB ""
-      --rename-command FLUSHALL ""
-      --rename-command CONFIG ""
     restart: unless-stopped
     logging:
       driver: local
diff --git a/self-host/compose.yml b/self-host/compose.yml
index 43c6b9784..0f1c4b859 100644
--- a/self-host/compose.yml
+++ b/self-host/compose.yml
@@ -457,8 +457,8 @@ services:
       --maxmemory-policy allkeys-lru
       --io-threads 4
       --io-threads-do-reads yes
-      --save ""
-      --appendonly no
+      --appendonly yes
+      --appendfsync everysec
     healthcheck:
       test: ["CMD", "valkey-cli", "ping"]
       interval: 5s

From acde8092c14725c56608c92454a1140598b8881b Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Fri, 21 Nov 2025 11:14:08 +0530
Subject: [PATCH 96/98] feat(backend): reimplment caching with valkey-go client

---
 backend/api/go.mod               |  3 +-
 backend/api/go.sum               |  8 ++--
 backend/api/measure/sdkconfig.go | 48 ++++++++++++++-----
 backend/api/server/server.go     | 81 ++++++++++++++++++--------------
 go.work.sum                      |  5 +-
 self-host/compose.prod.yml       |  2 -
 self-host/compose.yml            |  6 +--
 self-host/config.sh              | 37 ++++++++++-----
 8 files changed, 117 insertions(+), 73 deletions(-)

diff --git a/backend/api/go.mod b/backend/api/go.mod
index 67557ed2d..535c2435e 100644
--- a/backend/api/go.mod
+++ b/backend/api/go.mod
@@ -16,7 +16,7 @@ require (
 	github.com/klauspost/compress v1.18.0
 	github.com/leporo/sqlf v1.4.0
 	github.com/oschwald/maxminddb-golang v1.13.1
-	github.com/redis/go-redis/v9 v9.17.0
+	github.com/valkey-io/valkey-go v1.0.68
 	github.com/wneessen/go-mail v0.7.1
 	github.com/yourbasic/graph v0.0.0-20210606180040-8ecfec1c2869
 	go.opentelemetry.io/contrib/instrumentation/github.com/gin-gonic/gin/otelgin v0.62.0
@@ -57,7 +57,6 @@ require (
 	github.com/cespare/xxhash/v2 v2.3.0 // indirect
 	github.com/cloudwego/base64x v0.1.5 // indirect
 	github.com/cncf/xds/go v0.0.0-20250501225837-2ac532fd4443 // indirect
-	github.com/dgryski/go-rendezvous v0.0.0-20200823014737-9f7001d12a5f // indirect
 	github.com/envoyproxy/go-control-plane/envoy v1.32.4 // indirect
 	github.com/envoyproxy/protoc-gen-validate v1.2.1 // indirect
 	github.com/felixge/httpsnoop v1.0.4 // indirect
diff --git a/backend/api/go.sum b/backend/api/go.sum
index c7b4fb687..70ec69b0e 100644
--- a/backend/api/go.sum
+++ b/backend/api/go.sum
@@ -76,8 +76,6 @@ github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSs
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc h1:U9qPSI2PIWSS1VwoXQT9A3Wy9MM3WgvqSxFWenqJduM=
 github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/dgryski/go-rendezvous v0.0.0-20200823014737-9f7001d12a5f h1:lO4WD4F/rVNCu3HqELle0jiPLLBs70cWOduZpkS1E78=
-github.com/dgryski/go-rendezvous v0.0.0-20200823014737-9f7001d12a5f/go.mod h1:cuUVRXasLTGF7a8hSLbxyZXjz+1KgoB3wDUb6vlszIc=
 github.com/envoyproxy/go-control-plane v0.13.4 h1:zEqyPVyku6IvWCFwux4x9RxkLOMUL+1vC9xUFv5l2/M=
 github.com/envoyproxy/go-control-plane v0.13.4/go.mod h1:kDfuBlDVsSj2MjrLEtRWtHlsWIFcGyB2RMO44Dc5GZA=
 github.com/envoyproxy/go-control-plane/envoy v1.32.4 h1:jb83lalDRZSpPWW2Z7Mck/8kXZ5CQAFYVjQcdVIr83A=
@@ -179,6 +177,8 @@ github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd/go.mod h1:6dJ
 github.com/modern-go/reflect2 v1.0.2 h1:xBagoLtFs94CBntxluKeaWgTMpvLxC4ur3nMaC9Gz0M=
 github.com/modern-go/reflect2 v1.0.2/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjYzDa0/r8luk=
 github.com/montanaflynn/stats v0.0.0-20171201202039-1bf9dbcd8cbe/go.mod h1:wL8QJuTMNUDYhXwkmfOly8iTdp5TEcJFWZD2D7SIkUc=
+github.com/onsi/gomega v1.36.2 h1:koNYke6TVk6ZmnyHrCXba/T/MoLBXFjeC1PtvYgw0A8=
+github.com/onsi/gomega v1.36.2/go.mod h1:DdwyADRjrc825LhMEkD76cHR5+pUnjhUN8GlHlRPHzY=
 github.com/oschwald/maxminddb-golang v1.13.1 h1:G3wwjdN9JmIK2o/ermkHM+98oX5fS+k5MbwsmL4MRQE=
 github.com/oschwald/maxminddb-golang v1.13.1/go.mod h1:K4pgV9N/GcK694KSTmVSDTODk4IsCNThNdTmnaBZ/F8=
 github.com/paulmach/orb v0.12.0 h1:z+zOwjmG3MyEEqzv92UN49Lg1JFYx0L9GpGKNVDKk1s=
@@ -194,8 +194,6 @@ github.com/planetscale/vtprotobuf v0.6.1-0.20240319094008-0393e58bdf10/go.mod h1
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2 h1:Jamvg5psRIccs7FGNTlIRMkT8wgtp5eCXdBlqhYGL6U=
 github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
-github.com/redis/go-redis/v9 v9.17.0 h1:K6E+ZlYN95KSMmZeEQPbU/c++wfmEvfFB17yEAq/VhM=
-github.com/redis/go-redis/v9 v9.17.0/go.mod h1:u410H11HMLoB+TP67dz8rL9s6QW2j76l0//kSOd3370=
 github.com/rogpeppe/go-internal v1.13.1 h1:KvO1DLK/DRN07sQ1LQKScxyZJuNnedQ5/wKSR38lUII=
 github.com/rogpeppe/go-internal v1.13.1/go.mod h1:uMEvuHeurkdAXX61udpOXGD/AzZDWNMNyH2VO9fmH0o=
 github.com/segmentio/asm v1.2.1 h1:DTNbBqs57ioxAD4PrArqftgypG4/qNpXoJx8TVXxPR0=
@@ -221,6 +219,8 @@ github.com/twitchyliquid64/golang-asm v0.15.1 h1:SU5vSMR7hnwNxj24w34ZyCi/FmDZTkS
 github.com/twitchyliquid64/golang-asm v0.15.1/go.mod h1:a1lVb/DtPvCB8fslRZhAngC2+aY1QWCk3Cedj/Gdt08=
 github.com/ugorji/go/codec v1.3.0 h1:Qd2W2sQawAfG8XSvzwhBeoGq71zXOC/Q1E9y/wUcsUA=
 github.com/ugorji/go/codec v1.3.0/go.mod h1:pRBVtBSKl77K30Bv8R2P+cLSGaTtex6fsA2Wjqmfxj4=
+github.com/valkey-io/valkey-go v1.0.68 h1:bTbfonp49b41DqrF30q+y2JL3gcbjd2IiacFAtO4JBA=
+github.com/valkey-io/valkey-go v1.0.68/go.mod h1:bHmwjIEOrGq/ubOJfh5uMRs7Xj6mV3mQ/ZXUbmqpjqY=
 github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
 github.com/wneessen/go-mail v0.7.1 h1:rvy63sp14N06/kdGqCYwW8Na5gDCXjTQM1E7So4PuKk=
diff --git a/backend/api/measure/sdkconfig.go b/backend/api/measure/sdkconfig.go
index d336cbd95..d9124b914 100644
--- a/backend/api/measure/sdkconfig.go
+++ b/backend/api/measure/sdkconfig.go
@@ -12,6 +12,7 @@ import (
 	"github.com/gin-gonic/gin"
 	"github.com/google/uuid"
 	"github.com/leporo/sqlf"
+	"github.com/valkey-io/valkey-go"
 )
 
 const (
@@ -73,34 +74,55 @@ func computeETag(data []byte) string {
 // ETag value for the given app
 // ID from Valkey.
 func getSDKConfigETag(ctx context.Context, appId uuid.UUID) (string, error) {
+	vk := server.Server.VK
 	key := getSDKConfigCacheKey(appId)
-	return server.Server.Valkey.HGet(ctx, key, "etag").Result()
+	cmd := vk.B().Hget().Key(key).Field("etag").Build()
+	result := vk.Do(ctx, cmd)
+	if err := result.Error(); err != nil {
+		if valkey.IsValkeyNil(err) {
+			return "", nil // Cache miss is not an error
+		}
+		return "", err
+	}
+	return result.ToString()
 }
 
 // getSDKConfigData retrieves the
 // config payload for the given
 // app ID from Valkey.
 func getSDKConfigData(ctx context.Context, appId uuid.UUID) (string, error) {
+	vk := server.Server.VK
 	key := getSDKConfigCacheKey(appId)
-	return server.Server.Valkey.HGet(ctx, key, "data").Result()
+	cmd := vk.B().Hget().Key(key).Field("data").Build()
+	result := vk.Do(ctx, cmd)
+	if err := result.Error(); err != nil {
+		if valkey.IsValkeyNil(err) {
+			return "", nil
+		}
+		return "", err
+	}
+
+	fmt.Println("[SDKCONFIG] accessed Cache")
+	return result.ToString()
 }
 
 // getSDKConfigCacheKey returns the Redis cache key for SDK config
 func getSDKConfigCacheKey(appId uuid.UUID) string {
-	return fmt.Sprintf("{%s}:sdk_config", appId.String())
+	return fmt.Sprintf("sdk_config:{%s}", appId.String())
 }
 
 // setSDKConfigToCache stores config JSON & ETag
 func setSDKConfigToCache(ctx context.Context, appId uuid.UUID, jsonConfig []byte) (string, error) {
+	vk := server.Server.VK
 	key := getSDKConfigCacheKey(appId)
-
 	etag := computeETag(jsonConfig)
 
-	pipe := server.Server.Valkey.TxPipeline()
-	pipe.HSet(ctx, key, "etag", etag)
-	pipe.HSet(ctx, key, "data", string(jsonConfig))
-	_, err := pipe.Exec(ctx)
-	if err != nil {
+	cmd := vk.B().Hmset().Key(key).FieldValue().
+		FieldValue("etag", etag).
+		FieldValue("data", string(jsonConfig)).
+		Build()
+
+	if err := vk.Do(ctx, cmd).Error(); err != nil {
 		return "", fmt.Errorf("failed to store config hash: %w", err)
 	}
 
@@ -109,12 +131,12 @@ func setSDKConfigToCache(ctx context.Context, appId uuid.UUID, jsonConfig []byte
 
 // InvalidateSDKConfigCache deletes the cached SDK config for an app
 func InvalidateSDKConfigCache(ctx context.Context, appId uuid.UUID) error {
+	vk := server.Server.VK
 	key := getSDKConfigCacheKey(appId)
-
-	if err := server.Server.Valkey.Del(ctx, key).Err(); err != nil {
+	cmd := vk.B().Del().Key(key).Build()
+	if err := vk.Do(ctx, cmd).Error(); err != nil {
 		return fmt.Errorf("failed to delete cache: %w", err)
 	}
-
 	return nil
 }
 
@@ -135,6 +157,8 @@ func fetchSDKConfigFromDB(ctx context.Context, appId uuid.UUID) (*SDKConfig, err
 		return nil, fmt.Errorf("error fetching session rules: %w", err)
 	}
 
+	fmt.Println("[SDKCONFIG] accessed DB")
+
 	return &SDKConfig{
 		EventRules:   eventRules,
 		TraceRules:   traceRules,
diff --git a/backend/api/server/server.go b/backend/api/server/server.go
index 719bdab08..f00b19119 100644
--- a/backend/api/server/server.go
+++ b/backend/api/server/server.go
@@ -2,7 +2,6 @@ package server
 
 import (
 	"backend/api/allowlist"
-	"backend/api/inet"
 	"context"
 	"fmt"
 	"log"
@@ -17,7 +16,7 @@ import (
 	"github.com/gin-gonic/gin"
 	"github.com/jackc/pgx/v5"
 	"github.com/jackc/pgx/v5/pgxpool"
-	valkey "github.com/redis/go-redis/v9"
+	"github.com/valkey-io/valkey-go"
 	"github.com/wneessen/go-mail"
 	"go.opentelemetry.io/otel"
 	"go.opentelemetry.io/otel/attribute"
@@ -35,8 +34,8 @@ type server struct {
 	PgPool  *pgxpool.Pool
 	ChPool  driver.Conn
 	RchPool driver.Conn
-	Valkey  *valkey.Client
 	Mail    *mail.Client
+	VK      valkey.Client
 	Config  *ServerConfig
 }
 
@@ -52,14 +51,15 @@ type ClickhouseConfig struct {
 }
 
 type ValkeyConfig struct {
-	/* connection string of the valkey instance */
-	DSN string
+	Host     string
+	Port     int
+	Password string
 }
 
 type ServerConfig struct {
 	PG                         PostgresConfig
 	CH                         ClickhouseConfig
-	RD                         ValkeyConfig
+	VK                         ValkeyConfig
 	ServiceAccountEmail        string
 	SymbolsBucket              string
 	SymbolsBucketRegion        string
@@ -218,11 +218,23 @@ func NewConfig() *ServerConfig {
 		log.Println("CLICKHOUSE_READER_DSN env var is not set, cannot start server")
 	}
 
-	valkeyDSN := os.Getenv("VALKEY_DSN")
-	if valkeyDSN == "" {
-		log.Println("VALKEY_DSN env var is not set, caching will not work")
+	valkeyHost := os.Getenv("VALKEY_HOST")
+	if valkeyHost == "" {
+		log.Println("VALKEY_HOST env var is not set, caching will not work")
+	}
+
+	valkeyPortStr := os.Getenv("VALKEY_PORT")
+	if valkeyPortStr == "" {
+		log.Println("VALKEY_PORT env var is not set, caching will not work")
 	}
 
+	valkeyPort, err := strconv.Atoi(valkeyPortStr)
+	if err != nil {
+		log.Fatalf("Invalid VALKEY_PORT value: %v", err)
+	}
+
+	valkeyPassword := os.Getenv("VALKEY_PASSWORD")
+
 	smtpHost := os.Getenv("SMTP_HOST")
 	if smtpHost == "" {
 		log.Println("SMTP_HOST env var is not set, emails will not work")
@@ -284,8 +296,10 @@ func NewConfig() *ServerConfig {
 			DSN:       clickhouseDSN,
 			ReaderDSN: clickhouseReaderDSN,
 		},
-		RD: ValkeyConfig{
-			DSN: valkeyDSN,
+		VK: ValkeyConfig{
+			Host:     valkeyHost,
+			Port:     valkeyPort,
+			Password: valkeyPassword,
 		},
 		ServiceAccountEmail:        serviceAccountEmail,
 		SymbolsBucket:              symbolsBucket,
@@ -341,12 +355,12 @@ func WaitForPg(ctx context.Context, pgPool *pgxpool.Pool, timeout time.Duration)
 	}
 }
 
-func Init(config *ServerConfig) {
+func Init(cfg *ServerConfig) {
 	ctx := context.Background()
 	var pgPool *pgxpool.Pool
 
 	// read/write pool
-	oConfig, err := pgxpool.ParseConfig(config.PG.DSN)
+	oConfig, err := pgxpool.ParseConfig(cfg.PG.DSN)
 	if err != nil {
 		log.Printf("Unable to parse postgres connection string: %v\n", err)
 	}
@@ -364,12 +378,12 @@ func Init(config *ServerConfig) {
 		fmt.Printf("Postgres pool not ready: %v\n", err)
 	}
 
-	chOpts, err := clickhouse.ParseDSN(config.CH.DSN)
+	chOpts, err := clickhouse.ParseDSN(cfg.CH.DSN)
 	if err != nil {
 		log.Printf("Unable to parse CH connection string: %v\n", err)
 	}
 
-	rChOpts, err := clickhouse.ParseDSN(config.CH.ReaderDSN)
+	rChOpts, err := clickhouse.ParseDSN(cfg.CH.ReaderDSN)
 	if err != nil {
 		log.Printf("unable to parse reader CH connection string %v\n", err)
 	}
@@ -396,35 +410,32 @@ func Init(config *ServerConfig) {
 	}
 
 	// init valkey client
-	var valkeyClient *valkey.Client
-	if config.RD.DSN != "" {
-		redisOpts, err := valkey.ParseURL(config.RD.DSN)
-		if err != nil {
-			log.Printf("Unable to parse Valkey connection string: %v\n", err)
-		}
-
-		valkeyClient = valkey.NewClient(redisOpts)
+	addr := fmt.Sprintf("%s:%d", cfg.VK.Host, cfg.VK.Port)
+	options := valkey.ClientOption{
+		InitAddress: []string{addr},
+	}
 
-		// test redis connection
-		if err := valkeyClient.Ping(ctx).Err(); err != nil {
-			log.Printf("Unable to connect to Valkey: %v\n", err)
-		}
+	if cfg.VK.Password != "" {
+		options.Password = cfg.VK.Password
 	}
+	options.ConnWriteTimeout = 30 * time.Second
+	options.ClientName = "measure-api"
 
-	if err := inet.Init(); err != nil {
-		log.Printf("Unable to initialize geo ip lookup system: %v\n", err)
+	vkClient, err := valkey.NewClient(options)
+	if err != nil {
+		log.Printf("failed to create valkey client: %w", err)
 	}
 
 	// init email client
 	var mailClient *mail.Client
-	if config.SmtpHost != "" || config.SmtpPort != "" || config.SmtpUser != "" || config.SmtpPassword != "" {
-		smtpConfigPort, err := strconv.Atoi(config.SmtpPort)
+	if cfg.SmtpHost != "" || cfg.SmtpPort != "" || cfg.SmtpUser != "" || cfg.SmtpPassword != "" {
+		smtpConfigPort, err := strconv.Atoi(cfg.SmtpPort)
 		if err != nil {
 			log.Printf("Invalid smtp port: %v\n", err)
 		}
 
-		mailClient, err = mail.NewClient(config.SmtpHost, mail.WithPort(smtpConfigPort), mail.WithSMTPAuth(mail.SMTPAuthPlain),
-			mail.WithUsername(config.SmtpUser), mail.WithPassword(config.SmtpPassword))
+		mailClient, err = mail.NewClient(cfg.SmtpHost, mail.WithPort(smtpConfigPort), mail.WithSMTPAuth(mail.SMTPAuthPlain),
+			mail.WithUsername(cfg.SmtpUser), mail.WithPassword(cfg.SmtpPassword))
 		if err != nil {
 			log.Printf("failed to create email client: %v\n", err)
 		}
@@ -439,8 +450,8 @@ func Init(config *ServerConfig) {
 		PgPool:  pgPool,
 		ChPool:  chPool,
 		RchPool: rChPool,
-		Valkey:  valkeyClient,
-		Config:  config,
+		Config:  cfg,
+		VK:      vkClient,
 		Mail:    mailClient,
 	}
 }
diff --git a/go.work.sum b/go.work.sum
index 6fabd37c2..a01f13963 100644
--- a/go.work.sum
+++ b/go.work.sum
@@ -213,8 +213,6 @@ github.com/StackExchange/wmi v0.0.0-20190523213315-cbe66965904d/go.mod h1:3eOhrU
 github.com/ajstarks/svgo v0.0.0-20211024235047-1546f124cd8b/go.mod h1:1KcenG0jGWcpt8ov532z81sp/kMMUG485J2InIOyADM=
 github.com/antihax/optional v1.0.0/go.mod h1:uupD/76wgC+ih3iEmQUL+0Ugr19nfwCT1kdvxnR2qWY=
 github.com/apache/arrow/go/v15 v15.0.2/go.mod h1:DGXsR3ajT524njufqf95822i+KTh+yea1jass9YXgjA=
-github.com/bsm/ginkgo/v2 v2.12.0/go.mod h1:SwYbGRRDovPVboqFv0tPTcG1sN61LM1Z4ARdbAV9g4c=
-github.com/bsm/gomega v1.27.10/go.mod h1:JyEr/xRbxbtgWNi8tIEVPUYZ5Dzef52k01W3YH0H+O0=
 github.com/campoy/embedmd v1.0.0/go.mod h1:oxyr9RCiSXg0M3VJ3ks0UGfp98BpSSGr0kpiX3MzVl8=
 github.com/cenkalti/backoff/v4 v4.3.0/go.mod h1:Y3VNntkOUPxTVeUxJ/G5vcM//AlwfmyYozVcomhLiZE=
 github.com/census-instrumentation/opencensus-proto v0.4.1/go.mod h1:4T9NM4+4Vw91VeyqjLS6ao50K5bOcLKN6Q42XnYaRYw=
@@ -364,6 +362,7 @@ github.com/moby/sys/user v0.4.0/go.mod h1:bG+tYYYJgaMtRKgEmuueC0hJEAZWwtIbZTB+85
 github.com/moby/sys/userns v0.1.0/go.mod h1:IHUYgu/kao6N8YZlp9Cf444ySSvCmDlmzUcYfDHOl28=
 github.com/moby/term v0.5.0/go.mod h1:8FzsFHVUBGZdbDsJw/ot+X+d5HLUbvklYLJ9uGfcI3Y=
 github.com/morikuni/aec v1.0.0/go.mod h1:BbKIizmSmc5MMPqRYbxO4ZU0S0+P200+tUnFx7PXmsc=
+github.com/onsi/gomega v1.36.2/go.mod h1:DdwyADRjrc825LhMEkD76cHR5+pUnjhUN8GlHlRPHzY=
 github.com/opencontainers/go-digest v1.0.0/go.mod h1:0JzlMkj0TRzQZfJkVvzbP0HBR3IKzErnv2BNG4W4MAM=
 github.com/opencontainers/image-spec v1.1.1/go.mod h1:qpqAh3Dmcf36wStyyWU+kCeDgrGnAve2nCC8+7h8Q0M=
 github.com/pascaldekloe/name v1.0.1/go.mod h1:Z//MfYJnH4jVpQ9wkclwu2I2MkHmXTlT9wR5UZScttM=
@@ -399,6 +398,8 @@ github.com/testcontainers/testcontainers-go v0.37.0/go.mod h1:QPzbxZhQ6Bclip9igj
 github.com/testcontainers/testcontainers-go v0.38.0/go.mod h1:C52c9MoHpWO+C4aqmgSU+hxlR5jlEayWtgYrb8Pzz1w=
 github.com/tklauser/go-sysconf v0.3.12/go.mod h1:Ho14jnntGE1fpdOqQEEaiKRpvIavV0hSfmBq8nJbHYI=
 github.com/tklauser/numcpus v0.6.1/go.mod h1:1XfjsgE2zo8GVw7POkMbHENHzVg3GzmoZ9fESEdAacY=
+github.com/valkey-io/valkey-go v1.0.68 h1:bTbfonp49b41DqrF30q+y2JL3gcbjd2IiacFAtO4JBA=
+github.com/valkey-io/valkey-go v1.0.68/go.mod h1:bHmwjIEOrGq/ubOJfh5uMRs7Xj6mV3mQ/ZXUbmqpjqY=
 github.com/yuin/goldmark v1.1.25/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 github.com/yuin/goldmark v1.1.32/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 github.com/zeebo/xxh3 v1.0.2/go.mod h1:5NWz9Sef7zIDm2JHfFlcQvNekmcEl9ekUZQQKCYaDcA=
diff --git a/self-host/compose.prod.yml b/self-host/compose.prod.yml
index a4e5dcc0f..15e80956b 100644
--- a/self-host/compose.prod.yml
+++ b/self-host/compose.prod.yml
@@ -142,8 +142,6 @@ services:
       valkey-server
       --maxmemory 256mb
       --maxmemory-policy allkeys-lru
-      --io-threads 4
-      --io-threads-do-reads yes
       --appendonly yes
       --appendfsync everysec
       --requirepass ${REDIS_PASSWORD}
diff --git a/self-host/compose.yml b/self-host/compose.yml
index 0f1c4b859..394268ed3 100644
--- a/self-host/compose.yml
+++ b/self-host/compose.yml
@@ -64,7 +64,9 @@ services:
       - POSTGRES_DSN=${POSTGRES_DSN}
       - CLICKHOUSE_DSN=${CLICKHOUSE_DSN}
       - CLICKHOUSE_READER_DSN=${CLICKHOUSE_READER_DSN}
-      - VALKEY_DSN=${VALKEY_DSN}   
+      - VALKEY_PORT=${VALKEY_PORT}
+      - VALKEY_HOST=${VALKEY_HOST}
+      - VALKEY_PASSWORD=${VALKEY_PASSWORD} 
       - AWS_ENDPOINT_URL=${AWS_ENDPOINT_URL}
       - SYMBOLS_S3_BUCKET=${SYMBOLS_S3_BUCKET}
       - SYMBOLS_S3_BUCKET_REGION=${SYMBOLS_S3_BUCKET_REGION}
@@ -455,8 +457,6 @@ services:
       valkey-server
       --maxmemory 256mb
       --maxmemory-policy allkeys-lru
-      --io-threads 4
-      --io-threads-do-reads yes
       --appendonly yes
       --appendfsync everysec
     healthcheck:
diff --git a/self-host/config.sh b/self-host/config.sh
index 74e19ba5a..ee1da1f26 100755
--- a/self-host/config.sh
+++ b/self-host/config.sh
@@ -198,8 +198,9 @@ CLICKHOUSE_DSN=clickhouse://\${CLICKHOUSE_OPERATOR_USER}:\${CLICKHOUSE_OPERATOR_
 CLICKHOUSE_READER_DSN=clickhouse://\${CLICKHOUSE_READER_USER}:\${CLICKHOUSE_READER_PASSWORD}@clickhouse:9000/measure
 CLICKHOUSE_MIGRATION_URL=clickhouse://\${CLICKHOUSE_ADMIN_USER}:\${CLICKHOUSE_ADMIN_PASSWORD}@clickhouse:9000/measure
 
+VALKEY_HOST=valkey
+VALKEY_PORT=6379
 VALKEY_PASSWORD=
-VALKEY_DSN=redis://valkey:6379/0
 
 ##################
 # Object Storage #
@@ -348,8 +349,9 @@ CLICKHOUSE_DSN=clickhouse://\${CLICKHOUSE_OPERATOR_USER}:\${CLICKHOUSE_OPERATOR_
 CLICKHOUSE_READER_DSN=clickhouse://\${CLICKHOUSE_READER_USER}:\${CLICKHOUSE_READER_PASSWORD}@clickhouse:9000/measure
 CLICKHOUSE_MIGRATION_URL=clickhouse://\${CLICKHOUSE_ADMIN_USER}:\${CLICKHOUSE_ADMIN_PASSWORD}@clickhouse:9000/measure
 
+VALKEY_HOST=valkey
+VALKEY_PORT=6379
 VALKEY_PASSWORD=$VALKEY_PASSWORD
-VALKEY_DSN=redis://:\${VALKEY_PASSWORD}@valkey:6379/0
 
 ##################
 # Object Storage #
@@ -639,8 +641,9 @@ ensure() {
   local clickhouse_reader_dsn
   local symbolicator_origin
   local symboloader_origin
+  local valkey_host
+  local valkey_port
   local valkey_password
-  local valkey_dsn
 
   clickhouse_admin_user="app_admin"
   clickhouse_operator_user="app_operator"
@@ -652,12 +655,13 @@ ensure() {
   clickhouse_reader_dsn="clickhouse://\${CLICKHOUSE_READER_USER}:\${CLICKHOUSE_READER_PASSWORD}@clickhouse:9000/measure"
   symbolicator_origin="http://symbolicator:3021"
   symboloader_origin="http://symboloader:8083"
+  valkey_host="valkey"
+  valkey_port="6379"
 
   if [[ "$SETUP_ENV" == "development" ]]; then
     clickhouse_admin_password="dummY_pa55w0rd"
     clickhouse_operator_password="dummY_pa55w0rd"
     clickhouse_reader_password="dummY_pa55w0rd"
-    valkey_dsn="redis://valkey:6379/0"
 
     if ! check_env_variable "CLICKHOUSE_ADMIN_USER"; then
       add_env_variable "CLICKHOUSE_ADMIN_USER" "$clickhouse_admin_user" "CLICKHOUSE_PASSWORD"
@@ -703,12 +707,16 @@ ensure() {
       add_env_variable "CLICKHOUSE_READER_DSN" "$clickhouse_reader_dsn" "CLICKHOUSE_MIGRATION_URL"
     fi
 
-    if ! check_env_variable "VALKEY_PASSWORD"; then
-      add_env_variable "VALKEY_PASSWORD" "" "CLICKHOUSE_READER_DSN"
+    if ! check_env_variable "VALKEY_HOST"; then
+      add_env_variable "VALKEY_HOST" "$valkey_host" "CLICKHOUSE_READER_DSN"
+    fi
+
+    if ! check_env_variable "VALKEY_PORT"; then
+      add_env_variable "VALKEY_PORT" "$valkey_port" "VALKEY_HOST"
     fi
 
-    if ! check_env_variable "VALKEY_DSN"; then
-      add_env_variable "VALKEY_DSN" "$valkey_dsn" "VALKEY_PASSWORD"
+    if ! check_env_variable "VALKEY_PASSWORD"; then
+      add_env_variable "VALKEY_PASSWORD" "" "VALKEY_PORT"
     fi
 
   elif [[ "$SETUP_ENV" == "production" ]]; then
@@ -716,7 +724,6 @@ ensure() {
     clickhouse_operator_password=$(generate_password 24)
     clickhouse_reader_password=$(generate_password 24)
     valkey_password=$(generate_password 24)
-    valkey_dsn="redis://:\${VALKEY_PASSWORD}@valkey:6379/0"
 
     if ! check_env_variable "CLICKHOUSE_ADMIN_USER"; then
       add_env_variable "CLICKHOUSE_ADMIN_USER" "$clickhouse_admin_user" "CLICKHOUSE_PASSWORD"
@@ -762,12 +769,16 @@ ensure() {
       add_env_variable "CLICKHOUSE_READER_DSN" "$clickhouse_reader_dsn" "CLICKHOUSE_MIGRATION_URL"
     fi
 
-    if ! check_env_variable "VALKEY_PASSWORD"; then
-      add_env_variable "VALKEY_PASSWORD" "$valkey_password" "CLICKHOUSE_READER_DSN"
+    if ! check_env_variable "VALKEY_HOST"; then
+      add_env_variable "VALKEY_HOST" "$valkey_host" "CLICKHOUSE_READER_DSN"
+    fi
+
+    if ! check_env_variable "VALKEY_PORT"; then
+      add_env_variable "VALKEY_PORT" "$valkey_port" "VALKEY_HOST"
     fi
 
-    if ! check_env_variable "VALKEY_DSN"; then
-      add_env_variable "VALKEY_DSN" "$valkey_dsn" "VALKEY_PASSWORD"
+    if ! check_env_variable "VALKEY_PASSWORD"; then
+      add_env_variable "VALKEY_PASSWORD" "$valkey_password" "VALKEY_PORT"
     fi
   fi
 

From 2eb410f5e77e8a5788ceeb6d6ff25b17165e48b4 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Fri, 21 Nov 2025 13:32:52 +0530
Subject: [PATCH 97/98] feat(backend): use hset instad of hmset

---
 backend/api/measure/sdkconfig.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/api/measure/sdkconfig.go b/backend/api/measure/sdkconfig.go
index d9124b914..0ce5f39cb 100644
--- a/backend/api/measure/sdkconfig.go
+++ b/backend/api/measure/sdkconfig.go
@@ -117,7 +117,7 @@ func setSDKConfigToCache(ctx context.Context, appId uuid.UUID, jsonConfig []byte
 	key := getSDKConfigCacheKey(appId)
 	etag := computeETag(jsonConfig)
 
-	cmd := vk.B().Hmset().Key(key).FieldValue().
+	cmd := vk.B().Hset().Key(key).FieldValue().
 		FieldValue("etag", etag).
 		FieldValue("data", string(jsonConfig)).
 		Build()

From bb1f7eaa9291ceb53b15687f4efce9094acba016 Mon Sep 17 00:00:00 2001
From: Abhay Sood <abhay@measure.sh>
Date: Fri, 21 Nov 2025 15:58:19 +0530
Subject: [PATCH 98/98] feat(frontend): use radio group component

---
 .../dashboard/app/components/radio_group.tsx  |  45 +++++
 .../targeting/edit_default_rule_dialog.tsx    |  86 ++++-----
 .../app/components/targeting/rule_builder.tsx | 173 ++++++++++--------
 frontend/dashboard/package-lock.json          | 171 ++++++++++++++++-
 frontend/dashboard/package.json               |   1 +
 5 files changed, 338 insertions(+), 138 deletions(-)
 create mode 100644 frontend/dashboard/app/components/radio_group.tsx

diff --git a/frontend/dashboard/app/components/radio_group.tsx b/frontend/dashboard/app/components/radio_group.tsx
new file mode 100644
index 000000000..bae47d8d9
--- /dev/null
+++ b/frontend/dashboard/app/components/radio_group.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { CircleIcon } from "lucide-react"
+
+import { cn } from "@/app/utils/shadcn_utils"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "border-input text-primary 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 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }
diff --git a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
index 31886efd7..fe9003fce 100644
--- a/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
+++ b/frontend/dashboard/app/components/targeting/edit_default_rule_dialog.tsx
@@ -6,6 +6,7 @@ import SamplingRateInput from '@/app/components/targeting/sampling_rate_input'
 import { useState, useEffect } from 'react'
 import { DialogDescription } from '@radix-ui/react-dialog'
 import { updateEventTargetingRule, updateTraceTargetingRule, UpdateEventTargetingRuleApiStatus, UpdateTraceTargetingRuleApiStatus, CollectionMode } from '@/app/api/api_calls'
+import { RadioGroup, RadioGroupItem } from '../radio_group'
 
 interface EditDefaultRuleDialogProps {
     isOpen: boolean
@@ -44,38 +45,38 @@ export default function EditDefaultRuleDialog({
         setIsSaving(true)
 
         try {
-            if (ruleType === 'event') {
+            if (ruleType === "event") {
                 const result = await updateEventTargetingRule(appId, ruleId, {
-                    name: 'default_behaviour',
+                    name: "default_behaviour",
                     condition,
                     collection_mode: collectionMode,
-                    sampling_rate: collectionMode === 'sampled' ? sampleRate : 0,
+                    sampling_rate: collectionMode === "sampled" ? sampleRate : 0,
                     take_screenshot: takeScreenshot || false,
                     take_layout_snapshot: takeLayoutSnapshot || false
                 })
 
                 if (result.status === UpdateEventTargetingRuleApiStatus.Error) {
-                    onError(result.error || 'Failed to update rule')
+                    onError(result.error || "Failed to update rule")
                     return
                 }
             } else {
                 const result = await updateTraceTargetingRule(appId, ruleId, {
-                    name: 'default_behaviour',
+                    name: "default_behaviour",
                     condition,
                     collection_mode: collectionMode,
-                    sampling_rate: collectionMode === 'sampled' ? sampleRate : 0
+                    sampling_rate: collectionMode === "sampled" ? sampleRate : 0
                 })
 
                 if (result.status === UpdateTraceTargetingRuleApiStatus.Error) {
-                    onError(result.error || 'Failed to update rule')
+                    onError(result.error || "Failed to update rule")
                     return
                 }
             }
 
-            onSuccess(collectionMode, collectionMode === 'sampled' ? sampleRate : undefined)
+            onSuccess(collectionMode, collectionMode === "sampled" ? sampleRate : undefined)
             onClose()
         } catch (error) {
-            onError(error instanceof Error ? error.message : 'Failed to update rule')
+            onError(error instanceof Error ? error.message : "Failed to update rule")
         } finally {
             setIsSaving(false)
         }
@@ -88,9 +89,9 @@ export default function EditDefaultRuleDialog({
         }
     }, [isOpen, initialCollectionMode, initialSampleRate])
 
-    const isEvent = ruleType === 'event'
-    const displayName = isEvent ? 'Events' : 'Traces'
-    const displayNameLower = isEvent ? 'events' : 'traces'
+    const isEvent = ruleType === "event"
+    const displayName = isEvent ? "Events" : "Traces"
+    const displayNameLower = isEvent ? "events" : "traces"
 
     return (
         <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
@@ -105,51 +106,40 @@ export default function EditDefaultRuleDialog({
                 </DialogHeader>
 
                 <div className="space-y-6 py-4">
-                    <div className="space-y-3">
-                        <label className="flex items-center gap-3 cursor-pointer h-10">
-                            <input
-                                type="radio"
-                                name="collectionMode"
-                                value="sampled"
-                                checked={collectionMode === 'sampled'}
-                                onChange={() => setCollectionMode('sampled')}
-                                disabled={isSaving}
-                                className="appearance-none w-4 h-4 border-2 border-gray-300 rounded-full cursor-pointer bg-white checked:bg-yellow-500 checked:border-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-300"
-                            />
+                    <RadioGroup
+                        value={collectionMode}
+                        onValueChange={(value) => setCollectionMode(value as CollectionMode)}
+                        disabled={isSaving}
+                    >
+                        <label
+                            htmlFor="sampled"
+                            className="flex items-center gap-3 h-10 cursor-pointer"
+                        >
+                            <RadioGroupItem value="sampled" id="sampled" />
                             <SamplingRateInput
                                 value={sampleRate}
                                 onChange={setSampleRate}
-                                disabled={collectionMode !== 'sampled' || isSaving}
-                                type={displayNameLower as 'events' | 'traces'}
+                                disabled={collectionMode !== "sampled" || isSaving}
+                                type={displayNameLower as "events" | "traces"}
                             />
                         </label>
 
-                        <label className="flex items-center gap-3 cursor-pointer h-10">
-                            <input
-                                type="radio"
-                                name="collectionMode"
-                                value="timeline"
-                                checked={collectionMode === 'timeline'}
-                                onChange={() => setCollectionMode('timeline')}
-                                disabled={isSaving}
-                                className="appearance-none w-4 h-4 border-2 border-gray-300 rounded-full cursor-pointer bg-white checked:bg-yellow-500 checked:border-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-300"
-                            />
-                            <span className="text-sm font-body">Collect {displayNameLower} with session timeline only</span>
+                        <label
+                            htmlFor="timeline"
+                            className="flex items-center gap-3 h-10 cursor-pointer text-sm font-body"
+                        >
+                            <RadioGroupItem value="timeline" id="timeline" />
+                            Collect {displayNameLower} with session timeline only
                         </label>
 
-                        <label className="flex items-center gap-3 cursor-pointer h-10">
-                            <input
-                                type="radio"
-                                name="collectionMode"
-                                value="disable"
-                                checked={collectionMode === 'disabled'}
-                                onChange={() => setCollectionMode('disabled')}
-                                disabled={isSaving}
-                                className="appearance-none w-4 h-4 border-2 border-gray-300 rounded-full cursor-pointer bg-white checked:bg-yellow-500 checked:border-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-300"
-                            />
-                            <span className="text-sm font-body">Collect no {displayNameLower} by default</span>
+                        <label
+                            htmlFor="disabled"
+                            className="flex items-center gap-3 h-10 cursor-pointer text-sm font-body"
+                        >
+                            <RadioGroupItem value="disabled" id="disabled" />
+                            Collect no {displayNameLower} by default
                         </label>
-                    </div>
+                    </RadioGroup>
                 </div>
 
                 <DialogFooter>
diff --git a/frontend/dashboard/app/components/targeting/rule_builder.tsx b/frontend/dashboard/app/components/targeting/rule_builder.tsx
index b6a6d325b..88a7f5cbd 100644
--- a/frontend/dashboard/app/components/targeting/rule_builder.tsx
+++ b/frontend/dashboard/app/components/targeting/rule_builder.tsx
@@ -14,6 +14,7 @@ import DangerConfirmationDialog from "../danger_confirmation_dialog"
 import AttributeBuilder from "./attribute_builder"
 import { Plus } from "lucide-react"
 import TraceOperatorNameInput from "./trace_name_operator_input"
+import { RadioGroup, RadioGroupItem } from "../radio_group"
 
 enum PageState {
     Loading,
@@ -1210,92 +1211,104 @@ export default function RuleBuilder({
                     <>
                         <div className="mb-4">
                             <p className="font-display text-gray-500 mb-3">Collection</p>
-                            <div className="space-y-3 ml-4">
-                                <label className="flex items-center gap-3 cursor-pointer h-10">
-                                    <input
-                                        type="radio"
-                                        name="collectionMode"
-                                        value="sampled"
-                                        checked={ruleState.collectionMode === 'sampled'}
-                                        onChange={() => updateRuleState({ collectionMode: 'sampled' })}
-                                        className="appearance-none w-4 h-4 border-2 border-gray-300 rounded-full cursor-pointer bg-white checked:bg-yellow-500 checked:border-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-300"
-                                    />
-                                    <SamplingRateInput
-                                        value={ruleState.sampleRate || 100}
-                                        onChange={(value) => updateRuleState({ sampleRate: value })}
-                                        disabled={ruleState.collectionMode !== 'sampled'}
-                                        type={type === 'event' ? 'event' : 'trace'}
-                                    />
-                                </label>
-
-                                <label className="flex items-center gap-3 cursor-pointer h-10">
-                                    <input
-                                        type="radio"
-                                        name="collectionMode"
-                                        value="timeline"
-                                        checked={ruleState.collectionMode === 'timeline'}
-                                        onChange={() => updateRuleState({ collectionMode: 'timeline' })}
-                                        className="appearance-none w-4 h-4 border-2 border-gray-300 rounded-full cursor-pointer bg-white checked:bg-yellow-500 checked:border-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-300"
-                                    />
-                                    <span className="text-sm font-body">Collect with timeline only</span>
-                                </label>
-
-                                <label className="flex items-center gap-3 cursor-pointer h-10">
-                                    <input
-                                        type="radio"
-                                        name="collectionMode"
-                                        value="disabled"
-                                        checked={ruleState.collectionMode === 'disabled'}
-                                        onChange={() => updateRuleState({ collectionMode: 'disabled', take_layout_snapshot: false, take_screenshot: false })}
-                                        className="appearance-none w-4 h-4 border-2 border-gray-300 rounded-full cursor-pointer bg-white checked:bg-yellow-500 checked:border-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-300"
-                                    />
-                                    <span className="text-sm font-body">Do not collect</span>
-                                </label>
-                            </div>
-                        </div>
-
-                        {type === 'event' && (
-                            <div className="mb-4">
-                                <p className="font-display text-gray-500 mb-3">Attachments</p>
-                                <div className="space-y-3 ml-4">
-                                    <label className={`flex items-center gap-3 h-10 ${ruleState.collectionMode === 'disabled' ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}>
-                                        <input
-                                            type="radio"
-                                            name="attachmentMode"
-                                            value="layout_snapshot"
-                                            checked={ruleState.take_layout_snapshot === true && ruleState.take_screenshot === false}
-                                            onChange={() => updateRuleState({ take_layout_snapshot: true, take_screenshot: false })}
-                                            disabled={ruleState.collectionMode === 'disabled'}
-                                            className="appearance-none w-4 h-4 border-2 border-gray-300 rounded-full cursor-pointer bg-white checked:bg-yellow-500 checked:border-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-300"
+                            <div className="ml-4">
+                                <RadioGroup
+                                    value={ruleState.collectionMode}
+                                    onValueChange={(value) => {
+                                        if (value === "disabled") {
+                                            updateRuleState({
+                                                collectionMode: value as CollectionMode,
+                                                take_layout_snapshot: false,
+                                                take_screenshot: false,
+                                            })
+                                        } else {
+                                            updateRuleState({ collectionMode: value as CollectionMode })
+                                        }
+                                    }}
+                                >
+                                    <label
+                                        htmlFor="collection-sampled"
+                                        className="flex items-center gap-3 h-10 cursor-pointer"
+                                    >
+                                        <RadioGroupItem value="sampled" id="collection-sampled" />
+                                        <SamplingRateInput
+                                            value={ruleState.sampleRate || 100}
+                                            onChange={(value) => updateRuleState({ sampleRate: value })}
+                                            disabled={ruleState.collectionMode !== "sampled"}
+                                            type={type === "event" ? "event" : "trace"}
                                         />
-                                        <span className="text-sm font-body">Take layout snapshot</span>
                                     </label>
 
-                                    <label className={`flex items-center gap-3 h-10 ${ruleState.collectionMode === 'disabled' ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}>
-                                        <input
-                                            type="radio"
-                                            name="attachmentMode"
-                                            value="screenshot"
-                                            checked={ruleState.take_screenshot === true && ruleState.take_layout_snapshot === false}
-                                            onChange={() => updateRuleState({ take_screenshot: true, take_layout_snapshot: false })}
-                                            disabled={ruleState.collectionMode === 'disabled'}
-                                            className="appearance-none w-4 h-4 border-2 border-gray-300 rounded-full cursor-pointer bg-white checked:bg-yellow-500 checked:border-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-300"
-                                        />
-                                        <span className="text-sm font-body">Take screenshot</span>
+                                    <label
+                                        htmlFor="collection-timeline"
+                                        className="flex items-center gap-3 h-10 cursor-pointer text-sm font-body"
+                                    >
+                                        <RadioGroupItem value="timeline" id="collection-timeline" />
+                                        Collect with timeline only
                                     </label>
 
-                                    <label className={`flex items-center gap-3 h-10 ${ruleState.collectionMode === 'disabled' ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}>
-                                        <input
-                                            type="radio"
-                                            name="attachmentMode"
-                                            value="none"
-                                            checked={ruleState.take_screenshot === false && ruleState.take_layout_snapshot === false}
-                                            onChange={() => updateRuleState({ take_screenshot: false, take_layout_snapshot: false })}
-                                            disabled={ruleState.collectionMode === 'disabled'}
-                                            className="appearance-none w-4 h-4 border-2 border-gray-300 rounded-full cursor-pointer bg-white checked:bg-yellow-500 checked:border-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-300"
-                                        />
-                                        <span className="text-sm font-body">No attachments</span>
+                                    <label
+                                        htmlFor="collection-disabled"
+                                        className="flex items-center gap-3 h-10 cursor-pointer text-sm font-body"
+                                    >
+                                        <RadioGroupItem value="disabled" id="collection-disabled" />
+                                        Do not collect
                                     </label>
+                                </RadioGroup>
+                            </div>
+                        </div>
+
+                        {type === "event" && (
+                            <div className="mb-4">
+                                <p className="font-display text-gray-500 mb-3">Attachments</p>
+                                <div className={`ml-4 ${ruleState.collectionMode === "disabled" ? "opacity-50" : ""}`}>
+                                    <RadioGroup
+                                        value={
+                                            ruleState.take_layout_snapshot && !ruleState.take_screenshot
+                                                ? "layout_snapshot"
+                                                : ruleState.take_screenshot && !ruleState.take_layout_snapshot
+                                                    ? "screenshot"
+                                                    : "none"
+                                        }
+                                        onValueChange={(value) => {
+                                            switch (value) {
+                                                case "layout_snapshot":
+                                                    updateRuleState({ take_layout_snapshot: true, take_screenshot: false })
+                                                    break
+                                                case "screenshot":
+                                                    updateRuleState({ take_screenshot: true, take_layout_snapshot: false })
+                                                    break
+                                                case "none":
+                                                    updateRuleState({ take_screenshot: false, take_layout_snapshot: false })
+                                                    break
+                                            }
+                                        }}
+                                        disabled={ruleState.collectionMode === "disabled"}
+                                    >
+                                        <label
+                                            htmlFor="attachment-layout"
+                                            className="flex items-center gap-3 h-10 cursor-pointer text-sm font-body"
+                                        >
+                                            <RadioGroupItem value="layout_snapshot" id="attachment-layout" />
+                                            Take layout snapshot
+                                        </label>
+
+                                        <label
+                                            htmlFor="attachment-screenshot"
+                                            className="flex items-center gap-3 h-10 cursor-pointer text-sm font-body"
+                                        >
+                                            <RadioGroupItem value="screenshot" id="attachment-screenshot" />
+                                            Take screenshot
+                                        </label>
+
+                                        <label
+                                            htmlFor="attachment-none"
+                                            className="flex items-center gap-3 h-10 cursor-pointer text-sm font-body"
+                                        >
+                                            <RadioGroupItem value="none" id="attachment-none" />
+                                            No attachments
+                                        </label>
+                                    </RadioGroup>
                                 </div>
                             </div>
                         )}
diff --git a/frontend/dashboard/package-lock.json b/frontend/dashboard/package-lock.json
index 5519bcdb3..356bd84c5 100644
--- a/frontend/dashboard/package-lock.json
+++ b/frontend/dashboard/package-lock.json
@@ -18,6 +18,7 @@
         "@radix-ui/react-dialog": "^1.1.13",
         "@radix-ui/react-dropdown-menu": "^2.1.14",
         "@radix-ui/react-popover": "^1.1.13",
+        "@radix-ui/react-radio-group": "^1.3.8",
         "@radix-ui/react-separator": "^1.1.6",
         "@radix-ui/react-slot": "^1.2.2",
         "@radix-ui/react-switch": "^1.2.6",
@@ -2201,16 +2202,6 @@
         "node": ">=12.4.0"
       }
     },
-    "node_modules/@opentelemetry/api": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz",
-      "integrity": "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -2814,6 +2805,166 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.8.tgz",
+      "integrity": "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group/node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-radio-group/node_modules/@radix-ui/react-collection": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group/node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
+      "integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.1.9",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.9.tgz",
diff --git a/frontend/dashboard/package.json b/frontend/dashboard/package.json
index d40077e19..7744dcdad 100644
--- a/frontend/dashboard/package.json
+++ b/frontend/dashboard/package.json
@@ -27,6 +27,7 @@
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-toast": "^1.2.14",
     "@radix-ui/react-tooltip": "^1.2.6",
+    "@radix-ui/react-radio-group": "^1.3.8",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/postcss": "^4.0.12",
     "@types/luxon": "^3.4.2",