@revenexx/studio-integrations 0.7.0 → 1.1.0

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

@@ -1,8 +1,9 @@
 <script setup>
 import { computed, ref, watch } from "vue";
+import { AltArrowLeft as ArrowLeft, Bolt as Zap, Magnifier as Search } from "#solar-icons";
+import { triggerGlyph } from "../../data/triggerGlyphs";
 import * as Lucide from "lucide-vue-next";
 import { INTEGRATION_NODE_CATALOG, NODE_CATEGORIES, TRIGGER_TEMPLATES } from "../../data/integrationNodeCatalog";
-import { nodeIcon } from "../../data/nodeIcons";
 import { resolveLocalized } from "../../utils/localize";
 const { load: loadNodes } = useIntegrationsNodes();
 onMounted(() => {
@@ -13,7 +14,6 @@ const emit = defineEmits(["insert"]);
 const search = ref("");
 const searchInput = ref(null);
 defineExpose({ focusSearch: () => searchInput.value?.focus() });
-const iconFor = nodeIcon;
 const CORE_GROUP_BY_CATEGORY = {
   control: "Flow",
   transform: "Data",
@@ -76,11 +76,14 @@ function isIntegration(m) {
 function makeGroup(label) {
   return { label, children: /* @__PURE__ */ new Map(), leaves: [], count: 0 };
 }
+function isExecutable(m) {
+  return m.__hasBundle !== false;
+}
 const latestManifests = computed(() => {
   const seen = /* @__PURE__ */ new Set();
   const out = [];
   for (const m of INTEGRATION_NODE_CATALOG) {
-    if (seen.has(m.slug)) continue;
+    if (seen.has(m.slug) || !isExecutable(m)) continue;
     seen.add(m.slug);
     out.push(m);
   }
@@ -89,6 +92,7 @@ const latestManifests = computed(() => {
 const versionsBySlug = computed(() => {
   const map = /* @__PURE__ */ new Map();
   for (const m of INTEGRATION_NODE_CATALOG) {
+    if (!isExecutable(m)) continue;
     const list = map.get(m.slug);
     if (list) list.push(m);
     else map.set(m.slug, [m]);
@@ -282,14 +286,14 @@ const searching = computed(() => search.value.trim().length > 0);
           :title="t('integration.canvas.palette.action.back')"
           @click="popLevel"
         >
-          <Lucide.ArrowLeft :size="14" />
+          <ArrowLeft :size="14" />
         </button>
         <div class="min-w-0 flex-1 truncate text-mono text-muted-foreground">
           {{ levelTitle }}
         </div>
       </div>
       <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
           ref="searchInput"
           v-model="search"
@@ -333,7 +337,7 @@ const searching = computed(() => search.value.trim().length > 0);
                 @click="insertTrigger(tpl)"
               >
                 <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600">
-                  <component :is="iconFor(tpl.icon)" :size="13" />
+                  <component :is="triggerGlyph(tpl.type)" :size="13" />
                 </span>
                 <div class="min-w-0">
                   <div class="truncate text-sm font-medium">{{ resolveLocalized(tpl.name) }}</div>
@@ -397,7 +401,7 @@ const searching = computed(() => search.value.trim().length > 0);
               @click="insertTrigger(tpl)"
             >
               <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600">
-                <component :is="iconFor(tpl.icon)" :size="13" />
+                <component :is="triggerGlyph(tpl.type)" :size="13" />
               </span>
               <div class="min-w-0">
                 <div class="truncate text-sm font-medium">{{ resolveLocalized(tpl.name) }}</div>
@@ -417,7 +421,7 @@ const searching = computed(() => search.value.trim().length > 0);
                 @click="pushPath(['__triggers'])"
               >
                 <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-slate-100 text-emerald-600/80">
-                  <Lucide.Zap :size="13" />
+                  <Zap :size="13" />
                 </span>
                 <span class="min-w-0 flex-1 truncate text-sm font-medium">{{ t("integration.canvas.palette.group.triggers") }}</span>
                 <span class="text-sm tabular-nums text-muted-foreground">{{ TRIGGER_TEMPLATES.length }}</span>

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

@@ -2,7 +2,7 @@
 import { computed, onUnmounted, ref, watch } from "vue";
 import { Download as DownloadIcon, RefreshCircle as RefreshIcon } from "#solar-icons";
 import { Badge, Button, Dialog, DialogContent, DialogHeader, DialogTitle } from "@revenexx/studio";
-import { runStatusLabel, statusClass } from "../../utils/statusStyle";
+import { runStatusClass, runStatusLabel } from "../../utils/statusStyle";
 import { IntegrationsApiError } from "../../utils/apiError";
 import { createPollBudget, SAFETY_POLL_MS } from "../../utils/pollBudget";
 const props = defineProps({
@@ -270,9 +270,12 @@ function timelineBarClass(row) {
   }
 }
 const timelineDetail = ref(null);
+function timelineRowStatusWord(row) {
+  if (row.durationMs == null) return "running";
+  return row.ok ? "succeeded" : "failed";
+}
 function timelineRowStatus(row) {
-  if (row.durationMs == null) return t("integration.runs.status.running");
-  return t(row.ok ? "integration.runs.status.succeeded" : "integration.runs.status.failed");
+  return runStatusLabel(timelineRowStatusWord(row));
 }
 function fmtClock(ms) {
   try {
@@ -583,7 +586,7 @@ async function confirmAction() {
           <div>
             <div class="text-[10px] uppercase tracking-wide text-muted-foreground">{{ t("integration.runs.detail.field.status") }}</div>
             <div class="mt-0.5">
-              <Badge variant="outline" :class="['border text-xs font-medium uppercase', statusClass(dStatus ?? run.status)]">
+              <Badge variant="outline" :class="['border text-xs font-medium uppercase', runStatusClass(dStatus ?? run.status)]">
                 {{ runStatusLabel(dStatus ?? run.status) }}
               </Badge>
             </div>
@@ -699,7 +702,7 @@ async function confirmAction() {
               class="w-full flex items-center gap-3 px-3 py-2 text-left"
               @click="toggleStep(i)"
             >
-              <Badge variant="outline" :class="['border text-xs font-medium uppercase shrink-0', statusClass(st.status)]">{{ runStatusLabel(st.status) }}</Badge>
+              <Badge variant="outline" :class="['border text-xs font-medium uppercase shrink-0', runStatusClass(st.status)]">{{ runStatusLabel(st.status) }}</Badge>
               <div class="min-w-0 flex-1">
                 <div class="font-mono text-xs truncate">{{ st.node_slug || st.node_id }}</div>
                 <div class="text-[10px] text-muted-foreground truncate">
@@ -802,7 +805,7 @@ async function confirmAction() {
             <Badge
               v-if="timelineDetail"
               variant="outline"
-              :class="['border text-xs font-medium uppercase', statusClass(timelineRowStatus(timelineDetail))]"
+              :class="['border text-xs font-medium uppercase', runStatusClass(timelineRowStatusWord(timelineDetail))]"
             >{{ timelineRowStatus(timelineDetail) }}</Badge>
             <span v-if="timelineDetail" class="text-sm tabular-nums text-muted-foreground">{{ fmtMs(timelineDetail.durationMs) }}</span>
           </DialogTitle>

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

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from "vue";
 import { Badge } from "@revenexx/studio";
-import { RUN_STATUS_WORDS, normalisedRunStatus, runStatusLabel, statusClass } from "../../utils/statusStyle";
+import { RUN_STATUS_WORDS, normalisedRunStatus, runStatusClass, runStatusLabel } from "../../utils/statusStyle";
 import { TRIGGER_TYPE_WORDS, triggerTypeLabel } from "../../data/integrationNodeCatalog";
 const props = defineProps({
   runs: { type: Array, required: true },
@@ -99,7 +99,7 @@ const columns = computed(() => [
     @row-click="(r) => openRun(r)"
   >
     <template #cell-status="{ row: run }">
-      <Badge variant="outline" :class="['border text-xs font-medium uppercase', statusClass(run.status)]">
+      <Badge variant="outline" :class="['border text-xs font-medium uppercase', runStatusClass(run.status)]">
         {{ runStatusLabel(run.status) }}
       </Badge>
     </template>

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

@@ -100,24 +100,58 @@ function onHoverLeave() {
 }
 const toolbarVisible = computed(() => editable.value && !editing.value && (hovered.value || !!props.selected));
 function escapeHtml(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 function inline(s) {
   return s.replace(/`([^`\n]+)`/g, '<code class="rounded bg-black/[0.07] px-1 py-px font-mono text-[0.85em]">$1</code>').replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" class="font-medium underline decoration-current/40 underline-offset-2 hover:decoration-current">$1</a>').replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>").replace(/(^|[^*])\*([^*\n]+)\*(?!\*)/g, "$1<em>$2</em>");
 }
+const NOTE_HEADINGS = [
+  { tag: "h2", cls: "m-0 text-base font-semibold" },
+  { tag: "h3", cls: "m-0 text-sm font-semibold" },
+  { tag: "h4", cls: "m-0 text-sm font-medium" }
+];
+const HEADING_RE = /^(#{1,3})\s+(.+)$/;
+const UL_RE = /^[-*]\s+(.+)$/;
+const OL_RE = /^(\d+)\.\s+(.+)$/;
+function renderList(tag, items) {
+  const li = items.map(({ marker, text }) => {
+    const numeric = tag === "ol" ? " tabular-nums" : "";
+    const hidden = tag === "ul" ? ' aria-hidden="true"' : "";
+    const ordinal = tag === "ol" ? ` value="${Number.parseInt(marker, 10)}"` : "";
+    return `<li${ordinal} class="flex gap-1.5"><span${hidden} class="select-none${numeric}">${marker}</span><span class="min-w-0">${text}</span></li>`;
+  }).join("");
+  return `<${tag} role="list" class="m-0 list-none p-0 pl-1">${li}</${tag}>`;
+}
 function renderMarkdownLite(src) {
-  return escapeHtml(src).split("\n").map((line) => {
-    const h = /^(#{1,3})\s+(.+)$/.exec(line);
+  const lines = escapeHtml(src).split("\n");
+  const out = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i] ?? "";
+    const h = HEADING_RE.exec(line);
     if (h) {
-      const cls = h[1].length === 1 ? "text-base font-semibold" : h[1].length === 2 ? "text-sm font-semibold" : "text-sm font-medium";
-      return `<div class="${cls}">${inline(h[2])}</div>`;
+      const { tag, cls } = NOTE_HEADINGS[(h[1] ?? "#").length - 1] ?? NOTE_HEADINGS[2];
+      out.push(`<${tag} class="${cls}">${inline(h[2] ?? "")}</${tag}>`);
+      i++;
+      continue;
     }
-    const ul = /^[-*]\s+(.+)$/.exec(line);
-    if (ul) return `<div class="flex gap-1.5 pl-1"><span class="select-none">\u2022</span><span class="min-w-0">${inline(ul[1])}</span></div>`;
-    const ol = /^(\d+)\.\s+(.+)$/.exec(line);
-    if (ol) return `<div class="flex gap-1.5 pl-1"><span class="select-none tabular-nums">${ol[1]}.</span><span class="min-w-0">${inline(ol[2])}</span></div>`;
-    return line ? `<div>${inline(line)}</div>` : "<div>&nbsp;</div>";
-  }).join("");
+    const listRe = UL_RE.test(line) ? UL_RE : OL_RE.test(line) ? OL_RE : null;
+    if (listRe) {
+      const tag = listRe === UL_RE ? "ul" : "ol";
+      const items = [];
+      while (i < lines.length) {
+        const m = listRe.exec(lines[i] ?? "");
+        if (!m) break;
+        items.push({ marker: tag === "ul" ? "\u2022" : `${m[1]}.`, text: inline(m[m.length - 1] ?? "") });
+        i++;
+      }
+      out.push(renderList(tag, items));
+      continue;
+    }
+    out.push(line ? `<div>${inline(line)}</div>` : "<div>&nbsp;</div>");
+    i++;
+  }
+  return out.join("");
 }
 const rendered = computed(() => renderMarkdownLite(props.data.sticky.content));
 function onViewMouseDown(e) {

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

@@ -0,0 +1,50 @@
+/**
+ * One shortcut into a surface the *host* provides — Import & Export, the SFTP
+ * server, the event stream, inbound webhooks. None of the four is a page of this
+ * module: they are the cockpit's, and this card is the studio's landing page
+ * pointing at them.
+ *
+ * So the card has two states, and which one it is in is not its own decision:
+ *
+ * - **`available`** — the host has the surface. The card is a link and behaves
+ *   exactly as it did before PO-223.
+ * - **not available** — the card stays on screen, looks the same, and is a button
+ *   that explains where the surface lives instead of leading into a route the host
+ *   does not serve. Before PO-223 it was a link into nothing: in the playground
+ *   and in the standalone dev studio all four led to a 404.
+ *
+ * **Staying on screen is the point**, and it is the call the managed credential
+ * sources already made (`CredentialRevenexxSource.vue`, PO-222): a control that
+ * vanishes leaves nothing to read the explanation from, and the reader cannot tell
+ * a broken feature from one that belongs somewhere else.
+ *
+ * **No `aria-label`, on purpose** — like `TemplateCard`, the card takes its name
+ * from what it shows. The state is carried by the *role*: "Import & Export,
+ * button" instead of "link" is what says to a screen reader that this does not
+ * navigate, and it says it without announcing something no sighted reader can see
+ * (`specs/accessibility.md` AC-1 names the on-screen text as the source of a name).
+ *
+ * Who decides `available`, and why it is the router rather than a guess about the
+ * host, is `docs/host-surfaces.md`.
+ *
+ * The two branches draw the same body twice rather than sharing it: `as-child`
+ * wants a real element as its child, and the alternatives — a wrapper element
+ * around the card, or a second component for eight lines — cost either the grid
+ * layout or a file. **Keep the two bodies identical.**
+ */
+import type { Component } from 'vue';
+type __VLS_Props = {
+    /** What the surface is called, in the reader's language. */
+    label: string;
+    /** One line on what it is for. Shown in both states. */
+    hint: string;
+    icon: Component;
+    /** Where the surface lives in a host that has it. */
+    to: string;
+    /** Whether this host has it. See the comment above; no default on purpose. */
+    available: boolean;
+    /** What the popover says when it does not. */
+    note: string;
+};
+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>;
+export default _default;

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

@@ -0,0 +1,55 @@
+<script setup>
+import { ArrowRight } from "#solar-icons";
+import { Popover, PopoverContent, PopoverTrigger } from "@revenexx/studio";
+defineProps({
+  label: { type: String, required: true },
+  hint: { type: String, required: true },
+  icon: { type: null, required: true },
+  to: { type: String, required: true },
+  available: { type: Boolean, required: true },
+  note: { type: String, required: true }
+});
+const CARD_CLASS = "group rounded-lg border border-black/[0.06] bg-white p-3 transition hover:border-black/20";
+</script>
+
+<template>
+  <NuxtLink v-if="available" :to="to" :class="CARD_CLASS">
+    <div class="flex items-center gap-2">
+      <span class="flex size-6 items-center justify-center rounded-md bg-slate-100 text-slate-500">
+        <component :is="icon" :size="12" />
+      </span>
+      <span class="min-w-0 flex-1 truncate text-sm font-semibold">{{ label }}</span>
+      <ArrowRight :size="11" class="text-muted-foreground transition-transform group-hover:translate-x-0.5" />
+    </div>
+    <p class="mt-2 text-sm text-muted-foreground">
+      {{ hint }}
+    </p>
+  </NuxtLink>
+
+  <Popover v-else>
+    <PopoverTrigger as-child>
+      <!-- No `id` here: `PopoverTrigger` puts reka-ui's generated `triggerId` on
+           its child and `PopoverContentImpl` points the opened dialog's
+           `aria-labelledby` at exactly that id, so the popover is named by this
+           card. Ours would replace it (reka's `Slot` merges with the child's
+           props winning) and leave the dialog naming nothing. -->
+      <button type="button" :class="[CARD_CLASS, 'w-full text-left']">
+        <div class="flex items-center gap-2">
+          <span class="flex size-6 items-center justify-center rounded-md bg-slate-100 text-slate-500">
+            <component :is="icon" :size="12" />
+          </span>
+          <span class="min-w-0 flex-1 truncate text-sm font-semibold">{{ label }}</span>
+          <ArrowRight :size="11" class="text-muted-foreground transition-transform group-hover:translate-x-0.5" />
+        </div>
+        <p class="mt-2 text-sm text-muted-foreground">
+          {{ hint }}
+        </p>
+      </button>
+    </PopoverTrigger>
+    <PopoverContent align="start" class="w-72 rounded-lg border border-black/[0.06] bg-white p-3 shadow-lg">
+      <p class="text-sm text-muted-foreground">
+        {{ note }}
+      </p>
+    </PopoverContent>
+  </Popover>
+</template>

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

@@ -0,0 +1,50 @@
+/**
+ * One shortcut into a surface the *host* provides — Import & Export, the SFTP
+ * server, the event stream, inbound webhooks. None of the four is a page of this
+ * module: they are the cockpit's, and this card is the studio's landing page
+ * pointing at them.
+ *
+ * So the card has two states, and which one it is in is not its own decision:
+ *
+ * - **`available`** — the host has the surface. The card is a link and behaves
+ *   exactly as it did before PO-223.
+ * - **not available** — the card stays on screen, looks the same, and is a button
+ *   that explains where the surface lives instead of leading into a route the host
+ *   does not serve. Before PO-223 it was a link into nothing: in the playground
+ *   and in the standalone dev studio all four led to a 404.
+ *
+ * **Staying on screen is the point**, and it is the call the managed credential
+ * sources already made (`CredentialRevenexxSource.vue`, PO-222): a control that
+ * vanishes leaves nothing to read the explanation from, and the reader cannot tell
+ * a broken feature from one that belongs somewhere else.
+ *
+ * **No `aria-label`, on purpose** — like `TemplateCard`, the card takes its name
+ * from what it shows. The state is carried by the *role*: "Import & Export,
+ * button" instead of "link" is what says to a screen reader that this does not
+ * navigate, and it says it without announcing something no sighted reader can see
+ * (`specs/accessibility.md` AC-1 names the on-screen text as the source of a name).
+ *
+ * Who decides `available`, and why it is the router rather than a guess about the
+ * host, is `docs/host-surfaces.md`.
+ *
+ * The two branches draw the same body twice rather than sharing it: `as-child`
+ * wants a real element as its child, and the alternatives — a wrapper element
+ * around the card, or a second component for eight lines — cost either the grid
+ * layout or a file. **Keep the two bodies identical.**
+ */
+import type { Component } from 'vue';
+type __VLS_Props = {
+    /** What the surface is called, in the reader's language. */
+    label: string;
+    /** One line on what it is for. Shown in both states. */
+    hint: string;
+    icon: Component;
+    /** Where the surface lives in a host that has it. */
+    to: string;
+    /** Whether this host has it. See the comment above; no default on purpose. */
+    available: boolean;
+    /** What the popover says when it does not. */
+    note: string;
+};
+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>;
+export default _default;

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. */