fix(app): diff rendering performance

1 files changed, 27 insertions, 24 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} />