@cognizant-ai-lab/ui-common 1.4.2 → 1.5.0

package/dist/components/MultiAgentAccelerator/MultiAgentAccelerator.js

@@ -18,48 +18,35 @@ import StopCircle from "@mui/icons-material/StopCircle";
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
 import Slide from "@mui/material/Slide";
+import { useTheme } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
 import { ReactFlowProvider } from "@xyflow/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { extractConversations } from "./AgentConversations.js";
 import { getUpdatedAgentCounts } from "./AgentCounts.js";
 import { AgentFlow } from "./AgentFlow.js";
-import { TEMPORARY_NETWORK_FOLDER } from "./const.js";
+import { extractAgentNetworkDesignerProgress } from "./AgentNetworkDesigner.js";
+import { AGENT_NETWORK_DEFINITION_KEY, AGENT_NETWORK_DESIGNER_ID, AGENT_NETWORK_HOCON, AGENT_NETWORK_NAME_KEY, } from "./const.js";
 import { Sidebar } from "./Sidebar/Sidebar.js";
-import { extractNetworkHocon, extractReservations } from "./TemporaryNetworks.js";
+import { convertReservationsToNetworks, extractNetworkHocon, extractReservations } from "./TemporaryNetworks.js";
 import { getAgentIconSuggestions, getAgentNetworks, getConnectivity, getNetworkIconSuggestions, } from "../../controller/agent/Agent.js";
 import { useSettingsStore } from "../../state/Settings.js";
 import { useTempNetworksStore } from "../../state/TemporaryNetworks.js";
 import { useLocalStorage } from "../../utils/useLocalStorage.js";
-import { ChatCommon } from "../AgentChat/ChatCommon.js";
-import { SmallLlmChatButton } from "../AgentChat/LlmChatButton.js";
-import { chatMessageFromChunk, cleanUpAgentName, removeTrailingUuid } from "../AgentChat/Utils.js";
+import { getZIndex } from "../../utils/zIndexLayers.js";
+import { ChatCommon } from "../AgentChat/ChatCommon/ChatCommon.js";
+import { SmallLlmChatButton } from "../AgentChat/Common/LlmChatButton.js";
+import { chatMessageFromChunk, cleanUpAgentName, removeTrailingUuid } from "../AgentChat/Common/Utils.js";
 import { ConfirmationModal } from "../Common/ConfirmationModal.js";
 import { closeNotification, NotificationType, sendNotification } from "../Common/notification.js";
+// Check for expired networks every this many milliseconds
+const EXPIRED_NETWORKS_CHECK_INTERVAL_MS = 10 * 1000;
 // Display expired temporary networks for this amount of time after they expire so users can see what happened
-const GRACE_PERIOD_MS = 5 * 60 * 1000; // 5 minutes
+export const GRACE_PERIOD_MS = 5 * 60 * 1000; // 5 minutes
 // Animation time for the left and right panels to slide in or out when launching the animation
 const GROW_ANIMATION_TIME_MS = 800;
-/**
- * Helper function to convert agent reservations received from the backend into temporary networks that can be displayed
- * in the tree.
- * @param agentReservations List of "agent reservations" (temporary networks) received from the backend
- * @param networkHocon Optional network HOCON string that may be included in the same message as the
- * reservations. Note: for now we assume that all reservations are associated with the same network definition.
- * This will fail if ever we get multiple reservations for different networks in a single chat stream, but that is
- * not a valid scenario currently; we are focusing on Agent Network Design which has a simple output.
- * @returns List of TemporaryNetwork objects that can be displayed in the UI
- */
-const convertReservationsToNetworks = (agentReservations, networkHocon) => {
-    return agentReservations.map((reservation) => ({
-        reservation,
-        agentInfo: {
-            agent_name: `${TEMPORARY_NETWORK_FOLDER}/${reservation.reservation_id}`,
-            origin: reservation.reservation_id,
-            status: "active",
-        },
-        networkHocon,
-    }));
-};
+// Optimization to avoid creating a new empty map on every render
+const EMPTY_THOUGHT_BUBBLE_EDGES = new Map();
 /**
  * Main Multi-Agent Accelerator component that contains the sidebar, agent flow, and chat components.
  * @param backendNeuroSanApiUrl Initial URL of the backend Neuro-San API. User can change this in the UI.
@@ -67,6 +54,8 @@ const convertReservationsToNetworks = (agentReservations, networkHocon) => {
  * @param userInfo Information about the current user, including userName and userImage.
  */
 export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
+    // MUI theme
+    const theme = useTheme();
     const enableZenMode = useSettingsStore((state) => state.settings.behavior.enableZenMode);
     // Stores whether are currently awaiting LLM response (for knowing when to show spinners)
     const [isAwaitingLlm, setIsAwaitingLlm] = useState(false);
@@ -80,8 +69,12 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
     const [newlyAddedTemporaryNetworks, setNewlyAddedTemporaryNetworks] = useState(new Set());
     const [networkIconSuggestions, setNetworkIconSuggestions] = useState({});
     const [agentsInNetwork, setAgentsInNetwork] = useState([]);
+    // Agents in network under construction by Agent Network Designer -
+    // updated in real time as we receive progress messages from the backend.
+    const [agentsInNetworkDesigner, setAgentsInNetworkDesigner] = useState([]);
     const [agentIconSuggestions, setAgentIconSuggestions] = useState(null);
     const [selectedNetwork, setSelectedNetwork] = useState(null);
+    const networkDisplayName = useMemo(() => cleanUpAgentName(removeTrailingUuid(selectedNetwork)), [selectedNetwork]);
     // Track whether we've shown the info popup so we don't keep bugging the user with it
     const [haveShownPopup, setHaveShownPopup] = useState(false);
     const [customURLLocalStorage, setCustomURLLocalStorage] = useLocalStorage("customAgentNetworkURL", null);
@@ -109,11 +102,30 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
     }, []);
     // Reference to the ChatCommon component to allow external stop button to call its handleStop method
     const chatRef = useRef(null);
+    // Special mode of operation where user is using Agent Network Designer to create a new network
+    const isNetworkDesignerMode = selectedNetwork === AGENT_NETWORK_DESIGNER_ID;
+    // Whether the currently selected network is a temporary network (agent reservation)
+    const isSelectedNetworkTemporary = selectedNetwork !== null && temporaryNetworks.some((n) => n.agentInfo.agent_name === selectedNetwork);
+    // For temp networks, agent_network_definition and agent_network_name live in localStorage (not IndexedDB slyData).
+    // Supply them as extraSlyData so ChatCommon bounces them back to the backend on every request.
+    const currentTempNetwork = isSelectedNetworkTemporary
+        ? temporaryNetworks.find((n) => n.agentInfo.agent_name === selectedNetwork)
+        : undefined;
+    const extraSlyData = currentTempNetwork
+        ? {
+            [AGENT_NETWORK_DEFINITION_KEY]: currentTempNetwork.agentNetworkDefinition,
+            // Use the name the backend originally sent, not the local UUID-based key.
+            ...(currentTempNetwork.agentNetworkName
+                ? { [AGENT_NETWORK_NAME_KEY]: currentTempNetwork.agentNetworkName }
+                : {}),
+            ...(currentTempNetwork.networkHocon ? { [AGENT_NETWORK_HOCON]: currentTempNetwork.networkHocon } : {}),
+        }
+        : undefined;
     // Handle external stop button click - stops streaming and exits zen mode
     const handleExternalStop = useCallback(() => {
         chatRef.current?.handleStop();
         resetState();
-    }, []);
+    }, [resetState]);
     useEffect(() => {
         ;
         (async () => {
@@ -159,8 +171,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
                     closeNotification();
                 }
                 catch (e) {
-                    const networkName = cleanUpAgentName(selectedNetwork);
-                    sendNotification(NotificationType.error, "Connection error", `Unable to get agent list for "${networkName}". Verify that ${neuroSanURL} is a valid ` +
+                    sendNotification(NotificationType.error, "Connection error", `Unable to get agent list for "${networkDisplayName}". Verify that ${neuroSanURL} is a valid ` +
                         `Multi-Agent Accelerator Server. Error: ${e}.`);
                     setAgentsInNetwork([]);
                 }
@@ -169,7 +180,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
                 setAgentsInNetwork([]);
             }
         })();
-    }, [neuroSanURL, selectedNetwork]);
+    }, [networkDisplayName, neuroSanURL, selectedNetwork, userInfo.userName]);
     useEffect(() => {
         ;
         (async () => {
@@ -185,7 +196,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
                 }
             }
         })();
-    }, [agentNamesKey]);
+    }, [agentNamesKey, agentsInNetwork]);
     // Set up handler to allow Escape key to stop the interaction with the LLM.
     useEffect(() => {
         if (!isAwaitingLlm) {
@@ -224,7 +235,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
                 setSelectedNetwork(null);
                 agentCountsRef.current = new Map();
             }
-        }, 10_000); // check every 10s
+        }, EXPIRED_NETWORKS_CHECK_INTERVAL_MS);
         return () => clearInterval(interval);
     }, [temporaryNetworks, selectedNetwork]);
     const onChunkReceived = useCallback((chunk) => {
@@ -241,26 +252,37 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         }
         // Agent hit counts
         agentCountsRef.current = getUpdatedAgentCounts(agentCountsRef.current, chatMessage?.origin);
+        // Agent network designer progress messages
+        if (isNetworkDesignerMode) {
+            const networkInProgress = extractAgentNetworkDesignerProgress(chatMessage);
+            if (networkInProgress?.length > 0) {
+                setAgentsInNetworkDesigner(networkInProgress);
+            }
+        }
         // Temporary networks/reservations
         const reservationsResult = extractReservations(chatMessage);
         // Handle agent reservations (temporary networks) that come in through the chat stream.
         if (reservationsResult?.length > 0) {
             // Retrieve network definition, if present
             const networkHocon = extractNetworkHocon(chatMessage);
-            const newTemporaryNetworks = convertReservationsToNetworks(reservationsResult, networkHocon);
-            const currentNetworks = useTempNetworksStore.getState().tempNetworks;
-            useTempNetworksStore.getState().setTempNetworks([...currentNetworks, ...newTemporaryNetworks]);
-            // record the new temporary networks so we can select them for the user. For now, we only
-            // care about the first one.
-            setNewlyAddedTemporaryNetworks(new Set(newTemporaryNetworks.map((network) => network.agentInfo.agent_name)));
+            const agentNetworkDefinition = chatMessage.sly_data?.[AGENT_NETWORK_DEFINITION_KEY];
+            // Capture the backend's canonical name so we can bounce it back unchanged on future requests.
+            const agentNetworkName = chatMessage.sly_data?.[AGENT_NETWORK_NAME_KEY];
+            const newTemporaryNetworks = convertReservationsToNetworks(reservationsResult, networkHocon, agentNetworkDefinition, agentNetworkName);
+            const upserted = useTempNetworksStore.getState().upsertTempNetworks(newTemporaryNetworks);
+            // Record the new temporary networks so we can highlight them for the user.
+            // For now, we only care about the first one since that's the only active use case
+            setNewlyAddedTemporaryNetworks(new Set(upserted.map((network) => network.agentInfo.agent_name)));
         }
         return true;
-    }, []);
+    }, [isNetworkDesignerMode]);
     const onStreamingStarted = useCallback(() => {
         // Reset agent counts
         agentCountsRef.current = new Map();
         // Reset newly added temporary networks
         setNewlyAddedTemporaryNetworks(new Set());
+        // Reset Agent Network Designer preview
+        setAgentsInNetworkDesigner([]);
         // Show info popup only once per session
         if (!haveShownPopup) {
             sendNotification(NotificationType.info, "Agents working", "Click the stop button or hit Escape to exit.");
@@ -273,8 +295,9 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         // When streaming is complete, clean up any refs and state
         conversationsRef.current = null;
         setCurrentConversations(null);
+        setAgentsInNetworkDesigner([]);
         resetState();
-    }, [newlyAddedTemporaryNetworks]);
+    }, [resetState]);
     const [confirmationModalOpen, setConfirmationModalOpen] = useState(false);
     const handleDeleteNetwork = (networkId, isExpired) => {
         if (isExpired) {
@@ -308,14 +331,23 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
                         height: "100%",
                         maxWidth: 1000,
                         margin: "0 auto",
-                    }, children: _jsx(AgentFlow, { agentCounts: agentCountsRef.current, agentsInNetwork: agentsInNetwork, agentIconSuggestions: agentIconSuggestions, id: "multi-agent-accelerator-agent-flow", currentConversations: currentConversations, isAwaitingLlm: isAwaitingLlm, isStreaming: isStreaming, thoughtBubbleEdges: thoughtBubbleEdges, setThoughtBubbleEdges: setThoughtBubbleEdges }) }) }) }));
+                    }, children: _jsx(AgentFlow, { agentCounts: agentCountsRef.current, agentsInNetwork: agentsInNetwork, agentIconSuggestions: agentIconSuggestions, currentUser: userInfo.userName, id: "multi-agent-accelerator-agent-flow", currentConversations: currentConversations, isAwaitingLlm: isAwaitingLlm, isStreaming: isStreaming, isSelectedNetworkTemporary: isSelectedNetworkTemporary, networkId: isSelectedNetworkTemporary ? selectedNetwork : undefined, neuroSanURL: neuroSanURL, onNetworkReplaced: (oldNetworkId, newNetworkId) => {
+                            if (selectedNetwork === oldNetworkId) {
+                                agentCountsRef.current = new Map();
+                                setSelectedNetwork(newNetworkId);
+                            }
+                        }, thoughtBubbleEdges: thoughtBubbleEdges, setThoughtBubbleEdges: setThoughtBubbleEdges }, "multi-agent-accelerator-agent-flow") }) }) }));
     };
     const getRightPanel = () => {
         return (_jsx(Slide, { id: "multi-agent-accelerator-grid-agent-chat-common-slide", in: !enableZenMode || !isAwaitingLlm, direction: "left", timeout: GROW_ANIMATION_TIME_MS, onExited: () => {
                 setIsStreaming(true);
             }, children: _jsx(Grid, { id: "multi-agent-accelerator-grid-agent-chat-common", size: enableZenMode && isStreaming ? 0 : 6.5, sx: {
                     height: "100%",
-                }, children: _jsx(ChatCommon, { ref: chatRef, neuroSanURL: neuroSanURL, id: "agent-network-ui", currentUser: userInfo.userName, userImage: userInfo.userImage, setIsAwaitingLlm: setIsAwaitingLlm, isAwaitingLlm: isAwaitingLlm, targetAgent: selectedNetwork, onChunkReceived: onChunkReceived, onStreamingComplete: onStreamingComplete, onStreamingStarted: onStreamingStarted, clearChatOnNewAgent: true }, selectedNetwork ?? "no-network") }) }));
+                }, children: _jsx(ChatCommon, { agentGreetings: {
+                        [AGENT_NETWORK_DESIGNER_ID]: "Let's build a network together!",
+                    }, agentPlaceholders: {
+                        [AGENT_NETWORK_DESIGNER_ID]: "Describe in plain language the network you would like to build.",
+                    }, currentUser: userInfo.userName, extraSlyData: extraSlyData, id: "agent-network-ui", isAwaitingLlm: isAwaitingLlm, neuroSanURL: neuroSanURL, onChunkReceived: onChunkReceived, onStreamingComplete: onStreamingComplete, onStreamingStarted: onStreamingStarted, ref: chatRef, setIsAwaitingLlm: setIsAwaitingLlm, targetAgent: selectedNetwork, userImage: userInfo.userImage }, selectedNetwork ?? "no-network") }) }));
     };
     const getStopButton = () => {
         return (_jsx(_Fragment, { children: isAwaitingLlm && enableZenMode && (_jsx(Box, { id: "stop-button-container", sx: {
@@ -336,7 +368,32 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
             setNetworkToBeDeleted(null);
             setConfirmationModalOpen(false);
         }, title: "Delete Network" })) : null;
-    return (_jsxs(_Fragment, { children: [getConfirmationModal(), _jsxs(Grid, { id: "multi-agent-accelerator-grid", container: true, columns: 18, sx: {
+    /**
+     * Popper to show real-time progress of the Agent Network Designer output as we receive it from the backend.
+     * Only displayed when Agent Network Designer is active.
+     */
+    const getProgressPopper = () => (_jsx(Box, { sx: {
+            display: isStreaming && isNetworkDesignerMode ? "block" : "none",
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "600px",
+            height: "600px",
+            zIndex: getZIndex(2, theme),
+        }, children: _jsx(ReactFlowProvider, { children: _jsxs(Box, { sx: {
+                    alignItems: "center",
+                    background: "var(--bs-secondary)",
+                    border: "4px solid var(--bs-yellow)",
+                    display: "flex",
+                    flexDirection: "column",
+                    height: "100%",
+                    justifyContent: "center",
+                    margin: "0 auto",
+                    maxWidth: 1000,
+                    opacity: "95%",
+                    width: "100%",
+                }, children: [_jsx(Typography, { variant: "h6", sx: { padding: "0.5rem 1rem", fontWeight: "bold", color: "white" }, children: "Network Preview" }), agentsInNetworkDesigner?.length > 0 ? (_jsx(AgentFlow, { id: "and-network-preview", agentsInNetwork: agentsInNetworkDesigner, isAgentNetworkDesignerMode: true, isAwaitingLlm: false, isStreaming: false, thoughtBubbleEdges: EMPTY_THOUGHT_BUBBLE_EDGES }, "and-network-preview")) : (_jsx(Typography, { variant: "body1", sx: { color: "white" }, children: "Awaiting status from Agent Network Designer..." }))] }) }) }));
+    return (_jsxs(_Fragment, { children: [getProgressPopper(), getConfirmationModal(), _jsxs(Grid, { id: "multi-agent-accelerator-grid", container: true, columns: 18, sx: {
                     display: "flex",
                     flex: 1,
                     height: "85%",

package/dist/components/MultiAgentAccelerator/Sidebar/AgentNetworkTreeItem.js

@@ -15,7 +15,7 @@ import { TreeItemProvider } from "@mui/x-tree-view/TreeItemProvider";
 import { useTreeItem } from "@mui/x-tree-view/useTreeItem";
 import { useRef } from "react";
 import { downloadFile, toSafeFilename } from "../../../utils/File.js";
-import { cleanUpAgentName } from "../../AgentChat/Utils.js";
+import { cleanUpAgentName } from "../../AgentChat/Common/Utils.js";
 // Palette of colors we can use for tags
 const TAG_COLORS = [
     "--bs-accent2-light",
@@ -79,7 +79,7 @@ export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, networ
     else if (iconNameSuggestion) {
         console.warn(`Icon "${iconNameSuggestion}" not found in MUI icons library.`);
     }
-    return (_jsx(TreeItemProvider, { ...getContextProviderProps(), children: _jsxs(TreeItemRoot, { ...getRootProps(), ref: rootRef, children: [_jsx(TreeItemContent, { ...getContentProps(), sx: {
+    return (_jsx(TreeItemProvider, { ...getContextProviderProps(), children: _jsxs(TreeItemRoot, { ...getRootProps(), ref: rootRef, "data-itemid": itemId, children: [_jsx(TreeItemContent, { ...getContentProps(), sx: {
                         cursor: isExpired ? "not-allowed" : "pointer",
                     }, children: _jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [_jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: "0.25rem" }, children: [_jsx(Tooltip, { title: isChild && isExpired
                                             ? "Expired"
@@ -97,7 +97,7 @@ export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, networ
                                             .map((tag) => (_jsx(Chip, { label: tag, style: {
                                                 margin: "0.25rem",
                                                 backgroundColor: `var(${tagsToColors.get(tag) || TAG_COLORS[0]})`,
-                                            } }, tag))), placement: "right", arrow: true, children: _jsx(BookmarkIcon, { sx: { fontSize: "0.75rem", color: "var(--bs-accent1-medium)" } }) })) : null, isTemporaryNetwork && networkHocon && (_jsx(Tooltip, { title: isExpired ? "Network expired" : "Download network definition", children: _jsx("span", { children: _jsx(IconButton, { onClick: (e) => {
+                                            } }, tag))), placement: "right", arrow: true, children: _jsx(BookmarkIcon, { sx: { fontSize: "0.75rem", color: "var(--bs-accent1-medium)" } }) })) : null, isTemporaryNetwork && networkHocon && (_jsx(Tooltip, { title: isExpired ? "Expired" : "Download network definition", children: _jsx("span", { children: _jsx(IconButton, { onClick: (e) => {
                                                     e.stopPropagation();
                                                     if (isExpired) {
                                                         return;
@@ -119,5 +119,5 @@ export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, networ
                                         cursor: "pointer",
                                         fontSize: "1rem",
                                         "&:hover": { color: theme.palette.warning.main },
-                                    } }) }))] }) }, labelString), children && _jsx(TreeItemGroupTransition, { ...getGroupTransitionProps() })] }) }));
+                                    } }) }))] }) }), children && _jsx(TreeItemGroupTransition, { ...getGroupTransitionProps() })] }) }));
 };

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

@@ -2,6 +2,7 @@ import { FC } from "react";
 import { NetworkIconSuggestions } from "../../../controller/Types/NetworkIconSuggestions.js";
 import { AgentInfo } from "../../../generated/neuro-san/NeuroSanClient.js";
 import { TemporaryNetwork } from "../../../state/TemporaryNetworks.js";
+export declare const SPARKLE_HIGHLIGHT_CLASS = "sparkle-highlight";
 export interface SidebarProps {
     readonly customURLCallback: (url: string) => void;
     readonly customURLLocalStorage?: string;

package/dist/components/MultiAgentAccelerator/Sidebar/Sidebar.js

@@ -14,6 +14,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+import AddBoxRounded from "@mui/icons-material/AddBoxRounded";
 import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
 import ClearIcon from "@mui/icons-material/Clear";
 import HighlightOff from "@mui/icons-material/HighlightOff";
@@ -34,7 +35,7 @@ import { buildTreeViewItems } from "./TreeBuilder.js";
 import { testConnection } from "../../../controller/agent/Agent.js";
 import { useEnvironmentStore } from "../../../state/Environment.js";
 import { getZIndex } from "../../../utils/zIndexLayers.js";
-import { TEMPORARY_NETWORK_FOLDER } from "../const.js";
+import { AGENT_NETWORK_DESIGNER_ID, TEMPORARY_NETWORK_FOLDER } from "../const.js";
 // Animation for the sparkle effect when a new temporary network is added.
 const sparkle = keyframes `
     0% {
@@ -75,6 +76,8 @@ const PrimaryButton = styled(Button)({
     marginLeft: "0.5rem",
     marginTop: "2px",
 });
+// Name for sparkle animation CSS class
+export const SPARKLE_HIGHLIGHT_CLASS = "sparkle-highlight";
 // Styled component for Sidebar aside element, including styles for the sparkle highlight animation
 // when a new temporary network is added.
 const SidebarAside = styled("aside")({
@@ -83,7 +86,7 @@ const SidebarAside = styled("aside")({
     height: "100%",
     overflowY: "auto",
     paddingRight: "0.75rem",
-    "& .sparkle-highlight": {
+    [`& .${SPARKLE_HIGHLIGHT_CLASS}`]: {
         background: "linear-gradient(90deg, gold, orange, cyan, magenta, gold)",
         backgroundSize: "400% 100%",
         animation: `${sparkle} 5s ease`,
@@ -94,11 +97,14 @@ const SidebarAside = styled("aside")({
 });
 // Styled component for the sidebar heading, which is sticky at the top of the sidebar.
 const SidebarHeading = styled("h2")(({ theme }) => ({
+    alignItems: "center",
     backgroundColor: theme.palette.background.default,
     borderBottomStyle: "solid",
     borderBottomWidth: "1px",
+    display: "flex",
     fontSize: "1.125rem",
     fontWeight: "bold",
+    justifyContent: "space-between",
     marginBottom: "0.25rem",
     paddingBottom: "0.75rem",
     position: "sticky",
@@ -129,8 +135,7 @@ export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaiti
     const settingsPopoverOpen = Boolean(settingsAnchorEl);
     const [expandedItems, setExpandedItems] = useState([]);
     // Theming/Dark mode
-    const theme = useTheme();
-    const darkMode = theme.palette.mode === "dark";
+    const darkMode = useTheme().palette.mode === "dark";
     const handleSettingsClick = (event) => {
         // On open of Settings popover, reset the connection status to idle
         setConnectionStatus(CONNECTION_STATUS.IDLE);
@@ -186,18 +191,17 @@ export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaiti
         setUrlInput("");
         setConnectionStatus(CONNECTION_STATUS.IDLE);
     };
-    // Get Neuro-san version on initial load
+    // Fetch Neuro-san version on load and whenever the saved URL changes
     useEffect(() => {
         const fetchVersion = async () => {
             // We aren't really trying to test the connection here, just getting the version.
-            const result = await testConnection(urlInput);
+            const result = await testConnection(customURLLocalStorage || backendNeuroSanApiUrl);
             if (result.success) {
                 setTestConnectionResult(result);
-                setConnectionStatus(CONNECTION_STATUS.SUCCESS);
             }
         };
         void fetchVersion();
-    }, []);
+    }, [customURLLocalStorage, backendNeuroSanApiUrl]);
     const { treeViewItems, nodeIndex } = buildTreeViewItems(networks, temporaryNetworks);
     const temporaryNetworkExpirationTimes = temporaryNetworks.reduce((acc, tempNetwork) => {
         acc[tempNetwork.agentInfo.agent_name] = new Date(tempNetwork.reservation.expiration_time_in_seconds * 1000);
@@ -228,23 +232,22 @@ export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaiti
     useEffect(() => {
         let highlightTimeout;
         let removeHighlightTimeout;
-        // If we got a new temporary network, select it and expand the temporary category in the tree view
+        // If we got a new temporary network, expand the temporary category in the tree view
         if (newlyAddedTemporaryNetworks?.size > 0) {
             const firstItem = newlyAddedTemporaryNetworks.values().next().value;
-            setSelectedItem(firstItem);
-            setSelectedNetwork(firstItem);
             setExpandedItems((prev) => prev.includes(TEMPORARY_NETWORK_FOLDER) ? prev : [...prev, TEMPORARY_NETWORK_FOLDER]);
             highlightTimeout = setTimeout(() => {
-                // Scroll the selected node into view and add an animation to draw the user's attention to it.
-                // Hacky: use a DOM query to find the node. I tried the various ways to do this programmatically
-                // in MUI RichTreeView including the imperative API (https://mui.com/x/react-tree-view/rich-tree-view/selection/#imperative-api)
-                // but couldn't get it to work so resorting to this for now.
-                const selectedNode = document.querySelector("[role=treeitem][aria-checked=true]");
-                if (selectedNode) {
-                    selectedNode.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
-                    selectedNode.classList.add("sparkle-highlight");
+                /* Scroll the selected node into view and add an animation to draw the user's attention to it.
+                Hacky: use a DOM query to find the node. I tried the various ways to do this programmatically
+                in MUI RichTreeView including the imperative API (https://mui.com/x/react-tree-view/rich-tree-view/selection/#imperative-api)
+                but couldn't get it to work so resorting to this for now.
+                */
+                const temporaryNetworkNode = document.querySelector(`[data-itemid="${firstItem}"]`);
+                if (temporaryNetworkNode) {
+                    temporaryNetworkNode.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+                    temporaryNetworkNode.classList.add(SPARKLE_HIGHLIGHT_CLASS);
                     removeHighlightTimeout = setTimeout(() => {
-                        selectedNode.classList.remove("sparkle-highlight");
+                        temporaryNetworkNode.classList.remove(SPARKLE_HIGHLIGHT_CLASS);
                     }, 5000);
                 }
             }, 50);
@@ -254,9 +257,12 @@ export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaiti
             clearTimeout(removeHighlightTimeout);
         };
     }, [newlyAddedTemporaryNetworks]);
-    return (_jsxs(_Fragment, { children: [_jsxs(SidebarAside, { id: `${id}-sidebar`, children: [_jsxs(SidebarHeading, { id: `${id}-heading`, children: ["Agent Networks", _jsx(Button, { "aria-label": "Agent Network Settings", disabled: isAwaitingLlm, id: "agent-network-settings-btn", onClick: handleSettingsClick, sx: { display: "inline-block", minWidth: "40px" }, children: _jsx(Tooltip, { id: "agent-network-settings-tooltip", placement: "top", title: `${customURLLocalStorage || backendNeuroSanApiUrl}\nversion: ${testConnectionResult?.version || "unknown"}`, children: _jsx(SettingsIcon, { id: "agent-network-settings-icon", sx: {
-                                            color: isAwaitingLlm ? "rgba(0, 0, 0, 0.12)" : "var(--bs-secondary)",
-                                        } }) }) })] }), _jsx(RichTreeView, { items: treeViewItems, expandedItems: expandedItems, onExpandedItemsChange: (_event, itemIds) => setExpandedItems(itemIds), multiSelect: false, onSelectedItemsChange: handleSelectedItemsChange, selectedItems: selectedItem, disableSelection: isAwaitingLlm, slots: {
+    return (_jsxs(_Fragment, { children: [_jsxs(SidebarAside, { id: `${id}-sidebar`, children: [_jsxs(SidebarHeading, { id: `${id}-heading`, children: ["Agent Networks", _jsxs(Box, { sx: { display: "flex" }, children: [_jsx(Button, { "aria-label": "Add New Network", disabled: isAwaitingLlm, id: "add-network-btn", onClick: () => {
+                                            setSelectedItem(AGENT_NETWORK_DESIGNER_ID);
+                                            setSelectedNetwork(AGENT_NETWORK_DESIGNER_ID);
+                                        }, sx: { display: "inline-block", minWidth: "40px" }, children: _jsx(Tooltip, { title: "Create your own agent network", placement: "top", children: _jsx(AddBoxRounded, { id: "add-network-icon", sx: { color: isAwaitingLlm ? "rgba(0, 0, 0, 0.12)" : "var(--bs-secondary)" } }) }) }), _jsx(Button, { "aria-label": "Agent Network Settings", disabled: isAwaitingLlm, id: "agent-network-settings-btn", onClick: handleSettingsClick, sx: { display: "inline-block", minWidth: "40px" }, children: _jsx(Tooltip, { id: "agent-network-settings-tooltip", placement: "top", title: `${customURLLocalStorage || backendNeuroSanApiUrl}\nversion: ${testConnectionResult?.version || "unknown"}`, children: _jsx(SettingsIcon, { id: "agent-network-settings-icon", sx: {
+                                                    color: isAwaitingLlm ? "rgba(0, 0, 0, 0.12)" : "var(--bs-secondary)",
+                                                } }) }) })] })] }), _jsx(RichTreeView, { items: treeViewItems, expandedItems: expandedItems, onExpandedItemsChange: (_event, itemIds) => setExpandedItems(itemIds), multiSelect: false, onSelectedItemsChange: handleSelectedItemsChange, selectedItems: selectedItem, disableSelection: isAwaitingLlm, slots: {
                             item: AgentNetworkTreeItem,
                         }, 
                         // Pass custom props to tree items via slotProps.

package/dist/components/MultiAgentAccelerator/Sidebar/TreeBuilder.js

@@ -1,4 +1,4 @@
-import { cleanUpAgentName, removeTrailingUuid } from "../../AgentChat/Utils.js";
+import { cleanUpAgentName, removeTrailingUuid } from "../../AgentChat/Common/Utils.js";
 /**
  * Iteratively sort all children of tree nodes using a queue-based approach
  * @param nodes - Array of tree nodes to sort

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

@@ -1,4 +1,6 @@
+import { AgentNetworkDefinitionEntry } from "./const.js";
 import { ChatMessage } from "../../generated/neuro-san/NeuroSanClient.js";
+import { TemporaryNetwork } from "../../state/TemporaryNetworks.js";
 /**
  * Definition of a temporary network. No schema for this provided by backend so we second-guess it here.
  * @see https://github.com/cognizant-ai-lab/neuro-san/issues/743
@@ -31,3 +33,15 @@ export declare const extractReservations: (message: ChatMessage) => AgentReserva
  * @return The network HOCON as a string, or null if not found or not the right type of message.
  */
 export declare const extractNetworkHocon: (message: ChatMessage) => string | null;
+/**
+ * Converts a list of agent reservations received from the backend into TemporaryNetwork objects that can be
+ * displayed in the UI.
+ * @param agentReservations List of "agent reservations" (temporary networks) received from the backend
+ * @param networkHocon Optional network HOCON string associated with the reservations.
+ * @param agentNetworkDefinition Optional agent network definition entries.
+ * @param agentNetworkName Optional backend canonical network name used to match / deduplicate networks.
+ *   When omitted, the name is derived from the reservation_id via {@link extractNetworkNameFromReservationId}.
+ * @returns List of TemporaryNetwork objects ready for the store.
+ */
+export declare const convertReservationsToNetworks: (agentReservations: AgentReservation[], networkHocon: string | null, agentNetworkDefinition?: AgentNetworkDefinitionEntry[], agentNetworkName?: string) => TemporaryNetwork[];
+export { extractNetworkNameFromReservationId } from "../../state/TemporaryNetworks.js";

package/dist/components/MultiAgentAccelerator/TemporaryNetworks.js

@@ -1,5 +1,6 @@
-import { AGENT_NETWORK_HOCON, AGENT_RESERVATIONS_KEY } from "./const.js";
+import { AGENT_NETWORK_HOCON, AGENT_RESERVATIONS_KEY, TEMPORARY_NETWORK_FOLDER, } from "./const.js";
 import { ChatMessageType } from "../../generated/neuro-san/NeuroSanClient.js";
+import { extractNetworkNameFromReservationId } from "../../state/TemporaryNetworks.js";
 /**
  * Extracts agent reservations from a chat message, if they exist.
  * @param message The chat message to extract reservations from. We expect reservations to be present in messages of
@@ -33,3 +34,27 @@ export const extractNetworkHocon = (message) => {
         return null;
     }
 };
+/**
+ * Converts a list of agent reservations received from the backend into TemporaryNetwork objects that can be
+ * displayed in the UI.
+ * @param agentReservations List of "agent reservations" (temporary networks) received from the backend
+ * @param networkHocon Optional network HOCON string associated with the reservations.
+ * @param agentNetworkDefinition Optional agent network definition entries.
+ * @param agentNetworkName Optional backend canonical network name used to match / deduplicate networks.
+ *   When omitted, the name is derived from the reservation_id via {@link extractNetworkNameFromReservationId}.
+ * @returns List of TemporaryNetwork objects ready for the store.
+ */
+export const convertReservationsToNetworks = (agentReservations, networkHocon, agentNetworkDefinition, agentNetworkName) => {
+    return agentReservations.map((reservation) => ({
+        reservation,
+        agentInfo: {
+            agent_name: `${TEMPORARY_NETWORK_FOLDER}/${reservation.reservation_id}`,
+        },
+        // Use the explicit name when provided; fall back to extracting it from the reservation_id so that
+        // networks are always deduplicated by name even when the backend omits AGENT_NETWORK_NAME_KEY.
+        agentNetworkName: agentNetworkName ?? extractNetworkNameFromReservationId(reservation.reservation_id),
+        networkHocon,
+        agentNetworkDefinition,
+    }));
+};
+export { extractNetworkNameFromReservationId } from "../../state/TemporaryNetworks.js";

package/dist/components/MultiAgentAccelerator/ThoughtBubbleOverlay.js

@@ -115,12 +115,12 @@ export const ThoughtBubbleOverlay = ({ nodes, edges, showThoughtBubbles = true,
     // Handle bubble lifecycle (appear/disappear animations)
     useEffect(() => {
         const currentEdgeIds = new Set(thoughtBubbleEdges.map((e) => e.id));
-        const previousBubbleIds = new Set(bubbleStates.keys());
-        // Find new bubbles that should appear
-        const newBubbles = thoughtBubbleEdges.filter((e) => !previousBubbleIds.has(e.id));
-        // Find bubbles that should disappear
-        const removingBubbles = Array.from(previousBubbleIds).filter((id) => !currentEdgeIds.has(id));
         setBubbleStates((prev) => {
+            const previousBubbleIds = new Set(prev.keys());
+            // Find new bubbles that should appear
+            const newBubbles = thoughtBubbleEdges.filter((e) => !previousBubbleIds.has(e.id));
+            // Find bubbles that should disappear
+            const removingBubbles = Array.from(previousBubbleIds).filter((id) => !currentEdgeIds.has(id));
             const newState = new Map(prev);
             // Add new bubbles in entering state. Record when they entered so we can delay showing
             // connecting lines until the bubble's entrance animation delay.
@@ -155,9 +155,10 @@ export const ThoughtBubbleOverlay = ({ nodes, edges, showThoughtBubbles = true,
     }, [thoughtBubbleEdges]);
     // Cleanup timeouts on unmount
     useEffect(() => {
+        const timeouts = animationTimeouts.current;
         return () => {
-            animationTimeouts.current.forEach((timeout) => clearTimeout(timeout));
-            animationTimeouts.current.clear();
+            timeouts.forEach((timeout) => clearTimeout(timeout));
+            timeouts.clear();
         };
     }, []);
     // Sort edges to prioritize frontman's edges first

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

@@ -1,3 +1,4 @@
+import { ConnectivityInfo } from "../../generated/neuro-san/NeuroSanClient.js";
 export declare const DEFAULT_FRONTMAN_X_POS = 150;
 export declare const DEFAULT_FRONTMAN_Y_POS = 450;
 export declare const BASE_RADIUS = 100;
@@ -5,3 +6,26 @@ export declare const LEVEL_SPACING = 150;
 export declare const TEMPORARY_NETWORK_FOLDER = "temporary";
 export declare const AGENT_RESERVATIONS_KEY = "agent_reservations";
 export declare const AGENT_NETWORK_HOCON = "agent_network_hocon_text";
+export declare const AGENT_PROGRESS_CONNECTIVITY_KEY = "connectivity_info";
+export declare const AGENT_NETWORK_DESIGNER_ID = "agent_network_designer";
+export declare const AGENT_NETWORK_DEFINITION_KEY = "agent_network_definition";
+export declare const AGENT_NETWORK_NAME_KEY = "agent_network_name";
+/**
+ * A single agent entry within an agent network definition, as received in sly_data from the backend.
+ * Extends ConnectivityInfo with editable instructions and description fields for the Agent Network Designer.
+ */
+export type AgentNetworkDefinitionEntry = ConnectivityInfo & {
+    readonly instructions?: string;
+    readonly description?: string;
+};
+/** Possible values for the `display_as` field in ConnectivityInfo / AgentNetworkDefinitionEntry. */
+export declare const DISPLAY_AS_LLM_AGENT = "llm_agent";
+export declare const DISPLAY_AS_CODED_TOOL = "coded_tool";
+export declare const DISPLAY_AS_LANGCHAIN_TOOL = "langchain_tool";
+export declare const DISPLAY_AS_EXTERNAL_AGENT = "external_agent";
+/**
+ * Returns true when an agent node supports the edit popup (instructions + description).
+ * Only `llm_agent` nodes (and the Frontman, whose `display_as` is undefined) are editable.
+ * `coded_tool`, `langchain_tool`, `external_agent`, and any other types are read-only.
+ */
+export declare const isEditableAgent: (displayAs: string | undefined) => boolean;

package/dist/components/MultiAgentAccelerator/const.js

@@ -27,3 +27,22 @@ export const TEMPORARY_NETWORK_FOLDER = "temporary";
 export const AGENT_RESERVATIONS_KEY = "agent_reservations";
 // We expect the agent network HOCON to be stored in sly_data under this key, if it is provided by the backend
 export const AGENT_NETWORK_HOCON = "agent_network_hocon_text";
+// The key in the message structure where connectivity info is stored for agent progress messages
+export const AGENT_PROGRESS_CONNECTIVITY_KEY = "connectivity_info";
+// Agent name for the special "Agent Network Designer" network
+export const AGENT_NETWORK_DESIGNER_ID = "agent_network_designer";
+// The key in sly_data where the agent network definition is stored
+export const AGENT_NETWORK_DEFINITION_KEY = "agent_network_definition";
+// The key in sly_data where the agent network name is stored
+export const AGENT_NETWORK_NAME_KEY = "agent_network_name";
+/** Possible values for the `display_as` field in ConnectivityInfo / AgentNetworkDefinitionEntry. */
+export const DISPLAY_AS_LLM_AGENT = "llm_agent";
+export const DISPLAY_AS_CODED_TOOL = "coded_tool";
+export const DISPLAY_AS_LANGCHAIN_TOOL = "langchain_tool";
+export const DISPLAY_AS_EXTERNAL_AGENT = "external_agent";
+/**
+ * Returns true when an agent node supports the edit popup (instructions + description).
+ * Only `llm_agent` nodes (and the Frontman, whose `display_as` is undefined) are editable.
+ * `coded_tool`, `langchain_tool`, `external_agent`, and any other types are read-only.
+ */
+export const isEditableAgent = (displayAs) => displayAs === DISPLAY_AS_LLM_AGENT;

package/dist/controller/llm/LlmChat.js

@@ -24,7 +24,7 @@ export var StreamingUnit;
 })(StreamingUnit || (StreamingUnit = {}));
 const handleStreamingCallback = async (res, callback, streamingUnit) => {
     const reader = res.body.getReader();
-    const utf8decoder = new TextDecoder("utf8");
+    const utf8decoder = new TextDecoder("utf-8");
     let buffer = "";
     while (true) {
         const { done, value } = await reader.read();