@revenexx/studio-integrations 1.4.1 → 2.1.0

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,16 +1,18 @@
 <script setup>
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { computed, ref } from "vue";
 import {
   Badge,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
 } from "@revenexx/studio";
 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);
@@ -85,8 +66,9 @@ function setStatus(word) {
 function setTrigger(kind) {
   emit("narrow", { triggerType: kind ?? "" });
 }
-const statusApplied = computed(() => chosenStatus.value[0] ? runStatusLabel(chosenStatus.value[0]) : "");
-const triggerApplied = computed(() => props.triggerType ? triggerTypeLabel(props.triggerType) : "");
+const ALL = "all";
+const statusChoice = computed(() => chosenStatus.value[0] ?? ALL);
+const triggerChoice = computed(() => props.triggerType || ALL);
 const searchText = ref("");
 function onTableState(state) {
   searchText.value = state.search;
@@ -117,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;
   }
@@ -171,46 +153,66 @@ const columns = computed(() => [
       (`filterTabs`) cannot be used here, because it compares the rows in hand and
       those are one page.
 
-      Built to the same shape as that control on purpose — a dimension per
-      sub-menu, "All" first, one value at a time — so this list is narrowed by the
-      same gesture as the five that narrow what they hold, and one test helper
-      still addresses all six (`e2e/support/studio-table.ts`). What is NOT copied
-      is the count beside each option: the built-in counts the rows in hand, and
-      counting a page here would put a number next to "failed" that describes this
-      page rather than the history the option narrows.
+      It is no longer the same gesture as the other lists. Theirs tick values and
+      apply them together; this one picks one value per dimension and applies it on
+      the spot, because each pick is a request to the platform and staging them
+      would only delay the same round trip. So the shared narrowing helper does not
+      reach this page and `runs.spec.ts` carries its own — said in both places
+      rather than left to be discovered (`e2e/support/studio-table.ts`).
+
+      What is still NOT copied is the count beside each option: the built-in counts
+      the rows in hand, and counting a page here would put a number next to
+      "failed" that describes this page rather than the history the option narrows.
     -->
     <template v-if="serverMode" #filter-menu>
-      <DropdownMenuSub>
-        <DropdownMenuSubTrigger class="gap-2">
-          <span class="flex-1">{{ t("integration.runs.table.column.status") }}</span>
-          <span v-if="statusApplied" class="text-xs text-primary">{{ statusApplied }}</span>
-        </DropdownMenuSubTrigger>
-        <DropdownMenuSubContent class="w-48">
-          <DropdownMenuItem @select="setStatus(null)">
-            {{ t("integration.runs.table.filter.all") }}
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem v-for="word in RUN_STATUS_WORDS" :key="word" @select="setStatus(word)">
-            {{ runStatusLabel(word) }}
-          </DropdownMenuItem>
-        </DropdownMenuSubContent>
-      </DropdownMenuSub>
+      <!--
+        Two selects rather than the sub-menus this slot used to hold. Since
+        `studio-shared` 0.3.2 the filter trigger opens a popover instead of a
+        dropdown menu, and a `DropdownMenuSub` outside a menu root has nothing to
+        attach to: it renders nothing at all, so the narrowing was there in the
+        markup and gone from the screen. A select is what the new surface is built
+        for — it sizes `[data-slot=select-trigger]` to its full width — and it
+        keeps what the menu promised, the widest setting included.
+      -->
+      <div class="space-y-1">
+        <span class="text-xs font-medium text-muted-foreground">{{ t("integration.runs.table.column.status") }}</span>
+        <Select
+          :model-value="statusChoice"
+          @update:model-value="(v) => setStatus(v === ALL ? null : String(v))"
+        >
+          <SelectTrigger :aria-label="t('integration.runs.table.column.status')" class="h-8 text-sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem :value="ALL">
+              {{ t("integration.runs.table.filter.all") }}
+            </SelectItem>
+            <SelectItem v-for="word in RUN_STATUS_WORDS" :key="word" :value="word">
+              {{ runStatusLabel(word) }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
 
-      <DropdownMenuSub>
-        <DropdownMenuSubTrigger class="gap-2">
-          <span class="flex-1">{{ t("integration.runs.table.column.trigger") }}</span>
-          <span v-if="triggerApplied" class="text-xs text-primary">{{ triggerApplied }}</span>
-        </DropdownMenuSubTrigger>
-        <DropdownMenuSubContent class="w-48">
-          <DropdownMenuItem @select="setTrigger(null)">
-            {{ t("integration.runs.table.filter.all") }}
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem v-for="kind in TRIGGER_TYPE_WORDS" :key="kind" @select="setTrigger(kind)">
-            {{ triggerTypeLabel(kind) }}
-          </DropdownMenuItem>
-        </DropdownMenuSubContent>
-      </DropdownMenuSub>
+      <div class="space-y-1">
+        <span class="text-xs font-medium text-muted-foreground">{{ t("integration.runs.table.column.trigger") }}</span>
+        <Select
+          :model-value="triggerChoice"
+          @update:model-value="(v) => setTrigger(v === ALL ? null : String(v))"
+        >
+          <SelectTrigger :aria-label="t('integration.runs.table.column.trigger')" class="h-8 text-sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem :value="ALL">
+              {{ t("integration.runs.table.filter.all") }}
+            </SelectItem>
+            <SelectItem v-for="kind in TRIGGER_TYPE_WORDS" :key="kind" :value="kind">
+              {{ triggerTypeLabel(kind) }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
     </template>
 
     <template #cell-status="{ row: run }">
@@ -243,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/SftpAccountImportDialog.vue

@@ -17,13 +17,24 @@ const sftp = typeof useConsoleSftp === "function" ? useConsoleSftp() : {
 const { create } = useIntegrationsCredentials();
 const busyId = ref(null);
 const error = ref(null);
-watch(open, (o) => {
-  if (o) {
-    error.value = null;
-    void sftp.load();
+const loadPending = ref(false);
+let openCycle = 0;
+watch(open, async (o) => {
+  if (!o) return;
+  const cycle = ++openCycle;
+  error.value = null;
+  loadPending.value = true;
+  try {
+    await sftp.load();
+  } finally {
+    if (cycle === openCycle) loadPending.value = false;
   }
 });
 const activeAccounts = computed(() => sftp.accounts.value.filter((a) => a.status === "active" && a.login_username));
+const waiting = computed(() => (loadPending.value || sftp.loading.value) && !activeAccounts.value.length);
+const loadFailed = computed(
+  () => !waiting.value && !activeAccounts.value.length && sftp.activeTenantSlug.value && sftp.error?.value ? t("integration.credentials.sftpImport.state.loadFailed", { message: sftp.error.value }) : null
+);
 async function importAccount(account) {
   const tenant = sftp.activeTenantSlug.value;
   if (!tenant || !account.login_username) return;
@@ -69,13 +80,16 @@ async function importAccount(account) {
            limit written down there (PO-251). -->
       <LoadingAnnouncement
         :label="t('integration.credentials.sftpImport.title')"
-        :loading="sftp.loading.value && !activeAccounts.length"
+        :loading="waiting"
         :text="t('integration.credentials.sftpImport.state.loading')"
       />
 
-      <div v-if="sftp.loading.value && !activeAccounts.length" aria-hidden="true" class="space-y-2">
+      <div v-if="waiting" aria-hidden="true" class="space-y-2">
         <div v-for="n in 3" :key="`sk-${n}`" class="h-9 rounded-md bg-black/[0.07] animate-pulse" />
       </div>
+      <p v-else-if="loadFailed" class="py-4 text-center text-sm text-rose-600">
+        {{ loadFailed }}
+      </p>
       <p v-else-if="!activeAccounts.length" class="py-4 text-center text-sm text-muted-foreground">
         {{ t("integration.credentials.sftpImport.empty") }}
       </p>

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

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

@@ -42,42 +42,8 @@ type __VLS_Props = {
  * id that is on the canvas is in the blob by construction.
  */
 declare function revealNode(id: string): void;
-/**
- * Point at a node without opening it — for a reader who has to look at the
- * card's *surroundings* rather than at its settings.
- *
- * The deliberate difference from {@link revealNode} is the missing selection,
- * and with it the missing settings lightbox. That is the whole reason there are
- * two functions: the validation banner sends someone to a field at fault, and
- * the dialog is where that field is. The error-path advice sends them to a port
- * with nothing on it, and the question they have to answer — where should this
- * failure go? — is answered by the graph around the card, which a dialog over
- * the canvas covers up.
- *
- * Marked with the same pulse a newly created card gets, because the job is the
- * same one: say which of thirty cards is the one meant.
- */
-declare function showNodeOnCanvas(id: string): void;
-/**
- * Hang a Stop-and-Error step off a node's error output and wire it up
- * (specs/workflow-advice.md AC-3).
- *
- * The advice strip can tell an author their error output leads nowhere; on its
- * own that is a reprimand without a remedy, because the repair — drop a node,
- * pick the right one, connect it, write an expression quoting the failing step's
- * message — is four steps of tedium they have to already know. Every template we
- * ship does exactly this, twenty-five times over, so the shape is settled and
- * worth one click.
- *
- * Leaves the result unsaved and unopened, like every other insertion here: the
- * new step is highlighted and the author decides whether to keep it. Deleting it
- * is the undo, because this editor has no undo stack to hook into.
- */
-declare function attachErrorStop(sourceNodeId: string, port: string): void;
 declare const _default: import("vue").DefineComponent<__VLS_Props, {
     revealNode: typeof revealNode;
-    showNodeOnCanvas: typeof showNodeOnCanvas;
-    attachErrorStop: typeof attachErrorStop;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     run: () => any;
     toggleActive: () => any;