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>

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)} />
+    </>
+  );
+}

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>

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>
+    </>
   );
 }