diff --git a/docs/2-handbook/swarm/ui.md b/docs/2-handbook/swarm/ui.md
index 602b005b..066313df 100644
--- a/docs/2-handbook/swarm/ui.md
+++ b/docs/2-handbook/swarm/ui.md
@@ -447,10 +447,12 @@ tab, follow a link in the app, or press the browser's back button. Choose
 ### Sending a message to an agent
 
 Under an agent's terminal, in the preview and in its own tab, is a **message**
-box. **send** hands the text to the agent's harness, and the agent takes it as
-an inbox message from your authelia username. **sent** means the harness was
-listening and holds the message. If the harness isn't running, or isn't
-connected to the swarm queue, the box shows an error and the agent gets nothing.
+box, with the agent's name as its placeholder. **send** hands the text to the agent's
+harness, and the agent takes it as an inbox message from your authelia username.
+While the request is pending, a spinner replaces the button's label. When it
+ends, the box empties: the harness was listening and holds the message. If the
+harness isn't running, or isn't connected to the swarm queue, the box shows an
+error and the agent gets nothing.
 While the agent is in a turn, a **cancel turn** badge appears among the state
 badges over the terminal, in its own tab. It asks the agent's harness to stop
 the turn, then shows whether one was running ("turn cancelled" or "nothing was
diff --git a/frontend/packages/swarm-ui/src/agent/terminal/AgentInputForm.css b/frontend/packages/swarm-ui/src/agent/terminal/AgentInputForm.css
index 6514f376..74efb86e 100644
--- a/frontend/packages/swarm-ui/src/agent/terminal/AgentInputForm.css
+++ b/frontend/packages/swarm-ui/src/agent/terminal/AgentInputForm.css
@@ -11,6 +11,3 @@
 .ui-agent-input-form > :first-child {
   flex: 1;
 }
-.ui-agent-input-sent {
-  margin-block-start: 0.25rem;
-}
diff --git a/frontend/packages/swarm-ui/src/agent/terminal/AgentInputForm.tsx b/frontend/packages/swarm-ui/src/agent/terminal/AgentInputForm.tsx
index 0b39639f..020ba1ce 100644
--- a/frontend/packages/swarm-ui/src/agent/terminal/AgentInputForm.tsx
+++ b/frontend/packages/swarm-ui/src/agent/terminal/AgentInputForm.tsx
@@ -7,7 +7,6 @@ import { useState } from "preact/hooks";
 import { ApiErrorPanel } from "@hive/shared/api-error-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 { useSubmit } from "../../ui/submit/useSubmit.js";
 import "./AgentInputForm.css";
 
@@ -34,19 +33,16 @@ export function AgentInputForm({ agentName }: { agentName: string }) {
         <TextField
           id={`agent-input-${agentName}`}
           label={`message ${agentName}`}
+          hideLabel
+          placeholder={`message ${agentName}`}
           value={body}
           required
           onInput={setBody}
         />
-        <Button variant="primary" type="submit" disabled={submitting}>
-          {submitting ? "sending…" : "send"}
+        <Button variant="primary" type="submit" busy={submitting}>
+          send
         </Button>
       </form>
-      {state.status === "done" && (
-        <Hint tone="ok" class="ui-agent-input-sent">
-          sent
-        </Hint>
-      )}
       {state.status === "error" && (
         <ApiErrorPanel context="failed to send" problem={state.problem} />
       )}
diff --git a/frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx b/frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx
index 5d2939bf..3f02ef59 100644
--- a/frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx
+++ b/frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx
@@ -611,6 +611,11 @@ export function ComponentsPage() {
           <Sample label="disabled">
             <Button disabled>disabled</Button>
           </Sample>
+          <Sample label="busy: a spinner over the label, same width">
+            <Button variant="primary" busy>
+              send
+            </Button>
+          </Sample>
         </div>
       </Section>
 
diff --git a/frontend/packages/swarm-ui/src/ui/button/Button.css b/frontend/packages/swarm-ui/src/ui/button/Button.css
index 1c5e42a6..1114b7bd 100644
--- a/frontend/packages/swarm-ui/src/ui/button/Button.css
+++ b/frontend/packages/swarm-ui/src/ui/button/Button.css
@@ -24,3 +24,17 @@
   opacity: 0.6;
   cursor: default;
 }
+.ui-button {
+  position: relative;
+}
+/* Busy: the label keeps its space, hidden, and the spinner sits over it. */
+.ui-button-busy .ui-button-label {
+  visibility: hidden;
+}
+.ui-button-spinner {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/frontend/packages/swarm-ui/src/ui/button/Button.tsx b/frontend/packages/swarm-ui/src/ui/button/Button.tsx
index cdf77e4b..decb138d 100644
--- a/frontend/packages/swarm-ui/src/ui/button/Button.tsx
+++ b/frontend/packages/swarm-ui/src/ui/button/Button.tsx
@@ -5,6 +5,7 @@
 // so far; a third reading gets added the day something needs it, not
 // speculatively.
 import type { ComponentChildren } from "preact";
+import { Spinner } from "../spinner/Spinner.js";
 import "./Button.css";
 
 export type ButtonVariant = "primary" | "default";
@@ -13,6 +14,7 @@ export function Button({
   variant = "default",
   type = "button",
   disabled,
+  busy = false,
   onClick,
   describedBy,
   children,
@@ -20,6 +22,10 @@ export function Button({
   variant?: ButtonVariant;
   type?: "button" | "submit";
   disabled?: boolean;
+  /** A request from this button is in flight: a spinner covers the label,
+   * which keeps its space so the button does not change width, and the button
+   * cannot be pressed again. */
+  busy?: boolean;
   onClick?: (e: Event) => void;
   /** Id of the element that says why the button is disabled. */
   describedBy?: string;
@@ -27,13 +33,19 @@ export function Button({
 }) {
   return (
     <button
-      class={"ui-button ui-button-" + variant}
+      class={"ui-button ui-button-" + variant + (busy ? " ui-button-busy" : "")}
       type={type}
-      disabled={disabled}
+      disabled={disabled || busy}
+      aria-busy={busy || undefined}
       onClick={onClick}
       aria-describedby={describedBy}
     >
-      {children}
+      <span class="ui-button-label">{children}</span>
+      {busy ? (
+        <span class="ui-button-spinner">
+          <Spinner />
+        </span>
+      ) : null}
     </button>
   );
 }
diff --git a/frontend/packages/swarm-ui/src/ui/form-field/FormField.css b/frontend/packages/swarm-ui/src/ui/form-field/FormField.css
index f8ac6a15..2b936f9b 100644
--- a/frontend/packages/swarm-ui/src/ui/form-field/FormField.css
+++ b/frontend/packages/swarm-ui/src/ui/form-field/FormField.css
@@ -45,3 +45,12 @@
   box-sizing: border-box;
   min-height: 2.75em;
 }
+/* A label that stays for assistive tech and is off the screen. */
+.ui-form-field-label-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
diff --git a/frontend/packages/swarm-ui/src/ui/form-field/FormField.tsx b/frontend/packages/swarm-ui/src/ui/form-field/FormField.tsx
index dc6db9e2..7b4959dc 100644
--- a/frontend/packages/swarm-ui/src/ui/form-field/FormField.tsx
+++ b/frontend/packages/swarm-ui/src/ui/form-field/FormField.tsx
@@ -16,21 +16,27 @@ export function FormField({
   label,
   htmlFor,
   labelId,
+  hideLabel = false,
   children,
 }: {
   label: string;
   htmlFor?: string;
   labelId?: string;
+  /** Keep the label for assistive tech and take it off the screen, for a
+   * control whose placeholder says the same. */
+  hideLabel?: boolean;
   children: ComponentChildren;
 }) {
+  const labelClass =
+    "ui-form-field-label" + (hideLabel ? " ui-form-field-label-hidden" : "");
   return (
     <div class="ui-form-field">
       {htmlFor !== undefined ? (
-        <label class="ui-form-field-label" for={htmlFor}>
+        <label class={labelClass} for={htmlFor}>
           {label}
         </label>
       ) : (
-        <span class="ui-form-field-label" id={labelId}>
+        <span class={labelClass} id={labelId}>
           {label}
         </span>
       )}
diff --git a/frontend/packages/swarm-ui/src/ui/refresh-interval/RefreshInterval.css b/frontend/packages/swarm-ui/src/ui/refresh-interval/RefreshInterval.css
index 3df6d21a..1edc230f 100644
--- a/frontend/packages/swarm-ui/src/ui/refresh-interval/RefreshInterval.css
+++ b/frontend/packages/swarm-ui/src/ui/refresh-interval/RefreshInterval.css
@@ -43,32 +43,3 @@
   font-size: 0.85em;
   line-height: 1;
 }
-
-/* The spinner takes the clock's place: the same box, so the picker keeps its
-   width. Motion follows the page's setting, the same three rules the page
-   switch uses; where motion is off it is a static arc. */
-.ui-refresh-picker-spinner {
-  box-sizing: border-box;
-  width: 1em;
-  height: 1em;
-  border: 2px solid currentColor;
-  border-right-color: transparent;
-  border-radius: 50%;
-  animation: ui-refresh-spin 0.8s linear infinite;
-}
-@keyframes ui-refresh-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .ui-refresh-picker-spinner {
-    animation: none;
-  }
-}
-:root[data-motion="reduce"] .ui-refresh-picker-spinner {
-  animation: none;
-}
-:root[data-motion="allow"] .ui-refresh-picker-spinner {
-  animation: ui-refresh-spin 0.8s linear infinite;
-}
diff --git a/frontend/packages/swarm-ui/src/ui/refresh-interval/RefreshInterval.tsx b/frontend/packages/swarm-ui/src/ui/refresh-interval/RefreshInterval.tsx
index 94af34a4..8a3ec0d5 100644
--- a/frontend/packages/swarm-ui/src/ui/refresh-interval/RefreshInterval.tsx
+++ b/frontend/packages/swarm-ui/src/ui/refresh-interval/RefreshInterval.tsx
@@ -25,6 +25,7 @@
 // hook only decides *when* to call it.
 import { useEffect, useRef } from "preact/hooks";
 import { Listbox } from "../select-field/Listbox.js";
+import { Spinner } from "../spinner/Spinner.js";
 import "./RefreshInterval.css";
 
 // `null` means "off" throughout this module — no separate boolean, so
@@ -59,7 +60,7 @@ export function RefreshIntervalPicker({
         aria-hidden="true"
         title={refreshing ? "refreshing" : undefined}
       >
-        {refreshing ? <span class="ui-refresh-picker-spinner" /> : "🕐"}
+        {refreshing ? <Spinner /> : "🕐"}
       </span>
       <Listbox
         id={id}
diff --git a/frontend/packages/swarm-ui/src/ui/spinner/Spinner.css b/frontend/packages/swarm-ui/src/ui/spinner/Spinner.css
new file mode 100644
index 00000000..48a88ea8
--- /dev/null
+++ b/frontend/packages/swarm-ui/src/ui/spinner/Spinner.css
@@ -0,0 +1,26 @@
+.ui-spinner {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: ui-spinner-turn 0.8s linear infinite;
+}
+@keyframes ui-spinner-turn {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ui-spinner {
+    animation: none;
+  }
+}
+:root[data-motion="reduce"] .ui-spinner {
+  animation: none;
+}
+:root[data-motion="allow"] .ui-spinner {
+  animation: ui-spinner-turn 0.8s linear infinite;
+}
diff --git a/frontend/packages/swarm-ui/src/ui/spinner/Spinner.tsx b/frontend/packages/swarm-ui/src/ui/spinner/Spinner.tsx
new file mode 100644
index 00000000..a0afc91b
--- /dev/null
+++ b/frontend/packages/swarm-ui/src/ui/spinner/Spinner.tsx
@@ -0,0 +1,10 @@
+// <Spinner> — a small ring that turns while a request is in flight: the
+// refresh picker's clock slot, a button waiting on its request. It is one
+// character wide and tall (`1em`), takes the colour of the text around it, and
+// is hidden from assistive tech; whatever holds it says the state (`aria-busy`,
+// a label). Where motion is off it is a static arc.
+import "./Spinner.css";
+
+export function Spinner() {
+  return <span class="ui-spinner" aria-hidden="true" />;
+}
diff --git a/frontend/packages/swarm-ui/src/ui/text-field/TextField.tsx b/frontend/packages/swarm-ui/src/ui/text-field/TextField.tsx
index b47ef911..df772fb4 100644
--- a/frontend/packages/swarm-ui/src/ui/text-field/TextField.tsx
+++ b/frontend/packages/swarm-ui/src/ui/text-field/TextField.tsx
@@ -22,6 +22,7 @@ export function TextField({
   title,
   required,
   placeholder,
+  hideLabel,
   suggestions,
 }: {
   id: string;
@@ -33,13 +34,15 @@ export function TextField({
   title?: string;
   required?: boolean;
   placeholder?: string;
+  /** The label is for assistive tech only; the placeholder says it on screen. */
+  hideLabel?: boolean;
   /** Values to pick from. The field stays free text: a value that is not in
    * the list can still be typed. */
   suggestions?: TextFieldSuggestion[];
 }) {
   const listId = `${id}-suggestions`;
   return (
-    <FormField label={label} htmlFor={id}>
+    <FormField label={label} htmlFor={id} hideLabel={hideLabel}>
       <input
         id={id}
         class="ui-form-control"