@revenexx/studio-integrations 0.5.1 → 0.7.0

package/dist/runtime/composables/useCredentialTypes.js

@@ -1,11 +1,15 @@
 import { useIntegrationsApi } from "./integrationsApi.js";
+import { useIntegrationsT } from "./useIntegrationsT.js";
 import { IntegrationsApiError } from "../utils/apiError.js";
+import { useLoadGate } from "./useLoadGate.js";
 export function useCredentialTypes() {
   const types = useState("integrations.credentialTypes", () => []);
   const loading = useState("integrations.credentialTypes.loading", () => false);
   const error = useState("integrations.credentialTypes.error", () => null);
   const loaded = useState("integrations.credentialTypes.loaded", () => false);
+  const gate = useLoadGate("integrations.credentialTypes", { loading, loaded });
   const api = useIntegrationsApi();
+  const t = useIntegrationsT();
   function normalize(res) {
     const obj = res;
     if (Array.isArray(obj)) return obj;
@@ -17,22 +21,20 @@ export function useCredentialTypes() {
     return e?.message ?? fallback;
   }
   async function load(force = false) {
-    if (loading.value) return types.value;
-    if (loaded.value && !force) return types.value;
-    loading.value = true;
+    if (!await gate.claim(force)) return types.value;
     error.value = null;
     try {
       types.value = normalize(await api.get("/credential-types"));
       loaded.value = true;
     } catch (e) {
-      error.value = captureError(e, "Could not load credential types.");
+      error.value = captureError(e, t("integration.credentials.error.loadTypes"));
     } finally {
-      loading.value = false;
+      gate.release();
     }
     return types.value;
   }
   function bySlug(slug) {
-    return types.value.find((t) => t.slug === slug) ?? null;
+    return types.value.find((t2) => t2.slug === slug) ?? null;
   }
   async function get(slug) {
     const cached = bySlug(slug);

package/dist/runtime/composables/useIntegrationsAudit.js

@@ -1,11 +1,13 @@
 import { useIntegrationsApi } from "./integrationsApi.js";
 import { IntegrationsApiError } from "../utils/apiError.js";
+import { useLoadGate } from "./useLoadGate.js";
 export function useIntegrationsAudit() {
   const api = useIntegrationsApi();
   const entries = useState("int.audit.entries", () => []);
   const nextCursor = useState("int.audit.cursor", () => null);
   const loading = useState("int.audit.loading", () => false);
   const error = useState("int.audit.error", () => null);
+  const gate = useLoadGate("int.audit", { loading });
   function qs(filters, cursor) {
     const p = new URLSearchParams();
     if (filters.sub) p.set("sub", filters.sub);
@@ -16,8 +18,7 @@ export function useIntegrationsAudit() {
     return p.toString();
   }
   async function load(filters = {}, append = false) {
-    if (loading.value) return;
-    loading.value = true;
+    if (!await gate.claim()) return;
     error.value = null;
     try {
       const res = await api.get(
@@ -29,7 +30,7 @@ export function useIntegrationsAudit() {
     } catch (e) {
       error.value = e instanceof IntegrationsApiError ? e.message : e?.message ?? "Could not load the audit log.";
     } finally {
-      loading.value = false;
+      gate.release();
     }
   }
   function loadMore(filters = {}) {

package/dist/runtime/composables/useIntegrationsCredentials.js

@@ -1,12 +1,16 @@
 import { computed } from "vue";
 import { useIntegrationsApi } from "./integrationsApi.js";
+import { useIntegrationsT } from "./useIntegrationsT.js";
 import { IntegrationsApiError } from "../utils/apiError.js";
+import { useLoadGate } from "./useLoadGate.js";
 export function useIntegrationsCredentials() {
   const credentials = useState("integrations.credentials", () => []);
   const loading = useState("integrations.credentials.loading", () => false);
   const error = useState("integrations.credentials.error", () => null);
   const loaded = useState("integrations.credentials.loaded", () => false);
+  const gate = useLoadGate("integrations.credentials", { loading, loaded });
   const api = useIntegrationsApi();
+  const t = useIntegrationsT();
   function normalize(res) {
     const obj = res;
     if (Array.isArray(obj)) return obj;
@@ -21,17 +25,15 @@ export function useIntegrationsCredentials() {
     return e?.message ?? fallback;
   }
   async function load(force = false) {
-    if (loading.value) return credentials.value;
-    if (loaded.value && !force) return credentials.value;
-    loading.value = true;
+    if (!await gate.claim(force)) return credentials.value;
     error.value = null;
     try {
       credentials.value = normalize(await api.get("/credentials"));
       loaded.value = true;
     } catch (e) {
-      error.value = captureError(e, "Could not load credentials.");
+      error.value = captureError(e, t("integration.credentials.error.loadFailed"));
     } finally {
-      loading.value = false;
+      gate.release();
     }
     return credentials.value;
   }
@@ -60,7 +62,7 @@ export function useIntegrationsCredentials() {
       const res = await api.post("/credentials/test", { credential_type_slug: credentialTypeSlug, config });
       return res?.ok === false ? res : { ok: true };
     } catch (e) {
-      return { ok: false, error: captureError(e, "Connection test failed.") };
+      return { ok: false, error: captureError(e, t("integration.credentials.error.testFailed")) };
     }
   }
   async function test(id) {
@@ -68,13 +70,13 @@ export function useIntegrationsCredentials() {
       const res = await api.post(`/credentials/${encodeURIComponent(id)}/test`);
       return res?.ok === false ? res : { ok: true };
     } catch (e) {
-      return { ok: false, error: captureError(e, "Connection test failed.") };
+      return { ok: false, error: captureError(e, t("integration.credentials.error.testFailed")) };
     }
   }
   async function oauthAuthorizeUrl(id) {
     const res = await api.post(`/credentials/${encodeURIComponent(id)}/oauth/authorize-url`);
     const authorizeUrl = res?.authorize_url ?? res?.data?.authorize_url;
-    if (!authorizeUrl) throw new IntegrationsApiError(0, res, "No authorize URL returned.");
+    if (!authorizeUrl) throw new IntegrationsApiError(0, res, t("integration.credentials.error.noAuthorizeUrl"));
     return authorizeUrl;
   }
   const total = computed(() => credentials.value.length);

package/dist/runtime/composables/useIntegrationsDeadLetters.js

@@ -1,5 +1,6 @@
 import { computed } from "vue";
 import { useIntegrationsApi } from "./integrationsApi.js";
+import { useLoadGate } from "./useLoadGate.js";
 export function useIntegrationsDeadLetters() {
   const api = useIntegrationsApi();
   async function list(workflowId, opts = {}) {
@@ -17,15 +18,14 @@ export function useIntegrationsDeadLetters() {
   }
   const replay = (id) => api.post(`/dead-letters/${id}/replay`, {});
   const discard = (id) => api.post(`/dead-letters/${id}/discard`, {});
-  const { workflows, load: loadWorkflows } = useIntegrationsWorkflows();
+  const { workflows, load: loadWorkflows, loaded: workflowsLoaded } = useIntegrationsWorkflows();
   const globalItems = useState("integrations.deadletters.global", () => []);
   const globalLoading = useState("integrations.deadletters.global.loading", () => false);
   const globalLoaded = useState("integrations.deadletters.global.loaded", () => false);
+  const gate = useLoadGate("integrations.deadletters.global", { loading: globalLoading, loaded: globalLoaded });
   const pendingCount = computed(() => globalItems.value.filter((i) => i.status === "pending").length);
   async function loadGlobal(force = false) {
-    if (globalLoading.value) return globalItems.value;
-    if (globalLoaded.value && !force) return globalItems.value;
-    globalLoading.value = true;
+    if (!await gate.claim(force)) return globalItems.value;
     try {
       await loadWorkflows();
       const MAX_PAGES = 20;
@@ -41,10 +41,11 @@ export function useIntegrationsDeadLetters() {
         return out;
       }));
       globalItems.value = per.flatMap((p) => p.status === "fulfilled" ? p.value : []).sort((a, b) => new Date(b.created_at ?? 0).getTime() - new Date(a.created_at ?? 0).getTime());
-      globalLoaded.value = true;
+      globalLoaded.value = workflowsLoaded.value && per.every((p) => p.status === "fulfilled");
     } finally {
-      globalLoading.value = false;
+      gate.release();
     }
+    return globalItems.value;
   }
   return { list, replay, discard, loadGlobal, globalItems, globalLoading, pendingCount };
 }

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

@@ -6,6 +6,18 @@
  * Pages opt in by calling `useIntegrationsFocus().enable()` in onMounted
  * and `disable()` in onUnmounted (we provide an `autoEnable()` helper
  * that wires both).
+ *
+ * **A page that hides the sidebar renders the control that brings it back** — see
+ * specs/studio-navigation.md. The control belongs to the page and not to the
+ * shell, because the cockpit ships its own shell and reads this same state: a
+ * control in the module's shell would be missing in the cockpit, which is the
+ * one-way switch PO-273 was filed about.
+ *
+ * `autoEnable()` *is* that one-way switch, and `toggle()` has no caller: the
+ * workflow editor derives the state from a remembered preference and applies it
+ * with `enable()`/`disable()`, which a derived state can do idempotently and a
+ * flip cannot. Both are kept because they are part of what this module publishes,
+ * and a host driving the fold itself may still want them.
  */
 export declare function useIntegrationsFocus(): {
     focused: any;

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

@@ -0,0 +1,26 @@
+import type { ComputedRef } from 'vue';
+/**
+ * The studio's interface language, for a host to read and to set.
+ *
+ * This is the seam between the application the studio is embedded in and the
+ * text the Integrations API returns. The module is published and installed into
+ * hosts it knows nothing about, so it never reads a browser store or a cockpit
+ * i18n instance: the host owns the choice and hands it over here.
+ *
+ * A host with a language switcher wires it once, at boot:
+ *
+ *   const { setLocale } = useIntegrationsLocale()
+ *   watch(uiLocale, l => setLocale(l), { immediate: true })
+ *
+ * A host with a fixed language sets `studioIntegrations.locale` in its Nuxt
+ * config and never calls this. Neither is required — with nothing set the
+ * studio renders English.
+ *
+ * `locale` is reactive, and so is every name, label and description on screen:
+ * they are resolved through the same value, so a switch reaches surfaces that
+ * are already mounted without reloading anything.
+ */
+export declare function useIntegrationsLocale(): {
+    locale: ComputedRef<string>;
+    setLocale: (locale: string | null | undefined) => void;
+};

package/dist/runtime/composables/useIntegrationsLocale.js

@@ -0,0 +1,8 @@
+import { computed } from "vue";
+import { setStudioLocale, studioLocale } from "../utils/localize.js";
+export function useIntegrationsLocale() {
+  return {
+    locale: computed(() => studioLocale()),
+    setLocale: setStudioLocale
+  };
+}

package/dist/runtime/composables/useIntegrationsNodes.js

@@ -1,16 +1,18 @@
 import { applyNodeCatalog, findManifest } from "../data/integrationNodeCatalog.js";
 import { resolveLocalized } from "../utils/localize.js";
 import { useIntegrationsApi } from "./integrationsApi.js";
+import { useIntegrationsT } from "./useIntegrationsT.js";
 import { IntegrationsApiError } from "../utils/apiError.js";
+import { useLoadGate } from "./useLoadGate.js";
 export function useIntegrationsNodes() {
   const loading = useState("integrations.nodes.loading", () => false);
   const error = useState("integrations.nodes.error", () => null);
   const loaded = useState("integrations.nodes.loaded", () => false);
+  const gate = useLoadGate("integrations.nodes", { loading, loaded });
   const api = useIntegrationsApi();
+  const t = useIntegrationsT();
   async function load(force = false) {
-    if (loading.value) return;
-    if (loaded.value && !force) return;
-    loading.value = true;
+    if (!await gate.claim(force)) return;
     error.value = null;
     try {
       const res = await api.get("/nodes");
@@ -27,9 +29,9 @@ export function useIntegrationsNodes() {
       loaded.value = true;
     } catch (e) {
       applyNodeCatalog([]);
-      error.value = e instanceof IntegrationsApiError ? e.message : e?.message ?? "Could not load nodes.";
+      error.value = e instanceof IntegrationsApiError ? e.message : e?.message ?? t("integration.nodes.error.loadFailed");
     } finally {
-      loading.value = false;
+      gate.release();
     }
   }
   return { loading, error, loaded, load, findManifest, resolveLocalized };

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

@@ -0,0 +1,149 @@
+import type { ComputedRef, Ref } from 'vue';
+/**
+ * The Studio's single Talkback subscriber.
+ *
+ * The integrations service publishes its run, workflow and bundle-build lifecycle
+ * onto the platform event bus (`App\Enums\OutboxTopic` → `event_outbox` → the relay
+ * → NATS → the Talkback bridge → Centrifugo), so a browser can learn that a run
+ * finished — or that a build is done — instead of asking every three seconds. This
+ * is the browser end of that chain, and everything it hands out is a **refetch
+ * signal**: the envelope carries no run payload — the bus has a 1 MB cap — so "the
+ * data arrived over the socket" was never on offer, and every surface still reloads
+ * through its own loader.
+ *
+ * ONE SUBSCRIBER FOR THE WHOLE APPLICATION, and this is the part that is not a
+ * style preference. `talkback-js` deduplicates on `envelope.id` **across the whole
+ * client**, before it dispatches to a channel's listeners (`src/core/talkback.ts`,
+ * `seen.admit`). The bridge publishes every event twice — once to the action
+ * channel, once to the resource channel, which is contractual (ADR-0094) — so if
+ * the runs grid took the action channel and an open detail panel took the resource
+ * channel, only whichever arrived first would fire and the other would silently
+ * never refetch. Two components cannot each own a subscription to the same event.
+ * So the channels are owned here, once, and the surfaces watch the signals below.
+ *
+ * ONLY ACTION CHANNELS, for the same reason: subscribing to just one of the two
+ * channels an event lands on makes each event exactly one delivery, with nothing
+ * to lose the race against. A resource channel would buy a narrower filter that
+ * `lastRunEvent.topicId` already provides.
+ *
+ * ONE ACTION IS ONE CHANNEL. The action is the fourth topic segment and Centrifugo
+ * has no wildcards, so watching the five run actions costs five subscriptions, and
+ * the eleven topics the service emits cost eleven for the whole application. The
+ * three-segment form (`revenexx.integrations.run`) is the resource KIND channel,
+ * which the bridge never publishes to.
+ *
+ * SAFE WHEN REALTIME IS OFF, which is the production state in the cockpit until
+ * the edge is shown to pass a WebSocket upgrade (PE-382 T0.2). With no
+ * `talkbackHost` configured nothing is subscribed, `delivering` stays false, and
+ * every caller keeps the polling it had — as it does for a tenant that is
+ * configured but whose channels never carry anything.
+ */
+/** Mirrors `App\Enums\OutboxTopic` in `revenexx/integrations`. */
+export declare const RUN_TOPIC = "revenexx.integrations.run";
+export declare const WORKFLOW_TOPIC = "revenexx.integrations.workflow";
+/**
+ * The bundle build. Its own entity rather than `workflow.build_started`, because
+ * the service's envelope allows no underscore in a topic segment and Console's
+ * manifest schema allows no hyphen — `build.started` is the only form that passes
+ * both. `topic_id` is still the WORKFLOW's id: a build has no row of its own.
+ */
+export declare const BUILD_TOPIC = "revenexx.integrations.build";
+/** `run.cancelled` also carries a `terminated` status — the two collapse into one topic. */
+export declare const RUN_ACTIONS: readonly ["created", "started", "finished", "failed", "cancelled"];
+/**
+ * There is no `run.deleted`. Runs cascade with their workflow inside Postgres
+ * without firing model events, which is why `workflow.deleted` carries
+ * `cascades_runs: true` instead.
+ */
+export declare const WORKFLOW_ACTIONS: readonly ["created", "updated", "deleted"];
+/**
+ * `started` is emitted per queue ATTEMPT, and the job has three: a failing build
+ * sends started/failed up to three times, with `data.attempt` (1-based) as the
+ * only way to tell a final failure from one that is about to be retried.
+ */
+export declare const BUILD_ACTIONS: readonly ["started", "succeeded", "failed"];
+/** What a surface needs off an envelope. A structural subset of talkback-js's `Envelope`. */
+export interface RealtimeEvent {
+    /** `evt_<ulid>`, the client's deduplication key. Carried for logging. */
+    id: string;
+    /** The fourth topic segment: `finished`, `deleted`, … */
+    action: string;
+    /** The run's or workflow's primary key, as a string. Never a number — see OutboxEnvelope. */
+    topicId: string | null;
+    /** The event's `data` map, e.g. `cascades_runs` on `workflow.deleted`. */
+    data: Record<string, unknown>;
+}
+export interface IntegrationsRealtime {
+    /**
+     * Whether this connection has actually reported something, and therefore
+     * whether a poll may take the long budget (`pollBudget.ts`).
+     *
+     * IT COUNTS DELIVERIES, NOT CONFIGURATION, and that is the whole reason it is
+     * not called `live`. Being subscribed is no evidence of anything: a channel
+     * resolves from the LOCAL subscription, and a tenant whose Console event
+     * catalogue does not mark these topics `channel: true` holds eleven channels
+     * that will never carry a byte (PE-375). Spending that state as a delivery
+     * signal would thin every run surface's refresh by ten with nothing arriving to
+     * make up for it — ten times worse than before any of this existed, silently.
+     * So the budget is only thinned once something has really been delivered.
+     *
+     * What it still cannot say is whether delivery is *continuing*: a socket that
+     * dies quietly after one event keeps reading true, because the per-channel
+     * confirmation that would settle it is not passed through the packages between
+     * Centrifugo and here (`docs/realtime.md`). That is why the poll backs off to a
+     * slow safety interval rather than stopping.
+     */
+    delivering: ComputedRef<boolean>;
+    /** Bumped on every run event. Watch it to refetch a run list. */
+    runTick: Readonly<Ref<number>>;
+    /** Bumped on every workflow event. */
+    workflowTick: Readonly<Ref<number>>;
+    /**
+     * Bumped on every bundle-build event.
+     *
+     * Kept apart from `workflowTick` rather than folded into it: a build is the one
+     * workflow change that happens WITHOUT anybody editing the workflow, and it can
+     * fire six times for a single save (three attempts × started/failed). The runs
+     * grid watches `workflowTick` to catch a cascade-delete and has no business
+     * reloading for build progress.
+     */
+    buildTick: Readonly<Ref<number>>;
+    /** The last run event, for a surface that only cares about one run's id. */
+    lastRunEvent: Readonly<Ref<RealtimeEvent | null>>;
+    lastWorkflowEvent: Readonly<Ref<RealtimeEvent | null>>;
+    /** The last build event. `topicId` is the workflow it belongs to. */
+    lastBuildEvent: Readonly<Ref<RealtimeEvent | null>>;
+    /** The subscribed channel names, for diagnostics. */
+    channels: ComputedRef<string[]>;
+}
+/** The shape a handler receives. Talkback's `Envelope` is assignable to it. */
+export interface EnvelopeLike {
+    id?: unknown;
+    topic?: unknown;
+    topic_id?: unknown;
+    data?: unknown;
+}
+/**
+ * Narrows a publication to the fields a surface acts on.
+ *
+ * Everything is read defensively rather than cast. The envelope crosses four
+ * services to get here (`OutboxEmitter` → the relay → NATS → the bridge), and a
+ * surface that threw on an unexpected shape would take the page down over an event
+ * it could simply have ignored.
+ *
+ * `topic_id` is stringified on purpose: it is a string on the wire — an 18-digit id
+ * loses precision as a float64 above 2^53 — and `OutboxEnvelope` is careful about
+ * that, so nothing here should be the place that turns it back into a number.
+ */
+export declare function toRealtimeEvent(envelope: EnvelopeLike): RealtimeEvent;
+/**
+ * The workflow a run or build event belongs to, or null.
+ *
+ * `WorkflowRunEventObserver`'s payload carries `workflow_id` beside `run_id`, which
+ * is what lets a workflow-scoped surface ignore every other workflow's runs — in a
+ * busy tenant that is the difference between one refetch and a refetch per run in
+ * the account. Null means "cannot tell", and a caller should refetch rather than
+ * assume the event was not for it.
+ */
+export declare function workflowIdOf(event: RealtimeEvent | null): string | null;
+export declare function useIntegrationsRealtime(): IntegrationsRealtime;

package/dist/runtime/composables/useIntegrationsRealtime.js

@@ -0,0 +1,80 @@
+import { computed, effectScope, ref, shallowRef } from "vue";
+export const RUN_TOPIC = "revenexx.integrations.run";
+export const WORKFLOW_TOPIC = "revenexx.integrations.workflow";
+export const BUILD_TOPIC = "revenexx.integrations.build";
+export const RUN_ACTIONS = ["created", "started", "finished", "failed", "cancelled"];
+export const WORKFLOW_ACTIONS = ["created", "updated", "deleted"];
+export const BUILD_ACTIONS = ["started", "succeeded", "failed"];
+export function toRealtimeEvent(envelope) {
+  const topic = typeof envelope.topic === "string" ? envelope.topic : "";
+  const topicId = envelope.topic_id;
+  const data = envelope.data;
+  return {
+    id: typeof envelope.id === "string" ? envelope.id : "",
+    action: topic.split(".")[3] ?? "",
+    topicId: topicId === null || topicId === void 0 ? null : String(topicId),
+    data: data !== null && typeof data === "object" ? data : {}
+  };
+}
+export function workflowIdOf(event) {
+  const id = event?.data.workflow_id;
+  return typeof id === "string" && id ? id : null;
+}
+const runTick = ref(0);
+const workflowTick = ref(0);
+const buildTick = ref(0);
+const lastRunEvent = shallowRef(null);
+const lastWorkflowEvent = shallowRef(null);
+const lastBuildEvent = shallowRef(null);
+const deliveries = computed(() => runTick.value + workflowTick.value + buildTick.value);
+let scope = null;
+let openChannels = null;
+function onRun(envelope) {
+  lastRunEvent.value = toRealtimeEvent(envelope);
+  runTick.value++;
+}
+function onWorkflow(envelope) {
+  lastWorkflowEvent.value = toRealtimeEvent(envelope);
+  workflowTick.value++;
+}
+function onBuild(envelope) {
+  lastBuildEvent.value = toRealtimeEvent(envelope);
+  buildTick.value++;
+}
+function onRunGap() {
+  lastRunEvent.value = null;
+  runTick.value++;
+}
+function onWorkflowGap() {
+  lastWorkflowEvent.value = null;
+  workflowTick.value++;
+}
+function onBuildGap() {
+  lastBuildEvent.value = null;
+  buildTick.value++;
+}
+export function useIntegrationsRealtime() {
+  const { talkback, enabled } = usePlatformTalkback();
+  if (enabled && import.meta.client && !scope) {
+    scope = effectScope(true);
+    scope.run(() => {
+      const subs = [
+        ...RUN_ACTIONS.map((action) => useTalkbackTopic(`${RUN_TOPIC}.${action}`, { handler: onRun, onResync: onRunGap })),
+        ...WORKFLOW_ACTIONS.map((action) => useTalkbackTopic(`${WORKFLOW_TOPIC}.${action}`, { handler: onWorkflow, onResync: onWorkflowGap })),
+        ...BUILD_ACTIONS.map((action) => useTalkbackTopic(`${BUILD_TOPIC}.${action}`, { handler: onBuild, onResync: onBuildGap }))
+      ];
+      openChannels = computed(() => subs.map((s) => s.channel.value).filter((c) => !!c));
+    });
+  }
+  const channels = computed(() => openChannels?.value ?? []);
+  return {
+    delivering: computed(() => deliveries.value > 0 && enabled && !!talkback.value && channels.value.length > 0),
+    runTick,
+    workflowTick,
+    buildTick,
+    lastRunEvent,
+    lastWorkflowEvent,
+    lastBuildEvent,
+    channels
+  };
+}

package/dist/runtime/composables/useIntegrationsRevisions.js

@@ -1,8 +1,10 @@
 import { ref } from "vue";
 import { useIntegrationsApi } from "./integrationsApi.js";
+import { useIntegrationsT } from "./useIntegrationsT.js";
 import { IntegrationsApiError } from "../utils/apiError.js";
 export function useIntegrationsRevisions() {
   const api = useIntegrationsApi();
+  const t = useIntegrationsT();
   const loading = ref(false);
   const error = ref(null);
   function captureError(e, fallback) {
@@ -16,7 +18,7 @@ export function useIntegrationsRevisions() {
       const res = await api.get(`/workflows/${workflowId}/revisions?page=${page}&per_page=${perPage}`);
       return { revisions: res.data ?? [], meta: res.meta };
     } catch (e) {
-      error.value = captureError(e, "Could not load the revision history.");
+      error.value = captureError(e, t("integration.revisions.error.loadFailed"));
       throw e;
     } finally {
       loading.value = false;
@@ -25,12 +27,12 @@ export function useIntegrationsRevisions() {
   async function get(workflowId, revision) {
     const res = await api.get(`/workflows/${workflowId}/revisions/${revision}`);
     const apiBlob = res.blob ?? {};
-    const triggers = (res.triggers ?? []).map((t) => ({
-      id: t.handle ?? String(t.id ?? ""),
-      type: t.type,
-      name: typeof t.name === "string" ? t.name : t.name ?? void 0,
-      active: t.active,
-      config: t.config ?? {}
+    const triggers = (res.triggers ?? []).map((t2) => ({
+      id: t2.handle ?? String(t2.id ?? ""),
+      type: t2.type,
+      name: typeof t2.name === "string" ? t2.name : t2.name ?? void 0,
+      active: t2.active,
+      config: t2.config ?? {}
     }));
     return {
       ...res,

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

@@ -24,7 +24,7 @@ export declare function useIntegrationsRuns(): {
     }) => WorkflowRun[];
     get: (id: string) => WorkflowRun | null;
     fetchRun: (workflowId: number | string, runId: number | string, workflowName: string) => Promise<WorkflowRun>;
-    trigger: (workflowId: number | string, payload?: Record<string, unknown>, mode?: "sync" | "async") => Promise<unknown>;
+    trigger: (workflowId: number | string, payload?: Record<string, unknown>, mode?: "async" | "sync") => Promise<unknown>;
     cancelRun: (workflowId: number | string, runId: number | string, reason?: string) => Promise<unknown>;
     terminateRun: (workflowId: number | string, runId: number | string, reason?: string) => Promise<unknown>;
     retryRun: (workflowId: number | string, runId: number | string) => Promise<unknown>;

package/dist/runtime/composables/useIntegrationsRuns.js

@@ -1,6 +1,8 @@
 import { computed } from "vue";
 import { useIntegrationsApi } from "./integrationsApi.js";
+import { useIntegrationsT } from "./useIntegrationsT.js";
 import { IntegrationsApiError } from "../utils/apiError.js";
+import { useLoadGate } from "./useLoadGate.js";
 function mapStatus(status) {
   switch (status) {
     case "completed":
@@ -29,9 +31,11 @@ export function useIntegrationsRuns() {
   const error = useState("integrations.runs.error", () => null);
   const loaded = useState("integrations.runs.loaded", () => false);
   const reconciling = useState("integrations.runs.reconciling", () => false);
+  const gate = useLoadGate("integrations.runs", { loading, loaded });
   const SYNC_LIMIT = 5;
   const api = useIntegrationsApi();
-  const { workflows, load: loadWorkflows } = useIntegrationsWorkflows();
+  const t = useIntegrationsT();
+  const { workflows, load: loadWorkflows, loaded: workflowsLoaded } = useIntegrationsWorkflows();
   function mapRun(r, workflowName) {
     const startedMs = r.started_at ? new Date(r.started_at).getTime() : null;
     const finishedMs = r.completed_at ? new Date(r.completed_at).getTime() : null;
@@ -45,15 +49,18 @@ export function useIntegrationsRuns() {
       triggerType: "manual",
       startedAt: r.started_at ?? "",
       finishedAt: r.completed_at ?? null,
+      // The list carries the reason a run failed; dropping it here was why every
+      // failure read the same wherever the list is shown. An empty string is not
+      // a reason — it has to fall through to whatever the surface says instead,
+      // or it renders as a blank line where the sentence belongs.
+      errorMessage: r.error || void 0,
       // Derived from the timestamps — the list payload carries no duration.
       durationMs: startedMs != null && finishedMs != null && finishedMs >= startedMs ? finishedMs - startedMs : null,
       steps: []
     };
   }
   async function load(force = false) {
-    if (loading.value) return runs.value;
-    if (loaded.value && !force) return runs.value;
-    loading.value = true;
+    if (!await gate.claim(force)) return runs.value;
     error.value = null;
     try {
       await loadWorkflows();
@@ -92,11 +99,11 @@ export function useIntegrationsRuns() {
           reconciling.value = false;
         }
       }
-      loaded.value = true;
+      loaded.value = workflowsLoaded.value && perWorkflow.every((p) => p.status === "fulfilled");
     } catch (e) {
-      error.value = e instanceof IntegrationsApiError ? e.message : e?.message ?? "Could not load runs.";
+      error.value = e instanceof IntegrationsApiError ? e.message : e?.message ?? t("integration.runs.error.loadFailed");
     } finally {
-      loading.value = false;
+      gate.release();
     }
     return runs.value;
   }

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

@@ -4,6 +4,10 @@ import type { ScheduleEntry } from '../types/integrations.js';
  * sourced from the real triggers sub-resource (useIntegrationsTriggers).
  * Next/last-run timestamps are mocked deterministically (no telemetry
  * endpoint yet).
+ *
+ * Unordered on purpose: the page's table sorts, by its own default and by
+ * whichever column the operator clicks, so an order established here would be
+ * replaced before anyone saw it.
  */
 export declare function useIntegrationsSchedules(): {
     entries: import("vue").ComputedRef<ScheduleEntry[]>;

package/dist/runtime/composables/useIntegrationsSchedules.js

@@ -1,4 +1,5 @@
 import { computed } from "vue";
+import { scheduleTimezone } from "../utils/schedule.js";
 export function useIntegrationsSchedules() {
   const { all, loading, loadAll } = useIntegrationsTriggers();
   const entries = computed(
@@ -10,13 +11,19 @@ export function useIntegrationsSchedules() {
         workflowId: t.workflow_id,
         workflowName: t.workflowName,
         triggerId,
-        cron: String(cfg.cron ?? "* * * * *"),
-        timezone: String(cfg.timezone ?? "UTC"),
+        // Never invented: a trigger without an expression says so on the page.
+        // Standing in `* * * * *` for it would read as "every minute", and with
+        // the expression no longer on screen that guess would be invisible.
+        cron: typeof cfg.cron === "string" && cfg.cron.trim() !== "" ? cfg.cron : null,
+        // The schedule's own zone, or the platform's default where it has none —
+        // from the same helper the trigger settings read, so one schedule cannot
+        // be shown in two zones on two screens.
+        timezone: scheduleTimezone(cfg.timezone),
         active: t.active,
         nextRunAt: t.active ? mockNextRun(t.workflow_id, triggerId) : null,
         lastRunAt: t.active ? mockLastRun(t.workflow_id, triggerId) : null
       };
-    }).sort((a, b) => a.cron.localeCompare(b.cron))
+    })
   );
   const total = computed(() => entries.value.length);
   const activeCount = computed(() => entries.value.filter((e) => e.active).length);