add mcp support

src/components/OAuthCallback.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useState } from "react";
+import { exchangeCodeForToken } from "../services/oauth";
+import { secureStorage } from "../utils/storage";
+import type { MCPServerConfig } from "../types/mcp";
+import { STORAGE_KEYS, DEFAULTS } from "../config/constants";
+
+interface OAuthTokens {
+  access_token: string;
+  refresh_token?: string;
+  expires_in?: number;
+  token_type?: string;
+  [key: string]: string | number | undefined;
+}
+
+interface OAuthCallbackProps {
+  serverUrl: string;
+  onSuccess?: (tokens: OAuthTokens) => void;
+  onError?: (error: Error) => void;
+}
+
+const OAuthCallback: React.FC<OAuthCallbackProps> = ({
+  serverUrl,
+  onSuccess,
+  onError,
+}) => {
+  const [status, setStatus] = useState<string>("Authorizing...");
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const code = params.get("code");
+    // Always persist MCP server URL for robustness
+    localStorage.setItem(STORAGE_KEYS.OAUTH_MCP_SERVER_URL, serverUrl);
+    if (code) {
+      exchangeCodeForToken({
+        serverUrl,
+        code,
+        redirectUri: window.location.origin + DEFAULTS.OAUTH_REDIRECT_PATH,
+      })
+        .then(async (tokens) => {
+          await secureStorage.setItem(STORAGE_KEYS.OAUTH_ACCESS_TOKEN, tokens.access_token);
+          // Add MCP server to MCPClientService for UI
+          const mcpServerUrl = localStorage.getItem(STORAGE_KEYS.OAUTH_MCP_SERVER_URL);
+          if (mcpServerUrl) {
+            // Use persisted name and transport from initial add
+            const serverName =
+              localStorage.getItem(STORAGE_KEYS.MCP_SERVER_NAME) || mcpServerUrl;
+            const serverTransport = 
+              (localStorage.getItem(STORAGE_KEYS.MCP_SERVER_TRANSPORT) as MCPServerConfig['transport']) || DEFAULTS.MCP_TRANSPORT;
+            // Build config and add to mcp-servers
+            const serverConfig = {
+              id: `server_${Date.now()}`,
+              name: serverName,
+              url: mcpServerUrl,
+              enabled: true,
+              transport: serverTransport,
+              auth: {
+                type: "bearer" as const,
+                token: tokens.access_token,
+              },
+            };
+            // Load existing servers
+            let servers: MCPServerConfig[] = [];
+            try {
+              const stored = localStorage.getItem(STORAGE_KEYS.MCP_SERVERS);
+              if (stored) servers = JSON.parse(stored);
+            } catch {}
+            // Add or update
+            const exists = servers.some((s: MCPServerConfig) => s.url === mcpServerUrl);
+            if (!exists) {
+              servers.push(serverConfig);
+              localStorage.setItem(STORAGE_KEYS.MCP_SERVERS, JSON.stringify(servers));
+            }
+            // Clear temp values from localStorage for clean slate
+            localStorage.removeItem(STORAGE_KEYS.MCP_SERVER_NAME);
+            localStorage.removeItem(STORAGE_KEYS.MCP_SERVER_TRANSPORT);
+            localStorage.removeItem(STORAGE_KEYS.OAUTH_MCP_SERVER_URL);
+          }
+          setStatus("Authorization successful! Redirecting...");
+          if (onSuccess) onSuccess(tokens);
+          // Redirect to main app page after short delay
+          setTimeout(() => {
+            window.location.replace("/");
+          }, 1000);
+        })
+        .catch((err) => {
+          setStatus("OAuth token exchange failed: " + err.message);
+          if (onError) onError(err);
+        });
+    } else {
+      setStatus("Missing authorization code in callback URL.");
+    }
+  }, [serverUrl, onSuccess, onError]);
+
+  return <div>{status}</div>;
+};
+
+export default OAuthCallback;

src/config/constants.ts

@@ -0,0 +1,35 @@
+/**
+ * Application configuration constants
+ */
+
+// MCP Client Configuration
+export const MCP_CLIENT_CONFIG = {
+  NAME: "LFM2-WebGPU",
+  VERSION: "1.0.0",
+  TEST_CLIENT_NAME: "LFM2-WebGPU-Test",
+} as const;
+
+// Storage Keys
+export const STORAGE_KEYS = {
+  MCP_SERVERS: "mcp-servers",
+  OAUTH_CLIENT_ID: "oauth_client_id",
+  OAUTH_CLIENT_SECRET: "oauth_client_secret",
+  OAUTH_AUTHORIZATION_ENDPOINT: "oauth_authorization_endpoint",
+  OAUTH_TOKEN_ENDPOINT: "oauth_token_endpoint",
+  OAUTH_REDIRECT_URI: "oauth_redirect_uri",
+  OAUTH_RESOURCE: "oauth_resource",
+  OAUTH_ACCESS_TOKEN: "oauth_access_token",
+  OAUTH_CODE_VERIFIER: "oauth_code_verifier",
+  OAUTH_MCP_SERVER_URL: "oauth_mcp_server_url",
+  OAUTH_AUTHORIZATION_SERVER_METADATA: "oauth_authorization_server_metadata",
+  MCP_SERVER_NAME: "mcp_server_name",
+  MCP_SERVER_TRANSPORT: "mcp_server_transport",
+} as const;
+
+// Default Values
+export const DEFAULTS = {
+  MCP_TRANSPORT: "streamable-http" as const,
+  OAUTH_REDIRECT_PATH: "/oauth/callback",
+  NOTIFICATION_TIMEOUT: 3000,
+  OAUTH_ERROR_TIMEOUT: 5000,
+} as const;

src/utils/storage.ts

@@ -0,0 +1,108 @@
+/**
+ * Secure storage utilities for sensitive data like OAuth tokens
+ */
+
+const ENCRYPTION_KEY_NAME = 'mcp-encryption-key';
+
+// Generate or retrieve encryption key
+async function getEncryptionKey(): Promise<CryptoKey> {
+  const keyData = localStorage.getItem(ENCRYPTION_KEY_NAME);
+  
+  if (keyData) {
+    try {
+      const keyBuffer = new Uint8Array(JSON.parse(keyData));
+      return await crypto.subtle.importKey(
+        'raw',
+        keyBuffer,
+        { name: 'AES-GCM' },
+        false,
+        ['encrypt', 'decrypt']
+      );
+    } catch {
+      // Key corrupted, generate new one
+    }
+  }
+  
+  // Generate new key
+  const key = await crypto.subtle.generateKey(
+    { name: 'AES-GCM', length: 256 },
+    true,
+    ['encrypt', 'decrypt']
+  );
+  
+  // Store key for future use
+  const keyBuffer = await crypto.subtle.exportKey('raw', key);
+  localStorage.setItem(ENCRYPTION_KEY_NAME, JSON.stringify(Array.from(new Uint8Array(keyBuffer))));
+  
+  return key;
+}
+
+// Encrypt sensitive data
+export async function encryptData(data: string): Promise<string> {
+  try {
+    const key = await getEncryptionKey();
+    const encoder = new TextEncoder();
+    const dataBuffer = encoder.encode(data);
+    
+    const iv = crypto.getRandomValues(new Uint8Array(12));
+    const encryptedBuffer = await crypto.subtle.encrypt(
+      { name: 'AES-GCM', iv },
+      key,
+      dataBuffer
+    );
+    
+    // Combine IV and encrypted data
+    const result = new Uint8Array(iv.length + encryptedBuffer.byteLength);
+    result.set(iv);
+    result.set(new Uint8Array(encryptedBuffer), iv.length);
+    
+    return btoa(String.fromCharCode(...result));
+  } catch (error) {
+    console.warn('Encryption failed, storing data unencrypted:', error);
+    return data;
+  }
+}
+
+// Decrypt sensitive data
+export async function decryptData(encryptedData: string): Promise<string> {
+  try {
+    const key = await getEncryptionKey();
+    const dataBuffer = new Uint8Array(
+      atob(encryptedData).split('').map(char => char.charCodeAt(0))
+    );
+    
+    const iv = dataBuffer.slice(0, 12);
+    const encrypted = dataBuffer.slice(12);
+    
+    const decryptedBuffer = await crypto.subtle.decrypt(
+      { name: 'AES-GCM', iv },
+      key,
+      encrypted
+    );
+    
+    const decoder = new TextDecoder();
+    return decoder.decode(decryptedBuffer);
+  } catch (error) {
+    console.warn('Decryption failed, returning data as-is:', error);
+    return encryptedData;
+  }
+}
+
+// Secure storage wrapper for sensitive data
+export const secureStorage = {
+  async setItem(key: string, value: string): Promise<void> {
+    const encrypted = await encryptData(value);
+    localStorage.setItem(`secure_${key}`, encrypted);
+  },
+  
+  async getItem(key: string): Promise<string | null> {
+    const encrypted = localStorage.getItem(`secure_${key}`);
+    if (!encrypted) return null;
+    
+    return await decryptData(encrypted);
+  },
+  
+  removeItem(key: string): void {
+    localStorage.removeItem(`secure_${key}`);
+  }
+};