Add API key authentication for external access

- Create API key context for managing authentication state - Add dedicated settings page for API key management - Move performance metrics to dedicated page in navigation - Update middleware to support URL parameter fallback - Enhance UI with proper glass morphism styling - Add Solarized color utilities to CSS - Improve spacing and padding throughout UI components - Remove manual bullet points from list items 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-26 00:19:16 -04:00 · 2025-07-26 00:19:16 -04:00 · bc4cfe607d
commit bc4cfe607d
parent 4f9e6d2097
10 changed files with 620 additions and 48 deletions
--- a/app/globals.css
+++ b/app/globals.css
@ -73,7 +73,8 @@ body {
 }

 /* Glass Card Component */
-.glass {
+.glass,
+.glass-panel {
  background: rgba(7, 54, 66, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(88, 110, 117, 0.3);
@ -489,4 +490,59 @@ body {
  background: rgba(7, 54, 66, 0.2);
  border: 1px solid rgba(88, 110, 117, 0.2);
  border-radius: 12px;
-}
+}
+
+/* Solarized Color Utilities */
+.text-base03 { color: var(--solarized-base03); }
+.text-base02 { color: var(--solarized-base02); }
+.text-base01 { color: var(--solarized-base01); }
+.text-base00 { color: var(--solarized-base00); }
+.text-base0 { color: var(--solarized-base0); }
+.text-base1 { color: var(--solarized-base1); }
+.text-base2 { color: var(--solarized-base2); }
+.text-base3 { color: var(--solarized-base3); }
+.text-blue { color: var(--solarized-blue); }
+.text-cyan { color: var(--solarized-cyan); }
+.text-green { color: var(--solarized-green); }
+.text-yellow { color: var(--solarized-yellow); }
+.text-orange { color: var(--solarized-orange); }
+.text-red { color: var(--solarized-red); }
+.text-magenta { color: var(--solarized-magenta); }
+.text-violet { color: var(--solarized-violet); }
+
+.bg-base03 { background-color: var(--solarized-base03); }
+.bg-base02 { background-color: var(--solarized-base02); }
+.bg-base01 { background-color: var(--solarized-base01); }
+.bg-base00 { background-color: var(--solarized-base00); }
+.bg-base0 { background-color: var(--solarized-base0); }
+.bg-base1 { background-color: var(--solarized-base1); }
+.bg-base2 { background-color: var(--solarized-base2); }
+.bg-base3 { background-color: var(--solarized-base3); }
+.bg-blue { background-color: var(--solarized-blue); }
+.bg-cyan { background-color: var(--solarized-cyan); }
+.bg-green { background-color: var(--solarized-green); }
+.bg-yellow { background-color: var(--solarized-yellow); }
+.bg-orange { background-color: var(--solarized-orange); }
+.bg-red { background-color: var(--solarized-red); }
+.bg-magenta { background-color: var(--solarized-magenta); }
+.bg-violet { background-color: var(--solarized-violet); }
+
+.border-base01 { border-color: var(--solarized-base01); }
+.border-base02 { border-color: var(--solarized-base02); }
+.border-blue { border-color: var(--solarized-blue); }
+.border-cyan { border-color: var(--solarized-cyan); }
+.border-green { border-color: var(--solarized-green); }
+.border-yellow { border-color: var(--solarized-yellow); }
+.border-orange { border-color: var(--solarized-orange); }
+.border-red { border-color: var(--solarized-red); }
+
+/* Border opacity utilities */
+.border-green\/30 { border-color: rgba(133, 153, 0, 0.3); }
+.border-yellow\/30 { border-color: rgba(181, 137, 0, 0.3); }
+.border-blue\/30 { border-color: rgba(38, 139, 210, 0.3); }
+.border-red\/30 { border-color: rgba(220, 50, 47, 0.3); }
+
+/* Focus utilities */
+.focus\:outline-none:focus { outline: none; }
+.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--solarized-blue); }
+.focus\:ring-blue:focus { box-shadow: 0 0 0 2px var(--solarized-blue); }
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -2,7 +2,7 @@ import './globals.css';
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
 import { ErrorBoundary } from '@/components/ErrorBoundary';
-import PerformanceDashboard from '@/components/PerformanceDashboard';
+import { ApiKeyProvider } from '@/contexts/ApiKeyContext';

 export const metadata = {
  title: 'Live Stream Manager',
@ -13,14 +13,15 @@ export default function RootLayout({ children }: { children: React.ReactNode })
  return (
    <html lang="en">
      <body className="min-h-screen flex flex-col">
-        <Header />
-        <main className="flex-1">
-          <ErrorBoundary>
-            {children}
-          </ErrorBoundary>
-        </main>
-        <Footer />
-        <PerformanceDashboard />
+        <ApiKeyProvider>
+          <Header />
+          <main className="flex-1">
+            <ErrorBoundary>
+              {children}
+            </ErrorBoundary>
+          </main>
+          <Footer />
+        </ApiKeyProvider>
      </body>
    </html>
  );
--- a/app/performance/page.tsx
+++ b/app/performance/page.tsx
@ -0,0 +1,125 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { PerformanceMonitor } from '@/lib/performance';
+
+interface PerformanceMetrics {
+  [key: string]: {
+    avg: number;
+    min: number;
+    max: number;
+    count: number;
+  } | null;
+}
+
+export default function PerformancePage() {
+  const [metrics, setMetrics] = useState<PerformanceMetrics>({});
+
+  useEffect(() => {
+    const updateMetrics = () => {
+      setMetrics(PerformanceMonitor.getAllMetrics());
+    };
+
+    // Update metrics every 2 seconds
+    updateMetrics();
+    const interval = setInterval(updateMetrics, 2000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="container mx-auto px-4 py-8 max-w-4xl" style={{ paddingBottom: '48px' }}>
+      <div className="glass-panel p-8">
+        <h1 className="text-3xl font-bold text-white mb-8">Performance Metrics</h1>
+        
+        {Object.keys(metrics).length === 0 ? (
+          <div className="glass-panel p-6 border border-base01 text-center">
+            <p className="text-base1">No metrics collected yet. Navigate around the app to see performance data.</p>
+          </div>
+        ) : (
+          <div className="grid" style={{ gap: '24px' }}>
+            {Object.entries(metrics).map(([label, metric]) => {
+              if (!metric) return null;
+              
+              return (
+                <div key={label} className="glass-panel p-6 border border-base01">
+                  <h2 className="font-semibold text-blue text-lg mb-4">
+                    {label.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
+                  </h2>
+                  
+                  <div className="grid grid-cols-2 md:grid-cols-4" style={{ gap: '16px' }}>
+                    <div className="glass-panel p-4 border border-base01">
+                      <span className="text-base1 text-sm block mb-2">Average</span>
+                      <span className="text-green text-xl font-semibold">{metric.avg.toFixed(2)}ms</span>
+                    </div>
+                    
+                    <div className="glass-panel p-4 border border-base01">
+                      <span className="text-base1 text-sm block mb-2">Min</span>
+                      <span className="text-green text-xl font-semibold">{metric.min.toFixed(2)}ms</span>
+                    </div>
+                    
+                    <div className="glass-panel p-4 border border-base01">
+                      <span className="text-base1 text-sm block mb-2">Max</span>
+                      <span className={`text-xl font-semibold ${metric.max > 100 ? 'text-red' : 'text-yellow'}`}>
+                        {metric.max.toFixed(2)}ms
+                      </span>
+                    </div>
+                    
+                    <div className="glass-panel p-4 border border-base01">
+                      <span className="text-base1 text-sm block mb-2">Count</span>
+                      <span className="text-blue text-xl font-semibold">{metric.count}</span>
+                    </div>
+                  </div>
+                  
+                  {/* Performance indicator bar */}
+                  <div className="mt-6">
+                    <div className="flex items-center" style={{ gap: '16px' }}>
+                      <div className="flex-1 h-2 bg-base02 rounded-full overflow-hidden">
+                        <div 
+                          className={`h-full transition-all duration-500 ${
+                            metric.avg < 50 ? 'bg-green' :
+                            metric.avg < 100 ? 'bg-yellow' : 'bg-red'
+                          }`}
+                          style={{ width: `${Math.min((metric.avg / 200) * 100, 100)}%` }}
+                        />
+                      </div>
+                      <span className="text-sm text-base1 min-w-[100px] text-right">
+                        {metric.avg < 50 ? 'Excellent' :
+                         metric.avg < 100 ? 'Good' : 'Needs Optimization'}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+            
+            {/* Performance tips */}
+            <div className="glass-panel p-6 border border-yellow/30">
+              <h2 className="font-semibold text-yellow text-lg mb-4">💡 Performance Tips</h2>
+              <div className="grid md:grid-cols-2 text-base1" style={{ gap: '24px' }}>
+                <div>
+                  <h3 className="font-medium text-white mb-3">Response Times</h3>
+                  <ul className="text-sm space-y-2" style={{ paddingLeft: '8px' }}>
+                    <li>&lt; 50ms - Excellent user experience</li>
+                    <li>50-100ms - Good, barely noticeable</li>
+                    <li>100-300ms - Noticeable delay</li>
+                    <li>&gt; 300ms - Frustrating for users</li>
+                  </ul>
+                </div>
+                <div>
+                  <h3 className="font-medium text-white mb-3">Optimization Strategies</h3>
+                  <ul className="text-sm space-y-2" style={{ paddingLeft: '8px' }}>
+                    <li>Monitor fetchData and setActive timings</li>
+                    <li>High max values indicate performance spikes</li>
+                    <li>Consider caching for frequently called APIs</li>
+                    <li>Batch multiple requests when possible</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@ -0,0 +1,158 @@
+'use client';
+
+import { useState } from 'react';
+import { useApiKey } from '@/contexts/ApiKeyContext';
+
+export default function SettingsPage() {
+  const { apiKey, setApiKey, clearApiKey, isAuthenticated } = useApiKey();
+  const [inputValue, setInputValue] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setSuccess('');
+    setIsLoading(true);
+
+    if (!inputValue.trim()) {
+      setError('API key is required');
+      setIsLoading(false);
+      return;
+    }
+
+    // Test the API key by making a simple request
+    try {
+      const response = await fetch('/api/obsStatus', {
+        headers: {
+          'x-api-key': inputValue.trim()
+        }
+      });
+
+      if (response.ok) {
+        setApiKey(inputValue.trim());
+        setInputValue('');
+        setSuccess('API key saved successfully!');
+      } else {
+        setError('Invalid API key');
+      }
+    } catch {
+      setError('Failed to validate API key');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleClearKey = () => {
+    clearApiKey();
+    setInputValue('');
+    setError('');
+    setSuccess('API key cleared');
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-8 max-w-2xl" style={{ paddingBottom: '48px' }}>
+      <div className="glass-panel p-8">
+        <h1 className="text-3xl font-bold text-white mb-8">Settings</h1>
+        
+        {/* API Key Section */}
+        <div className="space-y-6">
+          <div>
+            <h2 className="text-xl font-semibold text-white mb-4">API Key Authentication</h2>
+            <p className="text-base1 mb-6">
+              API keys are required when accessing this application from external networks. 
+              The key is stored securely in your browser's local storage.
+            </p>
+          </div>
+
+          {/* Current Status */}
+          <div className="glass-panel p-4 border border-base01">
+            <div className="flex items-center justify-between">
+              <div>
+                <h3 className="font-medium text-white mb-1">Current Status</h3>
+                <div className="flex items-center gap-2">
+                  {isAuthenticated ? (
+                    <>
+                      <div className="w-2 h-2 bg-green rounded-full"></div>
+                      <span className="text-green text-sm">Authenticated</span>
+                    </>
+                  ) : (
+                    <>
+                      <div className="w-2 h-2 bg-yellow rounded-full"></div>
+                      <span className="text-yellow text-sm">No API key set</span>
+                    </>
+                  )}
+                </div>
+              </div>
+              {isAuthenticated && (
+                <button
+                  onClick={handleClearKey}
+                  className="btn-secondary text-sm"
+                >
+                  Clear Key
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* API Key Form */}
+          <form onSubmit={handleSubmit} className="space-y-4" style={{ marginTop: '24px' }}>
+            <div>
+              <label htmlFor="apiKey" className="block text-sm font-medium text-base1 mb-2">
+                {isAuthenticated ? 'Update API Key' : 'Enter API Key'}
+              </label>
+              <input
+                type="password"
+                id="apiKey"
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
+                className="w-full text-white focus:outline-none focus:ring-2 focus:ring-blue transition-all"
+                style={{
+                  padding: '12px 24px',
+                  background: 'rgba(7, 54, 66, 0.4)',
+                  backdropFilter: 'blur(10px)',
+                  border: '1px solid rgba(88, 110, 117, 0.3)',
+                  borderRadius: '12px',
+                  fontSize: '16px'
+                }}
+                placeholder="Enter your API key"
+              />
+            </div>
+
+            {error && (
+              <div className="glass-panel p-3 border border-red/30">
+                <p className="text-red text-sm">{error}</p>
+              </div>
+            )}
+
+            {success && (
+              <div className="glass-panel p-3 border border-green/30">
+                <p className="text-green text-sm">{success}</p>
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="btn w-full"
+            >
+              {isLoading ? 'Validating...' : (isAuthenticated ? 'Update API Key' : 'Save API Key')}
+            </button>
+          </form>
+
+          {/* Information Section */}
+          <div className="glass-panel p-6 border border-blue/30" style={{ marginTop: '24px' }}>
+            <h3 className="font-medium text-blue text-sm mb-3">ℹ️ Information</h3>
+            <ul className="text-xs text-base1 space-y-1" style={{ paddingLeft: '8px' }}>
+              <li>API keys are only required for external network access</li>
+              <li>Local network access bypasses authentication automatically</li>
+              <li>Keys are validated against the server before saving</li>
+              <li>Your API key is stored locally and never transmitted unnecessarily</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/components/ApiKeyPrompt.tsx
+++ b/components/ApiKeyPrompt.tsx
@ -0,0 +1,152 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useApiKey } from '../contexts/ApiKeyContext';
+
+interface ApiKeyPromptProps {
+  show: boolean;
+  onClose?: () => void;
+}
+
+export function ApiKeyPrompt({ show, onClose }: ApiKeyPromptProps) {
+  const { setApiKey } = useApiKey();
+  const [inputValue, setInputValue] = useState('');
+  const [error, setError] = useState('');
+
+  if (!show) return null;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    if (!inputValue.trim()) {
+      setError('API key is required');
+      return;
+    }
+
+    // Test the API key by making a simple request
+    try {
+      const response = await fetch('/api/obsStatus', {
+        headers: {
+          'x-api-key': inputValue.trim()
+        }
+      });
+
+      if (response.ok) {
+        setApiKey(inputValue.trim());
+        setInputValue('');
+        onClose?.();
+      } else {
+        setError('Invalid API key');
+      }
+    } catch {
+      setError('Failed to validate API key');
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 backdrop-blur-sm">
+      <div className="glass-panel p-6 max-w-md w-full mx-4">
+        <h2 className="text-xl font-bold text-white mb-4">API Key Required</h2>
+        <p className="text-base1 mb-4">
+          This application requires an API key for access. Please enter your API key to continue.
+        </p>
+        
+        <form onSubmit={handleSubmit}>
+          <div className="mb-4">
+            <label htmlFor="apiKey" className="block text-sm font-medium text-base1 mb-2">
+              API Key
+            </label>
+            <input
+              type="password"
+              id="apiKey"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              className="w-full text-white focus:outline-none focus:ring-2 focus:ring-blue transition-all"
+              style={{
+                padding: '12px 24px',
+                background: 'rgba(7, 54, 66, 0.4)',
+                backdropFilter: 'blur(10px)',
+                border: '1px solid rgba(88, 110, 117, 0.3)',
+                borderRadius: '12px',
+                fontSize: '16px'
+              }}
+              placeholder="Enter your API key"
+              autoFocus
+            />
+            {error && (
+              <p className="mt-2 text-sm text-red">{error}</p>
+            )}
+          </div>
+          
+          <div className="flex gap-3">
+            <button
+              type="submit"
+              className="btn flex-1"
+            >
+              Authenticate
+            </button>
+            {onClose && (
+              <button
+                type="button"
+                onClick={onClose}
+                className="btn-secondary px-4 py-2 transition-colors"
+              >
+                Cancel
+              </button>
+            )}
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export function ApiKeyBanner() {
+  const { isAuthenticated, clearApiKey } = useApiKey();
+  const [showPrompt, setShowPrompt] = useState(false);
+
+  if (isAuthenticated) {
+    return (
+      <div className="glass-panel mx-4 mt-4 px-4 py-2 text-sm flex justify-between items-center border border-green/30">
+        <span className="text-green flex items-center gap-2">
+          <span className="text-green">✓</span>
+          Authenticated
+        </span>
+        <div className="flex gap-3">
+          <button
+            onClick={() => setShowPrompt(true)}
+            className="text-base1 hover:text-white underline transition-colors"
+          >
+            Change Key
+          </button>
+          <button
+            onClick={clearApiKey}
+            className="text-base1 hover:text-white underline transition-colors"
+          >
+            Logout
+          </button>
+        </div>
+        <ApiKeyPrompt show={showPrompt} onClose={() => setShowPrompt(false)} />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="glass-panel mx-4 mt-4 px-4 py-2 text-sm flex justify-between items-center border border-yellow/30">
+        <span className="text-yellow flex items-center gap-2">
+          <span className="text-yellow">⚠️</span>
+          API key required for full access
+        </span>
+        <button
+          onClick={() => setShowPrompt(true)}
+          className="text-base1 hover:text-white underline transition-colors"
+        >
+          Enter API Key
+        </button>
+      </div>
+      <ApiKeyPrompt show={showPrompt} onClose={() => setShowPrompt(false)} />
+    </>
+  );
+}
--- a/components/Header.tsx
+++ b/components/Header.tsx
@ -50,6 +50,24 @@ export default function Header() {
              <span className="icon">👥</span>
              Teams
            </Link>
+            
+            <Link 
+              href="/settings" 
+              className={`btn ${isActive('/settings') ? 'active' : ''}`}
+            >
+              <span className="icon">⚙️</span>
+              Settings
+            </Link>
+            
+            {process.env.NODE_ENV === 'development' && (
+              <Link 
+                href="/performance" 
+                className={`btn ${isActive('/performance') ? 'active' : ''}`}
+              >
+                <span className="icon">📊</span>
+                Perf
+              </Link>
+            )}
          </nav>
        </div>
      </div>
--- a/components/PerformanceDashboard.tsx
+++ b/components/PerformanceDashboard.tsx
@ -36,22 +36,27 @@ export default function PerformanceDashboard() {
  }

  return (
-    <div className="fixed bottom-4 right-4 z-50">
-      {!isVisible ? (
-        <button
-          onClick={() => setIsVisible(true)}
-          className="bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded-lg text-sm font-medium shadow-lg"
-          title="Show Performance Metrics"
-        >
-          📊 Perf
-        </button>
-      ) : (
-        <div className="bg-black/90 backdrop-blur-sm text-white rounded-lg p-4 max-w-md max-h-96 overflow-y-auto shadow-xl border border-white/20">
+    <>
+      {!isVisible && (
+        <div className="fixed bottom-4 right-4 z-50">
+          <button
+            onClick={() => setIsVisible(true)}
+            className="btn text-sm"
+            title="Show Performance Metrics"
+          >
+            📊 Perf
+          </button>
+        </div>
+      )}
+      
+      {isVisible && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 backdrop-blur-sm">
+          <div className="glass-panel p-6 max-w-md max-h-96 overflow-y-auto border border-base01 shadow-2xl">
          <div className="flex justify-between items-center mb-3">
-            <h3 className="text-lg font-semibold">Performance Metrics</h3>
+            <h3 className="text-lg font-semibold text-white">Performance Metrics</h3>
            <button
              onClick={() => setIsVisible(false)}
-              className="text-white/60 hover:text-white text-xl leading-none"
+              className="text-base1 hover:text-white text-xl leading-none transition-colors"
              title="Close"
            >
              ×
@ -59,33 +64,33 @@ export default function PerformanceDashboard() {
          </div>
          
          {Object.keys(metrics).length === 0 ? (
-            <p className="text-white/60 text-sm">No metrics collected yet.</p>
+            <p className="text-base1 text-sm">No metrics collected yet.</p>
          ) : (
            <div className="space-y-3">
              {Object.entries(metrics).map(([label, metric]) => {
                if (!metric) return null;
                
                return (
-                  <div key={label} className="bg-white/5 rounded p-3">
-                    <h4 className="font-medium text-blue-300 text-sm mb-2">
+                  <div key={label} className="glass-panel p-3 border border-base01">
+                    <h4 className="font-medium text-blue text-sm mb-2">
                      {label.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
                    </h4>
                    <div className="grid grid-cols-2 gap-2 text-xs">
                      <div>
-                        <span className="text-white/60">Avg:</span>{' '}
-                        <span className="text-green-400">{metric.avg.toFixed(2)}ms</span>
+                        <span className="text-base1">Avg:</span>{' '}
+                        <span className="text-green">{metric.avg.toFixed(2)}ms</span>
                      </div>
                      <div>
-                        <span className="text-white/60">Count:</span>{' '}
-                        <span className="text-blue-400">{metric.count}</span>
+                        <span className="text-base1">Count:</span>{' '}
+                        <span className="text-blue">{metric.count}</span>
                      </div>
                      <div>
-                        <span className="text-white/60">Min:</span>{' '}
-                        <span className="text-green-400">{metric.min.toFixed(2)}ms</span>
+                        <span className="text-base1">Min:</span>{' '}
+                        <span className="text-green">{metric.min.toFixed(2)}ms</span>
                      </div>
                      <div>
-                        <span className="text-white/60">Max:</span>{' '}
-                        <span className={metric.max > 100 ? 'text-red-400' : 'text-yellow-400'}>
+                        <span className="text-base1">Max:</span>{' '}
+                        <span className={metric.max > 100 ? 'text-red' : 'text-yellow'}>
                          {metric.max.toFixed(2)}ms
                        </span>
                      </div>
@ -96,11 +101,11 @@ export default function PerformanceDashboard() {
                      <div className="flex items-center gap-2">
                        <div 
                          className={`w-2 h-2 rounded-full ${
-                            metric.avg < 50 ? 'bg-green-500' :
-                            metric.avg < 100 ? 'bg-yellow-500' : 'bg-red-500'
+                            metric.avg < 50 ? 'bg-green' :
+                            metric.avg < 100 ? 'bg-yellow' : 'bg-red'
                          }`}
                        />
-                        <span className="text-xs text-white/60">
+                        <span className="text-xs text-base1">
                          {metric.avg < 50 ? 'Excellent' :
                           metric.avg < 100 ? 'Good' : 'Needs Optimization'}
                        </span>
@ -111,11 +116,11 @@ export default function PerformanceDashboard() {
              })}
              
              {/* Performance tips */}
-              <div className="bg-yellow-500/10 border border-yellow-500/20 rounded p-3 mt-4">
-                <h4 className="font-medium text-yellow-300 text-sm mb-2">
+              <div className="glass-panel p-3 mt-4 border border-yellow/30">
+                <h4 className="font-medium text-yellow text-sm mb-2">
                  💡 Performance Tips
                </h4>
-                <ul className="text-xs text-white/80 space-y-1">
+                <ul className="text-xs text-base1 space-y-1">
                  <li>• Keep API calls under 100ms for optimal UX</li>
                  <li>• Monitor fetchData and setActive timings</li>
                  <li>• High max values indicate performance spikes</li>
@ -124,8 +129,9 @@ export default function PerformanceDashboard() {
              </div>
            </div>
          )}
+          </div>
        </div>
      )}
-    </div>
+    </>
  );
 }
--- a/contexts/ApiKeyContext.tsx
+++ b/contexts/ApiKeyContext.tsx
@ -0,0 +1,57 @@
+'use client';
+
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+interface ApiKeyContextType {
+  apiKey: string | null;
+  setApiKey: (key: string) => void;
+  clearApiKey: () => void;
+  isAuthenticated: boolean;
+}
+
+const ApiKeyContext = createContext<ApiKeyContextType | undefined>(undefined);
+
+export function ApiKeyProvider({ children }: { children: React.ReactNode }) {
+  const [apiKey, setApiKeyState] = useState<string | null>(null);
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  // Load API key from localStorage on mount
+  useEffect(() => {
+    const stored = localStorage.getItem('obs-api-key');
+    if (stored) {
+      setApiKeyState(stored);
+    }
+    setIsLoaded(true);
+  }, []);
+
+  const setApiKey = (key: string) => {
+    localStorage.setItem('obs-api-key', key);
+    setApiKeyState(key);
+  };
+
+  const clearApiKey = () => {
+    localStorage.removeItem('obs-api-key');
+    setApiKeyState(null);
+  };
+
+  const isAuthenticated = Boolean(apiKey);
+
+  // Don't render children until we've loaded the API key from storage
+  if (!isLoaded) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <ApiKeyContext.Provider value={{ apiKey, setApiKey, clearApiKey, isAuthenticated }}>
+      {children}
+    </ApiKeyContext.Provider>
+  );
+}
+
+export function useApiKey() {
+  const context = useContext(ApiKeyContext);
+  if (context === undefined) {
+    throw new Error('useApiKey must be used within an ApiKeyProvider');
+  }
+  return context;
+}
--- a/lib/apiClient.ts
+++ b/lib/apiClient.ts
@ -1,14 +1,13 @@
 // API client utility for making authenticated requests

-// Get API key from environment (client-side will need to be provided differently)
+// Get API key from environment or localStorage
 function getApiKey(): string | null {
  if (typeof window === 'undefined') {
    // Server-side
    return process.env.API_KEY || null;
  } else {
-    // Client-side - for now, return null to bypass auth in development
-    // In production, this would come from a secure storage or context
-    return null;
+    // Client-side - get from localStorage
+    return localStorage.getItem('obs-api-key') || null;
  }
 }

--- a/middleware.ts
+++ b/middleware.ts
@ -8,8 +8,8 @@ export function middleware(request: NextRequest) {
      return NextResponse.next();
    }

-    // Check for API key in header
-    const apiKey = request.headers.get('x-api-key');
+    // Check for API key in header or URL parameter
+    const apiKey = request.headers.get('x-api-key') || request.nextUrl.searchParams.get('apikey');
    const validKey = process.env.API_KEY;

    // If API_KEY is not set in environment, skip authentication (development mode)