fix(web): keep terminal font settings reliable

apps/web/src/appearanceFonts.test.ts

@@ -9,6 +9,7 @@ import {
   appearanceFontStack,
   cssFontFamilies,
   resolveDefaultFamilyLabel,
+  resolveTerminalFontPreference,
 } from "./appearanceFonts";
 
 describe("cssFontFamilies", () => {
@@ -54,6 +55,27 @@ describe("appearanceFontStack", () => {
   });
 });
 
+describe("resolveTerminalFontPreference", () => {
+  it("inherits the code font in simple mode", () => {
+    expect(
+      resolveTerminalFontPreference({ advanced: false, code: "Fira Code", terminal: "" }),
+    ).toBe("Fira Code");
+  });
+
+  it("keeps code and terminal fonts independent in advanced mode", () => {
+    expect(resolveTerminalFontPreference({ advanced: true, code: "Fira Code", terminal: "" })).toBe(
+      "",
+    );
+    expect(
+      resolveTerminalFontPreference({
+        advanced: true,
+        code: "Fira Code",
+        terminal: "Berkeley Mono",
+      }),
+    ).toBe("Berkeley Mono");
+  });
+});
+
 describe("font size clamping", () => {
   it("keeps sizes inside the ranges the UI can absorb", () => {
     expect(clampInterfaceFontSize(16)).toBe(16);

apps/web/src/appearanceFonts.ts

@@ -25,6 +25,22 @@ export const DEFAULT_SANS_FONT_STACK =
 export const DEFAULT_CODE_FONT_STACK =
   '"SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace';
 
+export const TYPOGRAPHY_ADVANCED_STORAGE_KEY = "t3code:typography-advanced";
+
+/**
+ * Simple typography treats the terminal as another monospace surface. In
+ * Advanced mode an empty terminal preference means the terminal default,
+ * keeping later code-font changes isolated to code surfaces.
+ */
+export function resolveTerminalFontPreference(input: {
+  readonly advanced: boolean;
+  readonly code: string;
+  readonly terminal: string;
+}): string {
+  if (input.advanced) return input.terminal;
+  return input.terminal.trim() || input.code;
+}
+
 function quoteFontFamilyName(name: string): string {
   const bare = name.trim();
   if (bare.length === 0) return "";

apps/web/src/components/ThreadTerminalDrawer.tsx

@@ -18,6 +18,7 @@ import {
   type ThreadId,
 } from "@t3tools/contracts";
 import { getTerminalLabel } from "@t3tools/shared/terminalLabels";
+import * as Schema from "effect/Schema";
 import {
   type PointerEvent as ReactPointerEvent,
   type ReactNode,
@@ -57,13 +58,15 @@ import {
 } from "../types";
 import { readLocalApi } from "~/localApi";
 import { useClientSettings } from "../hooks/useSettings";
+import { useLocalStorage } from "../hooks/useLocalStorage";
 import { useAttachedTerminalSession } from "../state/terminalSessions";
 import { serverEnvironment } from "../state/server";
 import { previewEnvironment } from "../state/preview";
 import { terminalEnvironment } from "../state/terminal";
 import { openTerminalLinkInPreview } from "./preview/openTerminalLinkInPreview";
 import { useAtomCommand } from "../state/use-atom-command";
 import { preventTerminalCloseShortcut } from "../lib/terminalCloseShortcut";
+import { resolveTerminalFontPreference, TYPOGRAPHY_ADVANCED_STORAGE_KEY } from "../appearanceFonts";
 
 const MIN_DRAWER_HEIGHT = 180;
 const MAX_DRAWER_HEIGHT_RATIO = 0.75;
@@ -241,6 +244,7 @@ export function shouldHandleTerminalExit(
 }
 
 interface TerminalViewportProps {
+  advancedTypography: boolean;
   threadRef: ScopedThreadRef;
   threadId: ThreadId;
   terminalId: string;
@@ -264,6 +268,7 @@ interface TerminalLaunchLocation {
 }
 
 export function TerminalViewport({
+  advancedTypography,
   threadRef,
   threadId,
   terminalId,
@@ -312,10 +317,12 @@ export function TerminalViewport({
     onAddTerminalContext(selection);
   });
   const readTerminalLabel = useEffectEvent(() => terminalLabel);
-  // The terminal inherits the monospace (code) preference unless it has an
-  // override of its own, so one font choice drives every mono surface.
-  const terminalFontFamily = useClientSettings(
-    (settings) => settings.fontFamilyTerminal.trim() || settings.fontFamilyCode,
+  const terminalFontFamily = useClientSettings((settings) =>
+    resolveTerminalFontPreference({
+      advanced: advancedTypography,
+      code: settings.fontFamilyCode,
+      terminal: settings.fontFamilyTerminal,
+    }),
   );
   const terminalFontSize = useClientSettings((settings) => settings.fontSizeTerminal);
   const terminalFontRef = useRef({ family: terminalFontFamily, size: terminalFontSize });
@@ -921,6 +928,11 @@ export default function ThreadTerminalDrawer({
   terminalLaunchLocationsById,
 }: ThreadTerminalDrawerProps) {
   const isPanel = mode === "panel";
+  const [advancedTypography] = useLocalStorage(
+    TYPOGRAPHY_ADVANCED_STORAGE_KEY,
+    false,
+    Schema.Boolean,
+  );
   const controlledDrawerHeight = clampDrawerHeight(height);
   const [drawerHeightState, setDrawerHeightState] = useState(() => ({
     threadId,
@@ -1357,6 +1369,7 @@ export default function ThreadTerminalDrawer({
                     >
                       <div className="h-full p-1">
                         <TerminalViewport
+                          advancedTypography={advancedTypography}
                           threadRef={threadRef}
                           threadId={threadId}
                           terminalId={terminalId}
@@ -1384,6 +1397,7 @@ export default function ThreadTerminalDrawer({
             ) : (
               <div className="h-full p-1">
                 <TerminalViewport
+                  advancedTypography={advancedTypography}
                   key={resolvedActiveTerminalId}
                   threadRef={threadRef}
                   threadId={threadId}

apps/web/src/components/settings/SettingsPanels.tsx

@@ -115,6 +115,8 @@ import {
   isFontFamilyAvailable,
   isMonospaceFamily,
   resolveDefaultFamilyLabel,
+  resolveTerminalFontPreference,
+  TYPOGRAPHY_ADVANCED_STORAGE_KEY,
 } from "../../appearanceFonts";
 import { CodeFontPreview, PromptFontPreview, TerminalFontPreview } from "./SettingsFontPreviews";
 import { discoverInstalledFonts, FontFamilyPicker, useFontEnumeration } from "./FontFamilyPicker";
@@ -1151,10 +1153,8 @@ function useFontDefaultFamilies() {
   return {
     sans: defaults.sans,
     code: defaults.code,
-    // The composer inherits whatever the interface preference resolves to;
-    // the terminal inherits the monospace preference the same way.
+    // The composer inherits whatever the interface preference resolves to.
     interfaceFamily: settings.fontFamilySans.trim() || defaults.sans,
-    monoFamily: settings.fontFamilyCode.trim() || defaults.code,
   };
 }
 
@@ -1244,8 +1244,8 @@ function TerminalFontRow() {
   return (
     <FontFamilySettingsRow
       {...searchableSetting("terminal-font")}
-      description="Terminal output. Follows the monospace font unless set."
-      defaultFamily={defaults.monoFamily}
+      description="Terminal output, independent from code blocks and diffs."
+      defaultFamily={defaults.code}
       value={settings.fontFamilyTerminal}
       onValueChange={(fontFamilyTerminal) => updateSettings({ fontFamilyTerminal })}
       requireMonospace
@@ -1258,7 +1258,11 @@ function TerminalFontRow() {
       }}
       preview={
         <TerminalFontPreview
-          family={settings.fontFamilyTerminal.trim() || settings.fontFamilyCode}
+          family={resolveTerminalFontPreference({
+            advanced: true,
+            code: settings.fontFamilyCode,
+            terminal: settings.fontFamilyTerminal,
+          })}
           size={settings.fontSizeTerminal}
         />
       }
@@ -1350,7 +1354,11 @@ function SimpleFontRows() {
           <>
             <CodeFontPreview />
             <TerminalFontPreview
-              family={settings.fontFamilyTerminal.trim() || settings.fontFamilyCode}
+              family={resolveTerminalFontPreference({
+                advanced: false,
+                code: settings.fontFamilyCode,
+                terminal: settings.fontFamilyTerminal,
+              })}
               size={settings.fontSizeTerminal}
             />
           </>
@@ -1370,8 +1378,6 @@ const ADVANCED_TYPOGRAPHY_TARGET_IDS: ReadonlySet<string> = new Set([
     : []),
 ]);
 
-const TYPOGRAPHY_ADVANCED_KEY = "t3code:typography-advanced";
-
 /**
  * The two-font view by default - one sans, one monospace, each cascading to
  * every surface it reaches - with an Advanced switch in the section header
@@ -1380,7 +1386,11 @@ const TYPOGRAPHY_ADVANCED_KEY = "t3code:typography-advanced";
  * target exists to scroll to.
  */
 function TypographySection() {
-  const [advanced, setAdvanced] = useLocalStorage(TYPOGRAPHY_ADVANCED_KEY, false, Schema.Boolean);
+  const [advanced, setAdvanced] = useLocalStorage(
+    TYPOGRAPHY_ADVANCED_STORAGE_KEY,
+    false,
+    Schema.Boolean,
+  );
   const searchTargetId = useSettingsSearchTargetId();
   // Flip Advanced on once per search jump so the hidden target can mount and
   // scroll; tracking the handled id lets the user turn it back off without