From db1bab9436069b776e452b3c49fd8b20b9c4b7fc Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 30 Jul 2026 17:49:03 +0000
Subject: [PATCH 01/20] feat(devices): add platform and bundle filters to
 device table

Allow filtering the devices list by platform and/or bundle version so
large fleets can be narrowed without exporting data offline.

Co-authored-by: Martin DONADIEU <martindonadieu@gmail.com>
---
 messages/en.json                              |   2 +
 src/components/tables/DeviceTable.vue         | 126 +++++++++++++++++-
 .../functions/_backend/private/devices.ts     |  24 +++-
 .../functions/_backend/utils/cloudflare.ts    |  40 ++++++
 supabase/functions/_backend/utils/stats.ts    |   5 +-
 supabase/functions/_backend/utils/supabase.ts |   7 +
 supabase/functions/_backend/utils/types.ts    |   2 +
 .../cloudflare-device-pagination.unit.test.ts |  31 +++++
 .../private-analytics-validation.unit.test.ts |  42 ++++++
 9 files changed, 269 insertions(+), 10 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index afad39e708..3b478397ce 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -273,7 +273,9 @@
   "production-plugin-device": "Production plugin device",
   "production-plugin-device-within-7-days": "Production Plugin Device (within 7 days)",
   "all-billing-cycles": "All billing cycles",
+  "all-bundles": "All bundles",
   "all-plans": "All plans",
+  "all-platforms": "All platforms",
   "access-required-description": "You don't have access to this section. Ask one of the people below, who can manage it for your organization.",
   "access-contact-people": "People who can help",
   "audit-access-required": "Audit log access required",
diff --git a/src/components/tables/DeviceTable.vue b/src/components/tables/DeviceTable.vue
index cc42124bd9..640c338598 100644
--- a/src/components/tables/DeviceTable.vue
+++ b/src/components/tables/DeviceTable.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { TableColumn } from '../comp_def'
 import type { Database } from '~/types/supabase.types'
-import { h, ref } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
+import { h, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
@@ -20,6 +21,7 @@ const emit = defineEmits(['addDevice'])
 
 // TODO: delete the old version check when all devices uses the new version system
 type Device = Database['public']['Tables']['devices']['Row']
+type PlatformOs = Database['public']['Enums']['platform_os']
 
 const { t } = useI18n()
 const supabase = useSupabase()
@@ -38,7 +40,11 @@ const filters = ref({
   Override: false,
   CustomId: false,
 })
+const selectedPlatform = ref<'' | PlatformOs>('')
+const selectedVersionName = ref(props.versionName ?? '')
+const bundleNames = ref<string[]>([])
 const offset = 10
+const selectControlClass = 'd-select d-select-bordered h-10 min-h-10 w-full max-w-56 rounded-md border-gray-300 bg-white text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-primary/30 dark:border-gray-600 dark:bg-gray-800 dark:text-white'
 const columns = ref<TableColumn[]>([
   {
     label: t('device-id'),
@@ -95,10 +101,22 @@ function getSearchTerm() {
   return trimmed.length ? trimmed : undefined
 }
 
+function getVersionNameFilter() {
+  const selected = selectedVersionName.value.trim()
+  if (selected)
+    return selected
+  return props.versionName || undefined
+}
+
+function getPlatformFilter(): PlatformOs | undefined {
+  return selectedPlatform.value || undefined
+}
+
 function getQuerySignature() {
   return JSON.stringify({
     appId: props.appId,
-    versionName: props.versionName,
+    versionName: getVersionNameFilter(),
+    platform: getPlatformFilter() ?? '',
     search: getSearchTerm(),
     order: getActiveOrder(columns.value),
     override: filters.value.Override,
@@ -107,6 +125,30 @@ function getQuerySignature() {
   })
 }
 
+async function loadBundleNames() {
+  if (!props.appId)
+    return
+
+  const { data, error } = await supabase
+    .from('app_versions')
+    .select('name')
+    .eq('app_id', props.appId)
+    .eq('deleted', false)
+    .order('created_at', { ascending: false })
+    .limit(200)
+
+  if (error || !data) {
+    bundleNames.value = []
+    return
+  }
+
+  const names = [...new Set(data.map(row => row.name).filter(Boolean))]
+  const selected = getVersionNameFilter()
+  if (selected && !names.includes(selected))
+    names.unshift(selected)
+  bundleNames.value = names
+}
+
 async function getDevicesID() {
   let req = supabase
     .from('channel_devices')
@@ -149,7 +191,8 @@ async function countDevices() {
       body: JSON.stringify({
         count: true,
         appId: props.appId,
-        versionName: props.versionName,
+        versionName: getVersionNameFilter(),
+        platform: getPlatformFilter(),
         devicesId: deviceIds.length > 0 ? deviceIds : undefined,
         search: searchTerm,
         order: getActiveOrder(columns.value),
@@ -235,6 +278,10 @@ async function refreshData() {
   }
 }
 
+const debouncedReload = useDebounceFn(() => {
+  reload()
+}, 300)
+
 async function fetchDevicesPage(cursor: string | undefined | null) {
   const ids = await resolveDeviceIds()
   const searchTerm = getSearchTerm()
@@ -252,7 +299,8 @@ async function fetchDevicesPage(cursor: string | undefined | null) {
     },
     body: JSON.stringify({
       appId: props.appId,
-      versionName: props.versionName,
+      versionName: getVersionNameFilter(),
+      platform: getPlatformFilter(),
       devicesId: ids.length ? ids : undefined,
       search: searchTerm,
       order: getActiveOrder(columns.value),
@@ -403,10 +451,80 @@ async function ensureVersionNames(devices: Device[]) {
       device.version_name = versionMap[id]
   })
 }
+
+onMounted(async () => {
+  await loadBundleNames()
+})
+
+watch(() => props.appId, async () => {
+  selectedPlatform.value = ''
+  selectedVersionName.value = props.versionName ?? ''
+  await loadBundleNames()
+  await refreshData()
+})
+
+watch(() => props.versionName, (value) => {
+  if (value && !selectedVersionName.value)
+    selectedVersionName.value = value
+})
+
+watch([selectedPlatform, selectedVersionName], () => {
+  debouncedReload()
+})
 </script>
 
 <template>
   <div>
+    <div class="flex flex-wrap items-end gap-3 px-4 pt-4">
+      <div class="flex min-w-40 flex-col gap-1">
+        <label for="device-table-platform-filter" class="text-xs font-medium text-slate-600 dark:text-gray-300">
+          {{ t('platform') }}
+        </label>
+        <select
+          id="device-table-platform-filter"
+          v-model="selectedPlatform"
+          :class="selectControlClass"
+          :aria-label="t('platform')"
+          data-test="device-platform-filter"
+        >
+          <option value="">
+            {{ t('all-platforms') }}
+          </option>
+          <option value="ios">
+            {{ t('platform-ios') }}
+          </option>
+          <option value="android">
+            {{ t('platform-android') }}
+          </option>
+          <option value="electron">
+            {{ t('platform-electron') }}
+          </option>
+        </select>
+      </div>
+      <div class="flex min-w-48 flex-col gap-1">
+        <label for="device-table-bundle-filter" class="text-xs font-medium text-slate-600 dark:text-gray-300">
+          {{ t('bundle') }}
+        </label>
+        <select
+          id="device-table-bundle-filter"
+          v-model="selectedVersionName"
+          :class="selectControlClass"
+          :aria-label="t('bundle')"
+          data-test="device-bundle-filter"
+        >
+          <option value="">
+            {{ t('all-bundles') }}
+          </option>
+          <option
+            v-for="name in bundleNames"
+            :key="name"
+            :value="name"
+          >
+            {{ name }}
+          </option>
+        </select>
+      </div>
+    </div>
     <DataTable
       v-model:filters="filters" v-model:columns="columns" v-model:current-page="currentPage" v-model:search="search"
       :total="total" :offset="offset" :element-list="elements"
diff --git a/supabase/functions/_backend/private/devices.ts b/supabase/functions/_backend/private/devices.ts
index 84a941e1d0..c7f04a8a42 100644
--- a/supabase/functions/_backend/private/devices.ts
+++ b/supabase/functions/_backend/private/devices.ts
@@ -1,20 +1,22 @@
 import type { MiddlewareKeyVariables } from '../utils/hono.ts'
 import type { Order } from '../utils/types.ts'
-import { z } from 'zod'
 import { Hono } from 'hono/tiny'
-import { safeParseSchema } from '../utils/schema_validation.ts'
+import { z } from 'zod'
 import { parseBody, simpleError, useCors } from '../utils/hono.ts'
 import { middlewareAuth } from '../utils/hono_middleware.ts'
 import { cloudlog } from '../utils/logging.ts'
 import { appIdSchema, cursorSchema, deviceIdSchema, hasInvalidQueryLimitInput, hasUnsafeDevicesQueryText, queryLimitSchema, safeQueryTextSchema } from '../utils/privateAnalyticsValidation.ts'
 import { checkPermission } from '../utils/rbac.ts'
+import { safeParseSchema } from '../utils/schema_validation.ts'
 import { countDevices, countInstallSources, readDevices } from '../utils/stats.ts'
+import { Constants } from '../utils/supabase.types.ts'
 
 interface DataDevice {
   appId: string
   count?: boolean
   installSourceCounts?: boolean
   versionName?: string
+  platform?: typeof Constants.public.Enums.platform_os[number]
   devicesId?: string[]
   deviceIds?: string[] // TODO: remove when migration is done
   installSources?: string[]
@@ -31,11 +33,13 @@ const orderItemSchema = z.object({
   key: z.string().max(64),
   sortable: z.enum(['asc', 'desc']).optional(),
 })
+const platformSchema = z.enum(Constants.public.Enums.platform_os)
 const devicesBodySchema = z.object({
   appId: appIdSchema,
   count: z.boolean().optional(),
   installSourceCounts: z.boolean().optional(),
   versionName: safeQueryTextSchema.optional(),
+  platform: platformSchema.optional(),
   devicesId: z.array(deviceIdSchema).optional(),
   deviceIds: z.array(deviceIdSchema).optional(),
   installSources: z.array(safeQueryTextSchema).optional(),
@@ -70,11 +74,23 @@ app.post('/', middlewareAuth(), async (c) => {
   const devicesIds = body.devicesId ?? body.deviceIds ?? []
   if (body.installSourceCounts)
     return c.json({ installSources: await countInstallSources(c, body.appId) })
-  if (body.count)
-    return c.json({ count: await countDevices(c, body.appId, body.customIdMode ?? false, devicesIds, body.versionName, body.search?.trim()) })
+  if (body.count) {
+    return c.json({
+      count: await countDevices(
+        c,
+        body.appId,
+        body.customIdMode ?? false,
+        devicesIds,
+        body.versionName,
+        body.search?.trim(),
+        body.platform,
+      ),
+    })
+  }
   return c.json(await readDevices(c, {
     app_id: body.appId,
     version_name: body.versionName,
+    platform: body.platform,
     deviceIds: devicesIds,
     installSources: body.installSources,
     search: body.search,
diff --git a/supabase/functions/_backend/utils/cloudflare.ts b/supabase/functions/_backend/utils/cloudflare.ts
index f70baa7cf1..564ef916b0 100644
--- a/supabase/functions/_backend/utils/cloudflare.ts
+++ b/supabase/functions/_backend/utils/cloudflare.ts
@@ -937,6 +937,14 @@ GROUP BY install_source`
   return counts
 }
 
+function platformOsToCFDouble(platform: Database['public']['Enums']['platform_os']): number {
+  if (platform === 'ios')
+    return 1
+  if (platform === 'electron')
+    return 2
+  return 0
+}
+
 export async function countDevicesCF(
   c: Context,
   app_id: string,
@@ -944,6 +952,7 @@ export async function countDevicesCF(
   deviceIds: string[] = [],
   versionName?: string,
   search?: string,
+  platform?: Database['public']['Enums']['platform_os'],
 ) {
   // Use Analytics Engine DEVICE_INFO for counting devices
   const conditions = [`index1 = '${escapeSqlString(app_id)}'`]
@@ -972,6 +981,29 @@ export async function countDevicesCF(
   if (versionName)
     conditions.push(`blob2 = '${escapeSqlString(versionName)}'`)
 
+  // Match latest aggregated platform for current-state filtering.
+  if (platform) {
+    const platformValue = platformOsToCFDouble(platform)
+    const query = `SELECT COUNT() AS total
+FROM (
+  SELECT argMax(double1, timestamp) AS platform
+  FROM device_info
+  WHERE ${conditions.join(' AND ')}
+  GROUP BY blob1
+)
+WHERE platform = ${platformValue}`
+
+    cloudlog({ requestId: c.get('requestId'), message: 'countDevicesCF query', query })
+    try {
+      const res = await runQueryToCFA<{ total: number }>(c, query)
+      return res[0]?.total ?? 0
+    }
+    catch (e) {
+      cloudlogErr({ requestId: c.get('requestId'), message: 'Error reading device count from Analytics Engine', error: serializeError(e), query })
+    }
+    return 0
+  }
+
   const query = `SELECT COUNT(DISTINCT blob1) AS total
 FROM device_info
 WHERE ${conditions.join(' AND ')}`
@@ -1053,12 +1085,20 @@ function buildReadDevicesCFCustomIdsCondition(customIds: string[] | undefined) {
   return `custom_id IN (${customIdsList})`
 }
 
+function buildReadDevicesCFPlatformCondition(platform: ReadDevicesParams['platform']) {
+  if (!platform)
+    return ''
+  return `platform = ${platformOsToCFDouble(platform)}`
+}
+
 function buildReadDevicesCFOuterConditions(params: ReadDevicesParams, devicesOrder: DevicesOrderCF | null) {
   const conditions = [
     buildReadDevicesCFCursorCondition(params.cursor, devicesOrder),
     buildReadDevicesCFUpdatedAtGtCondition(params.updated_at_gt),
     // Match the latest aggregated custom_id, not historical event rows.
     buildReadDevicesCFCustomIdsCondition(params.customIds),
+    // Match the latest aggregated platform, not historical event rows.
+    buildReadDevicesCFPlatformCondition(params.platform),
   ]
   return conditions.filter(Boolean)
 }
diff --git a/supabase/functions/_backend/utils/stats.ts b/supabase/functions/_backend/utils/stats.ts
index f0da28885a..9240565692 100644
--- a/supabase/functions/_backend/utils/stats.ts
+++ b/supabase/functions/_backend/utils/stats.ts
@@ -476,11 +476,12 @@ export function countDevices(
   deviceIds: string[] = [],
   versionName?: string,
   search?: string,
+  platform?: Database['public']['Enums']['platform_os'],
 ) {
   const trimmedSearch = search?.trim()
   if (shouldUseAnalyticsEngine(c))
-    return countDevicesCF(c, app_id, customIdMode, deviceIds, versionName, trimmedSearch)
-  return countDevicesSB(c, app_id, customIdMode, deviceIds, versionName, trimmedSearch)
+    return countDevicesCF(c, app_id, customIdMode, deviceIds, versionName, trimmedSearch, platform)
+  return countDevicesSB(c, app_id, customIdMode, deviceIds, versionName, trimmedSearch, platform)
 }
 
 export function countInstallSources(c: Context, app_id: string) {
diff --git a/supabase/functions/_backend/utils/supabase.ts b/supabase/functions/_backend/utils/supabase.ts
index 778101b01a..3bf49d8040 100644
--- a/supabase/functions/_backend/utils/supabase.ts
+++ b/supabase/functions/_backend/utils/supabase.ts
@@ -1532,6 +1532,9 @@ export async function readDevicesSB(c: Context, params: ReadDevicesParams, custo
   if (params.version_name)
     query = query.eq('version_name', params.version_name)
 
+  if (params.platform)
+    query = query.eq('platform', params.platform)
+
   if (params.installSources?.length)
     query = query.in('install_source', params.installSources)
 
@@ -1606,6 +1609,7 @@ export async function countDevicesSB(
   deviceIds: string[] = [],
   versionName?: string,
   search?: string,
+  platform?: Database['public']['Enums']['platform_os'],
 ) {
   let req = supabaseAdmin(c)
     .from('devices')
@@ -1636,6 +1640,9 @@ export async function countDevicesSB(
   if (versionName)
     req = req.eq('version_name', versionName)
 
+  if (platform)
+    req = req.eq('platform', platform)
+
   const { count, error } = await req
 
   if (error) {
diff --git a/supabase/functions/_backend/utils/types.ts b/supabase/functions/_backend/utils/types.ts
index 8858a8fd38..9c1f14dcdc 100644
--- a/supabase/functions/_backend/utils/types.ts
+++ b/supabase/functions/_backend/utils/types.ts
@@ -130,6 +130,8 @@ export interface NativeVersionUsage {
 export interface ReadDevicesParams {
   app_id: string
   version_name?: string | undefined
+  /** Exact platform filter (`ios` | `android` | `electron`) */
+  platform?: Database['public']['Enums']['platform_os']
   deviceIds?: string[]
   /** Exact custom_id match filter (case-sensitive, already trimmed by callers) */
   customIds?: string[]
diff --git a/tests/cloudflare-device-pagination.unit.test.ts b/tests/cloudflare-device-pagination.unit.test.ts
index 2716d7e407..950a0e044f 100644
--- a/tests/cloudflare-device-pagination.unit.test.ts
+++ b/tests/cloudflare-device-pagination.unit.test.ts
@@ -150,6 +150,22 @@ describe('buildReadDevicesCFQuery', () => {
     expect(outerFilterIndex).toBeGreaterThan(groupByIndex)
   })
 
+  it.concurrent('filters devices by latest aggregated platform after grouping', () => {
+    const query = buildReadDevicesCFQuery({
+      app_id: 'com.example.app',
+      platform: 'ios',
+      version_name: '1.2.3',
+      limit: 1,
+    }, false)
+
+    const groupByIndex = query.indexOf('GROUP BY blob1')
+    const versionIndex = query.indexOf(`blob2 = '1.2.3'`)
+    const platformIndex = query.indexOf('WHERE platform = 1')
+
+    expect(versionIndex).toBeGreaterThan(-1)
+    expect(versionIndex).toBeLessThan(groupByIndex)
+    expect(platformIndex).toBeGreaterThan(groupByIndex)
+  })
 })
 describe('countDevicesCF', () => {
   it('does not read install source blob on default device counts', async () => {
@@ -309,6 +325,21 @@ describe('readDevicesSB', () => {
     expect(query.in).toHaveBeenCalledWith('install_source', ['app_store', 'testflight'])
   })
 
+  it('applies platform and version_name filters together', async () => {
+    const { client, query } = createReadDevicesQueryMock()
+    vi.mocked(createClient).mockReturnValue(client as unknown as ReturnType<typeof createClient>)
+
+    await readDevicesSB(createContextMock() as unknown as Context, {
+      app_id: 'com.example.app',
+      platform: 'android',
+      version_name: '2.0.0',
+      limit: 1,
+    }, false)
+
+    expect(query.eq).toHaveBeenCalledWith('platform', 'android')
+    expect(query.eq).toHaveBeenCalledWith('version_name', '2.0.0')
+  })
+
   it('filters devices with updated_at greater than the provided timestamp', async () => {
     const { client, query } = createReadDevicesQueryMock()
     vi.mocked(createClient).mockReturnValue(client as unknown as ReturnType<typeof createClient>)
diff --git a/tests/private-analytics-validation.unit.test.ts b/tests/private-analytics-validation.unit.test.ts
index c471c7d0c3..bbe15725b5 100644
--- a/tests/private-analytics-validation.unit.test.ts
+++ b/tests/private-analytics-validation.unit.test.ts
@@ -119,7 +119,49 @@ describe('private analytics route validation', () => {
     ['non-numeric limits', { limit: '1 UNION SELECT 1' }],
     ['decimal limits', { limit: 1.5 }],
     ['boolean limits', { limit: true }],
+    ['invalid platform', { platform: 'windows' }],
   ])('rejects %s on /private/devices', async (_label, body) => {
     await expectRejectedDevicesBody(body)
   })
+
+  it('accepts platform and versionName filters on /private/devices', async () => {
+    readDevicesMock.mockResolvedValue({ data: [], nextCursor: undefined, hasMore: false })
+
+    const response = await devicesApp.request(postJson('http://local/', {
+      appId: 'com.example.app',
+      platform: 'ios',
+      versionName: '1.2.3',
+    }))
+
+    expect(response.status).toBe(200)
+    expect(checkPermissionMock).toHaveBeenCalled()
+    expect(readDevicesMock).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({
+      app_id: 'com.example.app',
+      platform: 'ios',
+      version_name: '1.2.3',
+    }), false)
+  })
+
+  it('passes platform to countDevices on /private/devices', async () => {
+    countDevicesMock.mockResolvedValue(7)
+
+    const response = await devicesApp.request(postJson('http://local/', {
+      appId: 'com.example.app',
+      count: true,
+      platform: 'android',
+      versionName: '2.0.0',
+    }))
+
+    expect(response.status).toBe(200)
+    expect(await response.json()).toEqual({ count: 7 })
+    expect(countDevicesMock).toHaveBeenCalledWith(
+      expect.anything(),
+      'com.example.app',
+      false,
+      [],
+      '2.0.0',
+      undefined,
+      'android',
+    )
+  })
 })

From a237d60bde7b3086ea758e760a240f1564003f2f Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 30 Jul 2026 17:49:18 +0000
Subject: [PATCH 02/20] style(tests): add blank line between device pagination
 describes

Co-authored-by: Martin DONADIEU <martindonadieu@gmail.com>
---
 tests/cloudflare-device-pagination.unit.test.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/cloudflare-device-pagination.unit.test.ts b/tests/cloudflare-device-pagination.unit.test.ts
index 950a0e044f..318abdbf54 100644
--- a/tests/cloudflare-device-pagination.unit.test.ts
+++ b/tests/cloudflare-device-pagination.unit.test.ts
@@ -167,6 +167,7 @@ describe('buildReadDevicesCFQuery', () => {
     expect(platformIndex).toBeGreaterThan(groupByIndex)
   })
 })
+
 describe('countDevicesCF', () => {
   it('does not read install source blob on default device counts', async () => {
     let query = ''

From 038bc5d8914e694c1995271136d3d652904678a2 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 30 Jul 2026 17:55:16 +0000
Subject: [PATCH 03/20] ci: retrigger cloudflare shards after infra flake

Co-authored-by: Martin DONADIEU <martindonadieu@gmail.com>

From 4d06f7ee68499f6b3e84256d42f8cd606dc20ee6 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 30 Jul 2026 18:10:00 +0000
Subject: [PATCH 04/20] fix(devices): ignore stale bundle list responses after
 app switch

Co-authored-by: Martin DONADIEU <martindonadieu@gmail.com>
---
 src/components/tables/DeviceTable.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/tables/DeviceTable.vue b/src/components/tables/DeviceTable.vue
index 640c338598..17a35d4430 100644
--- a/src/components/tables/DeviceTable.vue
+++ b/src/components/tables/DeviceTable.vue
@@ -126,17 +126,22 @@ function getQuerySignature() {
 }
 
 async function loadBundleNames() {
-  if (!props.appId)
+  const appId = props.appId
+  if (!appId)
     return
 
   const { data, error } = await supabase
     .from('app_versions')
     .select('name')
-    .eq('app_id', props.appId)
+    .eq('app_id', appId)
     .eq('deleted', false)
     .order('created_at', { ascending: false })
     .limit(200)
 
+  // Ignore stale responses if the user switched apps while the query was in flight.
+  if (appId !== props.appId)
+    return
+
   if (error || !data) {
     bundleNames.value = []
     return

From 25711f5c122f9d3c421666f45f0e791af1f975cb Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 30 Jul 2026 18:15:59 +0000
Subject: [PATCH 05/20] fix(devices): clear bundle filter and align CF
 current-state filters

Use selected bundle only (no prop fallback), sync prop changes into the
dropdown, and filter CF device queries on latest version_name + platform
after aggregation so combinations match Supabase semantics.

Co-authored-by: Martin DONADIEU <martindonadieu@gmail.com>
---
 src/components/tables/DeviceTable.vue         |  7 ++---
 .../functions/_backend/utils/cloudflare.ts    | 31 ++++++++++++-------
 .../cloudflare-device-pagination.unit.test.ts | 11 +++----
 3 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/components/tables/DeviceTable.vue b/src/components/tables/DeviceTable.vue
index 17a35d4430..88790da393 100644
--- a/src/components/tables/DeviceTable.vue
+++ b/src/components/tables/DeviceTable.vue
@@ -103,9 +103,7 @@ function getSearchTerm() {
 
 function getVersionNameFilter() {
   const selected = selectedVersionName.value.trim()
-  if (selected)
-    return selected
-  return props.versionName || undefined
+  return selected || undefined
 }
 
 function getPlatformFilter(): PlatformOs | undefined {
@@ -469,8 +467,7 @@ watch(() => props.appId, async () => {
 })
 
 watch(() => props.versionName, (value) => {
-  if (value && !selectedVersionName.value)
-    selectedVersionName.value = value
+  selectedVersionName.value = value ?? ''
 })
 
 watch([selectedPlatform, selectedVersionName], () => {
diff --git a/supabase/functions/_backend/utils/cloudflare.ts b/supabase/functions/_backend/utils/cloudflare.ts
index 564ef916b0..83483514b4 100644
--- a/supabase/functions/_backend/utils/cloudflare.ts
+++ b/supabase/functions/_backend/utils/cloudflare.ts
@@ -978,20 +978,24 @@ export async function countDevicesCF(
     }
   }
 
-  if (versionName)
-    conditions.push(`blob2 = '${escapeSqlString(versionName)}'`)
+  // Match latest aggregated version/platform for current-state filtering (same as Supabase devices table).
+  if (versionName || platform) {
+    const outerConditions: string[] = []
+    if (versionName)
+      outerConditions.push(`version_name = '${escapeSqlString(versionName)}'`)
+    if (platform)
+      outerConditions.push(`platform = ${platformOsToCFDouble(platform)}`)
 
-  // Match latest aggregated platform for current-state filtering.
-  if (platform) {
-    const platformValue = platformOsToCFDouble(platform)
     const query = `SELECT COUNT() AS total
 FROM (
-  SELECT argMax(double1, timestamp) AS platform
+  SELECT
+    argMax(blob2, timestamp) AS version_name,
+    argMax(double1, timestamp) AS platform
   FROM device_info
   WHERE ${conditions.join(' AND ')}
   GROUP BY blob1
 )
-WHERE platform = ${platformValue}`
+WHERE ${outerConditions.join(' AND ')}`
 
     cloudlog({ requestId: c.get('requestId'), message: 'countDevicesCF query', query })
     try {
@@ -1091,14 +1095,21 @@ function buildReadDevicesCFPlatformCondition(platform: ReadDevicesParams['platfo
   return `platform = ${platformOsToCFDouble(platform)}`
 }
 
+function buildReadDevicesCFVersionNameCondition(versionName: ReadDevicesParams['version_name']) {
+  if (!versionName)
+    return ''
+  return `version_name = '${escapeSqlString(versionName)}'`
+}
+
 function buildReadDevicesCFOuterConditions(params: ReadDevicesParams, devicesOrder: DevicesOrderCF | null) {
   const conditions = [
     buildReadDevicesCFCursorCondition(params.cursor, devicesOrder),
     buildReadDevicesCFUpdatedAtGtCondition(params.updated_at_gt),
     // Match the latest aggregated custom_id, not historical event rows.
     buildReadDevicesCFCustomIdsCondition(params.customIds),
-    // Match the latest aggregated platform, not historical event rows.
+    // Match the latest aggregated platform/version, not historical event rows.
     buildReadDevicesCFPlatformCondition(params.platform),
+    buildReadDevicesCFVersionNameCondition(params.version_name),
   ]
   return conditions.filter(Boolean)
 }
@@ -1131,10 +1142,6 @@ export function buildReadDevicesCFQuery(params: ReadDevicesParams, customIdMode:
     }
   }
 
-  if (params.version_name) {
-    conditions.push(`blob2 = '${escapeSqlString(params.version_name)}'`)
-  }
-
   if (params.updated_at_gt) {
     const safeUpdatedAtGt = escapeSqlString(formatDateCF(params.updated_at_gt))
     conditions.push(`timestamp > toDateTime('${safeUpdatedAtGt}')`)
diff --git a/tests/cloudflare-device-pagination.unit.test.ts b/tests/cloudflare-device-pagination.unit.test.ts
index 318abdbf54..97284355d0 100644
--- a/tests/cloudflare-device-pagination.unit.test.ts
+++ b/tests/cloudflare-device-pagination.unit.test.ts
@@ -150,7 +150,7 @@ describe('buildReadDevicesCFQuery', () => {
     expect(outerFilterIndex).toBeGreaterThan(groupByIndex)
   })
 
-  it.concurrent('filters devices by latest aggregated platform after grouping', () => {
+  it.concurrent('filters devices by latest aggregated platform and version after grouping', () => {
     const query = buildReadDevicesCFQuery({
       app_id: 'com.example.app',
       platform: 'ios',
@@ -159,12 +159,11 @@ describe('buildReadDevicesCFQuery', () => {
     }, false)
 
     const groupByIndex = query.indexOf('GROUP BY blob1')
-    const versionIndex = query.indexOf(`blob2 = '1.2.3'`)
-    const platformIndex = query.indexOf('WHERE platform = 1')
+    const outerWhereIndex = query.indexOf('WHERE platform = 1 AND version_name = \'1.2.3\'')
+    const altOuterWhereIndex = query.indexOf('WHERE version_name = \'1.2.3\' AND platform = 1')
 
-    expect(versionIndex).toBeGreaterThan(-1)
-    expect(versionIndex).toBeLessThan(groupByIndex)
-    expect(platformIndex).toBeGreaterThan(groupByIndex)
+    expect(query).not.toContain(`blob2 = '1.2.3'`)
+    expect(Math.max(outerWhereIndex, altOuterWhereIndex)).toBeGreaterThan(groupByIndex)
   })
 })
 

From ebfd8863f88d7fde15f4fef521071ff5f20f209d Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 30 Jul 2026 18:32:15 +0000
Subject: [PATCH 06/20] fix(devices): polish device filter UX from review
 feedback

Allow typing any bundle version via datalist, avoid double reload on
app/prop changes, and cancel debounced reload on unmount.

Co-authored-by: Martin DONADIEU <martindonadieu@gmail.com>
---
 src/components/tables/DeviceTable.vue | 33 +++++++++++++++++++--------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/components/tables/DeviceTable.vue b/src/components/tables/DeviceTable.vue
index 88790da393..1c0bdd3bbc 100644
--- a/src/components/tables/DeviceTable.vue
+++ b/src/components/tables/DeviceTable.vue
@@ -2,7 +2,7 @@
 import type { TableColumn } from '../comp_def'
 import type { Database } from '~/types/supabase.types'
 import { useDebounceFn } from '@vueuse/core'
-import { h, onMounted, ref, watch } from 'vue'
+import { h, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
@@ -43,8 +43,10 @@ const filters = ref({
 const selectedPlatform = ref<'' | PlatformOs>('')
 const selectedVersionName = ref(props.versionName ?? '')
 const bundleNames = ref<string[]>([])
+const skipFilterReload = ref(false)
 const offset = 10
 const selectControlClass = 'd-select d-select-bordered h-10 min-h-10 w-full max-w-56 rounded-md border-gray-300 bg-white text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-primary/30 dark:border-gray-600 dark:bg-gray-800 dark:text-white'
+const inputControlClass = 'h-10 w-full max-w-56 rounded-md border border-gray-300 bg-white px-3 text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-primary/30 dark:border-gray-600 dark:bg-gray-800 dark:text-white'
 const columns = ref<TableColumn[]>([
   {
     label: t('device-id'),
@@ -285,6 +287,10 @@ const debouncedReload = useDebounceFn(() => {
   reload()
 }, 300)
 
+onUnmounted(() => {
+  debouncedReload.cancel()
+})
+
 async function fetchDevicesPage(cursor: string | undefined | null) {
   const ids = await resolveDeviceIds()
   const searchTerm = getSearchTerm()
@@ -460,17 +466,24 @@ onMounted(async () => {
 })
 
 watch(() => props.appId, async () => {
+  skipFilterReload.value = true
   selectedPlatform.value = ''
   selectedVersionName.value = props.versionName ?? ''
   await loadBundleNames()
+  skipFilterReload.value = false
   await refreshData()
 })
 
 watch(() => props.versionName, (value) => {
+  skipFilterReload.value = true
   selectedVersionName.value = value ?? ''
+  skipFilterReload.value = false
+  debouncedReload()
 })
 
 watch([selectedPlatform, selectedVersionName], () => {
+  if (skipFilterReload.value)
+    return
   debouncedReload()
 })
 </script>
@@ -507,24 +520,24 @@ watch([selectedPlatform, selectedVersionName], () => {
         <label for="device-table-bundle-filter" class="text-xs font-medium text-slate-600 dark:text-gray-300">
           {{ t('bundle') }}
         </label>
-        <select
+        <input
           id="device-table-bundle-filter"
           v-model="selectedVersionName"
-          :class="selectControlClass"
+          list="device-table-bundle-options"
+          type="text"
+          :class="inputControlClass"
+          :placeholder="t('all-bundles')"
           :aria-label="t('bundle')"
           data-test="device-bundle-filter"
+          autocomplete="off"
         >
-          <option value="">
-            {{ t('all-bundles') }}
-          </option>
+        <datalist id="device-table-bundle-options">
           <option
             v-for="name in bundleNames"
             :key="name"
             :value="name"
-          >
-            {{ name }}
-          </option>
-        </select>
+          />
+        </datalist>
       </div>
     </div>
     <DataTable

From ed12fde4a6816ea0d4a98c5783979e58f7d9e492 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 30 Jul 2026 18:39:36 +0000
Subject: [PATCH 07/20] fix(devices): align CF search with current-state
 filters

Move Analytics Engine search to post-aggregation fields, use DaisyUI
input classes, and replace unsupported debounce cancel with a timer.

Co-authored-by: Martin DONADIEU <martindonadieu@gmail.com>
---
 src/components/tables/DeviceTable.vue         | 30 +++++++++---
 .../functions/_backend/utils/cloudflare.ts    | 48 +++++++++----------
 2 files changed, 47 insertions(+), 31 deletions(-)

diff --git a/src/components/tables/DeviceTable.vue b/src/components/tables/DeviceTable.vue
index 1c0bdd3bbc..4498ae9b6a 100644
--- a/src/components/tables/DeviceTable.vue
+++ b/src/components/tables/DeviceTable.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { TableColumn } from '../comp_def'
 import type { Database } from '~/types/supabase.types'
-import { useDebounceFn } from '@vueuse/core'
 import { h, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
@@ -46,7 +45,7 @@ const bundleNames = ref<string[]>([])
 const skipFilterReload = ref(false)
 const offset = 10
 const selectControlClass = 'd-select d-select-bordered h-10 min-h-10 w-full max-w-56 rounded-md border-gray-300 bg-white text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-primary/30 dark:border-gray-600 dark:bg-gray-800 dark:text-white'
-const inputControlClass = 'h-10 w-full max-w-56 rounded-md border border-gray-300 bg-white px-3 text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-primary/30 dark:border-gray-600 dark:bg-gray-800 dark:text-white'
+const inputControlClass = 'd-input d-input-bordered h-10 w-full max-w-56 rounded-md border-gray-300 bg-white px-3 text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-primary/30 dark:border-gray-600 dark:bg-gray-800 dark:text-white'
 const columns = ref<TableColumn[]>([
   {
     label: t('device-id'),
@@ -283,12 +282,25 @@ async function refreshData() {
   }
 }
 
-const debouncedReload = useDebounceFn(() => {
-  reload()
-}, 300)
+let reloadTimer: ReturnType<typeof setTimeout> | undefined
+
+function cancelScheduledReload() {
+  if (!reloadTimer)
+    return
+  clearTimeout(reloadTimer)
+  reloadTimer = undefined
+}
+
+function debouncedReload() {
+  cancelScheduledReload()
+  reloadTimer = setTimeout(() => {
+    reloadTimer = undefined
+    reload()
+  }, 300)
+}
 
 onUnmounted(() => {
-  debouncedReload.cancel()
+  cancelScheduledReload()
 })
 
 async function fetchDevicesPage(cursor: string | undefined | null) {
@@ -465,16 +477,20 @@ onMounted(async () => {
   await loadBundleNames()
 })
 
-watch(() => props.appId, async () => {
+watch(() => props.appId, async (appId) => {
+  cancelScheduledReload()
   skipFilterReload.value = true
   selectedPlatform.value = ''
   selectedVersionName.value = props.versionName ?? ''
   await loadBundleNames()
+  if (appId !== props.appId)
+    return
   skipFilterReload.value = false
   await refreshData()
 })
 
 watch(() => props.versionName, (value) => {
+  cancelScheduledReload()
   skipFilterReload.value = true
   selectedVersionName.value = value ?? ''
   skipFilterReload.value = false
diff --git a/supabase/functions/_backend/utils/cloudflare.ts b/supabase/functions/_backend/utils/cloudflare.ts
index 83483514b4..8403bb1822 100644
--- a/supabase/functions/_backend/utils/cloudflare.ts
+++ b/supabase/functions/_backend/utils/cloudflare.ts
@@ -967,29 +967,27 @@ export async function countDevicesCF(
       conditions.push(`blob1 IN (${deviceIds.map(id => `'${escapeSqlString(id)}'`).join(', ')})`)
   }
 
-  if (search) {
-    const searchLower = search.toLowerCase()
-    if (deviceIds.length) {
-      conditions.push(`position('${escapeSqlString(searchLower)}' IN toLower(blob5)) > 0`)
-    }
-    else {
-      // Search in device_id, custom_id, or version_name
-      conditions.push(`(position('${escapeSqlString(searchLower)}' IN toLower(blob1)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(blob5)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(blob2)) > 0)`)
-    }
-  }
-
-  // Match latest aggregated version/platform for current-state filtering (same as Supabase devices table).
-  if (versionName || platform) {
+  // Match latest aggregated fields for current-state filtering (same as Supabase devices table).
+  if (versionName || platform || search) {
     const outerConditions: string[] = []
     if (versionName)
       outerConditions.push(`version_name = '${escapeSqlString(versionName)}'`)
     if (platform)
       outerConditions.push(`platform = ${platformOsToCFDouble(platform)}`)
+    if (search) {
+      const searchLower = search.toLowerCase()
+      if (deviceIds.length)
+        outerConditions.push(`position('${escapeSqlString(searchLower)}' IN toLower(custom_id)) > 0`)
+      else
+        outerConditions.push(`(position('${escapeSqlString(searchLower)}' IN toLower(device_id)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(custom_id)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(version_name)) > 0)`)
+    }
 
     const query = `SELECT COUNT() AS total
 FROM (
   SELECT
+    argMax(blob1, timestamp) AS device_id,
     argMax(blob2, timestamp) AS version_name,
+    argMax(blob5, timestamp) AS custom_id,
     argMax(double1, timestamp) AS platform
   FROM device_info
   WHERE ${conditions.join(' AND ')}
@@ -1101,15 +1099,27 @@ function buildReadDevicesCFVersionNameCondition(versionName: ReadDevicesParams['
   return `version_name = '${escapeSqlString(versionName)}'`
 }
 
+function buildReadDevicesCFSearchCondition(search: string | undefined, deviceIds: string[] | undefined) {
+  if (!search)
+    return ''
+
+  const searchLower = search.toLowerCase()
+  if (deviceIds?.length)
+    return `position('${escapeSqlString(searchLower)}' IN toLower(custom_id)) > 0`
+
+  return `(position('${escapeSqlString(searchLower)}' IN toLower(device_id)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(custom_id)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(version_name)) > 0)`
+}
+
 function buildReadDevicesCFOuterConditions(params: ReadDevicesParams, devicesOrder: DevicesOrderCF | null) {
   const conditions = [
     buildReadDevicesCFCursorCondition(params.cursor, devicesOrder),
     buildReadDevicesCFUpdatedAtGtCondition(params.updated_at_gt),
     // Match the latest aggregated custom_id, not historical event rows.
     buildReadDevicesCFCustomIdsCondition(params.customIds),
-    // Match the latest aggregated platform/version, not historical event rows.
+    // Match the latest aggregated platform/version/search, not historical event rows.
     buildReadDevicesCFPlatformCondition(params.platform),
     buildReadDevicesCFVersionNameCondition(params.version_name),
+    buildReadDevicesCFSearchCondition(params.search, params.deviceIds),
   ]
   return conditions.filter(Boolean)
 }
@@ -1132,16 +1142,6 @@ export function buildReadDevicesCFQuery(params: ReadDevicesParams, customIdMode:
     }
   }
 
-  if (params.search) {
-    const searchLower = params.search.toLowerCase()
-    if (params.deviceIds?.length) {
-      conditions.push(`position('${escapeSqlString(searchLower)}' IN toLower(blob5)) > 0`)
-    }
-    else {
-      conditions.push(`(position('${escapeSqlString(searchLower)}' IN toLower(blob1)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(blob5)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(blob2)) > 0)`)
-    }
-  }
-
   if (params.updated_at_gt) {
     const safeUpdatedAtGt = escapeSqlString(formatDateCF(params.updated_at_gt))
     conditions.push(`timestamp > toDateTime('${safeUpdatedAtGt}')`)

From 0271d6a3f9f0febf922409861b2b703324f06c64 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 30 Jul 2026 18:39:45 +0000
Subject: [PATCH 08/20] test(devices): cover CF aggregated search + platform
 filter

Co-authored-by: Martin DONADIEU <martindonadieu@gmail.com>
---
 tests/cloudflare-device-pagination.unit.test.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/tests/cloudflare-device-pagination.unit.test.ts b/tests/cloudflare-device-pagination.unit.test.ts
index 97284355d0..5928876c53 100644
--- a/tests/cloudflare-device-pagination.unit.test.ts
+++ b/tests/cloudflare-device-pagination.unit.test.ts
@@ -165,6 +165,22 @@ describe('buildReadDevicesCFQuery', () => {
     expect(query).not.toContain(`blob2 = '1.2.3'`)
     expect(Math.max(outerWhereIndex, altOuterWhereIndex)).toBeGreaterThan(groupByIndex)
   })
+
+  it.concurrent('applies search against latest aggregated device fields after grouping', () => {
+    const query = buildReadDevicesCFQuery({
+      app_id: 'com.example.app',
+      platform: 'android',
+      search: 'abc',
+      limit: 1,
+    }, false)
+
+    const groupByIndex = query.indexOf('GROUP BY blob1')
+    const searchIndex = query.indexOf(`position('abc' IN toLower(device_id))`)
+
+    expect(query).not.toContain(`toLower(blob1)`)
+    expect(searchIndex).toBeGreaterThan(groupByIndex)
+    expect(query.indexOf('platform = 0')).toBeGreaterThan(groupByIndex)
+  })
 })
 
 describe('countDevicesCF', () => {

From 46d5c2621e4dbde29ae4fda32c8e1b6ccf20f9c1 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 30 Jul 2026 21:14:34 +0000
Subject: [PATCH 09/20] fix(devices): move platform/bundle filters into Filters
 dropdown

Remove the extra toolbar row and put platform + bundle controls in the
existing DataTable Filters menu so the table toolbar stays one line.

Co-authored-by: Martin DONADIEU <martindonadieu@gmail.com>
---
 playwright/visual-diff.config.ts      |  11 ++-
 src/components/DataTable.vue          |  35 +++++--
 src/components/tables/DeviceTable.vue | 133 +++++++++++++-------------
 3 files changed, 104 insertions(+), 75 deletions(-)

diff --git a/playwright/visual-diff.config.ts b/playwright/visual-diff.config.ts
index 018ff6372c..3f4f4a1a97 100644
--- a/playwright/visual-diff.config.ts
+++ b/playwright/visual-diff.config.ts
@@ -19,7 +19,16 @@ export const visualDiffRoutes: VisualDiffRoute[] = [
   { slug: 'apps', path: '/apps', auth: true },
   { slug: 'app-overview', path: '/app/com.demo.app', auth: true },
   { slug: 'channels', path: '/app/com.demo.app/channels', auth: true },
-  { slug: 'devices', path: '/app/com.demo.app/devices', auth: true },
+  {
+    slug: 'devices',
+    path: '/app/com.demo.app/devices',
+    auth: true,
+    prepare: async (page) => {
+      // Open the Filters dropdown so platform/bundle controls are visible in the capture.
+      await page.getByRole('button', { name: /filters/i }).click()
+      await page.locator('[data-test="device-platform-filter"]').waitFor({ state: 'visible' })
+    },
+  },
   { slug: 'observe', path: '/app/com.demo.app/observe', auth: true },
   { slug: 'observe-plugins', path: '/app/com.demo.app/observe/plugins', auth: true },
   {
diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
index ae111ee4c3..fd14a9b825 100644
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@@ -9,6 +9,7 @@ import {
   onMounted,
   onUnmounted,
   ref,
+  useSlots,
   watch,
 } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -31,6 +32,8 @@ interface Props {
   filterText?: string
   filters?: { [key: string]: boolean }
   filterLabels?: { [key: string]: string }
+  /** Extra active filters contributed by the filter-extras slot (e.g. selects). */
+  extraFilterCount?: number
   searchPlaceholder?: string
   showAdd?: boolean
   addButtonTestId?: string
@@ -49,6 +52,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   autoReload: true,
   mobileFixedPagination: true,
+  extraFilterCount: 0,
 })
 const emit = defineEmits([
   'add',
@@ -66,6 +70,7 @@ const emit = defineEmits([
   'selectRow',
   'massDelete',
 ])
+const slots = useSlots()
 const { t } = useI18n()
 const searchVal = ref(props.search ?? '')
 const pendingReset = ref(false)
@@ -95,15 +100,20 @@ const filterList = computed(() => {
   return Object.keys(props.filters)
 })
 const filterActivated = computed(() => {
-  if (!props.filters)
-    return []
-  return Object.keys(props.filters).reduce((acc, key) => {
-    if (props.filters![key])
-      acc += 1
-    return acc
-  }, 0)
+  const booleanCount = props.filters
+    ? Object.keys(props.filters).reduce((acc, key) => {
+        if (props.filters![key])
+          acc += 1
+        return acc
+      }, 0)
+    : 0
+  return booleanCount + (props.extraFilterCount ?? 0)
 })
 
+const showFilterMenu = computed(() =>
+  Boolean(props.filterText && (filterList.value.length || slots['filter-extras'])),
+)
+
 function getFilterLabel(filter: string) {
   return props.filterLabels?.[filter] ?? t(filter)
 }
@@ -497,7 +507,7 @@ const paginationClass = computed(() => props.mobileFixedPagination
             <span class="hidden text-sm md:block">{{ t("add-one") }}</span>
           </button>
         </div>
-        <div v-if="filterText && filterList.length" class="h-10 d-dropdown">
+        <div v-if="showFilterMenu" class="relative h-10 d-dropdown">
           <button
             tabindex="0"
             class="inline-flex items-center py-1.5 px-3 mr-2 h-full text-sm font-medium text-gray-500 bg-white rounded-md border border-gray-300 cursor-pointer dark:text-white dark:bg-gray-800 dark:border-gray-600 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700 focus:outline-hidden"
@@ -509,10 +519,17 @@ const paginationClass = computed(() => props.mobileFixedPagination
               {{ filterActivated }}
             </div>
             <IconFilter class="w-4 h-4 mr-2" />
-            <span class="hidden md:block">{{ t(filterText) }}</span>
+            <span class="hidden md:block">{{ t(filterText ?? '') }}</span>
             <IconDown class="hidden w-4 h-4 ml-2 md:block" />
           </button>
           <ul class="max-h-80 w-72 max-w-[calc(100vw-2rem)] overflow-y-auto border border-gray-200 bg-white p-2 shadow-xl d-dropdown-content d-menu rounded-box z-20 dark:border-gray-700 dark:bg-base-200">
+            <li v-if="$slots['filter-extras']" class="p-0!" @click.stop>
+              <slot name="filter-extras" />
+            </li>
+            <li
+              v-if="$slots['filter-extras'] && filterList.length"
+              class="my-1 border-t border-gray-200 dark:border-gray-600"
+            />
             <li v-for="(f, i) in filterList" :key="i">
               <div
                 class="flex min-h-10 items-center rounded-md p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600"
diff --git a/src/components/tables/DeviceTable.vue b/src/components/tables/DeviceTable.vue
index 4498ae9b6a..90d7667b9f 100644
--- a/src/components/tables/DeviceTable.vue
+++ b/src/components/tables/DeviceTable.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TableColumn } from '../comp_def'
 import type { Database } from '~/types/supabase.types'
-import { h, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, h, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
@@ -44,8 +44,9 @@ const selectedVersionName = ref(props.versionName ?? '')
 const bundleNames = ref<string[]>([])
 const skipFilterReload = ref(false)
 const offset = 10
-const selectControlClass = 'd-select d-select-bordered h-10 min-h-10 w-full max-w-56 rounded-md border-gray-300 bg-white text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-primary/30 dark:border-gray-600 dark:bg-gray-800 dark:text-white'
-const inputControlClass = 'd-input d-input-bordered h-10 w-full max-w-56 rounded-md border-gray-300 bg-white px-3 text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-primary/30 dark:border-gray-600 dark:bg-gray-800 dark:text-white'
+const activeExtraFilters = computed(() =>
+  (selectedPlatform.value ? 1 : 0) + (selectedVersionName.value.trim() ? 1 : 0),
+)
 const columns = ref<TableColumn[]>([
   {
     label: t('device-id'),
@@ -505,67 +506,69 @@ watch([selectedPlatform, selectedVersionName], () => {
 </script>
 
 <template>
-  <div>
-    <div class="flex flex-wrap items-end gap-3 px-4 pt-4">
-      <div class="flex min-w-40 flex-col gap-1">
-        <label for="device-table-platform-filter" class="text-xs font-medium text-slate-600 dark:text-gray-300">
-          {{ t('platform') }}
-        </label>
-        <select
-          id="device-table-platform-filter"
-          v-model="selectedPlatform"
-          :class="selectControlClass"
-          :aria-label="t('platform')"
-          data-test="device-platform-filter"
-        >
-          <option value="">
-            {{ t('all-platforms') }}
-          </option>
-          <option value="ios">
-            {{ t('platform-ios') }}
-          </option>
-          <option value="android">
-            {{ t('platform-android') }}
-          </option>
-          <option value="electron">
-            {{ t('platform-electron') }}
-          </option>
-        </select>
+  <DataTable
+    v-model:filters="filters" v-model:columns="columns" v-model:current-page="currentPage" v-model:search="search"
+    :total="total" :offset="offset" :element-list="elements"
+    filter-text="Filters"
+    :extra-filter-count="activeExtraFilters"
+    :show-add="showAddButton"
+    :is-loading="isLoading"
+    :search-placeholder="t('search-by-device-id')"
+    @add="handleAddDevice"
+    @reload="reload()"
+    @reset="refreshData()"
+  >
+    <template #filter-extras>
+      <div class="flex w-full flex-col gap-3 p-2" @click.stop>
+        <div class="flex flex-col gap-1">
+          <label for="device-table-platform-filter" class="text-xs font-medium text-slate-600 dark:text-gray-300">
+            {{ t('platform') }}
+          </label>
+          <select
+            id="device-table-platform-filter"
+            v-model="selectedPlatform"
+            class="d-select d-select-bordered d-select-sm w-full border-gray-300 bg-white text-slate-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+            :aria-label="t('platform')"
+            data-test="device-platform-filter"
+          >
+            <option value="">
+              {{ t('all-platforms') }}
+            </option>
+            <option value="ios">
+              {{ t('platform-ios') }}
+            </option>
+            <option value="android">
+              {{ t('platform-android') }}
+            </option>
+            <option value="electron">
+              {{ t('platform-electron') }}
+            </option>
+          </select>
+        </div>
+        <div class="flex flex-col gap-1">
+          <label for="device-table-bundle-filter" class="text-xs font-medium text-slate-600 dark:text-gray-300">
+            {{ t('bundle') }}
+          </label>
+          <input
+            id="device-table-bundle-filter"
+            v-model="selectedVersionName"
+            list="device-table-bundle-options"
+            type="text"
+            class="d-input d-input-bordered d-input-sm w-full border-gray-300 bg-white text-slate-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+            :placeholder="t('all-bundles')"
+            :aria-label="t('bundle')"
+            data-test="device-bundle-filter"
+            autocomplete="off"
+          >
+          <datalist id="device-table-bundle-options">
+            <option
+              v-for="name in bundleNames"
+              :key="name"
+              :value="name"
+            />
+          </datalist>
+        </div>
       </div>
-      <div class="flex min-w-48 flex-col gap-1">
-        <label for="device-table-bundle-filter" class="text-xs font-medium text-slate-600 dark:text-gray-300">
-          {{ t('bundle') }}
-        </label>
-        <input
-          id="device-table-bundle-filter"
-          v-model="selectedVersionName"
-          list="device-table-bundle-options"
-          type="text"
-          :class="inputControlClass"
-          :placeholder="t('all-bundles')"
-          :aria-label="t('bundle')"
-          data-test="device-bundle-filter"
-          autocomplete="off"
-        >
-        <datalist id="device-table-bundle-options">
-          <option
-            v-for="name in bundleNames"
-            :key="name"
-            :value="name"
-          />
-        </datalist>
-      </div>
-    </div>
-    <DataTable
-      v-model:filters="filters" v-model:columns="columns" v-model:current-page="currentPage" v-model:search="search"
-      :total="total" :offset="offset" :element-list="elements"
-      filter-text="Filters"
-      :show-add="showAddButton"
-      :is-loading="isLoading"
-      :search-placeholder="t('search-by-device-id')"
-      @add="handleAddDevice"
-      @reload="reload()"
-      @reset="refreshData()"
-    />
-  </div>
+    </template>
+  </DataTable>
 </template>

From db14285153d1f66c545e816e2afcd257e5818518 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 30 Jul 2026 21:16:41 +0000
Subject: [PATCH 10/20] fix(devices): style Filters dropdown extras without
 menu chrome

Co-authored-by: Martin DONADIEU <martindonadieu@gmail.com>
---
 src/components/DataTable.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
index fd14a9b825..86c5a8b113 100644
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@@ -523,12 +523,17 @@ const paginationClass = computed(() => props.mobileFixedPagination
             <IconDown class="hidden w-4 h-4 ml-2 md:block" />
           </button>
           <ul class="max-h-80 w-72 max-w-[calc(100vw-2rem)] overflow-y-auto border border-gray-200 bg-white p-2 shadow-xl d-dropdown-content d-menu rounded-box z-20 dark:border-gray-700 dark:bg-base-200">
-            <li v-if="$slots['filter-extras']" class="p-0!" @click.stop>
+            <li
+              v-if="$slots['filter-extras']"
+              class="menu-title! m-0! p-0! text-inherit! opacity-100!"
+              @click.stop
+            >
               <slot name="filter-extras" />
             </li>
-            <li
+            <div
               v-if="$slots['filter-extras'] && filterList.length"
               class="my-1 border-t border-gray-200 dark:border-gray-600"
+              role="separator"
             />
             <li v-for="(f, i) in filterList" :key="i">
               <div

From 56d758bbf51bbb989f1db21647c5743180b0b79f Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 30 Jul 2026 21:22:18 +0000
Subject: [PATCH 11/20] fix(visual-diff): tolerate missing platform filter on
 base capture

Co-authored-by: Martin DONADIEU <martindonadieu@gmail.com>
---
 playwright/visual-diff.config.ts | 8 ++++++--
 src/components/DataTable.vue     | 4 ++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/playwright/visual-diff.config.ts b/playwright/visual-diff.config.ts
index 3f4f4a1a97..de36b73035 100644
--- a/playwright/visual-diff.config.ts
+++ b/playwright/visual-diff.config.ts
@@ -24,9 +24,13 @@ export const visualDiffRoutes: VisualDiffRoute[] = [
     path: '/app/com.demo.app/devices',
     auth: true,
     prepare: async (page) => {
-      // Open the Filters dropdown so platform/bundle controls are visible in the capture.
+      // Open Filters so reviewers see the menu (platform/bundle only exist on head).
       await page.getByRole('button', { name: /filters/i }).click()
-      await page.locator('[data-test="device-platform-filter"]').waitFor({ state: 'visible' })
+      const platformFilter = page.locator('[data-test="device-platform-filter"]')
+      if (await platformFilter.count())
+        await platformFilter.waitFor({ state: 'visible' })
+      else
+        await page.getByText('Override', { exact: true }).waitFor({ state: 'visible' })
     },
   },
   { slug: 'observe', path: '/app/com.demo.app/observe', auth: true },
diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
index 86c5a8b113..74f95618f5 100644
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@@ -530,9 +530,9 @@ const paginationClass = computed(() => props.mobileFixedPagination
             >
               <slot name="filter-extras" />
             </li>
-            <div
+            <li
               v-if="$slots['filter-extras'] && filterList.length"
-              class="my-1 border-t border-gray-200 dark:border-gray-600"
+              class="pointer-events-none m-0! h-px! min-h-0! p-0! bg-gray-200 dark:bg-gray-600"
               role="separator"
             />
             <li v-for="(f, i) in filterList" :key="i">

From b0351743f0c7dccb51d4cd05bc4f6b80d32b84e7 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 30 Jul 2026 22:16:21 +0000
Subject: [PATCH 12/20] fix(devices): align Filters dropdown fields and
 checkboxes

Co-authored-by: Martin DONADIEU <martindonadieu@gmail.com>
---
 src/components/DataTable.vue          | 46 +++++++------
 src/components/tables/DeviceTable.vue | 96 +++++++++++++--------------
 2 files changed, 71 insertions(+), 71 deletions(-)

diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
index 74f95618f5..76d09d3cfb 100644
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@@ -522,39 +522,41 @@ const paginationClass = computed(() => props.mobileFixedPagination
             <span class="hidden md:block">{{ t(filterText ?? '') }}</span>
             <IconDown class="hidden w-4 h-4 ml-2 md:block" />
           </button>
-          <ul class="max-h-80 w-72 max-w-[calc(100vw-2rem)] overflow-y-auto border border-gray-200 bg-white p-2 shadow-xl d-dropdown-content d-menu rounded-box z-20 dark:border-gray-700 dark:bg-base-200">
-            <li
-              v-if="$slots['filter-extras']"
-              class="menu-title! m-0! p-0! text-inherit! opacity-100!"
-              @click.stop
-            >
+          <div
+            class="max-h-80 w-72 max-w-[calc(100vw-2rem)] overflow-y-auto border border-gray-200 bg-white p-3 shadow-xl d-dropdown-content rounded-box z-20 dark:border-gray-700 dark:bg-base-200"
+            @click.stop
+          >
+            <div v-if="$slots['filter-extras']" class="flex flex-col gap-3">
               <slot name="filter-extras" />
-            </li>
-            <li
+            </div>
+            <div
               v-if="$slots['filter-extras'] && filterList.length"
-              class="pointer-events-none m-0! h-px! min-h-0! p-0! bg-gray-200 dark:bg-gray-600"
+              class="my-3 border-t border-gray-200 dark:border-gray-600"
               role="separator"
             />
-            <li v-for="(f, i) in filterList" :key="i">
-              <div
-                class="flex min-h-10 items-center rounded-md p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600"
+            <div v-if="filterList.length" class="flex flex-col gap-1">
+              <label
+                v-for="(f, i) in filterList"
+                :key="i"
+                :for="`filter-radio-example-${i}`"
+                class="flex min-h-9 cursor-pointer items-center rounded-md px-1 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-600"
               >
                 <input
-                  :id="`filter-radio-example-${i}`" :checked="filters?.[f]" type="checkbox"
+                  :id="`filter-radio-example-${i}`"
+                  :checked="filters?.[f]"
+                  type="checkbox"
                   :name="`filter-radio-${i}`"
-                  class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:ring-offset-gray-800 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 dark:focus:ring-offset-gray-800"
+                  class="h-4 w-4 shrink-0 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600"
                   @change="
                     emit('update:filters', { ...filters, [f]: !filters?.[f] })
                   "
                 >
-                <label
-                  :for="`filter-radio-example-${i}`"
-                  class="w-full min-w-0 truncate ml-2 text-sm font-medium text-gray-900 rounded-sm cursor-pointer dark:text-gray-300"
-                >{{
-                  getFilterLabel(f) }}</label>
-              </div>
-            </li>
-          </ul>
+                <span class="ml-2 min-w-0 truncate text-sm font-medium text-gray-900 dark:text-gray-300">
+                  {{ getFilterLabel(f) }}
+                </span>
+              </label>
+            </div>
+          </div>
         </div>
       </div>
       <button
diff --git a/src/components/tables/DeviceTable.vue b/src/components/tables/DeviceTable.vue
index 90d7667b9f..1264dc4ba1 100644
--- a/src/components/tables/DeviceTable.vue
+++ b/src/components/tables/DeviceTable.vue
@@ -519,55 +519,53 @@ watch([selectedPlatform, selectedVersionName], () => {
     @reset="refreshData()"
   >
     <template #filter-extras>
-      <div class="flex w-full flex-col gap-3 p-2" @click.stop>
-        <div class="flex flex-col gap-1">
-          <label for="device-table-platform-filter" class="text-xs font-medium text-slate-600 dark:text-gray-300">
-            {{ t('platform') }}
-          </label>
-          <select
-            id="device-table-platform-filter"
-            v-model="selectedPlatform"
-            class="d-select d-select-bordered d-select-sm w-full border-gray-300 bg-white text-slate-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
-            :aria-label="t('platform')"
-            data-test="device-platform-filter"
-          >
-            <option value="">
-              {{ t('all-platforms') }}
-            </option>
-            <option value="ios">
-              {{ t('platform-ios') }}
-            </option>
-            <option value="android">
-              {{ t('platform-android') }}
-            </option>
-            <option value="electron">
-              {{ t('platform-electron') }}
-            </option>
-          </select>
-        </div>
-        <div class="flex flex-col gap-1">
-          <label for="device-table-bundle-filter" class="text-xs font-medium text-slate-600 dark:text-gray-300">
-            {{ t('bundle') }}
-          </label>
-          <input
-            id="device-table-bundle-filter"
-            v-model="selectedVersionName"
-            list="device-table-bundle-options"
-            type="text"
-            class="d-input d-input-bordered d-input-sm w-full border-gray-300 bg-white text-slate-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
-            :placeholder="t('all-bundles')"
-            :aria-label="t('bundle')"
-            data-test="device-bundle-filter"
-            autocomplete="off"
-          >
-          <datalist id="device-table-bundle-options">
-            <option
-              v-for="name in bundleNames"
-              :key="name"
-              :value="name"
-            />
-          </datalist>
-        </div>
+      <div class="flex w-full flex-col gap-1">
+        <label for="device-table-platform-filter" class="text-xs font-medium text-slate-600 dark:text-gray-300">
+          {{ t('platform') }}
+        </label>
+        <select
+          id="device-table-platform-filter"
+          v-model="selectedPlatform"
+          class="d-select d-select-bordered d-select-sm h-9 w-full min-h-9 border-gray-300 bg-white text-sm text-slate-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+          :aria-label="t('platform')"
+          data-test="device-platform-filter"
+        >
+          <option value="">
+            {{ t('all-platforms') }}
+          </option>
+          <option value="ios">
+            {{ t('platform-ios') }}
+          </option>
+          <option value="android">
+            {{ t('platform-android') }}
+          </option>
+          <option value="electron">
+            {{ t('platform-electron') }}
+          </option>
+        </select>
+      </div>
+      <div class="flex w-full flex-col gap-1">
+        <label for="device-table-bundle-filter" class="text-xs font-medium text-slate-600 dark:text-gray-300">
+          {{ t('bundle') }}
+        </label>
+        <input
+          id="device-table-bundle-filter"
+          v-model="selectedVersionName"
+          list="device-table-bundle-options"
+          type="text"
+          class="d-input d-input-bordered d-input-sm h-9 w-full border-gray-300 bg-white text-sm text-slate-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+          :placeholder="t('all-bundles')"
+          :aria-label="t('bundle')"
+          data-test="device-bundle-filter"
+          autocomplete="off"
+        >
+        <datalist id="device-table-bundle-options">
+          <option
+            v-for="name in bundleNames"
+            :key="name"
+            :value="name"
+          />
+        </datalist>
       </div>
     </template>
   </DataTable>

From fcef040d1cced07c921540bfc79ce518ef5effa7 Mon Sep 17 00:00:00 2001
From: Martin Donadieu <martindonadieu@gmail.com>
Date: Fri, 31 Jul 2026 01:39:33 +0300
Subject: [PATCH 13/20] fix(devices): open platform/bundle filters in a modal

Replace the cramped Filters dropdown with a focused modal so platform chips, bundle input, and status options are readable and touch-friendly.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../device-filters-modal-full.webp            | Bin 0 -> 27954 bytes
 .../pr-screenshots/device-filters-modal.webp  | Bin 0 -> 9422 bytes
 messages/en.json                              |   4 +
 playwright/visual-diff.config.ts              |   5 +-
 src/components/DataTable.vue                  | 156 +++++++++++++-----
 src/components/tables/DeviceTable.vue         |  63 ++++---
 6 files changed, 167 insertions(+), 61 deletions(-)
 create mode 100644 .github/pr-screenshots/device-filters-modal-full.webp
 create mode 100644 .github/pr-screenshots/device-filters-modal.webp

diff --git a/.github/pr-screenshots/device-filters-modal-full.webp b/.github/pr-screenshots/device-filters-modal-full.webp
new file mode 100644
index 0000000000000000000000000000000000000000..b59c1d87a1ed2415fd8da3ec797c1dda9935d17a
GIT binary patch
literal 27954
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
OHzR$1{WnYQtN;Mqz6QJi

literal 0
HcmV?d00001

diff --git a/.github/pr-screenshots/device-filters-modal.webp b/.github/pr-screenshots/device-filters-modal.webp
new file mode 100644
index 0000000000000000000000000000000000000000..769a8555af7d9cc1522f74aae96b3af2ec5a0060
GIT binary patch
literal 9422
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

literal 0
HcmV?d00001

diff --git a/messages/en.json b/messages/en.json
index 3b478397ce..5f8ad60e30 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -781,6 +781,7 @@
   "choose-which-channel-to-link-this-bundle-to": "Choose which channel to link this bundle to",
   "cli-doc": "CLI doc",
   "cli-version": "CLI version",
+  "clear-filters": "Clear filters",
   "close": "Close",
   "cloud-replication-delay": "Changes will take up to 60 seconds to propagate globally",
   "commands": "commands",
@@ -1127,6 +1128,7 @@
   "detailed-usage-plan": "Detailed usage",
   "details": "Details",
   "device": "Device",
+  "done": "Done",
   "device-id": "Device ID",
   "device-id-placeholder": "00000000-0000-0000-0000-000000000000",
   "device-injected": "This device has been created manually to add an overwrite.",
@@ -1274,6 +1276,8 @@
   "feel-magic-of-capgo": "Feel the magic of:",
   "fetching-release-data": "Fetching release data...",
   "filter-actions": "Actions",
+  "filter-options": "Options",
+  "filters-modal-subtitle": "Narrow results by platform, bundle, or status.",
   "filter-shortcut-all-fail": "All failures",
   "first-name": "First name",
   "first-name-required": "First name required",
diff --git a/playwright/visual-diff.config.ts b/playwright/visual-diff.config.ts
index de36b73035..7be7630982 100644
--- a/playwright/visual-diff.config.ts
+++ b/playwright/visual-diff.config.ts
@@ -24,8 +24,11 @@ export const visualDiffRoutes: VisualDiffRoute[] = [
     path: '/app/com.demo.app/devices',
     auth: true,
     prepare: async (page) => {
-      // Open Filters so reviewers see the menu (platform/bundle only exist on head).
+      // Open Filters modal so reviewers see platform/bundle controls.
       await page.getByRole('button', { name: /filters/i }).click()
+      const modal = page.locator('[data-test="data-table-filters-modal"]')
+      if (await modal.count())
+        await modal.waitFor({ state: 'visible' })
       const platformFilter = page.locator('[data-test="device-platform-filter"]')
       if (await platformFilter.count())
         await platformFilter.waitFor({ state: 'visible' })
diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
index 76d09d3cfb..fbaad48fbd 100644
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@@ -14,7 +14,7 @@ import {
 } from 'vue'
 import { useI18n } from 'vue-i18n'
 import IconTrash from '~icons/heroicons/trash'
-import IconDown from '~icons/ic/round-keyboard-arrow-down'
+import IconClose from '~icons/heroicons/x-mark'
 import IconPrev from '~icons/ic/round-keyboard-arrow-left'
 import IconNext from '~icons/ic/round-keyboard-arrow-right'
 import IconFastBackward from '~icons/ic/round-keyboard-double-arrow-left'
@@ -69,7 +69,9 @@ const emit = defineEmits([
   'plusClick',
   'selectRow',
   'massDelete',
+  'clearExtraFilters',
 ])
+const isFilterModalOpen = ref(false)
 const slots = useSlots()
 const { t } = useI18n()
 const searchVal = ref(props.search ?? '')
@@ -118,6 +120,24 @@ function getFilterLabel(filter: string) {
   return props.filterLabels?.[filter] ?? t(filter)
 }
 
+function openFilterModal() {
+  isFilterModalOpen.value = true
+}
+
+function closeFilterModal() {
+  isFilterModalOpen.value = false
+}
+
+function clearAllFilters() {
+  if (props.filters) {
+    const cleared = Object.fromEntries(
+      Object.keys(props.filters).map(key => [key, false]),
+    ) as { [key: string]: boolean }
+    emit('update:filters', cleared)
+  }
+  emit('clearExtraFilters')
+}
+
 function sortClick(key: number) {
   if (!props.columns[key].sortable)
     return
@@ -507,10 +527,14 @@ const paginationClass = computed(() => props.mobileFixedPagination
             <span class="hidden text-sm md:block">{{ t("add-one") }}</span>
           </button>
         </div>
-        <div v-if="showFilterMenu" class="relative h-10 d-dropdown">
+        <div v-if="showFilterMenu" class="relative h-10">
           <button
-            tabindex="0"
+            type="button"
             class="inline-flex items-center py-1.5 px-3 mr-2 h-full text-sm font-medium text-gray-500 bg-white rounded-md border border-gray-300 cursor-pointer dark:text-white dark:bg-gray-800 dark:border-gray-600 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700 focus:outline-hidden"
+            data-test="data-table-filters-open"
+            :aria-expanded="isFilterModalOpen"
+            aria-haspopup="dialog"
+            @click="openFilterModal"
           >
             <div
               v-if="filterActivated"
@@ -520,43 +544,101 @@ const paginationClass = computed(() => props.mobileFixedPagination
             </div>
             <IconFilter class="w-4 h-4 mr-2" />
             <span class="hidden md:block">{{ t(filterText ?? '') }}</span>
-            <IconDown class="hidden w-4 h-4 ml-2 md:block" />
           </button>
-          <div
-            class="max-h-80 w-72 max-w-[calc(100vw-2rem)] overflow-y-auto border border-gray-200 bg-white p-3 shadow-xl d-dropdown-content rounded-box z-20 dark:border-gray-700 dark:bg-base-200"
-            @click.stop
-          >
-            <div v-if="$slots['filter-extras']" class="flex flex-col gap-3">
-              <slot name="filter-extras" />
-            </div>
+          <Teleport to="body">
             <div
-              v-if="$slots['filter-extras'] && filterList.length"
-              class="my-3 border-t border-gray-200 dark:border-gray-600"
-              role="separator"
-            />
-            <div v-if="filterList.length" class="flex flex-col gap-1">
-              <label
-                v-for="(f, i) in filterList"
-                :key="i"
-                :for="`filter-radio-example-${i}`"
-                class="flex min-h-9 cursor-pointer items-center rounded-md px-1 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-600"
-              >
-                <input
-                  :id="`filter-radio-example-${i}`"
-                  :checked="filters?.[f]"
-                  type="checkbox"
-                  :name="`filter-radio-${i}`"
-                  class="h-4 w-4 shrink-0 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600"
-                  @change="
-                    emit('update:filters', { ...filters, [f]: !filters?.[f] })
-                  "
-                >
-                <span class="ml-2 min-w-0 truncate text-sm font-medium text-gray-900 dark:text-gray-300">
-                  {{ getFilterLabel(f) }}
-                </span>
-              </label>
+              v-if="isFilterModalOpen"
+              class="d-modal d-modal-open"
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby="data-table-filters-title"
+              data-test="data-table-filters-modal"
+            >
+              <div class="d-modal-box w-[calc(100vw-2rem)] max-w-md rounded-lg border border-slate-200 bg-white p-0 shadow-2xl dark:border-slate-700 dark:bg-slate-900">
+                <div class="flex items-start justify-between gap-3 border-b border-slate-100 px-5 py-4 dark:border-slate-800">
+                  <div class="min-w-0">
+                    <h2
+                      id="data-table-filters-title"
+                      class="text-lg font-semibold leading-7 text-slate-950 dark:text-white"
+                    >
+                      {{ t(filterText ?? 'Filters') }}
+                    </h2>
+                    <p class="mt-1 text-sm leading-5 text-slate-600 dark:text-slate-300">
+                      {{ t('filters-modal-subtitle') }}
+                    </p>
+                  </div>
+                  <button
+                    type="button"
+                    class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-md text-slate-500 transition-colors duration-200 hover:bg-slate-100 hover:text-slate-900 focus:outline-hidden focus:ring-2 focus:ring-azure-500 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white"
+                    :aria-label="t('close')"
+                    data-test="data-table-filters-close"
+                    @click="closeFilterModal"
+                  >
+                    <IconClose class="h-5 w-5" />
+                  </button>
+                </div>
+
+                <div class="max-h-[min(28rem,60vh)] space-y-5 overflow-y-auto px-5 py-5">
+                  <div v-if="$slots['filter-extras']" class="space-y-4">
+                    <slot name="filter-extras" />
+                  </div>
+                  <div
+                    v-if="$slots['filter-extras'] && filterList.length"
+                    class="border-t border-slate-200 dark:border-slate-700"
+                    role="separator"
+                  />
+                  <fieldset v-if="filterList.length" class="space-y-1">
+                    <legend class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
+                      {{ t('filter-options') }}
+                    </legend>
+                    <label
+                      v-for="(f, i) in filterList"
+                      :key="i"
+                      :for="`filter-radio-example-${i}`"
+                      class="flex min-h-11 cursor-pointer items-center rounded-md px-2 py-2 transition-colors duration-150 hover:bg-slate-50 dark:hover:bg-slate-800"
+                    >
+                      <input
+                        :id="`filter-radio-example-${i}`"
+                        :checked="filters?.[f]"
+                        type="checkbox"
+                        :name="`filter-radio-${i}`"
+                        class="h-4 w-4 shrink-0 rounded border-gray-300 text-azure-500 focus:ring-2 focus:ring-azure-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800"
+                        @change="
+                          emit('update:filters', { ...filters, [f]: !filters?.[f] })
+                        "
+                      >
+                      <span class="ml-3 min-w-0 text-sm font-medium text-slate-900 dark:text-slate-200">
+                        {{ getFilterLabel(f) }}
+                      </span>
+                    </label>
+                  </fieldset>
+                </div>
+
+                <div class="flex flex-col-reverse gap-2 border-t border-slate-100 px-5 py-4 sm:flex-row sm:items-center sm:justify-between dark:border-slate-800">
+                  <button
+                    type="button"
+                    class="d-btn d-btn-ghost min-h-11"
+                    data-test="data-table-filters-clear"
+                    :disabled="!filterActivated"
+                    @click="clearAllFilters"
+                  >
+                    {{ t('clear-filters') }}
+                  </button>
+                  <button
+                    type="button"
+                    class="d-btn d-btn-primary min-h-11"
+                    data-test="data-table-filters-done"
+                    @click="closeFilterModal"
+                  >
+                    {{ t('done') }}
+                  </button>
+                </div>
+              </div>
+              <form method="dialog" class="d-modal-backdrop">
+                <button type="button" :aria-label="t('close')" @click="closeFilterModal" />
+              </form>
             </div>
-          </div>
+          </Teleport>
         </div>
       </div>
       <button
diff --git a/src/components/tables/DeviceTable.vue b/src/components/tables/DeviceTable.vue
index 1264dc4ba1..f6bbe69106 100644
--- a/src/components/tables/DeviceTable.vue
+++ b/src/components/tables/DeviceTable.vue
@@ -47,6 +47,20 @@ const offset = 10
 const activeExtraFilters = computed(() =>
   (selectedPlatform.value ? 1 : 0) + (selectedVersionName.value.trim() ? 1 : 0),
 )
+const platformOptions = computed(() => [
+  { value: '' as const, label: t('all-platforms') },
+  { value: 'ios' as const, label: t('platform-ios') },
+  { value: 'android' as const, label: t('platform-android') },
+  { value: 'electron' as const, label: t('platform-electron') },
+])
+
+function clearExtraFilters() {
+  skipFilterReload.value = true
+  selectedPlatform.value = ''
+  selectedVersionName.value = ''
+  skipFilterReload.value = false
+  debouncedReload()
+}
 const columns = ref<TableColumn[]>([
   {
     label: t('device-id'),
@@ -517,35 +531,38 @@ watch([selectedPlatform, selectedVersionName], () => {
     @add="handleAddDevice"
     @reload="reload()"
     @reset="refreshData()"
+    @clear-extra-filters="clearExtraFilters"
   >
     <template #filter-extras>
-      <div class="flex w-full flex-col gap-1">
-        <label for="device-table-platform-filter" class="text-xs font-medium text-slate-600 dark:text-gray-300">
+      <fieldset>
+        <legend class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
           {{ t('platform') }}
-        </label>
-        <select
+        </legend>
+        <div
           id="device-table-platform-filter"
-          v-model="selectedPlatform"
-          class="d-select d-select-bordered d-select-sm h-9 w-full min-h-9 border-gray-300 bg-white text-sm text-slate-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+          class="grid grid-cols-2 gap-2 sm:grid-cols-4"
+          role="group"
           :aria-label="t('platform')"
           data-test="device-platform-filter"
         >
-          <option value="">
-            {{ t('all-platforms') }}
-          </option>
-          <option value="ios">
-            {{ t('platform-ios') }}
-          </option>
-          <option value="android">
-            {{ t('platform-android') }}
-          </option>
-          <option value="electron">
-            {{ t('platform-electron') }}
-          </option>
-        </select>
-      </div>
-      <div class="flex w-full flex-col gap-1">
-        <label for="device-table-bundle-filter" class="text-xs font-medium text-slate-600 dark:text-gray-300">
+          <button
+            v-for="option in platformOptions"
+            :key="option.value || 'all'"
+            type="button"
+            class="min-h-11 rounded-md border px-2 text-sm font-medium transition-colors duration-150 focus:outline-hidden focus:ring-2 focus:ring-azure-500"
+            :class="selectedPlatform === option.value
+              ? 'border-azure-500 bg-azure-500/10 text-azure-700 dark:border-azure-400 dark:bg-azure-400/10 dark:text-azure-200'
+              : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-200 dark:hover:bg-slate-800'"
+            :aria-pressed="selectedPlatform === option.value"
+            :data-test="`device-platform-${option.value || 'all'}`"
+            @click="selectedPlatform = option.value"
+          >
+            {{ option.label }}
+          </button>
+        </div>
+      </fieldset>
+      <div class="flex w-full flex-col gap-2">
+        <label for="device-table-bundle-filter" class="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
           {{ t('bundle') }}
         </label>
         <input
@@ -553,7 +570,7 @@ watch([selectedPlatform, selectedVersionName], () => {
           v-model="selectedVersionName"
           list="device-table-bundle-options"
           type="text"
-          class="d-input d-input-bordered d-input-sm h-9 w-full border-gray-300 bg-white text-sm text-slate-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+          class="d-input d-input-bordered min-h-11 w-full border-slate-200 bg-white text-sm text-slate-900 dark:border-slate-700 dark:bg-slate-950 dark:text-white"
           :placeholder="t('all-bundles')"
           :aria-label="t('bundle')"
           data-test="device-bundle-filter"

From 92a86b354eef9bc6d12c6a5af43ba0a51c9312a3 Mon Sep 17 00:00:00 2001
From: Martin Donadieu <martindonadieu@gmail.com>
Date: Fri, 31 Jul 2026 01:56:02 +0300
Subject: [PATCH 14/20] fix(devices): invalidate in-flight loads on app switch

Bump activeLoadId when appId changes so a previous app's reload cannot overwrite the new app's table state.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/components/tables/DeviceTable.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/tables/DeviceTable.vue b/src/components/tables/DeviceTable.vue
index f6bbe69106..be5a7f03b0 100644
--- a/src/components/tables/DeviceTable.vue
+++ b/src/components/tables/DeviceTable.vue
@@ -494,6 +494,8 @@ onMounted(async () => {
 
 watch(() => props.appId, async (appId) => {
   cancelScheduledReload()
+  // Invalidate in-flight reloads from the previous app before awaiting.
+  activeLoadId.value += 1
   skipFilterReload.value = true
   selectedPlatform.value = ''
   selectedVersionName.value = props.versionName ?? ''

From 4957c59f9423115a1d0efeef608b0c1814bd3d54 Mon Sep 17 00:00:00 2001
From: Martin Donadieu <martindonadieu@gmail.com>
Date: Fri, 31 Jul 2026 02:05:41 +0300
Subject: [PATCH 15/20] fix(devices): harden Filters modal a11y and clear path

Add Escape dismiss plus focus trapping, rename the subtitle i18n key, and avoid a double reload when clearing filters.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 messages/en.json                      |  2 +-
 src/components/DataTable.vue          | 61 ++++++++++++++++++++++++++-
 src/components/tables/DeviceTable.vue |  2 +-
 3 files changed, 61 insertions(+), 4 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index 5f8ad60e30..f5f427c640 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -1277,7 +1277,7 @@
   "fetching-release-data": "Fetching release data...",
   "filter-actions": "Actions",
   "filter-options": "Options",
-  "filters-modal-subtitle": "Narrow results by platform, bundle, or status.",
+  "filter-modal-subtitle": "Narrow results by platform, bundle, or status.",
   "filter-shortcut-all-fail": "All failures",
   "first-name": "First name",
   "first-name-required": "First name required",
diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
index fbaad48fbd..42f5665ac4 100644
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@@ -6,6 +6,7 @@ import DOMPurify from 'dompurify'
 import {
   computed,
   defineComponent,
+  nextTick,
   onMounted,
   onUnmounted,
   ref,
@@ -72,6 +73,7 @@ const emit = defineEmits([
   'clearExtraFilters',
 ])
 const isFilterModalOpen = ref(false)
+const filterModalBoxRef = ref<HTMLElement | null>(null)
 const slots = useSlots()
 const { t } = useI18n()
 const searchVal = ref(props.search ?? '')
@@ -128,7 +130,59 @@ function closeFilterModal() {
   isFilterModalOpen.value = false
 }
 
+function getFilterModalFocusable() {
+  const root = filterModalBoxRef.value
+  if (!root)
+    return [] as HTMLElement[]
+  return Array.from(root.querySelectorAll<HTMLElement>(
+    'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+  )).filter(el => !el.hasAttribute('disabled') && el.offsetParent !== null)
+}
+
+function onFilterModalKeydown(e: KeyboardEvent) {
+  if (!isFilterModalOpen.value)
+    return
+  if (e.key === 'Escape') {
+    e.preventDefault()
+    closeFilterModal()
+    return
+  }
+  if (e.key !== 'Tab')
+    return
+  const focusable = getFilterModalFocusable()
+  if (!focusable.length)
+    return
+  const first = focusable[0]!
+  const last = focusable[focusable.length - 1]!
+  if (e.shiftKey && document.activeElement === first) {
+    e.preventDefault()
+    last.focus()
+  }
+  else if (!e.shiftKey && document.activeElement === last) {
+    e.preventDefault()
+    first.focus()
+  }
+}
+
+watch(isFilterModalOpen, async (open) => {
+  if (open) {
+    window.addEventListener('keydown', onFilterModalKeydown)
+    await nextTick()
+    const focusable = getFilterModalFocusable()
+    focusable[0]?.focus()
+  }
+  else {
+    window.removeEventListener('keydown', onFilterModalKeydown)
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', onFilterModalKeydown)
+})
+
 function clearAllFilters() {
+  // Emit a new filters object so DataTable's filters watcher performs one reload.
+  // Extra filters are cleared without scheduling a second reload.
   if (props.filters) {
     const cleared = Object.fromEntries(
       Object.keys(props.filters).map(key => [key, false]),
@@ -554,7 +608,10 @@ const paginationClass = computed(() => props.mobileFixedPagination
               aria-labelledby="data-table-filters-title"
               data-test="data-table-filters-modal"
             >
-              <div class="d-modal-box w-[calc(100vw-2rem)] max-w-md rounded-lg border border-slate-200 bg-white p-0 shadow-2xl dark:border-slate-700 dark:bg-slate-900">
+              <div
+                ref="filterModalBoxRef"
+                class="d-modal-box w-[calc(100vw-2rem)] max-w-md rounded-lg border border-slate-200 bg-white p-0 shadow-2xl dark:border-slate-700 dark:bg-slate-900"
+              >
                 <div class="flex items-start justify-between gap-3 border-b border-slate-100 px-5 py-4 dark:border-slate-800">
                   <div class="min-w-0">
                     <h2
@@ -564,7 +621,7 @@ const paginationClass = computed(() => props.mobileFixedPagination
                       {{ t(filterText ?? 'Filters') }}
                     </h2>
                     <p class="mt-1 text-sm leading-5 text-slate-600 dark:text-slate-300">
-                      {{ t('filters-modal-subtitle') }}
+                      {{ t('filter-modal-subtitle') }}
                     </p>
                   </div>
                   <button
diff --git a/src/components/tables/DeviceTable.vue b/src/components/tables/DeviceTable.vue
index be5a7f03b0..f7569e555e 100644
--- a/src/components/tables/DeviceTable.vue
+++ b/src/components/tables/DeviceTable.vue
@@ -55,11 +55,11 @@ const platformOptions = computed(() => [
 ])
 
 function clearExtraFilters() {
+  // Values only — DataTable clear emits a filters update that triggers the single reload.
   skipFilterReload.value = true
   selectedPlatform.value = ''
   selectedVersionName.value = ''
   skipFilterReload.value = false
-  debouncedReload()
 }
 const columns = ref<TableColumn[]>([
   {

From 3b4dac6b126e222f2975881bfe67386f49544090 Mon Sep 17 00:00:00 2001
From: Martin Donadieu <martindonadieu@gmail.com>
Date: Fri, 31 Jul 2026 02:08:43 +0300
Subject: [PATCH 16/20] fix(devices): filter CF custom-id mode on aggregated
 state

Apply nonempty custom_id after argMax so platform/bundle filters no longer resurface devices that only had a custom id historically.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../functions/_backend/utils/cloudflare.ts    | 23 ++++++++-----------
 .../cloudflare-device-pagination.unit.test.ts |  3 ++-
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/supabase/functions/_backend/utils/cloudflare.ts b/supabase/functions/_backend/utils/cloudflare.ts
index 8403bb1822..7ac4fecdb1 100644
--- a/supabase/functions/_backend/utils/cloudflare.ts
+++ b/supabase/functions/_backend/utils/cloudflare.ts
@@ -957,9 +957,6 @@ export async function countDevicesCF(
   // Use Analytics Engine DEVICE_INFO for counting devices
   const conditions = [`index1 = '${escapeSqlString(app_id)}'`]
 
-  if (customIdMode)
-    conditions.push(`blob5 != ''`)
-
   if (deviceIds.length) {
     if (deviceIds.length === 1)
       conditions.push(`blob1 = '${escapeSqlString(deviceIds[0])}'`)
@@ -968,8 +965,12 @@ export async function countDevicesCF(
   }
 
   // Match latest aggregated fields for current-state filtering (same as Supabase devices table).
-  if (versionName || platform || search) {
+  // customIdMode must use aggregated custom_id so historical non-empty blob5 rows
+  // do not keep devices that later cleared their custom id.
+  if (versionName || platform || search || customIdMode) {
     const outerConditions: string[] = []
+    if (customIdMode)
+      outerConditions.push(`custom_id != ''`)
     if (versionName)
       outerConditions.push(`version_name = '${escapeSqlString(versionName)}'`)
     if (platform)
@@ -1110,28 +1111,24 @@ function buildReadDevicesCFSearchCondition(search: string | undefined, deviceIds
   return `(position('${escapeSqlString(searchLower)}' IN toLower(device_id)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(custom_id)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(version_name)) > 0)`
 }
 
-function buildReadDevicesCFOuterConditions(params: ReadDevicesParams, devicesOrder: DevicesOrderCF | null) {
-  const conditions = [
+function buildReadDevicesCFOuterConditions(params: ReadDevicesParams, devicesOrder: DevicesOrderCF | null, customIdMode: boolean) {
+  return [
     buildReadDevicesCFCursorCondition(params.cursor, devicesOrder),
     buildReadDevicesCFUpdatedAtGtCondition(params.updated_at_gt),
     // Match the latest aggregated custom_id, not historical event rows.
+    customIdMode ? `custom_id != ''` : undefined,
     buildReadDevicesCFCustomIdsCondition(params.customIds),
     // Match the latest aggregated platform/version/search, not historical event rows.
     buildReadDevicesCFPlatformCondition(params.platform),
     buildReadDevicesCFVersionNameCondition(params.version_name),
     buildReadDevicesCFSearchCondition(params.search, params.deviceIds),
-  ]
-  return conditions.filter(Boolean)
+  ].filter((condition): condition is string => Boolean(condition))
 }
 
 export function buildReadDevicesCFQuery(params: ReadDevicesParams, customIdMode: boolean) {
   const limit = normalizeAnalyticsLimit(params.limit)
   const conditions: string[] = [`index1 = '${escapeSqlString(params.app_id)}'`]
 
-  if (customIdMode) {
-    conditions.push(`blob5 != ''`)
-  }
-
   if (params.deviceIds?.length) {
     if (params.deviceIds.length === 1) {
       conditions.push(`blob1 = '${escapeSqlString(params.deviceIds[0])}'`)
@@ -1148,7 +1145,7 @@ export function buildReadDevicesCFQuery(params: ReadDevicesParams, customIdMode:
   }
 
   const devicesOrder = getReadDevicesCFOrder(params)
-  const outerConditions = buildReadDevicesCFOuterConditions(params, devicesOrder)
+  const outerConditions = buildReadDevicesCFOuterConditions(params, devicesOrder, customIdMode)
   const includeCountryCode = !!params.deviceIds?.length
   const outerFilter = outerConditions.length ? `WHERE ${outerConditions.join(' AND ')}` : ''
   let orderBy = 'device_id ASC'
diff --git a/tests/cloudflare-device-pagination.unit.test.ts b/tests/cloudflare-device-pagination.unit.test.ts
index 5928876c53..47293c157b 100644
--- a/tests/cloudflare-device-pagination.unit.test.ts
+++ b/tests/cloudflare-device-pagination.unit.test.ts
@@ -77,7 +77,8 @@ describe('buildReadDevicesCFQuery', () => {
       limit: 1,
     }, true)
 
-    expect(query).toContain('blob5 != \'\'')
+    expect(query).toContain("custom_id != ''")
+    expect(query).not.toContain("blob5 != ''")
     expect(query).not.toContain('blob10')
   })
 

From efae04c02e3d35f152b4d2da9dcbab4b863cd2ab Mon Sep 17 00:00:00 2001
From: Martin Donadieu <martindonadieu@gmail.com>
Date: Fri, 31 Jul 2026 02:17:56 +0300
Subject: [PATCH 17/20] fix(devices): finish clear reload race and scoped
 search

Defer clearing skipFilterReload to the next tick, always wait for the Filters modal in visual diffs, and include version_name in device-scoped CF search.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 playwright/visual-diff.config.ts                | 10 ++--------
 src/components/tables/DeviceTable.vue           |  8 ++++++--
 supabase/functions/_backend/utils/cloudflare.ts | 17 +++++++++--------
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/playwright/visual-diff.config.ts b/playwright/visual-diff.config.ts
index 7be7630982..aa2312e2cb 100644
--- a/playwright/visual-diff.config.ts
+++ b/playwright/visual-diff.config.ts
@@ -26,14 +26,8 @@ export const visualDiffRoutes: VisualDiffRoute[] = [
     prepare: async (page) => {
       // Open Filters modal so reviewers see platform/bundle controls.
       await page.getByRole('button', { name: /filters/i }).click()
-      const modal = page.locator('[data-test="data-table-filters-modal"]')
-      if (await modal.count())
-        await modal.waitFor({ state: 'visible' })
-      const platformFilter = page.locator('[data-test="device-platform-filter"]')
-      if (await platformFilter.count())
-        await platformFilter.waitFor({ state: 'visible' })
-      else
-        await page.getByText('Override', { exact: true }).waitFor({ state: 'visible' })
+      await page.locator('[data-test="data-table-filters-modal"]').waitFor({ state: 'visible' })
+      await page.locator('[data-test="device-platform-filter"]').waitFor({ state: 'visible' })
     },
   },
   { slug: 'observe', path: '/app/com.demo.app/observe', auth: true },
diff --git a/src/components/tables/DeviceTable.vue b/src/components/tables/DeviceTable.vue
index f7569e555e..05f426a05d 100644
--- a/src/components/tables/DeviceTable.vue
+++ b/src/components/tables/DeviceTable.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TableColumn } from '../comp_def'
 import type { Database } from '~/types/supabase.types'
-import { computed, h, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, h, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
@@ -56,10 +56,14 @@ const platformOptions = computed(() => [
 
 function clearExtraFilters() {
   // Values only — DataTable clear emits a filters update that triggers the single reload.
+  // Keep skipFilterReload true until the next tick so platform/bundle watchers do not
+  // schedule a second reload in the same clear action.
   skipFilterReload.value = true
   selectedPlatform.value = ''
   selectedVersionName.value = ''
-  skipFilterReload.value = false
+  nextTick(() => {
+    skipFilterReload.value = false
+  })
 }
 const columns = ref<TableColumn[]>([
   {
diff --git a/supabase/functions/_backend/utils/cloudflare.ts b/supabase/functions/_backend/utils/cloudflare.ts
index 7ac4fecdb1..a59dcdf809 100644
--- a/supabase/functions/_backend/utils/cloudflare.ts
+++ b/supabase/functions/_backend/utils/cloudflare.ts
@@ -977,10 +977,12 @@ export async function countDevicesCF(
       outerConditions.push(`platform = ${platformOsToCFDouble(platform)}`)
     if (search) {
       const searchLower = search.toLowerCase()
-      if (deviceIds.length)
-        outerConditions.push(`position('${escapeSqlString(searchLower)}' IN toLower(custom_id)) > 0`)
-      else
+      if (deviceIds.length) {
+        outerConditions.push(`(position('${escapeSqlString(searchLower)}' IN toLower(custom_id)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(version_name)) > 0)`)
+      }
+      else {
         outerConditions.push(`(position('${escapeSqlString(searchLower)}' IN toLower(device_id)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(custom_id)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(version_name)) > 0)`)
+      }
     }
 
     const query = `SELECT COUNT() AS total
@@ -1102,12 +1104,11 @@ function buildReadDevicesCFVersionNameCondition(versionName: ReadDevicesParams['
 
 function buildReadDevicesCFSearchCondition(search: string | undefined, deviceIds: string[] | undefined) {
   if (!search)
-    return ''
-
+    return undefined
   const searchLower = search.toLowerCase()
-  if (deviceIds?.length)
-    return `position('${escapeSqlString(searchLower)}' IN toLower(custom_id)) > 0`
-
+  if (deviceIds?.length) {
+    return `(position('${escapeSqlString(searchLower)}' IN toLower(custom_id)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(version_name)) > 0)`
+  }
   return `(position('${escapeSqlString(searchLower)}' IN toLower(device_id)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(custom_id)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(version_name)) > 0)`
 }
 

From a9d2494f1154b7e67dcca797a5ae1e669b74655c Mon Sep 17 00:00:00 2001
From: Martin Donadieu <martindonadieu@gmail.com>
Date: Fri, 31 Jul 2026 02:27:15 +0300
Subject: [PATCH 18/20] fix(visual-diff): tolerate Filters modal missing on
 base

Wait for the new Filters modal on head, but fall back to the legacy dropdown content when capturing the PR base commit.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 playwright/visual-diff.config.ts | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/playwright/visual-diff.config.ts b/playwright/visual-diff.config.ts
index aa2312e2cb..6ea20231f9 100644
--- a/playwright/visual-diff.config.ts
+++ b/playwright/visual-diff.config.ts
@@ -24,10 +24,17 @@ export const visualDiffRoutes: VisualDiffRoute[] = [
     path: '/app/com.demo.app/devices',
     auth: true,
     prepare: async (page) => {
-      // Open Filters modal so reviewers see platform/bundle controls.
+      // Open Filters so reviewers see platform/bundle controls on head.
+      // Base still uses the legacy dropdown, so fall back when modal is absent.
       await page.getByRole('button', { name: /filters/i }).click()
-      await page.locator('[data-test="data-table-filters-modal"]').waitFor({ state: 'visible' })
-      await page.locator('[data-test="device-platform-filter"]').waitFor({ state: 'visible' })
+      const modal = page.locator('[data-test="data-table-filters-modal"]')
+      try {
+        await modal.waitFor({ state: 'visible', timeout: 3000 })
+        await page.locator('[data-test="device-platform-filter"]').waitFor({ state: 'visible' })
+      }
+      catch {
+        await page.getByText('Override', { exact: true }).waitFor({ state: 'visible' })
+      }
     },
   },
   { slug: 'observe', path: '/app/com.demo.app/observe', auth: true },

From 74e5b121bce2735996134cdd343fdee8f9620cfd Mon Sep 17 00:00:00 2001
From: Martin Donadieu <martindonadieu@gmail.com>
Date: Fri, 31 Jul 2026 02:35:12 +0300
Subject: [PATCH 19/20] fix(devices): restore focus to Filters button on modal
 close

Keep keyboard users on the Filters control after dismissing the modal instead of dropping focus to the document.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/components/DataTable.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
index 42f5665ac4..22fd8b20e7 100644
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@@ -74,6 +74,7 @@ const emit = defineEmits([
 ])
 const isFilterModalOpen = ref(false)
 const filterModalBoxRef = ref<HTMLElement | null>(null)
+const filterOpenButtonRef = ref<HTMLButtonElement | null>(null)
 const slots = useSlots()
 const { t } = useI18n()
 const searchVal = ref(props.search ?? '')
@@ -128,6 +129,9 @@ function openFilterModal() {
 
 function closeFilterModal() {
   isFilterModalOpen.value = false
+  nextTick(() => {
+    filterOpenButtonRef.value?.focus()
+  })
 }
 
 function getFilterModalFocusable() {
@@ -583,6 +587,7 @@ const paginationClass = computed(() => props.mobileFixedPagination
         </div>
         <div v-if="showFilterMenu" class="relative h-10">
           <button
+            ref="filterOpenButtonRef"
             type="button"
             class="inline-flex items-center py-1.5 px-3 mr-2 h-full text-sm font-medium text-gray-500 bg-white rounded-md border border-gray-300 cursor-pointer dark:text-white dark:bg-gray-800 dark:border-gray-600 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700 focus:outline-hidden"
             data-test="data-table-filters-open"

From 3272f3c5e5ac495e3af484716bd196fd702a1af2 Mon Sep 17 00:00:00 2001
From: Martin Donadieu <martindonadieu@gmail.com>
Date: Fri, 31 Jul 2026 02:47:02 +0300
Subject: [PATCH 20/20] fix(devices): unique Filters modal label id and
 stricter visual-diff wait

Use a per-instance heading id for accessibility, and only fall back to the legacy Override wait when the modal itself is missing.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 playwright/visual-diff.config.ts | 5 +++--
 src/components/DataTable.vue     | 6 ++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/playwright/visual-diff.config.ts b/playwright/visual-diff.config.ts
index 6ea20231f9..0b43c204b0 100644
--- a/playwright/visual-diff.config.ts
+++ b/playwright/visual-diff.config.ts
@@ -25,16 +25,17 @@ export const visualDiffRoutes: VisualDiffRoute[] = [
     auth: true,
     prepare: async (page) => {
       // Open Filters so reviewers see platform/bundle controls on head.
-      // Base still uses the legacy dropdown, so fall back when modal is absent.
+      // Base still uses the legacy dropdown, so fall back only when modal is absent.
       await page.getByRole('button', { name: /filters/i }).click()
       const modal = page.locator('[data-test="data-table-filters-modal"]')
       try {
         await modal.waitFor({ state: 'visible', timeout: 3000 })
-        await page.locator('[data-test="device-platform-filter"]').waitFor({ state: 'visible' })
       }
       catch {
         await page.getByText('Override', { exact: true }).waitFor({ state: 'visible' })
+        return
       }
+      await page.locator('[data-test="device-platform-filter"]').waitFor({ state: 'visible' })
     },
   },
   { slug: 'observe', path: '/app/com.demo.app/observe', auth: true },
diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
index 22fd8b20e7..b94a4f6ced 100644
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@@ -10,6 +10,7 @@ import {
   onMounted,
   onUnmounted,
   ref,
+  useId,
   useSlots,
   watch,
 } from 'vue'
@@ -75,6 +76,7 @@ const emit = defineEmits([
 const isFilterModalOpen = ref(false)
 const filterModalBoxRef = ref<HTMLElement | null>(null)
 const filterOpenButtonRef = ref<HTMLButtonElement | null>(null)
+const filterModalTitleId = `${useId()}-filters-title`
 const slots = useSlots()
 const { t } = useI18n()
 const searchVal = ref(props.search ?? '')
@@ -610,7 +612,7 @@ const paginationClass = computed(() => props.mobileFixedPagination
               class="d-modal d-modal-open"
               role="dialog"
               aria-modal="true"
-              aria-labelledby="data-table-filters-title"
+              :aria-labelledby="filterModalTitleId"
               data-test="data-table-filters-modal"
             >
               <div
@@ -620,7 +622,7 @@ const paginationClass = computed(() => props.mobileFixedPagination
                 <div class="flex items-start justify-between gap-3 border-b border-slate-100 px-5 py-4 dark:border-slate-800">
                   <div class="min-w-0">
                     <h2
-                      id="data-table-filters-title"
+                      :id="filterModalTitleId"
                       class="text-lg font-semibold leading-7 text-slate-950 dark:text-white"
                     >
                       {{ t(filterText ?? 'Filters') }}