@revenexx/studio-integrations 0.1.4 → 0.2.0

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

@@ -0,0 +1,265 @@
+<script setup>
+import { computed, reactive, ref, watch } from "vue";
+import { AddCircle as Plus, Copy, TrashBinMinimalistic as Trash2 } from "#solar-icons";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  Switch,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@revenexx/studio";
+import { toast } from "vue-sonner";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  variables: { type: Object, required: true }
+});
+const emit = defineEmits(["update:open", "update:variables"]);
+const KEY_PATTERN = /^[a-z_][a-z0-9_]*$/i;
+const TYPES = ["string", "number", "boolean", "object", "array"];
+const jsonDrafts = reactive({});
+const jsonErrors = reactive({});
+watch(() => props.open, (o) => {
+  if (!o) return;
+  for (const k of Object.keys(jsonDrafts)) delete jsonDrafts[k];
+  for (const k of Object.keys(jsonErrors)) delete jsonErrors[k];
+  for (const [key, v] of Object.entries(props.variables)) {
+    if (v.type === "object" || v.type === "array") {
+      jsonDrafts[key] = v.default === void 0 ? "" : JSON.stringify(v.default, null, 2);
+      jsonErrors[key] = null;
+    }
+  }
+});
+const entries = computed(() => Object.entries(props.variables));
+function commit(next) {
+  emit("update:variables", next);
+}
+function patchVar(key, patch) {
+  const cur = props.variables[key];
+  if (!cur) return;
+  commit({ ...props.variables, [key]: { ...cur, ...patch } });
+}
+function removeVar(key) {
+  const next = { ...props.variables };
+  delete next[key];
+  delete jsonDrafts[key];
+  delete jsonErrors[key];
+  commit(next);
+}
+function changeType(key, type) {
+  const blank = {
+    string: "",
+    number: 0,
+    boolean: false,
+    object: void 0,
+    array: void 0
+  };
+  patchVar(key, { type, default: blank[type] });
+  if (type === "object" || type === "array") {
+    jsonDrafts[key] = "";
+    jsonErrors[key] = null;
+  }
+}
+function applyJsonDraft(key, type) {
+  const raw = (jsonDrafts[key] ?? "").trim();
+  if (!raw) {
+    jsonErrors[key] = null;
+    patchVar(key, { default: void 0 });
+    return;
+  }
+  try {
+    const parsed = JSON.parse(raw);
+    const ok = type === "array" ? Array.isArray(parsed) : parsed !== null && typeof parsed === "object" && !Array.isArray(parsed);
+    if (!ok) {
+      jsonErrors[key] = type === "array" ? "Must be a JSON array." : "Must be a JSON object.";
+      return;
+    }
+    jsonErrors[key] = null;
+    patchVar(key, { default: parsed });
+  } catch {
+    jsonErrors[key] = "Not valid JSON.";
+  }
+}
+function descriptionText(v) {
+  const d = v.description;
+  if (!d) return "";
+  return typeof d === "string" ? d : d.en ?? Object.values(d)[0] ?? "";
+}
+function writeDescription(key, text) {
+  const cur = props.variables[key];
+  if (!cur) return;
+  if (!text.trim()) {
+    const { description: _drop, ...rest } = cur;
+    commit({ ...props.variables, [key]: rest });
+    return;
+  }
+  const existing = typeof cur.description === "object" && cur.description !== null ? cur.description : {};
+  patchVar(key, { description: { ...existing, en: text } });
+}
+const newKey = ref("");
+const newKeyError = computed(() => {
+  const k = newKey.value.trim();
+  if (!k) return null;
+  if (!KEY_PATTERN.test(k)) return "Letters, digits and _ only; must not start with a digit.";
+  if (props.variables[k]) return "Key already exists.";
+  return null;
+});
+function addVariable() {
+  const k = newKey.value.trim();
+  if (!k || newKeyError.value) return;
+  commit({ ...props.variables, [k]: { type: "string", default: "" } });
+  newKey.value = "";
+}
+async function copyUsage(key) {
+  try {
+    await navigator.clipboard.writeText(`\${{ vars.${key} }}`);
+    toast.success("Expression copied");
+  } catch {
+    toast.error("Could not copy");
+  }
+}
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="(v2) => emit('update:open', v2)">
+    <DialogContent class="max-w-[94vw] sm:max-w-3xl">
+      <DialogHeader>
+        <DialogTitle>Workflow variables</DialogTitle>
+        <DialogDescription class="text-sm">
+          Reusable values for this workflow — reference them in any config field as
+          <code v-pre class="rounded bg-black/[0.05] px-1 py-0.5 font-mono text-xs">${{ vars.key }}</code>.
+          Changes persist with the workflow Save.
+        </DialogDescription>
+      </DialogHeader>
+
+      <div class="max-h-[62vh] space-y-3 overflow-y-auto pr-1">
+        <p v-if="!entries.length" class="rounded-lg border border-dashed border-black/[0.12] px-4 py-6 text-center text-sm text-muted-foreground">
+          No variables yet — add the first one below.
+        </p>
+
+        <div
+          v-for="[key, v] in entries"
+          :key="key"
+          class="rounded-lg border border-black/[0.06] bg-white p-3"
+        >
+          <div class="flex items-center gap-2">
+            <code class="min-w-0 truncate font-mono text-sm font-semibold">{{ key }}</code>
+            <button
+              type="button"
+              class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
+              :title="`Copy \${{ vars.${key} }}`"
+              @click="copyUsage(key)"
+            >
+              <Copy :size="12" />
+            </button>
+            <div class="flex-1" />
+            <label class="flex items-center gap-1.5 text-sm text-muted-foreground">
+              Required
+              <Switch
+                :model-value="v.required === true"
+                @update:model-value="(val) => patchVar(key, { required: val || void 0 })"
+              />
+            </label>
+            <button
+              type="button"
+              class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-rose-50 hover:text-rose-600"
+              title="Delete variable"
+              @click="removeVar(key)"
+            >
+              <Trash2 :size="13" />
+            </button>
+          </div>
+
+          <div class="mt-2 grid gap-2 sm:grid-cols-[8rem_1fr]">
+            <div class="space-y-1">
+              <Label class="text-mono text-muted-foreground">Type</Label>
+              <Select :model-value="v.type" @update:model-value="(t) => changeType(key, t)">
+                <SelectTrigger class="h-8 bg-white text-sm">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem v-for="t in TYPES" :key="t" :value="t">{{ t }}</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div class="space-y-1">
+              <Label class="text-mono text-muted-foreground">
+                Default{{ v.required ? " (ignored while required)" : "" }}
+              </Label>
+
+              <Input
+                v-if="v.type === 'string'"
+                :model-value="typeof v.default === 'string' ? v.default : ''"
+                class="h-8 bg-white text-sm"
+                @update:model-value="(val) => patchVar(key, { default: String(val) })"
+              />
+              <Input
+                v-else-if="v.type === 'number'"
+                type="number"
+                :model-value="typeof v.default === 'number' ? v.default : ''"
+                class="h-8 bg-white text-sm"
+                @update:model-value="(val) => patchVar(key, { default: val === '' ? void 0 : Number(val) })"
+              />
+              <div v-else-if="v.type === 'boolean'" class="flex h-8 items-center">
+                <Switch
+                  :model-value="v.default === true"
+                  @update:model-value="(val) => patchVar(key, { default: val })"
+                />
+              </div>
+              <div v-else>
+                <textarea
+                  :value="jsonDrafts[key] ?? ''"
+                  rows="3"
+                  spellcheck="false"
+                  class="w-full rounded-md border bg-white p-2 font-mono text-xs focus:outline-none focus:ring-2 focus:ring-primary/40"
+                  :class="jsonErrors[key] ? 'border-rose-400' : 'border-black/[0.08]'"
+                  :placeholder="v.type === 'array' ? 'JSON array, e.g. [1, 2]' : 'JSON object, e.g. { \u2026 }'"
+                  @input="(e) => jsonDrafts[key] = e.target.value"
+                  @blur="applyJsonDraft(key, v.type)"
+                />
+                <p v-if="jsonErrors[key]" class="text-xs text-rose-600">{{ jsonErrors[key] }}</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="mt-2 space-y-1">
+            <Label class="text-mono text-muted-foreground">Description</Label>
+            <Input
+              :model-value="descriptionText(v)"
+              class="h-8 bg-white text-sm"
+              placeholder="What this variable is for"
+              @update:model-value="(val) => writeDescription(key, String(val))"
+            />
+          </div>
+        </div>
+
+        <!-- Add row -->
+        <div class="rounded-lg border border-dashed border-black/[0.12] p-3">
+          <Label class="text-mono text-muted-foreground">New variable</Label>
+          <div class="mt-1 flex items-center gap-2">
+            <Input
+              v-model="newKey"
+              class="h-8 flex-1 bg-white font-mono text-sm"
+              placeholder="e.g. base_url"
+              @keydown.enter.prevent="addVariable"
+            />
+            <Button size="sm" class="h-8" :disabled="!newKey.trim() || !!newKeyError" @click="addVariable">
+              <Plus :size="14" class="mr-1" />
+              Add
+            </Button>
+          </div>
+          <p v-if="newKeyError" class="mt-1 text-xs text-rose-600">{{ newKeyError }}</p>
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>

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

@@ -0,0 +1,13 @@
+import type { WorkflowVariable } from '../../types/integrations.js';
+type __VLS_Props = {
+    open: boolean;
+    variables: Record<string, WorkflowVariable>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (args_0: boolean) => any;
+    "update:variables": (next: Record<string, WorkflowVariable>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    "onUpdate:variables"?: ((next: Record<string, WorkflowVariable>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,6 +1,9 @@
 import type { Workflow as WorkflowResource } from '../../types/integrations.js';
 type __VLS_Props = {
     workflows: WorkflowResource[];
+    loading?: boolean;
 };
-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>;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    loading: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,5 +1,9 @@
 <script setup>
-import { ClockCircle as Clock, Globus as Globe, RefreshCircle as Loader2, MenuDots as MoreHorizontal, Pause, Play, TrashBinMinimalistic as Trash2, LinkRound as Webhook, Programming as Workflow, Bolt } from "#solar-icons";
+import { RefreshCircle as Loader2, MenuDots as MoreHorizontal } from "#solar-icons";
+import { toast } from "vue-sonner";
+import WorkflowDuplicateDialog from "./WorkflowDuplicateDialog.vue";
+import WorkflowIconView from "./WorkflowIconView.vue";
+import { Layers } from "#solar-icons";
 import {
   AlertDialog,
   AlertDialogContent,
@@ -17,10 +21,33 @@ import {
   DropdownMenuTrigger
 } from "@revenexx/studio";
 defineProps({
-  workflows: { type: Array, required: true }
+  workflows: { type: Array, required: true },
+  loading: { type: Boolean, required: false, default: false }
 });
 const router = useRouter();
 const { remove, toggleActive } = useIntegrationsWorkflows();
+const duplicateTarget = ref(null);
+const duplicateOpen = ref(false);
+function askDuplicate(wf) {
+  duplicateTarget.value = { id: wf.id, name: wf.name };
+  duplicateOpen.value = true;
+}
+async function onDuplicated(copy) {
+  toast.success(`Duplicated as \u201C${copy.name}\u201D`);
+  await router.push(`/integrations/workflows/${copy.id}`);
+}
+const GROUP_BY_TAGS_KEY = "integrations.workflows.groupByTags";
+const groupByTags = ref(false);
+try {
+  groupByTags.value = localStorage.getItem(GROUP_BY_TAGS_KEY) === "1";
+} catch {
+}
+watch(groupByTags, (on) => {
+  try {
+    localStorage.setItem(GROUP_BY_TAGS_KEY, on ? "1" : "0");
+  } catch {
+  }
+});
 const { runs, load: loadRuns, list: listRuns } = useIntegrationsRuns();
 onMounted(() => {
   void loadRuns();
@@ -59,14 +86,37 @@ async function confirmDelete() {
     deleting.value = false;
   }
 }
-function triggerIcon(type) {
-  return type === "schedule" ? Clock : type === "webhook" ? Webhook : type === "event" ? Bolt : Play;
-}
 function statusBadge(wf) {
   if (!wf.active) return { label: "Paused", class: "bg-slate-100 text-slate-700 border-slate-200" };
   if (wf.revision === 0) return { label: "Draft", class: "bg-amber-500/10 text-amber-700 border-amber-500/20" };
   return { label: "Active", class: "bg-emerald-500/10 text-emerald-700 border-emerald-500/20" };
 }
+function buildState(wf) {
+  switch (wf.buildStatus) {
+    case "building":
+      return { label: "Building\u2026", class: "bg-sky-500/15 text-sky-700 border-sky-500/20" };
+    case "pending":
+      return { label: "Pending", class: "bg-amber-500/10 text-amber-700 border-amber-500/20" };
+    case "failed":
+      return { label: "Failed", class: "bg-rose-500/15 text-rose-700 border-rose-500/20" };
+    case "ready":
+      return { label: "Ready", class: "bg-emerald-500/10 text-emerald-700 border-emerald-500/20" };
+    default:
+      return { label: "\u2014", class: "bg-slate-100 text-slate-700 border-slate-200" };
+  }
+}
+function modeLabel(m) {
+  switch (m) {
+    case "sync_only":
+      return "sync";
+    case "caller_decides":
+      return "caller";
+    case "async_only":
+      return "async";
+    default:
+      return "\u2014";
+  }
+}
 function formatDateTime(iso) {
   if (!iso) return "\u2014";
   try {
@@ -86,7 +136,7 @@ const columns = [
     label: "Name",
     sortable: true,
     sortGetter: (w) => w.name.toLowerCase(),
-    searchGetter: (w) => `${w.name} ${w.description ?? ""}`
+    searchGetter: (w) => `${w.name} ${w.description ?? ""} ${(w.blob.tags ?? []).join(" ")}`
   },
   {
     key: "status",
@@ -96,30 +146,32 @@ const columns = [
     sortGetter: (w) => w.active ? w.revision === 0 ? "draft" : "active" : "paused"
   },
   {
-    key: "triggers",
-    label: "Triggers",
-    width: "140px",
+    key: "build",
+    label: "Build",
+    width: "120px",
     sortable: true,
-    sortGetter: (w) => w.blob.triggers.map((t) => t.type).join(",")
+    sortGetter: (w) => w.buildStatus ?? ""
   },
   {
-    key: "nodes",
-    label: "Nodes",
-    width: "100px",
+    key: "mode",
+    label: "Mode",
+    width: "120px",
     sortable: true,
-    sortGetter: (w) => w.blob.nodes.length
+    sortGetter: (w) => w.execution_mode ?? ""
   },
   {
-    key: "revision",
-    label: "Revision",
-    width: "100px",
+    key: "triggers",
+    label: "Triggers",
+    width: "140px",
     sortable: true,
-    sortGetter: (w) => w.revision
+    sortGetter: (w) => w.blob.triggers.map((t) => t.type).join(",")
   },
   {
     key: "lastRun",
     label: "Last run",
-    width: "150px",
+    // Wide enough for badge + full timestamp — the flexible Name column has
+    // the slack to give; a truncated "18. Juli, 1…" helps nobody.
+    width: "210px",
     sortable: true,
     sortGetter: (w) => lastRunFor(w.id)?.startedAt ?? ""
   },
@@ -142,59 +194,86 @@ const columns = [
 <template>
   <DataTable
     :data="workflows"
+    :group-by="groupByTags ? (w) => w.blob.tags ?? [] : null"
+    group-empty-label="No tags"
     :columns="columns"
     :row-key="(wf2) => wf2.id"
     :default-sort="{ column: 'updated', direction: 'desc' }"
     :search="{ placeholder: 'Search workflows\u2026' }"
     :filter="true"
+    :loading="loading"
     empty-text="No workflows yet."
     @row-click="(wf2) => router.push(`/integrations/workflows/${wf2.id}`)"
   >
+    <template #toolbar-left>
+      <Button
+        variant="outline"
+        size="sm"
+        class="h-7 gap-1.5 text-sm"
+        :class="groupByTags ? 'border-primary/30 text-primary' : ''"
+        @click="groupByTags = !groupByTags"
+      >
+        <Layers :size="13" />
+        Group by tags
+      </Button>
+    </template>
+
     <!-- Name (icon + title + description) -->
     <template #cell-name="{ row: wf }">
       <div class="flex items-center gap-2 min-w-0">
-        <div class="flex size-7 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-500">
-          <Workflow :size="14" />
+        <div class="flex size-8 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-500">
+          <WorkflowIconView :icon="wf.blob.icon" :size="18" />
         </div>
         <div class="flex flex-col min-w-0">
           <span class="font-medium text-sm truncate">{{ wf.name }}</span>
           <span v-if="wf.description" class="text-sm text-muted-foreground truncate">{{ wf.description }}</span>
+          <div v-if="wf.blob.tags?.length" class="mt-0.5 flex flex-wrap gap-1">
+            <span
+              v-for="t in wf.blob.tags"
+              :key="t"
+              class="rounded border border-black/[0.06] bg-muted/50 px-1 text-[10px] leading-4 text-muted-foreground"
+            >{{ t }}</span>
+          </div>
         </div>
       </div>
     </template>
 
     <template #cell-status="{ row: wf }">
-      <Badge variant="outline" :class="['text-sm border', statusBadge(wf).class]">
+      <Badge variant="outline" :class="['border text-xs font-medium uppercase', statusBadge(wf).class]">
         {{ statusBadge(wf).label }}
       </Badge>
     </template>
 
+    <template #cell-build="{ row: wf }">
+      <Badge variant="outline" :class="['border text-xs font-medium uppercase', buildState(wf).class]">
+        {{ buildState(wf).label }}
+      </Badge>
+    </template>
+
+    <template #cell-mode="{ row: wf }">
+      <Badge v-if="wf.execution_mode" variant="outline" class="border text-xs font-medium uppercase text-muted-foreground">
+        {{ modeLabel(wf.execution_mode) }}
+      </Badge>
+      <span v-else class="text-sm text-muted-foreground">—</span>
+    </template>
+
+    <!-- Small badges, stacked vertically — several triggers must never
+         overflow the column into their neighbors. -->
     <template #cell-triggers="{ row: wf }">
-      <div class="flex items-center gap-1 text-sm text-muted-foreground">
+      <div class="flex min-w-0 flex-col items-start gap-1">
         <span
           v-for="t in wf.blob.triggers"
           :key="t.id"
-          class="inline-flex items-center gap-1 rounded-md bg-muted/60 px-1.5 py-0.5"
+          class="inline-flex items-center whitespace-nowrap rounded-md border border-black/[0.06] bg-muted/50 px-1.5 py-0.5 text-xs font-medium uppercase text-muted-foreground"
         >
-          <component :is="triggerIcon(t.type)" :size="11" />
           {{ t.type }}
         </span>
       </div>
     </template>
 
-    <template #cell-nodes="{ row: wf }">
-      <span class="text-sm text-muted-foreground tabular-nums">
-        {{ wf.blob.nodes.length }} node<span v-if="wf.blob.nodes.length !== 1">s</span>
-      </span>
-    </template>
-
-    <template #cell-revision="{ row: wf }">
-      <span class="text-sm text-muted-foreground tabular-nums">r{{ wf.revision }}</span>
-    </template>
-
     <template #cell-lastRun="{ row: wf }">
       <div v-if="lastRunFor(wf.id)" class="flex items-center gap-2 min-w-0">
-        <Badge variant="outline" :class="['text-sm border shrink-0', runBadge(lastRunFor(wf.id).status).class]">
+        <Badge variant="outline" :class="['border text-xs font-medium uppercase shrink-0', runBadge(lastRunFor(wf.id).status).class]">
           {{ runBadge(lastRunFor(wf.id).status).label }}
         </Badge>
         <span class="text-sm tabular-nums text-muted-foreground truncate">
@@ -222,10 +301,12 @@ const columns = [
             <DropdownMenuLabel>Actions</DropdownMenuLabel>
             <DropdownMenuSeparator />
             <DropdownMenuItem @select="router.push(`/integrations/workflows/${wf.id}`)">
-              <Globe :size="14" /> Open editor
+              Open editor
+            </DropdownMenuItem>
+            <DropdownMenuItem @select="askDuplicate(wf)">
+              Duplicate
             </DropdownMenuItem>
             <DropdownMenuItem @select="toggleActive(wf.id)">
-              <component :is="wf.active ? Pause : Play" :size="14" />
               {{ wf.active ? "Pause" : "Activate" }}
             </DropdownMenuItem>
             <DropdownMenuSeparator />
@@ -233,7 +314,7 @@ const columns = [
               class="text-destructive focus:text-destructive"
               @select="askDelete(wf)"
             >
-              <Trash2 :size="14" /> Delete
+              Delete
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
@@ -265,4 +346,6 @@ const columns = [
       </AlertDialogFooter>
     </AlertDialogContent>
   </AlertDialog>
+
+  <WorkflowDuplicateDialog v-model:open="duplicateOpen" :workflow="duplicateTarget" @duplicated="onDuplicated" />
 </template>

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

@@ -1,6 +1,9 @@
 import type { Workflow as WorkflowResource } from '../../types/integrations.js';
 type __VLS_Props = {
     workflows: WorkflowResource[];
+    loading?: boolean;
 };
-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>;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    loading: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Integrations/workflowLayout.d.ts

@@ -14,4 +14,9 @@ export declare function layoutWorkflowNodes(nodes: VFNode[], edges: VFEdge[], op
     nodeHeight?: number;
     rankSeparation?: number;
     nodeSeparation?: number;
+    /** Per-node size overrides (e.g. group clusters laid out as one unit). */
+    sizes?: Record<string, {
+        width: number;
+        height: number;
+    }>;
 }): VFNode[];

package/dist/runtime/components/Integrations/workflowLayout.js

@@ -8,8 +8,9 @@ export function layoutWorkflowNodes(nodes, edges, options = {}) {
   const g = new dagre.graphlib.Graph();
   g.setDefaultEdgeLabel(() => ({}));
   g.setGraph({ rankdir: dir, ranksep, nodesep, marginx: 20, marginy: 20 });
+  const sizeOf = (id) => options.sizes?.[id] ?? { width: nodeWidth, height: nodeHeight };
   for (const n of nodes) {
-    g.setNode(n.id, { width: nodeWidth, height: nodeHeight });
+    g.setNode(n.id, sizeOf(n.id));
   }
   for (const e of edges) {
     g.setEdge(e.source, e.target);
@@ -18,11 +19,12 @@ export function layoutWorkflowNodes(nodes, edges, options = {}) {
   return nodes.map((n) => {
     const laid = g.node(n.id);
     if (!laid) return n;
+    const size = sizeOf(n.id);
     return {
       ...n,
       position: {
-        x: laid.x - nodeWidth / 2,
-        y: laid.y - nodeHeight / 2
+        x: laid.x - size.width / 2,
+        y: laid.y - size.height / 2
       }
     };
   });

package/dist/runtime/composables/integrationsApi.d.ts

@@ -5,8 +5,12 @@ export declare class IntegrationsApiError extends Error {
 }
 export declare function useIntegrationsApi(): {
     baseUrl: import("vue").ComputedRef<string>;
-    get: <T>(path: string) => Promise<T>;
-    post: <T>(path: string, body?: unknown) => Promise<T>;
+    get: <T>(path: string, opts?: {
+        signal?: AbortSignal;
+    }) => Promise<T>;
+    post: <T>(path: string, body?: unknown, opts?: {
+        signal?: AbortSignal;
+    }) => Promise<T>;
     put: <T>(path: string, body?: unknown) => Promise<T>;
     patch: <T>(path: string, body?: unknown) => Promise<T>;
     del: <T>(path: string) => Promise<T>;

package/dist/runtime/composables/integrationsApi.js

@@ -29,13 +29,14 @@ export function useIntegrationsApi() {
   function url(path) {
     return `${baseUrl.value.replace(/\/$/, "")}${path.startsWith("/") ? path : `/${path}`}`;
   }
-  async function request(method, path, body) {
+  async function request(method, path, body, opts) {
     const headers = await buildHeaders(body !== void 0 ? { "Content-Type": "application/json" } : {});
     try {
       return await $fetch(url(path), {
         method,
         headers,
-        body: body !== void 0 ? body : void 0
+        body: body !== void 0 ? body : void 0,
+        signal: opts?.signal
       });
     } catch (err) {
       const fe = err;
@@ -46,8 +47,8 @@ export function useIntegrationsApi() {
   }
   return {
     baseUrl,
-    get: (path) => request("GET", path),
-    post: (path, body) => request("POST", path, body ?? {}),
+    get: (path, opts) => request("GET", path, void 0, opts),
+    post: (path, body, opts) => request("POST", path, body ?? {}, opts),
     put: (path, body) => request("PUT", path, body ?? {}),
     patch: (path, body) => request("PATCH", path, body ?? {}),
     del: (path) => request("DELETE", path)