🤖 Add tool error examples to ActiveWorkspaceWithChat story

Instead of creating separate story, add tool error examples to the
existing chat story for more realistic context. Shows:
- File read errors (success: false format)
- WRITE DENIED errors (collapsed by default)
- Unknown tool errors (AI SDK error format)

Author: ammar-agent

src/App.stories.tsx

@@ -618,159 +618,35 @@ export const ActiveWorkspaceWithChat: Story = {
                     },
                   });
 
-                  // Mark as caught up
-                  callback({ type: "caught-up" });
-                }, 100);
-
-                return () => {
-                  // Cleanup
-                };
-              },
-              onMetadata: () => () => undefined,
-              sendMessage: () => Promise.resolve({ success: true, data: undefined }),
-              resumeStream: () => Promise.resolve({ success: true, data: undefined }),
-              interruptStream: () => Promise.resolve({ success: true, data: undefined }),
-              truncateHistory: () => Promise.resolve({ success: true, data: undefined }),
-              replaceChatHistory: () => Promise.resolve({ success: true, data: undefined }),
-              getInfo: () => Promise.resolve(null),
-              executeBash: () =>
-                Promise.resolve({
-                  success: true,
-                  data: { success: true, output: "", exitCode: 0, wall_duration_ms: 0 },
-                }),
-            },
-          },
-        });
-
-        // Set initial workspace selection
-        localStorage.setItem(
-          "selectedWorkspace",
-          JSON.stringify({
-            workspaceId: workspaceId,
-            projectPath: "/home/user/projects/my-app",
-            projectName: "my-app",
-            namedWorkspacePath: "/home/user/.cmux/src/my-app/feature",
-          })
-        );
-
-        initialized.current = true;
-      }
-
-      return <AppLoader />;
-    };
-
-    return <AppWithChatMocks />;
-  },
-};
-
-/**
- * Tool Errors Story - Shows both error formats in GenericToolCall
- */
-export const ToolErrorsDisplay: Story = {
-  render: () => {
-    const AppWithToolErrors = () => {
-      const initialized = useRef(false);
-
-      if (!initialized.current) {
-        const workspaceId = "my-app-tool-errors";
-
-        // Setup mock API
-        setupMockAPI({
-          projects: new Map([
-            [
-              "/home/user/projects/my-app",
-              {
-                path: "/home/user/projects/my-app",
-                workspaces: [],
-              },
-            ],
-          ]),
-          workspaces: [
-            {
-              id: workspaceId,
-              name: "tool-errors-demo",
-              projectPath: "/home/user/projects/my-app",
-              projectName: "my-app",
-              namedWorkspacePath: "/home/user/.cmux/src/my-app/tool-errors-demo",
-            },
-          ],
-          apiOverrides: {
-            workspace: {
-              create: () => Promise.resolve({ success: false, error: "Mock" }),
-              list: () => Promise.resolve([]),
-              rename: () => Promise.resolve({ success: false, error: "Mock" }),
-              remove: () => Promise.resolve({ success: false, error: "Mock" }),
-              fork: () => Promise.resolve({ success: false, error: "Mock" }),
-              openTerminal: () => Promise.resolve(undefined),
-              sendMessage: () => Promise.resolve({ success: true, data: undefined }),
-              resumeStream: () => Promise.resolve({ success: true, data: undefined }),
-              interruptStream: () => Promise.resolve({ success: true, data: undefined }),
-              truncateHistory: () => Promise.resolve({ success: true, data: undefined }),
-              replaceChatHistory: () => Promise.resolve({ success: true, data: undefined }),
-              getInfo: () => Promise.resolve(null),
-              executeBash: () =>
-                Promise.resolve({
-                  success: true,
-                  data: { success: true, output: "", exitCode: 0, wall_duration_ms: 0 },
-                }),
-              onMetadata: () => () => undefined,
-              onChat: (workspaceId, callback) => {
-                // Simulate chat history with various tool errors
-                setTimeout(() => {
-                  // User message
+                  // User asking to test error handling
                   callback({
-                    id: "msg-1",
+                    id: "msg-10",
                     role: "user",
-                    parts: [{ type: "text", text: "Try calling some tools" }],
+                    parts: [
+                      {
+                        type: "text",
+                        text: "Can you show me some examples of error handling?",
+                      },
+                    ],
                     metadata: {
-                      historySequence: 1,
-                      timestamp: STABLE_TIMESTAMP - 120000,
+                      historySequence: 10,
+                      timestamp: STABLE_TIMESTAMP - 160000,
                     },
                   });
 
-                  // Assistant response with multiple tool errors
+                  // Assistant response with various tool errors
                   callback({
-                    id: "msg-2",
+                    id: "msg-11",
                     role: "assistant",
                     parts: [
                       {
                         type: "text",
-                        text: "I'll try various tools to demonstrate error handling.",
+                        text: "I'll demonstrate various error scenarios:",
                       },
-                      // Tool error format #1: AI SDK error (tool doesn't exist)
+                      // Tool error format #1: File read error
                       {
                         type: "dynamic-tool",
-                        toolCallId: "call-1",
-                        toolName: "nonexistent_tool",
-                        state: "output-available",
-                        input: {
-                          someParam: "value",
-                        },
-                        output: {
-                          error:
-                            "Tool 'nonexistent_tool' is not available. Available tools: bash, file_read, file_edit_replace_string, file_edit_insert, propose_plan, todo_write, todo_read, web_search",
-                        },
-                      },
-                      // Tool error format #2: Tool implementation error (bash command fails)
-                      {
-                        type: "dynamic-tool",
-                        toolCallId: "call-2",
-                        toolName: "bash",
-                        state: "output-available",
-                        input: {
-                          script: "exit 1",
-                        },
-                        output: {
-                          success: false,
-                          error: "Command exited with code 1",
-                          exitCode: 1,
-                          wall_duration_ms: 42,
-                        },
-                      },
-                      // Tool error format #3: File read error
-                      {
-                        type: "dynamic-tool",
-                        toolCallId: "call-3",
+                        toolCallId: "call-5",
                         toolName: "file_read",
                         state: "output-available",
                         input: {
@@ -781,10 +657,10 @@ export const ToolErrorsDisplay: Story = {
                           error: "ENOENT: no such file or directory, open '/nonexistent/file.txt'",
                         },
                       },
-                      // Tool error format #4: File edit with WRITE DENIED (should be collapsed)
+                      // Tool error format #2: WRITE DENIED (should be collapsed)
                       {
                         type: "dynamic-tool",
-                        toolCallId: "call-4",
+                        toolCallId: "call-6",
                         toolName: "file_edit_replace_string",
                         state: "output-available",
                         input: {
@@ -798,37 +674,52 @@ export const ToolErrorsDisplay: Story = {
                             "WRITE DENIED, FILE UNMODIFIED: File has been modified since it was read. Please re-read the file and try again.",
                         },
                       },
-                      // Tool error format #5: Policy disabled tool
+                      // Tool error format #3: AI SDK error (policy disabled)
                       {
                         type: "dynamic-tool",
-                        toolCallId: "call-5",
-                        toolName: "file_edit_insert",
+                        toolCallId: "call-7",
+                        toolName: "unknown_tool",
                         state: "output-available",
                         input: {
-                          file_path: "src/new.ts",
-                          line_offset: 0,
-                          content: "console.log('test');",
+                          someParam: "value",
                         },
                         output: {
                           error:
-                            "Tool execution skipped because the requested tool is disabled by policy.",
+                            "Tool 'unknown_tool' is not available. Available tools: bash, file_read, file_edit_replace_string",
                         },
                       },
                       {
                         type: "text",
-                        text: "As you can see, various tool errors are displayed with clear error messages and 'failed' status.",
+                        text: "As you can see, different error types are displayed with clear indicators and appropriate styling.",
                       },
                     ],
                     metadata: {
-                      historySequence: 2,
-                      timestamp: STABLE_TIMESTAMP - 110000,
-                      model: "anthropic:claude-sonnet-4-20250514",
+                      historySequence: 11,
+                      timestamp: STABLE_TIMESTAMP - 150000,
+                      model: "claude-sonnet-4-20250514",
                     },
                   });
+
+                  // Mark as caught up
+                  callback({ type: "caught-up" });
                 }, 100);
 
-                return () => undefined;
+                return () => {
+                  // Cleanup
+                };
               },
+              onMetadata: () => () => undefined,
+              sendMessage: () => Promise.resolve({ success: true, data: undefined }),
+              resumeStream: () => Promise.resolve({ success: true, data: undefined }),
+              interruptStream: () => Promise.resolve({ success: true, data: undefined }),
+              truncateHistory: () => Promise.resolve({ success: true, data: undefined }),
+              replaceChatHistory: () => Promise.resolve({ success: true, data: undefined }),
+              getInfo: () => Promise.resolve(null),
+              executeBash: () =>
+                Promise.resolve({
+                  success: true,
+                  data: { success: true, output: "", exitCode: 0, wall_duration_ms: 0 },
+                }),
             },
           },
         });
@@ -840,7 +731,7 @@ export const ToolErrorsDisplay: Story = {
             workspaceId: workspaceId,
             projectPath: "/home/user/projects/my-app",
             projectName: "my-app",
-            namedWorkspacePath: "/home/user/.cmux/src/my-app/tool-errors-demo",
+            namedWorkspacePath: "/home/user/.cmux/src/my-app/feature",
           })
         );
 
@@ -850,6 +741,7 @@ export const ToolErrorsDisplay: Story = {
       return <AppLoader />;
     };
 
-    return <AppWithToolErrors />;
+    return <AppWithChatMocks />;
   },
 };
+