Redesign chat tool-response UI on a unified design system

.storybook/main.ts

@@ -0,0 +1,13 @@
+import type { StorybookConfig } from "@storybook/nextjs-vite";
+
+const config: StorybookConfig = {
+  stories: ["../components/**/*.stories.@(ts|tsx)"],
+  addons: [],
+  framework: {
+    name: "@storybook/nextjs-vite",
+    options: {},
+  },
+  staticDirs: ["../public"],
+};
+
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from "react";
+import type { Preview } from "@storybook/nextjs-vite";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { StoryBoundary } from "../components/VercelChat/tools/__stories__/StoryBoundary";
+import "../app/globals.css";
+
+/**
+ * Per-story wrapper: a fresh QueryClient (so cache never leaks between stories)
+ * plus the app's real `.dark` class toggle driven by the toolbar.
+ */
+function StoryWrapper({
+  theme,
+  children,
+}: {
+  theme: string;
+  children: React.ReactNode;
+}) {
+  // useState initializer runs once per story mount → isolated cache per story.
+  const [queryClient] = useState(
+    () => new QueryClient({ defaultOptions: { queries: { retry: false } } }),
+  );
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.toggle("dark", theme === "dark");
+    root.style.colorScheme = theme;
+  }, [theme]);
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}
+
+const preview: Preview = {
+  parameters: {
+    layout: "padded",
+    controls: { expanded: true },
+    backgrounds: { disable: true },
+  },
+  globalTypes: {
+    theme: {
+      description: "Color theme",
+      defaultValue: "light",
+      toolbar: {
+        title: "Theme",
+        icon: "circlehollow",
+        items: [
+          { value: "light", title: "Light", icon: "sun" },
+          { value: "dark", title: "Dark", icon: "moon" },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+  decorators: [
+    (Story, context) => (
+      <StoryWrapper theme={context.globals.theme}>
+        <div className="bg-background p-6 text-foreground">
+          <StoryBoundary label={context.title || "Story"}>
+            <Story />
+          </StoryBoundary>
+        </div>
+      </StoryWrapper>
+    ),
+  ],
+};
+
+export default preview;

components/VercelChat/MessageParts.tsx

@@ -10,7 +10,9 @@ import { Dispatch, SetStateAction } from "react";
 import { cn } from "@/lib/utils";
 import ViewingMessage from "./ViewingMessage";
 import EditingMessage from "./EditingMessage";
-import { getToolCallComponent, getToolResultComponent } from "./ToolComponents";
+import { getToolCallComponent } from "./getToolCallComponent";
+import { getToolResultComponent } from "./getToolResultComponent";
+import { getToolErrorComponent } from "./getToolErrorComponent";
 import MessageFileViewer from "./message-file-viewer";
 import { EnhancedReasoning } from "@/components/reasoning/EnhancedReasoning";
 import { Actions, Action } from "@/components/actions";
@@ -25,7 +27,11 @@ interface MessagePartsProps {
 }
 
 export function MessageParts({ message, mode, setMode }: MessagePartsProps) {
-  const { status, reload } = useVercelChatContext();
+  const { status, reload, messages } = useVercelChatContext();
+  // `reload()` regenerates the latest assistant turn, so a tool-error retry
+  // only makes sense on the most recent message — older historical tool
+  // failures would otherwise regenerate the wrong turn.
+  const isLatestMessage = messages[messages.length - 1]?.id === message.id;
   return (
     <div className={cn("flex flex-col gap-4 w-full group")}>
       {message.parts?.map(
@@ -107,7 +113,14 @@ export function MessageParts({ message, mode, setMode }: MessagePartsProps) {
 
           if (isToolOrDynamicToolUIPart(part)) {
             const { state } = part as ToolUIPart;
-            if (state !== "output-available") {
+            if (state === "output-error") {
+              return getToolErrorComponent(
+                part as ToolUIPart,
+                isLatestMessage && status !== "streaming"
+                  ? () => reload()
+                  : undefined,
+              );
+            } else if (state !== "output-available") {
               return getToolCallComponent(part as ToolUIPart);
             } else {
               return getToolResultComponent(part as ToolUIPart);

components/VercelChat/getToolCallComponent.tsx

@@ -0,0 +1,25 @@
+import { ToolUIPart, getToolOrDynamicToolName, DynamicToolUIPart } from "ai";
+import GenericToolCard from "./tools/GenericToolCard";
+import { TOOL_CALL_SKELETONS } from "./toolCallSkeletons";
+
+/**
+ * Renders the loading state for an in-flight tool call: a bespoke skeleton when
+ * the tool has one (see TOOL_CALL_SKELETONS), otherwise the generic tool card,
+ * which explains the step in plain English and echoes its input so repeated
+ * calls read as distinct, intentional steps (not a frozen loop).
+ */
+export function getToolCallComponent(part: ToolUIPart | DynamicToolUIPart) {
+  const { toolCallId } = part;
+  const toolName = getToolOrDynamicToolName(part);
+  const skeleton = TOOL_CALL_SKELETONS[toolName];
+  if (skeleton) return <div key={toolCallId}>{skeleton}</div>;
+  return (
+    <div key={toolCallId}>
+      <GenericToolCard
+        name={toolName}
+        input={(part as { input?: unknown }).input}
+        state="loading"
+      />
+    </div>
+  );
+}

components/VercelChat/getToolErrorComponent.tsx

@@ -0,0 +1,22 @@
+import { ToolUIPart, getToolOrDynamicToolName, DynamicToolUIPart } from "ai";
+import { ToolError } from "./tools/shared/ToolError";
+
+/**
+ * Unified error surface for any tool that resolves to `output-error`.
+ * Without this, failed tools fell through to the loading skeleton and
+ * appeared to hang forever.
+ */
+export function getToolErrorComponent(
+  part: ToolUIPart | DynamicToolUIPart,
+  onRetry?: () => void,
+) {
+  const { toolCallId } = part;
+  const toolName = getToolOrDynamicToolName(part);
+  // `errorText` is a runtime-populated field not yet in ToolUIPart's public type.
+  const errorText = (part as { errorText?: string }).errorText;
+  return (
+    <div key={toolCallId}>
+      <ToolError title={toolName} message={errorText} onRetry={onRetry} />
+    </div>
+  );
+}