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.css

@@ -0,0 +1,24 @@
+/* <AgentCard> content layout — the clickable/selectable container
+   itself is `Card`'s (`ui/card/`); this is just the name/badges/
+   message arrangement inside one. */
+.ui-agent-card-line1 {
+  display: flex;
+  align-items: center;
+  gap: 0.6em;
+}
+.ui-agent-card-name {
+  font-weight: 600;
+}
+/* Pushes the wanted-state control to the row's trailing edge regardless
+   of how wide the status badge next to it ends up. */
+.ui-agent-card-wanted {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4em;
+  margin-left: auto;
+}
+.ui-agent-card-message {
+  color: var(--muted);
+  white-space: normal;
+  word-break: break-word;
+}