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.

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;
+}

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>
+  );
+}

frontend/packages/swarm-ui/src/ui/section-heading/SectionHeading.css

@@ -0,0 +1,4 @@
+.ui-section-heading {
+  margin: 0;
+  font-size: 1em;
+}

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>;
+}