@revenexx/studio-integrations 2.3.0 → 2.5.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @revenexx/studio-integrations
 
+## 2.5.0
+
+### Minor Changes
+
+- 2d78623: Testing a credential on its detail view now tries the values in the form when they differ from what is stored (PO-535). It used to test the stored access data whatever had been typed, and recorded that answer, so a working new key read as failing on the list until it was saved. A test of an unsaved edit no longer changes the credential's state; with nothing changed, the test is a test of the stored credential as before. Once a test has run on the detail view, its result is the only answer shown: the credential's state at the top stands aside until the view is opened again. The time beside that state is now translated (German read "verified vor 1 Min."). The detail view gains a **Cancel** that closes it and leaves the stored values as they were. Saving changed access data now tests what was saved, so the state follows a key that was just fixed; a save that only renames asks the provider nothing. Against an Integrations API without it, a test of typed values says that they were not tried rather than showing the stored values' answer as theirs. Needs the Integrations API with PO-535, which takes an optional `config` on `POST /credentials/{id}/test`. `test()` from `useIntegrationsCredentials` gains that optional `config`, and its result an optional `recorded`.
+- 0aa67e6: A publisher can see and retire the versions of the nodes a package publishes (PO-549).
+
+  - New `IntegrationsNodeVersionsPanel` component, taking a `package-name`. It lists
+    every node that package registers with each of its versions, marking which are
+    offered and which are retired, with the reason. The cockpit mounts it as the
+    _Nodes_ tab of one of _My integrations_.
+  - Retiring a version takes two steps. The publisher types it out as
+    `<slug>@<version>`, then sees how widely it is used (workflows, how many are
+    active, tenants, templates) before retiring it. A retired version can be restored
+    without typing.
+  - The palette no longer offers a version its publisher retired, and neither does
+    moving a node to another version. A workflow already pinned to a retired version
+    still draws and runs, and its step still says a newer version is available.
+  - The panel marks a version that was registered but never built as _Not built_,
+    not _Offered_.
+
+  Needs an Integrations service that reports `retired` on `GET /nodes` and serves
+  `/nodes/{slug}/{version}/retire` and `/usage` (revenexx/integrations#275).
+
+### Patch Changes
+
+- aabada7: A toast sent from the studio now reaches the host's `<Toaster>` when the host's Vite dev server pre-bundles `@revenexx/studio` (PO-276). Vite inlined `vue-sonner` into that pre-bundle while the module's transpiled runtime imported the package itself, so the two held separate stores and no message ever appeared — with nothing in the console. The module now adds `vue-sonner` to `vite.optimizeDeps.include` whenever the host can resolve it, keeping whatever the host listed there. Hosts that already pre-bundle it need no change.
+- 1f6e49c: The `{ }` mapping list is as wide as its setting and shows every entry in full, and a step nobody renamed is called what its card calls it instead of its slug (PO-601).
+- b816ff6: A manual trigger no longer looks like a second Run button (PO-606). Its glyph is now a person instead of the play triangle — the Run button's glyph — on every surface that draws a trigger: canvas card, node palette, inspector, create dialog, template card and detail page. And a trigger's glyph now sits on the same light chip a node's does — on the canvas card and in a template's flow preview instead of a filled green one, so nothing on the card reads as pressable, and in the node palette and the new-workflow dialog instead of a pale green one, so a trigger looks the same from picking it to placing it. The green border, background and footer still mark it as a trigger.
+
+## 2.4.0
+
+### Minor Changes
+
+- 22eb158: Run in the workflow editor no longer starts the saved version while the canvas shows unsaved changes (PO-567). A changed setting used to be run as its old value, with nothing on screen to say so. Run now stands in the header beside Save rather than in the canvas's control pane, and while there is unsaved work it reads **Save & run** (German **Speichern & Run**): the press saves first and runs the workflow as it then stands. A save that is refused, or waits on the question whether to keep the work as paused, starts no run. The canvas's right-click menu names the save the same way. The header's dispatch badge now shows the mode as entered in the settings, as the name beside it already did, because that is the mode the next run goes out in. `WorkflowEditor` loses its `runWaiting` prop and gains `runSaves`.
+
 ## 2.3.0
 
 ### Minor Changes

package/dist/module.json

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

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { readdirSync, statSync, existsSync } from 'node:fs';
-import { join } from 'node:path';
-import { defineNuxtModule, createResolver, addPlugin, hasNuxtModule, installModule, addComponentsDir, addImportsDir, extendPages } from '@nuxt/kit';
+import { join, dirname } from 'node:path';
+import { defineNuxtModule, createResolver, addPlugin, hasNuxtModule, installModule, extendViteConfig, addComponentsDir, addImportsDir, extendPages } from '@nuxt/kit';
 
 function toSegment(name) {
   if (name.startsWith("[...")) return `:${name.slice(4, -1)}(.*)*`;
@@ -23,6 +23,29 @@ function scanRoutes(dir, baseUrl, baseName) {
   return routes;
 }
 
+const SHARED_PEERS_TO_PRE_BUNDLE = ["vue-sonner"];
+function resolvableSharedPeers(rootDir, exists = existsSync) {
+  return SHARED_PEERS_TO_PRE_BUNDLE.filter((pkg) => {
+    for (let dir = rootDir; ; dir = dirname(dir)) {
+      if (exists(join(dir, "node_modules", pkg, "package.json"))) {
+        return true;
+      }
+      if (dirname(dir) === dir) {
+        return false;
+      }
+    }
+  });
+}
+function withPreBundled(include, peers) {
+  const merged = [...include ?? []];
+  for (const pkg of peers) {
+    if (!merged.includes(pkg)) {
+      merged.push(pkg);
+    }
+  }
+  return merged;
+}
+
 const module$1 = defineNuxtModule({
   meta: {
     name: "@revenexx/studio-integrations",
@@ -58,6 +81,11 @@ const module$1 = defineNuxtModule({
       new RegExp(runtime.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"))
     );
     nuxt.options.build.transpile.push(runtime);
+    const peers = resolvableSharedPeers(nuxt.options.rootDir);
+    extendViteConfig((config) => {
+      config.optimizeDeps ??= {};
+      config.optimizeDeps.include = withPreBundled(config.optimizeDeps.include, peers);
+    });
     addComponentsDir({ path: join(runtime, "components"), pathPrefix: true });
     addImportsDir(join(runtime, "composables"));
     addPlugin(join(runtime, "plugins", "realtime.client"));

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

@@ -32,6 +32,7 @@ import {
 import { toast } from "../../utils/notify";
 import { apiRefusal, errorReason } from "../../utils/apiError";
 import { credentialState } from "../../utils/credentialState";
+import { credentialEditDiffers } from "../../utils/credentialEdit";
 import { relativeTime } from "../../utils/relativeTime";
 import { useNow } from "../../composables/useNow";
 import { hasRevenexxSource } from "../../utils/revenexxCredentialSource";
@@ -98,9 +99,11 @@ function formatDateTime(iso) {
     return String(iso);
   }
 }
+let viewOpening = 0;
 watch(
   [() => props.open, () => props.credential?.id],
   () => {
+    viewOpening++;
     if (!props.open || !props.credential) return;
     tab.value = "credentials";
     form.name = props.credential.name;
@@ -122,26 +125,41 @@ function buildConfigPayload() {
 }
 async function runTest() {
   if (!props.credential) return;
+  const opening = viewOpening;
   testing.value = true;
   liveTest.value = null;
   clearRefusal();
   try {
-    liveTest.value = await test(props.credential.id);
-    await load(true);
-    emit("changed");
+    const payload = buildConfigPayload();
+    const edited = credentialEditDiffers(fieldsOf(props.type), payload, props.credential.public_config ?? {});
+    const result = await test(props.credential.id, edited ? payload : void 0);
+    if (result.recorded !== false) {
+      await load(true);
+      emit("changed");
+    }
+    if (opening !== viewOpening) return;
+    liveTest.value = edited && result.recorded === void 0 && !result.error ? { ok: false, error: t("integration.credentials.detail.test.editNotSupported") } : result;
   } finally {
-    testing.value = false;
+    if (opening === viewOpening) testing.value = false;
   }
 }
+async function testSaved(id) {
+  await test(id);
+  emit("changed");
+}
 async function save() {
   if (!props.credential || !form.name.trim()) return;
   saving.value = true;
   clearRefusal();
+  const id = props.credential.id;
+  const payload = buildConfigPayload();
+  const edited = credentialEditDiffers(fieldsOf(props.type), payload, props.credential.public_config ?? {});
   try {
-    await update(props.credential.id, { name: form.name.trim(), config: buildConfigPayload() });
+    await update(id, { name: form.name.trim(), config: payload });
     emit("changed");
     emit("update:open", false);
     toast.success(t("integration.credentials.toast.updated"));
+    if (edited) void testSaved(id);
   } catch (e) {
     saveRefusal.value = e;
     void focusFirstRefusedField();
@@ -209,13 +227,18 @@ async function connect() {
              pane was the whole tab, so nothing about the spacing around them moves. -->
         <template v-if="tab === 'credentials'">
           <div class="space-y-5 max-h-[62vh] overflow-y-auto pr-1 pt-4">
-            <!-- Connection state — the headline answer: are these credentials correct? -->
-            <div class="rounded-lg border p-3" :class="state.toneClass">
+            <!-- Connection state — the headline answer: are these credentials correct?
+                 Until the operator tests from here: from then on the result below is
+                 the only answer on screen. The state is about the stored values and a
+                 test may have tried the typed ones, and two answers side by side — red
+                 above, green below — were read as the studio contradicting itself, not
+                 as two questions (PO-535). -->
+            <div v-if="!liveTest" class="rounded-lg border p-3" :class="state.toneClass">
               <div class="flex items-center gap-2">
                 <CheckCircle2 v-if="state.key === 'connected'" :size="16" class="shrink-0" />
                 <XCircle v-else-if="state.key === 'failed'" :size="16" class="shrink-0" />
                 <span class="font-medium">{{ state.label }}</span>
-                <span v-if="state.at" class="text-sm opacity-70">· verified {{ relativeTime(state.at, now) }}</span>
+                <span v-if="state.at" class="text-sm opacity-70">{{ t("integration.credentials.detail.state.testedAt", { time: relativeTime(state.at, now) }) }}</span>
                 <div class="flex-1" />
                 <Button
                   v-if="isOAuthAuthcode"
@@ -229,19 +252,26 @@ async function connect() {
                   {{ t("integration.credentials.detail.action.reconnect") }}
                 </Button>
               </div>
-              <!-- The stored sentence, and only while nothing fresher is on screen. The
-               live box below shows the result of a test just run, and the reload that
-               follows it puts the very same sentence here — so both would print it
-               twice, and past the length the platform truncates at, twice differently.
-               The freshly returned one wins, being whole (specs/credential-test.md
+              <!-- The stored sentence. Never beside a fresh one: the whole block stands
+               aside once a test has run here, and the reload that follows a test puts
+               the same sentence in it — printed twice, and past the length the
+               platform truncates at, twice differently (specs/credential-test.md
                AC-1). -->
-              <p v-if="state.message && !liveTest" class="mt-1 text-sm break-words opacity-90">
+              <p v-if="state.message" class="mt-1 text-sm break-words opacity-90">
                 {{ state.message }}
               </p>
               <p v-else-if="state.key === 'untested'" class="mt-1 text-sm opacity-80">
                 {{ t("integration.credentials.detail.state.untestedHint") }}
               </p>
             </div>
+            <!-- The state stood aside for a test result, and took the way to reconnect
+                 with it; a three-legged credential keeps that way open. -->
+            <div v-else-if="isOAuthAuthcode" class="flex justify-end">
+              <Button size="sm" variant="outline" :disabled="connecting" @click="connect">
+                <Loader2 v-if="connecting" :size="13" class="mr-1 animate-spin" />
+                {{ t("integration.credentials.detail.action.reconnect") }}
+              </Button>
+            </div>
 
             <!-- Editable fields -->
             <div class="space-y-3">
@@ -359,6 +389,12 @@ async function connect() {
 
           <div class="flex items-center gap-2 pt-3">
             <div class="flex-1" />
+            <!-- Leaves everything as stored: what was typed goes, since the form is
+                 seeded afresh each time the view opens. The one click back after a test
+                 of a new key failed, where the ✕ does not say it discards anything. -->
+            <Button variant="ghost" :disabled="saving" @click="emit('update:open', false)">
+              {{ t("integration.common.action.cancel") }}
+            </Button>
             <Button variant="outline" :disabled="testing || saving" @click="runTest">
               <Loader2 v-if="testing" :size="14" class="mr-1 animate-spin" />
               <TestIcon v-else :size="14" class="mr-1" />

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

@@ -130,23 +130,39 @@ async function applySftp() {
     applying.value = false;
   }
 }
+function smtpLogin(cred) {
+  return { user: cred.smtp_username || cred.name, password: cred.smtp_password || cred.key || "" };
+}
+function applyMailLogin(cred) {
+  const login = smtpLogin(cred);
+  if (!login.password) {
+    toast.error(t("integration.credentials.revenexxSource.error.mailCredentialNoSecret"));
+    emit("apply", { user: "", password: "" });
+    applied.value = null;
+    return false;
+  }
+  emit("apply", {
+    host: mailSmtpHost,
+    port: mailSmtpPort,
+    user: login.user,
+    password: login.password,
+    secure: mailSmtpPort === 465
+  });
+  applied.value = `${login.user}@${mailSmtpHost}:${mailSmtpPort}`;
+  return true;
+}
 async function applySmtp() {
   if (!mail) return;
+  const id = selectedId.value;
   applying.value = true;
   try {
-    const cred = await mail.getCredential(selectedId.value);
+    const cred = await mail.getCredential(id);
+    if (selectedId.value !== id) return;
     if (!cred) {
       toast.error(t("integration.credentials.revenexxSource.error.mailCredentialGone"));
       return;
     }
-    emit("apply", {
-      host: mailSmtpHost,
-      port: mailSmtpPort,
-      user: cred.smtp_username ?? "",
-      password: cred.smtp_password ?? "",
-      secure: mailSmtpPort === 465
-    });
-    applied.value = `${cred.smtp_username}@${mailSmtpHost}:${mailSmtpPort}`;
+    applyMailLogin(cred);
   } catch (e) {
     toast.error(errorReason(e, t("integration.credentials.revenexxSource.error.readMailCredential")));
   } finally {
@@ -218,18 +234,11 @@ async function createSmtp() {
       toast.error(t("integration.credentials.revenexxSource.error.mailCredentialNotReturned"));
       return;
     }
-    emit("apply", {
-      host: mailSmtpHost,
-      port: mailSmtpPort,
-      user: cred.smtp_username ?? "",
-      password: cred.smtp_password ?? "",
-      secure: mailSmtpPort === 465
-    });
-    applied.value = `${cred.smtp_username}@${mailSmtpHost}:${mailSmtpPort}`;
+    const copied = applyMailLogin(cred);
     smtpCreds.value = [{ uuid: cred.uuid, name: cred.name }, ...smtpCreds.value];
     selectedId.value = cred.uuid;
     createOpen.value = false;
-    toast.success(t("integration.credentials.revenexxSource.toast.smtpCreated"));
+    if (copied) toast.success(t("integration.credentials.revenexxSource.toast.smtpCreated"));
   } catch (e) {
     toast.error(errorReason(e, t("integration.credentials.revenexxSource.error.createSmtp")));
   } finally {

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

@@ -352,7 +352,10 @@ function insert(expr) {
       <span class="min-w-0 truncate font-mono" :class="preview.misses ? 'text-amber-600' : 'text-emerald-700'">{{ preview.resolved }}</span>
     </p>
 
-    <!-- Named, because the same expressions are offered twice on this surface —
+    <!-- As wide as the setting, and every line wraps (PO-601): entries of one step
+         differ only at their end — `invoices.count`, `invoices.invoices` — and a
+         fixed 20rem with `truncate` cut exactly that part off.
+         Named, because the same expressions are offered twice on this surface —
          here and in the panel beside the form — and a popup nothing can address
          is a popup nothing can test either. -->
     <div
@@ -360,7 +363,7 @@ function insert(expr) {
       :id="pickerId"
       role="group"
       :aria-label="t('integration.nodeConfig.expression.picker.aria')"
-      class="absolute right-0 top-full z-50 mt-1 flex max-h-72 w-80 flex-col rounded-md border border-black/[0.08] bg-white text-sm shadow-lg"
+      class="absolute right-0 top-full z-50 mt-1 flex max-h-72 w-full min-w-80 flex-col rounded-md border border-black/[0.08] bg-white text-sm shadow-lg"
       @keydown="onPickerKeydown"
     >
       <div class="shrink-0 border-b border-black/[0.06] p-1">
@@ -387,10 +390,10 @@ function insert(expr) {
             class="block w-full px-2 py-1 text-left transition hover:bg-muted/50"
             @mousedown.prevent="insert(item.expr)"
           >
-            <div class="truncate text-muted-foreground">
+            <div class="break-words text-muted-foreground">
               {{ item.label }}
             </div>
-            <div class="truncate font-mono text-emerald-700">
+            <div class="break-all font-mono text-emerald-700">
               {{ item.expr }}
             </div>
           </button>

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

@@ -52,6 +52,7 @@ import {
   valueAtPath
 } from "../../data/nodeRunData";
 import { resolveDisplayName, resolveLocalized } from "../../utils/localize";
+import { nodeDisplayName } from "../../utils/nodeDisplayName";
 import { describeRecurrence, parseCron, scheduleTimezone, toCron } from "../../utils/schedule";
 import { errorReason } from "../../utils/apiError";
 const t = useIntegrationsT();
@@ -616,7 +617,10 @@ const sampleContext = computed(() => {
 });
 provide("integrationsSampleContext", sampleContext);
 provide("integrationsNodeNames", computed(
-  () => Object.fromEntries((props.nodes ?? []).map((n) => [n.id, resolveDisplayName(n.name) || n.nodeSlug]))
+  () => (
+    // A pill names an unnamed step as its card does, not by its slug (PO-601).
+    Object.fromEntries((props.nodes ?? []).map((n) => [n.id, nodeDisplayName(n)]))
+  )
 ));
 const upstreamSections = computed(() => {
   if (!isNode.value) return [];
@@ -624,7 +628,7 @@ const upstreamSections = computed(() => {
     const m = findManifest(node.nodeSlug, node.nodeVersion);
     return {
       id: node.id,
-      name: resolveDisplayName(node.name) || node.nodeSlug,
+      name: nodeDisplayName(node),
       manifest: m,
       direct,
       ports: withSampledFields(portsForNode(node, m, props.dynamicOutputs?.[node.id]), sampleFor(node.id))

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

@@ -3,7 +3,7 @@ import { computed, ref, watch } from "vue";
 import { AltArrowLeft as ArrowLeft, Bolt as Zap, Magnifier as Search } from "#solar-icons";
 import { triggerGlyph } from "../../data/triggerGlyphs";
 import * as Lucide from "lucide-vue-next";
-import { INTEGRATION_NODE_CATALOG, NODE_CATEGORIES, TRIGGER_TEMPLATES } from "../../data/integrationNodeCatalog";
+import { INTEGRATION_NODE_CATALOG, isOffered, NODE_CATEGORIES, TRIGGER_TEMPLATES } from "../../data/integrationNodeCatalog";
 import { resolveLocalized, studioLocale } from "../../utils/localize";
 import { orderFolderLeaves, orderFolders } from "../../utils/paletteOrder";
 const { load: loadNodes } = useIntegrationsNodes();
@@ -88,7 +88,7 @@ function makeGroup(label) {
   return { label, children: /* @__PURE__ */ new Map(), leaves: [], count: 0 };
 }
 function isExecutable(m) {
-  return m.__hasBundle !== false;
+  return isOffered(m);
 }
 const latestManifests = computed(() => {
   const seen = /* @__PURE__ */ new Set();
@@ -274,6 +274,7 @@ function insertManifest(leaf) {
 function insertTrigger(tpl) {
   emit("insert", { kind: "trigger", type: tpl.type });
 }
+const triggerChipClass = NODE_CATEGORIES.find((c) => c.key === "trigger")?.color;
 function categoryColor(key) {
   const meta = key ? CORE_FOLDERS[key] : void 0;
   if (meta) return meta.color;
@@ -351,7 +352,7 @@ const searching = computed(() => search.value.trim().length > 0);
                 @dragend="onDragEnd"
                 @click="insertTrigger(tpl)"
               >
-                <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600">
+                <span class="flex size-6 shrink-0 items-center justify-center rounded-md" :class="triggerChipClass">
                   <component :is="triggerGlyph(tpl.type)" :size="13" />
                 </span>
                 <div class="min-w-0">
@@ -415,7 +416,7 @@ const searching = computed(() => search.value.trim().length > 0);
               @dragend="onDragEnd"
               @click="insertTrigger(tpl)"
             >
-              <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600">
+              <span class="flex size-6 shrink-0 items-center justify-center rounded-md" :class="triggerChipClass">
                 <component :is="triggerGlyph(tpl.type)" :size="13" />
               </span>
               <div class="min-w-0">

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

@@ -0,0 +1,19 @@
+export type RetirableVersion = {
+    slug: string;
+    version: string;
+    name: string;
+};
+type __VLS_Props = {
+    target: RetirableVersion | null;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    'open'?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    retired: (target: RetirableVersion) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onRetired?: ((target: RetirableVersion) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,131 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { RefreshCircle as Loader2 } from "#solar-icons";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  Button,
+  Input
+} from "@revenexx/studio";
+import { useIntegrationsT } from "../../composables/useIntegrationsT";
+import { useNodeRetirement } from "../../composables/useNodeRetirement";
+import { errorReason } from "../../utils/apiError";
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const props = defineProps({
+  target: { type: [Object, null], required: true }
+});
+const emit = defineEmits(["retired"]);
+const t = useIntegrationsT();
+const { usage: readUsage, retire } = useNodeRetirement();
+const typed = ref("");
+const reason = ref("");
+const step = ref("confirm");
+const usage = ref(null);
+const busy = ref(false);
+const error = ref(null);
+const expected = computed(() => props.target ? `${props.target.slug}@${props.target.version}` : "");
+const typedMatches = computed(() => typed.value.trim() === expected.value);
+const PLACEHOLDER = "\0";
+const confirmPrompt = computed(() => {
+  const [before = "", after = ""] = t("integration.nodeVersions.retire.confirm.label", { version: PLACEHOLDER }).split(PLACEHOLDER);
+  return { before, after };
+});
+watch(open, (o) => {
+  if (!o) return;
+  typed.value = "";
+  reason.value = "";
+  step.value = "confirm";
+  usage.value = null;
+  error.value = null;
+});
+async function check() {
+  const target = props.target;
+  if (!target || !typedMatches.value || busy.value) return;
+  busy.value = true;
+  error.value = null;
+  try {
+    usage.value = await readUsage(target.slug, target.version);
+    step.value = "review";
+  } catch (e) {
+    error.value = errorReason(e, t("integration.nodeVersions.retire.error.generic"));
+  } finally {
+    busy.value = false;
+  }
+}
+async function confirm() {
+  const target = props.target;
+  if (!target || busy.value) return;
+  busy.value = true;
+  error.value = null;
+  try {
+    await retire(target.slug, target.version, reason.value.trim() || null);
+    open.value = false;
+    emit("retired", target);
+  } catch (e) {
+    error.value = errorReason(e, t("integration.nodeVersions.retire.error.generic"));
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+
+<template>
+  <AlertDialog :open="open" @update:open="(v) => {
+  if (!v && !busy) open = false;
+}">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>{{ t("integration.nodeVersions.retire.dialog.title") }}</AlertDialogTitle>
+        <AlertDialogDescription>
+          <span v-if="props.target">
+            <span class="font-medium text-foreground font-mono">{{ expected }}</span>
+            {{ t("integration.nodeVersions.retire.dialog.description") }}
+          </span>
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+
+      <form v-if="step === 'confirm'" class="space-y-3" @submit.prevent="check">
+        <label class="block space-y-1 text-sm">
+          <span>{{ confirmPrompt.before }}<code class="rounded bg-muted px-1 py-0.5 font-mono text-xs text-foreground">{{ expected }}</code>{{ confirmPrompt.after }}</span>
+          <Input v-model="typed" autocomplete="off" spellcheck="false" class="font-mono" :aria-label="t('integration.nodeVersions.retire.confirm.aria')" />
+        </label>
+        <label class="block space-y-1 text-sm">
+          <span>{{ t("integration.nodeVersions.retire.reason.label") }}</span>
+          <Input v-model="reason" :placeholder="t('integration.nodeVersions.retire.reason.placeholder')" />
+        </label>
+      </form>
+
+      <div v-else-if="usage" class="space-y-2 text-sm" data-testid="node-retire-usage">
+        <p v-if="usage.workflows === 0 && usage.templates === 0">
+          {{ t("integration.nodeVersions.retire.usage.none") }}
+        </p>
+        <template v-else>
+          <p class="font-medium">
+            {{ t("integration.nodeVersions.retire.usage.counts", { workflows: usage.workflows, active: usage.active_workflows, tenants: usage.tenants, templates: usage.templates }) }}
+          </p>
+          <p class="text-muted-foreground">{{ t("integration.nodeVersions.retire.usage.keepWorking") }}</p>
+        </template>
+      </div>
+
+      <p v-if="error" class="text-sm text-rose-600">{{ error }}</p>
+
+      <AlertDialogFooter>
+        <Button variant="outline" :disabled="busy" @click="open = false">
+          {{ t("integration.common.action.cancel") }}
+        </Button>
+        <Button v-if="step === 'confirm'" :disabled="!typedMatches || busy" @click="check">
+          <Loader2 v-if="busy" :size="14" class="animate-spin" />
+          {{ t("integration.nodeVersions.retire.action.check") }}
+        </Button>
+        <Button v-else class="bg-destructive text-white hover:bg-destructive/90" :disabled="busy" @click="confirm">
+          <Loader2 v-if="busy" :size="14" class="animate-spin" />
+          {{ t("integration.nodeVersions.retire.action.retire") }}
+        </Button>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>

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

@@ -0,0 +1,19 @@
+export type RetirableVersion = {
+    slug: string;
+    version: string;
+    name: string;
+};
+type __VLS_Props = {
+    target: RetirableVersion | null;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    'open'?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    retired: (target: RetirableVersion) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onRetired?: ((target: RetirableVersion) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

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