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/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>