@revenexx/studio-integrations 3.7.0 → 3.8.0

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;

package/dist/runtime/utils/canvasFit.js

@@ -0,0 +1,78 @@
+const PADDING = 0.2;
+const MIN_SIDE = 160;
+function width(b) {
+  return b.right - b.left;
+}
+function height(b) {
+  return b.bottom - b.top;
+}
+function overlaps(a, b) {
+  return a.left < b.right && b.left < a.right && a.top < b.bottom && b.top < a.bottom;
+}
+function contains(outer, inner) {
+  return outer.left <= inner.left && outer.top <= inner.top && outer.right >= inner.right && outer.bottom >= inner.bottom;
+}
+function sidePadding(length) {
+  return Math.floor((length - length / (1 + PADDING)) * 0.5);
+}
+export function freeRectangles(canvas, panels) {
+  let free = [canvas];
+  for (const raw of panels) {
+    const panel = {
+      left: Math.max(raw.left, canvas.left),
+      top: Math.max(raw.top, canvas.top),
+      right: Math.min(raw.right, canvas.right),
+      bottom: Math.min(raw.bottom, canvas.bottom)
+    };
+    if (width(panel) <= 0 || height(panel) <= 0) continue;
+    const next = [];
+    for (const r of free) {
+      if (!overlaps(r, panel)) {
+        next.push(r);
+        continue;
+      }
+      if (panel.left > r.left) next.push({ ...r, right: panel.left });
+      if (panel.right < r.right) next.push({ ...r, left: panel.right });
+      if (panel.top > r.top) next.push({ ...r, bottom: panel.top });
+      if (panel.bottom < r.bottom) next.push({ ...r, top: panel.bottom });
+    }
+    free = next.filter((r, i) => !next.some((o, j) => j !== i && contains(o, r) && (!contains(r, o) || j < i)));
+  }
+  return free;
+}
+function zoomInto(area, drawing, minZoom, maxZoom) {
+  const w = width(area) - 2 * sidePadding(width(area));
+  const h = height(area) - 2 * sidePadding(height(area));
+  const zoom = Math.min(w / Math.max(drawing.width, 1), h / Math.max(drawing.height, 1));
+  return Math.min(maxZoom, Math.max(minZoom, zoom));
+}
+const CENTRAL_SHARE = 0.75;
+export function fitArea(canvas, panels, drawing, minZoom, maxZoom) {
+  const free = freeRectangles(canvas, panels).filter((r) => width(r) > 0 && height(r) > 0);
+  const roomy = free.filter((r) => width(r) >= MIN_SIDE && height(r) >= MIN_SIDE);
+  const usable = roomy.length ? roomy : free;
+  if (!usable.length) return canvas;
+  const zooms = usable.map((r) => zoomInto(r, drawing, minZoom, maxZoom));
+  const floor = Math.max(...zooms) * CENTRAL_SHARE - 1e-6;
+  const cx = (canvas.left + canvas.right) / 2;
+  const cy = (canvas.top + canvas.bottom) / 2;
+  const offCentre = (r) => Math.hypot((r.left + r.right) / 2 - cx, (r.top + r.bottom) / 2 - cy);
+  let best = null;
+  for (const [i, r] of usable.entries()) {
+    if (zooms[i] < floor) continue;
+    if (best === null || offCentre(r) < offCentre(best) - 1e-6 || Math.abs(offCentre(r) - offCentre(best)) <= 1e-6 && width(r) * height(r) > width(best) * height(best)) {
+      best = r;
+    }
+  }
+  return best ?? canvas;
+}
+export function paddingFor(canvas, area) {
+  const padX = sidePadding(width(area));
+  const padY = sidePadding(height(area));
+  return {
+    top: `${area.top - canvas.top + padY}px`,
+    right: `${canvas.right - area.right + padX}px`,
+    bottom: `${canvas.bottom - area.bottom + padY}px`,
+    left: `${area.left - canvas.left + padX}px`
+  };
+}

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

@@ -0,0 +1,18 @@
+import type { WorkflowExecutionMode } from '../types/integrations.js';
+/**
+ * The message key that names an execution mode in a compact badge (PO-615).
+ *
+ * Two surfaces say it: the Mode column of the workflows list and the badge beside
+ * the name in a workflow's header. They used to read two sets of keys, and so the
+ * list wrote "ASYNC" where the header wrote "Asynchron" for the same workflow. One
+ * function keeps the word in one place — the lesson `triggerTypeLabel` was written
+ * on. Caller decides has no shorter form than its choice label, so both surfaces
+ * use that.
+ *
+ * A mode the studio does not know yet — or none at all — has no key: the caller
+ * decides what an unknown mode reads as, because the list shows a dash where the
+ * header falls back to the default mode.
+ */
+export declare function executionModeLabelKey(mode: WorkflowExecutionMode | string | null | undefined): string | null;
+/** The short word for an execution mode in the reader's language, or `fallback` for one without a key. */
+export declare function executionModeLabel(mode: WorkflowExecutionMode | string | null | undefined, fallback?: string): string;

package/dist/runtime/utils/executionMode.js

@@ -0,0 +1,17 @@
+import { useIntegrationsT } from "../composables/useIntegrationsT.js";
+export function executionModeLabelKey(mode) {
+  switch (mode) {
+    case "async_only":
+      return "integration.editor.executionMode.async.short";
+    case "sync_only":
+      return "integration.editor.executionMode.sync.short";
+    case "caller_decides":
+      return "integration.editor.executionMode.callerDecides.label";
+    default:
+      return null;
+  }
+}
+export function executionModeLabel(mode, fallback = "\u2014") {
+  const key = executionModeLabelKey(mode);
+  return key ? useIntegrationsT()(key) : fallback;
+}

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

@@ -0,0 +1,24 @@
+/**
+ * Narrowing a list of options to what an operator typed, and ordering what is
+ * left by how well it matches (PO-650).
+ *
+ * An option has a label the operator reads and a value the platform stores —
+ * often a code (`EN-US`, `DE`). A term is first a guess at the start of one of
+ * them, and only after that something the label merely contains: "EN" is meant
+ * as English, not as the middle of "Armenisch". So the order is
+ *
+ *   1. the value starts with the term,
+ *   2. the label starts with it,
+ *   3. a word of the label starts with it,
+ *   4. the label or the value contains it,
+ *   5. every word of it is in the label, in any order ("Roth Carl"),
+ *
+ * and an option that matches none of them is not offered. Within a rank the
+ * options keep the order they came in, which is the order the platform chose.
+ */
+/**
+ * The options that match `term`, best match first. An empty term (or one of
+ * blanks) leaves the list as it is; a term nothing matches leaves it empty —
+ * never the whole list, which is what an operator would read as "matches".
+ */
+export declare function narrowOptions<T>(options: readonly T[], term: string, labelOf: (option: T) => string, valueOf: (option: T) => string): T[];

package/dist/runtime/utils/optionSearch.js

@@ -0,0 +1,31 @@
+var Rank = /* @__PURE__ */ ((Rank2) => {
+  Rank2[Rank2["ValuePrefix"] = 0] = "ValuePrefix";
+  Rank2[Rank2["LabelPrefix"] = 1] = "LabelPrefix";
+  Rank2[Rank2["WordPrefix"] = 2] = "WordPrefix";
+  Rank2[Rank2["Contains"] = 3] = "Contains";
+  Rank2[Rank2["AllWords"] = 4] = "AllWords";
+  return Rank2;
+})(Rank || {});
+function words(label) {
+  return label.split(/[^\p{L}\p{N}]+/u).filter(Boolean);
+}
+function rankOf(label, value, term) {
+  if (value.startsWith(term)) return 0 /* ValuePrefix */;
+  if (label.startsWith(term)) return 1 /* LabelPrefix */;
+  if (words(label).some((word) => word.startsWith(term))) return 2 /* WordPrefix */;
+  if (label.includes(term) || value.includes(term)) return 3 /* Contains */;
+  const termWords = words(term);
+  if (termWords.length > 1 && termWords.every((word) => label.includes(word))) return 4 /* AllWords */;
+  return void 0;
+}
+export function narrowOptions(options, term, labelOf, valueOf) {
+  const needle = term.trim().toLocaleLowerCase();
+  if (!needle) return [...options];
+  const ranked = [];
+  options.forEach((option, index) => {
+    const rank = rankOf(labelOf(option).toLocaleLowerCase(), valueOf(option).toLocaleLowerCase(), needle);
+    if (rank !== void 0) ranked.push({ option, rank, index });
+  });
+  ranked.sort((a, b) => a.rank - b.rank || a.index - b.index);
+  return ranked.map((r) => r.option);
+}

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

@@ -0,0 +1,37 @@
+import type { RunStepRow } from '../types/integrations.js';
+/**
+ * Why a run failed, in the two parts an author reads it by (PO-690): the step
+ * it failed at, named the way the canvas names it, and the cause in the step's
+ * own words.
+ *
+ * Either may be missing. The step is unknown until the run's steps have been read,
+ * and stays unknown where they cannot be; the cause then falls back to what the run
+ * itself recorded, which is less precise but is still the platform's reason.
+ */
+export interface RunFailure {
+    step: string | null;
+    cause: string | null;
+}
+/** A node as the blob carries it, enough to look a step's node up by id and name it. */
+export interface FailureNode {
+    id: string;
+    name?: unknown;
+    nodeSlug: string;
+    nodeVersion?: string;
+}
+/** Whether a run, as the platform reports it, ended in failure. */
+export declare function isFailedRun(run: {
+    status?: unknown;
+} | null | undefined): boolean;
+/** A reason that is text with something in it, or nothing. */
+export declare function reasonText(value: unknown): string | null;
+/**
+ * The failure read off a run's steps, with `fallbackCause` where no step says why.
+ *
+ * The LAST failed row is the one taken: a step retried by the engine leaves a row
+ * per attempt, and the final one is the failure that ended the run. A failed step
+ * is named after its node on the canvas; a node no longer on the canvas — the run
+ * is of a saved version since edited — is named the way the catalogue names its
+ * kind, never by the generated id.
+ */
+export declare function runFailureFromSteps(steps: readonly RunStepRow[] | null | undefined, nodes: readonly FailureNode[], fallbackCause: string | null): RunFailure;

package/dist/runtime/utils/runFailure.js

@@ -0,0 +1,16 @@
+import { nodeDisplayName } from "./nodeDisplayName.js";
+import { stepError } from "./stepError.js";
+const FAILED_RUN = /* @__PURE__ */ new Set(["failed", "terminated", "timed_out"]);
+export function isFailedRun(run) {
+  return FAILED_RUN.has(String(run?.status ?? "").toLowerCase());
+}
+export function reasonText(value) {
+  return typeof value === "string" && value.trim() !== "" ? value.trim() : null;
+}
+export function runFailureFromSteps(steps, nodes, fallbackCause) {
+  const failed = [...steps ?? []].reverse().find((s) => String(s.status).toLowerCase() === "failed");
+  if (!failed) return { step: null, cause: fallbackCause };
+  const node = nodes.find((n) => n.id === failed.node_id);
+  const step = node ? nodeDisplayName(node) : nodeDisplayName({ nodeSlug: failed.node_slug });
+  return { step, cause: stepError(failed.error)?.message ?? fallbackCause };
+}