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/WantedMenu.tsx

@@ -0,0 +1,124 @@
+// <WantedMenu> — the "wanted" state control: one badge showing the
+// current declaration, opening a `Dropdown` with the four explicit
+// states — replaces the old toggle-badge-plus-separate-destroy-badge
+// pair. Explicit options also fix a real bug the toggle had: for an
+// undeclared row, the toggle inferred a target as "the opposite of
+// `snapshot.running`", so a click on an undeclared-but-running agent
+// silently declared it *offline* rather than making its real state
+// explicit — a dropdown just lets "up" be picked directly regardless
+// of what's inferred, no flip-to-the-opposite-of-a-guess involved
+// (mara: "when no state is declared, i want to set it to online").
+// Presentational only, same split as `StatusChips`'s `Picker`/
+// `StatusMenu`: the caller owns what each selection actually does.
+//
+// "paused" has no separate resume option here — selecting "up" from a
+// paused row is the resume, same PUT either way (`AgentsPage`'s
+// `declareState`, `hive-c0re`'s `decide_pause` backend counterpart,
+// treats a declared `Up` with the marker still set as "clear it"). A
+// dedicated "resume" entry would just be a second spelling of the
+// option already above it.
+import { useRef, useState } from "preact/hooks";
+import { Badge, type BadgeTone } from "@hive/shared/badge.js";
+import { Dropdown, type DropdownOption } from "@hive/shared/dropdown.js";
+import type { AgentRow } from "./AgentTypes.js";
+
+export function WantedMenu({
+  row,
+  pending,
+  onSelectUp,
+  onSelectOffline,
+  onSelectPaused,
+  onDestroy,
+  showDestroy = true,
+  portal = false,
+}: {
+  row: AgentRow;
+  pending: boolean;
+  onSelectUp: (row: AgentRow) => void;
+  onSelectOffline: (row: AgentRow) => void;
+  onSelectPaused: (row: AgentRow) => void;
+  onDestroy?: (row: AgentRow) => void;
+  /**
+   * The card view (see `AgentCard`) passes `false` here — its
+   * quick-access menu keeps to the three everyday states, so "destroy"
+   * can't be reached by an extra click off a state that's already open.
+   * `AgentsPage`'s detail-panel `WantedMenu` keeps the default (`true`)
+   * — mara: "destroy is already available via wanted state", i.e. the
+   * full menu there, not a separate button.
+   */
+  showDestroy?: boolean;
+  /**
+   * Forwarded to `Dropdown`'s own `portal` (see its file-top comment) —
+   * only the table's "wanted" column needs it, to escape
+   * `.ui-table-scroll`'s clip on the table's last row (the bug `Dropdown`'s
+   * own `portal` prop exists to fix in the first place).
+   * Neither the card list nor the detail panel has a clipping ancestor,
+   * and inside the detail panel specifically `portal` is actively wrong:
+   * a `position: fixed` element appended to `document.body` renders
+   * *behind* an open native `<dialog>` (the dialog is promoted to the
+   * browser's top layer, which composites above ordinary body content
+   * regardless of z-index) — found while screenshotting this exact
+   * dropdown open inside the detail panel, only the portion extending
+   * past the dialog's own edge was visible.
+   */
+  portal?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef<HTMLDivElement>(null);
+  const destroyed = row.wanted === "destroyed";
+  const tone: BadgeTone =
+    row.wanted === "up"
+      ? "positive"
+      : row.wanted === "paused"
+        ? "warning"
+        : destroyed
+          ? "negative"
+          : "neutral";
+  const options: DropdownOption[] = [
+    { value: "up", label: "up" },
+    { value: "paused", label: "paused" },
+    { value: "offline", label: "offline" },
+    ...(showDestroy
+      ? [{ value: "destroy", label: "destroy", danger: true }]
+      : []),
+  ];
+
+  return (
+    <div class="ui-dropdown-anchor" ref={anchorRef}>
+      <Badge
+        tone={tone}
+        value={pending ? "…" : (row.wanted ?? "no declaration")}
+        // `destroyed` blocks opening the menu at all — same UX-only
+        // guard as before (real enforcement is server-side, see
+        // `declareState`'s caller), just applied to the trigger instead
+        // of a `disabled` toggle badge.
+        onClick={row.hive && !destroyed ? () => setOpen((o) => !o) : undefined}
+        expanded={open}
+        disabled={pending || !row.hive || destroyed}
+        title={
+          destroyed
+            ? `${row.name} is destroyed — redeploy via "+ agent" to bring it back`
+            : row.hive
+              ? `declare a new state for ${row.name}`
+              : "no hive on record for this agent — nothing to declare against"
+        }
+      />
+      <Dropdown
+        open={open}
+        portal={portal}
+        options={options}
+        activeValue={row.wanted ?? undefined}
+        label={`declare ${row.name}`}
+        onSelect={(value) => {
+          setOpen(false);
+          if (value === "up") onSelectUp(row);
+          else if (value === "offline") onSelectOffline(row);
+          else if (value === "paused") onSelectPaused(row);
+          else onDestroy?.(row);
+        }}
+        onClose={() => setOpen(false)}
+        anchorRef={anchorRef}
+      />
+    </div>
+  );
+}