6 files changed, 77 insertions, 2 deletions
diff --git a/packages/desktop/src/components/message.tsx b/packages/desktop/src/components/message.tsx
index 9e9e06d35..78be29d75 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 000000000..a9b7c8784
--- /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 000000000..3fb225ab2
--- /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 5736146e5..a2e127290 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 63be24d58..29e8cfe3b 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 9742caa0a..4fe13055a 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);