fix(ui): calm diff word highlights with @pierre/diffs 1.5.1 (anomalyc…

…o#51236)
shuv1337 · Sep 30, 2026 · Sep 29, 2026 · Sep 29, 2026 · Sep 29, 2026 · Sep 29, 2026
commit a604b7f773d9807d160bda144150e0b50efd4caf
diff --git a/bun.lock b/bun.lock
diff --git a/package.json b/package.json
@@ -68,7 +68,7 @@
       "@tsconfig/bun": "1.0.9",
       "@cloudflare/workers-types": "4.20251008.0",
       "@openauthjs/openauth": "0.0.0-20250322224806",
-      "@pierre/diffs": "1.2.10",
+      "@pierre/diffs": "1.5.1",
       "opentui-spinner": "0.0.7",
       "@solid-primitives/event-listener": "2.4.6",
       "@solid-primitives/media": "2.3.6",

diff --git a/packages/session-ui/component-tests/file.spec.ts b/packages/session-ui/component-tests/file.spec.ts
@@ -13,10 +13,7 @@ for (const split of [false, true]) {
       await expect(additions).toHaveText(["select-text"])
       await expect(root.locator('[data-line-type="context"] [data-diff-span]')).toHaveCount(0)
       await expect(root.locator('[data-line-type="change-deletion"] [data-diff-span]')).toHaveText([
-        '"http" in',
-        "? error.reason.",
-        "response?.",
-        ": undefined",
+        '"http" in error.reason ? error.reason.http?.response?.headers["x-should-retry"] : undefined',
       ])
       await expect(additions).not.toHaveCSS("background-color", "rgba(0, 0, 0, 0)")
     })
@@ -27,8 +24,7 @@ for (const split of [false, true]) {
       const root = await mount("components-session-review--large-file", { args: { split, source } })
       const line = root.locator('[data-line][data-line-type="change-addition"]')
       await expect(line).toHaveText("export const value = 'after'")
-      // Plain first paint is not proof that the worker kept inline diffs disabled.
-      await expect(line.locator('[style*="--syntax-"]')).not.toHaveCount(0)
+      await expect(line.locator('[style*="--syntax-"]')).toHaveCount(0)
       await expect(root.locator("[data-diff-span]")).toHaveCount(0)
     })
   }

diff --git a/packages/session-ui/performance/highlighting/plain.correctness.ts b/packages/session-ui/performance/highlighting/plain.correctness.ts
@@ -13,7 +13,7 @@ test("renders large diffs as plain text without changing ordinary highlighting",
   await page.goto("/")
   await page.waitForFunction(() => !!window.highlighting)
   const ordinary = await page.evaluate(() => window.highlighting.mount(1))
-  expect(ordinary.options).toMatchObject({ lineDiffType: "word-alt", maxLineDiffLength: 1000, tokenizeMaxLineLength: 1000 })
+  expect(ordinary.options).toMatchObject({ lineDiffType: "word-line", maxLineDiffLength: 1000, tokenizeMaxLineLength: 1000 })
   expect(ordinary.syntaxSpans).toBeGreaterThan(0)
   await expect(page.locator('[data-line="11"][data-line-type="change-addition"]')).toContainText("status: 201")
 })
diff --git a/packages/session-ui/performance/highlighting/viewer.tsx b/packages/session-ui/performance/highlighting/viewer.tsx
@@ -80,7 +80,7 @@ async function mount(revision: number) {
   const offset = messages.length
   const start = performance.now()
   active = normalize({ ...input, additions: large ? 120 : 12, deletions: large ? 120 : 12 })
-  const pool = getWorkerPool(large ? "none" : "word-alt")!
+  const pool = getWorkerPool(large ? "none" : "word-line")!
   let firstReady = 0
   let rendered = 0
   let finish!: (value: Measurement) => void
@@ -128,7 +128,7 @@ async function mount(revision: number) {
 
 export const highlighting = {
   mount,
-  configure(options: Partial<WorkerRenderingOptions>) { return getWorkerPool(large ? "none" : "word-alt")!.setRenderOptions(options) },
+  configure(options: Partial<WorkerRenderingOptions>) { return getWorkerPool(large ? "none" : "word-line")!.setRenderOptions(options) },
   unmount() { dispose?.(); dispose = undefined; host.scrollTop = 0 },
   contents() { return active && { before: text(active, "deletions"), after: text(active, "additions") } },
   input: { before, after: inputs.map((input) => input.after) },

diff --git a/packages/session-ui/src/components/file-ssr.tsx b/packages/session-ui/src/components/file-ssr.tsx
@@ -16,7 +16,7 @@ import {
 import { acquireVirtualizer, virtualMetrics } from "../pierre/virtualizer"
 import { File, type DiffFileProps, type FileProps } from "./file"
 
-type DiffPreload<T> = PreloadMultiFileDiffResult<T> | PreloadFileDiffResult<T>
+type DiffPreload<T> = PreloadMultiFileDiffResult<T, undefined> | PreloadFileDiffResult<T, undefined>
 
 type SSRDiffFileProps<T> = DiffFileProps<T> & {
   preloadedDiff: DiffPreload<T>
@@ -119,7 +119,7 @@ function DiffSSRViewer<T>(props: SSRDiffFileProps<T>) {
     // @ts-expect-error private field required for hydration
     fileDiffInstance.fileContainer = fileDiffRef
     fileDiffInstance.hydrate(
-      local.fileDiff
+      local.fileDiff || !local.before || !local.after
         ? {
             fileDiff: local.fileDiff,
             lineAnnotations: annotations,
@@ -128,12 +128,11 @@ function DiffSSRViewer<T>(props: SSRDiffFileProps<T>) {
             prerenderedHTML: local.preloadedDiff.prerenderedHTML,
           }
         : {
-            oldFile: local.before
-              ? { ...local.before, contents: typeof local.before.contents === "string" ? local.before.contents : "" }
-              : local.before,
-            newFile: local.after
-              ? { ...local.after, contents: typeof local.after.contents === "string" ? local.after.contents : "" }
-              : local.after,
+            oldFile: {
+              ...local.before,
+              contents: typeof local.before.contents === "string" ? local.before.contents : "",
+            },
+            newFile: { ...local.after, contents: typeof local.after.contents === "string" ? local.after.contents : "" },
             lineAnnotations: annotations,
             fileContainer: fileDiffRef,
             containerWrapper: container,

diff --git a/packages/session-ui/src/components/file.tsx b/packages/session-ui/src/components/file.tsx
@@ -75,17 +75,17 @@ export type FileSearchControl = {
   register: (handle: FileSearchHandle | null) => void
 }
 
-export type TextFileProps<T = {}> = FileOptions<T> &
+export type TextFileProps<T = {}> = FileOptions<T, undefined> &
   SharedProps<T> & {
     mode: "text"
     file: FileContents
     annotations?: LineAnnotation<T>[]
-    preloadedDiff?: PreloadMultiFileDiffResult<T>
+    preloadedDiff?: PreloadMultiFileDiffResult<T, undefined>
   }
 
-type DiffPreload<T> = PreloadMultiFileDiffResult<T> | PreloadFileDiffResult<T>
+type DiffPreload<T> = PreloadMultiFileDiffResult<T, undefined> | PreloadFileDiffResult<T, undefined>
 
-type DiffBaseProps<T> = FileDiffOptions<T> &
+type DiffBaseProps<T> = FileDiffOptions<T, undefined> &
   SharedProps<T> & {
     mode: "diff"
     annotations?: DiffLineAnnotation<T>[]
@@ -957,7 +957,7 @@ function DiffViewer<T>(props: DiffFileProps<T>) {
   let instance: FileDiff<T> | undefined
   let instanceVirtualizer: Virtualizer | undefined
   let instanceWorkerPool: ReturnType<typeof getWorkerPool>
-  let instanceVirtualHunkSeparators: FileDiffOptions<T>["hunkSeparators"] | undefined
+  let instanceVirtualHunkSeparators: FileDiffOptions<T, undefined>["hunkSeparators"] | undefined
   let instanceFileDiff: FileDiffMetadata | undefined
   let instanceBefore: FileContents | undefined
   let instanceAfter: FileContents | undefined
@@ -1066,7 +1066,7 @@ function DiffViewer<T>(props: DiffFileProps<T>) {
     lineDiffType: "none",
     maxLineDiffLength: 0,
     tokenizeMaxLineLength: 1,
-  } satisfies Pick<FileDiffOptions<T>, "lineDiffType" | "maxLineDiffLength" | "tokenizeMaxLineLength">
+  } satisfies Pick<FileDiffOptions<T, undefined>, "lineDiffType" | "maxLineDiffLength" | "tokenizeMaxLineLength">
 
   const lineCallbacks = createLineCallbacks({
     viewer,
@@ -1076,7 +1076,7 @@ function DiffViewer<T>(props: DiffFileProps<T>) {
     onLineNumberSelectionEnd: (range) => local.onLineNumberSelectionEnd?.(range),
   })
 
-  const options = createMemo<FileDiffOptions<T>>(() => {
+  const options = createMemo<FileDiffOptions<T, undefined>>(() => {
     const base = {
       ...createDefaultOptions(props.diffStyle),
       ...others,
@@ -1112,7 +1112,7 @@ function DiffViewer<T>(props: DiffFileProps<T>) {
   createEffect(() => {
     const opts = options()
     // Worker render options override per-viewer options, including the large-file fallback.
-    const workerPool = getWorkerPool(large() ? "none" : "word-alt")
+    const workerPool = getWorkerPool(large() ? "none" : "word-line")
     const virtualizer = virtuals.get()
     const beforeContents = typeof local.before?.contents === "string" ? local.before.contents : ""
     const afterContents = typeof local.after?.contents === "string" ? local.after.contents : ""

diff --git a/packages/session-ui/src/components/session-review.tsx b/packages/session-ui/src/components/session-review.tsx
@@ -64,12 +64,12 @@ export type SessionReviewCommentActions = {
 export type SessionReviewFocus = { file: string; id: string }
 
 type RawReviewDiff = (PresentationFileDiff | FileDiffInfo) & {
-  preloaded?: PreloadMultiFileDiffResult<unknown>
+  preloaded?: PreloadMultiFileDiffResult<unknown, undefined>
 }
 type ReviewDiff = ((PresentationFileDiff & { file: string }) | FileDiffInfo) & {
-  preloaded?: PreloadMultiFileDiffResult<unknown>
+  preloaded?: PreloadMultiFileDiffResult<unknown, undefined>
 }
-type Item = ViewDiff & { preloaded?: PreloadMultiFileDiffResult<unknown> }
+type Item = ViewDiff & { preloaded?: PreloadMultiFileDiffResult<unknown, undefined> }
 
 function diff(value: unknown): value is ReviewDiff {
   if (!value || typeof value !== "object" || Array.isArray(value)) return false

diff --git a/packages/session-ui/src/context/data.tsx b/packages/session-ui/src/context/data.tsx
@@ -32,7 +32,7 @@ type Data = {
     [sessionID: string]: FileDiffInfo[]
   }
   session_diff_preload?: {
-    [sessionID: string]: PreloadMultiFileDiffResult<unknown>[]
+    [sessionID: string]: PreloadMultiFileDiffResult<unknown, undefined>[]
   }
 }
 

diff --git a/packages/session-ui/src/pierre/index.ts b/packages/session-ui/src/pierre/index.ts
@@ -2,7 +2,7 @@ import { DiffLineAnnotation, FileContents, FileDiffOptions, type SelectedLineRan
 import { ComponentProps } from "solid-js"
 import { lineCommentStyles } from "../components/line-comment-styles"
 
-export type DiffProps<T = {}> = FileDiffOptions<T> & {
+export type DiffProps<T = {}> = FileDiffOptions<T, undefined> & {
   before: FileContents
   after: FileContents
   annotations?: DiffLineAnnotation<T>[]
@@ -17,6 +17,11 @@ export type DiffProps<T = {}> = FileDiffOptions<T> & {
 const unsafeCSS = `
 :host {
   --diffs-bg: var(--opencode-diffs-bg, var(--color-background-stronger));
+  /* Pierre mixes 15% in dark mode, which makes collapsed rows read as highlighted. */
+  --diffs-bg-separator-override: light-dark(
+    color-mix(in lab, var(--diffs-bg) 98%, var(--diffs-mixer)),
+    color-mix(in lab, var(--diffs-bg) 95%, var(--diffs-mixer))
+  );
 }
 
 [data-diff],
@@ -138,15 +143,15 @@ const unsafeCSS = `
 }
 
 @media (max-width: 767px) {
-  /* File annotations share the code column; reclaim the measured number gutter. */
-  [data-file] [data-line-annotation] {
-    margin-inline-start: calc(-1 * var(--diffs-column-number-width, 0px));
-    z-index: 4;
+  /* File annotations share the code column; reclaim the number gutter. Pierre only measures column widths for
+     scrolling files with annotations, so derive the gutter from the code grid width instead. */
+  [data-file][data-overflow='wrap'] [data-code] {
+    container-type: inline-size;
   }
 
-  [data-file] [data-annotation-content] {
-    width: var(--diffs-column-width, auto);
-    inset-inline-start: 0;
+  [data-file][data-overflow='wrap'] [data-line-annotation] {
+    margin-inline-start: calc(100% - 100cqi);
+    z-index: 4;
   }
 }
 
@@ -198,7 +203,7 @@ ${lineCommentStyles}
 
 `
 
-export function createDefaultOptions<T>(style: FileDiffOptions<T>["diffStyle"]) {
+export function createDefaultOptions<T>(style: FileDiffOptions<T, undefined>["diffStyle"]) {
   return {
     theme: "OpenCode",
     themeType: "system",
@@ -210,7 +215,7 @@ export function createDefaultOptions<T>(style: FileDiffOptions<T>["diffStyle"])
     disableBackground: false,
     expansionLineCount: 20,
     hunkSeparators: "line-info-basic",
-    lineDiffType: "word-alt",
+    lineDiffType: "word-line",
     maxLineDiffLength: 1000,
     maxLineLengthForHighlighting: 1000,
     disableFileHeader: true,

diff --git a/packages/session-ui/src/pierre/worker.ts b/packages/session-ui/src/pierre/worker.ts
@@ -8,7 +8,7 @@ export function workerFactory(): Worker {
   return new Worker(ShikiWorkerUrl, { type: "module" })
 }
 
-function createPool(lineDiffType: "none" | "word-alt") {
+function createPool(lineDiffType: "none" | "word-line") {
   const pool = new WorkerPoolManager(
     {
       workerFactory,
@@ -36,15 +36,15 @@ function createPool(lineDiffType: "none" | "word-alt") {
 let plain: WorkerPoolManager | undefined
 let diff: WorkerPoolManager | undefined
 
-export function getWorkerPool(lineDiffType: "none" | "word-alt" = "word-alt"): WorkerPoolManager | undefined {
+export function getWorkerPool(lineDiffType: "none" | "word-line" = "word-line"): WorkerPoolManager | undefined {
   if (typeof window === "undefined") return
 
   if (lineDiffType === "none") {
     if (!plain) plain = createPool("none")
     return plain
   }
 
-  if (!diff) diff = createPool("word-alt")
+  if (!diff) diff = createPool("word-line")
   return diff
 }