swarm-ui/agents: shared filters across views, real second panel for detail

Two more asks from mara's live review:

- "i want the same filters for the cards tho, thats why i suggested
  separating data and filter from view" - extracted Table's filter
  *state* (not its popover UI, which stays table-shaped) into a new
  exported useTableFilters hook. Table calls it internally, unchanged
  behavior for every existing caller. AgentsPage now calls the same hook
  with the same storageKey, so card view and table view read/write one
  shared filter state instead of each having their own (or cards having
  none at all). Card view gets its own toolbar (AgentFilterBar) - a
  name search input plus one FilterMultiselect per multiselect column,
  same checkbox-list markup Table's own popover uses, driving the same
  state. Switching the view toggle no longer loses or hides whatever's
  filtered.

- "why no separate panel? i mean a second panel on agent page" - replaced
  the modal Dialog with a real second Panel, always mounted (empty state
  when nothing's selected, so selecting an agent never shifts the page's
  own layout). Panel gained an optional `class` prop so the two panels
  can flex-size themselves in a row. List/detail panels sit side by side
  in a flex-wrap row that stacks on a narrow viewport - content-driven,
  same approach the shell's own nav uses, not a second hardcoded
  breakpoint. Selected card gets a highlight so it's clear which one the
  detail panel is showing.

Verified with real CDP clicks: split layout with nothing selected,
selecting a card highlights it and populates the detail panel, opening
a card-view filter and checking a value narrows both the card list AND
(after switching the toggle) the table to the identical row set.

frontend/packages/swarm-ui/src/pages/AgentsPage.css

@@ -60,6 +60,14 @@
   border-color: var(--purple);
   outline: none;
 }
+/* The row currently shown in the detail panel — a solid border (not
+   just the hover tint above, which needs to keep meaning "hovering",
+   not double as "selected") plus a faint fill so it still reads once
+   the pointer moves away. */
+.ui-agent-card-selected {
+  border-color: var(--purple);
+  background: color-mix(in srgb, var(--purple) 10%, var(--bg-elev));
+}
 .ui-agent-card-line1 {
   display: flex;
   align-items: center;
@@ -82,11 +90,8 @@
   word-break: break-word;
 }
 
-/* Detail panel (`Dialog` body) — the fields `AgentCard`'s main view
-   doesn't show. */
-.ui-agent-detail-name {
-  margin: 0 0 0.75em;
-}
+/* Detail panel body — its own `Panel`, title supplied by the panel's
+   `title` prop (the agent's name), not repeated in here. */
 .ui-agent-detail-fields {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -104,3 +109,55 @@
   align-items: center;
   gap: 0.75em;
 }
+
+/* List panel + detail panel side by side — `flex-wrap`, not a
+   `@media` breakpoint, so a narrow viewport stacks them the same
+   content-driven way the shell's own nav already wraps (`Shell.css`),
+   rather than picking a second, independent magic-number breakpoint. */
+.ui-agents-layout {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1em;
+  align-items: flex-start;
+}
+.ui-agents-list-panel {
+  flex: 2 1 480px;
+  min-width: 0;
+}
+.ui-agents-detail-panel {
+  flex: 1 1 320px;
+  min-width: 0;
+}
+
+/* Card view's filter toolbar — `Table`'s per-column popovers, minus the
+   table to hang them off of. */
+.ui-agents-filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5em;
+  margin-bottom: 0.75em;
+}
+.ui-agents-filter-search {
+  background: var(--bg);
+  color: var(--fg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 0.35em 0.6em;
+  font: inherit;
+  font-size: 0.9em;
+}
+.ui-agents-filter {
+  position: relative;
+}
+/* `.ui-table-filter-popover` (Table.css) supplies the panel chrome
+   (background/border/shadow) — this just positions it under the
+   trigger, `position: absolute` rather than the fixed/portal recipe
+   `Table`'s own version needs: nothing here clips this popover, so the
+   simpler positioning is enough (see this component's own comment). */
+.ui-agents-filter-popover {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 0.25em;
+}