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/ui/panel/Panel.tsx

@@ -34,14 +34,19 @@ export function Panel({
   icon,
   actions,
   children,
+  class: extraClass,
 }: {
   title?: string;
   icon?: string;
   actions?: ComponentChildren;
   children: ComponentChildren;
+  /** Extra class on the outer `<section>` — e.g. flex-sizing a panel
+   * that's one of several sharing a row (`AgentsPage`'s list/detail
+   * split). Omit for the plain single-panel case every other caller is. */
+  class?: string;
 }) {
   return (
-    <section class="ui-panel">
+    <section class={extraClass ? `ui-panel ${extraClass}` : "ui-panel"}>
       {title || icon || actions ? (
         <div class="ui-panel-header">
           {icon ? (