Add web-based Uptime Kuma login with TOTP support

- Add login modal for username/password/TOTP authentication
- Persist token to file for session persistence
- Make UPTIME_KUMA_API_KEY optional (can login via web UI)
- Add /api/kuma/auth, /api/kuma/login, /api/kuma/logout endpoints
- Show login prompt when not authenticated

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/App.jsx

@@ -3,6 +3,7 @@ import { io } from 'socket.io-client';
 import Dashboard from './components/Dashboard';
 import DevModeToggle from './components/DevModeToggle';
 import ApprovalModal from './components/ApprovalModal';
+import KumaLoginModal from './components/KumaLoginModal';
 import { api } from './api/client';
 
 const socket = io(window.location.origin, {
@@ -16,12 +17,24 @@ export default function App() {
   const [scanProgress, setScanProgress] = useState({});
   const [scanResults, setScanResults] = useState({});
   const [analysisResults, setAnalysisResults] = useState({});
+  const [kumaAuth, setKumaAuth] = useState({ authenticated: false, url: '' });
+  const [showKumaLogin, setShowKumaLogin] = useState(false);
+
+  // Load initial settings and check Kuma auth
+  const checkKumaAuth = useCallback(async () => {
+    try {
+      const auth = await api.getKumaAuthStatus();
+      setKumaAuth(auth);
+    } catch (e) {
+      setKumaAuth({ authenticated: false, url: '' });
+    }
+  }, []);
 
-  // Load initial settings
   useEffect(() => {
     api.getSettings().then(setSettings).catch(console.error);
     api.getPendingApprovals().then(data => setPendingApprovals(data.approvals)).catch(console.error);
-  }, []);
+    checkKumaAuth();
+  }, [checkKumaAuth]);
 
   // Socket connection
   useEffect(() => {
@@ -138,17 +151,34 @@ export default function App() {
       {/* Main Content */}
       <main className="max-w-7xl mx-auto px-4 py-8">
         {/* Config Status */}
-        {(!settings.has_ssh_key || !settings.has_claude_key || !settings.has_kuma_key) && (
+        {(!settings.has_ssh_key || !settings.has_claude_key) && (
           <div className="mb-6 p-4 bg-yellow-900/30 border border-yellow-600 rounded-lg">
             <h3 className="font-semibold text-yellow-400 mb-2">Configuration Required</h3>
             <ul className="text-sm text-yellow-200 space-y-1">
               {!settings.has_ssh_key && <li>• SSH_PRIVATE_KEY environment variable is not set</li>}
               {!settings.has_claude_key && <li>• CLAUDE_API_KEY environment variable is not set</li>}
-              {!settings.has_kuma_key && <li>• UPTIME_KUMA_API_KEY environment variable is not set</li>}
             </ul>
           </div>
         )}
 
+        {/* Uptime Kuma Auth Status */}
+        {!kumaAuth.authenticated && (
+          <div className="mb-6 p-4 bg-blue-900/30 border border-blue-600 rounded-lg flex items-center justify-between">
+            <div>
+              <h3 className="font-semibold text-blue-400 mb-1">Uptime Kuma Login Required</h3>
+              <p className="text-sm text-blue-200">
+                Connect to Uptime Kuma to create monitors
+              </p>
+            </div>
+            <button
+              onClick={() => setShowKumaLogin(true)}
+              className="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded transition-colors"
+            >
+              Login to Uptime Kuma
+            </button>
+          </div>
+        )}
+
         <Dashboard
           scanProgress={scanProgress}
           scanResults={scanResults}
@@ -165,6 +195,14 @@ export default function App() {
           onReject={handleReject}
         />
       )}
+
+      {/* Kuma Login Modal */}
+      <KumaLoginModal
+        isOpen={showKumaLogin}
+        onClose={() => setShowKumaLogin(false)}
+        onSuccess={checkKumaAuth}
+        kumaUrl={kumaAuth.url || settings?.uptime_kuma_url}
+      />
     </div>
   );
 }

frontend/src/api/client.js

@@ -61,4 +61,10 @@ export const api = {
 
   // Uptime Kuma
   testKumaConnection: () => fetchApi('/kuma/test'),
+  getKumaAuthStatus: () => fetchApi('/kuma/auth'),
+  kumaLogin: (username, password, totp) => fetchApi('/kuma/login', {
+    method: 'POST',
+    body: JSON.stringify({ username, password, totp }),
+  }),
+  kumaLogout: () => fetchApi('/kuma/logout', { method: 'POST' }),
 };

frontend/src/components/KumaLoginModal.jsx

@@ -0,0 +1,126 @@
+import { useState } from 'react';
+import { api } from '../api/client';
+
+export default function KumaLoginModal({ isOpen, onClose, onSuccess, kumaUrl }) {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [totp, setTotp] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [needsTotp, setNeedsTotp] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    try {
+      await api.kumaLogin(username, password, totp || undefined);
+      onSuccess?.();
+      onClose();
+    } catch (err) {
+      const errorMsg = err.message || 'Login failed';
+      if (errorMsg.includes('2FA') || errorMsg.includes('token') || errorMsg.includes('TOTP')) {
+        setNeedsTotp(true);
+        setError('Please enter your 2FA code');
+      } else {
+        setError(errorMsg);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-slate-800 rounded-lg p-6 w-full max-w-md mx-4">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-xl font-semibold">Login to Uptime Kuma</h2>
+          <button
+            onClick={onClose}
+            className="text-slate-400 hover:text-white"
+          >
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <p className="text-sm text-slate-400 mb-4">
+          Connect to <span className="text-slate-200">{kumaUrl}</span>
+        </p>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-300 mb-1">
+              Username
+            </label>
+            <input
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded focus:ring-2 focus:ring-kuma-green focus:border-transparent outline-none"
+              required
+              autoFocus
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-slate-300 mb-1">
+              Password
+            </label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded focus:ring-2 focus:ring-kuma-green focus:border-transparent outline-none"
+              required
+            />
+          </div>
+
+          {needsTotp && (
+            <div>
+              <label className="block text-sm font-medium text-slate-300 mb-1">
+                2FA Code
+              </label>
+              <input
+                type="text"
+                value={totp}
+                onChange={(e) => setTotp(e.target.value)}
+                placeholder="6-digit code"
+                className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded focus:ring-2 focus:ring-kuma-green focus:border-transparent outline-none"
+                maxLength={6}
+                autoFocus
+              />
+            </div>
+          )}
+
+          {error && (
+            <div className="p-3 bg-red-900/30 border border-red-600 rounded text-red-300 text-sm">
+              {error}
+            </div>
+          )}
+
+          <div className="flex gap-3">
+            <button
+              type="button"
+              onClick={onClose}
+              className="flex-1 px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={loading}
+              className="flex-1 px-4 py-2 bg-kuma-green hover:bg-green-400 disabled:bg-slate-600 text-slate-900 font-semibold rounded transition-colors"
+            >
+              {loading ? 'Logging in...' : 'Login'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}