Update frontend/src/App.tsx

frontend/src/App.tsx

@@ -1,9 +1,78 @@
-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>,
-)
+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(() => {
+    const eventSource = new EventSource("/api/stream");
+    eventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.type === "frame") setBrowserFrame(data.data);
+        if (data.type === "log") setLogs(prev => [...prev, data.data].slice(-10));
+      } catch (e) {
+        console.error("SSE Parse Error", e);
+      }
+    };
+    return () => eventSource.close();
+  }, []);
+
+  const sendMessage = async () => {
+    if (!input) return;
+    setLogs(prev => [...prev, `You: ${input}`]);
+    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-zinc-200 font-sans">
+      <div className="w-80 flex flex-col border-r border-zinc-800 p-4 bg-zinc-900/50">
+        <h1 className="text-lg font-bold mb-4 text-blue-500 flex items-center gap-2">
+          <div className="w-3 h-3 bg-blue-500 rounded-full animate-pulse"></div>
+          Polymorphic Agent
+        </h1>
+        <div className="flex-1 overflow-y-auto space-y-2 mb-4 scrollbar-hide">
+          {logs.map((log, i) => (
+            <div key={i} className="p-2 bg-zinc-800/50 rounded border border-zinc-700/50 text-xs">
+              {log}
+            </div>
+          ))}
+        </div>
+        <div className="flex gap-2">
+          <input 
+            className="flex-1 bg-zinc-800 border border-zinc-700 p-2 rounded text-sm focus:outline-none focus:border-blue-500"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && sendMessage()}
+            placeholder="Ask agent..."
+          />
+          <button onClick={sendMessage} className="bg-blue-600 hover:bg-blue-500 px-3 py-1 rounded text-sm transition-colors">
+            Send
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 bg-black flex flex-col relative">
+        <div className="absolute top-2 left-2 z-10 bg-black/60 px-2 py-1 rounded text-[10px] uppercase tracking-widest text-zinc-500 border border-zinc-800">
+          Live Nix Environment View
+        </div>
+        <div className="flex-1 flex items-center justify-center">
+          {browserFrame ? (
+            <img src={`data:image/jpeg;base64,${browserFrame}`} className="max-w-full max-h-full object-contain shadow-2xl" />
+          ) : (
+            <div className="flex flex-col items-center gap-3">
+              <div className="w-8 h-8 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin"></div>
+              <div className="text-zinc-600 text-sm font-medium">Initializing Browser...</div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}