@revenexx/studio-integrations 1.1.1 → 1.3.0

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

@@ -0,0 +1,216 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { AddCircle as Plus, TrashBinMinimalistic as TrashBin } from "#solar-icons";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@revenexx/studio";
+import { deepClone } from "../../utils/deepClone";
+import { stateNamespaceErrorKey } from "../../utils/stateNamespaceName";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  state: { type: Array, required: true }
+});
+const emit = defineEmits(["update:open", "update:state"]);
+const t = useIntegrationsT();
+const ROLES = ["mapping", "cursor", "dedupe", "digest"];
+const working = ref([]);
+watch(() => props.open, (isOpen) => {
+  if (!isOpen) return;
+  working.value = deepClone(props.state ?? []);
+  newName.value = "";
+  newRole.value = "mapping";
+  newVisibility.value = "private";
+});
+const changed = computed(() => JSON.stringify(working.value) !== JSON.stringify(props.state ?? []));
+function applyAndClose() {
+  if (changed.value) emit("update:state", working.value);
+  emit("update:open", false);
+}
+function setVisibility(index, visibility) {
+  const next = [...working.value];
+  const row = next[index];
+  if (!row) return;
+  next[index] = { ...row, visibility };
+  working.value = next;
+}
+function removeNamespace(index) {
+  working.value = working.value.filter((_, i) => i !== index);
+}
+const newName = ref("");
+const newRole = ref("mapping");
+const newVisibility = ref("private");
+const newNameError = computed(() => {
+  const key = stateNamespaceErrorKey(newName.value, working.value.map((n) => n.namespace));
+  return key ? t(key) : null;
+});
+function addNamespace() {
+  const namespace = newName.value.trim();
+  if (!namespace || newNameError.value) return;
+  working.value = [...working.value, { namespace, role: newRole.value, visibility: newVisibility.value }];
+  newName.value = "";
+}
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="(v) => emit('update:open', v)">
+    <DialogContent class="max-w-[94vw] sm:max-w-3xl">
+      <DialogHeader>
+        <DialogTitle>{{ t("integration.workflows.state.dialog.title") }}</DialogTitle>
+        <DialogDescription class="text-sm">
+          {{ t("integration.workflows.state.dialog.description") }}
+        </DialogDescription>
+      </DialogHeader>
+
+      <div class="max-h-[62vh] space-y-3 overflow-y-auto pr-1">
+        <p v-if="!working.length" class="rounded-lg border border-dashed border-black/[0.12] px-4 py-6 text-center text-sm text-muted-foreground">
+          {{ t("integration.workflows.state.empty") }}
+        </p>
+
+        <div
+          v-for="(row, index) in working"
+          :key="row.namespace"
+          role="group"
+          :aria-label="t('integration.workflows.state.row.aria', { namespace: row.namespace })"
+          class="rounded-lg border border-black/[0.06] bg-white p-3"
+        >
+          <div class="flex items-center gap-2">
+            <code class="min-w-0 truncate font-mono text-sm font-semibold">{{ row.namespace }}</code>
+            <!-- The role is stated, not offered: entries written under one
+                 meaning cannot be re-read under another (specs AC-3). -->
+            <span class="shrink-0 rounded-lg bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
+              {{ t(`integration.workflows.state.role.${row.role}.label`) }}
+            </span>
+            <div class="flex-1" />
+            <button
+              type="button"
+              class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-rose-50 hover:text-rose-600"
+              :title="t('integration.workflows.state.action.remove')"
+              @click="removeNamespace(index)"
+            >
+              <TrashBin :size="13" />
+            </button>
+          </div>
+
+          <p class="mt-1 text-xs text-muted-foreground">
+            {{ t(`integration.workflows.state.role.${row.role}.hint`) }}
+            {{ t("integration.workflows.state.role.fixed") }}
+          </p>
+
+          <div class="mt-2 grid gap-2 sm:grid-cols-[10rem_1fr]">
+            <div class="space-y-1">
+              <Label :for="`state-${row.namespace}-visibility`" class="text-mono text-muted-foreground">
+                {{ t("integration.workflows.state.field.visibility.label") }}
+              </Label>
+              <Select
+                :model-value="row.visibility ?? 'private'"
+                @update:model-value="(v) => setVisibility(index, String(v))"
+              >
+                <SelectTrigger
+                  :id="`state-${row.namespace}-visibility`"
+                  :aria-label="t('integration.workflows.state.field.visibility.label')"
+                  class="h-8 bg-white text-sm"
+                >
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="private">
+                    {{ t("integration.workflows.state.visibility.private.label") }}
+                  </SelectItem>
+                  <SelectItem value="shared">
+                    {{ t("integration.workflows.state.visibility.shared.label") }}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <!-- What the choice costs, beside the choice — a shared namespace is
+                 written by every workflow in the tenant and outlives this one
+                 (specs AC-4). -->
+            <p class="self-end pb-1 text-xs text-muted-foreground">
+              {{ t(`integration.workflows.state.visibility.${row.visibility ?? "private"}.hint`) }}
+            </p>
+          </div>
+
+          <p class="mt-2 text-xs text-muted-foreground">
+            {{ t("integration.workflows.state.action.remove.hint") }}
+          </p>
+        </div>
+
+        <div class="rounded-lg border border-black/[0.06] bg-muted/30 p-3">
+          <Label for="state-new-name" class="text-mono text-muted-foreground">
+            {{ t("integration.workflows.state.field.newName.label") }}
+          </Label>
+          <div class="mt-1 grid gap-2 sm:grid-cols-[1fr_10rem_10rem_auto]">
+            <Input
+              id="state-new-name"
+              v-model="newName"
+              class="h-8 bg-white font-mono text-sm"
+              :placeholder="t('integration.workflows.state.field.newName.placeholder')"
+              @keydown.enter.prevent="addNamespace"
+            />
+            <!-- The role IS chosen here, and only here — the positive half of
+                 AC-3, without which "no role control on a row" proves nothing. -->
+            <Select v-model="newRole">
+              <SelectTrigger
+                id="state-new-role"
+                :aria-label="t('integration.workflows.state.field.newRole.label')"
+                class="h-8 bg-white text-sm"
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem v-for="role in ROLES" :key="role" :value="role">
+                  {{ t(`integration.workflows.state.role.${role}.label`) }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <Select v-model="newVisibility">
+              <SelectTrigger
+                id="state-new-visibility"
+                :aria-label="t('integration.workflows.state.field.newVisibility.label')"
+                class="h-8 bg-white text-sm"
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="private">
+                  {{ t("integration.workflows.state.visibility.private.label") }}
+                </SelectItem>
+                <SelectItem value="shared">
+                  {{ t("integration.workflows.state.visibility.shared.label") }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <Button size="sm" class="h-8" :disabled="!newName.trim() || !!newNameError" @click="addNamespace">
+              <Plus :size="14" class="mr-1" />
+              {{ t("integration.workflows.state.action.add") }}
+            </Button>
+          </div>
+          <p v-if="newNameError" class="mt-1 text-xs text-rose-600">{{ newNameError }}</p>
+          <p class="mt-1 text-xs text-muted-foreground">{{ t(`integration.workflows.state.role.${newRole}.hint`) }}</p>
+        </div>
+      </div>
+
+      <DialogFooter>
+        <Button variant="outline" size="sm" class="h-8" @click="emit('update:open', false)">
+          {{ t("integration.common.action.cancel") }}
+        </Button>
+        <Button size="sm" class="h-8" @click="applyAndClose">
+          {{ t("integration.workflows.state.action.done") }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

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

@@ -0,0 +1,13 @@
+import type { WorkflowStateNamespace } from '../../types/integrations.js';
+type __VLS_Props = {
+    open: boolean;
+    state: WorkflowStateNamespace[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (args_0: boolean) => any;
+    "update:state": (next: WorkflowStateNamespace[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    "onUpdate:state"?: ((next: WorkflowStateNamespace[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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();
     }