@revenexx/studio-integrations 0.1.4 → 0.3.0

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

@@ -0,0 +1,364 @@
+<script setup>
+import { computed, reactive, ref, watch } from "vue";
+import {
+  AddCircle as Plus,
+  CheckCircle as Check,
+  RefreshCircle as Loader2
+} from "#solar-icons";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  Switch,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@revenexx/studio";
+import { toast } from "vue-sonner";
+const props = defineProps({
+  type: { type: [Object, null], required: true }
+});
+const emit = defineEmits(["update:active", "apply"]);
+const KIND_BY_SLUG = {
+  "revenexx:sftp": "sftp",
+  "revenexx:smtp": "smtp",
+  "revenexx:api": "api"
+};
+const kind = computed(() => props.type ? KIND_BY_SLUG[props.type.slug] ?? null : null);
+const SWITCH_LABEL = {
+  sftp: "Use revenexx SFTP Servers",
+  smtp: "Use revenexx Mail Servers",
+  api: "Use revenexx API Keys"
+};
+const NEW_LABEL = {
+  sftp: "New SFTP account",
+  smtp: "New mail credential",
+  api: "New API key"
+};
+const { tenants, onlyTenantSlug, load: loadTenants } = useConsoleTenants();
+const { markets, activeCode, isGlobal, GLOBAL_MARKET_CODE, fetchMarkets } = useActiveMarket();
+const sftp = useConsoleSftp();
+const mail = useMailAdmin();
+const consoleKeys = useConsoleApiKeys();
+const config = useRuntimeConfig();
+const sftpHost = config.public.sftpHost ?? "share.revenexx.com";
+const sftpPort = Number(config.public.sftpPort ?? 42);
+const mailSmtpHost = config.public.mailSmtpHost ?? "mail.rvnxx.com";
+const mailSmtpPort = Number(config.public.mailSmtpPort ?? 587);
+const active = ref(false);
+const tenant = ref(null);
+const marketCode = ref(GLOBAL_MARKET_CODE);
+const selectedId = ref("");
+const loadingList = ref(false);
+const applying = ref(false);
+const applied = ref(null);
+const smtpCreds = ref([]);
+watch(active, (v) => emit("update:active", v));
+watch(kind, () => {
+  active.value = false;
+  selectedId.value = "";
+  applied.value = null;
+});
+const sftpOptions = computed(() => sftp.accounts.value.filter((a) => (a.is_active || a.status === "active") && a.login_username).map((a) => ({ value: String(a.id), label: a.login_username })));
+const marketOptions = computed(() => [
+  { code: GLOBAL_MARKET_CODE, label: "Global (tenant baseline)" },
+  ...markets.value.map((m) => ({ code: m.code, label: `${m.name} (${m.code})` }))
+]);
+async function ensureLists() {
+  loadingList.value = true;
+  try {
+    await loadTenants();
+    if (!tenant.value) tenant.value = onlyTenantSlug.value ?? tenants.value[0]?.slug ?? null;
+    if (kind.value === "sftp") await sftp.load(tenant.value);
+    else if (kind.value === "smtp") {
+      const list = await mail.listCredentials();
+      smtpCreds.value = (list ?? []).filter((c) => c.type === "SMTP").map((c) => ({ uuid: c.uuid, name: c.name }));
+    } else if (kind.value === "api") {
+      marketCode.value = activeCode.value;
+      await fetchMarkets();
+    }
+  } catch (e) {
+    toast.error(e?.message ?? "Could not load revenexx resources.");
+  } finally {
+    loadingList.value = false;
+  }
+}
+watch(active, (on) => {
+  if (on) void ensureLists();
+});
+function marketSlug() {
+  return marketCode.value === GLOBAL_MARKET_CODE ? "" : marketCode.value;
+}
+async function applySftp() {
+  const t = tenant.value;
+  const acc = sftp.accounts.value.find((a) => String(a.id) === selectedId.value);
+  if (!t || !acc) return;
+  applying.value = true;
+  try {
+    const creds = await sftp.revealPassword(t, acc.id);
+    if (!creds) {
+      toast.error("Account still provisioning \u2014 try again in a moment.");
+      return;
+    }
+    emit("apply", {
+      host: sftpHost,
+      port: sftpPort,
+      username: acc.login_username ?? creds.username,
+      password: creds.password
+    });
+    applied.value = `${acc.login_username}@${sftpHost}:${sftpPort}`;
+  } catch (e) {
+    toast.error(e?.message ?? "Could not read the SFTP password.");
+  } finally {
+    applying.value = false;
+  }
+}
+async function applySmtp() {
+  applying.value = true;
+  try {
+    const cred = await mail.getCredential(selectedId.value);
+    emit("apply", {
+      host: mailSmtpHost,
+      port: mailSmtpPort,
+      user: cred.smtp_username ?? "",
+      password: cred.smtp_password ?? "",
+      secure: mailSmtpPort === 465
+    });
+    applied.value = `${cred.smtp_username}@${mailSmtpHost}:${mailSmtpPort}`;
+  } catch (e) {
+    toast.error(e?.message ?? "Could not read the mail credential.");
+  } finally {
+    applying.value = false;
+  }
+}
+function onSelect(id) {
+  selectedId.value = id;
+  if (!id) {
+    applied.value = null;
+    return;
+  }
+  if (kind.value === "sftp") void applySftp();
+  else if (kind.value === "smtp") void applySmtp();
+}
+watch([tenant, marketCode], () => {
+  if (active.value && kind.value === "api" && apiKeyReady.value) {
+    emit("apply", { tenant: tenant.value ?? "", market: marketSlug() });
+  }
+});
+const createOpen = ref(false);
+const creating = ref(false);
+const createName = ref("");
+const provisioningNote = ref("");
+const apiKeyReady = ref(false);
+function openCreate() {
+  createName.value = "";
+  provisioningNote.value = "";
+  createOpen.value = true;
+}
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+async function createSftp() {
+  const t = tenant.value;
+  if (!t) {
+    toast.error("No tenant selected.");
+    return;
+  }
+  creating.value = true;
+  try {
+    let acc = await sftp.create(t, createName.value.trim() || void 0);
+    for (let i = 0; i < 24 && !(acc.is_active || acc.status === "active"); i++) {
+      provisioningNote.value = "Provisioning the account\u2026";
+      await sleep(2500);
+      acc = await sftp.refresh(t, acc.id);
+      if (acc.status === "failed") throw new Error(acc.error_message || "Provisioning failed.");
+    }
+    if (!(acc.is_active || acc.status === "active")) {
+      throw new Error("Still provisioning \u2014 pick it from the list once it turns active.");
+    }
+    await sftp.load(t);
+    selectedId.value = String(acc.id);
+    await applySftp();
+    createOpen.value = false;
+    toast.success("SFTP account created");
+  } catch (e) {
+    toast.error(e?.message ?? "Could not create the SFTP account.");
+  } finally {
+    creating.value = false;
+    provisioningNote.value = "";
+  }
+}
+async function createSmtp() {
+  creating.value = true;
+  try {
+    const cred = await mail.createCredential({ name: createName.value.trim() || "SMTP", type: "SMTP" });
+    emit("apply", {
+      host: mailSmtpHost,
+      port: mailSmtpPort,
+      user: cred.smtp_username ?? "",
+      password: cred.smtp_password ?? "",
+      secure: mailSmtpPort === 465
+    });
+    applied.value = `${cred.smtp_username}@${mailSmtpHost}:${mailSmtpPort}`;
+    smtpCreds.value = [{ uuid: cred.uuid, name: cred.name }, ...smtpCreds.value];
+    selectedId.value = cred.uuid;
+    createOpen.value = false;
+    toast.success("Mail credential created");
+  } catch (e) {
+    toast.error(e?.message ?? "Could not create the mail credential.");
+  } finally {
+    creating.value = false;
+  }
+}
+async function createApiKey() {
+  creating.value = true;
+  try {
+    const { secret } = await consoleKeys.create(createName.value.trim() || "Integrations key", ["*"]);
+    emit("apply", { apiKey: secret, tenant: tenant.value ?? "", market: marketSlug() });
+    apiKeyReady.value = true;
+    applied.value = `Key for ${tenant.value}${marketSlug() ? ` \xB7 ${marketSlug()}` : " \xB7 global"}`;
+    createOpen.value = false;
+    toast.success("API key created");
+  } catch (e) {
+    toast.error(e?.message ?? "Could not create the API key.");
+  } finally {
+    creating.value = false;
+  }
+}
+function submitCreate() {
+  if (kind.value === "sftp") void createSftp();
+  else if (kind.value === "smtp") void createSmtp();
+  else if (kind.value === "api") void createApiKey();
+}
+</script>
+
+<template>
+  <div v-if="kind" class="rounded-lg border border-black/[0.08] bg-muted/20 p-3">
+    <!-- Switch header -->
+    <div class="flex items-center justify-between gap-3">
+      <div class="min-w-0">
+        <div class="text-sm font-medium">{{ SWITCH_LABEL[kind] }}</div>
+        <p class="text-xs text-muted-foreground">
+          Reuse an existing revenexx resource instead of typing access data by hand.
+        </p>
+      </div>
+      <Switch :model-value="active" @update:model-value="(v) => active = v" />
+    </div>
+
+    <div v-if="active" class="mt-3 space-y-3">
+      <!-- Tenant (preselected) -->
+      <div class="space-y-1.5">
+        <Label>Tenant</Label>
+        <Select :model-value="tenant ?? ''" @update:model-value="(v) => tenant = v">
+          <SelectTrigger class="bg-white">
+            <SelectValue placeholder="Select tenant" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem v-for="t in tenants" :key="t.slug" :value="t.slug">
+              {{ t.name }} ({{ t.slug }})
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <!-- Market scope — only the Revenexx API credential is market-scoped -->
+      <div v-if="kind === 'api'" class="space-y-1.5">
+        <Label>Market</Label>
+        <Select :model-value="marketCode" @update:model-value="(v) => marketCode = v">
+          <SelectTrigger class="bg-white">
+            <SelectValue placeholder="Select market" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem v-for="m in marketOptions" :key="m.code" :value="m.code">
+              {{ m.label }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <!-- Resource select (SFTP / Mail) -->
+      <div v-if="kind === 'sftp' || kind === 'smtp'" class="space-y-1.5">
+        <Label>{{ kind === "sftp" ? "SFTP account" : "Mail credential" }}</Label>
+        <div class="flex items-center gap-2">
+          <Select :model-value="selectedId" class="flex-1" @update:model-value="(v) => onSelect(v)">
+            <SelectTrigger class="bg-white">
+              <SelectValue :placeholder="loadingList ? 'Loading\u2026' : 'Select one'" />
+            </SelectTrigger>
+            <SelectContent>
+              <template v-if="kind === 'sftp'">
+                <SelectItem v-for="o in sftpOptions" :key="o.value" :value="o.value">{{ o.label }}</SelectItem>
+              </template>
+              <template v-else>
+                <SelectItem v-for="c in smtpCreds" :key="c.uuid" :value="c.uuid">{{ c.name }}</SelectItem>
+              </template>
+            </SelectContent>
+          </Select>
+          <Button variant="outline" size="sm" class="shrink-0 bg-white" :disabled="!tenant" @click="openCreate">
+            <Plus :size="14" class="mr-1" />
+            New
+          </Button>
+        </div>
+      </div>
+
+      <!-- API key: no existing selection (secret can't be read back) -->
+      <div v-else-if="kind === 'api'">
+        <Button variant="outline" size="sm" class="bg-white" :disabled="!tenant" @click="openCreate">
+          <Plus :size="14" class="mr-1" />
+          Create new API key
+        </Button>
+      </div>
+
+      <!-- Applied summary -->
+      <div v-if="applied || applying" class="flex items-center gap-2 rounded-md bg-emerald-500/10 px-3 py-2 text-sm text-emerald-700">
+        <Loader2 v-if="applying" :size="14" class="animate-spin" />
+        <Check v-else :size="14" />
+        <span class="truncate">{{ applying ? "Copying access data\u2026" : `Using ${applied}` }}</span>
+      </div>
+    </div>
+
+    <!-- Stacked "New …" lightbox -->
+    <Dialog v-model:open="createOpen">
+      <DialogContent class="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{{ kind ? NEW_LABEL[kind] : "New" }}</DialogTitle>
+          <DialogDescription class="text-sm">
+            <template v-if="kind === 'api'">
+              A full-access key is minted for <b>{{ tenant }}</b> and copied straight into this credential.
+            </template>
+            <template v-else-if="kind === 'sftp'">
+              Reserves a new SFTP account for <b>{{ tenant }}</b> and fills its login here.
+            </template>
+            <template v-else>
+              Creates a new SMTP credential and fills its login here.
+            </template>
+          </DialogDescription>
+        </DialogHeader>
+
+        <div class="space-y-1.5 py-1">
+          <Label for="rvnxx-new-name">{{ kind === "sftp" ? "Label" : "Name" }}</Label>
+          <Input
+            id="rvnxx-new-name"
+            v-model="createName"
+            class="bg-white"
+            :placeholder="kind === 'sftp' ? 'e.g. imports' : 'e.g. Production'"
+          />
+          <p v-if="provisioningNote" class="text-xs text-muted-foreground">{{ provisioningNote }}</p>
+        </div>
+
+        <DialogFooter>
+          <Button variant="ghost" :disabled="creating" @click="createOpen = false">Cancel</Button>
+          <Button :disabled="creating" @click="submitCreate">
+            <Loader2 v-if="creating" :size="14" class="mr-1 animate-spin" />
+            Create
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  </div>
+</template>

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

@@ -0,0 +1,12 @@
+import type { CredentialType } from '../../types/integrations.js';
+type __VLS_Props = {
+    type: CredentialType | null;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:active": (args_0: boolean) => any;
+    apply: (args_0: Record<string, unknown>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:active"?: ((args_0: boolean) => any) | undefined;
+    onApply?: ((args_0: Record<string, unknown>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,15 @@
+import type { CredentialType } from '../../types/integrations.js';
+/**
+ * Scalable credential-type picker — a searchable list ("Search for app…") that
+ * scales to ~1000 types where a card grid would not. Client-side filter over the
+ * already-loaded catalogue; no debounce needed.
+ */
+type __VLS_Props = {
+    types: CredentialType[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pick: (args_0: CredentialType) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPick?: ((args_0: CredentialType) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,71 @@
+<script setup>
+import { computed, ref } from "vue";
+import { Magnifier as Search } from "#solar-icons";
+import { Input } from "@revenexx/studio";
+const props = defineProps({
+  types: { type: Array, required: true }
+});
+const emit = defineEmits(["pick"]);
+const query = ref("");
+function loc(v) {
+  if (!v) return "";
+  if (typeof v === "string") return v;
+  const o = v;
+  return o.en ?? o.de ?? Object.values(o)[0] ?? "";
+}
+function authKindLabel(k) {
+  switch (k) {
+    case "api-key":
+      return "API Key";
+    case "oauth2-authcode":
+    case "oauth2-client-credentials":
+      return "OAuth2";
+    case "basic-auth":
+      return "Basic Auth";
+    case "static":
+      return "Static";
+    case "secret":
+      return "Secret";
+    default:
+      return k ?? "";
+  }
+}
+const filtered = computed(() => {
+  const q = query.value.trim().toLowerCase();
+  if (!q) return props.types;
+  return props.types.filter((t) => loc(t.name).toLowerCase().includes(q));
+});
+</script>
+
+<template>
+  <div class="py-1">
+    <div class="relative">
+      <Search :size="15" class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
+      <Input
+        v-model="query"
+        class="bg-white pl-9"
+        placeholder="Search for an app…"
+        autofocus
+      />
+    </div>
+
+    <div class="mt-2 max-h-80 overflow-y-auto -mx-1 px-1">
+      <p v-if="!filtered.length" class="px-2 py-6 text-center text-sm text-muted-foreground">
+        No credential type matches “{{ query }}”.
+      </p>
+      <button
+        v-for="t in filtered"
+        :key="t.slug"
+        type="button"
+        class="flex w-full items-center gap-2.5 rounded-md px-2 py-2 text-left transition hover:bg-muted/50"
+        @click="emit('pick', t)"
+      >
+        <IntegrationsCredentialLogo :type="t" :size="16" />
+        <div class="min-w-0 flex-1 truncate text-sm">
+          <span class="font-medium">{{ loc(t.name) || t.slug }}</span>
+          <span class="ml-1.5 text-muted-foreground">({{ authKindLabel(t.auth_kind) }})</span>
+        </div>
+      </button>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,15 @@
+import type { CredentialType } from '../../types/integrations.js';
+/**
+ * Scalable credential-type picker — a searchable list ("Search for app…") that
+ * scales to ~1000 types where a card grid would not. Client-side filter over the
+ * already-loaded catalogue; no debounce needed.
+ */
+type __VLS_Props = {
+    types: CredentialType[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pick: (args_0: CredentialType) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPick?: ((args_0: CredentialType) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    workflowId: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,151 @@
+<script setup>
+import { onMounted, ref, watch } from "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";
+const props = defineProps({
+  workflowId: { type: Number, required: true }
+});
+const { list, replay, discard } = useIntegrationsDeadLetters();
+const PER_PAGE = 25;
+const items = ref([]);
+const loading = ref(false);
+const error = ref(null);
+const page = ref(1);
+const total = ref(0);
+const lastPage = ref(1);
+const busyId = ref(null);
+async function load(p = page.value) {
+  loading.value = true;
+  error.value = null;
+  try {
+    const res = await list(props.workflowId, { page: p, perPage: PER_PAGE });
+    items.value = res.items;
+    total.value = res.total;
+    lastPage.value = res.lastPage;
+    page.value = res.page;
+  } catch (e) {
+    error.value = e?.message ?? "Could not load dead letters.";
+  } finally {
+    loading.value = false;
+  }
+}
+function goPage(p) {
+  const next = Math.min(Math.max(1, p), lastPage.value);
+  if (next !== page.value) void load(next);
+}
+onMounted(() => void load(1));
+watch(() => props.workflowId, () => void load(1));
+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 load();
+  } catch (e) {
+    toast.error(e?.message ?? "Could not replay.");
+  } finally {
+    busyId.value = null;
+  }
+}
+async function onDiscard(dl) {
+  busyId.value = dl.id;
+  try {
+    await discard(dl.id);
+    toast.success("Discarded");
+    await load();
+  } catch (e) {
+    toast.error(e?.message ?? "Could not discard.");
+  } finally {
+    busyId.value = null;
+  }
+}
+function statusClass(status) {
+  if (status === "pending") return "bg-amber-500/15 text-amber-700 border-amber-500/25";
+  if (status === "replayed") return "bg-emerald-500/15 text-emerald-700 border-emerald-500/25";
+  return "bg-slate-500/15 text-slate-600 border-slate-500/20";
+}
+function fmt(iso) {
+  if (!iso) return "\u2014";
+  try {
+    return new Date(iso).toLocaleString();
+  } catch {
+    return iso;
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div class="flex items-center justify-between">
+      <div>
+        <h3 class="text-sm font-semibold">Missed runs</h3>
+        <p class="mt-0.5 text-sm text-muted-foreground">
+          Triggers that fired while this workflow couldn't run (bundle building or failed). Replay starts a fresh run from the captured payload.
+        </p>
+      </div>
+      <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="loading" @click="() => load()">
+        <Loader2 v-if="loading" :size="12" class="animate-spin" />
+        Refresh
+      </Button>
+    </div>
+
+    <div v-if="error" class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700">
+      {{ error }}
+    </div>
+
+    <div v-if="loading && !items.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="!items.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>
+
+    <div v-else class="rounded-lg border border-black/[0.06] bg-white divide-y divide-black/[0.04]">
+      <div
+        v-for="dl in items"
+        :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">
+          <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>
+
+    <div v-if="lastPage > 1" class="flex items-center justify-between text-sm text-muted-foreground">
+      <span class="tabular-nums">Page {{ page }} / {{ lastPage }} · {{ total }} total</span>
+      <div class="flex gap-2">
+        <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="page <= 1 || loading" @click="goPage(page - 1)">← Newer</Button>
+        <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="page >= lastPage || loading" @click="goPage(page + 1)">Older →</Button>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    workflowId: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    label: string;
+    /** e.g. 'mod+enter', 'shift+alt+t', 'v', '1'. Omit for label-only tips. */
+    shortcut?: string;
+};
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};