@revenexx/studio-integrations 0.5.1 → 0.7.0

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

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, onMounted, ref, watch } from "vue";
-import { AddCircle as Plus, TrashBinMinimalistic as Trash2 } from "#solar-icons";
+import { AddCircle as Plus, TrashBinMinimalistic as TrashBin } from "#solar-icons";
 import {
   Button,
   Input,
@@ -8,11 +8,14 @@ import {
   Select,
   SelectContent,
   SelectItem,
+  SelectSeparator,
   SelectTrigger,
   SelectValue,
   Switch,
   Textarea
 } from "@revenexx/studio";
+import { resolveLocalized } from "../../utils/localize";
+import { credentialState } from "../../utils/credentialState";
 const props = defineProps({
   field: { type: Object, required: true },
   config: { type: Object, required: true },
@@ -22,45 +25,43 @@ const props = defineProps({
   staticKeys: { type: Array, required: false },
   depth: { type: Number, required: false },
   variables: { type: Object, required: false },
-  upstreamOutputs: { type: Array, required: false }
+  upstreamOutputs: { type: Array, required: false },
+  refused: { type: String, required: false }
 });
 const emit = defineEmits(["set"]);
+const t = useIntegrationsT();
 const value = computed(() => props.config[props.field.key]);
 function write(v) {
   emit("set", props.field.key, v);
 }
-function labelText(v) {
-  if (!v) return "";
-  return typeof v === "string" ? v : v.en ?? Object.values(v)[0] ?? "";
-}
 const exprHint = "${{ \u2026 }}";
-const descriptionText = computed(() => labelText(props.field.description));
+const descriptionText = computed(() => resolveLocalized(props.field.description));
 function isEmpty(v) {
   return v === void 0 || v === null || v === "" || Array.isArray(v) && v.length === 0;
 }
-const requiredMissing = computed(() => !!props.field.required && isEmpty(value.value));
 const formatError = computed(() => {
   const v = value.value;
   if (isEmpty(v)) return null;
   const val = props.field.validation;
   if (!val) return null;
   if (typeof v === "string") {
-    if (val.minLength != null && v.length < val.minLength) return `Must be at least ${val.minLength} characters`;
-    if (val.maxLength != null && v.length > val.maxLength) return `Must be at most ${val.maxLength} characters`;
+    if (val.minLength != null && v.length < val.minLength) return t("integration.nodeConfig.validation.minLength", { min: val.minLength });
+    if (val.maxLength != null && v.length > val.maxLength) return t("integration.nodeConfig.validation.maxLength", { max: val.maxLength });
     if (val.pattern) {
       try {
-        if (!new RegExp(val.pattern).test(v)) return "Does not match the required format";
+        if (!new RegExp(val.pattern).test(v)) return t("integration.nodeConfig.validation.pattern");
       } catch {
       }
     }
   }
   if (typeof v === "number") {
-    if (val.min != null && v < val.min) return `Must be \u2265 ${val.min}`;
-    if (val.max != null && v > val.max) return `Must be \u2264 ${val.max}`;
+    if (val.min != null && v < val.min) return t("integration.nodeConfig.validation.min", { min: val.min });
+    if (val.max != null && v > val.max) return t("integration.nodeConfig.validation.max", { max: val.max });
   }
   return null;
 });
-const invalid = computed(() => !!formatError.value);
+const fieldError = computed(() => formatError.value ?? props.refused ?? null);
+const invalid = computed(() => !!fieldError.value);
 const constraintHint = computed(() => {
   const val = props.field.validation;
   if (!val) return "";
@@ -69,13 +70,13 @@ const constraintHint = computed(() => {
     if (val.min != null) return `\u2265 ${val.min}`;
     if (val.max != null) return `\u2264 ${val.max}`;
   } else {
-    if (val.minLength != null && val.maxLength != null) return `${val.minLength}\u2013${val.maxLength} characters`;
-    if (val.minLength != null) return `at least ${val.minLength} characters`;
-    if (val.maxLength != null) return `up to ${val.maxLength} characters`;
+    if (val.minLength != null && val.maxLength != null) return t("integration.nodeConfig.hint.charRange", { min: val.minLength, max: val.maxLength });
+    if (val.minLength != null) return t("integration.nodeConfig.hint.charMin", { min: val.minLength });
+    if (val.maxLength != null) return t("integration.nodeConfig.hint.charMax", { max: val.maxLength });
   }
   return "";
 });
-const { credentials, load: loadCredentials } = useIntegrationsCredentials();
+const { credentials, loaded: credentialsLoaded, load: loadCredentials } = useIntegrationsCredentials();
 onMounted(() => {
   void loadCredentials();
 });
@@ -95,14 +96,39 @@ function credsForField(field) {
   }
   return list;
 }
-function credNeedsReauth(id) {
-  return credentials.value.some((c) => c.id === id && c.status === "needs_reauth");
+const bound = computed(() => {
+  const id = value.value;
+  const c = typeof id === "string" && id ? credentials.value.find((x) => x.id === id) : void 0;
+  return c ? { credential: c, state: credentialState(c) } : null;
+});
+const credOptions = computed(
+  () => credsForField(props.field).map((c) => ({ credential: c, state: credentialState(c) }))
+);
+const UNKNOWN_CREDENTIAL = computed(() => t("integration.nodeConfig.credential.unknown"));
+function credTriggerLabel(field) {
+  const label = resolveLocalized(field.label);
+  if (bound.value) return t("integration.nodeConfig.credential.trigger.bound", { label, name: bound.value.credential.name, state: bound.value.state.label });
+  if (value.value && credentialsLoaded.value) return t("integration.nodeConfig.credential.trigger.unknown", { label, unknown: UNKNOWN_CREDENTIAL.value });
+  return label;
 }
 const credCreateOpen = ref(false);
 const sftpImportOpen = ref(false);
+const CRED_ACTION_NEW = "__action_new_credential__";
+const CRED_ACTION_SFTP = "__action_import_sftp__";
+function onCredentialSelect(v) {
+  if (v === CRED_ACTION_NEW) {
+    credCreateOpen.value = true;
+    return;
+  }
+  if (v === CRED_ACTION_SFTP) {
+    sftpImportOpen.value = true;
+    return;
+  }
+  write(v);
+}
 function acceptsSftp(field) {
-  const t = field.credentialType;
-  return t === "revenexx:sftp" || Array.isArray(t) && t.includes("revenexx:sftp");
+  const t2 = field.credentialType;
+  return t2 === "revenexx:sftp" || Array.isArray(t2) && t2.includes("revenexx:sftp");
 }
 const EXPR_TOKEN = "${{";
 const canToggleExpression = computed(
@@ -206,7 +232,7 @@ function writeJson(text) {
     jsonError.value = null;
     emit("set", props.field.key, parsed);
   } catch {
-    jsonError.value = "Not valid JSON yet \u2014 the value is kept once it parses.";
+    jsonError.value = t("integration.nodeConfig.json.invalid");
   }
 }
 function readArray() {
@@ -230,29 +256,39 @@ function setArrayItemField(index, fieldKey, v) {
 <template>
   <div class="space-y-1.5">
     <div class="flex items-center justify-between gap-2">
-      <Label class="text-mono text-muted-foreground">
-        {{ labelText(field.label) }}<span v-if="field.required" class="text-rose-500" title="Required"> *</span>
+      <!-- The label carries the fault as well as the control does. Only a few
+           of the widget types below are a bare input that can take a red
+           border, so a credential picker or a switch at fault would otherwise
+           be marked only by the sentence underneath.
+
+           No `for`: which control this heads depends on the field's type — one
+           of a dozen branches, some of them a group rather than a single
+           element. Each branch instead carries the same text as its own name,
+           without the required marker, which is a state and not part of a
+           name. -->
+      <Label class="text-mono" :class="invalid ? 'text-rose-600' : 'text-muted-foreground'">
+        {{ resolveLocalized(field.label) }}<span v-if="field.required" class="text-rose-500" :title="t('integration.nodeConfig.field.requiredMark')"> *</span>
       </Label>
       <div class="flex shrink-0 items-center gap-1.5">
         <div v-if="isObjectField && !showExpression" class="flex items-center rounded border border-black/[0.08] bg-white p-px">
           <button
             type="button"
             :disabled="!flatCapable"
-            title="Edit as key/value rows"
+            :title="t('integration.nodeConfig.object.toggle.fieldsTitle')"
             class="rounded px-1 py-px text-[10px] font-medium transition disabled:pointer-events-none disabled:opacity-40"
             :class="objectMode === 'form' ? 'bg-slate-100 text-foreground' : 'text-muted-foreground hover:text-foreground'"
             @click="objectMode = 'form'"
           >
-            Fields
+            {{ t("integration.nodeConfig.object.toggle.fields") }}
           </button>
           <button
             type="button"
-            title="Edit as raw JSON"
+            :title="t('integration.nodeConfig.object.toggle.jsonTitle')"
             class="rounded px-1 py-px text-[10px] font-medium transition"
             :class="objectMode === 'json' ? 'bg-slate-100 text-foreground' : 'text-muted-foreground hover:text-foreground'"
             @click="objectMode = 'json'"
           >
-            JSON
+            {{ t("integration.nodeConfig.object.toggle.json") }}
           </button>
         </div>
         <button
@@ -260,7 +296,7 @@ function setArrayItemField(index, fieldKey, v) {
           type="button"
           class="rounded border px-1 py-0.5 font-mono text-[10px] transition"
           :class="showExpression ? 'border-emerald-500/40 bg-emerald-500/15 text-emerald-700' : 'border-black/[0.08] bg-white text-muted-foreground hover:text-foreground'"
-          :title="showExpression ? 'Back to the regular control (clears the expression)' : 'Map this value from a previous step instead'"
+          :title="showExpression ? t('integration.nodeConfig.expression.toggle.off') : t('integration.nodeConfig.expression.toggle.on')"
           @click="toggleExpression"
         >
           {{ exprHint }}
@@ -268,17 +304,12 @@ function setArrayItemField(index, fieldKey, v) {
         <span
           v-else-if="field.expressionAllowed"
           class="rounded border border-emerald-500/25 bg-emerald-500/10 px-1 py-0.5 font-mono text-[10px] text-emerald-600"
-          title="Accepts ${{ … }} expressions"
+          :title="t('integration.nodeConfig.expression.badge.title')"
         >
           {{ exprHint }}
         </span>
       </div>
     </div>
-    <!-- inline help (boolean uses its description as the toggle label instead) -->
-    <p v-if="descriptionText && field.type !== 'boolean'" class="text-sm text-muted-foreground leading-snug">
-      {{ descriptionText }}
-    </p>
-
     <!-- object / plain-array fields: JSON editor (expressions stay usable
          inside string values). Wins over expressionAllowed — an object value
          in a text input would render as [object Object]. -->
@@ -291,11 +322,12 @@ function setArrayItemField(index, fieldKey, v) {
 
     <template v-else-if="isJsonField">
       <Textarea
+        :aria-label="resolveLocalized(field.label)"
         :model-value="jsonDraft"
         :rows="8"
         spellcheck="false"
-        class="font-mono text-xs"
-        :placeholder="labelText(field.placeholder) || '{ }'"
+        class="rounded-md border border-black/[0.08] ring-0 shadow-none bg-white font-mono text-xs"
+        :placeholder="resolveLocalized(field.placeholder) || '{ }'"
         @update:model-value="(v) => writeJson(String(v))"
       />
       <p v-if="jsonError" class="text-sm text-amber-600">{{ jsonError }}</p>
@@ -304,24 +336,29 @@ function setArrayItemField(index, fieldKey, v) {
     <!-- object field in key/value mode -->
     <div v-else-if="isObjectField && objectMode === 'form'" class="space-y-1.5">
       <div v-for="(row, idx) in kvRows" :key="idx" class="flex items-center gap-1.5">
+        <!-- A repeating row has no room for visible labels, so each control
+             names itself and says which row of which field it belongs to. -->
         <Input
+          :aria-label="t('integration.nodeConfig.object.row.keyAria', { label: resolveLocalized(field.label), n: idx + 1 })"
           :model-value="row.key"
-          placeholder="key"
-          class="h-7 w-[38%] bg-white font-mono text-sm"
+          :placeholder="t('integration.nodeConfig.object.row.keyPlaceholder')"
+          class="h-7 w-[38%] rounded-md border border-black/[0.08] ring-0 shadow-none bg-white text-sm"
           @update:model-value="(v) => setKvRow(idx, { key: String(v) })"
         />
         <Input
+          :aria-label="t('integration.nodeConfig.object.row.valueAria', { label: resolveLocalized(field.label), n: idx + 1 })"
           :model-value="row.value"
-          placeholder="value"
-          class="h-7 min-w-0 flex-1 bg-white text-sm"
+          :placeholder="t('integration.nodeConfig.object.row.valuePlaceholder')"
+          class="h-7 min-w-0 flex-1 rounded-md border border-black/[0.08] ring-0 shadow-none bg-white text-sm"
           @update:model-value="(v) => setKvRow(idx, { value: String(v) })"
         />
         <button
           type="button"
+          :aria-label="t('integration.nodeConfig.object.row.removeAria', { label: resolveLocalized(field.label), n: idx + 1 })"
           class="flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground transition hover:text-rose-600"
           @click="removeKvRow(idx)"
         >
-          <Trash2 :size="11" />
+          <TrashBin :size="11" />
         </button>
       </div>
       <Button
@@ -332,7 +369,7 @@ function setArrayItemField(index, fieldKey, v) {
         @click="addKvRow"
       >
         <Plus :size="11" />
-        Add row
+        {{ t("integration.nodeConfig.action.addRow") }}
       </Button>
     </div>
 
@@ -340,9 +377,11 @@ function setArrayItemField(index, fieldKey, v) {
     <IntegrationsExpressionInput
       v-else-if="showExpression"
       :model-value="typeof value === 'string' ? value : ''"
-      :placeholder="labelText(field.placeholder)"
+      :placeholder="resolveLocalized(field.placeholder)"
       :variables="variables"
       :upstream-outputs="upstreamOutputs"
+      :invalid="invalid"
+      :label="resolveLocalized(field.label)"
       @update:model-value="(v) => write(v)"
     />
 
@@ -363,18 +402,21 @@ function setArrayItemField(index, fieldKey, v) {
     <IntegrationsExpressionInput
       v-else-if="field.type === 'expression' || field.expressionAllowed"
       :model-value="value"
-      :placeholder="labelText(field.placeholder)"
+      :placeholder="resolveLocalized(field.placeholder)"
       :variables="variables"
       :upstream-outputs="upstreamOutputs"
+      :invalid="invalid"
+      :label="resolveLocalized(field.label)"
       @update:model-value="(v) => write(v)"
     />
 
     <!-- plain string (no expressions) -->
     <Input
       v-else-if="field.type === 'string'"
+      :aria-label="resolveLocalized(field.label)"
       :model-value="value ?? ''"
-      :placeholder="labelText(field.placeholder)"
-      class="h-8 text-sm bg-white"
+      :placeholder="resolveLocalized(field.placeholder)"
+      class="h-8 rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white"
       :class="invalid ? 'border-rose-400 focus-visible:ring-rose-400/40' : ''"
       @update:model-value="(v) => write(v)"
     />
@@ -382,9 +424,10 @@ function setArrayItemField(index, fieldKey, v) {
     <!-- number -->
     <Input
       v-else-if="field.type === 'number'"
+      :aria-label="resolveLocalized(field.label)"
       type="number"
       :model-value="value ?? ''"
-      class="h-8 text-sm bg-white"
+      class="h-8 rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white"
       :class="invalid ? 'border-rose-400 focus-visible:ring-rose-400/40' : ''"
       @update:model-value="(v) => write(v === '' ? null : Number(v))"
     />
@@ -392,11 +435,13 @@ function setArrayItemField(index, fieldKey, v) {
     <!-- boolean -->
     <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2 pt-1">
       <Switch
+        :aria-label="resolveLocalized(field.label)"
+        class="data-[state=unchecked]:bg-slate-300"
         :model-value="Boolean(value)"
         @update:model-value="(v) => write(v)"
       />
       <span class="text-sm text-muted-foreground">
-        {{ labelText(field.description) }}
+        {{ resolveLocalized(field.description) }}
       </span>
     </div>
 
@@ -419,18 +464,18 @@ function setArrayItemField(index, fieldKey, v) {
       :model-value="value ?? ''"
       @update:model-value="(v) => write(v)"
     >
-      <SelectTrigger class="h-8 text-sm bg-white">
-        <SelectValue :placeholder="labelText(field.placeholder) || 'Pick one'" />
+      <SelectTrigger :aria-label="resolveLocalized(field.label)" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
+        <SelectValue :placeholder="resolveLocalized(field.placeholder) || t('integration.nodeConfig.select.placeholder')" />
       </SelectTrigger>
       <SelectContent>
         <SelectItem v-for="opt in field.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
-          {{ labelText(opt.label) }}
+          {{ resolveLocalized(opt.label) }}
         </SelectItem>
       </SelectContent>
     </Select>
 
     <!-- multiselect — pill toggles for now -->
-    <div v-else-if="field.type === 'multiselect'" class="flex flex-wrap gap-1">
+    <div v-else-if="field.type === 'multiselect'" role="group" :aria-label="resolveLocalized(field.label)" class="flex flex-wrap gap-1">
       <button
         v-for="opt in field.options ?? []"
         :key="String(opt.value)"
@@ -443,7 +488,7 @@ function setArrayItemField(index, fieldKey, v) {
   write(has ? current.filter((v) => v !== opt.value) : [...current, opt.value]);
 }"
       >
-        {{ labelText(opt.label) }}
+        {{ resolveLocalized(opt.label) }}
       </button>
     </div>
 
@@ -453,52 +498,90 @@ function setArrayItemField(index, fieldKey, v) {
       :model-value="value ?? ''"
       @update:model-value="(v) => write(v)"
     >
-      <SelectTrigger class="h-8 text-sm bg-white">
-        <SelectValue placeholder="Pick a secret" />
+      <SelectTrigger :aria-label="resolveLocalized(field.label)" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
+        <SelectValue :placeholder="t('integration.nodeConfig.secretRef.placeholder')" />
       </SelectTrigger>
       <SelectContent>
         <SelectItem v-for="k in secretKeys" :key="k" :value="k">{{ k }}</SelectItem>
       </SelectContent>
     </Select>
 
-    <!-- credentials-ref — pick a credential of the required type -->
+    <!-- credentials-ref — pick a credential of the required type. Compact:
+         creating and importing live INSIDE the picker as action rows; no
+         Manage link (it navigated out of the editor mid-edit). -->
     <template v-else-if="field.type === 'credentials-ref'">
       <Select
         :model-value="value ?? ''"
-        @update:model-value="(v) => write(v)"
+        @update:model-value="(v) => onCredentialSelect(v)"
       >
-        <SelectTrigger class="h-8 text-sm bg-white">
-          <SelectValue placeholder="Pick a credential" />
+        <SelectTrigger :aria-label="credTriggerLabel(field)" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
+          <!-- The trigger renders the bound credential itself instead of letting
+               `SelectValue` echo the chosen row. Left to itself it shows that row's
+               `textContent`, which glues the name and the state pill into one word —
+               "Revenexx APIConnected". Rendering it here keeps the pill a pill, and
+               the placeholder has to be drawn by hand because a slot replaces the
+               fallback that would otherwise show it. -->
+          <SelectValue :placeholder="t('integration.nodeConfig.credential.placeholder')">
+            <span v-if="bound" class="flex min-w-0 items-center gap-1.5">
+              <span class="min-w-0 truncate">{{ bound.credential.name }}</span>
+              <!-- No `title` on this badge: `SelectValue` renders itself with
+                   `pointer-events: none`, so nothing inside it is ever hovered and a
+                   tooltip here would be a reason nobody can reach. A failed test's
+                   reason is prose beneath the field instead. -->
+              <span
+                class="shrink-0 rounded-full border px-1.5 py-px text-[10px] font-medium"
+                :class="bound.state.toneClass"
+              >
+                {{ bound.state.label }}
+              </span>
+            </span>
+            <!-- A stored id the tenant's credentials no longer contain: the
+                 credential was deleted, and the field would otherwise look untouched
+                 while the workflow still runs into the dead reference. `loaded`
+                 keeps the wait before the first response out of it. -->
+            <span v-else-if="value && credentialsLoaded" class="text-rose-600">{{ UNKNOWN_CREDENTIAL }}</span>
+            <span v-else class="text-muted-foreground">{{ t("integration.nodeConfig.credential.placeholder") }}</span>
+          </SelectValue>
         </SelectTrigger>
         <SelectContent>
-          <SelectItem v-for="c in credsForField(field)" :key="c.id" :value="c.id">
+          <!-- The state comes from `credentialState`, the same derivation the
+               credentials table and the detail dialog use. This picker used to read
+               `status` alone and call everything that was not `needs_reauth`
+               "Connected" — including a credential nobody had ever tested, which is
+               a pass claimed for a test that never ran. -->
+          <SelectItem v-for="o in credOptions" :key="o.credential.id" :value="o.credential.id">
             <span class="flex items-center gap-1.5">
-              <span class="size-1.5 shrink-0 rounded-full" :class="c.status === 'needs_reauth' ? 'bg-amber-500' : 'bg-emerald-500'" />
-              <span class="min-w-0 truncate">{{ c.name }}</span>
-              <span v-if="c.status === 'needs_reauth'" class="shrink-0 text-[10px] text-amber-600">reconnect</span>
+              <span class="min-w-0 truncate">{{ o.credential.name }}</span>
+              <!-- `title` carries why a failed test failed, the way the credentials
+                   table does it. Without it "Failed" is a verdict with no appeal. A
+                   row is a real hit target, unlike the closed trigger above. -->
+              <span
+                class="shrink-0 rounded-full border px-1.5 py-px text-[10px] font-medium"
+                :class="o.state.toneClass"
+                :title="o.state.message ?? void 0"
+              >{{ o.state.label }}</span>
             </span>
           </SelectItem>
+          <div v-if="!credOptions.length" class="px-2 py-1.5 text-sm text-muted-foreground">
+            {{ t("integration.nodeConfig.credential.empty") }}
+          </div>
+          <SelectSeparator />
+          <SelectItem :value="CRED_ACTION_NEW" class="font-medium text-violet-600 data-[highlighted]:text-violet-700">
+            {{ t("integration.nodeConfig.credential.action.new") }}
+          </SelectItem>
+          <SelectItem v-if="acceptsSftp(field)" :value="CRED_ACTION_SFTP" class="font-medium text-violet-600 data-[highlighted]:text-violet-700">
+            {{ t("integration.nodeConfig.credential.action.importSftp") }}
+          </SelectItem>
         </SelectContent>
       </Select>
-      <p v-if="credNeedsReauth(value)" class="text-sm text-amber-600">
-        This credential needs reconnect.
+      <!-- What the state has to add, as text rather than as a tooltip — the shape
+           the detail dialog uses beneath its own badge. -->
+      <p v-if="bound?.state.key === 'needs_reauth'" class="text-sm text-amber-600">
+        {{ t("integration.nodeConfig.credential.state.needsReauth") }}
+      </p>
+      <p v-else-if="bound?.state.key === 'failed' && bound.state.message" class="text-sm break-words text-rose-600">
+        {{ t("integration.nodeConfig.credential.state.failed", { message: bound.state.message }) }}
       </p>
-      <div class="flex items-center gap-3">
-        <button type="button" class="text-sm font-medium text-violet-600 hover:underline" @click="credCreateOpen = true">
-          + New credential
-        </button>
-        <button
-          v-if="acceptsSftp(field)"
-          type="button"
-          class="text-sm font-medium text-violet-600 hover:underline"
-          @click="sftpImportOpen = true"
-        >
-          Import SFTP account
-        </button>
-        <NuxtLink to="/integrations/credentials" class="text-sm text-muted-foreground hover:underline">
-          Manage →
-        </NuxtLink>
-      </div>
       <IntegrationsCredentialCreateDialog
         v-model:open="credCreateOpen"
         :credential-type="field.credentialType"
@@ -524,10 +607,11 @@ function setArrayItemField(index, fieldKey, v) {
           </span>
           <button
             type="button"
+            :aria-label="t('integration.nodeConfig.array.removeItemAria', { label: resolveLocalized(field.label), n: idx + 1 })"
             class="flex size-5 items-center justify-center rounded text-muted-foreground hover:text-rose-600"
             @click="removeArrayItem(idx)"
           >
-            <Trash2 :size="11" />
+            <TrashBin :size="11" />
           </button>
         </div>
         <div
@@ -536,11 +620,14 @@ function setArrayItemField(index, fieldKey, v) {
           class="space-y-1"
         >
           <Label class="text-mono text-muted-foreground">
-            {{ labelText(sub.label) }}
+            {{ resolveLocalized(sub.label) }}
           </Label>
+          <!-- The label above repeats per item, so it cannot own an id; the
+               input carries its own name including the item number. -->
           <Input
+            :aria-label="t('integration.nodeConfig.array.subFieldAria', { label: resolveLocalized(sub.label), n: idx + 1 })"
             :model-value="item[sub.key] ?? ''"
-            :placeholder="labelText(sub.placeholder)"
+            :placeholder="resolveLocalized(sub.placeholder)"
             class="h-7 text-sm bg-white"
             :class="sub.type === 'expression' ? 'font-mono' : ''"
             @update:model-value="(v) => setArrayItemField(idx, sub.key, v)"
@@ -555,16 +642,17 @@ function setArrayItemField(index, fieldKey, v) {
         @click="pushArrayItem(Object.fromEntries((field.items?.properties ?? []).map((p) => [p.key, ''])))"
       >
         <Plus :size="11" />
-        Add row
+        {{ t("integration.nodeConfig.action.addRow") }}
       </Button>
     </div>
 
     <!-- fallback: JSON textarea for complex types -->
     <Textarea
       v-else
+      :aria-label="resolveLocalized(field.label)"
       :model-value="value === void 0 ? '' : JSON.stringify(value, null, 2)"
       rows="3"
-      class="text-sm font-mono bg-white"
+      class="rounded-md border border-black/[0.08] ring-0 shadow-none text-sm font-mono bg-white"
       @update:model-value="(v) => {
   try {
     write(v ? JSON.parse(String(v)) : void 0);
@@ -573,12 +661,18 @@ function setArrayItemField(index, fieldKey, v) {
 }"
     />
 
-    <!-- validation feedback: hard error, else soft required hint, else constraint hint -->
-    <p v-if="formatError" class="text-sm text-rose-600">
-      {{ formatError }}
+    <!-- inline help BELOW the control, quiet — same pattern as the Settings
+         tab (boolean uses its description as the toggle label instead) -->
+    <p v-if="descriptionText && field.type !== 'boolean'" class="text-xs text-muted-foreground leading-snug">
+      {{ descriptionText }}
     </p>
-    <p v-else-if="requiredMissing" class="text-sm text-amber-600">
-      Required
+
+    <!-- validation feedback: the error (local format violation, else what the
+         last save refused), otherwise the constraint hint. A required field the
+         user has simply not reached yet says nothing beyond the * on its
+         label — the nagging would outnumber the help. -->
+    <p v-if="fieldError" class="text-sm text-rose-600">
+      {{ fieldError }}
     </p>
     <p v-else-if="constraintHint" class="text-sm text-muted-foreground">
       {{ constraintHint }}

package/dist/runtime/components/Integrations/NodeConfigField.vue.d.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;

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

@@ -20,6 +20,12 @@ type __VLS_Props = {
     dynamicOutputs?: Record<string, NodeManifestOutput[]>;
     /** Workflow id — enables sampling real values from the latest run. */
     workflowId?: number | string;
+    /**
+     * Config key → why the LAST SAVE refused it. Not live validation: the server
+     * is the only judge, so a fix shows once it is saved. Absent for a node the
+     * last save had no complaint about.
+     */
+    refusedFields?: Record<string, string>;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;