refactor(console): share the console font between the Run and Debug consoles

DebugConsole rendered with var(--font-mono) and var(--fs-ui), ignoring
the terminal/editor font settings that the Run console resolves via
resolveMonoFont. Now it applies the same font family, size and row height.

Closes #2844

src/features/debugger/ui/DebugConsole.tsx

@@ -15,6 +15,7 @@ import { EmptyState, IconButton, showContextMenu, T, type MenuItem } from "@/ui"
 import { formatBinding, hasPrimaryModifier, hostBinding, registerKeyClaim } from "@/platform/keymap";
 import { tx } from "@/platform/i18n";
 import { useWorkflowSettings } from "@/platform/workflowSettings";
+import { useConsoleFont } from "@/platform/consoleFont";
 import { spanStyle } from "@/ui/ansi";
 import { ConsoleFindBar } from "@/ui/ConsoleFindBar";
 import { DEFAULT_FIND_OPTIONS, findInLines, type FindOptions, type FindResult } from "@/ui/consoleFind";
@@ -117,6 +118,10 @@ export function DebugConsole({ session, interactive = true }: { session: DebugSe
   const [follow, setFollow] = useState(true);
   const stick = useRef(true);
   stick.current = follow;
+  // The debug console uses the same font as the Run console.
+  const consoleFont = useConsoleFont();
+  const { rowHeight } = consoleFont;
+  const fontStyle = { fontFamily: consoleFont.family, fontSize: `${consoleFont.size}px` };
   // Settings › Console › Use soft wraps is the default; the toggle overrides it for this console.
   const defaultWrap = useWorkflowSettings((s) => s.console.softWrap);
   const [wrapOverride, setWrapOverride] = useState<boolean | null>(null);
@@ -140,13 +145,13 @@ export function DebugConsole({ session, interactive = true }: { session: DebugSe
   const virtualizer = useVirtualizer({
     count: lines?.length ?? 0,
     getScrollElement: () => scroller.current,
-    estimateSize: () => 18,
+    estimateSize: () => rowHeight,
     overscan: 30,
     getItemKey: (i) => lines?.[i]?.id ?? i,
   });
 
   // Wrapping changes every row's height; the end is pinned again below.
-  useLayoutEffect(() => virtualizer.measure?.(), [softWrap, virtualizer]);
+  useLayoutEffect(() => virtualizer.measure?.(), [softWrap, rowHeight, virtualizer]);
 
   useLayoutEffect(() => {
     const el = scroller.current;
@@ -429,6 +434,7 @@ export function DebugConsole({ session, interactive = true }: { session: DebugSe
         <div
           ref={scroller}
           className={clsx(styles.consoleOutput, !softWrap && styles.noWrap)}
+          style={{ ...fontStyle, lineHeight: `${rowHeight}px` }}
           onScroll={(e) => {
             if (programmatic.current) return;
             const el = e.currentTarget;
@@ -465,12 +471,13 @@ export function DebugConsole({ session, interactive = true }: { session: DebugSe
         <div className={styles.repl}>
           {interactive && (
             <>
-              <span className={styles.prompt} aria-hidden>
+              <span className={styles.prompt} style={fontStyle} aria-hidden>
                 ›
               </span>
               <input
                 ref={inputRef}
                 className={styles.evalInput}
+                style={fontStyle}
                 onFocus={() => setConsoleHistoryBrowser(browseHistory)}
                 onBlur={() => {
                   setConsoleHistoryBrowser(null);

src/features/run/ConsoleView.tsx

@@ -14,8 +14,7 @@ import {
 import clsx from "clsx";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { useWorkflowSettings } from "@/platform/workflowSettings";
-import { useProject } from "@/platform/project";
-import { resolveMonoFont } from "@/platform/fonts";
+import { useConsoleFont } from "@/platform/consoleFont";
 import { Icon, showContextMenu } from "@/ui";
 import { spanStyle } from "@/ui/ansi";
 import type { ConsoleLine, ConsoleModel } from "./console";
@@ -185,10 +184,8 @@ export function ConsoleView({
   const patterns = useWorkflowSettings((s) => s.console.foldPatterns);
   // The Run console uses Tools › Terminal › Font (which can follow Editor › Font),
   // so the font and fallback configured there apply to process output too.
-  const terminalFont = useWorkflowSettings((s) => s.terminal);
-  const editorFont = useProject((s) => s.settings?.editor);
-  const consoleFont = resolveMonoFont(terminalFont, editorFont);
-  const rowHeight = Math.max(16, Math.round(consoleFont.size * 1.5));
+  const consoleFont = useConsoleFont();
+  const { rowHeight } = consoleFont;
   /** A row's box: at its virtual offset, and never shorter than one line — a blank line has no text. */
   const rowStyle = (start: number) => ({
     transform: `translateY(${start}px)`,

src/platform/consoleFont.ts

@@ -0,0 +1,14 @@
+import { useProject } from "./project";
+import { resolveMonoFont } from "./fonts";
+import { useWorkflowSettings } from "./workflowSettings";
+
+/**
+ * The font of the Run and Debug consoles: Tools › Terminal › Font (which can follow
+ * Editor › Font), with the row height both consoles lay their lines out with.
+ */
+export function useConsoleFont(): { family: string; size: number; rowHeight: number } {
+  const terminalFont = useWorkflowSettings((s) => s.terminal);
+  const editorFont = useProject((s) => s.settings?.editor);
+  const { family, size } = resolveMonoFont(terminalFont, editorFont);
+  return { family, size, rowHeight: Math.max(16, Math.round(size * 1.5)) };
+}