@revenexx/studio-integrations 0.6.0 → 1.0.0

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

@@ -0,0 +1,50 @@
+/**
+ * One shortcut into a surface the *host* provides — Import & Export, the SFTP
+ * server, the event stream, inbound webhooks. None of the four is a page of this
+ * module: they are the cockpit's, and this card is the studio's landing page
+ * pointing at them.
+ *
+ * So the card has two states, and which one it is in is not its own decision:
+ *
+ * - **`available`** — the host has the surface. The card is a link and behaves
+ *   exactly as it did before PO-223.
+ * - **not available** — the card stays on screen, looks the same, and is a button
+ *   that explains where the surface lives instead of leading into a route the host
+ *   does not serve. Before PO-223 it was a link into nothing: in the playground
+ *   and in the standalone dev studio all four led to a 404.
+ *
+ * **Staying on screen is the point**, and it is the call the managed credential
+ * sources already made (`CredentialRevenexxSource.vue`, PO-222): a control that
+ * vanishes leaves nothing to read the explanation from, and the reader cannot tell
+ * a broken feature from one that belongs somewhere else.
+ *
+ * **No `aria-label`, on purpose** — like `TemplateCard`, the card takes its name
+ * from what it shows. The state is carried by the *role*: "Import & Export,
+ * button" instead of "link" is what says to a screen reader that this does not
+ * navigate, and it says it without announcing something no sighted reader can see
+ * (`specs/accessibility.md` AC-1 names the on-screen text as the source of a name).
+ *
+ * Who decides `available`, and why it is the router rather than a guess about the
+ * host, is `docs/host-surfaces.md`.
+ *
+ * The two branches draw the same body twice rather than sharing it: `as-child`
+ * wants a real element as its child, and the alternatives — a wrapper element
+ * around the card, or a second component for eight lines — cost either the grid
+ * layout or a file. **Keep the two bodies identical.**
+ */
+import type { Component } from 'vue';
+type __VLS_Props = {
+    /** What the surface is called, in the reader's language. */
+    label: string;
+    /** One line on what it is for. Shown in both states. */
+    hint: string;
+    icon: Component;
+    /** Where the surface lives in a host that has it. */
+    to: string;
+    /** Whether this host has it. See the comment above; no default on purpose. */
+    available: boolean;
+    /** What the popover says when it does not. */
+    note: string;
+};
+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;

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

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, resolveComponent } from "vue";
-import { RefreshCircle as Loader2, ClockCircle as Clock, Global as Webhook, Play, Bolt as Zap } from "#solar-icons";
+import { RefreshCircle as Loader2 } from "#solar-icons";
+import { triggerGlyph as glyphForTrigger } from "../../data/triggerGlyphs";
 import { templateCategoryLabel, templatePackageLabel } from "../../data/integrationTemplates";
 import TemplateFlowPreview from "./TemplateFlowPreview.vue";
 const props = defineProps({
@@ -11,13 +12,22 @@ const props = defineProps({
   disabled: { type: Boolean, required: false }
 });
 const emit = defineEmits(["select"]);
+const t = useIntegrationsT();
 const NuxtLink = resolveComponent("NuxtLink");
 const full = computed(() => props.density === "full");
 const banner = computed(
   () => full.value ? props.template.images.find((i) => i.category === "banner")?.src ?? null : null
 );
-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" };
+const TRIGGER_LABEL_KEY = {
+  schedule: "integration.templates.card.trigger.schedule",
+  webhook: "integration.templates.trigger.webhook",
+  manual: "integration.templates.trigger.manual",
+  event: "integration.templates.card.trigger.event"
+};
+function triggerTypeLabel(type) {
+  const key = TRIGGER_LABEL_KEY[type];
+  return key ? t(key) : type;
+}
 function levelDot(level) {
   return level === "beginner" ? "bg-emerald-500" : level === "intermediate" ? "bg-amber-500" : "bg-rose-500";
 }
@@ -66,7 +76,7 @@ const chipSize = computed(() => full.value ? "px-2 py-0.5 text-xs" : "px-1.5 py-
       <div
         v-else
         role="status"
-        aria-label="Loading the flow"
+        :aria-label="t('integration.templates.card.state.loadingFlow')"
         class="flex h-full items-center justify-center"
       >
         <Loader2 :size="full ? 16 : 14" class="animate-spin text-muted-foreground/50" />
@@ -90,12 +100,12 @@ const chipSize = computed(() => full.value ? "px-2 py-0.5 text-xs" : "px-1.5 py-
 
       <div v-if="full" class="mt-3 flex items-center gap-2 text-xs text-muted-foreground">
         <span
-          v-for="t in template.triggerTypes"
-          :key="t"
+          v-for="triggerType in template.triggerTypes"
+          :key="triggerType"
           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 }}
+          <component :is="glyphForTrigger(triggerType)" :size="10" />
+          {{ triggerTypeLabel(triggerType) }}
         </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">

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

@@ -1,6 +1,7 @@
 <script setup>
-import { computed } from "vue";
+import { computed, onMounted } from "vue";
 import * as Lucide from "lucide-vue-next";
+import { triggerGlyph } from "../../data/triggerGlyphs";
 import { findManifest, NODE_CATEGORIES, TRIGGER_TEMPLATES } from "../../data/integrationNodeCatalog";
 import { resolveLocalized } from "../../utils/localize";
 import { describeCron } from "../../utils/schedule";
@@ -11,6 +12,11 @@ const props = defineProps({
   padding: { type: Number, required: false, default: 36 },
   showErrorBranches: { type: Boolean, required: false, default: false }
 });
+const t = useIntegrationsT();
+const { load: loadNodeCatalog } = useIntegrationsNodes();
+onMounted(() => {
+  void loadNodeCatalog();
+});
 const STOP_SLUG = "revenexx:stop-and-error";
 const NODE_W = 220;
 const NODE_H = 58;
@@ -21,22 +27,26 @@ const boxes = computed(() => {
   if (!blob) return [];
   const out = [];
   const triggers = blob.triggers ?? [];
-  triggers.forEach((t, i) => {
-    const pos = blob.triggerPositions?.[t.id] ?? { x: 40, y: 40 + i * 160 };
-    const template = TRIGGER_TEMPLATES.find((tt) => tt.type === t.type);
-    const subtitle = t.type === "schedule" && t.config?.cron ? describeCron(String(t.config.cron)) ?? String(t.config.cron) : t.type === "webhook" && t.config?.path ? String(t.config.path) : resolveLocalized(template?.description ?? "");
+  triggers.forEach((t2, i) => {
+    const pos = blob.triggerPositions?.[t2.id] ?? { x: 40, y: 40 + i * 160 };
+    const template = TRIGGER_TEMPLATES.find((tt) => tt.type === t2.type);
+    const subtitle = t2.type === "schedule" && t2.config?.cron ? describeCron(String(t2.config.cron)) ?? String(t2.config.cron) : t2.type === "webhook" && t2.config?.path ? String(t2.config.path) : resolveLocalized(template?.description ?? "");
     out.push({
-      key: `t-${t.id}`,
+      key: `t-${t2.id}`,
       kind: "trigger",
       x: pos.x,
       y: pos.y,
       w: TRIG_W,
       h: TRIG_H,
-      label: typeof t.name === "string" && t.name || t.type.charAt(0).toUpperCase() + t.type.slice(1),
+      label: typeof t2.name === "string" && t2.name || t2.type.charAt(0).toUpperCase() + t2.type.slice(1),
       subtitle,
-      type: t.type,
+      type: t2.type,
       manifest: null,
-      icon: iconFor(template?.icon ?? "Zap")
+      // The trigger's glyph from the one map, like every other trigger box. This
+      // resolved `TRIGGER_TEMPLATES`' icon name ('Zap', 'Play', …) out of Lucide
+      // instead — the same route the palette's tiles took — so the preview drew a
+      // Lucide bolt where the card it previews draws Solar's (PO-329).
+      icon: triggerGlyph(t2.type)
     });
   });
   blob.nodes.forEach((n, i) => {
@@ -161,7 +171,7 @@ const bounds = computed(() => {
         >
           <div class="flex flex-1 items-center gap-2.5 px-3 py-2">
             <span class="flex size-8 shrink-0 items-center justify-center rounded-md bg-emerald-500 text-white shadow-sm">
-              <component :is="b.icon" :size="15" :stroke-width="2.5" />
+              <component :is="b.icon" :size="15" />
             </span>
             <div class="min-w-0 flex-1">
               <div class="truncate text-sm font-semibold leading-tight text-foreground">{{ b.label }}</div>
@@ -169,7 +179,7 @@ const bounds = computed(() => {
             </div>
           </div>
           <div class="rounded-b-md border-t border-emerald-500/15 bg-emerald-500/[0.04] px-3 py-1 text-mono font-semibold text-emerald-700/80">
-            Trigger · {{ b.type }}
+            {{ t("integration.templates.preview.triggerLabel") }} · {{ b.type }}
           </div>
         </div>
 
@@ -192,7 +202,7 @@ const bounds = computed(() => {
       </foreignObject>
     </svg>
     <div v-else class="flex h-full items-center justify-center text-sm text-muted-foreground">
-      <slot name="empty">Preview loading…</slot>
+      <slot name="empty">{{ t("integration.templates.preview.state.loading") }}</slot>
     </div>
   </div>
 </template>

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

@@ -17,23 +17,24 @@ const props = defineProps({
   runBusy: { type: Boolean, required: false }
 });
 const emit = defineEmits(["action", "update:open"]);
+const t = useIntegrationsT();
 const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform ?? "");
 function formatShortcut(tokens) {
   const parts = tokens.split("+");
   const out = [];
   for (const raw of parts) {
-    const t = raw.toLowerCase();
-    if (t === "mod") out.push(isMac ? "\u2318" : "Ctrl");
-    else if (t === "shift") out.push("\u21E7");
-    else if (t === "alt") out.push(isMac ? "\u2325" : "Alt");
-    else if (t === "enter") out.push("\u21B5");
-    else if (t === "backspace") out.push("\u232B");
-    else if (t === "delete") out.push("Del");
-    else if (t === "escape") out.push("Esc");
-    else if (t === "tab") out.push("Tab");
-    else if (t === "space") out.push("Space");
-    else if (t === "f2") out.push("F2");
-    else out.push(t.toUpperCase());
+    const t2 = raw.toLowerCase();
+    if (t2 === "mod") out.push(isMac ? "\u2318" : "Ctrl");
+    else if (t2 === "shift") out.push("\u21E7");
+    else if (t2 === "alt") out.push(isMac ? "\u2325" : "Alt");
+    else if (t2 === "enter") out.push("\u21B5");
+    else if (t2 === "backspace") out.push("\u232B");
+    else if (t2 === "delete") out.push("Del");
+    else if (t2 === "escape") out.push("Esc");
+    else if (t2 === "tab") out.push("Tab");
+    else if (t2 === "space") out.push("Space");
+    else if (t2 === "f2") out.push("F2");
+    else out.push(t2.toUpperCase());
   }
   return isMac ? out.join("") : out.join("+");
 }
@@ -42,19 +43,19 @@ const sections = computed(() => {
   if (props.kind === "node") {
     return [
       [
-        { id: "open", label: "Open", shortcut: "enter" },
-        { id: "rename", label: "Rename", shortcut: "f2" }
+        { id: "open", label: t("integration.canvas.contextMenu.item.open"), shortcut: "enter" },
+        { id: "rename", label: t("integration.canvas.contextMenu.item.rename"), shortcut: "f2" }
       ],
       [
-        { id: "copy", label: "Copy", shortcut: "mod+c", disabled: props.targetIsTrigger },
-        { id: "duplicate", label: "Duplicate", shortcut: "mod+d", disabled: props.targetIsTrigger }
+        { id: "copy", label: t("integration.canvas.contextMenu.item.copy"), shortcut: "mod+c", disabled: props.targetIsTrigger },
+        { id: "duplicate", label: t("integration.canvas.contextMenu.item.duplicate"), shortcut: "mod+d", disabled: props.targetIsTrigger }
       ],
       [
-        { id: "run", label: "Run workflow", shortcut: "mod+enter", disabled: props.runBusy },
-        { id: "tidy-up", label: "Tidy up", shortcut: "shift+alt+t" }
+        { id: "run", label: t("integration.canvas.contextMenu.item.runWorkflow"), shortcut: "mod+enter", disabled: props.runBusy },
+        { id: "tidy-up", label: t("integration.canvas.contextMenu.item.tidyUp"), shortcut: "shift+alt+t" }
       ],
       [
-        { id: "delete", label: "Delete", shortcut: "backspace", danger: true }
+        { id: "delete", label: t("integration.common.action.delete"), shortcut: "backspace", danger: true }
       ]
     ];
   }
@@ -62,37 +63,37 @@ const sections = computed(() => {
     const n = props.selectionCount;
     return [
       [
-        { id: "copy", label: `Copy ${n} nodes`, shortcut: "mod+c" },
-        { id: "duplicate", label: `Duplicate ${n} nodes`, shortcut: "mod+d" }
+        { id: "copy", label: t("integration.canvas.contextMenu.item.copyNodes", n), shortcut: "mod+c" },
+        { id: "duplicate", label: t("integration.canvas.contextMenu.item.duplicateNodes", n), shortcut: "mod+d" }
       ],
       [
-        { id: "group", label: `Group ${n} nodes`, shortcut: "mod+g" },
-        { id: "tidy-up", label: "Tidy up", shortcut: "shift+alt+t" },
-        { id: "select-all", label: "Select all", shortcut: "mod+a", disabled: allSelected.value },
-        { id: "clear-selection", label: "Clear selection", shortcut: "escape" }
+        { id: "group", label: t("integration.canvas.contextMenu.item.groupNodes", n), shortcut: "mod+g" },
+        { id: "tidy-up", label: t("integration.canvas.contextMenu.item.tidyUp"), shortcut: "shift+alt+t" },
+        { id: "select-all", label: t("integration.canvas.contextMenu.item.selectAll"), shortcut: "mod+a", disabled: allSelected.value },
+        { id: "clear-selection", label: t("integration.canvas.contextMenu.item.clearSelection"), shortcut: "escape" }
       ],
       [
-        { id: "delete", label: `Delete ${n} nodes`, shortcut: "backspace", danger: true }
+        { id: "delete", label: t("integration.canvas.contextMenu.item.deleteNodes", n), shortcut: "backspace", danger: true }
       ]
     ];
   }
   return [
     [
-      { id: "add-node", label: "Add node\u2026", shortcut: "tab" },
-      { id: "add-sticky", label: "Add sticky", shortcut: "shift+s" },
-      { id: "paste", label: "Paste", shortcut: "mod+v" }
+      { id: "add-node", label: t("integration.canvas.contextMenu.item.addNode"), shortcut: "tab" },
+      { id: "add-sticky", label: t("integration.canvas.contextMenu.item.addSticky"), shortcut: "shift+s" },
+      { id: "paste", label: t("integration.canvas.contextMenu.item.paste"), shortcut: "mod+v" }
     ],
     [
-      { id: "tidy-up", label: "Tidy up", shortcut: "shift+alt+t" },
-      { id: "fit-view", label: "Fit view", shortcut: "1" }
+      { id: "tidy-up", label: t("integration.canvas.contextMenu.item.tidyUp"), shortcut: "shift+alt+t" },
+      { id: "fit-view", label: t("integration.canvas.contextMenu.item.fitView"), shortcut: "1" }
     ],
     [
-      { id: "select-all", label: "Select all", shortcut: "mod+a", disabled: allSelected.value || props.totalNodes === 0 }
+      { id: "select-all", label: t("integration.canvas.contextMenu.item.selectAll"), shortcut: "mod+a", disabled: allSelected.value || props.totalNodes === 0 }
     ]
   ];
 });
 const headerLabel = computed(
-  () => props.kind === "selection" ? `${props.selectionCount} nodes selected` : null
+  () => props.kind === "selection" ? t("integration.canvas.contextMenu.header.selectionCount", props.selectionCount) : null
 );
 function onSelect(item) {
   if (item.disabled) return;

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

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref, watch } from "vue";
-import { RefreshCircle as Loader2, MagicStick as Sparkles } from "#solar-icons";
+import { RefreshCircle as Loader2, Magnifier as Search, MagicStick as Sparkles } from "#solar-icons";
+import { triggerGlyph } from "../../data/triggerGlyphs";
 import * as Lucide from "lucide-vue-next";
 import {
   Badge,
@@ -25,14 +26,15 @@ import WorkflowIconPicker from "./WorkflowIconPicker.vue";
 import WorkflowTagsInput from "./WorkflowTagsInput.vue";
 import { resolveLocalized } from "../../utils/localize";
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const t = useIntegrationsT();
 const router = useRouter();
 const { create, workflows } = useIntegrationsWorkflows();
 const { templates, loading: templatesLoading, error: templatesError, load: loadTemplates, ensureDetails, instantiate } = useIntegrationsTemplates();
 const mode = ref("blank");
-const modeTabs = [
-  { key: "blank", label: "Start blank" },
-  { key: "template", label: "Start from template" }
-];
+const modeTabs = computed(() => [
+  { key: "blank", label: t("integration.workflows.create.tab.blank") },
+  { key: "template", label: t("integration.workflows.create.tab.template") }
+]);
 function iconFor(name2) {
   if (!name2) return Lucide.Box;
   return Lucide[name2] || Lucide.Box;
@@ -45,18 +47,18 @@ const tags = ref([]);
 const icon = ref(null);
 const tagSuggestions = computed(() => {
   const all = /* @__PURE__ */ new Set();
-  for (const wf of workflows.value) for (const t of wf.blob.tags ?? []) all.add(t);
+  for (const wf of workflows.value) for (const t2 of wf.blob.tags ?? []) all.add(t2);
   return [...all].sort();
 });
 const submitting = ref(false);
 const error = ref(null);
-const executionModes = [
-  { key: "async_only", label: "Async only", hint: "Always queued.", icon: "Inbox" },
-  { key: "sync_only", label: "Sync only", hint: "Waits for the result.", icon: "Timer" },
-  { key: "caller_decides", label: "Caller decides", hint: "The request chooses.", icon: "SlidersHorizontal" }
-];
-const selectedTrigger = computed(() => TRIGGER_TEMPLATES.find((t) => t.type === triggerType.value) ?? null);
-const selectedMode = computed(() => executionModes.find((m) => m.key === executionMode.value) ?? executionModes[0]);
+const executionModes = computed(() => [
+  { key: "async_only", label: t("integration.workflows.create.executionMode.asyncOnly.label"), hint: t("integration.workflows.create.executionMode.asyncOnly.hint"), icon: "Inbox" },
+  { key: "sync_only", label: t("integration.workflows.create.executionMode.syncOnly.label"), hint: t("integration.workflows.create.executionMode.syncOnly.hint"), icon: "Timer" },
+  { key: "caller_decides", label: t("integration.workflows.create.executionMode.callerDecides.label"), hint: t("integration.workflows.create.executionMode.callerDecides.hint"), icon: "SlidersHorizontal" }
+]);
+const selectedTrigger = computed(() => TRIGGER_TEMPLATES.find((tt) => tt.type === triggerType.value) ?? null);
+const selectedMode = computed(() => executionModes.value.find((m) => m.key === executionMode.value) ?? executionModes.value[0]);
 watch(open, (v) => {
   if (!v) return;
   mode.value = "blank";
@@ -72,13 +74,13 @@ watch(open, (v) => {
 });
 async function submit() {
   if (!name.value.trim()) {
-    error.value = "Name is required.";
+    error.value = t("integration.workflows.create.error.nameRequired");
     return;
   }
   submitting.value = true;
   error.value = null;
   try {
-    const tpl = TRIGGER_TEMPLATES.find((t) => t.type === triggerType.value);
+    const tpl = TRIGGER_TEMPLATES.find((tt) => tt.type === triggerType.value);
     const handle = globalThis.crypto?.randomUUID?.() ?? `trg-${Date.now()}`;
     const blob = {
       nodeManifestVersion: "v0-draft",
@@ -100,7 +102,7 @@ async function submit() {
     open.value = false;
     await router.push(`/integrations/workflows/${created.id}`);
   } catch (e) {
-    error.value = e.message || "Could not create the workflow.";
+    error.value = e.message || t("integration.workflows.create.error.generic");
   } finally {
     submitting.value = false;
   }
@@ -108,12 +110,12 @@ async function submit() {
 const instantiatingSlug = ref(null);
 const templateSearch = ref("");
 watch(() => templates.value.length, (n) => {
-  if (n) void ensureDetails(templates.value.map((t) => t.slug));
+  if (n) void ensureDetails(templates.value.map((tpl) => tpl.slug));
 }, { immediate: true });
 const filteredTemplates = computed(() => {
   const q = templateSearch.value.trim().toLowerCase();
   if (!q) return templates.value;
-  return templates.value.filter((t) => `${t.name} ${t.description} ${t.category}`.toLowerCase().includes(q));
+  return templates.value.filter((tpl) => `${tpl.name} ${tpl.description} ${tpl.category}`.toLowerCase().includes(q));
 });
 async function useTemplate(slug) {
   if (instantiatingSlug.value) return;
@@ -124,7 +126,7 @@ async function useTemplate(slug) {
     open.value = false;
     await router.push(`/integrations/workflows/${id}`);
   } catch (e) {
-    toast.error(e?.message ?? "Could not create the workflow from this template.");
+    toast.error(e?.message ?? t("integration.workflows.create.toast.templateError"));
   } finally {
     instantiatingSlug.value = null;
   }
@@ -135,7 +137,7 @@ async function useTemplate(slug) {
   <Dialog v-model:open="open">
     <DialogContent class="sm:max-w-4xl">
       <DialogHeader>
-        <DialogTitle>New workflow</DialogTitle>
+        <DialogTitle>{{ t("integration.workflows.create.dialog.title") }}</DialogTitle>
       </DialogHeader>
 
       <!-- Switcher: the same TabBar the studio surfaces use. -->
@@ -146,39 +148,39 @@ async function useTemplate(slug) {
       <form v-if="mode === 'blank'" class="-m-1 max-h-[65vh] space-y-3 overflow-y-auto p-1" @submit.prevent="submit">
         <!-- Two-column rows: label rail left, field right. -->
         <div class="grid grid-cols-[130px_1fr] items-center gap-x-4">
-          <Label for="wf-name">Name</Label>
-          <Input id="wf-name" v-model="name" placeholder="Sync orders nightly" class="bg-white" />
+          <Label for="wf-name">{{ t("integration.workflows.create.field.name.label") }}</Label>
+          <Input id="wf-name" v-model="name" :placeholder="t('integration.workflows.create.field.name.placeholder')" class="bg-white" />
         </div>
 
         <div class="grid grid-cols-[130px_1fr] items-start gap-x-4">
-          <Label for="wf-desc" class="pt-2.5">Description</Label>
+          <Label for="wf-desc" class="pt-2.5">{{ t("integration.workflows.create.field.description.label") }}</Label>
           <Textarea
             id="wf-desc"
             v-model="description"
             rows="2"
-            placeholder="Optional: what this workflow does and why it exists."
+            :placeholder="t('integration.workflows.create.field.description.placeholder')"
             class="bg-white"
           />
         </div>
 
         <div class="grid grid-cols-[130px_1fr] items-center gap-x-4">
-          <Label for="wf-tags">Tags</Label>
+          <Label for="wf-tags">{{ t("integration.workflows.create.field.tags.label") }}</Label>
           <WorkflowTagsInput v-model="tags" input-id="wf-tags" :suggestions="tagSuggestions" />
         </div>
 
         <div class="grid grid-cols-[130px_1fr] items-center gap-x-4">
-          <Label id="wf-icon-label">Icon</Label>
+          <Label id="wf-icon-label">{{ t("integration.workflows.create.field.icon.label") }}</Label>
           <WorkflowIconPicker v-model="icon" trigger-labelledby="wf-icon-label" />
         </div>
 
         <div class="grid grid-cols-[130px_1fr] items-center gap-x-4">
-          <Label for="wf-trigger">Trigger</Label>
+          <Label for="wf-trigger">{{ t("integration.workflows.create.field.trigger.label") }}</Label>
           <Select v-model="triggerType">
             <SelectTrigger id="wf-trigger" class="w-full bg-white">
               <SelectValue>
                 <span class="flex min-w-0 items-center gap-2">
                   <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600">
-                    <component :is="iconFor(selectedTrigger?.icon)" :size="13" />
+                    <component :is="triggerGlyph(selectedTrigger?.type)" :size="13" />
                   </span>
                   <span class="shrink-0 text-sm font-medium">{{ resolveLocalized(selectedTrigger?.name) }}</span>
                   <span class="truncate text-sm text-muted-foreground">{{ resolveLocalized(selectedTrigger?.description) }}</span>
@@ -189,7 +191,7 @@ async function useTemplate(slug) {
               <SelectItem v-for="t in TRIGGER_TEMPLATES" :key="t.id" :value="t.type">
                 <span class="flex items-center gap-2.5 py-0.5">
                   <span class="flex size-7 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600">
-                    <component :is="iconFor(t.icon)" :size="14" />
+                    <component :is="triggerGlyph(t.type)" :size="14" />
                   </span>
                   <span class="min-w-0">
                     <span class="block text-sm font-medium">{{ resolveLocalized(t.name) }}</span>
@@ -202,7 +204,7 @@ async function useTemplate(slug) {
         </div>
 
         <div class="grid grid-cols-[130px_1fr] items-center gap-x-4">
-          <Label for="wf-exec-mode">Execution mode</Label>
+          <Label for="wf-exec-mode">{{ t("integration.workflows.create.field.executionMode.label") }}</Label>
           <Select v-model="executionMode">
             <SelectTrigger id="wf-exec-mode" class="w-full bg-white">
               <SelectValue>
@@ -238,10 +240,10 @@ async function useTemplate(slug) {
         <div class="flex gap-2 pt-1">
           <Button type="submit" :disabled="submitting" class="h-8 text-sm">
             <Loader2 v-if="submitting" :size="14" class="animate-spin" />
-            {{ submitting ? "Creating\u2026" : "Create and open editor" }}
+            {{ submitting ? t("integration.workflows.create.action.submitting") : t("integration.workflows.create.action.submit") }}
           </Button>
           <Button type="button" variant="outline" class="h-8 text-sm" @click="open = false">
-            Cancel
+            {{ t("integration.common.action.cancel") }}
           </Button>
         </div>
       </form>
@@ -249,12 +251,12 @@ async function useTemplate(slug) {
       <!-- ── From template ─────────────────────────────────────────────────── -->
       <div v-else class="-m-1 max-h-[65vh] space-y-3 overflow-y-auto p-1">
         <div class="relative">
-          <Lucide.Search :size="12" class="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
+          <Search :size="12" class="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
           <input
             v-model="templateSearch"
             type="text"
-            aria-label="Search templates"
-            placeholder="Search templates…"
+            :aria-label="t('integration.workflows.create.template.search.aria')"
+            :placeholder="t('integration.workflows.create.template.search.placeholder')"
             class="h-8 w-full rounded-md border border-black/[0.08] bg-white pl-7 pr-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/40"
           >
         </div>
@@ -273,10 +275,10 @@ async function useTemplate(slug) {
           {{ templatesError }}
         </div>
         <p v-else-if="!templates.length" class="p-6 text-center text-sm text-muted-foreground">
-          No templates in the catalogue yet.
+          {{ t("integration.workflows.create.template.empty") }}
         </p>
         <p v-else-if="!filteredTemplates.length" class="p-6 text-center text-sm text-muted-foreground">
-          Nothing matches “{{ templateSearch }}”.
+          {{ t("integration.workflows.create.template.noMatch", { query: templateSearch }) }}
         </p>
 
         <div v-else class="grid gap-2.5 sm:grid-cols-2 lg:grid-cols-3">
@@ -294,10 +296,10 @@ async function useTemplate(slug) {
         <div class="flex items-center justify-between pt-1">
           <NuxtLink to="/integrations/templates" class="inline-flex items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-primary" @click="open = false">
             <Sparkles :size="13" />
-            Browse the full template catalogue
+            {{ t("integration.workflows.create.template.browseAll") }}
           </NuxtLink>
           <Button type="button" variant="outline" class="h-8 text-sm" @click="open = false">
-            Cancel
+            {{ t("integration.common.action.cancel") }}
           </Button>
         </div>
       </div>

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

@@ -8,13 +8,14 @@ const props = defineProps({
   workflow: { type: [Object, null], required: true }
 });
 const emit = defineEmits(["duplicated"]);
+const t = useIntegrationsT();
 const { duplicate } = useIntegrationsWorkflows();
 const name = ref("");
 const busy = ref(false);
 const error = ref(null);
 watch(open, (o) => {
   if (o) {
-    name.value = props.workflow ? `${props.workflow.name} (Copy)` : "";
+    name.value = props.workflow ? t("integration.workflows.duplicate.field.name.default", { name: props.workflow.name }) : "";
     error.value = null;
   }
 });
@@ -28,7 +29,7 @@ async function submit() {
     open.value = false;
     emit("duplicated", copy);
   } catch (e) {
-    error.value = e?.message || "Could not duplicate the workflow.";
+    error.value = e?.message || t("integration.workflows.duplicate.error.generic");
   } finally {
     busy.value = false;
   }
@@ -39,23 +40,23 @@ async function submit() {
   <Dialog v-model:open="open">
     <DialogContent class="sm:max-w-md">
       <DialogHeader>
-        <DialogTitle>Duplicate workflow</DialogTitle>
+        <DialogTitle>{{ t("integration.workflows.duplicate.dialog.title") }}</DialogTitle>
         <DialogDescription class="text-sm">
-          Creates a paused copy of “{{ props.workflow?.name }}” with all triggers off.
+          {{ t("integration.workflows.duplicate.dialog.description", { name: props.workflow?.name ?? "" }) }}
         </DialogDescription>
       </DialogHeader>
 
       <form class="space-y-2" @submit.prevent="submit">
-        <label class="text-sm font-medium" for="wf-duplicate-name">Name</label>
+        <label class="text-sm font-medium" for="wf-duplicate-name">{{ t("integration.workflows.duplicate.field.name.label") }}</label>
         <Input id="wf-duplicate-name" v-model="name" autofocus :disabled="busy" />
         <p v-if="error" class="text-sm text-rose-600">{{ error }}</p>
       </form>
 
       <DialogFooter>
-        <Button variant="outline" size="sm" class="h-8 text-sm" :disabled="busy" @click="open = false">Cancel</Button>
+        <Button variant="outline" size="sm" class="h-8 text-sm" :disabled="busy" @click="open = false">{{ t("integration.common.action.cancel") }}</Button>
         <Button size="sm" class="h-8 text-sm" :disabled="!canSubmit" @click="submit">
           <Loader2 v-if="busy" :size="14" class="animate-spin" />
-          Duplicate
+          {{ t("integration.workflows.action.duplicate") }}
         </Button>
       </DialogFooter>
     </DialogContent>

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

@@ -6,7 +6,8 @@ import {
   getSmoothStepPath,
   useVueFlow
 } from "@vue-flow/core";
-import { Plus, Trash2 } from "lucide-vue-next";
+import { Plus } from "lucide-vue-next";
+import { TrashBinMinimalistic as TrashBin } from "#solar-icons";
 const props = defineProps({
   id: { type: String, required: true },
   sourceNode: { type: Object, required: true },
@@ -39,6 +40,7 @@ const props = defineProps({
   targetX: { type: Number, required: true },
   targetY: { type: Number, required: true }
 });
+const t = useIntegrationsT();
 const flow = useVueFlow();
 const edgeActions = inject("workflow-edge-actions", null);
 const centerY = computed(() => {
@@ -145,7 +147,7 @@ function spliceNode() {
       <button
         type="button"
         class="flex size-5 items-center justify-center rounded text-muted-foreground transition hover:bg-muted/60 hover:text-foreground"
-        title="Insert a node into this connection"
+        :title="t('integration.canvas.edge.action.insertNode')"
         @click.stop="spliceNode"
       >
         <Plus :size="12" />
@@ -154,10 +156,10 @@ function spliceNode() {
       <button
         type="button"
         class="flex size-5 items-center justify-center rounded text-muted-foreground transition hover:bg-rose-50 hover:text-rose-600"
-        title="Delete this connection"
+        :title="t('integration.canvas.edge.action.delete')"
         @click.stop="removeEdge"
       >
-        <Trash2 :size="12" />
+        <TrashBin :size="12" />
       </button>
     </div>
   </EdgeLabelRenderer>