FIX: Add Troubleshoot Button to Error Messages (#53)

* fix: add troubleshoot button to error messages

Add a "Troubleshoot this" button inside error alerts that sends
the error message to AI for troubleshooting assistance. The button
only appears for actual errors (not warnings or credit errors).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* fix: add text guard to prevent undefined error in troubleshoot button

Prevent button from rendering when socketError is a plain string,
which would result in text being undefined.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* fix: move troubleshoot button inside message to keep alert layout consistent

Embedding the button in the message prop instead of description
prevents Ant Design Alert from switching to the expanded layout
for errors only.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: tahierhussain

frontend/src/ide/chat-ai/Conversation.jsx

@@ -32,6 +32,15 @@ const Conversation = memo(function Conversation({
     setDetectedAction(actionType);
   }, []);
 
+  // Handle troubleshoot button click from error messages
+  const handleTroubleshoot = useCallback(
+    (errorMessage) => {
+      const prompt = `There was an error encountered. We have the detailed error message below. Please see how we can fix this:\n\n${errorMessage}`;
+      savePrompt(prompt, selectedChatIntent);
+    },
+    [savePrompt, selectedChatIntent]
+  );
+
   // Create UI action object based on detected action
   const uiAction = useMemo(() => {
     if (!detectedAction) return null;
@@ -168,7 +177,7 @@ const Conversation = memo(function Conversation({
           socketError={message?.error_msg}
           promptError={message?.prompt_error_message}
           transformError={message?.transformation_error_message}
-          errorState={message?.error_state}
+          onTroubleshoot={handleTroubleshoot}
         />
       </Space>
       {isLastConversation ? <div className="pad-12" /> : <Divider />}

frontend/src/ide/chat-ai/DisplayErrorMessages.jsx

@@ -1,6 +1,7 @@
 import { memo, useMemo } from "react";
 import PropTypes from "prop-types";
-import { Alert, Space } from "antd";
+import { Alert, Button, Space } from "antd";
+import { ToolOutlined } from "@ant-design/icons";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
@@ -16,6 +17,7 @@ const DisplayErrorMessages = memo(function DisplayErrorMessages({
   socketError,
   promptError,
   transformError,
+  onTroubleshoot,
 }) {
   const errors = useMemo(() => {
     const list = [];
@@ -49,6 +51,17 @@ const DisplayErrorMessages = memo(function DisplayErrorMessages({
                   <ReactMarkdown remarkPlugins={[remarkGfm]}>
                     {text}
                   </ReactMarkdown>
+                  {!showAsWarning && onTroubleshoot && text && (
+                    <Button
+                      type="link"
+                      size="small"
+                      icon={<ToolOutlined />}
+                      onClick={() => onTroubleshoot(text)}
+                      style={{ padding: 0, marginTop: 8 }}
+                    >
+                      Troubleshoot this
+                    </Button>
+                  )}
                 </div>
               }
               type={showAsWarning ? "warning" : "error"}
@@ -77,12 +90,14 @@ DisplayErrorMessages.propTypes = {
   transformError: PropTypes.shape({
     error_message: PropTypes.string,
   }),
+  onTroubleshoot: PropTypes.func,
 };
 
 DisplayErrorMessages.defaultProps = {
   socketError: null,
   promptError: null,
   transformError: null,
+  onTroubleshoot: null,
 };
 
 export { DisplayErrorMessages };