feat: upgrade diff component with loading state and Windows compatibility

packages/app/src/custom-elements.d.ts

@@ -1 +1,17 @@
-../../ui/src/custom-elements.d.ts
+import { DIFFS_TAG_NAME } from "@pierre/diffs"
+
+/**
+ * TypeScript declaration for the <diffs-container> custom element.
+ * This tells TypeScript that <diffs-container> is a valid JSX element in SolidJS.
+ * Required for using the @pierre/diffs web component in .tsx files.
+ */
+
+declare module "solid-js" {
+    namespace JSX {
+        interface IntrinsicElements {
+            [DIFFS_TAG_NAME]: HTMLAttributes<HTMLElement>
+        }
+    }
+}
+
+export { }

packages/desktop/scripts/predev.ts

@@ -6,7 +6,7 @@ const RUST_TARGET = Bun.env.TAURI_ENV_TARGET_TRIPLE
 
 const sidecarConfig = getCurrentSidecar(RUST_TARGET)
 
-const binaryPath = `../opencode/dist/${sidecarConfig.ocBinary}/bin/opencode`
+const binaryPath = `../opencode/dist/${sidecarConfig.ocBinary}/bin/opencode${process.platform === "win32" ? ".exe" : ""}`
 
 await $`cd ../opencode && bun run build --single`
 

packages/ui/src/components/diff.tsx

@@ -1,7 +1,9 @@
 import { FileDiff } from "@pierre/diffs"
-import { createEffect, createMemo, onCleanup, splitProps } from "solid-js"
+import { createEffect, createMemo, onCleanup, splitProps, createSignal } from "solid-js"
 import { createDefaultOptions, type DiffProps, styleVariables } from "../pierre"
 import { workerPool } from "../pierre/worker"
+import { Spinner } from "./spinner"
+import { Show } from "solid-js"
 
 // interface ThreadMetadata {
 //   threadId: string
@@ -12,6 +14,7 @@ import { workerPool } from "../pierre/worker"
 export function Diff<T>(props: DiffProps<T>) {
   let container!: HTMLDivElement
   const [local, others] = splitProps(props, ["before", "after", "class", "classList", "annotations"])
+  const [isRendering, setIsRendering] = createSignal(false)
 
   const fileDiff = createMemo(
     () =>
@@ -27,20 +30,36 @@ export function Diff<T>(props: DiffProps<T>) {
   const cleanupFunctions: Array<() => void> = []
 
   createEffect(() => {
-    container.innerHTML = ""
-    fileDiff().render({
-      oldFile: local.before,
-      newFile: local.after,
-      lineAnnotations: local.annotations,
-      containerWrapper: container,
-    })
+    setIsRendering(true)
+
+    try {
+      container.innerHTML = ""
+      fileDiff().render({
+        oldFile: local.before,
+        newFile: local.after,
+        lineAnnotations: local.annotations,
+        containerWrapper: container,
+      })
+    } finally {
+      setIsRendering(false)
+    }
   })
 
   onCleanup(() => {
-    // Clean up FileDiff event handlers and dispose SolidJS components
+    // Clean up FileDiff event handlers and dispose SolidJS components 
     fileDiff()?.cleanUp()
     cleanupFunctions.forEach((dispose) => dispose())
   })
 
-  return <div data-component="diff" style={styleVariables} ref={container} />
+  return (
+    <div data-component="diff" style={styleVariables}>
+      <Show when={isRendering()}>
+        <div class="flex items-center justify-center py-8 text-text-weaker">
+          <Spinner class="mr-2" />
+          Rendering diff...
+        </div>
+      </Show>
+      <div ref={container} />
+    </div>
+  )
 }