vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Activity

swarm-ui/agents: bring back the table view (and its filters) as a toggle

Browse source 
Mara's follow-up on #4257, right after the card-only version went up:
"still want the filters tho, maybe split the data component from the
view" / "if we split data component and view, we can make it switchable
between table and specialized card view."

AgentsPage already had its data/actions (rows, declareState, the
dialog-target state) separated from rendering by this point - the only
missing piece was a second renderer. Restores the original Table +
columns array as the "table" viewMode alongside the new card view,
adds a small two-button toggle in the Panel's actions row, and persists
the choice to localStorage (same pattern as Table's own per-column
filter persistence) so a reload keeps the last choice. Cards stays the
default.

Verified with a real CDP click switching to table view: columns,
sort arrows, and filter icons are all back.
This commit is contained in:
iris 2026-09-11 21:44:11 +02:00
commit 1e6156d116
1 changed files with 247 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

34
frontend/packages/swarm-ui/src/pages/AgentsPage.css
View file

@ -8,11 +8,43 @@
flex-direction: column;
gap: 0.5em;
}
.ui-agent-card-list-empty {
/* Shared by both views (`Table` has its own `emptyMessage` rendering,
but the card view has nothing equivalent — this covers both, and
`AgentsPage` only mounts it when `rows` is loaded and empty). */
.ui-agents-empty {
color: var(--muted);
text-align: center;
padding: 1.25em 0.75em;
}
/* Two-way view switcher in the Panel's title-row actions — same visual
weight as `RefreshIntervalPicker` next to it (quiet until touched),
but a segmented pair rather than a select since there's no listbox
worth opening for a two-option choice. */
.ui-agents-view-toggle {
display: inline-flex;
border: 1px solid var(--border);
border-radius: 0.4em;
overflow: hidden;
}
.ui-agents-view-toggle button {
border: none;
background: none;
color: var(--muted);
padding: 0.45em 0.75em;
font: inherit;
font-size: 0.9em;
cursor: pointer;
}
.ui-agents-view-toggle button + button {
border-left: 1px solid var(--border);
}
.ui-agents-view-toggle button.active {
background: var(--bg-elev);
color: var(--fg);
}
.ui-agents-view-toggle button:not(.active):hover {
color: var(--fg);
}
.ui-agent-card {
display: flex;
flex-direction: column;