nitrostack 1.0.71 → 1.0.73

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

@@ -1,14 +1,291 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { Settings as SettingsIcon, Wifi, CheckCircle, AlertCircle } from 'lucide-react';
+import { api } from '@/lib/api';
+import { useStudioStore } from '@/lib/store';
+import {
+  Cog6ToothIcon as SettingsIcon,
+  WifiIcon,
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  MicrophoneIcon,
+  SpeakerWaveIcon,
+  BookmarkIcon,
+  ArrowTopRightOnSquareIcon,
+  InformationCircleIcon,
+  ShieldCheckIcon,
+  KeyIcon,
+  XCircleIcon,
+  LockClosedIcon,
+  ClockIcon,
+  HeartIcon,
+  ArrowTrendingUpIcon,
+  ChatBubbleLeftIcon,
+} from '@heroicons/react/24/outline';
 
 export default function SettingsPage() {
+  // Auth State
+  const { oauthState, setOAuthState } = useStudioStore();
+  const initialServerUrl =
+    typeof process !== 'undefined' && 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('');
+
+  // Ping State
+  const { pingHistory, addPingResult } = useStudioStore();
+  const [pinging, setPinging] = useState(false);
+  const [lastLatency, setLastLatency] = useState<number | null>(null);
+
+  // Ping Helpers
+  const handlePing = async () => {
+    setPinging(true);
+    const startTime = Date.now();
+
+    try {
+      await api.ping();
+      const latency = Date.now() - startTime;
+      setLastLatency(latency);
+      addPingResult({ time: new Date(), latency });
+    } catch (error) {
+      console.error('Ping failed:', error);
+    } finally {
+      setPinging(false);
+    }
+  };
+
+  const getLatencyColor = (latency: number) => {
+    if (latency < 100) return 'text-emerald-500';
+    if (latency < 500) return 'text-yellow-500';
+    return 'text-rose-500';
+  };
+
+  const getLatencyDotColor = (latency: number) => {
+    if (latency < 100) return 'bg-emerald-500';
+    if (latency < 500) return 'bg-yellow-500';
+    return 'bg-rose-500';
+  };
+
+  // Calculate statistics
+  const averageLatency = pingHistory.length > 0
+    ? Math.round(pingHistory.reduce((acc, curr) => acc + curr.latency, 0) / pingHistory.length)
+    : 0;
+
+  const minLatency = pingHistory.length > 0
+    ? Math.min(...pingHistory.map(p => p.latency))
+    : 0;
+
+  const maxLatency = pingHistory.length > 0
+    ? Math.max(...pingHistory.map(p => p.latency))
+    : 0;
+
+  // 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, '');
+  };
+
+  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;
+    }
+
+    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 {
+      const codeVerifier = generateCodeVerifier();
+      const codeChallenge = await generateCodeChallenge(codeVerifier);
+
+      sessionStorage.setItem('oauth_code_verifier', codeVerifier);
+      sessionStorage.setItem('oauth_state', Math.random().toString(36).substring(7));
+
+      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');
+
+      if (oauthState.resourceMetadata?.resource) {
+        authUrl.searchParams.set('audience', oauthState.resourceMetadata.resource);
+      }
+
+      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.');
+    }
+  };
+
+  const [activeTab, setActiveTab] = useState<'general' | 'chat' | 'auth' | 'ping'>('general');
   const [transport, setTransport] = useState<'stdio' | 'http'>('stdio');
+  const {
+    connection,
+    jwtToken, setJwtToken,
+    apiKey, setApiKey,
+    elevenLabsApiKey, setElevenLabsApiKey
+  } = useStudioStore();
+
+  // Chat Settings State
+  const [currentProvider, setCurrentProvider] = useState<'openai' | 'gemini'>('gemini');
+  const [voiceModel, setVoiceModel] = useState('eleven_multilingual_v2');
+  const [voiceId, setVoiceId] = useState('21m00Tcm4TlvDq8ikWAM'); // Rachel
+  const [availableVoices, setAvailableVoices] = useState<any[]>([]);
+
   const [connecting, setConnecting] = useState(false);
   const [connectionStatus, setConnectionStatus] = useState<'idle' | 'success' | 'error'>('idle');
   const [errorMessage, setErrorMessage] = useState('');
 
+  // Fetch ElevenLabs voices when API key is set
+  useEffect(() => {
+    if (elevenLabsApiKey) {
+      fetch('https://api.elevenlabs.io/v1/voices', {
+        headers: { 'xi-api-key': elevenLabsApiKey }
+      })
+        .then(res => res.json())
+        .then(data => {
+          if (data.voices) {
+            setAvailableVoices(data.voices);
+          }
+        })
+        .catch(err => console.error('Failed to fetch voices:', err));
+    }
+  }, [elevenLabsApiKey]);
+
+  const saveApiKey = (provider: 'openai' | 'gemini') => {
+    const input = document.getElementById(`${provider}-api-key`) as HTMLInputElement;
+    const key = input?.value.trim();
+
+    if (!key || key === '••••••••') {
+      alert('Please enter a valid API key');
+      return;
+    }
+
+    localStorage.setItem(`${provider}_api_key`, key);
+    input.value = '••••••••';
+    alert(`${provider === 'openai' ? 'OpenAI' : 'Gemini'} API key saved`);
+  };
+
+  // ... (existing useEffect and handleSaveSettings) ...
   useEffect(() => {
     // Load saved settings from localStorage
     const savedTransport = localStorage.getItem('mcp_transport');
@@ -42,158 +319,837 @@ export default function SettingsPage() {
       const data = await response.json();
       setConnectionStatus('success');
       console.log('✅ Settings saved and connection established:', data);
-    } catch (error: any) {
+    } catch (error: unknown) {
+      const err = error as Error;
       console.error('❌ Failed to save settings:', error);
       setConnectionStatus('error');
-      setErrorMessage(error.message || 'Failed to connect');
+      setErrorMessage(err.message || 'Failed to connect');
     } finally {
       setConnecting(false);
     }
   };
 
+
   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-primary to-amber-500 flex items-center justify-center shadow-md">
-            <SettingsIcon className="w-5 h-5 text-white" strokeWidth={2.5} />
-          </div>
-          <div>
-            <h1 className="text-lg font-bold text-foreground">Settings</h1>
-          </div>
-        </div>
+      {/* Header */}
+      <div className="sticky top-0 z-10 border-b border-border/50 px-6 py-4 flex items-center justify-between bg-card/50 backdrop-blur-sm">
+        <h1 className="text-lg font-semibold text-foreground flex items-center gap-2">
+          <SettingsIcon className="w-5 h-5 text-muted-foreground" />
+          Settings
+        </h1>
       </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">
-
-      {/* Settings Card */}
-      <div className="max-w-2xl">
-        <div className="card p-6">
-          <h2 className="text-xl font-semibold text-foreground mb-6">Transport Configuration</h2>
-
-          {/* Transport Type Selection */}
-          <div className="mb-6">
-            <label className="block text-sm font-medium text-foreground mb-3">
-              Transport Type
-            </label>
-            <div className="grid grid-cols-2 gap-4">
-              <button
-                disabled
-                className={`p-4 rounded-lg border-2 transition-all text-left border-primary bg-primary/10`}
-              >
-                <div className="flex items-center gap-3 mb-2">
-                  <div className={`w-3 h-3 rounded-full bg-primary`} />
-                  <h3 className="font-semibold text-foreground">STDIO</h3>
-                </div>
-                <p className="text-sm text-muted-foreground">
-                  Direct process communication (default)
-                </p>
-              </button>
-
-              <button
-                disabled
-                className={`p-4 rounded-lg border-2 transition-all text-left border-border hover:border-primary/50`}
-              >
-                <div className="flex items-center gap-3 mb-2">
-                  <div className={`w-3 h-3 rounded-full bg-muted`} />
-                  <h3 className="font-semibold text-foreground">HTTP</h3>
+      <div className="flex flex-1 overflow-hidden">
+        {/* Settings Sidebar */}
+        <div className="w-64 border-r border-border/50 bg-muted/10 p-4 space-y-2 overflow-y-auto">
+          <button
+            onClick={() => setActiveTab('general')}
+            className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'general' ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+              }`}
+          >
+            <SettingsIcon className="w-5 h-5" />
+            General
+          </button>
+          <button
+            onClick={() => setActiveTab('chat')}
+            className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'chat' ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+              }`}
+          >
+            <ChatBubbleLeftIcon className="w-5 h-5" />
+            Chat Configuration
+          </button>
+          <button
+            onClick={() => setActiveTab('auth')}
+            className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'auth' ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+              }`}
+          >
+            <ShieldCheckIcon className="w-5 h-5" />
+            Authentication
+          </button>
+          <button
+            onClick={() => setActiveTab('ping')}
+            className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'ping' ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+              }`}
+          >
+            <WifiIcon className="w-5 h-5" />
+            Connectivity Check
+          </button>
+        </div>
+
+        {/* Content Area */}
+        <div className="flex-1 overflow-y-auto p-8">
+          <div className="max-w-3xl mx-auto animate-fade-in">
+            {activeTab === 'general' && (
+              <div className="space-y-6">
+                <div>
+                  <h2 className="text-xl font-semibold text-foreground mb-1">General Settings</h2>
+                  <p className="text-sm text-muted-foreground">Configure global application settings and transport</p>
                 </div>
-                <p className="text-sm text-muted-foreground">
-                  HTTP/SSE transport for remote servers
-                </p>
-              </button>
-            </div>
-          </div>
 
-          {/* Port Allocation Info */}
-          <div className="mb-6 p-4 bg-blue-500/10 rounded-lg border border-blue-500/20">
-            <h4 className="font-semibold text-foreground mb-2">Port Allocation</h4>
-            <div className="space-y-1 text-sm">
-              <div className="flex items-center gap-2">
-                <span className="text-muted-foreground">Studio UI:</span>
-                <code className="px-2 py-0.5 bg-muted rounded text-foreground">Port 3000</code>
-              </div>
-              <div className="flex items-center gap-2">
-                <span className="text-muted-foreground">Widget Server:</span>
-                <code className="px-2 py-0.5 bg-muted rounded text-foreground">Port 3001</code>
-              </div>
-              <div className="flex items-center gap-2">
-                <span className="text-muted-foreground">MCP HTTP Server:</span>
-                <code className="px-2 py-0.5 bg-primary/20 rounded text-primary font-semibold">Port 3002</code>
+                {/* Transport Configuration (Existing) */}
+                <div className="card p-6">
+                  <h2 className="text-lg font-semibold text-foreground mb-6">Transport Configuration</h2>
+
+                  {/* Transport Type Selection */}
+                  <div className="mb-6">
+                    <label className="block text-sm font-medium text-foreground mb-3">
+                      Transport Type
+                    </label>
+                    <div className="grid grid-cols-2 gap-4">
+                      <button
+                        disabled
+                        className={`p-4 rounded-lg border-2 transition-all text-left border-primary bg-primary/10`}
+                      >
+                        <div className="flex items-center gap-3 mb-2">
+                          <div className={`w-3 h-3 rounded-full bg-primary`} />
+                          <h3 className="font-semibold text-foreground">STDIO</h3>
+                        </div>
+                        <p className="text-sm text-muted-foreground">
+                          Direct process communication (default)
+                        </p>
+                      </button>
+
+                      <button
+                        disabled
+                        className={`p-4 rounded-lg border-2 transition-all text-left border-border hover:border-primary/50`}
+                      >
+                        <div className="flex items-center gap-3 mb-2">
+                          <div className={`w-3 h-3 rounded-full bg-muted`} />
+                          <h3 className="font-semibold text-foreground">HTTP</h3>
+                        </div>
+                        <p className="text-sm text-muted-foreground">
+                          HTTP/SSE transport for remote servers
+                        </p>
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* Port Allocation Info */}
+                  <div className="mb-6 p-4 bg-blue-500/10 rounded-lg border border-blue-500/20">
+                    <h4 className="font-semibold text-foreground mb-2">Port Allocation</h4>
+                    <div className="space-y-1 text-sm">
+                      <div className="flex items-center gap-2">
+                        <span className="text-muted-foreground">Studio UI:</span>
+                        <code className="px-2 py-0.5 bg-muted rounded text-foreground">Port 3000</code>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <span className="text-muted-foreground">Widget Server:</span>
+                        <code className="px-2 py-0.5 bg-muted rounded text-foreground">Port 3001</code>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <span className="text-muted-foreground">MCP HTTP Server:</span>
+                        <code className="px-2 py-0.5 bg-primary/20 rounded text-primary font-semibold">Port 3002</code>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Connection Status & Save Button */}
+                  {connectionStatus !== 'idle' && (
+                    <div className={`mb-6 p-4 rounded-lg border ${connectionStatus === 'success'
+                      ? 'bg-emerald-500/10 border-emerald-500/20'
+                      : 'bg-rose-500/10 border-rose-500/20'
+                      }`}>
+                      <div className="flex gap-3">
+                        {connectionStatus === 'success' ? (
+                          <>
+                            <CheckCircleIcon className="w-5 h-5 text-emerald-500 flex-shrink-0 mt-0.5" />
+                            <div>
+                              <h4 className="font-semibold text-emerald-500 mb-1">Connected</h4>
+                              <p className="text-sm text-emerald-600">
+                                Settings saved and connection established successfully.
+                              </p>
+                            </div>
+                          </>
+                        ) : (
+                          <>
+                            <ExclamationCircleIcon className="w-5 h-5 text-rose-500 flex-shrink-0 mt-0.5" />
+                            <div>
+                              <h4 className="font-semibold text-rose-500 mb-1">Connection Failed</h4>
+                              <p className="text-sm text-rose-600">
+                                {errorMessage || 'Failed to establish connection with the selected transport.'}
+                              </p>
+                            </div>
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  )}
+
+                  <button
+                    onClick={handleSaveSettings}
+                    disabled={connecting}
+                    className="btn btn-primary w-full"
+                  >
+                    {connecting ? (
+                      <>
+                        <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                        Connecting...
+                      </>
+                    ) : (
+                      'Save & Connect'
+                    )}
+                  </button>
+                </div>
               </div>
-            </div>
-          </div>
+            )}
+
+            {activeTab === 'chat' && (
+              <div className="space-y-8 animate-fade-in">
+                <div>
+                  <h2 className="text-xl font-semibold text-foreground mb-1">Chat Configuration</h2>
+                  <p className="text-sm text-muted-foreground">Manage AI providers, API keys, and voice settings</p>
+                </div>
+
+                {/* Section: AI Provider */}
+                <section className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <label className="text-xs font-bold text-muted-foreground uppercase tracking-wider">AI Provider</label>
+                    <span className="text-[10px] font-medium px-2 py-0.5 rounded-full bg-primary/10 text-primary border border-primary/20">Active</span>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-3">
+                    <button
+                      onClick={() => setCurrentProvider('gemini')}
+                      className={`relative p-4 rounded-xl border-2 text-left transition-all duration-200 group ${currentProvider === 'gemini'
+                        ? 'border-blue-500 bg-blue-50/50 dark:bg-blue-500/10 shadow-sm'
+                        : 'border-border hover:border-blue-500/50 hover:bg-muted/30'
+                        }`}
+                    >
+                      {currentProvider === 'gemini' && (
+                        <div className="absolute top-3 right-3 w-2 h-2 rounded-full bg-blue-500 shadow-[0_0_8px_rgba(59,130,246,0.6)]" />
+                      )}
+                      <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center mb-3 shadow-inner">
+                        <span className="text-white font-bold text-sm">G</span>
+                      </div>
+                      <div className="font-semibold text-sm text-foreground mb-0.5">Gemini</div>
+                      <div className="text-xs text-muted-foreground">Google AI</div>
+                    </button>
+
+                    <button
+                      onClick={() => setCurrentProvider('openai')}
+                      className={`relative p-4 rounded-xl border-2 text-left transition-all duration-200 group ${currentProvider === 'openai'
+                        ? 'border-green-500 bg-green-50/50 dark:bg-green-500/10 shadow-sm'
+                        : 'border-border hover:border-green-500/50 hover:bg-muted/30'
+                        }`}
+                    >
+                      {currentProvider === 'openai' && (
+                        <div className="absolute top-3 right-3 w-2 h-2 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]" />
+                      )}
+                      <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center mb-3 shadow-inner">
+                        <span className="text-white font-bold text-xs tracking-tighter">AI</span>
+                      </div>
+                      <div className="font-semibold text-sm text-foreground mb-0.5">OpenAI</div>
+                      <div className="text-xs text-muted-foreground">GPT-4</div>
+                    </button>
+                  </div>
+                </section>
+
+                {/* Section: API Keys */}
+                <section className="space-y-4">
+                  <label className="text-xs font-bold text-muted-foreground uppercase tracking-wider">Configuration</label>
+
+                  <div className="space-y-4">
+                    {currentProvider === 'gemini' && (
+                      <div className="animate-fade-in">
+                        <label className="block text-sm font-medium text-foreground mb-2">Gemini API Key</label>
+                        <div className="relative flex items-center">
+                          <input
+                            type="password"
+                            className="input w-full pr-20 font-mono text-sm bg-muted/30 focus:bg-background transition-colors"
+                            placeholder={localStorage.getItem('gemini_api_key') ? "••••••••" : "Paste API Key"}
+                            id="gemini-api-key"
+                          />
+                          <button
+                            onClick={() => saveApiKey('gemini')}
+                            className="absolute right-1 top-1 bottom-1 px-3 bg-white dark:bg-zinc-800 hover:bg-gray-50 dark:hover:bg-zinc-700 text-xs font-medium rounded border border-border transition-colors shadow-sm"
+                          >
+                            Save
+                          </button>
+                        </div>
+                        <p className="text-[10px] text-muted-foreground mt-2 flex items-center gap-1.5">
+                          <InformationCircleIcon className="w-3 h-3" />
+                          <span>Get your key from <a href="https://aistudio.google.com/app/apikey" target="_blank" className="underline hover:text-foreground">Google AI Studio</a></span>
+                        </p>
+                      </div>
+                    )}
+
+                    {currentProvider === 'openai' && (
+                      <div className="animate-fade-in">
+                        <label className="block text-sm font-medium text-foreground mb-2">OpenAI API Key</label>
+                        <div className="relative flex items-center">
+                          <input
+                            type="password"
+                            className="input w-full pr-20 font-mono text-sm bg-muted/30 focus:bg-background transition-colors"
+                            placeholder={localStorage.getItem('openai_api_key') ? "••••••••" : "Paste API Key"}
+                            id="openai-api-key"
+                          />
+                          <button
+                            onClick={() => saveApiKey('openai')}
+                            className="absolute right-1 top-1 bottom-1 px-3 bg-white dark:bg-zinc-800 hover:bg-gray-50 dark:hover:bg-zinc-700 text-xs font-medium rounded border border-border transition-colors shadow-sm"
+                          >
+                            Save
+                          </button>
+                        </div>
+                        <p className="text-[10px] text-muted-foreground mt-2 flex items-center gap-1.5">
+                          <InformationCircleIcon className="w-3 h-3" />
+                          <span>Get your key from <a href="https://platform.openai.com/api-keys" target="_blank" className="underline hover:text-foreground">OpenAI Platform</a></span>
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                </section>
 
-          {/* Info Box */}
-          <div className="mb-6 p-4 bg-primary/5 rounded-lg border border-primary/20">
-            <div className="flex gap-3">
-              <Wifi className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
-              <div>
-                <h4 className="font-semibold text-foreground mb-1">Transport Information</h4>
-                <p className="text-sm text-muted-foreground mb-2">
-                  <strong>STDIO</strong> (Default): Studio spawns the MCP server as a child process and communicates 
-                  via standard input/output. The MCP server still runs dual transport (STDIO + HTTP on port 3002).
-                </p>
+                {/* Section: Voice (ElevenLabs) */}
+                <section className="space-y-4 pt-4 border-t border-border">
+                  <div className="flex items-center justify-between">
+                    <label className="text-xs font-bold text-muted-foreground uppercase tracking-wider flex items-center gap-2">
+                      <MicrophoneIcon className="w-3 h-3" /> Voice Integration
+                    </label>
+                    {elevenLabsApiKey && <span className="text-[10px] bg-purple-500/10 text-purple-600 px-2 py-0.5 rounded-full font-medium border border-purple-500/20">Enabled</span>}
+                  </div>
+
+                  <div className="bg-card rounded-xl border border-border overflow-hidden">
+                    <div className="p-4 bg-muted/10 border-b border-border">
+                      <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center text-white shadow-md">
+                          <SpeakerWaveIcon className="w-5 h-5" />
+                        </div>
+                        <div>
+                          <h3 className="text-sm font-semibold text-foreground">ElevenLabs</h3>
+                          <p className="text-xs text-muted-foreground">Text-to-Speech Engine</p>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="p-4 space-y-4">
+                      <div>
+                        <label className="block text-xs font-medium text-foreground mb-1.5">API Configuration</label>
+                        <div className="relative">
+                          <input
+                            type="password"
+                            value={elevenLabsApiKey || ''}
+                            onChange={(e) => setElevenLabsApiKey(e.target.value || null)}
+                            className="input w-full font-mono text-xs"
+                            placeholder={elevenLabsApiKey ? "••••••••••••••••" : "Paste your xi-api-key here"}
+                          />
+                        </div>
+                      </div>
+
+                      {elevenLabsApiKey ? (
+                        <div className="space-y-3 animate-fade-in">
+                          <div>
+                            <label className="block text-xs font-medium text-foreground mb-1.5">Voice Model</label>
+                            <select
+                              value={voiceModel}
+                              onChange={(e) => setVoiceModel(e.target.value)}
+                              className="input w-full text-xs"
+                            >
+                              <option value="eleven_multilingual_v2">Multilingual v2 (Best)</option>
+                              <option value="eleven_turbo_v2_5">Turbo v2.5 (Fastest)</option>
+                              <option value="eleven_monolingual_v1">Monolingual v1</option>
+                            </select>
+                          </div>
+
+                          <div>
+                            <label className="block text-xs font-medium text-foreground mb-1.5">Voice ID</label>
+                            <select
+                              value={voiceId}
+                              onChange={(e) => setVoiceId(e.target.value)}
+                              className="input w-full text-xs"
+                            >
+                              {availableVoices.map(v => (
+                                <option key={v.voice_id} value={v.voice_id}>{v.name} ({v.labels?.accent || 'Default'})</option>
+                              ))}
+                            </select>
+                          </div>
+                        </div>
+                      ) : (
+                        <div className="p-3 bg-muted/30 rounded-lg border border-dashed border-border text-center">
+                          <p className="text-xs text-muted-foreground">Add API key to unlock premium voice capabilities.</p>
+                          <a href="https://elevenlabs.io" target="_blank" className="text-[10px] text-primary hover:underline mt-1 block">Get a key →</a>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </section>
               </div>
-            </div>
-          </div>
+            )}
+
+            {activeTab === 'auth' && (
+              <div className="space-y-8 animate-fade-in">
+                <div>
+                  <h2 className="text-xl font-semibold text-foreground mb-1">Authentication</h2>
+                  <p className="text-sm text-muted-foreground">Configure OAuth 2.1, JWT tokens, and API Keys</p>
+                </div>
+
+                {/* 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">
+                    <KeyIcon className="w-5 h-5 text-primary" />
+                    JWT Token
+                  </h2>
 
-          {/* Connection Status */}
-          {connectionStatus !== 'idle' && (
-            <div className={`mb-6 p-4 rounded-lg border ${
-              connectionStatus === 'success'
-                ? 'bg-emerald-500/10 border-emerald-500/20'
-                : 'bg-rose-500/10 border-rose-500/20'
-            }`}>
-              <div className="flex gap-3">
-                {connectionStatus === 'success' ? (
-                  <>
-                    <CheckCircle className="w-5 h-5 text-emerald-500 flex-shrink-0 mt-0.5" />
-                    <div>
-                      <h4 className="font-semibold text-emerald-500 mb-1">Connected</h4>
-                      <p className="text-sm text-emerald-600">
-                        Settings saved and connection established successfully.
+                  {/* Status Badge */}
+                  <div className="flex items-center gap-4 mb-6">
+                    <div className={`w-14 h-14 rounded flex items-center justify-center ${jwtToken ? 'bg-emerald-500/10' : 'bg-rose-500/10'}`}>
+                      {jwtToken ? (
+                        <CheckCircleIcon className="w-8 h-8 text-emerald-500" />
+                      ) : (
+                        <XCircleIcon 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()}
+                      >
+                        <KeyIcon 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"
+                        >
+                          <LockClosedIcon 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"
+                        >
+                          <XCircleIcon 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">
+                      <ExclamationCircleIcon 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>
-                  </>
-                ) : (
-                  <>
-                    <AlertCircle className="w-5 h-5 text-rose-500 flex-shrink-0 mt-0.5" />
-                    <div>
-                      <h4 className="font-semibold text-rose-500 mb-1">Connection Failed</h4>
-                      <p className="text-sm text-rose-600">
-                        {errorMessage || 'Failed to establish connection with the selected transport.'}
+                  </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">
+                    <KeyIcon 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 flex items-center justify-center ${apiKey ? 'bg-emerald-500/10' : 'bg-rose-500/10'}`}>
+                      {apiKey ? (
+                        <CheckCircleIcon className="w-8 h-8 text-emerald-500" />
+                      ) : (
+                        <XCircleIcon 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()}
+                      >
+                        <KeyIcon 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"
+                        >
+                          <LockClosedIcon 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"
+                        >
+                          <XCircleIcon 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">
+                      <ExclamationCircleIcon 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">
+                    <ShieldCheckIcon 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}
+                    >
+                      <ArrowTopRightOnSquareIcon 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">
+                          <CheckCircleIcon 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()}
+                      >
+                        <KeyIcon 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}
+                      >
+                        <ShieldCheckIcon 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">
+                            <CheckCircleIcon 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"
+                      >
+                        <ArrowTopRightOnSquareIcon className="w-4 h-4" />
+                        Start Authorization Flow
+                      </button>
+                      <p className="text-sm text-muted-foreground mt-2 flex items-center gap-1">
+                        <ExclamationCircleIcon className="w-4 h-4" />
+                        This will redirect you to the authorization server for login
+                      </p>
+                    </div>
+                  )}
+                </div>
               </div>
-            </div>
-          )}
+            )}
 
-          {/* Save Button */}
-          <button
-            onClick={handleSaveSettings}
-            disabled={connecting}
-            className="btn btn-primary w-full"
-          >
-            {connecting ? (
-              <>
-                <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
-                Connecting...
-              </>
-            ) : (
-              'Save & Connect'
+            {activeTab === 'ping' && (
+              <div className="space-y-8 animate-fade-in">
+                <div>
+                  <h2 className="text-xl font-semibold text-foreground mb-1">Connectivity Check</h2>
+                  <p className="text-sm text-muted-foreground">Test connection latency to your MCP server</p>
+                </div>
+
+                {/* Ping Action Area */}
+                <div className="card p-8 border-2 border-border/50">
+                  <div className="flex flex-col items-center justify-center text-center">
+                    <div className="relative mb-6 group">
+                      <div className={`absolute inset-0 bg-primary/20 rounded-full blur-xl transition-all duration-500 ${pinging ? 'scale-150 opacity-100' : 'scale-100 opacity-0 group-hover:opacity-50'}`} />
+                      <button
+                        onClick={handlePing}
+                        disabled={pinging}
+                        className={`relative w-24 h-24 rounded-full flex items-center justify-center transition-all duration-300 ${pinging
+                          ? 'bg-primary scale-95 shadow-inner'
+                          : 'bg-gradient-to-br from-primary to-primary/80 hover:scale-105 shadow-xl hover:shadow-primary/25'
+                          }`}
+                      >
+                        <WifiIcon className={`w-10 h-10 text-primary-foreground transition-transform duration-700 ${pinging ? 'animate-pulse' : ''}`} />
+                      </button>
+                    </div>
+
+                    <h2 className="text-2xl font-bold text-foreground mb-2">
+                      {pinging ? 'Pinging Server...' : 'Test Connection'}
+                    </h2>
+                    <p className="text-muted-foreground max-w-md mx-auto mb-8">
+                      Send a ping to your MCP server to verify connectivity and measure response latency.
+                    </p>
+
+                    {lastLatency !== null && (
+                      <div className="animate-fade-in flex flex-col items-center">
+                        <div className={`text-5xl font-mono font-bold tracking-tight mb-2 ${getLatencyColor(lastLatency)}`}>
+                          {lastLatency}ms
+                        </div>
+                        <div className="text-muted-foreground flex items-center gap-2 text-sm bg-muted/50 px-3 py-1 rounded-full border border-border/50">
+                          <ClockIcon className="w-4 h-4" />
+                          Last ping latency
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                {/* Statistics Grid */}
+                {pingHistory.length > 0 && (
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    {/* Average */}
+                    <div className="card card-hover p-5">
+                      <div className="flex items-center gap-3 mb-3">
+                        <div className="w-8 h-8 rounded-lg bg-blue-500/10 flex items-center justify-center">
+                          <ArrowTrendingUpIcon className="w-4 h-4 text-blue-500" />
+                        </div>
+                        <h3 className="font-medium text-foreground text-sm">Average</h3>
+                      </div>
+                      <div className="text-2xl font-bold text-foreground">{averageLatency}ms</div>
+                      <p className="text-xs text-muted-foreground mt-1">{pingHistory.length} total pings</p>
+                    </div>
+
+                    {/* Min */}
+                    <div className="card card-hover p-5">
+                      <div className="flex items-center gap-3 mb-3">
+                        <div className="w-8 h-8 rounded-lg bg-emerald-500/10 flex items-center justify-center">
+                          <HeartIcon className="w-4 h-4 text-emerald-500" />
+                        </div>
+                        <h3 className="font-medium text-foreground text-sm">Best</h3>
+                      </div>
+                      <div className="text-2xl font-bold text-emerald-500">{minLatency}ms</div>
+                      <p className="text-xs text-muted-foreground mt-1">Fastest response</p>
+                    </div>
+
+                    {/* Max */}
+                    <div className="card card-hover p-5">
+                      <div className="flex items-center gap-3 mb-3">
+                        <div className="w-8 h-8 rounded bg-orange-500/10 flex items-center justify-center">
+                          <ClockIcon className="w-4 h-4 text-orange-500" />
+                        </div>
+                        <h3 className="font-medium text-foreground text-sm">Worst</h3>
+                      </div>
+                      <div className="text-2xl font-bold text-orange-500">{maxLatency}ms</div>
+                      <p className="text-xs text-muted-foreground mt-1">Slowest response</p>
+                    </div>
+                  </div>
+                )}
+
+                {/* Ping History */}
+                {pingHistory.length > 0 && (
+                  <div>
+                    <h2 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
+                      <HeartIcon className="w-5 h-5 text-primary" />
+                      Recent Activity
+                    </h2>
+                    <div className="space-y-2 max-h-96 overflow-y-auto pr-1 custom-scrollbar">
+                      {pingHistory.slice().reverse().map((ping, idx) => (
+                        <div
+                          key={idx}
+                          className="card card-hover p-4 flex items-center justify-between animate-fade-in group"
+                        >
+                          <div className="flex items-center gap-3">
+                            <div className={`w-2.5 h-2.5 rounded-full ${getLatencyDotColor(ping.latency)} shadow-lg`} />
+                            <span className="text-sm text-foreground font-mono">
+                              {new Date(ping.time).toLocaleTimeString()}
+                            </span>
+                          </div>
+                          <div className="flex items-center gap-3">
+                            <span className={`text-sm font-bold ${getLatencyColor(ping.latency)}`}>
+                              {ping.latency}ms
+                            </span>
+                            <span className={`text-[10px] px-2 py-0.5 rounded-full font-medium border ${ping.latency < 100
+                              ? 'bg-emerald-500/10 text-emerald-600 border-emerald-500/20'
+                              : ping.latency < 500
+                                ? 'bg-yellow-500/10 text-yellow-600 border-yellow-500/20'
+                                : 'bg-rose-500/10 text-rose-600 border-rose-500/20'
+                              }`}>
+                              {ping.latency < 100 ? 'Excellent' : ping.latency < 500 ? 'Good' : 'Slow'}
+                            </span>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
             )}
-          </button>
-        </div>
-      </div>
+          </div>
         </div>
       </div>
     </div>
   );
 }
-