@burdenoff/fluidgrids-fe-sdk 2026.1023.5 → 2026.1024.2

package/dist/{chunk-JG7UFL5M.js → chunk-IZMYI6QO.js}

@@ -2,16 +2,16 @@ import { deepClone, applyTemplateInputs } from './chunk-GEMNVFPK.js';
 import { Input as Input$1 } from './chunk-IEVSFCFS.js';
 import { Dialog as Dialog$1, DialogContent as DialogContent$1, DialogHeader as DialogHeader$1, DialogTitle as DialogTitle$1, DialogDescription as DialogDescription$1, DialogFooter } from './chunk-YXMFRQYV.js';
 import { Badge as Badge$1, Button } from './chunk-BQXVT32O.js';
-import { QuotaExhaustedDialog } from './chunk-3VF67N3X.js';
-import { EntityTagPicker } from './chunk-IULOX3NQ.js';
-import { useWorkflowVersions, useRestoreWorkflowVersion, useActivateWorkflow, useDeleteWorkflow, useLazyWorkflowDefinition, useDeactivateWorkflow } from './chunk-J3XDX5HG.js';
+import { QuotaExhaustedDialog } from './chunk-GCOWR7J4.js';
+import { EntityTagPicker } from './chunk-XFVNTWM2.js';
+import { useWorkflowVersions, useRestoreWorkflowVersion, useActivateWorkflow, useDeleteWorkflow, useLazyWorkflowDefinition, useDeactivateWorkflow } from './chunk-S5ZKDRBV.js';
 import { FluidGridsDocsLink } from './chunk-4VJ3MDOV.js';
-import { RUNS_QUOTA_NAME, throwIfResultError, useFlowStore, BILLING_PLANS_PATH, emitUpgradeClicked, FluidGridsContext, emitWorkflowCreated, emitTemplateUsed, ensureNodeConfigsLoaded, NODE_CONFIGS, registerWorkflowNodeTypes, emitNodeInstalled, useNodeExecution, onNodeTypesUpdate, NODE_TYPES, getNodeMetadata, useIsValidConnection, refetchStoreNodes, AVAILABLE_NODES, useInsertNode, NODE_TYPE_DRAG_DATA_FORMAT, NODE_OPERATION_DRAG_DATA_FORMAT, useSaveWorkflow, SdkPermissionButton, FLUIDGRIDS_PERMISSIONS, STICKY_NOTE_TYPE, fieldsFromValue, getNodeDetail, useFluidGridsAnalytics, isNodeTrigger, buildStickyNode, fieldsFromIO, ConnectionSelector, structuredParameterType, nodeAccent, NodeTypeIcon, NODES_METADATA, resolveNodeOperation, declaredOutputFields, pathToExpression, ExpressionEditor, formatParameterValue, parseParameterValue, isNodeConfigsInitialized, resolveUiSpec, isImageIcon, NODES, synchronizeOperationUpdate, NodePropertyPanel, openRunQuotaUpgradePrompt, describeOperationError, isTriggerOperation, canRenderOperationPanel, resolveOperationName, resolveInputHandles } from './chunk-MR4OTF7D.js';
+import { RUNS_QUOTA_NAME, throwIfResultError, useFlowStore, BILLING_PLANS_PATH, emitUpgradeClicked, FluidGridsContext, emitWorkflowCreated, emitTemplateUsed, ensureNodeConfigsLoaded, NODE_CONFIGS, registerWorkflowNodeTypes, emitNodeInstalled, useNodeExecution, onNodeTypesUpdate, NODE_TYPES, getNodeMetadata, useIsValidConnection, refetchStoreNodes, AVAILABLE_NODES, useInsertNode, NODE_TYPE_DRAG_DATA_FORMAT, NODE_OPERATION_DRAG_DATA_FORMAT, useSaveWorkflow, SdkPermissionButton, FLUIDGRIDS_PERMISSIONS, STICKY_NOTE_TYPE, fieldsFromValue, getNodeDetail, useFluidGridsAnalytics, buildOperationSeed, isNodeTrigger, buildStickyNode, fieldsFromIO, ConnectionSelector, structuredParameterType, nodeAccent, NodeTypeIcon, NODES_METADATA, resolveNodeOperation, declaredOutputFields, pathToExpression, ExpressionEditor, formatParameterValue, parseParameterValue, isNodeConfigsInitialized, resolveUiSpec, isImageIcon, NODES, synchronizeOperationUpdate, NodePropertyPanel, openRunQuotaUpgradePrompt, describeOperationError, isTriggerOperation, canRenderOperationPanel, resolveOperationName, resolveInputHandles } from './chunk-T7X3HDNX.js';
 import { cn } from './chunk-JL7CASN5.js';
 import { getGlobalStoreClient } from './chunk-PXIFUMLA.js';
 import { getFluidGridsConfig } from './chunk-CY6KX4RG.js';
 import { GetMyNodeInstallationsDocument, BrowseWorkflowTemplatesDocument, InstallWorkflowNodeDocument, InstallPurchasedNodeDocument, BrowseWorkflowNodesDocument, UninstallWorkflowNodeDocument, CreateStoreOrderDocument, GetNodeInstallableVersionsDocument } from './chunk-WBH2XEWO.js';
-import { WorkspaceRunsQuotaDocument, NodeSchemaIntrospectionDocument, useWorkflowPinnedDataQuery, usePinNodeDataMutation, useUnpinNodeDataMutation, useRunFromNodeEligibilityQuery, EventRegistrationsDocument, WebhookTestListenerDocument, StopWebhookTestListenerDocument, ListenForWebhookTestEventDocument, NodeUsageStatusDocument, RemoveNodeFromWorkflowsDocument } from './chunk-CZURRUDX.js';
+import { WorkspaceRunsQuotaDocument, NodeSchemaIntrospectionDocument, useWorkflowPinnedDataQuery, usePinNodeDataMutation, useUnpinNodeDataMutation, WorkflowGenerationTemplatesDocument, WorkflowGenerationDocument, GenerateWorkflowFromPromptDocument, useRunFromNodeEligibilityQuery, EventRegistrationsDocument, WebhookTestListenerDocument, StopWebhookTestListenerDocument, ListenForWebhookTestEventDocument, NodeUsageStatusDocument, RemoveNodeFromWorkflowsDocument } from './chunk-GD7CSKFD.js';
 import { useTr } from './chunk-UULVIT25.js';
 import { getFluidGridsClient, waitForFluidGridsClient, getFluidGridsClientSafe } from './chunk-NTWG3CJX.js';
 import * as React3 from 'react';
@@ -19,13 +19,13 @@ import React3__default, { forwardRef, lazy, memo, createContext, useState, useRe
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { gql } from '@apollo/client';
 import { cn as cn$1 } from '@burdenoff/fe-libs/utils';
-import { Card as Card$1, Badge, CardContent as CardContent$1, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Button as Button$1, Input, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, TooltipProvider, AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, DropdownMenuItem, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Popover, PopoverTrigger, PopoverContent, Tooltip, TooltipTrigger, TooltipContent, Toaster, Tabs, TabsList, TabsTrigger, TabsContent, CardHeader as CardHeader$1, CardTitle as CardTitle$1, CardDescription as CardDescription$1, ScrollArea, Label, DropdownMenuLabel, DropdownMenuSeparator, Textarea } from '@burdenoff/fe-libs/ui';
+import { Card as Card$1, Badge, CardContent as CardContent$1, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Button as Button$1, Input, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, Label, Textarea, AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, TooltipProvider, DropdownMenuItem, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Popover, PopoverTrigger, PopoverContent, Tooltip, TooltipTrigger, TooltipContent, Toaster, Tabs, TabsList, TabsTrigger, TabsContent, CardHeader as CardHeader$1, CardTitle as CardTitle$1, CardDescription as CardDescription$1, ScrollArea, DropdownMenuLabel, DropdownMenuSeparator } from '@burdenoff/fe-libs/ui';
 import { Link, useNavigate, useParams } from 'react-router';
 import { useEventBus } from '@burdenoff/fe-libs/shared/events';
 import { useQuery, useMutation } from '@apollo/client/react';
 import { gql as gql$1 } from '@apollo/client/core';
 import 'jszip';
-import { Sparkles, Star, Download, Eye, History, GitCompareArrows, Loader2, Play, RotateCcw, Trash2, Maximize2, Undo2, Redo2, LayoutGrid, Keyboard, Plus, GitBranch, AlertCircle, Search, RefreshCw, CheckCircle2, Package, Info, Copy, BadgeCheck, DollarSign, Type, Code, Hash, List, Braces, Workflow, PlusCircle, ChevronDown, ChevronRight, Layers, X, AlertTriangle } from 'lucide-react';
+import { Sparkles, Star, Download, Eye, Loader2, History, GitCompareArrows, Play, RotateCcw, Trash2, Maximize2, Undo2, Redo2, LayoutGrid, Keyboard, Plus, GitBranch, AlertCircle, Search, RefreshCw, CheckCircle2, Package, Info, Copy, BadgeCheck, DollarSign, Type, Code, Hash, List, Braces, Workflow, PlusCircle, ChevronDown, ChevronRight, Layers, X, AlertTriangle } from 'lucide-react';
 import { Icon } from '@iconify/react';
 import { toast } from 'sonner';
 import { useShallow, shallow } from 'zustand/shallow';
@@ -6456,8 +6456,8 @@ var reducer = (state, action) => {
       if (toastId) {
         addToRemoveQueue(toastId);
       } else {
-        state.toasts.forEach((toast10) => {
-          addToRemoveQueue(toast10.id);
+        state.toasts.forEach((toast11) => {
+          addToRemoveQueue(toast11.id);
         });
       }
       return {
@@ -7833,7 +7833,7 @@ function VisualMapperContent({
   mapping,
   onMappingChange
 }) {
-  const { toast: toast10 } = useToast();
+  const { toast: toast11 } = useToast();
   const tr = useTr();
   const reactFlowWrapper = useRef(null);
   const [selectedSourceNode, setSelectedSourceNode] = useState(null);
@@ -7853,7 +7853,7 @@ function VisualMapperContent({
         targetOperation
       );
       if (generatedNodes.length === 0) {
-        toast10({
+        toast11({
           title: tr(
             "fluidgrids.builder.visualMapper.noFieldsFoundTitle",
             "No fields found"
@@ -7879,7 +7879,7 @@ function VisualMapperContent({
     targetNode,
     targetOperation,
     setNodes,
-    toast10,
+    toast11,
     tr
   ]);
   useEffect(() => {
@@ -7986,7 +7986,7 @@ function VisualMapperContent({
         }
         onMappingChange(updatedMapping);
         if (isCompatible) {
-          toast10({
+          toast11({
             title: tr(
               "fluidgrids.builder.visualMapper.mappingCreatedTitle",
               "Mapping created"
@@ -7994,7 +7994,7 @@ function VisualMapperContent({
             description: `Mapped ${sourcePath} (${sourceType}) to ${targetPath} (${targetType})`
           });
         } else {
-          toast10({
+          toast11({
             title: tr(
               "fluidgrids.builder.visualMapper.typeMismatchTitle",
               "Type mismatch warning"
@@ -8004,7 +8004,7 @@ function VisualMapperContent({
           });
         }
       } else {
-        toast10({
+        toast11({
           title: tr(
             "fluidgrids.builder.visualMapper.invalidMappingTitle",
             "Invalid mapping"
@@ -8017,7 +8017,7 @@ function VisualMapperContent({
         });
       }
     },
-    [nodes, mapping, onMappingChange, toast10, tr, setEdges]
+    [nodes, mapping, onMappingChange, toast11, tr, setEdges]
   );
   const onEdgeDelete = useCallback(
     (edge) => {
@@ -8074,7 +8074,7 @@ function VisualMapperContent({
   const handleSaveMappingDialog = (expression, targetFieldName) => {
     const targetPath = targetFieldName || selectedTargetNode?.data?.path;
     if (!targetPath) {
-      toast10({
+      toast11({
         title: tr(
           "fluidgrids.builder.visualMapper.noTargetFieldTitle",
           "No target field specified"
@@ -8106,7 +8106,7 @@ function VisualMapperContent({
     }
     onMappingChange(updatedMapping);
     const mappingType = detectMappingType(expression);
-    toast10({
+    toast11({
       title: `${mappingType.charAt(0).toUpperCase() + mappingType.slice(1)} mapping created`,
       description: `${tr("fluidgrids.builder.visualMapper.appliedMappingTo", "Applied mapping to")} ${targetPath}`
     });
@@ -8405,7 +8405,7 @@ function MappingEditor({
   setEdges,
   edgeId
 }) {
-  const { toast: toast10 } = useToast();
+  const { toast: toast11 } = useToast();
   const tr = useTr();
   const [mappingJson, setMappingJson] = useState({});
   const [jsonDataString, setJsonDataString] = useState(
@@ -8529,7 +8529,7 @@ function MappingEditor({
   const handleSaveMapping = () => {
     try {
       checkJsonValidity();
-      toast10({
+      toast11({
         title: tr(
           "fluidgrids.builder.mappingEditor.mappingSavedTitle",
           "Mapping saved"
@@ -8540,7 +8540,7 @@ function MappingEditor({
         )
       });
     } catch (error) {
-      toast10({
+      toast11({
         title: tr(
           "fluidgrids.builder.mappingEditor.errorSavingTitle",
           "Error saving mapping"
@@ -8559,7 +8559,7 @@ function MappingEditor({
       const parsedData = checkJsonValidity();
       const result = await applyMapping(parsedData, sampleInput);
       setPreviewOutput(result);
-      toast10({
+      toast11({
         title: tr(
           "fluidgrids.builder.mappingEditor.mappingTestedTitle",
           "Mapping tested"
@@ -8571,7 +8571,7 @@ function MappingEditor({
       });
     } catch (error) {
       console.error("Test mapping error:", error);
-      toast10({
+      toast11({
         title: tr(
           "fluidgrids.builder.mappingEditor.mappingTestFailedTitle",
           "Mapping test failed"
@@ -19726,6 +19726,559 @@ function VersionHistoryPanel({ className }) {
     )
   ] });
 }
+
+// src/builder/lib/ai-draft.ts
+var AI_DRAFT_POLL_INTERVAL_MS = 2500;
+var AI_DRAFT_MAX_WAIT_MS = 6 * 60 * 1e3;
+var AI_DRAFT_MAX_PROMPT_LENGTH = 4e3;
+function isRecord4(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function stringOr(value, fallback) {
+  return typeof value === "string" && value.trim() !== "" ? value : fallback;
+}
+function draftToCanvas(definitionJson) {
+  const data = isRecord4(definitionJson) && isRecord4(definitionJson.data) ? definitionJson.data : {};
+  const rawNodes = Array.isArray(data.nodes) ? data.nodes : [];
+  const rawEdges = Array.isArray(data.edges) ? data.edges : [];
+  const nodes = rawNodes.filter(isRecord4).flatMap((raw) => {
+    if (typeof raw.id !== "string" || typeof raw.type !== "string") return [];
+    const position = isRecord4(raw.position) ? {
+      x: typeof raw.position.x === "number" ? raw.position.x : 0,
+      y: typeof raw.position.y === "number" ? raw.position.y : 0
+    } : { x: 0, y: 0 };
+    const nodeData = isRecord4(raw.data) ? raw.data : {};
+    const node = {
+      ...raw,
+      id: raw.id,
+      type: raw.type,
+      position,
+      data: nodeData,
+      selected: false
+    };
+    return [node];
+  });
+  const ids = new Set(nodes.map((node) => node.id));
+  const edges = rawEdges.filter(isRecord4).flatMap((raw) => {
+    if (typeof raw.source !== "string" || typeof raw.target !== "string") {
+      return [];
+    }
+    if (!ids.has(raw.source) || !ids.has(raw.target)) return [];
+    const edge = {
+      id: stringOr(raw.id, `e-${raw.source}-${raw.target}`),
+      source: raw.source,
+      target: raw.target,
+      type: stringOr(raw.type, "deletable"),
+      ...typeof raw.sourceHandle === "string" ? { sourceHandle: raw.sourceHandle } : {},
+      ...typeof raw.targetHandle === "string" ? { targetHandle: raw.targetHandle } : {}
+    };
+    return [edge];
+  });
+  return { nodes, edges };
+}
+function enrichDraftNodes(nodes, seed) {
+  return nodes.map((node) => {
+    const data = isRecord4(node.data) ? node.data : {};
+    const rootOperation = node.operation_name;
+    let operationName;
+    if (typeof data.operation_name === "string") {
+      operationName = data.operation_name;
+    } else if (typeof rootOperation === "string") {
+      operationName = rootOperation;
+    }
+    if (!node.type || !operationName) return node;
+    const seeded = seed(node.type, operationName, data);
+    if (!seeded) return node;
+    const seededArgs = isRecord4(seeded.args) ? seeded.args : {};
+    const defaults = isRecord4(seededArgs.state) ? seededArgs.state : {};
+    const draftArgs = isRecord4(data.args) ? data.args : {};
+    const draftState = isRecord4(draftArgs.state) ? draftArgs.state : {};
+    return {
+      ...node,
+      data: {
+        ...seeded,
+        args: { ...seededArgs, state: { ...defaults, ...draftState } }
+      }
+    };
+  });
+}
+function summarizeDraftNodes(definitionJson) {
+  return draftToCanvas(definitionJson).nodes.map((node) => {
+    const data = isRecord4(node.data) ? node.data : {};
+    const label = stringOr(
+      node.label,
+      stringOr(data.label, node.type ?? node.id)
+    );
+    return { id: node.id, type: node.type ?? "", label };
+  });
+}
+function shortNodeType(type) {
+  const afterColon = type.includes(":") ? type.split(":").pop() : type;
+  const afterSlash = afterColon?.includes("/") ? afterColon.split("/").pop() : afterColon;
+  return afterSlash ?? type;
+}
+function shouldKeepPolling(status, startedAt, now = Date.now()) {
+  return status === "PROCESSING" && now - startedAt < AI_DRAFT_MAX_WAIT_MS;
+}
+function canvasHasWork(nodes) {
+  return nodes.length > 1;
+}
+
+// src/builder/hooks/use-ai-workflow-draft.ts
+function messageOf(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+function useAiWorkflowDraft() {
+  const [generation, setGeneration] = useState(
+    null
+  );
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [error, setError] = useState(null);
+  const [timedOut, setTimedOut] = useState(false);
+  const runRef = useRef(0);
+  const timerRef = useRef(null);
+  const clearTimer = useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = null;
+  }, []);
+  const reset = useCallback(() => {
+    runRef.current++;
+    clearTimer();
+    setGeneration(null);
+    setIsGenerating(false);
+    setError(null);
+    setTimedOut(false);
+  }, [clearTimer]);
+  useEffect(
+    () => () => {
+      runRef.current++;
+      clearTimer();
+    },
+    [clearTimer]
+  );
+  const poll = useCallback(
+    async (run, id, startedAt) => {
+      if (run !== runRef.current) return;
+      try {
+        const result = throwIfResultError(
+          await getFluidGridsClient().query({
+            query: WorkflowGenerationDocument,
+            variables: { id },
+            fetchPolicy: "network-only"
+          })
+        );
+        if (run !== runRef.current) return;
+        const next = result.data?.workflowGeneration ?? null;
+        if (next) setGeneration(next);
+        const status = next ? String(next.status) : void 0;
+        if (shouldKeepPolling(status, startedAt)) {
+          timerRef.current = setTimeout(
+            () => void poll(run, id, startedAt),
+            AI_DRAFT_POLL_INTERVAL_MS
+          );
+          return;
+        }
+        if (status === "PROCESSING") setTimedOut(true);
+        setIsGenerating(false);
+      } catch (pollError) {
+        if (run !== runRef.current) return;
+        setError(messageOf(pollError));
+        setIsGenerating(false);
+      }
+    },
+    []
+  );
+  const start = useCallback(
+    async (input) => {
+      const run = ++runRef.current;
+      clearTimer();
+      setGeneration(null);
+      setError(null);
+      setTimedOut(false);
+      setIsGenerating(true);
+      try {
+        const result = throwIfResultError(
+          await getFluidGridsClient().mutate({
+            mutation: GenerateWorkflowFromPromptDocument,
+            variables: {
+              input: {
+                prompt: input.prompt,
+                ...input.template ? { template: input.template } : {},
+                ...input.baseDefinitionJson ? { baseDefinitionJson: input.baseDefinitionJson } : {},
+                ...input.workflowId ? { workflowId: input.workflowId } : {}
+              }
+            }
+          })
+        );
+        const id = result.data?.generateWorkflowFromPrompt?.id;
+        if (!id) throw new Error("The generation did not start");
+        if (run !== runRef.current) return;
+        timerRef.current = setTimeout(
+          () => void poll(run, id, Date.now()),
+          AI_DRAFT_POLL_INTERVAL_MS
+        );
+      } catch (startError) {
+        if (run !== runRef.current) return;
+        setError(messageOf(startError));
+        setIsGenerating(false);
+      }
+    },
+    [clearTimer, poll]
+  );
+  return { generation, isGenerating, error, timedOut, start, reset };
+}
+function useAiWorkflowTemplates(enabled) {
+  const [templates, setTemplates] = useState(
+    []
+  );
+  useEffect(() => {
+    if (!enabled) return;
+    let active = true;
+    getFluidGridsClient().query({
+      query: WorkflowGenerationTemplatesDocument,
+      fetchPolicy: "cache-first"
+    }).then((result) => {
+      if (active)
+        setTemplates(result.data?.workflowGenerationTemplates ?? []);
+    }).catch(() => {
+      if (active) setTemplates([]);
+    });
+    return () => {
+      active = false;
+    };
+  }, [enabled]);
+  return templates;
+}
+var NO_TEMPLATE = "__none__";
+function AiDraftPanel({
+  className,
+  compact = false
+}) {
+  const tr = useTr();
+  const { id: workflowKey } = useParams();
+  const { fitView } = useReactFlow();
+  const [open, setOpen] = useState(false);
+  const [prompt, setPrompt] = useState("");
+  const [template, setTemplate] = useState(NO_TEMPLATE);
+  const [refining, setRefining] = useState(false);
+  const [confirmReplace, setConfirmReplace] = useState(false);
+  const templates = useAiWorkflowTemplates(open);
+  const { generation, isGenerating, error, timedOut, start, reset } = useAiWorkflowDraft();
+  const [nodes, setNodes, setEdges] = useFlowStore(
+    useShallow((s) => [
+      s.workflow.nodes,
+      s.actions.nodes.setNodes,
+      s.actions.edges.setEdges
+    ])
+  );
+  const status = generation ? String(generation.status) : void 0;
+  const draft = status === "COMPLETED" ? generation?.draft ?? null : null;
+  const failed = status === "FAILED";
+  const draftNodes = useMemo(
+    () => draft ? summarizeDraftNodes(draft.definitionJson) : [],
+    [draft]
+  );
+  const trimmed = prompt.trim();
+  const handleGenerate = useCallback(() => {
+    if (!trimmed) return;
+    void start({
+      prompt: trimmed,
+      ...template !== NO_TEMPLATE ? { template } : {},
+      ...refining && draft ? { baseDefinitionJson: draft.definitionJson } : {},
+      ...workflowKey ? { workflowId: workflowKey } : {}
+    });
+  }, [draft, refining, start, template, trimmed, workflowKey]);
+  const applyDraft = useCallback(() => {
+    if (!draft) return;
+    const canvas = draftToCanvas(draft.definitionJson);
+    const nodes2 = enrichDraftNodes(canvas.nodes, buildOperationSeed);
+    registerWorkflowNodeTypes(nodes2);
+    setNodes(nodes2, { historyKind: "ai-draft:apply" });
+    setEdges(canvas.edges, { skipHistory: true });
+    setConfirmReplace(false);
+    setOpen(false);
+    reset();
+    setPrompt("");
+    setRefining(false);
+    setTimeout(() => void fitView({ padding: 0.2, duration: 300 }), 50);
+    toast.success(
+      tr(
+        "fluidgrids.builder.aiDraft.appliedToast",
+        "Draft added to the canvas"
+      ),
+      {
+        description: tr(
+          "fluidgrids.builder.aiDraft.appliedToastDescription",
+          "Review each node's settings, then save the workflow."
+        )
+      }
+    );
+  }, [draft, fitView, reset, setEdges, setNodes, tr]);
+  const handleAccept = useCallback(() => {
+    if (canvasHasWork(nodes)) setConfirmReplace(true);
+    else applyDraft();
+  }, [applyDraft, nodes]);
+  const handleRefine = useCallback(() => {
+    setRefining(true);
+    setPrompt("");
+  }, []);
+  const handleReject = useCallback(() => {
+    reset();
+    setRefining(false);
+  }, [reset]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button$1,
+        {
+          variant: "outline",
+          size: compact ? "icon" : "sm",
+          "data-tour": "fluidgrids-builder-ai-draft",
+          "data-testid": "ai-draft-open",
+          "aria-label": tr(
+            "fluidgrids.builder.aiDraft.openButton",
+            "Generate with AI"
+          ),
+          title: tr(
+            "fluidgrids.builder.aiDraft.openButton",
+            "Generate with AI"
+          ),
+          className: cn$1("flex gap-2", className),
+          children: [
+            /* @__PURE__ */ jsx(Sparkles, { className: "size-4" }),
+            !compact && tr("fluidgrids.builder.aiDraft.openButton", "Generate with AI")
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        SheetContent,
+        {
+          side: "right",
+          className: "flex w-full flex-col gap-4 overflow-y-auto sm:max-w-lg",
+          children: [
+            /* @__PURE__ */ jsxs(SheetHeader, { children: [
+              /* @__PURE__ */ jsx(SheetTitle, { children: tr("fluidgrids.builder.aiDraft.title", "Generate with AI") }),
+              /* @__PURE__ */ jsx(SheetDescription, { children: tr(
+                "fluidgrids.builder.aiDraft.description",
+                "Describe what the workflow should do. You review the draft before anything changes on the canvas."
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 px-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+                /* @__PURE__ */ jsx(Label, { htmlFor: "ai-draft-prompt", children: refining ? tr(
+                  "fluidgrids.builder.aiDraft.refineLabel",
+                  "What should change in this draft?"
+                ) : tr(
+                  "fluidgrids.builder.aiDraft.promptLabel",
+                  "Describe the workflow"
+                ) }),
+                /* @__PURE__ */ jsx(
+                  Textarea,
+                  {
+                    id: "ai-draft-prompt",
+                    "data-testid": "ai-draft-prompt",
+                    rows: 5,
+                    maxLength: AI_DRAFT_MAX_PROMPT_LENGTH,
+                    value: prompt,
+                    disabled: isGenerating,
+                    placeholder: tr(
+                      "fluidgrids.builder.aiDraft.promptPlaceholder",
+                      "Every weekday at 9am, fetch new orders from our API, keep the ones over 500 and post a summary to a webhook. Log the rest."
+                    ),
+                    onChange: (event) => setPrompt(event.target.value)
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "self-end text-xs text-muted-foreground", children: [
+                  prompt.length,
+                  "/",
+                  AI_DRAFT_MAX_PROMPT_LENGTH
+                ] })
+              ] }),
+              !refining && templates.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+                /* @__PURE__ */ jsx(Label, { htmlFor: "ai-draft-template", children: tr(
+                  "fluidgrids.builder.aiDraft.templateLabel",
+                  "Starting pattern (optional)"
+                ) }),
+                /* @__PURE__ */ jsxs(
+                  Select,
+                  {
+                    value: template,
+                    onValueChange: setTemplate,
+                    disabled: isGenerating,
+                    children: [
+                      /* @__PURE__ */ jsx(SelectTrigger, { id: "ai-draft-template", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                      /* @__PURE__ */ jsxs(SelectContent, { className: "z-[130]", children: [
+                        /* @__PURE__ */ jsx(SelectItem, { value: NO_TEMPLATE, children: tr(
+                          "fluidgrids.builder.aiDraft.noTemplate",
+                          "No pattern"
+                        ) }),
+                        templates.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.name }, option.id))
+                      ] })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsxs(
+                  Button$1,
+                  {
+                    "data-testid": "ai-draft-generate",
+                    onClick: handleGenerate,
+                    disabled: !trimmed || isGenerating,
+                    className: "flex gap-2",
+                    children: [
+                      isGenerating ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(Sparkles, { className: "size-4" }),
+                      refining ? tr(
+                        "fluidgrids.builder.aiDraft.refineButton",
+                        "Refine draft"
+                      ) : tr("fluidgrids.builder.aiDraft.generateButton", "Generate")
+                    ]
+                  }
+                ),
+                refining && !isGenerating && /* @__PURE__ */ jsx(Button$1, { variant: "ghost", onClick: () => setRefining(false), children: tr("fluidgrids.builder.aiDraft.cancelRefine", "Cancel") })
+              ] }),
+              isGenerating && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "text-sm text-muted-foreground",
+                  "data-testid": "ai-draft-progress",
+                  children: tr(
+                    "fluidgrids.builder.aiDraft.generating",
+                    "Designing your workflow. This usually takes under a minute."
+                  )
+                }
+              ),
+              (error || timedOut) && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "alert",
+                  className: "rounded-md border border-[var(--color-status-error-border)] bg-[var(--color-status-error-bg-subtle)] p-3 text-sm text-[var(--color-status-error-text)]",
+                  children: timedOut ? tr(
+                    "fluidgrids.builder.aiDraft.timedOut",
+                    "The draft is taking longer than expected. Try again in a moment."
+                  ) : error
+                }
+              ),
+              failed && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "alert",
+                  "data-testid": "ai-draft-failed",
+                  className: "flex flex-col gap-2 rounded-md border border-[var(--color-status-error-border)] bg-[var(--color-status-error-bg-subtle)] p-3 text-sm text-[var(--color-status-error-text)]",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-medium", children: generation?.message ?? tr(
+                      "fluidgrids.builder.aiDraft.failed",
+                      "The workflow could not be generated."
+                    ) }),
+                    (generation?.validation?.errors ?? []).length > 0 && /* @__PURE__ */ jsx("ul", { className: "list-disc pl-4", children: generation?.validation?.errors.map((message) => /* @__PURE__ */ jsx("li", { children: message }, message)) }),
+                    /* @__PURE__ */ jsx("span", { children: tr(
+                      "fluidgrids.builder.aiDraft.failedHint",
+                      "Try describing the steps more concretely, then generate again."
+                    ) })
+                  ]
+                }
+              ),
+              draft && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-testid": "ai-draft-result",
+                  className: "flex flex-col gap-3 rounded-lg border border-border bg-card p-3",
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+                      /* @__PURE__ */ jsx("span", { className: "font-semibold text-card-foreground", children: draft.name }),
+                      draft.explanation && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: draft.explanation })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      "ol",
+                      {
+                        className: "flex flex-col gap-1.5",
+                        "data-testid": "ai-draft-nodes",
+                        children: draftNodes.map((node, index) => /* @__PURE__ */ jsxs(
+                          "li",
+                          {
+                            className: "flex items-center justify-between gap-2 text-sm",
+                            children: [
+                              /* @__PURE__ */ jsxs("span", { className: "truncate text-card-foreground", children: [
+                                index + 1,
+                                ". ",
+                                node.label
+                              ] }),
+                              /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "shrink-0", children: shortNodeType(node.type) })
+                            ]
+                          },
+                          node.id
+                        ))
+                      }
+                    ),
+                    (generation?.validation?.warnings ?? []).length > 0 && /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-[var(--color-status-warning-border)] bg-[var(--color-status-warning-bg-subtle)] p-2 text-xs text-[var(--color-status-warning-text)]", children: [
+                      /* @__PURE__ */ jsx("span", { className: "font-medium", children: tr(
+                        "fluidgrids.builder.aiDraft.warningsTitle",
+                        "Still to configure:"
+                      ) }),
+                      /* @__PURE__ */ jsx("ul", { className: "list-disc pl-4", children: generation?.validation?.warnings.map((message) => /* @__PURE__ */ jsx("li", { children: message }, message)) })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+                      /* @__PURE__ */ jsx(
+                        Button$1,
+                        {
+                          "data-testid": "ai-draft-accept",
+                          onClick: handleAccept,
+                          className: "flex gap-2",
+                          children: tr("fluidgrids.builder.aiDraft.accept", "Add to canvas")
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Button$1,
+                        {
+                          variant: "outline",
+                          "data-testid": "ai-draft-refine",
+                          onClick: handleRefine,
+                          children: tr("fluidgrids.builder.aiDraft.refine", "Refine")
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Button$1,
+                        {
+                          variant: "ghost",
+                          "data-testid": "ai-draft-reject",
+                          onClick: handleReject,
+                          children: tr("fluidgrids.builder.aiDraft.reject", "Discard")
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(AlertDialog, { open: confirmReplace, onOpenChange: setConfirmReplace, children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx(AlertDialogTitle, { children: tr(
+          "fluidgrids.builder.aiDraft.replaceTitle",
+          "Replace the current canvas?"
+        ) }),
+        /* @__PURE__ */ jsx(AlertDialogDescription, { children: tr(
+          "fluidgrids.builder.aiDraft.replaceDescription",
+          "The draft replaces the nodes on the canvas. You can undo this, and nothing is saved until you save the workflow."
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx(AlertDialogCancel, { children: tr("fluidgrids.builder.aiDraft.replaceCancel", "Keep canvas") }),
+        /* @__PURE__ */ jsx(
+          AlertDialogAction,
+          {
+            "data-testid": "ai-draft-replace-confirm",
+            onClick: applyDraft,
+            children: tr("fluidgrids.builder.aiDraft.replaceConfirm", "Replace")
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
 var ActivateWorkflowButton = ({
   className
 }) => {
@@ -20071,6 +20624,7 @@ var FlowBuilder = ({ readOnly = false }) => {
       ] }),
       name !== "" && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("div", { className: "hidden shrink-0 lg:inline-flex items-center gap-2", children: [
+          !isReadOnly && /* @__PURE__ */ jsx(AiDraftPanel, {}),
           /* @__PURE__ */ jsx(VersionHistoryPanel, {}),
           /* @__PURE__ */ jsx(SaveFlowButton, {}),
           /* @__PURE__ */ jsx(ActivateWorkflowButton, {}),
@@ -20091,47 +20645,50 @@ var FlowBuilder = ({ readOnly = false }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "shrink-0 lg:hidden", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-            Button$1,
-            {
-              variant: "ghost",
-              size: "icon",
-              className: "text-card-foreground",
-              "data-tour": "fluidgrids-builder-actions-menu",
-              children: /* @__PURE__ */ jsx(Icon, { icon: "mynaui:dots-vertical", className: "size-5" })
-            }
-          ) }),
-          /* @__PURE__ */ jsxs(
-            DropdownMenuContent,
-            {
-              align: "end",
-              className: "flex flex-col gap-1.5 p-2 w-56",
-              children: [
-                /* @__PURE__ */ jsx(VersionHistoryPanel, { className: "w-full justify-start" }),
-                /* @__PURE__ */ jsx(SaveFlowButton, { className: "w-full justify-start" }),
-                /* @__PURE__ */ jsx(ActivateWorkflowButton, { className: "w-full justify-start" }),
-                /* @__PURE__ */ jsx(
-                  RunWithViewRuns,
-                  {
-                    onViewRuns: handleViewRuns,
-                    canViewRuns: !!id,
-                    className: "w-full",
-                    runButtonClassName: "flex-1 justify-start rounded-l-lg"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  FluidGridsDocsLink,
-                  {
-                    topic: "builder",
-                    className: "w-full rounded-md px-3 py-2",
-                    children: tr("fluidgrids.docs.builderGuide", "Builder guide")
-                  }
-                )
-              ]
-            }
-          )
-        ] }) })
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1 lg:hidden", children: [
+          !isReadOnly && /* @__PURE__ */ jsx(AiDraftPanel, { compact: true }),
+          /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              Button$1,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "text-card-foreground",
+                "data-tour": "fluidgrids-builder-actions-menu",
+                children: /* @__PURE__ */ jsx(Icon, { icon: "mynaui:dots-vertical", className: "size-5" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(
+              DropdownMenuContent,
+              {
+                align: "end",
+                className: "flex flex-col gap-1.5 p-2 w-56",
+                children: [
+                  /* @__PURE__ */ jsx(VersionHistoryPanel, { className: "w-full justify-start" }),
+                  /* @__PURE__ */ jsx(SaveFlowButton, { className: "w-full justify-start" }),
+                  /* @__PURE__ */ jsx(ActivateWorkflowButton, { className: "w-full justify-start" }),
+                  /* @__PURE__ */ jsx(
+                    RunWithViewRuns,
+                    {
+                      onViewRuns: handleViewRuns,
+                      canViewRuns: !!id,
+                      className: "w-full",
+                      runButtonClassName: "flex-1 justify-start rounded-l-lg"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    FluidGridsDocsLink,
+                    {
+                      topic: "builder",
+                      className: "w-full rounded-md px-3 py-2",
+                      children: tr("fluidgrids.docs.builderGuide", "Builder guide")
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ] })
       ] })
     ] }),
     /* @__PURE__ */ jsxs(