From 42650733ab96c9e125d2664f4b7493575e33a601 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 16 Jul 2026 21:31:34 +0000
Subject: [PATCH 1/3] fix(demo): store test_runs_cases created_at in
 milliseconds in seed

The seed generator wrote created_at as Unix seconds into a timestamp_ms
column, so typed reads yielded 1970 dates and any millisecond-based
comparison against it (e.g. an age-window cutoff) matched nothing in the
demo database. Store the millisecond value directly.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Co6VcMZLLwZWZ4FiUmR7fY
---
 application/public/demo/seed.version.json  | 4 ++--
 application/scripts/generate-demo-seed.mjs | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/application/public/demo/seed.version.json b/application/public/demo/seed.version.json
index 4013d755..71f79bbc 100644
--- a/application/public/demo/seed.version.json
+++ b/application/public/demo/seed.version.json
@@ -1,4 +1,4 @@
 {
-  "hash": "957dc11f122aeb81e4bfc2d97b8582b12ee84f9c6a8ed59c9479c2b580cd66a2",
-  "generatedAt": "2026-07-16T19:52:23.939Z"
+  "hash": "0f746c67db995a91357b46d5775c2badc795b0e0817b89378899eb7eca9701aa",
+  "generatedAt": "2026-07-16T21:19:57.622Z"
 }
diff --git a/application/scripts/generate-demo-seed.mjs b/application/scripts/generate-demo-seed.mjs
index b7f82b4c..d697e907 100644
--- a/application/scripts/generate-demo-seed.mjs
+++ b/application/scripts/generate-demo-seed.mjs
@@ -1068,7 +1068,7 @@ for (const [pid, cfg] of Object.entries(PROJECT_CONFIGS)) {
         test_source_frames: isFailedCase ? testSourceFramesForCluster(clusterDef) : null,
         worker_index: workerIndex,
         started_at: caseStartMs,
-        created_at: Math.floor(caseStartMs / 1000),
+        created_at: caseStartMs,
       };
       TEST_RUNS_CASES.push(trc);
 

From 77b1651117cefc870dc9437600a62c04807f27f7 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 16 Jul 2026 21:32:06 +0000
Subject: [PATCH 2/3] feat(app)!: paginate, filter and revamp the project
 test-cases catalog

The project test-cases catalog (page and tab) loaded every case with no
pagination, rendered flat icon counters, and duplicated ~110 lines of table
markup across two call sites. Rework it end to end.

Backend (getProjectTestCases): return a { items, total, limit, offset }
envelope and accept limit/offset/q/status/maxAgeDays/sort/dir. Filtering,
search (case-insensitive over title and file path), the last-run age window
(EXISTS on test_runs_cases), sorting (NULLS LAST) and pagination all run in
SQL. Timed-out runs fold into failedRuns; pass rate is computed over executed
runs only (null when none); a derived status category powers the filter and
badge. Parsing/clamping lives in a shared parseTestCasesQuery reused by the
REST endpoint and the demo router; the MCP get_project_test_catalog tool now
pushes paging into SQL and gains a query filter. Also aliases the flaky
subquery so it is valid on PostgreSQL.

UI: one shared ProjectTestCasesTable (search, status pills, age select,
server-side sortable headers, pagination, flat/tree toggle, a desktop table
plus a mobile card list, and loading/error/empty states) replaces both
copies, with a ProjectTestCasesTree for per-spec grouping and a
PassRateIndicator gauge. Results render as a TestStatusBar, file paths reuse
OpenInIdeLink, and filter state syncs to the URL. formatDuration now rounds
to whole milliseconds (avg durations no longer show long decimals) and
renders zero as "0 seconds".

BREAKING CHANGE: GET /api/projects/:id/test-cases now returns
{ items, total, limit, offset } instead of a bare array and accepts
limit/offset/q/status/maxAgeDays/sort/dir query parameters.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Co6VcMZLLwZWZ4FiUmR7fY
---
 .../components/project/PassRateIndicator.vue  |  26 +
 .../project/ProjectTestCasesTable.vue         | 447 ++++++++++++++++++
 .../project/ProjectTestCasesTree.vue          | 243 ++++++++++
 application/app/demo/api/router.ts            |   3 +-
 application/app/pages/projects/[id]/index.vue | 148 +-----
 .../app/pages/projects/[id]/test-cases.vue    | 135 +-----
 application/app/utils/help-content.ts         |   2 +-
 application/app/utils/index.ts                |  35 +-
 .../api/projects/[id]/test-cases.get.ts       |  63 ++-
 application/server/utils/mcp/tools.ts         |  10 +-
 application/shared/handlers/projects.ts       | 184 ++++++-
 application/shared/mcp-tools.ts               |   1 +
 application/shared/test-project-names.ts      |   1 +
 .../tests/insights-and-spec-health.spec.ts    |   2 +-
 application/tests/project-test-cases.spec.ts  |  96 ++++
 application/tests/unit/app-utils.test.ts      |  24 +
 .../tests/unit/project-test-cases.test.ts     | 243 ++++++++++
 application/types/api.ts                      |  27 +-
 docs/ui-overview.md                           |   2 +-
 19 files changed, 1368 insertions(+), 324 deletions(-)
 create mode 100644 application/app/components/project/PassRateIndicator.vue
 create mode 100644 application/app/components/project/ProjectTestCasesTable.vue
 create mode 100644 application/app/components/project/ProjectTestCasesTree.vue
 create mode 100644 application/tests/project-test-cases.spec.ts
 create mode 100644 application/tests/unit/project-test-cases.test.ts

diff --git a/application/app/components/project/PassRateIndicator.vue b/application/app/components/project/PassRateIndicator.vue
new file mode 100644
index 00000000..db8afd56
--- /dev/null
+++ b/application/app/components/project/PassRateIndicator.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+/**
+ * Compact pass-rate gauge: a small colored bar plus the percentage.
+ * `rate` is 0..1 over executed runs; null means the case never executed.
+ */
+const props = defineProps<{ rate: number | null }>();
+
+const percent = computed(() => (props.rate == null ? null : Math.round(props.rate * 100)));
+
+const fillClass = computed(() => {
+  if (percent.value == null) return '';
+  if (percent.value >= 80) return 'bg-green-500';
+  if (percent.value >= 50) return 'bg-amber-500';
+  return 'bg-red-500';
+});
+</script>
+
+<template>
+  <div v-if="percent != null" class="flex items-center gap-2" :title="`${percent}% of executed runs passed`">
+    <div class="h-1.5 w-14 shrink-0 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
+      <div :class="[fillClass, 'h-full rounded-full transition-all']" :style="{ width: `${percent}%` }" />
+    </div>
+    <span class="text-sm font-medium tabular-nums">{{ percent }}%</span>
+  </div>
+  <span v-else class="text-sm text-muted" title="No executed runs yet">&mdash;</span>
+</template>
diff --git a/application/app/components/project/ProjectTestCasesTable.vue b/application/app/components/project/ProjectTestCasesTable.vue
new file mode 100644
index 00000000..ed2fb87e
--- /dev/null
+++ b/application/app/components/project/ProjectTestCasesTable.vue
@@ -0,0 +1,447 @@
+<script setup lang="ts">
+import { h } from 'vue';
+import { UIcon } from '#components';
+import type { TableColumn } from '@nuxt/ui';
+import type { TestCasesPage, TestCaseWithStats } from '~~/types/api';
+import type { TestCasesSort } from '#shared/handlers/projects';
+
+const props = defineProps<{
+  projectId: string | number;
+  /** Project name — forwarded to OpenInIdeLink for the JetBrains project hint. */
+  projectName?: string | null;
+  /** Mirror search/filter/sort/page state into the route query (shareable URLs, survives tab switches). */
+  syncQuery?: boolean;
+}>();
+
+const emit = defineEmits<{ total: [total: number] }>();
+
+const route = useRoute();
+const router = useRouter();
+const { treeView, setTreeView } = useTreeViewCookie('project-test-cases');
+
+const PAGE_SIZE = 50;
+const TREE_LIMIT = 1000;
+const AGE_OPTIONS = [
+  { label: 'Last 7 days', value: 7 },
+  { label: 'Last 30 days', value: 30 },
+  { label: 'Last 90 days', value: 90 },
+  { label: 'Last year', value: 365 },
+  { label: 'All time', value: 0 },
+];
+const STATUS_OPTIONS = [
+  { label: 'Passed', value: 'passed', color: 'green' },
+  { label: 'Failed', value: 'failed', color: 'red' },
+  { label: 'Flaky', value: 'flaky', color: 'orange' },
+  { label: 'Skipped', value: 'skipped', color: 'gray' },
+  { label: "Didn't run", value: 'didnotrun', color: 'amber' },
+] as const;
+
+// The public demo's seed data is anchored at a fixed past date, so an age
+// window would render the catalog empty there — default to all time instead.
+const defaultAge = useRuntimeConfig().public.demoMode ? 0 : 30;
+
+const init = props.syncQuery ? route.query : {};
+const page = ref(Math.max(1, Number(init.page) || 1));
+const q = ref(typeof init.q === 'string' ? init.q : '');
+const searchInput = ref(q.value);
+const statuses = ref<string[]>(typeof init.status === 'string' ? init.status.split(',').filter(Boolean) : []);
+const age = ref(typeof init.age === 'string' && init.age !== '' ? Math.max(0, Number(init.age) || 0) : defaultAge);
+const sort = ref<TestCasesSort>(typeof init.sort === 'string' ? (init.sort as TestCasesSort) : 'lastRun');
+const dir = ref<'asc' | 'desc'>(init.dir === 'asc' ? 'asc' : 'desc');
+
+watch(
+  searchInput,
+  useDebounceFn((value: string) => {
+    q.value = value.trim();
+  }, 300),
+);
+watch([q, statuses, age, sort, dir, treeView], () => {
+  page.value = 1;
+});
+
+const query = computed(() => ({
+  limit: treeView.value ? TREE_LIMIT : PAGE_SIZE,
+  offset: treeView.value ? 0 : (page.value - 1) * PAGE_SIZE,
+  ...(q.value ? { q: q.value } : {}),
+  ...(statuses.value.length > 0 ? { status: statuses.value.join(',') } : {}),
+  maxAgeDays: age.value,
+  sort: sort.value,
+  dir: dir.value,
+}));
+
+const { data, status, error, refresh } = useFetch<TestCasesPage>(`/api/projects/${props.projectId}/test-cases`, {
+  query,
+});
+
+watch(
+  () => data.value?.total,
+  (total) => {
+    if (total != null) emit('total', total);
+  },
+  { immediate: true },
+);
+
+if (props.syncQuery) {
+  watch([q, statuses, age, sort, dir, page], () => {
+    router.replace({
+      query: {
+        ...route.query,
+        q: q.value || undefined,
+        status: statuses.value.length > 0 ? statuses.value.join(',') : undefined,
+        age: age.value !== defaultAge ? String(age.value) : undefined,
+        sort: sort.value !== 'lastRun' ? sort.value : undefined,
+        dir: dir.value !== 'desc' ? dir.value : undefined,
+        page: page.value > 1 ? String(page.value) : undefined,
+      },
+    });
+  });
+}
+
+function toggleStatus(value: string) {
+  statuses.value = statuses.value.includes(value)
+    ? statuses.value.filter((s) => s !== value)
+    : [...statuses.value, value];
+}
+
+function toggleSort(key: TestCasesSort) {
+  if (sort.value === key) {
+    dir.value = dir.value === 'asc' ? 'desc' : 'asc';
+  } else {
+    sort.value = key;
+    dir.value = key === 'title' ? 'asc' : 'desc';
+  }
+}
+
+function sortableHeader(label: string, key: TestCasesSort) {
+  return () => {
+    const active = sort.value === key;
+    const iconName = !active
+      ? 'i-lucide-chevrons-up-down'
+      : dir.value === 'asc'
+        ? 'i-lucide-chevron-up'
+        : 'i-lucide-chevron-down';
+    return h(
+      'button',
+      {
+        type: 'button',
+        class:
+          'flex items-center gap-1 font-semibold select-none cursor-pointer hover:text-highlighted transition-colors',
+        onClick: () => toggleSort(key),
+      },
+      [label, h(UIcon, { name: iconName, class: ['shrink-0 size-3.5', !active && 'opacity-40'] })],
+    );
+  };
+}
+
+const columns = computed<TableColumn<TestCaseWithStats>[]>(() => [
+  { accessorKey: 'title', header: sortableHeader('Test case', 'title') },
+  { accessorKey: 'status', header: sortableHeader('Status', 'status') },
+  { accessorKey: 'totalRuns', header: sortableHeader('Runs', 'totalRuns') },
+  { accessorKey: 'passRate', header: sortableHeader('Pass rate', 'passRate') },
+  { id: 'results', header: 'Results' },
+  { accessorKey: 'avgDuration', header: sortableHeader('Avg duration', 'avgDuration') },
+  { accessorKey: 'lastRun', header: sortableHeader('Last run', 'lastRun') },
+  { id: 'actions', header: () => h('div', { class: 'text-right' }, 'Actions') },
+]);
+
+const items = computed(() => data.value?.items ?? []);
+const total = computed(() => data.value?.total ?? 0);
+const showingFrom = computed(() => (total.value === 0 ? 0 : (page.value - 1) * PAGE_SIZE + 1));
+const showingTo = computed(() => (treeView.value ? items.value.length : Math.min(page.value * PAGE_SIZE, total.value)));
+const hasSearchOrStatusFilter = computed(() => q.value !== '' || statuses.value.length > 0);
+const hasAnyFilter = computed(() => hasSearchOrStatusFilter.value || age.value !== 0);
+const initialLoading = computed(() => status.value === 'pending' && !data.value);
+
+defineExpose({ refresh });
+</script>
+
+<template>
+  <SectionCard title="Test cases" icon="i-lucide-flask-conical" :count="data?.total" help="project.test-cases">
+    <template #actions>
+      <UButton
+        icon="i-lucide-refresh-cw"
+        size="sm"
+        color="neutral"
+        variant="ghost"
+        aria-label="Refresh test cases"
+        :loading="status === 'pending' && !!data"
+        @click="() => refresh()"
+      />
+    </template>
+
+    <FilterToolbar class="mb-4">
+      <template #start>
+        <div class="flex items-center rounded-md border border-default overflow-hidden">
+          <button
+            type="button"
+            class="px-2 py-1 text-xs transition-colors"
+            :class="!treeView ? 'bg-primary text-white dark:text-white' : 'text-muted hover:bg-elevated/60'"
+            title="Flat list"
+            @click="setTreeView(false)"
+          >
+            <UIcon name="i-lucide-list" class="size-3.5" />
+          </button>
+          <button
+            type="button"
+            class="px-2 py-1 text-xs transition-colors"
+            :class="treeView ? 'bg-primary text-white dark:text-white' : 'text-muted hover:bg-elevated/60'"
+            title="Tree view"
+            @click="setTreeView(true)"
+          >
+            <UIcon name="i-lucide-folder-tree" class="size-3.5" />
+          </button>
+        </div>
+        <span class="text-sm text-muted tabular-nums"> {{ total }} {{ total === 1 ? 'case' : 'cases' }} </span>
+      </template>
+
+      <UInput
+        v-model="searchInput"
+        placeholder="Search title or file..."
+        icon="i-lucide-search"
+        size="sm"
+        class="min-w-48 max-sm:flex-1"
+        aria-label="Search test cases"
+      />
+      <div class="flex flex-wrap items-center gap-1">
+        <button
+          v-for="opt in STATUS_OPTIONS"
+          :key="opt.value"
+          type="button"
+          class="inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium transition-colors whitespace-nowrap"
+          :aria-pressed="statuses.includes(opt.value)"
+          :class="
+            statuses.includes(opt.value)
+              ? opt.color === 'green'
+                ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+                : opt.color === 'red'
+                  ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
+                  : opt.color === 'orange'
+                    ? 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400'
+                    : opt.color === 'amber'
+                      ? 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400'
+                      : 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
+              : 'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700'
+          "
+          @click="toggleStatus(opt.value)"
+        >
+          <span
+            class="size-2 rounded-full shrink-0"
+            :class="
+              opt.color === 'green'
+                ? 'bg-green-500'
+                : opt.color === 'red'
+                  ? 'bg-red-500'
+                  : opt.color === 'orange'
+                    ? 'bg-orange-500'
+                    : opt.color === 'amber'
+                      ? 'bg-amber-500'
+                      : 'bg-gray-400'
+            "
+          />
+          {{ opt.label }}
+        </button>
+      </div>
+      <USelect v-model="age" :items="AGE_OPTIONS" size="sm" class="w-36" aria-label="Last run age filter" />
+    </FilterToolbar>
+
+    <LoadingState v-if="initialLoading" text="Loading test cases..." />
+
+    <ErrorState v-else-if="error" :text="errorMessage(error, 'Failed to load test cases')">
+      <template #action>
+        <UButton size="sm" variant="outline" @click="() => refresh()">Retry</UButton>
+      </template>
+    </ErrorState>
+
+    <template v-else-if="total === 0">
+      <EmptyState v-if="!hasAnyFilter" icon="i-lucide-flask-conical" text="No test cases yet for this project." />
+      <EmptyState v-else icon="i-lucide-search-x" text="No test cases match your filters.">
+        <div class="mt-3 flex items-center justify-center gap-2">
+          <UButton v-if="age !== 0" size="sm" variant="outline" @click="age = 0">Show all time</UButton>
+          <UButton
+            v-if="hasSearchOrStatusFilter"
+            size="sm"
+            variant="ghost"
+            @click="
+              () => {
+                searchInput = '';
+                q = '';
+                statuses = [];
+              }
+            "
+          >
+            Clear filters
+          </UButton>
+        </div>
+      </EmptyState>
+    </template>
+
+    <template v-else>
+      <div :class="{ 'opacity-60 pointer-events-none': status === 'pending' }" class="transition-opacity">
+        <!-- Tree view -->
+        <template v-if="treeView">
+          <UAlert
+            v-if="items.length < total"
+            color="warning"
+            variant="subtle"
+            icon="i-lucide-triangle-alert"
+            class="mb-3"
+            :title="`Showing the first ${items.length} of ${total} cases — narrow the search or filters to see the rest.`"
+          />
+          <ProjectTestCasesTree :items="items" :has-filter="hasSearchOrStatusFilter" />
+        </template>
+
+        <!-- Flat view: table from md up, cards below -->
+        <template v-else>
+          <div class="hidden md:block overflow-x-auto">
+            <UTable
+              :data="items"
+              :columns="columns"
+              :ui="{
+                base: 'table-fixed border-separate border-spacing-0 min-w-[56rem]',
+                thead: '[&>tr]:bg-elevated/50 [&>tr]:after:content-none',
+                tbody: '[&>tr]:last:[&>td]:border-b-0 [&>tr]:hover:bg-gray-50 dark:[&>tr]:hover:bg-gray-900/50',
+                th: 'first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l last:border-r',
+                td: 'border-b border-default',
+              }"
+            >
+              <template #title-cell="{ row }">
+                <div class="min-w-0 space-y-0.5">
+                  <NuxtLink
+                    :to="`/test-cases/${row.original.id}`"
+                    class="text-sm font-medium text-primary hover:underline truncate block"
+                    :title="row.original.title"
+                  >
+                    {{ row.original.title }}
+                  </NuxtLink>
+                  <div class="flex items-center gap-1 text-xs text-muted">
+                    <UIcon name="i-lucide-file-code" class="size-3 shrink-0" />
+                    <OpenInIdeLink
+                      :file-path="row.original.filePath"
+                      :project-key="projectId"
+                      :project-name="projectName"
+                      class="min-w-0"
+                    />
+                  </div>
+                </div>
+              </template>
+
+              <template #status-cell="{ row }">
+                <UBadge
+                  :color="testCaseCategoryColor(row.original.status)"
+                  variant="subtle"
+                  size="sm"
+                  class="capitalize"
+                >
+                  {{ formatStatusLabel(row.original.status) }}
+                </UBadge>
+              </template>
+
+              <template #totalRuns-cell="{ row }">
+                <span class="text-sm tabular-nums">{{ row.original.totalRuns }}</span>
+              </template>
+
+              <template #passRate-cell="{ row }">
+                <PassRateIndicator :rate="row.original.passRate" />
+              </template>
+
+              <template #results-cell="{ row }">
+                <TestStatusBar
+                  :passed="row.original.passedRuns"
+                  :failed="row.original.failedRuns"
+                  :skipped="row.original.skippedRuns"
+                  :flaky="row.original.flakyRuns"
+                  :did-not-run="row.original.didNotRunRuns"
+                  :total="row.original.totalRuns"
+                />
+              </template>
+
+              <template #avgDuration-cell="{ row }">
+                <span v-if="row.original.avgDuration != null" class="text-sm text-muted tabular-nums">
+                  {{ formatDuration(row.original.avgDuration) }}
+                </span>
+                <span v-else class="text-sm text-muted">&mdash;</span>
+              </template>
+
+              <template #lastRun-cell="{ row }">
+                <span class="text-sm text-muted" :title="prettyDateFormat(row.original.lastRun)">
+                  {{ row.original.lastRun != null ? formatRelativeTime(row.original.lastRun) : '—' }}
+                </span>
+              </template>
+
+              <template #actions-cell="{ row }">
+                <div class="flex justify-end">
+                  <UButton
+                    :to="`/test-cases/${row.original.id}`"
+                    size="sm"
+                    variant="outline"
+                    trailing-icon="i-lucide-arrow-right"
+                  >
+                    View
+                  </UButton>
+                </div>
+              </template>
+            </UTable>
+          </div>
+
+          <!-- Below md: one card per case (no horizontal scroll) -->
+          <div class="space-y-2 md:hidden">
+            <div v-for="tc in items" :key="tc.id" class="rounded-lg border border-default p-3 space-y-2">
+              <div class="flex items-start justify-between gap-2">
+                <NuxtLink
+                  :to="`/test-cases/${tc.id}`"
+                  class="text-sm font-medium text-primary hover:underline min-w-0 truncate"
+                  :title="tc.title"
+                >
+                  {{ tc.title }}
+                </NuxtLink>
+                <UBadge
+                  :color="testCaseCategoryColor(tc.status)"
+                  variant="subtle"
+                  size="sm"
+                  class="capitalize shrink-0"
+                >
+                  {{ formatStatusLabel(tc.status) }}
+                </UBadge>
+              </div>
+              <div class="flex items-center gap-1 text-xs text-muted min-w-0">
+                <UIcon name="i-lucide-file-code" class="size-3 shrink-0" />
+                <OpenInIdeLink
+                  :file-path="tc.filePath"
+                  :project-key="projectId"
+                  :project-name="projectName"
+                  class="min-w-0"
+                />
+              </div>
+              <TestStatusBar
+                :passed="tc.passedRuns"
+                :failed="tc.failedRuns"
+                :skipped="tc.skippedRuns"
+                :flaky="tc.flakyRuns"
+                :did-not-run="tc.didNotRunRuns"
+                :total="tc.totalRuns"
+              />
+              <div class="flex flex-wrap items-center justify-between gap-x-3 gap-y-1">
+                <PassRateIndicator :rate="tc.passRate" />
+                <span class="text-xs text-muted tabular-nums">{{ tc.totalRuns }} runs</span>
+                <span v-if="tc.avgDuration != null" class="text-xs text-muted tabular-nums">
+                  {{ formatDuration(tc.avgDuration) }}
+                </span>
+                <span class="text-xs text-muted" :title="prettyDateFormat(tc.lastRun)">
+                  {{ tc.lastRun != null ? formatRelativeTime(tc.lastRun) : '—' }}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Pagination footer -->
+          <div v-if="total > PAGE_SIZE" class="mt-4 flex flex-wrap items-center justify-between gap-3">
+            <span class="text-sm text-muted tabular-nums"
+              >Showing {{ showingFrom }}–{{ showingTo }} of {{ total }}</span
+            >
+            <UPagination v-model:page="page" :total="total" :items-per-page="PAGE_SIZE" size="sm" />
+          </div>
+        </template>
+      </div>
+    </template>
+  </SectionCard>
+</template>
diff --git a/application/app/components/project/ProjectTestCasesTree.vue b/application/app/components/project/ProjectTestCasesTree.vue
new file mode 100644
index 00000000..a2b03d00
--- /dev/null
+++ b/application/app/components/project/ProjectTestCasesTree.vue
@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import type { TestCaseWithStats } from '~~/types/api';
+
+const props = defineProps<{ items: TestCaseWithStats[]; hasFilter: boolean }>();
+
+interface GroupAgg {
+  passed: number;
+  failed: number;
+  skipped: number;
+  flaky: number;
+  didNotRun: number;
+  total: number;
+  cases: number;
+}
+
+interface GroupRow {
+  kind: 'group';
+  depth: number;
+  key: string;
+  label: string;
+  agg: GroupAgg;
+}
+
+interface CaseRow {
+  kind: 'case';
+  depth: number;
+  key: string;
+  testCase: TestCaseWithStats;
+}
+
+type FlatRow = GroupRow | CaseRow;
+
+function suiteSegments(tc: TestCaseWithStats): string[] {
+  return (tc.suitePath || '').split('\x1f').filter(Boolean);
+}
+
+function aggregate(cases: TestCaseWithStats[]): GroupAgg {
+  const agg: GroupAgg = { passed: 0, failed: 0, skipped: 0, flaky: 0, didNotRun: 0, total: 0, cases: cases.length };
+  for (const tc of cases) {
+    agg.passed += tc.passedRuns;
+    agg.failed += tc.failedRuns;
+    agg.skipped += tc.skippedRuns;
+    agg.flaky += tc.flakyRuns;
+    agg.didNotRun += tc.didNotRunRuns;
+    agg.total += tc.totalRuns;
+  }
+  return agg;
+}
+
+// Set of collapsed group keys. Everything starts expanded (empty = nothing collapsed).
+const collapsedKeys = ref(new Set<string>());
+
+const isAllExpanded = computed(() => collapsedKeys.value.size === 0);
+
+function isExpanded(key: string): boolean {
+  if (props.hasFilter) return true;
+  return !collapsedKeys.value.has(key);
+}
+
+function toggleGroup(key: string): void {
+  if (props.hasFilter) return;
+  const next = new Set(collapsedKeys.value);
+  if (next.has(key)) {
+    next.delete(key);
+  } else {
+    next.add(key);
+  }
+  collapsedKeys.value = next;
+}
+
+function computeAllGroupKeys(): string[] {
+  const keys = new Set<string>();
+  for (const tc of props.items) {
+    keys.add(`file:${tc.filePath}`);
+    const segments = suiteSegments(tc);
+    for (let i = 1; i <= segments.length; i++) {
+      keys.add(`group:${tc.filePath}\x1f${segments.slice(0, i).join('\x1f')}`);
+    }
+  }
+  return [...keys];
+}
+
+function collapseAll(): void {
+  collapsedKeys.value = new Set(computeAllGroupKeys());
+}
+
+function expandAll(): void {
+  collapsedKeys.value = new Set();
+}
+
+function addLevel(
+  rows: FlatRow[],
+  cases: TestCaseWithStats[],
+  filePath: string,
+  parent: string[],
+  depth: number,
+): void {
+  const direct = cases.filter((tc) => suiteSegments(tc).length === parent.length);
+  const nested = cases.filter((tc) => suiteSegments(tc).length > parent.length);
+
+  const groups = new Map<string, TestCaseWithStats[]>();
+  for (const tc of nested) {
+    const segment = suiteSegments(tc)[parent.length]!;
+    if (!groups.has(segment)) groups.set(segment, []);
+    groups.get(segment)!.push(tc);
+  }
+
+  for (const [segment, groupCases] of groups) {
+    const groupPath = [...parent, segment];
+    const key = `group:${filePath}\x1f${groupPath.join('\x1f')}`;
+    rows.push({ kind: 'group', depth, key, label: segment, agg: aggregate(groupCases) });
+    if (isExpanded(key)) {
+      addLevel(rows, groupCases, filePath, groupPath, depth + 1);
+    }
+  }
+
+  for (const tc of direct) {
+    rows.push({ kind: 'case', depth, key: `case:${tc.id}`, testCase: tc });
+  }
+}
+
+const flatRows = computed<FlatRow[]>(() => {
+  const rows: FlatRow[] = [];
+
+  const byFile = new Map<string, TestCaseWithStats[]>();
+  for (const tc of props.items) {
+    const filePath = tc.filePath || 'unknown';
+    if (!byFile.has(filePath)) byFile.set(filePath, []);
+    byFile.get(filePath)!.push(tc);
+  }
+
+  for (const [filePath, fileCases] of [...byFile.entries()].sort(([a], [b]) => a.localeCompare(b))) {
+    const key = `file:${filePath}`;
+    rows.push({ kind: 'group', depth: 0, key, label: filePath, agg: aggregate(fileCases) });
+    if (isExpanded(key)) {
+      addLevel(rows, fileCases, filePath, [], 1);
+    }
+  }
+
+  return rows;
+});
+</script>
+
+<template>
+  <div class="rounded-lg border border-default text-sm">
+    <!-- Toolbar: collapse/expand all -->
+    <div class="flex items-center justify-end px-3 py-1.5 border-b border-default bg-elevated">
+      <button
+        class="flex items-center gap-1 text-xs transition-colors"
+        :class="hasFilter ? 'text-muted cursor-not-allowed opacity-50' : 'text-muted hover:text-default'"
+        :disabled="hasFilter"
+        :title="hasFilter ? 'Clear filters to collapse/expand' : isAllExpanded ? 'Collapse all' : 'Expand all'"
+        @click="isAllExpanded ? collapseAll() : expandAll()"
+      >
+        <UIcon :name="isAllExpanded ? 'i-lucide-fold-vertical' : 'i-lucide-unfold-vertical'" class="size-3.5" />
+        {{ isAllExpanded ? 'Collapse all' : 'Expand all' }}
+      </button>
+    </div>
+
+    <template v-for="row in flatRows" :key="row.key">
+      <!-- Group row (spec file or describe block) -->
+      <div
+        v-if="row.kind === 'group'"
+        class="flex items-center gap-2 py-2 pr-3 border-b border-default last:border-b-0 select-none"
+        :class="[row.depth === 0 ? 'bg-elevated' : 'bg-default', !hasFilter && 'cursor-pointer']"
+        :style="{ paddingLeft: `${row.depth * 20 + 12}px` }"
+        @click="toggleGroup(row.key)"
+      >
+        <UIcon
+          :name="isExpanded(row.key) ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+          class="size-3.5 text-muted shrink-0"
+        />
+        <UIcon
+          :name="row.depth === 0 ? 'i-lucide-file-code-2' : 'i-lucide-folder-open'"
+          class="size-4 shrink-0"
+          :class="row.depth === 0 ? 'text-blue-500' : 'text-amber-500'"
+        />
+        <span
+          class="font-medium truncate min-w-0"
+          :class="[row.depth === 0 ? 'text-default font-mono text-xs sm:text-sm' : 'text-muted']"
+        >
+          {{ row.label }}
+        </span>
+        <span class="text-xs text-muted tabular-nums shrink-0">
+          {{ row.agg.cases }} {{ row.agg.cases === 1 ? 'case' : 'cases' }}
+        </span>
+        <div class="flex-1" />
+        <div class="w-24 sm:w-32 shrink-0 max-sm:hidden">
+          <TestStatusBar
+            :passed="row.agg.passed"
+            :failed="row.agg.failed"
+            :skipped="row.agg.skipped"
+            :flaky="row.agg.flaky"
+            :did-not-run="row.agg.didNotRun"
+            :total="row.agg.total"
+          />
+        </div>
+      </div>
+
+      <!-- Test case row -->
+      <div
+        v-else
+        class="flex flex-wrap items-center gap-x-2 gap-y-1 pr-3 py-1.5 border-b border-default last:border-b-0 hover:bg-gray-50 dark:hover:bg-gray-900/40 transition-colors"
+        :style="{ paddingLeft: `${row.depth * 20 + 12}px` }"
+      >
+        <UIcon name="i-lucide-flask-conical" class="size-3.5 text-muted shrink-0" />
+        <UBadge
+          :color="testCaseCategoryColor(row.testCase.status)"
+          size="xs"
+          variant="subtle"
+          class="capitalize shrink-0"
+        >
+          {{ formatStatusLabel(row.testCase.status) }}
+        </UBadge>
+        <NuxtLink
+          :to="`/test-cases/${row.testCase.id}`"
+          class="text-sm text-primary hover:underline truncate flex-1 min-w-32"
+          :title="row.testCase.title"
+        >
+          {{ row.testCase.title }}
+        </NuxtLink>
+        <div class="flex items-center gap-3 shrink-0">
+          <PassRateIndicator :rate="row.testCase.passRate" />
+          <span class="text-xs text-muted tabular-nums max-sm:hidden" :title="`${row.testCase.totalRuns} runs`">
+            {{ row.testCase.totalRuns }}&times;
+          </span>
+          <span v-if="row.testCase.avgDuration != null" class="text-xs text-muted tabular-nums max-sm:hidden">
+            {{ formatDuration(row.testCase.avgDuration) }}
+          </span>
+          <span class="text-xs text-muted max-sm:hidden" :title="prettyDateFormat(row.testCase.lastRun)">
+            {{ formatRelativeTime(row.testCase.lastRun) }}
+          </span>
+          <UButton :to="`/test-cases/${row.testCase.id}`" size="xs" variant="outline">View</UButton>
+        </div>
+      </div>
+    </template>
+
+    <div v-if="flatRows.length === 0" class="text-center py-8 text-muted">
+      <UIcon name="i-lucide-search-x" class="size-6 mx-auto mb-2 text-gray-300 dark:text-gray-600" />
+      <p class="text-sm">No test cases match your filters.</p>
+    </div>
+  </div>
+</template>
diff --git a/application/app/demo/api/router.ts b/application/app/demo/api/router.ts
index ba92b01c..7f95d21b 100644
--- a/application/app/demo/api/router.ts
+++ b/application/app/demo/api/router.ts
@@ -24,6 +24,7 @@ import {
   getProject,
   getProjectPerformance,
   getProjectTestCases,
+  parseTestCasesQuery,
   getProjectSlowTests,
   getProjectFailureClusters,
   updateProject,
@@ -176,7 +177,7 @@ const routes: RouteEntry[] = [
   {
     method: 'GET',
     pattern: /^\/api\/projects\/(\d+)\/test-cases$/,
-    handler: async (m) => getProjectTestCases(await getDemoDb(), +m[1]!),
+    handler: async (m, _, q) => getProjectTestCases(await getDemoDb(), +m[1]!, parseTestCasesQuery(q)),
   },
   {
     method: 'GET',
diff --git a/application/app/pages/projects/[id]/index.vue b/application/app/pages/projects/[id]/index.vue
index d0e37340..94904852 100644
--- a/application/app/pages/projects/[id]/index.vue
+++ b/application/app/pages/projects/[id]/index.vue
@@ -3,7 +3,6 @@ import type { TableColumn } from '@nuxt/ui';
 import type {
   ProjectWithTestRuns,
   TestRunSummary,
-  TestCaseWithStats,
   PerformanceTrendPoint,
   SlowTest,
   TestRunForCompare,
@@ -202,7 +201,7 @@ const tabItems = computed(() => [
   { label: 'Flaky tests', icon: 'i-lucide-shuffle', value: 'flaky-tests', slot: 'flaky-tests' },
   { label: 'Performance', icon: 'i-lucide-trending-up', value: 'performance', slot: 'performance' },
   {
-    label: `Test cases${testCases.value.length > 0 ? ` (${testCases.value.length})` : ''}`,
+    label: `Test cases${testCasesTotal.value != null ? ` (${testCasesTotal.value})` : ''}`,
     icon: 'i-lucide-list-checks',
     value: 'test-cases',
     slot: 'test-cases',
@@ -359,28 +358,9 @@ const runsColumns: TableColumn<TestRunSummary>[] = [
 ];
 
 // === TEST CASES TAB ===
-// Only fetch when the tab is first visited
-const testCases = ref<TestCaseWithStats[]>([]);
-watch(
-  activeTab,
-  async (tab) => {
-    if (tab === 'test-cases' && testCases.value.length === 0) {
-      testCases.value = await $fetch<TestCaseWithStats[]>(`/api/projects/${projectId}/test-cases`).catch(() => []);
-    }
-  },
-  { immediate: true },
-);
-
-const testCasesColumns: TableColumn<TestCaseWithStats>[] = [
-  { accessorKey: 'title', header: createSortHeader<TestCaseWithStats>('Test case') },
-  { accessorKey: 'status', header: createSortHeader<TestCaseWithStats>('Status') },
-  { accessorKey: 'totalRuns', header: createSortHeader<TestCaseWithStats>('Runs') },
-  { accessorKey: 'passRate', header: createSortHeader<TestCaseWithStats>('Pass rate') },
-  { accessorKey: 'results', header: 'Results' },
-  { accessorKey: 'avgDuration', header: createSortHeader<TestCaseWithStats>('Avg duration') },
-  { accessorKey: 'lastRun', header: createSortHeader<TestCaseWithStats>('Last run') },
-  { id: 'actions', header: 'Actions' },
-];
+// The catalog table (ProjectTestCasesTable) owns its own fetch, filters and
+// pagination; it emits its total row count so the tab label can show it.
+const testCasesTotal = ref<number | null>(null);
 
 // === PERFORMANCE TAB ===
 const dateFrom = ref('');
@@ -1073,120 +1053,12 @@ const comparisonColumns: TableColumn<ComparisonRow>[] = [
 
           <!-- TEST CASES TAB -->
           <template #test-cases>
-            <UCard>
-              <template #header>
-                <p class="text-sm text-gray-600 inline-flex items-center gap-1">
-                  All test cases in {{ project?.name }} with statistics across all runs
-                  <HelpHint topic="project.test-cases" />
-                </p>
-              </template>
-
-              <UTable
-                v-if="testCases && testCases.length > 0"
-                :data="testCases"
-                :columns="testCasesColumns"
-                :ui="{
-                  base: 'table-fixed border-separate border-spacing-0',
-                  thead: '[&>tr]:bg-elevated/50 [&>tr]:after:content-none',
-                  tbody: '[&>tr]:last:[&>td]:border-b-0',
-                  th: 'first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l last:border-r',
-                  td: 'border-b border-default',
-                }"
-              >
-                <template #actions-header>
-                  <div class="text-right">Actions</div>
-                </template>
-
-                <template #title-cell="{ row }">
-                  <div class="min-w-0 space-y-0.5">
-                    <a
-                      :href="`/test-cases/${row.original.id}`"
-                      class="font-medium text-primary hover:underline truncate block"
-                      :title="row.original.title"
-                      @click.prevent="navigateTo(`/test-cases/${row.original.id}`)"
-                    >
-                      {{ row.original.title }}
-                    </a>
-                    <div class="flex items-center gap-1 text-xs text-gray-400">
-                      <UIcon name="i-lucide-file-code" class="size-3 shrink-0" />
-                      <OpenInIdeLink
-                        :file-path="row.original.filePath"
-                        :project-key="projectId"
-                        :project-name="project?.name"
-                        class="min-w-0"
-                      />
-                    </div>
-                  </div>
-                </template>
-
-                <template #status-cell="{ row }">
-                  <UBadge :color="getTestCaseStatus(row.original).color" variant="subtle" class="capitalize" size="sm">
-                    {{ getTestCaseStatus(row.original).status }}
-                  </UBadge>
-                </template>
-
-                <template #totalRuns-cell="{ row }">
-                  <span class="tabular-nums text-sm">{{ row.original.totalRuns }}</span>
-                </template>
-
-                <template #passRate-cell="{ row }">
-                  <span
-                    class="font-medium text-sm tabular-nums"
-                    :class="{
-                      'text-green-600': getPassRate(row.original) >= 80,
-                      'text-yellow-600': getPassRate(row.original) >= 50 && getPassRate(row.original) < 80,
-                      'text-red-600': getPassRate(row.original) < 50,
-                    }"
-                  >
-                    {{ getPassRate(row.original) }}%
-                  </span>
-                </template>
-
-                <template #results-cell="{ row }">
-                  <div class="flex items-center gap-2.5 text-sm">
-                    <span class="flex items-center gap-0.5 text-green-600">
-                      <UIcon name="i-lucide-check" class="size-3.5" />
-                      <span class="tabular-nums">{{ row.original.passedRuns }}</span>
-                    </span>
-                    <span class="flex items-center gap-0.5 text-red-600">
-                      <UIcon name="i-lucide-x" class="size-3.5" />
-                      <span class="tabular-nums">{{ row.original.failedRuns }}</span>
-                    </span>
-                    <span v-if="row.original.flakyRuns > 0" class="flex items-center gap-0.5 text-purple-600">
-                      <UIcon name="i-lucide-refresh-cw" class="size-3" />
-                      <span class="tabular-nums">{{ row.original.flakyRuns }}</span>
-                    </span>
-                    <span v-if="row.original.skippedRuns > 0" class="flex items-center gap-0.5 text-gray-400">
-                      <UIcon name="i-lucide-minus" class="size-3.5" />
-                      <span class="tabular-nums">{{ row.original.skippedRuns }}</span>
-                    </span>
-                  </div>
-                </template>
-
-                <template #avgDuration-cell="{ row }">
-                  <span class="text-sm text-gray-600">{{ formatDuration(row.original.avgDuration) }}</span>
-                </template>
-
-                <template #lastRun-cell="{ row }">
-                  <span class="text-xs text-gray-500">{{ prettyDateFormat(row.original.lastRun) }}</span>
-                </template>
-
-                <template #actions-cell="{ row }">
-                  <div class="flex justify-end">
-                    <UButton
-                      :to="`/test-cases/${row.original.id}`"
-                      size="sm"
-                      variant="outline"
-                      trailing-icon="i-lucide-arrow-right"
-                    >
-                      View
-                    </UButton>
-                  </div>
-                </template>
-              </UTable>
-
-              <div v-else class="text-center py-8 text-gray-500">No test cases yet for this project.</div>
-            </UCard>
+            <ProjectTestCasesTable
+              :project-id="projectId"
+              :project-name="project?.name"
+              sync-query
+              @total="testCasesTotal = $event"
+            />
           </template>
 
           <!-- COMPARE TAB -->
diff --git a/application/app/pages/projects/[id]/test-cases.vue b/application/app/pages/projects/[id]/test-cases.vue
index 79a5b657..83970d56 100644
--- a/application/app/pages/projects/[id]/test-cases.vue
+++ b/application/app/pages/projects/[id]/test-cases.vue
@@ -1,29 +1,18 @@
 <script setup lang="ts">
-import type { TableColumn } from '@nuxt/ui';
-import type { TestCaseWithStats, ProjectDetails } from '~~/types/api';
+import type { ProjectDetails } from '~~/types/api';
 
 const route = useRoute();
-const projectId = route.params.id;
+const projectId = String(route.params.id);
 
-const { data: testCases, refresh } = await useFetch<TestCaseWithStats[]>(`/api/projects/${projectId}/test-cases`);
 const { data: project } = await useFetch<ProjectDetails>(`/api/projects/${projectId}`);
 
+const tableRef = ref<{ refresh: () => void } | null>(null);
+
 useHead(
   computed(() => ({
     title: `${project.value?.label || project.value?.name || 'Project'} — Test cases — Piwi Dashboard`,
   })),
 );
-
-const testCasesColumns: TableColumn<TestCaseWithStats>[] = [
-  { accessorKey: 'title', header: createSortHeader<TestCaseWithStats>('Test case') },
-  { accessorKey: 'status', header: createSortHeader<TestCaseWithStats>('Status') },
-  { accessorKey: 'totalRuns', header: createSortHeader<TestCaseWithStats>('Runs') },
-  { accessorKey: 'passRate', header: createSortHeader<TestCaseWithStats>('Pass rate') },
-  { accessorKey: 'results', header: 'Results' },
-  { accessorKey: 'avgDuration', header: createSortHeader<TestCaseWithStats>('Avg duration') },
-  { accessorKey: 'lastRun', header: createSortHeader<TestCaseWithStats>('Last run') },
-  { id: 'actions', header: 'Actions' },
-];
 </script>
 
 <template>
@@ -42,122 +31,16 @@ const testCasesColumns: TableColumn<TestCaseWithStats>[] = [
           />
         </template>
         <template #right>
-          <NavbarActions :actions="[{ label: 'Refresh', icon: 'i-lucide-refresh-cw', onClick: () => refresh() }]" />
+          <NavbarActions
+            :actions="[{ label: 'Refresh', icon: 'i-lucide-refresh-cw', onClick: () => tableRef?.refresh() }]"
+          />
         </template>
       </UDashboardNavbar>
     </template>
 
     <template #body>
-      <div class="p-4 space-y-4">
-        <UCard>
-          <template #header>
-            <h2>Test cases</h2>
-            <p class="text-sm text-gray-600 mt-1">
-              All test cases in {{ project?.name }} with statistics across all runs
-            </p>
-          </template>
-
-          <TableScroller v-if="testCases && testCases.length > 0" min-width="52rem" :bleed="false">
-            <UTable
-              :data="testCases"
-              :columns="testCasesColumns"
-              :ui="{
-                base: 'table-fixed border-separate border-spacing-0 min-w-[52rem]',
-                thead: '[&>tr]:bg-elevated/50 [&>tr]:after:content-none',
-                tbody: '[&>tr]:last:[&>td]:border-b-0',
-                th: 'first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l last:border-r',
-                td: 'border-b border-default',
-              }"
-            >
-              <template #actions-header>
-                <div class="text-right">Actions</div>
-              </template>
-
-              <template #title-cell="{ row }">
-                <div class="min-w-0 space-y-0.5">
-                  <NuxtLink
-                    :to="`/test-cases/${row.original.id}`"
-                    class="font-medium text-primary hover:underline truncate block"
-                    :title="row.original.title"
-                  >
-                    {{ row.original.title }}
-                  </NuxtLink>
-                  <div class="flex items-center gap-1 text-xs text-gray-400">
-                    <UIcon name="i-lucide-file-code" class="size-3 shrink-0" />
-                    <span class="font-mono truncate">{{ row.original.filePath }}</span>
-                  </div>
-                </div>
-              </template>
-
-              <template #status-cell="{ row }">
-                <UBadge :color="getTestCaseStatus(row.original).color" variant="subtle" class="capitalize" size="sm">
-                  {{ getTestCaseStatus(row.original).status }}
-                </UBadge>
-              </template>
-
-              <template #totalRuns-cell="{ row }">
-                <span class="tabular-nums text-sm">{{ row.original.totalRuns }}</span>
-              </template>
-
-              <template #passRate-cell="{ row }">
-                <span
-                  class="font-medium text-sm tabular-nums"
-                  :class="{
-                    'text-green-600': getPassRate(row.original) >= 80,
-                    'text-yellow-600': getPassRate(row.original) >= 50 && getPassRate(row.original) < 80,
-                    'text-red-600': getPassRate(row.original) < 50,
-                  }"
-                >
-                  {{ getPassRate(row.original) }}%
-                </span>
-              </template>
-
-              <template #results-cell="{ row }">
-                <div class="flex items-center gap-2.5 text-sm">
-                  <span class="flex items-center gap-0.5 text-green-600">
-                    <UIcon name="i-lucide-check" class="size-3.5" />
-                    <span class="tabular-nums">{{ row.original.passedRuns }}</span>
-                  </span>
-                  <span class="flex items-center gap-0.5 text-red-600">
-                    <UIcon name="i-lucide-x" class="size-3.5" />
-                    <span class="tabular-nums">{{ row.original.failedRuns }}</span>
-                  </span>
-                  <span v-if="row.original.flakyRuns > 0" class="flex items-center gap-0.5 text-purple-600">
-                    <UIcon name="i-lucide-refresh-cw" class="size-3" />
-                    <span class="tabular-nums">{{ row.original.flakyRuns }}</span>
-                  </span>
-                  <span v-if="row.original.skippedRuns > 0" class="flex items-center gap-0.5 text-gray-400">
-                    <UIcon name="i-lucide-minus" class="size-3.5" />
-                    <span class="tabular-nums">{{ row.original.skippedRuns }}</span>
-                  </span>
-                </div>
-              </template>
-
-              <template #avgDuration-cell="{ row }">
-                <span class="text-sm text-gray-600">{{ formatDuration(row.original.avgDuration) }}</span>
-              </template>
-
-              <template #lastRun-cell="{ row }">
-                <span class="text-xs text-gray-500">{{ prettyDateFormat(row.original.lastRun) }}</span>
-              </template>
-
-              <template #actions-cell="{ row }">
-                <div class="flex justify-end">
-                  <UButton
-                    :to="`/test-cases/${row.original.id}`"
-                    size="sm"
-                    variant="outline"
-                    trailing-icon="i-lucide-arrow-right"
-                  >
-                    View
-                  </UButton>
-                </div>
-              </template>
-            </UTable>
-          </TableScroller>
-
-          <div v-else class="text-center py-8 text-gray-500">No test cases yet for this project.</div>
-        </UCard>
+      <div class="p-4">
+        <ProjectTestCasesTable ref="tableRef" :project-id="projectId" :project-name="project?.name" sync-query />
       </div>
     </template>
   </UDashboardPanel>
diff --git a/application/app/utils/help-content.ts b/application/app/utils/help-content.ts
index 6da178be..81457840 100644
--- a/application/app/utils/help-content.ts
+++ b/application/app/utils/help-content.ts
@@ -100,7 +100,7 @@ export const HELP_TOPICS = {
   },
   'project.test-cases': {
     title: 'Test cases',
-    text: 'Every distinct test in the project with its pass rate across runs. Click one to see its full history.',
+    text: 'Every distinct test in the project with its executed-only pass rate, result breakdown and average duration across runs. Search by title or file, filter by status, and switch to a per-spec tree. Cases not run within the selected age window are hidden by default (last 30 days) — pick "All time" to see obsolete ones. Click a test to see its full history.',
     doc: 'ui-overview#project-detail',
   },
   'project.compare': {
diff --git a/application/app/utils/index.ts b/application/app/utils/index.ts
index 97bf5657..b540f20c 100644
--- a/application/app/utils/index.ts
+++ b/application/app/utils/index.ts
@@ -1,7 +1,7 @@
 import { h } from 'vue';
 import { UIcon } from '#components';
 import type { Column } from '@tanstack/vue-table';
-import type { CommitListItem, TestCaseWithStats } from '~~/types/api';
+import type { CommitListItem } from '~~/types/api';
 import { formatDuration as formatDurationLib, formatDistanceToNow } from 'date-fns';
 
 /**
@@ -82,8 +82,12 @@ export function formatRelativeTime(date: string | Date | number | null | undefin
 
 export function formatDuration(ms?: number | null) {
   if (ms === null || ms === undefined) return 'N/A';
+  // Round to whole milliseconds so fractional inputs (SQL averages) never
+  // render more than 3 decimals of seconds.
+  const rounded = Math.round(Math.abs(ms));
+  if (rounded === 0) return '0 seconds';
   const sign = ms < 0 ? '−' : '';
-  return sign + formatDurationLib({ seconds: Math.abs(ms) / 1000 });
+  return sign + formatDurationLib({ seconds: rounded / 1000 });
 }
 
 export function reportIcon(type: string): string {
@@ -155,6 +159,7 @@ export function getStatusColor(status: string) {
 export function formatStatusLabel(status: string): string {
   if (status === 'timedOut' || status === 'timedout') return 'failed';
   if (status === 'didnotrun') return "didn't run";
+  if (status === 'never-run') return 'never run';
   return status;
 }
 
@@ -477,20 +482,14 @@ export function passRate(run: { passedTests: number; totalTests: number }): numb
   return run.totalTests > 0 ? Math.round((run.passedTests / run.totalTests) * 100) : 0;
 }
 
-/** Pass rate (0–100) across all of a test case's runs. */
-export function getPassRate(testCase: TestCaseWithStats): number {
-  if (testCase.totalRuns === 0) return 0;
-  return Math.round((testCase.passedRuns / testCase.totalRuns) * 100);
-}
-
-/** Display status + badge color for a test case, treating recent flakiness as its own state. */
-export function getTestCaseStatus(testCase: TestCaseWithStats): { status: string; color: BadgeColor } {
-  const recentFlaky = testCase.recentFlakyRuns ?? testCase.flakyRuns;
-  if (recentFlaky > 0) {
-    return { status: 'flaky', color: 'warning' };
-  }
-  return {
-    status: testCase.lastStatus || 'unknown',
-    color: getStatusColor(testCase.lastStatus || 'unknown') as BadgeColor,
-  };
+/**
+ * Badge color for a test case's derived status category (the server-computed
+ * `status` on `TestCaseWithStats`: flaky wins, timeouts fold into failed,
+ * `never-run` for cases without executions).
+ */
+export function testCaseCategoryColor(category: string): BadgeColor {
+  if (category === 'flaky') return 'warning';
+  if (category === 'never-run') return 'neutral';
+  if (category === 'didnotrun') return 'warning';
+  return getStatusColor(category) as BadgeColor;
 }
diff --git a/application/server/api/projects/[id]/test-cases.get.ts b/application/server/api/projects/[id]/test-cases.get.ts
index 1ef707e8..f03a40b4 100644
--- a/application/server/api/projects/[id]/test-cases.get.ts
+++ b/application/server/api/projects/[id]/test-cases.get.ts
@@ -1,5 +1,5 @@
 import { getDatabase } from '../../../database';
-import { getProjectTestCases } from '#shared/handlers/projects';
+import { getProjectTestCases, parseTestCasesQuery } from '#shared/handlers/projects';
 import { Role } from '#shared/types';
 import { requireProjectAccess, requireRouteId } from '../../../utils/project-access';
 
@@ -10,8 +10,63 @@ defineRouteMeta({
     tags: ['Test Cases'],
     summary: 'List test cases for a project with aggregated stats',
     description:
-      'Returns all test cases with total runs, pass/fail/skip/flaky counts, average duration, and last run status',
-    parameters: [{ name: 'id', in: 'path', required: true, schema: { type: 'integer' } }],
+      'Paginated test-case catalog with per-case aggregates: total runs, pass/fail/skip/flaky counts, executed-only pass rate and average duration, derived status category, and last run. Returns `{ items, total, limit, offset }`. Timed-out runs are folded into the failed counts.',
+    parameters: [
+      { name: 'id', in: 'path', required: true, schema: { type: 'integer' } },
+      {
+        name: 'limit',
+        in: 'query',
+        required: false,
+        schema: { type: 'integer', default: 50, minimum: 1, maximum: 1000 },
+        description: 'Page size',
+      },
+      {
+        name: 'offset',
+        in: 'query',
+        required: false,
+        schema: { type: 'integer', default: 0, minimum: 0 },
+        description: 'Row offset for paging',
+      },
+      {
+        name: 'q',
+        in: 'query',
+        required: false,
+        schema: { type: 'string' },
+        description: 'Case-insensitive substring filter on title or file path',
+      },
+      {
+        name: 'status',
+        in: 'query',
+        required: false,
+        schema: { type: 'string' },
+        description: 'Comma-separated status categories to include: passed, failed, flaky, skipped, didnotrun',
+      },
+      {
+        name: 'maxAgeDays',
+        in: 'query',
+        required: false,
+        schema: { type: 'integer', default: 0, minimum: 0 },
+        description: 'Only include cases executed within the last N days (0 = all time)',
+      },
+      {
+        name: 'sort',
+        in: 'query',
+        required: false,
+        schema: {
+          type: 'string',
+          enum: ['lastRun', 'title', 'totalRuns', 'passRate', 'avgDuration', 'status'],
+          default: 'lastRun',
+        },
+        description: 'Sort column',
+      },
+      {
+        name: 'dir',
+        in: 'query',
+        required: false,
+        schema: { type: 'string', enum: ['asc', 'desc'], default: 'desc' },
+        description: 'Sort direction',
+      },
+    ],
     'x-required-roles': REQUIRED_ROLES,
   },
 });
@@ -22,5 +77,5 @@ export default eventHandler(async (event) => {
   await requireProjectAccess(event, id);
 
   const db = await getDatabase();
-  return getProjectTestCases(db, id);
+  return getProjectTestCases(db, id, parseTestCasesQuery(getQuery(event)));
 });
diff --git a/application/server/utils/mcp/tools.ts b/application/server/utils/mcp/tools.ts
index db415f91..3bb4b5e3 100644
--- a/application/server/utils/mcp/tools.ts
+++ b/application/server/utils/mcp/tools.ts
@@ -1348,12 +1348,12 @@ const HANDLERS: Record<McpToolName, McpToolHandler> = {
     assertProject(ctx, projectId);
     const pageSize = clampPageSize(params.pageSize);
     const offset = Math.max(0, Number(params.offset) || 0);
-    const all = (await getProjectTestCases(db, projectId)) as any[];
-    const page = all.slice(offset, offset + pageSize);
+    const query = typeof params.query === 'string' && params.query.trim() ? params.query.trim() : undefined;
+    const page = await getProjectTestCases(db, projectId, { limit: pageSize, offset, q: query });
     return {
-      total: all.length,
+      total: page.total,
       offset,
-      items: page.map((t: any) =>
+      items: page.items.map((t: any) =>
         dropNulls({
           testCaseId: t.id,
           title: t.title,
@@ -1366,7 +1366,7 @@ const HANDLERS: Record<McpToolName, McpToolHandler> = {
           avgDuration: t.avgDuration != null ? Math.round(t.avgDuration) : null,
         }),
       ),
-      nextOffset: offset + pageSize < all.length ? offset + pageSize : null,
+      nextOffset: offset + pageSize < page.total ? offset + pageSize : null,
     };
   },
 
diff --git a/application/shared/handlers/projects.ts b/application/shared/handlers/projects.ts
index 143ce9fe..885fe84e 100644
--- a/application/shared/handlers/projects.ts
+++ b/application/shared/handlers/projects.ts
@@ -9,7 +9,7 @@ import {
   failureClusters,
   failureDiagnoses,
 } from '../../server/database/schema';
-import { desc, eq, sql, and, inArray, gte, lte, isNotNull, count } from 'drizzle-orm';
+import { asc, desc, eq, exists, sql, and, inArray, gte, lte, isNotNull, count } from 'drizzle-orm';
 import type { BrowserConfig } from '../types';
 
 import type { DrizzleDB } from './db';
@@ -447,44 +447,180 @@ export async function getProjectPerformance(
 
 // ─── getProjectTestCases ─────────────────────────────────────────
 
-export async function getProjectTestCases(db: DrizzleDB, projectId: number) {
-  const testCasesWithStats: any[] = await db
-    .select({
-      id: testCases.id,
-      filePath: testCases.filePath,
-      title: testCases.title,
-      totalRuns: sql<number>`COUNT(${testRunsCases.id})`,
-      passedRuns: sql<number>`SUM(CASE WHEN ${testRunsCases.status} = 'passed' THEN 1 ELSE 0 END)`,
-      failedRuns: sql<number>`SUM(CASE WHEN ${testRunsCases.status} = 'failed' THEN 1 ELSE 0 END)`,
-      skippedRuns: sql<number>`SUM(CASE WHEN ${testRunsCases.status} = 'skipped' THEN 1 ELSE 0 END)`,
-      timedOutRuns: sql<number>`SUM(CASE WHEN ${testRunsCases.status} = 'timedOut' THEN 1 ELSE 0 END)`,
-      flakyRuns: sql<number>`SUM(CASE WHEN ${testRunsCases.status} = 'passed' AND ${testRunsCases.retries} > 0 THEN 1 ELSE 0 END)`,
-      recentFlakyRuns: sql<number>`(
+export const TEST_CASE_SORTS = ['lastRun', 'title', 'totalRuns', 'passRate', 'avgDuration', 'status'] as const;
+export type TestCasesSort = (typeof TEST_CASE_SORTS)[number];
+
+/** Filterable per-case status categories (the derived `status` field, not raw run statuses). */
+export const TEST_CASE_STATUS_FILTERS = ['passed', 'failed', 'flaky', 'skipped', 'didnotrun'] as const;
+
+export interface TestCasesQuery {
+  limit: number;
+  offset: number;
+  q?: string;
+  statuses?: string[];
+  maxAgeDays: number;
+  sort: TestCasesSort;
+  dir: 'asc' | 'desc';
+}
+
+/**
+ * Parse and clamp the test-cases catalog query parameters. Shared by the REST
+ * endpoint (`getQuery` record) and the demo router (`URLSearchParams`) so both
+ * apply identical defaults: limit 50 (max 1000), `maxAgeDays` 0 = all time
+ * (the UI sends its own default), sort by last run, newest first.
+ */
+export function parseTestCasesQuery(input?: URLSearchParams | Record<string, unknown> | null): TestCasesQuery {
+  const get = (key: string): string | undefined => {
+    if (!input) return undefined;
+    const value = input instanceof URLSearchParams ? input.get(key) : (input as Record<string, unknown>)[key];
+    if (value == null) return undefined;
+    return String(Array.isArray(value) ? value[0] : value);
+  };
+  const num = (key: string, fallback: number): number => {
+    const n = Number(get(key));
+    return Number.isFinite(n) ? n : fallback;
+  };
+  const statuses = (get('status') ?? '')
+    .split(',')
+    .map((s) => s.trim())
+    .filter((s) => (TEST_CASE_STATUS_FILTERS as readonly string[]).includes(s));
+  const rawSort = get('sort') ?? '';
+  return {
+    limit: Math.min(1000, Math.max(1, Math.floor(num('limit', 50)))),
+    offset: Math.max(0, Math.floor(num('offset', 0))),
+    q: get('q')?.trim() || undefined,
+    statuses: statuses.length > 0 ? statuses : undefined,
+    maxAgeDays: Math.max(0, num('maxAgeDays', 0)),
+    sort: (TEST_CASE_SORTS as readonly string[]).includes(rawSort) ? (rawSort as TestCasesSort) : 'lastRun',
+    dir: get('dir') === 'asc' ? 'asc' : 'desc',
+  };
+}
+
+/**
+ * Normalize a `MAX(created_at)` aggregate to epoch milliseconds. The raw value
+ * is a ms integer on SQLite, a Date (or timestamp string) on PostgreSQL, and
+ * Unix seconds in demo databases seeded before the unit fix.
+ */
+function toEpochMs(value: unknown): number | null {
+  if (value == null) return null;
+  if (value instanceof Date) return value.getTime();
+  const n = typeof value === 'number' ? value : Number(value);
+  if (Number.isFinite(n)) return n < 1e12 ? n * 1000 : n;
+  const parsed = Date.parse(String(value));
+  return Number.isNaN(parsed) ? null : parsed;
+}
+
+/**
+ * Paginated test-case catalog for a project with per-case aggregates.
+ *
+ * Timed-out runs (both the raw `timedOut` Playwright spelling and the declared
+ * lowercase `timedout`) are folded into `failedRuns`, matching how the rest of
+ * the UI treats timeouts. `passRate` is computed over executed runs only
+ * (passed + failed; skipped/didnotrun excluded) and is null when nothing ran.
+ * The derived `status` category is what the status filter and sort operate on:
+ * `flaky` when any of the last 10 executions is a retry-pass, otherwise the
+ * latest run's status (timeouts shown as failed), or `never-run`.
+ */
+export async function getProjectTestCases(db: DrizzleDB, projectId: number, options: Partial<TestCasesQuery> = {}) {
+  const { limit = 50, offset = 0, q, statuses, maxAgeDays = 0, sort = 'lastRun', dir = 'desc' } = options;
+
+  const passed = sql<number>`SUM(CASE WHEN ${testRunsCases.status} = 'passed' THEN 1 ELSE 0 END)`;
+  const failed = sql<number>`SUM(CASE WHEN ${testRunsCases.status} IN ('failed', 'timedOut', 'timedout') THEN 1 ELSE 0 END)`;
+  const recentFlaky = sql<number>`(
       SELECT COUNT(*) FROM (
         SELECT ${testRunsCases.status} AS s, ${testRunsCases.retries} AS r
         FROM ${testRunsCases}
         WHERE ${testRunsCases.testCaseId} = ${testCases.id}
         ORDER BY ${testRunsCases.createdAt} DESC
         LIMIT 10
-      ) WHERE s = 'passed' AND r > 0
-    )`,
-      avgDuration: sql<number>`AVG(${testRunsCases.duration})`,
-      lastRun: sql<number>`MAX(${testRunsCases.createdAt})`,
-      lastStatus: sql<string>`(
+      ) AS recent WHERE s = 'passed' AND r > 0
+    )`;
+  const lastStatus = sql<string | null>`(
       SELECT ${testRunsCases.status}
       FROM ${testRunsCases}
       WHERE ${testRunsCases.testCaseId} = ${testCases.id}
       ORDER BY ${testRunsCases.createdAt} DESC
       LIMIT 1
-    )`,
+    )`;
+  const category = sql<string>`CASE
+      WHEN ${recentFlaky} > 0 THEN 'flaky'
+      WHEN ${lastStatus} IN ('timedOut', 'timedout') THEN 'failed'
+      ELSE COALESCE(${lastStatus}, 'never-run')
+    END`;
+  const passRate = sql<
+    number | null
+  >`CASE WHEN (${passed} + ${failed}) > 0 THEN (${passed} * 1.0) / (${passed} + ${failed}) END`;
+
+  const conditions = [eq(testCases.projectId, projectId)];
+  if (q) {
+    const pattern = `%${q.toLowerCase()}%`;
+    conditions.push(sql`(lower(${testCases.title}) LIKE ${pattern} OR lower(${testCases.filePath}) LIKE ${pattern})`);
+  }
+  if (maxAgeDays > 0) {
+    const cutoff = new Date(Date.now() - maxAgeDays * 24 * 60 * 60 * 1000);
+    conditions.push(
+      exists(
+        db
+          .select({ one: sql`1` })
+          .from(testRunsCases)
+          .where(and(eq(testRunsCases.testCaseId, testCases.id), gte(testRunsCases.createdAt, cutoff))),
+      ),
+    );
+  }
+  if (statuses && statuses.length > 0) {
+    conditions.push(inArray(category, statuses));
+  }
+  const where = and(...conditions);
+
+  // Every predicate above is per-case (correlated on testCases.id only), so the
+  // total is a plain count over test_cases — no join or grouping needed.
+  const countRows: any[] = await db.select({ total: count() }).from(testCases).where(where);
+  const total = Number(countRows[0]?.total ?? 0);
+
+  const sortExpressions: Record<TestCasesSort, ReturnType<typeof sql>> = {
+    lastRun: sql`MAX(${testRunsCases.createdAt})`,
+    title: sql`lower(${testCases.title})`,
+    totalRuns: sql`COUNT(${testRunsCases.id})`,
+    passRate,
+    avgDuration: sql`AVG(CASE WHEN ${testRunsCases.status} NOT IN ('skipped', 'didnotrun') THEN ${testRunsCases.duration} END)`,
+    status: category,
+  };
+
+  const rows: any[] = await db
+    .select({
+      id: testCases.id,
+      filePath: testCases.filePath,
+      suitePath: testCases.suitePath,
+      title: testCases.title,
+      status: category,
+      totalRuns: sql<number>`COUNT(${testRunsCases.id})`,
+      passedRuns: passed,
+      failedRuns: failed,
+      skippedRuns: sql<number>`SUM(CASE WHEN ${testRunsCases.status} = 'skipped' THEN 1 ELSE 0 END)`,
+      didNotRunRuns: sql<number>`SUM(CASE WHEN ${testRunsCases.status} = 'didnotrun' THEN 1 ELSE 0 END)`,
+      flakyRuns: sql<number>`SUM(CASE WHEN ${testRunsCases.status} = 'passed' AND ${testRunsCases.retries} > 0 THEN 1 ELSE 0 END)`,
+      recentFlakyRuns: recentFlaky,
+      passRate,
+      avgDuration: sql<
+        number | null
+      >`AVG(CASE WHEN ${testRunsCases.status} NOT IN ('skipped', 'didnotrun') THEN ${testRunsCases.duration} END)`,
+      lastRun: sql<number | null>`MAX(${testRunsCases.createdAt})`,
+      lastStatus,
     })
     .from(testCases)
     .leftJoin(testRunsCases, eq(testCases.id, testRunsCases.testCaseId))
-    .where(eq(testCases.projectId, projectId))
-    .groupBy(testCases.id, testCases.filePath, testCases.title)
-    .orderBy(desc(sql`MAX(${testRunsCases.createdAt})`));
+    .where(where)
+    .groupBy(testCases.id, testCases.filePath, testCases.suitePath, testCases.title)
+    .orderBy(sql`${sortExpressions[sort]} ${sql.raw(dir === 'asc' ? 'ASC' : 'DESC')} NULLS LAST`, asc(testCases.id))
+    .limit(limit)
+    .offset(offset);
 
-  return testCasesWithStats;
+  return {
+    items: rows.map((row) => ({ ...row, lastRun: toEpochMs(row.lastRun) })),
+    total,
+    limit,
+    offset,
+  };
 }
 
 /**
diff --git a/application/shared/mcp-tools.ts b/application/shared/mcp-tools.ts
index 1d2b96cb..78f46fad 100644
--- a/application/shared/mcp-tools.ts
+++ b/application/shared/mcp-tools.ts
@@ -441,6 +441,7 @@ export const MCP_TOOL_DEFS = [
         projectId: { type: 'number', description: 'Project ID' },
         pageSize: { type: 'number', description: 'Results per page (default 10, max 50)' },
         offset: { type: 'number', description: 'Row offset for paging (default 0)' },
+        query: { type: 'string', description: 'Optional case-insensitive substring filter on title or file path' },
       },
       required: ['projectId'],
     },
diff --git a/application/shared/test-project-names.ts b/application/shared/test-project-names.ts
index e5f47700..ca25f607 100644
--- a/application/shared/test-project-names.ts
+++ b/application/shared/test-project-names.ts
@@ -104,6 +104,7 @@ export const PROJECT = {
   STREAMING_TEST: 'streaming-test-project',
   TAG_ASSIGNMENT: 'tag-assignment-test-project',
   TEST_API: 'test-api-project',
+  TEST_CASES_CATALOG: 'test-cases-catalog-test',
   TEST_FLAKY: 'test-flaky-project',
   TEST_PROJECT: 'test-project',
   TEST_RUN_CASE_PAGE: 'test-run-case-page-test',
diff --git a/application/tests/insights-and-spec-health.spec.ts b/application/tests/insights-and-spec-health.spec.ts
index 007c83b8..3f38c308 100644
--- a/application/tests/insights-and-spec-health.spec.ts
+++ b/application/tests/insights-and-spec-health.spec.ts
@@ -104,7 +104,7 @@ test.describe.serial('Insights, spec health & flaky classification', () => {
   test('flaky-classify labels a timeout failure as "timing"', async ({ request }) => {
     const tcRes = await request.get(`/api/projects/${projectId}/test-cases`);
     expect(tcRes.ok()).toBeTruthy();
-    const cases = (await tcRes.json()) as Array<{ id: number; title: string }>;
+    const { items: cases } = (await tcRes.json()) as { items: Array<{ id: number; title: string }> };
     const checkout = cases.find((c) => c.title === 'checkout works');
     expect(checkout, 'checkout test case exists').toBeTruthy();
 
diff --git a/application/tests/project-test-cases.spec.ts b/application/tests/project-test-cases.spec.ts
new file mode 100644
index 00000000..a80a477b
--- /dev/null
+++ b/application/tests/project-test-cases.spec.ts
@@ -0,0 +1,96 @@
+/**
+ * UI tests for the project test-cases catalog (`/projects/:id/test-cases`):
+ * server-driven search, status filtering and the flat/tree toggle on the
+ * revamped shared table.
+ */
+import { test, expect, type APIRequestContext } from './fixtures';
+import { waitForHydration, retryPost } from './utils';
+import { PROJECT } from '#shared/test-project-names';
+
+async function seed(request: APIRequestContext) {
+  const res = await retryPost(request, '/api/test-runs/submit', {
+    data: {
+      projectName: PROJECT.TEST_CASES_CATALOG,
+      status: 'failed',
+      startTime: new Date().toISOString(),
+      duration: 5000,
+      totalTests: 4,
+      passedTests: 3,
+      failedTests: 1,
+      skippedTests: 0,
+      testCases: [
+        { title: 'login works', status: 'passed', duration: 500, location: 'tests/auth/login.spec.ts:1:1' },
+        {
+          title: 'login validation',
+          status: 'passed',
+          retries: 2,
+          duration: 800,
+          location: 'tests/auth/login.spec.ts:20:1',
+        },
+        {
+          title: 'checkout works',
+          status: 'failed',
+          duration: 1200,
+          location: 'tests/shop/checkout.spec.ts:1:1',
+          error: 'Error: expected total to update\n    at tests/shop/checkout.spec.ts:5:3',
+        },
+        { title: 'checkout tax', status: 'passed', duration: 640, location: 'tests/shop/checkout.spec.ts:30:1' },
+      ],
+    },
+    timeout: 20000,
+  });
+  expect(res.ok()).toBeTruthy();
+  return (await res.json()) as { projectId: number };
+}
+
+test.describe.serial('Project test-cases catalog', () => {
+  let projectId = 0;
+
+  test('seeds a project with four test cases', async ({ request }) => {
+    const { projectId: id } = await seed(request);
+    projectId = id;
+    expect(projectId).toBeGreaterThan(0);
+  });
+
+  test('lists cases with title and file path', async ({ page }) => {
+    await page.goto(`/projects/${projectId}/test-cases`);
+    await waitForHydration(page);
+
+    await expect(page.getByText('4 cases')).toBeVisible();
+    await expect(page.getByRole('link', { name: 'login works' })).toBeVisible();
+    await expect(page.getByRole('link', { name: 'checkout works' })).toBeVisible();
+    await expect(page.getByText('tests/auth/login.spec.ts').first()).toBeVisible();
+  });
+
+  test('search narrows the list to matching cases', async ({ page }) => {
+    await page.goto(`/projects/${projectId}/test-cases`);
+    await waitForHydration(page);
+
+    await page.getByRole('textbox', { name: 'Search test cases' }).fill('checkout');
+    // The query is debounced and refetched server-side; web-first assertions retry.
+    await expect(page.getByRole('link', { name: 'checkout works' })).toBeVisible();
+    await expect(page.getByRole('link', { name: 'login works' })).toHaveCount(0);
+    await expect(page.getByText('2 cases')).toBeVisible();
+  });
+
+  test('the Failed status pill filters to failing cases', async ({ page }) => {
+    await page.goto(`/projects/${projectId}/test-cases`);
+    await waitForHydration(page);
+
+    await page.getByRole('button', { name: 'Failed' }).click();
+    await expect(page.getByRole('link', { name: 'checkout works' })).toBeVisible();
+    await expect(page.getByRole('link', { name: 'login works' })).toHaveCount(0);
+    await expect(page.getByText('1 case', { exact: true })).toBeVisible();
+  });
+
+  test('tree view groups cases by spec file', async ({ page }) => {
+    await page.goto(`/projects/${projectId}/test-cases`);
+    await waitForHydration(page);
+
+    await page.getByTitle('Tree view').click();
+    // Both spec files appear as group headers with their case counts.
+    await expect(page.getByText('tests/auth/login.spec.ts')).toBeVisible();
+    await expect(page.getByText('tests/shop/checkout.spec.ts')).toBeVisible();
+    await expect(page.getByText('2 cases').first()).toBeVisible();
+  });
+});
diff --git a/application/tests/unit/app-utils.test.ts b/application/tests/unit/app-utils.test.ts
index a2e12e87..efb43ffb 100644
--- a/application/tests/unit/app-utils.test.ts
+++ b/application/tests/unit/app-utils.test.ts
@@ -6,6 +6,7 @@ import {
   formatRelativeTime,
   getStatusColor,
   formatStatusLabel,
+  testCaseCategoryColor,
   clusterStatusColor,
   clusterErrorTypeColor,
   getFileApiPath,
@@ -45,6 +46,18 @@ describe('formatDuration', () => {
     expect(formatDuration(5000)).toBe('5 seconds');
     expect(formatDuration(-5000)).toBe('−5 seconds');
   });
+
+  test('rounds fractional milliseconds to at most 3 decimals of seconds', () => {
+    expect(formatDuration(8234.666666667)).toBe('8.235 seconds');
+    expect(formatDuration(1234.5678)).toBe('1.235 seconds');
+    expect(formatDuration(1234)).toBe('1.234 seconds');
+    expect(formatDuration(-1234.5678)).toBe('−1.235 seconds');
+  });
+
+  test('renders zero durations as 0 seconds instead of an empty string', () => {
+    expect(formatDuration(0)).toBe('0 seconds');
+    expect(formatDuration(0.2)).toBe('0 seconds');
+  });
 });
 
 describe('prettyDateFormat', () => {
@@ -89,10 +102,21 @@ describe('formatStatusLabel', () => {
     expect(formatStatusLabel('timedOut')).toBe('failed');
     expect(formatStatusLabel('timedout')).toBe('failed');
     expect(formatStatusLabel('didnotrun')).toBe("didn't run");
+    expect(formatStatusLabel('never-run')).toBe('never run');
     expect(formatStatusLabel('passed')).toBe('passed');
   });
 });
 
+describe('testCaseCategoryColor', () => {
+  test('maps derived catalog categories to badge colors', () => {
+    expect(testCaseCategoryColor('flaky')).toBe('warning');
+    expect(testCaseCategoryColor('never-run')).toBe('neutral');
+    expect(testCaseCategoryColor('didnotrun')).toBe('warning');
+    expect(testCaseCategoryColor('passed')).toBe('success');
+    expect(testCaseCategoryColor('failed')).toBe('error');
+  });
+});
+
 describe('cluster color helpers', () => {
   test('clusterStatusColor', () => {
     expect(clusterStatusColor('open')).toBe('warning');
diff --git a/application/tests/unit/project-test-cases.test.ts b/application/tests/unit/project-test-cases.test.ts
new file mode 100644
index 00000000..60bf10af
--- /dev/null
+++ b/application/tests/unit/project-test-cases.test.ts
@@ -0,0 +1,243 @@
+import { describe, test, expect, beforeAll } from 'vitest';
+import { fileURLToPath } from 'node:url';
+import { drizzle } from 'drizzle-orm/libsql';
+import { migrate } from 'drizzle-orm/libsql/migrator';
+import { createClient } from '@libsql/client';
+import * as schema from '../../server/database/schema.sqlite';
+
+// The schema barrel (server/database/schema.ts) picks the PostgreSQL schema at
+// import time when PIWI_DATABASE_URL is set, so clear it before the handler
+// module (which imports the barrel) is loaded.
+delete process.env.PIWI_DATABASE_URL;
+const { getProjectTestCases, parseTestCasesQuery } = await import('../../shared/handlers/projects');
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+const now = Date.now();
+/** Fresh execution timestamps, spaced a minute apart so ordering is deterministic. */
+const at = (minutesAgo: number) => new Date(now - minutesAgo * 60 * 1000);
+
+let db: ReturnType<typeof drizzle<typeof schema>>;
+
+interface RunCaseSeed {
+  status: string;
+  retries?: number;
+  duration?: number | null;
+  createdAt: Date;
+}
+
+async function seedCase(
+  projectId: number,
+  runId: number,
+  filePath: string,
+  suitePath: string,
+  title: string,
+  runCases: RunCaseSeed[],
+): Promise<number> {
+  const inserted = await db
+    .insert(schema.testCases)
+    .values({ projectId, filePath, suitePath, title })
+    .returning({ id: schema.testCases.id });
+  const caseId = inserted[0]!.id;
+  for (const rc of runCases) {
+    await db.insert(schema.testRunsCases).values({
+      testRunId: runId,
+      testCaseId: caseId,
+      status: rc.status,
+      retries: rc.retries ?? 0,
+      duration: rc.duration === undefined ? 1000 : rc.duration,
+      createdAt: rc.createdAt,
+    });
+  }
+  return caseId;
+}
+
+beforeAll(async () => {
+  db = drizzle(createClient({ url: ':memory:' }), { schema });
+  await migrate(db, {
+    migrationsFolder: fileURLToPath(new URL('../../server/database/migrations', import.meta.url)),
+  });
+
+  await db.insert(schema.projects).values({ id: 1, name: 'catalog-project' });
+  await db.insert(schema.projects).values({ id: 2, name: 'other-project' });
+  await db.insert(schema.testRuns).values({ id: 1, projectId: 1, status: 'failed', startTime: new Date(now) });
+  await db.insert(schema.testRuns).values({ id: 2, projectId: 2, status: 'passed', startTime: new Date(now) });
+
+  // Flaky: latest 10 executions contain a retry-pass; one plain failure.
+  await seedCase(1, 1, 'auth/login.spec.ts', 'Auth\x1fLogin', 'login works', [
+    { status: 'passed', createdAt: at(1), duration: 900 },
+    { status: 'passed', retries: 2, createdAt: at(2), duration: 1100 },
+    { status: 'failed', createdAt: at(3), duration: 2000 },
+    { status: 'passed', createdAt: at(4), duration: 1000 },
+  ]);
+  // Timed out (raw camelCase spelling) on the latest execution.
+  await seedCase(1, 1, 'shop/checkout.spec.ts', '', 'checkout total updates', [
+    { status: 'timedOut', createdAt: at(1), duration: 30000 },
+    { status: 'passed', createdAt: at(60), duration: 800 },
+  ]);
+  // Stale: only execution happened 40 days ago.
+  await seedCase(1, 1, 'legacy/old.spec.ts', '', 'legacy flow still boots', [
+    { status: 'passed', createdAt: new Date(now - 40 * DAY_MS), duration: 500 },
+  ]);
+  // Skipped only: never executed for real.
+  await seedCase(1, 1, 'auth/sso.spec.ts', '', 'sso round trip', [
+    { status: 'skipped', createdAt: at(5), duration: 0 },
+    { status: 'skipped', createdAt: at(90), duration: 0 },
+  ]);
+  // No executions at all.
+  await seedCase(1, 1, 'wip/new.spec.ts', '', 'brand new case', []);
+  // didnotrun on the latest execution; zero-duration rows must not drag the average.
+  await seedCase(1, 1, 'shop/cart.spec.ts', 'Shop\x1fCart', 'cart badge count', [
+    { status: 'didnotrun', createdAt: at(1), duration: 0 },
+    { status: 'passed', createdAt: at(2), duration: 400 },
+  ]);
+  // Different project: must never leak into project 1 results.
+  await seedCase(2, 2, 'auth/login.spec.ts', '', 'login works', [{ status: 'passed', createdAt: at(1) }]);
+});
+
+describe('getProjectTestCases', () => {
+  test('returns a paginated envelope scoped to the project', async () => {
+    const page = await getProjectTestCases(db, 1);
+    expect(page.total).toBe(6);
+    expect(page.items).toHaveLength(6);
+    expect(page.limit).toBe(50);
+    expect(page.offset).toBe(0);
+    expect(page.items.every((i: any) => typeof i.suitePath === 'string')).toBe(true);
+  });
+
+  test('applies limit and offset with a stable order', async () => {
+    const first = await getProjectTestCases(db, 1, { limit: 2, offset: 0 });
+    const second = await getProjectTestCases(db, 1, { limit: 2, offset: 2 });
+    expect(first.total).toBe(6);
+    expect(first.items).toHaveLength(2);
+    expect(second.items).toHaveLength(2);
+    const ids = [...first.items, ...second.items].map((i: any) => i.id);
+    expect(new Set(ids).size).toBe(4);
+  });
+
+  test('search matches title and file path case-insensitively', async () => {
+    const byTitle = await getProjectTestCases(db, 1, { q: 'LOGIN' });
+    expect(byTitle.items.map((i: any) => i.title)).toContain('login works');
+    const byPath = await getProjectTestCases(db, 1, { q: 'shop/' });
+    expect(byPath.total).toBe(2);
+    expect(byPath.items.map((i: any) => i.filePath).sort()).toEqual(['shop/cart.spec.ts', 'shop/checkout.spec.ts']);
+  });
+
+  test('folds timed-out runs into failedRuns and the failed category', async () => {
+    const page = await getProjectTestCases(db, 1, { q: 'checkout' });
+    const checkout: any = page.items[0];
+    expect(checkout.failedRuns).toBe(1);
+    expect(checkout.status).toBe('failed');
+    const failedOnly = await getProjectTestCases(db, 1, { statuses: ['failed'] });
+    expect(failedOnly.items.map((i: any) => i.title)).toEqual(['checkout total updates']);
+    expect(failedOnly.total).toBe(1);
+  });
+
+  test('flaky category wins over the latest run status', async () => {
+    const flaky = await getProjectTestCases(db, 1, { statuses: ['flaky'] });
+    expect(flaky.items.map((i: any) => i.title)).toEqual(['login works']);
+    expect((flaky.items[0] as any).recentFlakyRuns).toBe(1);
+  });
+
+  test('derives skipped, didnotrun and never-run categories', async () => {
+    const page = await getProjectTestCases(db, 1);
+    const byTitle = new Map(page.items.map((i: any) => [i.title, i]));
+    expect(byTitle.get('sso round trip')!.status).toBe('skipped');
+    expect(byTitle.get('cart badge count')!.status).toBe('didnotrun');
+    expect(byTitle.get('cart badge count')!.didNotRunRuns).toBe(1);
+    expect(byTitle.get('brand new case')!.status).toBe('never-run');
+    expect(byTitle.get('brand new case')!.lastRun).toBeNull();
+  });
+
+  test('maxAgeDays hides cases not executed within the window, 0 keeps everything', async () => {
+    const windowed = await getProjectTestCases(db, 1, { maxAgeDays: 30 });
+    expect(windowed.items.map((i: any) => i.title)).not.toContain('legacy flow still boots');
+    // The never-run case has no executions, so an age window also hides it.
+    expect(windowed.total).toBe(4);
+    const all = await getProjectTestCases(db, 1, { maxAgeDays: 0 });
+    expect(all.total).toBe(6);
+  });
+
+  test('computes pass rate over executed runs only', async () => {
+    const page = await getProjectTestCases(db, 1);
+    const byTitle = new Map(page.items.map((i: any) => [i.title, i]));
+    expect(byTitle.get('login works')!.passRate).toBeCloseTo(0.75);
+    expect(byTitle.get('checkout total updates')!.passRate).toBeCloseTo(0.5);
+    expect(byTitle.get('sso round trip')!.passRate).toBeNull();
+  });
+
+  test('computes average duration over executed runs only', async () => {
+    const page = await getProjectTestCases(db, 1, { q: 'cart' });
+    const cart: any = page.items[0];
+    expect(cart.avgDuration).toBe(400);
+    const skippedOnly = await getProjectTestCases(db, 1, { q: 'sso' });
+    expect((skippedOnly.items[0] as any).avgDuration).toBeNull();
+  });
+
+  test('sorts by pass rate with nulls last in both directions', async () => {
+    const ascending = await getProjectTestCases(db, 1, { sort: 'passRate', dir: 'asc' });
+    const ascRates = ascending.items.map((i: any) => i.passRate);
+    expect(ascRates.slice(0, 4)).toEqual([0.5, 0.75, 1, 1]);
+    expect(ascRates.slice(4)).toEqual([null, null]);
+    const descending = await getProjectTestCases(db, 1, { sort: 'passRate', dir: 'desc' });
+    const descRates = descending.items.map((i: any) => i.passRate);
+    expect(descRates.slice(0, 4)).toEqual([1, 1, 0.75, 0.5]);
+    expect(descRates.slice(4)).toEqual([null, null]);
+  });
+
+  test('normalizes lastRun to epoch milliseconds', async () => {
+    const page = await getProjectTestCases(db, 1, { q: 'login' });
+    const lastRun = (page.items[0] as any).lastRun;
+    expect(typeof lastRun).toBe('number');
+    expect(Math.abs(lastRun - at(1).getTime())).toBeLessThan(1000);
+  });
+});
+
+describe('parseTestCasesQuery', () => {
+  test('applies defaults on empty input', () => {
+    expect(parseTestCasesQuery(undefined)).toEqual({
+      limit: 50,
+      offset: 0,
+      q: undefined,
+      statuses: undefined,
+      maxAgeDays: 0,
+      sort: 'lastRun',
+      dir: 'desc',
+    });
+  });
+
+  test('parses URLSearchParams input', () => {
+    const parsed = parseTestCasesQuery(
+      new URLSearchParams('q=login&status=failed,flaky,bogus&maxAgeDays=30&sort=passRate&dir=asc&limit=25&offset=50'),
+    );
+    expect(parsed).toEqual({
+      limit: 25,
+      offset: 50,
+      q: 'login',
+      statuses: ['failed', 'flaky'],
+      maxAgeDays: 30,
+      sort: 'passRate',
+      dir: 'asc',
+    });
+  });
+
+  test('clamps and whitelists record input', () => {
+    const parsed = parseTestCasesQuery({
+      limit: '5000',
+      offset: '-3',
+      q: '  ',
+      status: 'nope',
+      maxAgeDays: '-5',
+      sort: 'DROP TABLE',
+      dir: 'sideways',
+    });
+    expect(parsed).toEqual({
+      limit: 1000,
+      offset: 0,
+      q: undefined,
+      statuses: undefined,
+      maxAgeDays: 0,
+      sort: 'lastRun',
+      dir: 'desc',
+    });
+  });
+});
diff --git a/application/types/api.ts b/application/types/api.ts
index 9241c99f..d682e90c 100644
--- a/application/types/api.ts
+++ b/application/types/api.ts
@@ -614,22 +614,39 @@ export interface ProjectFailureCluster {
 }
 
 /**
- * Test case with statistics - returned by GET /api/projects/[id]/test-cases
+ * Test case with statistics - one item of GET /api/projects/[id]/test-cases.
+ * `failedRuns` includes timed-out runs; `status` is the derived category the
+ * status filter operates on (flaky wins over the last run's status, timeouts
+ * count as failed, `never-run` when the case has no executions). `passRate`
+ * is over executed runs only (0..1), null when nothing executed.
  */
 export interface TestCaseWithStats {
   id: number;
   filePath: string;
+  suitePath: string;
   title: string;
+  status: string;
   totalRuns: number;
   passedRuns: number;
   failedRuns: number;
   skippedRuns: number;
-  timedOutRuns: number;
+  didNotRunRuns: number;
   flakyRuns: number;
   recentFlakyRuns?: number;
-  avgDuration: number;
-  lastRun: number;
-  lastStatus: string;
+  passRate: number | null;
+  avgDuration: number | null;
+  lastRun: number | null;
+  lastStatus: string | null;
+}
+
+/**
+ * Paginated envelope returned by GET /api/projects/[id]/test-cases
+ */
+export interface TestCasesPage {
+  items: TestCaseWithStats[];
+  total: number;
+  limit: number;
+  offset: number;
 }
 
 // ============================================================================
diff --git a/docs/ui-overview.md b/docs/ui-overview.md
index 0412f537..646037b5 100644
--- a/docs/ui-overview.md
+++ b/docs/ui-overview.md
@@ -55,7 +55,7 @@ The complete history for one project, organized into tabs:
 - **Test runs** — every run with status, start time, duration, test counts, and browser badges; select two runs to compare. Runs with a shared failure signature roll up into **Failure clusters** here (see [AI diagnosis & clustering](./ai-diagnosis)).
 - **Flaky tests** — intermittent tests scored by a composite flakiness metric, with root-cause classification and impact ranking. See [Flaky tests & analytics](./flaky-tests#flaky-test-detection).
 - **Performance** — average/P90 duration trends and a slowest-tests table. See [Performance](./flaky-tests#performance).
-- **Test cases** — every unique test with pass rate, result breakdown, average duration, and last-run date.
+- **Test cases** — every unique test with status, executed-only pass rate, result breakdown, average duration, and last run; searchable, filterable by status and last-run age (stale cases hidden by default), paginated, with flat and per-spec tree views.
 - **Compare** — side-by-side delta between two runs (new failures, recovered, duration changes).
 - **Spec health** — a heatmap grouping test cases by spec file and coloring each by pass rate, so an unhealthy area of the suite jumps out. See [Spec health heatmap](./flaky-tests#spec-health-heatmap).
 - **Members** *(admins, when auth is enabled)* — grant or scope project access per user. See [Project access](./authentication#project-access).

From 668e94a8966e79bd55b2e836744299193fbc99be Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 16 Jul 2026 22:14:19 +0000
Subject: [PATCH 3/3] fix(app): make test-cases table full width and support
 choosing page size

The desktop table had no explicit width, so on wide viewports it sized to
its min-width/content and left dead space instead of filling the card.
Page size was a hardcoded 50 with no way to change it.

Add w-full alongside the existing min-width so the table always fills its
container. Replace the fixed page size with a selectable 10/25/50/100
(default 25, synced to the URL like the other filters).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Co6VcMZLLwZWZ4FiUmR7fY
---
 .../project/ProjectTestCasesTable.vue         | 55 ++++++++++++++-----
 1 file changed, 42 insertions(+), 13 deletions(-)

diff --git a/application/app/components/project/ProjectTestCasesTable.vue b/application/app/components/project/ProjectTestCasesTable.vue
index ed2fb87e..7e985f8d 100644
--- a/application/app/components/project/ProjectTestCasesTable.vue
+++ b/application/app/components/project/ProjectTestCasesTable.vue
@@ -19,8 +19,14 @@ const route = useRoute();
 const router = useRouter();
 const { treeView, setTreeView } = useTreeViewCookie('project-test-cases');
 
-const PAGE_SIZE = 50;
 const TREE_LIMIT = 1000;
+const DEFAULT_PAGE_SIZE = 25;
+const PAGE_SIZE_OPTIONS = [
+  { label: '10 / page', value: 10 },
+  { label: '25 / page', value: 25 },
+  { label: '50 / page', value: 50 },
+  { label: '100 / page', value: 100 },
+];
 const AGE_OPTIONS = [
   { label: 'Last 7 days', value: 7 },
   { label: 'Last 30 days', value: 30 },
@@ -48,6 +54,8 @@ const statuses = ref<string[]>(typeof init.status === 'string' ? init.status.spl
 const age = ref(typeof init.age === 'string' && init.age !== '' ? Math.max(0, Number(init.age) || 0) : defaultAge);
 const sort = ref<TestCasesSort>(typeof init.sort === 'string' ? (init.sort as TestCasesSort) : 'lastRun');
 const dir = ref<'asc' | 'desc'>(init.dir === 'asc' ? 'asc' : 'desc');
+const initialPageSize = Number(init.pageSize);
+const pageSize = ref(PAGE_SIZE_OPTIONS.some((o) => o.value === initialPageSize) ? initialPageSize : DEFAULT_PAGE_SIZE);
 
 watch(
   searchInput,
@@ -55,13 +63,13 @@ watch(
     q.value = value.trim();
   }, 300),
 );
-watch([q, statuses, age, sort, dir, treeView], () => {
+watch([q, statuses, age, sort, dir, pageSize, treeView], () => {
   page.value = 1;
 });
 
 const query = computed(() => ({
-  limit: treeView.value ? TREE_LIMIT : PAGE_SIZE,
-  offset: treeView.value ? 0 : (page.value - 1) * PAGE_SIZE,
+  limit: treeView.value ? TREE_LIMIT : pageSize.value,
+  offset: treeView.value ? 0 : (page.value - 1) * pageSize.value,
   ...(q.value ? { q: q.value } : {}),
   ...(statuses.value.length > 0 ? { status: statuses.value.join(',') } : {}),
   maxAgeDays: age.value,
@@ -82,7 +90,7 @@ watch(
 );
 
 if (props.syncQuery) {
-  watch([q, statuses, age, sort, dir, page], () => {
+  watch([q, statuses, age, sort, dir, page, pageSize], () => {
     router.replace({
       query: {
         ...route.query,
@@ -92,6 +100,7 @@ if (props.syncQuery) {
         sort: sort.value !== 'lastRun' ? sort.value : undefined,
         dir: dir.value !== 'desc' ? dir.value : undefined,
         page: page.value > 1 ? String(page.value) : undefined,
+        pageSize: pageSize.value !== DEFAULT_PAGE_SIZE ? String(pageSize.value) : undefined,
       },
     });
   });
@@ -146,8 +155,10 @@ const columns = computed<TableColumn<TestCaseWithStats>[]>(() => [
 
 const items = computed(() => data.value?.items ?? []);
 const total = computed(() => data.value?.total ?? 0);
-const showingFrom = computed(() => (total.value === 0 ? 0 : (page.value - 1) * PAGE_SIZE + 1));
-const showingTo = computed(() => (treeView.value ? items.value.length : Math.min(page.value * PAGE_SIZE, total.value)));
+const showingFrom = computed(() => (total.value === 0 ? 0 : (page.value - 1) * pageSize.value + 1));
+const showingTo = computed(() =>
+  treeView.value ? items.value.length : Math.min(page.value * pageSize.value, total.value),
+);
 const hasSearchOrStatusFilter = computed(() => q.value !== '' || statuses.value.length > 0);
 const hasAnyFilter = computed(() => hasSearchOrStatusFilter.value || age.value !== 0);
 const initialLoading = computed(() => status.value === 'pending' && !data.value);
@@ -297,7 +308,7 @@ defineExpose({ refresh });
               :data="items"
               :columns="columns"
               :ui="{
-                base: 'table-fixed border-separate border-spacing-0 min-w-[56rem]',
+                base: 'w-full table-fixed border-separate border-spacing-0 min-w-[56rem]',
                 thead: '[&>tr]:bg-elevated/50 [&>tr]:after:content-none',
                 tbody: '[&>tr]:last:[&>td]:border-b-0 [&>tr]:hover:bg-gray-50 dark:[&>tr]:hover:bg-gray-900/50',
                 th: 'first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l last:border-r',
@@ -434,11 +445,29 @@ defineExpose({ refresh });
           </div>
 
           <!-- Pagination footer -->
-          <div v-if="total > PAGE_SIZE" class="mt-4 flex flex-wrap items-center justify-between gap-3">
-            <span class="text-sm text-muted tabular-nums"
-              >Showing {{ showingFrom }}–{{ showingTo }} of {{ total }}</span
-            >
-            <UPagination v-model:page="page" :total="total" :items-per-page="PAGE_SIZE" size="sm" />
+          <div class="mt-4 flex flex-wrap items-center justify-between gap-3">
+            <div class="flex flex-wrap items-center gap-3">
+              <span class="text-sm text-muted tabular-nums"
+                >Showing {{ showingFrom }}–{{ showingTo }} of {{ total }}</span
+              >
+              <div class="flex items-center gap-1.5">
+                <span class="text-sm text-muted">Rows per page</span>
+                <USelect
+                  v-model="pageSize"
+                  :items="PAGE_SIZE_OPTIONS"
+                  size="sm"
+                  class="w-28"
+                  aria-label="Rows per page"
+                />
+              </div>
+            </div>
+            <UPagination
+              v-if="total > pageSize"
+              v-model:page="page"
+              :total="total"
+              :items-per-page="pageSize"
+              size="sm"
+            />
           </div>
         </template>
       </div>