diff --git a/.changeset/clean-moons-invite.md b/.changeset/clean-moons-invite.md
new file mode 100644
index 00000000..9a87be42
--- /dev/null
+++ b/.changeset/clean-moons-invite.md
@@ -0,0 +1,11 @@
+---
+"@tailor-platform/app-shell": patch
+---
+
+Rebuild the `form/composer` pattern on `Form` + `Field`. It was the only `form/*` pattern with neither — a bare `Card` of controls with an `onClick` submit — which left it inconsistent with its four siblings and short of three things a composer actually needs.
+
+The body now sits in a `Field.Root` with a `sr-only` `Field.Label` (a real label instead of `aria-label`, so error and description wiring stays available), Send is `type="submit"` so validation gates it, and server rejections — moderation, rate limit, thread closed — route through `Form`'s `errors` prop into `Field.Error` rather than a toast, landing next to the text the user still has.
+
+The body stays **controlled**: it is read during render to gate Send and to swap the placeholder, which a submit-time handler cannot do. The pattern doc now says so explicitly, because this is the one `form/*` pattern where field state is load-bearing rather than redundant — elsewhere `onFormSubmit` reads registered `Field.Root`s and mirroring values into state is the anti-pattern.
+
+Also fixes a data-loss path in the reference implementation: it cleared the body unconditionally, losing the user's text when a submit failed. It now clears only on success.
diff --git a/catalogue/src/pattern/form/composer/PATTERN.md b/catalogue/src/pattern/form/composer/PATTERN.md
index 3833da99..76c7a399 100644
--- a/catalogue/src/pattern/form/composer/PATTERN.md
+++ b/catalogue/src/pattern/form/composer/PATTERN.md
@@ -4,7 +4,7 @@ name: Composer
 category: pattern
 subcategory: form
 description: Free-text composer — a multi-line input above a trailing action row, for notes, replies, and comments submitted in place
-requiredImports: [Card, Textarea, Button, Checkbox]
+requiredImports: [Card, Form, Field, Textarea, Button, Checkbox]
 tags: [composer, textarea, note, reply, comment, actions, discard, send]
 do:
   - A free-text box the user fills and submits in place — add a note, reply on a thread, leave a comment, give a rejection reason
@@ -66,10 +66,13 @@ Leave it empty and the buttons still sit correctly at the right; `justify-betwee
 
 - The body control is `Textarea`, never `Input` — `Input` is locked to `h-9` and clips prose to one 36px line.
 - Size the body with `rows` (3–5 is the usual range). Do not override its height with classes: `astw:` is internal to AppShell, and `Textarea`'s supported sizing API is `rows`.
-- The `Textarea` needs an accessible name. There is usually no visible label in a composer, so pass `aria-label`; a placeholder is not a label.
+- The `Textarea` needs an accessible name. There is usually no visible label in a composer, so use a `sr-only` `Field.Label`; a placeholder is not a label. Prefer this over `aria-label` — the `Field.Root` is already there, and a real label keeps the error and description wiring available.
 - One primary `Button` in the action row. Discard is `ghost`, and any left-side action is `ghost` too.
 - The action row is one row at every width — the left side shrinks, the buttons do not wrap under the body.
 - Disable the submit on empty or whitespace-only input, and disable both buttons while `submitting`.
+- The composer is a `Form`, not a bare widget. The body sits in a `Field.Root name="…"`, Send is `type="submit"`, and Discard is `type="button"` — inside a `<Form>` an untyped `<button>` defaults to `submit`.
+- Keep the body **controlled**. It is read during render to gate Send and to swap the placeholder, which a submit-time handler cannot do. This is the one `form/*` pattern where field state is load-bearing rather than redundant.
+- Route server rejections (moderation, rate limit, thread closed) through `Form`'s `errors` prop into `Field.Error`, not a toast. A composer that can be rejected needs somewhere for the reason to land next to the text the user still has.
 - Wrap the composer in `Card.Root` when it sits among other cards (a detail page, the end of a thread). A composer that is already inside a `Sheet` or `Dialog` body does not need its own card.
 
 ## Anti-patterns
@@ -80,4 +83,6 @@ Leave it empty and the buttons still sit correctly at the right; `justify-betwee
 - The action row stacked above the `Textarea`, or the buttons wrapped onto their own line — the composer stops reading as one unit.
 - A left-side toggle that silently changes what the submit does without changing the submit's own affordance — if "internal note" changes the destination, the placeholder (or the label) should say so.
 - Submit enabled on an empty body, so the user can post nothing.
+- A bare `<div>` of controls with an `onClick` submit — no `Form`, so a server rejection has nowhere to go and the body has no field identity.
+- Clearing the body on a _failed_ submit — the user loses what they wrote. Clear only after the submit succeeds.
 - A body so tall (`rows={12}`) that the action row falls below the fold — the composer stops reading as one unit.
diff --git a/catalogue/src/pattern/form/composer/composer.tsx b/catalogue/src/pattern/form/composer/composer.tsx
index ecae6b37..ab5cb5d6 100644
--- a/catalogue/src/pattern/form/composer/composer.tsx
+++ b/catalogue/src/pattern/form/composer/composer.tsx
@@ -1,27 +1,53 @@
 /* pattern: form/composer */
 import { useState } from "react";
-import { Button, Card, Checkbox, Textarea } from "@tailor-platform/app-shell";
+import { Button, Card, Checkbox, Field, Form, Textarea } from "@tailor-platform/app-shell";
 
 type Props = {
-  onSubmit: (body: string, internal: boolean) => void;
+  onSubmit: (body: string, internal: boolean) => Promise<{ error?: string } | void>;
   submitting?: boolean;
 };
 
 export default function Composer({ onSubmit, submitting = false }: Props) {
+  // Controlled: the body is read during render to gate Send and to swap the
+  // placeholder, which a submit-time handler cannot do.
   const [body, setBody] = useState("");
   const [internal, setInternal] = useState(false);
+  // Server-side rejections (moderation, rate limit) keyed by field name.
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const handleSubmit = async () => {
+    const result = await onSubmit(body, internal);
+    if (result?.error) {
+      setErrors({ body: result.error });
+      return;
+    }
+    setErrors({});
+    setBody("");
+  };
 
   return (
     <Card.Root>
       <Card.Content>
-        <div className="space-y-3">
-          <Textarea
-            aria-label="Reply"
-            value={body}
-            onChange={(e) => setBody(e.target.value)}
-            placeholder={internal ? "Internal context for teammates…" : "Reply to customer…"}
-            rows={4}
-          />
+        {/*
+         * The composer is a form, not a bare widget: `Form` gates Send on
+         * validation, and `errors` gives a server rejection somewhere to land
+         * instead of a toast.
+         */}
+        <Form noValidate errors={errors} onFormSubmit={handleSubmit} className="space-y-3">
+          <Field.Root name="body">
+            {/* Visually hidden — the Card and placeholder carry the visible
+                context, but the control still needs a real label. */}
+            <Field.Label className="sr-only">Reply</Field.Label>
+            <Textarea
+              required
+              rows={4}
+              value={body}
+              onChange={(event) => setBody(event.target.value)}
+              placeholder={internal ? "Internal context for teammates…" : "Reply to customer…"}
+            />
+            <Field.Error />
+          </Field.Root>
+
           <div className="flex items-center justify-between gap-2">
             {/* Options slot — 0..N controls that qualify the submission. An
                 internal-note toggle here; swap for an attachment button, a
@@ -37,21 +63,22 @@ export default function Composer({ onSubmit, submitting = false }: Props) {
                 one primary submit. Never more than one primary. */}
             <div className="flex shrink-0 gap-2">
               <Button
+                type="button"
                 variant="ghost"
-                onClick={() => setBody("")}
+                onClick={() => {
+                  setBody("");
+                  setErrors({});
+                }}
                 disabled={body.length === 0 || submitting}
               >
                 Discard
               </Button>
-              <Button
-                onClick={() => onSubmit(body, internal)}
-                disabled={body.trim().length === 0 || submitting}
-              >
+              <Button type="submit" disabled={body.trim().length === 0 || submitting}>
                 {submitting ? "Sending…" : "Send"}
               </Button>
             </div>
           </div>
-        </div>
+        </Form>
       </Card.Content>
     </Card.Root>
   );