feat: streaming eval results, explorer canvas, tool call tracking

- Stream eval item results in real-time via WebSocket instead of waiting
  for the entire eval set to complete before updating the grid
- Add ExplorerCanvas component for visualizing entrypoint graphs in the
  explorer tab system
- Extract ELK layout logic into reusable elkLayout.ts module
- Track tool calls by unique ID instead of tool name to handle duplicate
  tool invocations correctly
- Preserve state.db across hot reloads, ignore __uipath/ dir in watcher
- Improve agent context compaction with orphaned tool result handling
- Add closeable tool detail panel in agent messages

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: cristipufu

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "uipath-dev"
-version = "0.0.72"
+version = "0.0.73"
 description = "UiPath Developer Console"
 readme = { file = "README.md", content-type = "text/markdown" }
 requires-python = ">=3.11"

src/uipath/dev/server/__init__.py

@@ -189,8 +189,13 @@ async def reload_factory(self) -> None:
             del sys.modules[name]
         logger.debug("Flushed %d user modules", len(to_remove))
 
-        # Recreate factory
+        # Recreate factory — preserve state file across reloads so the dev
+        # server doesn't delete state.db while other processes may use it.
         self.runtime_factory = self.factory_creator()
+        try:
+            self.runtime_factory.context.keep_state_file = True  # type: ignore[attr-defined]
+        except AttributeError:
+            pass
         self.run_service.runtime_factory = self.runtime_factory
         await self.run_service.apply_factory_settings()
         self.reload_pending = False
@@ -342,12 +347,12 @@ def _on_agent_event(self, event: Any) -> None:
                 cm.broadcast_agent_thinking(sid, content)
             case PlanUpdated(session_id=sid, items=items):
                 cm.broadcast_agent_plan(sid, items)
-            case ToolStarted(session_id=sid, tool=tool, args=args):
-                cm.broadcast_agent_tool_use(sid, tool, args)
+            case ToolStarted(session_id=sid, tool_call_id=tcid, tool=tool, args=args):
+                cm.broadcast_agent_tool_use(sid, tcid, tool, args)
             case ToolCompleted(
-                session_id=sid, tool=tool, result=result, is_error=is_error
+                session_id=sid, tool_call_id=tcid, tool=tool, result=result, is_error=is_error
             ):
-                cm.broadcast_agent_tool_result(sid, tool, result, is_error)
+                cm.broadcast_agent_tool_result(sid, tcid, tool, result, is_error)
             case ToolApprovalRequired(
                 session_id=sid, tool_call_id=tcid, tool=tool, args=args
             ):

src/uipath/dev/server/frontend/src/App.tsx

@@ -27,7 +27,6 @@ import EvaluatorsView from "./components/evaluators/EvaluatorDetail";
 import CreateEvaluatorView from "./components/evaluators/CreateEvaluatorView";
 import ExplorerSidebar from "./components/explorer/ExplorerSidebar";
 import FileEditor from "./components/explorer/FileEditor";
-import StateDbViewer from "./components/explorer/StateDbViewer";
 import AgentChatSidebar from "./components/agent/AgentChatSidebar";
 import { useExplorerStore } from "./store/useExplorerStore";
 
@@ -68,7 +67,6 @@ export default function App() {
     evaluatorId,
     evaluatorFilter,
     explorerFile,
-    stateDbTable,
     navigate,
   } = useHashRoute();
 
@@ -344,7 +342,6 @@ export default function App() {
   // --- Render main content based on section ---
   const renderMainContent = () => {
     if (section === "explorer") {
-      if (stateDbTable !== null) return <StateDbViewer table={stateDbTable} />;
       if (explorerTabs.length > 0 || explorerFile) return <FileEditor />;
       return (
         <div className="flex items-center justify-center h-full text-[var(--text-muted)]">

src/uipath/dev/server/frontend/src/components/agent/AgentMessage.tsx

@@ -206,7 +206,7 @@ function ToolChip({ tc, active, onClick }: { tc: AgentToolCall; active: boolean;
   );
 }
 
-function ToolDetailPanel({ tc }: { tc: AgentToolCall }) {
+function ToolDetailPanel({ tc, onClose }: { tc: AgentToolCall; onClose: () => void }) {
   const hasResult = tc.result !== undefined;
   const hasArgs = tc.args != null && Object.keys(tc.args).length > 0;
   const diff = isEditFileDiff(tc);
@@ -232,6 +232,18 @@ function ToolDetailPanel({ tc }: { tc: AgentToolCall }) {
             Error
           </span>
         )}
+        <button
+          onClick={onClose}
+          className="ml-auto shrink-0 flex items-center justify-center w-5 h-5 rounded cursor-pointer"
+          style={{ background: "none", border: "none", color: "var(--text-muted)" }}
+          onMouseEnter={(e) => { e.currentTarget.style.color = "var(--text-primary)"; }}
+          onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-muted)"; }}
+        >
+          <svg width="10" height="10" viewBox="0 0 10 10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+            <line x1="2" y1="2" x2="8" y2="8" />
+            <line x1="8" y1="2" x2="2" y2="8" />
+          </svg>
+        </button>
       </div>
 
       {/* Args + Result stacked */}
@@ -328,7 +340,7 @@ function ToolCard({ message }: Props) {
         </div>
         {/* Detail panel below chips */}
         {expandedIdx !== null && calls[expandedIdx] && (
-          <ToolDetailPanel tc={calls[expandedIdx]} />
+          <ToolDetailPanel tc={calls[expandedIdx]} onClose={() => setExpandedIdx(null)} />
         )}
       </div>
     </div>

src/uipath/dev/server/frontend/src/components/evals/EvalRunResults.tsx

@@ -12,13 +12,13 @@ interface Props {
   itemName?: string | null;
 }
 
-function formatScore(score: number | null): string {
-  if (score === null) return "-";
+function formatScore(score: number | null | undefined): string {
+  if (score == null) return "-";
   return `${Math.round(score * 100)}%`;
 }
 
-function scoreColor(score: number | null): string {
-  if (score === null) return "var(--text-muted)";
+function scoreColor(score: number | null | undefined): string {
+  if (score == null) return "var(--text-muted)";
   const pct = score * 100;
   if (pct >= 80) return "var(--success)";
   if (pct >= 50) return "var(--warning)";
@@ -71,6 +71,7 @@ export default function EvalRunResults({ evalRunId, itemName }: Props) {
 
   const storeRun = useEvalStore((s) => s.evalRuns[evalRunId]);
   const evaluators = useEvalStore((s) => s.evaluators);
+  const streamingItems = useEvalStore((s) => s.streamingResults[evalRunId]);
 
   useEffect(() => {
     setLoading(true);
@@ -97,9 +98,12 @@ export default function EvalRunResults({ evalRunId, itemName }: Props) {
   // Auto-select first completed item as results come in (when no item is in route)
   useEffect(() => {
     if (itemName || !detail?.results) return;
-    const first = detail.results.find((r) => r.status === "completed") ?? detail.results[0];
+    const results = streamingItems
+      ? detail.results.map((r) => streamingItems[r.name] ?? r)
+      : detail.results;
+    const first = results.find((r) => r.status === "completed") ?? results[0];
     if (first) navigate(`#/evals/runs/${evalRunId}/${encodeURIComponent(first.name)}`);
-  }, [detail?.results]);
+  }, [detail?.results, streamingItems]);
 
   // --- Row resize (item list height) ---
   const onRowResizeStart = useCallback((e: React.MouseEvent | React.TouchEvent) => {
@@ -191,8 +195,21 @@ export default function EvalRunResults({ evalRunId, itemName }: Props) {
   const run = storeRun ?? detail;
   const status = statusStyles[run.status] ?? statusStyles.pending;
   const isRunning = run.status === "running";
-  const evaluatorIds = Object.keys(run.evaluator_scores ?? {});
-  const selectedItem = detail.results.find((r) => r.name === selectedItemName) ?? null;
+  // Derive evaluator IDs from run scores (set on completion) or from first streamed item
+  const evaluatorIds = Object.keys(run.evaluator_scores ?? {}).length > 0
+    ? Object.keys(run.evaluator_scores)
+    : Object.keys(
+        streamingItems
+          ? Object.values(streamingItems).find((r) => Object.keys(r.scores).length > 0)?.scores ?? {}
+          : {},
+      );
+
+  // Merge streaming item results over the fetched detail results
+  const mergedResults = streamingItems
+    ? detail.results.map((r) => streamingItems[r.name] ?? r)
+    : detail.results;
+
+  const selectedItem = mergedResults.find((r) => r.name === selectedItemName) ?? null;
   const selectedTraces = (selectedItem?.traces ?? []).map((t) => ({ ...t, run_id: "" }));
 
   return (
@@ -279,7 +296,7 @@ export default function EvalRunResults({ evalRunId, itemName }: Props) {
           </div>
           {/* Scrollable item rows */}
           <div className="flex-1 overflow-y-auto">
-            {detail.results.map((item: EvalItemResult) => {
+            {mergedResults.map((item: EvalItemResult) => {
               const isPending = item.status === "pending";
               const isFailed = item.status === "failed";
               const isSelected = item.name === selectedItemName;
@@ -337,7 +354,7 @@ export default function EvalRunResults({ evalRunId, itemName }: Props) {
                 </button>
               );
             })}
-            {detail.results.length === 0 && (
+            {mergedResults.length === 0 && (
               <div className="flex items-center justify-center py-8 text-[var(--text-muted)] text-xs">
                 {isRunning ? "Waiting for results..." : "No results"}
               </div>

src/uipath/dev/server/frontend/src/components/explorer/ExplorerCanvas.tsx

@@ -0,0 +1,208 @@
+import { useEffect, useRef, useState } from "react";
+import ReactFlow, {
+  Background,
+  Controls,
+  MiniMap,
+  useNodesState,
+  useEdgesState,
+  type ReactFlowInstance,
+} from "reactflow";
+import "reactflow/dist/style.css";
+import { getEntrypointGraph } from "../../api/client";
+import { useRunStore } from "../../store/useRunStore";
+import { runElkLayout } from "../graph/elkLayout";
+import StartNode from "../graph/nodes/StartNode";
+import EndNode from "../graph/nodes/EndNode";
+import ModelNode from "../graph/nodes/ModelNode";
+import ToolNode from "../graph/nodes/ToolNode";
+import GroupNode from "../graph/nodes/GroupNode";
+import DefaultNode from "../graph/nodes/DefaultNode";
+import ElkEdge from "../graph/edges/ElkEdge";
+
+const nodeTypes = {
+  startNode: StartNode,
+  endNode: EndNode,
+  modelNode: ModelNode,
+  toolNode: ToolNode,
+  groupNode: GroupNode,
+  defaultNode: DefaultNode,
+};
+
+const edgeTypes = { elk: ElkEdge };
+
+export default function ExplorerCanvas() {
+  const entrypoints = useRunStore((s) => s.entrypoints);
+  const [selectedEp, setSelectedEp] = useState<string | null>(null);
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [loading, setLoading] = useState(true);
+  const [graphUnavailable, setGraphUnavailable] = useState(false);
+  const layoutRef = useRef(0);
+  const lastGraphHash = useRef<string>("");
+  const rfInstance = useRef<ReactFlowInstance | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Auto-select first entrypoint
+  useEffect(() => {
+    if (entrypoints.length > 0 && (!selectedEp || !entrypoints.includes(selectedEp))) {
+      setSelectedEp(entrypoints[0]);
+    }
+  }, [entrypoints, selectedEp]);
+
+  // Fetch graph and run ELK layout when entrypoint changes or entrypoints refresh
+  useEffect(() => {
+    if (!selectedEp) return;
+
+    const layoutId = ++layoutRef.current;
+    // Only show loading spinner on first load (no graph rendered yet)
+    const isFirstLoad = !lastGraphHash.current;
+    if (isFirstLoad) setLoading(true);
+    setGraphUnavailable(false);
+
+    getEntrypointGraph(selectedEp)
+      .then(async (graphData) => {
+        if (layoutRef.current !== layoutId) return;
+        if (!graphData.nodes.length) {
+          setGraphUnavailable(true);
+          return;
+        }
+        // Skip re-layout if the graph structure hasn't changed
+        const hash = JSON.stringify(graphData);
+        if (hash === lastGraphHash.current) {
+          return;
+        }
+        lastGraphHash.current = hash;
+        const { nodes: laidNodes, edges: laidEdges } =
+          await runElkLayout(graphData);
+        if (layoutRef.current !== layoutId) return;
+        setNodes(laidNodes);
+        setEdges(laidEdges);
+        setTimeout(() => {
+          rfInstance.current?.fitView({ padding: 0.1, duration: 200 });
+        }, 100);
+      })
+      .catch(() => {
+        if (layoutRef.current === layoutId) setGraphUnavailable(true);
+      })
+      .finally(() => {
+        if (layoutRef.current === layoutId) setLoading(false);
+      });
+  }, [selectedEp, entrypoints, setNodes, setEdges]);
+
+  // Fit view on container resize
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => {
+      rfInstance.current?.fitView({ padding: 0.1, duration: 200 });
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [loading, graphUnavailable]);
+
+  if (loading) {
+    return (
+      <div
+        className="flex items-center justify-center h-full"
+        style={{ color: "var(--text-muted)" }}
+      >
+        Loading graph...
+      </div>
+    );
+  }
+
+  if (graphUnavailable) {
+    return (
+      <div
+        className="flex flex-col items-center justify-center h-full gap-4"
+        style={{ color: "var(--text-muted)" }}
+      >
+        <svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect x="38" y="10" width="44" height="24" rx="6" stroke="currentColor" strokeWidth="1.5" strokeDasharray="4 3" opacity="0.4" />
+          <line x1="60" y1="34" x2="60" y2="46" stroke="currentColor" strokeWidth="1.5" strokeDasharray="4 3" opacity="0.3" />
+          <rect x="12" y="46" width="44" height="24" rx="6" stroke="currentColor" strokeWidth="1.5" strokeDasharray="4 3" opacity="0.3" />
+          <rect x="64" y="46" width="44" height="24" rx="6" stroke="currentColor" strokeWidth="1.5" strokeDasharray="4 3" opacity="0.3" />
+          <line x1="60" y1="46" x2="34" y2="46" stroke="currentColor" strokeWidth="1.5" strokeDasharray="4 3" opacity="0.3" />
+          <line x1="60" y1="46" x2="86" y2="46" stroke="currentColor" strokeWidth="1.5" strokeDasharray="4 3" opacity="0.3" />
+          <line x1="34" y1="70" x2="34" y2="82" stroke="currentColor" strokeWidth="1.5" strokeDasharray="4 3" opacity="0.3" />
+          <line x1="86" y1="70" x2="86" y2="82" stroke="currentColor" strokeWidth="1.5" strokeDasharray="4 3" opacity="0.3" />
+          <line x1="34" y1="82" x2="60" y2="82" stroke="currentColor" strokeWidth="1.5" strokeDasharray="4 3" opacity="0.3" />
+          <line x1="86" y1="82" x2="60" y2="82" stroke="currentColor" strokeWidth="1.5" strokeDasharray="4 3" opacity="0.3" />
+          <line x1="60" y1="82" x2="60" y2="86" stroke="currentColor" strokeWidth="1.5" strokeDasharray="4 3" opacity="0.3" />
+          <rect x="38" y="86" width="44" height="24" rx="6" stroke="currentColor" strokeWidth="1.5" strokeDasharray="4 3" opacity="0.4" />
+        </svg>
+        <span className="text-xs">No graph schema available</span>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={containerRef} className="h-full explorer-canvas">
+      <style>{`
+        .explorer-canvas .react-flow__handle {
+          opacity: 0 !important;
+          width: 0 !important;
+          height: 0 !important;
+          min-width: 0 !important;
+          min-height: 0 !important;
+          border: none !important;
+          pointer-events: none !important;
+        }
+        .explorer-canvas .react-flow__edges {
+          overflow: visible !important;
+          z-index: 1 !important;
+        }
+      `}</style>
+      {entrypoints.length > 1 && (
+        <div style={{
+          position: "absolute",
+          top: 8,
+          left: 8,
+          zIndex: 10,
+        }}>
+          <select
+            value={selectedEp ?? ""}
+            onChange={(e) => setSelectedEp(e.target.value)}
+            style={{
+              background: "var(--bg-secondary)",
+              color: "var(--text-primary)",
+              border: "1px solid var(--node-border)",
+              borderRadius: 6,
+              padding: "4px 8px",
+              fontSize: 12,
+            }}
+          >
+            {entrypoints.map((ep) => (
+              <option key={ep} value={ep}>{ep}</option>
+            ))}
+          </select>
+        </div>
+      )}
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        onInit={(instance) => { rfInstance.current = instance; }}
+        fitView
+        proOptions={{ hideAttribution: true }}
+        nodesDraggable={false}
+        nodesConnectable={false}
+        elementsSelectable={false}
+      >
+        <Background color="var(--bg-tertiary)" gap={16} />
+        <Controls showInteractive={false} />
+        <MiniMap
+          nodeColor={(n) => {
+            if (n.type === "groupNode") return "var(--bg-tertiary)";
+            return "var(--node-border)";
+          }}
+          nodeStrokeWidth={0}
+          style={{ background: "var(--bg-secondary)", width: 120, height: 80 }}
+        />
+      </ReactFlow>
+    </div>
+  );
+}