@revenexx/studio-integrations 1.1.0 → 1.2.0

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

@@ -1,12 +1,15 @@
 <script setup>
 import { computed, ref, watch } from "vue";
+import LoadingAnnouncement from "../../components/Integrations/LoadingAnnouncement.vue";
 import SurfaceCard from "../../components/Integrations/SurfaceCard.vue";
 import TemplateCard from "../../components/Integrations/TemplateCard.vue";
 import WorkflowCreateDialog from "../../components/Integrations/WorkflowCreateDialog.vue";
 import { Pulse as Activity, DangerTriangle as AlertTriangle, ArrowRight, Box as Boxes, ClockCircle as Clock, Database, Layers, AddCircle as Plus, Radio, MagicStick as Sparkles, LinkRound as Webhook, Programming as Workflow } from "#solar-icons";
 import { Badge, Button } from "@revenexx/studio";
+import { formatDuration } from "../../utils/formatDuration";
 import { servedPaths } from "../../utils/servedPaths";
-import { runStatusClass, runStatusLabel } from "../../utils/statusStyle";
+import { RUN_STATUS_COLUMN_WIDTH, runStatusClass, runStatusLabel } from "../../utils/statusStyle";
+const LATEST_RUN_COLUMNS = `${RUN_STATUS_COLUMN_WIDTH} minmax(0,1fr) 100px 70px`;
 const t = useIntegrationsT();
 useHead({ title: () => t("integration.dashboard.head.title") });
 const { workflows, activeCount: activeWorkflows, loading: workflowsLoading, load: loadWorkflows } = useIntegrationsWorkflows();
@@ -21,10 +24,19 @@ const { startingPoints, loading: templatesLoading, load: loadTemplates, ensureDe
 watch(() => startingPoints.value.map((t2) => t2.slug).join(","), () => {
   if (startingPoints.value.length) void ensureDetails(startingPoints.value.map((t2) => t2.slug));
 }, { immediate: true });
-const { activeCount: schedulesActive, load: loadSchedules } = useIntegrationsSchedules();
+const { activeCount: schedulesActive, loading: schedulesLoading, load: loadSchedules } = useIntegrationsSchedules();
 const { pendingCount: missedRuns, globalLoading: missedLoading, loadGlobal: loadMissedRuns } = useIntegrationsDeadLetters();
-const kpisLoading = computed(() => workflowsLoading.value && !workflows.value.length || runsLoading.value && !latestRunPerWorkflow.value.length);
+const kpiWaits = computed(() => ({
+  activeWorkflows: workflowsLoading.value && !workflows.value.length,
+  runningNow: runsLoading.value && !latestRunPerWorkflow.value.length,
+  scheduled: schedulesLoading.value && schedulesActive.value === 0,
+  missedRuns: missedLoading.value && missedRuns.value === 0
+}));
 const latestLoading = computed(() => runsLoading.value && !latestRunPerWorkflow.value.length);
+const awaitingKpis = computed(() => Object.values(kpiWaits.value).some(Boolean));
+const awaitingLatestRuns = computed(() => latestLoading.value && !latestRunPerWorkflow.value.length);
+const awaitingAttention = computed(() => (missedLoading.value || latestLoading.value) && !missedRuns.value && !failedRecent.value.length);
+const awaitingStartingPoints = computed(() => templatesLoading.value && !startingPoints.value.length);
 const createOpen = ref(false);
 const NuxtLinkComp = resolveComponent("NuxtLink");
 onMounted(() => {
@@ -50,6 +62,7 @@ function formatRelative(iso) {
 const kpis = computed(() => [
   {
     key: "activeWorkflows",
+    waiting: kpiWaits.value.activeWorkflows,
     label: t("integration.dashboard.kpi.activeWorkflows.label"),
     value: activeWorkflows.value,
     // A plural key, so the count is the second argument. Called without one it
@@ -60,6 +73,7 @@ const kpis = computed(() => [
   },
   {
     key: "runningNow",
+    waiting: kpiWaits.value.runningNow,
     label: t("integration.dashboard.kpi.runningNow.label"),
     value: runningCount.value,
     sub: t("integration.dashboard.kpi.runningNow.sub"),
@@ -68,6 +82,7 @@ const kpis = computed(() => [
   },
   {
     key: "scheduled",
+    waiting: kpiWaits.value.scheduled,
     label: t("integration.dashboard.kpi.scheduled.label"),
     value: schedulesActive.value,
     sub: t("integration.dashboard.kpi.scheduled.sub"),
@@ -76,6 +91,7 @@ const kpis = computed(() => [
   },
   {
     key: "missedRuns",
+    waiting: kpiWaits.value.missedRuns,
     label: t("integration.dashboard.kpi.missedRuns.label"),
     value: missedRuns.value,
     sub: t("integration.dashboard.kpi.missedRuns.sub"),
@@ -123,13 +139,22 @@ function surfaceCards() {
            contents — named "Missed runs" alone it would announce less than the
            three tiles beside it. -->
       <div role="group" :aria-label="t('integration.dashboard.kpi.aria.group')" class="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
+        <!-- Four panels on this page wait on four sources, so each says so under its
+             own name (PO-251). The tiles' own names drop their figure while this is
+             true: a tile named "Active workflows: 0" from an empty list does not read
+             as waiting, it reads as an answer. -->
+        <LoadingAnnouncement
+          :label="t('integration.dashboard.kpi.aria.group')"
+          :loading="awaitingKpis"
+          :text="t('integration.dashboard.kpi.state.loading')"
+        />
         <component
           :is="k.to ? NuxtLinkComp : 'div'"
           v-for="k in kpis"
           :key="k.key"
           :to="k.to"
           :role="k.to ? void 0 : 'group'"
-          :aria-label="`${k.label}: ${k.value}`"
+          :aria-label="k.waiting ? k.label : `${k.label}: ${k.value}`"
           class="block rounded-lg border border-black/[0.06] bg-white p-3"
           :class="k.to ? 'transition hover:border-black/20' : ''"
         >
@@ -138,7 +163,7 @@ function surfaceCards() {
               <div class="text-mono text-muted-foreground truncate">
                 {{ k.label }}
               </div>
-              <div v-if="kpisLoading" class="my-1.5 h-6 w-12 rounded bg-black/[0.07] animate-pulse" />
+              <div v-if="k.waiting" aria-hidden="true" class="my-1.5 h-6 w-12 rounded bg-black/[0.07] animate-pulse" />
               <div v-else class="text-2xl font-semibold tabular-nums text-[#0B0522]">
                 {{ k.value }}
               </div>
@@ -168,6 +193,11 @@ function surfaceCards() {
               {{ t("integration.common.action.viewAll") }} <ArrowRight :size="11" />
             </NuxtLink>
           </div>
+          <LoadingAnnouncement
+            :label="t('integration.dashboard.runs.title')"
+            :loading="awaitingLatestRuns"
+            :text="t('integration.dashboard.runs.state.loading')"
+          />
           <div>
             <!-- An entry is a link, not a div that answers a click: that is what
                  makes it reachable by keyboard, and it is what gives it a name —
@@ -177,9 +207,18 @@ function surfaceCards() {
               v-for="r in latestPerWorkflow"
               :key="r.id"
               :to="{ path: `/integrations/workflows/${r.workflowId}`, query: { run: r.id } }"
-              class="grid grid-cols-[90px_minmax(0,1fr)_100px_70px] items-center gap-2 border-b border-black/[0.04] px-3 py-2 text-sm last:border-b-0 hover:bg-muted/30"
+              class="grid items-center gap-2 border-b border-black/[0.04] px-3 py-2 text-sm last:border-b-0 hover:bg-muted/30"
+              :style="{ gridTemplateColumns: LATEST_RUN_COLUMNS }"
             >
-              <Badge variant="outline" :class="['border text-xs font-medium uppercase', runStatusClass(r.status)]">
+              <!-- The runs list's own track, not a second guess: this panel was the
+                   narrower of the two at 90px, so three German words ran out of it,
+                   "erfolgreich" included (PO-362). `max-w-full` is the net behind it,
+                   and it clips rather than ellipsing — see the runs list. -->
+              <Badge
+                variant="outline"
+                :title="runStatusLabel(r.status)"
+                :class="['border text-xs font-medium uppercase max-w-full', runStatusClass(r.status)]"
+              >
                 {{ runStatusLabel(r.status) }}
               </Badge>
               <div class="truncate">
@@ -189,15 +228,24 @@ function surfaceCards() {
               <div class="text-sm text-muted-foreground tabular-nums truncate">
                 {{ formatRelative(r.startedAt) }}
               </div>
+              <!-- The ellipsis is this panel's own answer and not the formatter's em
+                   dash: an entry here is the latest run of a workflow, so a missing
+                   duration means it is still going, where the runs table counts up a
+                   live figure instead. The figure itself is the shared spelling
+                   (PO-383) — this cell used to divide by a thousand on the spot and
+                   print two decimals, which said `0.90s` for 900 ms and `63.00s` for a
+                   step the run record called `1m 3s`. -->
               <div class="text-sm text-muted-foreground tabular-nums text-right">
-                {{ r.durationMs == null ? "\u2026" : `${(r.durationMs / 1e3).toFixed(2)}s` }}
+                {{ r.durationMs == null ? "\u2026" : formatDuration(r.durationMs) }}
               </div>
             </NuxtLink>
-            <template v-if="latestLoading && !latestPerWorkflow.length">
+            <template v-if="awaitingLatestRuns">
               <div
                 v-for="n in 6"
                 :key="`sk-run-${n}`"
-                class="grid grid-cols-[90px_minmax(0,1fr)_100px_70px] items-center gap-2 border-b border-black/[0.04] px-3 py-2.5 last:border-b-0"
+                aria-hidden="true"
+                class="grid items-center gap-2 border-b border-black/[0.04] px-3 py-2.5 last:border-b-0"
+                :style="{ gridTemplateColumns: LATEST_RUN_COLUMNS }"
               >
                 <div class="h-5 w-16 rounded bg-black/[0.07] animate-pulse" />
                 <div class="space-y-1.5">
@@ -224,7 +272,12 @@ function surfaceCards() {
               <h3 class="text-sm font-semibold">{{ t("integration.dashboard.attention.title") }}</h3>
             </div>
           </div>
-          <div v-if="(missedLoading || latestLoading) && !missedRuns && !failedRecent.length" class="space-y-2 p-3">
+          <LoadingAnnouncement
+            :label="t('integration.dashboard.attention.title')"
+            :loading="awaitingAttention"
+            :text="t('integration.dashboard.attention.state.loading')"
+          />
+          <div v-if="awaitingAttention" aria-hidden="true" class="space-y-2 p-3">
             <div v-for="n in 3" :key="`sk-att-${n}`" class="h-3 rounded bg-black/[0.07] animate-pulse" :class="n === 1 ? 'w-2/3' : n === 2 ? 'w-1/2' : 'w-3/5'" />
           </div>
           <div v-else-if="missedRuns || failedRecent.length">
@@ -294,7 +347,12 @@ function surfaceCards() {
             {{ t("integration.common.action.seeAll") }} <ArrowRight :size="11" />
           </NuxtLink>
         </div>
-        <div v-if="templatesLoading && !startingPoints.length" class="grid gap-2 p-3 sm:grid-cols-2 lg:grid-cols-4">
+        <LoadingAnnouncement
+          :label="t('integration.dashboard.templates.title')"
+          :loading="awaitingStartingPoints"
+          :text="t('integration.dashboard.templates.state.loading')"
+        />
+        <div v-if="awaitingStartingPoints" aria-hidden="true" class="grid gap-2 p-3 sm:grid-cols-2 lg:grid-cols-4">
           <div v-for="n in 4" :key="`sk-tpl-${n}`" class="rounded-md border border-black/[0.06] bg-white p-3 space-y-2">
             <div class="h-5 w-20 rounded bg-black/[0.07] animate-pulse" />
             <div class="h-3 w-3/4 rounded bg-black/[0.07] animate-pulse" />

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

@@ -2,21 +2,52 @@
 import { RefreshCircle as Loader2, Refresh as ReplayIcon, TrashBinMinimalistic as TrashBin } from "#solar-icons";
 import { Badge, Button } from "@revenexx/studio";
 import { toast } from "vue-sonner";
+import LoadingAnnouncement from "../../components/Integrations/LoadingAnnouncement.vue";
 import RunsTable from "../../components/Integrations/RunsTable.vue";
 import { createPollBudget, SAFETY_POLL_MS } from "../../utils/pollBudget";
 import { deadLetterStatusClass, deadLetterStatusLabel } from "../../utils/statusStyle";
+import { errorReason } from "../../utils/apiError";
 const t = useIntegrationsT();
 useHead({ title: () => t("integration.runs.list.head.title") });
 const route = useRoute();
-const { runs, loading, load } = useIntegrationsRuns();
+const { runs, loading, error, load, query, setQuery, narrowedTotal } = useIntegrationsRuns();
 const {
   globalItems: missed,
   globalLoading: missedLoading,
   pendingCount,
+  globalPage: missedPage,
+  globalLastPage: missedLastPage,
+  goGlobalPage,
+  resetGlobalPage,
   loadGlobal,
   replay,
-  discard
+  discard,
+  summary: missedSummary
 } = useIntegrationsDeadLetters();
+const page = computed({
+  get: () => query.value.page,
+  // Only when it actually moved. The shared table returns to its first page
+  // whenever the search or the page size changes, and reports that as a page
+  // change too — so an unguarded setter would send a second request for the page
+  // the list is already on, beside the one the search itself asks for.
+  set: (next) => {
+    if (next !== query.value.page) void setQuery({ page: next });
+  }
+});
+function onNarrow(patch) {
+  void setQuery(patch);
+}
+function onReorder(order) {
+  void setQuery(order);
+}
+let searchTimer;
+function onSearch(text) {
+  clearTimeout(searchTimer);
+  if (text === query.value.search) return;
+  searchTimer = setTimeout(() => {
+    void setQuery({ search: text });
+  }, 250);
+}
 const tab = ref(route.query.tab === "missed" ? "missed" : "runs");
 const tabs = computed(() => [
   { key: "runs", label: t("integration.runs.tabs.runs.label") },
@@ -36,7 +67,8 @@ watch([runTick, workflowTick], () => {
 });
 let pollTimer = null;
 onMounted(() => {
-  void load(true);
+  void setQuery({ search: "", page: 1 });
+  resetGlobalPage();
   void reloadMissedRuns();
   pollTimer = setInterval(() => {
     if (hasActiveRuns.value && !loading.value && budget.due(delivering.value)) void load(true);
@@ -47,8 +79,15 @@ onUnmounted(() => {
     clearInterval(pollTimer);
     pollTimer = null;
   }
+  clearTimeout(searchTimer);
 });
 const busyId = ref(null);
+async function goMissedPage(page2) {
+  try {
+    await goGlobalPage(page2);
+  } catch {
+  }
+}
 async function reloadMissedRuns() {
   try {
     await loadGlobal(true);
@@ -62,7 +101,7 @@ async function onReplay(dl) {
     const newId = res && typeof res === "object" && "id" in res ? String(res.id) : null;
     toast.success(newId ? t("integration.deadLetters.toast.replay.started", { id: newId }) : t("integration.deadLetters.toast.replay.done"));
   } catch (e) {
-    toast.error(e?.message ?? t("integration.deadLetters.toast.replay.error"));
+    toast.error(errorReason(e, t("integration.deadLetters.toast.replay.error")));
     busyId.value = null;
     return;
   }
@@ -76,7 +115,7 @@ async function onDiscard(dl) {
     await discard(dl.id);
     toast.success(t("integration.deadLetters.toast.discard.done"));
   } catch (e) {
-    toast.error(e?.message ?? t("integration.deadLetters.toast.discard.error"));
+    toast.error(errorReason(e, t("integration.deadLetters.toast.discard.error")));
     busyId.value = null;
     return;
   }
@@ -107,7 +146,49 @@ function fmt(iso) {
     <TabBar v-model="tab" :tabs="tabs" class="px-4" />
 
     <div class="p-4 space-y-4">
-      <RunsTable v-if="tab === 'runs'" :runs="runs" :loading="loading" @changed="reload" />
+      <!-- Above the tab chain on purpose: the missed-runs half is drawn by a
+           `v-else`, so a region placed inside it would mount together with the
+           placeholders it speaks for, and a live region that arrives with its own
+           content is one nothing was listening to. Out here it is on the page from
+           the first render and only its text moves (PO-251). -->
+      <LoadingAnnouncement
+        :label="t('integration.deadLetters.tabs.missed.label')"
+        :loading="tab === 'missed' && missedLoading && !missed.length"
+        :text="t('integration.deadLetters.state.loading')"
+      />
+
+      <!--
+        A refused read, said plainly. Without this the page kept the rows it had
+        while `query` had already moved on, so a failed page turn drew rows 1–25
+        under a footer reading "Showing 26–50", and a refused narrowing left the
+        old rows under the new selection — both reading as an answer.
+      -->
+      <div
+        v-if="tab === 'runs' && error"
+        class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700"
+        role="alert"
+      >
+        {{ error }}
+      </div>
+
+      <RunsTable
+        v-if="tab === 'runs'"
+        v-model:page="page"
+        :runs="runs"
+        :loading="loading"
+        server-mode
+        :total="narrowedTotal"
+        :per-page="query.perPage"
+        :status="query.status"
+        :trigger-type="query.triggerType"
+        :sort="query.sort"
+        :direction="query.direction"
+        @narrow="onNarrow"
+        @search="onSearch"
+        @page-size="(size) => setQuery({ perPage: size })"
+        @reorder="onReorder"
+        @changed="reload"
+      />
 
       <!-- Missed runs — trigger firings that never produced a run (the
            workflow wasn't runnable when its schedule/event fired). -->
@@ -122,7 +203,7 @@ function fmt(iso) {
           </Button>
         </div>
 
-        <div v-if="missedLoading && !missed.length"><div class="rounded-lg border border-black/[0.06] bg-white divide-y divide-black/[0.04]">
+        <div v-if="missedLoading && !missed.length" aria-hidden="true"><div class="rounded-lg border border-black/[0.06] bg-white divide-y divide-black/[0.04]">
           <div v-for="n in 4" :key="`sk-${n}`" class="flex items-start gap-3 px-3 py-3">
             <div class="h-5 w-16 shrink-0 rounded bg-black/[0.07] animate-pulse" />
             <div class="min-w-0 flex-1 space-y-2">
@@ -168,6 +249,34 @@ function fmt(iso) {
             </div>
           </div>
         </div>
+
+        <!--
+          Server pagination — the endpoint pages, so the whole backlog is
+          reachable. It used to read one page of a hundred and offer no way past
+          it, while `has_more` came back on every read and was shown to nobody
+          (PO-369).
+        -->
+        <div v-if="missedLastPage > 1" class="flex items-center justify-between text-sm text-muted-foreground">
+          <span class="tabular-nums">
+            {{ t("integration.deadLetters.pagination.summary", { page: missedPage, lastPage: missedLastPage, total: missedSummary.total }) }}
+          </span>
+          <div class="flex gap-2">
+            <Button
+              variant="outline" size="sm" class="h-7 text-sm"
+              :disabled="missedPage <= 1 || missedLoading"
+              @click="goMissedPage(missedPage - 1)"
+            >
+              {{ t("integration.deadLetters.pagination.newer") }}
+            </Button>
+            <Button
+              variant="outline" size="sm" class="h-7 text-sm"
+              :disabled="missedPage >= missedLastPage || missedLoading"
+              @click="goMissedPage(missedPage + 1)"
+            >
+              {{ t("integration.deadLetters.pagination.older") }}
+            </Button>
+          </div>
+        </div>
       </template>
     </div>
   </IntegrationsLayout>

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

@@ -24,6 +24,7 @@ import {
   Input,
   Label
 } from "@revenexx/studio";
+import { errorReason } from "../../utils/apiError";
 const t = useIntegrationsT();
 useHead({ title: () => t("integration.secrets.head.title") });
 const { secrets, loading, error, isValidKey, upsert, remove, load } = useIntegrationsSecrets();
@@ -58,7 +59,7 @@ async function submitCreate() {
     await upsert(key, newValue.value);
     createOpen.value = false;
   } catch (e) {
-    formError.value = e.message;
+    formError.value = errorReason(e, t("integration.secrets.form.error.saveFailed"));
   } finally {
     saving.value = false;
   }

package/dist/runtime/pages/integrations/templates/[slug].vue

@@ -24,6 +24,7 @@ import TemplateFlowPreview from "../../../components/Integrations/TemplateFlowPr
 import NodeMark from "../../../components/Integrations/NodeMark.vue";
 import { templateCategoryLabel, templatePackageLabel } from "../../../data/integrationTemplates";
 import { describeCron } from "../../../utils/schedule";
+import { errorReason } from "../../../utils/apiError";
 const SELECT_LATER = "__later__";
 const t = useIntegrationsT();
 const route = useRoute();
@@ -165,7 +166,7 @@ async function confirmInstall() {
     });
     if (id) await router.push(`/integrations/workflows/${id}`);
   } catch (e) {
-    installError.value = e.message || t("integration.templates.detail.install.error.fallback");
+    installError.value = errorReason(e, t("integration.templates.detail.install.error.fallback"));
   } finally {
     installing.value = false;
   }

package/dist/runtime/pages/integrations/templates/index.vue

@@ -2,6 +2,7 @@
 import { computed, ref, watch } from "vue";
 import { Magnifier as Search, Layers, DangerTriangle as AlertTriangle } from "#solar-icons";
 import { Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@revenexx/studio";
+import LoadingAnnouncement from "../../../components/Integrations/LoadingAnnouncement.vue";
 import TemplateCard from "../../../components/Integrations/TemplateCard.vue";
 import { templateCategoryLabel, templatePackageLabel } from "../../../data/integrationTemplates";
 const t = useIntegrationsT();
@@ -55,7 +56,6 @@ watch(() => templates.value.length, () => {
   if (templates.value.length) void ensureDetails(templates.value.map((t2) => t2.slug));
 });
 const awaitingCatalogue = computed(() => loading.value && !templates.value.length);
-const statusText = computed(() => awaitingCatalogue.value ? t("integration.templates.gallery.state.loading") : "");
 </script>
 
 <template>
@@ -115,22 +115,25 @@ const statusText = computed(() => awaitingCatalogue.value ? t("integration.templ
     </PageHeader>
 
     <div class="p-4">
-      <!-- What the page is doing, in words (specs/templates.md AC-9).
-           The shimmer says "still working" only to somebody who can see it, and
-           six blank tiles carry no text, no name and no state — so waiting and
-           "nothing is registered" were the same silence, which are the two states
-           that ask for opposite reactions.
+      <!-- What the page is doing, in words (specs/templates.md AC-9). The mechanics are
+           in LoadingAnnouncement; three things about this page in particular are not.
 
-           The region is OUTSIDE the v-if chain below and always in the DOM, with
-           only its text changing. A live region that appears together with its
-           content is a region assistive technology may never have been watching:
-           what is announced is a change inside an existing region.
+           The region is NAMED because every card draws a status region of its own while
+           its flow miniature loads, so an unnamed one here would be indistinguishable
+           from six of those.
 
-           Named, because it is not the only `role="status"` on this page: every
-           card draws one while its flow miniature loads ("Loading the flow"). Two
-           unnamed status regions on one page are two things a reader — and a test —
-           cannot tell apart, and this one is about the gallery rather than a card. -->
-      <p role="status" aria-live="polite" :aria-label="t('integration.templates.gallery.state.regionLabel')" class="sr-only">{{ statusText }}</p>
+           Only the WAIT gets words. The empty registry and a filter without a match say
+           which they are in copy the reader arrives at or already has focus in, so
+           announcing them too would tell each of them twice.
+
+           A refused catalogue IS announced, but not from here: it is said by the block
+           that shows it, which carries `role="alert"`. Saying it here as well would put
+           the same sentence twice in the DOM, heard twice by anybody walking the page. -->
+      <LoadingAnnouncement
+        :label="t('integration.templates.gallery.state.regionLabel')"
+        :loading="awaitingCatalogue"
+        :text="t('integration.templates.gallery.state.loading')"
+      />
 
       <!-- The placeholders are taken out of the accessibility tree rather than
            marked busy. `aria-busy` only asks assistive technology to defer