Update frontend/src/App.tsx

frontend/src/App.tsx

@@ -1,67 +1,9 @@
-import React, { useEffect, useState } from 'react';
-
-export default function App() {
-  const [browserFrame, setBrowserFrame] = useState<string>("");
-  const [logs, setLogs] = useState<string[]>([]);
-  const [input, setInput] = useState("");
-
-  useEffect(() => {
-    // Connect to the Rust SSE Stream
-    const eventSource = new EventSource("/api/stream");
-    
-    eventSource.onmessage = (event) => {
-      const data = JSON.parse(event.data);
-      if (data.type === "frame") {
-        setBrowserFrame(data.data); // Base64 image
-      } else if (data.type === "log") {
-        setLogs(prev => [...prev, data.data].slice(-10));
-      }
-    };
-
-    return () => eventSource.close();
-  }, []);
-
-  const sendMessage = async () => {
-    await fetch("/api/chat", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ message: input })
-    });
-    setInput("");
-  };
-
-  return (
-    <div className="flex h-screen bg-zinc-950 text-white font-sans">
-      {/* Left: Agent Control */}
-      <div className="w-1/3 flex flex-col border-r border-zinc-800 p-4">
-        <h1 className="text-xl font-bold mb-4 text-blue-400">Polymorphic Agent</h1>
-        <div className="flex-1 overflow-y-auto space-y-2 mb-4 text-sm">
-          {logs.map((log, i) => (
-            <div key={i} className="p-2 bg-zinc-900 rounded border border-zinc-800">{log}</div>
-          ))}
-        </div>
-        <div className="flex gap-2">
-          <input 
-            className="flex-1 bg-zinc-900 border border-zinc-700 p-2 rounded"
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={(e) => e.key === 'Enter' && sendMessage()}
-          />
-          <button onClick={sendMessage} className="bg-blue-600 px-4 py-2 rounded">Send</button>
-        </div>
-      </div>
-
-      {/* Right: Isolated Browser View */}
-      <div className="w-2/3 bg-zinc-900 flex flex-col">
-        <div className="p-2 bg-zinc-800 text-xs text-zinc-400">Isolated Browser (Nix Environment)</div>
-        <div className="flex-1 flex items-center justify-center overflow-hidden">
-          {browserFrame ? (
-            <img src={`data:image/jpeg;base64,${browserFrame}`} className="max-w-full max-h-full shadow-2xl" />
-          ) : (
-            <div className="animate-pulse text-zinc-600">Waiting for browser stream...</div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)