fix: add service status indicator for ongoing issues (#95)

components/chat-panel.tsx

@@ -4,7 +4,7 @@ import type React from "react";
 import { useRef, useEffect, useState } from "react";
 import { flushSync } from "react-dom";
 import { FaGithub } from "react-icons/fa";
-import { PanelRightClose, PanelRightOpen } from "lucide-react";
+import { PanelRightClose, PanelRightOpen, AlertTriangle } from "lucide-react";
 import Link from "next/link";
 import Image from "next/image";
 
@@ -72,8 +72,15 @@ export default function ChatPanel({
         chartXMLRef.current = chartXML;
     }, [chartXML]);
 
-    const { messages, sendMessage, addToolResult, status, error, setMessages, stop } =
+    const {
-        useChat({
+        messages,
+        sendMessage,
+        addToolResult,
+        status,
+        error,
+        setMessages,
+        stop,
+    } = useChat({
         transport: new DefaultChatTransport({
             api: "/api/chat",
         }),
@@ -110,12 +117,20 @@ export default function ChatPanel({
                     const cachedXML = chartXMLRef.current;
                     if (cachedXML) {
                         currentXml = cachedXML;
-                            console.log("[edit_diagram] Using cached chartXML, length:", currentXml.length);
+                        console.log(
+                            "[edit_diagram] Using cached chartXML, length:",
+                            currentXml.length
+                        );
                     } else {
                         // Fallback to export only if no cached XML
-                            console.log("[edit_diagram] No cached XML, fetching from DrawIO...");
+                        console.log(
+                            "[edit_diagram] No cached XML, fetching from DrawIO..."
+                        );
                         currentXml = await onFetchChart(false);
-                            console.log("[edit_diagram] Got XML from export, length:", currentXml.length);
+                        console.log(
+                            "[edit_diagram] Got XML from export, length:",
+                            currentXml.length
+                        );
                     }
 
                     const { replaceXMLParts } = await import("@/lib/utils");
@@ -133,9 +148,7 @@ export default function ChatPanel({
                     console.error("[edit_diagram] Failed:", error);
 
                     const errorMessage =
-                            error instanceof Error
+                        error instanceof Error ? error.message : String(error);
-                                ? error.message
-                                : String(error);
 
                     addToolResult({
                         tool: "edit_diagram",
@@ -201,9 +214,13 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                 messages.length === capturedMessageCount &&
                 newPartsCount === capturedPartsCount
             ) {
-                console.error("[Streaming Timeout] No activity for 15s - forcing error state");
+                console.error(
+                    "[Streaming Timeout] No activity for 15s - forcing error state"
+                );
                 setStreamingError(
-                    new Error("Connection lost. The AI service may be temporarily unavailable. Please try again.")
+                    new Error(
+                        "Connection lost. The AI service may be temporarily unavailable. Please try again."
+                    )
                 );
                 stop(); // Allow user to retry by transitioning status to "ready"
             }
@@ -220,11 +237,12 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
         }
     }, [messages]);
 
-
     const onFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
         // Allow retry if there's a streaming error (workaround for stop() not transitioning status)
-        const isProcessing = (status === "streaming" || status === "submitted") && !streamingError;
+        const isProcessing =
+            (status === "streaming" || status === "submitted") &&
+            !streamingError;
         if (input.trim() && !isProcessing) {
             // Clear any previous streaming error before starting new request
             setStreamingError(null);
@@ -292,7 +310,10 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
 
         // Find the user message before this assistant message
         let userMessageIndex = messageIndex - 1;
-        while (userMessageIndex >= 0 && messages[userMessageIndex].role !== "user") {
+        while (
+            userMessageIndex >= 0 &&
+            messages[userMessageIndex].role !== "user"
+        ) {
             userMessageIndex--;
         }
 
@@ -308,7 +329,10 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
         // Get the saved XML snapshot for this user message
         const savedXml = xmlSnapshotsRef.current.get(userMessageIndex);
         if (!savedXml) {
-            console.error("No saved XML snapshot for message index:", userMessageIndex);
+            console.error(
+                "No saved XML snapshot for message index:",
+                userMessageIndex
+            );
             return;
         }
 
@@ -353,7 +377,10 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
         // Get the saved XML snapshot for this user message
         const savedXml = xmlSnapshotsRef.current.get(messageIndex);
         if (!savedXml) {
-            console.error("No saved XML snapshot for message index:", messageIndex);
+            console.error(
+                "No saved XML snapshot for message index:",
+                messageIndex
+            );
             return;
         }
 
@@ -447,6 +474,14 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                         >
                             About
                         </Link>
+                        <ButtonWithTooltip
+                            tooltipContent="We're experiencing issues with diagram generation. Debugging is in progress."
+                            variant="ghost"
+                            size="icon"
+                            className="h-6 w-6 text-amber-500 hover:text-amber-600"
+                        >
+                            <AlertTriangle className="h-4 w-4" />
+                        </ButtonWithTooltip>
                     </div>
                     <div className="flex items-center gap-1">
                         <a