@arbidocs/blocks 0.4.72 → 0.4.73

package/dist/workflow-canvas/index.js

@@ -0,0 +1,1579 @@
+"use client";
+import { useConnection } from '../chunk-OYMWV45N.js';
+import { describeRRule, RecurrenceBuilder, AgentSelect, useWorkflowPreview, workflowWhen, isoToLocalInput, localInputToIso } from '../chunk-QDNXEB3T.js';
+import '../chunk-CKB64Z4R.js';
+import '../chunk-P6GHJSLR.js';
+import { workflowSteps, dependsOn, stepLevels, stepDependencies, validateWorkflowGraph, WorkflowRunner, fromPlanSteps, layoutFromPlanSteps, skillToWorkflow, orderSteps, toPlanSteps } from '../chunk-2P3T23C7.js';
+import '../chunk-4WWM3GQ5.js';
+import '../chunk-RFXJYIDV.js';
+import '../chunk-DPLRHEJZ.js';
+import '../chunk-EVUEIBNU.js';
+import '../chunk-BUHKUKKB.js';
+import '../chunk-YU2KUMGE.js';
+import '../chunk-DDF5GPIJ.js';
+import '../chunk-XD2M6LIG.js';
+import '../chunk-S7PSMMRG.js';
+import '../chunk-3VQYJBOI.js';
+import '../chunk-AA3PT6KR.js';
+import '../chunk-SLSBJRWW.js';
+import '../chunk-NPLYHR2E.js';
+import '../chunk-76JDDMSP.js';
+import '../chunk-OXF2IFXG.js';
+import '../chunk-TX2ZICS7.js';
+import '../chunk-7F6CBP3Z.js';
+import '../chunk-VUNV25KB.js';
+import { useMemo, useState, useEffect, useCallback, useRef } from 'react';
+import { useWorkflows, useSkills, useAgents, useConversations, useCreateWorkflow, useUpdateWorkflow, useRunWorkflow } from '@arbidocs/react';
+import { Input, Textarea, Checkbox, Button, cn, Label, Popover, PopoverTrigger, PopoverContent } from '@arbidocs/react/ui';
+import { X, Trash2, Plus, ClipboardCheck, Bot, Upload, FileInput, PencilRuler, Eye, LayoutGrid, Settings2, Play, Loader2, Save, Zap, GitBranch, Check, AlertTriangle, MinusCircle } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { MarkerType, applyNodeChanges, ReactFlow, Background, BackgroundVariant, Controls, MiniMap, Handle, Position } from '@xyflow/react';
+
+// src/workflow-canvas/edit.ts
+function newSteppedWorkflow(id, title) {
+  return {
+    id,
+    title,
+    description: "",
+    inputs: [],
+    landing: "chat",
+    schedulable: false,
+    run: { kind: "steps", steps: [] }
+  };
+}
+function withSteps(workflow, steps, layout) {
+  const run = workflow.run.kind === "steps" ? workflow.run : { kind: "steps", steps: [] };
+  return {
+    ...workflow,
+    run: { ...run, steps: orderSteps(steps), layout: layout ?? run.layout }
+  };
+}
+var layoutOf = (workflow) => workflow.run.kind === "steps" && workflow.run.layout || {};
+var explicit = (steps) => steps.map((s) => ({ ...s, after: stepDependencies(steps, s.id) }));
+function stepIdFor(steps, title) {
+  const base = title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").replace(/^[^a-z]+/, "") || "step";
+  const taken = new Set(steps.map((s) => s.id));
+  if (!taken.has(base)) return base;
+  let n = 2;
+  while (taken.has(`${base}-${n}`)) n++;
+  return `${base}-${n}`;
+}
+var DEFAULT_TITLES = {
+  form: "Details",
+  upload: "Upload files",
+  agent: "Agent step",
+  review: "Review"
+};
+function blankStep(kind, id, title) {
+  switch (kind) {
+    case "form":
+      return { id, kind, title, inputs: [] };
+    case "upload":
+      return { id, kind, title };
+    case "agent":
+      return { id, kind, title, run: { kind: "prompt", promptTemplate: "" } };
+    case "review":
+      return { id, kind, title, instructions: "" };
+  }
+}
+function addStep(workflow, kind, options = {}) {
+  const steps = explicit(workflowSteps(workflow));
+  const title = options.title ?? DEFAULT_TITLES[kind];
+  const id = stepIdFor(steps, title);
+  const step = { ...blankStep(kind, id, title), after: options.after ? [options.after] : [] };
+  const layout = { ...layoutOf(workflow) };
+  if (options.position) layout[id] = options.position;
+  return { workflow: withSteps(workflow, [...steps, step], layout), id };
+}
+function removeStep(workflow, id) {
+  const steps = explicit(workflowSteps(workflow));
+  const removed = steps.find((s) => s.id === id);
+  if (!removed) return workflow;
+  const bridged = steps.filter((s) => s.id !== id).map(
+    (s) => s.after?.includes(id) ? {
+      ...s,
+      after: [.../* @__PURE__ */ new Set([...s.after.filter((d) => d !== id), ...removed.after ?? []])]
+    } : s
+  );
+  const { [id]: _gone, ...layout } = layoutOf(workflow);
+  return withSteps(workflow, bridged, layout);
+}
+function connectSteps(workflow, from, to) {
+  const steps = explicit(workflowSteps(workflow));
+  if (from === to || !steps.some((s) => s.id === from) || dependsOn(steps, from, to)) {
+    return workflow;
+  }
+  return withSteps(
+    workflow,
+    steps.map(
+      (s) => s.id === to && !s.after?.includes(from) ? { ...s, after: [...s.after ?? [], from] } : s
+    )
+  );
+}
+var wouldCycle = (workflow, from, to) => from === to || dependsOn(workflowSteps(workflow), from, to);
+function disconnectSteps(workflow, from, to) {
+  const steps = explicit(workflowSteps(workflow));
+  return withSteps(
+    workflow,
+    steps.map((s) => s.id === to ? { ...s, after: (s.after ?? []).filter((d) => d !== from) } : s)
+  );
+}
+function updateStep(workflow, id, patch) {
+  const steps = explicit(workflowSteps(workflow));
+  return withSteps(
+    workflow,
+    steps.map(
+      (s) => s.id === id ? { ...s, ...patch, id: s.id, kind: s.kind } : s
+    )
+  );
+}
+var renameIn = (text, from, to) => text.replace(
+  /\{\{([^}]*)\}\}/g,
+  (_, inner) => `{{${inner.split("||").map((part) => part.trim() === from ? part.replace(from, to) : part).join("||")}}}`
+);
+function renameInput(workflow, from, to) {
+  if (from === to) return workflow;
+  const steps = workflowSteps(workflow).map((s) => {
+    if (s.kind === "agent")
+      return {
+        ...s,
+        with: s.with ? Object.fromEntries(Object.entries(s.with).map(([k, v]) => [k, renameIn(v, from, to)])) : s.with,
+        run: s.run?.kind === "prompt" ? { ...s.run, promptTemplate: renameIn(s.run.promptTemplate, from, to) } : s.run
+      };
+    if (s.kind === "review" && s.instructions)
+      return { ...s, instructions: renameIn(s.instructions, from, to) };
+    return s;
+  });
+  return withSteps(workflow, steps);
+}
+function moveStep(workflow, id, position) {
+  return withSteps(workflow, workflowSteps(workflow), { ...layoutOf(workflow), [id]: position });
+}
+var COLUMN = 300;
+var ROW = 140;
+function autoLayout(steps) {
+  const layout = {};
+  stepLevels(steps).forEach(
+    (level, x) => level.forEach((s, y) => {
+      layout[s.id] = { x: x * COLUMN, y: (y - (level.length - 1) / 2) * ROW };
+    })
+  );
+  return layout;
+}
+function layoutWithDefaults(workflow) {
+  const auto = autoLayout(workflowSteps(workflow));
+  return { ...auto, ...layoutOf(workflow) };
+}
+var DEFAULT_STEP_INSPECTOR_LABELS = {
+  workflow: "Workflow",
+  title: "Title",
+  description: "Description",
+  waitsFor: "Waits for",
+  startsWithRun: "Starts with the run",
+  fields: "Fields",
+  addField: "Add field",
+  fieldLabel: "Label",
+  fieldType: "Type",
+  required: "Required",
+  runs: "Runs",
+  ownPrompt: "Its own instruction",
+  prompt: "Instruction",
+  promptHint: "Use {{field}} for an input and {{steps.<id>}} for an earlier step\u2019s answer.",
+  inputFor: "Input",
+  thread: "Where it runs",
+  threadMain: "In the run\u2019s thread (sees the conversation so far)",
+  threadBranch: "On a branch (delivers only its result to the thread)",
+  output: "Shows",
+  outputAnswer: "The answer",
+  outputArtifact: "A drafted document",
+  uploadRequired: "Files are required",
+  hint: "Hint",
+  instructions: "What to review",
+  instructionsHint: "Shown on the review task; {{field}} and {{steps.<id>}} work here.",
+  deleteStep: "Delete step"
+};
+var FIELD_TYPES = ["text", "longtext", "boolean", "number", "date", "scope"];
+var selectClass = "flex h-9 w-full rounded-md border border-input bg-background px-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring";
+function Field({ label, children, hint }) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsx(Label, { className: "text-xs", children: label }),
+    children,
+    hint && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: hint })
+  ] });
+}
+var fieldName = (label, taken) => {
+  const base = label.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "").replace(/^[^a-z]+/, "") || "field";
+  let name = base;
+  let n = 2;
+  while (taken.includes(name)) name = `${base}_${n++}`;
+  return name;
+};
+function StepInspector({
+  workflow,
+  stepId,
+  onChange,
+  onSelect,
+  workflows = [],
+  labels,
+  testId = "step-inspector"
+}) {
+  const l = { ...DEFAULT_STEP_INSPECTOR_LABELS, ...labels };
+  const steps = workflowSteps(workflow);
+  const step = steps.find((s) => s.id === stepId);
+  const run = workflow.run.kind === "steps" ? workflow.run : void 0;
+  if (!step || !run) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", "data-testid": `${testId}-workflow`, children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: l.workflow }),
+      /* @__PURE__ */ jsx(Field, { label: l.title, children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: workflow.title,
+          onChange: (e) => onChange({ ...workflow, title: e.target.value }),
+          "data-testid": `${testId}-workflow-title`
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Field, { label: l.description, children: /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          value: workflow.description,
+          rows: 2,
+          onChange: (e) => onChange({ ...workflow, description: e.target.value })
+        }
+      ) })
+    ] });
+  }
+  const patch = (p) => onChange(updateStep(workflow, step.id, p));
+  const deps = stepDependencies(steps, step.id);
+  const titleOf = (id) => steps.find((s) => s.id === id)?.title ?? id;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", "data-testid": `${testId}-step`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold", children: step.title }),
+      /* @__PURE__ */ jsx("code", { className: "shrink-0 rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground", children: step.id })
+    ] }),
+    /* @__PURE__ */ jsx(Field, { label: l.title, children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        value: step.title,
+        onChange: (e) => patch({ title: e.target.value }),
+        "data-testid": `${testId}-title`
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Field, { label: l.description, children: /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        value: step.description ?? "",
+        rows: 2,
+        onChange: (e) => patch({ description: e.target.value || void 0 })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Field, { label: l.waitsFor, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", "data-testid": `${testId}-waits-for`, children: [
+      deps.length === 0 && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: l.startsWithRun }),
+      deps.map((d) => /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 text-xs",
+          children: [
+            titleOf(d),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": `${titleOf(d)} \xD7`,
+                onClick: () => onChange(disconnectSteps(workflow, d, step.id)),
+                children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+              }
+            )
+          ]
+        },
+        d
+      ))
+    ] }) }),
+    step.kind === "form" && /* @__PURE__ */ jsx(
+      FormFields,
+      {
+        fields: step.inputs,
+        taken: steps.flatMap((s) => s.kind === "form" && s.id !== step.id ? s.inputs : []).map((f) => f.name),
+        onChange: (inputs) => {
+          const renamed = step.inputs.flatMap(
+            (f, i) => inputs[i] && inputs[i].name !== f.name ? [[f.name, inputs[i].name]] : []
+          );
+          onChange(
+            renamed.reduce(
+              (w, [from, to]) => renameInput(w, from, to),
+              updateStep(workflow, step.id, { inputs })
+            )
+          );
+        },
+        l,
+        testId
+      }
+    ),
+    step.kind === "upload" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: !!step.required,
+            onCheckedChange: (v) => patch({ required: v === true || void 0 })
+          }
+        ),
+        l.uploadRequired
+      ] }),
+      /* @__PURE__ */ jsx(Field, { label: l.hint, children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: step.hint ?? "",
+          onChange: (e) => patch({ hint: e.target.value || void 0 })
+        }
+      ) })
+    ] }),
+    step.kind === "agent" && /* @__PURE__ */ jsx(AgentSettings, { step, workflows, patch, l, testId }),
+    step.kind === "review" && /* @__PURE__ */ jsx(Field, { label: l.instructions, hint: l.instructionsHint, children: /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        value: step.instructions ?? "",
+        rows: 4,
+        onChange: (e) => patch({ instructions: e.target.value || void 0 }),
+        "data-testid": `${testId}-instructions`
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: "text-destructive",
+        onClick: () => {
+          onChange(removeStep(workflow, step.id));
+          onSelect?.(null);
+        },
+        "data-testid": `${testId}-delete`,
+        children: [
+          /* @__PURE__ */ jsx(Trash2, { className: "size-4" }),
+          " ",
+          l.deleteStep
+        ]
+      }
+    )
+  ] });
+}
+function FormFields({
+  fields,
+  taken,
+  onChange,
+  l,
+  testId
+}) {
+  const set = (i, p) => onChange(fields.map((f, j) => j === i ? { ...f, ...p } : f));
+  return /* @__PURE__ */ jsx(Field, { label: l.fields, children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", "data-testid": `${testId}-fields`, children: [
+    fields.map((f, i) => /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 rounded-md border border-border p-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: f.label,
+            "aria-label": l.fieldLabel,
+            onChange: (e) => set(i, {
+              label: e.target.value,
+              name: fieldName(e.target.value, [
+                ...taken,
+                ...fields.filter((_, j) => j !== i).map((x) => x.name)
+              ])
+            }),
+            className: "h-8"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `${f.label} \xD7`,
+            onClick: () => onChange(fields.filter((_, j) => j !== i)),
+            children: /* @__PURE__ */ jsx(X, { className: "size-4 text-muted-foreground" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            "aria-label": l.fieldType,
+            className: cn(selectClass, "h-8"),
+            value: f.type,
+            onChange: (e) => set(i, { type: e.target.value }),
+            children: FIELD_TYPES.map((t) => /* @__PURE__ */ jsx("option", { value: t, children: t }, t))
+          }
+        ),
+        /* @__PURE__ */ jsxs("label", { className: "flex shrink-0 items-center gap-1.5 text-xs", children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: !!f.required,
+              onCheckedChange: (v) => set(i, { required: v === true || void 0 })
+            }
+          ),
+          l.required
+        ] }),
+        /* @__PURE__ */ jsx("code", { className: "shrink-0 text-[11px] text-muted-foreground", children: `{{${f.name}}}` })
+      ] })
+    ] }, i)),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: () => onChange([
+          ...fields,
+          {
+            name: fieldName("Field", [...taken, ...fields.map((f) => f.name)]),
+            type: "text",
+            label: "Field"
+          }
+        ]),
+        "data-testid": `${testId}-add-field`,
+        children: [
+          /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+          " ",
+          l.addField
+        ]
+      }
+    )
+  ] }) });
+}
+function AgentSettings({
+  step,
+  workflows,
+  patch,
+  l,
+  testId
+}) {
+  const target = step.workflow ? workflows.find((w) => w.id === step.workflow) : void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Field, { label: l.runs, children: /* @__PURE__ */ jsxs(
+      "select",
+      {
+        className: selectClass,
+        value: step.workflow ?? "",
+        onChange: (e) => e.target.value ? patch({ workflow: e.target.value, run: void 0, with: step.with ?? {} }) : patch({
+          workflow: void 0,
+          with: void 0,
+          run: { kind: "prompt", promptTemplate: "" }
+        }),
+        "data-testid": `${testId}-runs`,
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: l.ownPrompt }),
+          workflows.map((w) => /* @__PURE__ */ jsx("option", { value: w.id, children: w.title }, w.id)),
+          step.workflow && !target && /* @__PURE__ */ jsx("option", { value: step.workflow, children: step.workflow })
+        ]
+      }
+    ) }),
+    step.workflow ? (target?.inputs ?? []).map((f) => /* @__PURE__ */ jsx(Field, { label: `${l.inputFor}: ${f.label}`, children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        value: step.with?.[f.name] ?? "",
+        placeholder: `{{${f.name}}}`,
+        onChange: (e) => patch({ with: { ...step.with, [f.name]: e.target.value } }),
+        "data-testid": `${testId}-with-${f.name}`
+      }
+    ) }, f.name)) : step.run?.kind === "prompt" ? /* @__PURE__ */ jsx(Field, { label: l.prompt, hint: l.promptHint, children: /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        value: step.run.promptTemplate,
+        rows: 5,
+        onChange: (e) => patch({ run: { kind: "prompt", promptTemplate: e.target.value } }),
+        "data-testid": `${testId}-prompt`
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsx(Field, { label: l.thread, children: /* @__PURE__ */ jsxs(
+      "select",
+      {
+        className: selectClass,
+        value: step.branch ? "branch" : "main",
+        onChange: (e) => patch({ branch: e.target.value === "branch" || void 0 }),
+        "data-testid": `${testId}-thread`,
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "main", children: l.threadMain }),
+          /* @__PURE__ */ jsx("option", { value: "branch", children: l.threadBranch })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Field, { label: l.output, children: /* @__PURE__ */ jsxs(
+      "select",
+      {
+        className: selectClass,
+        value: step.output ?? "answer",
+        onChange: (e) => patch({ output: e.target.value === "artifact" ? "artifact" : void 0 }),
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "answer", children: l.outputAnswer }),
+          /* @__PURE__ */ jsx("option", { value: "artifact", children: l.outputArtifact })
+        ]
+      }
+    ) })
+  ] });
+}
+var DEFAULT_TRIGGER_INSPECTOR_LABELS = {
+  heading: "Start",
+  start: "Starts",
+  starts: {
+    manual: "When someone runs it",
+    once: "Once, at a time",
+    repeat: "On a schedule",
+    event: "When something happens",
+    task: "When a task is done"
+  },
+  runAt: "When",
+  event: "Event",
+  eventPlaceholder: "Pick an event",
+  afterTask: "After this task",
+  afterTaskPlaceholder: "Pick a task",
+  agent: "Runs as",
+  access: "Access when nobody is there",
+  accessAsk: "Ask me each run",
+  accessStanding: "Keep access"
+};
+function triggerSummary(trigger, options = {}) {
+  const l = { ...DEFAULT_TRIGGER_INSPECTOR_LABELS, ...options.labels };
+  switch (trigger.start) {
+    case "once":
+      return trigger.runAt ? new Date(trigger.runAt).toLocaleString() : l.starts.once;
+    case "repeat":
+      return trigger.rrule ? describeRRule(trigger.rrule) : l.starts.repeat;
+    case "event":
+      return trigger.eventKind && options.eventLabel?.(trigger.eventKind) || trigger.eventKind || l.starts.event;
+    case "task":
+      return trigger.afterTaskId && options.taskLabel?.(trigger.afterTaskId) || l.starts.task;
+    default:
+      return l.starts.manual;
+  }
+}
+var selectClass2 = "flex h-9 w-full rounded-md border border-input bg-background px-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring";
+var STARTS = ["manual", "once", "repeat", "event", "task"];
+function TriggerInspector({
+  trigger,
+  onChange,
+  agents = [],
+  eventKinds = [],
+  tasks = [],
+  labels,
+  testId = "trigger-inspector"
+}) {
+  const l = { ...DEFAULT_TRIGGER_INSPECTOR_LABELS, ...labels };
+  const set = (patch) => onChange({ ...trigger, ...patch });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", "data-testid": testId, children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: l.heading }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsx(Label, { className: "text-xs", children: l.start }),
+      /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", role: "radiogroup", "aria-label": l.start, children: STARTS.map((start) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "radio",
+          "aria-checked": trigger.start === start,
+          onClick: () => set({ start }),
+          className: cn(
+            "rounded-md border px-3 py-2 text-left text-sm transition-colors",
+            trigger.start === start ? "border-primary bg-primary/10 text-primary" : "border-border hover:bg-muted/50"
+          ),
+          "data-testid": `${testId}-start-${start}`,
+          children: l.starts[start]
+        },
+        start
+      )) })
+    ] }),
+    trigger.start === "once" && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsx(Label, { className: "text-xs", children: l.runAt }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "datetime-local",
+          value: trigger.runAt,
+          onChange: (e) => set({ runAt: e.target.value }),
+          "data-testid": `${testId}-run-at`
+        }
+      )
+    ] }),
+    trigger.start === "repeat" && /* @__PURE__ */ jsx(RecurrenceBuilder, { rrule: trigger.rrule, onChange: (rrule) => set({ rrule }) }),
+    trigger.start === "event" && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsx(Label, { className: "text-xs", children: l.event }),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          className: selectClass2,
+          value: trigger.eventKind,
+          onChange: (e) => set({ eventKind: e.target.value }),
+          "data-testid": `${testId}-event`,
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: l.eventPlaceholder }),
+            eventKinds.map((k) => /* @__PURE__ */ jsx("option", { value: k.value, children: k.label }, k.value))
+          ]
+        }
+      )
+    ] }),
+    trigger.start === "task" && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsx(Label, { className: "text-xs", children: l.afterTask }),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          className: selectClass2,
+          value: trigger.afterTaskId,
+          onChange: (e) => set({ afterTaskId: e.target.value }),
+          "data-testid": `${testId}-after-task`,
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: l.afterTaskPlaceholder }),
+            tasks.map((t) => /* @__PURE__ */ jsx("option", { value: t.value, children: t.label }, t.value))
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsx(Label, { className: "text-xs", children: l.agent }),
+      /* @__PURE__ */ jsx(
+        AgentSelect,
+        {
+          agents,
+          value: trigger.agentId,
+          onValueChange: (agentId) => set({ agentId }),
+          hideLabel: true,
+          testId: `${testId}-agent`
+        }
+      )
+    ] }),
+    trigger.start !== "manual" && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsx(Label, { className: "text-xs", children: l.access }),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          className: selectClass2,
+          value: trigger.access,
+          onChange: (e) => set({ access: e.target.value === "standing" ? "standing" : "ask_each_run" }),
+          "data-testid": `${testId}-access`,
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "ask_each_run", children: l.accessAsk }),
+            /* @__PURE__ */ jsx("option", { value: "standing", children: l.accessStanding })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+var DEFAULT_WORKFLOW_CANVAS_LABELS = {
+  form: "Form",
+  upload: "Upload",
+  agent: "AI step",
+  review: "Approval",
+  branch: "Branch",
+  kindHints: {
+    form: "Ask for details",
+    upload: "Collect files",
+    agent: "Run a skill or an instruction",
+    review: "A person approves"
+  },
+  addNext: "Add the next step",
+  runs: "Runs \u201C{name}\u201D",
+  instruction: "No instruction yet",
+  fields: "{count} fields",
+  noFields: "No fields yet",
+  approvedBy: "A person approves",
+  emptyTitle: "Start your workflow",
+  emptyHint: "Add the first step: what should happen when it starts?"
+};
+var TRIGGER_NODE = "__trigger";
+var STEP_KIND_ICONS = {
+  form: FileInput,
+  upload: Upload,
+  agent: Bot,
+  review: ClipboardCheck
+};
+var KINDS = ["form", "upload", "agent", "review"];
+function AddNext({
+  from,
+  onAdd,
+  l,
+  testId
+}) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "wf-add nodrag nopan flex size-7 items-center justify-center rounded-full border border-border bg-card text-muted-foreground shadow-sm hover:text-foreground",
+        "aria-label": l.addNext,
+        "data-testid": `${testId}-add-after-${from === TRIGGER_NODE ? "trigger" : from}`,
+        children: /* @__PURE__ */ jsx(Plus, { className: "size-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { side: "right", align: "start", className: "w-60 p-1.5", children: [
+      /* @__PURE__ */ jsx("p", { className: "px-2 pb-1 pt-0.5 text-xs font-medium text-muted-foreground", children: l.addNext }),
+      KINDS.map((kind) => {
+        const Icon = STEP_KIND_ICONS[kind];
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              setOpen(false);
+              onAdd(from, kind);
+            },
+            className: cn(
+              `wf-kind-${kind}`,
+              "flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-left hover:bg-muted"
+            ),
+            "data-testid": `${testId}-add-after-${from === TRIGGER_NODE ? "trigger" : from}-${kind}`,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "wf-badge flex size-7 shrink-0 items-center justify-center rounded-md", children: /* @__PURE__ */ jsx(Icon, { className: "size-4" }) }),
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("span", { className: "block text-sm font-medium", children: l[kind] }),
+                /* @__PURE__ */ jsx("span", { className: "block text-xs text-muted-foreground", children: l.kindHints[kind] })
+              ] })
+            ]
+          },
+          kind
+        );
+      })
+    ] })
+  ] });
+}
+function PhaseMark({ phase }) {
+  if (phase === "running") return /* @__PURE__ */ jsx(Loader2, { className: "wf-kind-text size-4 animate-spin" });
+  if (phase === "done") return /* @__PURE__ */ jsx(Check, { className: "wf-kind-text size-4" });
+  if (phase === "failed") return /* @__PURE__ */ jsx(AlertTriangle, { className: "size-4 text-destructive" });
+  if (phase === "skipped") return /* @__PURE__ */ jsx(MinusCircle, { className: "size-4 text-muted-foreground" });
+  return null;
+}
+function StepNode({ data }) {
+  const { step, phase, summary, icon, l, onAdd, testId } = data;
+  const KindIcon = STEP_KIND_ICONS[step.kind];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "wf-node w-64 py-3 pl-4 pr-3 text-left",
+        `wf-kind-${step.kind}`,
+        phase && `wf-phase-${phase}`
+      ),
+      "data-testid": `${testId}-node-${step.id}`,
+      "data-phase": phase,
+      children: [
+        /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Left }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "wf-badge flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg]:size-4", children: icon ?? /* @__PURE__ */ jsx(KindIcon, {}) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "wf-kind-text text-[10px] font-semibold uppercase tracking-wider", children: l[step.kind] }),
+              /* @__PURE__ */ jsx(PhaseMark, { phase })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold leading-snug", children: step.title }),
+            summary && /* @__PURE__ */ jsx("p", { className: "mt-0.5 line-clamp-2 text-xs leading-snug text-muted-foreground", children: summary }),
+            step.kind === "agent" && step.branch && /* @__PURE__ */ jsxs("span", { className: "mt-1.5 inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: [
+              /* @__PURE__ */ jsx(GitBranch, { className: "size-3" }),
+              " ",
+              l.branch
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Right }),
+        onAdd && /* @__PURE__ */ jsx(AddNext, { from: step.id, onAdd, l, testId })
+      ]
+    }
+  );
+}
+function TriggerNode({ data }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "wf-start wf-kind-start relative w-60 px-4 py-3 text-left",
+      "data-testid": `${data.testId}-node-trigger`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "wf-badge flex size-8 shrink-0 items-center justify-center rounded-full", children: /* @__PURE__ */ jsx(Zap, { className: "size-4" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "wf-kind-text text-[10px] font-semibold uppercase tracking-wider", children: data.title }),
+            /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold", children: data.summary })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Right }),
+        data.onAdd && /* @__PURE__ */ jsx(AddNext, { from: TRIGGER_NODE, onAdd: data.onAdd, l: data.l, testId: data.testId })
+      ]
+    }
+  );
+}
+var NODE_TYPES = { step: StepNode, trigger: TriggerNode };
+var READABLE_ZOOM = 0.7;
+var firstWords = (text, n = 14) => {
+  const words = text.trim().split(/\s+/);
+  return words.length > n ? `${words.slice(0, n).join(" ")}\u2026` : text.trim();
+};
+function summaryOf(step, l, workflowTitle) {
+  if (step.description) return step.description;
+  switch (step.kind) {
+    case "agent":
+      if (step.workflow)
+        return l.runs.replace("{name}", workflowTitle?.(step.workflow) ?? step.workflow);
+      return step.run?.kind === "prompt" && step.run.promptTemplate.trim() ? firstWords(step.run.promptTemplate) : l.instruction;
+    case "form":
+      return step.inputs.length ? step.inputs.length === 1 ? step.inputs[0].label : l.fields.replace("{count}", String(step.inputs.length)) : l.noFields;
+    case "upload":
+      return step.hint;
+    case "review":
+      return step.instructions ? firstWords(step.instructions) : l.approvedBy;
+  }
+}
+function WorkflowCanvas({
+  workflow,
+  onChange,
+  selected = null,
+  onSelect,
+  onAddAfter,
+  phases,
+  workflowTitle,
+  trigger,
+  renderIcon,
+  labels,
+  className,
+  reserveRight = 0,
+  testId = "workflow-canvas"
+}) {
+  const l = useMemo(() => ({ ...DEFAULT_WORKFLOW_CANVAS_LABELS, ...labels }), [labels]);
+  const steps = workflowSteps(workflow);
+  const editable = !!onChange;
+  const built = useMemo(() => {
+    const layout = layoutWithDefaults(workflow);
+    const all = workflowSteps(workflow);
+    const roots = all.filter((s) => stepDependencies(all, s.id).length === 0);
+    const triggerNode = trigger ? [
+      {
+        id: TRIGGER_NODE,
+        type: "trigger",
+        deletable: false,
+        selected: selected === TRIGGER_NODE,
+        position: layout[TRIGGER_NODE] ?? {
+          x: Math.min(0, ...Object.values(layout).map((p) => p.x)) - 320,
+          y: roots.length ? roots.reduce((sum, s) => sum + (layout[s.id]?.y ?? 0), 0) / roots.length : 0
+        },
+        data: { title: trigger.title, summary: trigger.summary, l, onAdd: onAddAfter, testId }
+      }
+    ] : [];
+    return [
+      ...triggerNode,
+      ...all.map((step) => ({
+        id: step.id,
+        type: "step",
+        position: layout[step.id] ?? { x: 0, y: 0 },
+        selected: step.id === selected,
+        data: {
+          step,
+          phase: phases?.[step.id],
+          summary: summaryOf(step, l, workflowTitle),
+          icon: step.icon && renderIcon ? renderIcon(step.icon) : void 0,
+          l,
+          onAdd: onAddAfter,
+          testId
+        }
+      }))
+    ];
+  }, [workflow, selected, phases, workflowTitle, trigger, renderIcon, l, onAddAfter, testId]);
+  const [nodes, setNodes] = useState(built);
+  useEffect(() => setNodes(built), [built]);
+  const edges = useMemo(
+    () => steps.flatMap((s) => {
+      const deps = stepDependencies(steps, s.id);
+      const from = deps.length ? deps : trigger ? [TRIGGER_NODE] : [];
+      return from.map((d) => ({
+        id: `${d}->${s.id}`,
+        source: d,
+        target: s.id,
+        type: "smoothstep",
+        deletable: d !== TRIGGER_NODE,
+        markerEnd: { type: MarkerType.ArrowClosed, width: 16, height: 16 },
+        animated: phases?.[s.id] === "running"
+      }));
+    }),
+    [steps, phases, trigger]
+  );
+  const onNodesChange = useCallback(
+    (changes) => {
+      setNodes((ns) => applyNodeChanges(changes, ns));
+      if (!onChange) return;
+      let next = workflow;
+      for (const c of changes) {
+        if (c.type === "position" && c.dragging === false && c.position && c.id !== TRIGGER_NODE) {
+          next = moveStep(next, c.id, c.position);
+        }
+      }
+      if (next !== workflow) onChange(next);
+    },
+    [workflow, onChange]
+  );
+  const onConnect = useCallback(
+    (c) => {
+      if (!onChange || !c.source || !c.target) return;
+      if (c.source === TRIGGER_NODE) onChange(updateStep(workflow, c.target, { after: [] }));
+      else onChange(connectSteps(workflow, c.source, c.target));
+    },
+    [workflow, onChange]
+  );
+  const frame = useRef(null);
+  const flowRef = useRef(null);
+  const onInit = useCallback(
+    async (flow) => {
+      flowRef.current = flow;
+      await flow.fitView({
+        padding: { top: "48px", bottom: "48px", left: "48px", right: `${reserveRight + 48}px` },
+        maxZoom: 1
+      });
+      const height = frame.current?.clientHeight;
+      const shown = flow.getNodes();
+      if (flow.getZoom() >= READABLE_ZOOM || !height || !shown.length) return;
+      const left = Math.min(...shown.map((n) => n.position.x));
+      const ys = shown.map((n) => n.position.y + (n.measured?.height ?? 0) / 2);
+      const middle = (Math.min(...ys) + Math.max(...ys)) / 2;
+      flow.setViewport({
+        x: 48 - left * READABLE_ZOOM,
+        y: height / 2 - middle * READABLE_ZOOM,
+        zoom: READABLE_ZOOM
+      });
+    },
+    [reserveRight]
+  );
+  useEffect(() => {
+    const flow = flowRef.current;
+    const box = frame.current;
+    const node = selected ? flow?.getNode(selected) : void 0;
+    if (!flow || !box || !node) return;
+    const { x, y, zoom } = flow.getViewport();
+    const w = (node.measured?.width ?? 256) * zoom;
+    const h = (node.measured?.height ?? 80) * zoom;
+    const left = node.position.x * zoom + x;
+    const top = node.position.y * zoom + y;
+    const right = box.clientWidth - reserveRight;
+    if (left >= 16 && top >= 16 && left + w <= right - 16 && top + h <= box.clientHeight - 16)
+      return;
+    void flow.setCenter(
+      node.position.x + (node.measured?.width ?? 256) / 2 + reserveRight / 2 / zoom,
+      node.position.y + (node.measured?.height ?? 80) / 2,
+      { zoom, duration: 250 }
+    );
+  }, [selected, nodes, reserveRight]);
+  const onDelete = useCallback(
+    ({ nodes: gone, edges: cut }) => {
+      if (!onChange) return;
+      const removed = new Set(gone.map((n) => n.id));
+      let next = gone.reduce((w, n) => removeStep(w, n.id), workflow);
+      for (const e of cut) {
+        if (!removed.has(e.source) && !removed.has(e.target)) {
+          next = disconnectSteps(next, e.source, e.target);
+        }
+      }
+      onChange(next);
+    },
+    [workflow, onChange]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative h-[max(560px,calc(100dvh-200px))] w-full overflow-hidden rounded-xl border border-border bg-muted/30",
+        className
+      ),
+      ref: frame,
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ jsxs(
+          ReactFlow,
+          {
+            nodes,
+            edges,
+            nodeTypes: NODE_TYPES,
+            onNodesChange,
+            onConnect,
+            onDelete,
+            isValidConnection: (c) => !!c.source && !!c.target && !wouldCycle(workflow, c.source, c.target),
+            onNodeClick: (_, node) => onSelect?.(node.id),
+            onPaneClick: () => onSelect?.(null),
+            nodesDraggable: editable,
+            nodesConnectable: editable,
+            elementsSelectable: true,
+            deleteKeyCode: editable ? ["Backspace", "Delete"] : null,
+            onInit,
+            fitViewOptions: { padding: 0.2, maxZoom: 1 },
+            minZoom: 0.3,
+            proOptions: { hideAttribution: true },
+            children: [
+              /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Dots, gap: 18, size: 1.5 }),
+              /* @__PURE__ */ jsx(Controls, { showInteractive: false, position: "bottom-left" }),
+              steps.length > 3 && /* @__PURE__ */ jsx(
+                MiniMap,
+                {
+                  pannable: true,
+                  zoomable: true,
+                  position: "bottom-right",
+                  className: "wf-minimap !rounded-lg !border !border-border",
+                  style: { width: 168, height: 104 },
+                  nodeBorderRadius: 8,
+                  nodeStrokeWidth: 0
+                }
+              )
+            ]
+          }
+        ),
+        steps.length === 0 && onAddAfter && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-16 flex justify-center", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "pointer-events-auto rounded-xl border border-dashed border-border bg-card/90 p-5 text-center shadow-sm backdrop-blur",
+            "data-testid": `${testId}-empty`,
+            children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: l.emptyTitle }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: l.emptyHint }),
+              /* @__PURE__ */ jsx("div", { className: "mt-3 grid grid-cols-2 gap-2", children: KINDS.map((kind) => {
+                const Icon = STEP_KIND_ICONS[kind];
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onAddAfter(TRIGGER_NODE, kind),
+                    className: cn(
+                      `wf-kind-${kind}`,
+                      "flex items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-left text-sm hover:bg-muted"
+                    ),
+                    "data-testid": `${testId}-empty-${kind}`,
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "wf-badge flex size-6 items-center justify-center rounded-md", children: /* @__PURE__ */ jsx(Icon, { className: "size-3.5" }) }),
+                      l[kind]
+                    ]
+                  },
+                  kind
+                );
+              }) })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+var DEFAULT_WORKFLOW_BUILDER_LABELS = {
+  addStep: "Add step",
+  tidy: "Tidy",
+  settings: "Workflow settings",
+  closePanel: "Close panel",
+  design: "Design",
+  preview: "Preview",
+  start: "Start",
+  previewAnswer: "Preview: the agent would be asked \u2014\n\n{prompt}",
+  problems: {
+    duplicate: "\u201C{step}\u201D appears twice.",
+    unknown: "\u201C{step}\u201D waits for a step that does not exist.",
+    cycle: "\u201C{step}\u201D waits for itself (a loop).",
+    order: "\u201C{step}\u201D is listed before a step it waits for."
+  }
+};
+var PANEL_WIDTH = 344;
+var KINDS2 = ["form", "upload", "agent", "review"];
+function WorkflowBuilder({
+  value,
+  onChange,
+  workflows = [],
+  agents = [],
+  eventKinds = [],
+  tasks = [],
+  compose,
+  renderIcon,
+  actions,
+  labels,
+  canvasLabels,
+  inspectorLabels,
+  triggerLabels,
+  testId = "workflow-builder",
+  className
+}) {
+  const l = { ...DEFAULT_WORKFLOW_BUILDER_LABELS, ...labels };
+  const [selected, setSelectedState] = useState(null);
+  const [panelOpen, setPanelOpen] = useState(false);
+  const setSelected = (id) => {
+    setSelectedState(id);
+    if (id) setPanelOpen(true);
+  };
+  const [mode, setMode] = useState("design");
+  const [adding, setAdding] = useState(false);
+  const { workflow, trigger } = value;
+  const steps = workflowSteps(workflow);
+  const problems = validateWorkflowGraph(steps);
+  const titles = useMemo(() => new Map(workflows.map((w) => [w.id, w.title])), [workflows]);
+  const setWorkflow = (next) => onChange({ ...value, workflow: next });
+  const addAfter = (from, kind) => {
+    const layout = layoutWithDefaults(workflow);
+    const origin = from && from !== TRIGGER_NODE ? layout[from] : void 0;
+    const siblings = steps.filter(
+      (s) => from && from !== TRIGGER_NODE ? s.after?.includes(from) : s.after?.length === 0
+    ).length;
+    const { workflow: next, id } = addStep(workflow, kind, {
+      after: from && from !== TRIGGER_NODE ? from : void 0,
+      position: origin ? { x: origin.x + 320, y: origin.y + siblings * 150 } : {
+        x: Math.max(0, ...Object.values(layout).map((p) => p.x)) + (steps.length ? 320 : 0),
+        y: siblings * 150
+      }
+    });
+    setWorkflow(next);
+    setSelected(id);
+  };
+  const add = (kind) => addAfter(
+    selected && selected !== TRIGGER_NODE ? selected : steps.at(-1)?.id ?? TRIGGER_NODE,
+    kind
+  );
+  const summary = triggerSummary(trigger, {
+    labels: triggerLabels,
+    eventLabel: (k) => eventKinds.find((e) => e.value === k)?.label,
+    taskLabel: (id) => tasks.find((t) => t.value === id)?.label
+  });
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), "data-testid": testId, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex rounded-md border border-border p-0.5", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: mode === "design" ? "secondary" : "ghost",
+            size: "sm",
+            onClick: () => setMode("design"),
+            "data-testid": `${testId}-mode-design`,
+            children: [
+              /* @__PURE__ */ jsx(PencilRuler, { className: "size-4" }),
+              " ",
+              l.design
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: mode === "preview" ? "secondary" : "ghost",
+            size: "sm",
+            onClick: () => setMode("preview"),
+            disabled: problems.length > 0 || steps.length === 0,
+            "data-testid": `${testId}-mode-preview`,
+            children: [
+              /* @__PURE__ */ jsx(Eye, { className: "size-4" }),
+              " ",
+              l.preview
+            ]
+          }
+        )
+      ] }),
+      mode === "design" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Popover, { open: adding, onOpenChange: setAdding, children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { size: "sm", "data-testid": `${testId}-add`, children: [
+            /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+            " ",
+            l.addStep
+          ] }) }),
+          /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "w-64 p-1.5", children: KINDS2.map((kind) => {
+            const Icon = STEP_KIND_ICONS[kind];
+            const cls = { ...DEFAULT_WORKFLOW_CANVAS_LABELS, ...canvasLabels };
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setAdding(false);
+                  add(kind);
+                },
+                className: cn(
+                  `wf-kind-${kind}`,
+                  "flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-left hover:bg-muted"
+                ),
+                "data-testid": `${testId}-add-${kind}`,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "wf-badge flex size-7 shrink-0 items-center justify-center rounded-md", children: /* @__PURE__ */ jsx(Icon, { className: "size-4" }) }),
+                  /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+                    /* @__PURE__ */ jsx("span", { className: "block text-sm font-medium", children: cls[kind] }),
+                    /* @__PURE__ */ jsx("span", { className: "block text-xs text-muted-foreground", children: cls.kindHints[kind] })
+                  ] })
+                ]
+              },
+              kind
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: () => workflow.run.kind === "steps" && setWorkflow({ ...workflow, run: { ...workflow.run, layout: autoLayout(steps) } }),
+            "data-testid": `${testId}-tidy`,
+            children: [
+              /* @__PURE__ */ jsx(LayoutGrid, { className: "size-4" }),
+              " ",
+              l.tidy
+            ]
+          }
+        )
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: actions })
+    ] }),
+    problems.length > 0 && /* @__PURE__ */ jsx("ul", { className: "space-y-1 text-sm text-destructive", "data-testid": `${testId}-problems`, children: problems.map((p, i) => /* @__PURE__ */ jsx("li", { children: l.problems[p.code].replace(
+      "{step}",
+      steps.find((s) => s.id === p.step)?.title ?? p.step
+    ) }, i)) }),
+    mode === "design" ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        WorkflowCanvas,
+        {
+          workflow,
+          onChange: setWorkflow,
+          selected,
+          onSelect: setSelected,
+          onAddAfter: addAfter,
+          trigger: { title: l.start, summary },
+          workflowTitle: (id) => titles.get(id),
+          renderIcon,
+          labels: canvasLabels,
+          reserveRight: panelOpen ? PANEL_WIDTH : 0,
+          testId: `${testId}-canvas`
+        }
+      ),
+      panelOpen ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "absolute bottom-3 right-3 top-3 z-10 w-80 max-w-[calc(100%-1.5rem)] overflow-y-auto rounded-xl border border-border bg-card/95 p-4 pt-10 shadow-lg backdrop-blur",
+          "data-testid": `${testId}-panel`,
+          children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "icon",
+                variant: "ghost",
+                className: "absolute right-2 top-2 size-7",
+                onClick: () => setPanelOpen(false),
+                "aria-label": l.closePanel,
+                "data-testid": `${testId}-panel-close`,
+                children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+              }
+            ),
+            selected === TRIGGER_NODE ? /* @__PURE__ */ jsx(
+              TriggerInspector,
+              {
+                trigger,
+                onChange: (next) => onChange({ ...value, trigger: next }),
+                agents,
+                eventKinds,
+                tasks,
+                labels: triggerLabels,
+                testId: `${testId}-trigger`
+              }
+            ) : /* @__PURE__ */ jsx(
+              StepInspector,
+              {
+                workflow,
+                stepId: selected,
+                onChange: setWorkflow,
+                onSelect: setSelected,
+                workflows,
+                labels: inspectorLabels,
+                testId: `${testId}-inspector`
+              }
+            )
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs(
+        Button,
+        {
+          size: "sm",
+          variant: "outline",
+          className: "absolute right-3 top-3 z-10 bg-card shadow-sm",
+          onClick: () => setPanelOpen(true),
+          "data-testid": `${testId}-panel-open`,
+          children: [
+            /* @__PURE__ */ jsx(Settings2, { className: "size-4" }),
+            " ",
+            l.settings
+          ]
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx(
+      WorkflowPreview,
+      {
+        workflow,
+        workflows,
+        compose,
+        answer: l.previewAnswer,
+        renderIcon,
+        testId: `${testId}-preview`
+      },
+      JSON.stringify(workflow)
+    )
+  ] });
+}
+function WorkflowPreview({
+  workflow,
+  workflows,
+  compose,
+  answer,
+  renderIcon,
+  testId
+}) {
+  const run = useWorkflowPreview(workflow, {
+    resolveWorkflow: (id) => workflows.find((w) => w.id === id),
+    compose,
+    answer
+  });
+  return /* @__PURE__ */ jsx(
+    WorkflowRunner,
+    {
+      workflow,
+      run,
+      renderIcon,
+      testIdPrefix: testId,
+      renderAgentOutput: (step, state) => state?.text ? /* @__PURE__ */ jsx(
+        "pre",
+        {
+          className: "whitespace-pre-wrap rounded-md bg-muted/40 p-3 text-xs text-muted-foreground",
+          "data-testid": `${testId}-${step.id}-answer`,
+          children: state.text
+        }
+      ) : null
+    }
+  );
+}
+
+// src/workflow-canvas/trigger.ts
+var DEFAULT_WORKFLOW_TRIGGER = {
+  start: "manual",
+  runAt: "",
+  rrule: "",
+  timezone: typeof Intl !== "undefined" ? Intl.DateTimeFormat().resolvedOptions().timeZone : "UTC",
+  eventKind: "",
+  afterTaskId: "",
+  agentId: "",
+  access: "ask_each_run"
+};
+function triggerProblem(trigger) {
+  if (trigger.start === "once" && !trigger.runAt) return "runAt";
+  if (trigger.start === "repeat" && !trigger.rrule.trim()) return "rrule";
+  if (trigger.start === "event" && !trigger.eventKind.trim()) return "event";
+  if (trigger.start === "task" && !trigger.afterTaskId) return "task";
+  return null;
+}
+function triggerFields(trigger, clearOthers) {
+  const none = clearOthers ? null : void 0;
+  return {
+    timezone: trigger.timezone,
+    rrule: trigger.start === "repeat" ? trigger.rrule.trim() : none,
+    run_at: trigger.start === "once" ? localInputToIso(trigger.runAt) : none,
+    event_kind: trigger.start === "event" ? trigger.eventKind.trim() : none,
+    after_conversation_ext_id: trigger.start === "task" ? trigger.afterTaskId : none,
+    on_demand: trigger.start === "manual"
+  };
+}
+var authMode = (trigger) => trigger.start === "manual" ? "run_now_temp" : trigger.access === "standing" ? "scheduled_permanent" : "scheduled_require_auth";
+var withoutUndefined = (o) => Object.fromEntries(Object.entries(o).filter(([, v]) => v !== void 0));
+function plan(value, options) {
+  return {
+    goal: value.workflow.description,
+    criteria: [],
+    max_passes: 3,
+    documents: [],
+    steps: toPlanSteps(value.workflow, options)
+  };
+}
+function builderToWorkflowRequest(value, workspaceId, options = {}) {
+  return withoutUndefined({
+    workspace_ext_id: workspaceId,
+    name: value.workflow.title,
+    description: value.workflow.description,
+    active: true,
+    shared: true,
+    ...triggerFields(value.trigger, false),
+    prompt: "",
+    skill_ref: null,
+    skill_inputs: null,
+    agent_ext_id: value.trigger.agentId || null,
+    auth_mode: authMode(value.trigger),
+    plan: plan(value, options)
+  });
+}
+function builderToWorkflowUpdate(value, options = {}) {
+  return withoutUndefined({
+    name: value.workflow.title,
+    description: value.workflow.description,
+    ...triggerFields(value.trigger, true),
+    // The steps are what runs (a classic automation's single prompt or skill becomes its one step).
+    prompt: "",
+    skill_ref: null,
+    skill_inputs: null,
+    agent_ext_id: value.trigger.agentId || null,
+    auth_mode: authMode(value.trigger),
+    plan: plan(value, options)
+  });
+}
+function workflowRecordToBuilder(record) {
+  const planned = record.plan?.steps ?? [];
+  const steps = planned.length ? fromPlanSteps(planned) : record.prompt || record.skill_ref ? [
+    {
+      id: "work",
+      kind: "agent",
+      title: record.name,
+      ...record.skill_ref ? { workflow: record.skill_ref } : { run: { kind: "prompt", promptTemplate: record.prompt } }
+    }
+  ] : [];
+  const when = workflowWhen(record);
+  return {
+    workflow: {
+      id: record.external_id,
+      title: record.name,
+      description: record.description ?? "",
+      inputs: [],
+      landing: "chat",
+      schedulable: false,
+      run: { kind: "steps", steps, layout: layoutFromPlanSteps(planned ?? []) }
+    },
+    trigger: {
+      ...DEFAULT_WORKFLOW_TRIGGER,
+      start: when === "now" ? "manual" : when,
+      runAt: isoToLocalInput(record.run_at),
+      rrule: record.rrule ?? "",
+      timezone: record.timezone || DEFAULT_WORKFLOW_TRIGGER.timezone,
+      eventKind: record.event_kind ?? "",
+      afterTaskId: record.after_conversation_ext_id ?? "",
+      agentId: record.agent_ext_id ?? "",
+      access: record.auth_mode === "scheduled_permanent" ? "standing" : "ask_each_run"
+    }
+  };
+}
+var DEFAULT_CONNECTED_WORKFLOW_BUILDER_LABELS = {
+  save: "Save",
+  saving: "Saving\u2026",
+  runNow: "Run now",
+  saved: "Saved.",
+  needTrigger: "Finish setting when it starts."
+};
+var DEFAULT_WORKFLOW_EVENT_KINDS = [
+  { value: "conversation_done", label: "A task is marked done" },
+  { value: "conversation_ready", label: "Work is ready for me" },
+  { value: "mention", label: "Someone mentions me" },
+  { value: "workflow_completed", label: "Another workflow finishes" },
+  { value: "workflow_failed", label: "Another workflow fails" }
+];
+function ConnectedWorkflowBuilder({
+  workflowId,
+  initial,
+  workflows: hostWorkflows = [],
+  eventKinds = DEFAULT_WORKFLOW_EVENT_KINDS,
+  compose,
+  onSaved,
+  onRun,
+  actions,
+  connectedLabels,
+  testId = "workflow-builder",
+  ...builderProps
+}) {
+  const l = { ...DEFAULT_CONNECTED_WORKFLOW_BUILDER_LABELS, ...connectedLabels };
+  const { workspaceId } = useConnection();
+  const saved = useWorkflows();
+  const skills = useSkills();
+  const agentsQuery = useAgents();
+  const conversations = useConversations(workspaceId ?? void 0);
+  const create = useCreateWorkflow();
+  const update = useUpdateWorkflow();
+  const run = useRunWorkflow();
+  const [id, setId] = useState(workflowId);
+  const [value, setValue] = useState(initial);
+  const [message, setMessage] = useState(null);
+  const record = saved.data?.find((w) => w.external_id === id);
+  const [loaded, setLoaded] = useState(void 0);
+  useEffect(() => {
+    if (record && loaded !== record.external_id) {
+      setValue(workflowRecordToBuilder(record));
+      setLoaded(record.external_id);
+    }
+  }, [record, loaded]);
+  const workflows = useMemo(
+    () => [
+      ...hostWorkflows,
+      ...(skills.data ?? []).map(
+        (s) => skillToWorkflow({
+          name: s.name,
+          slug: s.slug,
+          description: s.description,
+          arg_hint: s.arg_hint
+        })
+      )
+    ],
+    [hostWorkflows, skills.data]
+  );
+  const agents = (agentsQuery.data ?? []).map((a) => ({
+    id: a.external_id,
+    label: a.given_name || a.email
+  }));
+  const tasks = (conversations.data ?? []).filter((c) => c.status && c.status !== "done").map((c) => ({ value: c.external_id, label: c.title || c.external_id }));
+  const options = { resolveWorkflow: (wid) => workflows.find((w) => w.id === wid), compose };
+  const problem = triggerProblem(value.trigger) ?? (validateWorkflowGraph(workflowSteps(value.workflow)).length ? "graph" : null);
+  const busy = create.isPending || update.isPending || run.isPending;
+  const save = async () => {
+    if (!workspaceId) return void 0;
+    setMessage(null);
+    const result = id ? await update.mutateAsync({ workflowId: id, patch: builderToWorkflowUpdate(value, options) }) : await create.mutateAsync(builderToWorkflowRequest(value, workspaceId, options));
+    setId(result.external_id);
+    setLoaded(result.external_id);
+    setMessage(l.saved);
+    onSaved?.(result.external_id);
+    return result.external_id;
+  };
+  return /* @__PURE__ */ jsx(
+    WorkflowBuilder,
+    {
+      ...builderProps,
+      value,
+      onChange: setValue,
+      workflows,
+      agents,
+      eventKinds,
+      tasks,
+      compose,
+      testId,
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        actions,
+        message && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: message }),
+        problem && problem !== "graph" && /* @__PURE__ */ jsx("span", { className: "text-xs text-destructive", children: l.needTrigger }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            disabled: !!problem || busy || !workspaceId,
+            onClick: async () => {
+              const saved2 = await save();
+              if (!saved2) return;
+              const started = await run.mutateAsync(saved2);
+              onRun?.(started.conversation_ext_id ?? void 0);
+            },
+            "data-testid": `${testId}-run`,
+            children: [
+              /* @__PURE__ */ jsx(Play, { className: "size-4" }),
+              " ",
+              l.runNow
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            size: "sm",
+            disabled: !!problem || busy || !workspaceId,
+            onClick: () => void save(),
+            "data-testid": `${testId}-save`,
+            children: [
+              create.isPending || update.isPending ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(Save, { className: "size-4" }),
+              create.isPending || update.isPending ? l.saving : l.save
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+
+export { ConnectedWorkflowBuilder, DEFAULT_CONNECTED_WORKFLOW_BUILDER_LABELS, DEFAULT_STEP_INSPECTOR_LABELS, DEFAULT_TRIGGER_INSPECTOR_LABELS, DEFAULT_WORKFLOW_BUILDER_LABELS, DEFAULT_WORKFLOW_CANVAS_LABELS, DEFAULT_WORKFLOW_EVENT_KINDS, DEFAULT_WORKFLOW_TRIGGER, StepInspector, TRIGGER_NODE, TriggerInspector, WorkflowBuilder, WorkflowCanvas, addStep, autoLayout, builderToWorkflowRequest, builderToWorkflowUpdate, connectSteps, disconnectSteps, layoutWithDefaults, moveStep, newSteppedWorkflow, removeStep, stepIdFor, triggerProblem, triggerSummary, updateStep, workflowRecordToBuilder, wouldCycle };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map