diff --git a/packages/desktop/src/components/message.tsx b/packages/desktop/src/components/message.tsx
index 9e9e06d3..78be29d7 100644
--- a/packages/desktop/src/components/message.tsx
+++ b/packages/desktop/src/components/message.tsx
@@ -1,8 +1,8 @@
 import type { Part, TextPart, ToolPart, Message } from "@opencode-ai/sdk"
-import { createMemo, For, Show } from "solid-js"
+import { createMemo, For, Match, Show, Switch } from "solid-js"
 import { Dynamic } from "solid-js/web"
 import { Markdown } from "./markdown"
-import { Checkbox, Diff, Icon } from "@opencode-ai/ui"
+import { Card, Checkbox, Diff, Icon } from "@opencode-ai/ui"
 import { Message as MessageDisplay, registerPartComponent } from "@opencode-ai/ui"
 import { BasicTool, GenericTool, ToolRegistry, DiffChanges } from "@opencode-ai/ui"
 import { getDirectory, getFilename } from "@/utils"
@@ -36,6 +36,27 @@ 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}
diff --git a/packages/ui/src/components/card.css b/packages/ui/src/components/card.css
new file mode 100644
index 00000000..a9b7c878
--- /dev/null
+++ b/packages/ui/src/components/card.css
@@ -0,0 +1,29 @@
+[data-component="card"] {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--surface-inset-base);
+  border: 1px solid var(--border-weaker-base);
+  transition: background-color 0.15s ease;
+  border-radius: 8px;
+  padding: 6px 12px;
+  overflow: clip;
+
+  &[data-variant="error"] {
+    background-color: var(--surface-critical-weak);
+    border: 1px solid var(--border-critical-base);
+    color: rgba(218, 51, 25, 0.6);
+
+    /* text-12-regular */
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-large); /* 166.667% */
+    letter-spacing: var(--letter-spacing-normal);
+
+    &[data-component="icon"] {
+      color: var(--icon-critical-active);
+    }
+  }
+}
diff --git a/packages/ui/src/components/card.tsx b/packages/ui/src/components/card.tsx
new file mode 100644
index 00000000..3fb225ab
--- /dev/null
+++ b/packages/ui/src/components/card.tsx
@@ -0,0 +1,22 @@
+import { type ComponentProps, splitProps } from "solid-js"
+
+export interface CardProps extends ComponentProps<"div"> {
+  variant?: "normal" | "error" | "warning" | "success" | "info"
+}
+
+export function Card(props: CardProps) {
+  const [split, rest] = splitProps(props, ["variant", "class", "classList"])
+  return (
+    <div
+      {...rest}
+      data-component="card"
+      data-variant={split.variant || "normal"}
+      classList={{
+        ...(split.classList ?? {}),
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {props.children}
+    </div>
+  )
+}
diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx
index 5736146e..a2e12729 100644
--- a/packages/ui/src/components/icon.tsx
+++ b/packages/ui/src/components/icon.tsx
@@ -149,6 +149,7 @@ const newIcons = {
   console: `<path d="M3.75 5.4165L8.33333 9.99984L3.75 14.5832M10.4167 14.5832H16.25" stroke="currentColor" stroke-linecap="square"/>`,
   "code-lines": `<path d="M2.08325 3.75H11.2499M14.5833 3.75H17.9166M2.08325 10L7.08325 10M10.4166 10L17.9166 10M2.08325 16.25L8.74992 16.25M12.0833 16.25L17.9166 16.25" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/>`,
   "square-arrow-top-right": `<path d="M7.91675 2.9165H2.91675V17.0832H17.0834V12.0832M12.0834 2.9165H17.0834V7.9165M9.58342 10.4165L16.6667 3.33317" stroke="currentColor" stroke-linecap="square"/>`,
+  "circle-ban-sign": `<path d="M15.3675 4.63087L4.55742 15.441M17.9163 9.9987C17.9163 14.371 14.3719 17.9154 9.99967 17.9154C7.81355 17.9154 5.83438 17.0293 4.40175 15.5966C2.96911 14.164 2.08301 12.1848 2.08301 9.9987C2.08301 5.62644 5.62742 2.08203 9.99967 2.08203C12.1858 2.08203 14.165 2.96813 15.5976 4.40077C17.0302 5.8334 17.9163 7.81257 17.9163 9.9987Z" stroke="currentColor" stroke-linecap="round"/>`,
 }
 
 export interface IconProps extends ComponentProps<"svg"> {
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 63be24d5..29e8cfe3 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -1,5 +1,6 @@
 export * from "./accordion"
 export * from "./button"
+export * from "./card"
 export * from "./checkbox"
 export * from "./collapsible"
 export * from "./dialog"
diff --git a/packages/ui/src/styles/index.css b/packages/ui/src/styles/index.css
index 9742caa0..4fe13055 100644
--- a/packages/ui/src/styles/index.css
+++ b/packages/ui/src/styles/index.css
@@ -7,6 +7,7 @@
 
 @import "../components/accordion.css" layer(components);
 @import "../components/button.css" layer(components);
+@import "../components/card.css" layer(components);
 @import "../components/checkbox.css" layer(components);
 @import "../components/diff.css" layer(components);
 @import "../components/diff-changes.css" layer(components);