Update src/app/page.tsx

src/app/page.tsx

@@ -2,17 +2,18 @@
 
 import { useState, useRef, useEffect, useCallback } from "react";
 
-// ─── Types ────────────────────────────────────────────────────────────────────
+type ActionType =
+  | "click"
+  | "type"
+  | "scroll"
+  | "navigate"
+  | "keypress"
+  | "hover"
+  | "answer"
+  | "wait";
+
 interface ActionResult {
-  type:
-    | "click"
-    | "type"
-    | "scroll"
-    | "navigate"
-    | "keypress"
-    | "hover"
-    | "answer"
-    | "wait";
+  type: ActionType;
   description: string;
   x?: number;
   y?: number;
@@ -22,6 +23,7 @@ interface ActionResult {
   scrollX?: number;
   scrollY?: number;
   answer?: string;
+  ms?: number;
 }
 
 interface HistoryEntry {
@@ -45,7 +47,13 @@ interface ClickableElement {
   href?: string;
 }
 
-// ─── Action type color/icon mapping ───────────────────────────────────────────
+interface ScreenshotResponse {
+  screenshot: string;
+  clickableElements: ClickableElement[];
+  width: number;
+  height: number;
+}
+
 const ACTION_STYLES: Record<
   string,
   { bg: string; text: string; label: string; icon: string }
@@ -100,207 +108,271 @@ const ACTION_STYLES: Record<
   },
 };
 
-// ─── Component ────────────────────────────────────────────────────────────────
-export default function AgentBrowser() {
-  const [url, setUrl] = useState("https://google.com");
-  const [inputUrl, setInputUrl] = useState("https://google.com");
+export default function AgentBrowserPage() {
+  const [url, setUrl] = useState("https://example.com");
+  const [inputUrl, setInputUrl] = useState("https://example.com");
   const [prompt, setPrompt] = useState("");
+
   const [screenshot, setScreenshot] = useState<string | null>(null);
-  const [clickableElements, setClickableElements] = useState<
-    ClickableElement[]
-  >([]);
+  const [clickableElements, setClickableElements] = useState<ClickableElement[]>(
+    []
+  );
+  const [screenshotDims, setScreenshotDims] = useState({
+    width: 1280,
+    height: 720,
+  });
+
   const [history, setHistory] = useState<HistoryEntry[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [isBrowserReady, setIsBrowserReady] = useState(false);
   const [isInitializing, setIsInitializing] = useState(false);
-  const [currentAction, setCurrentAction] = useState<string>("");
+  const [currentAction, setCurrentAction] = useState("");
   const [showHighlights, setShowHighlights] = useState(true);
-  const [screenshotDims, setScreenshotDims] = useState({
-    width: 1280,
-    height: 720,
-  });
-  const [autoMode, setAutoMode] = useState(false);
-  const [autoSteps, setAutoSteps] = useState(5);
-  const [autoCurrentStep, setAutoCurrentStep] = useState(0);
 
   const imgRef = useRef<HTMLImageElement>(null);
-  const promptRef = useRef<HTMLTextAreaElement>(null);
   const historyEndRef = useRef<HTMLDivElement>(null);
 
-  // ─── Scroll history to bottom ───────────────────────────────────────────
   useEffect(() => {
     historyEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [history]);
 
-  // ─── Initialize browser ─────────────────────────────────────────────────
-  const initBrowser = useCallback(async (targetUrl: string) => {
+  const captureScreenshot = useCallback(async (): Promise<ScreenshotResponse> => {
+    const res = await fetch("/api/screenshot", {
+      method: "GET",
+      cache: "no-store",
+    });
+
+    const data = await res.json();
+
+    if (!res.ok) {
+      throw new Error(data.error || "Failed to capture screenshot");
+    }
+
+    const result: ScreenshotResponse = {
+      screenshot: data.screenshot,
+      clickableElements: data.clickableElements || [],
+      width: data.width || 1280,
+      height: data.height || 720,
+    };
+
+    setScreenshot(result.screenshot);
+    setClickableElements(result.clickableElements);
+    setScreenshotDims({
+      width: result.width,
+      height: result.height,
+    });
+
+    return result;
+  }, []);
+
+  const initBrowser = useCallback(async () => {
     setIsInitializing(true);
-    setCurrentAction("Launching Chromium browser...");
+    setCurrentAction("Launching browser on about:blank...");
+
     try {
       const res = await fetch("/api/browser", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ url: targetUrl, action: "init" }),
+        body: JSON.stringify({ action: "init" }),
       });
+
       const data = await res.json();
-      if (!res.ok) throw new Error(data.error || "Failed to init browser");
+
+      if (!res.ok) {
+        throw new Error(data.error || "Failed to initialize browser");
+      }
+
       setIsBrowserReady(true);
-      setCurrentAction("Browser ready. Taking screenshot...");
+      setCurrentAction("Browser ready ✓");
       await captureScreenshot();
-    } catch (e: unknown) {
-      setCurrentAction(
-        `Error: ${e instanceof Error ? e.message : "Unknown error"}`
-      );
     } finally {
       setIsInitializing(false);
     }
-  }, []);
+  }, [captureScreenshot]);
+
+  const navigateBrowser = useCallback(
+    async (targetUrl: string) => {
+      const res = await fetch("/api/browser", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "navigate", url: targetUrl }),
+      });
 
-  // ─── Capture screenshot + clickable elements ────────────────────────────
-  const captureScreenshot = useCallback(async () => {
-    try {
-      const res = await fetch("/api/screenshot", { method: "GET" });
       const data = await res.json();
-      if (!res.ok) throw new Error(data.error || "Screenshot failed");
-      setScreenshot(data.screenshot);
-      setClickableElements(data.clickableElements || []);
-      setScreenshotDims({ width: data.width || 1280, height: data.height || 720 });
-    } catch (e) {
-      console.error("Screenshot error:", e);
-    }
-  }, []);
 
-  // ─── Execute an action on the browser ───────────────────────────────────
+      if (!res.ok) {
+        throw new Error(data.error || "Navigation failed");
+      }
+
+      return data;
+    },
+    []
+  );
+
   const executeAction = useCallback(async (action: ActionResult) => {
     const res = await fetch("/api/action", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(action),
     });
+
     const data = await res.json();
-    if (!res.ok) throw new Error(data.error || "Action failed");
+
+    if (!res.ok) {
+      throw new Error(data.error || "Action failed");
+    }
+
     return data;
   }, []);
 
-  // ─── Main: send prompt to Gemini ────────────────────────────────────────
-  const runAgent = useCallback(
-    async (overridePrompt?: string) => {
-      const finalPrompt = overridePrompt || prompt;
-      if (!finalPrompt.trim() || !isBrowserReady || isLoading) return;
+  const handleNavigate = useCallback(async () => {
+    if (!inputUrl.trim()) return;
+
+    let nav = inputUrl.trim();
+    if (!/^https?:\/\//i.test(nav)) {
+      nav = `https://${nav}`;
+    }
+
+    setUrl(nav);
+    setIsLoading(true);
+
+    try {
+      if (!isBrowserReady) {
+        await initBrowser();
+      }
+
+      setCurrentAction(`Navigating to ${nav}...`);
+      await navigateBrowser(nav);
+      await captureScreenshot();
+      setCurrentAction("Navigated ✓");
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : "Unknown error";
+      setCurrentAction(`Error: ${msg}`);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [inputUrl, isBrowserReady, initBrowser, navigateBrowser, captureScreenshot]);
 
-      const entryId = crypto.randomUUID();
-      setIsLoading(true);
-      setCurrentAction("Capturing screenshot with highlighted elements...");
+  const runAgent = useCallback(async () => {
+    if (!prompt.trim() || !isBrowserReady || isLoading) return;
 
-      const newEntry: HistoryEntry = {
+    const entryId = crypto.randomUUID();
+    const entryPrompt = prompt;
+
+    setIsLoading(true);
+    setCurrentAction("Capturing latest screenshot...");
+
+    setHistory((prev) => [
+      ...prev,
+      {
         id: entryId,
-        prompt: finalPrompt,
+        prompt: entryPrompt,
         action: null,
-        screenshot: screenshot,
+        screenshot,
         timestamp: new Date(),
         status: "pending",
-      };
-      setHistory((h) => [...h, newEntry]);
-
-      try {
-        // 1. Capture fresh screenshot
-        await captureScreenshot();
-
-        // 2. Ask Gemini
-        setCurrentAction("Sending to Gemini Vision...");
-        const geminiRes = await fetch("/api/gemini", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            prompt: finalPrompt,
-            screenshot,
-            clickableElements,
-          }),
-        });
-        const geminiData = await geminiRes.json();
-        if (!geminiRes.ok)
-          throw new Error(geminiData.error || "Gemini API failed");
-
-        const action: ActionResult = geminiData.action;
-
-        // 3. Execute action
-        if (action.type !== "answer") {
-          setCurrentAction(`Executing: ${action.type} — ${action.description}`);
-          await executeAction(action);
-          await new Promise((r) => setTimeout(r, 800)); // wait for page
-          await captureScreenshot();
-        }
-
-        // 4. Update history
-        setHistory((h) =>
-          h.map((e) =>
-            e.id === entryId
-              ? { ...e, action, screenshot, status: "success" }
-              : e
-          )
-        );
-        if (!overridePrompt) setPrompt("");
-        setCurrentAction("Done ✓");
-      } catch (err: unknown) {
-        const msg = err instanceof Error ? err.message : "Unknown error";
-        setHistory((h) =>
-          h.map((e) =>
-            e.id === entryId ? { ...e, status: "error", error: msg } : e
-          )
-        );
-        setCurrentAction(`Error: ${msg}`);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [
-      prompt,
-      isBrowserReady,
-      isLoading,
-      screenshot,
-      clickableElements,
-      captureScreenshot,
-      executeAction,
-    ]
-  );
+      },
+    ]);
 
-  // ─── Navigate to URL ─────────────────────────────────────────────────────
-  const handleNavigate = async () => {
-    if (!inputUrl.trim()) return;
-    let nav = inputUrl;
-    if (!/^https?:\/\//i.test(nav)) nav = "https://" + nav;
-    setUrl(nav);
-    if (!isBrowserReady) {
-      await initBrowser(nav);
-    } else {
-      setIsLoading(true);
-      setCurrentAction(`Navigating to ${nav}...`);
-      await fetch("/api/action", {
+    try {
+      const fresh = await captureScreenshot();
+
+      setCurrentAction("Sending screenshot + prompt to Gemini...");
+
+      const geminiRes = await fetch("/api/gemini", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ type: "navigate", url: nav, description: `Navigate to ${nav}` }),
+        body: JSON.stringify({
+          prompt: entryPrompt,
+          screenshot: fresh.screenshot,
+          clickableElements: fresh.clickableElements,
+        }),
       });
-      await new Promise((r) => setTimeout(r, 1200));
-      await captureScreenshot();
+
+      const geminiData = await geminiRes.json();
+
+      if (!geminiRes.ok) {
+        throw new Error(geminiData.error || "Gemini request failed");
+      }
+
+      const action: ActionResult = geminiData.action;
+
+      if (action.type === "answer") {
+        setHistory((prev) =>
+          prev.map((item) =>
+            item.id === entryId
+              ? {
+                  ...item,
+                  action,
+                  screenshot: fresh.screenshot,
+                  status: "success",
+                }
+              : item
+          )
+        );
+        setPrompt("");
+        setCurrentAction("Answer generated ✓");
+        return;
+      }
+
+      setCurrentAction(`Executing ${action.type}...`);
+      await executeAction(action);
+
+      await new Promise((resolve) => setTimeout(resolve, 800));
+      const after = await captureScreenshot();
+
+      setHistory((prev) =>
+        prev.map((item) =>
+          item.id === entryId
+            ? {
+                ...item,
+                action,
+                screenshot: after.screenshot,
+                status: "success",
+              }
+            : item
+        )
+      );
+
+      setPrompt("");
+      setCurrentAction("Done ✓");
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : "Unknown error";
+
+      setHistory((prev) =>
+        prev.map((item) =>
+          item.id === entryId
+            ? {
+                ...item,
+                status: "error",
+                error: msg,
+              }
+            : item
+        )
+      );
+
+      setCurrentAction(`Error: ${msg}`);
+    } finally {
       setIsLoading(false);
-      setCurrentAction("Navigated ✓");
     }
-  };
+  }, [prompt, isBrowserReady, isLoading, screenshot, captureScreenshot, executeAction]);
 
-  // ─── Keyboard shortcut: Enter to submit ──────────────────────────────────
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+  const handlePromptKeyDown = (
+    e: React.KeyboardEvent<HTMLTextAreaElement>
+  ) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       runAgent();
     }
   };
 
-  // ─── Calculate overlay positions for highlighted clickable elements ──────
   const getOverlayStyle = (el: ClickableElement) => {
     if (!imgRef.current) return {};
+
     const rect = imgRef.current.getBoundingClientRect();
     const scaleX = rect.width / screenshotDims.width;
     const scaleY = rect.height / screenshotDims.height;
+
     return {
       left: el.x * scaleX,
       top: el.y * scaleY,
@@ -310,89 +382,85 @@ export default function AgentBrowser() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0f0f13] flex flex-col">
-      {/* ── Header ── */}
-      <header className="border-b border-[#2a2a3a] bg-[#0f0f13]/90 backdrop-blur-md sticky top-0 z-50 px-4 py-3">
+    <div className="min-h-screen bg-[#0f0f13] text-[#e2e2f0] flex flex-col">
+      <header className="sticky top-0 z-50 border-b border-[#2a2a3a] bg-[#0f0f13]/90 backdrop-blur px-4 py-3">
         <div className="max-w-7xl mx-auto flex items-center gap-3">
           <div className="flex items-center gap-2 shrink-0">
             <span className="text-xl">🤖</span>
-            <span className="font-semibold text-sm text-white hidden sm:block">
-              Agentic Browser
-            </span>
-            <span className="text-[10px] bg-indigo-500/20 text-indigo-400 px-2 py-0.5 rounded-full font-medium">
-              Gemini
-            </span>
+            <div className="hidden sm:flex flex-col leading-none">
+              <span className="text-sm font-semibold text-white">
+                Agentic Browser
+              </span>
+              <span className="text-[10px] text-gray-500">
+                Gemini + Playwright
+              </span>
+            </div>
           </div>
 
-          {/* URL Bar */}
-          <div className="flex-1 flex gap-2">
+          <div className="flex-1 flex gap-2 min-w-0">
             <input
-              className="flex-1 bg-[#1a1a24] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-white placeholder:text-gray-500 focus:outline-none focus:border-indigo-500 transition-colors"
               value={inputUrl}
               onChange={(e) => setInputUrl(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && handleNavigate()}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") handleNavigate();
+              }}
               placeholder="https://example.com"
+              className="flex-1 min-w-0 bg-[#1a1a24] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-white placeholder:text-gray-500 focus:outline-none focus:border-indigo-500"
             />
+
             <button
               onClick={handleNavigate}
-              disabled={isInitializing}
-              className="bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors shrink-0"
+              disabled={isLoading || isInitializing}
+              className="shrink-0 rounded-lg bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 px-4 py-2 text-sm font-medium text-white transition-colors"
             >
-              {isInitializing ? "Loading…" : isBrowserReady ? "Go" : "Launch"}
+              {!isBrowserReady ? "Launch" : "Go"}
             </button>
           </div>
 
-          {/* Highlight toggle */}
           <button
             onClick={() => setShowHighlights((v) => !v)}
-            title="Toggle element highlights"
-            className={`shrink-0 p-2 rounded-lg text-sm transition-colors ${
+            className={`shrink-0 rounded-lg px-3 py-2 text-sm transition-colors ${
               showHighlights
                 ? "bg-indigo-500/20 text-indigo-400"
                 : "bg-[#1a1a24] text-gray-500"
             }`}
+            title="Toggle highlights"
           >
             🎯
           </button>
         </div>
       </header>
 
-      {/* ── Main Layout ── */}
       <main className="flex-1 max-w-7xl mx-auto w-full p-4 flex flex-col lg:flex-row gap-4">
-        {/* ── Left: Browser Viewport ── */}
-        <div className="flex-1 flex flex-col gap-3 min-w-0">
-          {/* Status bar */}
+        <section className="flex-1 min-w-0 flex flex-col gap-4">
           {currentAction && (
-            <div className="flex items-center gap-2 bg-[#1a1a24] border border-[#2a2a3a] rounded-lg px-3 py-2 text-xs text-gray-400">
-              {isLoading && (
-                <span className="inline-block w-3 h-3 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin shrink-0" />
+            <div className="rounded-lg border border-[#2a2a3a] bg-[#1a1a24] px-3 py-2 text-xs text-gray-400 flex items-center gap-2">
+              {(isLoading || isInitializing) && (
+                <span className="inline-block h-3 w-3 rounded-full border-2 border-indigo-500 border-t-transparent animate-spin shrink-0" />
               )}
               <span className="truncate">{currentAction}</span>
             </div>
           )}
 
-          {/* Viewport */}
-          <div className="screenshot-container bg-[#1a1a24] aspect-video relative flex items-center justify-center">
-            {!isBrowserReady && (
-              <div className="flex flex-col items-center gap-3 text-gray-500">
-                <span className="text-4xl">🌐</span>
+          <div className="relative bg-[#1a1a24] border border-[#2a2a3a] rounded-xl overflow-hidden aspect-video flex items-center justify-center">
+            {!isBrowserReady && !screenshot && (
+              <div className="text-center text-gray-500 px-6">
+                <div className="text-4xl mb-3">🌐</div>
                 <p className="text-sm">
-                  Enter a URL above and click{" "}
-                  <strong className="text-indigo-400">Launch</strong>
+                  Launch the browser first, then open any site.
                 </p>
-                <p className="text-xs text-gray-600">
-                  Chromium will start headlessly in the background
+                <p className="text-xs text-gray-600 mt-1">
+                  Default test URL: https://example.com
                 </p>
               </div>
             )}
 
             {isInitializing && (
-              <div className="absolute inset-0 bg-[#0f0f13]/80 flex items-center justify-center z-10 rounded-lg">
+              <div className="absolute inset-0 bg-[#0f0f13]/80 z-10 flex items-center justify-center">
                 <div className="flex flex-col items-center gap-3">
-                  <div className="w-8 h-8 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" />
+                  <div className="w-8 h-8 rounded-full border-2 border-indigo-500 border-t-transparent animate-spin" />
                   <span className="text-sm text-gray-400">
-                    Starting browser
-                    <span className="loading-dots" />
+                    Starting browser...
                   </span>
                 </div>
               </div>
@@ -405,15 +473,14 @@ export default function AgentBrowser() {
                   ref={imgRef}
                   src={`data:image/png;base64,${screenshot}`}
                   alt="Browser screenshot"
-                  className="w-full h-full object-contain rounded-lg"
+                  className="w-full h-full object-contain"
                 />
 
-                {/* Clickable element highlights */}
                 {showHighlights &&
                   clickableElements.map((el, i) => (
                     <div
-                      key={i}
-                      className="highlight-overlay"
+                      key={`${el.tag}-${i}-${el.x}-${el.y}`}
+                      className="highlight-overlay absolute"
                       style={getOverlayStyle(el)}
                       title={`${el.tag}: ${el.text || el.href || ""}`}
                     />
@@ -422,83 +489,71 @@ export default function AgentBrowser() {
             )}
           </div>
 
-          {/* ── Prompt Input ── */}
-          <div className="bg-[#1a1a24] border border-[#2a2a3a] rounded-xl p-3 flex flex-col gap-2">
+          <div className="rounded-xl border border-[#2a2a3a] bg-[#1a1a24] p-3 flex flex-col gap-3">
             <textarea
-              ref={promptRef}
               value={prompt}
               onChange={(e) => setPrompt(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder="Tell the AI what to do… (e.g. 'Search for Next.js tutorials', 'Click the login button', 'What does this page say?')"
-              rows={3}
-              className="w-full bg-transparent text-sm text-white placeholder:text-gray-600 resize-none focus:outline-none leading-relaxed"
-              disabled={isLoading || !isBrowserReady}
+              onKeyDown={handlePromptKeyDown}
+              placeholder="Tell the AI what to do... example: Click the first result, type hello in the search box, or tell me what this page says."
+              rows={4}
+              disabled={!isBrowserReady || isLoading}
+              className="w-full resize-none bg-transparent text-sm text-white placeholder:text-gray-600 focus:outline-none"
             />
-            <div className="flex items-center justify-between gap-2 flex-wrap">
-              <div className="flex items-center gap-3 text-xs text-gray-500">
-                <span>↵ Enter to send &nbsp;·&nbsp; Shift+↵ newline</span>
-                <label className="flex items-center gap-1.5 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={autoMode}
-                    onChange={(e) => setAutoMode(e.target.checked)}
-                    className="accent-indigo-500"
-                  />
-                  Auto-run
-                </label>
-                {autoMode && (
-                  <input
-                    type="number"
-                    value={autoSteps}
-                    onChange={(e) => setAutoSteps(Number(e.target.value))}
-                    min={1}
-                    max={20}
-                    className="w-12 bg-[#0f0f13] border border-[#2a2a3a] rounded px-1 py-0.5 text-xs text-white"
-                  />
-                )}
+
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <div className="text-xs text-gray-500">
+                Enter = send · Shift+Enter = new line
+              </div>
+
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() => captureScreenshot()}
+                  disabled={!isBrowserReady || isLoading}
+                  className="rounded-lg border border-[#2a2a3a] bg-[#0f0f13] px-3 py-2 text-sm text-gray-300 hover:bg-[#14141c] disabled:opacity-40"
+                >
+                  Refresh
+                </button>
+
+                <button
+                  onClick={runAgent}
+                  disabled={!isBrowserReady || isLoading || !prompt.trim()}
+                  className="rounded-lg bg-indigo-600 hover:bg-indigo-500 disabled:opacity-40 px-5 py-2 text-sm font-medium text-white transition-colors"
+                >
+                  {isLoading ? "Running..." : "Run Agent"}
+                </button>
               </div>
-              <button
-                onClick={() => runAgent()}
-                disabled={isLoading || !isBrowserReady || !prompt.trim()}
-                className="bg-indigo-600 hover:bg-indigo-500 disabled:opacity-40 disabled:cursor-not-allowed text-white px-5 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
-              >
-                {isLoading ? (
-                  <>
-                    <span className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />
-                    Running
-                  </>
-                ) : (
-                  <>Run Agent</>
-                )}
-              </button>
             </div>
           </div>
-        </div>
 
-        {/* ── Right: Action History ── */}
-        <div className="w-full lg:w-80 xl:w-96 flex flex-col gap-3 shrink-0">
+          {isBrowserReady && (
+            <div className="rounded-lg border border-[#2a2a3a] bg-[#1a1a24] px-3 py-2 text-xs text-gray-500 flex items-center justify-between">
+              <span>Current URL: {url}</span>
+              <span>Detected elements: {clickableElements.length}</span>
+            </div>
+          )}
+        </section>
+
+        <aside className="w-full lg:w-80 xl:w-96 shrink-0 flex flex-col gap-3">
           <div className="flex items-center justify-between">
             <h2 className="text-sm font-semibold text-gray-300">
               Action History
             </h2>
+
             {history.length > 0 && (
               <button
                 onClick={() => setHistory([])}
-                className="text-xs text-gray-600 hover:text-gray-400 transition-colors"
+                className="text-xs text-gray-500 hover:text-gray-300"
               >
                 Clear
               </button>
             )}
           </div>
 
-          <div className="flex-1 overflow-y-auto flex flex-col gap-2 max-h-[70vh] pr-1">
+          <div className="flex flex-col gap-2 max-h-[70vh] overflow-y-auto pr-1">
             {history.length === 0 && (
-              <div className="text-center py-12 text-gray-600 text-sm">
-                <p className="text-3xl mb-2">🗂️</p>
+              <div className="rounded-xl border border-[#2a2a3a] bg-[#1a1a24] p-6 text-center text-sm text-gray-600">
+                <div className="text-3xl mb-2">🗂️</div>
                 <p>No actions yet</p>
-                <p className="text-xs mt-1 text-gray-700">
-                  Launch a browser and give the AI a task
-                </p>
               </div>
             )}
 
@@ -506,67 +561,90 @@ export default function AgentBrowser() {
               const style = entry.action
                 ? ACTION_STYLES[entry.action.type] || ACTION_STYLES.answer
                 : null;
+
               return (
                 <div
                   key={entry.id}
-                  className="bg-[#1a1a24] border border-[#2a2a3a] rounded-xl p-3 flex flex-col gap-2 text-xs"
+                  className="rounded-xl border border-[#2a2a3a] bg-[#1a1a24] p-3 text-xs flex flex-col gap-2"
                 >
-                  {/* Prompt */}
                   <div className="flex items-start gap-2">
                     <span className="text-base shrink-0">👤</span>
-                    <p className="text-gray-300 leading-relaxed line-clamp-3">
+                    <p className="text-gray-300 leading-relaxed whitespace-pre-wrap break-words">
                       {entry.prompt}
                     </p>
                   </div>
 
-                  {/* Status */}
                   {entry.status === "pending" && (
-                    <div className="flex items-center gap-1.5 text-gray-500">
-                      <span className="w-3 h-3 border border-gray-500 border-t-transparent rounded-full animate-spin" />
-                      Processing…
+                    <div className="flex items-center gap-2 text-gray-500">
+                      <span className="inline-block h-3 w-3 rounded-full border border-gray-500 border-t-transparent animate-spin" />
+                      Processing...
                     </div>
                   )}
 
                   {entry.status === "error" && (
-                    <div className="text-red-400 bg-red-500/10 rounded-lg px-2 py-1">
+                    <div className="rounded-lg bg-red-500/10 px-2 py-1 text-red-400">
                       ⚠ {entry.error}
                     </div>
                   )}
 
                   {entry.status === "success" && entry.action && style && (
                     <>
-                      <div className="flex items-center gap-2">
+                      <div className="flex items-center gap-2 flex-wrap">
                         <span
-                          className={`action-badge ${style.bg} ${style.text}`}
+                          className={`inline-flex items-center gap-1 rounded-full px-2 py-1 text-[10px] font-semibold uppercase tracking-wide ${style.bg} ${style.text}`}
                         >
-                          {style.icon} {style.label}
+                          <span>{style.icon}</span>
+                          <span>{style.label}</span>
                         </span>
-                        <span className="text-gray-400 truncate">
+                        <span className="text-gray-400 break-words">
                           {entry.action.description}
                         </span>
                       </div>
 
-                      {/* Action details */}
-                      <div className="bg-[#0f0f13] rounded-lg px-2 py-1.5 font-mono text-[10px] text-gray-500 space-y-0.5">
+                      <div className="rounded-lg bg-[#0f0f13] px-2 py-2 font-mono text-[10px] text-gray-500 space-y-1">
                         {entry.action.type === "click" && (
                           <p>
                             x={entry.action.x} y={entry.action.y}
                           </p>
                         )}
+
                         {entry.action.type === "type" && (
-                          <p>"{entry.action.text}"</p>
+                          <>
+                            {entry.action.x !== undefined &&
+                              entry.action.y !== undefined && (
+                                <p>
+                                  x={entry.action.x} y={entry.action.y}
+                                </p>
+                              )}
+                            <p>{entry.action.text}</p>
+                          </>
                         )}
+
                         {entry.action.type === "scroll" && (
                           <p>
-                            Δx={entry.action.scrollX} Δy={entry.action.scrollY}
+                            Δx={entry.action.scrollX ?? 0} Δy=
+                            {entry.action.scrollY ?? 0}
                           </p>
                         )}
+
                         {entry.action.type === "navigate" && (
-                          <p className="truncate">{entry.action.url}</p>
+                          <p className="break-all">{entry.action.url}</p>
                         )}
+
                         {entry.action.type === "keypress" && (
-                          <p>key: {entry.action.key}</p>
+                          <p>key={entry.action.key}</p>
                         )}
+
+                        {entry.action.type === "hover" && (
+                          <p>
+                            x={entry.action.x} y={entry.action.y}
+                          </p>
+                        )}
+
+                        {entry.action.type === "wait" && (
+                          <p>{entry.action.ms ?? 0}ms</p>
+                        )}
+
                         {entry.action.type === "answer" && (
                           <p className="whitespace-pre-wrap text-indigo-300">
                             {entry.action.answer}
@@ -576,30 +654,16 @@ export default function AgentBrowser() {
                     </>
                   )}
 
-                  <p className="text-gray-700 text-[10px]">
+                  <p className="text-[10px] text-gray-700">
                     {entry.timestamp.toLocaleTimeString()}
                   </p>
                 </div>
               );
             })}
+
             <div ref={historyEndRef} />
           </div>
-
-          {/* Element count badge */}
-          {isBrowserReady && (
-            <div className="bg-[#1a1a24] border border-[#2a2a3a] rounded-lg px-3 py-2 text-xs text-gray-500 flex items-center justify-between">
-              <span>
-                🎯 {clickableElements.length} clickable elements detected
-              </span>
-              <button
-                onClick={captureScreenshot}
-                className="text-indigo-400 hover:text-indigo-300 transition-colors"
-              >
-                Refresh
-              </button>
-            </div>
-          )}
-        </div>
+        </aside>
       </main>
     </div>
   );