feat(web): Appearance settings tab with font-size slider + live preview

apps/desktop/src/clientPersistence.test.ts

@@ -49,6 +49,7 @@ function makeSecretStorage(available: boolean): DesktopSecretStorage {
 }
 
 const clientSettings: ClientSettings = {
+  chatFontSize: 14,
   confirmThreadArchive: true,
   confirmThreadDelete: false,
   diffWordWrap: true,

apps/web/src/components/ChatView.tsx

@@ -615,6 +615,7 @@
     (store) => store.setStickyModelSelection,
   );
   const timestampFormat = settings.timestampFormat;
+  const chatFontSize = settings.chatFontSize;
   const navigate = useNavigate();
   const rawSearch = useSearch({
     strict: false,
@@ -1556,7 +1557,7 @@
   );
 
   const focusComposer = useCallback(() => {
     composerRef.current?.focusAtEnd();
   }, []);
   const scheduleComposerFocus = useCallback(() => {
     window.requestAnimationFrame(() => {
@@ -1564,7 +1565,7 @@
     });
   }, [focusComposer]);
   const addTerminalContextToDraft = useCallback((selection: TerminalContextSelection) => {
     composerRef.current?.addTerminalContext(selection);
   }, []);
   const setTerminalOpen = useCallback(
     (open: boolean) => {
@@ -2758,7 +2759,7 @@
         };
       });
       promptRef.current = "";
       composerRef.current?.resetCursorState({ cursor: 0 });
     },
     [activePendingProgress?.activeQuestion, activePendingUserInput],
   );
@@ -2785,7 +2786,7 @@
           ),
         },
       }));
       const snapshot = composerRef.current?.readSnapshot();
       if (
         snapshot?.value !== value ||
         snapshot.cursor !== nextCursor ||
@@ -2848,7 +2849,7 @@
         return;
       }
 
       const sendCtx = composerRef.current?.getSendContext();
       if (!sendCtx) {
         return;
       }
@@ -2983,7 +2984,7 @@
       return;
     }
 
     const sendCtx = composerRef.current?.getSendContext();
     if (!sendCtx) {
       return;
     }
@@ -3280,6 +3281,7 @@
               markdownCwd={gitCwd ?? undefined}
               resolvedTheme={resolvedTheme}
               timestampFormat={timestampFormat}
+              chatFontSize={chatFontSize}
               workspaceRoot={activeWorkspaceRoot}
               onIsAtEndChange={onIsAtEndChange}
             />

apps/web/src/components/chat/MessagesTimeline.browser.tsx

@@ -68,6 +68,7 @@ function buildProps() {
     markdownCwd: undefined,
     resolvedTheme: "dark" as const,
     timestampFormat: "24-hour" as const,
+    chatFontSize: 14,
     workspaceRoot: undefined,
     onIsAtEndChange: vi.fn(),
   };

apps/web/src/components/chat/MessagesTimeline.test.tsx

@@ -94,6 +94,7 @@ function buildProps() {
     markdownCwd: undefined,
     resolvedTheme: "light" as const,
     timestampFormat: "locale" as const,
+    chatFontSize: 14,
     workspaceRoot: undefined,
     onIsAtEndChange: () => {},
   };
@@ -160,6 +161,32 @@ describe("MessagesTimeline", () => {
     expect(markup).toContain("Work log");
   });
 
+  it("propagates chatFontSize as the --chat-font-size CSS variable on the list wrapper", async () => {
+    const { MessagesTimeline } = await import("./MessagesTimeline");
+    const markup = renderToStaticMarkup(
+      <MessagesTimeline
+        {...buildProps()}
+        chatFontSize={20}
+        timelineEntries={[
+          {
+            id: "entry-1",
+            kind: "message",
+            createdAt: "2026-03-17T19:12:28.000Z",
+            message: {
+              id: MessageId.make("message-1"),
+              role: "user",
+              text: "hi",
+              createdAt: "2026-03-17T19:12:28.000Z",
+              streaming: false,
+            },
+          },
+        ]}
+      />,
+    );
+
+    expect(markup).toContain("--chat-font-size:20px");
+  });
+
   it("formats changed file paths from the workspace root", async () => {
     const { MessagesTimeline } = await import("./MessagesTimeline");
     const markup = renderToStaticMarkup(