@elizaos/ui 2.0.0-alpha.85 → 2.0.0-beta.2

package/components/pages/WorkflowEditor.d.ts

@@ -0,0 +1,26 @@
+/**
+ * WorkflowEditor — text-first workflow editing surface.
+ *
+ * Layout: split-pane on desktop (JSON editor left, React Flow viewer
+ * right). On narrow viewports the editor stacks above the viewer.
+ *
+ * The JSON editor is a plain `<textarea>` — Monaco / CodeMirror are too
+ * heavy for the few hundred lines of JSON a workflow contains, and
+ * neither library is currently a dependency of `@elizaos/ui`.
+ *
+ * Reactivity: `value` is debounced via `useDebouncedValue`; on debounce
+ * settle we parse the JSON. Valid → push to the viewer. Invalid → keep
+ * the last valid graph rendered and surface the error inline.
+ *
+ * Toolbar: Generate from prompt, Validate, Save, Run. The Validate
+ * action is local-only (re-runs `parseWorkflowJson`) until the workflow
+ * plugin exposes a richer validation endpoint.
+ */
+import { type WorkflowDefinition } from "../../api/client-types-chat";
+export interface WorkflowEditorProps {
+    initial?: WorkflowDefinition | null;
+    onSaved?: (workflow: WorkflowDefinition) => void;
+    onCancel?: () => void;
+}
+export declare function WorkflowEditor({ initial, onSaved, onCancel, }: WorkflowEditorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=WorkflowEditor.d.ts.map

package/components/pages/WorkflowEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkflowEditor.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/WorkflowEditor.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAgBH,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,6BAA6B,CAAC;AAUrC,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,cAAc,CAAC,EAC7B,OAAc,EACd,OAAO,EACP,QAAQ,GACT,EAAE,mBAAmB,2CA0SrB"}

package/components/pages/WorkflowEditor.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * WorkflowEditor — text-first workflow editing surface.
+ *
+ * Layout: split-pane on desktop (JSON editor left, React Flow viewer
+ * right). On narrow viewports the editor stacks above the viewer.
+ *
+ * The JSON editor is a plain `<textarea>` — Monaco / CodeMirror are too
+ * heavy for the few hundred lines of JSON a workflow contains, and
+ * neither library is currently a dependency of `@elizaos/ui`.
+ *
+ * Reactivity: `value` is debounced via `useDebouncedValue`; on debounce
+ * settle we parse the JSON. Valid → push to the viewer. Invalid → keep
+ * the last valid graph rendered and surface the error inline.
+ *
+ * Toolbar: Generate from prompt, Validate, Save, Run. The Validate
+ * action is local-only (re-runs `parseWorkflowJson`) until the workflow
+ * plugin exposes a richer validation endpoint.
+ */
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, PagePanel, Spinner, StatusBadge, Textarea, } from "@elizaos/ui";
+import { Play, RefreshCw, Save, Sparkles, Wand2 } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { client } from "../../api/index.js";
+import { isMissingCredentialsResponse, } from "../../api/client-types-chat.js";
+import { useDebouncedValue } from "../../hooks/useDebouncedValue.js";
+import { parseWorkflowJson, toWriteRequest, workflowToJsonText, } from "../../utils/workflow-json.js";
+import { WorkflowGraphViewer } from "./WorkflowGraphViewer.js";
+export function WorkflowEditor({ initial = null, onSaved, onCancel, }) {
+    const [text, setText] = useState(() => workflowToJsonText(initial));
+    const debouncedText = useDebouncedValue(text, 250);
+    const [lastValidWorkflow, setLastValidWorkflow] = useState(initial);
+    const [parseState, setParseState] = useState({
+        ok: true,
+        workflow: initial ?? {
+            id: "draft",
+            name: "New workflow",
+            active: false,
+            nodes: [],
+            connections: {},
+        },
+        settings: {},
+    });
+    const [saving, setSaving] = useState(false);
+    const [saveError, setSaveError] = useState(null);
+    const [generating, setGenerating] = useState(false);
+    const [generatorPrompt, setGeneratorPrompt] = useState("");
+    const [generatorOpen, setGeneratorOpen] = useState(false);
+    const [generatorError, setGeneratorError] = useState(null);
+    // Re-parse on debounced text change.
+    useEffect(() => {
+        const result = parseWorkflowJson(debouncedText);
+        setParseState(result);
+        if (result.ok)
+            setLastValidWorkflow(result.workflow);
+    }, [debouncedText]);
+    const isValid = parseState.ok;
+    const handleFormat = useCallback(() => {
+        const result = parseWorkflowJson(text);
+        if (result.ok) {
+            setText(workflowToJsonText(result.workflow));
+        }
+    }, [text]);
+    const handleSave = useCallback(async () => {
+        if (!parseState.ok) {
+            const invalid = parseState;
+            setSaveError(invalid.message);
+            return;
+        }
+        setSaveError(null);
+        setSaving(true);
+        try {
+            const req = toWriteRequest(parseState);
+            const saved = initial?.id
+                ? await client.updateWorkflowDefinition(initial.id, req)
+                : await client.createWorkflowDefinition(req);
+            onSaved?.(saved);
+            setLastValidWorkflow(saved);
+            setText(workflowToJsonText(saved));
+        }
+        catch (e) {
+            setSaveError(e instanceof Error ? e.message : "Failed to save workflow.");
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [parseState, initial?.id, onSaved]);
+    const handleActivateRun = useCallback(async () => {
+        if (!initial?.id) {
+            setSaveError("Save the workflow before running it.");
+            return;
+        }
+        setSaving(true);
+        setSaveError(null);
+        try {
+            const updated = await client.activateWorkflowDefinition(initial.id);
+            setLastValidWorkflow(updated);
+            setText(workflowToJsonText(updated));
+        }
+        catch (e) {
+            setSaveError(e instanceof Error ? e.message : "Failed to activate workflow.");
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [initial?.id]);
+    const handleGenerate = useCallback(async () => {
+        const prompt = generatorPrompt.trim();
+        if (!prompt)
+            return;
+        setGenerating(true);
+        setGeneratorError(null);
+        try {
+            const res = await client.generateWorkflowDefinition({
+                prompt,
+                workflowId: initial?.id,
+            });
+            if ("status" in res && res.status === "needs_clarification") {
+                setGeneratorError("The workflow generator needs clarification — open the Automations chat to answer.");
+                return;
+            }
+            if (isMissingCredentialsResponse(res)) {
+                setGeneratorError(`Generated, but missing credentials: ${res.missingCredentials
+                    .map((c) => c.credType)
+                    .join(", ")}`);
+                return;
+            }
+            const definition = res;
+            setLastValidWorkflow(definition);
+            setText(workflowToJsonText(definition));
+            setGeneratorOpen(false);
+            setGeneratorPrompt("");
+        }
+        catch (e) {
+            setGeneratorError(e instanceof Error ? e.message : "Failed to generate workflow.");
+        }
+        finally {
+            setGenerating(false);
+        }
+    }, [generatorPrompt, initial?.id]);
+    const lineErrorBanner = useMemo(() => {
+        if (parseState.ok)
+            return null;
+        const invalid = parseState;
+        const where = invalid.line ? ` (line ${invalid.line})` : "";
+        return `${invalid.message}${where}`;
+    }, [parseState]);
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b border-border/40 pb-3", children: [_jsxs("div", { className: "mr-auto flex items-center gap-2 min-w-0", children: [_jsx("h2", { className: "truncate text-base font-semibold tracking-[-0.01em] text-txt", children: lastValidWorkflow?.name ?? "New workflow" }), _jsx(StatusBadge, { tone: isValid ? "success" : "danger", label: isValid ? "Valid" : "Invalid JSON" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setGeneratorOpen(true), disabled: generating, children: [_jsx(Sparkles, { className: "mr-1.5 h-3.5 w-3.5", "aria-hidden": true }), "Generate from prompt"] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: handleFormat, disabled: !isValid, children: [_jsx(Wand2, { className: "mr-1.5 h-3.5 w-3.5", "aria-hidden": true }), "Format JSON"] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
+                            const result = parseWorkflowJson(text);
+                            setParseState(result);
+                            if (result.ok)
+                                setLastValidWorkflow(result.workflow);
+                        }, children: [_jsx(RefreshCw, { className: "mr-1.5 h-3.5 w-3.5", "aria-hidden": true }), "Validate"] }), _jsxs(Button, { variant: "default", size: "sm", onClick: () => void handleSave(), disabled: saving || !isValid, children: [saving ? (_jsx(Spinner, { className: "mr-1.5 h-3.5 w-3.5" })) : (_jsx(Save, { className: "mr-1.5 h-3.5 w-3.5", "aria-hidden": true })), "Save"] }), initial?.id && (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => void handleActivateRun(), disabled: saving, children: [_jsx(Play, { className: "mr-1.5 h-3.5 w-3.5", "aria-hidden": true }), "Activate"] })), onCancel && (_jsx(Button, { variant: "ghost", size: "sm", onClick: onCancel, children: "Close" }))] }), (saveError || lineErrorBanner) && (_jsx("div", { className: "rounded-lg border border-danger/20 bg-danger/10 p-2.5 text-xs text-danger", children: saveError ?? lineErrorBanner })), _jsxs("div", { className: "grid min-h-0 flex-1 gap-3 lg:grid-cols-2", children: [_jsxs(PagePanel, { variant: "inset", className: "flex min-h-0 flex-col overflow-hidden rounded-xl p-0", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-border/40 px-3 py-2 text-xs text-muted-strong", children: [_jsx("span", { className: "font-medium text-txt", children: "workflow.json" }), _jsxs("span", { children: [text.split("\n").length, " lines"] })] }), _jsx("textarea", { value: text, onChange: (e) => setText(e.target.value), spellCheck: false, "data-testid": "workflow-editor-json", className: "min-h-[320px] flex-1 resize-none border-0 bg-transparent p-3 font-mono text-xs leading-relaxed text-txt outline-none" })] }), _jsxs(PagePanel, { variant: "inset", className: "flex min-h-0 flex-col overflow-hidden rounded-xl", children: [_jsx("div", { className: "border-b border-border/40 px-3 py-2 text-xs font-medium text-txt", children: "Graph" }), _jsx("div", { className: "flex-1 p-3", children: _jsx(WorkflowGraphViewer, { workflow: lastValidWorkflow, loading: false, isGenerating: generating, emptyStateActionLabel: "Generate from prompt", emptyStateHelpText: "Describe the trigger and the steps. The graph re-renders on every JSON change.", onEmptyStateAction: () => setGeneratorOpen(true) }) })] })] }), _jsx(Dialog, { open: generatorOpen, onOpenChange: (open) => {
+                    if (!generating)
+                        setGeneratorOpen(open);
+                }, children: _jsxs(DialogContent, { className: "max-w-lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Generate workflow from prompt" }) }), _jsxs("div", { className: "space-y-3", children: [_jsx(Textarea, { value: generatorPrompt, onChange: (e) => setGeneratorPrompt(e.target.value), placeholder: "When a new starred email arrives in Gmail, post a summary in #ops on Slack.", rows: 5, autoFocus: true }), generatorError && (_jsx("div", { className: "rounded-md border border-danger/20 bg-danger/10 p-2 text-xs text-danger", children: generatorError })), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setGeneratorOpen(false), disabled: generating, children: "Cancel" }), _jsxs(Button, { variant: "default", size: "sm", onClick: () => void handleGenerate(), disabled: generating || !generatorPrompt.trim(), children: [generating ? (_jsx(Spinner, { className: "mr-1.5 h-3.5 w-3.5" })) : (_jsx(Sparkles, { className: "mr-1.5 h-3.5 w-3.5", "aria-hidden": true })), "Generate"] })] })] })] }) })] }));
+}

package/components/pages/WorkflowGraphViewer.d.ts

@@ -0,0 +1,13 @@
+import type { WorkflowDefinition } from "../../api/client-types-chat";
+interface WorkflowGraphViewerProps {
+    workflow: WorkflowDefinition | null;
+    loading?: boolean;
+    isGenerating?: boolean;
+    emptyStateActionLabel?: string;
+    emptyStateHelpText?: string;
+    onNodeClick?: (nodeName: string) => void;
+    onEmptyStateAction?: () => void;
+}
+export declare function WorkflowGraphViewer({ workflow, loading, isGenerating, emptyStateActionLabel, emptyStateHelpText, onNodeClick, onEmptyStateAction, }: WorkflowGraphViewerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=WorkflowGraphViewer.d.ts.map

package/components/pages/WorkflowGraphViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkflowGraphViewer.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/WorkflowGraphViewer.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAEV,kBAAkB,EAEnB,MAAM,6BAA6B,CAAC;AA8mBrC,UAAU,wBAAwB;IAChC,QAAQ,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACpC,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;CACjC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,OAAe,EACf,YAAoB,EACpB,qBAAgD,EAChD,kBAAqE,EACrE,WAAW,EACX,kBAAkB,GACnB,EAAE,wBAAwB,2CAsO1B"}

package/components/pages/WorkflowGraphViewer.js

@@ -0,0 +1,378 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, Spinner, StatusBadge, } from "@elizaos/ui";
+import { Background, Controls, MiniMap, ReactFlow, } from "@xyflow/react";
+import { Maximize2, X } from "lucide-react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
+import { useApp } from "../../state/index.js";
+// ── 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 workflow 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 workflow",
+        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 NodeDetailDrawer({ node, onClose, labelId }) {
+    const { t } = 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;
+    // 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") }))] })] })) })] }));
+}
+// ── 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, }) {
+    const { 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 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" }) })), !fullScreen && (_jsx(NodeDetailDrawer, { node: selectedNode, workflow: workflow, 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, onClose: handleCloseDrawer, labelId: drawerLabelId })] })] }) })] }));
+}

package/components/pages/automation-conversations.d.ts

@@ -0,0 +1,16 @@
+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/components/pages/automation-conversations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"automation-conversations.d.ts","sourceRoot":"","sources":["../../../../../../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"}