@revenexx/studio-integrations 0.6.0 → 1.0.0

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

@@ -4,6 +4,22 @@ import '@vue-flow/minimap/dist/style.css';
 import type { Workflow, WorkflowBlob } from '../../types/integrations.js';
 type __VLS_Props = {
     workflow: Workflow;
+    /**
+     * Unsaved work the page is still holding for this workflow, read ONCE, at
+     * mount (behaviour specs/workflow-save.md).
+     *
+     * The editor is mounted per tab, so a trip to the Runs tab and back seeded a
+     * fresh working copy from the SAVED blob while the page still held the draft:
+     * the canvas showed one graph, the header said "Unsaved changes" about
+     * another, and Save wrote the one nobody could see. Seeding from the draft is
+     * what makes a move inside the workflow keep the work.
+     *
+     * Deliberately not watched. The page's draft is a copy of what this editor
+     * last emitted, so following it would re-seed the canvas — and drop the
+     * selection, the undo stack and any open dialog with it — on the user's own
+     * keystrokes.
+     */
+    draft?: WorkflowBlob | null;
     /** Busy flag for the control-pane Play button (a run is being triggered). */
     runBusy?: boolean;
     /** The run is queued behind a bundle build — busy, but worth saying why. */

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

@@ -3,6 +3,12 @@ import '@vue-flow/core/dist/theme-default.css';
 import type { Workflow } from '../../types/integrations.js';
 type __VLS_Props = {
     workflow: Workflow;
+    /**
+     * The editor has unsaved work the page is holding. Nothing here shows it — the
+     * canvas behind this tab is not mounted — but a restore is what destroys it, so
+     * the question this panel asks has to name it (specs/workflow-save.md).
+     */
+    draftPending?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     restored: () => any;

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

@@ -20,10 +20,12 @@ import NodeDynamicOutputsResolver from "./NodeDynamicOutputsResolver.vue";
 import { findManifest } from "../../data/integrationNodeCatalog";
 import { useIntegrationsRevisions } from "../../composables/useIntegrationsRevisions";
 const props = defineProps({
-  workflow: { type: Object, required: true }
+  workflow: { type: Object, required: true },
+  draftPending: { type: Boolean, required: false }
 });
 const emit = defineEmits(["restored"]);
 const revisionsApi = useIntegrationsRevisions();
+const t = useIntegrationsT();
 const entries = ref([]);
 const page = ref(1);
 const lastPage = ref(1);
@@ -110,7 +112,7 @@ function buildPreview(blob) {
   const nodePos = (id) => {
     const wn = blob.nodes.find((n) => n.id === id);
     if (wn) return { x: wn.position?.x ?? 0, y: wn.position?.y ?? 0 };
-    const ti = blob.triggers.findIndex((t) => t.id === id);
+    const ti = blob.triggers.findIndex((t2) => t2.id === id);
     if (ti >= 0) return triggerPos(id, ti);
     return { x: 0, y: 0 };
   };
@@ -149,16 +151,16 @@ function buildPreview(blob) {
       position: { x: s.position.x, y: s.position.y },
       zIndex: -100 + i,
       draggable: false,
-      data: { sticky: s, onUpdate: () => {
-      }, onRemove: () => {
-      } }
+      // No callbacks: that absence is what makes the note read-only — it then
+      // draws no toolbar, no resize handle and does not open for typing (PO-284).
+      data: { sticky: s }
     })),
-    ...blob.triggers.map((t, i) => ({
-      id: t.id,
+    ...blob.triggers.map((t2, i) => ({
+      id: t2.id,
       type: "trigger",
-      position: triggerPos(t.id, i),
+      position: triggerPos(t2.id, i),
       draggable: false,
-      data: t
+      data: t2
     })),
     ...blob.nodes.map((n) => ({
       id: n.id,
@@ -218,23 +220,24 @@ async function select(revision) {
       buildPreview(detail.blob);
     }
   } catch (e) {
-    toast.error(e?.message ?? "Could not load the revision.");
+    toast.error(e?.message ?? t("integration.history.toast.loadRevisionFailed"));
   } finally {
     detailLoading.value = false;
   }
 }
 async function restoreRevision(rev) {
-  if (!confirm(`Restore revision ${rev.revision}? The current version is archived first, then the workflow is rebuilt from this snapshot.`)) return;
+  const question = props.draftPending ? t("integration.history.confirm.restoreWithDraft", { revision: rev.revision }) : t("integration.history.confirm.restore", { revision: rev.revision });
+  if (!confirm(question)) return;
   restoring.value = rev.revision;
   try {
     await revisionsApi.restore(props.workflow.id, rev.revision);
-    toast.success(`Revision ${rev.revision} restored`);
+    toast.success(t("integration.history.toast.restored", { revision: rev.revision }));
     detailCache.clear();
     emit("restored");
     await loadList(true);
     void select(null);
   } catch (e) {
-    toast.error(e?.message ?? "Could not restore the revision.");
+    toast.error(e?.message ?? t("integration.history.toast.restoreFailed"));
   } finally {
     restoring.value = null;
   }
@@ -259,7 +262,7 @@ const nodeTypes = {
 const edgeTypes = {
   flow: markRaw(WorkflowEdgeView)
 };
-const previewTitle = computed(() => selected.value === null ? `Current version \xB7 revision ${props.workflow.revision}` : `Revision ${selected.value} (read-only)`);
+const previewTitle = computed(() => selected.value === null ? t("integration.history.preview.title.current", { revision: props.workflow.revision }) : t("integration.history.preview.title.revision", { revision: selected.value }));
 onMounted(() => {
   void loadList(true);
   void select(null);
@@ -311,9 +314,9 @@ onMounted(() => {
     <!-- Revision list -->
     <aside class="flex w-80 shrink-0 flex-col border-l border-black/[0.06] bg-white">
       <div class="border-b border-black/[0.06] px-3 py-2">
-        <div class="text-sm font-semibold">Version history</div>
+        <div class="text-sm font-semibold">{{ t("integration.history.heading.title") }}</div>
         <p class="text-sm text-muted-foreground">
-          Every save archives the previous revision; the newest one is what runs while the workflow is active.
+          {{ t("integration.history.heading.description") }}
         </p>
       </div>
 
@@ -327,17 +330,17 @@ onMounted(() => {
         >
           <div class="flex items-center justify-between gap-2">
             <span class="text-sm font-medium tabular-nums">{{ formatDateTime(workflow.updated_at) }}</span>
-            <Badge variant="outline" class="text-xs font-medium uppercase border-emerald-500/30 text-emerald-700">Current</Badge>
+            <Badge variant="outline" class="text-xs font-medium uppercase border-emerald-500/30 text-emerald-700">{{ t("integration.history.badge.current") }}</Badge>
             <Badge
               variant="outline"
               class="text-xs font-medium uppercase"
               :class="workflow.active ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-700' : 'border-black/[0.08] text-muted-foreground'"
-              :title="workflow.active ? 'Triggers are armed; this revision is what runs.' : 'Workflow is paused; activating runs this revision.'"
+              :title="workflow.active ? t('integration.history.badge.activeHint') : t('integration.history.badge.pausedHint')"
             >
-              {{ workflow.active ? "Active" : "Paused" }}
+              {{ workflow.active ? t("integration.history.badge.active") : t("integration.history.badge.paused") }}
             </Badge>
           </div>
-          <div class="mt-0.5 text-sm text-muted-foreground">Revision {{ workflow.revision }}</div>
+          <div class="mt-0.5 text-sm text-muted-foreground">{{ t("integration.history.list.revisionLabel", { revision: workflow.revision }) }}</div>
         </button>
 
         <!-- Archived revisions -->
@@ -351,7 +354,7 @@ onMounted(() => {
             <div class="flex items-center justify-between gap-2">
               <span class="text-sm font-medium tabular-nums">{{ formatDateTime(rev.archived_at) }}</span>
             </div>
-            <div class="mt-0.5 text-sm text-muted-foreground">Revision {{ rev.revision }}</div>
+            <div class="mt-0.5 text-sm text-muted-foreground">{{ t("integration.history.list.revisionLabel", { revision: rev.revision }) }}</div>
           </button>
           <div class="absolute right-2 top-1/2 -translate-y-1/2 opacity-0 transition group-hover:opacity-100">
             <Button
@@ -362,13 +365,13 @@ onMounted(() => {
               @click.stop="restoreRevision(rev)"
             >
               <Loader2 v-if="restoring === rev.revision" :size="11" class="mr-1 animate-spin" />
-              Restore
+              {{ t("integration.history.action.restore") }}
             </Button>
           </div>
         </div>
 
         <p v-if="!entries.length && !listLoading" class="px-2 py-6 text-center text-sm text-muted-foreground">
-          No archived revisions yet — save a change to create the first snapshot.
+          {{ t("integration.history.state.empty") }}
         </p>
         <p v-if="revisionsApi.error.value" class="px-2 py-2 text-sm text-rose-600">
           {{ revisionsApi.error.value }}
@@ -393,7 +396,7 @@ onMounted(() => {
           class="w-full text-sm"
           @click="loadMore"
         >
-          Load older revisions
+          {{ t("integration.history.action.loadMore") }}
         </Button>
       </div>
     </aside>

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

@@ -3,6 +3,12 @@ import '@vue-flow/core/dist/theme-default.css';
 import type { Workflow } from '../../types/integrations.js';
 type __VLS_Props = {
     workflow: Workflow;
+    /**
+     * The editor has unsaved work the page is holding. Nothing here shows it — the
+     * canvas behind this tab is not mounted — but a restore is what destroys it, so
+     * the question this panel asks has to name it (specs/workflow-save.md).
+     */
+    draftPending?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     restored: () => any;

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

@@ -8,6 +8,7 @@ const model = defineModel({ type: [Object, null], ...{ default: null } });
 const props = defineProps({
   triggerLabelledby: { type: String, required: false }
 });
+const t = useIntegrationsT();
 const valueId = useId();
 const triggerLabelledby = computed(
   () => props.triggerLabelledby ? `${props.triggerLabelledby} ${valueId}` : void 0
@@ -26,10 +27,10 @@ function isImage(id) {
   return (imageIdFromSrc(model.value.src) ?? model.value.src) === id;
 }
 const selectedLabel = computed(() => {
-  if (!model.value) return "Default icon";
-  if (model.value.kind === "solar") return model.value.name ?? "Icon";
+  if (!model.value) return t("integration.workflows.iconPicker.label.default");
+  if (model.value.kind === "solar") return model.value.name ?? t("integration.workflows.iconPicker.label.iconFallback");
   const id = imageIdFromSrc(model.value.src) ?? model.value.src;
-  return logos.value.find((l) => l.id === id)?.label ?? "Image";
+  return logos.value.find((l) => l.id === id)?.label ?? t("integration.workflows.iconPicker.label.imageFallback");
 });
 </script>
 
@@ -57,8 +58,8 @@ const selectedLabel = computed(() => {
             type="button"
             class="flex size-8 items-center justify-center rounded-md border text-sm text-muted-foreground transition hover:bg-muted/50"
             :class="!model ? 'border-emerald-500/40 bg-emerald-500/10' : 'border-transparent'"
-            title="No icon (default glyph)"
-            aria-label="No icon (default glyph)"
+            :title="t('integration.workflows.iconPicker.action.none')"
+            :aria-label="t('integration.workflows.iconPicker.action.none')"
             @click="pick(null)"
           >
             —
@@ -77,7 +78,7 @@ const selectedLabel = computed(() => {
         </div>
 
         <template v-if="logos.length">
-          <div class="text-mono text-muted-foreground">Integrations</div>
+          <div class="text-mono text-muted-foreground">{{ t("integration.workflows.iconPicker.section.integrations") }}</div>
           <div class="flex flex-wrap gap-1">
             <button
               v-for="l in logos"

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

@@ -3,7 +3,8 @@ import { computed, inject, nextTick, ref, watch } from "vue";
 import { Handle, Position, useVueFlow } from "@vue-flow/core";
 import { NodeToolbar } from "@vue-flow/node-toolbar";
 import * as Lucide from "lucide-vue-next";
-import { NODE_CATEGORIES, findManifest } from "../../data/integrationNodeCatalog";
+import { Copy, DangerTriangle as AlertTriangle, RefreshCircle as Loader2, TrashBinMinimalistic as TrashBin } from "#solar-icons";
+import { NODE_CATEGORIES, findManifest, isVersionExecutable } from "../../data/integrationNodeCatalog";
 import { isTerminalManifest } from "../../data/nodeInputData";
 import { resolveDisplayName, resolveLocalized } from "../../utils/localize";
 const props = defineProps({
@@ -13,17 +14,14 @@ const props = defineProps({
 });
 defineOptions({ inheritAttrs: false });
 defineEmits(["updateNodeInternals"]);
+const t = useIntegrationsT();
 const manifest = computed(() => findManifest(props.data.nodeSlug, props.data.nodeVersion));
 const category = computed(() => NODE_CATEGORIES.find((c) => c.key === manifest.value?.category));
 const title = computed(
   () => resolveDisplayName(props.data.name) || resolveLocalized(manifest.value?.name) || props.data.nodeSlug
 );
-const inputRequired = computed(() => manifest.value?.input?.required !== false);
 const invalidFields = computed(() => props.data.__invalidFields ?? []);
-const invalidLabel = computed(() => {
-  const n = invalidFields.value.length;
-  return `Config incomplete \u2014 ${n} setting${n === 1 ? "" : "s"} still need${n === 1 ? "s" : ""} fixing: ${invalidFields.value.join(", ")}`;
-});
+const invalidLabel = computed(() => t("integration.canvas.node.badge.invalidConfig", invalidFields.value.length, { fields: invalidFields.value.join(", ") }));
 const notes = computed(() => (props.data.notes ?? "").trim());
 const noteOpen = ref(false);
 const noteReady = ref(false);
@@ -32,11 +30,15 @@ const notePlacement = ref(Position.Bottom);
 const noteMaxHeight = ref(0);
 let noteTimer = null;
 const notePanelId = computed(() => `node-note-${props.id}`);
+function handleTitle(p) {
+  return p.hint ? p.label + " \u2014 " + p.hint : p.label;
+}
 function portsFromOutputs(list) {
   const ports = [];
   for (const o of list) {
     if (o.name) {
-      ports.push({ name: o.name, kind: o.kind, label: resolveLocalized(o.label) || o.name });
+      const hint = resolveLocalized(o.description);
+      ports.push({ name: o.name, kind: o.kind, label: resolveLocalized(o.label) || o.name, ...hint ? { hint } : {} });
     } else if (o.sourceFromConfig) {
       const raw = props.data.config?.[o.sourceFromConfig];
       const values = Array.isArray(raw) ? raw : [];
@@ -62,12 +64,12 @@ const outputs = computed(() => {
   const resolved = props.data.__resolvedOutputs;
   if (Array.isArray(resolved) && resolved.length) {
     const ports2 = portsFromOutputs(resolved);
-    if (!ports2.length) ports2.push({ name: "default", kind: "default", label: "out" });
+    if (!ports2.length) ports2.push({ name: "default", kind: "default", label: t("integration.canvas.node.port.outputFallback") });
     return ports2;
   }
-  if (!m) return [{ name: "default", kind: "default", label: "out" }];
+  if (!m) return [{ name: "default", kind: "default", label: t("integration.canvas.node.port.outputFallback") }];
   const ports = portsFromOutputs(m.outputs ?? []);
-  if (!ports.length) ports.push({ name: "default", kind: "default", label: "out" });
+  if (!ports.length) ports.push({ name: "default", kind: "default", label: t("integration.canvas.node.port.outputFallback") });
   return ports;
 });
 function portSemantic(p) {
@@ -161,6 +163,8 @@ function releaseNote() {
   }, 250);
 }
 const nodeActions = inject("workflow-node-actions", null);
+const unbuildableVersion = computed(() => nodeActions !== null && !isVersionExecutable(props.data.nodeSlug, props.data.nodeVersion));
+const unbuildableLabel = computed(() => t("integration.canvas.node.badge.noBuiltCode", { version: props.data.nodeVersion }));
 const canConfigure = computed(() => typeof nodeActions?.configure === "function");
 function configure() {
   nodeActions?.configure?.(props.id);
@@ -183,21 +187,21 @@ function remove() {
     <button
       type="button"
       class="flex h-6 items-center gap-1 rounded px-1.5 text-sm text-foreground/80 hover:bg-muted/50"
-      title="Duplicate"
-      aria-label="Duplicate node"
+      :title="t('integration.canvas.node.action.duplicate')"
+      :aria-label="t('integration.canvas.node.action.duplicateAria')"
       @click="duplicate"
     >
-      <Lucide.Copy :size="11" />
+      <Copy :size="11" />
     </button>
     <div class="h-4 w-px bg-black/10" />
     <button
       type="button"
       class="flex h-6 items-center gap-1 rounded px-1.5 text-sm text-rose-600 hover:bg-rose-50"
-      title="Delete"
-      aria-label="Delete node"
+      :title="t('integration.common.action.delete')"
+      :aria-label="t('integration.canvas.node.action.deleteAria')"
       @click="remove"
     >
-      <Lucide.Trash2 :size="11" />
+      <TrashBin :size="11" />
     </button>
   </NodeToolbar>
 
@@ -219,7 +223,7 @@ function remove() {
   >
     <div ref="notePanel" role="tooltip">
       <div class="mb-1 text-[8px] font-semibold uppercase tracking-[0.08em] text-muted-foreground/60">
-        Note
+        {{ t("integration.canvas.node.note.heading") }}
       </div>
       <p class="whitespace-pre-wrap break-words text-[11px] leading-snug text-foreground/80">{{ notes }}</p>
     </div>
@@ -227,17 +231,15 @@ function remove() {
 
   <!-- Input: ONE logical input, attachable from the left or the top — both
        dots feed the same `__in` port. Clearly visible, ring + shadow. -->
-  <template v-if="inputRequired">
-    <Handle
-      v-for="side in IN_SIDES"
-      :id="`__in__${side}`"
-      :key="`in-${side}`"
-      type="target"
-      :position="sideToPosition(side)"
-      title="Input"
-      class="!size-3 !rounded-full !border-2 !border-white !bg-slate-500 !shadow-sm transition-all hover:!size-3.5 hover:!bg-slate-700"
-    />
-  </template>
+  <Handle
+    v-for="side in IN_SIDES"
+    :id="`__in__${side}`"
+    :key="`in-${side}`"
+    type="target"
+    :position="sideToPosition(side)"
+    :title="t('integration.canvas.node.handle.input')"
+    class="!size-3 !rounded-full !border-2 !border-white !bg-slate-500 !shadow-sm transition-all hover:!size-3.5 hover:!bg-slate-700"
+  />
 
   <!-- Output handles: right + bottom, distributed per side. Color encodes the
        port semantics (true/false/error/branch/default), matching the edges. -->
@@ -248,7 +250,7 @@ function remove() {
       :key="`${p.name}-${side}`"
       type="source"
       :position="sideToPosition(side)"
-      :title="p.label"
+      :title="handleTitle(p)"
       :style="distributedStyle(side, i, outputs.length)"
       class="!size-3 !rounded-full !border-2 !border-white !shadow-sm transition-all hover:!size-3.5"
       :class="portTone(p).handle"
@@ -266,19 +268,43 @@ function remove() {
   showPortLabels ? 'pb-3.5' : ''
 ]"
   >
-    <!-- Incomplete settings at the last save: the count, amber, at the corner
-         the input handles leave free. Hoverable on purpose — the count alone
-         doesn't say what is wrong, so the title spells it out and lists the
-         fields; `nodrag` keeps that hover from starting a card drag. -->
+    <!-- The card's marks, in one row at the corner the input handles leave free.
+         A row rather than two absolutely-placed badges: the amber one's width
+         follows its count, so any fixed offset for a second badge overlaps it as
+         soon as the count reaches two digits. Hoverable on purpose — a symbol or
+         a bare count at a corner is a riddle, so each carries its own title;
+         `nodrag` keeps that hover from starting a card drag. -->
     <span
-      v-if="invalidFields.length"
-      role="img"
-      :aria-label="invalidLabel"
-      :title="invalidLabel"
-      class="nodrag absolute -left-2 -top-2 z-10 flex cursor-help items-center gap-0.5 rounded-full bg-amber-500 px-1.5 py-0.5 text-[9px] font-bold leading-none text-white shadow-sm"
+      v-if="invalidFields.length || unbuildableVersion"
+      class="nodrag absolute -left-2 -top-2 z-10 flex items-center gap-1"
     >
-      <Lucide.TriangleAlert :size="9" :stroke-width="2.5" />
-      {{ invalidFields.length }}
+      <span
+        v-if="invalidFields.length"
+        role="img"
+        :aria-label="invalidLabel"
+        :title="invalidLabel"
+        class="flex cursor-help items-center gap-0.5 rounded-full bg-amber-500 px-1.5 py-0.5 text-[9px] font-bold leading-none text-white shadow-sm"
+      >
+        <!-- `weight="Bold"` for the same reason the Lucide draw carried
+             `stroke-width="2.5"`: 9px of white on amber. Solar's default
+             BoldDuotone washes out at that size against the pill. -->
+        <AlertTriangle :size="9" weight="Bold" />
+        {{ invalidFields.length }}
+      </span>
+      <!-- The pinned version cannot be run. Rose rather than amber, and no
+           count: amber on this card means unfinished work of the user's own —
+           settings still to fill in — while this is the platform missing a piece,
+           which the user cannot fix by typing. Hence the stronger colour despite
+           being the one that does NOT block activation. -->
+      <span
+        v-if="unbuildableVersion"
+        role="img"
+        :aria-label="unbuildableLabel"
+        :title="unbuildableLabel"
+        class="flex cursor-help items-center rounded-full bg-rose-600 px-1.5 py-0.5 text-[9px] font-bold leading-none text-white shadow-sm"
+      >
+        <AlertTriangle :size="9" weight="Bold" />
+      </span>
     </span>
     <!-- Always-visible edit affordance: single click opens the config lightbox.
          (Double-click on the whole card works too.) Hidden in read-only hosts
@@ -288,8 +314,8 @@ function remove() {
       v-if="canConfigure"
       type="button"
       class="nodrag absolute right-1.5 top-1.5 z-10 flex size-5 items-center justify-center rounded text-muted-foreground/50 transition-colors hover:bg-muted hover:text-foreground"
-      title="Configure"
-      aria-label="Configure"
+      :title="t('integration.canvas.node.action.configure')"
+      :aria-label="t('integration.canvas.node.action.configure')"
       @click.stop="configure"
       @mousedown.stop
       @dblclick.stop
@@ -305,7 +331,7 @@ function remove() {
       type="button"
       class="nodrag absolute right-1.5 z-10 flex size-5 items-center justify-center rounded text-muted-foreground/45 transition-colors hover:bg-muted hover:text-foreground"
       :class="showPortLabels ? 'bottom-4' : 'bottom-1.5'"
-      aria-label="Note"
+      :aria-label="t('integration.canvas.node.note.heading')"
       :aria-describedby="notePanelId"
       @mouseenter="openNote"
       @mouseleave="releaseNote"
@@ -331,8 +357,12 @@ function remove() {
         v-if="resolvePending"
         class="pointer-events-none absolute bottom-1 left-1/2 flex -translate-x-1/2 select-none items-center gap-1 whitespace-nowrap text-[9px] font-semibold uppercase tracking-wide text-muted-foreground"
       >
-        <Lucide.LoaderCircle :size="9" class="animate-spin" />
-        Ports
+        <!-- `weight="Bold"` for the badge's reason one size down: the default
+             BoldDuotone draws a filled disc across the whole viewBox, and a disc
+             turning looks like a disc standing still. Bold knocks the arrows out
+             of the ring, so 9px of it still reads as spinning. -->
+        <Loader2 :size="9" weight="Bold" class="animate-spin" />
+        {{ t("integration.canvas.node.port.resolving") }}
       </span>
       <template v-else>
         <span
@@ -364,7 +394,7 @@ function remove() {
         <div v-if="data.nodeVersion" class="mt-0.5 flex items-center gap-1.5 text-sm text-muted-foreground">
           <span
             class="shrink-0 text-[10px] font-medium leading-none tabular-nums text-muted-foreground/55"
-            :title="`Version ${data.nodeVersion}`"
+            :title="t('integration.canvas.node.meta.versionTitle', { version: data.nodeVersion })"
           >v{{ data.nodeVersion }}</span>
         </div>
       </div>