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

package/dist/components/AgentChat/ChatCommon/ChatCommon.js

@@ -50,16 +50,17 @@ import { sendLlmRequest, StreamingUnit } from "../../../controller/llm/LlmChat.j
 import { ChatMessageType } from "../../../generated/neuro-san/NeuroSanClient.js";
 import { useAgentChatHistoryStore } from "../../../state/ChatHistory.js";
 import { useSettingsStore } from "../../../state/Settings.js";
+import { toDisplayName } from "../../../utils/AgentName.js";
 import { downloadFile, toSafeFilename } from "../../../utils/File.js";
 import { hasOnlyWhitespace } from "../../../utils/text.js";
 import { getZIndex } from "../../../utils/zIndexLayers.js";
 import { ConfirmationModal } from "../../Common/ConfirmationModal.js";
 import { AGENT_NETWORK_DESIGNER_ID } from "../../MultiAgentAccelerator/const.js";
 import { givesFinalAnswer, isLegacyAgentType } from "../Common/Types.js";
-import { chatMessageFromChunk, checkError, cleanUpAgentName, removeTrailingUuid } from "../Common/Utils.js";
+import { chatMessageFromChunk, checkError } from "../Common/Utils.js";
 import { MicrophoneButton } from "../VoiceChat/MicrophoneButton.js";
 import { cleanupAndStopSpeechRecognition, setupSpeechRecognition } from "../VoiceChat/VoiceChat.js";
-//#endregion
+//#endregion Types and Interfaces
 //#region Constants
 // Define fancy EMPTY constant to avoid linter error about using object literals as default props
 const EMPTY = {};
@@ -81,7 +82,7 @@ const EXPORT_ROLE_LABELS = {
     [MessageRole.Warning]: "Warning",
     [MessageRole.Error]: "Error",
 };
-//#endregion
+//#endregion Constants
 /**
  * Helper function to convert a message role to a label for exporting chat history.
  * @param role The message role to convert
@@ -163,7 +164,7 @@ export const ChatCommon = ({ ref, ...props }) => {
         };
     // Keeps track of whether the agent completed its task
     const succeeded = useRef(false);
-    const networkDisplayName = useMemo(() => (useNativeNames ? selectedNetwork : cleanUpAgentName(removeTrailingUuid(selectedNetwork))), [selectedNetwork, useNativeNames]);
+    const networkDisplayName = useMemo(() => toDisplayName(selectedNetwork, useNativeNames), [selectedNetwork, useNativeNames]);
     useEffect(() => {
         // Set up speech recognition
         const handlers = setupSpeechRecognition(setChatInput, setVoiceInputState, speechRecognitionRef);

package/dist/components/AgentChat/ChatCommon/Thinking.js

@@ -5,8 +5,8 @@ import { useMemo } from "react";
 import ReactMarkdown from "react-markdown";
 import { MessageRole } from "./ConversationTurn.js";
 import { ChatMessageType } from "../../../generated/neuro-san/NeuroSanClient.js";
+import { toDisplayName } from "../../../utils/AgentName.js";
 import { AccordionLite } from "../../Common/AccordionLite.js";
-import { cleanUpAgentName, removeTrailingUuid } from "../Common/Utils.js";
 /**
  * Set of message types that should be included in the "thinking" section.
  */
@@ -19,7 +19,7 @@ const THINKING_MESSAGE_TYPES = new Set([
 const DEFAULT_AGENT_NAME = "agent";
 const formatTurn = (turn, useNativeNames) => {
     const agentName = turn.agentName ?? DEFAULT_AGENT_NAME;
-    const displayName = useNativeNames ? agentName : cleanUpAgentName(removeTrailingUuid(agentName));
+    const displayName = toDisplayName(agentName, useNativeNames);
     const headerLine = `**${displayName}**: ${turn.text || ""}`;
     const structureLine = turn.structure == null ? "" : `\n\`${JSON.stringify(turn.structure, null, 2)}\``;
     return `${headerLine}${structureLine}`;

package/dist/components/AgentChat/Common/Utils.d.ts

@@ -3,14 +3,3 @@ export declare const KNOWN_MESSAGE_TYPES: ChatMessageType[];
 export declare const KNOWN_MESSAGE_TYPES_FOR_PLASMA: ChatMessageType[];
 export declare const chatMessageFromChunk: (chunk: string) => ChatMessage | null;
 export declare const checkError: (chatMessageJson: Record<string, unknown>) => string | null;
-/**
- * Strip a trailing canonical (hyphen-delimited) UUID appended to an agent name or
- * reservation_id, e.g. `copy_cat-hello_world-14ecb260-4389-44f3-afad-ea315dfa1966`.
- */
-export declare const removeTrailingUuid: (agentName: string) => string;
-/**
- * Convert FOO_BAR to more human "Foo Bar".
- * @param agentName Agent name in SNAKE_CASE format.
- * @returns User-friendly agent name.
- */
-export declare const cleanUpAgentName: (agentName: string) => string;

package/dist/components/AgentChat/Common/Utils.js

@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import { isEmpty } from "lodash-es";
-import startCase from "lodash-es/startCase";
 import { ChatMessageType } from "../../../generated/neuro-san/NeuroSanClient.js";
 // We ignore any messages that are not of these types
 export const KNOWN_MESSAGE_TYPES = [
@@ -60,18 +59,3 @@ export const checkError = (chatMessageJson) => {
     const { error, traceback, tool } = chatMessageJson;
     return `Error occurred. Error: "${error}", traceback: "${traceback}", tool: "${tool}"`;
 };
-/**
- * Strip a trailing canonical (hyphen-delimited) UUID appended to an agent name or
- * reservation_id, e.g. `copy_cat-hello_world-14ecb260-4389-44f3-afad-ea315dfa1966`.
- */
-export const removeTrailingUuid = (agentName) => {
-    return agentName?.replace(/-[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/u, "");
-};
-/**
- * Convert FOO_BAR to more human "Foo Bar".
- * @param agentName Agent name in SNAKE_CASE format.
- * @returns User-friendly agent name.
- */
-export const cleanUpAgentName = (agentName) => {
-    return startCase(agentName);
-};

package/dist/components/Common/Footer.js

@@ -7,6 +7,8 @@ import { navigateToUrl } from "../../utils/BrowserNavigation.js";
 const HeaderLine = styled("h6")({
     fontWeight: "bold",
     fontSize: "smaller",
+    margin: 0,
+    marginBottom: "0.9rem",
 });
 const LinkDivider = styled("div")({
     border: "1px solid var(--bs-accent3-medium)",
@@ -16,6 +18,7 @@ const LinkDivider = styled("div")({
 const FooterSectionHeader = styled("div")({
     display: "inline-flex",
     flexDirection: "column",
+    alignItems: "flex-start",
     marginTop: "0.1rem",
 });
 const FooterItemLink = styled("a")(({ theme }) => ({
@@ -31,6 +34,7 @@ const FooterItemLink = styled("a")(({ theme }) => ({
 const FooterContainer = styled("footer")({
     backgroundColor: "var(--bs-primary)",
     borderTop: "var(--bs-border-width) var(--bs-border-style) var(--bs-gray-lighter)",
+    alignItems: "flex-start",
     columnGap: "60px",
     display: "flex",
     justifyContent: "center",

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

@@ -33,7 +33,7 @@ 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 { 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";
@@ -53,7 +53,8 @@ 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 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.
@@ -65,15 +66,17 @@ const DOCK_PROMPT_PLACEHOLDER = "Describe a change to the network";
  * 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;
@@ -319,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();
@@ -350,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",
@@ -359,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);
@@ -377,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)
@@ -390,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",
@@ -423,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();
@@ -432,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;
@@ -441,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);
@@ -454,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);
@@ -643,7 +675,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
                 borderBottom: "1px solid divider",
                 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, { 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: {
+        }, 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}`,
@@ -681,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/AgentFlow/AgentNode.js

@@ -27,7 +27,6 @@ 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 { usePalette, useSettingsStore } from "../../../state/Settings.js";
 import { isLightColor } from "../../../Theme/Theme.js";
 import { getZIndex } from "../../../utils/zIndexLayers.js";
@@ -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/AgentFlow/GraphLayouts.js

@@ -20,7 +20,8 @@ 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 { 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";
@@ -75,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 = [];
@@ -119,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) {
@@ -159,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
@@ -193,7 +196,7 @@ export const layoutLinear = ({ agentCounts, agentIconSuggestions = null, agentsI
     // Do these calculations outside the loop for efficiency
     const parentAgents = getParentAgents(agentsInNetwork);
     const frontman = getFrontman(agentsInNetwork);
-    agentsInNetwork.forEach(({ origin: nodeId }) => {
+    agentsInNetwork.forEach(({ display_as: displayAs, origin: nodeId }) => {
         const parentIds = getParents(nodeId, parentAgents);
         const isFrontman = frontman?.origin === nodeId;
         nodesInNetwork.push({
@@ -202,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

@@ -9,7 +9,7 @@ export declare const getParentAgents: <T extends ConnectivityInfo>(agents: reado
  *
  * 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;
+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.

package/dist/components/MultiAgentAccelerator/MultiAgentAccelerator.js

@@ -15,11 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import StopCircle from "@mui/icons-material/StopCircle";
-import Backdrop from "@mui/material/Backdrop";
 import Box from "@mui/material/Box";
-import CircularProgress from "@mui/material/CircularProgress";
 import Grid from "@mui/material/Grid";
-import Paper from "@mui/material/Paper";
 import Slide from "@mui/material/Slide";
 import { useTheme } from "@mui/material/styles";
 import Tooltip from "@mui/material/Tooltip";
@@ -32,20 +29,20 @@ import { getUpdatedAgentCounts } from "./AgentCounts.js";
 import { AgentFlow } from "./AgentFlow/AgentFlow.js";
 import { extractAgentNetworkDesignerProgress } from "./AgentNetworkDesigner.js";
 import { AGENT_NETWORK_DEFINITION_KEY, AGENT_NETWORK_DESIGNER_ID, AGENT_NETWORK_HOCON, AGENT_NETWORK_NAME_KEY, EXPIRED_NETWORKS_CHECK_INTERVAL_MS, GRACE_PERIOD_MS, SHOW_TOUR_DELAY_MS, TRIGGER_APP_TOUR_EVENT_NAME, } from "./const.js";
-import { ImportNetworkModal } from "./Sidebar/ImportNetworkModal.js";
 import { Sidebar } from "./Sidebar/Sidebar.js";
-import { extractTemporaryNetworksFromMessage, IMPORT_FAILURE_DETAIL, importNetworkFromJson, isTemporaryNetwork, notifySaveError, streamNetworkDesignerUpsert, } from "./TemporaryNetworks.js";
+import { extractTemporaryNetworksFromMessage, isTemporaryNetwork, notifySaveError, streamNetworkDesignerUpsert, } from "./TemporaryNetworks.js";
 import { MAIN_TOUR_STEPS } from "./Tour/MainTourSteps.js";
 import { getAgentFunction, getAgentNetworks, getConnectivity } from "../../controller/agent/Agent.js";
 import { getAgentIconSuggestions, getNetworkIconSuggestions } from "../../controller/agent/IconSuggestions.js";
 import { useAgentChatHistoryStore } from "../../state/ChatHistory.js";
 import { useTempNetworksStore } from "../../state/TemporaryNetworks.js";
 import { TourPromptState, useTourStore } from "../../state/Tour.js";
+import { toDisplayName } from "../../utils/AgentName.js";
 import { getZIndex } from "../../utils/zIndexLayers.js";
 import { ChatCommon } from "../AgentChat/ChatCommon/ChatCommon.js";
 import { LlmChatButton } from "../AgentChat/Common/LlmChatButton.js";
 import { isLegacyAgentType } from "../AgentChat/Common/Types.js";
-import { chatMessageFromChunk, cleanUpAgentName, removeTrailingUuid } from "../AgentChat/Common/Utils.js";
+import { chatMessageFromChunk } from "../AgentChat/Common/Utils.js";
 import { ConfirmationModal, StyledButton } from "../Common/ConfirmationModal.js";
 import { MUIAlert } from "../Common/MUIAlert.js";
 import { MUIDialog } from "../Common/MUIDialog.js";
@@ -79,8 +76,6 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
     const temporaryNetworks = useTempNetworksStore((state) => state.tempNetworks);
     // Track newly added temp networks so we can highlight them
     const [newlyAddedTemporaryNetworks, setNewlyAddedTemporaryNetworks] = useState(new Set());
-    // True while a file import is in-flight (after modal confirm, before the new network appears)
-    const [isImporting, setIsImporting] = useState(false);
     const [networkIconSuggestions, setNetworkIconSuggestions] = useState({});
     const [agentsInNetwork, setAgentsInNetwork] = useState([]);
     const [sampleQueries, setSampleQueries] = useState([]);
@@ -90,7 +85,7 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
     const [agentIconSuggestions, setAgentIconSuggestions] = useState(null);
     const [selectedNetwork, setSelectedNetwork] = useState(null);
     const [networkDescription, setNetworkDescription] = useState("");
-    const networkDisplayName = useMemo(() => (useNativeNames ? selectedNetwork : cleanUpAgentName(removeTrailingUuid(selectedNetwork))), [selectedNetwork, useNativeNames]);
+    const networkDisplayName = useMemo(() => toDisplayName(selectedNetwork, useNativeNames), [selectedNetwork, useNativeNames]);
     // LLM providers for which BYOK keys are supported by the current network
     const [supportedByokProviders, setSupportedByokProviders] = useState(new Set());
     const neuroSanURL = useSettingsStore((state) => state.settings.externalServices.neuroSanUrl) ?? defaultNeuroSanUrl;
@@ -107,7 +102,6 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
     // State to hold thought bubble edges - avoids duplicates across layout recalculations
     const [thoughtBubbleEdges, setThoughtBubbleEdges] = useState(new Map());
     const [confirmationModalOpen, setConfirmationModalOpen] = useState(false);
-    const [importModalOpen, setImportModalOpen] = useState(false);
     const [tourModalOpen, setTourModalOpen] = useState(false);
     const [haveShownTourModal, setHaveShownTourModal] = useState(false);
     // Memoized key for agent names to trigger icon suggestion updates when the set of agents changes, not just
@@ -167,9 +161,8 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
     // progresses. We read it back here to find the matching temp network and override agent_network_definition in the
     // outgoing request — leaving what's in IndexedDB untouched.
     const designerSlyData = useAgentChatHistoryStore((state) => state.history[AGENT_NETWORK_DESIGNER_ID]?.slyData);
-    const designerNetworkName = isNetworkDesignerMode
-        ? designerSlyData?.[AGENT_NETWORK_NAME_KEY]
-        : undefined;
+    const designerNetworkNameValue = designerSlyData?.[AGENT_NETWORK_NAME_KEY];
+    const designerNetworkName = isNetworkDesignerMode && typeof designerNetworkNameValue === "string" ? designerNetworkNameValue : undefined;
     const designerTempNetwork = designerNetworkName
         ? temporaryNetworks.find((n) => n.agentNetworkName === designerNetworkName)
         : undefined;
@@ -480,35 +473,6 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
             notifySaveError(agentName, e);
         }
     }, [neuroSanURL, username, selectedNetwork]);
-    /**
-     * Handles an import from the ImportNetworkModal: converts the JSON content to a
-     * network definition, streams it through the network designer to obtain a reservation,
-     * then upserts the result into the temporary-networks store and navigates to the new network.
-     */
-    const handleImportNetwork = useCallback(async (agentNetworkName, content) => {
-        setIsImporting(true);
-        try {
-            const result = await importNetworkFromJson(content, agentNetworkName, neuroSanURL, username);
-            if ("failure" in result) {
-                sendNotification(NotificationType.error, `Failed to import "${agentNetworkName}".`, IMPORT_FAILURE_DETAIL[result.failure]);
-                return;
-            }
-            useTempNetworksStore.getState().upsertTempNetworks(result.networks);
-            // An import defines a single network, so the designer returns one reservation. Highlight and
-            // navigate to it; any further entries (none expected) are still upserted above.
-            const newNetworkName = result.networks[0]?.agentInfo.agent_name;
-            if (newNetworkName) {
-                setNewlyAddedTemporaryNetworks(new Set([newNetworkName]));
-                changeSelectedNetwork(newNetworkName);
-            }
-        }
-        catch (e) {
-            notifySaveError(agentNetworkName, e);
-        }
-        finally {
-            setIsImporting(false);
-        }
-    }, [changeSelectedNetwork, neuroSanURL, username]);
     const onStreamingStarted = useCallback(() => {
         // Reset agent counts
         setAgentCounts(new Map());
@@ -582,7 +546,7 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
                 setIsStreaming(true);
             }, children: _jsx(Grid, { id: "multi-agent-accelerator-grid-sidebar", size: enableZenMode && isStreaming ? 0 : 3.25, sx: {
                     height: "100%",
-                }, children: _jsx(Sidebar, { id: "multi-agent-accelerator-sidebar", isAwaitingLlm: isAwaitingLlm, isImporting: isImporting, networkIconSuggestions: networkIconSuggestions, networks: networks, neuroSanServerURL: neuroSanURL, newlyAddedTemporaryNetworks: newlyAddedTemporaryNetworks, onDeleteNetwork: handleDeleteNetwork, onEditNetwork: handleEditNetwork, onImportClick: () => setImportModalOpen(true), setSelectedNetwork: (newNetwork) => changeSelectedNetwork(newNetwork), temporaryNetworks: temporaryNetworks }) }) }));
+                }, children: _jsx(Sidebar, { id: "multi-agent-accelerator-sidebar", isAwaitingLlm: isAwaitingLlm, networkIconSuggestions: networkIconSuggestions, networks: networks, neuroSanServerURL: neuroSanURL, newlyAddedTemporaryNetworks: newlyAddedTemporaryNetworks, onDeleteNetwork: handleDeleteNetwork, onEditNetwork: handleEditNetwork, setSelectedNetwork: (newNetwork) => changeSelectedNetwork(newNetwork), temporaryNetworks: temporaryNetworks }) }) }));
     };
     const getCenterPanel = () => {
         return (_jsx(Grid, { id: "multi-agent-accelerator-grid-agent-flow", size: enableZenMode && isStreaming ? 18 : 8.25, sx: {
@@ -620,7 +584,7 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
                             },
                         }, children: _jsx(StopCircle, { fontSize: "large", id: "stop-button-icon" }) }) }) })) }));
     };
-    const getDeleteNetworkConfirmationModal = () => confirmationModalOpen ? (_jsx(ConfirmationModal, { id: "delete-network-confirmation-modal", content: `The network "${cleanUpAgentName(removeTrailingUuid(networkToBeDeleted))}" will be deleted. ` +
+    const getDeleteNetworkConfirmationModal = () => confirmationModalOpen ? (_jsx(ConfirmationModal, { id: "delete-network-confirmation-modal", content: `The network "${toDisplayName(networkToBeDeleted)}" will be deleted. ` +
             "This action cannot be undone. Are you sure you want to proceed?", handleCancel: () => {
             setConfirmationModalOpen(false);
             setNetworkToBeDeleted(null);
@@ -635,17 +599,6 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
             setNetworkToBeDeleted(null);
             setConfirmationModalOpen(false);
         }, title: "Delete Network" })) : null;
-    const getImportNetworkModal = () => (_jsx(ImportNetworkModal, { existingNetworkNames: temporaryNetworks.map((n) => n.agentNetworkName), isOpen: importModalOpen, onClose: () => setImportModalOpen(false), onImport: handleImportNetwork }));
-    // Blocking overlay shown while an imported network is being created on the backend.
-    const getImportBackdrop = () => (_jsx(Backdrop, { id: "multi-agent-accelerator-import-backdrop", "data-testid": "multi-agent-accelerator-import-backdrop", open: isImporting, sx: { zIndex: getZIndex(3, theme) }, children: _jsxs(Paper, { elevation: 6, role: "status", "aria-live": "polite", sx: {
-                display: "flex",
-                alignItems: "center",
-                gap: 2,
-                px: 4,
-                py: 2.5,
-                borderRadius: 2,
-                maxWidth: 480,
-            }, children: [_jsx(CircularProgress, { id: "multi-agent-accelerator-import-spinner", size: 24 }), _jsx(Typography, { id: "multi-agent-accelerator-import-title", variant: "body1", sx: { fontWeight: "bold" }, children: "Importing network..." })] }) }));
     const getTourModal = () => tourModalOpen && (_jsx(MUIDialog, { contentSx: { fontSize: "0.8rem", minWidth: "550px", paddingTop: "0" }, footer: _jsxs(_Fragment, { children: [_jsx(StyledButton, { id: "tour-dont-show-again", onClick: () => {
                         setTourStatus(TourPromptState.DontShowAgain);
                         dismissTourModal();
@@ -694,7 +647,7 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
                 textAlign: "center",
             },
         }, children: _jsxs(Typography, { sx: { fontSize: "larger" }, children: ["API key(s) required for at least one of these providers:", " ", _jsx("strong", { children: [...getMissingApiKeys()].join(", ") }), ". Please add the required key(s) in \"Settings\" to use this Network."] }) }));
-    return (_jsxs(_Fragment, { children: [getMissingApiKeysAlert(), Tour, getTourModal(), getProgressPopper(), getDeleteNetworkConfirmationModal(), getImportNetworkModal(), getImportBackdrop(), _jsxs(Grid, { id: "multi-agent-accelerator-grid", container: true, columns: 18, sx: {
+    return (_jsxs(_Fragment, { children: [getMissingApiKeysAlert(), Tour, getTourModal(), getProgressPopper(), getDeleteNetworkConfirmationModal(), _jsxs(Grid, { id: "multi-agent-accelerator-grid", container: true, columns: 18, sx: {
                     display: "flex",
                     flex: 1,
                     height: "85%",

package/dist/components/MultiAgentAccelerator/Sidebar/AgentNetworkTreeItem.d.ts

@@ -1,5 +1,7 @@
 import { TreeItemProps } from "@mui/x-tree-view/TreeItem";
 import { FC } from "react";
+export declare const EDIT_NETWORK_LABEL = "Edit this network";
+export declare const DOWNLOAD_NETWORK_DEFINITION_LABEL = "Download network definition";
 export interface AgentNetworkNodeProps extends TreeItemProps {
     readonly onDeleteNetwork?: (network: string, isExpired: boolean) => void;
     readonly onEditNetwork?: (network: string) => void;