Initial commit with CI workflow

- Flask backend with SSH discovery and Claude AI integration - React/Vite frontend with Tailwind CSS - Docker multi-stage build - Gitea Actions workflow for container builds 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-04 21:38:50 +00:00
commit ea49143a13
31 changed files with 3037 additions and 0 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Kuma Strapper</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "kuma-strapper-frontend",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "socket.io-client": "^4.7.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.4.0",
+    "vite": "^5.0.10"
+  }
+}
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -0,0 +1,170 @@
+import { useState, useEffect, useCallback } from 'react';
+import { io } from 'socket.io-client';
+import Dashboard from './components/Dashboard';
+import DevModeToggle from './components/DevModeToggle';
+import ApprovalModal from './components/ApprovalModal';
+import { api } from './api/client';
+
+const socket = io(window.location.origin, {
+  transports: ['websocket', 'polling'],
+});
+
+export default function App() {
+  const [settings, setSettings] = useState(null);
+  const [connected, setConnected] = useState(false);
+  const [pendingApprovals, setPendingApprovals] = useState([]);
+  const [scanProgress, setScanProgress] = useState({});
+  const [scanResults, setScanResults] = useState({});
+  const [analysisResults, setAnalysisResults] = useState({});
+
+  // Load initial settings
+  useEffect(() => {
+    api.getSettings().then(setSettings).catch(console.error);
+    api.getPendingApprovals().then(data => setPendingApprovals(data.approvals)).catch(console.error);
+  }, []);
+
+  // Socket connection
+  useEffect(() => {
+    socket.on('connect', () => setConnected(true));
+    socket.on('disconnect', () => setConnected(false));
+
+    socket.on('scan_progress', (data) => {
+      setScanProgress(prev => ({
+        ...prev,
+        [data.hostname]: {
+          ...prev[data.hostname],
+          [data.command]: data.status,
+        },
+      }));
+    });
+
+    socket.on('scan_complete', (data) => {
+      setScanResults(prev => ({
+        ...prev,
+        [data.scan_id]: data,
+      }));
+    });
+
+    socket.on('analysis_started', (data) => {
+      setAnalysisResults(prev => ({
+        ...prev,
+        [data.scan_id]: { loading: true },
+      }));
+    });
+
+    socket.on('analysis_complete', (data) => {
+      setAnalysisResults(prev => ({
+        ...prev,
+        [data.scan_id]: { ...data, loading: false },
+      }));
+    });
+
+    socket.on('analysis_update', (data) => {
+      setAnalysisResults(prev => ({
+        ...prev,
+        [data.scan_id]: { ...data, loading: false },
+      }));
+    });
+
+    socket.on('analysis_error', (data) => {
+      setAnalysisResults(prev => ({
+        ...prev,
+        [data.scan_id]: { error: data.error, loading: false },
+      }));
+    });
+
+    socket.on('approval_request', (request) => {
+      setPendingApprovals(prev => [...prev, request]);
+    });
+
+    socket.on('approval_resolved', (request) => {
+      setPendingApprovals(prev => prev.filter(r => r.id !== request.id));
+    });
+
+    return () => {
+      socket.off('connect');
+      socket.off('disconnect');
+      socket.off('scan_progress');
+      socket.off('scan_complete');
+      socket.off('analysis_started');
+      socket.off('analysis_complete');
+      socket.off('analysis_update');
+      socket.off('analysis_error');
+      socket.off('approval_request');
+      socket.off('approval_resolved');
+    };
+  }, []);
+
+  const toggleDevMode = useCallback(async () => {
+    const newDevMode = !settings?.dev_mode;
+    await api.updateSettings({ dev_mode: newDevMode });
+    setSettings(prev => ({ ...prev, dev_mode: newDevMode }));
+  }, [settings]);
+
+  const handleApprove = useCallback(async (approvalId) => {
+    await api.approveRequest(approvalId);
+  }, []);
+
+  const handleReject = useCallback(async (approvalId) => {
+    await api.rejectRequest(approvalId);
+  }, []);
+
+  if (!settings) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-kuma-green"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen">
+      {/* Header */}
+      <header className="bg-slate-800 border-b border-slate-700 sticky top-0 z-40">
+        <div className="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <h1 className="text-2xl font-bold text-kuma-green">
+              Kuma Strapper
+            </h1>
+            <div className={`flex items-center gap-2 text-sm ${connected ? 'text-green-400' : 'text-red-400'}`}>
+              <span className={`w-2 h-2 rounded-full ${connected ? 'bg-green-400' : 'bg-red-400'}`}></span>
+              {connected ? 'Connected' : 'Disconnected'}
+            </div>
+          </div>
+          <DevModeToggle enabled={settings.dev_mode} onToggle={toggleDevMode} />
+        </div>
+      </header>
+
+      {/* 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) && (
+          <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>
+        )}
+
+        <Dashboard
+          scanProgress={scanProgress}
+          scanResults={scanResults}
+          analysisResults={analysisResults}
+          devMode={settings.dev_mode}
+        />
+      </main>
+
+      {/* Approval Modal */}
+      {pendingApprovals.length > 0 && settings.dev_mode && (
+        <ApprovalModal
+          approvals={pendingApprovals}
+          onApprove={handleApprove}
+          onReject={handleReject}
+        />
+      )}
+    </div>
+  );
+}
--- a/frontend/src/api/client.js
+++ b/frontend/src/api/client.js
@@ -0,0 +1,64 @@
+const API_BASE = '/api';
+
+export async function fetchApi(endpoint, options = {}) {
+  const url = `${API_BASE}${endpoint}`;
+  const response = await fetch(url, {
+    headers: {
+      'Content-Type': 'application/json',
+      ...options.headers,
+    },
+    ...options,
+  });
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: 'Unknown error' }));
+    throw new Error(error.error || `HTTP ${response.status}`);
+  }
+
+  return response.json();
+}
+
+export const api = {
+  // Settings
+  getSettings: () => fetchApi('/settings'),
+  updateSettings: (settings) => fetchApi('/settings', {
+    method: 'PUT',
+    body: JSON.stringify(settings),
+  }),
+
+  // Scanning
+  startScan: (hostname, username = 'root', port = 22) => fetchApi('/scan', {
+    method: 'POST',
+    body: JSON.stringify({ hostname, username, port }),
+  }),
+  getScan: (scanId) => fetchApi(`/scan/${scanId}`),
+
+  // Commands
+  runCommand: (scanId, command, reason) => fetchApi(`/scan/${scanId}/command`, {
+    method: 'POST',
+    body: JSON.stringify({ command, reason }),
+  }),
+
+  // Approvals
+  getPendingApprovals: () => fetchApi('/approvals'),
+  approveRequest: (approvalId) => fetchApi(`/approvals/${approvalId}/approve`, {
+    method: 'POST',
+  }),
+  rejectRequest: (approvalId) => fetchApi(`/approvals/${approvalId}/reject`, {
+    method: 'POST',
+  }),
+
+  // Monitors
+  getMonitors: () => fetchApi('/monitors'),
+  createDefaultMonitors: (scanId) => fetchApi('/monitors/create-defaults', {
+    method: 'POST',
+    body: JSON.stringify({ scan_id: scanId }),
+  }),
+  createSuggestedMonitors: (scanId, monitorIndices) => fetchApi('/monitors/create-suggested', {
+    method: 'POST',
+    body: JSON.stringify({ scan_id: scanId, monitors: monitorIndices }),
+  }),
+
+  // Uptime Kuma
+  testKumaConnection: () => fetchApi('/kuma/test'),
+};
--- a/frontend/src/components/ApprovalModal.jsx
+++ b/frontend/src/components/ApprovalModal.jsx
@@ -0,0 +1,107 @@
+import { useState } from 'react';
+
+export default function ApprovalModal({ approvals, onApprove, onReject }) {
+  const [processing, setProcessing] = useState({});
+
+  const handleApprove = async (id) => {
+    setProcessing(p => ({ ...p, [id]: 'approving' }));
+    try {
+      await onApprove(id);
+    } finally {
+      setProcessing(p => ({ ...p, [id]: null }));
+    }
+  };
+
+  const handleReject = async (id) => {
+    setProcessing(p => ({ ...p, [id]: 'rejecting' }));
+    try {
+      await onReject(id);
+    } finally {
+      setProcessing(p => ({ ...p, [id]: null }));
+    }
+  };
+
+  if (approvals.length === 0) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-slate-800 rounded-lg shadow-xl max-w-2xl w-full max-h-[80vh] overflow-hidden">
+        <div className="bg-amber-600 px-6 py-4">
+          <h2 className="text-xl font-bold text-white flex items-center gap-2">
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+            Pending Approvals ({approvals.length})
+          </h2>
+        </div>
+
+        <div className="overflow-y-auto max-h-[60vh]">
+          {approvals.map((approval) => (
+            <div key={approval.id} className="border-b border-slate-700 p-6">
+              <div className="flex items-start justify-between mb-4">
+                <div>
+                  <span className={`inline-block px-2 py-1 text-xs font-medium rounded ${
+                    approval.type === 'ssh_command'
+                      ? 'bg-blue-900 text-blue-200'
+                      : 'bg-purple-900 text-purple-200'
+                  }`}>
+                    {approval.type === 'ssh_command' ? 'SSH Command' : 'Create Monitor'}
+                  </span>
+                  <h3 className="text-lg font-semibold text-slate-100 mt-2">
+                    {approval.description}
+                  </h3>
+                </div>
+              </div>
+
+              {approval.reason && (
+                <div className="mb-4 p-3 bg-slate-700/50 rounded">
+                  <p className="text-sm text-slate-300">
+                    <span className="font-medium text-slate-200">Why: </span>
+                    {approval.reason}
+                  </p>
+                </div>
+              )}
+
+              {approval.type === 'ssh_command' && (
+                <div className="mb-4">
+                  <p className="text-xs text-slate-400 mb-1">Command to execute:</p>
+                  <code className="block p-3 bg-slate-900 rounded text-sm text-green-400 font-mono overflow-x-auto">
+                    {approval.details.command}
+                  </code>
+                  <p className="text-xs text-slate-500 mt-1">
+                    On host: {approval.details.hostname}
+                  </p>
+                </div>
+              )}
+
+              {approval.type === 'create_monitor' && (
+                <div className="mb-4 p-3 bg-slate-700/50 rounded text-sm">
+                  <p><span className="text-slate-400">Name:</span> {approval.details.name}</p>
+                  <p><span className="text-slate-400">Type:</span> {approval.details.type}</p>
+                  <p><span className="text-slate-400">Target:</span> {approval.details.target}</p>
+                </div>
+              )}
+
+              <div className="flex gap-3">
+                <button
+                  onClick={() => handleApprove(approval.id)}
+                  disabled={processing[approval.id]}
+                  className="flex-1 px-4 py-2 bg-green-600 hover:bg-green-500 disabled:bg-green-800 text-white font-medium rounded transition-colors"
+                >
+                  {processing[approval.id] === 'approving' ? 'Approving...' : 'Approve'}
+                </button>
+                <button
+                  onClick={() => handleReject(approval.id)}
+                  disabled={processing[approval.id]}
+                  className="flex-1 px-4 py-2 bg-red-600 hover:bg-red-500 disabled:bg-red-800 text-white font-medium rounded transition-colors"
+                >
+                  {processing[approval.id] === 'rejecting' ? 'Rejecting...' : 'Reject'}
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/Dashboard.jsx
+++ b/frontend/src/components/Dashboard.jsx
@@ -0,0 +1,141 @@
+import { useState } from 'react';
+import { api } from '../api/client';
+import HostCard from './HostCard';
+import DiscoveryResults from './DiscoveryResults';
+
+export default function Dashboard({ scanProgress, scanResults, analysisResults, devMode }) {
+  const [hostname, setHostname] = useState('');
+  const [username, setUsername] = useState('root');
+  const [port, setPort] = useState('22');
+  const [scanning, setScanning] = useState(false);
+  const [error, setError] = useState(null);
+  const [activeScanId, setActiveScanId] = useState(null);
+
+  const handleScan = async (e) => {
+    e.preventDefault();
+    if (!hostname) return;
+
+    setScanning(true);
+    setError(null);
+
+    try {
+      await api.startScan(hostname, username, parseInt(port, 10));
+    } catch (err) {
+      setError(err.message);
+      setScanning(false);
+    }
+  };
+
+  // Find the active scan
+  const currentScanId = Object.keys(scanResults).find(
+    id => scanResults[id]?.hostname === hostname
+  );
+
+  const currentScan = currentScanId ? scanResults[currentScanId] : null;
+  const currentAnalysis = currentScanId ? analysisResults[currentScanId] : null;
+
+  // Reset scanning state when scan completes
+  if (scanning && currentScan) {
+    setScanning(false);
+    if (!activeScanId && currentScanId) {
+      setActiveScanId(currentScanId);
+    }
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* Scan Form */}
+      <div className="bg-slate-800 rounded-lg p-6">
+        <h2 className="text-xl font-semibold mb-4">Scan Host</h2>
+        <form onSubmit={handleScan} className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="md:col-span-1">
+              <label className="block text-sm font-medium text-slate-300 mb-1">
+                Hostname / IP
+              </label>
+              <input
+                type="text"
+                value={hostname}
+                onChange={(e) => setHostname(e.target.value)}
+                placeholder="192.168.1.100 or server.example.com"
+                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"
+              />
+            </div>
+            <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)}
+                placeholder="root"
+                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"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-300 mb-1">
+                SSH Port
+              </label>
+              <input
+                type="number"
+                value={port}
+                onChange={(e) => setPort(e.target.value)}
+                placeholder="22"
+                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"
+              />
+            </div>
+          </div>
+
+          {error && (
+            <div className="p-3 bg-red-900/30 border border-red-600 rounded text-red-300 text-sm">
+              {error}
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={scanning || !hostname}
+            className="px-6 py-2 bg-kuma-green hover:bg-green-400 disabled:bg-slate-600 text-slate-900 font-semibold rounded transition-colors flex items-center gap-2"
+          >
+            {scanning ? (
+              <>
+                <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                </svg>
+                Scanning...
+              </>
+            ) : (
+              <>
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+                Scan Host
+              </>
+            )}
+          </button>
+        </form>
+      </div>
+
+      {/* Scan Progress */}
+      {scanning && hostname && scanProgress[hostname] && (
+        <HostCard
+          hostname={hostname}
+          progress={scanProgress[hostname]}
+          status="scanning"
+        />
+      )}
+
+      {/* Scan Results & Analysis */}
+      {currentScan && currentScanId && (
+        <DiscoveryResults
+          scanId={currentScanId}
+          scan={currentScan}
+          analysis={currentAnalysis}
+          devMode={devMode}
+        />
+      )}
+    </div>
+  );
+}
--- a/frontend/src/components/DevModeToggle.jsx
+++ b/frontend/src/components/DevModeToggle.jsx
@@ -0,0 +1,28 @@
+export default function DevModeToggle({ enabled, onToggle }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className={`text-sm font-medium ${enabled ? 'text-amber-400' : 'text-slate-400'}`}>
+        Dev Mode
+      </span>
+      <button
+        onClick={onToggle}
+        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-800 ${
+          enabled
+            ? 'bg-amber-500 focus:ring-amber-500'
+            : 'bg-slate-600 focus:ring-slate-500'
+        }`}
+      >
+        <span
+          className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+            enabled ? 'translate-x-6' : 'translate-x-1'
+          }`}
+        />
+      </button>
+      {enabled && (
+        <span className="text-xs text-amber-400 bg-amber-900/30 px-2 py-1 rounded">
+          Commands require approval
+        </span>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/components/DiscoveryResults.jsx
+++ b/frontend/src/components/DiscoveryResults.jsx
@@ -0,0 +1,277 @@
+import { useState } from 'react';
+import { api } from '../api/client';
+
+export default function DiscoveryResults({ scanId, scan, analysis, devMode }) {
+  const [selectedMonitors, setSelectedMonitors] = useState([]);
+  const [creatingDefaults, setCreatingDefaults] = useState(false);
+  const [creatingSuggested, setCreatingSuggested] = useState(false);
+  const [createResults, setCreateResults] = useState(null);
+
+  const handleCreateDefaults = async () => {
+    setCreatingDefaults(true);
+    try {
+      const result = await api.createDefaultMonitors(scanId);
+      setCreateResults(result.created);
+    } catch (err) {
+      console.error('Failed to create default monitors:', err);
+    } finally {
+      setCreatingDefaults(false);
+    }
+  };
+
+  const handleCreateSuggested = async () => {
+    if (selectedMonitors.length === 0) return;
+
+    setCreatingSuggested(true);
+    try {
+      const result = await api.createSuggestedMonitors(scanId, selectedMonitors);
+      setCreateResults(prev => [...(prev || []), ...result.created]);
+      setSelectedMonitors([]);
+    } catch (err) {
+      console.error('Failed to create suggested monitors:', err);
+    } finally {
+      setCreatingSuggested(false);
+    }
+  };
+
+  const toggleMonitor = (index) => {
+    setSelectedMonitors(prev =>
+      prev.includes(index)
+        ? prev.filter(i => i !== index)
+        : [...prev, index]
+    );
+  };
+
+  if (!scan.connected) {
+    return (
+      <div className="bg-red-900/30 border border-red-600 rounded-lg p-6">
+        <h3 className="text-lg font-semibold text-red-300 mb-2">Connection Failed</h3>
+        <p className="text-red-200">{scan.error}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Connection Success */}
+      <div className="bg-green-900/30 border border-green-600 rounded-lg p-4">
+        <p className="text-green-300 flex items-center gap-2">
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+          </svg>
+          Connected to {scan.hostname}
+        </p>
+      </div>
+
+      {/* Default Monitors */}
+      <div className="bg-slate-800 rounded-lg p-6">
+        <div className="flex items-center justify-between mb-4">
+          <div>
+            <h3 className="text-lg font-semibold">Default Monitors</h3>
+            <p className="text-sm text-slate-400">
+              Basic monitoring that will be applied automatically (no approval required)
+            </p>
+          </div>
+          <button
+            onClick={handleCreateDefaults}
+            disabled={creatingDefaults}
+            className="px-4 py-2 bg-kuma-green hover:bg-green-400 disabled:bg-slate-600 text-slate-900 font-medium rounded transition-colors"
+          >
+            {creatingDefaults ? 'Creating...' : 'Apply Default Monitors'}
+          </button>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+          <div className="flex items-center gap-2 p-3 bg-slate-700/50 rounded">
+            <span className="w-2 h-2 rounded-full bg-green-400"></span>
+            <span>Ping - {scan.hostname}</span>
+          </div>
+          <div className="flex items-center gap-2 p-3 bg-slate-700/50 rounded">
+            <span className="w-2 h-2 rounded-full bg-blue-400"></span>
+            <span>TCP - SSH Port 22</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Claude Analysis */}
+      {analysis && (
+        <div className="bg-slate-800 rounded-lg p-6">
+          <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+            <svg className="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+            </svg>
+            AI Analysis
+            {analysis.loading && (
+              <span className="text-sm text-slate-400 ml-2">Analyzing...</span>
+            )}
+          </h3>
+
+          {analysis.error ? (
+            <div className="p-4 bg-red-900/30 border border-red-600 rounded text-red-300">
+              {analysis.error}
+            </div>
+          ) : analysis.loading ? (
+            <div className="flex items-center gap-3 text-slate-400">
+              <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+              </svg>
+              Claude is analyzing the host...
+            </div>
+          ) : (
+            <div className="space-y-6">
+              {/* Analysis Text */}
+              {analysis.analysis && (
+                <div className="prose prose-invert prose-sm max-w-none">
+                  <p className="text-slate-300">{analysis.analysis}</p>
+                </div>
+              )}
+
+              {/* Suggested Monitors */}
+              {analysis.monitors && analysis.monitors.length > 0 && (
+                <div>
+                  <div className="flex items-center justify-between mb-3">
+                    <h4 className="font-medium">Suggested Monitors</h4>
+                    <button
+                      onClick={handleCreateSuggested}
+                      disabled={selectedMonitors.length === 0 || creatingSuggested}
+                      className="px-3 py-1 text-sm bg-purple-600 hover:bg-purple-500 disabled:bg-slate-600 text-white rounded transition-colors"
+                    >
+                      {creatingSuggested
+                        ? 'Creating...'
+                        : `Create Selected (${selectedMonitors.length})`}
+                    </button>
+                  </div>
+
+                  <div className="space-y-2">
+                    {analysis.monitors.map((monitor, index) => (
+                      <div
+                        key={index}
+                        onClick={() => toggleMonitor(index)}
+                        className={`p-4 rounded cursor-pointer transition-colors ${
+                          selectedMonitors.includes(index)
+                            ? 'bg-purple-900/30 border border-purple-500'
+                            : 'bg-slate-700/50 border border-transparent hover:border-slate-600'
+                        }`}
+                      >
+                        <div className="flex items-start gap-3">
+                          <input
+                            type="checkbox"
+                            checked={selectedMonitors.includes(index)}
+                            onChange={() => {}}
+                            className="mt-1 w-4 h-4 rounded border-slate-500 bg-slate-700 text-purple-500 focus:ring-purple-500"
+                          />
+                          <div className="flex-1">
+                            <div className="flex items-center gap-2 mb-1">
+                              <span className={`px-2 py-0.5 text-xs font-medium rounded ${
+                                monitor.type === 'http' ? 'bg-blue-900 text-blue-200' :
+                                monitor.type === 'tcp' ? 'bg-green-900 text-green-200' :
+                                monitor.type === 'docker' ? 'bg-cyan-900 text-cyan-200' :
+                                'bg-slate-600 text-slate-200'
+                              }`}>
+                                {monitor.type.toUpperCase()}
+                              </span>
+                              <span className="font-medium">{monitor.name}</span>
+                            </div>
+                            <p className="text-sm text-slate-400">
+                              {monitor.target}
+                              {monitor.port && `:${monitor.port}`}
+                              {' • '}
+                              Every {monitor.interval}s
+                            </p>
+                            {monitor.reason && (
+                              <p className="text-sm text-slate-500 mt-1 italic">
+                                {monitor.reason}
+                              </p>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Additional Commands Claude Wants to Run */}
+              {analysis.additional_commands && analysis.additional_commands.length > 0 && (
+                <div>
+                  <h4 className="font-medium mb-3 flex items-center gap-2">
+                    <svg className="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                    </svg>
+                    Claude wants more information
+                    {devMode && (
+                      <span className="text-xs text-amber-400 bg-amber-900/30 px-2 py-0.5 rounded">
+                        Requires approval
+                      </span>
+                    )}
+                  </h4>
+
+                  <div className="space-y-2">
+                    {analysis.additional_commands.map((cmd, index) => (
+                      <div key={index} className="p-3 bg-slate-700/50 rounded">
+                        <code className="text-sm text-green-400 font-mono block mb-1">
+                          {cmd.command}
+                        </code>
+                        <p className="text-xs text-slate-400">{cmd.reason}</p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Questions for User */}
+              {analysis.questions && analysis.questions.length > 0 && (
+                <div>
+                  <h4 className="font-medium mb-3">Questions from Claude</h4>
+                  <ul className="space-y-2">
+                    {analysis.questions.map((question, index) => (
+                      <li key={index} className="text-sm text-slate-300 flex items-start gap-2">
+                        <span className="text-purple-400">?</span>
+                        {question}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Creation Results */}
+      {createResults && createResults.length > 0 && (
+        <div className="bg-slate-800 rounded-lg p-6">
+          <h3 className="text-lg font-semibold mb-4">Creation Results</h3>
+          <div className="space-y-2">
+            {createResults.map((result, index) => (
+              <div
+                key={index}
+                className={`p-3 rounded flex items-center gap-2 ${
+                  result.status === 'created'
+                    ? 'bg-green-900/30 text-green-300'
+                    : 'bg-red-900/30 text-red-300'
+                }`}
+              >
+                {result.status === 'created' ? (
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                  </svg>
+                ) : (
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                )}
+                <span className="font-medium">{result.monitor}</span>
+                <span className="text-sm opacity-75">({result.type})</span>
+                {result.error && (
+                  <span className="text-sm ml-auto">{result.error}</span>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/components/HostCard.jsx
+++ b/frontend/src/components/HostCard.jsx
@@ -0,0 +1,78 @@
+const COMMAND_LABELS = {
+  connect: 'Connect',
+  system_info: 'System Info',
+  os_release: 'OS Release',
+  docker_containers: 'Docker Containers',
+  systemd_services: 'Systemd Services',
+  disk_usage: 'Disk Usage',
+  memory_usage: 'Memory Usage',
+  cpu_count: 'CPU Count',
+  open_ports: 'Open Ports',
+};
+
+const STATUS_COLORS = {
+  connecting: 'text-yellow-400',
+  connected: 'text-green-400',
+  running: 'text-blue-400',
+  complete: 'text-green-400',
+  failed: 'text-red-400',
+  error: 'text-red-400',
+};
+
+export default function HostCard({ hostname, progress, status }) {
+  const commands = Object.entries(COMMAND_LABELS);
+
+  return (
+    <div className="bg-slate-800 rounded-lg p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-lg font-semibold flex items-center gap-2">
+          <svg className="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
+          </svg>
+          {hostname}
+        </h3>
+        {status === 'scanning' && (
+          <span className="flex items-center gap-2 text-sm text-blue-400">
+            <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+            </svg>
+            Scanning...
+          </span>
+        )}
+      </div>
+
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
+        {commands.map(([key, label]) => {
+          const cmdStatus = progress?.[key];
+          const colorClass = STATUS_COLORS[cmdStatus] || 'text-slate-500';
+
+          return (
+            <div
+              key={key}
+              className="flex items-center gap-2 text-sm"
+            >
+              {cmdStatus === 'running' ? (
+                <svg className="animate-spin h-4 w-4 text-blue-400" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                </svg>
+              ) : cmdStatus === 'complete' || cmdStatus === 'connected' ? (
+                <svg className="w-4 h-4 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                </svg>
+              ) : cmdStatus?.startsWith('failed') || cmdStatus?.startsWith('error') ? (
+                <svg className="w-4 h-4 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              ) : (
+                <div className="w-4 h-4 rounded-full border-2 border-slate-600" />
+              )}
+              <span className={colorClass}>{label}</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  @apply bg-slate-900 text-slate-100;
+}
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        kuma: {
+          green: '#5CDD8B',
+          dark: '#1a1a2e',
+          darker: '#16162a',
+        }
+      }
+    },
+  },
+  plugins: [],
+}
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:5000',
+        changeOrigin: true,
+      },
+      '/socket.io': {
+        target: 'http://localhost:5000',
+        ws: true,
+      },
+    },
+  },
+})