diff --git a/bun.lock b/bun.lock
index bb1d6567..c651e3a6 100644
--- a/bun.lock
+++ b/bun.lock
@@ -347,7 +347,7 @@
     "@hono/zod-validator": "0.4.2",
     "@kobalte/core": "0.13.11",
     "@openauthjs/openauth": "0.0.0-20250322224806",
-    "@pierre/precision-diffs": "0.3.6",
+    "@pierre/precision-diffs": "0.4.1",
     "@solidjs/meta": "0.29.4",
     "@tailwindcss/vite": "4.1.11",
     "@tsconfig/bun": "1.0.9",
@@ -941,7 +941,7 @@
 
     "@petamoriken/float16": ["@petamoriken/float16@3.9.2", "", {}, "sha512-VgffxawQde93xKxT3qap3OH+meZf7VaSB5Sqd4Rqc+FP5alWbpOyan/7tRbOAvynjpG3GpdtAuGU/NdhQpmrog=="],
 
-    "@pierre/precision-diffs": ["@pierre/precision-diffs@0.3.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=="],
+    "@pierre/precision-diffs": ["@pierre/precision-diffs@0.4.1", "", { "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-AoozHakINGyNJFgbYc/1PlDK0yunrAxbtXEMBe9fdu8RLkNjVtYRTLw7EF2mM/YuVoVRjj2HT/2VJ4a2rMyDOA=="],
 
     "@pkgjs/parseargs": ["@pkgjs/parseargs@0.11.0", "", {}, "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="],
 
diff --git a/package.json b/package.json
index 32e974f5..2a0c07d8 100644
--- a/package.json
+++ b/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.6",
+      "@pierre/precision-diffs": "0.4.1",
       "@solidjs/meta": "0.29.4",
       "@tailwindcss/vite": "4.1.11",
       "diff": "8.0.2",
diff --git a/packages/desktop/src/components/message.tsx b/packages/desktop/src/components/message.tsx
index 78be29d7..70d03591 100644
--- a/packages/desktop/src/components/message.tsx
+++ b/packages/desktop/src/components/message.tsx
@@ -15,7 +15,7 @@ registerPartComponent("text", function TextPartDisplay(props) {
   const part = props.part as TextPart
   return (
     <Show when={part.text.trim()}>
-      <Markdown text={part.text.trim()} />
+      <Markdown text={part.text.trim()} class="mt-8" />
     </Show>
   )
 })
@@ -36,36 +36,41 @@ registerPartComponent("tool", function ToolPartDisplay(props) {
     const metadata = part.state.status === "pending" ? {} : (part.state.metadata ?? {})
     const input = part.state.status === "completed" ? part.state.input : {}
 
-    if (part.state.status === "error") {
-      const error = part.state.error.replace("Error: ", "")
-      const [title, ...rest] = error.split(": ")
-      return (
-        <Card variant="error">
-          <div class="flex items-center gap-2">
-            <Icon name="circle-ban-sign" size="small" class="text-icon-critical-active" />
-            <Switch>
-              <Match when={title}>
-                <div class="flex items-center gap-2">
-                  <div class="text-12-medium text-[var(--ember-light-11)] capitalize">{title}</div>
-                  <span>{rest.join(": ")}</span>
-                </div>
-              </Match>
-              <Match when={true}>{error}</Match>
-            </Switch>
-          </div>
-        </Card>
-      )
-    }
-
     return (
-      <Dynamic
-        component={render}
-        input={input}
-        tool={part.tool}
-        metadata={metadata}
-        output={part.state.status === "completed" ? part.state.output : undefined}
-        hideDetails={props.hideDetails}
-      />
+      <Switch>
+        <Match when={part.state.status === "error" && part.state.error}>
+          {(error) => {
+            const cleaned = error().replace("Error: ", "")
+            const [title, ...rest] = cleaned.split(": ")
+            return (
+              <Card variant="error">
+                <div class="flex items-center gap-2">
+                  <Icon name="circle-ban-sign" size="small" class="text-icon-critical-active" />
+                  <Switch>
+                    <Match when={title}>
+                      <div class="flex items-center gap-2">
+                        <div class="text-12-medium text-[var(--ember-light-11)] capitalize">{title}</div>
+                        <span>{rest.join(": ")}</span>
+                      </div>
+                    </Match>
+                    <Match when={true}>{cleaned}</Match>
+                  </Switch>
+                </div>
+              </Card>
+            )
+          }}
+        </Match>
+        <Match when={true}>
+          <Dynamic
+            component={render}
+            input={input}
+            tool={part.tool}
+            metadata={metadata}
+            output={part.state.status === "completed" ? part.state.output : undefined}
+            hideDetails={props.hideDetails}
+          />
+        </Match>
+      </Switch>
     )
   })
 
diff --git a/packages/desktop/src/pages/index.tsx b/packages/desktop/src/pages/index.tsx
index 1ae39a6b..0ff4423a 100644
--- a/packages/desktop/src/pages/index.tsx
+++ b/packages/desktop/src/pages/index.tsx
@@ -832,7 +832,7 @@ export default function Page() {
                                                 </div>
                                               </Collapsible.Trigger>
                                               <Collapsible.Content>
-                                                <div class="w-full flex flex-col items-start self-stretch gap-8">
+                                                <div class="w-full flex flex-col items-start self-stretch gap-3">
                                                   <For each={assistantMessages()}>
                                                     {(assistantMessage) => {
                                                       const parts = createMemo(
diff --git a/packages/ui/src/components/diff.tsx b/packages/ui/src/components/diff.tsx
index 731b1bfe..36b57c56 100644
--- a/packages/ui/src/components/diff.tsx
+++ b/packages/ui/src/components/diff.tsx
@@ -3,12 +3,12 @@ import {
   FileDiff,
   type DiffLineAnnotation,
   type HunkData,
-  DiffFileRendererOptions,
+  FileDiffOptions,
   // registerCustomTheme,
 } from "@pierre/precision-diffs"
 import { ComponentProps, createEffect, splitProps } from "solid-js"
 
-export type DiffProps<T = {}> = Omit<DiffFileRendererOptions<T>, "themes"> & {
+export type DiffProps<T = {}> = FileDiffOptions<T> & {
   before: FileContents
   after: FileContents
   annotations?: DiffLineAnnotation<T>[]
@@ -54,13 +54,9 @@ export function Diff<T>(props: DiffProps<T>) {
   // When ready to render, simply call .render with old/new file, optional
   // annotations and a container element to hold the diff
   createEffect(() => {
-    // @ts-expect-error
     const instance = new FileDiff<T>({
       // theme: "pierre-light",
-      // theme: "pierre-light",
-      // Or can also provide a 'themes' prop, which allows the code to adapt
-      // to your OS light or dark theme
-      themes: { dark: "pierre-dark", light: "pierre-light" },
+      theme: { dark: "pierre-dark", light: "pierre-light" },
       // When using the 'themes' prop, 'themeType' allows you to force 'dark'
       // or 'light' theme, or inherit from the OS ('system') theme.
       themeType: "system",
diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
index eddd796e..06f5046d 100644
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@@ -55,11 +55,7 @@ export function AssistantMessageDisplay(props: { message: AssistantMessage; part
       return x.type !== "tool" || (x as ToolPart).tool !== "todoread"
     })
   })
-  return (
-    <div data-component="assistant-message">
-      <For each={filteredParts()}>{(part) => <Part part={part} message={props.message} />}</For>
-    </div>
-  )
+  return <For each={filteredParts()}>{(part) => <Part part={part} message={props.message} />}</For>
 }
 
 export function UserMessageDisplay(props: { message: UserMessage; parts: PartType[] }) {