diff --git a/docs/images/composer-after.jpg b/docs/images/composer-after.jpg
new file mode 100644
index 000000000..6b535f49f
Binary files /dev/null and b/docs/images/composer-after.jpg differ
diff --git a/docs/images/composer-before.png b/docs/images/composer-before.png
new file mode 100644
index 000000000..22cec3146
Binary files /dev/null and b/docs/images/composer-before.png differ
diff --git a/packages/chat-ui/src/composer.tsx b/packages/chat-ui/src/composer.tsx
index 534608694..54ff69920 100644
--- a/packages/chat-ui/src/composer.tsx
+++ b/packages/chat-ui/src/composer.tsx
@@ -7,7 +7,7 @@
 // does not compose with an inline mention popover.
 
 import { Avatar, Button } from "@corbits/react-ui";
-import { CircleNotch, Paperclip, PaperPlaneRight, X } from "@corbits/icons";
+import { ArrowUp, CircleNotch, Paperclip, X } from "@corbits/icons";
 import {
   forwardRef,
   useImperativeHandle,
@@ -240,7 +240,7 @@ export function attachmentValidationMessage(
   }
 }
 
-/** PaperPlaneRight/Enter stay blocked while a send or file read is in flight. */
+/** ArrowUp/Enter stay blocked while a send or file read is in flight. */
 export function canSendComposerAction(
   text: string,
   attachments: readonly ComposerAttachment[],
@@ -803,26 +803,6 @@ export const Composer = forwardRef<
           </div>
         </div>
       )}
-      {attachments.length > 0 && (
-        <ul
-          className="chat-composer-attachments"
-          aria-label={CHAT_STRINGS.composerAttachmentsLabel}
-        >
-          {attachments.map((file) => (
-            <li key={file.id} className="chat-composer-attachment">
-              <span className="chat-composer-attachment-name">{file.name}</span>
-              <button
-                type="button"
-                className="chat-composer-attachment-remove"
-                aria-label={CHAT_STRINGS.composerRemoveAttachment(file.name)}
-                onClick={() => removeAttachment(file.id)}
-              >
-                <X aria-hidden="true" />
-              </button>
-            </li>
-          ))}
-        </ul>
-      )}
       <div className="chat-composer-row">
         <input
           ref={fileInputRef}
@@ -833,17 +813,28 @@ export const Composer = forwardRef<
           tabIndex={-1}
           aria-hidden="true"
         />
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          className="chat-composer-icon-button"
-          disabled={!canAttach}
-          onClick={() => fileInputRef.current?.click()}
-          aria-label={CHAT_STRINGS.composerAttach}
-        >
-          <Paperclip />
-        </Button>
+        {attachments.length > 0 && (
+          <ul
+            className="chat-composer-attachments"
+            aria-label={CHAT_STRINGS.composerAttachmentsLabel}
+          >
+            {attachments.map((file) => (
+              <li key={file.id} className="chat-composer-attachment">
+                <span className="chat-composer-attachment-name">
+                  {file.name}
+                </span>
+                <button
+                  type="button"
+                  className="chat-composer-attachment-remove"
+                  aria-label={CHAT_STRINGS.composerRemoveAttachment(file.name)}
+                  onClick={() => removeAttachment(file.id)}
+                >
+                  <X aria-hidden="true" />
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
         <textarea
           ref={textareaRef}
           className="chat-composer-input"
@@ -861,38 +852,49 @@ export const Composer = forwardRef<
           onBlur={() => setFocused(false)}
           rows={1}
         />
-        <Button
-          type="button"
-          variant={sendVisualState === "empty" ? "ghost" : "primary"}
-          size="icon"
-          className="chat-composer-icon-button"
-          disabled={!canSend}
-          data-send-state={sendVisualState}
-          onClick={() => void send()}
-          aria-label={
-            sending ? CHAT_STRINGS.composerSending : CHAT_STRINGS.composerSend
-          }
-          title={
-            sending ? CHAT_STRINGS.composerSending : CHAT_STRINGS.composerSend
-          }
-        >
-          {sendVisualState === "sending" ? (
-            <CircleNotch
-              className="chat-composer-send-spinner"
-              aria-hidden="true"
-            />
-          ) : (
-            <PaperPlaneRight aria-hidden="true" />
-          )}
-        </Button>
-      </div>
-      {/* Always mounted so its reserved height never toggles the composer's
-       * box size — only opacity/visibility change (CL-6250). */}
-      <div
-        className="chat-composer-hint"
-        data-visible={focused && value.trim().length > 0}
-      >
-        {CHAT_STRINGS.composerKeyboardHint}
+        <div className="chat-composer-actions">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="chat-composer-icon-button"
+            disabled={!canAttach}
+            onClick={() => fileInputRef.current?.click()}
+            aria-label={CHAT_STRINGS.composerAttach}
+          >
+            <Paperclip />
+          </Button>
+          <span
+            className="chat-composer-keyboard-hint"
+            data-visible={focused && value.trim().length > 0}
+          >
+            {CHAT_STRINGS.composerKeyboardHint}
+          </span>
+          <Button
+            type="button"
+            variant={sendVisualState === "empty" ? "ghost" : "primary"}
+            size="sm"
+            className="chat-composer-icon-button"
+            disabled={!canSend}
+            data-send-state={sendVisualState}
+            onClick={() => void send()}
+            aria-label={
+              sending ? CHAT_STRINGS.composerSending : CHAT_STRINGS.composerSend
+            }
+            title={
+              sending ? CHAT_STRINGS.composerSending : CHAT_STRINGS.composerSend
+            }
+          >
+            {sendVisualState === "sending" ? (
+              <CircleNotch
+                className="chat-composer-send-spinner"
+                aria-hidden="true"
+              />
+            ) : (
+              <ArrowUp aria-hidden="true" />
+            )}
+          </Button>
+        </div>
       </div>
       <div
         className="chat-composer-status"
diff --git a/packages/chat-ui/src/styles.css b/packages/chat-ui/src/styles.css
index c42bb8b84..a50a705a0 100644
--- a/packages/chat-ui/src/styles.css
+++ b/packages/chat-ui/src/styles.css
@@ -1822,8 +1822,7 @@
   align-items: stretch;
   flex-shrink: 0;
   width: 100%;
-  border-top: 1px solid var(--border);
-  padding: 0.45rem 0.75rem 0.7rem;
+  padding: 0.9rem clamp(0.9rem, 3vw, 1.75rem);
   box-sizing: border-box;
 }
 
@@ -1891,7 +1890,7 @@
   flex-wrap: wrap;
   gap: 0.35rem;
   list-style: none;
-  margin: 0 0 0.4rem;
+  margin: 0;
   padding: 0;
 }
 
@@ -1901,8 +1900,12 @@
   gap: 0.25rem;
   max-width: 100%;
   border: 1px solid var(--border);
-  border-radius: 0;
-  background: var(--card, var(--background));
+  border-radius: var(--ui-radius-md, 0.5rem);
+  background: color-mix(
+    in srgb,
+    var(--foreground) 3%,
+    var(--card, var(--background))
+  );
   padding: 0.2rem 0.35rem 0.2rem 0.5rem;
   font-size: 0.75rem;
   line-height: 1.3;
@@ -2317,42 +2320,69 @@
 
 .chat-composer-row {
   display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  border: 1px solid var(--border);
-  border-radius: 0;
+  min-height: 6.75rem;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.55rem;
+  border: 1.5px solid var(--border);
+  border-radius: var(--ui-radius-lg, 0.75rem);
   background: var(--card, var(--background));
-  padding: 0.45rem 0.55rem;
+  padding: 0.8rem 0.85rem 0.75rem;
   transition:
     border-color 120ms var(--chat-ease),
-    box-shadow 120ms var(--chat-ease);
+    background-color 120ms var(--chat-ease);
 }
 
-/* Hairline -> foreground-strength on focus: color and an inset hairline
-   reinforce, never a border-width or padding change, so the row never
-   resizes (CL-6250). The accent color stays out of this — it is reserved
-   for inset/text emphasis elsewhere, not a full input outline. */
 .chat-composer-row:focus-within {
-  border-color: var(--foreground);
-  box-shadow: inset 0 0 0 1px var(--foreground);
+  border-color: var(--primary);
 }
 
 .chat-composer-input {
   flex: 1;
-  min-height: 2.5rem;
+  min-height: 2.75rem;
   max-height: 10rem;
   overflow-y: auto;
   resize: none;
   border: 0;
   border-radius: 0;
   background: transparent;
-  padding: 0.5rem 0.4rem;
+  padding: 0.1rem 0.2rem;
   font: inherit;
   font-size: 0.875rem;
   line-height: 1.45;
   color: var(--foreground);
 }
 
+.chat-composer-actions {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  margin-top: auto;
+  padding: 0;
+}
+
+.chat-composer-actions > :first-child {
+  justify-self: start;
+}
+
+.chat-composer-actions > :last-child {
+  justify-self: end;
+}
+
+.chat-composer-keyboard-hint {
+  color: var(--muted-foreground);
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms var(--chat-ease);
+}
+
+.chat-composer-keyboard-hint[data-visible="true"] {
+  opacity: 1;
+}
+
 /* Growth is measured in JS (scrollHeight, capped at max-height above) and
    applied as an inline `height`; this transition is what turns that
    per-keystroke instant write into a contained ~120ms glide instead of an
@@ -2376,24 +2406,6 @@
   opacity: 1;
 }
 
-.chat-composer-hint {
-  min-height: 1rem;
-  padding: 0.3rem 0.15rem 0;
-  font-size: 0.7rem;
-  color: var(--muted-foreground);
-  text-align: right;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 120ms var(--chat-ease);
-}
-
-/* Always mounted (see composer.tsx) so this space is reserved whether or
-   not the hint is showing — visibility toggles, box height never does. */
-.chat-composer-hint[data-visible="true"] {
-  opacity: 1;
-  visibility: visible;
-}
-
 .chat-composer-status {
   min-height: 0;
   padding: 0.3rem 0.15rem 0;
@@ -2412,12 +2424,13 @@
   color: var(--destructive);
 }
 
-/* Send button states: "empty" reads as a muted, inert glyph in both themes
-   rather than inheriting the ambient text color at half opacity; "ready"
-   and "sending" both keep the primary fill, so the spinner swap is what
-   tells them apart. Press feedback (brightness dip + scale-down) is the
-   Button base variant's own `active:` state (react-ui, not duplicated
-   here) — it already fires on both of these. */
+/* Send button states: empty stays quietly available as a neutral circular
+   affordance; ready and sending keep the primary fill, with the spinner
+   communicating the in-progress state. */
+[data-send-state="empty"] {
+  background: color-mix(in srgb, var(--foreground) 4%, transparent);
+}
+
 [data-send-state="empty"] svg {
   color: var(--muted-foreground);
 }
@@ -2427,6 +2440,23 @@
    it's still inside the button's own hit-test region (CL-6250). */
 .chat-composer-icon-button {
   position: relative;
+  display: inline-flex;
+  width: 2.25rem;
+  height: 2.25rem;
+  min-width: 2.25rem;
+  min-height: 2.25rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  padding: 0;
+}
+
+.chat-composer-actions > :first-child {
+  background: color-mix(in srgb, var(--foreground) 4%, transparent);
+}
+
+.chat-composer-actions > :first-child:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--foreground) 8%, transparent);
 }
 
 .chat-composer-icon-button::after {
diff --git a/packages/chat-ui/test/composer.test.tsx b/packages/chat-ui/test/composer.test.tsx
index 518d18777..cb7fefbbc 100644
--- a/packages/chat-ui/test/composer.test.tsx
+++ b/packages/chat-ui/test/composer.test.tsx
@@ -1,8 +1,3 @@
-// The composer's Send button, in-flight: standardized on the same
-// label-swap/disabled pattern the create-agent and invite-agent dialogs
-// already use (CL-6019) — previously the icon-only button gave no visible
-// signal that a send was in progress beyond being disabled.
-
 import { afterEach, describe, expect, test } from "bun:test";
 import { act, createElement, createRef } from "react";
 import { createRoot } from "react-dom/client";
@@ -11,6 +6,8 @@ import type { Root } from "react-dom/client";
 import { Composer } from "../src/composer";
 import type { ComposerHandle, ComposerSendPayload } from "../src/composer";
 
+// The in-flight send contract survives the icon-only UI: its accessible name
+// announces progress and the action remains unavailable until sending ends.
 let container: HTMLDivElement | null = null;
 let root: Root | null = null;
 
@@ -58,8 +55,12 @@ function sendButton(): HTMLButtonElement {
   return button;
 }
 
+function keyboardHint(): Element | null {
+  return container?.querySelector(".chat-composer-keyboard-hint") ?? null;
+}
+
 describe("Composer send button", () => {
-  test("shows a Sending… label and stays disabled while the send promise is unresolved", async () => {
+  test("updates its accessible label and stays disabled while sending", async () => {
     let resolveSend: (value: boolean) => void = () => undefined;
     const onSend = () =>
       new Promise<boolean>((resolve) => {
@@ -101,9 +102,13 @@ describe("Composer send button", () => {
   });
 });
 
-function hint(): Element | null {
-  return container?.querySelector(".chat-composer-hint") ?? null;
-}
+test("labels the icon-only attachment action in the composer rail", () => {
+  mount(() => Promise.resolve(true));
+
+  expect(
+    container?.querySelector('[aria-label="Attach files"]')?.textContent,
+  ).toBe("");
+});
 
 function textarea(): HTMLTextAreaElement {
   const element = container?.querySelector("textarea");
@@ -255,49 +260,40 @@ describe("Composer mention popover — Agents and People (CL-5879)", () => {
   });
 });
 
-// The hint used to mount/unmount with its condition, which added and
-// removed a line from the composer's box on every focus/blur and
-// keystroke. It is now always in the DOM with a reserved height; only
-// `data-visible` (and the opacity/visibility CSS it drives) toggles, so
-// asserting on that attribute — never on presence/absence — is the
-// honest way to test the new mechanism (CL-6250).
 describe("Composer keyboard hint", () => {
-  test("is always mounted and stays visibility-hidden until focused with a non-empty draft", async () => {
+  test("uses the existing action rail and appears only for a focused non-empty draft", async () => {
     mount(() => Promise.resolve(true));
-    expect(hint()).not.toBeNull();
-    expect(hint()?.getAttribute("data-visible")).toBe("false");
+    expect(keyboardHint()).not.toBeNull();
+    expect(keyboardHint()?.getAttribute("data-visible")).toBe("false");
 
     act(() => {
       textarea().focus();
     });
-    await settle();
-    expect(hint()?.getAttribute("data-visible")).toBe("false");
-
     typeInto(textarea(), "hello");
     await settle();
-    expect(hint()?.getAttribute("data-visible")).toBe("true");
-    expect(hint()?.textContent).toBe("Enter to send");
 
-    act(() => {
-      textarea().blur();
-    });
-    await settle();
-    expect(hint()?.getAttribute("data-visible")).toBe("false");
+    expect(keyboardHint()?.getAttribute("data-visible")).toBe("true");
+    expect(keyboardHint()?.textContent).toBe("Enter to send");
+    expect(
+      container?.querySelectorAll(".chat-composer-actions > button").length,
+    ).toBe(2);
+    expect(container?.querySelector(".chat-composer-row > textarea")).toBe(
+      textarea(),
+    );
   });
 
-  test("hides again once the draft is cleared while still focused, without unmounting", async () => {
+  test("hides when the focused draft is cleared", async () => {
     mount(() => Promise.resolve(true));
     act(() => {
       textarea().focus();
     });
-    typeInto(textarea(), "hi");
+    typeInto(textarea(), "hello");
     await settle();
-    expect(hint()?.getAttribute("data-visible")).toBe("true");
+    expect(keyboardHint()?.getAttribute("data-visible")).toBe("true");
 
     typeInto(textarea(), "");
     await settle();
-    expect(hint()).not.toBeNull();
-    expect(hint()?.getAttribute("data-visible")).toBe("false");
+    expect(keyboardHint()?.getAttribute("data-visible")).toBe("false");
   });
 });