feat: better code and diff perf

4 files changed, 34 insertions, 54 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>