refactor web pagination and add partitioned events, flap/timeout showcase agents

web/src/components/PageSizeSelect.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { PAGE_SIZE_OPTIONS, type PageSize } from "@/lib/pagination";
+
+export function PageSizeSelect({
+  value,
+  onChange,
+  options = PAGE_SIZE_OPTIONS,
+}: {
+  value: PageSize;
+  onChange: (size: PageSize) => void;
+  options?: readonly number[];
+}) {
+  return (
+    <label className="inline-flex items-center gap-2 text-xs text-neutral-400">
+      <span>per page</span>
+      <select
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value) as PageSize)}
+        className="border border-neutral-800 bg-neutral-950 px-2 py-1 text-sm text-neutral-100 outline-none focus:border-neutral-500"
+      >
+        {options.map((n) => (
+          <option key={n} value={n}>
+            {n}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}