feat(chat): prose gets its own type scale — T2 (+ T5's escape hatch)

The chat inherited `--vscode-font-size`: the size of menu labels and tree rows.
Right for a sidebar widget, wrong for reading three paragraphs, and the reason
the panel felt cramped beside the reference.

Message bodies now have their own size and leading (14px / 1.65) behind custom
properties. Scoped to `.msg .body`, NOT `.msg` — on `.msg` it would drag the role
label, the copy button and the checkpoint control up with it and the panel would
stop matching the editor. A test pins that scoping, because it is the whole
safety property of this slice.

The heading scale widens from 1.3/1.18/1.07 to 1.45/1.25/1.1. The old scale put
0.11em between h2 and h3 — 1.4px at 13px — so three levels of hierarchy were
indistinguishable without selecting the text. Measured after: 20.3 / 17.5 / 15.4
against 14px body, ~3px steps instead of 1.4px.

T1's em-based rhythm now scales with it, which was the point of making it em in
the first place: the paragraph gap resolves against the prose size, so it reads
8px in the sidebar and 14px at reading width without a second rule.

The measure holds at ~107 characters (was ~115 at 13px, 154 before T1) — the cap
tightening as the type grows, as predicted.

**T5 is folded in rather than sequenced after.** Ordering it last was a mistake:
T2 is the one slice that changes what every existing user sees, and shipping a
divisive change with no way back is worse than not shipping it.
`levelcode.ai.chat.fontSize` and `chat.proseWidth`, both defaulting to 0 meaning
"follow the default" — and 0 CLEARS the custom property so the stylesheet wins
again, rather than pinning whatever today's default happens to be. The doc
records the reordering and why.

Four guards, verified non-vacuous: scope the size to .msg (16/20), revert the
heading scale (17/20), make the role label relative (16/20), hard-code the
cleared fallback (18/20), drop one of the two config payloads (18/20).
33 suites green.

Author: ndemianc

docs/CHAT-TYPOGRAPHY.md

@@ -142,7 +142,10 @@ selection, and every non-prose control still matches workbench chrome.
 
 **T4 — speaker treatment** *(S)*. D6. Ships: the quieter label, verified against `.msg.cont`.
 
-**T5 — the escape hatch** *(S)*. D7. Ships: the two settings and their plumbing.
+**T5 — the escape hatch** *(S)*. D7. **Folded into T2 and shipped with it.** Sequencing it last was a
+mistake: T2 is the one slice that changes what every existing user sees, and shipping a divisive
+change with no way back is worse than not shipping it. The plumbing is also shared — once one custom
+property reaches the webview from settings, the second is a line — so splitting them bought nothing.
 
 Sequencing: T1 first and alone — it may turn out to be most of the perceived fix, and shipping it
 by itself is the cheapest way to find out before spending effort on T2–T4.

extensions/levelcode-ai/extension.js

@@ -2090,10 +2090,16 @@ function sendConfigToWebview() {
 	// so the webview can show the free-tier Upgrade CTA.
 	// Calm transcript: whether the webview folds consecutive agent actions into one collapsible group.
 	const groupActivity = cfg.get('chat.groupActivity', true) !== false;
+	// T2/T5 (docs/CHAT-TYPOGRAPHY.md D2, D7). Prose gets its own size because `--vscode-font-size` is the
+	// size of menu labels and tree rows — right for chrome, wrong for reading three paragraphs. Both are
+	// escape hatches by design: 0 means "follow the workbench" / "do not constrain", so anyone who
+	// preferred the old density has a one-setting way back rather than an argument.
+	const proseSize = Number(cfg.get('chat.fontSize', 0)) || 0;
+	const proseWidth = Number(cfg.get('chat.proseWidth', 0)) || 0;
 	if (providerMode() === 'gateway' && cloudSignedIn) {
 		const model = gatewayModel();
 		post({
-			type: 'config', provider: 'gateway', model: gatewayModelLabel(model), modelId: model,
+			type: 'config', provider: 'gateway', proseSize, proseWidth, model: gatewayModelLabel(model), modelId: model,
 			providerLabel: 'LevelCode Cloud', contextLimit: contextLimitFor('openai', capsModel(model)),
 			gateway: true, plan: cloudPlanName() || 'Free', paid: isPaidCloudPlan(cloudPlanName()),
 			groupActivity: groupActivity
@@ -2103,7 +2109,7 @@ function sendConfigToWebview() {
 	const providerId = currentProviderId();
 	const p = providers.getProvider(providerId) || providers.getProvider('claude');
 	// Carry the model's context window so the footer meter updates the moment the model changes.
-	post({ type: 'config', provider: providerId, model: activeModel(cfg, providerId), providerLabel: p.label, contextLimit: currentContextLimit(), groupActivity: groupActivity });
+	post({ type: 'config', provider: providerId, proseSize, proseWidth, model: activeModel(cfg, providerId), providerLabel: p.label, contextLimit: currentContextLimit(), groupActivity: groupActivity });
 }
 
 class ChatViewProvider {

extensions/levelcode-ai/media/chat.html

@@ -28,7 +28,13 @@
   #log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px;
     /* T1 (docs/CHAT-TYPOGRAPHY.md D1) — the reading measure. A custom property so T5 can hand it to a
        setting later without touching the rules below. */
-    --prose-max: 680px; }
+    --prose-max: 680px;
+    /* T2 (D2) — the READING type. `--vscode-font-size` is the size of menu labels and tree rows: right
+       for chrome, wrong for three paragraphs of explanation. Message bodies alone get their own size
+       and leading; every control around them keeps inheriting the workbench, so the panel still
+       belongs to the editor. Both are overridable at runtime by the settings (D7). */
+    --prose-size: 14px;
+    --prose-leading: 1.65; }
   /* Log is a flex column → children default to flex-shrink:1. Any child with overflow:hidden (e.g. the
      approval/edit cards) then gets an auto min-size of 0 and the flex algorithm crushes it to an invisible
      line once the log overflows. Pin every child to its natural height; the log itself scrolls instead. */
@@ -110,6 +116,10 @@
   #jumpLatest.show { display: inline-flex; }
   #jumpLatest:hover { opacity: 1; background: var(--vscode-toolbar-hoverBackground, rgba(127,127,127,.25)); }
   .msg { white-space: normal; word-wrap: break-word; line-height: 1.5; }
+  /* Scoped to .body, NOT .msg: the role label, the copy button and the checkpoint control are chrome
+     and stay at the workbench size. This is also what makes T1's em-based rhythm scale — those margins
+     resolve against THIS size, so raising the type opens the spacing with it. */
+  .msg .body { font-size: var(--prose-size); line-height: var(--prose-leading); }
   .msg .role { font-size: 11px; opacity: .55; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; }
   /* a quiet remind-me line: a soft accent rule, small label, the words in a calm serif italic */
   .rme { margin: 0 4px; padding: 10px 0 10px 14px; border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); }
@@ -125,7 +135,9 @@
   .msg .body li { margin: 2px 0; }
   .msg .body li > ul, .msg .body li > ol { margin: 2px 0; }
   .msg .body h1, .msg .body h2, .msg .body h3, .msg .body h4, .msg .body h5, .msg .body h6 { margin: 12px 0 6px; line-height: 1.3; font-weight: 600; }
-  .msg .body h1 { font-size: 1.3em; } .msg .body h2 { font-size: 1.18em; } .msg .body h3 { font-size: 1.07em; }
+  /* D4 — the old 1.3/1.18/1.07 put 0.11em between h2 and h3: at 13px that is 1.4px, so three levels of
+     hierarchy were indistinguishable without selecting the text. */
+  .msg .body h1 { font-size: 1.45em; } .msg .body h2 { font-size: 1.25em; } .msg .body h3 { font-size: 1.1em; }
 
   /* T1 (D3) — vertical rhythm, in `em` so it scales when T2 raises the prose size, and gated to the
      width where the chat is actually being READ. The sidebar keeps today's density on purpose: this
@@ -3502,6 +3514,13 @@
   window.addEventListener('message', ev => {
     const m = ev.data;
     if (m.type === 'config'){
+      // D7 — the escape hatch. 0 means "follow the default": clearing the property lets the stylesheet
+      // value win again, rather than pinning it to whatever the default happened to be at the time.
+      const rootLog = document.getElementById('log');
+      if (rootLog){
+        rootLog.style.setProperty('--prose-size', m.proseSize ? m.proseSize + 'px' : '');
+        rootLog.style.setProperty('--prose-max', m.proseWidth ? m.proseWidth + 'px' : '');
+      }
       const label = m.provider === 'claude' ? prettyModel(m.model) : m.model;
       const mEl = document.getElementById('model');
       mEl.innerHTML = esc(label) + ' <span class="caret">▾</span>';

extensions/levelcode-ai/package.json

@@ -364,6 +364,20 @@
           "default": false,
           "description": "Include a list of all project file paths with each chat message, so the AI knows the repo structure. Uses more tokens."
         },
+        "levelcode.ai.chat.fontSize": {
+          "type": "number",
+          "default": 0,
+          "minimum": 0,
+          "maximum": 24,
+          "markdownDescription": "Font size for chat **prose** (message bodies), in pixels. `0` follows the editor's UI font size.\n\nThe workbench size is tuned for menu labels and tree rows; message bodies default to a slightly larger size so a long answer reads comfortably. Controls, cards and the composer always follow the workbench."
+        },
+        "levelcode.ai.chat.proseWidth": {
+          "type": "number",
+          "default": 0,
+          "minimum": 0,
+          "maximum": 2000,
+          "markdownDescription": "Maximum width of the chat transcript, in pixels. `0` uses the default reading measure (680px).\n\nOnly has an effect when the panel is wider than the measure — in a narrow sidebar the container already bounds the line length. Set a large value to let the transcript fill the full width."
+        },
         "levelcode.ai.chat.groupActivity": {
           "type": "boolean",
           "default": true,

extensions/levelcode-ai/test/webviewCss.test.js

@@ -297,6 +297,61 @@ test('TRANSCRIPT: the looser rhythm is gated to reading width, so the sidebar is
 		'headings need more space above than below, or they float between sections');
 });
 
+test('TRANSCRIPT: prose has its own type, and chrome does not follow it', () => {
+	// docs/CHAT-TYPOGRAPHY.md D2 — the deliberate divergence, and the whole risk of T2. The workbench
+	// size is tuned for menu labels; message bodies get their own. The scoping is the entire safety
+	// property: applied to `.msg` instead of `.msg .body` it would drag the role label, the copy
+	// button and the checkpoint control up with it, and the panel would stop matching the editor.
+	assert.match(css, /#log\s*\{[^}]*--prose-size:\s*\d+px/, 'the prose size is no longer a custom property');
+	assert.match(css, /#log\s*\{[^}]*--prose-leading:\s*[\d.]+/, 'the prose leading is no longer a custom property');
+	assert.match(css, /\.msg \.body \{[^}]*font-size:\s*var\(--prose-size\)[^}]*line-height:\s*var\(--prose-leading\)/,
+		'prose type must be set on .msg .body');
+
+	const scoped = /\.msg \.body \{[^}]*font-size:\s*var\(--prose-size\)/.test(css);
+	const leaked = /\.msg \{[^}]*font-size:\s*var\(--prose-size\)/.test(css);
+	assert.ok(scoped && !leaked, 'the prose size leaked onto .msg — chrome inside a turn would scale with it');
+	assert.match(css, /\.msg \.role \{[^}]*font-size:\s*11px/,
+		'the turn label must keep an absolute size, or it grows with the prose it is labelling');
+});
+
+test('TRANSCRIPT: the heading scale has steps you can actually see', () => {
+	// The old 1.3/1.18/1.07 put 0.11em between h2 and h3 — 1.4px at 13px, i.e. three levels of
+	// hierarchy that were indistinguishable without selecting the text.
+	const sizes = ['h1', 'h2', 'h3'].map((h) => {
+		const m = new RegExp('\\.msg \\.body ' + h + ' \\{ font-size: ([\\d.]+)em').exec(css);
+		assert.ok(m, 'no font-size for ' + h);
+		return Number(m[1]);
+	});
+	assert.ok(sizes[0] > sizes[1] && sizes[1] > sizes[2], 'the scale must descend: ' + sizes.join(' > '));
+	for (let i = 0; i < 2; i++) {
+		assert.ok(sizes[i] - sizes[i + 1] >= 0.13,
+			'h' + (i + 1) + '→h' + (i + 2) + ' differ by ' + (sizes[i] - sizes[i + 1]).toFixed(2)
+			+ 'em; below ~0.13em the levels are indistinguishable at this type size');
+	}
+});
+
+test('TRANSCRIPT: both type settings exist and reach the stylesheet (D7)', () => {
+	// Shipping a divisive change with no way back is worse than not shipping it. T5's escape hatch is
+	// folded into T2 for exactly that reason — see the PR.
+	const pkg2 = require('../package.json');
+	const props = pkg2.contributes.configuration.properties;
+	for (const key of ['levelcode.ai.chat.fontSize', 'levelcode.ai.chat.proseWidth']) {
+		assert.ok(props[key], key + ' is not declared — the change would be irreversible for a user');
+		assert.strictEqual(props[key].default, 0, key + ' must default to 0, meaning "follow the default"');
+	}
+	const ext2 = fs.readFileSync(path.join(__dirname, '..', 'extension.js'), 'utf8');
+	assert.match(ext2, /cfg\.get\('chat\.fontSize', 0\)/, 'the host never reads chat.fontSize');
+	assert.match(ext2, /cfg\.get\('chat\.proseWidth', 0\)/, 'the host never reads chat.proseWidth');
+	assert.strictEqual((ext2.match(/proseSize, proseWidth,/g) || []).length, 2,
+		'both config payloads must carry them, or the setting works in one provider mode and not the other');
+
+	// 0 must CLEAR the property so the stylesheet wins again, rather than pinning today's default.
+	assert.match(html, /setProperty\('--prose-size', m\.proseSize \? m\.proseSize \+ 'px' : ''\)/,
+		'0 must clear --prose-size, not write a hard-coded fallback');
+	assert.match(html, /setProperty\('--prose-max', m\.proseWidth \? m\.proseWidth \+ 'px' : ''\)/,
+		'0 must clear --prose-max, not write a hard-coded fallback');
+});
+
 test('SESSION CARD: every action button keeps a label for pointers and screen readers', () => {
 	// The collapse above hides `.sesslbl` VISUALLY. If the buttons had no title/aria-label, an
 	// icon-only row in a narrow pane would be unusable rather than merely compact.