Update frontend/src/App.tsx

frontend/src/App.tsx

@@ -0,0 +1,67 @@
+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>
+  );
+}