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>

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

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

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

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

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