swarm-ui: persist table filters, add reset button, multi-select, negate

Per mara's issue: tables should remember their filters (with a reset
button), the labels filter should be multi-select, and any filter should
support negation (search vs exclude).

All in the shared Table component (ui/table/Table.tsx), used by
AgentsPage/HivesPage/IssueReportPage:

- filters now persist via the same useLocalSetting hook IssueReportPage
  already used for its own state, keyed by a new required storageKey
  prop (required, not optional, so no caller can forget it and every
  table gets persistence for free)
- a small 'reset filters' button clears every column's filter at once,
  shown only when at least one is active
- new filterMode: "multiselect" (+ a filterValues extractor, alongside
  the existing single-value filterValue) renders a checkbox list and
  matches on any overlap - IssueReportPage's own bespoke label-checkbox
  sidebar is folded into this instead of staying a second, separate
  filter mechanism
- a negate toggle ('exclude') sits under every filter mode's control,
  applying uniformly to text/select/multiselect

Verified: tsc --noEmit and the esbuild bundle both clean.

frontend/packages/swarm-ui/src/pages/IssueReportPage.tsx

@@ -9,8 +9,8 @@
 // `transitively_blocks_count` all arrive pre-resolved per row, so
 // nothing here does its own dependency-graph walk.
 //
-// Sorting and the label/hide-blocked filters are client-side over
-// whatever's currently loaded — only the repo selection re-fetches.
+// Sorting and the hide-blocked/label/etc. filters are all client-side
+// over whatever's currently loaded — only the repo selection re-fetches.
 // Default sort is `depended_on_by_count` descending: mara's own framing
 // ("i would also like to rank them by how many issues depend on them")
 // reads as the report's headline ordering, not just one more column.
@@ -21,11 +21,12 @@
 // be instant), so it fetches once per repo-selection change instead of
 // polling.
 //
-// Sort/filter state persists via the shared `useLocalSetting` hook (same
+// Sort state persists via the shared `useLocalSetting` hook (same
 // plumbing the theme/motion overrides use) — mara: "local storage" over
-// URL params. `labelFilter` is `string[]`, not `Set<string>`: a `Set`
-// serializes to `"{}"` through `JSON.stringify` and silently loses its
-// contents, which is exactly what this hook round-trips through.
+// URL params. The label filter used to be this page's own bespoke
+// checkbox row — folded into the "labels" column's own `Table` filter
+// (`filterMode: "multiselect"`) per mara's "fold filters into table"
+// request, one mechanism instead of two.
 import { useEffect, useMemo, useState } from "preact/hooks";
 import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
 import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
@@ -71,9 +72,12 @@ const ALL_REPOS = "";
 // page — collides with these by accident.
 const REPO_FILTER_KEY = "swarm-ui:issue-report:repo-filter";
 const HIDE_BLOCKED_KEY = "swarm-ui:issue-report:hide-blocked";
-const LABEL_FILTER_KEY = "swarm-ui:issue-report:label-filter";
 const SORT_KEY_KEY = "swarm-ui:issue-report:sort-key";
 const SORT_DIR_KEY = "swarm-ui:issue-report:sort-dir";
+// `Table`'s own filter state (repo/labels/etc. are handled separately
+// above/below — this key is just for the generic per-column filters,
+// e.g. title/assignees/blocked).
+const TABLE_FILTERS_KEY = "swarm-ui:issue-report:table-filters";
 
 function splitRepo(repo: string): { org: string; name: string } | null {
   const i = repo.indexOf("/");
@@ -145,10 +149,6 @@ export function IssueReportPage() {
     HIDE_BLOCKED_KEY,
     false,
   );
-  const [labelFilter, setLabelFilter] = useLocalSetting<string[]>(
-    LABEL_FILTER_KEY,
-    [],
-  );
   const [sortKey, setSortKey] = useLocalSetting<SortKey>(
     SORT_KEY_KEY,
     "depended_on_by_count",
@@ -180,7 +180,8 @@ export function IssueReportPage() {
   }, []);
 
   // The one fetch this page re-runs on state change — everything else
-  // (sort, hide-blocked, label filter) works over what's already loaded.
+  // (sort, hide-blocked, the table's own per-column filters) works over
+  // what's already loaded.
   useEffect(() => {
     let cancelled = false;
     setLoading(true);
@@ -210,26 +211,14 @@ export function IssueReportPage() {
     };
   }, [repoFilter]);
 
-  // Label choices are derived from whatever's currently loaded, not a
-  // separate endpoint — naturally scoped to "all repos" or one repo
-  // depending on the current selection, and never asks for a label that
-  // isn't actually present in the report.
-  const allLabels = useMemo(() => {
-    const s = new Set<string>();
-    for (const row of rows ?? []) for (const l of row.labels) s.add(l);
-    return [...s].sort();
-  }, [rows]);
-
   const visibleRows = useMemo(() => {
     let out = rows ?? [];
     if (hideBlocked) out = out.filter((r) => !r.blocked);
-    if (labelFilter.length > 0)
-      out = out.filter((r) => r.labels.some((l) => labelFilter.includes(l)));
     return [...out].sort((a, b) => {
       const c = compareRows(a, b, sortKey);
       return sortDir === "asc" ? c : -c;
     });
-  }, [rows, hideBlocked, labelFilter, sortKey, sortDir]);
+  }, [rows, hideBlocked, sortKey, sortDir]);
 
   function onSort(key: SortKey) {
     if (key === sortKey) {
@@ -240,14 +229,6 @@ export function IssueReportPage() {
     }
   }
 
-  function toggleLabel(label: string) {
-    setLabelFilter(
-      labelFilter.includes(label)
-        ? labelFilter.filter((l) => l !== label)
-        : [...labelFilter, label],
-    );
-  }
-
   // `aria-sort` for a sortable column's `<th>` — 'none' while sortable
   // but not the active column, the real direction while it is. Screen
   // readers announce this; the ▲/▼ glyph in `SortHeader` is `aria-hidden`
@@ -315,6 +296,8 @@ export function IssueReportPage() {
       key: "labels",
       header: "labels",
       render: (r) => (r.labels.length ? r.labels.join(", ") : "—"),
+      filterValues: (r) => r.labels,
+      filterMode: "multiselect",
     },
     {
       key: "assignees",
@@ -414,20 +397,6 @@ export function IssueReportPage() {
           hide blocked (open dependency)
         </label>
       </div>
-      {allLabels.length ? (
-        <div class="issue-report-labels">
-          {allLabels.map((l) => (
-            <label key={l} class="issue-report-label-chip">
-              <input
-                type="checkbox"
-                checked={labelFilter.includes(l)}
-                onChange={() => toggleLabel(l)}
-              />
-              {l}
-            </label>
-          ))}
-        </div>
-      ) : null}
       {error ? (
         <ApiErrorPanel
           context="failed to load the issue report"
@@ -441,6 +410,7 @@ export function IssueReportPage() {
           rows={visibleRows}
           rowKey={(r) => `${r.repo}#${r.number}`}
           emptyMessage="no issues match the current filters"
+          storageKey={TABLE_FILTERS_KEY}
         />
       ) : null}
     </Panel>