@revenexx/studio-integrations 1.1.1 → 1.2.0

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

@@ -5,8 +5,12 @@ import { NodeToolbar } from "@vue-flow/node-toolbar";
 import * as Lucide from "lucide-vue-next";
 import { Copy, DangerTriangle as AlertTriangle, RefreshCircle as Loader2, Repeat, TrashBinMinimalistic as TrashBin } from "#solar-icons";
 import { NODE_CATEGORIES, findManifest, isVersionExecutable } from "../../data/integrationNodeCatalog";
+import { inputHandleId, outputHandleId } from "../../data/handleId";
 import { isTerminalManifest } from "../../data/nodeInputData";
-import { resolveDisplayName, resolveLocalized } from "../../utils/localize";
+import { resolveLocalized } from "../../utils/localize";
+import { SIDE_POSITION, distributedStyle } from "./canvasSides";
+import { fieldDisplayLabel } from "../../utils/validationFindings";
+import { nodeDisplayName } from "../../utils/nodeDisplayName";
 const props = defineProps({
   id: { type: String, required: true },
   data: { type: Object, required: true },
@@ -17,11 +21,11 @@ defineEmits(["updateNodeInternals"]);
 const t = useIntegrationsT();
 const manifest = computed(() => findManifest(props.data.nodeSlug, props.data.nodeVersion));
 const category = computed(() => NODE_CATEGORIES.find((c) => c.key === manifest.value?.category));
-const title = computed(
-  () => resolveDisplayName(props.data.name) || resolveLocalized(manifest.value?.name) || props.data.nodeSlug
-);
+const title = computed(() => nodeDisplayName(props.data));
 const invalidFields = computed(() => props.data.__invalidFields ?? []);
-const invalidLabel = computed(() => t("integration.canvas.node.badge.invalidConfig", invalidFields.value.length, { fields: invalidFields.value.join(", ") }));
+const invalidLabel = computed(() => t("integration.canvas.node.badge.invalidConfig", invalidFields.value.length, {
+  fields: invalidFields.value.map((key) => fieldDisplayLabel(props.data, key)).join(", ")
+}));
 const insideLoops = computed(() => props.data.__loop?.inside ?? []);
 const repeatsLabel = computed(() => t("integration.canvas.node.badge.repeats", insideLoops.value.length, { iterators: insideLoops.value.join(", ") }));
 const bodySize = computed(() => props.data.__loop?.bodySize);
@@ -111,14 +115,6 @@ function portTone(p) {
 const showPortLabels = computed(() => resolvePending.value || outputs.value.length > 1 || outputs.value.some((p) => p.kind !== "default"));
 const IN_SIDES = ["top"];
 const OUT_SIDES = ["bottom"];
-function sideToPosition(s) {
-  return s === "top" ? Position.Top : s === "right" ? Position.Right : s === "bottom" ? Position.Bottom : Position.Left;
-}
-function distributedStyle(side, i, total) {
-  const pct = `${(i + 1) / (total + 1) * 100}%`;
-  if (side === "top" || side === "bottom") return { left: pct };
-  return { top: pct };
-}
 const flow = useVueFlow();
 const hovered = ref(false);
 let hoverTimer = null;
@@ -192,22 +188,22 @@ function remove() {
   <NodeToolbar v-if="nodeActions" :is-visible="hovered || selected" :position="Position.Top" :offset="8" class="flex items-center gap-1 rounded-md border border-black/[0.08] bg-white px-1 py-1 shadow-md" @mouseenter="onHoverEnter" @mouseleave="onHoverLeave">
     <button
       type="button"
-      class="flex h-6 items-center gap-1 rounded px-1.5 text-sm text-foreground/80 hover:bg-muted/50"
+      class="flex size-6 items-center justify-center rounded text-sm text-foreground/80 hover:bg-muted/50"
       :title="t('integration.canvas.node.action.duplicate')"
       :aria-label="t('integration.canvas.node.action.duplicateAria')"
       @click="duplicate"
     >
-      <Copy :size="11" />
+      <Copy :size="13" />
     </button>
     <div class="h-4 w-px bg-black/10" />
     <button
       type="button"
-      class="flex h-6 items-center gap-1 rounded px-1.5 text-sm text-rose-600 hover:bg-rose-50"
+      class="flex size-6 items-center justify-center rounded text-sm text-rose-600 hover:bg-rose-50"
       :title="t('integration.common.action.delete')"
       :aria-label="t('integration.canvas.node.action.deleteAria')"
       @click="remove"
     >
-      <TrashBin :size="11" />
+      <TrashBin :size="13" />
     </button>
   </NodeToolbar>
 
@@ -239,10 +235,10 @@ function remove() {
        dots feed the same `__in` port. Clearly visible, ring + shadow. -->
   <Handle
     v-for="side in IN_SIDES"
-    :id="`__in__${side}`"
+    :id="inputHandleId(side)"
     :key="`in-${side}`"
     type="target"
-    :position="sideToPosition(side)"
+    :position="SIDE_POSITION[side]"
     :title="t('integration.canvas.node.handle.input')"
     class="!size-3 !rounded-full !border-2 !border-white !bg-slate-500 !shadow-sm transition-all hover:!size-3.5 hover:!bg-slate-700"
   />
@@ -252,10 +248,10 @@ function remove() {
   <template v-for="side in OUT_SIDES" :key="`side-${side}`">
     <Handle
       v-for="(p, i) in outputs"
-      :id="`${p.name}__${side}`"
+      :id="outputHandleId(p.name, side)"
       :key="`${p.name}-${side}`"
       type="source"
-      :position="sideToPosition(side)"
+      :position="SIDE_POSITION[side]"
       :title="handleTitle(p)"
       :style="distributedStyle(side, i, outputs.length)"
       class="!size-3 !rounded-full !border-2 !border-white !shadow-sm transition-all hover:!size-3.5"

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

@@ -24,10 +24,14 @@ import StickyNoteView from "./StickyNoteView.vue";
 import GroupFrameView from "./GroupFrameView.vue";
 import WorkflowEdgeView from "./WorkflowEdgeView.vue";
 import { findManifest } from "../../data/integrationNodeCatalog";
+import { OPPOSITE_SIDE } from "./canvasSides";
+import { inputHandleId, outputHandleId } from "../../data/handleId";
 import { nodeLoopData } from "../../data/loopBody";
 import { triggerGlyph } from "../../data/triggerGlyphs";
+import { formatDuration } from "../../utils/formatDuration";
 import { SAFETY_POLL_MS } from "../../utils/pollBudget";
 import { runStatusClass, runStatusLabel } from "../../utils/statusStyle";
+import { errorReason } from "../../utils/apiError";
 const props = defineProps({
   workflow: { type: Object, required: true },
   initialRunId: { type: [String, null], required: false },
@@ -59,7 +63,7 @@ async function loadRuns(reset = false) {
     runsPage.value = res.page;
     runsLastPage.value = res.lastPage;
   } catch (e) {
-    toast.error(e?.message ?? t("integration.replay.toast.loadRunsFailed"));
+    toast.error(errorReason(e, t("integration.replay.toast.loadRunsFailed")));
   } finally {
     runsLoading.value = false;
   }
@@ -101,7 +105,7 @@ async function loadSteps(runId, isPoll = false) {
     }
   } catch (e) {
     if (selectedRunId.value === runId) {
-      stepsError.value = e?.message ?? t("integration.replay.error.loadStepsFailed");
+      stepsError.value = errorReason(e, t("integration.replay.error.loadStepsFailed"));
     }
   } finally {
     if (!isPoll) stepsLoading.value = false;
@@ -293,7 +297,6 @@ const vfEdges = computed(() => {
     return { x: 0, y: 0 };
   };
   const pickSourceSide = (_sourceId, _targetId) => "bottom";
-  const opposite = (s) => s === "top" ? "bottom" : s === "right" ? "left" : s === "bottom" ? "top" : "right";
   const edgeKind = (sourceNodeId, output) => {
     const wn = blob.nodes.find((n) => n.id === sourceNodeId);
     if (!wn) return "default";
@@ -331,8 +334,8 @@ const vfEdges = computed(() => {
       id: e.id,
       source: e.from.nodeId,
       target: e.to.nodeId,
-      sourceHandle: `${e.from.output}__${srcSide}`,
-      targetHandle: `__in__${opposite(srcSide)}`,
+      sourceHandle: outputHandleId(e.from.output, srcSide),
+      targetHandle: inputHandleId(OPPOSITE_SIDE[srcSide]),
       type: "flow",
       selectable: false,
       animated: traversed && !targetReached,
@@ -395,12 +398,6 @@ function formatTime(iso) {
     return String(iso);
   }
 }
-function formatDuration(ms) {
-  if (ms == null) return "\u2014";
-  if (ms < 1e3) return `${ms} ms`;
-  if (ms < 6e4) return `${(ms / 1e3).toFixed(1)} s`;
-  return `${Math.floor(ms / 6e4)}m ${Math.round(ms % 6e4 / 1e3)}s`;
-}
 function pretty(v) {
   try {
     return JSON.stringify(v, null, 2);

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

@@ -3,6 +3,8 @@ import { computed, ref } from "vue";
 import { Handle, Position, useVueFlow } from "@vue-flow/core";
 import { NodeToolbar } from "@vue-flow/node-toolbar";
 import { TrashBinMinimalistic as TrashBin } from "#solar-icons";
+import { SIDE_POSITION } from "./canvasSides";
+import { outputHandleId } from "../../data/handleId";
 import { triggerGlyph as glyphForTrigger } from "../../data/triggerGlyphs";
 import { resolveDisplayName } from "../../utils/localize";
 import { triggerTypeLabel } from "../../data/integrationNodeCatalog";
@@ -45,21 +47,18 @@ function remove() {
   flow.removeNodes([props.id]);
 }
 const OUT_SIDES = ["bottom"];
-function sideToPosition(s) {
-  return s === "top" ? Position.Top : s === "right" ? Position.Right : s === "bottom" ? Position.Bottom : Position.Left;
-}
 </script>
 
 <template>
   <NodeToolbar :is-visible="hovered || selected" :position="Position.Top" :offset="8" class="flex items-center gap-1 rounded-md border border-black/[0.08] bg-white px-1 py-1 shadow-md" @mouseenter="onHoverEnter" @mouseleave="onHoverLeave">
     <button
       type="button"
-      class="flex h-6 items-center gap-1 rounded px-1.5 text-sm text-rose-600 hover:bg-rose-50"
+      class="flex size-6 items-center justify-center rounded text-sm text-rose-600 hover:bg-rose-50"
       :title="t('integration.common.action.delete')"
       :aria-label="t('integration.canvas.trigger.action.deleteAria')"
       @click="remove"
     >
-      <TrashBin :size="11" />
+      <TrashBin :size="13" />
     </button>
   </NodeToolbar>
 
@@ -97,10 +96,10 @@ function sideToPosition(s) {
        "default"; the side suffix is stripped on persist. -->
   <Handle
     v-for="side in OUT_SIDES"
-    :id="`default__${side}`"
+    :id="outputHandleId('default', side)"
     :key="side"
     type="source"
-    :position="sideToPosition(side)"
+    :position="SIDE_POSITION[side]"
     class="!size-3 !rounded-full !border-2 !border-white !bg-emerald-500 !shadow-sm transition-all hover:!size-3.5 hover:!bg-emerald-600"
   />
 </template>

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

@@ -19,6 +19,8 @@ import {
   SelectValue
 } from "@revenexx/studio";
 import { toast } from "vue-sonner";
+import { deepClone } from "../../utils/deepClone";
+import { copyToClipboard } from "../../utils/clipboard";
 import { languageKeyRead, languageKeyToWrite, resolveDisplayName } from "../../utils/localize";
 const props = defineProps({
   open: { type: Boolean, required: true },
@@ -34,7 +36,7 @@ const jsonErrors = reactive({});
 const descDrafts = reactive({});
 watch(() => props.open, (o) => {
   if (!o) return;
-  working.value = JSON.parse(JSON.stringify(props.variables));
+  working.value = deepClone(props.variables);
   for (const k of Object.keys(jsonDrafts)) delete jsonDrafts[k];
   for (const k of Object.keys(jsonErrors)) delete jsonErrors[k];
   for (const k of Object.keys(descDrafts)) delete descDrafts[k];
@@ -146,12 +148,10 @@ function addVariable() {
   newKey.value = "";
 }
 async function copyUsage(key) {
-  try {
-    await navigator.clipboard.writeText(`\${{ vars.${key} }}`);
-    toast.success(t("integration.workflows.variables.toast.copied"));
-  } catch {
-    toast.error(t("integration.workflows.variables.toast.copyFailed"));
-  }
+  await copyToClipboard(`\${{ vars.${key} }}`, {
+    copied: t("integration.workflows.variables.toast.copied"),
+    failed: t("integration.workflows.variables.toast.copyFailed")
+  });
 }
 </script>
 

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

@@ -1,17 +1,12 @@
 <script setup>
-import { RefreshCircle as Loader2, MenuDots as MoreHorizontal } from "#solar-icons";
+import { MenuDots as MoreHorizontal } from "#solar-icons";
 import { toast } from "vue-sonner";
-import { apiValidationIssues } from "../../utils/apiError";
+import { apiValidationIssues, errorReason } from "../../utils/apiError";
+import WorkflowDeleteDialog from "./WorkflowDeleteDialog.vue";
 import WorkflowDuplicateDialog from "./WorkflowDuplicateDialog.vue";
 import WorkflowIconView from "./WorkflowIconView.vue";
 import { Layers } from "#solar-icons";
 import {
-  AlertDialog,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
   Badge,
   Button,
   DropdownMenu,
@@ -27,7 +22,7 @@ defineProps({
 });
 const t = useIntegrationsT();
 const router = useRouter();
-const { remove, toggleActive } = useIntegrationsWorkflows();
+const { toggleActive } = useIntegrationsWorkflows();
 const duplicateTarget = ref(null);
 const duplicateOpen = ref(false);
 function askDuplicate(wf) {
@@ -77,21 +72,11 @@ function runBadge(status) {
       return { label: t("integration.workflows.table.status.run.cancelled"), class: "bg-slate-100 text-slate-700 border-slate-200" };
   }
 }
-const pendingDelete = ref(null);
-const deleting = ref(false);
+const deleteOpen = ref(false);
+const deleteTarget = ref(null);
 function askDelete(wf) {
-  pendingDelete.value = wf;
-}
-async function confirmDelete() {
-  const wf = pendingDelete.value;
-  if (!wf) return;
-  deleting.value = true;
-  try {
-    await remove(wf.id);
-    pendingDelete.value = null;
-  } finally {
-    deleting.value = false;
-  }
+  deleteTarget.value = { id: wf.id, name: wf.name };
+  deleteOpen.value = true;
 }
 async function onToggleActive(wf) {
   try {
@@ -102,7 +87,7 @@ async function onToggleActive(wf) {
       toast.error(t("integration.workflows.table.toast.activateBlocked", issues.length, { name: wf.name }));
       return;
     }
-    toast.error(e?.message ?? t("integration.workflows.table.toast.statusChangeFailed"));
+    toast.error(errorReason(e, t("integration.workflows.table.toast.statusChangeFailed")));
   }
 }
 function lifecycleOf(wf) {
@@ -405,30 +390,7 @@ const columns = computed(() => [
     </template>
   </DataTable>
 
-  <AlertDialog :open="!!pendingDelete" @update:open="(v) => {
-  if (!v) pendingDelete = null;
-}">
-    <AlertDialogContent>
-      <AlertDialogHeader>
-        <AlertDialogTitle>{{ t("integration.workflows.table.deleteDialog.title") }}</AlertDialogTitle>
-        <AlertDialogDescription>
-          <span v-if="pendingDelete">
-            <span class="font-medium text-foreground">{{ pendingDelete.name }}</span>
-            {{ t("integration.workflows.table.deleteDialog.description") }}
-          </span>
-        </AlertDialogDescription>
-      </AlertDialogHeader>
-      <AlertDialogFooter>
-        <Button variant="outline" :disabled="deleting" @click="pendingDelete = null">
-          {{ t("integration.common.action.cancel") }}
-        </Button>
-        <Button class="bg-destructive text-white hover:bg-destructive/90" :disabled="deleting" @click="confirmDelete">
-          <Loader2 v-if="deleting" :size="14" class="animate-spin" />
-          {{ deleting ? t("integration.workflows.table.deleteDialog.action.deleting") : t("integration.common.action.delete") }}
-        </Button>
-      </AlertDialogFooter>
-    </AlertDialogContent>
-  </AlertDialog>
+  <WorkflowDeleteDialog v-model:open="deleteOpen" :workflow="deleteTarget" />
 
   <WorkflowDuplicateDialog v-model:open="duplicateOpen" :workflow="duplicateTarget" @duplicated="onDuplicated" />
 </template>

package/dist/runtime/components/Integrations/canvasSides.d.ts

@@ -0,0 +1,48 @@
+import { Position } from '@vue-flow/core';
+import type { Side } from '../../data/handleId.js';
+/**
+ * What a connection dot's side means to the canvas: where the library draws it, what
+ * faces it, and where along the edge it sits.
+ *
+ * `data/handleId.ts` owns what a side *is* — the closed set of four, and the id a dot
+ * carries. This owns what the canvas does with one. The split is the import: that
+ * module has none, so its round trip can be proved without the canvas library, and
+ * `Position` is Vue Flow's. Keeping the two apart is what stops a string-shape contract
+ * from depending on a rendering library.
+ *
+ * **Every map here is a `Record<Side, …>`, and that is the point of the module.** Each
+ * was a four-branch ternary ending in an `else`, in a component, and two components had
+ * their own copy of the first one. An `else` absorbs a fifth side silently: a `centre`
+ * dot would have been drawn on the **left**, called `right` its opposite, and spread
+ * along the wrong axis — with no type error and nothing on screen to notice, because
+ * every one of those is a plausible answer for *some* side.
+ *
+ * A `Record<Side, …>` cannot do that. Add a name to `SIDES` and all three of these stop
+ * compiling until they say what it means. That is weaker than PO-258's "one edit" and
+ * better than it: it is still more than one edit, but none of them can be forgotten.
+ */
+/**
+ * The side a dot is on → the position Vue Flow draws it at.
+ *
+ * The two vocabularies happen to be the same four strings today — `Position.Top` is
+ * `'top'` — so this could be a cast, and is not. A cast would tie us to that
+ * coincidence holding in a library we do not own, and it would say nothing when it
+ * stopped: the studio's sides are its own, and this is where they are translated.
+ */
+export declare const SIDE_POSITION: Record<Side, Position>;
+/**
+ * The side facing a given one, which is where an edge arriving from it should land.
+ *
+ * "Opposite" is only meaningful because the four sides are two axes. A fifth position
+ * that is not on an axis — a centre dot — has no opposite at all, and the honest answer
+ * then is to change this type rather than to invent one; the compiler will ask.
+ */
+export declare const OPPOSITE_SIDE: Record<Side, Side>;
+/**
+ * Place the `i`th of `total` output dots evenly along a side.
+ *
+ * Evenly *between* the corners rather than across them — `(i + 1) / (total + 1)` — so
+ * the first and last dot sit inside the card's edge instead of on it, and a single
+ * output lands in the middle.
+ */
+export declare function distributedStyle(side: Side, i: number, total: number): Record<string, string>;

package/dist/runtime/components/Integrations/canvasSides.js

@@ -0,0 +1,22 @@
+import { Position } from "@vue-flow/core";
+export const SIDE_POSITION = {
+  top: Position.Top,
+  right: Position.Right,
+  bottom: Position.Bottom,
+  left: Position.Left
+};
+export const OPPOSITE_SIDE = {
+  top: "bottom",
+  right: "left",
+  bottom: "top",
+  left: "right"
+};
+const SIDE_SPREAD_AXIS = {
+  top: "left",
+  right: "top",
+  bottom: "left",
+  left: "top"
+};
+export function distributedStyle(side, i, total) {
+  return { [SIDE_SPREAD_AXIS[side]]: `${(i + 1) / (total + 1) * 100}%` };
+}

package/dist/runtime/composables/useCredentialTypes.js

@@ -1,6 +1,6 @@
 import { useIntegrationsApi } from "./integrationsApi.js";
 import { useIntegrationsT } from "./useIntegrationsT.js";
-import { IntegrationsApiError } from "../utils/apiError.js";
+import { errorReason } from "../utils/apiError.js";
 import { useLoadGate } from "./useLoadGate.js";
 export function useCredentialTypes() {
   const types = useState("integrations.credentialTypes", () => []);
@@ -16,10 +16,6 @@ export function useCredentialTypes() {
     if (Array.isArray(obj?.data)) return obj.data;
     return [];
   }
-  function captureError(e, fallback) {
-    if (e instanceof IntegrationsApiError) return e.message;
-    return e?.message ?? fallback;
-  }
   async function load(force = false) {
     if (!await gate.claim(force)) return types.value;
     error.value = null;
@@ -27,7 +23,7 @@ export function useCredentialTypes() {
       types.value = normalize(await api.get("/credential-types"));
       loaded.value = true;
     } catch (e) {
-      error.value = captureError(e, t("integration.credentials.error.loadTypes"));
+      error.value = errorReason(e, t("integration.credentials.error.loadTypes"));
     } finally {
       gate.release();
     }

package/dist/runtime/composables/useIntegrationsAudit.js

@@ -1,5 +1,5 @@
 import { useIntegrationsApi } from "./integrationsApi.js";
-import { IntegrationsApiError } from "../utils/apiError.js";
+import { errorReason } from "../utils/apiError.js";
 import { useLoadGate } from "./useLoadGate.js";
 export function useIntegrationsAudit() {
   const api = useIntegrationsApi();
@@ -28,7 +28,7 @@ export function useIntegrationsAudit() {
       entries.value = append ? [...entries.value, ...data] : data;
       nextCursor.value = res.meta?.next_cursor ?? null;
     } catch (e) {
-      error.value = e instanceof IntegrationsApiError ? e.message : e?.message ?? "Could not load the audit log.";
+      error.value = errorReason(e, "Could not load the audit log.");
     } finally {
       gate.release();
     }

package/dist/runtime/composables/useIntegrationsCredentials.js

@@ -1,7 +1,7 @@
 import { computed } from "vue";
 import { useIntegrationsApi } from "./integrationsApi.js";
 import { useIntegrationsT } from "./useIntegrationsT.js";
-import { IntegrationsApiError } from "../utils/apiError.js";
+import { IntegrationsApiError, errorReason } from "../utils/apiError.js";
 import { useLoadGate } from "./useLoadGate.js";
 export function useIntegrationsCredentials() {
   const credentials = useState("integrations.credentials", () => []);
@@ -20,10 +20,6 @@ export function useIntegrationsCredentials() {
   function unwrap(res) {
     return res?.data ?? res;
   }
-  function captureError(e, fallback) {
-    if (e instanceof IntegrationsApiError) return e.message;
-    return e?.message ?? fallback;
-  }
   async function load(force = false) {
     if (!await gate.claim(force)) return credentials.value;
     error.value = null;
@@ -31,7 +27,7 @@ export function useIntegrationsCredentials() {
       credentials.value = normalize(await api.get("/credentials"));
       loaded.value = true;
     } catch (e) {
-      error.value = captureError(e, t("integration.credentials.error.loadFailed"));
+      error.value = errorReason(e, t("integration.credentials.error.loadFailed"));
     } finally {
       gate.release();
     }
@@ -62,7 +58,7 @@ export function useIntegrationsCredentials() {
       const res = await api.post("/credentials/test", { credential_type_slug: credentialTypeSlug, config });
       return res?.ok === false ? res : { ok: true, message: res?.message };
     } catch (e) {
-      return { ok: false, error: captureError(e, t("integration.credentials.error.testFailed")) };
+      return { ok: false, error: errorReason(e, t("integration.credentials.error.testFailed")) };
     }
   }
   async function test(id) {
@@ -70,7 +66,7 @@ export function useIntegrationsCredentials() {
       const res = await api.post(`/credentials/${encodeURIComponent(id)}/test`);
       return res?.ok === false ? res : { ok: true, message: res?.message };
     } catch (e) {
-      return { ok: false, error: captureError(e, t("integration.credentials.error.testFailed")) };
+      return { ok: false, error: errorReason(e, t("integration.credentials.error.testFailed")) };
     }
   }
   async function oauthAuthorizeUrl(id) {

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

@@ -24,6 +24,10 @@ export declare function useIntegrationsDeadLetters(): {
     globalLoading: any;
     globalLoaded: any;
     globalHasMore: any;
+    globalPage: any;
+    globalLastPage: import("vue").ComputedRef<number>;
+    goGlobalPage: (page: number) => Promise<GlobalDeadLetterRow[]>;
+    resetGlobalPage: () => void;
     summary: any;
     pendingCount: import("vue").ComputedRef<any>;
 };

package/dist/runtime/composables/useIntegrationsDeadLetters.js

@@ -1,6 +1,7 @@
 import { computed } from "vue";
 import { useIntegrationsApi } from "./integrationsApi.js";
 import { useLoadGate } from "./useLoadGate.js";
+import { runFeedLastPage } from "../utils/runFeedQuery.js";
 const EMPTY_SUMMARY = { total: 0, by_status: {} };
 export function useIntegrationsDeadLetters() {
   const api = useIntegrationsApi();
@@ -25,12 +26,15 @@ export function useIntegrationsDeadLetters() {
   const gate = useLoadGate("integrations.deadletters.global", { loading: globalLoading, loaded: globalLoaded });
   const summary = useState("integrations.deadletters.summary", () => ({ ...EMPTY_SUMMARY }));
   const globalHasMore = useState("integrations.deadletters.global.hasMore", () => false);
+  const GLOBAL_PER_PAGE = 25;
+  const globalPage = useState("integrations.deadletters.global.page", () => 1);
+  const globalLastPage = computed(() => runFeedLastPage(summary.value.total, GLOBAL_PER_PAGE));
   const pendingCount = computed(() => summary.value.by_status.pending ?? 0);
   async function loadGlobal(force = false) {
     if (!await gate.claim(force)) return globalItems.value;
     try {
       const [page, counts] = await Promise.all([
-        api.get("/dead-letters?page=1&per_page=100"),
+        api.get(`/dead-letters?page=${globalPage.value}&per_page=${GLOBAL_PER_PAGE}`),
         api.get("/dead-letters/summary")
       ]);
       globalItems.value = page?.data ?? [];
@@ -45,6 +49,13 @@ export function useIntegrationsDeadLetters() {
     }
     return globalItems.value;
   }
+  async function goGlobalPage(page) {
+    globalPage.value = Math.min(Math.max(1, page), globalLastPage.value);
+    return loadGlobal(true);
+  }
+  function resetGlobalPage() {
+    globalPage.value = 1;
+  }
   return {
     list,
     replay,
@@ -54,6 +65,10 @@ export function useIntegrationsDeadLetters() {
     globalLoading,
     globalLoaded,
     globalHasMore,
+    globalPage,
+    globalLastPage,
+    goGlobalPage,
+    resetGlobalPage,
     summary,
     pendingCount
   };

package/dist/runtime/composables/useIntegrationsNodes.js

@@ -2,7 +2,7 @@ import { applyNodeCatalog, findManifest } from "../data/integrationNodeCatalog.j
 import { resolveLocalized } from "../utils/localize.js";
 import { useIntegrationsApi } from "./integrationsApi.js";
 import { useIntegrationsT } from "./useIntegrationsT.js";
-import { IntegrationsApiError } from "../utils/apiError.js";
+import { errorReason } from "../utils/apiError.js";
 import { useLoadGate } from "./useLoadGate.js";
 const RETRY_COOLDOWN_MS = 3e4;
 export function useIntegrationsNodes() {
@@ -39,7 +39,7 @@ export function useIntegrationsNodes() {
       applyNodeCatalog([]);
       loaded.value = false;
       failedAt.value = Date.now();
-      error.value = e instanceof IntegrationsApiError ? e.message : e?.message ?? t("integration.nodes.error.loadFailed");
+      error.value = errorReason(e, t("integration.nodes.error.loadFailed"));
     } finally {
       gate.release();
     }

package/dist/runtime/composables/useIntegrationsRevisions.js

@@ -1,16 +1,12 @@
 import { ref } from "vue";
 import { useIntegrationsApi } from "./integrationsApi.js";
 import { useIntegrationsT } from "./useIntegrationsT.js";
-import { IntegrationsApiError } from "../utils/apiError.js";
+import { errorReason } 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) {
-    if (e instanceof IntegrationsApiError) return e.message;
-    return e?.message ?? fallback;
-  }
   async function list(workflowId, page = 1, perPage = 25) {
     loading.value = true;
     error.value = null;
@@ -18,7 +14,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, t("integration.revisions.error.loadFailed"));
+      error.value = errorReason(e, t("integration.revisions.error.loadFailed"));
       throw e;
     } finally {
       loading.value = false;

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

@@ -1,23 +1,11 @@
 import type { RunStatus, RunStepRow, WorkflowRun } from '../types/integrations.js';
+import type { RunFeedQuery } from '../utils/runFeedQuery.js';
+export type { RunFeedQuery };
 interface RunSummary {
     total: number;
     in_flight: number;
     by_status: Record<string, number>;
 }
-/**
- * Which page of the tenant's list to read.
- *
- * Only the page: `/runs` also narrows by status, trigger kind, workflow, window
- * and text, and none of that is driven from here yet. The shared DataTable
- * narrows and searches what it holds, and it cannot report a filter selection
- * back to the page under `serverMode` — so a narrowing sent to the platform
- * would have nothing to set it. That is the remaining half of PO-231, and the
- * parameters are waiting on the endpoint for it.
- */
-export interface RunFeedQuery {
-    page: number;
-    perPage: number;
-}
 export declare function useIntegrationsRuns(): {
     runs: any;
     loading: any;
@@ -29,6 +17,8 @@ export declare function useIntegrationsRuns(): {
     summary: any;
     hasMore: any;
     query: any;
+    setQuery: (patch: Partial<RunFeedQuery>) => Promise<WorkflowRun[]>;
+    narrowedTotal: any;
     load: (force?: boolean) => Promise<WorkflowRun[]>;
     loadSummary: () => Promise<RunSummary>;
     loadForWorkflow: (workflowId: number, workflowName: string, opts?: {
@@ -77,4 +67,3 @@ export declare function useIntegrationsRuns(): {
     }>;
     getStackTrace: (workflowId: number | string, runId: number | string) => Promise<string>;
 };
-export {};