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

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

@@ -62,3 +62,11 @@ 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 to obtain its reservation.
+ * Returns the single updated network as a one-element list (empty if the designer returned
+ * no reservation).
+ */
+export declare const streamNetworkDesignerUpsert: (neuroSanURL: string, signal: AbortSignal, frontman: string, networkDef: AgentNetworkDefinitionEntry[], agentNetworkName: string | undefined, username: string) => Promise<TemporaryNetwork[]>;

package/dist/components/MultiAgentAccelerator/TemporaryNetworks.js

@@ -1,6 +1,11 @@
+import { keyBy, mergeWith } from "lodash-es";
 import { AGENT_NETWORK_DEFINITION_KEY, AGENT_NETWORK_HOCON, AGENT_RESERVATIONS_KEY, DisplayAs, TEMPORARY_NETWORK_FOLDER, } from "./const.js";
+import { sendNetworkDesignerRequest } from "../../controller/agent/Agent.js";
 import { ChatMessageType } from "../../generated/neuro-san/NeuroSanClient.js";
-import { removeTrailingUuid } from "../AgentChat/Common/Utils.js";
+import { removeTrailingUuid } from "../../utils/AgentName.js";
+import { chatMessageFromChunk } from "../AgentChat/Common/Utils.js";
+import { NotificationType, sendNotification } from "../Common/notification.js";
+//#endregion: Types
 /**
  * Extracts agent reservations from a chat message, if they exist.
  * @param message The chat message to extract reservations from. We expect reservations to be present in messages of
@@ -44,7 +49,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 +63,7 @@ export const convertReservationsToNetworks = (agentReservations, networkHocon, a
         agentNetworkName: agentNetworkName ?? removeTrailingUuid(reservation.reservation_id),
         networkHocon,
         agentNetworkDefinition,
-    }));
+    })));
 };
 export const isEditableAgent = (displayAs) => displayAs === DisplayAs.LLM_AGENT;
 /**
@@ -82,14 +91,53 @@ export const isTemporaryNetwork = (agentName, networks) => agentName !== null &&
  * Merges incoming networks into target, keeping the entry with the highest expiration time.
  * Returns a new array; does not mutate either argument.
  */
-export const mergeNetworks = (target, incoming) => incoming.reduce((result, n) => {
-    const existingIdx = result.findIndex((e) => e.agentNetworkName === n.agentNetworkName);
-    // No existing entry with this name - append.
-    if (existingIdx < 0)
-        return [...result, n];
-    // Existing entry found - keep whichever reservation expires later.
-    if (n.reservation.expiration_time_in_seconds > result[existingIdx].reservation.expiration_time_in_seconds) {
-        return result.map((e, i) => (i === existingIdx ? n : e));
+export const mergeNetworks = (target, incoming) => Object.values(mergeWith(keyBy(target, "agentNetworkName"), keyBy(incoming, "agentNetworkName"), 
+// Both collections share a name: keep whichever reservation expires later, existing wins ties.
+(existing, candidate) => existing &&
+    existing.reservation.expiration_time_in_seconds >= candidate.reservation.expiration_time_in_seconds
+    ? existing
+    : candidate));
+/**
+ * Extracts TemporaryNetworks from a single streamed chunk, merging into `accumulated`.
+ * Returns `accumulated` unchanged if the chunk yields no reservations or on parse error.
+ */
+const collectNetworkFromChunk = (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);
     }
-    return result;
-}, [...target]);
+    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 to obtain its reservation.
+ * Returns the single updated network as a one-element list (empty if the designer returned
+ * no reservation).
+ */
+export const streamNetworkDesignerUpsert = async (neuroSanURL, signal, frontman, networkDef, agentNetworkName, username) => {
+    let newNetworks = [];
+    await sendNetworkDesignerRequest(neuroSanURL, signal, frontman, networkDef, agentNetworkName, username, (chunk) => {
+        // There is only one network. The designer echoes it across streamed chunks. Merge by name so the
+        // repeated echoes collapse into that single entry rather than appending duplicates.
+        newNetworks = collectNetworkFromChunk(chunk, networkDef, newNetworks);
+    });
+    return newNetworks;
+};

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

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

@@ -1,16 +1,10 @@
 import { ConnectivityInfo } from "../../generated/neuro-san/NeuroSanClient.js";
-export declare const DEFAULT_FRONTMAN_X_POS = 150;
-export declare const DEFAULT_FRONTMAN_Y_POS = 450;
-export declare const BASE_RADIUS = 100;
-export declare const LEVEL_SPACING = 150;
-export declare const TEMPORARY_NETWORK_FOLDER = "temporary";
-export declare const AGENT_RESERVATIONS_KEY = "agent_reservations";
-export declare const AGENT_NETWORK_HOCON = "agent_network_hocon_text";
-export declare const AGENT_PROGRESS_CONNECTIVITY_KEY = "connectivity_info";
-export declare const AGENT_NETWORK_DESIGNER_ID = "agent_network_designer";
 export declare const AGENT_NETWORK_DEFINITION_KEY = "agent_network_definition";
+export declare const AGENT_NETWORK_DESIGNER_ID = "agent_network_designer";
+export declare const AGENT_NETWORK_HOCON = "agent_network_hocon_text";
 export declare const AGENT_NETWORK_NAME_KEY = "agent_network_name";
-export declare const TRIGGER_APP_TOUR_EVENT_NAME = "trigger-app-tour";
+export declare const AGENT_PROGRESS_CONNECTIVITY_KEY = "connectivity_info";
+export declare const AGENT_RESERVATIONS_KEY = "agent_reservations";
 /**
  * A single agent entry within an agent network definition, as received in sly_data from the backend.
  * Extends ConnectivityInfo with editable instructions and description fields for the Agent Network Designer.
@@ -19,6 +13,9 @@ export type AgentNetworkDefinitionEntry = ConnectivityInfo & {
     readonly instructions?: string;
     readonly description?: string;
 };
+export declare const BASE_RADIUS = 100;
+export declare const DEFAULT_FRONTMAN_X_POS = 150;
+export declare const DEFAULT_FRONTMAN_Y_POS = 450;
 /** Possible values for the `display_as` field in ConnectivityInfo / AgentNetworkDefinitionEntry. */
 export declare enum DisplayAs {
     LLM_AGENT = "llm_agent",
@@ -26,5 +23,9 @@ export declare enum DisplayAs {
     LANGCHAIN_TOOL = "langchain_tool",
     EXTERNAL_AGENT = "external_agent"
 }
+export declare const EXPIRED_NETWORKS_CHECK_INTERVAL_MS: number;
 export declare const GRACE_PERIOD_MS: number;
+export declare const LEVEL_SPACING = 150;
 export declare const SHOW_TOUR_DELAY_MS = 5000;
+export declare const TEMPORARY_NETWORK_FOLDER = "temporary";
+export declare const TRIGGER_APP_TOUR_EVENT_NAME = "trigger-app-tour";

package/dist/components/MultiAgentAccelerator/const.js

@@ -13,30 +13,22 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-export const DEFAULT_FRONTMAN_X_POS = 150;
-export const DEFAULT_FRONTMAN_Y_POS = 450;
-// Minimum distance from center
-export const BASE_RADIUS = 100;
-// Distance between depth levels
-export const LEVEL_SPACING = 150;
-// Temporary folder name for networks created from agent reservations. These networks are not "in a folder" when
-// they come from the backend, but we need to put them somewhere in the UI, and this makes it clear that they're
-// temporary.
-export const TEMPORARY_NETWORK_FOLDER = "temporary";
-// We expect the agent reservations to be stored in sly_data under this key
-export const AGENT_RESERVATIONS_KEY = "agent_reservations";
-// We expect the agent network HOCON to be stored in sly_data under this key, if it is provided by the backend
-export const AGENT_NETWORK_HOCON = "agent_network_hocon_text";
-// The key in the message structure where connectivity info is stored for agent progress messages
-export const AGENT_PROGRESS_CONNECTIVITY_KEY = "connectivity_info";
-// Agent name for the special "Agent Network Designer" network
-export const AGENT_NETWORK_DESIGNER_ID = "agent_network_designer";
 // The key in sly_data where the agent network definition is stored
 export const AGENT_NETWORK_DEFINITION_KEY = "agent_network_definition";
+// Agent name for the special "Agent Network Designer" network
+export const AGENT_NETWORK_DESIGNER_ID = "agent_network_designer";
+// We expect the agent network HOCON to be stored in sly_data under this key, if it is provided by the backend
+export const AGENT_NETWORK_HOCON = "agent_network_hocon_text";
 // The key in sly_data where the agent network name is stored
 export const AGENT_NETWORK_NAME_KEY = "agent_network_name";
-// The event name that needs to be fired for the app tour to start
-export const TRIGGER_APP_TOUR_EVENT_NAME = "trigger-app-tour";
+// The key in the message structure where connectivity info is stored for agent progress messages
+export const AGENT_PROGRESS_CONNECTIVITY_KEY = "connectivity_info";
+// We expect the agent reservations to be stored in sly_data under this key
+export const AGENT_RESERVATIONS_KEY = "agent_reservations";
+// Minimum distance from center
+export const BASE_RADIUS = 100;
+export const DEFAULT_FRONTMAN_X_POS = 150;
+export const DEFAULT_FRONTMAN_Y_POS = 450;
 /** Possible values for the `display_as` field in ConnectivityInfo / AgentNetworkDefinitionEntry. */
 export var DisplayAs;
 (function (DisplayAs) {
@@ -45,7 +37,17 @@ export var DisplayAs;
     DisplayAs["LANGCHAIN_TOOL"] = "langchain_tool";
     DisplayAs["EXTERNAL_AGENT"] = "external_agent";
 })(DisplayAs || (DisplayAs = {}));
+// Check for expired networks every this many milliseconds
+export const EXPIRED_NETWORKS_CHECK_INTERVAL_MS = 10 * 1000;
 // Display expired temporary networks for this amount of time after they expire so users can see what happened
 export const GRACE_PERIOD_MS = 5 * 60 * 1000; // 5 minutes
+// Distance between depth levels
+export const LEVEL_SPACING = 150;
 // We show the tour modal after this amount of time so as not to "pounce" on the user when they first open the app
 export const SHOW_TOUR_DELAY_MS = 5000;
+// Temporary folder name for networks created from agent reservations. These networks are not "in a folder" when
+// they come from the backend, but we need to put them somewhere in the UI, and this makes it clear that they're
+// temporary.
+export const TEMPORARY_NETWORK_FOLDER = "temporary";
+// The event name that needs to be fired for the app tour to start
+export const TRIGGER_APP_TOUR_EVENT_NAME = "trigger-app-tour";

package/dist/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";

package/dist/state/Settings.d.ts

@@ -11,6 +11,13 @@ type DeepPartial<T> = {
 };
 export type LLMProvider = "OpenAI" | "Anthropic";
 export type LogoSource = "none" | "generic" | "auto";
+export type ByokKeyField = (typeof LLM_PROVIDER_API_KEY_FIELD)[LLMProvider];
+interface ApiKeyEntry {
+    readonly value: string;
+    readonly expiresAt: number;
+}
+type ApiKeys = Partial<Record<LLMProvider, ApiKeyEntry>>;
+export type PaletteKey = keyof typeof PALETTES | "brand";
 /**
  * User preference settings
  */
@@ -35,7 +42,7 @@ interface Settings {
     readonly behavior: {
         readonly enableZenMode: boolean;
     };
-    readonly apiKeys: Partial<Record<LLMProvider, string>>;
+    readonly apiKeys: ApiKeys;
     readonly externalServices: {
         neuroSanUrl: string | null;
     };
@@ -48,25 +55,95 @@ interface SettingsStore {
     readonly updateSettings: (updates: DeepPartial<Settings>) => void;
     readonly resetSettings: () => void;
 }
+export declare const LLM_PROVIDER_API_KEY_FIELD: {
+    readonly OpenAI: "openai_api_key";
+    readonly Anthropic: "anthropic_api_key";
+};
 /**
  * Default settings, used on first load and on reset
  */
 export declare const DEFAULT_SETTINGS: Settings;
+export declare const APP_SETTINGS_STORAGE_KEY = "app-settings";
+export declare const SESSION_API_KEYS_STORAGE_KEY = "app-settings-api-keys";
+export declare const API_KEYS_TTL_MS: number;
+/**
+ * Returns the API key for the given provider if it exists and is not expired, otherwise returns undefined.
+ * This helper should be used to retrieve API keys from the settings store, rather than accessing the store directly,
+ * to ensure that expired keys are not returned.
+ * @param apiKeys Set of API keys stored in the settings store
+ * @param provider The LLM provider for which to retrieve the API key
+ */
+export declare const getApiKey: (apiKeys: ApiKeys, provider: LLMProvider) => string;
 /**
  * The hook that lets apps use the store
  */
 export declare const useSettingsStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<SettingsStore>, "persist"> & {
     persist: {
-        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<SettingsStore, SettingsStore>>) => void;
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<SettingsStore, {
+            settings: {
+                appearance: {
+                    readonly agentIconColor: string;
+                    readonly agentNodeColor: string;
+                    readonly autoAgentIconColor: boolean;
+                    readonly plasmaColor: string;
+                    readonly rangePalette: PaletteKey;
+                    readonly useNativeNames: boolean;
+                };
+                branding: {
+                    readonly customer: string | null;
+                    readonly primary: string | null;
+                    readonly secondary: string | null;
+                    readonly background: string | null;
+                    readonly rangePalette: string[] | null;
+                    readonly iconSuggestion: string | null;
+                    readonly logoSource: LogoSource;
+                };
+                behavior: {
+                    readonly enableZenMode: boolean;
+                };
+                externalServices: {
+                    neuroSanUrl: string | null;
+                };
+            };
+            updateSettings: (updates: DeepPartial<Settings>) => void;
+            resetSettings: () => void;
+        }>>) => void;
         clearStorage: () => void;
         rehydrate: () => Promise<void> | void;
         hasHydrated: () => boolean;
         onHydrate: (fn: (state: SettingsStore) => void) => () => void;
         onFinishHydration: (fn: (state: SettingsStore) => void) => () => void;
-        getOptions: () => Partial<import("zustand/middleware").PersistOptions<SettingsStore, SettingsStore>>;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<SettingsStore, {
+            settings: {
+                appearance: {
+                    readonly agentIconColor: string;
+                    readonly agentNodeColor: string;
+                    readonly autoAgentIconColor: boolean;
+                    readonly plasmaColor: string;
+                    readonly rangePalette: PaletteKey;
+                    readonly useNativeNames: boolean;
+                };
+                branding: {
+                    readonly customer: string | null;
+                    readonly primary: string | null;
+                    readonly secondary: string | null;
+                    readonly background: string | null;
+                    readonly rangePalette: string[] | null;
+                    readonly iconSuggestion: string | null;
+                    readonly logoSource: LogoSource;
+                };
+                behavior: {
+                    readonly enableZenMode: boolean;
+                };
+                externalServices: {
+                    neuroSanUrl: string | null;
+                };
+            };
+            updateSettings: (updates: DeepPartial<Settings>) => void;
+            resetSettings: () => void;
+        }>>;
     };
 }>;
-export type PaletteKey = keyof typeof PALETTES | "brand";
 /**
  * Custom hook to get the current color palette based on user settings.
  * If the user has selected custom branding, it will return the palette for that.