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

Compare commits

base: vinzenz:1176de08bd7800ab1493c2b8a609acfaf48ffa28
Branches Tags
vinzenz:main
..
compare: vinzenz:bb62bf1aa9d3872ab5a216c28a7b57bf969567e6
Branches Tags
vinzenz:main
19 changed files with 357 additions and 1427 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/packages/swarm-ui/src/App.tsx
View file

@ -2,7 +2,7 @@
// page component under `./pages/`; this file just maps paths to them.
import { Route, Switch } from "wouter-preact";
import { Shell } from "./shell/Shell.js";
import { AgentsPage } from "./pages/agents/AgentsPage.js";
import { AgentsPage } from "./pages/AgentsPage.js";
import { ComponentsPage } from "./pages/ComponentsPage.js";
import { JobsPage } from "./pages/JobsPage.js";
import { HivesPage } from "./pages/HivesPage.js";

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

@ -0,0 +1,618 @@
// <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.
//
// 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 table row.
//
// Owns the "+ agent" trigger too — the roster this populates is the
// natural home for the action that populates it; a separate top-level
// nav entry would be one click of indirection for no benefit. The form
// itself (`CreateAgentForm`) mounts inside a `Dialog` here rather than
// its own route.
//
// The "wanted" column is one `WantedMenu` badge+dropdown per row — see
// that component's own comment above `AgentsPage` for why.
import { useRef, useState } from "preact/hooks";
import type { ComponentChildren } from "preact";
import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
import { Badge, type BadgeTone } from "@hive/shared/badge.js";
import { Dropdown, type DropdownOption } from "@hive/shared/dropdown.js";
import { LinkIcon } from "@hive/shared/icons.js";
import { Button } from "../ui/button/Button.js";
import { ConfirmDialog } from "../ui/confirm-dialog/ConfirmDialog.js";
import { Dialog } from "../ui/dialog/Dialog.js";
import { Panel } from "../ui/panel/Panel.js";
import { RelativeTime } from "../ui/relative-time/RelativeTime.js";
import {
RefreshIntervalPicker,
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";
interface ConfigPrStatus {
pr_number: number;
html_url: string | null;
}
type Freshness = "fresh" | "stale" | "never_reported" | "unknown";
interface AgentStatusSnapshot {
status_text: string | null;
status_set_at: number | null;
running: boolean;
}
// `"up"` / `"offline"` / `"destroyed"`, wire-spelled by
// `swarm_queue_client::wanted::AgentState::as_str` — kept as a bare
// `string | null` rather than a union, same reason
// `config_pr`'s shape isn't re-derived here: this page renders whatever
// the wire sends, it doesn't validate the enum client-side.
type Wanted = string | null;
// Mirrors `agent_status::AgentStatusRow` field-for-field — this *is* the
// table row now, not a shape assembled from it, so there's no separate
// join-result type to keep in sync with the wire contract by hand.
interface AgentRow {
name: string;
hive: string | null;
freshness: Freshness;
last_seen_unix: number | null;
// `age_seconds` deliberately unused here, same reason as HivesPage:
// `RelativeTime` recomputes age client-side from `last_seen_unix`
// rather than rendering a once-computed-at-fetch value.
snapshot: AgentStatusSnapshot | null;
config_pr: ConfigPrStatus | null;
wanted: Wanted;
}
// Same tone pairing as HivesPage — one freshness enum shared by both
// endpoints, so the same tone rule applies to both pages — but `unknown`'s
// label diverges deliberately: an agent outside the swarm-identity roster
// has a concrete next step (register it), while an unrecognized *hive* on
// HivesPage doesn't carry the same actionable meaning.
const FRESHNESS: Record<Freshness, { tone: BadgeTone; label: string }> = {
fresh: { tone: "positive", label: "fresh" },
stale: { tone: "warning", label: "stale" },
never_reported: { tone: "neutral", label: "never reported" },
// `unknown` means the agent reported into the KV bucket but isn't in
// the swarm-identity roster — a real, distinct case ("hive-reported,
// not yet in swarm level"), not just a fallback default, so it gets a
// label that says what to do about it rather than reusing the enum
// name as the label.
unknown: { tone: "negative", label: "not in swarm identity" },
};
// The one thing that differs between the "offline" and "paused" confirm
// dialogs `confirmTarget` drives — everything else (button row, open/close
// wiring) is the shared `ConfirmDialog`.
const CONFIRM_COPY: Record<
"offline" | "paused",
{
label: string;
confirmLabel: string;
message: (agentName: string) => ComponentChildren;
}
> = {
offline: {
label: "stop agent",
confirmLabel: "stop",
message: (agentName) => (
<p>
Declare <strong>{agentName}</strong> offline? The hive brings its
container down on its next reconcile sweep.
</p>
),
},
paused: {
label: "pause agent",
confirmLabel: "pause",
message: (agentName) => (
<p>
Declare <strong>{agentName}</strong> paused? Its container stays up —
the web UI and MCP daemons keep running — but its turn loop parks on the
hive's next reconcile sweep. Select "up" again to resume it.
</p>
),
},
};
// Same 30s default + same reasoning as HivesPage: no inputs on this page
// for a refresh to clobber, so the out-of-the-box behaviour should just
// solve staleness rather than require an opt-in every visit.
const DEFAULT_INTERVAL_MS: RefreshIntervalMs = 30_000;
// 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.
// Explicit options also fix a real bug the toggle had: for an
// undeclared row, the toggle inferred a target as "the opposite of
// `snapshot.running`", so a click on an undeclared-but-running agent
// silently declared it *offline* rather than making its real state
// explicit — a dropdown just lets "up" be picked directly regardless
// of what's inferred, no flip-to-the-opposite-of-a-guess involved
// (mara: "when no state is declared, i want to set it to online").
// Presentational only, same split as `StatusChips`'s `Picker`/
// `StatusMenu`: the caller owns what each selection actually does.
//
// "paused" has no separate resume option here — selecting "up" from a
// paused row is the resume, same PUT either way (`declareState`'s
// backend counterpart, `hive-c0re`'s `decide_pause`, treats a declared
// `Up` with the marker still set as "clear it"). A dedicated "resume"
// entry would just be a second spelling of the option already above it.
function WantedMenu({
row,
pending,
onSelectUp,
onSelectOffline,
onSelectPaused,
onDestroy,
}: {
row: AgentRow;
pending: boolean;
onSelectUp: (row: AgentRow) => void;
onSelectOffline: (row: AgentRow) => void;
onSelectPaused: (row: AgentRow) => void;
onDestroy: (row: AgentRow) => void;
}) {
const [open, setOpen] = useState(false);
const anchorRef = useRef<HTMLDivElement>(null);
const destroyed = row.wanted === "destroyed";
const tone: BadgeTone =
row.wanted === "up"
? "positive"
: row.wanted === "paused"
? "warning"
: destroyed
? "negative"
: "neutral";
const options: DropdownOption[] = [
{ value: "up", label: "up" },
{ value: "paused", label: "paused" },
{ value: "offline", label: "offline" },
{ value: "destroy", label: "destroy", danger: true },
];
return (
<div class="ui-dropdown-anchor" ref={anchorRef}>
<Badge
tone={tone}
value={pending ? "…" : (row.wanted ?? "no declaration")}
// `destroyed` blocks opening the menu at all — same UX-only
// guard as before (real enforcement is server-side, see
// `declareState`'s caller), just applied to the trigger instead
// of a `disabled` toggle badge.
onClick={row.hive && !destroyed ? () => setOpen((o) => !o) : undefined}
expanded={open}
disabled={pending || !row.hive || destroyed}
title={
destroyed
? `${row.name} is destroyed — redeploy via "+ agent" to bring it back`
: row.hive
? `declare a new state for ${row.name}`
: "no hive on record for this agent — nothing to declare against"
}
/>
<Dropdown
open={open}
portal
options={options}
activeValue={row.wanted ?? undefined}
label={`declare ${row.name}`}
onSelect={(value) => {
setOpen(false);
if (value === "up") onSelectUp(row);
else if (value === "offline") onSelectOffline(row);
else if (value === "paused") onSelectPaused(row);
else onDestroy(row);
}}
onClose={() => setOpen(false)}
anchorRef={anchorRef}
/>
</div>
);
}
export function AgentsPage() {
const [rows, setRows] = useState<AgentRow[] | null>(null);
const [error, setError] = useState<ProblemDetails | null>(null);
const [intervalMs, setIntervalMs] =
useState<RefreshIntervalMs>(DEFAULT_INTERVAL_MS);
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.
const [pendingAgents, setPendingAgents] = useState<ReadonlySet<string>>(
new Set(),
);
const [actionErrors, setActionErrors] = useState<
ReadonlyMap<string, ProblemDetails>
>(new Map());
// The row pending destroy confirmation, `null` when the dialog is
// closed — not a boolean, so the dialog can name the agent without a
// second piece of state to keep in sync with it. Kept apart from
// `confirmTarget` below rather than folded into it as a third state:
// destroy is categorically different (irreversible, longer warning,
// danger-styled), not one more case of the same "confirm before parking
// a running agent" shape "offline"/"paused" share.
const [destroyTarget, setDestroyTarget] = useState<AgentRow | null>(null);
// "offline" and "paused" are the *same* confirm shape — same button
// treatment, same "disruptive to a running turn loop, unlike up" reason
// for needing a confirm at all — so one union state + one `ConfirmDialog`
// covers both instead of two near-identical copies (argus, PR review: "a
// shared confirm-dialog-body-generator would drop real line count").
// `CONFIRM_COPY` below supplies the one thing that differs.
const [confirmTarget, setConfirmTarget] = useState<{
row: AgentRow;
state: "offline" | "paused";
} | null>(null);
// The row currently showing the "link a matrix account" dialog — same
// null-means-closed shape as `destroyTarget`/`stopTarget`, own piece of
// state rather than folded into either since this dialog isn't a
// confirmation of a `declareState` call, it's an unrelated action with
// its own form (`LinkMatrixAccountForm`).
const [matrixTarget, setMatrixTarget] = useState<AgentRow | null>(null);
async function refresh() {
const res = await fetch("/api/agents/status");
if (!res.ok) {
setError(await readApiError(res));
return;
}
setRows((await res.json()) as AgentRow[]);
// A refresh that succeeds clears a previous failure — otherwise a
// transient error would sit on screen forever after the data itself
// has recovered.
setError(null);
}
useRefreshInterval(intervalMs, () => {
refresh().catch((e: unknown) => setError({ detail: String(e) }));
});
// The one PUT every `WantedMenu` selection ends at, whether or not it
// went through a `ConfirmDialog` first (`confirmStop`/`destroyAgent`
// for "offline"/"destroy"; called directly for "up", which needs no
// confirmation): "PUT a new `wanted` declaration, track per-agent
// pending/error state, patch the response back into `rows`" is the
// same shape regardless of target state or how the caller got here.
async function declareState(row: AgentRow, target: string) {
if (!row.hive) return;
setPendingAgents((prev) => new Set(prev).add(row.name));
setActionErrors((prev) => {
const next = new Map(prev);
next.delete(row.name);
return next;
});
try {
const res = await fetch(
`/api/hives/${encodeURIComponent(row.hive)}/agents/${encodeURIComponent(row.name)}/state`,
{
method: "PUT",
headers: { "content-type": "application/json" },
body: JSON.stringify({ state: target }),
},
);
if (!res.ok) {
const problem = await readApiError(res);
setActionErrors((prev) => new Map(prev).set(row.name, problem));
return;
}
// The PUT response is the hive's whole declaration set (every
// agent's `wanted` state) — same shape `GET /api/hives/{hive}/wanted`
// returns — so patch just that field into the rows already on
// screen rather than firing a second, full `/api/agents/status`
// round-trip merely to learn one hive's `wanted` column changed.
// Everything else on the grid (freshness, snapshot, config PR)
// still catches up on the next interval-driven `refresh()`.
const declared = (await res.json()) as { agent: string; state: string }[];
setRows((prev) => {
if (!prev) return prev;
const byAgent = new Map(declared.map((d) => [d.agent, d.state]));
return prev.map((r) =>
r.hive === row.hive && byAgent.has(r.name)
? { ...r, wanted: byAgent.get(r.name) ?? r.wanted }
: r,
);
});
} catch (e: unknown) {
setActionErrors((prev) =>
new Map(prev).set(row.name, { detail: String(e) }),
);
} finally {
setPendingAgents((prev) => {
const next = new Set(prev);
next.delete(row.name);
return next;
});
}
}
// Fires from the `confirmTarget` confirm `Dialog` (covers both "offline"
// and "paused" — see that state's own comment). Used to be a native
// `window.confirm` for the "offline" case (stop is reversible, a later
// start un-does it, so a lighter-weight prompt than destroy's felt
// proportionate) — mara, reviewing the destroy confirm: use the shared
// component everywhere we already confirm before acting, not just for
// destroy. Once `ConfirmDialog` existed as a one-line-per-caller
// component, the "native is lighter" argument no longer bought
// consistency anything.
async function confirmDeclare() {
if (!confirmTarget) return;
const { row, state } = confirmTarget;
setConfirmTarget(null);
await declareState(row, state);
}
// Fires from the `destroyTarget` confirm `Dialog`, never directly off
// a row click — see `destroyTarget`/`WantedMenu`'s "destroy" option.
// Unlike the "up"/"offline" directions, there's no "current state" to
// read: destroy is a one-way declaration, not a flip.
async function destroyAgent(row: AgentRow) {
setDestroyTarget(null);
await declareState(row, "destroyed");
}
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 ?? "",
// "—" (not "") so the missing-hive option in the filter list reads
// the same as the cell itself, rather than showing a blank choice.
// Multiselect, not single-value `"select"` — an operator narrowing
// to a handful of hives at once shouldn't need to filter one at a
// time.
filterValues: (a) => [a.hive ?? "—"],
filterMode: "multiselect",
},
{
key: "status",
header: "status",
// Technical freshness only — the agent's own free-text status
// string used to be concatenated into this same badge, which
// stuffed a full sentence into a pill meant for a short discrete
// label and blew the row out (mara: "looks messy"). That string
// now lives in its own "message" column below.
sortBy: (a) => FRESHNESS[a.freshness].label,
// Multiselect, same reasoning as the hive column above.
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",
// Plain text, not a Badge — the agent's own free-form status
// sentence, as distinct from the technical freshness state in the
// "status" column. A `running: false` snapshot always carries
// `status_text: null` (the wire contract's own rule), so a stopped
// agent just shows an em dash here rather than a stale message.
render: (a) => a.snapshot?.status_text ?? "—",
filterValue: (a) => a.snapshot?.status_text ?? "",
},
{
key: "wanted",
header: "wanted",
// One `WantedMenu` (badge + dropdown, defined above) per row —
// real per-badge logic lives there, this column just wires its
// callbacks to the page's own state/handlers.
sortBy: (a) => a.wanted ?? "",
// Multiselect, same reasoning as the hive column above.
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",
// Icon-only trigger, quiet variant (no permanent pill fill) — same
// "chrome, not a status chip" reasoning as `LinksMenu`/`SettingsMenu`'s
// own `Badge` triggers (see `@hive/shared/badge/Badge.tsx`'s
// `BadgeVariant` doc). Disabled with no hive on record, same guard
// `WantedMenu` uses — the endpoint is hive-scoped, there's nothing
// to PUT against without one.
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"
icon="👥"
actions={
<>
<Button variant="primary" onClick={() => setCreateOpen(true)}>
+ agent
</Button>
<RefreshIntervalPicker
id="agents-refresh"
value={intervalMs}
onChange={setIntervalMs}
/>
</>
}
>
{error ? (
<ApiErrorPanel
context="failed to load the agent roster"
problem={error}
/>
) : null}
{!error && rows === null ? <p>loading…</p> : null}
{rows ? (
<Table
columns={columns}
rows={rows}
rowKey={(a) => a.name}
emptyMessage="no agents yet — the swarm-wide identity store has no agents registered on any hive"
storageKey="swarm-ui:agents:table-filters"
/>
) : null}
<Dialog
open={createOpen}
onClose={() => setCreateOpen(false)}
label="create agent"
>
<CreateAgentForm />
</Dialog>
<Dialog
open={matrixTarget !== null}
onClose={() => setMatrixTarget(null)}
label="link a matrix account"
>
{/* `matrixTarget.hive` is non-null here — the trigger badge above
is disabled without one, so this can only open with a real
hive to PUT against. */}
{matrixTarget?.hive ? (
<LinkMatrixAccountForm
hive={matrixTarget.hive}
agent={matrixTarget.name}
/>
) : null}
</Dialog>
<ConfirmDialog
open={confirmTarget !== null}
label={confirmTarget ? CONFIRM_COPY[confirmTarget.state].label : ""}
onCancel={() => setConfirmTarget(null)}
onConfirm={() => void confirmDeclare()}
confirmLabel={
confirmTarget
? CONFIRM_COPY[confirmTarget.state].confirmLabel
: undefined
}
>
{confirmTarget
? CONFIRM_COPY[confirmTarget.state].message(confirmTarget.row.name)
: null}
</ConfirmDialog>
<ConfirmDialog
open={destroyTarget !== null}
label="destroy agent"
onCancel={() => setDestroyTarget(null)}
onConfirm={() => destroyTarget && void destroyAgent(destroyTarget)}
confirmLabel="destroy"
>
{destroyTarget ? (
<p>
Destroy <strong>{destroyTarget.name}</strong>? The hive tears its
container down on its next reconcile sweep. This is not reversible
from here — bringing it back means redeploying via "+ agent", which
reuses the agent's existing identity, config repo, and forge
collaborator access rather than starting over.
</p>
) : null}
</ConfirmDialog>
</Panel>
);
}

124
frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx
View file

@ -7,19 +7,12 @@
// swarm-controller's API is up or not.
import { useRef, useState } from "preact/hooks";
import type { ComponentChildren } from "preact";
import { Card } from "../ui/card/Card.js";
import { FilterableView } from "../ui/filterable-view/FilterableView.js";
import {
MultiselectFilter,
type MultiselectFilterState,
} from "../ui/multiselect-filter/MultiselectFilter.js";
import { Panel } from "../ui/panel/Panel.js";
import { RelativeTime } from "../ui/relative-time/RelativeTime.js";
import {
RefreshIntervalPicker,
type RefreshIntervalMs,
} from "../ui/refresh-interval/RefreshInterval.js";
import { SplitView } from "../ui/split-view/SplitView.js";
import { Table, type TableColumn } from "../ui/table/Table.js";
import { TextField } from "../ui/text-field/TextField.js";
import {
@ -219,71 +212,6 @@ function DialogSample() {
);
}
// Own state for the same reason `TextFieldSample` needs it — a
// controlled sample has to actually respond to interaction.
function MultiselectFilterSample() {
const [filter, setFilter] = useState<MultiselectFilterState>({
values: [],
negate: false,
});
return (
<MultiselectFilter
label="hive"
options={["pr1ma", "sec0nd"]}
filter={filter}
onToggle={(v) =>
setFilter((f) => ({
...f,
values: f.values.includes(v)
? f.values.filter((x) => x !== v)
: [...f.values, v],
}))
}
onNegateChange={(negate) => setFilter((f) => ({ ...f, negate }))}
/>
);
}
// A `view` toggle here is caller-owned (same contract `AgentsPage` uses)
// — `FilterableView` itself only renders whichever one this sample
// says to. Reuses `TABLE_COLUMNS`/`TABLE_ROWS` from the `Table` section
// above so the filter behavior is directly comparable between the two.
function FilterableViewSample() {
const [view, setView] = useState<"cards" | "table">("cards");
return (
<div>
<div class="components-chip-row" style={{ marginBottom: "0.5em" }}>
<Button
variant={view === "cards" ? "primary" : "default"}
onClick={() => setView("cards")}
>
cards
</Button>
<Button
variant={view === "table" ? "primary" : "default"}
onClick={() => setView("table")}
>
table
</Button>
</div>
<FilterableView
columns={TABLE_COLUMNS}
rows={TABLE_ROWS}
rowKey={(r) => r.name}
storageKey="swarm-ui:components-demo:filterable-view"
view={view}
emptyMessage="no rows"
renderCard={(r) => (
<Card onClick={() => {}}>
<strong>{r.name}</strong>
<div>{r.detail}</div>
</Card>
)}
/>
</div>
);
}
function ConfirmDialogSample() {
const [open, setOpen] = useState(false);
return (
@ -341,23 +269,6 @@ export function ComponentsPage() {
</Sample>
</Section>
<Section title="SplitView">
<Sample label="primary + secondary, side by side (wraps to stacked on a narrow viewport)">
<SplitView
primary={
<Panel title="list">
primary content — e.g. AgentsPage's roster
</Panel>
}
secondary={
<Panel title="detail">
secondary content — e.g. the selected row
</Panel>
}
/>
</Sample>
</Section>
<Section title="Table">
<Sample label="populated">
<Table
@ -377,41 +288,6 @@ export function ComponentsPage() {
</Sample>
</Section>
<Section title="Card">
<div class="components-chip-row">
<Sample label="static (no onClick)">
<Card>
<strong>alpha</strong>
<div>plain content, not clickable</div>
</Card>
</Sample>
<Sample label="interactive">
<Card onClick={() => {}}>
<strong>beta</strong>
<div>click, or Enter/Space when focused</div>
</Card>
</Sample>
<Sample label="selected (e.g. the row shown in a detail panel)">
<Card selected onClick={() => {}}>
<strong>gamma</strong>
<div>same card, with selected set</div>
</Card>
</Sample>
</div>
</Section>
<Section title="MultiselectFilter">
<Sample label="trigger + checkbox popover">
<MultiselectFilterSample />
</Sample>
</Section>
<Section title="FilterableView">
<Sample label="filter bar (built from every filterable column) + cards/table, same filter state either way">
<FilterableViewSample />
</Sample>
</Section>
<Section title="RelativeTime">
<div class="components-chip-row">
<Sample label="5s ago, ticking">

24
frontend/packages/swarm-ui/src/pages/agents/AgentCard.css
View file

@ -1,24 +0,0 @@
/* <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;
}

93
frontend/packages/swarm-ui/src/pages/agents/AgentCard.tsx
View file

@ -1,93 +0,0 @@
// <AgentCard> — one card per roster agent (mara: "main view: name,
// status, message, wanted" / "message as second line" / "more like
// card per agent") — the FilterableView `view === "cards"` alternative
// to the original `Table`, not its replacement (see `AgentsPage`'s own
// comment). Clicking a card opens a detail panel repeating this same
// info plus what doesn't fit here (hive, config-PR link, matrix
// link-account) — mara: "the info from main list should be included in
// the agent view" too, not just the leftovers.
//
// Built on the shared `Card` primitive (`ui/card/`) for the clickable/
// selectable-container mechanics — the `stopPropagation` wrapper around
// `WantedMenu` below keeps its own clicks (mouse or keyboard-synthesized,
// `WantedMenu` hosts real `<button>`s) from also firing `Card`'s
// `onClick` and opening the detail panel.
import { Badge } from "@hive/shared/badge.js";
import type { ProblemDetails } from "@hive/shared/api-error.js";
import { Card } from "../../ui/card/Card.js";
import { RelativeTime } from "../../ui/relative-time/RelativeTime.js";
import { FRESHNESS, type AgentRow } from "./AgentTypes.js";
import { WantedMenu } from "./WantedMenu.js";
import "./AgentCard.css";
export function AgentCard({
row,
pending,
error,
selected,
onSelectUp,
onSelectOffline,
onSelectPaused,
onOpenDetail,
}: {
row: AgentRow;
pending: boolean;
error: ProblemDetails | undefined;
/** This row is the one currently shown in the detail panel — a
* highlight only (the panel itself is the source of truth), so a
* page-refresh landing on a still-valid selection reads as obviously
* "that one" rather than a silent selection nothing marks. */
selected: boolean;
onSelectUp: (row: AgentRow) => void;
onSelectOffline: (row: AgentRow) => void;
onSelectPaused: (row: AgentRow) => void;
onOpenDetail: (row: AgentRow) => void;
}) {
const { tone, label } = FRESHNESS[row.freshness];
return (
<Card selected={selected} onClick={() => onOpenDetail(row)}>
<div class="ui-agent-card-line1">
<span class="ui-agent-card-name">{row.name}</span>
<Badge
tone={tone}
title={
row.freshness === "unknown"
? "reported by its hive but not registered in swarm-level identity — needs migration"
: undefined
}
value={
<>
{label}
{row.last_seen_unix !== null ? (
<>
{" "}
(<RelativeTime epochMs={row.last_seen_unix * 1000} />)
</>
) : null}
</>
}
/>
<span class="ui-agent-card-wanted" onClick={(e) => e.stopPropagation()}>
<WantedMenu
row={row}
pending={pending}
showDestroy={false}
onSelectUp={onSelectUp}
onSelectOffline={onSelectOffline}
onSelectPaused={onSelectPaused}
/>
{error ? (
<Badge
tone="negative"
value="failed"
title={error.detail ?? "the declaration failed"}
/>
) : null}
</span>
</div>
<div class="ui-agent-card-message">
{row.snapshot?.status_text ?? "—"}
</div>
</Card>
);
}

61
frontend/packages/swarm-ui/src/pages/agents/AgentTypes.ts
View file

@ -1,61 +0,0 @@
// Wire + presentation types shared across AgentsPage and the components
// it composes (AgentCard, WantedMenu) — split out once those moved to
// their own files (mara: "agentspage is now giant and deserves a
// split") so none of them has to import from AgentsPage.tsx itself.
import type { BadgeTone } from "@hive/shared/badge.js";
export interface ConfigPrStatus {
pr_number: number;
html_url: string | null;
}
export type Freshness = "fresh" | "stale" | "never_reported" | "unknown";
export interface AgentStatusSnapshot {
status_text: string | null;
status_set_at: number | null;
running: boolean;
}
// `"up"` / `"offline"` / `"destroyed"`, wire-spelled by
// `swarm_queue_client::wanted::AgentState::as_str` — kept as a bare
// `string | null` rather than a union, same reason `config_pr`'s shape
// isn't re-derived here: this renders whatever the wire sends, it
// doesn't validate the enum client-side.
export type Wanted = string | null;
// Mirrors `agent_status::AgentStatusRow` field-for-field — this *is*
// the row AgentsPage renders, not a shape assembled from it, so
// there's no separate join-result type to keep in sync with the wire
// contract by hand.
export interface AgentRow {
name: string;
hive: string | null;
freshness: Freshness;
// `age_seconds` deliberately unused here, same reason as HivesPage:
// `RelativeTime` recomputes age client-side from `last_seen_unix`
// rather than rendering a once-computed-at-fetch value.
last_seen_unix: number | null;
snapshot: AgentStatusSnapshot | null;
config_pr: ConfigPrStatus | null;
wanted: Wanted;
}
// Same tone pairing as HivesPage — one freshness enum shared by both
// endpoints, so the same tone rule applies to both pages — but
// `unknown`'s label diverges deliberately: an agent outside the
// swarm-identity roster has a concrete next step (register it), while
// an unrecognized *hive* on HivesPage doesn't carry the same
// actionable meaning.
export const FRESHNESS: Record<Freshness, { tone: BadgeTone; label: string }> =
{
fresh: { tone: "positive", label: "fresh" },
stale: { tone: "warning", label: "stale" },
never_reported: { tone: "neutral", label: "never reported" },
// `unknown` means the agent reported into the KV bucket but isn't in
// the swarm-identity roster — a real, distinct case ("hive-reported,
// not yet in swarm level"), not just a fallback default, so it gets a
// label that says what to do about it rather than reusing the enum
// name as the label.
unknown: { tone: "negative", label: "not in swarm identity" },
};

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

@ -1,58 +0,0 @@
/* Detail panel's "select an agent" empty state. `FilterableView`
(`ui/filterable-view/`) has its own equivalent for its two empty
cases — colocated there instead of shared with this one, since the
two components have no other reason to depend on each other's CSS. */
.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);
}
/* 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;
gap: 0.4em 1em;
margin: 0 0 1em;
}
.ui-agent-detail-fields dt {
color: var(--muted);
}
.ui-agent-detail-fields dd {
margin: 0;
}
.ui-agent-detail-actions {
display: flex;
align-items: center;
gap: 0.75em;
}

124
frontend/packages/swarm-ui/src/pages/agents/WantedMenu.tsx
View file

@ -1,124 +0,0 @@
// <WantedMenu> — the "wanted" state 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. Explicit options also fix a real bug the toggle had: for an
// undeclared row, the toggle inferred a target as "the opposite of
// `snapshot.running`", so a click on an undeclared-but-running agent
// silently declared it *offline* rather than making its real state
// explicit — a dropdown just lets "up" be picked directly regardless
// of what's inferred, no flip-to-the-opposite-of-a-guess involved
// (mara: "when no state is declared, i want to set it to online").
// Presentational only, same split as `StatusChips`'s `Picker`/
// `StatusMenu`: the caller owns what each selection actually does.
//
// "paused" has no separate resume option here — selecting "up" from a
// paused row is the resume, same PUT either way (`AgentsPage`'s
// `declareState`, `hive-c0re`'s `decide_pause` backend counterpart,
// treats a declared `Up` with the marker still set as "clear it"). A
// dedicated "resume" entry would just be a second spelling of the
// option already above it.
import { useRef, useState } from "preact/hooks";
import { Badge, type BadgeTone } from "@hive/shared/badge.js";
import { Dropdown, type DropdownOption } from "@hive/shared/dropdown.js";
import type { AgentRow } from "./AgentTypes.js";
export function WantedMenu({
row,
pending,
onSelectUp,
onSelectOffline,
onSelectPaused,
onDestroy,
showDestroy = true,
portal = false,
}: {
row: AgentRow;
pending: boolean;
onSelectUp: (row: AgentRow) => void;
onSelectOffline: (row: AgentRow) => void;
onSelectPaused: (row: AgentRow) => void;
onDestroy?: (row: AgentRow) => void;
/**
* The card view (see `AgentCard`) passes `false` here — its
* quick-access menu keeps to the three everyday states, so "destroy"
* can't be reached by an extra click off a state that's already open.
* `AgentsPage`'s detail-panel `WantedMenu` keeps the default (`true`)
* — mara: "destroy is already available via wanted state", i.e. the
* full menu there, not a separate button.
*/
showDestroy?: boolean;
/**
* Forwarded to `Dropdown`'s own `portal` (see its file-top comment) —
* only the table's "wanted" column needs it, to escape
* `.ui-table-scroll`'s clip on the table's last row (the bug `Dropdown`'s
* own `portal` prop exists to fix in the first place).
* Neither the card list nor the detail panel has a clipping ancestor,
* and inside the detail panel specifically `portal` is actively wrong:
* a `position: fixed` element appended to `document.body` renders
* *behind* an open native `<dialog>` (the dialog is promoted to the
* browser's top layer, which composites above ordinary body content
* regardless of z-index) — found while screenshotting this exact
* dropdown open inside the detail panel, only the portion extending
* past the dialog's own edge was visible.
*/
portal?: boolean;
}) {
const [open, setOpen] = useState(false);
const anchorRef = useRef<HTMLDivElement>(null);
const destroyed = row.wanted === "destroyed";
const tone: BadgeTone =
row.wanted === "up"
? "positive"
: row.wanted === "paused"
? "warning"
: destroyed
? "negative"
: "neutral";
const options: DropdownOption[] = [
{ value: "up", label: "up" },
{ value: "paused", label: "paused" },
{ value: "offline", label: "offline" },
...(showDestroy
? [{ value: "destroy", label: "destroy", danger: true }]
: []),
];
return (
<div class="ui-dropdown-anchor" ref={anchorRef}>
<Badge
tone={tone}
value={pending ? "…" : (row.wanted ?? "no declaration")}
// `destroyed` blocks opening the menu at all — same UX-only
// guard as before (real enforcement is server-side, see
// `declareState`'s caller), just applied to the trigger instead
// of a `disabled` toggle badge.
onClick={row.hive && !destroyed ? () => setOpen((o) => !o) : undefined}
expanded={open}
disabled={pending || !row.hive || destroyed}
title={
destroyed
? `${row.name} is destroyed — redeploy via "+ agent" to bring it back`
: row.hive
? `declare a new state for ${row.name}`
: "no hive on record for this agent — nothing to declare against"
}
/>
<Dropdown
open={open}
portal={portal}
options={options}
activeValue={row.wanted ?? undefined}
label={`declare ${row.name}`}
onSelect={(value) => {
setOpen(false);
if (value === "up") onSelectUp(row);
else if (value === "offline") onSelectOffline(row);
else if (value === "paused") onSelectPaused(row);
else onDestroy?.(row);
}}
onClose={() => setOpen(false)}
anchorRef={anchorRef}
/>
</div>
);
}

26
frontend/packages/swarm-ui/src/ui/card/Card.css
View file

@ -1,26 +0,0 @@
.ui-card {
display: flex;
flex-direction: column;
gap: 0.35em;
padding: 0.75em 1em;
border: 1px solid var(--border);
border-radius: 0.5em;
background: var(--bg-elev);
}
/* Only an interactive `Card` (has `onClick`) gets pointer/hover
affordance — a plain static one shouldn't look clickable. */
[role="button"].ui-card {
cursor: pointer;
}
[role="button"].ui-card:hover,
[role="button"].ui-card:focus-visible {
border-color: var(--purple);
outline: none;
}
/* A solid border (not just the hover tint above, which needs to keep
meaning "hovering", not double as "selected") plus a faint fill so a
selected card still reads once the pointer moves away. */
.ui-card-selected {
border-color: var(--purple);
background: color-mix(in srgb, var(--purple) 10%, var(--bg-elev));
}

64
frontend/packages/swarm-ui/src/ui/card/Card.tsx
View file

@ -1,64 +0,0 @@
// <Card> — the clickable/selectable-container mechanics (role="button",
// keyboard activation, hover + selected styling) any card-shaped list
// item needs, with zero opinion on its content — same "primitive owns
// the mechanics, caller owns the content" split as `Panel`/`Dialog`.
// Extracted out of `AgentsPage`'s `AgentCard` (design-guide's
// "Component-first design": a page had hand-rolled this rather than
// reaching for a `src/ui/` primitive) — `AgentCard` now wraps agent-
// specific content (name/badges/message) around this instead of owning
// the click/keyboard/selected logic itself.
//
// A `role="button"` `<div>`, not a real `<button>`: a card's content
// commonly hosts its own real `<button>`s/interactive controls (a
// status badge that opens a menu, say), and nested buttons are invalid
// HTML. `onClick` fires for a click/Enter/Space landing on the card
// itself; a caller whose content has its own interactive controls needs
// to `stopPropagation` on those (see `AgentsPage`'s `WantedMenu` wrapper
// for the pattern) and should guard its own `onKeyDown`, if any, with an
// `e.target !== e.currentTarget` check the same way this component does
// internally — nothing here can do that guarding on a caller's behalf.
import type { ComponentChildren } from "preact";
import "./Card.css";
export function Card({
selected,
onClick,
children,
class: extraClass,
}: {
/** Highlight styling — the caller decides what "selected" means (the
* row shown in a detail panel, say); this component just renders it. */
selected?: boolean;
/** Present → a real interactive card (role="button", keyboard-
* activatable). Absent → a plain static container, same border/
* padding/radius, no click/keyboard wiring at all. */
onClick?: () => void;
children: ComponentChildren;
class?: string;
}) {
const classes = ["ui-card", selected && "ui-card-selected", extraClass]
.filter(Boolean)
.join(" ");
if (!onClick) {
return <div class={classes}>{children}</div>;
}
return (
<div
class={classes}
role="button"
tabIndex={0}
onClick={onClick}
onKeyDown={(e) => {
if (e.target !== e.currentTarget) return;
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
onClick();
}
}}
>
{children}
</div>
);
}

26
frontend/packages/swarm-ui/src/ui/filterable-view/FilterableView.css
View file

@ -1,26 +0,0 @@
.ui-filterable-view-filter-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5em;
margin-bottom: 0.75em;
}
.ui-filterable-view-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-filterable-view-empty {
color: var(--muted);
text-align: center;
padding: 1.25em 0.75em;
}
.ui-filterable-view-cards {
display: flex;
flex-direction: column;
gap: 0.5em;
}

179
frontend/packages/swarm-ui/src/ui/filterable-view/FilterableView.tsx
View file

@ -1,179 +0,0 @@
// <FilterableView> — a filterable list of rows, switchable between the
// original `Table` and a caller-supplied card renderer, both reading
// the same filter state. Extracted out of `AgentsPage` (design-guide's
// "Component-first design" — mara: "what about the component that
// represents filtered data ... that the card view and table can both
// use?") once that page had its own hand-wired card-view filter bar
// (only 4 of the agent columns' 6 filterable fields) alongside `Table`'s
// own per-column popovers (all 6) — two filter surfaces, one accidentally
// narrower than the other, both driving `useTableFilters` under the hood
// already. This component is the one place that wiring lives now: build
// the filter bar from *every* filterable column, not a hand-picked
// subset, so a caller can't have the card view and table view disagree
// on what's filterable by construction.
//
// `view` is a controlled prop, not owned here — the toggle between
// "cards" and "table" is chrome that typically lives in a `Panel`'s
// title-row actions (`AgentsPage`'s own), not this component's body, so
// the caller keeps that state and just says which one to render.
import type { ComponentChildren } from "preact";
import {
MultiselectFilter,
type MultiselectFilterState,
} from "../multiselect-filter/MultiselectFilter.js";
import { Table, useTableFilters, type TableColumn } from "../table/Table.js";
import "./FilterableView.css";
function isFilterable<T>(c: TableColumn<T>): boolean {
return c.filterValue !== undefined || c.filterValues !== undefined;
}
function columnLabel<T>(c: TableColumn<T>): string {
return typeof c.header === "string" ? c.header : c.key;
}
// One control per filterable column — a `MultiselectFilter` for
// `filterMode: "multiselect"`, a plain always-visible `<input>` for the
// `"text"` default. No popover-vs-inline choice to make per column the
// way `Table`'s own icon-triggered popovers do: there's no header row
// to anchor an icon to here, every control is just always on.
function FilterBar<T>({
columns,
getFilter,
updateFilter,
toggleFilterValue,
resetFilters,
activeFilters,
multiselectOptionsFor,
}: {
columns: TableColumn<T>[];
getFilter: (key: string) => MultiselectFilterState & { value: string };
updateFilter: (
key: string,
patch: Partial<{ value: string; values: string[]; negate: boolean }>,
) => void;
toggleFilterValue: (key: string, value: string) => void;
resetFilters: () => void;
activeFilters: unknown[];
multiselectOptionsFor: (c: TableColumn<T>) => string[];
}) {
const filterable = columns.filter(isFilterable);
if (filterable.length === 0) return null;
return (
<div class="ui-filterable-view-filter-bar">
{filterable.map((c) => {
const label = columnLabel(c);
if (c.filterMode === "multiselect") {
return (
<MultiselectFilter
key={c.key}
label={label}
options={multiselectOptionsFor(c)}
filter={getFilter(c.key)}
onToggle={(v) => toggleFilterValue(c.key, v)}
onNegateChange={(negate) => updateFilter(c.key, { negate })}
/>
);
}
return (
<input
key={c.key}
type="text"
class="ui-filterable-view-search"
placeholder={`filter by ${label}…`}
aria-label={`filter by ${label}`}
value={getFilter(c.key).value}
onInput={(e) =>
updateFilter(c.key, {
value: (e.target as HTMLInputElement).value,
})
}
/>
);
})}
{activeFilters.length > 0 ? (
<button
type="button"
class="ui-table-reset-filters"
onClick={resetFilters}
>
reset filters
</button>
) : null}
</div>
);
}
export function FilterableView<T>({
columns,
rows,
rowKey,
storageKey,
view,
renderCard,
emptyMessage,
}: {
columns: TableColumn<T>[];
rows: T[];
rowKey: (row: T) => string;
// Shared 1:1 with `Table`'s own filter persistence — pass the same
// key `<Table>` gets when it's the other `view`, so cards↔table never
// lose or hide an active filter (see this file's own comment).
storageKey: string;
view: "cards" | "table";
renderCard: (row: T) => ComponentChildren;
// Shown when `rows` itself is empty. A filter narrowing a non-empty
// `rows` to zero visible rows gets its own fixed message instead
// (same as `Table`'s own "no rows match the current filter") — the
// two cases mean different things, same as `Table`'s own split.
emptyMessage?: ComponentChildren;
}) {
const {
visibleRows,
activeFilters,
getFilter,
updateFilter,
toggleFilterValue,
resetFilters,
multiselectOptionsFor,
} = useTableFilters(columns, rows, storageKey);
if (view === "table") {
return (
<Table
columns={columns}
rows={rows}
rowKey={rowKey}
storageKey={storageKey}
emptyMessage={emptyMessage}
/>
);
}
return (
<>
<FilterBar
columns={columns}
getFilter={getFilter}
updateFilter={updateFilter}
toggleFilterValue={toggleFilterValue}
resetFilters={resetFilters}
activeFilters={activeFilters}
multiselectOptionsFor={multiselectOptionsFor}
/>
{rows.length === 0 && emptyMessage ? (
<p class="ui-filterable-view-empty">{emptyMessage}</p>
) : null}
{rows.length > 0 && visibleRows.length === 0 ? (
<p class="ui-filterable-view-empty">no rows match the current filter</p>
) : null}
{visibleRows.length > 0 ? (
<div class="ui-filterable-view-cards">
{visibleRows.map((row) => (
<div key={rowKey(row)}>{renderCard(row)}</div>
))}
</div>
) : null}
</>
);
}

51
frontend/packages/swarm-ui/src/ui/multiselect-filter/MultiselectFilter.css
View file

@ -1,51 +0,0 @@
/* Checkbox-list content — same visual treatment as `Table`'s own
popover content (`Table.css`'s `.ui-table-filter-multiselect`/
`-checkbox`), colocated here instead of reached-across-files since
`Table` no longer renders this markup itself (see this component's
file-top comment). */
.ui-multiselect-filter-options {
display: flex;
flex-direction: column;
gap: 0.3em;
max-height: 12em;
overflow-y: auto;
}
.ui-multiselect-filter-checkbox {
display: flex;
align-items: center;
gap: 0.35em;
cursor: pointer;
font-size: 0.9em;
}
.ui-multiselect-filter-negate {
display: flex;
align-items: center;
gap: 0.35em;
margin-top: 0.5em;
padding-top: 0.5em;
border-top: 1px solid var(--border);
color: var(--muted);
font-size: 0.85em;
cursor: pointer;
}
/* The standalone control (trigger + popover) — `position: relative`/
`absolute` under the trigger, not `Table`'s fixed+portal recipe:
nothing here sits inside a clipping ancestor (see file-top comment),
so the simpler positioning is enough. */
.ui-multiselect-filter {
position: relative;
}
.ui-multiselect-filter-popover {
position: absolute;
top: 100%;
left: 0;
margin-top: 0.25em;
z-index: 10;
min-width: 12em;
padding: 0.5em;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

140
frontend/packages/swarm-ui/src/ui/multiselect-filter/MultiselectFilter.tsx
View file

@ -1,140 +0,0 @@
// <MultiselectFilter> / <MultiselectFilterOptions> — the checkbox-list
// "pick any of these values" control every multiselect-mode filter in
// this package needs, split into a content-only piece and a full
// standalone control around it.
//
// Extracted out of `Table`'s own per-column filter popover (design-
// guide's "Component-first design") once `AgentsPage`'s card-view filter
// toolbar needed the identical checkbox list and nearly duplicated it —
// exactly the "next contributor duplicates ad-hoc styling, someone has
// to hunt it down and consolidate" scenario that section warns about.
// `Table` keeps its own trigger (an icon button inside a `<th>`) and its
// own positioning (`position: fixed` + portal, to escape
// `.ui-table-scroll`'s clip — see that file's own comment), genuinely
// different concerns from a plain toolbar's; only the checkbox-list
// *content* moves here, as `MultiselectFilterOptions`. A caller with no
// clipping context and no header row to anchor an icon to — a plain
// toolbar, `AgentsPage`'s first use — reaches for `MultiselectFilter`
// instead: the same content, wrapped in its own `Badge` trigger and a
// much simpler `position: absolute` popover.
import { useEffect, useRef, useState } from "preact/hooks";
import { Badge } from "@hive/shared/badge.js";
import "./MultiselectFilter.css";
export interface MultiselectFilterState {
values: string[];
negate: boolean;
}
export function MultiselectFilterOptions({
options,
filter,
onToggle,
}: {
options: string[];
filter: MultiselectFilterState;
onToggle: (value: string) => void;
}) {
return (
<div class="ui-multiselect-filter-options">
{options.map((v) => (
<label key={v} class="ui-multiselect-filter-checkbox">
<input
type="checkbox"
checked={filter.values.includes(v)}
onChange={() => onToggle(v)}
/>
{v}
</label>
))}
</div>
);
}
// The negate toggle — mara: "you should be able to change if the filter
// is negated or not (eg search for this text vs exclude it)", same
// reasoning as `Table`'s own copy. Small enough (one checkbox+label)
// that keeping it inline here rather than a third exported piece isn't
// worth the indirection; `Table` keeps rendering its own copy for text-
// mode filters, which don't otherwise touch this file at all.
function NegateToggle({
negate,
onChange,
}: {
negate: boolean;
onChange: (negate: boolean) => void;
}) {
return (
<label class="ui-multiselect-filter-negate">
<input
type="checkbox"
checked={negate}
onChange={(e) => onChange((e.target as HTMLInputElement).checked)}
/>
exclude
</label>
);
}
export function MultiselectFilter({
label,
options,
filter,
onToggle,
onNegateChange,
}: {
label: string;
options: string[];
filter: MultiselectFilterState;
onToggle: (value: string) => void;
onNegateChange: (negate: boolean) => void;
}) {
const [open, setOpen] = useState(false);
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!open) return;
function handlePointerDown(e: PointerEvent) {
if (e.target instanceof Node && ref.current?.contains(e.target)) return;
setOpen(false);
}
function handleKeyDown(e: KeyboardEvent) {
if (e.key === "Escape") setOpen(false);
}
document.addEventListener("pointerdown", handlePointerDown, true);
document.addEventListener("keydown", handleKeyDown);
return () => {
document.removeEventListener("pointerdown", handlePointerDown, true);
document.removeEventListener("keydown", handleKeyDown);
};
}, [open]);
return (
<div class="ui-multiselect-filter" ref={ref}>
<Badge
variant="quiet"
value={
filter.values.length > 0
? `${label} (${filter.values.length})`
: label
}
onClick={() => setOpen((o) => !o)}
expanded={open}
/>
{open ? (
<div
class="ui-multiselect-filter-popover"
role="dialog"
aria-label={`filter by ${label}`}
>
<MultiselectFilterOptions
options={options}
filter={filter}
onToggle={onToggle}
/>
<NegateToggle negate={filter.negate} onChange={onNegateChange} />
</div>
) : null}
</div>
);
}

7
frontend/packages/swarm-ui/src/ui/panel/Panel.tsx
View file

@ -34,19 +34,14 @@ 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={extraClass ? `ui-panel ${extraClass}` : "ui-panel"}>
<section class="ui-panel">
{title || icon || actions ? (
<div class="ui-panel-header">
{icon ? (

14
frontend/packages/swarm-ui/src/ui/split-view/SplitView.css
View file

@ -1,14 +0,0 @@
.ui-split-view {
display: flex;
flex-wrap: wrap;
gap: 1em;
align-items: flex-start;
}
.ui-split-view-primary {
flex: 2 1 480px;
min-width: 0;
}
.ui-split-view-secondary {
flex: 1 1 320px;
min-width: 0;
}

33
frontend/packages/swarm-ui/src/ui/split-view/SplitView.tsx
View file

@ -1,33 +0,0 @@
// <SplitView> — a primary/secondary pane laid out side by side, wrapping
// to stacked on a narrow viewport. Extracted out of `AgentsPage`'s own
// list+detail row (design-guide's "Component-first design": a page had
// built this inline for its own list/detail split, `AgentsPage`'s
// `Panel`s reaching for it is the first real use, per the doc's "build
// the primitive before or alongside the first real page that needs it").
//
// `flex-wrap`, not a `@media` breakpoint — content-driven stacking, same
// approach the shell's own nav row already uses (`shell/Shell.css`)
// rather than a second, independent magic-number breakpoint. No opinion
// on what's inside either pane (a `Panel`, anything else) — same "own
// the mechanics, not the content" split as `Card`.
import type { ComponentChildren } from "preact";
import "./SplitView.css";
export function SplitView({
primary,
secondary,
}: {
/** The wider pane — a list, a table, whatever the page's main content
* is. `flex: 2` against `secondary`'s `flex: 1`. */
primary: ComponentChildren;
/** The narrower pane — a detail view, a summary, anything that reads
* as "more about the thing selected in `primary`." */
secondary: ComponentChildren;
}) {
return (
<div class="ui-split-view">
<div class="ui-split-view-primary">{primary}</div>
<div class="ui-split-view-secondary">{secondary}</div>
</div>
);
}

22
frontend/packages/swarm-ui/src/ui/table/Table.css
View file

@ -141,9 +141,25 @@
font-size: 0.9em;
}
/* `filterMode: "multiselect"`'s actual checkbox-list content is
`MultiselectFilterOptions` (`ui/multiselect-filter/`) now — its own
colocated CSS, not here. */
/* `filterMode: "multiselect"` — a scrollable checkbox list rather than
a `<select multiple>`, which needs a modifier key to pick more than
one option and reads as unfamiliar to most operators; a plain
checkbox list needs neither. `max-height` + scroll keeps a
long option set (many labels) from pushing the popover off-screen. */
.ui-table-filter-multiselect {
display: flex;
flex-direction: column;
gap: 0.3em;
max-height: 12em;
overflow-y: auto;
}
.ui-table-filter-checkbox {
display: flex;
align-items: center;
gap: 0.35em;
cursor: pointer;
font-size: 0.9em;
}
/* The negate toggle sits under every filter mode's own control (mara:
"you should be able to change if the filter is negated or not") —

211
frontend/packages/swarm-ui/src/ui/table/Table.tsx
View file

@ -14,7 +14,6 @@ import { createPortal } from "preact/compat";
import type { ComponentChildren } from "preact";
import { FilterIcon } from "@hive/shared/icons.js";
import { useLocalSetting } from "@hive/shared/settings-storage.js";
import { MultiselectFilterOptions } from "../multiselect-filter/MultiselectFilter.js";
import "./Table.css";
export interface TableColumn<T> {
@ -134,101 +133,6 @@ function compareValues(a: string | number, b: string | number): number {
});
}
// The filter *state* half of `<Table>`, split out so a second, differently
// shaped view over the same rows (AgentsPage's card list, switchable
// against its own `Table`) can share one filter state instead of forking
// its own — mara: "separating data and filter from view" lets the choice
// of view (table vs. card) stop mattering to what's filtered. `Table`
// itself calls this internally below; the popover-trigger UI stays here,
// table-shaped (a `<th>`-anchored icon) — a caller with a different
// layout renders its own trigger against the same `getFilter`/
// `updateFilter`/`toggleFilterValue`/`multiselectOptionsFor` this returns.
export function useTableFilters<T>(
columns: TableColumn<T>[],
rows: T[],
storageKey: string,
) {
const [filters, setFilters] = useLocalSetting<
Record<string, ColumnFilterState>
>(storageKey, {});
const activeFilters = Object.entries(filters).filter(([, f]) =>
isFilterActive(f),
);
function getFilter(key: string): ColumnFilterState {
return filters[key] ?? EMPTY_FILTER;
}
function updateFilter(key: string, patch: Partial<ColumnFilterState>) {
setFilters({
...filters,
[key]: { ...getFilter(key), ...patch },
});
}
function toggleFilterValue(key: string, value: string) {
const current = getFilter(key).values;
updateFilter(key, {
values: current.includes(value)
? current.filter((v) => v !== value)
: [...current, value],
});
}
// mara: "have a small reset filters btn" — one button clears every
// column's filter at once rather than hunting down each popover
// individually.
function resetFilters() {
setFilters({});
}
// Distinct values currently present for a `"multiselect"`-mode column,
// so the checkbox list never offers an option that would match zero
// rows. Computed off `rows` (pre-filter) — every column's own option
// list stays stable while a sibling column's filter narrows
// `visibleRows`, matching how a spreadsheet's column filters don't
// hide each other's choices. A row contributes every one of its own
// values, not just one.
function multiselectOptionsFor(c: TableColumn<T>): string[] {
if (!c.filterValues) return [];
const values = new Set<string>();
for (const row of rows) for (const v of c.filterValues(row)) values.add(v);
return Array.from(values).sort((a, b) =>
a.localeCompare(b, undefined, { sensitivity: "base", numeric: true }),
);
}
const visibleRows = useMemo(() => {
if (activeFilters.length === 0) return rows;
return rows.filter((row) =>
activeFilters.every(([key, f]) => {
const col = columns.find((c) => c.key === key);
let matches: boolean;
if (col?.filterMode === "multiselect") {
const rowValues = col.filterValues?.(row) ?? [];
matches = f.values.some((v) => rowValues.includes(v));
} else {
const value = col?.filterValue?.(row) ?? "";
matches = value.toLowerCase().includes(f.value.toLowerCase());
}
return f.negate ? !matches : matches;
}),
);
// eslint-disable-next-line react-hooks/exhaustive-deps -- `columns` is
// a fresh array every render (built inline by every caller); keying
// off its identity would recompute every render regardless, so this
// depends on the values that actually determine the output instead.
}, [rows, JSON.stringify(activeFilters)]);
return {
visibleRows,
activeFilters,
getFilter,
updateFilter,
toggleFilterValue,
resetFilters,
multiselectOptionsFor,
};
}
export function Table<T>({
columns,
rows,
@ -259,18 +163,13 @@ export function Table<T>({
// multi-column sort is real complexity (tie-break order, a UI to
// express it) nothing here has asked for yet.
const [sort, setSort] = useState<{ key: string; dir: SortDir } | null>(null);
// Filter *state* lives in `useTableFilters` now (see its own comment) —
// this component only owns the popover-trigger UI below, table-shaped
// (a `<th>`-anchored icon).
const {
visibleRows: filteredRows,
activeFilters,
getFilter,
updateFilter,
toggleFilterValue,
resetFilters,
multiselectOptionsFor,
} = useTableFilters(columns, rows, storageKey);
// Filter state per filterable column key, only populated for a column
// the operator has actually touched. Persisted (see `storageKey`
// above), same `useLocalSetting` plumbing `IssueReportPage` already
// used for its own now-folded-in label filter.
const [filters, setFilters] = useLocalSetting<
Record<string, ColumnFilterState>
>(storageKey, {});
// Which column's filter popover is open, if any — at most one at a
// time (opening a second closes the first) so the header row never
// shows more than one panel at once.
@ -329,6 +228,34 @@ export function Table<T>({
};
}, [openFilterKey]);
const activeFilters = Object.entries(filters).filter(([, f]) =>
isFilterActive(f),
);
function getFilter(key: string): ColumnFilterState {
return filters[key] ?? EMPTY_FILTER;
}
function updateFilter(key: string, patch: Partial<ColumnFilterState>) {
setFilters({
...filters,
[key]: { ...getFilter(key), ...patch },
});
}
function toggleFilterValue(key: string, value: string) {
const current = getFilter(key).values;
updateFilter(key, {
values: current.includes(value)
? current.filter((v) => v !== value)
: [...current, value],
});
}
// mara: "have a small reset filters btn" — one button clears every
// column's filter at once rather than hunting down each popover
// individually.
function resetFilters() {
setFilters({});
}
// Close on outside click or Escape — same contract `Dropdown` gives
// its own popover (../.../shared/src/dropdown/Dropdown.tsx), but
// checked by CSS class rather than a ref: unlike `Dropdown`, there's
@ -355,23 +282,40 @@ export function Table<T>({
};
}, [openFilterKey]);
// Sort applies on top of `useTableFilters`'s already-filtered rows —
// sorting stays table-only (no other view has asked for it), so it's
// layered here rather than folded into the shared hook.
const visibleRows = useMemo(() => {
if (!sort) return filteredRows;
let out = rows;
if (activeFilters.length > 0) {
out = out.filter((row) =>
activeFilters.every(([key, f]) => {
const col = columns.find((c) => c.key === key);
let matches: boolean;
if (col?.filterMode === "multiselect") {
const rowValues = col.filterValues?.(row) ?? [];
matches = f.values.some((v) => rowValues.includes(v));
} else {
const value = col?.filterValue?.(row) ?? "";
matches = value.toLowerCase().includes(f.value.toLowerCase());
}
return f.negate ? !matches : matches;
}),
);
}
if (sort) {
const col = columns.find((c) => c.key === sort.key);
const sortBy = col?.sortBy;
if (!sortBy) return filteredRows;
return [...filteredRows].sort((a, b) => {
if (sortBy) {
out = [...out].sort((a, b) => {
const cmp = compareValues(sortBy(a), sortBy(b));
return sort.dir === "asc" ? cmp : -cmp;
});
}
}
return out;
// eslint-disable-next-line react-hooks/exhaustive-deps -- `columns` is
// a fresh array every render (built inline by every caller); keying
// off its identity would recompute every render regardless, so this
// depends on the values that actually determine the output instead.
}, [filteredRows, sort]);
}, [rows, sort, JSON.stringify(activeFilters)]);
function toggleSort(key: string) {
setSort((prev) => {
@ -389,6 +333,22 @@ export function Table<T>({
return sort.dir === "asc" ? "ascending" : "descending";
}
// Distinct values currently present for a `"multiselect"`-mode column,
// so the checkbox list never offers an option that would match zero
// rows. Computed off `rows` (pre-filter) — every column's own option
// list stays stable while a sibling column's filter narrows
// `visibleRows`, matching how a spreadsheet's column filters don't
// hide each other's choices. A row contributes every one of its own
// values, not just one.
function multiselectOptionsFor(c: TableColumn<T>): string[] {
if (!c.filterValues) return [];
const values = new Set<string>();
for (const row of rows) for (const v of c.filterValues(row)) values.add(v);
return Array.from(values).sort((a, b) =>
a.localeCompare(b, undefined, { sensitivity: "base", numeric: true }),
);
}
// Only one popover is ever open at a time, so one ref (rather than a
// per-column ref map) is enough to focus whichever control just
// mounted — typing immediately after the click that opened it,
@ -427,16 +387,21 @@ export function Table<T>({
function renderFilterControl(c: TableColumn<T>) {
if (c.filterMode === "multiselect") {
// Content shared with `AgentsPage`'s card-view filter toolbar —
// see `MultiselectFilter.tsx`'s own file-top comment for why this
// moved out of here.
const f = getFilter(c.key);
return (
<>
<MultiselectFilterOptions
options={multiselectOptionsFor(c)}
filter={getFilter(c.key)}
onToggle={(v) => toggleFilterValue(c.key, v)}
<div class="ui-table-filter-multiselect">
{multiselectOptionsFor(c).map((v) => (
<label key={v} class="ui-table-filter-checkbox">
<input
type="checkbox"
checked={f.values.includes(v)}
onChange={() => toggleFilterValue(c.key, v)}
/>
{v}
</label>
))}
</div>
{renderNegateToggle(c)}
</>
);
@ -478,7 +443,7 @@ export function Table<T>({
<thead>
<tr>
{columns.map((c) => {
const hasFilterValue = isFilterActive(getFilter(c.key));
const hasFilterValue = isFilterActive(filters[c.key]);
const filterOpen = openFilterKey === c.key;
const headerContent = c.sortBy ? (
<button