Adjustable chat font size (grok.chatFontScale, #14) (v1.4.9)

phuryn · claude · phuryn · commit 91d3aaa70b2d · 2026-06-16T21:57:25.000+02:00
Lets users zoom the Grok chat panel on its own — text, icons, and spacing together — without rescaling the rest of VS Code (the reporter's complaint in #14 about the global Ctrl/Cmd+Shift+=). It's a percent setting (60–300, default 100) at User or Workspace scope and applies live with no reload. The webview uses CSS `zoom`, which scales layout but which `vh` units ignore — a 100vh body at zoom 0.7 renders at 70vh and leaves dead space below the composer. Both the `zoom` and a `height: calc(100vh / var(--chat-zoom))` compensation are derived from one `--chat-zoom` variable (baked into <body> by the host, updated live via postMessage), so the composer stays pinned to the bottom at any scale. Also: README screenshots for Voice input and the Agent Dashboard, plus a few wire-level details moved from the feature blurbs into docs/architecture.md. 473 tests green; live gate green (5 passed, image-gen SKIP). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  // Zoom for the Grok chat panel only (percent, 100 = default). Bump this to
+  // 150 / 200 to test issue #14 without rescaling the rest of VS Code.
+  "grok.chatFontScale": 100
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.4.9 — 2026-06-16
+
+> Make the chat bigger — just the chat.
+
+### Features
+
+- **Adjustable chat font size (#14).** A new `grok.chatFontScale` setting zooms the Grok chat panel only — text, icons, and spacing together — as a percent (e.g. `150`, `200`, or smaller like `70`). Unlike VS Code's global `Ctrl/Cmd+Shift+=`, it leaves the rest of the editor at its normal size, so you can enlarge (or shrink) just the chat for readability. It applies live with no reload, the composer stays pinned to the bottom of the panel at any scale, and it works at both User (global) and Workspace (local) scope. ([package.json](package.json), [src/sidebar.ts](src/sidebar.ts), [media/chat.css](media/chat.css), [media/chat.js](media/chat.js))
+
+### Docs
+
+- **README polish.** Added screenshots for *Voice input* and the *Agent Dashboard*, and moved a few wire-level implementation details out of the feature blurbs into [docs/architecture.md](docs/architecture.md) so the feature list reads less like internals. ([README.md](README.md), [docs/architecture.md](docs/architecture.md))
+
 ## 1.4.8 — 2026-06-15
 
 > Run several Grok sessions at once — switch between them instantly, and see at a glance which one needs you.
diff --git a/CLAUDE.md b/CLAUDE.md
diff --git a/README.md b/README.md
@@ -12,8 +12,6 @@ Works with a SuperGrok subscription or an xAI API key. **Not affiliated with xAI
 
 ![Generated image rendered inline from /imagine](docs/screenshots/imagine.png)
 
-**[More screenshots →](docs/screenshots/)**
-
 ---
 
 ## Why an extension, not the CLI?
@@ -97,7 +95,7 @@ _Click any feature to expand._
 <details>
 <summary><strong>Permission cards with diff preview</strong> — see every edit in VS Code's native diff before you approve</summary>
 
-For `kind:"edit"` tool calls the card shows a `path — N → M lines` summary and an **open diff →** button that opens VS Code's native diff editor against the proposed content. Approve with *Allow once / always*, or *Reject*. The actual write only happens *after* you approve, via `fs/write_text_file` — no surprise changes to your files.
+When Grok proposes an edit, the card shows a `path — N → M lines` summary and an **open diff →** button that opens VS Code's native diff editor against the proposed content. Approve with *Allow once / always*, or *Reject*. The file is written only **after** you approve — no surprise changes to your files.
 
 </details>
 
@@ -115,7 +113,7 @@ For `kind:"edit"` tool calls the card shows a `path — N → M lines` summary a
 <details>
 <summary><strong>Image & video generation</strong> — <code>/imagine</code> renders right in the chat</summary>
 
-Type `/imagine <prompt>` (or `/imagine-video <prompt>`) and the result renders **inline** — images as a compact thumbnail (capped at 320px; click to open the source file), videos with native playback controls. Hover either for **Copy path** / **Open in VS Code** icons. Both are **subscription-only** Grok features, both survive a session resume, and the file is streamed from disk so even a multi-MB video plays. (Editing a reference photo with `/imagine` works too, via Grok's `image_edit` tool.) Wire-format details: [research/image-generation.md](research/image-generation.md).
+Type `/imagine <prompt>` (or `/imagine-video <prompt>`) and the result renders **inline** — images as a compact thumbnail (capped at 320px; click to open the source file), videos with native playback controls. Hover either for **Copy path** / **Open in VS Code** icons. Both are **subscription-only** Grok features, both survive a session resume, and even a multi-MB video plays. Editing a reference photo with `/imagine` works too. Wire-format details, for the curious: [research/image-generation.md](research/image-generation.md).
 
 </details>
 
@@ -128,6 +126,8 @@ The two-word send phrase is deliberate (it won't fire on a message that merely e
 
 > **Cost:** Speech-to-Text is a *separate*, pay-as-you-go xAI product — **$0.10/hr** batch, **$0.20/hr** streaming, billed by audio duration. In practice ~500 words ≈ ½–1¢; a heavy 10,000-word day ≈ 10¢. It needs its own [console.x.ai](https://console.x.ai) key (`grok.voiceApiKey` / `GROK_VOICE_API_KEY` / `XAI_API_KEY`) — a SuperGrok subscription grants no API credit. Why it bypasses the CLI, and how the cost was measured end-to-end: [research/voice-input.md](research/voice-input.md).
 
+![Voice input with live transcription in the composer](docs/screenshots/voice_mode.png)
+
 </details>
 
 <details>
@@ -156,21 +156,23 @@ The green/red dot is an **unread** badge: it appears when a session finishes whi
 
 To keep a pile of background sessions from each pinning a live process, a session left untouched for an hour (or beyond ~8 live) is quietly shut down — never one that's working or waiting on you — and reloads from history on click, losing nothing.
 
+![Session status dots in the history dropdown](docs/screenshots/v1.4.7_visual_status.jpg)
+
 </details>
 
 <details>
 <summary><strong>Instant feedback</strong> — a <em>Grokking…</em> indicator the moment you send, with no startup pause</summary>
 
 Every message you send shows an animated **Grokking…** placeholder immediately, so there's always feedback that Grok received it — it's replaced in place the instant the first thought, reply, or tool action streams in.
 
-There's also no longer a long silent pause before that first response. The extension primes each new session with a hidden plan-mode instruction; that primer now runs **eagerly in the background** the moment the session goes live (and on resume, and after `/compact`) instead of sitting in front of your first message — so it's almost always finished before you hit send. If you *are* quick, your message appears right away and is released the instant the primer settles. The primer text was also slimmed down so it completes in a beat rather than wandering off to read your workspace first.
+There's also no longer a long silent pause before that first response. Plan Mode needs a little hidden setup per session; it now happens **quietly in the background** the moment a session opens — instead of in front of your first message — so it's almost always done before you hit send. If you *are* quick, your message still appears right away. *(What that setup is and why it's needed: [How it works](#how-it-works).)*
 
 </details>
 
 <details>
 <summary><strong>Session history</strong> — resume, rename, or delete any past session</summary>
 
-The clock icon lists every session the CLI saved for this project (`~/.grok/sessions/<urlencoded-cwd>/`). Click a row to resume — the extension calls `session/load` and Grok replays the conversation, with inline images, plans, and reasoning intact. Hover to rename (pencil) or delete (trash); names default to the first message. Renames live in VS Code's `globalState` and never touch Grok's own files.
+The clock icon lists every session the CLI saved for this project. Click a row to resume — Grok replays the conversation, with inline images, plans, and reasoning intact. Hover to rename (pencil) or delete (trash); names default to the first message. Renames are stored by the extension and never touch Grok's own files.
 
 </details>
 
@@ -184,7 +186,7 @@ Every action Grok takes appears in chat — a single flat row ("Read sidebar.ts
 <details>
 <summary><strong>Math &amp; LaTeX rendering</strong> — equations render as math, not raw TeX</summary>
 
-When Grok answers with LaTeX — inline `\(…\)`, display `\[…\]`, and environments like `\begin{pmatrix}` matrices, `cases`, integrals, sums, and Greek — the chat renders it as real typeset math via [MathJax](https://www.mathjax.org), vendored into the extension so it works **offline with no network**. Inline math sits on the text baseline in your editor's text color; display equations get their own centered block with horizontal scroll so a wide matrix doesn't overflow the narrow sidebar. A malformed expression shows a small inline error instead of blanking the message. **Hover a display equation** for actions: copy its LaTeX source, or export it as a PNG (your theme's background) or a transparent SVG tuned for a light or dark background. Bare `$…$` is intentionally **not** a delimiter — it would mangle prose like "it costs $5 and then $10".
+When Grok answers with LaTeX — inline `\(…\)`, display `\[…\]`, and environments like `\begin{pmatrix}` matrices, `cases`, integrals, sums, and Greek — the chat renders it as real typeset math via [MathJax](https://www.mathjax.org), bundled into the extension so it works **offline with no network**. Inline math sits on the text baseline in your editor's text color; display equations get their own centered block with horizontal scroll so a wide matrix doesn't overflow the narrow sidebar. A malformed expression shows a small inline error instead of blanking the message. **Hover a display equation** for actions: copy its LaTeX source, or export it as a PNG (your theme's background) or a transparent SVG tuned for a light or dark background. Bare `$…$` is intentionally **not** a delimiter — it would mangle prose like "it costs $5 and then $10".
 
 ![LaTeX expressions rendered as typeset math](docs/screenshots/v1.4.5%20LaTeX%20expressions.png)
 
@@ -193,7 +195,7 @@ When Grok answers with LaTeX — inline `\(…\)`, display `\[…\]`, and enviro
 <details>
 <summary><strong>Mermaid diagrams</strong> — flowcharts and sequence diagrams render as diagrams</summary>
 
-When Grok answers with a ` ```mermaid ` block — flowcharts, sequence and state diagrams, git graphs, class and ER diagrams, and more — the chat renders it as a real diagram via [Mermaid](https://mermaid.js.org), vendored into the extension so it works **offline with no network**. Diagrams are themed to match your VS Code light/dark mode and scroll horizontally so a wide flowchart doesn't overflow the narrow sidebar. **Hover a diagram** to copy its source, or export it as a PNG (your theme's background) or a transparent SVG re-themed for a light or dark background. If a diagram is still streaming or turns out to be malformed, the readable diagram source is shown instead — you never lose the content.
+When Grok answers with a ` ```mermaid ` block — flowcharts, sequence and state diagrams, git graphs, class and ER diagrams, and more — the chat renders it as a real diagram via [Mermaid](https://mermaid.js.org), bundled into the extension so it works **offline with no network**. Diagrams are themed to match your VS Code light/dark mode and scroll horizontally so a wide flowchart doesn't overflow the narrow sidebar. **Hover a diagram** to copy its source, or export it as a PNG (your theme's background) or a transparent SVG re-themed for a light or dark background. If a diagram is still streaming or turns out to be malformed, the readable diagram source is shown instead — you never lose the content.
 
 ![Mermaid diagram rendered inline in the chat](docs/screenshots/v1.4.6%20Mermaid%20diagrams.png)
 
@@ -202,7 +204,7 @@ When Grok answers with a ` ```mermaid ` block — flowcharts, sequence and state
 <details>
 <summary><strong>Model picker</strong> — switch models live, no restart</summary>
 
-Click the model name in the gear popover. The list comes from the CLI's `session/new` response; switching is live (`session/set_model`) with no restart when the target model belongs to the same agent.
+Click the model name in the gear popover. The model list comes from your CLI; switching is live with no restart in most cases. (A few models belong to a different agent and need a quick session restart — the extension detects that and handles it for you, carrying your context forward.)
 
 </details>
 
@@ -247,6 +249,7 @@ Or edit the config via gear → *Open global / project config*, then click **+**
 | `grok.defaultEffort` | `""` | Reasoning effort forwarded as `--reasoning-effort` (`none` / `minimal` / `low` / `medium` / `high` / `xhigh`). Empty = CLI default. Changing it restarts the session. |
 | `grok.includeActiveFileByDefault` | `true` | Auto-add the active editor as a context chip. |
 | `grok.useCtrlEnterToSend` | `false` | When true, Enter inserts a newline and Ctrl/Cmd+Enter sends. |
+| `grok.chatFontScale` | `100` | Zoom for the chat panel only, as a percent (`150`, `200`, …). Scales the whole chat UI without rescaling the rest of VS Code (unlike `Ctrl/Cmd+Shift+=`). Applies live; supports User (global) and Workspace (local) scope. |
 | `grok.voiceApiKey` | `""` | xAI API key for voice Speech-to-Text — a separate [console.x.ai](https://console.x.ai) developer key, not the CLI login. Empty = fall back to `GROK_VOICE_API_KEY` / `XAI_API_KEY` in the workspace `.env`. |
 | `grok.ffmpegPath` | `""` | Path to `ffmpeg` for microphone recording. Empty = use `ffmpeg` from `PATH`. |
 | `grok.voiceInputDevice` | `""` | Microphone device override. Empty = system default (Windows auto-detects the first DirectShow audio device). |
diff --git a/docs/architecture.md b/docs/architecture.md
@@ -216,6 +216,18 @@ The full pedagogical write-up lives in
 - **`available_commands_update` drives slash autocomplete.** No hardcoded command
   list; the CLI tells the extension what's available, so plugin/skill installs
   surface immediately.
+- **Model switching is agent-aware.** Models belong to *agent types*
+  (`grok-build`/`grok-build-plan` vs. the `cursor` agent that owns the Composer
+  models). The CLI binds the agent when the process spawns and locks it after the
+  first turn (including our primer), so a live `session/set_model` only works
+  *within* the same agent — a cross-agent switch errors
+  `MODEL_SWITCH_INCOMPATIBLE_AGENT`. So `switchModel` tries the live switch and,
+  on that specific error (`isIncompatibleAgentError` in
+  [src/acp-dispatch.ts](../src/acp-dispatch.ts)), persists the pick to
+  `grok.defaultModel` and restarts — `newSession` re-applies the model *before* the
+  primer runs, while the agent is still rebindable. No history → transparent
+  restart; with history → the same Summarize / Just-Restart choice as an effort
+  change.
 - **Generated media is path-based, not an ACP image block.** `/imagine` and
   `/imagine-video` write a file into the session dir and report its *path* as
   JSON-in-text on the completed tool result. The host parses the path, classifies
diff --git a/docs/screenshots/v1.4.7_visual_status.jpg b/docs/screenshots/v1.4.7_visual_status.jpg
diff --git a/media/chat.css b/media/chat.css
@@ -18,7 +18,14 @@ html, body {
 body {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  /* grok.chatFontScale zooms the chat via --chat-zoom (set inline on <body>).
+     `zoom` scales layout but `vh` ignores it, so a 100vh body at zoom 0.7 would
+     render at 70vh and leave dead space below the composer — divide the height
+     back out so the body always fills the viewport and the composer stays
+     pinned to the bottom at any scale. */
+  zoom: var(--chat-zoom, 1);
+  height: calc(100vh / var(--chat-zoom, 1));
+  overflow: hidden;
 }
 
 .muted { color: var(--vscode-descriptionForeground); }
diff --git a/media/chat.js b/media/chat.js
@@ -2721,6 +2721,13 @@
         state.cwd = msg.cwd || "";
         state.extVersion = msg.extVersion || "";
         break;
+      case "fontScale":
+        // Live chat-only zoom (grok.chatFontScale). Initial value is baked into
+        // <body style="--chat-zoom:…"> by the host; this just applies later edits.
+        // The CSS derives both `zoom` and the viewport-height compensation from
+        // this one variable, so the composer stays pinned to the bottom.
+        document.body.style.setProperty("--chat-zoom", String(msg.value || 1));
+        break;
       case "grokUpdateStatus":
         // Reply to the About panel's checkGrokUpdate. The check also reports the
         // CLI's current version — adopt it, since the ACP handshake doesn't always
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "grok-vscode-phuryn",
   "displayName": "Grok Build",
   "description": "Thin VS Code sidebar client for the Grok Build CLI over Agent Client Protocol (ACP). Streams responses with thinking traces, tool calls, file chips, and permission cards with diff preview. All session state stays in the CLI. Not affiliated with xAI.",
-  "version": "1.4.8",
+  "version": "1.4.9",
   "publisher": "PawelHuryn",
   "author": {
     "name": "Paweł Huryn",
@@ -191,6 +191,13 @@
           "default": false,
           "description": "Use Ctrl/Cmd+Enter to send (Enter inserts newline)."
         },
+        "grok.chatFontScale": {
+          "type": "number",
+          "default": 100,
+          "minimum": 60,
+          "maximum": 300,
+          "markdownDescription": "Zoom for the Grok chat panel only, as a percent (100 = default). Scales the whole chat UI — text, icons, spacing — without affecting the rest of VS Code (unlike `Ctrl/Cmd+Shift+=`). Applies live, no reload needed. Supports User (global) and Workspace (local) scope."
+        },
         "grok.voiceApiKey": {
           "type": "string",
           "default": "",
diff --git a/src/sidebar.ts b/src/sidebar.ts
@@ -187,6 +187,9 @@ export class GrokSidebar implements vscode.WebviewViewProvider {
       ) {
         this.postVoiceConfigured();
       }
+      if (e.affectsConfiguration("grok.chatFontScale")) {
+        this.postFontScale();
+      }
     });
   }
 
@@ -1623,6 +1626,17 @@ See design doc for the full state machine diagram.`;
 
   /** Tell the webview whether a voice API key is resolvable, so the mic button
    *  can show a "needs setup" hint up front instead of only failing on click. */
+  /** Chat-panel zoom factor (1.0 = 100%). Clamped to the declared 60–300% range. */
+  private chatFontScale(): number {
+    const pct = vscode.workspace.getConfiguration("grok").get<number>("chatFontScale", 100);
+    const n = Number.isFinite(pct) ? (pct as number) : 100;
+    return Math.min(300, Math.max(60, n)) / 100;
+  }
+
+  private postFontScale(): void {
+    this.post({ type: "fontScale", value: this.chatFontScale() });
+  }
+
   private postVoiceConfigured(): void {
     const cwd = vscode.workspace.workspaceFolders?.[0]?.uri.fsPath ?? process.cwd();
     const cfg = vscode.workspace.getConfiguration("grok");
@@ -2359,7 +2373,7 @@ See design doc for the full state machine diagram.`;
       content="default-src 'none'; style-src ${webview.cspSource} 'unsafe-inline'; img-src ${webview.cspSource} data:; media-src ${webview.cspSource} data:; font-src ${webview.cspSource}; script-src 'nonce-${nonce}';" />
 <link rel="stylesheet" href="${mediaUri("chat.css")}" />
 </head>
-<body>
+<body style="--chat-zoom: ${this.chatFontScale()}">
 
   <header class="top-bar">
     <button id="history-btn" class="toolbar-btn" title="Session history"></button>
