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>

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 = [];
@@ -53,6 +55,19 @@ const DisplayErrorMessages = memo(function DisplayErrorMessages({
               }
               type={showAsWarning ? "warning" : "error"}
               className="width-100"
+              description={
+                !showAsWarning && onTroubleshoot ? (
+                  <Button
+                    type="link"
+                    size="small"
+                    icon={<ToolOutlined />}
+                    onClick={() => onTroubleshoot(text)}
+                    style={{ padding: 0, marginTop: 8 }}
+                  >
+                    Troubleshoot this
+                  </Button>
+                ) : null
+              }
             />
           </div>
         );
@@ -77,12 +92,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 };