@mastra/playground-ui 21.0.1-alpha.0 → 22.0.0-alpha.2

package/dist/index.cjs.js

@@ -61,25 +61,25 @@ const reactSyntaxHighlighter = require('@assistant-ui/react-syntax-highlighter')
 const prism = require('react-syntax-highlighter/dist/cjs/styles/prism');
 const clientJs = require('@mastra/client-js');
 const di = require('@mastra/core/di');
-const compatibility = require('./compatibility-BSEoV343.cjs');
 const dnd = require('@hello-pangea/dnd');
 const SwitchPrimitives = require('@radix-ui/react-switch');
 const format = require('date-fns/format');
 const HoverCard = require('@radix-ui/react-hover-card');
-const AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 const semver = require('semver');
-const DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
-const features = require('@mastra/core/features');
-const observability = require('@mastra/core/observability');
-const storage = require('@mastra/core/storage');
 const recharts = require('recharts');
+const observability = require('@mastra/core/observability');
+const DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 const Papa = require('papaparse');
+const AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 const reactDom = require('react-dom');
 const isToday = require('date-fns/isToday');
+const features = require('@mastra/core/features');
+const storage = require('@mastra/core/storage');
 const cmdk = require('cmdk');
 const merge = require('@codemirror/merge');
 const state = require('@codemirror/state');
 const reactSyntaxHighlighter$1 = require('react-syntax-highlighter');
+const compatibility = require('./compatibility-BSEoV343.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -113,8 +113,8 @@ const SliderPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SliderP
 const RadixTabs__namespace = /*#__PURE__*/_interopNamespaceDefault(RadixTabs);
 const SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespaceDefault(SwitchPrimitives);
 const HoverCard__namespace = /*#__PURE__*/_interopNamespaceDefault(HoverCard);
-const AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(AlertDialogPrimitive);
 const DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DropdownMenuPrimitive);
+const AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(AlertDialogPrimitive);
 
 const defaultSettings = {
   modelSettings: {
@@ -13995,11 +13995,69 @@ function useActivatedSkills() {
   return React.useContext(ActivatedSkillsContext) ?? FALLBACK_CONTEXT;
 }
 
+const BROWSER_TOOL_PREFIXES = ["browser_", "stagehand_"];
+function isBrowserTool(toolName) {
+  return BROWSER_TOOL_PREFIXES.some((prefix) => toolName.startsWith(prefix));
+}
+function isBrowserToolError(result) {
+  if (!result || typeof result !== "object") return false;
+  const r = result;
+  return r.success === false && typeof r.code === "string";
+}
+const BrowserToolCallsContext = React.createContext(null);
+function BrowserToolCallsProvider({ children }) {
+  const [toolCallMap, setToolCallMap] = React.useState(/* @__PURE__ */ new Map());
+  const registerToolCall = React.useCallback((entry) => {
+    setToolCallMap((prev) => {
+      const existing = prev.get(entry.toolCallId);
+      if (existing && existing.result === entry.result && existing.status === entry.status) {
+        return prev;
+      }
+      const next = new Map(prev);
+      next.set(entry.toolCallId, existing ? { ...entry, timestamp: existing.timestamp } : entry);
+      return next;
+    });
+  }, []);
+  const toolCalls = React.useMemo(
+    () => Array.from(toolCallMap.values()).sort((a, b) => a.timestamp - b.timestamp),
+    [toolCallMap]
+  );
+  const value = React.useMemo(() => ({ toolCalls, registerToolCall }), [toolCalls, registerToolCall]);
+  return /* @__PURE__ */ jsxRuntime.jsx(BrowserToolCallsContext.Provider, { value, children });
+}
+function useBrowserToolCalls() {
+  const ctx = React.useContext(BrowserToolCallsContext);
+  if (!ctx) {
+    throw new Error("useBrowserToolCalls must be used within a BrowserToolCallsProvider");
+  }
+  return ctx;
+}
+function useBrowserToolCallsSafe() {
+  return React.useContext(BrowserToolCallsContext);
+}
+
 const ToolFallback = ({ toolName, result, args, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(WorkflowRunProvider, { workflowId: "", withoutTimeTravel: true, children: /* @__PURE__ */ jsxRuntime.jsx(ToolFallbackInner, { toolName, result, args, ...props }) });
 };
 const ToolFallbackInner = ({ toolName, result, args, metadata, toolCallId, ...props }) => {
+  const browserCtx = useBrowserToolCallsSafe();
+  const isBrowser = isBrowserTool(toolName);
   const { activateSkill } = useActivatedSkills();
+  React.useEffect(() => {
+    if (!isBrowser || !browserCtx) return;
+    let status = "pending";
+    if (result !== void 0) {
+      status = isBrowserToolError(result) ? "error" : "complete";
+    }
+    browserCtx.registerToolCall({
+      toolCallId,
+      toolName,
+      args: typeof args === "object" ? args : {},
+      result,
+      status,
+      timestamp: Date.now()
+    });
+  }, [isBrowser, toolCallId, toolName, args, result, browserCtx]);
   React.useEffect(() => {
     if (toolName !== "skill") return;
     if (!args?.name) return;
@@ -14010,6 +14068,9 @@ const ToolFallbackInner = ({ toolName, result, args, metadata, toolCallId, ...pr
   if (toolName === "mastra-memory-om-observation") {
     return /* @__PURE__ */ jsxRuntime.jsx(ObservationMarkerBadge, { toolName, args, metadata });
   }
+  if (isBrowser && browserCtx) {
+    return null;
+  }
   const isAgent = metadata?.mode === "network" && metadata.from === "AGENT" || toolName.startsWith("agent-");
   const isWorkflow = metadata?.mode === "network" && metadata.from === "WORKFLOW" || toolName.startsWith("workflow-");
   const isNetwork = metadata?.mode === "network";
@@ -15995,10 +16056,12 @@ const Avatar = ({ src, name, size = "sm", interactive = false }) => {
   );
 };
 
-const Thread = ({ agentName, agentId, hasMemory, hasModelList, hideModelSwitcher }) => {
+const Thread = ({ agentName, agentId, threadId, hasMemory, hasModelList, hideModelSwitcher }) => {
   const areaRef = React.useRef(null);
   const messagesContainerRef = React.useRef(null);
   useAutoscroll(areaRef, { enabled: true });
+  const { hasSession, viewMode, isInSidebar } = useBrowserSession();
+  const showThumbnailInChat = hasSession && (viewMode === "collapsed" || viewMode === "expanded") && !isInSidebar;
   const WrappedAssistantMessage = (props) => {
     return /* @__PURE__ */ jsxRuntime.jsx(AssistantMessage, { ...props, hasModelList });
   };
@@ -16023,6 +16086,7 @@ const Thread = ({ agentName, agentId, hasMemory, hasModelList, hideModelSwitcher
         /* @__PURE__ */ jsxRuntime.jsx("div", {})
       ] })
     ] }),
+    showThumbnailInChat && agentId && threadId && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-4 mb-2 max-w-3xl w-full mx-auto", children: /* @__PURE__ */ jsxRuntime.jsx(BrowserThumbnail, { agentName }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       Composer,
       {
@@ -16240,6 +16304,243 @@ function useWorkingMemory() {
   return ctx;
 }
 
+function useCloseBrowser() {
+  return reactQuery.useMutation({
+    mutationFn: async ({ agentId, threadId }) => {
+      const response = await fetch(`/api/agents/${agentId}/browser/close`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ threadId })
+      });
+      if (!response.ok) {
+        throw new Error(`Failed to close browser: ${response.status}`);
+      }
+      return { success: true };
+    },
+    onError: (err) => {
+      console.error("[useCloseBrowser] Error closing browser:", err);
+    }
+  });
+}
+
+const BrowserSessionContext = React.createContext(null);
+function BrowserSessionProvider({ children, agentId, threadId }) {
+  const [hasSession, setHasSession] = React.useState(false);
+  const [viewMode, setViewModeState] = React.useState("collapsed");
+  const [status, setStatusState] = React.useState("idle");
+  const [currentUrl, setCurrentUrlState] = React.useState(null);
+  const [latestFrame, setLatestFrameState] = React.useState(null);
+  const [viewport, setViewport] = React.useState(null);
+  const wsRef = React.useRef(null);
+  const reconnectAttemptRef = React.useRef(0);
+  const reconnectTimeoutRef = React.useRef(null);
+  const currentConnectionRef = React.useRef(null);
+  const maxReconnectAttempts = 5;
+  const clearReconnectTimeout = React.useCallback(() => {
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+  }, []);
+  const disconnect = React.useCallback(() => {
+    clearReconnectTimeout();
+    currentConnectionRef.current = null;
+    if (wsRef.current) {
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+    setHasSession(false);
+    setStatusState("idle");
+    setCurrentUrlState(null);
+    setLatestFrameState(null);
+    setViewport(null);
+  }, [clearReconnectTimeout]);
+  const sendMessage = React.useCallback((data) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(data);
+    }
+  }, []);
+  const intentionalCloseRef = React.useRef(false);
+  const connect = React.useCallback(() => {
+    if (!agentId || !threadId) return;
+    if (currentConnectionRef.current?.agentId === agentId && currentConnectionRef.current?.threadId === threadId && wsRef.current?.readyState === WebSocket.OPEN) {
+      return;
+    }
+    clearReconnectTimeout();
+    if (wsRef.current) {
+      intentionalCloseRef.current = true;
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+    currentConnectionRef.current = { agentId, threadId };
+    setStatusState("connecting");
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const wsUrl = `${protocol}//${window.location.host}/browser/${agentId}/stream?threadId=${encodeURIComponent(threadId)}`;
+    try {
+      const ws = new WebSocket(wsUrl);
+      intentionalCloseRef.current = false;
+      wsRef.current = ws;
+      ws.onopen = () => {
+        setStatusState("connected");
+        reconnectAttemptRef.current = 0;
+      };
+      ws.onmessage = (event) => {
+        const data = event.data;
+        if (data.startsWith("{")) {
+          try {
+            const parsed = JSON.parse(data);
+            if (parsed.status) {
+              switch (parsed.status) {
+                case "browser_starting":
+                  setStatusState("browser_starting");
+                  break;
+                case "streaming":
+                  setStatusState("streaming");
+                  setHasSession(true);
+                  break;
+                case "browser_closed":
+                  setStatusState("browser_closed");
+                  setHasSession(false);
+                  setViewModeState("collapsed");
+                  break;
+                case "stopped":
+                  setStatusState("disconnected");
+                  break;
+                case "error":
+                  setStatusState("error");
+                  setHasSession(false);
+                  break;
+              }
+            }
+            if (parsed.url) {
+              setCurrentUrlState(parsed.url);
+            }
+            if (parsed.viewport) {
+              setViewport(parsed.viewport);
+            }
+          } catch {
+            setLatestFrameState(data);
+          }
+        } else {
+          setLatestFrameState(data);
+          setStatusState((prev) => prev !== "streaming" ? "streaming" : prev);
+          setHasSession(true);
+        }
+      };
+      ws.onerror = () => {
+      };
+      ws.onclose = (event) => {
+        if (wsRef.current !== ws) return;
+        wsRef.current = null;
+        if (!intentionalCloseRef.current && !event.wasClean && reconnectAttemptRef.current < maxReconnectAttempts) {
+          reconnectAttemptRef.current += 1;
+          const delay = Math.min(1e3 * Math.pow(2, reconnectAttemptRef.current - 1), 1e4);
+          setStatusState("disconnected");
+          reconnectTimeoutRef.current = setTimeout(() => {
+            connect();
+          }, delay);
+        } else if (reconnectAttemptRef.current >= maxReconnectAttempts) {
+          setStatusState("error");
+        }
+      };
+    } catch {
+      setStatusState("error");
+    }
+  }, [agentId, threadId, clearReconnectTimeout]);
+  React.useEffect(() => {
+    if (agentId && threadId) {
+      connect();
+    }
+    return () => {
+      disconnect();
+    };
+  }, [agentId, threadId, connect, disconnect]);
+  React.useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "visible" && status === "disconnected" && agentId && threadId) {
+        reconnectAttemptRef.current = 0;
+        connect();
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [status, agentId, threadId, connect]);
+  const setViewMode = React.useCallback((mode) => {
+    setViewModeState(mode);
+  }, []);
+  const show = React.useCallback(() => {
+    setViewModeState("modal");
+  }, []);
+  const hide = React.useCallback(() => {
+    setViewModeState("collapsed");
+  }, []);
+  const endSession = React.useCallback(() => {
+    setHasSession(false);
+    setViewModeState("collapsed");
+    setLatestFrameState(null);
+  }, []);
+  const closeBrowserMutation = useCloseBrowser();
+  const closeBrowser = React.useCallback(async () => {
+    if (closeBrowserMutation.isPending || !agentId) return;
+    try {
+      await closeBrowserMutation.mutateAsync({ agentId, threadId });
+      endSession();
+    } catch {
+    }
+  }, [agentId, threadId, closeBrowserMutation, endSession]);
+  const isClosing = closeBrowserMutation.isPending;
+  const value = React.useMemo(
+    () => ({
+      hasSession,
+      viewMode,
+      isPanelOpen: viewMode === "modal",
+      isInSidebar: viewMode === "sidebar",
+      isActive: hasSession,
+      // backward compat - reflects session activity, not view mode
+      status,
+      currentUrl,
+      latestFrame,
+      viewport,
+      isClosing,
+      setViewMode,
+      show,
+      hide,
+      endSession,
+      closeBrowser,
+      sendMessage,
+      connect,
+      disconnect
+    }),
+    [
+      hasSession,
+      viewMode,
+      status,
+      currentUrl,
+      latestFrame,
+      viewport,
+      isClosing,
+      setViewMode,
+      show,
+      hide,
+      endSession,
+      closeBrowser,
+      sendMessage,
+      connect,
+      disconnect
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(BrowserSessionContext.Provider, { value, children });
+}
+function useBrowserSession() {
+  const ctx = React.useContext(BrowserSessionContext);
+  if (!ctx) {
+    throw new Error("useBrowserSession must be used within a BrowserSessionProvider");
+  }
+  return ctx;
+}
+
 const ObservationalMemoryContext = React.createContext(null);
 function ObservationalMemoryProvider({ children }) {
   const [isObservingFromStream, setIsObservingFromStream] = React.useState(false);
@@ -17844,6 +18145,7 @@ const AgentChat = ({
           agentName: agentName ?? "",
           hasMemory: memory,
           agentId,
+          threadId,
           hasModelList: Boolean(modelList),
           hideModelSwitcher
         }
@@ -19525,6 +19827,8 @@ function getShortId(id) {
 function SaveAsDatasetItemDialog({
   initialInput,
   initialGroundTruth,
+  initialTrajectory,
+  trajectoryLoading,
   breadcrumb,
   isOpen,
   onClose,
@@ -19534,15 +19838,30 @@ function SaveAsDatasetItemDialog({
   const [selectedDatasetId, setSelectedDatasetId] = React.useState("");
   const [input, setInput] = React.useState("");
   const [groundTruth, setGroundTruth] = React.useState("");
+  const [expectedTrajectory, setExpectedTrajectory] = React.useState("");
   const { data, isLoading: isDatasetsLoading } = useDatasets();
   const { addItem } = useDatasetMutations();
   const datasets = data?.datasets ?? [];
+  const prevOpenRef = React.useRef(false);
+  const trajectorySeededRef = React.useRef(false);
   React.useEffect(() => {
-    if (isOpen) {
+    if (isOpen && !prevOpenRef.current) {
       setInput(initialInput);
       setGroundTruth(initialGroundTruth);
+      setExpectedTrajectory(initialTrajectory ?? "");
+      trajectorySeededRef.current = !!initialTrajectory;
     }
-  }, [isOpen, initialInput, initialGroundTruth]);
+    prevOpenRef.current = isOpen;
+    if (!isOpen) {
+      trajectorySeededRef.current = false;
+    }
+  }, [isOpen, initialInput, initialGroundTruth, initialTrajectory]);
+  React.useEffect(() => {
+    if (isOpen && initialTrajectory && !trajectorySeededRef.current) {
+      setExpectedTrajectory(initialTrajectory);
+      trajectorySeededRef.current = true;
+    }
+  }, [isOpen, initialTrajectory]);
   const handleSubmit = async (e) => {
     e.preventDefault();
     if (!selectedDatasetId) {
@@ -19565,11 +19884,21 @@ function SaveAsDatasetItemDialog({
         return;
       }
     }
+    let parsedTrajectory;
+    if (expectedTrajectory.trim()) {
+      try {
+        parsedTrajectory = JSON.parse(expectedTrajectory);
+      } catch {
+        toast.error("Expected Trajectory must be valid JSON");
+        return;
+      }
+    }
     try {
       await addItem.mutateAsync({
         datasetId: selectedDatasetId,
         input: parsedInput,
         groundTruth: parsedGroundTruth,
+        expectedTrajectory: parsedTrajectory,
         ...source ? { source } : {}
       });
       const targetDataset = datasets.find((d) => d.id === selectedDatasetId);
@@ -19577,6 +19906,7 @@ function SaveAsDatasetItemDialog({
       setSelectedDatasetId("");
       setInput("{}");
       setGroundTruth("");
+      setExpectedTrajectory("");
       onClose();
     } catch (error) {
       toast.error(`Failed to save item: ${error instanceof Error ? error.message : "Unknown error"}`);
@@ -19632,6 +19962,18 @@ function SaveAsDatasetItemDialog({
               /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "item-ground-truth", children: "Ground Truth (JSON, optional)" }),
               /* @__PURE__ */ jsxRuntime.jsx(CodeEditor, { value: groundTruth, onChange: setGroundTruth, showCopyButton: false, className: "min-h-[80px]" })
             ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "item-trajectory", children: "Expected Trajectory (JSON, optional)" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                CodeEditor,
+                {
+                  value: expectedTrajectory,
+                  onChange: setExpectedTrajectory,
+                  showCopyButton: false,
+                  className: "min-h-[80px]"
+                }
+              )
+            ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 pt-4", children: [
               /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "outline", onClick: handleCancel, children: "Cancel" }),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -19639,8 +19981,8 @@ function SaveAsDatasetItemDialog({
                 {
                   type: "submit",
                   variant: "light",
-                  disabled: addItem.isPending || !selectedDatasetId || datasets.length === 0,
-                  children: addItem.isPending ? "Saving..." : "Save Item"
+                  disabled: addItem.isPending || trajectoryLoading || !selectedDatasetId || datasets.length === 0,
+                  children: addItem.isPending ? "Saving..." : trajectoryLoading ? "Loading trajectory..." : "Save Item"
                 }
               )
             ] })
@@ -19774,8 +20116,9 @@ function ScoreDialog({
   usageContext = "scorerPage"
 }) {
   const [datasetDialogOpen, setDatasetDialogOpen] = React.useState(false);
-  const { Link } = useLinkComponent();
+  const { Link, paths } = useLinkComponent();
   const isCodeBased = isCodeBasedScorer$1(score);
+  const scorerDetailHref = score?.scorerId && score?.entityId ? `${paths.scorerLink(score.scorerId)}?entity=${encodeURIComponent(score.entityId)}&scoreId=${encodeURIComponent(score.id)}` : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       SideDialog,
@@ -19838,7 +20181,7 @@ function ScoreDialog({
                     ...usageContext === "SpanDialog" ? [
                       {
                         label: "Scorer",
-                        value: score?.scorer?.name || "-",
+                        value: scorerDetailHref ? /* @__PURE__ */ jsxRuntime.jsx(Link, { href: scorerDetailHref, children: score?.scorer?.name || "-" }) : score?.scorer?.name || "-",
                         key: "scorer-name"
                       }
                     ] : [],
@@ -22927,6 +23270,779 @@ const AgentToolPanel = ({ toolId, agentId }) => {
   );
 };
 
+const TOOL_DISPLAY_NAMES$1 = {
+  // AgentBrowser tools
+  browser_goto: "Go to",
+  browser_click: "Click",
+  browser_type: "Type",
+  browser_scroll: "Scroll",
+  browser_snapshot: "Snapshot",
+  browser_close: "Close",
+  browser_select: "Select",
+  browser_press: "Press",
+  browser_hover: "Hover",
+  browser_back: "Back",
+  browser_dialog: "Dialog",
+  browser_wait: "Wait",
+  browser_tabs: "Tabs",
+  browser_drag: "Drag",
+  browser_evaluate: "Evaluate",
+  // StagehandBrowser tools
+  stagehand_navigate: "Navigate",
+  stagehand_act: "Act",
+  stagehand_extract: "Extract",
+  stagehand_observe: "Observe",
+  stagehand_close: "Close",
+  stagehand_tabs: "Tabs"
+};
+const KEY_ARG_MAP = {
+  // AgentBrowser tools
+  browser_goto: "url",
+  browser_click: "ref",
+  browser_type: "text",
+  browser_scroll: "direction",
+  browser_close: "reason",
+  browser_select: "value",
+  browser_press: "key",
+  browser_hover: "ref",
+  browser_dialog: "action",
+  browser_wait: "time",
+  browser_tabs: "action",
+  browser_drag: "sourceRef",
+  browser_evaluate: "expression",
+  // StagehandBrowser tools
+  stagehand_navigate: "url",
+  stagehand_act: "action",
+  stagehand_extract: "instruction",
+  stagehand_observe: "instruction",
+  stagehand_tabs: "action"
+};
+function getDisplayName(toolName) {
+  if (TOOL_DISPLAY_NAMES$1[toolName]) {
+    return TOOL_DISPLAY_NAMES$1[toolName];
+  }
+  return toolName.replace(/^(browser_|stagehand_)/, "");
+}
+function getKeyArgSummary(toolName, args) {
+  const key = KEY_ARG_MAP[toolName];
+  if (!key) return null;
+  const value = args[key];
+  if (value === void 0 || value === null) return null;
+  const str = String(value);
+  return str.length > 50 ? `${str.slice(0, 47)}...` : str;
+}
+function BrowserToolCallItem({ entry }) {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const displayName = getDisplayName(entry.toolName);
+  const keyArg = getKeyArgSummary(entry.toolName, entry.args);
+  const { __mastraMetadata: _, ...displayArgs } = entry.args;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-border1 last:border-b-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsExpanded((prev) => !prev),
+        "aria-expanded": isExpanded,
+        className: "flex items-center gap-2 w-full px-3 py-0.5 text-left hover:bg-surface3 transition-colors",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ChevronRight,
+            {
+              className: cn("h-3 w-3 text-neutral3 transition-transform shrink-0", isExpanded && "rotate-90")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { status: entry.status }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-neutral6 shrink-0", children: displayName }),
+          keyArg && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-neutral3 truncate", children: keyArg })
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 pb-2 space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-neutral4 pb-1", children: "Arguments" }),
+        /* @__PURE__ */ jsxRuntime.jsx(CodeEditor, { data: displayArgs, "data-testid": "browser-tool-args" })
+      ] }),
+      entry.result !== void 0 && entry.result !== null && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-neutral4 pb-1", children: "Result" }),
+        typeof entry.result === "string" ? /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre text-xs bg-surface4 p-2 rounded-md overflow-x-auto max-h-40 overflow-y-auto", children: entry.result }) : /* @__PURE__ */ jsxRuntime.jsx(
+          CodeEditor,
+          {
+            data: entry.result,
+            "data-testid": "browser-tool-result"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function StatusDot({ status }) {
+  switch (status) {
+    case "pending":
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3 w-3 text-neutral4 animate-spin shrink-0" });
+    case "complete":
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3 text-green-500 shrink-0" });
+    case "error":
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3 text-red-500 shrink-0" });
+  }
+}
+
+function BrowserToolCallHistory({ className }) {
+  const { toolCalls } = useBrowserToolCalls();
+  const [isExpanded, setIsExpanded] = React.useState(true);
+  const listRef = React.useRef(null);
+  React.useEffect(() => {
+    if (isExpanded && listRef.current) {
+      listRef.current.scrollTop = listRef.current.scrollHeight;
+    }
+  }, [toolCalls.length, isExpanded]);
+  if (toolCalls.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsExpanded((prev) => !prev),
+        "aria-expanded": isExpanded,
+        className: "flex items-center gap-2 w-full px-3 py-1 text-left hover:bg-surface3 transition-colors shrink-0",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn("h-3.5 w-3.5 text-neutral3 transition-transform", isExpanded ? "rotate-180" : "") }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium text-neutral4", children: [
+            "Browser Actions (",
+            toolCalls.length,
+            ")"
+          ] })
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: listRef, className: "flex-1 overflow-y-auto bg-surface1", children: toolCalls.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(BrowserToolCallItem, { entry }, entry.toolCallId)) })
+  ] });
+}
+
+const MAX_RIPPLES = 10;
+function useClickRipple(options) {
+  const [ripples, setRipples] = React.useState([]);
+  const idRef = React.useRef(0);
+  const viewportRef = React.useRef(options.viewport);
+  React.useEffect(() => {
+    viewportRef.current = options.viewport;
+  }, [options.viewport]);
+  const removeRipple = React.useCallback((id) => {
+    setRipples((prev) => prev.filter((r) => r.id !== id));
+  }, []);
+  React.useEffect(() => {
+    if (!options.enabled || !options.imgRef.current) {
+      return;
+    }
+    const imgElement = options.imgRef.current;
+    function handleMouseDown(e) {
+      if (e.button !== 0) return;
+      const viewport = viewportRef.current;
+      if (!viewport) return;
+      const rect = imgElement.getBoundingClientRect();
+      const relX = e.clientX - rect.left;
+      const relY = e.clientY - rect.top;
+      const scale = Math.min(rect.width / viewport.width, rect.height / viewport.height);
+      const renderedWidth = viewport.width * scale;
+      const renderedHeight = viewport.height * scale;
+      const offsetX = (rect.width - renderedWidth) / 2;
+      const offsetY = (rect.height - renderedHeight) / 2;
+      const imageX = relX - offsetX;
+      const imageY = relY - offsetY;
+      if (imageX < 0 || imageY < 0 || imageX > renderedWidth || imageY > renderedHeight) {
+        return;
+      }
+      setRipples((prev) => {
+        if (prev.length >= MAX_RIPPLES) return prev;
+        const id = ++idRef.current;
+        return [...prev, { id, x: relX, y: relY }];
+      });
+    }
+    imgElement.addEventListener("mousedown", handleMouseDown);
+    return () => {
+      imgElement.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, [options.enabled, options.imgRef]);
+  return { ripples, removeRipple };
+}
+
+function useInputCoordination() {
+  const { toolCalls } = useBrowserToolCalls();
+  return React.useMemo(() => {
+    const pendingCalls = toolCalls.filter((tc) => tc.status === "pending");
+    const isAgentBusy = pendingCalls.length > 0;
+    const activeToolName = isAgentBusy ? pendingCalls[0].toolName : null;
+    return { isAgentBusy, activeToolName, pendingCount: pendingCalls.length };
+  }, [toolCalls]);
+}
+
+const LINE_HEIGHT_PX = 16;
+const MAX_DELTA = 500;
+function mapClientToViewport(clientX, clientY, elemRect, viewport) {
+  const relX = clientX - elemRect.left;
+  const relY = clientY - elemRect.top;
+  const scale = Math.min(elemRect.width / viewport.width, elemRect.height / viewport.height);
+  const renderedWidth = viewport.width * scale;
+  const renderedHeight = viewport.height * scale;
+  const offsetX = (elemRect.width - renderedWidth) / 2;
+  const offsetY = (elemRect.height - renderedHeight) / 2;
+  const imageX = relX - offsetX;
+  const imageY = relY - offsetY;
+  if (imageX < 0 || imageY < 0 || imageX > renderedWidth || imageY > renderedHeight) {
+    return null;
+  }
+  return {
+    x: imageX / scale,
+    y: imageY / scale
+  };
+}
+function normalizeWheelDelta(delta, deltaMode, viewportHeight) {
+  let pixels;
+  switch (deltaMode) {
+    case 0:
+      pixels = delta;
+      break;
+    case 1:
+      pixels = delta * LINE_HEIGHT_PX;
+      break;
+    case 2:
+      pixels = delta * (viewportHeight ?? 800);
+      break;
+    default:
+      pixels = delta;
+  }
+  return Math.max(-MAX_DELTA, Math.min(MAX_DELTA, pixels));
+}
+function getModifiers(event) {
+  let modifiers = 0;
+  if (event.altKey) modifiers |= 1;
+  if (event.ctrlKey) modifiers |= 2;
+  if (event.metaKey) modifiers |= 4;
+  if (event.shiftKey) modifiers |= 8;
+  return modifiers;
+}
+
+function isPrintableKey(key) {
+  return key.length === 1;
+}
+
+function useKeyboardInteraction(options) {
+  const sendRef = React.useRef(options.sendMessage);
+  const onEscapeRef = React.useRef(options.onEscape);
+  React.useEffect(() => {
+    sendRef.current = options.sendMessage;
+  }, [options.sendMessage]);
+  React.useEffect(() => {
+    onEscapeRef.current = options.onEscape;
+  }, [options.onEscape]);
+  React.useEffect(() => {
+    if (!options.enabled) {
+      return;
+    }
+    function sendKeyboardMsg(eventType, key, code, text, modifiers) {
+      const msg = { type: "keyboard", eventType };
+      if (key !== void 0) msg.key = key;
+      if (code !== void 0) msg.code = code;
+      if (text !== void 0) msg.text = text;
+      if (modifiers) msg.modifiers = modifiers;
+      sendRef.current(JSON.stringify(msg));
+    }
+    function handleKeyDown(e) {
+      if (e.isComposing || e.keyCode === 229) return;
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        onEscapeRef.current();
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      const modifiers = getModifiers(e);
+      const isPrintable = isPrintableKey(e.key);
+      sendKeyboardMsg("keyDown", e.key, e.code, void 0, modifiers);
+      if (isPrintable) {
+        sendKeyboardMsg("char", e.key, void 0, e.key, modifiers);
+      }
+    }
+    function handleKeyUp(e) {
+      if (e.isComposing || e.keyCode === 229) return;
+      if (e.key === "Escape") return;
+      e.preventDefault();
+      e.stopPropagation();
+      sendKeyboardMsg("keyUp", e.key, e.code, void 0, getModifiers(e));
+    }
+    function handleCompositionEnd(e) {
+      const text = e.data;
+      if (!text) return;
+      for (const char of text) {
+        sendKeyboardMsg("keyDown", char, void 0, void 0, 0);
+        sendKeyboardMsg("char", char, void 0, char, 0);
+        sendKeyboardMsg("keyUp", char, void 0, void 0, 0);
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown, { capture: true });
+    document.addEventListener("keyup", handleKeyUp, { capture: true });
+    document.addEventListener("compositionend", handleCompositionEnd);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown, { capture: true });
+      document.removeEventListener("keyup", handleKeyUp, { capture: true });
+      document.removeEventListener("compositionend", handleCompositionEnd);
+    };
+  }, [options.enabled]);
+}
+
+function useMouseInteraction(options) {
+  const viewportRef = React.useRef(options.viewport);
+  const sendRef = React.useRef(options.sendMessage);
+  React.useEffect(() => {
+    viewportRef.current = options.viewport;
+  }, [options.viewport]);
+  React.useEffect(() => {
+    sendRef.current = options.sendMessage;
+  }, [options.sendMessage]);
+  React.useEffect(() => {
+    if (!options.enabled || !options.imgRef.current) {
+      return;
+    }
+    const imgElement = options.imgRef.current;
+    function sendMouseEvent(eventType, x, y, button, clickCount, modifiers, deltaX, deltaY) {
+      const msg = { type: "mouse", eventType, x, y };
+      if (button !== void 0) msg.button = button;
+      if (clickCount !== void 0) msg.clickCount = clickCount;
+      if (modifiers !== void 0) msg.modifiers = modifiers;
+      if (deltaX !== void 0) msg.deltaX = deltaX;
+      if (deltaY !== void 0) msg.deltaY = deltaY;
+      sendRef.current(JSON.stringify(msg));
+    }
+    function mapButton(domButton) {
+      if (domButton === 2) return "right";
+      if (domButton === 1) return "middle";
+      return "left";
+    }
+    function handleMouseDown(e) {
+      const viewport = viewportRef.current;
+      if (!viewport) return;
+      const rect = imgElement.getBoundingClientRect();
+      const mapped = mapClientToViewport(e.clientX, e.clientY, rect, viewport);
+      if (!mapped) return;
+      const button = mapButton(e.button);
+      const modifiers = getModifiers(e);
+      sendMouseEvent("mouseMoved", mapped.x, mapped.y, void 0, void 0, modifiers);
+      sendMouseEvent("mousePressed", mapped.x, mapped.y, button, 1, modifiers);
+    }
+    function handleMouseUp(e) {
+      const viewport = viewportRef.current;
+      if (!viewport) return;
+      const rect = imgElement.getBoundingClientRect();
+      const mapped = mapClientToViewport(e.clientX, e.clientY, rect, viewport);
+      if (!mapped) return;
+      const button = mapButton(e.button);
+      sendMouseEvent("mouseReleased", mapped.x, mapped.y, button, 1, getModifiers(e));
+    }
+    function handleContextMenu(e) {
+      e.preventDefault();
+    }
+    function handleWheel(e) {
+      e.preventDefault();
+      const viewport = viewportRef.current;
+      if (!viewport) return;
+      const rect = imgElement.getBoundingClientRect();
+      const mapped = mapClientToViewport(e.clientX, e.clientY, rect, viewport);
+      if (!mapped) return;
+      const normDeltaX = normalizeWheelDelta(e.deltaX, e.deltaMode, viewport.height);
+      const normDeltaY = normalizeWheelDelta(e.deltaY, e.deltaMode, viewport.height);
+      sendMouseEvent("mouseWheel", mapped.x, mapped.y, void 0, void 0, getModifiers(e), normDeltaX, normDeltaY);
+    }
+    let rafId = null;
+    let lastMoveTime = 0;
+    let pendingMoveEvent = null;
+    const FRAME_INTERVAL = 1e3 / 30;
+    function handleMouseMove(e) {
+      pendingMoveEvent = e;
+      if (rafId !== null) return;
+      rafId = requestAnimationFrame((now) => {
+        rafId = null;
+        if (!pendingMoveEvent) return;
+        const delta = now - lastMoveTime;
+        if (delta < FRAME_INTERVAL) return;
+        lastMoveTime = now;
+        const viewport = viewportRef.current;
+        if (!viewport) {
+          pendingMoveEvent = null;
+          return;
+        }
+        const eventToProcess = pendingMoveEvent;
+        pendingMoveEvent = null;
+        const rect = imgElement.getBoundingClientRect();
+        const mapped = mapClientToViewport(eventToProcess.clientX, eventToProcess.clientY, rect, viewport);
+        if (!mapped) return;
+        sendMouseEvent("mouseMoved", mapped.x, mapped.y, void 0, void 0, getModifiers(eventToProcess));
+      });
+    }
+    imgElement.addEventListener("mousedown", handleMouseDown);
+    imgElement.addEventListener("mouseup", handleMouseUp);
+    imgElement.addEventListener("contextmenu", handleContextMenu);
+    imgElement.addEventListener("wheel", handleWheel, { passive: false });
+    imgElement.addEventListener("mousemove", handleMouseMove);
+    return () => {
+      imgElement.removeEventListener("mousedown", handleMouseDown);
+      imgElement.removeEventListener("mouseup", handleMouseUp);
+      imgElement.removeEventListener("contextmenu", handleContextMenu);
+      imgElement.removeEventListener("wheel", handleWheel);
+      imgElement.removeEventListener("mousemove", handleMouseMove);
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+      }
+    };
+  }, [options.enabled, options.imgRef]);
+}
+
+const TOOL_DISPLAY_NAMES = {
+  // AgentBrowser tools
+  browser_navigate: "Navigating",
+  browser_goto: "Navigating",
+  browser_click: "Clicking",
+  browser_type: "Typing",
+  browser_scroll: "Scrolling",
+  browser_screenshot: "Capturing",
+  browser_snapshot: "Reading page",
+  browser_close: "Closing",
+  browser_select: "Selecting",
+  // StagehandBrowser tools
+  stagehand_navigate: "Navigating",
+  stagehand_act: "Acting",
+  stagehand_extract: "Extracting",
+  stagehand_observe: "Observing",
+  stagehand_screenshot: "Capturing",
+  stagehand_close: "Closing"
+};
+function AgentBusyOverlay({ toolName }) {
+  const displayName = toolName ? TOOL_DISPLAY_NAMES[toolName] ?? toolName.replace(/^(browser_|stagehand_)/, "") : "Working";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-surface1/40 flex items-center justify-center z-10 cursor-not-allowed", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 bg-surface2 px-3 py-1.5 rounded-md border border-border1 shadow-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3.5 w-3.5 text-accent1 animate-spin" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium text-neutral4", children: [
+      "Agent: ",
+      displayName
+    ] })
+  ] }) });
+}
+
+const RIPPLE_SIZE = 32;
+const RIPPLE_RADIUS = RIPPLE_SIZE / 2;
+function ClickRippleOverlay({ ripples, onAnimationEnd }) {
+  if (ripples.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: ripples.map((ripple) => /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: "absolute rounded-full pointer-events-none animate-click-ripple bg-accent1/40",
+      style: {
+        left: ripple.x - RIPPLE_RADIUS,
+        top: ripple.y - RIPPLE_RADIUS,
+        width: RIPPLE_SIZE,
+        height: RIPPLE_SIZE
+      },
+      onAnimationEnd: () => onAnimationEnd(ripple.id)
+    },
+    ripple.id
+  )) });
+}
+
+function BrowserViewFrame({ className, onStatusChange, onUrlChange, onFirstFrame }) {
+  const imgRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const hasFrameRef = React.useRef(false);
+  const [hasFrame, setHasFrame] = React.useState(false);
+  const [isInteractive, setIsInteractive] = React.useState(false);
+  const { status, currentUrl, latestFrame, viewport, sendMessage } = useBrowserSession();
+  React.useEffect(() => {
+    if (latestFrame && imgRef.current) {
+      imgRef.current.src = `data:image/jpeg;base64,${latestFrame}`;
+      if (!hasFrameRef.current) {
+        hasFrameRef.current = true;
+        setHasFrame(true);
+      }
+    }
+  }, [latestFrame]);
+  const exitInteractive = React.useCallback(() => {
+    setIsInteractive(false);
+  }, []);
+  const handleFrameClick = React.useCallback(() => {
+    if (status === "streaming") {
+      setIsInteractive(true);
+    }
+  }, [status]);
+  const { isAgentBusy, activeToolName } = useInputCoordination();
+  useMouseInteraction({
+    imgRef,
+    viewport,
+    sendMessage,
+    enabled: status === "streaming" && !isAgentBusy
+  });
+  useKeyboardInteraction({
+    sendMessage,
+    enabled: isInteractive && status === "streaming" && hasFrame && !isAgentBusy,
+    onEscape: exitInteractive
+  });
+  const { ripples, removeRipple } = useClickRipple({
+    imgRef,
+    viewport,
+    enabled: status === "streaming" && hasFrame && !isAgentBusy
+  });
+  React.useEffect(() => {
+    onStatusChange?.(status);
+  }, [status, onStatusChange]);
+  React.useEffect(() => {
+    onUrlChange?.(currentUrl);
+  }, [currentUrl, onUrlChange]);
+  React.useEffect(() => {
+    if (hasFrame) {
+      onFirstFrame?.();
+    }
+  }, [hasFrame, onFirstFrame]);
+  React.useEffect(() => {
+    if (!isInteractive) return;
+    function handleDocumentMouseDown(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setIsInteractive(false);
+      }
+    }
+    function handleWindowBlur() {
+      setIsInteractive(false);
+    }
+    document.addEventListener("mousedown", handleDocumentMouseDown);
+    window.addEventListener("blur", handleWindowBlur);
+    return () => {
+      document.removeEventListener("mousedown", handleDocumentMouseDown);
+      window.removeEventListener("blur", handleWindowBlur);
+    };
+  }, [isInteractive]);
+  React.useEffect(() => {
+    if (status !== "streaming") {
+      setIsInteractive(false);
+    }
+  }, [status]);
+  const isLoading = (status === "connecting" || status === "browser_starting" || status === "streaming") && !hasFrame;
+  const isReconnecting = status === "disconnected" && hasFrame;
+  const hasError = status === "error";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        "relative w-full aspect-video bg-surface2 rounded-md overflow-hidden",
+        isInteractive && !isAgentBusy && "ring-2 ring-accent1",
+        isInteractive && isAgentBusy && "ring-2 ring-amber-400",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            ref: imgRef,
+            alt: "Browser screencast",
+            onClick: handleFrameClick,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleFrameClick();
+              }
+            },
+            tabIndex: status === "streaming" ? 0 : -1,
+            role: "button",
+            className: cn(
+              "absolute inset-0 w-full h-full object-contain",
+              hasFrame ? "opacity-100" : "opacity-0",
+              status === "streaming" && (isInteractive ? "cursor-text" : "cursor-pointer")
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ClickRippleOverlay, { ripples, onAnimationEnd: removeRipple }),
+        isAgentBusy && /* @__PURE__ */ jsxRuntime.jsx(AgentBusyOverlay, { toolName: activeToolName }),
+        isLoading && /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "absolute inset-0" }),
+        isReconnecting && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-surface1/80 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-4 h-4 border-2 border-neutral4 border-t-transparent rounded-full animate-spin" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-neutral4", children: "Reconnecting..." })
+        ] }) }),
+        hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3 px-6 py-4 text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-14 h-14 rounded-full bg-red-500/20 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: "w-7 h-7 text-red-400",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              strokeWidth: 1.5,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-medium text-white", children: "Connection Error" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-white/70", children: "Failed to connect to browser" })
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+
+const statusBadgeVariants = cva(
+  // Base styles
+  "inline-flex items-center gap-1.5 rounded-full text-ui-xs font-medium transition-colors duration-normal",
+  {
+    variants: {
+      variant: {
+        success: "bg-accent1Dark text-accent1",
+        warning: "bg-accent6Dark text-accent6",
+        error: "bg-accent2Dark text-accent2",
+        info: "bg-accent5Dark text-accent5",
+        neutral: "bg-surface4 text-neutral4"
+      },
+      size: {
+        sm: "px-1.5 py-0.5 text-ui-xs",
+        md: "px-2 py-1 text-ui-xs",
+        lg: "px-2.5 py-1 text-ui-sm"
+      },
+      withDot: {
+        true: "",
+        false: ""
+      },
+      pulse: {
+        true: "",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "neutral",
+      size: "md",
+      withDot: false,
+      pulse: false
+    }
+  }
+);
+const dotVariants = cva("rounded-full", {
+  variants: {
+    variant: {
+      success: "bg-accent1",
+      warning: "bg-accent6",
+      error: "bg-accent2",
+      info: "bg-accent5",
+      neutral: "bg-neutral3"
+    },
+    size: {
+      sm: "w-1 h-1",
+      md: "w-1.5 h-1.5",
+      lg: "w-2 h-2"
+    },
+    pulse: {
+      true: "animate-pulse",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    variant: "neutral",
+    size: "md",
+    pulse: false
+  }
+});
+function StatusBadge({ className, variant, size, withDot, pulse, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(statusBadgeVariants({ variant, size, withDot, pulse }), className), ...props, children: [
+    withDot && /* @__PURE__ */ jsxRuntime.jsx("span", { className: dotVariants({ variant, size, pulse }) }),
+    children
+  ] });
+}
+
+function getStatusBadgeConfig$2(status) {
+  switch (status) {
+    case "idle":
+      return { variant: "neutral", pulse: false, label: "Idle" };
+    case "connecting":
+      return { variant: "warning", pulse: true, label: "Connecting" };
+    case "connected":
+      return { variant: "warning", pulse: true, label: "Connected" };
+    case "browser_starting":
+      return { variant: "warning", pulse: true, label: "Starting" };
+    case "streaming":
+      return { variant: "success", pulse: false, label: "Live" };
+    case "browser_closed":
+      return { variant: "neutral", pulse: false, label: "Closed" };
+    case "disconnected":
+      return { variant: "error", pulse: true, label: "Disconnected" };
+    case "error":
+      return { variant: "error", pulse: false, label: "Error" };
+    default:
+      return { variant: "neutral", pulse: false, label: "Unknown" };
+  }
+}
+function BrowserSidebarTab() {
+  const { status, currentUrl, closeBrowser, setViewMode } = useBrowserSession();
+  const handleClose = React.useCallback(async () => {
+    await closeBrowser();
+  }, [closeBrowser]);
+  const handleCenterView = React.useCallback(() => {
+    setViewMode("modal");
+  }, [setViewMode]);
+  const handleMinimize = React.useCallback(() => {
+    setViewMode("collapsed");
+  }, [setViewMode]);
+  const handleFirstFrame = React.useCallback(() => {
+  }, []);
+  const statusConfig = getStatusBadgeConfig$2(status);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-border1 shrink-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Globe, { className: "h-4 w-4 text-neutral4 shrink-0" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0 px-2 py-1 bg-surface2 rounded border border-border1", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs truncate block", currentUrl ? "text-neutral5" : "text-neutral3 italic"), children: currentUrl || "No URL" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { variant: statusConfig.variant, size: "sm", withDot: true, pulse: statusConfig.pulse, children: statusConfig.label })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(BrowserViewFrame, { className: "w-full", onFirstFrame: handleFirstFrame }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-2 right-2 flex gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            IconButton,
+            {
+              variant: "light",
+              size: "sm",
+              tooltip: "Center view",
+              onClick: handleCenterView,
+              className: "bg-surface1/80 backdrop-blur-sm",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "h-3.5 w-3.5" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            IconButton,
+            {
+              variant: "light",
+              size: "sm",
+              tooltip: "Minimize to chat",
+              onClick: handleMinimize,
+              className: "bg-surface1/80 backdrop-blur-sm",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize2, { className: "h-3.5 w-3.5" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            IconButton,
+            {
+              variant: "light",
+              size: "sm",
+              tooltip: "Close browser",
+              onClick: handleClose,
+              className: "bg-surface1/80 backdrop-blur-sm",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pb-3", children: /* @__PURE__ */ jsxRuntime.jsx(BrowserToolCallHistory, {}) })
+    ] })
+  ] });
+}
+
 const AgentMemoryConfig = ({ agentId }) => {
   const { data, isLoading } = useMemoryConfig(agentId);
   const [expandedSections, setExpandedSections] = React.useState(/* @__PURE__ */ new Set(["General", "Semantic Recall"]));
@@ -24034,6 +25150,7 @@ function AgentMemory({ agentId, threadId, memoryType }) {
 function AgentInformation({ agentId, threadId }) {
   const { data: agent } = useAgent(agentId);
   const { data: memory, isLoading: isMemoryLoading } = useMemory(agentId);
+  const { hasSession, isInSidebar } = useBrowserSession();
   const hasMemory = !isMemoryLoading && Boolean(memory?.result);
   const { selectedTab, handleTabChange } = useAgentInformationTab({
     isMemoryLoading,
@@ -24041,39 +25158,46 @@ function AgentInformation({ agentId, threadId }) {
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(AgentInformationLayout, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(AgentEntityHeader, { agentId }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden border-t border-border1 flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultTab: "overview", value: selectedTab, onValueChange: handleTabChange, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(TabList, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "overview", children: "Overview" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "model-settings", children: "Model Settings" }),
-        hasMemory && /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "memory", children: "Memory" }),
-        agent?.requestContextSchema && /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "request-context", children: "Request Context" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "tracing-options", children: "Tracing Options" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "overview", children: /* @__PURE__ */ jsxRuntime.jsx(AgentMetadata, { agentId }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "model-settings", children: /* @__PURE__ */ jsxRuntime.jsx(AgentSettings, { agentId }) }),
-      agent?.requestContextSchema && /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "request-context", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5", children: /* @__PURE__ */ jsxRuntime.jsx(RequestContextSchemaForm, { requestContextSchema: agent.requestContextSchema }) }) }),
-      hasMemory && /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "memory", children: /* @__PURE__ */ jsxRuntime.jsx(AgentMemory, { agentId, threadId, memoryType: memory?.memoryType }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "tracing-options", children: /* @__PURE__ */ jsxRuntime.jsx(TracingRunOptions, {}) })
-    ] }) })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-hidden border-t border-border1 flex flex-col relative", children: [
+      hasSession && isInSidebar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-10 bg-surface1", children: /* @__PURE__ */ jsxRuntime.jsx(BrowserSidebarTab, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultTab: "overview", value: selectedTab, onValueChange: handleTabChange, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(TabList, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "overview", children: "Overview" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "model-settings", children: "Model Settings" }),
+          hasMemory && /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "memory", children: "Memory" }),
+          agent?.requestContextSchema && /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "request-context", children: "Request Context" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "tracing-options", children: "Tracing Options" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "overview", children: /* @__PURE__ */ jsxRuntime.jsx(AgentMetadata, { agentId }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "model-settings", children: /* @__PURE__ */ jsxRuntime.jsx(AgentSettings, { agentId }) }),
+        agent?.requestContextSchema && /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "request-context", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5", children: /* @__PURE__ */ jsxRuntime.jsx(RequestContextSchemaForm, { requestContextSchema: agent.requestContextSchema }) }) }),
+        hasMemory && /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "memory", children: /* @__PURE__ */ jsxRuntime.jsx(AgentMemory, { agentId, threadId, memoryType: memory?.memoryType }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "tracing-options", children: /* @__PURE__ */ jsxRuntime.jsx(TracingRunOptions, {}) })
+      ] })
+    ] })
   ] });
 }
 const STORAGE_KEY = "agent-info-selected-tab";
+const VALID_TABS = /* @__PURE__ */ new Set(["overview", "model-settings", "memory", "request-context", "tracing-options"]);
 const useAgentInformationTab = ({ isMemoryLoading, hasMemory }) => {
   const [selectedTab, setSelectedTab] = React.useState(() => {
-    return sessionStorage.getItem(STORAGE_KEY) || "overview";
+    const stored = sessionStorage.getItem(STORAGE_KEY) || "overview";
+    if (!VALID_TABS.has(stored)) return "overview";
+    return stored;
   });
-  const handleTabChange = (value) => {
+  const effectiveTab = (() => {
+    if (!VALID_TABS.has(selectedTab)) return "overview";
+    if (selectedTab === "memory" && !isMemoryLoading && !hasMemory) {
+      return "overview";
+    }
+    return selectedTab;
+  })();
+  const handleTabChange = React.useCallback((value) => {
     setSelectedTab(value);
     sessionStorage.setItem(STORAGE_KEY, value);
-  };
-  React.useEffect(() => {
-    if (!isMemoryLoading && !hasMemory && selectedTab === "memory") {
-      setSelectedTab("overview");
-      sessionStorage.setItem(STORAGE_KEY, "overview");
-    }
-  }, [isMemoryLoading, hasMemory, selectedTab]);
+  }, []);
   return {
-    selectedTab,
+    selectedTab: effectiveTab,
     handleTabChange
   };
 };
@@ -24090,9 +25214,9 @@ const AgentInformationTabLayout = ({ children, agentId }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden border-t border-border1 flex flex-col min-w-0 w-full", children: /* @__PURE__ */ jsxRuntime.jsx(Tabs, { defaultTab: "overview", value: selectedTab, onValueChange: handleTabChange, children }) });
 };
 
-const AgentLayout = ({ agentId, children, leftSlot, rightSlot }) => {
+const AgentLayout = ({ agentId, children, leftSlot, rightSlot, browserOverlay }) => {
   const { defaultLayout, onLayoutChange } = reactResizablePanels.useDefaultLayout({
-    id: `agent-layout-${agentId}`,
+    id: `agent-layout-v2-${agentId}`,
     storage: localStorage
   });
   const computedClassName = getMainContentContentClassName({
@@ -24100,42 +25224,545 @@ const AgentLayout = ({ agentId, children, leftSlot, rightSlot }) => {
     isDivided: true,
     hasLeftServiceColumn: Boolean(leftSlot)
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactResizablePanels.Group, { className: computedClassName, defaultLayout, onLayoutChange, children: [
-    leftSlot && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        CollapsiblePanel,
-        {
-          direction: "left",
-          id: "left-slot",
-          minSize: 200,
-          maxSize: "30%",
-          defaultSize: 200,
-          collapsedSize: 60,
-          collapsible: true,
-          children: leftSlot
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(PanelSeparator, {})
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full w-full overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactResizablePanels.Group, { className: computedClassName, defaultLayout, onLayoutChange, children: [
+      leftSlot && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CollapsiblePanel,
+          {
+            direction: "left",
+            id: "left-slot",
+            minSize: 200,
+            maxSize: "30%",
+            defaultSize: 200,
+            collapsedSize: 60,
+            collapsible: true,
+            children: leftSlot
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(PanelSeparator, {})
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactResizablePanels.Panel, { id: "main-slot", className: "grid overflow-y-auto relative bg-surface1 py-4", children }),
+      rightSlot && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PanelSeparator, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CollapsiblePanel,
+          {
+            direction: "right",
+            id: "right-slot",
+            minSize: 300,
+            maxSize: "50%",
+            defaultSize: "30%",
+            collapsedSize: 60,
+            collapsible: true,
+            children: rightSlot
+          }
+        )
+      ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactResizablePanels.Panel, { id: "main-slot", className: "grid overflow-y-auto relative bg-surface1 py-4", children }),
-    rightSlot && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(PanelSeparator, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        CollapsiblePanel,
+    browserOverlay
+  ] });
+};
+
+function BrowserThumbnail({ agentName = "Agent" }) {
+  const { hasSession, viewMode, status, currentUrl, latestFrame, setViewMode, closeBrowser } = useBrowserSession();
+  const { toolCalls } = useBrowserToolCalls();
+  const imgRef = React.useRef(null);
+  const [hasFrame, setHasFrame] = React.useState(false);
+  const actionsRef = React.useRef(null);
+  const isExpanded = viewMode === "expanded";
+  React.useEffect(() => {
+    if (latestFrame) {
+      const frameData = `data:image/jpeg;base64,${latestFrame}`;
+      if (imgRef.current) {
+        imgRef.current.src = frameData;
+      }
+      if (!hasFrame) {
+        setHasFrame(true);
+      }
+    }
+  }, [latestFrame, hasFrame]);
+  React.useEffect(() => {
+    if (!hasSession) {
+      setHasFrame(false);
+      if (imgRef.current) {
+        imgRef.current.src = "";
+      }
+    }
+  }, [hasSession]);
+  React.useEffect(() => {
+    if (isExpanded && actionsRef.current) {
+      actionsRef.current.scrollTop = actionsRef.current.scrollHeight;
+    }
+  }, [toolCalls.length, isExpanded]);
+  const handleToggleExpand = React.useCallback(() => {
+    setViewMode(isExpanded ? "collapsed" : "expanded");
+  }, [isExpanded, setViewMode]);
+  const handleOpenModal = React.useCallback(() => {
+    setViewMode("modal");
+  }, [setViewMode]);
+  const handleOpenSidebar = React.useCallback(() => {
+    setViewMode("sidebar");
+  }, [setViewMode]);
+  const handleClose = React.useCallback(async () => {
+    await closeBrowser();
+  }, [closeBrowser]);
+  const displayUrl = React.useMemo(() => {
+    if (!currentUrl) return "Browser";
+    try {
+      return new URL(currentUrl).hostname;
+    } catch {
+      return currentUrl;
+    }
+  }, [currentUrl]);
+  if (!hasSession || viewMode === "modal" || viewMode === "sidebar") {
+    return null;
+  }
+  const isLive = status === "streaming";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "bg-surface2 border border-border1 rounded-lg overflow-hidden transition-all duration-200",
+        "hover:border-border2"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleToggleExpand,
+            className: cn(
+              "group flex items-center gap-3 w-full px-4 py-3",
+              "hover:bg-surface3 transition-colors",
+              "focus:outline-none focus:ring-2 focus:ring-accent1 focus:ring-inset"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative shrink-0 w-24 h-14 bg-surface3 rounded-md overflow-hidden border border-border1", children: [
+                hasFrame ? /* @__PURE__ */ jsxRuntime.jsx("img", { ref: imgRef, alt: "Browser preview", className: "w-full h-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-full h-full", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Monitor, { className: "h-5 w-5 text-neutral3" }) }),
+                isLive && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-1 right-1 w-2 h-2 bg-success rounded-full animate-pulse" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 text-left", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-neutral6 truncate", children: [
+                    agentName,
+                    "'s browser"
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { variant: isLive ? "success" : "neutral", size: "sm", withDot: true, pulse: isLive, children: isLive ? "Live" : "Idle" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-neutral4 truncate mt-0.5", children: displayUrl })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 text-neutral4 group-hover:text-neutral5 transition-colors", children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-5 w-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-5 w-5" }) })
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-border1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(BrowserViewFrame, { className: "w-full" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-2 right-2 flex gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                IconButton,
+                {
+                  variant: "light",
+                  size: "sm",
+                  tooltip: "Center view",
+                  onClick: handleOpenModal,
+                  className: "bg-surface1/80 backdrop-blur-sm",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "h-3.5 w-3.5" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                IconButton,
+                {
+                  variant: "light",
+                  size: "sm",
+                  tooltip: "Open in sidebar",
+                  onClick: handleOpenSidebar,
+                  className: "bg-surface1/80 backdrop-blur-sm",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelRight, { className: "h-3.5 w-3.5" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                IconButton,
+                {
+                  variant: "light",
+                  size: "sm",
+                  tooltip: "Close browser",
+                  onClick: handleClose,
+                  className: "bg-surface1/80 backdrop-blur-sm",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3.5 w-3.5" })
+                }
+              )
+            ] })
+          ] }) }),
+          toolCalls.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: actionsRef, className: "border-t border-border1 max-h-40 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-xs font-medium text-neutral4 mb-2", children: "Browser Actions" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: toolCalls.slice(-5).map((entry) => /* @__PURE__ */ jsxRuntime.jsx(BrowserToolCallItem, { entry }, entry.toolCallId)) })
+          ] }) })
+        ] })
+      ]
+    }
+  );
+}
+
+function getStatusBadgeConfig$1(status) {
+  switch (status) {
+    case "idle":
+      return { variant: "neutral", pulse: false, label: "Idle" };
+    case "connecting":
+      return { variant: "warning", pulse: true, label: "Connecting" };
+    case "connected":
+      return { variant: "warning", pulse: true, label: "Connected" };
+    case "browser_starting":
+      return { variant: "warning", pulse: true, label: "Starting" };
+    case "streaming":
+      return { variant: "success", pulse: false, label: "Live" };
+    case "browser_closed":
+      return { variant: "neutral", pulse: false, label: "Closed" };
+    case "disconnected":
+      return { variant: "error", pulse: true, label: "Disconnected" };
+    case "error":
+      return { variant: "error", pulse: false, label: "Error" };
+    default:
+      return { variant: "neutral", pulse: false, label: "Unknown" };
+  }
+}
+function BrowserViewHeader({
+  url,
+  status,
+  isCollapsed,
+  className,
+  onClose,
+  onToggleCollapse,
+  onTuck
+}) {
+  const { variant, pulse, label } = getStatusBadgeConfig$1(status);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between px-3 py-2 border-b border-border1 bg-surface1",
+        isCollapsed ? "rounded-md" : "rounded-t-md",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0 mr-3", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm text-neutral4 truncate block", !url && "text-neutral3 italic"), children: url || "No URL" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { variant, size: "sm", withDot: true, pulse, children: label }),
+          onTuck && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: onTuck,
+              className: "p-1 rounded hover:bg-surface3 text-neutral3 hover:text-neutral6 transition-colors",
+              title: "Minimize to pill",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "h-4 w-4" })
+            }
+          ),
+          onToggleCollapse && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: onToggleCollapse,
+              className: "p-1 rounded hover:bg-surface3 text-neutral3 hover:text-neutral6 transition-colors",
+              title: isCollapsed ? "Expand browser view" : "Minimize browser view",
+              children: isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-4 w-4" })
+            }
+          ),
+          onClose && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: onClose,
+              className: "p-1 rounded hover:bg-surface3 text-neutral3 hover:text-neutral6 transition-colors",
+              title: "Close browser session",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+function getStatusBadgeConfig(status) {
+  switch (status) {
+    case "idle":
+      return { variant: "neutral", pulse: false, label: "Idle" };
+    case "connecting":
+      return { variant: "warning", pulse: true, label: "Connecting" };
+    case "connected":
+      return { variant: "warning", pulse: true, label: "Connected" };
+    case "browser_starting":
+      return { variant: "warning", pulse: true, label: "Starting" };
+    case "streaming":
+      return { variant: "success", pulse: false, label: "Live" };
+    case "browser_closed":
+      return { variant: "neutral", pulse: false, label: "Closed" };
+    case "disconnected":
+      return { variant: "error", pulse: true, label: "Disconnected" };
+    case "error":
+      return { variant: "error", pulse: false, label: "Error" };
+    default:
+      return { variant: "neutral", pulse: false, label: "Unknown" };
+  }
+}
+function BrowserViewPanel() {
+  const { viewMode, status, currentUrl, hide, closeBrowser, setViewMode } = useBrowserSession();
+  const [isVisible, setIsVisible] = React.useState(false);
+  const dialogRef = React.useRef(null);
+  const previousFocusRef = React.useRef(null);
+  const isPanelOpen = viewMode === "modal";
+  React.useEffect(() => {
+    if (isPanelOpen) {
+      requestAnimationFrame(() => setIsVisible(true));
+    } else {
+      setIsVisible(false);
+    }
+  }, [isPanelOpen]);
+  React.useEffect(() => {
+    if (isPanelOpen) {
+      previousFocusRef.current = document.activeElement;
+      dialogRef.current?.focus();
+    } else if (previousFocusRef.current) {
+      previousFocusRef.current.focus();
+      previousFocusRef.current = null;
+    }
+  }, [isPanelOpen]);
+  const handleClose = React.useCallback(async () => {
+    await closeBrowser();
+  }, [closeBrowser]);
+  const handleMinimize = React.useCallback(() => {
+    hide();
+  }, [hide]);
+  const handleOpenSidebar = React.useCallback(() => {
+    setViewMode("sidebar");
+  }, [setViewMode]);
+  const handleOpenExternal = React.useCallback(() => {
+    if (!currentUrl) return;
+    try {
+      const url = new URL(currentUrl);
+      if (url.protocol === "http:" || url.protocol === "https:") {
+        window.open(url.href, "_blank", "noopener,noreferrer");
+      }
+    } catch {
+    }
+  }, [currentUrl]);
+  React.useEffect(() => {
+    if (!isPanelOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        hide();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isPanelOpen, hide]);
+  const handleBackdropClick = React.useCallback(
+    (e) => {
+      if (e.target === e.currentTarget) {
+        hide();
+      }
+    },
+    [hide]
+  );
+  const statusConfig = getStatusBadgeConfig(status);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "fixed inset-0 z-50 flex items-center justify-center p-8",
+        "bg-black/60 backdrop-blur-sm transition-opacity duration-200",
+        isPanelOpen && isVisible ? "opacity-100" : "opacity-0 pointer-events-none"
+      ),
+      onClick: handleBackdropClick,
+      "aria-hidden": !isPanelOpen,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
         {
-          direction: "right",
-          id: "right-slot",
-          minSize: 300,
-          maxSize: "50%",
-          defaultSize: "30%",
-          collapsedSize: 60,
-          collapsible: true,
-          children: rightSlot
+          ref: dialogRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Browser view",
+          tabIndex: -1,
+          className: cn(
+            "flex flex-col w-full max-w-5xl max-h-full",
+            "bg-surface2 rounded-xl border border-border1 shadow-2xl overflow-hidden",
+            "transition-transform duration-200 outline-none",
+            isPanelOpen && isVisible ? "scale-100" : "scale-95"
+          ),
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-border1 shrink-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Globe, { className: "h-4 w-4 text-neutral4 shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0 px-3 py-1.5 bg-surface3 rounded-md border border-border1", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm truncate block", currentUrl ? "text-neutral5" : "text-neutral3 italic"), children: currentUrl || "No URL" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { variant: statusConfig.variant, size: "sm", withDot: true, pulse: statusConfig.pulse, children: statusConfig.label }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 ml-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(IconButton, { variant: "ghost", size: "sm", tooltip: "Open in sidebar", onClick: handleOpenSidebar, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelRight, { className: "h-4 w-4" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(IconButton, { variant: "ghost", size: "sm", tooltip: "Minimize to chat", onClick: handleMinimize, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize2, { className: "h-4 w-4" }) }),
+                currentUrl && /* @__PURE__ */ jsxRuntime.jsx(IconButton, { variant: "ghost", size: "sm", tooltip: "Open in new tab", onClick: handleOpenExternal, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-4 w-4" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(IconButton, { variant: "ghost", size: "sm", tooltip: "Close browser", onClick: handleClose, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(BrowserViewFrame, { className: "w-full max-h-[60vh]" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 pb-4", children: /* @__PURE__ */ jsxRuntime.jsx(BrowserToolCallHistory, {}) })
+            ] })
+          ]
         }
       )
-    ] })
-  ] });
-};
+    }
+  );
+}
+
+function useBrowserStream(options) {
+  const { agentId, threadId, enabled = true, onFrame, maxReconnectAttempts = 5 } = options;
+  const [status, setStatus] = React.useState("idle");
+  const [error, setError] = React.useState(null);
+  const [currentUrl, setCurrentUrl] = React.useState(null);
+  const [viewport, setViewport] = React.useState(null);
+  const wsRef = React.useRef(null);
+  const reconnectAttemptRef = React.useRef(0);
+  const reconnectTimeoutRef = React.useRef(null);
+  const onFrameRef = React.useRef(onFrame);
+  React.useEffect(() => {
+    onFrameRef.current = onFrame;
+  }, [onFrame]);
+  const clearReconnectTimeout = React.useCallback(() => {
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+  }, []);
+  const disconnect = React.useCallback(() => {
+    clearReconnectTimeout();
+    if (wsRef.current) {
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+    setStatus("idle");
+    setError(null);
+    setViewport(null);
+  }, [clearReconnectTimeout]);
+  const sendMessage = React.useCallback((data) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(data);
+    }
+  }, []);
+  const connect = React.useCallback(() => {
+    clearReconnectTimeout();
+    if (wsRef.current) {
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+    setStatus("connecting");
+    setError(null);
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const wsUrl = `${protocol}//${window.location.host}/browser/${agentId}/stream?threadId=${encodeURIComponent(threadId)}`;
+    try {
+      const ws = new WebSocket(wsUrl);
+      wsRef.current = ws;
+      ws.onopen = () => {
+        setStatus("connected");
+        setError(null);
+        reconnectAttemptRef.current = 0;
+      };
+      ws.onmessage = (event) => {
+        const data = event.data;
+        if (data.startsWith("{")) {
+          try {
+            const parsed = JSON.parse(data);
+            if (parsed.status) {
+              switch (parsed.status) {
+                case "browser_starting":
+                  setStatus("browser_starting");
+                  break;
+                case "streaming":
+                  setStatus("streaming");
+                  break;
+                case "browser_closed":
+                  setStatus("browser_closed");
+                  break;
+                case "stopped":
+                  setStatus("disconnected");
+                  break;
+                default:
+                  break;
+              }
+            }
+            if (parsed.error) {
+              setError(parsed.error);
+              setStatus("error");
+            }
+            if (parsed.url) {
+              setCurrentUrl(parsed.url);
+            }
+            if (parsed.viewport) {
+              setViewport(parsed.viewport);
+            }
+          } catch {
+            onFrameRef.current?.(data);
+          }
+        } else {
+          onFrameRef.current?.(data);
+          setStatus((prev) => prev !== "streaming" ? "streaming" : prev);
+        }
+      };
+      ws.onerror = () => {
+        setError("WebSocket error occurred");
+      };
+      ws.onclose = (event) => {
+        wsRef.current = null;
+        if (!event.wasClean && enabled && reconnectAttemptRef.current < maxReconnectAttempts) {
+          setStatus("disconnected");
+          const delay = Math.min(1e3 * Math.pow(2, reconnectAttemptRef.current), 3e4);
+          reconnectAttemptRef.current += 1;
+          reconnectTimeoutRef.current = setTimeout(() => {
+            connect();
+          }, delay);
+        } else if (reconnectAttemptRef.current >= maxReconnectAttempts) {
+          setStatus("error");
+          setError("Maximum reconnection attempts reached");
+        } else {
+          setStatus("idle");
+        }
+      };
+    } catch (err) {
+      setStatus("error");
+      setError(err instanceof Error ? err.message : "Failed to create WebSocket");
+    }
+  }, [agentId, threadId, enabled, maxReconnectAttempts, clearReconnectTimeout]);
+  React.useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "visible" && enabled && status === "disconnected") {
+        reconnectAttemptRef.current = 0;
+        connect();
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [enabled, status, connect]);
+  React.useEffect(() => {
+    return () => {
+      clearReconnectTimeout();
+      if (wsRef.current) {
+        wsRef.current.close();
+        wsRef.current = null;
+      }
+    };
+  }, [clearReconnectTimeout]);
+  const isActive = status === "connecting" || status === "connected" || status === "browser_starting" || status === "streaming";
+  return {
+    status,
+    error,
+    currentUrl,
+    viewport,
+    sendMessage,
+    connect,
+    disconnect,
+    isActive
+  };
+}
 
 const ruleSchema = zod.z.object({
   field: zod.z.string(),
@@ -33780,11 +35407,36 @@ function getInitialInput(traceDetails) {
   return JSON.stringify(rawInput, null, 2);
 }
 function TraceAsItemDialog({ traceDetails, traceId, isOpen, onClose, level = 2 }) {
+  const client = react.useMastraClient();
+  const { data: trajectory, isLoading: isTrajectoryLoading } = reactQuery.useQuery({
+    queryKey: ["trace-trajectory", traceId],
+    queryFn: () => client.getTraceTrajectory(traceId),
+    enabled: isOpen && !!traceId
+  });
+  const initialTrajectory = trajectory?.steps && trajectory.steps.length > 0 ? JSON.stringify(
+    {
+      steps: trajectory.steps.map((step) => {
+        const { name, stepType, children, ...rest } = step;
+        const expected = { name, stepType };
+        for (const [k, v] of Object.entries(rest)) {
+          if (v != null && k !== "durationMs" && k !== "metadata") {
+            expected[k] = v;
+          }
+        }
+        return expected;
+      }),
+      ordering: "relaxed"
+    },
+    null,
+    2
+  ) : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     SaveAsDatasetItemDialog,
     {
       initialInput: getInitialInput(traceDetails),
       initialGroundTruth: traceDetails?.output != null ? JSON.stringify(traceDetails.output, null, 2) : "",
+      initialTrajectory,
+      trajectoryLoading: isTrajectoryLoading,
       breadcrumb: /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
         " ",
@@ -34486,7 +36138,10 @@ function TraceDialog({
     if (initialSpanId) {
       setSelectedSpanId(initialSpanId);
       setDialogIsOpen(true);
+      return;
     }
+    setSelectedSpanId(void 0);
+    setDialogIsOpen(false);
   }, [initialSpanId]);
   React.useEffect(() => {
     if (spanScoresPage > 0) {
@@ -34517,11 +36172,17 @@ function TraceDialog({
   });
   const handleSpanClick = (id) => {
     if (selectedSpanId === id) {
+      if (traceId) {
+        navigate(computeTraceLink(traceId));
+      }
       setSelectedSpanId(void 0);
-    } else {
-      setSelectedSpanId(id);
-      setSpanDialogDefaultTab("details");
-      setDialogIsOpen(true);
+      return;
+    }
+    setSelectedSpanId(id);
+    setSpanDialogDefaultTab("details");
+    setDialogIsOpen(true);
+    if (traceId) {
+      navigate(computeTraceLink(traceId, id));
     }
   };
   const handleToScoring = () => {
@@ -34771,6 +36432,70 @@ function TraceDialog({
   ] });
 }
 
+const sizeClasses = {
+  small: "text-[11px]   pt-[5px] pb-[4px]",
+  default: "text-[12px] pt-[5px] pb-[4px] ",
+  large: "text-[13px]   pt-[5px] pb-[4px] "
+};
+const bgColorClasses = {
+  gray: { bright: "bg-neutral-700", muted: "bg-neutral-700/80" },
+  red: { bright: "bg-red-900", muted: "bg-red-900/80" },
+  orange: { bright: "bg-yellow-900", muted: "bg-yellow-900/80" },
+  blue: { bright: "bg-blue-800", muted: "bg-blue-800/80" },
+  green: { bright: "bg-green-900", muted: "bg-green-900/80" },
+  purple: { bright: "bg-purple-900", muted: "bg-purple-900/80" },
+  yellow: { bright: "bg-yellow-700", muted: "bg-yellow-700/80" },
+  cyan: { bright: "bg-cyan-900", muted: "bg-cyan-900/80" },
+  pink: { bright: "bg-pink-900", muted: "bg-pink-900/80" }
+};
+const txtIntensityClasses = {
+  bright: "text-neutral4",
+  muted: "text-neutral3"
+};
+const Chip = ({
+  color = "gray",
+  size = "default",
+  intensity = "bright",
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center rounded-md uppercase px-[0.5em] gap-[0.4em] tracking-wide font-normal",
+        // general styles for svg icons within the chip
+        "[&>svg]:w-[1em] [&>svg]:h-[1em] [&>svg]:translate-y-[-0.02em] [&>svg]:mx-[-0.2em]",
+        // if the chip has only one child and it's an svg, make it fully opaque
+        "[&>svg]:opacity-50 [&>svg:first-child:last-child]:opacity-100",
+        sizeClasses[size],
+        bgColorClasses[color][intensity],
+        txtIntensityClasses[intensity],
+        className
+      ),
+      style: { lineHeight: 1 },
+      ...props,
+      children
+    }
+  );
+};
+
+const ChipsGroup = React.forwardRef(function ChipsGroup2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex gap-[1px] items-center [&>*:not(:last-child)]:rounded-r-none [&>*:not(:first-child)]:rounded-l-none",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+
 function formatTimestamp$2(dateStr) {
   const date = new Date(dateStr);
   return date.toLocaleDateString(void 0, {
@@ -34836,6 +36561,43 @@ function parseOutput(output) {
     error: typeof obj.error === "string" ? obj.error : obj.error ? String(obj.error) : void 0
   };
 }
+function TrajectoryStepsSection({ traceId }) {
+  const client = react.useMastraClient();
+  const [isOpen, setIsOpen] = React.useState(false);
+  const {
+    data: trajectory,
+    isLoading,
+    isError
+  } = reactQuery.useQuery({
+    queryKey: ["trajectory", traceId],
+    queryFn: () => client.getTraceTrajectory(traceId),
+    enabled: isOpen
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(Collapsible, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CollapsibleTrigger, { className: "flex items-center gap-1.5 text-xs text-purple-400 font-medium hover:text-purple-300", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-3 w-3 shrink-0" }),
+      "Trajectory Steps"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent, { children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mt-1 px-3 py-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Spinner, { className: "h-3 w-3" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-xs", className: "text-neutral3", children: "Loading trajectory..." })
+    ] }) : isError ? /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-xs", className: "text-red-400 mt-1 px-3 py-2", children: "Failed to load trajectory steps" }) : trajectory?.steps && trajectory.steps.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 space-y-1", children: [
+      trajectory.steps.map((step, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 bg-surface1 rounded text-xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Chip, { size: "small", color: "purple", children: String(step.stepType || "step") }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral5 font-mono font-medium", children: String(step.name || `Step ${i + 1}`) }),
+        typeof step.durationMs === "number" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-neutral2 ml-auto", children: [
+          step.durationMs,
+          "ms"
+        ] })
+      ] }, i)),
+      typeof trajectory.totalDurationMs === "number" && /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-xs", className: "text-neutral3 px-3 py-1", children: [
+        "Total: ",
+        trajectory.totalDurationMs,
+        "ms"
+      ] })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-xs", className: "text-neutral2 mt-1 px-3 py-2", children: "No trajectory steps found" }) })
+  ] });
+}
 function ResultOutputSection({
   output,
   traceId,
@@ -35072,12 +36834,31 @@ function ExperimentResultsPanel({
                 /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: isChecked, onCheckedChange: () => toggleItem(result.id) }),
                 /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: hasError ? "error" : "success", children: hasError ? "Error" : "Success" }),
                 /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-xs", className: "text-neutral2 font-mono", children: result.itemId.slice(0, 8) }),
-                itemScores.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 ml-auto", children: itemScores.map((s) => /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "default", children: [
-                  s.scorerId,
-                  ": ",
-                  s.score.toFixed(3)
-                ] }, s.scorerId)) })
+                itemScores.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 ml-auto flex-wrap", children: [
+                  itemScores.filter((s) => s.entityType !== "TRAJECTORY").map((s) => /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "default", children: [
+                    s.scorerId,
+                    ": ",
+                    s.score.toFixed(3)
+                  ] }, s.scorerId)),
+                  itemScores.filter((s) => s.entityType === "TRAJECTORY").map((s) => /* @__PURE__ */ jsxRuntime.jsxs(Chip, { size: "small", color: "purple", children: [
+                    s.scorerId,
+                    ": ",
+                    s.score.toFixed(3)
+                  ] }, s.scorerId))
+                ] })
               ] }),
+              itemScores.some((s) => s.entityType === "TRAJECTORY") && /* @__PURE__ */ jsxRuntime.jsxs(Collapsible, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(CollapsibleTrigger, { className: "flex items-center gap-1.5 text-xs text-purple-400 font-medium hover:text-purple-300", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-3 w-3 shrink-0" }),
+                  "Trajectory Score Details"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 space-y-2", children: itemScores.filter((s) => s.entityType === "TRAJECTORY").map((s) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface1 rounded px-3 py-2 space-y-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-xs", className: "text-purple-400 font-medium", children: s.scorerId }),
+                  s.reason && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-neutral4", children: s.reason }),
+                  s.preprocessStepResult && /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs text-neutral3 overflow-x-auto whitespace-pre-wrap break-words max-h-48 overflow-y-auto", children: JSON.stringify(s.preprocessStepResult, null, 2) })
+                ] }, s.scorerId)) }) })
+              ] }),
+              result.traceId && itemScores.some((s) => s.entityType === "TRAJECTORY") && /* @__PURE__ */ jsxRuntime.jsx(TrajectoryStepsSection, { traceId: result.traceId }),
               /* @__PURE__ */ jsxRuntime.jsxs(Collapsible, { children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(CollapsibleTrigger, { className: "flex items-center gap-1.5 text-xs text-neutral3 font-medium hover:text-neutral5", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-3 w-3 shrink-0" }),
@@ -35341,70 +37122,6 @@ const useDatasetVersions = (datasetId) => {
   });
 };
 
-const sizeClasses = {
-  small: "text-[11px]   pt-[5px] pb-[4px]",
-  default: "text-[12px] pt-[5px] pb-[4px] ",
-  large: "text-[13px]   pt-[5px] pb-[4px] "
-};
-const bgColorClasses = {
-  gray: { bright: "bg-neutral-700", muted: "bg-neutral-700/80" },
-  red: { bright: "bg-red-900", muted: "bg-red-900/80" },
-  orange: { bright: "bg-yellow-900", muted: "bg-yellow-900/80" },
-  blue: { bright: "bg-blue-800", muted: "bg-blue-800/80" },
-  green: { bright: "bg-green-900", muted: "bg-green-900/80" },
-  purple: { bright: "bg-purple-900", muted: "bg-purple-900/80" },
-  yellow: { bright: "bg-yellow-700", muted: "bg-yellow-700/80" },
-  cyan: { bright: "bg-cyan-900", muted: "bg-cyan-900/80" },
-  pink: { bright: "bg-pink-900", muted: "bg-pink-900/80" }
-};
-const txtIntensityClasses = {
-  bright: "text-neutral4",
-  muted: "text-neutral3"
-};
-const Chip = ({
-  color = "gray",
-  size = "default",
-  intensity = "bright",
-  className,
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: cn(
-        "inline-flex items-center rounded-md uppercase px-[0.5em] gap-[0.4em] tracking-wide font-normal",
-        // general styles for svg icons within the chip
-        "[&>svg]:w-[1em] [&>svg]:h-[1em] [&>svg]:translate-y-[-0.02em] [&>svg]:mx-[-0.2em]",
-        // if the chip has only one child and it's an svg, make it fully opaque
-        "[&>svg]:opacity-50 [&>svg:first-child:last-child]:opacity-100",
-        sizeClasses[size],
-        bgColorClasses[color][intensity],
-        txtIntensityClasses[intensity],
-        className
-      ),
-      style: { lineHeight: 1 },
-      ...props,
-      children
-    }
-  );
-};
-
-const ChipsGroup = React.forwardRef(function ChipsGroup2({ children, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      className: cn(
-        "flex gap-[1px] items-center [&>*:not(:last-child)]:rounded-r-none [&>*:not(:first-child)]:rounded-l-none",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-});
-
 function formatTimestamp$1(date) {
   const d = new Date(date);
   return d.toLocaleDateString("en-US", { month: "short", day: "numeric" }) + ", " + d.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" });
@@ -35415,6 +37132,11 @@ function truncateValue$2(value, maxLength = 120) {
   if (!str || str.length <= maxLength) return str || "-";
   return str.slice(0, maxLength) + "…";
 }
+function getExpectedTrajectoryLabel(expectedTrajectory) {
+  const traj = expectedTrajectory;
+  const steps = Array.isArray(traj?.steps) ? traj.steps.length : 0;
+  return steps > 0 ? `${steps} expected steps` : "trajectory";
+}
 const TAG_COLORS = ["blue", "green", "purple", "orange", "cyan", "pink", "red", "yellow"];
 function getTagColor(tag) {
   let hash = 0;
@@ -35698,7 +37420,10 @@ function DatasetDetailView({
                   className: "w-full text-left px-4 py-2 hover:bg-surface3 transition-colors flex items-start gap-2",
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "sm", className: "text-neutral3 mt-0.5 shrink-0", children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, {}) }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-xs", className: "text-neutral5 block truncate", children: truncateValue$2(item.input) }) })
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-xs", className: "text-neutral5 block truncate flex-1", children: truncateValue$2(item.input) }),
+                      item.expectedTrajectory != null && /* @__PURE__ */ jsxRuntime.jsx(Chip, { size: "small", color: "purple", children: getExpectedTrajectoryLabel(item.expectedTrajectory) })
+                    ] })
                   ]
                 }
               ),
@@ -35820,12 +37545,14 @@ function ExpandedItemEditor({
   const [isConfirmingDelete, setIsConfirmingDelete] = React.useState(false);
   const [inputValue, setInputValue] = React.useState("");
   const [groundTruthValue, setGroundTruthValue] = React.useState("");
+  const [trajectoryValue, setTrajectoryValue] = React.useState("");
   const { updateItem, deleteItem } = useDatasetMutations();
   const startEditing = React.useCallback(() => {
     setInputValue(formatValue$4(item.input));
     setGroundTruthValue(formatValue$4(item.groundTruth));
+    setTrajectoryValue(formatValue$4(item.expectedTrajectory));
     setIsEditing(true);
-  }, [item.input, item.groundTruth]);
+  }, [item.input, item.groundTruth, item.expectedTrajectory]);
   const cancelEditing = React.useCallback(() => {
     setIsEditing(false);
   }, []);
@@ -35852,19 +37579,28 @@ function ExpandedItemEditor({
         parsedGroundTruth = groundTruthValue;
       }
     }
+    let parsedTrajectory;
+    if (trajectoryValue.trim()) {
+      try {
+        parsedTrajectory = JSON.parse(trajectoryValue);
+      } catch {
+        parsedTrajectory = trajectoryValue;
+      }
+    }
     try {
       await updateItem.mutateAsync({
         datasetId,
         itemId: item.id,
         input: parsedInput,
-        groundTruth: parsedGroundTruth
+        groundTruth: parsedGroundTruth,
+        expectedTrajectory: parsedTrajectory
       });
       toast.success("Item updated");
       setIsEditing(false);
     } catch (error) {
       toast.error(`Failed to update: ${error instanceof Error ? error.message : "Unknown error"}`);
     }
-  }, [inputValue, groundTruthValue, datasetId, item.id, updateItem]);
+  }, [inputValue, groundTruthValue, trajectoryValue, datasetId, item.id, updateItem]);
   if (isEditing) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 pb-3 pl-10 space-y-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -35892,6 +37628,19 @@ function ExpandedItemEditor({
           }
         )
       ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-xs", className: "text-neutral3 font-medium", children: "Expected Trajectory (JSON)" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Textarea,
+          {
+            value: trajectoryValue,
+            onChange: (e) => setTrajectoryValue(e.target.value),
+            className: "mt-1 font-mono text-xs",
+            rows: 3,
+            placeholder: "Optional — JSON trajectory expectation"
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 pt-1", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "cta", size: "sm", onClick: handleSave, disabled: updateItem.isPending, children: [
           updateItem.isPending ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, {}) }),
@@ -35913,6 +37662,10 @@ function ExpandedItemEditor({
       /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-xs", className: "text-neutral3 font-medium", children: "Ground Truth" }),
       /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs text-neutral5 bg-surface1 rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap wrap-break-word max-h-48 overflow-y-auto mt-1", children: formatValue$4(item.groundTruth) })
     ] }),
+    item.expectedTrajectory != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-xs", className: "text-neutral3 font-medium", children: "Expected Trajectory" }),
+      /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs text-neutral5 bg-surface1 rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap break-words max-h-48 overflow-y-auto mt-1", children: formatValue$4(item.expectedTrajectory) })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 pt-1", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", onClick: startEditing, children: [
         /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, {}) }),
@@ -35973,12 +37726,14 @@ function ScorerDetailView({
   const name = scorerData.scorer?.name || scorerId;
   const description = scorerData.scorer?.description;
   const isCode = scorerData.source === "code";
+  const isTrajectory = scorerData.scorer?.config?.type === "trajectory";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full overflow-hidden", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border-b border-border1 space-y-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-neutral5 font-medium truncate", children: name }),
+            isTrajectory && /* @__PURE__ */ jsxRuntime.jsx(Chip, { size: "small", color: "purple", children: "trajectory" }),
             isCode && /* @__PURE__ */ jsxRuntime.jsx("span", { title: "Defined in code — cannot be edited in the UI", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", children: "Code" }) })
           ] }),
           description && /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-xs", className: "text-neutral3 block mt-1", children: description })
@@ -36001,6 +37756,7 @@ function ScorerDetailView({
         /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-xs", className: "text-neutral3 font-medium uppercase tracking-wider block mb-2", children: "Details" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: "ID", value: scorerId }),
+          /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: "Type", value: isTrajectory ? "Trajectory" : "Agent" }),
           /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: "Source", value: isCode ? "Code" : "Stored" }),
           scorerData.agentIds && scorerData.agentIds.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
             DetailRow,
@@ -39466,6 +41222,197 @@ function extractErrorText(error) {
   return "Error";
 }
 
+function BulkTraceReviewDialog({
+  isOpen,
+  onClose,
+  datasetId,
+  datasetName,
+  initialItems
+}) {
+  const [items, setItems] = React.useState(initialItems);
+  const [currentIndex, setCurrentIndex] = React.useState(0);
+  const { batchInsertItems } = useDatasetMutations();
+  React.useEffect(() => {
+    if (isOpen) {
+      setItems(initialItems);
+      setCurrentIndex(0);
+    }
+  }, [isOpen]);
+  const currentItem = items[currentIndex];
+  const total = items.length;
+  const updateCurrentItem = React.useCallback(
+    (field, value) => {
+      setItems((prev) => prev.map((item, i) => i === currentIndex ? { ...item, [field]: value } : item));
+    },
+    [currentIndex]
+  );
+  const removeCurrentItem = React.useCallback(() => {
+    setItems((prev) => {
+      const next = prev.filter((_, i) => i !== currentIndex);
+      if (next.length === 0) {
+        onClose();
+        return prev;
+      }
+      setCurrentIndex((idx) => Math.min(idx, next.length - 1));
+      return next;
+    });
+  }, [currentIndex, onClose]);
+  const handleSubmit = async () => {
+    const parsed = [];
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      let parsedInput;
+      try {
+        parsedInput = JSON.parse(item.input);
+      } catch {
+        toast.error(`Item ${i + 1}: Input must be valid JSON`);
+        setCurrentIndex(i);
+        return;
+      }
+      let parsedGroundTruth;
+      if (item.groundTruth.trim()) {
+        try {
+          parsedGroundTruth = JSON.parse(item.groundTruth);
+        } catch {
+          toast.error(`Item ${i + 1}: Ground Truth must be valid JSON`);
+          setCurrentIndex(i);
+          return;
+        }
+      }
+      let parsedTrajectory;
+      if (item.expectedTrajectory.trim()) {
+        try {
+          parsedTrajectory = JSON.parse(item.expectedTrajectory);
+        } catch {
+          toast.error(`Item ${i + 1}: Expected Trajectory must be valid JSON`);
+          setCurrentIndex(i);
+          return;
+        }
+      }
+      parsed.push({
+        input: parsedInput,
+        groundTruth: parsedGroundTruth,
+        expectedTrajectory: parsedTrajectory,
+        ...item.source ? { source: item.source } : {}
+      });
+    }
+    try {
+      await batchInsertItems.mutateAsync({ datasetId, items: parsed });
+      toast.success(`Added ${parsed.length} item${parsed.length !== 1 ? "s" : ""} to "${datasetName}"`);
+      onClose();
+    } catch {
+      toast.error("Failed to add items to dataset");
+    }
+  };
+  if (!currentItem) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    SideDialog,
+    {
+      dialogTitle: "Review items before adding to dataset",
+      dialogDescription: `Reviewing ${total} item${total !== 1 ? "s" : ""} for dataset "${datasetName}"`,
+      isOpen,
+      onClose,
+      level: 1,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Top, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.DatabaseIcon, { className: "size-4" }),
+          " Review ",
+          total,
+          " item",
+          total !== 1 ? "s" : "",
+          " → ",
+          datasetName
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Content, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                IconButton,
+                {
+                  tooltip: "Previous item",
+                  variant: "outline",
+                  size: "sm",
+                  disabled: currentIndex === 0,
+                  onClick: () => setCurrentIndex((prev) => prev - 1),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-sm", className: "text-icon3 tabular-nums", children: [
+                currentIndex + 1,
+                " / ",
+                total
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                IconButton,
+                {
+                  tooltip: "Next item",
+                  variant: "outline",
+                  size: "sm",
+                  disabled: currentIndex === total - 1,
+                  onClick: () => setCurrentIndex((prev) => prev + 1),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, {})
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(IconButton, { tooltip: "Remove this item", variant: "ghost", size: "sm", onClick: removeCurrentItem, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrashIcon, {}) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Input (JSON) *" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                CodeEditor,
+                {
+                  value: currentItem.input,
+                  onChange: (v) => updateCurrentItem("input", v),
+                  showCopyButton: false,
+                  className: "min-h-[120px]"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Ground Truth (JSON, optional)" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                CodeEditor,
+                {
+                  value: currentItem.groundTruth,
+                  onChange: (v) => updateCurrentItem("groundTruth", v),
+                  showCopyButton: false,
+                  className: "min-h-[80px]"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Expected Trajectory (JSON, optional)" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                CodeEditor,
+                {
+                  value: currentItem.expectedTrajectory,
+                  onChange: (v) => updateCurrentItem("expectedTrajectory", v),
+                  showCopyButton: false,
+                  className: "min-h-[80px]"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 pt-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "outline", onClick: onClose, children: "Cancel" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "light", disabled: batchInsertItems.isPending, onClick: handleSubmit, children: batchInsertItems.isPending ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2Icon, { className: "size-4 animate-spin" }),
+                "Adding..."
+              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.DatabaseIcon, { className: "size-4" }),
+                "Add all ",
+                total,
+                " item",
+                total !== 1 ? "s" : ""
+              ] }) })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
 function EntityListPageLayoutRoot({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -39559,16 +41506,6 @@ function extractInputPreview(input) {
   if (typeof obj.input === "string") return obj.input;
   return JSON.stringify(input).slice(0, 200);
 }
-function extractRawInput(input) {
-  if (!input || typeof input !== "object") return input;
-  const obj = input;
-  if (obj.messages && Array.isArray(obj.messages)) {
-    const userMsgs = obj.messages.filter((m) => m.role === "user");
-    const last = userMsgs[userMsgs.length - 1];
-    if (last?.content) return last.content;
-  }
-  return input;
-}
 function extractOutputPreview(output) {
   if (!output) return "";
   if (typeof output === "string") return output;
@@ -39754,11 +41691,31 @@ function BulkAddToDatasetBar({
     ] })
   ] });
 }
-function AgentTracesPanel({ agentId }) {
+function AgentTracesPanel({
+  agentId,
+  basePath,
+  initialTraceId,
+  initialSpanId,
+  initialSpanTab,
+  initialScoreId
+}) {
   const client = react.useMastraClient();
   const filters = useAgentTracesFilters(agentId);
-  const [selectedTraceId, setSelectedTraceId] = React.useState();
-  const [dialogIsOpen, setDialogIsOpen] = React.useState(false);
+  const { navigate } = useLinkComponent();
+  const buildTraceUrl = React.useCallback(
+    (traceId, spanId, scoreId, tab) => {
+      const params = new URLSearchParams();
+      if (traceId) params.set("traceId", traceId);
+      if (spanId) params.set("spanId", spanId);
+      if (tab) params.set("tab", tab);
+      if (scoreId) params.set("scoreId", scoreId);
+      const query = params.toString();
+      return query ? `${basePath ?? `/agents/${agentId}/traces`}?${query}` : basePath ?? `/agents/${agentId}/traces`;
+    },
+    [agentId, basePath]
+  );
+  const [selectedTraceId, setSelectedTraceId] = React.useState(initialTraceId);
+  const [dialogIsOpen, setDialogIsOpen] = React.useState(Boolean(initialTraceId));
   const [checkedTraceIds, setCheckedTraceIds] = React.useState(/* @__PURE__ */ new Set());
   const [sort, setSort] = React.useState(null);
   const {
@@ -39871,20 +41828,32 @@ function AgentTracesPanel({ agentId }) {
       return next.size === prev.size ? prev : next;
     });
   }, [displayTraces, checkedTraceIds.size]);
-  const { batchInsertItems } = useDatasetMutations();
+  const [bulkReview, setBulkReview] = React.useState({ isOpen: false, datasetId: "", datasetName: "", items: [] });
+  const [isPreparing, setIsPreparing] = React.useState(false);
+  React.useEffect(() => {
+    if (initialTraceId) {
+      setSelectedTraceId(initialTraceId);
+      setDialogIsOpen(true);
+      return;
+    }
+    setSelectedTraceId(void 0);
+    setDialogIsOpen(false);
+  }, [initialTraceId]);
   const allSelected = displayTraces.length > 0 && displayTraces.every((t) => checkedTraceIds.has(t.traceId));
   const someSelected = checkedTraceIds.size > 0;
   const handleTraceClick = React.useCallback(
     (traceId) => {
       if (selectedTraceId === traceId) {
+        navigate(buildTraceUrl());
         setSelectedTraceId(void 0);
         setDialogIsOpen(false);
       } else {
+        navigate(buildTraceUrl(traceId));
         setSelectedTraceId(traceId);
         setDialogIsOpen(true);
       }
     },
-    [selectedTraceId]
+    [buildTraceUrl, navigate, selectedTraceId]
   );
   const handleCheckToggle = React.useCallback((traceId, checked) => {
     setCheckedTraceIds((prev) => {
@@ -39904,33 +41873,67 @@ function AgentTracesPanel({ agentId }) {
       setCheckedTraceIds(new Set(displayTraces.map((t) => t.traceId)));
     }
   }, [allSelected, displayTraces]);
+  const { data: allDatasets } = useDatasets();
   const handleBulkAdd = React.useCallback(
     async (datasetId) => {
       const selected = displayTraces.filter((t) => checkedTraceIds.has(t.traceId));
       if (!selected.length) return;
-      const items = selected.map((t) => ({
-        input: extractRawInput(t.input),
-        groundTruth: t.output ?? void 0,
-        source: { type: "trace", referenceId: t.traceId }
-      }));
+      setIsPreparing(true);
       try {
-        await batchInsertItems.mutateAsync({ datasetId, items });
-        toast.success(`Added ${items.length} item${items.length !== 1 ? "s" : ""} to dataset`);
-        setCheckedTraceIds(/* @__PURE__ */ new Set());
-      } catch {
-        toast.error("Failed to add items to dataset");
+        const BATCH_SIZE = 5;
+        const trajectories = [];
+        for (let i = 0; i < selected.length; i += BATCH_SIZE) {
+          const batch = selected.slice(i, i + BATCH_SIZE);
+          const results = await Promise.all(
+            batch.map((t) => client.getTraceTrajectory(t.traceId).catch(() => void 0))
+          );
+          trajectories.push(...results);
+        }
+        const items = selected.map((t, i) => {
+          const trajectory = trajectories[i];
+          let trajectoryExpectation;
+          if (trajectory?.steps && trajectory.steps.length > 0) {
+            trajectoryExpectation = {
+              steps: trajectory.steps.map((step) => {
+                const { name, stepType, ...rest } = step;
+                const expected = { name, stepType };
+                for (const [k, v] of Object.entries(rest)) {
+                  if (v != null && k !== "durationMs" && k !== "metadata" && k !== "children") {
+                    expected[k] = v;
+                  }
+                }
+                return expected;
+              }),
+              ordering: "relaxed"
+            };
+          }
+          const formatJson = (val) => val != null ? JSON.stringify(val, null, 2) : "";
+          const rawInput = t.spanType === "agent_run" && t.input && typeof t.input === "object" && !Array.isArray(t.input) && Array.isArray(t.input.messages) ? t.input.messages : t.input;
+          return {
+            input: formatJson(rawInput),
+            groundTruth: formatJson(t.output),
+            expectedTrajectory: formatJson(trajectoryExpectation),
+            source: { type: "trace", referenceId: t.traceId }
+          };
+        });
+        const datasetName = allDatasets?.datasets?.find((d) => d.id === datasetId)?.name ?? "dataset";
+        setBulkReview({ isOpen: true, datasetId, datasetName, items });
+      } finally {
+        setIsPreparing(false);
       }
     },
-    [displayTraces, checkedTraceIds, batchInsertItems]
+    [displayTraces, checkedTraceIds, client, allDatasets]
+  );
+  const computeTraceLink = React.useCallback(
+    (traceId, spanId, tab) => buildTraceUrl(traceId, spanId, void 0, tab),
+    [buildTraceUrl]
   );
-  const computeTraceLink = React.useCallback((traceId, spanId) => {
-    return `/observability?traceId=${traceId}${spanId ? `&spanId=${spanId}` : ""}`;
-  }, []);
   const toNextTrace = React.useMemo(
     () => getToNextEntryFn({
       entries: displayTraces.map((t) => ({ id: t.traceId })),
       id: selectedTraceId,
       update: (id) => {
+        navigate(buildTraceUrl(id));
         setSelectedTraceId(id);
         setDialogIsOpen(true);
       }
@@ -39942,6 +41945,7 @@ function AgentTracesPanel({ agentId }) {
       entries: displayTraces.map((t) => ({ id: t.traceId })),
       id: selectedTraceId,
       update: (id) => {
+        navigate(buildTraceUrl(id));
         setSelectedTraceId(id);
         setDialogIsOpen(true);
       }
@@ -39958,14 +41962,7 @@ function AgentTracesPanel({ agentId }) {
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(EntityListPageLayout, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(EntityListPageLayout.Top, { children: /* @__PURE__ */ jsxRuntime.jsx(AgentTracesToolbar, { filters, scorerOptions }) }),
-    someSelected && /* @__PURE__ */ jsxRuntime.jsx(
-      BulkAddToDatasetBar,
-      {
-        selectedCount: checkedTraceIds.size,
-        onAdd: handleBulkAdd,
-        isPending: batchInsertItems.isPending
-      }
-    ),
+    someSelected && /* @__PURE__ */ jsxRuntime.jsx(BulkAddToDatasetBar, { selectedCount: checkedTraceIds.size, onAdd: handleBulkAdd, isPending: isPreparing }),
     isTracesLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }) : displayTraces.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-md", className: "text-icon3", children: filters.filtersApplied ? "No traces match the current filters." : "No traces yet." }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setEndOfListElement, className: "h-1", children: isFetchingNextPage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center py-4", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }) })
@@ -40043,6 +42040,7 @@ function AgentTracesPanel({ agentId }) {
         traceDetails: selectedTrace?.spans?.find((s) => s.traceId === selectedTraceId && !s.parentSpanId),
         isOpen: dialogIsOpen,
         onClose: () => {
+          navigate(buildTraceUrl());
           setDialogIsOpen(false);
           setSelectedTraceId(void 0);
         },
@@ -40050,9 +42048,25 @@ function AgentTracesPanel({ agentId }) {
         onPrevious: toPreviousTrace,
         isLoadingSpans: isSelectedTraceLoading,
         computeTraceLink,
+        initialSpanId,
+        initialSpanTab,
+        initialScoreId,
         scorers: scorersMap,
         isLoadingScorers
       }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      BulkTraceReviewDialog,
+      {
+        isOpen: bulkReview.isOpen,
+        onClose: () => {
+          setBulkReview((prev) => ({ ...prev, isOpen: false }));
+          setCheckedTraceIds(/* @__PURE__ */ new Set());
+        },
+        datasetId: bulkReview.datasetId,
+        datasetName: bulkReview.datasetName,
+        initialItems: bulkReview.items
+      }
     )
   ] });
 }
@@ -41906,7 +43920,7 @@ function MetricsCardRoot({ children, className }) {
     DashboardCard,
     {
       className: cn(
-        "flex-1 grid grid-rows-[4rem_20rem] gap-2 min-w-80 md:min-w-[22rem] lg:min-w-[24rem] xl:min-w-[26rem] 2xl:min-w-[30rem] 3xl:min-w-[32rem]",
+        "flex-1 grid grid-rows-[4rem_1fr] min-h-72 gap-2 min-w-80 md:min-w-[22rem] lg:min-w-[24rem] xl:min-w-[26rem] 2xl:min-w-[30rem]",
         className
       ),
       children
@@ -42057,12 +44071,12 @@ function MetricsLineChart({
   yDomain
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap w-full items-end gap-4 gap-y-1 mb-4", children: series.map((s) => {
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap w-full items-end gap-4 gap-y-1 mb-4 ", children: series.map((s) => {
       const aggregated = s.aggregate?.(data);
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-baseline gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-2 shrink-0 rounded-full translate-y-[-1px]", style: { backgroundColor: s.color } }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-2 shrink-0 rounded-full -translate-y-px", style: { backgroundColor: s.color } }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-sm text-neutral3 truncate max-w-24", children: s.label }),
-        aggregated && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-ui-lg text-neutral4", children: [
+        aggregated && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-ui-sm text-neutral4", children: [
           aggregated.value,
           aggregated.suffix && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-ui-sm text-neutral2", children: [
             " ",
@@ -42072,7 +44086,15 @@ function MetricsLineChart({
       ] }, s.dataKey);
     }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height }, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { stroke: "rgba(255,255,255,0.08)", vertical: false }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.CartesianGrid,
+        {
+          stroke: "currentColor",
+          strokeOpacity: 0.08,
+          vertical: false,
+          className: "text-black dark:text-white"
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(
         recharts.XAxis,
         {
@@ -42183,24 +44205,25 @@ function useAvgScoreKpiMetrics() {
       if (scorerIds.length === 0) {
         return { value: null, previousValue: null, changePercent: null };
       }
-      const allResults = await Promise.all(
-        scorerIds.map((scorerId) => client.listScoresByScorerId({ scorerId, perPage: 100 }))
+      const filters = {
+        timestamp: { start: timestamp.start, end: timestamp.end }
+      };
+      const results = await Promise.all(
+        scorerIds.map(async (scorerId) => {
+          const [avg2, count] = await Promise.all([
+            client.getScoreAggregate({ scorerId, aggregation: "avg", filters }),
+            client.getScoreAggregate({ scorerId, aggregation: "count", filters })
+          ]);
+          return { avg: avg2.value ?? 0, count: count.value ?? 0 };
+        })
       );
-      const startMs = timestamp.start.getTime();
-      const endMs = timestamp.end.getTime();
-      const allScoreValues = [];
-      for (const result of allResults) {
-        for (const s of result?.scores ?? []) {
-          const ts = new Date(s.createdAt).getTime();
-          if (ts >= startMs && ts <= endMs) {
-            allScoreValues.push(s.score);
-          }
-        }
-      }
-      if (allScoreValues.length === 0) {
+      const withData = results.filter((r) => r.count > 0);
+      if (withData.length === 0) {
         return { value: null, previousValue: null, changePercent: null };
       }
-      const avg = allScoreValues.reduce((sum, v) => sum + v, 0) / allScoreValues.length;
+      const totalCount = withData.reduce((sum, r) => sum + r.count, 0);
+      const weightedSum = withData.reduce((sum, r) => sum + r.avg * r.count, 0);
+      const avg = weightedSum / totalCount;
       return { value: Math.round(avg * 100) / 100, previousValue: null, changePercent: null };
     }
   });
@@ -42479,78 +44502,84 @@ function useScoresMetrics() {
   return reactQuery.useQuery({
     queryKey: ["metrics", "scores-card", datePreset, customRange],
     queryFn: async () => {
+      const filters = {
+        timestamp: { start: timestamp.start, end: timestamp.end }
+      };
       const scorersMap = await client.listScorers();
       const scorerIds = Object.keys(scorersMap ?? {});
       if (scorerIds.length === 0) {
         return { summaryData: [], overTimeData: [], scorerNames: [], avgScore: null };
       }
-      const allResults = await Promise.all(
-        // Limited to 100 most recent scores per scorer; pagination not yet implemented
-        scorerIds.map((scorerId) => client.listScoresByScorerId({ scorerId, perPage: 100 }))
+      const summaryResults = await Promise.all(
+        scorerIds.map(async (scorerId) => {
+          const [avg, min, max, count] = await Promise.all([
+            client.getScoreAggregate({ scorerId, aggregation: "avg", filters }),
+            client.getScoreAggregate({ scorerId, aggregation: "min", filters }),
+            client.getScoreAggregate({ scorerId, aggregation: "max", filters }),
+            client.getScoreAggregate({ scorerId, aggregation: "count", filters })
+          ]);
+          return {
+            scorer: scorerId,
+            avg: avg.value ?? 0,
+            min: min.value ?? 0,
+            max: max.value ?? 0,
+            count: count.value ?? 0
+          };
+        })
       );
-      const startMs = timestamp.start.getTime();
-      const endMs = timestamp.end.getTime();
-      const allScores = [];
-      for (let i = 0; i < scorerIds.length; i++) {
-        const scores = allResults[i]?.scores ?? [];
-        for (const s of scores) {
-          const ts = new Date(s.createdAt).getTime();
-          if (ts >= startMs && ts <= endMs) {
-            allScores.push({
-              scorerId: scorerIds[i],
-              score: s.score,
-              createdAt: s.createdAt
-            });
-          }
-        }
-      }
-      if (allScores.length === 0) {
-        return { summaryData: [], overTimeData: [], scorerNames: [], avgScore: null };
-      }
-      const byScorer = /* @__PURE__ */ new Map();
-      for (const s of allScores) {
-        if (!byScorer.has(s.scorerId)) byScorer.set(s.scorerId, []);
-        byScorer.get(s.scorerId).push(s.score);
-      }
-      const summaryData = Array.from(byScorer.entries()).map(([scorer, vals]) => ({
-        scorer,
-        avg: vals.reduce((a, b) => a + b, 0) / vals.length,
-        min: Math.min(...vals),
-        max: Math.max(...vals),
-        count: vals.length
-      }));
+      const summaryData = summaryResults.filter((s) => s.count > 0);
       const scorerNames = summaryData.map((s) => s.scorer);
-      const avgScore = summaryData.reduce((s, d) => s + d.avg, 0) / summaryData.length;
-      const bucketMap = /* @__PURE__ */ new Map();
-      for (const s of allScores) {
-        const ts = new Date(s.createdAt);
-        const bucket = Math.floor(ts.getTime() / 36e5) * 36e5;
-        if (!bucketMap.has(bucket)) bucketMap.set(bucket, /* @__PURE__ */ new Map());
-        const scorerMap = bucketMap.get(bucket);
-        if (!scorerMap.has(s.scorerId)) scorerMap.set(s.scorerId, []);
-        scorerMap.get(s.scorerId).push(s.score);
+      if (summaryData.length === 0) {
+        return { summaryData: [], overTimeData: [], scorerNames: [], avgScore: null };
       }
-      const overTimeData = Array.from(bucketMap.entries()).sort(([a], [b]) => a - b).map(([bucket, scorerMap]) => {
-        const point = {
-          time: new Date(bucket).toLocaleTimeString("en-US", {
-            hour: "2-digit",
-            minute: "2-digit",
-            hour12: false
+      const totalWeighted = summaryData.reduce((s, d) => s + d.avg * d.count, 0);
+      const totalCount = summaryData.reduce((s, d) => s + d.count, 0);
+      const avgScore = totalCount ? Math.round(totalWeighted / totalCount * 100) / 100 : 0;
+      const interval = "1h";
+      const timeSeriesResults = await Promise.all(
+        scorerNames.map(
+          (scorerId) => client.getScoreTimeSeries({
+            scorerId,
+            interval,
+            aggregation: "avg",
+            filters
           })
-        };
-        for (const name of scorerNames) {
-          const vals = scorerMap.get(name);
-          if (vals && vals.length > 0) {
-            point[name] = +(vals.reduce((a, b) => a + b, 0) / vals.length).toFixed(2);
+        )
+      );
+      const bucketMap = /* @__PURE__ */ new Map();
+      const rangeSpansDays = timestamp.end.toDateString() !== timestamp.start.toDateString();
+      for (let i = 0; i < scorerNames.length; i++) {
+        const scorerId = scorerNames[i];
+        const series = timeSeriesResults[i]?.series ?? [];
+        for (const s of series) {
+          for (const point of s.points) {
+            const ts = new Date(point.timestamp);
+            const key = ts.toISOString();
+            if (!bucketMap.has(key)) {
+              bucketMap.set(key, {
+                time: rangeSpansDays ? ts.toLocaleString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  hour12: false
+                }) : ts.toLocaleTimeString("en-US", {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  hour12: false
+                })
+              });
+            }
+            bucketMap.get(key)[scorerId] = +point.value.toFixed(2);
           }
         }
-        return point;
-      });
+      }
+      const overTimeData = Array.from(bucketMap.entries()).sort(([a], [b]) => a.localeCompare(b)).map(([, point]) => point);
       return {
         summaryData,
         overTimeData,
         scorerNames,
-        avgScore: Math.round(avgScore * 100) / 100
+        avgScore
       };
     }
   });
@@ -42595,7 +44624,7 @@ function ScoresCard() {
         /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "over-time", children: "Over Time" }),
         /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "summary", children: "Summary" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "over-time", children: data.overTimeData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(MetricsLineChart, { data: data.overTimeData, series, yDomain: [0, 1] }) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No time series data yet" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "over-time", className: "pb-0", children: data.overTimeData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(MetricsLineChart, { data: data.overTimeData, series, yDomain: [0, 1] }) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No time series data yet" }) }),
       /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "summary", children: /* @__PURE__ */ jsxRuntime.jsx(
         MetricsDataTable,
         {
@@ -42733,7 +44762,7 @@ function HorizontalBars({
                       "div",
                       {
                         className: cn(
-                          "absolute inset-y-0",
+                          "absolute inset-y-0 opacity-40 dark:opacity-100",
                           si === 0 && "rounded-l",
                           isLastWithValue && "rounded-r"
                         ),
@@ -42749,7 +44778,7 @@ function HorizontalBars({
                   return /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
-                      className: "absolute inset-y-0 left-0 rounded",
+                      className: "absolute inset-y-0 left-0 rounded opacity-40 dark:opacity-100",
                       style: { width: `${pct}%`, backgroundColor: seg.color }
                     },
                     seg.label
@@ -43845,6 +45874,9 @@ function SpanScoreList({
     const score = scoresData?.scores?.find((s) => s?.id === scoreId);
     setSelectedScore(score);
     setDialogIsOpen(true);
+    if (traceId) {
+      navigate(`${computeTraceLink(traceId, spanId)}&tab=scores&scoreId=${encodeURIComponent(scoreId)}`);
+    }
   };
   if (isLoadingScoresData) {
     return /* @__PURE__ */ jsxRuntime.jsx(EntryListSkeleton, { columns: traceScoresListColumns });
@@ -46697,9 +48729,11 @@ function DatasetItemContent({ item }) {
   const inputDisplay = item?.input ? JSON.stringify(item.input, null, 2) : "null";
   const groundTruthDisplay = item?.groundTruth ? JSON.stringify(item.groundTruth, null, 2) : "null";
   const metadataDisplay = item?.metadata ? JSON.stringify(item.metadata, null, 2) : "null";
+  const trajectoryDisplay = item?.expectedTrajectory ? JSON.stringify(item.expectedTrajectory, null, 2) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs(Sections, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SideDialog.CodeSection, { title: "Input", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileInputIcon, {}), codeStr: inputDisplay }),
     /* @__PURE__ */ jsxRuntime.jsx(SideDialog.CodeSection, { title: "Ground Truth", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileOutputIcon, {}), codeStr: groundTruthDisplay }),
+    trajectoryDisplay && /* @__PURE__ */ jsxRuntime.jsx(SideDialog.CodeSection, { title: "Expected Trajectory", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RouteIcon, {}), codeStr: trajectoryDisplay }),
     /* @__PURE__ */ jsxRuntime.jsx(SideDialog.CodeSection, { title: "Metadata", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TagIcon, {}), codeStr: metadataDisplay })
   ] });
 }
@@ -46722,6 +48756,8 @@ function EditModeContent({
   setGroundTruthValue,
   metadataValue,
   setMetadataValue,
+  trajectoryValue,
+  setTrajectoryValue,
   validationErrors,
   onSave,
   onCancel,
@@ -46751,6 +48787,18 @@ function EditModeContent({
         ),
         validationErrors?.field === "groundTruth" && /* @__PURE__ */ jsxRuntime.jsx(ValidationErrors$1, { field: "groundTruth", errors: validationErrors.errors })
       ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Expected Trajectory (JSON, optional)" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CodeEditor,
+          {
+            value: trajectoryValue,
+            onChange: setTrajectoryValue,
+            showCopyButton: false,
+            className: "min-h-[80px]"
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Metadata (JSON, optional)" }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -46968,6 +49016,7 @@ function DatasetItemPanel({ datasetId, item, items, onItemChange, onClose }) {
   const [inputValue, setInputValue] = React.useState("");
   const [groundTruthValue, setGroundTruthValue] = React.useState("");
   const [metadataValue, setMetadataValue] = React.useState("");
+  const [trajectoryValue, setTrajectoryValue] = React.useState("");
   const [validationErrors, setValidationErrors] = React.useState(null);
   const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
   React.useEffect(() => {
@@ -46975,6 +49024,7 @@ function DatasetItemPanel({ datasetId, item, items, onItemChange, onClose }) {
       setInputValue(JSON.stringify(item.input, null, 2));
       setGroundTruthValue(item.groundTruth ? JSON.stringify(item.groundTruth, null, 2) : "");
       setMetadataValue(item.metadata ? JSON.stringify(item.metadata, null, 2) : "");
+      setTrajectoryValue(item.expectedTrajectory ? JSON.stringify(item.expectedTrajectory, null, 2) : "");
       setIsEditing(false);
       setShowDeleteConfirm(false);
       setValidationErrors(null);
@@ -47020,13 +49070,23 @@ function DatasetItemPanel({ datasetId, item, items, onItemChange, onClose }) {
         return;
       }
     }
+    let parsedTrajectory = null;
+    if (trajectoryValue.trim()) {
+      try {
+        parsedTrajectory = JSON.parse(trajectoryValue);
+      } catch {
+        toast.error("Expected Trajectory must be valid JSON");
+        return;
+      }
+    }
     try {
       await updateItem.mutateAsync({
         datasetId,
         itemId: item.id,
         input: parsedInput,
         groundTruth: parsedGroundTruth,
-        metadata: parsedMetadata
+        metadata: parsedMetadata,
+        expectedTrajectory: parsedTrajectory
       });
       toast.success("Item updated successfully");
       setIsEditing(false);
@@ -47044,6 +49104,7 @@ function DatasetItemPanel({ datasetId, item, items, onItemChange, onClose }) {
     setInputValue(JSON.stringify(item.input, null, 2));
     setGroundTruthValue(item.groundTruth ? JSON.stringify(item.groundTruth, null, 2) : "");
     setMetadataValue(item.metadata ? JSON.stringify(item.metadata, null, 2) : "");
+    setTrajectoryValue(item.expectedTrajectory ? JSON.stringify(item.expectedTrajectory, null, 2) : "");
     setIsEditing(false);
     setValidationErrors(null);
   };
@@ -47099,6 +49160,8 @@ function DatasetItemPanel({ datasetId, item, items, onItemChange, onClose }) {
           setGroundTruthValue: handleGroundTruthValueChange,
           metadataValue,
           setMetadataValue,
+          trajectoryValue,
+          setTrajectoryValue,
           validationErrors,
           onSave: handleSave,
           onCancel: handleCancel,
@@ -47226,6 +49289,7 @@ function DatasetItemsList({
               /* @__PURE__ */ jsxRuntime.jsx(ItemList.IdCell, { id: listItem.id }),
               /* @__PURE__ */ jsxRuntime.jsx(ItemList.TextCell, { className: "font-mono", children: listItem.input }),
               columns.some((col) => col.name === "groundTruth") && /* @__PURE__ */ jsxRuntime.jsx(ItemList.TextCell, { className: "font-mono", children: listItem.groundTruth }),
+              columns.some((col) => col.name === "trajectory") && /* @__PURE__ */ jsxRuntime.jsx(ItemList.TextCell, { children: item.expectedTrajectory ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", children: Array.isArray(item.expectedTrajectory?.steps) ? `${item.expectedTrajectory.steps.length} steps` : "Yes" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral4", children: "—" }) }),
               /* @__PURE__ */ jsxRuntime.jsx(ItemList.DateCell, { date: listItem.date, withTime: true })
             ]
           }
@@ -47689,6 +49753,7 @@ function DatasetItems({
     { name: "id", label: "ID", size: "5rem" },
     { name: "input", label: "Input", size: "1fr" },
     ...!featuredItem ? [{ name: "groundTruth", label: "Ground Truth", size: "1fr" }] : [],
+    ...!featuredItem ? [{ name: "trajectory", label: "Trajectory", size: "6rem" }] : [],
     { name: "date", label: "Created", size: "10rem" }
   ];
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -49155,6 +51220,7 @@ function ValidationErrors({ field, errors }) {
 function AddItemDialog({ datasetId, open, onOpenChange, onSuccess }) {
   const [input, setInput] = React.useState("{}");
   const [groundTruth, setGroundTruth] = React.useState("");
+  const [expectedTrajectory, setExpectedTrajectory] = React.useState("");
   const [validationErrors, setValidationErrors] = React.useState(null);
   const { addItem } = useDatasetMutations();
   const handleSubmit = async (e) => {
@@ -49175,16 +51241,27 @@ function AddItemDialog({ datasetId, open, onOpenChange, onSuccess }) {
         return;
       }
     }
+    let parsedTrajectory;
+    if (expectedTrajectory.trim()) {
+      try {
+        parsedTrajectory = JSON.parse(expectedTrajectory);
+      } catch {
+        toast.error("Expected Trajectory must be valid JSON");
+        return;
+      }
+    }
     try {
       await addItem.mutateAsync({
         datasetId,
         input: parsedInput,
-        groundTruth: parsedGroundTruth
+        groundTruth: parsedGroundTruth,
+        expectedTrajectory: parsedTrajectory
       });
       toast.success("Item added successfully");
       setValidationErrors(null);
       setInput("{}");
       setGroundTruth("");
+      setExpectedTrajectory("");
       onOpenChange(false);
       onSuccess?.();
     } catch (error) {
@@ -49211,6 +51288,7 @@ function AddItemDialog({ datasetId, open, onOpenChange, onSuccess }) {
   const handleCancel = () => {
     setInput("{}");
     setGroundTruth("");
+    setExpectedTrajectory("");
     setValidationErrors(null);
     onOpenChange(false);
   };
@@ -49235,6 +51313,18 @@ function AddItemDialog({ datasetId, open, onOpenChange, onSuccess }) {
         ),
         validationErrors?.field === "groundTruth" && /* @__PURE__ */ jsxRuntime.jsx(ValidationErrors, { field: "groundTruth", errors: validationErrors.errors })
       ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "item-trajectory", children: "Expected Trajectory (JSON, optional)" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CodeEditor,
+          {
+            value: expectedTrajectory,
+            onChange: setExpectedTrajectory,
+            showCopyButton: false,
+            className: "min-h-[80px]"
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 pt-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", onClick: handleCancel, children: "Cancel" }),
         /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", variant: "primary", disabled: addItem.isPending, children: addItem.isPending ? "Adding..." : "Add Item" })
@@ -53723,72 +55813,6 @@ function EvaluationDatasetsList({
   ] });
 }
 
-const statusBadgeVariants = cva(
-  // Base styles
-  "inline-flex items-center gap-1.5 rounded-full text-ui-xs font-medium transition-colors duration-normal",
-  {
-    variants: {
-      variant: {
-        success: "bg-accent1Dark text-accent1",
-        warning: "bg-accent6Dark text-accent6",
-        error: "bg-accent2Dark text-accent2",
-        info: "bg-accent5Dark text-accent5",
-        neutral: "bg-surface4 text-neutral4"
-      },
-      size: {
-        sm: "px-1.5 py-0.5 text-ui-xs",
-        md: "px-2 py-1 text-ui-xs",
-        lg: "px-2.5 py-1 text-ui-sm"
-      },
-      withDot: {
-        true: "",
-        false: ""
-      },
-      pulse: {
-        true: "",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      variant: "neutral",
-      size: "md",
-      withDot: false,
-      pulse: false
-    }
-  }
-);
-const dotVariants = cva("rounded-full", {
-  variants: {
-    variant: {
-      success: "bg-accent1",
-      warning: "bg-accent6",
-      error: "bg-accent2",
-      info: "bg-accent5",
-      neutral: "bg-neutral3"
-    },
-    size: {
-      sm: "w-1 h-1",
-      md: "w-1.5 h-1.5",
-      lg: "w-2 h-2"
-    },
-    pulse: {
-      true: "animate-pulse",
-      false: ""
-    }
-  },
-  defaultVariants: {
-    variant: "neutral",
-    size: "md",
-    pulse: false
-  }
-});
-function StatusBadge({ className, variant, size, withDot, pulse, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(statusBadgeVariants({ variant, size, withDot, pulse }), className), ...props, children: [
-    withDot && /* @__PURE__ */ jsxRuntime.jsx("span", { className: dotVariants({ variant, size, pulse }) }),
-    children
-  ] });
-}
-
 const COLUMNS$1 = "auto 1fr auto auto auto auto auto auto auto";
 function formatDate(dateStr) {
   if (!dateStr) return "—";
@@ -54175,8 +56199,12 @@ function EvaluationScorersList({ scorers, isLoading, error }) {
         const description = scorer.scorer.config?.description || "";
         const agentCount = scorer.agentIds?.length ?? 0;
         const workflowCount = scorer.workflowIds?.length ?? 0;
+        const isTrajectory = scorer.scorer.config?.type === "trajectory";
         return /* @__PURE__ */ jsxRuntime.jsxs(EntityList.RowLink, { to: paths.scorerLink(scorer.id), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(EntityList.NameCell, { children: name }),
+          /* @__PURE__ */ jsxRuntime.jsx(EntityList.NameCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
+            name,
+            isTrajectory && /* @__PURE__ */ jsxRuntime.jsx(Chip, { size: "small", color: "purple", children: "trajectory" })
+          ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx(EntityList.DescriptionCell, { children: description }),
           /* @__PURE__ */ jsxRuntime.jsx(EntityList.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: scorer.source === "code" ? "info" : "default", children: scorer.source }) }),
           /* @__PURE__ */ jsxRuntime.jsx(EntityList.TextCell, { className: "text-center", children: agentCount || "" }),
@@ -57757,6 +59785,15 @@ exports.Avatar = Avatar;
 exports.Badge = Badge;
 exports.BranchIcon = BranchIcon;
 exports.Breadcrumb = Breadcrumb$1;
+exports.BrowserSessionProvider = BrowserSessionProvider;
+exports.BrowserSidebarTab = BrowserSidebarTab;
+exports.BrowserThumbnail = BrowserThumbnail;
+exports.BrowserToolCallHistory = BrowserToolCallHistory;
+exports.BrowserToolCallItem = BrowserToolCallItem;
+exports.BrowserToolCallsProvider = BrowserToolCallsProvider;
+exports.BrowserViewFrame = BrowserViewFrame;
+exports.BrowserViewHeader = BrowserViewHeader;
+exports.BrowserViewPanel = BrowserViewPanel;
 exports.Button = Button;
 exports.ButtonWithTooltip = ButtonWithTooltip;
 exports.ButtonsGroup = ButtonsGroup;
@@ -58209,6 +60246,8 @@ exports.highlight = highlight;
 exports.inputVariants = inputVariants;
 exports.isActive = isActive;
 exports.isAuthenticated = isAuthenticated;
+exports.isBrowserTool = isBrowserTool;
+exports.isBrowserToolError = isBrowserToolError;
 exports.isRule = isRule;
 exports.isRuleGroup = isRuleGroup;
 exports.isValidLogsDatePreset = isValidLogsDatePreset;
@@ -58267,6 +60306,10 @@ exports.useAllIntegrationTools = useAllIntegrationTools;
 exports.useAllModels = useAllModels;
 exports.useAuthCapabilities = useAuthCapabilities;
 exports.useAvgScoreKpiMetrics = useAvgScoreKpiMetrics;
+exports.useBrowserSession = useBrowserSession;
+exports.useBrowserStream = useBrowserStream;
+exports.useBrowserToolCalls = useBrowserToolCalls;
+exports.useBrowserToolCallsSafe = useBrowserToolCallsSafe;
 exports.useCSVParser = useCSVParser;
 exports.useCanCreateAgent = useCanCreateAgent;
 exports.useCloneThread = useCloneThread;