Merge pull request #99 from UiPath/feat/streaming-evals-explorer-canvas

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

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,16 @@ 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/agent/AgentStatePanel.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, useRef } from "react";
 import { useAgentStore } from "../../store/useAgentStore";
 import { getAgentSessionRawState } from "../../api/agent-client";
 import type { AgentRawState, AgentTraceSpan, TraceMessage } from "../../types/agent";
@@ -68,6 +68,7 @@ export default function AgentStatePanel() {
         <Pill text={`${fmtTok(total)} tok`} />
         <StatusDot status={data.status} />
         <div className="flex-1" />
+        <CopyJsonButton data={data} />
         <button onClick={refresh}
           className="text-[11px] px-2 py-0.5 rounded cursor-pointer"
           style={{ background: "var(--bg-hover)", color: "var(--text-secondary)", border: "none" }}>
@@ -129,6 +130,23 @@ function StatusDot({ status }: { status: string }) {
     </span>
   );
 }
+function CopyJsonButton({ data }: { data: AgentRawState }) {
+  const [copied, setCopied] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(JSON.stringify(data.traces, null, 2));
+    setCopied(true);
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setCopied(false), 2000);
+  };
+  return (
+    <button onClick={handleCopy}
+      className="text-[11px] px-2 py-0.5 rounded cursor-pointer"
+      style={{ background: "var(--bg-hover)", color: copied ? "var(--success)" : "var(--text-secondary)", border: "none" }}>
+      {copied ? "Copied!" : "Copy JSON"}
+    </button>
+  );
+}
 
 // ─── Top-level collapsible (system prompt, tools) ───────────────────
 function TopSection({ label, children }: { label: string; children: React.ReactNode }) {

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>