sync

packages/web/src/components/DiffView.tsx

@@ -1,5 +1,5 @@
-import { type Component, createSignal, onMount } from "solid-js"
-import { diffLines } from "diff"
+import { type Component, createMemo, createSignal, onMount } from "solid-js"
+import { diffLines, type ChangeObject } from "diff"
 import CodeBlock from "./CodeBlock"
 import styles from "./diffview.module.css"
 
@@ -10,33 +10,29 @@ type DiffRow = {
 }
 
 interface DiffViewProps {
-  oldCode: string
-  newCode: string
+  changes: ChangeObject<string>[]
   lang?: string
   class?: string
 }
 
 const DiffView: Component<DiffViewProps> = (props) => {
-  const [rows, setRows] = createSignal<DiffRow[]>([])
-
-  onMount(() => {
-    const chunks = diffLines(props.oldCode, props.newCode)
+  const rows = createMemo(() => {
     const diffRows: DiffRow[] = []
 
-    for (const chunk of chunks) {
-      const lines = chunk.value.split(/\r?\n/)
+    for (const item of props.changes) {
+      const lines = item.value.split(/\r?\n/)
       if (lines.at(-1) === "") lines.pop()
 
       for (const line of lines) {
         diffRows.push({
-          left: chunk.removed ? line : chunk.added ? "" : line,
-          right: chunk.added ? line : chunk.removed ? "" : line,
-          type: chunk.added ? "added" : chunk.removed ? "removed" : "unchanged",
+          left: item.removed ? line : item.added ? "" : line,
+          right: item.added ? line : item.removed ? "" : line,
+          type: item.added ? "added" : item.removed ? "removed" : "unchanged",
         })
       }
     }
 
-    setRows(diffRows)
+    return diffRows
   })
 
   return (

packages/web/src/components/Share.tsx

@@ -53,7 +53,7 @@ type SessionMessage = UIMessage<{
   tool: Record<
     string,
     {
-      properties: Record<string, any>
+      [key: string]: any
       time: {
         start: number
         end: number
@@ -596,11 +596,12 @@ export default function Share(props: { api: string }) {
                           when={
                             msg.role === "assistant" &&
                             part.type === "tool-invocation" &&
-                            part.toolInvocation.toolName === "edit" &&
+                            part.toolInvocation.toolName === "opencode_edit" &&
                             part
                           }
                         >
                           {(part) => {
+                            const metadata = createMemo(() => msg.metadata?.tool[part().toolInvocation.toolCallId])
                             const args = part().toolInvocation.args
                             const filePath = args.filePath
                             return (
@@ -622,8 +623,7 @@ export default function Share(props: { api: string }) {
                                     <div data-part-tool-edit>
                                       <DiffView
                                         class={styles["code-block"]}
-                                        oldCode={args.oldString}
-                                        newCode={args.newString}
+                                        changes={metadata()?.changes || []}
                                         lang={getFileType(filePath)}
                                       />
                                     </div>
@@ -680,7 +680,7 @@ export default function Share(props: { api: string }) {
                                     <Match
                                       when={
                                         part().toolInvocation.state ===
-                                          "result" &&
+                                        "result" &&
                                         part().toolInvocation.result
                                       }
                                     >