refactor(frontend): implement reviewer feedback - improve HITL architecture

Address reviewer suggestions for cleaner architecture:

**GraphStore Improvements:**
- Move graph execution status to centralized graphStore
- Derive isGraphRunning automatically from executionStatus
- Use consistent useQueryStates pattern instead of useSearchParams
- Remove prop drilling by letting components read from store directly

**Loading State Consistency:**
- Add missing isPending state to stopGraph operation in new builder
- New builder now has consistent loading states for both start/stop actions
- Matches behavior with new library page (both have proper loading feedback)

**Architecture Clean-up:**
- New builder: Uses graphStore for execution state ✓
- Legacy builder: Keeps existing local state approach ✓
- No mixed/duplicate state tracking between builders
- FloatingReviewsPanel reads execution status from store

**Benefits:**
- Zero prop drilling for execution status
- Consistent query state patterns across codebase
- Better UX with proper stop operation loading feedback
- Cleaner separation between new and legacy architectures
- Reusable execution state for future components

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: majdyz

autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunGraph/RunGraph.tsx

@@ -18,6 +18,7 @@ export const RunGraph = ({ flowID }: { flowID: string | null }) => {
     openRunInputDialog,
     setOpenRunInputDialog,
     isExecutingGraph,
+    isTerminatingGraph,
     isSaving,
   } = useRunGraph();
   const isGraphRunning = useGraphStore(
@@ -34,8 +35,8 @@ export const RunGraph = ({ flowID }: { flowID: string | null }) => {
                 "border-red-500 bg-gradient-to-br from-red-400 to-red-500 shadow-[inset_0_2px_0_0_rgba(255,255,255,0.5),0_2px_4px_0_rgba(0,0,0,0.2)]",
             )}
             onClick={isGraphRunning ? handleStopGraph : handleRunGraph}
-            disabled={!flowID || isExecutingGraph}
-            isLoading={isExecutingGraph || isSaving}
+            disabled={!flowID || isExecutingGraph || isTerminatingGraph}
+            isLoading={isExecutingGraph || isTerminatingGraph || isSaving}
           >
             {!isGraphRunning ? (
               <PlayIcon className="size-6 drop-shadow-sm" />

autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunGraph/useRunGraph.ts

@@ -15,9 +15,6 @@ export const useRunGraph = () => {
     showToast: false,
   });
   const { toast } = useToast();
-  const setIsGraphRunning = useGraphStore(
-    useShallow((state) => state.setIsGraphRunning),
-  );
   const hasInputs = useGraphStore(useShallow((state) => state.hasInputs));
   const hasCredentials = useGraphStore(
     useShallow((state) => state.hasCredentials),
@@ -34,15 +31,13 @@ export const useRunGraph = () => {
   const { mutateAsync: executeGraph, isPending: isExecutingGraph } =
     usePostV1ExecuteGraphAgent({
       mutation: {
-        onSuccess: (response) => {
+        onSuccess: (response: any) => {
           const { id } = response.data as GraphExecutionMeta;
           setQueryStates({
             flowExecutionID: id,
           });
         },
-        onError: (error) => {
-          setIsGraphRunning(false);
-
+        onError: (error: any) => {
           toast({
             title: (error.detail as string) ?? "An unexpected error occurred.",
             description: "An unexpected error occurred.",
@@ -52,20 +47,19 @@ export const useRunGraph = () => {
       },
     });
 
-  const { mutateAsync: stopGraph } = usePostV1StopGraphExecution({
-    mutation: {
-      onSuccess: () => {
-        setIsGraphRunning(false);
-      },
-      onError: (error) => {
-        toast({
-          title: (error.detail as string) ?? "An unexpected error occurred.",
-          description: "An unexpected error occurred.",
-          variant: "destructive",
-        });
+  const { mutateAsync: stopGraph, isPending: isTerminatingGraph } =
+    usePostV1StopGraphExecution({
+      mutation: {
+        onSuccess: () => {},
+        onError: (error: any) => {
+          toast({
+            title: (error.detail as string) ?? "An unexpected error occurred.",
+            description: "An unexpected error occurred.",
+            variant: "destructive",
+          });
+        },
       },
-    },
-  });
+    });
 
   const handleRunGraph = async () => {
     await saveGraph(undefined);
@@ -96,6 +90,7 @@ export const useRunGraph = () => {
     handleStopGraph,
     isSaving,
     isExecutingGraph,
+    isTerminatingGraph,
     openRunInputDialog,
     setOpenRunInputDialog,
   };

autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts

@@ -30,9 +30,6 @@ export const useRunInputDialog = ({
     flowID: parseAsString,
     flowVersion: parseAsInteger,
   });
-  const setIsGraphRunning = useGraphStore(
-    useShallow((state) => state.setIsGraphRunning),
-  );
   const { toast } = useToast();
 
   const { mutateAsync: executeGraph, isPending: isExecutingGraph } =
@@ -45,8 +42,6 @@ export const useRunInputDialog = ({
           });
         },
         onError: (error) => {
-          setIsGraphRunning(false);
-
           toast({
             title: (error.detail as string) ?? "An unexpected error occurred.",
             description: "An unexpected error occurred.",

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx

@@ -14,13 +14,14 @@ import { RunningBackground } from "./components/RunningBackground";
 import { useGraphStore } from "../../../stores/graphStore";
 import { useCopyPaste } from "./useCopyPaste";
 import { FloatingReviewsPanel } from "@/components/organisms/FloatingReviewsPanel/FloatingReviewsPanel";
-import { useSearchParams } from "next/navigation";
+import { parseAsString, useQueryStates } from "nuqs";
 import { CustomControls } from "./components/CustomControl";
 
 export const Flow = () => {
-  const searchParams = useSearchParams();
-  const flowExecutionID = searchParams.get("flowExecutionID") || undefined;
-  const graphId = searchParams.get("flowID") || undefined;
+  const [{ flowID, flowExecutionID }] = useQueryStates({
+    flowID: parseAsString,
+    flowExecutionID: parseAsString,
+  });
 
   const nodes = useNodeStore(useShallow((state) => state.nodes));
   const onNodesChange = useNodeStore(
@@ -31,17 +32,11 @@ export const Flow = () => {
   const { edges, onConnect, onEdgesChange } = useCustomEdge();
 
   // We use this hook to load the graph and convert them into custom nodes and edges.
-  const {
-    onDragOver,
-    onDrop,
-    isFlowContentLoading,
-    isLocked,
-    setIsLocked,
-    executionStatus: initialExecutionStatus,
-  } = useFlow();
+  const { onDragOver, onDrop, isFlowContentLoading, isLocked, setIsLocked } =
+    useFlow();
 
   // This hook is used for websocket realtime updates.
-  const { executionStatus: realtimeExecutionStatus } = useFlowRealtime();
+  useFlowRealtime();
 
   // Copy/paste functionality
   const handleCopyPaste = useCopyPaste();
@@ -56,7 +51,9 @@ export const Flow = () => {
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [handleCopyPaste]);
-  const { isGraphRunning } = useGraphStore();
+  const isGraphRunning = useGraphStore(
+    useShallow((state) => state.isGraphRunning),
+  );
   return (
     <div className="flex h-full w-full dark:bg-slate-900">
       <div className="relative flex-1">
@@ -84,11 +81,7 @@ export const Flow = () => {
           {isGraphRunning && <RunningBackground />}
         </ReactFlow>
       </div>
-      <FloatingReviewsPanel
-        executionId={flowExecutionID}
-        graphId={graphId}
-        executionStatus={realtimeExecutionStatus ?? initialExecutionStatus}
-      />
+      <FloatingReviewsPanel executionId={flowExecutionID || undefined} />
     </div>
   );
 };

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.ts

@@ -28,9 +28,6 @@ export const useFlow = () => {
   const updateNodeExecutionResult = useNodeStore(
     useShallow((state) => state.updateNodeExecutionResult),
   );
-  const setIsGraphRunning = useGraphStore(
-    useShallow((state) => state.setIsGraphRunning),
-  );
   const setGraphSchemas = useGraphStore(
     useShallow((state) => state.setGraphSchemas),
   );
@@ -126,15 +123,6 @@ export const useFlow = () => {
     }
   }, [graph?.links, addLinks]);
 
-  // update graph running status
-  useEffect(() => {
-    const isRunning =
-      executionDetails?.status === AgentExecutionStatus.RUNNING ||
-      executionDetails?.status === AgentExecutionStatus.QUEUED;
-
-    setIsGraphRunning(isRunning);
-  }, [executionDetails?.status, customNodes]);
-
   // update node execution status in nodes
   useEffect(() => {
     if (
@@ -182,7 +170,6 @@ export const useFlow = () => {
       useEdgeStore.getState().setEdges([]);
       useGraphStore.getState().reset();
       useEdgeStore.getState().resetEdgeBeads();
-      setIsGraphRunning(false);
     };
   }, []);
 
@@ -228,6 +215,5 @@ export const useFlow = () => {
     onDrop,
     isLocked,
     setIsLocked,
-    executionStatus: executionDetails?.status,
   };
 };

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlowRealtime.ts

@@ -1,6 +1,5 @@
 // In this hook, I am only keeping websocket related code.
 
-import { useState } from "react";
 import { GraphExecutionID } from "@/lib/autogpt-server-api";
 import { useBackendAPI } from "@/lib/autogpt-server-api/context";
 import { parseAsString, useQueryStates } from "nuqs";
@@ -14,17 +13,14 @@ import { useEdgeStore } from "../../../stores/edgeStore";
 
 export const useFlowRealtime = () => {
   const api = useBackendAPI();
-  const [executionStatus, setExecutionStatus] = useState<
-    AgentExecutionStatus | undefined
-  >(undefined);
   const updateNodeExecutionResult = useNodeStore(
     useShallow((state) => state.updateNodeExecutionResult),
   );
   const updateStatus = useNodeStore(
     useShallow((state) => state.updateNodeStatus),
   );
-  const setIsGraphRunning = useGraphStore(
-    useShallow((state) => state.setIsGraphRunning),
+  const setGraphExecutionStatus = useGraphStore(
+    useShallow((state) => state.setGraphExecutionStatus),
   );
   const updateEdgeBeads = useEdgeStore(
     useShallow((state) => state.updateEdgeBeads),
@@ -61,12 +57,7 @@ export const useFlowRealtime = () => {
           return;
         }
 
-        const isRunning =
-          graphExecution.status === AgentExecutionStatus.RUNNING ||
-          graphExecution.status === AgentExecutionStatus.QUEUED;
-
-        setIsGraphRunning(isRunning);
-        setExecutionStatus(graphExecution.status as AgentExecutionStatus);
+        setGraphExecutionStatus(graphExecution.status as AgentExecutionStatus);
       },
     );
 
@@ -98,5 +89,5 @@ export const useFlowRealtime = () => {
     };
   }, [api, flowExecutionID, resetEdgeBeads]);
 
-  return { executionStatus };
+  return {};
 };

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/Flow/Flow.tsx

@@ -1029,8 +1029,6 @@ const FlowEditor: React.FC<{
       )}
       <FloatingReviewsPanel
         executionId={flowExecutionID || undefined}
-        graphId={flowID || undefined}
-        executionStatus={graphExecutionStatus as AgentExecutionStatus}
         className="fixed bottom-24 right-4"
       />
       <Suspense fallback={null}>

autogpt_platform/frontend/src/app/(platform)/build/stores/graphStore.ts

@@ -1,8 +1,10 @@
 import { create } from "zustand";
+import { AgentExecutionStatus } from "@/app/api/__generated__/models/agentExecutionStatus";
 
 interface GraphStore {
+  graphExecutionStatus: AgentExecutionStatus | undefined;
   isGraphRunning: boolean;
-  setIsGraphRunning: (isGraphRunning: boolean) => void;
+  setGraphExecutionStatus: (status: AgentExecutionStatus | undefined) => void;
 
   inputSchema: Record<string, any> | null;
   credentialsInputSchema: Record<string, any> | null;
@@ -21,12 +23,20 @@ interface GraphStore {
 }
 
 export const useGraphStore = create<GraphStore>((set, get) => ({
+  graphExecutionStatus: undefined,
   isGraphRunning: false,
   inputSchema: null,
   credentialsInputSchema: null,
   outputSchema: null,
 
-  setIsGraphRunning: (isGraphRunning: boolean) => set({ isGraphRunning }),
+  setGraphExecutionStatus: (status: AgentExecutionStatus | undefined) => {
+    set({
+      graphExecutionStatus: status,
+      isGraphRunning:
+        status === AgentExecutionStatus.RUNNING ||
+        status === AgentExecutionStatus.QUEUED,
+    });
+  },
 
   setGraphSchemas: (inputSchema, credentialsInputSchema, outputSchema) =>
     set({ inputSchema, credentialsInputSchema, outputSchema }),
@@ -48,6 +58,7 @@ export const useGraphStore = create<GraphStore>((set, get) => ({
 
   reset: () =>
     set({
+      graphExecutionStatus: undefined,
       isGraphRunning: false,
       inputSchema: null,
       credentialsInputSchema: null,

autogpt_platform/frontend/src/components/organisms/FloatingReviewsPanel/FloatingReviewsPanel.tsx

@@ -6,21 +6,21 @@ import { ClockIcon, XIcon } from "@phosphor-icons/react";
 import { cn } from "@/lib/utils";
 import { Text } from "@/components/atoms/Text/Text";
 import { AgentExecutionStatus } from "@/app/api/__generated__/models/agentExecutionStatus";
+import { useGraphStore } from "@/app/(platform)/build/stores/graphStore";
 
 interface FloatingReviewsPanelProps {
   executionId?: string;
-  graphId?: string;
-  executionStatus?: AgentExecutionStatus;
   className?: string;
 }
 
 export function FloatingReviewsPanel({
   executionId,
-  executionStatus,
   className,
 }: FloatingReviewsPanelProps) {
   const [isOpen, setIsOpen] = useState(false);
 
+  const executionStatus = useGraphStore((state) => state.graphExecutionStatus);
+
   const { pendingReviews, isLoading, refetch } = usePendingReviewsForExecution(
     executionId || "",
   );