diff --git a/docs/swarm/ui.md b/docs/swarm/ui.md index a4efd6cc..7b89ea64 100644 --- a/docs/swarm/ui.md +++ b/docs/swarm/ui.md @@ -23,7 +23,7 @@ shut. A dropdown inside a dialog opens above the dialog and the dialog doesn't c | route | what | | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `/` | the start page: the swarm's name over a digital-rain backdrop, plus a paperclip offering to set up an agent while no `ruth` exists, or her hive declares her destroyed (it opens the create form with `ruth` filled in); the swarm name in the header links here | -| `/agents` | every agent, under a folded **hives** card with the hive directory and each hive's last reported status: status, config PR, wanted state, inference settings, resource caps, permissions; create agents (with their permissions, optionally from an [archetype](archetypes.md)), link forge, matrix and GitHub accounts | +| `/agents` | every agent as a card that opens in place (status, config PR, wanted state, inference settings, resource caps, permissions, accounts, terminal), under a folded **hives** card with the hive directory and each hive's last reported status; create agents (with their permissions, optionally from an [archetype](archetypes.md)), link forge, matrix and GitHub accounts | | `/agents//terminal` | one agent's live terminal | | `/agents//subagents//terminal` | one of that agent's subagents' live terminal | | `/reports` | two folded cards, each read only once opened: the **alerts** the swarm's Grafana holds now, the firing ones, with a button for the pending, no-data and error ones and a link to Grafana's own alert list; read through the controller with a Viewer service-account token, and a cross-repo **issue report** | @@ -53,9 +53,31 @@ the code back. The credentials go to the agent through the secret store ([`claude-login.md`](claude-login.md)). The agent's own web UI login still works too. +### The agents page + +`/agents` is the hives card, then one column of cards, one per agent. A card's +header shows its icon, name, freshness, the status message and the **wanted** +menu (up, offline, paused, destroy), and a **login needed** badge with a +**log in** button when its claude has no session. Select the header to open the +card in place; select it again to close it. Several cards can be open at once, +and a card stays open across the page's refresh, but not across a reload. The +filter bar above the cards filters by name, hive, status, message, wanted state +and config PR. + +An opened card has four sections, each folded except **overview**, and each +reads nothing until you open it: + +- **overview**: the agent's turn state, context and cost, its hive, and its open + config PR. +- **settings**: inference, instructions, resource caps, permissions and allowed + domains, each with its own editor (described below). +- **accounts**: the agent's linked accounts, and the menu that links another. +- **terminal**: the live terminal with its message box, and the agent's + subagents under it (next section). + ### Agent and subagent terminals -An agent's detail panel on `/agents` shows a small live preview of its +An opened agent card on `/agents` shows, in its **terminal** section, a small live preview of its terminal, and below it the agent's **subagents**: every subagent the swarm queue holds terminal rows for from the last 24 hours. Picking one shows its terminal in the same preview, and **expand** opens it in its own tab, as it @@ -113,7 +135,7 @@ with no icon keeps the hyperhive mark. The tab also has an agent badge, with the agent's icon and name, ahead of the connection badge. It opens the agent's details in a popover under the badge: the same status, state, wanted state, inference settings, resource caps, permissions, allowed domains and linked accounts as the -panel on `/agents`, without the terminal preview. The popover doesn't dim the +opened card on `/agents`, without the terminal preview. The popover doesn't dim the page. Selecting outside it, or Escape, closes it. From the keyboard, opening a popover moves focus into it, and Escape puts focus back on the badge. The filter popovers on table headers work the same way. You can stop or pause the @@ -536,7 +558,7 @@ text stays. ### Inference settings -The agent's detail panel shows its model and effort under **inference**, each +An opened agent card shows, in its **settings** section, its model and effort under **inference**, each with where it comes from: the swarm, its agent.nix, its own pick, or the default. Below them are the subagent model list the swarm sets, or "its own" when it sets none, and the subagent cap, which reads "no cap" when unset. @@ -544,13 +566,13 @@ when it sets none, and the subagent cap, which reads "no cap" when unset. stores; saving does a `PUT /api/agents/{agent}/inference` of the whole value. A field you leave empty stays out of it, so the agent keeps its own value for that field; an empty max subagents is no cap. **clear the swarm's setting** sends the `DELETE`. -The panel reads `GET /api/agents/{agent}/inference`; before the agent's first +The card reads `GET /api/agents/{agent}/inference`; before the agent's first report reaches the controller, it shows the swarm's stored values only. [inference](inference.md) describes the settings themselves. ### Editing an agent's instructions -The **instructions** row of an agent's detail panel has an **edit** button. It +The **instructions** row of an opened agent card's **settings** has an **edit** button. It opens `AGENTS.md`, the file the agent reads its instructions from, in a plain text box. The text is the copy the agent last published, so the box still opens for a stopped agent, but **save** needs the agent running. @@ -566,7 +588,7 @@ dialog keeps an unsaved edit for the next time you open it. ### Resource caps -The agent's detail panel shows its CPU quota and memory max under **resource +An opened agent card shows, under **settings**, its CPU quota and memory max under **resource caps**. A cap is the swarm's, so it follows the agent to whichever hive runs it, and it replaces what the hive says for that field. A field the swarm leaves out shows as the hive deciding it. **edit** opens a dialog with the two @@ -601,14 +623,14 @@ to an agent's traffic from then on. A saved change isn't instant. The hive reads the caps about every 30 seconds, and a running agent takes a changed cap at its next spawn or rebuild, so the -row shows the new value before the agent runs under it. The panel reads -`GET /api/agents/{agent}/limits`; when that read fails, the panel shows the +row shows the new value before the agent runs under it. The card reads +`GET /api/agents/{agent}/limits`; when that read fails, the card shows the reason and a **retry** button. [hivectl](../tools/hivectl.md#per-agent-resource-limits) sets the hive's own limits. ### Permissions -The agent's detail panel shows what the swarm grants it under **permissions**: +An opened agent card shows, under **settings**, what the swarm grants it under **permissions**: the default set, none, or a count with one badge per permission. A swarm grant is the agent's whole set, so it follows the agent to whichever hive runs it. **edit** opens a dialog with one checkbox per permission the controller @@ -625,14 +647,14 @@ them. A saved change isn't instant. The hive reads the grant about every 30 seconds and the agent takes it at its next turn. A change to `manage_root_agent` -restarts the agent after its current turn. The panel reads -`GET /api/agents/{agent}/permissions`; when that read fails, the panel shows +restarts the agent after its current turn. The card reads +`GET /api/agents/{agent}/permissions`; when that read fails, the card shows the reason and a **retry** button. `swarmctl agent permissions set` sets the same grant from a shell. ### Allowed domains -The agent's detail panel lists the destinations it may reach through its +An opened agent card lists, under **settings**, the destinations it may reach through its hive's egress proxy under **allowed domains**, beyond the base list every agent has: the entries for every agent in the swarm (badge **swarm-wide**) and the ones for this agent alone (badge with the agent's name). An entry matters @@ -697,7 +719,7 @@ the dialog goes back to step 2 and shows the reason there. ### Settings at creation Step 4 of the **+ agent** dialog has **resource caps** and **inference**, with -the same fields as the detail panel's editors. Leave the +the same fields as the opened card's settings editors. Leave the fields empty and the request is the plain name and hive. Fill them and `POST /api/agents` carries them as optional `limits` and `inference` objects, the same shapes the two `PUT` routes take. The controller checks them with the `PUT` rules before it queues @@ -737,13 +759,13 @@ name that already holds an account; delete that account first to replace it. The fourth, the API-key environment, is the exception: a save overwrites what the store holds. -The agent's detail panel lists its linked accounts under **accounts**, one row +An opened agent card lists its linked accounts in its **accounts** section, one row per account: kind, name and host. Opening an agent makes one request, `GET /api/hives/{hive}/agents/{agent}/linked-accounts`, which returns every -account of that agent as names and hosts and never a credential. When the panel +account of that agent as names and hosts and never a credential. When the card fails to read the accounts, the inference settings, the resource caps or the permissions, it -shows the reason as text. A list the panel already loaded stays on screen +shows the reason as text. A list the card already loaded stays on screen beneath the error. | kind | one row per | name | host | @@ -753,11 +775,11 @@ beneath the error. | github | `swarm/agents//github-token`, if any | `github` | `github.com` | | `backend` | `swarm/agents//backend-env`, if any | `backend-env` | none | -The route names the second kind `forgejo`; the panel shows it as **forge**, +The route names the second kind `forgejo`; the card shows it as **forge**, the word the link menu uses. The matrix `main` row is the agent's own account, which the swarm mints; -it carries an **own account** badge. The panel requests the list again when +it carries an **own account** badge. The card requests the list again when a link dialog closes. - **link a matrix account** — `PUT /api/hives/{hive}/agents/{agent}/matrix-accounts/{account}`, @@ -805,7 +827,7 @@ request: swarm-controller removes every version of the entry from the swarm secret store, and answers 404 when the store holds nothing there. It refuses `main`: the -swarm mints that account and would re-mint it. The panel requests the list +swarm mints that account and would re-mint it. The card requests the list again after a delete, including a 404 one: the account being already gone is the end state the delete wanted, so the dialog closes without an error. diff --git a/frontend/packages/swarm-ui/src/agent/detail/AgentDetail.css b/frontend/packages/swarm-ui/src/agent/detail/AgentDetail.css index 36bf6222..289b1d5b 100644 --- a/frontend/packages/swarm-ui/src/agent/detail/AgentDetail.css +++ b/frontend/packages/swarm-ui/src/agent/detail/AgentDetail.css @@ -17,3 +17,11 @@ align-items: center; gap: 0.75em; } + +/* The folded sections of an opened card sit one under another, each with the + shared disclosure look; the fields keep the grid above. */ +.ui-agent-detail-sections { + display: flex; + flex-direction: column; + gap: 0.75em; +} diff --git a/frontend/packages/swarm-ui/src/agent/detail/AgentDetail.tsx b/frontend/packages/swarm-ui/src/agent/detail/AgentDetail.tsx index 382688d1..70cdaf42 100644 --- a/frontend/packages/swarm-ui/src/agent/detail/AgentDetail.tsx +++ b/frontend/packages/swarm-ui/src/agent/detail/AgentDetail.tsx @@ -1,8 +1,11 @@ // — one agent's details: its status, wanted state, hive, config -// PR, inference settings, resource caps and linked accounts, plus the actions on them. The -// body of the detail panel on `/agents` (where `withTerminal` adds the live -// terminal and subagents below it) and of the detail dialog on a terminal -// page (which is already beside the terminal, so omits it). +// PR, inference settings, resource caps and linked accounts, plus the actions on +// them. Two layouts. In an opened card on `/agents` (`inCard`) the card header +// already shows status, message and wanted state, so the body is four folded +// sections (`sections.ts`): overview, settings, accounts, and the terminal with +// its subagents, each built when first opened. In the detail dialog on a terminal +// page it is one flat list with those three rows, and no terminal, since the +// page is already beside one. // // Takes the agent's *live* row and the shared `AgentActions`, so a state // change or a link made here shows wherever else the same row is drawn. @@ -20,140 +23,262 @@ import { AgentTermPreview } from "../terminal/AgentTermPreview.js"; import { FRESHNESS, type AgentRow } from "../AgentTypes.js"; import { LinkAccountMenu } from "./LinkAccountMenu.js"; import { LinkedAccounts } from "./LinkedAccounts.js"; +import { LazyDisclosure } from "../../ui/disclosure/LazyDisclosure.js"; +import { + SECTION_TITLE, + sectionsFor, + startsOpen, + type DetailSection, +} from "./sections.js"; import { SubagentTerms } from "../terminal/SubagentTerms.js"; import { WantedMenu } from "../roster/WantedMenu.js"; import "./AgentDetail.css"; -export function AgentDetail({ +/** The rows the card header already shows: status, message and wanted. */ +function HeaderRows({ row, actions, - withTerminal = false, }: { row: AgentRow; actions: AgentActions; - withTerminal?: boolean; }) { const { tone, label } = FRESHNESS[row.freshness]; const declareError = actions.actionErrors.get(row.name); return ( -
-
-
status
-
+ <> +
status
+
+ + {label} + {row.last_seen_unix !== null ? ( + <> + {" "} + () + + ) : null} + + } + /> +
+
message
+
{row.snapshot?.status_text ?? "—"}
+
wanted
+
+ {/* Full menu (destroy included) — mara: "destroy is already + available via wanted state", no separate button needed. */} + + {/* A failed declaration shows here too: on a terminal page's + dialog there is no roster card to carry the "failed" badge. */} + {declareError ? ( + + ) : null} +
+ + ); +} + +function OverviewRows({ row }: { row: AgentRow }) { + return ( + <> +
state
+
+ +
+
hive
+
{row.hive ?? "—"}
+
config PR
+
+ {row.config_pr ? ( - {label} - {row.last_seen_unix !== null ? ( - <> - {" "} - () - - ) : null} - + row.config_pr.html_url ? ( + + #{row.config_pr.pr_number} + + ) : ( + `#${row.config_pr.pr_number}` + ) } /> -
-
message
-
{row.snapshot?.status_text ?? "—"}
-
wanted
-
- {/* Full menu (destroy included) — mara: "destroy is already - available via wanted state", no separate button needed. */} - + + ); +} + +function SettingsRows({ agent }: { agent: string }) { + return ( + <> +
inference
+
+ +
+
instructions
+
+ +
+
resource caps
+
+ +
+
permissions
+
+ +
+
allowed domains
+
+ +
+ + ); +} + +function AccountsRows({ + row, + actions, +}: { + row: AgentRow; + actions: AgentActions; +}) { + return ( + <> +
accounts
+
+ {row.hive ? ( + - {/* A failed declaration shows here too: on a terminal page's - dialog there is no roster card to carry the "failed" badge. */} - {declareError ? ( - - ) : null} -
-
state
-
- -
-
hive
-
{row.hive ?? "—"}
-
config PR
-
- {row.config_pr ? ( - - #{row.config_pr.pr_number} - - ) : ( - `#${row.config_pr.pr_number}` - ) - } - /> - ) : ( - "—" - )} -
-
inference
-
- -
-
instructions
-
- -
-
resource caps
-
- -
-
permissions
-
- -
-
allowed domains
-
- -
-
accounts
-
- {row.hive ? ( - - ) : ( - "—" - )} -
-
-
- actions.openLink(row, kind)} - /> -
- {withTerminal ? ( + ) : ( + "—" + )} + + + ); +} + +function LinkAccountAction({ + row, + actions, +}: { + row: AgentRow; + actions: AgentActions; +}) { + return ( +
+ actions.openLink(row, kind)} + /> +
+ ); +} + +/** The body of one folded section of an opened card. */ +function SectionBody({ + section, + row, + actions, +}: { + section: DetailSection; + row: AgentRow; + actions: AgentActions; +}) { + switch (section) { + case "overview": + return ( +
+ +
+ ); + case "settings": + return ( +
+ +
+ ); + case "accounts": + return ( + <> +
+ +
+ + + ); + case "terminal": + return ( <> {/* The agent's live terminal and its input box. */} + ); + } +} + +export function AgentDetail({ + row, + actions, + withTerminal = false, + inCard = false, +}: { + row: AgentRow; + actions: AgentActions; + /** Add the live terminal and subagents: for the flat layout, below the rows. */ + withTerminal?: boolean; + /** The folded sections of an opened card, without the rows its header shows. */ + inCard?: boolean; +}) { + if (inCard) { + return ( +
+ {sectionsFor(withTerminal).map((section) => ( + + + + ))} +
+ ); + } + return ( +
+
+ + + + +
+ + {withTerminal ? ( + ) : null}
); diff --git a/frontend/packages/swarm-ui/src/agent/detail/AgentDetailPopover.tsx b/frontend/packages/swarm-ui/src/agent/detail/AgentDetailPopover.tsx index 5c282225..0e0517ad 100644 --- a/frontend/packages/swarm-ui/src/agent/detail/AgentDetailPopover.tsx +++ b/frontend/packages/swarm-ui/src/agent/detail/AgentDetailPopover.tsx @@ -1,4 +1,4 @@ -// — the agent detail panel from `/agents`, in a popover +// — an agent's details from `/agents`, as in an opened card, in a popover // under its anchor, for a page that is already showing the agent's terminal // and should not be left, or dimmed, to read or change its details. It carries // the same body (`AgentDetail`) and the same actions (`useAgentActions`) as the diff --git a/frontend/packages/swarm-ui/src/agent/detail/AgentInference.tsx b/frontend/packages/swarm-ui/src/agent/detail/AgentInference.tsx index 5fb83a1c..cc3c3cc4 100644 --- a/frontend/packages/swarm-ui/src/agent/detail/AgentInference.tsx +++ b/frontend/packages/swarm-ui/src/agent/detail/AgentInference.tsx @@ -1,4 +1,4 @@ -// — one agent's inference settings on the detail panel: the +// — one agent's inference settings in an opened agent card: the // model and effort it runs on now, with where each came from, and an editor // for the value the swarm sets. // diff --git a/frontend/packages/swarm-ui/src/agent/detail/AgentInstructions.tsx b/frontend/packages/swarm-ui/src/agent/detail/AgentInstructions.tsx index 9880f17c..6cf9cca1 100644 --- a/frontend/packages/swarm-ui/src/agent/detail/AgentInstructions.tsx +++ b/frontend/packages/swarm-ui/src/agent/detail/AgentInstructions.tsx @@ -1,5 +1,5 @@ // — an editor for an agent's AGENTS.md, in a dialog opened -// from the agent's detail panel. +// from the agent's opened card. // // It loads the copy the agent's harness last published // (`GET /api/agents/{name}/agents-md`, so a stopped agent shows the text it diff --git a/frontend/packages/swarm-ui/src/agent/detail/AgentLimits.tsx b/frontend/packages/swarm-ui/src/agent/detail/AgentLimits.tsx index 42fe9c9c..c4adeaf6 100644 --- a/frontend/packages/swarm-ui/src/agent/detail/AgentLimits.tsx +++ b/frontend/packages/swarm-ui/src/agent/detail/AgentLimits.tsx @@ -1,4 +1,4 @@ -// — one agent's resource caps on the detail panel: the CPU and +// — one agent's resource caps in an opened agent card: the CPU and // memory caps the swarm sets for it, and an editor for them. // // Reads `GET /api/agents/{name}/limits`, which answers the stored caps as diff --git a/frontend/packages/swarm-ui/src/agent/detail/AgentPermissions.tsx b/frontend/packages/swarm-ui/src/agent/detail/AgentPermissions.tsx index 379a88c7..7a08a110 100644 --- a/frontend/packages/swarm-ui/src/agent/detail/AgentPermissions.tsx +++ b/frontend/packages/swarm-ui/src/agent/detail/AgentPermissions.tsx @@ -1,4 +1,4 @@ -// — one agent's permissions on the detail panel: what the +// — one agent's permissions in an opened agent card: what the // swarm grants it, and an editor for that. // // Reads `GET /api/agents/{name}/permissions`, which answers the stored list as diff --git a/frontend/packages/swarm-ui/src/agent/detail/allowed-domains.ts b/frontend/packages/swarm-ui/src/agent/detail/allowed-domains.ts index 4fab97a0..9f24c95f 100644 --- a/frontend/packages/swarm-ui/src/agent/detail/allowed-domains.ts +++ b/frontend/packages/swarm-ui/src/agent/detail/allowed-domains.ts @@ -1,4 +1,4 @@ -// The detail panel's allowed-domains editor: which entries one agent's panel +// The allowed-domains editor of an opened agent card: which entries it // shows and the bodies it sends. Kept out of the component so `npm test` can // run it. diff --git a/frontend/packages/swarm-ui/src/agent/detail/permissions.ts b/frontend/packages/swarm-ui/src/agent/detail/permissions.ts index f3ae42de..5fd74410 100644 --- a/frontend/packages/swarm-ui/src/agent/detail/permissions.ts +++ b/frontend/packages/swarm-ui/src/agent/detail/permissions.ts @@ -1,4 +1,4 @@ -// The detail panel's permissions editor: what it starts on and how a granted +// An opened agent card's permissions editor: what it starts on and how a granted // set reads. Kept out of the component so `npm test` can run it. /** diff --git a/frontend/packages/swarm-ui/src/agent/detail/sections.ts b/frontend/packages/swarm-ui/src/agent/detail/sections.ts new file mode 100644 index 00000000..45477966 --- /dev/null +++ b/frontend/packages/swarm-ui/src/agent/detail/sections.ts @@ -0,0 +1,28 @@ +// The sections an agent card opens into, without a DOM: which there are, in +// what order, and which start open. The card's header already shows the +// agent's status, message and wanted state, so the sections hold the rest. + +/** One folded block of an opened agent card. */ +export type DetailSection = "overview" | "settings" | "accounts" | "terminal"; + +/** What each section's header says. */ +export const SECTION_TITLE: Record = { + overview: "overview", + settings: "settings", + accounts: "accounts", + terminal: "terminal", +}; + +/** + * The sections a card shows, top to bottom. The terminal is left out where + * the page is already beside one (the terminal page's details dialog). + */ +export function sectionsFor(withTerminal: boolean): DetailSection[] { + const sections: DetailSection[] = ["overview", "settings", "accounts"]; + return withTerminal ? [...sections, "terminal"] : sections; +} + +/** Only the overview is open when a card opens; the rest build on demand. */ +export function startsOpen(section: DetailSection): boolean { + return section === "overview"; +} diff --git a/frontend/packages/swarm-ui/src/agent/roster/AgentCard.css b/frontend/packages/swarm-ui/src/agent/roster/AgentCard.css index 4ceb20ec..dcd5a751 100644 --- a/frontend/packages/swarm-ui/src/agent/roster/AgentCard.css +++ b/frontend/packages/swarm-ui/src/agent/roster/AgentCard.css @@ -42,3 +42,14 @@ flex: 1; min-width: 0; } + +/* The header is what opens the card: it reads as a control without a box. */ +.ui-agent-card-row[role="button"] { + cursor: pointer; +} +/* The opened body, set off from the header by a rule. */ +.ui-agent-card-detail { + margin-block-start: 0.75em; + padding-block-start: 0.75em; + border-block-start: 1px solid var(--border); +} diff --git a/frontend/packages/swarm-ui/src/agent/roster/AgentCard.tsx b/frontend/packages/swarm-ui/src/agent/roster/AgentCard.tsx index 2a3fa6e0..9b1bde4e 100644 --- a/frontend/packages/swarm-ui/src/agent/roster/AgentCard.tsx +++ b/frontend/packages/swarm-ui/src/agent/roster/AgentCard.tsx @@ -1,56 +1,55 @@ // — 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. +// card per agent"). The header is those four things; selecting it opens the +// card in place into the agent's details (mara: "one column of expandable +// cards"), so there is no second panel to select into. The header already +// shows the agent's status, message and wanted state, so the opened body is the +// rest: `AgentDetail`'s folded sections (`inCard`). // -// 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 ` -
- - -
- - - } - > - {error ? ( - - ) : null} - {!error && rows === null ?

loading…

: null} - {rows ? ( - a.name} - storageKey="swarm-ui:agents:table-filters" - view={viewMode} - emptyMessage="no agents yet — the swarm-wide identity store has no agents registered on any hive" - renderCard={(a) => ( - setDetailTargetName(row.name)} - /> - )} - /> - ) : null} - + + + + } - // A second on-page `Panel`, not a modal — mara: "why no separate - // panel? ... i mean a second panel on agent page." Always mounted - // (an empty state when nothing's selected) rather than - // conditionally rendered, so picking an agent never causes the - // page's own layout to jump. `SplitView`'s `flex-wrap` stacks - // this below the list on a narrow viewport, same content-driven- - // not-a-fixed-breakpoint approach the shell's own nav already - // uses (`Shell.css`), rather than a new media query. - secondary={ - - {detailTarget ? ( - - ) : ( -

select an agent to see its details

- )} - - } - /> + > + {error ? ( + + ) : null} + {!error && rows === null ?

loading…

: null} + {rows ? ( + a.name} + storageKey="swarm-ui:agents:table-filters" + emptyMessage="no agents yet — the swarm-wide identity store has no agents registered on any hive" + // Each card gets its live row from `rows` on every render, so an + // opened card follows a refresh or a state change made inside it. + renderCard={(a) => } + /> + ) : null} + setCreateOpen(false)} diff --git a/frontend/packages/swarm-ui/src/ui/card/Card.tsx b/frontend/packages/swarm-ui/src/ui/card/Card.tsx index 8e3e687b..7d0a037f 100644 --- a/frontend/packages/swarm-ui/src/ui/card/Card.tsx +++ b/frontend/packages/swarm-ui/src/ui/card/Card.tsx @@ -26,8 +26,8 @@ export function Card({ children, class: extraClass, }: { - /** Highlight styling — the caller decides what "selected" means (the - * row shown in a detail panel, say); this component just renders it. */ + /** Highlight styling — the caller decides what "selected" means (an + * opened row, say); this component just renders it. */ selected?: boolean; /** Present → a real interactive card (role="button", keyboard- * activatable). Absent → a plain static container, same border/ diff --git a/frontend/packages/swarm-ui/src/ui/filterable-view/FilterableView.tsx b/frontend/packages/swarm-ui/src/ui/filterable-view/FilterableView.tsx index 9c619d6b..ec9754c3 100644 --- a/frontend/packages/swarm-ui/src/ui/filterable-view/FilterableView.tsx +++ b/frontend/packages/swarm-ui/src/ui/filterable-view/FilterableView.tsx @@ -21,14 +21,19 @@ import { MultiselectFilter, type MultiselectFilterState, } from "../multiselect-filter/MultiselectFilter.js"; -import { Table, useTableFilters, type TableColumn } from "../table/Table.js"; +import { + Table, + useTableFilters, + type FilterColumn, + type TableColumn, +} from "../table/Table.js"; import "./FilterableView.css"; -function isFilterable(c: TableColumn): boolean { +function isFilterable(c: FilterColumn): boolean { return c.filterValue !== undefined || c.filterValues !== undefined; } -function columnLabel(c: TableColumn): string { +function columnLabel(c: FilterColumn): string { return typeof c.header === "string" ? c.header : c.key; } @@ -46,7 +51,7 @@ function FilterBar({ activeFilters, multiselectOptionsFor, }: { - columns: TableColumn[]; + columns: FilterColumn[]; getFilter: (key: string) => MultiselectFilterState & { value: string }; updateFilter: ( key: string, @@ -55,7 +60,7 @@ function FilterBar({ toggleFilterValue: (key: string, value: string) => void; resetFilters: () => void; activeFilters: unknown[]; - multiselectOptionsFor: (c: TableColumn) => string[]; + multiselectOptionsFor: (c: FilterColumn) => string[]; }) { const filterable = columns.filter(isFilterable); if (filterable.length === 0) return null; @@ -104,30 +109,30 @@ function FilterBar({ ); } -export function FilterableView({ - columns, - rows, - rowKey, - storageKey, - view, - renderCard, - emptyMessage, -}: { - columns: TableColumn[]; - rows: T[]; - rowKey: (row: T) => string; - // Shared 1:1 with `Table`'s own filter persistence — pass the same - // key `` 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; -}) { +// `columns` says what each view needs of them: a table draws every cell, so it +// takes full `TableColumn`s; cards only filter, so they take `FilterColumn`s +// (a column minus its cell renderer). +type ViewColumns = + | { view: "cards"; columns: FilterColumn[] } + | { view: "table"; columns: TableColumn[] }; + +export function FilterableView( + props: ViewColumns & { + rows: T[]; + rowKey: (row: T) => string; + // Shared 1:1 with `Table`'s own filter persistence — pass the same + // key `
` 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; + 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 { columns, rows, rowKey, storageKey, renderCard, emptyMessage } = props; const { visibleRows, activeFilters, @@ -138,10 +143,10 @@ export function FilterableView({ multiselectOptionsFor, } = useTableFilters(columns, rows, storageKey); - if (view === "table") { + if (props.view === "table") { return (
= Omit, "render">; + export interface TableColumn { key: string; // `ComponentChildren`, not `string` — a plain string still satisfies @@ -130,7 +136,7 @@ function isFilterActive(f: ColumnFilterState | undefined): boolean { return f !== undefined && (f.value !== "" || f.values.length > 0); } -function isFilterable(c: TableColumn): boolean { +function isFilterable(c: FilterColumn): boolean { return c.filterValue !== undefined || c.filterValues !== undefined; } @@ -154,7 +160,7 @@ function compareValues(a: string | number, b: string | number): number { // layout renders its own trigger against the same `getFilter`/ // `updateFilter`/`toggleFilterValue`/`multiselectOptionsFor` this returns. export function useTableFilters( - columns: TableColumn[], + columns: FilterColumn[], rows: T[], storageKey: string, ) { @@ -203,7 +209,7 @@ export function useTableFilters( // `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): string[] { + function multiselectOptionsFor(c: FilterColumn): string[] { if (!c.filterValues) return []; const values = new Set(); for (const row of rows) for (const v of c.filterValues(row)) values.add(v); diff --git a/frontend/packages/swarm-ui/test/detail-sections.test.mjs b/frontend/packages/swarm-ui/test/detail-sections.test.mjs new file mode 100644 index 00000000..41ce8c31 --- /dev/null +++ b/frontend/packages/swarm-ui/test/detail-sections.test.mjs @@ -0,0 +1,30 @@ +// The sections an opened agent card holds. Run by `npm test`, which Node runs +// with its built-in test runner and type stripping. +import assert from "node:assert/strict"; +import { test } from "node:test"; +import { + SECTION_TITLE, + sectionsFor, + startsOpen, +} from "../src/agent/detail/sections.ts"; + +test("a card holds overview, settings and accounts, then the terminal", () => { + assert.deepEqual(sectionsFor(true), [ + "overview", + "settings", + "accounts", + "terminal", + ]); +}); + +test("a page beside a terminal leaves the terminal out", () => { + assert.deepEqual(sectionsFor(false), ["overview", "settings", "accounts"]); +}); + +test("only the overview starts open", () => { + assert.deepEqual(sectionsFor(true).filter(startsOpen), ["overview"]); +}); + +test("every section has a header", () => { + for (const s of sectionsFor(true)) assert.ok(SECTION_TITLE[s], s); +});