swarm-ui/agents: split the page, extract FilterableView per mara's follow-up

Three more asks from the same review thread:

- "agentspage is now giant and deserves a split" - AgentsPage.tsx was
  1047 lines. Split into AgentTypes.ts (AgentRow and friends),
  WantedMenu.tsx, AgentCard.tsx (+ its own CSS), leaving AgentsPage.tsx
  as state/actions/columns/the render tree - 649 lines, and every piece
  it composes is now independently readable.

- "what about the component that represents filtered data ... that the
  card view and table can both use?" - extracted FilterableView
  (ui/filterable-view/): takes columns/rows/rowKey/storageKey/view/
  renderCard, builds its filter bar from *every* filterable column (not
  a hand-picked subset - the old AgentFilterBar only showed 4 of the
  agent columns' 6 filterable fields, an accidental gap the table's own
  popovers didn't have), and renders either the card list or Table.
  AgentsPage now just tells it which view to show; the view toggle
  itself stays page-side since it's Panel-header chrome, not filtering.
  Disclosed side effect: card view's filter bar now also covers
  message/config-PR (text filters), matching table view exactly instead
  of a narrower subset.

- CSS audit: AgentsPage.css now holds only what's genuinely page-specific
  (the view toggle, the detail-panel field grid) - everything else moved
  to its owning component's own colocated CSS.

FilterableView gets a /components demo (view toggle + filter bar + both
render modes, same day per the design guide). Verified: AgentsPage
still renders the same (real screenshot), and the demo's own table
toggle produces a real Table with the same rows.

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

@@ -0,0 +1,93 @@
+// <AgentCard> — one card per roster agent (mara: "main view: name,
+// status, message, wanted" / "message as second line" / "more like
+// card per agent") — the FilterableView `view === "cards"` alternative
+// to the original `Table`, not its replacement (see `AgentsPage`'s own
+// comment). Clicking a card opens a detail panel repeating this same
+// info plus what doesn't fit here (hive, config-PR link, matrix
+// link-account) — mara: "the info from main list should be included in
+// the agent view" too, not just the leftovers.
+//
+// Built on the shared `Card` primitive (`ui/card/`) for the clickable/
+// selectable-container mechanics — the `stopPropagation` wrapper around
+// `WantedMenu` below keeps its own clicks (mouse or keyboard-synthesized,
+// `WantedMenu` hosts real `<button>`s) from also firing `Card`'s
+// `onClick` and opening the detail panel.
+import { Badge } from "@hive/shared/badge.js";
+import type { ProblemDetails } from "@hive/shared/api-error.js";
+import { Card } from "../ui/card/Card.js";
+import { RelativeTime } from "../ui/relative-time/RelativeTime.js";
+import { FRESHNESS, type AgentRow } from "./AgentTypes.js";
+import { WantedMenu } from "./WantedMenu.js";
+import "./AgentCard.css";
+
+export function AgentCard({
+  row,
+  pending,
+  error,
+  selected,
+  onSelectUp,
+  onSelectOffline,
+  onSelectPaused,
+  onOpenDetail,
+}: {
+  row: AgentRow;
+  pending: boolean;
+  error: ProblemDetails | undefined;
+  /** This row is the one currently shown in the detail panel — a
+   * highlight only (the panel itself is the source of truth), so a
+   * page-refresh landing on a still-valid selection reads as obviously
+   * "that one" rather than a silent selection nothing marks. */
+  selected: boolean;
+  onSelectUp: (row: AgentRow) => void;
+  onSelectOffline: (row: AgentRow) => void;
+  onSelectPaused: (row: AgentRow) => void;
+  onOpenDetail: (row: AgentRow) => void;
+}) {
+  const { tone, label } = FRESHNESS[row.freshness];
+  return (
+    <Card selected={selected} onClick={() => onOpenDetail(row)}>
+      <div class="ui-agent-card-line1">
+        <span class="ui-agent-card-name">{row.name}</span>
+        <Badge
+          tone={tone}
+          title={
+            row.freshness === "unknown"
+              ? "reported by its hive but not registered in swarm-level identity — needs migration"
+              : undefined
+          }
+          value={
+            <>
+              {label}
+              {row.last_seen_unix !== null ? (
+                <>
+                  {" "}
+                  (<RelativeTime epochMs={row.last_seen_unix * 1000} />)
+                </>
+              ) : null}
+            </>
+          }
+        />
+        <span class="ui-agent-card-wanted" onClick={(e) => e.stopPropagation()}>
+          <WantedMenu
+            row={row}
+            pending={pending}
+            showDestroy={false}
+            onSelectUp={onSelectUp}
+            onSelectOffline={onSelectOffline}
+            onSelectPaused={onSelectPaused}
+          />
+          {error ? (
+            <Badge
+              tone="negative"
+              value="failed"
+              title={error.detail ?? "the declaration failed"}
+            />
+          ) : null}
+        </span>
+      </div>
+      <div class="ui-agent-card-message">
+        {row.snapshot?.status_text ?? "—"}
+      </div>
+    </Card>
+  );
+}