feat(desktop): show write tool output

2 files changed, 44 insertions, 37 deletions

diff --git a/packages/desktop/src/app.tsx b/packages/desktop/src/app.tsx
index 789a8fa2d..be31a594e 100644
--- a/packages/desktop/src/app.tsx
+++ b/packages/desktop/src/app.tsx
@@ -5,7 +5,9 @@ import { MetaProvider } from "@solidjs/meta"
 import { Font } from "@opencode-ai/ui/font"
 import { MarkedProvider } from "@opencode-ai/ui/context/marked"
 import { DiffComponentProvider } from "@opencode-ai/ui/context/diff"
+import { CodeComponentProvider } from "@opencode-ai/ui/context/code"
 import { Diff } from "@opencode-ai/ui/diff"
+import { Code } from "@opencode-ai/ui/code"
 import { GlobalSyncProvider } from "@/context/global-sync"
 import { LayoutProvider } from "@/context/layout"
 import { GlobalSDKProvider } from "@/context/global-sdk"
@@ -39,41 +41,43 @@ export function App() {
     <DialogProvider>
       <MarkedProvider>
         <DiffComponentProvider component={Diff}>
-          <GlobalSDKProvider url={url}>
-            <GlobalSyncProvider>
-              <LayoutProvider>
-                <NotificationProvider>
-                  <MetaProvider>
-                    <Font />
-                    <Router
-                      root={(props) => (
-                        <CommandProvider>
-                          <Layout>{props.children}</Layout>
-                        </CommandProvider>
-                      )}
-                    >
-                      <Route path="/" component={Home} />
-                      <Route path="/:dir" component={DirectoryLayout}>
-                        <Route path="/" component={() => <Navigate href="session" />} />
-                        <Route
-                          path="/session/:id?"
-                          component={(p) => (
-                            <Show when={p.params.id || true} keyed>
-                              <TerminalProvider>
-                                <PromptProvider>
-                                  <Session />
-                                </PromptProvider>
-                              </TerminalProvider>
-                            </Show>
-                          )}
-                        />
-                      </Route>
-                    </Router>
-                  </MetaProvider>
-                </NotificationProvider>
-              </LayoutProvider>
-            </GlobalSyncProvider>
-          </GlobalSDKProvider>
+          <CodeComponentProvider component={Code}>
+            <GlobalSDKProvider url={url}>
+              <GlobalSyncProvider>
+                <LayoutProvider>
+                  <NotificationProvider>
+                    <MetaProvider>
+                      <Font />
+                      <Router
+                        root={(props) => (
+                          <CommandProvider>
+                            <Layout>{props.children}</Layout>
+                          </CommandProvider>
+                        )}
+                      >
+                        <Route path="/" component={Home} />
+                        <Route path="/:dir" component={DirectoryLayout}>
+                          <Route path="/" component={() => <Navigate href="session" />} />
+                          <Route
+                            path="/session/:id?"
+                            component={(p) => (
+                              <Show when={p.params.id || true} keyed>
+                                <TerminalProvider>
+                                  <PromptProvider>
+                                    <Session />
+                                  </PromptProvider>
+                                </TerminalProvider>
+                              </Show>
+                            )}
+                          />
+                        </Route>
+                      </Router>
+                    </MetaProvider>
+                  </NotificationProvider>
+                </LayoutProvider>
+              </GlobalSyncProvider>
+            </GlobalSDKProvider>
+          </CodeComponentProvider>
         </DiffComponentProvider>
       </MarkedProvider>
     </DialogProvider>
diff --git a/packages/desktop/src/pages/session.tsx b/packages/desktop/src/pages/session.tsx
index 390872d36..1b23ad5f2 100644
--- a/packages/desktop/src/pages/session.tsx
+++ b/packages/desktop/src/pages/session.tsx
@@ -1,4 +1,5 @@
 import { For, onCleanup, onMount, Show, Match, Switch, createResource, createMemo, createEffect, on } from "solid-js"
+import { Dynamic } from "solid-js/web"
 import { useLocal, type LocalFile } from "@/context/local"
 import { createStore } from "solid-js/store"
 import { PromptInput } from "@/components/prompt-input"
@@ -11,7 +12,7 @@ import { DiffChanges } from "@opencode-ai/ui/diff-changes"
 import { ProgressCircle } from "@opencode-ai/ui/progress-circle"
 import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { Tabs } from "@opencode-ai/ui/tabs"
-import { Code } from "@opencode-ai/ui/code"
+import { useCodeComponent } from "@opencode-ai/ui/context/code"
 import { SessionTurn } from "@opencode-ai/ui/session-turn"
 import { SessionMessageRail } from "@opencode-ai/ui/session-message-rail"
 import { SessionReview } from "@opencode-ai/ui/session-review"
@@ -48,6 +49,7 @@ export default function Page() {
   const sync = useSync()
   const terminal = useTerminal()
   const dialog = useDialog()
+  const codeComponent = useCodeComponent()
   const command = useCommand()
   const params = useParams()
   const navigate = useNavigate()
@@ -764,7 +766,8 @@ export default function Page() {
                     <Switch>
                       <Match when={file()}>
                         {(f) => (
-                          <Code
+                          <Dynamic
+                            component={codeComponent}
                             file={{
                               name: f().path,
                               contents: f().content?.content ?? "",