bangonit 0.4.3 → 0.5.2

package/app/webapp/src/shared/components/SessionView.tsx

@@ -50,7 +50,7 @@ export default function SessionView({
   const [tabs, setTabs] = useState<Tab[]>(
     initialTabs?.map((t) => ({ ...t, initialUrl: t.url })) || [
       { id: 0, url: "about:blank", title: "", initialUrl: "about:blank" },
-    ]
+    ],
   );
   const [activeTabId, setActiveTabId] = useState(initialActiveTabId ?? 0);
   const [urlInput, setUrlInput] = useState(() => {
@@ -62,7 +62,9 @@ export default function SessionView({
   const [devtoolsOpen, setDevtoolsOpen] = useState(false);
   const webviewRefs = useRef<Map<number, any>>(new Map());
   // Browser is always view-only — block all user input
-  const [todos, setTodos] = useState<{ content: string; status: "pending" | "in_progress" | "completed" }[]>(initialTodos || []);
+  const [todos, setTodos] = useState<{ content: string; status: "pending" | "in_progress" | "completed" }[]>(
+    initialTodos || [],
+  );
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const hasSubmittedRef = useRef(false);
   const nextTabId = useRef(initialTabs ? Math.max(...initialTabs.map((t) => t.id)) + 1 : 1);
@@ -91,17 +93,20 @@ export default function SessionView({
           "X-Client-Platform": navigator.platform,
         }),
       }),
-    []
+    [],
   );
 
   const stoppedRef = useRef(false);
 
   // Stream agent output to main process for CLI
-  const emit = useCallback((type: string, text: string) => {
-    window.bangonit?.emitAgentOutput?.({ agentId, type, text, name: agentName });
-  }, [agentId, agentName]);
+  const emit = useCallback(
+    (type: string, text: string) => {
+      window.bangonit?.emitAgentOutput?.({ agentId, type, text, name: agentName });
+    },
+    [agentId, agentName],
+  );
 
-  const { messages, setMessages, sendMessage, addToolOutput, stop: rawStop, status, error } = useChat({
+  const { messages, sendMessage, addToolOutput, status, error } = useChat({
     transport,
     messages: initialMessages,
     sendAutomaticallyWhen: ({ messages }) =>
@@ -157,22 +162,37 @@ export default function SessionView({
       if (tc.toolName === "browser") {
         try {
           const input = tc.input as any;
-          const label = (input?.actions || []).map((a: any) => {
-            if (a.action === "navigate") return `navigate ${a.url}`;
-            if (a.action === "type") return `type "${(a.text || "").slice(0, 30)}"`;
-            if (a.action === "press") return `press ${a.key}`;
-            if (a.action === "mouse") return `mouse ${(a.mouseActions || []).map((s: any) => `${s.action} ${s.ref || `${s.x},${s.y}`}`).join(" > ")}`;
-            return a.action;
-          }).join(", ");
+          const label = (input?.actions || [])
+            .map((a: any) => {
+              if (a.action === "navigate") return `navigate ${a.url}`;
+              if (a.action === "type") return `type "${(a.text || "").slice(0, 30)}"`;
+              if (a.action === "press") return `press ${a.key}`;
+              if (a.action === "mouse")
+                return `mouse ${(a.mouseActions || []).map((s: any) => `${s.action} ${s.ref || `${s.x},${s.y}`}`).join(" > ")}`;
+              return a.action;
+            })
+            .join(", ");
           emit("tool", `browser: ${label}${input?.observe ? ` [${input.observe}]` : ""}`);
-          sessionRecorderRef.current?.addEvent({ ts: Date.now(), agentId, type: "tool-start", data: { tool: "browser", label } });
+          sessionRecorderRef.current?.addEvent({
+            ts: Date.now(),
+            agentId,
+            type: "tool-start",
+            data: { tool: "browser", label },
+          });
           const bt = browserToolsRef.current;
-          const raw = bt ? await bt.exec({
-            actions: input?.actions || [],
-            observe: input?.observe,
-            prompts: input?.prompts,
-          }) : { error: "Error: browser tools not available" };
-          sessionRecorderRef.current?.addEvent({ ts: Date.now(), agentId, type: "tool-end", data: { tool: "browser" } });
+          const raw = bt
+            ? await bt.exec({
+                actions: input?.actions || [],
+                observe: input?.observe || "snapshot",
+                prompts: input?.prompts,
+              })
+            : { error: "Error: browser tools not available" };
+          sessionRecorderRef.current?.addEvent({
+            ts: Date.now(),
+            agentId,
+            type: "tool-end",
+            data: { tool: "browser" },
+          });
           addToolOutput({
             tool: tc.toolName,
             toolCallId: tc.toolCallId,
@@ -192,11 +212,6 @@ export default function SessionView({
     },
   });
 
-  const stop = useCallback(() => {
-    stoppedRef.current = true;
-    rawStop();
-  }, [rawStop]);
-
   const isLoading = status === "submitted" || status === "streaming";
 
   // Clear stopped flag when a new request starts
@@ -228,10 +243,11 @@ export default function SessionView({
     if (messages.length === 0) return;
     const lastMsg = messages[messages.length - 1];
     if (lastMsg.role !== "assistant") return;
-    const text = lastMsg.parts
-      ?.filter((p: any) => p.type === "text")
-      .map((p: any) => p.text)
-      .join("") || "";
+    const text =
+      lastMsg.parts
+        ?.filter((p: any) => p.type === "text")
+        .map((p: any) => p.text)
+        .join("") || "";
     if (lastMsg.id !== lastStreamedMsgIdRef.current) {
       lastStreamedMsgIdRef.current = lastMsg.id;
       lastStreamedLenRef.current = 0;
@@ -273,7 +289,9 @@ export default function SessionView({
       nudgeTimerRef.current = null;
       if (!nudgedRef.current && !isDone) {
         nudgedRef.current = true;
-        sendMessage({ text: "You must call the report_result tool to finalize this test run. Call it now with the result (pass or fail) and a summary." });
+        sendMessage({
+          text: "You must call the report_result tool to finalize this test run. Call it now with the result (pass or fail) and a summary.",
+        });
       }
     }, 5000);
     return () => {
@@ -293,59 +311,55 @@ export default function SessionView({
     }
   }, [messages, agentId]);
 
-  // Persist messages, tabs, and todos on change
-  useEffect(() => {
-    if (messages.length > 0) {
-      window.bangonit?.setAgentSession(agentId, {
-        messages,
-        initialPrompt,
-        tabs: tabs.filter((t) => !t.isPopup).map(({ id, url, title }) => ({ id, url, title })),
-        activeTabId: tabs.find((t) => t.id === activeTabId)?.isPopup ? tabs.find((t) => !t.isPopup)?.id ?? 0 : activeTabId,
-        todos,
-      });
-    }
-  }, [messages, tabs, activeTabId, agentId, initialPrompt, todos]);
-
   // Create a new tab
-  const createTab = useCallback((url: string) => {
-    const id = nextTabId.current++;
-    setTabs((prev) => [...prev, { id, url: "about:blank", title: "", initialUrl: url }]);
-    setActiveTabId(id);
-    setUrlInput(url === "about:blank" ? "" : url);
-    window.bangonit?.setActiveTab(agentId, id);
-  }, [agentId]);
+  const createTab = useCallback(
+    (url: string) => {
+      const id = nextTabId.current++;
+      setTabs((prev) => [...prev, { id, url: "about:blank", title: "", initialUrl: url }]);
+      setActiveTabId(id);
+      setUrlInput(url === "about:blank" ? "" : url);
+      window.bangonit?.setActiveTab(agentId, id);
+    },
+    [agentId],
+  );
 
   // Close a tab by its ID
-  const closeTab = useCallback((tabId: number) => {
-    setTabs((prev) => {
-      const idx = prev.findIndex((t) => t.id === tabId);
-      if (idx === -1) return prev;
-      const remaining = prev.filter((t) => t.id !== tabId);
-      if (remaining.length === 0) return prev;
-      setActiveTabId((current) => {
-        if (current === tabId) {
-          const newActive = remaining[Math.max(0, idx - 1)].id;
-          const newTab = remaining.find((t) => t.id === newActive);
-          if (newTab) setUrlInput(newTab.url === "about:blank" ? "" : newTab.url);
-          window.bangonit?.setActiveTab(agentId, newActive);
-          return newActive;
-        }
-        return current;
+  const closeTab = useCallback(
+    (tabId: number) => {
+      setTabs((prev) => {
+        const idx = prev.findIndex((t) => t.id === tabId);
+        if (idx === -1) return prev;
+        const remaining = prev.filter((t) => t.id !== tabId);
+        if (remaining.length === 0) return prev;
+        setActiveTabId((current) => {
+          if (current === tabId) {
+            const newActive = remaining[Math.max(0, idx - 1)].id;
+            const newTab = remaining.find((t) => t.id === newActive);
+            if (newTab) setUrlInput(newTab.url === "about:blank" ? "" : newTab.url);
+            window.bangonit?.setActiveTab(agentId, newActive);
+            return newActive;
+          }
+          return current;
+        });
+        return remaining;
       });
-      return remaining;
-    });
-  }, [agentId]);
+    },
+    [agentId],
+  );
 
   // Switch active tab
-  const selectTab = useCallback((tabId: number) => {
-    setActiveTabId(tabId);
-    window.bangonit?.setActiveTab(agentId, tabId);
-    setTabs((prev) => {
-      const tab = prev.find((t) => t.id === tabId);
-      if (tab) setUrlInput(tab.url === "about:blank" ? "" : tab.url);
-      return prev;
-    });
-  }, [agentId]);
+  const selectTab = useCallback(
+    (tabId: number) => {
+      setActiveTabId(tabId);
+      window.bangonit?.setActiveTab(agentId, tabId);
+      setTabs((prev) => {
+        const tab = prev.find((t) => t.id === tabId);
+        if (tab) setUrlInput(tab.url === "about:blank" ? "" : tab.url);
+        return prev;
+      });
+    },
+    [agentId],
+  );
 
   // Stable refs for callbacks
   const createTabRef = useRef(createTab);
@@ -357,47 +371,68 @@ export default function SessionView({
 
   useEffect(() => {
     const cleanups: (() => void)[] = [];
-    const push = (fn: (() => void) | undefined) => { if (fn) cleanups.push(fn); };
-
-    push(window.bangonit?.onTabUpdated((data: any) => {
-      if (data.agentId !== agentId) return;
-      const isBlank = data.url === "about:blank";
-      const isBlankTitle = data.title === "about:blank";
-      setTabs((prev) => prev.map((t) =>
-        t.id === data.tabId
-          ? { ...t, ...(!isBlank && data.url !== undefined && { url: data.url }), ...(!isBlankTitle && data.title !== undefined && { title: data.title }) }
-          : t
-      ));
-      if (data.url !== undefined && !isBlank) {
-        setActiveTabId((current) => {
-          if (current === data.tabId) setUrlInput(data.url);
-          return current;
-        });
-      }
-    }));
-
-    push(window.bangonit?.onOpenNewTab((data: any) => {
-      if (data.agentId !== agentId) return;
-      createTabRef.current(data.url);
-    }));
-    push(window.bangonit?.onPopupOpened((data: any) => {
-      if (data.agentId !== agentId) return;
-      setTabs((prev) => [...prev, {
-        id: data.tabId,
-        url: data.url || "about:blank",
-        title: "",
-        initialUrl: data.url || "about:blank",
-        isPopup: true,
-      }]);
-    }));
-    push(window.bangonit?.onCloseTab((data: any) => {
-      if (data.agentId !== agentId) return;
-      closeTabRef.current(data.tabId);
-    }));
-    push(window.bangonit?.onSelectTab((data: any) => {
-      if (data.agentId !== agentId) return;
-      selectTabRef.current(data.tabId);
-    }));
+    const push = (fn: (() => void) | undefined) => {
+      if (fn) cleanups.push(fn);
+    };
+
+    push(
+      window.bangonit?.onTabUpdated((data: any) => {
+        if (data.agentId !== agentId) return;
+        const isBlank = data.url === "about:blank";
+        const isBlankTitle = data.title === "about:blank";
+        setTabs((prev) =>
+          prev.map((t) =>
+            t.id === data.tabId
+              ? {
+                  ...t,
+                  ...(!isBlank && data.url !== undefined && { url: data.url }),
+                  ...(!isBlankTitle && data.title !== undefined && { title: data.title }),
+                }
+              : t,
+          ),
+        );
+        if (data.url !== undefined && !isBlank) {
+          setActiveTabId((current) => {
+            if (current === data.tabId) setUrlInput(data.url);
+            return current;
+          });
+        }
+      }),
+    );
+
+    push(
+      window.bangonit?.onOpenNewTab((data: any) => {
+        if (data.agentId !== agentId) return;
+        createTabRef.current(data.url);
+      }),
+    );
+    push(
+      window.bangonit?.onPopupOpened((data: any) => {
+        if (data.agentId !== agentId) return;
+        setTabs((prev) => [
+          ...prev,
+          {
+            id: data.tabId,
+            url: data.url || "about:blank",
+            title: "",
+            initialUrl: data.url || "about:blank",
+            isPopup: true,
+          },
+        ]);
+      }),
+    );
+    push(
+      window.bangonit?.onCloseTab((data: any) => {
+        if (data.agentId !== agentId) return;
+        closeTabRef.current(data.tabId);
+      }),
+    );
+    push(
+      window.bangonit?.onSelectTab((data: any) => {
+        if (data.agentId !== agentId) return;
+        selectTabRef.current(data.tabId);
+      }),
+    );
     // Mouse lock/unlock events unused — input blocked while test is running
 
     return () => cleanups.forEach((fn) => fn?.());
@@ -417,40 +452,45 @@ export default function SessionView({
   }, [messages]);
 
   // Register a webview's webContents with the main process
-  const handleWebviewRef = useCallback((el: any, tabId: number, initialUrl: string) => {
-    if (!el) return;
-    webviewRefs.current.set(tabId, el);
-    const register = () => {
-      if (registeredTabsRef.current.has(tabId)) return;
-      try {
-        const wcId = el.getWebContentsId?.();
-        if (wcId) {
-          registeredTabsRef.current.add(tabId);
-          window.bangonit?.registerTab(agentId, tabId, wcId, initialUrl, planDir);
-          if (tabId === activeTabId) {
-            window.bangonit?.setActiveTab(agentId, tabId);
+  const handleWebviewRef = useCallback(
+    (el: any, tabId: number, initialUrl: string) => {
+      if (!el) return;
+      webviewRefs.current.set(tabId, el);
+      const register = () => {
+        if (registeredTabsRef.current.has(tabId)) return;
+        try {
+          const wcId = el.getWebContentsId?.();
+          if (wcId) {
+            registeredTabsRef.current.add(tabId);
+            window.bangonit?.registerTab(agentId, tabId, wcId, initialUrl, planDir);
+            if (tabId === activeTabId) {
+              window.bangonit?.setActiveTab(agentId, tabId);
+            }
           }
+        } catch (e) {
+          console.error(e);
         }
-      } catch (e) { console.error(e); }
-    };
-    register();
-    el.addEventListener("did-attach", register);
-    el.addEventListener("close", () => closeTabRef.current(tabId));
-    // Forward browser console messages to main process + session recorder (once per webview)
-    if (!el._consoleListenerAttached) {
-      el._consoleListenerAttached = true;
-      el.addEventListener("console-message", (e: any) => {
-        window.bangonit?.emitConsoleMessage?.({
-          agentId,
-          level: e.level,
-          message: e.message,
-          url: e.sourceId || "",
-          line: e.lineNumber || 0,
+      };
+      register();
+      el.addEventListener("did-attach", register);
+      el.addEventListener("close", () => closeTabRef.current(tabId));
+      // Forward browser console messages to main process + session recorder (once per webview)
+      if (!el._consoleListenerAttached) {
+        el._consoleListenerAttached = true;
+        el.addEventListener("console-message", (e: any) => {
+          window.bangonit?.emitConsoleMessage?.({
+            agentId,
+            level: e.level,
+            message: e.message,
+            url: e.sourceId || "",
+            line: e.lineNumber || 0,
+          });
+          sessionRecorderRef.current?.addConsoleLog(agentId, e.level, e.message, e.sourceId || "", e.lineNumber || 0);
         });
-        sessionRecorderRef.current?.addConsoleLog(agentId, e.level, e.message, e.sourceId || "", e.lineNumber || 0);
-      });
-    }
-  }, [agentId, activeTabId]);
+      }
+    },
+    [agentId, activeTabId],
+  );
 
   const formatTime = (s: number) => `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, "0")}`;
 
@@ -467,7 +507,10 @@ export default function SessionView({
               className={`flex items-center gap-1.5 px-3 py-2 text-xs border-r border-zinc-800 min-w-0 max-w-[200px] shrink-0
                 ${tab.id === activeTabId ? "bg-zinc-800 text-zinc-200" : "text-zinc-500 hover:text-zinc-300 hover:bg-zinc-850"}`}
             >
-              <span className="truncate">{tab.isPopup ? "↗ " : ""}{tab.title || (tab.url && tab.url !== "about:blank" ? tab.url : "New Tab")}</span>
+              <span className="truncate">
+                {tab.isPopup ? "↗ " : ""}
+                {tab.title || (tab.url && tab.url !== "about:blank" ? tab.url : "New Tab")}
+              </span>
             </button>
           ))}
         </div>
@@ -481,35 +524,38 @@ export default function SessionView({
 
         {/* Webviews */}
         <div className="flex-1 relative bg-white overflow-hidden" onWheel={(e) => e.stopPropagation()}>
-          {tabs.map((tab) => tab.isPopup ? (
-            tab.id === activeTabId && (
-              <div key={tab.id} className="absolute inset-0 flex items-center justify-center bg-zinc-900 text-zinc-400 text-sm z-[1]">
-                Popup window open — {tab.title || tab.url}
-              </div>
-            )
-          ) : (
-            <webview
-              key={tab.id}
-              ref={(el: any) => handleWebviewRef(el, tab.id, tab.initialUrl)}
-              src="about:blank"
-              partition={`persist:agent-${agentId}`}
-              allowpopups=""
-              style={{
-                width: "100%",
-                height: "100%",
-                position: "absolute",
-                backgroundColor: "white",
-                top: 0,
-                left: 0,
-                pointerEvents: tab.id === activeTabId ? "auto" : "none",
-                zIndex: tab.id === activeTabId ? 1 : 0,
-              }}
-            />
-          ))}
-          {!tabs.find((t) => t.id === activeTabId)?.isPopup && <VirtualCursor agentId={agentId} />}
-          {!isDone && (
-            <div className="absolute inset-0 z-10 cursor-not-allowed" />
+          {tabs.map((tab) =>
+            tab.isPopup ? (
+              tab.id === activeTabId && (
+                <div
+                  key={tab.id}
+                  className="absolute inset-0 flex items-center justify-center bg-zinc-900 text-zinc-400 text-sm z-[1]"
+                >
+                  Popup window open — {tab.title || tab.url}
+                </div>
+              )
+            ) : (
+              <webview
+                key={tab.id}
+                ref={(el: any) => handleWebviewRef(el, tab.id, tab.initialUrl)}
+                src="about:blank"
+                partition={`agent-${agentId}`}
+                allowpopups=""
+                style={{
+                  width: "100%",
+                  height: "100%",
+                  position: "absolute",
+                  backgroundColor: "white",
+                  top: 0,
+                  left: 0,
+                  pointerEvents: tab.id === activeTabId ? "auto" : "none",
+                  zIndex: tab.id === activeTabId ? 1 : 0,
+                }}
+              />
+            ),
           )}
+          {!tabs.find((t) => t.id === activeTabId)?.isPopup && <VirtualCursor agentId={agentId} />}
+          {!isDone && <div className="absolute inset-0 z-10 cursor-not-allowed" />}
         </div>
       </div>
 
@@ -523,17 +569,16 @@ export default function SessionView({
 
         {/* Test result banner */}
         {testResult && (
-          <div className={`px-4 py-2 text-sm border-b flex items-center gap-3 ${testResult.result === "pass"
-            ? "bg-green-950/30 border-green-900/50"
-            : "bg-red-950/30 border-red-900/50"
-            }`}>
+          <div
+            className={`px-4 py-2 text-sm border-b flex items-center gap-3 ${
+              testResult.result === "pass" ? "bg-green-950/30 border-green-900/50" : "bg-red-950/30 border-red-900/50"
+            }`}
+          >
             <span className={`font-medium ${testResult.result === "pass" ? "text-green-400" : "text-red-400"}`}>
               {testResult.result === "pass" ? "PASSED" : "FAILED"}
             </span>
             <span className="text-zinc-500 text-xs">{formatTime(elapsedSeconds)}</span>
-            {testResult.summary && (
-              <span className="text-zinc-400 text-xs truncate flex-1">{testResult.summary}</span>
-            )}
+            {testResult.summary && <span className="text-zinc-400 text-xs truncate flex-1">{testResult.summary}</span>}
           </div>
         )}
 
@@ -541,11 +586,18 @@ export default function SessionView({
         {todos.length > 0 && (
           <div className="text-xs space-y-1 px-4 py-2 border-b border-zinc-800 bg-zinc-900/80 shrink-0 max-h-48 overflow-y-auto">
             {todos.map((todo, i) => (
-              <div key={i} className={`flex items-center gap-2 ${todo.status === "completed" ? "text-zinc-500" : "text-zinc-300"}`}>
+              <div
+                key={i}
+                className={`flex items-center gap-2 ${todo.status === "completed" ? "text-zinc-500" : "text-zinc-300"}`}
+              >
                 <span className="shrink-0">
-                  {todo.status === "completed" ? "✓" : todo.status === "in_progress" ? (
+                  {todo.status === "completed" ? (
+                    "✓"
+                  ) : todo.status === "in_progress" ? (
                     <span className="inline-block w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
-                  ) : "○"}
+                  ) : (
+                    "○"
+                  )}
                 </span>
                 <span className={todo.status === "completed" ? "line-through" : ""}>{todo.content}</span>
               </div>
@@ -570,8 +622,12 @@ export default function SessionView({
         <div className="px-4 py-2 border-t border-zinc-800 flex items-center gap-3 shrink-0">
           {isDone ? (
             <>
-              <span className={`inline-block w-2 h-2 rounded-full shrink-0 ${testResult!.result === "pass" ? "bg-green-500" : "bg-red-500"}`} />
-              <span className={`text-xs font-medium ${testResult!.result === "pass" ? "text-green-400" : "text-red-400"}`}>
+              <span
+                className={`inline-block w-2 h-2 rounded-full shrink-0 ${testResult!.result === "pass" ? "bg-green-500" : "bg-red-500"}`}
+              />
+              <span
+                className={`text-xs font-medium ${testResult!.result === "pass" ? "text-green-400" : "text-red-400"}`}
+              >
                 {testResult!.result === "pass" ? "Passed" : "Failed"} in {formatTime(elapsedSeconds)}
               </span>
               <div className="flex-1" />
@@ -584,10 +640,11 @@ export default function SessionView({
                     setDevtoolsOpen(!devtoolsOpen);
                   }
                 }}
-                className={`text-xs px-2 py-1 rounded border transition-colors ${devtoolsOpen
-                  ? "border-blue-600 text-blue-400 bg-blue-950/30"
-                  : "border-zinc-700 hover:border-zinc-500 text-zinc-500 hover:text-zinc-300"
-                  }`}
+                className={`text-xs px-2 py-1 rounded border transition-colors ${
+                  devtoolsOpen
+                    ? "border-blue-600 text-blue-400 bg-blue-950/30"
+                    : "border-zinc-700 hover:border-zinc-500 text-zinc-500 hover:text-zinc-300"
+                }`}
                 title="Toggle DevTools"
               >
                 DevTools
@@ -604,8 +661,12 @@ export default function SessionView({
             </>
           ) : hasStarted ? (
             <>
-              <span className={`inline-block w-2 h-2 rounded-full shrink-0 ${paused ? "bg-amber-500" : "bg-blue-500 animate-pulse"}`} />
-              <span className="text-xs text-zinc-400">{paused ? "Paused" : "Working"} {formatTime(elapsedSeconds)}</span>
+              <span
+                className={`inline-block w-2 h-2 rounded-full shrink-0 ${paused ? "bg-amber-500" : "bg-blue-500 animate-pulse"}`}
+              />
+              <span className="text-xs text-zinc-400">
+                {paused ? "Paused" : "Working"} {formatTime(elapsedSeconds)}
+              </span>
               <div className="flex-1" />
               <button
                 onClick={() => {
@@ -616,10 +677,11 @@ export default function SessionView({
                     setDevtoolsOpen(!devtoolsOpen);
                   }
                 }}
-                className={`text-xs px-2 py-1 rounded border transition-colors ${devtoolsOpen
-                  ? "border-blue-600 text-blue-400 bg-blue-950/30"
-                  : "border-zinc-700 hover:border-zinc-500 text-zinc-500 hover:text-zinc-300"
-                  }`}
+                className={`text-xs px-2 py-1 rounded border transition-colors ${
+                  devtoolsOpen
+                    ? "border-blue-600 text-blue-400 bg-blue-950/30"
+                    : "border-zinc-700 hover:border-zinc-500 text-zinc-500 hover:text-zinc-300"
+                }`}
                 title="Toggle DevTools"
               >
                 DevTools
@@ -695,30 +757,41 @@ function ToolCallView({ part }: { part: any }) {
   const isRunning = state === "input-streaming" || state === "input-available";
   const toolName = part.toolName || (typeof part.type === "string" ? part.type.replace(/^tool-/, "") : "");
 
-  const command = state === "input-streaming" ? ""
-    : toolName === "browser"
-      ? (() => {
-        const parts = (input.actions || []).map((a: any) => {
-          switch (a.action) {
-            case "navigate": return `navigate ${a.url || ""}`;
-            case "mouse": {
-              const summary = (a.mouseActions || []).map((s: any) =>
-                s.action === "wait" ? `wait ${s.ms}ms` :
-                  s.action === "wheel" ? `wheel ${s.ref || `${s.x},${s.y}`}` :
-                    `${s.action} ${s.ref || `${s.x},${s.y}`}`
-              ).join(" → ");
-              return `mouse ${summary}`;
-            }
-            case "type": return `type "${(a.text || "").slice(0, 40)}"`;
-            case "press": return `press ${a.key || ""}`;
-            case "tabs": return `tabs ${a.tabAction || ""}${a.tabId ? " " + a.tabId : ""}`;
-            default: return a.action || "";
-          }
-        });
-        if (input.observe) parts.push(input.observe);
-        return parts.join(", ");
-      })()
-      : input.command || (Object.keys(input).length > 0 ? JSON.stringify(input) : "");
+  const command =
+    state === "input-streaming"
+      ? ""
+      : toolName === "browser"
+        ? (() => {
+            const parts = (input.actions || []).map((a: any) => {
+              switch (a.action) {
+                case "navigate":
+                  return `navigate ${a.url || ""}`;
+                case "mouse": {
+                  const summary = (a.mouseActions || [])
+                    .map((s: any) =>
+                      s.action === "wait"
+                        ? `wait ${s.ms}ms`
+                        : s.action === "wheel"
+                          ? `wheel ${s.ref || `${s.x},${s.y}`}`
+                          : `${s.action} ${s.ref || `${s.x},${s.y}`}`,
+                    )
+                    .join(" → ");
+                  return `mouse ${summary}`;
+                }
+                case "type":
+                  return `type "${(a.text || "").slice(0, 40)}"`;
+                case "press":
+                  return `press ${a.key || ""}`;
+                case "tabs":
+                  return `tabs ${a.tabAction || ""}${a.tabId ? " " + a.tabId : ""}`;
+                default:
+                  return a.action || "";
+              }
+            });
+            if (input.observe) parts.push(input.observe);
+            return parts.join(", ");
+          })()
+        : input.command || (Object.keys(input).length > 0 ? JSON.stringify(input) : "");
 
   return (
     <div className="text-sm">
@@ -738,30 +811,44 @@ function ToolCallView({ part }: { part: any }) {
       </button>
       {expanded && (
         <pre className="mt-1 px-3 py-2 bg-zinc-900/50 rounded-lg border border-zinc-800 text-xs whitespace-pre-wrap overflow-x-auto max-h-60 overflow-y-auto">
-          {command && <><span className="text-zinc-300 select-all">$ {command}</span>{"\n"}</>}
-          {result != null && (() => {
-            if (toolName === "browser" && typeof result === "string") {
-              try {
-                const parsed = JSON.parse(result);
-                if (parsed.textOutput !== undefined) {
-                  return (
-                    <>
-                      <span className="text-zinc-500">{parsed.textOutput}</span>
-                      {parsed.imageOutput && (
-                        <>
-                          {"\n"}
-                          <span className={parsed.imageOutput.type === "changed" ? "text-blue-400" : "text-zinc-600"}>
-                            {parsed.imageOutput.type === "changed" ? "[screenshot: changed]" : "[screenshot: unchanged]"}
-                          </span>
-                        </>
-                      )}
-                    </>
-                  );
+          {command && (
+            <>
+              <span className="text-zinc-300 select-all">$ {command}</span>
+              {"\n"}
+            </>
+          )}
+          {result != null &&
+            (() => {
+              if (toolName === "browser" && typeof result === "string") {
+                try {
+                  const parsed = JSON.parse(result);
+                  if (parsed.textOutput !== undefined) {
+                    return (
+                      <>
+                        <span className="text-zinc-500">{parsed.textOutput}</span>
+                        {parsed.imageOutput && (
+                          <>
+                            {"\n"}
+                            <span className={parsed.imageOutput.type === "changed" ? "text-blue-400" : "text-zinc-600"}>
+                              {parsed.imageOutput.type === "changed"
+                                ? "[screenshot: changed]"
+                                : "[screenshot: unchanged]"}
+                            </span>
+                          </>
+                        )}
+                      </>
+                    );
+                  }
+                } catch (e) {
+                  console.error(e);
                 }
-              } catch (e) { console.error(e); }
-            }
-            return <span className="text-zinc-500">{typeof result === "string" ? result : JSON.stringify(result, null, 2)}</span>;
-          })()}
+              }
+              return (
+                <span className="text-zinc-500">
+                  {typeof result === "string" ? result : JSON.stringify(result, null, 2)}
+                </span>
+              );
+            })()}
         </pre>
       )}
     </div>