@cognizant-ai-lab/ui-common 1.3.3 → 1.4.0

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

@@ -18,36 +18,92 @@ import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
 import ClearIcon from "@mui/icons-material/Clear";
 import HighlightOff from "@mui/icons-material/HighlightOff";
 import SettingsIcon from "@mui/icons-material/Settings";
-import { IconButton, InputAdornment, styled, useColorScheme, useTheme } from "@mui/material";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import List from "@mui/material/List";
-import ListItemButton from "@mui/material/ListItemButton";
-import ListItemText from "@mui/material/ListItemText";
+import IconButton from "@mui/material/IconButton";
+import InputAdornment from "@mui/material/InputAdornment";
 import Popover from "@mui/material/Popover";
+import { keyframes, styled, useTheme } from "@mui/material/styles";
 import TextField from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
-import { useEffect, useRef, useState, } from "react";
-import { testConnection } from "../../controller/agent/Agent.js";
-import { useEnvironmentStore } from "../../state/environment.js";
-import { isDarkMode } from "../../utils/Theme.js";
-import { getZIndex } from "../../utils/zIndexLayers.js";
-import { cleanUpAgentName } from "../AgentChat/Utils.js";
+import { RichTreeView } from "@mui/x-tree-view/RichTreeView";
+import { useEffect, useState, } from "react";
+import { AgentNetworkTreeItem } from "./AgentNetworkTreeItem.js";
+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";
+// Animation for the sparkle effect when a new temporary network is added.
+const sparkle = keyframes `
+    0% {
+        background-position: 0% 50%;
+        opacity: 1;
+    }
+    10% {
+        background-position: 33% 50%;
+        opacity: 1;
+    }
+    20% {
+        background-position: 66% 50%;
+        opacity: 1;
+    }
+    30% {
+        background-position: 100% 50%;
+        opacity: 1;
+    }
+    60% {
+        background-position: 100% 50%;
+        opacity: 1;
+    }
+    80% {
+        background-position: 100% 50%;
+        opacity: 0.7;
+    }
+    90% {
+        background-position: 100% 50%;
+        opacity: 0.4;
+    }
+    100% {
+        background-position: 100% 50%;
+        opacity: 0.25;
+    }
+`;
 // #region: Styled Components
-const PrimaryButton = styled(Button, {
-    shouldForwardProp: (prop) => prop !== "darkMode",
-})(({ darkMode }) => ({
-    backgroundColor: "var(--bs-primary)",
+const PrimaryButton = styled(Button)({
     marginLeft: "0.5rem",
     marginTop: "2px",
-    "&:hover": {
-        backgroundColor: "var(--bs-primary)",
-    },
-    "&.Mui-disabled": {
-        color: darkMode ? "rgba(255, 255, 255, 0.25)" : undefined,
-        backgroundColor: undefined,
+});
+// Styled component for Sidebar aside element, including styles for the sparkle highlight animation
+// when a new temporary network is added.
+const SidebarAside = styled("aside")({
+    borderRightStyle: "solid",
+    borderRightWidth: "1px",
+    height: "100%",
+    overflowY: "auto",
+    paddingRight: "0.75rem",
+    "& .sparkle-highlight": {
+        background: "linear-gradient(90deg, gold, orange, cyan, magenta, gold)",
+        backgroundSize: "400% 100%",
+        animation: `${sparkle} 5s ease`,
+        backgroundClip: "padding-box",
+        borderRadius: "4px",
+        opacity: 1,
     },
+});
+// Styled component for the sidebar heading, which is sticky at the top of the sidebar.
+const SidebarHeading = styled("h2")(({ theme }) => ({
+    backgroundColor: theme.palette.background.default,
+    borderBottomStyle: "solid",
+    borderBottomWidth: "1px",
+    fontSize: "1.125rem",
+    fontWeight: "bold",
+    marginBottom: "0.25rem",
+    paddingBottom: "0.75rem",
+    position: "sticky",
+    top: 0,
+    zIndex: getZIndex(1, theme),
 }));
 // #endregion: Styled Components
 // #region: Types
@@ -58,7 +114,8 @@ var CONNECTION_STATUS;
     CONNECTION_STATUS["ERROR"] = "error";
 })(CONNECTION_STATUS || (CONNECTION_STATUS = {}));
 // #endregion: Types
-export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaitingLlm, networks, selectedNetwork, setSelectedNetwork, }) => {
+const EMPTY_ARRAY = [];
+export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaitingLlm, networkIconSuggestions, networks, newlyAddedTemporaryNetworks, onDeleteNetwork, setSelectedNetwork, temporaryNetworks = EMPTY_ARRAY, }) => {
     // Get default URL from the environment store.
     const { backendNeuroSanApiUrl } = useEnvironmentStore();
     const [urlInput, setUrlInput] = useState(customURLLocalStorage || backendNeuroSanApiUrl);
@@ -67,16 +124,13 @@ export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaiti
     const connectionStatusSuccess = connectionStatus === CONNECTION_STATUS.SUCCESS;
     const connectionStatusError = connectionStatus === CONNECTION_STATUS.ERROR;
     const isDefaultUrl = urlInput === backendNeuroSanApiUrl;
-    // Enable the Save button if the URL input is not empty and the connection status is successful,
-    // OR if the URL input is the default URL and connection status is not error
     const saveEnabled = urlInput && (connectionStatusSuccess || (isDefaultUrl && !connectionStatusError));
-    const selectedNetworkRef = useRef(null);
     const [settingsAnchorEl, setSettingsAnchorEl] = useState(null);
     const settingsPopoverOpen = Boolean(settingsAnchorEl);
+    const [expandedItems, setExpandedItems] = useState([]);
     // Theming/Dark mode
     const theme = useTheme();
-    const { mode, systemMode } = useColorScheme();
-    const darkMode = isDarkMode(mode, systemMode);
+    const darkMode = theme.palette.mode === "dark";
     const handleSettingsClick = (event) => {
         // On open of Settings popover, reset the connection status to idle
         setConnectionStatus(CONNECTION_STATUS.IDLE);
@@ -132,12 +186,6 @@ export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaiti
         setUrlInput("");
         setConnectionStatus(CONNECTION_STATUS.IDLE);
     };
-    // Make sure selected network in the list is always in view
-    useEffect(() => {
-        if (selectedNetworkRef.current) {
-            selectedNetworkRef.current.scrollIntoView({ behavior: "instant", block: "nearest" });
-        }
-    }, [selectedNetwork]);
     // Get Neuro-san version on initial load
     useEffect(() => {
         const fetchVersion = async () => {
@@ -150,34 +198,73 @@ export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaiti
         };
         void fetchVersion();
     }, []);
-    const selectNetworkHandler = (network) => {
-        setSelectedNetwork(network);
+    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);
+        return acc;
+    }, {});
+    const [selectedItem, setSelectedItem] = useState(null);
+    const handleSelectedItemsChange = (_event, itemId) => {
+        if (!itemId) {
+            return;
+        }
+        // Only select leaf nodes (items in nodeIndex) as networks
+        const isLeafNode = nodeIndex.has(itemId);
+        if (!isLeafNode) {
+            return;
+        }
+        // Don't allow selecting expired temporary networks
+        const expirationTime = temporaryNetworkExpirationTimes[itemId];
+        if (expirationTime && expirationTime < new Date()) {
+            return;
+        }
+        setSelectedItem(itemId);
+        setSelectedNetwork(itemId);
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("aside", { id: `${id}-sidebar`, style: {
-                    borderRightColor: "var(--bs-gray-light)",
-                    borderRightStyle: "solid",
-                    borderRightWidth: "1px",
-                    height: "100%",
-                    overflowY: "auto",
-                    paddingRight: "0.75rem",
-                }, children: [_jsxs("h2", { id: `${id}-heading`, style: {
-                            borderBottomColor: "var(--bs-gray-light)",
-                            borderBottomStyle: "solid",
-                            borderBottomWidth: "1px",
-                            fontSize: "1.125rem",
-                            fontWeight: "bold",
-                            marginBottom: "0.25rem",
-                            paddingBottom: "0.75rem",
-                            position: "sticky",
-                            top: 0,
-                            zIndex: getZIndex(1, theme),
-                        }, 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: {
+    useEffect(() => {
+        let highlightTimeout;
+        let removeHighlightTimeout;
+        // If we got a new temporary network, select it and 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");
+                    removeHighlightTimeout = setTimeout(() => {
+                        selectedNode.classList.remove("sparkle-highlight");
+                    }, 5000);
+                }
+            }, 50);
+        }
+        return () => {
+            clearTimeout(highlightTimeout);
+            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(List, { id: `${id}-network-list`, sx: { padding: 0, margin: 0 }, children: networks?.map((network) => (_jsx(ListItemButton, { id: `${network}-btn`, onClick: () => selectNetworkHandler(network), sx: { textAlign: "left" }, selected: selectedNetwork === network, disabled: isAwaitingLlm, ref: selectedNetwork === network ? selectedNetworkRef : null, children: _jsx(ListItemText, { id: `${network}-text`, slotProps: {
-                                    primary: {
-                                        fontSize: "0.75rem",
-                                    },
-                                }, primary: cleanUpAgentName(network) }) }, network))) })] }), _jsxs(Popover, { id: "agent-network-settings-popover", open: settingsPopoverOpen, anchorEl: settingsAnchorEl, onClose: () => handleSettingsClose(true), anchorOrigin: {
+                                        } }) }) })] }), _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.
+                        // Reference: https://github.com/mui/mui-x/issues/13351
+                        slotProps: {
+                            item: {
+                                networkIconSuggestions,
+                                nodeIndex,
+                                onDeleteNetwork,
+                                temporaryNetworkExpirationTimes,
+                            },
+                        } }, Object.keys(networkIconSuggestions || {}).length)] }), _jsxs(Popover, { id: "agent-network-settings-popover", open: settingsPopoverOpen, anchorEl: settingsAnchorEl, onClose: () => handleSettingsClose(true), anchorOrigin: {
                     vertical: "bottom",
                     horizontal: "left",
                 }, slotProps: {
@@ -193,7 +280,7 @@ export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaiti
                             input: {
                                 endAdornment: urlInput && urlInput !== backendNeuroSanApiUrl ? (_jsx(InputAdornment, { id: "clear-input-adornment", position: "end", children: _jsx(IconButton, { id: "clear-input-icon-button", edge: "end", onClick: handleClearInput, size: "small", "aria-label": "Clear input", children: _jsx(ClearIcon, { fontSize: "small", id: "clear-input-icon" }) }) })) : undefined,
                             },
-                        } }), _jsx(PrimaryButton, { disabled: !urlInput, id: "agent-network-settings-test-btn", onClick: handleTestConnection, variant: "contained", darkMode: darkMode, children: "Test" }), _jsx(PrimaryButton, { disabled: !saveEnabled, id: "agent-network-settings-save-btn", onClick: handleSaveSettings, variant: "contained", darkMode: darkMode, children: "Save" }), _jsx(PrimaryButton, { id: "agent-network-settings-cancel-btn", onClick: () => handleSettingsClose(true), variant: "contained", darkMode: darkMode, children: "Cancel" }), _jsx(Button, { id: "agent-network-settings-default-btn", onClick: handleDefaultSettings, sx: {
+                        } }), _jsx(PrimaryButton, { disabled: !urlInput, id: "agent-network-settings-test-btn", onClick: handleTestConnection, variant: "contained", children: "Test" }), _jsx(PrimaryButton, { disabled: !saveEnabled, id: "agent-network-settings-save-btn", onClick: handleSaveSettings, variant: "contained", children: "Save" }), _jsx(PrimaryButton, { id: "agent-network-settings-cancel-btn", onClick: () => handleSettingsClose(true), variant: "contained", children: "Cancel" }), _jsx(Button, { id: "agent-network-settings-default-btn", onClick: handleDefaultSettings, sx: {
                             marginLeft: "0.35rem",
                             marginTop: "2px",
                             color: darkMode ? "var(--bs-dark-mode-link)" : undefined,

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

@@ -0,0 +1,19 @@
+import { TreeViewBaseItem } from "@mui/x-tree-view/models";
+import { AgentInfo } from "../../../generated/neuro-san/NeuroSanClient.js";
+import { TemporaryNetwork } from "../../../state/TemporaryNetworks.js";
+export type NodeIndex = Map<string, {
+    agentInfo: AgentInfo;
+    displayName: string;
+}>;
+/**
+ * Build a tree view structure from a flat list of networks.
+ * The list of networks comes from a call to the Neuro-san /list API
+ * The tree structure is used by the RichTreeView component to display the networks
+ * @param networks - Array of networks from the Neuro-san /list API
+ * @param temporaryNetworks - Array of temporary networks (e.g. ones recently created by the user)
+ * @returns Array of TreeViewBaseItem objects representing the tree structure and an index for rapid access
+ */
+export declare const buildTreeViewItems: (networks: readonly AgentInfo[], temporaryNetworks: readonly TemporaryNetwork[]) => {
+    treeViewItems: TreeViewBaseItem[];
+    nodeIndex: NodeIndex;
+};

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

@@ -0,0 +1,113 @@
+import { cleanUpAgentName, removeTrailingUuid } from "../../AgentChat/Utils.js";
+/**
+ * Iteratively sort all children of tree nodes using a queue-based approach
+ * @param nodes - Array of tree nodes to sort
+ */
+const sortTreeNodes = (nodes, nodeIndex) => {
+    // Sort the top level nodes first. We sort by displayName because that's what the user sees
+    nodes.sort((a, b) => {
+        const aDisplayName = nodeIndex.get(a.id)?.displayName ?? a.label;
+        const bDisplayName = nodeIndex.get(b.id)?.displayName ?? b.label;
+        return aDisplayName.localeCompare(bDisplayName);
+    });
+    // Use a queue for breadth-first traversal to avoid recursion
+    const queue = [...nodes];
+    let index = 0;
+    // For each node in the queue, sort its children and add them to the end of the queue
+    while (index < queue.length) {
+        const node = queue[index];
+        index += 1;
+        if (node.children && node.children.length > 0) {
+            node.children.sort((a, b) => {
+                const aDisplayName = nodeIndex.get(a.id)?.displayName ?? a.label;
+                const bDisplayName = nodeIndex.get(b.id)?.displayName ?? b.label;
+                return aDisplayName.localeCompare(bDisplayName);
+            });
+            queue.push(...node.children);
+        }
+    }
+};
+/**
+ * Add a single AgentInfo entry into the tree structure
+ */
+const addNetworkToTree = (network, result, uncategorized, map, nodeIndex, displayNameCounts) => {
+    const parts = network.agent_name.split("/");
+    // If there's only one part, it means this network isn't in any folder, so we add it directly under "Uncategorized"
+    if (parts.length === 1) {
+        uncategorized.children.push({ id: network.agent_name, label: network.agent_name, children: [] });
+        nodeIndex.set(network.agent_name, { agentInfo: network, displayName: cleanUpAgentName(network.agent_name) });
+    }
+    else {
+        // Otherwise, we need to build out the tree structure based on the parts of the agent_name. Some paths might
+        // already exist if we've processed another network that shares the same parent folders,
+        // so we check the map to avoid duplicating nodes.
+        let currentLevel = result;
+        parts.forEach((part, index) => {
+            // Build the full path ID by joining all parts up to the current position
+            const nodeId = parts.slice(0, index + 1).join("/");
+            let node = map.get(nodeId);
+            if (!node) {
+                // If we haven't created a node for this path yet, create it and add it to the map
+                node = { id: nodeId, label: part, children: [] };
+                map.set(nodeId, node);
+                if (index === parts.length - 1) {
+                    const cleanedName = cleanUpAgentName(removeTrailingUuid(part));
+                    // Handle duplicate display names by appending a number (e.g. "macys", "macys 2", "macys 3", etc.)
+                    const count = displayNameCounts.get(cleanedName) || 0;
+                    displayNameCounts.set(cleanedName, count + 1);
+                    const displayName = count > 0 ? `${cleanedName} ${count + 1}` : cleanedName;
+                    // Add the AgentInfo to the nodeIndex for quick lookup later, using the full path as the key
+                    nodeIndex.set(nodeId, { agentInfo: network, displayName });
+                }
+                // If this is a top-level node (index 0), add it directly to the result.
+                // Otherwise, find its parent and add it there.
+                if (index === 0) {
+                    // Top-level node, add directly to result
+                    currentLevel.push(node);
+                }
+                else {
+                    // Not a top-level node, find parent and add to its children
+                    const parentId = parts.slice(0, index).join("/");
+                    const parentNode = map.get(parentId);
+                    if (parentNode) {
+                        parentNode.children.push(node);
+                    }
+                }
+            }
+            // Move down to the next level of the tree for the next iteration
+            currentLevel = node.children;
+        });
+    }
+};
+/**
+ * Build a tree view structure from a flat list of networks.
+ * The list of networks comes from a call to the Neuro-san /list API
+ * The tree structure is used by the RichTreeView component to display the networks
+ * @param networks - Array of networks from the Neuro-san /list API
+ * @param temporaryNetworks - Array of temporary networks (e.g. ones recently created by the user)
+ * @returns Array of TreeViewBaseItem objects representing the tree structure and an index for rapid access
+ */
+export const buildTreeViewItems = (networks, temporaryNetworks) => {
+    // Map to keep track of created nodes in a tree structure
+    const treeBuilderMap = new Map();
+    // Index to quickly look up AgentInfo by node ID without having to traverse the tree
+    const nodeIndex = new Map();
+    // Resulting tree view items, ready for consumption by RichTreeView
+    const treeViewItems = [];
+    // Special parent node for networks that aren't in any folder
+    const uncategorized = { id: "uncategorized", label: "Uncategorized", children: [] };
+    const displayNameCounts = new Map();
+    // Build a tree structure from the flat list of networks.
+    // The networks come in as a series of "paths" like "industry/retail/macys" and we need to build a tree
+    // structure from that.
+    networks.forEach((network) => addNetworkToTree(network, treeViewItems, uncategorized, treeBuilderMap, nodeIndex, displayNameCounts));
+    // Now handle temporary networks
+    temporaryNetworks?.forEach((temporaryNetwork) => addNetworkToTree(temporaryNetwork.agentInfo, treeViewItems, uncategorized, treeBuilderMap, nodeIndex, displayNameCounts));
+    // Add "Uncategorized" to the result if there are any such networks
+    if (uncategorized.children.length > 0) {
+        treeViewItems.push(uncategorized);
+    }
+    // Sort all nodes in the tree
+    sortTreeNodes(treeViewItems, nodeIndex);
+    return { treeViewItems, nodeIndex };
+};

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

@@ -0,0 +1,26 @@
+import { ChatMessage } from "../../generated/neuro-san/NeuroSanClient.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
+ * @example
+ * ```json
+ * {
+ *   "reservation_id": "copy_cat-hello_world-14ecb260-4389-44f3-afad-ea315dfa1966",
+ *   "lifetime_in_seconds": 300.0,
+ *   "expiration_time_in_seconds": 1771438301.0245166
+ * }
+ * ```
+ */
+export type AgentReservation = {
+    readonly reservation_id: string;
+    readonly lifetime_in_seconds: number;
+    readonly expiration_time_in_seconds: number;
+};
+/**
+ * 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
+ * type AGENT_FRAMEWORK only.
+ * @return An array of AgentReservation objects if reservations are found, or an empty array if not found or
+ * if the message is not of the expected type.
+ */
+export declare const extractReservations: (message: ChatMessage) => AgentReservation[];

package/dist/components/MultiAgentAccelerator/TemporaryNetworks.js

@@ -0,0 +1,20 @@
+import { ChatMessageType } from "../../generated/neuro-san/NeuroSanClient.js";
+// We expect the agent reservations to be stored in sly_data under this key
+const AGENT_RESERVATIONS_KEY = "agent_reservations";
+/**
+ * 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
+ * type AGENT_FRAMEWORK only.
+ * @return An array of AgentReservation objects if reservations are found, or an empty array if not found or
+ * if the message is not of the expected type.
+ */
+export const extractReservations = (message) => {
+    // Check for temp networks ("reservations") in sly_data
+    if (message?.type === ChatMessageType.AGENT_FRAMEWORK && message?.sly_data?.[AGENT_RESERVATIONS_KEY]) {
+        return message.sly_data[AGENT_RESERVATIONS_KEY];
+    }
+    else {
+        // Not the type of message that would contain reservations, or no reservations found, return empty array
+        return [];
+    }
+};

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

@@ -1,12 +1,14 @@
+import { Edge, EdgeProps } from "@xyflow/react";
 import { FC } from "react";
-import { EdgeProps } from "reactflow";
-interface ThoughtBubbleEdgeProps extends EdgeProps {
-    data?: {
-        text?: string;
-        showAlways?: boolean;
-        conversationId?: string;
-        type?: string;
-    };
+import { ChatMessageType } from "../../generated/neuro-san/NeuroSanClient.js";
+interface ThoughtBubbleEdgeData extends Record<string, unknown> {
+    text?: string;
+    showAlways?: boolean;
+    conversationId?: string;
+    type?: ChatMessageType;
+    agents?: string[];
 }
+export type ThoughtBubbleEdgeShape = Edge<ThoughtBubbleEdgeData, "thoughtBubbleEdge">;
+type ThoughtBubbleEdgeProps = EdgeProps<ThoughtBubbleEdgeShape>;
 export declare const ThoughtBubbleEdge: FC<ThoughtBubbleEdgeProps>;
 export {};

package/dist/components/MultiAgentAccelerator/ThoughtBubbleEdge.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { getBezierPath } from "reactflow";
+import { getBezierPath } from "@xyflow/react";
 // Simplified edge component - visual rendering is handled by ThoughtBubbleOverlay
 export const ThoughtBubbleEdge = ({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, }) => {
     const conversationId = data?.conversationId || "";

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

@@ -1,8 +1,9 @@
+import type { Node as RFNode } from "@xyflow/react";
 import { FC } from "react";
-import type { Edge, Node as RFNode } from "reactflow";
+import { ThoughtBubbleEdgeShape } from "./ThoughtBubbleEdge.js";
 interface ThoughtBubbleOverlayProps {
     readonly nodes: RFNode[];
-    readonly edges: Edge[];
+    readonly edges: ThoughtBubbleEdgeShape[];
     readonly showThoughtBubbles?: boolean;
     readonly isStreaming?: boolean;
     readonly onBubbleHoverChange?: (bubbleId: string | null) => void;

package/dist/components/MultiAgentAccelerator/ThoughtBubbleOverlay.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled } from "@mui/material";
+import { styled } from "@mui/material/styles";
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ChatMessageType } from "../../generated/neuro-san/NeuroSanClient.js";
-// Note: Removed BubblePosition interface - no longer needed for right-side positioning
 // #endregion: Types
 // #region: Constants
 const BUBBLE_DISTANCE_FROM_RIGHT_EDGE = 20; // Fixed distance from right edge
@@ -104,16 +103,14 @@ export const ThoughtBubbleOverlay = ({ nodes, edges, showThoughtBubbles = true,
     const mountedRef = useRef(true);
     // Filter edges with meaningful text (memoized to prevent infinite re-renders)
     const thoughtBubbleEdges = useMemo(() => edges.filter((e) => {
-        if (typeof e?.data?.text !== "string") {
-            return false;
-        }
-        return e.data.text;
+        const text = e.data?.text;
+        return typeof text === "string" && text?.length > 0;
     }), [edges]);
     // Find frontman node (depth === 0, similar to isFrontman logic in AgentNode.tsx)
     const frontmanNode = useMemo(() => {
         if (!nodes || !Array.isArray(nodes) || nodes.length === 0)
             return null;
-        return nodes.find((n) => n.data?.depth === 0);
+        return nodes.find((n) => n.data["depth"] === 0);
     }, [nodes]);
     // Handle bubble lifecycle (appear/disappear animations)
     useEffect(() => {
@@ -178,11 +175,11 @@ export const ThoughtBubbleOverlay = ({ nodes, edges, showThoughtBubbles = true,
         if (!nodes || !Array.isArray(nodes))
             return set;
         for (const node of nodes) {
-            const getConversations = node.data?.getConversations;
+            const getConversations = node.data?.["getConversations"];
             if (typeof getConversations === "function") {
                 const convs = getConversations();
                 if (Array.isArray(convs)) {
-                    const hasSelf = convs.some((conv) => Boolean(conv?.agents?.has?.(node.id)));
+                    const hasSelf = convs.some((conv) => conv?.agents?.has?.(node.id));
                     if (hasSelf) {
                         set.add(node.id);
                     }
@@ -225,7 +222,7 @@ export const ThoughtBubbleOverlay = ({ nodes, edges, showThoughtBubbles = true,
         }
         if (bubbleId === null) {
             // Delay clearing the hover state when mouse leaves to prevent accidental unhover
-            // "window." to satisfy typescript
+            // "window." to satisfy TypeScript
             hoverTimeoutRef.current = window.setTimeout(() => {
                 setHoveredBubbleId(null);
                 if (onBubbleHoverChange) {
@@ -263,7 +260,7 @@ export const ThoughtBubbleOverlay = ({ nodes, edges, showThoughtBubbles = true,
             bubbleY = BUBBLE_STACK_OFFSET_TOP + bubbleIndex * BUBBLE_HEIGHT_PLUS_SPACING + BUBBLE_HEIGHT / 2;
         }
         // Determine which agents to point to. If the edge supplies an `agents` array in
-        // data (provided by AgentFlow), use that. Otherwise fallback to the explicit
+        // data (provided by AgentFlow), use that. Otherwise, fallback to the explicit
         // edge.target/edge.source pair (single target).
         let agentIds = Array.isArray(edge.data?.agents)
             ? edge.data?.agents
@@ -338,10 +335,10 @@ export const ThoughtBubbleOverlay = ({ nodes, edges, showThoughtBubbles = true,
         catch (err) {
             // Guard against unexpected DOM errors during measurement
             // Do not throw to avoid breaking the app
-            console.debug("ThoughtBubbleOverlay: updateAllLines error", err);
+            console.error("ThoughtBubbleOverlay: updateAllLines error", err);
         }
     }, [renderableBubbles, bubbleStates, calculateLineCoordinates]);
-    // Schedule post-paint updates with rAF and ResizeObserver. Also optionally run a
+    // Schedule post-paint updates with rAF and ResizeObserver. Also, optionally run a
     // continuous loop while `isStreaming` is true to keep lines in sync during streaming.
     useEffect(() => {
         mountedRef.current = true;

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

@@ -2,6 +2,4 @@ export declare const DEFAULT_FRONTMAN_X_POS = 150;
 export declare const DEFAULT_FRONTMAN_Y_POS = 450;
 export declare const BASE_RADIUS = 100;
 export declare const LEVEL_SPACING = 150;
-export declare const BACKGROUND_COLORS: string[];
-export declare const BACKGROUND_COLORS_DARK_IDX = 6;
-export declare const HEATMAP_COLORS: string[];
+export declare const TEMPORARY_NETWORK_FOLDER = "temporary";

package/dist/components/MultiAgentAccelerator/const.js

@@ -19,21 +19,7 @@ export const DEFAULT_FRONTMAN_Y_POS = 450;
 export const BASE_RADIUS = 100;
 // Distance between depth levels
 export const LEVEL_SPACING = 150;
-// Palette for progressive coloring of nodes based on depth
-export const BACKGROUND_COLORS = [
-    "#f7fbff",
-    "#deebf7",
-    "#c6dbef",
-    "#9ecae1",
-    "#6baed6",
-    "#4292c6",
-    "#2171b5",
-    "#08519c",
-    "#08306b",
-    "#041c45",
-];
-// Zero-based index of the one where colors start to get dark. Used for displaying contrasting text colors.
-export const BACKGROUND_COLORS_DARK_IDX = 6; // Somewhat subjective
-// Palette for heatmap coloring of nodes
-// For now, use same palette as background colors
-export const HEATMAP_COLORS = BACKGROUND_COLORS;
+// Temporary folder name for networks created from agent reservations. These networks are not "in a folder" when
+// they come from the backend, but we need to put them somewhere in the UI, and this makes it clear that they're
+// temporary.
+export const TEMPORARY_NETWORK_FOLDER = "temporary";

package/dist/components/Settings/FadingCheckmark.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Hook to manage the fading checkmark state.
+ */
+export declare const useCheckmarkFade: () => {
+    show: boolean;
+    trigger: () => void;
+};
+/**
+ * A checkmark that fades in and out based on the `show` prop.
+ * @param show Whether to show the checkmark.
+ */
+export declare const FadingCheckmark: ({ show }: {
+    show: boolean;
+}) => import("react/jsx-runtime").JSX.Element;