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

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

@@ -9,14 +9,18 @@ import Edit from "@mui/icons-material/Edit";
 import Box from "@mui/material/Box";
 import Chip from "@mui/material/Chip";
 import IconButton from "@mui/material/IconButton";
+import { styled } from "@mui/material/styles";
 import Tooltip from "@mui/material/Tooltip";
 import { useTreeItemModel } from "@mui/x-tree-view/hooks";
 import { TreeItemContent, TreeItemGroupTransition, TreeItemLabel, TreeItemRoot, } from "@mui/x-tree-view/TreeItem";
 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 { removeTrailingUuid } from "../../AgentChat/Common/Utils.js";
+import { downloadFile } from "../../../utils/File.js";
+//#region Constants
+// Accessible names shared between each action's tooltip title and its aria-label.
+export const EDIT_NETWORK_LABEL = "Edit this network";
+export const DOWNLOAD_NETWORK_DEFINITION_LABEL = "Download network definition";
 // Palette of colors we can use for tags
 const TAG_COLORS = [
     "--bs-accent2-light",
@@ -29,6 +33,17 @@ const TAG_COLORS = [
     "--bs-secondary",
     "--bs-yellow",
 ];
+// Shared styling for the row's action buttons (download, edit, ...). Disabled state keeps the base
+// color and only dims via opacity.
+const ActionIconButton = styled(IconButton)({
+    padding: 0,
+    color: "var(--bs-secondary)",
+    "&:hover": { color: "var(--bs-secondary-dark)" },
+    "&.Mui-disabled": {
+        opacity: 0.3,
+    },
+});
+//#endregion Types and Interfaces
 // Keep track of which tags have which colors so that the same tag always has the same color
 const tagsToColors = new Map();
 /**
@@ -46,8 +61,6 @@ const isTemporaryNetworkExpired = (expirationDate) => {
  */
 export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, onDeleteNetwork, onEditNetwork, }) => {
     const item = useTreeItemModel(itemId);
-    // We know all labels are strings because we set them that way in the tree view items
-    const labelString = label;
     const { getContextProviderProps, getRootProps, getContentProps, getLabelProps, getGroupTransitionProps } = useTreeItem({ itemId, children, label, disabled });
     const rootRef = useRef(null);
     const isParent = Array.isArray(children) && children.length > 0;
@@ -64,7 +77,7 @@ export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, onDele
     const expirationTime = item?.temporaryNetworkExpirationTime;
     const isTemporaryNetwork = Boolean(expirationTime);
     const isExpired = isChild && isTemporaryNetwork && isTemporaryNetworkExpired(expirationTime);
-    const networkDefinition = item?.temporaryNetworkDefinition ?? null;
+    const networkHocon = item?.temporaryNetworkHocon ?? null;
     const iconNameSuggestion = item.iconSuggestion;
     let muiIconElement;
     // If the item is a child (i.e., a network), we want to render an icon next to it.
@@ -106,41 +119,20 @@ export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, onDele
                                             .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] }), isChild && isTemporaryNetwork && (_jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: "0.25rem", marginLeft: "auto" }, children: [networkDefinition && (_jsx(Tooltip, { title: isExpired ? "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] }), isChild && isTemporaryNetwork && (_jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: "0.25rem", marginLeft: "auto" }, children: [networkHocon && (_jsx(Tooltip, { title: isExpired ? "Expired" : DOWNLOAD_NETWORK_DEFINITION_LABEL, children: _jsx("span", { children: _jsx(ActionIconButton, { onClick: (e) => {
+                                                    // The button is disabled while expired, so no need to guard here.
                                                     e.stopPropagation();
-                                                    // Strip the reservation UUID before building the filename so
-                                                    // exported files carry a clean name (toSafeFilename would
-                                                    // otherwise flatten the UUID's hyphens to underscores).
-                                                    const cleanName = removeTrailingUuid(labelString);
-                                                    const fileName = `${toSafeFilename(cleanName)}.json`;
-                                                    downloadFile(JSON.stringify(networkDefinition, null, 2), fileName, "application/json");
-                                                }, disabled: isExpired, "aria-label": "Download network definition", size: "small", sx: {
-                                                    padding: 0,
-                                                    color: "var(--bs-secondary)",
-                                                    "&:hover": { color: "var(--bs-secondary-dark)" },
-                                                    "&.Mui-disabled": {
-                                                        color: "var(--bs-secondary)",
-                                                        opacity: 0.3,
-                                                    },
-                                                }, children: _jsx(DownloadIcon, { sx: { fontSize: "0.75rem" } }) }) }) })), _jsx(Tooltip, { title: "Edit this network", children: _jsx("span", { children: _jsx(IconButton, { onClick: (e) => {
+                                                    downloadFile(networkHocon, item.downloadFileName, "text/plain");
+                                                }, disabled: isExpired, "aria-label": DOWNLOAD_NETWORK_DEFINITION_LABEL, size: "small", children: _jsx(DownloadIcon, { sx: { fontSize: "0.75rem" } }) }) }) })), _jsx(Tooltip, { title: EDIT_NETWORK_LABEL, children: _jsx("span", { children: _jsx(ActionIconButton, { onClick: (e) => {
                                                     e.stopPropagation();
                                                     onEditNetwork?.(itemId);
-                                                }, disabled: isExpired, size: "small", sx: {
-                                                    padding: 0,
-                                                    color: "var(--bs-secondary)",
-                                                    "&:hover": { color: "var(--bs-secondary-dark)" },
-                                                    "&.Mui-disabled": {
-                                                        color: "var(--bs-secondary)",
-                                                        opacity: 0.3,
-                                                    },
-                                                }, children: _jsx(Edit, { sx: { fontSize: "0.75rem" } }) }) }) }), _jsx(Tooltip, { title: "Delete network", children: _jsx(Delete, { onClick: (e) => {
+                                                }, disabled: isExpired, "aria-label": EDIT_NETWORK_LABEL, size: "small", children: _jsx(Edit, { sx: { fontSize: "0.75rem" } }) }) }) }), _jsx(Tooltip, { title: "Delete network", children: _jsx(Delete, { onClick: (e) => {
                                                 e.stopPropagation();
                                                 onDeleteNetwork?.(itemId, isExpired);
                                             }, sx: {
                                                 color: "var(--bs-secondary)",
                                                 "&:hover": { color: (theme) => theme.palette.warning.main },
                                                 "&.Mui-disabled": {
-                                                    color: "var(--bs-secondary)",
                                                     opacity: 0.3,
                                                 },
                                                 cursor: "pointer",

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

@@ -6,14 +6,12 @@ export declare const SPARKLE_HIGHLIGHT_CLASS = "sparkle-highlight";
 export interface SidebarProps {
     readonly id: string;
     readonly isAwaitingLlm: boolean;
-    readonly isImporting: boolean;
     readonly networkIconSuggestions?: NetworkIconSuggestions;
     readonly networks: readonly AgentInfo[];
     readonly neuroSanServerURL: string;
     readonly newlyAddedTemporaryNetworks?: Set<string>;
     readonly onDeleteNetwork?: (network: string, isExpired: boolean) => void;
     readonly onEditNetwork?: (network: string) => void;
-    readonly onImportClick?: () => void;
     readonly setSelectedNetwork: (network: string) => void;
     readonly temporaryNetworks?: readonly TemporaryNetwork[];
 }

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

@@ -15,7 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import AddBoxRounded from "@mui/icons-material/AddBoxRounded";
-import FileUploadOutlinedIcon from "@mui/icons-material/FileUploadOutlined";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import { keyframes, styled } from "@mui/material/styles";
@@ -116,7 +115,7 @@ const ServerStatusTooltip = styled(({ className, ...props }) => (_jsx(Tooltip, {
     },
 });
 //#endregion: Types
-export const Sidebar = ({ id, isAwaitingLlm, isImporting, networkIconSuggestions, networks, neuroSanServerURL, newlyAddedTemporaryNetworks, onDeleteNetwork, onEditNetwork, onImportClick, setSelectedNetwork, temporaryNetworks = EMPTY_ARRAY, }) => {
+export const Sidebar = ({ id, isAwaitingLlm, networkIconSuggestions, networks, neuroSanServerURL, newlyAddedTemporaryNetworks, onDeleteNetwork, onEditNetwork, setSelectedNetwork, temporaryNetworks = EMPTY_ARRAY, }) => {
     const [expandedItems, setExpandedItems] = useState([]);
     const [selectedItem, setSelectedItem] = useState(null);
     // Display option for agent/network names
@@ -215,10 +214,12 @@ export const Sidebar = ({ id, isAwaitingLlm, isImporting, networkIconSuggestions
                 "aria-label": "Neuro-san server status",
             },
         }, title: _jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 0.5 }, children: [_jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Status:" }), " ", mapStatus(neuroSanServerStatus?.statusText)] }), _jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "URL:" }), " ", neuroSanServerURL || "unknown"] }), _jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Service:" }), " ", neuroSanServerStatus?.healthCheckResponse?.service || "unknown"] }), _jsx(Typography, { sx: { fontWeight: "bold" }, variant: "body2", children: "Versions:" }), _jsxs(Box, { sx: { ml: 1 }, children: [_jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Neuro SAN:" }), " ", neuroSanServerStatus?.healthCheckResponse?.versions?.["neuro-san"] ?? "unknown"] }), _jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Neuro SAN Studio:" }), " ", neuroSanServerStatus?.healthCheckResponse?.versions?.["neuro-san-studio"] ?? "unknown"] })] }), !neuroSanServerStatus?.success && neuroSanServerStatus?.httpStatus && (_jsx(_Fragment, { children: _jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "HTTP status:" }), " ", `${neuroSanServerStatus.httpStatus} (${httpStatus[neuroSanServerStatus.httpStatus] ?? "Unknown status"})`] }) }))] }), placement: "right", children: _jsx("span", { children: _jsx(StatusLight, { id: `${id}-agent-network-status-light`, statusValue: toStatusColor() }) }) }));
-    const getAddNetworkButton = () => (_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: "var(--bs-secondary)" } }) }) }), _jsx(Button, { "aria-label": "Import Network Definition", disabled: isAwaitingLlm || isImporting, id: "import-network-btn", onClick: onImportClick, sx: { display: "inline-block", minWidth: "40px" }, children: _jsx(Tooltip, { title: "Import a network definition file", placement: "top", children: _jsx(FileUploadOutlinedIcon, { id: "import-network-icon", sx: { color: isAwaitingLlm || isImporting ? "rgba(0, 0, 0, 0.12)" : "var(--bs-secondary)" } }) }) })] }));
+    const getAddNetworkButton = () => (_jsx(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: (theme) => ({
+                        color: isAwaitingLlm ? theme.palette.action.disabled : "var(--bs-secondary)",
+                    }) }) }) }) }));
     const getSidebarHeading = () => (_jsxs(SidebarHeading, { id: `${id}-heading`, children: [_jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: (theme) => theme.spacing(1.5) }, children: [getStatusLight(), "Agent Networks"] }), getAddNetworkButton()] }));
     const getSidebarNetworksTree = () => (_jsx(RichTreeView, { disableSelection: isAwaitingLlm, expandedItems: expandedItems, items: treeViewItems, multiSelect: false, onExpandedItemsChange: (_event, itemIds) => setExpandedItems(itemIds), onSelectedItemsChange: handleSelectedItemsChange, selectedItems: selectedItem, slotProps: {
             item: { onDeleteNetwork, onEditNetwork: handleEditNetworkWithSelect },

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

@@ -1,7 +1,6 @@
 import { TreeViewDefaultItemModelProperties } from "@mui/x-tree-view/models";
 import { AgentInfo } from "../../../generated/neuro-san/NeuroSanClient.js";
 import { TemporaryNetwork } from "../../../state/TemporaryNetworks.js";
-import { AgentNetworkDefinitionEntry } from "../const.js";
 /**
  * Represents either a category (folder) or a network (leaf) in the tree view.
  * Note that we omit the `children` property from the parent as we want to use read-only semantics
@@ -9,11 +8,12 @@ import { AgentNetworkDefinitionEntry } from "../const.js";
 export interface AgentNetworkTreeItemModel extends Omit<TreeViewDefaultItemModelProperties, "children"> {
     readonly children?: readonly AgentNetworkTreeItemModel[];
     readonly displayName: string;
+    readonly downloadFileName?: string;
     readonly iconSuggestion?: string;
     readonly isNetwork: boolean;
     readonly tags?: readonly string[];
     readonly temporaryNetworkExpirationTime?: Date;
-    readonly temporaryNetworkDefinition?: readonly AgentNetworkDefinitionEntry[];
+    readonly temporaryNetworkHocon?: string | null;
 }
 /**
  * Recursively searches for a tree item with the specified ID within the given list of tree items.

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

@@ -1,4 +1,5 @@
-import { cleanUpAgentName, removeTrailingUuid } from "../../AgentChat/Common/Utils.js";
+import { cleanUpAgentName, removeTrailingUuid, toDisplayName } from "../../../utils/AgentName.js";
+import { toSafeFilename } from "../../../utils/File.js";
 //#endregion Types and Interfaces
 /**
  * Recursively searches for a tree item with the specified ID within the given list of tree items.
@@ -20,14 +21,6 @@ export const findTreeItemById = (items, itemId) => {
     }
     return undefined;
 };
-/**
- * Converts a raw agent name into a display name for the tree view, respecting the user's preference for native
- * vs cleaned names.
- * @param itemName - The raw agent name from the API
- * @param useNativeNames - Whether to use native names or cleaned-up names for display
- * @returns The display name to show in the tree view
- */
-const toDisplayName = (itemName, useNativeNames) => useNativeNames ? itemName : cleanUpAgentName(removeTrailingUuid(itemName));
 /**
  * Computes the display name for a network (leaf) node.
  * @param label - The label to use for the tree item (usually derived from the agent name)
@@ -45,6 +38,14 @@ const toLeafDisplayName = (label, useNativeNames, displayNameOverride) => {
     const cleanedName = cleanUpAgentName(displayNameOverride ?? removeTrailingUuid(label));
     return cleanedName;
 };
+/**
+ * Computes the filename used when exporting a network's HOCON to disk. The trailing reservation
+ * UUID is stripped first so the export carries a clean name (toSafeFilename would otherwise flatten
+ * the UUID's hyphens to underscores).
+ * @param label - The label to use for the tree item (usually derived from the agent name)
+ * @returns The sanitized `.hocon` filename for the exported network HOCON
+ */
+const toDownloadFileName = (label) => `${toSafeFilename(removeTrailingUuid(label))}.hocon`;
 /**
  * Converts an AgentInfo object into a tree item model representing a network (leaf node).
  * @param network - The AgentInfo object containing details about the network
@@ -57,11 +58,12 @@ const toNetworkLeaf = (network, label, useNativeNames, metadata = {}) => ({
     id: network.agent_name,
     label,
     displayName: toLeafDisplayName(label, useNativeNames, metadata.displayNameOverride),
+    downloadFileName: metadata.temporaryNetworkHocon ? toDownloadFileName(label) : undefined,
     iconSuggestion: metadata.iconSuggestion,
     isNetwork: true,
     tags: network.tags,
     temporaryNetworkExpirationTime: metadata.temporaryNetworkExpirationTime,
-    temporaryNetworkDefinition: metadata.temporaryNetworkDefinition,
+    temporaryNetworkHocon: metadata.temporaryNetworkHocon,
 });
 /**
  * Recursively sort tree nodes and their children by display name
@@ -174,9 +176,7 @@ export const buildTreeViewItems = (useNativeNames, regularNetworks = [], tempora
         tree = withNetworkAdded(tree, temporaryNetwork.agentInfo, useNativeNames, {
             iconSuggestion: "HourglassTop",
             temporaryNetworkExpirationTime: new Date(temporaryNetwork.reservation.expiration_time_in_seconds * 1000),
-            // The structured definition is carried through and serialized at download time (it's the same shape
-            // the import modal reads back in).
-            temporaryNetworkDefinition: temporaryNetwork.agentNetworkDefinition,
+            temporaryNetworkHocon: temporaryNetwork.networkHocon,
             displayNameOverride: temporaryNetwork.agentNetworkName,
         });
     }

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

@@ -65,22 +65,8 @@ export declare const mergeNetworks: (target: TemporaryNetwork[], incoming: Tempo
 /** Logs and notifies about a save error. Suppresses AbortError (user-canceled). */
 export declare const notifySaveError: (agentName: string, e: unknown) => void;
 /**
- * Streams a network definition through the network designer, collecting the
- * reservations returned across every chunk. Returns the accumulated networks
- * (empty if the designer returned no reservation).
+ * Streams a network definition through the network designer to obtain its reservation.
+ * Returns the single updated network as a one-element list (empty if the designer returned
+ * no reservation).
  */
 export declare const streamNetworkDesignerUpsert: (neuroSanURL: string, signal: AbortSignal, frontman: string, networkDef: AgentNetworkDefinitionEntry[], agentNetworkName: string | undefined, username: string) => Promise<TemporaryNetwork[]>;
-/** Reasons an import can fail before its networks reach the store. */
-export type ImportFailureReason = "invalid-definition" | "no-reservation";
-export type ImportNetworkResult = {
-    networks: TemporaryNetwork[];
-} | {
-    failure: ImportFailureReason;
-};
-export declare const IMPORT_FAILURE_DETAIL: Record<ImportFailureReason, string>;
-/**
- * Converts imported JSON into a network definition and streams it through the
- * network designer to obtain reservations. Returns the resulting networks, or a
- * failure reason if the content is not a valid definition or no reservation is returned.
- */
-export declare const importNetworkFromJson: (content: string, agentNetworkName: string, neuroSanURL: string, username: string) => Promise<ImportNetworkResult>;

package/dist/components/MultiAgentAccelerator/TemporaryNetworks.js

@@ -1,10 +1,11 @@
-import { getFrontman } from "./AgentFlow/GraphStructure.js";
+import { keyBy, mergeWith } from "lodash-es";
 import { AGENT_NETWORK_DEFINITION_KEY, AGENT_NETWORK_HOCON, AGENT_RESERVATIONS_KEY, DisplayAs, TEMPORARY_NETWORK_FOLDER, } from "./const.js";
-import { jsonToNetworkDefinition } from "./Sidebar/ImportNetworkModal.js";
 import { sendNetworkDesignerRequest } from "../../controller/agent/Agent.js";
 import { ChatMessageType } from "../../generated/neuro-san/NeuroSanClient.js";
-import { chatMessageFromChunk, removeTrailingUuid } from "../AgentChat/Common/Utils.js";
+import { removeTrailingUuid } from "../../utils/AgentName.js";
+import { chatMessageFromChunk } from "../AgentChat/Common/Utils.js";
 import { NotificationType, sendNotification } from "../Common/notification.js";
+//#endregion: Types
 /**
  * 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
@@ -90,22 +91,17 @@ export const isTemporaryNetwork = (agentName, networks) => agentName !== null &&
  * Merges incoming networks into target, keeping the entry with the highest expiration time.
  * Returns a new array; does not mutate either argument.
  */
-export const mergeNetworks = (target, incoming) => incoming.reduce((result, n) => {
-    const existingIdx = result.findIndex((e) => e.agentNetworkName === n.agentNetworkName);
-    // No existing entry with this name - append.
-    if (existingIdx < 0)
-        return [...result, n];
-    // Existing entry found - keep whichever reservation expires later.
-    if (n.reservation.expiration_time_in_seconds > result[existingIdx].reservation.expiration_time_in_seconds) {
-        return result.map((e, i) => (i === existingIdx ? n : e));
-    }
-    return result;
-}, [...target]);
+export const mergeNetworks = (target, incoming) => Object.values(mergeWith(keyBy(target, "agentNetworkName"), keyBy(incoming, "agentNetworkName"), 
+// Both collections share a name: keep whichever reservation expires later, existing wins ties.
+(existing, candidate) => existing &&
+    existing.reservation.expiration_time_in_seconds >= candidate.reservation.expiration_time_in_seconds
+    ? existing
+    : candidate));
 /**
  * Extracts TemporaryNetworks from a single streamed chunk, merging into `accumulated`.
  * Returns `accumulated` unchanged if the chunk yields no reservations or on parse error.
  */
-const collectNetworksFromChunk = (chunk, updated, accumulated) => {
+const collectNetworkFromChunk = (chunk, updated, accumulated) => {
     try {
         const chatMessage = chatMessageFromChunk(chunk);
         if (!chatMessage)
@@ -132,35 +128,16 @@ export const notifySaveError = (agentName, e) => {
     sendNotification(NotificationType.error, `Failed to update network "${agentName}".`, detail);
 };
 /**
- * Streams a network definition through the network designer, collecting the
- * reservations returned across every chunk. Returns the accumulated networks
- * (empty if the designer returned no reservation).
+ * Streams a network definition through the network designer to obtain its reservation.
+ * Returns the single updated network as a one-element list (empty if the designer returned
+ * no reservation).
  */
 export const streamNetworkDesignerUpsert = async (neuroSanURL, signal, frontman, networkDef, agentNetworkName, username) => {
     let newNetworks = [];
     await sendNetworkDesignerRequest(neuroSanURL, signal, frontman, networkDef, agentNetworkName, username, (chunk) => {
-        newNetworks = collectNetworksFromChunk(chunk, networkDef, newNetworks);
+        // There is only one network. The designer echoes it across streamed chunks. Merge by name so the
+        // repeated echoes collapse into that single entry rather than appending duplicates.
+        newNetworks = collectNetworkFromChunk(chunk, networkDef, newNetworks);
     });
     return newNetworks;
 };
-export const IMPORT_FAILURE_DETAIL = {
-    "invalid-definition": "The file does not contain a valid network definition.",
-    "no-reservation": "The network designer did not return a reservation. Please try again.",
-};
-/**
- * Converts imported JSON into a network definition and streams it through the
- * network designer to obtain reservations. Returns the resulting networks, or a
- * failure reason if the content is not a valid definition or no reservation is returned.
- */
-export const importNetworkFromJson = async (content, agentNetworkName, neuroSanURL, username) => {
-    const networkDef = jsonToNetworkDefinition(JSON.parse(content));
-    if (networkDef.length === 0) {
-        return { failure: "invalid-definition" };
-    }
-    const frontman = getFrontman(networkDef)?.origin ?? networkDef[0]?.origin ?? "agent";
-    const networks = await streamNetworkDesignerUpsert(neuroSanURL, new AbortController().signal, frontman, networkDef, agentNetworkName, username);
-    if (networks.length === 0) {
-        return { failure: "no-reservation" };
-    }
-    return { networks };
-};

package/dist/components/MultiAgentAccelerator/Tour/MainTourSteps.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * This file defines the steps for the main tour of the Multi-Agent Accelerator application.
  *
@@ -18,8 +19,7 @@ export const MAIN_TOUR_STEPS = [
         placement: "bottom",
     },
     {
-        content: "Agent Network Designer: Click here to create and edit your own network, with the help of a " +
-            "powerful AI assistant.",
+        content: (_jsxs(_Fragment, { children: ["Agent Network Designer: Click here to create and edit your own network, with the help of a powerful AI assistant.", _jsx("br", {}), _jsx("br", {}), "Networks you create can be downloaded from the sidebar as a HOCON file and run in neuro-san or neuro-san-studio. See the User Guide (under Help) for more information."] })),
         target: () => document.querySelector("#add-network-icon"),
         placement: "bottom",
     },

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

@@ -1,16 +1,10 @@
 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;
-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_DESIGNER_ID = "agent_network_designer";
+export declare const AGENT_NETWORK_HOCON = "agent_network_hocon_text";
 export declare const AGENT_NETWORK_NAME_KEY = "agent_network_name";
-export declare const TRIGGER_APP_TOUR_EVENT_NAME = "trigger-app-tour";
+export declare const AGENT_PROGRESS_CONNECTIVITY_KEY = "connectivity_info";
+export declare const AGENT_RESERVATIONS_KEY = "agent_reservations";
 /**
  * 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.
@@ -19,6 +13,9 @@ export type AgentNetworkDefinitionEntry = ConnectivityInfo & {
     readonly instructions?: string;
     readonly description?: string;
 };
+export declare const BASE_RADIUS = 100;
+export declare const DEFAULT_FRONTMAN_X_POS = 150;
+export declare const DEFAULT_FRONTMAN_Y_POS = 450;
 /** Possible values for the `display_as` field in ConnectivityInfo / AgentNetworkDefinitionEntry. */
 export declare enum DisplayAs {
     LLM_AGENT = "llm_agent",
@@ -26,6 +23,9 @@ export declare enum DisplayAs {
     LANGCHAIN_TOOL = "langchain_tool",
     EXTERNAL_AGENT = "external_agent"
 }
+export declare const EXPIRED_NETWORKS_CHECK_INTERVAL_MS: number;
 export declare const GRACE_PERIOD_MS: number;
+export declare const LEVEL_SPACING = 150;
 export declare const SHOW_TOUR_DELAY_MS = 5000;
-export declare const EXPIRED_NETWORKS_CHECK_INTERVAL_MS: number;
+export declare const TEMPORARY_NETWORK_FOLDER = "temporary";
+export declare const TRIGGER_APP_TOUR_EVENT_NAME = "trigger-app-tour";

package/dist/components/MultiAgentAccelerator/const.js

@@ -13,30 +13,22 @@ 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.
 */
-export const DEFAULT_FRONTMAN_X_POS = 150;
-export const DEFAULT_FRONTMAN_Y_POS = 450;
-// Minimum distance from center
-export const BASE_RADIUS = 100;
-// Distance between depth levels
-export const LEVEL_SPACING = 150;
-// 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";
-// We expect the agent reservations to be stored in sly_data under this key
-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";
+// Agent name for the special "Agent Network Designer" network
+export const AGENT_NETWORK_DESIGNER_ID = "agent_network_designer";
+// 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 sly_data where the agent network name is stored
 export const AGENT_NETWORK_NAME_KEY = "agent_network_name";
-// The event name that needs to be fired for the app tour to start
-export const TRIGGER_APP_TOUR_EVENT_NAME = "trigger-app-tour";
+// The key in the message structure where connectivity info is stored for agent progress messages
+export const AGENT_PROGRESS_CONNECTIVITY_KEY = "connectivity_info";
+// We expect the agent reservations to be stored in sly_data under this key
+export const AGENT_RESERVATIONS_KEY = "agent_reservations";
+// Minimum distance from center
+export const BASE_RADIUS = 100;
+export const DEFAULT_FRONTMAN_X_POS = 150;
+export const DEFAULT_FRONTMAN_Y_POS = 450;
 /** Possible values for the `display_as` field in ConnectivityInfo / AgentNetworkDefinitionEntry. */
 export var DisplayAs;
 (function (DisplayAs) {
@@ -45,9 +37,17 @@ export var DisplayAs;
     DisplayAs["LANGCHAIN_TOOL"] = "langchain_tool";
     DisplayAs["EXTERNAL_AGENT"] = "external_agent";
 })(DisplayAs || (DisplayAs = {}));
+// Check for expired networks every this many milliseconds
+export 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
 export const GRACE_PERIOD_MS = 5 * 60 * 1000; // 5 minutes
+// Distance between depth levels
+export const LEVEL_SPACING = 150;
 // We show the tour modal after this amount of time so as not to "pounce" on the user when they first open the app
 export const SHOW_TOUR_DELAY_MS = 5000;
-// Check for expired networks every this many milliseconds
-export const EXPIRED_NETWORKS_CHECK_INTERVAL_MS = 10 * 1000;
+// 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";
+// The event name that needs to be fired for the app tour to start
+export const TRIGGER_APP_TOUR_EVENT_NAME = "trigger-app-tour";

package/dist/state/TemporaryNetworks.js

@@ -13,6 +13,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 { keyBy } from "lodash-es";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 /**
@@ -22,29 +23,19 @@ export const useTempNetworksStore = create()(persist((set) => ({
     tempNetworks: [],
     setTempNetworks: (tempNetworks) => set({ tempNetworks }),
     upsertTempNetworks: (incomingNetworks) => {
-        set((state) => {
-            const updated = [...state.tempNetworks];
-            for (const incomingNetwork of incomingNetworks) {
-                const existingIndex = updated.findIndex((network) => network.agentNetworkName === incomingNetwork.agentNetworkName);
-                if (existingIndex >= 0) {
-                    updated[existingIndex] = incomingNetwork; // replace the existing entry in-place
-                }
-                else {
-                    updated.push(incomingNetwork); // no existing entry — add as new
-                }
-            }
-            return { tempNetworks: updated };
-        });
+        set((state) => ({
+            // Key both sides by name and let incoming win; existing entries keep their position,
+            // new ones are appended.
+            tempNetworks: Object.values({
+                ...keyBy(state.tempNetworks, "agentNetworkName"),
+                ...keyBy(incomingNetworks, "agentNetworkName"),
+            }),
+        }));
         return incomingNetworks;
     },
-    updateTempNetworkDefinition: (networkName, agentNetworkDefinition) => set((state) => {
-        const updated = [...state.tempNetworks];
-        const existingIndex = updated.findIndex((network) => network.agentInfo.agent_name === networkName);
-        if (existingIndex >= 0) {
-            updated[existingIndex] = { ...updated[existingIndex], agentNetworkDefinition };
-        }
-        return { tempNetworks: updated };
-    }),
+    updateTempNetworkDefinition: (networkName, agentNetworkDefinition) => set(({ tempNetworks }) => ({
+        tempNetworks: tempNetworks.map((network) => network.agentInfo.agent_name === networkName ? { ...network, agentNetworkDefinition } : network),
+    })),
 }), {
     name: "temp-networks",
 }));