@revenexx/studio-integrations 2.0.0 → 2.2.0

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

@@ -193,9 +193,12 @@ const parameterFields = computed(() => applyingConfig.value.filter((f) => !SETTI
 const settingsFields = computed(() => applyingConfig.value.filter((f) => SETTINGS_FIELD_KEY.test(f.key)));
 const FOLD_ABOVE = 4;
 const ALWAYS_DRAWN = 3;
-const foldedFields = computed(
-  () => parameterFields.value.length > FOLD_ABOVE ? parameterFields.value.slice(ALWAYS_DRAWN).filter((f) => !f.required) : []
-);
+const foldedFields = computed(() => {
+  const fields = parameterFields.value;
+  if (fields.length <= FOLD_ABOVE) return [];
+  const lastRequired = fields.findLastIndex((f) => f.required);
+  return fields.slice(Math.max(ALWAYS_DRAWN, lastRequired + 1));
+});
 const foldedKeys = computed(() => new Set(foldedFields.value.map((f) => f.key)));
 const foldAnchorKey = computed(() => foldedFields.value[0]?.key);
 function optionalShouldOpen() {
@@ -1215,7 +1218,7 @@ async function runTestStep() {
                   </span>
                 </button>
                 <div v-show="!sectionClosed(s.id)" class="space-y-2 border-t border-black/[0.06] px-2 py-2">
-                <!-- These ports belong to an UPSTREAM node, so the sentence is that
+                  <!-- These ports belong to an UPSTREAM node, so the sentence is that
                      node's. On a 300px column it is a tooltip rather than text: the
                      values below are what this panel is for, and a sentence per port
                      pushes them out of view. The readable copy is the Output tab
@@ -1233,50 +1236,50 @@ async function runTestStep() {
                      sentence is read by resting on the port's name or the space around
                      its rows rather than on a row itself. Where a reader is owed the
                      text outright, that is the Output tab. -->
-                <div
-                  v-for="p in s.ports"
-                  :key="p.name"
-                  class="space-y-1 pl-0.5"
-                  :title="resolveLocalized(p.description) || void 0"
-                >
-                  <div v-if="s.ports.length > 1 || p.kind !== 'default'" class="flex items-center gap-1.5">
-                    <span class="size-1.5 rounded-full" :class="portDotClass(p.kind, p.name)" />
-                    <span class="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">{{ p.name }}</span>
-                  </div>
-                  <!-- Schema rows, n8n-style: glyph · key · sampled value. -->
-                  <div class="space-y-px">
-                    <button
-                      type="button"
-                      :class="rowClass"
-                      :aria-label="nodeOutputExpr(s.id, p.name)"
-                      :title="nodeOutputExpr(s.id, p.name)"
-                      draggable="true"
-                      @dragstart="onChipDragStart($event, nodeOutputExpr(s.id, p.name))"
-                      @click="insertExpression(nodeOutputExpr(s.id, p.name))"
-                    >
-                      <span class="w-3 shrink-0 text-center font-semibold text-slate-400">{}</span>
-                      <span class="shrink-0 font-medium"><span v-for="(seg, i) in highlightSegments(p.name)" :key="i" :class="seg.hit ? 'rounded-[2px] bg-amber-200/80' : ''">{{ seg.text }}</span></span>
-                    </button>
-                    <div class="space-y-px pl-3">
+                  <div
+                    v-for="p in s.ports"
+                    :key="p.name"
+                    class="space-y-1 pl-0.5"
+                    :title="resolveLocalized(p.description) || void 0"
+                  >
+                    <div v-if="s.ports.length > 1 || p.kind !== 'default'" class="flex items-center gap-1.5">
+                      <span class="size-1.5 rounded-full" :class="portDotClass(p.kind, p.name)" />
+                      <span class="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">{{ p.name }}</span>
+                    </div>
+                    <!-- Schema rows, n8n-style: glyph · key · sampled value. -->
+                    <div class="space-y-px">
                       <button
-                        v-for="f in p.fields"
-                        :key="f.name"
                         type="button"
                         :class="rowClass"
-                        :aria-label="nodeOutputExpr(s.id, p.name, f.name)"
-                        :title="nodeOutputExpr(s.id, p.name, f.name) + (f.dataType ? ' \xB7 ' + f.dataType : '')"
+                        :aria-label="nodeOutputExpr(s.id, p.name)"
+                        :title="nodeOutputExpr(s.id, p.name)"
                         draggable="true"
-                        @dragstart="onChipDragStart($event, nodeOutputExpr(s.id, p.name, f.name))"
-                        @click="insertExpression(nodeOutputExpr(s.id, p.name, f.name))"
+                        @dragstart="onChipDragStart($event, nodeOutputExpr(s.id, p.name))"
+                        @click="insertExpression(nodeOutputExpr(s.id, p.name))"
                       >
-                        <span class="w-3 shrink-0 text-center font-semibold" :class="typeGlyph(f.dataType)?.cls ?? 'text-slate-300'">{{ typeGlyph(f.dataType)?.char ?? "\xB7" }}</span>
-                        <span class="shrink-0"><span v-for="(seg, i) in highlightSegments(f.name)" :key="i" :class="seg.hit ? 'rounded-[2px] bg-amber-200/80' : ''">{{ seg.text }}</span></span>
-                        <span v-if="chipValue(s.id, p.name, f.name) !== null" class="min-w-0 flex-1 truncate text-slate-400">{{ chipValue(s.id, p.name, f.name) }}</span>
+                        <span class="w-3 shrink-0 text-center font-semibold text-slate-400">{}</span>
+                        <span class="shrink-0 font-medium"><span v-for="(seg, i) in highlightSegments(p.name)" :key="i" :class="seg.hit ? 'rounded-[2px] bg-amber-200/80' : ''">{{ seg.text }}</span></span>
                       </button>
+                      <div class="space-y-px pl-3">
+                        <button
+                          v-for="f in p.fields"
+                          :key="f.name"
+                          type="button"
+                          :class="rowClass"
+                          :aria-label="nodeOutputExpr(s.id, p.name, f.name)"
+                          :title="nodeOutputExpr(s.id, p.name, f.name) + (f.dataType ? ' \xB7 ' + f.dataType : '')"
+                          draggable="true"
+                          @dragstart="onChipDragStart($event, nodeOutputExpr(s.id, p.name, f.name))"
+                          @click="insertExpression(nodeOutputExpr(s.id, p.name, f.name))"
+                        >
+                          <span class="w-3 shrink-0 text-center font-semibold" :class="typeGlyph(f.dataType)?.cls ?? 'text-slate-300'">{{ typeGlyph(f.dataType)?.char ?? "\xB7" }}</span>
+                          <span class="shrink-0"><span v-for="(seg, i) in highlightSegments(f.name)" :key="i" :class="seg.hit ? 'rounded-[2px] bg-amber-200/80' : ''">{{ seg.text }}</span></span>
+                          <span v-if="chipValue(s.id, p.name, f.name) !== null" class="min-w-0 flex-1 truncate text-slate-400">{{ chipValue(s.id, p.name, f.name) }}</span>
+                        </button>
+                      </div>
                     </div>
                   </div>
                 </div>
-                </div>
               </div>
             </div>
 
@@ -1838,9 +1841,9 @@ async function runTestStep() {
                   :depth="0"
                   :variables="variables"
                   :state-namespaces="offeredStateNamespaces"
-                  @declare-state="stageStateNamespace"
                   :upstream-outputs="upstreamOutputs"
                   :refused="refusedFields?.[field.key]"
+                  @declare-state="stageStateNamespace"
                   @set="(k, v) => writeConfig(k, v)"
                 />
               </template>
@@ -1881,9 +1884,9 @@ async function runTestStep() {
                 :depth="0"
                 :variables="variables"
                 :state-namespaces="offeredStateNamespaces"
-                @declare-state="stageStateNamespace"
                 :upstream-outputs="upstreamOutputs"
                 :refused="refusedFields?.[field.key]"
+                @declare-state="stageStateNamespace"
                 @set="(k, v) => writeConfig(k, v)"
               />
             </div>

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

@@ -4,7 +4,8 @@ import { AltArrowLeft as ArrowLeft, Bolt as Zap, Magnifier as Search } from "#so
 import { triggerGlyph } from "../../data/triggerGlyphs";
 import * as Lucide from "lucide-vue-next";
 import { INTEGRATION_NODE_CATALOG, NODE_CATEGORIES, TRIGGER_TEMPLATES } from "../../data/integrationNodeCatalog";
-import { resolveLocalized } from "../../utils/localize";
+import { resolveLocalized, studioLocale } from "../../utils/localize";
+import { orderFolderLeaves, orderFolders } from "../../utils/paletteOrder";
 const { load: loadNodes } = useIntegrationsNodes();
 onMounted(() => {
   void loadNodes();
@@ -14,29 +15,39 @@ const emit = defineEmits(["insert"]);
 const search = ref("");
 const searchInput = ref(null);
 defineExpose({ focusSearch: () => searchInput.value?.focus() });
-const CORE_GROUP_BY_CATEGORY = {
+const CORE_FOLDERS = {
+  Flow: { message: "integration.canvas.palette.folder.flow", icon: "Split", color: "bg-slate-100 text-rose-600/80" },
+  Data: { message: "integration.canvas.palette.folder.data", icon: "Database", color: "bg-slate-100 text-amber-700/80" },
+  "Text & Formats": { message: "integration.canvas.palette.folder.textAndFormats", icon: "Type", color: "bg-slate-100 text-orange-600/80" },
+  Files: { message: "integration.canvas.palette.folder.files", icon: "Files", color: "bg-slate-100 text-yellow-700/80" },
+  Web: { message: "integration.canvas.palette.folder.web", icon: "Globe", color: "bg-slate-100 text-sky-600/80" },
+  Messaging: { message: "integration.canvas.palette.folder.messaging", icon: "MessageCircle", color: "bg-slate-100 text-violet-600/80" },
+  "FTP / SFTP": { message: "integration.canvas.palette.folder.ftpSftp", icon: "FolderSync", color: "bg-slate-100 text-teal-600/80" },
+  Actions: { message: "integration.canvas.palette.folder.actions", icon: "Wand2", color: "bg-slate-100 text-sky-600/80" },
+  Other: { message: "integration.canvas.palette.folder.misc", icon: "FolderOpen", color: "bg-slate-100 text-slate-500" }
+};
+const CORE_FOLDER_BY_CATEGORY = {
   control: "Flow",
   transform: "Data",
   io: "Data",
-  action: "Actions",
-  trigger: "Triggers"
+  action: "Actions"
 };
 const CORE_LABEL_ALIAS = {
   "Flow control": "Flow",
-  "Files": "Data",
-  "Files & I/O": "Data",
-  "Network": "Messaging"
-};
-const CORE_GROUP_META = {
-  "Data": { icon: "Database", color: "bg-slate-100 text-amber-700/80" },
-  "Flow": { icon: "Split", color: "bg-slate-100 text-rose-600/80" },
-  "Messaging": { icon: "MessageCircle", color: "bg-slate-100 text-violet-600/80" },
-  "Actions": { icon: "Wand2", color: "bg-slate-100 text-sky-600/80" }
+  "Files & I/O": "Files",
+  Network: "Web"
 };
-function coreGroupIcon(label) {
-  const meta = CORE_GROUP_META[label];
+function coreGroupIcon(key) {
+  const meta = key ? CORE_FOLDERS[key] : void 0;
   return meta && Lucide[meta.icon] || Lucide.FolderOpen;
 }
+function coreFolder(m) {
+  const own = m.groups?.[0];
+  const ownKey = own ? resolveLocalized(own, "en") : "";
+  const key = ownKey && (CORE_LABEL_ALIAS[ownKey] ?? ownKey) || CORE_FOLDER_BY_CATEGORY[m.category] || "Other";
+  const known = CORE_FOLDERS[key];
+  return { key, label: known ? t(known.message) : resolveLocalized(own) };
+}
 const VERB_PREFIX = /^(create|get|list|update|delete|search|send|sync|upsert|cancel)-(.+)$/;
 function titleize(kebab) {
   return kebab.split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join(" ");
@@ -58,7 +69,7 @@ function groupPath(m) {
   if (m.groups?.length) {
     const path = m.groups.map((g) => resolveLocalized(g)).filter(Boolean);
     if (isIntegration(m) || !path.length) return path;
-    return [CORE_LABEL_ALIAS[path[0]] ?? path[0], ...path.slice(1)];
+    return [coreFolder(m).label, ...path.slice(1)];
   }
   if (isAppPackage(m.__package)) {
     const app = packageAppLabel(m.__package);
@@ -68,10 +79,10 @@ function groupPath(m) {
     const verb = VERB_PREFIX.exec(rest);
     return verb ? [app, titleize(verb[2])] : [app];
   }
-  return [CORE_GROUP_BY_CATEGORY[m.category] ?? "Other"];
+  return [coreFolder(m).label];
 }
 function isIntegration(m) {
-  return isAppPackage(m.__package) || (m.groups?.length ?? 0) > 1 || hasLogo(m);
+  return isAppPackage(m.__package) || hasLogo(m);
 }
 function makeGroup(label) {
   return { label, children: /* @__PURE__ */ new Map(), leaves: [], count: 0 };
@@ -124,32 +135,36 @@ const tree = computed(() => {
     const root = isIntegration(m) ? apps : core;
     let cursor = root;
     cursor.count++;
-    for (const label of path) {
-      if (!cursor.children.has(label)) cursor.children.set(label, makeGroup(label));
+    for (const [depth, label] of path.entries()) {
+      if (!cursor.children.has(label)) {
+        const group = makeGroup(label);
+        if (root === core && depth === 0) group.key = coreFolder(m).key;
+        cursor.children.set(label, group);
+      }
       cursor = cursor.children.get(label);
       cursor.count++;
     }
     cursor.leaves.push(m);
   }
+  const locale = studioLocale();
+  const order = (g) => {
+    g.leaves = orderFolderLeaves(g.leaves);
+    g.children = orderFolders(g.children, locale);
+    for (const child of g.children.values()) order(child);
+  };
+  order(apps);
+  order(core);
   return { apps, core };
 });
-const appRows = computed(() => {
-  const rows = Array.from(tree.value.apps.children.entries());
-  const sftpIdx = rows.findIndex(([label]) => label === "SFTP");
-  const ftpIdx = rows.findIndex(([label]) => label === "FTP");
-  if (ftpIdx !== -1 && sftpIdx !== -1 && sftpIdx !== ftpIdx + 1) {
-    const [sftp] = rows.splice(sftpIdx, 1);
-    rows.splice(rows.findIndex(([label]) => label === "FTP") + 1, 0, sftp);
-  }
-  return rows;
-});
+const appRows = computed(() => Array.from(tree.value.apps.children.entries()));
 function subtreeManifests(g) {
   const out = [...g.leaves];
   for (const child of g.children.values()) out.push(...subtreeManifests(child));
   return out;
 }
 function groupLogoManifest(g) {
-  return subtreeManifests(g).find(hasLogo) ?? null;
+  const all = subtreeManifests(g);
+  return all.find(hasLogo) ?? all.find((m) => (m.images ?? []).length > 0) ?? null;
 }
 const stack = ref([]);
 const direction = ref("push");
@@ -259,10 +274,10 @@ function insertManifest(leaf) {
 function insertTrigger(tpl) {
   emit("insert", { kind: "trigger", type: tpl.type });
 }
-function categoryColor(label) {
-  const meta = CORE_GROUP_META[label];
+function categoryColor(key) {
+  const meta = key ? CORE_FOLDERS[key] : void 0;
   if (meta) return meta.color;
-  const cat = NODE_CATEGORIES.find((c) => c.label === label || CORE_GROUP_BY_CATEGORY[String(c.key)] === label);
+  const cat = NODE_CATEGORIES.find((c) => CORE_FOLDER_BY_CATEGORY[String(c.key)] === key);
   return cat?.color ?? "bg-slate-100 text-slate-500";
 }
 function nodeCategoryColor(m) {
@@ -397,7 +412,7 @@ const searching = computed(() => search.value.trim().length > 0);
               draggable="true"
               :title="resolveLocalized(tpl.name)"
               @dragstart="onTriggerDragStart(tpl, $event)"
-                @dragend="onDragEnd"
+              @dragend="onDragEnd"
               @click="insertTrigger(tpl)"
             >
               <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600">
@@ -434,8 +449,8 @@ const searching = computed(() => search.value.trim().length > 0);
                 class="flex w-full items-center gap-2 rounded-md border border-transparent px-2 py-1.5 text-left transition hover:border-black/[0.08] hover:bg-muted/40"
                 @click="pushPath(['__core', label])"
               >
-                <span class="flex size-6 shrink-0 items-center justify-center rounded-md" :class="categoryColor(label)">
-                  <component :is="coreGroupIcon(label)" :size="13" />
+                <span class="flex size-6 shrink-0 items-center justify-center rounded-md" :class="categoryColor(group.key)">
+                  <component :is="coreGroupIcon(group.key)" :size="13" />
                 </span>
                 <span class="min-w-0 flex-1 truncate text-sm font-medium">{{ label }}</span>
                 <span class="text-sm tabular-nums text-muted-foreground">{{ group.count }}</span>

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

@@ -84,9 +84,10 @@ async function runAction(a) {
     busy.value = false;
   }
 }
-function confirmTerminate() {
-  toast(t("integration.runs.toast.terminate.confirm", { id: props.run.id }), {
-    action: { label: actionLabel("terminate"), onClick: () => void runAction("terminate") }
+function confirmStop(a) {
+  const question = a === "cancel" ? t("integration.runs.toast.cancel.confirm", { id: props.run.id }) : t("integration.runs.toast.terminate.confirm", { id: props.run.id });
+  toast(question, {
+    action: { label: actionLabel(a), onClick: () => void runAction(a) }
   });
 }
 </script>
@@ -104,8 +105,8 @@ function confirmTerminate() {
       <DropdownMenuItem @select="viewDetails">{{ t("integration.runs.menu.viewDetails") }}</DropdownMenuItem>
       <DropdownMenuItem @select="viewReplay">{{ t("integration.runs.menu.replay") }}</DropdownMenuItem>
       <DropdownMenuSeparator v-if="hasAny" />
-      <DropdownMenuItem v-if="isActive" @select="runAction('cancel')">{{ actionLabel("cancel") }}</DropdownMenuItem>
-      <DropdownMenuItem v-if="isActive" class="text-rose-600" @select="confirmTerminate">{{ actionLabel("terminate") }}</DropdownMenuItem>
+      <DropdownMenuItem v-if="isActive" @select="confirmStop('cancel')">{{ actionLabel("cancel") }}</DropdownMenuItem>
+      <DropdownMenuItem v-if="isActive" class="text-rose-600" @select="confirmStop('terminate')">{{ actionLabel("terminate") }}</DropdownMenuItem>
       <DropdownMenuSeparator v-if="isActive && (canResume || isTerminal)" />
       <DropdownMenuItem v-if="canResume" @select="runAction('resume')">{{ actionLabel("resume") }}</DropdownMenuItem>
       <DropdownMenuItem v-if="isTerminal" @select="runAction('retry')">{{ actionLabel("retry") }}</DropdownMenuItem>

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

@@ -1,14 +1,21 @@
 import type { WorkflowRun } from '../../types/integrations.js';
+import type { OutputNode } from '../../utils/runOutputs.js';
 type __VLS_Props = {
     run: WorkflowRun;
     /** Which surface renders: the overview or the steps+history timeline. */
     view?: 'details' | 'timeline';
+    /**
+     * The workflow's nodes, which the result is split against and named by. The
+     * published blob's, as the Replay view next to this one draws them.
+     */
+    nodes?: readonly OutputNode[];
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     changed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onChanged?: (() => any) | undefined;
 }>, {
+    nodes: readonly OutputNode[];
     view: "details" | "timeline";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -7,9 +7,11 @@ 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 { splitRunOutputs } from "../../utils/runOutputs";
 const props = defineProps({
   run: { type: Object, required: true },
-  view: { type: String, required: false, default: "details" }
+  view: { type: String, required: false, default: "details" },
+  nodes: { type: Array, required: false, default: () => [] }
 });
 const emit = defineEmits(["changed"]);
 const t = useIntegrationsT();
@@ -83,6 +85,7 @@ const temporalWorkflowId = computed(() => pickStr(runData.value, ["temporal_work
 const temporalRunId = computed(() => pickStr(runData.value, ["temporal_run_id", "temporalRunId"]) ?? props.run.temporalRunId ?? null);
 const hasTemporal = computed(() => !!temporalWorkflowId.value && !!temporalRunId.value);
 const runResult = computed(() => pick(runData.value, ["result"]));
+const resultOutputs = computed(() => splitRunOutputs(runResult.value, props.nodes));
 const MAX_RESULT_LINKS = 50;
 const resultLinks = computed(() => {
   const out = [];
@@ -685,7 +688,16 @@ async function confirmAction() {
             {{ link.label }}
           </a>
         </div>
-        <pre class="rounded-md bg-muted/40 p-3 text-xs overflow-x-auto max-h-[28rem]">{{ json(runResult) }}</pre>
+        <!-- One block per step, each clamped and scrolling on its own (AC-3). -->
+        <div v-if="resultOutputs?.length" class="space-y-3">
+          <div v-for="out in resultOutputs" :key="out.nodeId" class="min-w-0">
+            <h5 class="mb-1 text-xs font-medium text-foreground">
+              {{ out.name }}
+            </h5>
+            <pre class="rounded-md bg-muted/40 p-3 text-xs overflow-auto max-h-[28rem]">{{ json(out.value) }}</pre>
+          </div>
+        </div>
+        <pre v-else class="rounded-md bg-muted/40 p-3 text-xs overflow-x-auto max-h-[28rem]">{{ json(runResult) }}</pre>
       </section>
 
       <!-- Stack Trace (non-terminal runs only, lazy) -->

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

@@ -1,14 +1,21 @@
 import type { WorkflowRun } from '../../types/integrations.js';
+import type { OutputNode } from '../../utils/runOutputs.js';
 type __VLS_Props = {
     run: WorkflowRun;
     /** Which surface renders: the overview or the steps+history timeline. */
     view?: 'details' | 'timeline';
+    /**
+     * The workflow's nodes, which the result is split against and named by. The
+     * published blob's, as the Replay view next to this one draws them.
+     */
+    nodes?: readonly OutputNode[];
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     changed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onChanged?: (() => any) | undefined;
 }>, {
+    nodes: readonly OutputNode[];
     view: "details" | "timeline";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { computed, ref } from "vue";
 import {
   Badge,
   Select,
@@ -11,6 +11,8 @@ import {
 import { DEFAULT_RUN_DIRECTION, DEFAULT_RUN_SORT } from "../../utils/runFeedQuery";
 import { RUN_STATUS_COLUMN_WIDTH, RUN_STATUS_WORDS, normalisedRunStatus, runStatusClass, runStatusLabel } from "../../utils/statusStyle";
 import { formatDuration } from "../../utils/formatDuration";
+import { relativeTime } from "../../utils/relativeTime";
+import { useNow } from "../../composables/useNow";
 import { TRIGGER_TYPE_WORDS, triggerTypeLabel } from "../../data/integrationNodeCatalog";
 const props = defineProps({
   runs: { type: Array, required: true },
@@ -31,31 +33,10 @@ const page = defineModel("page", { type: Number, ...{ default: 1 } });
 const t = useIntegrationsT();
 const router = useRouter();
 const emptyText = computed(() => props.emptyText ?? (anyNarrowing.value || searchText.value ? t("integration.runs.table.empty.narrowed") : t("integration.runs.table.empty")));
-const now = ref(Date.now());
-let tick = null;
-onMounted(() => {
-  tick = setInterval(() => {
-    now.value = Date.now();
-  }, 3e3);
-});
-onUnmounted(() => {
-  if (tick) {
-    clearInterval(tick);
-    tick = null;
-  }
-});
+const now = useNow();
 function openRun(r) {
   void router.push({ path: `/integrations/workflows/${r.workflowId}`, query: { run: r.id } });
 }
-function formatRelative(iso) {
-  if (!iso) return "\u2014";
-  const ms = Date.now() - new Date(iso).getTime();
-  if (Number.isNaN(ms)) return "\u2014";
-  if (ms < 6e4) return t("integration.common.time.secondsAgo", Math.max(1, Math.floor(ms / 1e3)));
-  if (ms < 36e5) return t("integration.common.time.minutesAgo", Math.floor(ms / 6e4));
-  if (ms < 864e5) return t("integration.common.time.hoursAgo", Math.floor(ms / 36e5));
-  return t("integration.common.time.daysAgo", Math.floor(ms / 864e5));
-}
 function liveDuration(run) {
   if (!run.startedAt) return null;
   const start = Date.parse(run.startedAt);
@@ -118,10 +99,10 @@ const sortedColumn = computed(() => {
   return entry ? entry[0] : null;
 });
 const serverModels = computed(() => props.serverMode ? {
-  "sort": tableSort.value,
+  sort: tableSort.value,
   "onUpdate:sort": onTableSort,
   // 1-based here, as the platform pages; the shared table counts from zero.
-  "page": page.value - 1,
+  page: page.value - 1,
   "onUpdate:page": (p) => {
     page.value = p + 1;
   }
@@ -264,7 +245,7 @@ const columns = computed(() => [
     </template>
 
     <template #cell-started="{ row: run }">
-      <span class="text-sm text-muted-foreground tabular-nums">{{ formatRelative(run.startedAt) }}</span>
+      <span class="text-sm text-muted-foreground tabular-nums">{{ relativeTime(run.startedAt, now) }}</span>
     </template>
 
     <template #cell-duration="{ row: run }">

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

@@ -212,6 +212,7 @@ function onViewMouseDown(e) {
       class="h-full w-full overflow-hidden whitespace-pre-wrap break-words px-3 py-2"
       @mousedown="onViewMouseDown"
     >
+      <!-- eslint-disable-next-line vue/no-v-html -- renderMarkdownLite escapes the note before it adds a tag -->
       <div v-if="data.sticky.content" v-html="rendered" />
       <!-- The hint is an instruction, not content, so it goes with the rest of the
            affordances: on a read-only canvas it would name the one gesture

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

@@ -4,7 +4,6 @@ import { AltArrowLeft as ArrowLeft, RefreshCircle as Loader2, Magnifier as Searc
 import { triggerGlyph } from "../../data/triggerGlyphs";
 import * as Lucide from "lucide-vue-next";
 import {
-  Badge,
   Button,
   Dialog,
   DialogContent,
@@ -23,6 +22,7 @@ import { TRIGGER_TEMPLATES } from "../../data/integrationNodeCatalog";
 import LoadingAnnouncement from "./LoadingAnnouncement.vue";
 import TemplateCard from "./TemplateCard.vue";
 import TemplateInstallStep from "./TemplateInstallStep.vue";
+import WorkflowImportFileStep from "./WorkflowImportFileStep.vue";
 import WorkflowIconPicker from "./WorkflowIconPicker.vue";
 import WorkflowTagsInput from "./WorkflowTagsInput.vue";
 import { resolveLocalized } from "../../utils/localize";
@@ -35,7 +35,8 @@ const { templates, loading: templatesLoading, error: templatesError, load: loadT
 const mode = ref("blank");
 const modeTabs = computed(() => [
   { key: "blank", label: t("integration.workflows.create.tab.blank") },
-  { key: "template", label: t("integration.workflows.create.tab.template") }
+  { key: "template", label: t("integration.workflows.create.tab.template") },
+  { key: "file", label: t("integration.workflows.create.tab.file") }
 ]);
 function iconFor(name2) {
   if (!name2) return Lucide.Box;
@@ -200,14 +201,14 @@ async function installed(id) {
               </SelectValue>
             </SelectTrigger>
             <SelectContent>
-              <SelectItem v-for="t in TRIGGER_TEMPLATES" :key="t.id" :value="t.type">
+              <SelectItem v-for="tpl in TRIGGER_TEMPLATES" :key="tpl.id" :value="tpl.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="triggerGlyph(t.type)" :size="14" />
+                    <component :is="triggerGlyph(tpl.type)" :size="14" />
                   </span>
                   <span class="min-w-0">
-                    <span class="block text-sm font-medium">{{ resolveLocalized(t.name) }}</span>
-                    <span class="block text-sm text-muted-foreground">{{ resolveLocalized(t.description) }}</span>
+                    <span class="block text-sm font-medium">{{ resolveLocalized(tpl.name) }}</span>
+                    <span class="block text-sm text-muted-foreground">{{ resolveLocalized(tpl.description) }}</span>
                   </span>
                 </span>
               </SelectItem>
@@ -260,6 +261,9 @@ async function installed(id) {
         </div>
       </form>
 
+      <!-- ── From a file ────────────────────────────────────────────────────── -->
+      <WorkflowImportFileStep v-else-if="mode === 'file'" @created="installed" @cancel="open = false" />
+
       <!-- ── From template ─────────────────────────────────────────────────── -->
       <div v-else class="-m-1 max-h-[65vh] space-y-3 overflow-y-auto p-1">
         <!-- The install step, once a template is picked: the same one the