@revenexx/studio-integrations 0.7.0 → 1.1.0

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

@@ -4,7 +4,7 @@ import { Badge, Button } from "@revenexx/studio";
 import { toast } from "vue-sonner";
 import RunsTable from "../../components/Integrations/RunsTable.vue";
 import { createPollBudget, SAFETY_POLL_MS } from "../../utils/pollBudget";
-import { statusClass } from "../../utils/statusStyle";
+import { deadLetterStatusClass, deadLetterStatusLabel } from "../../utils/statusStyle";
 const t = useIntegrationsT();
 useHead({ title: () => t("integration.runs.list.head.title") });
 const route = useRoute();
@@ -37,7 +37,7 @@ watch([runTick, workflowTick], () => {
 let pollTimer = null;
 onMounted(() => {
   void load(true);
-  void loadGlobal(true);
+  void reloadMissedRuns();
   pollTimer = setInterval(() => {
     if (hasActiveRuns.value && !loading.value && budget.due(delivering.value)) void load(true);
   }, POLL_MS);
@@ -49,31 +49,43 @@ onUnmounted(() => {
   }
 });
 const busyId = ref(null);
+async function reloadMissedRuns() {
+  try {
+    await loadGlobal(true);
+  } catch {
+  }
+}
 async function onReplay(dl) {
   busyId.value = dl.id;
   try {
     const res = await replay(dl.id);
     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"));
-    await loadGlobal(true);
-    reload();
   } catch (e) {
     toast.error(e?.message ?? t("integration.deadLetters.toast.replay.error"));
-  } finally {
     busyId.value = null;
+    return;
   }
+  await reloadMissedRuns();
+  reload();
+  busyId.value = null;
 }
 async function onDiscard(dl) {
   busyId.value = dl.id;
   try {
     await discard(dl.id);
     toast.success(t("integration.deadLetters.toast.discard.done"));
-    await loadGlobal(true);
   } catch (e) {
     toast.error(e?.message ?? t("integration.deadLetters.toast.discard.error"));
-  } finally {
     busyId.value = null;
+    return;
   }
+  await reloadMissedRuns();
+  busyId.value = null;
+}
+function workflowNameOf(dl) {
+  const name = dl.workflow_name;
+  return typeof name === "string" && name.trim() !== "" ? name : t("integration.deadLetters.workflow.fallback", { id: dl.workflow_id });
 }
 function fmt(iso) {
   if (!iso) return "\u2014";
@@ -104,7 +116,7 @@ function fmt(iso) {
           <p class="text-sm text-muted-foreground">
             {{ t("integration.deadLetters.list.description") }}
           </p>
-          <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="missedLoading" @click="() => loadGlobal(true)">
+          <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="missedLoading" @click="() => reloadMissedRuns()">
             <Loader2 v-if="missedLoading" :size="12" class="animate-spin" />
             {{ t("integration.common.action.refresh") }}
           </Button>
@@ -130,10 +142,10 @@ function fmt(iso) {
             :key="dl.id"
             class="flex items-start gap-3 px-3 py-2.5"
           >
-            <Badge variant="outline" :class="['border text-xs font-medium uppercase shrink-0 mt-0.5', statusClass(dl.status)]">{{ dl.status }}</Badge>
+            <Badge variant="outline" :class="['border text-xs font-medium uppercase shrink-0 mt-0.5', deadLetterStatusClass(dl.status)]">{{ deadLetterStatusLabel(dl.status) }}</Badge>
             <div class="min-w-0 flex-1">
               <NuxtLink :to="`/integrations/workflows/${dl.workflow_id}`" class="text-sm font-medium truncate transition-colors hover:text-primary">
-                {{ dl.workflowName }}
+                {{ workflowNameOf(dl) }}
               </NuxtLink>
               <div class="text-sm break-words">{{ dl.reason || t("integration.deadLetters.reason.fallback") }}</div>
               <div class="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-muted-foreground font-mono">

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

@@ -2,14 +2,23 @@
 import { ClockCircle as Clock, Globus as Globe } from "#solar-icons";
 import { Badge } from "@revenexx/studio";
 import { cadenceRank, describeCron } from "../../utils/schedule";
+import { runStatusLabel } from "../../utils/statusStyle";
 const t = useIntegrationsT();
 useHead({ title: () => t("integration.schedules.head.title") });
 const router = useRouter();
-const { entries, activeCount, loading, load } = useIntegrationsSchedules();
+const { entries, activeCount, timezonesInUse, loading, error, load } = useIntegrationsSchedules();
 onMounted(() => {
   void load(true);
 });
-function formatRelative(iso) {
+function inScheduleZone(iso, timezone) {
+  const parts = { month: "short", day: "2-digit", hour: "2-digit", minute: "2-digit" };
+  try {
+    return new Date(iso).toLocaleString(void 0, { ...parts, timeZone: timezone });
+  } catch {
+    return new Date(iso).toLocaleString(void 0, parts);
+  }
+}
+function formatRelative(iso, timezone) {
   if (!iso) return "\u2014";
   const ms = new Date(iso).getTime() - Date.now();
   if (Math.abs(ms) < 6e4) return ms > 0 ? t("integration.schedules.time.inLessThanMinute") : t("integration.common.time.justNow");
@@ -21,7 +30,11 @@ function formatRelative(iso) {
     const hrs = Math.round(Math.abs(ms) / 36e5);
     return ms > 0 ? t("integration.schedules.time.inHours", hrs) : t("integration.common.time.hoursAgo", hrs);
   }
-  return new Date(iso).toLocaleString(void 0, { month: "short", day: "2-digit", hour: "2-digit", minute: "2-digit" });
+  return inScheduleZone(iso, timezone);
+}
+function lastRunText(e) {
+  if (e.lastRunAt) return formatRelative(e.lastRunAt, e.timezone);
+  return e.lastRunStatus ? runStatusLabel(e.lastRunStatus) : "\u2014";
 }
 const filterTabs = computed(() => [
   {
@@ -40,7 +53,10 @@ const filterTabs = computed(() => [
     key: "timezone",
     label: t("integration.schedules.table.column.timezone"),
     getter: (e) => e.timezone,
-    options: [...new Set(entries.value.map((e) => e.timezone))].sort().map((tz) => ({ value: tz, label: tz }))
+    // The zones the platform reports as in use across the tenant, not the ones
+    // visible in the rows: with the list narrowed, deriving them from the rows
+    // would shrink the menu to what the previous choice left standing.
+    options: timezonesInUse.value.map((tz) => ({ value: tz, label: tz }))
   }
 ]);
 const columns = computed(() => [
@@ -76,7 +92,25 @@ const columns = computed(() => [
       </template>
     </PageHeader>
 
+    <!--
+      A refused read says so. Without this the page fell through to the table's
+      own empty text, so a 503 and a tenant with no schedules were one screen —
+      and the message it needed was already written and translated
+      (`specs/schedules.md` AC-13). An alert rather than a bare div, so it is
+      announced and not only visible.
+    -->
+    <div v-if="error" role="alert" class="m-4 rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700">
+      {{ error }}
+    </div>
+
     <div class="p-4">
+      <!--
+        The empty text answers the error too, so the table cannot go on saying
+        "No schedules yet" underneath a banner explaining that there was no
+        answer to count. Two renderings of one fact rather than two facts: the
+        banner carries the platform's own words, which may be specific, and this
+        is why the list is blank.
+      -->
       <DataTable
         :loading="loading"
         :data="entries"
@@ -85,7 +119,7 @@ const columns = computed(() => [
         :default-sort="{ column: 'nextRun', direction: 'asc' }"
         :search="{ placeholder: t('integration.schedules.search.placeholder') }"
         :filter-tabs="filterTabs"
-        :empty-text="t('integration.schedules.state.empty')"
+        :empty-text="error ? t('integration.schedules.error.loadFailed') : t('integration.schedules.state.empty')"
         @row-click="(e2) => router.push(`/integrations/workflows/${e2.workflowId}`)"
       >
         <template #cell-workflow="{ row: e }">
@@ -143,12 +177,35 @@ const columns = computed(() => [
           semantics in the shared table (PO-233, and a gap in
           `specs/accessibility.md`).
         -->
+        <!--
+          The instant the platform holds, shown as a distance from now, with the
+          moment in the schedule's own zone as its title: "in 6d" answers when,
+          and "2026-08-24T08:30:00+02:00" answers which side of a clock change it
+          falls on. Neither is worked out here — a browser doing summer-time
+          arithmetic that a wrong answer makes worse than no answer is exactly
+          what this replaced.
+        -->
         <template #cell-nextRun="{ row: e }">
-          <span :aria-label="t('integration.schedules.table.column.nextRun')" class="text-sm tabular-nums">{{ formatRelative(e.nextRunAt) }}</span>
+          <span
+            :aria-label="t('integration.schedules.table.column.nextRun')"
+            :title="e.nextRunLocal ?? void 0"
+            class="text-sm tabular-nums"
+          >{{ formatRelative(e.nextRunAt, e.timezone) }}</span>
         </template>
 
+        <!--
+          The last run carries a title too, and it is the instant rather than a
+          zone reading: the platform reports no local form for a run the way it
+          does for a firing, and inventing one here is what this page stopped
+          doing. Without it a run further back than a day was readable to the
+          minute and to no greater precision than the cell's own text.
+        -->
         <template #cell-lastRun="{ row: e }">
-          <span :aria-label="t('integration.schedules.table.column.lastRun')" class="text-sm tabular-nums text-muted-foreground">{{ formatRelative(e.lastRunAt) }}</span>
+          <span
+            :aria-label="t('integration.schedules.table.column.lastRun')"
+            :title="e.lastRunAt ?? void 0"
+            class="text-sm tabular-nums text-muted-foreground"
+          >{{ lastRunText(e) }}</span>
         </template>
 
         <template #cell-status="{ row: e }">

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

@@ -1,7 +1,8 @@
 <script setup>
 import { computed, reactive, ref } from "vue";
 import { marked } from "marked";
-import { AltArrowRight as Chevron, Bolt as Zap, CheckCircle as CheckCircle2, ClockCircle as Clock, Global as Webhook, Key, Play, RefreshCircle as Loader2, Shield as ShieldAlert, User } from "#solar-icons";
+import { AltArrowRight as Chevron, CheckCircle as CheckCircle2, Key, RefreshCircle as Loader2, Shield as ShieldAlert, User } from "#solar-icons";
+import { triggerGlyph as glyphForTrigger } from "../../../data/triggerGlyphs";
 import {
   Badge,
   Button,
@@ -90,7 +91,6 @@ function firstSentence(text) {
   const idx = text.indexOf(". ");
   return idx === -1 ? text : text.slice(0, idx + 1);
 }
-const TRIGGER_ICON = { schedule: Clock, webhook: Webhook, manual: Play, event: Zap };
 const triggerChips = computed(() => (tpl.value?.blob.triggers ?? []).map((trig) => {
   let label = trig.type.charAt(0).toUpperCase() + trig.type.slice(1);
   if (trig.type === "schedule" && trig.config?.cron) {
@@ -99,7 +99,7 @@ const triggerChips = computed(() => (tpl.value?.blob.triggers ?? []).map((trig)
   }
   if (trig.type === "webhook" && trig.config?.path) label = `${t("integration.templates.trigger.webhook")} \xB7 ${trig.config.path}`;
   if (trig.type === "manual") label = t("integration.templates.trigger.manual");
-  return { key: trig.id, icon: TRIGGER_ICON[trig.type] ?? Zap, label };
+  return { key: trig.id, icon: glyphForTrigger(trig.type), label };
 }));
 const variables = computed(() => Object.entries(tpl.value?.blob.variables ?? {}).map(([key, v]) => ({
   key,
@@ -206,8 +206,16 @@ function levelDot(level) {
       </PageHeader>
 
       <div class="p-4 space-y-4">
-        <!-- Hero: the live workflow preview on the editor's dotted canvas -->
-        <div class="relative overflow-hidden rounded-lg border border-black/[0.06] bg-slate-50/70 [background-image:radial-gradient(circle,rgba(15,23,42,0.07)_1px,transparent_1px)] [background-size:14px_14px]">
+        <!-- Hero: the live workflow preview on the editor's dotted canvas.
+             Named like the two panels below it, with `aria-label` because it
+             carries no heading to point at: it was the largest thing on the page
+             and the only one with no name at all, which also left it the one
+             surface drawing the miniature that nothing could address (PO-247). -->
+        <div
+          role="region"
+          :aria-label="t('integration.templates.detail.flow.ariaLabel')"
+          class="relative overflow-hidden rounded-lg border border-black/[0.06] bg-slate-50/70 [background-image:radial-gradient(circle,rgba(15,23,42,0.07)_1px,transparent_1px)] [background-size:14px_14px]"
+        >
           <TemplateFlowPreview v-if="tpl.detailLoaded" :blob="tpl.blob" :height="400" class="px-4" />
           <div v-else class="flex h-[400px] items-center justify-center">
             <Loader2 :size="18" class="animate-spin text-muted-foreground/50" />