@revenexx/studio-integrations 0.1.3 → 0.2.0

package/dist/runtime/components/Integrations/WorkflowContextMenu.vue

@@ -0,0 +1,138 @@
+<script setup>
+import { computed } from "vue";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuTrigger
+} from "@revenexx/studio";
+const props = defineProps({
+  kind: { type: String, required: true },
+  selectionCount: { type: Number, required: true },
+  totalNodes: { type: Number, required: true },
+  targetIsTrigger: { type: Boolean, required: false },
+  runBusy: { type: Boolean, required: false }
+});
+const emit = defineEmits(["action", "update:open"]);
+const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform ?? "");
+function formatShortcut(tokens) {
+  const parts = tokens.split("+");
+  const out = [];
+  for (const raw of parts) {
+    const t = raw.toLowerCase();
+    if (t === "mod") out.push(isMac ? "\u2318" : "Ctrl");
+    else if (t === "shift") out.push("\u21E7");
+    else if (t === "alt") out.push(isMac ? "\u2325" : "Alt");
+    else if (t === "enter") out.push("\u21B5");
+    else if (t === "backspace") out.push("\u232B");
+    else if (t === "delete") out.push("Del");
+    else if (t === "escape") out.push("Esc");
+    else if (t === "tab") out.push("Tab");
+    else if (t === "space") out.push("Space");
+    else if (t === "f2") out.push("F2");
+    else out.push(t.toUpperCase());
+  }
+  return isMac ? out.join("") : out.join("+");
+}
+const allSelected = computed(() => props.totalNodes > 0 && props.selectionCount >= props.totalNodes);
+const sections = computed(() => {
+  if (props.kind === "node") {
+    return [
+      [
+        { id: "open", label: "Open", shortcut: "enter" },
+        { id: "rename", label: "Rename", shortcut: "f2" }
+      ],
+      [
+        { id: "copy", label: "Copy", shortcut: "mod+c", disabled: props.targetIsTrigger },
+        { id: "duplicate", label: "Duplicate", shortcut: "mod+d", disabled: props.targetIsTrigger }
+      ],
+      [
+        { id: "run", label: "Run workflow", shortcut: "mod+enter", disabled: props.runBusy },
+        { id: "tidy-up", label: "Tidy up", shortcut: "shift+alt+t" }
+      ],
+      [
+        { id: "delete", label: "Delete", shortcut: "backspace", danger: true }
+      ]
+    ];
+  }
+  if (props.kind === "selection") {
+    const n = props.selectionCount;
+    return [
+      [
+        { id: "copy", label: `Copy ${n} nodes`, shortcut: "mod+c" },
+        { id: "duplicate", label: `Duplicate ${n} nodes`, shortcut: "mod+d" }
+      ],
+      [
+        { id: "group", label: `Group ${n} nodes`, shortcut: "mod+g" },
+        { id: "tidy-up", label: "Tidy up", shortcut: "shift+alt+t" },
+        { id: "select-all", label: "Select all", shortcut: "mod+a", disabled: allSelected.value },
+        { id: "clear-selection", label: "Clear selection", shortcut: "escape" }
+      ],
+      [
+        { id: "delete", label: `Delete ${n} nodes`, shortcut: "backspace", danger: true }
+      ]
+    ];
+  }
+  return [
+    [
+      { id: "add-node", label: "Add node\u2026", shortcut: "tab" },
+      { id: "add-sticky", label: "Add sticky", shortcut: "shift+s" },
+      { id: "paste", label: "Paste", shortcut: "mod+v" }
+    ],
+    [
+      { id: "tidy-up", label: "Tidy up", shortcut: "shift+alt+t" },
+      { id: "fit-view", label: "Fit view", shortcut: "1" }
+    ],
+    [
+      { id: "select-all", label: "Select all", shortcut: "mod+a", disabled: allSelected.value || props.totalNodes === 0 }
+    ]
+  ];
+});
+const headerLabel = computed(
+  () => props.kind === "selection" ? `${props.selectionCount} nodes selected` : null
+);
+function onSelect(item) {
+  if (item.disabled) return;
+  emit("action", item.id);
+}
+</script>
+
+<template>
+  <ContextMenu @update:open="(v) => emit('update:open', v)">
+    <!-- The canvas. as-child avoids an extra wrapper element so vue-flow's
+         100%-height layout is untouched. -->
+    <ContextMenuTrigger as-child>
+      <slot />
+    </ContextMenuTrigger>
+
+    <ContextMenuContent class="w-60 rounded-lg border border-black/[0.06] bg-white p-1 shadow-lg">
+      <template v-if="headerLabel">
+        <ContextMenuLabel class="px-2 py-1.5 text-sm font-medium text-muted-foreground">
+          {{ headerLabel }}
+        </ContextMenuLabel>
+        <ContextMenuSeparator class="my-1 h-px bg-black/[0.06]" />
+      </template>
+
+      <template v-for="(group, gi) in sections" :key="gi">
+        <ContextMenuSeparator v-if="gi > 0" class="my-1 h-px bg-black/[0.06]" />
+        <ContextMenuItem
+          v-for="item in group"
+          :key="item.id"
+          :disabled="item.disabled"
+          :variant="item.danger ? 'destructive' : 'default'"
+          class="rounded-md px-2 py-1.5 text-sm"
+          @select="onSelect(item)"
+        >
+          <span class="flex-1 truncate">{{ item.label }}</span>
+          <span v-if="item.hint" class="ml-2 text-sm text-muted-foreground">{{ item.hint }}</span>
+          <ContextMenuShortcut v-if="item.shortcut" class="ml-auto pl-4 text-sm tabular-nums">
+            {{ formatShortcut(item.shortcut) }}
+          </ContextMenuShortcut>
+        </ContextMenuItem>
+      </template>
+    </ContextMenuContent>
+  </ContextMenu>
+</template>

package/dist/runtime/components/Integrations/WorkflowContextMenu.vue.d.ts

@@ -0,0 +1,32 @@
+export type MenuKind = 'node' | 'selection' | 'canvas';
+export type MenuActionId = 'open' | 'rename' | 'copy' | 'duplicate' | 'paste' | 'run' | 'tidy-up' | 'fit-view' | 'add-node' | 'add-sticky' | 'group' | 'select-all' | 'clear-selection' | 'delete';
+type __VLS_Props = {
+    /** Which context was right-clicked. The editor sets this in the vue-flow hooks. */
+    kind: MenuKind;
+    /** Number of currently selected nodes (drives selection labels/guards). */
+    selectionCount: number;
+    /** Total nodes on the canvas (disables "Select all" when everything is selected). */
+    totalNodes: number;
+    /** True when the single targeted node is a trigger (duplicate disabled in v1). */
+    targetIsTrigger?: boolean;
+    /** Busy flag for the Run item. */
+    runBusy?: boolean;
+};
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    action: (id: MenuActionId) => any;
+    "update:open": (open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onAction?: ((id: MenuActionId) => any) | undefined;
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Integrations/WorkflowCreateDialog.d.vue.ts

@@ -0,0 +1,9 @@
+type __VLS_PublicProps = {
+    'open'?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Integrations/WorkflowCreateDialog.vue

@@ -0,0 +1,322 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { RefreshCircle as Loader2, MagicStick as Sparkles } from "#solar-icons";
+import * as Lucide from "lucide-vue-next";
+import {
+  Badge,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Textarea
+} from "@revenexx/studio";
+import { toast } from "vue-sonner";
+import { TRIGGER_TEMPLATES } from "../../data/integrationNodeCatalog";
+import TemplateFlowPreview from "./TemplateFlowPreview.vue";
+import WorkflowIconPicker from "./WorkflowIconPicker.vue";
+import WorkflowTagsInput from "./WorkflowTagsInput.vue";
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const router = useRouter();
+const { create, workflows } = useIntegrationsWorkflows();
+const { templates, loading: templatesLoading, error: templatesError, load: loadTemplates, ensureDetails, instantiate } = useIntegrationsTemplates();
+const mode = ref("blank");
+const modeTabs = [
+  { key: "blank", label: "Start blank" },
+  { key: "template", label: "Start from template" }
+];
+function loc(v) {
+  if (!v) return "";
+  return typeof v === "string" ? v : v.en ?? Object.values(v)[0] ?? "";
+}
+function iconFor(name2) {
+  if (!name2) return Lucide.Box;
+  return Lucide[name2] || Lucide.Box;
+}
+const name = ref("");
+const description = ref("");
+const triggerType = ref("manual");
+const executionMode = ref("async_only");
+const tags = ref([]);
+const icon = ref(null);
+const tagSuggestions = computed(() => {
+  const all = /* @__PURE__ */ new Set();
+  for (const wf of workflows.value) for (const t of wf.blob.tags ?? []) all.add(t);
+  return [...all].sort();
+});
+const submitting = ref(false);
+const error = ref(null);
+const executionModes = [
+  { key: "async_only", label: "Async only", hint: "Always queued.", icon: "Inbox" },
+  { key: "sync_only", label: "Sync only", hint: "Waits for the result.", icon: "Timer" },
+  { key: "caller_decides", label: "Caller decides", hint: "The request chooses.", icon: "SlidersHorizontal" }
+];
+const selectedTrigger = computed(() => TRIGGER_TEMPLATES.find((t) => t.type === triggerType.value) ?? null);
+const selectedMode = computed(() => executionModes.find((m) => m.key === executionMode.value) ?? executionModes[0]);
+watch(open, (v) => {
+  if (!v) return;
+  mode.value = "blank";
+  name.value = "";
+  description.value = "";
+  triggerType.value = "manual";
+  executionMode.value = "async_only";
+  tags.value = [];
+  icon.value = null;
+  error.value = null;
+  templateSearch.value = "";
+  void loadTemplates();
+});
+async function submit() {
+  if (!name.value.trim()) {
+    error.value = "Name is required.";
+    return;
+  }
+  submitting.value = true;
+  error.value = null;
+  try {
+    const tpl = TRIGGER_TEMPLATES.find((t) => t.type === triggerType.value);
+    const handle = globalThis.crypto?.randomUUID?.() ?? `trg-${Date.now()}`;
+    const blob = {
+      nodeManifestVersion: "v0-draft",
+      name: name.value.trim(),
+      description: description.value.trim() || void 0,
+      triggers: [{ id: handle, type: triggerType.value, active: true, config: { ...tpl?.defaultConfig ?? {} } }],
+      nodes: [],
+      edges: [],
+      ...tags.value.length ? { tags: [...tags.value] } : {},
+      ...icon.value ? { icon: icon.value } : {}
+    };
+    const created = await create({
+      name: name.value.trim(),
+      description: description.value.trim() || null,
+      blob,
+      active: false,
+      executionMode: executionMode.value
+    });
+    open.value = false;
+    await router.push(`/integrations/workflows/${created.id}`);
+  } catch (e) {
+    error.value = e.message || "Could not create the workflow.";
+  } finally {
+    submitting.value = false;
+  }
+}
+const instantiatingSlug = ref(null);
+const templateSearch = ref("");
+watch(() => templates.value.length, (n) => {
+  if (n) void ensureDetails(templates.value.map((t) => t.slug));
+}, { immediate: true });
+const filteredTemplates = computed(() => {
+  const q = templateSearch.value.trim().toLowerCase();
+  if (!q) return templates.value;
+  return templates.value.filter((t) => `${t.name} ${t.description} ${t.category}`.toLowerCase().includes(q));
+});
+async function useTemplate(slug) {
+  if (instantiatingSlug.value) return;
+  instantiatingSlug.value = slug;
+  try {
+    const id = await instantiate(slug);
+    if (id == null) throw new Error("The template could not be instantiated.");
+    open.value = false;
+    await router.push(`/integrations/workflows/${id}`);
+  } catch (e) {
+    toast.error(e?.message ?? "Could not create the workflow from this template.");
+  } finally {
+    instantiatingSlug.value = null;
+  }
+}
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogContent class="sm:max-w-4xl">
+      <DialogHeader>
+        <DialogTitle>New workflow</DialogTitle>
+      </DialogHeader>
+
+      <!-- Switcher: the same TabBar the studio surfaces use. -->
+      <TabBar v-model="mode" :tabs="modeTabs" class="-mt-1 shrink-0" />
+
+      <!-- ── Blank ─────────────────────────────────────────────────────────── -->
+      <!-- -m-1/p-1 keeps the selection rings clear of the scroll clipping. -->
+      <form v-if="mode === 'blank'" class="-m-1 max-h-[65vh] space-y-3 overflow-y-auto p-1" @submit.prevent="submit">
+        <!-- Two-column rows: label rail left, field right. -->
+        <div class="grid grid-cols-[130px_1fr] items-center gap-x-4">
+          <Label for="wf-name">Name</Label>
+          <Input id="wf-name" v-model="name" placeholder="Sync orders nightly" class="bg-white" />
+        </div>
+
+        <div class="grid grid-cols-[130px_1fr] items-start gap-x-4">
+          <Label for="wf-desc" class="pt-2.5">Description</Label>
+          <Textarea
+            id="wf-desc"
+            v-model="description"
+            rows="2"
+            placeholder="Optional: what this workflow does and why it exists."
+            class="bg-white"
+          />
+        </div>
+
+        <div class="grid grid-cols-[130px_1fr] items-center gap-x-4">
+          <Label>Tags</Label>
+          <WorkflowTagsInput v-model="tags" :suggestions="tagSuggestions" />
+        </div>
+
+        <div class="grid grid-cols-[130px_1fr] items-center gap-x-4">
+          <Label>Icon</Label>
+          <WorkflowIconPicker v-model="icon" />
+        </div>
+
+        <div class="grid grid-cols-[130px_1fr] items-center gap-x-4">
+          <Label>Trigger</Label>
+          <Select v-model="triggerType">
+            <SelectTrigger class="w-full bg-white">
+              <SelectValue>
+                <span class="flex min-w-0 items-center gap-2">
+                  <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600">
+                    <component :is="iconFor(selectedTrigger?.icon)" :size="13" />
+                  </span>
+                  <span class="shrink-0 text-sm font-medium">{{ loc(selectedTrigger?.name) }}</span>
+                  <span class="truncate text-sm text-muted-foreground">{{ loc(selectedTrigger?.description) }}</span>
+                </span>
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem v-for="t in TRIGGER_TEMPLATES" :key="t.id" :value="t.type">
+                <span class="flex items-center gap-2.5 py-0.5">
+                  <span class="flex size-7 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600">
+                    <component :is="iconFor(t.icon)" :size="14" />
+                  </span>
+                  <span class="min-w-0">
+                    <span class="block text-sm font-medium">{{ loc(t.name) }}</span>
+                    <span class="block text-sm text-muted-foreground">{{ loc(t.description) }}</span>
+                  </span>
+                </span>
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div class="grid grid-cols-[130px_1fr] items-center gap-x-4">
+          <Label>Execution mode</Label>
+          <Select v-model="executionMode">
+            <SelectTrigger class="w-full bg-white">
+              <SelectValue>
+                <span class="flex min-w-0 items-center gap-2">
+                  <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-500">
+                    <component :is="iconFor(selectedMode.icon)" :size="13" />
+                  </span>
+                  <span class="shrink-0 text-sm font-medium">{{ selectedMode.label }}</span>
+                  <span class="truncate text-sm text-muted-foreground">{{ selectedMode.hint }}</span>
+                </span>
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem v-for="opt in executionModes" :key="opt.key" :value="opt.key">
+                <span class="flex items-center gap-2.5 py-0.5">
+                  <span class="flex size-7 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-500">
+                    <component :is="iconFor(opt.icon)" :size="14" />
+                  </span>
+                  <span class="min-w-0">
+                    <span class="block text-sm font-medium">{{ opt.label }}</span>
+                    <span class="block text-sm text-muted-foreground">{{ opt.hint }}</span>
+                  </span>
+                </span>
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div v-if="error" class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700">
+          {{ error }}
+        </div>
+
+        <div class="flex gap-2 pt-1">
+          <Button type="submit" :disabled="submitting" class="h-8 text-sm">
+            <Loader2 v-if="submitting" :size="14" class="animate-spin" />
+            {{ submitting ? "Creating\u2026" : "Create and open editor" }}
+          </Button>
+          <Button type="button" variant="outline" class="h-8 text-sm" @click="open = false">
+            Cancel
+          </Button>
+        </div>
+      </form>
+
+      <!-- ── From template ─────────────────────────────────────────────────── -->
+      <div v-else class="-m-1 max-h-[65vh] space-y-3 overflow-y-auto p-1">
+        <div class="relative">
+          <Lucide.Search :size="12" class="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
+          <input
+            v-model="templateSearch"
+            type="text"
+            placeholder="Search templates…"
+            class="h-8 w-full rounded-md border border-black/[0.08] bg-white pl-7 pr-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/40"
+          >
+        </div>
+
+        <div v-if="templatesLoading && !templates.length" class="grid gap-2 p-1 sm:grid-cols-2">
+          <div v-for="n in 6" :key="`sk-tpl-${n}`" class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2">
+            <div class="flex items-center gap-2">
+              <div class="size-7 rounded-md bg-black/[0.07] animate-pulse" />
+              <div class="h-3 w-1/2 rounded bg-black/[0.07] animate-pulse" />
+            </div>
+            <div class="h-3 w-full rounded bg-black/[0.05] animate-pulse" />
+            <div class="h-3 w-2/3 rounded bg-black/[0.05] animate-pulse" />
+          </div>
+        </div>
+        <div v-else-if="templatesError" class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700">
+          {{ templatesError }}
+        </div>
+        <p v-else-if="!templates.length" class="p-6 text-center text-sm text-muted-foreground">
+          No templates in the catalogue yet.
+        </p>
+        <p v-else-if="!filteredTemplates.length" class="p-6 text-center text-sm text-muted-foreground">
+          Nothing matches “{{ templateSearch }}”.
+        </p>
+
+        <div v-else class="grid gap-2.5 sm:grid-cols-2 lg:grid-cols-3">
+          <button
+            v-for="tpl in filteredTemplates"
+            :key="tpl.slug"
+            type="button"
+            class="flex flex-col overflow-hidden rounded-lg border border-black/[0.06] bg-white text-left transition hover:border-black/20 hover:shadow-sm disabled:opacity-60"
+            :disabled="!!instantiatingSlug"
+            @click="useTemplate(tpl.slug)"
+          >
+            <div class="relative h-24 shrink-0 border-b border-black/[0.06] bg-slate-50/70 [background-image:radial-gradient(circle,rgba(15,23,42,0.07)_1px,transparent_1px)] [background-size:12px_12px]">
+              <TemplateFlowPreview v-if="tpl.detailLoaded" :blob="tpl.blob" :height="96" class="px-1" />
+              <div v-else class="flex h-full items-center justify-center">
+                <Loader2 :size="14" class="animate-spin text-muted-foreground/40" />
+              </div>
+              <span class="absolute left-1.5 top-1.5 inline-flex items-center rounded-full bg-slate-100 px-1.5 py-px uppercase text-[11px] font-medium text-slate-700">
+                {{ tpl.category.charAt(0).toUpperCase() + tpl.category.slice(1) }}
+              </span>
+              <Loader2 v-if="instantiatingSlug === tpl.slug" :size="13" class="absolute right-1.5 top-1.5 animate-spin text-muted-foreground" />
+            </div>
+            <div class="flex min-h-0 flex-1 flex-col p-3">
+              <div class="truncate text-sm font-medium">{{ tpl.name }}</div>
+              <p class="mt-0.5 line-clamp-2 text-sm text-muted-foreground">{{ tpl.description }}</p>
+            </div>
+          </button>
+        </div>
+
+        <div class="flex items-center justify-between pt-1">
+          <NuxtLink to="/integrations/templates" class="inline-flex items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-primary" @click="open = false">
+            <Sparkles :size="13" />
+            Browse the full template catalogue
+          </NuxtLink>
+          <Button type="button" variant="outline" class="h-8 text-sm" @click="open = false">
+            Cancel
+          </Button>
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>

package/dist/runtime/components/Integrations/WorkflowCreateDialog.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_PublicProps = {
+    'open'?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Integrations/WorkflowDuplicateDialog.d.vue.ts

@@ -0,0 +1,18 @@
+import type { Workflow } from '../../types/integrations.js';
+type __VLS_Props = {
+    workflow: {
+        id: number;
+        name: string;
+    } | null;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    'open'?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    duplicated: (copy: Workflow) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onDuplicated?: ((copy: Workflow) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Integrations/WorkflowDuplicateDialog.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { RefreshCircle as Loader2 } from "#solar-icons";
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input } from "@revenexx/studio";
+import { useIntegrationsWorkflows } from "../../composables/useIntegrationsWorkflows";
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const props = defineProps({
+  workflow: { type: [Object, null], required: true }
+});
+const emit = defineEmits(["duplicated"]);
+const { duplicate } = useIntegrationsWorkflows();
+const name = ref("");
+const busy = ref(false);
+const error = ref(null);
+watch(open, (o) => {
+  if (o) {
+    name.value = props.workflow ? `${props.workflow.name} (Copy)` : "";
+    error.value = null;
+  }
+});
+const canSubmit = computed(() => !!props.workflow && name.value.trim().length > 0 && !busy.value);
+async function submit() {
+  if (!props.workflow || !canSubmit.value) return;
+  busy.value = true;
+  error.value = null;
+  try {
+    const copy = await duplicate(props.workflow.id, name.value);
+    open.value = false;
+    emit("duplicated", copy);
+  } catch (e) {
+    error.value = e?.message || "Could not duplicate the workflow.";
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogContent class="sm:max-w-md">
+      <DialogHeader>
+        <DialogTitle>Duplicate workflow</DialogTitle>
+        <DialogDescription class="text-sm">
+          Creates a paused copy of “{{ props.workflow?.name }}” with all triggers off.
+        </DialogDescription>
+      </DialogHeader>
+
+      <form class="space-y-2" @submit.prevent="submit">
+        <label class="text-sm font-medium" for="wf-duplicate-name">Name</label>
+        <Input id="wf-duplicate-name" v-model="name" autofocus :disabled="busy" />
+        <p v-if="error" class="text-sm text-rose-600">{{ error }}</p>
+      </form>
+
+      <DialogFooter>
+        <Button variant="outline" size="sm" class="h-8 text-sm" :disabled="busy" @click="open = false">Cancel</Button>
+        <Button size="sm" class="h-8 text-sm" :disabled="!canSubmit" @click="submit">
+          <Loader2 v-if="busy" :size="14" class="animate-spin" />
+          Duplicate
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

package/dist/runtime/components/Integrations/WorkflowDuplicateDialog.vue.d.ts

@@ -0,0 +1,18 @@
+import type { Workflow } from '../../types/integrations.js';
+type __VLS_Props = {
+    workflow: {
+        id: number;
+        name: string;
+    } | null;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    'open'?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    duplicated: (copy: Workflow) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onDuplicated?: ((copy: Workflow) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Integrations/WorkflowEdgeView.d.vue.ts

@@ -2,12 +2,14 @@ import { type EdgeProps } from '@vue-flow/core';
 /**
  * Enterprise-style smoothstep edge:
  *
- *  - rounded right-angle routing (`getSmoothStepPath`)
+ *  - hard right-angle routing (`getSmoothStepPath`, radius 0)
  *  - arrow-head pointing into the target
  *  - color encodes the *source port kind* — branch outputs (`true`/`false`,
  *    switch cases) get a soft color, error outputs get rose, defaults stay
  *    slate
  *  - optional center label (used by the canvas to print branch names)
+ *  - n8n-style midpoint tools on hover/selection: [+] splices a node into
+ *    the connection (editor-provided action), [trash] deletes the edge
  *
  * The canvas creates these via `edgeTypes.flow = WorkflowEdgeView`. Edge
  * data is passed through Vue Flow's `data` prop verbatim.
@@ -17,6 +19,15 @@ interface Data {
     kind: EdgeKind;
     /** Optional human label shown mid-edge (e.g. "true", "cases:paid"). */
     label?: string;
+    /**
+     * Run-replay overlay (WorkflowRunReplayPanel): the edge is on the path the
+     * run actually took — drawn blue and thicker. `ahead` marks the part of the
+     * route the cursor hasn't reached yet (the panel sets `animated` on the edge
+     * so the default theme dashes it).
+     */
+    replay?: {
+        ahead: boolean;
+    };
 }
 type __VLS_Props = EdgeProps<Data>;
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;