wip: desktop work

Author: adamdotdevin

bun.lock

@@ -344,7 +344,7 @@
     "@hono/zod-validator": "0.4.2",
     "@kobalte/core": "0.13.11",
     "@openauthjs/openauth": "0.0.0-20250322224806",
-    "@pierre/precision-diffs": "0.3.5",
+    "@pierre/precision-diffs": "0.3.6",
     "@solidjs/meta": "0.29.4",
     "@tailwindcss/vite": "4.1.11",
     "@tsconfig/bun": "1.0.9",
@@ -938,7 +938,7 @@
 
     "@petamoriken/float16": ["@petamoriken/[email protected]", "", {}, "sha512-VgffxawQde93xKxT3qap3OH+meZf7VaSB5Sqd4Rqc+FP5alWbpOyan/7tRbOAvynjpG3GpdtAuGU/NdhQpmrog=="],
 
-    "@pierre/precision-diffs": ["@pierre/[email protected].5", "", { "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-qbotIS8CahO/7guljDzU3RVpDfg6WViWe0EB0/SZQi3xHD+nzxxlC+pGoyIFSn+47GG0EKxTnvkfaYANm19FCA=="],
+    "@pierre/precision-diffs": ["@pierre/[email protected].6", "", { "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-cKM3HcMmyr5wPFll0bHYcgHplcHgMlL6Dw4Pi4giL0jVt7ySlGwwVyXTRFW5Fva43stOL+EWB+9U5VBDSktBJA=="],
 
     "@pkgjs/parseargs": ["@pkgjs/[email protected]", "", {}, "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.3.5",
+      "@pierre/precision-diffs": "0.3.6",
       "@solidjs/meta": "0.29.4",
       "@tailwindcss/vite": "4.1.11",
       "diff": "8.0.2",
@@ -63,7 +63,7 @@
   "license": "MIT",
   "prettier": {
     "semi": false,
-    "printWidth": 120
+    "printWidth": 100
   },
   "trustedDependencies": [
     "esbuild",

packages/desktop/src/components/assistant-message.tsx

@@ -2,7 +2,7 @@ import type { Part, AssistantMessage, ReasoningPart, TextPart, ToolPart } from "
 import { children, Component, createMemo, For, Match, Show, Switch, type JSX } from "solid-js"
 import { Dynamic } from "solid-js/web"
 import { Markdown } from "./markdown"
-import { Checkbox, Collapsible, Icon, IconProps } from "@opencode-ai/ui"
+import { Checkbox, Collapsible, Diff, Icon, IconProps } from "@opencode-ai/ui"
 import { getDirectory, getFilename } from "@/utils"
 import type { Tool } from "opencode/tool/tool"
 import type { ReadTool } from "opencode/tool/read"
@@ -357,12 +357,21 @@ ToolRegistry.register<typeof EditTool>({
                 <span class="text-text-strong">{getFilename(props.input.filePath ?? "")}</span>
               </div>
             </div>
-            <div class="flex gap-4 items-center justify-end">{/* <DiffChanges diff={diff} /> */}</div>
+            <div class="flex gap-4 items-center justify-end">
+              <Show when={props.metadata.filediff}>
+                <DiffChanges diff={props.metadata.filediff} />
+              </Show>
+            </div>
           </div>
         }
       >
-        <Show when={false && props.output}>
-          <div class="whitespace-pre">{props.output}</div>
+        <Show when={props.metadata.filediff}>
+          <div class="border-t border-border-weaker-base">
+            <Diff
+              before={{ name: getFilename(props.metadata.filediff.path), contents: props.metadata.filediff.before }}
+              after={{ name: getFilename(props.metadata.filediff.path), contents: props.metadata.filediff.after }}
+            />
+          </div>
         </Show>
       </BasicTool>
     )

packages/ui/src/components/diff.tsx

@@ -24,7 +24,13 @@ export type DiffProps<T = {}> = Omit<DiffFileRendererOptions<T>, "themes"> & {
 
 export function Diff<T>(props: DiffProps<T>) {
   let container!: HTMLDivElement
-  const [local, others] = splitProps(props, ["before", "after", "class", "classList", "annotations"])
+  const [local, others] = splitProps(props, [
+    "before",
+    "after",
+    "class",
+    "classList",
+    "annotations",
+  ])
 
   // const lineAnnotations: DiffLineAnnotation<ThreadMetadata>[] = [
   //   {
@@ -165,6 +171,7 @@ export function Diff<T>(props: DiffProps<T>) {
         "--pjs-tab-size": 4,
         "--pjs-font-features": "var(--font-family-mono--font-feature-settings)",
         "--pjs-header-font-family": "var(--font-family-sans)",
+        "--pjs-gap-block": 0,
       }}
       ref={container}
     />