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

web/src/components/ListToolbar.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { PageSizeSelect } from "@/components/PageSizeSelect";
+import { type PageSize } from "@/lib/pagination";
+
+export function ListToolbar({
+  query,
+  onQueryChange,
+  placeholder,
+  pageSize,
+  onPageSizeChange,
+}: {
+  query: string;
+  onQueryChange: (value: string) => void;
+  placeholder: string;
+  pageSize: PageSize;
+  onPageSizeChange: (next: PageSize) => void;
+}) {
+  return (
+    <div className="mb-4 flex items-center justify-between gap-3">
+      <div className="flex max-w-md flex-1 gap-2">
+        <input
+          type="search"
+          value={query}
+          onChange={(event) => onQueryChange(event.target.value)}
+          placeholder={placeholder}
+          className="min-w-0 flex-1 border border-neutral-800 bg-neutral-950 px-2 py-1.5 text-sm text-neutral-100 outline-none focus:border-neutral-500"
+        />
+        {query ? (
+          <button
+            type="button"
+            onClick={() => onQueryChange("")}
+            className="border border-neutral-900 px-3 py-1.5 text-sm text-neutral-500 hover:text-neutral-300"
+          >
+            clear
+          </button>
+        ) : null}
+      </div>
+      <PageSizeSelect value={pageSize} onChange={onPageSizeChange} />
+    </div>
+  );
+}