fix(app): diff rendering performance

4 files changed, 28 insertions, 32 deletions

diff --git a/packages/ui/src/components/diff.tsx b/packages/ui/src/components/diff.tsx
index ff70cece9..bdbf1511e 100644
--- a/packages/ui/src/components/diff.tsx
+++ b/packages/ui/src/components/diff.tsx
@@ -1,42 +1,45 @@
+import { checksum } from "@opencode-ai/util/encode"
 import { FileDiff } from "@pierre/diffs"
 import { createEffect, createMemo, onCleanup, splitProps } from "solid-js"
 import { createDefaultOptions, type DiffProps, styleVariables } from "../pierre"
 import { getWorkerPool } from "../pierre/worker"
 
-// interface ThreadMetadata {
-//   threadId: string
-// }
-//
-//
-
 export function Diff<T>(props: DiffProps<T>) {
   let container!: HTMLDivElement
   const [local, others] = splitProps(props, ["before", "after", "class", "classList", "annotations"])
 
-  const fileDiff = createMemo(
-    () =>
-      new FileDiff<T>(
-        {
-          ...createDefaultOptions(props.diffStyle),
-          ...others,
-        },
-        getWorkerPool(props.diffStyle),
-      ),
-  )
+  const options = createMemo(() => ({
+    ...createDefaultOptions(props.diffStyle),
+    ...others,
+  }))
+
+  let instance: FileDiff<T> | undefined
 
   createEffect(() => {
-    const diff = fileDiff()
+    const opts = options()
+    const workerPool = getWorkerPool(props.diffStyle)
+    const annotations = local.annotations
+
+    instance?.cleanUp()
+    instance = new FileDiff<T>(opts, workerPool)
+
     container.innerHTML = ""
-    diff.render({
-      oldFile: local.before,
-      newFile: local.after,
-      lineAnnotations: local.annotations,
+    instance.render({
+      oldFile: {
+        ...local.before,
+        cacheKey: checksum(local.before.contents),
+      },
+      newFile: {
+        ...local.after,
+        cacheKey: checksum(local.after.contents),
+      },
+      lineAnnotations: annotations,
       containerWrapper: container,
     })
+  })
 
-    onCleanup(() => {
-      diff.cleanUp()
-    })
+  onCleanup(() => {
+    instance?.cleanUp()
   })
 
   return <div data-component="diff" style={styleVariables} ref={container} />
diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
index d0e8afefd..cb50cf245 100644
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@@ -915,12 +915,10 @@ ToolRegistry.register({
               before={{
                 name: props.metadata?.filediff?.file || props.input.filePath,
                 contents: props.metadata?.filediff?.before || props.input.oldString,
-                cacheKey: checksum(props.metadata?.filediff?.before || props.input.oldString),
               }}
               after={{
                 name: props.metadata?.filediff?.file || props.input.filePath,
                 contents: props.metadata?.filediff?.after || props.input.newString,
-                cacheKey: checksum(props.metadata?.filediff?.after || props.input.newString),
               }}
             />
           </div>
diff --git a/packages/ui/src/components/session-review.tsx b/packages/ui/src/components/session-review.tsx
index e6d40341f..275077a58 100644
--- a/packages/ui/src/components/session-review.tsx
+++ b/packages/ui/src/components/session-review.tsx
@@ -12,7 +12,6 @@ import { createStore } from "solid-js/store"
 import { type FileDiff } from "@opencode-ai/sdk/v2"
 import { PreloadMultiFileDiffResult } from "@pierre/diffs/ssr"
 import { Dynamic } from "solid-js/web"
-import { checksum } from "@opencode-ai/util/encode"
 
 export type SessionReviewDiffStyle = "unified" | "split"
 
@@ -125,12 +124,10 @@ 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 8285b9822..005b6e5a3 100644
--- a/packages/ui/src/components/session-turn.tsx
+++ b/packages/ui/src/components/session-turn.tsx
@@ -9,7 +9,7 @@ import {
 import { useData } from "../context"
 import { useDiffComponent } from "../context/diff"
 import { getDirectory, getFilename } from "@opencode-ai/util/path"
-import { checksum } from "@opencode-ai/util/encode"
+
 import { Binary } from "@opencode-ai/util/binary"
 import { createEffect, createMemo, For, Match, on, onCleanup, ParentProps, Show, Switch } from "solid-js"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
@@ -578,12 +578,10 @@ 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>