fix(next): let composer content follow the chat font size

scripts/cmux-next/type-scale-baseline.tsv

@@ -4,17 +4,15 @@ webviews/src/agent-session/acpmux/Inspector.css	size	4
 webviews/src/agent-session/acpmux/changes/changes.css	size	7
 webviews/src/agent-session/acpmux/checkpoints/styles.css	size	2
 webviews/src/agent-session/acpmux/chips/chips.css	size	1
-webviews/src/agent-session/acpmux/composerStates.css	size	2
 webviews/src/agent-session/acpmux/conversation/HighlightedCode.tsx	size	1
-webviews/src/agent-session/acpmux/conversation/conversation.css	size	30
+webviews/src/agent-session/acpmux/conversation/conversation.css	size	25
 webviews/src/agent-session/acpmux/diffTheme.ts	size	3
 webviews/src/agent-session/acpmux/handoff/styles.css	size	4
 webviews/src/agent-session/acpmux/keys.css	size	1
-webviews/src/agent-session/acpmux/markdownField.css	size	4
 webviews/src/agent-session/acpmux/mockFixture.ts	size	2
-webviews/src/agent-session/acpmux/newtab/screen.css	size	15
+webviews/src/agent-session/acpmux/newtab/screen.css	size	12
 webviews/src/agent-session/acpmux/prototype/prototype.css	size	17
-webviews/src/agent-session/acpmux/styles.css	size	48
+webviews/src/agent-session/acpmux/styles.css	size	46
 webviews/src/agent-session/acpmux/subagents/subagents.css	size	2
 webviews/src/agent-session/acpmux/threadMinimap/threadMinimap.css	size	1
 webviews/src/gallery/env.ts	size	1

webviews/scripts/design-tokens-baseline.jsonl

@@ -9,7 +9,7 @@
 {"file":"agent-session/acpmux/addProject.css","kind":"height","property":"min-height","values":{"260px":1}}
 {"file":"agent-session/acpmux/addProject.css","kind":"spacing","property":"gap","values":{"6px":3}}
 {"file":"agent-session/acpmux/addProject.css","kind":"spacing","property":"padding","values":{"0 10px":1,"6px 8px":1,"4px 7px":1}}
-{"file":"agent-session/acpmux/bottomStack.css","kind":"height","property":"min-height","values":{"calc(44px + var(--acpmux-transcript-min, 96px))":1,"calc(var(--text-title--line-height, 22px) + 22px * var(--cmux-interface-scale, 1))":1,"var(--acpmux-stack-row-min, 34px)":1}}
+{"file":"agent-session/acpmux/bottomStack.css","kind":"height","property":"min-height","values":{"calc(44px + var(--acpmux-transcript-min, 96px))":1,"var(--acpmux-stack-row-min, 34px)":1}}
 {"file":"agent-session/acpmux/changes/changes.css","kind":"height","property":"height","values":{"1px":2,"29px":2}}
 {"file":"agent-session/acpmux/changes/changes.css","kind":"height","property":"min-height","values":{"240px":1}}
 {"file":"agent-session/acpmux/changes/changes.css","kind":"spacing","property":"gap","values":{"6px":4,"2px":1}}
@@ -97,7 +97,6 @@
 {"file":"agent-session/acpmux/inspector/inspector.css","kind":"spacing","property":"padding-left","values":{"6px":1,"10px":1}}
 {"file":"agent-session/acpmux/inspector/inspector.css","kind":"spacing","property":"padding-right","values":{"6px":1,"10px":1}}
 {"file":"agent-session/acpmux/inspector/inspector.css","kind":"spacing","property":"padding-top","values":{"34px":1,"5px":1}}
-{"file":"agent-session/acpmux/markdownField.css","kind":"height","property":"min-height","values":{"var(--text-title--line-height, 22px)":1}}
 {"file":"agent-session/acpmux/markdownField.css","kind":"spacing","property":"padding","values":{"calc(15px * var(--cmux-interface-scale, 1)) calc(16px * var(--cmux-interface-scale, 1)) calc(8px * var(--cmux-interface-scale, 1))":1,"0 5px":1,"1px 4px":1,"8px 10px":1}}
 {"file":"agent-session/acpmux/markdownField.css","kind":"spacing","property":"padding-left","values":{"22px":1,"10px":1}}
 {"file":"agent-session/acpmux/modelPicker.css","kind":"height","property":"height","values":{"44px":1}}

webviews/src/agent-session/acpmux/bottomStack.css

@@ -88,7 +88,7 @@
   > .acpmux-composer
   > .acpmux-composer-box:has(> .acpmux-chrome-area > .acpmux-composer-inner) {
   flex: 0 1 auto;
-  min-height: calc(var(--text-title--line-height, 22px) + 22px * var(--cmux-interface-scale, 1));
+  min-height: calc(var(--text-content--line-height) + 2 * var(--acpmux-prompt-inset));
   grid-template-rows: auto minmax(0, 1fr);
 }
 .acpmux-main[data-dock="float"]

webviews/src/agent-session/acpmux/composer.gallery.ts

@@ -2,7 +2,7 @@
 // The composer's states (Composer.tsx, ComposerPickers.tsx, ComposerContext.tsx: the prompt,
 // the mode and model chips, the location row, Send and Stop), through the pane's own inputs: the
 // `ready` answer's draft and new-chat fields, and the snapshot.
-import { agentPaneEntry } from "../../gallery/format";
+import { agentPaneEntry, type AgentPaneVariant } from "../../gallery/format";
 import { minutesAgo } from "../../gallery/clock";
 import { assistant, CATALOG, chat, CWD, noChat, session, summary, user } from "../../gallery/fixtures/acpmux";
 import type { PlayContext } from "../../gallery/play";
@@ -441,6 +441,36 @@ const CLAUDE_ULTRACODE_OFF = {
   ],
 };
 
+// The chat font setting reaches the draft as well as the conversation, in either composer.
+const fontSizeVariants: Record<string, AgentPaneVariant> = Object.fromEntries(
+  [14, 21, 28].flatMap((size) =>
+    ["chat", "new-chat", "new-tab"].map((context) => [
+      `font-size-${context}-${size}`,
+      {
+        note: `Chat text at ${size}px, including the draft's headings and code.`,
+        display: { "agentPane.display.font.size": size },
+        ready: {
+          newSession: context !== "chat",
+          ...(context === "new-tab"
+            ? { newTab: { layout: "b", kind: "agent", cwd: CWD, home: "/Users/you", lastAgent: "claude" } }
+            : {}),
+          cwd: CWD,
+          draft: "### Review the retry helper\nKeep `fetch` idempotent.\n\n```ts\nawait retry(request)\n```",
+        },
+        snapshot:
+          context !== "chat"
+            ? onBranch("main")
+            : chat([
+                assistant(
+                  "# Retry plan\nThe body follows your font size.\n\n| Attempt | Wait |\n|---|---|\n| 1 | 1 second |",
+                  1,
+                ),
+              ]),
+      },
+    ]),
+  ),
+);
+
 export default agentPaneEntry({
   id: "agent-pane.composer",
   title: "Composer",
@@ -488,6 +518,7 @@ export default agentPaneEntry({
     "agent-session/acpmux/MentionMenu.tsx#MentionMenu",
   ],
   variants: {
+    ...fontSizeVariants,
     "new-chat": {
       note: "A new chat: empty prompt; the card's footer row holds the folder and computer, under a hairline.",
       ready: { newSession: true, cwd: CWD },

webviews/src/agent-session/acpmux/composerLocation.css

@@ -1206,6 +1206,10 @@
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: end;
+  --acpmux-prompt-inset: calc(11px * var(--cmux-interface-scale, 1));
+  /* Keep the controls centered on the last content line as its size changes. The system
+     font's ink sits 1px above the line-box center, so its optical center gets the same lift. */
+  --acpmux-prompt-control-bottom: max(0px, calc(var(--acpmux-prompt-inset) + var(--text-content--line-height) / 2 - 14px + 1px));
 }
 /* The strip and the queue over the box take its corners. */
 .acpmux-composer:has(.acpmux-composer-box > .acpmux-chrome-area > .acpmux-composer-inner) {
@@ -1231,12 +1235,12 @@
 .acpmux-composer-inner > :not(.acpmux-composer-actions) {
   grid-column: 1;
   grid-row: 2;
-  margin: 0 0 8px 8px;
+  margin: 0 0 var(--acpmux-prompt-control-bottom) 8px;
 }
 .acpmux-composer-inner > .acpmux-composer-actions {
   grid-column: 3;
   grid-row: 2;
-  margin: 0 8px 8px 0;
+  margin: 0 8px var(--acpmux-prompt-control-bottom) 0;
 }
 /* The right inset less the minimal scroller's reserved lane (markdownField.css). */
 .acpmux-composer-box:has(> .acpmux-chrome-area > .acpmux-composer-inner) .acpmux-md-field {

webviews/src/agent-session/acpmux/composerStates.css

@@ -387,7 +387,7 @@ button.acpmux-send:disabled:not(.acpmux-cancel):not(.acpmux-send-ready) {
   position: absolute;
   left: 16px;
   top: 15px;
-  font: 600 14px/22px ui-monospace, SFMono-Regular, Menlo, monospace;
+  font: var(--weight-emphasis) var(--text-content)/var(--text-content--line-height) ui-monospace, SFMono-Regular, Menlo, monospace;
   color: var(--acpmux-shell-accent);
   pointer-events: none;
 }
@@ -396,7 +396,7 @@ button.acpmux-send:disabled:not(.acpmux-cancel):not(.acpmux-send-ready) {
   box-sizing: border-box;
   width: 100%;
   min-height: 45px;
-  max-height: calc(22px * 8 + 23px);
+  max-height: calc(var(--text-content--line-height) * 8 + 23px);
   margin: 0;
   padding: 15px 16px 8px 32px;
   border: 0;
@@ -405,7 +405,7 @@ button.acpmux-send:disabled:not(.acpmux-cancel):not(.acpmux-send-ready) {
   resize: none;
   overflow-y: auto;
   overscroll-behavior: contain;
-  font: 14px/22px ui-monospace, SFMono-Regular, Menlo, monospace;
+  font: var(--text-content)/var(--text-content--line-height) ui-monospace, SFMono-Regular, Menlo, monospace;
   color: var(--agent-text);
   caret-color: var(--acpmux-shell-accent); /* caret-color: the shell mode's accent marks the mode */
 }
@@ -534,20 +534,21 @@ button.acpmux-send:disabled:not(.acpmux-cancel):not(.acpmux-send-ready) {
 .acpmux-queued-edit {
   grid-column: 1 / -1;
   min-width: 0;
-  max-height: 88px;
+  max-height: calc(var(--text-content--line-height) * 4);
   /* Its text stays where the row's text was. */
   margin: 2px 0 2px -6px;
   padding: 2px 6px;
   resize: none;
-  line-height: 18px;
   border: 0;
   border-radius: 6px;
   /* The composer's focused hairline, never a ring (Leo 2026-10-21: the white rounded ring). */
   outline: none;
   box-shadow: inset 0 0 0 var(--cmux-hairline, .5px) var(--acpmux-composer-edge-focus);
   background: var(--acpmux-base);
   color: var(--agent-text);
-  font: inherit;
+  font-family: inherit;
+  font-size: var(--text-content);
+  line-height: var(--text-content--line-height);
 }
 .acpmux-queued-edit:focus {
   box-shadow: inset 0 0 0 var(--cmux-hairline, .5px) var(--acpmux-composer-edge-focus);

webviews/src/agent-session/acpmux/conversation/conversation.css

@@ -788,22 +788,22 @@
   color: var(--cv-text);
 }
 .cv-h1 {
-  font-size: 21px;
-  line-height: 28px;
+  font-size: calc(var(--cv-font-size) * 1.5);
+  line-height: calc(var(--cv-font-size) * 2);
   margin: 20px 0 12px;
 }
 .cv-h2 {
-  font-size: 17.5px;
-  line-height: 24px;
+  font-size: calc(var(--cv-font-size) * 1.25);
+  line-height: calc(var(--cv-font-size) * 24 / 14);
   margin: 15px 0 3.5px;
 }
 .cv-h3 {
-  font-size: 15.75px;
-  line-height: 22px;
+  font-size: calc(var(--cv-font-size) * 1.125);
+  line-height: calc(var(--cv-font-size) * 22 / 14);
   margin: 15px 0 5px;
 }
 .cv-h4 {
-  font-size: 14px;
+  font-size: var(--cv-font-size);
   margin: 16px 0 4px;
 }
 .cv-md strong {
@@ -983,9 +983,9 @@
    between a label and its value); long-text columns are 256px at least (TableBlock.tsx). */
 .cv-table {
   border-collapse: collapse;
-  font-size: var(--cv-table-size, 12.25px);
+  font-size: var(--cv-table-size, calc(var(--cv-font-size) * 0.875));
   letter-spacing: var(--cv-table-tracking, 0px);
-  line-height: var(--cv-table-line-height, 23px);
+  line-height: var(--cv-table-line-height, calc(var(--cv-font-size) * 23 / 14));
   width: max-content;
 }
 .cv-table th,

webviews/src/agent-session/acpmux/markdownField.css

@@ -1,20 +1,20 @@
 /* The composer's Milkdown prompt (MarkdownField.tsx), drawn as the plain textarea it replaces
-   (.acpmux-composer-field): 15px on 22px lines, no chrome. Formatting shows only where the
-   user formats. Theme tokens only. */
+   (.acpmux-composer-field): the chat font size and line height, no chrome. Formatting shows
+   only where the user formats. Theme tokens only. */
 .acpmux-md-field {
   position: relative;
   /* Keep long drafts inside the composer: it grows to 40% of the pane, never less than eight
      lines, and leaves the transcript and location shelf anchored while the draft grows (Leo,
      2026-10-24: "I think we can afford to expand the composer text area a bit more than we do right
      now. When there's lots of text."). A short pane still gives up height (bottomStack.css). */
-  max-height: max(calc(var(--text-body--line-height, 22px) * 8 + var(--cmux-control-height, 23px)), 40vh);
+  max-height: max(calc(var(--text-content--line-height) * 8 + var(--cmux-control-height, 23px)), 40vh);
   overflow-y: auto;
   /* A long draft scrolls in this box alone (Leo 2026-10-20: reaching the top or the bottom must
      not shift anything): no chaining into the transcript, no bounce. */
   overscroll-behavior: contain;
   padding: calc(15px * var(--cmux-interface-scale, 1)) calc(16px * var(--cmux-interface-scale, 1)) calc(8px * var(--cmux-interface-scale, 1));
-  font-size: var(--text-title, 15px);
-  line-height: var(--text-title--line-height, 22px);
+  font-size: var(--text-content);
+  line-height: var(--text-content--line-height);
   color: var(--agent-text);
 }
 /* A long draft's soft edges (Leo 2026-10-21), the transcript's (.acpmux-scroll, conversation.css):
@@ -124,7 +124,7 @@
   letter-spacing: var(--text-caption--letter-spacing);
 }
 .acpmux-md {
-  min-height: var(--text-title--line-height, 22px);
+  min-height: var(--text-content--line-height);
   outline: none;
   white-space: pre-wrap;
   word-break: break-word;
@@ -149,18 +149,19 @@
   border-radius: 4px;
   background: color-mix(in srgb, var(--agent-text) 9%, transparent);
   font-family: ui-monospace, "SF Mono", Menlo, monospace;
-  font-size: 13px;
+  font-size: var(--cv-code-size, calc(var(--text-content) * 13 / 14));
 }
 .acpmux-md pre {
   padding: 8px 10px;
   border-radius: 8px;
   background: color-mix(in srgb, var(--agent-text) 6%, transparent);
   overflow-x: auto;
   font-family: ui-monospace, "SF Mono", Menlo, monospace;
-  font-size: 13px;
-  line-height: 19px;
+  font-size: var(--cv-codeblock-size, calc(var(--text-content) * 12 / 14));
+  line-height: var(--cv-codeblock-line-height, calc(var(--text-content) * 20 / 14));
 }
 .acpmux-md pre code {
+  font-size: inherit;
   padding: 0;
   background: none;
 }
@@ -184,7 +185,7 @@
 .acpmux-md h1,
 .acpmux-md h2,
 .acpmux-md h3 {
-  font-size: 15px;
+  font-size: inherit;
   font-weight: 600;
 }
 .acpmux-md hr {

webviews/src/agent-session/acpmux/newtab/screen.css

@@ -16,8 +16,8 @@
 /* The field wraps a long draft and grows with it (field-sizing; NewTabScreen fits it only in an engine
    without field-sizing) up to eight lines,
    the chat composer's cap (markdownField.css), and never past 40% of the pane; then it scrolls.
-   One line keeps the 52px row: 16px above and below a 20px line. Nothing cuts the draft. */
-.nt-field{flex:1;min-width:0;display:block;box-sizing:border-box;field-sizing:content;min-height:calc(1lh + 32px);max-height:min(calc(8lh + 32px),40vh);margin:0;border:0;outline:0;padding:16px 0;resize:none;overflow-x:hidden;overflow-y:auto;white-space:pre-wrap;overflow-wrap:break-word;background:none;color:var(--agent-text);caret-color:var(--cmux-caret, var(--agent-text));font:inherit;font-size:var(--text-title);line-height:var(--text-title--line-height);letter-spacing:var(--text-title--letter-spacing)}
+   The row follows the content line height, with 16px above and below. Nothing cuts the draft. */
+.nt-field{flex:1;min-width:0;display:block;box-sizing:border-box;field-sizing:content;min-height:calc(1lh + 32px);max-height:min(calc(8lh + 32px),40vh);margin:0;border:0;outline:0;padding:16px 0;resize:none;overflow-x:hidden;overflow-y:auto;white-space:pre-wrap;overflow-wrap:break-word;background:none;color:var(--agent-text);caret-color:var(--cmux-caret, var(--agent-text));font:inherit;font-size:var(--text-content);line-height:var(--text-content--line-height)}
 /* The hint stays one line (the empty field keeps its one-line row); only the draft wraps. */
 .nt-field::placeholder{color:var(--acpmux-composer-placeholder);opacity:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .nt-hint{flex:none;color:var(--acpmux-composer-dim);font-size:12px;white-space:nowrap}
@@ -72,14 +72,13 @@
   /* On the field's first line (the row is top-aligned so the glyph stays there as the draft grows). */
   display: flex;
   align-items: center;
-  height: var(--text-title--line-height);
+  height: var(--text-content--line-height);
   margin-top: 16px;
   font: 600 16px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
   color: var(--agent-ansi-5, #d670d6);
 }
 .nt-screen[data-shell] .nt-field {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 15px;
   caret-color: var(--agent-ansi-5, #d670d6); /* caret-color: the shell mode's color, as its glyph */
 }
 /* The card's bar, the agent composer's (Leo 2026-10-13): the agent's model, effort and speed chip,
@@ -162,7 +161,7 @@
   flex: none;
   display: flex;
   align-items: center;
-  height: var(--text-title--line-height);
+  height: var(--text-content--line-height);
   margin-top: 16px;
   font: 600 16px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
   color: var(--agent-soft);
@@ -177,9 +176,6 @@
 .nt-screen[data-template="console"] .nt-field {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
 }
-.nt-screen[data-template="console"] .nt-field {
-  font-size: 15px;
-}
 /* The composer template's card sits about the window's middle, at a fixed place: centering the
    page's content moved it up with every row under it (Now Playing, a notice), every pasted image
    and every line of a long draft (Leo 2026-10-19: the composer kept "going to places"). 102px puts
@@ -198,9 +194,6 @@
   min-height: 96px;
   padding-top: 2px;
 }
-.nt-screen[data-template="composer"] .nt-field {
-  font-size: 18px;
-}
 .nt-cards[data-variant="list"] {
   grid-template-columns: minmax(0, 1fr);
   gap: 2px;