Merge pull request #72 from levelcodeai/feat/chat-typography-t2

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

Author: ndemianc

docs/CHAT-TYPOGRAPHY.md

@@ -78,9 +78,15 @@ This is the real trade-off in the whole document, so it gets stated rather than
 paragraphs of explanation at that size, at `line-height: 1.5`, is why the panel feels cramped next to
 the reference.
 
-**Decision:** message bodies get their own size (~14px) and leading (~1.65), expressed relative to a
-single custom property. Everything else — the composer, buttons, session cards, the status row,
-approval chips — keeps inheriting the workbench size, so the panel still belongs to the editor.
+**Decision:** message bodies get their own size and leading (~1.65), expressed through a single custom
+property. Everything else — the composer, buttons, session cards, the status row, approval chips —
+keeps inheriting the workbench size, so the panel still belongs to the editor.
+
+The size is an **offset**, `calc(var(--vscode-font-size) + 1px)`, not a flat 14px. Review caught the
+reason: a flat value silently inverts the decision for anyone who has raised the editor's UI font for
+accessibility — an 18px workbench would read 14px prose inside 18px chrome, which is the divergence
+this decision argues for, pointing the wrong way. At the default 13px it resolves to the same 14px, so
+the change is invisible to everyone who has not touched it.
 
 **The cost, honestly:** the chat will no longer match workbench chrome exactly. That is a real
 inconsistency, and it is the deliberate price of the panel being a place you *read* rather than a
@@ -117,10 +123,22 @@ for exactly this case).
 
 ### D7 — It stays hackable: two settings, no hard-coded values.
 
-`levelcode.ai.chat.proseWidth` (px, `0` = unconstrained) and `levelcode.ai.chat.fontSize`
-(`0` = follow the workbench). Both flow through CSS custom properties set on the container, so the
-defaults are a starting point rather than a verdict — consistent with the editor's whole posture, and
-the honest answer to anyone who preferred the old density.
+`levelcode.ai.chat.proseWidth` (px) and `levelcode.ai.chat.fontSize` (px). Both flow through the CSS
+custom properties above, set on the container, so the defaults are a starting point rather than a
+verdict — consistent with the editor's whole posture, and the honest answer to anyone who preferred
+the old density.
+
+**`0` means "leave the stylesheet alone" for both**, and nothing more. The first draft of this line
+claimed `0` = *unconstrained* for the width and `0` = *follow the workbench* for the size; neither was
+what the code did, and review caught both. The width's default is a 680px measure, not the absence of
+one — the way to widen it is a large number. The size's default now does track the workbench, but by
+the D2 offset, which is a property of the stylesheet rather than of the sentinel.
+
+Both are **clamped at the host boundary** (`clampSetting`, 8–24 and 320–2000). `minimum`/`maximum` in
+the contribution schema only drive the settings *editor*; a hand-edited `settings.json` reaches
+`getConfiguration()` unchecked, and these values land directly in CSS. `proseWidth: 1` is a one-pixel
+transcript — a panel with nothing left on screen to open settings with, whose only exit is finding the
+JSON file again. `webviewCss.test.js` pins the clamp to the schema so the two cannot drift.
 
 ---
 
@@ -142,7 +160,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

@@ -2100,17 +2100,45 @@ async function browseProviderModels(cfg, providerId) {
 	sendConfigToWebview();
 }
 
+// A settings number on its way into a CSS custom property.
+//
+// `minimum`/`maximum` in the contribution schema only drive the settings *editor*: it draws a squiggle
+// and saves the value anyway, and a hand-edited settings.json, a synced profile or a bad merge never
+// passes through that UI at all. Whatever is in the file is what `getConfiguration()` returns, and here
+// it lands directly in CSS — where `chat.proseWidth: 1` is a one-pixel transcript and
+// `chat.fontSize: 0.5` is a blank panel. Neither leaves anything on screen to open settings with, so
+// the way out is to find the JSON file again; clamping at the boundary is cheaper than that.
+//
+// Out-of-range is pulled INTO the range rather than rejected — someone who asks for a 200px measure
+// wants it narrow, so give them the narrowest readable one instead of silently ignoring them. Only 0,
+// a negative, or a non-number means "leave the stylesheet's own value alone".
+function clampSetting(raw, lo, hi) {
+	const n = Number(raw);
+	if (!Number.isFinite(n) || n <= 0) { return 0; }
+	return Math.min(Math.max(n, lo), hi);
+}
+
 function sendConfigToWebview() {
 	const cfg = aiConfig();
 	// Gateway mode (signed in — the gateway only routes when authenticated): the footer reflects the
 	// LevelCode Cloud plan model (free → gpt-oss, paid → Kimi), not the BYOK provider — with a `paid` flag
 	// 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, so anyone who preferred the old density has a one-setting way back
+	// rather than an argument.
+	//
+	// 0 means "leave the stylesheet alone" for both — the size then tracks the workbench
+	// (`--vscode-font-size` + 1px) and the measure stays at its 680px default. It does NOT mean
+	// "unconstrained": the way to widen the measure is a large number, not 0.
+	const proseSize = clampSetting(cfg.get('chat.fontSize', 0), 8, 24);
+	const proseWidth = clampSetting(cfg.get('chat.proseWidth', 0), 320, 2000);
 	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
@@ -2120,7 +2148,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,18 @@
   #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).
+       An OFFSET, not a flat 14px, so prose TRACKS the workbench instead of pinning against it. A flat
+       value quietly inverts for anyone who raises the editor's UI font for accessibility: at a 18px
+       workbench they would read 14px prose inside 18px chrome — the divergence D2 argues for, pointing
+       the wrong way. At the default 13px this still resolves to 14px, so nothing moves for anyone who
+       has not changed it. */
+    --prose-size: calc(var(--vscode-font-size, 13px) + 1px);
+    --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 +121,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 +140,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
@@ -3506,6 +3523,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

@@ -375,6 +375,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` tracks the editor's UI font size, one step larger for reading — a 13px workbench gives 14px prose.\n\nThe workbench size is tuned for menu labels and tree rows; message bodies read a step above it so a long answer is comfortable. Controls, cards and the composer always match the workbench exactly. Values are clamped to 8–24."
+        },
+        "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) — it does **not** mean unconstrained.\n\nOnly has an effect when the panel is wider than the measure: in a narrow sidebar the container already bounds the line length. Raise it to let the transcript spread across a wide editor tab. Values are clamped to 320–2000."
+        },
         "levelcode.ai.chat.groupActivity": {
           "type": "boolean",
           "default": true,