feat: setup view redesign with persistent state events

pyproject.toml

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

src/uipath/dev/models/data.py

@@ -38,6 +38,8 @@ class StateData:
 
     run_id: str
     node_name: str
+    payload: dict[str, Any] | None = None
+    timestamp: datetime = field(default_factory=datetime.now)
 
 
 @dataclass

src/uipath/dev/models/execution.py

@@ -11,7 +11,7 @@
 from uipath.runtime.errors import UiPathErrorContract
 
 from uipath.dev.models.chat import ChatEvents
-from uipath.dev.models.data import LogData, TraceData
+from uipath.dev.models.data import LogData, StateData, TraceData
 
 
 class ExecutionMode(Enum):
@@ -43,6 +43,7 @@ def __init__(
         self.status = "pending"  # pending, running, completed, failed, suspended
         self.traces: list[TraceData] = []
         self.logs: list[LogData] = []
+        self.states: list[StateData] = []
         self.error: UiPathErrorContract | None = None
         self.breakpoints: list[str] = []
         self.breakpoint_node: str | None = None

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

@@ -5,6 +5,7 @@ import { listRuns, listEntrypoints, getRun } from "./api/client";
 import { useHashRoute } from "./hooks/useHashRoute";
 import Sidebar from "./components/layout/Sidebar";
 import NewRunPanel from "./components/runs/NewRunPanel";
+import SetupView from "./components/runs/SetupView";
 import RunDetailsPanel from "./components/runs/RunDetailsPanel";
 
 export default function App() {
@@ -19,8 +20,9 @@ export default function App() {
     setLogs,
     setChatMessages,
     setEntrypoints,
+    setStateEvents,
   } = useRunStore();
-  const { view, runId: routeRunId, tab, navigate } = useHashRoute();
+  const { view, runId: routeRunId, setupEntrypoint, setupMode, navigate } = useHashRoute();
 
   // Sync route runId → store selection
   useEffect(() => {
@@ -74,6 +76,17 @@ export default function App() {
         };
       });
       setChatMessages(selectedRunId, chatMsgs);
+      // Load persisted state events
+      if (detail.states && detail.states.length > 0) {
+        setStateEvents(
+          selectedRunId,
+          detail.states.map((s) => ({
+            node_name: s.node_name,
+            timestamp: new Date(s.timestamp).getTime(),
+            payload: s.payload,
+          })),
+        );
+      }
     };
 
     // Fetch full run details (includes fresh status in case we missed run.updated events)
@@ -92,7 +105,7 @@ export default function App() {
       clearTimeout(retryTimer);
       ws.unsubscribe(selectedRunId);
     };
-  }, [selectedRunId, ws, upsertRun, setTraces, setLogs, setChatMessages]);
+  }, [selectedRunId, ws, upsertRun, setTraces, setLogs, setChatMessages, setStateEvents]);
 
   const handleRunCreated = (runId: string) => {
     navigate(`#/runs/${runId}/traces`);
@@ -108,12 +121,6 @@ export default function App() {
     navigate("#/new");
   };
 
-  const handleTabChange = (newTab: "traces" | "output") => {
-    if (selectedRunId) {
-      navigate(`#/runs/${selectedRunId}/${newTab}`);
-    }
-  };
-
   const selectedRun = selectedRunId ? runs[selectedRunId] : null;
 
   return (
@@ -126,9 +133,16 @@ export default function App() {
       />
       <main className="flex-1 overflow-hidden bg-[var(--bg-primary)]">
         {view === "new" ? (
-          <NewRunPanel onRunCreated={handleRunCreated} />
+          <NewRunPanel />
+        ) : view === "setup" && setupEntrypoint && setupMode ? (
+          <SetupView
+            entrypoint={setupEntrypoint}
+            mode={setupMode}
+            ws={ws}
+            onRunCreated={handleRunCreated}
+          />
         ) : selectedRun ? (
-          <RunDetailsPanel run={selectedRun} ws={ws} activeTab={tab} onTabChange={handleTabChange} />
+          <RunDetailsPanel run={selectedRun} ws={ws} />
         ) : (
           <div className="flex items-center justify-center h-full text-[var(--text-muted)]">
             Select a run or create a new one

src/uipath/dev/server/frontend/src/components/graph/GraphPanel.tsx

@@ -343,9 +343,10 @@ interface Props {
   runId: string;
   breakpointNode?: string | null;
   onBreakpointChange?: (breakpoints: string[]) => void;
+  fitViewTrigger?: number;
 }
 
-export default function GraphPanel({ entrypoint, traces, runId, breakpointNode, onBreakpointChange }: Props) {
+export default function GraphPanel({ entrypoint, traces, runId, breakpointNode, onBreakpointChange, fitViewTrigger }: Props) {
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
   const [loading, setLoading] = useState(true);
@@ -562,6 +563,13 @@ export default function GraphPanel({ entrypoint, traces, runId, breakpointNode,
     return () => clearTimeout(t);
   }, [runId]);
 
+  // Fit view when parent container is resized (drag handles)
+  useEffect(() => {
+    if (fitViewTrigger) {
+      rfInstance.current?.fitView({ padding: 0.1, duration: 200 });
+    }
+  }, [fitViewTrigger]);
+
   // Update node status from traces
   useEffect(() => {
     const statusMap = nodeStatusMap();