@cognizant-ai-lab/ui-common 1.5.1 → 1.7.0

package/dist/components/Common/MUIAlert.js

@@ -30,14 +30,13 @@ const StyledAlert = styled(Alert)({
     },
 });
 // #endregion: Types
-export const MUIAlert = ({ children, closeable = false, id, severity, sx }) => {
+export const MUIAlert = ({ children, closeable = false, id, onClose, severity, sx }) => {
     const [alertOpen, setAlertOpen] = useState(true);
     const handleClose = () => {
         setAlertOpen(false);
+        onClose?.();
     };
-    return (_jsx(Collapse, { id: `${id}-collapse`, in: alertOpen, children: _jsx(StyledAlert, { action: closeable && (_jsx(IconButton, { "aria-label": "close", color: "inherit", id: `${id}-icon-button`, onClick: () => {
-                    setAlertOpen(false);
-                }, size: "small", sx: {
+    return (_jsx(Collapse, { id: `${id}-collapse`, in: alertOpen, children: _jsx(StyledAlert, { action: closeable && (_jsx(IconButton, { "aria-label": "close", color: "inherit", id: `${id}-icon-button`, onClick: handleClose, size: "small", sx: {
                     bottom: "2px",
                     position: "relative",
                 }, children: _jsx(CloseIcon, { fontSize: "inherit", id: `${id}-close-icon` }) })), id: id, onClose: closeable ? handleClose : undefined, severity: severity, sx: sx, children: children }) }));

package/dist/components/MultiAgentAccelerator/AgentFlow.d.ts

@@ -39,4 +39,5 @@ export interface AgentFlowProps {
         timestamp: number;
     }>>>;
 }
+export declare const DOCK_BANNER_AUTO_DISMISS_MS = 5000;
 export declare const AgentFlow: FC<AgentFlowProps>;

package/dist/components/MultiAgentAccelerator/AgentFlow.js

@@ -20,6 +20,7 @@ import CloseIcon from "@mui/icons-material/Close";
 import EditIcon from "@mui/icons-material/Edit";
 import HubOutlinedIcon from "@mui/icons-material/HubOutlined";
 import ScatterPlotOutlinedIcon from "@mui/icons-material/ScatterPlotOutlined";
+import Backdrop from "@mui/material/Backdrop";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import CircularProgress from "@mui/material/CircularProgress";
@@ -48,11 +49,15 @@ import { useTempNetworksStore } from "../../state/TemporaryNetworks.js";
 import { usePalette } from "../../Theme/Palettes.js";
 import { getZIndex } from "../../utils/zIndexLayers.js";
 import { chatMessageFromChunk } from "../AgentChat/Common/Utils.js";
+import { MUIAlert } from "../Common/MUIAlert.js";
 import { NotificationType, sendNotification } from "../Common/notification.js";
 // #endregion: Types
 // #region: Constants
 // Timeout for thought bubbles is set to 10 seconds
 const THOUGHT_BUBBLE_TIMEOUT_MS = 10_000;
+// How long the dock'sstatus banner stays visible before auto-dismissing. Error banners persist until dismissed.
+// Exported for tests.
+export const DOCK_BANNER_AUTO_DISMISS_MS = 5_000;
 // #endregion: Constants
 const DOCK_PROMPT_PLACEHOLDER = "Describe a change to the network";
 // #region: Helpers
@@ -240,6 +245,45 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
     const [dockPrompt, setDockPrompt] = useState("");
     const [isDockStreaming, setIsDockStreaming] = useState(false);
     const dockAbortControllerRef = useRef(null);
+    // Stop-confirm overlay state: null = not shown, "confirming" = abort dialog open.
+    const [stopState, setStopState] = useState(null);
+    // Inline status banner shown above the dock header after an apply succeeds, is cancelled, or fails.
+    const [dockBanner, setDockBanner] = useState(null);
+    const bannerTimeoutRef = useRef(null);
+    // Clear the banner auto-dismiss timer on unmount.
+    useEffect(() => {
+        return () => {
+            clearTimeout(bannerTimeoutRef.current);
+        };
+    }, []);
+    const handleDismissBanner = useCallback(() => {
+        clearTimeout(bannerTimeoutRef.current);
+        setDockBanner(null);
+    }, []);
+    // Show a dock banner. Success/cancel banners auto-dismiss; error banners persist until dismissed.
+    const showDockBanner = useCallback((banner) => {
+        clearTimeout(bannerTimeoutRef.current);
+        setDockBanner(banner);
+        if (banner.severity !== "error") {
+            bannerTimeoutRef.current = setTimeout(() => setDockBanner(null), DOCK_BANNER_AUTO_DISMISS_MS);
+        }
+    }, []);
+    const handleStopClick = useCallback(() => {
+        setStopState("confirming");
+    }, []);
+    const handleKeepApplying = useCallback(() => {
+        setStopState(null);
+    }, []);
+    const handleStopAndDiscard = useCallback(() => {
+        dockAbortControllerRef.current?.abort();
+        dockAbortControllerRef.current = null;
+        setStopState(null);
+        showDockBanner({
+            severity: "info",
+            title: "Applying cancelled.",
+            detail: "Nothing was changed. Your prompt is restored below.",
+        });
+    }, [showDockBanner]);
     const handleNodeClick = useCallback((_event, node) => {
         // Popup is only available for temporary networks.
         if (!isTemporaryNetwork)
@@ -267,11 +311,18 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
         setIsPopupOpen(false);
         setIsSavingAgent(false);
     }, []);
-    /** Applies the networks returned by the designer: upserts them and triggers navigation if needed. */
-    const applyNetworkSaveResult = useCallback((agentName, newNetworksFromSave, currentAgentNetworkName) => {
+    /**
+     * Applies the networks returned by the designer: upserts them and triggers navigation if needed.
+     * Returns true when a matching reservation was applied, false (and surfaces an error banner) otherwise.
+     */
+    const applyNetworkSaveResult = useCallback((newNetworksFromSave, currentAgentNetworkName) => {
         if (newNetworksFromSave.length === 0) {
-            sendNotification(NotificationType.error, `Failed to update network "${agentName}".`, "The network designer did not return a reservation. Please try again.");
-            return;
+            showDockBanner({
+                severity: "error",
+                title: "Failed to apply network change.",
+                detail: "The network designer did not return a reservation. Please try again.",
+            });
+            return false;
         }
         const replacement = newNetworksFromSave.find((n) => n.agentNetworkName === currentAgentNetworkName);
         if (replacement) {
@@ -280,12 +331,16 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
                 useAgentChatHistoryStore.getState().copyHistory(networkId, replacement.agentInfo.agent_name);
                 onNetworkReplaced(networkId, replacement.agentInfo.agent_name);
             }
+            return true;
         }
-        else {
-            // Reservations came back but none matched the current network — surface this to the user.
-            sendNotification(NotificationType.error, `Failed to update network "${agentName}".`, "A reservation was returned but did not match the current network. Please try again.");
-        }
-    }, [networkId, onNetworkReplaced]);
+        // Reservations came back but none matched the current network — surface this in the dock banner.
+        showDockBanner({
+            severity: "error",
+            title: "Failed to apply network change.",
+            detail: "A reservation was returned but did not match the current network. Please try again.",
+        });
+        return false;
+    }, [networkId, onNetworkReplaced, showDockBanner]);
     const handleDockApply = useCallback(async () => {
         if (!dockPrompt.trim() || !neuroSanURL || !currentUser)
             return;
@@ -303,17 +358,27 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
         }, 120_000); // 2 min timeout
         try {
             const newNetworks = await streamNetworkDesignerPrompt(neuroSanURL, controller.signal, dockPrompt, currentDefinition, currentTempNetwork?.agentNetworkName, currentUser);
-            applyNetworkSaveResult(dockPrompt, newNetworks, currentTempNetwork?.agentNetworkName);
-            setDockPrompt("");
+            const applied = applyNetworkSaveResult(newNetworks, currentTempNetwork?.agentNetworkName);
+            if (applied) {
+                setDockPrompt("");
+                showDockBanner({
+                    severity: "success",
+                    title: "Changes applied.",
+                    detail: "Your network has been updated.",
+                });
+            }
         }
         catch (e) {
             const isAbort = e instanceof DOMException && e.name === "AbortError";
             if (!isAbort) {
-                sendNotification(NotificationType.error, "Failed to apply network change.", String(e), undefined, null);
+                showDockBanner({ severity: "error", title: "Failed to apply network change.", detail: String(e) });
             }
             else if (hasTimedOut) {
-                sendNotification(NotificationType.error, "Failed to apply network change.", "The request timed out. Please try again.", undefined, null // show indefinitely until the user dismisses
-                );
+                showDockBanner({
+                    severity: "error",
+                    title: "Failed to apply network change.",
+                    detail: "The request timed out. Please try again.",
+                });
             }
         }
         finally {
@@ -321,7 +386,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
             dockAbortControllerRef.current = null;
             setIsDockStreaming(false);
         }
-    }, [applyNetworkSaveResult, currentUser, dockPrompt, networkId, neuroSanURL, tempNetworks]);
+    }, [applyNetworkSaveResult, currentUser, dockPrompt, networkId, neuroSanURL, showDockBanner, tempNetworks]);
     const handleExitEditMode = useCallback(() => {
         if (isDockStreaming) {
             dockAbortControllerRef.current?.abort();
@@ -508,10 +573,8 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
                                 lineHeight: 1.35,
                                 maxWidth: 400,
                                 overflow: "hidden",
-                                paddingLeft: 2,
-                                paddingRight: 2,
-                                paddingBottom: 0.45,
-                                paddingTop: 0.45,
+                                px: 2,
+                                py: 0.45,
                                 textOverflow: "ellipsis",
                                 whiteSpace: "nowrap",
                             }, children: networkDisplayName }) }) }), isTemporaryNetwork && !isEditMode && !isAwaitingLlm && onEnterEditMode && (_jsx(Button, { id: `${id}-enter-edit-mode-btn`, variant: "contained", size: "small", onClick: onEnterEditMode, startIcon: _jsx(EditIcon, {}), sx: {
@@ -527,67 +590,99 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
             width: "100%",
             backgroundColor: theme.palette.background.default,
             "& .react-flow__node": {
-                border: `1px solid ${theme.palette.divider}`,
+                border: "1px solid divider",
             },
             "& .react-flow__panel": {
                 backgroundColor: theme.palette.background.paper,
-                border: `1px solid ${theme.palette.divider}`,
+                border: "1px solid divider",
                 color: theme.palette.text.primary,
             },
             "& .react-flow__controls-button": {
                 backgroundColor: theme.palette.background.paper,
-                borderBottom: `1px solid ${theme.palette.divider}`,
+                borderBottom: "1px solid divider",
                 color: theme.palette.text.primary,
                 fill: theme.palette.text.primary,
             },
-        }, children: [_jsxs(Box, { id: `${id}-react-flow-wrapper`, sx: { position: "relative", flex: 1, minHeight: 0 }, children: [networkDisplayName ? _jsx(Box, { sx: { marginBottom: "1rem" }, children: getTitle() }) : null, _jsx(ReactFlow, { id: `${id}-react-flow`, nodes: nodes, edges: edges, onNodesChange: onNodesChange, onNodeClick: handleNodeClick, fitView: true, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionMode: ConnectionMode.Loose, children: !isAwaitingLlm && (_jsxs(_Fragment, { children: [agentsInNetwork?.length && !isAgentNetworkDesignerMode && !isEditMode ? getLegend() : null, _jsx(Background, { id: `${id}-background` }), !isAgentNetworkDesignerMode && !isEditMode && getControls(), shouldShowRadialGuides ? getRadialGuides() : null] })) }), isDockStreaming && (_jsx(Box, { id: `${id}-dock-applying-overlay`, sx: {
-                            position: "absolute",
-                            inset: 0,
-                            zIndex: getZIndex(2, theme),
-                            backgroundColor: alpha(theme.palette.background.default, 0.65),
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                        }, children: _jsxs(Paper, { elevation: 6, sx: {
-                                display: "flex",
-                                alignItems: "center",
-                                gap: 2,
-                                px: 4,
-                                py: 2.5,
-                                borderRadius: 2,
-                                maxWidth: 480,
-                            }, children: [_jsx(CircularProgress, { id: `${id}-dock-applying-spinner`, size: 24 }), _jsxs(Box, { children: [_jsx(Typography, { id: `${id}-dock-applying-title`, variant: "body1", sx: {
-                                                fontWeight: "bold",
-                                            }, children: "Applying changes to network" }), dockPrompt && (_jsx(Typography, { id: `${id}-dock-applying-prompt`, variant: "body2", sx: {
-                                                color: "text.secondary",
-                                                mt: 0.25,
-                                            }, children: dockPrompt }))] })] }) })), _jsx(ThoughtBubbleOverlay, { nodes: nodes, edges: thoughtBubbleEdgesForOverlay, showThoughtBubbles: showThoughtBubbles, isStreaming: isStreaming, onBubbleHoverChange: handleBubbleHoverChange })] }), isEditMode && isTemporaryNetwork && !isAwaitingLlm && (_jsxs(Box, { id: `${id}-topology-editor-dock`, sx: {
+        }, children: [_jsxs(Box, { id: `${id}-react-flow-wrapper`, sx: { position: "relative", flex: 1, minHeight: 0 }, children: [networkDisplayName ? _jsx(Box, { sx: { marginBottom: "1rem" }, children: getTitle() }) : null, _jsx(ReactFlow, { id: `${id}-react-flow`, nodes: nodes, edges: edges, onNodesChange: onNodesChange, onNodeClick: handleNodeClick, fitView: true, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionMode: ConnectionMode.Loose, children: !isAwaitingLlm && (_jsxs(_Fragment, { children: [agentsInNetwork?.length && !isAgentNetworkDesignerMode && !isEditMode ? getLegend() : null, _jsx(Background, { id: `${id}-background` }), !isAgentNetworkDesignerMode && !isEditMode && getControls(), shouldShowRadialGuides ? getRadialGuides() : null] })) }), _jsx(ThoughtBubbleOverlay, { nodes: nodes, edges: thoughtBubbleEdgesForOverlay, showThoughtBubbles: showThoughtBubbles, isStreaming: isStreaming, onBubbleHoverChange: handleBubbleHoverChange })] }), isEditMode && isTemporaryNetwork && !isAwaitingLlm && (_jsxs(Box, { sx: {
                     borderTop: `2px solid ${theme.palette.primary.main}`,
                     backgroundColor: theme.palette.background.paper,
                     flexShrink: 0,
-                }, children: [_jsxs(Box, { sx: {
+                }, children: [dockBanner && (_jsx(MUIAlert, { closeable: true, id: `${id}-dock-banner`, onClose: handleDismissBanner, severity: dockBanner.severity, sx: {
+                            borderRadius: 0,
+                            // Override MUIAlert's default 1rem bottom margin so the banner sits flush
+                            // against the dock header below it.
+                            marginBottom: 0,
+                            py: 0,
+                            // Match the dock header's right padding so the banner's close X lines up
+                            // vertically with the header's close X below it.
+                            paddingRight: 0.5,
+                            alignItems: "center",
+                            // Frost the banner like the dock header so the graph doesn't show through the
+                            // app's translucent paper background; keep a tinted, mostly-opaque severity wash.
+                            backdropFilter: "blur(8px)",
+                            backgroundColor: alpha(theme.palette[dockBanner.severity].main, isDarkMode ? 0.28 : 0.16),
+                            "& .MuiAlert-action": {
+                                alignItems: "center",
+                                marginRight: 0,
+                                paddingTop: 0,
+                            },
+                        }, children: _jsxs(Typography, { variant: "caption", component: "span", children: [_jsx("strong", { children: dockBanner.title }), ` ${dockBanner.detail}`] }) })), _jsxs(Box, { sx: {
+                            backdropFilter: "blur(6px)",
+                            borderBottom: "1px solid divider",
                             display: "flex",
                             alignItems: "center",
                             justifyContent: "space-between",
-                            px: 2,
-                            py: 0.5,
-                            borderBottom: `1px solid ${theme.palette.divider}`,
-                        }, children: [_jsx(Typography, { variant: "overline", sx: { fontWeight: "bold", letterSpacing: 1, lineHeight: 1.8 }, children: "Network Editor" }), _jsx(IconButton, { size: "small", "aria-label": "close edit mode", onClick: handleExitEditMode, children: _jsx(CloseIcon, { fontSize: "small" }) })] }), _jsx(Typography, { variant: "caption", sx: {
-                            px: 2,
-                            pt: 0.5,
-                            pb: 0,
-                            color: theme.palette.text.secondary,
-                            display: "block",
-                        }, children: "Changes apply only to this Temporary network" }), _jsxs(Box, { sx: {
+                            paddingLeft: 1.25,
+                            paddingRight: 0.25,
+                        }, children: [_jsx(Typography, { variant: "overline", sx: { fontWeight: "bold", letterSpacing: 1, lineHeight: 1.8 }, children: "Network Editor" }), _jsx(IconButton, { size: "small", "aria-label": "close edit mode", onClick: handleExitEditMode, children: _jsx(CloseIcon, { fontSize: "small" }) })] }), _jsxs(Box, { sx: {
                             display: "flex",
                             gap: 1,
-                            px: 2,
-                            py: 1.5,
+                            px: 1,
+                            py: 0.5,
                             alignItems: "center",
-                        }, children: [_jsx(TextField, { fullWidth: true, id: `${id}-dock-prompt-input`, placeholder: DOCK_PROMPT_PLACEHOLDER, variant: "outlined", size: "small", value: dockPrompt, onChange: (e) => setDockPrompt(e.target.value), onKeyDown: (e) => {
+                        }, children: [_jsx(TextField, { fullWidth: true, placeholder: DOCK_PROMPT_PLACEHOLDER, variant: "outlined", size: "small", value: dockPrompt, onChange: (e) => setDockPrompt(e.target.value), onKeyDown: (e) => {
                                     if (e.key === "Enter" && !e.shiftKey) {
                                         e.preventDefault();
                                         void handleDockApply();
                                     }
-                                }, disabled: isDockStreaming, slotProps: { htmlInput: { style: { fontSize: "0.85rem" } } } }), _jsx(Button, { id: `${id}-dock-apply-button`, variant: "contained", onClick: () => void handleDockApply(), disabled: isDockStreaming || !dockPrompt.trim(), sx: { whiteSpace: "nowrap", minWidth: 120 }, startIcon: isDockStreaming ? (_jsx(CircularProgress, { size: 16, color: "inherit" })) : undefined, children: isDockStreaming ? "Applying…" : "Apply" })] })] })), selectedAgent && !isAwaitingLlm && (_jsx(AgentNodePopup, { agentName: selectedAgent.agentName, initialInstructions: selectedAgent.initialInstructions, initialDescription: selectedAgent.initialDescription, isOpen: isPopupOpen, isSaving: isSavingAgent, onClose: handlePopupClose, onSave: handlePopupSave }))] }));
+                                }, disabled: isDockStreaming, slotProps: { htmlInput: { style: { fontSize: "0.75rem" } } } }), _jsx(Button, { variant: "contained", onClick: () => void handleDockApply(), disabled: isDockStreaming || !dockPrompt.trim(), sx: {
+                                    fontSize: 16,
+                                    marginBottom: "1px",
+                                    marginRight: 0,
+                                    minWidth: 110,
+                                    paddingTop: 0.3,
+                                    paddingBottom: 0.3,
+                                    whiteSpace: "nowrap",
+                                }, startIcon: isDockStreaming ? (_jsx(CircularProgress, { size: 16, color: "inherit" })) : undefined, children: isDockStreaming ? "Applying..." : "Apply" })] })] })), selectedAgent && !isAwaitingLlm && (_jsx(AgentNodePopup, { agentName: selectedAgent.agentName, initialInstructions: selectedAgent.initialInstructions, initialDescription: selectedAgent.initialDescription, isOpen: isPopupOpen, isSaving: isSavingAgent, onClose: handlePopupClose, onSave: handlePopupSave })), _jsx(Backdrop, { open: isDockStreaming, sx: { zIndex: (t) => t.zIndex.modal + 1 }, children: stopState === "confirming" ? (_jsxs(Paper, { elevation: 6, sx: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: 2,
+                        px: 4,
+                        py: 3,
+                        borderRadius: 2,
+                        maxWidth: 420,
+                    }, children: [_jsx(Typography, { variant: "body1", sx: { fontWeight: "bold" }, children: "Abort changes?" }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: "The in-progress update will be cancelled and discarded. Your network will not be modified." }), _jsxs(Box, { sx: {
+                                display: "flex",
+                                gap: 1.5,
+                                justifyContent: "flex-end",
+                            }, children: [_jsx(Button, { variant: "outlined", onClick: handleKeepApplying, children: "Keep applying" }), _jsx(Button, { variant: "contained", color: "error", startIcon: _jsx("span", { style: { fontSize: "0.7rem" }, children: "\u25A0" }), onClick: handleStopAndDiscard, children: "Stop & discard" })] })] })) : (_jsxs(Paper, { elevation: 6, sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 2,
+                        px: 4,
+                        py: 2.5,
+                        borderRadius: 2,
+                        maxWidth: 480,
+                    }, children: [_jsx(CircularProgress, { size: 24 }), _jsxs(Box, { sx: { flex: 1 }, children: [_jsx(Typography, { variant: "body1", sx: { fontWeight: "bold" }, children: "Applying changes to network" }), dockPrompt && (_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mt: 0.25 }, children: dockPrompt }))] }), _jsx(Button, { variant: "outlined", size: "small", startIcon: _jsx("span", { style: { fontSize: "0.65rem" }, children: "\u25A0" }), onClick: handleStopClick, sx: {
+                                whiteSpace: "nowrap",
+                                flexShrink: 0,
+                                color: theme.palette.common.white,
+                                borderColor: theme.palette.common.white,
+                                fontWeight: "bold",
+                                "&:hover": {
+                                    borderColor: theme.palette.error.main,
+                                    color: theme.palette.error.main,
+                                    backgroundColor: alpha(theme.palette.error.main, 0.08),
+                                },
+                            }, children: "Stop" })] })) })] }));
 };

package/dist/components/MultiAgentAccelerator/AgentNode.d.ts

@@ -15,6 +15,7 @@ export interface AgentNodeProps extends Record<string, unknown> {
 }
 export declare const NODE_HEIGHT = 100;
 export declare const NODE_WIDTH = 100;
+export declare const FRONTMAN_SIZE_MULTIPLIER = 1.25;
 /**
  * A node representing an agent in the network for use in react-flow.
  * @param props See AgentNodeProps

package/dist/components/MultiAgentAccelerator/AgentNode.js

@@ -38,6 +38,7 @@ const ZERO_WIDTH_SPACE = "\u200B";
 // Node dimensions
 export const NODE_HEIGHT = 100;
 export const NODE_WIDTH = 100;
+export const FRONTMAN_SIZE_MULTIPLIER = 1.25;
 // Icon sizes
 // These are used to set the size of the icons displayed in the agent nodes.
 const AGENT_ICON_SIZE = "2.25rem";
@@ -158,55 +159,55 @@ export const AgentNode = (props) => {
     const glowColor = isLightColor(theme.palette.background.default)
         ? theme.palette.common.black
         : theme.palette.common.white;
-    const isClickableNode = isEditable;
     const [isHovered, setIsHovered] = useState(false);
     const wrappedAgentName = agentName
         // Allow wrap after underscore
         .replaceAll("_", `_${ZERO_WIDTH_SPACE}`)
         // Allow wrap before capitals in camel/PascalCase (e.g., CustomerSupport -> Customer|Support)
         .replaceAll(/(?<lower>[\da-z])(?<upper>[A-Z])/gu, `$<lower>${ZERO_WIDTH_SPACE}$<upper>`)
-        // Also split acronym->word boundary (e.g., HTTPServer -> HTTP|Server), but not H|T|T|P
-        .replaceAll(/(?<acronym>[A-Z])(?<word>[A-Z][a-z])/gu, `$<acronym>${ZERO_WIDTH_SPACE}$<word>`);
-    return (_jsxs(_Fragment, { children: [_jsxs(AnimatedNode, { id: agentId, "data-testid": agentId, glowColor: glowColor, isActive: isActiveAgent, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), sx: {
-                    backgroundColor,
-                    color,
-                    cursor: isEditable ? "pointer" : "grab",
-                    height: NODE_HEIGHT * (isFrontman ? 1.25 : 1.0),
-                    width: NODE_WIDTH * (isFrontman ? 1.25 : 1.0),
-                    zIndex: getZIndex(1, theme),
-                }, children: [getDisplayAsIcon(), isHovered && isClickableNode && (_jsx(Tooltip, { title: "Edit", placement: "top", disableInteractive: true, children: _jsx(IconButton, { sx: {
-                                position: "absolute",
-                                top: 0,
-                                right: 0,
-                                backgroundColor: "rgba(0,0,0,0.45)",
-                                borderRadius: "50%",
-                                padding: "3px",
-                                zIndex: 2,
-                                cursor: "pointer",
-                                "&:hover": { backgroundColor: "rgba(0,0,0,0.65)" },
-                            }, children: _jsx(EditIcon, { id: `${agentId}-edit-icon`, sx: { fontSize: "1rem", color: "white" } }) }) })), _jsx(Handle, { id: `${agentId}-left-handle`, position: Position.Left, type: "source", style: { visibility: handleVisibility } }), _jsx(Handle, { id: `${agentId}-right-handle`, position: Position.Right, type: "source", style: { visibility: handleVisibility } }), _jsx(Handle, { id: `${agentId}-top-handle`, position: Position.Top, type: "source", style: { visibility: handleVisibility } }), _jsx(Handle, { id: `${agentId}-bottom-handle`, position: Position.Bottom, type: "source", style: { visibility: handleVisibility } })] }), _jsx(Tooltip, { id: `${agentId}-tooltip`, title: agentName, placement: "top", disableInteractive: true, children: _jsx(Typography, { id: `${agentId}-name`, sx: {
-                        WebkitBoxOrient: "vertical",
-                        WebkitLineClamp: 4,
-                        backgroundColor: theme.palette.background.paper,
-                        border: `1px solid ${theme.palette.divider}`,
-                        borderRadius: 1,
-                        color: theme.palette.text.primary,
-                        display: "-webkit-box",
-                        fontSize: "17px",
-                        fontWeight: 700,
-                        lineHeight: 1.3,
-                        maxHeight: "4.4em",
-                        mx: "auto",
-                        my: "auto",
-                        overflow: "hidden",
-                        overflowWrap: "anywhere",
-                        px: 0.75,
-                        py: 0.45,
-                        textAlign: "center",
-                        textOverflow: "ellipsis",
-                        whiteSpace: "normal",
-                        width: `${NODE_WIDTH}px`,
-                        wordBreak: "break-word",
-                        zIndex: 10,
-                    }, children: wrappedAgentName }) })] }));
+        // Also split abbreviation->word boundary (e.g., HTTPServer -> HTTP|Server), but not H|T|T|P
+        .replaceAll(/(?<abbr>[A-Z])(?<word>[A-Z][a-z])/gu, `$<abbr>${ZERO_WIDTH_SPACE}$<word>`);
+    const height = NODE_HEIGHT * (isFrontman ? FRONTMAN_SIZE_MULTIPLIER : 1.0);
+    const width = height;
+    const getEditButton = () => (_jsx(Tooltip, { title: "Edit", placement: "top", disableInteractive: true, children: _jsx(IconButton, { sx: {
+                position: "absolute",
+                top: 0,
+                right: 0,
+                backgroundColor: "rgba(0,0,0,0.45)",
+                borderRadius: "50%",
+                padding: "3px",
+                zIndex: 2,
+                cursor: "pointer",
+                "&:hover": { backgroundColor: "rgba(0,0,0,0.65)" },
+            }, children: _jsx(EditIcon, { id: `${agentId}-edit-icon`, sx: { fontSize: "1rem", color: "white" } }) }) }));
+    const getNodeName = () => (_jsx(Tooltip, { id: `${agentId}-tooltip`, title: agentName, placement: "top", disableInteractive: true, children: _jsx(Typography, { id: `${agentId}-name`, sx: {
+                backgroundColor: theme.palette.background.paper,
+                border: `1px solid ${theme.palette.divider}`,
+                borderRadius: 1,
+                color: theme.palette.text.primary,
+                display: "-webkit-box",
+                fontSize: "16px",
+                fontWeight: "700",
+                marginTop: "0.5rem",
+                overflow: "hidden",
+                overflowWrap: "anywhere",
+                paddingLeft: 0.75,
+                paddingRight: 0.75,
+                paddingBottom: 0.45,
+                paddingTop: 0.45,
+                textAlign: "center",
+                WebkitBoxOrient: "vertical",
+                WebkitLineClamp: 4,
+                width,
+                zIndex: getZIndex(1, theme),
+            }, children: wrappedAgentName }) }));
+    const getNode = () => (_jsxs(AnimatedNode, { id: agentId, "data-testid": agentId, glowColor: glowColor, isActive: isActiveAgent, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), sx: {
+            backgroundColor,
+            color,
+            cursor: isEditable ? "pointer" : "grab",
+            height,
+            width,
+            zIndex: getZIndex(1, theme),
+        }, children: [getDisplayAsIcon(), isHovered && isEditable && getEditButton(), _jsx(Handle, { id: `${agentId}-left-handle`, position: Position.Left, type: "source", style: { visibility: handleVisibility } }), _jsx(Handle, { id: `${agentId}-right-handle`, position: Position.Right, type: "source", style: { visibility: handleVisibility } }), _jsx(Handle, { id: `${agentId}-top-handle`, position: Position.Top, type: "source", style: { visibility: handleVisibility } }), _jsx(Handle, { id: `${agentId}-bottom-handle`, position: Position.Bottom, type: "source", style: { visibility: handleVisibility } })] }));
+    return (_jsxs(_Fragment, { children: [getNode(), getNodeName()] }));
 };

package/dist/components/MultiAgentAccelerator/GraphLayouts.js

@@ -19,11 +19,13 @@ limitations under the License.
 import dagre from "@dagrejs/dagre";
 import { MarkerType } from "@xyflow/react";
 import cloneDeep from "lodash-es/cloneDeep.js";
-import { NODE_HEIGHT, NODE_WIDTH } from "./AgentNode.js";
+import { FRONTMAN_SIZE_MULTIPLIER, NODE_HEIGHT, NODE_WIDTH } from "./AgentNode.js";
 import { BASE_RADIUS, DEFAULT_FRONTMAN_X_POS, DEFAULT_FRONTMAN_Y_POS, LEVEL_SPACING } from "./const.js";
 import { isEditableAgent } from "./TemporaryNetworks.js";
 import { cleanUpAgentName, KNOWN_MESSAGE_TYPES_FOR_PLASMA } from "../AgentChat/Common/Utils.js";
 export const MAX_GLOBAL_THOUGHT_BUBBLES = 5;
+const FRONTMAN_OFFSET_X = (NODE_WIDTH * (FRONTMAN_SIZE_MULTIPLIER - 1)) / 2;
+const FRONTMAN_OFFSET_Y = (NODE_HEIGHT * (FRONTMAN_SIZE_MULTIPLIER - 1)) / 2;
 export const addThoughtBubbleEdge = (thoughtBubbleEdges, conversationId, edge) => {
     // Add with timestamp for age-based cleanup
     thoughtBubbleEdges.set(conversationId, {
@@ -194,7 +196,10 @@ isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggesti
                     isEditable: isTemporaryNetwork &&
                         isEditableAgent(agentsInNetwork.find((a) => a.origin === nodeId)?.display_as),
                 },
-                position: isFrontman ? { x: DEFAULT_FRONTMAN_X_POS, y: DEFAULT_FRONTMAN_Y_POS } : { x, y },
+                // position: allow for Frontman being larger
+                position: isFrontman
+                    ? { x: DEFAULT_FRONTMAN_X_POS - FRONTMAN_OFFSET_X, y: DEFAULT_FRONTMAN_Y_POS - FRONTMAN_OFFSET_Y }
+                    : { x, y },
                 style: {
                     border: "none",
                     background: "transparent",
@@ -279,11 +284,14 @@ isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggesti
     // Convert dagre's layout to what our flow graph needs
     nodesTmp.forEach((node) => {
         const nodeWithPosition = dagreGraph.node(node.id);
+        const isFrontman = frontman?.origin === node.id;
         // We are shifting the dagre node position (anchor=center) to the top left
         // so it matches the React Flow node anchor point (top left).
+        const x = nodeWithPosition.x - NODE_WIDTH / 2 - (isFrontman ? FRONTMAN_OFFSET_X : 0);
+        const y = nodeWithPosition.y - NODE_HEIGHT / 2 - (isFrontman ? FRONTMAN_OFFSET_Y : 0);
         node.position = {
-            x: nodeWithPosition.x - NODE_WIDTH / 2,
-            y: nodeWithPosition.y - NODE_HEIGHT / 2,
+            x,
+            y,
         };
         // Depth is index of x position in xPositions array
         // Create a new data object with updated depth