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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { cleanUpAgentName, removeTrailingUuid } from "../../AgentChat/Common/Utils.js";
-//#endregion
+//#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
@@ -28,6 +28,23 @@ export const findTreeItemById = (items, itemId) => {
  * @returns The display name to show in the tree view
  */
 const toDisplayName = (itemName, useNativeNames) => useNativeNames ? itemName : cleanUpAgentName(removeTrailingUuid(itemName));
+/**
+ * Computes the display name for a network (leaf) node.
+ * @param label - The label to use for the tree item (usually derived from the agent name)
+ * @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 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;
+};
 /**
  * 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,12 +56,12 @@ 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),
     iconSuggestion: metadata.iconSuggestion,
     isNetwork: true,
     tags: network.tags,
     temporaryNetworkExpirationTime: metadata.temporaryNetworkExpirationTime,
-    temporaryNetworkHocon: metadata.temporaryNetworkHocon,
+    temporaryNetworkDefinition: metadata.temporaryNetworkDefinition,
 });
 /**
  * Recursively sort tree nodes and their children by display name
@@ -157,7 +174,10 @@ export const buildTreeViewItems = (useNativeNames, regularNetworks = [], tempora
         tree = withNetworkAdded(tree, temporaryNetwork.agentInfo, useNativeNames, {
             iconSuggestion: "HourglassTop",
             temporaryNetworkExpirationTime: new Date(temporaryNetwork.reservation.expiration_time_in_seconds * 1000),
-            temporaryNetworkHocon: temporaryNetwork.networkHocon,
+            // The structured definition is carried through and serialized at download time (it's the same shape
+            // the import modal reads back in).
+            temporaryNetworkDefinition: temporaryNetwork.agentNetworkDefinition,
+            displayNameOverride: temporaryNetwork.agentNetworkName,
         });
     }
     const treeViewItems = tree.uncategorizedItems.length > 0

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

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

package/dist/components/MultiAgentAccelerator/TemporaryNetworks.js

@@ -1,6 +1,10 @@
+import { getFrontman } from "./AgentFlow/GraphStructure.js";
 import { AGENT_NETWORK_DEFINITION_KEY, AGENT_NETWORK_HOCON, AGENT_RESERVATIONS_KEY, DisplayAs, TEMPORARY_NETWORK_FOLDER, } from "./const.js";
+import { jsonToNetworkDefinition } from "./Sidebar/ImportNetworkModal.js";
+import { sendNetworkDesignerRequest } from "../../controller/agent/Agent.js";
 import { ChatMessageType } from "../../generated/neuro-san/NeuroSanClient.js";
-import { removeTrailingUuid } from "../AgentChat/Common/Utils.js";
+import { chatMessageFromChunk, removeTrailingUuid } from "../AgentChat/Common/Utils.js";
+import { NotificationType, sendNotification } from "../Common/notification.js";
 /**
  * Extracts agent reservations from a chat message, if they exist.
  * @param message The chat message to extract reservations from. We expect reservations to be present in messages of
@@ -44,7 +48,11 @@ export const extractNetworkHocon = (message) => {
  * @returns List of TemporaryNetwork objects ready for the store.
  */
 export const convertReservationsToNetworks = (agentReservations, networkHocon, agentNetworkDefinition, agentNetworkName) => {
-    return agentReservations.map((reservation) => ({
+    return (agentReservations
+        // reservation_id is typed as required but is echoed from un-vetted backend data; skip entries
+        // missing it rather than build a "temporary/undefined" network.
+        .filter((reservation) => Boolean(reservation?.reservation_id))
+        .map((reservation) => ({
         reservation,
         agentInfo: {
             agent_name: `${TEMPORARY_NETWORK_FOLDER}/${reservation.reservation_id}`,
@@ -54,7 +62,7 @@ export const convertReservationsToNetworks = (agentReservations, networkHocon, a
         agentNetworkName: agentNetworkName ?? removeTrailingUuid(reservation.reservation_id),
         networkHocon,
         agentNetworkDefinition,
-    }));
+    })));
 };
 export const isEditableAgent = (displayAs) => displayAs === DisplayAs.LLM_AGENT;
 /**
@@ -93,3 +101,66 @@ export const mergeNetworks = (target, incoming) => incoming.reduce((result, n) =
     }
     return result;
 }, [...target]);
+/**
+ * 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). */
+export 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);
+};
+/**
+ * Streams a network definition through the network designer, collecting the
+ * reservations returned across every chunk. Returns the accumulated networks
+ * (empty if the designer returned no reservation).
+ */
+export const streamNetworkDesignerUpsert = async (neuroSanURL, signal, frontman, networkDef, agentNetworkName, username) => {
+    let newNetworks = [];
+    await sendNetworkDesignerRequest(neuroSanURL, signal, frontman, networkDef, agentNetworkName, username, (chunk) => {
+        newNetworks = collectNetworksFromChunk(chunk, networkDef, newNetworks);
+    });
+    return newNetworks;
+};
+export const IMPORT_FAILURE_DETAIL = {
+    "invalid-definition": "The file does not contain a valid network definition.",
+    "no-reservation": "The network designer did not return a reservation. Please try again.",
+};
+/**
+ * Converts imported JSON into a network definition and streams it through the
+ * network designer to obtain reservations. Returns the resulting networks, or a
+ * failure reason if the content is not a valid definition or no reservation is returned.
+ */
+export const importNetworkFromJson = async (content, agentNetworkName, neuroSanURL, username) => {
+    const networkDef = jsonToNetworkDefinition(JSON.parse(content));
+    if (networkDef.length === 0) {
+        return { failure: "invalid-definition" };
+    }
+    const frontman = getFrontman(networkDef)?.origin ?? networkDef[0]?.origin ?? "agent";
+    const networks = await streamNetworkDesignerUpsert(neuroSanURL, new AbortController().signal, frontman, networkDef, agentNetworkName, username);
+    if (networks.length === 0) {
+        return { failure: "no-reservation" };
+    }
+    return { networks };
+};

package/dist/components/MultiAgentAccelerator/{ThoughtBubbleEdge.d.ts → ThoughtBubbles/ThoughtBubbleEdge.d.ts}

@@ -1,6 +1,6 @@
 import { Edge, EdgeProps } from "@xyflow/react";
 import { FC } from "react";
-import { ChatMessageType } from "../../generated/neuro-san/NeuroSanClient.js";
+import { ChatMessageType } from "../../../generated/neuro-san/NeuroSanClient.js";
 interface ThoughtBubbleEdgeData extends Record<string, unknown> {
     text?: string;
     showAlways?: boolean;

package/dist/components/MultiAgentAccelerator/{ThoughtBubbleOverlay.js → ThoughtBubbles/ThoughtBubbleOverlay.js}

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from "@mui/material/styles";
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ChatMessageType } from "../../generated/neuro-san/NeuroSanClient.js";
+import { ChatMessageType } from "../../../generated/neuro-san/NeuroSanClient.js";
 // #endregion: Types
 // #region: Constants
 const BUBBLE_DISTANCE_FROM_RIGHT_EDGE = 20; // Fixed distance from right edge

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

@@ -67,6 +67,11 @@ export const MAIN_TOUR_STEPS = [
         target: () => document.querySelector("#agent-network-ui-options-menu-button-container"),
         placement: "bottom",
     },
+    {
+        content: "This button allows you to download the chat with this agent, including history, as a plain text file.",
+        target: () => document.querySelector("#save-chat-button"),
+        placement: "bottom",
+    },
     {
         content: "Access Settings from this icon. Here you can change the look and feel of the application, including " +
             "auto branding for a particular customer, enter API keys for providers like OpenAI and Anthropic, and " +

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

@@ -28,3 +28,4 @@ export declare enum DisplayAs {
 }
 export declare const GRACE_PERIOD_MS: number;
 export declare const SHOW_TOUR_DELAY_MS = 5000;
+export declare const EXPIRED_NETWORKS_CHECK_INTERVAL_MS: number;

package/dist/components/MultiAgentAccelerator/const.js

@@ -49,3 +49,5 @@ export var DisplayAs;
 export const GRACE_PERIOD_MS = 5 * 60 * 1000; // 5 minutes
 // We show the tour modal after this amount of time so as not to "pounce" on the user when they first open the app
 export const SHOW_TOUR_DELAY_MS = 5000;
+// Check for expired networks every this many milliseconds
+export const EXPIRED_NETWORKS_CHECK_INTERVAL_MS = 10 * 1000;

package/dist/components/Settings/SettingsDialog.js

@@ -19,12 +19,11 @@ import Typography from "@mui/material/Typography";
 import { useEffect, useMemo, useState, } from "react";
 import { ApiKeyInput } from "./ApiKeyInput.js";
 import { useCheckmarkFade } from "./FadingCheckmark.js";
-import InfoTip from "./InfoTip.js";
 import { SettingsRow } from "./SettingsRow.js";
 import { getBrandingSuggestions, testConnection } from "../../controller/agent/Agent.js";
 import { isAnthropicKeyValid, isOpenAIKeyValid } from "../../controller/llm/Providers.js";
 import { useEnvironmentStore } from "../../state/Environment.js";
-import { DEFAULT_SETTINGS, useSettingsStore } from "../../state/Settings.js";
+import { API_KEYS_TTL_MS, DEFAULT_SETTINGS, getApiKey, useSettingsStore, } from "../../state/Settings.js";
 import { PALETTES } from "../../Theme/Palettes.js";
 import { ConfirmationModal } from "../Common/ConfirmationModal.js";
 import { MUIDialog } from "../Common/MUIDialog.js";
@@ -40,7 +39,7 @@ const Section = styled(Box)(({ theme }) => ({
     display: "flex",
     flexDirection: "column",
     gap: theme.spacing(2),
-    marginBottom: theme.spacing(4),
+    marginBottom: theme.spacing(2),
 }));
 const SubsectionTitle = styled(Typography)(({ theme }) => ({
     borderBottom: `1px solid ${theme.palette.divider}`,
@@ -235,10 +234,20 @@ export const SettingsDialog = ({ id, isOpen, logoServiceToken, onClose }) => {
         brandingCheckmark.trigger();
         logoCheckmark.trigger();
     };
-    const persistKey = (vendor, key, checkmark) => {
+    /**
+     * Used for both saving and removing keys.
+     * @param vendor Vendor for this key: see the list in LLMProvider type
+     * @param key Value of the key
+     * @param checkmark Checkmark to trigger on save
+     * @param now Timestamp for "now"
+     */
+    const persistKey = (vendor, key, checkmark, now) => {
         updateSettings({
             apiKeys: {
-                [vendor]: key,
+                [vendor]: {
+                    value: key,
+                    expiresAt: key ? now + API_KEYS_TTL_MS : 0,
+                },
             },
         });
         checkmark.trigger();
@@ -324,9 +333,17 @@ export const SettingsDialog = ({ id, isOpen, logoServiceToken, onClose }) => {
                         }, sx: { flex: 1 }, value: neuroSanUrlInput }), _jsx(StatusLight, { id: `${id}-status-light`, statusValue: statusLightValue }), _jsx(Button, { disabled: neuroSanUrlInput.trim().length === 0, onClick: handleTestConnection, size: "small", variant: "contained", children: "Test" }), _jsx(Button, { disabled: neuroSanUrlSaveDisabled, onClick: handleSaveNeuroSanUrl, size: "small", variant: "contained", children: "Save" }), _jsx(Button, { disabled: neuroSanUrlResetDisabled, onClick: handleResetNeuroSanUrl, size: "small", variant: "contained", children: "Default" })] }, `${id}-neuro-san-server-url`) }));
     };
     const getServicesSection = () => (_jsxs(Section, { children: [_jsx(SettingsSectionTitle, { children: "External Services" }), getNeuroSanSubsection()] }));
-    const getApiKeysSection = () => (_jsxs(Section, { children: [_jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: theme.spacing(2) }, children: [_jsx(SettingsSectionTitle, { children: "API Keys" }), _jsx(InfoTip, { title: "API keys are used to access external services. Some networks may require an API key for " +
-                            "you to use them. Your keys will be saved in your browser local storage and sent to " +
-                            "services that require them. Do not use this option if you are on a shared or public computer." })] }), _jsx(SubsectionTitle, { variant: "subtitle1", children: "Providers" }), _jsx(SubSectionBody, { children: _jsx(Box, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 1.5 }, children: apiKeyConfigs.map(({ checkmark, vendor, idSuffix, logo, onTest, placeholder }) => (_jsx(SettingsRow, { checkmark: checkmark, label: "", tooltip: `API key for ${vendor}.`, children: _jsx(ApiKeyInput, { forgetKey: () => persistKey(vendor, "", checkmark), id: `${id}-${idSuffix}`, logo: logo, onSave: (key) => persistKey(vendor, key, checkmark), onTest: onTest, persistedValue: apiKeys[vendor], placeholder: placeholder, vendor: vendor }) }, `${id}-${idSuffix}`))) }) })] }));
+    const getApiKeysSection = () => (_jsxs(Section, { children: [_jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: theme.spacing(1) }, children: [_jsx(SettingsSectionTitle, { children: "API Keys" }), _jsx(Tooltip, { title: "API keys are stored locally in your browser's memory for the duration of your session only\n                    and are only sent to the Neuro SAN service for use with the associated LLM provider when you use\n                    this application to interact with networks.\n                    Your keys are never sent to any other servers or services and are not stored on our servers.\n                    When you close this tab or your browser, your keys will be permanently cleared from memory and\n                    you will need to enter them again to use services that require them.", children: _jsxs(Typography, { sx: {
+                                alignSelf: "flex-start",
+                                color: "var(--bs-secondary)",
+                                cursor: "help",
+                                fontSize: "0.7rem",
+                                lineHeight: 1,
+                                mt: 0.5,
+                            }, variant: "caption", children: [_jsx(Box, { component: "span", sx: { mr: 0.5 }, children: "\u24D8" }), _jsx(Box, { component: "span", sx: {
+                                        borderBottom: "1px dashed",
+                                        pb: 0.25,
+                                    }, children: "How are my keys stored and used?" })] }) })] }), _jsx(SettingsSubsection, { title: "LLM Providers", children: _jsx(Box, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 1.5 }, children: apiKeyConfigs.map(({ checkmark, vendor, idSuffix, logo, onTest, placeholder }) => (_jsx(SettingsRow, { checkmark: checkmark, label: "", tooltip: `API key for ${vendor}.`, children: _jsx(ApiKeyInput, { forgetKey: () => persistKey(vendor, "", checkmark, 0), id: `${id}-${idSuffix}`, logo: logo, onSave: (key) => persistKey(vendor, key, checkmark, Date.now()), onTest: onTest, persistedValue: getApiKey(apiKeys, vendor), placeholder: placeholder, vendor: vendor }) }, `${id}-${idSuffix}`))) }) })] }));
     const getBehaviorSection = () => (_jsxs(Section, { children: [_jsx(SettingsSectionTitle, { children: "Behavior" }), _jsx(SettingsSubsection, { title: "Zen mode", children: _jsx(SettingsRow, { label: 'Enable "Zen" mode:', checkmark: enableZenModeCheckmark, tooltip: "Hides most of the UI during agent network animations providing a more immersive " +
                         "experience.", children: _jsx(Checkbox, { checked: enableZenMode, "data-testid": "zen-mode-checkbox", onChange: (_, checked) => {
                             updateSettings({ behavior: { enableZenMode: checked } });
@@ -345,7 +362,6 @@ export const SettingsDialog = ({ id, isOpen, logoServiceToken, onClose }) => {
                             nativeNamesCheckmark.trigger();
                         }
                     }, size: "small", value: useNativeNames ? "native" : "beautified", children: [_jsx(ToggleButton, { value: "native", children: "Native" }), _jsx(ToggleButton, { value: "beautified", children: "Beautified" })] }), _jsx(FormLabel, { children: "Preview: " }), _jsx(FormLabel, { sx: {
-                        marginBottom: 0,
                         border: "1px solid",
                         borderRadius: 1,
                         backgroundColor: "background.paper",
@@ -456,7 +472,7 @@ export const SettingsDialog = ({ id, isOpen, logoServiceToken, onClose }) => {
         },
     }), [paletteMode]);
     return (
-    // Always use default theme for settings dialog so user can always see to reset. It's possible that with
+    // Always use the default theme for settings dialog so user can always see to reset. It's possible that with
     // certain custom themes the dialog would be unreadable.
     _jsxs(ThemeProvider, { theme: settingsTheme, children: [resetToDefaultSettingsOpen ? getConfirmationModal() : null, _jsxs(MUIDialog, { id: id, title: _jsx(Box, { sx: { fontSize: "1.5rem" }, children: "Settings" }), isOpen: isOpen, onClose: onClose, paperProps: {
                     minWidth: "50%",

package/dist/controller/agent/Agent.d.ts

@@ -2,11 +2,19 @@ import { AgentNetworkDefinitionEntry } from "../../components/MultiAgentAccelera
 import { AgentInfo, ChatContext, ChatResponse, ConnectivityResponse, FunctionResponse } from "../../generated/neuro-san/NeuroSanClient.js";
 import { StreamingUnit } from "../llm/LlmChat.js";
 import { BrandingSuggestions } from "../Types/Branding.js";
+export interface HealthCheckResponse {
+    readonly service?: string;
+    readonly status?: string;
+    readonly versions?: {
+        readonly "neuro-san-studio"?: string;
+        readonly "neuro-san"?: string;
+    };
+}
 export interface TestConnectionResult {
+    readonly healthCheckResponse?: HealthCheckResponse;
     readonly httpStatus?: number;
-    readonly status?: string;
+    readonly statusText?: string;
     readonly success: boolean;
-    readonly version?: string;
 }
 /**
  * Test connection for a neuro-san server.
@@ -64,8 +72,8 @@ export declare const getConnectivity: (url: string, network: string, userId: str
  */
 export declare const getAgentFunction: (url: string, agent: string, userId: string) => Promise<FunctionResponse>;
 /**
- * Streams the Agent Network Designer endpoint with an updated agent definition.
- * Calls `onChunk` for each line received; callers are responsible for parsing
- * reservations / networks out of each chunk.
+ * Streams the Agent Network Designer endpoint with an agent definition, either updating an
+ * existing network or adding a fresh one. Calls `onChunk` for each line received; callers are
+ * responsible for parsing reservations / networks out of each chunk.
  */
-export declare const sendNetworkDesignerUpdate: (url: string, signal: AbortSignal, agentName: string, updated: AgentNetworkDefinitionEntry[], agentNetworkName: string | undefined, currentUser: string, onChunk: (chunk: string) => void) => Promise<void>;
+export declare const sendNetworkDesignerRequest: (url: string, signal: AbortSignal, agentName: string, updated: AgentNetworkDefinitionEntry[], agentNetworkName: string | undefined, currentUser: string, onChunk: (chunk: string) => void) => Promise<void>;

package/dist/controller/agent/Agent.js

@@ -50,23 +50,27 @@ export const testConnection = async (url) => {
         const response = await fetch(url, { signal: controller.signal });
         if (!response.ok) {
             return {
-                success: false,
                 httpStatus: response.status,
-                status: response.statusText,
+                statusText: response.statusText,
+                success: false,
             };
         }
         const jsonResponse = await response.json();
-        // eslint-disable-next-line no-shadow
-        const status = jsonResponse?.status;
-        // Different versions of the server return different status values, so we need to check for both.
-        const success = status === "healthy" || status === "ok";
-        // For now, just capture the Neuro-san version since that's all the server returns. More can be added later.
-        const version = jsonResponse?.versions?.["neuro-san"];
-        return { httpStatus: response.status, success, status, version };
+        const statusText = jsonResponse?.status;
+        const success = statusText === "ok";
+        return {
+            healthCheckResponse: jsonResponse,
+            httpStatus: response.status,
+            statusText,
+            success,
+        };
     }
     catch (error) {
         const errorMessage = error instanceof Error ? error.message : String(error);
-        return { success: false, status: errorMessage };
+        return {
+            statusText: errorMessage,
+            success: false,
+        };
     }
     finally {
         clearTimeout(timeout);
@@ -180,11 +184,11 @@ export const getAgentFunction = async (url, agent, userId) => {
     return response.json();
 };
 /**
- * Streams the Agent Network Designer endpoint with an updated agent definition.
- * Calls `onChunk` for each line received; callers are responsible for parsing
- * reservations / networks out of each chunk.
+ * Streams the Agent Network Designer endpoint with an agent definition, either updating an
+ * existing network or adding a fresh one. Calls `onChunk` for each line received; callers are
+ * responsible for parsing reservations / networks out of each chunk.
  */
-export const sendNetworkDesignerUpdate = async (url, signal, agentName, updated, agentNetworkName, currentUser, onChunk) => {
+export const sendNetworkDesignerRequest = async (url, signal, agentName, updated, agentNetworkName, currentUser, onChunk) => {
     await sendChatQuery(url, signal, 
     // Shouldn't have to pass a user message, but API behaves differently without it
     `Update instructions for agent "${agentName}"`, AGENT_NETWORK_DESIGNER_ID, onChunk, null, {

package/dist/index.d.ts

@@ -23,7 +23,7 @@ export * from "./components/Common/notification.js";
 export * from "./components/ErrorPage/ErrorBoundary.js";
 export * from "./components/MultiAgentAccelerator/AgentConversations.js";
 export * from "./components/MultiAgentAccelerator/AgentCounts.js";
-export * from "./components/MultiAgentAccelerator/AgentFlow.js";
+export * from "./components/MultiAgentAccelerator/AgentFlow/AgentFlow.js";
 export * from "./components/MultiAgentAccelerator/MultiAgentAccelerator.js";
 export * from "./components/MultiAgentAccelerator/Sidebar/Sidebar.js";
 export * from "./components/MultiAgentAccelerator/TemporaryNetworks.js";

package/dist/index.js

@@ -38,7 +38,7 @@ export * from "./components/Common/notification.js";
 export * from "./components/ErrorPage/ErrorBoundary.js";
 export * from "./components/MultiAgentAccelerator/AgentConversations.js";
 export * from "./components/MultiAgentAccelerator/AgentCounts.js";
-export * from "./components/MultiAgentAccelerator/AgentFlow.js";
+export * from "./components/MultiAgentAccelerator/AgentFlow/AgentFlow.js";
 export * from "./components/MultiAgentAccelerator/MultiAgentAccelerator.js";
 export * from "./components/MultiAgentAccelerator/Sidebar/Sidebar.js";
 export * from "./components/MultiAgentAccelerator/TemporaryNetworks.js";