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

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

@@ -20,9 +20,10 @@ import dagre from "@dagrejs/dagre";
 import { MarkerType } from "@xyflow/react";
 import cloneDeep from "lodash-es/cloneDeep.js";
 import { FRONTMAN_SIZE_MULTIPLIER, NODE_HEIGHT, NODE_WIDTH } from "./AgentNode.js";
-import { BASE_RADIUS, DEFAULT_FRONTMAN_X_POS, DEFAULT_FRONTMAN_Y_POS, LEVEL_SPACING } from "./const.js";
-import { isEditableAgent } from "./TemporaryNetworks.js";
-import { cleanUpAgentName, KNOWN_MESSAGE_TYPES_FOR_PLASMA } from "../AgentChat/Common/Utils.js";
+import { cleanUpAgentName, KNOWN_MESSAGE_TYPES_FOR_PLASMA } from "../../AgentChat/Common/Utils.js";
+import { BASE_RADIUS, DEFAULT_FRONTMAN_X_POS, DEFAULT_FRONTMAN_Y_POS, LEVEL_SPACING } from "../const.js";
+import { getFrontman, getParentAgents, getParents } from "./GraphStructure.js";
+import { isEditableAgent } from "../TemporaryNetworks.js";
 export const MAX_GLOBAL_THOUGHT_BUBBLES = 5;
 const FRONTMAN_OFFSET_X = (NODE_WIDTH * (FRONTMAN_SIZE_MULTIPLIER - 1)) / 2;
 const FRONTMAN_OFFSET_Y = (NODE_HEIGHT * (FRONTMAN_SIZE_MULTIPLIER - 1)) / 2;
@@ -60,34 +61,6 @@ const areInSameConversation = (conversations, sourceAgent, targetAgent) => {
 // Name for custom node
 const AGENT_NODE_TYPE_NAME = "agentNode";
 // #endregion: Constants
-/**
- * Returns the "origins" (node names) of the _immediate_ parents of a node in the agent network. Grandparents and
- * higher are not included.
- *
- * @param node Node ID for which to find parents
- * @param parentAgents Full list of parent agents in the network
- * @returns The IDs of the immediate parent nodes for the given node or empty array if no parents are found (frontman)
- */
-const getParents = (node, parentAgents) => {
-    return parentAgents.filter((agent) => agent.tools.includes(node)).map((parentNode) => parentNode.origin);
-};
-// "Parent agents" are those that have tools, aka "child agents"
-const getParentAgents = (agentsInNetwork) => agentsInNetwork.length === 1 ? agentsInNetwork : agentsInNetwork.filter((agent) => agent.tools?.length > 0);
-// "Child agents" are those that are declared as tools by other agents
-const getChildAgents = (parentAgents) => {
-    const childAgentsSet = new Set();
-    parentAgents.forEach((agent) => {
-        agent?.tools?.forEach((tool) => {
-            childAgentsSet.add(tool);
-        });
-    });
-    return childAgentsSet;
-};
-// Frontman is defined as the agent that has no parent. There should be only one in the graph.
-// Frontman is one of the parent agents.
-// There is no explicit field that tells us which agent is the frontman, so we determine it by checking
-// which parent agent does not appear in the set of child agents.
-const getFrontman = (parentAgents, childAgents) => parentAgents.find((agent) => !childAgents.has(agent.origin));
 // Generates the properties for an edge in the graph.
 // Common for both radial and linear layouts.
 const getEdgeProperties = (sourceId, targetId, sourceHandle, targetHandle, isAnimated) => {
@@ -109,8 +82,7 @@ export const layoutRadial = ({ agentCounts, agentIconSuggestions = null, agentsI
     const nodeDepths = new Map();
     const queue = [];
     const parentAgents = getParentAgents(agentsInNetwork);
-    const childAgents = getChildAgents(parentAgents);
-    const frontman = getFrontman(parentAgents, childAgents);
+    const frontman = getFrontman(agentsInNetwork);
     if (frontman) {
         // Add the frontman node to the network
         queue.push({ id: frontman.origin, depth: 0 });
@@ -220,8 +192,7 @@ export const layoutLinear = ({ agentCounts, agentIconSuggestions = null, agentsI
     const edgesInNetwork = [];
     // Do these calculations outside the loop for efficiency
     const parentAgents = getParentAgents(agentsInNetwork);
-    const childAgents = getChildAgents(parentAgents);
-    const frontman = getFrontman(parentAgents, childAgents);
+    const frontman = getFrontman(agentsInNetwork);
     agentsInNetwork.forEach(({ origin: nodeId }) => {
         const parentIds = getParents(nodeId, parentAgents);
         const isFrontman = frontman?.origin === nodeId;

package/dist/components/MultiAgentAccelerator/AgentFlow/GraphStructure.d.ts

@@ -0,0 +1,21 @@
+import { ConnectivityInfo } from "../../../generated/neuro-san/NeuroSanClient.js";
+export declare const getParentAgents: <T extends ConnectivityInfo>(agents: readonly T[]) => readonly T[];
+/**
+ * Determines the frontman of an agent network — the single source of truth for "who is the frontman".
+ *
+ * The frontman is the agent with no parent: a "parent" agent (one that has tools) that is not itself
+ * listed as a tool by any other agent. A lone single-agent network is its own frontman. Returns
+ * undefined when no agent qualifies (e.g. a fully cyclic network); callers decide how to fall back.
+ *
+ * Consumed by the graph layouts (to seed the depth-0 node) and by the network import flow.
+ */
+export declare const getFrontman: <T extends ConnectivityInfo>(agents: readonly T[]) => T | undefined;
+/**
+ * Returns the "origins" (node names) of the _immediate_ parents of a node in the agent network. Grandparents and
+ * higher are not included.
+ *
+ * @param node Node ID for which to find parents
+ * @param parentAgents Full list of parent agents in the network
+ * @returns The IDs of the immediate parent nodes for the given node or empty array if no parents are found (frontman)
+ */
+export declare const getParents: (node: string, parentAgents: readonly ConnectivityInfo[]) => string[];

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

@@ -0,0 +1,27 @@
+// "Parent agents" are those that have tools, aka agents with "child agents". A lone single-agent
+// network is treated as its own parent.
+export const getParentAgents = (agents) => agents.length === 1 ? agents : agents.filter((agent) => (agent.tools?.length ?? 0) > 0);
+/**
+ * Determines the frontman of an agent network — the single source of truth for "who is the frontman".
+ *
+ * The frontman is the agent with no parent: a "parent" agent (one that has tools) that is not itself
+ * listed as a tool by any other agent. A lone single-agent network is its own frontman. Returns
+ * undefined when no agent qualifies (e.g. a fully cyclic network); callers decide how to fall back.
+ *
+ * Consumed by the graph layouts (to seed the depth-0 node) and by the network import flow.
+ */
+export const getFrontman = (agents) => {
+    const parentAgents = getParentAgents(agents);
+    // Child agents are everything referenced as a tool by a parent.
+    const childAgents = new Set(parentAgents.flatMap((agent) => agent.tools ?? []));
+    return parentAgents.find((agent) => agent.origin !== undefined && !childAgents.has(agent.origin));
+};
+/**
+ * Returns the "origins" (node names) of the _immediate_ parents of a node in the agent network. Grandparents and
+ * higher are not included.
+ *
+ * @param node Node ID for which to find parents
+ * @param parentAgents Full list of parent agents in the network
+ * @returns The IDs of the immediate parent nodes for the given node or empty array if no parents are found (frontman)
+ */
+export const getParents = (node, parentAgents) => parentAgents.filter((agent) => agent.tools.includes(node)).map((parentNode) => parentNode.origin);

package/dist/components/MultiAgentAccelerator/AgentFlow/PlasmaEdge.d.ts

@@ -0,0 +1,7 @@
+import { EdgeProps } from "@xyflow/react";
+import { FC } from "react";
+export type PlasmaEdgeProps = {
+    readonly maxParticles?: number;
+    readonly particlesPerFrame?: number;
+};
+export declare const PlasmaEdge: FC<EdgeProps & PlasmaEdgeProps>;

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

@@ -15,8 +15,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import StopCircle from "@mui/icons-material/StopCircle";
+import Backdrop from "@mui/material/Backdrop";
 import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
 import Grid from "@mui/material/Grid";
+import Paper from "@mui/material/Paper";
 import Slide from "@mui/material/Slide";
 import { useTheme } from "@mui/material/styles";
 import Tooltip from "@mui/material/Tooltip";
@@ -26,15 +29,16 @@ 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 { ImportNetworkModal } from "./Sidebar/ImportNetworkModal.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, IMPORT_FAILURE_DETAIL, importNetworkFromJson, 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 { getZIndex } from "../../utils/zIndexLayers.js";
@@ -43,47 +47,15 @@ import { LlmChatButton } from "../AgentChat/Common/LlmChatButton.js";
 import { isLegacyAgentType } from "../AgentChat/Common/Types.js";
 import { chatMessageFromChunk, cleanUpAgentName, removeTrailingUuid } 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.
@@ -107,6 +79,8 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
     const temporaryNetworks = useTempNetworksStore((state) => state.tempNetworks);
     // Track newly added temp networks so we can highlight them
     const [newlyAddedTemporaryNetworks, setNewlyAddedTemporaryNetworks] = useState(new Set());
+    // True while a file import is in-flight (after modal confirm, before the new network appears)
+    const [isImporting, setIsImporting] = useState(false);
     const [networkIconSuggestions, setNetworkIconSuggestions] = useState({});
     const [agentsInNetwork, setAgentsInNetwork] = useState([]);
     const [sampleQueries, setSampleQueries] = useState([]);
@@ -117,7 +91,8 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
     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());
+    // 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());
@@ -132,6 +107,7 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
     // State to hold thought bubble edges - avoids duplicates across layout recalculations
     const [thoughtBubbleEdges, setThoughtBubbleEdges] = useState(new Map());
     const [confirmationModalOpen, setConfirmationModalOpen] = useState(false);
+    const [importModalOpen, setImportModalOpen] = useState(false);
     const [tourModalOpen, setTourModalOpen] = useState(false);
     const [haveShownTourModal, setHaveShownTourModal] = useState(false);
     // Memoized key for agent names to trigger icon suggestion updates when the set of agents changes, not just
@@ -201,16 +177,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 +211,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 +226,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 +273,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 +291,7 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
         if (selectedNetwork && !isLegacyAgentType(selectedNetwork)) {
             void fetchAgentDetails();
         }
-    }, [neuroSanURL, selectedNetwork, username]);
+    }, [getSupportedLlmProviders, neuroSanURL, selectedNetwork, username]);
     useEffect(() => {
         ;
         (async () => {
@@ -466,10 +457,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;
@@ -492,6 +480,35 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
             notifySaveError(agentName, e);
         }
     }, [neuroSanURL, username, selectedNetwork]);
+    /**
+     * Handles an import from the ImportNetworkModal: converts the JSON content to a
+     * network definition, streams it through the network designer to obtain a reservation,
+     * then upserts the result into the temporary-networks store and navigates to the new network.
+     */
+    const handleImportNetwork = useCallback(async (agentNetworkName, content) => {
+        setIsImporting(true);
+        try {
+            const result = await importNetworkFromJson(content, agentNetworkName, neuroSanURL, username);
+            if ("failure" in result) {
+                sendNotification(NotificationType.error, `Failed to import "${agentNetworkName}".`, IMPORT_FAILURE_DETAIL[result.failure]);
+                return;
+            }
+            useTempNetworksStore.getState().upsertTempNetworks(result.networks);
+            // An import defines a single network, so the designer returns one reservation. Highlight and
+            // navigate to it; any further entries (none expected) are still upserted above.
+            const newNetworkName = result.networks[0]?.agentInfo.agent_name;
+            if (newNetworkName) {
+                setNewlyAddedTemporaryNetworks(new Set([newNetworkName]));
+                changeSelectedNetwork(newNetworkName);
+            }
+        }
+        catch (e) {
+            notifySaveError(agentNetworkName, e);
+        }
+        finally {
+            setIsImporting(false);
+        }
+    }, [changeSelectedNetwork, neuroSanURL, username]);
     const onStreamingStarted = useCallback(() => {
         // Reset agent counts
         setAgentCounts(new Map());
@@ -511,7 +528,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,14 +572,17 @@ 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);
             }, children: _jsx(Grid, { id: "multi-agent-accelerator-grid-sidebar", size: enableZenMode && isStreaming ? 0 : 3.25, sx: {
                     height: "100%",
-                }, children: _jsx(Sidebar, { id: "multi-agent-accelerator-sidebar", isAwaitingLlm: isAwaitingLlm, networkIconSuggestions: networkIconSuggestions, networks: networks, neuroSanServerURL: neuroSanURL, newlyAddedTemporaryNetworks: newlyAddedTemporaryNetworks, onDeleteNetwork: handleDeleteNetwork, onEditNetwork: handleEditNetwork, setSelectedNetwork: (newNetwork) => changeSelectedNetwork(newNetwork), temporaryNetworks: temporaryNetworks }) }) }));
+                }, children: _jsx(Sidebar, { id: "multi-agent-accelerator-sidebar", isAwaitingLlm: isAwaitingLlm, isImporting: isImporting, networkIconSuggestions: networkIconSuggestions, networks: networks, neuroSanServerURL: neuroSanURL, newlyAddedTemporaryNetworks: newlyAddedTemporaryNetworks, onDeleteNetwork: handleDeleteNetwork, onEditNetwork: handleEditNetwork, onImportClick: () => setImportModalOpen(true), setSelectedNetwork: (newNetwork) => changeSelectedNetwork(newNetwork), temporaryNetworks: temporaryNetworks }) }) }));
     };
     const getCenterPanel = () => {
         return (_jsx(Grid, { id: "multi-agent-accelerator-grid-agent-flow", size: enableZenMode && isStreaming ? 18 : 8.25, sx: {
@@ -586,7 +606,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: {
@@ -615,6 +635,17 @@ export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
             setNetworkToBeDeleted(null);
             setConfirmationModalOpen(false);
         }, title: "Delete Network" })) : null;
+    const getImportNetworkModal = () => (_jsx(ImportNetworkModal, { existingNetworkNames: temporaryNetworks.map((n) => n.agentNetworkName), isOpen: importModalOpen, onClose: () => setImportModalOpen(false), onImport: handleImportNetwork }));
+    // Blocking overlay shown while an imported network is being created on the backend.
+    const getImportBackdrop = () => (_jsx(Backdrop, { id: "multi-agent-accelerator-import-backdrop", "data-testid": "multi-agent-accelerator-import-backdrop", open: isImporting, sx: { zIndex: getZIndex(3, theme) }, children: _jsxs(Paper, { elevation: 6, role: "status", "aria-live": "polite", sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 2,
+                px: 4,
+                py: 2.5,
+                borderRadius: 2,
+                maxWidth: 480,
+            }, children: [_jsx(CircularProgress, { id: "multi-agent-accelerator-import-spinner", size: 24 }), _jsx(Typography, { id: "multi-agent-accelerator-import-title", variant: "body1", sx: { fontWeight: "bold" }, children: "Importing network..." })] }) }));
     const getTourModal = () => tourModalOpen && (_jsx(MUIDialog, { contentSx: { fontSize: "0.8rem", minWidth: "550px", paddingTop: "0" }, footer: _jsxs(_Fragment, { children: [_jsx(StyledButton, { id: "tour-dont-show-again", onClick: () => {
                         setTourStatus(TourPromptState.DontShowAgain);
                         dismissTourModal();
@@ -656,7 +687,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(), getImportNetworkModal(), getImportBackdrop(), _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.js

@@ -16,6 +16,7 @@ import { TreeItemProvider } from "@mui/x-tree-view/TreeItemProvider";
 import { useTreeItem } from "@mui/x-tree-view/useTreeItem";
 import { useRef } from "react";
 import { downloadFile, toSafeFilename } from "../../../utils/File.js";
+import { removeTrailingUuid } from "../../AgentChat/Common/Utils.js";
 // Palette of colors we can use for tags
 const TAG_COLORS = [
     "--bs-accent2-light",
@@ -63,7 +64,7 @@ export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, onDele
     const expirationTime = item?.temporaryNetworkExpirationTime;
     const isTemporaryNetwork = Boolean(expirationTime);
     const isExpired = isChild && isTemporaryNetwork && isTemporaryNetworkExpired(expirationTime);
-    const networkHocon = item?.temporaryNetworkHocon ?? null;
+    const networkDefinition = item?.temporaryNetworkDefinition ?? 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.
@@ -105,10 +106,14 @@ 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: [networkDefinition && (_jsx(Tooltip, { title: isExpired ? "Expired" : "Download network definition", children: _jsx("span", { children: _jsx(IconButton, { onClick: (e) => {
                                                     e.stopPropagation();
-                                                    const fileName = `${toSafeFilename(labelString)}.hocon`;
-                                                    downloadFile(networkHocon, fileName);
+                                                    // 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)",