Fix diff gutter row alignment

2026-06-04 19:44:45 +07:00
parent 3d8ef237e3
commit 81d973ffc4
3 changed files with 679 additions and 128 deletions
@@ -0,0 +1,505 @@
+import { writeFile } from "node:fs/promises";
+import path from "node:path";
+import { type Page } from "@playwright/test";
+import { buildHostWorkspaceRoute, buildSettingsSectionRoute } from "../src/utils/host-routes";
+import { test, expect } from "./fixtures";
+import { getServerId } from "./helpers/server-id";
+import { connectSeedClient } from "./helpers/seed-client";
+import { createTempGitRepo } from "./helpers/workspace";
+import { waitForWorkspaceTabsVisible } from "./helpers/workspace-tabs";
+
+interface DirtyWorkspace {
+  id: string;
+}
+
+interface CleanupTask {
+  run: () => Promise<void>;
+}
+
+const cleanupTasks: CleanupTask[] = [];
+const APP_SETTINGS_KEY = "@paseo:app-settings";
+const CHANGES_PREFERENCES_KEY = "@paseo:changes-preferences";
+
+const BEFORE = `import { useLayoutEffect, useMemo, useRef, useState } from "react";
+
+interface UseMountedTabSetInput {
+  activeTabId: string | null;
+  allTabIds: string[];
+  cap: number;
+}
+
+interface UseMountedTabSetResult {
+  mountedTabIds: Set<string>;
+}
+
+function createInitialMountedTabIds(input: UseMountedTabSetInput): Set<string> {
+  if (!input.activeTabId || !input.allTabIds.includes(input.activeTabId)) {
+    return new Set<string>();
+  }
+  return new Set<string>([input.activeTabId]);
+}
+
+function setsEqual(left: Set<string>, right: Set<string>): boolean {
+  if (left.size !== right.size) {
+    return false;
+  }
+  for (const value of left) {
+    if (!right.has(value)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function useMountedTabSet(input: UseMountedTabSetInput): UseMountedTabSetResult {
+  const { activeTabId, allTabIds, cap } = input;
+  const allTabIdsKey = allTabIds.join("\\u0000");
+  const availableTabIds = useMemo(() => {
+    void allTabIdsKey;
+    return new Set(allTabIds);
+  }, [allTabIds, allTabIdsKey]);
+  const [mountedTabIds, setMountedTabIds] = useState(() => createInitialMountedTabIds(input));
+  const lruRef = useRef(activeTabId && allTabIds.includes(activeTabId) ? [activeTabId] : []);
+
+  useLayoutEffect(() => {
+    const nextLru = lruRef.current.filter((tabId) => availableTabIds.has(tabId));
+    if (activeTabId && availableTabIds.has(activeTabId)) {
+      const existingIndex = nextLru.indexOf(activeTabId);
+      if (existingIndex >= 0) {
+        nextLru.splice(existingIndex, 1);
+      }
+      nextLru.unshift(activeTabId);
+    }
+    if (nextLru.length > cap) {
+      nextLru.length = cap;
+    }
+
+    lruRef.current = nextLru;
+    setMountedTabIds((previousMountedTabIds) => {
+      const nextMountedTabIds = new Set(nextLru);
+      return setsEqual(previousMountedTabIds, nextMountedTabIds)
+        ? previousMountedTabIds
+        : nextMountedTabIds;
+    });
+  }, [activeTabId, availableTabIds, cap]);
+
+  return { mountedTabIds };
+}
+`;
+
+const AFTER = `import { useLayoutEffect, useMemo, useRef, useState } from "react";
+
+interface UseMountedTabSetInput {
+  activeTabId: string | null;
+  allTabIds: string[];
+  cap: number;
+}
+
+interface UseMountedTabSetResult {
+  mountedTabIds: Set<string>;
+}
+
+interface DeriveRenderMountedTabIdsInput {
+  activeTabId: string | null;
+  availableTabIds: Set<string>;
+  cap: number;
+  mountedTabIds: Set<string>;
+}
+
+function createInitialMountedTabIds(input: UseMountedTabSetInput): Set<string> {
+  if (!input.activeTabId || !input.allTabIds.includes(input.activeTabId)) {
+    return new Set<string>();
+  }
+  return new Set<string>([input.activeTabId]);
+}
+
+function setsEqual(left: Set<string>, right: Set<string>): boolean {
+  if (left.size !== right.size) {
+    return false;
+  }
+  for (const value of left) {
+    if (!right.has(value)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function deriveRenderMountedTabIds(input: DeriveRenderMountedTabIdsInput): Set<string> {
+  const { activeTabId, availableTabIds, cap, mountedTabIds } = input;
+  if (!activeTabId || !availableTabIds.has(activeTabId) || mountedTabIds.has(activeTabId)) {
+    return mountedTabIds;
+  }
+
+  const next = new Set<string>([activeTabId]);
+  const maxSize = Math.max(1, cap);
+  for (const tabId of mountedTabIds) {
+    if (next.size >= maxSize) {
+      break;
+    }
+    if (availableTabIds.has(tabId)) {
+      next.add(tabId);
+    }
+  }
+  return next;
+}
+
+export function useMountedTabSet(input: UseMountedTabSetInput): UseMountedTabSetResult {
+  const { activeTabId, allTabIds, cap } = input;
+  const allTabIdsKey = allTabIds.join("\\u0000");
+  const availableTabIds = useMemo(() => {
+    void allTabIdsKey;
+    return new Set(allTabIds);
+  }, [allTabIds, allTabIdsKey]);
+  const [mountedTabIds, setMountedTabIds] = useState(() => createInitialMountedTabIds(input));
+  const lruRef = useRef(activeTabId && allTabIds.includes(activeTabId) ? [activeTabId] : []);
+  const renderMountedTabIds = useMemo(
+    () =>
+      deriveRenderMountedTabIds({
+        activeTabId,
+        availableTabIds,
+        cap,
+        mountedTabIds,
+      }),
+    [activeTabId, availableTabIds, cap, mountedTabIds],
+  );
+
+  useLayoutEffect(() => {
+    const nextLru = lruRef.current.filter((tabId) => availableTabIds.has(tabId));
+    if (activeTabId && availableTabIds.has(activeTabId)) {
+      const existingIndex = nextLru.indexOf(activeTabId);
+      if (existingIndex >= 0) {
+        nextLru.splice(existingIndex, 1);
+      }
+      nextLru.unshift(activeTabId);
+    }
+    if (nextLru.length > cap) {
+      nextLru.length = cap;
+    }
+
+    lruRef.current = nextLru;
+    setMountedTabIds((previousMountedTabIds) => {
+      const nextMountedTabIds = new Set(nextLru);
+      return setsEqual(previousMountedTabIds, nextMountedTabIds)
+        ? previousMountedTabIds
+        : nextMountedTabIds;
+    });
+  }, [activeTabId, availableTabIds, cap]);
+
+  return { mountedTabIds: renderMountedTabIds };
+}
+`;
+
+test.afterEach(async () => {
+  for (const task of cleanupTasks.splice(0)) {
+    await task.run();
+  }
+});
+
+test("changes diff keeps code rows aligned with the gutter", async ({ page }) => {
+  const workspace = await createWorkspaceWithMountedTabDiff();
+  await useCodeFont(page, 9);
+  await useUnwrappedDiffLines(page);
+  await openWorkspaceChanges(page, workspace);
+
+  await expectDiffCodeFontSize(page, 9);
+  await expectVisibleDiffRowsAligned(page);
+  await expectDiffCodeTextAlignedWithGutterText(page, [
+    {
+      codeText: "function createInitialMountedTabIds(input: UseMountedTabSetInput)",
+      lineNumber: "20",
+    },
+    { codeText: "return next;", lineNumber: "55" },
+    { codeText: "useLayoutEffect(() => {", lineNumber: "78" },
+  ]);
+  await expectHoverCommentButtonAlignedWithCodeLine(page, {
+    codeText: "function createInitialMountedTabIds(input: UseMountedTabSetInput)",
+    lineNumber: "20",
+  });
+});
+
+test("changes diff keeps unwrapped gutter and code rows aligned after code size changes", async ({
+  page,
+}) => {
+  const workspace = await createWorkspaceWithMountedTabDiff();
+  await useCodeFont(page, 12);
+  await useUnwrappedDiffLines(page);
+  await openWorkspaceChanges(page, workspace);
+
+  await changeCodeFontSizeFromSettings(page, 18);
+  await returnToWorkspaceChanges(page);
+  await scrollToLowerUnwrappedDiffRows(page);
+
+  await expectDiffCodeFontSize(page, 18);
+  await expectVisibleDiffRowsShareTypography(page);
+  await expectVisibleDiffRowsAligned(page);
+});
+
+async function useCodeFont(page: Page, codeFontSize: number): Promise<void> {
+  await page.addInitScript(
+    ({ settingsKey, fontSize }) => {
+      localStorage.setItem(
+        settingsKey,
+        JSON.stringify({
+          theme: "dark",
+          sendBehavior: "interrupt",
+          serviceUrlBehavior: "ask",
+          terminalScrollbackLines: 10_000,
+          uiFontFamily: "",
+          monoFontFamily: "",
+          uiFontSize: 16,
+          codeFontSize: fontSize,
+          syntaxTheme: "one",
+        }),
+      );
+    },
+    { settingsKey: APP_SETTINGS_KEY, fontSize: codeFontSize },
+  );
+}
+
+async function useUnwrappedDiffLines(page: Page): Promise<void> {
+  await page.addInitScript(
+    ({ preferencesKey }) => {
+      localStorage.setItem(
+        preferencesKey,
+        JSON.stringify({ layout: "unified", wrapLines: false, hideWhitespace: false }),
+      );
+    },
+    { preferencesKey: CHANGES_PREFERENCES_KEY },
+  );
+}
+
+async function expectDiffCodeFontSize(page: Page, fontSize: number): Promise<void> {
+  const actualFontSize = await page
+    .getByTestId("diff-code-text-1")
+    .evaluate((text) => Number.parseFloat(getComputedStyle(text).fontSize));
+  expect(actualFontSize).toBe(fontSize);
+}
+
+async function expectVisibleDiffRowsAligned(page: Page): Promise<void> {
+  const geometry = await readVisibleDiffRowGeometry(page);
+  expect(geometry.maxDelta, JSON.stringify(geometry.rows, null, 2)).toBeLessThanOrEqual(1);
+}
+
+async function expectVisibleDiffRowsShareTypography(page: Page): Promise<void> {
+  const geometry = await readVisibleDiffRowGeometry(page);
+  expect(geometry.mismatchedTypography, JSON.stringify(geometry, null, 2)).toEqual([]);
+}
+
+async function readVisibleDiffRowGeometry(page: Page): Promise<{
+  maxDelta: number;
+  mismatchedTypography: { index: number; gutterLineHeight: number; codeLineHeight: number }[];
+  rows: {
+    index: number;
+    gutterTop: number;
+    codeTop: number;
+    delta: number;
+    gutterLineHeight: number;
+    codeLineHeight: number;
+  }[];
+}> {
+  return page.locator("body").evaluate(({ ownerDocument }) => {
+    const root = ownerDocument.querySelector('[data-testid="diff-file-0-body"]');
+    if (!root) {
+      throw new Error("Expanded diff body is not mounted");
+    }
+
+    const readRows = (prefix: string, textPrefix: string) =>
+      Array.from(root.querySelectorAll<HTMLElement>(`[data-testid^="${prefix}"]`)).map((row) => {
+        const testId = row.getAttribute("data-testid") ?? "";
+        const index = Number(testId.slice(prefix.length));
+        const rect = row.getBoundingClientRect();
+        const text = root.querySelector<HTMLElement>(`[data-testid="${textPrefix}${index}"]`);
+        const lineHeight = text ? Number.parseFloat(getComputedStyle(text).lineHeight) : 0;
+        return { index, top: rect.top, height: rect.height, lineHeight };
+      });
+
+    const gutters = new Map(
+      readRows("diff-gutter-row-", "diff-gutter-text-").map((row) => [row.index, row]),
+    );
+    const codes = readRows("diff-code-row-", "diff-code-text-");
+    const rows = codes
+      .map((code) => {
+        const gutter = gutters.get(code.index);
+        if (!gutter) {
+          throw new Error(`Missing gutter row ${code.index}`);
+        }
+        return {
+          index: code.index,
+          gutterTop: gutter.top,
+          codeTop: code.top,
+          delta: Math.abs(code.top - gutter.top),
+          gutterLineHeight: gutter.lineHeight,
+          codeLineHeight: code.lineHeight,
+        };
+      })
+      .filter((row) => row.gutterTop >= 0 && row.codeTop >= 0);
+
+    return {
+      maxDelta: Math.max(...rows.map((row) => row.delta)),
+      mismatchedTypography: rows
+        .filter((row) => Math.abs(row.gutterLineHeight - row.codeLineHeight) > 0.5)
+        .map((row) => ({
+          index: row.index,
+          gutterLineHeight: row.gutterLineHeight,
+          codeLineHeight: row.codeLineHeight,
+        })),
+      rows,
+    };
+  });
+}
+
+async function createWorkspaceWithMountedTabDiff(): Promise<DirtyWorkspace> {
+  const repo = await createTempGitRepo("diff-row-alignment-", {
+    files: [{ path: "src/use-mounted-tab-set.ts", content: BEFORE }],
+  });
+  const client = await connectSeedClient();
+  cleanupTasks.push({
+    run: async () => {
+      await client.close().catch(() => undefined);
+      await repo.cleanup().catch(() => undefined);
+    },
+  });
+
+  await writeFile(path.join(repo.path, "src/use-mounted-tab-set.ts"), AFTER);
+  const opened = await client.openProject(repo.path);
+  if (!opened.workspace) {
+    throw new Error(opened.error ?? `Failed to open project ${repo.path}`);
+  }
+  return { id: opened.workspace.id };
+}
+
+async function openWorkspaceChanges(page: Page, workspace: DirtyWorkspace): Promise<void> {
+  await page.setViewportSize({ width: 1400, height: 900 });
+  await page.goto(buildHostWorkspaceRoute(getServerId(), workspace.id));
+  await waitForWorkspaceTabsVisible(page);
+  await page.getByRole("button", { name: "Open explorer" }).click();
+  await openChangesInVisibleExplorer(page);
+  await page.getByTestId("diff-file-0").click();
+  await expectExpandedMountedTabDiff(page);
+}
+
+async function openChangesInVisibleExplorer(page: Page): Promise<void> {
+  await expect(page.getByTestId("explorer-tab-changes")).toBeVisible({ timeout: 30_000 });
+  await expect(page.getByText("use-mounted-tab-set.ts")).toBeVisible({ timeout: 30_000 });
+}
+
+async function expectExpandedMountedTabDiff(page: Page): Promise<void> {
+  await expect(page.getByTestId("diff-file-0-body")).toBeVisible({ timeout: 30_000 });
+  await expect(page.getByText("function createInitialMountedTabIds")).toBeVisible({
+    timeout: 30_000,
+  });
+}
+
+async function changeCodeFontSizeFromSettings(page: Page, codeFontSize: number): Promise<void> {
+  await page.getByTestId("sidebar-settings").click();
+  await expect(page).toHaveURL(new RegExp(`${buildSettingsSectionRoute("general")}|/settings$`));
+  await page.getByRole("button", { name: "Appearance" }).click();
+  await page.getByLabel("Code font size").fill(String(codeFontSize));
+  await page.getByLabel("Code font size").press("Enter");
+  await expect(page.getByLabel("Code font size")).toHaveValue(String(codeFontSize));
+}
+
+async function returnToWorkspaceChanges(page: Page): Promise<void> {
+  await page.getByTestId("settings-back-to-workspace").click();
+  await waitForWorkspaceTabsVisible(page);
+  await openChangesInVisibleExplorer(page);
+  await expectExpandedMountedTabDiff(page);
+}
+
+async function scrollToLowerUnwrappedDiffRows(page: Page): Promise<void> {
+  const lastRowIndex = await page.getByTestId("diff-file-0-body").evaluate((root) => {
+    const rows = Array.from(root.querySelectorAll<HTMLElement>('[data-testid^="diff-code-row-"]'));
+    if (rows.length === 0) {
+      throw new Error("No unwrapped code rows are mounted");
+    }
+    return Math.max(
+      ...rows.map((row) => Number((row.getAttribute("data-testid") ?? "").slice(14))),
+    );
+  });
+  await page.getByTestId(`diff-code-row-${lastRowIndex}`).scrollIntoViewIfNeeded();
+  await expect(page.getByTestId(`diff-code-row-${lastRowIndex}`)).toBeVisible();
+}
+
+async function expectDiffCodeTextAlignedWithGutterText(
+  page: Page,
+  lines: { codeText: string; lineNumber: string }[],
+): Promise<void> {
+  const geometries = await readDiffTextGeometry(page, lines);
+  for (const geometry of geometries) {
+    expect(geometry.codeTop, geometry.codeText).toBeCloseTo(geometry.gutterTop, 0);
+  }
+}
+
+async function expectHoverCommentButtonAlignedWithCodeLine(
+  page: Page,
+  line: { codeText: string; lineNumber: string },
+): Promise<void> {
+  const target = await readDiffTextGeometry(page, [line]).then((rows) => rows[0]);
+  if (!target) {
+    throw new Error(`Could not find target line ${line.lineNumber}`);
+  }
+  await page.getByTestId(`diff-code-row-${target.index}`).hover();
+  const geometry = await page
+    .getByTestId(`diff-gutter-action-${target.index}`)
+    .evaluate((action, expectedCodeCenterY) => {
+      const rect = action.getBoundingClientRect();
+      return {
+        actionCenterY: rect.top + rect.height / 2,
+        codeCenterY: expectedCodeCenterY,
+      };
+    }, target.codeCenterY);
+  expect(geometry.actionCenterY).toBeCloseTo(geometry.codeCenterY, 0);
+}
+
+async function readDiffTextGeometry(
+  page: Page,
+  lines: { codeText: string; lineNumber: string }[],
+): Promise<
+  { index: number; codeText: string; codeTop: number; gutterTop: number; codeCenterY: number }[]
+> {
+  return page.locator("body").evaluate(({ ownerDocument }, targets) => {
+    const root = ownerDocument.querySelector('[data-testid="explorer-content-area"]');
+    if (!root) {
+      throw new Error("Changes panel is not mounted");
+    }
+
+    const readIndexedElements = (prefix: string) =>
+      Array.from(root.querySelectorAll<HTMLElement>(`[data-testid^="${prefix}"]`)).map(
+        (element) => {
+          const testId = element.getAttribute("data-testid") ?? "";
+          return { index: Number(testId.slice(prefix.length)), element };
+        },
+      );
+
+    const gutterTexts = readIndexedElements("diff-gutter-text-");
+    const codeTexts = readIndexedElements("diff-code-text-");
+
+    return targets.map((target) => {
+      const gutter = gutterTexts.find(
+        ({ element }) => (element.textContent ?? "").trim() === target.lineNumber,
+      );
+      if (!gutter) {
+        throw new Error(`Could not find gutter line ${target.lineNumber}`);
+      }
+      const code = codeTexts.find(
+        ({ index, element }) =>
+          index === gutter.index && (element.textContent ?? "").includes(target.codeText),
+      );
+      if (!code) {
+        throw new Error(`Could not find code row ${target.codeText}`);
+      }
+
+      const codeRect = code.element.getBoundingClientRect();
+      const gutterRect = gutter.element.getBoundingClientRect();
+
+      return {
+        index: gutter.index,
+        codeText: target.codeText,
+        codeTop: codeRect.top,
+        gutterTop: gutterRect.top,
+        codeCenterY: codeRect.top + codeRect.height / 2,
+      };
+    });
+  }, lines);
+}
@@ -25,9 +25,9 @@ import {
  type ViewStyle,
  type TextStyle,
 } from "react-native";
-import { StyleSheet, useUnistyles, withUnistyles } from "react-native-unistyles";
-import { ICON_SIZE, type Theme } from "@/styles/theme";
-import { useIsCompactFormFactor } from "@/constants/layout";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
+import { BORDER_WIDTH, ICON_SIZE, SPACING, type Theme } from "@/styles/theme";
+import { useIsCompactFormFactor, WORKSPACE_SECONDARY_HEADER_HEIGHT } from "@/constants/layout";
 import {
  AlignJustify,
  Archive,
@@ -55,10 +55,10 @@ import {
 import { useCheckoutStatusQuery } from "@/git/use-status-query";
 import { useCheckoutPrStatusQuery } from "@/git/use-pr-status-query";
 import { useChangesPreferences } from "@/hooks/use-changes-preferences";
+import { useAppSettings } from "@/hooks/use-settings";
 import { DiffScroll } from "@/components/diff-scroll";
 import { syntaxTokenStyleFor } from "@/styles/syntax-token-styles";
 import { CODE_SURFACE_DATASET } from "@/styles/code-surface";
-import { WORKSPACE_SECONDARY_HEADER_HEIGHT } from "@/constants/layout";
 import { shouldAnchorHeaderBeforeCollapse } from "@/git/diff-scroll";
 import {
  buildSplitDiffRows,
@@ -123,6 +123,7 @@ function fileHeaderPressableStyle({ pressed }: PressableStateCallbackType) {
 interface HighlightedTextProps {
  tokens: HighlightToken[];
  wrapLines?: boolean;
+  testID?: string;
 }

 type WrappedWebTextStyle = TextStyle & {
@@ -143,13 +144,10 @@ function HighlightedToken({ token }: { token: HighlightToken }) {
  return <Text style={syntaxTokenStyleFor(token.style)}>{token.text}</Text>;
 }

-function HighlightedText({ tokens, wrapLines = false }: HighlightedTextProps) {
-  const { theme } = useUnistyles();
-  const lineHeight = theme.lineHeight.diff;
-
+function HighlightedText({ tokens, wrapLines = false, testID }: HighlightedTextProps) {
  const containerStyle = useMemo(
-    () => [styles.diffLineText, { lineHeight, ...getWrappedTextStyle(wrapLines) }],
-    [lineHeight, wrapLines],
+    () => [styles.diffTextMetrics, styles.diffLineText, getWrappedTextStyle(wrapLines)],
+    [wrapLines],
  );

  const keyedTokens = useMemo(
@@ -158,7 +156,7 @@ function HighlightedText({ tokens, wrapLines = false }: HighlightedTextProps) {
  );

  return (
-    <Text style={containerStyle}>
+    <Text style={containerStyle} testID={testID}>
      {keyedTokens.map(({ key, token }) => (
        <HighlightedToken key={key} token={token} />
      ))}
@@ -252,6 +250,8 @@ function DiffGutterCell({
  reviewActions,
  isLineHovered,
  style,
+  textTestID,
+  actionTestID,
 }: {
  lineNumber: number | null;
  type: DiffLine["type"] | undefined | null;
@@ -260,6 +260,8 @@ function DiffGutterCell({
  reviewActions?: InlineReviewActions;
  isLineHovered?: boolean;
  style?: StyleProp<ViewStyle>;
+  textTestID?: string;
+  actionTestID?: string;
 }) {
  const containerStyle = useMemo(
    () => [
@@ -272,6 +274,7 @@ function DiffGutterCell({
  );
  const textStyle = useMemo(
    () => [
+      styles.diffTextMetrics,
      styles.lineNumberText,
      type === "add" && styles.addLineNumberText,
      type === "remove" && styles.removeLineNumberText,
@@ -296,8 +299,9 @@ function DiffGutterCell({
      isLineHovered={isLineHovered}
      onStartComment={onStartComment}
      style={containerStyle}
+      actionTestID={actionTestID}
    >
-      <Text numberOfLines={1} style={textStyle}>
+      <Text numberOfLines={1} style={textStyle} testID={textTestID}>
        {formatDiffGutterText(lineNumber)}
      </Text>
    </InlineReviewGutterCell>
@@ -312,6 +316,7 @@ function DiffTextLine({
  onHoverChange,
  hoverTargetKey,
  onHoverTargetChange,
+  textTestID,
 }: {
  line: DiffLine;
  wrapLines: boolean;
@@ -320,6 +325,7 @@ function DiffTextLine({
  onHoverChange?: (hovered: boolean) => void;
  hoverTargetKey?: string | null;
  onHoverTargetChange?: (key: string | null) => void;
+  textTestID?: string;
 }) {
  const visibleTokens = hasVisibleDiffTokens(line.tokens) ? line.tokens : null;

@@ -329,6 +335,7 @@ function DiffTextLine({
  );
  const textStyle = useMemo(
    () => [
+      styles.diffTextMetrics,
      styles.diffLineText,
      getWrappedTextStyle(wrapLines),
      line.type === "add" && styles.addLineText,
@@ -349,9 +356,11 @@ function DiffTextLine({
      style={containerStyle}
    >
      {line.type !== "header" && visibleTokens ? (
-        <HighlightedText tokens={visibleTokens} wrapLines={wrapLines} />
+        <HighlightedText tokens={visibleTokens} wrapLines={wrapLines} testID={textTestID} />
      ) : (
-        <Text style={textStyle}>{formatDiffContentText(line.content)}</Text>
+        <Text style={textStyle} testID={textTestID}>
+          {formatDiffContentText(line.content)}
+        </Text>
      )}
    </LongPressableLine>
  );
@@ -380,6 +389,7 @@ function SplitTextLine({
  );
  const textStyle = useMemo(
    () => [
+      styles.diffTextMetrics,
      styles.diffLineText,
      getWrappedTextStyle(wrapLines),
      line?.type === "add" && styles.addLineText,
@@ -432,6 +442,7 @@ function DiffLineView({
  );
  const textStyle = useMemo(
    () => [
+      styles.diffTextMetrics,
      styles.diffLineText,
      getWrappedTextStyle(wrapLines),
      line.type === "add" && styles.addLineText,
@@ -487,6 +498,7 @@ function SplitDiffLine({
  );
  const textStyle = useMemo(
    () => [
+      styles.diffTextMetrics,
      styles.diffLineText,
      getWrappedTextStyle(wrapLines),
      line?.type === "add" && styles.addLineText,
@@ -896,6 +908,7 @@ function DiffFileBody({
  file,
  layout,
  wrapLines,
+  codeFontSize,
  reviewActions,
  onBodyHeightChange,
  testID,
@@ -903,6 +916,7 @@ function DiffFileBody({
  file: ParsedDiffFile;
  layout: "unified" | "split";
  wrapLines: boolean;
+  codeFontSize: number;
  reviewActions?: InlineReviewActions;
  onBodyHeightChange?: (file: ParsedDiffFile, height: number) => void;
  testID?: string;
@@ -910,7 +924,6 @@ function DiffFileBody({
  const [scrollViewWidth, setScrollViewWidth] = useState(0);
  const [bodyWidth, setBodyWidth] = useState(0);
  const [hoveredReviewTargetKey, setHoveredReviewTargetKey] = useState<string | null>(null);
-  const { theme } = useUnistyles();

  const handleLayout = useCallback(
    (event: LayoutChangeEvent) => {
@@ -950,7 +963,7 @@ function DiffFileBody({
            hunk.newStart + hunk.newCount,
          );
        }
-        const gutterWidth = lineNumberGutterWidth(maxLineNo, theme.fontSize.code);
+        const gutterWidth = lineNumberGutterWidth(maxLineNo, codeFontSize);

        if (layout === "split") {
          const rows = buildSplitDiffRows(file);
@@ -981,8 +994,8 @@ function DiffFileBody({
          return (
            <View style={styles.diffContent} dataSet={CODE_SURFACE_DATASET}>
              <View style={styles.linesContainer}>
-                {computedLines.map(({ line, lineNumber, key, reviewTarget }) => (
-                  <View key={key}>
+                {computedLines.map(({ line, lineNumber, key, reviewTarget }, index) => (
+                  <View key={key} testID={`diff-wrapped-row-${index}`}>
                    <DiffLineView
                      line={line}
                      lineNumber={lineNumber}
@@ -1008,8 +1021,8 @@ function DiffFileBody({
        return (
          <View style={DIFF_CONTENT_ROW_STYLE} dataSet={CODE_SURFACE_DATASET}>
            <View style={styles.gutterColumn}>
-              {computedLines.map(({ line, lineNumber, key, reviewTarget }) => (
-                <View key={key}>
+              {computedLines.map(({ line, lineNumber, key, reviewTarget }, index) => (
+                <View key={key} testID={`diff-gutter-row-${index}`}>
                  <DiffGutterCell
                    lineNumber={lineNumber}
                    type={line.type}
@@ -1019,6 +1032,8 @@ function DiffFileBody({
                    isLineHovered={
                      reviewTarget?.key !== undefined && hoveredReviewTargetKey === reviewTarget.key
                    }
+                    textTestID={`diff-gutter-text-${index}`}
+                    actionTestID={`diff-gutter-action-${index}`}
                  />
                  <InlineReviewGutterSpacer
                    reviewTarget={reviewTarget}
@@ -1035,8 +1050,8 @@ function DiffFileBody({
              contentContainerStyle={styles.diffContentInner}
            >
              <View style={linesContainerRowStyle}>
-                {computedLines.map(({ line, key, reviewTarget }) => (
-                  <View key={key}>
+                {computedLines.map(({ line, key, reviewTarget }, index) => (
+                  <View key={key} testID={`diff-code-row-${index}`}>
                    <DiffTextLine
                      line={line}
                      wrapLines={false}
@@ -1044,6 +1059,7 @@ function DiffFileBody({
                      reviewActions={reviewActions}
                      hoverTargetKey={reviewTarget?.key ?? null}
                      onHoverTargetChange={setHoveredReviewTargetKey}
+                      textTestID={`diff-code-text-${index}`}
                    />
                    <InlineReviewThreadContent
                      reviewTarget={reviewTarget}
@@ -1074,6 +1090,27 @@ type PressableStyleFn = (
  state: PressableStateCallbackType & { hovered?: boolean; open?: boolean },
 ) => StyleProp<ViewStyle>;

+const foregroundIconColorMapping = (theme: Theme) => ({ color: theme.colors.foreground });
+const foregroundMutedIconColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
+
+const ThemedActivityIndicator = withUnistyles(ActivityIndicator);
+const ThemedAlignJustify = withUnistyles(AlignJustify);
+const ThemedColumns2 = withUnistyles(Columns2);
+const ThemedPilcrow = withUnistyles(Pilcrow);
+const ThemedWrapText = withUnistyles(WrapText);
+const ThemedListChevronsDownUp = withUnistyles(ListChevronsDownUp);
+const ThemedListChevronsUpDown = withUnistyles(ListChevronsUpDown);
+const ThemedGitCommitHorizontal = withUnistyles(GitCommitHorizontal);
+const ThemedDownload = withUnistyles(Download);
+const ThemedUpload = withUnistyles(Upload);
+const ThemedArrowDownUp = withUnistyles(ArrowDownUp);
+const ThemedGitHubIcon = withUnistyles(GitHubIcon);
+const ThemedGitMerge = withUnistyles(GitMerge);
+const ThemedRefreshCcw = withUnistyles(RefreshCcw);
+const ThemedArchive = withUnistyles(Archive);
+const ThemedGitBranch = withUnistyles(GitBranch);
+const ThemedChevronDown = withUnistyles(ChevronDown);
+
 interface DiffLayoutToggleGroupProps {
  layout: "unified" | "split";
  unifiedToggleStyle: PressableStyleFn;
@@ -1089,7 +1126,6 @@ function DiffLayoutToggleGroup({
  onUnified,
  onSplit,
 }: DiffLayoutToggleGroupProps) {
-  const { theme } = useUnistyles();
  return (
    <View style={styles.toggleButtonGroup}>
      <Tooltip delayDuration={300}>
@@ -1101,9 +1137,11 @@ function DiffLayoutToggleGroup({
            onPress={onUnified}
            style={unifiedToggleStyle}
          >
-            <AlignJustify
+            <ThemedAlignJustify
              size={14}
-              color={layout === "unified" ? theme.colors.foreground : theme.colors.foregroundMuted}
+              uniProps={
+                layout === "unified" ? foregroundIconColorMapping : foregroundMutedIconColorMapping
+              }
            />
          </Pressable>
        </TooltipTrigger>
@@ -1120,9 +1158,11 @@ function DiffLayoutToggleGroup({
            onPress={onSplit}
            style={splitToggleStyle}
          >
-            <Columns2
+            <ThemedColumns2
              size={14}
-              color={layout === "split" ? theme.colors.foreground : theme.colors.foregroundMuted}
+              uniProps={
+                layout === "split" ? foregroundIconColorMapping : foregroundMutedIconColorMapping
+              }
            />
          </Pressable>
        </TooltipTrigger>
@@ -1147,7 +1187,6 @@ function DiffWhitespaceToggle({
  toggleStyle,
  onToggle,
 }: DiffWhitespaceToggleProps) {
-  const { theme } = useUnistyles();
  return (
    <Tooltip delayDuration={300}>
      <TooltipTrigger asChild>
@@ -1158,9 +1197,9 @@ function DiffWhitespaceToggle({
          style={toggleStyle}
          onPress={onToggle}
        >
-          <Pilcrow
+          <ThemedPilcrow
            size={isMobile ? 18 : 14}
-            color={hideWhitespace ? theme.colors.foreground : theme.colors.foregroundMuted}
+            uniProps={hideWhitespace ? foregroundIconColorMapping : foregroundMutedIconColorMapping}
          />
        </Pressable>
      </TooltipTrigger>
@@ -1190,15 +1229,14 @@ function DiffFilesToolbar({
  onToggleWrapLines,
  onToggleExpandAll,
 }: DiffFilesToolbarProps) {
-  const { theme } = useUnistyles();
  return (
    <View style={styles.diffStatusButtons}>
      <Tooltip delayDuration={300}>
        <TooltipTrigger asChild>
          <Pressable style={wrapLinesToggleStyle} onPress={onToggleWrapLines}>
-            <WrapText
+            <ThemedWrapText
              size={isMobile ? 18 : 14}
-              color={wrapLines ? theme.colors.foreground : theme.colors.foregroundMuted}
+              uniProps={wrapLines ? foregroundIconColorMapping : foregroundMutedIconColorMapping}
            />
          </Pressable>
        </TooltipTrigger>
@@ -1212,9 +1250,15 @@ function DiffFilesToolbar({
        <TooltipTrigger asChild>
          <Pressable style={expandAllToggleStyle} onPress={onToggleExpandAll}>
            {allExpanded ? (
-              <ListChevronsDownUp size={isMobile ? 18 : 14} color={theme.colors.foregroundMuted} />
+              <ThemedListChevronsDownUp
+                size={isMobile ? 18 : 14}
+                uniProps={foregroundMutedIconColorMapping}
+              />
            ) : (
-              <ListChevronsUpDown size={isMobile ? 18 : 14} color={theme.colors.foregroundMuted} />
+              <ThemedListChevronsUpDown
+                size={isMobile ? 18 : 14}
+                uniProps={foregroundMutedIconColorMapping}
+              />
            )}
          </Pressable>
        </TooltipTrigger>
@@ -1236,7 +1280,6 @@ interface DiffRefreshButtonProps {

 const ThemedRotateCw = withUnistyles(RotateCw);
 const ThemedLoadingSpinner = withUnistyles(LoadingSpinner);
-const refreshIconColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });

 function DiffRefreshButton({ isRefreshing, toggleStyle, onPress }: DiffRefreshButtonProps) {
  return (
@@ -1252,9 +1295,12 @@ function DiffRefreshButton({ isRefreshing, toggleStyle, onPress }: DiffRefreshBu
        >
          <View style={styles.refreshIcon}>
            {isRefreshing ? (
-              <ThemedLoadingSpinner size={ICON_SIZE.sm} uniProps={refreshIconColorMapping} />
+              <ThemedLoadingSpinner
+                size={ICON_SIZE.sm}
+                uniProps={foregroundMutedIconColorMapping}
+              />
            ) : (
-              <ThemedRotateCw size={ICON_SIZE.sm} uniProps={refreshIconColorMapping} />
+              <ThemedRotateCw size={ICON_SIZE.sm} uniProps={foregroundMutedIconColorMapping} />
            )}
          </View>
        </Pressable>
@@ -1322,7 +1368,6 @@ interface DiffBodyContentProps {
  handleDiffListScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
  onContentSizeChange: (width: number, height: number) => void;
  showDesktopWebScrollbar: boolean;
-  foregroundMutedColor: string;
 }

 function DiffBodyContent({
@@ -1344,12 +1389,11 @@ function DiffBodyContent({
  handleDiffListScroll,
  onContentSizeChange,
  showDesktopWebScrollbar,
-  foregroundMutedColor,
 }: DiffBodyContentProps) {
  if (isStatusLoading) {
    return (
      <View style={styles.loadingContainer}>
-        <ActivityIndicator size="large" color={foregroundMutedColor} />
+        <ThemedActivityIndicator size="large" uniProps={foregroundMutedIconColorMapping} />
        <Text style={styles.loadingText}>Checking repository...</Text>
      </View>
    );
@@ -1371,7 +1415,7 @@ function DiffBodyContent({
  if (isDiffLoading) {
    return (
      <View style={styles.loadingContainer}>
-        <ActivityIndicator size="large" color={foregroundMutedColor} />
+        <ThemedActivityIndicator size="large" uniProps={foregroundMutedIconColorMapping} />
      </View>
    );
  }
@@ -1483,30 +1527,27 @@ function computePrErrorMessage(
  return prPayloadError?.message ?? null;
 }

-function buildDiffModeTriggerStyle(surfaceColor: string): PressableStyleFn {
+function buildDiffModeTriggerStyle(): PressableStyleFn {
  return ({ hovered, pressed, open }) => [
    styles.diffModeTrigger,
-    (Boolean(hovered) || pressed || Boolean(open)) &&
-      inlineUnistylesStyle({ backgroundColor: surfaceColor }),
+    (Boolean(hovered) || pressed || Boolean(open)) && styles.diffModeTriggerHovered,
  ];
 }

-function buildExpandAllButtonStyle(surfaceColor: string): PressableStyleFn {
+function buildExpandAllButtonStyle(): PressableStyleFn {
  return ({ hovered, pressed }) => [
    styles.expandAllButton,
-    (Boolean(hovered) || pressed) && inlineUnistylesStyle({ backgroundColor: surfaceColor }),
+    (Boolean(hovered) || pressed) && styles.toggleButtonSelected,
  ];
 }

 function buildToggleButtonStyle(
  selected: boolean,
  baseStyles: StyleProp<ViewStyle> | StyleProp<ViewStyle>[],
-  surfaceColor: string,
 ): PressableStyleFn {
  return ({ hovered, pressed }) => [
    baseStyles,
-    (selected || Boolean(hovered) || pressed) &&
-      inlineUnistylesStyle({ backgroundColor: surfaceColor }),
+    (selected || Boolean(hovered) || pressed) && styles.toggleButtonSelected,
  ];
 }

@@ -1521,7 +1562,7 @@ export function GitDiffPane({
  hideHeaderRow,
  enabled,
 }: GitDiffPaneProps) {
-  const { theme } = useUnistyles();
+  const { settings: appSettings } = useAppSettings();
  const isMobile = useIsCompactFormFactor();
  const showDesktopWebScrollbar = isWeb && !isMobile;
  const canUseSplitLayout = isWeb && !isMobile;
@@ -1557,56 +1598,44 @@ export function GitDiffPane({
    handleLayoutChange("split");
  }, [handleLayoutChange]);

-  const controlSurfaceColor = theme.colors.surface2;
-  const diffModeTriggerStyle = useMemo(
-    () => buildDiffModeTriggerStyle(controlSurfaceColor),
-    [controlSurfaceColor],
+  const codeFontSize = appSettings.codeFontSize;
+  const diffBodyLineHeight = Math.round(codeFontSize * 1.5);
+  const diffBodyTypographyKey = [appSettings.monoFontFamily, codeFontSize, diffBodyLineHeight].join(
+    ":",
  );
+  const diffModeTriggerStyle = useMemo(() => buildDiffModeTriggerStyle(), []);

  const unifiedToggleStyle = useMemo(
    () =>
-      buildToggleButtonStyle(
-        changesPreferences.layout === "unified",
-        [styles.toggleButton, styles.toggleButtonGroupStart],
-        controlSurfaceColor,
-      ),
-    [changesPreferences.layout, controlSurfaceColor],
+      buildToggleButtonStyle(changesPreferences.layout === "unified", [
+        styles.toggleButton,
+        styles.toggleButtonGroupStart,
+      ]),
+    [changesPreferences.layout],
  );

  const splitToggleStyle = useMemo(
    () =>
-      buildToggleButtonStyle(
-        changesPreferences.layout === "split",
-        [styles.toggleButton, styles.toggleButtonGroupEnd],
-        controlSurfaceColor,
-      ),
-    [changesPreferences.layout, controlSurfaceColor],
+      buildToggleButtonStyle(changesPreferences.layout === "split", [
+        styles.toggleButton,
+        styles.toggleButtonGroupEnd,
+      ]),
+    [changesPreferences.layout],
  );

  const hideWhitespaceToggleStyle = useMemo(
-    () =>
-      buildToggleButtonStyle(
-        changesPreferences.hideWhitespace,
-        styles.expandAllButton,
-        controlSurfaceColor,
-      ),
-    [changesPreferences.hideWhitespace, controlSurfaceColor],
+    () => buildToggleButtonStyle(changesPreferences.hideWhitespace, styles.expandAllButton),
+    [changesPreferences.hideWhitespace],
  );

  const wrapLinesToggleStyle = useMemo(
-    () => buildToggleButtonStyle(wrapLines, styles.expandAllButton, controlSurfaceColor),
-    [wrapLines, controlSurfaceColor],
+    () => buildToggleButtonStyle(wrapLines, styles.expandAllButton),
+    [wrapLines],
  );

-  const expandAllToggleStyle = useMemo(
-    () => buildExpandAllButtonStyle(controlSurfaceColor),
-    [controlSurfaceColor],
-  );
+  const expandAllToggleStyle = useMemo(() => buildExpandAllButtonStyle(), []);

-  const refreshToggleStyle = useMemo(
-    () => buildExpandAllButtonStyle(controlSurfaceColor),
-    [controlSurfaceColor],
-  );
+  const refreshToggleStyle = useMemo(() => buildExpandAllButtonStyle(), []);

  const toast = useToast();
  const refreshSupported = useSessionStore(
@@ -1754,9 +1783,8 @@ export function GitDiffPane({
  const bodyHeightByKeyRef = useRef<Record<string, number>>({});
  const defaultHeaderHeightRef = useRef<number>(44);
  const [heightVersion, setHeightVersion] = useState(0);
-  const diffBodyLineHeight = theme.lineHeight.diff;
-  const diffBodyChromeHeight = theme.borderWidth[1] * 2;
-  const statusBodyHeightEstimate = diffBodyChromeHeight + theme.spacing[4] * 2 + diffBodyLineHeight;
+  const diffBodyChromeHeight = BORDER_WIDTH[1] * 2;
+  const statusBodyHeightEstimate = diffBodyChromeHeight + SPACING[4] * 2 + diffBodyLineHeight;
  const { flatItems, stickyHeaderIndices } = useMemo(() => {
    const items: DiffFlatItem[] = [];
    const stickyIndices: number[] = [];
@@ -1777,12 +1805,13 @@ export function GitDiffPane({
  const getBodyHeightKey = useCallback(
    (file: ParsedDiffFile): string => {
      if (file.status === "too_large" || file.status === "binary") {
-        return `${effectiveLayout}:${wrapLines ? "wrap" : "scroll"}:${file.path}:${file.status}`;
+        return `${effectiveLayout}:${wrapLines ? "wrap" : "scroll"}:${diffBodyTypographyKey}:${file.path}:${file.status}`;
      }

      return [
        effectiveLayout,
        wrapLines ? "wrap" : "scroll",
+        diffBodyTypographyKey,
        file.path,
        file.status ?? "ok",
        file.additions,
@@ -1792,7 +1821,7 @@ export function GitDiffPane({
        getDiffContentLength(file),
      ].join(":");
    },
-    [effectiveLayout, wrapLines],
+    [diffBodyTypographyKey, effectiveLayout, wrapLines],
  );

  const estimateBodyHeight = useCallback(
@@ -1961,6 +1990,7 @@ export function GitDiffPane({
          file={item.file}
          layout={effectiveLayout}
          wrapLines={wrapLines}
+          codeFontSize={codeFontSize}
          reviewActions={reviewActions}
          onBodyHeightChange={handleBodyHeightChange}
          testID={`diff-file-${item.fileIndex}-body`}
@@ -1968,6 +1998,7 @@ export function GitDiffPane({
      );
    },
    [
+      codeFontSize,
      effectiveLayout,
      handleBodyHeightChange,
      handleHeaderHeightChange,
@@ -2015,34 +2046,41 @@ export function GitDiffPane({
    () => ({
      expandedPathsArray,
      effectiveLayout,
+      diffBodyTypographyKey,
      heightVersion,
      wrapLines,
      reviewActions,
    }),
-    [expandedPathsArray, effectiveLayout, heightVersion, wrapLines, reviewActions],
+    [
+      expandedPathsArray,
+      effectiveLayout,
+      diffBodyTypographyKey,
+      heightVersion,
+      wrapLines,
+      reviewActions,
+    ],
  );

  const hasChanges = files.length > 0;
  const diffErrorMessage = diffPayloadError?.message ?? null;
  const prErrorMessage = computePrErrorMessage(githubFeaturesEnabled, prPayloadError);
  const baseRefLabel = useMemo(() => computeBaseRefLabel(baseRef), [baseRef]);
-  const iconColor = theme.colors.foregroundMuted;
  const gitActionsIcons = useMemo(
    () => ({
-      commit: <GitCommitHorizontal size={16} color={iconColor} />,
-      pull: <Download size={16} color={iconColor} />,
-      push: <Upload size={16} color={iconColor} />,
-      pullAndPush: <ArrowDownUp size={16} color={iconColor} />,
-      viewPr: <GitHubIcon size={16} color={iconColor} />,
-      createPr: <GitHubIcon size={16} color={iconColor} />,
-      mergePrSquash: <GitHubIcon size={16} color={iconColor} />,
-      mergePrMerge: <GitHubIcon size={16} color={iconColor} />,
-      mergePrRebase: <GitHubIcon size={16} color={iconColor} />,
-      merge: <GitMerge size={16} color={iconColor} />,
-      mergeFromBase: <RefreshCcw size={16} color={iconColor} />,
-      archive: <Archive size={16} color={iconColor} />,
+      commit: <ThemedGitCommitHorizontal size={16} uniProps={foregroundMutedIconColorMapping} />,
+      pull: <ThemedDownload size={16} uniProps={foregroundMutedIconColorMapping} />,
+      push: <ThemedUpload size={16} uniProps={foregroundMutedIconColorMapping} />,
+      pullAndPush: <ThemedArrowDownUp size={16} uniProps={foregroundMutedIconColorMapping} />,
+      viewPr: <ThemedGitHubIcon size={16} uniProps={foregroundMutedIconColorMapping} />,
+      createPr: <ThemedGitHubIcon size={16} uniProps={foregroundMutedIconColorMapping} />,
+      mergePrSquash: <ThemedGitHubIcon size={16} uniProps={foregroundMutedIconColorMapping} />,
+      mergePrMerge: <ThemedGitHubIcon size={16} uniProps={foregroundMutedIconColorMapping} />,
+      mergePrRebase: <ThemedGitHubIcon size={16} uniProps={foregroundMutedIconColorMapping} />,
+      merge: <ThemedGitMerge size={16} uniProps={foregroundMutedIconColorMapping} />,
+      mergeFromBase: <ThemedRefreshCcw size={16} uniProps={foregroundMutedIconColorMapping} />,
+      archive: <ThemedArchive size={16} uniProps={foregroundMutedIconColorMapping} />,
    }),
-    [iconColor],
+    [],
  );
  const { gitActions, branchLabel } = useGitActions({ serverId, cwd, icons: gitActionsIcons });
  const committedDiffDescription = useMemo(
@@ -2076,7 +2114,6 @@ export function GitDiffPane({
      handleDiffListScroll={handleDiffListScroll}
      onContentSizeChange={scrollbar.onContentSizeChange}
      showDesktopWebScrollbar={showDesktopWebScrollbar}
-      foregroundMutedColor={theme.colors.foregroundMuted}
    />
  );

@@ -2085,7 +2122,7 @@ export function GitDiffPane({
      {!hideHeaderRow ? (
        <View style={styles.header} testID="changes-header">
          <View style={styles.headerLeft}>
-            <GitBranch size={16} color={theme.colors.foregroundMuted} />
+            <ThemedGitBranch size={16} uniProps={foregroundMutedIconColorMapping} />
            <Text style={styles.branchLabel} testID="changes-branch" numberOfLines={1}>
              {branchLabel}
            </Text>
@@ -2107,7 +2144,7 @@ export function GitDiffPane({
                <Text style={styles.diffStatusText} numberOfLines={1}>
                  {diffMode === "uncommitted" ? "Uncommitted" : "Committed"}
                </Text>
-                <ChevronDown size={12} color={theme.colors.foregroundMuted} />
+                <ThemedChevronDown size={12} uniProps={foregroundMutedIconColorMapping} />
              </DropdownMenuTrigger>
              <DropdownMenuContent align="start" width={260} testID="changes-diff-status-menu">
                <DropdownMenuItem
@@ -2551,13 +2588,15 @@ const styles = StyleSheet.create((theme) => ({
    elevation: 4,
    overflow: "visible",
  },
+  diffTextMetrics: {
+    fontSize: theme.fontSize.code,
+    lineHeight: theme.lineHeight.diff,
+    fontFamily: theme.fontFamily.mono,
+  },
  lineNumberText: {
    width: "100%",
    textAlign: "right",
    paddingRight: theme.spacing[2],
-    fontSize: theme.fontSize.code,
-    lineHeight: theme.lineHeight.diff,
-    fontFamily: theme.fontFamily.mono,
    color: theme.colors.foregroundMuted,
    userSelect: "none",
  },
@@ -2570,9 +2609,6 @@ const styles = StyleSheet.create((theme) => ({
  diffLineText: {
    flex: 1,
    paddingRight: theme.spacing[3],
-    fontSize: theme.fontSize.code,
-    lineHeight: theme.lineHeight.diff,
-    fontFamily: theme.fontFamily.mono,
    color: theme.colors.foreground,
    userSelect: "text",
  },
@@ -2621,7 +2657,7 @@ const styles = StyleSheet.create((theme) => ({
  },
 }));

-const HEADER_LINE_TEXT_STYLE = [styles.diffLineText, styles.headerLineText];
+const HEADER_LINE_TEXT_STYLE = [styles.diffTextMetrics, styles.diffLineText, styles.headerLineText];
 const FILE_SECTION_BODY_STYLE = [styles.fileSectionBodyContainer, styles.fileSectionBorder];
 const DIFF_CONTENT_SPLIT_ROW_STYLE = [styles.diffContent, styles.splitRow];
 const DIFF_CONTENT_ROW_STYLE = [styles.diffContent, styles.diffContentRow];
@@ -11,11 +11,12 @@ import {
  type StyleProp,
  type ViewStyle,
 } from "react-native";
-import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
 import { Button } from "@/components/ui/button";
 import { Shortcut } from "@/components/ui/shortcut";
 import { isWeb } from "@/constants/platform";
 import { inlineUnistylesStyle } from "@/styles/unistyles-inline-style";
+import type { Theme } from "@/styles/theme";
 import type { ShortcutKey } from "@/utils/format-shortcut";
 import { useWorkspaceFocusRestoration } from "@/workspace/focus";
 import { useReviewDraftComments, useReviewDraftStore, type ReviewDraftComment } from "./store";
@@ -77,6 +78,14 @@ const INLINE_REVIEW_GAP = 6;
 export const SMALL_ACTION_HIT_SLOP = 8;
 const REVIEW_CANCEL_SHORTCUT_KEYS: ShortcutKey[] = ["Esc"];
 const REVIEW_SAVE_SHORTCUT_KEYS: ShortcutKey[] = ["mod", "Enter"];
+const foregroundMutedIconColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
+const destructiveIconColorMapping = (theme: Theme) => ({ color: theme.colors.destructive });
+const accentForegroundIconColorMapping = (theme: Theme) => ({
+  color: theme.colors.accentForeground,
+});
+const ThemedPencil = withUnistyles(Pencil);
+const ThemedPlus = withUnistyles(Plus);
+const ThemedTrash2 = withUnistyles(Trash2);

 export interface InlineReviewEditorState {
  target: ReviewableDiffTarget;
@@ -274,6 +283,7 @@ export function InlineReviewGutterCell({
  isLineHovered = false,
  onStartComment,
  style,
+  actionTestID,
 }: {
  children: ReactNode;
  reviewTarget: ReviewableDiffTarget | null | undefined;
@@ -282,8 +292,8 @@ export function InlineReviewGutterCell({
  isLineHovered?: boolean;
  onStartComment: (target: ReviewableDiffTarget) => void;
  style?: StyleProp<ViewStyle>;
+  actionTestID?: string;
 }) {
-  const { theme } = useUnistyles();
  const canComment = Boolean(reviewTarget);
  const hasComments = comments.length > 0;
  const [isGutterHovered, setIsGutterHovered] = useState(false);
@@ -345,8 +355,8 @@ export function InlineReviewGutterCell({
        <View style={labelStyle}>
          {children}
          {showAction ? (
-            <View style={styles.gutterActionIcon}>
-              <Plus size={16} strokeWidth={2.4} color={theme.colors.accentForeground} />
+            <View style={styles.gutterActionIcon} testID={actionTestID}>
+              <ThemedPlus size={16} strokeWidth={2.4} uniProps={accentForegroundIconColorMapping} />
            </View>
          ) : null}
        </View>
@@ -429,8 +439,6 @@ function CommentRow({
  onEditComment: (target: ReviewableDiffTarget, comment: ReviewDraftComment) => void;
  onDeleteComment: (id: string) => void;
 }) {
-  const { theme } = useUnistyles();
-
  const handleEdit = useCallback(
    () => onEditComment(reviewTarget, comment),
    [onEditComment, reviewTarget, comment],
@@ -455,7 +463,7 @@ function CommentRow({
          onPress={handleEdit}
          style={iconButtonStyle}
        >
-          <Pencil size={14} color={theme.colors.foregroundMuted} />
+          <ThemedPencil size={14} uniProps={foregroundMutedIconColorMapping} />
        </Pressable>
        <Pressable
          accessibilityRole="button"
@@ -465,7 +473,7 @@ function CommentRow({
          onPress={handleDelete}
          style={iconButtonDestructiveStyle}
        >
-          <Trash2 size={14} color={theme.colors.destructive} />
+          <ThemedTrash2 size={14} uniProps={destructiveIconColorMapping} />
        </Pressable>
      </View>
    </View>
@@ -499,7 +507,6 @@ export function InlineReviewEditor({
  onSave: (body: string) => void;
  testID?: string;
 }) {
-  const { theme } = useUnistyles();
  const inputRef = useRef<TextInput | null>(null);
  const focus = useWorkspaceFocusRestoration();
  const canShowKeyboardHints = useCanShowReviewKeyboardHints();
@@ -577,7 +584,7 @@ export function InlineReviewEditor({
        accessibilityLabel="Review comment"
        testID={testID ? `${testID}-input` : undefined}
        placeholder="Leave a comment"
-        placeholderTextColor={theme.colors.foregroundMuted}
+        placeholderTextColor={styles.placeholderColor.color}
        multiline
        value={body}
        onChangeText={setBody}
@@ -617,16 +624,16 @@ export function InlineReviewEditor({
 const styles = StyleSheet.create((theme) => ({
  gutterInner: {
    minHeight: theme.lineHeight.diff,
-    alignItems: "center",
-    justifyContent: "center",
+    alignItems: "stretch",
+    justifyContent: "flex-start",
    overflow: "visible",
  },
  gutterLabel: {
    width: "100%",
    minWidth: 0,
    height: theme.lineHeight.diff,
-    alignItems: "center",
-    justifyContent: "center",
+    alignItems: "stretch",
+    justifyContent: "flex-start",
    position: "relative",
    overflow: "visible",
  },
@@ -646,6 +653,9 @@ const styles = StyleSheet.create((theme) => ({
    zIndex: 10,
    elevation: 10,
  },
+  placeholderColor: {
+    color: theme.colors.foregroundMuted,
+  },
  threadContainer: {
    flex: 1,
    minWidth: 0,