From 5d5df29687d0d392adacca79a56d16fc31fd6802 Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Fri, 6 Nov 2026 19:09:18 +0100
Subject: [PATCH] swarm-ui: shared code leaves page folders; SectionHeading and
 Preformatted replace per-page copies

durationLabel moves to util.ts, termPaths to agent/terminal/term-paths.ts,
StateBadges and tokenTotal to agent/state, and TryOutResult to
pages/review-common, so the builds, runs and agent pages no longer import
across page folders. SectionHeading is the body-size section heading the
create form and the egress card each styled; Preformatted is the scrolling
text block of the builds tail and the AGENTS.md view, which now share one
chrome and are both keyboard-scrollable. The components page shows both.
---
 .../src/agent/detail/AgentInstructions.css    |  12 +-
 .../src/agent/detail/AgentInstructions.tsx    |   5 +-
 .../src/agent/detail/AgentStateRow.tsx        |   7 +-
 .../swarm-ui/src/agent/roster/AgentCard.tsx   |   2 +-
 .../swarm-ui/src/agent/state/StateBadges.tsx  | 112 ++++++++++++++
 .../src/agent/terminal/AgentTermPreview.tsx   | 142 +-----------------
 .../src/agent/terminal/SubagentsMenu.tsx      |   2 +-
 .../swarm-ui/src/agent/terminal/term-paths.ts |  27 ++++
 .../swarm-ui/src/pages/ComponentsPage.tsx     |  20 +++
 .../swarm-ui/src/pages/CreateAgentForm.css    |   3 +-
 .../swarm-ui/src/pages/CreateAgentForm.tsx    |  13 +-
 .../src/pages/agents/AgentGroupPage.tsx       |   6 +-
 .../src/pages/agents/AgentTerminalPage.tsx    |   6 +-
 .../swarm-ui/src/pages/builds/BuildsPage.css  |   9 --
 .../swarm-ui/src/pages/builds/BuildsPage.tsx  |   5 +-
 .../TryOutResult.css                          |   0
 .../TryOutResult.tsx                          |   5 +-
 .../src/pages/review-runs/ReviewRuns.tsx      |   4 +-
 .../src/pages/review-runs/RunsTypes.ts        |  10 --
 .../src/pages/review-tryout/ReviewTryOut.tsx  |   2 +-
 .../swarm-ui/src/pages/swarm/EgressCard.tsx   |   3 +-
 .../swarm-ui/src/pages/swarm/SwarmPage.css    |   3 +-
 .../src/ui/preformatted/Preformatted.css      |  13 ++
 .../src/ui/preformatted/Preformatted.tsx      |  26 ++++
 .../src/ui/section-heading/SectionHeading.css |   4 +
 .../src/ui/section-heading/SectionHeading.tsx |  18 +++
 frontend/packages/swarm-ui/src/util.ts        |  10 ++
 .../swarm-ui/test/tidy-helpers.test.mjs       |  26 ++++
 28 files changed, 295 insertions(+), 200 deletions(-)
 create mode 100644 frontend/packages/swarm-ui/src/agent/state/StateBadges.tsx
 create mode 100644 frontend/packages/swarm-ui/src/agent/terminal/term-paths.ts
 rename frontend/packages/swarm-ui/src/pages/{review-tryout => review-common}/TryOutResult.css (100%)
 rename frontend/packages/swarm-ui/src/pages/{review-tryout => review-common}/TryOutResult.tsx (97%)
 create mode 100644 frontend/packages/swarm-ui/src/ui/preformatted/Preformatted.css
 create mode 100644 frontend/packages/swarm-ui/src/ui/preformatted/Preformatted.tsx
 create mode 100644 frontend/packages/swarm-ui/src/ui/section-heading/SectionHeading.css
 create mode 100644 frontend/packages/swarm-ui/src/ui/section-heading/SectionHeading.tsx
 create mode 100644 frontend/packages/swarm-ui/test/tidy-helpers.test.mjs

diff --git a/frontend/packages/swarm-ui/src/agent/detail/AgentInstructions.css b/frontend/packages/swarm-ui/src/agent/detail/AgentInstructions.css
index 5e6ed150..3bcf2cde 100644
--- a/frontend/packages/swarm-ui/src/agent/detail/AgentInstructions.css
+++ b/frontend/packages/swarm-ui/src/agent/detail/AgentInstructions.css
@@ -9,22 +9,12 @@
 .ui-agent-instructions-body {
   margin-top: 1em;
 }
-.ui-agent-instructions-text textarea,
-.ui-agent-instructions-theirs {
+.ui-agent-instructions-text textarea {
   font-family: var(--mono, ui-monospace, monospace);
   font-size: 0.9em;
   width: 100%;
   box-sizing: border-box;
 }
-.ui-agent-instructions-theirs {
-  margin: 0;
-  max-height: 16em;
-  overflow: auto;
-  white-space: pre-wrap;
-  padding: 0.5em;
-  border: 1px solid var(--border, currentColor);
-  border-radius: 4px;
-}
 .ui-agent-instructions-status {
   margin: 0;
   color: var(--muted);
diff --git a/frontend/packages/swarm-ui/src/agent/detail/AgentInstructions.tsx b/frontend/packages/swarm-ui/src/agent/detail/AgentInstructions.tsx
index e8577d14..8f45cf8e 100644
--- a/frontend/packages/swarm-ui/src/agent/detail/AgentInstructions.tsx
+++ b/frontend/packages/swarm-ui/src/agent/detail/AgentInstructions.tsx
@@ -18,6 +18,7 @@ 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 { Preformatted } from "../../ui/preformatted/Preformatted.js";
 import { Dialog } from "../../ui/dialog/Dialog.js";
 import { Panel } from "../../ui/panel/Panel.js";
 import { TextAreaField } from "../../ui/text-area-field/TextAreaField.js";
@@ -261,9 +262,9 @@ function InstructionsForm({
                   {agent} changed AGENTS.md since you started. Your text is kept
                   above. Here is the file now:
                 </p>
-                <pre class="ui-agent-instructions-theirs" tabIndex={0}>
+                <Preformatted wrap maxHeight="16em">
                   {theirs.content === "" ? "(empty)" : theirs.content}
-                </pre>
+                </Preformatted>
                 <ActionRow class="ui-agent-instructions-actions">
                   <Button onClick={keepMine}>
                     keep my text, replace {agent}'s changes
diff --git a/frontend/packages/swarm-ui/src/agent/detail/AgentStateRow.tsx b/frontend/packages/swarm-ui/src/agent/detail/AgentStateRow.tsx
index f691bc0f..2ad63798 100644
--- a/frontend/packages/swarm-ui/src/agent/detail/AgentStateRow.tsx
+++ b/frontend/packages/swarm-ui/src/agent/detail/AgentStateRow.tsx
@@ -7,11 +7,8 @@
 // an agent that is offline and so never reports. When the browser gives up on
 // the stream, a **reconnect** badge opens it again, as the terminal's does.
 import { Badge } from "@hive/shared/badge.js";
-import {
-  StateBadges,
-  termPaths,
-  tokenTotal,
-} from "../terminal/AgentTermPreview.js";
+import { StateBadges, tokenTotal } from "../state/StateBadges.js";
+import { termPaths } from "../terminal/term-paths.js";
 import { useSwarmAgentStateStream } from "../terminal/useSwarmAgentStateStream.js";
 import "./AgentStateRow.css";
 
diff --git a/frontend/packages/swarm-ui/src/agent/roster/AgentCard.tsx b/frontend/packages/swarm-ui/src/agent/roster/AgentCard.tsx
index 0f14d492..efa1e4a2 100644
--- a/frontend/packages/swarm-ui/src/agent/roster/AgentCard.tsx
+++ b/frontend/packages/swarm-ui/src/agent/roster/AgentCard.tsx
@@ -22,7 +22,7 @@ import { useDynamicTabs } from "../../shell/useDynamicTabs.js";
 import { AgentIcon } from "../AgentIcon.js";
 import { ClaudeLoginDialog } from "../claude-login/ClaudeLoginDialog.js";
 import { AgentDetail } from "../detail/AgentDetail.js";
-import { termPaths } from "../terminal/AgentTermPreview.js";
+import { termPaths } from "../terminal/term-paths.js";
 import { FRESHNESS, showsLoginNeeded, type AgentRow } from "../AgentTypes.js";
 import type { AgentActions } from "./AgentActions.js";
 import { WantedMenu } from "./WantedMenu.js";
diff --git a/frontend/packages/swarm-ui/src/agent/state/StateBadges.tsx b/frontend/packages/swarm-ui/src/agent/state/StateBadges.tsx
new file mode 100644
index 00000000..a50e6d5e
--- /dev/null
+++ b/frontend/packages/swarm-ui/src/agent/state/StateBadges.tsx
@@ -0,0 +1,112 @@
+import { Badge, type BadgeTone } from "@hive/shared/badge.js";
+import { RelativeTime } from "../../ui/relative-time/RelativeTime.js";
+import {
+  useSwarmAgentStateStream,
+  type TokenUsage,
+} from "../terminal/useSwarmAgentStateStream.js";
+
+// Ported, not imported, same call `useSwarmTermStream`'s own `appendRow`
+// already made for this file's sibling hook: `@hive/agent`'s equivalents
+// (`STATE_LABELS`/`tokenTotal`/`fmtTokens` in `Root.tsx`/`lib/format.ts`)
+// live in a different package this one doesn't otherwise depend on, and
+// a cross-package hop isn't worth it for three small, stable helpers.
+// Vocabulary (glyphless — the per-agent page's own glyphs are part of
+// its bigger consolidated status badge, not this smaller read-only one)
+// kept in exact parity with `Root.tsx`'s `STATE_LABELS` so "idle" here
+// means the same thing it means there.
+const TURN_STATE_TONE: Record<string, BadgeTone> = {
+  idle: "neutral",
+  thinking: "accent",
+  compacting: "warning",
+};
+
+export function tokenTotal(u: TokenUsage | null): number | null {
+  if (!u) return null;
+  // Matches `Root.tsx`'s own `tokenTotal`: input + both cache buckets,
+  // `output_tokens` deliberately excluded (shown in a title breakdown
+  // there, not carried at all here — this badge has no breakdown to put
+  // it in).
+  return (
+    (u.input_tokens ?? 0) +
+    (u.cache_read_input_tokens ?? 0) +
+    (u.cache_creation_input_tokens ?? 0)
+  );
+}
+
+function fmtTokens(n: number): string {
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + "M";
+  if (n >= 1_000) return Math.round(n / 1000) + "k";
+  return String(n);
+}
+
+// Turn state, agent state, model, ctx and cost, as the badges beside the
+// connection one. Siblings only, no wrapper: they sit in the caller's row.
+export function StateBadges({
+  header,
+  ctx,
+  cost,
+  withModel = true,
+}: {
+  header: NonNullable<ReturnType<typeof useSwarmAgentStateStream>["header"]>;
+  ctx: number | null;
+  cost: number | null;
+  // Off where the model is shown beside them, as in the details table.
+  withModel?: boolean;
+}) {
+  return (
+    <>
+      <Badge
+        tone={TURN_STATE_TONE[header.turn_state] ?? "neutral"}
+        value={
+          <>
+            {header.turn_state} (
+            <RelativeTime epochMs={Date.parse(header.turn_state_since)} />)
+          </>
+        }
+        title="how long the agent has been in this state"
+      />
+      {/* Only the non-boring case gets a badge — a healthy running
+          agent (`agent_state: "up"`) doesn't need one for the
+          obvious default. In practice this only ever fires for
+          "paused": `hive-agent` can only honestly publish "up" or
+          "paused" on this subject (see `AgentStateMsg::agent_state`'s
+          own doc), never "offline"/"destroyed" — a stopped or
+          destroyed agent publishes nothing at all. */}
+      {header.agent_state !== "up" && (
+        <Badge tone="warning" value={header.agent_state} />
+      )}
+      {withModel && (
+        <Badge
+          label="model"
+          value={header.model}
+          title={
+            header.resolved_model
+              ? `resolved to ${header.resolved_model}`
+              : undefined
+          }
+        />
+      )}
+      {withModel && (
+        <Badge
+          label="effort"
+          value={header.effort}
+          title={`set by: ${header.effort_source}`}
+        />
+      )}
+      {ctx !== null && (
+        <Badge
+          label="ctx"
+          value={fmtTokens(ctx)}
+          title="tokens used in the current context window"
+        />
+      )}
+      {cost !== null && (
+        <Badge
+          label="cost"
+          value={fmtTokens(cost)}
+          title="cumulative tokens billed across the last turn"
+        />
+      )}
+    </>
+  );
+}
diff --git a/frontend/packages/swarm-ui/src/agent/terminal/AgentTermPreview.tsx b/frontend/packages/swarm-ui/src/agent/terminal/AgentTermPreview.tsx
index bd82feb8..6d7055d0 100644
--- a/frontend/packages/swarm-ui/src/agent/terminal/AgentTermPreview.tsx
+++ b/frontend/packages/swarm-ui/src/agent/terminal/AgentTermPreview.tsx
@@ -42,11 +42,9 @@ import {
   useSwarmTermStream,
   type ConnectionState,
 } from "./useSwarmTermStream.js";
-import {
-  useSwarmAgentStateStream,
-  type TokenUsage,
-} from "./useSwarmAgentStateStream.js";
-import { RelativeTime } from "../../ui/relative-time/RelativeTime.js";
+import { useSwarmAgentStateStream } from "./useSwarmAgentStateStream.js";
+import { termPaths } from "./term-paths.js";
+import { StateBadges, tokenTotal } from "../state/StateBadges.js";
 import { AgentInputForm } from "./AgentInputForm.js";
 import { CancelTurnBadge } from "./CancelTurnBadge.js";
 import "./AgentTermPreview.css";
@@ -67,140 +65,6 @@ const CONNECTION_TONE: Record<ConnectionState, BadgeTone> = {
   closed: "negative",
 };
 
-// Ported, not imported, same call `useSwarmTermStream`'s own `appendRow`
-// already made for this file's sibling hook: `@hive/agent`'s equivalents
-// (`STATE_LABELS`/`tokenTotal`/`fmtTokens` in `Root.tsx`/`lib/format.ts`)
-// live in a different package this one doesn't otherwise depend on, and
-// a cross-package hop isn't worth it for three small, stable helpers.
-// Vocabulary (glyphless — the per-agent page's own glyphs are part of
-// its bigger consolidated status badge, not this smaller read-only one)
-// kept in exact parity with `Root.tsx`'s `STATE_LABELS` so "idle" here
-// means the same thing it means there.
-const TURN_STATE_TONE: Record<string, BadgeTone> = {
-  idle: "neutral",
-  thinking: "accent",
-  compacting: "warning",
-};
-
-export function tokenTotal(u: TokenUsage | null): number | null {
-  if (!u) return null;
-  // Matches `Root.tsx`'s own `tokenTotal`: input + both cache buckets,
-  // `output_tokens` deliberately excluded (shown in a title breakdown
-  // there, not carried at all here — this badge has no breakdown to put
-  // it in).
-  return (
-    (u.input_tokens ?? 0) +
-    (u.cache_read_input_tokens ?? 0) +
-    (u.cache_creation_input_tokens ?? 0)
-  );
-}
-
-function fmtTokens(n: number): string {
-  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + "M";
-  if (n >= 1_000) return Math.round(n / 1000) + "k";
-  return String(n);
-}
-
-// The paths one terminal is reached at. A subagent's terminal sits under its
-// agent's, and has no turn-state header: the swarm relays none for it.
-interface TermPaths {
-  label: string;
-  page: string;
-  stream: string;
-  state: string | null;
-}
-
-export function termPaths(agentName: string, subagent?: string): TermPaths {
-  const agent = `/agents/${encodeURIComponent(agentName)}`;
-  if (subagent === undefined) {
-    return {
-      label: agentName,
-      page: `${agent}/terminal`,
-      stream: `/api${agent}/term/stream`,
-      state: `/api${agent}/state/stream`,
-    };
-  }
-  const sub = `${agent}/subagents/${encodeURIComponent(subagent)}`;
-  return {
-    label: `${agentName}/${subagent}`,
-    page: `${sub}/terminal`,
-    stream: `/api${sub}/term/stream`,
-    state: null,
-  };
-}
-
-// Turn state, agent state, model, ctx and cost, as the badges beside the
-// connection one. Siblings only, no wrapper: they sit in the caller's row.
-export function StateBadges({
-  header,
-  ctx,
-  cost,
-  withModel = true,
-}: {
-  header: NonNullable<ReturnType<typeof useSwarmAgentStateStream>["header"]>;
-  ctx: number | null;
-  cost: number | null;
-  // Off where the model is shown beside them, as in the details table.
-  withModel?: boolean;
-}) {
-  return (
-    <>
-      <Badge
-        tone={TURN_STATE_TONE[header.turn_state] ?? "neutral"}
-        value={
-          <>
-            {header.turn_state} (
-            <RelativeTime epochMs={Date.parse(header.turn_state_since)} />)
-          </>
-        }
-        title="how long the agent has been in this state"
-      />
-      {/* Only the non-boring case gets a badge — a healthy running
-          agent (`agent_state: "up"`) doesn't need one for the
-          obvious default. In practice this only ever fires for
-          "paused": `hive-agent` can only honestly publish "up" or
-          "paused" on this subject (see `AgentStateMsg::agent_state`'s
-          own doc), never "offline"/"destroyed" — a stopped or
-          destroyed agent publishes nothing at all. */}
-      {header.agent_state !== "up" && (
-        <Badge tone="warning" value={header.agent_state} />
-      )}
-      {withModel && (
-        <Badge
-          label="model"
-          value={header.model}
-          title={
-            header.resolved_model
-              ? `resolved to ${header.resolved_model}`
-              : undefined
-          }
-        />
-      )}
-      {withModel && (
-        <Badge
-          label="effort"
-          value={header.effort}
-          title={`set by: ${header.effort_source}`}
-        />
-      )}
-      {ctx !== null && (
-        <Badge
-          label="ctx"
-          value={fmtTokens(ctx)}
-          title="tokens used in the current context window"
-        />
-      )}
-      {cost !== null && (
-        <Badge
-          label="cost"
-          value={fmtTokens(cost)}
-          title="cumulative tokens billed across the last turn"
-        />
-      )}
-    </>
-  );
-}
-
 export function AgentTermPreview({
   agentName,
   subagent,
diff --git a/frontend/packages/swarm-ui/src/agent/terminal/SubagentsMenu.tsx b/frontend/packages/swarm-ui/src/agent/terminal/SubagentsMenu.tsx
index 86da2631..a343a421 100644
--- a/frontend/packages/swarm-ui/src/agent/terminal/SubagentsMenu.tsx
+++ b/frontend/packages/swarm-ui/src/agent/terminal/SubagentsMenu.tsx
@@ -20,7 +20,7 @@ import { Badge } from "@hive/shared/badge.js";
 import { Panel } from "../../ui/panel/Panel.js";
 import { Popover } from "../../ui/popover/Popover.js";
 import { RelativeTime } from "../../ui/relative-time/RelativeTime.js";
-import { termPaths } from "./AgentTermPreview.js";
+import { termPaths } from "./term-paths.js";
 import {
   runLabel,
   runningLabel,
diff --git a/frontend/packages/swarm-ui/src/agent/terminal/term-paths.ts b/frontend/packages/swarm-ui/src/agent/terminal/term-paths.ts
new file mode 100644
index 00000000..23ab7a6e
--- /dev/null
+++ b/frontend/packages/swarm-ui/src/agent/terminal/term-paths.ts
@@ -0,0 +1,27 @@
+// The paths one terminal is reached at. A subagent's terminal sits under its
+// agent's, and has no turn-state header: the swarm relays none for it.
+interface TermPaths {
+  label: string;
+  page: string;
+  stream: string;
+  state: string | null;
+}
+
+export function termPaths(agentName: string, subagent?: string): TermPaths {
+  const agent = `/agents/${encodeURIComponent(agentName)}`;
+  if (subagent === undefined) {
+    return {
+      label: agentName,
+      page: `${agent}/terminal`,
+      stream: `/api${agent}/term/stream`,
+      state: `/api${agent}/state/stream`,
+    };
+  }
+  const sub = `${agent}/subagents/${encodeURIComponent(subagent)}`;
+  return {
+    label: `${agentName}/${subagent}`,
+    page: `${sub}/terminal`,
+    stream: `/api${sub}/term/stream`,
+    state: null,
+  };
+}
diff --git a/frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx b/frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx
index 8d797e5b..5d2939bf 100644
--- a/frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx
+++ b/frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx
@@ -45,6 +45,8 @@ import { FormStack } from "../ui/form-stack/FormStack.js";
 import { Hint, type HintTone } from "../ui/hint/Hint.js";
 import { FormResult } from "../ui/submit/FormResult.js";
 import type { SubmitState } from "../ui/submit/submit.js";
+import { Preformatted } from "../ui/preformatted/Preformatted.js";
+import { SectionHeading } from "../ui/section-heading/SectionHeading.js";
 import { Toolbar } from "../ui/toolbar/Toolbar.js";
 import { ConfirmDialog } from "../ui/confirm-dialog/ConfirmDialog.js";
 import { Popover } from "../ui/popover/Popover.js";
@@ -667,6 +669,24 @@ export function ComponentsPage() {
         ))}
       </Section>
 
+      <Section title="SectionHeading and Preformatted">
+        <Sample label="SectionHeading">
+          <SectionHeading>resource caps</SectionHeading>
+        </Sample>
+        <Sample label="Preformatted: scrolls sideways, and wrapped">
+          <Preformatted maxHeight="6em">
+            {
+              "error: builder for '/nix/store/…drv' failed with exit code 1; last 10 log lines follow below, long lines keep their length and scroll sideways"
+            }
+          </Preformatted>
+          <Preformatted wrap maxHeight="6em">
+            {
+              "A file's text, wrapped to the width of the block so it can be read without scrolling sideways."
+            }
+          </Preformatted>
+        </Sample>
+      </Section>
+
       <Section title="ExpandableCard">
         <Sample label="closed, open, and the loading twin">
           <ExpandableCard
diff --git a/frontend/packages/swarm-ui/src/pages/CreateAgentForm.css b/frontend/packages/swarm-ui/src/pages/CreateAgentForm.css
index 98e60cb5..0e2e2a4e 100644
--- a/frontend/packages/swarm-ui/src/pages/CreateAgentForm.css
+++ b/frontend/packages/swarm-ui/src/pages/CreateAgentForm.css
@@ -75,8 +75,7 @@
   color: var(--muted);
 }
 .create-agent-heading {
-  margin: 0.5em 0 0;
-  font-size: 1em;
+  margin-top: 0.5em;
 }
 .create-agent-footer {
   display: flex;
diff --git a/frontend/packages/swarm-ui/src/pages/CreateAgentForm.tsx b/frontend/packages/swarm-ui/src/pages/CreateAgentForm.tsx
index 630a3f66..7ff3f85f 100644
--- a/frontend/packages/swarm-ui/src/pages/CreateAgentForm.tsx
+++ b/frontend/packages/swarm-ui/src/pages/CreateAgentForm.tsx
@@ -48,6 +48,7 @@ import {
 import { CheckboxField } from "../ui/checkbox-field/CheckboxField.js";
 import { FormField } from "../ui/form-field/FormField.js";
 import { Hint } from "../ui/hint/Hint.js";
+import { SectionHeading } from "../ui/section-heading/SectionHeading.js";
 import { useSubmit } from "../ui/submit/useSubmit.js";
 import { MultiselectFilterOptions } from "../ui/multiselect-filter/MultiselectFilter.js";
 import {
@@ -456,7 +457,9 @@ export function CreateAgentForm({
                 Optional: leave a box empty to set nothing, and the hive's or
                 the agent's own value applies.
               </p>
-              <h3 class="create-agent-heading">resource caps</h3>
+              <SectionHeading class="create-agent-heading">
+                resource caps
+              </SectionHeading>
               <LimitsFields
                 idPrefix="create-limits"
                 cpu={cpu}
@@ -464,7 +467,9 @@ export function CreateAgentForm({
                 onCpu={setCpu}
                 onMemory={setMemory}
               />
-              <h3 class="create-agent-heading">inference</h3>
+              <SectionHeading class="create-agent-heading">
+                inference
+              </SectionHeading>
               <InferenceFields
                 idPrefix="create-inference"
                 draft={inference}
@@ -496,7 +501,9 @@ export function CreateAgentForm({
                   today's literal behaviour: mara's call on this copy was to
                   read as finished, not as a running commentary on partial
                   implementation. */}
-              <h3 class="create-agent-heading">what this creates</h3>
+              <SectionHeading class="create-agent-heading">
+                what this creates
+              </SectionHeading>
               <p>
                 Creating queues everything a new agent needs: a swarm-level
                 identity, a config repo on the forge with the operator added as
diff --git a/frontend/packages/swarm-ui/src/pages/agents/AgentGroupPage.tsx b/frontend/packages/swarm-ui/src/pages/agents/AgentGroupPage.tsx
index 045b3af3..876701e8 100644
--- a/frontend/packages/swarm-ui/src/pages/agents/AgentGroupPage.tsx
+++ b/frontend/packages/swarm-ui/src/pages/agents/AgentGroupPage.tsx
@@ -15,10 +15,8 @@ import { Badge } from "@hive/shared/badge.js";
 import { CloseIcon, ExpandIcon } from "@hive/shared/icons.js";
 import { AgentIcon } from "../../agent/AgentIcon.js";
 import { SubagentsMenu } from "../../agent/terminal/SubagentsMenu.js";
-import {
-  AgentTermPreview,
-  termPaths,
-} from "../../agent/terminal/AgentTermPreview.js";
+import { AgentTermPreview } from "../../agent/terminal/AgentTermPreview.js";
+import { termPaths } from "../../agent/terminal/term-paths.js";
 import {
   agentsIn,
   groupHref,
diff --git a/frontend/packages/swarm-ui/src/pages/agents/AgentTerminalPage.tsx b/frontend/packages/swarm-ui/src/pages/agents/AgentTerminalPage.tsx
index 0b1e22c9..bec3fa40 100644
--- a/frontend/packages/swarm-ui/src/pages/agents/AgentTerminalPage.tsx
+++ b/frontend/packages/swarm-ui/src/pages/agents/AgentTerminalPage.tsx
@@ -15,10 +15,8 @@ import { Badge } from "@hive/shared/badge.js";
 import { AgentDetailPopover } from "../../agent/detail/AgentDetailPopover.js";
 import { AgentIcon } from "../../agent/AgentIcon.js";
 import { SubagentsMenu } from "../../agent/terminal/SubagentsMenu.js";
-import {
-  AgentTermPreview,
-  termPaths,
-} from "../../agent/terminal/AgentTermPreview.js";
+import { AgentTermPreview } from "../../agent/terminal/AgentTermPreview.js";
+import { termPaths } from "../../agent/terminal/term-paths.js";
 import { useAgentFavicon } from "../../agent/terminal/useAgentFavicon.js";
 import {
   groupHref,
diff --git a/frontend/packages/swarm-ui/src/pages/builds/BuildsPage.css b/frontend/packages/swarm-ui/src/pages/builds/BuildsPage.css
index 50bfd3df..5745fc34 100644
--- a/frontend/packages/swarm-ui/src/pages/builds/BuildsPage.css
+++ b/frontend/packages/swarm-ui/src/pages/builds/BuildsPage.css
@@ -10,12 +10,3 @@
   overflow-wrap: anywhere;
 }
 /* What nix printed: kept as printed, scrolls sideways rather than wrapping. */
-.ui-builds-tail {
-  margin: 0;
-  padding: 0.6em 0.75em;
-  max-height: 24em;
-  overflow: auto;
-  border-radius: 0.4em;
-  background: color-mix(in srgb, var(--crust) 60%, transparent);
-  font-size: 0.85em;
-}
diff --git a/frontend/packages/swarm-ui/src/pages/builds/BuildsPage.tsx b/frontend/packages/swarm-ui/src/pages/builds/BuildsPage.tsx
index da5a3b26..a351b265 100644
--- a/frontend/packages/swarm-ui/src/pages/builds/BuildsPage.tsx
+++ b/frontend/packages/swarm-ui/src/pages/builds/BuildsPage.tsx
@@ -15,6 +15,7 @@ import {
   ExpandableCardListSkeleton,
 } from "../../ui/expandable-card/ExpandableCard.js";
 import { Hint } from "../../ui/hint/Hint.js";
+import { Preformatted } from "../../ui/preformatted/Preformatted.js";
 import { Toolbar } from "../../ui/toolbar/Toolbar.js";
 import { LazyDisclosure } from "../../ui/disclosure/LazyDisclosure.js";
 import {
@@ -23,7 +24,7 @@ import {
 } from "../../ui/refresh-interval/RefreshInterval.js";
 import { fetchJson, usePolled } from "../../ui/polled/usePolled.js";
 import { RelativeTime } from "../../ui/relative-time/RelativeTime.js";
-import { durationLabel } from "../review-runs/RunsTypes.js";
+import { durationLabel } from "../../util.js";
 import {
   OUTCOME_LABEL,
   OUTCOME_TONE,
@@ -80,7 +81,7 @@ function BuildCard({
         <>
           <Hint>{body.label}</Hint>
           {body.preformatted ? (
-            <pre class="ui-builds-tail">{body.text}</pre>
+            <Preformatted>{body.text}</Preformatted>
           ) : (
             <p class="ui-builds-text">{body.text}</p>
           )}
diff --git a/frontend/packages/swarm-ui/src/pages/review-tryout/TryOutResult.css b/frontend/packages/swarm-ui/src/pages/review-common/TryOutResult.css
similarity index 100%
rename from frontend/packages/swarm-ui/src/pages/review-tryout/TryOutResult.css
rename to frontend/packages/swarm-ui/src/pages/review-common/TryOutResult.css
diff --git a/frontend/packages/swarm-ui/src/pages/review-tryout/TryOutResult.tsx b/frontend/packages/swarm-ui/src/pages/review-common/TryOutResult.tsx
similarity index 97%
rename from frontend/packages/swarm-ui/src/pages/review-tryout/TryOutResult.tsx
rename to frontend/packages/swarm-ui/src/pages/review-common/TryOutResult.tsx
index 15138c4c..0db67463 100644
--- a/frontend/packages/swarm-ui/src/pages/review-tryout/TryOutResult.tsx
+++ b/frontend/packages/swarm-ui/src/pages/review-common/TryOutResult.tsx
@@ -6,7 +6,10 @@
 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 type {
+  TryOutResult as Result,
+  TryOutRow,
+} from "../review-tryout/TryOutTypes.js";
 import "./TryOutResult.css";
 
 const VERDICT_LABEL: Record<TryOutRow["verdict"], string> = {
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 d2fa998e..c5fdf32f 100644
--- a/frontend/packages/swarm-ui/src/pages/review-runs/ReviewRuns.tsx
+++ b/frontend/packages/swarm-ui/src/pages/review-runs/ReviewRuns.tsx
@@ -21,13 +21,13 @@ import {
 } from "../../ui/refresh-interval/RefreshInterval.js";
 import { fetchJson, usePolled } from "../../ui/polled/usePolled.js";
 import { RelativeTime } from "../../ui/relative-time/RelativeTime.js";
-import { TryOutResult } from "../review-tryout/TryOutResult.js";
+import { TryOutResult } from "../review-common/TryOutResult.js";
+import { durationLabel } from "../../util.js";
 import {
   OUTCOME_LABEL,
   OUTCOME_TONE,
   TRIGGER_LABEL,
   classificationCount,
-  durationLabel,
   type ClassifierRun,
 } from "./RunsTypes.js";
 import "./ReviewRuns.css";
diff --git a/frontend/packages/swarm-ui/src/pages/review-runs/RunsTypes.ts b/frontend/packages/swarm-ui/src/pages/review-runs/RunsTypes.ts
index c07563e1..a4860115 100644
--- a/frontend/packages/swarm-ui/src/pages/review-runs/RunsTypes.ts
+++ b/frontend/packages/swarm-ui/src/pages/review-runs/RunsTypes.ts
@@ -60,16 +60,6 @@ export const TRIGGER_LABEL: Record<RunTrigger, string> = {
   review: "requested review",
 };
 
-/** How long a run took, as `45s`, `3m 12s` or `1h 4m`. A clock that ran
- * backwards reads as `0s`. */
-export function durationLabel(startedUnix: number, finishedUnix: number) {
-  const total = Math.max(0, Math.round(finishedUnix - startedUnix));
-  if (total < 60) return `${total}s`;
-  const minutes = Math.floor(total / 60);
-  if (minutes < 60) return `${minutes}m ${total % 60}s`;
-  return `${Math.floor(minutes / 60)}h ${minutes % 60}m`;
-}
-
 /** How many classifications ran, in words. A run that never got as far as
  * running any has no rows. */
 export function classificationCount(run: ClassifierRun): string {
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 5948fa8b..e7093a56 100644
--- a/frontend/packages/swarm-ui/src/pages/review-tryout/ReviewTryOut.tsx
+++ b/frontend/packages/swarm-ui/src/pages/review-tryout/ReviewTryOut.tsx
@@ -33,7 +33,7 @@ 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";
-import { TryOutResult } from "./TryOutResult.js";
+import { TryOutResult } from "../review-common/TryOutResult.js";
 import {
   addProblem,
   draftFromRule,
diff --git a/frontend/packages/swarm-ui/src/pages/swarm/EgressCard.tsx b/frontend/packages/swarm-ui/src/pages/swarm/EgressCard.tsx
index 08c01481..3fb165e6 100644
--- a/frontend/packages/swarm-ui/src/pages/swarm/EgressCard.tsx
+++ b/frontend/packages/swarm-ui/src/pages/swarm/EgressCard.tsx
@@ -25,6 +25,7 @@ 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 { SectionHeading } from "../../ui/section-heading/SectionHeading.js";
 import "../../agent/detail/AgentLimits.css";
 import "./SwarmPage.css";
 
@@ -61,7 +62,7 @@ function DomainSection({
   const note = kind === "deny" ? behindNote(behind) : null;
   return (
     <section class="ui-swarm-egress-section">
-      <h3 class="ui-swarm-egress-heading">{heading}</h3>
+      <SectionHeading class="ui-swarm-egress-heading">{heading}</SectionHeading>
       <Hint class="ui-swarm-egress-help">{help}</Hint>
       {errorPanel}
       {entries === null ? (
diff --git a/frontend/packages/swarm-ui/src/pages/swarm/SwarmPage.css b/frontend/packages/swarm-ui/src/pages/swarm/SwarmPage.css
index 3666dd77..56ce0370 100644
--- a/frontend/packages/swarm-ui/src/pages/swarm/SwarmPage.css
+++ b/frontend/packages/swarm-ui/src/pages/swarm/SwarmPage.css
@@ -36,8 +36,7 @@
   border-top: 1px dashed var(--border);
 }
 .ui-swarm-egress-heading {
-  margin: 0 0 0.35em;
-  font-size: 1em;
+  margin-bottom: 0.35em;
 }
 .ui-swarm-egress-behind {
   margin: 0 0 0.75em;
diff --git a/frontend/packages/swarm-ui/src/ui/preformatted/Preformatted.css b/frontend/packages/swarm-ui/src/ui/preformatted/Preformatted.css
new file mode 100644
index 00000000..d61e4e4c
--- /dev/null
+++ b/frontend/packages/swarm-ui/src/ui/preformatted/Preformatted.css
@@ -0,0 +1,13 @@
+.ui-preformatted {
+  margin: 0;
+  padding: 0.6em 0.75em;
+  overflow: auto;
+  border: 1px solid var(--border, currentColor);
+  border-radius: 0.4em;
+  background: color-mix(in srgb, var(--crust) 60%, transparent);
+  font-family: var(--mono, ui-monospace, monospace);
+  font-size: 0.85em;
+}
+.ui-preformatted-wrap {
+  white-space: pre-wrap;
+}
diff --git a/frontend/packages/swarm-ui/src/ui/preformatted/Preformatted.tsx b/frontend/packages/swarm-ui/src/ui/preformatted/Preformatted.tsx
new file mode 100644
index 00000000..63fd1030
--- /dev/null
+++ b/frontend/packages/swarm-ui/src/ui/preformatted/Preformatted.tsx
@@ -0,0 +1,26 @@
+// <Preformatted> — a block of text kept as it is: a build's log tail, a file's
+// contents. It scrolls when it is taller than `maxHeight`, and the block takes
+// keyboard focus so a keyboard user can scroll it. A log keeps its long lines
+// and scrolls sideways; text meant to be read (`wrap`) breaks them.
+import "./Preformatted.css";
+
+export function Preformatted({
+  wrap = false,
+  maxHeight = "24em",
+  children,
+}: {
+  wrap?: boolean;
+  /** Any CSS length. */
+  maxHeight?: string;
+  children: string;
+}) {
+  return (
+    <pre
+      class={"ui-preformatted" + (wrap ? " ui-preformatted-wrap" : "")}
+      style={{ maxHeight }}
+      tabIndex={0}
+    >
+      {children}
+    </pre>
+  );
+}
diff --git a/frontend/packages/swarm-ui/src/ui/section-heading/SectionHeading.css b/frontend/packages/swarm-ui/src/ui/section-heading/SectionHeading.css
new file mode 100644
index 00000000..3fac84a9
--- /dev/null
+++ b/frontend/packages/swarm-ui/src/ui/section-heading/SectionHeading.css
@@ -0,0 +1,4 @@
+.ui-section-heading {
+  margin: 0;
+  font-size: 1em;
+}
diff --git a/frontend/packages/swarm-ui/src/ui/section-heading/SectionHeading.tsx b/frontend/packages/swarm-ui/src/ui/section-heading/SectionHeading.tsx
new file mode 100644
index 00000000..496958b6
--- /dev/null
+++ b/frontend/packages/swarm-ui/src/ui/section-heading/SectionHeading.tsx
@@ -0,0 +1,18 @@
+// <SectionHeading> — the heading of one section inside a page or a card: body
+// text size, bold, no margin of its own. A page that needs space around it
+// passes a `class` for the margin; the size and weight are the same everywhere.
+import type { ComponentChildren } from "preact";
+import "./SectionHeading.css";
+
+export function SectionHeading({
+  as: Tag = "h3",
+  class: extraClass,
+  children,
+}: {
+  as?: "h2" | "h3" | "h4";
+  class?: string;
+  children: ComponentChildren;
+}) {
+  const classes = ["ui-section-heading", extraClass].filter(Boolean).join(" ");
+  return <Tag class={classes}>{children}</Tag>;
+}
diff --git a/frontend/packages/swarm-ui/src/util.ts b/frontend/packages/swarm-ui/src/util.ts
index 7b8f9e4e..098574f7 100644
--- a/frontend/packages/swarm-ui/src/util.ts
+++ b/frontend/packages/swarm-ui/src/util.ts
@@ -31,3 +31,13 @@ export function fmtAgo(ageSeconds: number): string {
   if (age < 86400) return RTF.format(-Math.floor(age / 3600), "hour");
   return RTF.format(-Math.floor(age / 86400), "day");
 }
+
+/** How long a run took, as `45s`, `3m 12s` or `1h 4m`. A clock that ran
+ * backwards reads as `0s`. */
+export function durationLabel(startedUnix: number, finishedUnix: number) {
+  const total = Math.max(0, Math.round(finishedUnix - startedUnix));
+  if (total < 60) return `${total}s`;
+  const minutes = Math.floor(total / 60);
+  if (minutes < 60) return `${minutes}m ${total % 60}s`;
+  return `${Math.floor(minutes / 60)}h ${minutes % 60}m`;
+}
diff --git a/frontend/packages/swarm-ui/test/tidy-helpers.test.mjs b/frontend/packages/swarm-ui/test/tidy-helpers.test.mjs
new file mode 100644
index 00000000..ee314abd
--- /dev/null
+++ b/frontend/packages/swarm-ui/test/tidy-helpers.test.mjs
@@ -0,0 +1,26 @@
+// Two helpers that used to live in page folders: how long a run took, and the
+// paths one terminal is reached at.
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { durationLabel } from "../src/util.ts";
+import { termPaths } from "../src/agent/terminal/term-paths.ts";
+
+test("durationLabel names seconds, minutes and hours", () => {
+  assert.equal(durationLabel(0, 45), "45s");
+  assert.equal(durationLabel(0, 192), "3m 12s");
+  assert.equal(durationLabel(0, 3840), "1h 4m");
+});
+
+test("durationLabel reads a clock that ran backwards as 0s", () => {
+  assert.equal(durationLabel(100, 90), "0s");
+});
+
+test("an agent's terminal has a turn-state stream, a subagent's has none", () => {
+  const agent = termPaths("iris");
+  assert.equal(agent.page, "/agents/iris/terminal");
+  assert.equal(agent.state, "/api/agents/iris/state/stream");
+  const sub = termPaths("iris", "t 1");
+  assert.equal(sub.label, "iris/t 1");
+  assert.equal(sub.page, "/agents/iris/subagents/t%201/terminal");
+  assert.equal(sub.state, null);
+});