@revenexx/studio-integrations 0.7.0 → 1.1.0

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

@@ -259,7 +259,10 @@ async function submit() {
           class="rounded-md px-3 py-2 text-sm"
           :class="testResult.ok ? 'bg-emerald-500/10 text-emerald-700' : 'bg-rose-500/10 text-rose-700'"
         >
-          {{ testResult.ok ? t("integration.credentials.shared.test.ok") : testResult.error ?? t("integration.credentials.shared.test.failed") }}
+          <!-- The type's own sentence, either way. This is the surface where it is
+               worth the most: nothing is stored yet, so the operator is deciding
+               whether these access data reach what they meant (specs/credential-test.md). -->
+          {{ testResult.ok ? testResult.message ?? t("integration.credentials.shared.test.ok") : testResult.error ?? testResult.message ?? t("integration.credentials.shared.test.failed") }}
         </div>
       </div>
 

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

@@ -214,7 +214,13 @@ async function connect() {
               {{ t("integration.credentials.detail.action.reconnect") }}
             </Button>
           </div>
-          <p v-if="state.key === 'failed' && state.message" class="mt-1 text-sm break-words opacity-90">
+          <!-- The stored sentence, and only while nothing fresher is on screen. The
+               live box below shows the result of a test just run, and the reload that
+               follows it puts the very same sentence here — so both would print it
+               twice, and past the length the platform truncates at, twice differently.
+               The freshly returned one wins, being whole (specs/credential-test.md
+               AC-1). -->
+          <p v-if="state.message && !liveTest" class="mt-1 text-sm break-words opacity-90">
             {{ state.message }}
           </p>
           <p v-else-if="state.key === 'untested'" class="mt-1 text-sm opacity-80">
@@ -314,7 +320,7 @@ async function connect() {
             class="rounded-md px-3 py-2 text-sm"
             :class="liveTest.ok ? 'bg-emerald-500/10 text-emerald-700' : 'bg-rose-500/10 text-rose-700'"
           >
-            {{ liveTest.ok ? t("integration.credentials.shared.test.ok") : liveTest.error ?? t("integration.credentials.shared.test.failed") }}
+            {{ liveTest.ok ? liveTest.message ?? t("integration.credentials.shared.test.ok") : liveTest.error ?? liveTest.message ?? t("integration.credentials.shared.test.failed") }}
           </div>
 
           <!-- The save was refused. Same rule as the create dialog: stated here, and at

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

@@ -3,6 +3,7 @@ import { onMounted, ref, watch } from "vue";
 import { RefreshCircle as Loader2, Refresh as ReplayIcon, TrashBinMinimalistic as TrashBin } from "#solar-icons";
 import { Badge, Button } from "@revenexx/studio";
 import { toast } from "vue-sonner";
+import { deadLetterStatusClass, deadLetterStatusLabel } from "../../utils/statusStyle";
 const props = defineProps({
   workflowId: { type: Number, required: true }
 });
@@ -62,11 +63,6 @@ async function onDiscard(dl) {
     busyId.value = null;
   }
 }
-function statusClass(status) {
-  if (status === "pending") return "bg-amber-500/15 text-amber-700 border-amber-500/25";
-  if (status === "replayed") return "bg-emerald-500/15 text-emerald-700 border-emerald-500/25";
-  return "bg-slate-500/15 text-slate-600 border-slate-500/20";
-}
 function fmt(iso) {
   if (!iso) return "\u2014";
   try {
@@ -117,7 +113,7 @@ function fmt(iso) {
         :key="dl.id"
         class="flex items-start gap-3 px-3 py-2.5"
       >
-        <Badge variant="outline" :class="['border text-xs font-medium uppercase shrink-0 mt-0.5', statusClass(dl.status)]">{{ dl.status }}</Badge>
+        <Badge variant="outline" :class="['border text-xs font-medium uppercase shrink-0 mt-0.5', deadLetterStatusClass(dl.status)]">{{ deadLetterStatusLabel(dl.status) }}</Badge>
         <div class="min-w-0 flex-1">
           <div class="text-sm break-words">{{ dl.reason || t("integration.deadLetters.reason.fallback") }}</div>
           <div class="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-muted-foreground font-mono">

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

@@ -220,8 +220,13 @@ function insert(expr) {
       <span class="min-w-0 truncate font-mono" :class="preview.misses ? 'text-amber-600' : 'text-emerald-700'">{{ preview.resolved }}</span>
     </p>
 
+    <!-- Named, because the same expressions are offered twice on this surface —
+         here and in the panel beside the form — and a popup nothing can address
+         is a popup nothing can test either. -->
     <div
       v-if="open && hasSuggestions"
+      role="group"
+      :aria-label="t('integration.nodeConfig.expression.picker.aria')"
       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"
     >
       <div class="shrink-0 border-b border-black/[0.06] p-1">

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

@@ -5,6 +5,9 @@ type __VLS_Props = {
     field: ConfigField;
     config: Record<string, unknown>;
     modelValue: unknown;
+    /** The settings this one sits among, so a dependency can be named as the
+     *  operator sees it rather than by its config key. */
+    siblingFields?: ConfigField[];
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: unknown) => any;

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

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, ref } from "vue";
+import { isVersionExecutable } from "../../data/integrationNodeCatalog";
 import { ChevronDown } from "lucide-vue-next";
 import { Input } from "@revenexx/studio";
 import { resolveLocalized } from "../../utils/localize";
@@ -8,12 +9,14 @@ const props = defineProps({
   version: { type: String, required: true },
   field: { type: Object, required: true },
   config: { type: Object, required: true },
-  modelValue: { type: null, required: true }
+  modelValue: { type: null, required: true },
+  siblingFields: { type: Array, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
 const t = useIntegrationsT();
 const search = ref("");
 const focused = ref(false);
+const versionNotReady = computed(() => !isVersionExecutable(props.slug, props.version));
 const q = useNodeConfigResolve({
   slug: () => props.slug,
   version: () => props.version,
@@ -22,6 +25,10 @@ const q = useNodeConfigResolve({
   dependsOn: () => props.field.dependsOn,
   search: () => focused.value ? search.value : ""
 });
+const unsatisfiedLabels = computed(() => q.unsatisfied.value.map((key) => {
+  const sibling = props.siblingFields?.find((f) => f.key === key);
+  return sibling && resolveLocalized(sibling.label) || key;
+}));
 const options = computed(() => q.data.value?.options ?? []);
 const isMulti = computed(() => props.field.type === "multiselect");
 const disabledControlClass = "flex h-8 items-center rounded-md border border-black/[0.08] bg-white px-2 text-sm text-muted-foreground opacity-50";
@@ -76,10 +83,16 @@ function toggleMulti(optValue) {
 
 <template>
   <div>
+    <!-- the pinned version cannot be run, so there is nothing to resolve -->
+    <template v-if="versionNotReady">
+      <div :class="disabledControlClass">—</div>
+      <p class="mt-1 text-sm text-amber-600">{{ t("integration.nodeConfig.dynamicField.versionNotReady") }}</p>
+    </template>
+
     <!-- gated: required dependencies still unset -->
-    <template v-if="q.gated.value">
+    <template v-else-if="q.gated.value">
       <div :class="disabledControlClass">—</div>
-      <p class="mt-1 text-sm text-amber-600">{{ t("integration.nodeConfig.dynamicField.gated", { keys: q.unsatisfied.value.join(", ") }) }}</p>
+      <p class="mt-1 text-sm text-amber-600">{{ t("integration.nodeConfig.dynamicField.gated", { keys: unsatisfiedLabels.join(", ") }) }}</p>
     </template>
 
     <!-- first load: no data yet -->

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

@@ -5,6 +5,9 @@ type __VLS_Props = {
     field: ConfigField;
     config: Record<string, unknown>;
     modelValue: unknown;
+    /** The settings this one sits among, so a dependency can be named as the
+     *  operator sees it rather than by its config key. */
+    siblingFields?: ConfigField[];
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: unknown) => any;

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

@@ -87,6 +87,7 @@ const resolvedFields = computed(() => q.data.value?.fields ?? []);
           :version="version"
           :secret-keys="secretKeys"
           :static-keys="staticKeys"
+          :sibling-fields="resolvedFields"
           :depth="(depth ?? 0) + 1"
           @set="(k, v) => emit('set', k, v)"
         />

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

@@ -6,6 +6,9 @@ type __VLS_Props = {
     version: string;
     secretKeys: string[];
     staticKeys?: string[];
+    /** The whole set of settings this one belongs to — a `dynamic` field names the
+     *  ones it waits for out of it (NodeConfigDynamicField). */
+    siblingFields?: ConfigField[];
     depth?: number;
     variables?: Record<string, WorkflowVariable>;
     upstreamOutputs?: Array<{

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

@@ -23,6 +23,7 @@ const props = defineProps({
   version: { type: String, required: true },
   secretKeys: { type: Array, required: true },
   staticKeys: { type: Array, required: false },
+  siblingFields: { type: Array, required: false },
   depth: { type: Number, required: false },
   variables: { type: Object, required: false },
   upstreamOutputs: { type: Array, required: false },
@@ -395,6 +396,7 @@ function setArrayItemField(index, fieldKey, v) {
       :field="field"
       :config="config"
       :model-value="value"
+      :sibling-fields="siblingFields"
       @update:model-value="write"
     />
 

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

@@ -6,6 +6,9 @@ type __VLS_Props = {
     version: string;
     secretKeys: string[];
     staticKeys?: string[];
+    /** The whole set of settings this one belongs to — a `dynamic` field names the
+     *  ones it waits for out of it (NodeConfigDynamicField). */
+    siblingFields?: ConfigField[];
     depth?: number;
     variables?: Record<string, WorkflowVariable>;
     upstreamOutputs?: Array<{

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

@@ -28,13 +28,13 @@ type __VLS_Props = {
     refusedFields?: Record<string, string>;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: () => any;
     update: (next: WorkflowTrigger | WorkflowNode) => any;
+    close: () => any;
     remove: () => any;
     navigate: (id: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: (() => any) | undefined;
     onUpdate?: ((next: WorkflowTrigger | WorkflowNode) => any) | undefined;
+    onClose?: (() => any) | undefined;
     onRemove?: (() => any) | undefined;
     onNavigate?: ((id: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,7 +1,8 @@
 <script setup>
 import { computed, nextTick, onMounted, provide, ref, watch } from "vue";
-import { AddCircle as Plus, TrashBinMinimalistic as TrashBin, Copy } from "#solar-icons";
-import { ChevronDown, ChevronLeft, ChevronRight, Clock, Database, MessageSquareText, Play, Search, Webhook, X, Zap } from "lucide-vue-next";
+import { AddCircle as Plus, Copy, Magnifier as Search, TrashBinMinimalistic as TrashBin } from "#solar-icons";
+import { triggerGlyph as glyphForTrigger } from "../../data/triggerGlyphs";
+import { ChevronDown, ChevronLeft, ChevronRight, Database, MessageSquareText, X } from "lucide-vue-next";
 import { toast } from "vue-sonner";
 import {
   Button,
@@ -27,15 +28,18 @@ import {
   ToggleGroupItem
 } from "@revenexx/studio";
 import EventTypeCombobox from "./EventTypeCombobox.vue";
-import { findManifest, nodeCategoryLabel } from "../../data/integrationNodeCatalog";
+import { findManifest, nodeCategoryLabel, isVersionExecutable, newestExecutableVersion } from "../../data/integrationNodeCatalog";
 import {
   collectUpstreamNodes,
+  inputPortsForManifest,
   nodeOutputExpr,
   portsForNode,
   triggerPayloadExpr,
   variableExpr
 } from "../../data/nodeInputData";
 import { portDotClass } from "../../data/portTone";
+import { computeLoopBodies, manifestIterates } from "../../data/loopBody";
+import { nodeDisplayLabel } from "../../utils/validationFindings";
 import { authChoiceFromConfig, configPatchForAuthChoice } from "../../data/webhookAuth";
 import {
   dataTypeOf,
@@ -87,14 +91,21 @@ const manifest = computed(() => {
   const wn = draftNode.value;
   return wn ? findManifest(wn.nodeSlug, wn.nodeVersion) : null;
 });
-const TRIGGER_GLYPHS = { manual: Play, schedule: Clock, webhook: Webhook, event: Zap };
+const versionExecutable = computed(() => {
+  const wn = draftNode.value;
+  return wn ? isVersionExecutable(wn.nodeSlug, wn.nodeVersion) : true;
+});
+const readyVersion = computed(() => {
+  const wn = draftNode.value;
+  return wn ? newestExecutableVersion(wn.nodeSlug) : null;
+});
 const TRIGGER_LABELS = computed(() => ({
   manual: t("integration.nodeInspector.trigger.type.manual"),
   schedule: t("integration.nodeInspector.trigger.type.schedule"),
   webhook: t("integration.nodeInspector.trigger.type.webhook"),
   event: t("integration.nodeInspector.trigger.type.event")
 }));
-const triggerGlyph = computed(() => TRIGGER_GLYPHS[draftTrigger.value?.type ?? "manual"]);
+const triggerGlyph = computed(() => glyphForTrigger(draftTrigger.value?.type));
 const namePlaceholder = computed(() => {
   if (draftNode.value) return resolveLocalized(manifest.value?.name) || draftNode.value.nodeSlug;
   return t("integration.nodeInspector.trigger.placeholder", { type: TRIGGER_LABELS.value[draftTrigger.value?.type ?? "manual"] });
@@ -115,6 +126,7 @@ const nameValue = computed(() => {
   const name = draft.value.name;
   return resolveDisplayName(name);
 });
+const dialogTitle = computed(() => t("integration.nodeInspector.dialogTitle", { name: nameValue.value || namePlaceholder.value }));
 function writeName(name) {
   draft.value = { ...draft.value, name };
 }
@@ -759,8 +771,25 @@ function navigate(offset) {
   emit("navigate", target);
 }
 const outputView = ref("schema");
+const selfInputs = computed(() => inputPortsForManifest(manifest.value));
 const selfSample = computed(() => draftNode.value ? sampleFor(draftNode.value.id) : void 0);
 const selfPorts = computed(() => draftNode.value ? withSampledFields(portsForNode(draftNode.value, manifest.value, props.dynamicOutputs?.[draftNode.value.id]), selfSample.value) : []);
+const loopBody = computed(() => {
+  if (!draftNode.value || !manifestIterates(manifest.value)) return null;
+  const nodes = props.nodes ?? [];
+  const [body] = computeLoopBodies([draftNode.value.id], props.edges ?? []);
+  if (!body) return null;
+  const labelOf = (id) => {
+    const n = nodes.find((x) => x.id === id);
+    return n ? nodeDisplayLabel(n) : id;
+  };
+  const inBody = (ids) => nodes.filter((n) => ids.has(n.id)).map((n) => labelOf(n.id));
+  return {
+    size: body.nodeIds.size,
+    names: inBody(body.nodeIds),
+    joined: inBody(body.joinedWithDone)
+  };
+});
 const selfSampleJson = computed(() => selfSample.value ? JSON.stringify(selfSample.value, null, 2) : "");
 const selfPinned = computed(() => !!draftNode.value && !!pinnedSamples.value[draftNode.value.id]);
 watch(selfSample, (s) => {
@@ -867,6 +896,11 @@ async function runTestStep() {
   <!-- Fills the editor's near-fullscreen config lightbox; the Dialog owns
        width/height, border and the close control. -->
   <div class="flex min-h-0 flex-1 flex-col bg-white">
+    <!-- The dialog's accessible name. Not drawn: the header below says the same
+         thing in the name field and the line under it, and says it better. -->
+    <DialogTitle class="sr-only">
+      {{ dialogTitle }}
+    </DialogTitle>
     <!-- Header -->
     <div class="flex shrink-0 items-center gap-3 border-b border-black/[0.06] px-4 py-3">
       <div class="flex size-9 shrink-0 items-center justify-center rounded-md border border-black/[0.06] bg-slate-50 text-slate-600">
@@ -1032,6 +1066,36 @@ async function runTestStep() {
           <p class="mt-0.5 text-xs leading-snug text-muted-foreground">
             {{ t("integration.nodeInspector.input.description") }}
           </p>
+          <!-- What this node accepts, as opposed to the list below, which is what
+               other nodes offer it. It sits in the header because somebody
+               choosing a value is already reading here, and because the port
+               belongs to the node being configured rather than to any row in the
+               list (AC-20). -->
+          <div v-if="isNode && selfInputs.length" class="mt-2 space-y-1 border-t border-black/[0.06] pt-2">
+            <div v-for="p in selfInputs" :key="p.name" class="space-y-0.5">
+              <div class="flex items-baseline gap-1.5">
+                <!-- Not the uppercase treatment the section labels below use, and
+                     that is the point: NODES / TRIGGER / VARIABLES each head a list
+                     of values a click inserts, so they are a series of *sources*.
+                     This heads nothing and is not a source — it is a statement about
+                     the node being configured. Dressed as a fourth member of that
+                     series it told the reader there was a fourth place to take data
+                     from. -->
+                <span
+                  class="text-xs font-medium text-muted-foreground"
+                  :class="selfInputs.length > 1 ? 'font-mono' : ''"
+                >
+                  {{ selfInputs.length > 1 ? `${p.name}:` : t("integration.nodeInspector.input.expects.heading") }}
+                </span>
+                <span class="font-mono text-[10px] text-slate-500">
+                  {{ p.dataType }}<template v-if="p.dataType"> · </template>{{ p.required ? t("integration.nodeInspector.input.expects.required") : t("integration.nodeInspector.input.expects.optional") }}
+                </span>
+              </div>
+              <p v-if="resolveLocalized(p.description)" class="text-xs leading-snug text-muted-foreground">
+                {{ resolveLocalized(p.description) }}
+              </p>
+            </div>
+          </div>
           <div class="relative mt-2">
             <Search :size="12" class="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
             <input
@@ -1098,7 +1162,30 @@ async function runTestStep() {
                   </span>
                 </button>
                 <div v-show="!sectionClosed(s.id)" class="space-y-2 border-t border-black/[0.06] px-2 py-2">
-                <div v-for="p in s.ports" :key="p.name" class="space-y-1 pl-0.5">
+                <!-- These ports belong to an UPSTREAM node, so the sentence is that
+                     node's. On a 300px column it is a tooltip rather than text: the
+                     values below are what this panel is for, and a sentence per port
+                     pushes them out of view. The readable copy is the Output tab
+                     (AC-19).
+
+                     The title hangs on the port's whole block, not on its name row:
+                     that row is only drawn for a node with several ports or a
+                     branch/error one, so a single `default` port — which is most
+                     nodes, No Operation among them — would have had nowhere to carry
+                     it and the tooltip would have been dead in the commonest case.
+
+                     What that buys is uneven, and it is the reason this is a
+                     convenience rather than a promise: each field row carries its own
+                     title (the expression to copy), and a child title wins, so the
+                     sentence is read by resting on the port's name or the space around
+                     its rows rather than on a row itself. Where a reader is owed the
+                     text outright, that is the Output tab. -->
+                <div
+                  v-for="p in s.ports"
+                  :key="p.name"
+                  class="space-y-1 pl-0.5"
+                  :title="resolveLocalized(p.description) || void 0"
+                >
                   <div v-if="s.ports.length > 1 || p.kind !== 'default'" class="flex items-center gap-1.5">
                     <span class="size-1.5 rounded-full" :class="portDotClass(p.kind, p.name)" />
                     <span class="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">{{ p.name }}</span>
@@ -1207,6 +1294,19 @@ async function runTestStep() {
         <!-- Same TabBar as the workflow page — one tab look everywhere. -->
         <TabBar v-model="tab" :tabs="inspectorTabs" class="shrink-0 px-4" />
 
+        <!-- The pinned version has no built code, so nothing here can be tested
+             or resolved. Above the tabs' content rather than inside one of them:
+             the state belongs to the node, not to a tab, and a reader who opens
+             this node on Parameters would otherwise meet the card's mark outside
+             and no word about it inside. Outside the scrolling area so it cannot
+             be scrolled away from. -->
+        <p
+          v-if="isNode && !versionExecutable"
+          class="mx-4 mb-1 shrink-0 rounded-md border border-rose-200 bg-rose-50 px-2.5 py-1.5 text-sm text-rose-700"
+        >
+          {{ readyVersion ? t("integration.nodeInspector.notice.versionNotReady.upgrade", { version: draftNode?.nodeVersion ?? "", ready: readyVersion }) : t("integration.nodeInspector.notice.versionNotReady.none", { version: draftNode?.nodeVersion ?? "" }) }}
+        </p>
+
         <div
           class="min-h-0 flex-1 overflow-y-auto p-4"
           :class="dragActive ? 'chip-drag-live' : ''"
@@ -1654,6 +1754,7 @@ async function runTestStep() {
                 :version="draftNode.nodeVersion"
                 :secret-keys="secretKeys"
                 :static-keys="(manifest.config ?? []).map((f2) => f2.key)"
+                :sibling-fields="manifest.config ?? []"
                 :depth="0"
                 :variables="variables"
                 :upstream-outputs="upstreamOutputs"
@@ -1693,6 +1794,7 @@ async function runTestStep() {
                     :version="draftNode.nodeVersion"
                     :secret-keys="secretKeys"
                     :static-keys="(manifest.config ?? []).map((f2) => f2.key)"
+                    :sibling-fields="manifest.config ?? []"
                     :depth="0"
                     :variables="variables"
                     :upstream-outputs="upstreamOutputs"
@@ -1734,6 +1836,7 @@ async function runTestStep() {
                 :version="draftNode.nodeVersion"
                 :secret-keys="secretKeys"
                 :static-keys="(manifest?.config ?? []).map((f2) => f2.key)"
+                :sibling-fields="manifest?.config ?? []"
                 :depth="0"
                 :variables="variables"
                 :upstream-outputs="upstreamOutputs"
@@ -1852,6 +1955,28 @@ async function runTestStep() {
                rather than a permanent column — it is the last thing done, if it
                is done at all, and it needs the width when it is. -->
           <div v-else-if="tab === 'output' && draftNode" class="mx-auto w-full max-w-5xl space-y-5">
+            <!-- An iterator's own tab leads with what it repeats (PO-277): the
+                 ports below say what leaves Item and Done, and this says how much
+                 of the workflow hangs off the first of them. Above the port
+                 schema on purpose — the count is the thing a reader came here to
+                 check, and it is the one statement the canvas cannot make. -->
+            <section v-if="loopBody" class="space-y-1.5 rounded-md border border-black/[0.06] bg-white p-3">
+              <span class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.output.loopBody.heading") }}</span>
+              <p class="text-sm text-foreground/80">
+                {{ t("integration.nodeInspector.output.loopBody.size", loopBody.size) }}
+              </p>
+              <p v-if="loopBody.names.length" class="text-xs text-muted-foreground">
+                {{ t("integration.nodeInspector.output.loopBody.names", { names: loopBody.names.join(", ") }) }}
+              </p>
+              <!-- Amber, not rose, and not a validation finding: a body wired
+                   into the Done side may be exactly what the author wanted, so
+                   this states what the engine will do and leaves the judgement
+                   to them. Routing it through the findings would refuse an
+                   activation that is legitimate. -->
+              <p v-if="loopBody.joined.length" class="text-xs text-amber-700">
+                {{ t("integration.nodeInspector.output.loopBody.joined", loopBody.joined.length, { names: loopBody.joined.join(", ") }) }}
+              </p>
+            </section>
             <section class="space-y-2">
               <div class="flex items-center justify-between gap-2">
                 <p class="text-xs text-muted-foreground">
@@ -1878,8 +2003,8 @@ async function runTestStep() {
                 <Button
                   size="sm"
                   class="h-8"
-                  :disabled="testRunning"
-                  :title="t('integration.nodeInspector.output.test.runTitle')"
+                  :disabled="testRunning || !versionExecutable"
+                  :title="versionExecutable ? t('integration.nodeInspector.output.test.runTitle') : void 0"
                   @click="runTestStep"
                 >
                   {{ testRunning ? t("integration.nodeInspector.output.test.running") : t("integration.nodeInspector.output.test.action") }}
@@ -1892,7 +2017,7 @@ async function runTestStep() {
                   {{ testInputOpen ? t("integration.nodeInspector.output.test.hideInput") : t("integration.nodeInspector.output.test.editInput") }}
                 </button>
                 <span class="text-xs text-muted-foreground">
-                  {{ t("integration.nodeInspector.output.test.runHint") }}
+                  {{ versionExecutable ? t("integration.nodeInspector.output.test.runHint") : "" }}
                 </span>
               </div>
               <Textarea
@@ -1999,7 +2124,7 @@ async function runTestStep() {
           {{ t("integration.common.action.cancel") }}
         </Button>
         <Button size="sm" class="h-8" @click="save">
-          {{ t("integration.common.action.save") }}
+          {{ t("integration.nodeInspector.footer.done") }}
         </Button>
       </div>
     </div>

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

@@ -28,13 +28,13 @@ type __VLS_Props = {
     refusedFields?: Record<string, string>;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: () => any;
     update: (next: WorkflowTrigger | WorkflowNode) => any;
+    close: () => any;
     remove: () => any;
     navigate: (id: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: (() => any) | undefined;
     onUpdate?: ((next: WorkflowTrigger | WorkflowNode) => any) | undefined;
+    onClose?: (() => any) | undefined;
     onRemove?: (() => any) | undefined;
     onNavigate?: ((id: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -3,7 +3,8 @@ import type { PortEntry } from '../../data/nodeInputData.js';
  * The ports a node hands downstream, with their declared fields and whatever
  * sample value is known for each.
  *
- * Rendered from one place — the Output tab (specs/node-configuration.md AC-4). It
+ * Rendered from one place — the Output tab (specs/node-configuration.md AC-4,
+ * and AC-19 for the sentences the publisher wrote about a port and its fields). It
  * keeps its own file for readability rather than for reuse: the schema list is
  * a self-contained tree with its own type glyphs and sample formatting, and
  * inlining it would bury the tab's own markup.

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

@@ -1,6 +1,7 @@
 <script setup>
 import { portDotClass } from "../../data/portTone";
-defineProps({
+import { resolveLocalized } from "../../utils/localize";
+const props = defineProps({
   ports: { type: Array, required: true },
   valueAt: { type: Function, required: true }
 });
@@ -16,6 +17,15 @@ const TYPE_GLYPHS = {
 function typeGlyph(dataType) {
   return dataType ? TYPE_GLYPHS[dataType] ?? null : null;
 }
+function portText(p) {
+  return resolveLocalized(p.description);
+}
+function fieldText(f) {
+  return resolveLocalized(f.description);
+}
+function saysNoFields(p) {
+  return !portText(p) || props.valueAt(p.name) !== null;
+}
 </script>
 
 <template>
@@ -25,14 +35,30 @@ function typeGlyph(dataType) {
         <span class="size-1.5 rounded-full" :class="portDotClass(p.kind, p.name)" />
         <span class="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">{{ p.name }}</span>
       </div>
-      <div v-if="p.fields.length" class="space-y-0.5">
-        <div v-for="f in p.fields" :key="f.name" class="flex min-w-0 items-baseline gap-1 font-mono text-[11px]">
-          <span v-if="typeGlyph(f.dataType)" class="shrink-0 font-semibold" :class="typeGlyph(f.dataType).cls">{{ typeGlyph(f.dataType).char }}</span>
-          <span class="shrink-0 text-slate-700">{{ f.name }}</span>
-          <span v-if="valueAt(p.name, f.name) !== null" class="min-w-0 truncate text-slate-400">: {{ valueAt(p.name, f.name) }}</span>
-        </div>
+      <p v-if="portText(p)" class="text-[11px] leading-snug text-muted-foreground">
+        {{ portText(p) }}
+      </p>
+      <!-- Two columns, sized to the widest field rather than split down the
+           middle: `max-content` puts every sentence one gap after the longest
+           name, so short names like `count` do not leave the reader crossing the
+           dialog to find what they mean, and the names still line up with each
+           other. The sample value is capped for the same reason — left free it
+           would widen the column and push the sentences back out. Both cells are
+           always emitted, or a field with nothing to say would slide the next
+           row's name into the sentence column. -->
+      <div v-if="p.fields.length" class="grid grid-cols-[max-content_minmax(0,1fr)] items-baseline gap-x-6 gap-y-0.5">
+        <template v-for="f in p.fields" :key="f.name">
+          <div class="flex min-w-0 items-baseline gap-1 font-mono text-[11px]">
+            <span v-if="typeGlyph(f.dataType)" class="shrink-0 font-semibold" :class="typeGlyph(f.dataType).cls">{{ typeGlyph(f.dataType).char }}</span>
+            <span class="shrink-0 text-slate-700">{{ f.name }}</span>
+            <span v-if="valueAt(p.name, f.name) !== null" class="max-w-56 truncate text-slate-400">: {{ valueAt(p.name, f.name) }}</span>
+          </div>
+          <p class="min-w-0 text-[11px] leading-snug text-muted-foreground">
+            {{ fieldText(f) }}
+          </p>
+        </template>
       </div>
-      <p v-else class="text-[11px] leading-snug text-muted-foreground">
+      <p v-else-if="saysNoFields(p)" class="text-[11px] leading-snug text-muted-foreground">
         {{ t("integration.nodeInspector.output.schema.noFields") }}<template v-if="valueAt(p.name) !== null">{{ t("integration.nodeInspector.output.schema.sampledSuffix") }} <span class="font-mono">{{ valueAt(p.name) }}</span></template>.
       </p>
     </div>

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

@@ -3,7 +3,8 @@ import type { PortEntry } from '../../data/nodeInputData.js';
  * The ports a node hands downstream, with their declared fields and whatever
  * sample value is known for each.
  *
- * Rendered from one place — the Output tab (specs/node-configuration.md AC-4). It
+ * Rendered from one place — the Output tab (specs/node-configuration.md AC-4,
+ * and AC-19 for the sentences the publisher wrote about a port and its fields). It
  * keeps its own file for readability rather than for reuse: the schema list is
  * a self-contained tree with its own type glyphs and sample formatting, and
  * inlining it would bury the tab's own markup.