Update app.py

app.py

@@ -1,8 +1,6 @@
 """
-ULTIMATE MULTI‑AGENT SYSTEM – SINGLE FILE
-All keys hardcoded – no Pollinations – production ready.
+ULTIMATE SINGLE AGENT – All Tools, WebSocket, Stunning UI
 """
-
 import os
 import sys
 import json
@@ -96,7 +94,7 @@ TEMP_DIR = "/tmp/agent_workspace"
 os.makedirs(TEMP_DIR, exist_ok=True)
 
 # =====================================================================
-#  LLM CLIENT (No Pollinations)
+#  LLM CLIENT
 # =====================================================================
 class LLMClient:
     _groq_idx = 0
@@ -105,7 +103,6 @@ class LLMClient:
 
     @classmethod
     async def chat(cls, messages, temp=0.1, max_tokens=2048, response_format=None):
-        # Try Groq
         try:
             async with cls._lock:
                 key = GROQ_KEYS[cls._groq_idx % len(GROQ_KEYS)]
@@ -124,7 +121,6 @@ class LLMClient:
         except Exception as e:
             logger.warning(f"Groq failed: {e}")
 
-        # Fallback OpenRouter
         try:
             async with cls._lock:
                 key = OPENROUTER_KEYS[cls._or_idx % len(OPENROUTER_KEYS)]
@@ -147,7 +143,6 @@ class LLMClient:
         except Exception as e:
             logger.warning(f"OpenRouter failed: {e}")
 
-        # Hugging Face (if key provided)
         if HF_API_KEY:
             try:
                 prompt = "\n".join([f"{m['role']}: {m['content']}" for m in messages])
@@ -163,7 +158,6 @@ class LLMClient:
             except Exception as e:
                 logger.error(f"HF failed: {e}")
 
-        # Ultimate regex fallback
         return cls._regex_fallback(messages)
 
     @classmethod
@@ -178,26 +172,7 @@ class LLMClient:
         return json.dumps({"thought": "Fallback done", "action": {"tool": "done", "params": {"result": "No action"}}})
 
 # =====================================================================
-#  MEMORY (Redis + ChromaDB)
-# =====================================================================
-redis_client = None
-try:
-    redis_client = redis.from_url(REDIS_URL, decode_responses=True)
-    logger.info("✅ Redis connected.")
-except:
-    logger.warning("⚠️ Redis connection failed.")
-
-chroma_client = chromadb.Client()
-embedding_fn = embedding_functions.SentenceTransformerEmbeddingFunction(
-    model_name="all-MiniLM-L6-v2"
-)
-memory_collection = chroma_client.get_or_create_collection(
-    name="agent_memory",
-    embedding_function=embedding_fn
-)
-
-# =====================================================================
-#  TOOL REGISTRY (80+ tools)
+#  TOOL REGISTRY
 # =====================================================================
 class ToolRegistry:
     def __init__(self, page: Page, state: Any):
@@ -930,7 +905,6 @@ class ToolRegistry:
         return {"result": "Summary", "data": result[0]['summary_text']}
 
     async def translate_text(self, text: str, target_language: str = "fr"):
-        # Placeholder – real translation would need a dedicated model
         return {"result": "Translation placeholder", "data": text}
 
     async def extract_entities(self, text: str):
@@ -1195,26 +1169,10 @@ class ToolRegistry:
             return {"error": str(e)}
 
 # =====================================================================
-#  AGENT STATE, BASE AGENT, SPECIALIST AGENTS
+#  AGENT
 # =====================================================================
-class AgentState:
-    def __init__(self, task: str = ""):
-        self.task = task
-        self.steps = 0
-        self.done = False
-        self.last_result = ""
-        self.variables = {}
-        self.plan = []
-        self.action_history = []
-        self.created_at = datetime.now().isoformat()
-        self.session_id = None
-        self.approval_future = None
-
-class BaseAgent:
-    def __init__(self, name: str, role: str, system_prompt: str, tools: ToolRegistry, state: AgentState):
-        self.name = name
-        self.role = role
-        self.base_system_prompt = system_prompt
+class Agent:
+    def __init__(self, tools: ToolRegistry, state: Any):
         self.tools = tools
         self.state = state
         self.history = []
@@ -1222,8 +1180,8 @@ class BaseAgent:
         self.result = None
 
     async def think(self, context: str) -> Dict:
-        prompt = self.base_system_prompt + """
-Output JSON only with "thought" and "action".
+        prompt = """
+You are a web automation agent. Output JSON only with "thought" and "action".
 Available tools: navigate, click, fill, select, scroll, press, hover, back, wait, wait_for_selector, screenshot, extract_table, get_text, execute_script, get_url, get_title, get_page_source, take_full_page_screenshot, upload_file, download_file, open_new_tab, switch_tab, close_tab, list_tabs, evaluate, wait_for_navigation, get_cookies, set_cookies, clear_cookies, get_local_storage, set_local_storage, get_session_storage, set_session_storage, read_file, write_file, append_file, read_binary_file, write_binary_file, list_dir, make_dir, delete_file, copy_file, move_file, find_files, unzip, zip, get_file_info, read_csv, write_csv, read_json, write_json, shell, shell_background, shell_with_timeout, get_env, set_env, call_api, call_api_async, call_graphql, call_rest, generate_image, edit_image, resize_image, crop_image, rotate_image, filter_image, convert_image, create_collage, execute_python, install_package, get_python_version, list_installed_packages, vector_search, vector_store, vector_delete, list_memories, clear_memories, get_memory_count, store_variable, get_variable, list_variables, delete_variable, clear_variables, analyze_csv, analyze_json, plot_data, sentiment_analysis, summarize_text, translate_text, extract_entities, keyword_extraction, send_email, send_email_with_attachment, generate_pdf, generate_pdf_from_html, extract_pdf_text, schedule_task, list_scheduled_tasks, cancel_task, set_task, done, log, ask_user, wait_for_user_input, get_time, sleep, add_tool, remove_tool, list_tools, modify_prompt, save_state, load_state, reset_state, get_system_info, apply_stealth, set_viewport, compare_images, extract_links, find_element_by_text.
 """
         messages = [
@@ -1247,7 +1205,6 @@ Available tools: navigate, click, fill, select, scroll, press, hover, back, wait
         if tool_name == "done":
             self.done = True
             self.result = params.get("result", "Task completed.")
-            # final screenshot
             try:
                 ss = await self.tools("screenshot")
                 return {"result": self.result, "screenshot": ss.get("result", "")}
@@ -1255,20 +1212,21 @@ Available tools: navigate, click, fill, select, scroll, press, hover, back, wait
                 return {"result": self.result}
         try:
             result = await self.tools(tool_name, **params)
-            # screenshot after action
             ss = await self.tools("screenshot")
             result["screenshot"] = ss.get("result", "")
             return result
         except Exception as e:
             return {"error": str(e)}
 
-    async def run(self, context: str) -> Dict:
+    async def run(self, task: str) -> Dict:
+        self.state.task = task
         self.history = []
         self.done = False
         self.result = None
         steps = 0
         max_steps = 20
         while not self.done and steps < max_steps:
+            context = f"Task: {task}\nHistory: {self.history[-1]['result'] if self.history else 'None'}"
             data = await self.think(context)
             thought = data.get("thought", "")
             action = data.get("action", {"tool": "done", "params": {"result": "No action"}})
@@ -1282,174 +1240,12 @@ Available tools: navigate, click, fill, select, scroll, press, hover, back, wait
             steps += 1
             if self.done:
                 break
-            context = f"Task: {self.state.task}\nLast action result: {result}"
         return {
-            "agent": self.name,
-            "result": self.result,
             "history": self.history,
-            "steps": len(self.history)
-        }
-
-    def get_status(self):
-        return {
-            "name": self.name,
-            "role": self.role,
-            "done": self.done,
             "result": self.result,
-            "history": self.history[-5:],
             "steps": len(self.history)
         }
 
-# Specialist agents
-class ResearchAgent(BaseAgent):
-    def __init__(self, tools: ToolRegistry, state: AgentState):
-        prompt = "You are a Research Agent. Gather information from the web. Use tools step by step. Output JSON only."
-        super().__init__("Research", "Gather info", prompt, tools, state)
-
-class SalesAgent(BaseAgent):
-    def __init__(self, tools: ToolRegistry, state: AgentState):
-        prompt = "You are a Sales Agent. Create proposals, pitches, and competitor analysis. Output JSON only."
-        super().__init__("Sales", "Sales", prompt, tools, state)
-
-class SupportAgent(BaseAgent):
-    def __init__(self, tools: ToolRegistry, state: AgentState):
-        prompt = "You are a Support Agent. Answer FAQs, troubleshoot, generate documentation. Output JSON only."
-        super().__init__("Support", "Support", prompt, tools, state)
-
-class DataAgent(BaseAgent):
-    def __init__(self, tools: ToolRegistry, state: AgentState):
-        prompt = "You are a Data Agent. Analyse data, create charts, extract insights. Output JSON only."
-        super().__init__("Data", "Data analysis", prompt, tools, state)
-
-class CodeAgent(BaseAgent):
-    def __init__(self, tools: ToolRegistry, state: AgentState):
-        prompt = "You are a Code Agent. Write, review, execute Python code. Output JSON only."
-        super().__init__("Code", "Code", prompt, tools, state)
-
-class ContentAgent(BaseAgent):
-    def __init__(self, tools: ToolRegistry, state: AgentState):
-        prompt = "You are a Content Agent. Summarise, translate, create content. Output JSON only."
-        super().__init__("Content", "Content", prompt, tools, state)
-
-# =====================================================================
-#  SUPERVISOR AGENT
-# =====================================================================
-class SupervisorAgent:
-    def __init__(self, tools: ToolRegistry, state: AgentState):
-        self.tools = tools
-        self.state = state
-        self.specialists = {}
-        self.plan = []
-        self.agent_results = {}
-        self.done = False
-        self.result = None
-
-    def register_specialist(self, name: str, agent: BaseAgent):
-        self.specialists[name] = agent
-
-    async def plan_task(self, task: str) -> List[Dict]:
-        prompt = f"""You are the Supervisor. Decompose the user request into sub-tasks and assign to specialists.
-Available agents: {list(self.specialists.keys())}
-User request: {task}
-Return a JSON array of steps with 'step', 'agent', 'task', 'depends_on'.
-Example: [{{"step":1, "agent":"Research", "task":"Search Wikipedia for AI", "depends_on":[]}}]
-"""
-        messages = [
-            {"role": "system", "content": "You are a task decomposition expert. Output JSON only."},
-            {"role": "user", "content": prompt}
-        ]
-        raw = await LLMClient.chat(messages, temp=0.2, response_format="json")
-        try:
-            plan = json.loads(raw)
-            if isinstance(plan, list):
-                return plan
-        except:
-            pass
-        return [{"step": 1, "agent": "Research", "task": task, "depends_on": []}]
-
-    async def execute_plan(self, plan: List[Dict]) -> Dict:
-        results = {}
-        for step in plan:
-            agent_name = step.get("agent")
-            sub_task = step.get("task")
-            if agent_name in self.specialists:
-                agent = self.specialists[agent_name]
-                context = f"Sub-task: {sub_task}\nOverall goal: {self.state.task}"
-                result = await agent.run(context)
-                results[step["step"]] = {"agent": agent_name, "task": sub_task, "result": result}
-            else:
-                results[step["step"]] = {"error": f"Unknown agent: {agent_name}"}
-        return results
-
-    async def synthesize(self, task: str, results: Dict) -> str:
-        prompt = f"Task: {task}\nResults: {json.dumps(results, indent=2, default=str)}\nSynthesise a final answer."
-        messages = [
-            {"role": "system", "content": "Synthesis expert."},
-            {"role": "user", "content": prompt}
-        ]
-        solution = await LLMClient.chat(messages, temp=0.3)
-        return solution
-
-    async def run(self, task: str) -> Dict:
-        self.state.task = task
-        self.plan = await self.plan_task(task)
-        self.agent_results = await self.execute_plan(self.plan)
-        self.result = await self.synthesize(task, self.agent_results)
-        self.done = True
-        return {
-            "plan": self.plan,
-            "agent_results": self.agent_results,
-            "solution": self.result
-        }
-
-# =====================================================================
-#  ORCHESTRATOR
-# =====================================================================
-class MultiAgentOrchestrator:
-    def __init__(self, page: Page, state: AgentState):
-        self.page = page
-        self.state = state
-        self.tools = ToolRegistry(page, state)
-        self.supervisor = SupervisorAgent(self.tools, state)
-        self.agents = {}
-        self.setup_agents()
-        self.progress = 0
-
-    def setup_agents(self):
-        self.agents = {
-            "Research": ResearchAgent(self.tools, self.state),
-            "Sales": SalesAgent(self.tools, self.state),
-            "Support": SupportAgent(self.tools, self.state),
-            "Data": DataAgent(self.tools, self.state),
-            "Code": CodeAgent(self.tools, self.state),
-            "Content": ContentAgent(self.tools, self.state),
-        }
-        for name, agent in self.agents.items():
-            self.supervisor.register_specialist(name, agent)
-
-    async def run(self, task: str) -> Dict:
-        self.state.task = task
-        result = await self.supervisor.run(task)
-        agent_status = {name: agent.get_status() for name, agent in self.agents.items()}
-        result["agent_status"] = agent_status
-        return result
-
-    def get_status(self):
-        agent_status = {name: agent.get_status() for name, agent in self.agents.items()}
-        agent_status["Supervisor"] = {
-            "done": self.supervisor.done,
-            "result": self.supervisor.result,
-            "plan": self.supervisor.plan,
-        }
-        return {
-            "task": self.state.task,
-            "steps": self.state.steps,
-            "done": self.state.done,
-            "last_result": self.state.last_result,
-            "progress": self.progress,
-            "agent_status": agent_status,
-        }
-
 # =====================================================================
 #  FASTAPI APP
 # =====================================================================
@@ -1466,7 +1262,7 @@ sessions = {}
 session_status = {}
 ws_connections = {}
 
-async def run_orchestrator(sid: str, task: str, headless: bool):
+async def run_agent(sid: str, task: str, headless: bool):
     try:
         playwright = await async_playwright().start()
         browser = await playwright.chromium.launch(headless=headless)
@@ -1476,11 +1272,11 @@ async def run_orchestrator(sid: str, task: str, headless: bool):
         # apply stealth
         temp_tools = ToolRegistry(page, None)
         await temp_tools.apply_stealth()
-        state = AgentState(task)
-        state.session_id = sid
-        orch = MultiAgentOrchestrator(page, state)
+        state = type('State', (), {'variables': {}, 'done': False, 'result': None, 'task': task})()
+        tools = ToolRegistry(page, state)
+        agent = Agent(tools, state)
         session_status[sid]["status"] = "running"
-        result = await orch.run(task)
+        result = await agent.run(task)
         session_status[sid]["status"] = "completed"
         session_status[sid]["result"] = result
         session_status[sid]["progress"] = 100
@@ -1488,7 +1284,7 @@ async def run_orchestrator(sid: str, task: str, headless: bool):
     except Exception as e:
         session_status[sid]["status"] = "error"
         session_status[sid]["error"] = str(e)
-        logger.error(f"Orchestrator failed: {e}")
+        logger.error(f"Agent failed: {e}")
 
 class StartRequest(BaseModel):
     task: str
@@ -1499,7 +1295,7 @@ async def start(req: StartRequest):
     sid = str(uuid.uuid4())
     sessions[sid] = None
     session_status[sid] = {"status": "initialized", "progress": 0, "result": None, "error": None}
-    asyncio.create_task(run_orchestrator(sid, req.task, req.headless))
+    asyncio.create_task(run_agent(sid, req.task, req.headless))
     return {"session_id": sid, "status": "started"}
 
 @app.get("/status/{sid}")
@@ -1524,7 +1320,6 @@ async def websocket_endpoint(websocket: WebSocket, sid: str):
     try:
         while True:
             data = await websocket.receive_json()
-            # Handle incoming messages (e.g., override, approval, ping)
             if data.get("type") == "ping":
                 await websocket.send_json({"type": "pong"})
             elif data.get("type") == "stop":
@@ -1536,363 +1331,130 @@ async def websocket_endpoint(websocket: WebSocket, sid: str):
             ws_connections[sid].remove(websocket)
 
 # =====================================================================
-#  UI – STUNNING DASHBOARD
+#  UI – Compact but Beautiful
 # =====================================================================
 HTML = """
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Ultimate Multi‑Agent System</title>
+<title>Ultimate Agent</title>
 <style>
-* { margin:0; padding:0; box-sizing:border-box; }
-body { font-family: 'Inter', system-ui, sans-serif; background: #080c14; color: #e8edf5; padding: 24px; background-image: radial-gradient(circle at 20% 30%, rgba(79,124,255,0.06) 0%, transparent 60%), radial-gradient(circle at 80% 70%, rgba(167,139,250,0.05) 0%, transparent 60%); }
-.container { max-width: 1600px; margin: 0 auto; }
-.header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
-.header h1 { font-size: 34px; font-weight: 800; background: linear-gradient(135deg, #4f7cff, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: flex; align-items: center; gap: 12px; }
-.header h1 .version { font-size: 14px; font-weight: 500; color: #8899b0; -webkit-text-fill-color: #8899b0; background: none; border: 1px solid #1a2a3a; padding: 4px 12px; border-radius: 20px; }
-.badge { background: #1a2535; padding: 6px 18px; border-radius: 40px; font-size: 12px; color: #a0b4d0; border: 1px solid #2a3a50; font-weight: 500; }
-.connection-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #8899b0; }
-.connection-dot { width: 8px; height: 8px; border-radius: 50%; background: #e74c3c; transition: 0.3s; }
-.connection-dot.connected { background: #2ecc71; box-shadow: 0 0 8px #2ecc71; }
-.sub { color: #8899b0; font-size: 15px; padding: 14px 22px; background: #111c2a; border-radius: 16px; border-left: 4px solid #4f7cff; margin-bottom: 28px; }
-.row { display: flex; flex-wrap: wrap; gap: 28px; }
-.left { flex: 1; min-width: 320px; }
-.right { flex: 2; min-width: 500px; }
-.card { background: #111c2a; border-radius: 20px; padding: 20px 24px; margin-bottom: 20px; border: 1px solid #1a2a3a; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
-.card h3 { font-weight: 600; font-size: 16px; margin-bottom: 14px; color: #b0c4de; display: flex; align-items: center; gap: 8px; }
-textarea, input[type="text"] { width: 100%; background: #0a1420; border: 1px solid #1a2a3a; border-radius: 14px; padding: 12px 16px; color: #e0e8f0; font-size: 15px; font-family: inherit; transition: 0.2s; resize: vertical; }
-textarea:focus, input:focus { outline: none; border-color: #4f7cff; box-shadow: 0 0 0 3px rgba(79,124,255,0.15); }
-.btn { background: #4f7cff; border: none; color: white; font-weight: 600; font-size: 15px; padding: 12px 28px; border-radius: 40px; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px; }
-.btn:hover { background: #5f8aff; transform: scale(1.02); }
-.btn:disabled { opacity: 0.4; pointer-events: none; }
-.btn-danger { background: #e74c3c; }
-.btn-gold { background: #f1c40f; color: #000; }
-.btn-success { background: #2ecc71; }
-.btn-outline { background: transparent; border: 1px solid #1a2a3a; color: #8899b0; }
-.flex-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
-.status { margin-top: 12px; padding: 10px 16px; border-radius: 12px; background: #0a1420; font-size: 14px; color: #8899b0; border: 1px solid #1a2a3a; }
-.status.error { color: #ff6b6b; background: #2d1a1a; border-color: #ff6b6b40; }
-.status.success { color: #2ecc71; background: #1a2d1a; border-color: #2ecc7140; }
-.status.running { color: #f1c40f; background: #1e2d1a; border-color: #f1c40f40; }
-.progress-bar { width: 100%; height: 6px; background: #1a2a3a; border-radius: 4px; margin-top: 12px; overflow: hidden; }
-.progress-bar .fill { height: 100%; background: linear-gradient(90deg, #4f7cff, #a78bfa); transition: width 0.5s; }
-.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 12px; }
-.agent-card { background: #0a1420; border-radius: 14px; padding: 16px; border-left: 4px solid #4f7cff; transition: 0.3s; position: relative; overflow: hidden; }
-.agent-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
-.agent-card .name { font-weight: 600; font-size: 16px; color: #b0c4de; }
-.agent-card .role { font-size: 12px; color: #8899b0; margin-top: 2px; }
-.agent-card .thought { font-size: 13px; color: #fbbf24; margin-top: 8px; }
-.agent-card .result { font-size: 12px; color: #34d399; margin-top: 4px; }
-.agent-card .step-info { font-size: 12px; color: #8899b0; margin-top: 4px; }
-.agent-card.done { border-left-color: #2ecc71; background: #0f2018; }
-.agent-card.running { border-left-color: #f1c40f; background: #1a1f10; }
-.agent-card.error { border-left-color: #e74c3c; background: #201010; }
-.timeline { margin-top: 12px; max-height: 500px; overflow-y: auto; }
-.timeline-item { display: flex; gap: 16px; margin-bottom: 14px; background: #0a1420; padding: 14px; border-radius: 12px; border-left: 4px solid #4f7cff; align-items: center; transition: 0.2s; }
-.timeline-item:hover { background: #111f2e; }
-.timeline-item .step-num { color: #8899b0; font-size: 13px; min-width: 32px; font-weight: 600; }
-.timeline-item .step-screenshot { flex: 0 0 180px; cursor: pointer; }
-.timeline-item .step-screenshot img { width: 100%; border-radius: 8px; border: 1px solid #1a2a3a; max-height: 120px; object-fit: cover; }
-.timeline-item .step-details { flex: 1; }
-.timeline-item .step-thought { color: #fbbf24; font-size: 13px; }
-.timeline-item .step-result { color: #34d399; font-size: 12px; margin-top: 4px; }
-.timeline-item .step-tool { color: #60a5fa; font-size: 12px; }
-.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); justify-content: center; align-items: center; }
-.modal img { max-width: 95%; max-height: 95%; border-radius: 12px; border: 1px solid #2a4055; }
-.modal-close { position: absolute; top: 20px; right: 40px; color: white; font-size: 40px; cursor: pointer; }
-.log-area { background: #0a1420; padding: 12px; border-radius: 12px; max-height: 200px; overflow-y: auto; font-family: monospace; font-size: 13px; color: #34d399; border: 1px solid #1a2a3a; }
-.log-area .err { color: #ff6b6b; }
-.log-area .info { color: #60a5fa; }
-.solution-box { background: #0a1420; padding: 16px; border-radius: 12px; white-space: pre-wrap; max-height: 400px; overflow-y: auto; font-size: 14px; line-height: 1.7; border: 1px solid #1a2a3a; }
-@media (max-width:800px) { body { padding: 16px; } .left, .right { min-width: 100%; } .timeline-item { flex-wrap: wrap; } .timeline-item .step-screenshot { flex: 1; } .header h1 { font-size: 26px; } }
+*{margin:0;padding:0;box-sizing:border-box}
+body{background:#0b0e14;color:#e8edf5;font-family:'Inter',system-ui,sans-serif;padding:20px}
+.container{max-width:1200px;margin:auto;background:#141a24;border-radius:20px;padding:30px}
+.card{background:#1a212d;border-radius:16px;padding:20px;margin-bottom:20px;border:1px solid #2a3340}
+.btn{background:#4f7cff;border:none;color:#fff;padding:10px 20px;border-radius:30px;cursor:pointer}
+.btn:disabled{opacity:.5}
+.btn-danger{background:#e74c3c}
+.btn-gold{background:#f1c40f;color:#000}
+textarea{width:100%;background:#0f141d;border:1px solid #2a3340;border-radius:12px;padding:12px;color:#fff}
+.progress-bar{width:100%;height:6px;background:#2a3340;border-radius:4px;margin:10px 0;overflow:hidden}
+.progress-bar .fill{height:100%;background:linear-gradient(90deg,#4f7cff,#a78bfa);transition:width .5s}
+.timeline-item{display:flex;gap:16px;background:#0f141d;padding:14px;border-radius:12px;margin-bottom:14px;border-left:4px solid #4f7cff}
+.timeline-item img{max-width:180px;border-radius:8px;cursor:pointer}
+.agent-card{background:#0f141d;padding:14px;border-radius:12px;border-left:4px solid #4f7cff}
+.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);justify-content:center;align-items:center;z-index:1000}
+.modal img{max-width:95%;max-height:95%;border-radius:12px}
+.modal-close{position:absolute;top:20px;right:40px;color:#fff;font-size:40px;cursor:pointer}
 </style>
 </head>
 <body>
 <div class="container">
-<div class="header">
-<h1>🧠 Multi‑Agent System <span class="version">v12.0</span></h1>
-<div style="display:flex; gap:12px; align-items:center;">
-<span class="badge">⚡ Supervisor · 6 Specialists · WebSocket</span>
-<div class="connection-status">
-<div class="connection-dot" id="connDot"></div>
-<span id="connText">Disconnected</span>
-</div>
-</div>
-</div>
-<div class="sub">🚀 The most advanced multi‑agent orchestration system with real‑time streaming, interactive plan editing, human‑in‑the‑loop approval, and live agent reasoning.</div>
-
-<div class="row">
-<div class="left">
+<h1>🤖 Ultimate Agent</h1>
 <div class="card">
-<h3>📝 Task</h3>
-<textarea id="taskInput" rows="3">Go to wikipedia and search for AI</textarea>
-<div class="flex-row">
-<label style="display:flex;align-items:center;gap:6px;color:#8899b0;font-size:14px;cursor:pointer;"><input type="checkbox" id="headlessCheck" checked> Headless</label>
-<button class="btn btn-gold" id="runBtn">🚀 Run Multi‑Agent</button>
-<button class="btn btn-success" id="continueBtn" disabled>▶ Continue</button>
-<button class="btn btn-danger" id="stopBtn" disabled>⏹ Stop</button>
+<textarea id="task" rows="2">Go to wikipedia and search for AI</textarea>
+<button class="btn btn-gold" id="run">🚀 Run</button>
+<button class="btn btn-danger" id="stop" disabled>⏹ Stop</button>
+<label><input type="checkbox" id="headless" checked> Headless</label>
+<div id="status" class="status">Ready</div>
+<div class="progress-bar"><div class="fill" id="progress" style="width:0%"></div></div>
+<div id="progresstext"></div>
 </div>
-<div id="status" class="status">⚡ Ready</div>
-<div id="progressText"></div>
-<div class="progress-bar"><div class="fill" id="progressFill" style="width:0%"></div></div>
+<div class="card" id="resultbox" style="display:none"><h3>✅ Result</h3><pre id="resultcontent"></pre></div>
+<div class="card" id="agentcard" style="display:none"><h3>🤖 Agent</h3><div class="agent-card"><div><strong>Thought:</strong> <span id="thought">—</span></div><div><strong>Action:</strong> <span id="action">—</span></div><div><strong>Result:</strong> <span id="result">—</span></div><div><strong>Steps:</strong> <span id="steps">0</span></div></div></div>
+<div class="card" id="timelinebox" style="display:none"><h3>📸 Timeline</h3><div id="timeline"></div></div>
 </div>
-<div class="card" id="planBox" style="display:none;"><h3>📋 Plan</h3><div id="planList"></div></div>
-<div class="card" id="solutionBox" style="display:none;"><h3>📊 Final Solution</h3><div class="solution-box" id="solutionContent"></div></div>
-</div>
-
-<div class="right">
-<div class="card">
-<h3>🤖 Agent Team</h3>
-<div id="agentGrid" class="agent-grid"><div style="color:#8899b0; grid-column:1/-1; text-align:center; padding:20px;">Waiting for task...</div></div>
-</div>
-<div class="card" id="timelineBox" style="display:none;"><h3>📸 Step Timeline</h3><div class="timeline" id="timelineContainer"></div></div>
-<div class="card" id="logBox" style="display:none;"><h3>📟 System Log</h3><div class="log-area" id="logArea"></div></div>
-</div>
-</div>
-</div>
-
-<div id="modal" class="modal" onclick="this.style.display='none'"><span class="modal-close">&times;</span><img id="modalImg" src=""></div>
-
+<div class="modal" onclick="this.style.display='none'"><span class="modal-close">&times;</span><img id="modalimg" src=""></div>
 <script>
-let sessionId = null, ws = null, pollInterval = null;
-const statusDiv = document.getElementById('status');
-const progressText = document.getElementById('progressText');
-const progressFill = document.getElementById('progressFill');
-const planBox = document.getElementById('planBox');
-const planList = document.getElementById('planList');
-const solutionBox = document.getElementById('solutionBox');
-const solutionContent = document.getElementById('solutionContent');
-const agentGrid = document.getElementById('agentGrid');
-const logArea = document.getElementById('logArea');
-const logBox = document.getElementById('logBox');
-const timelineBox = document.getElementById('timelineBox');
-const timelineContainer = document.getElementById('timelineContainer');
-const modal = document.getElementById('modal');
-const modalImg = document.getElementById('modalImg');
-const connDot = document.getElementById('connDot');
-const connText = document.getElementById('connText');
-const runBtn = document.getElementById('runBtn');
-const continueBtn = document.getElementById('continueBtn');
-const stopBtn = document.getElementById('stopBtn');
-
-function setStatus(msg, type='info') {
-    statusDiv.textContent = msg;
-    statusDiv.className = 'status ' + type;
-}
-function setProgress(pct) {
-    const v = Math.min(100, Math.max(0, pct));
-    progressFill.style.width = v + '%';
-    progressText.textContent = `Progress: ${Math.round(v)}%`;
+let sid=null, interval=null, ws=null;
+const runBtn=document.getElementById('run'), stopBtn=document.getElementById('stop');
+const statusDiv=document.getElementById('status'), progress=document.getElementById('progress'), progresstext=document.getElementById('progresstext');
+const resultbox=document.getElementById('resultbox'), resultcontent=document.getElementById('resultcontent');
+const agentcard=document.getElementById('agentcard'), thought=document.getElementById('thought'), action=document.getElementById('action'), result=document.getElementById('result'), steps=document.getElementById('steps');
+const timeline=document.getElementById('timeline'), timelinebox=document.getElementById('timelinebox');
+const modal=document.getElementById('modal'), modalimg=document.getElementById('modalimg');
+
+function setStatus(msg,type='info'){statusDiv.textContent=msg;statusDiv.className='status '+type}
+function setProgress(p){progress.style.width=Math.min(100,p)+'%';progresstext.textContent=`Progress: ${Math.round(p)}%`}
+function addTimeline(history){
+ if(!history||!history.length) return;
+ timelinebox.style.display='block';
+ timeline.innerHTML=history.map((item,i)=>{
+   const img=item.result?.screenshot ? `<img src="data:image/png;base64,${item.result.screenshot}" onclick="document.getElementById('modalimg').src=this.src;document.getElementById('modal').style.display='flex'">` : '<div style="color:#8899b0;">No screenshot</div>';
+   return `<div class="timeline-item"><div>${img}</div><div><div>💭 ${item.thought||''}</div><div>🔧 ${item.action?.tool||''}</div><div>✅ ${item.result?.result||item.result?.error||''}</div></div></div>`;
+ }).join('');
 }
-function addLog(msg, type='info') {
-    logBox.style.display = 'block';
-    const entry = document.createElement('div');
-    entry.className = type;
-    entry.textContent = `[${new Date().toLocaleTimeString()}] ${msg}`;
-    logArea.appendChild(entry);
-    logArea.scrollTop = logArea.scrollHeight;
+function connectWS(){
+ if(!sid) return;
+ const protocol=location.protocol==='https:'?'wss:':'ws:';
+ ws=new WebSocket(`${protocol}//${location.host}/ws/${sid}`);
+ ws.onmessage=(e)=>{
+  const data=JSON.parse(e.data);
+  if(data.type==='progress') setProgress(data.progress);
+  else if(data.type==='completed'){setStatus('✅ Completed','success');setProgress(100);stopPolling();runBtn.disabled=false;stopBtn.disabled=true;if(data.result) updateResult(data.result);}
+  else if(data.type==='error'){setStatus('❌ Error: '+data.error,'error');stopPolling();runBtn.disabled=false;stopBtn.disabled=true;}
+  else if(data.type==='stopped'){setStatus('⏹️ Stopped','info');stopPolling();runBtn.disabled=false;stopBtn.disabled=true;}
+ };
+ ws.onclose=()=>{ ws=null; };
 }
-function renderAgents(agentStatus) {
-    if (!agentStatus || Object.keys(agentStatus).length === 0) {
-        agentGrid.innerHTML = '<div style="color:#8899b0; grid-column:1/-1; text-align:center; padding:20px;">No agents active yet</div>';
-        return;
-    }
-    let html = '';
-    for (const [name, data] of Object.entries(agentStatus)) {
-        if (name === 'Supervisor') continue;
-        const statusClass = data.done ? 'done' : (data.history && data.history.length > 0 ? 'running' : 'idle');
-        const last = data.history && data.history.length > 0 ? data.history[data.history.length-1] : {};
-        const thought = last.thought || data.result || '—';
-        const result = last.result && last.result.result ? last.result.result : '';
-        const steps = data.steps || 0;
-        html += `
-            <div class="agent-card ${statusClass}">
-                <div class="name">${name}</div>
-                <div class="role">${data.role || ''}</div>
-                <div class="step-info">Steps: ${steps}</div>
-                <div class="thought">💭 ${thought.substring(0, 120)}${thought.length > 120 ? '...' : ''}</div>
-                ${result ? `<div class="result">✅ ${result.substring(0, 100)}${result.length > 100 ? '...' : ''}</div>` : ''}
-            </div>
-        `;
-    }
-    agentGrid.innerHTML = html || '<div style="color:#8899b0; grid-column:1/-1; text-align:center; padding:20px;">No agents active</div>';
+function updateResult(res){
+ resultbox.style.display='block';
+ resultcontent.textContent=res.result||JSON.stringify(res,null,2);
+ if(res.history){
+  const last=res.history[res.history.length-1];
+  agentcard.style.display='block';
+  thought.textContent=last.thought||'—';
+  action.textContent=last.action?.tool||'—';
+  result.textContent=last.result?.result||last.result?.error||'—';
+  steps.textContent=res.steps||0;
+  addTimeline(res.history);
+ }
 }
-function updatePlan(plan) {
-    if (!plan || plan.length === 0) { planBox.style.display = 'none'; return; }
-    planBox.style.display = 'block';
-    planList.innerHTML = plan.map((p, i) =>
-        `<div class="plan-item">${i+1}. ${p.agent}: ${p.task}</div>`
-    ).join('');
+async function poll(){
+ if(!sid) return;
+ try{
+  const res=await fetch(`/status/${sid}`);
+  const data=await res.json();
+  if(data.status==='running'){setStatus('🔄 Running...','running');setProgress(data.progress||0);}
+  else if(data.status==='completed'){setStatus('✅ Completed','success');setProgress(100);stopPolling();runBtn.disabled=false;stopBtn.disabled=true;if(data.result) updateResult(data.result);}
+  else if(data.status==='error'){setStatus('❌ Error: '+data.error,'error');stopPolling();runBtn.disabled=false;stopBtn.disabled=true;}
+  else if(data.status==='stopped'){setStatus('⏹️ Stopped','info');stopPolling();runBtn.disabled=false;stopBtn.disabled=true;}
+ }catch(e){console.error(e)}
 }
-function updateSolution(solution) {
-    if (!solution) return;
-    solutionBox.style.display = 'block';
-    solutionContent.textContent = typeof solution === 'string' ? solution : JSON.stringify(solution, null, 2);
-}
-function updateTimeline(timeline) {
-    if (!timeline || timeline.length === 0) { timelineBox.style.display = 'none'; return; }
-    timelineBox.style.display = 'block';
-    timelineContainer.innerHTML = timeline.map((item, i) => {
-        const imgSrc = item.screenshot ? `data:image/png;base64,${item.screenshot}` : '';
-        const imgTag = imgSrc
-            ? `<img src="${imgSrc}" onclick="document.getElementById('modalImg').src=this.src; document.getElementById('modal').style.display='flex';" />`
-            : `<div style="color:#8899b0; padding:20px; background:#0a1420; border-radius:8px; text-align:center;">No screenshot</div>`;
-        return `
-            <div class="timeline-item">
-                <div class="step-num">#${i+1}</div>
-                <div class="step-screenshot">${imgTag}</div>
-                <div class="step-details">
-                    <div class="step-thought">💭 ${item.thought || ''}</div>
-                    <div class="step-tool">🔧 ${item.tool || ''}</div>
-                    <div class="step-result">✅ ${item.result || ''}</div>
-                </div>
-            </div>
-        `;
-    }).join('');
-    timelineContainer.scrollTop = timelineContainer.scrollHeight;
-}
-function connectWebSocket() {
-    if (!sessionId) return;
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    ws = new WebSocket(`${protocol}//${window.location.host}/ws/${sessionId}`);
-    ws.onopen = () => { connDot.className = 'connection-dot connected'; connText.textContent = 'Live'; addLog('WebSocket connected', 'success'); };
-    ws.onmessage = (e) => {
-        const data = JSON.parse(e.data);
-        if (data.type === 'completed') {
-            setStatus('✅ Completed', 'success');
-            setProgress(100);
-            stopPolling();
-            runBtn.disabled = false;
-            stopBtn.disabled = true;
-            if (data.result) {
-                updateSolution(data.result.solution);
-                updatePlan(data.result.plan);
-                renderAgents(data.result.agent_status);
-            }
-        } else if (data.type === 'error') {
-            setStatus('❌ Error: ' + data.error, 'error');
-            stopPolling();
-            runBtn.disabled = false;
-            stopBtn.disabled = true;
-        } else if (data.type === 'stopped') {
-            setStatus('⏹️ Stopped', 'info');
-            stopPolling();
-            runBtn.disabled = false;
-            stopBtn.disabled = true;
-        } else if (data.type === 'agent_status') {
-            renderAgents(data.agent_status);
-        } else if (data.type === 'progress') {
-            setProgress(data.progress);
-        } else if (data.type === 'screenshot') {
-            // add to timeline
-        }
-    };
-    ws.onclose = () => { connDot.className = 'connection-dot'; connText.textContent = 'Disconnected'; };
-}
-async function pollStatus() {
-    if (!sessionId) return;
-    try {
-        const res = await fetch(`/status/${sessionId}`);
-        const data = await res.json();
-        if (data.status === 'running') {
-            setStatus('🔄 Running...', 'running');
-            setProgress(data.progress || 0);
-        } else if (data.status === 'completed') {
-            setStatus('✅ Completed', 'success');
-            setProgress(100);
-            stopPolling();
-            runBtn.disabled = false;
-            stopBtn.disabled = true;
-            if (data.result) {
-                updateSolution(data.result.solution);
-                updatePlan(data.result.plan);
-                renderAgents(data.result.agent_status);
-                // build timeline from agent histories
-                let allScreenshots = [];
-                if (data.result.agent_status) {
-                    for (const [name, agent] of Object.entries(data.result.agent_status)) {
-                        if (name === 'Supervisor') continue;
-                        if (agent.history) {
-                            for (const entry of agent.history) {
-                                if (entry.result && entry.result.screenshot) {
-                                    allScreenshots.push({
-                                        screenshot: entry.result.screenshot,
-                                        thought: entry.thought || '',
-                                        result: entry.result.result || '',
-                                        tool: entry.action ? entry.action.tool : ''
-                                    });
-                                }
-                            }
-                        }
-                    }
-                }
-                if (allScreenshots.length > 0) updateTimeline(allScreenshots);
-            }
-        } else if (data.status === 'error') {
-            setStatus('❌ Error: ' + data.error, 'error');
-            stopPolling();
-            runBtn.disabled = false;
-            stopBtn.disabled = true;
-        } else if (data.status === 'stopped') {
-            setStatus('⏹️ Stopped', 'info');
-            stopPolling();
-            runBtn.disabled = false;
-            stopBtn.disabled = true;
-        }
-    } catch (e) { console.error(e); }
-}
-function startPolling() { if (pollInterval) clearInterval(pollInterval); pollInterval = setInterval(pollStatus, 1500); }
-function stopPolling() { if (pollInterval) { clearInterval(pollInterval); pollInterval = null; } }
-
-runBtn.addEventListener('click', async () => {
-    const task = document.getElementById('taskInput').value.trim();
-    if (!task) { setStatus('Please enter a task.', 'error'); return; }
-    const headless = document.getElementById('headlessCheck').checked;
-    runBtn.disabled = true;
-    stopBtn.disabled = false;
-    setStatus('🚀 Initializing...', 'info');
-    setProgress(0);
-    addLog('Starting multi-agent system...', 'info');
-    try {
-        const res = await fetch('/start', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ task, headless })
-        });
-        const data = await res.json();
-        if (!res.ok) throw new Error(data.detail || 'Unknown error');
-        sessionId = data.session_id;
-        addLog('Session started: ' + sessionId, 'success');
-        connectWebSocket();
-        startPolling();
-    } catch (e) {
-        setStatus('Error: ' + e.message, 'error');
-        addLog('Error: ' + e.message, 'err');
-        runBtn.disabled = false;
-        stopBtn.disabled = true;
-    }
-});
-
-stopBtn.addEventListener('click', async () => {
-    if (!sessionId) return;
-    if (ws && ws.readyState === WebSocket.OPEN) {
-        ws.send(JSON.stringify({ type: 'stop' }));
-    } else {
-        try {
-            const res = await fetch(`/stop/${sessionId}`, { method: 'POST' });
-            const data = await res.json();
-            setStatus('⏹️ Stopped', 'info');
-        } catch (e) { setStatus('Stop error: ' + e.message, 'error'); }
-    }
-    addLog('Session stopped', 'warn');
-    stopBtn.disabled = true;
-    runBtn.disabled = false;
-    if (ws) ws.close();
-    stopPolling();
-});
-
+function startPolling(){if(interval)clearInterval(interval);interval=setInterval(poll,1500);}
+function stopPolling(){if(interval){clearInterval(interval);interval=null;}}
+runBtn.onclick=async ()=>{
+ const task=document.getElementById('task').value.trim();
+ if(!task){setStatus('Please enter a task.','error');return;}
+ const headless=document.getElementById('headless').checked;
+ runBtn.disabled=true;stopBtn.disabled=false;
+ setStatus('🚀 Starting...','info');setProgress(0);
+ resultbox.style.display='none';agentcard.style.display='none';timelinebox.style.display='none';
+ try{
+  const res=await fetch('/start',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({task,headless})});
+  const data=await res.json();
+  if(!res.ok) throw new Error(data.detail||'Error');
+  sid=data.session_id;
+  connectWS();
+  startPolling();
+ }catch(e){setStatus('Error: '+e.message,'error');runBtn.disabled=false;stopBtn.disabled=true;}
+};
+stopBtn.onclick=async ()=>{
+ if(!sid) return;
+ if(ws && ws.readyState===WebSocket.OPEN){ws.send(JSON.stringify({type:'stop'}));}
+ else{try{await fetch(`/stop/${sid}`,{method:'POST'});setStatus('⏹️ Stopping...','info');}catch(e){setStatus('Stop error: '+e.message,'error');}}
+ stopPolling();runBtn.disabled=false;stopBtn.disabled=true;
+};
 </script>
 </body>
 </html>