feat: better code and diff perf

6 files changed, 68 insertions, 71 deletions

diff --git a/packages/ui/src/components/code.tsx b/packages/ui/src/components/code.tsx
index b4b772816..c80f0987f 100644
--- a/packages/ui/src/components/code.tsx
+++ b/packages/ui/src/components/code.tsx
@@ -1,22 +1,7 @@
 import { type FileContents, File, FileOptions, LineAnnotation } from "@pierre/precision-diffs"
-import { ComponentProps, createEffect, splitProps } from "solid-js"
+import { ComponentProps, createEffect, createMemo, splitProps } from "solid-js"
 import { createDefaultOptions, styleVariables } from "../pierre"
-import { getOrCreateWorkerPoolSingleton } from "@pierre/precision-diffs/worker"
-import { workerFactory } from "../pierre/worker"
-
-const workerPool = getOrCreateWorkerPoolSingleton({
-  poolOptions: {
-    workerFactory,
-    // poolSize defaults to 8. More workers = more parallelism but
-    // also more memory. Too many can actually slow things down.
-    // poolSize: 8,
-  },
-  highlighterOptions: {
-    theme: "OpenCode",
-    // Optionally preload languages to avoid lazy-loading delays
-    // langs: ["typescript", "javascript", "css", "html"],
-  },
-})
+import { workerPool } from "../pierre/worker"
 
 export type CodeProps<T = {}> = FileOptions<T> & {
   file: FileContents
@@ -29,17 +14,20 @@ export function Code<T>(props: CodeProps<T>) {
   let container!: HTMLDivElement
   const [local, others] = splitProps(props, ["file", "class", "classList", "annotations"])
 
-  createEffect(() => {
-    const instance = new File<T>(
-      {
-        ...createDefaultOptions<T>("unified"),
-        ...others,
-      },
-      workerPool,
-    )
+  const file = createMemo(
+    () =>
+      new File<T>(
+        {
+          ...createDefaultOptions<T>("unified"),
+          ...others,
+        },
+        workerPool,
+      ),
+  )
 
+  createEffect(() => {
     container.innerHTML = ""
-    instance.render({
+    file().render({
       file: local.file,
       lineAnnotations: local.annotations,
       containerWrapper: container,
diff --git a/packages/ui/src/components/diff.tsx b/packages/ui/src/components/diff.tsx
index 8e19c3172..703043f4c 100644
--- a/packages/ui/src/components/diff.tsx
+++ b/packages/ui/src/components/diff.tsx
@@ -1,22 +1,7 @@
 import { FileDiff } from "@pierre/precision-diffs"
-import { getOrCreateWorkerPoolSingleton } from "@pierre/precision-diffs/worker"
-import { createEffect, onCleanup, splitProps } from "solid-js"
+import { createEffect, createMemo, onCleanup, splitProps } from "solid-js"
 import { createDefaultOptions, type DiffProps, styleVariables } from "../pierre"
-import { workerFactory } from "../pierre/worker"
-
-const workerPool = getOrCreateWorkerPoolSingleton({
-  poolOptions: {
-    workerFactory,
-    // poolSize defaults to 8. More workers = more parallelism but
-    // also more memory. Too many can actually slow things down.
-    // poolSize: 8,
-  },
-  highlighterOptions: {
-    theme: "OpenCode",
-    // Optionally preload languages to avoid lazy-loading delays
-    // langs: ["typescript", "javascript", "css", "html"],
-  },
-})
+import { workerPool } from "../pierre/worker"
 
 // interface ThreadMetadata {
 //   threadId: string
@@ -28,21 +13,22 @@ export function Diff<T>(props: DiffProps<T>) {
   let container!: HTMLDivElement
   const [local, others] = splitProps(props, ["before", "after", "class", "classList", "annotations"])
 
-  let fileDiffInstance: FileDiff<T> | undefined
-  const cleanupFunctions: Array<() => void> = []
-
-  createEffect(() => {
-    container.innerHTML = ""
-    if (!fileDiffInstance) {
-      fileDiffInstance = new FileDiff<T>(
+  const fileDiff = createMemo(
+    () =>
+      new FileDiff<T>(
         {
           ...createDefaultOptions(props.diffStyle),
           ...others,
         },
         workerPool,
-      )
-    }
-    fileDiffInstance.render({
+      ),
+  )
+
+  const cleanupFunctions: Array<() => void> = []
+
+  createEffect(() => {
+    container.innerHTML = ""
+    fileDiff().render({
       oldFile: local.before,
       newFile: local.after,
       lineAnnotations: local.annotations,
@@ -52,7 +38,7 @@ export function Diff<T>(props: DiffProps<T>) {
 
   onCleanup(() => {
     // Clean up FileDiff event handlers and dispose SolidJS components
-    fileDiffInstance?.cleanUp()
+    fileDiff()?.cleanUp()
     cleanupFunctions.forEach((dispose) => dispose())
   })
 
diff --git a/packages/ui/src/components/session-review.tsx b/packages/ui/src/components/session-review.tsx
index 6dbaaec18..cc82dcbd4 100644
--- a/packages/ui/src/components/session-review.tsx
+++ b/packages/ui/src/components/session-review.tsx
@@ -11,6 +11,7 @@ import { createStore } from "solid-js/store"
 import { type FileDiff } from "@opencode-ai/sdk"
 import { PreloadMultiFileDiffResult } from "@pierre/precision-diffs/ssr"
 import { Dynamic } from "solid-js/web"
+import { checksum } from "@opencode-ai/util/encode"
 
 export interface SessionReviewProps {
   split?: boolean
@@ -105,10 +106,12 @@ export const SessionReview = (props: SessionReviewProps) => {
                     before={{
                       name: diff.file!,
                       contents: diff.before!,
+                      cacheKey: checksum(diff.before),
                     }}
                     after={{
                       name: diff.file!,
                       contents: diff.after!,
+                      cacheKey: checksum(diff.after),
                     }}
                   />
                 </Accordion.Content>
diff --git a/packages/ui/src/components/session-turn.tsx b/packages/ui/src/components/session-turn.tsx
index 44ecc3a14..47d4cd22d 100644
--- a/packages/ui/src/components/session-turn.tsx
+++ b/packages/ui/src/components/session-turn.tsx
@@ -3,6 +3,7 @@ import { useData } from "../context"
 import { useDiffComponent } from "../context/diff"
 import { Binary } from "@opencode-ai/util/binary"
 import { getDirectory, getFilename } from "@opencode-ai/util/path"
+import { checksum } from "@opencode-ai/util/encode"
 import { createEffect, createMemo, createSignal, For, Match, onMount, ParentProps, Show, Switch } from "solid-js"
 import { DiffChanges } from "./diff-changes"
 import { Typewriter } from "./typewriter"
@@ -174,10 +175,12 @@ export function SessionTurn(
                                 before={{
                                   name: diff.file!,
                                   contents: diff.before!,
+                                  cacheKey: checksum(diff.before!),
                                 }}
                                 after={{
                                   name: diff.file!,
                                   contents: diff.after!,
+                                  cacheKey: checksum(diff.after!),
                                 }}
                               />
                             </Accordion.Content>
diff --git a/packages/ui/src/pierre/index.ts b/packages/ui/src/pierre/index.ts
index 26e902d05..ddbd1b82d 100644
--- a/packages/ui/src/pierre/index.ts
+++ b/packages/ui/src/pierre/index.ts
@@ -9,21 +9,7 @@ export type DiffProps<T = {}> = FileDiffOptions<T> & {
   classList?: ComponentProps<"div">["classList"]
 }
 
-export function createDefaultOptions<T>(style: FileDiffOptions<T>["diffStyle"]) {
-  return {
-    theme: "OpenCode",
-    themeType: "system",
-    disableLineNumbers: false,
-    overflow: "wrap",
-    diffStyle: style ?? "unified",
-    diffIndicators: "bars",
-    disableBackground: false,
-    expansionLineCount: 20,
-    lineDiffType: style === "split" ? "word-alt" : "none",
-    maxLineDiffLength: 1000,
-    maxLineLengthForHighlighting: 1000,
-    disableFileHeader: true,
-    unsafeCSS: `
+const unsafeCSS = `
 [data-pjs-header],
 [data-pjs] {
   [data-separator-wrapper] {
@@ -46,7 +32,23 @@ export function createDefaultOptions<T>(style: FileDiffOptions<T>["diffStyle"])
   [data-separator-content] {
     height: 24px !important;
   }
-}`,
+}`
+
+export function createDefaultOptions<T>(style: FileDiffOptions<T>["diffStyle"]) {
+  return {
+    theme: "OpenCode",
+    themeType: "system",
+    disableLineNumbers: false,
+    overflow: "wrap",
+    diffStyle: style ?? "unified",
+    diffIndicators: "bars",
+    disableBackground: false,
+    expansionLineCount: 20,
+    lineDiffType: style === "split" ? "word-alt" : "none",
+    maxLineDiffLength: 1000,
+    maxLineLengthForHighlighting: 1000,
+    disableFileHeader: true,
+    unsafeCSS,
     // hunkSeparators(hunkData: HunkData) {
     //   const fragment = document.createDocumentFragment()
     //   const numCol = document.createElement("div")
diff --git a/packages/ui/src/pierre/worker.ts b/packages/ui/src/pierre/worker.ts
index de5fd625a..2b2da1f09 100644
--- a/packages/ui/src/pierre/worker.ts
+++ b/packages/ui/src/pierre/worker.ts
@@ -1,5 +1,20 @@
-import ShikiWorkerUrl from "@pierre/precision-diffs/worker/shiki-worker.js?worker&url"
+import { getOrCreateWorkerPoolSingleton } from "@pierre/precision-diffs/worker"
+import ShikiWorkerUrl from "@pierre/precision-diffs/worker/worker.js?worker&url"
 
 export function workerFactory(): Worker {
   return new Worker(ShikiWorkerUrl, { type: "module" })
 }
+
+export const workerPool = getOrCreateWorkerPoolSingleton({
+  poolOptions: {
+    workerFactory,
+    // poolSize defaults to 8. More workers = more parallelism but
+    // also more memory. Too many can actually slow things down.
+    // poolSize: 8,
+  },
+  highlighterOptions: {
+    theme: "OpenCode",
+    // Optionally preload languages to avoid lazy-loading delays
+    // langs: ["typescript", "javascript", "css", "html"],
+  },
+})