From 54c0bc35bef0fb8b91d9d1ff1fedd7a157a2e0c6 Mon Sep 17 00:00:00 2001
From: Dominik Murar <79326595+dominik-murar@users.noreply.github.com>
Date: Fri, 30 Oct 2026 11:04:23 +0100
Subject: [PATCH 1/4] feat(web): choose a separate font for chat messages

Adds a Chat font (family and size) to Typography, shown with the other
separate fonts. It applies to user and assistant messages and the
new-thread heading; the rest of the UI keeps the interface font.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../settings/DesktopClientSettings.test.ts    |  2 +
 apps/web/src/appInit.tsx                      |  4 ++
 apps/web/src/appearanceFonts.ts               | 17 ++++++++
 apps/web/src/components/NoProjectsHero.tsx    |  4 +-
 .../src/components/chat/DraftHeroHeadline.tsx |  2 +-
 .../chat/DraftHeroProjectHeading.tsx          |  6 ++-
 .../components/chat/TimelineAssistantRows.tsx |  1 +
 .../chat/TimelineUserMessageRow.tsx           |  2 +-
 .../src/components/chat/TriageDraftHero.tsx   |  2 +-
 .../settings/SettingsFontPreviews.tsx         | 12 ++++++
 .../settings/SettingsPanels.logic.ts          |  6 +++
 .../components/settings/SettingsPanels.tsx    |  2 +
 .../TypographySettings.browser.test.tsx       |  1 +
 .../settings/TypographySettings.tsx           | 43 ++++++++++++++++++-
 .../src/components/settings/settingsSearch.ts |  7 +++
 apps/web/src/index.css                        | 23 ++++++++++
 packages/contracts/src/settings.ts            | 14 ++++++
 17 files changed, 141 insertions(+), 7 deletions(-)

diff --git a/apps/desktop/src/settings/DesktopClientSettings.test.ts b/apps/desktop/src/settings/DesktopClientSettings.test.ts
index ec5062f9105bf..50bf186d52662 100644
--- a/apps/desktop/src/settings/DesktopClientSettings.test.ts
+++ b/apps/desktop/src/settings/DesktopClientSettings.test.ts
@@ -39,10 +39,12 @@ const clientSettings: ClientSettings = {
   diffLayout: "stacked",
   environmentIdentificationMode: "artwork",
   favorites: [],
+  fontFamilyChat: "",
   fontFamilyCode: "",
   fontFamilyComposer: "",
   fontFamilySans: "",
   fontFamilyTerminal: "",
+  fontSizeChat: 14,
   fontSizeCode: 13,
   fontSizeInterface: 16,
   fontSizePrompt: 14,
diff --git a/apps/web/src/appInit.tsx b/apps/web/src/appInit.tsx
index b9312858e334b..f9b8ab4f87797 100644
--- a/apps/web/src/appInit.tsx
+++ b/apps/web/src/appInit.tsx
@@ -83,8 +83,10 @@ function startClientAppearance(): void {
       previous?.fontFamilySans !== settings.fontFamilySans ||
       previous.fontFamilyCode !== settings.fontFamilyCode ||
       previous.fontFamilyComposer !== settings.fontFamilyComposer ||
+      previous.fontFamilyChat !== settings.fontFamilyChat ||
       previous.fontSizeInterface !== settings.fontSizeInterface ||
       previous.fontSizePrompt !== settings.fontSizePrompt ||
+      previous.fontSizeChat !== settings.fontSizeChat ||
       previous.fontSizeCode !== settings.fontSizeCode ||
       previous.fontSmoothing !== settings.fontSmoothing
     ) {
@@ -92,8 +94,10 @@ function startClientAppearance(): void {
         sans: settings.fontFamilySans,
         code: settings.fontFamilyCode,
         composer: settings.fontFamilyComposer,
+        chat: settings.fontFamilyChat,
         sizeInterface: settings.fontSizeInterface,
         sizePrompt: settings.fontSizePrompt,
+        sizeChat: settings.fontSizeChat,
         sizeCode: settings.fontSizeCode,
         smoothing: settings.fontSmoothing,
       });
diff --git a/apps/web/src/appearanceFonts.ts b/apps/web/src/appearanceFonts.ts
index 48f8e5955e7e1..5bd4bf29ff83b 100644
--- a/apps/web/src/appearanceFonts.ts
+++ b/apps/web/src/appearanceFonts.ts
@@ -1,10 +1,13 @@
 import {
+  DEFAULT_CHAT_FONT_SIZE,
   DEFAULT_CODE_FONT_SIZE,
   DEFAULT_INTERFACE_FONT_SIZE,
   DEFAULT_PROMPT_FONT_SIZE,
+  MAX_CHAT_FONT_SIZE,
   MAX_CODE_FONT_SIZE,
   MAX_INTERFACE_FONT_SIZE,
   MAX_PROMPT_FONT_SIZE,
+  MIN_CHAT_FONT_SIZE,
   MIN_CODE_FONT_SIZE,
   MIN_INTERFACE_FONT_SIZE,
   MIN_PROMPT_FONT_SIZE,
@@ -62,8 +65,10 @@ export interface AppearanceFontPreferences {
   readonly sans: string;
   readonly code: string;
   readonly composer: string;
+  readonly chat: string;
   readonly sizeInterface: number;
   readonly sizePrompt: number;
+  readonly sizeChat: number;
   readonly sizeCode: number;
   readonly smoothing: boolean;
 }
@@ -77,6 +82,7 @@ export function applyAppearanceFontVariables(
     ["--font-sans", preferences.sans, DEFAULT_SANS_FONT_STACK],
     ["--font-mono", preferences.code, DEFAULT_CODE_FONT_STACK],
     ["--font-composer", preferences.composer, "var(--font-sans)"],
+    ["--font-chat", preferences.chat, "var(--font-sans)"],
   ];
   for (const [variable, custom, fallback] of families) {
     const list = cssFontFamilies(custom);
@@ -89,6 +95,13 @@ export function applyAppearanceFontVariables(
 
   root.style.fontSize = `${clampInterfaceFontSize(preferences.sizeInterface)}px`;
   root.style.setProperty("--font-size-prompt", `${clampPromptFontSize(preferences.sizePrompt)}px`);
+  const chat = clampChatFontSize(preferences.sizeChat);
+  // The default leaves messages on their rem size, so they keep following the interface size.
+  if (chat === DEFAULT_CHAT_FONT_SIZE) {
+    root.style.removeProperty("--font-size-chat");
+  } else {
+    root.style.setProperty("--font-size-chat", `${chat}px`);
+  }
   const code = clampCodeFontSize(preferences.sizeCode);
   root.style.setProperty("--font-size-code", `${code}px`);
   root.style.setProperty("--diffs-font-size", `${code}px`);
@@ -118,6 +131,10 @@ function clampPromptFontSize(value: number): number {
   return clampFontSize(value, MIN_PROMPT_FONT_SIZE, MAX_PROMPT_FONT_SIZE, DEFAULT_PROMPT_FONT_SIZE);
 }
 
+function clampChatFontSize(value: number): number {
+  return clampFontSize(value, MIN_CHAT_FONT_SIZE, MAX_CHAT_FONT_SIZE, DEFAULT_CHAT_FONT_SIZE);
+}
+
 function clampCodeFontSize(value: number): number {
   return clampFontSize(value, MIN_CODE_FONT_SIZE, MAX_CODE_FONT_SIZE, DEFAULT_CODE_FONT_SIZE);
 }
diff --git a/apps/web/src/components/NoProjectsHero.tsx b/apps/web/src/components/NoProjectsHero.tsx
index e6ebe6536c519..e3b80ec490a34 100644
--- a/apps/web/src/components/NoProjectsHero.tsx
+++ b/apps/web/src/components/NoProjectsHero.tsx
@@ -28,7 +28,9 @@ export function NoProjectsHero() {
         <Empty size="hero" className="flex-1">
           <div className="w-full max-w-lg px-8 py-12">
             <EmptyHeader className="max-w-none">
-              <EmptyTitle>What should we work on?</EmptyTitle>
+              <EmptyTitle>
+                <span className="font-chat">What should we work on?</span>
+              </EmptyTitle>
               <EmptyDescription>
                 {scratchTargetEnvironmentId === null
                   ? "Add a project to start your first thread."
diff --git a/apps/web/src/components/chat/DraftHeroHeadline.tsx b/apps/web/src/components/chat/DraftHeroHeadline.tsx
index d2e259692204b..56b5f868c75ef 100644
--- a/apps/web/src/components/chat/DraftHeroHeadline.tsx
+++ b/apps/web/src/components/chat/DraftHeroHeadline.tsx
@@ -387,7 +387,7 @@ export function DraftHeroHeadline({
           {projectSelector}
         </DraftHeroProjectHeading>
       ) : (
-        <h1 className="w-full text-center font-normal text-2xl text-foreground tracking-tight sm:text-3xl">
+        <h1 className="w-full text-center font-chat font-normal text-2xl text-foreground tracking-tight sm:text-3xl">
           {isScratchDraft ? (
             <>What should we work on?</>
           ) : canChooseProject ? (
diff --git a/apps/web/src/components/chat/DraftHeroProjectHeading.tsx b/apps/web/src/components/chat/DraftHeroProjectHeading.tsx
index d5db58f503afe..f0cc1ccebdd51 100644
--- a/apps/web/src/components/chat/DraftHeroProjectHeading.tsx
+++ b/apps/web/src/components/chat/DraftHeroProjectHeading.tsx
@@ -30,7 +30,11 @@ export function DraftHeroProjectHeading({
   }, []);
 
   return (
-    <div ref={containerRef} className="group/draft-hero relative w-full" data-inline={fitsInline}>
+    <div
+      ref={containerRef}
+      className="group/draft-hero relative w-full font-chat"
+      data-inline={fitsInline}
+    >
       <span
         aria-hidden="true"
         className="pointer-events-none invisible absolute inset-x-0 top-0 h-0 overflow-hidden"
diff --git a/apps/web/src/components/chat/TimelineAssistantRows.tsx b/apps/web/src/components/chat/TimelineAssistantRows.tsx
index 228eb6f79b9c3..9bf8a2f9ab1dd 100644
--- a/apps/web/src/components/chat/TimelineAssistantRows.tsx
+++ b/apps/web/src/components/chat/TimelineAssistantRows.tsx
@@ -42,6 +42,7 @@ export function AssistantTimelineRow({ row }: { row: Extract<TimelineRow, { kind
           >
             <ChatMarkdown
               text={messageText}
+              className="chat-message font-chat text-(length:--font-size-chat,var(--text-sm))"
               cwd={ctx.markdownCwd}
               threadRef={ctx.threadRef ?? undefined}
               isStreaming={Boolean(row.message.streaming)}
diff --git a/apps/web/src/components/chat/TimelineUserMessageRow.tsx b/apps/web/src/components/chat/TimelineUserMessageRow.tsx
index c4363a1b45983..6f04dbacf49d5 100644
--- a/apps/web/src/components/chat/TimelineUserMessageRow.tsx
+++ b/apps/web/src/components/chat/TimelineUserMessageRow.tsx
@@ -904,7 +904,7 @@ const UserMessageBody = memo(function UserMessageBody(props: {
       cwd={props.markdownCwd}
       threadRef={ctx.threadRef ?? undefined}
       skills={props.skills}
-      className="text-foreground"
+      className="chat-message font-chat text-(length:--font-size-chat,var(--text-sm)) text-foreground"
       lineBreaks
       parseRawHtml={false}
       renderContextReference={props.renderContextReference}
diff --git a/apps/web/src/components/chat/TriageDraftHero.tsx b/apps/web/src/components/chat/TriageDraftHero.tsx
index c8d3d8528df35..6588af528a458 100644
--- a/apps/web/src/components/chat/TriageDraftHero.tsx
+++ b/apps/web/src/components/chat/TriageDraftHero.tsx
@@ -15,7 +15,7 @@ export function TriageDraftHero(props: {
   const { copyToClipboard, isCopied } = useCopyToClipboard({ timeout: 1500, target: "command" });
   return (
     <div className="mx-auto flex w-full max-w-5xl flex-col items-center">
-      <h1 className="w-full text-center font-normal text-2xl text-foreground tracking-tight sm:text-3xl">
+      <h1 className="w-full text-center font-chat font-normal text-2xl text-foreground tracking-tight sm:text-3xl">
         What went wrong?
       </h1>
       <p className="mt-2 flex h-6 w-full items-center justify-center gap-1.5 text-sm">
diff --git a/apps/web/src/components/settings/SettingsFontPreviews.tsx b/apps/web/src/components/settings/SettingsFontPreviews.tsx
index b7d4d0c14dcf3..61543b2b511e0 100644
--- a/apps/web/src/components/settings/SettingsFontPreviews.tsx
+++ b/apps/web/src/components/settings/SettingsFontPreviews.tsx
@@ -54,6 +54,18 @@ export function PromptFontPreview() {
   );
 }
 
+export function ChatFontPreview() {
+  return (
+    <div className="mt-1 mb-2 rounded-lg border border-border bg-background px-3 py-2 font-chat">
+      <p className="text-xl tracking-tight">What should we build?</p>
+      <p className="mt-1 text-(length:--font-size-chat,var(--text-sm)) leading-relaxed text-foreground/90">
+        The flaky test raced the settings write. I moved the assertion after the commit, so it now
+        waits on the persisted event instead of a timer.
+      </p>
+    </div>
+  );
+}
+
 const DIFF_PREVIEW_PATCH = [
   "diff --git a/src/formatUser.ts b/src/formatUser.ts",
   "--- a/src/formatUser.ts",
diff --git a/apps/web/src/components/settings/SettingsPanels.logic.ts b/apps/web/src/components/settings/SettingsPanels.logic.ts
index 3901226e8b2d0..8ed53255d65ba 100644
--- a/apps/web/src/components/settings/SettingsPanels.logic.ts
+++ b/apps/web/src/components/settings/SettingsPanels.logic.ts
@@ -76,10 +76,12 @@ type TypographySettings = Pick<
   UnifiedSettings,
   | "fontFamilySans"
   | "fontFamilyComposer"
+  | "fontFamilyChat"
   | "fontFamilyCode"
   | "fontFamilyTerminal"
   | "fontSizeInterface"
   | "fontSizePrompt"
+  | "fontSizeChat"
   | "fontSizeCode"
   | "fontSizeTerminal"
 >;
@@ -90,6 +92,10 @@ export function getChangedTypographySettingLabels(settings: TypographySettings):
     settings.fontSizeInterface !== DEFAULT_UNIFIED_SETTINGS.fontSizeInterface
       ? ["Interface font"]
       : []),
+    ...(settings.fontFamilyChat !== DEFAULT_UNIFIED_SETTINGS.fontFamilyChat ||
+    settings.fontSizeChat !== DEFAULT_UNIFIED_SETTINGS.fontSizeChat
+      ? ["Chat font"]
+      : []),
     ...(settings.fontFamilyComposer !== DEFAULT_UNIFIED_SETTINGS.fontFamilyComposer ||
     settings.fontSizePrompt !== DEFAULT_UNIFIED_SETTINGS.fontSizePrompt
       ? ["Prompt font"]
diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index c4e3d27a07fa7..af461e0b95781 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -655,10 +655,12 @@ export function useSettingsRestore(onRestored?: () => void) {
       threadTitleInstructions: DEFAULT_UNIFIED_SETTINGS.threadTitleInstructions,
       fontFamilySans: DEFAULT_UNIFIED_SETTINGS.fontFamilySans,
       fontFamilyComposer: DEFAULT_UNIFIED_SETTINGS.fontFamilyComposer,
+      fontFamilyChat: DEFAULT_UNIFIED_SETTINGS.fontFamilyChat,
       fontFamilyCode: DEFAULT_UNIFIED_SETTINGS.fontFamilyCode,
       fontFamilyTerminal: DEFAULT_UNIFIED_SETTINGS.fontFamilyTerminal,
       fontSizeInterface: DEFAULT_UNIFIED_SETTINGS.fontSizeInterface,
       fontSizePrompt: DEFAULT_UNIFIED_SETTINGS.fontSizePrompt,
+      fontSizeChat: DEFAULT_UNIFIED_SETTINGS.fontSizeChat,
       fontSizeCode: DEFAULT_UNIFIED_SETTINGS.fontSizeCode,
       fontSizeTerminal: DEFAULT_UNIFIED_SETTINGS.fontSizeTerminal,
       browserDefaultViewport: DEFAULT_UNIFIED_SETTINGS.browserDefaultViewport,
diff --git a/apps/web/src/components/settings/TypographySettings.browser.test.tsx b/apps/web/src/components/settings/TypographySettings.browser.test.tsx
index bf6f03b367062..2c5bbd8374c1b 100644
--- a/apps/web/src/components/settings/TypographySettings.browser.test.tsx
+++ b/apps/web/src/components/settings/TypographySettings.browser.test.tsx
@@ -17,6 +17,7 @@ vi.mock(import("./useScopedSettings"), async (original) => ({
 }));
 // The previews mount Ghostty and Shiki, which this test does not exercise.
 vi.mock(import("./SettingsFontPreviews"), () => ({
+  ChatFontPreview: () => <div />,
   CodeFontPreview: () => <div />,
   PromptFontPreview: () => <div />,
   TerminalFontPreview: () => <div />,
diff --git a/apps/web/src/components/settings/TypographySettings.tsx b/apps/web/src/components/settings/TypographySettings.tsx
index 9e3c58aea1c60..71deec199b996 100644
--- a/apps/web/src/components/settings/TypographySettings.tsx
+++ b/apps/web/src/components/settings/TypographySettings.tsx
@@ -2,10 +2,12 @@ import type { ReactNode } from "react";
 import { useEffect, useEffectEvent, useRef, useState } from "react";
 import {
   DEFAULT_UNIFIED_SETTINGS,
+  MAX_CHAT_FONT_SIZE,
   MAX_CODE_FONT_SIZE,
   MAX_INTERFACE_FONT_SIZE,
   MAX_PROMPT_FONT_SIZE,
   MAX_TERMINAL_FONT_SIZE,
+  MIN_CHAT_FONT_SIZE,
   MIN_CODE_FONT_SIZE,
   MIN_INTERFACE_FONT_SIZE,
   MIN_PROMPT_FONT_SIZE,
@@ -27,7 +29,12 @@ import {
   TYPOGRAPHY_ADVANCED_STORAGE_KEY,
 } from "../../appearanceFonts";
 import { AdvancedSettings } from "./AdvancedSettings";
-import { CodeFontPreview, PromptFontPreview, TerminalFontPreview } from "./SettingsFontPreviews";
+import {
+  ChatFontPreview,
+  CodeFontPreview,
+  PromptFontPreview,
+  TerminalFontPreview,
+} from "./SettingsFontPreviews";
 import { discoverInstalledFonts, FontFamilyPicker, useFontEnumeration } from "./FontFamilyPicker";
 import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "../ui/select";
 import { Switch } from "../ui/switch";
@@ -87,6 +94,37 @@ function InterfaceFontRow({ preview }: { preview?: ReactNode }) {
   );
 }
 
+function ChatFontRow() {
+  const settings = useScopedSettings();
+  const updateSettings = useUpdateScopedSettings();
+  const defaults = useFontDefaultFamilies();
+  return (
+    <FontFamilySettingsRow
+      {...searchableSetting("chat-font")}
+      description="Messages and the new-thread heading. Try a serif such as Georgia."
+      defaultFamily={defaults.interfaceFamily}
+      defaultValue={DEFAULT_UNIFIED_SETTINGS.fontFamilyChat}
+      value={settings.fontFamilyChat}
+      onValueChange={(fontFamilyChat) => updateSettings({ fontFamilyChat })}
+      onReset={() =>
+        updateSettings({
+          fontFamilyChat: DEFAULT_UNIFIED_SETTINGS.fontFamilyChat,
+          fontSizeChat: DEFAULT_UNIFIED_SETTINGS.fontSizeChat,
+        })
+      }
+      size={{
+        label: "Chat font size",
+        min: MIN_CHAT_FONT_SIZE,
+        max: MAX_CHAT_FONT_SIZE,
+        value: settings.fontSizeChat,
+        defaultValue: DEFAULT_UNIFIED_SETTINGS.fontSizeChat,
+        onChange: (fontSizeChat) => updateSettings({ fontSizeChat }),
+      }}
+      preview={<ChatFontPreview />}
+    />
+  );
+}
+
 function PromptFontRow() {
   const settings = useScopedSettings();
   const updateSettings = useUpdateScopedSettings();
@@ -259,6 +297,7 @@ function FontSettingsGroup() {
   return (
     <>
       <InterfaceFontRow />
+      <ChatFontRow />
       <PromptFontRow />
       <CodeFontRow />
       <TerminalFontRow />
@@ -276,7 +315,7 @@ function SeparateFontsRow({
   return (
     <SettingsRow
       {...searchableSetting("separate-fonts")}
-      description="Set the prompt, code, and terminal fonts separately instead of one monospace font."
+      description="Set the chat, prompt, code, and terminal fonts separately instead of one monospace font."
       control={
         <Switch
           checked={checked}
diff --git a/apps/web/src/components/settings/settingsSearch.ts b/apps/web/src/components/settings/settingsSearch.ts
index dc494caf5344d..2d1b41246470f 100644
--- a/apps/web/src/components/settings/settingsSearch.ts
+++ b/apps/web/src/components/settings/settingsSearch.ts
@@ -363,6 +363,12 @@ export const SETTINGS_SEARCH_ITEMS = [
     to: "/settings/appearance",
     searchTerms: ["typography family size system sans"],
   },
+  {
+    id: "chat-font",
+    title: "Chat font",
+    to: "/settings/appearance",
+    searchTerms: ["typography family size serif messages bubbles reading welcome heading"],
+  },
   {
     id: "prompt-font",
     title: "Prompt font",
@@ -1389,6 +1395,7 @@ export function searchSettings(
 
 // These rows only exist with separate fonts on, so a search jump to one turns them on.
 const ADVANCED_TYPOGRAPHY_TARGET_IDS: ReadonlySet<string> = new Set([
+  "chat-font",
   "prompt-font",
   "terminal-font",
 ]);
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 8acc312321b8f..3afd0cc1ad670 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -172,6 +172,7 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     -apple-system, BlinkMacSystemFont, "Inter Variable", "Segoe UI", system-ui, sans-serif;
   --font-mono:
     ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
+  --font-chat: var(--font-sans);
 }
 
 @theme inline {
@@ -2209,6 +2210,28 @@ code {
 
 /* Top-aligned so wrapped rows share a first line, and the outer columns sit
    flush with the surrounding prose. */
+/* Message bodies carry the chat font size, so their fixed rem sizes become ratios of the
+   0.875rem body; at the default size these resolve to the same pixels as the rules above. */
+.chat-markdown.chat-message h1 {
+  font-size: calc(1.25em / 0.875);
+}
+
+.chat-markdown.chat-message h2 {
+  font-size: calc(1.125em / 0.875);
+}
+
+.chat-markdown.chat-message h3 {
+  font-size: calc(1em / 0.875);
+}
+
+.chat-markdown.chat-message :is(h4, h5, h6, table) {
+  font-size: 1em;
+}
+
+.chat-markdown.chat-message section[data-footnotes] {
+  font-size: calc(0.75em / 0.875);
+}
+
 .chat-markdown th,
 .chat-markdown td {
   padding: 0.45rem 0.75rem;
diff --git a/packages/contracts/src/settings.ts b/packages/contracts/src/settings.ts
index 643d27296f34b..197ee2abadd4e 100644
--- a/packages/contracts/src/settings.ts
+++ b/packages/contracts/src/settings.ts
@@ -167,6 +167,14 @@ export const PromptFontSize = Schema.Int.check(
 export type PromptFontSize = typeof PromptFontSize.Type;
 export const DEFAULT_PROMPT_FONT_SIZE: PromptFontSize = 14;
 
+export const MIN_CHAT_FONT_SIZE = 12;
+export const MAX_CHAT_FONT_SIZE = 20;
+export const ChatFontSize = Schema.Int.check(
+  Schema.isBetween({ minimum: MIN_CHAT_FONT_SIZE, maximum: MAX_CHAT_FONT_SIZE }),
+);
+export type ChatFontSize = typeof ChatFontSize.Type;
+export const DEFAULT_CHAT_FONT_SIZE: ChatFontSize = 14;
+
 export const MIN_CODE_FONT_SIZE = 10;
 export const MAX_CODE_FONT_SIZE = 18;
 export const CodeFontSize = Schema.Int.check(
@@ -432,12 +440,16 @@ export const ClientSettingsSchema = Schema.Struct({
   fontSizePrompt: PromptFontSize.pipe(
     Schema.withDecodingDefault(Effect.succeed(DEFAULT_PROMPT_FONT_SIZE)),
   ),
+  fontSizeChat: ChatFontSize.pipe(
+    Schema.withDecodingDefault(Effect.succeed(DEFAULT_CHAT_FONT_SIZE)),
+  ),
   fontSizeCode: CodeFontSize.pipe(
     Schema.withDecodingDefault(Effect.succeed(DEFAULT_CODE_FONT_SIZE)),
   ),
   fontSizeTerminal: TerminalFontSize.pipe(
     Schema.withDecodingDefault(Effect.succeed(DEFAULT_TERMINAL_FONT_SIZE)),
   ),
+  fontFamilyChat: FontFamilyPreference.pipe(Schema.withDecodingDefault(Effect.succeed(""))),
   fontFamilyCode: FontFamilyPreference.pipe(Schema.withDecodingDefault(Effect.succeed(""))),
   fontFamilyComposer: FontFamilyPreference.pipe(Schema.withDecodingDefault(Effect.succeed(""))),
   fontFamilySans: FontFamilyPreference.pipe(Schema.withDecodingDefault(Effect.succeed(""))),
@@ -1750,8 +1762,10 @@ export const ClientSettingsPatch = Schema.Struct({
   onboardingCompletedAt: Schema.optionalKey(Schema.NullOr(Schema.String)),
   fontSizeInterface: Schema.optionalKey(InterfaceFontSize),
   fontSizePrompt: Schema.optionalKey(PromptFontSize),
+  fontSizeChat: Schema.optionalKey(ChatFontSize),
   fontSizeCode: Schema.optionalKey(CodeFontSize),
   fontSizeTerminal: Schema.optionalKey(TerminalFontSize),
+  fontFamilyChat: Schema.optionalKey(FontFamilyPreference),
   fontFamilyCode: Schema.optionalKey(FontFamilyPreference),
   fontFamilyComposer: Schema.optionalKey(FontFamilyPreference),
   fontFamilySans: Schema.optionalKey(FontFamilyPreference),

From 20bc7e5463b451a56bfbfeaef5dd677db2f329ca Mon Sep 17 00:00:00 2001
From: Dominik Murar <79326595+dominik-murar@users.noreply.github.com>
Date: Fri, 30 Oct 2026 11:38:43 +0100
Subject: [PATCH 2/4] fix(web): chat size defaults to following the interface
 size

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../settings/DesktopClientSettings.test.ts    |  2 +-
 apps/web/src/appearanceFonts.ts               | 11 +++++-----
 .../settings/TypographySettings.tsx           | 20 +++++++++++++++----
 packages/contracts/src/settings.ts            |  9 +++------
 4 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/apps/desktop/src/settings/DesktopClientSettings.test.ts b/apps/desktop/src/settings/DesktopClientSettings.test.ts
index 50bf186d52662..bd204ad836265 100644
--- a/apps/desktop/src/settings/DesktopClientSettings.test.ts
+++ b/apps/desktop/src/settings/DesktopClientSettings.test.ts
@@ -44,7 +44,7 @@ const clientSettings: ClientSettings = {
   fontFamilyComposer: "",
   fontFamilySans: "",
   fontFamilyTerminal: "",
-  fontSizeChat: 14,
+  fontSizeChat: null,
   fontSizeCode: 13,
   fontSizeInterface: 16,
   fontSizePrompt: 14,
diff --git a/apps/web/src/appearanceFonts.ts b/apps/web/src/appearanceFonts.ts
index 5bd4bf29ff83b..aee8defe66f22 100644
--- a/apps/web/src/appearanceFonts.ts
+++ b/apps/web/src/appearanceFonts.ts
@@ -1,5 +1,4 @@
 import {
-  DEFAULT_CHAT_FONT_SIZE,
   DEFAULT_CODE_FONT_SIZE,
   DEFAULT_INTERFACE_FONT_SIZE,
   DEFAULT_PROMPT_FONT_SIZE,
@@ -68,7 +67,7 @@ export interface AppearanceFontPreferences {
   readonly chat: string;
   readonly sizeInterface: number;
   readonly sizePrompt: number;
-  readonly sizeChat: number;
+  readonly sizeChat: number | null;
   readonly sizeCode: number;
   readonly smoothing: boolean;
 }
@@ -96,8 +95,7 @@ export function applyAppearanceFontVariables(
   root.style.fontSize = `${clampInterfaceFontSize(preferences.sizeInterface)}px`;
   root.style.setProperty("--font-size-prompt", `${clampPromptFontSize(preferences.sizePrompt)}px`);
   const chat = clampChatFontSize(preferences.sizeChat);
-  // The default leaves messages on their rem size, so they keep following the interface size.
-  if (chat === DEFAULT_CHAT_FONT_SIZE) {
+  if (chat === null) {
     root.style.removeProperty("--font-size-chat");
   } else {
     root.style.setProperty("--font-size-chat", `${chat}px`);
@@ -131,8 +129,9 @@ function clampPromptFontSize(value: number): number {
   return clampFontSize(value, MIN_PROMPT_FONT_SIZE, MAX_PROMPT_FONT_SIZE, DEFAULT_PROMPT_FONT_SIZE);
 }
 
-function clampChatFontSize(value: number): number {
-  return clampFontSize(value, MIN_CHAT_FONT_SIZE, MAX_CHAT_FONT_SIZE, DEFAULT_CHAT_FONT_SIZE);
+function clampChatFontSize(value: number | null): number | null {
+  if (value === null || !Number.isFinite(value)) return null;
+  return Math.min(MAX_CHAT_FONT_SIZE, Math.max(MIN_CHAT_FONT_SIZE, Math.round(value)));
 }
 
 function clampCodeFontSize(value: number): number {
diff --git a/apps/web/src/components/settings/TypographySettings.tsx b/apps/web/src/components/settings/TypographySettings.tsx
index 71deec199b996..9c94c41841ef5 100644
--- a/apps/web/src/components/settings/TypographySettings.tsx
+++ b/apps/web/src/components/settings/TypographySettings.tsx
@@ -119,6 +119,7 @@ function ChatFontRow() {
         value: settings.fontSizeChat,
         defaultValue: DEFAULT_UNIFIED_SETTINGS.fontSizeChat,
         onChange: (fontSizeChat) => updateSettings({ fontSizeChat }),
+        onClear: () => updateSettings({ fontSizeChat: null }),
       }}
       preview={<ChatFontPreview />}
     />
@@ -414,9 +415,11 @@ function FontFamilySettingsRow({
     label: string;
     min: number;
     max: number;
-    value: number;
-    defaultValue: number;
+    value: number | null;
+    defaultValue: number | null;
     onChange: (v: number) => void;
+    /** Adds a "Default" option that stores null. */
+    onClear?: () => void;
   };
 }) {
   const trimmed = value.trim();
@@ -535,9 +538,13 @@ function FontFamilySettingsRow({
     <div className="flex w-full items-center gap-2 sm:w-auto">
       <div className="min-w-0 flex-1 sm:w-44 sm:flex-none">{familyControl}</div>
       <Select
-        value={String(size.value)}
+        value={size.value === null ? "default" : String(size.value)}
         onValueChange={(next) => {
           if (typeof next !== "string") return;
+          if (next === "default") {
+            size.onClear?.();
+            return;
+          }
           const parsed = Number(next);
           if (Number.isInteger(parsed) && parsed >= size.min && parsed <= size.max) {
             size.onChange(parsed);
@@ -545,9 +552,14 @@ function FontFamilySettingsRow({
         }}
       >
         <SelectTrigger size="sm" className="w-22 shrink-0" aria-label={size.label}>
-          <SelectValue>{size.value} px</SelectValue>
+          <SelectValue>{size.value === null ? "Default" : `${size.value} px`}</SelectValue>
         </SelectTrigger>
         <SelectPopup align="end" alignItemWithTrigger={false}>
+          {size.onClear !== undefined ? (
+            <SelectItem hideIndicator value="default">
+              Default
+            </SelectItem>
+          ) : null}
           {Array.from({ length: size.max - size.min + 1 }, (_, index) => size.min + index).map(
             (px) => (
               <SelectItem hideIndicator key={px} value={String(px)}>
diff --git a/packages/contracts/src/settings.ts b/packages/contracts/src/settings.ts
index 197ee2abadd4e..bf75164e32cfd 100644
--- a/packages/contracts/src/settings.ts
+++ b/packages/contracts/src/settings.ts
@@ -172,8 +172,6 @@ export const MAX_CHAT_FONT_SIZE = 20;
 export const ChatFontSize = Schema.Int.check(
   Schema.isBetween({ minimum: MIN_CHAT_FONT_SIZE, maximum: MAX_CHAT_FONT_SIZE }),
 );
-export type ChatFontSize = typeof ChatFontSize.Type;
-export const DEFAULT_CHAT_FONT_SIZE: ChatFontSize = 14;
 
 export const MIN_CODE_FONT_SIZE = 10;
 export const MAX_CODE_FONT_SIZE = 18;
@@ -440,9 +438,8 @@ export const ClientSettingsSchema = Schema.Struct({
   fontSizePrompt: PromptFontSize.pipe(
     Schema.withDecodingDefault(Effect.succeed(DEFAULT_PROMPT_FONT_SIZE)),
   ),
-  fontSizeChat: ChatFontSize.pipe(
-    Schema.withDecodingDefault(Effect.succeed(DEFAULT_CHAT_FONT_SIZE)),
-  ),
+  // Null keeps messages on the interface size.
+  fontSizeChat: Schema.NullOr(ChatFontSize).pipe(Schema.withDecodingDefault(Effect.succeed(null))),
   fontSizeCode: CodeFontSize.pipe(
     Schema.withDecodingDefault(Effect.succeed(DEFAULT_CODE_FONT_SIZE)),
   ),
@@ -1762,7 +1759,7 @@ export const ClientSettingsPatch = Schema.Struct({
   onboardingCompletedAt: Schema.optionalKey(Schema.NullOr(Schema.String)),
   fontSizeInterface: Schema.optionalKey(InterfaceFontSize),
   fontSizePrompt: Schema.optionalKey(PromptFontSize),
-  fontSizeChat: Schema.optionalKey(ChatFontSize),
+  fontSizeChat: Schema.optionalKey(Schema.NullOr(ChatFontSize)),
   fontSizeCode: Schema.optionalKey(CodeFontSize),
   fontSizeTerminal: Schema.optionalKey(TerminalFontSize),
   fontFamilyChat: Schema.optionalKey(FontFamilyPreference),

From e7e401c19f8f688878b6712064cc5e06fbf1dfa0 Mon Sep 17 00:00:00 2001
From: Dominik Murar <79326595+dominik-murar@users.noreply.github.com>
Date: Fri, 30 Oct 2026 11:44:03 +0100
Subject: [PATCH 3/4] fix(web): chat size always applies the picked size

Drops the Default option: the chat size is pixels like the prompt size,
so every value in the picker takes effect and reset returns to 14 px.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../settings/DesktopClientSettings.test.ts    |  2 +-
 apps/web/src/appearanceFonts.ts               | 17 ++++++----------
 .../settings/TypographySettings.tsx           | 20 ++++---------------
 packages/contracts/src/settings.ts            |  9 ++++++---
 4 files changed, 17 insertions(+), 31 deletions(-)

diff --git a/apps/desktop/src/settings/DesktopClientSettings.test.ts b/apps/desktop/src/settings/DesktopClientSettings.test.ts
index bd204ad836265..50bf186d52662 100644
--- a/apps/desktop/src/settings/DesktopClientSettings.test.ts
+++ b/apps/desktop/src/settings/DesktopClientSettings.test.ts
@@ -44,7 +44,7 @@ const clientSettings: ClientSettings = {
   fontFamilyComposer: "",
   fontFamilySans: "",
   fontFamilyTerminal: "",
-  fontSizeChat: null,
+  fontSizeChat: 14,
   fontSizeCode: 13,
   fontSizeInterface: 16,
   fontSizePrompt: 14,
diff --git a/apps/web/src/appearanceFonts.ts b/apps/web/src/appearanceFonts.ts
index aee8defe66f22..39bea9a8039b5 100644
--- a/apps/web/src/appearanceFonts.ts
+++ b/apps/web/src/appearanceFonts.ts
@@ -1,4 +1,5 @@
 import {
+  DEFAULT_CHAT_FONT_SIZE,
   DEFAULT_CODE_FONT_SIZE,
   DEFAULT_INTERFACE_FONT_SIZE,
   DEFAULT_PROMPT_FONT_SIZE,
@@ -67,12 +68,12 @@ export interface AppearanceFontPreferences {
   readonly chat: string;
   readonly sizeInterface: number;
   readonly sizePrompt: number;
-  readonly sizeChat: number | null;
+  readonly sizeChat: number;
   readonly sizeCode: number;
   readonly smoothing: boolean;
 }
 
-/** Always writes sizes: interface size sets the root; prompt and code use pixels to avoid double scaling. */
+/** Always writes sizes: interface size sets the root; prompt, chat and code use pixels to avoid double scaling. */
 export function applyAppearanceFontVariables(
   root: HTMLElement,
   preferences: AppearanceFontPreferences,
@@ -94,12 +95,7 @@ export function applyAppearanceFontVariables(
 
   root.style.fontSize = `${clampInterfaceFontSize(preferences.sizeInterface)}px`;
   root.style.setProperty("--font-size-prompt", `${clampPromptFontSize(preferences.sizePrompt)}px`);
-  const chat = clampChatFontSize(preferences.sizeChat);
-  if (chat === null) {
-    root.style.removeProperty("--font-size-chat");
-  } else {
-    root.style.setProperty("--font-size-chat", `${chat}px`);
-  }
+  root.style.setProperty("--font-size-chat", `${clampChatFontSize(preferences.sizeChat)}px`);
   const code = clampCodeFontSize(preferences.sizeCode);
   root.style.setProperty("--font-size-code", `${code}px`);
   root.style.setProperty("--diffs-font-size", `${code}px`);
@@ -129,9 +125,8 @@ function clampPromptFontSize(value: number): number {
   return clampFontSize(value, MIN_PROMPT_FONT_SIZE, MAX_PROMPT_FONT_SIZE, DEFAULT_PROMPT_FONT_SIZE);
 }
 
-function clampChatFontSize(value: number | null): number | null {
-  if (value === null || !Number.isFinite(value)) return null;
-  return Math.min(MAX_CHAT_FONT_SIZE, Math.max(MIN_CHAT_FONT_SIZE, Math.round(value)));
+function clampChatFontSize(value: number): number {
+  return clampFontSize(value, MIN_CHAT_FONT_SIZE, MAX_CHAT_FONT_SIZE, DEFAULT_CHAT_FONT_SIZE);
 }
 
 function clampCodeFontSize(value: number): number {
diff --git a/apps/web/src/components/settings/TypographySettings.tsx b/apps/web/src/components/settings/TypographySettings.tsx
index 9c94c41841ef5..71deec199b996 100644
--- a/apps/web/src/components/settings/TypographySettings.tsx
+++ b/apps/web/src/components/settings/TypographySettings.tsx
@@ -119,7 +119,6 @@ function ChatFontRow() {
         value: settings.fontSizeChat,
         defaultValue: DEFAULT_UNIFIED_SETTINGS.fontSizeChat,
         onChange: (fontSizeChat) => updateSettings({ fontSizeChat }),
-        onClear: () => updateSettings({ fontSizeChat: null }),
       }}
       preview={<ChatFontPreview />}
     />
@@ -415,11 +414,9 @@ function FontFamilySettingsRow({
     label: string;
     min: number;
     max: number;
-    value: number | null;
-    defaultValue: number | null;
+    value: number;
+    defaultValue: number;
     onChange: (v: number) => void;
-    /** Adds a "Default" option that stores null. */
-    onClear?: () => void;
   };
 }) {
   const trimmed = value.trim();
@@ -538,13 +535,9 @@ function FontFamilySettingsRow({
     <div className="flex w-full items-center gap-2 sm:w-auto">
       <div className="min-w-0 flex-1 sm:w-44 sm:flex-none">{familyControl}</div>
       <Select
-        value={size.value === null ? "default" : String(size.value)}
+        value={String(size.value)}
         onValueChange={(next) => {
           if (typeof next !== "string") return;
-          if (next === "default") {
-            size.onClear?.();
-            return;
-          }
           const parsed = Number(next);
           if (Number.isInteger(parsed) && parsed >= size.min && parsed <= size.max) {
             size.onChange(parsed);
@@ -552,14 +545,9 @@ function FontFamilySettingsRow({
         }}
       >
         <SelectTrigger size="sm" className="w-22 shrink-0" aria-label={size.label}>
-          <SelectValue>{size.value === null ? "Default" : `${size.value} px`}</SelectValue>
+          <SelectValue>{size.value} px</SelectValue>
         </SelectTrigger>
         <SelectPopup align="end" alignItemWithTrigger={false}>
-          {size.onClear !== undefined ? (
-            <SelectItem hideIndicator value="default">
-              Default
-            </SelectItem>
-          ) : null}
           {Array.from({ length: size.max - size.min + 1 }, (_, index) => size.min + index).map(
             (px) => (
               <SelectItem hideIndicator key={px} value={String(px)}>
diff --git a/packages/contracts/src/settings.ts b/packages/contracts/src/settings.ts
index bf75164e32cfd..197ee2abadd4e 100644
--- a/packages/contracts/src/settings.ts
+++ b/packages/contracts/src/settings.ts
@@ -172,6 +172,8 @@ export const MAX_CHAT_FONT_SIZE = 20;
 export const ChatFontSize = Schema.Int.check(
   Schema.isBetween({ minimum: MIN_CHAT_FONT_SIZE, maximum: MAX_CHAT_FONT_SIZE }),
 );
+export type ChatFontSize = typeof ChatFontSize.Type;
+export const DEFAULT_CHAT_FONT_SIZE: ChatFontSize = 14;
 
 export const MIN_CODE_FONT_SIZE = 10;
 export const MAX_CODE_FONT_SIZE = 18;
@@ -438,8 +440,9 @@ export const ClientSettingsSchema = Schema.Struct({
   fontSizePrompt: PromptFontSize.pipe(
     Schema.withDecodingDefault(Effect.succeed(DEFAULT_PROMPT_FONT_SIZE)),
   ),
-  // Null keeps messages on the interface size.
-  fontSizeChat: Schema.NullOr(ChatFontSize).pipe(Schema.withDecodingDefault(Effect.succeed(null))),
+  fontSizeChat: ChatFontSize.pipe(
+    Schema.withDecodingDefault(Effect.succeed(DEFAULT_CHAT_FONT_SIZE)),
+  ),
   fontSizeCode: CodeFontSize.pipe(
     Schema.withDecodingDefault(Effect.succeed(DEFAULT_CODE_FONT_SIZE)),
   ),
@@ -1759,7 +1762,7 @@ export const ClientSettingsPatch = Schema.Struct({
   onboardingCompletedAt: Schema.optionalKey(Schema.NullOr(Schema.String)),
   fontSizeInterface: Schema.optionalKey(InterfaceFontSize),
   fontSizePrompt: Schema.optionalKey(PromptFontSize),
-  fontSizeChat: Schema.optionalKey(Schema.NullOr(ChatFontSize)),
+  fontSizeChat: Schema.optionalKey(ChatFontSize),
   fontSizeCode: Schema.optionalKey(CodeFontSize),
   fontSizeTerminal: Schema.optionalKey(TerminalFontSize),
   fontFamilyChat: Schema.optionalKey(FontFamilyPreference),

From cdb42ddd06049cf9b3af5f79817acf0cf874182f Mon Sep 17 00:00:00 2001
From: Dominik Murar <79326595+dominik-murar@users.noreply.github.com>
Date: Fri, 30 Oct 2026 12:06:36 +0100
Subject: [PATCH 4/4] fix(web): footnote markers scale with the chat size

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/index.css | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 3afd0cc1ad670..efeccc2d0fe4a 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -2208,8 +2208,6 @@ code {
   font-size: 0.875rem;
 }
 
-/* Top-aligned so wrapped rows share a first line, and the outer columns sit
-   flush with the surrounding prose. */
 /* Message bodies carry the chat font size, so their fixed rem sizes become ratios of the
    0.875rem body; at the default size these resolve to the same pixels as the rules above. */
 .chat-markdown.chat-message h1 {
@@ -2232,6 +2230,12 @@ code {
   font-size: calc(0.75em / 0.875);
 }
 
+.chat-markdown.chat-message :is(a[data-footnote-ref], a[data-footnote-backref]) {
+  font-size: calc(0.6875 * var(--font-size-chat, 0.875rem) / 0.875);
+}
+
+/* Top-aligned so wrapped rows share a first line, and the outer columns sit
+   flush with the surrounding prose. */
 .chat-markdown th,
 .chat-markdown td {
   padding: 0.45rem 0.75rem;