add mcp support

package-lock.json

@@ -16,6 +16,7 @@
         "lucide-react": "^0.535.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
+        "react-router-dom": "^7.8.0",
         "tailwindcss": "^4.1.11"
       },
       "devDependencies": {
@@ -4927,6 +4928,53 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.8.0.tgz",
+      "integrity": "sha512-r15M3+LHKgM4SOapNmsH3smAizWds1vJ0Z9C4mWaKnT9/wD7+d/0jYcj6LmOvonkrO4Rgdyp4KQ/29gWN2i1eg==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.8.0.tgz",
+      "integrity": "sha512-ntInsnDVnVRdtSu6ODmTQ41cbluak/ENeTif7GBce0L6eztFg6/e1hXAysFQI8X25C8ipKmT9cClbJwxx3Kaqw==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.8.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/react-router/node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -5144,6 +5192,12 @@
         "node": ">= 18"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",

package.json

@@ -18,6 +18,7 @@
     "lucide-react": "^0.535.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-router-dom": "^7.8.0",
     "tailwindcss": "^4.1.11"
   },
   "devDependencies": {

src/App.tsx

@@ -98,7 +98,7 @@ const App: React.FC = () => {
   const [isModelDropdownOpen, setIsModelDropdownOpen] =
     useState<boolean>(false);
   const [isMCPManagerOpen, setIsMCPManagerOpen] = useState<boolean>(false);
-  const [isToolsPanelVisible, setIsToolsPanelVisible] = useState(false);
+  const [isToolsPanelVisible, setIsToolsPanelVisible] = useState<boolean>(true);
   const chatContainerRef = useRef<HTMLDivElement>(null);
   const debounceTimers = useRef<Record<number, NodeJS.Timeout>>({});
   const toolsContainerRef = useRef<HTMLDivElement>(null);
@@ -121,7 +121,6 @@ const App: React.FC = () => {
   } = useMCP();
 
   const loadTools = useCallback(async (): Promise<void> => {
-    console.log("loadTools called - this should only happen on startup");
     const db = await getDB();
     const allTools: Tool[] = await db.getAll(STORE_NAME);
     if (allTools.length === 0) {
@@ -141,21 +140,10 @@ const App: React.FC = () => {
     } else {
       setTools(allTools.map((t) => ({ ...t, isCollapsed: false })));
     }
-  }, []); // Remove the dependency that was causing the loop
 
-  // Separate effect for MCP tools to avoid dependency cycles
-  useEffect(() => {
-    console.log(
-      "MCP tools effect triggered - checking if this happens frequently"
-    );
+    // Load MCP tools and merge them
     const mcpTools = getMCPToolsAsOriginalTools();
-    setTools((prevTools) => {
-      // Remove old MCP tools and add new ones to avoid duplicates
-      const nonMcpTools = prevTools.filter(
-        (tool) => !tool.code?.includes("mcpServerId:")
-      );
-      return [...nonMcpTools, ...mcpTools];
-    });
+    setTools((prevTools) => [...prevTools, ...mcpTools]);
   }, [getMCPToolsAsOriginalTools]);
 
   useEffect(() => {
@@ -311,52 +299,8 @@ const App: React.FC = () => {
         });
 
         // Call MCP tool
-        const mcpResult = await callMCPTool(serverId, toolName, args);
-        console.log("Raw MCP result:", mcpResult);
-
-        // Extract the actual content from MCP result
-        if (mcpResult.content && mcpResult.content.length > 0) {
-          // If there's text content, use that
-          const textContent = mcpResult.content.find((c) => c.text);
-          if (textContent && textContent.text) {
-            console.log("Using text content:", textContent.text);
-
-            // Try to handle double-encoded JSON
-            let content = textContent.text;
-            try {
-              // First, try to parse as JSON to see if it's a JSON string
-              const parsed = JSON.parse(content);
-              if (typeof parsed === "string") {
-                // If the parsed result is still a string, it was double-encoded
-                console.log("Detected double-encoded JSON, parsing again");
-                content = parsed;
-              } else {
-                // If it parsed to an object/array directly, use the original string
-                console.log("Using original text content");
-              }
-            } catch {
-              // If first parse fails, use original content
-              console.log("Using original text content (parse failed)");
-            }
-
-            return content;
-          }
-
-          // Otherwise, return the first content item's data or the full content array
-          const firstContent = mcpResult.content[0];
-          if (firstContent.data !== undefined) {
-            console.log("Using data content:", firstContent.data);
-            return JSON.stringify(firstContent.data);
-          }
-
-          // Fallback to the full content array
-          console.log("Using full content array:", mcpResult.content);
-          return JSON.stringify(mcpResult.content);
-        }
-
-        // If no content, return the full result
-        console.log("No content found, returning full result:", mcpResult);
-        return JSON.stringify(mcpResult);
+        const result = await callMCPTool(serverId, toolName, args);
+        return JSON.stringify(result);
       }
     }
 
@@ -422,19 +366,11 @@ const App: React.FC = () => {
           ? extractFunctionAndRenderer(toolUsed.code)
           : { rendererCode: undefined };
 
-        console.log("Tool renderer info:", {
-          toolName: toolUsed?.name,
-          hasRenderer: !!rendererCode,
-          rendererCode,
-        });
-
         let parsedResult;
         try {
           parsedResult = JSON.parse(result);
-          console.log("Parsed result in executeToolCalls:", parsedResult);
         } catch {
           parsedResult = result;
-          console.log("Failed to parse result, using as string:", result);
         }
 
         let namedParams: Record<string, unknown> = Object.create(null);
@@ -456,15 +392,6 @@ const App: React.FC = () => {
           renderer: rendererCode,
           input: namedParams,
         });
-
-        console.log("RenderInfo created:", {
-          call,
-          result: parsedResult,
-          renderer: rendererCode,
-          hasRenderer: !!rendererCode,
-          resultType: typeof parsedResult,
-          isArray: Array.isArray(parsedResult),
-        });
       } catch (error) {
         const errorMessage = getErrorMessage(error);
         results.push({ call, error: errorMessage });
@@ -867,9 +794,7 @@ const App: React.FC = () => {
                                   <ResultBlock error={info.error} />
                                 ) : (
                                   <ToolResultRenderer
-                                    result={
-                                      info.result as import("./types/mcp").MCPToolResult
-                                    }
+                                    result={info.result}
                                     rendererCode={info.renderer}
                                     input={info.input}
                                   />

src/components/MCPServerManager.tsx

@@ -1,7 +1,9 @@
 import React, { useState } from "react";
+import { discoverOAuthEndpoints, startOAuthFlow } from "../services/oauth";
 import { Plus, Server, Wifi, WifiOff, Trash2, TestTube } from "lucide-react";
 import { useMCP } from "../hooks/useMCP";
 import type { MCPServerConfig } from "../types/mcp";
+import { STORAGE_KEYS, DEFAULTS } from "../config/constants";
 
 interface MCPServerManagerProps {
   isOpen: boolean;
@@ -24,6 +26,10 @@ export const MCPServerManager: React.FC<MCPServerManagerProps> = ({
   const [testingConnection, setTestingConnection] = useState<string | null>(
     null
   );
+  const [notification, setNotification] = useState<{
+    message: string;
+    type: 'success' | 'error';
+  } | null>(null);
 
   const [newServer, setNewServer] = useState<Omit<MCPServerConfig, "id">>({
     name: "",
@@ -45,6 +51,10 @@ export const MCPServerManager: React.FC<MCPServerManagerProps> = ({
       id: `server_${Date.now()}`,
     };
 
+    // Persist name and transport for OAuth flow
+    localStorage.setItem(STORAGE_KEYS.MCP_SERVER_NAME, newServer.name);
+    localStorage.setItem(STORAGE_KEYS.MCP_SERVER_TRANSPORT, newServer.transport);
+
     try {
       await addServer(serverConfig);
       setNewServer({
@@ -58,7 +68,11 @@ export const MCPServerManager: React.FC<MCPServerManagerProps> = ({
       });
       setShowAddForm(false);
     } catch (error) {
-      console.error("Failed to add server:", error);
+      setNotification({
+        message: `Failed to add server: ${error instanceof Error ? error.message : 'Unknown error'}`,
+        type: 'error'
+      });
+      setTimeout(() => setNotification(null), DEFAULTS.OAUTH_ERROR_TIMEOUT);
     }
   };
 
@@ -67,14 +81,16 @@ export const MCPServerManager: React.FC<MCPServerManagerProps> = ({
     try {
       const success = await testConnection(config);
       if (success) {
-        alert("Connection test successful!");
+        setNotification({ message: "Connection test successful!", type: 'success' });
       } else {
-        alert("Connection test failed. Please check your configuration.");
+        setNotification({ message: "Connection test failed. Please check your configuration.", type: 'error' });
       }
     } catch (error) {
-      alert(`Connection test failed: ${error}`);
+      setNotification({ message: `Connection test failed: ${error}`, type: 'error' });
     } finally {
       setTestingConnection(null);
+      // Auto-hide notification after 3 seconds
+      setTimeout(() => setNotification(null), DEFAULTS.NOTIFICATION_TIMEOUT);
     }
   };
 
@@ -89,7 +105,11 @@ export const MCPServerManager: React.FC<MCPServerManagerProps> = ({
         await connectToServer(serverId);
       }
     } catch (error) {
-      console.error("Failed to toggle connection:", error);
+      setNotification({
+        message: `Failed to toggle connection: ${error instanceof Error ? error.message : 'Unknown error'}`,
+        type: 'error'
+      });
+      setTimeout(() => setNotification(null), DEFAULTS.OAUTH_ERROR_TIMEOUT);
     }
   };
 
@@ -276,20 +296,45 @@ export const MCPServerManager: React.FC<MCPServerManagerProps> = ({
               {newServer.auth?.type === "oauth" && (
                 <div>
                   <label className="block text-sm font-medium text-gray-300 mb-1">
-                    OAuth Token
+                    OAuth Authorization
                   </label>
-                  <input
-                    type="password"
-                    value={newServer.auth.token || ""}
-                    onChange={(e) =>
-                      setNewServer({
-                        ...newServer,
-                        auth: { ...newServer.auth!, token: e.target.value },
-                      })
-                    }
-                    className="w-full bg-gray-600 text-white rounded px-3 py-2"
-                    placeholder="your-oauth-token"
-                  />
+                  <button
+                    className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded mb-2"
+                    type="button"
+                    onClick={async () => {
+                      try {
+                        // Persist name and transport for OAuthCallback
+                        localStorage.setItem(STORAGE_KEYS.MCP_SERVER_NAME, newServer.name);
+                        localStorage.setItem(
+                          STORAGE_KEYS.MCP_SERVER_TRANSPORT,
+                          newServer.transport
+                        );
+                        const endpoints = await discoverOAuthEndpoints(
+                          newServer.url
+                        );
+                        startOAuthFlow({
+                          authorizationEndpoint:
+                            endpoints.authorizationEndpoint,
+                          clientId: endpoints.clientId,
+                          redirectUri: endpoints.redirectUri,
+                          scopes: endpoints.scopes,
+                        });
+                      } catch (err) {
+                        setNotification({
+                          message: "OAuth discovery failed: " +
+                            (err instanceof Error ? err.message : String(err)),
+                          type: 'error'
+                        });
+                        setTimeout(() => setNotification(null), DEFAULTS.OAUTH_ERROR_TIMEOUT);
+                      }
+                    }}
+                  >
+                    Connect with OAuth
+                  </button>
+                  <p className="text-xs text-gray-400">
+                    You will be redirected to authorize this app with the MCP
+                    server.
+                  </p>
                 </div>
               )}
 
@@ -337,25 +382,40 @@ export const MCPServerManager: React.FC<MCPServerManagerProps> = ({
               No MCP servers configured. Add one to get started!
             </div>
           ) : (
-            Object.values(mcpState.servers).map((config) => (
+            Object.values(mcpState.servers).map((connection) => (
               <div
-                key={config.config.id}
-                className="mb-4 p-2 border rounded-lg bg-gray-800"
+                key={connection.config.id}
+                className="bg-gray-700 rounded-lg p-4"
               >
                 <div className="flex items-center justify-between">
-                  <div>
-                    <span className="font-bold text-lg">
-                      {config.config.name}
-                    </span>
-                    <span className="ml-2 text-xs text-gray-400">
-                      {config.config.url}
-                    </span>
+                  <div className="flex items-center gap-3">
+                    <div
+                      className={`w-3 h-3 rounded-full ${
+                        connection.isConnected ? "bg-green-400" : "bg-red-400"
+                      }`}
+                    />
+                    <div>
+                      <h4 className="text-white font-medium">
+                        {connection.config.name}
+                      </h4>
+                      <p className="text-gray-400 text-sm">
+                        {connection.config.url}
+                      </p>
+                      <p className="text-gray-500 text-xs">
+                        Transport: {connection.config.transport}
+                        {connection.config.auth &&
+                          ` • Auth: ${connection.config.auth.type}`}
+                        {connection.isConnected &&
+                          ` • ${connection.tools.length} tools available`}
+                      </p>
+                    </div>
                   </div>
-                  <div className="flex gap-2">
+
+                  <div className="flex items-center gap-2">
                     {/* Test Connection */}
                     <button
-                      onClick={() => handleTestConnection(config.config)}
-                      disabled={testingConnection === config.config.id}
+                      onClick={() => handleTestConnection(connection.config)}
+                      disabled={testingConnection === connection.config.id}
                       className="p-2 text-yellow-400 hover:text-yellow-300 disabled:opacity-50"
                       title="Test Connection"
                     >
@@ -366,18 +426,18 @@ export const MCPServerManager: React.FC<MCPServerManagerProps> = ({
                     <button
                       onClick={() =>
                         handleToggleConnection(
-                          config.config.id,
-                          config.isConnected
+                          connection.config.id,
+                          connection.isConnected
                         )
                       }
                       className={`p-2 ${
-                        config.isConnected
+                        connection.isConnected
                           ? "text-green-400 hover:text-green-300"
                           : "text-gray-400 hover:text-gray-300"
                       }`}
-                      title={config.isConnected ? "Disconnect" : "Connect"}
+                      title={connection.isConnected ? "Disconnect" : "Connect"}
                     >
-                      {config.isConnected ? (
+                      {connection.isConnected ? (
                         <Wifi size={16} />
                       ) : (
                         <WifiOff size={16} />
@@ -386,7 +446,7 @@ export const MCPServerManager: React.FC<MCPServerManagerProps> = ({
 
                     {/* Remove Server */}
                     <button
-                      onClick={() => removeServer(config.config.id)}
+                      onClick={() => removeServer(connection.config.id)}
                       className="p-2 text-red-400 hover:text-red-300"
                       title="Remove Server"
                     >
@@ -395,20 +455,20 @@ export const MCPServerManager: React.FC<MCPServerManagerProps> = ({
                   </div>
                 </div>
 
-                {config.lastError && (
+                {connection.lastError && (
                   <div className="mt-2 text-red-400 text-sm">
-                    Error: {config.lastError}
+                    Error: {connection.lastError}
                   </div>
                 )}
 
-                {config.isConnected && config.tools.length > 0 && (
+                {connection.isConnected && connection.tools.length > 0 && (
                   <div className="mt-3">
                     <details className="text-sm">
                       <summary className="text-gray-300 cursor-pointer">
-                        Available Tools ({config.tools.length})
+                        Available Tools ({connection.tools.length})
                       </summary>
                       <div className="mt-2 space-y-1">
-                        {config.tools.map((tool) => (
+                        {connection.tools.map((tool) => (
                           <div key={tool.name} className="text-gray-400 pl-4">
                             • {tool.name} -{" "}
                             {tool.description || "No description"}
@@ -428,6 +488,16 @@ export const MCPServerManager: React.FC<MCPServerManagerProps> = ({
             <strong>Error:</strong> {mcpState.error}
           </div>
         )}
+
+        {notification && (
+          <div className={`mt-4 p-4 border rounded-lg ${
+            notification.type === 'success' 
+              ? 'bg-green-900 border-green-700 text-green-200' 
+              : 'bg-red-900 border-red-700 text-red-200'
+          }`}>
+            {notification.message}
+          </div>
+        )}
       </div>
     </div>
   );

src/components/ResultBlock.tsx

@@ -1,144 +1,28 @@
 import type React from "react";
-import { useState } from "react";
 
-type JsonValue = string | number | boolean | null | JsonObject | JsonArray;
-type JsonObject = { [key: string]: JsonValue };
-type JsonArray = JsonValue[];
+interface ResultBlockProps {
+  error?: string;
+  result?: unknown;
+}
 
-const isJsonString = (str: string): boolean => {
-  if (typeof str !== "string") return false;
-  const trimmed = str.trim();
-
-  // Check if it looks like JSON (starts with { or [)
-  if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) return false;
-
-  try {
-    const parsed = JSON.parse(trimmed);
-    // Ensure it's actually an object or array, not just a primitive
-    console.log("JSON parse successful:", parsed);
-    return typeof parsed === "object" && parsed !== null;
-  } catch (error) {
-    console.log("JSON parse failed:", error);
-    return false;
-  }
-};
-
-const JsonCollapsible: React.FC<{ data: JsonValue; isString?: boolean }> = ({
-  data,
-  isString = false,
-}) => {
-  const [isCollapsed, setIsCollapsed] = useState(true);
-
-  let jsonData: JsonValue;
-  try {
-    jsonData = isString ? JSON.parse(data as string) : data;
-  } catch {
-    // If parsing fails, display as string
-    return (
-      <pre className="text-sm text-gray-300 whitespace-pre-wrap overflow-auto">
-        {String(data)}
-      </pre>
-    );
-  }
-
-  const isObject = typeof jsonData === "object" && jsonData !== null;
-
-  if (!isObject) {
-    return <span className="text-gray-300">{JSON.stringify(jsonData)}</span>;
-  }
-
-  const keys = Object.keys(jsonData as JsonObject);
-  const preview = Array.isArray(jsonData)
-    ? `[${jsonData.length} items]`
-    : `{${keys.length} keys}`;
-
-  return (
-    <div className="json-collapsible">
-      <button
-        onClick={() => setIsCollapsed(!isCollapsed)}
-        className="flex items-center gap-1 text-blue-400 hover:text-blue-300 transition-colors text-sm font-mono"
-      >
-        <span
-          className="transform transition-transform duration-200"
-          style={{
-            transform: isCollapsed ? "rotate(-90deg)" : "rotate(0deg)",
-          }}
-        >
-          ▼
-        </span>
-        {isCollapsed ? preview : Array.isArray(jsonData) ? "[" : "{"}
-      </button>
-      {!isCollapsed && (
-        <div className="ml-4 mt-1">
-          <pre className="text-sm text-gray-300 whitespace-pre-wrap overflow-auto">
-            {JSON.stringify(jsonData, null, 2)}
-          </pre>
-          <div className="text-blue-400 font-mono text-sm">
-            {Array.isArray(jsonData) ? "]" : "}"}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-const ResultBlock: React.FC<{ error?: string; result?: unknown }> = ({
+const ResultBlock: React.FC<ResultBlockProps> = ({
   error,
   result,
-}) => {
-  console.log("ResultBlock component rendered with:", {
-    error,
-    result,
-    type: typeof result,
-  });
-
-  const renderContent = () => {
-    console.log("ResultBlock Debug:", {
-      result,
-      type: typeof result,
-      isString: typeof result === "string",
-      isArray: Array.isArray(result),
-      startsWithBracket:
-        typeof result === "string" && result.trim().startsWith("["),
-      isJsonString: typeof result === "string" ? isJsonString(result) : false,
-    });
-
-    // Handle objects and arrays directly
-    if (typeof result === "object" && result !== null) {
-      console.log("Rendering as object/array with JsonCollapsible");
-      return <JsonCollapsible data={result as JsonValue} />;
+}) => (
+  <div
+    className={
+      error
+        ? "bg-red-900 border border-red-600 rounded p-3"
+        : "bg-gray-700 border border-gray-600 rounded p-3"
     }
-
-    // Handle string that might be JSON
-    if (typeof result === "string") {
-      const trimmed = result.trim();
-      if (isJsonString(trimmed)) {
-        console.log("Rendering string as JSON with JsonCollapsible");
-        return <JsonCollapsible data={trimmed} isString={true} />;
-      }
-    }
-
-    // Fallback to plain text display
-    console.log("Rendering as plain text fallback");
-    return (
-      <pre className="text-sm text-gray-300 whitespace-pre-wrap overflow-auto">
-        {String(result)}
-      </pre>
-    );
-  };
-
-  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}
-      <div className="mt-2">{renderContent()}</div>
-    </div>
-  );
-};
+  >
+    {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>
+);
 
 export default ResultBlock;

src/components/ToolResultRenderer.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 import ResultBlock from "./ResultBlock";
-import type { MCPToolResult } from "../types/mcp";
 
-const ToolResultRenderer: React.FC<{
-  result: MCPToolResult;
+interface ToolResultRendererProps {
+  result: unknown;
   rendererCode?: string;
   input?: unknown;
-}> = ({ result, rendererCode, input }) => {
+}
+
+const ToolResultRenderer: React.FC<ToolResultRendererProps> = ({ result, rendererCode, input }) => {
   if (!rendererCode) {
     return <ResultBlock result={result} />;
   }
@@ -26,34 +27,10 @@ const ToolResultRenderer: React.FC<{
       const { createElement: h, Fragment } = React;
       const JSXComponent = ${componentCode};
       return JSXComponent(input, output);
-      `
+      `,
     );
 
     const element = componentFunction(React, input || {}, result);
-
-    // For object results, also show the formatted JSON below the custom renderer
-    if (typeof result === "object" && result !== null) {
-      return (
-        <div>
-          {element}
-          <div className="mt-3 space-y-3">
-            <div>
-              <h4 className="text-sm font-medium text-gray-300 mb-2">
-                Request
-              </h4>
-              <ResultBlock result={input || {}} />
-            </div>
-            <div>
-              <h4 className="text-sm font-medium text-gray-300 mb-2">
-                Response
-              </h4>
-              <ResultBlock result={result} />
-            </div>
-          </div>
-        </div>
-      );
-    }
-
     return element;
   } catch (error) {
     return (

src/constants/models.ts

@@ -2,9 +2,4 @@ export const MODEL_OPTIONS = [
   { id: "350M", label: "LFM2-350M", size: "350M parameters (312 MB)" },
   { id: "700M", label: "LFM2-700M", size: "700M parameters (579 MB)" },
   { id: "1.2B", label: "LFM2-1.2B", size: "1.2B parameters (868 MB)" },
-  {
-    id: "gemma-270m",
-    label: "Gemma-3-270M",
-    size: "270M parameters",
-  },
 ];

src/hooks/useLLM.ts

@@ -13,11 +13,11 @@ interface LLMState {
 }
 
 interface LLMInstance {
-  model: unknown;
-  tokenizer: unknown;
+  model: any;
+  tokenizer: any;
 }
 
-const moduleCache: {
+let moduleCache: {
   [modelId: string]: {
     instance: LLMInstance | null;
     loadingPromise: Promise<LLMInstance> | null;
@@ -36,20 +36,14 @@ export const useLLM = (modelId?: string) => {
   const loadingPromiseRef = useRef<Promise<LLMInstance> | null>(null);
 
   const abortControllerRef = useRef<AbortController | null>(null);
-  const pastKeyValuesRef = useRef<unknown>(null);
+  const pastKeyValuesRef = useRef<any>(null);
 
   const loadModel = useCallback(async () => {
     if (!modelId) {
       throw new Error("Model ID is required");
     }
 
-    // Handle different model types
-    let MODEL_ID: string;
-    if (modelId === "gemma-270m") {
-      MODEL_ID = "onnx-community/gemma-3-270m-it-ONNX";
-    } else {
-      MODEL_ID = `onnx-community/LFM2-${modelId}-ONNX`;
-    }
+    const MODEL_ID = `onnx-community/LFM2-${modelId}-ONNX`;
 
     if (!moduleCache[modelId]) {
       moduleCache[modelId] = {
@@ -105,7 +99,7 @@ export const useLLM = (modelId?: string) => {
             progress.file.endsWith(".onnx_data")
           ) {
             const percentage = Math.round(
-              (progress.loaded / progress.total) * 100
+              (progress.loaded / progress.total) * 100,
             );
             setState((prev) => ({ ...prev, progress: percentage }));
           }
@@ -156,7 +150,7 @@ export const useLLM = (modelId?: string) => {
     async (
       messages: Array<{ role: string; content: string }>,
       tools: Array<any>,
-      onToken?: (token: string) => void
+      onToken?: (token: string) => void,
     ): Promise<string> => {
       const instance = instanceRef.current;
       if (!instance) {
@@ -202,7 +196,7 @@ export const useLLM = (modelId?: string) => {
 
       return response;
     },
-    []
+    [],
   );
 
   const clearPastKeyValues = useCallback(() => {

src/hooks/useMCP.ts

@@ -1,11 +1,7 @@
-import { useState, useEffect, useCallback } from "react";
-import { MCPClientService } from "../services/mcpClient";
-import type {
-  MCPServerConfig,
-  MCPClientState,
-  ExtendedTool,
-} from "../types/mcp";
-import type { Tool as OriginalTool } from "../components/ToolItem";
+import { useState, useEffect, useCallback } from 'react';
+import { MCPClientService } from '../services/mcpClient';
+import type { MCPServerConfig, MCPClientState, ExtendedTool } from '../types/mcp';
+import type { Tool as OriginalTool } from '../components/ToolItem';
 
 // Singleton instance
 let mcpClientInstance: MCPClientService | null = null;
@@ -21,7 +17,7 @@ export const useMCP = () => {
   const [mcpState, setMCPState] = useState<MCPClientState>({
     servers: {},
     isLoading: false,
-    error: undefined,
+    error: undefined
   });
 
   const mcpClient = getMCPClient();
@@ -29,7 +25,6 @@ export const useMCP = () => {
   // Subscribe to MCP state changes
   useEffect(() => {
     const handleStateChange = (state: MCPClientState) => {
-      console.log("MCP state change triggered:", Object.keys(state.servers));
       setMCPState(state);
     };
 
@@ -40,74 +35,41 @@ export const useMCP = () => {
 
     return () => {
       mcpClient.removeStateListener(handleStateChange);
-      // Don't cleanup the service itself as it's a singleton used across the app
     };
   }, [mcpClient]);
 
   // Add a new MCP server
-  const addServer = useCallback(
-    async (config: MCPServerConfig): Promise<void> => {
-      return mcpClient.addServer(config);
-    },
-    [mcpClient]
-  );
+  const addServer = useCallback(async (config: MCPServerConfig): Promise<void> => {
+    return mcpClient.addServer(config);
+  }, [mcpClient]);
 
   // Remove an MCP server
-  const removeServer = useCallback(
-    async (serverId: string): Promise<void> => {
-      return mcpClient.removeServer(serverId);
-    },
-    [mcpClient]
-  );
+  const removeServer = useCallback(async (serverId: string): Promise<void> => {
+    return mcpClient.removeServer(serverId);
+  }, [mcpClient]);
 
   // Connect to a server
-  const connectToServer = useCallback(
-    async (serverId: string): Promise<void> => {
-      return mcpClient.connectToServer(serverId);
-    },
-    [mcpClient]
-  );
+  const connectToServer = useCallback(async (serverId: string): Promise<void> => {
+    return mcpClient.connectToServer(serverId);
+  }, [mcpClient]);
 
   // Disconnect from a server
-  const disconnectFromServer = useCallback(
-    async (serverId: string): Promise<void> => {
-      return mcpClient.disconnectFromServer(serverId);
-    },
-    [mcpClient]
-  );
+  const disconnectFromServer = useCallback(async (serverId: string): Promise<void> => {
+    return mcpClient.disconnectFromServer(serverId);
+  }, [mcpClient]);
 
   // Test connection to a server
-  const testConnection = useCallback(
-    async (config: MCPServerConfig): Promise<boolean> => {
-      return mcpClient.testConnection(config);
-    },
-    [mcpClient]
-  );
+  const testConnection = useCallback(async (config: MCPServerConfig): Promise<boolean> => {
+    return mcpClient.testConnection(config);
+  }, [mcpClient]);
 
   // Call a tool on an MCP server
-  const callMCPTool = useCallback(
-    async (
-      serverId: string,
-      toolName: string,
-      args: Record<string, unknown>
-    ) => {
-      console.log("MCP tool called:", {
-        serverId,
-        toolName,
-        args,
-        timestamp: new Date().toISOString(),
-      });
-      console.trace("MCP tool call stack trace:");
-      return mcpClient.callTool(serverId, toolName, args);
-    },
-    [mcpClient]
-  );
+  const callMCPTool = useCallback(async (serverId: string, toolName: string, args: Record<string, unknown>) => {
+    return mcpClient.callTool(serverId, toolName, args);
+  }, [mcpClient]);
 
   // Get all available MCP tools
   const getMCPTools = useCallback((): ExtendedTool[] => {
-    console.log(
-      "getMCPTools called - checking if this is being called frequently"
-    );
     const mcpTools: ExtendedTool[] = [];
 
     Object.entries(mcpState.servers).forEach(([serverId, connection]) => {
@@ -120,7 +82,7 @@ export const useMCP = () => {
             isCollapsed: false,
             mcpServerId: serverId,
             mcpTool: mcpTool,
-            isRemote: true,
+            isRemote: true
           });
         });
       }
@@ -132,39 +94,32 @@ export const useMCP = () => {
   // Convert MCP tools to the format expected by the existing tool system
   const getMCPToolsAsOriginalTools = useCallback((): OriginalTool[] => {
     const mcpTools: OriginalTool[] = [];
-    let globalId = 10000; // Start with high numbers to avoid conflicts
+    let globalId = Date.now(); // Use timestamp to force tool refresh
 
     Object.entries(mcpState.servers).forEach(([serverId, connection]) => {
       if (connection.isConnected && connection.config.enabled) {
         connection.tools.forEach((mcpTool) => {
-          // Convert tool name to valid JavaScript identifier and include server name for uniqueness
-          const serverName = connection.config.name
-            .replace(/[-\s]/g, "_")
-            .replace(/[^a-zA-Z0-9_]/g, "");
-          const toolName = mcpTool.name
-            .replace(/[-\s]/g, "_")
-            .replace(/[^a-zA-Z0-9_]/g, "");
-          const jsToolName = `${serverName}_${toolName}`;
+          // Convert tool name to valid JavaScript identifier
+          const jsToolName = mcpTool.name.replace(/[-\s]/g, '_').replace(/[^a-zA-Z0-9_]/g, '');
 
           // Create a JavaScript function that calls the MCP tool
+          const safeDescription = (mcpTool.description || `MCP tool from ${connection.config.name}`).replace(/[`${}\\]/g, '');
+          const serverName = connection.config.name;
+          const safeParams = Object.entries(mcpTool.inputSchema.properties || {}).map(([name, prop]) => {
+            const p = prop as { type?: string; description?: string };
+            const safeType = (p.type || 'any').replace(/[`${}\\]/g, '');
+            const safeDesc = (p.description || '').replace(/[`${}\\]/g, '');
+            return `@param {${safeType}} ${name} - ${safeDesc}`;
+          }).join('\n * ');
+          
           const code = `/**
- * ${mcpTool.description || `MCP tool from ${connection.config.name}`}
- * Server: ${connection.config.name}
- * ${Object.entries(mcpTool.inputSchema.properties || {})
-   .map(([name, prop]) => {
-     const p = prop as { type?: string; description?: string };
-     return `@param {${p.type || "any"}} ${name} - ${p.description || ""}`;
-   })
-   .join("\n * ")}
+ * ${safeDescription}
+ * ${safeParams}
  * @returns {Promise<any>} Tool execution result
  */
-export async function ${jsToolName}(${Object.keys(
-            mcpTool.inputSchema.properties || {}
-          ).join(", ")}) {
+export async function ${jsToolName}(${Object.keys(mcpTool.inputSchema.properties || {}).join(', ')}) {
   // This is an MCP tool - execution is handled by the MCP client
-  return { mcpServerId: "${serverId}", toolName: "${
-            mcpTool.name
-          }", arguments: arguments };
+  return { mcpServerId: "${serverId}", toolName: ${JSON.stringify(mcpTool.name)}, arguments: arguments };
 }
 
 export default (input, output) =>
@@ -173,7 +128,7 @@ export default (input, output) =>
     { className: "bg-blue-50 border border-blue-200 rounded-lg p-4" },
     React.createElement(
       "div",
-      { className: "flex items-center mb-3" },
+      { className: "flex items-center mb-2" },
       React.createElement(
         "div",
         {
@@ -185,16 +140,54 @@ export default (input, output) =>
       React.createElement(
         "h3",
         { className: "text-blue-900 font-semibold" },
-        "${mcpTool.name} (${connection.config.name})"
+"${mcpTool.name} (MCP)"
       ),
     ),
     React.createElement(
       "div",
-      { className: "text-sm mb-2" },
+      { className: "text-sm space-y-1" },
       React.createElement(
         "p",
-        { className: "text-blue-700 font-medium mb-1" },
-        \`Server: ${connection.config.name}\`
+        { className: "text-blue-700 font-medium" },
+        "Server: " + ${JSON.stringify(serverName)}
+      ),
+      React.createElement(
+        "p",
+        { className: "text-blue-700 font-medium" },
+        "Input: " + JSON.stringify(input)
+      ),
+      React.createElement(
+        "div",
+        { className: "mt-3" },
+        React.createElement(
+          "h4",
+          { className: "text-blue-800 font-medium mb-2" },
+          "Result:"
+        ),
+        React.createElement(
+          "pre",
+          { 
+            className: "text-gray-800 text-xs bg-gray-50 p-3 rounded border overflow-x-auto max-w-full",
+            style: { whiteSpace: "pre-wrap", wordBreak: "break-word" }
+          },
+          (() => {
+            // Try to parse and format JSON content from text fields
+            if (output && output.content && Array.isArray(output.content)) {
+              const textContent = output.content.find(item => item.type === 'text' && item.text);
+              if (textContent && textContent.text) {
+                try {
+                  const parsed = JSON.parse(textContent.text);
+                  return JSON.stringify(parsed, null, 2);
+                } catch {
+                  // If not JSON, return the original text
+                  return textContent.text;
+                }
+              }
+            }
+            // Fallback to original output
+            return JSON.stringify(output, null, 2);
+          })()
+        )
       ),
     ),
   );`;
@@ -204,7 +197,7 @@ export default (input, output) =>
             name: jsToolName, // Use JavaScript-safe name for function calls
             code: code,
             enabled: true,
-            isCollapsed: false,
+            isCollapsed: false
           });
         });
       }
@@ -234,6 +227,6 @@ export default (input, output) =>
     getMCPTools,
     getMCPToolsAsOriginalTools,
     connectAll,
-    disconnectAll,
+    disconnectAll
   };
 };

src/main.tsx

@@ -1,10 +1,24 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import "./index.css";
 import App from "./App.tsx";
+import OAuthCallback from "./components/OAuthCallback";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
-  </StrictMode>,
+    <BrowserRouter>
+      <Routes>
+        <Route
+          path="/oauth/callback"
+          element={
+            <OAuthCallback
+              serverUrl={localStorage.getItem("oauth_mcp_server_url") || ""}
+            />
+          }
+        />
+        <Route path="/*" element={<App />} />
+      </Routes>
+    </BrowserRouter>
+  </StrictMode>
 );

src/services/mcpClient.ts

@@ -10,76 +10,16 @@ import type {
   MCPClientState,
   MCPToolResult,
 } from "../types/mcp.js";
+import { MCP_CLIENT_CONFIG, STORAGE_KEYS } from "../config/constants";
 
 export class MCPClientService {
   private clients: Map<string, Client> = new Map();
   private connections: Map<string, MCPServerConnection> = new Map();
   private listeners: Array<(state: MCPClientState) => void> = [];
-  private healthCheckInterval: NodeJS.Timeout | null = null;
 
   constructor() {
     // Load saved server configurations from localStorage
     this.loadServerConfigs();
-
-    // Start health check every 5 minutes
-    this.startHealthCheck();
-  }
-
-  // Start periodic health check (every 5 minutes)
-  private startHealthCheck() {
-    // Clear any existing interval
-    if (this.healthCheckInterval) {
-      clearInterval(this.healthCheckInterval);
-    }
-
-    // Set up new interval for 5 minutes (300,000 ms)
-    this.healthCheckInterval = setInterval(() => {
-      this.performHealthCheck();
-    }, 5 * 60 * 1000);
-  }
-
-  // Perform health check on all connected servers
-  private async performHealthCheck() {
-    console.log("Performing MCP health check...");
-
-    for (const [serverId, connection] of this.connections) {
-      if (connection.config.enabled && connection.isConnected) {
-        try {
-          const client = this.clients.get(serverId);
-          if (client) {
-            // Try to list tools as a health check
-            await client.listTools();
-            console.log(`Health check passed for ${serverId}`);
-          }
-        } catch (error) {
-          console.warn(`Health check failed for ${serverId}:`, error);
-          // Mark as disconnected and try to reconnect
-          connection.isConnected = false;
-          connection.lastError = "Health check failed";
-
-          // Try to reconnect
-          try {
-            await this.connectToServer(serverId);
-            console.log(`Reconnected to ${serverId}`);
-          } catch (reconnectError) {
-            console.error(
-              `Failed to reconnect to ${serverId}:`,
-              reconnectError
-            );
-          }
-        }
-      }
-    }
-
-    this.notifyStateChange();
-  }
-
-  // Clean up health check on destruction
-  public cleanup() {
-    if (this.healthCheckInterval) {
-      clearInterval(this.healthCheckInterval);
-      this.healthCheckInterval = null;
-    }
   }
 
   // Add state change listener
@@ -118,7 +58,7 @@ export class MCPClientService {
   // Load server configurations from localStorage
   private loadServerConfigs() {
     try {
-      const stored = localStorage.getItem("mcp-servers");
+      const stored = localStorage.getItem(STORAGE_KEYS.MCP_SERVERS);
       if (stored) {
         const configs: MCPServerConfig[] = JSON.parse(stored);
         configs.forEach((config) => {
@@ -133,7 +73,7 @@ export class MCPClientService {
         });
       }
     } catch (error) {
-      console.error("Failed to load MCP server configs:", error);
+      // Silently handle missing or corrupted config
     }
   }
 
@@ -143,9 +83,10 @@ export class MCPClientService {
       const configs = Array.from(this.connections.values()).map(
         (conn) => conn.config
       );
-      localStorage.setItem("mcp-servers", JSON.stringify(configs));
+      localStorage.setItem(STORAGE_KEYS.MCP_SERVERS, JSON.stringify(configs));
     } catch (error) {
-      console.error("Failed to save MCP server configs:", error);
+      // Handle storage errors gracefully
+      throw new Error(`Failed to save server configuration: ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
   }
 
@@ -197,8 +138,8 @@ export class MCPClientService {
       // Create client
       const client = new Client(
         {
-          name: "LFM2-WebGPU",
-          version: "1.0.0",
+          name: MCP_CLIENT_CONFIG.NAME,
+          version: MCP_CLIENT_CONFIG.VERSION,
         },
         {
           capabilities: {
@@ -276,7 +217,6 @@ export class MCPClientService {
 
       // Set up error handling
       client.onerror = (error) => {
-        console.error(`MCP Client error for ${serverId}:`, error);
         connection.lastError = error.message;
         connection.isConnected = false;
         this.notifyStateChange();
@@ -299,7 +239,6 @@ export class MCPClientService {
 
       this.notifyStateChange();
     } catch (error) {
-      console.error(`Failed to connect to MCP server ${serverId}:`, error);
       connection.isConnected = false;
       connection.lastError =
         error instanceof Error ? error.message : "Connection failed";
@@ -317,7 +256,7 @@ export class MCPClientService {
       try {
         await client.close();
       } catch (error) {
-        console.error(`Error disconnecting from ${serverId}:`, error);
+        // Handle disconnect error silently
       }
       this.clients.delete(serverId);
     }
@@ -366,8 +305,7 @@ export class MCPClientService {
         isError: Boolean(result.isError),
       };
     } catch (error) {
-      console.error(`Error calling tool ${toolName} on ${serverId}:`, error);
-      throw error;
+      throw new Error(`Tool execution failed (${toolName}): ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
   }
 
@@ -376,8 +314,8 @@ export class MCPClientService {
     try {
       const client = new Client(
         {
-          name: "LFM2-WebGPU-Test",
-          version: "1.0.0",
+          name: MCP_CLIENT_CONFIG.TEST_CLIENT_NAME,
+          version: MCP_CLIENT_CONFIG.VERSION,
         },
         {
           capabilities: {
@@ -413,8 +351,7 @@ export class MCPClientService {
       await client.close();
       return true;
     } catch (error) {
-      console.error("Test connection failed:", error);
-      return false;
+      throw new Error(`Connection test failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
   }
 
@@ -425,8 +362,8 @@ export class MCPClientService {
         ([, connection]) => connection.config.enabled && !connection.isConnected
       )
       .map(([serverId]) =>
-        this.connectToServer(serverId).catch((error) => {
-          console.error(`Failed to connect to ${serverId}:`, error);
+        this.connectToServer(serverId).catch(() => {
+          // Handle auto-connection error silently
         })
       );
 

src/services/oauth.ts

@@ -1,54 +1,239 @@
-// Utility for OAuth authentication with MCP servers
-// Usage: import { authenticateWithOAuth } from "./oauth";
+import {
+  discoverOAuthProtectedResourceMetadata,
+  discoverAuthorizationServerMetadata,
+  startAuthorization,
+  exchangeAuthorization,
+  registerClient,
+} from "@modelcontextprotocol/sdk/client/auth.js";
+import { secureStorage } from "../utils/storage";
+import { MCP_CLIENT_CONFIG, STORAGE_KEYS, DEFAULTS } from "../config/constants";
+// Utility to fetch .well-known/modelcontextprotocol for OAuth endpoints
+export async function discoverOAuthEndpoints(serverUrl: string) {
+  // ...existing code...
+  let resourceMetadata, authMetadata, authorizationServerUrl;
+  try {
+    resourceMetadata = await discoverOAuthProtectedResourceMetadata(serverUrl);
+    if (resourceMetadata?.authorization_servers?.length) {
+      authorizationServerUrl = resourceMetadata.authorization_servers[0];
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (e) {
+    // Fallback to direct metadata discovery if protected resource fails
+    authMetadata = await discoverAuthorizationServerMetadata(serverUrl);
+    authorizationServerUrl = authMetadata?.issuer || serverUrl;
+  }
 
-export async function authenticateWithOAuth({
-  authUrl,
+  if (!authorizationServerUrl) {
+    throw new Error("No authorization server found for this MCP server");
+  }
+
+  // Discover authorization server metadata if not already done
+  if (!authMetadata) {
+    authMetadata = await discoverAuthorizationServerMetadata(
+      authorizationServerUrl
+    );
+  }
+
+  if (
+    !authMetadata ||
+    !authMetadata.authorization_endpoint ||
+    !authMetadata.token_endpoint
+  ) {
+    throw new Error("Missing OAuth endpoints in authorization server metadata");
+  }
+
+  // If client_id is missing, register client dynamically
+  if (!authMetadata.client_id && authMetadata.registration_endpoint) {
+    // Determine token endpoint auth method
+    let tokenEndpointAuthMethod = "none";
+    if (
+      authMetadata.token_endpoint_auth_methods_supported?.includes(
+        "client_secret_post"
+      )
+    ) {
+      tokenEndpointAuthMethod = "client_secret_post";
+    } else if (
+      authMetadata.token_endpoint_auth_methods_supported?.includes(
+        "client_secret_basic"
+      )
+    ) {
+      tokenEndpointAuthMethod = "client_secret_basic";
+    }
+    const clientMetadata = {
+      redirect_uris: [
+        String(
+          authMetadata.redirect_uri ||
+            window.location.origin + "/oauth/callback"
+        ),
+      ],
+      client_name: MCP_CLIENT_CONFIG.NAME,
+      grant_types: ["authorization_code"],
+      response_types: ["code"],
+      token_endpoint_auth_method: tokenEndpointAuthMethod,
+    };
+    const clientInfo = await registerClient(authorizationServerUrl, {
+      metadata: authMetadata,
+      clientMetadata,
+    });
+    authMetadata.client_id = clientInfo.client_id;
+    if (clientInfo.client_secret) {
+      authMetadata.client_secret = clientInfo.client_secret;
+    }
+    // Persist client credentials for later use
+    localStorage.setItem(STORAGE_KEYS.OAUTH_CLIENT_ID, clientInfo.client_id);
+    if (clientInfo.client_secret) {
+      await secureStorage.setItem(STORAGE_KEYS.OAUTH_CLIENT_SECRET, clientInfo.client_secret);
+    }
+  }
+  if (!authMetadata.client_id) {
+    throw new Error(
+      "Missing client_id and registration not supported by authorization server"
+    );
+  }
+
+  // Step 3: Validate resource
+  const resource = resourceMetadata?.resource
+    ? new URL(resourceMetadata.resource)
+    : undefined;
+
+  // Persist endpoints, metadata, and MCP server URL for callback use
+  localStorage.setItem(
+    STORAGE_KEYS.OAUTH_AUTHORIZATION_ENDPOINT,
+    authMetadata.authorization_endpoint
+  );
+  localStorage.setItem(STORAGE_KEYS.OAUTH_TOKEN_ENDPOINT, authMetadata.token_endpoint);
+  localStorage.setItem(
+    STORAGE_KEYS.OAUTH_REDIRECT_URI,
+    (authMetadata.redirect_uri || window.location.origin + DEFAULTS.OAUTH_REDIRECT_PATH).toString()
+  );
+  localStorage.setItem(STORAGE_KEYS.OAUTH_MCP_SERVER_URL, serverUrl);
+  localStorage.setItem(
+    STORAGE_KEYS.OAUTH_AUTHORIZATION_SERVER_METADATA,
+    JSON.stringify(authMetadata)
+  );
+  if (resource) {
+    localStorage.setItem(STORAGE_KEYS.OAUTH_RESOURCE, resource.toString());
+  }
+  return {
+    authorizationEndpoint: authMetadata.authorization_endpoint,
+    tokenEndpoint: authMetadata.token_endpoint,
+    clientId: authMetadata.client_id,
+    clientSecret: authMetadata.client_secret,
+    scopes: authMetadata.scopes || [],
+    redirectUri:
+      authMetadata.redirect_uri || window.location.origin + "/oauth/callback",
+    resource,
+  };
+}
+
+// Start OAuth flow: redirect user to authorization endpoint
+export async function startOAuthFlow({
+  authorizationEndpoint,
   clientId,
   redirectUri,
-  scope = "openid profile",
+  scopes,
+  resource,
 }: {
-  authUrl: string;
+  authorizationEndpoint: string;
   clientId: string;
   redirectUri: string;
-  scope?: string;
-}): Promise<string> {
-  // Open a popup for OAuth login
-  const state = Math.random().toString(36).substring(2);
-  const url = `${authUrl}?response_type=token&client_id=${encodeURIComponent(
-    clientId
-  )}&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${encodeURIComponent(
-    scope
-  )}&state=${state}`;
-
-  return new Promise((resolve, reject) => {
-    const popup = window.open(url, "oauth-login", "width=500,height=700");
-    if (!popup) return reject("Popup blocked");
-
-    const interval = setInterval(() => {
-      try {
-        if (!popup || popup.closed) {
-          clearInterval(interval);
-          reject("Popup closed");
-        }
-        // Check for access token in URL
-        const href = popup.location.href;
-        if (href.startsWith(redirectUri)) {
-          const hash = popup.location.hash;
-          const params = new URLSearchParams(hash.substring(1));
-          const token = params.get("access_token");
-          if (token) {
-            clearInterval(interval);
-            popup.close();
-            resolve(token);
-          } else {
-            clearInterval(interval);
-            popup.close();
-            reject("No access token found");
+  scopes?: string[];
+  resource?: URL;
+}) {
+  // Use Proof Key for Code Exchange (PKCE) and SDK to build the authorization URL
+  // Use persisted client_id if available
+  const persistedClientId = localStorage.getItem(STORAGE_KEYS.OAUTH_CLIENT_ID) || clientId;
+  const clientInformation = { client_id: persistedClientId };
+  // Retrieve metadata from localStorage if available
+  let metadata;
+  try {
+    const stored = localStorage.getItem(STORAGE_KEYS.OAUTH_AUTHORIZATION_SERVER_METADATA);
+    if (stored) metadata = JSON.parse(stored);
+  } catch {
+    console.warn("Failed to parse stored OAuth metadata, using defaults");
+  }
+  // Always pass resource from localStorage if not provided
+  let resourceParam = resource;
+  if (!resourceParam) {
+    const resourceStr = localStorage.getItem(STORAGE_KEYS.OAUTH_RESOURCE);
+    if (resourceStr) resourceParam = new URL(resourceStr);
+  }
+  const { authorizationUrl, codeVerifier } = await startAuthorization(
+    authorizationEndpoint,
+    {
+      metadata,
+      clientInformation,
+      redirectUrl: redirectUri,
+      scope: scopes?.join(" ") || undefined,
+      resource: resourceParam,
+    }
+  );
+  // Save codeVerifier in localStorage for later token exchange
+  localStorage.setItem(STORAGE_KEYS.OAUTH_CODE_VERIFIER, codeVerifier);
+  window.location.href = authorizationUrl.toString();
+}
+
+// Exchange code for token using MCP SDK
+export async function exchangeCodeForToken({
+  code,
+  redirectUri,
+}: {
+  serverUrl?: string;
+  code: string;
+  redirectUri: string;
+}) {
+  // Use only persisted credentials and endpoints for token exchange
+  const tokenEndpoint = localStorage.getItem(STORAGE_KEYS.OAUTH_TOKEN_ENDPOINT);
+  const redirectUriPersisted = localStorage.getItem(STORAGE_KEYS.OAUTH_REDIRECT_URI);
+  const resourceStr = localStorage.getItem(STORAGE_KEYS.OAUTH_RESOURCE);
+  const persistedClientId = localStorage.getItem(STORAGE_KEYS.OAUTH_CLIENT_ID);
+  const persistedClientSecret = await secureStorage.getItem(STORAGE_KEYS.OAUTH_CLIENT_SECRET);
+  const codeVerifier = localStorage.getItem(STORAGE_KEYS.OAUTH_CODE_VERIFIER);
+  if (!persistedClientId || !tokenEndpoint || !codeVerifier)
+    throw new Error(
+      "Missing OAuth client credentials or endpoints for token exchange"
+    );
+  const clientInformation: { client_id: string; client_secret?: string } = { client_id: persistedClientId };
+  if (persistedClientSecret) {
+    clientInformation.client_secret = persistedClientSecret;
+  }
+  // Retrieve metadata from localStorage if available
+  let metadata;
+  try {
+    const stored = localStorage.getItem(STORAGE_KEYS.OAUTH_AUTHORIZATION_SERVER_METADATA);
+    if (stored) metadata = JSON.parse(stored);
+  } catch {
+    console.warn("Failed to parse stored OAuth metadata, using defaults");
+  }
+  // Use SDK to exchange code for tokens
+  const tokens = await exchangeAuthorization(tokenEndpoint, {
+    metadata,
+    clientInformation,
+    authorizationCode: code,
+    codeVerifier,
+    redirectUri: redirectUriPersisted || redirectUri,
+    resource: resourceStr ? new URL(resourceStr) : undefined,
+  });
+  // Persist access token in localStorage and sync to mcp-servers
+  if (tokens && tokens.access_token) {
+    await secureStorage.setItem(STORAGE_KEYS.OAUTH_ACCESS_TOKEN, tokens.access_token);
+    try {
+      const serversStr = localStorage.getItem(STORAGE_KEYS.MCP_SERVERS);
+      if (serversStr) {
+        const servers = JSON.parse(serversStr);
+        for (const server of servers) {
+          if (
+            server.auth &&
+            (server.auth.type === "bearer" || server.auth.type === "oauth")
+          ) {
+            server.auth.token = tokens.access_token;
           }
         }
-      } catch (e) {
-        // Ignore cross-origin errors until redirect
+        localStorage.setItem(STORAGE_KEYS.MCP_SERVERS, JSON.stringify(servers));
       }
-    }, 500);
-  });
+    } catch (err) {
+      console.warn("Failed to sync token to mcp-servers:", err);
+    }
+  }
+  return tokens;
 }