feat(ui): restyle Card and improve tool error cards (#16888)

Co-authored-by: Adam <2363879+adamdotdevin@users.noreply.github.com>

packages/ui/src/components/tool-error-card.stories.tsx

@@ -0,0 +1,96 @@
+// @ts-nocheck
+import { ToolErrorCard } from "./tool-error-card"
+
+const docs = `### Overview
+Tool call failure summary styled like a tool trigger.
+
+### API
+- Required: \`tool\` (tool id, e.g. apply_patch, bash)
+- Required: \`error\` (error string)
+
+### Behavior
+- Collapsible; click header to expand/collapse.
+`
+
+const samples = [
+  {
+    tool: "apply_patch",
+    error:
+      "apply_patch verification failed: Failed to find expected lines in /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/session-turn.tsx",
+  },
+  {
+    tool: "bash",
+    error: "bash Command failed: exit code 1: bun test --watch",
+  },
+  {
+    tool: "read",
+    error:
+      "read File not found: /Users/davidhill/Documents/Local/opencode/packages/ui/src/components/does-not-exist.tsx",
+  },
+  {
+    tool: "glob",
+    error: "glob Pattern error: Invalid glob pattern: **/*[",
+  },
+  {
+    tool: "grep",
+    error: "grep Regex error: Invalid regular expression: (unterminated group",
+  },
+  {
+    tool: "webfetch",
+    error: "webfetch Request failed: 502 Bad Gateway",
+  },
+  {
+    tool: "websearch",
+    error: "websearch Rate limited: Please try again in 30 seconds",
+  },
+  {
+    tool: "codesearch",
+    error: "codesearch Timeout: exceeded 120s",
+  },
+  {
+    tool: "question",
+    error: "question Dismissed: user dismissed this question",
+  },
+]
+
+export default {
+  title: "UI/ToolErrorCard",
+  id: "components-tool-error-card",
+  component: ToolErrorCard,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+  args: {
+    tool: "apply_patch",
+    error: samples[0].error,
+  },
+  argTypes: {
+    tool: {
+      control: "select",
+      options: ["apply_patch", "bash", "read", "glob", "grep", "webfetch", "websearch", "codesearch", "question"],
+    },
+    error: {
+      control: "text",
+    },
+  },
+  render: (props: { tool: string; error: string }) => {
+    return <ToolErrorCard tool={props.tool} error={props.error} />
+  },
+}
+
+export const All = {
+  render: () => {
+    return (
+      <div style="display: flex; flex-direction: column; gap: 12px; max-width: 720px;">
+        {samples.map((item) => (
+          <ToolErrorCard tool={item.tool} error={item.error} />
+        ))}
+      </div>
+    )
+  },
+}