@revenexx/studio-integrations 2.2.0 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @revenexx/studio-integrations
 
+## 2.4.0
+
+### Minor Changes
+
+- 22eb158: Run in the workflow editor no longer starts the saved version while the canvas shows unsaved changes (PO-567). A changed setting used to be run as its old value, with nothing on screen to say so. Run now stands in the header beside Save rather than in the canvas's control pane, and while there is unsaved work it reads **Save & run** (German **Speichern & Run**): the press saves first and runs the workflow as it then stands. A save that is refused, or waits on the question whether to keep the work as paused, starts no run. The canvas's right-click menu names the save the same way. The header's dispatch badge now shows the mode as entered in the settings, as the name beside it already did, because that is the mode the next run goes out in. `WorkflowEditor` loses its `runWaiting` prop and gains `runSaves`.
+
+## 2.3.0
+
+### Minor Changes
+
+- 95d8a13: A run somebody terminated is no longer offered a resume from its row (PO-355). The studio shows a terminated run as failed, and the row's actions menu offered it **Resume**, which the platform refuses: it resumes only a run that failed on its own. The row now asks the platform's own status word, as the run's record already did, so the resume appears only where it can work. The run still reads as failed, and a retry is still offered. `WorkflowRun` gains an optional `apiStatus` carrying that word.
+
+### Patch Changes
+
+- 903b632: A credential form no longer dies on a list option meaning "no choice" (PO-424). A system that offered an option with an empty value in one of its lists stopped that list opening, in the New credential dialog (from the credentials list or from a node's credential setting) and in a credential's detail view, and nothing in the dialog could be closed afterwards. Those lists now carry their values the way a node's settings have since PO-422: the option is offered and can be chosen like any other, and the credential stores what the system declared.
+- 76ec989: A template's description can no longer run script in the studio (PO-524). The "About" section of a template's page rendered the registry's Markdown as whatever HTML it carried, so an image with an `onerror` handler or a `javascript:` link in a description ran inside the tenant's session. The description is now sanitised with DOMPurify after it is rendered: headings, lists, emphasis, code, links and images still show, while script, event handlers, script links, style sheets, inline styles and form controls are removed. A task-list checkbox in a description now shows as its text alone. The module gains `dompurify` as a runtime dependency.
+- 1231fcc: PO-552: the Linear nodes draw their own icons instead of an empty box.
+
+  Create Issue, Get Issue and Add Comment named icons the studio's table did not
+  know, so all three showed the generic box under Linear → Issues. They now draw a
+  ticket with a plus, a ticket and a speech bubble with text, and List Projects,
+  new in the same package, draws a folder.
+
+- 1070ae7: The blank form of the New workflow dialog opens with empty fields (PO-562): the example name and description are gone, so nothing reads as already filled in. The name is marked as required from the start, with the same red asterisk the node settings use.
+- 44ced2f: A node icon declared as a Lucide name (`lucide:<kebab-name>`) is drawn as named, without the studio's translation table, so a new node package shows its icons without a studio change (PO-566). The `mdi:*` names older packages declare are still translated; that table takes no new entries. A template's flow preview now draws node icons the same way as the canvas and the palette — it used to skip the table and draw most of them as a box.
+
 ## 2.2.0
 
 ### Minor Changes

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@revenexx/studio-integrations",
   "configKey": "studioIntegrations",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

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

@@ -20,6 +20,7 @@ import {
 } from "@revenexx/studio";
 import { toast } from "vue-sonner";
 import { resolveLocalized } from "../../utils/localize";
+import { fromModelValue, toItemValue, toModelValue } from "../../utils/selectOptions";
 import { errorReason } from "../../utils/apiError";
 const props = defineProps({
   open: { type: Boolean, required: true },
@@ -89,7 +90,7 @@ function buildConfigPayload() {
   const out = {};
   for (const f of fieldsOf(pickedType.value)) {
     const v = form.config[f.key];
-    if (v !== void 0 && v !== "") out[f.key] = v;
+    if (v !== void 0) out[f.key] = v;
   }
   return out;
 }
@@ -217,14 +218,14 @@ async function submit() {
           </div>
           <Select
             v-else-if="f.type === 'select'"
-            :model-value="form.config[f.key] ?? ''"
-            @update:model-value="(v) => form.config[f.key] = v"
+            :model-value="toModelValue(form.config[f.key], f.options)"
+            @update:model-value="(v) => form.config[f.key] = fromModelValue(v)"
           >
             <SelectTrigger :id="`create-field-${f.key}`" class="bg-white">
               <SelectValue :placeholder="t('integration.credentials.shared.field.select.placeholder')" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem v-for="opt in f.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
+              <SelectItem v-for="opt in f.options ?? []" :key="String(opt.value)" :value="toItemValue(opt.value)">
                 {{ resolveLocalized(opt.label) }}
               </SelectItem>
             </SelectContent>

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

@@ -36,6 +36,7 @@ import { relativeTime } from "../../utils/relativeTime";
 import { useNow } from "../../composables/useNow";
 import { hasRevenexxSource } from "../../utils/revenexxCredentialSource";
 import { resolveLocalized } from "../../utils/localize";
+import { fromModelValue, toItemValue, toModelValue } from "../../utils/selectOptions";
 const props = defineProps({
   open: { type: Boolean, required: true },
   credential: { type: [Object, null], required: true },
@@ -305,14 +306,14 @@ async function connect() {
                 </div>
                 <Select
                   v-else-if="f.type === 'select'"
-                  :model-value="form.config[f.key] ?? ''"
-                  @update:model-value="(v) => form.config[f.key] = v"
+                  :model-value="toModelValue(form.config[f.key], f.options)"
+                  @update:model-value="(v) => form.config[f.key] = fromModelValue(v)"
                 >
                   <SelectTrigger :id="`detail-field-${f.key}`" class="bg-white" v-bind="configFieldAria(f.key)">
                     <SelectValue :placeholder="t('integration.credentials.shared.field.select.placeholder')" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem v-for="opt in f.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
+                    <SelectItem v-for="opt in f.options ?? []" :key="String(opt.value)" :value="toItemValue(opt.value)">
                       {{ resolveLocalized(opt.label) }}
                     </SelectItem>
                   </SelectContent>

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

@@ -11,6 +11,7 @@ import {
 } from "@revenexx/studio";
 import { toast } from "vue-sonner";
 import { errorReason } from "../../utils/apiError";
+import { acceptsResume } from "../../utils/runFeedQuery";
 const props = defineProps({
   run: { type: Object, required: true }
 });
@@ -27,7 +28,7 @@ function viewReplay() {
 const hasExecution = computed(() => !!props.run.temporalRunId);
 const isActive = computed(() => (props.run.status === "running" || props.run.status === "queued") && hasExecution.value);
 const isTerminal = computed(() => ["succeeded", "failed", "cancelled"].includes(props.run.status));
-const canResume = computed(() => props.run.status === "failed" && hasExecution.value);
+const canResume = computed(() => acceptsResume(props.run.apiStatus, props.run.status) && hasExecution.value);
 const hasAny = computed(() => isActive.value || isTerminal.value);
 const busy = ref(false);
 function actionLabel(a) {

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

@@ -7,6 +7,7 @@ import { IntegrationsApiError, errorReason } from "../../utils/apiError";
 import { createPollBudget, SAFETY_POLL_MS } from "../../utils/pollBudget";
 import { formatDuration } from "../../utils/formatDuration";
 import { unwrapRun } from "../../utils/runEnvelope";
+import { acceptsResume } from "../../utils/runFeedQuery";
 import { splitRunOutputs } from "../../utils/runOutputs";
 const props = defineProps({
   run: { type: Object, required: true },
@@ -527,8 +528,7 @@ const apiStatusRaw = computed(() => pickStr(runData.value, ["status"]));
 const isActive = computed(() => !isTerminal.value);
 const canStop = computed(() => isActive.value && hasTemporal.value);
 const canResume = computed(() => {
-  const failed = apiStatusRaw.value ? apiStatusRaw.value === "failed" : props.run.status === "failed";
-  return failed && hasTemporal.value;
+  return acceptsResume(apiStatusRaw.value || props.run.apiStatus, props.run.status) && hasTemporal.value;
 });
 const hasActions = computed(() => canStop.value || canResume.value);
 const armed = ref(null);

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

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, onMounted } from "vue";
-import * as Lucide from "lucide-vue-next";
+import { nodeIcon } from "../../data/nodeIcons";
 import { triggerGlyph } from "../../data/triggerGlyphs";
 import { findManifest, NODE_CATEGORIES, TRIGGER_TEMPLATES } from "../../data/integrationNodeCatalog";
 import { resolveLocalized } from "../../utils/localize";
@@ -64,7 +64,7 @@ const boxes = computed(() => {
       label: manifest ? resolveLocalized(manifest.name) : prettify(n.nodeSlug),
       subtitle: groups[groups.length - 1] ?? "",
       manifest,
-      icon: iconFor(manifest?.icon),
+      icon: nodeIcon(manifest?.icon),
       categoryColor: NODE_CATEGORIES.find((c) => c.key === manifest?.category)?.color ?? "bg-muted text-foreground"
     });
   });
@@ -74,11 +74,6 @@ function prettify(slug) {
   const tail = slug.includes(":") ? slug.split(":").pop() : slug;
   return tail.split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join(" ");
 }
-function iconFor(name) {
-  if (!name) return Lucide.Box;
-  const cleaned = (name.includes(":") ? name.split(":").pop() : name).split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join("");
-  return Lucide[cleaned] || Lucide.Box;
-}
 function stepPath(x1, y1, x2, y2) {
   if (y1 === y2) return `M ${x1} ${y1} L ${x2} ${y2}`;
   if (x2 - x1 >= 48) {

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

@@ -11,6 +11,8 @@ type __VLS_Props = {
     targetIsTrigger?: boolean;
     /** Busy flag for the Run item. */
     runBusy?: boolean;
+    /** The workflow has unsaved work, so the Run item saves it first — and says so. */
+    runSaves?: boolean;
 };
 declare var __VLS_14: {};
 type __VLS_Slots = {} & {

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

@@ -16,7 +16,8 @@ const props = defineProps({
   selectionCount: { type: Number, required: true },
   totalNodes: { type: Number, required: true },
   targetIsTrigger: { type: Boolean, required: false },
-  runBusy: { type: Boolean, required: false }
+  runBusy: { type: Boolean, required: false },
+  runSaves: { type: Boolean, required: false }
 });
 const emit = defineEmits(["action", "update:open"]);
 const t = useIntegrationsT();
@@ -33,7 +34,7 @@ const sections = computed(() => {
         { id: "duplicate", label: t("integration.canvas.contextMenu.item.duplicate"), shortcut: primaryShortcut("duplicate"), disabled: props.targetIsTrigger }
       ],
       [
-        { id: "run", label: t("integration.canvas.contextMenu.item.runWorkflow"), shortcut: primaryShortcut("run"), disabled: props.runBusy },
+        { id: "run", label: t(props.runSaves ? "integration.canvas.contextMenu.item.saveAndRunWorkflow" : "integration.canvas.contextMenu.item.runWorkflow"), shortcut: primaryShortcut("run"), disabled: props.runBusy },
         { id: "tidy-up", label: t("integration.canvas.contextMenu.item.tidyUp"), shortcut: primaryShortcut("tidyUp") }
       ],
       [

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

@@ -11,6 +11,8 @@ type __VLS_Props = {
     targetIsTrigger?: boolean;
     /** Busy flag for the Run item. */
     runBusy?: boolean;
+    /** The workflow has unsaved work, so the Run item saves it first — and says so. */
+    runSaves?: boolean;
 };
 declare var __VLS_14: {};
 type __VLS_Slots = {} & {

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

@@ -161,8 +161,13 @@ async function installed(id) {
       <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">{{ t("integration.workflows.create.field.name.label") }}</Label>
-          <Input id="wf-name" v-model="name" :placeholder="t('integration.workflows.create.field.name.placeholder')" class="bg-white" />
+          <!-- The asterisk sits beside the label, not in it: it is for the eye,
+               aria-required says it to everyone else, and the field's name stays "Name". -->
+          <div class="flex items-center">
+            <Label for="wf-name">{{ t("integration.workflows.create.field.name.label") }}</Label>
+            <span class="text-sm text-rose-500" aria-hidden="true" :title="t('integration.nodeConfig.field.requiredMark')">&nbsp;*</span>
+          </div>
+          <Input id="wf-name" v-model="name" aria-required="true" class="bg-white" />
         </div>
 
         <div class="grid grid-cols-[130px_1fr] items-start gap-x-4">
@@ -171,7 +176,6 @@ async function installed(id) {
             id="wf-desc"
             v-model="description"
             rows="2"
-            :placeholder="t('integration.workflows.create.field.description.placeholder')"
             class="bg-white"
           />
         </div>

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

@@ -20,10 +20,13 @@ type __VLS_Props = {
      * keystrokes.
      */
     draft?: WorkflowBlob | null;
-    /** Busy flag for the control-pane Play button (a run is being triggered). */
+    /** A run is being triggered — the context menu's Run item and the shortcut stand down. */
     runBusy?: boolean;
-    /** The run is queued behind a bundle build — busy, but worth saying why. */
-    runWaiting?: boolean;
+    /**
+     * The workflow has unsaved work, so Run saves it first. Only the context menu
+     * reads it, to say so: Run itself stands in the page header, beside Save.
+     */
+    runSaves?: boolean;
     /**
      * One of the page's own lightboxes is open above the editor (settings,
      * duplicate, run payload, the sync response, the deactivation prompt). The

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

@@ -13,10 +13,8 @@ import { MiniMap } from "@vue-flow/minimap";
 import {
   Widget as LayoutGrid,
   MagicStick as Sparkles,
-  Play,
   MinusCircle as ZoomOut,
-  AddCircle as ZoomIn,
-  RefreshCircle as Loader2
+  AddCircle as ZoomIn
 } from "#solar-icons";
 import {
   Dialog,
@@ -65,7 +63,7 @@ const props = defineProps({
   workflow: { type: Object, required: true },
   draft: { type: [Object, null], required: false },
   runBusy: { type: Boolean, required: false },
-  runWaiting: { type: Boolean, required: false },
+  runSaves: { type: Boolean, required: false },
   overlayOpen: { type: Boolean, required: false }
 });
 const emit = defineEmits(["change", "run", "toggleActive", "openSettings"]);
@@ -1420,6 +1418,7 @@ const edgeTypes = {
         :total-nodes="vfNodes.length"
         :target-is-trigger="!!menu.targetId && blob.triggers.some((t2) => t2.id === menu.targetId)"
         :run-busy="runBusy"
+        :run-saves="runSaves"
         @action="onMenuAction"
       >
         <!-- `pan-activation-key-code` is null rather than left at its default, which
@@ -1695,25 +1694,6 @@ const edgeTypes = {
         <TooltipProvider :delay-duration="250">
           <div class="rounded-lg border border-gray-400/10 outline-1 outline-white/30 backdrop-blur-sm">
             <div class="flex items-center gap-0.5 whitespace-nowrap border border-white bg-white rounded-lg bg-gradient-to-br from-white via-violet-50/40 to-white px-2 py-1">
-              <!-- Smart Run: the page decides what "run" means — a workflow that
-               consumes trigger.payload, or leaves the mode to the caller, opens
-               the run dialog; one that asks neither fires immediately. One
-               button either way. -->
-              <IntegrationsEditorTip :label="runWaiting ? t('integration.editor.tool.run.tooltipWaiting') : t('integration.editor.tool.run.tooltip')" :shortcut="primaryShortcut('run')">
-                <button
-                  type="button"
-                  class="relative flex h-8 items-center gap-1.5 rounded-lg bg-gradient-to-b from-emerald-500 to-emerald-600 px-3.5 text-sm font-medium text-white transition after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:shadow-[inset_0_1px_0_rgba(255,255,255,0.3),inset_0_-2px_0_rgba(0,0,0,0.25)] hover:from-emerald-600 hover:to-emerald-600 active:translate-y-px disabled:opacity-60"
-                  :disabled="runBusy"
-                  @click="emit('run')"
-                >
-                  <Loader2 v-if="runBusy" :size="14" class="animate-spin" />
-                  <Play v-else :size="14" />
-                  {{ runWaiting ? t("integration.editor.run.waitingForBuild") : t("integration.editor.run.button") }}
-                </button>
-              </IntegrationsEditorTip>
-
-              <div class="mx-1 h-5 w-px bg-black/10" />
-
               <div class="flex items-center gap-0.5 rounded-lg bg-black/[0.05] p-0.5 shadow-[inset_0_1px_2px_rgba(15,23,42,0.12)]">
                 <!-- Icon-only, and the tooltip is not an accessible name: each one
                says what it does itself, and whether it is the active mode. -->

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

@@ -20,10 +20,13 @@ type __VLS_Props = {
      * keystrokes.
      */
     draft?: WorkflowBlob | null;
-    /** Busy flag for the control-pane Play button (a run is being triggered). */
+    /** A run is being triggered — the context menu's Run item and the shortcut stand down. */
     runBusy?: boolean;
-    /** The run is queued behind a bundle build — busy, but worth saying why. */
-    runWaiting?: boolean;
+    /**
+     * The workflow has unsaved work, so Run saves it first. Only the context menu
+     * reads it, to say so: Run itself stands in the page header, beside Save.
+     */
+    runSaves?: boolean;
     /**
      * One of the page's own lightboxes is open above the editor (settings,
      * duplicate, run payload, the sync response, the deactivation prompt). The

package/dist/runtime/composables/useIntegrationsRuns.js

@@ -49,6 +49,9 @@ export function useIntegrationsRuns() {
       workflowId: r.workflow_id,
       workflowName: r.workflow_name ?? workflowName,
       status: mapRunStatus(r.status),
+      // Kept beside the mapped word, because the mapping folds `terminated` into
+      // `failed` and the platform resumes only the literal `failed` (PO-355).
+      apiStatus: r.status,
       temporalRunId: r.temporal_run_id ?? null,
       triggerId: r.trigger_handle ?? "",
       // The platform reports what started the run. This was hardcoded to

package/dist/runtime/data/nodeIcons.d.ts

@@ -1,11 +1,14 @@
 /**
  * Node manifest icon → Lucide component.
  *
- * Authors declare icons as `mdi:*` names (the node SDK's convention), but the
- * studio renders Lucide. The naive PascalCase lookup almost never hits a
- * Lucide export, so every node degraded to the generic Box. This curated map
- * covers the registry's actual vocabulary; unmapped names still try the
- * PascalCase lookup before falling back to Box.
+ * Node icons are the studio's one deliberate Lucide exception (`docs/icons.md`):
+ * a package declares `lucide:<kebab-name>`, and that name is drawn as declared —
+ * no table, no studio change for a new package (PO-566).
+ *
+ * `MDI_TO_LUCIDE` is for packages still published with `mdi:*` names, the
+ * convention before PO-566. It is frozen: a missing name is fixed by the package
+ * declaring its Lucide name, not by a new entry here. Unmapped names still try
+ * the PascalCase lookup before falling back to Box.
  *
  * Exported for its test, which checks every entry against Lucide's exports: a
  * test that found the entries by reading this file's text stopped seeing every

package/dist/runtime/data/nodeIcons.js

@@ -24,6 +24,7 @@ export const MDI_TO_LUCIDE = {
   "code-brackets": "Brackets",
   "code-json": "Braces",
   "code-tags": "Code",
+  "comment-text-outline": "MessageSquareText",
   "compare-horizontal": "ArrowLeftRight",
   "content-duplicate": "Copy",
   "currency-eur": "Euro",
@@ -51,6 +52,7 @@ export const MDI_TO_LUCIDE = {
   filter: "Filter",
   "find-replace": "Replace",
   "folder-download-outline": "FolderDown",
+  "folder-outline": "Folder",
   "folder-plus-outline": "FolderPlus",
   "folder-search-outline": "FolderSearch",
   "folder-upload-outline": "FolderUp",
@@ -93,6 +95,8 @@ export const MDI_TO_LUCIDE = {
   "tag-multiple-outline": "Tags",
   "tag-plus-outline": "Tag",
   telegram: "Send",
+  "ticket-confirmation-outline": "TicketPlus",
+  "ticket-outline": "Ticket",
   "timeline-text-outline": "Activity",
   transfer: "ArrowRightLeft",
   translate: "Languages",
@@ -107,7 +111,7 @@ export const MDI_TO_LUCIDE = {
 export function nodeIcon(name) {
   if (!name) return Lucide.Box;
   const bare = name.includes(":") ? name.split(":").pop() : name;
-  const mapped = MDI_TO_LUCIDE[bare];
+  const mapped = name.startsWith("lucide:") ? void 0 : MDI_TO_LUCIDE[bare];
   if (mapped && Lucide[mapped]) {
     return Lucide[mapped];
   }

package/dist/runtime/i18n/messages/de.json

@@ -53,6 +53,7 @@
   "integration.canvas.contextMenu.item.paste": "Einfügen",
   "integration.canvas.contextMenu.item.rename": "Umbenennen",
   "integration.canvas.contextMenu.item.runWorkflow": "Workflow ausführen",
+  "integration.canvas.contextMenu.item.saveAndRunWorkflow": "Speichern & Workflow ausführen",
   "integration.canvas.contextMenu.item.selectAll": "Alle auswählen",
   "integration.canvas.contextMenu.item.tidyUp": "Aufräumen",
   "integration.canvas.edge.action.delete": "Verbindung löschen",
@@ -439,6 +440,7 @@
   "integration.editor.run.error.syncFailed": "Synchroner Run fehlgeschlagen",
   "integration.editor.run.error.syncTimeout": "Synchroner Run: Zeitüberschreitung",
   "integration.editor.run.loading": "Run wird geladen…",
+  "integration.editor.run.saveAndRun": "Speichern & Run",
   "integration.editor.run.waitingForBuild": "Warten auf Build…",
   "integration.editor.runPayload.action.latestEvent": "Letztes reales Event",
   "integration.editor.runPayload.action.latestEvent.title": "Letztes empfangenes Event dieses Topics einfügen",
@@ -1201,11 +1203,9 @@
   "integration.workflows.create.executionMode.syncOnly.hint": "Wartet auf das Ergebnis.",
   "integration.workflows.create.executionMode.syncOnly.label": "Nur synchron",
   "integration.workflows.create.field.description.label": "Beschreibung",
-  "integration.workflows.create.field.description.placeholder": "Optional: Was dieser Workflow macht und warum es ihn gibt.",
   "integration.workflows.create.field.executionMode.label": "Ausführungsmodus",
   "integration.workflows.create.field.icon.label": "Symbol",
   "integration.workflows.create.field.name.label": "Name",
-  "integration.workflows.create.field.name.placeholder": "Nächtliche Bestellsynchronisierung",
   "integration.workflows.create.field.tags.label": "Tags",
   "integration.workflows.create.field.trigger.label": "Trigger",
   "integration.workflows.create.tab.blank": "Leer starten",

package/dist/runtime/i18n/messages/en.json

@@ -53,6 +53,7 @@
   "integration.canvas.contextMenu.item.paste": "Paste",
   "integration.canvas.contextMenu.item.rename": "Rename",
   "integration.canvas.contextMenu.item.runWorkflow": "Run workflow",
+  "integration.canvas.contextMenu.item.saveAndRunWorkflow": "Save & run workflow",
   "integration.canvas.contextMenu.item.selectAll": "Select all",
   "integration.canvas.contextMenu.item.tidyUp": "Tidy up",
   "integration.canvas.edge.action.delete": "Delete this connection",
@@ -439,6 +440,7 @@
   "integration.editor.run.error.syncFailed": "Sync run failed",
   "integration.editor.run.error.syncTimeout": "Sync run timed out",
   "integration.editor.run.loading": "Loading run…",
+  "integration.editor.run.saveAndRun": "Save & run",
   "integration.editor.run.waitingForBuild": "Waiting for build…",
   "integration.editor.runPayload.action.latestEvent": "Latest real event",
   "integration.editor.runPayload.action.latestEvent.title": "Insert the latest received event of this topic",
@@ -1201,11 +1203,9 @@
   "integration.workflows.create.executionMode.syncOnly.hint": "Waits for the result.",
   "integration.workflows.create.executionMode.syncOnly.label": "Sync only",
   "integration.workflows.create.field.description.label": "Description",
-  "integration.workflows.create.field.description.placeholder": "Optional: what this workflow does and why it exists.",
   "integration.workflows.create.field.executionMode.label": "Execution mode",
   "integration.workflows.create.field.icon.label": "Icon",
   "integration.workflows.create.field.name.label": "Name",
-  "integration.workflows.create.field.name.placeholder": "Sync orders nightly",
   "integration.workflows.create.field.tags.label": "Tags",
   "integration.workflows.create.field.trigger.label": "Trigger",
   "integration.workflows.create.tab.blank": "Start blank",

package/dist/runtime/pages/integrations/credentials.vue

@@ -35,6 +35,7 @@ import { apiRefusal, errorReason } from "../../utils/apiError";
 import { CREDENTIAL_STATES, credentialState, credentialStateLabel, providerStepWord } from "../../utils/credentialState";
 import { hasRevenexxSource } from "../../utils/revenexxCredentialSource";
 import { resolveLocalized } from "../../utils/localize";
+import { fromModelValue, toItemValue, toModelValue } from "../../utils/selectOptions";
 const t = useIntegrationsT();
 useHead({ title: () => t("integration.credentials.list.head.title") });
 const { credentials, loading, error, load, create, update, remove, testInline, test, oauthAuthorizeUrl } = useIntegrationsCredentials();
@@ -422,14 +423,14 @@ async function confirmDelete() {
             <!-- select -->
             <Select
               v-else-if="f.type === 'select'"
-              :model-value="form.config[f.key] ?? ''"
-              @update:model-value="(v) => form.config[f.key] = v"
+              :model-value="toModelValue(form.config[f.key], f.options)"
+              @update:model-value="(v) => form.config[f.key] = fromModelValue(v)"
             >
               <SelectTrigger :id="`cred-field-${f.key}`" class="bg-white" v-bind="configFieldAria(f.key)">
                 <SelectValue :placeholder="t('integration.credentials.shared.field.select.placeholder')" />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem v-for="opt in f.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
+                <SelectItem v-for="opt in f.options ?? []" :key="String(opt.value)" :value="toItemValue(opt.value)">
                   {{ resolveLocalized(opt.label) }}
                 </SelectItem>
               </SelectContent>

package/dist/runtime/pages/integrations/templates/[slug].vue

@@ -1,6 +1,5 @@
 <script setup>
 import { computed, ref } from "vue";
-import { marked } from "marked";
 import { AltArrowRight as Chevron, CheckCircle as CheckCircle2, Key, RefreshCircle as Loader2, Shield as ShieldAlert, User } from "#solar-icons";
 import { triggerGlyph as glyphForTrigger } from "../../../data/triggerGlyphs";
 import {
@@ -18,6 +17,7 @@ import LoadingAnnouncement from "../../../components/Integrations/LoadingAnnounc
 import NodeMark from "../../../components/Integrations/NodeMark.vue";
 import { templateCategoryLabel, templatePackageLabel } from "../../../data/integrationTemplates";
 import { describeCron } from "../../../utils/schedule";
+import { renderTemplateDescription } from "../../../utils/templateDescription";
 const t = useIntegrationsT();
 const route = useRoute();
 const router = useRouter();
@@ -34,12 +34,7 @@ onMounted(async () => {
   await Promise.all([fetchDetail(slug.value), loadNodeCatalog(), loadCredentials(), loadSecrets()]);
   reqs.value = await requirements(slug.value);
 });
-const descriptionHtml = computed(() => {
-  const md = tpl.value?.descriptionMd ?? "";
-  if (!md.trim()) return "";
-  const withoutH1 = md.replace(/^#\s[^\n]*\n+/, "");
-  return marked.parse(withoutH1);
-});
+const descriptionHtml = computed(() => renderTemplateDescription(tpl.value?.descriptionMd));
 const steps = computed(() => {
   const blob = tpl.value?.blob;
   if (!blob?.nodes.length) return [];
@@ -221,10 +216,12 @@ function levelDot(level) {
               class="rounded-lg border border-black/[0.06] bg-white p-4"
             >
               <h3 id="tpl-about-heading" class="text-sm font-semibold mb-2">{{ t("integration.templates.detail.about.title") }}</h3>
+              <!-- eslint-disable vue/no-v-html -- renderTemplateDescription sanitises marked's output with DOMPurify (PO-524) -->
               <div
                 class="text-sm leading-relaxed text-foreground/90 space-y-2 [&_h1]:text-sm [&_h1]:font-semibold [&_h2]:text-sm [&_h2]:font-semibold [&_h3]:text-sm [&_h3]:font-semibold [&_ol]:list-decimal [&_ol]:pl-5 [&_ul]:list-disc [&_ul]:pl-5 [&_li]:mt-1 [&_code]:rounded [&_code]:bg-slate-100 [&_code]:px-1 [&_code]:py-px [&_code]:font-mono [&_code]:text-[13px] [&_a]:text-primary [&_a]:underline [&_strong]:font-semibold"
                 v-html="descriptionHtml"
               />
+              <!-- eslint-enable vue/no-v-html -->
             </div>
 
             <!-- Step by step, humanized from the actual nodes -->

package/dist/runtime/pages/integrations/workflows/[id].vue

@@ -400,7 +400,11 @@ async function run(mode) {
 }
 const payloadDriven = computed(() => payloadFieldsFromBlob(shownBlob.value ?? { nodes: [] }).length > 0);
 async function runFromEditor() {
-  if (!workflow.value) return;
+  if (!workflow.value || saving.value) return;
+  if (isDirty.value) {
+    await save();
+    if (isDirty.value) return;
+  }
   if (payloadDriven.value || workflow.value.execution_mode === "caller_decides") {
     runPayloadOpen.value = true;
     return;
@@ -817,14 +821,12 @@ async function confirmDeactivate() {
                   <WorkflowIconView :icon="shownIcon" :size="16" />
                 </span>
                 <span class="truncate" :title="shownName">{{ shownName }}</span>
-                <!-- The SAVED mode, beside a drafted name, and the difference is not an
-                   oversight. A name changes nothing about what happens when Run is
-                   pressed, so the header may show what the operator just entered. The
-                   dispatch mode decides what a run does — and a run goes to the
-                   workflow the platform holds, not to the draft. A badge following the
-                   draft would read SYNC over a button that fires an async run. -->
-                <Badge variant="outline" class="ml-1.5 shrink-0 border text-xs font-medium uppercase text-muted-foreground" :title="t('integration.editor.header.executionMode.title', { mode: modeLabel(workflow.execution_mode) })">
-                  {{ modeLabel(workflow.execution_mode) }}
+                <!-- The DRAFTED mode, like the name beside it: Run over a draft saves
+                   it first (PO-567), so this is the mode the next run goes out in. The
+                   saved one would read ASYNC over a button about to fire a sync run;
+                   the unsaved marker says the platform does not have it yet. -->
+                <Badge variant="outline" class="ml-1.5 shrink-0 border text-xs font-medium uppercase text-muted-foreground" :title="t('integration.editor.header.executionMode.title', { mode: modeLabel(draftedMode) })">
+                  {{ modeLabel(draftedMode) }}
                 </Badge>
               </template>
             </span>
@@ -927,8 +929,23 @@ async function confirmDeactivate() {
                 <Save v-else :size="12" />
                 {{ saving ? t("integration.editor.action.save.saving") : t("integration.editor.action.save.label") }}
               </Button>
+              <!-- Run stands beside Save because a run goes to the workflow the
+                 platform holds, not to the draft on the canvas: with the two at
+                 opposite ends of the screen, a changed value was run as the old one
+                 and nothing said so. While there is a draft the press saves it first,
+                 and the name says that it will (PO-567). -->
+              <Button
+                class="h-7 bg-emerald-600 text-sm text-white hover:bg-emerald-700"
+                :disabled="saving || running || syncLoading || waitingForBuild"
+                :title="waitingForBuild ? t('integration.editor.tool.run.tooltipWaiting') : t('integration.editor.tool.run.tooltip')"
+                @click="runFromEditor"
+              >
+                <Loader2 v-if="running || syncLoading || waitingForBuild" :size="12" class="animate-spin" />
+                <Play v-else :size="12" />
+                {{ waitingForBuild ? t("integration.editor.run.waitingForBuild") : isDirty ? t("integration.editor.run.saveAndRun") : t("integration.editor.run.button") }}
+              </Button>
               <!-- Activation is a standing state, not a transport control. The play
-                 symbol belongs to Run, 600 px away in the canvas's control pane,
+                 symbol belongs to Run, the button just before this one,
                  where pressing it makes one thing happen now; arming a workflow's
                  triggers looks like nothing happening at all. So this states the
                  state in the words the workflows list uses — Active, Paused — and
@@ -1064,8 +1081,8 @@ async function confirmDeactivate() {
             ref="editorRef"
             :workflow="workflow"
             :draft="draft?.blob ?? null"
-            :run-busy="running || syncLoading || waitingForBuild"
-            :run-waiting="waitingForBuild"
+            :run-busy="saving || running || syncLoading || waitingForBuild"
+            :run-saves="isDirty"
             :overlay-open="settingsOpen || duplicateOpen || importOpen || !!exporter?.open || deleteOpen || syncOpen || runPayloadOpen || deactivationOpen || leaveOpen"
             @change="onChange"
             @run="runFromEditor"

package/dist/runtime/types/integrations.d.ts

@@ -695,6 +695,12 @@ export interface WorkflowRun {
     workflowId: number;
     workflowName: string;
     status: RunStatus;
+    /**
+     * The platform's own status word, as it sent it (`failed`, `terminated`, …).
+     * For deciding what the platform will accept (`acceptsResume`), never for
+     * drawing the outcome — that is `status`, which folds several of these into one.
+     */
+    apiStatus?: string;
     /** Temporal run id for this execution; null when the row predates Temporal. */
     temporalRunId?: string | null;
     triggerId: string;

package/dist/runtime/utils/runFeedQuery.d.ts

@@ -47,6 +47,20 @@ export declare const API_RUN_STATUSES: readonly ["pending", "running", "complete
  * are deliberate, and only the table is shared.
  */
 export declare function mapRunStatus(status: string): RunStatus;
+/**
+ * Would the platform accept a resume of this run? Its own status word decides,
+ * not the studio's.
+ *
+ * `mapRunStatus` folds `terminated` into the studio's `failed`, which is right for
+ * the outcome a row draws and wrong for this question: the platform resumes only a
+ * run whose stored status is literally `failed`, and answers a terminated one with
+ * a 409 (PO-355). So the platform's word is read where it is known, and the
+ * studio's only as the fallback for a run that arrived without one.
+ *
+ * Whether there is an execution to resume from is a separate condition, which each
+ * caller already asks in its own terms (specs/run-row.md AC-12).
+ */
+export declare function acceptsResume(apiStatus: string | null | undefined, status: RunStatus): boolean;
 /**
  * The platform statuses behind the studio's words.
  *

package/dist/runtime/utils/runFeedQuery.js

@@ -11,6 +11,9 @@ export function mapRunStatus(status) {
   const word = normalisedRunStatus(status);
   return isRunStatusWord(word) ? word : "failed";
 }
+export function acceptsResume(apiStatus, status) {
+  return apiStatus ? apiStatus === "failed" : status === "failed";
+}
 export function apiStatusesFor(words) {
   if (!words.length) return [];
   return API_RUN_STATUSES.filter((status) => words.includes(mapRunStatus(status)));

package/dist/runtime/utils/templateDescription.d.ts

@@ -0,0 +1 @@
+export declare function renderTemplateDescription(md: string | null | undefined): string;

package/dist/runtime/utils/templateDescription.js

@@ -0,0 +1,38 @@
+import DOMPurify from "dompurify";
+import { marked } from "marked";
+const ALLOWED_TAGS = [
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "p",
+  "br",
+  "hr",
+  "strong",
+  "em",
+  "del",
+  "code",
+  "pre",
+  "blockquote",
+  "ul",
+  "ol",
+  "li",
+  "table",
+  "thead",
+  "tbody",
+  "tr",
+  "th",
+  "td",
+  "a",
+  "img"
+];
+const ALLOWED_ATTR = ["href", "title", "src", "alt", "align", "start"];
+export function renderTemplateDescription(md) {
+  if (!md?.trim()) return "";
+  if (!DOMPurify.isSupported) return "";
+  const withoutH1 = md.replace(/^#\s[^\n]*\n+/, "");
+  const html = marked.parse(withoutH1, { async: false });
+  return DOMPurify.sanitize(html, { ALLOWED_TAGS, ALLOWED_ATTR });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revenexx/studio-integrations",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "type": "module",
   "description": "Integration Studio (core: workflows, node editor, runs, schedules, credentials, secrets, audit) as a standalone, publishable Nuxt module.",
   "repository": {
@@ -29,6 +29,7 @@
     "@revenexx/studio-shared": "^0.3.2",
     "@solar-icons/nuxt": "^1.2.0",
     "@solar-icons/vue": "^1.2.0",
+    "dompurify": "^3.4.16",
     "marked": "^18.0.5"
   },
   "peerDependencies": {