@revenexx/studio-integrations 0.5.1 → 0.7.0

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

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, reactive, ref, watch } from "vue";
-import { AddCircle as Plus, Copy, TrashBinMinimalistic as Trash2 } from "#solar-icons";
+import { AddCircle as Plus, Copy, TrashBinMinimalistic as TrashBin } from "#solar-icons";
 import {
   Button,
   Dialog,
@@ -18,11 +18,13 @@ import {
   SelectValue
 } from "@revenexx/studio";
 import { toast } from "vue-sonner";
+import { resolveDisplayName } from "../../utils/localize";
 const props = defineProps({
   open: { type: Boolean, required: true },
   variables: { type: Object, required: true }
 });
 const emit = defineEmits(["update:open", "update:variables"]);
+const t = useIntegrationsT();
 const KEY_PATTERN = /^[a-z_][a-z0-9_]*$/i;
 const TYPES = ["string", "number", "boolean", "object", "array"];
 const jsonDrafts = reactive({});
@@ -79,19 +81,17 @@ function applyJsonDraft(key, type) {
     const parsed = JSON.parse(raw);
     const ok = type === "array" ? Array.isArray(parsed) : parsed !== null && typeof parsed === "object" && !Array.isArray(parsed);
     if (!ok) {
-      jsonErrors[key] = type === "array" ? "Must be a JSON array." : "Must be a JSON object.";
+      jsonErrors[key] = type === "array" ? t("integration.workflows.variables.error.mustBeArray") : t("integration.workflows.variables.error.mustBeObject");
       return;
     }
     jsonErrors[key] = null;
     patchVar(key, { default: parsed });
   } catch {
-    jsonErrors[key] = "Not valid JSON.";
+    jsonErrors[key] = t("integration.workflows.variables.error.invalidJson");
   }
 }
 function descriptionText(v) {
-  const d = v.description;
-  if (!d) return "";
-  return typeof d === "string" ? d : d.en ?? Object.values(d)[0] ?? "";
+  return resolveDisplayName(v.description);
 }
 function writeDescription(key, text) {
   const cur = props.variables[key];
@@ -108,8 +108,8 @@ const newKey = ref("");
 const newKeyError = computed(() => {
   const k = newKey.value.trim();
   if (!k) return null;
-  if (!KEY_PATTERN.test(k)) return "Letters, digits and _ only; must not start with a digit.";
-  if (props.variables[k]) return "Key already exists.";
+  if (!KEY_PATTERN.test(k)) return t("integration.workflows.variables.error.invalidKey");
+  if (props.variables[k]) return t("integration.workflows.variables.error.keyExists");
   return null;
 });
 function addVariable() {
@@ -121,9 +121,9 @@ function addVariable() {
 async function copyUsage(key) {
   try {
     await navigator.clipboard.writeText(`\${{ vars.${key} }}`);
-    toast.success("Expression copied");
+    toast.success(t("integration.workflows.variables.toast.copied"));
   } catch {
-    toast.error("Could not copy");
+    toast.error(t("integration.workflows.variables.toast.copyFailed"));
   }
 }
 </script>
@@ -132,22 +132,24 @@ async function copyUsage(key) {
   <Dialog :open="open" @update:open="(v2) => emit('update:open', v2)">
     <DialogContent class="max-w-[94vw] sm:max-w-3xl">
       <DialogHeader>
-        <DialogTitle>Workflow variables</DialogTitle>
+        <DialogTitle>{{ t("integration.workflows.variables.dialog.title") }}</DialogTitle>
         <DialogDescription class="text-sm">
-          Reusable values for this workflow — reference them in any config field as
+          {{ t("integration.workflows.variables.dialog.description.before") }}
           <code v-pre class="rounded bg-black/[0.05] px-1 py-0.5 font-mono text-xs">${{ vars.key }}</code>.
-          Changes persist with the workflow Save.
+          {{ t("integration.workflows.variables.dialog.description.after") }}
         </DialogDescription>
       </DialogHeader>
 
       <div class="max-h-[62vh] space-y-3 overflow-y-auto pr-1">
         <p v-if="!entries.length" class="rounded-lg border border-dashed border-black/[0.12] px-4 py-6 text-center text-sm text-muted-foreground">
-          No variables yet — add the first one below.
+          {{ t("integration.workflows.variables.state.empty") }}
         </p>
 
         <div
           v-for="[key, v] in entries"
           :key="key"
+          role="group"
+          :aria-label="t('integration.workflows.variables.row.aria', { key })"
           class="rounded-lg border border-black/[0.06] bg-white p-3"
         >
           <div class="flex items-center gap-2">
@@ -155,34 +157,32 @@ async function copyUsage(key) {
             <button
               type="button"
               class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
-              :title="`Copy \${{ vars.${key} }}`"
+              :title="t('integration.workflows.variables.action.copyUsage.title', { key })"
               @click="copyUsage(key)"
             >
               <Copy :size="12" />
             </button>
             <div class="flex-1" />
-            <label class="flex items-center gap-1.5 text-sm text-muted-foreground">
-              Required
-              <Switch
-                :model-value="v.required === true"
-                @update:model-value="(val) => patchVar(key, { required: val || void 0 })"
-              />
-            </label>
             <button
               type="button"
               class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-rose-50 hover:text-rose-600"
-              title="Delete variable"
+              :title="t('integration.workflows.variables.action.delete')"
               @click="removeVar(key)"
             >
-              <Trash2 :size="13" />
+              <TrashBin :size="13" />
             </button>
           </div>
 
           <div class="mt-2 grid gap-2 sm:grid-cols-[8rem_1fr]">
+            <!-- One row per variable, so every id carries its key — otherwise
+                 the labels of the second row point at the first row's fields. -->
             <div class="space-y-1">
-              <Label class="text-mono text-muted-foreground">Type</Label>
-              <Select :model-value="v.type" @update:model-value="(t) => changeType(key, t)">
-                <SelectTrigger class="h-8 bg-white text-sm">
+              <Label :for="`var-${key}-type`" class="text-mono text-muted-foreground">{{ t("integration.workflows.variables.field.type.label") }}</Label>
+              <Select :model-value="v.type" @update:model-value="(vt) => changeType(key, vt)">
+                <!-- Both: the `id` lets the visible Label's `for` resolve, and the
+                     `aria-label` names the trigger without relying on an engine
+                     naming a button from a <label> — see the sweep's docblock. -->
+                <SelectTrigger :id="`var-${key}-type`" :aria-label="t('integration.workflows.variables.field.type.label')" class="h-8 bg-white text-sm">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
@@ -192,37 +192,49 @@ async function copyUsage(key) {
             </div>
 
             <div class="space-y-1">
-              <Label class="text-mono text-muted-foreground">
-                Default{{ v.required ? " (ignored while required)" : "" }}
-              </Label>
+              <!-- "Value", not "Default": PO-206. The `for`/`id` still name the
+                   blob field, which is called `default` and stays that way. -->
+              <Label :for="`var-${key}-default`" class="text-mono text-muted-foreground">{{ t("integration.workflows.variables.field.value.label") }}</Label>
 
+              <!-- Only one of these renders, so they share the one `id` the Label
+                   points at. The labelable ones take their name from that Label —
+                   one string, and renaming it turns the tests red instead of
+                   leaving them green against changed copy. -->
               <Input
                 v-if="v.type === 'string'"
+                :id="`var-${key}-default`"
                 :model-value="typeof v.default === 'string' ? v.default : ''"
                 class="h-8 bg-white text-sm"
                 @update:model-value="(val) => patchVar(key, { default: String(val) })"
               />
               <Input
                 v-else-if="v.type === 'number'"
+                :id="`var-${key}-default`"
                 type="number"
                 :model-value="typeof v.default === 'number' ? v.default : ''"
                 class="h-8 bg-white text-sm"
                 @update:model-value="(val) => patchVar(key, { default: val === '' ? void 0 : Number(val) })"
               />
               <div v-else-if="v.type === 'boolean'" class="flex h-8 items-center">
+                <!-- Named out loud: a Switch is a `button role="switch"`, and
+                     HTML-AAM does not name a button from a <label> — Chromium
+                     does, other engines need not. -->
                 <Switch
+                  :id="`var-${key}-default`"
                   :model-value="v.default === true"
+                  :aria-label="t('integration.workflows.variables.field.value.label')"
                   @update:model-value="(val) => patchVar(key, { default: val })"
                 />
               </div>
               <div v-else>
                 <textarea
+                  :id="`var-${key}-default`"
                   :value="jsonDrafts[key] ?? ''"
                   rows="3"
                   spellcheck="false"
                   class="w-full rounded-md border bg-white p-2 font-mono text-xs focus:outline-none focus:ring-2 focus:ring-primary/40"
                   :class="jsonErrors[key] ? 'border-rose-400' : 'border-black/[0.08]'"
-                  :placeholder="v.type === 'array' ? 'JSON array, e.g. [1, 2]' : 'JSON object, e.g. { \u2026 }'"
+                  :placeholder="v.type === 'array' ? t('integration.workflows.variables.field.value.placeholder.array') : t('integration.workflows.variables.field.value.placeholder.object')"
                   @input="(e) => jsonDrafts[key] = e.target.value"
                   @blur="applyJsonDraft(key, v.type)"
                 />
@@ -232,11 +244,12 @@ async function copyUsage(key) {
           </div>
 
           <div class="mt-2 space-y-1">
-            <Label class="text-mono text-muted-foreground">Description</Label>
+            <Label :for="`var-${key}-desc`" class="text-mono text-muted-foreground">{{ t("integration.workflows.variables.field.description.label") }}</Label>
             <Input
+              :id="`var-${key}-desc`"
               :model-value="descriptionText(v)"
               class="h-8 bg-white text-sm"
-              placeholder="What this variable is for"
+              :placeholder="t('integration.workflows.variables.field.description.placeholder')"
               @update:model-value="(val) => writeDescription(key, String(val))"
             />
           </div>
@@ -244,17 +257,18 @@ async function copyUsage(key) {
 
         <!-- Add row -->
         <div class="rounded-lg border border-dashed border-black/[0.12] p-3">
-          <Label class="text-mono text-muted-foreground">New variable</Label>
+          <Label for="var-new-key" class="text-mono text-muted-foreground">{{ t("integration.workflows.variables.field.newKey.label") }}</Label>
           <div class="mt-1 flex items-center gap-2">
             <Input
+              id="var-new-key"
               v-model="newKey"
               class="h-8 flex-1 bg-white font-mono text-sm"
-              placeholder="e.g. base_url"
+              :placeholder="t('integration.workflows.variables.field.newKey.placeholder')"
               @keydown.enter.prevent="addVariable"
             />
             <Button size="sm" class="h-8" :disabled="!newKey.trim() || !!newKeyError" @click="addVariable">
               <Plus :size="14" class="mr-1" />
-              Add
+              {{ t("integration.workflows.variables.action.add") }}
             </Button>
           </div>
           <p v-if="newKeyError" class="mt-1 text-xs text-rose-600">{{ newKeyError }}</p>

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

@@ -1,6 +1,7 @@
 <script setup>
 import { RefreshCircle as Loader2, MenuDots as MoreHorizontal } from "#solar-icons";
 import { toast } from "vue-sonner";
+import { apiValidationIssues } from "../../utils/apiError";
 import WorkflowDuplicateDialog from "./WorkflowDuplicateDialog.vue";
 import WorkflowIconView from "./WorkflowIconView.vue";
 import { Layers } from "#solar-icons";
@@ -24,6 +25,7 @@ defineProps({
   workflows: { type: Array, required: true },
   loading: { type: Boolean, required: false, default: false }
 });
+const t = useIntegrationsT();
 const router = useRouter();
 const { remove, toggleActive } = useIntegrationsWorkflows();
 const duplicateTarget = ref(null);
@@ -33,7 +35,7 @@ function askDuplicate(wf) {
   duplicateOpen.value = true;
 }
 async function onDuplicated(copy) {
-  toast.success(`Duplicated as \u201C${copy.name}\u201D`);
+  toast.success(t("integration.workflows.table.toast.duplicated", { name: copy.name }));
   await router.push(`/integrations/workflows/${copy.id}`);
 }
 const GROUP_BY_TAGS_KEY = "integrations.workflows.groupByTags";
@@ -48,7 +50,7 @@ watch(groupByTags, (on) => {
   } catch {
   }
 });
-const { runs, load: loadRuns, list: listRuns } = useIntegrationsRuns();
+const { runs, loaded: runsLoaded, load: loadRuns, list: listRuns } = useIntegrationsRuns();
 onMounted(() => {
   void loadRuns();
 });
@@ -59,15 +61,15 @@ function lastRunFor(id) {
 function runBadge(status) {
   switch (status) {
     case "succeeded":
-      return { label: "Success", class: "bg-emerald-500/15 text-emerald-700 border-emerald-500/20" };
+      return { label: t("integration.workflows.table.status.run.succeeded"), class: "bg-emerald-500/15 text-emerald-700 border-emerald-500/20" };
     case "failed":
-      return { label: "Failed", class: "bg-rose-500/15 text-rose-700 border-rose-500/20" };
+      return { label: t("integration.workflows.table.status.run.failed"), class: "bg-rose-500/15 text-rose-700 border-rose-500/20" };
     case "running":
-      return { label: "Running", class: "bg-sky-500/15 text-sky-700 border-sky-500/20" };
+      return { label: t("integration.workflows.table.status.run.running"), class: "bg-sky-500/15 text-sky-700 border-sky-500/20" };
     case "queued":
-      return { label: "Queued", class: "bg-amber-500/10 text-amber-700 border-amber-500/20" };
+      return { label: t("integration.workflows.table.status.run.queued"), class: "bg-amber-500/10 text-amber-700 border-amber-500/20" };
     case "cancelled":
-      return { label: "Cancelled", class: "bg-slate-100 text-slate-700 border-slate-200" };
+      return { label: t("integration.workflows.table.status.run.cancelled"), class: "bg-slate-100 text-slate-700 border-slate-200" };
   }
 }
 const pendingDelete = ref(null);
@@ -86,21 +88,44 @@ async function confirmDelete() {
     deleting.value = false;
   }
 }
+async function onToggleActive(wf) {
+  try {
+    await toggleActive(wf.id);
+  } catch (e) {
+    const issues = apiValidationIssues(e);
+    if (issues.length) {
+      toast.error(t("integration.workflows.table.toast.activateBlocked", issues.length, { name: wf.name }));
+      return;
+    }
+    toast.error(e?.message ?? t("integration.workflows.table.toast.statusChangeFailed"));
+  }
+}
+function lifecycleOf(wf) {
+  if (!wf.active) return "paused";
+  return wf.revision === 0 ? "draft" : "active";
+}
+function lifecycleLabel(state) {
+  return t(`integration.workflows.table.status.lifecycle.${state}`);
+}
+const LIFECYCLE_TONE = {
+  active: "bg-emerald-500/10 text-emerald-700 border-emerald-500/20",
+  draft: "bg-amber-500/10 text-amber-700 border-amber-500/20",
+  paused: "bg-slate-100 text-slate-700 border-slate-200"
+};
 function statusBadge(wf) {
-  if (!wf.active) return { label: "Paused", class: "bg-slate-100 text-slate-700 border-slate-200" };
-  if (wf.revision === 0) return { label: "Draft", class: "bg-amber-500/10 text-amber-700 border-amber-500/20" };
-  return { label: "Active", class: "bg-emerald-500/10 text-emerald-700 border-emerald-500/20" };
+  const state = lifecycleOf(wf);
+  return { label: lifecycleLabel(state), class: LIFECYCLE_TONE[state] };
 }
 function buildState(wf) {
   switch (wf.buildStatus) {
     case "building":
-      return { label: "Building\u2026", class: "bg-sky-500/15 text-sky-700 border-sky-500/20" };
+      return { label: t("integration.workflows.table.status.build.building"), class: "bg-sky-500/15 text-sky-700 border-sky-500/20" };
     case "pending":
-      return { label: "Pending", class: "bg-amber-500/10 text-amber-700 border-amber-500/20" };
+      return { label: t("integration.workflows.table.status.build.pending"), class: "bg-amber-500/10 text-amber-700 border-amber-500/20" };
     case "failed":
-      return { label: "Failed", class: "bg-rose-500/15 text-rose-700 border-rose-500/20" };
+      return { label: t("integration.workflows.table.status.build.failed"), class: "bg-rose-500/15 text-rose-700 border-rose-500/20" };
     case "ready":
-      return { label: "Ready", class: "bg-emerald-500/10 text-emerald-700 border-emerald-500/20" };
+      return { label: t("integration.workflows.table.status.build.ready"), class: "bg-emerald-500/10 text-emerald-700 border-emerald-500/20" };
     default:
       return { label: "\u2014", class: "bg-slate-100 text-slate-700 border-slate-200" };
   }
@@ -108,11 +133,11 @@ function buildState(wf) {
 function modeLabel(m) {
   switch (m) {
     case "sync_only":
-      return "sync";
+      return t("integration.workflows.table.mode.sync");
     case "caller_decides":
-      return "caller";
+      return t("integration.workflows.table.mode.caller");
     case "async_only":
-      return "async";
+      return t("integration.workflows.table.mode.async");
     default:
       return "\u2014";
   }
@@ -130,45 +155,71 @@ function formatDateTime(iso) {
     return iso;
   }
 }
-const columns = [
+const LIFECYCLE = ["active", "draft", "paused"];
+const BUILD_STATES = ["pending", "building", "ready", "failed"];
+const MODES = ["async_only", "sync_only", "caller_decides"];
+const filterTabs = computed(() => [
+  {
+    key: "status",
+    label: t("integration.workflows.table.column.status"),
+    getter: (wf) => lifecycleOf(wf),
+    options: LIFECYCLE.map((v) => ({ value: v, label: lifecycleLabel(v) }))
+  },
+  {
+    key: "build",
+    label: t("integration.workflows.table.column.build"),
+    getter: (wf) => wf.buildStatus ?? "",
+    options: BUILD_STATES.map((v) => ({
+      value: v,
+      label: t(`integration.workflows.table.status.build.${v}`)
+    }))
+  },
+  {
+    key: "mode",
+    label: t("integration.workflows.table.column.mode"),
+    getter: (wf) => wf.execution_mode ?? "",
+    options: MODES.map((v) => ({ value: v, label: modeLabel(v) }))
+  }
+]);
+const columns = computed(() => [
   {
     key: "name",
-    label: "Name",
+    label: t("integration.workflows.table.column.name"),
     sortable: true,
     sortGetter: (w) => w.name.toLowerCase(),
     searchGetter: (w) => `${w.name} ${w.description ?? ""} ${(w.blob.tags ?? []).join(" ")}`
   },
   {
     key: "status",
-    label: "Status",
+    label: t("integration.workflows.table.column.status"),
     width: "100px",
     sortable: true,
-    sortGetter: (w) => w.active ? w.revision === 0 ? "draft" : "active" : "paused"
+    sortGetter: (w) => lifecycleOf(w)
   },
   {
     key: "build",
-    label: "Build",
+    label: t("integration.workflows.table.column.build"),
     width: "120px",
     sortable: true,
     sortGetter: (w) => w.buildStatus ?? ""
   },
   {
     key: "mode",
-    label: "Mode",
+    label: t("integration.workflows.table.column.mode"),
     width: "120px",
     sortable: true,
     sortGetter: (w) => w.execution_mode ?? ""
   },
   {
     key: "triggers",
-    label: "Triggers",
+    label: t("integration.workflows.table.column.triggers"),
     width: "140px",
     sortable: true,
-    sortGetter: (w) => w.blob.triggers.map((t) => t.type).join(",")
+    sortGetter: (w) => w.blob.triggers.map((tr) => tr.type).join(",")
   },
   {
     key: "lastRun",
-    label: "Last run",
+    label: t("integration.workflows.table.column.lastRun"),
     // Wide enough for badge + full timestamp — the flexible Name column has
     // the slack to give; a truncated "18. Juli, 1…" helps nobody.
     width: "210px",
@@ -177,7 +228,7 @@ const columns = [
   },
   {
     key: "updated",
-    label: "Updated",
+    label: t("integration.workflows.table.column.updated"),
     width: "120px",
     sortable: true,
     sortGetter: (w) => w.updated_at ?? ""
@@ -188,21 +239,21 @@ const columns = [
     width: "40px",
     toggleable: false
   }
-];
+]);
 </script>
 
 <template>
   <DataTable
     :data="workflows"
     :group-by="groupByTags ? (w) => w.blob.tags ?? [] : null"
-    group-empty-label="No tags"
+    :group-empty-label="t('integration.workflows.table.group.noTags')"
     :columns="columns"
     :row-key="(wf2) => wf2.id"
     :default-sort="{ column: 'updated', direction: 'desc' }"
-    :search="{ placeholder: 'Search workflows\u2026' }"
-    :filter="true"
+    :search="{ placeholder: t('integration.workflows.table.search.placeholder') }"
+    :filter-tabs="filterTabs"
     :loading="loading"
-    empty-text="No workflows yet."
+    :empty-text="t('integration.workflows.table.state.empty')"
     @row-click="(wf2) => router.push(`/integrations/workflows/${wf2.id}`)"
   >
     <template #toolbar-left>
@@ -214,7 +265,7 @@ const columns = [
         @click="groupByTags = !groupByTags"
       >
         <Layers :size="13" />
-        Group by tags
+        {{ t("integration.workflows.table.action.groupByTags") }}
       </Button>
     </template>
 
@@ -238,14 +289,28 @@ const columns = [
       </div>
     </template>
 
+    <!-- The badge word alone ("Paused", "Failed") also matches a column header
+         and the neighbouring column's own words, so each badge carries its
+         workflow's name — the rows are plain divs with nothing else to tie a
+         value to the workflow it belongs to. -->
     <template #cell-status="{ row: wf }">
-      <Badge variant="outline" :class="['border text-xs font-medium uppercase', statusBadge(wf).class]">
+      <Badge
+        variant="outline"
+        :class="['border text-xs font-medium uppercase', statusBadge(wf).class]"
+        :aria-label="`${wf.name}: ${statusBadge(wf).label}`"
+      >
         {{ statusBadge(wf).label }}
       </Badge>
     </template>
 
+    <!-- A response without a build state renders `—`; naming that would announce
+         "<name> build: —", which claims nothing in more words. No state, no name. -->
     <template #cell-build="{ row: wf }">
-      <Badge variant="outline" :class="['border text-xs font-medium uppercase', buildState(wf).class]">
+      <Badge
+        variant="outline"
+        :class="['border text-xs font-medium uppercase', buildState(wf).class]"
+        :aria-label="wf.buildStatus ? `${wf.name} build: ${buildState(wf).label}` : void 0"
+      >
         {{ buildState(wf).label }}
       </Badge>
     </template>
@@ -273,14 +338,25 @@ const columns = [
 
     <template #cell-lastRun="{ row: wf }">
       <div v-if="lastRunFor(wf.id)" class="flex items-center gap-2 min-w-0">
-        <Badge variant="outline" :class="['border text-xs font-medium uppercase shrink-0', runBadge(lastRunFor(wf.id).status).class]">
+        <Badge
+          variant="outline"
+          :class="['border text-xs font-medium uppercase shrink-0', runBadge(lastRunFor(wf.id).status).class]"
+          :aria-label="`${wf.name} last run: ${runBadge(lastRunFor(wf.id).status).label}`"
+        >
           {{ runBadge(lastRunFor(wf.id).status).label }}
         </Badge>
         <span class="text-sm tabular-nums text-muted-foreground truncate">
           {{ formatDateTime(lastRunFor(wf.id).startedAt) }}
         </span>
       </div>
-      <span v-else class="text-sm text-muted-foreground">—</span>
+      <!-- Runs arrive after the rows do, so until they are in, "never run" is
+           not known — the bare `—` says nothing, and that is the honest answer.
+           The name is only claimed once there is something to claim it from. -->
+      <span
+        v-else
+        class="text-sm text-muted-foreground"
+        :aria-label="runsLoaded ? t('integration.workflows.table.lastRun.aria.never', { name: wf.name }) : void 0"
+      >—</span>
     </template>
 
     <template #cell-updated="{ row: wf }">
@@ -293,28 +369,30 @@ const columns = [
       <div @click.stop>
         <DropdownMenu>
           <DropdownMenuTrigger as-child>
-            <Button variant="ghost" size="icon" class="size-7">
+            <!-- Icon-only, so it needs a name of its own — the rows are plain
+                 divs, which leaves nothing else to address this button by. -->
+            <Button variant="ghost" size="icon" class="size-7" :aria-label="t('integration.workflows.table.menu.actions.aria', { name: wf.name })">
               <MoreHorizontal :size="14" />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
-            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuLabel>{{ t("integration.workflows.table.menu.actions.label") }}</DropdownMenuLabel>
             <DropdownMenuSeparator />
             <DropdownMenuItem @select="router.push(`/integrations/workflows/${wf.id}`)">
-              Open editor
+              {{ t("integration.workflows.table.menu.action.openEditor") }}
             </DropdownMenuItem>
             <DropdownMenuItem @select="askDuplicate(wf)">
-              Duplicate
+              {{ t("integration.workflows.action.duplicate") }}
             </DropdownMenuItem>
-            <DropdownMenuItem @select="toggleActive(wf.id)">
-              {{ wf.active ? "Pause" : "Activate" }}
+            <DropdownMenuItem @select="onToggleActive(wf)">
+              {{ wf.active ? t("integration.workflows.table.menu.action.pause") : t("integration.workflows.table.menu.action.activate") }}
             </DropdownMenuItem>
             <DropdownMenuSeparator />
             <DropdownMenuItem
               class="text-destructive focus:text-destructive"
               @select="askDelete(wf)"
             >
-              Delete
+              {{ t("integration.common.action.delete") }}
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
@@ -327,21 +405,21 @@ const columns = [
 }">
     <AlertDialogContent>
       <AlertDialogHeader>
-        <AlertDialogTitle>Delete workflow?</AlertDialogTitle>
+        <AlertDialogTitle>{{ t("integration.workflows.table.deleteDialog.title") }}</AlertDialogTitle>
         <AlertDialogDescription>
           <span v-if="pendingDelete">
             <span class="font-medium text-foreground">{{ pendingDelete.name }}</span>
-            and all its revision history will be permanently deleted.
+            {{ t("integration.workflows.table.deleteDialog.description") }}
           </span>
         </AlertDialogDescription>
       </AlertDialogHeader>
       <AlertDialogFooter>
         <Button variant="outline" :disabled="deleting" @click="pendingDelete = null">
-          Cancel
+          {{ t("integration.common.action.cancel") }}
         </Button>
         <Button class="bg-destructive text-white hover:bg-destructive/90" :disabled="deleting" @click="confirmDelete">
           <Loader2 v-if="deleting" :size="14" class="animate-spin" />
-          {{ deleting ? "Deleting\u2026" : "Delete" }}
+          {{ deleting ? t("integration.workflows.table.deleteDialog.action.deleting") : t("integration.common.action.delete") }}
         </Button>
       </AlertDialogFooter>
     </AlertDialogContent>

package/dist/runtime/composables/integrationsApi.js

@@ -1,15 +1,17 @@
 import { computed } from "vue";
 import { IntegrationsApiError } from "../utils/apiError.js";
+import { useIntegrationsT } from "./useIntegrationsT.js";
 export function useIntegrationsApi() {
   const config = useRuntimeConfig();
   const { getToken } = usePlatformAuth();
   const { slug: onlyTenantSlug, load: loadTenants } = usePlatformTenant();
+  const t = useIntegrationsT();
   const baseUrl = computed(
     () => config.public.integrationsApi ?? "https://integrations.revenexx.com/api/v1"
   );
   async function buildHeaders(extra = {}) {
     const token = await getToken();
-    if (!token) throw new IntegrationsApiError(401, null, "Not signed in.");
+    if (!token) throw new IntegrationsApiError(401, null, t("integration.common.error.notSignedIn"));
     if (!onlyTenantSlug.value) await loadTenants();
     const headers = {
       Accept: "application/json",
@@ -34,7 +36,7 @@ export function useIntegrationsApi() {
     } catch (err) {
       const fe = err;
       const data = fe?.response?._data;
-      const detail = data?.message ?? fe?.message ?? "Integrations request failed";
+      const detail = data?.message ?? fe?.message ?? t("integration.common.error.requestFailed");
       throw new IntegrationsApiError(fe?.response?.status ?? 0, data, detail);
     }
   }