@cognizant-ai-lab/ui-common 1.8.0 → 1.10.0

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

@@ -33,47 +33,50 @@ import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import Tooltip from "@mui/material/Tooltip";
 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 { 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 { 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";
-// #endregion: Types
-// #region: Constants
-// Timeout for thought bubbles is set to 10 seconds
+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
+const AGENT_SAVE_TIMEOUT_MS = 60_000;
+const DOCK_STREAM_TIMEOUT_MS = 120_000;
 const THOUGHT_BUBBLE_TIMEOUT_MS = 10_000;
 // 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.
  */
-const streamNetworkDesignerPrompt = async (neuroSanURL, signal, userPrompt, currentDefinition, agentNetworkName, currentUser) => {
+const applyNetworkDesignerChanges = async (neuroSanURL, signal, userPrompt, currentDefinition, agentNetworkName, currentUser) => {
     let newNetworks = [];
     await sendChatQuery(neuroSanURL, signal, userPrompt, AGENT_NETWORK_DESIGNER_ID, (chunk) => {
         const chatMessage = chatMessageFromChunk(chunk);
-        if (!chatMessage)
+        if (!chatMessage) {
             return;
+        }
         const reservations = extractReservations(chatMessage);
-        if (reservations.length === 0)
+        if (reservations.length === 0) {
             return;
+        }
         const networkHocon = extractNetworkHocon(chatMessage);
         const agentNetworkNameFromMessage = chatMessage.sly_data?.[AGENT_NETWORK_NAME_KEY];
         const networkName = agentNetworkName ?? agentNetworkNameFromMessage;
@@ -86,7 +89,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();
@@ -304,26 +322,40 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
             detail: "Nothing was changed. Your prompt is restored below.",
         });
     }, [showDockBanner]);
-    const handleNodeClick = useCallback((_event, node) => {
+    const openNodeEditor = useCallback((node) => {
         // Popup is only available for temporary networks.
         if (!isTemporaryNetwork)
             return;
         // Only llm_agent nodes support instructions/description editing.
         if (!isEditableAgent(node.data.displayAs))
             return;
-        // Find the clicked agent's existing instructions and description from the temp network definition.
+        // Find the agent's existing instructions and description from the temp network definition.
         const currentTempNetwork = networkId
             ? tempNetworks.find((n) => n.agentInfo.agent_name === networkId)
             : undefined;
-        const found = (currentTempNetwork?.agentNetworkDefinition ?? []).find((e) => e.origin === node.id);
+        const currentAgentDefinition = currentTempNetwork?.agentNetworkDefinition?.find((e) => e.origin === node.id);
         setSelectedAgent({
             agentId: node.id,
             agentName: node.data.agentName,
-            initialInstructions: found?.instructions ?? "",
-            initialDescription: found?.description ?? "",
+            initialInstructions: currentAgentDefinition?.instructions ?? "",
+            initialDescription: currentAgentDefinition?.description ?? "",
         });
         setIsPopupOpen(true);
     }, [tempNetworks, isTemporaryNetwork, networkId]);
+    const handleNodeClick = useCallback((_event, node) => openNodeEditor(node), [openNodeEditor]);
+    // ReactFlow makes nodes focusable and selects them on Enter, but it never fires onNodeClick from the keyboard.
+    // Route Enter on a focused node to the editor so keyboard users can open a node the same way a click does.
+    const handleNodeKeyDown = useCallback((event) => {
+        if (event.key !== "Enter")
+            return;
+        const target = event.target;
+        if (!(target instanceof HTMLElement))
+            return;
+        const nodeId = target.closest(".react-flow__node")?.dataset["id"];
+        const node = nodeId ? nodes.find((n) => n.id === nodeId) : undefined;
+        if (node)
+            openNodeEditor(node);
+    }, [nodes, openNodeEditor]);
     const handlePopupClose = useCallback(() => {
         // If a save is in-flight, abort it immediately so the stream doesn't hang.
         saveAbortControllerRef.current?.abort();
@@ -335,7 +367,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
      * 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) => {
+    const saveUpdates = useCallback((newNetworksFromSave, currentAgentNetworkName) => {
         if (newNetworksFromSave.length === 0) {
             showDockBanner({
                 severity: "error",
@@ -344,6 +376,9 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
             });
             return false;
         }
+        // Find the returned reservation that stands in for the current network (matched by name). When
+        // present, persist every returned network, then carry the open network's chat history over to the
+        // replacement and notify the parent so it can navigate to the new reservation.
         const replacement = newNetworksFromSave.find((n) => n.agentNetworkName === currentAgentNetworkName);
         if (replacement) {
             useTempNetworksStore.getState().upsertTempNetworks(newNetworksFromSave);
@@ -362,7 +397,8 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
         return false;
     }, [networkId, onNetworkReplaced, showDockBanner]);
     const handleDockApply = useCallback(async () => {
-        if (!dockPrompt.trim() || !neuroSanURL || !currentUser)
+        const readyToApplyEdit = Boolean(dockPrompt.trim() && neuroSanURL && currentUser);
+        if (!readyToApplyEdit)
             return;
         const currentTempNetwork = networkId
             ? tempNetworks.find((n) => n.agentInfo.agent_name === networkId)
@@ -375,11 +411,11 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
         const timeoutId = setTimeout(() => {
             hasTimedOut = true;
             controller.abort();
-        }, 120_000); // 2 min timeout
+        }, DOCK_STREAM_TIMEOUT_MS);
         try {
-            const newNetworks = await streamNetworkDesignerPrompt(neuroSanURL, controller.signal, dockPrompt, currentDefinition, currentTempNetwork?.agentNetworkName, currentUser);
-            const applied = applyNetworkSaveResult(newNetworks, currentTempNetwork?.agentNetworkName);
-            if (applied) {
+            const newNetworks = await applyNetworkDesignerChanges(neuroSanURL, controller.signal, dockPrompt, currentDefinition, currentTempNetwork?.agentNetworkName, currentUser);
+            const appliedSuccess = saveUpdates(newNetworks, currentTempNetwork?.agentNetworkName);
+            if (appliedSuccess) {
                 setDockPrompt("");
                 showDockBanner({
                     severity: "success",
@@ -408,7 +444,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
             dockAbortControllerRef.current = null;
             setIsDockStreaming(false);
         }
-    }, [applyNetworkSaveResult, currentUser, dockPrompt, networkId, neuroSanURL, showDockBanner, tempNetworks]);
+    }, [saveUpdates, currentUser, dockPrompt, networkId, neuroSanURL, showDockBanner, tempNetworks]);
     const handleExitEditMode = useCallback(() => {
         if (isDockStreaming) {
             dockAbortControllerRef.current?.abort();
@@ -417,6 +453,18 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
         }
         onExitEditMode?.();
     }, [isDockStreaming, onExitEditMode]);
+    // Pressing Escape exits edit mode, mirroring the explicit exit button. Skip while the
+    // node popup is open so Escape closes the popup first rather than the whole edit mode.
+    useEffect(() => {
+        if (!isEditMode || isPopupOpen)
+            return undefined;
+        const handleEscape = (e) => {
+            if (e.key === "Escape")
+                handleExitEditMode();
+        };
+        document.addEventListener("keydown", handleEscape);
+        return () => document.removeEventListener("keydown", handleEscape);
+    }, [isEditMode, isPopupOpen, handleExitEditMode]);
     const handlePopupSave = useCallback(async (agentName, instructionsText, descriptionText) => {
         if (!selectedAgent)
             return;
@@ -426,11 +474,11 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
             : undefined;
         // Produce a new array with the saved agent's fields updated; all other entries pass through unchanged.
         const currentDefinitions = currentTempNetwork?.agentNetworkDefinition ?? [];
-        const updated = currentDefinitions.map((entry) => entry.origin === selectedAgent.agentId
+        const updatedDefinitions = currentDefinitions.map((entry) => entry.origin === selectedAgent.agentId
             ? { ...entry, instructions: instructionsText, description: descriptionText }
             : entry);
         if (networkId) {
-            updateTempNetworkDefinition(networkId, updated);
+            updateTempNetworkDefinition(networkId, updatedDefinitions);
         }
         if (!onSaveAgent) {
             setIsPopupOpen(false);
@@ -439,10 +487,9 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
         setIsSavingAgent(true);
         const saveController = new AbortController();
         saveAbortControllerRef.current = saveController;
-        const saveTimeoutId = setTimeout(() => saveController.abort(new DOMException("Save timed out", "TimeoutError")), 60_000 // 1 min timeout
-        );
+        const saveTimeoutId = setTimeout(() => saveController.abort(new DOMException("Save timed out", "TimeoutError")), AGENT_SAVE_TIMEOUT_MS);
         try {
-            await onSaveAgent(agentName, updated, currentTempNetwork?.agentNetworkName, saveController.signal);
+            await onSaveAgent(agentName, updatedDefinitions, currentTempNetwork?.agentNetworkName, saveController.signal);
         }
         catch (e) {
             console.error(`Error saving network ${agentName}. See onSaveAgent implementation for details.`, e);
@@ -466,10 +513,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, it 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
@@ -529,7 +573,6 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
                     }, size: "small", sx: {
                         marginLeft: theme.spacing(2),
                         "& .MuiToggleButton-root": {
-                            backgroundColor: theme.palette.background.paper,
                             borderColor: theme.palette.divider,
                             color: theme.palette.text.primary,
                             minHeight: 22,
@@ -554,7 +597,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
                                 height: "1rem",
                             }, 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) => {
         return isActive ? theme.palette.action.selected : undefined;
     };
@@ -593,12 +636,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,
@@ -623,18 +664,18 @@ 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, onKeyDown: handleNodeKeyDown, 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}`,
@@ -672,7 +713,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
                             px: 1,
                             py: 0.5,
                             alignItems: "center",
-                        }, children: [_jsx(TextField, { fullWidth: true, placeholder: DOCK_PROMPT_PLACEHOLDER, variant: "outlined", size: "small", value: dockPrompt, onChange: (e) => setDockPrompt(e.target.value), onKeyDown: (e) => {
+                        }, children: [_jsx(TextField, { autoFocus: true, 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();

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}

@@ -27,11 +27,10 @@ import { keyframes, styled, useTheme } from "@mui/material/styles";
 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 { usePalette, useSettingsStore } from "../../state/Settings.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
@@ -154,7 +153,6 @@ export const AgentNode = (props) => {
     const glowColor = isLightColor(theme.palette.background.default)
         ? 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
@@ -165,7 +163,7 @@ export const AgentNode = (props) => {
         .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: {
+    const getEditButton = () => (_jsx(Tooltip, { title: "Edit", placement: "top", disableInteractive: true, children: _jsx(IconButton, { className: "agent-node-edit-icon", "aria-hidden": true, tabIndex: -1, sx: {
                 position: "absolute",
                 top: 0,
                 right: 0,
@@ -197,13 +195,17 @@ export const AgentNode = (props) => {
                 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: {
+    const getNode = () => (_jsxs(AnimatedNode, { id: agentId, "data-testid": agentId, glowColor: glowColor, isActive: isActiveAgent, 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 } })] }));
+            // Reveal the edit icon on hover, or when a keyboard user tabs to the node.
+            "& .agent-node-edit-icon": { opacity: 0, transition: "opacity 0.15s ease-in-out" },
+            "&:hover .agent-node-edit-icon": { opacity: 1 },
+            ".react-flow__node:focus-visible & .agent-node-edit-icon": { opacity: 1 },
+        }, children: [getDisplayAsIcon(), 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.d.ts → AgentFlow/GraphLayouts.d.ts}

@@ -1,9 +1,9 @@
 import { Edge, Node as RFNode } from "@xyflow/react";
-import { AgentConversation } from "./AgentConversations.js";
+import { AgentConversation } from "../AgentConversations.js";
 import { AgentNodeProps } from "./AgentNode.js";
-import { ThoughtBubbleEdgeShape } from "./ThoughtBubbleEdge.js";
-import { AgentIconSuggestions } from "../../controller/Types/AgentIconSuggestions.js";
-import { ConnectivityInfo } from "../../generated/neuro-san/NeuroSanClient.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.

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

@@ -20,9 +20,11 @@ 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 } from "../../../utils/AgentName.js";
+import { 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 +62,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,6 +76,8 @@ const getEdgeProperties = (sourceId, targetId, sourceHandle, targetHandle, isAni
         type: isAnimated ? "plasmaEdge" : undefined,
     };
 };
+// An agent is editable if it belongs to a temporary network and is of an editable type.
+const isNodeEditable = (displayAs, isTemporaryNetwork) => isTemporaryNetwork && isEditableAgent(displayAs);
 export const layoutRadial = ({ agentCounts, agentIconSuggestions = null, agentsInNetwork, currentConversations, isAgentNetworkDesignerMode, isAwaitingLlm, isTemporaryNetwork = false, thoughtBubbleEdges, useNativeNames, }) => {
     const nodesInNetwork = [];
     const edgesInNetwork = [];
@@ -109,8 +85,7 @@ export const layoutRadial = ({ agentCounts, agentIconSuggestions = null, agentsI
     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 });
@@ -147,6 +122,7 @@ export const layoutRadial = ({ agentCounts, agentIconSuggestions = null, agentsI
             const x = DEFAULT_FRONTMAN_X_POS + radius * Math.cos(angle);
             const y = DEFAULT_FRONTMAN_Y_POS + radius * Math.sin(angle);
             const isFrontman = frontman?.origin === nodeId;
+            const displayAs = agentsInNetwork.find((a) => a.origin === nodeId)?.display_as;
             const parentNodes = getParents(nodeId, parentAgents);
             // Create an edge from each parent node to this node
             for (const parentNode of parentNodes) {
@@ -187,13 +163,12 @@ export const layoutRadial = ({ agentCounts, agentIconSuggestions = null, agentsI
                     agentCounts,
                     agentName: useNativeNames ? nodeId : cleanUpAgentName(nodeId),
                     depth,
-                    displayAs: agentsInNetwork.find((a) => a.origin === nodeId)?.display_as,
+                    displayAs,
                     // Use current conversations for node highlighting (cleared at end)
                     getConversations: () => currentConversations,
                     isAwaitingLlm,
                     agentIconSuggestion: agentIconSuggestions?.[nodeId],
-                    isEditable: isTemporaryNetwork &&
-                        isEditableAgent(agentsInNetwork.find((a) => a.origin === nodeId)?.display_as),
+                    isEditable: isNodeEditable(displayAs, isTemporaryNetwork),
                 },
                 // position: allow for Frontman being larger
                 position: isFrontman
@@ -220,9 +195,8 @@ export const layoutLinear = ({ agentCounts, agentIconSuggestions = null, agentsI
     const edgesInNetwork = [];
     // Do these calculations outside the loop for efficiency
     const parentAgents = getParentAgents(agentsInNetwork);
-    const childAgents = getChildAgents(parentAgents);
-    const frontman = getFrontman(parentAgents, childAgents);
-    agentsInNetwork.forEach(({ origin: nodeId }) => {
+    const frontman = getFrontman(agentsInNetwork);
+    agentsInNetwork.forEach(({ display_as: displayAs, origin: nodeId }) => {
         const parentIds = getParents(nodeId, parentAgents);
         const isFrontman = frontman?.origin === nodeId;
         nodesInNetwork.push({
@@ -231,13 +205,13 @@ export const layoutLinear = ({ agentCounts, agentIconSuggestions = null, agentsI
             data: {
                 agentCounts,
                 agentName: useNativeNames ? nodeId : cleanUpAgentName(nodeId),
-                displayAs: agentsInNetwork.find((a) => a.origin === nodeId)?.display_as,
+                displayAs,
                 // Use current conversations for node highlighting (cleared at end)
                 getConversations: () => currentConversations,
                 isAwaitingLlm,
                 depth: undefined, // Depth will be computed later,
                 agentIconSuggestion: agentIconSuggestions?.[nodeId],
-                isEditable: isTemporaryNetwork && isEditableAgent(agentsInNetwork.find((a) => a.origin === nodeId)?.display_as),
+                isEditable: isNodeEditable(displayAs, isTemporaryNetwork),
             },
             position: isFrontman ? { x: DEFAULT_FRONTMAN_X_POS, y: DEFAULT_FRONTMAN_Y_POS } : { x: 0, y: 0 },
             style: {

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: (agents: readonly ConnectivityInfo[]) => ConnectivityInfo | 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[];

package/dist/components/MultiAgentAccelerator/AgentFlow/GraphStructure.js

@@ -0,0 +1,27 @@
+// "Parent agents" are those that have tools, aka agents with "child agents". A lone single-agent
+// network is treated as its own parent.
+export const getParentAgents = (agents) => agents.length === 1 ? agents : agents.filter((agent) => (agent.tools?.length ?? 0) > 0);
+/**
+ * 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 const getFrontman = (agents) => {
+    const parentAgents = getParentAgents(agents);
+    // Child agents are everything referenced as a tool by a parent.
+    const childAgents = new Set(parentAgents.flatMap((agent) => agent.tools ?? []));
+    return parentAgents.find((agent) => agent.origin !== undefined && !childAgents.has(agent.origin));
+};
+/**
+ * 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 const getParents = (node, parentAgents) => parentAgents.filter((agent) => agent.tools.includes(node)).map((parentNode) => parentNode.origin);

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

@@ -0,0 +1,7 @@
+import { EdgeProps } from "@xyflow/react";
+import { FC } from "react";
+export type PlasmaEdgeProps = {
+    readonly maxParticles?: number;
+    readonly particlesPerFrame?: number;
+};
+export declare const PlasmaEdge: FC<EdgeProps & PlasmaEdgeProps>;