@uipath/apollo-react 4.0.0 → 4.1.1

package/dist/canvas/components/AgentCanvas/AgentFlow.stories.js

@@ -1,2160 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Column, Row } from "../../layouts/index.js";
-import { ReactFlowProvider } from "../../xyflow/react.js";
-import { FontVariantToken } from "@uipath/apollo-react/core";
-import { ApButton, ApTypography } from "../../../material/index.js";
-import { useCallback, useState } from "react";
-import { StoryInfoPanel } from "../../storybook-utils/index.js";
-import { ProjectType, createPlaceholderSuggestion } from "../../types.js";
-import { AgentFlow } from "./AgentFlow.js";
-const meta = {
-    title: 'Canvas/AgentFlow',
-    component: AgentFlow,
-    decorators: [
-        (Story)=>/*#__PURE__*/ jsx("div", {
-                style: {
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    width: '100%',
-                    height: '100%'
-                },
-                children: /*#__PURE__*/ jsx(Story, {})
-            })
-    ]
-};
-const AgentFlow_stories = meta;
-const generateResourceId = ()=>`resource-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
-const sampleContexts = [
-    {
-        name: 'User Profile',
-        description: 'Information about the current user'
-    },
-    {
-        name: 'Session Context',
-        description: 'Current session information'
-    },
-    {
-        name: 'Organization Settings',
-        description: 'Organization configuration'
-    },
-    {
-        name: 'Environment Variables',
-        description: 'System environment settings'
-    }
-];
-const sampleTools = [
-    {
-        name: 'Send Email',
-        description: 'Email Service',
-        projectType: ProjectType.Internal
-    },
-    {
-        name: 'Broken Icon Tool',
-        description: 'Automation',
-        projectType: ProjectType.Internal,
-        iconUrl: 'https://testtest.broken/blah/blah'
-    },
-    {
-        name: 'Query Database',
-        description: 'Database',
-        projectType: ProjectType.Internal
-    },
-    {
-        name: 'Call API',
-        description: 'REST API',
-        projectType: ProjectType.Api
-    },
-    {
-        name: 'Process Document',
-        description: 'Document AI',
-        projectType: ProjectType.Internal
-    },
-    {
-        name: 'Run Automation',
-        description: 'Automation',
-        projectType: ProjectType.Internal
-    }
-];
-const sampleEscalations = [
-    {
-        name: 'Manager Approval',
-        description: 'Escalate to manager'
-    },
-    {
-        name: 'Amount Exceeded',
-        description: 'Transaction limit exceeded'
-    },
-    {
-        name: 'Security Alert',
-        description: 'Suspicious activity detected'
-    },
-    {
-        name: 'Manual Review',
-        description: 'Requires human review'
-    }
-];
-const sampleMcp = [
-    {
-        name: 'File parser',
-        description: 'Parse files in the workspace'
-    },
-    {
-        name: 'Budget Assistant RPC',
-        description: 'Using RPC to connect to a budget assistant server API'
-    }
-];
-const sampleA2aAgents = [
-    {
-        name: 'Billing Agent',
-        description: 'Handles billing inquiries via A2A'
-    },
-    {
-        name: 'Support Agent',
-        description: 'Customer support agent via A2A protocol'
-    }
-];
-let contextIndex = 0;
-let toolIndex = 0;
-let escalationIndex = 0;
-let mcpIndex = 0;
-let a2aIndex = 0;
-const createSampleContext = ()=>{
-    const sample = sampleContexts[contextIndex % sampleContexts.length];
-    contextIndex++;
-    return {
-        id: generateResourceId(),
-        type: 'context',
-        name: sample.name,
-        hasBreakpoint: false,
-        hasGuardrails: false,
-        description: sample.description
-    };
-};
-const createSampleTool = ()=>{
-    const sample = sampleTools[toolIndex % sampleTools.length];
-    toolIndex++;
-    return {
-        id: generateResourceId(),
-        type: 'tool',
-        name: sample.name,
-        description: sample.description,
-        iconUrl: sample.iconUrl ?? '',
-        hasBreakpoint: false,
-        hasGuardrails: false,
-        projectType: sample.projectType
-    };
-};
-const createSampleEscalation = ()=>{
-    const sample = sampleEscalations[escalationIndex % sampleEscalations.length];
-    escalationIndex++;
-    return {
-        id: generateResourceId(),
-        type: 'escalation',
-        name: sample.name,
-        hasBreakpoint: false,
-        hasGuardrails: false,
-        description: sample.description
-    };
-};
-const createSampleMcp = ()=>{
-    const sample = sampleMcp[mcpIndex % sampleMcp.length];
-    mcpIndex++;
-    return {
-        id: generateResourceId(),
-        type: 'mcp',
-        name: sample.name,
-        slug: '',
-        folderPath: '',
-        availableTools: [],
-        description: sample.description,
-        hasBreakpoint: false,
-        hasGuardrails: false
-    };
-};
-const createSampleMemorySpace = ()=>({
-        id: generateResourceId(),
-        type: 'memorySpace',
-        name: 'Agent Memory Space',
-        description: 'Memory space for the agent'
-    });
-const createSampleA2a = ()=>{
-    const sample = sampleA2aAgents[a2aIndex % sampleA2aAgents.length];
-    a2aIndex++;
-    return {
-        id: generateResourceId(),
-        type: 'a2a',
-        name: sample.name,
-        description: sample.description,
-        hasBreakpoint: false,
-        hasGuardrails: false
-    };
-};
-const sampleResources = [
-    {
-        id: 'tool-slack',
-        type: 'tool',
-        name: 'Send message',
-        description: 'Slack',
-        iconUrl: '',
-        hasBreakpoint: false,
-        isCurrentBreakpoint: false,
-        hasGuardrails: false,
-        projectType: ProjectType.Internal,
-        isDisabled: false
-    },
-    {
-        id: 'tool-ixp',
-        type: 'tool',
-        name: 'Extract data',
-        description: 'IXP',
-        iconUrl: '',
-        hasBreakpoint: false,
-        isCurrentBreakpoint: false,
-        hasGuardrails: false,
-        projectType: ProjectType.IXP,
-        isDisabled: false
-    },
-    {
-        id: 'tool-claim',
-        type: 'tool',
-        name: 'Validate claim',
-        description: 'Automation',
-        iconUrl: '',
-        hasBreakpoint: false,
-        isCurrentBreakpoint: false,
-        hasGuardrails: false,
-        projectType: ProjectType.Internal,
-        isDisabled: false
-    },
-    {
-        id: 'context-user-profile',
-        type: 'context',
-        name: 'User Profile',
-        description: 'Information about the current user',
-        hasBreakpoint: false,
-        isCurrentBreakpoint: false
-    },
-    {
-        id: 'escalation-amount-exceeded',
-        type: 'escalation',
-        name: 'Amount exceeded',
-        description: 'Claim form',
-        hasBreakpoint: false,
-        isCurrentBreakpoint: false
-    },
-    {
-        id: 'mcp-file-parser',
-        type: 'mcp',
-        name: 'File Parser',
-        description: 'File Parser',
-        hasBreakpoint: false,
-        isCurrentBreakpoint: false,
-        hasGuardrails: false,
-        slug: 'file-parser',
-        folderPath: 'file-parser',
-        availableTools: []
-    }
-];
-const sampleAgentDefinition = {
-    name: 'Test Agent',
-    version: '1.0',
-    settings: {
-        model: 'gpt-4o-2024-11-20',
-        engine: 'test-engine',
-        temperature: 0,
-        maxTokens: 16384,
-        maxIterations: 10
-    },
-    tools: [],
-    resources: []
-};
-const sampleSpans = [
-    {
-        Id: 'span1',
-        TraceId: 'trace1',
-        ParentId: 'parent1',
-        Name: 'agentRun',
-        StartTime: '2021-01-01T00:00:00Z',
-        EndTime: '2021-01-01T00:00:30Z',
-        Status: 1,
-        CreatedAt: '2021-01-01T00:00:00Z',
-        UpdatedAt: '2021-01-01T00:00:00Z',
-        SpanType: 'agentRun',
-        Attributes: JSON.stringify({
-            type: 'agentRun'
-        }),
-        OrganizationId: 'org1',
-        TenantId: 'tenant1',
-        Source: 1
-    },
-    {
-        Id: 'span2',
-        TraceId: 'trace1',
-        ParentId: 'span1',
-        Name: 'contextLoad',
-        StartTime: '2021-01-01T00:00:31Z',
-        EndTime: '2021-01-01T00:01:00Z',
-        Status: 1,
-        CreatedAt: '2021-01-01T00:00:00Z',
-        UpdatedAt: '2021-01-01T00:00:00Z',
-        SpanType: 'contextLoad',
-        Attributes: JSON.stringify({
-            type: 'contextLoad',
-            contextName: 'test_context'
-        }),
-        OrganizationId: 'org1',
-        TenantId: 'tenant1',
-        Source: 1
-    },
-    {
-        Id: 'span3',
-        TraceId: 'trace1',
-        ParentId: 'span2',
-        Name: 'completion',
-        StartTime: '2021-01-01T00:01:01Z',
-        EndTime: '2021-01-01T00:03:00Z',
-        Status: 1,
-        CreatedAt: '2021-01-01T00:00:00Z',
-        UpdatedAt: '2021-01-01T00:00:00Z',
-        SpanType: 'completion',
-        Attributes: JSON.stringify({
-            type: 'completion'
-        }),
-        OrganizationId: 'org1',
-        TenantId: 'tenant1',
-        Source: 1
-    }
-];
-const sampleStickyNotes = [
-    {
-        id: 'sticky-1',
-        content: '## Welcome!\nThis is a **markdown** sticky note.\n\n- Supports lists\n- And formatting',
-        position: {
-            x: -150,
-            y: -450
-        },
-        size: {
-            width: 320,
-            height: 300
-        },
-        color: 'yellow'
-    },
-    {
-        id: 'sticky-2',
-        content: 'Remember to test:\n\n1. Dragging\n2. Resizing\n3. Color changes\n4. Content editing',
-        position: {
-            x: 380,
-            y: 0
-        },
-        size: {
-            width: 500,
-            height: 450
-        },
-        color: 'blue'
-    },
-    {
-        id: 'sticky-3',
-        content: 'Quick note: Press Delete to remove selected notes',
-        position: {
-            x: -220,
-            y: 220
-        },
-        size: {
-            width: 300,
-            height: 230
-        },
-        color: 'pink'
-    }
-];
-const AgentFlowWrapper = ({ mode, initialResources = sampleResources, initialStickyNotes = [], activeResourceIds, spans = sampleSpans, definition = sampleAgentDefinition, enableTimelinePlayer = true, enableMemory = true, enableStickyNotes = true, enableInstructions = false, healthScore, onHealthScoreClick, allowDragging = false, agentNodePosition, onAgentNodePositionChange = ()=>{}, instructions })=>{
-    const [resources, setResources] = useState(initialResources);
-    const [selectedResourceId, setSelectedResourceId] = useState(null);
-    const [_sidebarMode, setSidebarMode] = useState('properties');
-    const [stickyNotes, setStickyNotes] = useState(initialStickyNotes);
-    const handleAddStickyNote = useCallback((data)=>{
-        setStickyNotes((prev)=>[
-                ...prev,
-                data
-            ]);
-    }, []);
-    const handleUpdateStickyNote = useCallback((id, updates)=>{
-        setStickyNotes((prev)=>prev.map((note)=>note.id === id ? {
-                    ...note,
-                    ...updates
-                } : note));
-    }, []);
-    const handleRemoveStickyNote = useCallback((id)=>{
-        setStickyNotes((prev)=>prev.filter((note)=>note.id !== id));
-    }, []);
-    const handleSelectResource = useCallback((resourceId)=>{
-        setSelectedResourceId(resourceId);
-        setSidebarMode('properties');
-    }, []);
-    const handleAddResourceRequest = useCallback((type)=>{
-        let newResource;
-        switch(type){
-            case 'context':
-                newResource = createSampleContext();
-                break;
-            case 'tool':
-                newResource = createSampleTool();
-                break;
-            case 'escalation':
-                newResource = createSampleEscalation();
-                break;
-            case 'mcp':
-                newResource = createSampleMcp();
-                break;
-            case 'memorySpace':
-                newResource = createSampleMemorySpace();
-                break;
-            case 'a2a':
-                newResource = createSampleA2a();
-                break;
-            default:
-                return;
-        }
-        setResources((prev)=>[
-                ...prev,
-                newResource
-            ]);
-        setSelectedResourceId(newResource.id);
-        setSidebarMode('properties');
-    }, []);
-    const handleRemoveResource = useCallback((resource)=>{
-        setResources((prev)=>prev.filter((r)=>r.id !== resource.id));
-        if (selectedResourceId === resource.id) setSelectedResourceId(null);
-    }, [
-        selectedResourceId
-    ]);
-    const handleEnable = useCallback((resourceId, resource)=>{
-        setResources((prev)=>prev.map((r)=>({
-                    ...r,
-                    ...`${resource.parentNodeId}=>${r.name}:${r.id}` === resourceId && {
-                        isDisabled: false
-                    }
-                })));
-    }, []);
-    const handleDisable = useCallback((resourceId, resource)=>{
-        setResources((prev)=>prev.map((r)=>({
-                    ...r,
-                    ...`${resource.parentNodeId}=>${r.name}:${r.id}` === resourceId && {
-                        isDisabled: true
-                    }
-                })));
-    }, []);
-    const handleAddBreakpoint = useCallback((resourceId, resource)=>{
-        setResources((prev)=>prev.map((r)=>({
-                    ...r,
-                    ...`${resource.parentNodeId}=>${r.name}:${r.id}` === resourceId && {
-                        hasBreakpoint: true
-                    }
-                })));
-    }, []);
-    const handleRemoveBreakpoint = useCallback((resourceId, resource)=>{
-        setResources((prev)=>prev.map((r)=>({
-                    ...r,
-                    ...`${resource.parentNodeId}=>${r.name}:${r.id}` === resourceId && {
-                        hasBreakpoint: false
-                    }
-                })));
-    }, []);
-    const handleAddGuardrail = useCallback((resourceId, resource)=>{
-        setResources((prev)=>prev.map((r)=>({
-                    ...r,
-                    ...`${resource.parentNodeId}=>${r.name}:${r.id}` === resourceId && {
-                        hasGuardrails: true
-                    }
-                })));
-    }, []);
-    const setSpanForSelectedNode = useCallback((_node)=>{}, []);
-    const getNodeFromSelectedSpan = useCallback((_nodes)=>null, []);
-    const renderSidebar = ()=>{
-        if ('design' !== mode) return null;
-        return /*#__PURE__*/ jsxs(Column, {
-            w: 300,
-            p: 16,
-            gap: 16,
-            style: {
-                backgroundColor: 'var(--uix-canvas-background-secondary)',
-                borderLeft: '1px solid var(--uix-canvas-border-de-emp)',
-                overflowY: 'auto',
-                color: 'var(--uix-canvas-foreground)'
-            },
-            children: [
-                /*#__PURE__*/ jsx("h3", {
-                    style: {
-                        margin: 0
-                    },
-                    children: "Design Mode"
-                }),
-                selectedResourceId && /*#__PURE__*/ jsxs("div", {
-                    children: [
-                        /*#__PURE__*/ jsx("strong", {
-                            children: "Selected:"
-                        }),
-                        " ",
-                        selectedResourceId
-                    ]
-                }),
-                /*#__PURE__*/ jsxs("div", {
-                    children: [
-                        /*#__PURE__*/ jsx("strong", {
-                            children: "Resources:"
-                        }),
-                        " ",
-                        resources.length
-                    ]
-                }),
-                enableStickyNotes && /*#__PURE__*/ jsxs("div", {
-                    children: [
-                        /*#__PURE__*/ jsx("strong", {
-                            children: "Sticky Notes:"
-                        }),
-                        " ",
-                        stickyNotes.length
-                    ]
-                }),
-                allowDragging && agentNodePosition && /*#__PURE__*/ jsxs("div", {
-                    style: {
-                        padding: '12px',
-                        backgroundColor: 'var(--uix-canvas-background)',
-                        borderRadius: '4px',
-                        border: '1px solid var(--uix-canvas-border-de-emp)'
-                    },
-                    children: [
-                        /*#__PURE__*/ jsx("div", {
-                            style: {
-                                fontWeight: 'bold',
-                                marginBottom: '8px'
-                            },
-                            children: "Agent Node Position"
-                        }),
-                        /*#__PURE__*/ jsxs("div", {
-                            style: {
-                                fontSize: '0.875rem',
-                                fontFamily: 'monospace'
-                            },
-                            children: [
-                                /*#__PURE__*/ jsxs("div", {
-                                    children: [
-                                        /*#__PURE__*/ jsx("strong", {
-                                            children: "X:"
-                                        }),
-                                        " ",
-                                        agentNodePosition.x.toFixed(2)
-                                    ]
-                                }),
-                                /*#__PURE__*/ jsxs("div", {
-                                    children: [
-                                        /*#__PURE__*/ jsx("strong", {
-                                            children: "Y:"
-                                        }),
-                                        " ",
-                                        agentNodePosition.y.toFixed(2)
-                                    ]
-                                })
-                            ]
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsxs("div", {
-                    style: {
-                        fontSize: '0.875rem',
-                        color: 'var(--uix-canvas-foreground-de-emp)'
-                    },
-                    children: [
-                        /*#__PURE__*/ jsx("p", {
-                            children: "Click the + buttons on the agent node to add:"
-                        }),
-                        /*#__PURE__*/ jsxs("ul", {
-                            children: [
-                                /*#__PURE__*/ jsx("li", {
-                                    children: "Memory (top)"
-                                }),
-                                /*#__PURE__*/ jsx("li", {
-                                    children: "Context (bottom-left)"
-                                }),
-                                /*#__PURE__*/ jsx("li", {
-                                    children: "Escalations (bottom-center)"
-                                }),
-                                /*#__PURE__*/ jsx("li", {
-                                    children: "Tools & MCPs (bottom-right)"
-                                })
-                            ]
-                        }),
-                        enableStickyNotes && /*#__PURE__*/ jsxs(Fragment, {
-                            children: [
-                                /*#__PURE__*/ jsx("p", {
-                                    style: {
-                                        marginTop: '12px'
-                                    },
-                                    children: "Use the sticky note button at the bottom to add notes."
-                                }),
-                                /*#__PURE__*/ jsx("p", {
-                                    children: "Press Delete/Backspace to remove selected notes."
-                                })
-                            ]
-                        })
-                    ]
-                })
-            ]
-        });
-    };
-    return /*#__PURE__*/ jsx(ReactFlowProvider, {
-        children: /*#__PURE__*/ jsxs(Row, {
-            w: "100%",
-            h: "100%",
-            style: {
-                position: 'relative'
-            },
-            children: [
-                /*#__PURE__*/ jsx("div", {
-                    style: {
-                        flex: 1,
-                        position: 'relative'
-                    },
-                    children: /*#__PURE__*/ jsx(AgentFlow, {
-                        allowDragging: allowDragging,
-                        agentNodePosition: agentNodePosition,
-                        onAgentNodePositionChange: onAgentNodePositionChange,
-                        definition: definition,
-                        spans: 'view' === mode ? spans : [],
-                        name: "Test Agent",
-                        description: "Test Description",
-                        mode: mode,
-                        resources: resources,
-                        activeResourceIds: activeResourceIds,
-                        setSpanForSelectedNode: setSpanForSelectedNode,
-                        getNodeFromSelectedSpan: getNodeFromSelectedSpan,
-                        onEnable: handleEnable,
-                        onDisable: handleDisable,
-                        onAddBreakpoint: handleAddBreakpoint,
-                        onRemoveBreakpoint: handleRemoveBreakpoint,
-                        onAddGuardrail: handleAddGuardrail,
-                        onAddResource: handleAddResourceRequest,
-                        onRemoveResource: handleRemoveResource,
-                        onSelectResource: handleSelectResource,
-                        enableTimelinePlayer: 'view' === mode && enableTimelinePlayer,
-                        enableMemory: enableMemory,
-                        enableStickyNotes: enableStickyNotes,
-                        enableInstructions: enableInstructions,
-                        stickyNotes: stickyNotes,
-                        onAddStickyNote: handleAddStickyNote,
-                        onUpdateStickyNote: handleUpdateStickyNote,
-                        onRemoveStickyNote: handleRemoveStickyNote,
-                        healthScore: healthScore,
-                        onHealthScoreClick: onHealthScoreClick,
-                        instructions: instructions
-                    })
-                }),
-                renderSidebar()
-            ]
-        })
-    });
-};
-const DesignModePlayground = ()=>{
-    const [hasResources, setHasResources] = useState(true);
-    const [suggestionMode, setSuggestionMode] = useState('off');
-    const [enableStickyNotes, setEnableStickyNotes] = useState(true);
-    const [enableDragging, setEnableDragging] = useState(true);
-    const [hasInstructions, setHasInstructions] = useState(false);
-    const [systemPrompt, setSystemPrompt] = useState('');
-    const [userPrompt, setUserPrompt] = useState('');
-    const [resources, setResources] = useState(sampleResources);
-    const [suggestionGroup, setSuggestionGroup] = useState(null);
-    const [pendingStandalonePlaceholderId, setPendingStandalonePlaceholderId] = useState(null);
-    const [openModalType, setOpenModalType] = useState(null);
-    const [placeholderBeingConfigured, setPlaceholderBeingConfigured] = useState(null);
-    const [stickyNotes, setStickyNotes] = useState([]);
-    const [agentNodePosition, setAgentNodePosition] = useState(void 0);
-    const [resourceNodePositions, setResourceNodePositions] = useState({});
-    const [zoomLevel, setZoomLevel] = useState(1);
-    const [selectedResourceId, setSelectedResourceId] = useState(null);
-    const instructions = hasInstructions ? {
-        system: systemPrompt || void 0,
-        user: userPrompt || void 0
-    } : void 0;
-    const stateKey = `${hasResources}-${suggestionMode}-${enableStickyNotes}-${enableDragging}-${hasInstructions}`;
-    const handleSelectResource = useCallback((resourceId)=>{
-        setSelectedResourceId(resourceId);
-        if ('pane' === resourceId && pendingStandalonePlaceholderId && suggestionGroup) {
-            const pendingSuggestion = suggestionGroup.suggestions.find((s)=>s.id === pendingStandalonePlaceholderId);
-            if (pendingSuggestion?.isStandalone) {
-                const remaining = suggestionGroup.suggestions.filter((s)=>s.id !== pendingStandalonePlaceholderId);
-                setSuggestionGroup(remaining.length > 0 ? {
-                    ...suggestionGroup,
-                    suggestions: remaining
-                } : null);
-            }
-            setPendingStandalonePlaceholderId(null);
-            setOpenModalType(null);
-            setPlaceholderBeingConfigured(null);
-        }
-    }, [
-        pendingStandalonePlaceholderId,
-        suggestionGroup
-    ]);
-    const handleAddResourceDirect = useCallback((type)=>{
-        let newResource;
-        switch(type){
-            case 'context':
-                newResource = createSampleContext();
-                break;
-            case 'tool':
-                newResource = createSampleTool();
-                break;
-            case 'escalation':
-                newResource = createSampleEscalation();
-                break;
-            case 'mcp':
-                newResource = createSampleMcp();
-                break;
-            case 'memorySpace':
-                newResource = createSampleMemorySpace();
-                break;
-            case 'a2a':
-                newResource = createSampleA2a();
-                break;
-            default:
-                return;
-        }
-        setResources((prev)=>[
-                ...prev,
-                newResource
-            ]);
-        setSelectedResourceId(newResource.id);
-    }, []);
-    const handleRemoveResource = useCallback((resource)=>{
-        setResources((prev)=>prev.filter((r)=>r.id !== resource.id));
-        if (selectedResourceId === resource.id) setSelectedResourceId(null);
-    }, [
-        selectedResourceId
-    ]);
-    const handleEnable = useCallback((resourceId, resource)=>{
-        setResources((prev)=>prev.map((r)=>({
-                    ...r,
-                    ...`${resource.parentNodeId}=>${r.name}:${r.id}` === resourceId && {
-                        isDisabled: false
-                    }
-                })));
-    }, []);
-    const handleDisable = useCallback((resourceId, resource)=>{
-        setResources((prev)=>prev.map((r)=>({
-                    ...r,
-                    ...`${resource.parentNodeId}=>${r.name}:${r.id}` === resourceId && {
-                        isDisabled: true
-                    }
-                })));
-    }, []);
-    const handleAddBreakpoint = useCallback((resourceId, resource)=>{
-        setResources((prev)=>prev.map((r)=>({
-                    ...r,
-                    ...`${resource.parentNodeId}=>${r.name}:${r.id}` === resourceId && {
-                        hasBreakpoint: true
-                    }
-                })));
-    }, []);
-    const handleRemoveBreakpoint = useCallback((resourceId, resource)=>{
-        setResources((prev)=>prev.map((r)=>({
-                    ...r,
-                    ...`${resource.parentNodeId}=>${r.name}:${r.id}` === resourceId && {
-                        hasBreakpoint: false
-                    }
-                })));
-    }, []);
-    const handleAddGuardrail = useCallback((resourceId, resource)=>{
-        setResources((prev)=>prev.map((r)=>({
-                    ...r,
-                    ...`${resource.parentNodeId}=>${r.name}:${r.id}` === resourceId && {
-                        hasGuardrails: true
-                    }
-                })));
-    }, []);
-    const handleRequestPlaceholder = useCallback((type, cleanedSuggestionGroup)=>{
-        if ('placeholders' !== suggestionMode) return null;
-        if ('escalation' === type) return null;
-        const placeholder = {
-            id: `placeholder-${type}-${Date.now()}`,
-            type,
-            name: `New ${type.charAt(0).toUpperCase() + type.slice(1)}`,
-            description: `Configure this ${type}...`
-        };
-        if ('tool' === type) {
-            placeholder.iconUrl = '';
-            placeholder.projectType = ProjectType.Internal;
-        } else if ('mcp' === type) {
-            placeholder.slug = '';
-            placeholder.folderPath = '';
-            placeholder.availableTools = [];
-        }
-        const updated = createPlaceholderSuggestion(placeholder, cleanedSuggestionGroup, {
-            isStandalone: true
-        });
-        setSuggestionGroup(updated);
-        const newSuggestion = updated.suggestions[updated.suggestions.length - 1];
-        if (newSuggestion) setPendingStandalonePlaceholderId(newSuggestion.id);
-        setOpenModalType(type);
-        return placeholder;
-    }, [
-        suggestionMode
-    ]);
-    const handlePlaceholderNodeClick = useCallback((resourceType, placeholderData)=>{
-        setOpenModalType(resourceType);
-        setPlaceholderBeingConfigured(placeholderData);
-    }, []);
-    const handleActOnSuggestion = useCallback((suggestionId, action)=>{
-        if (!suggestionGroup) return;
-        const suggestion = suggestionGroup.suggestions.find((s)=>s.id === suggestionId);
-        const remaining = suggestionGroup.suggestions.filter((s)=>s.id !== suggestionId);
-        if (suggestion?.isStandalone && suggestionId === pendingStandalonePlaceholderId) {
-            setPendingStandalonePlaceholderId(null);
-            setOpenModalType(null);
-            setPlaceholderBeingConfigured(null);
-        }
-        if ('reject' === action) return void setSuggestionGroup(remaining.length > 0 ? {
-            ...suggestionGroup,
-            suggestions: remaining
-        } : null);
-        if (suggestion) {
-            if ('add' === suggestion.type && suggestion.resource) setResources((prev)=>[
-                    ...prev,
-                    suggestion.resource
-                ]);
-            else if ('update' === suggestion.type && suggestion.resourceId && suggestion.updatedFields) setResources((prev)=>prev.map((r)=>r.id === suggestion.resourceId ? {
-                        ...r,
-                        ...suggestion.updatedFields
-                    } : r));
-            else if ('delete' === suggestion.type && suggestion.resourceIdToDelete) setResources((prev)=>prev.filter((r)=>r.id !== suggestion.resourceIdToDelete));
-        }
-        setSuggestionGroup(remaining.length > 0 ? {
-            ...suggestionGroup,
-            suggestions: remaining
-        } : null);
-    }, [
-        suggestionGroup,
-        pendingStandalonePlaceholderId
-    ]);
-    const handleActOnSuggestionGroup = useCallback((_groupId, action)=>{
-        if (!suggestionGroup) return;
-        const nonStandalone = suggestionGroup.suggestions.filter((s)=>!s.isStandalone);
-        const standalone = suggestionGroup.suggestions.filter((s)=>s.isStandalone);
-        if ('reject' === action) return void setSuggestionGroup(standalone.length > 0 ? {
-            ...suggestionGroup,
-            suggestions: standalone
-        } : null);
-        setResources((prev)=>{
-            let updated = [
-                ...prev
-            ];
-            nonStandalone.forEach((s)=>{
-                if ('add' === s.type && s.resource) updated.push(s.resource);
-                else if ('update' === s.type && s.resourceId && s.updatedFields) updated = updated.map((r)=>r.id === s.resourceId ? {
-                        ...r,
-                        ...s.updatedFields
-                    } : r);
-                else if ('delete' === s.type && s.resourceIdToDelete) updated = updated.filter((r)=>r.id !== s.resourceIdToDelete);
-            });
-            return updated;
-        });
-        setSuggestionGroup(standalone.length > 0 ? {
-            ...suggestionGroup,
-            suggestions: standalone
-        } : null);
-    }, [
-        suggestionGroup
-    ]);
-    const handleConfirmModal = useCallback(()=>{
-        if (pendingStandalonePlaceholderId) handleActOnSuggestion(pendingStandalonePlaceholderId, 'accept');
-        setOpenModalType(null);
-        setPlaceholderBeingConfigured(null);
-    }, [
-        pendingStandalonePlaceholderId,
-        handleActOnSuggestion
-    ]);
-    const handleCancelModal = useCallback(()=>{
-        if (pendingStandalonePlaceholderId) handleActOnSuggestion(pendingStandalonePlaceholderId, 'reject');
-        setOpenModalType(null);
-        setPlaceholderBeingConfigured(null);
-    }, [
-        pendingStandalonePlaceholderId,
-        handleActOnSuggestion
-    ]);
-    const createInsertSuggestions = useCallback(()=>{
-        const timestamp = Date.now();
-        setSuggestionGroup({
-            id: `group-${timestamp}`,
-            suggestions: [
-                {
-                    id: `add-1-${timestamp}`,
-                    type: 'add',
-                    resource: {
-                        id: `tool-${timestamp}`,
-                        type: 'tool',
-                        name: 'Email Service',
-                        description: 'Send emails',
-                        iconUrl: '',
-                        hasBreakpoint: false,
-                        hasGuardrails: false,
-                        projectType: ProjectType.Internal
-                    }
-                },
-                {
-                    id: `add-2-${timestamp}`,
-                    type: 'add',
-                    resource: {
-                        id: `ctx-${timestamp}`,
-                        type: 'context',
-                        name: 'User Preferences',
-                        description: 'User prefs',
-                        hasBreakpoint: false
-                    }
-                }
-            ],
-            metadata: {
-                title: 'Add Suggestions'
-            }
-        });
-    }, []);
-    const createDeleteSuggestions = useCallback(()=>{
-        const timestamp = Date.now();
-        const toDelete = resources.slice(0, 2);
-        setSuggestionGroup({
-            id: `group-${timestamp}`,
-            suggestions: toDelete.map((r, i)=>({
-                    id: `del-${i}-${timestamp}`,
-                    type: 'delete',
-                    resourceIdToDelete: r.id
-                })),
-            metadata: {
-                title: 'Delete Suggestions'
-            }
-        });
-    }, [
-        resources
-    ]);
-    const createUpdateSuggestions = useCallback(()=>{
-        const timestamp = Date.now();
-        const toUpdate = resources.slice(0, 2);
-        setSuggestionGroup({
-            id: `group-${timestamp}`,
-            suggestions: toUpdate.map((r, i)=>({
-                    id: `upd-${i}-${timestamp}`,
-                    type: 'update',
-                    resourceId: r.id,
-                    updatedFields: {
-                        name: `${r.name} (Updated)`
-                    }
-                })),
-            metadata: {
-                title: 'Update Suggestions'
-            }
-        });
-    }, [
-        resources
-    ]);
-    const createMixedSuggestions = useCallback(()=>{
-        const timestamp = Date.now();
-        const existing = resources.slice(0, 2);
-        setSuggestionGroup({
-            id: `group-${timestamp}`,
-            suggestions: [
-                {
-                    id: `add-${timestamp}`,
-                    type: 'add',
-                    resource: {
-                        id: `tool-${timestamp}`,
-                        type: 'tool',
-                        name: 'New Tool',
-                        description: 'Added tool',
-                        iconUrl: '',
-                        hasBreakpoint: false,
-                        hasGuardrails: false,
-                        projectType: ProjectType.Internal
-                    }
-                },
-                ...existing[0] ? [
-                    {
-                        id: `upd-${timestamp}`,
-                        type: 'update',
-                        resourceId: existing[0].id,
-                        updatedFields: {
-                            name: `${existing[0].name} (Updated)`
-                        }
-                    }
-                ] : [],
-                ...existing[1] ? [
-                    {
-                        id: `del-${timestamp}`,
-                        type: 'delete',
-                        resourceIdToDelete: existing[1].id
-                    }
-                ] : []
-            ],
-            metadata: {
-                title: 'Mixed Suggestions'
-            }
-        });
-    }, [
-        resources
-    ]);
-    const handleAddStickyNote = useCallback((data)=>{
-        setStickyNotes((prev)=>[
-                ...prev,
-                data
-            ]);
-    }, []);
-    const handleUpdateStickyNote = useCallback((id, updates)=>{
-        setStickyNotes((prev)=>prev.map((n)=>n.id === id ? {
-                    ...n,
-                    ...updates
-                } : n));
-    }, []);
-    const handleRemoveStickyNote = useCallback((id)=>{
-        setStickyNotes((prev)=>prev.filter((n)=>n.id !== id));
-    }, []);
-    const handleOrganize = useCallback(()=>{
-        setAgentNodePosition(void 0);
-        setResourceNodePositions({});
-    }, []);
-    const handleToggleResources = useCallback((value)=>{
-        setHasResources(value);
-        setResources(value ? sampleResources : []);
-        setSuggestionGroup(null);
-        setAgentNodePosition(void 0);
-        setResourceNodePositions({});
-    }, []);
-    const handleToggleSuggestionMode = useCallback((mode)=>{
-        setSuggestionMode(mode);
-        setSuggestionGroup(null);
-        setPendingStandalonePlaceholderId(null);
-        setOpenModalType(null);
-    }, []);
-    const renderSidebar = ()=>/*#__PURE__*/ jsxs(Column, {
-            w: 280,
-            p: 16,
-            gap: 12,
-            style: {
-                backgroundColor: 'var(--uix-canvas-background-secondary)',
-                borderLeft: '1px solid var(--uix-canvas-border-de-emp)',
-                overflowY: 'auto',
-                color: 'var(--uix-canvas-foreground)'
-            },
-            children: [
-                /*#__PURE__*/ jsx("h3", {
-                    style: {
-                        margin: 0
-                    },
-                    children: "Current State"
-                }),
-                /*#__PURE__*/ jsxs("div", {
-                    children: [
-                        /*#__PURE__*/ jsx("strong", {
-                            children: "Selected:"
-                        }),
-                        " ",
-                        selectedResourceId || 'None'
-                    ]
-                }),
-                /*#__PURE__*/ jsxs("div", {
-                    children: [
-                        /*#__PURE__*/ jsx("strong", {
-                            children: "Resources:"
-                        }),
-                        " ",
-                        resources.length
-                    ]
-                }),
-                enableStickyNotes && /*#__PURE__*/ jsxs("div", {
-                    children: [
-                        /*#__PURE__*/ jsx("strong", {
-                            children: "Sticky Notes:"
-                        }),
-                        " ",
-                        stickyNotes.length
-                    ]
-                }),
-                suggestionGroup && /*#__PURE__*/ jsxs("div", {
-                    style: {
-                        padding: '12px',
-                        backgroundColor: 'var(--uix-canvas-background)',
-                        borderRadius: '4px',
-                        border: '1px solid var(--uix-canvas-border-de-emp)'
-                    },
-                    children: [
-                        /*#__PURE__*/ jsx("div", {
-                            style: {
-                                fontWeight: 'bold',
-                                marginBottom: '8px'
-                            },
-                            children: "Active Suggestions"
-                        }),
-                        /*#__PURE__*/ jsxs("div", {
-                            style: {
-                                fontSize: '0.875rem'
-                            },
-                            children: [
-                                /*#__PURE__*/ jsxs("div", {
-                                    children: [
-                                        /*#__PURE__*/ jsx("strong", {
-                                            children: "Count:"
-                                        }),
-                                        " ",
-                                        suggestionGroup.suggestions.length
-                                    ]
-                                }),
-                                /*#__PURE__*/ jsxs("div", {
-                                    children: [
-                                        /*#__PURE__*/ jsx("strong", {
-                                            children: "Type:"
-                                        }),
-                                        " ",
-                                        suggestionMode
-                                    ]
-                                })
-                            ]
-                        })
-                    ]
-                }),
-                enableDragging && /*#__PURE__*/ jsxs("div", {
-                    style: {
-                        padding: '12px',
-                        backgroundColor: 'var(--uix-canvas-background)',
-                        borderRadius: '4px',
-                        border: '1px solid var(--uix-canvas-border-de-emp)'
-                    },
-                    children: [
-                        /*#__PURE__*/ jsx("div", {
-                            style: {
-                                fontWeight: 'bold',
-                                marginBottom: '8px'
-                            },
-                            children: "Position Tracking"
-                        }),
-                        /*#__PURE__*/ jsxs("div", {
-                            style: {
-                                fontSize: '0.875rem',
-                                fontFamily: 'monospace'
-                            },
-                            children: [
-                                /*#__PURE__*/ jsxs("div", {
-                                    children: [
-                                        /*#__PURE__*/ jsx("strong", {
-                                            children: "Zoom:"
-                                        }),
-                                        " ",
-                                        (100 * zoomLevel).toFixed(0),
-                                        "%"
-                                    ]
-                                }),
-                                agentNodePosition && /*#__PURE__*/ jsxs(Fragment, {
-                                    children: [
-                                        /*#__PURE__*/ jsx("div", {
-                                            style: {
-                                                marginTop: '8px',
-                                                fontWeight: 'bold'
-                                            },
-                                            children: "Agent Node:"
-                                        }),
-                                        /*#__PURE__*/ jsxs("div", {
-                                            children: [
-                                                "X: ",
-                                                agentNodePosition.x.toFixed(2)
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ jsxs("div", {
-                                            children: [
-                                                "Y: ",
-                                                agentNodePosition.y.toFixed(2)
-                                            ]
-                                        })
-                                    ]
-                                }),
-                                Object.keys(resourceNodePositions).length > 0 && /*#__PURE__*/ jsxs(Fragment, {
-                                    children: [
-                                        /*#__PURE__*/ jsx("div", {
-                                            style: {
-                                                marginTop: '8px',
-                                                fontWeight: 'bold'
-                                            },
-                                            children: "Resource Positions:"
-                                        }),
-                                        Object.entries(resourceNodePositions).map(([id, pos])=>/*#__PURE__*/ jsxs("div", {
-                                                style: {
-                                                    marginLeft: '8px',
-                                                    fontSize: '0.75rem'
-                                                },
-                                                children: [
-                                                    id.split('=>').pop()?.split(':')[0],
-                                                    ": (",
-                                                    pos.x.toFixed(0),
-                                                    ", ",
-                                                    pos.y.toFixed(0),
-                                                    ")"
-                                                ]
-                                            }, id))
-                                    ]
-                                })
-                            ]
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsxs("div", {
-                    style: {
-                        fontSize: '0.875rem',
-                        color: 'var(--uix-canvas-foreground-de-emp)',
-                        marginTop: '8px'
-                    },
-                    children: [
-                        /*#__PURE__*/ jsx("p", {
-                            style: {
-                                margin: '0 0 8px 0'
-                            },
-                            children: "Click the + buttons on the agent node to add:"
-                        }),
-                        /*#__PURE__*/ jsxs("ul", {
-                            style: {
-                                margin: 0,
-                                paddingLeft: '20px'
-                            },
-                            children: [
-                                /*#__PURE__*/ jsx("li", {
-                                    children: "Memory (top)"
-                                }),
-                                /*#__PURE__*/ jsx("li", {
-                                    children: "Context (bottom-left)"
-                                }),
-                                /*#__PURE__*/ jsx("li", {
-                                    children: "Escalations (bottom-center)"
-                                }),
-                                /*#__PURE__*/ jsx("li", {
-                                    children: "Tools & MCPs (bottom-right)"
-                                })
-                            ]
-                        }),
-                        enableStickyNotes && /*#__PURE__*/ jsx("p", {
-                            style: {
-                                marginTop: '12px',
-                                marginBottom: 0
-                            },
-                            children: "Use the sticky note button at the bottom to add notes. Press Delete to remove."
-                        }),
-                        enableDragging && /*#__PURE__*/ jsx("p", {
-                            style: {
-                                marginTop: '12px',
-                                marginBottom: 0
-                            },
-                            children: "Drag nodes to reposition. Use Organize button to reset positions."
-                        }),
-                        'placeholders' === suggestionMode && /*#__PURE__*/ jsx("p", {
-                            style: {
-                                marginTop: '12px',
-                                marginBottom: 0
-                            },
-                            children: "Placeholders appear when clicking +. Click them to configure, or click away to cancel."
-                        }),
-                        'autopilot' === suggestionMode && /*#__PURE__*/ jsx("p", {
-                            style: {
-                                marginTop: '12px',
-                                marginBottom: 0
-                            },
-                            children: "Use suggestion buttons in controls to create batches. Accept/Reject individually or all at once."
-                        })
-                    ]
-                })
-            ]
-        });
-    const renderControlPanel = ()=>/*#__PURE__*/ jsx(StoryInfoPanel, {
-            title: "Design Mode Playground",
-            collapsible: true,
-            defaultCollapsed: false,
-            position: "top-right",
-            children: /*#__PURE__*/ jsxs(Column, {
-                mt: 12,
-                gap: 12,
-                children: [
-                    /*#__PURE__*/ jsxs(Column, {
-                        gap: 4,
-                        children: [
-                            /*#__PURE__*/ jsx(ApTypography, {
-                                variant: FontVariantToken.fontSizeS,
-                                style: {
-                                    fontWeight: 600
-                                },
-                                children: "Resources:"
-                            }),
-                            /*#__PURE__*/ jsxs(Row, {
-                                gap: 4,
-                                children: [
-                                    /*#__PURE__*/ jsx(ApButton, {
-                                        size: "small",
-                                        variant: hasResources ? 'primary' : 'secondary',
-                                        label: "With",
-                                        onClick: ()=>handleToggleResources(true)
-                                    }),
-                                    /*#__PURE__*/ jsx(ApButton, {
-                                        size: "small",
-                                        variant: hasResources ? 'secondary' : 'primary',
-                                        label: "Empty",
-                                        onClick: ()=>handleToggleResources(false)
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsxs(Column, {
-                        gap: 4,
-                        children: [
-                            /*#__PURE__*/ jsx(ApTypography, {
-                                variant: FontVariantToken.fontSizeS,
-                                style: {
-                                    fontWeight: 600
-                                },
-                                children: "Suggestions:"
-                            }),
-                            /*#__PURE__*/ jsxs(Row, {
-                                gap: 4,
-                                style: {
-                                    flexWrap: 'wrap'
-                                },
-                                children: [
-                                    /*#__PURE__*/ jsx(ApButton, {
-                                        size: "small",
-                                        variant: 'off' === suggestionMode ? 'primary' : 'secondary',
-                                        label: "Off",
-                                        onClick: ()=>handleToggleSuggestionMode('off')
-                                    }),
-                                    /*#__PURE__*/ jsx(ApButton, {
-                                        size: "small",
-                                        variant: 'placeholders' === suggestionMode ? 'primary' : 'secondary',
-                                        label: "Placeholders",
-                                        onClick: ()=>handleToggleSuggestionMode('placeholders')
-                                    }),
-                                    /*#__PURE__*/ jsx(ApButton, {
-                                        size: "small",
-                                        variant: 'autopilot' === suggestionMode ? 'primary' : 'secondary',
-                                        label: "Autopilot",
-                                        onClick: ()=>handleToggleSuggestionMode('autopilot')
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    'autopilot' === suggestionMode && /*#__PURE__*/ jsxs(Column, {
-                        gap: 4,
-                        children: [
-                            /*#__PURE__*/ jsx(ApTypography, {
-                                variant: FontVariantToken.fontSizeS,
-                                style: {
-                                    color: 'var(--uix-canvas-foreground-de-emp)'
-                                },
-                                children: "Create suggestions:"
-                            }),
-                            /*#__PURE__*/ jsxs(Row, {
-                                gap: 4,
-                                style: {
-                                    flexWrap: 'wrap'
-                                },
-                                children: [
-                                    /*#__PURE__*/ jsx(ApButton, {
-                                        size: "small",
-                                        variant: "secondary",
-                                        label: "Inserts",
-                                        onClick: createInsertSuggestions
-                                    }),
-                                    /*#__PURE__*/ jsx(ApButton, {
-                                        size: "small",
-                                        variant: "secondary",
-                                        label: "Deletes",
-                                        onClick: createDeleteSuggestions
-                                    }),
-                                    /*#__PURE__*/ jsx(ApButton, {
-                                        size: "small",
-                                        variant: "secondary",
-                                        label: "Updates",
-                                        onClick: createUpdateSuggestions
-                                    }),
-                                    /*#__PURE__*/ jsx(ApButton, {
-                                        size: "small",
-                                        variant: "secondary",
-                                        label: "Mixed",
-                                        onClick: createMixedSuggestions
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsxs(Column, {
-                        gap: 4,
-                        children: [
-                            /*#__PURE__*/ jsx(ApTypography, {
-                                variant: FontVariantToken.fontSizeS,
-                                style: {
-                                    fontWeight: 600
-                                },
-                                children: "Sticky Notes:"
-                            }),
-                            /*#__PURE__*/ jsxs(Row, {
-                                gap: 4,
-                                children: [
-                                    /*#__PURE__*/ jsx(ApButton, {
-                                        size: "small",
-                                        variant: enableStickyNotes ? 'primary' : 'secondary',
-                                        label: "On",
-                                        onClick: ()=>setEnableStickyNotes(true)
-                                    }),
-                                    /*#__PURE__*/ jsx(ApButton, {
-                                        size: "small",
-                                        variant: enableStickyNotes ? 'secondary' : 'primary',
-                                        label: "Off",
-                                        onClick: ()=>setEnableStickyNotes(false)
-                                    })
-                                ]
-                            }),
-                            enableStickyNotes && /*#__PURE__*/ jsxs(Row, {
-                                gap: 4,
-                                children: [
-                                    /*#__PURE__*/ jsx(ApButton, {
-                                        size: "small",
-                                        variant: "secondary",
-                                        label: "Load Samples",
-                                        onClick: ()=>setStickyNotes(sampleStickyNotes)
-                                    }),
-                                    /*#__PURE__*/ jsx(ApButton, {
-                                        size: "small",
-                                        variant: "secondary",
-                                        label: "Clear",
-                                        onClick: ()=>setStickyNotes([])
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsxs(Column, {
-                        gap: 4,
-                        children: [
-                            /*#__PURE__*/ jsx(ApTypography, {
-                                variant: FontVariantToken.fontSizeS,
-                                style: {
-                                    fontWeight: 600
-                                },
-                                children: "Dragging:"
-                            }),
-                            /*#__PURE__*/ jsxs(Row, {
-                                gap: 4,
-                                children: [
-                                    /*#__PURE__*/ jsx(ApButton, {
-                                        size: "small",
-                                        variant: enableDragging ? 'primary' : 'secondary',
-                                        label: "On",
-                                        onClick: ()=>setEnableDragging(true)
-                                    }),
-                                    /*#__PURE__*/ jsx(ApButton, {
-                                        size: "small",
-                                        variant: enableDragging ? 'secondary' : 'primary',
-                                        label: "Off",
-                                        onClick: ()=>setEnableDragging(false)
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsxs(Column, {
-                        gap: 4,
-                        children: [
-                            /*#__PURE__*/ jsx(ApTypography, {
-                                variant: FontVariantToken.fontSizeS,
-                                style: {
-                                    fontWeight: 600
-                                },
-                                children: "Instructions:"
-                            }),
-                            /*#__PURE__*/ jsxs(Row, {
-                                gap: 4,
-                                children: [
-                                    /*#__PURE__*/ jsx(ApButton, {
-                                        size: "small",
-                                        variant: hasInstructions ? 'primary' : 'secondary',
-                                        label: "With",
-                                        onClick: ()=>setHasInstructions(true)
-                                    }),
-                                    /*#__PURE__*/ jsx(ApButton, {
-                                        size: "small",
-                                        variant: hasInstructions ? 'secondary' : 'primary',
-                                        label: "Without",
-                                        onClick: ()=>setHasInstructions(false)
-                                    })
-                                ]
-                            }),
-                            hasInstructions && /*#__PURE__*/ jsxs(Column, {
-                                gap: 8,
-                                style: {
-                                    marginTop: 8
-                                },
-                                children: [
-                                    /*#__PURE__*/ jsxs(Column, {
-                                        gap: 2,
-                                        children: [
-                                            /*#__PURE__*/ jsx(ApTypography, {
-                                                variant: FontVariantToken.fontSizeXs,
-                                                style: {
-                                                    color: 'var(--uix-canvas-foreground-de-emp)'
-                                                },
-                                                children: "System prompt:"
-                                            }),
-                                            /*#__PURE__*/ jsx("textarea", {
-                                                value: systemPrompt,
-                                                onChange: (e)=>setSystemPrompt(e.target.value),
-                                                placeholder: "Enter system prompt...",
-                                                style: {
-                                                    width: '100%',
-                                                    minHeight: 60,
-                                                    padding: 8,
-                                                    fontSize: 12,
-                                                    borderRadius: 4,
-                                                    border: '1px solid var(--uix-canvas-border-de-emp)',
-                                                    backgroundColor: 'var(--uix-canvas-background)',
-                                                    color: 'var(--uix-canvas-foreground)',
-                                                    resize: 'vertical',
-                                                    fontFamily: 'inherit'
-                                                }
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ jsxs(Column, {
-                                        gap: 2,
-                                        children: [
-                                            /*#__PURE__*/ jsx(ApTypography, {
-                                                variant: FontVariantToken.fontSizeXs,
-                                                style: {
-                                                    color: 'var(--uix-canvas-foreground-de-emp)'
-                                                },
-                                                children: "User prompt:"
-                                            }),
-                                            /*#__PURE__*/ jsx("textarea", {
-                                                value: userPrompt,
-                                                onChange: (e)=>setUserPrompt(e.target.value),
-                                                placeholder: "Enter user prompt...",
-                                                style: {
-                                                    width: '100%',
-                                                    minHeight: 60,
-                                                    padding: 8,
-                                                    fontSize: 12,
-                                                    borderRadius: 4,
-                                                    border: '1px solid var(--uix-canvas-border-de-emp)',
-                                                    backgroundColor: 'var(--uix-canvas-background)',
-                                                    color: 'var(--uix-canvas-foreground)',
-                                                    resize: 'vertical',
-                                                    fontFamily: 'inherit'
-                                                }
-                                            })
-                                        ]
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsx(Column, {
-                        gap: 2,
-                        style: {
-                            borderTop: '1px solid var(--uix-canvas-border-de-emp)',
-                            paddingTop: 8
-                        },
-                        children: /*#__PURE__*/ jsxs(ApTypography, {
-                            variant: FontVariantToken.fontSizeS,
-                            style: {
-                                color: 'var(--uix-canvas-foreground-de-emp)'
-                            },
-                            children: [
-                                "Resources: ",
-                                resources.length,
-                                " | Notes: ",
-                                stickyNotes.length,
-                                " | Zoom:",
-                                ' ',
-                                (100 * zoomLevel).toFixed(0),
-                                "%"
-                            ]
-                        })
-                    })
-                ]
-            })
-        });
-    return /*#__PURE__*/ jsx(ReactFlowProvider, {
-        children: /*#__PURE__*/ jsxs(Row, {
-            w: "100%",
-            h: "100%",
-            style: {
-                position: 'relative'
-            },
-            children: [
-                /*#__PURE__*/ jsxs("div", {
-                    style: {
-                        flex: 1,
-                        position: 'relative'
-                    },
-                    children: [
-                        /*#__PURE__*/ jsx(AgentFlow, {
-                            allowDragging: enableDragging,
-                            agentNodePosition: enableDragging ? agentNodePosition : void 0,
-                            onAgentNodePositionChange: setAgentNodePosition,
-                            resourceNodePositions: enableDragging ? resourceNodePositions : void 0,
-                            onResourceNodePositionChange: (id, pos)=>setResourceNodePositions((prev)=>({
-                                        ...prev,
-                                        [id]: pos
-                                    })),
-                            zoomLevel: zoomLevel,
-                            onZoomLevelChange: setZoomLevel,
-                            definition: sampleAgentDefinition,
-                            spans: [],
-                            name: "Test Agent",
-                            description: "Test Description",
-                            mode: "design",
-                            resources: resources,
-                            onEnable: handleEnable,
-                            onDisable: handleDisable,
-                            onAddBreakpoint: handleAddBreakpoint,
-                            onRemoveBreakpoint: handleRemoveBreakpoint,
-                            onAddGuardrail: handleAddGuardrail,
-                            onAddResource: handleAddResourceDirect,
-                            onRemoveResource: handleRemoveResource,
-                            onSelectResource: handleSelectResource,
-                            enableTimelinePlayer: false,
-                            enableMemory: true,
-                            enableInstructions: hasInstructions,
-                            enableStickyNotes: enableStickyNotes,
-                            stickyNotes: stickyNotes,
-                            onAddStickyNote: handleAddStickyNote,
-                            onUpdateStickyNote: handleUpdateStickyNote,
-                            onRemoveStickyNote: handleRemoveStickyNote,
-                            onOrganize: handleOrganize,
-                            onRequestResourcePlaceholder: 'placeholders' === suggestionMode ? handleRequestPlaceholder : void 0,
-                            onPlaceholderNodeClick: 'placeholders' === suggestionMode ? handlePlaceholderNodeClick : void 0,
-                            suggestionGroup: suggestionGroup,
-                            onActOnSuggestion: handleActOnSuggestion,
-                            onActOnSuggestionGroup: handleActOnSuggestionGroup,
-                            instructions: instructions
-                        }),
-                        renderControlPanel(),
-                        openModalType && /*#__PURE__*/ jsxs(Fragment, {
-                            children: [
-                                /*#__PURE__*/ jsx("div", {
-                                    style: {
-                                        position: 'absolute',
-                                        top: 0,
-                                        left: 0,
-                                        right: 0,
-                                        bottom: 0,
-                                        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-                                        zIndex: 999
-                                    },
-                                    onClick: handleCancelModal
-                                }),
-                                /*#__PURE__*/ jsxs("div", {
-                                    style: {
-                                        position: 'absolute',
-                                        top: '50%',
-                                        left: '50%',
-                                        transform: 'translate(-50%, -50%)',
-                                        backgroundColor: 'var(--uix-canvas-background-raised)',
-                                        border: '1px solid var(--uix-canvas-border)',
-                                        borderRadius: 8,
-                                        padding: 24,
-                                        minWidth: 400,
-                                        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-                                        zIndex: 1000
-                                    },
-                                    children: [
-                                        /*#__PURE__*/ jsxs("h3", {
-                                            style: {
-                                                margin: '0 0 16px 0',
-                                                color: 'var(--uix-canvas-foreground)'
-                                            },
-                                            children: [
-                                                "Configure ",
-                                                openModalType.charAt(0).toUpperCase() + openModalType.slice(1)
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ jsxs("p", {
-                                            style: {
-                                                margin: '0 0 24px 0',
-                                                color: 'var(--uix-canvas-foreground-de-emp)',
-                                                fontSize: '0.875rem'
-                                            },
-                                            children: [
-                                                "This is a simulated configuration modal.",
-                                                placeholderBeingConfigured && /*#__PURE__*/ jsxs(Fragment, {
-                                                    children: [
-                                                        /*#__PURE__*/ jsx("br", {}),
-                                                        /*#__PURE__*/ jsx("br", {}),
-                                                        "Placeholder: ",
-                                                        /*#__PURE__*/ jsx("strong", {
-                                                            children: placeholderBeingConfigured.name
-                                                        })
-                                                    ]
-                                                })
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ jsxs(Row, {
-                                            gap: 8,
-                                            style: {
-                                                justifyContent: 'flex-end'
-                                            },
-                                            children: [
-                                                /*#__PURE__*/ jsx(ApButton, {
-                                                    size: "small",
-                                                    variant: "secondary",
-                                                    label: "Cancel",
-                                                    onClick: handleCancelModal
-                                                }),
-                                                /*#__PURE__*/ jsx(ApButton, {
-                                                    size: "small",
-                                                    variant: "primary",
-                                                    label: "Confirm",
-                                                    onClick: handleConfirmModal
-                                                })
-                                            ]
-                                        })
-                                    ]
-                                })
-                            ]
-                        })
-                    ]
-                }),
-                renderSidebar()
-            ]
-        })
-    }, stateKey);
-};
-const DesignMode = {
-    args: {
-        mode: 'design'
-    },
-    render: ()=>/*#__PURE__*/ jsx(DesignModePlayground, {}),
-    parameters: {
-        docs: {
-            description: {
-                story: "Comprehensive design mode playground. Toggle any combination of features:\n\n• **Resources**: With sample resources or empty canvas\n• **Suggestions**: Off, Placeholders (click + buttons), or Autopilot (batch suggestions)\n• **Sticky Notes**: Enable/disable with sample loading\n• **Dragging**: Enable/disable position control\n• **Instructions**: Toggle instruction prompts (system/user) on the agent node\n• **Hover Preview**: Hover over the agent node for 0.5s to see settings preview\n\nTest features in isolation or combine them to verify interactions."
-            }
-        }
-    }
-};
-const ViewModeWrapper = ()=>{
-    const [hasTimelinePlayer, setHasTimelinePlayer] = useState(false);
-    const [hasInstructions, setHasInstructions] = useState(true);
-    const instructions = hasInstructions ? {
-        system: 'You are a helpful assistant that helps users with their tasks.',
-        user: 'Please help me complete my work efficiently.'
-    } : void 0;
-    const renderControlPanel = ()=>/*#__PURE__*/ jsx(StoryInfoPanel, {
-            title: "View Mode Controls",
-            children: /*#__PURE__*/ jsxs(Column, {
-                mt: 12,
-                gap: 12,
-                children: [
-                    /*#__PURE__*/ jsxs(Column, {
-                        gap: 4,
-                        children: [
-                            /*#__PURE__*/ jsx(ApTypography, {
-                                variant: FontVariantToken.fontSizeS,
-                                style: {
-                                    fontWeight: 600
-                                },
-                                children: "Timeline player:"
-                            }),
-                            /*#__PURE__*/ jsxs(Row, {
-                                gap: 8,
-                                children: [
-                                    /*#__PURE__*/ jsx(ApButton, {
-                                        size: "small",
-                                        variant: hasTimelinePlayer ? 'secondary' : 'primary',
-                                        label: "Off",
-                                        onClick: ()=>setHasTimelinePlayer(false)
-                                    }),
-                                    /*#__PURE__*/ jsx(ApButton, {
-                                        size: "small",
-                                        variant: hasTimelinePlayer ? 'primary' : 'secondary',
-                                        label: "With Spans",
-                                        onClick: ()=>setHasTimelinePlayer(true)
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsxs(Column, {
-                        gap: 4,
-                        children: [
-                            /*#__PURE__*/ jsx(ApTypography, {
-                                variant: FontVariantToken.fontSizeS,
-                                style: {
-                                    fontWeight: 600
-                                },
-                                children: "Instructions:"
-                            }),
-                            /*#__PURE__*/ jsxs(Row, {
-                                gap: 8,
-                                children: [
-                                    /*#__PURE__*/ jsx(ApButton, {
-                                        size: "small",
-                                        variant: hasInstructions ? 'primary' : 'secondary',
-                                        label: "With",
-                                        onClick: ()=>setHasInstructions(true)
-                                    }),
-                                    /*#__PURE__*/ jsx(ApButton, {
-                                        size: "small",
-                                        variant: hasInstructions ? 'secondary' : 'primary',
-                                        label: "Without",
-                                        onClick: ()=>setHasInstructions(false)
-                                    })
-                                ]
-                            })
-                        ]
-                    })
-                ]
-            })
-        });
-    return /*#__PURE__*/ jsxs(ReactFlowProvider, {
-        children: [
-            /*#__PURE__*/ jsx(AgentFlowWrapper, {
-                mode: "view",
-                initialResources: sampleResources,
-                activeResourceIds: [],
-                spans: hasTimelinePlayer ? sampleSpans : [],
-                definition: sampleAgentDefinition,
-                enableTimelinePlayer: hasTimelinePlayer,
-                enableInstructions: hasInstructions,
-                instructions: instructions
-            }),
-            renderControlPanel()
-        ]
-    }, `${hasTimelinePlayer}-${hasInstructions}`);
-};
-const ViewMode = {
-    args: {
-        mode: 'view'
-    },
-    render: ()=>/*#__PURE__*/ jsx(ViewModeWrapper, {}),
-    parameters: {
-        docs: {
-            description: {
-                story: "Interactive view mode demo. Use the control panel to toggle:\n\n• **Timeline player**: Show/hide the timeline with spans\n• **Instructions**: Show/hide instruction prompts preview on the agent node\n• **Hover Preview**: Hover over the agent node for 0.5s to see full settings preview"
-            }
-        }
-    }
-};
-const HealthScoreWrapper = ({ mode, initialResources = sampleResources })=>{
-    const [healthScore, setHealthScore] = useState(95);
-    const handleHealthScoreClick = useCallback(()=>{
-        alert('Health score clicked! This would open a panel with health score details.');
-    }, []);
-    const renderControlPanel = ()=>/*#__PURE__*/ jsx(StoryInfoPanel, {
-            title: "Health Score Controls",
-            children: /*#__PURE__*/ jsxs(Column, {
-                mt: 12,
-                gap: 8,
-                children: [
-                    /*#__PURE__*/ jsx(ApTypography, {
-                        variant: FontVariantToken.fontSizeM,
-                        children: "Set health score:"
-                    }),
-                    /*#__PURE__*/ jsxs(Row, {
-                        gap: 8,
-                        style: {
-                            flexWrap: 'wrap'
-                        },
-                        children: [
-                            /*#__PURE__*/ jsx(ApButton, {
-                                size: "small",
-                                variant: void 0 === healthScore ? 'primary' : 'secondary',
-                                label: "None",
-                                onClick: ()=>setHealthScore(void 0)
-                            }),
-                            /*#__PURE__*/ jsx(ApButton, {
-                                size: "small",
-                                variant: 0 === healthScore ? 'primary' : 'secondary',
-                                label: "0",
-                                onClick: ()=>setHealthScore(0)
-                            }),
-                            /*#__PURE__*/ jsx(ApButton, {
-                                size: "small",
-                                variant: 50 === healthScore ? 'primary' : 'secondary',
-                                label: "50",
-                                onClick: ()=>setHealthScore(50)
-                            }),
-                            /*#__PURE__*/ jsx(ApButton, {
-                                size: "small",
-                                variant: 95 === healthScore ? 'primary' : 'secondary',
-                                label: "95",
-                                onClick: ()=>setHealthScore(95)
-                            }),
-                            /*#__PURE__*/ jsx(ApButton, {
-                                size: "small",
-                                variant: 100 === healthScore ? 'primary' : 'secondary',
-                                label: "100",
-                                onClick: ()=>setHealthScore(100)
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsxs(ApTypography, {
-                        variant: FontVariantToken.fontSizeS,
-                        style: {
-                            color: 'var(--uix-canvas-foreground-de-emp)'
-                        },
-                        children: [
-                            "Current: ",
-                            void 0 === healthScore ? 'Not set' : healthScore
-                        ]
-                    })
-                ]
-            })
-        });
-    return /*#__PURE__*/ jsxs(ReactFlowProvider, {
-        children: [
-            /*#__PURE__*/ jsx(AgentFlow, {
-                allowDragging: true,
-                definition: sampleAgentDefinition,
-                spans: [],
-                name: "Test Agent",
-                description: "Test Description",
-                mode: mode,
-                resources: initialResources,
-                enableMemory: true,
-                enableInstructions: true,
-                healthScore: healthScore,
-                onHealthScoreClick: handleHealthScoreClick,
-                instructions: {
-                    system: 'You are a helpful assistant.',
-                    user: 'Help me with my task.'
-                }
-            }),
-            renderControlPanel()
-        ]
-    });
-};
-const HealthScore = {
-    args: {
-        mode: 'design'
-    },
-    render: (args)=>/*#__PURE__*/ jsx(HealthScoreWrapper, {
-            mode: args.mode,
-            initialResources: sampleResources
-        }),
-    parameters: {
-        docs: {
-            description: {
-                story: 'Interactive health score demo. Use the control panel to toggle between different health score values (None, 0, 50, 95, 100). The health score badge appears below the agent name and is clickable.'
-            }
-        }
-    }
-};
-const conversationalAgentDefinition = {
-    ...sampleAgentDefinition,
-    name: 'Conversational Agent',
-    metadata: {
-        isConversational: true
-    }
-};
-const ConversationalAgentWrapper = ()=>/*#__PURE__*/ jsxs(ReactFlowProvider, {
-        children: [
-            /*#__PURE__*/ jsx(AgentFlow, {
-                allowDragging: true,
-                definition: conversationalAgentDefinition,
-                spans: [],
-                name: "Conversational Agent",
-                description: "A conversational agent that does not have a user prompt",
-                mode: "design",
-                resources: sampleResources,
-                enableMemory: true,
-                enableInstructions: true,
-                instructions: {
-                    system: 'You are a helpful conversational assistant. Engage with users naturally.'
-                }
-            }),
-            /*#__PURE__*/ jsx(StoryInfoPanel, {
-                title: "Conversational Agent",
-                position: "top-right",
-                children: /*#__PURE__*/ jsxs(Column, {
-                    mt: 12,
-                    gap: 8,
-                    children: [
-                        /*#__PURE__*/ jsxs(ApTypography, {
-                            variant: FontVariantToken.fontSizeS,
-                            children: [
-                                "This agent has ",
-                                /*#__PURE__*/ jsx("strong", {
-                                    children: "isConversational: true"
-                                }),
-                                " in its metadata."
-                            ]
-                        }),
-                        /*#__PURE__*/ jsxs(ApTypography, {
-                            variant: FontVariantToken.fontSizeS,
-                            style: {
-                                color: 'var(--uix-canvas-foreground-de-emp)'
-                            },
-                            children: [
-                                "Hover over the agent node to see the settings preview. Notice that the",
-                                ' ',
-                                /*#__PURE__*/ jsx("strong", {
-                                    children: "User Prompt"
-                                }),
-                                " section is hidden for conversational agents."
-                            ]
-                        })
-                    ]
-                })
-            })
-        ]
-    });
-const ConversationalAgent = {
-    args: {
-        mode: 'design'
-    },
-    render: ()=>/*#__PURE__*/ jsx(ConversationalAgentWrapper, {}),
-    parameters: {
-        docs: {
-            description: {
-                story: 'Conversational agent demo. When `definition.metadata.isConversational` is true, the User Prompt section is hidden in the settings preview panel. Hover over the agent node to see this behavior.'
-            }
-        }
-    }
-};
-const resourcesWithErrorCta = [
-    {
-        id: 'tool-broken',
-        type: 'tool',
-        name: 'Broken Tool',
-        description: 'This tool has an error',
-        iconUrl: '',
-        hasBreakpoint: false,
-        hasGuardrails: false,
-        projectType: ProjectType.Internal,
-        errorAction: {
-            icon: 'refresh',
-            label: 'Retry Connection'
-        }
-    },
-    {
-        id: 'tool-config-error',
-        type: 'tool',
-        name: 'Misconfigured Tool',
-        description: 'Configuration error detected',
-        iconUrl: '',
-        hasBreakpoint: false,
-        hasGuardrails: false,
-        projectType: ProjectType.Api,
-        errorAction: {
-            icon: 'settings',
-            label: 'Fix Configuration'
-        }
-    },
-    {
-        id: 'context-error',
-        type: 'context',
-        name: 'Invalid Context',
-        description: 'Context validation failed',
-        hasBreakpoint: false,
-        errorAction: {
-            icon: 'warning',
-            label: 'Review Issues'
-        }
-    },
-    {
-        id: 'tool-working',
-        type: 'tool',
-        name: 'Working Tool',
-        description: 'This tool is functioning normally (no error CTA)',
-        iconUrl: '',
-        hasBreakpoint: false,
-        hasGuardrails: false,
-        projectType: ProjectType.Internal
-    }
-];
-const ResourceWithErrorCTAWrapper = ()=>{
-    const handleErrorAction = useCallback((_resourceId, resource)=>{
-        console.log(resource);
-        const resourceName = resource.name;
-        switch(resourceName){
-            case 'Broken Tool':
-                alert(`Retry action triggered for: ${resourceName}`);
-                break;
-            case 'Misconfigured Tool':
-                alert(`Fix configuration action triggered for: ${resourceName}`);
-                break;
-            case 'Invalid Context':
-                alert(`Review issues action triggered for: ${resourceName}`);
-                break;
-            default:
-                alert(`Error action triggered for: ${resourceName}`);
-        }
-    }, []);
-    return /*#__PURE__*/ jsxs(ReactFlowProvider, {
-        children: [
-            /*#__PURE__*/ jsx(AgentFlow, {
-                allowDragging: true,
-                definition: sampleAgentDefinition,
-                spans: [],
-                name: "Test Agent",
-                description: "Testing error CTA on resources",
-                mode: "design",
-                resources: resourcesWithErrorCta,
-                enableMemory: true,
-                enableInstructions: true,
-                onErrorAction: handleErrorAction,
-                instructions: {
-                    system: 'System instructions here',
-                    user: 'User instructions here'
-                }
-            }),
-            /*#__PURE__*/ jsx(StoryInfoPanel, {
-                title: "Error CTA Demo",
-                position: "top-right",
-                children: /*#__PURE__*/ jsxs(Column, {
-                    mt: 12,
-                    gap: 8,
-                    children: [
-                        /*#__PURE__*/ jsxs(ApTypography, {
-                            variant: FontVariantToken.fontSizeS,
-                            children: [
-                                "Resources with ",
-                                /*#__PURE__*/ jsx("strong", {
-                                    children: "errorAction"
-                                }),
-                                " defined will show an error action button in their toolbar."
-                            ]
-                        }),
-                        /*#__PURE__*/ jsx(ApTypography, {
-                            variant: FontVariantToken.fontSizeS,
-                            style: {
-                                color: 'var(--uix-canvas-foreground-de-emp)'
-                            },
-                            children: "Click the error action buttons (Retry, Fix Configuration, Review Issues) to trigger the custom actions."
-                        }),
-                        /*#__PURE__*/ jsx(ApTypography, {
-                            variant: FontVariantToken.fontSizeS,
-                            style: {
-                                color: 'var(--uix-canvas-foreground-de-emp)'
-                            },
-                            children: 'The "Working Tool" has no error action and shows the normal toolbar.'
-                        })
-                    ]
-                })
-            })
-        ]
-    });
-};
-const ResourceWithErrorCTA = {
-    args: {
-        mode: 'design'
-    },
-    render: ()=>/*#__PURE__*/ jsx(ResourceWithErrorCTAWrapper, {}),
-    parameters: {
-        docs: {
-            description: {
-                story: 'Demonstrates error call-to-action buttons on resource nodes. Resources can define an `errorAction` field with icon and label, and handle the action via the `onErrorAction` callback. The button appears next to the remove button in the toolbar. The consumer provides routing logic to handle different error actions for each resource. Hover or click on the resource nodes to see the error CTA buttons.'
-            }
-        }
-    }
-};
-export { ConversationalAgent, DesignMode, HealthScore, ResourceWithErrorCTA, ViewMode, AgentFlow_stories as default };