@revenexx/studio-integrations 0.1.0

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

@@ -0,0 +1,403 @@
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import {
+  CheckCircle as CheckCircle2,
+  RefreshCircle as Loader2,
+  Magnifier as Search,
+  AddCircle as Plus,
+  TrashBinTrash as Trash2,
+  TestTube as TestIcon,
+  ShieldKeyhole as KeyIcon
+} from "#solar-icons";
+import {
+  Badge,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  Switch,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@revenexx/studio";
+import { toast } from "vue-sonner";
+useHead({ title: "Credentials \xB7 Revenexx Cockpit" });
+const { credentials, loading, error, load, create, update, remove, testInline, test, oauthAuthorizeUrl } = useIntegrationsCredentials();
+const { types, load: loadTypes, bySlug } = useCredentialTypes();
+onMounted(async () => {
+  await Promise.all([load(), loadTypes()]);
+});
+const search = ref("");
+const filtered = computed(() => {
+  const q = search.value.trim().toLowerCase();
+  const list = [...credentials.value].sort((a, b) => a.name.localeCompare(b.name));
+  if (!q) return list;
+  return list.filter((c) => c.name.toLowerCase().includes(q) || c.credential_type_slug.toLowerCase().includes(q));
+});
+function typeFor(slug) {
+  return bySlug(slug);
+}
+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 typeName(slug) {
+  return loc(typeFor(slug)?.name) || slug;
+}
+function isOAuthAuthcode(t) {
+  return t?.auth_kind === "oauth2-authcode";
+}
+function formatDateTime(iso) {
+  if (!iso) return "\u2014";
+  try {
+    return new Date(iso).toLocaleString(void 0, { month: "short", day: "2-digit", hour: "2-digit", minute: "2-digit" });
+  } catch {
+    return iso;
+  }
+}
+const dialogOpen = ref(false);
+const editing = ref(null);
+const pickedType = ref(null);
+const form = reactive({ name: "", config: {} });
+const saving = ref(false);
+const testing = ref(false);
+const testResult = ref(null);
+const isEdit = computed(() => editing.value !== null);
+function fieldsOf(t) {
+  return t?.fields ?? [];
+}
+function openCreate(t) {
+  editing.value = null;
+  pickedType.value = t ?? null;
+  form.name = "";
+  form.config = {};
+  testResult.value = null;
+  dialogOpen.value = true;
+}
+function openEdit(c) {
+  editing.value = c;
+  pickedType.value = typeFor(c.credential_type_slug);
+  form.name = c.name;
+  form.config = { ...c.public_config ?? {} };
+  testResult.value = null;
+  dialogOpen.value = true;
+}
+function buildConfigPayload() {
+  const out = {};
+  for (const f of fieldsOf(pickedType.value)) {
+    const v = form.config[f.key];
+    if (f.type === "secret" && isEdit.value && (v === void 0 || v === "")) {
+      continue;
+    }
+    if (v !== void 0) out[f.key] = v;
+  }
+  return out;
+}
+async function runTest() {
+  if (!pickedType.value) return;
+  testing.value = true;
+  testResult.value = null;
+  try {
+    testResult.value = isEdit.value && editing.value ? await test(editing.value.id) : await testInline(pickedType.value.slug, buildConfigPayload());
+  } finally {
+    testing.value = false;
+  }
+}
+async function submit() {
+  if (!pickedType.value || !form.name.trim()) return;
+  saving.value = true;
+  try {
+    if (isEdit.value && editing.value) {
+      await update(editing.value.id, { name: form.name.trim(), config: buildConfigPayload() });
+      toast.success("Credential updated");
+    } else {
+      const created = await create({
+        credential_type_slug: pickedType.value.slug,
+        name: form.name.trim(),
+        config: buildConfigPayload()
+      });
+      toast.success("Credential created");
+      if (isOAuthAuthcode(pickedType.value)) {
+        await connect(created);
+      }
+    }
+    dialogOpen.value = false;
+  } catch (e) {
+    toast.error(e?.message ?? "Could not save credential.");
+  } finally {
+    saving.value = false;
+  }
+}
+const connecting = ref(null);
+async function connect(c) {
+  connecting.value = c.id;
+  try {
+    const authorizeUrl = await oauthAuthorizeUrl(c.id);
+    const popup = window.open(authorizeUrl, "oauth-connect", "width=600,height=720");
+    const onMessage = async (ev) => {
+      if (ev.data?.type === "integrations-oauth-complete") {
+        window.removeEventListener("message", onMessage);
+        await load(true);
+        toast.success("Connected");
+      }
+    };
+    window.addEventListener("message", onMessage);
+    const poll = window.setInterval(async () => {
+      if (popup?.closed) {
+        window.clearInterval(poll);
+        window.removeEventListener("message", onMessage);
+        await load(true);
+      }
+    }, 1e3);
+  } catch (e) {
+    toast.error(e?.message ?? "Could not start OAuth connect.");
+  } finally {
+    connecting.value = null;
+  }
+}
+const cardTesting = ref(null);
+async function testCard(c) {
+  cardTesting.value = c.id;
+  try {
+    const res = await test(c.id);
+    if (res.ok) toast.success(`${c.name}: connection ok`);
+    else toast.error(`${c.name}: ${res.error ?? "connection failed"}`);
+  } finally {
+    cardTesting.value = null;
+  }
+}
+async function destroy(c) {
+  if (!confirm(`Delete credential "${c.name}"? Workflows referencing it will fail until re-bound.`)) return;
+  try {
+    await remove(c.id);
+    toast.success("Credential deleted");
+  } catch (e) {
+    toast.error(e?.message ?? "Could not delete credential.");
+  }
+}
+</script>
+
+<template>
+  <IntegrationsLayout>
+    <PageHeader
+      title="Credentials"
+      description="Typed, testable access data for the systems your workflows talk to — one per connection."
+    >
+      <template #actions>
+        <Button class="h-7 text-sm" :disabled="!types.length" @click="openCreate()">
+          <Plus :size="14" class="mr-1" />
+          New credential
+        </Button>
+      </template>
+    </PageHeader>
+
+    <div class="flex items-center justify-between gap-3 border-b border-black/[0.06] px-4 py-2">
+      <div class="text-sm text-muted-foreground">
+        {{ filtered.length }} credential{{ filtered.length === 1 ? "" : "s" }}
+      </div>
+      <div class="relative w-64">
+        <Search :size="12" class="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
+        <Input v-model="search" placeholder="Search…" class="h-7 pl-7 text-sm bg-white" />
+      </div>
+    </div>
+
+    <div v-if="error" 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 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+      <div
+        v-for="c in filtered"
+        :key="c.id"
+        class="rounded-lg border border-black/[0.06] bg-white p-4 space-y-3 transition hover:shadow-sm"
+      >
+        <div class="flex items-start gap-3">
+          <span class="flex size-10 items-center justify-center rounded-md bg-slate-100 text-slate-500 shrink-0">
+            <KeyIcon :size="18" />
+          </span>
+          <div class="flex-1 min-w-0">
+            <div class="text-sm font-semibold truncate">
+              {{ c.name }}
+            </div>
+            <div class="text-sm text-muted-foreground truncate">
+              {{ typeName(c.credential_type_slug) }}
+            </div>
+          </div>
+          <Badge
+            v-if="c.status === 'active'"
+            variant="outline"
+            class="text-sm border bg-emerald-500/10 border-emerald-500/20 text-emerald-700 gap-1"
+          >
+            <CheckCircle2 :size="12" />
+            Active
+          </Badge>
+          <Badge
+            v-else
+            variant="outline"
+            class="text-sm border bg-amber-500/10 border-amber-500/20 text-amber-700"
+          >
+            Needs reconnect
+          </Badge>
+        </div>
+
+        <div class="flex items-center justify-between border-t border-black/[0.04] pt-2 text-sm text-muted-foreground">
+          <span>Updated {{ formatDateTime(c.updated_at) }}</span>
+          <div class="flex items-center gap-2">
+            <button
+              v-if="c.status === 'needs_reauth' && isOAuthAuthcode(typeFor(c.credential_type_slug))"
+              type="button"
+              class="text-amber-600 hover:underline"
+              :disabled="connecting === c.id"
+              @click="connect(c)"
+            >
+              Reconnect
+            </button>
+            <button type="button" class="text-violet-600 hover:underline disabled:opacity-50" :disabled="cardTesting === c.id" @click="testCard(c)">
+              <Loader2 v-if="cardTesting === c.id" :size="12" class="inline animate-spin" />
+              <span v-else>Test</span>
+            </button>
+            <button type="button" class="text-foreground/50 hover:text-foreground" @click="openEdit(c)">
+              Edit
+            </button>
+            <button type="button" class="text-foreground/40 hover:text-rose-600" @click="destroy(c)">
+              <Trash2 :size="13" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="!loading && !filtered.length" class="col-span-full px-3 py-12 text-center text-sm text-muted-foreground">
+        No credentials yet. Hit "New credential" to connect your first system.
+      </div>
+    </div>
+
+    <!-- Create / edit dialog -->
+    <Dialog v-model:open="dialogOpen">
+      <DialogContent class="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{{ isEdit ? "Edit credential" : "New credential" }}</DialogTitle>
+          <DialogDescription class="text-sm">
+            {{ isEdit ? "Update the credential. Leave secret fields blank to keep the current value." : "Pick a type and fill in its access data." }}
+          </DialogDescription>
+        </DialogHeader>
+
+        <!-- Step 1: type picker (create only) -->
+        <div v-if="!pickedType" class="grid grid-cols-2 gap-2 py-2 max-h-80 overflow-y-auto">
+          <button
+            v-for="t in types"
+            :key="t.slug"
+            type="button"
+            class="flex items-start gap-2 rounded-lg border border-black/[0.08] p-3 text-left transition hover:border-black/20 hover:bg-muted/30"
+            @click="pickedType = t;
+  form.name = loc(t.name)"
+          >
+            <span class="flex size-8 items-center justify-center rounded-md bg-slate-100 text-slate-500 shrink-0">
+              <KeyIcon :size="16" />
+            </span>
+            <div class="min-w-0">
+              <div class="text-sm font-semibold truncate">
+                {{ loc(t.name) }}
+              </div>
+              <div class="text-sm text-muted-foreground truncate">
+                {{ t.auth_kind }}
+              </div>
+            </div>
+          </button>
+        </div>
+
+        <!-- Step 2: dynamic form -->
+        <div v-else class="space-y-3 py-1 max-h-[28rem] overflow-y-auto pr-1">
+          <div class="space-y-1.5">
+            <Label for="cred-name">Name</Label>
+            <Input id="cred-name" v-model="form.name" class="bg-white" placeholder="e.g. Production SMTP" />
+          </div>
+
+          <div v-for="f in fieldsOf(pickedType)" :key="f.key" class="space-y-1.5">
+            <Label>{{ loc(f.label) }}{{ f.required ? " *" : "" }}</Label>
+
+            <!-- secret -->
+            <Input
+              v-if="f.type === 'secret'"
+              :model-value="form.config[f.key] ?? ''"
+              type="password"
+              autocomplete="new-password"
+              :placeholder="isEdit ? 'Leave blank to keep current' : ''"
+              class="bg-white"
+              @update:model-value="(v) => form.config[f.key] = v"
+            />
+            <!-- number -->
+            <Input
+              v-else-if="f.type === 'number'"
+              type="number"
+              :model-value="form.config[f.key] ?? ''"
+              class="bg-white"
+              @update:model-value="(v) => form.config[f.key] = v === '' ? void 0 : Number(v)"
+            />
+            <!-- boolean -->
+            <div v-else-if="f.type === 'boolean'" class="flex items-center gap-2 pt-1">
+              <Switch :model-value="Boolean(form.config[f.key])" @update:model-value="(v) => form.config[f.key] = v" />
+            </div>
+            <!-- select -->
+            <Select
+              v-else-if="f.type === 'select'"
+              :model-value="form.config[f.key] ?? ''"
+              @update:model-value="(v) => form.config[f.key] = v"
+            >
+              <SelectTrigger class="bg-white">
+                <SelectValue placeholder="Pick one" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem v-for="opt in f.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
+                  {{ loc(opt.label) }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <!-- string (default) -->
+            <Input
+              v-else
+              :model-value="form.config[f.key] ?? ''"
+              class="bg-white"
+              @update:model-value="(v) => form.config[f.key] = v"
+            />
+          </div>
+
+          <p v-if="isOAuthAuthcode(pickedType) && !isEdit" class="text-sm text-muted-foreground">
+            After saving, a window opens to connect with the provider.
+          </p>
+
+          <div
+            v-if="testResult"
+            class="rounded-md px-3 py-2 text-sm"
+            :class="testResult.ok ? 'bg-emerald-500/10 text-emerald-700' : 'bg-rose-500/10 text-rose-700'"
+          >
+            {{ testResult.ok ? "Connection ok." : testResult.error ?? "Connection failed." }}
+          </div>
+        </div>
+
+        <DialogFooter v-if="pickedType">
+          <Button v-if="!isEdit" variant="outline" :disabled="saving || testing" @click="pickedType = null">
+            Back
+          </Button>
+          <Button variant="outline" :disabled="saving || testing" @click="runTest">
+            <Loader2 v-if="testing" :size="14" class="mr-1 animate-spin" />
+            <TestIcon v-else :size="14" class="mr-1" />
+            Test
+          </Button>
+          <Button :disabled="saving || !form.name.trim()" @click="submit">
+            <Loader2 v-if="saving" :size="14" class="mr-1 animate-spin" />
+            {{ isEdit ? "Save" : isOAuthAuthcode(pickedType) ? "Save & connect" : "Create" }}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  </IntegrationsLayout>
+</template>

package/dist/runtime/pages/integrations/credentials.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,226 @@
+<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 { 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 { activeCount: schedulesActive, load: loadSchedules } = useIntegrationsSchedules();
+onMounted(() => {
+  void loadWorkflows();
+  void loadRuns();
+  void loadTemplates();
+  void loadSchedules();
+});
+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";
+  const ms = Date.now() - new Date(iso).getTime();
+  if (ms < 6e4) return "just now";
+  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 statusClass(status) {
+  switch (status) {
+    case "succeeded":
+      return "bg-emerald-500/15 text-emerald-700 border-emerald-500/20";
+    case "running":
+      return "bg-sky-500/15 text-sky-700 border-sky-500/20";
+    case "failed":
+      return "bg-rose-500/15 text-rose-700 border-rose-500/20";
+    case "queued":
+      return "bg-amber-500/15 text-amber-700 border-amber-500/20";
+    case "cancelled":
+      return "bg-slate-500/15 text-slate-700 border-slate-500/20";
+  }
+}
+const kpis = computed(() => [
+  {
+    label: "Active workflows",
+    value: activeWorkflows.value,
+    sub: `${workflows.value.length - activeWorkflows.value} paused or drafts`,
+    icon: Workflow,
+    tile: "bg-emerald-500 text-white"
+  },
+  {
+    label: "Running now",
+    value: runningCount.value,
+    sub: "live executions in flight",
+    icon: Activity,
+    tile: "bg-sky-500 text-white"
+  },
+  {
+    label: "Scheduled",
+    value: schedulesActive.value,
+    sub: "cron triggers active",
+    icon: Clock,
+    tile: "bg-violet-500 text-white"
+  }
+]);
+</script>
+
+<template>
+  <IntegrationsLayout>
+    <PageHeader
+      title="Dashboard"
+      description="Everything that connects Revenue Cloud to the outside world."
+    >
+      <template #actions>
+        <NuxtLink to="/integrations/templates">
+          <Button variant="outline" class="h-7 text-sm">
+            <Layers :size="12" />
+            Browse templates
+          </Button>
+        </NuxtLink>
+        <NuxtLink to="/integrations/workflows/new">
+          <Button class="h-7 text-sm">
+            <Plus :size="14" />
+            New workflow
+          </Button>
+        </NuxtLink>
+      </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">
+          <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]">
+                {{ k.value }}
+              </div>
+              <div class="text-sm text-muted-foreground">
+                {{ k.sub }}
+              </div>
+            </div>
+            <span class="flex size-8 shrink-0 items-center justify-center rounded-md" :class="k.tile">
+              <component :is="k.icon" :size="16" />
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Two-column: recent runs + needs attention + popular templates -->
+      <div class="grid gap-4 lg:grid-cols-3">
+        <!-- Recent runs ─ takes 2 cols -->
+        <div class="lg:col-span-2 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">
+            <div class="flex items-center gap-2">
+              <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>
+            </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" />
+            </NuxtLink>
+          </div>
+          <div>
+            <div
+              v-for="r in recentRuns"
+              :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}`)"
+            >
+              <Badge variant="outline" :class="['text-sm border', 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>
+              <div class="text-sm text-muted-foreground tabular-nums truncate">
+                {{ formatRelative(r.startedAt) }}
+              </div>
+              <div class="text-sm text-muted-foreground tabular-nums text-right">
+                {{ 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">
+              No runs yet.
+            </div>
+          </div>
+        </div>
+
+        <!-- Needs attention -->
+        <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">
+            <div class="flex items-center gap-2">
+              <span class="flex size-6 items-center justify-center rounded-md bg-slate-100 text-slate-500">
+                <AlertTriangle :size="12" />
+              </span>
+              <h3 class="text-sm font-semibold">Needs attention</h3>
+            </div>
+          </div>
+          <div v-if="failedRecent.length">
+            <div
+              v-for="r in failedRecent"
+              :key="r.id"
+              class="space-y-1 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}`)"
+            >
+              <div class="font-medium truncate">{{ r.workflowName }}</div>
+              <div class="text-sm text-rose-700 truncate" :title="r.errorMessage">
+                {{ r.errorMessage ?? "Failed." }}
+              </div>
+              <div class="text-sm text-muted-foreground tabular-nums">
+                {{ formatRelative(r.startedAt) }}
+              </div>
+            </div>
+          </div>
+          <div v-else class="px-3 py-6 text-center text-sm text-muted-foreground">
+            All workflows healthy.
+          </div>
+        </div>
+      </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">
+          <div class="flex items-center gap-2">
+            <span class="flex size-6 items-center justify-center rounded-md bg-slate-100 text-slate-500">
+              <Sparkles :size="12" />
+            </span>
+            <h3 class="text-sm font-semibold">Popular templates</h3>
+          </div>
+          <NuxtLink to="/integrations/templates" class="text-sm text-muted-foreground hover:text-foreground inline-flex items-center gap-1">
+            See all <ArrowRight :size="11" />
+          </NuxtLink>
+        </div>
+        <div v-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">
+          <NuxtLink
+            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"
+          >
+            <div class="flex items-center gap-2 mb-2">
+              <Badge variant="outline" class="text-sm">
+                {{ 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>
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </IntegrationsLayout>
+</template>

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

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;