@revenexx/studio-integrations 0.7.0 → 1.0.0

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

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, resolveComponent } from "vue";
-import { RefreshCircle as Loader2, ClockCircle as Clock, Global as Webhook, Play, Bolt as Zap } from "#solar-icons";
+import { RefreshCircle as Loader2 } from "#solar-icons";
+import { triggerGlyph as glyphForTrigger } from "../../data/triggerGlyphs";
 import { templateCategoryLabel, templatePackageLabel } from "../../data/integrationTemplates";
 import TemplateFlowPreview from "./TemplateFlowPreview.vue";
 const props = defineProps({
@@ -17,7 +18,6 @@ const full = computed(() => props.density === "full");
 const banner = computed(
   () => full.value ? props.template.images.find((i) => i.category === "banner")?.src ?? null : null
 );
-const TRIGGER_ICON = { schedule: Clock, webhook: Webhook, manual: Play, event: Zap };
 const TRIGGER_LABEL_KEY = {
   schedule: "integration.templates.card.trigger.schedule",
   webhook: "integration.templates.trigger.webhook",
@@ -104,7 +104,7 @@ const chipSize = computed(() => full.value ? "px-2 py-0.5 text-xs" : "px-1.5 py-
           :key="triggerType"
           class="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-slate-100 px-2 py-0.5 uppercase"
         >
-          <component :is="TRIGGER_ICON[triggerType] ?? Zap" :size="10" />
+          <component :is="glyphForTrigger(triggerType)" :size="10" />
           {{ triggerTypeLabel(triggerType) }}
         </span>
         <span class="flex-1" />

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

@@ -1,6 +1,7 @@
 <script setup>
-import { computed } from "vue";
+import { computed, onMounted } from "vue";
 import * as Lucide from "lucide-vue-next";
+import { triggerGlyph } from "../../data/triggerGlyphs";
 import { findManifest, NODE_CATEGORIES, TRIGGER_TEMPLATES } from "../../data/integrationNodeCatalog";
 import { resolveLocalized } from "../../utils/localize";
 import { describeCron } from "../../utils/schedule";
@@ -12,6 +13,10 @@ const props = defineProps({
   showErrorBranches: { type: Boolean, required: false, default: false }
 });
 const t = useIntegrationsT();
+const { load: loadNodeCatalog } = useIntegrationsNodes();
+onMounted(() => {
+  void loadNodeCatalog();
+});
 const STOP_SLUG = "revenexx:stop-and-error";
 const NODE_W = 220;
 const NODE_H = 58;
@@ -37,7 +42,11 @@ const boxes = computed(() => {
       subtitle,
       type: t2.type,
       manifest: null,
-      icon: iconFor(template?.icon ?? "Zap")
+      // The trigger's glyph from the one map, like every other trigger box. This
+      // resolved `TRIGGER_TEMPLATES`' icon name ('Zap', 'Play', …) out of Lucide
+      // instead — the same route the palette's tiles took — so the preview drew a
+      // Lucide bolt where the card it previews draws Solar's (PO-329).
+      icon: triggerGlyph(t2.type)
     });
   });
   blob.nodes.forEach((n, i) => {
@@ -162,7 +171,7 @@ const bounds = computed(() => {
         >
           <div class="flex flex-1 items-center gap-2.5 px-3 py-2">
             <span class="flex size-8 shrink-0 items-center justify-center rounded-md bg-emerald-500 text-white shadow-sm">
-              <component :is="b.icon" :size="15" :stroke-width="2.5" />
+              <component :is="b.icon" :size="15" />
             </span>
             <div class="min-w-0 flex-1">
               <div class="truncate text-sm font-semibold leading-tight text-foreground">{{ b.label }}</div>

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

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref, watch } from "vue";
-import { RefreshCircle as Loader2, MagicStick as Sparkles } from "#solar-icons";
+import { RefreshCircle as Loader2, Magnifier as Search, MagicStick as Sparkles } from "#solar-icons";
+import { triggerGlyph } from "../../data/triggerGlyphs";
 import * as Lucide from "lucide-vue-next";
 import {
   Badge,
@@ -179,7 +180,7 @@ async function useTemplate(slug) {
               <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" />
+                    <component :is="triggerGlyph(selectedTrigger?.type)" :size="13" />
                   </span>
                   <span class="shrink-0 text-sm font-medium">{{ resolveLocalized(selectedTrigger?.name) }}</span>
                   <span class="truncate text-sm text-muted-foreground">{{ resolveLocalized(selectedTrigger?.description) }}</span>
@@ -190,7 +191,7 @@ async function useTemplate(slug) {
               <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" />
+                    <component :is="triggerGlyph(t.type)" :size="14" />
                   </span>
                   <span class="min-w-0">
                     <span class="block text-sm font-medium">{{ resolveLocalized(t.name) }}</span>
@@ -250,7 +251,7 @@ async function useTemplate(slug) {
       <!-- ── 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" />
+          <Search :size="12" class="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
           <input
             v-model="templateSearch"
             type="text"

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

@@ -4,6 +4,22 @@ import '@vue-flow/minimap/dist/style.css';
 import type { Workflow, WorkflowBlob } from '../../types/integrations.js';
 type __VLS_Props = {
     workflow: Workflow;
+    /**
+     * Unsaved work the page is still holding for this workflow, read ONCE, at
+     * mount (behaviour specs/workflow-save.md).
+     *
+     * The editor is mounted per tab, so a trip to the Runs tab and back seeded a
+     * fresh working copy from the SAVED blob while the page still held the draft:
+     * the canvas showed one graph, the header said "Unsaved changes" about
+     * another, and Save wrote the one nobody could see. Seeding from the draft is
+     * what makes a move inside the workflow keep the work.
+     *
+     * Deliberately not watched. The page's draft is a copy of what this editor
+     * last emitted, so following it would re-seed the canvas — and drop the
+     * selection, the undo stack and any open dialog with it — on the user's own
+     * keystrokes.
+     */
+    draft?: WorkflowBlob | null;
     /** Busy flag for the control-pane Play button (a run is being triggered). */
     runBusy?: boolean;
     /** The run is queued behind a bundle build — busy, but worth saying why. */

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

@@ -56,6 +56,7 @@ import { findingsByNodeField } from "../../utils/validationFindings";
 import { resolveDisplayName, resolveLocalized } from "../../utils/localize";
 const props = defineProps({
   workflow: { type: Object, required: true },
+  draft: { type: [Object, null], required: false },
   runBusy: { type: Boolean, required: false },
   runWaiting: { type: Boolean, required: false },
   overlayOpen: { type: Boolean, required: false }
@@ -63,7 +64,7 @@ const props = defineProps({
 const emit = defineEmits(["change", "run", "toggleActive", "openSettings"]);
 const t = useIntegrationsT();
 const { keys: secretKeys } = useIntegrationsSecrets();
-const blob = ref(clone(props.workflow.blob));
+const blob = ref(clone(props.draft ?? props.workflow.blob));
 watch(() => props.workflow.id, () => {
   blob.value = clone(props.workflow.blob);
   syncFromBlob();
@@ -469,22 +470,49 @@ flow.onEdgeUpdate(({ edge, connection }) => {
   syncFromBlob();
   push();
 });
-flow.onEdgesChange((changes) => {
+let pendingEdgeRemovals = [];
+let pendingNodeRemovals = [];
+let removalFlushQueued = false;
+function queueRemovalFlush() {
+  if (removalFlushQueued) return;
+  removalFlushQueued = true;
+  void nextTick(flushRemovals);
+}
+function flushRemovals() {
+  removalFlushQueued = false;
+  const edges = pendingEdgeRemovals;
+  const nodes = pendingNodeRemovals;
+  pendingEdgeRemovals = [];
+  pendingNodeRemovals = [];
+  const goneNodes = new Set(nodes);
   let mutated = false;
+  for (const c of edges) {
+    if (goneNodes.has(c.source) || goneNodes.has(c.target)) continue;
+    blob.value.edges = blob.value.edges.filter((e) => e.id !== c.id);
+    mutated = true;
+  }
+  if (nodes.length) {
+    dropFromBlob(nodes);
+    mutated = true;
+  }
+  if (mutated) {
+    syncFromBlob();
+    push();
+  }
+}
+flow.onEdgesChange((changes) => {
   for (const c of changes) {
     if (c.type === "remove") {
-      blob.value.edges = blob.value.edges.filter((e) => e.id !== c.id);
-      mutated = true;
+      pendingEdgeRemovals.push({ id: c.id, source: c.source, target: c.target });
     }
   }
-  if (mutated) push();
+  if (pendingEdgeRemovals.length) queueRemovalFlush();
 });
 flow.onNodesChange((changes) => {
   const removed = changes.filter((c) => c.type === "remove").map((c) => c.id);
   if (!removed.length) return;
-  void nextTick(() => {
-    for (const id of removed) removeBlobNode(id);
-  });
+  pendingNodeRemovals.push(...removed);
+  queueRemovalFlush();
 });
 function stripFromGroups(drop) {
   if (!blob.value.groups?.length) return;
@@ -541,7 +569,7 @@ function addSticky(at) {
   syncFromBlob();
   push();
 }
-function removeBlobNodes(ids) {
+function dropFromBlob(ids) {
   if (!ids.length) return;
   const drop = new Set(ids);
   stripFromGroups(drop);
@@ -553,6 +581,10 @@ function removeBlobNodes(ids) {
     if (blob.value.triggerPositions?.[id]) delete blob.value.triggerPositions[id];
   }
   if (selectedId.value && drop.has(selectedId.value)) selectedId.value = null;
+}
+function removeBlobNodes(ids) {
+  if (!ids.length) return;
+  dropFromBlob(ids);
   syncFromBlob();
   push();
 }
@@ -779,14 +811,14 @@ const selectedUpstreamOutputs = computed(() => {
   return blob.value.edges.filter((e) => e.to.nodeId === id).flatMap((e) => {
     const source = blob.value.nodes.find((n) => n.id === e.from.nodeId);
     if (!source) return [];
-    const portDef = (findManifest(source.nodeSlug, source.nodeVersion)?.outputs ?? []).find((o) => o.name === e.from.output);
+    const port = portsForNode(source, findManifest(source.nodeSlug, source.nodeVersion), dynamicOutputs.value[source.id]).find((p) => p.name === e.from.output);
     return [{
       nodeId: source.id,
       // A node's own name is text the user typed — never trimmed, never read
       // as JSON. The manifest strings below it get the normalising resolver.
       nodeName: resolveDisplayName(source.name) || source.nodeSlug,
       output: e.from.output,
-      fields: portDef?.fields
+      fields: port?.fields.map((f) => f.name)
     }];
   });
 });
@@ -1213,6 +1245,14 @@ async function focusPalette() {
   paletteRef.value?.focusSearch();
 }
 const lightboxOpen = computed(() => !!selection.value);
+watch(lightboxOpen, (open) => {
+  if (!open) renameIntent.value = false;
+});
+function onConfigOpenAutoFocus(event) {
+  if (renameIntent.value) return;
+  event.preventDefault();
+  event.target?.focus();
+}
 const canvasHasKeyboard = computed(() => !lightboxOpen.value && !variablesOpen.value && !props.overlayOpen);
 const singleSelected = computed(() => flow.getSelectedNodes.value.length === 1 ? flow.getSelectedNodes.value[0] : null);
 useCanvasShortcuts(() => ({
@@ -1790,6 +1830,7 @@ const edgeTypes = {
            form as a strip down the left of an empty workbench. -->
       <DialogContent
         :show-close-button="false"
+        @open-auto-focus="onConfigOpenAutoFocus"
         class="flex max-w-none flex-col gap-0 overflow-hidden rounded-lg p-0 sm:max-w-none"
         :class="selectionIsTrigger ? 'h-[min(520px,86vh)] w-[min(600px,94vw)]' : 'h-[min(680px,86vh)] w-[min(1100px,94vw)]'"
       >

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

@@ -4,6 +4,22 @@ import '@vue-flow/minimap/dist/style.css';
 import type { Workflow, WorkflowBlob } from '../../types/integrations.js';
 type __VLS_Props = {
     workflow: Workflow;
+    /**
+     * Unsaved work the page is still holding for this workflow, read ONCE, at
+     * mount (behaviour specs/workflow-save.md).
+     *
+     * The editor is mounted per tab, so a trip to the Runs tab and back seeded a
+     * fresh working copy from the SAVED blob while the page still held the draft:
+     * the canvas showed one graph, the header said "Unsaved changes" about
+     * another, and Save wrote the one nobody could see. Seeding from the draft is
+     * what makes a move inside the workflow keep the work.
+     *
+     * Deliberately not watched. The page's draft is a copy of what this editor
+     * last emitted, so following it would re-seed the canvas — and drop the
+     * selection, the undo stack and any open dialog with it — on the user's own
+     * keystrokes.
+     */
+    draft?: WorkflowBlob | null;
     /** Busy flag for the control-pane Play button (a run is being triggered). */
     runBusy?: boolean;
     /** The run is queued behind a bundle build — busy, but worth saying why. */

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

@@ -3,6 +3,12 @@ import '@vue-flow/core/dist/theme-default.css';
 import type { Workflow } from '../../types/integrations.js';
 type __VLS_Props = {
     workflow: Workflow;
+    /**
+     * The editor has unsaved work the page is holding. Nothing here shows it — the
+     * canvas behind this tab is not mounted — but a restore is what destroys it, so
+     * the question this panel asks has to name it (specs/workflow-save.md).
+     */
+    draftPending?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     restored: () => any;

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

@@ -20,7 +20,8 @@ import NodeDynamicOutputsResolver from "./NodeDynamicOutputsResolver.vue";
 import { findManifest } from "../../data/integrationNodeCatalog";
 import { useIntegrationsRevisions } from "../../composables/useIntegrationsRevisions";
 const props = defineProps({
-  workflow: { type: Object, required: true }
+  workflow: { type: Object, required: true },
+  draftPending: { type: Boolean, required: false }
 });
 const emit = defineEmits(["restored"]);
 const revisionsApi = useIntegrationsRevisions();
@@ -225,7 +226,8 @@ async function select(revision) {
   }
 }
 async function restoreRevision(rev) {
-  if (!confirm(t("integration.history.confirm.restore", { revision: rev.revision }))) return;
+  const question = props.draftPending ? t("integration.history.confirm.restoreWithDraft", { revision: rev.revision }) : t("integration.history.confirm.restore", { revision: rev.revision });
+  if (!confirm(question)) return;
   restoring.value = rev.revision;
   try {
     await revisionsApi.restore(props.workflow.id, rev.revision);

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

@@ -3,6 +3,12 @@ import '@vue-flow/core/dist/theme-default.css';
 import type { Workflow } from '../../types/integrations.js';
 type __VLS_Props = {
     workflow: Workflow;
+    /**
+     * The editor has unsaved work the page is holding. Nothing here shows it — the
+     * canvas behind this tab is not mounted — but a restore is what destroys it, so
+     * the question this panel asks has to name it (specs/workflow-save.md).
+     */
+    draftPending?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     restored: () => any;

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

@@ -3,8 +3,8 @@ import { computed, inject, nextTick, ref, watch } from "vue";
 import { Handle, Position, useVueFlow } from "@vue-flow/core";
 import { NodeToolbar } from "@vue-flow/node-toolbar";
 import * as Lucide from "lucide-vue-next";
-import { Copy, TrashBinMinimalistic as TrashBin } from "#solar-icons";
-import { NODE_CATEGORIES, findManifest } from "../../data/integrationNodeCatalog";
+import { Copy, DangerTriangle as AlertTriangle, RefreshCircle as Loader2, TrashBinMinimalistic as TrashBin } from "#solar-icons";
+import { NODE_CATEGORIES, findManifest, isVersionExecutable } from "../../data/integrationNodeCatalog";
 import { isTerminalManifest } from "../../data/nodeInputData";
 import { resolveDisplayName, resolveLocalized } from "../../utils/localize";
 const props = defineProps({
@@ -20,7 +20,6 @@ const category = computed(() => NODE_CATEGORIES.find((c) => c.key === manifest.v
 const title = computed(
   () => resolveDisplayName(props.data.name) || resolveLocalized(manifest.value?.name) || props.data.nodeSlug
 );
-const inputRequired = computed(() => manifest.value?.input?.required !== false);
 const invalidFields = computed(() => props.data.__invalidFields ?? []);
 const invalidLabel = computed(() => t("integration.canvas.node.badge.invalidConfig", invalidFields.value.length, { fields: invalidFields.value.join(", ") }));
 const notes = computed(() => (props.data.notes ?? "").trim());
@@ -31,11 +30,15 @@ const notePlacement = ref(Position.Bottom);
 const noteMaxHeight = ref(0);
 let noteTimer = null;
 const notePanelId = computed(() => `node-note-${props.id}`);
+function handleTitle(p) {
+  return p.hint ? p.label + " \u2014 " + p.hint : p.label;
+}
 function portsFromOutputs(list) {
   const ports = [];
   for (const o of list) {
     if (o.name) {
-      ports.push({ name: o.name, kind: o.kind, label: resolveLocalized(o.label) || o.name });
+      const hint = resolveLocalized(o.description);
+      ports.push({ name: o.name, kind: o.kind, label: resolveLocalized(o.label) || o.name, ...hint ? { hint } : {} });
     } else if (o.sourceFromConfig) {
       const raw = props.data.config?.[o.sourceFromConfig];
       const values = Array.isArray(raw) ? raw : [];
@@ -160,6 +163,8 @@ function releaseNote() {
   }, 250);
 }
 const nodeActions = inject("workflow-node-actions", null);
+const unbuildableVersion = computed(() => nodeActions !== null && !isVersionExecutable(props.data.nodeSlug, props.data.nodeVersion));
+const unbuildableLabel = computed(() => t("integration.canvas.node.badge.noBuiltCode", { version: props.data.nodeVersion }));
 const canConfigure = computed(() => typeof nodeActions?.configure === "function");
 function configure() {
   nodeActions?.configure?.(props.id);
@@ -226,17 +231,15 @@ function remove() {
 
   <!-- Input: ONE logical input, attachable from the left or the top — both
        dots feed the same `__in` port. Clearly visible, ring + shadow. -->
-  <template v-if="inputRequired">
-    <Handle
-      v-for="side in IN_SIDES"
-      :id="`__in__${side}`"
-      :key="`in-${side}`"
-      type="target"
-      :position="sideToPosition(side)"
-      :title="t('integration.canvas.node.handle.input')"
-      class="!size-3 !rounded-full !border-2 !border-white !bg-slate-500 !shadow-sm transition-all hover:!size-3.5 hover:!bg-slate-700"
-    />
-  </template>
+  <Handle
+    v-for="side in IN_SIDES"
+    :id="`__in__${side}`"
+    :key="`in-${side}`"
+    type="target"
+    :position="sideToPosition(side)"
+    :title="t('integration.canvas.node.handle.input')"
+    class="!size-3 !rounded-full !border-2 !border-white !bg-slate-500 !shadow-sm transition-all hover:!size-3.5 hover:!bg-slate-700"
+  />
 
   <!-- Output handles: right + bottom, distributed per side. Color encodes the
        port semantics (true/false/error/branch/default), matching the edges. -->
@@ -247,7 +250,7 @@ function remove() {
       :key="`${p.name}-${side}`"
       type="source"
       :position="sideToPosition(side)"
-      :title="p.label"
+      :title="handleTitle(p)"
       :style="distributedStyle(side, i, outputs.length)"
       class="!size-3 !rounded-full !border-2 !border-white !shadow-sm transition-all hover:!size-3.5"
       :class="portTone(p).handle"
@@ -265,19 +268,43 @@ function remove() {
   showPortLabels ? 'pb-3.5' : ''
 ]"
   >
-    <!-- Incomplete settings at the last save: the count, amber, at the corner
-         the input handles leave free. Hoverable on purpose — the count alone
-         doesn't say what is wrong, so the title spells it out and lists the
-         fields; `nodrag` keeps that hover from starting a card drag. -->
+    <!-- The card's marks, in one row at the corner the input handles leave free.
+         A row rather than two absolutely-placed badges: the amber one's width
+         follows its count, so any fixed offset for a second badge overlaps it as
+         soon as the count reaches two digits. Hoverable on purpose — a symbol or
+         a bare count at a corner is a riddle, so each carries its own title;
+         `nodrag` keeps that hover from starting a card drag. -->
     <span
-      v-if="invalidFields.length"
-      role="img"
-      :aria-label="invalidLabel"
-      :title="invalidLabel"
-      class="nodrag absolute -left-2 -top-2 z-10 flex cursor-help items-center gap-0.5 rounded-full bg-amber-500 px-1.5 py-0.5 text-[9px] font-bold leading-none text-white shadow-sm"
+      v-if="invalidFields.length || unbuildableVersion"
+      class="nodrag absolute -left-2 -top-2 z-10 flex items-center gap-1"
     >
-      <Lucide.TriangleAlert :size="9" :stroke-width="2.5" />
-      {{ invalidFields.length }}
+      <span
+        v-if="invalidFields.length"
+        role="img"
+        :aria-label="invalidLabel"
+        :title="invalidLabel"
+        class="flex cursor-help items-center gap-0.5 rounded-full bg-amber-500 px-1.5 py-0.5 text-[9px] font-bold leading-none text-white shadow-sm"
+      >
+        <!-- `weight="Bold"` for the same reason the Lucide draw carried
+             `stroke-width="2.5"`: 9px of white on amber. Solar's default
+             BoldDuotone washes out at that size against the pill. -->
+        <AlertTriangle :size="9" weight="Bold" />
+        {{ invalidFields.length }}
+      </span>
+      <!-- The pinned version cannot be run. Rose rather than amber, and no
+           count: amber on this card means unfinished work of the user's own —
+           settings still to fill in — while this is the platform missing a piece,
+           which the user cannot fix by typing. Hence the stronger colour despite
+           being the one that does NOT block activation. -->
+      <span
+        v-if="unbuildableVersion"
+        role="img"
+        :aria-label="unbuildableLabel"
+        :title="unbuildableLabel"
+        class="flex cursor-help items-center rounded-full bg-rose-600 px-1.5 py-0.5 text-[9px] font-bold leading-none text-white shadow-sm"
+      >
+        <AlertTriangle :size="9" weight="Bold" />
+      </span>
     </span>
     <!-- Always-visible edit affordance: single click opens the config lightbox.
          (Double-click on the whole card works too.) Hidden in read-only hosts
@@ -330,7 +357,11 @@ function remove() {
         v-if="resolvePending"
         class="pointer-events-none absolute bottom-1 left-1/2 flex -translate-x-1/2 select-none items-center gap-1 whitespace-nowrap text-[9px] font-semibold uppercase tracking-wide text-muted-foreground"
       >
-        <Lucide.LoaderCircle :size="9" class="animate-spin" />
+        <!-- `weight="Bold"` for the badge's reason one size down: the default
+             BoldDuotone draws a filled disc across the whole viewBox, and a disc
+             turning looks like a disc standing still. Bold knocks the arrows out
+             of the ring, so 9px of it still reads as spinning. -->
+        <Loader2 :size="9" weight="Bold" class="animate-spin" />
         {{ t("integration.canvas.node.port.resolving") }}
       </span>
       <template v-else>

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

@@ -11,9 +11,7 @@ import {
   AltArrowRight as Next,
   Play,
   Pause,
-  RefreshCircle as Loader2,
-  ClockCircle as Clock,
-  LinkRound as Webhook
+  RefreshCircle as Loader2
 } from "#solar-icons";
 import { Badge, Button } from "@revenexx/studio";
 import { toast } from "vue-sonner";
@@ -26,6 +24,7 @@ import StickyNoteView from "./StickyNoteView.vue";
 import GroupFrameView from "./GroupFrameView.vue";
 import WorkflowEdgeView from "./WorkflowEdgeView.vue";
 import { findManifest } from "../../data/integrationNodeCatalog";
+import { triggerGlyph } from "../../data/triggerGlyphs";
 import { SAFETY_POLL_MS } from "../../utils/pollBudget";
 import { runStatusLabel, statusClass } from "../../utils/statusStyle";
 const props = defineProps({
@@ -408,7 +407,7 @@ function pretty(v) {
   }
 }
 function triggerIcon(type) {
-  return type === "schedule" ? Clock : type === "webhook" ? Webhook : Play;
+  return triggerGlyph(type);
 }
 const activeStepTitle = computed(() => {
   const s = activeStep.value;

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

@@ -4,33 +4,32 @@ export interface ExecutionModeOption {
     label: string;
     hint: string;
 }
+/** What this dialog edits — the values as they stand, saved or not. */
+export interface WorkflowSettingsValues {
+    name: string;
+    description: string;
+    tags: string[];
+    icon: WorkflowIcon | null;
+    executionMode: string;
+}
 type __VLS_Props = {
     open: boolean;
     workflow: Workflow;
     modes: ExecutionModeOption[];
-    modeDraft: string;
-    savingMode?: boolean;
-    savingMeta?: boolean;
+    /**
+     * The values to edit: the editor's unsaved ones where it has any, the saved ones
+     * otherwise. Reopening the dialog therefore shows what the operator last entered
+     * rather than what the platform still holds.
+     */
+    current: WorkflowSettingsValues;
     /** Tag suggestions (tags already used across the tenant's workflows). */
     tagSuggestions?: string[];
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (args_0: boolean) => any;
-    "change-mode": (mode: string) => any;
-    "save-meta": (meta: {
-        name: string;
-        description: string;
-        tags: string[];
-        icon: WorkflowIcon | null;
-    }) => any;
+    apply: (values: WorkflowSettingsValues) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
-    "onChange-mode"?: ((mode: string) => any) | undefined;
-    "onSave-meta"?: ((meta: {
-        name: string;
-        description: string;
-        tags: string[];
-        icon: WorkflowIcon | null;
-    }) => any) | undefined;
+    onApply?: ((values: WorkflowSettingsValues) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;