@revenexx/studio-integrations 0.5.1 → 0.6.0

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, reactive, ref, watch } from "vue";
+import { computed, reactive, ref, useId, watch } from "vue";
 import {
   AddCircle as Plus,
   CheckCircle as Check,
@@ -23,16 +23,14 @@ import {
   SelectValue
 } from "@revenexx/studio";
 import { toast } from "vue-sonner";
+import { REVENEXX_SOURCE_KIND_BY_SLUG } from "../../utils/revenexxCredentialSource";
+import { cockpitSources } from "../../utils/cockpitSources";
 const props = defineProps({
   type: { type: [Object, null], required: true }
 });
 const emit = defineEmits(["update:active", "apply"]);
-const KIND_BY_SLUG = {
-  "revenexx:sftp": "sftp",
-  "revenexx:smtp": "smtp",
-  "revenexx:api": "api"
-};
-const kind = computed(() => props.type ? KIND_BY_SLUG[props.type.slug] ?? null : null);
+const kind = computed(() => props.type ? REVENEXX_SOURCE_KIND_BY_SLUG[props.type.slug] ?? null : null);
+const uid = useId();
 const SWITCH_LABEL = {
   sftp: "Use revenexx SFTP Servers",
   smtp: "Use revenexx Mail Servers",
@@ -43,11 +41,18 @@ const NEW_LABEL = {
   smtp: "New mail credential",
   api: "New API key"
 };
-const { tenants, onlyTenantSlug, load: loadTenants } = useConsoleTenants();
-const { markets, activeCode, isGlobal, GLOBAL_MARKET_CODE, fetchMarkets } = useActiveMarket();
-const sftp = useConsoleSftp();
-const mail = useMailAdmin();
-const consoleKeys = useConsoleApiKeys();
+const sources = cockpitSources();
+const available = sources !== null;
+const tenants = computed(() => sources?.tenants.tenants.value ?? []);
+const onlyTenantSlug = computed(() => sources?.tenants.onlyTenantSlug.value ?? null);
+const loadTenants = () => sources?.tenants.load() ?? Promise.resolve();
+const markets = computed(() => sources?.market.markets.value ?? []);
+const activeCode = computed(() => sources?.market.activeCode.value ?? "");
+const fetchMarkets = () => sources?.market.fetchMarkets() ?? Promise.resolve();
+const GLOBAL_MARKET_CODE = sources?.market.GLOBAL_MARKET_CODE ?? "__global__";
+const sftp = sources?.sftp ?? null;
+const mail = sources?.mail ?? null;
+const consoleKeys = sources?.keys ?? null;
 const config = useRuntimeConfig();
 const sftpHost = config.public.sftpHost ?? "share.revenexx.com";
 const sftpPort = Number(config.public.sftpPort ?? 42);
@@ -67,12 +72,13 @@ watch(kind, () => {
   selectedId.value = "";
   applied.value = null;
 });
-const sftpOptions = computed(() => sftp.accounts.value.filter((a) => (a.is_active || a.status === "active") && a.login_username).map((a) => ({ value: String(a.id), label: a.login_username })));
+const sftpOptions = computed(() => (sftp?.accounts.value ?? []).filter((a) => (a.is_active || a.status === "active") && a.login_username).map((a) => ({ value: String(a.id), label: a.login_username })));
 const marketOptions = computed(() => [
   { code: GLOBAL_MARKET_CODE, label: "Global (tenant baseline)" },
   ...markets.value.map((m) => ({ code: m.code, label: `${m.name} (${m.code})` }))
 ]);
 async function ensureLists() {
+  if (!sftp || !mail) return;
   loadingList.value = true;
   try {
     await loadTenants();
@@ -98,6 +104,7 @@ function marketSlug() {
   return marketCode.value === GLOBAL_MARKET_CODE ? "" : marketCode.value;
 }
 async function applySftp() {
+  if (!sftp) return;
   const t = tenant.value;
   const acc = sftp.accounts.value.find((a) => String(a.id) === selectedId.value);
   if (!t || !acc) return;
@@ -122,9 +129,14 @@ async function applySftp() {
   }
 }
 async function applySmtp() {
+  if (!mail) return;
   applying.value = true;
   try {
     const cred = await mail.getCredential(selectedId.value);
+    if (!cred) {
+      toast.error("That mail credential is no longer there.");
+      return;
+    }
     emit("apply", {
       host: mailSmtpHost,
       port: mailSmtpPort,
@@ -165,6 +177,7 @@ function openCreate() {
 }
 const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 async function createSftp() {
+  if (!sftp) return;
   const t = tenant.value;
   if (!t) {
     toast.error("No tenant selected.");
@@ -195,9 +208,14 @@ async function createSftp() {
   }
 }
 async function createSmtp() {
+  if (!mail) return;
   creating.value = true;
   try {
     const cred = await mail.createCredential({ name: createName.value.trim() || "SMTP", type: "SMTP" });
+    if (!cred) {
+      toast.error("The mail credential was not returned \u2014 pick it from the list once it appears.");
+      return;
+    }
     emit("apply", {
       host: mailSmtpHost,
       port: mailSmtpPort,
@@ -217,6 +235,7 @@ async function createSmtp() {
   }
 }
 async function createApiKey() {
+  if (!consoleKeys) return;
   creating.value = true;
   try {
     const { secret } = await consoleKeys.create(createName.value.trim() || "Integrations key", ["*"]);
@@ -244,19 +263,37 @@ function submitCreate() {
     <div class="flex items-center justify-between gap-3">
       <div class="min-w-0">
         <div class="text-sm font-medium">{{ SWITCH_LABEL[kind] }}</div>
+        <!-- Two sentences, one per state. Saying WHERE the sources are missing is
+             the point: without it an operator in the dev studio or another host
+             reads a dead switch and cannot tell a broken feature from one that
+             belongs somewhere else. The manual fields stay on screen either way. -->
         <p class="text-xs text-muted-foreground">
-          Reuse an existing revenexx resource instead of typing access data by hand.
+          <template v-if="available">
+            Reuse an existing revenexx resource instead of typing access data by hand.
+          </template>
+          <template v-else>
+            Not available here — the managed revenexx resources live in the cockpit.
+            Enter the access data by hand instead.
+          </template>
         </p>
       </div>
-      <Switch :model-value="active" @update:model-value="(v) => active = v" />
+      <!-- Disabled rather than hidden: a control that vanishes leaves nothing to
+           read the explanation from, and the operator cannot tell whether the
+           feature exists at all. -->
+      <Switch
+        :aria-label="SWITCH_LABEL[kind]"
+        :disabled="!available"
+        :model-value="active"
+        @update:model-value="(v) => active = v"
+      />
     </div>
 
     <div v-if="active" class="mt-3 space-y-3">
       <!-- Tenant (preselected) -->
       <div class="space-y-1.5">
-        <Label>Tenant</Label>
+        <Label :for="`${uid}-tenant`">Tenant</Label>
         <Select :model-value="tenant ?? ''" @update:model-value="(v) => tenant = v">
-          <SelectTrigger class="bg-white">
+          <SelectTrigger :id="`${uid}-tenant`" class="bg-white">
             <SelectValue placeholder="Select tenant" />
           </SelectTrigger>
           <SelectContent>
@@ -269,9 +306,9 @@ function submitCreate() {
 
       <!-- Market scope — only the Revenexx API credential is market-scoped -->
       <div v-if="kind === 'api'" class="space-y-1.5">
-        <Label>Market</Label>
+        <Label :for="`${uid}-market`">Market</Label>
         <Select :model-value="marketCode" @update:model-value="(v) => marketCode = v">
-          <SelectTrigger class="bg-white">
+          <SelectTrigger :id="`${uid}-market`" class="bg-white">
             <SelectValue placeholder="Select market" />
           </SelectTrigger>
           <SelectContent>
@@ -284,10 +321,10 @@ function submitCreate() {
 
       <!-- Resource select (SFTP / Mail) -->
       <div v-if="kind === 'sftp' || kind === 'smtp'" class="space-y-1.5">
-        <Label>{{ kind === "sftp" ? "SFTP account" : "Mail credential" }}</Label>
+        <Label :for="`${uid}-resource`">{{ kind === "sftp" ? "SFTP account" : "Mail credential" }}</Label>
         <div class="flex items-center gap-2">
           <Select :model-value="selectedId" class="flex-1" @update:model-value="(v) => onSelect(v)">
-            <SelectTrigger class="bg-white">
+            <SelectTrigger :id="`${uid}-resource`" class="bg-white">
               <SelectValue :placeholder="loadingList ? 'Loading\u2026' : 'Select one'" />
             </SelectTrigger>
             <SelectContent>

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

@@ -2,17 +2,12 @@
 import { computed, ref } from "vue";
 import { Magnifier as Search } from "#solar-icons";
 import { Input } from "@revenexx/studio";
+import { resolveLocalized } from "../../utils/localize";
 const props = defineProps({
   types: { type: Array, required: true }
 });
 const emit = defineEmits(["pick"]);
 const query = ref("");
-function loc(v) {
-  if (!v) return "";
-  if (typeof v === "string") return v;
-  const o = v;
-  return o.en ?? o.de ?? Object.values(o)[0] ?? "";
-}
 function authKindLabel(k) {
   switch (k) {
     case "api-key":
@@ -33,7 +28,7 @@ function authKindLabel(k) {
 const filtered = computed(() => {
   const q = query.value.trim().toLowerCase();
   if (!q) return props.types;
-  return props.types.filter((t) => loc(t.name).toLowerCase().includes(q));
+  return props.types.filter((t) => resolveLocalized(t.name).toLowerCase().includes(q));
 });
 </script>
 
@@ -43,6 +38,7 @@ const filtered = computed(() => {
       <Search :size="15" class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
       <Input
         v-model="query"
+        aria-label="Search for an app"
         class="bg-white pl-9"
         placeholder="Search for an app…"
         autofocus
@@ -62,7 +58,7 @@ const filtered = computed(() => {
       >
         <IntegrationsCredentialLogo :type="t" :size="16" />
         <div class="min-w-0 flex-1 truncate text-sm">
-          <span class="font-medium">{{ loc(t.name) || t.slug }}</span>
+          <span class="font-medium">{{ resolveLocalized(t.name) || t.slug }}</span>
           <span class="ml-1.5 text-muted-foreground">({{ authKindLabel(t.auth_kind) }})</span>
         </div>
       </button>

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

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     modelValue: string;
+    inputId?: string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;

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

@@ -2,7 +2,8 @@
 import { computed, onMounted, ref } from "vue";
 import { Input } from "@revenexx/studio";
 const props = defineProps({
-  modelValue: { type: String, required: true }
+  modelValue: { type: String, required: true },
+  inputId: { type: String, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
 const catalog = typeof useDefinedEvents === "function" ? useDefinedEvents() : { emits: ref([]), listens: ref([]), loading: ref(false), load: async () => {
@@ -34,6 +35,7 @@ function pick(topic) {
 <template>
   <div class="relative">
     <Input
+      :id="props.inputId"
       :model-value="modelValue"
       placeholder="customer.created"
       class="h-8 text-sm bg-white font-mono"
@@ -46,7 +48,7 @@ function pick(topic) {
       class="absolute left-0 right-0 top-full z-30 mt-1 max-h-56 overflow-y-auto rounded-md border border-black/[0.08] bg-white py-1 shadow-md"
     >
       <div v-if="catalog.loading.value && !filtered.length" class="px-2.5 py-1.5 text-sm text-muted-foreground">
-        Loading event catalog…
+        Loading event catalogue…
       </div>
       <button
         v-for="o in filtered"

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

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     modelValue: string;
+    inputId?: string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;

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

@@ -10,6 +10,10 @@ type __VLS_Props = {
     placeholder?: string;
     variables?: Record<string, WorkflowVariable>;
     upstreamOutputs?: UpstreamOutput[];
+    /** Draw the editor as at fault — the field above owns the reason. */
+    invalid?: boolean;
+    /** The setting's label, so the editable region has an accessible name. */
+    label?: string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;

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

@@ -12,7 +12,9 @@ const props = defineProps({
   modelValue: { type: null, required: true },
   placeholder: { type: String, required: false },
   variables: { type: Object, required: false },
-  upstreamOutputs: { type: Array, required: false }
+  upstreamOutputs: { type: Array, required: false },
+  invalid: { type: Boolean, required: false },
+  label: { type: String, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
 const text = computed(() => String(props.modelValue ?? ""));
@@ -78,7 +80,11 @@ const editor = new Editor({
   content: textToDoc(text.value),
   editorProps: {
     // Single line: swallow Enter (paragraph splits would break the field).
-    handleKeyDown: (_view, event) => event.key === "Enter" && !event.isComposing
+    handleKeyDown: (_view, event) => event.key === "Enter" && !event.isComposing,
+    // A contenteditable region is not a text box to assistive technology
+    // unless it says so, and its label sits in a sibling element — so it would
+    // otherwise be an anonymous blob to a screen reader.
+    attributes: { role: "textbox", ...props.label ? { "aria-label": props.label } : {} }
   },
   onUpdate({ editor: ed }) {
     const json = ed.getJSON();
@@ -143,6 +149,12 @@ const sections = computed(() => {
   return out;
 });
 const hasSuggestions = computed(() => sections.value.some((s) => s.items.length > 0));
+const query = ref("");
+const filteredSections = computed(() => {
+  const q = query.value.trim().toLowerCase();
+  if (!q) return sections.value;
+  return sections.value.map((s) => ({ ...s, items: s.items.filter((i) => i.label.toLowerCase().includes(q) || i.expr.toLowerCase().includes(q)) })).filter((s) => s.items.length > 0);
+});
 const open = ref(false);
 const wrapRef = ref(null);
 function toggle() {
@@ -163,6 +175,9 @@ function onKeydown(e) {
 function onDocMousedown(e) {
   if (wrapRef.value && !wrapRef.value.contains(e.target)) open.value = false;
 }
+watch(open, (isOpen) => {
+  if (!isOpen) query.value = "";
+});
 onMounted(() => document.addEventListener("mousedown", onDocMousedown));
 onBeforeUnmount(() => document.removeEventListener("mousedown", onDocMousedown));
 function insert(expr) {
@@ -174,7 +189,10 @@ function insert(expr) {
 <template>
   <div ref="wrapRef" class="relative" @focusout="onFocusOut">
     <div class="flex items-center gap-1">
-      <div class="expr-editor relative h-8 min-w-0 flex-1 overflow-hidden rounded-md border border-black/[0.08] bg-white px-2 font-mono text-sm transition focus-within:border-black/[0.16]">
+      <div
+        class="expr-editor relative h-8 min-w-0 flex-1 overflow-hidden rounded-md border bg-white px-2 text-sm transition focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-ring"
+        :class="invalid ? 'border-rose-400' : 'border-black/[0.08]'"
+      >
         <span
           v-if="!text"
           class="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 truncate text-muted-foreground/60"
@@ -203,34 +221,45 @@ function insert(expr) {
 
     <div
       v-if="open && hasSuggestions"
-      class="absolute right-0 top-full z-50 mt-1 max-h-64 w-72 overflow-y-auto rounded-md border border-black/[0.08] bg-white py-1 text-sm shadow-lg"
+      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"
     >
-      <template v-for="section in sections" :key="section.heading">
-        <div
-          v-if="section.items.length"
-          class="px-2 pb-0.5 pt-1.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground"
-        >
-          {{ section.heading }}
-        </div>
-        <button
-          v-for="item in section.items"
-          :key="item.expr"
-          type="button"
-          class="block w-full px-2 py-1 text-left transition hover:bg-muted/50"
-          @mousedown.prevent="insert(item.expr)"
+      <div class="shrink-0 border-b border-black/[0.06] p-1">
+        <input
+          v-model="query"
+          aria-label="Filter available data"
+          placeholder="Filter…"
+          class="w-full rounded px-1.5 py-1 text-sm outline-none placeholder:text-muted-foreground/60 focus:ring-2 focus:ring-primary/40"
+          @mousedown.stop
         >
-          <div class="truncate text-muted-foreground">
-            {{ item.label }}
-          </div>
-          <div class="truncate font-mono text-emerald-700">
-            {{ item.expr }}
+      </div>
+      <div class="min-h-0 flex-1 overflow-y-auto py-1">
+        <p v-if="!filteredSections.length" class="px-2 py-1.5 text-muted-foreground">
+          Nothing matches “{{ query }}”.
+        </p>
+        <template v-for="section in filteredSections" :key="section.heading">
+          <div class="px-2 pb-0.5 pt-1.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+            {{ section.heading }}
           </div>
-        </button>
-      </template>
+          <button
+            v-for="item in section.items"
+            :key="item.expr"
+            type="button"
+            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">
+              {{ item.label }}
+            </div>
+            <div class="truncate font-mono text-emerald-700">
+              {{ item.expr }}
+            </div>
+          </button>
+        </template>
+      </div>
     </div>
   </div>
 </template>
 
 <style>
-.expr-editor .ProseMirror{align-items:center;display:flex;height:100%;outline:none;overflow-x:auto;scrollbar-width:none}.expr-editor .ProseMirror p{line-height:30px;margin:0;white-space:pre}.expr-pill{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);border-radius:6px;color:#047857;display:inline-block;font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;line-height:18px;margin:0 1px;padding:0 6px;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:baseline;white-space:nowrap}.expr-pill.ProseMirror-selectednode{outline:2px solid rgba(16,185,129,.5)}
+.expr-editor .ProseMirror{align-items:center;display:flex;height:100%;outline:none;overflow-x:auto;scrollbar-width:none}.expr-editor .ProseMirror p{line-height:30px;margin:0;white-space:pre}.expr-pill{align-items:center;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);border-radius:6px;color:#047857;display:inline-flex;font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;height:20px;line-height:1;margin:0 2px;padding:0 7px;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.expr-pill.ProseMirror-selectednode{outline:2px solid rgba(16,185,129,.5)}
 </style>

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

@@ -10,6 +10,10 @@ type __VLS_Props = {
     placeholder?: string;
     variables?: Record<string, WorkflowVariable>;
     upstreamOutputs?: UpstreamOutput[];
+    /** Draw the editor as at fault — the field above owns the reason. */
+    invalid?: boolean;
+    /** The setting's label, so the editable region has an accessible name. */
+    label?: string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;

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

@@ -3,6 +3,7 @@ import { computed, nextTick, ref } from "vue";
 import { Handle, Position, useVueFlow } from "@vue-flow/core";
 import { NodeToolbar } from "@vue-flow/node-toolbar";
 import { ChevronsDownUp, ChevronsUpDown, Trash2, Ungroup } from "lucide-vue-next";
+import { resolveDisplayName } from "../../utils/localize";
 const props = defineProps({
   id: { type: String, required: true },
   data: { type: Object, required: true },
@@ -10,20 +11,16 @@ const props = defineProps({
 });
 defineEmits(["updateNodeInternals"]);
 const GROUP_COLORS = [
-  { bg: "rgba(254,243,199,0.45)", border: "#fcd34d", chip: "#f59e0b" },
-  { bg: "rgba(255,237,213,0.45)", border: "#fdba74", chip: "#f97316" },
-  { bg: "rgba(255,228,230,0.45)", border: "#fda4af", chip: "#f43f5e" },
-  { bg: "rgba(220,252,231,0.45)", border: "#86efac", chip: "#10b981" },
-  { bg: "rgba(219,234,254,0.45)", border: "#93c5fd", chip: "#3b82f6" },
-  { bg: "rgba(237,233,254,0.45)", border: "#c4b5fd", chip: "#8b5cf6" },
-  { bg: "rgba(245,245,244,0.6)", border: "#d6d3d1", chip: "#78716c" }
+  { name: "Amber", bg: "rgba(254,243,199,0.45)", border: "#fcd34d", chip: "#f59e0b" },
+  { name: "Orange", bg: "rgba(255,237,213,0.45)", border: "#fdba74", chip: "#f97316" },
+  { name: "Rose", bg: "rgba(255,228,230,0.45)", border: "#fda4af", chip: "#f43f5e" },
+  { name: "Green", bg: "rgba(220,252,231,0.45)", border: "#86efac", chip: "#10b981" },
+  { name: "Blue", bg: "rgba(219,234,254,0.45)", border: "#93c5fd", chip: "#3b82f6" },
+  { name: "Violet", bg: "rgba(237,233,254,0.45)", border: "#c4b5fd", chip: "#8b5cf6" },
+  { name: "Gray", bg: "rgba(245,245,244,0.6)", border: "#d6d3d1", chip: "#78716c" }
 ];
 const color = computed(() => GROUP_COLORS[props.data.group.color ?? 4] ?? GROUP_COLORS[4]);
-function loc(v) {
-  if (!v) return "";
-  return typeof v === "string" ? v : v.en ?? Object.values(v)[0] ?? "";
-}
-const label = computed(() => loc(props.data.group.label) || "Group");
+const label = computed(() => resolveDisplayName(props.data.group.label) || "Group");
 const collapsed = computed(() => props.data.group.collapsed === true);
 const editable = computed(() => !!props.data.actions);
 const editing = ref(false);
@@ -99,6 +96,8 @@ function onResizeEnd() {
         class="size-4.5 rounded-full border transition hover:scale-110"
         :class="(data.group.color ?? 4) === i ? 'ring-2 ring-black/25 ring-offset-1' : ''"
         :style="{ backgroundColor: c.chip, borderColor: c.border, width: '16px', height: '16px' }"
+        :title="c.name"
+        :aria-label="c.name"
         @click="data.actions?.setColor(i)"
       />
       <div class="mx-0.5 h-4 w-px bg-black/10" />
@@ -184,6 +183,7 @@ function onResizeEnd() {
         v-if="editing"
         ref="inputEl"
         v-model="draft"
+        aria-label="Group name"
         class="nodrag w-40 rounded border border-black/[0.1] bg-white px-1 py-0.5 text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-primary/40"
         @blur="commitRename"
         @keydown.enter.prevent="commitRename"

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

@@ -5,6 +5,13 @@ const { focused } = useIntegrationsFocus();
 
 <template>
   <div class="flex h-[calc(100%-0.75rem)] mb-3 mr-3 ml-1 overflow-hidden rounded-lg border border-gray-400/10 outline-1 outline-white/30">
+    <!-- First thing in the tab order: jumps past the sidebar into the page. -->
+    <a
+      href="#integrations-main"
+      class="sr-only focus:not-sr-only focus:absolute focus:left-3 focus:top-3 focus:z-50 focus:rounded-md focus:bg-white focus:px-3 focus:py-1.5 focus:text-sm focus:font-medium focus:ring-2 focus:ring-primary/40"
+    >
+      Skip to content
+    </a>
     <div
       class="shrink-0 overflow-hidden transition-[width] duration-200 ease-out border-r border-black/[0.06] bg-white"
       :class="focused ? 'w-0 !border-r-0' : 'w-64'"
@@ -13,8 +20,20 @@ const { focused } = useIntegrationsFocus();
         <Sidebar />
       </div>
     </div>
-    <div class="flex-1 min-w-0 overflow-y-auto bg-white/40 backdrop-blur-sm">
+    <!-- `tabindex="-1"` is what makes the skip link actually skip: a <main> is
+         not focusable on its own, so the browser would move the fragment but
+         leave focus on the link — and the next Tab would walk into the sidebar
+         the user just asked to be past. It stays out of the tab order (-1, not
+         0); only the fragment and a script can put focus here — which is also
+         why it draws no focus ring: a ring around the whole page would be noise
+         on a region nobody tabs to, and the promise of a visible mark is about
+         the fields, buttons and links inside it. -->
+    <main
+      id="integrations-main"
+      tabindex="-1"
+      class="flex-1 min-w-0 overflow-y-auto bg-white/40 backdrop-blur-sm outline-none"
+    >
       <slot />
-    </div>
+    </main>
   </div>
 </template>

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

@@ -2,6 +2,7 @@
 import { computed, ref } from "vue";
 import { ChevronDown } from "lucide-vue-next";
 import { Input } from "@revenexx/studio";
+import { resolveLocalized } from "../../utils/localize";
 const props = defineProps({
   slug: { type: String, required: true },
   version: { type: String, required: true },
@@ -10,10 +11,6 @@ const props = defineProps({
   modelValue: { type: null, required: true }
 });
 const emit = defineEmits(["update:modelValue"]);
-function labelText(v) {
-  if (!v) return "";
-  return typeof v === "string" ? v : v.en ?? Object.values(v)[0] ?? "";
-}
 const search = ref("");
 const focused = ref(false);
 const q = useNodeConfigResolve({
@@ -33,14 +30,14 @@ const currentKnown = computed(
 );
 const currentLabel = computed(() => {
   const hit = options.value.find((o) => String(o.value) === currentValue.value);
-  return hit ? labelText(hit.label) || String(hit.value) : currentValue.value;
+  return hit ? resolveLocalized(hit.label) || String(hit.value) : currentValue.value;
 });
 const listOpen = computed(() => focused.value && !q.gated.value);
 const visibleOptions = computed(() => {
   const term = search.value.trim().toLowerCase();
   if (!focused.value || !term) return options.value;
   const hits = options.value.filter(
-    (o) => (labelText(o.label) || "").toLowerCase().includes(term) || String(o.value).toLowerCase().includes(term)
+    (o) => (resolveLocalized(o.label) || "").toLowerCase().includes(term) || String(o.value).toLowerCase().includes(term)
   );
   return hits.length ? hits : options.value;
 });
@@ -66,7 +63,7 @@ const visibleMultiOptions = computed(() => {
   const f = multiFilter.value.trim().toLowerCase();
   if (!f) return options.value;
   return options.value.filter(
-    (o) => (labelText(o.label) || String(o.value)).toLowerCase().includes(f) || String(o.value).toLowerCase().includes(f)
+    (o) => (resolveLocalized(o.label) || String(o.value)).toLowerCase().includes(f) || String(o.value).toLowerCase().includes(f)
   );
 });
 function toggleMulti(optValue) {
@@ -109,10 +106,11 @@ function toggleMulti(optValue) {
       <Input
         v-if="options.length > 10"
         v-model="multiFilter"
+        :aria-label="`Filter the options for ${resolveLocalized(field.label)}`"
         placeholder="Filter options"
         class="mb-1.5 h-7 bg-white text-sm"
       />
-      <div class="flex flex-wrap gap-1">
+      <div role="group" :aria-label="resolveLocalized(field.label)" class="flex flex-wrap gap-1">
         <span v-if="visibleMultiOptions.length === 0" class="text-sm text-muted-foreground">
           {{ options.length === 0 ? "no options available" : "no options match the filter" }}
         </span>
@@ -125,7 +123,7 @@ function toggleMulti(optValue) {
           :class="selectedArray.includes(String(opt.value)) ? 'bg-emerald-500/15 text-emerald-700 border-emerald-500/30' : 'bg-white text-muted-foreground hover:text-foreground'"
           @click="toggleMulti(String(opt.value))"
         >
-          {{ labelText(opt.label) || String(opt.value) }}
+          {{ resolveLocalized(opt.label) || String(opt.value) }}
         </button>
         <!-- stored values no longer offered — shown read-only so they stay visible -->
         <span
@@ -144,7 +142,8 @@ function toggleMulti(optValue) {
       <div class="relative">
         <Input
           :model-value="focused ? search : currentLabel"
-          :placeholder="labelText(field.placeholder) || 'Pick one'"
+          :aria-label="resolveLocalized(field.label)"
+          :placeholder="resolveLocalized(field.placeholder) || 'Pick one'"
           class="h-8 bg-white pr-7 text-sm"
           @update:model-value="(v) => {
   search = String(v);
@@ -168,7 +167,7 @@ function toggleMulti(optValue) {
             :class="String(opt.value) === currentValue ? 'bg-emerald-500/10 text-emerald-800' : ''"
             @mousedown.prevent="pick(String(opt.value))"
           >
-            <span class="min-w-0 truncate">{{ labelText(opt.label) || String(opt.value) }}</span>
+            <span class="min-w-0 truncate">{{ resolveLocalized(opt.label) || String(opt.value) }}</span>
           </button>
           <div v-if="!q.isFetching.value && visibleOptions.length === 0" class="px-2.5 py-1.5 text-sm text-muted-foreground">
             {{ search ? 'nothing matches "' + search + '"' : "no options available" }}

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

@@ -2,6 +2,7 @@
 import { computed } from "vue";
 import { Button } from "@revenexx/studio";
 import { IntegrationsApiError } from "../../utils/apiError";
+import { resolveLocalized } from "../../utils/localize";
 const props = defineProps({
   slug: { type: String, required: true },
   version: { type: String, required: true },
@@ -22,10 +23,6 @@ const q = useNodeConfigResolve({
   dependsOn: () => props.field.dependsOn
 });
 const resolvedFields = computed(() => q.data.value?.fields ?? []);
-function labelText(v) {
-  if (!v) return "";
-  return typeof v === "string" ? v : v.en ?? Object.values(v)[0] ?? "";
-}
 </script>
 
 <template>
@@ -67,7 +64,7 @@ function labelText(v) {
       class="space-y-3 rounded-md border border-black/[0.08] bg-muted/10 p-3 m-0"
     >
       <legend class="px-1 text-mono text-muted-foreground">
-        {{ labelText(field.label) }}
+        {{ resolveLocalized(field.label) }}
       </legend>
       <template v-for="f in resolvedFields" :key="f.key">
         <!-- collision guard: a resolved key that shadows a static config field is skipped -->

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

@@ -14,6 +14,8 @@ type __VLS_Props = {
         output: string;
         fields?: string[];
     }>;
+    /** Why the last save refused this setting, if it did. */
+    refused?: string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     set: (key: string, value: unknown) => any;