feat(desktop): show write tool output

3 files changed, 35 insertions, 25 deletions

diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
index 33b519ea4..b838bebc2 100644
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@@ -11,6 +11,7 @@ import {
 } from "@opencode-ai/sdk/v2"
 import { useData } from "../context"
 import { useDiffComponent } from "../context/diff"
+import { useCodeComponent } from "../context/code"
 import { BasicTool } from "./basic-tool"
 import { GenericTool } from "./basic-tool"
 import { Card } from "./card"
@@ -19,6 +20,7 @@ import { Checkbox } from "./checkbox"
 import { DiffChanges } from "./diff-changes"
 import { Markdown } from "./markdown"
 import { getDirectory as _getDirectory, getFilename } from "@opencode-ai/util/path"
+import { checksum } from "@opencode-ai/util/encode"
 
 export interface MessageProps {
   message: MessageType
@@ -488,9 +490,10 @@ ToolRegistry.register({
 ToolRegistry.register({
   name: "write",
   render(props) {
-    console.log(props)
+    const codeComponent = useCodeComponent()
     return (
       <BasicTool
+        defaultOpen
         icon="code-lines"
         trigger={
           <div data-component="write-trigger">
@@ -507,19 +510,19 @@ ToolRegistry.register({
           </div>
         }
       >
-        {/* <Show when={props.input.content}> */}
-        {/*   <div data-component="write-content"> */}
-        {/*     <Code */}
-        {/*       file={{ */}
-        {/*         name: props.input.filePath, */}
-        {/*         contents: props.input.content, */}
-        {/*         cacheKey: checksum(props.input.content), */}
-        {/*       }} */}
-        {/*       overflow="scroll" */}
-        {/*       class="pb-40" */}
-        {/*     /> */}
-        {/*   </div> */}
-        {/* </Show> */}
+        <Show when={props.input.content}>
+          <div data-component="write-content">
+            <Dynamic
+              component={codeComponent}
+              file={{
+                name: props.input.filePath,
+                contents: props.input.content,
+                cacheKey: checksum(props.input.content),
+              }}
+              overflow="scroll"
+            />
+          </div>
+        </Show>
       </BasicTool>
     )
   },
diff --git a/packages/ui/src/context/code.tsx b/packages/ui/src/context/code.tsx
new file mode 100644
index 000000000..3a2511527
--- /dev/null
+++ b/packages/ui/src/context/code.tsx
@@ -0,0 +1,10 @@
+import type { ValidComponent } from "solid-js"
+import { createSimpleContext } from "./helper"
+
+const ctx = createSimpleContext<ValidComponent, { component: ValidComponent }>({
+  name: "CodeComponent",
+  init: (props) => props.component,
+})
+
+export const CodeComponentProvider = ctx.provider
+export const useCodeComponent = ctx.use
diff --git a/packages/ui/src/context/diff.tsx b/packages/ui/src/context/diff.tsx
index 630437de6..747de9cc8 100644
--- a/packages/ui/src/context/diff.tsx
+++ b/packages/ui/src/context/diff.tsx
@@ -1,13 +1,10 @@
-import { createContext, useContext, type ParentProps, type ValidComponent } from "solid-js"
+import type { ValidComponent } from "solid-js"
+import { createSimpleContext } from "./helper"
 
-const DiffComponentContext = createContext<ValidComponent>()
+const ctx = createSimpleContext<ValidComponent, { component: ValidComponent }>({
+  name: "DiffComponent",
+  init: (props) => props.component,
+})
 
-export function DiffComponentProvider(props: ParentProps<{ component: ValidComponent }>) {
-  return <DiffComponentContext.Provider value={props.component}>{props.children}</DiffComponentContext.Provider>
-}
-
-export function useDiffComponent() {
-  const component = useContext(DiffComponentContext)
-  if (!component) throw new Error("DiffComponentProvider must be used to provide a diff component")
-  return component
-}
+export const DiffComponentProvider = ctx.provider
+export const useDiffComponent = ctx.use