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

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.d.ts

@@ -1,17 +1,11 @@
 import { FC } from "react";
 export interface MultiAgentAcceleratorProps {
-    readonly userInfo: {
-        userName: string;
-        userImage: string;
-    };
-    readonly backendNeuroSanApiUrl: string;
+    readonly username: string;
+    readonly defaultNeuroSanUrl: string;
 }
-export declare const GRACE_PERIOD_MS: number;
-export declare const SHOW_TOUR_DELAY_MS = 5000;
 /**
  * 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.
- * @param darkMode Whether dark mode is enabled.
- * @param userInfo Information about the current user, including userName and userImage.
+ * @param username Identifier to use for interactions with the backend (for personalization and tracking).
  */
 export declare const MultiAgentAccelerator: FC<MultiAgentAcceleratorProps>;

package/dist/components/MultiAgentAccelerator/MultiAgentAccelerator.js

@@ -15,89 +15,59 @@ 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";
 import Typography from "@mui/material/Typography";
 import { ReactFlowProvider } from "@xyflow/react";
 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, 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, getAgentIconSuggestions, getAgentNetworks, getConnectivity, getNetworkIconSuggestions, 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 { useLocalStorage } from "../../utils/useLocalStorage.js";
 import { getZIndex } from "../../utils/zIndexLayers.js";
 import { ChatCommon } from "../AgentChat/ChatCommon/ChatCommon.js";
-import { SmallLlmChatButton } from "../AgentChat/Common/LlmChatButton.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 { 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;
-// 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
+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();
-// 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;
-// #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-cancelled). */
-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.
- * @param darkMode Whether dark mode is enabled.
- * @param userInfo Information about the current user, including userName and userImage.
+ * @param username Identifier to use for interactions with the backend (for personalization and tracking).
  */
-export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
+export const MultiAgentAccelerator = ({ defaultNeuroSanUrl, username, }) => {
     // MUI theme
     const theme = useTheme();
     const enableZenMode = useSettingsStore((state) => state.settings.behavior.enableZenMode);
     const apiKeys = useSettingsStore((state) => state.settings.apiKeys);
+    // Display option for agent/network names
+    const useNativeNames = useSettingsStore((state) => state.settings.appearance.useNativeNames);
     // Stores whether are currently awaiting LLM response (for knowing when to show spinners)
     const [isAwaitingLlm, setIsAwaitingLlm] = useState(false);
     const [isEditingNetwork, setIsEditingNetwork] = useState(false);
@@ -109,6 +79,8 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
     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([]);
@@ -118,11 +90,10 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
     const [agentIconSuggestions, setAgentIconSuggestions] = useState(null);
     const [selectedNetwork, setSelectedNetwork] = useState(null);
     const [networkDescription, setNetworkDescription] = useState("");
-    const networkDisplayName = useMemo(() => cleanUpAgentName(removeTrailingUuid(selectedNetwork)), [selectedNetwork]);
-    const [providerKeysRequired, setProviderKeysRequired] = useState(new Set());
-    const [customURLLocalStorage, setCustomURLLocalStorage] = useLocalStorage("customAgentNetworkURL", null);
-    // An extra set of quotes is making it in the string in local storage.
-    const [neuroSanURL, setNeuroSanURL] = useState(customURLLocalStorage?.replaceAll('"', "") || backendNeuroSanApiUrl);
+    const networkDisplayName = useMemo(() => (useNativeNames ? selectedNetwork : cleanUpAgentName(removeTrailingUuid(selectedNetwork))), [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());
     // Common function to change the selected network and reset related state
@@ -136,12 +107,9 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
     // 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);
-    const customURLCallback = useCallback((url) => {
-        setNeuroSanURL(url || backendNeuroSanApiUrl);
-        setCustomURLLocalStorage(url === "" ? null : url);
-    }, [backendNeuroSanApiUrl, setCustomURLLocalStorage]);
     // Memoized key for agent names to trigger icon suggestion updates when the set of agents changes, not just
     // when sorting/other operations on the agents list
     const agentNamesKey = useMemo(() => agentsInNetwork
@@ -209,16 +177,14 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
      * 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.
@@ -245,7 +211,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         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
@@ -260,7 +226,33 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         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 () => {
@@ -281,23 +273,14 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         const fetchAgentDetails = async () => {
             // It is a Neuro-san agent, so get the function and connectivity info
             try {
-                const agentFunction = await getAgentFunction(neuroSanURL, selectedNetwork, userInfo.userName);
+                // 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);
@@ -308,7 +291,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         if (selectedNetwork && !isLegacyAgentType(selectedNetwork)) {
             void fetchAgentDetails();
         }
-    }, [neuroSanURL, selectedNetwork, userInfo.userName]);
+    }, [getSupportedLlmProviders, neuroSanURL, selectedNetwork, username]);
     useEffect(() => {
         ;
         (async () => {
@@ -329,7 +312,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         (async () => {
             if (selectedNetwork) {
                 try {
-                    const connectivity = await getConnectivity(neuroSanURL, selectedNetwork, userInfo.userName);
+                    const connectivity = await getConnectivity(neuroSanURL, selectedNetwork, username);
                     const agentsInNetworkSorted = [...connectivity.connectivity_info].sort((a, b) => a?.origin.localeCompare(b?.origin));
                     setAgentsInNetwork(agentsInNetworkSorted);
                     const sampleQueriesTmp = connectivity?.metadata?.["sample_queries"];
@@ -352,7 +335,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
                 setAgentsInNetwork([]);
             }
         })();
-    }, [networkDisplayName, neuroSanURL, selectedNetwork, userInfo.userName]);
+    }, [networkDisplayName, neuroSanURL, selectedNetwork, username]);
     useEffect(() => {
         ;
         (async () => {
@@ -474,10 +457,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
      */
     const onSaveAgent = useCallback(async (agentName, updated, agentNetworkName, signal) => {
         try {
-            let newNetworks = [];
-            await sendNetworkDesignerUpdate(neuroSanURL, signal, agentName, updated, agentNetworkName, userInfo.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;
@@ -499,7 +479,36 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         catch (e) {
             notifySaveError(agentName, e);
         }
-    }, [neuroSanURL, userInfo.userName, selectedNetwork]);
+    }, [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());
@@ -519,7 +528,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
     }, [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);
@@ -563,14 +572,17 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         }
     }, [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, { customURLLocalStorage: customURLLocalStorage, customURLCallback: customURLCallback, id: "multi-agent-accelerator-sidebar", isAwaitingLlm: isAwaitingLlm, networks: networks, networkIconSuggestions: networkIconSuggestions, newlyAddedTemporaryNetworks: newlyAddedTemporaryNetworks, onEditNetwork: handleEditNetwork, onDeleteNetwork: handleDeleteNetwork, 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: {
@@ -583,7 +595,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
                         height: "100%",
                         maxWidth: 1000,
                         margin: "0 auto",
-                    }, children: _jsx(AgentFlow, { agentCounts: agentCounts, agentsInNetwork: agentsInNetwork, agentIconSuggestions: agentIconSuggestions, id: "multi-agent-accelerator-agent-flow", currentConversations: currentConversations, currentUser: userInfo.userName, isAwaitingLlm: isAwaitingLlm, isEditMode: isEditingNetwork, isStreaming: isStreaming, isSelectedNetworkTemporary: isSelectedNetworkTemporary, networkDisplayName: selectedNetwork || undefined, networkId: isSelectedNetworkTemporary ? selectedNetwork : undefined, neuroSanURL: neuroSanURL, onEnterEditMode: () => setIsEditingNetwork(true), onExitEditMode: () => setIsEditingNetwork(false), onNetworkReplaced: (_old, newId) => changeSelectedNetwork(newId), onSaveAgent: onSaveAgent, thoughtBubbleEdges: thoughtBubbleEdges, setThoughtBubbleEdges: setThoughtBubbleEdges }, "multi-agent-accelerator-agent-flow") }) }) }));
+                    }, children: _jsx(AgentFlow, { agentCounts: agentCounts, agentsInNetwork: agentsInNetwork, agentIconSuggestions: agentIconSuggestions, id: "multi-agent-accelerator-agent-flow", currentConversations: currentConversations, currentUser: username, isAwaitingLlm: isAwaitingLlm, isEditMode: isEditingNetwork, isStreaming: isStreaming, isSelectedNetworkTemporary: isSelectedNetworkTemporary, networkDisplayName: networkDisplayName || "", networkId: isSelectedNetworkTemporary ? selectedNetwork : "", neuroSanURL: neuroSanURL, onEnterEditMode: () => setIsEditingNetwork(true), onExitEditMode: () => setIsEditingNetwork(false), onNetworkReplaced: (_old, newId) => changeSelectedNetwork(newId), onSaveAgent: onSaveAgent, thoughtBubbleEdges: thoughtBubbleEdges, setThoughtBubbleEdges: setThoughtBubbleEdges }, "multi-agent-accelerator-agent-flow") }) }) }));
     };
     const getRightPanel = () => {
         return (_jsx(Slide, { id: "multi-agent-accelerator-grid-agent-chat-common-slide", in: !enableZenMode || !isAwaitingLlm, direction: "left", timeout: GROW_ANIMATION_TIME_MS, onExited: () => {
@@ -592,17 +604,21 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
                     height: "100%",
                 }, children: _jsx(ChatCommon, { agentPlaceholders: {
                         [AGENT_NETWORK_DESIGNER_ID]: "Describe in plain language the network you would like to build.",
-                    }, currentUser: userInfo.userName, customAgentGreetings: {
+                    }, 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 }, 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: {
                     position: "absolute",
                     bottom: "1rem",
                     right: "1rem",
-                    zIndex: 10,
-                }, children: _jsx(SmallLlmChatButton, { "aria-label": "Stop", disabled: !isAwaitingLlm, id: "stop-output-button", onClick: handleExternalStop, posBottom: 8, posRight: 23, children: _jsx(StopCircle, { fontSize: "small", id: "stop-button-icon", sx: { color: "var(--bs-white)" } }) }) })) }));
+                    zIndex: getZIndex(2, theme),
+                }, children: _jsx(Tooltip, { title: "Stop response (Esc)", children: _jsx(LlmChatButton, { "aria-label": "Stop", id: "stop-output-button", onClick: handleExternalStop, sx: {
+                            "&:hover": {
+                                backgroundColor: "error.main",
+                            },
+                        }, 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. ` +
             "This action cannot be undone. Are you sure you want to proceed?", handleCancel: () => {
@@ -619,6 +635,17 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
             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();
@@ -660,7 +687,14 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
                     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.d.ts

@@ -1,13 +1,8 @@
 import { TreeItemProps } from "@mui/x-tree-view/TreeItem";
 import { FC } from "react";
-import { NodeIndex } from "./TreeBuilder.js";
 export interface AgentNetworkNodeProps extends TreeItemProps {
-    readonly nodeIndex: NodeIndex;
     readonly onDeleteNetwork?: (network: string, isExpired: boolean) => void;
     readonly onEditNetwork?: (network: string) => void;
-    readonly networkIconSuggestions: Record<string, string>;
-    readonly temporaryNetworkExpirationTimes?: Record<string, Date>;
-    readonly temporaryNetworkHoconStrings?: Record<string, string | null>;
 }
 /**
  * Custom Tree Item for MUI RichTreeView to display agent networks with tags