wip: desktop work

8 files changed, 57 insertions, 85 deletions

diff --git a/packages/desktop/package.json b/packages/desktop/package.json
index a2184a75a..3861c49bd 100644
--- a/packages/desktop/package.json
+++ b/packages/desktop/package.json
@@ -26,7 +26,7 @@
     "@kobalte/core": "catalog:",
     "@opencode-ai/sdk": "workspace:*",
     "@opencode-ai/ui": "workspace:*",
-    "@pierre/precision-diffs": "0.3.5",
+    "@pierre/precision-diffs": "catalog:",
     "@shikijs/transformers": "3.9.2",
     "@solid-primitives/active-element": "2.1.3",
     "@solid-primitives/event-bus": "1.1.2",
diff --git a/packages/desktop/src/components/assistant-message.tsx b/packages/desktop/src/components/assistant-message.tsx
index cfc9d1a49..738293405 100644
--- a/packages/desktop/src/components/assistant-message.tsx
+++ b/packages/desktop/src/components/assistant-message.tsx
@@ -394,7 +394,6 @@ ToolRegistry.register<typeof WriteTool>({
 ToolRegistry.register<typeof TodoWriteTool>({
   name: "todowrite",
   render(props) {
-    console.log(props.input.todos)
     return (
       <BasicTool
         icon="checklist"
diff --git a/packages/desktop/src/pages/index.tsx b/packages/desktop/src/pages/index.tsx
index 42e96e32e..b4bd36162 100644
--- a/packages/desktop/src/pages/index.tsx
+++ b/packages/desktop/src/pages/index.tsx
@@ -1,4 +1,4 @@
-import { Button, List, SelectDialog, Tooltip, IconButton, Tabs, Icon, Accordion } from "@opencode-ai/ui"
+import { Button, List, SelectDialog, Tooltip, IconButton, Tabs, Icon, Accordion, Diff } from "@opencode-ai/ui"
 import { FileIcon } from "@/ui"
 import FileTree from "@/components/file-tree"
 import { For, onCleanup, onMount, Show, Match, Switch, createSignal, createEffect, createMemo } from "solid-js"
@@ -21,7 +21,6 @@ import type { JSX } from "solid-js"
 import { Code } from "@/components/code"
 import { useSync } from "@/context/sync"
 import { useSDK } from "@/context/sdk"
-import { Diff } from "@/components/diff"
 import { ProgressCircle } from "@/components/progress-circle"
 import { AssistantMessage } from "@/components/assistant-message"
 import { type AssistantMessage as AssistantMessageType } from "@opencode-ai/sdk"
@@ -655,7 +654,7 @@ export default function Page() {
                             </ul>
                           </Show>
                           <div ref={messageScrollElement} class="grow min-w-0 h-full overflow-y-auto no-scrollbar">
-                            <div class="flex flex-col items-start gap-50 pb-[800px]">
+                            <div class="flex flex-col items-start gap-50 pb-50">
                               <For each={local.session.userMessages()}>
                                 {(message) => {
                                   const title = createMemo(() => message.summary?.title)
diff --git a/packages/ui/src/components/diff.css b/packages/ui/src/components/diff.css
new file mode 100644
index 000000000..6f9a0d73d
--- /dev/null
+++ b/packages/ui/src/components/diff.css
@@ -0,0 +1,24 @@
+[data-component="diff"] {
+  [data-slot="diff-hunk-separator-line-number"] {
+    position: sticky;
+    left: 0;
+    background-color: hsla(209, 96%, 90%, 1);
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    [data-slot="diff-hunk-separator-line-number-icon"] {
+      aspect-ratio: 1;
+      width: 24px;
+      height: 24px;
+    }
+  }
+  [data-slot="diff-hunk-separator-content"] {
+    position: sticky;
+    background-color: hsla(210, 100%, 96%, 1);
+    width: var(--pjs-column-content-width);
+    left: var(--pjs-column-number-width);
+    padding-left: 8px;
+  }
+}
diff --git a/packages/desktop/src/components/diff.tsx b/packages/ui/src/components/diff.tsx
index c39ad852e..88215bcb0 100644
--- a/packages/desktop/src/components/diff.tsx
+++ b/packages/ui/src/components/diff.tsx
@@ -97,24 +97,19 @@ export function Diff<T>(props: DiffProps<T>) {
       //
       // 'simple':
       // Just a subtle bar separator between each hunk
-      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
-      // },
+      // hunkSeparators: "line-info",
+      hunkSeparators(hunkData: HunkData) {
+        const fragment = document.createDocumentFragment()
+        const numCol = document.createElement("div")
+        numCol.innerHTML = `<svg data-slot="diff-hunk-separator-line-number-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.97978 14.0204L8.62623 13.6668L9.33334 12.9597L9.68689 13.3133L9.33333 13.6668L8.97978 14.0204ZM12 16.3335L12.3535 16.6871L12 17.0406L11.6464 16.687L12 16.3335ZM14.3131 13.3133L14.6667 12.9597L15.3738 13.6668L15.0202 14.0204L14.6667 13.6668L14.3131 13.3133ZM12.5 16.0002V16.5002H11.5V16.0002H12H12.5ZM9.33333 13.6668L9.68689 13.3133L12.3535 15.9799L12 16.3335L11.6464 16.687L8.97978 14.0204L9.33333 13.6668ZM12 16.3335L11.6464 15.9799L14.3131 13.3133L14.6667 13.6668L15.0202 14.0204L12.3535 16.6871L12 16.3335ZM6.5 8.00016V7.50016H8.5V8.00016V8.50016H6.5V8.00016ZM9.5 8.00016V7.50016H11.5V8.00016V8.50016H9.5V8.00016ZM12.5 8.00016V7.50016H14.5V8.00016V8.50016H12.5V8.00016ZM15.5 8.00016V7.50016H17.5V8.00016V8.50016H15.5V8.00016ZM12 10.5002H12.5V16.0002H12H11.5V10.5002H12Z" fill="currentColor"/></svg> `
+        numCol.dataset["slot"] = "diff-hunk-separator-line-number"
+        fragment.appendChild(numCol)
+        const contentCol = document.createElement("div")
+        contentCol.textContent = `${hunkData.lines} unmodified lines`
+        contentCol.dataset["slot"] = "diff-hunk-separator-content"
+        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':
@@ -162,6 +157,7 @@ export function Diff<T>(props: DiffProps<T>) {
 
   return (
     <div
+      data-component="diff"
       style={{
         "--pjs-font-family": "var(--font-family-mono)",
         "--pjs-font-size": "var(--font-size-small)",
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 0024c9e76..16cbb7d95 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -3,6 +3,7 @@ export * from "./button"
 export * from "./checkbox"
 export * from "./collapsible"
 export * from "./dialog"
+export * from "./diff"
 export * from "./icon"
 export * from "./icon-button"
 export * from "./input"
diff --git a/packages/ui/src/styles/colors.css b/packages/ui/src/styles/colors.css
index b0ddf36b7..79877d3cf 100644
--- a/packages/ui/src/styles/colors.css
+++ b/packages/ui/src/styles/colors.css
@@ -1,41 +1,5 @@
 :root {
-  --grey-dark-1: #ffffff;
-  --grey-dark-2: #ffffff;
-  --grey-dark-3: #ffffff;
-  --grey-dark-4: #ffffff;
-  --grey-dark-5: #ffffff;
-  --grey-dark-6: #ffffff;
-  --grey-dark-7: #ffffff;
-  --grey-dark-8: #ffffff;
-  --grey-dark-9: #ffffff;
-  --grey-dark-10: #ffffff;
-  --grey-dark-11: #ffffff;
-  --grey-dark-12: #ffffff;
-  --grey-light-1: #ffffff;
-  --grey-dark-alpha-1: #ffffff;
-  --grey-dark-alpha-2: #ffffff;
-  --grey-dark-alpha-3: #ffffff;
-  --grey-dark-alpha-4: #ffffff;
-  --grey-dark-alpha-5: #ffffff;
-  --grey-dark-alpha-6: #ffffff;
-  --grey-dark-alpha-7: #ffffff;
-  --grey-dark-alpha-8: #ffffff;
-  --grey-dark-alpha-9: #ffffff;
-  --grey-dark-alpha-10: #ffffff;
-  --grey-dark-alpha-11: #ffffff;
-  --grey-dark-alpha-12: #ffffff;
   --smoke-dark-1: #131010;
-  --grey-light-2: #ffffff;
-  --grey-light-3: #ffffff;
-  --grey-light-4: #ffffff;
-  --grey-light-5: #ffffff;
-  --grey-light-6: #ffffff;
-  --grey-light-7: #ffffff;
-  --grey-light-8: #ffffff;
-  --grey-light-9: #ffffff;
-  --grey-light-10: #ffffff;
-  --grey-light-11: #ffffff;
-  --grey-light-12: #ffffff;
   --smoke-dark-2: #1b1818;
   --smoke-dark-3: #252121;
   --smoke-dark-4: #2d2828;
@@ -59,19 +23,19 @@
   --smoke-light-10: #848181;
   --smoke-light-11: #656363;
   --smoke-light-12: #211e1e;
-  --smoke-dark-alpha-1: #bb000003;
-  --smoke-dark-alpha-2: #f9b4b40b;
-  --smoke-dark-alpha-3: #f9caca16;
-  --smoke-dark-alpha-4: #ffd5d51e;
-  --smoke-dark-alpha-5: #fce2e226;
-  --smoke-dark-alpha-6: #fce2e231;
-  --smoke-dark-alpha-7: #fce8e83f;
-  --smoke-dark-alpha-8: #fff1f159;
-  --smoke-dark-alpha-9: #fff3f067;
-  --smoke-dark-alpha-10: #fff2f276;
-  --smoke-dark-alpha-11: #fff7f7b2;
+  --smoke-dark-alpha-1: #82383803;
+  --smoke-dark-alpha-2: #e6c6c60b;
+  --smoke-dark-alpha-3: #edd5d516;
+  --smoke-dark-alpha-4: #f2e1e11e;
+  --smoke-dark-alpha-5: #f5e8e826;
+  --smoke-dark-alpha-6: #f5e8e831;
+  --smoke-dark-alpha-7: #f7ecec3f;
+  --smoke-dark-alpha-8: #faf5f559;
+  --smoke-dark-alpha-9: #faf5f467;
+  --smoke-dark-alpha-10: #fbf5f576;
+  --smoke-dark-alpha-11: #fcf9f9b2;
   --smoke-light-alpha-1: #55000003;
-  --smoke-dark-alpha-12: #fffafaf0;
+  --smoke-dark-alpha-12: #fdfbfbf0;
   --smoke-light-alpha-2: #25000007;
   --smoke-light-alpha-3: #1100000f;
   --smoke-light-alpha-4: #0c000017;
@@ -149,8 +113,8 @@
   --cobalt-light-4: #daeaff;
   --cobalt-light-5: #c8e0ff;
   --cobalt-light-6: #b4d2ff;
-  --cobalt-light-7: #98bfff;
   --cobalt-dark-alpha-1: #0011f211;
+  --cobalt-light-7: #98bfff;
   --cobalt-dark-alpha-2: #0048fe1c;
   --cobalt-dark-alpha-3: #004dff49;
   --cobalt-dark-alpha-4: #064dfd6b;
@@ -161,8 +125,8 @@
   --cobalt-dark-alpha-9: #034cff;
   --cobalt-dark-alpha-10: #003bffed;
   --cobalt-dark-alpha-11: #89b5ff;
-  --cobalt-dark-alpha-12: #cde2ff;
   --cobalt-light-8: #73a4ff;
+  --cobalt-dark-alpha-12: #cde2ff;
   --cobalt-light-9: #034cff;
   --cobalt-light-10: #0443de;
   --cobalt-light-11: #1251ec;
@@ -481,16 +445,4 @@
   --mint-light-alpha-10: #0cc7006c;
   --mint-light-alpha-11: #016800cf;
   --mint-light-alpha-12: #022e00e2;
-  --grey-light-alpha-1: #ffffff;
-  --grey-light-alpha-2: #ffffff;
-  --grey-light-alpha-3: #ffffff;
-  --grey-light-alpha-4: #ffffff;
-  --grey-light-alpha-5: #ffffff;
-  --grey-light-alpha-6: #ffffff;
-  --grey-light-alpha-7: #ffffff;
-  --grey-light-alpha-8: #ffffff;
-  --grey-light-alpha-9: #ffffff;
-  --grey-light-alpha-10: #ffffff;
-  --grey-light-alpha-11: #ffffff;
-  --grey-light-alpha-12: #ffffff;
 }
diff --git a/packages/ui/src/styles/index.css b/packages/ui/src/styles/index.css
index 7ae6b73e4..94fa894d4 100644
--- a/packages/ui/src/styles/index.css
+++ b/packages/ui/src/styles/index.css
@@ -8,6 +8,7 @@
 @import "../components/accordion.css" layer(components);
 @import "../components/button.css" layer(components);
 @import "../components/checkbox.css" layer(components);
+@import "../components/diff.css" layer(components);
 @import "../components/collapsible.css" layer(components);
 @import "../components/dialog.css" layer(components);
 @import "../components/icon.css" layer(components);