@revenexx/studio-integrations 0.1.3 → 0.2.0

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

@@ -1,19 +1,40 @@
 <script setup>
-import { computed } from "vue";
-import { Pulse as Activity, DangerTriangle as AlertTriangle, ArrowRight, ClockCircle as Clock, Layers, AddCircle as Plus, MagicStick as Sparkles, GraphUp as TrendingUp, Programming as Workflow } from "#solar-icons";
+import { computed, ref, watch } from "vue";
+import TemplateFlowPreview from "../../components/Integrations/TemplateFlowPreview.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";
 useHead({ title: "Dashboard \xB7 Integration Studio" });
-const { workflows, activeCount: activeWorkflows, load: loadWorkflows } = useIntegrationsWorkflows();
-const { runs, runningCount, failedCount, load: loadRuns } = useIntegrationsRuns();
-const { popular, load: loadTemplates } = useIntegrationsTemplates();
+const { workflows, activeCount: activeWorkflows, loading: workflowsLoading, load: loadWorkflows } = useIntegrationsWorkflows();
+const { runs, runningCount, failedCount, loading: runsLoading, load: loadRuns } = useIntegrationsRuns();
+const { popular, loading: templatesLoading, load: loadTemplates, ensureDetails } = useIntegrationsTemplates();
+watch(() => popular.value.map((t) => t.slug).join(","), () => {
+  if (popular.value.length) void ensureDetails(popular.value.map((t) => t.slug));
+}, { immediate: true });
 const { activeCount: schedulesActive, load: loadSchedules } = useIntegrationsSchedules();
+const { pendingCount: missedRuns, globalLoading: missedLoading, loadGlobal: loadMissedRuns } = useIntegrationsDeadLetters();
+const kpisLoading = computed(() => workflowsLoading.value && !workflows.value.length || runsLoading.value && !runs.value.length);
+const latestLoading = computed(() => runsLoading.value && !runs.value.length);
+const createOpen = ref(false);
+const NuxtLinkComp = resolveComponent("NuxtLink");
 onMounted(() => {
   void loadWorkflows();
   void loadRuns();
   void loadTemplates();
   void loadSchedules();
+  void loadMissedRuns();
+});
+const latestPerWorkflow = computed(() => {
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const r of runs.value) {
+    if (seen.has(r.workflowId)) continue;
+    seen.add(r.workflowId);
+    out.push(r);
+    if (out.length >= 10) break;
+  }
+  return out;
 });
-const recentRuns = computed(() => runs.value.slice(0, 6));
 const failedRecent = computed(() => runs.value.filter((r) => r.status === "failed").slice(0, 3));
 function formatRelative(iso) {
   if (!iso) return "\u2014";
@@ -58,8 +79,22 @@ const kpis = computed(() => [
     sub: "cron triggers active",
     icon: Clock,
     tile: "bg-violet-500 text-white"
+  },
+  {
+    label: "Missed runs",
+    value: missedRuns.value,
+    sub: "trigger firings without a run",
+    icon: AlertTriangle,
+    tile: missedRuns.value ? "bg-amber-500 text-white" : "bg-slate-300 text-white",
+    to: "/integrations/runs?tab=missed"
   }
 ]);
+const surfaces = [
+  { label: "Import & Export", to: "/integrations/io", icon: Database, hint: "Profiles that move catalogue and entity data in and out." },
+  { label: "SFTP Server", to: "/integrations/sftp", icon: Boxes, hint: "Managed SFTP endpoints for file-based exchange." },
+  { label: "Event Stream", to: "/integrations/events", icon: Radio, hint: "Live platform events that workflows subscribe to." },
+  { label: "Webhooks", to: "/integrations/webhooks", icon: Webhook, hint: "Inbound HTTP endpoints that trigger workflows." }
+];
 </script>
 
 <template>
@@ -75,25 +110,31 @@ const kpis = computed(() => [
             Browse templates
           </Button>
         </NuxtLink>
-        <NuxtLink to="/integrations/workflows/new">
-          <Button class="h-7 text-sm">
-            <Plus :size="14" />
-            New workflow
-          </Button>
-        </NuxtLink>
+        <Button class="h-7 text-sm" @click="createOpen = true">
+          <Plus :size="14" />
+          New workflow
+        </Button>
       </template>
     </PageHeader>
 
     <div class="p-4 space-y-4">
       <!-- KPI strip -->
       <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
-        <div v-for="k in kpis" :key="k.label" class="rounded-lg border border-black/[0.06] bg-white p-3">
+        <component
+          :is="k.to ? NuxtLinkComp : 'div'"
+          v-for="k in kpis"
+          :key="k.label"
+          :to="k.to"
+          class="block rounded-lg border border-black/[0.06] bg-white p-3"
+          :class="k.to ? 'transition hover:border-black/20' : ''"
+        >
           <div class="flex items-start justify-between gap-2">
             <div class="min-w-0">
               <div class="text-mono text-muted-foreground truncate">
                 {{ k.label }}
               </div>
-              <div class="text-2xl font-semibold tabular-nums text-[#0B0522]">
+              <div v-if="kpisLoading" 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>
               <div class="text-sm text-muted-foreground">
@@ -104,7 +145,7 @@ const kpis = computed(() => [
               <component :is="k.icon" :size="16" />
             </span>
           </div>
-        </div>
+        </component>
       </div>
 
       <!-- Two-column: recent runs + needs attention + popular templates -->
@@ -116,7 +157,7 @@ const kpis = computed(() => [
               <span class="flex size-6 items-center justify-center rounded-md bg-slate-100 text-slate-500">
                 <Activity :size="12" />
               </span>
-              <h3 class="text-sm font-semibold">Recent runs</h3>
+              <h3 class="text-sm font-semibold">Latest executions</h3>
             </div>
             <NuxtLink to="/integrations/runs" class="text-sm text-muted-foreground hover:text-foreground inline-flex items-center gap-1">
               View all <ArrowRight :size="11" />
@@ -124,17 +165,17 @@ const kpis = computed(() => [
           </div>
           <div>
             <div
-              v-for="r in recentRuns"
+              v-for="r in latestPerWorkflow"
               :key="r.id"
-              class="grid grid-cols-[80px_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 cursor-pointer hover:bg-muted/30"
-              @click="$router.push(`/integrations/workflows/${r.workflowId}`)"
+              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 cursor-pointer hover:bg-muted/30"
+              @click="$router.push({ path: `/integrations/workflows/${r.workflowId}`, query: { run: r.id } })"
             >
-              <Badge variant="outline" :class="['text-sm border', statusClass(r.status)]">
+              <Badge variant="outline" :class="['border text-xs font-medium uppercase', statusClass(r.status)]">
                 {{ r.status }}
               </Badge>
               <div class="truncate">
                 <div class="font-medium text-foreground truncate">{{ r.workflowName }}</div>
-                <div class="font-mono text-sm text-muted-foreground truncate">{{ r.id }}</div>
+                <div class="font-mono text-xs text-muted-foreground truncate">{{ r.temporalRunId ?? "\u2014" }}</div>
               </div>
               <div class="text-sm text-muted-foreground tabular-nums truncate">
                 {{ formatRelative(r.startedAt) }}
@@ -143,7 +184,22 @@ const kpis = computed(() => [
                 {{ r.durationMs == null ? "\u2026" : `${(r.durationMs / 1e3).toFixed(2)}s` }}
               </div>
             </div>
-            <div v-if="!recentRuns.length" class="px-3 py-8 text-center text-sm text-muted-foreground">
+            <template v-if="latestLoading && !latestPerWorkflow.length">
+              <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"
+              >
+                <div class="h-5 w-16 rounded bg-black/[0.07] animate-pulse" />
+                <div class="space-y-1.5">
+                  <div class="h-3 w-1/2 rounded bg-black/[0.07] animate-pulse" />
+                  <div class="h-3 w-2/3 rounded bg-black/[0.05] animate-pulse" />
+                </div>
+                <div class="h-3 w-14 rounded bg-black/[0.05] animate-pulse" />
+                <div class="h-3 w-10 justify-self-end rounded bg-black/[0.05] animate-pulse" />
+              </div>
+            </template>
+            <div v-else-if="!latestPerWorkflow.length" class="px-3 py-8 text-center text-sm text-muted-foreground">
               No runs yet.
             </div>
           </div>
@@ -159,7 +215,21 @@ const kpis = computed(() => [
               <h3 class="text-sm font-semibold">Needs attention</h3>
             </div>
           </div>
-          <div v-if="failedRecent.length">
+          <div v-if="(missedLoading || latestLoading) && !missedRuns && !failedRecent.length" 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">
+            <!-- Missed runs first — trigger firings that never became a run. -->
+            <NuxtLink
+              v-if="missedRuns"
+              to="/integrations/runs?tab=missed"
+              class="block space-y-1 border-b border-black/[0.04] px-3 py-2 text-sm hover:bg-muted/30"
+            >
+              <div class="font-medium">{{ missedRuns }} missed run{{ missedRuns === 1 ? "" : "s" }}</div>
+              <div class="text-sm text-amber-700">
+                Triggers fired while their workflow couldn't run — review &amp; replay.
+              </div>
+            </NuxtLink>
             <div
               v-for="r in failedRecent"
               :key="r.id"
@@ -181,6 +251,27 @@ const kpis = computed(() => [
         </div>
       </div>
 
+      <!-- Data exchange & events — the studio surfaces beyond workflows. -->
+      <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
+        <NuxtLink
+          v-for="sfc in surfaces"
+          :key="sfc.to"
+          :to="sfc.to"
+          class="group rounded-lg border border-black/[0.06] bg-white p-3 transition hover:border-black/20"
+        >
+          <div class="flex items-center gap-2">
+            <span class="flex size-6 items-center justify-center rounded-md bg-slate-100 text-slate-500">
+              <component :is="sfc.icon" :size="12" />
+            </span>
+            <span class="min-w-0 flex-1 truncate text-sm font-semibold">{{ sfc.label }}</span>
+            <ArrowRight :size="11" class="text-muted-foreground transition-transform group-hover:translate-x-0.5" />
+          </div>
+          <p class="mt-2 text-sm text-muted-foreground">
+            {{ sfc.hint }}
+          </p>
+        </NuxtLink>
+      </div>
+
       <!-- Popular templates -->
       <div class="rounded-lg border border-black/[0.06] bg-white">
         <div class="flex items-center justify-between border-b border-black/[0.06] px-3 py-2">
@@ -194,7 +285,14 @@ const kpis = computed(() => [
             See all <ArrowRight :size="11" />
           </NuxtLink>
         </div>
-        <div v-if="!popular.length" class="px-3 py-6 text-center text-sm text-muted-foreground">
+        <div v-if="templatesLoading && !popular.length" 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" />
+            <div class="h-3 w-1/2 rounded bg-black/[0.05] animate-pulse" />
+          </div>
+        </div>
+        <div v-else-if="!popular.length" class="px-3 py-6 text-center text-sm text-muted-foreground">
           No templates registered yet.
         </div>
         <div v-else class="grid gap-2 p-3 sm:grid-cols-2 lg:grid-cols-4">
@@ -202,25 +300,24 @@ const kpis = computed(() => [
             v-for="tpl in popular"
             :key="tpl.slug"
             :to="`/integrations/templates/${tpl.slug}`"
-            class="block rounded-md border border-black/[0.06] bg-white p-3 transition hover:border-black/20 hover:shadow-sm"
+            class="flex flex-col overflow-hidden rounded-md border border-black/[0.06] bg-white transition hover:border-black/20 hover:shadow-sm"
           >
-            <div class="flex items-center gap-2 mb-2">
-              <Badge variant="outline" class="text-sm">
+            <div class="relative h-20 shrink-0 border-b border-black/[0.06] bg-slate-50/70 [background-image:radial-gradient(circle,rgba(15,23,42,0.07)_1px,transparent_1px)] [background-size:12px_12px]">
+              <TemplateFlowPreview v-if="tpl.detailLoaded" :blob="tpl.blob" :height="80" class="px-1" />
+              <span class="absolute left-1.5 top-1.5 inline-flex items-center whitespace-nowrap rounded-full bg-slate-100 px-1.5 py-px text-[11px] font-medium uppercase text-slate-700">
                 {{ tpl.category }}
-              </Badge>
-              <span class="flex-1" />
-              <span class="text-sm text-muted-foreground tabular-nums inline-flex items-center gap-0.5">
-                <TrendingUp :size="10" />
-                {{ tpl.installs }}
               </span>
             </div>
-            <div class="text-sm font-medium truncate">{{ tpl.name }}</div>
-            <p class="mt-1 text-sm text-muted-foreground line-clamp-2">
-              {{ tpl.description }}
-            </p>
+            <div class="flex min-h-0 flex-1 flex-col p-3">
+              <div class="text-sm font-medium truncate">{{ tpl.name }}</div>
+              <p class="mt-1 text-sm text-muted-foreground line-clamp-2">
+                {{ tpl.description }}
+              </p>
+            </div>
           </NuxtLink>
         </div>
       </div>
     </div>
+    <WorkflowCreateDialog v-model:open="createOpen" />
   </IntegrationsLayout>
 </template>

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

@@ -1,44 +1,76 @@
 <script setup>
-import { ClockCircle as Clock, Play, LinkRound as Webhook } from "#solar-icons";
-import { Badge } from "@revenexx/studio";
-import RunDetailDialog from "../../components/Integrations/RunDetailDialog.vue";
+import { RefreshCircle as Loader2, Refresh as ReplayIcon, TrashBinMinimalistic as Trash2 } from "#solar-icons";
+import { Badge, Button } from "@revenexx/studio";
+import { toast } from "vue-sonner";
+import RunsTable from "../../components/Integrations/RunsTable.vue";
 import { statusClass } from "../../utils/statusStyle";
 useHead({ title: "Runs \xB7 Integration Studio" });
-const { runs, load } = useIntegrationsRuns();
+const route = useRoute();
+const { runs, loading, load } = useIntegrationsRuns();
+const {
+  globalItems: missed,
+  globalLoading: missedLoading,
+  pendingCount,
+  loadGlobal,
+  replay,
+  discard
+} = useIntegrationsDeadLetters();
+const tab = ref(route.query.tab === "missed" ? "missed" : "runs");
+const tabs = computed(() => [
+  { key: "runs", label: "Runs" },
+  // "Missed runs": trigger firings that never became a run (dead letters).
+  { key: "missed", label: "Missed runs", badge: pendingCount.value || null }
+]);
+const hasActiveRuns = computed(() => runs.value.some((r) => r.status === "running" || r.status === "queued"));
+let pollTimer = null;
 onMounted(() => {
-  void load();
+  void load(true);
+  void loadGlobal(true);
+  pollTimer = setInterval(() => {
+    if (hasActiveRuns.value) void load(true);
+  }, 3e3);
 });
-const detailOpen = ref(false);
-const selectedRun = ref(null);
-function openRun(r) {
-  selectedRun.value = r;
-  detailOpen.value = true;
+onUnmounted(() => {
+  if (pollTimer) {
+    clearInterval(pollTimer);
+    pollTimer = null;
+  }
+});
+const busyId = ref(null);
+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 ? `Replayed \u2014 started run #${newId}` : "Replayed");
+    await loadGlobal(true);
+    void load(true);
+  } catch (e) {
+    toast.error(e?.message ?? "Could not replay.");
+  } finally {
+    busyId.value = null;
+  }
 }
-function triggerIcon(type) {
-  return type === "schedule" ? Clock : type === "webhook" ? Webhook : Play;
+async function onDiscard(dl) {
+  busyId.value = dl.id;
+  try {
+    await discard(dl.id);
+    toast.success("Discarded");
+    await loadGlobal(true);
+  } catch (e) {
+    toast.error(e?.message ?? "Could not discard.");
+  } finally {
+    busyId.value = null;
+  }
 }
-function formatRelative(iso) {
+function fmt(iso) {
   if (!iso) return "\u2014";
-  const ms = Date.now() - new Date(iso).getTime();
-  if (ms < 6e4) return `${Math.max(1, Math.floor(ms / 1e3))}s ago`;
-  if (ms < 36e5) return `${Math.floor(ms / 6e4)}m ago`;
-  if (ms < 864e5) return `${Math.floor(ms / 36e5)}h ago`;
-  return `${Math.floor(ms / 864e5)}d ago`;
-}
-function formatDuration(ms) {
-  if (ms == null) return "\u2014";
-  if (ms < 1e3) return `${ms}ms`;
-  if (ms < 6e4) return `${(ms / 1e3).toFixed(2)}s`;
-  return `${(ms / 6e4).toFixed(1)}m`;
+  try {
+    return new Date(iso).toLocaleString();
+  } catch {
+    return iso;
+  }
 }
-const columns = [
-  { key: "status", label: "Status", width: "100px", sortable: true, sortGetter: (r) => r.status },
-  { key: "workflow", label: "Workflow", sortable: true, sortGetter: (r) => r.workflowName.toLowerCase(), searchGetter: (r) => `${r.workflowName} ${r.id}` },
-  { key: "trigger", label: "Trigger", width: "120px", sortable: true, sortGetter: (r) => r.triggerType },
-  { key: "started", label: "Started", width: "120px", sortable: true, sortGetter: (r) => r.startedAt },
-  { key: "duration", label: "Duration", width: "100px", sortable: true, sortGetter: (r) => r.durationMs ?? -1 },
-  { key: "steps", label: "Steps", width: "80px", sortable: true, sortGetter: (r) => r.steps.length }
-];
 </script>
 
 <template>
@@ -48,53 +80,71 @@ const columns = [
       description="Execution history across every workflow — sourced from Temporal."
     />
 
-    <div class="p-4">
-      <DataTable
-        :data="runs"
-        :columns="columns"
-        :row-key="(r) => r.id"
-        :default-sort="{ column: 'started', direction: 'desc' }"
-        :search="{ placeholder: 'Search runs\u2026' }"
-        :filter="true"
-        empty-text="No runs yet — kick off a workflow to populate this view."
-        @row-click="(r) => openRun(r)"
-      >
-        <template #cell-status="{ row: run }">
-          <Badge variant="outline" :class="['text-sm border', statusClass(run.status)]">
-            {{ run.status }}
-          </Badge>
-        </template>
-
-        <template #cell-workflow="{ row: run }">
-          <div class="min-w-0">
-            <div class="font-medium text-sm truncate">{{ run.workflowName }}</div>
-            <div class="font-mono text-sm text-muted-foreground truncate">{{ run.id }}</div>
-          </div>
-        </template>
+    <TabBar v-model="tab" :tabs="tabs" class="px-4" />
 
-        <template #cell-trigger="{ row: run }">
-          <div class="flex items-center gap-1 text-sm text-muted-foreground">
-            <component :is="triggerIcon(run.triggerType)" :size="11" />
-            {{ run.triggerType }}
-          </div>
-        </template>
+    <div class="p-4 space-y-4">
+      <RunsTable v-if="tab === 'runs'" :runs="runs" :loading="loading" @changed="() => load(true)" />
 
-        <template #cell-started="{ row: run }">
-          <span class="text-sm text-muted-foreground tabular-nums">{{ formatRelative(run.startedAt) }}</span>
-        </template>
+      <!-- Missed runs — trigger firings that never produced a run (the
+           workflow wasn't runnable when its schedule/event fired). -->
+      <template v-else>
+        <div class="flex items-center justify-between">
+          <p class="text-sm text-muted-foreground">
+            Triggers that fired while their workflow couldn't run (bundle building or failed). Replay starts a fresh run from the captured payload.
+          </p>
+          <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="missedLoading" @click="() => loadGlobal(true)">
+            <Loader2 v-if="missedLoading" :size="12" class="animate-spin" />
+            Refresh
+          </Button>
+        </div>
 
-        <template #cell-duration="{ row: run }">
-          <span class="text-sm tabular-nums">{{ formatDuration(run.durationMs) }}</span>
-        </template>
+        <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-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">
+              <div class="h-3 w-1/3 rounded bg-black/[0.07] animate-pulse" />
+              <div class="h-3 w-2/3 rounded bg-black/[0.05] animate-pulse" />
+            </div>
+          </div>
+        </div>
+        </div>
+        <div v-else-if="!missed.length" class="rounded-lg border border-black/[0.06] bg-white p-6 text-center text-sm text-muted-foreground">
+          No missed runs. Every trigger firing made it into a run.
+        </div>
 
-        <template #cell-steps="{ row: run }">
-          <span class="text-sm text-muted-foreground tabular-nums">
-            {{ run.steps.filter((s) => s.status === "succeeded").length }} / {{ run.steps.length }}
-          </span>
-        </template>
-      </DataTable>
+        <div v-else class="rounded-lg border border-black/[0.06] bg-white divide-y divide-black/[0.04]">
+          <div
+            v-for="dl in missed"
+            :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>
+            <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 }}
+              </NuxtLink>
+              <div class="text-sm break-words">{{ dl.reason || "No reason recorded." }}</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">
+                <span>#{{ dl.id }}</span>
+                <span v-if="dl.source">{{ dl.source }}</span>
+                <span v-if="dl.trigger_handle">↳ {{ dl.trigger_handle }}</span>
+                <span>{{ fmt(dl.created_at) }}</span>
+              </div>
+            </div>
+            <div v-if="dl.status === 'pending'" class="flex shrink-0 items-center gap-1">
+              <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="busyId === dl.id" @click="onReplay(dl)">
+                <Loader2 v-if="busyId === dl.id" :size="12" class="animate-spin" />
+                <ReplayIcon v-else :size="12" />
+                Replay
+              </Button>
+              <Button variant="ghost" size="sm" class="h-7 text-sm text-rose-600 hover:bg-rose-500/10" :disabled="busyId === dl.id" @click="onDiscard(dl)">
+                <Trash2 :size="12" />
+                Discard
+              </Button>
+            </div>
+          </div>
+        </div>
+      </template>
     </div>
-
-    <RunDetailDialog v-model:open="detailOpen" :run="selectedRun" />
   </IntegrationsLayout>
 </template>

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

@@ -3,21 +3,10 @@ import { ClockCircle as Clock, Globus as Globe } from "#solar-icons";
 import { Badge } from "@revenexx/studio";
 useHead({ title: "Schedules \xB7 Integration Studio" });
 const router = useRouter();
-const { entries, activeCount, load } = useIntegrationsSchedules();
+const { entries, activeCount, loading, load } = useIntegrationsSchedules();
 onMounted(() => {
-  void load();
+  void load(true);
 });
-function describeCron(cron) {
-  const parts = cron.split(/\s+/);
-  if (parts.length !== 5) return cron;
-  const [m, h, dom, mon, dow] = parts;
-  if (cron === "0 * * * *") return "every hour";
-  if (m === "0" && /^\d+$/.test(h ?? "") && dom === "*" && mon === "*" && dow === "*") return `daily at ${h?.padStart(2, "0")}:00`;
-  if (m === "0" && h === "0" && dom === "*" && mon === "*" && dow === "*") return "daily at midnight";
-  if (dom !== "*" && mon === "*") return `on day ${dom} of each month`;
-  if (dow !== "*" && dow !== "?") return `weekly on ${dow}`;
-  return cron;
-}
 function formatRelative(iso) {
   if (!iso) return "\u2014";
   const ms = new Date(iso).getTime() - Date.now();
@@ -57,6 +46,7 @@ const columns = [
 
     <div class="p-4">
       <DataTable
+        :loading="loading"
         :data="entries"
         :columns="columns"
         :row-key="(e2) => e2.id"
@@ -73,7 +63,6 @@ const columns = [
             </div>
             <div class="min-w-0">
               <div class="font-medium text-sm truncate">{{ e.workflowName }}</div>
-              <div class="text-sm text-muted-foreground truncate">{{ describeCron(e.cron) }}</div>
             </div>
           </div>
         </template>
@@ -98,10 +87,10 @@ const columns = [
         </template>
 
         <template #cell-status="{ row: e }">
-          <Badge v-if="e.active" variant="outline" class="bg-emerald-500/10 border-emerald-500/20 text-emerald-700 text-sm">
+          <Badge v-if="e.active" variant="outline" class="bg-emerald-500/10 border-emerald-500/20 text-emerald-700 text-xs font-medium uppercase">
             live
           </Badge>
-          <Badge v-else variant="outline" class="text-sm">
+          <Badge v-else variant="outline" class="text-xs font-medium uppercase">
             paused
           </Badge>
         </template>

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

@@ -166,10 +166,8 @@ const columns = [
       <div v-if="error" class="mb-3 rounded-lg border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700">
         {{ error }}
       </div>
-      <div v-if="loading && !secrets.length" class="flex items-center gap-2 px-1 py-3 text-sm text-muted-foreground">
-        <Loader2 :size="14" class="animate-spin" /> Loading secrets…
-      </div>
       <DataTable
+        :loading="loading"
         :data="secrets"
         :columns="columns"
         :row-key="(s2) => s2.key"