From f8aa67fc3a3351b4ea7bf207e83bb4fbd480c542 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 21 Jul 2026 02:51:58 +0530
Subject: [PATCH 1/3] (fix)workflow ux: fixed width for title

---
 frontend/src/agents/AgentPageHeader.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/agents/AgentPageHeader.tsx b/frontend/src/agents/AgentPageHeader.tsx
index 38439801..96aa5f85 100644
--- a/frontend/src/agents/AgentPageHeader.tsx
+++ b/frontend/src/agents/AgentPageHeader.tsx
@@ -90,8 +90,8 @@ export default function AgentPageHeader({
           <BreadcrumbSeparator />
           <BreadcrumbItem>
             {currentPage === 'overview' ? (
-              <BreadcrumbPage className="max-w-[40ch] truncate">
-                {displayName}
+              <BreadcrumbPage title={displayName} className="w-[16ch] truncate">
+                {displayName}              
               </BreadcrumbPage>
             ) : (
               <BreadcrumbLink asChild>

From 19648a98fcc2b2bd653cc1ccc4470c98c03dd177 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 21 Jul 2026 03:12:33 +0530
Subject: [PATCH 2/3] (fix)worflow: ux, close the wrkflw settings on lclick
 outside even if the canva clicked

---
 .../src/agents/workflow/WorkflowBuilder.tsx   | 32 +++++++------------
 1 file changed, 12 insertions(+), 20 deletions(-)

diff --git a/frontend/src/agents/workflow/WorkflowBuilder.tsx b/frontend/src/agents/workflow/WorkflowBuilder.tsx
index 8693d62e..e03d5d3f 100644
--- a/frontend/src/agents/workflow/WorkflowBuilder.tsx
+++ b/frontend/src/agents/workflow/WorkflowBuilder.tsx
@@ -100,6 +100,7 @@ import {
 import WorkflowPreview from './WorkflowPreview';
 
 import type { Model } from '../../models/types';
+import { useOutsideAlerter } from '@/hooks';
 
 const PRIMARY_ACTION_SPINNER_DELAY_MS = 180;
 
@@ -774,26 +775,20 @@ function WorkflowBuilderInner() {
     showPreview,
   ]);
 
-  const handlePanelBackdropClick = useCallback(() => {
+  const handlePaneClick = useCallback(() => {
     setShowNodeConfig(false);
     setSelectedNode(null);
+    setShowWorkflowSettings(false);
   }, []);
 
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (
-        workflowSettingsRef.current &&
-        !workflowSettingsRef.current.contains(e.target as HTMLElement)
-      ) {
-        setShowWorkflowSettings(false);
-      }
-    };
-    if (showWorkflowSettings) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () =>
-        document.removeEventListener('mousedown', handleClickOutside);
-    }
-  }, [showWorkflowSettings]);
+  useOutsideAlerter(
+    workflowSettingsRef,
+    () => {
+      setShowWorkflowSettings(false);
+    },
+    [],
+    false,
+  );
 
   useEffect(() => {
     const loadModelsAndTools = async () => {
@@ -1940,6 +1935,7 @@ function WorkflowBuilderInner() {
               onDrop={onDrop}
               onDragOver={onDragOver}
               onNodeClick={handleNodeClick}
+              onPaneClick={handlePaneClick}
               onNodeDragStart={snapshotBeforeCanvasChange}
               onSelectionDragStart={snapshotBeforeCanvasChange}
               nodeTypes={nodeTypes}
@@ -1979,10 +1975,6 @@ function WorkflowBuilderInner() {
 
             {showNodeConfig && selectedNode && (
               <>
-                <div
-                  className="absolute inset-0 z-10"
-                  onClick={handlePanelBackdropClick}
-                />
                 <div className="border-border bg-card shadow-modal absolute top-4 right-4 z-20 w-96 rounded-2xl border">
                   <div className="border-border flex items-center justify-between border-b p-4">
                     <h3 className="font-semibold text-gray-900 dark:text-white">

From 4cf529476fe2e720005eba5e8ebaa4f89fbb0605 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 22 Jul 2026 18:31:57 +0530
Subject: [PATCH 3/3] (fix)workflow: stable outside-click handler, drop
 trailing whitespace

Address Copilot review on #2600:
- pass a useCallback handler to useOutsideAlerter so the global mousedown
  listener isn't torn down/re-added on every WorkflowBuilder render
- remove trailing spaces after {displayName} in AgentPageHeader

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/agents/AgentPageHeader.tsx          | 2 +-
 frontend/src/agents/workflow/WorkflowBuilder.tsx | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/agents/AgentPageHeader.tsx b/frontend/src/agents/AgentPageHeader.tsx
index 96aa5f85..6d693f58 100644
--- a/frontend/src/agents/AgentPageHeader.tsx
+++ b/frontend/src/agents/AgentPageHeader.tsx
@@ -91,7 +91,7 @@ export default function AgentPageHeader({
           <BreadcrumbItem>
             {currentPage === 'overview' ? (
               <BreadcrumbPage title={displayName} className="w-[16ch] truncate">
-                {displayName}              
+                {displayName}
               </BreadcrumbPage>
             ) : (
               <BreadcrumbLink asChild>
diff --git a/frontend/src/agents/workflow/WorkflowBuilder.tsx b/frontend/src/agents/workflow/WorkflowBuilder.tsx
index e03d5d3f..d821d9f8 100644
--- a/frontend/src/agents/workflow/WorkflowBuilder.tsx
+++ b/frontend/src/agents/workflow/WorkflowBuilder.tsx
@@ -781,11 +781,13 @@ function WorkflowBuilderInner() {
     setShowWorkflowSettings(false);
   }, []);
 
+  const handleCloseWorkflowSettings = useCallback(() => {
+    setShowWorkflowSettings(false);
+  }, []);
+
   useOutsideAlerter(
     workflowSettingsRef,
-    () => {
-      setShowWorkflowSettings(false);
-    },
+    handleCloseWorkflowSettings,
     [],
     false,
   );