@burdenoff/fluidgrids-fe-sdk 2026.1111.16 → 2026.1111.17

package/dist/AiStudioPage-kJHSsIcj.js

@@ -0,0 +1,774 @@
+"use client";
+import { t as __exportAll } from "./rolldown-runtime-hDbaFkMy.js";
+import { t as ThemeProvider } from "./theme-provider-B3mIuz2d.js";
+import { a as useAiWorkflowTemplates, i as enrichDraftNodes, n as AI_DRAFT_MAX_PROMPT_LENGTH, r as draftToCanvas, t as FlowBuilderPage } from "./flow-builder-y2Y1iG4Y.js";
+import { Et as classifyCreateRefusal, I as buildOperationSeed, Tt as builderPathOf, u as ensureNodeTypesLoaded } from "./FluidGridsProvider-dvZSNtSW.js";
+import { _ as throwIfResultError, n as getFluidGridsClient } from "./client-C9XSzSXr.js";
+import { a as notifyFluidGridsAiCreditsUpdated, t as AiCreditBalanceSlot } from "./aiCreditsBridge-BuE92tKo.js";
+import { Pr as WorkflowGenerationDocument, y as CancelWorkflowGenerationDocument, yt as GenerateWorkflowFromPromptDocument } from "./graphql-operation-types-kX-MMjgW.js";
+import { n as useCreateWorkflow } from "./useWorkflows-BlVVu8NM.js";
+import { r as useTr } from "./TranslationBridge-Da-TPgQm.js";
+import { f as BILLING_PLANS_PATH } from "./fluidgridsEvents-CNdcrUNN.js";
+import { O as CreateWorkflowRefusalDialog } from "./WorkflowShareDialog-B_gn968c.js";
+import { s as useFluidGridsPermission, t as FLUIDGRIDS_PERMISSIONS } from "./constants-B2lhWNoN.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useNavigate } from "react-router";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { toast } from "sonner";
+import { Badge, Button, Card, CardContent, CardHeader, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea } from "@burdenoff/fe-libs/ui";
+import { ErrorBoundary } from "@burdenoff/fe-libs/shared/components";
+import { v4 } from "uuid";
+import "@xyflow/react/dist/style.css";
+import { CheckCircle2, Lightbulb, Loader2, MessageCircleQuestion, Pencil, RefreshCw, Sparkles, Square, TriangleAlert } from "lucide-react";
+
+// src/hooks/useWorkflowGeneration.ts
+/**
+* useWorkflowGeneration — drives one natural-language workflow generation for
+* AI Studio (BOFF-4089): start it with `generateWorkflowFromPrompt`, poll
+* `workflowGeneration(id)` while it is PROCESSING, and cancel it.
+*
+* A generation never saves anything. Its draft is shown for review and saved
+* as a new DRAFT workflow only when the user chooses "Edit in builder".
+*/
+/** How often a PROCESSING generation is polled. */
+const GENERATION_POLL_INTERVAL_MS = 3e3;
+/** Stop polling after this long; the server closes a stuck generation after 20 minutes. */
+const GENERATION_MAX_WAIT_MS = 36e4;
+function messageOf(error) {
+	return error instanceof Error ? error.message : String(error);
+}
+function useWorkflowGeneration() {
+	const [generation, setGeneration] = useState(null);
+	const [isWorking, setIsWorking] = useState(false);
+	const [error, setError] = useState(null);
+	const [timedOut, setTimedOut] = useState(false);
+	const runRef = useRef(0);
+	const timerRef = useRef(null);
+	const idRef = useRef(null);
+	const clearTimer = useCallback(() => {
+		if (timerRef.current) clearTimeout(timerRef.current);
+		timerRef.current = null;
+	}, []);
+	useEffect(() => () => {
+		runRef.current++;
+		clearTimer();
+	}, [clearTimer]);
+	const reset = useCallback(() => {
+		runRef.current++;
+		clearTimer();
+		idRef.current = null;
+		setGeneration(null);
+		setIsWorking(false);
+		setError(null);
+		setTimedOut(false);
+	}, [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);
+			if (next && String(next.status) === "PROCESSING") {
+				if (Date.now() - startedAt < 36e4) {
+					timerRef.current = setTimeout(() => void poll(run, id, startedAt), GENERATION_POLL_INTERVAL_MS);
+					return;
+				}
+				setTimedOut(true);
+			} else notifyFluidGridsAiCreditsUpdated();
+			setIsWorking(false);
+		} catch (pollError) {
+			if (run !== runRef.current) return;
+			setError(messageOf(pollError));
+			setIsWorking(false);
+		}
+	}, []);
+	return {
+		generation,
+		isWorking,
+		error,
+		timedOut,
+		start: useCallback(async (input) => {
+			const run = ++runRef.current;
+			clearTimer();
+			setGeneration(null);
+			setError(null);
+			setTimedOut(false);
+			setIsWorking(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 } : {}
+					} }
+				}));
+				if (run !== runRef.current) return;
+				const id = result.data?.generateWorkflowFromPrompt.id;
+				if (!id) throw new Error("The generation did not start");
+				idRef.current = id;
+				await poll(run, id, Date.now());
+			} catch (startError) {
+				if (run !== runRef.current) return;
+				setError(messageOf(startError));
+				setIsWorking(false);
+			}
+		}, [clearTimer, poll]),
+		cancel: useCallback(async () => {
+			const id = idRef.current;
+			const run = ++runRef.current;
+			clearTimer();
+			if (!id) {
+				setIsWorking(false);
+				return;
+			}
+			try {
+				const result = throwIfResultError(await getFluidGridsClient().mutate({
+					mutation: CancelWorkflowGenerationDocument,
+					variables: { id }
+				}));
+				if (run !== runRef.current) return;
+				const cancelled = result.data?.cancelWorkflowGeneration;
+				if (cancelled) setGeneration((current) => current ? {
+					...current,
+					status: cancelled.status,
+					message: cancelled.message
+				} : current);
+			} catch (cancelError) {
+				if (run !== runRef.current) return;
+				setError(messageOf(cancelError));
+			} finally {
+				if (run === runRef.current) setIsWorking(false);
+			}
+		}, [clearTimer]),
+		reset
+	};
+}
+
+// src/modules/ai-studio/lib/ai-studio.ts
+/** The version every workflow saved from AI Studio starts at. */
+const AI_STUDIO_DRAFT_VERSION = "v1";
+const AI_STUDIO_EXAMPLES = [
+	{
+		id: "payment-to-crm",
+		labelKey: "fluidgrids.aiStudio.examples.paymentToCrm.label",
+		label: "Payment to CRM and chat",
+		promptKey: "fluidgrids.aiStudio.examples.paymentToCrm.prompt",
+		prompt: "When a new Stripe payment succeeds, add the customer to HubSpot and post a summary to Slack #sales."
+	},
+	{
+		id: "daily-digest",
+		labelKey: "fluidgrids.aiStudio.examples.dailyDigest.label",
+		label: "Daily order digest",
+		promptKey: "fluidgrids.aiStudio.examples.dailyDigest.prompt",
+		prompt: "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."
+	},
+	{
+		id: "webhook-triage",
+		labelKey: "fluidgrids.aiStudio.examples.webhookTriage.label",
+		label: "Triage incoming requests",
+		promptKey: "fluidgrids.aiStudio.examples.webhookTriage.prompt",
+		prompt: "When a webhook receives a support request, check the priority field. Send urgent requests to our escalation API and log everything else."
+	}
+];
+const AI_STUDIO_REFINEMENTS = [
+	{
+		id: "error-handling",
+		labelKey: "fluidgrids.aiStudio.refinements.errorHandling",
+		label: "Add error handling",
+		instruction: "Add error handling: when a step that calls an external service fails, route the failure to a separate branch that logs the error instead of stopping silently."
+	},
+	{
+		id: "notify-on-failure",
+		labelKey: "fluidgrids.aiStudio.refinements.notifyOnFailure",
+		label: "Notify on failure",
+		instruction: "Notify someone when the workflow fails: add a step that sends the error details to a notification webhook."
+	},
+	{
+		id: "log-result",
+		labelKey: "fluidgrids.aiStudio.refinements.logResult",
+		label: "Log the result",
+		instruction: "Add a final step that logs a short summary of what the workflow did."
+	}
+];
+function clamp(text) {
+	return text.length > 4e3 ? text.slice(0, AI_DRAFT_MAX_PROMPT_LENGTH) : text;
+}
+/**
+* The request for a refinement of the current draft: the original request
+* plus the change. The draft itself goes to the server as
+* `baseDefinitionJson`, so the model edits it rather than starting over.
+*/
+function buildRefinementPrompt(originalPrompt, instruction) {
+	return clamp(`${originalPrompt.trim()}\n\nChange: ${instruction.trim()}`);
+}
+/**
+* The request after the user answered some of the model's clarifying
+* questions. Unanswered questions are left out; null when nothing was
+* answered, so the caller keeps the button disabled.
+*/
+function buildAnsweredPrompt(originalPrompt, questions, answers) {
+	const lines = questions.flatMap((question, index) => {
+		const answer = (answers[index] ?? "").trim();
+		return answer === "" ? [] : [`- ${question} ${answer}`];
+	});
+	if (lines.length === 0) return null;
+	return clamp(`${originalPrompt.trim()}\n\nAnswers to your questions:\n${lines.join("\n")}`);
+}
+function isRecord(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+/** The draft's nodes as readable steps; entries without an id or type are skipped. */
+function draftSteps(definitionJson) {
+	const data = isRecord(definitionJson) && isRecord(definitionJson.data) ? definitionJson.data : {};
+	return (Array.isArray(data.nodes) ? data.nodes : []).filter(isRecord).flatMap((node) => {
+		if (typeof node.id !== "string" || typeof node.type !== "string") return [];
+		const nodeData = isRecord(node.data) ? node.data : {};
+		let label = node.id;
+		if (typeof nodeData.label === "string" && nodeData.label.trim() !== "") label = nodeData.label;
+		else if (typeof node.label === "string" && node.label.trim() !== "") label = node.label;
+		return [{
+			id: node.id,
+			label,
+			type: node.type
+		}];
+	});
+}
+/**
+* The `createWorkflowDefinition` input that saves a draft as a new DRAFT
+* workflow under `key`. Same shape the server writes when a proposal is
+* applied as a new workflow: the generated definition with its key replaced.
+* Nothing is activated.
+*/
+function draftCreateInput(draft, key) {
+	const name = draft.name.trim() || "Generated workflow";
+	const description = draft.description.trim() || name;
+	return {
+		workflowKey: key,
+		version: "v1",
+		name,
+		description,
+		definitionJson: {
+			...draft.definitionJson,
+			key,
+			name,
+			description
+		}
+	};
+}
+/** The page phase for a generation status (the wire enum's string). */
+function phaseOf(status, working) {
+	if (working || status === "PROCESSING") return "generating";
+	if (status === "COMPLETED") return "ready";
+	if (status === "FAILED") return "failed";
+	if (status === "CANCELLED") return "cancelled";
+	return "idle";
+}
+
+// src/modules/ai-studio/pages/AiStudioPage.tsx
+/**
+* AI Studio (BOFF-4089) — describe an automation in plain English and review
+* the workflow draft the model builds for it, before anything is saved.
+*
+*   - Left: the request, optional starting pattern, starter examples, the
+*     AI-credit balance, one-click refinements of the current draft and the
+*     model's clarifying questions (answer them and regenerate).
+*   - Right: the draft on the real builder canvas in read-only mode, its
+*     explanation, the settings still to fill in, and the two ways forward:
+*     "Edit in builder" saves the draft as a new DRAFT workflow (never
+*     activated) and opens it; "Regenerate" asks again from scratch.
+*
+* Generation runs on workflow-svc (`generateWorkflowFromPrompt`, polled via
+* `workflowGeneration`); this page only drives and renders it.
+*/
+var AiStudioPage_exports = /* @__PURE__ */ __exportAll({ AiStudioPage: () => AiStudioPage });
+const NO_TEMPLATE = "__none__";
+/** The read-only canvas for a draft, with the palette metadata a drop would give each node. */
+function DraftCanvas({ generationId, name, definitionJson }) {
+	const tr = useTr();
+	const [workflow, setWorkflow] = useState(null);
+	useEffect(() => {
+		let active = true;
+		const build = (seeded) => {
+			const canvas = draftToCanvas(definitionJson);
+			return {
+				id: generationId,
+				workflowKey: generationId,
+				version: "preview",
+				name,
+				nodes: seeded ? enrichDraftNodes(canvas.nodes, buildOperationSeed) : canvas.nodes,
+				edges: canvas.edges,
+				sidebar: {
+					active: "none",
+					panels: { nodeProperties: { selectedNode: null } }
+				}
+			};
+		};
+		ensureNodeTypesLoaded(draftToCanvas(definitionJson).nodes.map((node) => node.type)).then(() => {
+			if (active) setWorkflow(build(true));
+		}).catch(() => {
+			if (active) setWorkflow(build(false));
+		});
+		return () => {
+			active = false;
+		};
+	}, [
+		definitionJson,
+		generationId,
+		name
+	]);
+	if (!workflow) return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full items-center justify-center gap-2 text-sm text-muted-foreground",
+		children: [/* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }), tr("fluidgrids.aiStudio.preview.loading", "Loading preview…")]
+	});
+	return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(ErrorBoundary, {
+		fallback: () => /* @__PURE__ */ jsx("div", {
+			className: "flex h-full items-center justify-center p-6 text-center text-sm text-muted-foreground",
+			children: tr("fluidgrids.aiStudio.preview.renderError", "The preview could not be drawn. The draft can still be opened in the builder.")
+		}),
+		children: /* @__PURE__ */ jsx(FlowBuilderPage, {
+			workflow,
+			readOnly: true
+		})
+	}) });
+}
+function AiStudioPage() {
+	const tr = useTr();
+	const navigate = useNavigate();
+	const generation = useWorkflowGeneration();
+	const templates = useAiWorkflowTemplates(true);
+	const { createWorkflow } = useCreateWorkflow();
+	const { allowed: canGenerate } = useFluidGridsPermission(FLUIDGRIDS_PERMISSIONS.AI_WORKFLOW_CREATE);
+	const { allowed: canCreate } = useFluidGridsPermission(FLUIDGRIDS_PERMISSIONS.WORKFLOW_CREATE);
+	const [prompt, setPrompt] = useState("");
+	const [template, setTemplate] = useState(NO_TEMPLATE);
+	const [answers, setAnswers] = useState({});
+	const [saving, setSaving] = useState(false);
+	const [refusal, setRefusal] = useState(null);
+	const requestRef = useRef(null);
+	const current = generation.generation;
+	const status = current ? String(current.status) : void 0;
+	const phase = phaseOf(status, generation.isWorking);
+	const draft = phase === "ready" ? current?.draft ?? null : null;
+	const questions = draft?.questions ?? [];
+	const warnings = current?.validation?.warnings ?? [];
+	const errors = current?.validation?.errors ?? [];
+	const steps = useMemo(() => draft ? draftSteps(draft.definitionJson) : [], [draft]);
+	const trimmed = prompt.trim();
+	const working = phase === "generating";
+	const answeredPrompt = requestRef.current ? buildAnsweredPrompt(requestRef.current.prompt, questions, answers) : null;
+	const run = useCallback((input) => {
+		setAnswers({});
+		generation.start(input);
+	}, [generation]);
+	const handleGenerate = useCallback(() => {
+		if (!trimmed) return;
+		const request = {
+			prompt: trimmed,
+			...template !== NO_TEMPLATE ? { template } : {}
+		};
+		requestRef.current = request;
+		run(request);
+	}, [
+		run,
+		template,
+		trimmed
+	]);
+	const handleRegenerate = useCallback(() => {
+		if (!requestRef.current) return;
+		run(requestRef.current);
+	}, [run]);
+	const handleRefine = useCallback((instruction) => {
+		if (!draft || !requestRef.current) return;
+		const refined = buildRefinementPrompt(requestRef.current.prompt, instruction);
+		requestRef.current = {
+			...requestRef.current,
+			prompt: refined
+		};
+		setPrompt(refined);
+		run({
+			prompt: refined,
+			baseDefinitionJson: draft.definitionJson
+		});
+	}, [draft, run]);
+	const handleAnswer = useCallback(() => {
+		if (!draft || !requestRef.current || !answeredPrompt) return;
+		requestRef.current = {
+			...requestRef.current,
+			prompt: answeredPrompt
+		};
+		setPrompt(answeredPrompt);
+		run({
+			prompt: answeredPrompt,
+			baseDefinitionJson: draft.definitionJson
+		});
+	}, [
+		answeredPrompt,
+		draft,
+		run
+	]);
+	const handleEditInBuilder = useCallback(async () => {
+		if (!draft) return;
+		setSaving(true);
+		let reported = null;
+		try {
+			const created = await createWorkflow(draftCreateInput({
+				name: draft.name,
+				description: draft.description,
+				definitionJson: draft.definitionJson
+			}, v4()), { onError: (error) => {
+				reported = error;
+			} });
+			if (!created?.workflowKey || !created.version) {
+				setRefusal(classifyCreateRefusal(reported));
+				return;
+			}
+			toast.success(tr("fluidgrids.aiStudio.savedToast", "Draft saved as a new workflow"), { description: tr("fluidgrids.aiStudio.savedToastDescription", "Nothing is live yet. Fill in the settings, run a test, then activate it.") });
+			navigate(builderPathOf(created, ".."));
+		} finally {
+			setSaving(false);
+		}
+	}, [
+		createWorkflow,
+		draft,
+		navigate,
+		tr
+	]);
+	const showExamples = phase === "idle" && !requestRef.current;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "min-h-full bg-background-primary p-4 sm:p-6",
+		"data-testid": "ai-studio-page",
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "mb-6 flex flex-col gap-1",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3",
+					children: [
+						/* @__PURE__ */ jsx(Sparkles, {
+							className: "size-6 text-action-primary-bg",
+							"aria-hidden": true
+						}),
+						/* @__PURE__ */ jsx("h1", {
+							className: "text-2xl font-semibold text-text-primary sm:text-3xl",
+							children: tr("fluidgrids.aiStudio.title", "AI Studio")
+						}),
+						/* @__PURE__ */ jsx(Badge, {
+							variant: "outline",
+							children: tr("fluidgrids.aiStudio.beta", "Beta")
+						})
+					]
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-text-secondary",
+					children: tr("fluidgrids.aiStudio.subtitle", "Describe your automation in plain English. AI builds a draft workflow you review before anything is saved.")
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]",
+				children: [/* @__PURE__ */ jsxs(Card, {
+					className: "h-fit",
+					children: [/* @__PURE__ */ jsx(CardHeader, {
+						className: "pb-2",
+						children: /* @__PURE__ */ jsx("h2", {
+							className: "text-base font-semibold text-text-primary",
+							children: tr("fluidgrids.aiStudio.describeTitle", "Describe your automation")
+						})
+					}), /* @__PURE__ */ jsxs(CardContent, {
+						className: "flex flex-col gap-4",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col gap-1.5",
+								children: [
+									/* @__PURE__ */ jsx(Label, {
+										htmlFor: "ai-studio-prompt",
+										className: "sr-only",
+										children: tr("fluidgrids.aiStudio.promptLabel", "What should the workflow do?")
+									}),
+									/* @__PURE__ */ jsx(Textarea, {
+										id: "ai-studio-prompt",
+										"data-testid": "ai-studio-prompt",
+										rows: 6,
+										maxLength: AI_DRAFT_MAX_PROMPT_LENGTH,
+										value: prompt,
+										disabled: working,
+										placeholder: tr("fluidgrids.aiStudio.promptPlaceholder", "When a new Stripe payment succeeds, add the customer to HubSpot and post a summary to Slack #sales."),
+										onChange: (event) => setPrompt(event.target.value)
+									}),
+									/* @__PURE__ */ jsxs("span", {
+										className: "self-end text-xs text-text-secondary",
+										children: [
+											prompt.length,
+											"/",
+											AI_DRAFT_MAX_PROMPT_LENGTH
+										]
+									})
+								]
+							}),
+							templates.length > 0 && /* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col gap-1.5",
+								children: [/* @__PURE__ */ jsx(Label, {
+									htmlFor: "ai-studio-template",
+									children: tr("fluidgrids.aiStudio.templateLabel", "Starting pattern (optional)")
+								}), /* @__PURE__ */ jsxs(Select, {
+									value: template,
+									onValueChange: setTemplate,
+									disabled: working,
+									children: [/* @__PURE__ */ jsx(SelectTrigger, {
+										id: "ai-studio-template",
+										"data-testid": "ai-studio-template",
+										children: /* @__PURE__ */ jsx(SelectValue, {})
+									}), /* @__PURE__ */ jsxs(SelectContent, { children: [/* @__PURE__ */ jsx(SelectItem, {
+										value: NO_TEMPLATE,
+										children: tr("fluidgrids.aiStudio.noTemplate", "No pattern")
+									}), templates.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+										value: option.id,
+										children: option.name
+									}, option.id))] })]
+								})]
+							}),
+							/* @__PURE__ */ jsx(AiCreditBalanceSlot, { testId: "ai-studio-credit-balance" }),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-wrap gap-2",
+								children: [/* @__PURE__ */ jsxs(Button, {
+									"data-testid": "ai-studio-generate",
+									onClick: handleGenerate,
+									disabled: !trimmed || working || !canGenerate,
+									title: canGenerate ? void 0 : tr("fluidgrids.aiStudio.noPermission", "Your role cannot generate workflows with AI"),
+									className: "flex grow gap-2",
+									children: [working ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(Sparkles, { className: "size-4" }), working ? tr("fluidgrids.aiStudio.generating", "Generating…") : tr("fluidgrids.aiStudio.generate", "Generate workflow")]
+								}), working && /* @__PURE__ */ jsxs(Button, {
+									variant: "outline",
+									"data-testid": "ai-studio-cancel",
+									onClick: () => void generation.cancel(),
+									className: "flex gap-2",
+									children: [/* @__PURE__ */ jsx(Square, { className: "size-4" }), tr("fluidgrids.aiStudio.stop", "Stop")]
+								})]
+							}),
+							showExamples && /* @__PURE__ */ jsxs("section", {
+								className: "flex flex-col gap-2",
+								"data-testid": "ai-studio-examples",
+								children: [/* @__PURE__ */ jsxs("h3", {
+									className: "flex items-center gap-2 text-sm font-medium text-text-primary",
+									children: [/* @__PURE__ */ jsx(Lightbulb, {
+										className: "size-4",
+										"aria-hidden": true
+									}), tr("fluidgrids.aiStudio.examplesTitle", "Try an example")]
+								}), /* @__PURE__ */ jsx("div", {
+									className: "flex flex-wrap gap-2",
+									children: AI_STUDIO_EXAMPLES.map((example) => /* @__PURE__ */ jsx(Button, {
+										variant: "outline",
+										size: "sm",
+										"data-testid": `ai-studio-example-${example.id}`,
+										onClick: () => setPrompt(tr(example.promptKey, example.prompt)),
+										children: tr(example.labelKey, example.label)
+									}, example.id))
+								})]
+							}),
+							draft && /* @__PURE__ */ jsxs("section", {
+								className: "flex flex-col gap-2",
+								"data-testid": "ai-studio-suggestions",
+								children: [/* @__PURE__ */ jsxs("h3", {
+									className: "flex items-center gap-2 text-sm font-medium text-text-primary",
+									children: [/* @__PURE__ */ jsx(Lightbulb, {
+										className: "size-4",
+										"aria-hidden": true
+									}), tr("fluidgrids.aiStudio.suggestionsTitle", "Suggestions")]
+								}), /* @__PURE__ */ jsx("div", {
+									className: "flex flex-wrap gap-2",
+									children: AI_STUDIO_REFINEMENTS.map((refinement) => /* @__PURE__ */ jsx(Button, {
+										variant: "outline",
+										size: "sm",
+										disabled: !canGenerate,
+										"data-testid": `ai-studio-refine-${refinement.id}`,
+										onClick: () => handleRefine(refinement.instruction),
+										children: tr(refinement.labelKey, refinement.label)
+									}, refinement.id))
+								})]
+							}),
+							questions.length > 0 && /* @__PURE__ */ jsxs("section", {
+								className: "flex flex-col gap-3",
+								"data-testid": "ai-studio-questions",
+								children: [
+									/* @__PURE__ */ jsxs("h3", {
+										className: "flex items-center gap-2 text-sm font-medium text-text-primary",
+										children: [/* @__PURE__ */ jsx(MessageCircleQuestion, {
+											className: "size-4",
+											"aria-hidden": true
+										}), tr("fluidgrids.aiStudio.questionsTitle", "AI clarifying questions")]
+									}),
+									/* @__PURE__ */ jsx("p", {
+										className: "text-xs text-text-secondary",
+										children: tr("fluidgrids.aiStudio.questionsHint", "The draft uses sensible defaults. Answer any of these to refine it.")
+									}),
+									/* @__PURE__ */ jsx("ol", {
+										className: "flex flex-col gap-3",
+										children: questions.map((question, index) => /* @__PURE__ */ jsxs("li", {
+											className: "flex flex-col gap-1.5",
+											children: [/* @__PURE__ */ jsxs(Label, {
+												htmlFor: `ai-studio-answer-${index}`,
+												className: "flex gap-2 font-normal text-text-primary",
+												children: [/* @__PURE__ */ jsx("span", {
+													className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-action-primary-bg text-xs text-action-primary-text",
+													children: index + 1
+												}), /* @__PURE__ */ jsx("span", { children: question })]
+											}), /* @__PURE__ */ jsx(Input, {
+												id: `ai-studio-answer-${index}`,
+												"data-testid": `ai-studio-answer-${index}`,
+												value: answers[index] ?? "",
+												placeholder: tr("fluidgrids.aiStudio.answerPlaceholder", "Your answer (optional)"),
+												onChange: (event) => setAnswers((previous) => ({
+													...previous,
+													[index]: event.target.value
+												}))
+											})]
+										}, question))
+									}),
+									/* @__PURE__ */ jsxs(Button, {
+										variant: "secondary",
+										"data-testid": "ai-studio-answer-submit",
+										disabled: !answeredPrompt || !canGenerate,
+										onClick: handleAnswer,
+										className: "flex gap-2 self-start",
+										children: [/* @__PURE__ */ jsx(RefreshCw, { className: "size-4" }), tr("fluidgrids.aiStudio.answerSubmit", "Update the draft with my answers")]
+									})
+								]
+							})
+						]
+					})]
+				}), /* @__PURE__ */ jsxs(Card, {
+					className: "flex min-w-0 flex-col",
+					"data-testid": "ai-studio-draft",
+					children: [/* @__PURE__ */ jsxs(CardHeader, {
+						className: "flex flex-row flex-wrap items-center justify-between gap-2 pb-2",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex min-w-0 items-center gap-2",
+							children: [/* @__PURE__ */ jsx(Badge, {
+								variant: "secondary",
+								children: tr("fluidgrids.aiStudio.draftBadge", "Draft")
+							}), /* @__PURE__ */ jsx("h2", {
+								className: "truncate text-base font-semibold text-text-primary",
+								"data-testid": "ai-studio-draft-name",
+								children: draft?.name ?? (working ? tr("fluidgrids.aiStudio.draftGenerating", "Your workflow is being generated") : tr("fluidgrids.aiStudio.draftEmpty", "No draft yet"))
+							})]
+						}), draft && /* @__PURE__ */ jsx(Badge, {
+							variant: "outline",
+							"data-testid": "ai-studio-step-count",
+							children: tr("fluidgrids.aiStudio.stepCount", "{{count}} steps", { count: draft.nodeCount })
+						})]
+					}), /* @__PURE__ */ jsxs(CardContent, {
+						className: "flex flex-col gap-4",
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "relative h-[360px] w-full overflow-hidden rounded-lg border border-border-secondary sm:h-[440px]",
+								children: draft && current ? /* @__PURE__ */ jsx(DraftCanvas, {
+									generationId: current.id,
+									name: draft.name,
+									definitionJson: draft.definitionJson
+								}) : /* @__PURE__ */ jsx("div", {
+									className: "flex h-full flex-col items-center justify-center gap-3 p-6 text-center text-sm text-text-secondary",
+									"data-testid": `ai-studio-state-${phase}`,
+									children: working ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Loader2, { className: "size-6 animate-spin" }), /* @__PURE__ */ jsx("p", { children: tr("fluidgrids.aiStudio.generatingHint", "Picking nodes, connecting them and checking the result. This usually takes under a minute.") })] }) : phase === "failed" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+										/* @__PURE__ */ jsx(TriangleAlert, { className: "size-6 text-status-error-text" }),
+										/* @__PURE__ */ jsx("p", {
+											role: "alert",
+											className: "text-status-error-text",
+											children: current?.message ?? tr("fluidgrids.aiStudio.failed", "The draft could not be generated.")
+										}),
+										errors.length > 0 && /* @__PURE__ */ jsx("ul", {
+											className: "max-w-md list-disc text-left text-xs",
+											children: errors.slice(0, 5).map((entry) => /* @__PURE__ */ jsx("li", { children: entry }, entry))
+										})
+									] }) : phase === "cancelled" ? /* @__PURE__ */ jsx("p", { children: tr("fluidgrids.aiStudio.cancelled", "Generation stopped. Change the request or generate again.") }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Sparkles, {
+										className: "size-6",
+										"aria-hidden": true
+									}), /* @__PURE__ */ jsx("p", { children: tr("fluidgrids.aiStudio.emptyHint", "Your draft appears here: a trigger and the steps that follow, ready to review.") })] })
+								})
+							}),
+							(generation.error || generation.timedOut) && /* @__PURE__ */ jsx("div", {
+								role: "alert",
+								className: "rounded-md border border-status-error-border bg-status-error-bg-subtle p-3 text-sm text-status-error-text",
+								"data-testid": "ai-studio-error",
+								children: generation.timedOut ? tr("fluidgrids.aiStudio.timedOut", "The draft is taking longer than expected. Try again in a moment.") : generation.error
+							}),
+							draft && /* @__PURE__ */ jsxs(Fragment, { children: [
+								draft.explanation && /* @__PURE__ */ jsx("p", {
+									className: "text-sm text-text-secondary",
+									"data-testid": "ai-studio-explanation",
+									children: draft.explanation
+								}),
+								steps.length > 0 && /* @__PURE__ */ jsx("ol", {
+									className: "flex flex-col gap-1 text-sm",
+									"data-testid": "ai-studio-steps",
+									children: steps.map((step, index) => /* @__PURE__ */ jsxs("li", {
+										className: "flex items-center gap-2 text-text-primary",
+										children: [
+											/* @__PURE__ */ jsx(CheckCircle2, {
+												className: "size-4 shrink-0 text-status-success-text",
+												"aria-hidden": true
+											}),
+											/* @__PURE__ */ jsxs("span", {
+												className: "text-text-secondary",
+												children: [index + 1, "."]
+											}),
+											/* @__PURE__ */ jsx("span", {
+												className: "truncate",
+												children: step.label
+											})
+										]
+									}, step.id))
+								}),
+								warnings.length > 0 && /* @__PURE__ */ jsxs("div", {
+									className: "rounded-md border border-status-warning-border bg-status-warning-bg-subtle p-3 text-sm text-status-warning-text",
+									"data-testid": "ai-studio-warnings",
+									children: [/* @__PURE__ */ jsx("p", {
+										className: "font-medium",
+										children: tr("fluidgrids.aiStudio.warningsTitle", "Fill in before activating")
+									}), /* @__PURE__ */ jsx("ul", {
+										className: "mt-1 list-disc pl-5 text-xs",
+										children: warnings.map((warning) => /* @__PURE__ */ jsx("li", { children: warning }, warning))
+									})]
+								})
+							] }),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-wrap items-center gap-2",
+								children: [
+									/* @__PURE__ */ jsxs(Button, {
+										"data-testid": "ai-studio-edit-in-builder",
+										disabled: !draft || saving || working || !canCreate,
+										onClick: () => void handleEditInBuilder(),
+										className: "flex gap-2",
+										children: [saving ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(Pencil, { className: "size-4" }), tr("fluidgrids.aiStudio.editInBuilder", "Edit in builder")]
+									}),
+									/* @__PURE__ */ jsxs(Button, {
+										variant: "outline",
+										"data-testid": "ai-studio-regenerate",
+										disabled: !requestRef.current || working || !canGenerate,
+										onClick: handleRegenerate,
+										className: "flex gap-2",
+										children: [/* @__PURE__ */ jsx(RefreshCw, { className: "size-4" }), tr("fluidgrids.aiStudio.regenerate", "Regenerate")]
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "text-xs text-text-secondary sm:ml-auto",
+										children: tr("fluidgrids.aiStudio.betaNote", "AI Studio is in beta. Outputs may vary.")
+									})
+								]
+							})
+						]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx(CreateWorkflowRefusalDialog, {
+				surface: "builder-create",
+				refusal,
+				onClose: () => setRefusal(null),
+				onUpgrade: () => navigate(BILLING_PLANS_PATH)
+			})
+		]
+	});
+}
+
+export { AiStudioPage_exports as n, AiStudioPage as t };