vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

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
2 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;

242
frontend/packages/swarm-ui/src/pages/AgentsPage.tsx
View file

@ -1,30 +1,30 @@
// <AgentsPage> — the swarm's agent roster, merged with each agent's open
// config-PR status, swarm-wide health status, and declared wanted state
// in the same table. Three separate asks (a roster listing, a per-agent
// config-PR indicator, and per-agent status/liveness) that turned out to
// be one page: a roster with no per-row detail is thin, and neither a
// config-PR panel nor a status panel has anything to render against
// without a roster to embed in.
// config-PR status, swarm-wide health status, and declared wanted state.
// A roster with no per-row detail is thin, and neither a config-PR nor a
// status panel has anything to render against without a roster to embed
// in — so all three ended up as one page.
//
// One fetch, on a refresh-interval cadence like HivesPage: `GET
// /api/agents/status` — one row per roster agent (identity store is the
// roster, so a never-reported agent still gets a row), each already
// carrying its freshness/snapshot/config PR/wanted state. That merge
// used to be three separate fetches (`/api/agents`, `/api/config-prs`,
// `/api/agents/status`) joined client-side by name; per operator review
// feedback ("the view should be filled by a single backend call") the
// join moved server-side instead — see `swarm-controller/src/main.rs`'s
// `get_agents_status` handler for where `config_pr`/`wanted` get merged
// in and why that's the handler's job rather than
// `agent_status::AgentStatusReader`'s. No more per-page joining left to
// do here: the wire row *is* the row this page renders.
// carrying its freshness/snapshot/config PR/wanted state. Used to be
// three separate fetches joined client-side by name; per operator
// review feedback ("the view should be filled by a single backend
// call") the join moved server-side instead — see
// `swarm-controller/src/main.rs`'s `get_agents_status` handler. No more
// per-page joining left to do here: the wire row *is* the row this page renders.
//
// Owns the "+ agent" trigger too — the roster this populates is the
// natural home for the action that populates it. The form itself
// (`CreateAgentForm`) mounts inside a `Dialog` here, not its own route.
//
// Renders as one `AgentCard` per row, not a `Table` — see that
// component's own comment below for the card/detail-panel split.
// Two interchangeable views over the same `rows`/actions, picked by
// `viewMode`: the original `Table` (full columns, per-column sort/
// filter) and one `AgentCard` per row (see that component's own
// comment for the card/detail-panel split). Mara, after the card view
// landed: "still want the filters tho" / "split data component from
// the view... switchable between table and specialized card view" —
// so the toggle, not a card-only replacement.
//
// The "wanted" column is one `WantedMenu` badge+dropdown per row — see
// that component's own comment above `AgentsPage` for why.
@ -45,6 +45,7 @@ import {
useRefreshInterval,
type RefreshIntervalMs,
} from "../ui/refresh-interval/RefreshInterval.js";
import { Table, type TableColumn } from "../ui/table/Table.js";
import { CreateAgentForm } from "./CreateAgentForm.js";
import { LinkMatrixAccountForm } from "./LinkMatrixAccountForm.js";
import "./AgentsPage.css";
@ -142,6 +143,11 @@ const CONFIRM_COPY: Record<
// solve staleness rather than require an opt-in every visit.
const DEFAULT_INTERVAL_MS: RefreshIntervalMs = 30_000;
type ViewMode = "cards" | "table";
// Persisted like `Table`'s own per-column filters (`storageKey` below) —
// a chosen view is a standing preference, not a per-visit default.
const VIEW_MODE_KEY = "swarm-ui:agents:view-mode";
// The "wanted" column's 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.
@ -247,15 +253,15 @@ function WantedMenu({
}
// One card per roster agent (mara: "main view: name, status, message,
// wanted" / "message as second line" / "more like card per agent",
// replacing the old table row). Everything else the old table's other
// columns carried (hive, matrix link-account, config-PR link, destroy)
// moved to the detail panel `AgentsPage` opens on card click — a plain
// `Dialog`, not the shared `hive-side-panel` slide-in drawer: that's a
// shadow-DOM custom element, and swarm-ui's esbuild config can't consume
// those at all yet (same already-tracked gap `Dialog.tsx`'s own comment
// notes for `hive-dialog`). Revisit once that gap closes. The old
// per-column sort/filter has no replacement yet in this view.
// wanted" / "message as second line" / "more like card per agent") —
// the `viewMode === "cards"` alternative to the original `Table`, not
// its replacement (see `AgentsPage`'s own comment). Everything the
// table's other columns carried (hive, matrix link-account, config-PR
// link, destroy) moves to a detail panel on card click instead — a
// plain `Dialog`, not the shared `hive-side-panel` slide-in drawer:
// that's a shadow-DOM custom element, and swarm-ui's esbuild config
// can't consume those yet (same gap `Dialog.tsx`'s own comment already
// flags for `hive-dialog`). Revisit once that gap closes.
//
// A `role="button"` div, not a real `<button>`: the card also hosts the
// real `<button>`s inside `WantedMenu`, and nested buttons are invalid
@ -346,6 +352,25 @@ export function AgentsPage() {
const [error, setError] = useState<ProblemDetails | null>(null);
const [intervalMs, setIntervalMs] =
useState<RefreshIntervalMs>(DEFAULT_INTERVAL_MS);
// Lazy initializer (not a mount effect) so the very first render
// already reflects the stored choice — no default-then-flip flash.
const [viewMode, setViewModeState] = useState<ViewMode>(() => {
try {
return localStorage.getItem(VIEW_MODE_KEY) === "table"
? "table"
: "cards";
} catch {
return "cards";
}
});
function setViewMode(mode: ViewMode) {
setViewModeState(mode);
try {
localStorage.setItem(VIEW_MODE_KEY, mode);
} catch {
/* localStorage unavailable — choice is session-only */
}
}
const [createOpen, setCreateOpen] = useState(false);
// Per-agent, not one page-wide flag: one row's declare-in-flight
// shouldn't disable every other row's button.
@ -484,6 +509,141 @@ export function AgentsPage() {
await declareState(row, "destroyed");
}
// `viewMode === "table"`'s columns — the full field set (including
// per-column sort/filter, which the card view doesn't have) mara asked
// to keep. Table's own `WantedMenu` keeps the default `showDestroy`
// (the table's cells have room for the fourth option the card view
// moved out to its detail panel).
const columns: TableColumn<AgentRow>[] = [
{
key: "name",
header: "name",
render: (a) => a.name,
sortBy: (a) => a.name,
filterValue: (a) => a.name,
},
{
key: "hive",
header: "hive",
render: (a) => a.hive ?? "—",
sortBy: (a) => a.hive ?? "",
filterValues: (a) => [a.hive ?? "—"],
filterMode: "multiselect",
},
{
key: "status",
header: "status",
sortBy: (a) => FRESHNESS[a.freshness].label,
filterValues: (a) => [FRESHNESS[a.freshness].label],
filterMode: "multiselect",
render: (a) => {
const { tone, label } = FRESHNESS[a.freshness];
return (
<Badge
tone={tone}
title={
a.freshness === "unknown"
? "reported by its hive but not registered in swarm-level identity — needs migration"
: undefined
}
value={
<>
{label}
{a.last_seen_unix !== null ? (
<>
{" "}
(<RelativeTime epochMs={a.last_seen_unix * 1000} />)
</>
) : null}
</>
}
/>
);
},
},
{
key: "message",
header: "message",
cellClass: "ui-table-prose",
render: (a) => a.snapshot?.status_text ?? "—",
filterValue: (a) => a.snapshot?.status_text ?? "",
},
{
key: "wanted",
header: "wanted",
sortBy: (a) => a.wanted ?? "",
filterValues: (a) => [a.wanted ?? "no declaration"],
filterMode: "multiselect",
render: (a) => {
const err = actionErrors.get(a.name);
return (
<>
<WantedMenu
row={a}
pending={pendingAgents.has(a.name)}
onSelectUp={(row) => void declareState(row, "up")}
onSelectOffline={(row) =>
setConfirmTarget({ row, state: "offline" })
}
onSelectPaused={(row) =>
setConfirmTarget({ row, state: "paused" })
}
onDestroy={setDestroyTarget}
/>
{err ? (
<Badge
tone="negative"
value="failed"
title={err.detail ?? "the declaration failed"}
/>
) : null}
</>
);
},
},
{
key: "matrix",
header: "matrix",
render: (a) => (
<Badge
variant="quiet"
icon={<LinkIcon />}
value="link account"
onClick={a.hive ? () => setMatrixTarget(a) : undefined}
disabled={!a.hive}
title={
a.hive
? `link a matrix account to ${a.name}`
: "no hive on record for this agent — nothing to link against"
}
/>
),
},
{
key: "config-pr",
header: "config PR",
sortBy: (a) => a.config_pr?.pr_number ?? 0,
filterValue: (a) => (a.config_pr ? `#${a.config_pr.pr_number}` : ""),
render: (a) =>
a.config_pr ? (
<Badge
tone="warning"
value={
a.config_pr.html_url ? (
<a href={a.config_pr.html_url} target="_blank" rel="noreferrer">
#{a.config_pr.pr_number}
</a>
) : (
`#${a.config_pr.pr_number}`
)
}
/>
) : (
"—"
),
},
];
return (
<Panel
title="agents"
@ -493,6 +653,24 @@ export function AgentsPage() {
<Button variant="primary" onClick={() => setCreateOpen(true)}>
+ agent
</Button>
<div class="ui-agents-view-toggle" role="group" aria-label="view">
<button
type="button"
aria-pressed={viewMode === "cards"}
class={viewMode === "cards" ? "active" : undefined}
onClick={() => setViewMode("cards")}
>
cards
</button>
<button
type="button"
aria-pressed={viewMode === "table"}
class={viewMode === "table" ? "active" : undefined}
onClick={() => setViewMode("table")}
>
table
</button>
</div>
<RefreshIntervalPicker
id="agents-refresh"
value={intervalMs}
@ -509,12 +687,12 @@ export function AgentsPage() {
) : null}
{!error && rows === null ? <p>loading…</p> : null}
{rows && rows.length === 0 ? (
<p class="ui-agent-card-list-empty">
<p class="ui-agents-empty">
no agents yet — the swarm-wide identity store has no agents registered
on any hive
</p>
) : null}
{rows && rows.length > 0 ? (
{rows && rows.length > 0 && viewMode === "cards" ? (
<div class="ui-agent-card-list">
{rows.map((a) => (
<AgentCard
@ -534,6 +712,14 @@ export function AgentsPage() {
))}
</div>
) : null}
{rows && rows.length > 0 && viewMode === "table" ? (
<Table
columns={columns}
rows={rows}
rowKey={(a) => a.name}
storageKey="swarm-ui:agents:table-filters"
/>
) : null}
<Dialog
open={detailTarget !== null}
onClose={() => setDetailTarget(null)}