docs: say the jobs and builds cards start shut, in the active voice

Both cards on the jobs tab start shut and read nothing until opened; a link
with ?run= opens the builds card. The fold-and-build-on-first-open part of the
hives card is now one LazyDisclosure, which the hives card uses too. Docs
follow.

docs/swarm/builder.md

@@ -86,10 +86,10 @@ newest 100. Both are behind the swarm UI vhost's `admins` gate, and answer 503
 when the controller has no swarm queue or can't open the bucket, 500 when it
 can't read it.
 
-The final status links to `https://<swarm domain>/builds?run=<id>`, the swarm
-UI's builds page, so selecting **Details** on a red `swarm-builder` check opens
-that build's card, with `nix`'s tail, in the browser. The raw record stays at
-`GET /api/builder/runs/<id>`. A status has no link when the record wasn't
+The final status links to `https://<swarm domain>/jobs?run=<id>`, the swarm
+UI's jobs tab, where the builds are a card under the job graph. Selecting
+**Details** on a red `swarm-builder` check opens that build's card, with `nix`'s tail, in the browser. The raw record
+stays at `GET /api/builder/runs/<id>`. A status has no link when the record wasn't
 stored (the controller logs the failed write) or when the controller doesn't
 serve the swarm vhost (`SWARM_CONTROLLER_PUBLIC_URL` unset). The `pending`
 status has no link.

docs/swarm/ui.md

@@ -27,13 +27,12 @@ shut. A dropdown inside a dialog opens above the dialog and the dialog doesn't c
 | `/agents/<name>/terminal`                      | one agent's live terminal                                                                                                                                                                                                                                                                                               |
 | `/agents/<name>/subagents/<subagent>/terminal` | one of that agent's subagents' live terminal                                                                                                                                                                                                                                                                            |
 | `/alerts`                                      | 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                                                                                                |
-| `/jobs`                                        | the controller's job graph — where agent creation and credential mints show progress                                                                                                                                                                                                                                    |
+| `/jobs`                                        | the controller's job graph, where agent creation and credential mints show progress, and under it the swarm builder's recent builds of agent config PRs, with what nix printed when one failed                                                                                                                          |
 | `/schedules`                                   | the scheduled prompts: add, edit, pause, resume and remove                                                                                                                                                                                                                                                              |
 | `/messages`                                    | the swarm-wide message feed: every message between agents, and to them from the operator, reminders and compaction, with a history window and a filter on sender or recipient; a folded **broadcast** card above the feed sends one message to more than one agent at once                                              |
 | `/notifications`                               | the notification router's flows: a switch for each built-in, every flow drawn as a graph, and an editor for custom flows                                                                                                                                                                                                |
 | `/issues`                                      | a cross-repo issue report                                                                                                                                                                                                                                                                                               |
 | `/review`                                      | the review classifier: its recent runs, a try-out on a real PR, and its settings                                                                                                                                                                                                                                        |
-| `/builds`                                      | the swarm builder's recent builds of agent config PRs, with what nix printed when one failed                                                                                                                                                                                                                            |
 
 Everything it shows comes from [`swarm-controller`](../../swarm-controller/README.md).
 Pages that refresh on a timer share one polling rule: the page sends no new
@@ -473,15 +472,21 @@ previous repo's issues under the error.
 
 ### Builds
 
-The **builds** page lists the agent config PR heads the swarm builder built,
+The builds sit in a card under the job graph on the **jobs** tab. Both cards start
+shut, and each reads nothing until you open it; a link to
+a build opens the builds card. The old `/builds` address redirects there and
+keeps its query.
+
+The **builds** card lists the agent config PR heads the swarm builder built,
 newest first, from `GET /api/builder/runs`. Each card shows the repo and PR,
 the first seven characters of the commit, how the build ended (**built**,
 **failed** or **error**), when it started and how long it took. Select a card to
 read it: for a failed build, what `nix` printed; for a built one, the system
 closure; for an error, why no build came back.
 
-The **Details** link on a `swarm-builder` commit status opens this page as
-`/builds?run=<id>`, with that build's card open and in view. The builder keeps
+The **Details** link on a `swarm-builder` commit status opens the jobs tab as
+`/jobs?run=<id>`, with the builds card open and that build's card in view. Links made before the
+builds moved, to `/builds?run=<id>`, redirect to the same place. The builder keeps
 its newest 100 builds, so a link to an older one shows a note instead.
 
 ### Broadcasting a message

frontend/packages/swarm-ui/src/App.tsx

@@ -1,12 +1,12 @@
 // Root shell component — routing only. Each route's content is its own
 // page component under `./pages/`; this file just maps paths to them.
-import { Route, Router, Switch } from "wouter-preact";
+import { Redirect, Route, Router, Switch, useSearch } from "wouter-preact";
+import { jobsHref } from "./pages/builds/builds-types.js";
 import { Shell } from "./shell/Shell.js";
 import { useGuardedLocation } from "./shell/useGuardedLocation.js";
 import { AgentsPage } from "./pages/agents/AgentsPage.js";
 import { AgentTerminalPage } from "./pages/agents/AgentTerminalPage.js";
 import { AlertsPage } from "./pages/AlertsPage.js";
-import { BuildsPage } from "./pages/builds/BuildsPage.js";
 import { MessagesPage } from "./pages/messages/MessagesPage.js";
 import { NEW_FLOW_PATH } from "./pages/notifications/FlowDraft.js";
 import { FlowEditorPage } from "./pages/notifications/FlowEditorPage.js";
@@ -19,6 +19,13 @@ import { SchedulesPage } from "./pages/schedules/SchedulesPage.js";
 import { StartPage } from "./pages/StartPage.js";
 import { Panel } from "./ui/panel/Panel.js";
 
+// The builds page moved onto the jobs tab. Links made before that, such as the
+// Details link on a swarm-builder commit status, land here and go on to the
+// same build's card, query kept.
+function BuildsMoved() {
+  return <Redirect to={jobsHref(useSearch())} replace />;
+}
+
 function NotFound() {
   return (
     <Panel title="404" icon="🧭">
@@ -42,7 +49,7 @@ export function App() {
           />
           <Route path="/jobs" component={JobsPage} />
           <Route path="/schedules" component={SchedulesPage} />
-          <Route path="/builds" component={BuildsPage} />
+          <Route path="/builds" component={BuildsMoved} />
           <Route path="/messages" component={MessagesPage} />
           <Route path="/notifications" component={NotificationsPage} />
           <Route path={NEW_FLOW_PATH}>

frontend/packages/swarm-ui/src/pages/JobsPage.css

@@ -7,3 +7,15 @@
    per bundle call). */
 @import "@hive/shared/jobq-graph.css";
 @import "@hive/shared/jobq-rollup.css";
+
+/* The jobs tab: the job graph's card, then the builds card, one gap apart. */
+.ui-jobs-page {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+}
+.ui-jobs-refresh {
+  display: flex;
+  justify-content: flex-end;
+  margin-block-end: 0.5em;
+}

frontend/packages/swarm-ui/src/pages/JobsPage.tsx

@@ -21,7 +21,8 @@
 import { useState } from "preact/hooks";
 import { JobqGraph } from "@hive/shared/jobq-graph.js";
 import { JobqRollup } from "@hive/shared/jobq-rollup.js";
-import { Panel } from "../ui/panel/Panel.js";
+import { LazyDisclosure } from "../ui/disclosure/LazyDisclosure.js";
+import { BuildsCard } from "./builds/BuildsPage.js";
 import {
   RefreshIntervalPicker,
   useRefreshInterval,
@@ -34,7 +35,7 @@ import "./JobsPage.css";
 // just solve staleness rather than require an opt-in every visit.
 const DEFAULT_INTERVAL_MS: RefreshIntervalMs = 30_000;
 
-export function JobsPage() {
+function JobsBody() {
   const [intervalMs, setIntervalMs] =
     useState<RefreshIntervalMs>(DEFAULT_INTERVAL_MS);
   const [refreshToken, setRefreshToken] = useState(0);
@@ -50,19 +51,33 @@ export function JobsPage() {
   useRefreshInterval(intervalMs, () => setRefreshToken((t) => t + 1));
 
   return (
-    <Panel
-      title="jobs"
-      icon="🧩"
-      actions={
+    <>
+      <div class="ui-jobs-refresh">
         <RefreshIntervalPicker
           id="jobs-refresh"
           value={intervalMs}
           onChange={setIntervalMs}
         />
-      }
-    >
+      </div>
       <JobqRollup endpoint="/api/jobq/rollup" refreshToken={refreshToken} />
       <JobqGraph endpoint="/api/jobq/graph" refreshToken={refreshToken} />
-    </Panel>
+    </>
+  );
+}
+
+// The jobs tab holds two folded cards: the controller's job graph, and the swarm
+// builder's recent builds under it. Neither reads anything until it is opened.
+export function JobsPage() {
+  return (
+    <div class="ui-jobs-page">
+      <LazyDisclosure
+        title="jobs"
+        icon="🧩"
+        hint="the controller's job graph: agent creation, credential mints"
+      >
+        <JobsBody />
+      </LazyDisclosure>
+      <BuildsCard />
+    </div>
   );
 }

frontend/packages/swarm-ui/src/pages/agents/HivesCard.tsx

@@ -16,7 +16,7 @@
 import { useState } from "preact/hooks";
 import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
 import { Badge, type BadgeTone } from "@hive/shared/badge.js";
-import { Disclosure } from "../../ui/disclosure/Disclosure.js";
+import { LazyDisclosure } from "../../ui/disclosure/LazyDisclosure.js";
 import { RelativeTime } from "../../ui/relative-time/RelativeTime.js";
 import {
   RefreshIntervalPicker,
@@ -25,7 +25,6 @@ import {
 import { fetchJson, usePolled } from "../../ui/polled/usePolled.js";
 import { Table, type TableColumn } from "../../ui/table/Table.js";
 import { domainCell } from "../hive-domain.js";
-import { builtAfterToggle } from "./lazy-open.js";
 
 type Freshness = "fresh" | "stale" | "never_reported" | "unknown";
 
@@ -151,20 +150,13 @@ function HiveRoster() {
 }
 
 export function HivesCard() {
-  const [open, setOpen] = useState(false);
-  const [built, setBuilt] = useState(false);
   return (
-    <Disclosure
+    <LazyDisclosure
       title="hives"
       icon="🐝"
       hint="the swarm's hives and when each last reported"
-      open={open}
-      onToggle={(next) => {
-        setOpen(next);
-        setBuilt((was) => builtAfterToggle(was, next));
-      }}
     >
-      {built ? <HiveRoster /> : null}
-    </Disclosure>
+      <HiveRoster />
+    </LazyDisclosure>
   );
 }

frontend/packages/swarm-ui/src/pages/builds/BuildsPage.css

@@ -54,3 +54,8 @@
 .ui-builds-empty {
   color: var(--muted);
 }
+.ui-builds-refresh {
+  display: flex;
+  justify-content: flex-end;
+  margin-block-end: 0.5em;
+}

frontend/packages/swarm-ui/src/pages/builds/BuildsPage.tsx

@@ -1,14 +1,16 @@
-// <BuildsPage> — the swarm builder's recent builds, newest first: which agent
+// <BuildsCard> — the swarm builder's recent builds, newest first: which agent
 // config PR heads it built, how each ended, and what `nix` printed when one
 // failed. One card per build; selecting a card opens it. Reads
-// `GET /api/builder/runs`. A `swarm-builder` commit status links here as
-// `/builds?run=<id>`, which opens that build's card and scrolls to it.
+// `GET /api/builder/runs`. A `swarm-builder` commit status links to the jobs
+// page as `/jobs?run=<id>`, which opens that build's card and scrolls to it.
+// The card sits under the job graph on that page; the old `/builds` address
+// redirects there with its query.
 import { useEffect, useRef, useState } from "preact/hooks";
 import { useSearch } from "wouter-preact";
 import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
 import { Badge } from "@hive/shared/badge.js";
 import { Card } from "../../ui/card/Card.js";
-import { Panel } from "../../ui/panel/Panel.js";
+import { LazyDisclosure } from "../../ui/disclosure/LazyDisclosure.js";
 import {
   RefreshIntervalPicker,
   type RefreshIntervalMs,
@@ -91,7 +93,7 @@ function BuildCard({
   );
 }
 
-export function BuildsPage() {
+function BuildsBody() {
   const wanted = wantedRun(useSearch());
   const [intervalMs, setIntervalMs] =
     useState<RefreshIntervalMs>(DEFAULT_INTERVAL_MS);
@@ -127,17 +129,14 @@ export function BuildsPage() {
     wanted !== null && runs !== null && !runs.some((r) => r.id === wanted);
 
   return (
-    <Panel
-      title="builds"
-      icon="🔨"
-      actions={
+    <>
+      <div class="ui-builds-refresh">
         <RefreshIntervalPicker
           id="builds-refresh"
           value={intervalMs}
           onChange={setIntervalMs}
         />
-      }
-    >
+      </div>
       <p>
         The agent config PR heads the swarm builder built, newest first: how
         each ended, and what nix printed when one failed. Select a build to read
@@ -168,6 +167,21 @@ export function BuildsPage() {
           />
         ))}
       </div>
-    </Panel>
+    </>
+  );
+}
+
+// Shut by default, and open from the start when the URL names a build: a
+// status link goes straight to that build's card.
+export function BuildsCard() {
+  return (
+    <LazyDisclosure
+      title="builds"
+      icon="🔨"
+      hint="the agent config PRs the swarm builder built"
+      startOpen={wantedRun(useSearch()) !== null}
+    >
+      <BuildsBody />
+    </LazyDisclosure>
   );
 }

frontend/packages/swarm-ui/src/pages/builds/builds-types.ts

@@ -37,6 +37,11 @@ export const OUTCOME_TONE: Record<BuildOutcome, BadgeTone> = {
   error: "warning",
 };
 
+/** Where an old `/builds` link goes: the jobs page, keeping its query. */
+export function jobsHref(search: string): string {
+  return search === "" ? "/jobs" : `/jobs?${search}`;
+}
+
 /** The run a `?run=<id>` query names, or `null` when it names none. */
 export function wantedRun(search: string): string | null {
   const id = new URLSearchParams(search).get("run");

frontend/packages/swarm-ui/src/shell/Shell.tsx

@@ -58,7 +58,6 @@ const NAV_ITEMS: { href: string; label: string; accent: string }[] = [
   { href: "/notifications", label: "notifications", accent: "var(--yellow)" },
   { href: "/issues", label: "issues", accent: "var(--yellow)" },
   { href: "/review", label: "review", accent: "var(--amber)" },
-  { href: "/builds", label: "builds", accent: "var(--green)" },
   { href: "/components", label: "components", accent: "var(--blue)" },
 ];
 

frontend/packages/swarm-ui/src/ui/disclosure/LazyDisclosure.tsx

@@ -0,0 +1,40 @@
+// <LazyDisclosure> — a Disclosure that is shut by default and builds its body
+// on the first open. For a card that polls or fetches: one nobody opens costs
+// nothing, and one that was opened keeps its body, and what it read, after a
+// fold. `startOpen` opens it from the first render, for a link that points
+// into it.
+import { useState } from "preact/hooks";
+import type { ComponentChildren } from "preact";
+import { Disclosure } from "./Disclosure.js";
+import { builtAfterToggle } from "./lazy-open.js";
+
+export function LazyDisclosure({
+  title,
+  icon,
+  hint,
+  startOpen = false,
+  children,
+}: {
+  title: string;
+  icon?: string;
+  hint?: ComponentChildren;
+  startOpen?: boolean;
+  children: ComponentChildren;
+}) {
+  const [open, setOpen] = useState(startOpen);
+  const [built, setBuilt] = useState(startOpen);
+  return (
+    <Disclosure
+      title={title}
+      icon={icon}
+      hint={hint}
+      open={open}
+      onToggle={(next) => {
+        setOpen(next);
+        setBuilt((was) => builtAfterToggle(was, next));
+      }}
+    >
+      {built ? children : null}
+    </Disclosure>
+  );
+}

frontend/packages/swarm-ui/src/ui/disclosure/lazy-open.ts

@@ -0,0 +1,5 @@
+// A folded card builds its body on the first open and keeps it after, so a
+// card nobody opens never fetches, and closing it does not drop what it read.
+export function builtAfterToggle(built: boolean, open: boolean): boolean {
+  return built || open;
+}

frontend/packages/swarm-ui/test/builds-types.test.mjs

@@ -3,7 +3,11 @@
 // stripping, so the `.ts` module is imported as it is.
 import assert from "node:assert/strict";
 import { test } from "node:test";
-import { bodyText, wantedRun } from "../src/pages/builds/builds-types.ts";
+import {
+  bodyText,
+  jobsHref,
+  wantedRun,
+} from "../src/pages/builds/builds-types.ts";
 
 const base = {
   id: "atlas-abc-1",
@@ -49,3 +53,8 @@ test("a run with no text for its outcome shows no body", () => {
   assert.equal(bodyText({ ...base, outcome: "failed" }), null);
   assert.equal(bodyText({ ...base, outcome: "built", error_tail: "x" }), null);
 });
+
+test("an old builds link goes to the jobs page and keeps its query", () => {
+  assert.equal(jobsHref("run=atlas-abc-1"), "/jobs?run=atlas-abc-1");
+  assert.equal(jobsHref(""), "/jobs");
+});

frontend/packages/swarm-ui/test/lazy-open.test.mjs

@@ -1,7 +1,7 @@
 // A folded card fetches nothing until first opened. Run by `npm test`.
 import assert from "node:assert/strict";
 import { test } from "node:test";
-import { builtAfterToggle } from "../src/pages/agents/lazy-open.ts";
+import { builtAfterToggle } from "../src/ui/disclosure/lazy-open.ts";
 
 test("a card nobody opened is not built", () => {
   assert.equal(builtAfterToggle(false, false), false);

swarm-controller/src/builder.rs

@@ -210,7 +210,7 @@ async fn record(
     if !builds.record(&build).await {
         return None;
     }
-    link_base.map(|base| format!("{}/builds?run={}", base.trim_end_matches('/'), build.id))
+    link_base.map(|base| format!("{}/jobs?run={}", base.trim_end_matches('/'), build.id))
 }
 
 /// A failed node carrying `error`, and the status write's own failure when
@@ -349,7 +349,7 @@ mod tests {
         assert_eq!((&build.out_path, &build.detail), (&None, &None));
         assert!(build.id.starts_with("atlas-abc-"), "{}", build.id);
         assert!(build.finished_unix >= build.started_unix);
-        let link = format!("https://swarm.example/builds?run={}", build.id);
+        let link = format!("https://swarm.example/jobs?run={}", build.id);
         assert_eq!(
             written,
             [