refactor(frontend): improve new builder performance and UX with position handling and store optimizations (#11397)

This PR introduces several performance and user experience improvements
to the new builder, focusing on node positioning, state management
optimizations, and visual enhancements.

The new builder had several issues that impacted developer experience
and runtime performance:
- Inefficient store subscriptions causing unnecessary re-renders
- No intelligent node positioning when adding blocks via clicking
- useEffect dependencies causing potential stale closures
- Width constraints missing on form fields affecting layout consistency

### Changes 🏗️

#### Performance Optimizations
- **Store subscription optimization**: Added `useShallow` from zustand
to prevent unnecessary re-renders in
[NodeContainer](file:///app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeContainer.tsx)
and
[NodeExecutionBadge](file:///app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeExecutionBadge.tsx)
- **useEffect cleanup**: Split combined useEffects in
[useFlow](file:///app/(platform)/build/hooks/useFlow.ts) for clearer
dependencies and better performance
- **Memoization**: Added `memo` to
[NewControlPanel](file:///app/(platform)/build/components/NewControlPanel/NewControlPanel.tsx)
to prevent unnecessary re-renders
- **Callback optimization**: Wrapped `onDrop` handler in `useCallback`
to prevent recreation on every render

#### UX Improvements  
- **Smart node positioning**: Implemented `findFreePosition` algorithm
in [helper.ts](file:///app/(platform)/build/components/helper.ts) that:
  - Automatically finds non-overlapping positions for new nodes
  - Tries right, left, then below existing nodes
  - Falls back to far-right position if no space available
- **Click-to-add blocks**: Added click handlers to blocks that:
  - Add the block at an intelligent position
- Automatically pan viewport to center the new node with smooth
animation
- **Visual feedback**: Added loading state with spinner icon for agent
blocks during fetch
- **Form field width**: Added `max-w-[340px]` constraint to prevent
overflow in
[FieldTemplate](file:///components/renderers/input-renderer/templates/FieldTemplate.tsx)


### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Create from scratch and execute an agent with at least 3 blocks
  - [x] Test adding blocks via drag-and-drop ensures no overlapping
  - [x] Test adding blocks via click positions them intelligently
  - [x] Test viewport animation when adding blocks via click
- [x] Import an agent from file upload, and confirm it executes
correctly
  - [x] Test loading spinner appears when adding agents from "My Agents"
- [x] Verify performance improvements by checking React DevTools for
reduced re-renders

Author: Abhi1992002

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

@@ -1,13 +1,20 @@
+import { parseAsString, useQueryStates } from "nuqs";
 import { AgentOutputs } from "./components/AgentOutputs/AgentOutputs";
 import { RunGraph } from "./components/RunGraph/RunGraph";
 import { ScheduleGraph } from "./components/ScheduleGraph/ScheduleGraph";
+import { memo } from "react";
 
-export const BuilderActions = () => {
+export const BuilderActions = memo(() => {
+  const [{ flowID }] = useQueryStates({
+    flowID: parseAsString,
+  });
   return (
-    <div className="absolute bottom-4 left-[50%] z-[100] flex -translate-x-1/2 items-center gap-4">
-      <AgentOutputs />
-      <RunGraph />
-      <ScheduleGraph />
+    <div className="absolute bottom-4 left-[50%] z-[100] flex -translate-x-1/2 items-center gap-4 rounded-full bg-white p-2 px-4 shadow-lg">
+      <AgentOutputs flowID={flowID} />
+      <RunGraph flowID={flowID} />
+      <ScheduleGraph flowID={flowID} />
     </div>
   );
-};
+});
+
+BuilderActions.displayName = "BuilderActions";

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

@@ -1,26 +1,22 @@
-import { Button } from "@/components/atoms/Button/Button";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/atoms/Tooltip/BaseTooltip";
-import { LogOutIcon } from "lucide-react";
+import { BuilderActionButton } from "../BuilderActionButton";
+import { BookOpenIcon } from "@phosphor-icons/react";
 
-export const AgentOutputs = () => {
+export const AgentOutputs = ({ flowID }: { flowID: string | null }) => {
   return (
     <>
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
             {/* Todo: Implement Agent Outputs */}
-            <Button
-              variant="primary"
-              size="large"
-              className={"relative min-w-0 border-none text-lg"}
-            >
-              <LogOutIcon className="size-6" />
-            </Button>
+            <BuilderActionButton disabled={!flowID}>
+              <BookOpenIcon className="size-6" />
+            </BuilderActionButton>
           </TooltipTrigger>
           <TooltipContent>
             <p>Agent Outputs</p>

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

@@ -0,0 +1,37 @@
+import { Button } from "@/components/atoms/Button/Button";
+import { ButtonProps } from "@/components/atoms/Button/helpers";
+import { cn } from "@/lib/utils";
+import { CircleNotchIcon } from "@phosphor-icons/react";
+
+export const BuilderActionButton = ({
+  children,
+  className,
+  isLoading,
+  ...props
+}: ButtonProps & { isLoading?: boolean }) => {
+  return (
+    <Button
+      variant="icon"
+      size={"small"}
+      className={cn(
+        "relative h-12 w-12 min-w-0 text-lg",
+        "bg-gradient-to-br from-zinc-50 to-zinc-200",
+        "border border-zinc-200",
+        "shadow-[inset_0_3px_0_0_rgba(255,255,255,0.5),0_2px_4px_0_rgba(0,0,0,0.2)]",
+        "dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),0_2px_4px_0_rgba(0,0,0,0.4)]",
+        "hover:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.5),0_1px_2px_0_rgba(0,0,0,0.2)]",
+        "active:shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.2)]",
+        "transition-all duration-150",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      {!isLoading ? (
+        children
+      ) : (
+        <CircleNotchIcon className="size-6 animate-spin" />
+      )}
+    </Button>
+  );
+};

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

@@ -1,24 +1,24 @@
-import { Button } from "@/components/atoms/Button/Button";
-import { PlayIcon } from "lucide-react";
 import { useRunGraph } from "./useRunGraph";
 import { useGraphStore } from "@/app/(platform)/build/stores/graphStore";
 import { useShallow } from "zustand/react/shallow";
-import { StopIcon } from "@phosphor-icons/react";
+import { PlayIcon, StopIcon } from "@phosphor-icons/react";
 import { cn } from "@/lib/utils";
 import { RunInputDialog } from "../RunInputDialog/RunInputDialog";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@/components/atoms/Tooltip/BaseTooltip";
+import { BuilderActionButton } from "../BuilderActionButton";
 
-export const RunGraph = () => {
+export const RunGraph = ({ flowID }: { flowID: string | null }) => {
   const {
     handleRunGraph,
     handleStopGraph,
-    isSaving,
     openRunInputDialog,
     setOpenRunInputDialog,
+    isExecutingGraph,
+    isSaving,
   } = useRunGraph();
   const isGraphRunning = useGraphStore(
     useShallow((state) => state.isGraphRunning),
@@ -28,20 +28,21 @@ export const RunGraph = () => {
     <>
       <Tooltip>
         <TooltipTrigger asChild>
-          <Button
-            variant="primary"
-            size="large"
+          <BuilderActionButton
             className={cn(
-              "relative min-w-0 border-none bg-gradient-to-r from-purple-500 to-pink-500 text-lg",
+              isGraphRunning &&
+                "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}
           >
-            {!isGraphRunning && !isSaving ? (
-              <PlayIcon className="size-6" />
+            {!isGraphRunning ? (
+              <PlayIcon className="size-6 drop-shadow-sm" />
             ) : (
-              <StopIcon className="size-6" />
+              <StopIcon className="size-6 drop-shadow-sm" />
             )}
-          </Button>
+          </BuilderActionButton>
         </TooltipTrigger>
         <TooltipContent>
           {isGraphRunning ? "Stop agent" : "Run agent"}

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

@@ -31,25 +31,26 @@ export const useRunGraph = () => {
       flowExecutionID: parseAsString,
     });
 
-  const { mutateAsync: executeGraph } = usePostV1ExecuteGraphAgent({
-    mutation: {
-      onSuccess: (response) => {
-        const { id } = response.data as GraphExecutionMeta;
-        setQueryStates({
-          flowExecutionID: id,
-        });
-      },
-      onError: (error) => {
-        setIsGraphRunning(false);
+  const { mutateAsync: executeGraph, isPending: isExecutingGraph } =
+    usePostV1ExecuteGraphAgent({
+      mutation: {
+        onSuccess: (response) => {
+          const { id } = response.data as GraphExecutionMeta;
+          setQueryStates({
+            flowExecutionID: id,
+          });
+        },
+        onError: (error) => {
+          setIsGraphRunning(false);
 
-        toast({
-          title: (error.detail as string) ?? "An unexpected error occurred.",
-          description: "An unexpected error occurred.",
-          variant: "destructive",
-        });
+          toast({
+            title: (error.detail as string) ?? "An unexpected error occurred.",
+            description: "An unexpected error occurred.",
+            variant: "destructive",
+          });
+        },
       },
-    },
-  });
+    });
 
   const { mutateAsync: stopGraph } = usePostV1StopGraphExecution({
     mutation: {
@@ -72,7 +73,6 @@ export const useRunGraph = () => {
     if (hasInputs() || hasCredentials()) {
       setOpenRunInputDialog(true);
     } else {
-      setIsGraphRunning(true);
       await executeGraph({
         graphId: flowID ?? "",
         graphVersion: flowVersion || null,
@@ -95,6 +95,7 @@ export const useRunGraph = () => {
     handleRunGraph,
     handleStopGraph,
     isSaving,
+    isExecutingGraph,
     openRunInputDialog,
     setOpenRunInputDialog,
   };

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

@@ -43,7 +43,6 @@ export const useRunInputDialog = ({
           setQueryStates({
             flowExecutionID: id,
           });
-          setIsGraphRunning(false);
         },
         onError: (error) => {
           setIsGraphRunning(false);
@@ -81,7 +80,6 @@ export const useRunInputDialog = ({
 
   const handleManualRun = () => {
     setIsOpen(false);
-    setIsGraphRunning(true);
     executeGraph({
       graphId: flowID ?? "",
       graphVersion: flowVersion || null,

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

@@ -1,4 +1,3 @@
-import { Button } from "@/components/atoms/Button/Button";
 import { ClockIcon } from "@phosphor-icons/react";
 import { RunInputDialog } from "../RunInputDialog/RunInputDialog";
 import { useScheduleGraph } from "./useScheduleGraph";
@@ -9,8 +8,9 @@ import {
   TooltipTrigger,
 } from "@/components/atoms/Tooltip/BaseTooltip";
 import { CronSchedulerDialog } from "../CronSchedulerDialog/CronSchedulerDialog";
+import { BuilderActionButton } from "../BuilderActionButton";
 
-export const ScheduleGraph = () => {
+export const ScheduleGraph = ({ flowID }: { flowID: string | null }) => {
   const {
     openScheduleInputDialog,
     setOpenScheduleInputDialog,
@@ -23,14 +23,12 @@ export const ScheduleGraph = () => {
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button
-              variant="primary"
-              size="large"
-              className={"relative min-w-0 border-none text-lg"}
+            <BuilderActionButton
               onClick={handleScheduleGraph}
+              disabled={!flowID}
             >
               <ClockIcon className="size-6" />
-            </Button>
+            </BuilderActionButton>
           </TooltipTrigger>
           <TooltipContent>
             <p>Schedule Graph</p>

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

@@ -1,4 +1,4 @@
-import { ReactFlow, Background, Controls } from "@xyflow/react";
+import { ReactFlow, Background } from "@xyflow/react";
 import NewControlPanel from "../../NewControlPanel/NewControlPanel";
 import CustomEdge from "../edges/CustomEdge";
 import { useFlow } from "./useFlow";
@@ -13,6 +13,7 @@ import { BuilderActions } from "../../BuilderActions/BuilderActions";
 import { RunningBackground } from "./components/RunningBackground";
 import { useGraphStore } from "../../../stores/graphStore";
 import { useCopyPaste } from "./useCopyPaste";
+import { CustomControls } from "./components/CustomControl";
 
 export const Flow = () => {
   const nodes = useNodeStore(useShallow((state) => state.nodes));
@@ -24,7 +25,8 @@ 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 } = useFlow();
+  const { onDragOver, onDrop, isFlowContentLoading, isLocked, setIsLocked } =
+    useFlow();
 
   // This hook is used for websocket realtime updates.
   useFlowRealtime();
@@ -42,8 +44,6 @@ export const Flow = () => {
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [handleCopyPaste]);
-
-  const { isFlowContentLoading } = useFlow();
   const { isGraphRunning } = useGraphStore();
   return (
     <div className="flex h-full w-full dark:bg-slate-900">
@@ -60,12 +60,15 @@ export const Flow = () => {
           minZoom={0.1}
           onDragOver={onDragOver}
           onDrop={onDrop}
+          nodesDraggable={!isLocked}
+          nodesConnectable={!isLocked}
+          elementsSelectable={!isLocked}
         >
           <Background />
-          <Controls />
+          <CustomControls setIsLocked={setIsLocked} isLocked={isLocked} />
           <NewControlPanel />
           <BuilderActions />
-          {isFlowContentLoading && <GraphLoadingBox />}
+          {<GraphLoadingBox flowContentLoading={isFlowContentLoading} />}
           {isGraphRunning && <RunningBackground />}
         </ReactFlow>
       </div>

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

@@ -0,0 +1,80 @@
+import { useReactFlow } from "@xyflow/react";
+import { Button } from "@/components/atoms/Button/Button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/atoms/Tooltip/BaseTooltip";
+import {
+  FrameCornersIcon,
+  MinusIcon,
+  PlusIcon,
+} from "@phosphor-icons/react/dist/ssr";
+import { LockIcon, LockOpenIcon } from "lucide-react";
+import { memo } from "react";
+
+export const CustomControls = memo(
+  ({
+    setIsLocked,
+    isLocked,
+  }: {
+    isLocked: boolean;
+    setIsLocked: (isLocked: boolean) => void;
+  }) => {
+    const { zoomIn, zoomOut, fitView } = useReactFlow();
+
+    const controls = [
+      {
+        icon: <PlusIcon className="size-4" />,
+        label: "Zoom In",
+        onClick: () => zoomIn(),
+        className: "h-10 w-10 border-none",
+      },
+      {
+        icon: <MinusIcon className="size-4" />,
+        label: "Zoom Out",
+        onClick: () => zoomOut(),
+        className: "h-10 w-10 border-none",
+      },
+      {
+        icon: <FrameCornersIcon className="size-4" />,
+        label: "Fit View",
+        onClick: () => fitView({ padding: 0.2, duration: 800, maxZoom: 1 }),
+        className: "h-10 w-10 border-none",
+      },
+      {
+        icon: !isLocked ? (
+          <LockOpenIcon className="size-4" />
+        ) : (
+          <LockIcon className="size-4" />
+        ),
+        label: "Toggle Lock",
+        onClick: () => setIsLocked(!isLocked),
+        className: `h-10 w-10 border-none ${isLocked ? "bg-zinc-100" : "bg-white"}`,
+      },
+    ];
+
+    return (
+      <div className="absolute bottom-4 left-4 z-10 flex flex-col items-center gap-2 rounded-full bg-white px-1 py-2 shadow-lg">
+        {controls.map((control, index) => (
+          <Tooltip key={index} delayDuration={300}>
+            <TooltipTrigger asChild>
+              <Button
+                variant="icon"
+                size={"small"}
+                onClick={control.onClick}
+                className={control.className}
+              >
+                {control.icon}
+                <span className="sr-only">{control.label}</span>
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="right">{control.label}</TooltipContent>
+          </Tooltip>
+        ))}
+      </div>
+    );
+  },
+);
+
+CustomControls.displayName = "CustomControls";