feat(share): SSR'd diffs

3 files changed, 48 insertions, 12 deletions

diff --git a/packages/enterprise/package.json b/packages/enterprise/package.json
index 09348b437..6f94a4b2c 100644
--- a/packages/enterprise/package.json
+++ b/packages/enterprise/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@opencode-ai/util": "workspace:*",
     "@opencode-ai/ui": "workspace:*",
+    "@pierre/precision-diffs": "catalog:",
     "@solidjs/router": "catalog:",
     "@solidjs/start": "catalog:",
     "@solidjs/meta": "catalog:",
diff --git a/packages/enterprise/src/app.tsx b/packages/enterprise/src/app.tsx
index 185b36a79..28c271775 100644
--- a/packages/enterprise/src/app.tsx
+++ b/packages/enterprise/src/app.tsx
@@ -3,21 +3,19 @@ import { FileRoutes } from "@solidjs/start/router"
 import { Fonts } from "@opencode-ai/ui/fonts"
 import { MetaProvider } from "@solidjs/meta"
 import { MarkedProvider } from "@opencode-ai/ui/context/marked"
-import "./app.css"
 import { Suspense } from "solid-js"
+import "./app.css"
 
 export default function App() {
   return (
     <Router
       root={(props) => (
-        <Suspense>
-          <MarkedProvider>
-            <MetaProvider>
-              <Fonts />
-              {props.children}
-            </MetaProvider>
-          </MarkedProvider>
-        </Suspense>
+        <MarkedProvider>
+          <MetaProvider>
+            <Fonts />
+            <Suspense>{props.children}</Suspense>
+          </MetaProvider>
+        </MarkedProvider>
       )}
     >
       <FileRoutes />
diff --git a/packages/enterprise/src/routes/share/[shareID].tsx b/packages/enterprise/src/routes/share/[shareID].tsx
index f96e4d57a..033d87fed 100644
--- a/packages/enterprise/src/routes/share/[shareID].tsx
+++ b/packages/enterprise/src/routes/share/[shareID].tsx
@@ -2,8 +2,8 @@ import { FileDiff, Message, Model, Part, Session, SessionStatus, UserMessage } f
 import { SessionTurn } from "@opencode-ai/ui/session-turn"
 import { SessionReview } from "@opencode-ai/ui/session-review"
 import { DataProvider } from "@opencode-ai/ui/context"
-import { createAsync, query, RouteDefinition, useParams } from "@solidjs/router"
-import { createEffect, createMemo, ErrorBoundary, For, Match, Show, Suspense, Switch } from "solid-js"
+import { createAsync, query, useParams } from "@solidjs/router"
+import { createEffect, createMemo, ErrorBoundary, For, Match, Show, Switch } from "solid-js"
 import { Share } from "~/core/share"
 import { Logo, Mark } from "@opencode-ai/ui/logo"
 import { IconButton } from "@opencode-ai/ui/icon-button"
@@ -16,6 +16,7 @@ import { createStore } from "solid-js/store"
 import z from "zod"
 import NotFound from "../[...404]"
 import { Tabs } from "@opencode-ai/ui/tabs"
+import { HunkData, preloadMultiFileDiff, PreloadMultiFileDiffResult } from "@pierre/precision-diffs/ssr"
 
 const SessionDataMissingError = NamedError.create(
   "SessionDataMissingError",
@@ -36,6 +37,9 @@ const getData = query(async (shareID) => {
     session_diff: {
       [sessionID: string]: FileDiff[]
     }
+    session_diff_preload: {
+      [sessionID: string]: PreloadMultiFileDiffResult<any>[]
+    }
     session_status: {
       [sessionID: string]: SessionStatus
     }
@@ -54,6 +58,9 @@ const getData = query(async (shareID) => {
     session_diff: {
       [share.sessionID]: [],
     },
+    session_diff_preload: {
+      [share.sessionID]: [],
+    },
     session_status: {
       [share.sessionID]: {
         type: "idle",
@@ -70,6 +77,29 @@ const getData = query(async (shareID) => {
         break
       case "session_diff":
         result.session_diff[share.sessionID] = item.data
+        result.session_diff_preload[share.sessionID] = await Promise.all(
+          item.data.map(async (diff) =>
+            preloadMultiFileDiff<any>({
+              oldFile: { name: diff.file, contents: diff.before },
+              newFile: { name: diff.file, contents: diff.after },
+              options: {
+                theme: "OpenCode",
+                themeType: "system",
+                disableLineNumbers: false,
+                overflow: "wrap",
+                diffStyle: "unified",
+                diffIndicators: "bars",
+                disableBackground: false,
+                expansionLineCount: 20,
+                lineDiffType: "word-alt",
+                maxLineDiffLength: 1000,
+                maxLineLengthForHighlighting: 1000,
+                disableFileHeader: true,
+              },
+              // annotations,
+            }),
+          ),
+        )
         break
       case "message":
         result.message[item.data.sessionID] = result.message[item.data.sessionID] ?? []
@@ -141,7 +171,14 @@ export default function () {
               const provider = createMemo(() => activeMessage()?.model?.providerID)
               const modelID = createMemo(() => activeMessage()?.model?.modelID)
               const model = createMemo(() => data().model[data().sessionID]?.find((m) => m.id === modelID()))
-              const diffs = createMemo(() => data().session_diff[data().sessionID] ?? [])
+              const diffs = createMemo(() => {
+                const diffs = data().session_diff[data().sessionID] ?? []
+                const preloaded = data().session_diff_preload[data().sessionID] ?? []
+                return diffs.map((diff) => ({
+                  ...diff,
+                  preloaded: preloaded.find((d) => d.newFile.name === diff.file),
+                }))
+              })
 
               const title = () => (
                 <div class="flex flex-col gap-4 shrink-0">