@elizaos/ui 2.0.0-beta.2 → 2.0.3-beta.2

package/components/pages/WorkflowEditor.js

@@ -13,18 +13,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * 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.
+ * Toolbar: Format JSON, Save, Activate/Deactivate, Run now. Validation is
+ * always-on via the debounced parse above (the status badge shows
+ * Valid/Invalid live), so there is no separate manual "Validate" control.
  */
-import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, PagePanel, Spinner, StatusBadge, Textarea, } from "@elizaos/ui";
-import { Play, RefreshCw, Save, Sparkles, Wand2 } from "lucide-react";
+import { AlertTriangle, CheckCircle2, ClipboardList, Clock3, Copy, Pause, PlayCircle, Power, RefreshCw, RotateCcw, Save, Wand2, } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { useAgentElement } from "../../agent-surface/index.js";
 import { client } from "../../api/index.js";
-import { isMissingCredentialsResponse, } from "../../api/client-types-chat.js";
 import { useDebouncedValue } from "../../hooks/useDebouncedValue.js";
+import { buildWorkflowExecutionDiagnostics, formatWorkflowEngineMetrics, getWorkflowExecutionRunRows, summarizeWorkflowExecution, } from "../../utils/workflow-executions.js";
 import { parseWorkflowJson, toWriteRequest, workflowToJsonText, } from "../../utils/workflow-json.js";
+import { PagePanel } from "../composites/page-panel/index.js";
+import { Button } from "../ui/button.js";
+import { Spinner } from "../ui/spinner.js";
+import { StatusBadge } from "../ui/status-badge.js";
 import { WorkflowGraphViewer } from "./WorkflowGraphViewer.js";
+const CHAT_PREFILL_EVENT = "eliza:chat:prefill";
 export function WorkflowEditor({ initial = null, onSaved, onCancel, }) {
     const [text, setText] = useState(() => workflowToJsonText(initial));
     const debouncedText = useDebouncedValue(text, 250);
@@ -40,12 +45,49 @@ export function WorkflowEditor({ initial = null, onSaved, onCancel, }) {
         },
         settings: {},
     });
+    const [persistedWorkflowId, setPersistedWorkflowId] = useState(() => initial?.id ?? null);
     const [saving, setSaving] = useState(false);
+    const [running, setRunning] = 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);
+    const [executionError, setExecutionError] = useState(null);
+    const [executions, setExecutions] = useState([]);
+    const [executionsLoading, setExecutionsLoading] = useState(false);
+    const [selectedExecutionId, setSelectedExecutionId] = useState(null);
+    const [diagnosticsCopying, setDiagnosticsCopying] = useState(false);
+    const [diagnosticsCopied, setDiagnosticsCopied] = useState(false);
+    const [evaluationSamplesCopying, setEvaluationSamplesCopying] = useState(false);
+    const [evaluationSamplesCopied, setEvaluationSamplesCopied] = useState(false);
+    const [revisions, setRevisions] = useState([]);
+    const [currentVersionId, setCurrentVersionId] = useState(() => initial?.versionId ?? null);
+    const [revisionsLoading, setRevisionsLoading] = useState(false);
+    const [revisionsError, setRevisionsError] = useState(null);
+    useEffect(() => {
+        setPersistedWorkflowId(initial?.id ?? null);
+        setText(workflowToJsonText(initial));
+        setLastValidWorkflow(initial);
+        setParseState({
+            ok: true,
+            workflow: initial ?? {
+                id: "draft",
+                name: "New workflow",
+                active: false,
+                nodes: [],
+                connections: {},
+            },
+            settings: {},
+        });
+        setSaveError(null);
+        setExecutionError(null);
+        setExecutions([]);
+        setSelectedExecutionId(null);
+        setDiagnosticsCopying(false);
+        setDiagnosticsCopied(false);
+        setEvaluationSamplesCopying(false);
+        setEvaluationSamplesCopied(false);
+        setRevisions([]);
+        setCurrentVersionId(initial?.versionId ?? null);
+        setRevisionsError(null);
+    }, [initial]);
     // Re-parse on debounced text change.
     useEffect(() => {
         const result = parseWorkflowJson(debouncedText);
@@ -54,6 +96,69 @@ export function WorkflowEditor({ initial = null, onSaved, onCancel, }) {
             setLastValidWorkflow(result.workflow);
     }, [debouncedText]);
     const isValid = parseState.ok;
+    const activeWorkflow = lastValidWorkflow ?? initial;
+    const workflowIsActive = activeWorkflow?.active === true;
+    const refreshExecutions = useCallback(async () => {
+        if (!persistedWorkflowId) {
+            setExecutions([]);
+            setSelectedExecutionId(null);
+            return;
+        }
+        setExecutionsLoading(true);
+        setExecutionError(null);
+        try {
+            const next = await client.getWorkflowExecutions(persistedWorkflowId, 20);
+            setExecutions(next);
+            setSelectedExecutionId((current) => current ?? next[0]?.id ?? null);
+        }
+        catch (e) {
+            setExecutionError(e instanceof Error ? e.message : "Failed to load workflow runs.");
+        }
+        finally {
+            setExecutionsLoading(false);
+        }
+    }, [persistedWorkflowId]);
+    useEffect(() => {
+        void refreshExecutions();
+    }, [refreshExecutions]);
+    const selectedExecution = executions.find((execution) => execution.id === selectedExecutionId) ??
+        executions[0] ??
+        null;
+    const loadRevisionsForWorkflow = useCallback(async (workflowId, fallbackVersionId) => {
+        if (!workflowId) {
+            setRevisions([]);
+            setCurrentVersionId(fallbackVersionId ?? null);
+            return;
+        }
+        setRevisionsLoading(true);
+        setRevisionsError(null);
+        try {
+            const next = await client.getWorkflowRevisions(workflowId, 10);
+            setCurrentVersionId(next.currentVersionId);
+            setRevisions(next.revisions);
+        }
+        catch (e) {
+            setRevisionsError(e instanceof Error ? e.message : "Failed to load workflow history.");
+        }
+        finally {
+            setRevisionsLoading(false);
+        }
+    }, []);
+    const refreshRevisions = useCallback(async () => {
+        if (!persistedWorkflowId) {
+            setRevisions([]);
+            setCurrentVersionId(lastValidWorkflow?.versionId ?? null);
+            return;
+        }
+        await loadRevisionsForWorkflow(persistedWorkflowId, lastValidWorkflow?.versionId ?? null);
+    }, [
+        persistedWorkflowId,
+        lastValidWorkflow?.versionId,
+        loadRevisionsForWorkflow,
+    ]);
+    useEffect(() => {
+        void refreshRevisions();
+    }, [refreshRevisions]);
     const handleFormat = useCallback(() => {
         const result = parseWorkflowJson(text);
         if (result.ok) {
@@ -70,12 +175,16 @@ export function WorkflowEditor({ initial = null, onSaved, onCancel, }) {
         setSaving(true);
         try {
             const req = toWriteRequest(parseState);
-            const saved = initial?.id
-                ? await client.updateWorkflowDefinition(initial.id, req)
+            const saved = persistedWorkflowId
+                ? await client.updateWorkflowDefinition(persistedWorkflowId, req)
                 : await client.createWorkflowDefinition(req);
-            onSaved?.(saved);
+            setPersistedWorkflowId(saved.id);
+            setCurrentVersionId(saved.versionId ?? null);
             setLastValidWorkflow(saved);
             setText(workflowToJsonText(saved));
+            onSaved?.(saved);
+            void refreshExecutions();
+            void loadRevisionsForWorkflow(saved.id, saved.versionId ?? null);
         }
         catch (e) {
             setSaveError(e instanceof Error ? e.message : "Failed to save workflow.");
@@ -83,60 +192,158 @@ export function WorkflowEditor({ initial = null, onSaved, onCancel, }) {
         finally {
             setSaving(false);
         }
-    }, [parseState, initial?.id, onSaved]);
-    const handleActivateRun = useCallback(async () => {
-        if (!initial?.id) {
-            setSaveError("Save the workflow before running it.");
+    }, [
+        parseState,
+        persistedWorkflowId,
+        onSaved,
+        refreshExecutions,
+        loadRevisionsForWorkflow,
+    ]);
+    const handleToggleActive = useCallback(async () => {
+        if (!persistedWorkflowId) {
+            setSaveError("Save the workflow before changing its schedule state.");
             return;
         }
         setSaving(true);
         setSaveError(null);
         try {
-            const updated = await client.activateWorkflowDefinition(initial.id);
+            const updated = workflowIsActive
+                ? await client.deactivateWorkflowDefinition(persistedWorkflowId)
+                : await client.activateWorkflowDefinition(persistedWorkflowId);
+            setCurrentVersionId(updated.versionId ?? null);
             setLastValidWorkflow(updated);
             setText(workflowToJsonText(updated));
+            void refreshRevisions();
+        }
+        catch (e) {
+            setSaveError(e instanceof Error ? e.message : "Failed to update workflow state.");
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [persistedWorkflowId, workflowIsActive, refreshRevisions]);
+    const handleRunNow = useCallback(async () => {
+        if (!persistedWorkflowId) {
+            setSaveError("Save the workflow before running it.");
+            return;
+        }
+        setRunning(true);
+        setSaveError(null);
+        setExecutionError(null);
+        try {
+            const execution = await client.runWorkflowDefinition(persistedWorkflowId);
+            setExecutions((current) => [
+                execution,
+                ...current.filter((item) => item.id !== execution.id),
+            ]);
+            setSelectedExecutionId(execution.id);
+            setDiagnosticsCopied(false);
+            setEvaluationSamplesCopied(false);
         }
         catch (e) {
-            setSaveError(e instanceof Error ? e.message : "Failed to activate workflow.");
+            setExecutionError(e instanceof Error ? e.message : "Failed to run workflow.");
+        }
+        finally {
+            setRunning(false);
+        }
+    }, [persistedWorkflowId]);
+    const handleRestoreRevision = useCallback(async (versionId) => {
+        if (!persistedWorkflowId)
+            return;
+        setSaving(true);
+        setSaveError(null);
+        setRevisionsError(null);
+        try {
+            const restored = await client.restoreWorkflowRevision(persistedWorkflowId, versionId);
+            setCurrentVersionId(restored.versionId ?? null);
+            setLastValidWorkflow(restored);
+            setText(workflowToJsonText(restored));
+            onSaved?.(restored);
+            void refreshExecutions();
+            void refreshRevisions();
+        }
+        catch (e) {
+            setRevisionsError(e instanceof Error
+                ? e.message
+                : "Failed to restore workflow version.");
         }
         finally {
             setSaving(false);
         }
-    }, [initial?.id]);
-    const handleGenerate = useCallback(async () => {
-        const prompt = generatorPrompt.trim();
-        if (!prompt)
+    }, [persistedWorkflowId, onSaved, refreshExecutions, refreshRevisions]);
+    const handleCopyDiagnostics = useCallback(async () => {
+        if (!selectedExecution)
+            return;
+        setDiagnosticsCopying(true);
+        setExecutionError(null);
+        try {
+            if (!navigator.clipboard?.writeText) {
+                throw new Error("Clipboard is not available in this browser.");
+            }
+            await navigator.clipboard.writeText(buildWorkflowExecutionDiagnostics(selectedExecution));
+            setDiagnosticsCopied(true);
+        }
+        catch (e) {
+            setExecutionError(e instanceof Error ? e.message : "Failed to copy workflow diagnostics.");
+        }
+        finally {
+            setDiagnosticsCopying(false);
+        }
+    }, [selectedExecution]);
+    const handleTroubleshootInChat = useCallback(() => {
+        if (!selectedExecution || typeof window === "undefined")
+            return;
+        const workflowId = persistedWorkflowId ?? selectedExecution.workflowId ?? "unknown";
+        const diagnostics = buildWorkflowExecutionDiagnostics(selectedExecution);
+        window.dispatchEvent(new CustomEvent(CHAT_PREFILL_EVENT, {
+            detail: {
+                text: [
+                    `Troubleshoot workflow ${workflowId} execution ${selectedExecution.id}.`,
+                    "",
+                    diagnostics,
+                ].join("\n"),
+                select: false,
+            },
+        }));
+    }, [persistedWorkflowId, selectedExecution]);
+    const handleEditInChat = useCallback(() => {
+        if (typeof window === "undefined")
             return;
-        setGenerating(true);
-        setGeneratorError(null);
+        const workflowName = lastValidWorkflow?.name ?? "this workflow";
+        const workflowId = persistedWorkflowId ?? lastValidWorkflow?.id ?? initial?.id ?? "draft";
+        const text = workflowId === "draft"
+            ? "Create a workflow that "
+            : `Modify workflow ${workflowId} (${workflowName}). `;
+        window.dispatchEvent(new CustomEvent(CHAT_PREFILL_EVENT, {
+            detail: {
+                text,
+                select: false,
+            },
+        }));
+    }, [initial?.id, lastValidWorkflow, persistedWorkflowId]);
+    const handleCopyEvaluationSamples = useCallback(async () => {
+        if (!persistedWorkflowId)
+            return;
+        setEvaluationSamplesCopying(true);
+        setExecutionError(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 (!navigator.clipboard?.writeText) {
+                throw new Error("Clipboard is not available in this browser.");
             }
-            if (isMissingCredentialsResponse(res)) {
-                setGeneratorError(`Generated, but missing credentials: ${res.missingCredentials
-                    .map((c) => c.credType)
-                    .join(", ")}`);
-                return;
+            const suite = await client.getWorkflowEvaluationSamples(persistedWorkflowId, 10);
+            if (suite.sampleCount === 0) {
+                throw new Error("Run this workflow before copying eval samples.");
             }
-            const definition = res;
-            setLastValidWorkflow(definition);
-            setText(workflowToJsonText(definition));
-            setGeneratorOpen(false);
-            setGeneratorPrompt("");
+            await navigator.clipboard.writeText(suite.jsonl);
+            setEvaluationSamplesCopied(true);
         }
         catch (e) {
-            setGeneratorError(e instanceof Error ? e.message : "Failed to generate workflow.");
+            setExecutionError(e instanceof Error ? e.message : "Failed to copy eval samples.");
         }
         finally {
-            setGenerating(false);
+            setEvaluationSamplesCopying(false);
         }
-    }, [generatorPrompt, initial?.id]);
+    }, [persistedWorkflowId]);
     const lineErrorBanner = useMemo(() => {
         if (parseState.ok)
             return null;
@@ -144,13 +351,154 @@ export function WorkflowEditor({ initial = null, onSaved, onCancel, }) {
         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"] })] })] })] }) })] }));
+    const selectedExecutionSummary = selectedExecution
+        ? summarizeWorkflowExecution(selectedExecution)
+        : null;
+    const selectedEngineMetrics = selectedExecution
+        ? formatWorkflowEngineMetrics(selectedExecution)
+        : null;
+    const selectedRunRows = selectedExecution
+        ? getWorkflowExecutionRunRows(selectedExecution)
+        : [];
+    const jsonEditor = useAgentElement({
+        id: "workflow-json",
+        role: "textarea",
+        label: "Workflow JSON",
+        group: "workflow-editor",
+        description: "The workflow definition as editable JSON.",
+        status: isValid ? "active" : "error",
+        getValue: () => text,
+        onFill: (value) => setText(value),
+    });
+    const editInChatButton = useAgentElement({
+        id: "edit-workflow-in-chat",
+        role: "button",
+        label: "Edit workflow in chat",
+        group: "workflow-toolbar",
+        description: "Ask the page chat to create or modify this workflow.",
+        onActivate: handleEditInChat,
+    });
+    const formatButton = useAgentElement({
+        id: "format-json",
+        role: "button",
+        label: "Format JSON",
+        group: "workflow-toolbar",
+        description: "Reformat the workflow JSON.",
+        onActivate: handleFormat,
+    });
+    const saveButton = useAgentElement({
+        id: "save",
+        role: "button",
+        label: "Save",
+        group: "workflow-toolbar",
+        description: "Save the workflow definition.",
+        status: saving ? "busy" : undefined,
+        onActivate: () => void handleSave(),
+    });
+    const activateButton = useAgentElement({
+        id: "toggle-active",
+        role: "button",
+        label: workflowIsActive ? "Deactivate workflow" : "Activate workflow",
+        group: "workflow-toolbar",
+        description: workflowIsActive
+            ? "Pause scheduled workflow runs."
+            : "Activate scheduled workflow runs.",
+        status: saving ? "busy" : undefined,
+        onActivate: () => void handleToggleActive(),
+    });
+    const runButton = useAgentElement({
+        id: "run-now",
+        role: "button",
+        label: "Run workflow now",
+        group: "workflow-toolbar",
+        description: "Run the saved workflow once and show the execution.",
+        status: running ? "busy" : undefined,
+        onActivate: () => void handleRunNow(),
+    });
+    const refreshRunsButton = useAgentElement({
+        id: "refresh-runs",
+        role: "button",
+        label: "Refresh workflow runs",
+        group: "workflow-executions",
+        description: "Reload recent workflow executions.",
+        status: executionsLoading ? "busy" : undefined,
+        onActivate: () => void refreshExecutions(),
+    });
+    const copyDiagnosticsButton = useAgentElement({
+        id: "copy-run-diagnostics",
+        role: "button",
+        label: "Copy run diagnostics",
+        group: "workflow-executions",
+        description: "Copy the selected workflow run status, node output, and error details.",
+        status: diagnosticsCopying
+            ? "busy"
+            : selectedExecution
+                ? "active"
+                : "inactive",
+        onActivate: () => void handleCopyDiagnostics(),
+    });
+    const troubleshootRunButton = useAgentElement({
+        id: "troubleshoot-run-in-chat",
+        role: "button",
+        label: "Troubleshoot run in chat",
+        group: "workflow-executions",
+        description: "Send the selected workflow run diagnostics to the page chat.",
+        status: selectedExecution ? "active" : "inactive",
+        onActivate: handleTroubleshootInChat,
+    });
+    const copyEvaluationSamplesButton = useAgentElement({
+        id: "copy-eval-samples",
+        role: "button",
+        label: "Copy eval samples",
+        group: "workflow-executions",
+        description: "Copy JSONL workflow evaluation samples for Smithers eval and GEPA optimization.",
+        status: evaluationSamplesCopying
+            ? "busy"
+            : persistedWorkflowId && executions.length > 0
+                ? "active"
+                : "inactive",
+        onActivate: () => void handleCopyEvaluationSamples(),
+    });
+    const closeButton = useAgentElement({
+        id: "close",
+        role: "button",
+        label: "Close",
+        group: "workflow-toolbar",
+        description: "Close the workflow editor.",
+        onActivate: () => onCancel?.(),
+    });
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col gap-3 overflow-auto pb-28 lg:overflow-hidden lg:pb-0", 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, { ref: editInChatButton.ref, ...editInChatButton.agentProps, variant: "outline", size: "sm", onClick: handleEditInChat, children: [_jsx(ClipboardList, { className: "mr-1.5 h-3.5 w-3.5", "aria-hidden": true }), _jsx("span", { className: "hidden sm:inline", children: "Edit in chat" }), _jsx("span", { className: "sm:hidden", children: "Chat" })] }), _jsxs(Button, { ref: formatButton.ref, ...formatButton.agentProps, 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, { ref: saveButton.ref, ...saveButton.agentProps, 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"] }), persistedWorkflowId && (_jsxs(Button, { ref: activateButton.ref, ...activateButton.agentProps, variant: "outline", size: "sm", onClick: () => void handleToggleActive(), disabled: saving, children: [workflowIsActive ? (_jsx(Pause, { className: "mr-1.5 h-3.5 w-3.5", "aria-hidden": true })) : (_jsx(Power, { className: "mr-1.5 h-3.5 w-3.5", "aria-hidden": true })), workflowIsActive ? "Deactivate" : "Activate"] })), persistedWorkflowId && (_jsxs(Button, { ref: runButton.ref, ...runButton.agentProps, variant: "outline", size: "sm", onClick: () => void handleRunNow(), disabled: running || saving, children: [running ? (_jsx(Spinner, { className: "mr-1.5 h-3.5 w-3.5" })) : (_jsx(PlayCircle, { className: "mr-1.5 h-3.5 w-3.5", "aria-hidden": true })), "Run now"] })), onCancel && (_jsx(Button, { ref: closeButton.ref, ...closeButton.agentProps, variant: "ghost", size: "sm", onClick: onCancel, children: "Close" }))] }), (saveError || lineErrorBanner) && (_jsx("div", { className: "rounded-sm 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-sm 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", { ref: jsonEditor.ref, ...jsonEditor.agentProps, value: text, onChange: (e) => setText(e.target.value), spellCheck: false, "data-testid": "workflow-editor-json", className: "min-h-[240px] flex-1 resize-none border-0 bg-transparent p-3 font-mono text-xs leading-relaxed text-txt outline-none sm:min-h-[320px]" })] }), _jsxs("div", { className: "flex min-h-0 flex-col gap-3", children: [_jsxs(PagePanel, { variant: "inset", className: "flex min-h-[280px] flex-1 flex-col overflow-hidden rounded-sm", 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: false, emptyStateHelpText: "Draft in chat. Review the graph, runs, and logs here." }) })] }), _jsxs(PagePanel, { variant: "inset", className: "flex min-h-[260px] flex-col overflow-hidden rounded-sm", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b border-border/40 px-3 py-2", children: [_jsxs("div", { className: "mr-auto min-w-0", children: [_jsx("div", { className: "text-xs font-medium text-txt", children: "Runs" }), _jsx("div", { className: "truncate text-2xs text-muted-strong", children: persistedWorkflowId
+                                                            ? `${executions.length} recent execution${executions.length === 1 ? "" : "s"}`
+                                                            : "Save before running" })] }), _jsxs(Button, { ref: copyEvaluationSamplesButton.ref, ...copyEvaluationSamplesButton.agentProps, variant: "ghost", size: "sm", className: "h-7 px-2 text-2xs", onClick: () => void handleCopyEvaluationSamples(), disabled: !persistedWorkflowId ||
+                                                    executions.length === 0 ||
+                                                    evaluationSamplesCopying, "aria-label": "Copy eval samples", children: [evaluationSamplesCopying ? (_jsx(Spinner, { className: "mr-1.5 h-3.5 w-3.5" })) : (_jsx(ClipboardList, { className: "mr-1.5 h-3.5 w-3.5", "aria-hidden": true })), _jsx("span", { className: "hidden sm:inline", children: evaluationSamplesCopied ? "Copied" : "Copy samples" })] }), _jsx(Button, { ref: refreshRunsButton.ref, ...refreshRunsButton.agentProps, variant: "ghost", size: "icon", className: "h-7 w-7", onClick: () => void refreshExecutions(), disabled: !persistedWorkflowId || executionsLoading, "aria-label": "Refresh workflow runs", children: executionsLoading ? (_jsx(Spinner, { className: "h-3.5 w-3.5" })) : (_jsx(RefreshCw, { className: "h-3.5 w-3.5", "aria-hidden": true })) })] }), executionError && (_jsx("div", { className: "border-b border-danger/20 bg-danger/10 px-3 py-2 text-xs text-danger", children: executionError })), _jsxs("div", { className: "grid min-h-0 flex-1 gap-0 md:grid-cols-[minmax(0,0.85fr)_minmax(0,1.15fr)]", children: [_jsx("div", { className: "min-h-[96px] overflow-auto border-b border-border/40 md:border-r md:border-b-0", children: executions.length === 0 ? (_jsx("div", { className: "flex h-full min-h-[96px] items-center px-3 text-xs text-muted-strong", children: persistedWorkflowId
+                                                        ? "No runs yet."
+                                                        : "Save the workflow to run it." })) : (_jsx("div", { className: "divide-y divide-border/40", children: executions.map((execution) => {
+                                                        const summary = summarizeWorkflowExecution(execution);
+                                                        const selected = execution.id === selectedExecution?.id;
+                                                        return (_jsxs("button", { type: "button", className: `flex w-full min-w-0 items-center gap-2 px-3 py-2 text-left hover:bg-bg-accent/50 ${selected ? "bg-bg-accent" : ""}`, onClick: () => {
+                                                                setSelectedExecutionId(execution.id);
+                                                                setDiagnosticsCopied(false);
+                                                            }, children: [summary.tone === "success" ? (_jsx(CheckCircle2, { className: "h-3.5 w-3.5 shrink-0 text-ok", "aria-hidden": true })) : summary.tone === "danger" ? (_jsx(AlertTriangle, { className: "h-3.5 w-3.5 shrink-0 text-danger", "aria-hidden": true })) : (_jsx(Clock3, { className: "h-3.5 w-3.5 shrink-0 text-muted-strong", "aria-hidden": true })), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-xs font-medium text-txt", children: summary.statusLabel }), _jsxs("span", { className: "block truncate text-2xs text-muted-strong", children: [new Date(execution.startedAt).toLocaleString(), " /", " ", summary.durationLabel] })] })] }, execution.id));
+                                                    }) })) }), _jsx("div", { className: "min-h-[156px] overflow-auto p-3", children: !selectedExecution || !selectedExecutionSummary ? (_jsx("div", { className: "flex h-full min-h-[128px] items-center text-xs text-muted-strong", children: "Select a run to inspect node output, logs, and errors." })) : (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(StatusBadge, { tone: selectedExecutionSummary.tone, label: selectedExecutionSummary.statusLabel }), _jsxs("span", { className: "text-2xs text-muted-strong", children: [selectedExecutionSummary.nodeCount, " node", selectedExecutionSummary.nodeCount === 1 ? "" : "s", " /", " ", selectedExecutionSummary.durationLabel] }), selectedEngineMetrics && (_jsxs("span", { className: "text-2xs text-muted-strong", children: ["/ ", selectedEngineMetrics] })), _jsxs(Button, { ref: copyDiagnosticsButton.ref, ...copyDiagnosticsButton.agentProps, variant: "ghost", size: "sm", className: "ml-auto h-7 px-2 text-2xs", onClick: () => void handleCopyDiagnostics(), disabled: !selectedExecution || diagnosticsCopying, children: [diagnosticsCopying ? (_jsx(Spinner, { className: "mr-1.5 h-3.5 w-3.5" })) : (_jsx(Copy, { className: "mr-1.5 h-3.5 w-3.5", "aria-hidden": true })), diagnosticsCopied ? "Copied" : "Copy diagnostics"] }), _jsxs(Button, { ref: troubleshootRunButton.ref, ...troubleshootRunButton.agentProps, variant: "ghost", size: "sm", className: "h-7 px-2 text-2xs", "aria-label": "Troubleshoot run in chat", onClick: handleTroubleshootInChat, disabled: !selectedExecution, children: [_jsx(AlertTriangle, { className: "mr-0 h-3.5 w-3.5 sm:mr-1.5", "aria-hidden": true }), _jsx("span", { className: "hidden sm:inline", children: "Troubleshoot" })] })] }), selectedExecutionSummary.error && (_jsx("div", { className: "rounded-sm border border-danger/20 bg-danger/10 p-2 text-xs text-danger", children: selectedExecutionSummary.error })), selectedRunRows.length === 0 ? (_jsx("div", { className: "text-xs text-muted-strong", children: "This execution has no node output yet." })) : (_jsx("div", { className: "space-y-2", children: selectedRunRows.map((row) => (_jsxs("div", { className: "rounded-sm border border-border/50 bg-bg/40 p-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(StatusBadge, { tone: row.status === "error"
+                                                                                    ? "danger"
+                                                                                    : row.status === "success"
+                                                                                        ? "success"
+                                                                                        : "muted", label: row.status }), _jsx("span", { className: "min-w-0 flex-1 truncate text-xs font-medium text-txt", children: row.nodeName }), _jsxs("span", { className: "shrink-0 text-2xs text-muted-strong", children: [row.itemCount, " item", row.itemCount === 1 ? "" : "s"] })] }), _jsx("pre", { className: "mt-2 max-h-24 overflow-auto whitespace-pre-wrap break-words rounded-sm bg-bg-accent/50 p-2 text-2xs leading-relaxed text-muted-strong", children: row.error ?? row.preview })] }, `${row.nodeName}-${row.startTime ?? row.preview}`))) }))] })) })] })] }), _jsxs(PagePanel, { variant: "inset", className: "flex min-h-[132px] flex-col overflow-hidden rounded-sm", children: [_jsx("div", { className: "flex flex-wrap items-center gap-2 border-b border-border/40 px-3 py-2", children: _jsxs("div", { className: "mr-auto min-w-0", children: [_jsx("div", { className: "text-xs font-medium text-txt", children: "History" }), _jsx("div", { className: "truncate text-2xs text-muted-strong", children: currentVersionId
+                                                        ? `Current ${currentVersionId.slice(0, 8)}`
+                                                        : "Unsaved draft" })] }) }), revisionsError && (_jsx("div", { className: "border-b border-danger/20 bg-danger/10 px-3 py-2 text-xs text-danger", children: revisionsError })), _jsx("div", { className: "min-h-0 flex-1 overflow-auto px-3 py-2", children: revisionsLoading ? (_jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-strong", children: [_jsx(Spinner, { className: "h-3.5 w-3.5" }), "Loading history"] })) : revisions.length === 0 ? (_jsx("div", { className: "text-xs text-muted-strong", children: "Save an edit to create a restorable version." })) : (_jsx("div", { className: "space-y-1.5", children: revisions.slice(0, 4).map((revision) => (_jsx(WorkflowRevisionRow, { revision: revision, disabled: !persistedWorkflowId || saving, onRestore: handleRestoreRevision }, revision.id))) })) })] })] })] })] }));
+}
+function WorkflowRevisionRow({ revision, disabled, onRestore, }) {
+    const capturedAt = new Date(revision.capturedAt).toLocaleString();
+    const versionLabel = revision.versionId.slice(0, 8);
+    const restoreAction = useAgentElement({
+        id: `restore-workflow-version-${versionLabel}`,
+        role: "button",
+        label: `Restore ${revision.name}`,
+        group: "workflow-history",
+        description: `Restore workflow version ${versionLabel} captured after ${revision.operation}.`,
+        status: disabled ? "inactive" : "active",
+        onActivate: () => onRestore(revision.versionId),
+    });
+    return (_jsxs("div", { className: "flex min-w-0 items-center gap-2 rounded-sm px-1 py-1 text-xs hover:bg-bg-accent/40", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-txt", children: revision.name }), _jsxs("div", { className: "truncate text-2xs text-muted-strong", children: [revision.operation, " / ", capturedAt, " / ", versionLabel] })] }), _jsx(Button, { ref: restoreAction.ref, ...restoreAction.agentProps, variant: "ghost", size: "icon", className: "h-7 w-7 shrink-0", onClick: () => onRestore(revision.versionId), disabled: disabled, "aria-label": `Restore ${revision.name}`, children: _jsx(RotateCcw, { className: "h-3.5 w-3.5", "aria-hidden": true }) })] }));
 }

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

@@ -1 +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"}
+{"version":3,"file":"WorkflowGraphViewer.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/WorkflowGraphViewer.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAEV,kBAAkB,EAEnB,MAAM,6BAA6B,CAAC;AAqiBrC,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,qBAAqB,EACrB,kBAAkB,EAClB,WAAW,EACX,kBAAkB,GACnB,EAAE,wBAAwB,2CA0R1B"}