@elizaos/agent 2.0.0-alpha.520 → 2.0.0-alpha.521

package/packages/app-core/src/components/pages/WorkflowGraphViewer.d.ts

@@ -1,15 +0,0 @@
-import type { N8nStatusResponse, N8nWorkflow } from "../../api/client-types-chat";
-interface WorkflowGraphViewerProps {
-    workflow: N8nWorkflow | null;
-    loading?: boolean;
-    isGenerating?: boolean;
-    emptyStateActionLabel?: string;
-    emptyStateHelpText?: string;
-    onNodeClick?: (nodeName: string) => void;
-    onEmptyStateAction?: () => void;
-    /** n8n status — drives the "Open in editor" button URL and enabled state. */
-    status?: N8nStatusResponse | null;
-}
-export declare function WorkflowGraphViewer({ workflow, loading, isGenerating, emptyStateActionLabel, emptyStateHelpText, onNodeClick, onEmptyStateAction, status, }: WorkflowGraphViewerProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=WorkflowGraphViewer.d.ts.map

package/packages/app-core/src/components/pages/WorkflowGraphViewer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"WorkflowGraphViewer.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/pages/WorkflowGraphViewer.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAEV,iBAAiB,EACjB,WAAW,EAEZ,MAAM,6BAA6B,CAAC;AAwrBrC,UAAU,wBAAwB;IAChC,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,6EAA6E;IAC7E,MAAM,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;CACnC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,OAAe,EACf,YAAoB,EACpB,qBAAgD,EAChD,kBAAqE,EACrE,WAAW,EACX,kBAAkB,EAClB,MAAM,GACP,EAAE,wBAAwB,2CA+P1B"}

package/packages/app-core/src/components/pages/WorkflowGraphViewer.js

@@ -1,403 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Spinner, StatusBadge, } from "@elizaos/ui";
-import { Background, Controls, MiniMap, ReactFlow, } from "@xyflow/react";
-import { ExternalLink, Maximize2, X } from "lucide-react";
-import { useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
-import { getBootConfig } from "../../config/boot-config";
-import { useApp } from "../../state";
-// ── Node type colour families ─────────────────────────────────────────────────
-function resolveNodeColor(type) {
-    const t = type.toLowerCase();
-    if (t.includes("trigger") ||
-        t.includes("webhook") ||
-        t.includes("schedule") ||
-        t.includes("cron")) {
-        return { bg: "#451a03", border: "#f59e0b", badge: "#f59e0b" }; // amber — trigger
-    }
-    if (t.includes("if") ||
-        t.includes("switch") ||
-        t.includes("merge") ||
-        t.includes("split") ||
-        t.includes("wait") ||
-        t.includes("noop") ||
-        t.includes("start")) {
-        return { bg: "#1e293b", border: "#64748b", badge: "#64748b" }; // slate — flow-control
-    }
-    if (t.includes("gmail") ||
-        t.includes("slack") ||
-        t.includes("telegram") ||
-        t.includes("discord") ||
-        t.includes("github") ||
-        t.includes("notion") ||
-        t.includes("google") ||
-        t.includes("openai") ||
-        t.includes("anthropic")) {
-        return { bg: "#2e1065", border: "#8b5cf6", badge: "#8b5cf6" }; // violet — integration
-    }
-    // Default: action (blue)
-    return { bg: "#0c1a2e", border: "#3b82f6", badge: "#3b82f6" };
-}
-// ── Auto layout ──────────────────────────────────────────────────────────────
-const NODE_WIDTH = 180;
-const NODE_HEIGHT = 64;
-const H_GAP = 60;
-const V_GAP = 40;
-function autoLayoutPositions(nodeNames) {
-    const cols = Math.max(1, Math.ceil(Math.sqrt(nodeNames.length)));
-    const positions = new Map();
-    nodeNames.forEach((name, i) => {
-        const col = i % cols;
-        const row = Math.floor(i / cols);
-        positions.set(name, {
-            x: col * (NODE_WIDTH + H_GAP) + 40,
-            y: row * (NODE_HEIGHT + V_GAP) + 40,
-        });
-    });
-    return positions;
-}
-// ── Conversion helpers ────────────────────────────────────────────────────────
-function workflowToReactFlow(workflow) {
-    if (!workflow?.nodes?.length)
-        return { nodes: [], edges: [] };
-    const rawNodes = workflow.nodes;
-    // Collect position overrides from n8n canvas coordinates
-    const posOverrides = new Map();
-    for (const n of rawNodes) {
-        if (n.position) {
-            posOverrides.set(n.name, { x: n.position[0], y: n.position[1] });
-        }
-    }
-    // Fall back to auto-layout for any node missing a position
-    const missing = rawNodes
-        .filter((n) => !posOverrides.has(n.name))
-        .map((n) => n.name);
-    const autoPos = autoLayoutPositions(missing);
-    const nodes = rawNodes.map((n) => {
-        const pos = posOverrides.get(n.name) ??
-            autoPos.get(n.name) ?? { x: 0, y: 0 };
-        const colors = resolveNodeColor(n.type ?? "");
-        const typeLabel = (n.type ?? "node").split(".").pop() ?? "node";
-        return {
-            id: n.id ?? n.name,
-            position: pos,
-            data: {
-                label: n.name,
-                typeLabel,
-                colors,
-            },
-            style: {
-                background: colors.bg,
-                border: `1.5px solid ${colors.border}`,
-                borderRadius: "8px",
-                padding: "8px 12px",
-                width: NODE_WIDTH,
-                minHeight: NODE_HEIGHT,
-                color: "#e2e8f0",
-                fontSize: "12px",
-                boxShadow: `0 0 0 1px ${colors.border}22`,
-            },
-        };
-    });
-    // Build a name -> id map for connection edge lookups
-    const nameToId = new Map();
-    for (const n of rawNodes) {
-        nameToId.set(n.name, n.id ?? n.name);
-    }
-    const edges = [];
-    const connections = workflow.connections ?? {};
-    for (const [sourceName, outputMap] of Object.entries(connections)) {
-        const sourceId = nameToId.get(sourceName);
-        if (!sourceId)
-            continue;
-        const mainOutputs = outputMap.main ?? [];
-        mainOutputs.forEach((outputIndex, oi) => {
-            (outputIndex ?? []).forEach((conn, ci) => {
-                const targetId = nameToId.get(conn.node);
-                if (!targetId)
-                    return;
-                edges.push({
-                    id: `${sourceId}-${targetId}-${oi}-${ci}`,
-                    source: sourceId,
-                    target: targetId,
-                    type: "smoothstep",
-                    animated: false,
-                    style: {
-                        stroke: "#475569",
-                        strokeWidth: 1.5,
-                    },
-                });
-            });
-        });
-    }
-    return { nodes, edges };
-}
-function generatingEdges(edges) {
-    return edges.map((e) => ({
-        ...e,
-        animated: true,
-        style: {
-            ...e.style,
-            stroke: "#3b82f6",
-            strokeDasharray: "6 3",
-        },
-    }));
-}
-function graphChrome(uiTheme) {
-    if (uiTheme === "light") {
-        return {
-            canvasBg: "#f8fafc",
-            dots: "#cbd5e1",
-            minimapMask: "rgba(226, 232, 240, 0.72)",
-            minimapBg: "#ffffff",
-            minimapBorder: "#cbd5e1",
-            emptyTitleClass: "text-slate-700",
-            emptyHelpClass: "text-slate-500",
-            overlayBg: "rgba(248, 250, 252, 0.72)",
-            overlayChipBg: "rgba(255, 255, 255, 0.94)",
-            overlayChipText: "#1d4ed8",
-        };
-    }
-    return {
-        canvasBg: "#020817",
-        dots: "#334155",
-        minimapMask: "rgba(2, 8, 23, 0.7)",
-        minimapBg: "#0f172a",
-        minimapBorder: "#334155",
-        emptyTitleClass: "text-slate-300",
-        emptyHelpClass: "text-slate-500",
-        overlayBg: "rgba(2, 8, 23, 0.6)",
-        overlayChipBg: "rgba(2, 8, 23, 0.82)",
-        overlayChipText: "#60a5fa",
-    };
-}
-// ── Generation progress overlay ───────────────────────────────────────────────
-/**
- * Stage messages for `WorkflowGenerationProgress`. The plugin's workflow
- * generation today is a single request/response, so the client cannot yet
- * observe the actual stage in real time. We cycle through plausible labels
- * on a fixed timer based on observed median latencies of each phase:
- *   1. extractKeywords (fast — runtime-context provider + keyword LLM call)
- *   2. searchNodes + credential filter + fetchRuntimeContext
- *   3. generateWorkflow (LLM, slowest)
- *   4. validateAndRepair + injectMissingCredentialBlocks
- *   5. deployWorkflow + resolveCredentials + activate
- *
- * When the plugin grows a server-sent-events streaming endpoint, the timer
- * can be replaced with real per-stage progress events.
- */
-const WORKFLOW_GENERATION_STAGES = [
-    {
-        label: "Understanding your prompt",
-        hint: "Extracting keywords + matching providers",
-        startsAt: 0,
-    },
-    {
-        label: "Finding the right nodes",
-        hint: "Searching catalog + checking credentials",
-        startsAt: 3,
-    },
-    {
-        label: "Generating workflow",
-        hint: "Asking the LLM with runtime facts",
-        startsAt: 6,
-    },
-    {
-        label: "Validating + repairing",
-        hint: "Clamping versions + auto-fixing references",
-        startsAt: 18,
-    },
-    {
-        label: "Deploying to n8n",
-        hint: "Minting credentials + activating",
-        startsAt: 24,
-    },
-    {
-        label: "Almost done",
-        hint: "Wrapping up — this is taking a bit longer than usual",
-        startsAt: 35,
-    },
-];
-function WorkflowGenerationProgress({ chrome, }) {
-    const [elapsed, setElapsed] = useState(0);
-    useEffect(() => {
-        const start = Date.now();
-        const id = setInterval(() => {
-            setElapsed(Math.floor((Date.now() - start) / 1000));
-        }, 500);
-        return () => clearInterval(id);
-    }, []);
-    const currentIndex = WORKFLOW_GENERATION_STAGES.reduce((acc, stage, idx) => (elapsed >= stage.startsAt ? idx : acc), 0);
-    return (_jsx("div", { className: "w-full max-w-md rounded-xl border px-5 py-4 text-sm shadow-lg", style: {
-            background: chrome.overlayChipBg,
-            color: chrome.overlayChipText,
-            borderColor: chrome.overlayChipText,
-        }, children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Spinner, { className: "mt-0.5 h-4 w-4 shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1 space-y-3", children: [_jsxs("div", { children: [_jsx("div", { className: "font-semibold", children: "Building your workflow\u2026" }), _jsx("div", { className: "text-xs opacity-70", children: "Generations usually take 10\u201330 seconds." })] }), _jsx("ol", { className: "space-y-1.5", children: WORKFLOW_GENERATION_STAGES.map((stage, idx) => {
-                                const isDone = idx < currentIndex;
-                                const isActive = idx === currentIndex;
-                                return (_jsxs("li", { className: `flex items-start gap-2 text-xs transition-opacity ${isDone || isActive ? "opacity-100" : "opacity-40"}`, children: [_jsx("span", { className: `mt-0.5 inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-full border ${isDone
-                                                ? "border-current bg-current/15"
-                                                : isActive
-                                                    ? "border-current bg-current/15"
-                                                    : "border-current/40"}`, "aria-hidden": true, children: isDone ? (_jsx("svg", { viewBox: "0 0 12 12", className: "h-2.5 w-2.5", fill: "none", stroke: "currentColor", strokeWidth: "2", role: "img", "aria-label": "completed", children: _jsx("path", { d: "M2.5 6.5l2.5 2.5 4.5-5", strokeLinecap: "round", strokeLinejoin: "round" }) })) : isActive ? (_jsx("span", { className: "h-1.5 w-1.5 animate-pulse rounded-full bg-current", "aria-hidden": true })) : null }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: `font-medium ${isActive ? "" : "opacity-70"}`, children: stage.label }), (isDone || isActive) && (_jsxs("span", { className: "ml-1.5 opacity-60", children: ["\u2014 ", stage.hint] }))] })] }, stage.label));
-                            }) })] })] }) }));
-}
-// ── Node detail drawer ────────────────────────────────────────────────────────
-const PARAM_TRUNCATE_LENGTH = 200;
-function ParamValue({ value }) {
-    const { t } = useApp();
-    const [expanded, setExpanded] = useState(false);
-    if (typeof value === "string") {
-        if (value.length > PARAM_TRUNCATE_LENGTH && !expanded) {
-            return (_jsxs("span", { children: [_jsxs("pre", { className: "inline font-mono whitespace-pre-wrap break-all text-xs text-txt/80", children: [value.slice(0, PARAM_TRUNCATE_LENGTH), "\u2026"] }), _jsx("button", { type: "button", className: "ml-1 text-xs text-blue-400 hover:underline", onClick: () => setExpanded(true), children: t("workflowGraph.nodeDrawer.showMore") })] }));
-        }
-        if (value.length > PARAM_TRUNCATE_LENGTH && expanded) {
-            return (_jsxs("span", { children: [_jsx("pre", { className: "inline font-mono whitespace-pre-wrap break-all text-xs text-txt/80", children: value }), _jsx("button", { type: "button", className: "ml-1 text-xs text-blue-400 hover:underline", onClick: () => setExpanded(false), children: t("workflowGraph.nodeDrawer.showLess") })] }));
-        }
-        return (_jsx("pre", { className: "font-mono whitespace-pre-wrap break-all text-xs text-txt/80", children: value }));
-    }
-    if (typeof value === "object" && value !== null) {
-        const json = JSON.stringify(value, null, 2);
-        if (json.length > PARAM_TRUNCATE_LENGTH && !expanded) {
-            return (_jsxs("span", { children: [_jsxs("pre", { className: "inline font-mono whitespace-pre-wrap break-all text-xs text-txt/80", children: [json.slice(0, PARAM_TRUNCATE_LENGTH), "\u2026"] }), _jsx("button", { type: "button", className: "ml-1 text-xs text-blue-400 hover:underline", onClick: () => setExpanded(true), children: t("workflowGraph.nodeDrawer.showMore") })] }));
-        }
-        if (json.length > PARAM_TRUNCATE_LENGTH && expanded) {
-            return (_jsxs("span", { children: [_jsx("pre", { className: "font-mono whitespace-pre-wrap break-all text-xs text-txt/80", children: json }), _jsx("button", { type: "button", className: "ml-1 text-xs text-blue-400 hover:underline", onClick: () => setExpanded(false), children: t("workflowGraph.nodeDrawer.showLess") })] }));
-        }
-        return (_jsx("pre", { className: "font-mono whitespace-pre-wrap break-all text-xs text-txt/80", children: json }));
-    }
-    return (_jsx("pre", { className: "font-mono whitespace-pre-wrap break-all text-xs text-txt/80", children: String(value) }));
-}
-function buildEditorUrl(workflow, status, cloudAgentId, uiTheme) {
-    let editorUrl = null;
-    if (status.mode === "local" && status.host) {
-        editorUrl = `${status.host}/workflow/${encodeURIComponent(workflow.id)}`;
-    }
-    if (status.mode === "cloud" && cloudAgentId) {
-        const cloudBase = getBootConfig().cloudApiBase ?? "https://www.elizacloud.ai";
-        editorUrl = `${cloudBase}/agents/${encodeURIComponent(cloudAgentId)}/n8n/workflow/${encodeURIComponent(workflow.id)}`;
-    }
-    if (!editorUrl) {
-        return null;
-    }
-    const url = new URL(editorUrl);
-    url.searchParams.set("theme", uiTheme);
-    return url.toString();
-}
-function NodeDetailDrawer({ node, workflow, status, onClose, labelId, }) {
-    const { t, activeAgentProfile, uiTheme } = useApp();
-    const closeButtonRef = useRef(null);
-    const isOpen = node !== null;
-    // Focus the close button when drawer opens
-    useEffect(() => {
-        if (isOpen) {
-            // Defer so the CSS transition can begin first
-            const id = setTimeout(() => closeButtonRef.current?.focus(), 60);
-            return () => clearTimeout(id);
-        }
-    }, [isOpen]);
-    // Derive display values from the current node (may be stale during close transition — that's fine)
-    const colors = resolveNodeColor(node?.type ?? "");
-    const typeLabel = (node?.type ?? "node").split(".").pop() ?? "node";
-    const hasParams = node?.parameters && Object.keys(node.parameters).length > 0;
-    const editorDisabled = !status || status.mode === "disabled" || status.status === "error";
-    const editorUrl = !editorDisabled && workflow && status && node
-        ? buildEditorUrl(workflow, status, activeAgentProfile?.cloudAgentId, uiTheme)
-        : null;
-    // Map color families to StatusBadge variants (success | warning | danger | muted)
-    // amber=trigger→warning, slate=flow-control→muted, violet=integration→danger, blue=action→muted
-    const badgeVariant = colors.badge === "#f59e0b"
-        ? "warning"
-        : colors.badge === "#8b5cf6"
-            ? "danger"
-            : "muted";
-    return (_jsxs("div", { role: "dialog", "aria-modal": "false", "aria-labelledby": isOpen ? labelId : undefined, "aria-hidden": !isOpen, className: [
-            "absolute inset-y-0 right-0 z-30 flex w-72 flex-col",
-            "border-l border-border/40 bg-bg shadow-xl backdrop-blur-[2px]",
-            "transition-transform duration-200 ease-out",
-            isOpen ? "translate-x-0" : "translate-x-full",
-        ].join(" "), children: [_jsxs("div", { className: "flex shrink-0 items-start gap-2 border-b border-border/30 px-4 py-3", children: [_jsxs("div", { className: "flex-1 min-w-0 space-y-1", children: [_jsx("h2", { id: labelId, className: "text-sm font-semibold text-txt leading-tight truncate", children: node?.name ?? "" }), _jsx("div", { className: "flex items-center gap-1.5", children: _jsx(StatusBadge, { label: typeLabel, variant: badgeVariant }) })] }), _jsx("button", { ref: closeButtonRef, type: "button", "aria-label": t("workflowGraph.closeDrawer"), tabIndex: isOpen ? 0 : -1, className: "shrink-0 flex h-6 w-6 items-center justify-center rounded text-muted hover:text-txt transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: onClose, children: _jsx(X, { className: "h-3.5 w-3.5" }) })] }), _jsx("div", { className: "flex-1 overflow-y-auto space-y-4 px-4 py-3", children: node && (_jsxs(_Fragment, { children: [node.notes?.trim() ? (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-muted", children: "Step" }), _jsx("div", { className: "rounded bg-bg/40 border border-border/20 px-2 py-2", children: _jsx("p", { className: "text-xs leading-relaxed text-txt/80", children: node.notes.trim() }) })] })) : null, _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-muted", children: t("common.parameters") }), hasParams ? (_jsx("div", { className: "space-y-2", children: Object.entries(node.parameters ?? {}).map(([key, val]) => (_jsxs("div", { className: "space-y-0.5", children: [_jsx("div", { className: "text-xs font-medium text-muted/80 font-mono", children: key }), _jsx("div", { className: "rounded bg-bg/40 border border-border/20 px-2 py-1", children: _jsx(ParamValue, { value: val }) })] }, key))) })) : (_jsx("p", { className: "text-xs text-muted/60 italic", children: t("workflowGraph.nodeDrawer.noParameters") }))] })] })) }), _jsx("div", { className: "shrink-0 border-t border-border/30 px-4 py-3", children: editorUrl ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "w-full h-8 text-xs gap-1.5", tabIndex: isOpen ? 0 : -1, onClick: () => window.open(editorUrl, "_blank", "noopener"), children: [_jsx(ExternalLink, { className: "h-3.5 w-3.5" }), t("workflowGraph.nodeDrawer.openInEditor")] })) : (_jsx(Button, { type: "button", variant: "outline", size: "sm", className: "w-full h-8 text-xs", disabled: true, tabIndex: isOpen ? 0 : -1, title: t("workflowGraph.nodeDrawer.editorDisabled"), children: t("workflowGraph.nodeDrawer.openInEditor") })) })] }));
-}
-// ── Graph panel (shared between inline and full-screen modal) ─────────────────
-function GraphPanel({ nodes, edges, isGenerating, ariaLabel, onNodeClick, uiTheme, }) {
-    const chrome = graphChrome(uiTheme);
-    return (_jsxs(ReactFlow, { nodes: nodes, edges: isGenerating ? generatingEdges(edges) : edges, nodesDraggable: !isGenerating, nodesConnectable: false, edgesReconnectable: false, onNodeClick: onNodeClick, fitView: true, fitViewOptions: { padding: 0.2, maxZoom: 1.2 }, proOptions: { hideAttribution: true }, "aria-label": ariaLabel, children: [_jsx(Background, { color: chrome.dots, gap: 20, size: 1 }), _jsx(Controls, { showInteractive: false }), _jsx(MiniMap, { nodeColor: (n) => {
-                    const colors = n.data?.colors;
-                    return colors?.border ?? "#475569";
-                }, maskColor: chrome.minimapMask, style: {
-                    background: chrome.minimapBg,
-                    border: `1px solid ${chrome.minimapBorder}`,
-                } })] }));
-}
-export function WorkflowGraphViewer({ workflow, loading = false, isGenerating = false, emptyStateActionLabel = "Describe your workflow", emptyStateHelpText = "Describe the trigger and steps in the sidebar.", onNodeClick, onEmptyStateAction, status, }) {
-    const { activeAgentProfile, uiTheme } = useApp();
-    const [fullScreen, setFullScreen] = useState(false);
-    const [selectedNode, setSelectedNode] = useState(null);
-    const containerRef = useRef(null);
-    const drawerLabelId = useId();
-    const { nodes, edges } = useMemo(() => workflowToReactFlow(workflow), [workflow]);
-    const ariaLabel = `Workflow graph with ${nodes.length} nodes and ${edges.length} connections`;
-    // Clear selected node when workflow changes
-    // biome-ignore lint/correctness/useExhaustiveDependencies: reset drawer on workflow identity change
-    useEffect(() => {
-        setSelectedNode(null);
-    }, [workflow?.id]);
-    const handleNodeClick = useCallback((_, node) => {
-        const label = node.data?.label ?? node.id;
-        const found = workflow?.nodes?.find((n) => n.id === node.id || n.name === label) ??
-            null;
-        setSelectedNode(found);
-        onNodeClick?.(label);
-    }, [onNodeClick, workflow]);
-    const handleCloseDrawer = useCallback(() => {
-        setSelectedNode(null);
-    }, []);
-    // Escape key closes drawer (only active when drawer is open and full-screen is closed)
-    useEffect(() => {
-        if (!selectedNode || fullScreen)
-            return;
-        const handler = (e) => {
-            if (e.key === "Escape")
-                setSelectedNode(null);
-        };
-        window.addEventListener("keydown", handler);
-        return () => window.removeEventListener("keydown", handler);
-    }, [selectedNode, fullScreen]);
-    // Trap focus in full-screen modal with Escape to close (when drawer not open)
-    useEffect(() => {
-        if (!fullScreen)
-            return;
-        const handler = (e) => {
-            if (e.key === "Escape") {
-                if (selectedNode) {
-                    setSelectedNode(null);
-                }
-                else {
-                    setFullScreen(false);
-                }
-            }
-        };
-        window.addEventListener("keydown", handler);
-        return () => window.removeEventListener("keydown", handler);
-    }, [fullScreen, selectedNode]);
-    const hasNodes = nodes.length > 0;
-    const editorDisabled = !status || status.mode === "disabled" || status.status === "error";
-    const editorUrl = !editorDisabled && workflow && status
-        ? buildEditorUrl(workflow, status, activeAgentProfile?.cloudAgentId, uiTheme)
-        : null;
-    const borderClass = isGenerating
-        ? "animate-pulse ring-2 ring-blue-500/50"
-        : "ring-1 ring-border/30";
-    const chrome = graphChrome(uiTheme);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: containerRef, role: "img", "aria-label": ariaLabel, className: `relative overflow-hidden rounded-lg ${borderClass}`, style: { height: 420, background: chrome.canvasBg }, children: [loading && !hasNodes && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx(Spinner, { className: "h-6 w-6 text-muted" }) })), !loading && !hasNodes && !isGenerating && (_jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-3 px-6 text-center", children: [_jsx("p", { className: `text-sm font-medium ${chrome.emptyTitleClass}`, children: "Blank workflow" }), _jsx("p", { className: `max-w-sm text-xs ${chrome.emptyHelpClass}`, children: emptyStateHelpText }), onEmptyStateAction && (_jsx("button", { type: "button", className: "mt-1 rounded-md border border-border/40 bg-bg/40 px-3 py-1.5 text-xs text-txt hover:bg-bg/70 transition-colors", onClick: onEmptyStateAction, children: emptyStateActionLabel }))] })), isGenerating && (_jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center backdrop-blur-[1px]", style: { background: chrome.overlayBg }, children: _jsx(WorkflowGenerationProgress, { chrome: chrome }) })), !loading && (_jsx("div", { role: "presentation", className: "h-full w-full", onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: _jsxs(ReactFlow, { nodes: nodes, edges: isGenerating ? generatingEdges(edges) : edges, nodesDraggable: !isGenerating, nodesConnectable: false, edgesReconnectable: false, onNodeClick: handleNodeClick, fitView: true, fitViewOptions: { padding: 0.2, maxZoom: 1.2 }, proOptions: { hideAttribution: true }, "aria-label": ariaLabel, children: [_jsx(Background, { color: chrome.dots, gap: 20, size: 1 }), _jsx(Controls, { showInteractive: false }), hasNodes && (_jsx(MiniMap, { nodeColor: (n) => {
-                                        const colors = n.data
-                                            ?.colors;
-                                        return colors?.border ?? "#475569";
-                                    }, maskColor: chrome.minimapMask, style: {
-                                        background: chrome.minimapBg,
-                                        border: `1px solid ${chrome.minimapBorder}`,
-                                    } }))] }) })), hasNodes && !isGenerating && (_jsx("button", { type: "button", "aria-label": "Full screen", className: [
-                            "absolute top-3 z-20 flex h-7 w-7 items-center justify-center",
-                            "rounded border border-border/40 bg-bg/80 text-muted hover:text-txt transition-all duration-200",
-                            selectedNode ? "right-[calc(18rem_+_0.75rem)]" : "right-3",
-                        ].join(" "), onClick: () => setFullScreen(true), children: _jsx(Maximize2, { className: "h-3.5 w-3.5" }) })), editorUrl && !isGenerating && (_jsx("button", { type: "button", "aria-label": "Open in n8n editor", className: "absolute right-12 top-3 z-20 rounded border border-border/40 bg-bg/80 px-2.5 py-1 text-xs text-muted transition-colors hover:text-txt", onClick: () => window.open(editorUrl, "_blank", "noopener"), children: "Open in n8n" })), !fullScreen && (_jsx(NodeDetailDrawer, { node: selectedNode, workflow: workflow, status: status, onClose: handleCloseDrawer, labelId: drawerLabelId }))] }), _jsx(Dialog, { open: fullScreen, onOpenChange: setFullScreen, children: _jsxs(DialogContent, { className: "h-[90dvh] w-[90vw] !max-w-none !max-h-none flex flex-col p-0 gap-0", showCloseButton: false, children: [_jsxs(DialogHeader, { className: "flex flex-row items-center justify-between border-b border-border/30 px-4 py-3 shrink-0", children: [_jsx(DialogTitle, { className: "text-sm font-medium", children: workflow?.name ?? "Workflow Graph" }), _jsx("button", { type: "button", "aria-label": "Close", className: "flex h-7 w-7 items-center justify-center rounded text-muted hover:text-txt transition-colors", onClick: () => setFullScreen(false), children: _jsx(X, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "relative flex-1 min-h-0 overflow-hidden", style: { background: chrome.canvasBg }, children: [_jsx(GraphPanel, { nodes: nodes, edges: edges, isGenerating: isGenerating, ariaLabel: ariaLabel, onNodeClick: handleNodeClick, uiTheme: uiTheme }), _jsx(NodeDetailDrawer, { node: selectedNode, workflow: workflow, status: status, onClose: handleCloseDrawer, labelId: drawerLabelId })] })] }) })] }));
-}

package/packages/app-core/src/components/pages/automation-conversations.d.ts

@@ -1,16 +0,0 @@
-import type { Conversation, ConversationMetadata } from "../../api/client-types-chat";
-export declare function isAutomationConversationMetadata(metadata: ConversationMetadata | null | undefined): boolean;
-export declare function isAutomationConversation(conversation: Pick<Conversation, "metadata"> | null | undefined): boolean;
-export declare function getAutomationBridgeConversationId(activeConversationId: string | null | undefined, conversations: Conversation[]): string | undefined;
-export declare function buildCoordinatorConversationMetadata(taskId: string, bridgeConversationId?: string): ConversationMetadata;
-export declare function buildCoordinatorTriggerConversationMetadata(triggerId: string, bridgeConversationId?: string): ConversationMetadata;
-export declare function buildWorkflowConversationMetadata(workflowId: string, workflowName: string, bridgeConversationId?: string): ConversationMetadata;
-export declare function buildWorkflowDraftConversationMetadata(draftId: string, bridgeConversationId?: string): ConversationMetadata;
-export declare function buildAutomationDraftConversationMetadata(draftId: string, bridgeConversationId?: string): ConversationMetadata;
-export declare function buildAutomationResponseRoutingMetadata(metadata: ConversationMetadata): Record<string, unknown> | undefined;
-export declare function findAutomationConversation(conversations: Conversation[], metadata: ConversationMetadata): Conversation | null;
-export declare function resolveAutomationConversation(params: {
-    title: string;
-    metadata: ConversationMetadata;
-}): Promise<Conversation>;
-//# sourceMappingURL=automation-conversations.d.ts.map

package/packages/app-core/src/components/pages/automation-conversations.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"automation-conversations.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/pages/automation-conversations.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,YAAY,EACZ,oBAAoB,EACrB,MAAM,6BAA6B,CAAC;AAyBrC,wBAAgB,gCAAgC,CAC9C,QAAQ,EAAE,oBAAoB,GAAG,IAAI,GAAG,SAAS,GAChD,OAAO,CAET;AAED,wBAAgB,wBAAwB,CACtC,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,GAAG,IAAI,GAAG,SAAS,GAC9D,OAAO,CAET;AAED,wBAAgB,iCAAiC,CAC/C,oBAAoB,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAC/C,aAAa,EAAE,YAAY,EAAE,GAC5B,MAAM,GAAG,SAAS,CAcpB;AAED,wBAAgB,oCAAoC,CAClD,MAAM,EAAE,MAAM,EACd,oBAAoB,CAAC,EAAE,MAAM,GAC5B,oBAAoB,CAYtB;AAED,wBAAgB,2CAA2C,CACzD,SAAS,EAAE,MAAM,EACjB,oBAAoB,CAAC,EAAE,MAAM,GAC5B,oBAAoB,CAYtB;AAED,wBAAgB,iCAAiC,CAC/C,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,EACpB,oBAAoB,CAAC,EAAE,MAAM,GAC5B,oBAAoB,CAatB;AAED,wBAAgB,sCAAsC,CACpD,OAAO,EAAE,MAAM,EACf,oBAAoB,CAAC,EAAE,MAAM,GAC5B,oBAAoB,CAYtB;AAED,wBAAgB,wCAAwC,CACtD,OAAO,EAAE,MAAM,EACf,oBAAoB,CAAC,EAAE,MAAM,GAC5B,oBAAoB,CAWtB;AAED,wBAAgB,sCAAsC,CACpD,QAAQ,EAAE,oBAAoB,GAC7B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAerC;AA4FD,wBAAgB,0BAA0B,CACxC,aAAa,EAAE,YAAY,EAAE,EAC7B,QAAQ,EAAE,oBAAoB,GAC7B,YAAY,GAAG,IAAI,CAUrB;AAED,wBAAsB,6BAA6B,CAAC,MAAM,EAAE;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,oBAAoB,CAAC;CAChC,GAAG,OAAO,CAAC,YAAY,CAAC,CAwBxB"}

package/packages/app-core/src/components/pages/automation-conversations.js

@@ -1,204 +0,0 @@
-import { client } from "../../api";
-const AUTOMATION_SCOPES = new Set([
-    "automation-coordinator",
-    "automation-workflow",
-    "automation-workflow-draft",
-    "automation-draft",
-]);
-function sortByUpdatedAtDesc(left, right) {
-    return (new Date(right.updatedAt).getTime() - new Date(left.updatedAt).getTime());
-}
-function trimOptionalString(value) {
-    if (typeof value !== "string") {
-        return undefined;
-    }
-    const trimmed = value.trim();
-    return trimmed.length > 0 ? trimmed : undefined;
-}
-export function isAutomationConversationMetadata(metadata) {
-    return metadata?.scope ? AUTOMATION_SCOPES.has(metadata.scope) : false;
-}
-export function isAutomationConversation(conversation) {
-    return isAutomationConversationMetadata(conversation?.metadata);
-}
-export function getAutomationBridgeConversationId(activeConversationId, conversations) {
-    const normalizedActiveId = trimOptionalString(activeConversationId);
-    if (!normalizedActiveId) {
-        return undefined;
-    }
-    const activeConversation = conversations.find((conversation) => conversation.id === normalizedActiveId);
-    if (isAutomationConversation(activeConversation)) {
-        return undefined;
-    }
-    return normalizedActiveId;
-}
-export function buildCoordinatorConversationMetadata(taskId, bridgeConversationId) {
-    return {
-        scope: "automation-coordinator",
-        automationType: "coordinator_text",
-        taskId,
-        ...(bridgeConversationId
-            ? {
-                sourceConversationId: bridgeConversationId,
-                terminalBridgeConversationId: bridgeConversationId,
-            }
-            : {}),
-    };
-}
-export function buildCoordinatorTriggerConversationMetadata(triggerId, bridgeConversationId) {
-    return {
-        scope: "automation-coordinator",
-        automationType: "coordinator_text",
-        triggerId,
-        ...(bridgeConversationId
-            ? {
-                sourceConversationId: bridgeConversationId,
-                terminalBridgeConversationId: bridgeConversationId,
-            }
-            : {}),
-    };
-}
-export function buildWorkflowConversationMetadata(workflowId, workflowName, bridgeConversationId) {
-    return {
-        scope: "automation-workflow",
-        automationType: "n8n_workflow",
-        workflowId,
-        workflowName,
-        ...(bridgeConversationId
-            ? {
-                sourceConversationId: bridgeConversationId,
-                terminalBridgeConversationId: bridgeConversationId,
-            }
-            : {}),
-    };
-}
-export function buildWorkflowDraftConversationMetadata(draftId, bridgeConversationId) {
-    return {
-        scope: "automation-workflow-draft",
-        automationType: "n8n_workflow",
-        draftId,
-        ...(bridgeConversationId
-            ? {
-                sourceConversationId: bridgeConversationId,
-                terminalBridgeConversationId: bridgeConversationId,
-            }
-            : {}),
-    };
-}
-export function buildAutomationDraftConversationMetadata(draftId, bridgeConversationId) {
-    return {
-        scope: "automation-draft",
-        draftId,
-        ...(bridgeConversationId
-            ? {
-                sourceConversationId: bridgeConversationId,
-                terminalBridgeConversationId: bridgeConversationId,
-            }
-            : {}),
-    };
-}
-export function buildAutomationResponseRoutingMetadata(metadata) {
-    if (metadata.scope === "automation-coordinator" ||
-        metadata.scope === "automation-workflow" ||
-        metadata.scope === "automation-workflow-draft" ||
-        metadata.scope === "automation-draft") {
-        return {
-            __responseContext: {
-                primaryContext: "automation",
-                secondaryContexts: ["automation", "code", "system"],
-            },
-        };
-    }
-    return undefined;
-}
-function normalizedMetadata(metadata) {
-    const next = {};
-    const scope = trimOptionalString(metadata?.scope);
-    if (scope)
-        next.scope = scope;
-    const automationType = trimOptionalString(metadata?.automationType);
-    if (automationType)
-        next.automationType = automationType;
-    const taskId = trimOptionalString(metadata?.taskId);
-    if (taskId)
-        next.taskId = taskId;
-    const triggerId = trimOptionalString(metadata?.triggerId);
-    if (triggerId)
-        next.triggerId = triggerId;
-    const workflowId = trimOptionalString(metadata?.workflowId);
-    if (workflowId)
-        next.workflowId = workflowId;
-    const workflowName = trimOptionalString(metadata?.workflowName);
-    if (workflowName)
-        next.workflowName = workflowName;
-    const draftId = trimOptionalString(metadata?.draftId);
-    if (draftId)
-        next.draftId = draftId;
-    const sourceConversationId = trimOptionalString(metadata?.sourceConversationId);
-    if (sourceConversationId)
-        next.sourceConversationId = sourceConversationId;
-    const terminalBridgeConversationId = trimOptionalString(metadata?.terminalBridgeConversationId);
-    if (terminalBridgeConversationId) {
-        next.terminalBridgeConversationId = terminalBridgeConversationId;
-    }
-    return next;
-}
-function automationIdentityForMetadata(metadata) {
-    if (metadata?.taskId) {
-        return `task:${metadata.taskId}`;
-    }
-    if (metadata?.triggerId) {
-        return `trigger:${metadata.triggerId}`;
-    }
-    if (metadata?.workflowId) {
-        return `workflow:${metadata.workflowId}`;
-    }
-    if (metadata?.draftId) {
-        return `workflow-draft:${metadata.draftId}`;
-    }
-    return null;
-}
-function metadataMatchesIdentity(left, right) {
-    const leftIdentity = automationIdentityForMetadata(left);
-    const rightIdentity = automationIdentityForMetadata(right);
-    if (!leftIdentity || !rightIdentity) {
-        return false;
-    }
-    return leftIdentity === rightIdentity;
-}
-function metadataEquals(left, right) {
-    const normalizedLeft = normalizedMetadata(left);
-    const normalizedRight = normalizedMetadata(right);
-    const leftKeys = Object.keys(normalizedLeft).sort();
-    const rightKeys = Object.keys(normalizedRight).sort();
-    if (leftKeys.length !== rightKeys.length) {
-        return false;
-    }
-    return leftKeys.every((key, index) => key === rightKeys[index] && normalizedLeft[key] === normalizedRight[key]);
-}
-export function findAutomationConversation(conversations, metadata) {
-    return (conversations
-        .filter((conversation) => isAutomationConversation(conversation) &&
-        metadataMatchesIdentity(conversation.metadata, metadata))
-        .sort(sortByUpdatedAtDesc)[0] ?? null);
-}
-export async function resolveAutomationConversation(params) {
-    const { conversations } = await client.listConversations();
-    const existing = findAutomationConversation(conversations, params.metadata);
-    const normalizedTitle = params.title.trim() || "Automation";
-    if (existing) {
-        if (existing.title === normalizedTitle &&
-            metadataEquals(existing.metadata, params.metadata)) {
-            return existing;
-        }
-        const { conversation } = await client.updateConversation(existing.id, {
-            title: normalizedTitle,
-            metadata: params.metadata,
-        });
-        return conversation;
-    }
-    const { conversation } = await client.createConversation(normalizedTitle, {
-        metadata: params.metadata,
-    });
-    return conversation;
-}