@revenexx/studio-integrations 0.3.0 → 0.4.0

package/README.md

@@ -19,8 +19,9 @@ pnpm add @revenexx/studio-integrations @revenexx/studio-shared @revenexx/studio
 ```ts
 // nuxt.config.ts
 export default defineNuxtConfig({
-  extends: ['@revenexx/studio-shared'],          // shell primitives + platform provider
-  modules: ['@solar-icons/nuxt', '@revenexx/studio-integrations'],
+  // studio-shared is a Nuxt MODULE since 0.2.0 (shell primitives by their
+  // bare names + the platform provider) — do NOT `extends` it anymore.
+  modules: ['@solar-icons/nuxt', '@revenexx/studio-shared', '@revenexx/studio-integrations'],
 })
 ```
 
@@ -39,14 +40,14 @@ component styling silently breaks:
 @import "tailwindcss";
 @import "@revenexx/studio/tokens";
 @import "@revenexx/studio/fonts";
-@source "../node_modules/@revenexx/studio-shared/components";
+@source "../node_modules/@revenexx/studio-shared/dist/runtime";
 @source "../node_modules/@revenexx/studio-integrations/dist/runtime";
 ```
 
 Adjust the relative paths to reach `node_modules` from your CSS file.
 
 ## Peers
-`@revenexx/studio`, `@revenexx/studio-shared`, `nuxt` ^4, `vue` ^3.5,
+`@revenexx/studio`, `@revenexx/studio-shared` ^0.2 (module form), `nuxt` ^4, `vue` ^3.5,
 `@vue-flow/*` + `@dagrejs/dagre` (workflow editor), `lucide-vue-next`; register
 `@solar-icons/nuxt` in the host.
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@revenexx/studio-integrations",
   "configKey": "studioIntegrations",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

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

@@ -5,7 +5,8 @@ const props = defineProps({
   modelValue: { type: String, required: true }
 });
 const emit = defineEmits(["update:modelValue"]);
-const catalog = useDefinedEvents();
+const catalog = typeof useDefinedEvents === "function" ? useDefinedEvents() : { emits: ref([]), listens: ref([]), loading: ref(false), load: async () => {
+} };
 onMounted(() => {
   void catalog.load();
 });

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

@@ -5,7 +5,13 @@ import { Badge, Button, Dialog, DialogContent, DialogDescription, DialogHeader,
 import { useIntegrationsCredentials } from "../../composables/useIntegrationsCredentials";
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const emit = defineEmits(["created"]);
-const sftp = useConsoleSftp();
+const sftp = typeof useConsoleSftp === "function" ? useConsoleSftp() : {
+  accounts: ref([]),
+  loading: ref(false),
+  activeTenantSlug: ref(null),
+  load: async () => null,
+  revealPassword: async () => null
+};
 const { create } = useIntegrationsCredentials();
 const busyId = ref(null);
 const error = ref(null);

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

@@ -1,5 +1,5 @@
 <script setup>
-import { Pulse as Activity, ClockCircle as Clock, Home, Key as KeyRound, ShieldCheck, ShieldKeyhole as Credentials, Programming as Workflow } from "#solar-icons";
+import { Pulse as Activity, ClockCircle as Clock, Home, Key as KeyRound, Layers, ShieldCheck, ShieldKeyhole as Credentials, Programming as Workflow } from "#solar-icons";
 import SidebarNav from "@revenexx/studio-shared/components/Shared/SidebarNav.vue";
 const { workflows } = useIntegrationsWorkflows();
 const { runningCount } = useIntegrationsRuns();
@@ -18,6 +18,7 @@ const sections = computed(() => [
     label: "Integrations",
     items: [
       { label: "Workflows", to: "/integrations/workflows", icon: Workflow, badge: workflows.value.length || null },
+      { label: "Templates", to: "/integrations/templates", icon: Layers },
       { label: "Runs", to: "/integrations/runs", icon: Activity, badge: runningCount.value || null },
       { label: "Schedules", to: "/integrations/schedules", icon: Clock, badge: schedulesActive.value || null },
       { label: "Credentials", to: "/integrations/credentials", icon: Credentials, badge: credentialsTotal.value || null },

package/dist/runtime/pages/integrations/templates/[slug].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/templates/[slug].vue

@@ -0,0 +1,536 @@
+<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 {
+  Badge,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@revenexx/studio";
+import TemplateFlowPreview from "../../../components/Integrations/TemplateFlowPreview.vue";
+import NodeLogo from "../../../components/Integrations/NodeLogo.vue";
+import { TEMPLATE_CATEGORIES } from "../../../data/integrationTemplates";
+const SELECT_LATER = "__later__";
+const route = useRoute();
+const router = useRouter();
+const { get, load, loaded, fetchDetail, requirements, instantiate } = useIntegrationsTemplates();
+const { load: loadNodeCatalog, findManifest, resolveLocalized } = useIntegrationsNodes();
+const { keys: secretKeys, load: loadSecrets } = useIntegrationsSecrets();
+const { ofType, load: loadCredentials } = useIntegrationsCredentials();
+const slug = computed(() => String(route.params.slug));
+const tpl = computed(() => get(slug.value));
+useHead({ title: () => `${tpl.value?.name ?? "Template"} \xB7 Integration Studio` });
+const reqs = ref(null);
+onMounted(async () => {
+  await load();
+  await Promise.all([fetchDetail(slug.value), loadNodeCatalog(), loadCredentials(), loadSecrets()]);
+  reqs.value = await requirements(slug.value);
+});
+const descriptionHtml = computed(() => {
+  const md = tpl.value?.descriptionMd ?? "";
+  if (!md.trim()) return "";
+  const withoutH1 = md.replace(/^#\s[^\n]*\n+/, "");
+  return marked.parse(withoutH1);
+});
+const steps = computed(() => {
+  const blob = tpl.value?.blob;
+  if (!blob?.nodes.length) return [];
+  const nodeById = new Map(blob.nodes.map((n) => [n.id, n]));
+  const happyEdges = (blob.edges ?? []).filter((e) => e.from.output !== "error");
+  const triggerHandles = new Set((blob.triggers ?? []).map((t) => t.id));
+  const incoming = /* @__PURE__ */ new Map();
+  for (const e of happyEdges) {
+    if (!triggerHandles.has(e.from.nodeId)) incoming.set(e.to.nodeId, (incoming.get(e.to.nodeId) ?? 0) + 1);
+  }
+  const ordered = [];
+  const seen = /* @__PURE__ */ new Set();
+  const queue = happyEdges.filter((e) => triggerHandles.has(e.from.nodeId)).map((e) => e.to.nodeId);
+  while (queue.length) {
+    const id = queue.shift();
+    if (seen.has(id)) continue;
+    seen.add(id);
+    const node = nodeById.get(id);
+    if (node) ordered.push(node);
+    for (const e of happyEdges) {
+      if (e.from.nodeId === id) queue.push(e.to.nodeId);
+    }
+  }
+  for (const n of blob.nodes) {
+    if (!seen.has(n.id) && n.nodeSlug !== "revenexx:stop-and-error") ordered.push(n);
+  }
+  return ordered.filter((n) => n.nodeSlug !== "revenexx:stop-and-error").map((node) => {
+    const manifest = findManifest(node.nodeSlug, node.nodeVersion);
+    return {
+      node,
+      manifest,
+      label: manifest ? resolveLocalized(manifest.name) : prettify(node.nodeSlug),
+      blurb: manifest ? firstSentence(resolveLocalized(manifest.description)) : ""
+    };
+  });
+});
+function prettify(s) {
+  const tail = s.includes(":") ? s.split(":").pop() : s;
+  return tail.split("-").map((p) => p.charAt(0).toUpperCase() + p.slice(1)).join(" ");
+}
+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((t) => {
+  let label = t.type.charAt(0).toUpperCase() + t.type.slice(1);
+  if (t.type === "schedule" && t.config?.cron) label = `Schedule \xB7 ${t.config.cron}${t.config.timezone ? ` (${t.config.timezone})` : ""}`;
+  if (t.type === "webhook" && t.config?.path) label = `Webhook \xB7 ${t.config.path}`;
+  if (t.type === "manual") label = "Run on demand";
+  return { key: t.id, icon: TRIGGER_ICON[t.type] ?? Zap, label };
+}));
+const variables = computed(() => Object.entries(tpl.value?.blob.variables ?? {}).map(([key, v]) => ({
+  key,
+  default: String(v?.default ?? ""),
+  description: resolveLocalized(v?.description ?? "")
+})));
+const variableColumns = [
+  { key: "key", label: "Variable", width: "minmax(0,180px)", sortable: true },
+  { key: "description", label: "Description" },
+  { key: "default", label: "Default", width: "minmax(0,200px)" }
+];
+const credentialReqs = computed(() => reqs.value?.credentialTypes ?? []);
+const secretReqs = computed(() => reqs.value?.secrets ?? []);
+const secretChecks = computed(() => {
+  const fromApi = secretReqs.value;
+  if (fromApi.length) {
+    return fromApi.map((s) => ({
+      key: s.key,
+      label: s.key ?? "(chosen at install)",
+      present: s.exists || (s.key ? secretKeys.value.includes(s.key) : false)
+    }));
+  }
+  return (tpl.value?.requiredSecrets ?? []).map((key) => ({
+    key,
+    label: key,
+    present: secretKeys.value.includes(key)
+  }));
+});
+const missingSecrets = computed(() => secretChecks.value.filter((s) => !s.present).length);
+const missingCredentials = computed(() => credentialReqs.value.filter((c) => !ofType(c.slug).length).length);
+const setupReady = computed(() => missingSecrets.value === 0 && missingCredentials.value === 0);
+const packageLabel = computed(() => {
+  const pkg = tpl.value?.package;
+  if (!pkg) return null;
+  const tail = (pkg.name.split("/").pop() ?? pkg.name).replace(/^integrations-nodes-/, "");
+  if (tail === "core") return null;
+  return pkg.label ?? tail.split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join(" ");
+});
+const categoryLabel = computed(() => {
+  const cat = tpl.value?.category;
+  return TEMPLATE_CATEGORIES.find((c) => c.key === cat)?.label ?? (cat ? cat.charAt(0).toUpperCase() + cat.slice(1) : "");
+});
+const installOpen = ref(false);
+const installing = ref(false);
+const installError = ref(null);
+const name = ref("");
+const bindings = reactive({});
+function nodesFor(usedBy) {
+  return [...new Set(usedBy.map((u) => u.nodeId))];
+}
+function openInstall() {
+  if (!tpl.value) return;
+  name.value = tpl.value.name;
+  for (const k of Object.keys(bindings)) delete bindings[k];
+  installError.value = null;
+  installOpen.value = true;
+}
+async function confirmInstall() {
+  if (!tpl.value) return;
+  installing.value = true;
+  installError.value = null;
+  try {
+    const credentialBindings = {};
+    for (const [nodeId, credId] of Object.entries(bindings)) {
+      if (credId && credId !== SELECT_LATER) credentialBindings[nodeId] = credId;
+    }
+    const id = await instantiate(tpl.value.slug, {
+      name: name.value.trim() || void 0,
+      credentialBindings
+    });
+    if (id) await router.push(`/integrations/workflows/${id}`);
+  } catch (e) {
+    installError.value = e.message || "Install failed.";
+  } finally {
+    installing.value = false;
+  }
+}
+const PUBLISHER_KIND_LABEL = { revenexx: "Official", partner: "Partner", community: "Community" };
+function publisherBadgeClass(kind) {
+  return kind === "revenexx" ? "bg-violet-500/10 text-violet-700 border-violet-500/20" : kind === "partner" ? "bg-amber-500/10 text-amber-700 border-amber-500/20" : "bg-slate-500/10 text-slate-700 border-slate-500/20";
+}
+function levelDot(level) {
+  return level === "beginner" ? "bg-emerald-500" : level === "intermediate" ? "bg-amber-500" : "bg-rose-500";
+}
+</script>
+
+<template>
+  <IntegrationsLayout>
+    <template v-if="tpl">
+      <PageHeader :title="tpl.name">
+        <template #title>
+          <span class="inline-flex items-center gap-1.5">
+            <NuxtLink to="/integrations/templates" class="font-normal text-muted-foreground/80 hover:text-primary transition-colors">Templates</NuxtLink>
+            <Chevron :size="15" weight="Outline" class="text-muted-foreground/50" />
+            <span class="truncate">{{ tpl.name }}</span>
+          </span>
+        </template>
+        <template #actions>
+          <Button class="h-7 text-sm" @click="openInstall">
+            Use template
+          </Button>
+        </template>
+      </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]">
+          <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" />
+          </div>
+          <div class="absolute left-3 top-3 flex items-center gap-1.5">
+            <span class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 uppercase text-xs font-medium text-slate-700">
+              {{ categoryLabel }}
+            </span>
+            <span class="inline-flex items-center gap-1 rounded-full bg-slate-100 px-2 py-0.5 uppercase text-xs font-medium text-slate-700">
+              <span class="size-1.5 rounded-full" :class="levelDot(tpl.level)" />
+              {{ tpl.level }}
+            </span>
+            <span v-if="packageLabel" class="inline-flex items-center whitespace-nowrap rounded-full bg-violet-100 px-2 py-0.5 uppercase text-xs font-medium text-violet-700">
+              {{ packageLabel }}
+            </span>
+          </div>
+          <div class="absolute right-3 top-3 flex items-center gap-1.5">
+            <span
+              v-for="chip in triggerChips"
+              :key="chip.key"
+              class="inline-flex items-center gap-1 rounded-full bg-slate-100 px-2 py-0.5 uppercase text-xs font-medium text-slate-700"
+            >
+              <component :is="chip.icon" :size="10" />
+              {{ chip.label }}
+            </span>
+          </div>
+        </div>
+
+        <div class="grid gap-4 lg:grid-cols-3">
+          <div class="lg:col-span-2 space-y-4">
+            <!-- About: the registry description, rendered -->
+            <div v-if="descriptionHtml" class="rounded-lg border border-black/[0.06] bg-white p-4">
+              <h3 class="text-sm font-semibold mb-2">About this template</h3>
+              <div
+                class="text-sm leading-relaxed text-foreground/90 space-y-2 [&_h1]:text-sm [&_h1]:font-semibold [&_h2]:text-sm [&_h2]:font-semibold [&_h3]:text-sm [&_h3]:font-semibold [&_ol]:list-decimal [&_ol]:pl-5 [&_ul]:list-disc [&_ul]:pl-5 [&_li]:mt-1 [&_code]:rounded [&_code]:bg-slate-100 [&_code]:px-1 [&_code]:py-px [&_code]:font-mono [&_code]:text-[13px] [&_a]:text-primary [&_a]:underline [&_strong]:font-semibold"
+                v-html="descriptionHtml"
+              />
+            </div>
+
+            <!-- Step by step, humanized from the actual nodes -->
+            <div class="rounded-lg border border-black/[0.06] bg-white p-4">
+              <h3 class="text-sm font-semibold mb-3">Step by step</h3>
+              <ol v-if="steps.length" class="space-y-2.5">
+                <li
+                  v-for="(step, i) in steps"
+                  :key="step.node.id"
+                  class="flex items-start gap-3"
+                >
+                  <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-slate-100 text-sm font-semibold tabular-nums text-slate-500">
+                    {{ i + 1 }}
+                  </span>
+                  <span class="flex size-7 shrink-0 items-center justify-center rounded-md bg-white ring-1 ring-black/[0.08]">
+                    <NodeLogo :manifest="step.manifest" :size="15" />
+                  </span>
+                  <span class="min-w-0 pt-0.5">
+                    <span class="block text-sm font-medium text-foreground">{{ step.label }}</span>
+                    <span v-if="step.blurb" class="block text-sm text-muted-foreground">{{ step.blurb }}</span>
+                  </span>
+                </li>
+              </ol>
+              <p v-else class="text-sm text-muted-foreground italic">
+                No step-by-step outline for this template yet.
+              </p>
+            </div>
+
+            <!-- Variables the operator can tune after install -->
+            <div v-if="variables.length" class="rounded-lg border border-black/[0.06] bg-white p-4">
+              <h3 class="text-sm font-semibold mb-1">Variables you can tune</h3>
+              <p class="text-sm text-muted-foreground mb-3">Set once after install, used across the workflow.</p>
+              <DataTable
+                :data="variables"
+                :columns="variableColumns"
+                :row-key="(v2) => v2.key"
+                :default-sort="{ column: 'key', direction: 'asc' }"
+                :search="false"
+                :columns-menu="false"
+                :pagination="false"
+              >
+                <template #cell-key="{ row: v }">
+                  <code class="font-mono text-[13px]">{{ v.key }}</code>
+                </template>
+                <template #cell-description="{ row: v }">
+                  <span class="text-sm text-muted-foreground">{{ v.description }}</span>
+                </template>
+                <template #cell-default="{ row: v }">
+                  <code v-if="v.default" class="rounded bg-slate-100 px-1.5 py-0.5 font-mono text-xs text-slate-600">{{ v.default }}</code>
+                </template>
+              </DataTable>
+            </div>
+          </div>
+
+          <!-- Setup rail -->
+          <div class="space-y-3">
+            <!-- Readiness + CTA -->
+            <div class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2.5">
+              <div v-if="setupReady" class="flex items-center gap-1.5 text-sm text-emerald-700">
+                <CheckCircle2 :size="14" />
+                Everything is ready to install.
+              </div>
+              <div v-else class="text-sm text-amber-700 space-y-0.5">
+                <div v-if="missingCredentials" class="flex items-center gap-1.5">
+                  <Key :size="12" />
+                  {{ missingCredentials }} credential{{ missingCredentials === 1 ? "" : "s" }} to connect
+                </div>
+                <div v-if="missingSecrets" class="flex items-center gap-1.5">
+                  <ShieldAlert :size="12" />
+                  {{ missingSecrets }} secret{{ missingSecrets === 1 ? "" : "s" }} missing
+                </div>
+              </div>
+              <Button class="w-full h-8 text-sm" @click="openInstall">
+                Use template
+              </Button>
+              <p class="text-xs text-muted-foreground">
+                Creates a paused copy in your workflows. Nothing runs until you activate it.
+              </p>
+            </div>
+
+            <div class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2">
+              <div class="text-mono text-muted-foreground">Publisher</div>
+              <div class="flex items-center gap-2">
+                <span class="flex size-6 items-center justify-center rounded-full bg-muted text-muted-foreground">
+                  <User :size="12" />
+                </span>
+                <div class="text-sm font-medium truncate">{{ tpl.publisher.name }}</div>
+                <Badge variant="outline" :class="['text-sm border', publisherBadgeClass(tpl.publisher.kind)]">
+                  {{ PUBLISHER_KIND_LABEL[tpl.publisher.kind] ?? tpl.publisher.kind }}
+                </Badge>
+              </div>
+              <div v-if="packageLabel" class="border-t border-black/[0.06] pt-2 text-sm">
+                <div class="text-muted-foreground">Ships with</div>
+                <div class="font-medium">{{ packageLabel }}</div>
+              </div>
+              <div class="border-t border-black/[0.06] pt-2 grid grid-cols-2 gap-2 text-sm">
+                <div>
+                  <div class="text-muted-foreground">Steps</div>
+                  <div class="font-medium tabular-nums">{{ steps.length || tpl.nodeCount }}</div>
+                </div>
+                <div>
+                  <div class="text-muted-foreground">Level</div>
+                  <span class="mt-0.5 inline-flex items-center gap-1 rounded-full bg-slate-100 px-2 py-0.5 uppercase text-xs font-medium text-slate-700">
+                    <span class="size-1.5 rounded-full" :class="levelDot(tpl.level)" />
+                    {{ tpl.level }}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div v-if="credentialReqs.length" class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2">
+              <div class="flex items-center gap-1.5 text-mono text-muted-foreground">
+                <Key :size="11" /> Credentials
+              </div>
+              <ul class="space-y-1">
+                <li
+                  v-for="c in credentialReqs"
+                  :key="c.slug"
+                  class="flex items-center justify-between gap-2 rounded-md border border-black/[0.06] bg-muted/20 px-2 py-1 text-sm"
+                >
+                  <span class="min-w-0">
+                    <span class="block truncate font-medium">{{ c.name ?? c.slug }}</span>
+                  </span>
+                  <Badge
+                    v-if="ofType(c.slug).length"
+                    variant="outline"
+                    class="shrink-0 bg-emerald-500/10 border-emerald-500/20 text-emerald-700 text-sm"
+                  >
+                    <CheckCircle2 :size="10" class="mr-0.5" />
+                    {{ ofType(c.slug).length }} ready
+                  </Badge>
+                  <Badge v-else variant="outline" class="shrink-0 bg-amber-500/10 border-amber-500/20 text-amber-700 text-sm">
+                    Connect first
+                  </Badge>
+                </li>
+              </ul>
+              <NuxtLink to="/integrations/credentials" class="block text-sm text-primary hover:underline">Manage credentials →</NuxtLink>
+            </div>
+
+            <div v-if="secretChecks.length" class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2">
+              <div class="flex items-center gap-2">
+                <span class="text-mono text-muted-foreground">Required secrets</span>
+                <span v-if="missingSecrets > 0" class="flex items-center gap-1 text-sm text-amber-700">
+                  <ShieldAlert :size="11" />
+                  {{ missingSecrets }} missing
+                </span>
+              </div>
+              <ul class="space-y-1">
+                <li
+                  v-for="(s, i) in secretChecks"
+                  :key="s.key ?? `secret-${i}`"
+                  class="flex items-center justify-between rounded-md border border-black/[0.06] bg-muted/20 px-2 py-1 text-sm"
+                >
+                  <code class="font-mono">{{ s.label }}</code>
+                  <Badge
+                    v-if="s.present"
+                    variant="outline"
+                    class="bg-emerald-500/10 border-emerald-500/20 text-emerald-700 text-sm"
+                  >
+                    <CheckCircle2 :size="10" class="mr-0.5" />
+                    Set
+                  </Badge>
+                  <Badge v-else variant="outline" class="bg-amber-500/10 border-amber-500/20 text-amber-700 text-sm">
+                    Missing
+                  </Badge>
+                </li>
+              </ul>
+            </div>
+
+            <div v-if="tpl.industries.length || tpl.vendors.length" class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2">
+              <div class="text-mono text-muted-foreground">Good fit for</div>
+              <div class="flex flex-wrap gap-1">
+                <span v-for="ind in tpl.industries" :key="`i-${ind}`" class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 uppercase text-xs font-medium text-slate-700">
+                  {{ ind === "any" ? "Any industry" : ind }}
+                </span>
+                <span v-for="v in tpl.vendors" :key="`v-${v}`" class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 uppercase text-xs font-medium text-slate-700">
+                  {{ v }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <div v-else-if="!loaded" class="p-12 flex items-center justify-center gap-2 text-sm text-muted-foreground">
+      <Loader2 :size="14" class="animate-spin" />
+      Loading template…
+    </div>
+    <div v-else class="p-12 text-center text-sm text-muted-foreground">
+      Template not found.
+    </div>
+
+    <!-- Install: name + per-node credential binding ------------------------- -->
+    <Dialog v-model:open="installOpen">
+      <DialogContent class="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Use template</DialogTitle>
+          <DialogDescription class="text-sm">
+            Pre-wire credentials, then we create the workflow. It starts inactive, so you can finish wiring in the editor and activate when ready.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div class="space-y-4 py-1 max-h-[28rem] overflow-y-auto pr-1">
+          <div class="space-y-1.5">
+            <Label for="wf-name">Workflow name</Label>
+            <Input id="wf-name" v-model="name" class="bg-white" placeholder="Workflow name" />
+          </div>
+
+          <!-- Credentials -->
+          <div class="space-y-2">
+            <div class="text-mono text-muted-foreground border-b border-black/[0.06] pb-1.5">
+              Credentials
+            </div>
+            <p v-if="!credentialReqs.length" class="text-sm text-muted-foreground italic">
+              This template needs no credentials.
+            </p>
+            <div v-for="req in credentialReqs" :key="req.slug" class="space-y-2">
+              <div class="flex items-center gap-2">
+                <span class="text-sm font-medium">{{ req.name ?? req.slug }}</span>
+                <Badge v-if="!req.registered" variant="outline" class="bg-rose-500/10 border-rose-500/20 text-rose-700 text-sm">
+                  not registered
+                </Badge>
+                <Badge v-else-if="!ofType(req.slug).length" variant="outline" class="bg-amber-500/10 border-amber-500/20 text-amber-700 text-sm">
+                  none yet
+                </Badge>
+              </div>
+
+              <p v-if="!ofType(req.slug).length" class="rounded-md border-l-2 border-black/[0.08] bg-muted/30 px-2.5 py-1.5 text-sm text-muted-foreground">
+                No credentials of this type yet.
+                <NuxtLink to="/integrations/credentials" class="text-primary hover:underline">Create one</NuxtLink>
+                first, or install now and wire it up in the editor.
+              </p>
+              <div v-for="nodeId in nodesFor(req.usedBy)" v-else :key="nodeId" class="space-y-1">
+                <Label class="text-xs text-muted-foreground font-mono">node {{ nodeId }}</Label>
+                <Select
+                  :model-value="bindings[nodeId] ?? SELECT_LATER"
+                  @update:model-value="(v2) => {
+  bindings[nodeId] = v2 ?? SELECT_LATER;
+}"
+                >
+                  <SelectTrigger class="bg-white">
+                    <SelectValue placeholder="Select later" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem :value="SELECT_LATER">Select later</SelectItem>
+                    <SelectItem v-for="c in ofType(req.slug)" :key="c.id" :value="c.id">
+                      {{ c.name }}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </div>
+
+          <!-- Secrets -->
+          <div v-if="secretChecks.length" class="space-y-2">
+            <div class="text-mono text-muted-foreground border-b border-black/[0.06] pb-1.5">
+              Secrets
+            </div>
+            <p class="text-sm text-muted-foreground">
+              Referenced secret keys must exist before the workflow runs. Manage them on the
+              <NuxtLink to="/integrations/secrets" class="text-primary hover:underline">Secrets</NuxtLink> page.
+            </p>
+            <ul class="space-y-1">
+              <li
+                v-for="(s, i) in secretChecks"
+                :key="s.key ?? `dlg-secret-${i}`"
+                class="flex items-center justify-between rounded-md border border-black/[0.06] bg-muted/20 px-2 py-1 text-sm"
+              >
+                <code class="font-mono">{{ s.label }}</code>
+                <Badge variant="outline" :class="s.present ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-700 text-sm' : 'bg-amber-500/10 border-amber-500/20 text-amber-700 text-sm'">
+                  {{ s.present ? "Stored" : "Missing" }}
+                </Badge>
+              </li>
+            </ul>
+          </div>
+
+          <div v-if="installError" class="rounded-md bg-rose-500/10 px-3 py-2 text-sm text-rose-700">
+            {{ installError }}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" :disabled="installing" @click="installOpen = false">
+            Cancel
+          </Button>
+          <Button :disabled="installing || !name.trim()" @click="confirmInstall">
+            <Loader2 v-if="installing" :size="14" class="mr-1 animate-spin" />
+            {{ installing ? "Setting up\u2026" : "Install" }}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  </IntegrationsLayout>
+</template>

package/dist/runtime/pages/integrations/templates/[slug].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/templates/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/templates/index.vue

@@ -0,0 +1,220 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { Magnifier as Search, RefreshCircle as Loader2, Layers, DangerTriangle as AlertTriangle, Bolt as Zap, ClockCircle as Clock, Global as Webhook, Play } from "#solar-icons";
+import { Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@revenexx/studio";
+import TemplateFlowPreview from "../../../components/Integrations/TemplateFlowPreview.vue";
+import { TEMPLATE_CATEGORIES } from "../../../data/integrationTemplates";
+useHead({ title: "Templates \xB7 Integration Studio" });
+const { templates, loading, error, loaded, load, ensureDetails } = useIntegrationsTemplates();
+const { load: loadNodeCatalog } = useIntegrationsNodes();
+onMounted(async () => {
+  await Promise.all([load(true), loadNodeCatalog()]);
+  void ensureDetails(templates.value.map((t) => t.slug));
+});
+const search = ref("");
+const activeCategory = ref("all");
+const activeLevel = ref("all");
+const sortBy = ref("name");
+const CATEGORY_LABELS = Object.fromEntries(
+  TEMPLATE_CATEGORIES.map((c) => [c.key, c.label])
+);
+function categoryLabel(key) {
+  return CATEGORY_LABELS[key] ?? key.charAt(0).toUpperCase() + key.slice(1);
+}
+const categories = computed(() => {
+  const counts = /* @__PURE__ */ new Map();
+  for (const t of templates.value) counts.set(t.category, (counts.get(t.category) ?? 0) + 1);
+  return [...counts.entries()].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])).map(([key, count]) => ({ key, label: categoryLabel(key), count }));
+});
+const LEVELS = ["beginner", "intermediate", "advanced"];
+const LEVEL_RANK = { beginner: 0, intermediate: 1, advanced: 2 };
+const filtered = computed(() => {
+  const q = search.value.trim().toLowerCase();
+  let items = templates.value;
+  if (activeCategory.value !== "all") items = items.filter((t) => t.category === activeCategory.value);
+  if (activeLevel.value !== "all") items = items.filter((t) => t.level === activeLevel.value);
+  if (q) {
+    items = items.filter(
+      (t) => t.name.toLowerCase().includes(q) || t.description.toLowerCase().includes(q) || t.vendors.some((v) => v.includes(q)) || (packageLabel(t) ?? "").toLowerCase().includes(q) || t.industries.some((i) => i.includes(q))
+    );
+  }
+  const sorted = [...items];
+  if (sortBy.value === "name") sorted.sort((a, b) => a.name.localeCompare(b.name));
+  else if (sortBy.value === "level") sorted.sort((a, b) => (LEVEL_RANK[a.level] ?? 0) - (LEVEL_RANK[b.level] ?? 0) || a.name.localeCompare(b.name));
+  else sorted.sort((a, b) => b.nodeCount - a.nodeCount || a.name.localeCompare(b.name));
+  return sorted;
+});
+watch(() => templates.value.length, () => {
+  if (templates.value.length) void ensureDetails(templates.value.map((t) => t.slug));
+});
+const TRIGGER_ICON = { schedule: Clock, webhook: Webhook, manual: Play, event: Zap };
+const TRIGGER_LABEL = { schedule: "Scheduled", webhook: "Webhook", manual: "Run on demand", event: "Event-driven" };
+function levelDot(level) {
+  return level === "beginner" ? "bg-emerald-500" : level === "intermediate" ? "bg-amber-500" : "bg-rose-500";
+}
+function bannerFor(tpl) {
+  return tpl.images.find((i) => i.category === "banner")?.src ?? null;
+}
+function packageLabel(tpl) {
+  const pkg = tpl.package;
+  if (!pkg) return null;
+  const tail = (pkg.name.split("/").pop() ?? pkg.name).replace(/^integrations-nodes-/, "");
+  if (tail === "core") return null;
+  return pkg.label ?? tail.split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join(" ");
+}
+</script>
+
+<template>
+  <IntegrationsLayout>
+    <!-- The toolbar lives in the header's #tabs slot: PageHeader is the
+         sticky element (top-0 z-20), so filters + search stay pinned. -->
+    <PageHeader
+      title="Templates"
+      description="Pre-built workflows you can clone, then tweak. Wired by revenexx and our partners."
+    >
+      <template #tabs>
+        <div class="-mx-3 w-[calc(100%+1.5rem)] flex items-center gap-3 border-t border-black/[0.06] px-4 pt-2.5 pb-1">
+        <div class="flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto">
+          <button
+            type="button"
+            class="inline-flex h-7 shrink-0 items-center rounded-full border px-3 text-sm transition"
+            :class="activeCategory === 'all' ? 'border-primary/30 bg-primary/10 text-primary font-medium' : 'border-black/[0.08] text-muted-foreground hover:border-black/20'"
+            @click="activeCategory = 'all'"
+          >
+            All <span class="opacity-70">({{ templates.length }})</span>
+          </button>
+          <button
+            v-for="cat in categories"
+            :key="cat.key"
+            type="button"
+            class="inline-flex h-7 shrink-0 items-center rounded-full border px-3 text-sm transition"
+            :class="activeCategory === cat.key ? 'border-primary/30 bg-primary/10 text-primary font-medium' : 'border-black/[0.08] text-muted-foreground hover:border-black/20'"
+            @click="activeCategory = activeCategory === cat.key ? 'all' : cat.key"
+          >
+            {{ cat.label }} <span class="opacity-70">({{ cat.count }})</span>
+          </button>
+        </div>
+
+        <Select v-model="activeLevel">
+          <SelectTrigger class="h-7 data-[size=default]:h-7 min-h-0 py-0 w-36 rounded-full bg-white text-sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All levels</SelectItem>
+            <SelectItem v-for="l in LEVELS" :key="l" :value="l">{{ l.charAt(0).toUpperCase() + l.slice(1) }}</SelectItem>
+          </SelectContent>
+        </Select>
+        <Select v-model="sortBy">
+          <SelectTrigger class="h-7 data-[size=default]:h-7 min-h-0 py-0 w-40 rounded-full bg-white text-sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="name">Sort: A–Z</SelectItem>
+            <SelectItem value="level">Sort: Simplest first</SelectItem>
+            <SelectItem value="nodes">Sort: Most steps</SelectItem>
+          </SelectContent>
+        </Select>
+        <div class="relative w-60">
+          <Search :size="12" class="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
+          <Input v-model="search" placeholder="Search templates, vendors…" class="h-7 min-h-0 py-0 rounded-full pl-7 text-sm bg-white" />
+          </div>
+        </div>
+      </template>
+    </PageHeader>
+
+    <div class="p-4">
+      <!-- Loading (first fetch) -->
+      <div v-if="loading && !templates.length" class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+        <div v-for="n in 6" :key="`sk-${n}`" class="rounded-lg border border-black/[0.06] bg-white p-0 overflow-hidden">
+          <div class="h-36 bg-black/[0.04] animate-pulse" />
+          <div class="p-4 space-y-2">
+            <div class="h-4 w-2/3 rounded bg-black/[0.07] animate-pulse" />
+            <div class="h-3 w-full rounded bg-black/[0.05] animate-pulse" />
+            <div class="h-3 w-1/2 rounded bg-black/[0.05] animate-pulse" />
+          </div>
+        </div>
+      </div>
+
+      <!-- Fetch failed -->
+      <div v-else-if="error && !templates.length" class="rounded-lg border border-rose-500/20 bg-rose-500/5 p-4 text-sm text-rose-700 flex items-start gap-2">
+        <AlertTriangle :size="15" class="mt-0.5 shrink-0" />
+        <div>
+          <div class="font-medium">Couldn't load templates.</div>
+          <div class="text-rose-700/80">{{ error }}</div>
+        </div>
+      </div>
+
+      <!-- Empty registry -->
+      <div v-else-if="loaded && !templates.length" class="rounded-lg border border-black/[0.06] bg-white p-10 text-center">
+        <span class="mx-auto mb-3 flex size-10 items-center justify-center rounded-lg bg-slate-100 text-slate-400">
+          <Layers :size="18" />
+        </span>
+        <div class="text-sm font-semibold text-foreground">No templates registered yet</div>
+        <p class="mx-auto mt-1 max-w-sm text-sm text-muted-foreground">
+          Templates ship with node packages. Once a package that publishes templates is installed, they show up here.
+        </p>
+      </div>
+
+      <!-- Cards -->
+      <div v-else class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+        <NuxtLink
+          v-for="tpl in filtered"
+          :key="tpl.slug"
+          :to="`/integrations/templates/${tpl.slug}`"
+          class="group flex flex-col overflow-hidden rounded-lg border border-black/[0.06] bg-white transition hover:border-black/20 hover:shadow-sm"
+        >
+          <!-- Live workflow preview (or the registry banner, when one ships) -->
+          <div class="relative h-36 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:14px_14px]">
+            <img
+              v-if="bannerFor(tpl)"
+              :src="bannerFor(tpl)"
+              alt=""
+              class="h-full w-full object-cover"
+            >
+            <TemplateFlowPreview v-else-if="tpl.detailLoaded" :blob="tpl.blob" :height="144" class="px-2" />
+            <div v-else class="flex h-full items-center justify-center">
+              <Loader2 :size="16" class="animate-spin text-muted-foreground/50" />
+            </div>
+            <div class="absolute left-2 top-2 flex items-center gap-1.5">
+              <span class="inline-flex items-center whitespace-nowrap rounded-full bg-slate-100 px-2 py-0.5 uppercase text-xs font-medium text-slate-700">
+                {{ categoryLabel(tpl.category) }}
+              </span>
+              <span
+                v-if="packageLabel(tpl)"
+                class="inline-flex items-center whitespace-nowrap rounded-full bg-violet-100 px-2 py-0.5 uppercase text-xs font-medium text-violet-700"
+              >
+                {{ packageLabel(tpl) }}
+              </span>
+            </div>
+          </div>
+
+          <div class="flex min-h-0 flex-1 flex-col p-4">
+            <div class="text-sm font-semibold text-foreground line-clamp-1">{{ tpl.name }}</div>
+            <p class="mt-1 flex-1 text-sm text-muted-foreground line-clamp-2">{{ tpl.description }}</p>
+
+            <div class="mt-3 flex items-center gap-2 text-xs text-muted-foreground">
+              <span
+                v-for="t in tpl.triggerTypes"
+                :key="t"
+                class="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-slate-100 px-2 py-0.5 uppercase"
+              >
+                <component :is="TRIGGER_ICON[t] ?? Zap" :size="10" />
+                {{ TRIGGER_LABEL[t] ?? t }}
+              </span>
+              <span class="flex-1" />
+              <span class="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-slate-100 px-2 py-0.5 uppercase">
+                <span class="size-1.5 rounded-full" :class="levelDot(tpl.level)" />
+                {{ tpl.level }}
+              </span>
+              <span v-if="tpl.publisher.kind !== 'revenexx'" class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 uppercase">{{ tpl.publisher.name }}</span>
+            </div>
+          </div>
+        </NuxtLink>
+      </div>
+
+      <div v-if="templates.length && !filtered.length" class="mt-4 rounded-lg border border-black/[0.06] bg-white p-8 text-center text-sm text-muted-foreground">
+        No templates match these filters.
+      </div>
+    </div>
+  </IntegrationsLayout>
+</template>

package/dist/runtime/pages/integrations/templates/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/workflows/[id].vue

@@ -182,8 +182,10 @@ async function runFromEditor() {
   await run(primaryMode.value);
 }
 const runPayloadOpen = ref(false);
-const definedEvents = useDefinedEvents();
-const eventLog = useIntegrationsEvents();
+const definedEvents = typeof useDefinedEvents === "function" ? useDefinedEvents() : { emits: ref([]), load: async () => {
+} };
+const eventLog = typeof useIntegrationsEvents === "function" ? useIntegrationsEvents() : { events: ref([]), loadEvents: async () => {
+} };
 const prefillBusy = ref(null);
 const eventTriggerTopic = computed(() => {
   const trigger = (workflow.value?.blob.triggers ?? []).find((t) => t.type === "event");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revenexx/studio-integrations",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "description": "Integration Studio (core: workflows, node editor, runs, schedules, credentials, secrets, audit) as a standalone, publishable Nuxt module.",
   "repository": {
@@ -24,12 +24,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@nuxt/kit": "^4.0.0"
+    "@nuxt/kit": "^4.0.0",
+    "marked": "^18.0.5"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^3.0.0",
     "@revenexx/studio": "*",
-    "@revenexx/studio-shared": "^0.1.2",
+    "@revenexx/studio-shared": "^0.2.0",
     "@solar-icons/nuxt": "^1.2.0",
     "@tiptap/core": "^3.28.0",
     "@tiptap/extension-document": "^3.28.0",
@@ -50,6 +51,7 @@
   },
   "devDependencies": {
     "@nuxt/module-builder": "^1.0.2",
+    "@playwright/test": "^1.57.0",
     "@nuxt/kit": "^4.0.0",
     "@nuxt/schema": "^4.0.0",
     "nuxt": "^4.2.2",
@@ -60,6 +62,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "scripts": {
     "build": "nuxt-module-build build",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:e2e": "playwright test"
   }
 }