@cognizant-ai-lab/ui-common 1.5.0 → 1.6.0

package/dist/components/MultiAgentAccelerator/AgentFlow.js

@@ -15,11 +15,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import AdjustRoundedIcon from "@mui/icons-material/AdjustRounded";
-import ChatBubbleOutlineIcon from "@mui/icons-material/ChatBubbleOutline";
+import ChatBubbleOutlinedIcon from "@mui/icons-material/ChatBubbleOutlined";
+import CloseIcon from "@mui/icons-material/Close";
+import EditIcon from "@mui/icons-material/Edit";
 import HubOutlinedIcon from "@mui/icons-material/HubOutlined";
 import ScatterPlotOutlinedIcon from "@mui/icons-material/ScatterPlotOutlined";
+import Backdrop from "@mui/material/Backdrop";
 import Box from "@mui/material/Box";
-import { useTheme } from "@mui/material/styles";
+import Button from "@mui/material/Button";
+import CircularProgress from "@mui/material/CircularProgress";
+import IconButton from "@mui/material/IconButton";
+import Paper from "@mui/material/Paper";
+import { alpha, useTheme } from "@mui/material/styles";
+import TextField from "@mui/material/TextField";
 import ToggleButton from "@mui/material/ToggleButton";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import Tooltip from "@mui/material/Tooltip";
@@ -28,10 +36,10 @@ import { applyNodeChanges, Background, ConnectionMode, ControlButton, Controls,
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { AgentNode, NODE_HEIGHT, NODE_WIDTH } from "./AgentNode.js";
 import { AgentNodePopup } from "./AgentNodePopup.js";
-import { AGENT_NETWORK_DEFINITION_KEY, AGENT_NETWORK_DESIGNER_ID, AGENT_NETWORK_NAME_KEY, BASE_RADIUS, DEFAULT_FRONTMAN_X_POS, DEFAULT_FRONTMAN_Y_POS, isEditableAgent, LEVEL_SPACING, } from "./const.js";
+import { AGENT_NETWORK_DEFINITION_KEY, AGENT_NETWORK_DESIGNER_ID, AGENT_NETWORK_NAME_KEY, BASE_RADIUS, DEFAULT_FRONTMAN_X_POS, DEFAULT_FRONTMAN_Y_POS, LEVEL_SPACING, } from "./const.js";
 import { addThoughtBubbleEdge, layoutLinear, layoutRadial } from "./GraphLayouts.js";
 import { PlasmaEdge } from "./PlasmaEdge.js";
-import { convertReservationsToNetworks, extractNetworkHocon, extractReservations } from "./TemporaryNetworks.js";
+import { convertReservationsToNetworks, extractNetworkHocon, extractReservations, isEditableAgent, mergeNetworks, } from "./TemporaryNetworks.js";
 import { ThoughtBubbleEdge } from "./ThoughtBubbleEdge.js";
 import { ThoughtBubbleOverlay } from "./ThoughtBubbleOverlay.js";
 import { sendChatQuery } from "../../controller/agent/Agent.js";
@@ -41,35 +49,25 @@ 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";
 import { NotificationType, sendNotification } from "../Common/notification.js";
 // #endregion: Types
 // #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.
+// Exported for tests.
+export const DOCK_BANNER_AUTO_DISMISS_MS = 5_000;
 // #endregion: Constants
+const DOCK_PROMPT_PLACEHOLDER = "Describe a change to the network";
 // #region: Helpers
-/** Merges incoming networks into target, keeping the entry with the highest expiration time. */
-const mergeNetworks = (target, incoming) => {
-    for (const n of incoming) {
-        const key = n.agentNetworkName ?? n.reservation.reservation_id;
-        const existingIdx = target.findIndex((e) => (e.agentNetworkName ?? e.reservation.reservation_id) === key);
-        if (existingIdx < 0) {
-            target.push(n);
-        }
-        else if (n.reservation.expiration_time_in_seconds > target[existingIdx].reservation.expiration_time_in_seconds) {
-            target[existingIdx] = n;
-        }
-    }
-};
 /**
- * Streams the Agent Network Designer endpoint with the updated definition and collects
- * the resulting reservations. Returns the deduplicated list of new networks.
+ * Streams the Agent Network Designer endpoint with a natural-language prompt and the current
+ * network definition, collecting any returned reservations.
  */
-const streamNetworkDesignerUpdate = async (neuroSanURL, signal, agentName, updated, agentNetworkName, currentUser) => {
-    const newNetworks = [];
-    await sendChatQuery(neuroSanURL, signal, 
-    // Shouldn't have to pass a user message, but API behaves different without it
-    `Update instructions for agent "${agentName}"`, AGENT_NETWORK_DESIGNER_ID, (chunk) => {
+const streamNetworkDesignerPrompt = async (neuroSanURL, signal, userPrompt, currentDefinition, agentNetworkName, currentUser) => {
+    let newNetworks = [];
+    await sendChatQuery(neuroSanURL, signal, userPrompt, AGENT_NETWORK_DESIGNER_ID, (chunk) => {
         const chatMessage = chatMessageFromChunk(chunk);
         if (!chatMessage)
             return;
@@ -77,26 +75,19 @@ const streamNetworkDesignerUpdate = async (neuroSanURL, signal, agentName, updat
         if (reservations.length === 0)
             return;
         const networkHocon = extractNetworkHocon(chatMessage);
-        // Always use the user's edited definition as the authoritative value.
-        // The backend may not echo agent_network_definition back, may return
-        // an empty array, or may return the pre-edit version.
         const agentNetworkNameFromMessage = chatMessage.sly_data?.[AGENT_NETWORK_NAME_KEY];
-        // Prefer the locally-known name so upsert can match the existing entry even
-        // when the backend response omits AGENT_NETWORK_NAME_KEY.
         const networkName = agentNetworkName ?? agentNetworkNameFromMessage;
-        const converted = convertReservationsToNetworks(reservations, networkHocon, updated, networkName);
-        mergeNetworks(newNetworks, converted);
+        const definitionFromMessage = chatMessage.sly_data?.[AGENT_NETWORK_DEFINITION_KEY];
+        const converted = convertReservationsToNetworks(reservations, networkHocon, definitionFromMessage ?? currentDefinition, networkName);
+        newNetworks = mergeNetworks(newNetworks, converted);
     }, null, {
-        [AGENT_NETWORK_DEFINITION_KEY]: updated,
-        // Use the backend's canonical name, not the local UUID-based key.
+        [AGENT_NETWORK_DEFINITION_KEY]: currentDefinition,
         ...(agentNetworkName ? { [AGENT_NETWORK_NAME_KEY]: agentNetworkName } : {}),
-        // skip_designer prevents the backend from using a reasoning model for edits
-        skip_designer: true,
     }, currentUser, StreamingUnit.Line);
     return newNetworks;
 };
 // #endregion: Helpers
-export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork, currentConversations, currentUser, id, isAgentNetworkDesignerMode, isAwaitingLlm, isStreaming, isSelectedNetworkTemporary: isTemporaryNetwork, networkId, neuroSanURL, onNetworkReplaced, thoughtBubbleEdges, setThoughtBubbleEdges, }) => {
+export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork, currentConversations, currentUser, id, isAgentNetworkDesignerMode, isAwaitingLlm, isEditMode, isStreaming, isSelectedNetworkTemporary: isTemporaryNetwork, networkDisplayName, networkId, neuroSanURL, onEnterEditMode, onNetworkReplaced, onExitEditMode, onSaveAgent, thoughtBubbleEdges, setThoughtBubbleEdges, }) => {
     const theme = useTheme();
     const { fitView } = useReactFlow();
     const handleResize = useCallback(() => {
@@ -146,7 +137,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
             let edgesMap = null;
             for (const conv of currentConversations) {
                 const convText = conv.text?.trim();
-                const agentList = Array.from(conv.agents);
+                const agentList = [...conv.agents];
                 if (convText &&
                     agentList.length >= 2 &&
                     !processedText.has(convText) &&
@@ -197,7 +188,8 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
         return () => clearInterval(cleanupInterval);
     }, [setThoughtBubbleEdges]); // mount/unmount only
     // Shadow color for icon
-    const shadowColor = theme.palette.mode === "dark" ? theme.palette.common.white : theme.palette.common.black;
+    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
@@ -213,7 +205,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
     const mergedAgentsInNetwork = useMemo(() => {
         // Add any missing agents from bubbles as minimal ConnectivityInfo
         const existingIds = new Set(agentsInNetwork.map((a) => a.origin));
-        const missing = Array.from(bubbleAgentIds).filter((bubbleAgentId) => !existingIds.has(bubbleAgentId));
+        const missing = [...bubbleAgentIds].filter((bubbleAgentId) => !existingIds.has(bubbleAgentId));
         const minimalAgents = missing.map((missingId) => ({
             origin: missingId,
             tools: [],
@@ -249,6 +241,49 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
     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);
+    // Dock (edit-mode prompt bar) state
+    const [dockPrompt, setDockPrompt] = useState("");
+    const [isDockStreaming, setIsDockStreaming] = useState(false);
+    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.
+    const [dockBanner, setDockBanner] = useState(null);
+    const bannerTimeoutRef = useRef(null);
+    // Clear the banner auto-dismiss timer on unmount.
+    useEffect(() => {
+        return () => {
+            clearTimeout(bannerTimeoutRef.current);
+        };
+    }, []);
+    const handleDismissBanner = useCallback(() => {
+        clearTimeout(bannerTimeoutRef.current);
+        setDockBanner(null);
+    }, []);
+    // Show a dock banner. Success/cancel banners auto-dismiss; error banners persist until dismissed.
+    const showDockBanner = useCallback((banner) => {
+        clearTimeout(bannerTimeoutRef.current);
+        setDockBanner(banner);
+        if (banner.severity !== "error") {
+            bannerTimeoutRef.current = setTimeout(() => setDockBanner(null), DOCK_BANNER_AUTO_DISMISS_MS);
+        }
+    }, []);
+    const handleStopClick = useCallback(() => {
+        setStopState("confirming");
+    }, []);
+    const handleKeepApplying = useCallback(() => {
+        setStopState(null);
+    }, []);
+    const handleStopAndDiscard = useCallback(() => {
+        dockAbortControllerRef.current?.abort();
+        dockAbortControllerRef.current = null;
+        setStopState(null);
+        showDockBanner({
+            severity: "info",
+            title: "Applying cancelled.",
+            detail: "Nothing was changed. Your prompt is restored below.",
+        });
+    }, [showDockBanner]);
     const handleNodeClick = useCallback((_event, node) => {
         // Popup is only available for temporary networks.
         if (!isTemporaryNetwork)
@@ -276,11 +311,18 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
         setIsPopupOpen(false);
         setIsSavingAgent(false);
     }, []);
-    /** Applies the networks returned by the designer: upserts them and triggers navigation if needed. */
-    const applyNetworkSaveResult = useCallback((agentName, newNetworksFromSave, currentAgentNetworkName) => {
+    /**
+     * Applies the networks returned by the designer: upserts them and triggers navigation if needed.
+     * Returns true when a matching reservation was applied, false (and surfaces an error banner) otherwise.
+     */
+    const applyNetworkSaveResult = useCallback((newNetworksFromSave, currentAgentNetworkName) => {
         if (newNetworksFromSave.length === 0) {
-            sendNotification(NotificationType.error, `Failed to update agent "${agentName}".`, "The network designer did not return a reservation. Please try again.");
-            return;
+            showDockBanner({
+                severity: "error",
+                title: "Failed to apply network change.",
+                detail: "The network designer did not return a reservation. Please try again.",
+            });
+            return false;
         }
         const replacement = newNetworksFromSave.find((n) => n.agentNetworkName === currentAgentNetworkName);
         if (replacement) {
@@ -289,12 +331,70 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
                 useAgentChatHistoryStore.getState().copyHistory(networkId, replacement.agentInfo.agent_name);
                 onNetworkReplaced(networkId, replacement.agentInfo.agent_name);
             }
+            return true;
+        }
+        // Reservations came back but none matched the current network — surface this in the dock banner.
+        showDockBanner({
+            severity: "error",
+            title: "Failed to apply network change.",
+            detail: "A reservation was returned but did not match the current network. Please try again.",
+        });
+        return false;
+    }, [networkId, onNetworkReplaced, showDockBanner]);
+    const handleDockApply = useCallback(async () => {
+        if (!dockPrompt.trim() || !neuroSanURL || !currentUser)
+            return;
+        const currentTempNetwork = networkId
+            ? tempNetworks.find((n) => n.agentInfo.agent_name === networkId)
+            : undefined;
+        const currentDefinition = currentTempNetwork?.agentNetworkDefinition ?? [];
+        setIsDockStreaming(true);
+        const controller = new AbortController();
+        dockAbortControllerRef.current = controller;
+        let hasTimedOut = false;
+        const timeoutId = setTimeout(() => {
+            hasTimedOut = true;
+            controller.abort();
+        }, 120_000); // 2 min timeout
+        try {
+            const newNetworks = await streamNetworkDesignerPrompt(neuroSanURL, controller.signal, dockPrompt, currentDefinition, currentTempNetwork?.agentNetworkName, currentUser);
+            const applied = applyNetworkSaveResult(newNetworks, currentTempNetwork?.agentNetworkName);
+            if (applied) {
+                setDockPrompt("");
+                showDockBanner({
+                    severity: "success",
+                    title: "Changes applied.",
+                    detail: "Your network has been updated.",
+                });
+            }
         }
-        else {
-            // Reservations came back but none matched the current network — surface this to the user.
-            sendNotification(NotificationType.error, `Failed to update agent "${agentName}".`, "A reservation was returned but did not match the current network. Please try again.");
+        catch (e) {
+            const isAbort = e instanceof DOMException && e.name === "AbortError";
+            if (!isAbort) {
+                showDockBanner({ severity: "error", title: "Failed to apply network change.", detail: String(e) });
+            }
+            else if (hasTimedOut) {
+                showDockBanner({
+                    severity: "error",
+                    title: "Failed to apply network change.",
+                    detail: "The request timed out. Please try again.",
+                });
+            }
         }
-    }, [networkId, onNetworkReplaced]);
+        finally {
+            clearTimeout(timeoutId);
+            dockAbortControllerRef.current = null;
+            setIsDockStreaming(false);
+        }
+    }, [applyNetworkSaveResult, currentUser, dockPrompt, networkId, neuroSanURL, showDockBanner, tempNetworks]);
+    const handleExitEditMode = useCallback(() => {
+        if (isDockStreaming) {
+            dockAbortControllerRef.current?.abort();
+            dockAbortControllerRef.current = null;
+            setIsDockStreaming(false);
+        }
+        onExitEditMode?.();
+    }, [isDockStreaming, onExitEditMode]);
     const handlePopupSave = useCallback(async (agentName, instructionsText, descriptionText) => {
         if (!selectedAgent)
             return;
@@ -310,33 +410,22 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
         if (networkId) {
             updateTempNetworkDefinition(networkId, updated);
         }
-        // POST the updated definition to the Agent Network Designer and wait for the response.
-        // The backend is immutable for temporary networks, so a new reservation will always be created.
-        // We need to capture it and replace the old network in the store.
-        if (!neuroSanURL || !currentUser || updated.length === 0) {
+        if (!onSaveAgent) {
             setIsPopupOpen(false);
             return;
         }
         setIsSavingAgent(true);
         const saveController = new AbortController();
         saveAbortControllerRef.current = saveController;
-        // 60-second hard timeout — belt-and-suspenders in case the server never closes the stream.
-        const saveTimeoutId = setTimeout(() => saveController.abort(new DOMException("Save timed out", "TimeoutError")), 60_000);
+        const saveTimeoutId = setTimeout(() => saveController.abort(new DOMException("Save timed out", "TimeoutError")), 60_000 // 1 min timeout
+        );
         try {
-            const newNetworksFromSave = await streamNetworkDesignerUpdate(neuroSanURL, saveController.signal, agentName, updated, currentTempNetwork?.agentNetworkName, currentUser);
-            applyNetworkSaveResult(agentName, newNetworksFromSave, currentTempNetwork?.agentNetworkName);
+            await onSaveAgent(agentName, updated, currentTempNetwork?.agentNetworkName, saveController.signal);
         }
         catch (e) {
-            const isAbort = e instanceof DOMException && e.name === "AbortError";
-            const isTimeout = e instanceof DOMException && e.name === "TimeoutError";
-            if (!isAbort) {
-                console.error("Failed to submit agent network update:", e);
-                const detail = isTimeout
-                    ? "The request timed out waiting for the server. Please try again."
-                    : String(e);
-                sendNotification(NotificationType.error, `Failed to update agent "${agentName}".`, detail);
-            }
-            // isAbort: user dismissed the dialog — no toast needed.
+            console.error(`Error saving network ${agentName}. See onSaveAgent implementation for details.`, e);
+            sendNotification(NotificationType.error, `Failed to save agent "${agentName}".`, String(e), undefined, null // show indefinitely until the user dismisses
+            );
         }
         finally {
             clearTimeout(saveTimeoutId);
@@ -344,15 +433,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
             setIsSavingAgent(false);
             setIsPopupOpen(false);
         }
-    }, [
-        selectedAgent,
-        tempNetworks,
-        updateTempNetworkDefinition,
-        neuroSanURL,
-        currentUser,
-        networkId,
-        applyNetworkSaveResult,
-    ]);
+    }, [selectedAgent, tempNetworks, updateTempNetworkDefinition, networkId, onSaveAgent]);
     const edges = layoutResult.edges;
     // Make sure to extract only thought bubble edges for the overlay.
     const thoughtBubbleEdgesForOverlay = useMemo(() => edges.filter((e) => e.type === "thoughtBubbleEdge"), [edges]);
@@ -399,11 +480,11 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
         const length = isHeatmap ? palette.length : Math.min(maxDepth, palette.length);
         return (_jsxs(Box, { id: `${id}-legend`, sx: {
                 position: "absolute",
-                top: "5px",
+                top: "1.5rem",
                 right: "10px",
                 padding: "5px",
                 borderRadius: "5px",
-                boxShadow: `0 0 5px color-mix(in srgb, ${shadowColor} 30%, transparent)`,
+                boxShadow: `0 0 5px color-mix(in srgb, ${foregroundColor} 30%, transparent)`,
                 display: "flex",
                 alignItems: "center",
                 zIndex: getZIndex(2, theme),
@@ -444,7 +525,7 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
         if (!isActive) {
             return undefined;
         }
-        return theme.palette.mode === "dark" ? theme.palette.grey[800] : theme.palette.grey[200];
+        return isDarkMode ? theme.palette.grey[800] : theme.palette.grey[200];
     };
     // 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;
@@ -464,25 +545,144 @@ export const AgentFlow = ({ agentCounts, agentIconSuggestions, agentsInNetwork,
                                 backgroundColor: getControlButtonBackgroundColor(enableRadialGuides),
                             }, disabled: layout !== "radial", children: _jsx(AdjustRoundedIcon, { id: "radial-guides-icon" }) }) }) }), _jsx(Tooltip, { id: "thought-bubble-tooltip", title: `Toggle thought bubbles ${showThoughtBubbles ? "off" : "on"}`, placement: "right", children: _jsx("span", { id: "thought-bubble-span", children: _jsx(ControlButton, { id: "thought-bubble-button", onClick: () => setShowThoughtBubbles(!showThoughtBubbles), style: {
                                 backgroundColor: getControlButtonBackgroundColor(showThoughtBubbles),
-                            }, children: _jsx(ChatBubbleOutlineIcon, { id: "thought-bubble-icon" }) }) }) })] }));
+                            }, children: _jsx(ChatBubbleOutlinedIcon, { id: "thought-bubble-icon" }) }) }) })] }));
+    };
+    const titleBackgroundColor = alpha(theme.palette.background.paper, 0.75);
+    const getTitle = () => {
+        return (networkDisplayName && (_jsxs(Box, { id: `${id}-network-title-bar`, sx: {
+                alignItems: "center",
+                display: "flex",
+                gap: 1,
+                left: "50%",
+                pointerEvents: "none",
+                position: "absolute",
+                top: 0,
+                transform: "translateX(-50%)",
+                zIndex: getZIndex(2, theme),
+            }, children: [_jsx(Tooltip, { title: networkDisplayName, placement: "top", children: _jsx(Box, { sx: { pointerEvents: "auto" }, children: _jsx(Typography, { id: `${id}-network-title`, variant: "subtitle1", sx: {
+                                backdropFilter: "blur(6px)",
+                                backgroundColor: titleBackgroundColor,
+                                border: `1px solid ${alpha(theme.palette.divider, 0.6)}`,
+                                borderRadius: 2,
+                                boxShadow: theme.palette.mode === "dark"
+                                    ? `0 6px 20px ${alpha(theme.palette.common.black, 0.35)}`
+                                    : `0 6px 16px ${alpha(theme.palette.common.black, 0.12)}`,
+                                color: theme.palette.getContrastText(alpha(titleBackgroundColor, 0.65)),
+                                fontWeight: 600,
+                                letterSpacing: "0.01em",
+                                lineHeight: 1.35,
+                                maxWidth: 400,
+                                overflow: "hidden",
+                                px: 2,
+                                py: 0.45,
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap",
+                            }, children: networkDisplayName }) }) }), isTemporaryNetwork && !isEditMode && !isAwaitingLlm && onEnterEditMode && (_jsx(Button, { id: `${id}-enter-edit-mode-btn`, variant: "contained", size: "small", onClick: onEnterEditMode, startIcon: _jsx(EditIcon, {}), sx: {
+                        pointerEvents: "auto",
+                        "&:hover": { backgroundColor: theme.palette.primary.main },
+                    }, children: "Edit" }))] })));
     };
     return (_jsxs(Box, { id: `${id}-outer-box`, sx: {
+            display: "flex",
+            flexDirection: "column",
+            position: "relative",
             height: "100%",
             width: "100%",
             backgroundColor: theme.palette.background.default,
             "& .react-flow__node": {
-                border: `1px solid ${theme.palette.divider}`,
+                border: "1px solid divider",
             },
             "& .react-flow__panel": {
                 backgroundColor: theme.palette.background.paper,
-                border: `1px solid ${theme.palette.divider}`,
+                border: "1px solid divider",
                 color: theme.palette.text.primary,
             },
             "& .react-flow__controls-button": {
                 backgroundColor: theme.palette.background.paper,
-                borderBottom: `1px solid ${theme.palette.divider}`,
+                borderBottom: "1px solid divider",
                 color: theme.palette.text.primary,
                 fill: theme.palette.text.primary,
             },
-        }, children: [_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 ? getLegend() : null, _jsx(Background, { id: `${id}-background` }), !isAgentNetworkDesignerMode && getControls(), shouldShowRadialGuides ? getRadialGuides() : null] })) }), _jsx(ThoughtBubbleOverlay, { nodes: nodes, edges: thoughtBubbleEdgesForOverlay, showThoughtBubbles: showThoughtBubbles, isStreaming: isStreaming, onBubbleHoverChange: handleBubbleHoverChange }), selectedAgent && !isAwaitingLlm && (_jsx(AgentNodePopup, { agentName: selectedAgent.agentName, initialInstructions: selectedAgent.initialInstructions, initialDescription: selectedAgent.initialDescription, isOpen: isPopupOpen, isSaving: isSavingAgent, onClose: handlePopupClose, onSave: handlePopupSave }))] }));
+        }, 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: {
+                    borderTop: `2px solid ${theme.palette.primary.main}`,
+                    backgroundColor: theme.palette.background.paper,
+                    flexShrink: 0,
+                }, 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
+                            // against the dock header below it.
+                            marginBottom: 0,
+                            py: 0,
+                            // Match the dock header's right padding so the banner's close X lines up
+                            // 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),
+                            "& .MuiAlert-action": {
+                                alignItems: "center",
+                                marginRight: 0,
+                                paddingTop: 0,
+                            },
+                        }, children: _jsxs(Typography, { variant: "caption", component: "span", children: [_jsx("strong", { children: dockBanner.title }), ` ${dockBanner.detail}`] }) })), _jsxs(Box, { sx: {
+                            backdropFilter: "blur(6px)",
+                            borderBottom: "1px solid divider",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            paddingLeft: 1.25,
+                            paddingRight: 0.25,
+                        }, children: [_jsx(Typography, { variant: "overline", sx: { fontWeight: "bold", letterSpacing: 1, lineHeight: 1.8 }, children: "Network Editor" }), _jsx(IconButton, { size: "small", "aria-label": "close edit mode", onClick: handleExitEditMode, children: _jsx(CloseIcon, { fontSize: "small" }) })] }), _jsxs(Box, { sx: {
+                            display: "flex",
+                            gap: 1,
+                            px: 1,
+                            py: 0.5,
+                            alignItems: "center",
+                        }, children: [_jsx(TextField, { fullWidth: true, placeholder: DOCK_PROMPT_PLACEHOLDER, variant: "outlined", size: "small", value: dockPrompt, onChange: (e) => setDockPrompt(e.target.value), onKeyDown: (e) => {
+                                    if (e.key === "Enter" && !e.shiftKey) {
+                                        e.preventDefault();
+                                        void handleDockApply();
+                                    }
+                                }, disabled: isDockStreaming, slotProps: { htmlInput: { style: { fontSize: "0.75rem" } } } }), _jsx(Button, { variant: "contained", onClick: () => void handleDockApply(), disabled: isDockStreaming || !dockPrompt.trim(), sx: {
+                                    fontSize: 16,
+                                    marginBottom: "1px",
+                                    marginRight: 0,
+                                    minWidth: 110,
+                                    paddingTop: 0.3,
+                                    paddingBottom: 0.3,
+                                    whiteSpace: "nowrap",
+                                }, startIcon: isDockStreaming ? (_jsx(CircularProgress, { size: 16, color: "inherit" })) : undefined, children: isDockStreaming ? "Applying..." : "Apply" })] })] })), selectedAgent && !isAwaitingLlm && (_jsx(AgentNodePopup, { agentName: selectedAgent.agentName, initialInstructions: selectedAgent.initialInstructions, initialDescription: selectedAgent.initialDescription, isOpen: isPopupOpen, isSaving: isSavingAgent, onClose: handlePopupClose, onSave: handlePopupSave })), _jsx(Backdrop, { open: isDockStreaming, sx: { zIndex: (t) => t.zIndex.modal + 1 }, children: stopState === "confirming" ? (_jsxs(Paper, { elevation: 6, sx: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: 2,
+                        px: 4,
+                        py: 3,
+                        borderRadius: 2,
+                        maxWidth: 420,
+                    }, children: [_jsx(Typography, { variant: "body1", sx: { fontWeight: "bold" }, children: "Abort changes?" }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: "The in-progress update will be cancelled and discarded. Your network will not be modified." }), _jsxs(Box, { sx: {
+                                display: "flex",
+                                gap: 1.5,
+                                justifyContent: "flex-end",
+                            }, children: [_jsx(Button, { variant: "outlined", onClick: handleKeepApplying, children: "Keep applying" }), _jsx(Button, { variant: "contained", color: "error", startIcon: _jsx("span", { style: { fontSize: "0.7rem" }, children: "\u25A0" }), onClick: handleStopAndDiscard, children: "Stop & discard" })] })] })) : (_jsxs(Paper, { elevation: 6, sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 2,
+                        px: 4,
+                        py: 2.5,
+                        borderRadius: 2,
+                        maxWidth: 480,
+                    }, children: [_jsx(CircularProgress, { size: 24 }), _jsxs(Box, { sx: { flex: 1 }, children: [_jsx(Typography, { variant: "body1", sx: { fontWeight: "bold" }, children: "Applying changes to network" }), dockPrompt && (_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mt: 0.25 }, children: dockPrompt }))] }), _jsx(Button, { variant: "outlined", size: "small", startIcon: _jsx("span", { style: { fontSize: "0.65rem" }, children: "\u25A0" }), onClick: handleStopClick, sx: {
+                                whiteSpace: "nowrap",
+                                flexShrink: 0,
+                                color: theme.palette.common.white,
+                                borderColor: theme.palette.common.white,
+                                fontWeight: "bold",
+                                "&:hover": {
+                                    borderColor: theme.palette.error.main,
+                                    color: theme.palette.error.main,
+                                    backgroundColor: alpha(theme.palette.error.main, 0.08),
+                                },
+                            }, children: "Stop" })] })) })] }));
 };

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

@@ -9,11 +9,13 @@ export interface AgentNodeProps extends Record<string, unknown> {
     readonly displayAs?: string;
     readonly getConversations: () => AgentConversation[] | null;
     readonly isAwaitingLlm?: boolean;
+    readonly isEditMode?: boolean;
     readonly agentIconSuggestion?: string;
-    readonly isTemporaryNetwork?: boolean;
+    readonly isEditable?: boolean;
 }
 export declare const NODE_HEIGHT = 100;
 export declare const NODE_WIDTH = 100;
+export declare const FRONTMAN_SIZE_MULTIPLIER = 1.25;
 /**
  * A node representing an agent in the network for use in react-flow.
  * @param props See AgentNodeProps