Enhance error messages in OrchestrationManager and format error message in PlanPage for improved clarity and user experience

Author: Kingshuk-Microsoft

src/backend/v3/orchestration/orchestration_manager.py

@@ -189,7 +189,7 @@ async def run_orchestration(self, user_id, input_task) -> None:
                 if hasattr(e, "__dict__"):
                     self.logger.info(f"Error attributes: {e.__dict__}")
                 self.logger.info("=" * 50)
-                error_content = "The agent is currently unavailable. Please check if it was deleted or recreated.\n\nIf yes, please create a new plan from the home page."
+                error_content = "**Attention:** The agent is currently unavailable. Please check if it was deleted or recreated.\n\nIf yes, please create a new plan from the home page."
                 self.logger.info(f"🔴 Sending error message to user {user_id}: {error_content}")
 
                 await connection_config.send_status_update_async(
@@ -213,7 +213,7 @@ async def run_orchestration(self, user_id, input_task) -> None:
                     {
                         "type": WebsocketMessageType.ERROR_MESSAGE,
                         "data": {
-                            "content": "An error occurred while processing the final response.\n\nPlease try creating a new plan from the home page.",
+                            "content": "**Attention:** An error occurred while processing the final response.\n\nPlease try creating a new plan from the home page.",
                             "status": "error",
                             "timestamp": asyncio.get_event_loop().time(),
                         },
@@ -230,7 +230,7 @@ async def run_orchestration(self, user_id, input_task) -> None:
                     {
                         "type": WebsocketMessageType.ERROR_MESSAGE,
                         "data": {
-                            "content": "I'm having trouble connecting to the agent right now.\n\nPlease try creating a new plan from the home page or try again later.",
+                            "content": "**Attention:** I'm having trouble connecting to the agent right now.\n\nPlease try creating a new plan from the home page or try again later.",
                             "status": "error",
                             "timestamp": asyncio.get_event_loop().time(),
                         },
@@ -250,7 +250,7 @@ async def run_orchestration(self, user_id, input_task) -> None:
                     {
                         "type": WebsocketMessageType.ERROR_MESSAGE,
                         "data": {
-                            "content": "Something went wrong.\n\nPlease try creating a new plan from the home page or try again later.",
+                            "content": "**Attention:** Something went wrong.\n\nPlease try creating a new plan from the home page or try again later.",
                             "status": "error",
                             "timestamp": asyncio.get_event_loop().time(),
                         },
@@ -267,7 +267,7 @@ async def run_orchestration(self, user_id, input_task) -> None:
                 self.logger.info(f"Error attributes: {e.__dict__}")
             self.logger.info("=" * 50)
 
-            error_content = "Something went wrong.\n\nPlease try creating a new plan from the home page or try again later."
+            error_content = "**Attention:** Something went wrong.\n\nPlease try creating a new plan from the home page or try again later."
 
             self.logger.info(f"🔴 Sending error message to user {user_id}: {error_content}")
 

src/frontend/src/pages/PlanPage.tsx

@@ -58,7 +58,20 @@ const PlanPage: React.FC = () => {
     const [showBufferingText, setShowBufferingText] = useState<boolean>(false);
     const [agentMessages, setAgentMessages] = useState<AgentMessageData[]>([]);
     const formatErrorMessage = useCallback((content: string): string => {
-        return `⚠️ ${content}`;
+        // return `⚠️ ${content}`;
+        // Split content by newlines and add proper indentation
+        const lines = content.split('\n');
+        const formattedLines = lines.map((line, index) => {
+            if (index === 0) {
+                return `⚠️ ${line}`;
+            } else if (line.trim() === '') {
+                return ''; // Preserve blank lines
+            } else {
+                // Use HTML non-breaking spaces to avoid Markdown code block formatting
+                return `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${line}`;
+            }
+        });
+        return formattedLines.join('\n');
     }, []);
     // Plan approval state - track when plan is approved
     const [planApproved, setPlanApproved] = useState<boolean>(false);