wip: desktop work

bun.lock

@@ -276,7 +276,7 @@
       "version": "0.15.18",
       "dependencies": {
         "@kobalte/core": "catalog:",
-        "@pierre/precision-diffs": "0.0.2-alpha.1-1",
+        "@pierre/precision-diffs": "catalog:",
         "@solidjs/meta": "catalog:",
         "fuzzysort": "catalog:",
         "luxon": "catalog:",
@@ -343,7 +343,7 @@
     "@hono/zod-validator": "0.4.2",
     "@kobalte/core": "0.13.11",
     "@openauthjs/openauth": "0.0.0-20250322224806",
-    "@pierre/precision-diffs": "0.0.2-alpha.1-1",
+    "@pierre/precision-diffs": "0.3.2",
     "@solidjs/meta": "0.29.4",
     "@tailwindcss/vite": "4.1.11",
     "@tsconfig/bun": "1.0.9",
@@ -937,7 +937,7 @@
 
     "@petamoriken/float16": ["@petamoriken/float16@3.9.2", "", {}, "sha512-VgffxawQde93xKxT3qap3OH+meZf7VaSB5Sqd4Rqc+FP5alWbpOyan/7tRbOAvynjpG3GpdtAuGU/NdhQpmrog=="],
 
-    "@pierre/precision-diffs": ["@pierre/precision-diffs@0.0.2-alpha.1-1", "", { "dependencies": { "@shikijs/core": "3.13.0", "@shikijs/transformers": "3.13.0", "diff": "8.0.2", "fast-deep-equal": "3.1.3", "hast-util-to-html": "9.0.5", "shiki": "3.13.0" } }, "sha512-T43cwB7gMnbM+tp9p73NptUm4uUOfmrP5ihMOAHWQPpzBa/oeTjqZlmEmSQLpT8WKKnWG0lbKZPtlw7l0gW0Vw=="],
+    "@pierre/precision-diffs": ["@pierre/precision-diffs@0.3.2", "", { "dependencies": { "@shikijs/core": "3.13.0", "@shikijs/transformers": "3.13.0", "diff": "8.0.2", "fast-deep-equal": "3.1.3", "hast-util-to-html": "9.0.5", "shiki": "3.13.0" }, "peerDependencies": { "react": "^18.3.1 || ^19.0.0", "react-dom": "^18.3.1 || ^19.0.0" } }, "sha512-HE+wFB0TV+wmjur/J+qI5PsRQl5RN6tCEFTusW0S5FDfZJUIpkxJCacqUxyEI0DriXMKhgGQ+oCQShfaFELdrQ=="],
 
     "@pkgjs/parseargs": ["@pkgjs/parseargs@0.11.0", "", {}, "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="],
 

package.json

@@ -25,7 +25,7 @@
       "@tsconfig/bun": "1.0.9",
       "@cloudflare/workers-types": "4.20251008.0",
       "@openauthjs/openauth": "0.0.0-20250322224806",
-      "@pierre/precision-diffs": "0.0.2-alpha.1-1",
+      "@pierre/precision-diffs": "0.3.2",
       "@solidjs/meta": "0.29.4",
       "@tailwindcss/vite": "4.1.11",
       "diff": "8.0.2",
@@ -53,8 +53,8 @@
     "turbo": "2.5.6"
   },
   "dependencies": {
-    "@opencode-ai/sdk": "workspace:*",
-    "@opencode-ai/script": "workspace:*"
+    "@opencode-ai/script": "workspace:*",
+    "@opencode-ai/sdk": "workspace:*"
   },
   "repository": {
     "type": "git",

packages/desktop/src/components/diff.tsx

@@ -2,8 +2,9 @@ import {
   type FileContents,
   FileDiff,
   type DiffLineAnnotation,
+  type HunkData,
   DiffFileRendererOptions,
-  registerCustomTheme,
+  // registerCustomTheme,
 } from "@pierre/precision-diffs"
 import { ComponentProps, createEffect, splitProps } from "solid-js"
 
@@ -15,8 +16,7 @@ export type DiffProps<T = {}> = Omit<DiffFileRendererOptions<T>, "themes"> & {
   classList?: ComponentProps<"div">["classList"]
 }
 
-// @ts-expect-error
-registerCustomTheme("opencode", () => import("./theme.json"))
+// registerCustomTheme("opencode", () => import("./theme.json"))
 
 // interface ThreadMetadata {
 //   threadId: string
@@ -49,7 +49,7 @@ export function Diff<T>(props: DiffProps<T>) {
   // annotations and a container element to hold the diff
   createEffect(() => {
     const instance = new FileDiff<T>({
-      theme: "opencode",
+      theme: "pierre-light",
       // Or can also provide a 'themes' prop, which allows the code to adapt
       // to your OS light or dark theme
       // themes: { dark: 'pierre-night', light: 'pierre-light' },
@@ -97,7 +97,24 @@ export function Diff<T>(props: DiffProps<T>) {
       //
       // 'simple':
       // Just a subtle bar separator between each hunk
-      hunkSeparators: "line-info",
+      // hunkSeparators: "line-info",
+      hunkSeparators(hunkData: HunkData) {
+        const fragment = document.createDocumentFragment()
+        const numCol = document.createElement("div")
+        numCol.textContent = `${hunkData.lines}`
+        numCol.style.position = "sticky"
+        numCol.style.left = "0"
+        numCol.style.backgroundColor = "var(--pjs-bg)"
+        numCol.style.zIndex = "2"
+        fragment.appendChild(numCol)
+        const contentCol = document.createElement("div")
+        contentCol.textContent = "unmodified lines"
+        contentCol.style.position = "sticky"
+        contentCol.style.width = "var(--pjs-column-content-width)"
+        contentCol.style.left = "var(--pjs-column-number-width)"
+        fragment.appendChild(contentCol)
+        return fragment
+      },
       // On lines that have both additions and deletions, we can run a
       // separate diff check to mark parts of the lines that change.
       // 'none':

packages/ui/package.json

@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@kobalte/core": "catalog:",
-    "@pierre/precision-diffs": "0.0.2-alpha.1-1",
+    "@pierre/precision-diffs": "catalog:",
     "@solidjs/meta": "catalog:",
     "fuzzysort": "catalog:",
     "luxon": "catalog:",