@revenexx/studio-integrations 3.7.1 → 3.8.1

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

@@ -6,6 +6,7 @@ import {
   MarkerType,
   SelectionMode,
   VueFlow,
+  getRectOfNodes,
   useVueFlow
 } from "@vue-flow/core";
 import { Background } from "@vue-flow/background";
@@ -58,6 +59,7 @@ import { copiedRefusalText, joinRefusalText, refusalText } from "../../data/refu
 import { inputHandleId, outputHandleId, portFromHandleId } from "../../data/handleId";
 import { OPPOSITE_SIDE } from "./canvasSides";
 import { deepClone } from "../../utils/deepClone";
+import { fitArea, paddingFor } from "../../utils/canvasFit";
 import { copyToClipboard } from "../../utils/clipboard";
 import { groupFindingsByNode, findingsByNodeField, nodeDisplayLabel } from "../../utils/validationFindings";
 import { reorderBranchSubtrees } from "../../data/branchReorder";
@@ -403,32 +405,10 @@ function edgeColorByKind(kind) {
 syncFromBlob();
 const paneReady = ref(false);
 const pendingReveal = ref(null);
-function liftAboveControlPane() {
-  const bar = controlBar.value?.getBoundingClientRect();
-  const wrap = canvasWrapRef.value?.getBoundingClientRect();
-  const vp = flow.viewport.value;
-  if (!bar || !wrap || !vp) return;
-  let top = Number.POSITIVE_INFINITY;
-  let bottom = Number.NEGATIVE_INFINITY;
-  for (const n of vfNodes.value) {
-    const height = flow.findNode(n.id)?.dimensions?.height ?? 76;
-    top = Math.min(top, n.position.y);
-    bottom = Math.max(bottom, n.position.y + height);
-  }
-  if (!Number.isFinite(top) || !Number.isFinite(bottom)) return;
-  const CLEARANCE = 8;
-  const overlap = wrap.top + vp.y + bottom * vp.zoom - bar.top + CLEARANCE;
-  if (overlap <= 0) return;
-  const roomAtTop = wrap.top + vp.y + top * vp.zoom - wrap.top - CLEARANCE;
-  const lift = Math.min(overlap, Math.max(roomAtTop, 0));
-  if (lift <= 0) return;
-  flow.setViewport({ ...vp, y: vp.y - lift });
-}
 flow.onPaneReady(async () => {
   await nextTick();
   void canvasWrapRef.value?.getBoundingClientRect();
-  await flow.fitView({ padding: { x: 0.2, top: 0.2, bottom: "96px" }, maxZoom: 1 });
-  liftAboveControlPane();
+  await fitClearOfPanels({ duration: 0 });
   paneReady.value = true;
   if (pendingReveal.value) {
     centerOnNode(pendingReveal.value);
@@ -864,7 +844,7 @@ function onMenuAction(id) {
       void tidyUp();
       break;
     case "fit-view":
-      flow.fitView({ padding: 0.2, duration: 400, maxZoom: 1 });
+      void fitClearOfPanels();
       break;
     case "add-node":
       void focusPalette();
@@ -1385,7 +1365,7 @@ async function tidyUp() {
   syncFromBlob();
   push();
   await nextTick();
-  flow.fitView({ padding: 0.2, duration: 400, maxZoom: 1 });
+  await fitClearOfPanels();
 }
 const POINTER_MODE_KEY = "integrations.editor.pointerMode";
 const pointerMode = ref("select");
@@ -1445,6 +1425,29 @@ const MINIMAP_CORNER_CLASS = {
 };
 const minimapPlacementClass = computed(() => minimapLayout.mode.value === "floating" ? "" : MINIMAP_CORNER_CLASS[minimapLayout.mode.value]);
 const minimapPreviewClass = computed(() => minimapLayout.dockPreview.value ? MINIMAP_CORNER_CLASS[minimapLayout.dockPreview.value] : "");
+async function fitClearOfPanels({ duration = 400 } = {}) {
+  const wrap = canvasWrapRef.value?.getBoundingClientRect();
+  const visible = flow.getNodes.value.filter((n) => !n.hidden && n.dimensions.width && n.dimensions.height);
+  if (!wrap || wrap.width === 0 || !visible.length) {
+    await flow.fitView({ padding: 0.2, duration, maxZoom: 1 });
+    return;
+  }
+  const canvas = { left: wrap.left, top: wrap.top, right: wrap.right, bottom: wrap.bottom };
+  const panels = [];
+  for (const el of [
+    palette.collapsed.value ? null : paletteShellRef.value,
+    minimapLayout.collapsed.value ? null : minimapShellRef.value,
+    controlBar.value
+  ]) {
+    const box = el?.getBoundingClientRect();
+    if (box && box.width > 0 && box.height > 0) {
+      panels.push({ left: box.left, top: box.top, right: box.right, bottom: box.bottom });
+    }
+  }
+  const bounds = getRectOfNodes(visible);
+  const area = fitArea(canvas, panels, { width: bounds.width, height: bounds.height }, flow.minZoom.value, 1);
+  await flow.fitView({ padding: paddingFor(canvas, area), duration, maxZoom: 1 });
+}
 async function focusPalette() {
   if (palette.collapsed.value) {
     palette.setCollapsed(false);
@@ -1519,7 +1522,9 @@ useCanvasShortcuts(() => ({
     void flow.zoomIn({ duration: 150 });
   },
   [shortcutKeys("zoomReset")]: () => setZoomPct(100),
-  [shortcutKeys("fitView")]: () => flow.fitView({ padding: 0.2, duration: 400, maxZoom: 1 }),
+  [shortcutKeys("fitView")]: () => {
+    void fitClearOfPanels();
+  },
   [shortcutKeys("addNode")]: () => {
     void focusPalette();
   },
@@ -1878,7 +1883,7 @@ const edgeTypes = {
                 <button
                   type="button"
                   class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
-                  @click="flow.fitView({ padding: 0.2, duration: 400, maxZoom: 1 })"
+                  @click="fitClearOfPanels()"
                 >
                   <Sparkles :size="13" />
                   {{ t("integration.editor.tool.fitView.label") }}

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

@@ -92,7 +92,7 @@ const OUT_SIDES = ["bottom"];
       </div>
     </div>
     <div class="flex items-center justify-between border-t border-emerald-500/15 bg-emerald-500/[0.04] rounded-b-md px-3 py-1 text-mono text-emerald-700/80 font-semibold">
-      <span>{{ t("integration.canvas.badge.trigger") }} · {{ data.type }}</span>
+      <span>{{ t("integration.canvas.badge.trigger") }} · {{ triggerTypeLabel(data.type) }}</span>
       <span v-if="data.active === false" class="text-amber-600">{{ t("integration.canvas.trigger.badge.inactive") }}</span>
     </div>
   </div>

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

@@ -19,6 +19,8 @@ import {
   Switch
 } from "@revenexx/studio";
 import { formatShortDateTime } from "../../utils/formatDateTime";
+import { executionModeLabel } from "../../utils/executionMode";
+import { triggerTypeLabel } from "../../data/integrationNodeCatalog";
 defineProps({
   workflows: { type: Array, required: true },
   loading: { type: Boolean, required: false, default: false }
@@ -125,16 +127,7 @@ function buildState(wf) {
   }
 }
 function modeLabel(m) {
-  switch (m) {
-    case "sync_only":
-      return t("integration.workflows.table.mode.sync");
-    case "caller_decides":
-      return t("integration.workflows.table.mode.caller");
-    case "async_only":
-      return t("integration.workflows.table.mode.async");
-    default:
-      return "\u2014";
-  }
+  return executionModeLabel(m);
 }
 const LIFECYCLE = ["active", "draft", "paused"];
 const BUILD_STATES = ["pending", "building", "ready", "failed"];
@@ -187,16 +180,18 @@ const columns = computed(() => [
   {
     key: "mode",
     label: t("integration.workflows.table.column.mode"),
-    width: "120px",
+    // Wide enough for the longest word it shows, set in capitals: German
+    // "Aufrufer entscheidet" is about 160px and ran into the Trigger column at 120.
+    width: "170px",
     sortable: true,
-    sortGetter: (w) => w.execution_mode ?? ""
+    sortGetter: (w) => w.execution_mode ? modeLabel(w.execution_mode) : ""
   },
   {
     key: "triggers",
     label: t("integration.workflows.table.column.triggers"),
     width: "140px",
     sortable: true,
-    sortGetter: (w) => w.blob.triggers.map((tr) => tr.type).join(",")
+    sortGetter: (w) => w.blob.triggers.map((tr) => triggerTypeLabel(tr.type)).join(",")
   },
   {
     key: "lastRun",
@@ -321,7 +316,7 @@ const columns = computed(() => [
           :key="trigger.id"
           class="inline-flex items-center whitespace-nowrap rounded-md border border-black/[0.06] bg-muted/50 px-1.5 py-0.5 text-xs font-medium uppercase text-muted-foreground"
         >
-          {{ trigger.type }}
+          {{ triggerTypeLabel(trigger.type) }}
         </span>
       </div>
     </template>

package/dist/runtime/composables/useCanvasTarget.d.ts

@@ -0,0 +1,15 @@
+import { type ComputedRef } from 'vue';
+/**
+ * The smallest a pointer target may be on screen — WCAG 2.2 SC 2.5.8, promised in
+ * `specs/accessibility.md` AC-7.
+ */
+export declare const MIN_TARGET_PX = 24;
+/**
+ * The canvas-pixel size a control drawn **inside** the zoom transform needs so that it
+ * still measures `MIN_TARGET_PX` on screen, and never less than the `drawn` size it
+ * has at full zoom. Zoomed out to 50 %, a target has to be 48 canvas pixels to be hit
+ * as 24 — which is the whole problem with a control the canvas scales (PO-388).
+ */
+export declare function targetSize(drawn: number, zoom: number): number;
+/** `targetSize` against the live viewport of the canvas this component sits on. */
+export declare function useCanvasTarget(drawn: number): ComputedRef<number>;

package/dist/runtime/composables/useCanvasTarget.js

@@ -0,0 +1,10 @@
+import { computed } from "vue";
+import { useVueFlow } from "@vue-flow/core";
+export const MIN_TARGET_PX = 24;
+export function targetSize(drawn, zoom) {
+  return Math.max(drawn, MIN_TARGET_PX / (zoom || 1));
+}
+export function useCanvasTarget(drawn) {
+  const flow = useVueFlow();
+  return computed(() => targetSize(drawn, flow.viewport.value.zoom));
+}

package/dist/runtime/composables/useIntegrationsSummary.d.ts

@@ -0,0 +1,29 @@
+/**
+ * How much the tenant has, counted over the whole tenant (`GET /summary`) — the
+ * figures the navigation shows beside its entries (PO-617).
+ *
+ * Kept apart from the pages' own state on purpose. The badges used to be the
+ * length of whatever the last page had loaded: the editor puts the one workflow
+ * it opened into the workflows list, so a fresh visit to a workflow read "1"
+ * beside Workflows, and a page nobody had opened yet read nothing at all. These
+ * counts are asked for on their own and no page writes to them, so opening a
+ * page cannot change what a badge says.
+ *
+ * Each count means what its page counts: `runsInFlight` is the runs summary's
+ * `in_flight`, `schedulesActive` the schedules list's `live_count`.
+ *
+ * Exported through the module's auto-imports, so the cockpit's own sidebar can
+ * read the same figures (IN-85).
+ */
+export interface IntegrationsSummary {
+    workflows: number;
+    runsInFlight: number;
+    schedulesActive: number;
+    credentials: number;
+    secrets: number;
+}
+export declare function toIntegrationsSummary(res: unknown): IntegrationsSummary | null;
+export declare function useIntegrationsSummary(): {
+    summary: any;
+    load: () => Promise<IntegrationsSummary | null>;
+};

package/dist/runtime/composables/useIntegrationsSummary.js

@@ -0,0 +1,37 @@
+import { useIntegrationsApi } from "./integrationsApi.js";
+function count(value) {
+  return typeof value === "number" && Number.isFinite(value) && value > 0 ? Math.floor(value) : 0;
+}
+export function toIntegrationsSummary(res) {
+  const data = res?.data;
+  if (!data || typeof data !== "object" || Array.isArray(data)) return null;
+  const d = data;
+  return {
+    workflows: count(d.workflows),
+    runsInFlight: count(d.runs_in_flight),
+    schedulesActive: count(d.schedules_active),
+    credentials: count(d.credentials),
+    secrets: count(d.secrets)
+  };
+}
+export function useIntegrationsSummary() {
+  const api = useIntegrationsApi();
+  const summary = useState("integrations.summary", () => null);
+  const turn = useState("integrations.summary.turn", () => 0);
+  const forTenant = useState("integrations.summary.tenant", () => "");
+  async function load() {
+    const mine = ++turn.value;
+    const tenant = api.tenant.value;
+    if (tenant !== forTenant.value) {
+      summary.value = null;
+      forTenant.value = tenant;
+    }
+    try {
+      const res = await api.get("/summary");
+      if (mine === turn.value) summary.value = toIntegrationsSummary(res);
+    } catch {
+    }
+    return summary.value;
+  }
+  return { summary, load };
+}

package/dist/runtime/composables/useNodeConfigResolve.d.ts

@@ -8,8 +8,11 @@
  * body `{ target, config, locale? }`. `target` is a config field key
  * (→ `{ options }`), `'*'` (→ `{ fields }`) or `'outputs'` (→ `{ outputs }`).
  *
- * `dependsOn` given (options / dynamic-schema): those keys both gate the query
- * (must be set as literals) and form the cache-key subset sent as `config`.
+ * `dependsOn` given (options / dynamic-schema): those keys form the cache-key
+ * subset sent as `config`, and — except the ones named in `optional` — gate the
+ * query (must be set as literals). An optional setting the node reads when it is
+ * there, a credential above all, is sent along without holding the list back
+ * (IN-80).
  * `dependsOn` omitted (outputs): no gate, and the whole `config` keys the query
  * and is sent — so any config edit re-resolves.
  */
@@ -22,12 +25,25 @@ import type { NodeConfigResolveError, NodeConfigResolveResult } from '../types/i
  * dependency still holding an expression can't drive resolution yet.
  */
 export declare function isResolvableValue(v: unknown): boolean;
+/**
+ * The settings of `dependsOn` that may stay empty: each one a sibling field the
+ * node declares and does not require. They are sent with the question but do
+ * not hold it back — a WSDL behind a login is read with the credential when one
+ * is chosen, and a public one is read without (IN-80). A key no sibling declares
+ * keeps gating, as before: nothing says it may be left out.
+ */
+export declare function optionalDependencies(dependsOn: string[] | undefined, siblings: Array<{
+    key: string;
+    required?: boolean;
+}> | undefined): string[];
 export declare function useNodeConfigResolve(opts: {
     slug: MaybeRefOrGetter<string>;
     version: MaybeRefOrGetter<string>;
     target: MaybeRefOrGetter<string>;
     config: MaybeRefOrGetter<Record<string, unknown>>;
     dependsOn?: MaybeRefOrGetter<string[] | undefined>;
+    /** Keys of `dependsOn` that are sent but do not gate: the settings that may stay empty. */
+    optional?: MaybeRefOrGetter<string[] | undefined>;
     enabled?: MaybeRefOrGetter<boolean>;
     /** Type-to-search term, forwarded to loadOptions (PE-334). Keys the query. */
     search?: MaybeRefOrGetter<string | undefined>;
@@ -35,6 +51,13 @@ export declare function useNodeConfigResolve(opts: {
     data: Ref<NodeConfigResolveResult | null>;
     error: Ref<NodeConfigResolveError | null>;
     isFetching: Ref<boolean>;
+    /**
+     * The answer on screen is not yet the answer to what was last asked: a request
+     * is out, or a change (a typed term above all) is still inside the debounce.
+     * `isFetching` alone is false for those 300 ms, so a list narrowed locally
+     * would say "nothing matches" before the platform had even been asked.
+     */
+    isPending: Ref<boolean>;
     hasData: Ref<boolean>;
     gated: Ref<boolean>;
     unsatisfied: Ref<string[]>;

package/dist/runtime/composables/useNodeConfigResolve.js

@@ -41,6 +41,13 @@ function classifyError(err) {
 function isAbortError(err) {
   return err instanceof DOMException ? err.name === "AbortError" : err?.name === "AbortError";
 }
+export function optionalDependencies(dependsOn, siblings) {
+  if (!dependsOn?.length || !siblings?.length) return [];
+  return dependsOn.filter((key) => {
+    const sibling = siblings.find((f) => f.key === key);
+    return sibling !== void 0 && sibling.required !== true;
+  });
+}
 const DEBOUNCE_MS = 300;
 const STALE_MS = 3e4;
 export function useNodeConfigResolve(opts) {
@@ -51,7 +58,8 @@ export function useNodeConfigResolve(opts) {
   const hasData = ref(false);
   const unsatisfied = computed(() => {
     const cfg = toValue(opts.config);
-    const gateKeys = toValue(opts.dependsOn) ?? [];
+    const optional = new Set(toValue(opts.optional) ?? []);
+    const gateKeys = (toValue(opts.dependsOn) ?? []).filter((k) => !optional.has(k));
     return gateKeys.filter((k) => !isResolvableValue(cfg[k]));
   });
   const gated = computed(() => unsatisfied.value.length > 0);
@@ -77,6 +85,7 @@ export function useNodeConfigResolve(opts) {
       debounceTimer = null;
     }, DEBOUNCE_MS);
   });
+  const isPending = computed(() => isFetching.value || isEnabled.value && subsetKey.value !== debouncedKey.value);
   let controller = null;
   let lastFetchedKey = null;
   let lastFetchedAt = 0;
@@ -147,5 +156,5 @@ export function useNodeConfigResolve(opts) {
     if (debounceTimer) clearTimeout(debounceTimer);
     if (controller) controller.abort();
   });
-  return { data, error, isFetching, hasData, gated, unsatisfied, isEnabled, refetch };
+  return { data, error, isFetching, isPending, hasData, gated, unsatisfied, isEnabled, refetch };
 }

package/dist/runtime/composables/useOAuthConnect.d.ts

@@ -35,6 +35,11 @@ export type OAuthConnectOutcome = 'completed' | 'closed';
  * genuinely differ: the list refreshes the list, the detail dialog refreshes one
  * credential and tells its parent, and the create dialog says nothing at all because the
  * operator is still looking at the form. Only the waiting is shared.
+ *
+ * **`open` throws when the browser refuses the window** (a popup blocker, a hardened
+ * profile). The error's message is already the operator-facing sentence — what
+ * happened and what to do — so every caller's existing `catch` that toasts
+ * `errorReason(e, …)` shows it as it stands (PO-399).
  */
 export declare function useOAuthConnect(onSettled: (outcome: OAuthConnectOutcome) => void | Promise<void>): {
     open: (authorizeUrl: string) => void;

package/dist/runtime/composables/useOAuthConnect.js

@@ -1,5 +1,7 @@
 import { onUnmounted } from "vue";
+import { useIntegrationsT } from "./useIntegrationsT.js";
 export function useOAuthConnect(onSettled) {
+  const t = useIntegrationsT();
   let release = null;
   function settle(outcome) {
     if (!release) return;
@@ -10,7 +12,7 @@ export function useOAuthConnect(onSettled) {
   function open(authorizeUrl) {
     release?.();
     const popup = window.open(authorizeUrl, "oauth-connect", "width=600,height=720");
-    if (!popup) return;
+    if (!popup) throw new Error(t("integration.credentials.error.popupBlocked"));
     const onMessage = (ev) => {
       if (ev.origin !== window.location.origin) return;
       if (ev.data?.type === "integrations-oauth-complete") settle("completed");

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

@@ -203,6 +203,7 @@
   "integration.credentials.error.loadTypes": "Zugangsdatentypen konnten nicht geladen werden.",
   "integration.credentials.error.noAuthorizeUrl": "Keine Autorisierungs-URL erhalten.",
   "integration.credentials.error.oauthConnect": "OAuth-Verbindung konnte nicht gestartet werden.",
+  "integration.credentials.error.popupBlocked": "Der Browser hat das Fenster für die Anmeldung beim Anbieter blockiert. Erlauben Sie Pop-ups für diese Seite und versuchen Sie es erneut.",
   "integration.credentials.error.save": "Zugangsdaten konnten nicht gespeichert werden.",
   "integration.credentials.error.testFailed": "Verbindungstest fehlgeschlagen.",
   "integration.credentials.list.action.connect": "Verbinden",
@@ -1031,6 +1032,9 @@
   "integration.runs.response.async.startedWithId": "Run #{id} wurde gestartet.",
   "integration.runs.response.description.async": "Im Hintergrund gestartet",
   "integration.runs.response.description.sync": "Synchrones Run-Ergebnis",
+  "integration.runs.response.failure.run": "Run ist fehlgeschlagen.",
+  "integration.runs.response.failure.runWithId": "Run #{id} ist fehlgeschlagen.",
+  "integration.runs.response.failure.step": "Fehlgeschlagen bei Schritt „{step}“.",
   "integration.runs.response.following": "Warten, bis der Run fertig ist…",
   "integration.runs.response.loading.async": "Wird gestartet…",
   "integration.runs.response.loading.sync": "Wird ausgeführt…",
@@ -1415,9 +1419,6 @@
   "integration.workflows.table.menu.action.pause": "Pausieren",
   "integration.workflows.table.menu.actions.aria": "Aktionen für {name}",
   "integration.workflows.table.menu.actions.label": "Aktionen",
-  "integration.workflows.table.mode.async": "async",
-  "integration.workflows.table.mode.caller": "Aufrufer",
-  "integration.workflows.table.mode.sync": "sync",
   "integration.workflows.table.search.placeholder": "Workflows durchsuchen…",
   "integration.workflows.table.state.empty": "Noch keine Workflows.",
   "integration.workflows.table.status.build.building": "Wird erstellt…",

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

@@ -203,6 +203,7 @@
   "integration.credentials.error.loadTypes": "Could not load credential types.",
   "integration.credentials.error.noAuthorizeUrl": "No authorize URL returned.",
   "integration.credentials.error.oauthConnect": "Could not start OAuth connect.",
+  "integration.credentials.error.popupBlocked": "The browser blocked the window for signing in at the provider. Allow pop-ups for this site, then try again.",
   "integration.credentials.error.save": "Could not save credential.",
   "integration.credentials.error.testFailed": "Connection test failed.",
   "integration.credentials.list.action.connect": "Connect",
@@ -1031,6 +1032,9 @@
   "integration.runs.response.async.startedWithId": "Run #{id} started.",
   "integration.runs.response.description.async": "Started in the background",
   "integration.runs.response.description.sync": "Synchronous run result",
+  "integration.runs.response.failure.run": "Run failed.",
+  "integration.runs.response.failure.runWithId": "Run #{id} failed.",
+  "integration.runs.response.failure.step": "Failed at step “{step}”.",
   "integration.runs.response.following": "Waiting for the run to finish…",
   "integration.runs.response.loading.async": "Starting…",
   "integration.runs.response.loading.sync": "Running…",
@@ -1415,9 +1419,6 @@
   "integration.workflows.table.menu.action.pause": "Pause",
   "integration.workflows.table.menu.actions.aria": "Actions for {name}",
   "integration.workflows.table.menu.actions.label": "Actions",
-  "integration.workflows.table.mode.async": "async",
-  "integration.workflows.table.mode.caller": "caller",
-  "integration.workflows.table.mode.sync": "sync",
   "integration.workflows.table.search.placeholder": "Search workflows…",
   "integration.workflows.table.state.empty": "No workflows yet.",
   "integration.workflows.table.status.build.building": "Building…",

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

@@ -8,6 +8,7 @@ import { createPollBudget, SAFETY_POLL_MS } from "../../utils/pollBudget";
 import { deadLetterStatusClass, deadLetterStatusLabel } from "../../utils/statusStyle";
 import { errorReason } from "../../utils/apiError";
 import { formatDateTime } from "../../utils/formatDateTime";
+import { triggerTypeLabel } from "../../data/integrationNodeCatalog";
 const t = useIntegrationsT();
 useHead({ title: () => t("integration.runs.list.head.title") });
 const route = useRoute();
@@ -225,7 +226,7 @@ function workflowNameOf(dl) {
               <div class="text-sm break-words">{{ dl.reason || t("integration.deadLetters.reason.fallback") }}</div>
               <div class="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-muted-foreground font-mono">
                 <span>#{{ dl.id }}</span>
-                <span v-if="dl.source">{{ dl.source }}</span>
+                <span v-if="dl.source">{{ triggerTypeLabel(dl.source) }}</span>
                 <span v-if="dl.trigger_handle">↳ {{ dl.trigger_handle }}</span>
                 <span>{{ formatDateTime(dl.created_at) }}</span>
               </div>

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

@@ -42,6 +42,7 @@ import { createPollBudget, SAFETY_POLL_MS } from "../../../utils/pollBudget";
 import { BUILD_SETTLE_POLL_MS, BUILD_SETTLE_TIMEOUT_MS, createBuildSettle, isBuildUnsettled } from "../../../utils/buildSettle";
 import { splitRunOutputs } from "../../../utils/runOutputs";
 import { isTerminalRun, unwrapRun } from "../../../utils/runEnvelope";
+import { isFailedRun, reasonText, runFailureFromSteps } from "../../../utils/runFailure";
 import { findingsSummary, groupFindingsByNode, nodeDisplayLabel } from "../../../utils/validationFindings";
 import { payloadFieldsFromBlob } from "../../../data/payloadForm";
 import { eventTopicOf } from "../../../data/eventTrigger";
@@ -49,6 +50,7 @@ import { isShapeIssue, saveRefusalLines } from "../../../data/saveRefusal";
 import WorkflowIconView from "../../../components/Integrations/WorkflowIconView.vue";
 import { DEFAULT_RUN_DIRECTION, DEFAULT_RUN_SORT } from "../../../utils/runFeedQuery";
 import { keepOpenBeside } from "../../../utils/dialog";
+import { executionModeLabel } from "../../../utils/executionMode";
 const t = useIntegrationsT();
 const route = useRoute();
 const router = useRouter();
@@ -323,7 +325,7 @@ async function onRevisionRestored() {
   draft.value = null;
   settleBuildStatus();
 }
-const { trigger: triggerRun, loadForWorkflow, fetchRun, getRun, retryRun } = useIntegrationsRuns();
+const { trigger: triggerRun, loadForWorkflow, fetchRun, getRun, getSteps, retryRun } = useIntegrationsRuns();
 const running = ref(false);
 const waitingMode = ref(null);
 const payloadText = ref("{}");
@@ -338,6 +340,35 @@ const followingRun = ref(false);
 const runModalMode = ref("sync");
 const runRefused = ref(false);
 const runModalRunId = ref(null);
+const runFailure = ref(null);
+let runFailureFor = null;
+const RUN_FAILURE_REREAD_MS = 1500;
+async function loadRunFailure(runId, fallbackCause) {
+  if (!workflow.value || runFailureFor === runId) return;
+  runFailureFor = runId;
+  runFailure.value = { step: null, cause: fallbackCause };
+  for (let attempt = 0; attempt < 2; attempt++) {
+    if (attempt > 0) await new Promise((resolve) => setTimeout(resolve, RUN_FAILURE_REREAD_MS));
+    if (runFailureFor !== runId || !workflow.value) return;
+    try {
+      const res = await getSteps(workflow.value.id, runId, false);
+      if (runFailureFor !== runId) return;
+      const found = runFailureFromSteps(
+        res?.steps,
+        shownBlob.value?.nodes ?? [],
+        fallbackCause
+      );
+      runFailure.value = found;
+      if (found.step) return;
+    } catch {
+    }
+  }
+}
+watch(runObject, (run2) => {
+  const id2 = extractRunId(run2);
+  if (!id2 || !isTerminalRun(run2) || !isFailedRun(run2)) return;
+  void loadRunFailure(id2, reasonText(run2?.error));
+});
 function extractRunId(res) {
   if (res && typeof res === "object" && "id" in res) {
     const id2 = res.id;
@@ -421,6 +452,8 @@ async function run(mode) {
   syncResponse.value = null;
   syncError.value = null;
   runRefused.value = false;
+  runFailure.value = null;
+  runFailureFor = null;
   if (mode === "sync") {
     try {
       syncResponse.value = await triggerRun(workflow.value.id, payload, "sync");
@@ -429,6 +462,9 @@ async function run(mode) {
     } catch (e) {
       await reportRunFailure(e, syncErrorMessage);
       runModalRunId.value = bodyRunId(e);
+      if (runModalRunId.value && e instanceof IntegrationsApiError && e.status === 422) {
+        void loadRunFailure(runModalRunId.value, reasonText(e.body?.error));
+      }
     } finally {
       syncLoading.value = false;
       void loadRuns(1);
@@ -755,7 +791,7 @@ const EXECUTION_MODES = computed(() => [
   { value: "caller_decides", label: t("integration.editor.executionMode.callerDecides.label"), hint: t("integration.editor.executionMode.callerDecides.hint") }
 ]);
 function modeLabel(m) {
-  return m === "sync_only" ? t("integration.editor.executionMode.sync.short") : m === "caller_decides" ? t("integration.editor.executionMode.callerDecides.label") : t("integration.editor.executionMode.async.short");
+  return executionModeLabel(m, executionModeLabel("async_only"));
 }
 const tagSuggestions = computed(() => {
   const all = /* @__PURE__ */ new Set();
@@ -1318,6 +1354,7 @@ async function confirmDeactivate() {
       :error="syncError"
       :run-id="runModalRunId"
       :refused="runRefused"
+      :failure="runFailure"
       @update:open="(v) => syncOpen = v"
       @view-run="viewRunFromModal"
     />

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

@@ -0,0 +1,59 @@
+/**
+ * Where on the canvas a fit may put the drawing, given what floats over it.
+ *
+ * The Map, *Add node* and the control pane float **over** the canvas rather than
+ * beside it, and a plain `fitView` centres the drawing in the whole canvas — so a
+ * card can land under a panel, where it takes no pointer (PO-660). This works out
+ * the part of the canvas no shown panel covers and turns it into the per-side
+ * padding `fitView` takes, so the canvas library still does the fit and the
+ * animation; it is only told which rectangle to fit into.
+ *
+ * Pure on purpose: everything is a rectangle in screen pixels, measured by the
+ * caller, so the geometry is provable without a browser (`canvasFit.test.ts`).
+ */
+/** A rectangle in screen pixels, edges rather than a size. */
+export interface Box {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+/** The drawing's extent in the workflow's own coordinates. */
+export interface DrawingSize {
+    width: number;
+    height: number;
+}
+/** The per-side padding `fitView` accepts, as pixel strings. */
+export interface FitPadding {
+    top: `${number}px`;
+    right: `${number}px`;
+    bottom: `${number}px`;
+    left: `${number}px`;
+}
+/**
+ * Every maximal rectangle of `canvas` that none of `panels` covers.
+ *
+ * Each panel splits each free rectangle it overlaps into what lies left, right,
+ * above and below it; a rectangle another one contains is dropped. A panel
+ * outside the canvas, or one with no area, changes nothing.
+ */
+export declare function freeRectangles(canvas: Box, panels: Box[]): Box[];
+/**
+ * The free rectangle the drawing is fitted into: of those that show it nearly as
+ * large as the best one does (`CENTRAL_SHARE`), the one whose centre lies nearest
+ * the canvas's centre — so the drawing sits in the middle of the canvas where the
+ * panels allow it, rather than tucked into a strip beside one of them.
+ *
+ * A rectangle narrower or lower than `MIN_SIDE` is passed over while a larger
+ * one exists. When the panels leave nothing larger, the drawing still goes into
+ * the best of what is left and is shown smaller — the answer the ticket chose
+ * over collapsing a panel the author opened. Only when no free room exists at
+ * all is the whole canvas used.
+ */
+export declare function fitArea(canvas: Box, panels: Box[], drawing: DrawingSize, minZoom: number, maxZoom: number): Box;
+/**
+ * The padding that makes `fitView` fit into `area` rather than into `canvas`:
+ * the distance from each canvas edge to the area's edge, plus the editor's usual
+ * margin inside the area.
+ */
+export declare function paddingFor(canvas: Box, area: Box): FitPadding;