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

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

@@ -16,7 +16,11 @@ limitations under the License.
 */
 import { getBezierPath } from "@xyflow/react";
 import { useEffect, useRef } from "react";
-import { useSettingsStore } from "../../state/Settings.js";
+import { useSettingsStore } from "../../../state/Settings.js";
+//#region Constants
+const DEFAULT_MAX_PARTICLES = 250;
+const DEFAULT_PARTICLES_PER_FRAME = 25;
+//#endregion Interfaces and Types
 const createFunnelParticleOnPath = (pathEl, canvasOffset, baseProgress, plasmaColor) => {
     const totalLength = pathEl.getTotalLength();
     const speed = 0.02 + Math.random() * 0.003;
@@ -64,7 +68,7 @@ const createFunnelParticleOnPath = (pathEl, canvasOffset, baseProgress, plasmaCo
     const isAlive = () => progress * totalLength < totalLength * 0.98;
     return { update, draw, isAlive };
 };
-export const PlasmaEdge = ({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, }) => {
+export const PlasmaEdge = ({ maxParticles = DEFAULT_MAX_PARTICLES, particlesPerFrame = DEFAULT_PARTICLES_PER_FRAME, sourcePosition, sourceX, sourceY, targetPosition, targetX, targetY, }) => {
     const canvasRef = useRef(null);
     const pathRef = useRef(null);
     const animationRef = useRef(null);
@@ -97,12 +101,10 @@ export const PlasmaEdge = ({ sourceX, sourceY, targetX, targetY, sourcePosition,
         ctx.setTransform(1, 0, 0, 1, 0, 0);
         ctx.scale(dpr, dpr);
         const canvasOffset = { x, y };
-        const MAX_PARTICLES = 250;
-        const PARTICLES_PER_FRAME = 25;
         const animate = () => {
             ctx.clearRect(0, 0, width, height);
-            for (let i = 0; i < PARTICLES_PER_FRAME; i += 1) {
-                if (particles.current.length < MAX_PARTICLES) {
+            for (let i = 0; i < particlesPerFrame; i += 1) {
+                if (particles.current.length < maxParticles) {
                     const t = Math.random();
                     if (Math.random() < 1 - t) {
                         particles.current.push(createFunnelParticleOnPath(pathEl, canvasOffset, t, plasmaColor));
@@ -118,9 +120,12 @@ export const PlasmaEdge = ({ sourceX, sourceY, targetX, targetY, sourcePosition,
         };
         animate();
         return () => {
-            if (animationRef.current !== undefined)
+            if (animationRef.current !== undefined) {
                 cancelAnimationFrame(animationRef.current);
+                animationRef.current = undefined;
+            }
+            particles.current = [];
         };
-    }, [edgePath, width, height, plasmaColor, x, y]);
+    }, [edgePath, width, height, plasmaColor, x, y, particlesPerFrame, maxParticles]);
     return (_jsxs(_Fragment, { children: [_jsx("foreignObject", { id: `foreign-object-${x}-${y}`, width: width, height: height, x: x, y: y, style: { pointerEvents: "none", overflow: "visible" }, children: _jsx("canvas", { id: `canvas-${x}-${y}`, ref: canvasRef }) }), _jsx("path", { id: `path-${edgePath}`, ref: pathRef, d: edgePath, fill: "none", stroke: "none", style: { position: "absolute", visibility: "hidden" } })] }));
 };

package/dist/components/MultiAgentAccelerator/MultiAgentAccelerator.js

@@ -26,64 +26,33 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useJoyride } from "react-joyride";
 import { extractConversations } from "./AgentConversations.js";
 import { getUpdatedAgentCounts } from "./AgentCounts.js";
-import { AgentFlow } from "./AgentFlow.js";
+import { AgentFlow } from "./AgentFlow/AgentFlow.js";
 import { extractAgentNetworkDesignerProgress } from "./AgentNetworkDesigner.js";
-import { AGENT_NETWORK_DEFINITION_KEY, AGENT_NETWORK_DESIGNER_ID, AGENT_NETWORK_HOCON, AGENT_NETWORK_NAME_KEY, GRACE_PERIOD_MS, SHOW_TOUR_DELAY_MS, TRIGGER_APP_TOUR_EVENT_NAME, } from "./const.js";
+import { AGENT_NETWORK_DEFINITION_KEY, AGENT_NETWORK_DESIGNER_ID, AGENT_NETWORK_HOCON, AGENT_NETWORK_NAME_KEY, EXPIRED_NETWORKS_CHECK_INTERVAL_MS, GRACE_PERIOD_MS, SHOW_TOUR_DELAY_MS, TRIGGER_APP_TOUR_EVENT_NAME, } from "./const.js";
 import { Sidebar } from "./Sidebar/Sidebar.js";
-import { extractTemporaryNetworksFromMessage, isTemporaryNetwork, mergeNetworks } from "./TemporaryNetworks.js";
-import { getAgentFunction, getAgentNetworks, getConnectivity, sendNetworkDesignerUpdate, } from "../../controller/agent/Agent.js";
+import { extractTemporaryNetworksFromMessage, isTemporaryNetwork, notifySaveError, streamNetworkDesignerUpsert, } from "./TemporaryNetworks.js";
+import { MAIN_TOUR_STEPS } from "./Tour/MainTourSteps.js";
+import { getAgentFunction, getAgentNetworks, getConnectivity } from "../../controller/agent/Agent.js";
 import { getAgentIconSuggestions, getNetworkIconSuggestions } from "../../controller/agent/IconSuggestions.js";
 import { useAgentChatHistoryStore } from "../../state/ChatHistory.js";
-import { useSettingsStore } from "../../state/Settings.js";
 import { useTempNetworksStore } from "../../state/TemporaryNetworks.js";
 import { TourPromptState, useTourStore } from "../../state/Tour.js";
+import { toDisplayName } from "../../utils/AgentName.js";
 import { getZIndex } from "../../utils/zIndexLayers.js";
 import { ChatCommon } from "../AgentChat/ChatCommon/ChatCommon.js";
 import { LlmChatButton } from "../AgentChat/Common/LlmChatButton.js";
 import { isLegacyAgentType } from "../AgentChat/Common/Types.js";
-import { chatMessageFromChunk, cleanUpAgentName, removeTrailingUuid } from "../AgentChat/Common/Utils.js";
+import { chatMessageFromChunk } from "../AgentChat/Common/Utils.js";
 import { ConfirmationModal, StyledButton } from "../Common/ConfirmationModal.js";
-import { closeNotification, NotificationType, sendNotification } from "../Common/notification.js";
-import { MAIN_TOUR_STEPS } from "./Tour/MainTourSteps.js";
+import { MUIAlert } from "../Common/MUIAlert.js";
 import { MUIDialog } from "../Common/MUIDialog.js";
-// Check for expired networks every this many milliseconds
-const EXPIRED_NETWORKS_CHECK_INTERVAL_MS = 10 * 1000;
+import { closeNotification, NotificationType, sendNotification } from "../Common/notification.js";
+import { BYOK } from "./Schema/SlyData.js";
+import { getApiKey, LLM_PROVIDER_API_KEY_FIELD, useSettingsStore } from "../../state/Settings.js";
 // Animation time for the left and right panels to slide in or out when launching the animation
 const GROW_ANIMATION_TIME_MS = 800;
 // Optimization to avoid creating a new empty map on every render
 const EMPTY_THOUGHT_BUBBLE_EDGES = new Map();
-// #region: Agent-save helpers
-/**
- * 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) => {
-    try {
-        const chatMessage = chatMessageFromChunk(chunk);
-        if (!chatMessage)
-            return accumulated;
-        // Always use the user's edited definition as the authoritative value.
-        const converted = extractTemporaryNetworksFromMessage(chatMessage, updated);
-        if (converted.length === 0)
-            return accumulated;
-        return mergeNetworks(accumulated, converted);
-    }
-    catch (e) {
-        console.warn("Failed to process chunk from network designer:", e);
-        return accumulated;
-    }
-};
-/** Logs and notifies about a save error. Suppresses AbortError (user-canceled). */
-const notifySaveError = (agentName, e) => {
-    if (e instanceof DOMException && e.name === "AbortError")
-        return;
-    console.error("Failed to submit agent network update:", e);
-    const detail = e instanceof DOMException && e.name === "TimeoutError"
-        ? "The request timed out waiting for the server. Please try again."
-        : String(e);
-    sendNotification(NotificationType.error, `Failed to update network "${agentName}".`, detail);
-};
-// #endregion: Agent-save helpers
 /**
  * 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.
@@ -116,8 +85,9 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
     const [agentIconSuggestions, setAgentIconSuggestions] = useState(null);
     const [selectedNetwork, setSelectedNetwork] = useState(null);
     const [networkDescription, setNetworkDescription] = useState("");
-    const networkDisplayName = useMemo(() => (useNativeNames ? selectedNetwork : cleanUpAgentName(removeTrailingUuid(selectedNetwork))), [selectedNetwork, useNativeNames]);
-    const [providerKeysRequired, setProviderKeysRequired] = useState(new Set());
+    const networkDisplayName = useMemo(() => toDisplayName(selectedNetwork, useNativeNames), [selectedNetwork, useNativeNames]);
+    // LLM providers for which BYOK keys are supported by the current network
+    const [supportedByokProviders, setSupportedByokProviders] = useState(new Set());
     const neuroSanURL = useSettingsStore((state) => state.settings.externalServices.neuroSanUrl) ?? defaultNeuroSanUrl;
     // Tracks how many times each agent has been involved in the conversation
     const [agentCounts, setAgentCounts] = useState(new Map());
@@ -191,9 +161,8 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
     // progresses. We read it back here to find the matching temp network and override agent_network_definition in the
     // outgoing request — leaving what's in IndexedDB untouched.
     const designerSlyData = useAgentChatHistoryStore((state) => state.history[AGENT_NETWORK_DESIGNER_ID]?.slyData);
-    const designerNetworkName = isNetworkDesignerMode
-        ? designerSlyData?.[AGENT_NETWORK_NAME_KEY]
-        : undefined;
+    const designerNetworkNameValue = designerSlyData?.[AGENT_NETWORK_NAME_KEY];
+    const designerNetworkName = isNetworkDesignerMode && typeof designerNetworkNameValue === "string" ? designerNetworkNameValue : undefined;
     const designerTempNetwork = designerNetworkName
         ? temporaryNetworks.find((n) => n.agentNetworkName === designerNetworkName)
         : undefined;
@@ -201,16 +170,14 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
      * Builds the API keys object to be sent as extraSlyData with each request, based on the LLM providers required
      * by the currently selected network. Only includes keys for providers that are required.
      */
-    const getApiKeys = () => {
-        const llmConfig = {};
-        if (providerKeysRequired.has("OpenAI")) {
-            llmConfig["openai_api_key"] = apiKeys["OpenAI"];
-        }
-        if (providerKeysRequired.has("Anthropic")) {
-            llmConfig["anthropic_api_key"] = apiKeys["Anthropic"];
-        }
-        return { llm_config: llmConfig };
-    };
+    const getApiKeys = () => ({
+        llm_config: Object.fromEntries([...supportedByokProviders]
+            .map((provider) => [
+            LLM_PROVIDER_API_KEY_FIELD[provider],
+            getApiKey(apiKeys, provider),
+        ])
+            .filter((entry) => Boolean(entry[1]))),
+    });
     /**
      * Builds the extraSlyData object to be sent with each request, including information for Agent Network Designer
      * and (if required) API keys for LLM providers.
@@ -237,7 +204,7 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
         return undefined;
     };
     // Whether any API keys are required
-    const anyApiKeysRequired = providerKeysRequired.size > 0;
+    const anyApiKeysRequired = supportedByokProviders.size > 0;
     // Build base extraSlyData
     const baseExtraSlyData = buildExtraSlyData();
     // Add API keys to extraSlyData if needed, merging with baseExtraSlyData if it exists
@@ -252,7 +219,33 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
         chatRef.current?.handleStop();
         resetState();
     }, [resetState]);
-    const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+    /**
+     * Maps an API key name to the corresponding LLM provider
+     */
+    const apiKeyToProvider = useCallback((key) => {
+        switch (key) {
+            case "openai_api_key":
+                return "OpenAI";
+            case "anthropic_api_key":
+                return "Anthropic";
+            default:
+                return null;
+        }
+    }, []);
+    /**
+     * Given a SlyData schema, returns the set of LLM providers that are supported by the agent network.
+     * @note Semantics are "oneOf": a key must be supplied for at least one of the named providers
+     */
+    const getSupportedLlmProviders = useCallback((schema) => {
+        const parsed = BYOK.safeParse(schema);
+        if (!parsed.success || !parsed.data.required?.includes("llm_config")) {
+            return new Set();
+        }
+        const providerKeys = Object.keys(parsed.data.properties?.llm_config?.properties ?? {});
+        return new Set(providerKeys
+            .map((key) => apiKeyToProvider(key))
+            .filter((provider) => provider !== null));
+    }, [apiKeyToProvider]);
     useEffect(() => {
         ;
         (async () => {
@@ -273,23 +266,14 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
         const fetchAgentDetails = async () => {
             // It is a Neuro-san agent, so get the function and connectivity info
             try {
+                // Reset before fetching
+                setNetworkDescription("");
+                setSupportedByokProviders(new Set());
+                // Get agent function from server
                 const agentFunction = await getAgentFunction(neuroSanURL, selectedNetwork, username);
                 setNetworkDescription(agentFunction?.function?.description || "");
                 const schema = agentFunction?.function?.sly_data_schema;
-                const schemaProperties = isRecord(schema) ? schema["properties"] : undefined;
-                const llmConfig = isRecord(schemaProperties) ? schemaProperties["llm_config"] : undefined;
-                const llmConfigRequired = isRecord(llmConfig) ? llmConfig["required"] : undefined;
-                setProviderKeysRequired(new Set((Array.isArray(llmConfigRequired) ? llmConfigRequired : []).flatMap((key) => {
-                    if (key === "openai_api_key") {
-                        return ["OpenAI"];
-                    }
-                    if (key === "anthropic_api_key") {
-                        return ["Anthropic"];
-                    }
-                    console.warn(`Unknown API key requirement "${key}" for network ${selectedNetwork}. Skipping.`);
-                    // Will get dropped by flatMap
-                    return [];
-                })));
+                setSupportedByokProviders(getSupportedLlmProviders(schema));
             }
             catch (e) {
                 console.warn(`Unable to get agent details for network ${selectedNetwork}:`, e);
@@ -300,7 +284,7 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
         if (selectedNetwork && !isLegacyAgentType(selectedNetwork)) {
             void fetchAgentDetails();
         }
-    }, [neuroSanURL, selectedNetwork, username]);
+    }, [getSupportedLlmProviders, neuroSanURL, selectedNetwork, username]);
     useEffect(() => {
         ;
         (async () => {
@@ -466,10 +450,7 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
      */
     const onSaveAgent = useCallback(async (agentName, updated, agentNetworkName, signal) => {
         try {
-            let newNetworks = [];
-            await sendNetworkDesignerUpdate(neuroSanURL, signal, agentName, updated, agentNetworkName, username, (chunk) => {
-                newNetworks = collectNetworksFromChunk(chunk, updated, newNetworks);
-            });
+            const newNetworks = await streamNetworkDesignerUpsert(neuroSanURL, signal, agentName, updated, agentNetworkName, username);
             if (newNetworks.length === 0) {
                 sendNotification(NotificationType.error, `Failed to update network "${agentName}".`, "The network designer did not return a reservation. Please try again.");
                 return;
@@ -511,7 +492,7 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
     }, [resetState]);
     const handleDeleteNetwork = (networkId, isExpired) => {
         if (isExpired) {
-            // It's expired so just delete it without confirmation
+            // It's expired, so just delete it without confirmation
             const tempNetworksWithoutThisOne = temporaryNetworks.filter((network) => network.agentInfo.agent_name !== networkId);
             useTempNetworksStore.getState().setTempNetworks(tempNetworksWithoutThisOne);
             useAgentChatHistoryStore.getState().resetHistory(networkId);
@@ -555,8 +536,11 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
         }
     }, [tourRequested, selectedNetwork, agentsInNetwork, networks, controls, setTourStatus]);
     const getMissingApiKeys = () => {
-        return providerKeysRequired.size > 0 ? [...providerKeysRequired].filter((provider) => !apiKeys?.[provider]) : [];
+        // Calculate intersection of what we have (apiKeys) and what is required (providerKeysRequired)
+        const intersection = new Set([...supportedByokProviders].filter((provider) => getApiKey(apiKeys, provider)));
+        return intersection.size === 0 ? supportedByokProviders : new Set();
     };
+    const hasMissingApiKeys = getMissingApiKeys().size > 0;
     const getLeftPanel = () => {
         return (_jsx(Slide, { id: "multi-agent-accelerator-grid-sidebar-slide", in: !enableZenMode || !isAwaitingLlm, direction: "right", timeout: GROW_ANIMATION_TIME_MS, onExited: () => {
                 setIsStreaming(true);
@@ -586,7 +570,7 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
                         [AGENT_NETWORK_DESIGNER_ID]: "Describe in plain language the network you would like to build.",
                     }, currentUser: username, customAgentGreetings: {
                         [AGENT_NETWORK_DESIGNER_ID]: "Let's build a network together!",
-                    }, extraSlyData: extraSlyData, id: "agent-network-ui", isAwaitingLlm: isAwaitingLlm, missingApiKeys: getMissingApiKeys(), networkDescription: networkDescription, neuroSanURL: neuroSanURL, onChunkReceived: onChunkReceived, onStreamingComplete: onStreamingComplete, onStreamingStarted: onStreamingStarted, ref: chatRef, sampleQueries: sampleQueries, setIsAwaitingLlm: setIsAwaitingLlm, selectedNetwork: selectedNetwork, setSelectedNetwork: changeSelectedNetwork }, selectedNetwork ?? "no-network") }) }));
+                    }, extraSlyData: extraSlyData, id: "agent-network-ui", isAwaitingLlm: isAwaitingLlm, hasMissingApiKeys: hasMissingApiKeys, networkDescription: networkDescription, neuroSanURL: neuroSanURL, onChunkReceived: onChunkReceived, onStreamingComplete: onStreamingComplete, onStreamingStarted: onStreamingStarted, ref: chatRef, sampleQueries: sampleQueries, setIsAwaitingLlm: setIsAwaitingLlm, selectedNetwork: selectedNetwork, setSelectedNetwork: changeSelectedNetwork }, selectedNetwork ?? "no-network") }) }));
     };
     const getStopButton = () => {
         return (_jsx(_Fragment, { children: isAwaitingLlm && enableZenMode && (_jsx(Box, { id: "stop-button-container", sx: {
@@ -600,7 +584,7 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
                             },
                         }, children: _jsx(StopCircle, { fontSize: "large", id: "stop-button-icon" }) }) }) })) }));
     };
-    const getDeleteNetworkConfirmationModal = () => confirmationModalOpen ? (_jsx(ConfirmationModal, { id: "delete-network-confirmation-modal", content: `The network "${cleanUpAgentName(removeTrailingUuid(networkToBeDeleted))}" will be deleted. ` +
+    const getDeleteNetworkConfirmationModal = () => confirmationModalOpen ? (_jsx(ConfirmationModal, { id: "delete-network-confirmation-modal", content: `The network "${toDisplayName(networkToBeDeleted)}" will be deleted. ` +
             "This action cannot be undone. Are you sure you want to proceed?", handleCancel: () => {
             setConfirmationModalOpen(false);
             setNetworkToBeDeleted(null);
@@ -656,7 +640,14 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
                     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: [Tour, getTourModal(), getProgressPopper(), getDeleteNetworkConfirmationModal(), _jsxs(Grid, { id: "multi-agent-accelerator-grid", container: true, columns: 18, sx: {
+    const getMissingApiKeysAlert = () => hasMissingApiKeys && (_jsx(MUIAlert, { closeable: false, id: "llm-chat-missing-api-keys-alert", severity: "warning", sx: {
+            my: 1.5,
+            "& .MuiAlert-message": {
+                width: "100%",
+                textAlign: "center",
+            },
+        }, children: _jsxs(Typography, { sx: { fontSize: "larger" }, children: ["API key(s) required for at least one of these providers:", " ", _jsx("strong", { children: [...getMissingApiKeys()].join(", ") }), ". Please add the required key(s) in \"Settings\" to use this Network."] }) }));
+    return (_jsxs(_Fragment, { children: [getMissingApiKeysAlert(), Tour, getTourModal(), getProgressPopper(), getDeleteNetworkConfirmationModal(), _jsxs(Grid, { id: "multi-agent-accelerator-grid", container: true, columns: 18, sx: {
                     display: "flex",
                     flex: 1,
                     height: "85%",

package/dist/components/MultiAgentAccelerator/Schema/SlyData.d.ts

@@ -0,0 +1,17 @@
+import * as z from "zod";
+/**
+ * Zod schema for sly_data BYOK structure
+ */
+export declare const BYOK: z.ZodObject<{
+    type: z.ZodOptional<z.ZodString>;
+    required: z.ZodOptional<z.ZodTuple<[z.ZodLiteral<"llm_config">], null>>;
+    properties: z.ZodOptional<z.ZodObject<{
+        llm_config: z.ZodOptional<z.ZodObject<{
+            type: z.ZodOptional<z.ZodString>;
+            properties: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodObject<{
+                type: z.ZodOptional<z.ZodString>;
+                description: z.ZodOptional<z.ZodString>;
+            }, z.core.$loose>>>;
+        }, z.core.$loose>>;
+    }, z.core.$loose>>;
+}, z.core.$loose>;

package/dist/components/MultiAgentAccelerator/Schema/SlyData.js

@@ -0,0 +1,23 @@
+import * as z from "zod";
+/**
+ * Zod schema for sly_data BYOK structure
+ */
+export const BYOK = z.looseObject({
+    type: z.string().optional(),
+    required: z.tuple([z.literal("llm_config")]).optional(),
+    properties: z
+        .looseObject({
+        llm_config: z
+            .looseObject({
+            type: z.string().optional(),
+            properties: z
+                .record(z.string(), z.looseObject({
+                type: z.string().optional(),
+                description: z.string().optional(),
+            }))
+                .optional(),
+        })
+            .optional(),
+    })
+        .optional(),
+});

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

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

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

@@ -9,13 +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 { 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",
@@ -28,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();
 /**
@@ -45,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;
@@ -105,37 +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: [networkHocon && (_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();
-                                                    const fileName = `${toSafeFilename(labelString)}.hocon`;
-                                                    downloadFile(networkHocon, fileName);
-                                                }, 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.js

@@ -120,26 +120,17 @@ export const Sidebar = ({ id, isAwaitingLlm, networkIconSuggestions, networks, n
     const [selectedItem, setSelectedItem] = useState(null);
     // Display option for agent/network names
     const useNativeNames = useSettingsStore((state) => state.settings.appearance.useNativeNames);
-    const [neuroSanServerStatus, setNeuroSanServerStatus] = useState({ onlineStatus: "unknown", version: null });
+    const [neuroSanServerStatus, setNeuroSanServerStatus] = useState(null);
     useEffect(() => {
+        // Track whether the current request is still valid. If the component unmounts or the URL changes,
+        // we want to ignore any results from previous requests.
         let isCurrentRequest = true;
         const checkStatus = async () => {
-            try {
-                const result = await testConnection(neuroSanServerURL);
-                if (!isCurrentRequest) {
-                    return;
-                }
-                setNeuroSanServerStatus(result.success
-                    ? { onlineStatus: "online", version: result.version }
-                    : { error: result.status, httpStatus: result.httpStatus, onlineStatus: "offline", version: null });
-            }
-            catch (error) {
-                if (!isCurrentRequest) {
-                    return;
-                }
-                const errorString = error instanceof Error ? error.message : String(error);
-                setNeuroSanServerStatus({ error: errorString, onlineStatus: "offline", version: null });
+            const result = await testConnection(neuroSanServerURL);
+            if (!isCurrentRequest) {
+                return;
             }
+            setNeuroSanServerStatus(result);
         };
         void checkStatus();
         const intervalId = setInterval(checkStatus, NEURO_SAN_PING_INTERVAL_MS);
@@ -207,25 +198,28 @@ export const Sidebar = ({ id, isAwaitingLlm, networkIconSuggestions, networks, n
         };
     }, [newlyAddedTemporaryNetworks]);
     const toStatusColor = () => {
-        switch (neuroSanServerStatus.onlineStatus) {
-            case "online":
+        switch (neuroSanServerStatus?.success) {
+            case true:
                 return "green";
-            case "offline":
+            case false:
                 return "red";
-            case "unknown":
+            case undefined:
             default:
                 return "unknown";
         }
     };
+    const mapStatus = (statusText) => (statusText === "ok" ? "online" : (statusText ?? "unknown"));
     const getStatusLight = () => (_jsx(ServerStatusTooltip, { slotProps: {
             popper: {
                 "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:" }), " ", neuroSanServerStatus.onlineStatus] }), _jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Version:" }), " ", neuroSanServerStatus.version ?? "unknown"] }), _jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "URL:" }), " ", neuroSanServerURL || "unknown"] }), neuroSanServerStatus.error && (_jsxs(_Fragment, { children: [_jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Error:" }), " ", neuroSanServerStatus.error] }), neuroSanServerStatus.httpStatus && (_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() }) }) }));
+        }, 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 = () => (_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: { color: "var(--bs-secondary)" } }) }) }) }));
+            }, 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

@@ -8,6 +8,7 @@ import { TemporaryNetwork } from "../../../state/TemporaryNetworks.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[];

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

@@ -1,5 +1,6 @@
-import { cleanUpAgentName, removeTrailingUuid } from "../../AgentChat/Common/Utils.js";
-//#endregion
+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.
  * @param items - The list of tree items to search through
@@ -21,13 +22,30 @@ 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
+ * 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)
  * @param useNativeNames - Whether to use native names or cleaned-up names for display
+ * @param displayNameOverride - For temporary networks, `label` is the raw reservation_id, which is canonicalized and
+ * may have lost the word separators (_/-) that cleanUpAgentName relies on. When provided (the temp network's
+ * agentNetworkName), it is used as the basis for the cleaned name instead of the path part.
  * @returns The display name to show in the tree view
  */
-const toDisplayName = (itemName, useNativeNames) => useNativeNames ? itemName : cleanUpAgentName(removeTrailingUuid(itemName));
+const toLeafDisplayName = (label, useNativeNames, displayNameOverride) => {
+    // Native mode shows the raw agent name part, unmodified.
+    if (useNativeNames) {
+        return label;
+    }
+    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
@@ -39,7 +57,8 @@ const toDisplayName = (itemName, useNativeNames) => useNativeNames ? itemName :
 const toNetworkLeaf = (network, label, useNativeNames, metadata = {}) => ({
     id: network.agent_name,
     label,
-    displayName: toDisplayName(label, useNativeNames),
+    displayName: toLeafDisplayName(label, useNativeNames, metadata.displayNameOverride),
+    downloadFileName: metadata.temporaryNetworkHocon ? toDownloadFileName(label) : undefined,
     iconSuggestion: metadata.iconSuggestion,
     isNetwork: true,
     tags: network.tags,
@@ -158,6 +177,7 @@ export const buildTreeViewItems = (useNativeNames, regularNetworks = [], tempora
             iconSuggestion: "HourglassTop",
             temporaryNetworkExpirationTime: new Date(temporaryNetwork.reservation.expiration_time_in_seconds * 1000),
             temporaryNetworkHocon: temporaryNetwork.networkHocon,
+            displayNameOverride: temporaryNetwork.agentNetworkName,
         });
     }
     const treeViewItems = tree.uncategorizedItems.length > 0