nitrostack 1.0.71 → 1.0.72

package/src/studio/package.json

@@ -12,15 +12,17 @@
     "export": "next build && next export"
   },
   "dependencies": {
+    "@elevenlabs/elevenlabs-js": "^2.28.0",
     "@fontsource/inter": "^5.2.8",
     "@fontsource/jetbrains-mono": "^5.2.8",
+    "@heroicons/react": "^2.2.0",
     "@modelcontextprotocol/sdk": "^1.0.4",
     "clsx": "^2.1.0",
     "eventsource": "^2.0.2",
-    "lucide-react": "^0.546.0",
     "next": "^14.2.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "reactflow": "^11.11.4",
     "zustand": "^4.5.0"
   },
   "devDependencies": {

package/src/studio/tailwind.config.ts

@@ -9,21 +9,42 @@ const config: Config = {
   ],
   theme: {
     extend: {
+      fontFamily: {
+        heading: ['Space Grotesk', 'sans-serif'],
+        body: ['IBM Plex Sans', 'sans-serif'],
+        mono: ['JetBrains Mono', 'Fira Code', 'Consolas', 'monospace'],
+      },
       colors: {
-        // Brand colors - Gold & Black
-        primary: {
-          DEFAULT: '#d4af37', // Gold
-          50: '#fdfcf8',
-          100: '#f9f7ed',
-          200: '#f2ecd3',
-          300: '#ead9a1',
-          400: '#e2c870',
-          500: '#d4af37', // Main gold
-          600: '#b8962b',
-          700: '#967824',
-          800: '#7a6020',
-          900: '#654f1d',
-        },
+        // MCP Brand Core Colors
+        slateInk: '#121217',
+        coolMint: '#2AB5A5',
+        signalBlue: '#3B82F6',
+
+        // MCP Extended Palette - Light Mode
+        'light-canvas': '#F5F6FA',
+        'light-white': '#FFFFFF',
+        'light-text-primary': '#121217',
+        'light-text-secondary': '#5F6475',
+        'light-border-soft': '#E6E8F0',
+        'light-border-subtle': '#EEF0F6',
+
+        // MCP Extended Palette - Dark Mode
+        'dark-base': '#0E0F14',
+        'dark-surface': '#1B1B20',
+        'dark-text-primary': '#E9E9F0',
+        'dark-text-muted': '#B4B4CC',
+        'dark-border-panel': '#312626',
+
+        // MCP Status Colors (same light/dark)
+        'status-success': '#2AB5A5',
+        'status-warning': '#F59E0B',
+        'status-error': '#EF4444',
+        'status-info': '#0A9CA9',
+
+        // MCP Accent
+        'accent-steel': '#4D777F',
+
+        // CSS Variable mapped colors (for compatibility)
         background: 'hsl(var(--background))',
         foreground: 'hsl(var(--foreground))',
         card: {
@@ -34,6 +55,10 @@ const config: Config = {
           DEFAULT: 'hsl(var(--popover))',
           foreground: 'hsl(var(--popover-foreground))',
         },
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
         secondary: {
           DEFAULT: 'hsl(var(--secondary))',
           foreground: 'hsl(var(--secondary-foreground))',
@@ -55,9 +80,30 @@ const config: Config = {
         ring: 'hsl(var(--ring))',
       },
       borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
+        // MCP Border Radius System
+        DEFAULT: '4px', // MCP default
+        'none': '0',
+        'sm': '2px',
+        'md': '4px', // MCP default
+        'lg': '6px',
+        'xl': '8px',
+        '2xl': '12px',
+        '3xl': '16px',
+        'pill': '999px', // MCP pill
+        'full': '9999px', // Circle
+      },
+      boxShadow: {
+        // MCP Shadow System - Light Mode
+        'low-light': '0px 1px 3px rgba(240, 100, 49, 0.08)',
+        'medium-light': '0px 4px 12px rgba(240, 100, 49, 0.11)',
+        'high-light': '0px 8px 28px rgba(240, 100, 49, 0.14)',
+        'focus-light': '0px 0px 28px rgba(173, 62, 44, 0.30)',
+
+        // MCP Shadow System - Dark Mode
+        'low-dark': '0px 1px 3px rgba(0, 0, 0, 0.07)',
+        'medium-dark': '0px 4px 12px rgba(0, 0, 0, 0.10)',
+        'high-dark': '0px 8px 28px rgba(0, 0, 0, 0.15)',
+        'focus-dark': '0px 0px 28px rgba(217, 91, 60, 0.16)',
       },
     },
   },

package/src/studio/app/auth/page.tsx

@@ -1,560 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { useStudioStore } from '@/lib/store';
-import { api } from '@/lib/api';
-import { Shield, Key, CheckCircle2, XCircle, Lock, ExternalLink, AlertCircle } from 'lucide-react';
-
-export default function AuthPage() {
-  const { oauthState, setOAuthState, jwtToken, setJwtToken, apiKey, setApiKey } = useStudioStore();
-  const initialServerUrl =
-    process.env.MCP_TRANSPORT_TYPE === 'stdio'
-      ? `http://localhost:${process.env.MCP_SERVER_PORT || 3005}`
-      : '';
-  const [serverUrl, setServerUrl] = useState(initialServerUrl);
-  const [clientName, setClientName] = useState('NitroStack Studio');
-  const [redirectUri, setRedirectUri] = useState('http://localhost:3000/auth/callback');
-  const [manualToken, setManualToken] = useState('');
-  const [manualApiKey, setManualApiKey] = useState('');
-  const [discovering, setDiscovering] = useState(false);
-  const [registering, setRegistering] = useState(false);
-  const [manualClientId, setManualClientId] = useState('');
-  const [manualClientSecret, setManualClientSecret] = useState('');
-
-  const handleDiscover = async () => {
-    setDiscovering(true);
-    try {
-      const resourceMetadataUrl = new URL('/.well-known/oauth-protected-resource', serverUrl).toString();
-      const resourceMetadata = await api.discoverAuth(resourceMetadataUrl, 'resource');
-      const authServerUrl = resourceMetadata.authorization_servers[0];
-      const authServerMetadataUrl = new URL('/.well-known/oauth-authorization-server', authServerUrl).toString();
-      const authServerMetadata = await api.discoverAuth(authServerMetadataUrl, 'auth-server');
-
-      setOAuthState({
-        authServerUrl: serverUrl,
-        resourceMetadata,
-        authServerMetadata,
-      });
-
-      alert('Discovery successful!');
-    } catch (error) {
-      console.error('Discovery failed:', error);
-      alert('Discovery failed. See console for details.');
-    } finally {
-      setDiscovering(false);
-    }
-  };
-
-  const handleRegister = async () => {
-    if (!oauthState.authServerMetadata?.registration_endpoint) {
-      alert('Dynamic registration not supported');
-      return;
-    }
-
-    setRegistering(true);
-    try {
-      const registration = await api.registerClient(
-        oauthState.authServerMetadata.registration_endpoint,
-        {
-          client_name: clientName,
-          redirect_uris: [redirectUri],
-          grant_types: ['authorization_code', 'refresh_token'],
-          response_types: ['code'],
-          scope: oauthState.selectedScopes.join(' '),
-        }
-      );
-
-      setOAuthState({ clientRegistration: registration });
-      alert('Client registered successfully!');
-    } catch (error) {
-      console.error('Registration failed:', error);
-      alert('Registration failed. See console for details.');
-    } finally {
-      setRegistering(false);
-    }
-  };
-
-  const handleManualCredentials = () => {
-    if (!manualClientId.trim()) {
-      alert('Please enter Client ID');
-      return;
-    }
-
-    // Store manual credentials
-    setOAuthState({
-      ...oauthState,
-      clientRegistration: {
-        client_id: manualClientId.trim(),
-        client_secret: manualClientSecret.trim() || undefined,
-      },
-    });
-
-    alert('Client credentials saved!');
-  };
-
-  const handleUseManualToken = () => {
-    if (!manualToken.trim()) {
-      alert('Please enter a token');
-      return;
-    }
-
-    setJwtToken(manualToken);
-    setManualToken('');
-    alert('Token set successfully!');
-  };
-
-  const handleUseApiKey = () => {
-    if (!manualApiKey.trim()) {
-      alert('Please enter an API key');
-      return;
-    }
-
-    setApiKey(manualApiKey);
-    setManualApiKey('');
-    alert('API key set successfully!');
-  };
-
-  const handleStartOAuthFlow = async () => {
-    if (!oauthState.clientRegistration?.client_id) {
-      alert('Please register a client or enter manual credentials first');
-      return;
-    }
-
-    if (!oauthState.authServerMetadata?.authorization_endpoint) {
-      alert('Authorization endpoint not found in server metadata');
-      return;
-    }
-
-    try {
-      // Generate PKCE challenge
-      const codeVerifier = generateCodeVerifier();
-      const codeChallenge = await generateCodeChallenge(codeVerifier);
-      
-      // Store verifier for callback
-      sessionStorage.setItem('oauth_code_verifier', codeVerifier);
-      sessionStorage.setItem('oauth_state', Math.random().toString(36).substring(7));
-
-      // Build authorization URL
-      const authUrl = new URL(oauthState.authServerMetadata.authorization_endpoint);
-      authUrl.searchParams.set('client_id', oauthState.clientRegistration.client_id);
-      authUrl.searchParams.set('response_type', 'code');
-      authUrl.searchParams.set('redirect_uri', redirectUri);
-      authUrl.searchParams.set('scope', oauthState.resourceMetadata?.scopes_supported?.join(' ') || 'openid profile');
-      authUrl.searchParams.set('state', sessionStorage.getItem('oauth_state')!);
-      authUrl.searchParams.set('code_challenge', codeChallenge);
-      authUrl.searchParams.set('code_challenge_method', 'S256');
-      
-      // CRITICAL: Add audience parameter to request access token for the API
-      // Without this, Auth0 returns an opaque/encrypted token instead of a JWT
-      if (oauthState.resourceMetadata?.resource) {
-        authUrl.searchParams.set('audience', oauthState.resourceMetadata.resource);
-        console.log('🎯 Setting audience parameter:', oauthState.resourceMetadata.resource);
-      }
-
-      // Open authorization URL
-      window.location.href = authUrl.toString();
-    } catch (error) {
-      console.error('Failed to start OAuth flow:', error);
-      alert('Failed to start OAuth flow. See console for details.');
-    }
-  };
-
-  // PKCE helpers
-  const generateCodeVerifier = () => {
-    const array = new Uint8Array(32);
-    crypto.getRandomValues(array);
-    return base64UrlEncode(array);
-  };
-
-  const generateCodeChallenge = async (verifier: string) => {
-    const encoder = new TextEncoder();
-    const data = encoder.encode(verifier);
-    const hash = await crypto.subtle.digest('SHA-256', data);
-    return base64UrlEncode(new Uint8Array(hash));
-  };
-
-  const base64UrlEncode = (buffer: Uint8Array) => {
-    const base64 = btoa(String.fromCharCode(...buffer));
-    return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
-  };
-
-  return (
-    <div className="fixed inset-0 flex flex-col bg-background" style={{ left: 'var(--sidebar-width, 15rem)' }}>
-      {/* Sticky Header */}
-      <div className="sticky top-0 z-10 border-b border-border/50 px-6 py-3 flex items-center justify-between bg-card/80 backdrop-blur-md shadow-sm">
-        <div className="flex items-center gap-3">
-          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-violet-500 to-purple-500 flex items-center justify-center shadow-md">
-            <Shield className="w-5 h-5 text-white" strokeWidth={2.5} />
-          </div>
-          <div>
-            <h1 className="text-lg font-bold text-foreground">OAuth 2.1</h1>
-          </div>
-        </div>
-      </div>
-
-      {/* Content - ONLY this scrolls */}
-      <div className="flex-1 overflow-y-auto overflow-x-hidden">
-        <div className="max-w-4xl mx-auto px-6 py-6">
-        <div className="space-y-6">
-        {/* JWT Token Management */}
-        <div className="card card-hover p-6">
-          <h2 className="text-xl font-semibold text-foreground mb-4 flex items-center gap-2">
-            <Key className="w-5 h-5 text-primary" />
-            JWT Token
-          </h2>
-          
-          {/* Status Badge */}
-          <div className="flex items-center gap-4 mb-6">
-            <div className={`w-14 h-14 rounded-xl flex items-center justify-center ${jwtToken ? 'bg-emerald-500/10' : 'bg-rose-500/10'}`}>
-              {jwtToken ? (
-                <CheckCircle2 className="w-8 h-8 text-emerald-500" />
-              ) : (
-                <XCircle className="w-8 h-8 text-rose-500" />
-              )}
-            </div>
-            <div className="flex-1">
-              <p className="font-semibold text-foreground">
-                {jwtToken ? 'Token Active' : 'No Token Set'}
-              </p>
-              <p className="text-sm text-muted-foreground mt-1">
-                {jwtToken 
-                  ? 'Token is automatically included in all tool calls and chat requests' 
-                  : 'Set a token manually or login via tools to authenticate'}
-              </p>
-            </div>
-          </div>
-
-          {/* Token Input/Display */}
-          <div className="space-y-3">
-            <label className="block text-sm font-medium text-foreground">
-              Token Value
-              {jwtToken && <span className="ml-2 text-xs text-emerald-500">(Currently Active)</span>}
-            </label>
-            <div className="flex gap-2">
-              <input
-                type="text"
-                value={manualToken || jwtToken || ''}
-                onChange={(e) => setManualToken(e.target.value)}
-                placeholder="Paste or edit JWT token here..."
-                className="input flex-1 font-mono text-sm"
-              />
-              <button 
-                onClick={handleUseManualToken} 
-                className="btn btn-primary gap-2"
-                disabled={!manualToken.trim()}
-              >
-                <Key className="w-4 h-4" />
-                {jwtToken ? 'Update' : 'Set'} Token
-              </button>
-            </div>
-            
-            {jwtToken && (
-              <div className="flex gap-2">
-                <button
-                  onClick={() => {
-                    setManualToken(jwtToken);
-                    alert('Token copied to input for editing');
-                  }}
-                  className="btn btn-secondary btn-sm gap-2"
-                >
-                  <Lock className="w-3 h-3" />
-                  Edit Current Token
-                </button>
-                <button
-                  onClick={() => {
-                    setJwtToken(null);
-                    setManualToken('');
-                    alert('Token cleared');
-                  }}
-                  className="btn btn-secondary btn-sm gap-2"
-                >
-                  <XCircle className="w-3 h-3" />
-                  Clear Token
-                </button>
-              </div>
-            )}
-          </div>
-
-          {/* Info Box */}
-          <div className="mt-4 p-4 bg-blue-500/10 border border-blue-500/20 rounded-lg">
-            <div className="flex items-start gap-2">
-              <AlertCircle className="w-5 h-5 text-blue-400 mt-0.5 flex-shrink-0" />
-              <div className="text-sm text-blue-200">
-                <p className="font-medium mb-1">How Token Management Works:</p>
-                <ul className="list-disc list-inside space-y-1 text-blue-300/80">
-                  <li>Login via tool execution automatically saves token here</li>
-                  <li>Login via chat automatically saves token here</li>
-                  <li>Manually paste token here to use it globally</li>
-                  <li>Token persists across page refresh</li>
-                  <li>Token is sent with all subsequent requests</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* API Key Management */}
-        <div className="card card-hover p-6">
-          <h2 className="text-xl font-semibold text-foreground mb-4 flex items-center gap-2">
-            <Key className="w-5 h-5 text-primary" />
-            API Key
-          </h2>
-          
-          {/* Status Badge */}
-          <div className="flex items-center gap-4 mb-6">
-            <div className={`w-14 h-14 rounded-xl flex items-center justify-center ${apiKey ? 'bg-emerald-500/10' : 'bg-rose-500/10'}`}>
-              {apiKey ? (
-                <CheckCircle2 className="w-8 h-8 text-emerald-500" />
-              ) : (
-                <XCircle className="w-8 h-8 text-rose-500" />
-              )}
-            </div>
-            <div className="flex-1">
-              <p className="font-semibold text-foreground">
-                {apiKey ? 'API Key Active' : 'No API Key Set'}
-              </p>
-              <p className="text-sm text-muted-foreground mt-1">
-                {apiKey 
-                  ? 'API key is automatically included in all tool calls and chat requests' 
-                  : 'Set an API key to access protected tools'}
-              </p>
-            </div>
-          </div>
-
-          {/* API Key Input/Display */}
-          <div className="space-y-3">
-            <label className="block text-sm font-medium text-foreground">
-              API Key Value
-              {apiKey && <span className="ml-2 text-xs text-emerald-500">(Currently Active)</span>}
-            </label>
-            <div className="flex gap-2">
-              <input
-                type="password"
-                value={manualApiKey || apiKey || ''}
-                onChange={(e) => setManualApiKey(e.target.value)}
-                placeholder="Enter your API key here (e.g., sk_...)..."
-                className="input flex-1 font-mono text-sm"
-              />
-              <button 
-                onClick={handleUseApiKey} 
-                className="btn btn-primary gap-2"
-                disabled={!manualApiKey.trim()}
-              >
-                <Key className="w-4 h-4" />
-                {apiKey ? 'Update' : 'Set'} Key
-              </button>
-            </div>
-            
-            {apiKey && (
-              <div className="flex gap-2">
-                <button
-                  onClick={() => {
-                    setManualApiKey(apiKey);
-                    alert('API key copied to input for editing');
-                  }}
-                  className="btn btn-secondary btn-sm gap-2"
-                >
-                  <Lock className="w-3 h-3" />
-                  Edit Current Key
-                </button>
-                <button
-                  onClick={() => {
-                    setApiKey(null);
-                    setManualApiKey('');
-                    alert('API key cleared');
-                  }}
-                  className="btn btn-secondary btn-sm gap-2"
-                >
-                  <XCircle className="w-3 h-3" />
-                  Clear Key
-                </button>
-              </div>
-            )}
-          </div>
-
-          {/* Info Box */}
-          <div className="mt-4 p-4 bg-purple-500/10 border border-purple-500/20 rounded-lg">
-            <div className="flex items-start gap-2">
-              <AlertCircle className="w-5 h-5 text-purple-400 mt-0.5 flex-shrink-0" />
-              <div className="text-sm text-purple-200">
-                <p className="font-medium mb-1">API Key Authentication:</p>
-                <ul className="list-disc list-inside space-y-1 text-purple-300/80">
-                  <li>API keys are simpler than JWT tokens</li>
-                  <li>Common format: sk_xxx (secret key) or pk_xxx (public key)</li>
-                  <li>Keys are sent in X-API-Key header or _meta.apiKey field</li>
-                  <li>Ideal for service-to-service authentication</li>
-                  <li>Can be used together with JWT tokens for multi-auth</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* OAuth 2.1 Flow */}
-        <div className="card card-hover p-6">
-          <h2 className="text-xl font-semibold text-foreground mb-4 flex items-center gap-2">
-            <Shield className="w-5 h-5 text-primary" />
-            OAuth 2.1 Flow
-          </h2>
-          <p className="text-sm text-muted-foreground mb-6">
-            For OpenAI Apps SDK and OAuth 2.1 compliant servers
-          </p>
-
-          {/* Step 1: Discovery */}
-          <div className="mb-6">
-            <h3 className="font-medium text-foreground mb-3">1. Discover Server Auth</h3>
-            <input
-              type="url"
-              value={serverUrl}
-              onChange={(e) => setServerUrl(e.target.value)}
-              placeholder="https://mcp.example.com"
-              className="input mb-3"
-            />
-            <button
-              onClick={handleDiscover}
-              className="btn btn-primary gap-2"
-              disabled={discovering || !serverUrl}
-            >
-              <ExternalLink className="w-4 h-4" />
-              {discovering ? 'Discovering...' : 'Discover Auth Config'}
-            </button>
-
-            {oauthState.resourceMetadata && (
-              <div className="mt-4 p-4 bg-emerald-500/10 border border-emerald-500/20 rounded-lg">
-                <div className="flex items-center gap-2 mb-2">
-                  <CheckCircle2 className="w-4 h-4 text-emerald-500" />
-                  <p className="text-sm font-semibold text-emerald-600 dark:text-emerald-400">Discovery Successful</p>
-                </div>
-                <details className="text-sm text-muted-foreground">
-                  <summary className="cursor-pointer hover:text-foreground font-medium">
-                    View Metadata
-                  </summary>
-                  <pre className="mt-3 p-3 bg-background rounded-lg overflow-auto max-h-40 font-mono text-xs text-foreground border border-border">
-                    {JSON.stringify(oauthState.resourceMetadata, null, 2)}
-                  </pre>
-                </details>
-              </div>
-            )}
-          </div>
-
-          {/* Step 2a: Manual Client Credentials (Alternative to Registration) */}
-          {oauthState.resourceMetadata && !oauthState.clientRegistration && (
-            <div className="mb-6 border-t border-border pt-6">
-              <h3 className="font-medium text-foreground mb-3">2a. Use Existing Client (Optional)</h3>
-              <p className="text-sm text-muted-foreground mb-4">
-                If you already have a Client ID and Secret from your OAuth provider, enter them here instead of dynamic registration.
-              </p>
-              <div className="space-y-3 mb-4">
-                <input
-                  type="text"
-                  value={manualClientId}
-                  onChange={(e) => setManualClientId(e.target.value)}
-                  placeholder="Client ID"
-                  className="input font-mono"
-                />
-                <input
-                  type="password"
-                  value={manualClientSecret}
-                  onChange={(e) => setManualClientSecret(e.target.value)}
-                  placeholder="Client Secret (optional for public clients)"
-                  className="input font-mono"
-                />
-              </div>
-              <button
-                onClick={handleManualCredentials}
-                className="btn btn-primary gap-2"
-                disabled={!manualClientId.trim()}
-              >
-                <Key className="w-4 h-4" />
-                Save Client Credentials
-              </button>
-            </div>
-          )}
-
-          {/* Step 2b: Registration */}
-          {oauthState.authServerMetadata && !oauthState.clientRegistration && (
-            <div className="mb-6 border-t border-border pt-6">
-              <h3 className="font-medium text-foreground mb-3">2b. Register New Client (Dynamic)</h3>
-              <div className="space-y-3 mb-4">
-                <input
-                  type="text"
-                  value={clientName}
-                  onChange={(e) => setClientName(e.target.value)}
-                  placeholder="Client Name"
-                  className="input"
-                />
-                <input
-                  type="url"
-                  value={redirectUri}
-                  onChange={(e) => setRedirectUri(e.target.value)}
-                  placeholder="Redirect URI"
-                  className="input"
-                />
-              </div>
-              <button
-                onClick={handleRegister}
-                className="btn btn-primary gap-2"
-                disabled={registering}
-              >
-                <Shield className="w-4 h-4" />
-                {registering ? 'Registering...' : 'Register Client'}
-              </button>
-
-              {oauthState.clientRegistration && (
-                <div className="mt-4 p-4 bg-emerald-500/10 border border-emerald-500/20 rounded-lg">
-                  <div className="flex items-center gap-2 mb-2">
-                    <CheckCircle2 className="w-4 h-4 text-emerald-500" />
-                    <p className="text-sm font-semibold text-emerald-600 dark:text-emerald-400">Registration Successful</p>
-                  </div>
-                  <p className="text-sm text-muted-foreground font-mono">
-                    Client ID: {oauthState.clientRegistration.client_id}
-                  </p>
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Step 3: Start Flow */}
-          {oauthState.clientRegistration && (
-            <div className="border-t border-border pt-6">
-              <h3 className="font-medium text-foreground mb-3">3. Start OAuth Flow</h3>
-              <button 
-                onClick={handleStartOAuthFlow}
-                className="btn btn-primary gap-2"
-              >
-                <ExternalLink className="w-4 h-4" />
-                Start Authorization Flow
-              </button>
-              <p className="text-sm text-muted-foreground mt-2 flex items-center gap-1">
-                <AlertCircle className="w-4 h-4" />
-                This will redirect you to the authorization server for login
-              </p>
-            </div>
-          )}
-        </div>
-
-        {/* API Keys */}
-        <div className="card card-hover p-6">
-          <h2 className="text-xl font-semibold text-foreground mb-4 flex items-center gap-2">
-            <Key className="w-5 h-5 text-primary" />
-            API Keys
-          </h2>
-          <p className="text-sm text-muted-foreground mb-3">
-            For servers that use API key authentication
-          </p>
-          <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4">
-            <div className="flex items-start gap-2">
-              <AlertCircle className="w-5 h-5 text-blue-500 mt-0.5 flex-shrink-0" />
-              <p className="text-sm text-foreground">
-                API key authentication is typically configured per-tool in the server configuration.
-                Refer to your server's documentation for details.
-              </p>
-            </div>
-          </div>
-        </div>
-        </div>
-        </div>
-      </div>
-    </div>
-  );
-}