Update src/App.tsx

src/App.tsx

@@ -10,7 +10,8 @@ import {
   Play,
   Wifi,
   Cpu,
-  Folder
+  Folder,
+  FileText
 } from 'lucide-react';
 import { cn } from './lib/utils';
 
@@ -455,6 +456,59 @@ function DeployTab() {
   );
 }
 
+function ReportResultViewer({ report }: { report: any }) {
+  if (report.type === 'list_directory' && report.result?.files) {
+    return (
+      <div className="bg-black/40 rounded-lg p-2 border border-white/5">
+        <div className="flex items-center gap-2 mb-2 px-2 pb-2 border-b border-white/10">
+          <Folder size={14} className="text-indigo-400" />
+          <span className="text-xs font-semibold text-white">Directory Contents</span>
+        </div>
+        <div className="flex flex-col max-h-64 overflow-y-auto pr-1 nice-scrollbar">
+          {report.result.files.map((f: string, i: number) => (
+            <div key={i} className="text-xs text-slate-300 py-1.5 px-2 hover:bg-white/5 rounded flex items-center transition-colors">
+              <span className="mr-2 text-slate-500">{'>'}</span>
+              <span className="truncate">{f}</span>
+            </div>
+          ))}
+          {report.result.files.length === 0 && <span className="text-xs text-slate-500 italic p-2">Empty directory</span>}
+        </div>
+      </div>
+    );
+  } else if (report.type === 'get_file_info' && report.result?.info !== undefined) {
+    return (
+      <div className="bg-black/40 rounded-lg p-3 border border-white/5">
+        <div className="flex items-center gap-2 mb-2 pb-2 border-b border-white/10">
+          <FileText size={14} className="text-indigo-400" />
+          <span className="text-xs font-semibold text-white">File Information</span>
+        </div>
+        <div className="grid grid-cols-2 gap-2 text-xs">
+          <div className="text-slate-400">Size: <span className="text-white font-mono">{report.result.info.size} bytes</span></div>
+          <div className="text-slate-400">Mode: <span className="text-white font-mono">{report.result.info.mode}</span></div>
+          <div className="text-slate-400">Modified: <span className="text-white">{new Date(report.result.info.mtimeMs || report.result.info.mtime * 1000 || Date.now()).toLocaleString()}</span></div>
+        </div>
+      </div>
+    );
+  } else if (report.type === 'read_file' && report.result?.content !== undefined) {
+    return (
+      <div className="bg-black/40 rounded-lg border border-white/5 overflow-hidden">
+        <div className="bg-white/5 px-3 py-2 border-b border-white/10 flex items-center gap-2">
+          <FileText size={14} className="text-indigo-400" />
+          <span className="text-xs font-semibold text-white">File Output</span>
+        </div>
+        <pre className="text-xs text-emerald-400 p-3 overflow-x-auto whitespace-pre-wrap font-mono">
+          {report.result.content}
+        </pre>
+      </div>
+    );
+  }
+  return (
+    <pre className="text-xs text-emerald-400 bg-black/40 p-2 rounded-lg break-words whitespace-pre-wrap font-mono">
+      {JSON.stringify(report.result, null, 2)}
+    </pre>
+  );
+}
+
 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.
@@ -492,15 +546,17 @@ function CommandsTab({ category }: { category: 'network' | 'system' | 'file' })
   }, []);
 
   const requiresTarget = command === 'fetch_http_test' || command === 'socket_tcp_probe';
-  const requiresHost = command === 'dns_resolve' || command === 'icmp_ping' || command === 'traceroute' || command === 'port_scan' || command === 'dns_mx_records';
+  const requiresHost = command === 'dns_resolve' || command === 'icmp_ping' || command === 'traceroute' || command === 'port_scan' || command === 'dns_mx_records' || command === 'dns_txt_records';
   const requiresPorts = command === 'port_scan';
   const requiresInterval = command === 'change_poll_interval';
   const requiresShell = command === 'exec_shell';
-  const requiresPath = command === 'list_directory' || command === 'read_file' || command === 'delete_file' || command === 'write_file' || command === 'run_file';
+  const requiresPath = command === 'list_directory' || command === 'read_file' || command === 'delete_file' || command === 'write_file' || command === 'run_file' || command === 'copy_file' || command === 'move_file' || command === 'get_file_info';
+  const requiresDestPath = command === 'copy_file' || command === 'move_file';
   const requiresContent = command === 'write_file';
   const requiresPid = command === 'kill_process';
   
   const [fileContent, setFileContent] = useState('echo hello');
+  const [destPath, setDestPath] = useState('/tmp/dest');
 
   const issueCommand = async () => {
     let payload: any = {};
@@ -510,6 +566,7 @@ function CommandsTab({ category }: { category: 'network' | 'system' | 'file' })
     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
 
@@ -570,6 +627,9 @@ function CommandsTab({ category }: { category: 'network' | 'system' | 'file' })
                     <option value="netstat_connections">Netstat Connections</option>
                     <option value="ifconfig_ip">Network Interfaces (ifconfig/ipconfig)</option>
                     <option value="dns_mx_records">DNS MX Records</option>
+                    <option value="dns_txt_records">DNS TXT Records</option>
+                    <option value="route_table">Route Table</option>
+                    <option value="wifi_networks">List WiFi Networks</option>
                   </optgroup>
                 )}
                 {category === 'system' && (
@@ -585,6 +645,8 @@ function CommandsTab({ category }: { category: 'network' | 'system' | 'file' })
                     <option value="get_env_vars">Get Env Vars</option>
                     <option value="get_users">List Users</option>
                     <option value="get_groups">List Groups</option>
+                    <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="reboot_system">Reboot System (Warning!)</option>
                     <option value="self_terminate">Terminate Client Process</option>
@@ -593,8 +655,11 @@ function CommandsTab({ category }: { category: 'network' | 'system' | 'file' })
                 {category === 'file' && (
                   <optgroup label="File Commands">
                     <option value="list_directory">List Directory</option>
+                    <option value="get_file_info">Get File Info</option>
                     <option value="read_file">Read/View File</option>
                     <option value="write_file">Add/Write File</option>
+                    <option value="copy_file">Copy File</option>
+                    <option value="move_file">Move/Rename File</option>
                     <option value="delete_file">Delete File</option>
                     <option value="run_file">Execute/Run File</option>
                   </optgroup>
@@ -665,6 +730,18 @@ function CommandsTab({ category }: { category: 'network' | 'system' | 'file' })
               </div>
             )}
 
+            {requiresDestPath && (
+              <div className="border-t border-white/5 pt-5">
+                <label className="block text-sm font-medium text-slate-400 mb-1.5 px-1">Destination Path</label>
+                <input 
+                  type="text" 
+                  value={destPath}
+                  onChange={e => setDestPath(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 text-sm shadow-inner"
+                />
+              </div>
+            )}
+
             {requiresContent && (
               <div className="border-t border-white/5 pt-5">
                 <label className="block text-sm font-medium text-slate-400 mb-1.5 px-1">File Content</label>
@@ -728,9 +805,7 @@ function CommandsTab({ category }: { category: 'network' | 'system' | 'file' })
                     </span>
                   </div>
                   <div className="text-white font-medium mb-1">{report.type || 'Unknown Command'}</div>
-                  <pre className="text-xs text-emerald-400 bg-black/40 p-2 rounded-lg break-words whitespace-pre-wrap font-mono">
-                    {JSON.stringify(report.result, null, 2)}
-                  </pre>
+                  <ReportResultViewer report={report} />
                 </div>
               ))}
             </div>