@revenexx/studio-integrations 0.1.0

package/README.md

@@ -0,0 +1,51 @@
+# @revenexx/studio-integrations
+
+The revenexx **Integration Studio** (core: Dashboard, Workflows + node editor,
+Runs, Schedules, Credentials, Secrets, Audit) as a distributable **Nuxt module**.
+Registers its `/integrations/*` pages, components and composables. Data/auth flow
+through the `usePlatformAuth` / `usePlatformTenant` seam (from
+`@revenexx/studio-shared`).
+
+## Install
+
+Public on npm — no registry config or token needed:
+
+```bash
+pnpm add @revenexx/studio-integrations @revenexx/studio-shared @revenexx/studio
+```
+
+## Use
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  extends: ['@revenexx/studio-shared'],          // shell primitives + platform provider
+  modules: ['@solar-icons/nuxt', '@revenexx/studio-integrations'],
+})
+```
+
+Point it at your Integrations backend via `NUXT_PUBLIC_INTEGRATIONS_API` and
+supply a token/tenant through the platform provider (override
+`usePlatformAuth` / `usePlatformTenant`, or the standalone defaults read
+`NUXT_PUBLIC_DEV_TOKEN` / `NUXT_PUBLIC_DEV_TENANT`).
+
+## ⚠️ Tailwind: you MUST scan this package
+
+The module ships its runtime as source-ish `.vue`; Tailwind generates the
+classes from **your** build. Scan both this module and `studio-shared`, or
+component styling silently breaks:
+
+```css
+@import "tailwindcss";
+@import "@revenexx/studio/tokens";
+@import "@revenexx/studio/fonts";
+@source "../node_modules/@revenexx/studio-shared/components";
+@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,
+`@vue-flow/*` + `@dagrejs/dagre` (workflow editor), `lucide-vue-next`; register
+`@solar-icons/nuxt` in the host.

package/dist/module.d.mts

@@ -0,0 +1,6 @@
+import * as nuxt_schema from 'nuxt/schema';
+export * from '../dist/runtime/types/integrations.js';
+
+declare const _default: nuxt_schema.NuxtModule<nuxt_schema.ModuleOptions, nuxt_schema.ModuleOptions, false>;
+
+export { _default as default };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "@revenexx/studio-integrations",
+  "configKey": "studioIntegrations",
+  "version": "0.1.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "unknown"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,45 @@
+import { existsSync, readdirSync, statSync } from 'node:fs';
+import { join } from 'node:path';
+import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir, extendPages } from '@nuxt/kit';
+
+function toSegment(name) {
+  if (name.startsWith("[...")) return `:${name.slice(4, -1)}(.*)*`;
+  if (name.startsWith("[")) return `:${name.slice(1, -1)}`;
+  return name;
+}
+function scanRoutes(dir, baseUrl, baseName) {
+  const routes = [];
+  for (const entry of readdirSync(dir)) {
+    const full = join(dir, entry);
+    if (statSync(full).isDirectory()) {
+      routes.push(...scanRoutes(full, `${baseUrl}/${toSegment(entry)}`, `${baseName}-${entry}`));
+    } else if (entry.endsWith(".vue")) {
+      const base = entry.slice(0, -4);
+      const path = base === "index" ? baseUrl : `${baseUrl}/${toSegment(base)}`;
+      const name = `${baseName}-${base}`.replace(/[^a-z0-9]+/gi, "-").replace(/-+$/g, "");
+      routes.push({ name, path: path || "/", file: full });
+    }
+  }
+  return routes;
+}
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@revenexx/studio-integrations",
+    configKey: "studioIntegrations"
+  },
+  setup(_options, _nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    const runtime = resolve("./runtime");
+    addComponentsDir({ path: join(runtime, "components"), pathPrefix: true });
+    addImportsDir(join(runtime, "composables"));
+    extendPages((pages) => {
+      const pagesDir = join(runtime, "pages", "integrations");
+      if (!existsSync(pagesDir)) return;
+      for (const route of scanRoutes(pagesDir, "/integrations", "integrations")) {
+        pages.push(route);
+      }
+    });
+  }
+});
+
+export { module$1 as default };

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

@@ -0,0 +1,12 @@
+declare var __VLS_4: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_4) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,20 @@
+<script setup>
+import Sidebar from "./Sidebar.vue";
+const { focused } = useIntegrationsFocus();
+</script>
+
+<template>
+  <div class="flex h-[calc(100%-0.75rem)] mb-3 mr-3 ml-1 overflow-hidden rounded-lg border border-gray-400/10 outline-1 outline-white/30">
+    <div
+      class="shrink-0 overflow-hidden transition-[width] duration-200 ease-out border-r border-black/[0.06] bg-white"
+      :class="focused ? 'w-0 !border-r-0' : 'w-64'"
+    >
+      <div class="h-full w-64 overflow-y-auto">
+        <Sidebar />
+      </div>
+    </div>
+    <div class="flex-1 min-w-0 overflow-y-auto bg-white/40 backdrop-blur-sm">
+      <slot />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,12 @@
+declare var __VLS_4: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_4) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,16 @@
+import type { WorkflowNode, WorkflowTrigger } from '../../types/integrations.js';
+type __VLS_Props = {
+    /** Either a workflow node OR a trigger. Distinguished by presence of `nodeSlug`. */
+    selection: WorkflowNode | WorkflowTrigger | null;
+    secretKeys: string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    update: (next: WorkflowTrigger | WorkflowNode) => any;
+    remove: () => any;
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdate?: ((next: WorkflowTrigger | WorkflowNode) => any) | undefined;
+    onRemove?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,450 @@
+<script setup>
+import { computed, onMounted } from "vue";
+import { AddCircle as Plus, TrashBinMinimalistic as Trash2, CloseCircle as X } from "#solar-icons";
+import {
+  Button,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Switch,
+  Textarea
+} from "@revenexx/studio";
+import { findManifest } from "../../data/integrationNodeCatalog";
+const props = defineProps({
+  selection: { type: [Object, null], required: true },
+  secretKeys: { type: Array, required: true }
+});
+const emit = defineEmits(["update", "close", "remove"]);
+const isNode = computed(() => !!props.selection && "nodeSlug" in props.selection);
+const { credentials, load: loadCredentials } = useIntegrationsCredentials();
+onMounted(() => {
+  void loadCredentials();
+});
+function credsOfType(slug) {
+  if (!slug) return credentials.value;
+  return credentials.value.filter((c) => c.credential_type_slug === slug);
+}
+function credNeedsReauth(id) {
+  return credentials.value.some((c) => c.id === id && c.status === "needs_reauth");
+}
+const exprHint = "${{ \u2026 }} ok";
+const manifest = computed(() => {
+  if (!isNode.value || !props.selection) return null;
+  const wn = props.selection;
+  return findManifest(wn.nodeSlug, wn.nodeVersion);
+});
+function labelText(v) {
+  if (!v) return "";
+  return typeof v === "string" ? v : Object.values(v)[0] ?? "";
+}
+function readConfig(key) {
+  if (!isNode.value || !props.selection) return void 0;
+  return props.selection.config?.[key];
+}
+function writeConfig(key, value) {
+  if (!isNode.value || !props.selection) return;
+  const wn = props.selection;
+  emit("update", { ...wn, config: { ...wn.config, [key]: value } });
+}
+function writeName(name) {
+  if (!props.selection) return;
+  emit("update", { ...props.selection, name });
+}
+function readTriggerConfig(key) {
+  if (isNode.value || !props.selection) return void 0;
+  return props.selection.config[key];
+}
+function writeTriggerConfig(key, value) {
+  if (isNode.value || !props.selection) return;
+  const wt = props.selection;
+  emit("update", { ...wt, config: { ...wt.config, [key]: value } });
+}
+function readArray(key) {
+  const v = readConfig(key);
+  return Array.isArray(v) ? v : [];
+}
+function pushArrayItem(key, defaultItem) {
+  writeConfig(key, [...readArray(key), defaultItem]);
+}
+function removeArrayItem(key, index) {
+  const arr = readArray(key).slice();
+  arr.splice(index, 1);
+  writeConfig(key, arr);
+}
+function setArrayItemField(key, index, fieldKey, value) {
+  const arr = readArray(key).slice();
+  arr[index] = { ...arr[index] ?? {}, [fieldKey]: value };
+  writeConfig(key, arr);
+}
+</script>
+
+<template>
+  <aside class="flex h-full w-80 shrink-0 flex-col border-l border-black/[0.06] bg-white">
+    <template v-if="selection">
+      <div class="flex items-center justify-between border-b border-black/[0.06] px-3 py-2">
+        <div class="min-w-0">
+          <div class="text-mono text-muted-foreground">
+            {{ isNode ? "Node" : "Trigger" }}
+          </div>
+          <div class="text-sm font-semibold truncate text-foreground">
+            {{ labelText(selection.name) || (isNode ? selection.nodeSlug : selection.type) }}
+          </div>
+        </div>
+        <button
+          type="button"
+          class="flex size-7 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
+          @click="emit('close')"
+        >
+          <X :size="14" />
+        </button>
+      </div>
+
+      <div class="flex-1 overflow-y-auto p-3 space-y-4">
+        <!-- Display name -->
+        <div class="space-y-1.5">
+          <Label class="text-mono text-muted-foreground">Display name</Label>
+          <Input
+            :model-value="labelText(selection.name)"
+            class="h-8 text-sm bg-white"
+            placeholder="Override the manifest name"
+            @update:model-value="(v) => writeName(String(v))"
+          />
+        </div>
+
+        <!-- Trigger config (manual / schedule / webhook) -->
+        <template v-if="!isNode">
+          <div class="space-y-3">
+            <template v-if="selection.type === 'schedule'">
+              <div class="space-y-1.5">
+                <Label class="text-mono text-muted-foreground">Cron</Label>
+                <Input
+                  :model-value="readTriggerConfig('cron') ?? ''"
+                  placeholder="0 2 * * *"
+                  class="h-8 text-sm bg-white font-mono"
+                  @update:model-value="(v) => writeTriggerConfig('cron', v)"
+                />
+              </div>
+              <div class="space-y-1.5">
+                <Label class="text-mono text-muted-foreground">Timezone</Label>
+                <Input
+                  :model-value="readTriggerConfig('timezone') ?? ''"
+                  placeholder="Europe/Berlin"
+                  class="h-8 text-sm bg-white"
+                  @update:model-value="(v) => writeTriggerConfig('timezone', v)"
+                />
+              </div>
+            </template>
+            <template v-else-if="selection.type === 'webhook'">
+              <div class="space-y-1.5">
+                <Label class="text-mono text-muted-foreground">Path</Label>
+                <Input
+                  :model-value="readTriggerConfig('path') ?? ''"
+                  placeholder="/orders"
+                  class="h-8 text-sm bg-white font-mono"
+                  @update:model-value="(v) => writeTriggerConfig('path', v)"
+                />
+              </div>
+              <div class="space-y-1.5">
+                <Label class="text-mono text-muted-foreground">Method</Label>
+                <Select
+                  :model-value="readTriggerConfig('method') ?? 'POST'"
+                  @update:model-value="(v) => writeTriggerConfig('method', v)"
+                >
+                  <SelectTrigger class="h-8 text-sm bg-white">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="GET">GET</SelectItem>
+                    <SelectItem value="POST">POST</SelectItem>
+                    <SelectItem value="PUT">PUT</SelectItem>
+                    <SelectItem value="PATCH">PATCH</SelectItem>
+                    <SelectItem value="DELETE">DELETE</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div class="space-y-1.5">
+                <Label class="text-mono text-muted-foreground">Signing secret</Label>
+                <Select
+                  :model-value="readTriggerConfig('secretRef') ?? ''"
+                  @update:model-value="(v) => writeTriggerConfig('secretRef', v)"
+                >
+                  <SelectTrigger class="h-8 text-sm bg-white">
+                    <SelectValue placeholder="None" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem v-for="k in secretKeys" :key="k" :value="k">{{ k }}</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </template>
+            <template v-else-if="selection.type === 'event'">
+              <div class="space-y-1.5">
+                <Label class="text-mono text-muted-foreground">Event</Label>
+                <Input
+                  :model-value="readTriggerConfig('event_type') ?? ''"
+                  placeholder="customer.created"
+                  class="h-8 text-sm bg-white font-mono"
+                  @update:model-value="(v) => writeTriggerConfig('event_type', v)"
+                />
+                <p class="text-sm text-muted-foreground">
+                  Runs whenever this platform event fires (e.g. <code class="font-mono">customer.created</code>, <code class="font-mono">order.placed</code>). The event payload is available to the workflow as <code class="font-mono">trigger.payload</code>.
+                </p>
+              </div>
+            </template>
+            <template v-else>
+              <p class="text-sm text-muted-foreground">
+                Manual triggers have no configuration. The workflow runs when invoked from the editor or via the API.
+              </p>
+            </template>
+          </div>
+        </template>
+
+        <!-- Node config — generated from manifest -->
+        <template v-else>
+          <div v-if="manifest?.config?.length" class="space-y-3">
+            <div
+              v-for="field in manifest.config"
+              :key="field.key"
+              class="space-y-1.5"
+            >
+              <div class="flex items-center justify-between">
+                <Label class="text-mono text-muted-foreground">
+                  {{ labelText(field.label) }}{{ field.required ? " *" : "" }}
+                </Label>
+                <span v-if="field.expressionAllowed" class="text-sm font-mono text-emerald-600/70">
+                  {{ exprHint }}
+                </span>
+              </div>
+
+              <!-- string / expression -->
+              <Input
+                v-if="['string', 'expression'].includes(field.type)"
+                :model-value="readConfig(field.key) ?? ''"
+                :placeholder="labelText(field.placeholder)"
+                class="h-8 text-sm bg-white"
+                :class="field.type === 'expression' ? 'font-mono' : ''"
+                @update:model-value="(v) => writeConfig(field.key, v)"
+              />
+
+              <!-- number -->
+              <Input
+                v-else-if="field.type === 'number'"
+                type="number"
+                :model-value="readConfig(field.key) ?? ''"
+                class="h-8 text-sm bg-white"
+                @update:model-value="(v) => writeConfig(field.key, v === '' ? null : Number(v))"
+              />
+
+              <!-- boolean -->
+              <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2 pt-1">
+                <Switch
+                  :model-value="Boolean(readConfig(field.key))"
+                  @update:model-value="(v) => writeConfig(field.key, v)"
+                />
+                <span class="text-sm text-muted-foreground">
+                  {{ labelText(field.description) }}
+                </span>
+              </div>
+
+              <!-- select -->
+              <Select
+                v-else-if="field.type === 'select'"
+                :model-value="readConfig(field.key) ?? ''"
+                @update:model-value="(v) => writeConfig(field.key, v)"
+              >
+                <SelectTrigger class="h-8 text-sm bg-white">
+                  <SelectValue :placeholder="labelText(field.placeholder) || 'Pick one'" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem v-for="opt in field.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
+                    {{ labelText(opt.label) }}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+
+              <!-- multiselect — pill toggles for now -->
+              <div v-else-if="field.type === 'multiselect'" class="flex flex-wrap gap-1">
+                <button
+                  v-for="opt in field.options ?? []"
+                  :key="String(opt.value)"
+                  type="button"
+                  class="rounded-md border border-black/[0.08] px-1.5 py-0.5 text-sm transition"
+                  :class="(readConfig(field.key) ?? []).includes(opt.value) ? 'bg-emerald-500/15 text-emerald-700 border-emerald-500/30' : 'bg-white text-muted-foreground hover:text-foreground'"
+                  @click="() => {
+  const current = readConfig(field.key) ?? [];
+  const has = current.includes(opt.value);
+  writeConfig(field.key, has ? current.filter((v) => v !== opt.value) : [...current, opt.value]);
+}"
+                >
+                  {{ labelText(opt.label) }}
+                </button>
+              </div>
+
+              <!-- secret-ref -->
+              <Select
+                v-else-if="field.type === 'secret-ref'"
+                :model-value="readConfig(field.key) ?? ''"
+                @update:model-value="(v) => writeConfig(field.key, v)"
+              >
+                <SelectTrigger class="h-8 text-sm bg-white">
+                  <SelectValue placeholder="Pick a secret" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem v-for="k in secretKeys" :key="k" :value="k">{{ k }}</SelectItem>
+                </SelectContent>
+              </Select>
+
+              <!-- credentials-ref — pick a credential of the required type -->
+              <template v-else-if="field.type === 'credentials-ref'">
+                <Select
+                  :model-value="readConfig(field.key) ?? ''"
+                  @update:model-value="(v) => writeConfig(field.key, v)"
+                >
+                  <SelectTrigger class="h-8 text-sm bg-white">
+                    <SelectValue placeholder="Pick a credential" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem v-for="c in credsOfType(field.credentialType)" :key="c.id" :value="c.id">
+                      {{ c.name }}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+                <p v-if="credNeedsReauth(readConfig(field.key))" class="text-sm text-amber-600">
+                  This credential needs reconnect.
+                </p>
+                <NuxtLink to="/integrations/credentials" class="text-sm text-violet-600 hover:underline">
+                  Manage credentials →
+                </NuxtLink>
+              </template>
+
+              <!-- array of objects (e.g. headers / mappings) -->
+              <div v-else-if="field.type === 'array' && field.items?.type === 'object'" class="space-y-2">
+                <div
+                  v-for="(item, idx) in readArray(field.key)"
+                  :key="idx"
+                  class="rounded-md border border-black/[0.06] bg-muted/20 p-2 space-y-1.5"
+                >
+                  <div class="flex items-center justify-between">
+                    <span class="text-mono text-muted-foreground">
+                      #{{ idx + 1 }}
+                    </span>
+                    <button
+                      type="button"
+                      class="flex size-5 items-center justify-center rounded text-muted-foreground hover:text-rose-600"
+                      @click="removeArrayItem(field.key, idx)"
+                    >
+                      <Trash2 :size="11" />
+                    </button>
+                  </div>
+                  <div
+                    v-for="sub in field.items.properties ?? []"
+                    :key="sub.key"
+                    class="space-y-1"
+                  >
+                    <Label class="text-mono text-muted-foreground">
+                      {{ labelText(sub.label) }}
+                    </Label>
+                    <Input
+                      :model-value="item[sub.key] ?? ''"
+                      :placeholder="labelText(sub.placeholder)"
+                      class="h-7 text-sm bg-white"
+                      :class="sub.type === 'expression' ? 'font-mono' : ''"
+                      @update:model-value="(v) => setArrayItemField(field.key, idx, sub.key, v)"
+                    />
+                  </div>
+                </div>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  class="h-7 text-sm w-full"
+                  @click="pushArrayItem(field.key, Object.fromEntries((field.items?.properties ?? []).map((p) => [p.key, ''])))"
+                >
+                  <Plus :size="11" />
+                  Add row
+                </Button>
+              </div>
+
+              <!-- fallback: JSON textarea for complex types -->
+              <Textarea
+                v-else
+                :model-value="readConfig(field.key) === void 0 ? '' : JSON.stringify(readConfig(field.key), null, 2)"
+                rows="3"
+                class="text-sm font-mono bg-white"
+                @update:model-value="(v) => {
+  try {
+    writeConfig(field.key, v ? JSON.parse(String(v)) : void 0);
+  } catch {
+  }
+}"
+              />
+
+              <p v-if="field.description" class="text-sm text-muted-foreground">
+                {{ labelText(field.description) }}
+              </p>
+            </div>
+          </div>
+          <div v-else class="text-sm text-muted-foreground italic">
+            This node has no configuration.
+          </div>
+
+          <!-- Retry section (always available on nodes) -->
+          <div class="space-y-1.5 border-t border-black/[0.06] pt-3 mt-3">
+            <Label class="text-mono text-muted-foreground">Retry policy</Label>
+            <div class="flex items-center gap-2">
+              <Switch
+                :model-value="!!selection.retry"
+                @update:model-value="(v) => emit('update', { ...selection, retry: v ? { maxAttempts: 3, backoffSeconds: 1, strategy: 'exponential' } : void 0 })"
+              />
+              <span class="text-sm text-muted-foreground">Retry on failure</span>
+            </div>
+            <template v-if="selection.retry">
+              <div class="grid grid-cols-2 gap-2 pt-1">
+                <Input
+                  type="number"
+                  :model-value="selection.retry?.maxAttempts ?? 3"
+                  class="h-7 text-sm bg-white"
+                  @update:model-value="(v) => emit('update', { ...selection, retry: { ...selection.retry, maxAttempts: Number(v) || 1 } })"
+                />
+                <Input
+                  type="number"
+                  :model-value="selection.retry?.backoffSeconds ?? 0"
+                  class="h-7 text-sm bg-white"
+                  @update:model-value="(v) => emit('update', { ...selection, retry: { ...selection.retry, backoffSeconds: Number(v) || 0 } })"
+                />
+              </div>
+              <Select
+                :model-value="selection.retry?.strategy ?? 'exponential'"
+                @update:model-value="(v) => emit('update', { ...selection, retry: { ...selection.retry, strategy: v } })"
+              >
+                <SelectTrigger class="h-7 text-sm bg-white">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="linear">linear backoff</SelectItem>
+                  <SelectItem value="exponential">exponential backoff</SelectItem>
+                </SelectContent>
+              </Select>
+            </template>
+          </div>
+        </template>
+      </div>
+
+      <div class="border-t border-black/[0.06] p-3">
+        <Button
+          variant="outline"
+          size="sm"
+          class="w-full h-7 text-sm text-rose-600 hover:text-rose-700"
+          @click="emit('remove')"
+        >
+          <Trash2 :size="12" />
+          Remove from workflow
+        </Button>
+      </div>
+    </template>
+  </aside>
+</template>

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

@@ -0,0 +1,16 @@
+import type { WorkflowNode, WorkflowTrigger } from '../../types/integrations.js';
+type __VLS_Props = {
+    /** Either a workflow node OR a trigger. Distinguished by presence of `nodeSlug`. */
+    selection: WorkflowNode | WorkflowTrigger | null;
+    secretKeys: string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    update: (next: WorkflowTrigger | WorkflowNode) => any;
+    remove: () => any;
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdate?: ((next: WorkflowTrigger | WorkflowNode) => any) | undefined;
+    onRemove?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Integrations/NodePalette.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;