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

package/dist/components/MultiAgentAccelerator/{AgentFlow.js → AgentFlow/AgentFlow.js}

@@ -35,32 +35,32 @@ import Typography from "@mui/material/Typography";
 import { applyNodeChanges, Background, ConnectionMode, ControlButton, Controls, ReactFlow, useReactFlow, useStore, } from "@xyflow/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { AgentNode, NODE_HEIGHT, NODE_WIDTH } from "./AgentNode.js";
-import { AgentNodePopup } from "./AgentNodePopup.js";
-import { AGENT_NETWORK_DEFINITION_KEY, AGENT_NETWORK_DESIGNER_ID, AGENT_NETWORK_NAME_KEY, BASE_RADIUS, DEFAULT_FRONTMAN_X_POS, DEFAULT_FRONTMAN_Y_POS, LEVEL_SPACING, } from "./const.js";
+import { AGENT_NETWORK_DEFINITION_KEY, AGENT_NETWORK_DESIGNER_ID, AGENT_NETWORK_NAME_KEY, BASE_RADIUS, DEFAULT_FRONTMAN_X_POS, DEFAULT_FRONTMAN_Y_POS, LEVEL_SPACING, } from "../const.js";
 import { addThoughtBubbleEdge, layoutLinear, layoutRadial } from "./GraphLayouts.js";
 import { PlasmaEdge } from "./PlasmaEdge.js";
-import { convertReservationsToNetworks, extractNetworkHocon, extractReservations, isEditableAgent, mergeNetworks, } from "./TemporaryNetworks.js";
-import { ThoughtBubbleEdge } from "./ThoughtBubbleEdge.js";
-import { ThoughtBubbleOverlay } from "./ThoughtBubbleOverlay.js";
-import { sendChatQuery } from "../../controller/agent/Agent.js";
-import { StreamingUnit } from "../../controller/llm/LlmChat.js";
-import { useAgentChatHistoryStore } from "../../state/ChatHistory.js";
-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
+import { sendChatQuery } from "../../../controller/agent/Agent.js";
+import { StreamingUnit } from "../../../controller/llm/LlmChat.js";
+import { useAgentChatHistoryStore } from "../../../state/ChatHistory.js";
+import { usePalette, useSettingsStore } from "../../../state/Settings.js";
+import { useTempNetworksStore } from "../../../state/TemporaryNetworks.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";
+import { AgentNodePopup } from "../AgentNodePopup.js";
+import { convertReservationsToNetworks, extractNetworkHocon, extractReservations, isEditableAgent, mergeNetworks, } from "../TemporaryNetworks.js";
+import { ThoughtBubbleEdge } from "../ThoughtBubbles/ThoughtBubbleEdge.js";
+import { ThoughtBubbleOverlay } from "../ThoughtBubbles/ThoughtBubbleOverlay.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.
+// How long the dock's status 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
+//#endregion: Constants
+//#region: Helpers
 /**
  * Streams the Agent Network Designer endpoint with a natural-language prompt and the current
  * network definition, collecting any returned reservations.
@@ -86,7 +86,22 @@ const streamNetworkDesignerPrompt = async (neuroSanURL, signal, userPrompt, curr
     }, currentUser, StreamingUnit.Line);
     return newNetworks;
 };
-// #endregion: Helpers
+/**
+ * Filters node events based on the current mode. Don't allow any topological-modifying events (adding, deleting nodes)
+ * and in Agent Network Designer mode, don't allow dragging nodes (position changes) either.
+ * @param change The node change event to filter.
+ * @param isAgentNetworkDesignerMode Whether the flow is in Agent Network Designer mode (read-only preview).
+ * @return True if the event should be allowed, false if it should be filtered out.
+ */
+export const filterNodeEvents = (change, isAgentNetworkDesignerMode) => {
+    // Only allow nodes to be dragged, no topological edits to the graph (read-only)
+    if (["remove", "add", "replace"].includes(change.type))
+        return false;
+    // Disallow dragging nodes in AND mode since it's supposed to be a read-only preview but
+    // pass along all other event types as
+    return !(change.type === "position" && isAgentNetworkDesignerMode);
+};
+//#endregion: Helpers
 export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork, currentConversations, currentUser, id, isAgentNetworkDesignerMode, isAwaitingLlm, isEditMode, isStreaming, isSelectedNetworkTemporary: isTemporaryNetwork, networkDisplayName, networkId, neuroSanURL, onEnterEditMode, onNetworkReplaced, onExitEditMode, onSaveAgent, thoughtBubbleEdges, setThoughtBubbleEdges, }) => {
     const theme = useTheme();
     const { fitView } = useReactFlow();
@@ -113,6 +128,8 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
     }, []);
     // Ref for isStreaming, read inside the cleanup interval.
     const isStreamingRef = useRef(isStreaming);
+    // Display option for agent/network names
+    const useNativeNames = useSettingsStore((state) => state.settings.appearance.useNativeNames);
     // Keep the ref current after every render.
     useEffect(() => {
         isStreamingRef.current = isStreaming;
@@ -166,7 +183,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
             return edgesMap ?? prev;
         });
     }, [currentConversations, showThoughtBubbles, setThoughtBubbleEdges]);
-    // Cleanup expired thought bubble edges — created once on mount, reads isStreaming via ref.
+    // Clean up expired thought bubble edges — created once on mount, reads isStreaming via ref.
     useEffect(() => {
         const cleanupInterval = setInterval(() => {
             if (!isStreamingRef.current)
@@ -187,9 +204,6 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
         }, 1000);
         return () => clearInterval(cleanupInterval);
     }, [setThoughtBubbleEdges]); // mount/unmount only
-    // Shadow color for icon
-    const isDarkMode = theme.palette.mode === "dark";
-    const foregroundColor = isDarkMode ? theme.palette.common.white : theme.palette.common.black;
     const isHeatmap = coloringOption === "heatmap";
     const palette = usePalette();
     // Merge agents from active thought bubbles with agentsInNetwork for layout
@@ -216,8 +230,28 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
     // Create the flow layout depending on user preference
     // Memoize layoutResult so it only recalculates when relevant data changes
     const layoutResult = useMemo(() => layout === "linear"
-        ? layoutLinear(isHeatmap ? agentCounts : undefined, mergedAgentsInNetwork, currentConversations, isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggestions, isTemporaryNetwork)
-        : layoutRadial(isHeatmap ? agentCounts : undefined, mergedAgentsInNetwork, currentConversations, isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggestions, isTemporaryNetwork), [
+        ? layoutLinear({
+            agentCounts: isHeatmap ? agentCounts : undefined,
+            agentIconSuggestions,
+            agentsInNetwork: mergedAgentsInNetwork,
+            currentConversations,
+            isAgentNetworkDesignerMode,
+            isAwaitingLlm,
+            isTemporaryNetwork,
+            thoughtBubbleEdges,
+            useNativeNames,
+        })
+        : layoutRadial({
+            agentCounts: isHeatmap ? agentCounts : undefined,
+            agentIconSuggestions,
+            agentsInNetwork: mergedAgentsInNetwork,
+            currentConversations,
+            isAgentNetworkDesignerMode,
+            isAwaitingLlm,
+            isTemporaryNetwork,
+            thoughtBubbleEdges,
+            useNativeNames,
+        }), [
         agentCounts,
         agentIconSuggestions,
         currentConversations,
@@ -228,6 +262,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
         layout,
         mergedAgentsInNetwork,
         thoughtBubbleEdges,
+        useNativeNames,
     ]);
     const [nodes, setNodes] = useState(layoutResult.nodes);
     // Sync up the nodes with the layout result
@@ -237,7 +272,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
     // Track which node the user clicked on so we can open the popup
     const [selectedAgent, setSelectedAgent] = useState(null);
     const [isPopupOpen, setIsPopupOpen] = useState(false);
-    // True while the agent-edit request is in-flight so we can disable the Save button.
+    // True, while the agent-edit request is in-flight so we can disable the Save button.
     const [isSavingAgent, setIsSavingAgent] = useState(false);
     // AbortController for the in-flight save request — stored in a ref so handlePopupClose can cancel it.
     const saveAbortControllerRef = useRef(null);
@@ -247,7 +282,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
     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.
+    // Inline status banner shown above the dock header after an "apply" succeeds, is canceled, or fails.
     const [dockBanner, setDockBanner] = useState(null);
     const bannerTimeoutRef = useRef(null);
     // Clear the banner auto-dismiss timer on unmount.
@@ -333,7 +368,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
             }
             return true;
         }
-        // Reservations came back but none matched the current network — surface this in the dock banner.
+        // Reservations came back, but none matched the current network — surface this in the dock banner.
         showDockBanner({
             severity: "error",
             title: "Failed to apply network change.",
@@ -370,15 +405,17 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
         }
         catch (e) {
             const isAbort = e instanceof DOMException && e.name === "AbortError";
-            if (!isAbort) {
-                showDockBanner({ severity: "error", title: "Failed to apply network change.", detail: String(e) });
+            if (isAbort) {
+                if (hasTimedOut) {
+                    showDockBanner({
+                        severity: "error",
+                        title: "Failed to apply network change.",
+                        detail: "The request timed out. Please try again.",
+                    });
+                }
             }
-            else if (hasTimedOut) {
-                showDockBanner({
-                    severity: "error",
-                    title: "Failed to apply network change.",
-                    detail: "The request timed out. Please try again.",
-                });
+            else {
+                showDockBanner({ severity: "error", title: "Failed to apply network change.", detail: String(e) });
             }
         }
         finally {
@@ -444,10 +481,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
         }, 50);
     }, [agentsInNetwork, fitView, layout]);
     const onNodesChange = useCallback((changes) => {
-        setNodes((currentNodes) => applyNodeChanges(
-        // For now, we only allow dragging, no updates. In agent network designer mode, doesn't make sense
-        // to allow position changes since the user isn't actually manipulating a real network
-        changes.filter((c) => c.type === "position" && !isAgentNetworkDesignerMode), currentNodes));
+        setNodes((currentNodes) => applyNodeChanges(changes.filter((change) => filterNodeEvents(change, isAgentNetworkDesignerMode)), currentNodes));
     }, [isAgentNetworkDesignerMode]);
     const transform = useStore((state) => state.transform);
     // Why not just a "const"? See: https://reactflow.dev/learn/customization/custom-nodes
@@ -479,53 +513,61 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
     const getLegend = () => {
         const length = isHeatmap ? palette.length : Math.min(maxDepth, palette.length);
         return (_jsxs(Box, { id: `${id}-legend`, sx: {
-                position: "absolute",
-                top: "1.5rem",
-                right: "10px",
-                padding: "5px",
+                alignItems: "center",
+                backgroundColor: theme.palette.background.paper,
+                border: `1px solid ${theme.palette.divider}`,
+                boxShadow: `0 2px 8px ${alpha(theme.palette.text.primary, 0.18)}`,
                 borderRadius: "5px",
-                boxShadow: `0 0 5px color-mix(in srgb, ${foregroundColor} 30%, transparent)`,
                 display: "flex",
-                alignItems: "center",
+                padding: theme.spacing(0.5),
+                position: "absolute",
+                right: theme.spacing(2),
+                top: theme.spacing(4),
                 zIndex: getZIndex(2, theme),
-            }, children: [Array.from({ length }, (_, i) => (_jsx(Box, { id: `${id}-legend-depth-${i}`, style: {
+            }, children: [Array.from({ length }, (_, i) => (_jsx(Box, { id: `${id}-legend-depth-${i}`, sx: {
                         alignItems: "center",
                         backgroundColor: palette[i],
                         borderRadius: "50%",
                         color: theme.palette.getContrastText(palette[i]),
                         display: "flex",
-                        height: "15px",
+                        fontSize: "0.5rem",
                         justifyContent: "center",
-                        marginLeft: "5px",
+                        marginLeft: theme.spacing(0.75),
                         width: "15px",
-                    }, children: _jsx(Typography, { id: `${id}-legend-depth-${i}-text`, sx: {
-                            fontSize: "8px",
-                        }, children: i }) }, i))), _jsxs(ToggleButtonGroup, { id: `${id}-coloring-toggle`, value: coloringOption, exclusive: true, onChange: (_, newValue) => {
+                    }, children: i }, i))), _jsxs(ToggleButtonGroup, { id: `${id}-coloring-toggle`, value: coloringOption, exclusive: true, onChange: (_, newValue) => {
                         if (newValue !== null) {
                             setColoringOption(newValue);
                         }
-                    }, sx: {
-                        fontSize: "2rem",
-                        zIndex: 10,
-                        marginLeft: "0.5rem",
-                    }, size: "small", children: [_jsx(ToggleButton, { id: `${id}-depth-toggle`, size: "small", value: "depth", sx: {
+                    }, size: "small", sx: {
+                        marginLeft: theme.spacing(2),
+                        "& .MuiToggleButton-root": {
+                            borderColor: theme.palette.divider,
+                            color: theme.palette.text.primary,
+                            minHeight: 22,
+                            px: 1,
+                            "&:hover": {
+                                backgroundColor: theme.palette.action.hover,
+                            },
+                            "&.Mui-selected": {
+                                backgroundColor: theme.palette.action.selected,
+                                borderColor: theme.palette.text.primary,
+                            },
+                            "&.Mui-selected:hover": {
+                                backgroundColor: theme.palette.action.selected,
+                                borderColor: theme.palette.text.primary,
+                            },
+                        },
+                    }, children: [_jsx(ToggleButton, { id: `${id}-depth-toggle`, value: "depth", sx: {
                                 fontSize: "0.5rem",
                                 height: "1rem",
-                            }, children: _jsx(Typography, { id: `${id}-depth-label`, sx: {
-                                    fontSize: "10px",
-                                }, children: "Depth" }) }), _jsx(ToggleButton, { id: `${id}-heatmap-toggle`, size: "small", value: "heatmap", sx: {
+                            }, children: "Depth" }), _jsx(ToggleButton, { id: `${id}-heatmap-toggle`, value: "heatmap", sx: {
                                 fontSize: "0.5rem",
                                 height: "1rem",
-                            }, children: _jsx(Typography, { id: `${id}-heatmap-label`, sx: {
-                                    fontSize: "10px",
-                                }, children: "Heatmap" }) })] })] }));
+                            }, children: "Heatmap" })] })] }));
     };
-    // Get the background color for the control buttons based on the layout and dark mode setting
+    // Get the background color for the control buttons; differs based on whether the button is active or not
     const getControlButtonBackgroundColor = (isActive) => {
-        if (!isActive) {
-            return undefined;
-        }
-        return isDarkMode ? theme.palette.grey[800] : theme.palette.grey[200];
+        return isActive ? theme.palette.action.selected : undefined;
     };
     // Only show radial guides if radial layout is selected, radial guides are enabled, and it's not just Frontman
     const shouldShowRadialGuides = enableRadialGuides && layout === "radial" && maxDepth > 1;
@@ -562,12 +604,10 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
             }, children: [_jsx(Tooltip, { title: networkDisplayName, placement: "top", children: _jsx(Box, { sx: { pointerEvents: "auto" }, children: _jsx(Typography, { id: `${id}-network-title`, variant: "subtitle1", sx: {
                                 backdropFilter: "blur(6px)",
                                 backgroundColor: titleBackgroundColor,
-                                border: `1px solid ${alpha(theme.palette.divider, 0.6)}`,
+                                border: `1px solid ${alpha(theme.palette.divider, 0.75)}`,
                                 borderRadius: 2,
-                                boxShadow: theme.palette.mode === "dark"
-                                    ? `0 6px 20px ${alpha(theme.palette.common.black, 0.35)}`
-                                    : `0 6px 16px ${alpha(theme.palette.common.black, 0.12)}`,
-                                color: theme.palette.getContrastText(alpha(titleBackgroundColor, 0.65)),
+                                boxShadow: theme.shadows[6],
+                                color: theme.palette.text.primary,
                                 fontWeight: 600,
                                 letterSpacing: "0.01em",
                                 lineHeight: 1.35,
@@ -592,21 +632,24 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
             "& .react-flow__node": {
                 border: "1px solid divider",
             },
-            "& .react-flow__panel": {
+            "& .react-flow__panel, & .react-flow__controls-button": {
                 backgroundColor: theme.palette.background.paper,
-                border: "1px solid divider",
                 color: theme.palette.text.primary,
             },
+            "& .react-flow__panel": {
+                border: "1px solid divider",
+            },
             "& .react-flow__controls-button": {
-                backgroundColor: theme.palette.background.paper,
                 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] })) }), _jsx(ThoughtBubbleOverlay, { nodes: nodes, edges: thoughtBubbleEdgesForOverlay, showThoughtBubbles: showThoughtBubbles, isStreaming: isStreaming, onBubbleHoverChange: handleBubbleHoverChange })] }), isEditMode && isTemporaryNetwork && !isAwaitingLlm && (_jsxs(Box, { 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, { connectionMode: ConnectionMode.Loose, edgeTypes: edgeTypes, edges: edges, fitView: true, id: `${id}-react-flow`, nodeTypes: nodeTypes, nodes: nodes, nodesDraggable: !isAgentNetworkDesignerMode, onNodeClick: handleNodeClick, onNodesChange: onNodesChange, 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: {
+                    backdropFilter: "blur(8px)",
+                    backgroundColor: alpha(theme.palette.background.paper, 0.2),
                     borderTop: `2px solid ${theme.palette.primary.main}`,
-                    backgroundColor: theme.palette.background.paper,
                     flexShrink: 0,
+                    position: "relative",
+                    zIndex: getZIndex(2, theme),
                 }, 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
@@ -617,10 +660,8 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
                             // 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),
+                            // 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.
                             "& .MuiAlert-action": {
                                 alignItems: "center",
                                 marginRight: 0,

package/dist/components/MultiAgentAccelerator/{AgentNode.d.ts → AgentFlow/AgentNode.d.ts}

@@ -1,7 +1,7 @@
 import { NodeProps } from "@xyflow/react";
 import type { Node as RFNode } from "@xyflow/react";
 import { FC } from "react";
-import { AgentConversation } from "./AgentConversations.js";
+import { AgentConversation } from "../AgentConversations.js";
 export interface AgentNodeProps extends Record<string, unknown> {
     readonly agentCounts?: Map<string, number>;
     readonly agentName: string;

package/dist/components/MultiAgentAccelerator/{AgentNode.js → AgentFlow/AgentNode.js}

@@ -28,11 +28,10 @@ import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { Handle, Position } from "@xyflow/react";
 import { useState } from "react";
-import { DisplayAs } from "./const.js";
-import { useSettingsStore } from "../../state/Settings.js";
-import { usePalette } from "../../Theme/Palettes.js";
-import { isLightColor } from "../../Theme/Theme.js";
-import { getZIndex } from "../../utils/zIndexLayers.js";
+import { usePalette, useSettingsStore } from "../../../state/Settings.js";
+import { isLightColor } from "../../../Theme/Theme.js";
+import { getZIndex } from "../../../utils/zIndexLayers.js";
+import { DisplayAs } from "../const.js";
 // A zero-width space character, used to give the browser a hint where to break long names
 const ZERO_WIDTH_SPACE = "\u200B";
 // Node dimensions
@@ -125,32 +124,28 @@ export const AgentNode = (props) => {
     // Determine which icon to display based on the agent type whether it is Frontman or not
     const getDisplayAsIcon = () => {
         const id = `${agentId}-icon`;
-        if (agentIconSuggestion && MuiIcons[agentIconSuggestion]) {
-            const IconComponent = MuiIcons[agentIconSuggestion];
-            return _jsx(IconComponent, { sx: { fontSize: AGENT_ICON_SIZE } });
+        // Check for valid MUI icon suggestion from the LLM suggestion service
+        const SuggestedIcon = agentIconSuggestion ? MuiIcons[agentIconSuggestion] : undefined;
+        // If the LLM provided a valid icon suggestion, use it. Otherwise, fall back to default icons based on
+        // agent type.
+        if (SuggestedIcon) {
+            return (_jsx(SuggestedIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
         }
-        else {
-            if (agentIconSuggestion) {
-                console.warn(`Invalid MUI icon suggestion: ${agentIconSuggestion}`);
-            }
-            if (isFrontman) {
-                return (
-                // Use special icon and larger size for Frontman
-                _jsx(PersonIcon, { id: id, sx: { fontSize: FRONTMAN_ICON_SIZE } }));
-            }
-            else {
-                switch (displayAs) {
-                    case DisplayAs.EXTERNAL_AGENT:
-                        return (_jsx(TravelExploreIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
-                    // This should be a supported type but we're not seeing it?
-                    case DisplayAs.LANGCHAIN_TOOL:
-                    case DisplayAs.CODED_TOOL:
-                        return (_jsx(HandymanIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
-                    case DisplayAs.LLM_AGENT:
-                    default:
-                        return (_jsx(AutoAwesomeIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
-                }
-            }
+        if (isFrontman) {
+            return (
+            // Use special icon and larger size for Frontman
+            _jsx(PersonIcon, { id: id, sx: { fontSize: FRONTMAN_ICON_SIZE } }));
+        }
+        switch (displayAs) {
+            case DisplayAs.EXTERNAL_AGENT:
+                return (_jsx(TravelExploreIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
+            // This should be a supported type but we're not seeing it?
+            case DisplayAs.LANGCHAIN_TOOL:
+            case DisplayAs.CODED_TOOL:
+                return (_jsx(HandymanIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
+            case DisplayAs.LLM_AGENT:
+            default:
+                return (_jsx(AutoAwesomeIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
         }
     };
     // Determine icon color based on settings. If auto color is enabled, use contrasting color for readability.
@@ -160,6 +155,7 @@ export const AgentNode = (props) => {
         ? theme.palette.common.black
         : theme.palette.common.white;
     const [isHovered, setIsHovered] = useState(false);
+    // Insert zero-width spaces into the agent name to give the browser hints where to wrap.
     const wrappedAgentName = agentName
         // Allow wrap after underscore
         .replaceAll("_", `_${ZERO_WIDTH_SPACE}`)

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

@@ -0,0 +1,43 @@
+import { Edge, Node as RFNode } from "@xyflow/react";
+import { AgentConversation } from "../AgentConversations.js";
+import { AgentNodeProps } from "./AgentNode.js";
+import { AgentIconSuggestions } from "../../../controller/Types/AgentIconSuggestions.js";
+import { ConnectivityInfo } from "../../../generated/neuro-san/NeuroSanClient.js";
+import { ThoughtBubbleEdgeShape } from "../ThoughtBubbles/ThoughtBubbleEdge.js";
+export declare const MAX_GLOBAL_THOUGHT_BUBBLES = 5;
+/**
+ * Result of the layout algorithms, containing the nodes and edges with their computed positions and properties.
+ */
+export type LayoutResult = {
+    nodes: RFNode<AgentNodeProps>[];
+    edges: Edge[];
+};
+export declare const addThoughtBubbleEdge: (thoughtBubbleEdges: Map<string, {
+    edge: ThoughtBubbleEdgeShape;
+    timestamp: number;
+}>, conversationId: string, edge: ThoughtBubbleEdgeShape) => void;
+export declare const removeThoughtBubbleEdge: (thoughtBubbleEdges: Map<string, {
+    edge: ThoughtBubbleEdgeShape;
+    timestamp: number;
+}>, conversationId: string) => void;
+export declare const getThoughtBubbleEdges: (thoughtBubbleEdges: Map<string, {
+    edge: ThoughtBubbleEdgeShape;
+    timestamp: number;
+}>) => ThoughtBubbleEdgeShape[];
+/** * Shared options for graph layout functions. */
+export type LayoutOptions = {
+    readonly agentCounts: Map<string, number>;
+    readonly agentIconSuggestions?: AgentIconSuggestions | null;
+    readonly agentsInNetwork: ConnectivityInfo[];
+    readonly currentConversations: AgentConversation[] | null;
+    readonly isAgentNetworkDesignerMode: boolean;
+    readonly isAwaitingLlm: boolean;
+    readonly isTemporaryNetwork?: boolean;
+    readonly thoughtBubbleEdges: Map<string, {
+        edge: ThoughtBubbleEdgeShape;
+        timestamp: number;
+    }>;
+    readonly useNativeNames: boolean;
+};
+export declare const layoutRadial: ({ agentCounts, agentIconSuggestions, agentsInNetwork, currentConversations, isAgentNetworkDesignerMode, isAwaitingLlm, isTemporaryNetwork, thoughtBubbleEdges, useNativeNames, }: LayoutOptions) => LayoutResult;
+export declare const layoutLinear: ({ agentCounts, agentIconSuggestions, agentsInNetwork, currentConversations, isAgentNetworkDesignerMode, isAwaitingLlm, isTemporaryNetwork, thoughtBubbleEdges, useNativeNames, }: LayoutOptions) => LayoutResult;

package/dist/components/MultiAgentAccelerator/{GraphLayouts.js → AgentFlow/GraphLayouts.js}

@@ -20,9 +20,10 @@ import dagre from "@dagrejs/dagre";
 import { MarkerType } from "@xyflow/react";
 import cloneDeep from "lodash-es/cloneDeep.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";
+import { cleanUpAgentName, KNOWN_MESSAGE_TYPES_FOR_PLASMA } from "../../AgentChat/Common/Utils.js";
+import { BASE_RADIUS, DEFAULT_FRONTMAN_X_POS, DEFAULT_FRONTMAN_Y_POS, LEVEL_SPACING } from "../const.js";
+import { getFrontman, getParentAgents, getParents } from "./GraphStructure.js";
+import { isEditableAgent } from "../TemporaryNetworks.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;
@@ -60,34 +61,6 @@ const areInSameConversation = (conversations, sourceAgent, targetAgent) => {
 // Name for custom node
 const AGENT_NODE_TYPE_NAME = "agentNode";
 // #endregion: Constants
-/**
- * Returns the "origins" (node names) of the _immediate_ parents of a node in the agent network. Grandparents and
- * higher are not included.
- *
- * @param node Node ID for which to find parents
- * @param parentAgents Full list of parent agents in the network
- * @returns The IDs of the immediate parent nodes for the given node or empty array if no parents are found (frontman)
- */
-const getParents = (node, parentAgents) => {
-    return parentAgents.filter((agent) => agent.tools.includes(node)).map((parentNode) => parentNode.origin);
-};
-// "Parent agents" are those that have tools, aka "child agents"
-const getParentAgents = (agentsInNetwork) => agentsInNetwork.length === 1 ? agentsInNetwork : agentsInNetwork.filter((agent) => agent.tools?.length > 0);
-// "Child agents" are those that are declared as tools by other agents
-const getChildAgents = (parentAgents) => {
-    const childAgentsSet = new Set();
-    parentAgents.forEach((agent) => {
-        agent?.tools?.forEach((tool) => {
-            childAgentsSet.add(tool);
-        });
-    });
-    return childAgentsSet;
-};
-// Frontman is defined as the agent that has no parent. There should be only one in the graph.
-// Frontman is one of the parent agents.
-// There is no explicit field that tells us which agent is the frontman, so we determine it by checking
-// which parent agent does not appear in the set of child agents.
-const getFrontman = (parentAgents, childAgents) => parentAgents.find((agent) => !childAgents.has(agent.origin));
 // Generates the properties for an edge in the graph.
 // Common for both radial and linear layouts.
 const getEdgeProperties = (sourceId, targetId, sourceHandle, targetHandle, isAnimated) => {
@@ -102,16 +75,14 @@ const getEdgeProperties = (sourceId, targetId, sourceHandle, targetHandle, isAni
         type: isAnimated ? "plasmaEdge" : undefined,
     };
 };
-export const layoutRadial = (agentCounts, agentsInNetwork, currentConversations, // For plasma edges (live) and node highlighting
-isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggestions = null, isTemporaryNetwork = false) => {
+export const layoutRadial = ({ agentCounts, agentIconSuggestions = null, agentsInNetwork, currentConversations, isAgentNetworkDesignerMode, isAwaitingLlm, isTemporaryNetwork = false, thoughtBubbleEdges, useNativeNames, }) => {
     const nodesInNetwork = [];
     const edgesInNetwork = [];
     // Compute depth of each node using breadth-first traversal
     const nodeDepths = new Map();
     const queue = [];
     const parentAgents = getParentAgents(agentsInNetwork);
-    const childAgents = getChildAgents(parentAgents);
-    const frontman = getFrontman(parentAgents, childAgents);
+    const frontman = getFrontman(agentsInNetwork);
     if (frontman) {
         // Add the frontman node to the network
         queue.push({ id: frontman.origin, depth: 0 });
@@ -186,7 +157,7 @@ isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggesti
                 type: AGENT_NODE_TYPE_NAME,
                 data: {
                     agentCounts,
-                    agentName: cleanUpAgentName(nodeId),
+                    agentName: useNativeNames ? nodeId : cleanUpAgentName(nodeId),
                     depth,
                     displayAs: agentsInNetwork.find((a) => a.origin === nodeId)?.display_as,
                     // Use current conversations for node highlighting (cleared at end)
@@ -216,14 +187,12 @@ isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggesti
     edgesInNetwork.push(...thoughtBubbleEdgesToAdd);
     return { nodes: nodesInNetwork, edges: edgesInNetwork };
 };
-export const layoutLinear = (agentCounts, agentsInNetwork, currentConversations, // For plasma edges (live) and node highlighting
-isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggestions = null, isTemporaryNetwork = false) => {
+export const layoutLinear = ({ agentCounts, agentIconSuggestions = null, agentsInNetwork, currentConversations, isAgentNetworkDesignerMode, isAwaitingLlm, isTemporaryNetwork = false, thoughtBubbleEdges, useNativeNames, }) => {
     const nodesInNetwork = [];
     const edgesInNetwork = [];
     // Do these calculations outside the loop for efficiency
     const parentAgents = getParentAgents(agentsInNetwork);
-    const childAgents = getChildAgents(parentAgents);
-    const frontman = getFrontman(parentAgents, childAgents);
+    const frontman = getFrontman(agentsInNetwork);
     agentsInNetwork.forEach(({ origin: nodeId }) => {
         const parentIds = getParents(nodeId, parentAgents);
         const isFrontman = frontman?.origin === nodeId;
@@ -232,7 +201,7 @@ isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggesti
             type: AGENT_NODE_TYPE_NAME,
             data: {
                 agentCounts,
-                agentName: cleanUpAgentName(nodeId),
+                agentName: useNativeNames ? nodeId : cleanUpAgentName(nodeId),
                 displayAs: agentsInNetwork.find((a) => a.origin === nodeId)?.display_as,
                 // Use current conversations for node highlighting (cleared at end)
                 getConversations: () => currentConversations,

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

@@ -0,0 +1,21 @@
+import { ConnectivityInfo } from "../../../generated/neuro-san/NeuroSanClient.js";
+export declare const getParentAgents: <T extends ConnectivityInfo>(agents: readonly T[]) => readonly T[];
+/**
+ * Determines the frontman of an agent network — the single source of truth for "who is the frontman".
+ *
+ * The frontman is the agent with no parent: a "parent" agent (one that has tools) that is not itself
+ * listed as a tool by any other agent. A lone single-agent network is its own frontman. Returns
+ * undefined when no agent qualifies (e.g. a fully cyclic network); callers decide how to fall back.
+ *
+ * Consumed by the graph layouts (to seed the depth-0 node) and by the network import flow.
+ */
+export declare const getFrontman: <T extends ConnectivityInfo>(agents: readonly T[]) => T | undefined;
+/**
+ * Returns the "origins" (node names) of the _immediate_ parents of a node in the agent network. Grandparents and
+ * higher are not included.
+ *
+ * @param node Node ID for which to find parents
+ * @param parentAgents Full list of parent agents in the network
+ * @returns The IDs of the immediate parent nodes for the given node or empty array if no parents are found (frontman)
+ */
+export declare const getParents: (node: string, parentAgents: readonly ConnectivityInfo[]) => string[];