From 8a2e5203adacc8c1c56d58725670e56f74a3030e Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Fri, 6 Nov 2026 17:54:24 +0100
Subject: [PATCH] swarm-ui: shared Hint, ActionRow, Toolbar, EmptyState,
 ExternalLink and ExpandableCard replace per-page copies

Hint, ActionRow, Toolbar, EmptyState and ExternalLink replace the muted
text, button row, refresh bar, empty line and _blank anchor that each page
restyled under its own class. ExpandableCard (with a loading twin) holds the
builds and recent-runs cards, which had identical head and body CSS. The
create form's raw checkbox becomes CheckboxField. The components page shows
each new piece.
---
 docs/swarm/ui.md                              |   6 +-
 .../agent/claude-login/ClaudeLoginDialog.css  |   3 +-
 .../agent/claude-login/ClaudeLoginDialog.tsx  |  10 +-
 .../swarm-ui/src/agent/detail/AgentDetail.css |   5 -
 .../swarm-ui/src/agent/detail/AgentDetail.tsx |  25 ++--
 .../src/agent/detail/AgentInference.css       |  12 +-
 .../src/agent/detail/AgentInference.tsx       |  10 +-
 .../src/agent/detail/AgentInstructions.css    |   6 -
 .../src/agent/detail/AgentInstructions.tsx    |  13 +-
 .../swarm-ui/src/agent/detail/AgentLimits.css |   6 -
 .../swarm-ui/src/agent/detail/AgentLimits.tsx |  14 ++-
 .../src/agent/detail/AgentPermissions.tsx     |   7 +-
 .../src/agent/detail/AllowedDomains.tsx       |   5 +-
 .../src/agent/detail/LinkedAccounts.css       |   3 +-
 .../src/agent/detail/LinkedAccounts.tsx       |   5 +-
 .../swarm-ui/src/pages/AlertsPage.tsx         |  10 +-
 .../swarm-ui/src/pages/ComponentsPage.tsx     |  67 +++++++++++
 .../swarm-ui/src/pages/CreateAgentForm.css    |   9 --
 .../swarm-ui/src/pages/CreateAgentForm.tsx    |  28 +++--
 .../swarm-ui/src/pages/IssueReportPage.tsx    |   5 +-
 .../packages/swarm-ui/src/pages/JobsPage.css  |   5 -
 .../packages/swarm-ui/src/pages/JobsPage.tsx  |   5 +-
 .../swarm-ui/src/pages/LinkBackendEnvForm.tsx |   5 +-
 .../src/pages/LinkForgeAccountForm.tsx        |   5 +-
 .../src/pages/LinkGithubAccountForm.tsx       |  14 +--
 .../src/pages/LinkMatrixAccountForm.css       |   3 +-
 .../src/pages/LinkMatrixAccountForm.tsx       |   5 +-
 .../src/pages/broadcast/BroadcastComposer.css |   7 --
 .../src/pages/broadcast/BroadcastComposer.tsx |  10 +-
 .../swarm-ui/src/pages/builds/BuildsPage.css  |  42 +------
 .../swarm-ui/src/pages/builds/BuildsPage.tsx  | 105 ++++++++--------
 .../src/pages/messages/MessagesPage.css       |   2 -
 .../src/pages/messages/MessagesPage.tsx       |   9 +-
 .../src/pages/notifications/Deliveries.tsx    |   3 +-
 .../src/pages/notifications/FlowCanvas.tsx    |   5 +-
 .../pages/notifications/FlowEditorPage.tsx    |  10 +-
 .../src/pages/notifications/NodeInspector.tsx |  14 ++-
 .../pages/notifications/NotificationsPage.css |   8 --
 .../pages/notifications/NotificationsPage.tsx |  13 +-
 .../src/pages/reports/ReportsPage.css         |  10 --
 .../src/pages/review-runs/ReviewRuns.css      |  42 +------
 .../src/pages/review-runs/ReviewRuns.tsx      |  82 +++++++------
 .../review-settings/ClassifierSettings.css    |  10 --
 .../review-settings/ClassifierSettings.tsx    |  14 +--
 .../src/pages/review-tryout/ReviewTryOut.css  |   6 -
 .../src/pages/review-tryout/ReviewTryOut.tsx  |  10 +-
 .../src/pages/review-tryout/TryOutResult.css  |   3 -
 .../src/pages/review-tryout/TryOutResult.tsx  |   9 +-
 .../src/pages/schedules/ScheduleCard.css      |   3 -
 .../src/pages/schedules/ScheduleCard.tsx      |   5 +-
 .../src/pages/schedules/ScheduleForm.css      |   6 -
 .../src/pages/schedules/ScheduleForm.tsx      |  22 ++--
 .../src/pages/schedules/SchedulesPage.tsx     |   6 +-
 .../swarm-ui/src/pages/swarm/EgressCard.tsx   |   7 +-
 .../swarm-ui/src/pages/swarm/HivesCard.tsx    |  14 +--
 .../swarm-ui/src/pages/swarm/SwarmPage.css    |   7 --
 .../swarm-ui/src/ui/action-row/ActionRow.css  |   9 ++
 .../swarm-ui/src/ui/action-row/ActionRow.tsx  |  24 ++++
 .../swarm-ui/src/ui/button/Button.css         |   9 ++
 .../swarm-ui/src/ui/button/Button.tsx         |   2 +-
 .../src/ui/empty-state/EmptyState.css         |   8 ++
 .../src/ui/empty-state/EmptyState.tsx         |  19 +++
 .../src/ui/expandable-card/ExpandableCard.css |  43 +++++++
 .../src/ui/expandable-card/ExpandableCard.tsx | 112 ++++++++++++++++++
 .../src/ui/external-link/ExternalLink.tsx     |  28 +++++
 .../packages/swarm-ui/src/ui/hint/Hint.css    |  17 +++
 .../packages/swarm-ui/src/ui/hint/Hint.tsx    |  39 ++++++
 .../toolbar/Toolbar.css}                      |   7 +-
 .../swarm-ui/src/ui/toolbar/Toolbar.tsx       |  24 ++++
 69 files changed, 689 insertions(+), 427 deletions(-)
 create mode 100644 frontend/packages/swarm-ui/src/ui/action-row/ActionRow.css
 create mode 100644 frontend/packages/swarm-ui/src/ui/action-row/ActionRow.tsx
 create mode 100644 frontend/packages/swarm-ui/src/ui/empty-state/EmptyState.css
 create mode 100644 frontend/packages/swarm-ui/src/ui/empty-state/EmptyState.tsx
 create mode 100644 frontend/packages/swarm-ui/src/ui/expandable-card/ExpandableCard.css
 create mode 100644 frontend/packages/swarm-ui/src/ui/expandable-card/ExpandableCard.tsx
 create mode 100644 frontend/packages/swarm-ui/src/ui/external-link/ExternalLink.tsx
 create mode 100644 frontend/packages/swarm-ui/src/ui/hint/Hint.css
 create mode 100644 frontend/packages/swarm-ui/src/ui/hint/Hint.tsx
 rename frontend/packages/swarm-ui/src/{pages/schedules/SchedulesPage.css => ui/toolbar/Toolbar.css} (52%)
 create mode 100644 frontend/packages/swarm-ui/src/ui/toolbar/Toolbar.tsx

diff --git a/docs/swarm/ui.md b/docs/swarm/ui.md
index 990bd90b..1306888f 100644
--- a/docs/swarm/ui.md
+++ b/docs/swarm/ui.md
@@ -221,7 +221,8 @@ commit, whether the run was a try-out or a requested review, how long ago it
 started, how long it took, how many classifications ran, and the outcome as a
 badge. Select a card to open it: it shows the same result table as the
 [try-out](#review-try-out), the overall verdict, the reason when the outcome
-has one, and a link to the posted review when there is one.
+has one, and a link to the posted review when there is one. While the first
+answer loads, the section shows three grey placeholder cards.
 
 An outcome can be more than approve or request changes:
 
@@ -589,7 +590,8 @@ config PR). Each card shows the repo and PR, or for a deploy's build the agent
 and `internal/meta`, 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.
+closure; for an error, why no build came back. While the first answer loads, the
+card shows three grey placeholder cards.
 
 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
diff --git a/frontend/packages/swarm-ui/src/agent/claude-login/ClaudeLoginDialog.css b/frontend/packages/swarm-ui/src/agent/claude-login/ClaudeLoginDialog.css
index d8b07af4..40060f64 100644
--- a/frontend/packages/swarm-ui/src/agent/claude-login/ClaudeLoginDialog.css
+++ b/frontend/packages/swarm-ui/src/agent/claude-login/ClaudeLoginDialog.css
@@ -8,6 +8,5 @@
   margin-top: 1em;
 }
 .claude-login-ok {
-  margin-top: 1em;
-  color: var(--green);
+  margin-block: 1em;
 }
diff --git a/frontend/packages/swarm-ui/src/agent/claude-login/ClaudeLoginDialog.tsx b/frontend/packages/swarm-ui/src/agent/claude-login/ClaudeLoginDialog.tsx
index 135bad83..3ce0167a 100644
--- a/frontend/packages/swarm-ui/src/agent/claude-login/ClaudeLoginDialog.tsx
+++ b/frontend/packages/swarm-ui/src/agent/claude-login/ClaudeLoginDialog.tsx
@@ -11,6 +11,8 @@ import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
 import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
 import { Button } from "../../ui/button/Button.js";
 import { Dialog } from "../../ui/dialog/Dialog.js";
+import { ExternalLink } from "../../ui/external-link/ExternalLink.js";
+import { Hint } from "../../ui/hint/Hint.js";
 import { Panel } from "../../ui/panel/Panel.js";
 import { TextField } from "../../ui/text-field/TextField.js";
 import {
@@ -98,9 +100,7 @@ export function ClaudeLoginDialog({
           <>
             <p>
               Open{" "}
-              <a href={step.url} target="_blank" rel="noopener noreferrer">
-                the claude login page
-              </a>
+              <ExternalLink href={step.url}>the claude login page</ExternalLink>
               , sign in with this agent's account, and paste the code it shows.
             </p>
             <form class="claude-login-form" onSubmit={submit}>
@@ -122,10 +122,10 @@ export function ClaudeLoginDialog({
           </>
         )}
         {step.step === "stored" && (
-          <p class="claude-login-ok">
+          <Hint tone="ok" class="claude-login-ok">
             Stored. <strong>{agent}</strong> picks the login up within a minute
             and resumes.
-          </p>
+          </Hint>
         )}
         {step.step === "failed" && (
           <ApiErrorPanel
diff --git a/frontend/packages/swarm-ui/src/agent/detail/AgentDetail.css b/frontend/packages/swarm-ui/src/agent/detail/AgentDetail.css
index 0fb4be5d..d27236dd 100644
--- a/frontend/packages/swarm-ui/src/agent/detail/AgentDetail.css
+++ b/frontend/packages/swarm-ui/src/agent/detail/AgentDetail.css
@@ -17,11 +17,6 @@
   flex-wrap: wrap;
   gap: 0.4em 1em;
 }
-.ui-agent-detail-actions {
-  display: flex;
-  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. */
diff --git a/frontend/packages/swarm-ui/src/agent/detail/AgentDetail.tsx b/frontend/packages/swarm-ui/src/agent/detail/AgentDetail.tsx
index 04b809cf..fdaafe0d 100644
--- a/frontend/packages/swarm-ui/src/agent/detail/AgentDetail.tsx
+++ b/frontend/packages/swarm-ui/src/agent/detail/AgentDetail.tsx
@@ -11,7 +11,10 @@
 // change or a link made here shows wherever else the same row is drawn.
 import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
 import { Badge } from "@hive/shared/badge.js";
+import { ActionRow } from "../../ui/action-row/ActionRow.js";
 import { Button } from "../../ui/button/Button.js";
+import { ExternalLink } from "../../ui/external-link/ExternalLink.js";
+import { Hint } from "../../ui/hint/Hint.js";
 import { RelativeTime } from "../../ui/relative-time/RelativeTime.js";
 import type { AgentActions } from "../roster/AgentActions.js";
 import { AgentInference } from "./AgentInference.js";
@@ -118,12 +121,10 @@ function OverviewRows({
         <>
           <dt>forge</dt>
           <dd class="ui-agent-detail-links">
-            <a href={forgeLinks.profile} target="_blank" rel="noreferrer">
-              profile
-            </a>
-            <a href={forgeLinks.configRepo} target="_blank" rel="noreferrer">
+            <ExternalLink href={forgeLinks.profile}>profile</ExternalLink>
+            <ExternalLink href={forgeLinks.configRepo}>
               config repo
-            </a>
+            </ExternalLink>
           </dd>
         </>
       ) : null}
@@ -134,13 +135,9 @@ function OverviewRows({
             tone="warning"
             value={
               row.config_pr.html_url ? (
-                <a
-                  href={row.config_pr.html_url}
-                  target="_blank"
-                  rel="noreferrer"
-                >
+                <ExternalLink href={row.config_pr.html_url}>
                   #{row.config_pr.pr_number}
-                </a>
+                </ExternalLink>
               ) : (
                 `#${row.config_pr.pr_number}`
               )
@@ -211,7 +208,7 @@ function GrantRows({ agent }: { agent: string }) {
       <dt>permissions</dt>
       <dd>
         {g.grant === null ? (
-          <span class="ui-agent-limits-muted">—</span>
+          <Hint as="span">—</Hint>
         ) : (
           <>
             {g.readFailure}
@@ -257,13 +254,13 @@ function LinkAccountAction({
   actions: AgentActions;
 }) {
   return (
-    <div class="ui-agent-detail-actions">
+    <ActionRow class="ui-agent-detail-actions">
       <LinkAccountMenu
         agent={row.name}
         hasHive={row.hive !== null}
         onSelect={(kind) => actions.openLink(row, kind)}
       />
-    </div>
+    </ActionRow>
   );
 }
 
diff --git a/frontend/packages/swarm-ui/src/agent/detail/AgentInference.css b/frontend/packages/swarm-ui/src/agent/detail/AgentInference.css
index 90c18e91..3b7490b8 100644
--- a/frontend/packages/swarm-ui/src/agent/detail/AgentInference.css
+++ b/frontend/packages/swarm-ui/src/agent/detail/AgentInference.css
@@ -17,8 +17,7 @@
 .ui-agent-inference-source {
   margin-left: -0.25em;
 }
-.ui-agent-inference-source,
-.ui-agent-inference-muted {
+.ui-agent-inference-source {
   color: var(--muted);
 }
 .ui-agent-inference-form {
@@ -28,12 +27,3 @@
   gap: 0.75em;
   margin-top: 1em;
 }
-.ui-agent-inference-problem {
-  margin: 0;
-  color: var(--red);
-}
-.ui-agent-inference-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.75em;
-}
diff --git a/frontend/packages/swarm-ui/src/agent/detail/AgentInference.tsx b/frontend/packages/swarm-ui/src/agent/detail/AgentInference.tsx
index e1ff907c..063b2603 100644
--- a/frontend/packages/swarm-ui/src/agent/detail/AgentInference.tsx
+++ b/frontend/packages/swarm-ui/src/agent/detail/AgentInference.tsx
@@ -15,7 +15,9 @@ import { useEffect, useState } from "preact/hooks";
 import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
 import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
 import { Badge } from "@hive/shared/badge.js";
+import { ActionRow } from "../../ui/action-row/ActionRow.js";
 import { Dialog } from "../../ui/dialog/Dialog.js";
+import { Hint } from "../../ui/hint/Hint.js";
 import { Panel } from "../../ui/panel/Panel.js";
 import { SelectField } from "../../ui/select-field/SelectField.js";
 import { TextField } from "../../ui/text-field/TextField.js";
@@ -171,7 +173,7 @@ export function InferenceFields({
         pattern="[0-9]*"
         onInput={(maxSubagents) => onChange({ ...draft, maxSubagents })}
       />
-      {problem ? <p class="ui-agent-inference-problem">{problem}</p> : null}
+      {problem ? <Hint tone="error">{problem}</Hint> : null}
     </>
   );
 }
@@ -215,7 +217,7 @@ export function AgentInference({ agent }: { agent: string }) {
     />
   ) : null;
   if (view === null) {
-    return errorPanel ?? <span class="ui-agent-inference-muted">…</span>;
+    return errorPanel ?? <Hint as="span">…</Hint>;
   }
 
   const { configured, effective } = view;
@@ -368,7 +370,7 @@ function InferenceForm({
         {problem ? (
           <ApiErrorPanel context="saving failed" problem={problem} />
         ) : null}
-        <div class="ui-agent-inference-actions">
+        <ActionRow>
           <Button
             variant="primary"
             type="submit"
@@ -382,7 +384,7 @@ function InferenceForm({
           >
             clear the swarm's setting
           </Button>
-        </div>
+        </ActionRow>
       </form>
     </Panel>
   );
diff --git a/frontend/packages/swarm-ui/src/agent/detail/AgentInstructions.css b/frontend/packages/swarm-ui/src/agent/detail/AgentInstructions.css
index 01ae1d16..5e6ed150 100644
--- a/frontend/packages/swarm-ui/src/agent/detail/AgentInstructions.css
+++ b/frontend/packages/swarm-ui/src/agent/detail/AgentInstructions.css
@@ -38,9 +38,3 @@
   border: 1px solid var(--red);
   border-radius: 4px;
 }
-.ui-agent-instructions-actions {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.75em;
-}
diff --git a/frontend/packages/swarm-ui/src/agent/detail/AgentInstructions.tsx b/frontend/packages/swarm-ui/src/agent/detail/AgentInstructions.tsx
index 4ca6cd80..e8577d14 100644
--- a/frontend/packages/swarm-ui/src/agent/detail/AgentInstructions.tsx
+++ b/frontend/packages/swarm-ui/src/agent/detail/AgentInstructions.tsx
@@ -16,6 +16,7 @@ import { useEffect, useRef, useState } from "preact/hooks";
 import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
 import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
 import { Badge } from "@hive/shared/badge.js";
+import { ActionRow } from "../../ui/action-row/ActionRow.js";
 import { Button } from "../../ui/button/Button.js";
 import { Dialog } from "../../ui/dialog/Dialog.js";
 import { Panel } from "../../ui/panel/Panel.js";
@@ -235,9 +236,9 @@ function InstructionsForm({
               context="loading AGENTS.md failed"
               problem={load.problem}
             />
-            <div class="ui-agent-instructions-actions">
+            <ActionRow class="ui-agent-instructions-actions">
               <Button onClick={reload}>try again</Button>
-            </div>
+            </ActionRow>
           </>
         ) : null}
         {load.status === "ready" ? (
@@ -263,18 +264,18 @@ function InstructionsForm({
                 <pre class="ui-agent-instructions-theirs" tabIndex={0}>
                   {theirs.content === "" ? "(empty)" : theirs.content}
                 </pre>
-                <div class="ui-agent-instructions-actions">
+                <ActionRow class="ui-agent-instructions-actions">
                   <Button onClick={keepMine}>
                     keep my text, replace {agent}'s changes
                   </Button>
                   <Button onClick={takeTheirs}>use {agent}'s version</Button>
-                </div>
+                </ActionRow>
               </section>
             ) : null}
             {problem ? (
               <ApiErrorPanel context="saving failed" problem={problem} />
             ) : null}
-            <div class="ui-agent-instructions-actions">
+            <ActionRow class="ui-agent-instructions-actions">
               <Button
                 variant="primary"
                 type="submit"
@@ -305,7 +306,7 @@ function InstructionsForm({
               >
                 reload from {agent}
               </Button>
-            </div>
+            </ActionRow>
           </form>
         ) : null}
       </div>
diff --git a/frontend/packages/swarm-ui/src/agent/detail/AgentLimits.css b/frontend/packages/swarm-ui/src/agent/detail/AgentLimits.css
index bbebf0fd..6297ef5f 100644
--- a/frontend/packages/swarm-ui/src/agent/detail/AgentLimits.css
+++ b/frontend/packages/swarm-ui/src/agent/detail/AgentLimits.css
@@ -23,10 +23,4 @@
 }
 .ui-agent-limits-hint {
   margin: 0 0 0.5em;
-  color: var(--muted);
-}
-.ui-agent-limits-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.75em;
 }
diff --git a/frontend/packages/swarm-ui/src/agent/detail/AgentLimits.tsx b/frontend/packages/swarm-ui/src/agent/detail/AgentLimits.tsx
index 7353208a..917501be 100644
--- a/frontend/packages/swarm-ui/src/agent/detail/AgentLimits.tsx
+++ b/frontend/packages/swarm-ui/src/agent/detail/AgentLimits.tsx
@@ -16,8 +16,10 @@ import { useEffect, useState } from "preact/hooks";
 import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
 import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
 import { Badge } from "@hive/shared/badge.js";
+import { ActionRow } from "../../ui/action-row/ActionRow.js";
 import { Button } from "../../ui/button/Button.js";
 import { Dialog } from "../../ui/dialog/Dialog.js";
+import { Hint } from "../../ui/hint/Hint.js";
 import { Panel } from "../../ui/panel/Panel.js";
 import { TextField } from "../../ui/text-field/TextField.js";
 import { BadgeSkeleton } from "../../ui/skeleton/BadgeSkeleton.js";
@@ -71,9 +73,9 @@ export function LimitsFields({
         placeholder="e.g. 400%"
         onInput={onCpu}
       />
-      <p class="ui-agent-limits-hint">
+      <Hint class="ui-agent-limits-hint">
         A percentage of one core: 100% is one core, 400% is four.
-      </p>
+      </Hint>
       <TextField
         id={`${idPrefix}-memory-max`}
         label="memory max"
@@ -81,10 +83,10 @@ export function LimitsFields({
         placeholder="e.g. 8G"
         onInput={onMemory}
       />
-      <p class="ui-agent-limits-hint">
+      <Hint class="ui-agent-limits-hint">
         A size such as 512M or 8G, a percentage of the machine's memory such as
         50%, or infinity.
-      </p>
+      </Hint>
     </>
   );
 }
@@ -239,7 +241,7 @@ function LimitsForm({
         {problem ? (
           <ApiErrorPanel context="the caps were not saved" problem={problem} />
         ) : null}
-        <div class="ui-agent-limits-actions">
+        <ActionRow>
           <Button variant="primary" type="submit" disabled={busy || empty}>
             {busy ? "saving…" : "save"}
           </Button>
@@ -249,7 +251,7 @@ function LimitsForm({
           >
             clear the swarm's caps
           </Button>
-        </div>
+        </ActionRow>
       </form>
     </Panel>
   );
diff --git a/frontend/packages/swarm-ui/src/agent/detail/AgentPermissions.tsx b/frontend/packages/swarm-ui/src/agent/detail/AgentPermissions.tsx
index 913b6c4d..571571eb 100644
--- a/frontend/packages/swarm-ui/src/agent/detail/AgentPermissions.tsx
+++ b/frontend/packages/swarm-ui/src/agent/detail/AgentPermissions.tsx
@@ -22,6 +22,7 @@ import { Badge } from "@hive/shared/badge.js";
 import { BadgePopover } from "../../ui/badge-popover/BadgePopover.js";
 import { Button } from "../../ui/button/Button.js";
 import { BadgeSkeleton } from "../../ui/skeleton/BadgeSkeleton.js";
+import { Hint } from "../../ui/hint/Hint.js";
 import { MultiselectFilterOptions } from "../../ui/multiselect-filter/MultiselectFilter.js";
 import {
   requestPermissions,
@@ -225,9 +226,9 @@ export function AgentPermissions({
             />
           </div>
         ) : (
-          <span class="ui-agent-limits-muted" role="status">
+          <Hint as="span" role="status">
             {catalogueError ? "could not load the permissions" : "loading…"}
-          </span>
+          </Hint>
         )}
         {saveError ? (
           <ApiErrorPanel
@@ -287,7 +288,7 @@ export function AgentInternet({ agent, g }: { agent: string; g: GrantState }) {
                         })
                 }
               />{" "}
-              <span class="ui-agent-limits-muted">{meaning}</span>
+              <Hint as="span">{meaning}</Hint>
             </li>
           ))}
         </ul>
diff --git a/frontend/packages/swarm-ui/src/agent/detail/AllowedDomains.tsx b/frontend/packages/swarm-ui/src/agent/detail/AllowedDomains.tsx
index 35906aa6..9a14767e 100644
--- a/frontend/packages/swarm-ui/src/agent/detail/AllowedDomains.tsx
+++ b/frontend/packages/swarm-ui/src/agent/detail/AllowedDomains.tsx
@@ -24,6 +24,7 @@ import { useState } from "preact/hooks";
 import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
 import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
 import { Badge } from "@hive/shared/badge.js";
+import { ActionRow } from "../../ui/action-row/ActionRow.js";
 import { BadgePopover } from "../../ui/badge-popover/BadgePopover.js";
 import { Button } from "../../ui/button/Button.js";
 import { CheckboxField } from "../../ui/checkbox-field/CheckboxField.js";
@@ -232,7 +233,7 @@ export function AddForm({
         {problem ? (
           <ApiErrorPanel context="the domain was not added" problem={problem} />
         ) : null}
-        <div class="ui-agent-limits-actions">
+        <ActionRow>
           <Button
             variant="primary"
             type="submit"
@@ -240,7 +241,7 @@ export function AddForm({
           >
             {busy ? "adding…" : "add"}
           </Button>
-        </div>
+        </ActionRow>
       </form>
     </Panel>
   );
diff --git a/frontend/packages/swarm-ui/src/agent/detail/LinkedAccounts.css b/frontend/packages/swarm-ui/src/agent/detail/LinkedAccounts.css
index 11184c64..5d4d8761 100644
--- a/frontend/packages/swarm-ui/src/agent/detail/LinkedAccounts.css
+++ b/frontend/packages/swarm-ui/src/agent/detail/LinkedAccounts.css
@@ -12,7 +12,6 @@
   gap: 0.5em;
   flex-wrap: wrap;
 }
-.ui-linked-accounts-host,
-.ui-linked-accounts-muted {
+.ui-linked-accounts-host {
   color: var(--muted);
 }
diff --git a/frontend/packages/swarm-ui/src/agent/detail/LinkedAccounts.tsx b/frontend/packages/swarm-ui/src/agent/detail/LinkedAccounts.tsx
index 6d627fee..eadd22ca 100644
--- a/frontend/packages/swarm-ui/src/agent/detail/LinkedAccounts.tsx
+++ b/frontend/packages/swarm-ui/src/agent/detail/LinkedAccounts.tsx
@@ -15,6 +15,7 @@ import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
 import { Badge } from "@hive/shared/badge.js";
 import { CheckboxField } from "../../ui/checkbox-field/CheckboxField.js";
 import { ConfirmDialog } from "../../ui/confirm-dialog/ConfirmDialog.js";
+import { Hint } from "../../ui/hint/Hint.js";
 import { accountKindLabel } from "./account-kind.js";
 import { deleteUrl, listUrl } from "./account-api.js";
 import "./LinkedAccounts.css";
@@ -145,13 +146,13 @@ export function LinkedAccounts({
     <ApiErrorPanel context="listing linked accounts failed" problem={error} />
   ) : null;
   if (accounts === null) {
-    return errorPanel ?? <span class="ui-linked-accounts-muted">…</span>;
+    return errorPanel ?? <Hint as="span">…</Hint>;
   }
   if (accounts.length === 0) {
     return (
       <>
         {errorPanel}
-        <span class="ui-linked-accounts-muted">none linked</span>
+        <Hint as="span">none linked</Hint>
       </>
     );
   }
diff --git a/frontend/packages/swarm-ui/src/pages/AlertsPage.tsx b/frontend/packages/swarm-ui/src/pages/AlertsPage.tsx
index 31bba464..b64ed3a6 100644
--- a/frontend/packages/swarm-ui/src/pages/AlertsPage.tsx
+++ b/frontend/packages/swarm-ui/src/pages/AlertsPage.tsx
@@ -7,6 +7,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 { Button } from "../ui/button/Button.js";
+import { ExternalLink } from "../ui/external-link/ExternalLink.js";
 import { LazyDisclosure } from "../ui/disclosure/LazyDisclosure.js";
 import { RelativeTime } from "../ui/relative-time/RelativeTime.js";
 import {
@@ -16,6 +17,7 @@ import {
 import { fetchJson, usePolled } from "../ui/polled/usePolled.js";
 import { Table, type TableColumn } from "../ui/table/Table.js";
 import { TableSkeleton } from "../ui/table/TableSkeleton.js";
+import { Toolbar } from "../ui/toolbar/Toolbar.js";
 import { activeSinceMs, alertKey, listedAlerts, type Alert } from "./alerts.js";
 
 const STATE_TONE: Record<string, BadgeTone> = {
@@ -90,10 +92,10 @@ function AlertsBody() {
 
   return (
     <>
-      <div class="ui-alerts-bar">
-        <a href={GRAFANA_ALERTS_URL} target="_blank" rel="noopener noreferrer">
+      <Toolbar>
+        <ExternalLink href={GRAFANA_ALERTS_URL}>
           Grafana's alert list
-        </a>
+        </ExternalLink>
         {showAll || hidden > 0 ? (
           <Button onClick={() => setShowAll(!showAll)}>
             {showAll ? "only firing" : `show ${hidden} more`}
@@ -105,7 +107,7 @@ function AlertsBody() {
           onChange={setIntervalMs}
           refreshing={refreshing}
         />
-      </div>
+      </Toolbar>
       {error ? (
         <ApiErrorPanel
           context="failed to load Grafana's alerts"
diff --git a/frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx b/frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx
index 872c66bd..b5820d63 100644
--- a/frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx
+++ b/frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx
@@ -34,6 +34,15 @@ import {
 import { CheckboxField } from "../ui/checkbox-field/CheckboxField.js";
 import { Button, type ButtonVariant } from "../ui/button/Button.js";
 import { Dialog } from "../ui/dialog/Dialog.js";
+import { ActionRow } from "../ui/action-row/ActionRow.js";
+import { EmptyState } from "../ui/empty-state/EmptyState.js";
+import {
+  ExpandableCard,
+  ExpandableCardSkeleton,
+} from "../ui/expandable-card/ExpandableCard.js";
+import { ExternalLink } from "../ui/external-link/ExternalLink.js";
+import { Hint, type HintTone } from "../ui/hint/Hint.js";
+import { Toolbar } from "../ui/toolbar/Toolbar.js";
 import { ConfirmDialog } from "../ui/confirm-dialog/ConfirmDialog.js";
 import { Popover } from "../ui/popover/Popover.js";
 import { Badge, type BadgeTone } from "@hive/shared/badge.js";
@@ -41,6 +50,8 @@ import { GearIcon } from "@hive/shared/icons.js";
 import { Dropdown, type DropdownOption } from "@hive/shared/dropdown.js";
 import "./ComponentsPage.css";
 
+const HINT_TONES: HintTone[] = ["muted", "warn", "error", "ok"];
+
 function Section({
   title,
   children,
@@ -590,6 +601,62 @@ export function ComponentsPage() {
         </div>
       </Section>
 
+      <Section title="Hint">
+        <div class="components-chip-row">
+          {HINT_TONES.map((tone) => (
+            <Sample key={tone} label={tone}>
+              <Hint tone={tone}>A line of supporting text.</Hint>
+            </Sample>
+          ))}
+        </div>
+      </Section>
+
+      <Section title="ActionRow, Toolbar, EmptyState, ExternalLink">
+        <Sample label="ActionRow: the buttons that end a form">
+          <ActionRow>
+            <Button variant="primary">save</Button>
+            <Button>cancel</Button>
+          </ActionRow>
+        </Sample>
+        <Sample label="Toolbar: the bar above a list">
+          <Toolbar>
+            <Button>refresh</Button>
+          </Toolbar>
+        </Sample>
+        <Sample label="EmptyState">
+          <EmptyState>Nothing here yet.</EmptyState>
+        </Sample>
+        <Sample label="ExternalLink">
+          <ExternalLink href="https://example.com">example.com</ExternalLink>
+        </Sample>
+      </Section>
+
+      <Section title="ExpandableCard">
+        <Sample label="closed, open, and the loading twin">
+          <ExpandableCard
+            id="components-expandable-closed"
+            open={false}
+            onToggle={() => {}}
+            title="build 1"
+            badge={<Badge value="ok" />}
+            meta="2 minutes ago"
+          >
+            body
+          </ExpandableCard>
+          <ExpandableCard
+            id="components-expandable-open"
+            open
+            onToggle={() => {}}
+            title="build 2"
+            badge={<Badge value="failed" />}
+            meta="an hour ago"
+          >
+            <Hint>The body appears while the card is open.</Hint>
+          </ExpandableCard>
+          <ExpandableCardSkeleton />
+        </Sample>
+      </Section>
+
       <Section title="Dialog">
         <Sample label="modal, caller-owned content">
           <DialogSample />
diff --git a/frontend/packages/swarm-ui/src/pages/CreateAgentForm.css b/frontend/packages/swarm-ui/src/pages/CreateAgentForm.css
index 41f104d1..98e60cb5 100644
--- a/frontend/packages/swarm-ui/src/pages/CreateAgentForm.css
+++ b/frontend/packages/swarm-ui/src/pages/CreateAgentForm.css
@@ -94,7 +94,6 @@
   flex: 1 1 auto;
   min-width: 0;
   margin-left: 0.25em;
-  color: var(--muted);
   font-size: 0.9em;
 }
 .create-agent-summary {
@@ -118,14 +117,6 @@
   margin: 0;
   overflow-wrap: anywhere;
 }
-.create-agent-result-ok {
-  color: var(--green);
-}
-/* The controller's refusal of the AGENTS.md text, under its box. */
-.create-agent-field-error {
-  margin: 0;
-  color: var(--red);
-}
 /* The picked archetype's description, under its select. */
 .create-agent-archetype-description {
   margin: 0;
diff --git a/frontend/packages/swarm-ui/src/pages/CreateAgentForm.tsx b/frontend/packages/swarm-ui/src/pages/CreateAgentForm.tsx
index 7a30d287..6e400bed 100644
--- a/frontend/packages/swarm-ui/src/pages/CreateAgentForm.tsx
+++ b/frontend/packages/swarm-ui/src/pages/CreateAgentForm.tsx
@@ -45,7 +45,9 @@ import {
   InferenceFields,
   type InferenceDraft,
 } from "../agent/detail/AgentInference.js";
+import { CheckboxField } from "../ui/checkbox-field/CheckboxField.js";
 import { FormField } from "../ui/form-field/FormField.js";
+import { Hint } from "../ui/hint/Hint.js";
 import { MultiselectFilterOptions } from "../ui/multiselect-filter/MultiselectFilter.js";
 import {
   initialSelection,
@@ -325,12 +327,12 @@ export function CreateAgentForm({
             />
           )}
           {done && (
-            <div class="create-agent-result create-agent-result-ok">
+            <Hint tone="ok" as="div" class="create-agent-result">
               <p>
                 Queued as job node #{result.nodeId} —{" "}
                 <Link href="/jobs">watch it in jobs</Link>.
               </p>
-            </div>
+            </Hint>
           )}
           {!done && step === "identity" && (
             <div class="create-agent-fields">
@@ -409,7 +411,9 @@ export function CreateAgentForm({
                 onInput={setAgentsMd}
               />
               {refusal !== null && (
-                <p class="create-agent-field-error">{refusal}</p>
+                <Hint tone="error" class="create-agent-field-error">
+                  {refusal}
+                </Hint>
               )}
             </div>
           )}
@@ -438,14 +442,12 @@ export function CreateAgentForm({
                   )}
                 </div>
               </FormField>
-              <label>
-                <input
-                  type="checkbox"
-                  checked={internet}
-                  onChange={() => setInternet((v) => !v)}
-                />{" "}
-                Unrestricted internet
-              </label>
+              <CheckboxField
+                id="create-agent-internet"
+                label="Unrestricted internet"
+                checked={internet}
+                onChange={setInternet}
+              />
             </div>
           )}
           {!done && step === "resources" && (
@@ -531,9 +533,9 @@ export function CreateAgentForm({
                 back
               </Button>
               {problem !== null && (step !== "identity" || name !== "") && (
-                <span class="create-agent-hint" role="status">
+                <Hint as="span" role="status" class="create-agent-hint">
                   {problem}
-                </span>
+                </Hint>
               )}
               {step === "summary" ? (
                 <Button
diff --git a/frontend/packages/swarm-ui/src/pages/IssueReportPage.tsx b/frontend/packages/swarm-ui/src/pages/IssueReportPage.tsx
index 614ebae2..85fbeddb 100644
--- a/frontend/packages/swarm-ui/src/pages/IssueReportPage.tsx
+++ b/frontend/packages/swarm-ui/src/pages/IssueReportPage.tsx
@@ -32,6 +32,7 @@ import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
 import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
 import { Badge } from "@hive/shared/badge.js";
 import { useLocalSetting } from "@hive/shared/settings-storage.js";
+import { ExternalLink } from "../ui/external-link/ExternalLink.js";
 import { LazyDisclosure } from "../ui/disclosure/LazyDisclosure.js";
 import { CheckboxField } from "../ui/checkbox-field/CheckboxField.js";
 import { SelectField } from "../ui/select-field/SelectField.js";
@@ -268,9 +269,7 @@ function IssueReportBody() {
       ariaSort: ariaSortFor("number"),
       render: (r) =>
         r.html_url ? (
-          <a href={r.html_url} target="_blank" rel="noreferrer">
-            #{r.number}
-          </a>
+          <ExternalLink href={r.html_url}>#{r.number}</ExternalLink>
         ) : (
           `#${r.number}`
         ),
diff --git a/frontend/packages/swarm-ui/src/pages/JobsPage.css b/frontend/packages/swarm-ui/src/pages/JobsPage.css
index 855771f7..09d650de 100644
--- a/frontend/packages/swarm-ui/src/pages/JobsPage.css
+++ b/frontend/packages/swarm-ui/src/pages/JobsPage.css
@@ -14,8 +14,3 @@
   flex-direction: column;
   gap: 1em;
 }
-.ui-jobs-refresh {
-  display: flex;
-  justify-content: flex-end;
-  margin-block-end: 0.5em;
-}
diff --git a/frontend/packages/swarm-ui/src/pages/JobsPage.tsx b/frontend/packages/swarm-ui/src/pages/JobsPage.tsx
index 3a5df7f2..2fa59f33 100644
--- a/frontend/packages/swarm-ui/src/pages/JobsPage.tsx
+++ b/frontend/packages/swarm-ui/src/pages/JobsPage.tsx
@@ -22,6 +22,7 @@ import { useState } from "preact/hooks";
 import { JobqGraph } from "@hive/shared/jobq-graph.js";
 import { JobqRollup } from "@hive/shared/jobq-rollup.js";
 import { LazyDisclosure } from "../ui/disclosure/LazyDisclosure.js";
+import { Toolbar } from "../ui/toolbar/Toolbar.js";
 import { BuildsCard } from "./builds/BuildsPage.js";
 import { ReviewPage } from "./review/ReviewPage.js";
 import {
@@ -53,13 +54,13 @@ function JobsBody() {
 
   return (
     <>
-      <div class="ui-jobs-refresh">
+      <Toolbar>
         <RefreshIntervalPicker
           id="jobs-refresh"
           value={intervalMs}
           onChange={setIntervalMs}
         />
-      </div>
+      </Toolbar>
       <JobqRollup endpoint="/api/jobq/rollup" refreshToken={refreshToken} />
       <JobqGraph endpoint="/api/jobq/graph" refreshToken={refreshToken} />
     </>
diff --git a/frontend/packages/swarm-ui/src/pages/LinkBackendEnvForm.tsx b/frontend/packages/swarm-ui/src/pages/LinkBackendEnvForm.tsx
index b019ffdb..70db4764 100644
--- a/frontend/packages/swarm-ui/src/pages/LinkBackendEnvForm.tsx
+++ b/frontend/packages/swarm-ui/src/pages/LinkBackendEnvForm.tsx
@@ -13,6 +13,7 @@ import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
 import { Panel } from "../ui/panel/Panel.js";
 import { TextAreaField } from "../ui/text-area-field/TextAreaField.js";
 import { Button } from "../ui/button/Button.js";
+import { Hint } from "../ui/hint/Hint.js";
 import "./LinkMatrixAccountForm.css";
 
 type SubmitState =
@@ -115,9 +116,9 @@ export function LinkBackendEnvForm({
         </Button>
       </form>
       {result.status === "done" && (
-        <p class="link-matrix-account-result-ok">
+        <Hint tone="ok" class="link-matrix-account-result-ok">
           {result.message} <strong>{agent}</strong>
-        </p>
+        </Hint>
       )}
       {result.status === "error" && (
         <ApiErrorPanel
diff --git a/frontend/packages/swarm-ui/src/pages/LinkForgeAccountForm.tsx b/frontend/packages/swarm-ui/src/pages/LinkForgeAccountForm.tsx
index 94eab3ca..9a5c1537 100644
--- a/frontend/packages/swarm-ui/src/pages/LinkForgeAccountForm.tsx
+++ b/frontend/packages/swarm-ui/src/pages/LinkForgeAccountForm.tsx
@@ -14,6 +14,7 @@ import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
 import { Panel } from "../ui/panel/Panel.js";
 import { TextField } from "../ui/text-field/TextField.js";
 import { Button } from "../ui/button/Button.js";
+import { Hint } from "../ui/hint/Hint.js";
 import {
   checkLink,
   LABEL_PATTERN,
@@ -147,10 +148,10 @@ export function LinkForgeAccountForm({
         </Button>
       </form>
       {result.status === "done" && (
-        <p class="link-matrix-account-result-ok">
+        <Hint tone="ok" class="link-matrix-account-result-ok">
           linked <strong>{result.label}</strong> ({result.url}) to{" "}
           <strong>{agent}</strong>
-        </p>
+        </Hint>
       )}
       {result.status === "error" && (
         <ApiErrorPanel
diff --git a/frontend/packages/swarm-ui/src/pages/LinkGithubAccountForm.tsx b/frontend/packages/swarm-ui/src/pages/LinkGithubAccountForm.tsx
index 187590c3..4032bdac 100644
--- a/frontend/packages/swarm-ui/src/pages/LinkGithubAccountForm.tsx
+++ b/frontend/packages/swarm-ui/src/pages/LinkGithubAccountForm.tsx
@@ -12,6 +12,8 @@ import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
 import { Panel } from "../ui/panel/Panel.js";
 import { TextField } from "../ui/text-field/TextField.js";
 import { Button } from "../ui/button/Button.js";
+import { ExternalLink } from "../ui/external-link/ExternalLink.js";
+import { Hint } from "../ui/hint/Hint.js";
 import "./LinkMatrixAccountForm.css";
 
 type SubmitState =
@@ -67,13 +69,9 @@ export function LinkGithubAccountForm({
         two minutes, and its <code>gh</code> and <code>git push</code> to
         github.com then authenticate with it. Use a dedicated bot account and a
         minimally scoped token, created at{" "}
-        <a
-          href="https://github.com/settings/tokens"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
+        <ExternalLink href="https://github.com/settings/tokens">
           github.com/settings/tokens
-        </a>
+        </ExternalLink>
         ; GitHub notifications also need the <code>notifications</code> scope.
       </p>
       <form class="link-matrix-account-form" onSubmit={submit}>
@@ -94,9 +92,9 @@ export function LinkGithubAccountForm({
         </Button>
       </form>
       {result.status === "done" && (
-        <p class="link-matrix-account-result-ok">
+        <Hint tone="ok" class="link-matrix-account-result-ok">
           stored a github token for <strong>{agent}</strong>
-        </p>
+        </Hint>
       )}
       {result.status === "error" && (
         <ApiErrorPanel
diff --git a/frontend/packages/swarm-ui/src/pages/LinkMatrixAccountForm.css b/frontend/packages/swarm-ui/src/pages/LinkMatrixAccountForm.css
index 3900cf18..ef5f5e7a 100644
--- a/frontend/packages/swarm-ui/src/pages/LinkMatrixAccountForm.css
+++ b/frontend/packages/swarm-ui/src/pages/LinkMatrixAccountForm.css
@@ -13,6 +13,5 @@
   margin-top: 1em;
 }
 .link-matrix-account-result-ok {
-  margin-top: 1em;
-  color: var(--green);
+  margin-block: 1em;
 }
diff --git a/frontend/packages/swarm-ui/src/pages/LinkMatrixAccountForm.tsx b/frontend/packages/swarm-ui/src/pages/LinkMatrixAccountForm.tsx
index 1524daef..fde23cc2 100644
--- a/frontend/packages/swarm-ui/src/pages/LinkMatrixAccountForm.tsx
+++ b/frontend/packages/swarm-ui/src/pages/LinkMatrixAccountForm.tsx
@@ -32,6 +32,7 @@ import { Panel } from "../ui/panel/Panel.js";
 import { TextField } from "../ui/text-field/TextField.js";
 import { SelectField } from "../ui/select-field/SelectField.js";
 import { Button } from "../ui/button/Button.js";
+import { Hint } from "../ui/hint/Hint.js";
 import "./LinkMatrixAccountForm.css";
 
 type Mode = "token" | "password";
@@ -224,7 +225,7 @@ export function LinkMatrixAccountForm({
         </Button>
       </form>
       {result.status === "done" && (
-        <p class="link-matrix-account-result-ok">
+        <Hint tone="ok" class="link-matrix-account-result-ok">
           linked <strong>{result.account}</strong> to <strong>{agent}</strong>
           {result.userId ? (
             <>
@@ -232,7 +233,7 @@ export function LinkMatrixAccountForm({
               — logged in as <strong>{result.userId}</strong>
             </>
           ) : null}
-        </p>
+        </Hint>
       )}
       {result.status === "error" && (
         <ApiErrorPanel
diff --git a/frontend/packages/swarm-ui/src/pages/broadcast/BroadcastComposer.css b/frontend/packages/swarm-ui/src/pages/broadcast/BroadcastComposer.css
index 63b97987..fbd88b4c 100644
--- a/frontend/packages/swarm-ui/src/pages/broadcast/BroadcastComposer.css
+++ b/frontend/packages/swarm-ui/src/pages/broadcast/BroadcastComposer.css
@@ -54,15 +54,8 @@
 }
 .ui-broadcast-count {
   margin-left: auto;
-  color: var(--muted);
   font-size: 0.9em;
 }
-.ui-broadcast-empty {
-  color: var(--muted);
-  text-align: center;
-  padding: 1.25em 0.75em;
-  margin: 0;
-}
 
 /* The picker: each agent a labelled checkbox card, icon over name. */
 .ui-broadcast-grid {
diff --git a/frontend/packages/swarm-ui/src/pages/broadcast/BroadcastComposer.tsx b/frontend/packages/swarm-ui/src/pages/broadcast/BroadcastComposer.tsx
index 13892a13..ca58ba1a 100644
--- a/frontend/packages/swarm-ui/src/pages/broadcast/BroadcastComposer.tsx
+++ b/frontend/packages/swarm-ui/src/pages/broadcast/BroadcastComposer.tsx
@@ -21,6 +21,8 @@ import {
   RefreshIntervalPicker,
   type RefreshIntervalMs,
 } from "../../ui/refresh-interval/RefreshInterval.js";
+import { EmptyState } from "../../ui/empty-state/EmptyState.js";
+import { Hint } from "../../ui/hint/Hint.js";
 import { fetchJson, usePolled } from "../../ui/polled/usePolled.js";
 import { TextAreaField } from "../../ui/text-area-field/TextAreaField.js";
 import {
@@ -170,9 +172,9 @@ export function BroadcastComposer() {
           >
             clear
           </button>
-          <span class="ui-broadcast-count" role="status">
+          <Hint as="span" role="status" class="ui-broadcast-count">
             {targets.length} selected
-          </span>
+          </Hint>
           <RefreshIntervalPicker
             id="broadcast-refresh"
             value={intervalMs}
@@ -182,11 +184,11 @@ export function BroadcastComposer() {
         </div>
 
         {agents !== null && shown.length === 0 ? (
-          <p class="ui-broadcast-empty">
+          <EmptyState centered>
             {filter === "running" && all.length > 0
               ? "no agent is running right now. Show all to pick a stopped one."
               : "no agents."}
-          </p>
+          </EmptyState>
         ) : (
           <ul class="ui-broadcast-grid" aria-label="agents">
             {shown.map((agent) => {
diff --git a/frontend/packages/swarm-ui/src/pages/builds/BuildsPage.css b/frontend/packages/swarm-ui/src/pages/builds/BuildsPage.css
index bb8f7616..50bfd3df 100644
--- a/frontend/packages/swarm-ui/src/pages/builds/BuildsPage.css
+++ b/frontend/packages/swarm-ui/src/pages/builds/BuildsPage.css
@@ -1,42 +1,10 @@
-/* The build list: one card per build, the head row a button that opens it. */
+/* The build list: one card per build (`ui/expandable-card`). */
 .ui-builds-list {
   display: flex;
   flex-direction: column;
   gap: 0.75em;
   margin-top: 1em;
 }
-.ui-builds-head {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5em 0.75em;
-  padding: 0;
-  border: 0;
-  background: none;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-.ui-builds-head:focus-visible {
-  outline: 2px solid var(--purple);
-  outline-offset: 2px;
-}
-.ui-builds-title {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 0.5em;
-}
-.ui-builds-meta {
-  color: var(--muted);
-  margin: 0;
-}
-.ui-builds-body {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4em;
-  margin-top: 0.6em;
-}
 .ui-builds-text {
   margin: 0;
   overflow-wrap: anywhere;
@@ -51,11 +19,3 @@
   background: color-mix(in srgb, var(--crust) 60%, transparent);
   font-size: 0.85em;
 }
-.ui-builds-empty {
-  color: var(--muted);
-}
-.ui-builds-refresh {
-  display: flex;
-  justify-content: flex-end;
-  margin-block-end: 0.5em;
-}
diff --git a/frontend/packages/swarm-ui/src/pages/builds/BuildsPage.tsx b/frontend/packages/swarm-ui/src/pages/builds/BuildsPage.tsx
index e944fac4..7ee6b5c8 100644
--- a/frontend/packages/swarm-ui/src/pages/builds/BuildsPage.tsx
+++ b/frontend/packages/swarm-ui/src/pages/builds/BuildsPage.tsx
@@ -9,7 +9,13 @@ 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 { EmptyState } from "../../ui/empty-state/EmptyState.js";
+import {
+  ExpandableCard,
+  ExpandableCardSkeleton,
+} from "../../ui/expandable-card/ExpandableCard.js";
+import { Hint } from "../../ui/hint/Hint.js";
+import { Toolbar } from "../../ui/toolbar/Toolbar.js";
 import { LazyDisclosure } from "../../ui/disclosure/LazyDisclosure.js";
 import {
   RefreshIntervalPicker,
@@ -45,50 +51,44 @@ function BuildCard({
   onToggle: () => void;
 }) {
   const body = bodyText(run);
-  const bodyId = `${cardId(run.id)}-body`;
   return (
-    <Card class="ui-builds-card">
-      <div id={cardId(run.id)}>
-        <button
-          type="button"
-          class="ui-builds-head"
-          aria-expanded={open}
-          aria-controls={bodyId}
-          onClick={onToggle}
-        >
-          <span class="ui-builds-title">
-            <strong>{runTitle(run)}</strong>
-            <code>{run.head_sha.slice(0, 7)}</code>
-          </span>
-          <Badge
-            tone={OUTCOME_TONE[run.outcome]}
-            value={OUTCOME_LABEL[run.outcome]}
-          />
-          <span class="ui-builds-meta">
-            <RelativeTime epochMs={run.started_unix * 1000} /> · took{" "}
-            {durationLabel(run.started_unix, run.finished_unix)}
-          </span>
-        </button>
-        {open ? (
-          <div class="ui-builds-body" id={bodyId}>
-            {body ? (
-              <>
-                <p class="ui-builds-meta">{body.label}</p>
-                {body.preformatted ? (
-                  <pre class="ui-builds-tail">{body.text}</pre>
-                ) : (
-                  <p class="ui-builds-text">{body.text}</p>
-                )}
-              </>
-            ) : (
-              <p class="ui-builds-meta">
-                nothing more was recorded for this build.
-              </p>
-            )}
-          </div>
-        ) : null}
-      </div>
-    </Card>
+    <ExpandableCard
+      id={cardId(run.id)}
+      class="ui-builds-card"
+      open={open}
+      onToggle={onToggle}
+      title={
+        <>
+          <strong>{runTitle(run)}</strong>
+          <code>{run.head_sha.slice(0, 7)}</code>
+        </>
+      }
+      badge={
+        <Badge
+          tone={OUTCOME_TONE[run.outcome]}
+          value={OUTCOME_LABEL[run.outcome]}
+        />
+      }
+      meta={
+        <>
+          <RelativeTime epochMs={run.started_unix * 1000} /> · took{" "}
+          {durationLabel(run.started_unix, run.finished_unix)}
+        </>
+      }
+    >
+      {body ? (
+        <>
+          <Hint>{body.label}</Hint>
+          {body.preformatted ? (
+            <pre class="ui-builds-tail">{body.text}</pre>
+          ) : (
+            <p class="ui-builds-text">{body.text}</p>
+          )}
+        </>
+      ) : (
+        <Hint>nothing more was recorded for this build.</Hint>
+      )}
+    </ExpandableCard>
   );
 }
 
@@ -133,14 +133,14 @@ function BuildsBody() {
 
   return (
     <>
-      <div class="ui-builds-refresh">
+      <Toolbar>
         <RefreshIntervalPicker
           id="builds-refresh"
           value={intervalMs}
           onChange={setIntervalMs}
           refreshing={refreshing}
         />
-      </div>
+      </Toolbar>
       <p>
         What the swarm builder built, newest first: agent config PR heads, and
         the agents it builds from internal/meta before a deploy. How each ended,
@@ -153,15 +153,22 @@ function BuildsBody() {
         />
       ) : null}
       {missing ? (
-        <p class="ui-builds-meta" role="status">
+        <Hint role="status">
           the build in this link is no longer listed: the builder keeps only its
           newest builds.
-        </p>
+        </Hint>
       ) : null}
       {runs !== null && runs.length === 0 && !error ? (
-        <p class="ui-builds-empty">No builds yet.</p>
+        <EmptyState>No builds yet.</EmptyState>
       ) : null}
       <div class="ui-builds-list">
+        {runs === null && !error ? (
+          <>
+            <ExpandableCardSkeleton />
+            <ExpandableCardSkeleton />
+            <ExpandableCardSkeleton />
+          </>
+        ) : null}
         {(runs ?? []).map((run) => (
           <BuildCard
             key={run.id}
diff --git a/frontend/packages/swarm-ui/src/pages/messages/MessagesPage.css b/frontend/packages/swarm-ui/src/pages/messages/MessagesPage.css
index bcb6fe8a..7082f160 100644
--- a/frontend/packages/swarm-ui/src/pages/messages/MessagesPage.css
+++ b/frontend/packages/swarm-ui/src/pages/messages/MessagesPage.css
@@ -19,7 +19,6 @@
 }
 .ui-messages-count {
   margin-inline-start: auto;
-  color: var(--muted);
 }
 .ui-messages-wrap.terminal-wrap {
   max-height: 70vh;
@@ -30,5 +29,4 @@
 }
 .ui-messages-note {
   margin: 0.75em 0 0;
-  color: var(--muted);
 }
diff --git a/frontend/packages/swarm-ui/src/pages/messages/MessagesPage.tsx b/frontend/packages/swarm-ui/src/pages/messages/MessagesPage.tsx
index a8198a53..e1458db0 100644
--- a/frontend/packages/swarm-ui/src/pages/messages/MessagesPage.tsx
+++ b/frontend/packages/swarm-ui/src/pages/messages/MessagesPage.tsx
@@ -16,6 +16,7 @@ import { Row } from "@hive/shared/term-row.js";
 import { BroadcastComposer } from "../broadcast/BroadcastComposer.js";
 import { SchedulesCard } from "../schedules/SchedulesPage.js";
 import { Disclosure } from "../../ui/disclosure/Disclosure.js";
+import { Hint } from "../../ui/hint/Hint.js";
 import { Panel } from "../../ui/panel/Panel.js";
 import { SelectField } from "../../ui/select-field/SelectField.js";
 import { TextField } from "../../ui/text-field/TextField.js";
@@ -136,11 +137,11 @@ export function MessagesPage() {
             placeholder="sender or recipient"
             onInput={setQuery}
           />
-          <span class="ui-messages-count">
+          <Hint as="span" class="ui-messages-count">
             {query.trim() === ""
               ? `${messages.length} messages`
               : `${shown.length} of ${messages.length} messages`}
-          </span>
+          </Hint>
         </div>
         <div class="terminal-wrap ui-messages-wrap">
           <div class="live terminal" ref={logRef} onScroll={handleScroll}>
@@ -159,11 +160,11 @@ export function MessagesPage() {
             )}
           </div>
         </div>
-        <p class="ui-messages-note">
+        <Hint class="ui-messages-note">
           Shows what the agents sent each other. A message an agent drained with
           an in-turn <code>recv</code> is missing. The history is at most 100
           recent messages per agent.
-        </p>
+        </Hint>
       </Panel>
     </div>
   );
diff --git a/frontend/packages/swarm-ui/src/pages/notifications/Deliveries.tsx b/frontend/packages/swarm-ui/src/pages/notifications/Deliveries.tsx
index 8bb2dd11..8be87289 100644
--- a/frontend/packages/swarm-ui/src/pages/notifications/Deliveries.tsx
+++ b/frontend/packages/swarm-ui/src/pages/notifications/Deliveries.tsx
@@ -1,6 +1,7 @@
 // <Deliveries> — the notification router's recent deliveries, newest first.
 // The router keeps the newest 500 rows; this shows what
 // `GET /api/notify/deliveries` returns.
+import { EmptyState } from "../../ui/empty-state/EmptyState.js";
 import { RelativeTime } from "../../ui/relative-time/RelativeTime.js";
 import { Table, type TableColumn } from "../../ui/table/Table.js";
 import { issueRef, outcomeText, type Delivery } from "./RouterLive.js";
@@ -48,7 +49,7 @@ const COLUMNS: TableColumn<Row>[] = [
 ];
 
 export function Deliveries({ rows }: { rows: Delivery[] }) {
-  if (rows.length === 0) return <p>no deliveries yet</p>;
+  if (rows.length === 0) return <EmptyState>no deliveries yet</EmptyState>;
   const placed = rows.map((d, place) => ({ ...d, place }));
   return (
     <>
diff --git a/frontend/packages/swarm-ui/src/pages/notifications/FlowCanvas.tsx b/frontend/packages/swarm-ui/src/pages/notifications/FlowCanvas.tsx
index 50ebdc7e..5807565b 100644
--- a/frontend/packages/swarm-ui/src/pages/notifications/FlowCanvas.tsx
+++ b/frontend/packages/swarm-ui/src/pages/notifications/FlowCanvas.tsx
@@ -21,6 +21,7 @@ import {
   type Edit,
   type Limits,
 } from "./FlowDraft.js";
+import { Hint } from "../../ui/hint/Hint.js";
 import { BoxFace, hitsText } from "./FlowBox.js";
 import { layoutFlow, neighbour, nodeAt } from "./FlowLayout.js";
 import { describeNode, ordinal, type Flow } from "./FlowTypes.js";
@@ -282,7 +283,9 @@ export function FlowCanvas({
   return (
     <div class="notify-canvas-wrap">
       <div class="notify-palette" role="group" aria-label="add a node">
-        <span class="notify-hint">add</span>
+        <Hint as="span" class="notify-hint">
+          add
+        </Hint>
         {palette.map((p) => (
           <button
             key={p.kind}
diff --git a/frontend/packages/swarm-ui/src/pages/notifications/FlowEditorPage.tsx b/frontend/packages/swarm-ui/src/pages/notifications/FlowEditorPage.tsx
index 4cb3fc4e..ae00bed4 100644
--- a/frontend/packages/swarm-ui/src/pages/notifications/FlowEditorPage.tsx
+++ b/frontend/packages/swarm-ui/src/pages/notifications/FlowEditorPage.tsx
@@ -22,7 +22,9 @@ import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
 import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
 import { Button } from "../../ui/button/Button.js";
 import { CheckboxField } from "../../ui/checkbox-field/CheckboxField.js";
+import { ActionRow } from "../../ui/action-row/ActionRow.js";
 import { ConfirmDialog } from "../../ui/confirm-dialog/ConfirmDialog.js";
+import { Hint } from "../../ui/hint/Hint.js";
 import { Panel } from "../../ui/panel/Panel.js";
 import { TextField } from "../../ui/text-field/TextField.js";
 import { fetchJson, ProblemError } from "../../ui/polled/usePolled.js";
@@ -322,11 +324,11 @@ export function FlowEditorPage({
           checked={draft.enabled}
           onChange={(enabled) => setDraft({ ...draft, enabled })}
         />
-        <div class="notify-editor-actions">
+        <ActionRow class="notify-editor-actions">
           {dirty ? (
-            <span class="notify-hint" role="status">
+            <Hint as="span" role="status" class="notify-hint">
               not saved yet
-            </span>
+            </Hint>
           ) : null}
           <Button
             variant="primary"
@@ -355,7 +357,7 @@ export function FlowEditorPage({
               delete flow
             </Button>
           )}
-        </div>
+        </ActionRow>
       </div>
       {shown ? (
         <p class="notify-hint" role="status">
diff --git a/frontend/packages/swarm-ui/src/pages/notifications/NodeInspector.tsx b/frontend/packages/swarm-ui/src/pages/notifications/NodeInspector.tsx
index 46b18448..cb993318 100644
--- a/frontend/packages/swarm-ui/src/pages/notifications/NodeInspector.tsx
+++ b/frontend/packages/swarm-ui/src/pages/notifications/NodeInspector.tsx
@@ -2,9 +2,11 @@
 // it: move it under another node, change when it runs among its siblings,
 // remove it. Every change goes out as an `Edit` of the flow; the editor shows
 // the reason when one is refused. New nodes come from the canvas palette.
+import { ActionRow } from "../../ui/action-row/ActionRow.js";
 import { Button } from "../../ui/button/Button.js";
 import { Card } from "../../ui/card/Card.js";
 import { CheckboxField } from "../../ui/checkbox-field/CheckboxField.js";
+import { Hint } from "../../ui/hint/Hint.js";
 import { SelectField } from "../../ui/select-field/SelectField.js";
 import { TextAreaField } from "../../ui/text-area-field/TextAreaField.js";
 import { TextField } from "../../ui/text-field/TextField.js";
@@ -204,10 +206,10 @@ export function NodeInspector({
       ) : null}
 
       {order.count > 1 ? (
-        <div class="notify-inspector-actions">
-          <span class="notify-hint">
+        <ActionRow class="notify-inspector-actions">
+          <Hint as="span" class="notify-hint">
             runs {ordinal(order.index + 1)} of {order.count} below its parent
-          </span>
+          </Hint>
           <Button
             disabled={order.index === 0}
             onClick={() => onEdit(moveAmongSiblings(flow, node.id, -1))}
@@ -220,10 +222,10 @@ export function NodeInspector({
           >
             run later
           </Button>
-        </div>
+        </ActionRow>
       ) : null}
 
-      <div class="notify-inspector-actions">
+      <ActionRow class="notify-inspector-actions">
         {node.kind !== "source" ? (
           <Button
             onClick={() =>
@@ -236,7 +238,7 @@ export function NodeInspector({
               : ""}
           </Button>
         ) : null}
-      </div>
+      </ActionRow>
 
       {node.kind !== "source" && parent !== undefined ? (
         <SelectField
diff --git a/frontend/packages/swarm-ui/src/pages/notifications/NotificationsPage.css b/frontend/packages/swarm-ui/src/pages/notifications/NotificationsPage.css
index 55991cc7..9a324d13 100644
--- a/frontend/packages/swarm-ui/src/pages/notifications/NotificationsPage.css
+++ b/frontend/packages/swarm-ui/src/pages/notifications/NotificationsPage.css
@@ -27,9 +27,6 @@
 
 .notify-flow-actions,
 .notify-panel-actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
   gap: 0.5em;
 }
 
@@ -53,9 +50,6 @@
 }
 
 .notify-editor-actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
   gap: 0.5em;
   margin-left: auto;
 }
@@ -250,8 +244,6 @@
 }
 
 .notify-inspector-actions {
-  display: flex;
-  flex-wrap: wrap;
   gap: 0.5em;
   margin-bottom: 0.75em;
 }
diff --git a/frontend/packages/swarm-ui/src/pages/notifications/NotificationsPage.tsx b/frontend/packages/swarm-ui/src/pages/notifications/NotificationsPage.tsx
index c2bf805a..fd05f07e 100644
--- a/frontend/packages/swarm-ui/src/pages/notifications/NotificationsPage.tsx
+++ b/frontend/packages/swarm-ui/src/pages/notifications/NotificationsPage.tsx
@@ -11,6 +11,7 @@ import { useState } from "preact/hooks";
 import { useLocation } from "wouter-preact";
 import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
 import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
+import { ActionRow } from "../../ui/action-row/ActionRow.js";
 import { Button } from "../../ui/button/Button.js";
 import { Card } from "../../ui/card/Card.js";
 import { CheckboxField } from "../../ui/checkbox-field/CheckboxField.js";
@@ -103,7 +104,7 @@ export function NotificationRouter() {
 
   return (
     <>
-      <div class="notify-panel-actions">
+      <ActionRow class="notify-panel-actions">
         <RefreshIntervalPicker
           id="notifications-refresh"
           value={intervalMs}
@@ -113,7 +114,7 @@ export function NotificationRouter() {
         <Button variant="primary" onClick={() => draftFrom()}>
           create flow
         </Button>
-      </div>
+      </ActionRow>
       {error ? (
         <ApiErrorPanel context="failed to load the flows" problem={error} />
       ) : null}
@@ -149,11 +150,11 @@ export function NotificationRouter() {
                     disabled={pending}
                     onChange={(checked) => setBuiltin(flow.id, checked)}
                   />
-                  <div class="notify-flow-actions">
+                  <ActionRow class="notify-flow-actions">
                     <Button onClick={() => draftFrom(flow.id)}>
                       duplicate to edit
                     </Button>
-                  </div>
+                  </ActionRow>
                 </div>
                 <FlowGraph flow={flow} hits={hitsOf(shown, flow.id)} />
               </Card>
@@ -168,7 +169,7 @@ export function NotificationRouter() {
                 <span class="notify-flow-state">
                   {flow.enabled ? "on" : "off"}
                 </span>
-                <div class="notify-flow-actions">
+                <ActionRow class="notify-flow-actions">
                   <Button
                     onClick={() =>
                       navigate(`/notifications/${encodeURIComponent(flow.id)}`)
@@ -177,7 +178,7 @@ export function NotificationRouter() {
                     edit
                   </Button>
                   <Button onClick={() => draftFrom(flow.id)}>duplicate</Button>
-                </div>
+                </ActionRow>
               </div>
               <FlowGraph flow={flow} hits={hitsOf(shown, flow.id)} />
             </Card>
diff --git a/frontend/packages/swarm-ui/src/pages/reports/ReportsPage.css b/frontend/packages/swarm-ui/src/pages/reports/ReportsPage.css
index be8da904..94970a4a 100644
--- a/frontend/packages/swarm-ui/src/pages/reports/ReportsPage.css
+++ b/frontend/packages/swarm-ui/src/pages/reports/ReportsPage.css
@@ -4,13 +4,3 @@
   flex-direction: column;
   gap: 1em;
 }
-/* The bar at the top of the alerts card: the Grafana link, the show-more
-   button and the refresh picker, to the right. */
-.ui-alerts-bar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 0.5em 0.75em;
-  margin-block-end: 0.5em;
-}
diff --git a/frontend/packages/swarm-ui/src/pages/review-runs/ReviewRuns.css b/frontend/packages/swarm-ui/src/pages/review-runs/ReviewRuns.css
index 75e49738..ace1fa1e 100644
--- a/frontend/packages/swarm-ui/src/pages/review-runs/ReviewRuns.css
+++ b/frontend/packages/swarm-ui/src/pages/review-runs/ReviewRuns.css
@@ -1,47 +1,7 @@
-/* The run list: one card per run, the head row a button that opens it. */
+/* The run list: one card per run (`ui/expandable-card`). */
 .ui-runs-list {
   display: flex;
   flex-direction: column;
   gap: 0.75em;
   margin-top: 1em;
 }
-.ui-runs-head {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5em 0.75em;
-  padding: 0;
-  border: 0;
-  background: none;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-.ui-runs-head:focus-visible {
-  outline: 2px solid var(--purple);
-  outline-offset: 2px;
-}
-.ui-runs-title {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 0.5em;
-}
-.ui-runs-meta {
-  color: var(--muted);
-}
-.ui-runs-head .ui-runs-meta {
-  flex-basis: 100%;
-}
-.ui-runs-body {
-  display: flex;
-  flex-direction: column;
-  gap: 0.6em;
-  margin-top: 0.5em;
-}
-.ui-runs-body p {
-  margin: 0;
-}
-.ui-runs-empty {
-  color: var(--muted);
-}
diff --git a/frontend/packages/swarm-ui/src/pages/review-runs/ReviewRuns.tsx b/frontend/packages/swarm-ui/src/pages/review-runs/ReviewRuns.tsx
index 898c3df3..55d602bf 100644
--- a/frontend/packages/swarm-ui/src/pages/review-runs/ReviewRuns.tsx
+++ b/frontend/packages/swarm-ui/src/pages/review-runs/ReviewRuns.tsx
@@ -7,7 +7,13 @@
 import { useState } from "preact/hooks";
 import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
 import { Badge } from "@hive/shared/badge.js";
-import { Card } from "../../ui/card/Card.js";
+import { EmptyState } from "../../ui/empty-state/EmptyState.js";
+import { ExternalLink } from "../../ui/external-link/ExternalLink.js";
+import {
+  ExpandableCard,
+  ExpandableCardSkeleton,
+} from "../../ui/expandable-card/ExpandableCard.js";
+import { Hint } from "../../ui/hint/Hint.js";
 import { Panel } from "../../ui/panel/Panel.js";
 import {
   RefreshIntervalPicker,
@@ -38,55 +44,50 @@ function RunCard({
   open: boolean;
   onToggle: () => void;
 }) {
-  const bodyId = `review-run-${run.id}`;
   return (
-    <Card class="ui-runs-card">
-      <button
-        type="button"
-        class="ui-runs-head"
-        aria-expanded={open}
-        aria-controls={bodyId}
-        onClick={onToggle}
-      >
-        <span class="ui-runs-title">
+    <ExpandableCard
+      id={`review-run-${run.id}`}
+      class="ui-runs-card"
+      open={open}
+      onToggle={onToggle}
+      metaOnOwnRow
+      title={
+        <>
           <strong>
             {run.repo} #{run.pr}
           </strong>
           {run.head_sha ? <code>{run.head_sha.slice(0, 7)}</code> : null}
-        </span>
+        </>
+      }
+      badge={
         <Badge
           tone={OUTCOME_TONE[run.outcome]}
           value={OUTCOME_LABEL[run.outcome]}
         />
-        <span class="ui-runs-meta">
+      }
+      meta={
+        <>
           {TRIGGER_LABEL[run.trigger]} ·{" "}
           <RelativeTime epochMs={run.started_unix * 1000} /> · took{" "}
           {durationLabel(run.started_unix, run.finished_unix)} ·{" "}
           {classificationCount(run)}
-        </span>
-      </button>
-      {open ? (
-        <div class="ui-runs-body" id={bodyId}>
-          {run.detail ? <p class="ui-runs-detail">{run.detail}</p> : null}
-          {run.rows && run.rows.length > 0 ? (
-            <TryOutResult
-              result={run}
-              filterKey="swarm-ui:review-runs:table-filters"
-            />
-          ) : null}
-          {run.review_url ? (
-            <p class="ui-runs-link">
-              <a href={run.review_url} target="_blank" rel="noreferrer">
-                the posted review
-              </a>
-            </p>
-          ) : null}
-          {run.requester ? (
-            <p class="ui-runs-meta">Requested by {run.requester}.</p>
-          ) : null}
-        </div>
+        </>
+      }
+    >
+      {run.detail ? <p class="ui-runs-detail">{run.detail}</p> : null}
+      {run.rows && run.rows.length > 0 ? (
+        <TryOutResult
+          result={run}
+          filterKey="swarm-ui:review-runs:table-filters"
+        />
       ) : null}
-    </Card>
+      {run.review_url ? (
+        <p class="ui-runs-link">
+          <ExternalLink href={run.review_url}>the posted review</ExternalLink>
+        </p>
+      ) : null}
+      {run.requester ? <Hint>Requested by {run.requester}.</Hint> : null}
+    </ExpandableCard>
   );
 }
 
@@ -136,9 +137,16 @@ export function ReviewRuns() {
         <ApiErrorPanel context="the runs could not be loaded" problem={error} />
       ) : null}
       {runs !== null && runs.length === 0 && !error ? (
-        <p class="ui-runs-empty">No runs yet.</p>
+        <EmptyState>No runs yet.</EmptyState>
       ) : null}
       <div class="ui-runs-list">
+        {runs === null && !error ? (
+          <>
+            <ExpandableCardSkeleton metaOnOwnRow />
+            <ExpandableCardSkeleton metaOnOwnRow />
+            <ExpandableCardSkeleton metaOnOwnRow />
+          </>
+        ) : null}
         {(runs ?? []).map((run) => (
           <RunCard
             key={run.id}
diff --git a/frontend/packages/swarm-ui/src/pages/review-settings/ClassifierSettings.css b/frontend/packages/swarm-ui/src/pages/review-settings/ClassifierSettings.css
index 3cc271c4..17f43a36 100644
--- a/frontend/packages/swarm-ui/src/pages/review-settings/ClassifierSettings.css
+++ b/frontend/packages/swarm-ui/src/pages/review-settings/ClassifierSettings.css
@@ -32,13 +32,3 @@
   margin-bottom: 0.5em;
   font-weight: 600;
 }
-.ui-classifier-settings-actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.75em;
-}
-.ui-classifier-settings-note {
-  margin: 0;
-  color: var(--muted);
-}
diff --git a/frontend/packages/swarm-ui/src/pages/review-settings/ClassifierSettings.tsx b/frontend/packages/swarm-ui/src/pages/review-settings/ClassifierSettings.tsx
index beb99502..cc26bb8f 100644
--- a/frontend/packages/swarm-ui/src/pages/review-settings/ClassifierSettings.tsx
+++ b/frontend/packages/swarm-ui/src/pages/review-settings/ClassifierSettings.tsx
@@ -9,7 +9,9 @@
 import { useEffect, useState } from "preact/hooks";
 import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
 import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
+import { ActionRow } from "../../ui/action-row/ActionRow.js";
 import { Button } from "../../ui/button/Button.js";
+import { Hint } from "../../ui/hint/Hint.js";
 import { Disclosure } from "../../ui/disclosure/Disclosure.js";
 import { SelectField } from "../../ui/select-field/SelectField.js";
 import { TextField } from "../../ui/text-field/TextField.js";
@@ -237,7 +239,7 @@ export function ClassifierSettings() {
               problem={saveError}
             />
           ) : null}
-          <div class="ui-classifier-settings-actions">
+          <ActionRow>
             <Button
               variant="primary"
               type="submit"
@@ -246,14 +248,12 @@ export function ClassifierSettings() {
               {saving ? "saving…" : "save"}
             </Button>
             {justSaved ? (
-              <span class="ui-classifier-settings-note" role="status">
+              <Hint as="span" role="status">
                 Saved.
-              </span>
+              </Hint>
             ) : null}
-          </div>
-          {problem !== null ? (
-            <p class="ui-classifier-settings-note">{problem}</p>
-          ) : null}
+          </ActionRow>
+          {problem !== null ? <Hint>{problem}</Hint> : null}
         </form>
       ) : null}
     </Disclosure>
diff --git a/frontend/packages/swarm-ui/src/pages/review-tryout/ReviewTryOut.css b/frontend/packages/swarm-ui/src/pages/review-tryout/ReviewTryOut.css
index 5419d9b4..33c11710 100644
--- a/frontend/packages/swarm-ui/src/pages/review-tryout/ReviewTryOut.css
+++ b/frontend/packages/swarm-ui/src/pages/review-tryout/ReviewTryOut.css
@@ -48,12 +48,6 @@
 .ui-tryout-classification-row > button {
   flex: none;
 }
-.ui-tryout-actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.75em;
-}
 .ui-tryout-hint {
   margin: 0;
   color: var(--muted);
diff --git a/frontend/packages/swarm-ui/src/pages/review-tryout/ReviewTryOut.tsx b/frontend/packages/swarm-ui/src/pages/review-tryout/ReviewTryOut.tsx
index ec5425f6..7aa82709 100644
--- a/frontend/packages/swarm-ui/src/pages/review-tryout/ReviewTryOut.tsx
+++ b/frontend/packages/swarm-ui/src/pages/review-tryout/ReviewTryOut.tsx
@@ -25,9 +25,11 @@
 import { useEffect, useState } from "preact/hooks";
 import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
 import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
+import { ActionRow } from "../../ui/action-row/ActionRow.js";
 import { Button } from "../../ui/button/Button.js";
 import { ConfirmDialog } from "../../ui/confirm-dialog/ConfirmDialog.js";
 import { Disclosure } from "../../ui/disclosure/Disclosure.js";
+import { ExternalLink } from "../../ui/external-link/ExternalLink.js";
 import { Panel } from "../../ui/panel/Panel.js";
 import { TextField } from "../../ui/text-field/TextField.js";
 import { ClassificationEditor } from "./ClassificationEditor.js";
@@ -396,7 +398,7 @@ export function ReviewTryOut() {
               }
             />
           ))}
-          <div class="ui-tryout-actions">
+          <ActionRow class="ui-tryout-actions">
             <Button
               onClick={() => setDrafts((ds) => [...ds, blankDraft()])}
               disabled={capProblem !== null}
@@ -419,7 +421,7 @@ export function ReviewTryOut() {
             >
               {opening ? "pushing…" : "open a PR"}
             </Button>
-          </div>
+          </ActionRow>
           {capProblem !== null ? (
             <p id={CAP_ID} class="ui-tryout-hint">
               {capProblem}
@@ -440,9 +442,9 @@ export function ReviewTryOut() {
             <p class="ui-tryout-loaded">
               Pushed <code>{opened.branch}</code> to {opened.repo}, changing{" "}
               <code>{opened.path}</code> with you as the author.{" "}
-              <a href={opened.compare_url} target="_blank" rel="noopener">
+              <ExternalLink href={opened.compare_url}>
                 Open the PR on the forge
-              </a>
+              </ExternalLink>
               .
             </p>
           ) : null}
diff --git a/frontend/packages/swarm-ui/src/pages/review-tryout/TryOutResult.css b/frontend/packages/swarm-ui/src/pages/review-tryout/TryOutResult.css
index 1c0aef8b..33924f12 100644
--- a/frontend/packages/swarm-ui/src/pages/review-tryout/TryOutResult.css
+++ b/frontend/packages/swarm-ui/src/pages/review-tryout/TryOutResult.css
@@ -1,7 +1,4 @@
 /* A finished run's table, the overall verdict under it and the head commit. */
-.ui-tryout-row-error {
-  color: var(--red);
-}
 .ui-tryout-overall,
 .ui-tryout-sha {
   margin: 0.75em 0 0;
diff --git a/frontend/packages/swarm-ui/src/pages/review-tryout/TryOutResult.tsx b/frontend/packages/swarm-ui/src/pages/review-tryout/TryOutResult.tsx
index 519d4549..ebe6bb0f 100644
--- a/frontend/packages/swarm-ui/src/pages/review-tryout/TryOutResult.tsx
+++ b/frontend/packages/swarm-ui/src/pages/review-tryout/TryOutResult.tsx
@@ -4,6 +4,7 @@
 // (`docs/swarm/review-classifier.md`); no token
 // counts, cache counts or cost, here or anywhere in the UI.
 import { Badge } from "@hive/shared/badge.js";
+import { Hint } from "../../ui/hint/Hint.js";
 import { Table, type TableColumn } from "../../ui/table/Table.js";
 import type { TryOutResult as Result, TryOutRow } from "./TryOutTypes.js";
 import "./TryOutResult.css";
@@ -42,7 +43,13 @@ const COLUMNS: TableColumn<TryOutRow>[] = [
     cellClass: "ui-table-prose",
     // A row that could not run says why where the reason would be.
     render: (r) =>
-      r.error ? <span class="ui-tryout-row-error">{r.error}</span> : r.reason,
+      r.error ? (
+        <Hint tone="error" as="span" class="ui-tryout-row-error">
+          {r.error}
+        </Hint>
+      ) : (
+        r.reason
+      ),
   },
 ];
 
diff --git a/frontend/packages/swarm-ui/src/pages/schedules/ScheduleCard.css b/frontend/packages/swarm-ui/src/pages/schedules/ScheduleCard.css
index 9d819fdb..62ab4d96 100644
--- a/frontend/packages/swarm-ui/src/pages/schedules/ScheduleCard.css
+++ b/frontend/packages/swarm-ui/src/pages/schedules/ScheduleCard.css
@@ -29,8 +29,5 @@
   overflow-wrap: anywhere;
 }
 .ui-schedule-card-actions {
-  display: flex;
-  flex-wrap: wrap;
   gap: 0.5em;
-  justify-content: flex-end;
 }
diff --git a/frontend/packages/swarm-ui/src/pages/schedules/ScheduleCard.tsx b/frontend/packages/swarm-ui/src/pages/schedules/ScheduleCard.tsx
index 8c604282..31f3c22f 100644
--- a/frontend/packages/swarm-ui/src/pages/schedules/ScheduleCard.tsx
+++ b/frontend/packages/swarm-ui/src/pages/schedules/ScheduleCard.tsx
@@ -3,6 +3,7 @@
 // fires next. Edit, pause/resume and remove sit at the foot; edit swaps the
 // card for `ScheduleForm` (the page owns that swap).
 import { Badge, type BadgeTone } from "@hive/shared/badge.js";
+import { ActionRow } from "../../ui/action-row/ActionRow.js";
 import { Button } from "../../ui/button/Button.js";
 import { Card } from "../../ui/card/Card.js";
 import { RelativeTime } from "../../ui/relative-time/RelativeTime.js";
@@ -72,7 +73,7 @@ export function ScheduleCard({
           </>
         )}
       </div>
-      <div class="ui-schedule-card-actions">
+      <ActionRow align="end" class="ui-schedule-card-actions">
         <Button onClick={onEdit} disabled={pending}>
           edit
         </Button>
@@ -82,7 +83,7 @@ export function ScheduleCard({
         <Button onClick={onRemove} disabled={pending}>
           remove
         </Button>
-      </div>
+      </ActionRow>
     </Card>
   );
 }
diff --git a/frontend/packages/swarm-ui/src/pages/schedules/ScheduleForm.css b/frontend/packages/swarm-ui/src/pages/schedules/ScheduleForm.css
index 849559dc..1cc630de 100644
--- a/frontend/packages/swarm-ui/src/pages/schedules/ScheduleForm.css
+++ b/frontend/packages/swarm-ui/src/pages/schedules/ScheduleForm.css
@@ -30,17 +30,11 @@
   flex: 1 1 9em;
 }
 .ui-schedule-form-hint {
-  margin: 0;
   font-size: 0.85em;
-  color: var(--muted);
 }
 .ui-schedule-form-warn {
-  margin: 0;
   font-size: 0.85em;
-  color: var(--yellow);
 }
 .ui-schedule-form-actions {
-  display: flex;
   gap: 0.5em;
-  justify-content: flex-end;
 }
diff --git a/frontend/packages/swarm-ui/src/pages/schedules/ScheduleForm.tsx b/frontend/packages/swarm-ui/src/pages/schedules/ScheduleForm.tsx
index f5d4123c..15f1ff12 100644
--- a/frontend/packages/swarm-ui/src/pages/schedules/ScheduleForm.tsx
+++ b/frontend/packages/swarm-ui/src/pages/schedules/ScheduleForm.tsx
@@ -11,8 +11,10 @@
 import { useState } from "preact/hooks";
 import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
 import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
+import { ActionRow } from "../../ui/action-row/ActionRow.js";
 import { Button } from "../../ui/button/Button.js";
 import { Card } from "../../ui/card/Card.js";
+import { Hint } from "../../ui/hint/Hint.js";
 import {
   MultiselectFilterOptions,
   type MultiselectFilterState,
@@ -190,11 +192,11 @@ export function ScheduleForm({
         <div class="ui-schedule-form-agents">
           <span class="ui-form-field-label">agents</span>
           {agentOptions.length === 0 ? (
-            <span class="ui-schedule-form-hint">
+            <Hint as="span" class="ui-schedule-form-hint">
               {agentsError
                 ? `could not load the agent list: ${agentsError}`
                 : "no agents to pick from"}
-            </span>
+            </Hint>
           ) : (
             <MultiselectFilterOptions
               options={agentOptions}
@@ -250,22 +252,22 @@ export function ScheduleForm({
           />
         </div>
         {fires.length > 0 ? (
-          <p class="ui-schedule-form-hint">
+          <Hint class="ui-schedule-form-hint">
             {repeat ? "next fires: " : "fires: "}
             {fires.map(fmtLocal).join(" · ")}
-          </p>
+          </Hint>
         ) : null}
         {startInPast && (original === undefined || startChanged) ? (
-          <p class="ui-schedule-form-hint">
+          <Hint class="ui-schedule-form-hint">
             That start is in the past: saving fires the latest missed time once,
             right away, in every agent chosen.
-          </p>
+          </Hint>
         ) : null}
         {cadenceChanged ? (
-          <p class="ui-schedule-form-warn">
+          <Hint tone="warn" class="ui-schedule-form-warn">
             Changing the start or the repeat moves when this schedule fires.
             Editing only the name, message or agents does not.
-          </p>
+          </Hint>
         ) : null}
         {error ? (
           <ApiErrorPanel
@@ -273,7 +275,7 @@ export function ScheduleForm({
             problem={error}
           />
         ) : null}
-        <div class="ui-schedule-form-actions">
+        <ActionRow align="end" class="ui-schedule-form-actions">
           <Button onClick={onCancel}>cancel</Button>
           <Button
             variant="primary"
@@ -282,7 +284,7 @@ export function ScheduleForm({
           >
             {saving ? "saving…" : original ? "save" : "create"}
           </Button>
-        </div>
+        </ActionRow>
       </form>
     </Card>
   );
diff --git a/frontend/packages/swarm-ui/src/pages/schedules/SchedulesPage.tsx b/frontend/packages/swarm-ui/src/pages/schedules/SchedulesPage.tsx
index aecaf8c6..86cf3c3d 100644
--- a/frontend/packages/swarm-ui/src/pages/schedules/SchedulesPage.tsx
+++ b/frontend/packages/swarm-ui/src/pages/schedules/SchedulesPage.tsx
@@ -15,7 +15,7 @@ import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
 import { Button } from "../../ui/button/Button.js";
 import { ConfirmDialog } from "../../ui/confirm-dialog/ConfirmDialog.js";
 import { FilterableView } from "../../ui/filterable-view/FilterableView.js";
-import "./SchedulesPage.css";
+import { Toolbar } from "../../ui/toolbar/Toolbar.js";
 import { LazyDisclosure } from "../../ui/disclosure/LazyDisclosure.js";
 import {
   RefreshIntervalPicker,
@@ -152,7 +152,7 @@ function SchedulesBody() {
 
   return (
     <>
-      <div class="ui-schedules-bar">
+      <Toolbar>
         <Button
           variant="primary"
           onClick={() => setCreating(true)}
@@ -166,7 +166,7 @@ function SchedulesBody() {
           onChange={setIntervalMs}
           refreshing={schedulesRefreshing || rosterRefreshing}
         />
-      </div>
+      </Toolbar>
       {error ? (
         <ApiErrorPanel context="failed to load the schedules" problem={error} />
       ) : null}
diff --git a/frontend/packages/swarm-ui/src/pages/swarm/EgressCard.tsx b/frontend/packages/swarm-ui/src/pages/swarm/EgressCard.tsx
index 722f8476..08c01481 100644
--- a/frontend/packages/swarm-ui/src/pages/swarm/EgressCard.tsx
+++ b/frontend/packages/swarm-ui/src/pages/swarm/EgressCard.tsx
@@ -24,6 +24,7 @@ import {
 import { Button } from "../../ui/button/Button.js";
 import { LazyDisclosure } from "../../ui/disclosure/LazyDisclosure.js";
 import { Dialog } from "../../ui/dialog/Dialog.js";
+import { Hint } from "../../ui/hint/Hint.js";
 import "../../agent/detail/AgentLimits.css";
 import "./SwarmPage.css";
 
@@ -61,13 +62,13 @@ function DomainSection({
   return (
     <section class="ui-swarm-egress-section">
       <h3 class="ui-swarm-egress-heading">{heading}</h3>
-      <p class="ui-swarm-egress-help">{help}</p>
+      <Hint class="ui-swarm-egress-help">{help}</Hint>
       {errorPanel}
       {entries === null ? (
         errorPanel === null ? (
-          <span class="ui-agent-limits-muted" role="status">
+          <Hint as="span" role="status">
             loading the {kind === "deny" ? "denied" : "allowed"} domains…
-          </span>
+          </Hint>
         ) : null
       ) : (
         <>
diff --git a/frontend/packages/swarm-ui/src/pages/swarm/HivesCard.tsx b/frontend/packages/swarm-ui/src/pages/swarm/HivesCard.tsx
index 2d6bc8b5..bda0b2bd 100644
--- a/frontend/packages/swarm-ui/src/pages/swarm/HivesCard.tsx
+++ b/frontend/packages/swarm-ui/src/pages/swarm/HivesCard.tsx
@@ -16,6 +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 { ExternalLink } from "../../ui/external-link/ExternalLink.js";
 import { LazyDisclosure } from "../../ui/disclosure/LazyDisclosure.js";
 import { RelativeTime } from "../../ui/relative-time/RelativeTime.js";
 import {
@@ -25,6 +26,7 @@ import {
 import { fetchJson, usePolled } from "../../ui/polled/usePolled.js";
 import { Table, type TableColumn } from "../../ui/table/Table.js";
 import { TableSkeleton } from "../../ui/table/TableSkeleton.js";
+import { Toolbar } from "../../ui/toolbar/Toolbar.js";
 import { domainCell } from "../hive-domain.js";
 
 type Freshness = "fresh" | "stale" | "never_reported" | "unknown";
@@ -65,13 +67,7 @@ const COLUMNS: TableColumn<HiveStatus>[] = [
     render: (h) => {
       const { text, href } = domainCell(h);
       if (!text) return "—";
-      return href ? (
-        <a href={href} target="_blank" rel="noreferrer">
-          {text}
-        </a>
-      ) : (
-        text
-      );
+      return href ? <ExternalLink href={href}>{text}</ExternalLink> : text;
     },
     sortBy: (h) => domainCell(h).text,
     filterValue: (h) => domainCell(h).text,
@@ -129,14 +125,14 @@ function HiveRoster() {
 
   return (
     <>
-      <div class="ui-hives-refresh">
+      <Toolbar>
         <RefreshIntervalPicker
           id="hives-refresh"
           value={intervalMs}
           onChange={setIntervalMs}
           refreshing={refreshing}
         />
-      </div>
+      </Toolbar>
       {error ? (
         <ApiErrorPanel
           context="failed to load the hive roster"
diff --git a/frontend/packages/swarm-ui/src/pages/swarm/SwarmPage.css b/frontend/packages/swarm-ui/src/pages/swarm/SwarmPage.css
index 29efb5fc..3666dd77 100644
--- a/frontend/packages/swarm-ui/src/pages/swarm/SwarmPage.css
+++ b/frontend/packages/swarm-ui/src/pages/swarm/SwarmPage.css
@@ -2,12 +2,6 @@
 .ui-swarm-card {
   margin-block-end: 0.5em;
 }
-/* The roster's refresh picker, at the top right of the open card. */
-.ui-hives-refresh {
-  display: flex;
-  justify-content: flex-end;
-  margin-block-end: 0.5em;
-}
 /* The warning at the top of the beta notification router card. */
 .ui-swarm-beta {
   margin: 0 0 0.75em;
@@ -20,7 +14,6 @@
 /* The egress card: the swarm-wide allowed domains, one per line. */
 .ui-swarm-egress-help {
   margin: 0 0 0.75em;
-  color: var(--muted);
 }
 .ui-swarm-egress-list {
   list-style: none;
diff --git a/frontend/packages/swarm-ui/src/ui/action-row/ActionRow.css b/frontend/packages/swarm-ui/src/ui/action-row/ActionRow.css
new file mode 100644
index 00000000..ff18a1e2
--- /dev/null
+++ b/frontend/packages/swarm-ui/src/ui/action-row/ActionRow.css
@@ -0,0 +1,9 @@
+.ui-action-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75em;
+}
+.ui-action-row-end {
+  justify-content: flex-end;
+}
diff --git a/frontend/packages/swarm-ui/src/ui/action-row/ActionRow.tsx b/frontend/packages/swarm-ui/src/ui/action-row/ActionRow.tsx
new file mode 100644
index 00000000..cd62d29a
--- /dev/null
+++ b/frontend/packages/swarm-ui/src/ui/action-row/ActionRow.tsx
@@ -0,0 +1,24 @@
+// <ActionRow> — the row of buttons at the end of a form, a dialog or a
+// section: aligned on the centre line, wrapping when it is narrow, with one
+// gap. `end` pushes the buttons to the right edge.
+import type { ComponentChildren } from "preact";
+import "./ActionRow.css";
+
+export function ActionRow({
+  align = "start",
+  class: extraClass,
+  children,
+}: {
+  align?: "start" | "end";
+  class?: string;
+  children: ComponentChildren;
+}) {
+  const classes = [
+    "ui-action-row",
+    align === "end" && "ui-action-row-end",
+    extraClass,
+  ]
+    .filter(Boolean)
+    .join(" ");
+  return <div class={classes}>{children}</div>;
+}
diff --git a/frontend/packages/swarm-ui/src/ui/button/Button.css b/frontend/packages/swarm-ui/src/ui/button/Button.css
index 1c5e42a6..6558607f 100644
--- a/frontend/packages/swarm-ui/src/ui/button/Button.css
+++ b/frontend/packages/swarm-ui/src/ui/button/Button.css
@@ -20,6 +20,15 @@
   color: var(--fg);
   border: 1px solid var(--border);
 }
+/* `plain`: text only, no box, for a control that reads as a link in a row of
+   text (it keeps the touch-target height). */
+.ui-button-plain {
+  background: none;
+  color: inherit;
+  border: 0;
+  padding: 0;
+  text-align: left;
+}
 .ui-button:disabled {
   opacity: 0.6;
   cursor: default;
diff --git a/frontend/packages/swarm-ui/src/ui/button/Button.tsx b/frontend/packages/swarm-ui/src/ui/button/Button.tsx
index cdf77e4b..7311907f 100644
--- a/frontend/packages/swarm-ui/src/ui/button/Button.tsx
+++ b/frontend/packages/swarm-ui/src/ui/button/Button.tsx
@@ -7,7 +7,7 @@
 import type { ComponentChildren } from "preact";
 import "./Button.css";
 
-export type ButtonVariant = "primary" | "default";
+export type ButtonVariant = "primary" | "default" | "plain";
 
 export function Button({
   variant = "default",
diff --git a/frontend/packages/swarm-ui/src/ui/empty-state/EmptyState.css b/frontend/packages/swarm-ui/src/ui/empty-state/EmptyState.css
new file mode 100644
index 00000000..2c0d4ad7
--- /dev/null
+++ b/frontend/packages/swarm-ui/src/ui/empty-state/EmptyState.css
@@ -0,0 +1,8 @@
+.ui-empty-state {
+  margin: 0;
+  color: var(--muted);
+}
+.ui-empty-state-centered {
+  padding: 1.25em 0.75em;
+  text-align: center;
+}
diff --git a/frontend/packages/swarm-ui/src/ui/empty-state/EmptyState.tsx b/frontend/packages/swarm-ui/src/ui/empty-state/EmptyState.tsx
new file mode 100644
index 00000000..e178b895
--- /dev/null
+++ b/frontend/packages/swarm-ui/src/ui/empty-state/EmptyState.tsx
@@ -0,0 +1,19 @@
+// <EmptyState> — what a list or a section says when it holds nothing: "No runs
+// yet.", "none linked". Muted, with room around it. `Table`'s `emptyMessage`
+// and `FilterableView` use the same look through this component.
+import type { ComponentChildren } from "preact";
+import "./EmptyState.css";
+
+export function EmptyState({
+  centered = false,
+  children,
+}: {
+  centered?: boolean;
+  children: ComponentChildren;
+}) {
+  return (
+    <p class={"ui-empty-state" + (centered ? " ui-empty-state-centered" : "")}>
+      {children}
+    </p>
+  );
+}
diff --git a/frontend/packages/swarm-ui/src/ui/expandable-card/ExpandableCard.css b/frontend/packages/swarm-ui/src/ui/expandable-card/ExpandableCard.css
new file mode 100644
index 00000000..8208f2a8
--- /dev/null
+++ b/frontend/packages/swarm-ui/src/ui/expandable-card/ExpandableCard.css
@@ -0,0 +1,43 @@
+/* The head is the control: it reads as a row of text, not a boxed button. */
+.ui-expandable-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5em 0.75em;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.ui-expandable-head:focus-visible {
+  outline: 2px solid var(--purple);
+  outline-offset: 2px;
+}
+/* The placeholder head is not a control. */
+.ui-expandable-head-static {
+  cursor: default;
+}
+.ui-expandable-title {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.5em;
+}
+.ui-expandable-meta {
+  margin: 0;
+  color: var(--muted);
+}
+.ui-expandable-meta-row {
+  flex-basis: 100%;
+}
+.ui-expandable-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  margin-top: 0.6em;
+}
+.ui-expandable-body p {
+  margin: 0;
+}
diff --git a/frontend/packages/swarm-ui/src/ui/expandable-card/ExpandableCard.tsx b/frontend/packages/swarm-ui/src/ui/expandable-card/ExpandableCard.tsx
new file mode 100644
index 00000000..9f5c5482
--- /dev/null
+++ b/frontend/packages/swarm-ui/src/ui/expandable-card/ExpandableCard.tsx
@@ -0,0 +1,112 @@
+// <ExpandableCard> — a card in a list whose head is a button that opens its
+// body in place: a build, a classifier run. The head holds a title, a badge
+// and a line of meta (when it started, how long it took); the body is shown
+// only while the card is open. It is controlled (`open`, `onToggle`), so a
+// page can keep its open cards across a refresh and open one for the user.
+//
+// Not `ui/disclosure`: that is a `<details>` for one section of a page, and a
+// list of these needs the page to own which are open. The head is a real
+// `<button>` with `aria-expanded` and `aria-controls`.
+//
+// `ExpandableCardSkeleton` is its twin for a list that is loading: the same
+// card and the same head layout with a placeholder in each slot.
+import type { ComponentChildren } from "preact";
+import { Skeleton } from "../skeleton/Skeleton.js";
+import { Card } from "../card/Card.js";
+import "./ExpandableCard.css";
+
+function Head({
+  title,
+  badge,
+  meta,
+  metaOnOwnRow,
+}: {
+  title: ComponentChildren;
+  badge: ComponentChildren;
+  meta: ComponentChildren;
+  metaOnOwnRow: boolean;
+}) {
+  return (
+    <>
+      <span class="ui-expandable-title">{title}</span>
+      {badge}
+      <span
+        class={
+          "ui-expandable-meta" + (metaOnOwnRow ? " ui-expandable-meta-row" : "")
+        }
+      >
+        {meta}
+      </span>
+    </>
+  );
+}
+
+export function ExpandableCard({
+  id,
+  open,
+  onToggle,
+  title,
+  badge,
+  meta,
+  metaOnOwnRow = false,
+  class: extraClass,
+  children,
+}: {
+  /** The id of the card's element, for a link that scrolls to it. */
+  id: string;
+  open: boolean;
+  onToggle: () => void;
+  title: ComponentChildren;
+  badge: ComponentChildren;
+  meta: ComponentChildren;
+  /** Put the meta line on a row of its own under the title and badge. */
+  metaOnOwnRow?: boolean;
+  class?: string;
+  children: ComponentChildren;
+}) {
+  const bodyId = `${id}-body`;
+  return (
+    <Card class={extraClass}>
+      <div id={id}>
+        <button
+          type="button"
+          class="ui-expandable-head"
+          aria-expanded={open}
+          aria-controls={bodyId}
+          onClick={onToggle}
+        >
+          <Head
+            title={title}
+            badge={badge}
+            meta={meta}
+            metaOnOwnRow={metaOnOwnRow}
+          />
+        </button>
+        {open ? (
+          <div class="ui-expandable-body" id={bodyId}>
+            {children}
+          </div>
+        ) : null}
+      </div>
+    </Card>
+  );
+}
+
+export function ExpandableCardSkeleton({
+  metaOnOwnRow = false,
+}: {
+  metaOnOwnRow?: boolean;
+}) {
+  return (
+    <Card>
+      <div class="ui-expandable-head ui-expandable-head-static">
+        <Head
+          title={<Skeleton width="12em" />}
+          badge={<Skeleton width="5em" height="1.6em" />}
+          meta={<Skeleton width="14em" />}
+          metaOnOwnRow={metaOnOwnRow}
+        />
+      </div>
+    </Card>
+  );
+}
diff --git a/frontend/packages/swarm-ui/src/ui/external-link/ExternalLink.tsx b/frontend/packages/swarm-ui/src/ui/external-link/ExternalLink.tsx
new file mode 100644
index 00000000..988205e6
--- /dev/null
+++ b/frontend/packages/swarm-ui/src/ui/external-link/ExternalLink.tsx
@@ -0,0 +1,28 @@
+// <ExternalLink> — a link that opens another site in a new tab. It always
+// sets `rel="noopener noreferrer"`, so the opened page cannot reach this one
+// and is not told where the visitor came from.
+import type { ComponentChildren } from "preact";
+
+export function ExternalLink({
+  href,
+  title,
+  class: extraClass,
+  children,
+}: {
+  href: string;
+  title?: string;
+  class?: string;
+  children: ComponentChildren;
+}) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      title={title}
+      class={extraClass}
+    >
+      {children}
+    </a>
+  );
+}
diff --git a/frontend/packages/swarm-ui/src/ui/hint/Hint.css b/frontend/packages/swarm-ui/src/ui/hint/Hint.css
new file mode 100644
index 00000000..19da0b86
--- /dev/null
+++ b/frontend/packages/swarm-ui/src/ui/hint/Hint.css
@@ -0,0 +1,17 @@
+/* <Hint>: small supporting text. A `p` loses its default margin, so the page
+   that places it owns the spacing around it. */
+.ui-hint {
+  margin: 0;
+}
+.ui-hint-muted {
+  color: var(--muted);
+}
+.ui-hint-warn {
+  color: var(--yellow);
+}
+.ui-hint-error {
+  color: var(--red);
+}
+.ui-hint-ok {
+  color: var(--green);
+}
diff --git a/frontend/packages/swarm-ui/src/ui/hint/Hint.tsx b/frontend/packages/swarm-ui/src/ui/hint/Hint.tsx
new file mode 100644
index 00000000..48025cd3
--- /dev/null
+++ b/frontend/packages/swarm-ui/src/ui/hint/Hint.tsx
@@ -0,0 +1,39 @@
+// <Hint> — a line of small supporting text: helper text under a field, a
+// count, a status line, an inline problem or a success note. One component
+// for what each form and card used to restyle under its own class name, so
+// "muted", "warning", "error" and "ok" mean the same colour everywhere.
+//
+// `error` and `warn` are read out when they appear (`role="alert"` for an
+// error); the others are plain text unless the caller passes a `role`, such as
+// `status` for a line that changes after a save. `class` is for a page's
+// layout around the hint (a margin, a width), not for its colour.
+import type { ComponentChildren } from "preact";
+import "./Hint.css";
+
+export type HintTone = "muted" | "warn" | "error" | "ok";
+
+export function Hint({
+  tone = "muted",
+  as: Tag = "p",
+  role,
+  class: extraClass,
+  children,
+}: {
+  tone?: HintTone;
+  as?: "p" | "span" | "div";
+  role?: "status" | "alert";
+  class?: string;
+  children: ComponentChildren;
+}) {
+  const classes = ["ui-hint", `ui-hint-${tone}`, extraClass]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <Tag
+      class={classes}
+      role={role ?? (tone === "error" ? "alert" : undefined)}
+    >
+      {children}
+    </Tag>
+  );
+}
diff --git a/frontend/packages/swarm-ui/src/pages/schedules/SchedulesPage.css b/frontend/packages/swarm-ui/src/ui/toolbar/Toolbar.css
similarity index 52%
rename from frontend/packages/swarm-ui/src/pages/schedules/SchedulesPage.css
rename to frontend/packages/swarm-ui/src/ui/toolbar/Toolbar.css
index bf3bfebb..71218ac8 100644
--- a/frontend/packages/swarm-ui/src/pages/schedules/SchedulesPage.css
+++ b/frontend/packages/swarm-ui/src/ui/toolbar/Toolbar.css
@@ -1,6 +1,4 @@
-/* The bar at the top of the schedules card: the add button, then the refresh
-   picker, to the right. */
-.ui-schedules-bar {
+.ui-toolbar {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -8,3 +6,6 @@
   gap: 0.5em 0.75em;
   margin-block-end: 0.5em;
 }
+.ui-toolbar-start {
+  justify-content: flex-start;
+}
diff --git a/frontend/packages/swarm-ui/src/ui/toolbar/Toolbar.tsx b/frontend/packages/swarm-ui/src/ui/toolbar/Toolbar.tsx
new file mode 100644
index 00000000..4685b5d5
--- /dev/null
+++ b/frontend/packages/swarm-ui/src/ui/toolbar/Toolbar.tsx
@@ -0,0 +1,24 @@
+// <Toolbar> — the bar above a list or a card: filters, a count, the refresh
+// picker. Items sit on one line and wrap when narrow, aligned to the end by
+// default (where the refresh picker sits on every page that has one).
+import type { ComponentChildren } from "preact";
+import "./Toolbar.css";
+
+export function Toolbar({
+  justify = "end",
+  class: extraClass,
+  children,
+}: {
+  justify?: "start" | "end";
+  class?: string;
+  children: ComponentChildren;
+}) {
+  const classes = [
+    "ui-toolbar",
+    justify === "start" && "ui-toolbar-start",
+    extraClass,
+  ]
+    .filter(Boolean)
+    .join(" ");
+  return <div class={classes}>{children}</div>;
+}