feat: implement debounced auto-save for conversations and enhance ResultBlock component with truncation support

src/App.tsx

@@ -10,7 +10,6 @@ import {
   Play,
   Plus,
   Zap,
-  RotateCcw,
   Settings,
   X,
   PanelRightClose,
@@ -170,6 +169,7 @@ const App: React.FC = () => {
   const [isConversationsPanelVisible, setIsConversationsPanelVisible] = useState<boolean>(false);
   const chatContainerRef = useRef<HTMLDivElement>(null);
   const debounceTimers = useRef<Record<number, NodeJS.Timeout>>({});
+  const conversationSaveTimer = useRef<NodeJS.Timeout | null>(null);
   const toolsContainerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const {
@@ -278,32 +278,48 @@ const App: React.FC = () => {
   }, []);
 
   // Auto-save current conversation when messages change
+  // Debounced conversation auto-save to prevent excessive IndexedDB writes
   useEffect(() => {
     if (messages.length === 0) return;
 
-    const saveCurrentConversation = async () => {
-      const title = generateConversationTitle(messages);
-      const conversation: Conversation = {
-        ...(currentConversationId ? { id: currentConversationId } : {}),
-        title,
-        messages,
-        createdAt: currentConversationId ? conversations.find(c => c.id === currentConversationId)?.createdAt || Date.now() : Date.now(),
-        updatedAt: Date.now(),
+    // Clear existing timer
+    if (conversationSaveTimer.current) {
+      clearTimeout(conversationSaveTimer.current);
+    }
+
+    // Set new timer to save after 1 second of inactivity
+    conversationSaveTimer.current = setTimeout(() => {
+      const saveCurrentConversation = async () => {
+        const title = generateConversationTitle(messages);
+        const conversation: Conversation = {
+          ...(currentConversationId ? { id: currentConversationId } : {}),
+          title,
+          messages,
+          createdAt: currentConversationId ? conversations.find(c => c.id === currentConversationId)?.createdAt || Date.now() : Date.now(),
+          updatedAt: Date.now(),
+        };
+
+        const id = await saveConversation(conversation);
+        if (!currentConversationId) {
+          setCurrentConversationId(id);
+        }
+
+        // Reload conversations list
+        const updatedConversations = await loadAllConversations();
+        setConversations(updatedConversations);
       };
 
-      const id = await saveConversation(conversation);
-      if (!currentConversationId) {
-        setCurrentConversationId(id);
-      }
+      saveCurrentConversation().catch((error) => {
+        console.error("Failed to save conversation:", error);
+      });
+    }, 1000);
 
-      // Reload conversations list
-      const updatedConversations = await loadAllConversations();
-      setConversations(updatedConversations);
+    // Cleanup on unmount
+    return () => {
+      if (conversationSaveTimer.current) {
+        clearTimeout(conversationSaveTimer.current);
+      }
     };
-
-    saveCurrentConversation().catch((error) => {
-      console.error("Failed to save conversation:", error);
-    });
   }, [messages, currentConversationId, conversations]);
 
   const updateToolInDB = async (tool: Tool): Promise<void> => {
@@ -595,22 +611,50 @@ const App: React.FC = () => {
         setMessages([...currentMessages, { role: "assistant", content: "" }]);
 
         let accumulatedContent = "";
+        let lastUpdateTime = 0;
+        let pendingUpdate = false;
+        const THROTTLE_MS = 50; // Update UI at most every 50ms
+
+        const updateUI = () => {
+          setMessages((current) => {
+            const updated = [...current];
+            updated[updated.length - 1] = {
+              role: "assistant",
+              content: accumulatedContent,
+            };
+            return updated;
+          });
+          lastUpdateTime = Date.now();
+          pendingUpdate = false;
+        };
+
         const response = await generateResponse(
           messagesForGeneration,
           toolSchemas,
           (token: string) => {
             accumulatedContent += token;
-            setMessages((current) => {
-              const updated = [...current];
-              updated[updated.length - 1] = {
-                role: "assistant",
-                content: accumulatedContent,
-              };
-              return updated;
-            });
+            const now = Date.now();
+
+            // Throttle updates: only update if enough time has passed
+            if (now - lastUpdateTime >= THROTTLE_MS) {
+              updateUI();
+            } else if (!pendingUpdate) {
+              // Schedule an update if one isn't already pending
+              pendingUpdate = true;
+              setTimeout(() => {
+                if (pendingUpdate) {
+                  updateUI();
+                }
+              }, THROTTLE_MS - (now - lastUpdateTime));
+            }
           }
         );
 
+        // Ensure final update is applied
+        if (accumulatedContent !== "") {
+          updateUI();
+        }
+
         currentMessages.push({ role: "assistant", content: response });
         const toolCallContent = extractToolCallContent(response);
 
@@ -760,22 +804,50 @@ const App: React.FC = () => {
         setMessages([...currentMessages, { role: "assistant", content: "" }]);
 
         let accumulatedContent = "";
+        let lastUpdateTime = 0;
+        let pendingUpdate = false;
+        const THROTTLE_MS = 50; // Update UI at most every 50ms
+
+        const updateUI = () => {
+          setMessages((current) => {
+            const updated = [...current];
+            updated[updated.length - 1] = {
+              role: "assistant",
+              content: accumulatedContent,
+            };
+            return updated;
+          });
+          lastUpdateTime = Date.now();
+          pendingUpdate = false;
+        };
+
         const response = await generateResponse(
           messagesForGeneration,
           toolSchemas,
           (token: string) => {
             accumulatedContent += token;
-            setMessages((current) => {
-              const updated = [...current];
-              updated[updated.length - 1] = {
-                role: "assistant",
-                content: accumulatedContent,
-              };
-              return updated;
-            });
+            const now = Date.now();
+
+            // Throttle updates: only update if enough time has passed
+            if (now - lastUpdateTime >= THROTTLE_MS) {
+              updateUI();
+            } else if (!pendingUpdate) {
+              // Schedule an update if one isn't already pending
+              pendingUpdate = true;
+              setTimeout(() => {
+                if (pendingUpdate) {
+                  updateUI();
+                }
+              }, THROTTLE_MS - (now - lastUpdateTime));
+            }
           }
         );
 
+        // Ensure final update is applied
+        if (accumulatedContent !== "") {
+          updateUI();
+        }
+
         currentMessages.push({ role: "assistant", content: response });
         const toolCallContent = extractToolCallContent(response);
 

src/components/ResultBlock.tsx

@@ -1,4 +1,4 @@
-import type React from "react";
+import React, { useState, useMemo } from "react";
 
 interface ResultBlockProps {
   error?: string;
@@ -8,21 +8,68 @@ interface ResultBlockProps {
 const ResultBlock: React.FC<ResultBlockProps> = ({
   error,
   result,
-}) => (
-  <div
-    className={
-      error
-        ? "bg-red-900 border border-red-600 rounded p-3"
-        : "bg-gray-700 border border-gray-600 rounded p-3"
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const MAX_LENGTH = 10000; // Characters to show before truncating
+
+  const formattedResult = useMemo(() => {
+    if (result === undefined || result === null) {
+      return "No result";
+    }
+
+    if (typeof result !== "object") {
+      return String(result);
+    }
+
+    try {
+      const fullString = JSON.stringify(result, null, 2);
+
+      // If the result is very large, provide truncation
+      if (fullString.length > MAX_LENGTH && !isExpanded) {
+        return fullString.substring(0, MAX_LENGTH);
+      }
+
+      return fullString;
+    } catch (err) {
+      // Handle circular references or other JSON.stringify errors
+      return String(result);
     }
-  >
-    {error ? <p className="text-red-300 text-sm">Error: {error}</p> : null}
-    <pre className="text-sm text-gray-300 whitespace-pre-wrap overflow-auto mt-2">
-      {result !== undefined && result !== null 
-        ? (typeof result === "object" ? JSON.stringify(result, null, 2) : String(result))
-        : "No result"}
-    </pre>
-  </div>
-);
+  }, [result, isExpanded]);
+
+  const isTruncated = useMemo(() => {
+    if (typeof result !== "object" || result === null) return false;
+    try {
+      return JSON.stringify(result, null, 2).length > MAX_LENGTH;
+    } catch {
+      return false;
+    }
+  }, [result]);
+
+  return (
+    <div
+      className={
+        error
+          ? "bg-red-900 border border-red-600 rounded p-3"
+          : "bg-gray-700 border border-gray-600 rounded p-3"
+      }
+    >
+      {error ? <p className="text-red-300 text-sm">Error: {error}</p> : null}
+      <pre className="text-sm text-gray-300 whitespace-pre-wrap overflow-auto mt-2 max-h-96">
+        {formattedResult}
+        {isTruncated && !isExpanded && (
+          <span className="text-yellow-400">... (truncated)</span>
+        )}
+      </pre>
+      {isTruncated && (
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="mt-2 text-xs text-blue-400 hover:text-blue-300 underline"
+        >
+          {isExpanded ? "Show less" : "Show full result"}
+        </button>
+      )}
+    </div>
+  );
+};
 
 export default ResultBlock;

src/services/mcpClient.ts

@@ -157,11 +157,7 @@ export class MCPClientService {
           version: MCP_CLIENT_CONFIG.VERSION,
         },
         {
-          capabilities: {
-            tools: {},
-            resources: {},
-            prompts: {},
-          },
+          capabilities: {},
         }
       );
 
@@ -378,9 +374,7 @@ export class MCPClientService {
           version: MCP_CLIENT_CONFIG.VERSION,
         },
         {
-          capabilities: {
-            tools: {},
-          },
+          capabilities: {},
         }
       );
 

src/services/oauth.ts

@@ -5,12 +5,22 @@ import {
   exchangeAuthorization,
   registerClient,
 } from "@modelcontextprotocol/sdk/client/auth.js";
+import type { AuthorizationServerMetadata } from "@modelcontextprotocol/sdk/shared/auth.js";
 import { secureStorage } from "../utils/storage";
 import { MCP_CLIENT_CONFIG, STORAGE_KEYS, DEFAULTS } from "../config/constants";
+
+// Extended type to include custom properties for OAuth flow
+type ExtendedAuthMetadata = AuthorizationServerMetadata & {
+  client_id?: string;
+  client_secret?: string;
+  redirect_uri?: string;
+  scopes?: string[];
+};
+
 // Utility to fetch .well-known/modelcontextprotocol for OAuth endpoints
 export async function discoverOAuthEndpoints(serverUrl: string) {
   // ...existing code...
-  let resourceMetadata, authMetadata, authorizationServerUrl;
+  let resourceMetadata, authMetadata: ExtendedAuthMetadata | undefined, authorizationServerUrl;
   try {
     resourceMetadata = await discoverOAuthProtectedResourceMetadata(serverUrl);
     if (resourceMetadata?.authorization_servers?.length) {