Fix Agent Flow toggle state sync (#5348)

frontend/src/pages/Admin/Agents/AgentFlows/FlowPanel.jsx

@@ -12,6 +12,7 @@ function ManageFlowMenu({ flow, onDelete }) {
   const navigate = useNavigate();
 
   async function deleteFlow() {
+    setOpen(false);
     if (
       !window.confirm(
         "Are you sure you want to delete this flow? This action cannot be undone."
@@ -28,6 +29,8 @@ function ManageFlowMenu({ flow, onDelete }) {
   }
 
   useEffect(() => {
+    if (!open) return;
+
     const handleClickOutside = (event) => {
       if (menuRef.current && !menuRef.current.contains(event.target)) {
         setOpen(false);
@@ -38,7 +41,7 @@ function ManageFlowMenu({ flow, onDelete }) {
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, []);
+  }, [open]);
 
   return (
     <div className="relative" ref={menuRef}>
@@ -71,23 +74,15 @@ function ManageFlowMenu({ flow, onDelete }) {
   );
 }
 
-export default function FlowPanel({ flow, toggleFlow, onDelete }) {
-  const [isActive, setIsActive] = useState(flow.active);
-
-  useEffect(() => {
-    setIsActive(flow.active);
-  }, [flow.uuid, flow.active]);
-
+export default function FlowPanel({ flow, toggleFlow, enabled, onDelete }) {
   const handleToggle = async () => {
     try {
       const { success, error } = await AgentFlows.toggleFlow(
         flow.uuid,
-        !isActive
+        !enabled
       );
       if (!success) throw new Error(error);
-      setIsActive(!isActive);
       toggleFlow(flow.uuid);
-      showToast("Flow status updated successfully", "success", { clear: true });
     } catch (error) {
       console.error("Failed to toggle flow:", error);
       showToast("Failed to toggle flow", "error", { clear: true });
@@ -106,7 +101,7 @@ export default function FlowPanel({ flow, toggleFlow, onDelete }) {
               </label>
             </div>
             <div className="flex items-center gap-x-2">
-              <Toggle size="lg" enabled={isActive} onChange={handleToggle} />
+              <Toggle size="lg" enabled={enabled} onChange={handleToggle} />
               <ManageFlowMenu flow={flow} onDelete={onDelete} />
             </div>
           </div>

frontend/src/pages/Admin/Agents/AgentFlows/index.jsx

@@ -5,6 +5,7 @@ export default function AgentFlowsList({
   flows = [],
   selectedFlow,
   handleClick,
+  activeFlowIds = [],
 }) {
   if (flows.length === 0) {
     return (
@@ -43,7 +44,7 @@ export default function AgentFlowsList({
           <div className="text-sm font-light">{flow.name}</div>
           <div className="flex items-center gap-x-2">
             <div className="text-sm text-theme-text-secondary font-medium">
-              {flow.active ? "On" : "Off"}
+              {activeFlowIds.includes(flow.uuid) ? "On" : "Off"}
             </div>
             <CaretRight
               size={14}

frontend/src/pages/Admin/Agents/index.jsx

@@ -111,7 +111,7 @@ export default function AdminAgents() {
         _preferences.settings?.disabled_agent_skills ?? []
       );
       setImportedSkills(_preferences.settings?.imported_agent_skills ?? []);
-      setActiveFlowIds(_preferences.settings?.active_agent_flows ?? []);
+      setActiveFlowIds(flows.filter((f) => f.active).map((f) => f.uuid));
       setAgentFlows(flows);
       setFileSystemAgentAvailable(fsAgentAvailable);
       setCreateFilesAgentAvailable(createFilesAvailable);
@@ -385,6 +385,7 @@ export default function AdminAgents() {
               flows={agentFlows}
               selectedFlow={selectedFlow}
               handleClick={handleFlowClick}
+              activeFlowIds={activeFlowIds}
             />
             <input
               type="hidden"
@@ -601,6 +602,7 @@ export default function AdminAgents() {
                 flows={agentFlows}
                 selectedFlow={selectedFlow}
                 handleClick={handleFlowClick}
+                activeFlowIds={activeFlowIds}
               />
 
               <MCPServerHeader