From d207a059a488ec3b37d12cffac05ad8c2dbf3223 Mon Sep 17 00:00:00 2001
From: Benson Wong <mostlygeek+git@gmail.com>
Date: Sun, 28 Jun 2026 03:43:55 +0000
Subject: [PATCH] ui: enable pagination on Activity page and fix table
 reactivity

- add showPagination to Activity route's ActivityTable
- fix pagination reactivity: reassign pagination object in
  onPaginationChange so TanStack's effect.pre detects the change, and
  reset to first page only when pageSize changes
- move data-change page reset into untrack to avoid clobbering
  navigation
- render Cached/Prompt/Drafted headers with a dotted underline trigger
  instead of a separate info icon
---
 ui-svelte/src/components/ActivityTable.svelte | 29 ++++++++++++-------
 .../activity-table/HeaderLabel.svelte         |  8 +++--
 ui-svelte/src/routes/Activity.svelte          |  1 +
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/ui-svelte/src/components/ActivityTable.svelte b/ui-svelte/src/components/ActivityTable.svelte
index 2ecd9863..66ba7253 100644
--- a/ui-svelte/src/components/ActivityTable.svelte
+++ b/ui-svelte/src/components/ActivityTable.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from "svelte";
   import type { ActivityLogEntry, ReqRespCapture } from "../lib/types";
   import { getCapture } from "../stores/api";
   import { persistentStore } from "../stores/persistent";
@@ -135,23 +136,21 @@
   // svelte-ignore state_referenced_locally
   const storedPageSize = persistentStore<number>(`${storagePrefix}-page-size`, 10);
 
+  // When not paginating, use a large page size so all rows render in one page.
   // svelte-ignore state_referenced_locally
   let pagination = $state<PaginationState>({
     pageIndex: 0,
-    pageSize: showPagination ? $storedPageSize : 1,
-  });
-
-  // When not paginating, show every row; reset page on data/pageSize change.
-  $effect(() => {
-    if (!showPagination) {
-      pagination.pageSize = metrics.length || 1;
-    }
+    pageSize: showPagination ? $storedPageSize : Number.MAX_SAFE_INTEGER,
   });
 
+  // Reset to the first page when the data source changes. We deliberately do
+  // NOT track pagination here — page-size changes reset pageIndex inside
+  // onPaginationChange instead, to avoid clobbering page navigation.
   $effect(() => {
     metrics;
-    pagination.pageSize;
-    pagination.pageIndex = 0;
+    untrack(() => {
+      pagination = { ...pagination, pageIndex: 0 };
+    });
   });
 
   let selectedCapture = $state<ReqRespCapture | null>(null);
@@ -286,8 +285,16 @@
       },
     },
     onPaginationChange: (updater) => {
+      const prev = pagination;
+      const next =
+        typeof updater === "function" ? updater(prev) : updater;
+      // Reassign so the table's $effect.pre (which reads state.pagination)
+      // picks up the new value. Reset to first page when the page size
+      // changes so we don't land on an empty page.
       pagination =
-        typeof updater === "function" ? updater(pagination) : updater;
+        next.pageSize !== prev.pageSize
+          ? { pageIndex: 0, pageSize: next.pageSize }
+          : next;
       if (showPagination) storedPageSize.set(pagination.pageSize);
     },
     onColumnVisibilityChange: (updater) => {
diff --git a/ui-svelte/src/components/activity-table/HeaderLabel.svelte b/ui-svelte/src/components/activity-table/HeaderLabel.svelte
index 6b66918f..c280f07e 100644
--- a/ui-svelte/src/components/activity-table/HeaderLabel.svelte
+++ b/ui-svelte/src/components/activity-table/HeaderLabel.svelte
@@ -9,9 +9,13 @@
   let { label, tooltip }: Props = $props();
 </script>
 
-{label}{#if tooltip}
+{#if tooltip}
   <Tooltip.Root>
-    <Tooltip.Trigger class="cursor-help align-middle normal-case">&#9432;</Tooltip.Trigger>
+    <Tooltip.Trigger class="cursor-help border-b border-dotted border-current align-middle">
+      {label}
+    </Tooltip.Trigger>
     <Tooltip.Content>{tooltip}</Tooltip.Content>
   </Tooltip.Root>
+{:else}
+  {label}
 {/if}
diff --git a/ui-svelte/src/routes/Activity.svelte b/ui-svelte/src/routes/Activity.svelte
index b264cac1..a245873e 100644
--- a/ui-svelte/src/routes/Activity.svelte
+++ b/ui-svelte/src/routes/Activity.svelte
@@ -15,6 +15,7 @@
     metrics={sortedMetrics}
     storagePrefix="activity"
     showModelColumn={true}
+    showPagination={true}
     cardClass="min-h-[30rem] overflow-auto"
     emptyMessage="No activity recorded"
   />