diff --git a/frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx b/frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx
index 3f02ef59..c5024a27 100644
--- a/frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx
+++ b/frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx
@@ -41,6 +41,7 @@ import {
   ExpandableCardListSkeleton,
 } from "../ui/expandable-card/ExpandableCard.js";
 import { ExternalLink } from "../ui/external-link/ExternalLink.js";
+import { FieldGrid, FieldGridFull } from "../ui/field-grid/FieldGrid.js";
 import { FormStack } from "../ui/form-stack/FormStack.js";
 import { Hint, type HintTone } from "../ui/hint/Hint.js";
 import { FormResult } from "../ui/submit/FormResult.js";
@@ -649,6 +650,39 @@ export function ComponentsPage() {
         </Sample>
       </Section>
 
+      <Section title="FieldGrid">
+        <Sample label="FieldGrid: equal columns, one gap; FieldGridFull spans the row">
+          <FieldGrid>
+            <TextField
+              id="components-grid-a"
+              label="input"
+              value=""
+              onInput={() => {}}
+            />
+            <TextField
+              id="components-grid-b"
+              label="output"
+              value=""
+              onInput={() => {}}
+            />
+            <TextField
+              id="components-grid-c"
+              label="cache read"
+              value=""
+              onInput={() => {}}
+            />
+            <FieldGridFull>
+              <TextField
+                id="components-grid-d"
+                label="URL"
+                value=""
+                onInput={() => {}}
+              />
+            </FieldGridFull>
+          </FieldGrid>
+        </Sample>
+      </Section>
+
       <Section title="FormStack and FormResult">
         <Sample label="FormStack: fields and buttons in one column">
           <FormStack onSubmit={(e) => e.preventDefault()}>
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 17f43a36..1d373ce1 100644
--- a/frontend/packages/swarm-ui/src/pages/review-settings/ClassifierSettings.css
+++ b/frontend/packages/swarm-ui/src/pages/review-settings/ClassifierSettings.css
@@ -1,23 +1,11 @@
-/* The settings form: the fields wrap in a row, the provider fields on a row of
- * their own under the ACP runtime, then the save action. */
+/* The settings form: the fields sit on a `FieldGrid`, the provider fields in a
+ * group of their own under the ACP runtime, then the save action. */
 .ui-classifier-settings {
   display: flex;
   flex-direction: column;
   gap: 1em;
   margin-top: 1em;
 }
-/* One grid for every group of fields: each field has the same width and the
-   same edges at any width, and a label that wraps cannot push one input lower
-   than its neighbour's. */
-.ui-classifier-settings-fields {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
-  gap: 0.75em;
-}
-/* A field that needs the whole row (a URL, a model name). */
-.ui-classifier-settings-wide {
-  grid-column: 1 / -1;
-}
 /* The provider fields, under their own heading. */
 .ui-classifier-settings-group {
   display: flex;
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 cc26bb8f..3ce8bd6a 100644
--- a/frontend/packages/swarm-ui/src/pages/review-settings/ClassifierSettings.tsx
+++ b/frontend/packages/swarm-ui/src/pages/review-settings/ClassifierSettings.tsx
@@ -11,6 +11,7 @@ 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 { FieldGrid, FieldGridFull } from "../../ui/field-grid/FieldGrid.js";
 import { Hint } from "../../ui/hint/Hint.js";
 import { Disclosure } from "../../ui/disclosure/Disclosure.js";
 import { SelectField } from "../../ui/select-field/SelectField.js";
@@ -143,7 +144,7 @@ export function ClassifierSettings() {
       ) : null}
       {draft ? (
         <form class="ui-classifier-settings" onSubmit={(e) => void save(e)}>
-          <div class="ui-classifier-settings-fields">
+          <FieldGrid>
             <SelectField
               id="classifier-runtime"
               label="runtime"
@@ -176,12 +177,12 @@ export function ClassifierSettings() {
               pattern="[0-9]+"
               onInput={(max) => edit({ ...draft, max })}
             />
-          </div>
+          </FieldGrid>
           {draft.runtime === "acp" ? (
             <fieldset class="ui-classifier-settings-group">
               <legend>provider</legend>
-              <div class="ui-classifier-settings-fields">
-                <div class="ui-classifier-settings-wide">
+              <FieldGrid>
+                <FieldGridFull>
                   <TextField
                     id="classifier-acp-url"
                     label="URL"
@@ -189,8 +190,8 @@ export function ClassifierSettings() {
                     placeholder="https://llm.example/v1"
                     onInput={(acpUrl) => edit({ ...draft, acpUrl })}
                   />
-                </div>
-                <div class="ui-classifier-settings-wide">
+                </FieldGridFull>
+                <FieldGridFull>
                   <TextField
                     id="classifier-acp-model"
                     label="model"
@@ -198,7 +199,7 @@ export function ClassifierSettings() {
                     placeholder="Qwen/Qwen3-35B"
                     onInput={(acpModel) => edit({ ...draft, acpModel })}
                   />
-                </div>
+                </FieldGridFull>
                 <TextField
                   id="classifier-acp-price-input"
                   label="input price"
@@ -227,7 +228,7 @@ export function ClassifierSettings() {
                     edit({ ...draft, priceCacheWrite })
                   }
                 />
-              </div>
+              </FieldGrid>
               <p class="ui-classifier-settings-note">
                 Prices are in USD per million tokens.
               </p>
diff --git a/frontend/packages/swarm-ui/src/pages/review-tryout/ClassificationEditor.tsx b/frontend/packages/swarm-ui/src/pages/review-tryout/ClassificationEditor.tsx
index 63a4d63d..f28b6fd8 100644
--- a/frontend/packages/swarm-ui/src/pages/review-tryout/ClassificationEditor.tsx
+++ b/frontend/packages/swarm-ui/src/pages/review-tryout/ClassificationEditor.tsx
@@ -2,6 +2,7 @@
 // description (the prompt the model answers), which answer passes, and how
 // certain the model has to be for its answer to count.
 import { Button } from "../../ui/button/Button.js";
+import { FieldGrid } from "../../ui/field-grid/FieldGrid.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";
@@ -41,7 +42,7 @@ export function ClassificationEditor({
         placeholder="what to look for in the PR, e.g. does it add a naive datetime?"
         onInput={(description) => onChange({ ...draft, description })}
       />
-      <div class="ui-tryout-classification-row">
+      <FieldGrid min="12em" class="ui-tryout-classification-row">
         <SelectField
           id={`${id}-polarity`}
           label="polarity"
@@ -59,7 +60,7 @@ export function ClassificationEditor({
           onInput={(threshold) => onChange({ ...draft, threshold })}
         />
         {onRemove ? <Button onClick={onRemove}>remove</Button> : null}
-      </div>
+      </FieldGrid>
     </div>
   );
 }
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 33c11710..87917308 100644
--- a/frontend/packages/swarm-ui/src/pages/review-tryout/ReviewTryOut.css
+++ b/frontend/packages/swarm-ui/src/pages/review-tryout/ReviewTryOut.css
@@ -12,17 +12,10 @@
   gap: 1em;
   margin-top: 1em;
 }
-.ui-tryout-target {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75em;
-}
-.ui-tryout-target > * {
-  flex: 1 1 14em;
-}
+/* The button sits at the foot of its cell, beside the inputs. */
 .ui-tryout-target > button {
-  flex: none;
-  align-self: flex-end;
+  align-self: end;
+  justify-self: start;
 }
 .ui-tryout-loaded {
   margin: 0;
@@ -37,16 +30,10 @@
   border-radius: 0.5em;
 }
 .ui-tryout-classification-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  gap: 0.75em;
-}
-.ui-tryout-classification-row > * {
-  flex: 1 1 12em;
+  align-items: end;
 }
 .ui-tryout-classification-row > button {
-  flex: none;
+  justify-self: start;
 }
 .ui-tryout-hint {
   margin: 0;
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 e7093a56..1178cf19 100644
--- a/frontend/packages/swarm-ui/src/pages/review-tryout/ReviewTryOut.tsx
+++ b/frontend/packages/swarm-ui/src/pages/review-tryout/ReviewTryOut.tsx
@@ -27,6 +27,7 @@ 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 { FieldGrid } from "../../ui/field-grid/FieldGrid.js";
 import { ConfirmDialog } from "../../ui/confirm-dialog/ConfirmDialog.js";
 import { Disclosure } from "../../ui/disclosure/Disclosure.js";
 import { ExternalLink } from "../../ui/external-link/ExternalLink.js";
@@ -332,7 +333,7 @@ export function ReviewTryOut() {
           the repo's rules.
         </p>
         <form class="ui-tryout-form" onSubmit={(e) => void run(e)}>
-          <div class="ui-tryout-target">
+          <FieldGrid class="ui-tryout-target">
             <TextField
               id="tryout-repo"
               label="repo"
@@ -358,7 +359,7 @@ export function ReviewTryOut() {
             >
               {loadingRules ? "loading…" : "load the repo's rules"}
             </Button>
-          </div>
+          </FieldGrid>
           {repoChoicesError ? (
             <ApiErrorPanel
               context="the repos with an open PR could not be listed"
diff --git a/frontend/packages/swarm-ui/src/pages/schedules/ScheduleForm.css b/frontend/packages/swarm-ui/src/pages/schedules/ScheduleForm.css
index 1cc630de..8ddfd76b 100644
--- a/frontend/packages/swarm-ui/src/pages/schedules/ScheduleForm.css
+++ b/frontend/packages/swarm-ui/src/pages/schedules/ScheduleForm.css
@@ -1,6 +1,6 @@
 /* The form fills its card; fields stack with the page's usual gap. The
-   cadence controls sit in one wrapping row so "repeats / every / unit /
-   starts at" read as one sentence on a wide card and stack on a narrow one. */
+   cadence controls sit on a `FieldGrid`, so "repeats / every / unit / starts
+   at" read as one row on a wide card and stack on a narrow one. */
 .ui-schedule-form {
   display: flex;
   flex-direction: column;
@@ -20,15 +20,6 @@
   max-height: none;
   overflow-y: visible;
 }
-.ui-schedule-form-cadence {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75em;
-}
-.ui-schedule-form-cadence > .ui-form-field {
-  width: auto;
-  flex: 1 1 9em;
-}
 .ui-schedule-form-hint {
   font-size: 0.85em;
 }
diff --git a/frontend/packages/swarm-ui/src/pages/schedules/ScheduleForm.tsx b/frontend/packages/swarm-ui/src/pages/schedules/ScheduleForm.tsx
index 15f1ff12..67275e97 100644
--- a/frontend/packages/swarm-ui/src/pages/schedules/ScheduleForm.tsx
+++ b/frontend/packages/swarm-ui/src/pages/schedules/ScheduleForm.tsx
@@ -13,6 +13,7 @@ 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 { FieldGrid } from "../../ui/field-grid/FieldGrid.js";
 import { Card } from "../../ui/card/Card.js";
 import { Hint } from "../../ui/hint/Hint.js";
 import {
@@ -212,7 +213,7 @@ export function ScheduleForm({
           required
           onInput={setBody}
         />
-        <div class="ui-schedule-form-cadence">
+        <FieldGrid min="12em">
           <SelectField
             id={`${idPrefix}-repeat`}
             label="repeats"
@@ -250,7 +251,7 @@ export function ScheduleForm({
             required
             onInput={setStart}
           />
-        </div>
+        </FieldGrid>
         {fires.length > 0 ? (
           <Hint class="ui-schedule-form-hint">
             {repeat ? "next fires: " : "fires: "}
diff --git a/frontend/packages/swarm-ui/src/ui/field-grid/FieldGrid.css b/frontend/packages/swarm-ui/src/ui/field-grid/FieldGrid.css
new file mode 100644
index 00000000..5573feab
--- /dev/null
+++ b/frontend/packages/swarm-ui/src/ui/field-grid/FieldGrid.css
@@ -0,0 +1,8 @@
+.ui-field-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--ui-field-min), 1fr));
+  gap: 0.75em;
+}
+.ui-field-grid-full {
+  grid-column: 1 / -1;
+}
diff --git a/frontend/packages/swarm-ui/src/ui/field-grid/FieldGrid.tsx b/frontend/packages/swarm-ui/src/ui/field-grid/FieldGrid.tsx
new file mode 100644
index 00000000..3dbeb816
--- /dev/null
+++ b/frontend/packages/swarm-ui/src/ui/field-grid/FieldGrid.tsx
@@ -0,0 +1,30 @@
+// <FieldGrid> — a row or block of form fields on one grid: every field is the
+// same width and the columns have the same edges in every row, so a field's
+// width depends on the container and not on the siblings it wraps with. The
+// columns are as many as fit `min` wide; a lone last field keeps its column
+// width instead of stretching across the form. One gap, the same in every form.
+// A field that needs a whole row (a URL, a model name) goes in `FieldGridFull`.
+import type { ComponentChildren } from "preact";
+import "./FieldGrid.css";
+
+export function FieldGrid({
+  min = "14em",
+  class: extraClass,
+  children,
+}: {
+  /** The narrowest a column gets, any CSS length. */
+  min?: string;
+  class?: string;
+  children: ComponentChildren;
+}) {
+  const classes = ["ui-field-grid", extraClass].filter(Boolean).join(" ");
+  return (
+    <div class={classes} style={{ "--ui-field-min": min }}>
+      {children}
+    </div>
+  );
+}
+
+export function FieldGridFull({ children }: { children: ComponentChildren }) {
+  return <div class="ui-field-grid-full">{children}</div>;
+}