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

package/dist/components/Common/Navbar.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /*
 Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
 
@@ -18,6 +18,7 @@ limitations under the License.
  * Main navigation bar that appears at the top of each page
  */
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import Business from "@mui/icons-material/Business";
 import DarkModeIcon from "@mui/icons-material/DarkMode";
 import SettingsIcon from "@mui/icons-material/Settings";
 import Box from "@mui/material/Box";
@@ -28,14 +29,14 @@ import MenuItem from "@mui/material/MenuItem";
 import { useColorScheme } from "@mui/material/styles";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { ConfirmationModal } from "./ConfirmationModal.js";
-import { CustomerLogo, getCognizantLogoImage } from "./CustomerLogo.js";
-import { LoadingSpinner } from "./LoadingSpinner.js";
 import { authenticationEnabled, DEFAULT_USER_IMAGE, getContactUsConfirmationText, NEURO_SAN_UI_VERSION, } from "../../const.js";
 import { useSettingsStore } from "../../state/Settings.js";
 import { isDarkMode } from "../../Theme/Theme.js";
 import { navigateToUrl } from "../../utils/BrowserNavigation.js";
+import { getCognizantLogoImage } from "../Logo/Common.js";
+import { CustomerLogo } from "../Logo/CustomerLogo.js";
 import { SettingsDialog } from "../Settings/SettingsDialog.js";
 const MENU_ITEM_TEXT_PROPS = {
     color: "var(--bs-white)",
@@ -58,12 +59,6 @@ export const Navbar = ({ authenticationType, id, logo, logoServiceToken, onStart
     // Dark mode
     const { mode, setMode, systemMode } = useColorScheme();
     const darkMode = isDarkMode(mode, systemMode);
-    // Gate to make sure we only attempt to render after Next.js has completed its rehydration
-    const [hydrated, setHydrated] = useState(false);
-    useEffect(() => {
-        // Indicate that the component has been hydrated
-        setHydrated(true);
-    }, []);
     // Help menu wiring
     const [helpMenuAnchorEl, setHelpMenuAnchorEl] = useState(null);
     const helpMenuOpen = Boolean(helpMenuAnchorEl);
@@ -88,18 +83,25 @@ export const Navbar = ({ authenticationType, id, logo, logoServiceToken, onStart
     const customer = useSettingsStore((state) => state.settings.branding.customer);
     const primary = useSettingsStore((state) => state.settings.branding.primary);
     const hasCustomer = customer?.trim().length > 0;
-    return hydrated ? (_jsxs(Grid, { id: "nav-bar-container", container: true, sx: {
+    // Logo settings
+    const iconSuggestion = useSettingsStore((state) => state.settings.branding.iconSuggestion);
+    const logoSource = useSettingsStore((state) => state.settings.branding.logoSource);
+    return (_jsxs(Grid, { id: "nav-bar-container", container: true, sx: {
             alignItems: "center",
             ...MENU_ITEM_TEXT_PROPS,
             padding: "0.5rem",
-        }, children: [settingsDialogOpen && (_jsx(SettingsDialog, { id: "settings-dialog", isOpen: settingsDialogOpen, logoServiceToken: logoServiceToken, onClose: () => setSettingsDialogOpen(false) })), _jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [_jsx(CustomerLogo, { logoServiceToken: logoServiceToken }), hasCustomer && (_jsx(Typography, { "data-testid": "customer-branding", sx: {
-                            fontSize: "20px",
-                            fontWeight: "600",
-                            paddingLeft: "0.15rem",
-                            width: "200px",
-                            display: "flex",
-                            alignItems: "center",
-                        }, children: customer }))] }), _jsxs(Grid, { id: id, sx: { display: "flex", alignItems: "center" }, children: [hasCustomer ? getCognizantLogoImage() : null, _jsx(Typography, { id: "nav-bar-brand", sx: {
+        }, children: [settingsDialogOpen && (_jsx(SettingsDialog, { id: "settings-dialog", isOpen: settingsDialogOpen, logoServiceToken: logoServiceToken, onClose: () => setSettingsDialogOpen(false) })), _jsx(Box, { sx: {
+                    alignItems: "center",
+                    display: "flex",
+                    gap: 2,
+                }, children: hasCustomer ? (_jsxs(_Fragment, { children: [_jsx(CustomerLogo, { customer: customer, fallbackIcon: Business, iconSuggestion: iconSuggestion, logoServiceToken: logoServiceToken, logoSource: logoSource }), _jsx(Typography, { "data-testid": "customer-branding", sx: {
+                                fontSize: "20px",
+                                fontWeight: "600",
+                                paddingLeft: "0.15rem",
+                                width: "200px",
+                                display: "flex",
+                                alignItems: "center",
+                            }, children: customer })] })) : (getCognizantLogoImage()) }), _jsxs(Grid, { id: id, sx: { display: "flex", alignItems: "center" }, children: [hasCustomer ? getCognizantLogoImage() : null, _jsx(Typography, { id: "nav-bar-brand", sx: {
                             ...MENU_ITEM_TEXT_PROPS,
                             marginLeft: "0.85rem",
                             fontSize: "16px",
@@ -125,13 +127,13 @@ export const Navbar = ({ authenticationType, id, logo, logoServiceToken, onStart
                             alignItems: "center",
                         }, onClick: (event) => {
                             setExploreMenuAnchorEl(event.currentTarget);
-                        }, children: ["Explore", _jsx(ArrowDropDownIcon, { id: "nav-explore-dropdown-arrow", sx: { color: primary || "var(--bs-white)", fontSize: 22 } })] }), _jsxs(Menu, { id: "explore-menu", anchorEl: exploreMenuAnchorEl, open: exploreMenuOpen, onClose: handleCloseExploreMenu, children: [_jsx(MenuItem, { id: "explore-neuro-san-studio", component: "a", href: "https://github.com/cognizant-ai-lab/neuro-san-studio", target: "_blank", sx: { ...DISABLE_OUTLINE_PROPS }, children: "Neuro-san studio (examples)" }, "explore-neuro-san-studio"), _jsx(MenuItem, { id: "explore-neuro-san", component: "a", href: "https://github.com/cognizant-ai-lab/neuro-san", target: "_blank", sx: { ...DISABLE_OUTLINE_PROPS }, children: "Neuro-san (core)" }, "explore-neuro-san")] })] }), _jsxs(Grid, { id: "help-dropdown", sx: { cursor: "pointer", marginRight: "30px" }, children: [_jsxs(Typography, { id: "help-toggle", sx: {
+                        }, children: ["Explore", _jsx(ArrowDropDownIcon, { id: "nav-explore-dropdown-arrow", sx: { color: primary || "var(--bs-white)", fontSize: 22 } })] }), _jsxs(Menu, { id: "explore-menu", anchorEl: exploreMenuAnchorEl, open: exploreMenuOpen, onClose: handleCloseExploreMenu, children: [_jsx(MenuItem, { id: "explore-neuro-san-studio", component: "a", href: "https://github.com/cognizant-ai-lab/neuro-san-studio", rel: "noopener noreferrer", sx: { ...DISABLE_OUTLINE_PROPS }, target: "_blank", children: "Neuro-san studio (examples)" }, "explore-neuro-san-studio"), _jsx(MenuItem, { id: "explore-neuro-san", component: "a", href: "https://github.com/cognizant-ai-lab/neuro-san", rel: "noopener noreferrer", sx: { ...DISABLE_OUTLINE_PROPS }, target: "_blank", children: "Neuro-san (core)" }, "explore-neuro-san")] })] }), _jsxs(Grid, { id: "help-dropdown", sx: { cursor: "pointer", marginRight: "30px" }, children: [_jsxs(Typography, { id: "help-toggle", sx: {
                             ...MENU_ITEM_TEXT_PROPS,
                             display: "flex",
                             alignItems: "center",
                         }, onClick: (event) => {
                             setHelpMenuAnchorEl(event.currentTarget);
-                        }, children: ["Help", _jsx(ArrowDropDownIcon, { id: "nav-help-dropdown-arrow", sx: { color: primary || "var(--bs-white)", fontSize: 22 } })] }), _jsxs(Menu, { id: "help-menu", anchorEl: helpMenuAnchorEl, open: helpMenuOpen, onClose: handleCloseHelpMenu, children: [_jsx(MenuItem, { id: "user-guide", component: "a", href: "/userguide", target: "_blank", sx: { ...DISABLE_OUTLINE_PROPS }, children: "User guide" }, "user-guide"), _jsx(MenuItem, { id: "take-a-tour", onClick: () => {
+                        }, children: ["Help", _jsx(ArrowDropDownIcon, { id: "nav-help-dropdown-arrow", sx: { color: primary || "var(--bs-white)", fontSize: 22 } })] }), _jsxs(Menu, { id: "help-menu", anchorEl: helpMenuAnchorEl, open: helpMenuOpen, onClose: handleCloseHelpMenu, children: [_jsx(MenuItem, { id: "user-guide", component: "a", href: "/UserGuide", rel: "noopener noreferrer", sx: { ...DISABLE_OUTLINE_PROPS }, target: "_blank", children: "User guide" }, "user-guide"), _jsx(MenuItem, { id: "take-a-tour", onClick: () => {
                                     handleCloseHelpMenu();
                                     onStartTour?.();
                                 }, sx: { ...DISABLE_OUTLINE_PROPS }, children: "Take a tour" }, "take-a-tour"), _jsx(MenuItem, { href: null, id: "contact-us-help", onClick: () => setEmailDialogOpen(true), children: "Contact Us" }, "contact-us-help")] })] }), emailDialogOpen ? (_jsx(ConfirmationModal, { id: "email-dialog", content: getContactUsConfirmationText(supportEmailAddress), handleCancel: () => {
@@ -163,5 +165,5 @@ export const Navbar = ({ authenticationType, id, logo, logoServiceToken, onStart
                         cursor: "pointer",
                     }, onClick: () => {
                         setSettingsDialogOpen(true);
-                    } }) }))] })) : (_jsx(LoadingSpinner, { id: "navbar-loading-spinner" }));
+                    } }) }))] }));
 };

package/dist/components/Common/StatusLight.d.ts

@@ -0,0 +1,9 @@
+import { FC, ReactElement } from "react";
+type Status = "green" | "red" | "unknown";
+interface StatusLightProps {
+    readonly id?: string;
+    readonly statusValue: Status;
+    readonly tooltip?: ReactElement;
+}
+export declare const StatusLight: FC<StatusLightProps>;
+export {};

package/dist/components/Common/StatusLight.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Tooltip from "@mui/material/Tooltip";
+const statusToColor = (statusValue) => {
+    switch (statusValue) {
+        case "green":
+            return "success.main";
+        case "red":
+            return "error.main";
+        case "unknown":
+        default:
+            return "action.disabled";
+    }
+};
+export const StatusLight = ({ id, statusValue, tooltip }) => (_jsx(Tooltip, { title: tooltip, placement: "top", children: _jsx(Box, { id: id, "data-testid": id, "data-status": statusValue, sx: {
+            backgroundColor: statusToColor(statusValue),
+            borderRadius: "50%",
+            display: "inline-block",
+            minWidth: "0.75rem",
+            minHeight: "0.75rem",
+        } }) }));

package/dist/components/ErrorPage/ErrorBoundary.js

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import { Component } from "react";
-import ErrorPage from "./ErrorPage.js";
+import { default as ErrorPage } from "./ErrorPage.js";
 /**
  * Implements a system-wide error handler for Next.js pages in our app.
  * Taken from here: https://nextjs.org/docs/advanced-features/error-handling

package/dist/components/ErrorPage/ErrorPage.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import { FC } from "react";
 interface ErrorPageProps {
     id: string;
     errorText: string;
@@ -8,5 +8,5 @@ interface ErrorPageProps {
  * @param id HTML id for the <code>div</code> for this page
  * @param errorText Error text to be displayed
  */
-export default function ErrorPage({ id, errorText }: ErrorPageProps): ReactElement;
-export {};
+declare const ErrorPage: FC<ErrorPageProps>;
+export default ErrorPage;

package/dist/components/ErrorPage/ErrorPage.js

@@ -28,9 +28,9 @@ import { Navbar } from "../Common/Navbar.js";
  * @param id HTML id for the <code>div</code> for this page
  * @param errorText Error text to be displayed
  */
-export default function ErrorPage({ id, errorText }) {
+const ErrorPage = ({ id, errorText }) => {
     const { auth0ClientId, auth0Domain, supportEmailAddress, logoServiceToken } = useEnvironmentStore();
-    // Access NextJS router
+    // Access Next.js router
     const router = useRouter();
     // Access user info store
     const { currentUser, setCurrentUser, setPicture, oidcProvider } = useUserInfoStore();
@@ -44,4 +44,5 @@ export default function ErrorPage({ id, errorText }) {
         await smartSignOut(currentUser, auth0Domain, auth0ClientId, oidcProvider);
     };
     return (_jsxs(_Fragment, { children: [_jsx(Navbar, { authenticationType: authenticationType, id: "nav-bar", logo: LOGO, logoServiceToken: logoServiceToken, pathname: router.pathname, query: router.query, signOut: handleSignOut, supportEmailAddress: supportEmailAddress, userInfo: userInfo }), _jsxs(Box, { id: id, sx: { marginLeft: "1rem" }, children: [_jsx(NeuroAIBreadcrumbs, {}), _jsx("h4", { id: "error-header", style: { color: "var(--bs-red)", marginTop: "1rem" }, children: "Oops, an internal error occurred on our end." }), _jsxs("div", { id: "error-div-1", children: [_jsxs(Box, { id: "no-need-to-worry", sx: { marginBottom: "1.5rem" }, children: [_jsx("b", { id: "bold-1", children: "There's no need to worry \u2013 you didn't do anything wrong." }), " This is a bug in our server and we'll fix it as soon as possible."] }), _jsx(Box, { id: "try-these-steps", sx: { marginBottom: "1.5rem" }, children: "To attempt to recover from the error, try these steps:" }), _jsx(Box, { id: "refresh-page", sx: { marginBottom: "1.5rem" }, children: _jsxs("ul", { id: "error-boundary-advice-list", className: "list-decimal list-inside", children: [_jsx("li", { id: "error-advice-refresh", children: "Refresh the page to see if the error goes away." }), _jsx("li", { id: "error-advice-reload", children: "Close and re-open your browser, then navigate back to the page where you encountered the error." })] }) }), "If none of that helps, please report the following error to the LEAF team:"] }), _jsx("div", { id: "error-text-div", style: { fontFamily: "monospace", marginTop: "1.5rem", marginBottom: "1.5rem" }, children: errorText }), "More information may be available in the browser console. Please include such information in your report if possible."] }), _jsx(Footer, { supportEmailAddress: supportEmailAddress, logoLinkUrl: "https://www.cognizant.com/", logoUrl: "/cognizant-logo-white.svg" })] }));
-}
+};
+export default ErrorPage;

package/dist/components/Logo/Common.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Returns the Cognizant logo with a link to the corporate website.
+ */
+export declare const getCognizantLogoImage: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Logo/Common.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Returns the Cognizant logo with a link to the corporate website.
+ */
+export const getCognizantLogoImage = () => (_jsx("a", { id: "splash-logo-link", href: "https://www.cognizant.com/us/en", style: {
+        display: "flex",
+        paddingLeft: "0.15rem",
+    }, target: "_blank", rel: "noopener noreferrer", children: _jsx("img", { id: "logo-img", width: "200", height: "45", src: "/cognizant-logo-white.svg", alt: "Cognizant Logo" }) }));

package/dist/components/Logo/CustomerLogo.d.ts

@@ -0,0 +1,23 @@
+import { SvgIconProps } from "@mui/material/SvgIcon";
+import { FC } from "react";
+import { LogoSource } from "../../state/Settings.js";
+interface CustomerLogoProps {
+    readonly customer: string;
+    readonly fallbackIcon?: FC<SvgIconProps>;
+    readonly iconSuggestion?: string;
+    readonly logoServiceToken?: string;
+    readonly logoSource: LogoSource;
+}
+export declare const LOGO_DEV_URL = "https://img.logo.dev/name";
+/**
+ * Component to display the customer's logo based on the settings.
+ * @param customer - Name of the customer, used for fetching the logo from logo.dev when logoSource is "auto"
+ * @param fallbackIcon - Optional MUI icon to use as a fallback if other approaches fail
+ * @param iconSuggestion - Optional MUI icon name to use when logoSource is "generic"
+ * @param logoServiceToken - Optional token for fetching the logo from logo.dev
+ * @param logoSource - Source of the logo, determines how the logo is rendered ("none", "generic", or "auto")
+ * @returns JSX element representing the customer's logo, MUI icon, or Cognizant fallback, or null if no logo
+ * should be displayed or if the logo.dev token is missing/invalid.
+ */
+export declare const CustomerLogo: FC<CustomerLogoProps>;
+export {};

package/dist/components/Logo/CustomerLogo.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Have to suppress this lint error to allow dynamic access of MUI icons
+// eslint-disable-next-line no-restricted-imports
+import * as MuiIcons from "@mui/icons-material";
+//#endregion
+export const LOGO_DEV_URL = "https://img.logo.dev/name";
+/**
+ * Component to display the customer's logo based on the settings.
+ * @param customer - Name of the customer, used for fetching the logo from logo.dev when logoSource is "auto"
+ * @param fallbackIcon - Optional MUI icon to use as a fallback if other approaches fail
+ * @param iconSuggestion - Optional MUI icon name to use when logoSource is "generic"
+ * @param logoServiceToken - Optional token for fetching the logo from logo.dev
+ * @param logoSource - Source of the logo, determines how the logo is rendered ("none", "generic", or "auto")
+ * @returns JSX element representing the customer's logo, MUI icon, or Cognizant fallback, or null if no logo
+ * should be displayed or if the logo.dev token is missing/invalid.
+ */
+export const CustomerLogo = ({ customer, fallbackIcon: FallbackIcon, iconSuggestion, logoServiceToken, logoSource, }) => {
+    const hasCustomer = customer?.trim()?.length > 0;
+    const fallback = FallbackIcon ? _jsx(FallbackIcon, { sx: { fontSize: "2rem" } }) : null;
+    // "generic": check if suggested MUI icon is valid
+    switch (logoSource) {
+        case "generic": {
+            const MuiIcon = MuiIcons[iconSuggestion];
+            const LogoIcon = MuiIcon ?? FallbackIcon;
+            return LogoIcon ? _jsx(LogoIcon, { sx: { fontSize: "2rem" } }) : null;
+        }
+        case "auto": {
+            if (!hasCustomer || !logoServiceToken || logoServiceToken.trim().length === 0) {
+                return fallback;
+            }
+            // "auto": use logo.dev service
+            // eslint-disable-next-line max-len -- better to keep URL together
+            const logoUrl = `${LOGO_DEV_URL}/${encodeURIComponent(customer)}?token=${logoServiceToken}&theme=dark&format=png&size=75`;
+            return (_jsx("img", { src: logoUrl, alt: `${customer} Logo`, width: 40, height: 40, style: { borderRadius: "50%" } }));
+        }
+        case "none":
+            return null;
+        default:
+            return fallback;
+    }
+};

package/dist/components/MultiAgentAccelerator/AgentConversations.js

@@ -22,7 +22,6 @@ export const isFinalMessage = (chatMessage) => {
 export const createConversation = (agents, text, type) => ({
     // Could use crypto.randomUUID, but it's only available under HTTPS, and don't want to use a different
     // solution for HTTP on localhost.
-    // eslint-disable-next-line newline-per-chained-call
     id: `conv_${Date.now()}${Math.random().toString(36).slice(2, 10)}`,
     agents: new Set(agents),
     startedAt: new Date(),

package/dist/components/MultiAgentAccelerator/AgentFlow.js

@@ -45,8 +45,8 @@ import { ThoughtBubbleOverlay } from "./ThoughtBubbleOverlay.js";
 import { sendChatQuery } from "../../controller/agent/Agent.js";
 import { StreamingUnit } from "../../controller/llm/LlmChat.js";
 import { useAgentChatHistoryStore } from "../../state/ChatHistory.js";
+import { usePalette, useSettingsStore } from "../../state/Settings.js";
 import { useTempNetworksStore } from "../../state/TemporaryNetworks.js";
-import { usePalette } from "../../Theme/Palettes.js";
 import { getZIndex } from "../../utils/zIndexLayers.js";
 import { chatMessageFromChunk } from "../AgentChat/Common/Utils.js";
 import { MUIAlert } from "../Common/MUIAlert.js";
@@ -55,7 +55,7 @@ import { NotificationType, sendNotification } from "../Common/notification.js";
 // #region: Constants
 // Timeout for thought bubbles is set to 10 seconds
 const THOUGHT_BUBBLE_TIMEOUT_MS = 10_000;
-// How long the dock'sstatus banner stays visible before auto-dismissing. Error banners persist until dismissed.
+// How long the dock's status banner stays visible before auto-dismissing. Error banners persist until dismissed.
 // Exported for tests.
 export const DOCK_BANNER_AUTO_DISMISS_MS = 5_000;
 // #endregion: Constants
@@ -113,6 +113,8 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
     }, []);
     // Ref for isStreaming, read inside the cleanup interval.
     const isStreamingRef = useRef(isStreaming);
+    // Display option for agent/network names
+    const useNativeNames = useSettingsStore((state) => state.settings.appearance.useNativeNames);
     // Keep the ref current after every render.
     useEffect(() => {
         isStreamingRef.current = isStreaming;
@@ -166,7 +168,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
             return edgesMap ?? prev;
         });
     }, [currentConversations, showThoughtBubbles, setThoughtBubbleEdges]);
-    // Cleanup expired thought bubble edges — created once on mount, reads isStreaming via ref.
+    // Clean up expired thought bubble edges — created once on mount, reads isStreaming via ref.
     useEffect(() => {
         const cleanupInterval = setInterval(() => {
             if (!isStreamingRef.current)
@@ -187,9 +189,6 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
         }, 1000);
         return () => clearInterval(cleanupInterval);
     }, [setThoughtBubbleEdges]); // mount/unmount only
-    // Shadow color for icon
-    const isDarkMode = theme.palette.mode === "dark";
-    const foregroundColor = isDarkMode ? theme.palette.common.white : theme.palette.common.black;
     const isHeatmap = coloringOption === "heatmap";
     const palette = usePalette();
     // Merge agents from active thought bubbles with agentsInNetwork for layout
@@ -216,8 +215,28 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
     // Create the flow layout depending on user preference
     // Memoize layoutResult so it only recalculates when relevant data changes
     const layoutResult = useMemo(() => layout === "linear"
-        ? layoutLinear(isHeatmap ? agentCounts : undefined, mergedAgentsInNetwork, currentConversations, isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggestions, isTemporaryNetwork)
-        : layoutRadial(isHeatmap ? agentCounts : undefined, mergedAgentsInNetwork, currentConversations, isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggestions, isTemporaryNetwork), [
+        ? layoutLinear({
+            agentCounts: isHeatmap ? agentCounts : undefined,
+            agentIconSuggestions,
+            agentsInNetwork: mergedAgentsInNetwork,
+            currentConversations,
+            isAgentNetworkDesignerMode,
+            isAwaitingLlm,
+            isTemporaryNetwork,
+            thoughtBubbleEdges,
+            useNativeNames,
+        })
+        : layoutRadial({
+            agentCounts: isHeatmap ? agentCounts : undefined,
+            agentIconSuggestions,
+            agentsInNetwork: mergedAgentsInNetwork,
+            currentConversations,
+            isAgentNetworkDesignerMode,
+            isAwaitingLlm,
+            isTemporaryNetwork,
+            thoughtBubbleEdges,
+            useNativeNames,
+        }), [
         agentCounts,
         agentIconSuggestions,
         currentConversations,
@@ -228,6 +247,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
         layout,
         mergedAgentsInNetwork,
         thoughtBubbleEdges,
+        useNativeNames,
     ]);
     const [nodes, setNodes] = useState(layoutResult.nodes);
     // Sync up the nodes with the layout result
@@ -237,7 +257,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
     // Track which node the user clicked on so we can open the popup
     const [selectedAgent, setSelectedAgent] = useState(null);
     const [isPopupOpen, setIsPopupOpen] = useState(false);
-    // True while the agent-edit request is in-flight so we can disable the Save button.
+    // True, while the agent-edit request is in-flight so we can disable the Save button.
     const [isSavingAgent, setIsSavingAgent] = useState(false);
     // AbortController for the in-flight save request — stored in a ref so handlePopupClose can cancel it.
     const saveAbortControllerRef = useRef(null);
@@ -247,7 +267,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
     const dockAbortControllerRef = useRef(null);
     // Stop-confirm overlay state: null = not shown, "confirming" = abort dialog open.
     const [stopState, setStopState] = useState(null);
-    // Inline status banner shown above the dock header after an apply succeeds, is cancelled, or fails.
+    // Inline status banner shown above the dock header after an "apply" succeeds, is canceled, or fails.
     const [dockBanner, setDockBanner] = useState(null);
     const bannerTimeoutRef = useRef(null);
     // Clear the banner auto-dismiss timer on unmount.
@@ -333,7 +353,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
             }
             return true;
         }
-        // Reservations came back but none matched the current network — surface this in the dock banner.
+        // Reservations came back, but none matched the current network — surface this in the dock banner.
         showDockBanner({
             severity: "error",
             title: "Failed to apply network change.",
@@ -370,15 +390,17 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
         }
         catch (e) {
             const isAbort = e instanceof DOMException && e.name === "AbortError";
-            if (!isAbort) {
-                showDockBanner({ severity: "error", title: "Failed to apply network change.", detail: String(e) });
+            if (isAbort) {
+                if (hasTimedOut) {
+                    showDockBanner({
+                        severity: "error",
+                        title: "Failed to apply network change.",
+                        detail: "The request timed out. Please try again.",
+                    });
+                }
             }
-            else if (hasTimedOut) {
-                showDockBanner({
-                    severity: "error",
-                    title: "Failed to apply network change.",
-                    detail: "The request timed out. Please try again.",
-                });
+            else {
+                showDockBanner({ severity: "error", title: "Failed to apply network change.", detail: String(e) });
             }
         }
         finally {
@@ -445,8 +467,8 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
     }, [agentsInNetwork, fitView, layout]);
     const onNodesChange = useCallback((changes) => {
         setNodes((currentNodes) => applyNodeChanges(
-        // For now, we only allow dragging, no updates. In agent network designer mode, doesn't make sense
-        // to allow position changes since the user isn't actually manipulating a real network
+        // For now, we only allow dragging, no updates. In agent network designer mode, it doesn't make
+        // sense to allow position changes since the user isn't actually manipulating a real network
         changes.filter((c) => c.type === "position" && !isAgentNetworkDesignerMode), currentNodes));
     }, [isAgentNetworkDesignerMode]);
     const transform = useStore((state) => state.transform);
@@ -479,53 +501,62 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
     const getLegend = () => {
         const length = isHeatmap ? palette.length : Math.min(maxDepth, palette.length);
         return (_jsxs(Box, { id: `${id}-legend`, sx: {
-                position: "absolute",
-                top: "1.5rem",
-                right: "10px",
-                padding: "5px",
+                alignItems: "center",
+                backgroundColor: theme.palette.background.paper,
+                border: `1px solid ${theme.palette.divider}`,
+                boxShadow: `0 2px 8px ${alpha(theme.palette.text.primary, 0.18)}`,
                 borderRadius: "5px",
-                boxShadow: `0 0 5px color-mix(in srgb, ${foregroundColor} 30%, transparent)`,
                 display: "flex",
-                alignItems: "center",
+                padding: theme.spacing(0.5),
+                position: "absolute",
+                right: theme.spacing(2),
+                top: theme.spacing(4),
                 zIndex: getZIndex(2, theme),
-            }, children: [Array.from({ length }, (_, i) => (_jsx(Box, { id: `${id}-legend-depth-${i}`, style: {
+            }, children: [Array.from({ length }, (_, i) => (_jsx(Box, { id: `${id}-legend-depth-${i}`, sx: {
                         alignItems: "center",
                         backgroundColor: palette[i],
                         borderRadius: "50%",
                         color: theme.palette.getContrastText(palette[i]),
                         display: "flex",
-                        height: "15px",
+                        fontSize: "0.5rem",
                         justifyContent: "center",
-                        marginLeft: "5px",
+                        marginLeft: theme.spacing(0.75),
                         width: "15px",
-                    }, children: _jsx(Typography, { id: `${id}-legend-depth-${i}-text`, sx: {
-                            fontSize: "8px",
-                        }, children: i }) }, i))), _jsxs(ToggleButtonGroup, { id: `${id}-coloring-toggle`, value: coloringOption, exclusive: true, onChange: (_, newValue) => {
+                    }, children: i }, i))), _jsxs(ToggleButtonGroup, { id: `${id}-coloring-toggle`, value: coloringOption, exclusive: true, onChange: (_, newValue) => {
                         if (newValue !== null) {
                             setColoringOption(newValue);
                         }
-                    }, sx: {
-                        fontSize: "2rem",
-                        zIndex: 10,
-                        marginLeft: "0.5rem",
-                    }, size: "small", children: [_jsx(ToggleButton, { id: `${id}-depth-toggle`, size: "small", value: "depth", sx: {
+                    }, size: "small", sx: {
+                        marginLeft: theme.spacing(2),
+                        "& .MuiToggleButton-root": {
+                            backgroundColor: theme.palette.background.paper,
+                            borderColor: theme.palette.divider,
+                            color: theme.palette.text.primary,
+                            minHeight: 22,
+                            px: 1,
+                            "&:hover": {
+                                backgroundColor: theme.palette.action.hover,
+                            },
+                            "&.Mui-selected": {
+                                backgroundColor: theme.palette.action.selected,
+                                borderColor: theme.palette.text.primary,
+                            },
+                            "&.Mui-selected:hover": {
+                                backgroundColor: theme.palette.action.selected,
+                                borderColor: theme.palette.text.primary,
+                            },
+                        },
+                    }, children: [_jsx(ToggleButton, { id: `${id}-depth-toggle`, value: "depth", sx: {
                                 fontSize: "0.5rem",
                                 height: "1rem",
-                            }, children: _jsx(Typography, { id: `${id}-depth-label`, sx: {
-                                    fontSize: "10px",
-                                }, children: "Depth" }) }), _jsx(ToggleButton, { id: `${id}-heatmap-toggle`, size: "small", value: "heatmap", sx: {
+                            }, children: "Depth" }), _jsx(ToggleButton, { id: `${id}-heatmap-toggle`, value: "heatmap", sx: {
                                 fontSize: "0.5rem",
                                 height: "1rem",
-                            }, children: _jsx(Typography, { id: `${id}-heatmap-label`, sx: {
-                                    fontSize: "10px",
-                                }, children: "Heatmap" }) })] })] }));
+                            }, children: "Heatmap" })] })] }));
     };
     // Get the background color for the control buttons based on the layout and dark mode setting
     const getControlButtonBackgroundColor = (isActive) => {
-        if (!isActive) {
-            return undefined;
-        }
-        return isDarkMode ? theme.palette.grey[800] : theme.palette.grey[200];
+        return isActive ? theme.palette.action.selected : undefined;
     };
     // Only show radial guides if radial layout is selected, radial guides are enabled, and it's not just Frontman
     const shouldShowRadialGuides = enableRadialGuides && layout === "radial" && maxDepth > 1;
@@ -604,9 +635,12 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
                 fill: theme.palette.text.primary,
             },
         }, children: [_jsxs(Box, { id: `${id}-react-flow-wrapper`, sx: { position: "relative", flex: 1, minHeight: 0 }, children: [networkDisplayName ? _jsx(Box, { sx: { marginBottom: "1rem" }, children: getTitle() }) : null, _jsx(ReactFlow, { id: `${id}-react-flow`, nodes: nodes, edges: edges, onNodesChange: onNodesChange, onNodeClick: handleNodeClick, fitView: true, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionMode: ConnectionMode.Loose, children: !isAwaitingLlm && (_jsxs(_Fragment, { children: [agentsInNetwork?.length && !isAgentNetworkDesignerMode && !isEditMode ? getLegend() : null, _jsx(Background, { id: `${id}-background` }), !isAgentNetworkDesignerMode && !isEditMode && getControls(), shouldShowRadialGuides ? getRadialGuides() : null] })) }), _jsx(ThoughtBubbleOverlay, { nodes: nodes, edges: thoughtBubbleEdgesForOverlay, showThoughtBubbles: showThoughtBubbles, isStreaming: isStreaming, onBubbleHoverChange: handleBubbleHoverChange })] }), isEditMode && isTemporaryNetwork && !isAwaitingLlm && (_jsxs(Box, { sx: {
+                    backdropFilter: "blur(8px)",
+                    backgroundColor: alpha(theme.palette.background.paper, 0.2),
                     borderTop: `2px solid ${theme.palette.primary.main}`,
-                    backgroundColor: theme.palette.background.paper,
                     flexShrink: 0,
+                    position: "relative",
+                    zIndex: getZIndex(2, theme),
                 }, children: [dockBanner && (_jsx(MUIAlert, { closeable: true, id: `${id}-dock-banner`, onClose: handleDismissBanner, severity: dockBanner.severity, sx: {
                             borderRadius: 0,
                             // Override MUIAlert's default 1rem bottom margin so the banner sits flush
@@ -617,10 +651,8 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
                             // vertically with the header's close X below it.
                             paddingRight: 0.5,
                             alignItems: "center",
-                            // Frost the banner like the dock header so the graph doesn't show through the
-                            // app's translucent paper background; keep a tinted, mostly-opaque severity wash.
-                            backdropFilter: "blur(8px)",
-                            backgroundColor: alpha(theme.palette[dockBanner.severity].main, isDarkMode ? 0.28 : 0.16),
+                            // Frost the banner like the dock header, so the graph doesn't show through the
+                            // app's translucent paper background; keep a tinted, mostly opaque severity wash.
                             "& .MuiAlert-action": {
                                 alignItems: "center",
                                 marginRight: 0,

package/dist/components/MultiAgentAccelerator/AgentNode.js

@@ -29,8 +29,7 @@ import Typography from "@mui/material/Typography";
 import { Handle, Position } from "@xyflow/react";
 import { useState } from "react";
 import { DisplayAs } from "./const.js";
-import { useSettingsStore } from "../../state/Settings.js";
-import { usePalette } from "../../Theme/Palettes.js";
+import { usePalette, useSettingsStore } from "../../state/Settings.js";
 import { isLightColor } from "../../Theme/Theme.js";
 import { getZIndex } from "../../utils/zIndexLayers.js";
 // A zero-width space character, used to give the browser a hint where to break long names
@@ -125,32 +124,28 @@ export const AgentNode = (props) => {
     // Determine which icon to display based on the agent type whether it is Frontman or not
     const getDisplayAsIcon = () => {
         const id = `${agentId}-icon`;
-        if (agentIconSuggestion && MuiIcons[agentIconSuggestion]) {
-            const IconComponent = MuiIcons[agentIconSuggestion];
-            return _jsx(IconComponent, { sx: { fontSize: AGENT_ICON_SIZE } });
+        // Check for valid MUI icon suggestion from the LLM suggestion service
+        const SuggestedIcon = agentIconSuggestion ? MuiIcons[agentIconSuggestion] : undefined;
+        // If the LLM provided a valid icon suggestion, use it. Otherwise, fall back to default icons based on
+        // agent type.
+        if (SuggestedIcon) {
+            return (_jsx(SuggestedIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
         }
-        else {
-            if (agentIconSuggestion) {
-                console.warn(`Invalid MUI icon suggestion: ${agentIconSuggestion}`);
-            }
-            if (isFrontman) {
-                return (
-                // Use special icon and larger size for Frontman
-                _jsx(PersonIcon, { id: id, sx: { fontSize: FRONTMAN_ICON_SIZE } }));
-            }
-            else {
-                switch (displayAs) {
-                    case DisplayAs.EXTERNAL_AGENT:
-                        return (_jsx(TravelExploreIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
-                    // This should be a supported type but we're not seeing it?
-                    case DisplayAs.LANGCHAIN_TOOL:
-                    case DisplayAs.CODED_TOOL:
-                        return (_jsx(HandymanIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
-                    case DisplayAs.LLM_AGENT:
-                    default:
-                        return (_jsx(AutoAwesomeIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
-                }
-            }
+        if (isFrontman) {
+            return (
+            // Use special icon and larger size for Frontman
+            _jsx(PersonIcon, { id: id, sx: { fontSize: FRONTMAN_ICON_SIZE } }));
+        }
+        switch (displayAs) {
+            case DisplayAs.EXTERNAL_AGENT:
+                return (_jsx(TravelExploreIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
+            // This should be a supported type but we're not seeing it?
+            case DisplayAs.LANGCHAIN_TOOL:
+            case DisplayAs.CODED_TOOL:
+                return (_jsx(HandymanIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
+            case DisplayAs.LLM_AGENT:
+            default:
+                return (_jsx(AutoAwesomeIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
         }
     };
     // Determine icon color based on settings. If auto color is enabled, use contrasting color for readability.
@@ -160,6 +155,7 @@ export const AgentNode = (props) => {
         ? theme.palette.common.black
         : theme.palette.common.white;
     const [isHovered, setIsHovered] = useState(false);
+    // Insert zero-width spaces into the agent name to give the browser hints where to wrap.
     const wrappedAgentName = agentName
         // Allow wrap after underscore
         .replaceAll("_", `_${ZERO_WIDTH_SPACE}`)